diff --git a/incoming/pattern-study/README.md b/incoming/pattern-study/README.md
index 8e485b9b6..abdcd3523 100644
--- a/incoming/pattern-study/README.md
+++ b/incoming/pattern-study/README.md
@@ -1,6 +1,6 @@
 # 패턴 연구 2026-10
 
-새 패턴 138개를 마흔네 갈래로 나눠 만들었어요. 1판에서 열세 갈래로 23개를 만들고, 2판에서 1판에 없던 아홉 갈래로 16개를, 3판에서 하나를, 4판에서 새 갈래인 직물로 하나를 더했어요. 5판은 새 패턴 없이 1판의 Euclid Pulse 를 다시 짰고, 6판은 세운 패널의 128줄을 위아래로 다 쓰는 패턴 하나를 더했어요. 7판은 또렷한 모양이 멀리 흘러가는 지도 칸에 패턴 하나를 더했어요. 8판은 새 갈래인 기계로 하나를 더했어요. 9판은 새 패턴 없이 1판의 Sprout 을 다시 짰어요. 10판은 세운 패널을 떨어지는 블록의 우물로 쓰는 패턴 하나를 더했어요. 11판은 여러 색이 꽤 멀리 흘러가는 지도 칸에 패턴 하나를 더했어요. 12판은 새 갈래인 천체로 하나를 더했어요. 13판은 새 패턴 없이 1판의 Glyph Rain 을 다시 짰어요. 14판은 절차가 바뀌기 전에 띄운 바퀴라서, 세운 패널의 높이를 다 떨어지는 폭포 하나를 더했어요. 15판은 바뀐 절차의 첫 판이라 열 갈래에 새 패턴을 하나씩, 모두 열 개를 더했어요. 도시와 음악 갈래는 그때 새로 열었어요. 16판도 열 갈래에 하나씩 열 개를 더했고, 바다와 곤충 갈래를 새로 열었어요. 17판도 열 갈래에 하나씩 열 개를 더했고, 전자 회로와 장난감 갈래를 새로 열었어요. 18판도 열 갈래에 하나씩 열 개를 더했고, 유리와 광물·결정, 놀이공원 갈래를 새로 열었어요. 19판도 열 갈래에 하나씩 열 개를 더했고, 부엌과 버섯·균사 갈래를 새로 열었어요. 20판도 열 갈래에 하나씩 열 개를 더했고, 새와 화학·실험 갈래를 새로 열었어요. 21판도 열 갈래에 하나씩 열 개를 더했고, 종이와 운동·경기 갈래를 새로 열었어요. 22판도 열 갈래에 하나씩 열 개를 더했고, 몸과 비행 갈래를 새로 열었어요. 23판도 열 갈래에 하나씩 열 개를 더했고, 무대·공연과 짐승 갈래를 새로 열었어요. [index.html](index.html) 을 브라우저로 열면 전부 한 장에서 돌아가요. 맨 위 지도에서 점을 누르면 그 패턴으로 가고, 카드의 슬라이더가 노브 넷이에요. 마음에 드는 것은 「코드 복사」로 가져가 Pattern Lab 의 CODE 칸에 붙여 넣으면 같은 그림이 나와요. 페이지는 파일 하나라서 바깥에서 받아 오는 것이 없어요.
+새 패턴 148개를 마흔여섯 갈래로 나눠 만들었어요. 1판에서 열세 갈래로 23개를 만들고, 2판에서 1판에 없던 아홉 갈래로 16개를, 3판에서 하나를, 4판에서 새 갈래인 직물로 하나를 더했어요. 5판은 새 패턴 없이 1판의 Euclid Pulse 를 다시 짰고, 6판은 세운 패널의 128줄을 위아래로 다 쓰는 패턴 하나를 더했어요. 7판은 또렷한 모양이 멀리 흘러가는 지도 칸에 패턴 하나를 더했어요. 8판은 새 갈래인 기계로 하나를 더했어요. 9판은 새 패턴 없이 1판의 Sprout 을 다시 짰어요. 10판은 세운 패널을 떨어지는 블록의 우물로 쓰는 패턴 하나를 더했어요. 11판은 여러 색이 꽤 멀리 흘러가는 지도 칸에 패턴 하나를 더했어요. 12판은 새 갈래인 천체로 하나를 더했어요. 13판은 새 패턴 없이 1판의 Glyph Rain 을 다시 짰어요. 14판은 절차가 바뀌기 전에 띄운 바퀴라서, 세운 패널의 높이를 다 떨어지는 폭포 하나를 더했어요. 15판은 바뀐 절차의 첫 판이라 열 갈래에 새 패턴을 하나씩, 모두 열 개를 더했어요. 도시와 음악 갈래는 그때 새로 열었어요. 16판도 열 갈래에 하나씩 열 개를 더했고, 바다와 곤충 갈래를 새로 열었어요. 17판도 열 갈래에 하나씩 열 개를 더했고, 전자 회로와 장난감 갈래를 새로 열었어요. 18판도 열 갈래에 하나씩 열 개를 더했고, 유리와 광물·결정, 놀이공원 갈래를 새로 열었어요. 19판도 열 갈래에 하나씩 열 개를 더했고, 부엌과 버섯·균사 갈래를 새로 열었어요. 20판도 열 갈래에 하나씩 열 개를 더했고, 새와 화학·실험 갈래를 새로 열었어요. 21판도 열 갈래에 하나씩 열 개를 더했고, 종이와 운동·경기 갈래를 새로 열었어요. 22판도 열 갈래에 하나씩 열 개를 더했고, 몸과 비행 갈래를 새로 열었어요. 23판도 열 갈래에 하나씩 열 개를 더했고, 무대·공연과 짐승 갈래를 새로 열었어요. 24판도 열 갈래에 하나씩 열 개를 더했고, 공사·건설과 도자기 갈래를 새로 열었어요. [index.html](index.html) 을 브라우저로 열면 전부 한 장에서 돌아가요. 맨 위 지도에서 점을 누르면 그 패턴으로 가고, 카드의 슬라이더가 노브 넷이에요. 마음에 드는 것은 「코드 복사」로 가져가 Pattern Lab 의 CODE 칸에 붙여 넣으면 같은 그림이 나와요. 페이지는 파일 하나라서 바깥에서 받아 오는 것이 없어요.
 
 패널은 세로로 서요. 64 LED 너비에 128 LED 높이가 기본이라서 모든 패턴의 머리에 `@matrix 64x128` 이 있어요. 레포의 패널 설정은 그대로예요. `shared/constants.json` 의 `PANEL_GEOM_DEFAULT` 는 `128x64_SINGLE` 이고, 패턴이 가로세로를 바꾼 판을 적으면 펌웨어의 `firmware/patternflow/src/core_canvas.h` 가 90도 돌려 패널을 꽉 채워요. 1판 23개는 처음에 가로 128×64 로 만들었다가 2판에서 세로로 다시 짰어요.
 
@@ -249,6 +249,21 @@
 | [Sequins](patterns/sequins.js) | 직물·짜임 | 뒤집히는 스팽글을 촘촘히 단 쿠션이 패널을 채워요. 은빛 비늘이 엇갈린 줄로 겹쳐 있고, 보이지 않는 손끝이 지나가면 스팽글이 차례로 모서리를 보이며 넘어가 하트, 별, 고양이 얼굴, 번개, 파도를 분홍 면으로 그려요. 손바닥이 위에서 아래로 쓸면 다시 은빛이 돼요. |
 | [Skein](patterns/skein.js) | 새 | 해 진 뒤 하늘을 올려다보면 기러기 떼가 V 자로 패널 위쪽, 북쪽으로 날아가요. 지친 선두가 한쪽 줄로 물러나면 다른 기러기가 앞에 서고, 커다란 보름달 앞을 지날 때는 새카만 실루엣이 돼요. 뒤따라온 작은 떼가 꼬리에 붙기도 해요. |
 
+### 24판
+
+| 패턴 | 갈래 | 한 줄 |
+| --- | --- | --- |
+| [Breath](patterns/breath.js) | 몸 | 후두에서 횡격막까지 해부도처럼 그린 폐가 숨을 쉬어요. 들이쉬면 횡격막이 내려가고 갈비뼈가 들리며, 푸르스름한 공기가 일곱 번 더 갈라지는 기관지를 타고 내려가 보랏빛 허파꽈리를 빨갛게 물들여요. K1 이 맑은 공기에서 입김이 하얗게 서리는 겨울과 매연 낀 도시까지 공기를 바꾸고, K1 을 누르면 기침을 해요. |
+| [Emergence](patterns/emergence.js) | 짐승 | 해 질 녘 메마른 언덕의 동굴 입구에서 박쥐 떼가 검은 리본처럼 쏟아져 나와, 노을 하늘을 비틀며 패널 꼭대기까지 기둥으로 올라가요. 기둥은 두 가닥으로 갈라졌다 다시 붙고, 매가 내리꽂히면 박쥐들이 고리처럼 물러났다가 구멍이 닫혀요. K1 을 끝까지 돌리면 밤이 되어 박쥐가 보름달 앞을 지나가요. |
+| [Flying Trapeze](patterns/flying-trapeze.js) | 무대·공연 | 밤의 서커스 천막 꼭대기를 올려다봐요. 빨강과 크림 줄무늬 천 아래에서 플라이어가 공중그네를 타고 나가 공중제비를 돌고, 무릎으로 매달린 캐처가 손을 잡아요. 팔로 스폿 셋이 연무 속에 빛줄기를 그으며 따라가고, 차례가 끝나면 그물로 떨어져 튀어 올라요. K1 을 누르면 북이 울리고 세 바퀴 공중제비가 나와요. |
+| [Pendulum Wave](patterns/pendulum-wave.js) | 물리·스프링 | 길이가 조금씩 다른 진자 줄을 위에서 내려다봐요. 한꺼번에 놓은 추들이 한 줄로 흔들리다가 뱀처럼 휘고, 세 줄, 두 줄로 엇갈렸다가 28초 만에 다시 한 줄로 모여요. K1 이 강철에서 놋쇠와 구리를 지나 무지개 유리구슬까지 추를 바꾸고, K4 를 올리면 추가 지나간 자리에 빛 꼬리가 남아요. |
+| [Pipe Organ](patterns/pipe-organ.js) | 음악·악기 | 어두운 성당의 파이프오르간 정면이 패널을 채워요. 보이지 않는 오르가니스트가 여덟 화음 코랄을 되풀이하면, 소리 나는 파이프마다 입에서 빛이 켜지고 몸통을 따라 정상파 띠가 올라가요. 가운데 가장 긴 파이프가 가장 낮은 음이에요. K1 이 플루트의 파랑, 프린시펄의 은빛, 리드의 금빛과 빨강 사이에서 음전을 고르고, K1 을 누르면 파이프 열아홉이 다 울려요. |
+| [Potter's Wheel](patterns/potters-wheel.js) | 도자기 | 밤의 도자기 공방에서 녹색 갓 램프 아래 물레가 돌아요. 두 손이 흙덩이를 가운데로 모아 벽을 끌어올리면 그릇이 76~92줄 높이로 자라고, 물레 자국이 램프 쪽에서 반짝이며 옆으로 흘러가요. 다 빚은 병과 항아리는 줄로 잘려 선반에 올라가 젖은 흙빛에서 하얗게 말라 가요. K1 이 흙을 테라코타에서 검은 흙까지 바꾸고, K1 을 누르면 그릇이 주저앉아요. |
+| [Shoot 'em Up](patterns/shoot-em-up.js) | 픽셀 아트 | 세로로 흐르는 아케이드 슈팅 게임이 혼자 돌아요. 섬과 해안, 들판과 빨간 지붕 마을이 아래로 흘러가고, 흰 전투기가 노란 탄을 쏘며 S 자로 들어오는 편대와 포탑을 돌리는 포함을 떨어뜨려요. 화면 위 3분의 1을 덮는 보스가 내려와 고리와 나선 탄막을 뿌리다 연쇄 폭발로 부서져요. K1 이 열대 바다에서 붉은 협곡, 밤 도시, 우주 정거장까지 판을 바꾸고, K1 을 누르면 폭탄이 터져요. |
+| [Thermal](patterns/thermal.js) | 비행 | 여름 오후의 밭 위에서 흰 글라이더가 열기류를 타고 타원을 그리며 맴돌아 올라가요. 말똥가리 둘이 더 좁게 같이 돌고, 꼭대기의 적운은 자라며 바닥이 어두워져요. 구름 바닥에 닿은 글라이더는 다음 열기류로 미끄러져 가고 아래에서 새 글라이더가 들어와요. K1 을 누르면 윈치가 글라이더 하나를 끌어올려요. |
+| [Tower Crane](patterns/tower-crane.js) | 공사·건설 | 해 질 녘 올라가는 콘크리트 건물 옆에 노란 타워크레인이 서서, 마당의 벽판과 철근 다발, 거푸집, 콘크리트 버킷을 차례로 꼭대기 층에 올려요. 붐이 원근 속에서 돌며 짧아졌다 길어지고, 버킷이 바닥을 부으면 건물이 한 층 자라 새 층 창에 불이 들어와요. K1 을 끝까지 돌리면 밤이 되어 투광등이 켜져요. |
+| [Waggle Dance](patterns/waggle-dance.js) | 곤충 | 관찰 벌통의 벌집 한 장이 패널 높이로 서요. 위에 봉한 꿀, 그 아래 여덟 색 꽃가루 띠와 애벌레 방이 있고, 벌 여든 마리가 기어 다녀요. 아래쪽 빈 벌집에서는 꽃가루를 단 벌이 몸을 흔들며 8 자 춤을 추고 따르는 벌들이 둘러서요. 춤의 각도가 해에서 본 꽃밭의 방향이라 K4 를 돌리면 모든 춤이 같이 돌아요. |
+
 ## 1판 갈래마다
 
 노브 넷의 자리는 갈래가 달라도 거의 같아요. K1 은 색이고 K2 는 빠르기예요. K3 은 모양을 바꾸고, K4 는 그 갈래만의 손잡이예요. 그래서 처음 보는 패턴도 K1 과 K2 는 손이 먼저 알아요.
@@ -959,6 +974,50 @@ K4 Spate 0 이면 물이 실 몇 가닥으로 갈라져요. 처음 값 0.06 이
 
 지도 주제 없이 남은 자리로 새 갈래에 넷째 패턴을 냈어요. 22판 「다음 판 감」이 아직 없다고 적은, 밤하늘을 건너는 철새 떼예요. 1판의 Flock 은 이웃만 보고 나는 무리이고, Skein 은 선두를 꼭짓점에 두고 양 팔에 줄을 서는 V 자 대형이에요. 선두는 처음에 3~5초에, 그 뒤로는 6~9초마다 한쪽 팔로 물러나요. 하늘의 노을과 달무리가 판을 거의 다 밝혀서, 걱정은 채움의 아래 끝이 아니라 위 끝이었어요. 채움은 0.975 로 축 끝 1.0 아래이고, 오른쪽 아래 구석 하늘을 거의 검게 낮춰도 달무리가 그 구석을 다시 밝혀서 0.981 에서 0.975 로만 내려갔어요. 씨앗 열여섯에서 `thirds` 는 97/97/96, 바뀐 LED 는 위 72~77%, 가운데 77~84%, 아래 49~57%, 모양 바뀜은 0.057~0.068 이에요. K3 Geese 는 작은 기러기 몇 마리만 늘 때 0.02 였고, 큰 떼일수록 높이 날아 작게 보이도록 크기와 간격을 같이 바꾸고 첫 떼를 패널 가운데에서 열자 0.033 이 됐어요.
 
+## 24판
+
+24판도 새 패턴 열 개를 열 갈래에 하나씩 냈어요. 주제 1 은 겨눌 칸이 없었어요. 23판 뒤로 `--gaps` 가 찍는 칸에 `*` 가 하나도 없어서예요. 그 대신 남은 자리로 짠 Waggle Dance 가 `*` 없이 비어 있던 마지막 칸, 복잡도 × 채움 4,3 에 섰어요. 이제 지도 21장의 칸이 다 차요. 주제 2 로 공사·건설 갈래를 Tower Crane 으로, 도자기 갈래를 Potter's Wheel 로 열었어요. 주제 4 는 Tower Crane 과 Potter's Wheel, Emergence, Flying Trapeze, Thermal, Pipe Organ, Shoot 'em Up 으로 일곱이에요. 일곱 다 3분의 1마다 켜진 LED 도, 2~8초 동안 24/255 넘게 바뀐 LED 도 5% 를 넘어요. Waggle Dance 와 Breath, Pendulum Wave 는 주제 없이 남은 자리로 짰어요. 무대·공연과 짐승은 패턴이 하나뿐이던 갈래라 이번에 둘째가 섰고, 몸과 비행에는 셋째가, 곤충과 물리·스프링, 음악·악기, 픽셀 아트에는 넷째가 섰어요. 주제 3 은 앞 바퀴 PR 에 창작자 글이 없어서 하지 않았어요. 열 개를 다 넣고 재도 일곱 축의 양 끝은 그대로라서 칸 경계는 14판과 같아요.
+
+### Tower Crane
+
+주제 2 로 공사·건설 갈래를 열고, 주제 4 로 세운 패널의 128줄을 짓고 있는 건물 하나로 채웠어요. 위 3분의 1은 붐과 균형추, 가운데는 콘크리트 골조와 창, 아래는 믹서 트럭과 투광등이 선 마당이에요. 하늘과 건물을 다 칠해서 `thirds` 는 99/95/100 이고, 2~8초 동안 바뀐 LED 는 52.6/62.2/47.8% 예요. 구름을 멈추고 재도 45.2/54.1/36.3% 라서, 그 값은 갈고리가 마당까지 내려갔다가 벽판을 35번 줄까지 끌어올리는 길과 도는 붐에서 와요. 첫 판은 갈고리가 마당으로 내려가는 데서 열리고 첫 타설이 22초쯤이어서 모양 바뀜이 0.020 으로 Galton Board 아래였어요. 타설 중간에서 열어 3.0초에 한 층이 끝나고 0.7초 뒤 새 층 창에 불이 들어오게 하고 위 하늘을 어둡게 하자 0.036 이 됐고, 지금은 씨앗 열여섯에서 0.036~0.048 이에요. K2 Speed 도 타설과 새 층이 첫 3초 안에 들어오자 0.03 에서 0.05 가 됐어요. 낮의 창은 콘크리트와 밝기가 같아 창으로 읽히지 않았어요. 유리 낀 층의 창턱을 (78,86,102) 로 어둡게 하고 켜진 유리를 호박색으로 두었어요.
+
+### Potter's Wheel
+
+주제 2 로 도자기 갈래를 열고, 주제 4 로 물레 위에서 자라는 그릇 하나가 패널 높이의 60~72% 를 쓰게 했어요. 선반에서 마르는 그릇이 위 3분의 1을 채워서 `thirds` 는 97/92/79 이고, 바뀐 LED 는 씨앗 열여섯에서 위 15.2~31.6%, 가운데 91.5~97.2%, 아래 81.0~81.3% 예요. 그릇을 64~90줄로 빚을 때는 씨앗 넷에서 위 3분의 1의 바뀐 LED 가 14.5, 0.6, 16.1, 0.0% 였어요. 다 빚은 그릇이 위 3분의 1에 닿느냐가 씨앗마다 갈렸어요. 76~92줄로 키우고 첫 그릇을 늘 가장 키 큰 세 꼴 가운데 하나로 두자 다 넘었어요. 첫 판의 물레 자국은 용수철이나 쌓은 동전처럼 보였어요. 자국의 깊이를 0.32 에서 0.07 로 줄이고 반사광 지수를 16 에서 40 으로 올리자 자국이 램프 쪽 반사 띠 안에서만 보이고, 그 띠 안에서 흙 알갱이와 흙물 자국이 옆으로 흘러가 물레가 도는 것이 읽혀요. K1 Clay 는 그릇과 흙물 색만 바꿀 때 0.02 였고, 흙먼지가 벽과 선반 판자에 흙빛을 묻히게 하자 0.066 이 됐어요.
+
+### Emergence
+
+주제 4 로 짐승 갈래의 둘째를 세웠어요. 23판이 「다음 바퀴」에 남긴 물음은 어두운 하늘에서 박쥐 떼만으로 3분의 1마다 5% 를 넘기느냐였어요. 하늘과 언덕, 구름을 지우고 박쥐만 제 어두운 만큼 밝혀 재면, 한 프레임에 켜진 LED 가 씨앗 넷에서 13.4~13.6/9.9~10.2/5.1~5.3% 예요. 아래 3분의 1은 기둥이 좁고 동굴 입구 앞의 박쥐까지 세서 겨우 넘어요. 2~8초 동안 바뀐 LED 로 세면 76.5~79.3/72.0~81.1/23.5~25.0% 라서 떼는 128줄을 다 쓰고, 표의 `thirds` 94/96/92 는 거의 다 노을 하늘이에요. 매 한 마리의 몫도 셌어요. 4.5초에 매가 기둥을 뚫고 지나가면 바뀐 LED 가 위 3분의 1에서 6 포인트, 가운데에서 17~26 포인트 올라요. 박쥐는 날개를 V, 一, ^ 꼴로 바꾸는 1~3 LED 점이에요. 첫 판은 동굴 위 기둥 밑동이 검은 줄기 하나로 뭉쳐 연기처럼 보였어요. 리본 두께를 ±0.35 에서 ±0.6 으로 넓히고 입구에서 나오는 속도를 1.6 배로 올리자, 아래 15줄에 박쥐 28마리가 흩어져 하나하나 읽혀요. K1 을 끝까지 돌린 밤에는 모양 바뀜이 0.024~0.026 으로 축 아래 끝에 붙어요.
+
+### Flying Trapeze
+
+주제 4 로 무대·공연 갈래의 둘째를 세웠어요. 위 3분의 1은 천막 꼭대기의 줄무늬 천과 전구 고리, 가운데는 그네와 캐처, 아래는 그물과 어두운 객석이에요. `thirds` 는 81/35/34 이고 바뀐 LED 는 93.9/87.9/57.5% 예요. 사람이 10 LED 키라서 모양 바뀜과 노브 반응은 거의 다 사람을 따라가는 팔로 스폿 빛줄기와, 받기와 착지에 맞춰 바뀌는 천막 조명에서 와요. 첫 판은 천을 50번 줄까지 밝히고 연무가 짙어서 채움 0.610, 모양 바뀜 0.193 에 사람이 빛 속에 묻혔어요. 빛줄기를 좁히고 등에서 멀수록 옅어지게 하고, 천을 어둡게 해 트러스 위에서 끝나게 하자 채움 0.516, 모양 바뀜 0.135 가 되고 사람이 보였어요. 그 대신 K1 Lights 가 0.08 에서 0.05 로 내려갔어요. 세운 패널의 너비가 64 LED 라 손을 놓는 자리와 받는 자리가 5~8 LED 밖에 안 떨어져서, 재주는 건너가는 것보다 제자리에서 도는 고리로 보여요. 시작 노브에서는 2.7초에 손을 놓아 3.7초에 잡히고, 다음 차례는 6.1초에 그물로 떨어져 7.0초에 튀어 올라요.
+
+### Thermal
+
+주제 4 로 비행 갈래의 셋째를 세웠어요. 아래는 밭과 산울타리, 가운데는 열기류를 맴도는 글라이더와 말똥가리 둘, 위는 자라는 적운이에요. 하늘과 땅을 다 칠해서 `thirds` 는 100/100/99 이고, 바뀐 LED 는 씨앗 열여섯에서 위 32.4~36.3%, 가운데 21.2~25.3%, 아래 24.5~30.3% 예요. 아래 3분의 1의 값은 구름 그림자가 밭을 건너가며 내요. 첫 판은 모양 바뀜이 0.021 이었어요. 구름이 자라는 것이 0.008 밖에 보태지 않아서 칸마다 재 보니, 가장 밝은 채널로 보면 200~222 의 파란 하늘과 흰 구름이 거의 같은 밝기였어요. 천정을 (22,76,196) 에서 (14,50,150) 으로, 중간 하늘을 (52,122,222) 에서 (44,108,206) 으로 어둡게 하자 위의 16줄 띠 둘이 0.0066 에서 0.0207 이 되고 모양 바뀜이 0.042 가 됐어요. 지금은 씨앗 열여섯에서 0.034~0.039 예요. 움직임 0.027 은 Analemma, Stained Glass 와 같은 값으로, Star Trails 다음으로 낮아요. 글라이더는 실제 꼴대로 투영해서, 날개 18 LED 가 다 보이는 것은 이쪽으로 오거나 멀어질 때이고 옆을 보일 때는 동체와 T 꼬리 10 LED 남짓이에요.
+
+### Pipe Organ
+
+주제 4 로 음악·악기 갈래의 넷째를 세웠어요. 앞 파이프 열아홉이 길이대로 다장조 음계이고, 가운데 탑의 92줄 파이프가 가장 낮은 음이에요. 베이스는 탑 파이프를, 선율은 위쪽 작은 파이프를 오가서 화음이 바뀔 때마다 패널 위아래가 같이 바뀌어요. 케이스를 다 칠해 `thirds` 는 63/84/85 예요. 장미창 빛을 끄고 재도 바뀐 LED 가 씨앗 넷에서 24.3~39.8/38.6~52.2/18.2~27.1% 라서, 128줄을 바꾸는 것은 음악이에요. 첫 판에서는 쉬는 주석 파이프가 밝고 푸르러서 파란 플루트 빛이 묻혔어요. K1 0.0061, K4 0.0090, 모양 바뀜 0.023 이었어요. 바탕 빛을 (112,120,140) 에서 (56,56,64) 로 낮춰도 K1 은 0.010 이었고, 소리 나는 파이프의 빛이 좌우 16열까지 이웃 주석에 비치게 하자 모양 바뀜 0.079, K1 0.02 가 되어 처음 검사를 통과했어요. 리드 음전에 16피트와 12도, 15도를 더하자 K1 이 0.062 가 됐어요.
+
+### Shoot 'em Up
+
+주제 4 로 픽셀 아트 갈래의 넷째를 세웠어요. 위 3분의 1에는 점수와 보스, 가운데에는 편대, 아래에는 100~118번 줄의 전투기가 서요. 바닥이 1초에 12 LED 로 흘러서 `thirds` 는 98/99/100, 바뀐 LED 는 97.3/100.0/100.0% 이고, 이 값은 거의 다 흐르는 바닥이에요. 노브 검사는 첫 3초를 봐요. 처음 K4 Bullets 는 그때 보스 탄이 하나도 없어서 0.0041 이었고, 탄막 게임처럼 탄이 짙을수록 바닥을 최대 36% 어둡게 하자 0.10 이 됐어요. 첫 보스는 체력을 110 에서 60 으로 줄여 2.2초에 내려와 7.1초부터 부서지게 했어요. 마지막 폭발 섬광은 8.8초에 두었어요. 그 섬광 하나가 창 안에 들면 모양 바뀜이 0.30 이고, 창 밖이면 씨앗 열여섯에서 0.090~0.128 이에요. 판마다 색 몇 가지로만 칠해서 가장자리가 0.743 으로 열 개 가운데 가장 또렷하고, 복잡도는 0.308 로 가장 낮아요. 첫 판은 37 KB 였어요. 25 KB 아래로 줄이며 전투기가 죽고 다시 나는 것과 배의 물결 자국, 우주 판의 고리 행성을 뺐어요.
+
+### Waggle Dance
+
+남은 자리로 곤충 갈래의 넷째를 세우고, 지도에 남은 하나뿐인 빈 칸인 복잡도 × 채움 4,3 을 겨눴어요. 복잡도가 2.173 을 넘고 채움이 0.558~0.815 인 자리예요. 씨앗 열여섯 모두 그 칸에 서요. 복잡도 2.471~2.550, 채움 0.705~0.749 예요. 첫 판은 복잡도 2.766 으로 축 끝 2.735 를 넘었고 채움이 0.850 이었어요. 봉한 애벌레 방 사이 이음매와 벌을 어둡게 하자 2.653, 0.711 이 됐는데, 열린 방의 테두리를 밝혀야 육각 격자가 읽혔고 그러자 2.765, 0.838 로 돌아갔어요. 이음매를 0.15 로 낮추고 창 볕이 거기 닿지 않게 하고, 애벌레 방을 올려 아래 줄을 빈 벌집으로 두자 2.689, 0.782 가 됐어요. 그다음은 벌이 보이게 하는 일이었어요. 벌과 벌집이 같은 호박색이라, 벌집의 반사율을 0.66 으로 낮추고 벌을 금빛으로 밝히자 2.488, 0.749 가 됐어요. LED 마다 밝기 ±6%, 채널마다 ±3% 의 낟알이 복잡도를 0.13 올리지만, 낟알 없이도 2.434 로 칸 안이에요. 육각 줄 간격을 5.196 에서 5 로 4% 눌러야 모든 칸이 3-5-5-5-3 LED 로 똑같이 그려졌어요.
+
+### Breath
+
+남은 자리로 몸 갈래의 셋째를 세웠어요. 23판까지 「다음 판 감」이 아직 없다고 적어 둔 숨 쉬는 폐예요. 후두에서 횡격막까지 해부도처럼 그렸고, 기관이 두 기관지로 갈라진 뒤 일곱 번 더 갈라져 포도송이 129개, 허파꽈리 681개에 닿아요. 숨을 내쉰 폐가 판의 42% 를 덮어서, 22판 Circulation 처럼 몸 안에서만 바뀌는 노브가 낮게 나오는 일은 없었어요. 첫 판부터 노브 넷이 0.10/0.13/0.09/0.10 이었어요. 노브마다 폐 전체의 색이나 크기를 바꿔서예요. 숨마다 허파꽈리가 보라에서 빨강으로 물들어 모양 바뀜이 0.135 이고, 씨앗 열여섯에서 0.134~0.137 이에요. 처음 기관지 나무는 갈래마다 끝점과 무게중심을 잇는 선으로 나눴는데, 평면의 폐가 너비의 두 배 높이라 아래 엽이 길게 나란한 줄로 찼어요. 셋째 갈래부터 긴 축을 가로질러 나누자 줄기 하나에 곁가지가 붙는 꼴이 됐어요. 가는 가지는 둘레에 반지름만큼 최대 1.7 LED 의 그림자를 둘러야 허파꽈리 위에서 보였어요. 세 반복문의 `Math.hypot` 을 `sqrt` 로 바꾸자 한 프레임이 2.9 ms 에서 1.9 ms 가 됐어요. 숨을 내쉴 때 허파꽈리가 보라로 돌아가는 것은 그림의 몫이에요. 실제로 폐를 떠나는 피는 산소를 실은 채예요.
+
+### Pendulum Wave
+
+남은 자리로 물리·스프링 갈래의 넷째를 세웠어요. 진자 줄을 위에서 내려다봐서, 16~24개의 추가 4번 줄부터 124번 줄까지 세로로 늘어서고 저마다 ±22 LED 를 옆으로 흔들려요. i 번째 진자가 한 주기에 22+i 번 흔들리고, 시작 노브에서 한 주기가 28초예요. 0.65초에 판에서 놓으면 2~8초 동안 줄이 뱀처럼 휘고, 10초쯤 세 줄, 15초쯤 두 줄로 엇갈렸다가 28초에 다시 한 줄이 돼요. `Math.random` 을 쓰지 않아서 씨앗 열여섯이 다 같은 값이에요. 첫 판은 색이 0.060 으로 축 아래 끝 Rainstorm 의 0.066 밑이었어요. 호두나무 판을 붉게 하고 바닥을 밝히자 0.098 이 됐는데, 이번에는 모양 바뀜이 0.039 에서 0.023 으로 떨어졌어요. 모양 바뀜은 추와 바닥의 밝기 차이에서 나와서, 추를 밝히고 바닥을 다시 어둡게 해 색 0.080, 모양 바뀜 0.033 에 세웠어요. 판에 붙잡았다 놓는 첫 장면은 모양 바뀜을 올리지 않았어요. 0.030 이 0.029 가 됐어요.
+
 ## 지도
 
 지도의 자리는 손으로 매긴 점수가 아니라 잰 값이에요. 패턴마다 처음 노브 값으로 Lab 엔진에서 8초를 돌리고, 2초부터 6초 동안의 화면을 재요. LED 하나의 밝기는 세 채널 가운데 가장 밝은 값으로 봐요.
@@ -1001,17 +1060,17 @@ ESP32-S3 로 옮길 때 걸릴 것도 있어요. Reaction Diffusion 은 Node 에
 
 ## 다음 판 감
 
-10월 24일 `dev`(`02d079e`)의 128개에 23판의 열 개를 더한 138개에서 잰 값이에요. 패턴 바퀴는 주제 안에서 무엇을 할지 고를 때 이 절을 읽고, 한 것은 빼고 새로 본 것을 더해요.
+10월 24일 `dev`(`b1af21e`)의 138개에 24판의 열 개를 더한 148개에서 잰 값이에요. 패턴 바퀴는 주제 안에서 무엇을 할지 고를 때 이 절을 읽고, 한 것은 빼고 새로 본 것을 더해요.
 
 ### 지도의 빈 칸
 
 `study.ts --check --gaps` 가 `*` 를 붙인 칸 가운데 그림이 떠오르는 칸이에요. 칸은 가로와 세로를 낮은 쪽부터 1~4 로 세요. 페이지 기본 지도(가장자리 × 움직임)는 16칸이 다 차 있어요.
 
-23판 뒤로는 `*` 가 붙은 칸이 없어요. 22판까지 남은 두 칸, 촘촘함 × 모양 바뀜 3,4 와 4,3 에 23판의 Bait Ball 과 Sequins 가 섰어요. 남은 빈 칸은 복잡도 × 채움 4,3 하나예요. 복잡도가 2.173 을 넘고 채움이 0.558~0.815 인 자리인데, 복잡도 축 끝의 Contour Map(2.735)을 빼고 세면 차는 칸이라 `*` 가 붙지 않아요. 그 아래 복잡도 2.4~2.6 에 선 Woodpecker, Dripstone, Agate, Guilloché 는 채움이 다 0.93 을 넘어요.
+23판 뒤로는 `*` 가 붙은 칸이 없어요. 22판까지 남은 두 칸, 촘촘함 × 모양 바뀜 3,4 와 4,3 에 23판의 Bait Ball 과 Sequins 가 섰어요. 하나 남은 빈 칸이던 복잡도 × 채움 4,3 에는 24판의 Waggle Dance 가 섰어요. 복잡도가 2.173 을 넘고 채움이 0.558~0.815 인 자리예요. 복잡도 축 끝의 Contour Map(2.735)을 빼고 세면 차는 칸이라 `*` 가 붙지 않았고, 그 아래 복잡도 2.4~2.6 에 선 Woodpecker, Dripstone, Agate, Guilloché 는 채움이 다 0.93 을 넘었어요. 이제 지도 21장의 칸이 다 차서 `--gaps` 는 모든 줄에 `none` 을 찍어요. 주제 1 은 축 끝의 패턴 하나가 축을 늘려 새 빈 칸이 날 때까지 고를 칸이 없어요. Waggle Dance 에서 어려운 쪽은 채움이었어요. 벌집은 꺼진 LED 가 거의 없는 그림이라, 빈 방 바닥과 봉한 방 사이 이음매를 24 아래로 눌러 채움 0.732 를 냈어요. 복잡도는 켜진 LED 의 세 채널을 따로 흔드는 낟알로 쉽게 올라서, 첫 판은 오히려 2.766 으로 축 끝을 넘었어요.
 
 촘촘함이 0.299 를 넘는 패턴이 20판에서 셋 늘었고, 셋 다 그 값을 다른 길로 냈어요. Agate 는 1 LED 띠를 벽까지의 거리로 그어서, 축에 나란한 띠는 이웃 쌍의 절반에서만 차이가 나고 대각선 띠는 70% 쯤에서 나요. 방향이 고르게 섞이면 띠 너비 0.85 LED 언저리가 가장 높았어요. Millefiori 는 촘촘함을 가장 밝은 채널로 재서 코발트와 카나리아 노랑이 맞닿아도 턱이 0 이었어요. 고리마다 밝은 유리와 그 유리를 어둡게 뽑은 유리를 번갈아 넣어야 했어요. Sunglint 는 반짝임을 물결 띠마다 체커판의 한쪽 칸에만 둬서 반짝임끼리 닿지 않게 했어요. 셋 다 채움이 0.85 를 넘어서, 촘촘함 × 채움 4,4 는 꺼진 LED 없이도 닿는 칸이었어요. 21판의 Sandpile 이 일곱째예요. 칸 하나가 LED 하나이고 알 셋 옆의 알 둘이 가장 흔한 이웃 쌍이라, 밝기를 0, 2, 1, 3 차례로 올려 더미 안의 촘촘함이 0.40 언저리예요. 판의 75% 는 덮여야 0.3 을 넘어요. 22판의 Pin Art 와 Night Flight 가 여덟째와 아홉째예요. Pin Art 는 핀과 틈의 체커 결이라 이웃 쌍이 모두 핀과 틈의 쌍이고, Night Flight 는 Pancakes 의 체커 결에 1 LED 가로등을 LED 의 12.7% 만큼 얹어서 가장자리 0.258 에 촘촘함 0.328 이에요. 촘촘함과 가장자리는 가장 밝은 채널로 재서, 색을 섞는 자리마다 섞은 뒤 가장 밝은 채널을 다시 맞춰야 했어요. 땅과 강물을 섞은 자리에서 가장 밝은 채널이 0.68 까지 내려가 체커 결의 37 이 41~60 으로 넘어갔고, 그대로 둔 판은 가장자리가 0.05 높았어요. 23판의 Sequins 가 열째예요. 체커 결 없이, 가로 5 LED 와 세로 3 LED 간격으로 엇갈려 단 스팽글의 빛점과 그림자 줄로 0.327 을 냈어요. 촘촘함은 무늬의 모양보다 턱의 크기를 따라가서, 스팽글 몸통을 0.8 에서 0.6 으로 어둡게 하자 은빛 면이 0.339 에서 0.311 로 내려갔어요.
 
-모양 바뀜이 높은 칸을 겨누면 움직이는 것과 바탕의 밝기가 달라야 해요. 3판의 Lava Lamp 는 방울이 화면 높이를 다 오르는데도 왁스와 물이 둘 다 밝아서 모양 바뀜이 0.068 이에요. 4판의 Jacquard Loom 도 천이 1초에 4 LED 씩 내려가는데, 씨실 여섯 색이 모두 밝기 끝까지라 0.041 이에요. 19판의 Rabbit Ears 도 첫 판에서는 그림이 눈 속으로 사라져도 블록 평균이 0.5 쯤으로 같아서 0.153 이었어요. 바다를 어둡게 하고 신호가 없을 때 눈을 밝게 올리자 0.286 이 됐어요. 모양 바뀜의 칸은 4 LED 너비에 16 LED 높이라서, 옆으로 쓸고 가는 것이 위아래로 오르내리는 것보다 네 배 잘 잡혀요. 7판의 Searchlights 가 그렇게 0.357 까지 갔어요. 색이 많아도 모양 바뀜은 밝기만 봐요. 11판의 Balloon Box 는 천의 모든 색을 밝기 끝에 둬서, 모양 바뀜과 가장자리는 풍선과 어두운 하늘의 차이에서만 와요. 16판의 Domino Run 은 꺼지는 쪽에서 모양 바뀜을 얻었어요. 넘어지는 도미노는 같은 4×16 칸 안에서 눕기만 해서 처음에 0.096 이었고, 낮은 램프가 누운 면을 스치게 하자 켜진 LED 가 0.44 에서 0.15 로 줄며 0.261 이 됐어요. 모양 바뀜은 2초 화면에서 멀어진 거리라 6초 동안 바뀐 양을 넘지 못해서, 움직임의 여섯 배가 끝이에요. 16판의 Lunation 은 2~8초 동안 어두워지는 LED 가 하나도 없게 짜서 움직임 0.058 에 모양 바뀜 0.348 로 그 끝에 섰어요. 아래 끝도 끝이에요. 모양 바뀜 축의 아래 끝은 Galton Board 의 0.025 이고, 17판의 열 개 가운데 여섯이 처음 판에 그 아래였어요. Ant Farm 0.010, One Bit 0.014, Marble Run 0.019, Circuit Board 0.021, Crossroads 0.023, Shoreline 0.029 예요. 바탕이 서 있고 작은 것만 움직이면 4×16 칸 평균이 거의 그대로라서, 블록만 한 것이 천천히 바뀌어야 해요. Ant Farm 은 젖은 모래 얼룩, Circuit Board 는 데워지는 선, Marble Run 은 구슬이 지나며 켜는 플라스틱 조각, One Bit 는 오르내리는 안개 둑으로 0.04~0.06 에 섰어요. 18판에서는 Server Rack 의 첫 판이 0.024 였어요. 깜박이는 LED 는 4×16 칸 안에서 평균이 지워져서, 백업이 쓴 드라이브의 빛길을 켜 둔 채 남기고 부하 물결을 넓혀 0.098 이 됐어요. 거꾸로 1초가 안 되는 섬광은 모양 바뀜을 크게 올려요. 모양 바뀜은 첫 화면에서 가장 멀어진 프레임 하나로 정해져서, 18판 Drop Tower 의 0.4초 남짓 보이는 브레이크 섬광이 0.087 을 0.163 으로 올렸어요. 19판에서는 Helter Skelter 의 첫 판이 0.021 이었어요. 전구 체이스가 나선을 따라 내려가며 미끄럼틀과 탑을 밝히고 8초마다 전구가 1.5초 다 켜지게 하자 0.069 가 됐어요. 21판의 Bread Mould 는 곰팡이로 어두워진 빵을 밝은 새 빵이 옆에서 밀어내는 일을 2.4초에 두어 3.5초에 0.356 에 닿았어요. 도마를 늙은 곰팡이와 새 속살 사이의 밝기 100 쯤에 두어서, 빵이 덮는 넓이만 모양 바뀜에 들어가요.아래 끝을 넘을 뻔한 패턴도 있었어요. 21판의 Slinky 는 250 LED 남짓한 스프링이 계단을 내려가기만 할 때 0.014 로 Galton Board 아래였고, 내려앉은 칸마다 계단등이 켜져 8초 남게 하자 0.056 이 됐어요. 22판에서는 아래 끝을 넘은 첫 판이 둘이었어요. Weaver 는 0.017 이었고, 하늘 아닌 곳에 구름 그림자 두 줄을 1초에 3 LED 씩 지나가게 하자 0.044 가 됐어요. Galilean Moons 는 0.022 였고, 도표의 하루를 6줄에서 10줄로 늘리자 0.031 이 됐어요. 높은 쪽은 셈으로 맞출 수 있었어요. Pin Art 는 0.613 × 0.575 = 0.352 가 잰 값 0.357 이고, Flipdot 은 0.36 × (1 − 0.248) 이 잰 값 0.265 예요. 둘 다 바뀐 넓이에 칸 평균의 차이를 곱한 셈이에요. 23판에서는 그 셈을 그림의 차례로 맞췄어요. Sequins 는 2초 화면에 아래 52% 의 파도가 있고 7.6초에 위 33% 의 하트가 있어서 판의 75% 가 바뀌어 0.250 이에요. Bait Ball 은 어두운 등을 보이던 떼가 2.1초부터 은빛으로 돌아서 0.372 이고, 은빛일 때 공 둘레 물까지 밝히는 빛무리가 0.304 를 0.348 로 올렸어요. 씨앗마다 0.351~0.400 으로 흔들리던 값은 2초 화면에 사냥꾼이 있느냐로 갈렸고, 첫 돌진 시각을 고정하자 0.367~0.377 로 좁아졌어요. 거꾸로 Elephant Toothpaste 는 밝은 기둥이 어두운 판을 위아래로 다 가로질러도 패널 너비의 40% 쯤만 덮어서 0.102 에 그쳤어요.
+모양 바뀜이 높은 칸을 겨누면 움직이는 것과 바탕의 밝기가 달라야 해요. 3판의 Lava Lamp 는 방울이 화면 높이를 다 오르는데도 왁스와 물이 둘 다 밝아서 모양 바뀜이 0.068 이에요. 4판의 Jacquard Loom 도 천이 1초에 4 LED 씩 내려가는데, 씨실 여섯 색이 모두 밝기 끝까지라 0.041 이에요. 19판의 Rabbit Ears 도 첫 판에서는 그림이 눈 속으로 사라져도 블록 평균이 0.5 쯤으로 같아서 0.153 이었어요. 바다를 어둡게 하고 신호가 없을 때 눈을 밝게 올리자 0.286 이 됐어요. 모양 바뀜의 칸은 4 LED 너비에 16 LED 높이라서, 옆으로 쓸고 가는 것이 위아래로 오르내리는 것보다 네 배 잘 잡혀요. 7판의 Searchlights 가 그렇게 0.357 까지 갔어요. 색이 많아도 모양 바뀜은 밝기만 봐요. 11판의 Balloon Box 는 천의 모든 색을 밝기 끝에 둬서, 모양 바뀜과 가장자리는 풍선과 어두운 하늘의 차이에서만 와요. 16판의 Domino Run 은 꺼지는 쪽에서 모양 바뀜을 얻었어요. 넘어지는 도미노는 같은 4×16 칸 안에서 눕기만 해서 처음에 0.096 이었고, 낮은 램프가 누운 면을 스치게 하자 켜진 LED 가 0.44 에서 0.15 로 줄며 0.261 이 됐어요. 모양 바뀜은 2초 화면에서 멀어진 거리라 6초 동안 바뀐 양을 넘지 못해서, 움직임의 여섯 배가 끝이에요. 16판의 Lunation 은 2~8초 동안 어두워지는 LED 가 하나도 없게 짜서 움직임 0.058 에 모양 바뀜 0.348 로 그 끝에 섰어요. 아래 끝도 끝이에요. 모양 바뀜 축의 아래 끝은 Galton Board 의 0.025 이고, 17판의 열 개 가운데 여섯이 처음 판에 그 아래였어요. Ant Farm 0.010, One Bit 0.014, Marble Run 0.019, Circuit Board 0.021, Crossroads 0.023, Shoreline 0.029 예요. 바탕이 서 있고 작은 것만 움직이면 4×16 칸 평균이 거의 그대로라서, 블록만 한 것이 천천히 바뀌어야 해요. Ant Farm 은 젖은 모래 얼룩, Circuit Board 는 데워지는 선, Marble Run 은 구슬이 지나며 켜는 플라스틱 조각, One Bit 는 오르내리는 안개 둑으로 0.04~0.06 에 섰어요. 18판에서는 Server Rack 의 첫 판이 0.024 였어요. 깜박이는 LED 는 4×16 칸 안에서 평균이 지워져서, 백업이 쓴 드라이브의 빛길을 켜 둔 채 남기고 부하 물결을 넓혀 0.098 이 됐어요. 거꾸로 1초가 안 되는 섬광은 모양 바뀜을 크게 올려요. 모양 바뀜은 첫 화면에서 가장 멀어진 프레임 하나로 정해져서, 18판 Drop Tower 의 0.4초 남짓 보이는 브레이크 섬광이 0.087 을 0.163 으로 올렸어요. 19판에서는 Helter Skelter 의 첫 판이 0.021 이었어요. 전구 체이스가 나선을 따라 내려가며 미끄럼틀과 탑을 밝히고 8초마다 전구가 1.5초 다 켜지게 하자 0.069 가 됐어요. 21판의 Bread Mould 는 곰팡이로 어두워진 빵을 밝은 새 빵이 옆에서 밀어내는 일을 2.4초에 두어 3.5초에 0.356 에 닿았어요. 도마를 늙은 곰팡이와 새 속살 사이의 밝기 100 쯤에 두어서, 빵이 덮는 넓이만 모양 바뀜에 들어가요.아래 끝을 넘을 뻔한 패턴도 있었어요. 21판의 Slinky 는 250 LED 남짓한 스프링이 계단을 내려가기만 할 때 0.014 로 Galton Board 아래였고, 내려앉은 칸마다 계단등이 켜져 8초 남게 하자 0.056 이 됐어요. 22판에서는 아래 끝을 넘은 첫 판이 둘이었어요. Weaver 는 0.017 이었고, 하늘 아닌 곳에 구름 그림자 두 줄을 1초에 3 LED 씩 지나가게 하자 0.044 가 됐어요. Galilean Moons 는 0.022 였고, 도표의 하루를 6줄에서 10줄로 늘리자 0.031 이 됐어요. 높은 쪽은 셈으로 맞출 수 있었어요. Pin Art 는 0.613 × 0.575 = 0.352 가 잰 값 0.357 이고, Flipdot 은 0.36 × (1 − 0.248) 이 잰 값 0.265 예요. 둘 다 바뀐 넓이에 칸 평균의 차이를 곱한 셈이에요. 23판에서는 그 셈을 그림의 차례로 맞췄어요. Sequins 는 2초 화면에 아래 52% 의 파도가 있고 7.6초에 위 33% 의 하트가 있어서 판의 75% 가 바뀌어 0.250 이에요. Bait Ball 은 어두운 등을 보이던 떼가 2.1초부터 은빛으로 돌아서 0.372 이고, 은빛일 때 공 둘레 물까지 밝히는 빛무리가 0.304 를 0.348 로 올렸어요. 씨앗마다 0.351~0.400 으로 흔들리던 값은 2초 화면에 사냥꾼이 있느냐로 갈렸고, 첫 돌진 시각을 고정하자 0.367~0.377 로 좁아졌어요. 거꾸로 Elephant Toothpaste 는 밝은 기둥이 어두운 판을 위아래로 다 가로질러도 패널 너비의 40% 쯤만 덮어서 0.102 에 그쳤어요. 24판에서는 하늘이 모양 바뀜을 가렸어요. Thermal 은 적운이 자라는데도 첫 판이 0.021 이었어요. 가장 밝은 채널로 보면 200~222 의 파란 하늘과 흰 구름이 거의 같아서, 천정을 (14,50,150) 으로 어둡게 하자 구름이 자라는 위의 16줄 띠 둘이 0.0066 에서 0.0207 이 됐어요. Pendulum Wave 는 색을 올리려고 바닥을 밝히자 추와 바닥의 차이가 줄어 모양 바뀜이 0.039 에서 0.023 으로 떨어졌어요. Shoot 'em Up 은 보스의 마지막 폭발 섬광 하나가 8초 창 안에 들면 0.30, 밖이면 0.09~0.13 이에요.
 
 움직임 축의 아래 끝도 끝이에요. 아래 끝은 Star Trails 의 0.019 이고, 18판의 Stained Glass 는 첫 판이 0.007, Peg Light 는 0.023 이었어요. 블록만 한 구름 그림자가 1초에 5 LED 로 지나가면 모양 바뀜은 0.036 이어도 1초 사이에 바뀌는 빛은 작아요. Stained Glass 는 그림자를 11 LED 덩어리로 얼룩지게 하고 1초에 18 LED 로 지나가게 해서 0.027 이 됐어요. Peg Light 는 1초에 페그 100개를 꽂아도 LED 하나가 한 번 바뀌는 셈이라 그 몫이 0.012 였고, 켜진 페그마다 ±3.5% 로 1.4 Hz 에 일렁이게 해서 0.035 가 됐어요.
 
@@ -1021,19 +1080,19 @@ ESP32-S3 로 옮길 때 걸릴 것도 있어요. Reaction Diffusion 은 Node 에
 
 ### 아직 없는 갈래
 
-`families.json` 의 마흔네 갈래에 없는 것 가운데 세운 패널에 맞을 것을 적어 둬요. 23판이 연 무대·공연 갈래는 Proscenium 하나예요. 서커스 천막 꼭대기의 공중그네가 그 갈래에 맞아요. 23판이 연 짐승 갈래도 Giraffe 하나예요. 해 질 녘 동굴에서 줄지어 날아오르는 박쥐 떼는 128줄을 다 써요. 22판이 연 몸 갈래는 Circulation 과 23판의 Axon 이에요. 숨 쉬는 폐는 아직 없어요. 22판이 연 비행 갈래는 Liftoff 와 23판의 Final Approach 예요. 열기류를 타고 맴돌며 오르는 글라이더는 아직 없어요. 20판이 연 새 갈래는 Kingfisher 와 21판의 Woodpecker, 22판의 Weaver, 23판의 Skein 이에요. 20판이 연 화학·실험 갈래는 Chromatography 와 21판의 Chemical Garden, 22판의 Flame Test, 23판의 Elephant Toothpaste 예요. 21판이 연 종이 갈래는 Pop-up Book 과 22판의 Senbazuru, 23판의 Hanging Scroll 이에요. 접힌 종이학이 펼쳐지는 그림은 아직 없어요. 21판이 연 운동·경기 갈래는 Lap Pool 과 22판의 Bowling Lane, 23판의 High Dive 예요. 위아래로 움직이는 경기는 High Dive 가 했고, 장대높이뛰기와 실내 암벽은 아직 없어요. 19판이 연 부엌 갈래는 Popcorn 과 20판의 Kettle, 21판의 Pancakes 이고, 버섯·균사 갈래는 Foxfire 와 20판의 Veiled Lady, 21판의 Bread Mould 예요. 18판이 연 유리 갈래는 Stained Glass 와 19판의 Smalti, 20판의 Millefiori 예요. 광물·결정 갈래는 Bismuth 와 19판의 Dripstone, 20판의 Agate 이고, 놀이공원 갈래는 Drop Tower 와 19판의 Helter Skelter, 20판의 High Striker 예요. 관람차는 Drop Tower 뒤에 테두리로만 서요. 17판이 연 전자 회로 갈래는 Circuit Board 와 18판의 Server Rack, 21판의 Nixie 이고, 장난감 갈래는 Marble Run 과 18판의 Peg Light, 21판의 Slinky, 22판의 Pin Art 예요. 16판이 연 바다 갈래는 Abyss 와 17판의 Shoreline, 20판의 Sunglint, 23판의 Bait Ball 이고, 곤충 갈래는 Fireflies 와 17판의 Ant Farm, 20판의 Moth Lamp 예요. 15판이 연 도시 갈래는 Metro Map 과 16판의 Neon Alley, 17판의 Crossroads, 22판의 Night Flight 예요. 15판이 연 음악 갈래는 Player Piano 와 16판의 Harp, 18판의 Turntables 예요. 4판이 연 직물 갈래는 Jacquard Loom 과 15판의 Plait, 19판의 Needlepoint, 23판의 Sequins 이고, 8판이 연 기계 갈래는 Gear Train 과 15판의 Cam Wave, 19판의 Paternoster 예요. 12판이 연 천체 갈래는 Star Trails 와 15판의 Analemma, 16판의 Lunation, 22판의 Galilean Moons 예요. 위성의 궤도는 Galilean Moons 가 그렸고, 해를 도는 행성은 아직 없어요. 리듬·펄스 갈래는 1판의 Euclid Pulse 와 Pulse Bars 뒤로 20판의 Change Ringing 이 셋째예요.
+`families.json` 의 마흔여섯 갈래에 없는 것 가운데 세운 패널에 맞을 것을 적어 둬요. 24판이 연 공사·건설 갈래는 Tower Crane 하나예요. 굴착기가 땅을 파 내려가는 터파기 현장은 아래로 깊이를 써요. 24판이 연 도자기 갈래도 Potter's Wheel 하나예요. 장작 가마의 불구멍으로 불꽃이 새는 소성은 아직 없어요. 23판이 연 무대·공연 갈래는 Proscenium 과 24판의 Flying Trapeze 예요. 위의 조종대에서 내려온 줄에 매달려 춤추는 꼭두각시는 128줄을 다 써요. 23판이 연 짐승 갈래는 Giraffe 와 24판의 Emergence 예요. 22판이 연 몸 갈래는 Circulation 과 23판의 Axon, 24판의 Breath 예요. 22판이 연 비행 갈래는 Liftoff 와 23판의 Final Approach, 24판의 Thermal 이에요. 낙하산을 펴고 내려오는 스카이다이버는 아직 없어요. 20판이 연 새 갈래는 Kingfisher 와 21판의 Woodpecker, 22판의 Weaver, 23판의 Skein 이에요. 20판이 연 화학·실험 갈래는 Chromatography 와 21판의 Chemical Garden, 22판의 Flame Test, 23판의 Elephant Toothpaste 예요. 21판이 연 종이 갈래는 Pop-up Book 과 22판의 Senbazuru, 23판의 Hanging Scroll 이에요. 접힌 종이학이 펼쳐지는 그림은 아직 없어요. 21판이 연 운동·경기 갈래는 Lap Pool 과 22판의 Bowling Lane, 23판의 High Dive 예요. 위아래로 움직이는 경기는 High Dive 가 했고, 장대높이뛰기와 실내 암벽은 아직 없어요. 19판이 연 부엌 갈래는 Popcorn 과 20판의 Kettle, 21판의 Pancakes 이고, 버섯·균사 갈래는 Foxfire 와 20판의 Veiled Lady, 21판의 Bread Mould 예요. 18판이 연 유리 갈래는 Stained Glass 와 19판의 Smalti, 20판의 Millefiori 예요. 광물·결정 갈래는 Bismuth 와 19판의 Dripstone, 20판의 Agate 이고, 놀이공원 갈래는 Drop Tower 와 19판의 Helter Skelter, 20판의 High Striker 예요. 관람차는 Drop Tower 뒤에 테두리로만 서요. 17판이 연 전자 회로 갈래는 Circuit Board 와 18판의 Server Rack, 21판의 Nixie 이고, 장난감 갈래는 Marble Run 과 18판의 Peg Light, 21판의 Slinky, 22판의 Pin Art 예요. 16판이 연 바다 갈래는 Abyss 와 17판의 Shoreline, 20판의 Sunglint, 23판의 Bait Ball 이고, 곤충 갈래는 Fireflies 와 17판의 Ant Farm, 20판의 Moth Lamp, 24판의 Waggle Dance 예요. 15판이 연 도시 갈래는 Metro Map 과 16판의 Neon Alley, 17판의 Crossroads, 22판의 Night Flight 예요. 15판이 연 음악 갈래는 Player Piano 와 16판의 Harp, 18판의 Turntables, 24판의 Pipe Organ 이에요. 4판이 연 직물 갈래는 Jacquard Loom 과 15판의 Plait, 19판의 Needlepoint, 23판의 Sequins 이고, 8판이 연 기계 갈래는 Gear Train 과 15판의 Cam Wave, 19판의 Paternoster 예요. 12판이 연 천체 갈래는 Star Trails 와 15판의 Analemma, 16판의 Lunation, 22판의 Galilean Moons 예요. 위성의 궤도는 Galilean Moons 가 그렸고, 해를 도는 행성은 아직 없어요. 리듬·펄스 갈래는 1판의 Euclid Pulse 와 Pulse Bars 뒤로 20판의 Change Ringing 이 셋째예요.
 
 ### 멋진 것 더 멋지게
 
 이제는 창작자가 댓글로 고른 패턴만 고쳐요. 고를 때 볼 잰 값이에요.
 
-노브 반응이 두 자리로 0.03 인 노브는 23판까지 열하나예요. 1판과 2판의 넷은 Hourglass 의 K2 Flow 가 0.029 로 가장 낮고, 같은 패턴의 K4 Layers 가 0.030 이에요. Flip Clock 의 K4 Light 가 0.032, Sparks 의 K1 Spread 가 0.034 예요. 13판의 Glyph Rain 은 K1 Hue 가 0.028 에서 0.066 으로, K4 Mutate 가 0.033 에서 0.066 으로 올랐어요. 판이 거의 빈 패턴은 노브가 바꿀 LED 가 적어서 노브가 다 낮게 나와요. Glyph Rain 은 채움이 0.059 에서 0.215 가 되자 노브 넷이 다 올랐어요. 9판의 Sprout 은 K1 Hue 가 0.045 로 올랐어요. 5판의 Euclid Pulse 는 K4 Steps 가 0.05 로 넷 가운데 가장 낮아요. 처음 자리의 Pulses 3 에서는 Steps 가 빛 조각의 폭만 바꿔요. 15판의 열 개는 가장 낮은 노브가 Ivy 의 K2 Speed 0.049 예요. 빠르기 노브는 새로 시작한 그림의 2~3초를 봐서, 빠르기만 바꾸는 노브는 낮게 나와요. 1 LED 너비 선이 주인공인 패턴은 선 옆 1 LED 에 그 빛을 옅게 묻히면 노브 반응이 두 배쯤 돼요. 15판의 Player Piano 는 그렇게 노브 넷이 0.02 언저리에서 0.05~0.08 로 올랐어요. 16판의 열 개는 가장 낮은 노브가 Fireflies 의 K4 Coupling 0.04 예요. 대부분이 어두운 그림은 노브 반응이 화면 평균 빛의 두 배쯤에서 멈춰요. Fireflies 는 평균 밝기가 0.03 언저리이고, 16판의 Wireworld 는 전자가 더하는 빛이 프레임 차이로 0.046 이라 K3 Pulses 가 0.05 예요. 노브 하나가 바탕을 바꾸게 하면 쉽게 올라가서, Fireflies 의 K1 Moon 은 0.08 이에요. 17판의 Frost 도 K1 Lamp 가 가로등 둘레의 서리만 물들일 때는 0.01~0.02 였고, 하늘 아래쪽과 눈 덮인 길까지 물들이자 0.05 가 됐어요. 17판의 열 개는 가장 낮은 노브가 Crossroads 의 K2 Pace 0.04 예요. 노브 검사는 다섯 설정을 같은 씨앗으로 돌려서, 노브가 붓질 수나 개미 수를 바꾸면 난수 차례가 갈려 반응이 부풀어요. 17판 Brushstrokes 의 K2~K4 와 Ant Farm 의 K3 에는 그 몫도 들어 있어요. 18판의 열 개는 가장 낮은 노브가 Server Rack 과 Turntables 의 K1~K3 으로 0.04 언저리예요. 큰 물건 하나에서 작은 부분만 움직이는 노브는 낮게 나와요. 18판 Longcase Clock 의 K3 은 처음에 추의 진폭을 바꾸는 Swing 이었는데 0.0036 으로 검사에 걸렸고, 촛불 자리를 옮기는 Candle 로 바꾸자 0.11 이 됐어요. 미리 돌리기로 처음 상태를 맞출 때는 빠르기 노브를 같이 봐야 해요. Server Rack 은 어느 빠르기에서든 2초에 같은 상태가 오게 맞췄다가 K2 가 0.0091 로 걸렸어요. 맞추는 시점은 패턴 시간에 두고 미리 돌리기는 노브 빠르기로 돌려야 빠르기마다 그림이 갈려요. 19판의 열 개는 가장 낮은 노브가 Foxfire 의 K1 Glow 와 Paternoster 의 K4 Busy 로 0.033 이에요. 패널의 10분의 1쯤 덮는 것의 색만 바꾸는 노브는 0.03 에 못 미쳐요. 19판 Popcorn 의 K4 는 처음에 버터 색을 바꾸는 Butter 였는데 0.012~0.02 여서, 더미 높이를 정하는 Heap 으로 바꿨어요. Dust Motes 의 Dust 는 먼지 수만 바꿀 때 0.011 이었고, 빛줄기 안개를 먼지 양에 묶자 0.04 가 됐어요. 노브 반응은 세 채널의 차이를 평균해요. Helter Skelter 의 빨강과 크림 줄무늬는 차이가 초록과 파랑에만 있어서, 탑이 눈에 띄게 비틀려도 0.02 였어요. 20판의 열 개는 가장 낮은 노브가 Kingfisher 의 K3 Fish 와 Kettle 의 K3 Fill 로 둘 다 0.040 이에요. 물고기 수나 물 높이만 바꿀 때는 0.012 와 0.038 이었고, Kingfisher 는 물풀과 갈대가 함께 늘게, Kettle 은 물이 많을수록 늦게 끓게 해서 올렸어요. 21판의 열 개는 가장 낮은 노브가 Woodpecker 의 K2 Speed 와 Lap Pool 의 K1 Stroke 로 둘 다 0.044 예요. 사람 넷의 영법만 바꿀 때 Stroke 는 0.02 였고, 평영과 접영이 바닥의 햇빛 무늬에 짧은 물결을 섞게 해서 올렸어요. 주인공 뒤에 서는 것을 더하는 노브는 가려져서 낮게 나와요. Pop-up Book 의 K3 Layers 는 뒤에 카드를 더할 때 0.01 이었고, 여섯째 층을 맨 앞에 서는 터널북 틀로 바꾸자 0.05 가 됐어요. Fiddlehead 의 K3 Fronds 도 늘어난 잎이 가운데 포기 뒤에서 자랄 때 0.02~0.03 이었고, 양옆 포기의 잎을 가운데 위로 기울게 하자 0.047 이 됐어요. 22판의 열 개는 가장 낮은 노브가 Circulation 의 K3 Detail 0.025 이고, 이 연구에서 두 자리로 0.02 인 노브는 이것 하나예요. 굵은 줄기와 첫 곁가지가 처음 자리에서 몸 LED 2618개 가운데 1943개를 덮어서 처음에 0.008 이었어요. 세운 패널에 사람 하나를 세우면 몸이 판의 32% 쯤이라, 몸 안에서만 바뀌는 노브는 화면 평균으로 나뉘어 낮게 나와요. 22판 Bowling Lane 의 K2 Speed 와 K3 Hook 은 0.03 이에요. 노브 검사가 보는 2~3초 무렵에 공의 길이 Hook 마다 화살표 언저리에서 만나서, 길만 바꿀 때 K3 는 0.01 이었어요. 빛나는 오일의 길이를 Hook 에 묶어 늘 보이는 결과를 하나 붙이자 올랐어요. 패널의 4분의 1만 바꾸는 노브는 그 안을 흐려도 0.04 언저리에서 멈춰요. Galilean Moons 의 K4 Seeing 은 접안렌즈 안만 흐릴 때 0.039 였고, 원반 둘레로 번지는 빛을 넓히자 0.054 가 됐어요. 23판의 열 개는 가장 낮은 노브가 Hanging Scroll 의 K4 Ink 0.032 와 Skein 의 K3 Geese 0.033 이에요. Ink 는 젖은 먹을 흐림으로만 그릴 때 0.022 였어요. 흐림은 눈에는 크게 달라 보여도 LED 하나하나의 밝기를 조금씩만 바꿔요. 넓은 면이 조금 바뀌는 쪽이 노브 반응을 올려서, Giraffe 의 K4 Wind 는 풀과 수관만 흔들 때 0.03 이었고 낮은 하늘에 먼지 막을 덮자 0.06 이 됐어요.
+노브 반응이 두 자리로 0.03 인 노브는 23판까지 열하나예요. 1판과 2판의 넷은 Hourglass 의 K2 Flow 가 0.029 로 가장 낮고, 같은 패턴의 K4 Layers 가 0.030 이에요. Flip Clock 의 K4 Light 가 0.032, Sparks 의 K1 Spread 가 0.034 예요. 13판의 Glyph Rain 은 K1 Hue 가 0.028 에서 0.066 으로, K4 Mutate 가 0.033 에서 0.066 으로 올랐어요. 판이 거의 빈 패턴은 노브가 바꿀 LED 가 적어서 노브가 다 낮게 나와요. Glyph Rain 은 채움이 0.059 에서 0.215 가 되자 노브 넷이 다 올랐어요. 9판의 Sprout 은 K1 Hue 가 0.045 로 올랐어요. 5판의 Euclid Pulse 는 K4 Steps 가 0.05 로 넷 가운데 가장 낮아요. 처음 자리의 Pulses 3 에서는 Steps 가 빛 조각의 폭만 바꿔요. 15판의 열 개는 가장 낮은 노브가 Ivy 의 K2 Speed 0.049 예요. 빠르기 노브는 새로 시작한 그림의 2~3초를 봐서, 빠르기만 바꾸는 노브는 낮게 나와요. 1 LED 너비 선이 주인공인 패턴은 선 옆 1 LED 에 그 빛을 옅게 묻히면 노브 반응이 두 배쯤 돼요. 15판의 Player Piano 는 그렇게 노브 넷이 0.02 언저리에서 0.05~0.08 로 올랐어요. 16판의 열 개는 가장 낮은 노브가 Fireflies 의 K4 Coupling 0.04 예요. 대부분이 어두운 그림은 노브 반응이 화면 평균 빛의 두 배쯤에서 멈춰요. Fireflies 는 평균 밝기가 0.03 언저리이고, 16판의 Wireworld 는 전자가 더하는 빛이 프레임 차이로 0.046 이라 K3 Pulses 가 0.05 예요. 노브 하나가 바탕을 바꾸게 하면 쉽게 올라가서, Fireflies 의 K1 Moon 은 0.08 이에요. 17판의 Frost 도 K1 Lamp 가 가로등 둘레의 서리만 물들일 때는 0.01~0.02 였고, 하늘 아래쪽과 눈 덮인 길까지 물들이자 0.05 가 됐어요. 17판의 열 개는 가장 낮은 노브가 Crossroads 의 K2 Pace 0.04 예요. 노브 검사는 다섯 설정을 같은 씨앗으로 돌려서, 노브가 붓질 수나 개미 수를 바꾸면 난수 차례가 갈려 반응이 부풀어요. 17판 Brushstrokes 의 K2~K4 와 Ant Farm 의 K3 에는 그 몫도 들어 있어요. 18판의 열 개는 가장 낮은 노브가 Server Rack 과 Turntables 의 K1~K3 으로 0.04 언저리예요. 큰 물건 하나에서 작은 부분만 움직이는 노브는 낮게 나와요. 18판 Longcase Clock 의 K3 은 처음에 추의 진폭을 바꾸는 Swing 이었는데 0.0036 으로 검사에 걸렸고, 촛불 자리를 옮기는 Candle 로 바꾸자 0.11 이 됐어요. 미리 돌리기로 처음 상태를 맞출 때는 빠르기 노브를 같이 봐야 해요. Server Rack 은 어느 빠르기에서든 2초에 같은 상태가 오게 맞췄다가 K2 가 0.0091 로 걸렸어요. 맞추는 시점은 패턴 시간에 두고 미리 돌리기는 노브 빠르기로 돌려야 빠르기마다 그림이 갈려요. 19판의 열 개는 가장 낮은 노브가 Foxfire 의 K1 Glow 와 Paternoster 의 K4 Busy 로 0.033 이에요. 패널의 10분의 1쯤 덮는 것의 색만 바꾸는 노브는 0.03 에 못 미쳐요. 19판 Popcorn 의 K4 는 처음에 버터 색을 바꾸는 Butter 였는데 0.012~0.02 여서, 더미 높이를 정하는 Heap 으로 바꿨어요. Dust Motes 의 Dust 는 먼지 수만 바꿀 때 0.011 이었고, 빛줄기 안개를 먼지 양에 묶자 0.04 가 됐어요. 노브 반응은 세 채널의 차이를 평균해요. Helter Skelter 의 빨강과 크림 줄무늬는 차이가 초록과 파랑에만 있어서, 탑이 눈에 띄게 비틀려도 0.02 였어요. 20판의 열 개는 가장 낮은 노브가 Kingfisher 의 K3 Fish 와 Kettle 의 K3 Fill 로 둘 다 0.040 이에요. 물고기 수나 물 높이만 바꿀 때는 0.012 와 0.038 이었고, Kingfisher 는 물풀과 갈대가 함께 늘게, Kettle 은 물이 많을수록 늦게 끓게 해서 올렸어요. 21판의 열 개는 가장 낮은 노브가 Woodpecker 의 K2 Speed 와 Lap Pool 의 K1 Stroke 로 둘 다 0.044 예요. 사람 넷의 영법만 바꿀 때 Stroke 는 0.02 였고, 평영과 접영이 바닥의 햇빛 무늬에 짧은 물결을 섞게 해서 올렸어요. 주인공 뒤에 서는 것을 더하는 노브는 가려져서 낮게 나와요. Pop-up Book 의 K3 Layers 는 뒤에 카드를 더할 때 0.01 이었고, 여섯째 층을 맨 앞에 서는 터널북 틀로 바꾸자 0.05 가 됐어요. Fiddlehead 의 K3 Fronds 도 늘어난 잎이 가운데 포기 뒤에서 자랄 때 0.02~0.03 이었고, 양옆 포기의 잎을 가운데 위로 기울게 하자 0.047 이 됐어요. 22판의 열 개는 가장 낮은 노브가 Circulation 의 K3 Detail 0.025 이고, 이 연구에서 두 자리로 0.02 인 노브는 이것 하나예요. 굵은 줄기와 첫 곁가지가 처음 자리에서 몸 LED 2618개 가운데 1943개를 덮어서 처음에 0.008 이었어요. 세운 패널에 사람 하나를 세우면 몸이 판의 32% 쯤이라, 몸 안에서만 바뀌는 노브는 화면 평균으로 나뉘어 낮게 나와요. 22판 Bowling Lane 의 K2 Speed 와 K3 Hook 은 0.03 이에요. 노브 검사가 보는 2~3초 무렵에 공의 길이 Hook 마다 화살표 언저리에서 만나서, 길만 바꿀 때 K3 는 0.01 이었어요. 빛나는 오일의 길이를 Hook 에 묶어 늘 보이는 결과를 하나 붙이자 올랐어요. 패널의 4분의 1만 바꾸는 노브는 그 안을 흐려도 0.04 언저리에서 멈춰요. Galilean Moons 의 K4 Seeing 은 접안렌즈 안만 흐릴 때 0.039 였고, 원반 둘레로 번지는 빛을 넓히자 0.054 가 됐어요. 23판의 열 개는 가장 낮은 노브가 Hanging Scroll 의 K4 Ink 0.032 와 Skein 의 K3 Geese 0.033 이에요. Ink 는 젖은 먹을 흐림으로만 그릴 때 0.022 였어요. 흐림은 눈에는 크게 달라 보여도 LED 하나하나의 밝기를 조금씩만 바꿔요. 넓은 면이 조금 바뀌는 쪽이 노브 반응을 올려서, Giraffe 의 K4 Wind 는 풀과 수관만 흔들 때 0.03 이었고 낮은 하늘에 먼지 막을 덮자 0.06 이 됐어요. 24판의 열 개는 가장 낮은 노브가 Potter's Wheel 의 K2 Speed 0.042 와 Pipe Organ 의 K4 Tremulant 0.042 예요. Breath 는 첫 판부터 노브 넷이 0.09~0.13 이었어요. 숨을 내쉰 폐가 판의 42% 를 덮고 노브마다 폐 전체의 색이나 크기를 바꿔서, 22판 Circulation 처럼 몸 안에서만 바뀌는 노브가 낮게 나오는 일이 없었어요. 첫 3초에 일어나지 않는 일만 바꾸는 노브는 0 에 가까워요. Shoot 'em Up 의 K4 Bullets 는 보스 탄이 3.6초부터 날아서 처음에 0.0041 이었고, 탄이 짙을수록 바닥을 어둡게 하자 0.10 이 됐어요. 빛이 이웃에 번지면 노브가 올라요. Pipe Organ 의 K1 Stops 는 소리 나는 파이프만 물들일 때 0.010 이었고, 그 빛이 좌우 16열의 주석에 비치게 하자 0.02, 리드 음전에 배음 파이프를 더하자 0.062 가 됐어요.
 
 Flock, Harmonograph, Big Type 은 처음 화면이 빨강이에요.
 
 ### 세로 64×128
 
-2~8초 동안 켜진 LED 가 5% 아래인 3분의 1이 있는 패턴이 넷이에요. `study.ts` 표의 `thirds` 칸이 이 값이에요. Jelly 4.5% 와 Pulse Bars 2.6% 는 위 3분의 1이 비고, Sparks 2.0% 와 Dragon Fold 4.9% 는 아래 3분의 1이 비어요. Dragon Fold 는 문턱 바로 아래예요. 6판의 Jacob's Ladder 는 위, 가운데, 아래가 27.0%, 21.4%, 35.1% 예요. 햇빛층에서 심해까지 내려가는 바다는 16판의 Abyss 가 했고, 덩굴은 15판의 Ivy 가 했어요. 어두운 판 위의 가는 빛 하나는 128줄을 다 지나가도 3분의 1마다 10% 를 넘기 어려워요. 6판의 처음 아크는 가운데 3분의 1을 7.4% 켰어요. 9판의 Sprout 은 접시꽃 둘이 위 3분의 1을 8.1% 켜요. 이렇게 철이 도는 패턴은 2~8초가 어느 철에 걸리느냐에 따라 값이 몇 배씩 달라서, 씨앗 여럿으로 재 봐야 해요. 테두리를 그리는 패턴은 테두리를 빼고 재요. 10판의 Tetromino Well 은 양쪽 벽 2 LED 만으로 3분의 1마다 6.3% 를 켜서, 벽을 넣어 재면 위 3분의 1이 늘 문턱을 넘어요. 바탕을 다 그리는 패턴은 `thirds` 칸이 3분의 1마다 90 을 넘어요. 14판의 Waterfall 은 98/93/97 이에요. 그런 패턴은 2~8초 동안 밝기가 24/255 넘게 바뀌는 LED 로 세어야 그림이 128줄을 쓰는지 보여요. 그렇게 세면 Waterfall 의 위 3분의 1은 25.9% 예요. 15판의 Ivy 는 벽을 그려 `thirds` 가 84/89/82 이고, 바뀐 LED 로 세면 48.7%, 70.6%, 29.2% 예요. 가만히 있는 가는 선은 켜져 있어도 바뀌지 않아요. 15판의 Incense 는 곧은 연기 실이 가운데 3분의 1을 지나도 바뀐 LED 가 3.7% 였고, 소용돌이가 그 3분의 1 안에서 시작되게 하자 15.5% 가 됐어요. 16판의 Abyss 는 물을 다 칠해서 `thirds` 가 100/80/22 이고, 바뀐 LED 로 세면 84.5%, 59.3%, 36.0% 예요. 한밤층은 아귀와 불꽃, 잠수정 등빛뿐이라 아래 3분의 1이 가장 낮아요. 16판의 Harp 는 액자를 빼고 줄만 재면 48/53/12 이고, 바뀐 LED 는 아래 3분의 1이 9.8% 예요. 거기는 받침과 공명통 발이고, 줄은 300 LED 남짓한 삼각형에만 있어요. 17판의 Marble Run 은 레일과 리프트가 서 있어서 `thirds` 가 39/30/68 이고, 바뀐 LED 는 40.7%, 54.3%, 59.7% 예요. 17판의 Ant Farm 은 모래가 바탕이라 `thirds` 가 100/97/96 이고, 바뀐 LED 는 6.9%, 34.5%, 53.4% 예요. 위 3분의 1은 모래 윗면과 그 위의 어두운 유리라서 개미가 드나드는 입구와 더미만 바뀌어요. 18판의 Server Rack 은 앞판을 13~23 으로 24 아래에 두어서, `thirds` 63/63/61 이 다 드라이브와 코드와 LED 의 빛이에요. 바뀐 LED 셈은 2~8초 가운데 한 프레임만 24 를 넘어도 그 LED 를 세서, 무작위 반짝임이 값을 부풀려요. 18판의 Pint 는 잔 기포 반짝임을 켜면 50.3%, 60.2%, 40.0% 이고 끄면 50.2%, 46.8%, 26.3% 예요. 빛의 흔들림도 그래요. Longcase Clock 은 촛불일 때 41.8%, 45.6%, 45.3% 이고 흔들림 없는 달빛에서는 2.6%, 4.2%, 5.9% 예요. 자라는 그림은 미리 돌리기를 시간 대신 상태로 멈추면 씨앗마다 같은 자리에서 열려요. 18판의 Bismuth 는 무리 꼭대기가 20번 줄에 닿을 때 멈춰요. 14번 줄까지 기다리면 2초에 이미 다 자라 있어서 모양 바뀜이 0.027 로 떨어졌어요. 19판의 Dripstone 은 잘린 암반이 4/255 쯤이라 위아래가 검게 보여 `thirds` 가 68/99/77 이었고, 암반에 제 빛을 주자 92/98/99 가 됐어요. Foxfire 는 땅을 80번 줄에 두었을 때 위 3분의 1이 5% 였고, 64번 줄로 올리고 그루터기를 세우자 16% 가 됐어요. 쌓이는 그림은 2~8초에 쌓이는 자리가 보이게 열어야 해요. Popcorn 은 더미가 높게 시작하면 아래 3분의 1의 바뀐 LED 가 4.4% 였고, 낮게 시작해 자라게 하자 27.9% 가 됐어요. 넓은 면을 물들이는 조명은 반짝임 없이도 바뀐 LED 를 올려요. Dripstone 은 세 조명이 15초에 한 바퀴 번갈아 켜져서 57.6%, 84.9%, 79.2% 예요. 20판에서는 한 번 일어나는 일이 2~8초 창에 드는지가 값을 갈랐어요. High Striker 는 7.3초에 종이 한 번 울려서 위 3분의 1의 바뀐 LED 가 6.5% 에서 95.6% 가 됐고, Kettle 은 7.1초에 스위치가 꺼지는 것이 창에 들어 모양 바뀜이 0.065 에서 0.168 이 됐어요. 위로 오르는 앞선은 모양 바뀜을 적게 내요. Chromatography 는 6초 동안 앞선이 26줄을 올라도 블록이 16줄 높이라 0.040 이었어요. 21판의 세로 일곱은 Nixie 를 빼고 방이나 바탕을 다 그려서 `thirds` 가 3분의 1마다 70 을 넘었어요. 그런 그림은 바탕을 지우거나 멈추고 한 번 더 재야 주인공이 128줄을 쓰는지 보여요. Chemical Garden 은 유리와 방을 검게 지우자 정원만의 위 3분의 1이 6.6% 였고, 씨앗 열여섯 가운데 하나는 3.2% 였어요. Lap Pool 은 바닥 햇빛 무늬의 시간을 멈추자 바뀐 LED 가 3분의 1마다 18.7~52.1% 였어요. Woodpecker 는 새를 빼고 재도 바뀐 LED 가 57.3/35.1/50.0% 라서, 그 값은 거의 다 잎 사이로 움직이는 햇빛 반점에서 와요. 조금 위에서 본 장면은 세로를 싸게 얻어요. Pop-up Book 은 누운 페이지가 깊이의 5분의 1 줄만 써서, 책을 아래 34줄에 두고도 선 카드가 위 3분의 1까지 닿아요. 닉시관 하나는 지름이 높이의 절반쯤이라 Nixie 의 IN-18 은 54 LED 너비에 109줄로 서요.Slinky 는 계단과 벽을 빼고 스프링과 그림자만 세면 켜진 LED 가 0.4/2.6/3.0% 이고, 스프링이 켠 계단등까지 세면 20.9/16.5/8.6% 예요. 22판의 세로 다섯 가운데 넷은 바탕을 다 칠해서 `thirds` 가 말해 주는 것이 적었어요. 바탕을 검게 지운 사본으로 다시 재면 Liftoff 는 로켓만의 위 3분의 1이 켜진 LED 3.7%, 바뀐 LED 8.2% 라서, 그 3분의 1의 변화는 대부분 카메라가 고개를 들며 어두워지는 하늘에서 와요. Bowling Lane 은 공을 던지지 않게 하면 바뀐 LED 가 5.2/9.5/6.6% 로 떨어져서, 그 값은 거의 다 공과 그 빛이에요. Circulation 은 바탕을 21 아래로 내려 몸만 켜진 LED 로 세게 해서 `thirds` 가 34/50/26 이에요. 남은 자리로 짠 Flame Test 는 실험대가 어두워 아래 3분의 1의 바뀐 LED 가 4.6% 였어요. 불꽃빛의 몫을 0.42 에서 0.52 로 올려도 1.3 포인트만 올라서, 어두운 바닥은 빛을 비추는 것보다 2~8초 창 안에 그 자리로 가는 움직임이 있어야 바뀐 LED 가 올라요. 23판의 세로 일곱 가운데 Proscenium 은 금박 아치가 세 3분의 1을 다 지나가서, 아치를 검게 바꿔 다시 재면 `thirds` 가 94/97/69 에서 63/85/65 가 돼요. Final Approach 는 위 3분의 1을 밤하늘이 채워서, 도시 빛을 받은 천정을 33/255 로 두어 문턱 24 를 넘겼어요. 가는 선 하나가 지나가는 3분의 1은 둘레를 같이 밝혀야 해요. Axon 의 가운데 3분의 1은 축삭 한 줄이 지나가는 자리라서, 수초의 빛과 비스듬히 지나가는 이웃 축삭 둘을 두어 바뀐 LED 가 23.6~35.5% 가 됐어요. 한 번 일어나는 일은 2~8초 창에 들게 짰어요. Hanging Scroll 은 첫 그림이 걸려 있는 시간을 2.2초로 줄여 4.8~6.8초에 말려 올라가게 했고, Giraffe 는 첫 물 마시기를 3.4초에 두었어요. Elephant Toothpaste 의 아래 3분의 1은 바뀐 LED 가 9.7% 로 일곱 가운데 가장 낮아요. 기둥이 6.8초에 꺾이기 전까지는 실린더와 실험대가 서 있기만 해서예요.
+2~8초 동안 켜진 LED 가 5% 아래인 3분의 1이 있는 패턴이 넷이에요. `study.ts` 표의 `thirds` 칸이 이 값이에요. Jelly 4.5% 와 Pulse Bars 2.6% 는 위 3분의 1이 비고, Sparks 2.0% 와 Dragon Fold 4.9% 는 아래 3분의 1이 비어요. Dragon Fold 는 문턱 바로 아래예요. 6판의 Jacob's Ladder 는 위, 가운데, 아래가 27.0%, 21.4%, 35.1% 예요. 햇빛층에서 심해까지 내려가는 바다는 16판의 Abyss 가 했고, 덩굴은 15판의 Ivy 가 했어요. 어두운 판 위의 가는 빛 하나는 128줄을 다 지나가도 3분의 1마다 10% 를 넘기 어려워요. 6판의 처음 아크는 가운데 3분의 1을 7.4% 켰어요. 9판의 Sprout 은 접시꽃 둘이 위 3분의 1을 8.1% 켜요. 이렇게 철이 도는 패턴은 2~8초가 어느 철에 걸리느냐에 따라 값이 몇 배씩 달라서, 씨앗 여럿으로 재 봐야 해요. 테두리를 그리는 패턴은 테두리를 빼고 재요. 10판의 Tetromino Well 은 양쪽 벽 2 LED 만으로 3분의 1마다 6.3% 를 켜서, 벽을 넣어 재면 위 3분의 1이 늘 문턱을 넘어요. 바탕을 다 그리는 패턴은 `thirds` 칸이 3분의 1마다 90 을 넘어요. 14판의 Waterfall 은 98/93/97 이에요. 그런 패턴은 2~8초 동안 밝기가 24/255 넘게 바뀌는 LED 로 세어야 그림이 128줄을 쓰는지 보여요. 그렇게 세면 Waterfall 의 위 3분의 1은 25.9% 예요. 15판의 Ivy 는 벽을 그려 `thirds` 가 84/89/82 이고, 바뀐 LED 로 세면 48.7%, 70.6%, 29.2% 예요. 가만히 있는 가는 선은 켜져 있어도 바뀌지 않아요. 15판의 Incense 는 곧은 연기 실이 가운데 3분의 1을 지나도 바뀐 LED 가 3.7% 였고, 소용돌이가 그 3분의 1 안에서 시작되게 하자 15.5% 가 됐어요. 16판의 Abyss 는 물을 다 칠해서 `thirds` 가 100/80/22 이고, 바뀐 LED 로 세면 84.5%, 59.3%, 36.0% 예요. 한밤층은 아귀와 불꽃, 잠수정 등빛뿐이라 아래 3분의 1이 가장 낮아요. 16판의 Harp 는 액자를 빼고 줄만 재면 48/53/12 이고, 바뀐 LED 는 아래 3분의 1이 9.8% 예요. 거기는 받침과 공명통 발이고, 줄은 300 LED 남짓한 삼각형에만 있어요. 17판의 Marble Run 은 레일과 리프트가 서 있어서 `thirds` 가 39/30/68 이고, 바뀐 LED 는 40.7%, 54.3%, 59.7% 예요. 17판의 Ant Farm 은 모래가 바탕이라 `thirds` 가 100/97/96 이고, 바뀐 LED 는 6.9%, 34.5%, 53.4% 예요. 위 3분의 1은 모래 윗면과 그 위의 어두운 유리라서 개미가 드나드는 입구와 더미만 바뀌어요. 18판의 Server Rack 은 앞판을 13~23 으로 24 아래에 두어서, `thirds` 63/63/61 이 다 드라이브와 코드와 LED 의 빛이에요. 바뀐 LED 셈은 2~8초 가운데 한 프레임만 24 를 넘어도 그 LED 를 세서, 무작위 반짝임이 값을 부풀려요. 18판의 Pint 는 잔 기포 반짝임을 켜면 50.3%, 60.2%, 40.0% 이고 끄면 50.2%, 46.8%, 26.3% 예요. 빛의 흔들림도 그래요. Longcase Clock 은 촛불일 때 41.8%, 45.6%, 45.3% 이고 흔들림 없는 달빛에서는 2.6%, 4.2%, 5.9% 예요. 자라는 그림은 미리 돌리기를 시간 대신 상태로 멈추면 씨앗마다 같은 자리에서 열려요. 18판의 Bismuth 는 무리 꼭대기가 20번 줄에 닿을 때 멈춰요. 14번 줄까지 기다리면 2초에 이미 다 자라 있어서 모양 바뀜이 0.027 로 떨어졌어요. 19판의 Dripstone 은 잘린 암반이 4/255 쯤이라 위아래가 검게 보여 `thirds` 가 68/99/77 이었고, 암반에 제 빛을 주자 92/98/99 가 됐어요. Foxfire 는 땅을 80번 줄에 두었을 때 위 3분의 1이 5% 였고, 64번 줄로 올리고 그루터기를 세우자 16% 가 됐어요. 쌓이는 그림은 2~8초에 쌓이는 자리가 보이게 열어야 해요. Popcorn 은 더미가 높게 시작하면 아래 3분의 1의 바뀐 LED 가 4.4% 였고, 낮게 시작해 자라게 하자 27.9% 가 됐어요. 넓은 면을 물들이는 조명은 반짝임 없이도 바뀐 LED 를 올려요. Dripstone 은 세 조명이 15초에 한 바퀴 번갈아 켜져서 57.6%, 84.9%, 79.2% 예요. 20판에서는 한 번 일어나는 일이 2~8초 창에 드는지가 값을 갈랐어요. High Striker 는 7.3초에 종이 한 번 울려서 위 3분의 1의 바뀐 LED 가 6.5% 에서 95.6% 가 됐고, Kettle 은 7.1초에 스위치가 꺼지는 것이 창에 들어 모양 바뀜이 0.065 에서 0.168 이 됐어요. 위로 오르는 앞선은 모양 바뀜을 적게 내요. Chromatography 는 6초 동안 앞선이 26줄을 올라도 블록이 16줄 높이라 0.040 이었어요. 21판의 세로 일곱은 Nixie 를 빼고 방이나 바탕을 다 그려서 `thirds` 가 3분의 1마다 70 을 넘었어요. 그런 그림은 바탕을 지우거나 멈추고 한 번 더 재야 주인공이 128줄을 쓰는지 보여요. Chemical Garden 은 유리와 방을 검게 지우자 정원만의 위 3분의 1이 6.6% 였고, 씨앗 열여섯 가운데 하나는 3.2% 였어요. Lap Pool 은 바닥 햇빛 무늬의 시간을 멈추자 바뀐 LED 가 3분의 1마다 18.7~52.1% 였어요. Woodpecker 는 새를 빼고 재도 바뀐 LED 가 57.3/35.1/50.0% 라서, 그 값은 거의 다 잎 사이로 움직이는 햇빛 반점에서 와요. 조금 위에서 본 장면은 세로를 싸게 얻어요. Pop-up Book 은 누운 페이지가 깊이의 5분의 1 줄만 써서, 책을 아래 34줄에 두고도 선 카드가 위 3분의 1까지 닿아요. 닉시관 하나는 지름이 높이의 절반쯤이라 Nixie 의 IN-18 은 54 LED 너비에 109줄로 서요.Slinky 는 계단과 벽을 빼고 스프링과 그림자만 세면 켜진 LED 가 0.4/2.6/3.0% 이고, 스프링이 켠 계단등까지 세면 20.9/16.5/8.6% 예요. 22판의 세로 다섯 가운데 넷은 바탕을 다 칠해서 `thirds` 가 말해 주는 것이 적었어요. 바탕을 검게 지운 사본으로 다시 재면 Liftoff 는 로켓만의 위 3분의 1이 켜진 LED 3.7%, 바뀐 LED 8.2% 라서, 그 3분의 1의 변화는 대부분 카메라가 고개를 들며 어두워지는 하늘에서 와요. Bowling Lane 은 공을 던지지 않게 하면 바뀐 LED 가 5.2/9.5/6.6% 로 떨어져서, 그 값은 거의 다 공과 그 빛이에요. Circulation 은 바탕을 21 아래로 내려 몸만 켜진 LED 로 세게 해서 `thirds` 가 34/50/26 이에요. 남은 자리로 짠 Flame Test 는 실험대가 어두워 아래 3분의 1의 바뀐 LED 가 4.6% 였어요. 불꽃빛의 몫을 0.42 에서 0.52 로 올려도 1.3 포인트만 올라서, 어두운 바닥은 빛을 비추는 것보다 2~8초 창 안에 그 자리로 가는 움직임이 있어야 바뀐 LED 가 올라요. 23판의 세로 일곱 가운데 Proscenium 은 금박 아치가 세 3분의 1을 다 지나가서, 아치를 검게 바꿔 다시 재면 `thirds` 가 94/97/69 에서 63/85/65 가 돼요. Final Approach 는 위 3분의 1을 밤하늘이 채워서, 도시 빛을 받은 천정을 33/255 로 두어 문턱 24 를 넘겼어요. 가는 선 하나가 지나가는 3분의 1은 둘레를 같이 밝혀야 해요. Axon 의 가운데 3분의 1은 축삭 한 줄이 지나가는 자리라서, 수초의 빛과 비스듬히 지나가는 이웃 축삭 둘을 두어 바뀐 LED 가 23.6~35.5% 가 됐어요. 한 번 일어나는 일은 2~8초 창에 들게 짰어요. Hanging Scroll 은 첫 그림이 걸려 있는 시간을 2.2초로 줄여 4.8~6.8초에 말려 올라가게 했고, Giraffe 는 첫 물 마시기를 3.4초에 두었어요. Elephant Toothpaste 의 아래 3분의 1은 바뀐 LED 가 9.7% 로 일곱 가운데 가장 낮아요. 기둥이 6.8초에 꺾이기 전까지는 실린더와 실험대가 서 있기만 해서예요. 24판의 세로 일곱 가운데 다섯은 바탕을 다 칠해서 바뀐 LED 로 봤어요. 23판이 물은 어두운 하늘의 떼는 Emergence 가 답했어요. 하늘을 지우고 박쥐만 세면 3분의 1마다 13.4~13.6, 9.9~10.2, 5.1~5.3% 가 켜져서, 기둥이 좁은 아래 3분의 1은 문턱을 겨우 넘어요. 2~8초 동안 바뀐 LED 로 세면 아래 3분의 1도 23.5~25.0% 예요. 자라는 것의 키가 위 3분의 1을 정해요. Potter's Wheel 은 그릇을 64~90줄로 빚을 때 씨앗 넷 가운데 둘이 위 3분의 1의 바뀐 LED 0.6% 와 0.0% 였고, 76~92줄로 키우자 열여섯 모두 15.2% 를 넘었어요. 바탕의 움직임을 멈추고 다시 재면 주인공의 몫이 보여요. Tower Crane 은 구름을 멈춰도 바뀐 LED 가 45.2/54.1/36.3% 이고, Pipe Organ 은 장미창 빛을 꺼도 3분의 1마다 18.2% 를 넘어요. Flying Trapeze 는 `thirds` 가 81/35/34 로 일곱 가운데 가장 고르지 않지만, 팔로 스폿 빛줄기가 연무 속을 쓸어서 바뀐 LED 는 93.9/87.9/57.5% 예요.
 
 ## 다시 돌리기
 
diff --git a/incoming/pattern-study/families.json b/incoming/pattern-study/families.json
index f460d5a7d..9c78ac3d3 100644
--- a/incoming/pattern-study/families.json
+++ b/incoming/pattern-study/families.json
@@ -42,5 +42,7 @@
   "body": { "label": "몸", "color": "#bb5566" },
   "flight": { "label": "비행", "color": "#9944ee" },
   "stage": { "label": "무대·공연", "color": "#ff0066" },
-  "mammal": { "label": "짐승", "color": "#998844" }
+  "mammal": { "label": "짐승", "color": "#998844" },
+  "construction": { "label": "공사·건설", "color": "#ffee00" },
+  "pottery": { "label": "도자기", "color": "#b05030" }
 }
diff --git a/incoming/pattern-study/index.html b/incoming/pattern-study/index.html
index b395f51da..d33b9cb48 100644
--- a/incoming/pattern-study/index.html
+++ b/incoming/pattern-study/index.html
@@ -141,7 +141,7 @@ <h1>패턴 연구</h1>
 
   <div id="cards"></div>
 </main>
-<script id="study-data" type="application/json">{"patterns":[{"slug":"abyss","title":"Abyss","family":"ocean","round":16,"note":"물결 밑 햇빛층에서 심해 바닥까지 바다 한 기둥이 128줄에 서요. 빛내림과 정어리 떼 아래로 관해파리와 샛비늘치, 아귀의 미끼 불빛을 지나 잠수정이 등을 켜고 열수 분출공까지 내려갔다 올라와요. K1 을 누르면 죽은 고래가 기둥을 다 가라앉아 바닥에 뼈로 남아요.","idea":"One column of open sea, the 128 rows its depth, from god rays and sardines under the waves through the twilight and the black to a vent on the floor, with marine snow falling and a submersible diving.","buttons":"K1 tap drops a dead whale; it sinks the whole column, lighting up the plankton in the dark, and stays on the floor as a skeleton.","code":"// ===== Patternflow pattern =====\n// Title:   Abyss\n// Family:  ocean\n// Idea:    One column of open sea, the 128 rows its depth, from god rays and sardines under the waves through the twilight and the black to a vent on the floor, with marine snow falling and a submersible diving.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 16, after the ocean's zones of light\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Night=0..1, Speed=0.2..3, Current=-1..1, Bloom=0..1\n//\n// Knob 1: Night. Noon to midnight: the sky through the surface goes gold, then silver, and the lanternfish rise from the twilight to feed near the top, as they do every night.\n// Knob 2: Speed. How fast the sea runs: at 2 the submersible reaches the floor in 20 seconds and a dive is 50; waves, fish and snow keep pace.\n// Knob 3: Current. A current left or right under a wind that roughens the waves: the god rays break up and slide, the snow slants, the siphonophore streams out and the school faces upstream.\n// Knob 4: Bloom. From the clear blue of an ocean gyre to a spring plankton bloom: the water greens, the light dies shallower and the snow thickens.\n// Buttons: K1 tap drops a dead whale; it sinks the whole column, lighting up the plankton in the dark, and stays on the floor as a skeleton.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Depth squeezes going down: the sunlit zone (to 200 m) is rows 0 to 42, the twilight zone\n// (to 1000 m) rows 43 to 85, the midnight zone (to 4000 m) the rest down to the floor.\nconst FLOOR = 118;\nconst DARK = 90; // 1000 m: no sunlight below\n// The vent's chimney: its column, and the row of its mouth.\nconst VX = 45;\nconst VTOP = 101;\n// God rays are lines from a point RAY_D rows above the surface; RAY_U bins per unit slope.\nconst RAY_D = 46;\nconst RAY_U = 150;\n// How much of its colour the floor shows with no lamp on it, as a low-light camera sees it.\nconst AMB = 0.26;\n// One dive at Speed 2, in seconds: down, working at the vent, up, then 5 at the surface.\nconst DOWN = 20;\nconst WORK = 9;\nconst UP = 16;\nconst CYCLE = DOWN + WORK + UP + 5;\nconst LANT = 14;\nconst SNOW = 470;\nconst SPARK = 90;\nconst STEM = 54;\n\n// The submersible, bow right: w hull, r sail, v viewport, l lamp, t thruster, g belly, k skid.\nconst SUB = [\"......rr\", \"...wwwwwwww\", \".wwwwwwwwwwww\", \"twwwwwwwwwwwvv\", \".wwwwwwwwwwwwl\", \"..gggggggggg\", \"...k......k\"];\nconst HULL = { w: [225, 228, 232], r: [230, 70, 30], g: [130, 135, 142], t: [90, 92, 96], k: [55, 56, 60], v: [200, 140, 60] };\n// A female deep-sea anglerfish facing right: b body, t teeth, e eye, f fin.\nconst ANGLER = [\"....bbbbb\", \"..bbbbbbbbb\", \"fbbbbbbbbbbb\", \"fbbbbbbbbbet\", \"fbbbbbbbbb\", \"fbbbbbbbbbt\", \"fbbbbbbbbbbbt\", \"..bbbbbbbbbb\", \"....bbbbbb\"];\n// A sperm whale's carcass, flukes on the left, and the skeleton it leaves.\nconst WHALE = [\"..........xxxxxxxxx\", \"xx...xxxxxxxxxxxxxxx\", \".xxxxxxxxxxxxxxxxxxx\", \"xx...xxxxxxxxxxxxxx\", \"..........xx\"];\nconst BONES = [\"....o.o.o.o.o.o\", \"....o.o.o.o.o.o.oooo\", \"oooooooooooooooooooo\", \"....o.o.o.o.o.o..ooo\"];\n// The sky seen up through the surface at noon, at sunset and under the moon.\nconst SKY = [[200, 235, 245], [250, 150, 60], [52, 64, 84]];\nconst SPINDLE = [1.4, 2.3, 2.5, 1.7];\n// A sea pig in two steps.\nconst PIG = [\n  [\".o.o\", \"ooooo\", \"o.o.o\"],\n  [\".o.o\", \"ooooo\", \".ooo\"],\n];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction add(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] += r;\n  buf[o + 1] += g;\n  buf[o + 2] += b;\n}\n\nfunction set(buf, o, r, g, b) {\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nfunction sprite(art, x0, y0, fn) {\n  for (let j = 0; j \u003c art.length; j++)\n    for (let i = 0; i \u003c art[j].length; i++) {\n      const x = x0 + i;\n      const y = y0 + j;\n      if (art[j][i] !== \".\" && x >= 0 && x \u003c W && y >= 0 && y \u003c H) fn(x, y, art[j][i], j, (y * W + x) * 3);\n    }\n}\n\nfunction shade(P, o, r, g, b) {\n  const L = P.lamp;\n  set(P.buf, o, r * (AMB + 2.6 * L[o]), g * (AMB + 2.6 * L[o + 1]), b * (AMB + 2.6 * L[o + 2]));\n}\n\nconst F = (n) => new Float32Array(n);\nconst rnd = (n, a, b) => F(n).map(() => a + Math.random() * b);\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, drift: 0, night: 0, cur: 0, bloom: 0.06, started: false, knext: 0, kdebt: 0, pulse: 0 });\n  Object.assign(P, { whale: false, wx: 0, wy: 0, skel: -1, pig: 10, sub: { x: 0, y: 0, on: 0, a: 1 } });\n  Object.assign(P, { buf: F(N * 3), lamp: F(N * 3), rows: F(H * 4), sky: F(3), ray: F(256), floorCol: F(N * 3) });\n  P.floorOn = new Uint8Array(N);\n  P.floorY = new Int16Array(W);\n  // The panel opens mid-dive, the submersible halfway down.\n  P.subT = DOWN * 0.5;\n  // Schooling fish keep about a body length apart, so the sardines sit on a loose lattice.\n  const fx = [];\n  const fy = [];\n  for (let gy = -3; gy \u003c= 3; gy++)\n    for (let gx = -5; gx \u003c= 5; gx++) {\n      const x = (gx + (gy & 1) * 0.5) * 4.2 + (Math.random() - 0.5) * 1.2;\n      const y = gy * 2.3 + (Math.random() - 0.5) * 0.8;\n      if ((x / 16) ** 2 + (y / 7.2) ** 2 \u003c 1) fx.push(x), fy.push(y);\n    }\n  P.fx = Float32Array.from(fx);\n  P.fy = Float32Array.from(fy);\n  P.fph = P.fx.map(() => Math.random() * 6.283);\n  // Lanternfish: each one's depth by day, 400 to 800 m down, and by night near the top.\n  P.lx = rnd(LANT, 4, 56);\n  P.ly = F(LANT);\n  P.ldir = new Int8Array(LANT).map(() => (Math.random() \u003c 0.5 ? -1 : 1));\n  P.lv = rnd(LANT, 1.6, 2.2);\n  P.lday = rnd(LANT, 0, 2).map((v, i) => v + 50 + ((i * 5) % LANT) * 2.5);\n  P.lnight = rnd(LANT, 0, 2).map((v, i) => v + 7 + ((i * 3) % LANT) * 2.4);\n  P.lfl = F(LANT).fill(9);\n  P.sx = rnd(SNOW, 0, W);\n  P.sy = rnd(SNOW, 0, FLOOR);\n  P.sv = rnd(SNOW, 0.5, 1.1);\n  P.ss = rnd(SNOW, 0, 1).map((v) => (v \u003c 0.22 ? 1 : 0.55 + 0.3 * Math.random()));\n  // Flashes of bioluminescence: a copepod's spark lasts under a second, a shrimp's spat cloud two.\n  Object.assign(P, { kx: F(SPARK), ky: F(SPARK), kage: F(SPARK).fill(9), klife: F(SPARK).fill(1) });\n  bakeFloor(P);\n}\n\n// The floor's colours: silt with manganese nodules, the chimney, tube worms, and any skeleton.\nfunction bakeFloor(P) {\n  const lay = (x, y, r, g, b) => {\n    set(P.floorCol, (y * W + x) * 3, r, g, b);\n    P.floorOn[y * W + x] = 1;\n  };\n  P.floorCol.fill(0);\n  P.floorOn.fill(0);\n  for (let x = 0; x \u003c W; x++) {\n    const top = Math.round(FLOOR + 1.3 * Math.sin(x * 0.17 + 1) + 0.8 * Math.sin(x * 0.53) - (hash(x, 3) \u003c 0.15 ? 1 : 0));\n    P.floorY[x] = top;\n    for (let y = top; y \u003c H; y++) {\n      const g = 0.82 + 0.3 * hash(x, y) - 0.04 * (y - top);\n      lay(x, y, 112 * g, 104 * g, 90 * g);\n    }\n    if (hash(x, 9) \u003c 0.18) lay(x, top, 34, 28, 26);\n  }\n  // The chimney: sulphide rock streaked with rust and sulphur.\n  for (let y = VTOP; y \u003c FLOOR + 2; y++) {\n    const h = (y - VTOP) / (FLOOR - VTOP);\n    const hw = 1.2 + 3.6 * h * h + (hash(y, 4) - 0.5) * 1.2;\n    for (let x = Math.round(VX - hw); x \u003c= Math.round(VX + hw); x++) {\n      const s = hash(x, y * 7);\n      if (s \u003c 0.12) lay(x, y, 150, 86, 38);\n      else if (s \u003c 0.17) lay(x, y, 150, 140, 62);\n      else lay(x, y, 80 + 20 * s, 66 + 14 * s, 58);\n    }\n  }\n  [-8, -6, -5, 5, 6, 8, 9].forEach((d, i) => {\n    const x = VX + d;\n    const top = P.floorY[x] - 3 - Math.floor(hash(i, 5) * 4);\n    for (let y = top; y \u003c P.floorY[x]; y++) lay(x, y, 205, 205, 195);\n    lay(x, top - 1, 220, 30, 30);\n    lay(x + Math.sign(d), top - 1, 180, 20, 24);\n  });\n  if (P.skel >= 0) sprite(BONES, P.skel, 0, (x, y, c, j) => lay(x, P.floorY[x] - 3 + j, 226, 218, 192));\n}\n\n// The water's colour at each row: each channel dies with depth at its own rate, red within a\n// few rows, green next, blue last. A bloom's chlorophyll eats the blue, so its water is green.\nfunction bakeRows(P) {\n  const n = P.night;\n  const b = P.bloom;\n  const day = 1 - smooth(0.22, 0.88, n);\n  const sun = 0.1 + 0.9 * day * Math.sqrt(day);\n  const warm = Math.exp(-(((n - 0.48) / 0.16) ** 2));\n  const moon = smooth(0.6, 1, n);\n  const dusk = smooth(0.12, 0.48, n);\n  for (let c = 0; c \u003c 3; c++) {\n    const lit = SKY[0][c] + (SKY[1][c] - SKY[0][c]) * dusk;\n    P.sky[c] = lit + (SKY[2][c] - lit) * moon;\n  }\n  const tr = sun * (1 + 0.5 * warm - 0.3 * moon) * (60 - 20 * b);\n  const tg = sun * (1 - 0.08 * warm - 0.1 * moon) * (175 + 55 * b);\n  const tb = sun * (1 - 0.15 * warm + 0.1 * moon) * (245 - 125 * b);\n  for (let y = 0; y \u003c H; y++) {\n    const f = 1 - smooth(62, DARK, y);\n    set(P.rows, y * 4, tr * Math.exp(-y / 4.5) * f, tg * Math.exp(-y / (18 - 6 * b)) * f, tb * Math.exp(-y / (44 - 24 * b)) * f);\n    P.rows[y * 4 + 3] = 1.25 * Math.exp(-y / 24) * (1 - 0.55 * b) * (0.35 + 0.65 * day);\n  }\n  P.sun = sun;\n}\n\n// The waves focus sunlight into shafts: each bin is one line down from the point above, lit by\n// where it crosses the waves. Wind adds short fast waves that break the shafts up.\nfunction bakeRays(P) {\n  const t = P.t;\n  const rough = 0.8 * Math.abs(P.cur);\n  for (let j = 0; j \u003c 256; j++) {\n    const s = 34 + ((j - 128) / RAY_U) * RAY_D + P.drift;\n    const a =\n      Math.sin(0.41 * s + t + 0.9 * Math.sin(0.16 * s - 0.45 * t)) +\n      0.75 * Math.sin(0.73 * s - 1.6 * t + 1.3) +\n      0.5 * Math.sin(1.21 * s + 2.2 * t + 0.4) +\n      rough * (Math.sin(1.93 * s + 3.4 * t) + 0.7 * Math.sin(2.71 * s - 4.1 * t + 2));\n    P.ray[j] = clamp((a + 0.3 + 0.4 * rough) / (1.95 + 1.2 * rough), 0, 1) ** 3;\n  }\n}\n\nfunction spark(P, x, y, kind) {\n  const i = (P.knext = (P.knext + 1) % SPARK);\n  P.kx[i] = x;\n  P.ky[i] = y;\n  P.kage[i] = 0;\n  P.klife[i] = kind ? 1.4 + Math.random() * 0.6 : 0.25 + Math.random() * 0.4;\n}\n\n// The submersible's place in its dive, and its lamps' angle below the horizon.\nfunction placeSub(P) {\n  const S = P.sub;\n  const ph = P.subT % CYCLE;\n  const ease = (f) => f - (0.4 * Math.sin(6.2832 * f)) / 6.2832;\n  let y = 5 + 0.6 * Math.sin(P.t * 1.7);\n  let x = 14;\n  S.a = 1;\n  if (ph \u003c DOWN) {\n    const e = ease(ph / DOWN);\n    y = 5 + 90 * e;\n    x = 14 + 9 * e;\n  } else if (ph \u003c DOWN + WORK) {\n    const f = (ph - DOWN) / WORK;\n    y = 95 + 1.5 * Math.sin(f * 3.14);\n    x = 23 + 3 * Math.sin(f * 3.14);\n    // The pilot sweeps the lamps over the chimney and back.\n    S.a = 0.55 + 0.35 * Math.cos(f * 6.2832);\n  } else if (ph \u003c DOWN + WORK + UP) {\n    const e = ease((ph - DOWN - WORK) / UP);\n    y = 95 - 90 * e;\n    x = 23 - 9 * e;\n    S.a = 1.35;\n  }\n  S.x = x + P.cur * 10;\n  S.y = y;\n  S.on = ph \u003c DOWN + WORK + UP ? smooth(9, 16, y) : 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.night = clamp(k[0], 0, 1);\n  P.cur = clamp(k[2], -1, 1);\n  P.bloom = clamp(k[3], 0, 1);\n  const s = (dt * clamp(k[1], 0.2, 3)) / 2;\n  P.t += s;\n  P.drift += s * P.cur * 4;\n  P.subT += s;\n  placeSub(P);\n  const S = P.sub;\n\n  // Lanternfish swim to the depth of the hour at 7 rows a second; males flash a tail gland.\n  const up = smooth(0.35, 0.85, P.night);\n  for (let i = 0; i \u003c LANT; i++) {\n    const want = P.lday[i] + (P.lnight[i] - P.lday[i]) * up;\n    P.ly[i] = P.started ? P.ly[i] + clamp(want - P.ly[i], -7 * s, 7 * s) : want;\n    P.lx[i] = clamp(P.lx[i] + (P.ldir[i] * P.lv[i] + P.cur * 1.5) * s, 0, 63);\n    if ((P.lx[i] - 31.5) * P.ldir[i] > 28.5 || Math.random() \u003c 0.05 * s) P.ldir[i] *= -1;\n    P.lfl[i] += s;\n    if (P.lfl[i] > 9 && Math.random() \u003c 0.12 * s) P.lfl[i] = 0;\n  }\n  P.started = true;\n\n  const flakes = Math.round(110 + 360 * P.bloom);\n  for (let i = 0; i \u003c flakes; i++) {\n    P.sy[i] += P.sv[i] * s;\n    P.sx[i] = (P.sx[i] + (P.cur * 4 + 0.7 * Math.sin(P.t * 0.8 + i)) * s + W) % W;\n    if (P.sy[i] >= P.floorY[Math.floor(P.sx[i])]) {\n      P.sy[i] -= FLOOR;\n      P.sx[i] = Math.random() * W;\n    }\n  }\n\n  // Copepods spark in the dark, now and then a shrimp spits a cloud of light, and at night the\n  // surface sparkles too. The submersible trips more as it passes.\n  P.kdebt += s * (5 + 5 * up);\n  for (; P.kdebt > 1; P.kdebt--) {\n    const shallow = Math.random() \u003c 0.45 * up;\n    spark(P, Math.random() * W, shallow ? 3 + Math.random() * 40 : 52 + Math.random() * 64, !shallow && Math.random() \u003c 0.13 ? 1 : 0);\n  }\n  if (S.y > 55 && Math.random() \u003c 6 * s) spark(P, S.x - 7 + Math.random() * 14, S.y - 3 + Math.random() * 7, 0);\n  for (let i = 0; i \u003c SPARK; i++) P.kage[i] += s;\n\n  P.pulse = (P.pulse + s) % 4;\n\n  if (input.btnPressed && input.btnPressed[0]) Object.assign(P, { whale: true, wx: 4 + Math.floor(Math.random() * 18), wy: -4 });\n  if (P.whale) {\n    P.wy += 5 * s;\n    if (P.wy > 50 && Math.random() \u003c 30 * s) spark(P, P.wx + Math.random() * 20, P.wy - 3 + Math.random() * 7, 0);\n    if (P.wy >= FLOOR - 4) {\n      P.whale = false;\n      P.skel = P.wx;\n      bakeFloor(P);\n    }\n  }\n\n  P.pig = P.pig > 34 ? -6 : P.pig + 0.35 * s;\n}\n\n// The lamps' light, warm near and blue-green further out as the water takes the red first;\n// the beam lights the water itself faintly.\nfunction lightLamps(P) {\n  const L = P.lamp;\n  L.fill(0);\n  const S = P.sub;\n  if (S.on \u003c 0.01) return;\n  const ox = S.x + 6.5;\n  const oy = S.y + 1.5;\n  const ca = Math.cos(S.a);\n  const sa = Math.sin(S.a);\n  const haze = (105 + 60 * P.bloom) * S.on;\n  for (let y = Math.max(0, Math.floor(oy - 4)); y \u003c= Math.min(H - 1, oy + 46); y++) {\n    const dy = y + 0.5 - oy;\n    for (let x = Math.max(0, Math.floor(ox - 46)); x \u003c= Math.min(W - 1, ox + 46); x++) {\n      const dx = x + 0.5 - ox;\n      const r2 = dx * dx + dy * dy;\n      const r = Math.sqrt(r2) + 0.01;\n      const c = (dx * ca + dy * sa) / r;\n      if (c \u003c 0.88) continue;\n      const I = (smooth(0.88, 0.965, c) * S.on * Math.exp(-r / 38)) / (1 + r2 / 500);\n      const o = (y * W + x) * 3;\n      set(L, o, I * Math.exp(-r / 16), I * Math.exp(-r / 40), I * Math.exp(-r / 60));\n      add(P.buf, x, y, L[o] * haze, L[o + 1] * haze, L[o + 2] * haze);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const rows = P.rows;\n  const L = P.lamp;\n  const t = P.t;\n  bakeRows(P);\n  bakeRays(P);\n\n  const xs = 34 + 2 * Math.sin(t * 0.3);\n  for (let y = 0; y \u003c H; y++) {\n    const A = rows[y * 4 + 3];\n    const inv = RAY_U / (y + RAY_D);\n    for (let x = 0, o = y * W * 3; x \u003c W; x++, o += 3) {\n      const m = A > 0.02 ? 1 + A * (1.5 * P.ray[clamp(((x - xs) * inv + 128) | 0, 0, 255)] - 0.33) : 1;\n      set(buf, o, rows[y * 4] * m, rows[y * 4 + 1] * m, rows[y * 4 + 2] * m);\n    }\n  }\n  // The underside of the surface: the sky through Snell's window, and the waves.\n  for (let y = 0; y \u003c 4; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const w = 0.5 + 0.5 * Math.sin(x * 0.45 + P.drift * 0.45 + t * 1.3 + Math.sin(x * 0.19 - t * 0.6) * 1.4);\n      const v = (1 - y / 4) * (0.55 + 0.45 * w) + 0.8 * Math.exp(-(((x - xs) / 5) ** 2)) * (1 - y / 3.5);\n      add(buf, x, y, v * P.sky[0], v * P.sky[1], v * P.sky[2]);\n    }\n\n  lightLamps(P);\n\n  // The floor, and the vent's dull red glow, too faint for an eye but not for a camera.\n  const glow = 0.75 + 0.25 * Math.sin(t * 7) * Math.sin(t * 3.1);\n  for (let p = (VTOP - 1) * W; p \u003c N; p++) {\n    if (!P.floorOn[p]) continue;\n    const o = p * 3;\n    shade(P, o, P.floorCol[o], P.floorCol[o + 1], P.floorCol[o + 2]);\n    const d2 = ((p % W) - VX) ** 2 + (Math.floor(p / W) - VTOP) ** 2;\n    const v = d2 \u003c 30 ? 95 * glow * Math.exp(-d2 / 5) : 0;\n    set(buf, o, buf[o] + v, buf[o + 1] + v * 0.18, buf[o + 2] + v * 0.05);\n  }\n\n  // The black smoke hides the beam behind it, greys where the lamps catch it, reddens at its\n  // root, where 350-degree water comes out.\n  for (let y = VTOP - 30; y \u003c VTOP; y++) {\n    const h = VTOP - y;\n    const cx = VX + P.cur * 0.016 * h * h + 1.1 * Math.sin(h * 0.3 - t * 2.1);\n    const hw = 1 + h * 0.3;\n    const red = 90 * glow * Math.exp(-h / 2.5);\n    for (let x = Math.max(0, Math.ceil(cx - hw)); x \u003c= Math.min(W - 1, cx + hw); x++) {\n      const q = (x - cx) / hw;\n      const d = (1 - q * q) * (0.72 + 0.14 * Math.sin(x * 1.3 + y * 0.9 + t * 3) + 0.14 * Math.sin(x * 0.7 - y * 1.7 + t * 4.1)) * (1 - h / 30);\n      const o = (y * W + x) * 3;\n      const k = 1 - 0.8 * d;\n      set(buf, o, buf[o] * k + d * (62 * (0.08 + 2.2 * L[o]) + red), buf[o + 1] * k + d * (56 * (0.08 + 2.2 * L[o + 1]) + red * 0.15), buf[o + 2] * k + d * 52 * (0.08 + 2.2 * L[o + 2]));\n    }\n  }\n\n  // A sea pig, the pink deep-sea cucumber, walks the silt on its tube feet.\n  const px = Math.round(P.pig);\n  sprite(PIG[Math.floor(t * 2) % 2], px, P.floorY[clamp(px + 2, 0, W - 1)] - 3, (x, y, c, j, o) => shade(P, o, 225, 165, 175));\n\n  drawSiphonophore(P, buf);\n  drawLanternfish(P, buf);\n  drawAngler(P, buf);\n  drawSchool(P, buf);\n\n  const flakes = Math.round(110 + 360 * P.bloom);\n  for (let i = 0; i \u003c flakes; i++) {\n    const y = Math.floor(P.sy[i]);\n    if (y \u003c 4) continue;\n    const o = (y * W + Math.floor(P.sx[i])) * 3;\n    const lit = P.ss[i] * (34 + 0.2 * rows[y * 4 + 2]);\n    const k = 330 * P.ss[i];\n    set(buf, o, buf[o] + lit * 0.95 + k * L[o], buf[o + 1] + lit + k * L[o + 1], buf[o + 2] + lit * 0.95 + k * L[o + 2]);\n  }\n\n  for (let i = 0; i \u003c SPARK; i++) {\n    const a = P.kage[i] / P.klife[i];\n    if (a >= 1) continue;\n    const cloud = P.klife[i] > 1;\n    const R = cloud ? 1 + 4 * Math.sqrt(a) : 1.6;\n    const v = cloud ? 150 * (1 - a) : (a \u003c 0.15 ? a / 0.15 : (1 - a) / 0.85) * 230;\n    for (let dy = -5; dy \u003c= 5; dy++)\n      for (let dx = -5; dx \u003c= 5; dx++) {\n        const q = 1 - (dx * dx + dy * dy) / (R * R);\n        if (q > 0) add(buf, Math.round(P.kx[i]) + dx, Math.round(P.ky[i]) + dy, v * 0.25 * q, v * 0.68 * q, v * q);\n      }\n  }\n\n  drawWhale(P, buf);\n  drawSub(P, buf);\n\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[p * 3]), Math.min(255, buf[p * 3 + 1]), Math.min(255, buf[p * 3 + 2]));\n}\n\n// The siphonophore: one glassy stem, polyps every four LEDs trailing fishing tentacles.\nfunction drawSiphonophore(P, buf) {\n  const t = P.t;\n  const cur = P.cur;\n  const tx = 52 + 4 * Math.sin(t * 0.05);\n  const ty = 46 + 1.5 * Math.sin(t * 0.13);\n  const pp = P.pulse * 16;\n  for (let i = 0; i \u003c STEM; i++) {\n    const s = i / STEM;\n    const x = tx + cur * 15 * s * Math.sqrt(s) + 3 * s * Math.sin(i * 0.15 - t * 0.8);\n    const iy = Math.round(ty + 8.5 + i * (0.95 - 0.3 * Math.abs(cur) * s));\n    const v = 0.24 + 0.85 * Math.exp(-(((i - pp) / 2.5) ** 2));\n    const ix = Math.round(x);\n    add(buf, ix, iy, 70 * v, 120 * v, 230 * v);\n    for (const e of [-1, 1]) add(buf, ix + e, iy, 21 * v, 36 * v, 70 * v);\n    if (i % 4 === 2) {\n      add(buf, ix, iy, 120 * v, 150 * v, 200 * v);\n      for (let j = 1; j \u003c= 4; j++)\n        add(buf, Math.round(x + (cur >= 0 ? j : -j) * (0.3 + Math.abs(cur) * 0.7) + 0.5 * Math.sin(t + i)), iy + j, 26 * v, 40 * v, 80 * v);\n    }\n  }\n  // On top a gas float, then four pairs of swimming bells, each pair beating after the last.\n  const lit = 1 + 1.5 * Math.exp(-pp / 3);\n  const cx = Math.round(tx);\n  add(buf, cx, Math.round(ty) - 1, 95, 45, 34);\n  for (let k = 0; k \u003c 4; k++) {\n    const sq = Math.max(0, Math.sin(t * 4.2 - k * 0.9)) ** 4;\n    for (let r = 0; r \u003c 2; r++) {\n      const n = Math.round(SPINDLE[k] * (1 - 0.3 * sq) - r * 0.5);\n      for (let d = -n; d \u003c= n; d++) {\n        const v = (Math.abs(d) === n ? 0.4 : 0.12) * lit;\n        add(buf, cx + d, Math.round(ty + 0.5 + k * 2) + r, 90 * v, 150 * v, 255 * v);\n      }\n    }\n  }\n}\n\n// Lanternfish show little but their photophores, belly lights that match the faint light from\n// above and hide the fish's shadow.\nfunction drawLanternfish(P, buf) {\n  const D = [0, 0, -1, 1, -3, 1, -5, 1];\n  for (let i = 0; i \u003c LANT; i++) {\n    const x = Math.round(P.lx[i]);\n    const y = Math.round(P.ly[i] + 0.6 * Math.sin(P.t * 1.3 + i));\n    const d = P.ldir[i];\n    for (let j = 0; j \u003c 11; j++) add(buf, x - d * (j >> 1), y + (j & 1), 10, 16, 24);\n    const v = 0.75 + 0.25 * Math.sin(P.t * 2 + i * 1.7);\n    for (let j = 0; j \u003c D.length; j += 2) add(buf, x + d * D[j], y + D[j + 1], 50 * v, 150 * v, 240 * v);\n    if (P.lfl[i] \u003c 0.25) add(buf, x - d * 6, y, 200, 230, 255);\n  }\n}\n\n// The anglerfish is black and shows only where its lure lights it: the jaw and needle teeth.\nfunction drawAngler(P, buf) {\n  const t = P.t;\n  const ax = Math.round(5 + 3 * Math.sin(t * 0.07));\n  const ay = Math.round(103 + 2 * Math.sin(t * 0.11));\n  const lx = ax + 15 + 0.6 * Math.sin(t * 1.9);\n  const ly = ay + 1 + 0.8 * Math.sin(t * 2.6);\n  const pulse = 0.6 + 0.4 * Math.max(0, Math.sin(t * 1.3)) + (Math.sin(t * 9) > 0.97 ? 0.3 : 0);\n  sprite(ANGLER, ax, ay, (x, y, c) => {\n    const g = pulse / (1 + ((x - lx) ** 2 + (y - ly) ** 2) / 14);\n    const k = c === \"t\" ? [250, 255, 245] : c === \"e\" ? [90, 170, 160] : [120, 96, 92];\n    add(buf, x, y, k[0] * g, k[1] * g, k[2] * g);\n  });\n  for (let s = 0.1; s \u003c 0.95; s += 0.12) {\n    const u = 1 - s;\n    const x = u * u * (ax + 8) + 2 * u * s * (ax + 15) + s * s * lx;\n    const y = u * u * ay + 2 * u * s * (ay - 7) + s * s * (ly - 1);\n    add(buf, Math.round(x), Math.round(y), 24 * pulse, 60 * pulse, 54 * pulse);\n  }\n  for (let dy = -3; dy \u003c= 3; dy++)\n    for (let dx = -3; dx \u003c= 3; dx++) {\n      const q = dx * dx + dy * dy;\n      const g = q ? (pulse * 0.5) / (1 + q) : pulse * 1.3;\n      add(buf, Math.round(lx) + dx, Math.round(ly) + dy, 70 * g, 235 * g, 205 * g);\n    }\n}\n\n// The sardines wheel as one. Broadside a fish is a silver dash, darker to the tail; turning,\n// it is seen end on and its flank throws the sun back, so a flash runs through the school.\nfunction drawSchool(P, buf) {\n  const t = P.t;\n  const cur = P.cur;\n  // Into a current the school holds station, facing upstream.\n  const hold = Math.min(1, Math.abs(cur) * 1.4);\n  const amp = 16 * (1 - 0.6 * hold);\n  const cx = 32 - 12 * cur * hold + amp * Math.sin(t * 0.23);\n  const cy = 22 + 6 * Math.sin(t * 0.29 + 1);\n  const sun = P.sun;\n  for (let i = 0; i \u003c P.fx.length; i++) {\n    const ox = P.fx[i];\n    const oy = P.fy[i];\n    // The leading side turns first; the turn reaches the far side 0.8 s later.\n    const lag = (ox / 16) * 0.4 * Math.sign(Math.cos(t * 0.23)) + 0.4;\n    const hx = Math.tanh(amp * 0.32 * Math.cos((t - lag) * 0.23)) * (1 - hold) - Math.sign(cur) * hold;\n    const x = Math.round(cx + ox + 1.8 * Math.sin(oy * 0.45 + t * 0.7) + 0.5 * Math.sin(t * 1.7 + P.fph[i]));\n    const y = Math.round(cy + oy + 1.1 * Math.sin(ox * 0.22 + t * 0.9));\n    if (y \u003c 4 || y > 44) continue;\n    const dir = hx >= 0 ? 1 : -1;\n    const len = Math.abs(hx) > 0.6 ? 3 : Math.abs(hx) > 0.25 ? 2 : 1;\n    const g = Math.min(1, (1 - Math.abs(hx)) ** 3 * 1.3 + Math.max(0, Math.sin(t * 2.3 + P.fph[i] * 7)) ** 40);\n    const light = sun * (0.35 + 0.65 * Math.min(1, P.rows[y * 4 + 2] / 170));\n    for (let j = 0; j \u003c len; j++) {\n      const xx = x - dir * j;\n      if (xx \u003c 0 || xx >= W) continue;\n      const o = (y * W + xx) * 3;\n      const body = (j === 2 ? 0.45 : j === 1 ? 0.8 : 1) * light;\n      const f = 1 - g;\n      set(buf, o, (buf[o] * 0.25 + 120 * body) * f + 235 * g * sun, (buf[o + 1] * 0.25 + 160 * body) * f + 242 * g * sun, (buf[o + 2] * 0.25 + 190 * body) * f + 250 * g * sun);\n    }\n  }\n}\n\n// The carcass is lit as the water round it is; in the dark the plankton it hits lights its edges.\nfunction drawWhale(P, buf) {\n  if (!P.whale) return;\n  const tick = Math.floor(P.t * 12);\n  sprite(WHALE, P.wx, Math.round(P.wy), (x, y, c, j, o) => {\n    const day = P.rows[clamp(y - 3, 0, H - 1) * 4 + 2] / 255;\n    const sh = (j ? 0.8 : 1.4) * day;\n    const i = x - P.wx;\n    const edge = !j || j === 4 || [WHALE[j - 1][i], WHALE[j + 1][i], WHALE[j][i - 1], WHALE[j][i + 1]].some((n) => n !== \"x\");\n    const g = edge ? clamp(1 - day * 4, 0, 1) * (hash(x * 31 + tick, y) \u003c 0.35 ? 1 : 0.22) : 0;\n    set(buf, o, 70 * sh + 260 * P.lamp[o] + 40 * g, 80 * sh + 250 * P.lamp[o + 1] + 120 * g, 95 * sh + 240 * P.lamp[o + 2] + 210 * g);\n  });\n}\n\nfunction drawSub(P, buf) {\n  const S = P.sub;\n  const x0 = Math.round(S.x) - 7;\n  const y0 = Math.round(S.y) - 3;\n  sprite(SUB, x0, y0, (x, y, c, j, o) => {\n    const lit = \"kvl\".includes(c) ? 1 : 0.78 + 0.22 * Math.min(1, (P.rows[y * 4 + 2] / 255) * 1.3) + (j \u003c 2 ? 0.1 : 0) - (j > 4 ? 0.25 : 0);\n    const h = HULL[c] || (S.on > 0.1 ? [255, 250, 225] : [110, 110, 110]);\n    set(buf, o, h[0] * lit, h[1] * lit, h[2] * lit);\n  });\n  if (S.y > 7 && P.t % 2 \u003c 0.1) add(buf, x0 + 6, y0, 255, 255, 255);\n  if (S.on > 0.1)\n    for (let dy = -2; dy \u003c= 2; dy++)\n      for (let dx = -2; dx \u003c= 2; dx++) {\n        const g = dx || dy ? (S.on * 120) / (1 + dx * dx + dy * dy) : 0;\n        add(buf, x0 + 13 + dx, y0 + 4 + dy, g, g, g * 0.9);\n      }\n}\n","layer":{"id":"layer-abyss","type":"code","name":"abyss","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Abyss\n// Family:  ocean\n// Idea:    One column of open sea, the 128 rows its depth, from god rays and sardines under the waves through the twilight and the black to a vent on the floor, with marine snow falling and a submersible diving.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 16, after the ocean's zones of light\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Night=0..1, Speed=0.2..3, Current=-1..1, Bloom=0..1\n//\n// Knob 1: Night. Noon to midnight: the sky through the surface goes gold, then silver, and the lanternfish rise from the twilight to feed near the top, as they do every night.\n// Knob 2: Speed. How fast the sea runs: at 2 the submersible reaches the floor in 20 seconds and a dive is 50; waves, fish and snow keep pace.\n// Knob 3: Current. A current left or right under a wind that roughens the waves: the god rays break up and slide, the snow slants, the siphonophore streams out and the school faces upstream.\n// Knob 4: Bloom. From the clear blue of an ocean gyre to a spring plankton bloom: the water greens, the light dies shallower and the snow thickens.\n// Buttons: K1 tap drops a dead whale; it sinks the whole column, lighting up the plankton in the dark, and stays on the floor as a skeleton.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Depth squeezes going down: the sunlit zone (to 200 m) is rows 0 to 42, the twilight zone\n// (to 1000 m) rows 43 to 85, the midnight zone (to 4000 m) the rest down to the floor.\nconst FLOOR = 118;\nconst DARK = 90; // 1000 m: no sunlight below\n// The vent's chimney: its column, and the row of its mouth.\nconst VX = 45;\nconst VTOP = 101;\n// God rays are lines from a point RAY_D rows above the surface; RAY_U bins per unit slope.\nconst RAY_D = 46;\nconst RAY_U = 150;\n// How much of its colour the floor shows with no lamp on it, as a low-light camera sees it.\nconst AMB = 0.26;\n// One dive at Speed 2, in seconds: down, working at the vent, up, then 5 at the surface.\nconst DOWN = 20;\nconst WORK = 9;\nconst UP = 16;\nconst CYCLE = DOWN + WORK + UP + 5;\nconst LANT = 14;\nconst SNOW = 470;\nconst SPARK = 90;\nconst STEM = 54;\n\n// The submersible, bow right: w hull, r sail, v viewport, l lamp, t thruster, g belly, k skid.\nconst SUB = [\"......rr\", \"...wwwwwwww\", \".wwwwwwwwwwww\", \"twwwwwwwwwwwvv\", \".wwwwwwwwwwwwl\", \"..gggggggggg\", \"...k......k\"];\nconst HULL = { w: [225, 228, 232], r: [230, 70, 30], g: [130, 135, 142], t: [90, 92, 96], k: [55, 56, 60], v: [200, 140, 60] };\n// A female deep-sea anglerfish facing right: b body, t teeth, e eye, f fin.\nconst ANGLER = [\"....bbbbb\", \"..bbbbbbbbb\", \"fbbbbbbbbbbb\", \"fbbbbbbbbbet\", \"fbbbbbbbbb\", \"fbbbbbbbbbt\", \"fbbbbbbbbbbbt\", \"..bbbbbbbbbb\", \"....bbbbbb\"];\n// A sperm whale's carcass, flukes on the left, and the skeleton it leaves.\nconst WHALE = [\"..........xxxxxxxxx\", \"xx...xxxxxxxxxxxxxxx\", \".xxxxxxxxxxxxxxxxxxx\", \"xx...xxxxxxxxxxxxxx\", \"..........xx\"];\nconst BONES = [\"....o.o.o.o.o.o\", \"....o.o.o.o.o.o.oooo\", \"oooooooooooooooooooo\", \"....o.o.o.o.o.o..ooo\"];\n// The sky seen up through the surface at noon, at sunset and under the moon.\nconst SKY = [[200, 235, 245], [250, 150, 60], [52, 64, 84]];\nconst SPINDLE = [1.4, 2.3, 2.5, 1.7];\n// A sea pig in two steps.\nconst PIG = [\n  [\".o.o\", \"ooooo\", \"o.o.o\"],\n  [\".o.o\", \"ooooo\", \".ooo\"],\n];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction add(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] += r;\n  buf[o + 1] += g;\n  buf[o + 2] += b;\n}\n\nfunction set(buf, o, r, g, b) {\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nfunction sprite(art, x0, y0, fn) {\n  for (let j = 0; j \u003c art.length; j++)\n    for (let i = 0; i \u003c art[j].length; i++) {\n      const x = x0 + i;\n      const y = y0 + j;\n      if (art[j][i] !== \".\" && x >= 0 && x \u003c W && y >= 0 && y \u003c H) fn(x, y, art[j][i], j, (y * W + x) * 3);\n    }\n}\n\nfunction shade(P, o, r, g, b) {\n  const L = P.lamp;\n  set(P.buf, o, r * (AMB + 2.6 * L[o]), g * (AMB + 2.6 * L[o + 1]), b * (AMB + 2.6 * L[o + 2]));\n}\n\nconst F = (n) => new Float32Array(n);\nconst rnd = (n, a, b) => F(n).map(() => a + Math.random() * b);\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, drift: 0, night: 0, cur: 0, bloom: 0.06, started: false, knext: 0, kdebt: 0, pulse: 0 });\n  Object.assign(P, { whale: false, wx: 0, wy: 0, skel: -1, pig: 10, sub: { x: 0, y: 0, on: 0, a: 1 } });\n  Object.assign(P, { buf: F(N * 3), lamp: F(N * 3), rows: F(H * 4), sky: F(3), ray: F(256), floorCol: F(N * 3) });\n  P.floorOn = new Uint8Array(N);\n  P.floorY = new Int16Array(W);\n  // The panel opens mid-dive, the submersible halfway down.\n  P.subT = DOWN * 0.5;\n  // Schooling fish keep about a body length apart, so the sardines sit on a loose lattice.\n  const fx = [];\n  const fy = [];\n  for (let gy = -3; gy \u003c= 3; gy++)\n    for (let gx = -5; gx \u003c= 5; gx++) {\n      const x = (gx + (gy & 1) * 0.5) * 4.2 + (Math.random() - 0.5) * 1.2;\n      const y = gy * 2.3 + (Math.random() - 0.5) * 0.8;\n      if ((x / 16) ** 2 + (y / 7.2) ** 2 \u003c 1) fx.push(x), fy.push(y);\n    }\n  P.fx = Float32Array.from(fx);\n  P.fy = Float32Array.from(fy);\n  P.fph = P.fx.map(() => Math.random() * 6.283);\n  // Lanternfish: each one's depth by day, 400 to 800 m down, and by night near the top.\n  P.lx = rnd(LANT, 4, 56);\n  P.ly = F(LANT);\n  P.ldir = new Int8Array(LANT).map(() => (Math.random() \u003c 0.5 ? -1 : 1));\n  P.lv = rnd(LANT, 1.6, 2.2);\n  P.lday = rnd(LANT, 0, 2).map((v, i) => v + 50 + ((i * 5) % LANT) * 2.5);\n  P.lnight = rnd(LANT, 0, 2).map((v, i) => v + 7 + ((i * 3) % LANT) * 2.4);\n  P.lfl = F(LANT).fill(9);\n  P.sx = rnd(SNOW, 0, W);\n  P.sy = rnd(SNOW, 0, FLOOR);\n  P.sv = rnd(SNOW, 0.5, 1.1);\n  P.ss = rnd(SNOW, 0, 1).map((v) => (v \u003c 0.22 ? 1 : 0.55 + 0.3 * Math.random()));\n  // Flashes of bioluminescence: a copepod's spark lasts under a second, a shrimp's spat cloud two.\n  Object.assign(P, { kx: F(SPARK), ky: F(SPARK), kage: F(SPARK).fill(9), klife: F(SPARK).fill(1) });\n  bakeFloor(P);\n}\n\n// The floor's colours: silt with manganese nodules, the chimney, tube worms, and any skeleton.\nfunction bakeFloor(P) {\n  const lay = (x, y, r, g, b) => {\n    set(P.floorCol, (y * W + x) * 3, r, g, b);\n    P.floorOn[y * W + x] = 1;\n  };\n  P.floorCol.fill(0);\n  P.floorOn.fill(0);\n  for (let x = 0; x \u003c W; x++) {\n    const top = Math.round(FLOOR + 1.3 * Math.sin(x * 0.17 + 1) + 0.8 * Math.sin(x * 0.53) - (hash(x, 3) \u003c 0.15 ? 1 : 0));\n    P.floorY[x] = top;\n    for (let y = top; y \u003c H; y++) {\n      const g = 0.82 + 0.3 * hash(x, y) - 0.04 * (y - top);\n      lay(x, y, 112 * g, 104 * g, 90 * g);\n    }\n    if (hash(x, 9) \u003c 0.18) lay(x, top, 34, 28, 26);\n  }\n  // The chimney: sulphide rock streaked with rust and sulphur.\n  for (let y = VTOP; y \u003c FLOOR + 2; y++) {\n    const h = (y - VTOP) / (FLOOR - VTOP);\n    const hw = 1.2 + 3.6 * h * h + (hash(y, 4) - 0.5) * 1.2;\n    for (let x = Math.round(VX - hw); x \u003c= Math.round(VX + hw); x++) {\n      const s = hash(x, y * 7);\n      if (s \u003c 0.12) lay(x, y, 150, 86, 38);\n      else if (s \u003c 0.17) lay(x, y, 150, 140, 62);\n      else lay(x, y, 80 + 20 * s, 66 + 14 * s, 58);\n    }\n  }\n  [-8, -6, -5, 5, 6, 8, 9].forEach((d, i) => {\n    const x = VX + d;\n    const top = P.floorY[x] - 3 - Math.floor(hash(i, 5) * 4);\n    for (let y = top; y \u003c P.floorY[x]; y++) lay(x, y, 205, 205, 195);\n    lay(x, top - 1, 220, 30, 30);\n    lay(x + Math.sign(d), top - 1, 180, 20, 24);\n  });\n  if (P.skel >= 0) sprite(BONES, P.skel, 0, (x, y, c, j) => lay(x, P.floorY[x] - 3 + j, 226, 218, 192));\n}\n\n// The water's colour at each row: each channel dies with depth at its own rate, red within a\n// few rows, green next, blue last. A bloom's chlorophyll eats the blue, so its water is green.\nfunction bakeRows(P) {\n  const n = P.night;\n  const b = P.bloom;\n  const day = 1 - smooth(0.22, 0.88, n);\n  const sun = 0.1 + 0.9 * day * Math.sqrt(day);\n  const warm = Math.exp(-(((n - 0.48) / 0.16) ** 2));\n  const moon = smooth(0.6, 1, n);\n  const dusk = smooth(0.12, 0.48, n);\n  for (let c = 0; c \u003c 3; c++) {\n    const lit = SKY[0][c] + (SKY[1][c] - SKY[0][c]) * dusk;\n    P.sky[c] = lit + (SKY[2][c] - lit) * moon;\n  }\n  const tr = sun * (1 + 0.5 * warm - 0.3 * moon) * (60 - 20 * b);\n  const tg = sun * (1 - 0.08 * warm - 0.1 * moon) * (175 + 55 * b);\n  const tb = sun * (1 - 0.15 * warm + 0.1 * moon) * (245 - 125 * b);\n  for (let y = 0; y \u003c H; y++) {\n    const f = 1 - smooth(62, DARK, y);\n    set(P.rows, y * 4, tr * Math.exp(-y / 4.5) * f, tg * Math.exp(-y / (18 - 6 * b)) * f, tb * Math.exp(-y / (44 - 24 * b)) * f);\n    P.rows[y * 4 + 3] = 1.25 * Math.exp(-y / 24) * (1 - 0.55 * b) * (0.35 + 0.65 * day);\n  }\n  P.sun = sun;\n}\n\n// The waves focus sunlight into shafts: each bin is one line down from the point above, lit by\n// where it crosses the waves. Wind adds short fast waves that break the shafts up.\nfunction bakeRays(P) {\n  const t = P.t;\n  const rough = 0.8 * Math.abs(P.cur);\n  for (let j = 0; j \u003c 256; j++) {\n    const s = 34 + ((j - 128) / RAY_U) * RAY_D + P.drift;\n    const a =\n      Math.sin(0.41 * s + t + 0.9 * Math.sin(0.16 * s - 0.45 * t)) +\n      0.75 * Math.sin(0.73 * s - 1.6 * t + 1.3) +\n      0.5 * Math.sin(1.21 * s + 2.2 * t + 0.4) +\n      rough * (Math.sin(1.93 * s + 3.4 * t) + 0.7 * Math.sin(2.71 * s - 4.1 * t + 2));\n    P.ray[j] = clamp((a + 0.3 + 0.4 * rough) / (1.95 + 1.2 * rough), 0, 1) ** 3;\n  }\n}\n\nfunction spark(P, x, y, kind) {\n  const i = (P.knext = (P.knext + 1) % SPARK);\n  P.kx[i] = x;\n  P.ky[i] = y;\n  P.kage[i] = 0;\n  P.klife[i] = kind ? 1.4 + Math.random() * 0.6 : 0.25 + Math.random() * 0.4;\n}\n\n// The submersible's place in its dive, and its lamps' angle below the horizon.\nfunction placeSub(P) {\n  const S = P.sub;\n  const ph = P.subT % CYCLE;\n  const ease = (f) => f - (0.4 * Math.sin(6.2832 * f)) / 6.2832;\n  let y = 5 + 0.6 * Math.sin(P.t * 1.7);\n  let x = 14;\n  S.a = 1;\n  if (ph \u003c DOWN) {\n    const e = ease(ph / DOWN);\n    y = 5 + 90 * e;\n    x = 14 + 9 * e;\n  } else if (ph \u003c DOWN + WORK) {\n    const f = (ph - DOWN) / WORK;\n    y = 95 + 1.5 * Math.sin(f * 3.14);\n    x = 23 + 3 * Math.sin(f * 3.14);\n    // The pilot sweeps the lamps over the chimney and back.\n    S.a = 0.55 + 0.35 * Math.cos(f * 6.2832);\n  } else if (ph \u003c DOWN + WORK + UP) {\n    const e = ease((ph - DOWN - WORK) / UP);\n    y = 95 - 90 * e;\n    x = 23 - 9 * e;\n    S.a = 1.35;\n  }\n  S.x = x + P.cur * 10;\n  S.y = y;\n  S.on = ph \u003c DOWN + WORK + UP ? smooth(9, 16, y) : 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.night = clamp(k[0], 0, 1);\n  P.cur = clamp(k[2], -1, 1);\n  P.bloom = clamp(k[3], 0, 1);\n  const s = (dt * clamp(k[1], 0.2, 3)) / 2;\n  P.t += s;\n  P.drift += s * P.cur * 4;\n  P.subT += s;\n  placeSub(P);\n  const S = P.sub;\n\n  // Lanternfish swim to the depth of the hour at 7 rows a second; males flash a tail gland.\n  const up = smooth(0.35, 0.85, P.night);\n  for (let i = 0; i \u003c LANT; i++) {\n    const want = P.lday[i] + (P.lnight[i] - P.lday[i]) * up;\n    P.ly[i] = P.started ? P.ly[i] + clamp(want - P.ly[i], -7 * s, 7 * s) : want;\n    P.lx[i] = clamp(P.lx[i] + (P.ldir[i] * P.lv[i] + P.cur * 1.5) * s, 0, 63);\n    if ((P.lx[i] - 31.5) * P.ldir[i] > 28.5 || Math.random() \u003c 0.05 * s) P.ldir[i] *= -1;\n    P.lfl[i] += s;\n    if (P.lfl[i] > 9 && Math.random() \u003c 0.12 * s) P.lfl[i] = 0;\n  }\n  P.started = true;\n\n  const flakes = Math.round(110 + 360 * P.bloom);\n  for (let i = 0; i \u003c flakes; i++) {\n    P.sy[i] += P.sv[i] * s;\n    P.sx[i] = (P.sx[i] + (P.cur * 4 + 0.7 * Math.sin(P.t * 0.8 + i)) * s + W) % W;\n    if (P.sy[i] >= P.floorY[Math.floor(P.sx[i])]) {\n      P.sy[i] -= FLOOR;\n      P.sx[i] = Math.random() * W;\n    }\n  }\n\n  // Copepods spark in the dark, now and then a shrimp spits a cloud of light, and at night the\n  // surface sparkles too. The submersible trips more as it passes.\n  P.kdebt += s * (5 + 5 * up);\n  for (; P.kdebt > 1; P.kdebt--) {\n    const shallow = Math.random() \u003c 0.45 * up;\n    spark(P, Math.random() * W, shallow ? 3 + Math.random() * 40 : 52 + Math.random() * 64, !shallow && Math.random() \u003c 0.13 ? 1 : 0);\n  }\n  if (S.y > 55 && Math.random() \u003c 6 * s) spark(P, S.x - 7 + Math.random() * 14, S.y - 3 + Math.random() * 7, 0);\n  for (let i = 0; i \u003c SPARK; i++) P.kage[i] += s;\n\n  P.pulse = (P.pulse + s) % 4;\n\n  if (input.btnPressed && input.btnPressed[0]) Object.assign(P, { whale: true, wx: 4 + Math.floor(Math.random() * 18), wy: -4 });\n  if (P.whale) {\n    P.wy += 5 * s;\n    if (P.wy > 50 && Math.random() \u003c 30 * s) spark(P, P.wx + Math.random() * 20, P.wy - 3 + Math.random() * 7, 0);\n    if (P.wy >= FLOOR - 4) {\n      P.whale = false;\n      P.skel = P.wx;\n      bakeFloor(P);\n    }\n  }\n\n  P.pig = P.pig > 34 ? -6 : P.pig + 0.35 * s;\n}\n\n// The lamps' light, warm near and blue-green further out as the water takes the red first;\n// the beam lights the water itself faintly.\nfunction lightLamps(P) {\n  const L = P.lamp;\n  L.fill(0);\n  const S = P.sub;\n  if (S.on \u003c 0.01) return;\n  const ox = S.x + 6.5;\n  const oy = S.y + 1.5;\n  const ca = Math.cos(S.a);\n  const sa = Math.sin(S.a);\n  const haze = (105 + 60 * P.bloom) * S.on;\n  for (let y = Math.max(0, Math.floor(oy - 4)); y \u003c= Math.min(H - 1, oy + 46); y++) {\n    const dy = y + 0.5 - oy;\n    for (let x = Math.max(0, Math.floor(ox - 46)); x \u003c= Math.min(W - 1, ox + 46); x++) {\n      const dx = x + 0.5 - ox;\n      const r2 = dx * dx + dy * dy;\n      const r = Math.sqrt(r2) + 0.01;\n      const c = (dx * ca + dy * sa) / r;\n      if (c \u003c 0.88) continue;\n      const I = (smooth(0.88, 0.965, c) * S.on * Math.exp(-r / 38)) / (1 + r2 / 500);\n      const o = (y * W + x) * 3;\n      set(L, o, I * Math.exp(-r / 16), I * Math.exp(-r / 40), I * Math.exp(-r / 60));\n      add(P.buf, x, y, L[o] * haze, L[o + 1] * haze, L[o + 2] * haze);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const rows = P.rows;\n  const L = P.lamp;\n  const t = P.t;\n  bakeRows(P);\n  bakeRays(P);\n\n  const xs = 34 + 2 * Math.sin(t * 0.3);\n  for (let y = 0; y \u003c H; y++) {\n    const A = rows[y * 4 + 3];\n    const inv = RAY_U / (y + RAY_D);\n    for (let x = 0, o = y * W * 3; x \u003c W; x++, o += 3) {\n      const m = A > 0.02 ? 1 + A * (1.5 * P.ray[clamp(((x - xs) * inv + 128) | 0, 0, 255)] - 0.33) : 1;\n      set(buf, o, rows[y * 4] * m, rows[y * 4 + 1] * m, rows[y * 4 + 2] * m);\n    }\n  }\n  // The underside of the surface: the sky through Snell's window, and the waves.\n  for (let y = 0; y \u003c 4; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const w = 0.5 + 0.5 * Math.sin(x * 0.45 + P.drift * 0.45 + t * 1.3 + Math.sin(x * 0.19 - t * 0.6) * 1.4);\n      const v = (1 - y / 4) * (0.55 + 0.45 * w) + 0.8 * Math.exp(-(((x - xs) / 5) ** 2)) * (1 - y / 3.5);\n      add(buf, x, y, v * P.sky[0], v * P.sky[1], v * P.sky[2]);\n    }\n\n  lightLamps(P);\n\n  // The floor, and the vent's dull red glow, too faint for an eye but not for a camera.\n  const glow = 0.75 + 0.25 * Math.sin(t * 7) * Math.sin(t * 3.1);\n  for (let p = (VTOP - 1) * W; p \u003c N; p++) {\n    if (!P.floorOn[p]) continue;\n    const o = p * 3;\n    shade(P, o, P.floorCol[o], P.floorCol[o + 1], P.floorCol[o + 2]);\n    const d2 = ((p % W) - VX) ** 2 + (Math.floor(p / W) - VTOP) ** 2;\n    const v = d2 \u003c 30 ? 95 * glow * Math.exp(-d2 / 5) : 0;\n    set(buf, o, buf[o] + v, buf[o + 1] + v * 0.18, buf[o + 2] + v * 0.05);\n  }\n\n  // The black smoke hides the beam behind it, greys where the lamps catch it, reddens at its\n  // root, where 350-degree water comes out.\n  for (let y = VTOP - 30; y \u003c VTOP; y++) {\n    const h = VTOP - y;\n    const cx = VX + P.cur * 0.016 * h * h + 1.1 * Math.sin(h * 0.3 - t * 2.1);\n    const hw = 1 + h * 0.3;\n    const red = 90 * glow * Math.exp(-h / 2.5);\n    for (let x = Math.max(0, Math.ceil(cx - hw)); x \u003c= Math.min(W - 1, cx + hw); x++) {\n      const q = (x - cx) / hw;\n      const d = (1 - q * q) * (0.72 + 0.14 * Math.sin(x * 1.3 + y * 0.9 + t * 3) + 0.14 * Math.sin(x * 0.7 - y * 1.7 + t * 4.1)) * (1 - h / 30);\n      const o = (y * W + x) * 3;\n      const k = 1 - 0.8 * d;\n      set(buf, o, buf[o] * k + d * (62 * (0.08 + 2.2 * L[o]) + red), buf[o + 1] * k + d * (56 * (0.08 + 2.2 * L[o + 1]) + red * 0.15), buf[o + 2] * k + d * 52 * (0.08 + 2.2 * L[o + 2]));\n    }\n  }\n\n  // A sea pig, the pink deep-sea cucumber, walks the silt on its tube feet.\n  const px = Math.round(P.pig);\n  sprite(PIG[Math.floor(t * 2) % 2], px, P.floorY[clamp(px + 2, 0, W - 1)] - 3, (x, y, c, j, o) => shade(P, o, 225, 165, 175));\n\n  drawSiphonophore(P, buf);\n  drawLanternfish(P, buf);\n  drawAngler(P, buf);\n  drawSchool(P, buf);\n\n  const flakes = Math.round(110 + 360 * P.bloom);\n  for (let i = 0; i \u003c flakes; i++) {\n    const y = Math.floor(P.sy[i]);\n    if (y \u003c 4) continue;\n    const o = (y * W + Math.floor(P.sx[i])) * 3;\n    const lit = P.ss[i] * (34 + 0.2 * rows[y * 4 + 2]);\n    const k = 330 * P.ss[i];\n    set(buf, o, buf[o] + lit * 0.95 + k * L[o], buf[o + 1] + lit + k * L[o + 1], buf[o + 2] + lit * 0.95 + k * L[o + 2]);\n  }\n\n  for (let i = 0; i \u003c SPARK; i++) {\n    const a = P.kage[i] / P.klife[i];\n    if (a >= 1) continue;\n    const cloud = P.klife[i] > 1;\n    const R = cloud ? 1 + 4 * Math.sqrt(a) : 1.6;\n    const v = cloud ? 150 * (1 - a) : (a \u003c 0.15 ? a / 0.15 : (1 - a) / 0.85) * 230;\n    for (let dy = -5; dy \u003c= 5; dy++)\n      for (let dx = -5; dx \u003c= 5; dx++) {\n        const q = 1 - (dx * dx + dy * dy) / (R * R);\n        if (q > 0) add(buf, Math.round(P.kx[i]) + dx, Math.round(P.ky[i]) + dy, v * 0.25 * q, v * 0.68 * q, v * q);\n      }\n  }\n\n  drawWhale(P, buf);\n  drawSub(P, buf);\n\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[p * 3]), Math.min(255, buf[p * 3 + 1]), Math.min(255, buf[p * 3 + 2]));\n}\n\n// The siphonophore: one glassy stem, polyps every four LEDs trailing fishing tentacles.\nfunction drawSiphonophore(P, buf) {\n  const t = P.t;\n  const cur = P.cur;\n  const tx = 52 + 4 * Math.sin(t * 0.05);\n  const ty = 46 + 1.5 * Math.sin(t * 0.13);\n  const pp = P.pulse * 16;\n  for (let i = 0; i \u003c STEM; i++) {\n    const s = i / STEM;\n    const x = tx + cur * 15 * s * Math.sqrt(s) + 3 * s * Math.sin(i * 0.15 - t * 0.8);\n    const iy = Math.round(ty + 8.5 + i * (0.95 - 0.3 * Math.abs(cur) * s));\n    const v = 0.24 + 0.85 * Math.exp(-(((i - pp) / 2.5) ** 2));\n    const ix = Math.round(x);\n    add(buf, ix, iy, 70 * v, 120 * v, 230 * v);\n    for (const e of [-1, 1]) add(buf, ix + e, iy, 21 * v, 36 * v, 70 * v);\n    if (i % 4 === 2) {\n      add(buf, ix, iy, 120 * v, 150 * v, 200 * v);\n      for (let j = 1; j \u003c= 4; j++)\n        add(buf, Math.round(x + (cur >= 0 ? j : -j) * (0.3 + Math.abs(cur) * 0.7) + 0.5 * Math.sin(t + i)), iy + j, 26 * v, 40 * v, 80 * v);\n    }\n  }\n  // On top a gas float, then four pairs of swimming bells, each pair beating after the last.\n  const lit = 1 + 1.5 * Math.exp(-pp / 3);\n  const cx = Math.round(tx);\n  add(buf, cx, Math.round(ty) - 1, 95, 45, 34);\n  for (let k = 0; k \u003c 4; k++) {\n    const sq = Math.max(0, Math.sin(t * 4.2 - k * 0.9)) ** 4;\n    for (let r = 0; r \u003c 2; r++) {\n      const n = Math.round(SPINDLE[k] * (1 - 0.3 * sq) - r * 0.5);\n      for (let d = -n; d \u003c= n; d++) {\n        const v = (Math.abs(d) === n ? 0.4 : 0.12) * lit;\n        add(buf, cx + d, Math.round(ty + 0.5 + k * 2) + r, 90 * v, 150 * v, 255 * v);\n      }\n    }\n  }\n}\n\n// Lanternfish show little but their photophores, belly lights that match the faint light from\n// above and hide the fish's shadow.\nfunction drawLanternfish(P, buf) {\n  const D = [0, 0, -1, 1, -3, 1, -5, 1];\n  for (let i = 0; i \u003c LANT; i++) {\n    const x = Math.round(P.lx[i]);\n    const y = Math.round(P.ly[i] + 0.6 * Math.sin(P.t * 1.3 + i));\n    const d = P.ldir[i];\n    for (let j = 0; j \u003c 11; j++) add(buf, x - d * (j >> 1), y + (j & 1), 10, 16, 24);\n    const v = 0.75 + 0.25 * Math.sin(P.t * 2 + i * 1.7);\n    for (let j = 0; j \u003c D.length; j += 2) add(buf, x + d * D[j], y + D[j + 1], 50 * v, 150 * v, 240 * v);\n    if (P.lfl[i] \u003c 0.25) add(buf, x - d * 6, y, 200, 230, 255);\n  }\n}\n\n// The anglerfish is black and shows only where its lure lights it: the jaw and needle teeth.\nfunction drawAngler(P, buf) {\n  const t = P.t;\n  const ax = Math.round(5 + 3 * Math.sin(t * 0.07));\n  const ay = Math.round(103 + 2 * Math.sin(t * 0.11));\n  const lx = ax + 15 + 0.6 * Math.sin(t * 1.9);\n  const ly = ay + 1 + 0.8 * Math.sin(t * 2.6);\n  const pulse = 0.6 + 0.4 * Math.max(0, Math.sin(t * 1.3)) + (Math.sin(t * 9) > 0.97 ? 0.3 : 0);\n  sprite(ANGLER, ax, ay, (x, y, c) => {\n    const g = pulse / (1 + ((x - lx) ** 2 + (y - ly) ** 2) / 14);\n    const k = c === \"t\" ? [250, 255, 245] : c === \"e\" ? [90, 170, 160] : [120, 96, 92];\n    add(buf, x, y, k[0] * g, k[1] * g, k[2] * g);\n  });\n  for (let s = 0.1; s \u003c 0.95; s += 0.12) {\n    const u = 1 - s;\n    const x = u * u * (ax + 8) + 2 * u * s * (ax + 15) + s * s * lx;\n    const y = u * u * ay + 2 * u * s * (ay - 7) + s * s * (ly - 1);\n    add(buf, Math.round(x), Math.round(y), 24 * pulse, 60 * pulse, 54 * pulse);\n  }\n  for (let dy = -3; dy \u003c= 3; dy++)\n    for (let dx = -3; dx \u003c= 3; dx++) {\n      const q = dx * dx + dy * dy;\n      const g = q ? (pulse * 0.5) / (1 + q) : pulse * 1.3;\n      add(buf, Math.round(lx) + dx, Math.round(ly) + dy, 70 * g, 235 * g, 205 * g);\n    }\n}\n\n// The sardines wheel as one. Broadside a fish is a silver dash, darker to the tail; turning,\n// it is seen end on and its flank throws the sun back, so a flash runs through the school.\nfunction drawSchool(P, buf) {\n  const t = P.t;\n  const cur = P.cur;\n  // Into a current the school holds station, facing upstream.\n  const hold = Math.min(1, Math.abs(cur) * 1.4);\n  const amp = 16 * (1 - 0.6 * hold);\n  const cx = 32 - 12 * cur * hold + amp * Math.sin(t * 0.23);\n  const cy = 22 + 6 * Math.sin(t * 0.29 + 1);\n  const sun = P.sun;\n  for (let i = 0; i \u003c P.fx.length; i++) {\n    const ox = P.fx[i];\n    const oy = P.fy[i];\n    // The leading side turns first; the turn reaches the far side 0.8 s later.\n    const lag = (ox / 16) * 0.4 * Math.sign(Math.cos(t * 0.23)) + 0.4;\n    const hx = Math.tanh(amp * 0.32 * Math.cos((t - lag) * 0.23)) * (1 - hold) - Math.sign(cur) * hold;\n    const x = Math.round(cx + ox + 1.8 * Math.sin(oy * 0.45 + t * 0.7) + 0.5 * Math.sin(t * 1.7 + P.fph[i]));\n    const y = Math.round(cy + oy + 1.1 * Math.sin(ox * 0.22 + t * 0.9));\n    if (y \u003c 4 || y > 44) continue;\n    const dir = hx >= 0 ? 1 : -1;\n    const len = Math.abs(hx) > 0.6 ? 3 : Math.abs(hx) > 0.25 ? 2 : 1;\n    const g = Math.min(1, (1 - Math.abs(hx)) ** 3 * 1.3 + Math.max(0, Math.sin(t * 2.3 + P.fph[i] * 7)) ** 40);\n    const light = sun * (0.35 + 0.65 * Math.min(1, P.rows[y * 4 + 2] / 170));\n    for (let j = 0; j \u003c len; j++) {\n      const xx = x - dir * j;\n      if (xx \u003c 0 || xx >= W) continue;\n      const o = (y * W + xx) * 3;\n      const body = (j === 2 ? 0.45 : j === 1 ? 0.8 : 1) * light;\n      const f = 1 - g;\n      set(buf, o, (buf[o] * 0.25 + 120 * body) * f + 235 * g * sun, (buf[o + 1] * 0.25 + 160 * body) * f + 242 * g * sun, (buf[o + 2] * 0.25 + 190 * body) * f + 250 * g * sun);\n    }\n  }\n}\n\n// The carcass is lit as the water round it is; in the dark the plankton it hits lights its edges.\nfunction drawWhale(P, buf) {\n  if (!P.whale) return;\n  const tick = Math.floor(P.t * 12);\n  sprite(WHALE, P.wx, Math.round(P.wy), (x, y, c, j, o) => {\n    const day = P.rows[clamp(y - 3, 0, H - 1) * 4 + 2] / 255;\n    const sh = (j ? 0.8 : 1.4) * day;\n    const i = x - P.wx;\n    const edge = !j || j === 4 || [WHALE[j - 1][i], WHALE[j + 1][i], WHALE[j][i - 1], WHALE[j][i + 1]].some((n) => n !== \"x\");\n    const g = edge ? clamp(1 - day * 4, 0, 1) * (hash(x * 31 + tick, y) \u003c 0.35 ? 1 : 0.22) : 0;\n    set(buf, o, 70 * sh + 260 * P.lamp[o] + 40 * g, 80 * sh + 250 * P.lamp[o + 1] + 120 * g, 95 * sh + 240 * P.lamp[o + 2] + 210 * g);\n  });\n}\n\nfunction drawSub(P, buf) {\n  const S = P.sub;\n  const x0 = Math.round(S.x) - 7;\n  const y0 = Math.round(S.y) - 3;\n  sprite(SUB, x0, y0, (x, y, c, j, o) => {\n    const lit = \"kvl\".includes(c) ? 1 : 0.78 + 0.22 * Math.min(1, (P.rows[y * 4 + 2] / 255) * 1.3) + (j \u003c 2 ? 0.1 : 0) - (j > 4 ? 0.25 : 0);\n    const h = HULL[c] || (S.on > 0.1 ? [255, 250, 225] : [110, 110, 110]);\n    set(buf, o, h[0] * lit, h[1] * lit, h[2] * lit);\n  });\n  if (S.y > 7 && P.t % 2 \u003c 0.1) add(buf, x0 + 6, y0, 255, 255, 255);\n  if (S.on > 0.1)\n    for (let dy = -2; dy \u003c= 2; dy++)\n      for (let dx = -2; dx \u003c= 2; dx++) {\n        const g = dx || dy ? (S.on * 120) / (1 + dx * dx + dy * dy) : 0;\n        add(buf, x0 + 13 + dx, y0 + 4 + dy, g, g, g * 0.9);\n      }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Night=0..1, Speed=0.2..3, Current=-1..1, Bloom=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Night","min":0,"max":1,"about":"Noon to midnight: the sky through the surface goes gold, then silver, and the lanternfish rise from the twilight to feed near the top, as they do every night."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sea runs: at 2 the submersible reaches the floor in 20 seconds and a dive is 50; waves, fish and snow keep pace."},{"name":"Current","min":-1,"max":1,"about":"A current left or right under a wind that roughens the waves: the god rays break up and slide, the snow slants, the siphonophore streams out and the school faces upstream."},{"name":"Bloom","min":0,"max":1,"about":"From the clear blue of an ocean gyre to a spring plankton bloom: the water greens, the light dies shallower and the snow thickens."}],"start":[0,2,0,0.06],"measures":{"motion":0.1244,"detail":0.039,"edges":0.3461,"complexity":1.1983,"coverage":0.6808,"colour":0.2784,"drift":0.0583},"knobResponse":[0.1135,0.059,0.0565,0.0734]},{"slug":"agate","title":"Agate","family":"mineral","round":20,"note":"라이트박스에 올린 블루 레이스 마노 단면이 패널을 거의 다 채우고, 1 LED 남짓한 하늘색 띠와 젖빛 띠가 갈색 껍질을 따라 겹겹이 들어가 석영 결정이 반짝이는 빈 속에 닿아요. 톱이 천천히 더 깊이 썰어 들어가며 띠가 흐르고, K1 을 누르면 날이 라이트박스를 가로지르며 새 마노 덩어리의 단면이 깔려요.","idea":"A slice of banded agate lies on a lightbox, so close it fills the panel, its fine fortification bands of pale blue, milky white and smoky lavender following the nodule's rough brown rind in to a hollow of glinting quartz, while a slow saw cuts deeper and the bands flow, open and close.","buttons":"K1 tap cuts into a fresh nodule: the blade crosses the lightbox from the left and the new slice follows it.","code":"// ===== Patternflow pattern =====\n// Title:   Agate\n// Family:  mineral\n// Idea:    A slice of banded agate lies on a lightbox, so close it fills the panel, its fine fortification bands of pale blue, milky white and smoky lavender following the nodule's rough brown rind in to a hollow of glinting quartz, while a slow saw cuts deeper and the bands flow, open and close.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after polished slices of blue lace agate held up to a lightbox\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Stain=0..1, Speed=0.2..3, Width=1..4, Light=-1..1\n//\n// Knob 1: Stain. The colour of the stone: blue lace agate at 0, then grey, honey and at 1 a pale carnelian, all of them pale the way agate is with light coming through it.\n// Knob 2: Speed. How fast the saw cuts down through the nodule and the lamp wanders under the glass: at 2 the bands creep about half a LED a second and a small eye in them opens and closes over ten seconds.\n// Knob 3: Width. How thick each band was laid down, from fine bands of about one LED at the start to 4 LED bands.\n// Knob 4: Light. Which side of the lightbox the lamp sits under, left at -1, behind the middle at 0, right at 1; it wanders a little either side of there on its own.\n// Buttons: K1 tap cuts into a fresh nodule: the blade crosses the lightbox from the left and the new slice follows it.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The band field is worked out on a grid with a margin round the panel, so\n// the rind can run off the panel's edge without the bands bending to meet it.\nconst M = 10;\nconst GW = W + 2 * M;\nconst GH = H + 2 * M;\nconst GN = GW * GH;\nconst NA = 256;\nconst NB = 120;\nconst TAU = Math.PI * 2;\n// The nodule's outline before its wall wanders: a rounded oblong.\nconst EA = 37;\nconst EB = 72;\nconst SUP = 2.2;\nconst NW = 5;\nconst RIND = 2.2;\nconst CORE = 6;\nconst FILL = 0.9;\nconst HOLE = 3.6;\nconst { sin, cos, sqrt, exp, min, max, floor, abs } = Math;\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nfunction hash(n) {\n  n = (n ^ 61) ^ (n >>> 16);\n  n = Math.imul(n, 9);\n  n ^= n >>> 4;\n  n = Math.imul(n, 0x27d4eb2d);\n  n ^= n >>> 15;\n  return (n >>> 0) / 4294967296;\n}\n\n// Each stain: clear band, milky band, the smoky tint some packets of clear\n// bands take, rind, quartz, and the bare lightbox round the slice.\nconst STAIN = [\n  [[174, 205, 250], [228, 220, 210], [186, 170, 218], [150, 102, 64], [226, 230, 240], [222, 228, 238]],\n  [[198, 204, 214], [226, 220, 210], [176, 170, 184], [136, 106, 80], [232, 232, 234], [230, 230, 230]],\n  [[244, 204, 136], [238, 226, 204], [210, 158, 108], [144, 92, 50], [240, 234, 220], [238, 232, 216]],\n  [[248, 160, 116], [238, 216, 202], [218, 120, 98], [132, 74, 44], [242, 230, 224], [240, 230, 222]],\n];\n\nfunction nodule(P) {\n  P.cx = W / 2 + (Math.random() - 0.5) * 4;\n  P.cy = H / 2 + (Math.random() - 0.5) * 10;\n  // The wall wanders round the oblong, and wanders differently deeper in.\n  P.harm = [];\n  for (let m = 2; m \u003c= 7; m++)\n    P.harm.push([m, (0.17 / m ** 0.8) * (0.5 + Math.random()), Math.random() * TAU, (Math.random() - 0.5) * 0.09]);\n  // Lobes where the gas bubble the agate filled was pinched or swollen.\n  P.lobes = [];\n  for (let j = 0; j \u003c 3; j++)\n    P.lobes.push([Math.random() * TAU, (Math.random() \u003c 0.5 ? -1 : 1) * (3 + Math.random() * 4), 0.18 + Math.random() * 0.15, (Math.random() - 0.5) * 0.06]);\n  P.rough = [];\n  for (const m of [11, 17, 23, 31]) P.rough.push([m, 0.25 + Math.random() * 0.35, Math.random() * TAU]);\n  // Slow ripples in the layers themselves, as a field through the stone, a\n  // finer crinkle that makes the lace, and a broad wash of tint.\n  P.waves = [];\n  for (let j = 0; j \u003c NW; j++) {\n    const a = Math.random() * TAU;\n    const k = j \u003c 3 ? 0.11 + Math.random() * 0.1 : j === 3 ? 0.42 : 0.06;\n    P.waves.push([cos(a) * k, sin(a) * k * (j === 3 ? 1 : 0.55), 0.12 + Math.random() * 0.12, Math.random() * TAU]);\n    for (let x = 0; x \u003c W; x++) {\n      P.wsx[j * W + x] = sin(P.waves[j][0] * (x + 0.5));\n      P.wcx[j * W + x] = cos(P.waves[j][0] * (x + 0.5));\n    }\n  }\n  // Band widths, in units of Width, all near one. The bands come in packets\n  // of a dozen or so, each laid down from a slightly different solution:\n  // mostly pale blue, sometimes near white or smoky lavender. A packet starts\n  // with a band laid down twice as thick.\n  let u = 0;\n  let thick = 0;\n  let tint = 0;\n  for (let k = 0; k \u003c= NB; k++) {\n    P.U[k] = u;\n    P.bh[k] = Math.random();\n    if (k === thick) {\n      const r = Math.random();\n      tint = r \u003c 0.65 ? 0.1 * Math.random() : r \u003c 0.85 ? 0.45 + 0.1 * Math.random() : 0.85 + 0.15 * Math.random();\n      if (k) u += 1.1;\n      thick += 9 + floor(Math.random() * 7);\n    }\n    P.bz[k] = tint;\n    u += 0.88 + Math.random() * 0.24;\n  }\n  P.seed = (Math.random() * 1e6) | 0;\n  P.fresh = true;\n  for (let p = 0; p \u003c N; p++) {\n    P.rr[p] = Math.random() * 1.3;\n    P.rt[p] = Math.random();\n  }\n  for (let Y = 0; Y \u003c GH; Y++)\n    for (let X = 0; X \u003c GW; X++) {\n      const i = Y * GW + X;\n      const dx = X - M + 0.5 - P.cx;\n      const dy = Y - M + 0.5 - P.cy;\n      let a = (Math.atan2(dy, dx) / TAU) * NA;\n      if (a \u003c 0) a += NA;\n      P.ang[i] = a;\n      P.rad[i] = sqrt(dx * dx + dy * dy) + 1e-6;\n    }\n  // How far the wall may reach along each ray before it leaves the grid.\n  for (let a = 0; a \u003c= NA; a++) {\n    const th = (a / NA) * TAU;\n    const c = cos(th);\n    const s = sin(th);\n    const rx = (c > 0 ? W + M - P.cx : P.cx + M) / (abs(c) + 1e-6);\n    const ry = (s > 0 ? H + M - P.cy : P.cy + M) / (abs(s) + 1e-6);\n    P.rmax[a] = min(rx, ry) - 3;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.U = new Float32Array(NB + 1);\n  P.bh = new Float32Array(NB + 1);\n  P.bz = new Float32Array(NB + 1);\n  for (const k of [\"ang\", \"rad\", \"Rp\", \"sx\", \"sy\", \"bd\", \"d\"]) P[k] = new Float32Array(GN);\n  P.inn = new Uint8Array(GN);\n  P.rmax = new Float32Array(NA + 1);\n  P.R = new Float32Array(NA + 1);\n  P.R0 = new Float32Array(NA + 1);\n  P.scale = 1;\n  // The stone's own grain: a fixed jitter per LED.\n  for (const k of [\"g1\", \"g2\", \"g3\", \"fh\", \"rr\", \"rt\", \"off\"]) P[k] = new Float32Array(N);\n  P.wsx = new Float32Array(NW * W);\n  P.wcx = new Float32Array(NW * W);\n  P.wsy = new Float32Array(NW * H);\n  P.wcy = new Float32Array(NW * H);\n  P.lx = new Float32Array(W);\n  P.ly = new Float32Array(H);\n  P.out = new Uint8ClampedArray(N * 3);\n  P.old = new Uint8ClampedArray(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    P.g1[p] = Math.random() * 2 - 1;\n    P.g2[p] = Math.random() * 2 - 1;\n    P.g3[p] = Math.random() * 2 - 1;\n    P.fh[p] = Math.random();\n  }\n  P.t = 0;\n  P.z = 0;\n  P.wipe = -1;\n  P.stain = 0;\n  P.width = 1;\n  P.side = 0.06;\n  nodule(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.stain = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3) / 2;\n  P.width = clamp(k[2], 1, 4);\n  P.side = clamp(k[3], -1, 1);\n  P.t += dt * speed;\n  P.z += dt * speed * 1.6;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.old.set(P.out);\n    P.wipe = 0;\n    nodule(P);\n  }\n  if (P.wipe >= 0) {\n    P.wipe += dt * 48;\n    if (P.wipe > W + 2) P.wipe = -1;\n  }\n}\n\n// Where the slice's wall lies this deep into the nodule, and how far every\n// point inside is from it: the layers were laid down on the wall, so each band\n// is the wall drawn again a little further in.\nfunction field(P) {\n  const z = P.z;\n  for (let a = 0; a \u003c= NA; a++) {\n    const th = (a / NA) * TAU;\n    let r = 1 / ((abs(cos(th)) / EA) ** SUP + (abs(sin(th)) / EB) ** SUP) ** (1 / SUP);\n    let f = 1;\n    for (const [m, amp, ph, om] of P.harm) f += amp * sin(m * th + ph + om * z);\n    r *= f;\n    for (const [c0, amp, wd, om] of P.lobes) {\n      let e = th - c0 - om * z;\n      e -= TAU * Math.round(e / TAU);\n      r += amp * exp(-(e * e) / (wd * wd));\n    }\n    for (const [m, amp, ph] of P.rough) r += amp * sin(m * th + ph);\n    P.R0[a] = r;\n  }\n  const { inn, sx, sy, bd, Rp, rad, ang, R } = P;\n  // The stone is held so close that it covers about the same share of the\n  // lightbox whatever its shape: the outline swells or shrinks to suit.\n  for (let it = P.fresh ? 8 : 1; it > 0; it--) {\n    for (let a = 0; a \u003c= NA; a++) R[a] = min(P.R0[a] * P.scale, P.rmax[a]);\n    let cov = 0;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = (y + M) * GW + x + M;\n        const af = ang[i];\n        const a0 = af | 0;\n        if (rad[i] \u003c R[a0] + (R[a0 + 1] - R[a0]) * (af - a0)) cov++;\n      }\n    P.scale = clamp(P.scale * (1 + 0.8 * (FILL - cov / N)), 0.8, 1.4);\n  }\n  for (let i = 0; i \u003c GN; i++) {\n    const af = ang[i];\n    const a0 = af | 0;\n    const r = R[a0] + (R[a0 + 1] - R[a0]) * (af - a0);\n    Rp[i] = r;\n    inn[i] = rad[i] \u003c r ? 1 : 0;\n    bd[i] = 1e9;\n  }\n  // Seeds: the wall's own point on the ray through each edge cell.\n  for (let Y = 1; Y \u003c GH - 1; Y++)\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i] || (inn[i - 1] && inn[i + 1] && inn[i - GW] && inn[i + GW])) continue;\n      const q = Rp[i] / rad[i];\n      const px = X - M + 0.5;\n      const py = Y - M + 0.5;\n      sx[i] = P.cx + (px - P.cx) * q;\n      sy[i] = P.cy + (py - P.cy) * q;\n      bd[i] = (sx[i] - px) ** 2 + (sy[i] - py) ** 2;\n    }\n  // Two sweeps carry the nearest wall point inward.\n  const take = (i, j, px, py) => {\n    if (bd[j] > 1e8) return;\n    const ax = sx[j] - px;\n    const ay = sy[j] - py;\n    const e = ax * ax + ay * ay;\n    if (e \u003c bd[i]) {\n      bd[i] = e;\n      sx[i] = sx[j];\n      sy[i] = sy[j];\n    }\n  };\n  for (let Y = 1; Y \u003c GH - 1; Y++) {\n    const py = Y - M + 0.5;\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      const px = X - M + 0.5;\n      take(i, i - 1, px, py);\n      take(i, i - GW - 1, px, py);\n      take(i, i - GW, px, py);\n      take(i, i - GW + 1, px, py);\n    }\n    for (let X = GW - 2; X > 0; X--) {\n      const i = Y * GW + X;\n      if (inn[i]) take(i, i + 1, X - M + 0.5, py);\n    }\n  }\n  let dmax = 0;\n  for (let Y = GH - 2; Y > 0; Y--) {\n    const py = Y - M + 0.5;\n    for (let X = GW - 2; X > 0; X--) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      const px = X - M + 0.5;\n      take(i, i + 1, px, py);\n      take(i, i + GW + 1, px, py);\n      take(i, i + GW, px, py);\n      take(i, i + GW - 1, px, py);\n    }\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      take(i, i - 1, X - M + 0.5, py);\n      const d = sqrt(bd[i]);\n      P.d[i] = d;\n      if (d > dmax) dmax = d;\n    }\n  }\n  P.dmax = dmax;\n}\n\nfunction stain(P) {\n  const s = P.stain * 3;\n  const i = min(2, floor(s));\n  const f = s - i;\n  return STAIN[i].map((c, j) => c.map((v, ch) => v + (STAIN[i + 1][j][ch] - v) * f));\n}\n\nexport function draw(display, params) {\n  const P = params;\n  // The wall moves far slower than the ripples in the layers, so its\n  // distances are worked out again only each time the saw has gone a little\n  // deeper.\n  if (P.fresh || abs(P.z - P.fz) > 0.3) {\n    field(P);\n    P.fz = P.z;\n    P.fresh = false;\n  }\n  const [CT, CM, CS, CR, CQ, CL] = stain(P);\n  const CW = CT.map((v, c) => v + (CM[c] - v) * 0.5);\n  const tmax = max(CT[0], CT[1], CT[2]);\n  const { t, z, out, old, waves, seed, wsx, wcx, wsy, wcy, U, bh, bz, inn, lx, ly, d: D, rr, rt, fh, g1, g2, g3, off } = P;\n  // The lamp under the glass: broad, and wandering slowly sideways.\n  const lampX = W / 2 + 30 * P.side + 14 * sin(t * 0.55);\n  const lampY = H / 2 + 34 * sin(t * 0.31 + 1);\n  for (let x = 0; x \u003c W; x++) lx[x] = 0.24 * exp(-((x + 0.5 - lampX) ** 2) / 1800);\n  for (let y = 0; y \u003c H; y++) ly[y] = exp(-((y + 0.5 - lampY) ** 2) / 7200);\n  const wd = P.width;\n  const dCore = P.dmax - CORE;\n  for (let j = 0; j \u003c NW; j++)\n    for (let y = 0; y \u003c H; y++) {\n      const a = waves[j][1] * (y + 0.5) + waves[j][2] * z + waves[j][3];\n      wsy[j * H + y] = sin(a);\n      wcy[j * H + y] = cos(a);\n    }\n  // Eyes: small knots in the layers that the saw passes through, each a\n  // little bullseye that opens, holds and closes again over ten seconds or so.\n  off.fill(0);\n  for (let j = floor((z - 24) / 14); j \u003c= floor((z + 24) / 14); j++) {\n    const ex = 6 + 52 * hash(seed + j * 131 + 1);\n    const ey = 10 + 108 * hash(seed + j * 131 + 2);\n    const gi = (floor(ey) + M) * GW + floor(ex) + M;\n    if (!inn[gi]) continue;\n    const dc = D[gi];\n    const f = clamp((dCore - 5 - dc) / 5, 0, 1) * clamp((dc - 6) / 4, 0, 1);\n    const A = 7 * f * exp(-(((z - j * 14 - 7 * hash(seed + j * 131 + 3)) / 7) ** 2));\n    const sg = 2.8 + 2.2 * hash(seed + j * 131 + 4);\n    if (A \u003c 0.05) continue;\n    for (let y = max(0, floor(ey - 3 * sg)); y \u003c min(H, ey + 3 * sg); y++)\n      for (let x = max(0, floor(ex - 3 * sg)); x \u003c min(W, ex + 3 * sg); x++)\n        off[y * W + x] += A * exp(-((x + 0.5 - ex) ** 2 + (y + 0.5 - ey) ** 2) / (sg * sg));\n  }\n  const wipe = P.wipe;\n  for (let y = 0; y \u003c H; y++) {\n    const py = y + 0.5;\n    const c0 = wcy[y], s0 = wsy[y], c1 = wcy[H + y], s1 = wsy[H + y], c2 = wcy[2 * H + y], s2 = wsy[2 * H + y];\n    const c3 = wcy[3 * H + y], s3 = wsy[3 * H + y], c4 = wcy[4 * H + y], s4 = wsy[4 * H + y];\n    const lyy = ly[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y + M) * GW + x + M;\n      const p = y * W + x;\n      const q = p * 3;\n      if (wipe >= 0 && x > wipe - 1) {\n        // The blade crossing the lightbox, the old slice still beyond it.\n        if (x > wipe) display.setPixel(x, y, old[q], old[q + 1], old[q + 2]);\n        else display.setPixel(x, y, 30, 28, 34);\n        continue;\n      }\n      const L = 0.76 + lx[x] * lyy;\n      let cr;\n      let cg;\n      let cb;\n      let tau;\n      if (!inn[i]) {\n        cr = CL[0];\n        cg = CL[1];\n        cb = CL[2];\n        tau = 0.92;\n      } else if (D[i] \u003c RIND + rr[p]) {\n        // The rind: rough, nearly opaque, with chalky flecks.\n        cr = CR[0];\n        cg = CR[1];\n        cb = CR[2];\n        tau = rt[p] \u003c 0.3 ? 0.62 : 0.26 + 0.16 * rt[p];\n      } else {\n        const dd =\n          D[i] +\n          off[p] +\n          0.8 * (wsx[x] * c0 + wcx[x] * s0 + wsx[W + x] * c1 + wcx[W + x] * s1 + wsx[2 * W + x] * c2 + wcx[2 * W + x] * s2) +\n          0.4 * (wsx[3 * W + x] * c3 + wcx[3 * W + x] * s3);\n        if (dd > dCore + HOLE) {\n          // Where the crystals did not meet, the slice is open and the\n          // lightbox shines straight through.\n          cr = CL[0];\n          cg = CL[1];\n          cb = CL[2];\n          tau = 1;\n        } else if (dd > dCore) {\n          // Quartz druzy: each tiny crystal throws the lamp back when its\n          // face turns toward it, and the saw keeps cutting new ones.\n          const fa = hash(p * 31 + floor(z * 0.4 + fh[p]) * 977 + seed);\n          cr = CQ[0];\n          cg = CQ[1];\n          cb = CQ[2];\n          if (dd \u003c dCore + 0.9) tau = 0.9;\n          else if (fa \u003c 0.33) tau = 0.16 + 0.3 * fa;\n          else {\n            const ax = lampX - x - 0.5;\n            const ay = lampY - py;\n            const c = (cos(fa * 40) * ax + sin(fa * 40) * ay) / (sqrt(ax * ax + ay * ay) + 1);\n            tau = 0.5 + 0.4 * fa + (c > 0 ? 0.7 * c ** 8 : 0);\n          }\n        } else {\n          const u = (dd - RIND) / wd;\n          let k = min(NB - 1, max(0, floor(u)));\n          while (k > 0 && U[k] > u) k--;\n          while (k \u003c NB - 1 && U[k + 1] \u003c= u) k++;\n          if (k & 1) {\n            cr = CM[0];\n            cg = CM[1];\n            cb = CM[2];\n            tau = 0.165 + 0.05 * bh[k];\n          } else {\n            // The clear bands, in the packet's tint, washed a little warmer\n            // or cooler across the slice, all equally clear.\n            const zt = bz[k] + 0.1 * (wsx[4 * W + x] * c4 + wcx[4 * W + x] * s4);\n            const ms = clamp((zt - 0.6) / 0.3, 0, 1);\n            const mw = clamp((zt - 0.15) / 0.3, 0, 1) - ms;\n            cr = CT[0] + (CW[0] - CT[0]) * mw + (CS[0] - CT[0]) * ms;\n            cg = CT[1] + (CW[1] - CT[1]) * mw + (CS[1] - CT[1]) * ms;\n            cb = CT[2] + (CW[2] - CT[2]) * mw + (CS[2] - CT[2]) * ms;\n            tau = ((0.94 + 0.1 * bh[k] + 0.03 * g3[p]) * tmax) / max(cr, cg, cb);\n          }\n        }\n      }\n      const v = L * tau;\n      let r = cr * v;\n      let g = cg * v;\n      let b = cb * v;\n      // The grain: the two weaker channels of every LED wander a little.\n      const j1 = 12 * g1[p];\n      const j2 = 12 * g2[p];\n      if (b >= r && b >= g) {\n        r = min(b, max(0, r + j1));\n        g = min(b, max(0, g + j2));\n      } else if (r >= g) {\n        g = min(r, max(0, g + j1));\n        b = min(r, max(0, b + j2));\n      } else {\n        r = min(g, max(0, r + j1));\n        b = min(g, max(0, b + j2));\n      }\n      out[q] = r;\n      out[q + 1] = g;\n      out[q + 2] = b;\n      display.setPixel(x, y, out[q], out[q + 1], out[q + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-agate","type":"code","name":"agate","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Agate\n// Family:  mineral\n// Idea:    A slice of banded agate lies on a lightbox, so close it fills the panel, its fine fortification bands of pale blue, milky white and smoky lavender following the nodule's rough brown rind in to a hollow of glinting quartz, while a slow saw cuts deeper and the bands flow, open and close.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after polished slices of blue lace agate held up to a lightbox\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Stain=0..1, Speed=0.2..3, Width=1..4, Light=-1..1\n//\n// Knob 1: Stain. The colour of the stone: blue lace agate at 0, then grey, honey and at 1 a pale carnelian, all of them pale the way agate is with light coming through it.\n// Knob 2: Speed. How fast the saw cuts down through the nodule and the lamp wanders under the glass: at 2 the bands creep about half a LED a second and a small eye in them opens and closes over ten seconds.\n// Knob 3: Width. How thick each band was laid down, from fine bands of about one LED at the start to 4 LED bands.\n// Knob 4: Light. Which side of the lightbox the lamp sits under, left at -1, behind the middle at 0, right at 1; it wanders a little either side of there on its own.\n// Buttons: K1 tap cuts into a fresh nodule: the blade crosses the lightbox from the left and the new slice follows it.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The band field is worked out on a grid with a margin round the panel, so\n// the rind can run off the panel's edge without the bands bending to meet it.\nconst M = 10;\nconst GW = W + 2 * M;\nconst GH = H + 2 * M;\nconst GN = GW * GH;\nconst NA = 256;\nconst NB = 120;\nconst TAU = Math.PI * 2;\n// The nodule's outline before its wall wanders: a rounded oblong.\nconst EA = 37;\nconst EB = 72;\nconst SUP = 2.2;\nconst NW = 5;\nconst RIND = 2.2;\nconst CORE = 6;\nconst FILL = 0.9;\nconst HOLE = 3.6;\nconst { sin, cos, sqrt, exp, min, max, floor, abs } = Math;\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nfunction hash(n) {\n  n = (n ^ 61) ^ (n >>> 16);\n  n = Math.imul(n, 9);\n  n ^= n >>> 4;\n  n = Math.imul(n, 0x27d4eb2d);\n  n ^= n >>> 15;\n  return (n >>> 0) / 4294967296;\n}\n\n// Each stain: clear band, milky band, the smoky tint some packets of clear\n// bands take, rind, quartz, and the bare lightbox round the slice.\nconst STAIN = [\n  [[174, 205, 250], [228, 220, 210], [186, 170, 218], [150, 102, 64], [226, 230, 240], [222, 228, 238]],\n  [[198, 204, 214], [226, 220, 210], [176, 170, 184], [136, 106, 80], [232, 232, 234], [230, 230, 230]],\n  [[244, 204, 136], [238, 226, 204], [210, 158, 108], [144, 92, 50], [240, 234, 220], [238, 232, 216]],\n  [[248, 160, 116], [238, 216, 202], [218, 120, 98], [132, 74, 44], [242, 230, 224], [240, 230, 222]],\n];\n\nfunction nodule(P) {\n  P.cx = W / 2 + (Math.random() - 0.5) * 4;\n  P.cy = H / 2 + (Math.random() - 0.5) * 10;\n  // The wall wanders round the oblong, and wanders differently deeper in.\n  P.harm = [];\n  for (let m = 2; m \u003c= 7; m++)\n    P.harm.push([m, (0.17 / m ** 0.8) * (0.5 + Math.random()), Math.random() * TAU, (Math.random() - 0.5) * 0.09]);\n  // Lobes where the gas bubble the agate filled was pinched or swollen.\n  P.lobes = [];\n  for (let j = 0; j \u003c 3; j++)\n    P.lobes.push([Math.random() * TAU, (Math.random() \u003c 0.5 ? -1 : 1) * (3 + Math.random() * 4), 0.18 + Math.random() * 0.15, (Math.random() - 0.5) * 0.06]);\n  P.rough = [];\n  for (const m of [11, 17, 23, 31]) P.rough.push([m, 0.25 + Math.random() * 0.35, Math.random() * TAU]);\n  // Slow ripples in the layers themselves, as a field through the stone, a\n  // finer crinkle that makes the lace, and a broad wash of tint.\n  P.waves = [];\n  for (let j = 0; j \u003c NW; j++) {\n    const a = Math.random() * TAU;\n    const k = j \u003c 3 ? 0.11 + Math.random() * 0.1 : j === 3 ? 0.42 : 0.06;\n    P.waves.push([cos(a) * k, sin(a) * k * (j === 3 ? 1 : 0.55), 0.12 + Math.random() * 0.12, Math.random() * TAU]);\n    for (let x = 0; x \u003c W; x++) {\n      P.wsx[j * W + x] = sin(P.waves[j][0] * (x + 0.5));\n      P.wcx[j * W + x] = cos(P.waves[j][0] * (x + 0.5));\n    }\n  }\n  // Band widths, in units of Width, all near one. The bands come in packets\n  // of a dozen or so, each laid down from a slightly different solution:\n  // mostly pale blue, sometimes near white or smoky lavender. A packet starts\n  // with a band laid down twice as thick.\n  let u = 0;\n  let thick = 0;\n  let tint = 0;\n  for (let k = 0; k \u003c= NB; k++) {\n    P.U[k] = u;\n    P.bh[k] = Math.random();\n    if (k === thick) {\n      const r = Math.random();\n      tint = r \u003c 0.65 ? 0.1 * Math.random() : r \u003c 0.85 ? 0.45 + 0.1 * Math.random() : 0.85 + 0.15 * Math.random();\n      if (k) u += 1.1;\n      thick += 9 + floor(Math.random() * 7);\n    }\n    P.bz[k] = tint;\n    u += 0.88 + Math.random() * 0.24;\n  }\n  P.seed = (Math.random() * 1e6) | 0;\n  P.fresh = true;\n  for (let p = 0; p \u003c N; p++) {\n    P.rr[p] = Math.random() * 1.3;\n    P.rt[p] = Math.random();\n  }\n  for (let Y = 0; Y \u003c GH; Y++)\n    for (let X = 0; X \u003c GW; X++) {\n      const i = Y * GW + X;\n      const dx = X - M + 0.5 - P.cx;\n      const dy = Y - M + 0.5 - P.cy;\n      let a = (Math.atan2(dy, dx) / TAU) * NA;\n      if (a \u003c 0) a += NA;\n      P.ang[i] = a;\n      P.rad[i] = sqrt(dx * dx + dy * dy) + 1e-6;\n    }\n  // How far the wall may reach along each ray before it leaves the grid.\n  for (let a = 0; a \u003c= NA; a++) {\n    const th = (a / NA) * TAU;\n    const c = cos(th);\n    const s = sin(th);\n    const rx = (c > 0 ? W + M - P.cx : P.cx + M) / (abs(c) + 1e-6);\n    const ry = (s > 0 ? H + M - P.cy : P.cy + M) / (abs(s) + 1e-6);\n    P.rmax[a] = min(rx, ry) - 3;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.U = new Float32Array(NB + 1);\n  P.bh = new Float32Array(NB + 1);\n  P.bz = new Float32Array(NB + 1);\n  for (const k of [\"ang\", \"rad\", \"Rp\", \"sx\", \"sy\", \"bd\", \"d\"]) P[k] = new Float32Array(GN);\n  P.inn = new Uint8Array(GN);\n  P.rmax = new Float32Array(NA + 1);\n  P.R = new Float32Array(NA + 1);\n  P.R0 = new Float32Array(NA + 1);\n  P.scale = 1;\n  // The stone's own grain: a fixed jitter per LED.\n  for (const k of [\"g1\", \"g2\", \"g3\", \"fh\", \"rr\", \"rt\", \"off\"]) P[k] = new Float32Array(N);\n  P.wsx = new Float32Array(NW * W);\n  P.wcx = new Float32Array(NW * W);\n  P.wsy = new Float32Array(NW * H);\n  P.wcy = new Float32Array(NW * H);\n  P.lx = new Float32Array(W);\n  P.ly = new Float32Array(H);\n  P.out = new Uint8ClampedArray(N * 3);\n  P.old = new Uint8ClampedArray(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    P.g1[p] = Math.random() * 2 - 1;\n    P.g2[p] = Math.random() * 2 - 1;\n    P.g3[p] = Math.random() * 2 - 1;\n    P.fh[p] = Math.random();\n  }\n  P.t = 0;\n  P.z = 0;\n  P.wipe = -1;\n  P.stain = 0;\n  P.width = 1;\n  P.side = 0.06;\n  nodule(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.stain = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3) / 2;\n  P.width = clamp(k[2], 1, 4);\n  P.side = clamp(k[3], -1, 1);\n  P.t += dt * speed;\n  P.z += dt * speed * 1.6;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.old.set(P.out);\n    P.wipe = 0;\n    nodule(P);\n  }\n  if (P.wipe >= 0) {\n    P.wipe += dt * 48;\n    if (P.wipe > W + 2) P.wipe = -1;\n  }\n}\n\n// Where the slice's wall lies this deep into the nodule, and how far every\n// point inside is from it: the layers were laid down on the wall, so each band\n// is the wall drawn again a little further in.\nfunction field(P) {\n  const z = P.z;\n  for (let a = 0; a \u003c= NA; a++) {\n    const th = (a / NA) * TAU;\n    let r = 1 / ((abs(cos(th)) / EA) ** SUP + (abs(sin(th)) / EB) ** SUP) ** (1 / SUP);\n    let f = 1;\n    for (const [m, amp, ph, om] of P.harm) f += amp * sin(m * th + ph + om * z);\n    r *= f;\n    for (const [c0, amp, wd, om] of P.lobes) {\n      let e = th - c0 - om * z;\n      e -= TAU * Math.round(e / TAU);\n      r += amp * exp(-(e * e) / (wd * wd));\n    }\n    for (const [m, amp, ph] of P.rough) r += amp * sin(m * th + ph);\n    P.R0[a] = r;\n  }\n  const { inn, sx, sy, bd, Rp, rad, ang, R } = P;\n  // The stone is held so close that it covers about the same share of the\n  // lightbox whatever its shape: the outline swells or shrinks to suit.\n  for (let it = P.fresh ? 8 : 1; it > 0; it--) {\n    for (let a = 0; a \u003c= NA; a++) R[a] = min(P.R0[a] * P.scale, P.rmax[a]);\n    let cov = 0;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = (y + M) * GW + x + M;\n        const af = ang[i];\n        const a0 = af | 0;\n        if (rad[i] \u003c R[a0] + (R[a0 + 1] - R[a0]) * (af - a0)) cov++;\n      }\n    P.scale = clamp(P.scale * (1 + 0.8 * (FILL - cov / N)), 0.8, 1.4);\n  }\n  for (let i = 0; i \u003c GN; i++) {\n    const af = ang[i];\n    const a0 = af | 0;\n    const r = R[a0] + (R[a0 + 1] - R[a0]) * (af - a0);\n    Rp[i] = r;\n    inn[i] = rad[i] \u003c r ? 1 : 0;\n    bd[i] = 1e9;\n  }\n  // Seeds: the wall's own point on the ray through each edge cell.\n  for (let Y = 1; Y \u003c GH - 1; Y++)\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i] || (inn[i - 1] && inn[i + 1] && inn[i - GW] && inn[i + GW])) continue;\n      const q = Rp[i] / rad[i];\n      const px = X - M + 0.5;\n      const py = Y - M + 0.5;\n      sx[i] = P.cx + (px - P.cx) * q;\n      sy[i] = P.cy + (py - P.cy) * q;\n      bd[i] = (sx[i] - px) ** 2 + (sy[i] - py) ** 2;\n    }\n  // Two sweeps carry the nearest wall point inward.\n  const take = (i, j, px, py) => {\n    if (bd[j] > 1e8) return;\n    const ax = sx[j] - px;\n    const ay = sy[j] - py;\n    const e = ax * ax + ay * ay;\n    if (e \u003c bd[i]) {\n      bd[i] = e;\n      sx[i] = sx[j];\n      sy[i] = sy[j];\n    }\n  };\n  for (let Y = 1; Y \u003c GH - 1; Y++) {\n    const py = Y - M + 0.5;\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      const px = X - M + 0.5;\n      take(i, i - 1, px, py);\n      take(i, i - GW - 1, px, py);\n      take(i, i - GW, px, py);\n      take(i, i - GW + 1, px, py);\n    }\n    for (let X = GW - 2; X > 0; X--) {\n      const i = Y * GW + X;\n      if (inn[i]) take(i, i + 1, X - M + 0.5, py);\n    }\n  }\n  let dmax = 0;\n  for (let Y = GH - 2; Y > 0; Y--) {\n    const py = Y - M + 0.5;\n    for (let X = GW - 2; X > 0; X--) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      const px = X - M + 0.5;\n      take(i, i + 1, px, py);\n      take(i, i + GW + 1, px, py);\n      take(i, i + GW, px, py);\n      take(i, i + GW - 1, px, py);\n    }\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      take(i, i - 1, X - M + 0.5, py);\n      const d = sqrt(bd[i]);\n      P.d[i] = d;\n      if (d > dmax) dmax = d;\n    }\n  }\n  P.dmax = dmax;\n}\n\nfunction stain(P) {\n  const s = P.stain * 3;\n  const i = min(2, floor(s));\n  const f = s - i;\n  return STAIN[i].map((c, j) => c.map((v, ch) => v + (STAIN[i + 1][j][ch] - v) * f));\n}\n\nexport function draw(display, params) {\n  const P = params;\n  // The wall moves far slower than the ripples in the layers, so its\n  // distances are worked out again only each time the saw has gone a little\n  // deeper.\n  if (P.fresh || abs(P.z - P.fz) > 0.3) {\n    field(P);\n    P.fz = P.z;\n    P.fresh = false;\n  }\n  const [CT, CM, CS, CR, CQ, CL] = stain(P);\n  const CW = CT.map((v, c) => v + (CM[c] - v) * 0.5);\n  const tmax = max(CT[0], CT[1], CT[2]);\n  const { t, z, out, old, waves, seed, wsx, wcx, wsy, wcy, U, bh, bz, inn, lx, ly, d: D, rr, rt, fh, g1, g2, g3, off } = P;\n  // The lamp under the glass: broad, and wandering slowly sideways.\n  const lampX = W / 2 + 30 * P.side + 14 * sin(t * 0.55);\n  const lampY = H / 2 + 34 * sin(t * 0.31 + 1);\n  for (let x = 0; x \u003c W; x++) lx[x] = 0.24 * exp(-((x + 0.5 - lampX) ** 2) / 1800);\n  for (let y = 0; y \u003c H; y++) ly[y] = exp(-((y + 0.5 - lampY) ** 2) / 7200);\n  const wd = P.width;\n  const dCore = P.dmax - CORE;\n  for (let j = 0; j \u003c NW; j++)\n    for (let y = 0; y \u003c H; y++) {\n      const a = waves[j][1] * (y + 0.5) + waves[j][2] * z + waves[j][3];\n      wsy[j * H + y] = sin(a);\n      wcy[j * H + y] = cos(a);\n    }\n  // Eyes: small knots in the layers that the saw passes through, each a\n  // little bullseye that opens, holds and closes again over ten seconds or so.\n  off.fill(0);\n  for (let j = floor((z - 24) / 14); j \u003c= floor((z + 24) / 14); j++) {\n    const ex = 6 + 52 * hash(seed + j * 131 + 1);\n    const ey = 10 + 108 * hash(seed + j * 131 + 2);\n    const gi = (floor(ey) + M) * GW + floor(ex) + M;\n    if (!inn[gi]) continue;\n    const dc = D[gi];\n    const f = clamp((dCore - 5 - dc) / 5, 0, 1) * clamp((dc - 6) / 4, 0, 1);\n    const A = 7 * f * exp(-(((z - j * 14 - 7 * hash(seed + j * 131 + 3)) / 7) ** 2));\n    const sg = 2.8 + 2.2 * hash(seed + j * 131 + 4);\n    if (A \u003c 0.05) continue;\n    for (let y = max(0, floor(ey - 3 * sg)); y \u003c min(H, ey + 3 * sg); y++)\n      for (let x = max(0, floor(ex - 3 * sg)); x \u003c min(W, ex + 3 * sg); x++)\n        off[y * W + x] += A * exp(-((x + 0.5 - ex) ** 2 + (y + 0.5 - ey) ** 2) / (sg * sg));\n  }\n  const wipe = P.wipe;\n  for (let y = 0; y \u003c H; y++) {\n    const py = y + 0.5;\n    const c0 = wcy[y], s0 = wsy[y], c1 = wcy[H + y], s1 = wsy[H + y], c2 = wcy[2 * H + y], s2 = wsy[2 * H + y];\n    const c3 = wcy[3 * H + y], s3 = wsy[3 * H + y], c4 = wcy[4 * H + y], s4 = wsy[4 * H + y];\n    const lyy = ly[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y + M) * GW + x + M;\n      const p = y * W + x;\n      const q = p * 3;\n      if (wipe >= 0 && x > wipe - 1) {\n        // The blade crossing the lightbox, the old slice still beyond it.\n        if (x > wipe) display.setPixel(x, y, old[q], old[q + 1], old[q + 2]);\n        else display.setPixel(x, y, 30, 28, 34);\n        continue;\n      }\n      const L = 0.76 + lx[x] * lyy;\n      let cr;\n      let cg;\n      let cb;\n      let tau;\n      if (!inn[i]) {\n        cr = CL[0];\n        cg = CL[1];\n        cb = CL[2];\n        tau = 0.92;\n      } else if (D[i] \u003c RIND + rr[p]) {\n        // The rind: rough, nearly opaque, with chalky flecks.\n        cr = CR[0];\n        cg = CR[1];\n        cb = CR[2];\n        tau = rt[p] \u003c 0.3 ? 0.62 : 0.26 + 0.16 * rt[p];\n      } else {\n        const dd =\n          D[i] +\n          off[p] +\n          0.8 * (wsx[x] * c0 + wcx[x] * s0 + wsx[W + x] * c1 + wcx[W + x] * s1 + wsx[2 * W + x] * c2 + wcx[2 * W + x] * s2) +\n          0.4 * (wsx[3 * W + x] * c3 + wcx[3 * W + x] * s3);\n        if (dd > dCore + HOLE) {\n          // Where the crystals did not meet, the slice is open and the\n          // lightbox shines straight through.\n          cr = CL[0];\n          cg = CL[1];\n          cb = CL[2];\n          tau = 1;\n        } else if (dd > dCore) {\n          // Quartz druzy: each tiny crystal throws the lamp back when its\n          // face turns toward it, and the saw keeps cutting new ones.\n          const fa = hash(p * 31 + floor(z * 0.4 + fh[p]) * 977 + seed);\n          cr = CQ[0];\n          cg = CQ[1];\n          cb = CQ[2];\n          if (dd \u003c dCore + 0.9) tau = 0.9;\n          else if (fa \u003c 0.33) tau = 0.16 + 0.3 * fa;\n          else {\n            const ax = lampX - x - 0.5;\n            const ay = lampY - py;\n            const c = (cos(fa * 40) * ax + sin(fa * 40) * ay) / (sqrt(ax * ax + ay * ay) + 1);\n            tau = 0.5 + 0.4 * fa + (c > 0 ? 0.7 * c ** 8 : 0);\n          }\n        } else {\n          const u = (dd - RIND) / wd;\n          let k = min(NB - 1, max(0, floor(u)));\n          while (k > 0 && U[k] > u) k--;\n          while (k \u003c NB - 1 && U[k + 1] \u003c= u) k++;\n          if (k & 1) {\n            cr = CM[0];\n            cg = CM[1];\n            cb = CM[2];\n            tau = 0.165 + 0.05 * bh[k];\n          } else {\n            // The clear bands, in the packet's tint, washed a little warmer\n            // or cooler across the slice, all equally clear.\n            const zt = bz[k] + 0.1 * (wsx[4 * W + x] * c4 + wcx[4 * W + x] * s4);\n            const ms = clamp((zt - 0.6) / 0.3, 0, 1);\n            const mw = clamp((zt - 0.15) / 0.3, 0, 1) - ms;\n            cr = CT[0] + (CW[0] - CT[0]) * mw + (CS[0] - CT[0]) * ms;\n            cg = CT[1] + (CW[1] - CT[1]) * mw + (CS[1] - CT[1]) * ms;\n            cb = CT[2] + (CW[2] - CT[2]) * mw + (CS[2] - CT[2]) * ms;\n            tau = ((0.94 + 0.1 * bh[k] + 0.03 * g3[p]) * tmax) / max(cr, cg, cb);\n          }\n        }\n      }\n      const v = L * tau;\n      let r = cr * v;\n      let g = cg * v;\n      let b = cb * v;\n      // The grain: the two weaker channels of every LED wander a little.\n      const j1 = 12 * g1[p];\n      const j2 = 12 * g2[p];\n      if (b >= r && b >= g) {\n        r = min(b, max(0, r + j1));\n        g = min(b, max(0, g + j2));\n      } else if (r >= g) {\n        g = min(r, max(0, g + j1));\n        b = min(r, max(0, b + j2));\n      } else {\n        r = min(g, max(0, r + j1));\n        b = min(g, max(0, b + j2));\n      }\n      out[q] = r;\n      out[q + 1] = g;\n      out[q + 2] = b;\n      display.setPixel(x, y, out[q], out[q + 1], out[q + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Stain=0..1, Speed=0.2..3, Width=1..4, Light=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Stain","min":0,"max":1,"about":"The colour of the stone: blue lace agate at 0, then grey, honey and at 1 a pale carnelian, all of them pale the way agate is with light coming through it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the saw cuts down through the nodule and the lamp wanders under the glass: at 2 the bands creep about half a LED a second and a small eye in them opens and closes over ten seconds."},{"name":"Width","min":1,"max":4,"about":"How thick each band was laid down, from fine bands of about one LED at the start to 4 LED bands."},{"name":"Light","min":-1,"max":1,"about":"Which side of the lightbox the lamp sits under, left at -1, behind the middle at 0, right at 1; it wanders a little either side of there on its own."}],"start":[0,2,1,0.06],"measures":{"motion":0.2044,"detail":0.342,"edges":0.8294,"complexity":2.5192,"coverage":1,"colour":0.128,"drift":0.0573},"knobResponse":[0.1001,0.2798,0.2989,0.0578]},{"slug":"analemma","title":"Analemma","family":"celestial","round":15,"note":"일 년 동안 같은 시각에 찍은 해가 바다 위 하늘에 8자를 그려요. K1 이 시각을 아침에서 저녁까지 돌려 8자를 눕히고, K4 를 올리면 화성의 눈물방울 모양이 돼요.","idea":"A camera fixed over the sea photographs the Sun at the same clock time every ten days for a year, and the exposures pile up into a tall figure eight that leans with the hour.","buttons":"K1 tap pins the day's date beside that day's Sun for four seconds; away from Earth's orbit it counts days from the start of the year.","code":"// ===== Patternflow pattern =====\n// Title:   Analemma\n// Family:  celestial\n// Idea:    A camera fixed over the sea photographs the Sun at the same clock time every ten days for a year, and the exposures pile up into a tall figure eight that leans with the hour.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: analemma photographs, a year of exposures of the Sun at one clock time on one frame\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hour=-1..1, Speed=0.2..3, Latitude=-1..1, Orbit=0..1\n//\n// Knob 1: Hour. The clock time the shutter fires: noon in the middle stands the eight upright over the south; 8 in the morning at the left end turns the camera to the east-south-east and lays the eight over, summer end high on the left, and 4 in the afternoon at the right end does the same to the west. The sky is lit by the Sun at that hour, golden on winter mornings and evenings.\n// Knob 2: Speed. Days a second: 20 at 2, so a year passes in 18 seconds; 2 at the bottom, 30 at the top.\n// Knob 3: Latitude. Where the camera stands: 52.5 degrees north in the middle, 40 at the left end where the noon eight climbs to 73 degrees, 65 at the right end where the winter Sun barely clears the sea.\n// Knob 4: Orbit. The first tenth is Earth's orbit; turned up it moves out to Mars's, more eccentric and more tilted, with a longer year and a smaller Sun, and the eight swells into a teardrop.\n// Buttons: K1 tap pins the day's date beside that day's Sun for four seconds; away from Earth's orbit it counts days from the start of the year.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst TAU = Math.PI * 2;\nconst DEG = Math.PI / 180;\n// LEDs per degree of sky, and the row the sea's horizon sits on.\nconst K = 1.4;\nconst HZ = 109;\nconst CX = W / 2;\n// Entries in the glare table, by squared distance in LEDs.\nconst GLOW = 16384;\n// Cumulus clouds round the compass.\nconst CLOUDS = 22;\n// Exposures a year, one every ten days.\nconst SHOTS = 36;\n// Earth and Mars: eccentricity, obliquity, the Sun's longitude at perihelion,\n// the orbit's size in AU.\nconst EARTH = [0.0167, 23.44 * DEG, 282.9 * DEG, 1];\nconst MARS = [0.0934, 25.19 * DEG, 251.0 * DEG, 1.524];\nconst YEAR = 365.2422;\n// Perihelion falls on 3 January.\nconst PERI = 3 / YEAR;\nconst MONTHS = [\"JAN\", \"FEB\", \"MAR\", \"APR\", \"MAY\", \"JUN\", \"JUL\", \"AUG\", \"SEP\", \"OCT\", \"NOV\", \"DEC\"];\nconst MDAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];\n// A 3x5 font, each glyph five rows of three bits.\nconst FONT = {\n  A: [2, 5, 7, 5, 5],\n  B: [6, 5, 6, 5, 6],\n  C: [3, 4, 4, 4, 3],\n  D: [6, 5, 5, 5, 6],\n  E: [7, 4, 6, 4, 7],\n  F: [7, 4, 6, 4, 4],\n  G: [3, 4, 5, 5, 3],\n  J: [1, 1, 1, 5, 2],\n  L: [4, 4, 4, 4, 7],\n  M: [5, 7, 7, 5, 5],\n  N: [6, 5, 5, 5, 5],\n  O: [2, 5, 5, 5, 2],\n  P: [6, 5, 6, 4, 4],\n  R: [6, 5, 6, 5, 5],\n  S: [3, 4, 2, 1, 6],\n  T: [7, 2, 2, 2, 2],\n  U: [5, 5, 5, 5, 7],\n  V: [5, 5, 5, 5, 2],\n  Y: [5, 5, 2, 2, 2],\n  0: [7, 5, 5, 5, 7],\n  1: [2, 6, 2, 2, 7],\n  2: [6, 1, 2, 4, 7],\n  3: [6, 1, 2, 1, 6],\n  4: [5, 5, 7, 1, 1],\n  5: [7, 4, 6, 1, 6],\n  6: [3, 4, 7, 5, 7],\n  7: [7, 1, 1, 2, 2],\n  8: [7, 5, 7, 5, 7],\n  9: [7, 5, 7, 1, 6],\n};\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp01((v - a) / (b - a));\n  return t * t * (3 - 2 * t);\n}\n\nfunction mix(a, b, t) {\n  return a + (b - a) * t;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frame = new Float32Array(N * 3);\n  P.sx = new Float32Array(SHOTS);\n  P.sy = new Float32Array(SHOTS);\n  P.pos = [0, 0, 0];\n  // How far through the year, and seconds since the year turned.\n  P.phase = 0.6;\n  P.turned = 9;\n  P.clock = 0;\n  P.pin = null;\n  P.hour = 12;\n  P.lat = 52.5 * DEG;\n  P.orb = EARTH.slice();\n  P.speed = 20;\n  P.az0 = Math.PI;\n  // Fair-weather cumulus round the compass, each a few round puffs on a\n  // flat base: azimuth, base altitude and the puffs' offsets and radii, in\n  // degrees.\n  P.clouds = [];\n  for (let c = 0; c \u003c CLOUDS; c++) {\n    const wide = 5 + 9 * Math.random();\n    const tall = 2 + 2.6 * Math.random();\n    const puffs = [];\n    const n = 3 + Math.floor(Math.random() * 3);\n    for (let k = 0; k \u003c n; k++) {\n      const r = tall * (0.5 + 0.5 * Math.sin((Math.PI * (k + 0.5)) / n)) * (0.75 + 0.4 * Math.random());\n      puffs.push([((k + 0.5) / n - 0.5) * wide, r * 0.75, r]);\n    }\n    P.clouds.push({ az: (c + 0.3 + 0.4 * Math.random()) * (360 / CLOUDS), base: 1.2 + 2.2 * Math.random(), wide, puffs });\n  }\n  P.wind = 0;\n  P.colW = new Float32Array(W);\n  P.glowT = new Float32Array(GLOW);\n  for (let i = 0; i \u003c GLOW; i++) {\n    const d = Math.sqrt(i);\n    P.glowT[i] = 0.5 * Math.exp(-d / 5) + 0.22 * Math.exp(-d / 20);\n  }\n}\n\n// The Sun at a share `ph` of the year: where it shows on the panel, and its\n// altitude in degrees, into out.\nfunction sunAt(P, ph, out) {\n  const e = P.orb[0];\n  const eps = P.orb[1];\n  const lp = P.orb[2];\n  // Mean anomaly, then Kepler's equation for the eccentric anomaly.\n  const M = TAU * (ph - PERI);\n  let E = M;\n  for (let i = 0; i \u003c 6; i++) E = M + e * Math.sin(E);\n  const nu = 2 * Math.atan2(Math.sqrt(1 + e) * Math.sin(E / 2), Math.sqrt(1 - e) * Math.cos(E / 2));\n  // The Sun's ecliptic longitude, its declination and right ascension.\n  const lam = nu + lp;\n  const dec = Math.asin(Math.sin(eps) * Math.sin(lam));\n  const ra = Math.atan2(Math.cos(eps) * Math.sin(lam), Math.cos(lam));\n  // The equation of time: the mean Sun's longitude against the true Sun's\n  // right ascension, the gap between clock and sundial.\n  let eot = M + lp - ra;\n  eot -= Math.round(eot / TAU) * TAU;\n  // The hour angle at this clock time, then altitude and azimuth.\n  const ha = (P.hour - 12) * 15 * DEG + eot;\n  const sl = Math.sin(P.lat);\n  const cl = Math.cos(P.lat);\n  const up = sl * Math.sin(dec) + cl * Math.cos(dec) * Math.cos(ha);\n  const north = cl * Math.sin(dec) - sl * Math.cos(dec) * Math.cos(ha);\n  const east = -Math.cos(dec) * Math.sin(ha);\n  const alt = Math.asin(Math.max(-1, Math.min(1, up)));\n  let daz = Math.atan2(east, north) - P.az0;\n  daz -= Math.round(daz / TAU) * TAU;\n  out[0] = CX + (daz / DEG) * Math.cos(alt) * K;\n  out[1] = HZ - (alt / DEG) * K;\n  out[2] = alt / DEG;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.clock += dt;\n  P.hour = 12 + 4 * Math.max(-1, Math.min(1, k[0]));\n  P.lat = (52.5 + 12.5 * Math.max(-1, Math.min(1, k[2]))) * DEG;\n  const w = clamp01((k[3] - 0.1) / 0.9);\n  for (let i = 0; i \u003c 4; i++) P.orb[i] = mix(EARTH[i], MARS[i], w);\n  // Kepler's third law: the year grows as the orbit's size to the power 1.5.\n  P.year = YEAR * Math.pow(P.orb[3], 1.5);\n  P.speed = 10 * Math.max(0.2, Math.min(3, k[1]));\n  // The camera faces where the Sun stands at this hour at an equinox.\n  const ha = (P.hour - 12) * 15 * DEG;\n  const sl = Math.sin(P.lat);\n  P.az0 = Math.atan2(-Math.sin(ha), -sl * Math.cos(ha));\n\n  P.phase += (dt * P.speed) / P.year;\n  P.turned += dt;\n  // The clouds drift east to west at a degree every two seconds.\n  P.wind += dt * 0.5;\n  if (P.phase >= 1) {\n    P.phase -= 1;\n    P.turned = 0;\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.pin = { ph: P.phase, age: 0 };\n  if (P.pin) {\n    P.pin.age += dt;\n    if (P.pin.age > 4) P.pin = null;\n  }\n\n  for (let j = 0; j \u003c SHOTS; j++) {\n    sunAt(P, (j + 0.5) / SHOTS, P.pos);\n    P.sx[j] = P.pos[0];\n    P.sy[j] = P.pos[1];\n  }\n  sunAt(P, P.phase, P.pos);\n  P.sun = [P.pos[0], P.pos[1], P.pos[2]];\n}\n\n// A disc of the Sun with a soft edge, laid over the frame with opacity op.\nfunction disc(out, x, y, rad, op, r, g, b) {\n  for (let yy = Math.floor(y - rad - 1); yy \u003c= Math.ceil(y + rad + 1); yy++) {\n    if (yy \u003c 0 || yy >= HZ) continue;\n    for (let xx = Math.floor(x - rad - 1); xx \u003c= Math.ceil(x + rad + 1); xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx + 0.5 - x;\n      const dy = yy + 0.5 - y;\n      const a = clamp01(rad + 0.5 - Math.sqrt(dx * dx + dy * dy)) * op;\n      if (a \u003c= 0) continue;\n      const p = (yy * W + xx) * 3;\n      out[p] += (r - out[p]) * a;\n      out[p + 1] += (g - out[p + 1]) * a;\n      out[p + 2] += (b - out[p + 2]) * a;\n    }\n  }\n}\n\n// Land on the horizon, in degrees, at azimuth az: a headland in the east, one\n// in the west, and the rock the lighthouse stands on a little east of south.\nfunction land(az) {\n  const a = az / DEG;\n  let h = 0;\n  if (a > 68 && a \u003c 122) h = Math.max(h, 2.6 * Math.sin(((a - 68) / 54) * Math.PI) ** 0.6 + 0.5 * Math.sin(a * 0.9));\n  if (a > 236 && a \u003c 294) h = Math.max(h, 3.2 * Math.sin(((a - 236) / 58) * Math.PI) ** 0.7 + 0.4 * Math.sin(a * 1.3));\n  if (a > 164.5 && a \u003c 171.5) h = Math.max(h, 1.1 * Math.sin(((a - 164.5) / 7) * Math.PI) ** 0.5);\n  return h;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const out = P.frame;\n  const sun = P.sun;\n  const hs = sun[2];\n  const t = P.clock;\n\n  // The sky's colours from the Sun's height: night, a low golden Sun, a pale\n  // hazy sky while the Sun is low, deep blue when it stands high.\n  const f = smooth(-7, 2, hs);\n  const g = smooth(2, 16, hs);\n  const q = smooth(14, 58, hs);\n  const zr = mix(mix(mix(4, 26, f), 34, g), 8, q);\n  const zg = mix(mix(mix(8, 34, f), 62, g), 34, q);\n  const zb = mix(mix(mix(28, 96, f), 134, g), 116, q);\n  const hr = mix(mix(mix(20, 214, f), 172, g), 64, q);\n  const hg = mix(mix(mix(22, 116, f), 156, g), 110, q);\n  const hb = mix(mix(mix(52, 74, f), 138, g), 174, q);\n  // Sunlight colour: orange low down, white-yellow high up.\n  const lr = 255;\n  const lg = mix(150, 228, g);\n  const lb = mix(70, 170, g);\n  const up = smooth(-3, 1, hs);\n\n  // Glare round the Sun from a table by squared distance, and a warmer\n  // horizon on the Sun's side while it is low.\n  const glowT = P.glowT;\n  const warm = (1 - g) * f * 0.35;\n  const colW = P.colW;\n  for (let x = 0; x \u003c W; x++) colW[x] = Math.exp(-Math.abs(x + 0.5 - sun[0]) / 26);\n  for (let y = 0; y \u003c HZ; y++) {\n    const alt = (HZ - y - 0.5) / K;\n    const v = Math.pow(clamp01(alt / 62), 0.55);\n    const br = mix(hr, zr, v);\n    const bg = mix(hg, zg, v);\n    const bb = mix(hb, zb, v);\n    const rowW = warm * Math.exp(-alt / 7);\n    const dy = y + 0.5 - sun[1];\n    const dy2 = dy * dy;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - sun[0];\n      const d2 = dx * dx + dy2;\n      const glow = Math.min(1, up * glowT[d2 \u003c GLOW ? d2 | 0 : GLOW - 1] + rowW * colW[x]);\n      const p = (y * W + x) * 3;\n      out[p] = br + (lr - br) * glow;\n      out[p + 1] = bg + (lg - bg) * glow;\n      out[p + 2] = bb + (lb - bb) * glow;\n    }\n  }\n\n  // Cumulus low over the sea, in the frame the exposures were laid over: lit\n  // on top in the sunlight's colour, grey underneath, flat at the base.\n  for (const cl of P.clouds) {\n    let daz = cl.az + P.wind - P.az0 / DEG;\n    daz -= Math.round(daz / 360) * 360;\n    const cx = CX + daz * K;\n    if (cx \u003c -cl.wide * K || cx > W + cl.wide * K) continue;\n    const baseY = HZ - cl.base * K;\n    let topY = baseY;\n    for (const pf of cl.puffs) topY = Math.min(topY, baseY - (pf[1] + pf[2]) * K);\n    for (let y = Math.max(0, Math.floor(topY - 1)); y \u003c Math.min(HZ, Math.ceil(baseY + 1)); y++) {\n      const py = y + 0.5;\n      const flat = clamp01(baseY - py + 0.5);\n      if (flat \u003c= 0) continue;\n      for (let x = Math.max(0, Math.floor(cx - cl.wide * K)); x \u003c Math.min(W, Math.ceil(cx + cl.wide * K)); x++) {\n        const px = x + 0.5;\n        let c = 0;\n        let lit = 0;\n        for (const pf of cl.puffs) {\n          const bx = cx + pf[0] * K;\n          const by = baseY - pf[1] * K;\n          const r = pf[2] * K;\n          const dx = px - bx;\n          const dy = py - by;\n          const d = Math.sqrt(dx * dx + dy * dy);\n          const a = clamp01(r + 0.5 - d);\n          if (a > c) {\n            c = a;\n            lit = clamp01(0.5 - dy / r);\n          }\n        }\n        c *= flat;\n        if (c \u003c= 0) continue;\n        const p = (y * W + x) * 3;\n        const cr = mix(hr * 0.78, mix(lr, 255, 0.4 + 0.4 * g), lit);\n        const cg = mix(hg * 0.78, mix(lg, 252, 0.4 + 0.4 * g), lit);\n        const cb = mix(hb * 0.82, mix(lb, 248, 0.4 + 0.4 * g), lit);\n        out[p] += (cr - out[p]) * c * 0.94;\n        out[p + 1] += (cg - out[p + 1]) * c * 0.94;\n        out[p + 2] += (cb - out[p + 2]) * c * 0.94;\n      }\n    }\n  }\n\n  // The exposures. Those already taken this year are bright; the rest are\n  // last year's, kept faint, and each fills in as its week comes round.\n  // At the turn of the year the whole eight fades back to that faint level.\n  const size = 1.6 / P.orb[3];\n  const faded = 0.32 + 0.68 * clamp01(1 - P.turned / 0.7);\n  for (let j = 0; j \u003c SHOTS; j++) {\n    const ph = (j + 0.5) / SHOTS;\n    const taken = ph \u003c= P.phase;\n    let op = taken ? 1 : faded;\n    let rad = size;\n    if (taken) {\n      // Seconds since this exposure: a flash as the shutter fires.\n      const age = ((P.phase - ph) * P.year) / P.speed;\n      const flash = clamp01(1 - age / 0.25);\n      rad += 0.9 * flash;\n    }\n    disc(out, P.sx[j], P.sy[j], rad, op, 255, 238, 196);\n  }\n  // The Sun itself, now.\n  disc(out, sun[0], sun[1], size + 0.6, 1, 255, 252, 236);\n\n  // The sea: it holds the horizon's light near the horizon and darkens\n  // towards the camera, with slow swell and the Sun's glitter path.\n  const depthR = mix(2, 4, g);\n  const depthG = mix(6, 16, g);\n  const depthB = mix(18, 40, g);\n  const sunUp = hs > -1;\n  for (let y = HZ; y \u003c H; y++) {\n    const k = (y - HZ + 0.5) / (H - HZ);\n    const s = Math.sqrt(k);\n    const br = mix(hr * 0.62, depthR, s);\n    const bg = mix(hg * 0.62, depthG, s);\n    const bb = mix(hb * 0.62, depthB, s);\n    const width = 0.7 + 6.5 * k;\n    // Distance out to sea: the wavelets crowd together toward the horizon.\n    const z = 1 / (k + 0.1);\n    const fx = 0.3 + 0.9 * k;\n    for (let x = 0; x \u003c W; x++) {\n      const along = Math.sin(x * fx * 0.5 + z * 0.8 + t * 0.7);\n      const swell = 0.8 + 0.3 * Math.sin(z * 3.3 - t * 1.4 + 0.7 * along) * (0.5 + 0.5 * Math.sin(x * fx * 1.3 - z * 2.1 + t * 0.5));\n      let r = br * swell;\n      let gg = bg * swell;\n      let b = bb * swell;\n      if (sunUp) {\n        const dx = (x + 0.5 - sun[0]) / width;\n        const path = Math.exp(-dx * dx) * up;\n        if (path > 0.01) {\n          const s1 = 0.5 + 0.5 * Math.sin(x * 2.3 + y * 3.1 + t * 4.7);\n          const s2 = 0.5 + 0.5 * Math.sin(x * 1.1 - y * 2.3 - t * 3.9 + 1.3);\n          const glint = path * (0.25 + 1.1 * Math.pow(s1 * s2, 3));\n          r += (lr - r) * Math.min(1, glint);\n          gg += (lg - gg) * Math.min(1, glint);\n          b += (lb - b) * Math.min(1, glint);\n        }\n      }\n      const p = (y * W + x) * 3;\n      out[p] = r;\n      out[p + 1] = gg;\n      out[p + 2] = b;\n    }\n  }\n\n  // Land along the horizon, hazed toward the sky's colour by distance.\n  const landR = mix(hr, 10, 0.62);\n  const landG = mix(hg, 16, 0.62);\n  const landB = mix(hb, 28, 0.62);\n  let tower = -1;\n  for (let x = 0; x \u003c W; x++) {\n    let az = P.az0 + (x + 0.5 - CX) / K * DEG;\n    az -= Math.floor(az / TAU) * TAU;\n    const h = land(az) * K;\n    if (Math.abs(az / DEG - 168) \u003c 0.5 / K) tower = x;\n    for (let y = Math.floor(HZ - h); y \u003c HZ; y++) {\n      const a = clamp01(HZ - h - y > 0 ? 0 : Math.min(1, h - (HZ - y - 1)));\n      const p = (y * W + x) * 3;\n      out[p] += (landR - out[p]) * a;\n      out[p + 1] += (landG - out[p + 1]) * a;\n      out[p + 2] += (landB - out[p + 2]) * a;\n    }\n  }\n  // The lighthouse: a white tower with a red band and a lantern that is lit\n  // while the Sun is low.\n  if (tower >= 0) {\n    const lamp = 1 - g;\n    for (let j = 0; j \u003c 12; j++) {\n      const y = HZ - 2 - j;\n      for (let x = tower - 1; x \u003c= tower; x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const p = (y * W + x) * 3;\n        let r = 222;\n        let gg = 226;\n        let b = 230;\n        if (j >= 4 && j \u003c= 6) {\n          r = 196;\n          gg = 40;\n          b = 40;\n        }\n        if (j >= 9) {\n          r = mix(40, 255, lamp);\n          gg = mix(40, 214, lamp);\n          b = mix(46, 130, lamp);\n        }\n        if (j === 11) {\n          r = 36;\n          gg = 30;\n          b = 30;\n        }\n        const shade = x === tower - 1 ? 1 : 0.72;\n        out[p] = r * shade;\n        out[p + 1] = gg * shade;\n        out[p + 2] = b * shade;\n      }\n    }\n  }\n\n  // A tap pins the day's date beside its place on the eight.\n  if (P.pin) {\n    const fade = clamp01(Math.min(P.pin.age / 0.2, (4 - P.pin.age) / 0.5));\n    sunAt(P, P.pin.ph, P.pos);\n    let text;\n    if (P.orb[3] \u003c 1.001) {\n      let d = Math.floor(P.pin.ph * YEAR);\n      let m = 0;\n      while (m \u003c 11 && d >= MDAYS[m]) d -= MDAYS[m++];\n      text = MONTHS[m] + \" \" + (d + 1);\n    } else text = \"DAY \" + (Math.floor(P.pin.ph * P.year) + 1);\n    const tw = text.length * 4 - 1;\n    const tx = P.pos[0] + 6 + tw \u003c W - 1 ? Math.round(P.pos[0] + 6) : Math.round(P.pos[0] - 6 - tw);\n    const ty = Math.round(Math.max(2, Math.min(HZ - 8, P.pos[1] - 2)));\n    for (let c = 0; c \u003c text.length; c++) {\n      const glyph = FONT[text[c]];\n      if (!glyph) continue;\n      for (let row = 0; row \u003c 5; row++)\n        for (let col = 0; col \u003c 3; col++) {\n          if (!((glyph[row] >> (2 - col)) & 1)) continue;\n          const x = tx + c * 4 + col;\n          const y = ty + row;\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const p = (y * W + x) * 3;\n          out[p] += (255 - out[p]) * fade;\n          out[p + 1] += (255 - out[p + 1]) * fade;\n          out[p + 2] += (255 - out[p + 2]) * fade;\n        }\n    }\n    // A ring round that day's Sun.\n    for (let a = 0; a \u003c 24; a++) {\n      const x = Math.floor(P.pos[0] + 3.6 * Math.cos((a * TAU) / 24));\n      const y = Math.floor(P.pos[1] + 3.6 * Math.sin((a * TAU) / 24));\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= HZ) continue;\n      const p = (y * W + x) * 3;\n      out[p] += (255 - out[p]) * fade * 0.8;\n      out[p + 1] += (255 - out[p + 1]) * fade * 0.8;\n      out[p + 2] += (255 - out[p + 2]) * fade * 0.8;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n}\n","layer":{"id":"layer-analemma","type":"code","name":"analemma","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Analemma\n// Family:  celestial\n// Idea:    A camera fixed over the sea photographs the Sun at the same clock time every ten days for a year, and the exposures pile up into a tall figure eight that leans with the hour.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: analemma photographs, a year of exposures of the Sun at one clock time on one frame\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hour=-1..1, Speed=0.2..3, Latitude=-1..1, Orbit=0..1\n//\n// Knob 1: Hour. The clock time the shutter fires: noon in the middle stands the eight upright over the south; 8 in the morning at the left end turns the camera to the east-south-east and lays the eight over, summer end high on the left, and 4 in the afternoon at the right end does the same to the west. The sky is lit by the Sun at that hour, golden on winter mornings and evenings.\n// Knob 2: Speed. Days a second: 20 at 2, so a year passes in 18 seconds; 2 at the bottom, 30 at the top.\n// Knob 3: Latitude. Where the camera stands: 52.5 degrees north in the middle, 40 at the left end where the noon eight climbs to 73 degrees, 65 at the right end where the winter Sun barely clears the sea.\n// Knob 4: Orbit. The first tenth is Earth's orbit; turned up it moves out to Mars's, more eccentric and more tilted, with a longer year and a smaller Sun, and the eight swells into a teardrop.\n// Buttons: K1 tap pins the day's date beside that day's Sun for four seconds; away from Earth's orbit it counts days from the start of the year.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst TAU = Math.PI * 2;\nconst DEG = Math.PI / 180;\n// LEDs per degree of sky, and the row the sea's horizon sits on.\nconst K = 1.4;\nconst HZ = 109;\nconst CX = W / 2;\n// Entries in the glare table, by squared distance in LEDs.\nconst GLOW = 16384;\n// Cumulus clouds round the compass.\nconst CLOUDS = 22;\n// Exposures a year, one every ten days.\nconst SHOTS = 36;\n// Earth and Mars: eccentricity, obliquity, the Sun's longitude at perihelion,\n// the orbit's size in AU.\nconst EARTH = [0.0167, 23.44 * DEG, 282.9 * DEG, 1];\nconst MARS = [0.0934, 25.19 * DEG, 251.0 * DEG, 1.524];\nconst YEAR = 365.2422;\n// Perihelion falls on 3 January.\nconst PERI = 3 / YEAR;\nconst MONTHS = [\"JAN\", \"FEB\", \"MAR\", \"APR\", \"MAY\", \"JUN\", \"JUL\", \"AUG\", \"SEP\", \"OCT\", \"NOV\", \"DEC\"];\nconst MDAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];\n// A 3x5 font, each glyph five rows of three bits.\nconst FONT = {\n  A: [2, 5, 7, 5, 5],\n  B: [6, 5, 6, 5, 6],\n  C: [3, 4, 4, 4, 3],\n  D: [6, 5, 5, 5, 6],\n  E: [7, 4, 6, 4, 7],\n  F: [7, 4, 6, 4, 4],\n  G: [3, 4, 5, 5, 3],\n  J: [1, 1, 1, 5, 2],\n  L: [4, 4, 4, 4, 7],\n  M: [5, 7, 7, 5, 5],\n  N: [6, 5, 5, 5, 5],\n  O: [2, 5, 5, 5, 2],\n  P: [6, 5, 6, 4, 4],\n  R: [6, 5, 6, 5, 5],\n  S: [3, 4, 2, 1, 6],\n  T: [7, 2, 2, 2, 2],\n  U: [5, 5, 5, 5, 7],\n  V: [5, 5, 5, 5, 2],\n  Y: [5, 5, 2, 2, 2],\n  0: [7, 5, 5, 5, 7],\n  1: [2, 6, 2, 2, 7],\n  2: [6, 1, 2, 4, 7],\n  3: [6, 1, 2, 1, 6],\n  4: [5, 5, 7, 1, 1],\n  5: [7, 4, 6, 1, 6],\n  6: [3, 4, 7, 5, 7],\n  7: [7, 1, 1, 2, 2],\n  8: [7, 5, 7, 5, 7],\n  9: [7, 5, 7, 1, 6],\n};\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp01((v - a) / (b - a));\n  return t * t * (3 - 2 * t);\n}\n\nfunction mix(a, b, t) {\n  return a + (b - a) * t;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frame = new Float32Array(N * 3);\n  P.sx = new Float32Array(SHOTS);\n  P.sy = new Float32Array(SHOTS);\n  P.pos = [0, 0, 0];\n  // How far through the year, and seconds since the year turned.\n  P.phase = 0.6;\n  P.turned = 9;\n  P.clock = 0;\n  P.pin = null;\n  P.hour = 12;\n  P.lat = 52.5 * DEG;\n  P.orb = EARTH.slice();\n  P.speed = 20;\n  P.az0 = Math.PI;\n  // Fair-weather cumulus round the compass, each a few round puffs on a\n  // flat base: azimuth, base altitude and the puffs' offsets and radii, in\n  // degrees.\n  P.clouds = [];\n  for (let c = 0; c \u003c CLOUDS; c++) {\n    const wide = 5 + 9 * Math.random();\n    const tall = 2 + 2.6 * Math.random();\n    const puffs = [];\n    const n = 3 + Math.floor(Math.random() * 3);\n    for (let k = 0; k \u003c n; k++) {\n      const r = tall * (0.5 + 0.5 * Math.sin((Math.PI * (k + 0.5)) / n)) * (0.75 + 0.4 * Math.random());\n      puffs.push([((k + 0.5) / n - 0.5) * wide, r * 0.75, r]);\n    }\n    P.clouds.push({ az: (c + 0.3 + 0.4 * Math.random()) * (360 / CLOUDS), base: 1.2 + 2.2 * Math.random(), wide, puffs });\n  }\n  P.wind = 0;\n  P.colW = new Float32Array(W);\n  P.glowT = new Float32Array(GLOW);\n  for (let i = 0; i \u003c GLOW; i++) {\n    const d = Math.sqrt(i);\n    P.glowT[i] = 0.5 * Math.exp(-d / 5) + 0.22 * Math.exp(-d / 20);\n  }\n}\n\n// The Sun at a share `ph` of the year: where it shows on the panel, and its\n// altitude in degrees, into out.\nfunction sunAt(P, ph, out) {\n  const e = P.orb[0];\n  const eps = P.orb[1];\n  const lp = P.orb[2];\n  // Mean anomaly, then Kepler's equation for the eccentric anomaly.\n  const M = TAU * (ph - PERI);\n  let E = M;\n  for (let i = 0; i \u003c 6; i++) E = M + e * Math.sin(E);\n  const nu = 2 * Math.atan2(Math.sqrt(1 + e) * Math.sin(E / 2), Math.sqrt(1 - e) * Math.cos(E / 2));\n  // The Sun's ecliptic longitude, its declination and right ascension.\n  const lam = nu + lp;\n  const dec = Math.asin(Math.sin(eps) * Math.sin(lam));\n  const ra = Math.atan2(Math.cos(eps) * Math.sin(lam), Math.cos(lam));\n  // The equation of time: the mean Sun's longitude against the true Sun's\n  // right ascension, the gap between clock and sundial.\n  let eot = M + lp - ra;\n  eot -= Math.round(eot / TAU) * TAU;\n  // The hour angle at this clock time, then altitude and azimuth.\n  const ha = (P.hour - 12) * 15 * DEG + eot;\n  const sl = Math.sin(P.lat);\n  const cl = Math.cos(P.lat);\n  const up = sl * Math.sin(dec) + cl * Math.cos(dec) * Math.cos(ha);\n  const north = cl * Math.sin(dec) - sl * Math.cos(dec) * Math.cos(ha);\n  const east = -Math.cos(dec) * Math.sin(ha);\n  const alt = Math.asin(Math.max(-1, Math.min(1, up)));\n  let daz = Math.atan2(east, north) - P.az0;\n  daz -= Math.round(daz / TAU) * TAU;\n  out[0] = CX + (daz / DEG) * Math.cos(alt) * K;\n  out[1] = HZ - (alt / DEG) * K;\n  out[2] = alt / DEG;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.clock += dt;\n  P.hour = 12 + 4 * Math.max(-1, Math.min(1, k[0]));\n  P.lat = (52.5 + 12.5 * Math.max(-1, Math.min(1, k[2]))) * DEG;\n  const w = clamp01((k[3] - 0.1) / 0.9);\n  for (let i = 0; i \u003c 4; i++) P.orb[i] = mix(EARTH[i], MARS[i], w);\n  // Kepler's third law: the year grows as the orbit's size to the power 1.5.\n  P.year = YEAR * Math.pow(P.orb[3], 1.5);\n  P.speed = 10 * Math.max(0.2, Math.min(3, k[1]));\n  // The camera faces where the Sun stands at this hour at an equinox.\n  const ha = (P.hour - 12) * 15 * DEG;\n  const sl = Math.sin(P.lat);\n  P.az0 = Math.atan2(-Math.sin(ha), -sl * Math.cos(ha));\n\n  P.phase += (dt * P.speed) / P.year;\n  P.turned += dt;\n  // The clouds drift east to west at a degree every two seconds.\n  P.wind += dt * 0.5;\n  if (P.phase >= 1) {\n    P.phase -= 1;\n    P.turned = 0;\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.pin = { ph: P.phase, age: 0 };\n  if (P.pin) {\n    P.pin.age += dt;\n    if (P.pin.age > 4) P.pin = null;\n  }\n\n  for (let j = 0; j \u003c SHOTS; j++) {\n    sunAt(P, (j + 0.5) / SHOTS, P.pos);\n    P.sx[j] = P.pos[0];\n    P.sy[j] = P.pos[1];\n  }\n  sunAt(P, P.phase, P.pos);\n  P.sun = [P.pos[0], P.pos[1], P.pos[2]];\n}\n\n// A disc of the Sun with a soft edge, laid over the frame with opacity op.\nfunction disc(out, x, y, rad, op, r, g, b) {\n  for (let yy = Math.floor(y - rad - 1); yy \u003c= Math.ceil(y + rad + 1); yy++) {\n    if (yy \u003c 0 || yy >= HZ) continue;\n    for (let xx = Math.floor(x - rad - 1); xx \u003c= Math.ceil(x + rad + 1); xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx + 0.5 - x;\n      const dy = yy + 0.5 - y;\n      const a = clamp01(rad + 0.5 - Math.sqrt(dx * dx + dy * dy)) * op;\n      if (a \u003c= 0) continue;\n      const p = (yy * W + xx) * 3;\n      out[p] += (r - out[p]) * a;\n      out[p + 1] += (g - out[p + 1]) * a;\n      out[p + 2] += (b - out[p + 2]) * a;\n    }\n  }\n}\n\n// Land on the horizon, in degrees, at azimuth az: a headland in the east, one\n// in the west, and the rock the lighthouse stands on a little east of south.\nfunction land(az) {\n  const a = az / DEG;\n  let h = 0;\n  if (a > 68 && a \u003c 122) h = Math.max(h, 2.6 * Math.sin(((a - 68) / 54) * Math.PI) ** 0.6 + 0.5 * Math.sin(a * 0.9));\n  if (a > 236 && a \u003c 294) h = Math.max(h, 3.2 * Math.sin(((a - 236) / 58) * Math.PI) ** 0.7 + 0.4 * Math.sin(a * 1.3));\n  if (a > 164.5 && a \u003c 171.5) h = Math.max(h, 1.1 * Math.sin(((a - 164.5) / 7) * Math.PI) ** 0.5);\n  return h;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const out = P.frame;\n  const sun = P.sun;\n  const hs = sun[2];\n  const t = P.clock;\n\n  // The sky's colours from the Sun's height: night, a low golden Sun, a pale\n  // hazy sky while the Sun is low, deep blue when it stands high.\n  const f = smooth(-7, 2, hs);\n  const g = smooth(2, 16, hs);\n  const q = smooth(14, 58, hs);\n  const zr = mix(mix(mix(4, 26, f), 34, g), 8, q);\n  const zg = mix(mix(mix(8, 34, f), 62, g), 34, q);\n  const zb = mix(mix(mix(28, 96, f), 134, g), 116, q);\n  const hr = mix(mix(mix(20, 214, f), 172, g), 64, q);\n  const hg = mix(mix(mix(22, 116, f), 156, g), 110, q);\n  const hb = mix(mix(mix(52, 74, f), 138, g), 174, q);\n  // Sunlight colour: orange low down, white-yellow high up.\n  const lr = 255;\n  const lg = mix(150, 228, g);\n  const lb = mix(70, 170, g);\n  const up = smooth(-3, 1, hs);\n\n  // Glare round the Sun from a table by squared distance, and a warmer\n  // horizon on the Sun's side while it is low.\n  const glowT = P.glowT;\n  const warm = (1 - g) * f * 0.35;\n  const colW = P.colW;\n  for (let x = 0; x \u003c W; x++) colW[x] = Math.exp(-Math.abs(x + 0.5 - sun[0]) / 26);\n  for (let y = 0; y \u003c HZ; y++) {\n    const alt = (HZ - y - 0.5) / K;\n    const v = Math.pow(clamp01(alt / 62), 0.55);\n    const br = mix(hr, zr, v);\n    const bg = mix(hg, zg, v);\n    const bb = mix(hb, zb, v);\n    const rowW = warm * Math.exp(-alt / 7);\n    const dy = y + 0.5 - sun[1];\n    const dy2 = dy * dy;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - sun[0];\n      const d2 = dx * dx + dy2;\n      const glow = Math.min(1, up * glowT[d2 \u003c GLOW ? d2 | 0 : GLOW - 1] + rowW * colW[x]);\n      const p = (y * W + x) * 3;\n      out[p] = br + (lr - br) * glow;\n      out[p + 1] = bg + (lg - bg) * glow;\n      out[p + 2] = bb + (lb - bb) * glow;\n    }\n  }\n\n  // Cumulus low over the sea, in the frame the exposures were laid over: lit\n  // on top in the sunlight's colour, grey underneath, flat at the base.\n  for (const cl of P.clouds) {\n    let daz = cl.az + P.wind - P.az0 / DEG;\n    daz -= Math.round(daz / 360) * 360;\n    const cx = CX + daz * K;\n    if (cx \u003c -cl.wide * K || cx > W + cl.wide * K) continue;\n    const baseY = HZ - cl.base * K;\n    let topY = baseY;\n    for (const pf of cl.puffs) topY = Math.min(topY, baseY - (pf[1] + pf[2]) * K);\n    for (let y = Math.max(0, Math.floor(topY - 1)); y \u003c Math.min(HZ, Math.ceil(baseY + 1)); y++) {\n      const py = y + 0.5;\n      const flat = clamp01(baseY - py + 0.5);\n      if (flat \u003c= 0) continue;\n      for (let x = Math.max(0, Math.floor(cx - cl.wide * K)); x \u003c Math.min(W, Math.ceil(cx + cl.wide * K)); x++) {\n        const px = x + 0.5;\n        let c = 0;\n        let lit = 0;\n        for (const pf of cl.puffs) {\n          const bx = cx + pf[0] * K;\n          const by = baseY - pf[1] * K;\n          const r = pf[2] * K;\n          const dx = px - bx;\n          const dy = py - by;\n          const d = Math.sqrt(dx * dx + dy * dy);\n          const a = clamp01(r + 0.5 - d);\n          if (a > c) {\n            c = a;\n            lit = clamp01(0.5 - dy / r);\n          }\n        }\n        c *= flat;\n        if (c \u003c= 0) continue;\n        const p = (y * W + x) * 3;\n        const cr = mix(hr * 0.78, mix(lr, 255, 0.4 + 0.4 * g), lit);\n        const cg = mix(hg * 0.78, mix(lg, 252, 0.4 + 0.4 * g), lit);\n        const cb = mix(hb * 0.82, mix(lb, 248, 0.4 + 0.4 * g), lit);\n        out[p] += (cr - out[p]) * c * 0.94;\n        out[p + 1] += (cg - out[p + 1]) * c * 0.94;\n        out[p + 2] += (cb - out[p + 2]) * c * 0.94;\n      }\n    }\n  }\n\n  // The exposures. Those already taken this year are bright; the rest are\n  // last year's, kept faint, and each fills in as its week comes round.\n  // At the turn of the year the whole eight fades back to that faint level.\n  const size = 1.6 / P.orb[3];\n  const faded = 0.32 + 0.68 * clamp01(1 - P.turned / 0.7);\n  for (let j = 0; j \u003c SHOTS; j++) {\n    const ph = (j + 0.5) / SHOTS;\n    const taken = ph \u003c= P.phase;\n    let op = taken ? 1 : faded;\n    let rad = size;\n    if (taken) {\n      // Seconds since this exposure: a flash as the shutter fires.\n      const age = ((P.phase - ph) * P.year) / P.speed;\n      const flash = clamp01(1 - age / 0.25);\n      rad += 0.9 * flash;\n    }\n    disc(out, P.sx[j], P.sy[j], rad, op, 255, 238, 196);\n  }\n  // The Sun itself, now.\n  disc(out, sun[0], sun[1], size + 0.6, 1, 255, 252, 236);\n\n  // The sea: it holds the horizon's light near the horizon and darkens\n  // towards the camera, with slow swell and the Sun's glitter path.\n  const depthR = mix(2, 4, g);\n  const depthG = mix(6, 16, g);\n  const depthB = mix(18, 40, g);\n  const sunUp = hs > -1;\n  for (let y = HZ; y \u003c H; y++) {\n    const k = (y - HZ + 0.5) / (H - HZ);\n    const s = Math.sqrt(k);\n    const br = mix(hr * 0.62, depthR, s);\n    const bg = mix(hg * 0.62, depthG, s);\n    const bb = mix(hb * 0.62, depthB, s);\n    const width = 0.7 + 6.5 * k;\n    // Distance out to sea: the wavelets crowd together toward the horizon.\n    const z = 1 / (k + 0.1);\n    const fx = 0.3 + 0.9 * k;\n    for (let x = 0; x \u003c W; x++) {\n      const along = Math.sin(x * fx * 0.5 + z * 0.8 + t * 0.7);\n      const swell = 0.8 + 0.3 * Math.sin(z * 3.3 - t * 1.4 + 0.7 * along) * (0.5 + 0.5 * Math.sin(x * fx * 1.3 - z * 2.1 + t * 0.5));\n      let r = br * swell;\n      let gg = bg * swell;\n      let b = bb * swell;\n      if (sunUp) {\n        const dx = (x + 0.5 - sun[0]) / width;\n        const path = Math.exp(-dx * dx) * up;\n        if (path > 0.01) {\n          const s1 = 0.5 + 0.5 * Math.sin(x * 2.3 + y * 3.1 + t * 4.7);\n          const s2 = 0.5 + 0.5 * Math.sin(x * 1.1 - y * 2.3 - t * 3.9 + 1.3);\n          const glint = path * (0.25 + 1.1 * Math.pow(s1 * s2, 3));\n          r += (lr - r) * Math.min(1, glint);\n          gg += (lg - gg) * Math.min(1, glint);\n          b += (lb - b) * Math.min(1, glint);\n        }\n      }\n      const p = (y * W + x) * 3;\n      out[p] = r;\n      out[p + 1] = gg;\n      out[p + 2] = b;\n    }\n  }\n\n  // Land along the horizon, hazed toward the sky's colour by distance.\n  const landR = mix(hr, 10, 0.62);\n  const landG = mix(hg, 16, 0.62);\n  const landB = mix(hb, 28, 0.62);\n  let tower = -1;\n  for (let x = 0; x \u003c W; x++) {\n    let az = P.az0 + (x + 0.5 - CX) / K * DEG;\n    az -= Math.floor(az / TAU) * TAU;\n    const h = land(az) * K;\n    if (Math.abs(az / DEG - 168) \u003c 0.5 / K) tower = x;\n    for (let y = Math.floor(HZ - h); y \u003c HZ; y++) {\n      const a = clamp01(HZ - h - y > 0 ? 0 : Math.min(1, h - (HZ - y - 1)));\n      const p = (y * W + x) * 3;\n      out[p] += (landR - out[p]) * a;\n      out[p + 1] += (landG - out[p + 1]) * a;\n      out[p + 2] += (landB - out[p + 2]) * a;\n    }\n  }\n  // The lighthouse: a white tower with a red band and a lantern that is lit\n  // while the Sun is low.\n  if (tower >= 0) {\n    const lamp = 1 - g;\n    for (let j = 0; j \u003c 12; j++) {\n      const y = HZ - 2 - j;\n      for (let x = tower - 1; x \u003c= tower; x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const p = (y * W + x) * 3;\n        let r = 222;\n        let gg = 226;\n        let b = 230;\n        if (j >= 4 && j \u003c= 6) {\n          r = 196;\n          gg = 40;\n          b = 40;\n        }\n        if (j >= 9) {\n          r = mix(40, 255, lamp);\n          gg = mix(40, 214, lamp);\n          b = mix(46, 130, lamp);\n        }\n        if (j === 11) {\n          r = 36;\n          gg = 30;\n          b = 30;\n        }\n        const shade = x === tower - 1 ? 1 : 0.72;\n        out[p] = r * shade;\n        out[p + 1] = gg * shade;\n        out[p + 2] = b * shade;\n      }\n    }\n  }\n\n  // A tap pins the day's date beside its place on the eight.\n  if (P.pin) {\n    const fade = clamp01(Math.min(P.pin.age / 0.2, (4 - P.pin.age) / 0.5));\n    sunAt(P, P.pin.ph, P.pos);\n    let text;\n    if (P.orb[3] \u003c 1.001) {\n      let d = Math.floor(P.pin.ph * YEAR);\n      let m = 0;\n      while (m \u003c 11 && d >= MDAYS[m]) d -= MDAYS[m++];\n      text = MONTHS[m] + \" \" + (d + 1);\n    } else text = \"DAY \" + (Math.floor(P.pin.ph * P.year) + 1);\n    const tw = text.length * 4 - 1;\n    const tx = P.pos[0] + 6 + tw \u003c W - 1 ? Math.round(P.pos[0] + 6) : Math.round(P.pos[0] - 6 - tw);\n    const ty = Math.round(Math.max(2, Math.min(HZ - 8, P.pos[1] - 2)));\n    for (let c = 0; c \u003c text.length; c++) {\n      const glyph = FONT[text[c]];\n      if (!glyph) continue;\n      for (let row = 0; row \u003c 5; row++)\n        for (let col = 0; col \u003c 3; col++) {\n          if (!((glyph[row] >> (2 - col)) & 1)) continue;\n          const x = tx + c * 4 + col;\n          const y = ty + row;\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const p = (y * W + x) * 3;\n          out[p] += (255 - out[p]) * fade;\n          out[p + 1] += (255 - out[p + 1]) * fade;\n          out[p + 2] += (255 - out[p + 2]) * fade;\n        }\n    }\n    // A ring round that day's Sun.\n    for (let a = 0; a \u003c 24; a++) {\n      const x = Math.floor(P.pos[0] + 3.6 * Math.cos((a * TAU) / 24));\n      const y = Math.floor(P.pos[1] + 3.6 * Math.sin((a * TAU) / 24));\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= HZ) continue;\n      const p = (y * W + x) * 3;\n      out[p] += (255 - out[p]) * fade * 0.8;\n      out[p + 1] += (255 - out[p + 1]) * fade * 0.8;\n      out[p + 2] += (255 - out[p + 2]) * fade * 0.8;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=-1..1, Speed=0.2..3, Latitude=-1..1, Orbit=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":-1,"max":1,"about":"The clock time the shutter fires: noon in the middle stands the eight upright over the south; 8 in the morning at the left end turns the camera to the east-south-east and lays the eight over, summer end high on the left, and 4 in the afternoon at the right end does the same to the west. The sky is lit by the Sun at that hour, golden on winter mornings and evenings."},{"name":"Speed","min":0.2,"max":3,"about":"Days a second: 20 at 2, so a year passes in 18 seconds; 2 at the bottom, 30 at the top."},{"name":"Latitude","min":-1,"max":1,"about":"Where the camera stands: 52.5 degrees north in the middle, 40 at the left end where the noon eight climbs to 73 degrees, 65 at the right end where the winter Sun barely clears the sea."},{"name":"Orbit","min":0,"max":1,"about":"The first tenth is Earth's orbit; turned up it moves out to Mars's, more eccentric and more tilted, with a longer year and a smaller Sun, and the eight swells into a teardrop."}],"start":[0,2,0,0.06],"measures":{"motion":0.0266,"detail":0.0181,"edges":0.3039,"complexity":1.0442,"coverage":0.9984,"colour":0.1966,"drift":0.0308},"knobResponse":[0.0776,0.085,0.0971,0.0827]},{"slug":"ant-farm","title":"Ant Farm","family":"insect","round":17,"note":"유리 사이에 모래를 채운 개미집에서 수확개미들이 바닥의 여왕 방까지 굴을 파고, 판 모래를 입구 옆 더미에 올리거나 오래된 막다른 굴에 다시 다져 넣어요. K1 을 누르면 뚜껑으로 물을 줘서 젖은 모래 얼룩이 천천히 아래로 번져요.","idea":"Harvester ants in a tall ant farm dig tunnels to the floor, carry the sand up or pack it into old dead ends, and tend the queen's eggs while the damp of each watering sinks through.","buttons":"K1 tap waters the farm through the lid, as the keeper does every 35 seconds at Speed 2.","code":"// ===== Patternflow pattern =====\n// Title:   Ant Farm\n// Family:  insect\n// Idea:    Harvester ants in a tall ant farm dig tunnels to the floor, carry the sand up or pack it into old dead ends, and tend the queen's eggs while the damp of each watering sinks through.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after the sand-and-glass ant farms sold as toys since the 1950s\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Fill=0..1, Speed=0.2..3, Ants=40..120, Lamp=0..1\n//\n// Knob 1: Fill. Pale sand at 0, red clay in the middle, and at 1 the blue gel of a gel farm, lit from its base.\n// Knob 2: Speed. The time-lapse: at 2 an ant walks ten LEDs a second and a digger cuts five LEDs of tunnel a second.\n// Knob 3: Ants. Workers from 40 to 120; a bigger colony digs more faces at once and keeps a bigger nest.\n// Knob 4: Lamp. From daylight to the red lamp keepers watch by, because ants do not see red.\n// Buttons: K1 tap waters the farm through the lid, as the keeper does every 35 seconds at Speed 2.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the green frame: lid rows 0 and 1, base rows 126 and 127, sides columns 0 and 63.\nconst TOP = 2;\nconst BASE = 125;\n// The sand line as the farm was filled, and the highest a heap may climb.\nconst SURF = 30;\nconst PEAK = 20;\nconst MAXN = 2400;\nconst MAXA = 120;\n// Cells: the room over the sand, sand, hole, heap, frame, and sand packed back into a tunnel.\nconst [AIR, SAND, HOLE, HEAP, FRAME, PACK] = [0, 1, 2, 3, 4, 5];\n// An ant walks the tunnels, walks on the surface, or works in one place.\nconst [WALK, ON_TOP, WORK] = [0, 1, 2];\nconst [DIG, DUMP, PACKIT, NURSE, FORAGE, IDLE] = [0, 1, 2, 3, 4, 5];\n// Forty ants keep a fifth of the sand hollow, and every forty more another 0.08: below that\n// they open new tunnels, near it they pack what they cut into old dead ends.\nconst HOLLOW = 0.12;\n// LEDs a second per unit of Speed, walking and cutting.\nconst PACE = 5;\nconst CUT = 2.5;\n// Seconds the colony works before the first frame.\nconst PRE = 6;\n// Watering every WATER seconds of colony time; the damp sinks SINK rows a second and spreads.\nconst WATER = 70;\nconst SINK = 4;\nconst SPREAD = 2;\n// Sand, red clay and blue gel: colour, grain, then the tones of a hole, a hole's rim, a heap\n// and packed sand, and how much the gel's base lights it.\nconst FILLS = [\n  [206, 170, 112, 1, 0.24, 0.8, 1.1, 0.92, 0],\n  [186, 66, 38, 0.7, 0.22, 0.76, 1.18, 0.88, 0],\n  [30, 112, 232, 0, 0.18, 1.4, 1.45, 1.2, 1],\n];\nconst FRAME_C = [30, 92, 46];\n// An ant from gaster to head; eggs, larvae, pupae; the apple.\nconst ANT = [[108, 36, 20], [138, 50, 24], [158, 62, 28]];\nconst BROOD = [[238, 234, 218], [226, 212, 172], [204, 182, 130]];\nconst SKIN = [200, 36, 30];\nconst FLESH = [238, 226, 168];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nconst q4 = (v) => clamp(Math.round(v / 4) * 4, 0, 255);\n\n// ---- Tunnels: a tree of nodes a LED apart, each the centre of a disc of hole. Node 0 is the\n// surface, its children the entrances. ----\n\nfunction addNode(P, up, x, y, r) {\n  const n = P.free.length ? P.free.pop() : P.nn \u003c MAXN ? P.nn++ : -1;\n  if (n \u003c 0) return -1;\n  P.nx[n] = x;\n  P.ny[n] = y;\n  P.par[n] = up;\n  P.dep[n] = up \u003c 0 ? 0 : P.dep[up] + 1;\n  P.kids[n] = P.perm[n] = 0;\n  P.alive[n] = 1;\n  P.rad[n] = r;\n  P.born[n] = P.t;\n  if (up >= 0) P.kids[up]++;\n  P.cut = carve(P, n, 1);\n  return n;\n}\n\n// Opens (s = 1) or packs (s = -1) a node's disc; returns the cells that changed.\nfunction carve(P, n, s) {\n  const r = P.rad[n];\n  const cx = P.nx[n];\n  const cy = P.ny[n];\n  let changed = 0;\n  for (let y = Math.ceil(cy - r); y \u003c= cy + r; y++)\n    for (let x = Math.ceil(cx - r); x \u003c= cx + r; x++) {\n      if (x \u003c 1 || x > 62 || y \u003c TOP || y > BASE || (x - cx) ** 2 + (y - cy) ** 2 > r * r + 0.01) continue;\n      const p = y * W + x;\n      const t = P.type[p];\n      if (s > 0) {\n        P.own[p]++;\n        if (t !== AIR && t !== HOLE) (P.type[p] = HOLE), changed++;\n      } else if (--P.own[p] === 0 && t === HOLE) (P.type[p] = PACK), changed++;\n    }\n  P.holes += s * changed;\n  return changed;\n}\n\nfunction route(P, a, b) {\n  const { par, dep } = P;\n  const up = [];\n  const down = [];\n  while (dep[a] > dep[b]) up.push(a), (a = par[a]);\n  while (dep[b] > dep[a]) down.push(b), (b = par[b]);\n  while (a !== b) up.push(a), (a = par[a]), down.push(b), (b = par[b]);\n  up.push(a);\n  return up.concat(down.reverse());\n}\n\n// Sand a face can cut: inside the frame, off the floor, five rows down unless a shaft.\nfunction solid(P, x, y, shaft) {\n  const ix = Math.round(x);\n  const iy = Math.round(y);\n  if (ix \u003c 3 || ix > 60 || iy > BASE - 2 || iy \u003c P.ground[ix] + (shaft ? 0 : 5)) return false;\n  const t = P.type[iy * W + ix];\n  return t === SAND || t === PACK;\n}\n\n// One LED of tunnel at a face. It wanders, leans back to the way it was started and turns\n// from a hole or the frame four LEDs ahead; boxed in, it stops.\nfunction grow(P, t) {\n  const n = t.n;\n  const x = P.nx[n];\n  const y = P.ny[n];\n  let a = t.a + (Math.random() - 0.5) * 0.5;\n  a += (t.pref - a) * 0.12;\n  const ok = (g, d) => solid(P, x + Math.cos(g) * d, y + Math.sin(g) * d, t.goal > 0);\n  if (!ok(a, 4) || !ok(a, 3)) {\n    const l = ok(a - 0.7, 4);\n    const r = ok(a + 0.7, 4);\n    if (l && (!r || Math.random() \u003c 0.5)) a -= 0.7;\n    else if (r) a += 0.7;\n    else if (!ok(a, 2.2)) return finish(P, t);\n  }\n  t.a = a;\n  const m = addNode(P, n, x + Math.cos(a), y + Math.sin(a), t.r);\n  if (m \u003c 0) return finish(P, t);\n  if (t.goal > 0) P.perm[m] = 1;\n  t.n = m;\n  if (--t.left \u003c= 0 || (t.goal > 0 && P.ny[m] >= t.goal)) finish(P, t);\n  return P.cut;\n}\n\nfunction finish(P, t) {\n  if (t.role && makeChamber(P, t)) return 0;\n  t.dead = true;\n  P.tips.splice(P.tips.indexOf(t), 1);\n  return 0;\n}\n\n// A chamber: a flat-floored oval the tunnel opens into, dug out from its door.\nfunction makeChamber(P, t) {\n  const n = t.n;\n  for (let rx = t.role === \"queen\" ? 9 : 7; rx >= 4; rx--) {\n    const ry = rx > 6 ? 3.4 : 2.8;\n    const cx = P.nx[n] + Math.cos(t.a) * (rx - 1.5);\n    const cy = P.ny[n] + Math.sin(t.a) * (ry - 1);\n    if (cx - rx \u003c 3 || cx + rx > 60 || cy + ry > BASE - 1 || cy - ry \u003c P.ground[Math.round(cx)] + 5) continue;\n    t.room = { n, cx, cy, rx, ry, p: 0, role: t.role, id: P.rooms.length + 1 };\n    P.rooms.push(t.room);\n    P.perm[n] = P.door[n] = 1;\n    t.role = \"\";\n    return true;\n  }\n  return false;\n}\n\nfunction dig(P, c, p) {\n  c.p = Math.min(1, p);\n  let changed = 0;\n  for (let y = Math.ceil(c.cy - c.ry); y \u003c= c.cy + c.ry * 0.6; y++)\n    for (let x = Math.ceil(c.cx - c.rx); x \u003c= c.cx + c.rx; x++) {\n      const q = y * W + x;\n      if (P.room[q] || ((x - c.cx) / c.rx) ** 2 + ((y - c.cy) / c.ry) ** 2 > c.p) continue;\n      P.room[q] = c.id;\n      P.own[q]++;\n      if (P.type[q] !== HOLE) (P.type[q] = HOLE), changed++;\n    }\n  P.holes += changed;\n  return changed;\n}\n\nfunction cutStep(P, t) {\n  const c = t.room;\n  if (!c) return grow(P, t);\n  const cells = dig(P, c, c.p + 3 / (Math.PI * c.rx * c.ry));\n  if (c.p >= 1) finish(P, t);\n  return cells;\n}\n\n// A side tunnel from a node, sideways and down, not where the sand ahead is a quarter hollow.\nfunction sprout(P, deep) {\n  for (let k = 0; k \u003c 16; k++) {\n    const n = 3 + Math.floor(Math.random() * (P.nn - 3));\n    if (!P.alive[n] || P.door[n] || P.kids[n] > 1 || P.ny[n] \u003c Math.max(SURF + 6, deep) || P.ny[n] > BASE - 6) continue;\n    const right = P.nx[n] \u003c 18 ? true : P.nx[n] > 46 ? false : Math.random() \u003c 0.5;\n    const a = right ? 0.05 + 0.85 * Math.random() : Math.PI - 0.05 - 0.85 * Math.random();\n    const ax = P.nx[n] + Math.cos(a) * 6;\n    const ay = P.ny[n] + Math.sin(a) * 6;\n    if (!solid(P, P.nx[n] + Math.cos(a) * 3.5, P.ny[n] + Math.sin(a) * 3.5, false)) continue;\n    let near = 0;\n    for (let y = -5; y \u003c= 5; y++) for (let x = -5; x \u003c= 5; x++) near += P.type[clamp(Math.round(ay) + y, 0, H - 1) * W + clamp(Math.round(ax) + x, 0, W - 1)] === HOLE;\n    if (near > 30) continue;\n    const role = P.rooms.length \u003c 7 && Math.random() \u003c 0.18 ? \"store\" : \"\";\n    const t = { n, a, pref: a, left: 10 + Math.floor(Math.random() * 30), r: 1.25, goal: 0, role, room: null, busy: -1, dead: false };\n    P.tips.push(t);\n    return t;\n  }\n  return null;\n}\n\nfunction floorCells(P, c) {\n  const out = [];\n  for (let y = Math.ceil(c.cy - c.ry); y \u003c= c.cy + c.ry; y++)\n    for (let x = Math.ceil(c.cx - c.rx); x \u003c= c.cx + c.rx; x++) if (P.room[y * W + x] === c.id && P.type[(y + 1) * W + x] !== HOLE) out.push(x, y);\n  return out;\n}\n\nfunction lay(P, c, kind, count) {\n  const fl = floorCells(P, c);\n  const m = fl.length / 2;\n  const s = Math.floor(Math.random() * m);\n  for (let i = 0; i \u003c count; i++) {\n    const j = ((s + i + Math.floor(Math.random() * 3)) % m) * 2;\n    P.brood.push(fl[j], fl[j + 1] - (i % 3 === 2 ? 1 : 0), kind);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const k of [\"nx\", \"ny\", \"rad\", \"born\"]) P[k] = new Float32Array(MAXN);\n  for (const k of [\"par\", \"dep\"]) P[k] = new Int32Array(MAXN);\n  for (const k of [\"kids\", \"alive\", \"perm\", \"door\"]) P[k] = new Uint8Array(MAXN);\n  for (const k of [\"type\", \"own\", \"room\"]) P[k] = new Uint8Array(N);\n  for (const k of [\"tex\", \"wet\", \"wet2\"]) P[k] = new Float32Array(N);\n  P.ground = new Int16Array(W);\n  P.buf = new Float32Array(N * 3);\n  Object.assign(P, { nn: 0, free: [], holes: 0, tips: [], rooms: [], brood: [], sproutT: 0, started: false, count: 40, t: 0, drip: 0, dx: 32, water: 4 });\n  const ph = Math.random() * 6;\n  let soil = 0;\n  for (let x = 0; x \u003c W; x++) P.ground[x] = Math.round(SURF + 1.2 * Math.sin(x * 0.13 + ph) + 0.8 * Math.sin(x * 0.41 + 2 * ph));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      P.type[p] = y \u003c TOP || y > BASE || x \u003c 1 || x > 62 ? FRAME : y \u003c P.ground[x] ? AIR : SAND;\n      if (P.type[p] === SAND) soil++;\n      // Dark mineral grains and a few pale ones.\n      const h = Math.random();\n      P.tex[p] = h \u003c 0.1 ? -0.2 : h \u003c 0.22 ? -0.08 : h > 0.94 ? 0.12 : 0;\n    }\n  P.soil = soil;\n  P.target = 0.2 * soil;\n  addNode(P, -1, -1, -1, 0);\n  // Two shafts: the left one to the queen near the floor, the right one to the larder.\n  for (const [ex, goal, role] of [\n    [13 + Math.floor(Math.random() * 6), BASE - 16, \"queen\"],\n    [42 + Math.floor(Math.random() * 6), 68 + Math.random() * 8, \"larder\"],\n  ]) {\n    const e = addNode(P, 0, ex, P.ground[ex], 1.5);\n    P.perm[e] = 1;\n    P.tips.push({ n: e, a: Math.PI / 2, pref: Math.PI / 2 + (ex \u003c 32 ? -0.12 : 0.12), left: 200, r: 1.5, goal, role, room: null, busy: -1, dead: false });\n  }\n  // What the colony has dug already: shafts, chambers, a nursery and side tunnels; the seven\n  // still growing are the faces the panel opens on.\n  for (let i = 0; i \u003c 400 && P.tips.length; i++) for (const t of P.tips.slice()) cutStep(P, t);\n  for (let k = 0, t; k \u003c 40 && P.rooms.length \u003c 3; k++)\n    if ((t = sprout(P, 76))) for (Object.assign(t, { role: \"nursery\", left: 12 }); !t.dead; ) cutStep(P, t);\n  for (let i = 0; i \u003c 3000 && P.holes \u003c P.target * 0.9; i++) {\n    if (P.tips.length \u003c 7 && i % 9 === 0) sprout(P, 0);\n    for (const t of P.tips.slice()) cutStep(P, t);\n  }\n  while (P.tips.length \u003c 7 && sprout(P, 0));\n  const role = (r, d) => P.rooms.find((c) => c.role === r) || d;\n  P.queen = role(\"queen\", P.rooms[0]);\n  P.larder = role(\"larder\", P.rooms[P.rooms.length - 1]);\n  P.nursery = role(\"nursery\", P.queen);\n  for (const [c, kind, n] of [[P.queen, 0, 10], [P.queen, 1, 4], [P.nursery, 1, 6], [P.nursery, 2, 7]]) lay(P, c, kind, n);\n  const qf = floorCells(P, P.queen);\n  P.qy = qf.length ? qf[1] : P.queen.cy;\n  P.fx = 28 + Math.floor(Math.random() * 3);\n  P.ants = [];\n  for (let i = 0; i \u003c MAXA; i++) {\n    const at = 3 + Math.floor(Math.random() * (P.nn - 3));\n    P.ants.push({ i, x: P.nx[at], y: P.ny[at], hx: 1, hy: 0, mode: WORK, path: [at], pi: 0, f: 0, at, task: IDLE, carry: 0, load: 0, t: Math.random() * 2 });\n  }\n  // A digger at each face and six nurses with the queen.\n  P.tips.forEach((t, j) => Object.assign(P.ants[(t.busy = j)], { at: t.n, task: DIG, arg: t, t: 1 + 4 * Math.random() }));\n  for (let j = 10; j \u003c 16; j++) Object.assign(P.ants[j], { at: P.queen.n, task: NURSE, arg: P.queen, x: P.queen.cx, y: P.queen.cy });\n}\n\n// ---- The ants ----\n\nfunction goTo(P, a, from, to, task, arg) {\n  Object.assign(a, { task, arg, path: route(P, from, to), pi: 0, f: 0, at: from, mode: WALK });\n  if (from === 0) toTop(P, a, to === 0 ? -1 : 1);\n}\n\n// Out on the sand, to the next entrance on the path or to the job up here.\nfunction toTop(P, a, next) {\n  if (a.at > 0) a.x = P.nx[a.at];\n  a.mode = ON_TOP;\n  a.sn = next;\n  a.sg = next >= 0 ? P.nx[a.path[next]] : a.arg;\n  a.at = 0;\n}\n\nfunction fillable(P, k) {\n  return k > 2 && P.alive[k] && !P.kids[k] && !P.perm[k] && !P.tips.some((t) => t.n === k);\n}\n\n// The nearest dead end four seconds old or more.\nfunction nearLeaf(P, a) {\n  let best = -1;\n  let bd = 1e9;\n  for (let k = 3; k \u003c P.nn; k++) {\n    if (P.born[k] > P.t - 4 || !fillable(P, k)) continue;\n    const d = route(P, a.at, k).length;\n    if (d \u003c bd) (bd = d), (best = k);\n  }\n  return best;\n}\n\n// Whether another ant is cutting this face or on its way to.\nconst taken = (P, t, i) => t.busy >= 0 && t.busy !== i && t.busy \u003c P.count && P.ants[t.busy].arg === t && P.ants[t.busy].task === DIG;\n\nconst idle = (a, s) => Object.assign(a, { mode: WORK, task: IDLE, t: s });\n\nfunction plan(P, a) {\n  const from = a.at;\n  if (a.carry === 1) {\n    // A load of sand: into a dead end near by, or up to a heap by the entrance.\n    const leaf = P.holes > P.target - 40 ? nearLeaf(P, a) : -1;\n    if (leaf > 0) return goTo(P, a, from, leaf, PACKIT, leaf);\n    let e = from > 0 ? from : a.x \u003c 32 ? 1 : 2;\n    while (P.dep[e] > 1) e = P.par[e];\n    return goTo(P, a, from, 0, DUMP, clamp(Math.round(P.nx[e] + (Math.random() \u003c 0.5 ? -1 : 1) * (4 + Math.random() * 7)), 3, 60));\n  }\n  if (a.carry === 2) return goTo(P, a, from, P.larder.n, NURSE, P.larder);\n  const r = Math.random();\n  if (r \u003c 0.6) {\n    // The nearest face nobody is cutting.\n    let open = null;\n    let bo = 1e9;\n    for (const t of P.tips) {\n      const d = route(P, from, t.n).length;\n      if (!taken(P, t, a.i) && d \u003c bo) (bo = d), (open = t);\n    }\n    if (open) return (open.busy = a.i), goTo(P, a, from, open.n, DIG, open);\n  }\n  // Otherwise up to the apple, or down to the brood or another chamber.\n  const q = Math.random();\n  if (q \u003c 0.25) return goTo(P, a, from, 0, FORAGE, P.fx + (Math.random() \u003c 0.5 ? -1 : 6));\n  const c = q \u003c 0.5 ? P.queen : q \u003c 0.7 ? P.nursery : P.rooms[Math.floor(Math.random() * P.rooms.length)];\n  goTo(P, a, from, c.n, NURSE, c);\n}\n\nfunction arrive(P, a) {\n  const t = a.arg;\n  if (a.task === DIG) {\n    if (t.dead || taken(P, t, a.i)) return plan(P, a);\n    if (t.n !== a.at) return goTo(P, a, a.at, t.n, DIG, t);\n    Object.assign(a, { mode: WORK, t: 2 + 4 * Math.random(), acc: 0, load: 0 });\n  } else if (a.task === DUMP) {\n    heap(P, a.arg, 1 + Math.min(3, Math.floor(a.load / 12)));\n    a.carry = a.load = 0;\n    idle(a, 0.3);\n  } else if (a.task === PACKIT) Object.assign(a, { mode: WORK, acc: 0 });\n  else if (a.task === NURSE) {\n    Object.assign(a, { carry: 0, mode: WORK, t: 2 + 5 * Math.random(), x: P.nx[a.at], y: P.ny[a.at] });\n    pick(P, a);\n  } else if (a.task === FORAGE) {\n    a.carry = 2;\n    plan(P, a);\n  } else idle(a, 0.3 + Math.random());\n}\n\nfunction pick(P, a) {\n  const c = a.arg;\n  a.wx = P.nx[c.n];\n  a.wy = P.ny[c.n];\n  for (let k = 0; k \u003c 8; k++) {\n    const x = Math.round(c.cx + (Math.random() * 2 - 1) * c.rx);\n    const y = Math.round(c.cy + (Math.random() * 2 - 1) * c.ry);\n    if (P.room[y * W + x] === c.id) return (a.wx = x), (a.wy = y);\n  }\n}\n\n// Packs the node the ant stands in and steps back one; false once the load is spent.\nfunction packOne(P, a) {\n  const k = a.at;\n  if (a.load \u003c= 0 || !fillable(P, k) || P.ants.some((b) => b !== a && (b.at === k || (b.mode === WALK && b.path[b.pi + 1] === k)))) return false;\n  a.load -= Math.max(1, carve(P, k, -1));\n  P.alive[k] = 0;\n  a.at = P.par[k];\n  P.kids[a.at]--;\n  for (const b of P.ants) {\n    if (b === a || (b.mode !== WALK && b.mode !== ON_TOP) || !b.path.slice(b.pi).some((n) => !P.alive[n])) continue;\n    if (b.mode === ON_TOP) b.at = 0;\n    plan(P, b);\n  }\n  P.free.push(k);\n  return true;\n}\n\n// Dropped sand rolls to the lower side while it is two grains higher, never into an entrance.\nfunction heap(P, x, n) {\n  for (let k = 0; k \u003c n; k++) {\n    let gx = x;\n    for (let s = 0; s \u003c 12; s++) {\n      const c = gx + (P.ground[gx - 1] > P.ground[gx + 1] ? -1 : 1);\n      if (c \u003c 2 || c > 61 || P.ground[c] \u003c= P.ground[gx] + 1 || Math.abs(c - P.nx[1]) \u003c 3 || Math.abs(c - P.nx[2]) \u003c 3) break;\n      gx = c;\n    }\n    const y = P.ground[gx] - 1;\n    if (y >= PEAK) (P.type[y * W + gx] = HEAP), (P.ground[gx] = y);\n  }\n}\n\n// The damp sinks, spreads, passes through the tunnels, stops at the floor and dries.\nfunction soak(P, ds) {\n  const { wet, type } = P;\n  const out = P.wet2;\n  const g = SINK * ds;\n  const d = SPREAD * ds;\n  const dry = 1 - ds / 40;\n  const damp = (q) => type[q] !== AIR && type[q] !== FRAME;\n  for (let p = TOP * W; p \u003c (BASE + 1) * W; p++) {\n    if (!damp(p)) {\n      out[p] = 0;\n      continue;\n    }\n    const w = wet[p];\n    const u = damp(p - W);\n    const f = damp(p + W);\n    const up = u ? wet[p - W] : w;\n    const dn = f ? wet[p + W] : w;\n    const l = damp(p - 1) ? wet[p - 1] : w;\n    const r = damp(p + 1) ? wet[p + 1] : w;\n    out[p] = (w + g * ((u ? up : 0) - (f ? w : 0)) + d * (l + r - 2 * w + 0.3 * (up + dn - 2 * w))) * dry;\n  }\n  P.wet2 = wet;\n  P.wet = out;\n}\n\nfunction step(P, dt, s) {\n  const v = PACE * s * dt;\n  const ds = dt * s;\n  P.t += ds;\n  P.target = P.soil * (HOLLOW + P.count / 500);\n  if (P.holes \u003c P.target && P.tips.length \u003c 3 + P.count / 10 && (P.sproutT -= ds) \u003c= 0) {\n    sprout(P, 0);\n    P.sproutT = 0.5;\n  }\n  if (P.t >= P.water) {\n    P.water = P.t + WATER;\n    P.drip = 3;\n    P.dx = 6 + Math.floor(Math.random() * 52);\n  }\n  if (P.drip > 0) {\n    P.drip -= ds;\n    for (let x = P.dx - 1; x \u003c= P.dx + 1; x++) P.wet[P.ground[x] * W + x] += 120 * ds;\n  }\n  soak(P, ds);\n  for (let i = 0; i \u003c P.count; i++) {\n    const a = P.ants[i];\n    const t = a.arg;\n    if (a.mode === WALK) {\n      // Node by node; at node 0 the path climbs out onto the sand.\n      for (a.f += v; ; a.f--, (a.at = a.path[++a.pi])) {\n        if (a.pi >= a.path.length - 1) arrive(P, a);\n        else if (a.path[a.pi + 1] === 0) toTop(P, a, a.pi + 2 \u003c a.path.length ? a.pi + 2 : -1);\n        else if (a.f >= 1) continue;\n        break;\n      }\n    } else if (a.mode === ON_TOP) {\n      const d = a.sg - a.x;\n      if (Math.abs(d) > v) (a.x += Math.sign(d) * v), (a.hx = Math.sign(d)), (a.hy = 0);\n      else if (a.sn \u003c 0) arrive(P, a);\n      else Object.assign(a, { x: a.sg, pi: a.sn, f: 0, at: a.path[a.sn], mode: WALK });\n    } else if (a.mode === WORK) {\n      a.t -= ds;\n      if (a.task === DIG) {\n        for (a.acc += CUT * ds; a.acc >= 1 && !t.dead; a.acc--) a.load += cutStep(P, t);\n        a.at = t.n;\n        if (a.t \u003c= 0 || t.dead) {\n          t.busy = -1;\n          a.carry = a.load > 0 ? 1 : 0;\n          plan(P, a);\n        }\n      } else if (a.task === PACKIT) {\n        for (a.acc += 2 * CUT * ds; a.acc >= 1; a.acc--)\n          if (!packOne(P, a)) {\n            a.carry = a.load = 0;\n            plan(P, a);\n            break;\n          }\n      } else if (a.task === NURSE) {\n        const dx = a.wx - a.x;\n        const dy = a.wy - a.y;\n        const d = Math.hypot(dx, dy);\n        if (d \u003c 0.6) {\n          if (a.t > 0) pick(P, a);\n          else if (Math.abs(a.wx - P.nx[a.at]) + Math.abs(a.wy - P.ny[a.at]) \u003c 0.1) plan(P, a);\n          else (a.wx = P.nx[a.at]), (a.wy = P.ny[a.at]);\n        } else {\n          const g = Math.min(d, v * 0.6) / d;\n          a.x += dx * g;\n          a.y += dy * g;\n          a.hx = dx / d;\n          a.hy = dy / d;\n        }\n      } else if (a.t \u003c= 0) plan(P, a);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 40, 0.06];\n  dt = Math.min(dt, 0.1);\n  const s = clamp(k[1], 0.05, 3);\n  P.count = clamp(Math.round(k[2]), 0, MAXA);\n  P.fill = clamp(k[0], 0, 1);\n  P.lamp = clamp(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.water = P.t;\n  if (!P.started) {\n    P.started = true;\n    for (let i = 0; i \u003c PRE * 30; i++) step(P, 1 / 30, s);\n  }\n  step(P, dt, s);\n}\n\n// ---- Drawing ----\n\nfunction put(buf, x, y, c, m) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 1 || x > 62 || y \u003c TOP || y > BASE) return;\n  for (let j = 0; j \u003c 3; j++) buf[(y * W + x) * 3 + j] = c[j] * m;\n}\n\n// Where an ant is and which way it faces.\nfunction where(P, a) {\n  if (a.mode === WALK && a.pi \u003c a.path.length - 1) {\n    const na = a.path[a.pi];\n    const nb = a.path[a.pi + 1];\n    a.hx = P.nx[nb] - P.nx[na];\n    a.hy = P.ny[nb] - P.ny[na];\n    a.x = P.nx[na] + a.hx * a.f;\n    a.y = P.ny[na] + a.hy * a.f;\n  } else if (a.at === 0) a.y = P.ground[clamp(Math.round(a.x), 1, 62)] - 1;\n  else if (a.mode === WORK && a.task !== NURSE) {\n    a.x = P.nx[a.at];\n    a.y = P.ny[a.at];\n    if (a.task === DIG) (a.hx = Math.cos(a.arg.a)), (a.hy = Math.sin(a.arg.a));\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  // Sand to clay as Fill passes 0.25, clay to gel as it passes 0.75.\n  const ramp = (a) => clamp((P.fill * 2 - a) / 0.3, 0, 1);\n  const wg = ramp(1.35);\n  const wc = ramp(0.35) - wg;\n  const [r0, g0, b0, grain, hole, rim, loose, pack, glow] = FILLS[0].map((v, j) => v * (1 - wc - wg) + FILLS[1][j] * wc + FILLS[2][j] * wg);\n  const fc = [r0, g0, b0];\n  const lamp = P.lamp;\n  const room = 1 - 0.8 * lamp;\n  const { buf, type } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const dep = clamp((y - SURF) / (BASE - SURF), 0, 1);\n    const shade = (1 - glow) * (1.04 - 0.1 * dep) + glow * (0.62 + 0.5 * dep * dep);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const t = type[p];\n      let c = fc;\n      let m;\n      if (t === FRAME) (c = FRAME_C), (m = y \u003c TOP || y > BASE ? 1 : 0.8);\n      else if (t === AIR) {\n        const u = (y - TOP) / (SURF - TOP);\n        c = [46 - 12 * u, 52 - 12 * u, 64 - 14 * u];\n        m = room;\n      } else {\n        m = (1 + grain * P.tex[p]) * shade * (1 - 0.5 * (1 - glow) * Math.min(1, 2 * P.wet[p]));\n        if (t === HOLE) {\n          // The far side of the tunnel: dark under the roof, lighter on the floor.\n          m *= hole;\n          if (type[p - W] !== HOLE && type[p - W] !== AIR) m *= 0.7;\n          if (type[p + W] !== HOLE) m *= 1.4;\n        } else {\n          if (t === HEAP) m *= loose;\n          else if (t === PACK) m *= pack;\n          if (type[p - 1] === HOLE || type[p + 1] === HOLE || type[p - W] === HOLE || type[p + W] === HOLE) m *= rim;\n        }\n      }\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] = c[j] * m;\n    }\n  }\n  // Grass in the top corners.\n  for (let k = 0; k \u003c 10; k++) {\n    const x0 = k \u003c 5 ? 3 + k : 51 + k;\n    const h = 5 + ((k * 7) % 5) + (k % 3) * 2;\n    for (let j = 0; j \u003c h; j++) {\n      const u = j / h;\n      put(buf, x0 + ((k % 5) - 2) * 0.18 * j + Math.sin(time * 1.3 + k) * u * u * 1.2, P.ground[x0] - 1 - j, [52 + 70 * u, 140 + 56 * u, 44 + 26 * u], room);\n    }\n  }\n  // The apple, skin up, and the drops while it is watered.\n  let gy = BASE;\n  for (let dx = 0; dx \u003c 6; dx++) gy = Math.min(gy, P.ground[P.fx + dx]);\n  for (let dy = 0; dy \u003c 4; dy++) for (let dx = dy > 2 ? 1 : 0; dx \u003c (dy > 2 ? 5 : 6); dx++) put(buf, P.fx + dx, gy - 1 - dy, dy > 2 ? SKIN : FLESH, 1);\n  if (P.drip > 0) put(buf, P.dx, TOP + ((P.t * 2.5) % 1) * (P.ground[P.dx] - TOP), [150, 190, 235], room);\n  for (let j = 0; j \u003c P.brood.length; j += 3) put(buf, P.brood[j], P.brood[j + 1], BROOD[P.brood[j + 2]], 1);\n  // The queen, twice a worker's length.\n  const qx = P.queen.cx + Math.sin(P.t * 0.15) * (P.queen.rx - 3);\n  const qd = Math.cos(P.t * 0.15) \u003c 0 ? -1 : 1;\n  for (let j = -2; j \u003c 3; j++) {\n    put(buf, qx + j * qd, P.qy - 1, ANT[j \u003c 1 ? 0 : j], 1);\n    if (j \u003c 1) put(buf, qx + j * qd, P.qy, ANT[0], 0.85);\n  }\n  for (let i = 0; i \u003c P.count; i++) {\n    const a = P.ants[i];\n    where(P, a);\n    for (let j = 0; j \u003c 3; j++) put(buf, a.x + (j - 1) * a.hx, a.y + (j - 1) * a.hy, ANT[j], 1);\n    if (a.carry) put(buf, a.x + 2 * a.hx, a.y + 2 * a.hy, a.carry === 1 ? fc : FLESH, a.carry === 1 ? 1.25 * loose : 1);\n  }\n  // By the red lamp each colour is seen as the light it sends back, in red.\n  for (let p = 0; p \u003c N; p++) {\n    let r = buf[p * 3];\n    let g = buf[p * 3 + 1];\n    let b = buf[p * 3 + 2];\n    if (lamp > 0) {\n      const lum = 0.42 * r + 0.43 * g + 0.15 * b;\n      r += lamp * (lum - r);\n      g += lamp * (lum * 0.08 - g);\n      b += lamp * (lum * 0.05 - b);\n    }\n    display.setPixel(p % W, (p / W) | 0, q4(r), q4(g), q4(b));\n  }\n}\n","layer":{"id":"layer-ant-farm","type":"code","name":"ant-farm","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ant Farm\n// Family:  insect\n// Idea:    Harvester ants in a tall ant farm dig tunnels to the floor, carry the sand up or pack it into old dead ends, and tend the queen's eggs while the damp of each watering sinks through.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after the sand-and-glass ant farms sold as toys since the 1950s\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Fill=0..1, Speed=0.2..3, Ants=40..120, Lamp=0..1\n//\n// Knob 1: Fill. Pale sand at 0, red clay in the middle, and at 1 the blue gel of a gel farm, lit from its base.\n// Knob 2: Speed. The time-lapse: at 2 an ant walks ten LEDs a second and a digger cuts five LEDs of tunnel a second.\n// Knob 3: Ants. Workers from 40 to 120; a bigger colony digs more faces at once and keeps a bigger nest.\n// Knob 4: Lamp. From daylight to the red lamp keepers watch by, because ants do not see red.\n// Buttons: K1 tap waters the farm through the lid, as the keeper does every 35 seconds at Speed 2.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the green frame: lid rows 0 and 1, base rows 126 and 127, sides columns 0 and 63.\nconst TOP = 2;\nconst BASE = 125;\n// The sand line as the farm was filled, and the highest a heap may climb.\nconst SURF = 30;\nconst PEAK = 20;\nconst MAXN = 2400;\nconst MAXA = 120;\n// Cells: the room over the sand, sand, hole, heap, frame, and sand packed back into a tunnel.\nconst [AIR, SAND, HOLE, HEAP, FRAME, PACK] = [0, 1, 2, 3, 4, 5];\n// An ant walks the tunnels, walks on the surface, or works in one place.\nconst [WALK, ON_TOP, WORK] = [0, 1, 2];\nconst [DIG, DUMP, PACKIT, NURSE, FORAGE, IDLE] = [0, 1, 2, 3, 4, 5];\n// Forty ants keep a fifth of the sand hollow, and every forty more another 0.08: below that\n// they open new tunnels, near it they pack what they cut into old dead ends.\nconst HOLLOW = 0.12;\n// LEDs a second per unit of Speed, walking and cutting.\nconst PACE = 5;\nconst CUT = 2.5;\n// Seconds the colony works before the first frame.\nconst PRE = 6;\n// Watering every WATER seconds of colony time; the damp sinks SINK rows a second and spreads.\nconst WATER = 70;\nconst SINK = 4;\nconst SPREAD = 2;\n// Sand, red clay and blue gel: colour, grain, then the tones of a hole, a hole's rim, a heap\n// and packed sand, and how much the gel's base lights it.\nconst FILLS = [\n  [206, 170, 112, 1, 0.24, 0.8, 1.1, 0.92, 0],\n  [186, 66, 38, 0.7, 0.22, 0.76, 1.18, 0.88, 0],\n  [30, 112, 232, 0, 0.18, 1.4, 1.45, 1.2, 1],\n];\nconst FRAME_C = [30, 92, 46];\n// An ant from gaster to head; eggs, larvae, pupae; the apple.\nconst ANT = [[108, 36, 20], [138, 50, 24], [158, 62, 28]];\nconst BROOD = [[238, 234, 218], [226, 212, 172], [204, 182, 130]];\nconst SKIN = [200, 36, 30];\nconst FLESH = [238, 226, 168];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nconst q4 = (v) => clamp(Math.round(v / 4) * 4, 0, 255);\n\n// ---- Tunnels: a tree of nodes a LED apart, each the centre of a disc of hole. Node 0 is the\n// surface, its children the entrances. ----\n\nfunction addNode(P, up, x, y, r) {\n  const n = P.free.length ? P.free.pop() : P.nn \u003c MAXN ? P.nn++ : -1;\n  if (n \u003c 0) return -1;\n  P.nx[n] = x;\n  P.ny[n] = y;\n  P.par[n] = up;\n  P.dep[n] = up \u003c 0 ? 0 : P.dep[up] + 1;\n  P.kids[n] = P.perm[n] = 0;\n  P.alive[n] = 1;\n  P.rad[n] = r;\n  P.born[n] = P.t;\n  if (up >= 0) P.kids[up]++;\n  P.cut = carve(P, n, 1);\n  return n;\n}\n\n// Opens (s = 1) or packs (s = -1) a node's disc; returns the cells that changed.\nfunction carve(P, n, s) {\n  const r = P.rad[n];\n  const cx = P.nx[n];\n  const cy = P.ny[n];\n  let changed = 0;\n  for (let y = Math.ceil(cy - r); y \u003c= cy + r; y++)\n    for (let x = Math.ceil(cx - r); x \u003c= cx + r; x++) {\n      if (x \u003c 1 || x > 62 || y \u003c TOP || y > BASE || (x - cx) ** 2 + (y - cy) ** 2 > r * r + 0.01) continue;\n      const p = y * W + x;\n      const t = P.type[p];\n      if (s > 0) {\n        P.own[p]++;\n        if (t !== AIR && t !== HOLE) (P.type[p] = HOLE), changed++;\n      } else if (--P.own[p] === 0 && t === HOLE) (P.type[p] = PACK), changed++;\n    }\n  P.holes += s * changed;\n  return changed;\n}\n\nfunction route(P, a, b) {\n  const { par, dep } = P;\n  const up = [];\n  const down = [];\n  while (dep[a] > dep[b]) up.push(a), (a = par[a]);\n  while (dep[b] > dep[a]) down.push(b), (b = par[b]);\n  while (a !== b) up.push(a), (a = par[a]), down.push(b), (b = par[b]);\n  up.push(a);\n  return up.concat(down.reverse());\n}\n\n// Sand a face can cut: inside the frame, off the floor, five rows down unless a shaft.\nfunction solid(P, x, y, shaft) {\n  const ix = Math.round(x);\n  const iy = Math.round(y);\n  if (ix \u003c 3 || ix > 60 || iy > BASE - 2 || iy \u003c P.ground[ix] + (shaft ? 0 : 5)) return false;\n  const t = P.type[iy * W + ix];\n  return t === SAND || t === PACK;\n}\n\n// One LED of tunnel at a face. It wanders, leans back to the way it was started and turns\n// from a hole or the frame four LEDs ahead; boxed in, it stops.\nfunction grow(P, t) {\n  const n = t.n;\n  const x = P.nx[n];\n  const y = P.ny[n];\n  let a = t.a + (Math.random() - 0.5) * 0.5;\n  a += (t.pref - a) * 0.12;\n  const ok = (g, d) => solid(P, x + Math.cos(g) * d, y + Math.sin(g) * d, t.goal > 0);\n  if (!ok(a, 4) || !ok(a, 3)) {\n    const l = ok(a - 0.7, 4);\n    const r = ok(a + 0.7, 4);\n    if (l && (!r || Math.random() \u003c 0.5)) a -= 0.7;\n    else if (r) a += 0.7;\n    else if (!ok(a, 2.2)) return finish(P, t);\n  }\n  t.a = a;\n  const m = addNode(P, n, x + Math.cos(a), y + Math.sin(a), t.r);\n  if (m \u003c 0) return finish(P, t);\n  if (t.goal > 0) P.perm[m] = 1;\n  t.n = m;\n  if (--t.left \u003c= 0 || (t.goal > 0 && P.ny[m] >= t.goal)) finish(P, t);\n  return P.cut;\n}\n\nfunction finish(P, t) {\n  if (t.role && makeChamber(P, t)) return 0;\n  t.dead = true;\n  P.tips.splice(P.tips.indexOf(t), 1);\n  return 0;\n}\n\n// A chamber: a flat-floored oval the tunnel opens into, dug out from its door.\nfunction makeChamber(P, t) {\n  const n = t.n;\n  for (let rx = t.role === \"queen\" ? 9 : 7; rx >= 4; rx--) {\n    const ry = rx > 6 ? 3.4 : 2.8;\n    const cx = P.nx[n] + Math.cos(t.a) * (rx - 1.5);\n    const cy = P.ny[n] + Math.sin(t.a) * (ry - 1);\n    if (cx - rx \u003c 3 || cx + rx > 60 || cy + ry > BASE - 1 || cy - ry \u003c P.ground[Math.round(cx)] + 5) continue;\n    t.room = { n, cx, cy, rx, ry, p: 0, role: t.role, id: P.rooms.length + 1 };\n    P.rooms.push(t.room);\n    P.perm[n] = P.door[n] = 1;\n    t.role = \"\";\n    return true;\n  }\n  return false;\n}\n\nfunction dig(P, c, p) {\n  c.p = Math.min(1, p);\n  let changed = 0;\n  for (let y = Math.ceil(c.cy - c.ry); y \u003c= c.cy + c.ry * 0.6; y++)\n    for (let x = Math.ceil(c.cx - c.rx); x \u003c= c.cx + c.rx; x++) {\n      const q = y * W + x;\n      if (P.room[q] || ((x - c.cx) / c.rx) ** 2 + ((y - c.cy) / c.ry) ** 2 > c.p) continue;\n      P.room[q] = c.id;\n      P.own[q]++;\n      if (P.type[q] !== HOLE) (P.type[q] = HOLE), changed++;\n    }\n  P.holes += changed;\n  return changed;\n}\n\nfunction cutStep(P, t) {\n  const c = t.room;\n  if (!c) return grow(P, t);\n  const cells = dig(P, c, c.p + 3 / (Math.PI * c.rx * c.ry));\n  if (c.p >= 1) finish(P, t);\n  return cells;\n}\n\n// A side tunnel from a node, sideways and down, not where the sand ahead is a quarter hollow.\nfunction sprout(P, deep) {\n  for (let k = 0; k \u003c 16; k++) {\n    const n = 3 + Math.floor(Math.random() * (P.nn - 3));\n    if (!P.alive[n] || P.door[n] || P.kids[n] > 1 || P.ny[n] \u003c Math.max(SURF + 6, deep) || P.ny[n] > BASE - 6) continue;\n    const right = P.nx[n] \u003c 18 ? true : P.nx[n] > 46 ? false : Math.random() \u003c 0.5;\n    const a = right ? 0.05 + 0.85 * Math.random() : Math.PI - 0.05 - 0.85 * Math.random();\n    const ax = P.nx[n] + Math.cos(a) * 6;\n    const ay = P.ny[n] + Math.sin(a) * 6;\n    if (!solid(P, P.nx[n] + Math.cos(a) * 3.5, P.ny[n] + Math.sin(a) * 3.5, false)) continue;\n    let near = 0;\n    for (let y = -5; y \u003c= 5; y++) for (let x = -5; x \u003c= 5; x++) near += P.type[clamp(Math.round(ay) + y, 0, H - 1) * W + clamp(Math.round(ax) + x, 0, W - 1)] === HOLE;\n    if (near > 30) continue;\n    const role = P.rooms.length \u003c 7 && Math.random() \u003c 0.18 ? \"store\" : \"\";\n    const t = { n, a, pref: a, left: 10 + Math.floor(Math.random() * 30), r: 1.25, goal: 0, role, room: null, busy: -1, dead: false };\n    P.tips.push(t);\n    return t;\n  }\n  return null;\n}\n\nfunction floorCells(P, c) {\n  const out = [];\n  for (let y = Math.ceil(c.cy - c.ry); y \u003c= c.cy + c.ry; y++)\n    for (let x = Math.ceil(c.cx - c.rx); x \u003c= c.cx + c.rx; x++) if (P.room[y * W + x] === c.id && P.type[(y + 1) * W + x] !== HOLE) out.push(x, y);\n  return out;\n}\n\nfunction lay(P, c, kind, count) {\n  const fl = floorCells(P, c);\n  const m = fl.length / 2;\n  const s = Math.floor(Math.random() * m);\n  for (let i = 0; i \u003c count; i++) {\n    const j = ((s + i + Math.floor(Math.random() * 3)) % m) * 2;\n    P.brood.push(fl[j], fl[j + 1] - (i % 3 === 2 ? 1 : 0), kind);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const k of [\"nx\", \"ny\", \"rad\", \"born\"]) P[k] = new Float32Array(MAXN);\n  for (const k of [\"par\", \"dep\"]) P[k] = new Int32Array(MAXN);\n  for (const k of [\"kids\", \"alive\", \"perm\", \"door\"]) P[k] = new Uint8Array(MAXN);\n  for (const k of [\"type\", \"own\", \"room\"]) P[k] = new Uint8Array(N);\n  for (const k of [\"tex\", \"wet\", \"wet2\"]) P[k] = new Float32Array(N);\n  P.ground = new Int16Array(W);\n  P.buf = new Float32Array(N * 3);\n  Object.assign(P, { nn: 0, free: [], holes: 0, tips: [], rooms: [], brood: [], sproutT: 0, started: false, count: 40, t: 0, drip: 0, dx: 32, water: 4 });\n  const ph = Math.random() * 6;\n  let soil = 0;\n  for (let x = 0; x \u003c W; x++) P.ground[x] = Math.round(SURF + 1.2 * Math.sin(x * 0.13 + ph) + 0.8 * Math.sin(x * 0.41 + 2 * ph));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      P.type[p] = y \u003c TOP || y > BASE || x \u003c 1 || x > 62 ? FRAME : y \u003c P.ground[x] ? AIR : SAND;\n      if (P.type[p] === SAND) soil++;\n      // Dark mineral grains and a few pale ones.\n      const h = Math.random();\n      P.tex[p] = h \u003c 0.1 ? -0.2 : h \u003c 0.22 ? -0.08 : h > 0.94 ? 0.12 : 0;\n    }\n  P.soil = soil;\n  P.target = 0.2 * soil;\n  addNode(P, -1, -1, -1, 0);\n  // Two shafts: the left one to the queen near the floor, the right one to the larder.\n  for (const [ex, goal, role] of [\n    [13 + Math.floor(Math.random() * 6), BASE - 16, \"queen\"],\n    [42 + Math.floor(Math.random() * 6), 68 + Math.random() * 8, \"larder\"],\n  ]) {\n    const e = addNode(P, 0, ex, P.ground[ex], 1.5);\n    P.perm[e] = 1;\n    P.tips.push({ n: e, a: Math.PI / 2, pref: Math.PI / 2 + (ex \u003c 32 ? -0.12 : 0.12), left: 200, r: 1.5, goal, role, room: null, busy: -1, dead: false });\n  }\n  // What the colony has dug already: shafts, chambers, a nursery and side tunnels; the seven\n  // still growing are the faces the panel opens on.\n  for (let i = 0; i \u003c 400 && P.tips.length; i++) for (const t of P.tips.slice()) cutStep(P, t);\n  for (let k = 0, t; k \u003c 40 && P.rooms.length \u003c 3; k++)\n    if ((t = sprout(P, 76))) for (Object.assign(t, { role: \"nursery\", left: 12 }); !t.dead; ) cutStep(P, t);\n  for (let i = 0; i \u003c 3000 && P.holes \u003c P.target * 0.9; i++) {\n    if (P.tips.length \u003c 7 && i % 9 === 0) sprout(P, 0);\n    for (const t of P.tips.slice()) cutStep(P, t);\n  }\n  while (P.tips.length \u003c 7 && sprout(P, 0));\n  const role = (r, d) => P.rooms.find((c) => c.role === r) || d;\n  P.queen = role(\"queen\", P.rooms[0]);\n  P.larder = role(\"larder\", P.rooms[P.rooms.length - 1]);\n  P.nursery = role(\"nursery\", P.queen);\n  for (const [c, kind, n] of [[P.queen, 0, 10], [P.queen, 1, 4], [P.nursery, 1, 6], [P.nursery, 2, 7]]) lay(P, c, kind, n);\n  const qf = floorCells(P, P.queen);\n  P.qy = qf.length ? qf[1] : P.queen.cy;\n  P.fx = 28 + Math.floor(Math.random() * 3);\n  P.ants = [];\n  for (let i = 0; i \u003c MAXA; i++) {\n    const at = 3 + Math.floor(Math.random() * (P.nn - 3));\n    P.ants.push({ i, x: P.nx[at], y: P.ny[at], hx: 1, hy: 0, mode: WORK, path: [at], pi: 0, f: 0, at, task: IDLE, carry: 0, load: 0, t: Math.random() * 2 });\n  }\n  // A digger at each face and six nurses with the queen.\n  P.tips.forEach((t, j) => Object.assign(P.ants[(t.busy = j)], { at: t.n, task: DIG, arg: t, t: 1 + 4 * Math.random() }));\n  for (let j = 10; j \u003c 16; j++) Object.assign(P.ants[j], { at: P.queen.n, task: NURSE, arg: P.queen, x: P.queen.cx, y: P.queen.cy });\n}\n\n// ---- The ants ----\n\nfunction goTo(P, a, from, to, task, arg) {\n  Object.assign(a, { task, arg, path: route(P, from, to), pi: 0, f: 0, at: from, mode: WALK });\n  if (from === 0) toTop(P, a, to === 0 ? -1 : 1);\n}\n\n// Out on the sand, to the next entrance on the path or to the job up here.\nfunction toTop(P, a, next) {\n  if (a.at > 0) a.x = P.nx[a.at];\n  a.mode = ON_TOP;\n  a.sn = next;\n  a.sg = next >= 0 ? P.nx[a.path[next]] : a.arg;\n  a.at = 0;\n}\n\nfunction fillable(P, k) {\n  return k > 2 && P.alive[k] && !P.kids[k] && !P.perm[k] && !P.tips.some((t) => t.n === k);\n}\n\n// The nearest dead end four seconds old or more.\nfunction nearLeaf(P, a) {\n  let best = -1;\n  let bd = 1e9;\n  for (let k = 3; k \u003c P.nn; k++) {\n    if (P.born[k] > P.t - 4 || !fillable(P, k)) continue;\n    const d = route(P, a.at, k).length;\n    if (d \u003c bd) (bd = d), (best = k);\n  }\n  return best;\n}\n\n// Whether another ant is cutting this face or on its way to.\nconst taken = (P, t, i) => t.busy >= 0 && t.busy !== i && t.busy \u003c P.count && P.ants[t.busy].arg === t && P.ants[t.busy].task === DIG;\n\nconst idle = (a, s) => Object.assign(a, { mode: WORK, task: IDLE, t: s });\n\nfunction plan(P, a) {\n  const from = a.at;\n  if (a.carry === 1) {\n    // A load of sand: into a dead end near by, or up to a heap by the entrance.\n    const leaf = P.holes > P.target - 40 ? nearLeaf(P, a) : -1;\n    if (leaf > 0) return goTo(P, a, from, leaf, PACKIT, leaf);\n    let e = from > 0 ? from : a.x \u003c 32 ? 1 : 2;\n    while (P.dep[e] > 1) e = P.par[e];\n    return goTo(P, a, from, 0, DUMP, clamp(Math.round(P.nx[e] + (Math.random() \u003c 0.5 ? -1 : 1) * (4 + Math.random() * 7)), 3, 60));\n  }\n  if (a.carry === 2) return goTo(P, a, from, P.larder.n, NURSE, P.larder);\n  const r = Math.random();\n  if (r \u003c 0.6) {\n    // The nearest face nobody is cutting.\n    let open = null;\n    let bo = 1e9;\n    for (const t of P.tips) {\n      const d = route(P, from, t.n).length;\n      if (!taken(P, t, a.i) && d \u003c bo) (bo = d), (open = t);\n    }\n    if (open) return (open.busy = a.i), goTo(P, a, from, open.n, DIG, open);\n  }\n  // Otherwise up to the apple, or down to the brood or another chamber.\n  const q = Math.random();\n  if (q \u003c 0.25) return goTo(P, a, from, 0, FORAGE, P.fx + (Math.random() \u003c 0.5 ? -1 : 6));\n  const c = q \u003c 0.5 ? P.queen : q \u003c 0.7 ? P.nursery : P.rooms[Math.floor(Math.random() * P.rooms.length)];\n  goTo(P, a, from, c.n, NURSE, c);\n}\n\nfunction arrive(P, a) {\n  const t = a.arg;\n  if (a.task === DIG) {\n    if (t.dead || taken(P, t, a.i)) return plan(P, a);\n    if (t.n !== a.at) return goTo(P, a, a.at, t.n, DIG, t);\n    Object.assign(a, { mode: WORK, t: 2 + 4 * Math.random(), acc: 0, load: 0 });\n  } else if (a.task === DUMP) {\n    heap(P, a.arg, 1 + Math.min(3, Math.floor(a.load / 12)));\n    a.carry = a.load = 0;\n    idle(a, 0.3);\n  } else if (a.task === PACKIT) Object.assign(a, { mode: WORK, acc: 0 });\n  else if (a.task === NURSE) {\n    Object.assign(a, { carry: 0, mode: WORK, t: 2 + 5 * Math.random(), x: P.nx[a.at], y: P.ny[a.at] });\n    pick(P, a);\n  } else if (a.task === FORAGE) {\n    a.carry = 2;\n    plan(P, a);\n  } else idle(a, 0.3 + Math.random());\n}\n\nfunction pick(P, a) {\n  const c = a.arg;\n  a.wx = P.nx[c.n];\n  a.wy = P.ny[c.n];\n  for (let k = 0; k \u003c 8; k++) {\n    const x = Math.round(c.cx + (Math.random() * 2 - 1) * c.rx);\n    const y = Math.round(c.cy + (Math.random() * 2 - 1) * c.ry);\n    if (P.room[y * W + x] === c.id) return (a.wx = x), (a.wy = y);\n  }\n}\n\n// Packs the node the ant stands in and steps back one; false once the load is spent.\nfunction packOne(P, a) {\n  const k = a.at;\n  if (a.load \u003c= 0 || !fillable(P, k) || P.ants.some((b) => b !== a && (b.at === k || (b.mode === WALK && b.path[b.pi + 1] === k)))) return false;\n  a.load -= Math.max(1, carve(P, k, -1));\n  P.alive[k] = 0;\n  a.at = P.par[k];\n  P.kids[a.at]--;\n  for (const b of P.ants) {\n    if (b === a || (b.mode !== WALK && b.mode !== ON_TOP) || !b.path.slice(b.pi).some((n) => !P.alive[n])) continue;\n    if (b.mode === ON_TOP) b.at = 0;\n    plan(P, b);\n  }\n  P.free.push(k);\n  return true;\n}\n\n// Dropped sand rolls to the lower side while it is two grains higher, never into an entrance.\nfunction heap(P, x, n) {\n  for (let k = 0; k \u003c n; k++) {\n    let gx = x;\n    for (let s = 0; s \u003c 12; s++) {\n      const c = gx + (P.ground[gx - 1] > P.ground[gx + 1] ? -1 : 1);\n      if (c \u003c 2 || c > 61 || P.ground[c] \u003c= P.ground[gx] + 1 || Math.abs(c - P.nx[1]) \u003c 3 || Math.abs(c - P.nx[2]) \u003c 3) break;\n      gx = c;\n    }\n    const y = P.ground[gx] - 1;\n    if (y >= PEAK) (P.type[y * W + gx] = HEAP), (P.ground[gx] = y);\n  }\n}\n\n// The damp sinks, spreads, passes through the tunnels, stops at the floor and dries.\nfunction soak(P, ds) {\n  const { wet, type } = P;\n  const out = P.wet2;\n  const g = SINK * ds;\n  const d = SPREAD * ds;\n  const dry = 1 - ds / 40;\n  const damp = (q) => type[q] !== AIR && type[q] !== FRAME;\n  for (let p = TOP * W; p \u003c (BASE + 1) * W; p++) {\n    if (!damp(p)) {\n      out[p] = 0;\n      continue;\n    }\n    const w = wet[p];\n    const u = damp(p - W);\n    const f = damp(p + W);\n    const up = u ? wet[p - W] : w;\n    const dn = f ? wet[p + W] : w;\n    const l = damp(p - 1) ? wet[p - 1] : w;\n    const r = damp(p + 1) ? wet[p + 1] : w;\n    out[p] = (w + g * ((u ? up : 0) - (f ? w : 0)) + d * (l + r - 2 * w + 0.3 * (up + dn - 2 * w))) * dry;\n  }\n  P.wet2 = wet;\n  P.wet = out;\n}\n\nfunction step(P, dt, s) {\n  const v = PACE * s * dt;\n  const ds = dt * s;\n  P.t += ds;\n  P.target = P.soil * (HOLLOW + P.count / 500);\n  if (P.holes \u003c P.target && P.tips.length \u003c 3 + P.count / 10 && (P.sproutT -= ds) \u003c= 0) {\n    sprout(P, 0);\n    P.sproutT = 0.5;\n  }\n  if (P.t >= P.water) {\n    P.water = P.t + WATER;\n    P.drip = 3;\n    P.dx = 6 + Math.floor(Math.random() * 52);\n  }\n  if (P.drip > 0) {\n    P.drip -= ds;\n    for (let x = P.dx - 1; x \u003c= P.dx + 1; x++) P.wet[P.ground[x] * W + x] += 120 * ds;\n  }\n  soak(P, ds);\n  for (let i = 0; i \u003c P.count; i++) {\n    const a = P.ants[i];\n    const t = a.arg;\n    if (a.mode === WALK) {\n      // Node by node; at node 0 the path climbs out onto the sand.\n      for (a.f += v; ; a.f--, (a.at = a.path[++a.pi])) {\n        if (a.pi >= a.path.length - 1) arrive(P, a);\n        else if (a.path[a.pi + 1] === 0) toTop(P, a, a.pi + 2 \u003c a.path.length ? a.pi + 2 : -1);\n        else if (a.f >= 1) continue;\n        break;\n      }\n    } else if (a.mode === ON_TOP) {\n      const d = a.sg - a.x;\n      if (Math.abs(d) > v) (a.x += Math.sign(d) * v), (a.hx = Math.sign(d)), (a.hy = 0);\n      else if (a.sn \u003c 0) arrive(P, a);\n      else Object.assign(a, { x: a.sg, pi: a.sn, f: 0, at: a.path[a.sn], mode: WALK });\n    } else if (a.mode === WORK) {\n      a.t -= ds;\n      if (a.task === DIG) {\n        for (a.acc += CUT * ds; a.acc >= 1 && !t.dead; a.acc--) a.load += cutStep(P, t);\n        a.at = t.n;\n        if (a.t \u003c= 0 || t.dead) {\n          t.busy = -1;\n          a.carry = a.load > 0 ? 1 : 0;\n          plan(P, a);\n        }\n      } else if (a.task === PACKIT) {\n        for (a.acc += 2 * CUT * ds; a.acc >= 1; a.acc--)\n          if (!packOne(P, a)) {\n            a.carry = a.load = 0;\n            plan(P, a);\n            break;\n          }\n      } else if (a.task === NURSE) {\n        const dx = a.wx - a.x;\n        const dy = a.wy - a.y;\n        const d = Math.hypot(dx, dy);\n        if (d \u003c 0.6) {\n          if (a.t > 0) pick(P, a);\n          else if (Math.abs(a.wx - P.nx[a.at]) + Math.abs(a.wy - P.ny[a.at]) \u003c 0.1) plan(P, a);\n          else (a.wx = P.nx[a.at]), (a.wy = P.ny[a.at]);\n        } else {\n          const g = Math.min(d, v * 0.6) / d;\n          a.x += dx * g;\n          a.y += dy * g;\n          a.hx = dx / d;\n          a.hy = dy / d;\n        }\n      } else if (a.t \u003c= 0) plan(P, a);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 40, 0.06];\n  dt = Math.min(dt, 0.1);\n  const s = clamp(k[1], 0.05, 3);\n  P.count = clamp(Math.round(k[2]), 0, MAXA);\n  P.fill = clamp(k[0], 0, 1);\n  P.lamp = clamp(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.water = P.t;\n  if (!P.started) {\n    P.started = true;\n    for (let i = 0; i \u003c PRE * 30; i++) step(P, 1 / 30, s);\n  }\n  step(P, dt, s);\n}\n\n// ---- Drawing ----\n\nfunction put(buf, x, y, c, m) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 1 || x > 62 || y \u003c TOP || y > BASE) return;\n  for (let j = 0; j \u003c 3; j++) buf[(y * W + x) * 3 + j] = c[j] * m;\n}\n\n// Where an ant is and which way it faces.\nfunction where(P, a) {\n  if (a.mode === WALK && a.pi \u003c a.path.length - 1) {\n    const na = a.path[a.pi];\n    const nb = a.path[a.pi + 1];\n    a.hx = P.nx[nb] - P.nx[na];\n    a.hy = P.ny[nb] - P.ny[na];\n    a.x = P.nx[na] + a.hx * a.f;\n    a.y = P.ny[na] + a.hy * a.f;\n  } else if (a.at === 0) a.y = P.ground[clamp(Math.round(a.x), 1, 62)] - 1;\n  else if (a.mode === WORK && a.task !== NURSE) {\n    a.x = P.nx[a.at];\n    a.y = P.ny[a.at];\n    if (a.task === DIG) (a.hx = Math.cos(a.arg.a)), (a.hy = Math.sin(a.arg.a));\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  // Sand to clay as Fill passes 0.25, clay to gel as it passes 0.75.\n  const ramp = (a) => clamp((P.fill * 2 - a) / 0.3, 0, 1);\n  const wg = ramp(1.35);\n  const wc = ramp(0.35) - wg;\n  const [r0, g0, b0, grain, hole, rim, loose, pack, glow] = FILLS[0].map((v, j) => v * (1 - wc - wg) + FILLS[1][j] * wc + FILLS[2][j] * wg);\n  const fc = [r0, g0, b0];\n  const lamp = P.lamp;\n  const room = 1 - 0.8 * lamp;\n  const { buf, type } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const dep = clamp((y - SURF) / (BASE - SURF), 0, 1);\n    const shade = (1 - glow) * (1.04 - 0.1 * dep) + glow * (0.62 + 0.5 * dep * dep);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const t = type[p];\n      let c = fc;\n      let m;\n      if (t === FRAME) (c = FRAME_C), (m = y \u003c TOP || y > BASE ? 1 : 0.8);\n      else if (t === AIR) {\n        const u = (y - TOP) / (SURF - TOP);\n        c = [46 - 12 * u, 52 - 12 * u, 64 - 14 * u];\n        m = room;\n      } else {\n        m = (1 + grain * P.tex[p]) * shade * (1 - 0.5 * (1 - glow) * Math.min(1, 2 * P.wet[p]));\n        if (t === HOLE) {\n          // The far side of the tunnel: dark under the roof, lighter on the floor.\n          m *= hole;\n          if (type[p - W] !== HOLE && type[p - W] !== AIR) m *= 0.7;\n          if (type[p + W] !== HOLE) m *= 1.4;\n        } else {\n          if (t === HEAP) m *= loose;\n          else if (t === PACK) m *= pack;\n          if (type[p - 1] === HOLE || type[p + 1] === HOLE || type[p - W] === HOLE || type[p + W] === HOLE) m *= rim;\n        }\n      }\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] = c[j] * m;\n    }\n  }\n  // Grass in the top corners.\n  for (let k = 0; k \u003c 10; k++) {\n    const x0 = k \u003c 5 ? 3 + k : 51 + k;\n    const h = 5 + ((k * 7) % 5) + (k % 3) * 2;\n    for (let j = 0; j \u003c h; j++) {\n      const u = j / h;\n      put(buf, x0 + ((k % 5) - 2) * 0.18 * j + Math.sin(time * 1.3 + k) * u * u * 1.2, P.ground[x0] - 1 - j, [52 + 70 * u, 140 + 56 * u, 44 + 26 * u], room);\n    }\n  }\n  // The apple, skin up, and the drops while it is watered.\n  let gy = BASE;\n  for (let dx = 0; dx \u003c 6; dx++) gy = Math.min(gy, P.ground[P.fx + dx]);\n  for (let dy = 0; dy \u003c 4; dy++) for (let dx = dy > 2 ? 1 : 0; dx \u003c (dy > 2 ? 5 : 6); dx++) put(buf, P.fx + dx, gy - 1 - dy, dy > 2 ? SKIN : FLESH, 1);\n  if (P.drip > 0) put(buf, P.dx, TOP + ((P.t * 2.5) % 1) * (P.ground[P.dx] - TOP), [150, 190, 235], room);\n  for (let j = 0; j \u003c P.brood.length; j += 3) put(buf, P.brood[j], P.brood[j + 1], BROOD[P.brood[j + 2]], 1);\n  // The queen, twice a worker's length.\n  const qx = P.queen.cx + Math.sin(P.t * 0.15) * (P.queen.rx - 3);\n  const qd = Math.cos(P.t * 0.15) \u003c 0 ? -1 : 1;\n  for (let j = -2; j \u003c 3; j++) {\n    put(buf, qx + j * qd, P.qy - 1, ANT[j \u003c 1 ? 0 : j], 1);\n    if (j \u003c 1) put(buf, qx + j * qd, P.qy, ANT[0], 0.85);\n  }\n  for (let i = 0; i \u003c P.count; i++) {\n    const a = P.ants[i];\n    where(P, a);\n    for (let j = 0; j \u003c 3; j++) put(buf, a.x + (j - 1) * a.hx, a.y + (j - 1) * a.hy, ANT[j], 1);\n    if (a.carry) put(buf, a.x + 2 * a.hx, a.y + 2 * a.hy, a.carry === 1 ? fc : FLESH, a.carry === 1 ? 1.25 * loose : 1);\n  }\n  // By the red lamp each colour is seen as the light it sends back, in red.\n  for (let p = 0; p \u003c N; p++) {\n    let r = buf[p * 3];\n    let g = buf[p * 3 + 1];\n    let b = buf[p * 3 + 2];\n    if (lamp > 0) {\n      const lum = 0.42 * r + 0.43 * g + 0.15 * b;\n      r += lamp * (lum - r);\n      g += lamp * (lum * 0.08 - g);\n      b += lamp * (lum * 0.05 - b);\n    }\n    display.setPixel(p % W, (p / W) | 0, q4(r), q4(g), q4(b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Fill=0..1, Speed=0.2..3, Ants=40..120, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Fill","min":0,"max":1,"about":"Pale sand at 0, red clay in the middle, and at 1 the blue gel of a gel farm, lit from its base."},{"name":"Speed","min":0.2,"max":3,"about":"The time-lapse: at 2 an ant walks ten LEDs a second and a digger cuts five LEDs of tunnel a second."},{"name":"Ants","min":40,"max":120,"about":"Workers from 40 to 120; a bigger colony digs more faces at once and keeps a bigger nest."},{"name":"Lamp","min":0,"max":1,"about":"From daylight to the red lamp keepers watch by, because ants do not see red."}],"start":[0,2,40,0.06],"measures":{"motion":0.0748,"detail":0.0791,"edges":0.3143,"complexity":0.7035,"coverage":0.9824,"colour":0.2295,"drift":0.0611},"knobResponse":[0.2509,0.0544,0.0511,0.2616]},{"slug":"aquarium","title":"Aquarium","family":"pixel","round":2,"note":"높은 수조에 흰동가리, 블루탱, 엔젤피시, 네온테트라 떼가 꼬리를 흔들며 헤엄쳐요. 모래 위 보물상자가 몇 초마다 뚜껑을 열어 공기 방울을 뱉고, K1 을 누르면 먹이가 떨어져 물고기가 몰려와요.","idea":"A tall tank in hand-drawn sprites: clownfish, a tang, an angelfish and a school of neon tetras wag their tails across it and turn at the glass, weed sways from the sand, bubbles climb from a stone and the surface throws a moving net of light down the water.","buttons":"K1 tap drops a pinch of food at the surface, and every fish goes for it.","code":"// ===== Patternflow pattern =====\n// Title:   Aquarium\n// Family:  pixel\n// Idea:    A tall tank in hand-drawn sprites: clownfish, a tang, an angelfish and a school of neon tetras wag their tails across it and turn at the glass, weed sways from the sand, bubbles climb from a stone and the surface throws a moving net of light down the water.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Swim=0.2..4, Fish=6..18, Light=-1..1\n//\n// Knob 1: Water. The tint of the water, from clear blue through lagoon teal and planted green to tea-brown blackwater and violet.\n// Knob 2: Swim. How fast the whole tank moves, fish, weed, bubbles and light, from slow motion to a feeding rush.\n// Knob 3: Fish. How many fish live in the tank; new ones swim in from the side and spare ones swim out.\n// Knob 4: Light. Below 0 the lamp dims towards night and the deep water goes dark; above 0 the sun is out and the net of light reaches the sand.\n// Buttons: K1 tap drops a pinch of food at the surface, and every fish goes for it.\n\nconst W = 64;\nconst H = 128;\n// The water line; above it is the air under the lid.\nconst SURFACE = 7;\n// The mean height of the sand.\nconst FLOOR = 117;\nconst MAX_FISH = 18;\nconst FLAKES = 24;\nconst BUBBLES = 40;\nconst WEEDS = 6;\nconst SIN_N = 1024;\nconst SIN_K = SIN_N / (Math.PI * 2);\n\nconst CLOWN = 0;\nconst TANG = 1;\nconst ANGEL = 2;\nconst TETRA = 3;\n\n// Sprites face right. Two frames each: the tail spread, then edge-on.\nconst KINDS = [\n  {\n    pal: { o: 0xff6810, w: 0xf6f4ee, f: 0xc83c06, k: 0x101010 },\n    speed: 9,\n    a: [\n      \"......ff....\",\n      \"f...wooowo..\",\n      \"ff.owooowok.\",\n      \"fffowooowooo\",\n      \"ff.owooowoo.\",\n      \"f...wooowo..\",\n      \"......f.....\",\n    ],\n    b: [\n      \"......ff....\",\n      \"....wooowo..\",\n      \"f..owooowok.\",\n      \"ffffwooowooo\",\n      \"f..owooowoo.\",\n      \"....wooowo..\",\n      \".....f......\",\n    ],\n  },\n  {\n    pal: { b: 0x1e5cff, n: 0x0c1c78, y: 0xffd21a, l: 0x6aa8ff, k: 0x080808 },\n    speed: 11,\n    a: [\n      \".....lllll...\",\n      \"y..lbbbbbbb..\",\n      \"yy.bnnnbbbbb.\",\n      \"yyybbbnnnbbkb\",\n      \"yyybbbbbnnbbb\",\n      \"yy.bbbbbbnbb.\",\n      \"y..lbbbbbbb..\",\n      \".....lllll...\",\n    ],\n    b: [\n      \".....lllll...\",\n      \"...lbbbbbbb..\",\n      \"y..bnnnbbbbb.\",\n      \"yyybbbnnnbbkb\",\n      \"yyybbbbbnnbbb\",\n      \"y..bbbbbbnbb.\",\n      \"...lbbbbbbb..\",\n      \".....lllll...\",\n    ],\n  },\n  {\n    pal: { s: 0xdce6f0, d: 0x46505e, f: 0xa8bccc, k: 0x0a0a0a, a: 0xf2cc50 },\n    speed: 6,\n    a: [\n      \"...f.......\",\n      \"...ff......\",\n      \"....ff.....\",\n      \"....fss....\",\n      \"...sdssa...\",\n      \"f.ssdssds..\",\n      \"ffssdssdsks\",\n      \"f.ssdssds..\",\n      \"...sdsss...\",\n      \"....fss....\",\n      \"....ff.....\",\n      \"...ff......\",\n      \"...f.......\",\n    ],\n    b: [\n      \"....f......\",\n      \"...ff......\",\n      \"...ff......\",\n      \"....fss....\",\n      \"...sdssa...\",\n      \"..ssdssds..\",\n      \"fsssdssdsks\",\n      \"..ssdssds..\",\n      \"...sdsss...\",\n      \"....fss....\",\n      \"...ff......\",\n      \"...ff......\",\n      \"....f......\",\n    ],\n  },\n  {\n    pal: { s: 0xc4ccd6, t: 0x22d4ff, r: 0xff2234, k: 0x0a0a0a },\n    speed: 13,\n    a: [\n      \"...sss..\",\n      \"s.ttttks\",\n      \"ssrrrsss\",\n      \"s..sss..\",\n    ],\n    b: [\n      \"...sss..\",\n      \"..ttttks\",\n      \"ssrrrsss\",\n      \"...sss..\",\n    ],\n  },\n];\n\n// The chest on the sand, shut and open. Every few seconds its lid lifts and lets out a burst of air.\nconst CHEST = {\n  pal: { g: 0xe8b42a, w: 0x8c4c1a, d: 0x5a2c0c, y: 0xfff09a },\n  a: [\n    \".........\",\n    \".........\",\n    \".ggggggg.\",\n    \"gwwwwwwwg\",\n    \"ggggkgggg\",\n    \"gwwwgwwwg\",\n    \"gdddgdddg\",\n    \"ggggggggg\",\n  ],\n  b: [\n    \".ggggggg.\",\n    \"gwwwwwwwg\",\n    \".gyyyyyg.\",\n    \"gyyyyyyyg\",\n    \"ggggggggg\",\n    \"gwwwgwwwg\",\n    \"gdddgdddg\",\n    \"ggggggggg\",\n  ],\n};\nconst CHEST_X = 28;\n\nconst DRAW_ORDER = [TETRA, ANGEL, TANG, CLOWN];\n\n// Which kind each fish is, in the order they arrive as the knob turns up.\nconst ORDER = [CLOWN, ANGEL, TETRA, TETRA, TANG, TETRA, TETRA, CLOWN, TETRA, ANGEL, TETRA, TETRA, TANG, TETRA, CLOWN, TETRA, TETRA, ANGEL];\n\n// Water at the top and at the bottom of the tank, one pair per tint.\nconst WATERS = [\n  [0x2a7ce0, 0x0c2a78],\n  [0x18b0b4, 0x084450],\n  [0x50a83a, 0x123c16],\n  [0xc08428, 0x3c1c08],\n  [0x8456dc, 0x24104e],\n];\n\nconst WEED_STEM = [0x1c8a2a, 0x1c8a2a, 0x8a1e3c, 0x6a9418, 0x1c8a2a, 0x1c8a2a];\nconst WEED_LEAF = [0x46cc4e, 0x46cc4e, 0xe0506e, 0xa8d030, 0x46cc4e, 0x46cc4e];\nconst WEED_X = [4, 16, 26, 45, 57, 62];\nconst WEED_H = [66, 40, 84, 30, 94, 52];\n// Rows between leaves, so no two weeds look stamped from one.\nconst WEED_GAP = [6, 5, 4, 7, 6, 5];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, lo, hi) {\n  return v \u003c lo ? lo : v > hi ? hi : v;\n}\n\nfunction rgbOf(c, out, o) {\n  out[o] = (c >> 16) & 255;\n  out[o + 1] = (c >> 8) & 255;\n  out[o + 2] = c & 255;\n}\n\n// Turns the sprite strings into palette indices once, so the draw loop only reads numbers.\nfunction bake(kind) {\n  const keys = Object.keys(kind.pal);\n  const h = kind.a.length;\n  const w = kind.a[0].length;\n  const pix = new Uint8Array(2 * w * h);\n  const frames = [kind.a, kind.b];\n  for (let f = 0; f \u003c 2; f++)\n    for (let y = 0; y \u003c h; y++)\n      for (let x = 0; x \u003c w; x++) pix[f * w * h + y * w + x] = keys.indexOf(frames[f][y][x]) + 1;\n  const pal = new Float32Array((keys.length + 1) * 3);\n  for (let i = 0; i \u003c keys.length; i++) rgbOf(kind.pal[keys[i]], pal, (i + 1) * 3);\n  return { w, h, pix, pal, speed: kind.speed };\n}\n\nfunction sinAt(p, a) {\n  return p.sin[Math.floor(a * SIN_K) & (SIN_N - 1)];\n}\n\nfunction sandTop(x) {\n  return FLOOR + Math.round(1.6 * Math.sin(x * 0.13 + 0.7) + 0.9 * Math.sin(x * 0.41 + 2));\n}\n\nfunction newCruise(p, i) {\n  const s = p.sprite[p.kind[i]];\n  p.cruise[i] = 0.6 + Math.random() * 0.6;\n  p.ty[i] = SURFACE + 6 + Math.random() * (FLOOR - SURFACE - 16 - s.h);\n  p.clock[i] = 2 + Math.random() * 5;\n}\n\nfunction placeFish(p, i, entering) {\n  const s = p.sprite[p.kind[i]];\n  p.state[i] = entering ? 3 : 1;\n  const dir = Math.random() \u003c 0.5 ? -1 : 1;\n  p.dir[i] = dir;\n  if (entering) p.x[i] = dir > 0 ? -s.w - 1 : W + 1;\n  else p.x[i] = 1 + Math.random() * (W - s.w - 2);\n  newCruise(p, i);\n  p.y[i] = entering ? p.ty[i] : SURFACE + 6 + Math.random() * (FLOOR - SURFACE - 16 - s.h);\n  p.v[i] = dir * s.speed * p.cruise[i];\n  p.vy[i] = 0;\n  p.face[i] = dir;\n  p.wag[i] = Math.random() * 2;\n}\n\nfunction swim(p, i, dt) {\n  const s = p.sprite[p.kind[i]];\n  const st = p.state[i];\n  let target;\n  let ty = p.ty[i];\n  let tx = -1;\n  if (st === 1 && p.food > 0) {\n    // Nearest flake, from the mouth.\n    const mx = p.x[i] + (p.face[i] > 0 ? s.w : 0);\n    const my = p.y[i] + s.h * 0.5;\n    let best = 1e9;\n    let bi = -1;\n    for (let f = 0; f \u003c FLAKES; f++) {\n      if (p.flakeLife[f] \u003c= 0) continue;\n      const dx = p.fx[f] - mx;\n      const dy = p.fy[f] - my;\n      // A flake another fish is already after counts as further away, so a pinch spreads the fish out.\n      const d = dx * dx + dy * dy + (p.claim[f] ? 400 : 0);\n      if (d \u003c best) {\n        best = d;\n        bi = f;\n      }\n    }\n    if (bi >= 0) {\n      p.claim[bi] = 1;\n      if (best \u003c 6) {\n        p.flakeLife[bi] = 0;\n        p.food--;\n      } else {\n        tx = p.fx[bi] - (p.face[i] > 0 ? s.w : 0);\n        ty = p.fy[bi] - s.h * 0.5;\n      }\n    }\n  }\n  if (tx >= 0) {\n    target = clamp((tx - p.x[i]) * 2, -s.speed * 1.9, s.speed * 1.9);\n  } else if (st === 1 && p.kind[i] === TETRA) {\n    // Tetras keep station behind a leader nobody sees, so they turn as one.\n    tx = p.lx - p.ldir * p.ox[i];\n    ty = p.ly + p.oy[i];\n    target = p.ldir * p.lv + (tx - p.x[i]) * 1.2;\n    target = clamp(target, -s.speed * 1.6, s.speed * 1.6);\n  } else {\n    if (st === 1) {\n      p.clock[i] -= dt;\n      if (p.clock[i] \u003c= 0) {\n        newCruise(p, i);\n        if (Math.random() \u003c 0.3) p.dir[i] = -p.dir[i];\n      }\n      const m = 2 + Math.abs(p.v[i]) * 0.5;\n      if (p.x[i] \u003c m && p.dir[i] \u003c 0) p.dir[i] = 1;\n      if (p.x[i] > W - s.w - m && p.dir[i] > 0) p.dir[i] = -1;\n    }\n    target = p.dir[i] * s.speed * (st === 2 ? 1.4 : p.cruise[i]);\n  }\n  p.v[i] += (target - p.v[i]) * Math.min(1, dt * 2.2);\n  p.x[i] += p.v[i] * dt;\n  // Fish that share a stretch of water drift apart in depth instead of swimming through each other.\n  let push = 0;\n  if (p.food \u003c= 0) {\n    for (let j = 0; j \u003c MAX_FISH; j++) {\n      if (j === i || !p.state[j]) continue;\n      if (p.kind[i] === TETRA && p.kind[j] === TETRA) continue;\n      const o = p.sprite[p.kind[j]];\n      if (p.x[j] > p.x[i] + s.w + 2 || p.x[j] + o.w + 2 \u003c p.x[i]) continue;\n      const dy = p.y[i] + s.h * 0.5 - (p.y[j] + o.h * 0.5);\n      const room = (s.h + o.h) * 0.5 + 2;\n      if (Math.abs(dy) \u003c room) push += (dy >= 0 ? 1 : -1) * (room - Math.abs(dy));\n    }\n  }\n  // A cruising fish takes the new depth as its own, so the two do not drift back together.\n  if (push !== 0 && st === 1 && p.kind[i] !== TETRA && tx \u003c 0) {\n    p.ty[i] = clamp(p.ty[i] + push * dt * 6, SURFACE + 4, FLOOR - 8 - s.h);\n    ty = p.ty[i];\n  } else ty += push * 3;\n  p.vy[i] += ((ty - p.y[i]) * 0.7 - p.vy[i]) * Math.min(1, dt * 1.5);\n  p.vy[i] = clamp(p.vy[i], -s.speed * 0.6, s.speed * 0.6);\n  p.y[i] = clamp(p.y[i] + p.vy[i] * dt, SURFACE + 2, FLOOR - 4 - s.h);\n  if (Math.abs(p.v[i]) > 0.8) p.face[i] = p.v[i] > 0 ? 1 : -1;\n  p.wag[i] += dt * (2.5 + Math.abs(p.v[i]) * 0.35);\n  if (st === 1) p.x[i] = clamp(p.x[i], 0, W - s.w);\n  else if (st === 3 && p.x[i] >= 0 && p.x[i] \u003c= W - s.w) p.state[i] = 1;\n  else if (st === 2 && (p.x[i] \u003c -s.w - 2 || p.x[i] > W + 2)) p.state[i] = 0;\n}\n\nfunction spawnBubble(p, x, y, age) {\n  for (let b = 0; b \u003c BUBBLES; b++) {\n    if (p.by[b] > 0) continue;\n    p.bx[b] = x;\n    p.by[b] = y;\n    p.bage[b] = age;\n    p.bph[b] = Math.random() * 6.28;\n    return;\n  }\n}\n\nfunction stepWorld(p, dt) {\n  p.t += dt;\n  // The school's leader cruises like a fish and turns at the glass.\n  p.lclock -= dt;\n  if (p.lclock \u003c= 0) {\n    p.lclock = 3 + Math.random() * 4;\n    p.lty = SURFACE + 16 + Math.random() * (FLOOR - SURFACE - 40);\n    p.lv = 8 + Math.random() * 6;\n    if (Math.random() \u003c 0.35) p.ldir = -p.ldir;\n  }\n  if (p.lx \u003c 10 && p.ldir \u003c 0) p.ldir = 1;\n  if (p.lx > W - 4 && p.ldir > 0) p.ldir = -1;\n  p.lx += p.ldir * p.lv * dt;\n  p.ly += (p.lty - p.ly) * Math.min(1, dt * 0.6);\n\n  p.claim.fill(0);\n  for (let i = 0; i \u003c MAX_FISH; i++) if (p.state[i]) swim(p, i, dt);\n\n  for (let f = 0; f \u003c FLAKES; f++) {\n    if (p.flakeLife[f] \u003c= 0) continue;\n    const ground = sandTop(clamp(Math.floor(p.fx[f]), 0, W - 1)) - 1;\n    if (p.fy[f] \u003c ground) {\n      p.fy[f] = Math.min(ground, p.fy[f] + dt * (4 + 1.5 * Math.sin(p.t * 3 + f)));\n      p.fx[f] = clamp(p.fx[f] + dt * Math.sin(p.t * 1.7 + f * 2.1) * 2.5, 1, W - 2);\n    } else {\n      p.flakeLife[f] -= dt;\n      if (p.flakeLife[f] \u003c= 0) p.food--;\n    }\n  }\n\n  p.chestClock -= dt;\n  if (p.chestClock \u003c= 0) {\n    if (p.chestOpen > 0) {\n      p.chestOpen = 0;\n      p.chestClock = 4 + Math.random() * 5;\n    } else {\n      p.chestOpen = 1;\n      p.chestClock = 1.3;\n      p.burst = 5 + Math.floor(Math.random() * 4);\n    }\n  }\n  if (p.chestOpen && p.burst > 0) {\n    p.burstClock -= dt;\n    if (p.burstClock \u003c= 0) {\n      p.burstClock = 0.09 + Math.random() * 0.1;\n      p.burst--;\n      spawnBubble(p, CHEST_X + 3.5 + (Math.random() - 0.5) * 4, p.chestY - 1, 1.2 + Math.random() * 1.8);\n    }\n  }\n  // Now and then a fish lets a small bubble go.\n  p.bclock -= dt;\n  if (p.bclock \u003c= 0) {\n    p.bclock = 1.5 + Math.random() * 3;\n    const i = Math.floor(Math.random() * MAX_FISH);\n    if (p.state[i] === 1) {\n      const s = p.sprite[p.kind[i]];\n      spawnBubble(p, p.x[i] + (p.face[i] > 0 ? s.w : -1), p.y[i] + s.h * 0.4, 0);\n    }\n  }\n  for (let b = 0; b \u003c BUBBLES; b++) {\n    if (p.by[b] \u003c= 0) continue;\n    p.bage[b] += dt;\n    p.by[b] -= dt * (13 + Math.min(2, p.bage[b] * 0.5) * 4);\n    if (p.by[b] \u003c= SURFACE + 1) p.by[b] = 0;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.sin = new Float32Array(SIN_N);\n  for (let i = 0; i \u003c SIN_N; i++) p.sin[i] = Math.sin((i / SIN_N) * Math.PI * 2);\n  p.sprite = KINDS.map(bake);\n  p.kind = new Uint8Array(MAX_FISH);\n  for (let i = 0; i \u003c MAX_FISH; i++) p.kind[i] = ORDER[i];\n  p.ox = new Float32Array(MAX_FISH);\n  p.oy = new Float32Array(MAX_FISH);\n  // Each tetra has its own place in the school, three abreast and staggered.\n  let n = 0;\n  for (let i = 0; i \u003c MAX_FISH; i++) {\n    if (p.kind[i] !== TETRA) continue;\n    const col = n % 3;\n    const rank = Math.floor(n / 3);\n    p.ox[i] = 1 + col * 9 + (rank & 1) * 4;\n    p.oy[i] = (col - 1) * 6 + ((rank % 3) - 1) * 2.5;\n    n++;\n  }\n  p.state = new Uint8Array(MAX_FISH);\n  p.x = new Float32Array(MAX_FISH);\n  p.y = new Float32Array(MAX_FISH);\n  p.v = new Float32Array(MAX_FISH);\n  p.vy = new Float32Array(MAX_FISH);\n  p.ty = new Float32Array(MAX_FISH);\n  p.dir = new Int8Array(MAX_FISH);\n  p.face = new Int8Array(MAX_FISH);\n  p.cruise = new Float32Array(MAX_FISH);\n  p.clock = new Float32Array(MAX_FISH);\n  p.wag = new Float32Array(MAX_FISH);\n  p.fx = new Float32Array(FLAKES);\n  p.fy = new Float32Array(FLAKES);\n  p.flakeLife = new Float32Array(FLAKES);\n  p.claim = new Uint8Array(FLAKES);\n  p.food = 0;\n  p.bx = new Float32Array(BUBBLES);\n  p.by = new Float32Array(BUBBLES);\n  p.bage = new Float32Array(BUBBLES);\n  p.bph = new Float32Array(BUBBLES);\n  p.bclock = 1;\n  p.chestOpen = 0;\n  p.chestClock = 1.5;\n  p.burst = 0;\n  p.burstClock = 0;\n  p.chest = bake(CHEST);\n  p.chestY = sandTop(CHEST_X + 4) - 7;\n  p.lx = W / 2;\n  p.ly = 60;\n  p.lty = 60;\n  p.ldir = 1;\n  p.lv = 10;\n  p.lclock = 0;\n  p.t = 0;\n  p.ready = false;\n\n  // The sand, the rocks and where each weed stands never change, so they are baked here.\n  p.ground = new Float32Array(W * H * 3);\n  p.solid = new Uint8Array(W * H);\n  for (let x = 0; x \u003c W; x++) {\n    const top = sandTop(x);\n    for (let y = top; y \u003c H; y++) {\n      const n = hash(x, y);\n      const o = (y * W + x) * 3;\n      const v = 0.5 + 0.18 * n - (y - top) * 0.012 + (y === top ? 0.12 : 0);\n      const pebble = n > 0.93 ? 0.6 : 1;\n      p.ground[o] = 214 * v * pebble;\n      p.ground[o + 1] = 176 * v * pebble;\n      p.ground[o + 2] = 118 * v * (n > 0.97 ? 1.6 : pebble);\n      p.solid[y * W + x] = 1;\n    }\n  }\n  const rocks = [\n    [52, FLOOR - 4, 10, 8],\n    [42, FLOOR - 1, 6, 4.5],\n    [9, FLOOR, 6, 3.5],\n  ];\n  for (const [cx, cy, rx, ry] of rocks) {\n    for (let y = Math.floor(cy - ry); y \u003c= cy + ry; y++) {\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const dx = (x + 0.5 - cx) / rx;\n        const dy = (y + 0.5 - cy) / ry;\n        const d = dx * dx + dy * dy;\n        if (d > 1) continue;\n        // Lit from above left in three flat steps, the way a sprite is shaded by hand.\n        const lit = -dx * 0.5 - dy * 0.8;\n        const step = lit > 0.45 ? 1.25 : lit > -0.25 ? 1 : 0.72;\n        const v = step * (0.92 + 0.12 * hash(x * 7, y * 3));\n        const o = (y * W + x) * 3;\n        p.ground[o] = 104 * v;\n        p.ground[o + 1] = 110 * v;\n        p.ground[o + 2] = 120 * v;\n        p.solid[y * W + x] = 1;\n      }\n    }\n  }\n  p.weedX = new Float32Array(WEEDS);\n  p.weedH = new Float32Array(WEEDS);\n  p.weedPh = new Float32Array(WEEDS);\n  for (let i = 0; i \u003c WEEDS; i++) {\n    p.weedX[i] = WEED_X[i];\n    p.weedH[i] = WEED_H[i];\n    p.weedPh[i] = Math.random() * 6.28;\n  }\n  p.weedStem = new Float32Array(WEEDS * 3);\n  p.weedLeaf = new Float32Array(WEEDS * 3);\n  for (let i = 0; i \u003c WEEDS; i++) {\n    rgbOf(WEED_STEM[i], p.weedStem, i * 3);\n    rgbOf(WEED_LEAF[i], p.weedLeaf, i * 3);\n  }\n  p.row = new Float32Array(H * 3);\n  p.fade = new Float32Array(H);\n  p.buf = new Float32Array(W * H * 3);\n  p.top = new Float32Array(3);\n  p.deep = new Float32Array(3);\n  p.cc = new Float32Array(3);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.water = clamp(k[0], 0, 1);\n  p.light = clamp(k[3], -1, 1);\n  const pace = Math.max(0.05, k[1] * 0.36);\n  const want = Math.round(clamp(k[2], 0, MAX_FISH));\n  if (!p.ready) {\n    p.ready = true;\n    for (let i = 0; i \u003c want; i++) placeFish(p, i, false);\n    p.ly = 40 + Math.random() * 40;\n    p.lty = p.ly;\n    // Fill the bubble column before the first frame.\n    for (let s = 0; s \u003c 120; s++) stepWorld(p, 1 / 30);\n  }\n  for (let i = 0; i \u003c MAX_FISH; i++) {\n    const st = p.state[i];\n    if (i \u003c want && (st === 0 || st === 2)) {\n      if (st === 0) placeFish(p, i, true);\n      else p.state[i] = 1;\n    } else if (i >= want && (st === 1 || st === 3)) {\n      const s = p.sprite[p.kind[i]];\n      p.state[i] = 2;\n      p.dir[i] = p.x[i] + s.w * 0.5 \u003c W / 2 ? -1 : 1;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    const cx = 8 + Math.random() * (W - 16);\n    for (let n = 0; n \u003c 7; n++) {\n      for (let f = 0; f \u003c FLAKES; f++) {\n        if (p.flakeLife[f] > 0) continue;\n        p.fx[f] = cx + (Math.random() - 0.5) * 10;\n        p.fy[f] = SURFACE + 1 + Math.random() * 2;\n        p.flakeLife[f] = 5 + Math.random() * 3;\n        p.food++;\n        break;\n      }\n    }\n  }\n  stepWorld(p, dt * pace);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const buf = p.buf;\n  const L = p.light;\n  const t = p.t;\n\n  // Water: the tint's two colours, darker with depth, and darker still at night.\n  const pos = p.water * (WATERS.length - 1);\n  const a = Math.min(WATERS.length - 2, Math.floor(pos));\n  const u = pos - a;\n  const top = p.top;\n  const deep = p.deep;\n  for (let c = 0; c \u003c 3; c++) {\n    const sh = 16 - c * 8;\n    top[c] = ((WATERS[a][0] >> sh) & 255) * (1 - u) + ((WATERS[a + 1][0] >> sh) & 255) * u;\n    deep[c] = ((WATERS[a][1] >> sh) & 255) * (1 - u) + ((WATERS[a + 1][1] >> sh) & 255) * u;\n  }\n  const lamp = L \u003c 0 ? 1 + 0.62 * L : 1;\n  const dark = 0.5 - 0.25 * L;\n  const glint = L \u003c 0 ? 0.4 * (1 + L) : 0.4 + 0.25 * L;\n  const reach = 17 + 60 * Math.max(0, L);\n  const cc = p.cc;\n  for (let c = 0; c \u003c 3; c++) cc[c] = 150 + top[c] * 0.45;\n  const row = p.row;\n  const fade = p.fade;\n  for (let y = 0; y \u003c H; y++) {\n    const d = clamp((y - SURFACE) / (FLOOR - SURFACE), 0, 1);\n    const v = 0.5 * lamp * (1 - dark * d);\n    for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = (top[c] * (1 - d) + deep[c] * d) * v;\n    fade[y] = glint * Math.exp(-(y - SURFACE) / reach);\n  }\n\n  const sandLight = 0.55 + 0.45 * lamp - 0.15 * Math.max(0, -L);\n  for (let y = 0; y \u003c H; y++) {\n    const f = fade[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const o = i * 3;\n      let r;\n      let g;\n      let b;\n      if (y \u003c SURFACE) {\n        r = 0;\n        g = 0;\n        b = 0;\n      } else if (p.solid[i]) {\n        r = p.ground[o] * sandLight;\n        g = p.ground[o + 1] * sandLight;\n        b = p.ground[o + 2] * sandLight;\n      } else {\n        r = row[y * 3];\n        g = row[y * 3 + 1];\n        b = row[y * 3 + 2];\n      }\n      if (y >= SURFACE && f > 0.03) {\n        // The net of light: bright where three slow waves cancel, cut into two flat steps.\n        const w1 = sinAt(p, x * 0.55 + t * 0.55 + 1.6 * sinAt(p, y * 0.17 + t * 0.3));\n        const w2 = sinAt(p, x * 0.31 - y * 0.42 - t * 0.45);\n        const w3 = sinAt(p, x * 0.16 + y * 0.27 + t * 0.23);\n        const s = 1 - Math.abs(w1 + w2 + w3 * 0.7) * 2.3;\n        if (s > 0) {\n          const step = (s > 0.45 ? 1 : 0.4) * f;\n          r += cc[0] * step;\n          g += cc[1] * step;\n          b += cc[2] * step;\n        }\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n\n  // The surface: a pale line that lifts a LED where a ripple passes.\n  for (let x = 0; x \u003c W; x++) {\n    const lift = sinAt(p, x * 0.35 - t * 2.1) + sinAt(p, x * 0.17 + t * 1.3) > 1.1 ? 1 : 0;\n    const o = ((SURFACE - lift) * W + x) * 3;\n    const v = 0.35 + 0.4 * lamp;\n    buf[o] = 120 * v + top[0] * 0.5;\n    buf[o + 1] = 150 * v + top[1] * 0.5;\n    buf[o + 2] = 170 * v + top[2] * 0.5;\n  }\n\n  const plant = 0.45 + 0.55 * lamp;\n  for (let i = 0; i \u003c WEEDS; i++) if (i !== 1 && i !== 5) drawWeed(p, i, plant);\n  drawSprite(p, p.chest, CHEST_X, p.chestY, p.chestOpen, true, 0.5 + 0.5 * lamp);\n\n  const fishLight = 0.5 + 0.5 * lamp;\n  // The school swims furthest back and the clownfish nearest, so a fish crossing another reads as depth.\n  for (let n = 0; n \u003c DRAW_ORDER.length; n++) {\n    const kind = DRAW_ORDER[n];\n    for (let i = 0; i \u003c MAX_FISH; i++) if (p.state[i] && p.kind[i] === kind) drawFish(p, i, fishLight);\n  }\n\n  // Two weeds stand in front of the fish, so a fish can pass behind them.\n  drawWeed(p, 1, plant);\n  drawWeed(p, 5, plant);\n\n  for (let f = 0; f \u003c FLAKES; f++) {\n    if (p.flakeLife[f] \u003c= 0) continue;\n    put(buf, Math.floor(p.fx[f]), Math.floor(p.fy[f]), 255 * fishLight, 196 * fishLight, 96 * fishLight);\n  }\n\n  for (let bI = 0; bI \u003c BUBBLES; bI++) {\n    const by = p.by[bI];\n    if (by \u003c= 0) continue;\n    const bx = p.bx[bI] + 1.1 * sinAt(p, p.bph[bI] + by * 0.27);\n    const size = p.bage[bI] \u003c 1.2 ? 0 : p.bage[bI] \u003c 2.8 ? 1 : 2;\n    const v = 0.55 + 0.35 * lamp;\n    if (size === 0) splat(buf, bx, by, 170 * v, 220 * v, 255 * v, 1);\n    else ring(buf, Math.round(bx), Math.round(by), size, 170 * v, 220 * v, 255 * v);\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// A point shared over its four nearest LEDs, so it glides instead of hopping.\nfunction splat(buf, px, py, r, g, b, amount) {\n  const x0 = Math.floor(px - 0.5);\n  const y0 = Math.floor(py - 0.5);\n  for (let yy = y0; yy \u003c= y0 + 1; yy++) {\n    if (yy \u003c SURFACE || yy >= H) continue;\n    const wy = 1 - Math.abs(yy + 0.5 - py);\n    for (let xx = x0; xx \u003c= x0 + 1; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = wy * (1 - Math.abs(xx + 0.5 - px)) * amount;\n      if (w \u003c= 0) continue;\n      const o = (yy * W + xx) * 3;\n      buf[o] += (r - buf[o]) * w;\n      buf[o + 1] += (g - buf[o + 1]) * w;\n      buf[o + 2] += (b - buf[o + 2]) * w;\n    }\n  }\n}\n\n// A bubble: a diamond of four LEDs, or a round one of eight with a glint.\nfunction ring(buf, cx, cy, size, r, g, b) {\n  if (size === 1) {\n    put(buf, cx, cy - 1, r, g, b);\n    put(buf, cx - 1, cy, r, g, b);\n    put(buf, cx + 1, cy, r, g, b);\n    put(buf, cx, cy + 1, r, g, b);\n  } else {\n    put(buf, cx, cy - 1, r, g, b);\n    put(buf, cx + 1, cy - 1, r, g, b);\n    put(buf, cx - 1, cy, r, g, b);\n    put(buf, cx + 2, cy, r, g, b);\n    put(buf, cx - 1, cy + 1, r, g, b);\n    put(buf, cx + 2, cy + 1, r, g, b);\n    put(buf, cx, cy + 2, r, g, b);\n    put(buf, cx + 1, cy + 2, r, g, b);\n    put(buf, cx, cy, 255, 255, 255);\n  }\n}\n\nfunction drawFish(p, i, light) {\n  drawSprite(p, p.sprite[p.kind[i]], Math.round(p.x[i]), Math.round(p.y[i]), Math.floor(p.wag[i]) & 1, p.face[i] > 0, light);\n}\n\nfunction drawSprite(p, s, ix, iy, frame, right, light) {\n  const buf = p.buf;\n  const base = frame * s.w * s.h;\n  for (let y = 0; y \u003c s.h; y++) {\n    const yy = iy + y;\n    if (yy \u003c SURFACE || yy >= H) continue;\n    for (let x = 0; x \u003c s.w; x++) {\n      const c = s.pix[base + y * s.w + x];\n      if (!c) continue;\n      const xx = ix + (right ? x : s.w - 1 - x);\n      if (xx \u003c 0 || xx >= W) continue;\n      const o = (yy * W + xx) * 3;\n      buf[o] = s.pal[c * 3] * light;\n      buf[o + 1] = s.pal[c * 3 + 1] * light;\n      buf[o + 2] = s.pal[c * 3 + 2] * light;\n    }\n  }\n}\n\nfunction drawWeed(p, i, light) {\n  const buf = p.buf;\n  const h = p.weedH[i];\n  const bx = p.weedX[i];\n  const base = sandTop(bx) + 1;\n  const sr = p.weedStem[i * 3] * light;\n  const sg = p.weedStem[i * 3 + 1] * light;\n  const sb = p.weedStem[i * 3 + 2] * light;\n  const lr = p.weedLeaf[i * 3] * light;\n  const lg = p.weedLeaf[i * 3 + 1] * light;\n  const lb = p.weedLeaf[i * 3 + 2] * light;\n  const t = p.t;\n  for (let r = 0; r \u003c h; r++) {\n    const y = base - r;\n    if (y \u003c SURFACE + 2) break;\n    const s = r / h;\n    // The tip sways most, and the sway runs up the stem a little late.\n    const off = 4.2 * s * s * sinAt(p, t * 0.85 + p.weedPh[i] - s * 2.4);\n    const x = Math.round(bx + off);\n    put(buf, x, y, sr, sg, sb);\n    if (r \u003c h - 8) put(buf, x + 1, y, sr, sg, sb);\n    const gap = WEED_GAP[i];\n    if (r > 3 && r % gap === 0 && r \u003c h - 2) {\n      const side = (r / gap) & 1 ? 1 : -1;\n      const lx = side > 0 ? x + (r \u003c h - 8 ? 2 : 1) : x - 1;\n      put(buf, lx, y, lr, lg, lb);\n      put(buf, lx + side, y - 1, lr, lg, lb);\n      // Lower leaves are longer.\n      if (s \u003c 0.6) put(buf, lx + side * 2, y - 2, lr, lg, lb);\n    }\n  }\n}\n","layer":{"id":"layer-aquarium","type":"code","name":"aquarium","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Aquarium\n// Family:  pixel\n// Idea:    A tall tank in hand-drawn sprites: clownfish, a tang, an angelfish and a school of neon tetras wag their tails across it and turn at the glass, weed sways from the sand, bubbles climb from a stone and the surface throws a moving net of light down the water.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Swim=0.2..4, Fish=6..18, Light=-1..1\n//\n// Knob 1: Water. The tint of the water, from clear blue through lagoon teal and planted green to tea-brown blackwater and violet.\n// Knob 2: Swim. How fast the whole tank moves, fish, weed, bubbles and light, from slow motion to a feeding rush.\n// Knob 3: Fish. How many fish live in the tank; new ones swim in from the side and spare ones swim out.\n// Knob 4: Light. Below 0 the lamp dims towards night and the deep water goes dark; above 0 the sun is out and the net of light reaches the sand.\n// Buttons: K1 tap drops a pinch of food at the surface, and every fish goes for it.\n\nconst W = 64;\nconst H = 128;\n// The water line; above it is the air under the lid.\nconst SURFACE = 7;\n// The mean height of the sand.\nconst FLOOR = 117;\nconst MAX_FISH = 18;\nconst FLAKES = 24;\nconst BUBBLES = 40;\nconst WEEDS = 6;\nconst SIN_N = 1024;\nconst SIN_K = SIN_N / (Math.PI * 2);\n\nconst CLOWN = 0;\nconst TANG = 1;\nconst ANGEL = 2;\nconst TETRA = 3;\n\n// Sprites face right. Two frames each: the tail spread, then edge-on.\nconst KINDS = [\n  {\n    pal: { o: 0xff6810, w: 0xf6f4ee, f: 0xc83c06, k: 0x101010 },\n    speed: 9,\n    a: [\n      \"......ff....\",\n      \"f...wooowo..\",\n      \"ff.owooowok.\",\n      \"fffowooowooo\",\n      \"ff.owooowoo.\",\n      \"f...wooowo..\",\n      \"......f.....\",\n    ],\n    b: [\n      \"......ff....\",\n      \"....wooowo..\",\n      \"f..owooowok.\",\n      \"ffffwooowooo\",\n      \"f..owooowoo.\",\n      \"....wooowo..\",\n      \".....f......\",\n    ],\n  },\n  {\n    pal: { b: 0x1e5cff, n: 0x0c1c78, y: 0xffd21a, l: 0x6aa8ff, k: 0x080808 },\n    speed: 11,\n    a: [\n      \".....lllll...\",\n      \"y..lbbbbbbb..\",\n      \"yy.bnnnbbbbb.\",\n      \"yyybbbnnnbbkb\",\n      \"yyybbbbbnnbbb\",\n      \"yy.bbbbbbnbb.\",\n      \"y..lbbbbbbb..\",\n      \".....lllll...\",\n    ],\n    b: [\n      \".....lllll...\",\n      \"...lbbbbbbb..\",\n      \"y..bnnnbbbbb.\",\n      \"yyybbbnnnbbkb\",\n      \"yyybbbbbnnbbb\",\n      \"y..bbbbbbnbb.\",\n      \"...lbbbbbbb..\",\n      \".....lllll...\",\n    ],\n  },\n  {\n    pal: { s: 0xdce6f0, d: 0x46505e, f: 0xa8bccc, k: 0x0a0a0a, a: 0xf2cc50 },\n    speed: 6,\n    a: [\n      \"...f.......\",\n      \"...ff......\",\n      \"....ff.....\",\n      \"....fss....\",\n      \"...sdssa...\",\n      \"f.ssdssds..\",\n      \"ffssdssdsks\",\n      \"f.ssdssds..\",\n      \"...sdsss...\",\n      \"....fss....\",\n      \"....ff.....\",\n      \"...ff......\",\n      \"...f.......\",\n    ],\n    b: [\n      \"....f......\",\n      \"...ff......\",\n      \"...ff......\",\n      \"....fss....\",\n      \"...sdssa...\",\n      \"..ssdssds..\",\n      \"fsssdssdsks\",\n      \"..ssdssds..\",\n      \"...sdsss...\",\n      \"....fss....\",\n      \"...ff......\",\n      \"...ff......\",\n      \"....f......\",\n    ],\n  },\n  {\n    pal: { s: 0xc4ccd6, t: 0x22d4ff, r: 0xff2234, k: 0x0a0a0a },\n    speed: 13,\n    a: [\n      \"...sss..\",\n      \"s.ttttks\",\n      \"ssrrrsss\",\n      \"s..sss..\",\n    ],\n    b: [\n      \"...sss..\",\n      \"..ttttks\",\n      \"ssrrrsss\",\n      \"...sss..\",\n    ],\n  },\n];\n\n// The chest on the sand, shut and open. Every few seconds its lid lifts and lets out a burst of air.\nconst CHEST = {\n  pal: { g: 0xe8b42a, w: 0x8c4c1a, d: 0x5a2c0c, y: 0xfff09a },\n  a: [\n    \".........\",\n    \".........\",\n    \".ggggggg.\",\n    \"gwwwwwwwg\",\n    \"ggggkgggg\",\n    \"gwwwgwwwg\",\n    \"gdddgdddg\",\n    \"ggggggggg\",\n  ],\n  b: [\n    \".ggggggg.\",\n    \"gwwwwwwwg\",\n    \".gyyyyyg.\",\n    \"gyyyyyyyg\",\n    \"ggggggggg\",\n    \"gwwwgwwwg\",\n    \"gdddgdddg\",\n    \"ggggggggg\",\n  ],\n};\nconst CHEST_X = 28;\n\nconst DRAW_ORDER = [TETRA, ANGEL, TANG, CLOWN];\n\n// Which kind each fish is, in the order they arrive as the knob turns up.\nconst ORDER = [CLOWN, ANGEL, TETRA, TETRA, TANG, TETRA, TETRA, CLOWN, TETRA, ANGEL, TETRA, TETRA, TANG, TETRA, CLOWN, TETRA, TETRA, ANGEL];\n\n// Water at the top and at the bottom of the tank, one pair per tint.\nconst WATERS = [\n  [0x2a7ce0, 0x0c2a78],\n  [0x18b0b4, 0x084450],\n  [0x50a83a, 0x123c16],\n  [0xc08428, 0x3c1c08],\n  [0x8456dc, 0x24104e],\n];\n\nconst WEED_STEM = [0x1c8a2a, 0x1c8a2a, 0x8a1e3c, 0x6a9418, 0x1c8a2a, 0x1c8a2a];\nconst WEED_LEAF = [0x46cc4e, 0x46cc4e, 0xe0506e, 0xa8d030, 0x46cc4e, 0x46cc4e];\nconst WEED_X = [4, 16, 26, 45, 57, 62];\nconst WEED_H = [66, 40, 84, 30, 94, 52];\n// Rows between leaves, so no two weeds look stamped from one.\nconst WEED_GAP = [6, 5, 4, 7, 6, 5];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, lo, hi) {\n  return v \u003c lo ? lo : v > hi ? hi : v;\n}\n\nfunction rgbOf(c, out, o) {\n  out[o] = (c >> 16) & 255;\n  out[o + 1] = (c >> 8) & 255;\n  out[o + 2] = c & 255;\n}\n\n// Turns the sprite strings into palette indices once, so the draw loop only reads numbers.\nfunction bake(kind) {\n  const keys = Object.keys(kind.pal);\n  const h = kind.a.length;\n  const w = kind.a[0].length;\n  const pix = new Uint8Array(2 * w * h);\n  const frames = [kind.a, kind.b];\n  for (let f = 0; f \u003c 2; f++)\n    for (let y = 0; y \u003c h; y++)\n      for (let x = 0; x \u003c w; x++) pix[f * w * h + y * w + x] = keys.indexOf(frames[f][y][x]) + 1;\n  const pal = new Float32Array((keys.length + 1) * 3);\n  for (let i = 0; i \u003c keys.length; i++) rgbOf(kind.pal[keys[i]], pal, (i + 1) * 3);\n  return { w, h, pix, pal, speed: kind.speed };\n}\n\nfunction sinAt(p, a) {\n  return p.sin[Math.floor(a * SIN_K) & (SIN_N - 1)];\n}\n\nfunction sandTop(x) {\n  return FLOOR + Math.round(1.6 * Math.sin(x * 0.13 + 0.7) + 0.9 * Math.sin(x * 0.41 + 2));\n}\n\nfunction newCruise(p, i) {\n  const s = p.sprite[p.kind[i]];\n  p.cruise[i] = 0.6 + Math.random() * 0.6;\n  p.ty[i] = SURFACE + 6 + Math.random() * (FLOOR - SURFACE - 16 - s.h);\n  p.clock[i] = 2 + Math.random() * 5;\n}\n\nfunction placeFish(p, i, entering) {\n  const s = p.sprite[p.kind[i]];\n  p.state[i] = entering ? 3 : 1;\n  const dir = Math.random() \u003c 0.5 ? -1 : 1;\n  p.dir[i] = dir;\n  if (entering) p.x[i] = dir > 0 ? -s.w - 1 : W + 1;\n  else p.x[i] = 1 + Math.random() * (W - s.w - 2);\n  newCruise(p, i);\n  p.y[i] = entering ? p.ty[i] : SURFACE + 6 + Math.random() * (FLOOR - SURFACE - 16 - s.h);\n  p.v[i] = dir * s.speed * p.cruise[i];\n  p.vy[i] = 0;\n  p.face[i] = dir;\n  p.wag[i] = Math.random() * 2;\n}\n\nfunction swim(p, i, dt) {\n  const s = p.sprite[p.kind[i]];\n  const st = p.state[i];\n  let target;\n  let ty = p.ty[i];\n  let tx = -1;\n  if (st === 1 && p.food > 0) {\n    // Nearest flake, from the mouth.\n    const mx = p.x[i] + (p.face[i] > 0 ? s.w : 0);\n    const my = p.y[i] + s.h * 0.5;\n    let best = 1e9;\n    let bi = -1;\n    for (let f = 0; f \u003c FLAKES; f++) {\n      if (p.flakeLife[f] \u003c= 0) continue;\n      const dx = p.fx[f] - mx;\n      const dy = p.fy[f] - my;\n      // A flake another fish is already after counts as further away, so a pinch spreads the fish out.\n      const d = dx * dx + dy * dy + (p.claim[f] ? 400 : 0);\n      if (d \u003c best) {\n        best = d;\n        bi = f;\n      }\n    }\n    if (bi >= 0) {\n      p.claim[bi] = 1;\n      if (best \u003c 6) {\n        p.flakeLife[bi] = 0;\n        p.food--;\n      } else {\n        tx = p.fx[bi] - (p.face[i] > 0 ? s.w : 0);\n        ty = p.fy[bi] - s.h * 0.5;\n      }\n    }\n  }\n  if (tx >= 0) {\n    target = clamp((tx - p.x[i]) * 2, -s.speed * 1.9, s.speed * 1.9);\n  } else if (st === 1 && p.kind[i] === TETRA) {\n    // Tetras keep station behind a leader nobody sees, so they turn as one.\n    tx = p.lx - p.ldir * p.ox[i];\n    ty = p.ly + p.oy[i];\n    target = p.ldir * p.lv + (tx - p.x[i]) * 1.2;\n    target = clamp(target, -s.speed * 1.6, s.speed * 1.6);\n  } else {\n    if (st === 1) {\n      p.clock[i] -= dt;\n      if (p.clock[i] \u003c= 0) {\n        newCruise(p, i);\n        if (Math.random() \u003c 0.3) p.dir[i] = -p.dir[i];\n      }\n      const m = 2 + Math.abs(p.v[i]) * 0.5;\n      if (p.x[i] \u003c m && p.dir[i] \u003c 0) p.dir[i] = 1;\n      if (p.x[i] > W - s.w - m && p.dir[i] > 0) p.dir[i] = -1;\n    }\n    target = p.dir[i] * s.speed * (st === 2 ? 1.4 : p.cruise[i]);\n  }\n  p.v[i] += (target - p.v[i]) * Math.min(1, dt * 2.2);\n  p.x[i] += p.v[i] * dt;\n  // Fish that share a stretch of water drift apart in depth instead of swimming through each other.\n  let push = 0;\n  if (p.food \u003c= 0) {\n    for (let j = 0; j \u003c MAX_FISH; j++) {\n      if (j === i || !p.state[j]) continue;\n      if (p.kind[i] === TETRA && p.kind[j] === TETRA) continue;\n      const o = p.sprite[p.kind[j]];\n      if (p.x[j] > p.x[i] + s.w + 2 || p.x[j] + o.w + 2 \u003c p.x[i]) continue;\n      const dy = p.y[i] + s.h * 0.5 - (p.y[j] + o.h * 0.5);\n      const room = (s.h + o.h) * 0.5 + 2;\n      if (Math.abs(dy) \u003c room) push += (dy >= 0 ? 1 : -1) * (room - Math.abs(dy));\n    }\n  }\n  // A cruising fish takes the new depth as its own, so the two do not drift back together.\n  if (push !== 0 && st === 1 && p.kind[i] !== TETRA && tx \u003c 0) {\n    p.ty[i] = clamp(p.ty[i] + push * dt * 6, SURFACE + 4, FLOOR - 8 - s.h);\n    ty = p.ty[i];\n  } else ty += push * 3;\n  p.vy[i] += ((ty - p.y[i]) * 0.7 - p.vy[i]) * Math.min(1, dt * 1.5);\n  p.vy[i] = clamp(p.vy[i], -s.speed * 0.6, s.speed * 0.6);\n  p.y[i] = clamp(p.y[i] + p.vy[i] * dt, SURFACE + 2, FLOOR - 4 - s.h);\n  if (Math.abs(p.v[i]) > 0.8) p.face[i] = p.v[i] > 0 ? 1 : -1;\n  p.wag[i] += dt * (2.5 + Math.abs(p.v[i]) * 0.35);\n  if (st === 1) p.x[i] = clamp(p.x[i], 0, W - s.w);\n  else if (st === 3 && p.x[i] >= 0 && p.x[i] \u003c= W - s.w) p.state[i] = 1;\n  else if (st === 2 && (p.x[i] \u003c -s.w - 2 || p.x[i] > W + 2)) p.state[i] = 0;\n}\n\nfunction spawnBubble(p, x, y, age) {\n  for (let b = 0; b \u003c BUBBLES; b++) {\n    if (p.by[b] > 0) continue;\n    p.bx[b] = x;\n    p.by[b] = y;\n    p.bage[b] = age;\n    p.bph[b] = Math.random() * 6.28;\n    return;\n  }\n}\n\nfunction stepWorld(p, dt) {\n  p.t += dt;\n  // The school's leader cruises like a fish and turns at the glass.\n  p.lclock -= dt;\n  if (p.lclock \u003c= 0) {\n    p.lclock = 3 + Math.random() * 4;\n    p.lty = SURFACE + 16 + Math.random() * (FLOOR - SURFACE - 40);\n    p.lv = 8 + Math.random() * 6;\n    if (Math.random() \u003c 0.35) p.ldir = -p.ldir;\n  }\n  if (p.lx \u003c 10 && p.ldir \u003c 0) p.ldir = 1;\n  if (p.lx > W - 4 && p.ldir > 0) p.ldir = -1;\n  p.lx += p.ldir * p.lv * dt;\n  p.ly += (p.lty - p.ly) * Math.min(1, dt * 0.6);\n\n  p.claim.fill(0);\n  for (let i = 0; i \u003c MAX_FISH; i++) if (p.state[i]) swim(p, i, dt);\n\n  for (let f = 0; f \u003c FLAKES; f++) {\n    if (p.flakeLife[f] \u003c= 0) continue;\n    const ground = sandTop(clamp(Math.floor(p.fx[f]), 0, W - 1)) - 1;\n    if (p.fy[f] \u003c ground) {\n      p.fy[f] = Math.min(ground, p.fy[f] + dt * (4 + 1.5 * Math.sin(p.t * 3 + f)));\n      p.fx[f] = clamp(p.fx[f] + dt * Math.sin(p.t * 1.7 + f * 2.1) * 2.5, 1, W - 2);\n    } else {\n      p.flakeLife[f] -= dt;\n      if (p.flakeLife[f] \u003c= 0) p.food--;\n    }\n  }\n\n  p.chestClock -= dt;\n  if (p.chestClock \u003c= 0) {\n    if (p.chestOpen > 0) {\n      p.chestOpen = 0;\n      p.chestClock = 4 + Math.random() * 5;\n    } else {\n      p.chestOpen = 1;\n      p.chestClock = 1.3;\n      p.burst = 5 + Math.floor(Math.random() * 4);\n    }\n  }\n  if (p.chestOpen && p.burst > 0) {\n    p.burstClock -= dt;\n    if (p.burstClock \u003c= 0) {\n      p.burstClock = 0.09 + Math.random() * 0.1;\n      p.burst--;\n      spawnBubble(p, CHEST_X + 3.5 + (Math.random() - 0.5) * 4, p.chestY - 1, 1.2 + Math.random() * 1.8);\n    }\n  }\n  // Now and then a fish lets a small bubble go.\n  p.bclock -= dt;\n  if (p.bclock \u003c= 0) {\n    p.bclock = 1.5 + Math.random() * 3;\n    const i = Math.floor(Math.random() * MAX_FISH);\n    if (p.state[i] === 1) {\n      const s = p.sprite[p.kind[i]];\n      spawnBubble(p, p.x[i] + (p.face[i] > 0 ? s.w : -1), p.y[i] + s.h * 0.4, 0);\n    }\n  }\n  for (let b = 0; b \u003c BUBBLES; b++) {\n    if (p.by[b] \u003c= 0) continue;\n    p.bage[b] += dt;\n    p.by[b] -= dt * (13 + Math.min(2, p.bage[b] * 0.5) * 4);\n    if (p.by[b] \u003c= SURFACE + 1) p.by[b] = 0;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.sin = new Float32Array(SIN_N);\n  for (let i = 0; i \u003c SIN_N; i++) p.sin[i] = Math.sin((i / SIN_N) * Math.PI * 2);\n  p.sprite = KINDS.map(bake);\n  p.kind = new Uint8Array(MAX_FISH);\n  for (let i = 0; i \u003c MAX_FISH; i++) p.kind[i] = ORDER[i];\n  p.ox = new Float32Array(MAX_FISH);\n  p.oy = new Float32Array(MAX_FISH);\n  // Each tetra has its own place in the school, three abreast and staggered.\n  let n = 0;\n  for (let i = 0; i \u003c MAX_FISH; i++) {\n    if (p.kind[i] !== TETRA) continue;\n    const col = n % 3;\n    const rank = Math.floor(n / 3);\n    p.ox[i] = 1 + col * 9 + (rank & 1) * 4;\n    p.oy[i] = (col - 1) * 6 + ((rank % 3) - 1) * 2.5;\n    n++;\n  }\n  p.state = new Uint8Array(MAX_FISH);\n  p.x = new Float32Array(MAX_FISH);\n  p.y = new Float32Array(MAX_FISH);\n  p.v = new Float32Array(MAX_FISH);\n  p.vy = new Float32Array(MAX_FISH);\n  p.ty = new Float32Array(MAX_FISH);\n  p.dir = new Int8Array(MAX_FISH);\n  p.face = new Int8Array(MAX_FISH);\n  p.cruise = new Float32Array(MAX_FISH);\n  p.clock = new Float32Array(MAX_FISH);\n  p.wag = new Float32Array(MAX_FISH);\n  p.fx = new Float32Array(FLAKES);\n  p.fy = new Float32Array(FLAKES);\n  p.flakeLife = new Float32Array(FLAKES);\n  p.claim = new Uint8Array(FLAKES);\n  p.food = 0;\n  p.bx = new Float32Array(BUBBLES);\n  p.by = new Float32Array(BUBBLES);\n  p.bage = new Float32Array(BUBBLES);\n  p.bph = new Float32Array(BUBBLES);\n  p.bclock = 1;\n  p.chestOpen = 0;\n  p.chestClock = 1.5;\n  p.burst = 0;\n  p.burstClock = 0;\n  p.chest = bake(CHEST);\n  p.chestY = sandTop(CHEST_X + 4) - 7;\n  p.lx = W / 2;\n  p.ly = 60;\n  p.lty = 60;\n  p.ldir = 1;\n  p.lv = 10;\n  p.lclock = 0;\n  p.t = 0;\n  p.ready = false;\n\n  // The sand, the rocks and where each weed stands never change, so they are baked here.\n  p.ground = new Float32Array(W * H * 3);\n  p.solid = new Uint8Array(W * H);\n  for (let x = 0; x \u003c W; x++) {\n    const top = sandTop(x);\n    for (let y = top; y \u003c H; y++) {\n      const n = hash(x, y);\n      const o = (y * W + x) * 3;\n      const v = 0.5 + 0.18 * n - (y - top) * 0.012 + (y === top ? 0.12 : 0);\n      const pebble = n > 0.93 ? 0.6 : 1;\n      p.ground[o] = 214 * v * pebble;\n      p.ground[o + 1] = 176 * v * pebble;\n      p.ground[o + 2] = 118 * v * (n > 0.97 ? 1.6 : pebble);\n      p.solid[y * W + x] = 1;\n    }\n  }\n  const rocks = [\n    [52, FLOOR - 4, 10, 8],\n    [42, FLOOR - 1, 6, 4.5],\n    [9, FLOOR, 6, 3.5],\n  ];\n  for (const [cx, cy, rx, ry] of rocks) {\n    for (let y = Math.floor(cy - ry); y \u003c= cy + ry; y++) {\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const dx = (x + 0.5 - cx) / rx;\n        const dy = (y + 0.5 - cy) / ry;\n        const d = dx * dx + dy * dy;\n        if (d > 1) continue;\n        // Lit from above left in three flat steps, the way a sprite is shaded by hand.\n        const lit = -dx * 0.5 - dy * 0.8;\n        const step = lit > 0.45 ? 1.25 : lit > -0.25 ? 1 : 0.72;\n        const v = step * (0.92 + 0.12 * hash(x * 7, y * 3));\n        const o = (y * W + x) * 3;\n        p.ground[o] = 104 * v;\n        p.ground[o + 1] = 110 * v;\n        p.ground[o + 2] = 120 * v;\n        p.solid[y * W + x] = 1;\n      }\n    }\n  }\n  p.weedX = new Float32Array(WEEDS);\n  p.weedH = new Float32Array(WEEDS);\n  p.weedPh = new Float32Array(WEEDS);\n  for (let i = 0; i \u003c WEEDS; i++) {\n    p.weedX[i] = WEED_X[i];\n    p.weedH[i] = WEED_H[i];\n    p.weedPh[i] = Math.random() * 6.28;\n  }\n  p.weedStem = new Float32Array(WEEDS * 3);\n  p.weedLeaf = new Float32Array(WEEDS * 3);\n  for (let i = 0; i \u003c WEEDS; i++) {\n    rgbOf(WEED_STEM[i], p.weedStem, i * 3);\n    rgbOf(WEED_LEAF[i], p.weedLeaf, i * 3);\n  }\n  p.row = new Float32Array(H * 3);\n  p.fade = new Float32Array(H);\n  p.buf = new Float32Array(W * H * 3);\n  p.top = new Float32Array(3);\n  p.deep = new Float32Array(3);\n  p.cc = new Float32Array(3);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.water = clamp(k[0], 0, 1);\n  p.light = clamp(k[3], -1, 1);\n  const pace = Math.max(0.05, k[1] * 0.36);\n  const want = Math.round(clamp(k[2], 0, MAX_FISH));\n  if (!p.ready) {\n    p.ready = true;\n    for (let i = 0; i \u003c want; i++) placeFish(p, i, false);\n    p.ly = 40 + Math.random() * 40;\n    p.lty = p.ly;\n    // Fill the bubble column before the first frame.\n    for (let s = 0; s \u003c 120; s++) stepWorld(p, 1 / 30);\n  }\n  for (let i = 0; i \u003c MAX_FISH; i++) {\n    const st = p.state[i];\n    if (i \u003c want && (st === 0 || st === 2)) {\n      if (st === 0) placeFish(p, i, true);\n      else p.state[i] = 1;\n    } else if (i >= want && (st === 1 || st === 3)) {\n      const s = p.sprite[p.kind[i]];\n      p.state[i] = 2;\n      p.dir[i] = p.x[i] + s.w * 0.5 \u003c W / 2 ? -1 : 1;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    const cx = 8 + Math.random() * (W - 16);\n    for (let n = 0; n \u003c 7; n++) {\n      for (let f = 0; f \u003c FLAKES; f++) {\n        if (p.flakeLife[f] > 0) continue;\n        p.fx[f] = cx + (Math.random() - 0.5) * 10;\n        p.fy[f] = SURFACE + 1 + Math.random() * 2;\n        p.flakeLife[f] = 5 + Math.random() * 3;\n        p.food++;\n        break;\n      }\n    }\n  }\n  stepWorld(p, dt * pace);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const buf = p.buf;\n  const L = p.light;\n  const t = p.t;\n\n  // Water: the tint's two colours, darker with depth, and darker still at night.\n  const pos = p.water * (WATERS.length - 1);\n  const a = Math.min(WATERS.length - 2, Math.floor(pos));\n  const u = pos - a;\n  const top = p.top;\n  const deep = p.deep;\n  for (let c = 0; c \u003c 3; c++) {\n    const sh = 16 - c * 8;\n    top[c] = ((WATERS[a][0] >> sh) & 255) * (1 - u) + ((WATERS[a + 1][0] >> sh) & 255) * u;\n    deep[c] = ((WATERS[a][1] >> sh) & 255) * (1 - u) + ((WATERS[a + 1][1] >> sh) & 255) * u;\n  }\n  const lamp = L \u003c 0 ? 1 + 0.62 * L : 1;\n  const dark = 0.5 - 0.25 * L;\n  const glint = L \u003c 0 ? 0.4 * (1 + L) : 0.4 + 0.25 * L;\n  const reach = 17 + 60 * Math.max(0, L);\n  const cc = p.cc;\n  for (let c = 0; c \u003c 3; c++) cc[c] = 150 + top[c] * 0.45;\n  const row = p.row;\n  const fade = p.fade;\n  for (let y = 0; y \u003c H; y++) {\n    const d = clamp((y - SURFACE) / (FLOOR - SURFACE), 0, 1);\n    const v = 0.5 * lamp * (1 - dark * d);\n    for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = (top[c] * (1 - d) + deep[c] * d) * v;\n    fade[y] = glint * Math.exp(-(y - SURFACE) / reach);\n  }\n\n  const sandLight = 0.55 + 0.45 * lamp - 0.15 * Math.max(0, -L);\n  for (let y = 0; y \u003c H; y++) {\n    const f = fade[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const o = i * 3;\n      let r;\n      let g;\n      let b;\n      if (y \u003c SURFACE) {\n        r = 0;\n        g = 0;\n        b = 0;\n      } else if (p.solid[i]) {\n        r = p.ground[o] * sandLight;\n        g = p.ground[o + 1] * sandLight;\n        b = p.ground[o + 2] * sandLight;\n      } else {\n        r = row[y * 3];\n        g = row[y * 3 + 1];\n        b = row[y * 3 + 2];\n      }\n      if (y >= SURFACE && f > 0.03) {\n        // The net of light: bright where three slow waves cancel, cut into two flat steps.\n        const w1 = sinAt(p, x * 0.55 + t * 0.55 + 1.6 * sinAt(p, y * 0.17 + t * 0.3));\n        const w2 = sinAt(p, x * 0.31 - y * 0.42 - t * 0.45);\n        const w3 = sinAt(p, x * 0.16 + y * 0.27 + t * 0.23);\n        const s = 1 - Math.abs(w1 + w2 + w3 * 0.7) * 2.3;\n        if (s > 0) {\n          const step = (s > 0.45 ? 1 : 0.4) * f;\n          r += cc[0] * step;\n          g += cc[1] * step;\n          b += cc[2] * step;\n        }\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n\n  // The surface: a pale line that lifts a LED where a ripple passes.\n  for (let x = 0; x \u003c W; x++) {\n    const lift = sinAt(p, x * 0.35 - t * 2.1) + sinAt(p, x * 0.17 + t * 1.3) > 1.1 ? 1 : 0;\n    const o = ((SURFACE - lift) * W + x) * 3;\n    const v = 0.35 + 0.4 * lamp;\n    buf[o] = 120 * v + top[0] * 0.5;\n    buf[o + 1] = 150 * v + top[1] * 0.5;\n    buf[o + 2] = 170 * v + top[2] * 0.5;\n  }\n\n  const plant = 0.45 + 0.55 * lamp;\n  for (let i = 0; i \u003c WEEDS; i++) if (i !== 1 && i !== 5) drawWeed(p, i, plant);\n  drawSprite(p, p.chest, CHEST_X, p.chestY, p.chestOpen, true, 0.5 + 0.5 * lamp);\n\n  const fishLight = 0.5 + 0.5 * lamp;\n  // The school swims furthest back and the clownfish nearest, so a fish crossing another reads as depth.\n  for (let n = 0; n \u003c DRAW_ORDER.length; n++) {\n    const kind = DRAW_ORDER[n];\n    for (let i = 0; i \u003c MAX_FISH; i++) if (p.state[i] && p.kind[i] === kind) drawFish(p, i, fishLight);\n  }\n\n  // Two weeds stand in front of the fish, so a fish can pass behind them.\n  drawWeed(p, 1, plant);\n  drawWeed(p, 5, plant);\n\n  for (let f = 0; f \u003c FLAKES; f++) {\n    if (p.flakeLife[f] \u003c= 0) continue;\n    put(buf, Math.floor(p.fx[f]), Math.floor(p.fy[f]), 255 * fishLight, 196 * fishLight, 96 * fishLight);\n  }\n\n  for (let bI = 0; bI \u003c BUBBLES; bI++) {\n    const by = p.by[bI];\n    if (by \u003c= 0) continue;\n    const bx = p.bx[bI] + 1.1 * sinAt(p, p.bph[bI] + by * 0.27);\n    const size = p.bage[bI] \u003c 1.2 ? 0 : p.bage[bI] \u003c 2.8 ? 1 : 2;\n    const v = 0.55 + 0.35 * lamp;\n    if (size === 0) splat(buf, bx, by, 170 * v, 220 * v, 255 * v, 1);\n    else ring(buf, Math.round(bx), Math.round(by), size, 170 * v, 220 * v, 255 * v);\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// A point shared over its four nearest LEDs, so it glides instead of hopping.\nfunction splat(buf, px, py, r, g, b, amount) {\n  const x0 = Math.floor(px - 0.5);\n  const y0 = Math.floor(py - 0.5);\n  for (let yy = y0; yy \u003c= y0 + 1; yy++) {\n    if (yy \u003c SURFACE || yy >= H) continue;\n    const wy = 1 - Math.abs(yy + 0.5 - py);\n    for (let xx = x0; xx \u003c= x0 + 1; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = wy * (1 - Math.abs(xx + 0.5 - px)) * amount;\n      if (w \u003c= 0) continue;\n      const o = (yy * W + xx) * 3;\n      buf[o] += (r - buf[o]) * w;\n      buf[o + 1] += (g - buf[o + 1]) * w;\n      buf[o + 2] += (b - buf[o + 2]) * w;\n    }\n  }\n}\n\n// A bubble: a diamond of four LEDs, or a round one of eight with a glint.\nfunction ring(buf, cx, cy, size, r, g, b) {\n  if (size === 1) {\n    put(buf, cx, cy - 1, r, g, b);\n    put(buf, cx - 1, cy, r, g, b);\n    put(buf, cx + 1, cy, r, g, b);\n    put(buf, cx, cy + 1, r, g, b);\n  } else {\n    put(buf, cx, cy - 1, r, g, b);\n    put(buf, cx + 1, cy - 1, r, g, b);\n    put(buf, cx - 1, cy, r, g, b);\n    put(buf, cx + 2, cy, r, g, b);\n    put(buf, cx - 1, cy + 1, r, g, b);\n    put(buf, cx + 2, cy + 1, r, g, b);\n    put(buf, cx, cy + 2, r, g, b);\n    put(buf, cx + 1, cy + 2, r, g, b);\n    put(buf, cx, cy, 255, 255, 255);\n  }\n}\n\nfunction drawFish(p, i, light) {\n  drawSprite(p, p.sprite[p.kind[i]], Math.round(p.x[i]), Math.round(p.y[i]), Math.floor(p.wag[i]) & 1, p.face[i] > 0, light);\n}\n\nfunction drawSprite(p, s, ix, iy, frame, right, light) {\n  const buf = p.buf;\n  const base = frame * s.w * s.h;\n  for (let y = 0; y \u003c s.h; y++) {\n    const yy = iy + y;\n    if (yy \u003c SURFACE || yy >= H) continue;\n    for (let x = 0; x \u003c s.w; x++) {\n      const c = s.pix[base + y * s.w + x];\n      if (!c) continue;\n      const xx = ix + (right ? x : s.w - 1 - x);\n      if (xx \u003c 0 || xx >= W) continue;\n      const o = (yy * W + xx) * 3;\n      buf[o] = s.pal[c * 3] * light;\n      buf[o + 1] = s.pal[c * 3 + 1] * light;\n      buf[o + 2] = s.pal[c * 3 + 2] * light;\n    }\n  }\n}\n\nfunction drawWeed(p, i, light) {\n  const buf = p.buf;\n  const h = p.weedH[i];\n  const bx = p.weedX[i];\n  const base = sandTop(bx) + 1;\n  const sr = p.weedStem[i * 3] * light;\n  const sg = p.weedStem[i * 3 + 1] * light;\n  const sb = p.weedStem[i * 3 + 2] * light;\n  const lr = p.weedLeaf[i * 3] * light;\n  const lg = p.weedLeaf[i * 3 + 1] * light;\n  const lb = p.weedLeaf[i * 3 + 2] * light;\n  const t = p.t;\n  for (let r = 0; r \u003c h; r++) {\n    const y = base - r;\n    if (y \u003c SURFACE + 2) break;\n    const s = r / h;\n    // The tip sways most, and the sway runs up the stem a little late.\n    const off = 4.2 * s * s * sinAt(p, t * 0.85 + p.weedPh[i] - s * 2.4);\n    const x = Math.round(bx + off);\n    put(buf, x, y, sr, sg, sb);\n    if (r \u003c h - 8) put(buf, x + 1, y, sr, sg, sb);\n    const gap = WEED_GAP[i];\n    if (r > 3 && r % gap === 0 && r \u003c h - 2) {\n      const side = (r / gap) & 1 ? 1 : -1;\n      const lx = side > 0 ? x + (r \u003c h - 8 ? 2 : 1) : x - 1;\n      put(buf, lx, y, lr, lg, lb);\n      put(buf, lx + side, y - 1, lr, lg, lb);\n      // Lower leaves are longer.\n      if (s \u003c 0.6) put(buf, lx + side * 2, y - 2, lr, lg, lb);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Water=0..1, Swim=0.2..4, Fish=6..18, Light=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Water","min":0,"max":1,"about":"The tint of the water, from clear blue through lagoon teal and planted green to tea-brown blackwater and violet."},{"name":"Swim","min":0.2,"max":4,"about":"How fast the whole tank moves, fish, weed, bubbles and light, from slow motion to a feeding rush."},{"name":"Fish","min":6,"max":18,"about":"How many fish live in the tank; new ones swim in from the side and spare ones swim out."},{"name":"Light","min":-1,"max":1,"about":"Below 0 the lamp dims towards night and the deep water goes dark; above 0 the sun is out and the net of light reaches the sand."}],"start":[0,2,6,0.06],"measures":{"motion":0.1521,"detail":0.0707,"edges":0.4986,"complexity":0.73,"coverage":0.9459,"colour":0.2752,"drift":0.0492},"knobResponse":[0.1007,0.0662,0.0696,0.1627]},{"slug":"aurora","title":"Aurora","family":"light","round":1,"note":"떠도는 선에 빛 커튼이 걸리고, 빛줄기는 커튼이 흔들리는 것보다 느리게 일렁여요.","idea":"Curtains of light hang from a line that wanders, and their rays shimmer slower than they sway.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Aurora\n// Family:  light\n// Idea:    Curtains of light hang from a line that wanders, and their rays shimmer slower than they sway.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Sway=0..1, Speed=0.1..5, Curtains=1..4, Rays=0..1\n// @ramp oklab 0:#000000 0.18:#04122e 0.45:#0b6b5a 0.72:#3dff9a 0.9:#b8ffd9 1:#f0c8ff\n//\n// Knob 1: Sway. How far the curtains swing from side to side.\n// Knob 2: Speed. How fast everything drifts.\n// Knob 3: Curtains. One curtain or a sky of up to four, each its own height.\n// Knob 4: Rays. From a smooth glow to sharp vertical rays.\n\nfunction hash(n) {\n  const s = Math.sin(n * 127.1) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nfunction noise(x) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i) * (1 - u) + hash(i + 1) * u;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.field = new Float32Array(64 * 128);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  params.sway = k[0];\n  params.speed = k[1];\n  params.curtains = k[2];\n  params.rays = k[3];\n  params.t += dt * params.speed * 0.25;\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const t = params.t;\n  const field = params.field;\n  field.fill(0);\n  const count = Math.max(1, Math.min(4, Math.round(params.curtains)));\n  const swing = 8 + params.sway * 30;\n  // A few stars behind it all, each on its own slow twinkle.\n  for (let s = 0; s \u003c 46; s++) {\n    const sx = Math.floor(hash(s * 3.7) * w);\n    const sy = Math.floor(hash(s * 9.1) * h * 0.8);\n    field[sy * w + sx] = 0.2 + 0.14 * Math.sin(t * 6 + s * 2.3);\n  }\n  const sharp = 1 + params.rays * 3;\n  for (let c = 0; c \u003c count; c++) {\n    const seed = c * 17.3;\n    // One curtain hangs low; more of them stack up the sky, the far ones dimmer.\n    // The sky is tall, so the hems sit low and the rays climb most of it.\n    const base = count === 1 ? h * 0.74 : h * (0.84 - 0.52 * (c / (count - 1)));\n    const strength = (1 - c * 0.14) / Math.sqrt(count * 0.8);\n    const height = 70 - c * 8;\n    for (let x = 0; x \u003c w; x++) {\n      // Folds a little tighter than on the wide panel, so 64 columns still hold two or three.\n      const fold = noise(x * 0.05 + t * 0.9 + seed) * 2 - 1;\n      const line = base + fold * swing * 0.5 + Math.sin(x * 0.075 + t * 1.7 + seed) * swing * 0.25;\n      const ray = noise(x * 0.32 + t * 0.35 + seed * 3);\n      const streak = Math.pow(ray, sharp) * (0.7 + params.rays * 0.6) + (1 - params.rays) * 0.3;\n      const glow = (0.6 + 0.4 * noise(x * 0.02 - t * 0.6 + seed)) * strength;\n      const top = line - height - ray * 22;\n      for (let y = 0; y \u003c h; y++) {\n        let v = 0;\n        if (y \u003c= line) {\n          // Bright at the hem, fading upward into the rays.\n          const up = (line - y) / (line - top);\n          v = up \u003c 1 ? Math.pow(1 - up, 1.3) * streak * 1.25 : 0;\n        } else {\n          v = Math.exp(-(y - line) * 0.5) * 0.9;\n        }\n        const i = y * w + x;\n        field[i] = Math.min(1, field[i] + v * glow);\n      }\n    }\n  }\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) display.setValue(x, y, field[y * w + x]);\n  }\n}\n","layer":{"id":"layer-aurora","type":"code","name":"aurora","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Aurora\n// Family:  light\n// Idea:    Curtains of light hang from a line that wanders, and their rays shimmer slower than they sway.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Sway=0..1, Speed=0.1..5, Curtains=1..4, Rays=0..1\n\n//\n// Knob 1: Sway. How far the curtains swing from side to side.\n// Knob 2: Speed. How fast everything drifts.\n// Knob 3: Curtains. One curtain or a sky of up to four, each its own height.\n// Knob 4: Rays. From a smooth glow to sharp vertical rays.\n\nfunction hash(n) {\n  const s = Math.sin(n * 127.1) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nfunction noise(x) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i) * (1 - u) + hash(i + 1) * u;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.field = new Float32Array(64 * 128);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  params.sway = k[0];\n  params.speed = k[1];\n  params.curtains = k[2];\n  params.rays = k[3];\n  params.t += dt * params.speed * 0.25;\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const t = params.t;\n  const field = params.field;\n  field.fill(0);\n  const count = Math.max(1, Math.min(4, Math.round(params.curtains)));\n  const swing = 8 + params.sway * 30;\n  // A few stars behind it all, each on its own slow twinkle.\n  for (let s = 0; s \u003c 46; s++) {\n    const sx = Math.floor(hash(s * 3.7) * w);\n    const sy = Math.floor(hash(s * 9.1) * h * 0.8);\n    field[sy * w + sx] = 0.2 + 0.14 * Math.sin(t * 6 + s * 2.3);\n  }\n  const sharp = 1 + params.rays * 3;\n  for (let c = 0; c \u003c count; c++) {\n    const seed = c * 17.3;\n    // One curtain hangs low; more of them stack up the sky, the far ones dimmer.\n    // The sky is tall, so the hems sit low and the rays climb most of it.\n    const base = count === 1 ? h * 0.74 : h * (0.84 - 0.52 * (c / (count - 1)));\n    const strength = (1 - c * 0.14) / Math.sqrt(count * 0.8);\n    const height = 70 - c * 8;\n    for (let x = 0; x \u003c w; x++) {\n      // Folds a little tighter than on the wide panel, so 64 columns still hold two or three.\n      const fold = noise(x * 0.05 + t * 0.9 + seed) * 2 - 1;\n      const line = base + fold * swing * 0.5 + Math.sin(x * 0.075 + t * 1.7 + seed) * swing * 0.25;\n      const ray = noise(x * 0.32 + t * 0.35 + seed * 3);\n      const streak = Math.pow(ray, sharp) * (0.7 + params.rays * 0.6) + (1 - params.rays) * 0.3;\n      const glow = (0.6 + 0.4 * noise(x * 0.02 - t * 0.6 + seed)) * strength;\n      const top = line - height - ray * 22;\n      for (let y = 0; y \u003c h; y++) {\n        let v = 0;\n        if (y \u003c= line) {\n          // Bright at the hem, fading upward into the rays.\n          const up = (line - y) / (line - top);\n          v = up \u003c 1 ? Math.pow(1 - up, 1.3) * streak * 1.25 : 0;\n        } else {\n          v = Math.exp(-(y - line) * 0.5) * 0.9;\n        }\n        const i = y * w + x;\n        field[i] = Math.min(1, field[i] + v * glow);\n      }\n    }\n  }\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) display.setValue(x, y, field[y * w + x]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":0.18,"color":"#04122e","alpha":1},{"position":0.45,"color":"#0b6b5a","alpha":1},{"position":0.72,"color":"#3dff9a","alpha":1},{"position":0.9,"color":"#b8ffd9","alpha":1},{"position":1,"color":"#f0c8ff","alpha":1}],"mode":"oklab","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sway=0..1, Speed=0.1..5, Curtains=1..4, Rays=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sway","min":0,"max":1,"about":"How far the curtains swing from side to side."},{"name":"Speed","min":0.1,"max":5,"about":"How fast everything drifts."},{"name":"Curtains","min":1,"max":4,"about":"One curtain or a sky of up to four, each its own height."},{"name":"Rays","min":0,"max":1,"about":"From a smooth glow to sharp vertical rays."}],"start":[0,2,1,0.06],"measures":{"motion":0.0423,"detail":0.0219,"edges":0.176,"complexity":1.1219,"coverage":0.4849,"colour":0.2574,"drift":0.0814},"knobResponse":[0.0412,0.0639,0.142,0.0829]},{"slug":"axon","title":"Axon","family":"body","round":23,"note":"어두운 조직 속에서 신경세포 하나가 초록 형광으로 빛나요. 세포체를 떠난 스파이크가 수초 사이의 랑비에 결절을 하나씩 건너뛰며 축삭을 내려가고, 말단 단추가 시냅스 틈 너머로 신호를 넘기면 아래의 자홍색 신경세포가 따라 켜져요. K4 를 올리면 수초가 벗겨져 신호가 기어가다 꺼져요.","idea":"A neuron glows green in a fluorescence micrograph of dark tissue, and each burst it fires leaves the cell body and leaps down the myelinated axon from one node of Ranvier to the next until the terminals spill glowing vesicles across the clefts onto a second neuron, which lights up in turn.","buttons":"K1 tap fires a burst of four spikes now.","code":"// ===== Patternflow pattern =====\n// Title:   Axon\n// Family:  body\n// Idea:    A neuron glows green in a fluorescence micrograph of dark tissue, and each burst it fires leaves the cell body and leaps down the myelinated axon from one node of Ranvier to the next until the terminals spill glowing vesicles across the clefts onto a second neuron, which lights up in turn.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after Santiago Ramón y Cajal's drawings of neurons and fluorescence microscopy\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dye=0..1, Speed=0.2..3, Rate=1..8, Damage=0..1\n//\n// Knob 1: Dye. The fluorescent labels, turning round the colour wheel together. At 0 the neuron is GFP green and the second neuron magenta, on cream myelin with blue nuclei.\n// Knob 2: Speed. The clock of the whole slide: at 2 a healthy spike takes about a second from the cell body to the terminals, and at 0.2 everything runs ten times slower.\n// Knob 3: Rate. How often the neuron fires: a burst of three spikes every 1.8 s at 1, up to about nine spikes a second at 8.\n// Knob 4: Damage. Demyelination. At 0 the sheaths are whole and a spike leaps from node to node. As it rises the sheaths thin and break, and the spike crawls through the bare stretches, fading as it goes. Past about 0.3 the second neuron no longer answers, and near 1 the spike dies in the bare axon before it reaches the terminals.\n// Buttons: K1 tap fires a burst of four spikes now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, abs, exp, sin, cos, hypot, floor, ceil, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\n\n// The axon's centre line, a gentle S from the hillock down to where it branches.\nconst AX = (y) => 32 + 2.6 * sin((y - 28) * 0.07);\nconst YH = 28;\n// Four sheaths 11 rows long, each followed by a bare node two rows long.\nconst NSH = 4, SA = 39.5, SL = 11, SP = 13;\nconst sa = (k) => SA + SP * k;\nconst sb = (k) => sa(k) + SL;\n// Where a spike flashes: the end of the initial segment, then each node.\nconst NODE = [SA - 0.5, sb(0) + 1, sb(1) + 1, sb(2) + 1, sb(3) + 1];\nconst YB = sb(3) + 2.5;\n// Conduction in LEDs a second of slide time.\nconst V_AIS = 60, V_FAST = 110, V_SLOW = 14, V_NODE = 40, V_TERM = 45;\n// The boutons, and how far below each the second neuron's spine sits.\nconst BOUT = [[9, 101], [20, 105], [31, 103], [42, 106], [54, 100]];\nconst CLEFT = 6, S1 = [32, 23], S2 = [33, 121];\n\n// Distance to a segment; T is how far along it the nearest point lies.\nlet T = 0;\nfunction seg(px, py, ax, ay, bx, by) {\n  const dx = bx - ax, dy = by - ay;\n  T = clamp(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return hypot(px - ax - dx * T, py - ay - dy * T);\n}\n\n// A tapered stroke into layer L, kept by the brighter of old and new. With a\n// record R it also notes, LED by LED, how far along a branch the stroke is.\nfunction stroke(L, ax, ay, bx, by, ra, rb, wt, R) {\n  const r = max(ra, rb) + 1;\n  const x0 = max(0, floor(min(ax, bx) - r));\n  const x1 = min(W - 1, ceil(max(ax, bx) + r));\n  const y0 = max(0, floor(min(ay, by) - r));\n  const y1 = min(H - 1, ceil(max(ay, by) + r));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const d = seg(x + 0.5, y + 0.5, ax, ay, bx, by) - (ra + (rb - ra) * T);\n      const v = clamp(0.5 - d, 0, 1) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n      if (R && v > R.c[i]) {\n        R.c[i] = v;\n        R.s[i] = R.s0 + T * R.len;\n        R.b[i] = R.id;\n      }\n    }\n}\n\nfunction blob(L, cx, cy, rx, ry, wt, soft) {\n  const s = soft || 1;\n  for (let y = max(0, floor(cy - ry - 2)); y \u003c= min(H - 1, ceil(cy + ry + 2)); y++)\n    for (let x = max(0, floor(cx - rx - 2)); x \u003c= min(W - 1, ceil(cx + rx + 2)); x++) {\n      const d = (hypot((x + 0.5 - cx) / rx, (y + 0.5 - cy) / ry) - 1) * min(rx, ry);\n      const v = clamp(0.5 - d / s, 0, 1) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n    }\n}\n\n// A dendrite: short strokes that wander and thin out, forking now and then\n// and set with spines.\nfunction grow(L, x, y, a, w, len, depth, wt, spines) {\n  let s = 0;\n  while (s \u003c len) {\n    const nx = x + cos(a) * 1.5;\n    const ny = y + sin(a) * 1.5;\n    const nw = max(0.42, w * 0.975);\n    stroke(L, x, y, nx, ny, w, nw, wt);\n    if (spines && rnd() \u003c 0.28) {\n      const side = rnd() \u003c 0.5 ? 1 : -1;\n      stroke(L, nx, ny, nx - sin(a) * side * (w + 1.3), ny + cos(a) * side * (w + 1.3), 0.3, 0.55, wt * 0.8);\n    }\n    (x = nx), (y = ny), (w = nw), (s += 1.5);\n    a += (rnd() - 0.5) * 0.36;\n    if (x \u003c -4 || x > W + 4 || y \u003c -4 || y > H + 4) return;\n    if (depth > 0 && s > 4 && rnd() \u003c 0.1) {\n      const turn = (0.35 + 0.45 * rnd()) * (rnd() \u003c 0.5 ? 1 : -1);\n      grow(L, x, y, a + turn, w * 0.8, (len - s) * 0.85 + 3, depth - 1, wt, spines);\n      a -= turn * 0.4;\n    }\n  }\n}\n\n// A quadratic curve of strokes from p to q bent toward c. Returns its length.\nfunction curve(L, p, c, q, r0, r1, wt, R) {\n  let px = p[0], py = p[1], s = 0;\n  for (let j = 1; j \u003c= 14; j++) {\n    const u = j / 14, v = 1 - u;\n    const qx = v * v * p[0] + 2 * u * v * c[0] + u * u * q[0];\n    const qy = v * v * p[1] + 2 * u * v * c[1] + u * u * q[1];\n    const len = hypot(qx - px, qy - py);\n    if (R) (R.s0 = s), (R.len = len);\n    stroke(L, px, py, qx, qy, r0 + ((r1 - r0) * (j - 1)) / 14, r0 + (r1 - r0) * u, wt, R);\n    s += len;\n    (px = qx), (py = qy);\n  }\n  return s;\n}\n\nfunction blur(L) {\n  const o = F32(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++)\n      o[y * W + x] = 0.25 * L[y * W + max(0, x - 1)] + 0.5 * L[y * W + x] + 0.25 * L[y * W + min(W - 1, x + 1)];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++)\n      L[y * W + x] = 0.25 * o[max(0, y - 1) * W + x] + 0.5 * o[y * W + x] + 0.25 * o[min(H - 1, y + 1) * W + x];\n}\n\n// A nucleus is dark in the cell's own label and blue in the nuclear stain.\nfunction nucleus(D, NU, x, y, rx, ry) {\n  const m = F32(N);\n  blob(m, x, y, rx, ry, 1);\n  for (let i = 0; i \u003c N; i++) if (m[i] > 0) (D[i] *= 1 - 0.7 * m[i]), (NU[i] = max(NU[i], 0.8 * m[i]));\n}\n\n// Merge a layer into the neighbours' layer, noting whose each LED is.\nfunction merge(S, L, j) {\n  for (let i = 0; i \u003c N; i++) if (L[i] > S.NB[i]) (S.NB[i] = L[i]), (S.NBI[i] = j);\n}\n\n// Copy a piece into the damageable layer with its breaking point.\nfunction mark(GD, GZ, L, z) {\n  for (let i = 0; i \u003c N; i++)\n    if (L[i] > GD[i]) {\n      GD[i] = L[i];\n      GZ[i] = z + 0.08 * rnd();\n    }\n}\n\nexport function setup(params) {\n  const S = {\n    D1: F32(N), X1: F32(N), X1v: F32(N), D2: F32(N), NU: F32(N), NB: F32(N), NBI: new Uint8Array(N),\n    GL: F32(N), GD: F32(N), GZ: F32(N), GV: F32(N), TI: F32(N), H1: F32(N), H2: F32(N), MY: F32(N), SP1: F32(N), SP2: F32(N),\n    t: 0, next: 0.5, q: [], sp: [], ves: [], ca1: 0, v2: 0, ca2: 0, f2: 0,\n    caN: [0, 0, 0, 0], Fs: F32(5), Fn: F32(5), Fb: F32(5),\n    m: F32(NSH), mr: F32(NSH), nz: F32(NSH * 14),\n    tN: F32(5), aN: F32(5), tA: F32(NSH), tB: F32(NSH), AA: F32(NSH), AB: F32(NSH), tBo: F32(5), blen: F32(5),\n    dye: -1, dmg: -1, na: [],\n  };\n  params.s = S;\n  const { D1, X1, D2, NU, GL, TI } = S;\n\n  // The neuron: a pyramid of a cell body whose apical dendrite climbs to a\n  // tuft at the top edge. The basal dendrites spread to the sides.\n  blob(D1, S1[0], S1[1] + 0.5, 7, 6, 0.85);\n  stroke(D1, 32, 21, 32, 13, 4.6, 1.3, 0.85);\n  stroke(D1, 32, 27.5, AX(31.5), 31.5, 2.6, 0.9, 0.85);\n  grow(D1, 32, 13.5, -PI / 2 + (rnd() - 0.5) * 0.2, 1.25, 18, 3, 0.85, true);\n  grow(D1, 32, 9.5, -PI / 2 - 0.9, 0.8, 22, 1, 0.8, true);\n  grow(D1, 32, 8, -PI / 2 + 0.9, 0.8, 22, 1, 0.8, true);\n  grow(D1, 26.5, 27, 2.3, 1.1, 26, 2, 0.85, true);\n  grow(D1, 37.5, 27, 0.85, 1.1, 26, 2, 0.85, true);\n  grow(D1, 25.5, 21, PI + 0.3, 1.05, 24, 2, 0.85, true);\n  grow(D1, 38.5, 21, -0.3, 1.05, 24, 2, 0.85, true);\n  grow(D1, 28.5, 29, 1.95, 0.8, 14, 1, 0.8, true);\n  grow(D1, 35.5, 29, 1.2, 0.8, 14, 1, 0.8, true);\n  nucleus(D1, NU, S1[0] + 0.4, S1[1] + 0.3, 3.2, 3.6);\n  NU[22 * W + 33] *= 0.4;\n\n  // The axon as a tube of LEDs, row by row, for the myelin and the spikes.\n  const tI = [], tY = [], tR = [], tK = [], tJ = [];\n  S.row = new Int32Array(H + 2);\n  for (let y = 0; y \u003c H; y++) {\n    S.row[y] = tI.length;\n    if (y \u003c YH || y > YB + 1) continue;\n    const yc = y + 0.5, ax = AX(yc), sl = 0.182 * cos((yc - 28) * 0.07);\n    for (let x = max(0, floor(ax - 5)); x \u003c= min(W - 1, ceil(ax + 5)); x++) {\n      const r = (x + 0.5 - ax) / Math.sqrt(1 + sl * sl);\n      let k = -1;\n      for (let j = 0; j \u003c NSH; j++) if (yc >= sa(j) - 0.5 && yc \u003c= sb(j) + 0.5) k = j;\n      tI.push(y * W + x), tY.push(yc), tR.push(r), tK.push(k), tJ.push(rnd());\n      const rr = 0.7 + 0.3 * clamp((SA - yc) / 10, 0, 1);\n      X1[y * W + x] = max(X1[y * W + x], clamp(rr + 0.5 - abs(r), 0, 1) * 0.8);\n    }\n  }\n  S.row[H] = S.row[H + 1] = tI.length;\n  [S.tI, S.tY, S.tR, S.tK, S.tJ] = [Int32Array.from(tI), Float32Array.from(tY), Float32Array.from(tR), Int8Array.from(tK), Float32Array.from(tJ)];\n  for (let k = 0; k \u003c NSH; k++) {\n    S.mr[k] = rnd();\n    let a = rnd();\n    for (let j = 0; j \u003c 14; j++) {\n      const b = rnd();\n      (S.nz[k * 14 + j] = 0.5 * a + 0.5 * b), (a = b);\n    }\n  }\n\n  // The terminal arbor: five branches fanning out from the last node to the\n  // boutons, each LED tagged with how far along its branch it lies.\n  const R = { c: F32(N), s: F32(N), b: new Int8Array(N), s0: 0, len: 0, id: 0 };\n  const P = [AX(YB), YB];\n  BOUT.forEach((B, b) => {\n    R.id = b;\n    const C = [P[0] + (B[0] - P[0]) * 0.5, P[1] + (B[1] - P[1]) * 0.2 + 1];\n    S.blen[b] = curve(X1, P, C, B, 0.65, 0.5, 0.8, R);\n    blob(X1, B[0], B[1], 1.8, 1.6, 0.95);\n  });\n  const ti = [], ts = [], tb = [], tc = [];\n  for (let i = 0; i \u003c N; i++)\n    if (R.c[i] > 0.05) ti.push(i), ts.push(R.s[i]), tb.push(R.b[i]), tc.push(R.c[i]);\n  [S.ti, S.ts, S.tb, S.tc] = [Int32Array.from(ti), Float32Array.from(ts), Int8Array.from(tb), Float32Array.from(tc)];\n\n  // The second neuron below: its dendrites rise to a spine under each bouton.\n  blob(D2, S2[0], S2[1], 7, 5.4, 0.85);\n  stroke(D2, 33, 118, 32, 112, 3.8, 1.1, 0.85);\n  BOUT.forEach((B) => {\n    const sx = B[0], sy = B[1] + CLEFT;\n    const st = [33 + (sx - 33) * 0.22, abs(sx - 33) \u003c 4 ? 112 : 117];\n    curve(D2, st, [sx * 0.8 + st[0] * 0.2, st[1] - 1], [sx, sy + 2.5], 1.1, 0.55, 0.8);\n    stroke(D2, sx, sy + 2.5, sx, sy + 0.8, 0.4, 0.5, 0.8);\n    blob(D2, sx, sy, 1.3, 1.1, 0.95);\n  });\n  grow(D2, 27, 124, PI - 0.15, 1, 24, 2, 0.8, true);\n  grow(D2, 39, 124, 0.12, 1, 24, 2, 0.8, true);\n  grow(D2, 28, 118, PI + 0.6, 0.8, 12, 1, 0.75, true);\n  grow(D2, 38, 118, -0.6, 0.8, 12, 1, 0.75, true);\n  nucleus(D2, NU, S2[0] + 0.3, S2[1] + 0.5, 3.2, 2.8);\n\n  // Neighbouring neurons, out of focus, each with a calcium flicker of its own.\n  [[8, 36], [56, 58], [9, 84]].forEach((c, j) => {\n    const L = F32(N), x = c[0] + (rnd() - 0.5) * 4, y = c[1] + (rnd() - 0.5) * 6;\n    blob(L, x, y, 3.2, 2.8, 0.7);\n    for (let d = 0; d \u003c 4; d++) grow(L, x, y, (d / 4) * 2 * PI + rnd(), 0.8, 10 + 8 * rnd(), 1, 0.65, false);\n    blur(L);\n    merge(S, L, j);\n    blob(NU, x, y, 1.8, 1.6, 0.3, 2);\n  });\n\n  // Two myelinated axons of other cells cross behind, with nodes of their\n  // own. Their sheaths and the oligodendrocytes go into GD, the layer that\n  // Damage takes apart, each piece with its own breaking point in GZ.\n  const { GD, GZ } = S;\n  const tmp = F32(N);\n  [[-3, 47 + rnd() * 4, 67, 43 + rnd() * 4], [-3, 69 + rnd() * 4, 67, 82 + rnd() * 4]].forEach((A, n) => {\n    const len = hypot(A[2] - A[0], A[3] - A[1]), ux = (A[2] - A[0]) / len, uy = (A[3] - A[1]) / len;\n    const bow = (n ? -3 : 3) * (0.6 + 0.4 * rnd());\n    const at = (s) => [A[0] + ux * s - uy * bow * sin((PI * s) / len), A[1] + uy * s + ux * bow * sin((PI * s) / len)];\n    const nodes = [];\n    for (let s = 2 + rnd() * 8; s \u003c len; s += 10) nodes.push(at(s));\n    for (let j = 0; j \u003c nodes.length - 1; j++) {\n      const p = nodes[j], q = nodes[j + 1], dx = (q[0] - p[0]) / 10, dy = (q[1] - p[1]) / 10;\n      tmp.fill(0);\n      sheath(tmp, p[0] + dx * 1.2, p[1] + dy * 1.2, q[0] - dx * 1.2, q[1] - dy * 1.2, 1.5, 0.27);\n      mark(GD, GZ, tmp, 0.15 + 0.85 * rnd());\n    }\n    tmp.fill(0);\n    for (const p of nodes) blob(tmp, p[0], p[1], 0.6, 0.6, 0.4);\n    merge(S, tmp, 3);\n    S.na.push({ nodes, sp: [] });\n  });\n\n  // Oligodendrocytes, the glia that wrap the sheaths, reaching to the axon.\n  const og = [[19 + rnd() * 3, 61, -1, [55, 66]], [44 + rnd() * 3, 76, 1, [70, 82]]];\n  for (const [x, y, side, ys] of og) {\n    tmp.fill(0);\n    blob(tmp, x, y, 2.2, 1.9, 0.6);\n    for (const ty of ys) {\n      const tx = AX(ty) + side * 2.4;\n      curve(tmp, [x, y], [(x + tx) / 2, y + (ty - y) * 0.15 + (rnd() - 0.5) * 3], [tx, ty], 0.5, 0.42, 0.34);\n    }\n    mark(GD, GZ, tmp, 0.35 + 0.3 * rnd());\n  }\n  // Astrocytes, small stars of fine processes.\n  for (const [x, y] of [[54, 31], [52, 95], [12, 70]]) {\n    blob(GL, x, y, 1.3, 1.2, 0.42);\n    for (let d = 0; d \u003c 8; d++) grow(GL, x, y, (d / 8) * 2 * PI + rnd() * 0.7, 0.5, 3 + 6 * rnd(), 0, 0.22 + 0.1 * rnd(), false);\n  }\n  // Nuclei of every other cell in the slice, in the blue stain.\n  for (let n = 0; n \u003c 26; n++) {\n    const x = rnd() * W, y = rnd() * H;\n    if (hypot(x - S1[0], y - S1[1]) \u003c 10 || hypot(x - S2[0], y - S2[1]) \u003c 10) continue;\n    if (y > 26 && y \u003c 94 && abs(x - AX(y)) \u003c 5) continue;\n    blob(NU, x, y, 1.4 + rnd() * 0.8, 1.2 + rnd() * 0.6, 0.2 + rnd() * 0.16, 1.5);\n  }\n  // Dark tissue: a faint, uneven autofluorescence.\n  const g = F32(9 * 17).map(rnd), g2 = F32(17 * 33).map(rnd);\n  const samp = (G, gw, x, y) => {\n    const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, at = (a, b) => G[b * gw + a];\n    return (at(ix, iy) * (1 - fx) + at(ix + 1, iy) * fx) * (1 - fy) + (at(ix, iy + 1) * (1 - fx) + at(ix + 1, iy + 1) * fx) * fy;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const n = 0.65 * samp(g, 9, x / 8, y / 8) + 0.35 * samp(g2, 17, x / 4, y / 4);\n      TI[y * W + x] = 0.02 + 0.055 * n * n;\n      S.H1[y * W + x] = exp(-((x + 0.5 - S1[0]) ** 2 + (y + 0.5 - S1[1]) ** 2) / 240);\n      S.H2[y * W + x] = exp(-((x + 0.5 - S2[0]) ** 2 + (y + 0.5 - S2[1]) ** 2) / 240);\n    }\n}\n\n// A sheath seen from above: bright walls and a dark line down the middle.\nfunction sheath(L, ax, ay, bx, by, R, wt) {\n  for (let y = max(0, floor(min(ay, by) - R - 1)); y \u003c= min(H - 1, ceil(max(ay, by) + R + 1)); y++)\n    for (let x = max(0, floor(min(ax, bx) - R - 1)); x \u003c= min(W - 1, ceil(max(ax, bx) + R + 1)); x++) {\n      const d = seg(x + 0.5, y + 0.5, ax, ay, bx, by);\n      const v = clamp(R + 0.5 - d, 0, 1) * (0.3 + 0.7 * sstep(0.1, R, d)) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n    }\n}\n\nfunction hsv(h, s, v) {\n  h = ((h % 1) + 1) % 1;\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction colours(S, dye) {\n  S.dye = dye;\n  const h = 0.33 + dye;\n  S.c1 = hsv(h, 0.88, 1);\n  S.c2 = hsv(h + 0.53, 0.78, 1);\n  S.cm = hsv(h - 0.21, 0.3, 1);\n  S.cn = hsv(h + 0.31, 0.8, 1);\n  S.ct = hsv(h + 0.2, 0.55, 1);\n}\n\n// The sheaths for this much damage: each thins and breaks by its own measure.\nfunction myelin(S, dmg) {\n  S.dmg = dmg;\n  for (let k = 0; k \u003c NSH; k++) S.m[k] = clamp(1 - dmg * (0.8 + 0.7 * S.mr[k]), 0, 1);\n  const { tI, tY, tR, tK, tJ, MY, X1, X1v } = S;\n  X1v.set(X1);\n  for (let j = 0; j \u003c tI.length; j++) {\n    const i = tI[j], k = tK[j];\n    MY[i] = 0;\n    if (k \u003c 0) continue;\n    const m = S.m[k], y = tY[j], r = abs(tR[j]);\n    const Rs = 2.75 * (0.45 + 0.55 * m);\n    const dy = max(0, sa(k) + Rs - y, y - (sb(k) - Rs));\n    const cov = clamp(0.5 - (hypot(r, dy) - Rs), 0, 1);\n    const thr = (1 - m) * 1.3 - 0.15;\n    const row = clamp(floor(y - sa(k) + 0.5), 0, 13);\n    const pres = sstep(thr - 0.1, thr + 0.1, S.nz[k * 14 + row] + 0.12 * tJ[j]);\n    MY[i] = cov * pres * (0.18 + 0.82 * sstep(0.2, 1.5, r)) * (0.5 + 0.25 * m);\n    X1v[i] = X1[i] * (1 - 0.9 * pres * cov);\n  }\n  const thr = dmg * 1.3 - 0.15;\n  for (let i = 0; i \u003c N; i++) S.GV[i] = S.GL[i] + (S.GD[i] ? S.GD[i] * sstep(thr - 0.1, thr + 0.1, S.GZ[i]) : 0);\n}\n\n// A spike's timetable at this much damage: when it reaches each node and how\n// strong it is there. It dies inside a sheath that is too far gone.\nfunction table(S) {\n  const { tN, aN, m } = S;\n  tN[0] = (SA - YH) / V_AIS;\n  aN[0] = 1;\n  S.blk = -1;\n  for (let k = 0; k \u003c NSH; k++) {\n    const v = V_SLOW + (V_FAST - V_SLOW) * m[k] * m[k];\n    const A0 = aN[k];\n    const A1 = A0 * (1 - 0.36 * (1 - m[k]) ** 1.2);\n    S.tA[k] = tN[k] + 0.5 / V_NODE;\n    S.tB[k] = S.tA[k] + SL / v;\n    (S.AA[k] = A0), (S.AB[k] = A1);\n    if (A1 \u003c 0.3) {\n      const f = (A0 - 0.3) / (A0 - A1);\n      S.blk = k;\n      S.blkY = sa(k) + SL * f;\n      S.blkT = S.tA[k] + (SL * f) / v;\n      for (let j = k + 1; j \u003c= NSH; j++) {\n        tN[j] = 1e9;\n        aN[j] = 0;\n      }\n      break;\n    }\n    tN[k + 1] = S.tB[k] + 1 / V_NODE;\n    aN[k + 1] = A1;\n  }\n  S.tT = tN[NSH] + (YB - NODE[NSH]) / V_NODE;\n  let end = 0;\n  for (let b = 0; b \u003c 5; b++) {\n    S.tBo[b] = S.tT + S.blen[b] / V_TERM;\n    end = max(end, S.tBo[b]);\n  }\n  S.tEnd = (S.blk >= 0 ? S.blkT : end) + 0.8;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  const dye = clamp(k[0], 0, 1);\n  const rate = clamp(k[2], 1, 8);\n  if (dye !== S.dye) colours(S, dye);\n  const dmg = clamp(k[3], 0, 1);\n  if (abs(dmg - S.dmg) > 0.001) myelin(S, dmg);\n  table(S);\n  // Slide time: Speed 2 is real time.\n  const st = (dt * clamp(k[1], 0.2, 3)) / 2;\n  S.t += st;\n  if (S.t >= S.next) {\n    S.q.push(S.t, S.t + 0.2, S.t + 0.4);\n    S.next = S.t + (1.8 / rate ** 0.8) * (0.75 + 0.5 * rnd());\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    for (let j = 0; j \u003c 4; j++) S.q.push(S.t + j * 0.15);\n    S.next = max(S.next, S.t + 1.2);\n  }\n  S.q.sort((a, b) => a - b);\n  while (S.q.length && S.q[0] \u003c= S.t) {\n    S.sp.push({ t: S.t - S.q.shift(), p: -1 });\n    S.ca1 += 0.3 * (1.25 - S.ca1);\n  }\n  // Each spike moves on; one reaching a bouton releases its vesicles.\n  for (const p of S.sp) {\n    p.p = p.t;\n    p.t += st;\n    for (let b = 0; b \u003c 5; b++)\n      if (p.p \u003c S.tBo[b] && p.t >= S.tBo[b])\n        for (let n = 0; n \u003c 3; n++) {\n          const B = BOUT[b];\n          S.ves.push({ b, a: S.aN[NSH], x: B[0] + (rnd() - 0.5) * 2, y: B[1] + 1.2, tx: B[0] + (rnd() - 0.5) * 1.6, ty: B[1] + CLEFT - 1, age: -n * 0.05, dur: 0.3 + 0.2 * rnd() });\n        }\n  }\n  S.sp = S.sp.filter((p) => p.t \u003c S.tEnd);\n  for (const v of S.ves) {\n    v.age += st;\n    if (v.age >= v.dur) {\n      S.v2 += (0.75 * v.a) / 15;\n      S.Fs[v.b] += 0.3;\n    }\n  }\n  S.ves = S.ves.filter((v) => v.age \u003c v.dur);\n  // The second neuron fires once enough transmitter has landed.\n  if (S.v2 >= 1) {\n    (S.v2 = 0.15), (S.ca2 = min(1.3, S.ca2 + 0.8)), (S.f2 = 1);\n  }\n  (S.ca1 *= exp(-st / 0.9)), (S.v2 *= exp(-st / 0.6)), (S.ca2 *= exp(-st / 1.1)), (S.f2 *= exp(-st / 0.15));\n  for (let b = 0; b \u003c 5; b++) S.Fs[b] *= exp(-st / 0.25);\n  for (let j = 0; j \u003c 3; j++) {\n    S.caN[j] *= exp(-st / 1.4);\n    if (rnd() \u003c st * 0.3) S.caN[j] += 0.7;\n  }\n  // The neighbouring axons carry spikes now and then too.\n  for (const A of S.na) {\n    for (const p of A.sp) p.t += st;\n    A.sp = A.sp.filter((p) => p.t \u003c A.nodes.length * 0.1 + 0.5);\n    if (rnd() \u003c st * 0.5) A.sp.push({ t: 0, back: rnd() \u003c 0.5 });\n  }\n}\n\n// A bright point with a soft halo, added into layer L.\nfunction bloom(L, cx, cy, amp, rc, rh, ha) {\n  if (amp \u003c 0.004) return;\n  const R = ceil(rh * 2.2);\n  for (let y = max(0, floor(cy - R)); y \u003c= min(H - 1, ceil(cy + R)); y++)\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const d2 = (x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2;\n      L[y * W + x] += amp * (exp(-d2 / (rc * rc)) + ha * exp(-d2 / (rh * rh)));\n    }\n}\n\nconst pulse = (u, tau) => (u \u003c -0.03 ? 0 : u \u003c 0 ? 1 + u / 0.03 : exp(-u / tau));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.c1) return;\n  const { SP1, SP2, tN, aN, Fn, Fb, tI, tY, tR, tK, MY } = S;\n  for (const A of [SP1, SP2, Fn, Fb]) A.fill(0);\n  let hill = 0;\n  for (const p of S.sp) {\n    const t = p.t;\n    hill += exp(-t / 0.12);\n    for (let j = 0; j \u003c= NSH; j++) Fn[j] += aN[j] * pulse(t - tN[j], 0.08);\n    // The front: always seen in the bare initial segment, seen in a sheath\n    // only as far as its myelin is gone.\n    let yf = -1, amp = 0;\n    if (t \u003c tN[0]) {\n      yf = YH + ((SA - YH) * t) / tN[0];\n      amp = 1;\n    } else\n      for (let k = 0; k \u003c NSH; k++) {\n        if (S.blk === k && t >= S.blkT) {\n          yf = S.blkY;\n          amp = 0.3 * exp(-(t - S.blkT) / 0.25);\n        } else if (t >= S.tA[k] && t \u003c S.tB[k]) {\n          const f = (t - S.tA[k]) / (S.tB[k] - S.tA[k]);\n          yf = sa(k) + SL * f;\n          amp = (S.AA[k] + (S.AB[k] - S.AA[k]) * f) * (1 - S.m[k]) ** 0.8;\n        }\n      }\n    if (yf >= 0 && amp > 0.01) {\n      for (let y = max(YH, floor(yf - 9)); y \u003c= min(H - 1, ceil(yf + 3)); y++)\n        for (let j = S.row[y]; j \u003c S.row[y + 1]; j++) {\n          const dy = tY[j] - yf;\n          const w = exp((-dy * dy) / 2.2) + (dy \u003c 0 ? 0.35 * exp(dy / 3.5) : 0);\n          const r2 = tR[j] * tR[j];\n          SP1[tI[j]] += amp * w * (1.1 * exp(-r2 / 0.9) + 0.15 * exp(-r2 / 6));\n        }\n    }\n    // Down the terminal branches to the boutons.\n    if (t >= S.tT && t \u003c S.tT + 1.2) {\n      const sf = (t - S.tT) * V_TERM;\n      const a = aN[NSH];\n      for (let j = 0; j \u003c S.ti.length; j++) {\n        const s = S.ts[j];\n        if (s > S.blen[S.tb[j]] + 1) continue;\n        const d = s - sf;\n        if (d > -8 && d \u003c 8) SP1[S.ti[j]] += a * S.tc[j] * 1.1 * exp((-d * d) / 3);\n      }\n    }\n    for (let b = 0; b \u003c 5; b++) Fb[b] += aN[NSH] * pulse(t - S.tBo[b], 0.18);\n  }\n  // Node flashes, and the sheaths on either side glowing with them.\n  bloom(SP1, AX(29.5), 29.5, min(1.5, hill) * 0.5, 2, 4.5, 0.4);\n  for (let j = 0; j \u003c= NSH; j++) bloom(SP1, AX(NODE[j]), NODE[j], Fn[j] * (j ? 1 : 0.7), 1.1, 3.4, 0.4);\n  for (let j = 0; j \u003c tI.length; j++) {\n    const k = tK[j];\n    if (k \u003c 0) continue;\n    const g = max(Fn[k], Fn[k + 1]);\n    if (g > 0.01) SP1[tI[j]] += 0.9 * g * MY[tI[j]];\n  }\n  for (let b = 0; b \u003c 5; b++) {\n    bloom(SP1, BOUT[b][0], BOUT[b][1], Fb[b], 1.6, 4, 0.4);\n    bloom(SP2, BOUT[b][0], BOUT[b][1] + CLEFT, S.Fs[b], 1.3, 3.5, 0.35);\n  }\n  // Vesicles crossing the clefts.\n  for (const v of S.ves) {\n    if (v.age \u003c 0) continue;\n    const u = v.age / v.dur;\n    const e = u * u * (3 - 2 * u);\n    bloom(SP1, v.x + (v.tx - v.x) * e, v.y + (v.ty - v.y) * e, 0.7 * (1 - 0.4 * u), 0.6, 1.8, 0.15);\n  }\n  for (const A of S.na)\n    for (const p of A.sp) {\n      const n = A.nodes.length;\n      for (let j = 0; j \u003c n; j++) {\n        const u = p.t - j * 0.1;\n        if (u > -0.03 && u \u003c 0.5) {\n          const q = A.nodes[p.back ? n - 1 - j : j];\n          bloom(SP1, q[0], q[1], 0.55 * pulse(u, 0.08), 0.9, 2.6, 0.35);\n        }\n      }\n    }\n\n  const { D1, X1v, D2, NU, NB, NBI, GV, TI, H1, H2, c1, c2, cm, cn, ct } = S;\n  const k1 = 0.28 + 0.95 * S.ca1;\n  const kx = 0.62 + 0.4 * S.ca1;\n  const kh1 = 0.03 + 0.32 * S.ca1;\n  const k2 = 0.27 + 0.4 * S.v2 + 1 * S.ca2 + 0.5 * S.f2;\n  const kh2 = 0.03 + 0.3 * S.ca2;\n  const kn = [0.45 + 1.4 * S.caN[0], 0.45 + 1.4 * S.caN[1], 0.45 + 1.4 * S.caN[2], 1];\n  for (let i = 0; i \u003c N; i++) {\n    const v1 = D1[i] * k1 + X1v[i] * kx + NB[i] * kn[NBI[i]] + H1[i] * kh1 + SP1[i];\n    const v2 = D2[i] * k2 + H2[i] * kh2 + SP2[i];\n    const vm = MY[i] + GV[i];\n    const vn = NU[i];\n    const vt = TI[i];\n    let r = 255 * (v1 * c1[0] + v2 * c2[0] + vm * cm[0] + vn * cn[0] + vt * ct[0]);\n    let g = 255 * (v1 * c1[1] + v2 * c2[1] + vm * cm[1] + vn * cn[1] + vt * ct[1]);\n    let b = 255 * (v1 * c1[2] + v2 * c2[2] + vm * cm[2] + vn * cn[2] + vt * ct[2]);\n    // Where a label saturates the camera it bleaches toward white.\n    const top = max(r, g, b);\n    if (top > 210) {\n      const e = (top - 210) * 0.5;\n      r += e;\n      g += e;\n      b += e;\n    }\n    display.setPixel(i % W, (i / W) | 0, min(255, r), min(255, g), min(255, b));\n  }\n}\n","layer":{"id":"layer-axon","type":"code","name":"axon","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Axon\n// Family:  body\n// Idea:    A neuron glows green in a fluorescence micrograph of dark tissue, and each burst it fires leaves the cell body and leaps down the myelinated axon from one node of Ranvier to the next until the terminals spill glowing vesicles across the clefts onto a second neuron, which lights up in turn.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after Santiago Ramón y Cajal's drawings of neurons and fluorescence microscopy\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dye=0..1, Speed=0.2..3, Rate=1..8, Damage=0..1\n//\n// Knob 1: Dye. The fluorescent labels, turning round the colour wheel together. At 0 the neuron is GFP green and the second neuron magenta, on cream myelin with blue nuclei.\n// Knob 2: Speed. The clock of the whole slide: at 2 a healthy spike takes about a second from the cell body to the terminals, and at 0.2 everything runs ten times slower.\n// Knob 3: Rate. How often the neuron fires: a burst of three spikes every 1.8 s at 1, up to about nine spikes a second at 8.\n// Knob 4: Damage. Demyelination. At 0 the sheaths are whole and a spike leaps from node to node. As it rises the sheaths thin and break, and the spike crawls through the bare stretches, fading as it goes. Past about 0.3 the second neuron no longer answers, and near 1 the spike dies in the bare axon before it reaches the terminals.\n// Buttons: K1 tap fires a burst of four spikes now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, abs, exp, sin, cos, hypot, floor, ceil, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\n\n// The axon's centre line, a gentle S from the hillock down to where it branches.\nconst AX = (y) => 32 + 2.6 * sin((y - 28) * 0.07);\nconst YH = 28;\n// Four sheaths 11 rows long, each followed by a bare node two rows long.\nconst NSH = 4, SA = 39.5, SL = 11, SP = 13;\nconst sa = (k) => SA + SP * k;\nconst sb = (k) => sa(k) + SL;\n// Where a spike flashes: the end of the initial segment, then each node.\nconst NODE = [SA - 0.5, sb(0) + 1, sb(1) + 1, sb(2) + 1, sb(3) + 1];\nconst YB = sb(3) + 2.5;\n// Conduction in LEDs a second of slide time.\nconst V_AIS = 60, V_FAST = 110, V_SLOW = 14, V_NODE = 40, V_TERM = 45;\n// The boutons, and how far below each the second neuron's spine sits.\nconst BOUT = [[9, 101], [20, 105], [31, 103], [42, 106], [54, 100]];\nconst CLEFT = 6, S1 = [32, 23], S2 = [33, 121];\n\n// Distance to a segment; T is how far along it the nearest point lies.\nlet T = 0;\nfunction seg(px, py, ax, ay, bx, by) {\n  const dx = bx - ax, dy = by - ay;\n  T = clamp(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return hypot(px - ax - dx * T, py - ay - dy * T);\n}\n\n// A tapered stroke into layer L, kept by the brighter of old and new. With a\n// record R it also notes, LED by LED, how far along a branch the stroke is.\nfunction stroke(L, ax, ay, bx, by, ra, rb, wt, R) {\n  const r = max(ra, rb) + 1;\n  const x0 = max(0, floor(min(ax, bx) - r));\n  const x1 = min(W - 1, ceil(max(ax, bx) + r));\n  const y0 = max(0, floor(min(ay, by) - r));\n  const y1 = min(H - 1, ceil(max(ay, by) + r));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const d = seg(x + 0.5, y + 0.5, ax, ay, bx, by) - (ra + (rb - ra) * T);\n      const v = clamp(0.5 - d, 0, 1) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n      if (R && v > R.c[i]) {\n        R.c[i] = v;\n        R.s[i] = R.s0 + T * R.len;\n        R.b[i] = R.id;\n      }\n    }\n}\n\nfunction blob(L, cx, cy, rx, ry, wt, soft) {\n  const s = soft || 1;\n  for (let y = max(0, floor(cy - ry - 2)); y \u003c= min(H - 1, ceil(cy + ry + 2)); y++)\n    for (let x = max(0, floor(cx - rx - 2)); x \u003c= min(W - 1, ceil(cx + rx + 2)); x++) {\n      const d = (hypot((x + 0.5 - cx) / rx, (y + 0.5 - cy) / ry) - 1) * min(rx, ry);\n      const v = clamp(0.5 - d / s, 0, 1) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n    }\n}\n\n// A dendrite: short strokes that wander and thin out, forking now and then\n// and set with spines.\nfunction grow(L, x, y, a, w, len, depth, wt, spines) {\n  let s = 0;\n  while (s \u003c len) {\n    const nx = x + cos(a) * 1.5;\n    const ny = y + sin(a) * 1.5;\n    const nw = max(0.42, w * 0.975);\n    stroke(L, x, y, nx, ny, w, nw, wt);\n    if (spines && rnd() \u003c 0.28) {\n      const side = rnd() \u003c 0.5 ? 1 : -1;\n      stroke(L, nx, ny, nx - sin(a) * side * (w + 1.3), ny + cos(a) * side * (w + 1.3), 0.3, 0.55, wt * 0.8);\n    }\n    (x = nx), (y = ny), (w = nw), (s += 1.5);\n    a += (rnd() - 0.5) * 0.36;\n    if (x \u003c -4 || x > W + 4 || y \u003c -4 || y > H + 4) return;\n    if (depth > 0 && s > 4 && rnd() \u003c 0.1) {\n      const turn = (0.35 + 0.45 * rnd()) * (rnd() \u003c 0.5 ? 1 : -1);\n      grow(L, x, y, a + turn, w * 0.8, (len - s) * 0.85 + 3, depth - 1, wt, spines);\n      a -= turn * 0.4;\n    }\n  }\n}\n\n// A quadratic curve of strokes from p to q bent toward c. Returns its length.\nfunction curve(L, p, c, q, r0, r1, wt, R) {\n  let px = p[0], py = p[1], s = 0;\n  for (let j = 1; j \u003c= 14; j++) {\n    const u = j / 14, v = 1 - u;\n    const qx = v * v * p[0] + 2 * u * v * c[0] + u * u * q[0];\n    const qy = v * v * p[1] + 2 * u * v * c[1] + u * u * q[1];\n    const len = hypot(qx - px, qy - py);\n    if (R) (R.s0 = s), (R.len = len);\n    stroke(L, px, py, qx, qy, r0 + ((r1 - r0) * (j - 1)) / 14, r0 + (r1 - r0) * u, wt, R);\n    s += len;\n    (px = qx), (py = qy);\n  }\n  return s;\n}\n\nfunction blur(L) {\n  const o = F32(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++)\n      o[y * W + x] = 0.25 * L[y * W + max(0, x - 1)] + 0.5 * L[y * W + x] + 0.25 * L[y * W + min(W - 1, x + 1)];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++)\n      L[y * W + x] = 0.25 * o[max(0, y - 1) * W + x] + 0.5 * o[y * W + x] + 0.25 * o[min(H - 1, y + 1) * W + x];\n}\n\n// A nucleus is dark in the cell's own label and blue in the nuclear stain.\nfunction nucleus(D, NU, x, y, rx, ry) {\n  const m = F32(N);\n  blob(m, x, y, rx, ry, 1);\n  for (let i = 0; i \u003c N; i++) if (m[i] > 0) (D[i] *= 1 - 0.7 * m[i]), (NU[i] = max(NU[i], 0.8 * m[i]));\n}\n\n// Merge a layer into the neighbours' layer, noting whose each LED is.\nfunction merge(S, L, j) {\n  for (let i = 0; i \u003c N; i++) if (L[i] > S.NB[i]) (S.NB[i] = L[i]), (S.NBI[i] = j);\n}\n\n// Copy a piece into the damageable layer with its breaking point.\nfunction mark(GD, GZ, L, z) {\n  for (let i = 0; i \u003c N; i++)\n    if (L[i] > GD[i]) {\n      GD[i] = L[i];\n      GZ[i] = z + 0.08 * rnd();\n    }\n}\n\nexport function setup(params) {\n  const S = {\n    D1: F32(N), X1: F32(N), X1v: F32(N), D2: F32(N), NU: F32(N), NB: F32(N), NBI: new Uint8Array(N),\n    GL: F32(N), GD: F32(N), GZ: F32(N), GV: F32(N), TI: F32(N), H1: F32(N), H2: F32(N), MY: F32(N), SP1: F32(N), SP2: F32(N),\n    t: 0, next: 0.5, q: [], sp: [], ves: [], ca1: 0, v2: 0, ca2: 0, f2: 0,\n    caN: [0, 0, 0, 0], Fs: F32(5), Fn: F32(5), Fb: F32(5),\n    m: F32(NSH), mr: F32(NSH), nz: F32(NSH * 14),\n    tN: F32(5), aN: F32(5), tA: F32(NSH), tB: F32(NSH), AA: F32(NSH), AB: F32(NSH), tBo: F32(5), blen: F32(5),\n    dye: -1, dmg: -1, na: [],\n  };\n  params.s = S;\n  const { D1, X1, D2, NU, GL, TI } = S;\n\n  // The neuron: a pyramid of a cell body whose apical dendrite climbs to a\n  // tuft at the top edge. The basal dendrites spread to the sides.\n  blob(D1, S1[0], S1[1] + 0.5, 7, 6, 0.85);\n  stroke(D1, 32, 21, 32, 13, 4.6, 1.3, 0.85);\n  stroke(D1, 32, 27.5, AX(31.5), 31.5, 2.6, 0.9, 0.85);\n  grow(D1, 32, 13.5, -PI / 2 + (rnd() - 0.5) * 0.2, 1.25, 18, 3, 0.85, true);\n  grow(D1, 32, 9.5, -PI / 2 - 0.9, 0.8, 22, 1, 0.8, true);\n  grow(D1, 32, 8, -PI / 2 + 0.9, 0.8, 22, 1, 0.8, true);\n  grow(D1, 26.5, 27, 2.3, 1.1, 26, 2, 0.85, true);\n  grow(D1, 37.5, 27, 0.85, 1.1, 26, 2, 0.85, true);\n  grow(D1, 25.5, 21, PI + 0.3, 1.05, 24, 2, 0.85, true);\n  grow(D1, 38.5, 21, -0.3, 1.05, 24, 2, 0.85, true);\n  grow(D1, 28.5, 29, 1.95, 0.8, 14, 1, 0.8, true);\n  grow(D1, 35.5, 29, 1.2, 0.8, 14, 1, 0.8, true);\n  nucleus(D1, NU, S1[0] + 0.4, S1[1] + 0.3, 3.2, 3.6);\n  NU[22 * W + 33] *= 0.4;\n\n  // The axon as a tube of LEDs, row by row, for the myelin and the spikes.\n  const tI = [], tY = [], tR = [], tK = [], tJ = [];\n  S.row = new Int32Array(H + 2);\n  for (let y = 0; y \u003c H; y++) {\n    S.row[y] = tI.length;\n    if (y \u003c YH || y > YB + 1) continue;\n    const yc = y + 0.5, ax = AX(yc), sl = 0.182 * cos((yc - 28) * 0.07);\n    for (let x = max(0, floor(ax - 5)); x \u003c= min(W - 1, ceil(ax + 5)); x++) {\n      const r = (x + 0.5 - ax) / Math.sqrt(1 + sl * sl);\n      let k = -1;\n      for (let j = 0; j \u003c NSH; j++) if (yc >= sa(j) - 0.5 && yc \u003c= sb(j) + 0.5) k = j;\n      tI.push(y * W + x), tY.push(yc), tR.push(r), tK.push(k), tJ.push(rnd());\n      const rr = 0.7 + 0.3 * clamp((SA - yc) / 10, 0, 1);\n      X1[y * W + x] = max(X1[y * W + x], clamp(rr + 0.5 - abs(r), 0, 1) * 0.8);\n    }\n  }\n  S.row[H] = S.row[H + 1] = tI.length;\n  [S.tI, S.tY, S.tR, S.tK, S.tJ] = [Int32Array.from(tI), Float32Array.from(tY), Float32Array.from(tR), Int8Array.from(tK), Float32Array.from(tJ)];\n  for (let k = 0; k \u003c NSH; k++) {\n    S.mr[k] = rnd();\n    let a = rnd();\n    for (let j = 0; j \u003c 14; j++) {\n      const b = rnd();\n      (S.nz[k * 14 + j] = 0.5 * a + 0.5 * b), (a = b);\n    }\n  }\n\n  // The terminal arbor: five branches fanning out from the last node to the\n  // boutons, each LED tagged with how far along its branch it lies.\n  const R = { c: F32(N), s: F32(N), b: new Int8Array(N), s0: 0, len: 0, id: 0 };\n  const P = [AX(YB), YB];\n  BOUT.forEach((B, b) => {\n    R.id = b;\n    const C = [P[0] + (B[0] - P[0]) * 0.5, P[1] + (B[1] - P[1]) * 0.2 + 1];\n    S.blen[b] = curve(X1, P, C, B, 0.65, 0.5, 0.8, R);\n    blob(X1, B[0], B[1], 1.8, 1.6, 0.95);\n  });\n  const ti = [], ts = [], tb = [], tc = [];\n  for (let i = 0; i \u003c N; i++)\n    if (R.c[i] > 0.05) ti.push(i), ts.push(R.s[i]), tb.push(R.b[i]), tc.push(R.c[i]);\n  [S.ti, S.ts, S.tb, S.tc] = [Int32Array.from(ti), Float32Array.from(ts), Int8Array.from(tb), Float32Array.from(tc)];\n\n  // The second neuron below: its dendrites rise to a spine under each bouton.\n  blob(D2, S2[0], S2[1], 7, 5.4, 0.85);\n  stroke(D2, 33, 118, 32, 112, 3.8, 1.1, 0.85);\n  BOUT.forEach((B) => {\n    const sx = B[0], sy = B[1] + CLEFT;\n    const st = [33 + (sx - 33) * 0.22, abs(sx - 33) \u003c 4 ? 112 : 117];\n    curve(D2, st, [sx * 0.8 + st[0] * 0.2, st[1] - 1], [sx, sy + 2.5], 1.1, 0.55, 0.8);\n    stroke(D2, sx, sy + 2.5, sx, sy + 0.8, 0.4, 0.5, 0.8);\n    blob(D2, sx, sy, 1.3, 1.1, 0.95);\n  });\n  grow(D2, 27, 124, PI - 0.15, 1, 24, 2, 0.8, true);\n  grow(D2, 39, 124, 0.12, 1, 24, 2, 0.8, true);\n  grow(D2, 28, 118, PI + 0.6, 0.8, 12, 1, 0.75, true);\n  grow(D2, 38, 118, -0.6, 0.8, 12, 1, 0.75, true);\n  nucleus(D2, NU, S2[0] + 0.3, S2[1] + 0.5, 3.2, 2.8);\n\n  // Neighbouring neurons, out of focus, each with a calcium flicker of its own.\n  [[8, 36], [56, 58], [9, 84]].forEach((c, j) => {\n    const L = F32(N), x = c[0] + (rnd() - 0.5) * 4, y = c[1] + (rnd() - 0.5) * 6;\n    blob(L, x, y, 3.2, 2.8, 0.7);\n    for (let d = 0; d \u003c 4; d++) grow(L, x, y, (d / 4) * 2 * PI + rnd(), 0.8, 10 + 8 * rnd(), 1, 0.65, false);\n    blur(L);\n    merge(S, L, j);\n    blob(NU, x, y, 1.8, 1.6, 0.3, 2);\n  });\n\n  // Two myelinated axons of other cells cross behind, with nodes of their\n  // own. Their sheaths and the oligodendrocytes go into GD, the layer that\n  // Damage takes apart, each piece with its own breaking point in GZ.\n  const { GD, GZ } = S;\n  const tmp = F32(N);\n  [[-3, 47 + rnd() * 4, 67, 43 + rnd() * 4], [-3, 69 + rnd() * 4, 67, 82 + rnd() * 4]].forEach((A, n) => {\n    const len = hypot(A[2] - A[0], A[3] - A[1]), ux = (A[2] - A[0]) / len, uy = (A[3] - A[1]) / len;\n    const bow = (n ? -3 : 3) * (0.6 + 0.4 * rnd());\n    const at = (s) => [A[0] + ux * s - uy * bow * sin((PI * s) / len), A[1] + uy * s + ux * bow * sin((PI * s) / len)];\n    const nodes = [];\n    for (let s = 2 + rnd() * 8; s \u003c len; s += 10) nodes.push(at(s));\n    for (let j = 0; j \u003c nodes.length - 1; j++) {\n      const p = nodes[j], q = nodes[j + 1], dx = (q[0] - p[0]) / 10, dy = (q[1] - p[1]) / 10;\n      tmp.fill(0);\n      sheath(tmp, p[0] + dx * 1.2, p[1] + dy * 1.2, q[0] - dx * 1.2, q[1] - dy * 1.2, 1.5, 0.27);\n      mark(GD, GZ, tmp, 0.15 + 0.85 * rnd());\n    }\n    tmp.fill(0);\n    for (const p of nodes) blob(tmp, p[0], p[1], 0.6, 0.6, 0.4);\n    merge(S, tmp, 3);\n    S.na.push({ nodes, sp: [] });\n  });\n\n  // Oligodendrocytes, the glia that wrap the sheaths, reaching to the axon.\n  const og = [[19 + rnd() * 3, 61, -1, [55, 66]], [44 + rnd() * 3, 76, 1, [70, 82]]];\n  for (const [x, y, side, ys] of og) {\n    tmp.fill(0);\n    blob(tmp, x, y, 2.2, 1.9, 0.6);\n    for (const ty of ys) {\n      const tx = AX(ty) + side * 2.4;\n      curve(tmp, [x, y], [(x + tx) / 2, y + (ty - y) * 0.15 + (rnd() - 0.5) * 3], [tx, ty], 0.5, 0.42, 0.34);\n    }\n    mark(GD, GZ, tmp, 0.35 + 0.3 * rnd());\n  }\n  // Astrocytes, small stars of fine processes.\n  for (const [x, y] of [[54, 31], [52, 95], [12, 70]]) {\n    blob(GL, x, y, 1.3, 1.2, 0.42);\n    for (let d = 0; d \u003c 8; d++) grow(GL, x, y, (d / 8) * 2 * PI + rnd() * 0.7, 0.5, 3 + 6 * rnd(), 0, 0.22 + 0.1 * rnd(), false);\n  }\n  // Nuclei of every other cell in the slice, in the blue stain.\n  for (let n = 0; n \u003c 26; n++) {\n    const x = rnd() * W, y = rnd() * H;\n    if (hypot(x - S1[0], y - S1[1]) \u003c 10 || hypot(x - S2[0], y - S2[1]) \u003c 10) continue;\n    if (y > 26 && y \u003c 94 && abs(x - AX(y)) \u003c 5) continue;\n    blob(NU, x, y, 1.4 + rnd() * 0.8, 1.2 + rnd() * 0.6, 0.2 + rnd() * 0.16, 1.5);\n  }\n  // Dark tissue: a faint, uneven autofluorescence.\n  const g = F32(9 * 17).map(rnd), g2 = F32(17 * 33).map(rnd);\n  const samp = (G, gw, x, y) => {\n    const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, at = (a, b) => G[b * gw + a];\n    return (at(ix, iy) * (1 - fx) + at(ix + 1, iy) * fx) * (1 - fy) + (at(ix, iy + 1) * (1 - fx) + at(ix + 1, iy + 1) * fx) * fy;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const n = 0.65 * samp(g, 9, x / 8, y / 8) + 0.35 * samp(g2, 17, x / 4, y / 4);\n      TI[y * W + x] = 0.02 + 0.055 * n * n;\n      S.H1[y * W + x] = exp(-((x + 0.5 - S1[0]) ** 2 + (y + 0.5 - S1[1]) ** 2) / 240);\n      S.H2[y * W + x] = exp(-((x + 0.5 - S2[0]) ** 2 + (y + 0.5 - S2[1]) ** 2) / 240);\n    }\n}\n\n// A sheath seen from above: bright walls and a dark line down the middle.\nfunction sheath(L, ax, ay, bx, by, R, wt) {\n  for (let y = max(0, floor(min(ay, by) - R - 1)); y \u003c= min(H - 1, ceil(max(ay, by) + R + 1)); y++)\n    for (let x = max(0, floor(min(ax, bx) - R - 1)); x \u003c= min(W - 1, ceil(max(ax, bx) + R + 1)); x++) {\n      const d = seg(x + 0.5, y + 0.5, ax, ay, bx, by);\n      const v = clamp(R + 0.5 - d, 0, 1) * (0.3 + 0.7 * sstep(0.1, R, d)) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n    }\n}\n\nfunction hsv(h, s, v) {\n  h = ((h % 1) + 1) % 1;\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction colours(S, dye) {\n  S.dye = dye;\n  const h = 0.33 + dye;\n  S.c1 = hsv(h, 0.88, 1);\n  S.c2 = hsv(h + 0.53, 0.78, 1);\n  S.cm = hsv(h - 0.21, 0.3, 1);\n  S.cn = hsv(h + 0.31, 0.8, 1);\n  S.ct = hsv(h + 0.2, 0.55, 1);\n}\n\n// The sheaths for this much damage: each thins and breaks by its own measure.\nfunction myelin(S, dmg) {\n  S.dmg = dmg;\n  for (let k = 0; k \u003c NSH; k++) S.m[k] = clamp(1 - dmg * (0.8 + 0.7 * S.mr[k]), 0, 1);\n  const { tI, tY, tR, tK, tJ, MY, X1, X1v } = S;\n  X1v.set(X1);\n  for (let j = 0; j \u003c tI.length; j++) {\n    const i = tI[j], k = tK[j];\n    MY[i] = 0;\n    if (k \u003c 0) continue;\n    const m = S.m[k], y = tY[j], r = abs(tR[j]);\n    const Rs = 2.75 * (0.45 + 0.55 * m);\n    const dy = max(0, sa(k) + Rs - y, y - (sb(k) - Rs));\n    const cov = clamp(0.5 - (hypot(r, dy) - Rs), 0, 1);\n    const thr = (1 - m) * 1.3 - 0.15;\n    const row = clamp(floor(y - sa(k) + 0.5), 0, 13);\n    const pres = sstep(thr - 0.1, thr + 0.1, S.nz[k * 14 + row] + 0.12 * tJ[j]);\n    MY[i] = cov * pres * (0.18 + 0.82 * sstep(0.2, 1.5, r)) * (0.5 + 0.25 * m);\n    X1v[i] = X1[i] * (1 - 0.9 * pres * cov);\n  }\n  const thr = dmg * 1.3 - 0.15;\n  for (let i = 0; i \u003c N; i++) S.GV[i] = S.GL[i] + (S.GD[i] ? S.GD[i] * sstep(thr - 0.1, thr + 0.1, S.GZ[i]) : 0);\n}\n\n// A spike's timetable at this much damage: when it reaches each node and how\n// strong it is there. It dies inside a sheath that is too far gone.\nfunction table(S) {\n  const { tN, aN, m } = S;\n  tN[0] = (SA - YH) / V_AIS;\n  aN[0] = 1;\n  S.blk = -1;\n  for (let k = 0; k \u003c NSH; k++) {\n    const v = V_SLOW + (V_FAST - V_SLOW) * m[k] * m[k];\n    const A0 = aN[k];\n    const A1 = A0 * (1 - 0.36 * (1 - m[k]) ** 1.2);\n    S.tA[k] = tN[k] + 0.5 / V_NODE;\n    S.tB[k] = S.tA[k] + SL / v;\n    (S.AA[k] = A0), (S.AB[k] = A1);\n    if (A1 \u003c 0.3) {\n      const f = (A0 - 0.3) / (A0 - A1);\n      S.blk = k;\n      S.blkY = sa(k) + SL * f;\n      S.blkT = S.tA[k] + (SL * f) / v;\n      for (let j = k + 1; j \u003c= NSH; j++) {\n        tN[j] = 1e9;\n        aN[j] = 0;\n      }\n      break;\n    }\n    tN[k + 1] = S.tB[k] + 1 / V_NODE;\n    aN[k + 1] = A1;\n  }\n  S.tT = tN[NSH] + (YB - NODE[NSH]) / V_NODE;\n  let end = 0;\n  for (let b = 0; b \u003c 5; b++) {\n    S.tBo[b] = S.tT + S.blen[b] / V_TERM;\n    end = max(end, S.tBo[b]);\n  }\n  S.tEnd = (S.blk >= 0 ? S.blkT : end) + 0.8;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  const dye = clamp(k[0], 0, 1);\n  const rate = clamp(k[2], 1, 8);\n  if (dye !== S.dye) colours(S, dye);\n  const dmg = clamp(k[3], 0, 1);\n  if (abs(dmg - S.dmg) > 0.001) myelin(S, dmg);\n  table(S);\n  // Slide time: Speed 2 is real time.\n  const st = (dt * clamp(k[1], 0.2, 3)) / 2;\n  S.t += st;\n  if (S.t >= S.next) {\n    S.q.push(S.t, S.t + 0.2, S.t + 0.4);\n    S.next = S.t + (1.8 / rate ** 0.8) * (0.75 + 0.5 * rnd());\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    for (let j = 0; j \u003c 4; j++) S.q.push(S.t + j * 0.15);\n    S.next = max(S.next, S.t + 1.2);\n  }\n  S.q.sort((a, b) => a - b);\n  while (S.q.length && S.q[0] \u003c= S.t) {\n    S.sp.push({ t: S.t - S.q.shift(), p: -1 });\n    S.ca1 += 0.3 * (1.25 - S.ca1);\n  }\n  // Each spike moves on; one reaching a bouton releases its vesicles.\n  for (const p of S.sp) {\n    p.p = p.t;\n    p.t += st;\n    for (let b = 0; b \u003c 5; b++)\n      if (p.p \u003c S.tBo[b] && p.t >= S.tBo[b])\n        for (let n = 0; n \u003c 3; n++) {\n          const B = BOUT[b];\n          S.ves.push({ b, a: S.aN[NSH], x: B[0] + (rnd() - 0.5) * 2, y: B[1] + 1.2, tx: B[0] + (rnd() - 0.5) * 1.6, ty: B[1] + CLEFT - 1, age: -n * 0.05, dur: 0.3 + 0.2 * rnd() });\n        }\n  }\n  S.sp = S.sp.filter((p) => p.t \u003c S.tEnd);\n  for (const v of S.ves) {\n    v.age += st;\n    if (v.age >= v.dur) {\n      S.v2 += (0.75 * v.a) / 15;\n      S.Fs[v.b] += 0.3;\n    }\n  }\n  S.ves = S.ves.filter((v) => v.age \u003c v.dur);\n  // The second neuron fires once enough transmitter has landed.\n  if (S.v2 >= 1) {\n    (S.v2 = 0.15), (S.ca2 = min(1.3, S.ca2 + 0.8)), (S.f2 = 1);\n  }\n  (S.ca1 *= exp(-st / 0.9)), (S.v2 *= exp(-st / 0.6)), (S.ca2 *= exp(-st / 1.1)), (S.f2 *= exp(-st / 0.15));\n  for (let b = 0; b \u003c 5; b++) S.Fs[b] *= exp(-st / 0.25);\n  for (let j = 0; j \u003c 3; j++) {\n    S.caN[j] *= exp(-st / 1.4);\n    if (rnd() \u003c st * 0.3) S.caN[j] += 0.7;\n  }\n  // The neighbouring axons carry spikes now and then too.\n  for (const A of S.na) {\n    for (const p of A.sp) p.t += st;\n    A.sp = A.sp.filter((p) => p.t \u003c A.nodes.length * 0.1 + 0.5);\n    if (rnd() \u003c st * 0.5) A.sp.push({ t: 0, back: rnd() \u003c 0.5 });\n  }\n}\n\n// A bright point with a soft halo, added into layer L.\nfunction bloom(L, cx, cy, amp, rc, rh, ha) {\n  if (amp \u003c 0.004) return;\n  const R = ceil(rh * 2.2);\n  for (let y = max(0, floor(cy - R)); y \u003c= min(H - 1, ceil(cy + R)); y++)\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const d2 = (x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2;\n      L[y * W + x] += amp * (exp(-d2 / (rc * rc)) + ha * exp(-d2 / (rh * rh)));\n    }\n}\n\nconst pulse = (u, tau) => (u \u003c -0.03 ? 0 : u \u003c 0 ? 1 + u / 0.03 : exp(-u / tau));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.c1) return;\n  const { SP1, SP2, tN, aN, Fn, Fb, tI, tY, tR, tK, MY } = S;\n  for (const A of [SP1, SP2, Fn, Fb]) A.fill(0);\n  let hill = 0;\n  for (const p of S.sp) {\n    const t = p.t;\n    hill += exp(-t / 0.12);\n    for (let j = 0; j \u003c= NSH; j++) Fn[j] += aN[j] * pulse(t - tN[j], 0.08);\n    // The front: always seen in the bare initial segment, seen in a sheath\n    // only as far as its myelin is gone.\n    let yf = -1, amp = 0;\n    if (t \u003c tN[0]) {\n      yf = YH + ((SA - YH) * t) / tN[0];\n      amp = 1;\n    } else\n      for (let k = 0; k \u003c NSH; k++) {\n        if (S.blk === k && t >= S.blkT) {\n          yf = S.blkY;\n          amp = 0.3 * exp(-(t - S.blkT) / 0.25);\n        } else if (t >= S.tA[k] && t \u003c S.tB[k]) {\n          const f = (t - S.tA[k]) / (S.tB[k] - S.tA[k]);\n          yf = sa(k) + SL * f;\n          amp = (S.AA[k] + (S.AB[k] - S.AA[k]) * f) * (1 - S.m[k]) ** 0.8;\n        }\n      }\n    if (yf >= 0 && amp > 0.01) {\n      for (let y = max(YH, floor(yf - 9)); y \u003c= min(H - 1, ceil(yf + 3)); y++)\n        for (let j = S.row[y]; j \u003c S.row[y + 1]; j++) {\n          const dy = tY[j] - yf;\n          const w = exp((-dy * dy) / 2.2) + (dy \u003c 0 ? 0.35 * exp(dy / 3.5) : 0);\n          const r2 = tR[j] * tR[j];\n          SP1[tI[j]] += amp * w * (1.1 * exp(-r2 / 0.9) + 0.15 * exp(-r2 / 6));\n        }\n    }\n    // Down the terminal branches to the boutons.\n    if (t >= S.tT && t \u003c S.tT + 1.2) {\n      const sf = (t - S.tT) * V_TERM;\n      const a = aN[NSH];\n      for (let j = 0; j \u003c S.ti.length; j++) {\n        const s = S.ts[j];\n        if (s > S.blen[S.tb[j]] + 1) continue;\n        const d = s - sf;\n        if (d > -8 && d \u003c 8) SP1[S.ti[j]] += a * S.tc[j] * 1.1 * exp((-d * d) / 3);\n      }\n    }\n    for (let b = 0; b \u003c 5; b++) Fb[b] += aN[NSH] * pulse(t - S.tBo[b], 0.18);\n  }\n  // Node flashes, and the sheaths on either side glowing with them.\n  bloom(SP1, AX(29.5), 29.5, min(1.5, hill) * 0.5, 2, 4.5, 0.4);\n  for (let j = 0; j \u003c= NSH; j++) bloom(SP1, AX(NODE[j]), NODE[j], Fn[j] * (j ? 1 : 0.7), 1.1, 3.4, 0.4);\n  for (let j = 0; j \u003c tI.length; j++) {\n    const k = tK[j];\n    if (k \u003c 0) continue;\n    const g = max(Fn[k], Fn[k + 1]);\n    if (g > 0.01) SP1[tI[j]] += 0.9 * g * MY[tI[j]];\n  }\n  for (let b = 0; b \u003c 5; b++) {\n    bloom(SP1, BOUT[b][0], BOUT[b][1], Fb[b], 1.6, 4, 0.4);\n    bloom(SP2, BOUT[b][0], BOUT[b][1] + CLEFT, S.Fs[b], 1.3, 3.5, 0.35);\n  }\n  // Vesicles crossing the clefts.\n  for (const v of S.ves) {\n    if (v.age \u003c 0) continue;\n    const u = v.age / v.dur;\n    const e = u * u * (3 - 2 * u);\n    bloom(SP1, v.x + (v.tx - v.x) * e, v.y + (v.ty - v.y) * e, 0.7 * (1 - 0.4 * u), 0.6, 1.8, 0.15);\n  }\n  for (const A of S.na)\n    for (const p of A.sp) {\n      const n = A.nodes.length;\n      for (let j = 0; j \u003c n; j++) {\n        const u = p.t - j * 0.1;\n        if (u > -0.03 && u \u003c 0.5) {\n          const q = A.nodes[p.back ? n - 1 - j : j];\n          bloom(SP1, q[0], q[1], 0.55 * pulse(u, 0.08), 0.9, 2.6, 0.35);\n        }\n      }\n    }\n\n  const { D1, X1v, D2, NU, NB, NBI, GV, TI, H1, H2, c1, c2, cm, cn, ct } = S;\n  const k1 = 0.28 + 0.95 * S.ca1;\n  const kx = 0.62 + 0.4 * S.ca1;\n  const kh1 = 0.03 + 0.32 * S.ca1;\n  const k2 = 0.27 + 0.4 * S.v2 + 1 * S.ca2 + 0.5 * S.f2;\n  const kh2 = 0.03 + 0.3 * S.ca2;\n  const kn = [0.45 + 1.4 * S.caN[0], 0.45 + 1.4 * S.caN[1], 0.45 + 1.4 * S.caN[2], 1];\n  for (let i = 0; i \u003c N; i++) {\n    const v1 = D1[i] * k1 + X1v[i] * kx + NB[i] * kn[NBI[i]] + H1[i] * kh1 + SP1[i];\n    const v2 = D2[i] * k2 + H2[i] * kh2 + SP2[i];\n    const vm = MY[i] + GV[i];\n    const vn = NU[i];\n    const vt = TI[i];\n    let r = 255 * (v1 * c1[0] + v2 * c2[0] + vm * cm[0] + vn * cn[0] + vt * ct[0]);\n    let g = 255 * (v1 * c1[1] + v2 * c2[1] + vm * cm[1] + vn * cn[1] + vt * ct[1]);\n    let b = 255 * (v1 * c1[2] + v2 * c2[2] + vm * cm[2] + vn * cn[2] + vt * ct[2]);\n    // Where a label saturates the camera it bleaches toward white.\n    const top = max(r, g, b);\n    if (top > 210) {\n      const e = (top - 210) * 0.5;\n      r += e;\n      g += e;\n      b += e;\n    }\n    display.setPixel(i % W, (i / W) | 0, min(255, r), min(255, g), min(255, b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dye=0..1, Speed=0.2..3, Rate=1..8, Damage=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dye","min":0,"max":1,"about":"The fluorescent labels, turning round the colour wheel together. At 0 the neuron is GFP green and the second neuron magenta, on cream myelin with blue nuclei."},{"name":"Speed","min":0.2,"max":3,"about":"The clock of the whole slide: at 2 a healthy spike takes about a second from the cell body to the terminals, and at 0.2 everything runs ten times slower."},{"name":"Rate","min":1,"max":8,"about":"How often the neuron fires: a burst of three spikes every 1.8 s at 1, up to about nine spikes a second at 8."},{"name":"Damage","min":0,"max":1,"about":"Demyelination. At 0 the sheaths are whole and a spike leaps from node to node. As it rises the sheaths thin and break, and the spike crawls through the bare stretches, fading as it goes. Past about 0.3 the second neuron no longer answers, and near 1 the spike dies in the bare axon before it reaches the terminals."}],"start":[0,2,1,0.06],"measures":{"motion":0.2284,"detail":0.0799,"edges":0.4159,"complexity":1.8734,"coverage":0.4953,"colour":0.2394,"drift":0.0867},"knobResponse":[0.1239,0.0564,0.0498,0.061]},{"slug":"bait-ball","title":"Bait Ball","family":"ocean","round":23,"note":"옆에서 본 푸른 바다를 정어리 떼 공이 거의 다 채워요. 떼가 한꺼번에 몸을 틀면 은빛 물결이 공을 가로지르고, 등을 돌리면 짙은 남색으로 가라앉아요. 상어와 돌고래가 뚫고 지나간 구멍은 뒤에서 다시 닫히고, 가넷이 수면에서 거품 꼬리를 끌며 내리꽂혀요.","idea":"Seen from the side in open blue water, a sardine bait ball fills the panel with a thousand fish churning in layers, and when the school turns together a wave of silver runs across it until it turns away again and shows its dark blue backs, while sharks and dolphins charge through and gannets dive in from the surface, punching holes that close behind them.","buttons":"K1 tap sends a hunter charging through the ball now.","code":"// ===== Patternflow pattern =====\n// Title:   Bait Ball\n// Family:  ocean\n// Idea:    Seen from the side in open blue water, a sardine bait ball fills the panel with a thousand fish churning in layers, and when the school turns together a wave of silver runs across it until it turns away again and shows its dark blue backs, while sharks and dolphins charge through and gannets dive in from the surface, punching holes that close behind them.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the sardine bait balls of the Sardine Run\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Speed=0.2..3, Predators=1..5, Sun=0..1\n//\n// Knob 1: Water. The colour of the sea: the clear blue of open ocean at 0, turning to the green of plankton-rich coastal water at 1.\n// Knob 2: Speed. How fast the school and its hunters move: at 2 a turn runs across the ball in just over a second, and the school shows its flanks for five to eight seconds before it turns away; at 0.2 it all runs ten times slower.\n// Knob 3: Predators. How many sharks and dolphins work the ball, from one to five. More hunters charge more often and bring more gannets with them. The school packs tighter against them.\n// Knob 4: Sun. The time of day, from noon of a Sardine Run winter at 0, when the sun stands 35 degrees up and its rays lean 38 degrees in the water, to late afternoon at 1. Toward 1 the rays lean further and fade as the sea darkens. The flash dims to cold steel.\n// Buttons: K1 tap sends a hunter charging through the ball now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Fish swim in rows one LED apart, each two body lengths behind the next and\n// one length along from the fish in the rows above and below, as schools space themselves.\nconst ROWS = 124;\nconst GAP = 6;\n// Each row's fish wrap round this length, wider than the panel so the wrap stays out of sight.\nconst SPAN = 84;\n// Rows swim in bands this deep, each band the other way from the next: the ball mills.\nconst BAND = 13;\n// How fast a turning front runs, in LEDs per second at Speed 2.\nconst SWEEP = 80;\nconst { min, max, sin, exp, sqrt, round, floor, atan2, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst hash = (a, b) => {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// A dusky shark and a common dolphin, nose to the right: # back, b belly, h the dolphin's tan flank, e eye.\nconst SHARK = [\n  \"..........#.........\",\n  \".........##.........\",\n  \"#.......##########..\",\n  \"##...###############\",\n  \".##############e####\",\n  \"##...bbbbbbbbbbbbbb.\",\n  \"#........#.....#....\",\n];\nconst DOLPHIN = [\n  \"........#..........\",\n  \".......##..........\",\n  \"...###########.....\",\n  \"##############e##..\",\n  \".##hhhhhhbbbbbbbbbb\",\n  \"##...bbbbbbbbb.....\",\n  \".........#.........\",\n];\nconst SHARK_C = { \"#\": [30, 40, 54], b: [74, 84, 96], e: [4, 4, 6] };\nconst DOLPHIN_C = { \"#\": [40, 48, 66], b: [128, 136, 148], h: [118, 104, 70], e: [4, 4, 6] };\n\nexport function setup(params) {\n  const fu = [];\n  const fr = [];\n  for (let j = 0; j \u003c ROWS; j++)\n    for (let u = (j & 1) * (GAP / 2); u \u003c SPAN - 1; u += GAP) {\n      fu.push(u + (Math.random() - 0.5) * 1.4);\n      fr.push(j);\n    }\n  const n = fu.length;\n  const R = (a, b) => Float32Array.from({ length: n }, () => a + Math.random() * b);\n  const v = new Float32Array(ROWS);\n  for (let j = 0; j \u003c ROWS; j++) {\n    const b = floor(j / BAND);\n    v[j] = (b & 1 ? -1 : 1) * (3.2 + 2.4 * sin(b * 2.1 + 0.4));\n  }\n  params.s = {\n    fu: Float32Array.from(fu),\n    fr: Uint8Array.from(fr),\n    edge: R(0, 1),\n    lag: R(0, 1),\n    ph: R(0, 6.283),\n    v,\n    off: new Float32Array(ROWS),\n    buf: new Float32Array(N * 3),\n    clear: new Float32Array(N),\n    lt: new Float32Array(129),\n    rt: new Float32Array(440),\n    tau: 0,\n    base: 0,\n    ev: [],\n    next: 2.08,\n    nextTo: 1,\n    nextDir: 1,\n    hunters: [],\n    gannets: [],\n    bubbles: [],\n    holes: [],\n    // The first hunter charges just as the panel has opened, and the school turns from it.\n    slots: Float32Array.from({ length: 5 }, (_, k) => 2.1 + k * (1.7 + Math.random() * 1.2)),\n    gTimer: 3.2 + Math.random(),\n    queue: [],\n    k: [0, 2, 1, 0.06],\n  };\n}\n\nfunction charge(S, from) {\n  const dir = from || (Math.random() \u003c 0.5 ? 1 : -1);\n  S.hunters.push({\n    kind: Math.random() \u003c 0.5 ? 0 : 1,\n    dir,\n    x: dir > 0 ? -18 : W + 18,\n    y0: S.cy + (Math.random() * 2 - 1) * S.ry * 0.55,\n    y: 0,\n    sp: 38 + Math.random() * 16,\n    ph: Math.random() * 6.283,\n    drop: 0,\n  });\n}\n\nfunction dive(S, delay) {\n  S.queue.push({ at: S.tau + delay, x: 8 + Math.random() * 48 });\n}\n\n// How far a turn has carried a point: 0 shows the backs, 1 the silver flanks.\n// Each front is kept as one position per row. TG is the flash right on the\n// front, where the fish are mid-turn.\nlet TG = 0;\nfunction fronts(S) {\n  for (const e of S.ev) {\n    if (!e.row) e.row = new Float32Array(H);\n    const X = (S.tau - e.at) * SWEEP - 12;\n    for (let y = 0; y \u003c H; y++) e.row[y] = X - 9 * sin(y * 0.045 + e.ph) - 0.2 * (y - 64) * e.tilt;\n  }\n}\nfunction turned(S, x, y, lag) {\n  let s = S.base;\n  TG = 0;\n  const yi = y \u003c 0 ? 0 : y > H - 1 ? H - 1 : y | 0;\n  for (const e of S.ev) {\n    const d = e.row[yi] - (e.dir > 0 ? x : 63 - x) - lag * 8;\n    if (d \u003c= 0) continue;\n    if (d >= 8) {\n      s = e.to;\n      continue;\n    }\n    const p = sstep(0, 8, d);\n    TG = max(TG, 4 * p * (1 - p));\n    s += (e.to - s) * p;\n  }\n  return s;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || S.k;\n  S.k = [clamp(k[0], 0, 1), clamp(k[1], 0.2, 3), clamp(k[2], 1, 5), clamp(k[3], 0, 1)];\n  dt = clamp(dt || 0, 0, 0.1);\n  const d = dt * (S.k[1] / 2);\n  S.tau += d;\n  const t = S.tau;\n  const hunt = round(S.k[2]);\n  // The more hunters, the tighter the school packs.\n  const sc = 1 - 0.055 * (S.k[2] - 1);\n  S.cx = 32 + 2.5 * sin(t * 0.17);\n  S.cy = 73 + 3 * sin(t * 0.13 + 1);\n  S.rx = 32 * sc;\n  S.ry = 61 * sc;\n  for (let j = 0; j \u003c ROWS; j++) S.off[j] += S.v[j] * d;\n\n  // The turns: the first comes just after the panel opens on dark backs.\n  if (t >= S.next) {\n    S.ev.push({ at: S.next, to: S.nextTo, dir: S.nextDir, ph: Math.random() * 6.283, tilt: Math.random() * 2 - 1 });\n    const first = S.ev.length === 1 && S.next \u003c 3;\n    S.next += S.nextTo ? (first ? 7.3 : 5 + Math.random() * 3) : 2.6 + Math.random() * 2;\n    S.nextTo = 1 - S.nextTo;\n    S.nextDir = first ? -1 : Math.random() \u003c 0.5 ? 1 : -1;\n  }\n  // A front that has left the panel is folded into the base state.\n  while (S.ev.length && (t - S.ev[0].at) * SWEEP > 130) S.base = S.ev.shift().to;\n\n  // Hunters from the sides, each on its own clock.\n  for (let i = 0; i \u003c 5; i++) {\n    if (i >= hunt) continue;\n    S.slots[i] -= d;\n    if (S.slots[i] \u003c= 0) {\n      // The first comes in from the left, the side the first turn starts from.\n      charge(S, S.charged ? 0 : 1);\n      S.charged = true;\n      S.slots[i] = 3 + Math.random() * 4;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) charge(S);\n  // Gannets come in volleys of two to four.\n  S.gTimer -= d * (0.6 + 0.4 * hunt);\n  if (S.gTimer \u003c= 0) {\n    const m = 2 + floor(Math.random() * 3);\n    for (let i = 0; i \u003c m; i++) dive(S, i * (0.2 + Math.random() * 0.3));\n    S.gTimer = 4 + Math.random() * 4;\n  }\n  for (let i = S.queue.length - 1; i >= 0; i--) {\n    const q = S.queue[i];\n    if (t \u003c q.at) continue;\n    S.queue.splice(i, 1);\n    S.gannets.push({ x: q.x, y: -3, vx: (Math.random() * 2 - 1) * 14, vy: 100 + Math.random() * 30, up: false, last: 0 });\n  }\n\n  for (let i = S.hunters.length - 1; i >= 0; i--) {\n    const h = S.hunters[i];\n    h.x += h.dir * h.sp * d;\n    h.y = h.y0 + 7 * sin(h.x * 0.035 + h.ph);\n    h.drop += d;\n    if (h.drop > 0.07) {\n      h.drop = 0;\n      S.holes.push({ x: h.x + h.dir * 5, y: h.y, r: 10.5, age: 0, life: 0.9 });\n    }\n    if (h.x \u003c -36 || h.x > W + 36) S.hunters.splice(i, 1);\n  }\n  for (let i = S.gannets.length - 1; i >= 0; i--) {\n    const g = S.gannets[i];\n    const wet = g.y > 2;\n    g.x += g.vx * d;\n    g.y += g.vy * d;\n    if (!wet && g.y > 2) {\n      // The splash: a burst of air dragged under.\n      for (let b = 0; b \u003c 16; b++) bubble(S, g.x + (Math.random() * 2 - 1) * 4, 3 + Math.random() * 8);\n    }\n    if (g.y > 2 && !g.up) {\n      g.vy *= exp(-1.5 * d);\n      g.vx *= exp(-1.5 * d);\n      if (Math.random() \u003c 0.9) bubble(S, g.x - g.vx * 0.04, g.y - 3 - Math.random() * 3);\n      if (g.vy \u003c 20) {\n        g.up = true;\n        g.vy = -32;\n      }\n    }\n    g.last += d;\n    if (g.y > 2 && g.last > 0.06) {\n      g.last = 0;\n      S.holes.push({ x: g.x, y: g.y, r: 4.5, age: 0, life: 0.9 });\n    }\n    if (g.up && g.y \u003c -4) S.gannets.splice(i, 1);\n  }\n  for (let i = S.bubbles.length - 1; i >= 0; i--) {\n    const b = S.bubbles[i];\n    b.age += d;\n    b.y -= b.vy * d;\n    b.x += sin(b.age * 6 + b.ph) * 4 * d;\n    if (b.age > b.life || b.y \u003c 1) S.bubbles.splice(i, 1);\n  }\n  for (let i = S.holes.length - 1; i >= 0; i--) {\n    S.holes[i].age += d;\n    if (S.holes[i].age > S.holes[i].life) S.holes.splice(i, 1);\n  }\n}\n\nfunction bubble(S, x, y) {\n  if (S.bubbles.length \u003c 400) S.bubbles.push({ x, y, vy: 9 + Math.random() * 12, age: 0, life: 1.2 + Math.random() * 1.6, ph: Math.random() * 6.283 });\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.cx === undefined) return;\n  const { buf } = S;\n  const t = S.tau;\n  const [wq, , , sun] = S.k;\n  // The sea: clear blue to coastal green, light near the surface and deep below.\n  const top = [mix(30, 50, wq), mix(118, 150, wq), mix(196, 120, wq)];\n  const deep = [mix(4, 8, wq), mix(30, 52, wq), mix(84, 44, wq)];\n  const day = 1 - 0.45 * sun;\n  // Rays bend into the water: 55 degrees off the vertical above it is 38 below, 82 is 48.\n  const slope = mix(0.78, 1.11, sun);\n  const rayS = mix(1, 0.3, sun) * day;\n  // Low sun reaches the school through more water, so the flash cools as it dims.\n  const silver = [mix(242, 200, sun), mix(249, 214, sun), mix(255, 232, sun)];\n  const flash = mix(1, 0.7, sun);\n  const back = [mix(12, 10, wq), mix(28, 42, wq), mix(52, 40, wq)];\n  const glow = [10 * flash, 16 * flash, 22 * flash];\n  const { cx, cy, rx, ry } = S;\n  // The ball's outline, one radius for each of 128 directions, and the rays by where they leave the surface.\n  const { lt, rt, clear } = S;\n  for (let i = 0; i \u003c= 128; i++) {\n    const th = -PI + (i * PI) / 64;\n    lt[i] = 1 + 0.08 * sin(3 * th + 0.45 * t) + 0.06 * sin(5 * th - 0.7 * t + 1) + 0.05 * sin(2 * th + 0.25 * t + 2);\n  }\n  const lump = (th) => lt[round(((th + PI) * 64) / PI)];\n  for (let i = 0; i \u003c rt.length; i++) {\n    const u = i / 2 - 150;\n    const ray = sin(u * 0.23 + t * 0.35) + 0.8 * sin(u * 0.41 - t * 0.27 + 1.3) + 0.6 * sin(u * 0.13 + t * 0.15 + 2) - 0.9;\n    rt[i] = ray > 0 ? ray : 0;\n  }\n  fronts(S);\n  // Where the hunters have just been, the ball is open and the sea shows through.\n  clear.fill(0);\n  for (const h of S.holes) {\n    const rr = (h.rr = h.r * (1 - h.age / h.life) ** 0.6);\n    for (let y = max(0, floor(h.y - rr)); y \u003c= min(H - 1, h.y + rr); y++)\n      for (let x = max(0, floor(h.x - rr * 1.6)); x \u003c= min(W - 1, h.x + rr * 1.6); x++) {\n        const dd = sqrt(((x - h.x) / 1.6) ** 2 + (y - h.y) ** 2);\n        const c = 1 - sstep(0.45 * rr, 0.8 * rr, dd);\n        if (c > clear[y * W + x]) clear[y * W + x] = c;\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    const dz = y / (H - 1);\n    const f = dz ** 0.8;\n    const wr = mix(top[0], deep[0], f) * day;\n    const wg = mix(top[1], deep[1], f) * day;\n    const wb = mix(top[2], deep[2], f) * day;\n    const fade = exp(-y / 60) * rayS;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      // Sun rays: bright where the waves above focus the light, leaning with the sun.\n      const u = x - slope * y;\n      const ray = rt[((u + 150) * 2) | 0] * fade;\n      let r = wr + ray * 46;\n      let g = wg + ray * 60;\n      let b = wb + ray * 58;\n      const ddx = (x - cx) / rx;\n      const ddy = (y - cy) / ry;\n      const q0 = sqrt(ddx * ddx + ddy * ddy);\n      // The outline only matters near it: the lumps change the radius by a fifth at most.\n      const q = q0 \u003c 0.7 || q0 > 1.8 ? q0 : q0 / lump(atan2(ddy, ddx));\n      if (q \u003c 1.5) {\n        // Inside the ball the fish shade the water; outside it, light thrown off their flanks.\n        const m0 = 1 - sstep(0.88, 1.05, q);\n        const c = clear[y * W + x];\n        const m = m0 * (1 - c);\n        const s = turned(S, x, y, 0.5);\n        const sh = 1 - 0.9 * m;\n        const hl = (s + 0.6 * TG) * (1.6 * m + 0.6 * c * m0 + (1 - m0) * 3.4 * (1 - sstep(1, 1.5, q)));\n        r = r * sh + glow[0] * hl;\n        g = g * sh + glow[1] * hl;\n        b = b * sh + glow[2] * hl;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n\n  // The fish.\n  const { fu, fr, edge, lag, ph, v, off, holes } = S;\n  const tick = floor(t * 6);\n  for (let i = 0; i \u003c fu.length; i++) {\n    const j = fr[i];\n    let u = (fu[i] + off[j]) % SPAN;\n    if (u \u003c 0) u += SPAN;\n    let x = cx + u - SPAN / 2;\n    if (x \u003c -4 || x > W + 3) continue;\n    let y = cy + (j - (ROWS - 1) / 2) + 1.2 * sin(x * 0.085 + t * 0.6);\n    const ddx = (x - cx) / rx;\n    const ddy = (y - cy) / ry;\n    const q0 = sqrt(ddx * ddx + ddy * ddy);\n    if (q0 > 0.74 && q0 / lump(atan2(ddy, ddx)) > 0.93 + 0.1 * edge[i]) continue;\n    // Holes the hunters punch: fish inside are pushed to the rim and flash as they flee.\n    let startle = 0;\n    for (let h = 0; h \u003c holes.length; h++) {\n      const H0 = holes[h];\n      const rr = H0.rr;\n      const hy = y - H0.y;\n      if (hy > rr * 1.8 || hy \u003c -rr * 1.8) continue;\n      const hx = (x - H0.x) / 1.6;\n      const d2 = hx * hx + hy * hy;\n      if (d2 > rr * rr * 3.2) continue;\n      const dd = sqrt(d2) + 1e-3;\n      if (dd \u003c rr) {\n        const k = (rr - (rr - dd) * 0.3) / dd;\n        x = H0.x + hx * 1.6 * k;\n        y = H0.y + hy * k;\n      }\n      startle = max(startle, 1 - dd / (rr * 1.8));\n    }\n    let s = turned(S, x, y, lag[i]);\n    let g = TG;\n    if (hash(i, tick) \u003c 0.012) g = 1;\n    s = max(s, startle);\n    const dir = v[j] > 0 ? 1 : -1;\n    const len = s > 0.5 ? 3 : 2;\n    // Broadside the flanks shimmer as ripples run through the school.\n    const rip = 0.5 + 0.5 * sin(x * 0.27 - t * 2.6 + y * 0.08 + ph[i] * 0.3);\n    const lit = (1 - 0.06 * s * rip * rip * rip) * flash;\n    const xi = round(x);\n    const yi = round(y);\n    for (let p = 0; p \u003c len; p++) {\n      const w = (p === 0 ? 1 : p === 1 ? 0.95 : 0.86) * lit;\n      const a = s * w;\n      const c = (1 - s) * (p === 0 ? 1 : 0.8);\n      put(buf, xi - dir * p, yi, back[0] * c + silver[0] * a + 90 * g, back[1] * c + silver[1] * a + 95 * g, back[2] * c + silver[2] * a + 100 * g);\n    }\n  }\n\n  // The hunters, dark against the silver, drawn half as large again as their art.\n  for (const h of S.hunters) {\n    const art = h.kind ? DOLPHIN : SHARK;\n    const col = h.kind ? DOLPHIN_C : SHARK_C;\n    const wd = round(art[0].length * 1.5);\n    const ht = round(art.length * 1.5);\n    const x0 = round(h.x - wd / 2);\n    const y0 = round(h.y - ht / 2);\n    for (let j = 0; j \u003c ht; j++)\n      for (let i = 0; i \u003c wd; i++) {\n        const c = art[floor(j / 1.5)][floor((h.dir > 0 ? i : wd - 1 - i) / 1.5)];\n        if (c === \".\") continue;\n        const cc = col[c];\n        put(buf, x0 + i, y0 + j, cc[0] * day, cc[1] * day, cc[2] * day);\n      }\n  }\n  for (const b of S.bubbles) {\n    const a = 1 - b.age / b.life;\n    const x = round(b.x);\n    const y = round(b.y);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const o = (y * W + x) * 3;\n    buf[o] = mix(buf[o], 210, a);\n    buf[o + 1] = mix(buf[o + 1], 240, a);\n    buf[o + 2] = mix(buf[o + 2], 255, a);\n  }\n  // Gannets: white darts with buff heads and black wingtips, folded for the dive.\n  for (const g of S.gannets) {\n    const sp = sqrt(g.vx * g.vx + g.vy * g.vy) + 1e-3;\n    const ux = g.vx / sp;\n    const uy = g.vy / sp;\n    for (let p = 0; p \u003c 6; p++) {\n      const px = round(g.x - ux * p);\n      const py = round(g.y - uy * p);\n      if (p === 0) put(buf, px, py, 250, 228, 150);\n      else if (p \u003c 4) {\n        put(buf, px, py, 250, 250, 250);\n        if (p === 2) put(buf, px + 1, py, 225, 228, 232);\n      } else put(buf, px, py, 26, 26, 30);\n    }\n  }\n  // The underside of the surface, bright and broken by the waves.\n  for (let y = 0; y \u003c 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const a = [0.85, 0.5, 0.2][y] * (0.7 + 0.3 * sin(x * 0.5 + t * 2.1) * sin(x * 0.23 - t * 1.3));\n      const o = (y * W + x) * 3;\n      buf[o] = mix(buf[o], 200 * day, a);\n      buf[o + 1] = mix(buf[o + 1], 232 * day, a);\n      buf[o + 2] = mix(buf[o + 2], 248 * day, a);\n    }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n    }\n}\n","layer":{"id":"layer-bait-ball","type":"code","name":"bait-ball","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bait Ball\n// Family:  ocean\n// Idea:    Seen from the side in open blue water, a sardine bait ball fills the panel with a thousand fish churning in layers, and when the school turns together a wave of silver runs across it until it turns away again and shows its dark blue backs, while sharks and dolphins charge through and gannets dive in from the surface, punching holes that close behind them.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the sardine bait balls of the Sardine Run\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Speed=0.2..3, Predators=1..5, Sun=0..1\n//\n// Knob 1: Water. The colour of the sea: the clear blue of open ocean at 0, turning to the green of plankton-rich coastal water at 1.\n// Knob 2: Speed. How fast the school and its hunters move: at 2 a turn runs across the ball in just over a second, and the school shows its flanks for five to eight seconds before it turns away; at 0.2 it all runs ten times slower.\n// Knob 3: Predators. How many sharks and dolphins work the ball, from one to five. More hunters charge more often and bring more gannets with them. The school packs tighter against them.\n// Knob 4: Sun. The time of day, from noon of a Sardine Run winter at 0, when the sun stands 35 degrees up and its rays lean 38 degrees in the water, to late afternoon at 1. Toward 1 the rays lean further and fade as the sea darkens. The flash dims to cold steel.\n// Buttons: K1 tap sends a hunter charging through the ball now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Fish swim in rows one LED apart, each two body lengths behind the next and\n// one length along from the fish in the rows above and below, as schools space themselves.\nconst ROWS = 124;\nconst GAP = 6;\n// Each row's fish wrap round this length, wider than the panel so the wrap stays out of sight.\nconst SPAN = 84;\n// Rows swim in bands this deep, each band the other way from the next: the ball mills.\nconst BAND = 13;\n// How fast a turning front runs, in LEDs per second at Speed 2.\nconst SWEEP = 80;\nconst { min, max, sin, exp, sqrt, round, floor, atan2, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst hash = (a, b) => {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// A dusky shark and a common dolphin, nose to the right: # back, b belly, h the dolphin's tan flank, e eye.\nconst SHARK = [\n  \"..........#.........\",\n  \".........##.........\",\n  \"#.......##########..\",\n  \"##...###############\",\n  \".##############e####\",\n  \"##...bbbbbbbbbbbbbb.\",\n  \"#........#.....#....\",\n];\nconst DOLPHIN = [\n  \"........#..........\",\n  \".......##..........\",\n  \"...###########.....\",\n  \"##############e##..\",\n  \".##hhhhhhbbbbbbbbbb\",\n  \"##...bbbbbbbbb.....\",\n  \".........#.........\",\n];\nconst SHARK_C = { \"#\": [30, 40, 54], b: [74, 84, 96], e: [4, 4, 6] };\nconst DOLPHIN_C = { \"#\": [40, 48, 66], b: [128, 136, 148], h: [118, 104, 70], e: [4, 4, 6] };\n\nexport function setup(params) {\n  const fu = [];\n  const fr = [];\n  for (let j = 0; j \u003c ROWS; j++)\n    for (let u = (j & 1) * (GAP / 2); u \u003c SPAN - 1; u += GAP) {\n      fu.push(u + (Math.random() - 0.5) * 1.4);\n      fr.push(j);\n    }\n  const n = fu.length;\n  const R = (a, b) => Float32Array.from({ length: n }, () => a + Math.random() * b);\n  const v = new Float32Array(ROWS);\n  for (let j = 0; j \u003c ROWS; j++) {\n    const b = floor(j / BAND);\n    v[j] = (b & 1 ? -1 : 1) * (3.2 + 2.4 * sin(b * 2.1 + 0.4));\n  }\n  params.s = {\n    fu: Float32Array.from(fu),\n    fr: Uint8Array.from(fr),\n    edge: R(0, 1),\n    lag: R(0, 1),\n    ph: R(0, 6.283),\n    v,\n    off: new Float32Array(ROWS),\n    buf: new Float32Array(N * 3),\n    clear: new Float32Array(N),\n    lt: new Float32Array(129),\n    rt: new Float32Array(440),\n    tau: 0,\n    base: 0,\n    ev: [],\n    next: 2.08,\n    nextTo: 1,\n    nextDir: 1,\n    hunters: [],\n    gannets: [],\n    bubbles: [],\n    holes: [],\n    // The first hunter charges just as the panel has opened, and the school turns from it.\n    slots: Float32Array.from({ length: 5 }, (_, k) => 2.1 + k * (1.7 + Math.random() * 1.2)),\n    gTimer: 3.2 + Math.random(),\n    queue: [],\n    k: [0, 2, 1, 0.06],\n  };\n}\n\nfunction charge(S, from) {\n  const dir = from || (Math.random() \u003c 0.5 ? 1 : -1);\n  S.hunters.push({\n    kind: Math.random() \u003c 0.5 ? 0 : 1,\n    dir,\n    x: dir > 0 ? -18 : W + 18,\n    y0: S.cy + (Math.random() * 2 - 1) * S.ry * 0.55,\n    y: 0,\n    sp: 38 + Math.random() * 16,\n    ph: Math.random() * 6.283,\n    drop: 0,\n  });\n}\n\nfunction dive(S, delay) {\n  S.queue.push({ at: S.tau + delay, x: 8 + Math.random() * 48 });\n}\n\n// How far a turn has carried a point: 0 shows the backs, 1 the silver flanks.\n// Each front is kept as one position per row. TG is the flash right on the\n// front, where the fish are mid-turn.\nlet TG = 0;\nfunction fronts(S) {\n  for (const e of S.ev) {\n    if (!e.row) e.row = new Float32Array(H);\n    const X = (S.tau - e.at) * SWEEP - 12;\n    for (let y = 0; y \u003c H; y++) e.row[y] = X - 9 * sin(y * 0.045 + e.ph) - 0.2 * (y - 64) * e.tilt;\n  }\n}\nfunction turned(S, x, y, lag) {\n  let s = S.base;\n  TG = 0;\n  const yi = y \u003c 0 ? 0 : y > H - 1 ? H - 1 : y | 0;\n  for (const e of S.ev) {\n    const d = e.row[yi] - (e.dir > 0 ? x : 63 - x) - lag * 8;\n    if (d \u003c= 0) continue;\n    if (d >= 8) {\n      s = e.to;\n      continue;\n    }\n    const p = sstep(0, 8, d);\n    TG = max(TG, 4 * p * (1 - p));\n    s += (e.to - s) * p;\n  }\n  return s;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || S.k;\n  S.k = [clamp(k[0], 0, 1), clamp(k[1], 0.2, 3), clamp(k[2], 1, 5), clamp(k[3], 0, 1)];\n  dt = clamp(dt || 0, 0, 0.1);\n  const d = dt * (S.k[1] / 2);\n  S.tau += d;\n  const t = S.tau;\n  const hunt = round(S.k[2]);\n  // The more hunters, the tighter the school packs.\n  const sc = 1 - 0.055 * (S.k[2] - 1);\n  S.cx = 32 + 2.5 * sin(t * 0.17);\n  S.cy = 73 + 3 * sin(t * 0.13 + 1);\n  S.rx = 32 * sc;\n  S.ry = 61 * sc;\n  for (let j = 0; j \u003c ROWS; j++) S.off[j] += S.v[j] * d;\n\n  // The turns: the first comes just after the panel opens on dark backs.\n  if (t >= S.next) {\n    S.ev.push({ at: S.next, to: S.nextTo, dir: S.nextDir, ph: Math.random() * 6.283, tilt: Math.random() * 2 - 1 });\n    const first = S.ev.length === 1 && S.next \u003c 3;\n    S.next += S.nextTo ? (first ? 7.3 : 5 + Math.random() * 3) : 2.6 + Math.random() * 2;\n    S.nextTo = 1 - S.nextTo;\n    S.nextDir = first ? -1 : Math.random() \u003c 0.5 ? 1 : -1;\n  }\n  // A front that has left the panel is folded into the base state.\n  while (S.ev.length && (t - S.ev[0].at) * SWEEP > 130) S.base = S.ev.shift().to;\n\n  // Hunters from the sides, each on its own clock.\n  for (let i = 0; i \u003c 5; i++) {\n    if (i >= hunt) continue;\n    S.slots[i] -= d;\n    if (S.slots[i] \u003c= 0) {\n      // The first comes in from the left, the side the first turn starts from.\n      charge(S, S.charged ? 0 : 1);\n      S.charged = true;\n      S.slots[i] = 3 + Math.random() * 4;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) charge(S);\n  // Gannets come in volleys of two to four.\n  S.gTimer -= d * (0.6 + 0.4 * hunt);\n  if (S.gTimer \u003c= 0) {\n    const m = 2 + floor(Math.random() * 3);\n    for (let i = 0; i \u003c m; i++) dive(S, i * (0.2 + Math.random() * 0.3));\n    S.gTimer = 4 + Math.random() * 4;\n  }\n  for (let i = S.queue.length - 1; i >= 0; i--) {\n    const q = S.queue[i];\n    if (t \u003c q.at) continue;\n    S.queue.splice(i, 1);\n    S.gannets.push({ x: q.x, y: -3, vx: (Math.random() * 2 - 1) * 14, vy: 100 + Math.random() * 30, up: false, last: 0 });\n  }\n\n  for (let i = S.hunters.length - 1; i >= 0; i--) {\n    const h = S.hunters[i];\n    h.x += h.dir * h.sp * d;\n    h.y = h.y0 + 7 * sin(h.x * 0.035 + h.ph);\n    h.drop += d;\n    if (h.drop > 0.07) {\n      h.drop = 0;\n      S.holes.push({ x: h.x + h.dir * 5, y: h.y, r: 10.5, age: 0, life: 0.9 });\n    }\n    if (h.x \u003c -36 || h.x > W + 36) S.hunters.splice(i, 1);\n  }\n  for (let i = S.gannets.length - 1; i >= 0; i--) {\n    const g = S.gannets[i];\n    const wet = g.y > 2;\n    g.x += g.vx * d;\n    g.y += g.vy * d;\n    if (!wet && g.y > 2) {\n      // The splash: a burst of air dragged under.\n      for (let b = 0; b \u003c 16; b++) bubble(S, g.x + (Math.random() * 2 - 1) * 4, 3 + Math.random() * 8);\n    }\n    if (g.y > 2 && !g.up) {\n      g.vy *= exp(-1.5 * d);\n      g.vx *= exp(-1.5 * d);\n      if (Math.random() \u003c 0.9) bubble(S, g.x - g.vx * 0.04, g.y - 3 - Math.random() * 3);\n      if (g.vy \u003c 20) {\n        g.up = true;\n        g.vy = -32;\n      }\n    }\n    g.last += d;\n    if (g.y > 2 && g.last > 0.06) {\n      g.last = 0;\n      S.holes.push({ x: g.x, y: g.y, r: 4.5, age: 0, life: 0.9 });\n    }\n    if (g.up && g.y \u003c -4) S.gannets.splice(i, 1);\n  }\n  for (let i = S.bubbles.length - 1; i >= 0; i--) {\n    const b = S.bubbles[i];\n    b.age += d;\n    b.y -= b.vy * d;\n    b.x += sin(b.age * 6 + b.ph) * 4 * d;\n    if (b.age > b.life || b.y \u003c 1) S.bubbles.splice(i, 1);\n  }\n  for (let i = S.holes.length - 1; i >= 0; i--) {\n    S.holes[i].age += d;\n    if (S.holes[i].age > S.holes[i].life) S.holes.splice(i, 1);\n  }\n}\n\nfunction bubble(S, x, y) {\n  if (S.bubbles.length \u003c 400) S.bubbles.push({ x, y, vy: 9 + Math.random() * 12, age: 0, life: 1.2 + Math.random() * 1.6, ph: Math.random() * 6.283 });\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.cx === undefined) return;\n  const { buf } = S;\n  const t = S.tau;\n  const [wq, , , sun] = S.k;\n  // The sea: clear blue to coastal green, light near the surface and deep below.\n  const top = [mix(30, 50, wq), mix(118, 150, wq), mix(196, 120, wq)];\n  const deep = [mix(4, 8, wq), mix(30, 52, wq), mix(84, 44, wq)];\n  const day = 1 - 0.45 * sun;\n  // Rays bend into the water: 55 degrees off the vertical above it is 38 below, 82 is 48.\n  const slope = mix(0.78, 1.11, sun);\n  const rayS = mix(1, 0.3, sun) * day;\n  // Low sun reaches the school through more water, so the flash cools as it dims.\n  const silver = [mix(242, 200, sun), mix(249, 214, sun), mix(255, 232, sun)];\n  const flash = mix(1, 0.7, sun);\n  const back = [mix(12, 10, wq), mix(28, 42, wq), mix(52, 40, wq)];\n  const glow = [10 * flash, 16 * flash, 22 * flash];\n  const { cx, cy, rx, ry } = S;\n  // The ball's outline, one radius for each of 128 directions, and the rays by where they leave the surface.\n  const { lt, rt, clear } = S;\n  for (let i = 0; i \u003c= 128; i++) {\n    const th = -PI + (i * PI) / 64;\n    lt[i] = 1 + 0.08 * sin(3 * th + 0.45 * t) + 0.06 * sin(5 * th - 0.7 * t + 1) + 0.05 * sin(2 * th + 0.25 * t + 2);\n  }\n  const lump = (th) => lt[round(((th + PI) * 64) / PI)];\n  for (let i = 0; i \u003c rt.length; i++) {\n    const u = i / 2 - 150;\n    const ray = sin(u * 0.23 + t * 0.35) + 0.8 * sin(u * 0.41 - t * 0.27 + 1.3) + 0.6 * sin(u * 0.13 + t * 0.15 + 2) - 0.9;\n    rt[i] = ray > 0 ? ray : 0;\n  }\n  fronts(S);\n  // Where the hunters have just been, the ball is open and the sea shows through.\n  clear.fill(0);\n  for (const h of S.holes) {\n    const rr = (h.rr = h.r * (1 - h.age / h.life) ** 0.6);\n    for (let y = max(0, floor(h.y - rr)); y \u003c= min(H - 1, h.y + rr); y++)\n      for (let x = max(0, floor(h.x - rr * 1.6)); x \u003c= min(W - 1, h.x + rr * 1.6); x++) {\n        const dd = sqrt(((x - h.x) / 1.6) ** 2 + (y - h.y) ** 2);\n        const c = 1 - sstep(0.45 * rr, 0.8 * rr, dd);\n        if (c > clear[y * W + x]) clear[y * W + x] = c;\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    const dz = y / (H - 1);\n    const f = dz ** 0.8;\n    const wr = mix(top[0], deep[0], f) * day;\n    const wg = mix(top[1], deep[1], f) * day;\n    const wb = mix(top[2], deep[2], f) * day;\n    const fade = exp(-y / 60) * rayS;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      // Sun rays: bright where the waves above focus the light, leaning with the sun.\n      const u = x - slope * y;\n      const ray = rt[((u + 150) * 2) | 0] * fade;\n      let r = wr + ray * 46;\n      let g = wg + ray * 60;\n      let b = wb + ray * 58;\n      const ddx = (x - cx) / rx;\n      const ddy = (y - cy) / ry;\n      const q0 = sqrt(ddx * ddx + ddy * ddy);\n      // The outline only matters near it: the lumps change the radius by a fifth at most.\n      const q = q0 \u003c 0.7 || q0 > 1.8 ? q0 : q0 / lump(atan2(ddy, ddx));\n      if (q \u003c 1.5) {\n        // Inside the ball the fish shade the water; outside it, light thrown off their flanks.\n        const m0 = 1 - sstep(0.88, 1.05, q);\n        const c = clear[y * W + x];\n        const m = m0 * (1 - c);\n        const s = turned(S, x, y, 0.5);\n        const sh = 1 - 0.9 * m;\n        const hl = (s + 0.6 * TG) * (1.6 * m + 0.6 * c * m0 + (1 - m0) * 3.4 * (1 - sstep(1, 1.5, q)));\n        r = r * sh + glow[0] * hl;\n        g = g * sh + glow[1] * hl;\n        b = b * sh + glow[2] * hl;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n\n  // The fish.\n  const { fu, fr, edge, lag, ph, v, off, holes } = S;\n  const tick = floor(t * 6);\n  for (let i = 0; i \u003c fu.length; i++) {\n    const j = fr[i];\n    let u = (fu[i] + off[j]) % SPAN;\n    if (u \u003c 0) u += SPAN;\n    let x = cx + u - SPAN / 2;\n    if (x \u003c -4 || x > W + 3) continue;\n    let y = cy + (j - (ROWS - 1) / 2) + 1.2 * sin(x * 0.085 + t * 0.6);\n    const ddx = (x - cx) / rx;\n    const ddy = (y - cy) / ry;\n    const q0 = sqrt(ddx * ddx + ddy * ddy);\n    if (q0 > 0.74 && q0 / lump(atan2(ddy, ddx)) > 0.93 + 0.1 * edge[i]) continue;\n    // Holes the hunters punch: fish inside are pushed to the rim and flash as they flee.\n    let startle = 0;\n    for (let h = 0; h \u003c holes.length; h++) {\n      const H0 = holes[h];\n      const rr = H0.rr;\n      const hy = y - H0.y;\n      if (hy > rr * 1.8 || hy \u003c -rr * 1.8) continue;\n      const hx = (x - H0.x) / 1.6;\n      const d2 = hx * hx + hy * hy;\n      if (d2 > rr * rr * 3.2) continue;\n      const dd = sqrt(d2) + 1e-3;\n      if (dd \u003c rr) {\n        const k = (rr - (rr - dd) * 0.3) / dd;\n        x = H0.x + hx * 1.6 * k;\n        y = H0.y + hy * k;\n      }\n      startle = max(startle, 1 - dd / (rr * 1.8));\n    }\n    let s = turned(S, x, y, lag[i]);\n    let g = TG;\n    if (hash(i, tick) \u003c 0.012) g = 1;\n    s = max(s, startle);\n    const dir = v[j] > 0 ? 1 : -1;\n    const len = s > 0.5 ? 3 : 2;\n    // Broadside the flanks shimmer as ripples run through the school.\n    const rip = 0.5 + 0.5 * sin(x * 0.27 - t * 2.6 + y * 0.08 + ph[i] * 0.3);\n    const lit = (1 - 0.06 * s * rip * rip * rip) * flash;\n    const xi = round(x);\n    const yi = round(y);\n    for (let p = 0; p \u003c len; p++) {\n      const w = (p === 0 ? 1 : p === 1 ? 0.95 : 0.86) * lit;\n      const a = s * w;\n      const c = (1 - s) * (p === 0 ? 1 : 0.8);\n      put(buf, xi - dir * p, yi, back[0] * c + silver[0] * a + 90 * g, back[1] * c + silver[1] * a + 95 * g, back[2] * c + silver[2] * a + 100 * g);\n    }\n  }\n\n  // The hunters, dark against the silver, drawn half as large again as their art.\n  for (const h of S.hunters) {\n    const art = h.kind ? DOLPHIN : SHARK;\n    const col = h.kind ? DOLPHIN_C : SHARK_C;\n    const wd = round(art[0].length * 1.5);\n    const ht = round(art.length * 1.5);\n    const x0 = round(h.x - wd / 2);\n    const y0 = round(h.y - ht / 2);\n    for (let j = 0; j \u003c ht; j++)\n      for (let i = 0; i \u003c wd; i++) {\n        const c = art[floor(j / 1.5)][floor((h.dir > 0 ? i : wd - 1 - i) / 1.5)];\n        if (c === \".\") continue;\n        const cc = col[c];\n        put(buf, x0 + i, y0 + j, cc[0] * day, cc[1] * day, cc[2] * day);\n      }\n  }\n  for (const b of S.bubbles) {\n    const a = 1 - b.age / b.life;\n    const x = round(b.x);\n    const y = round(b.y);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const o = (y * W + x) * 3;\n    buf[o] = mix(buf[o], 210, a);\n    buf[o + 1] = mix(buf[o + 1], 240, a);\n    buf[o + 2] = mix(buf[o + 2], 255, a);\n  }\n  // Gannets: white darts with buff heads and black wingtips, folded for the dive.\n  for (const g of S.gannets) {\n    const sp = sqrt(g.vx * g.vx + g.vy * g.vy) + 1e-3;\n    const ux = g.vx / sp;\n    const uy = g.vy / sp;\n    for (let p = 0; p \u003c 6; p++) {\n      const px = round(g.x - ux * p);\n      const py = round(g.y - uy * p);\n      if (p === 0) put(buf, px, py, 250, 228, 150);\n      else if (p \u003c 4) {\n        put(buf, px, py, 250, 250, 250);\n        if (p === 2) put(buf, px + 1, py, 225, 228, 232);\n      } else put(buf, px, py, 26, 26, 30);\n    }\n  }\n  // The underside of the surface, bright and broken by the waves.\n  for (let y = 0; y \u003c 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const a = [0.85, 0.5, 0.2][y] * (0.7 + 0.3 * sin(x * 0.5 + t * 2.1) * sin(x * 0.23 - t * 1.3));\n      const o = (y * W + x) * 3;\n      buf[o] = mix(buf[o], 200 * day, a);\n      buf[o + 1] = mix(buf[o + 1], 232 * day, a);\n      buf[o + 2] = mix(buf[o + 2], 248 * day, a);\n    }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Water=0..1, Speed=0.2..3, Predators=1..5, Sun=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Water","min":0,"max":1,"about":"The colour of the sea: the clear blue of open ocean at 0, turning to the green of plankton-rich coastal water at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the school and its hunters move: at 2 a turn runs across the ball in just over a second, and the school shows its flanks for five to eight seconds before it turns away; at 0.2 it all runs ten times slower."},{"name":"Predators","min":1,"max":5,"about":"How many sharks and dolphins work the ball, from one to five. More hunters charge more often and bring more gannets with them. The school packs tighter against them."},{"name":"Sun","min":0,"max":1,"about":"The time of day, from noon of a Sardine Run winter at 0, when the sun stands 35 degrees up and its rays lean 38 degrees in the water, to late afternoon at 1. Toward 1 the rays lean further and fade as the sea darkens. The flash dims to cold steel."}],"start":[0,2,1,0.06],"measures":{"motion":0.8889,"detail":0.2376,"edges":0.5511,"complexity":1.4993,"coverage":0.9518,"colour":0.2846,"drift":0.3724},"knobResponse":[0.0519,0.3412,0.1352,0.1016]},{"slug":"balloon-box","title":"Balloon Box","family":"weather","round":11,"note":"새벽 골짜기에 바람이 둘이에요. 낮은 바람은 열기구를 왼쪽으로, 높은 바람은 오른쪽으로 데려가고, 조종사가 버너로 높이를 바꾸면 풍선이 멈췄다 되돌아가요. 옆으로 나간 자리에는 새 풍선이 바람을 타고 들어오거나 들판에서 떠올라요. K1 을 누르면 모든 버너가 한꺼번에 켜져요.","idea":"Hot-air balloons ride the dawn winds of a valley box: low down the wind carries them one way, higher up it brings them back the other.","buttons":"K1 tap fires every burner at once; the envelopes glow from inside and the balloons climb.","code":"// ===== Patternflow pattern =====\n// Title:   Balloon Box\n// Family:  weather\n// Idea:    Hot-air balloons ride the dawn winds of a valley box: low down the wind carries them one way, higher up it brings them back the other.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the dawn mass ascensions over Albuquerque and the \"Albuquerque box\", the winds that blow one way near the ground and the other way a few hundred metres up\n// Round:   11\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Wind=0.2..3, Balloons=8..16, Sunrise=0..1\n//\n// Knob 1: Hue. Turns every envelope's colours around the wheel together; each balloon keeps its own stripes, bands or chevrons.\n// Knob 2: Wind. How hard the two winds blow: at the bottom of the range the balloons hang almost still, at the top the near ones cross the panel in a few seconds.\n// Knob 3: Balloons. How many are in the air; a balloon that joins drifts in from the side or lifts off from the field, and one that leaves drifts out and does not come back.\n// Knob 4: Sunrise. The hour: before dawn the sky is deep blue over an orange rim and the burners glow, turned up the sun comes over the ridge and the sky goes to morning blue.\n// Buttons: K1 tap fires every burner at once; the envelopes glow from inside and the balloons climb.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 16;\n// The two winds meet at this height. Above it they blow to the right, below\n// it to the left, and a balloon passing through slows, stops and turns.\nconst SPLIT = 60;\nconst SHEAR = 6;\n// Envelope colours. A balloon picks one of these as its first colour and\n// builds the rest of its fabric from it.\nconst HUES = [0.0, 0.07, 0.13, 0.27, 0.36, 0.5, 0.58, 0.66, 0.76, 0.86, 0.93];\n// How a balloon is sewn: two-colour gores, three-colour gores, a rainbow of\n// gores, level bands, zigzag chevrons, a cap and skirt over striped gores.\nconst DESIGNS = 6;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// The envelope's half width at height t, in radii: t is -1 at the crown, the\n// sphere is widest at 0, and below 0.3 it tapers to the throat at 1.4.\nfunction halfWidth(t) {\n  if (t \u003c -1 || t > 1.4) return 0;\n  if (t \u003c= 0.3) return Math.sqrt(1 - t * t);\n  const s = (t - 0.3) / 1.1;\n  return 0.22 + 0.734 * Math.cos(s * 1.5707963);\n}\n\n// The wind at height y: +1 to the right high up, -1 to the left low down.\nfunction wind(y) {\n  return Math.tanh((SPLIT - y) / SHEAR);\n}\n\n// Sky colour keys from before dawn to morning, top, middle and horizon.\nconst SKY = [\n  [0, [6, 8, 30], [16, 20, 62], [60, 34, 70]],\n  [0.06, [6, 10, 58], [20, 26, 104], [196, 78, 52]],\n  [0.4, [26, 46, 118], [86, 88, 168], [255, 146, 88]],\n  [1, [58, 118, 216], [118, 168, 232], [214, 222, 206]],\n];\n\nfunction skyKeys(s, out) {\n  let a = SKY[0];\n  let b = SKY[SKY.length - 1];\n  for (let i = 0; i \u003c SKY.length - 1; i++)\n    if (s >= SKY[i][0] && s \u003c= SKY[i + 1][0]) {\n      a = SKY[i];\n      b = SKY[i + 1];\n      break;\n    }\n  const f = b[0] > a[0] ? (s - a[0]) / (b[0] - a[0]) : 0;\n  for (let k = 0; k \u003c 3; k++) for (let c = 0; c \u003c 3; c++) out[k * 3 + c] = a[k + 1][c] + (b[k + 1][c] - a[k + 1][c]) * f;\n}\n\n// A new balloon's look: how near it is, its size, its fabric.\nfunction dress(P, i) {\n  const d = Math.random();\n  P.depth[i] = d;\n  P.R[i] = 9 + 7 * d;\n  P.design[i] = Math.floor(Math.random() * DESIGNS);\n  P.hue0[i] = HUES[Math.floor(Math.random() * HUES.length)];\n  P.gores[i] = 8 + 2 * Math.floor(Math.random() * 3);\n  P.rot[i] = Math.random() * 6.283;\n  P.spin[i] = (Math.random() - 0.5) * 0.5;\n  P.glow[i] = 0;\n  P.burn[i] = 0;\n  P.nextBurn[i] = 1 + Math.random() * 5;\n  P.retarget[i] = 6 + Math.random() * 10;\n}\n\n// Lifts a balloon off the field or brings it in on the wind from the side.\nfunction launch(P, i, fromField) {\n  dress(P, i);\n  const R = P.R[i];\n  if (fromField) {\n    P.x[i] = 10 + Math.random() * 44;\n    // Standing on the field with its basket on the ground.\n    P.y[i] = H - 2 * R;\n    P.target[i] = 20 + Math.random() * 74;\n    P.burn[i] = 2.5;\n  } else {\n    // Never at the split, where no wind would bring it in.\n    let y = 16 + Math.random() * 64;\n    if (y > SPLIT - 10) y += 20;\n    P.y[i] = y;\n    P.target[i] = y;\n    const w = wind(y);\n    P.x[i] = w > 0 ? -R * 1.1 : W + R * 1.1;\n  }\n  P.live[i] = 1;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.x = new Float32Array(MAX);\n  P.y = new Float32Array(MAX);\n  P.R = new Float32Array(MAX);\n  P.depth = new Float32Array(MAX);\n  P.design = new Int8Array(MAX);\n  P.hue0 = new Float32Array(MAX);\n  P.gores = new Int8Array(MAX);\n  P.rot = new Float32Array(MAX);\n  P.spin = new Float32Array(MAX);\n  P.glow = new Float32Array(MAX);\n  P.burn = new Float32Array(MAX);\n  P.nextBurn = new Float32Array(MAX);\n  P.target = new Float32Array(MAX);\n  P.retarget = new Float32Array(MAX);\n  P.live = new Int8Array(MAX);\n  P.order = new Int32Array(MAX);\n  P.fab = new Float32Array(MAX * 9);\n  // The rainbow design's gores, one colour each.\n  P.rain = new Float32Array(MAX * 12 * 3);\n  P.sky = new Float32Array(H * 3);\n  P.keys = new Float32Array(9);\n  P.bg = new Float32Array(N * 3);\n  P.col = new Float32Array(3);\n  // The ridge on the far side of the field, and the town's lights under it.\n  P.ridge = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++)\n    P.ridge[x] = Math.round(112 - 4 * Math.sin(x * 0.09 + 0.6) - 3 * Math.sin(x * 0.23 + 2.1) + 2 * hash(x, 3));\n  P.town = new Float32Array(N);\n  for (let i = 0; i \u003c 46; i++) {\n    const x = Math.floor(hash(i, 5) * W);\n    const y = P.ridge[x] + 3 + Math.floor(hash(i, 6) * (H - P.ridge[x] - 3));\n    if (y \u003c H) P.town[y * W + x] = 0.45 + 0.4 * hash(i, 7);\n  }\n  P.stars = new Float32Array(N);\n  for (let i = 0; i \u003c 30; i++) {\n    const x = Math.floor(hash(i, 8) * W);\n    const y = Math.floor(hash(i, 9) * 70);\n    P.stars[y * W + x] = 0.75 + 0.25 * hash(i, 10);\n  }\n  P.count = 8;\n  P.wind = 2;\n  P.hue = 0;\n  P.sun = 0.06;\n  P.ready = 0;\n}\n\n// The first frame's sky: the balloons spread over both winds, none of them\n// at a side, so the panel opens on a fiesta already in the air.\nfunction scatter(P) {\n  const n = P.count;\n  for (let i = 0; i \u003c MAX; i++) P.live[i] = 0;\n  for (let i = 0; i \u003c n; i++) {\n    dress(P, i);\n    // Heights in turn from the two winds, a little shuffled.\n    const slot = (i + 0.5) / n;\n    let y = 18 + slot * 84 + (Math.random() - 0.5) * 8;\n    if (Math.abs(y - SPLIT) \u003c 9) y = SPLIT + (y \u003c SPLIT ? -9 : 9);\n    P.y[i] = y;\n    P.target[i] = y;\n    P.x[i] = 8 + ((i * 0.618 + 0.2) % 1) * 48;\n    P.live[i] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.wind = Math.max(0.2, Math.min(3, k[1]));\n  P.count = Math.max(8, Math.min(MAX, Math.round(k[2])));\n  P.sun = Math.max(0, Math.min(1, k[3]));\n  if (!P.ready) {\n    scatter(P);\n    P.ready = 1;\n  }\n  const all = input.btnPressed && input.btnPressed[0];\n  let live = 0;\n  for (let i = 0; i \u003c MAX; i++) if (P.live[i]) live++;\n  // A balloon joins when the knob asks for more than are flying.\n  for (let i = 0; i \u003c MAX && live \u003c P.count; i++)\n    if (!P.live[i]) {\n      launch(P, i, Math.random() \u003c 0.4);\n      live++;\n    }\n\n  // Near balloons cross the panel faster than far ones, the way they would.\n  const pace = 4.4 * P.wind;\n  for (let i = 0; i \u003c MAX; i++) {\n    if (!P.live[i]) continue;\n    const R = P.R[i];\n    const d = P.depth[i];\n    if (all) {\n      P.burn[i] = 2.5;\n      P.target[i] = Math.max(16, P.y[i] - 28);\n      P.retarget[i] = 8 + Math.random() * 6;\n    }\n    // Now and then a pilot picks a new height, often in the other wind.\n    P.retarget[i] -= dt;\n    if (P.retarget[i] \u003c= 0) {\n      P.retarget[i] = 7 + Math.random() * 10;\n      P.target[i] = P.y[i] \u003c SPLIT ? SPLIT + 8 + Math.random() * 30 : 14 + Math.random() * 38;\n    }\n    // Climbing takes the burner; between climbs it fires short bursts to hold height.\n    const dy = P.target[i] - P.y[i];\n    if (dy \u003c -3 && P.burn[i] \u003c= 0) P.burn[i] = 1.2 + Math.random();\n    P.nextBurn[i] -= dt;\n    if (P.nextBurn[i] \u003c= 0) {\n      P.nextBurn[i] = 3 + Math.random() * 6;\n      if (P.burn[i] \u003c= 0) P.burn[i] = 0.5 + Math.random() * 0.6;\n    }\n    const firing = P.burn[i] > 0;\n    if (firing) P.burn[i] -= dt;\n    P.glow[i] += ((firing ? 1 : 0) - P.glow[i]) * Math.min(1, dt * (firing ? 7 : 0.9));\n    const climb = Math.max(-1, Math.min(1, dy / 10)) * (1.2 + 0.8 * Math.sqrt(P.wind / 2));\n    P.y[i] += climb * (0.6 + 0.4 * d) * dt;\n    P.x[i] += wind(P.y[i]) * pace * (0.5 + 0.5 * d) * dt;\n    P.rot[i] += P.spin[i] * dt;\n    // Off the side: the balloon is gone, and one takes its place.\n    const off = R * 1.15;\n    if (P.x[i] \u003c -off - 1 || P.x[i] > W + off + 1 || P.y[i] \u003c -R * 2) {\n      if (live > P.count) {\n        P.live[i] = 0;\n        live--;\n      } else launch(P, i, Math.random() \u003c 0.35);\n    }\n  }\n\n  // Fabric colours for this frame: each balloon's own, turned by K1.\n  const fab = P.fab;\n  for (let i = 0; i \u003c MAX; i++) {\n    if (!P.live[i]) continue;\n    const h = P.hue0[i] + P.hue;\n    const o = i * 9;\n    const des = P.design[i];\n    // Every colour at full value, so a seam between two gores changes the\n    // hue and not the brightness.\n    if (des === 0) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.5, 1, 1);\n      hsvInto(fab, o + 6, h, 1, 1);\n    } else if (des === 1) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.33, 1, 1);\n      hsvInto(fab, o + 6, h + 0.67, 1, 1);\n    } else if (des === 3) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.12, 1, 1);\n      hsvInto(fab, o + 6, h + 0.24, 1, 1);\n    } else if (des === 4) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.17, 1, 1);\n      hsvInto(fab, o + 6, h + 0.5, 1, 1);\n    } else {\n      hsvInto(fab, o, h + 0.5, 1, 1);\n      hsvInto(fab, o + 3, h, 1, 1);\n      hsvInto(fab, o + 6, h + 0.25, 1, 1);\n    }\n    if (des === 2) for (let g = 0; g \u003c P.gores[i]; g++) hsvInto(P.rain, (i * 12 + g) * 3, h + g / P.gores[i], 1, 1);\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const s = P.sun;\n  const keys = P.keys;\n  skyKeys(s, keys);\n  const bg = P.bg;\n  // The sky: top colour down to the middle, then to the horizon's rim, with\n  // the sun's glow over the ridge on the east side.\n  const sunX = 50;\n  const sunY = 118 - 40 * s;\n  // No glow before the sun is near: until then the rim is the whole dawn.\n  const sunAmp = 0.7 * smooth(0.08, 0.5, s);\n  const starAmp = 70 * (1 - smooth(0.05, 0.3, s));\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / 112;\n    let f;\n    let a;\n    let b;\n    if (v \u003c 0.55) {\n      f = v / 0.55;\n      a = 0;\n      b = 3;\n    } else {\n      f = Math.min(1, (v - 0.55) / 0.45);\n      // Eased, not squared: squared, the red of the rim climbs 7 levels a\n      // row near the ridge and the whole rim reads as a soft edge.\n      f = Math.pow(f, 1.5);\n      a = 3;\n      b = 6;\n    }\n    for (let c = 0; c \u003c 3; c++) P.sky[y * 3 + c] = keys[a + c] + (keys[b + c] - keys[a + c]) * f;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      if (y >= P.ridge[x]) {\n        // The ridge and the field under it, black but for the town.\n        const t = P.town[p] * (1 - 0.8 * smooth(0.3, 0.9, s));\n        const shade = 10 + 34 * smooth(0.2, 1, s);\n        bg[o] = shade * 0.8 + t * 255;\n        bg[o + 1] = shade * 0.75 + t * 190;\n        bg[o + 2] = shade + t * 90;\n        continue;\n      }\n      const gx = (x - sunX) / 34;\n      const gy = (y - sunY) / 22;\n      const g = sunAmp * Math.exp(-(gx * gx + gy * gy));\n      const st = P.stars[p] * starAmp;\n      bg[o] = P.sky[y * 3] + g * 120 + st;\n      bg[o + 1] = P.sky[y * 3 + 1] + g * 70 + st;\n      bg[o + 2] = P.sky[y * 3 + 2] + g * 30 + st;\n    }\n  }\n\n  // Far balloons first, so near ones pass in front.\n  let n = 0;\n  for (let i = 0; i \u003c MAX; i++) if (P.live[i]) P.order[n++] = i;\n  for (let a = 1; a \u003c n; a++) {\n    const v = P.order[a];\n    let b = a - 1;\n    while (b >= 0 && P.depth[P.order[b]] > P.depth[v]) {\n      P.order[b + 1] = P.order[b];\n      b--;\n    }\n    P.order[b + 1] = v;\n  }\n\n  // Light from the east and a little from below, the sun at the rim.\n  const Lx = 0.6;\n  const Ly = 0.12;\n  const Lz = 0.79;\n  const amb = 0.63 + 0.06 * s;\n  const sunL = 0.41 + 0.04 * s;\n  const fab = P.fab;\n  const col = P.col;\n  for (let q = 0; q \u003c n; q++) {\n    const i = P.order[q];\n    const cx = P.x[i];\n    const cy = P.y[i];\n    const R = P.R[i];\n    const d = P.depth[i];\n    const des = P.design[i];\n    const G = P.gores[i];\n    const rot = P.rot[i];\n    const glow = P.glow[i];\n    // Far balloons sit in more of the dawn's shadow.\n    const far = 0.88 + 0.12 * d;\n    const o9 = i * 9;\n    const x0 = Math.max(0, Math.floor(cx - R - 1));\n    const x1 = Math.min(W - 1, Math.ceil(cx + R + 1));\n    const y0 = Math.max(0, Math.floor(cy - R - 1));\n    const y1 = Math.min(H - 1, Math.ceil(cy + 1.4 * R));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = y + 0.5 - cy;\n      const t = dy / R;\n      const hw = halfWidth(t) * R;\n      if (hw \u003c= 0) continue;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x + 0.5 - cx;\n        const cover = Math.min(1, hw - Math.abs(dx) + 0.5);\n        if (cover \u003c= 0) continue;\n        const u = Math.asin(Math.max(-1, Math.min(1, dx / hw)));\n        const lon = (u + rot) / 6.2831853 + 2;\n        const lf = lon * G;\n        const gore = Math.floor(lf) % G;\n        let c;\n        if (des === 0 || des === 1) c = gore % (des === 0 ? 2 : 3);\n        else if (des === 2) c = -1;\n        else if (des === 3) c = Math.floor((t + 1) * 2.4) % 3;\n        else if (des === 4) {\n          const zig = Math.abs(lf - Math.floor(lf) - 0.5);\n          c = Math.floor((t + 1) * 2.2 + zig * 1.2) % 3;\n        } else c = t \u003c -0.45 || t > 0.95 ? 0 : 1 + (gore % 2);\n        const from = c \u003c 0 ? P.rain : fab;\n        const oc = c \u003c 0 ? (i * 12 + gore) * 3 : o9 + c * 3;\n        col[0] = from[oc];\n        col[1] = from[oc + 1];\n        col[2] = from[oc + 2];\n        // The cloth's light: a sphere above the waist, a cone below it.\n        let nx;\n        let ny;\n        if (t \u003c= 0.3) {\n          nx = dx / R;\n          ny = t;\n        } else {\n          nx = (dx / hw) * 0.95;\n          ny = 0.3;\n        }\n        const nz = Math.sqrt(Math.max(0, 1 - nx * nx - ny * ny));\n        // Half Lambert: the shadow side turns gently into the dark limb.\n        const lam = 0.5 + 0.5 * (nx * Lx + ny * Ly + nz * Lz);\n        // The burner lights the envelope from inside, strongest near the mouth.\n        const lit = amb + sunL * lam + glow * 0.5 * (0.45 + 0.55 * Math.min(1, (t + 1) / 2.2));\n        const p = y * W + x;\n        const o = p * 3;\n        const white = glow * 0.22;\n        for (let ch = 0; ch \u003c 3; ch++) {\n          let v = col[ch] * Math.min(1.08, lit) * far;\n          v += (255 - v) * white;\n          bg[o + ch] += (Math.min(255, v) - bg[o + ch]) * cover;\n        }\n      }\n    }\n    // Under the mouth: the cables, the basket and, while it fires, the flame.\n    const mouth = cy + 1.4 * R;\n    const basketTop = Math.round(mouth + Math.max(2, 0.32 * R));\n    const bh = Math.max(2, Math.round(0.24 * R));\n    const bw = Math.max(2, Math.round(0.36 * R));\n    const bx0 = Math.round(cx - bw / 2);\n    const dim = 0.55 + 0.45 * d;\n    for (let y = Math.round(mouth); y \u003c basketTop + bh; y++) {\n      if (y \u003c 0 || y >= H) continue;\n      if (y \u003c basketTop) {\n        // Cables from the mouth's corners to the basket's.\n        const f = (y - mouth) / Math.max(1, basketTop - mouth);\n        const half = 0.22 * R + (bw / 2 - 0.22 * R) * f;\n        for (const x of [Math.round(cx - half - 0.5), Math.round(cx + half - 0.5)]) {\n          if (x \u003c 0 || x >= W) continue;\n          const o = (y * W + x) * 3;\n          bg[o] = 70 * dim;\n          bg[o + 1] = 62 * dim;\n          bg[o + 2] = 56 * dim;\n        }\n        if (P.burn[i] > 0) {\n          const x = Math.round(cx - 0.5);\n          if (x >= 0 && x \u003c W) {\n            const fl = 0.75 + 0.25 * hash(Math.floor(time * 20), i);\n            const o = (y * W + x) * 3;\n            bg[o] = 255 * fl;\n            bg[o + 1] = 205 * fl;\n            bg[o + 2] = 110 * fl;\n          }\n        }\n        continue;\n      }\n      for (let x = bx0; x \u003c bx0 + bw; x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const o = (y * W + x) * 3;\n        const e = y === basketTop ? 1.15 : 1;\n        bg[o] = 130 * dim * e;\n        bg[o + 1] = 80 * dim * e;\n        bg[o + 2] = 40 * dim * e;\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, bg[o]), Math.min(255, bg[o + 1]), Math.min(255, bg[o + 2]));\n    }\n}\n","layer":{"id":"layer-balloon-box","type":"code","name":"balloon-box","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Balloon Box\n// Family:  weather\n// Idea:    Hot-air balloons ride the dawn winds of a valley box: low down the wind carries them one way, higher up it brings them back the other.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the dawn mass ascensions over Albuquerque and the \"Albuquerque box\", the winds that blow one way near the ground and the other way a few hundred metres up\n// Round:   11\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Wind=0.2..3, Balloons=8..16, Sunrise=0..1\n//\n// Knob 1: Hue. Turns every envelope's colours around the wheel together; each balloon keeps its own stripes, bands or chevrons.\n// Knob 2: Wind. How hard the two winds blow: at the bottom of the range the balloons hang almost still, at the top the near ones cross the panel in a few seconds.\n// Knob 3: Balloons. How many are in the air; a balloon that joins drifts in from the side or lifts off from the field, and one that leaves drifts out and does not come back.\n// Knob 4: Sunrise. The hour: before dawn the sky is deep blue over an orange rim and the burners glow, turned up the sun comes over the ridge and the sky goes to morning blue.\n// Buttons: K1 tap fires every burner at once; the envelopes glow from inside and the balloons climb.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 16;\n// The two winds meet at this height. Above it they blow to the right, below\n// it to the left, and a balloon passing through slows, stops and turns.\nconst SPLIT = 60;\nconst SHEAR = 6;\n// Envelope colours. A balloon picks one of these as its first colour and\n// builds the rest of its fabric from it.\nconst HUES = [0.0, 0.07, 0.13, 0.27, 0.36, 0.5, 0.58, 0.66, 0.76, 0.86, 0.93];\n// How a balloon is sewn: two-colour gores, three-colour gores, a rainbow of\n// gores, level bands, zigzag chevrons, a cap and skirt over striped gores.\nconst DESIGNS = 6;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// The envelope's half width at height t, in radii: t is -1 at the crown, the\n// sphere is widest at 0, and below 0.3 it tapers to the throat at 1.4.\nfunction halfWidth(t) {\n  if (t \u003c -1 || t > 1.4) return 0;\n  if (t \u003c= 0.3) return Math.sqrt(1 - t * t);\n  const s = (t - 0.3) / 1.1;\n  return 0.22 + 0.734 * Math.cos(s * 1.5707963);\n}\n\n// The wind at height y: +1 to the right high up, -1 to the left low down.\nfunction wind(y) {\n  return Math.tanh((SPLIT - y) / SHEAR);\n}\n\n// Sky colour keys from before dawn to morning, top, middle and horizon.\nconst SKY = [\n  [0, [6, 8, 30], [16, 20, 62], [60, 34, 70]],\n  [0.06, [6, 10, 58], [20, 26, 104], [196, 78, 52]],\n  [0.4, [26, 46, 118], [86, 88, 168], [255, 146, 88]],\n  [1, [58, 118, 216], [118, 168, 232], [214, 222, 206]],\n];\n\nfunction skyKeys(s, out) {\n  let a = SKY[0];\n  let b = SKY[SKY.length - 1];\n  for (let i = 0; i \u003c SKY.length - 1; i++)\n    if (s >= SKY[i][0] && s \u003c= SKY[i + 1][0]) {\n      a = SKY[i];\n      b = SKY[i + 1];\n      break;\n    }\n  const f = b[0] > a[0] ? (s - a[0]) / (b[0] - a[0]) : 0;\n  for (let k = 0; k \u003c 3; k++) for (let c = 0; c \u003c 3; c++) out[k * 3 + c] = a[k + 1][c] + (b[k + 1][c] - a[k + 1][c]) * f;\n}\n\n// A new balloon's look: how near it is, its size, its fabric.\nfunction dress(P, i) {\n  const d = Math.random();\n  P.depth[i] = d;\n  P.R[i] = 9 + 7 * d;\n  P.design[i] = Math.floor(Math.random() * DESIGNS);\n  P.hue0[i] = HUES[Math.floor(Math.random() * HUES.length)];\n  P.gores[i] = 8 + 2 * Math.floor(Math.random() * 3);\n  P.rot[i] = Math.random() * 6.283;\n  P.spin[i] = (Math.random() - 0.5) * 0.5;\n  P.glow[i] = 0;\n  P.burn[i] = 0;\n  P.nextBurn[i] = 1 + Math.random() * 5;\n  P.retarget[i] = 6 + Math.random() * 10;\n}\n\n// Lifts a balloon off the field or brings it in on the wind from the side.\nfunction launch(P, i, fromField) {\n  dress(P, i);\n  const R = P.R[i];\n  if (fromField) {\n    P.x[i] = 10 + Math.random() * 44;\n    // Standing on the field with its basket on the ground.\n    P.y[i] = H - 2 * R;\n    P.target[i] = 20 + Math.random() * 74;\n    P.burn[i] = 2.5;\n  } else {\n    // Never at the split, where no wind would bring it in.\n    let y = 16 + Math.random() * 64;\n    if (y > SPLIT - 10) y += 20;\n    P.y[i] = y;\n    P.target[i] = y;\n    const w = wind(y);\n    P.x[i] = w > 0 ? -R * 1.1 : W + R * 1.1;\n  }\n  P.live[i] = 1;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.x = new Float32Array(MAX);\n  P.y = new Float32Array(MAX);\n  P.R = new Float32Array(MAX);\n  P.depth = new Float32Array(MAX);\n  P.design = new Int8Array(MAX);\n  P.hue0 = new Float32Array(MAX);\n  P.gores = new Int8Array(MAX);\n  P.rot = new Float32Array(MAX);\n  P.spin = new Float32Array(MAX);\n  P.glow = new Float32Array(MAX);\n  P.burn = new Float32Array(MAX);\n  P.nextBurn = new Float32Array(MAX);\n  P.target = new Float32Array(MAX);\n  P.retarget = new Float32Array(MAX);\n  P.live = new Int8Array(MAX);\n  P.order = new Int32Array(MAX);\n  P.fab = new Float32Array(MAX * 9);\n  // The rainbow design's gores, one colour each.\n  P.rain = new Float32Array(MAX * 12 * 3);\n  P.sky = new Float32Array(H * 3);\n  P.keys = new Float32Array(9);\n  P.bg = new Float32Array(N * 3);\n  P.col = new Float32Array(3);\n  // The ridge on the far side of the field, and the town's lights under it.\n  P.ridge = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++)\n    P.ridge[x] = Math.round(112 - 4 * Math.sin(x * 0.09 + 0.6) - 3 * Math.sin(x * 0.23 + 2.1) + 2 * hash(x, 3));\n  P.town = new Float32Array(N);\n  for (let i = 0; i \u003c 46; i++) {\n    const x = Math.floor(hash(i, 5) * W);\n    const y = P.ridge[x] + 3 + Math.floor(hash(i, 6) * (H - P.ridge[x] - 3));\n    if (y \u003c H) P.town[y * W + x] = 0.45 + 0.4 * hash(i, 7);\n  }\n  P.stars = new Float32Array(N);\n  for (let i = 0; i \u003c 30; i++) {\n    const x = Math.floor(hash(i, 8) * W);\n    const y = Math.floor(hash(i, 9) * 70);\n    P.stars[y * W + x] = 0.75 + 0.25 * hash(i, 10);\n  }\n  P.count = 8;\n  P.wind = 2;\n  P.hue = 0;\n  P.sun = 0.06;\n  P.ready = 0;\n}\n\n// The first frame's sky: the balloons spread over both winds, none of them\n// at a side, so the panel opens on a fiesta already in the air.\nfunction scatter(P) {\n  const n = P.count;\n  for (let i = 0; i \u003c MAX; i++) P.live[i] = 0;\n  for (let i = 0; i \u003c n; i++) {\n    dress(P, i);\n    // Heights in turn from the two winds, a little shuffled.\n    const slot = (i + 0.5) / n;\n    let y = 18 + slot * 84 + (Math.random() - 0.5) * 8;\n    if (Math.abs(y - SPLIT) \u003c 9) y = SPLIT + (y \u003c SPLIT ? -9 : 9);\n    P.y[i] = y;\n    P.target[i] = y;\n    P.x[i] = 8 + ((i * 0.618 + 0.2) % 1) * 48;\n    P.live[i] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.wind = Math.max(0.2, Math.min(3, k[1]));\n  P.count = Math.max(8, Math.min(MAX, Math.round(k[2])));\n  P.sun = Math.max(0, Math.min(1, k[3]));\n  if (!P.ready) {\n    scatter(P);\n    P.ready = 1;\n  }\n  const all = input.btnPressed && input.btnPressed[0];\n  let live = 0;\n  for (let i = 0; i \u003c MAX; i++) if (P.live[i]) live++;\n  // A balloon joins when the knob asks for more than are flying.\n  for (let i = 0; i \u003c MAX && live \u003c P.count; i++)\n    if (!P.live[i]) {\n      launch(P, i, Math.random() \u003c 0.4);\n      live++;\n    }\n\n  // Near balloons cross the panel faster than far ones, the way they would.\n  const pace = 4.4 * P.wind;\n  for (let i = 0; i \u003c MAX; i++) {\n    if (!P.live[i]) continue;\n    const R = P.R[i];\n    const d = P.depth[i];\n    if (all) {\n      P.burn[i] = 2.5;\n      P.target[i] = Math.max(16, P.y[i] - 28);\n      P.retarget[i] = 8 + Math.random() * 6;\n    }\n    // Now and then a pilot picks a new height, often in the other wind.\n    P.retarget[i] -= dt;\n    if (P.retarget[i] \u003c= 0) {\n      P.retarget[i] = 7 + Math.random() * 10;\n      P.target[i] = P.y[i] \u003c SPLIT ? SPLIT + 8 + Math.random() * 30 : 14 + Math.random() * 38;\n    }\n    // Climbing takes the burner; between climbs it fires short bursts to hold height.\n    const dy = P.target[i] - P.y[i];\n    if (dy \u003c -3 && P.burn[i] \u003c= 0) P.burn[i] = 1.2 + Math.random();\n    P.nextBurn[i] -= dt;\n    if (P.nextBurn[i] \u003c= 0) {\n      P.nextBurn[i] = 3 + Math.random() * 6;\n      if (P.burn[i] \u003c= 0) P.burn[i] = 0.5 + Math.random() * 0.6;\n    }\n    const firing = P.burn[i] > 0;\n    if (firing) P.burn[i] -= dt;\n    P.glow[i] += ((firing ? 1 : 0) - P.glow[i]) * Math.min(1, dt * (firing ? 7 : 0.9));\n    const climb = Math.max(-1, Math.min(1, dy / 10)) * (1.2 + 0.8 * Math.sqrt(P.wind / 2));\n    P.y[i] += climb * (0.6 + 0.4 * d) * dt;\n    P.x[i] += wind(P.y[i]) * pace * (0.5 + 0.5 * d) * dt;\n    P.rot[i] += P.spin[i] * dt;\n    // Off the side: the balloon is gone, and one takes its place.\n    const off = R * 1.15;\n    if (P.x[i] \u003c -off - 1 || P.x[i] > W + off + 1 || P.y[i] \u003c -R * 2) {\n      if (live > P.count) {\n        P.live[i] = 0;\n        live--;\n      } else launch(P, i, Math.random() \u003c 0.35);\n    }\n  }\n\n  // Fabric colours for this frame: each balloon's own, turned by K1.\n  const fab = P.fab;\n  for (let i = 0; i \u003c MAX; i++) {\n    if (!P.live[i]) continue;\n    const h = P.hue0[i] + P.hue;\n    const o = i * 9;\n    const des = P.design[i];\n    // Every colour at full value, so a seam between two gores changes the\n    // hue and not the brightness.\n    if (des === 0) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.5, 1, 1);\n      hsvInto(fab, o + 6, h, 1, 1);\n    } else if (des === 1) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.33, 1, 1);\n      hsvInto(fab, o + 6, h + 0.67, 1, 1);\n    } else if (des === 3) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.12, 1, 1);\n      hsvInto(fab, o + 6, h + 0.24, 1, 1);\n    } else if (des === 4) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.17, 1, 1);\n      hsvInto(fab, o + 6, h + 0.5, 1, 1);\n    } else {\n      hsvInto(fab, o, h + 0.5, 1, 1);\n      hsvInto(fab, o + 3, h, 1, 1);\n      hsvInto(fab, o + 6, h + 0.25, 1, 1);\n    }\n    if (des === 2) for (let g = 0; g \u003c P.gores[i]; g++) hsvInto(P.rain, (i * 12 + g) * 3, h + g / P.gores[i], 1, 1);\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const s = P.sun;\n  const keys = P.keys;\n  skyKeys(s, keys);\n  const bg = P.bg;\n  // The sky: top colour down to the middle, then to the horizon's rim, with\n  // the sun's glow over the ridge on the east side.\n  const sunX = 50;\n  const sunY = 118 - 40 * s;\n  // No glow before the sun is near: until then the rim is the whole dawn.\n  const sunAmp = 0.7 * smooth(0.08, 0.5, s);\n  const starAmp = 70 * (1 - smooth(0.05, 0.3, s));\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / 112;\n    let f;\n    let a;\n    let b;\n    if (v \u003c 0.55) {\n      f = v / 0.55;\n      a = 0;\n      b = 3;\n    } else {\n      f = Math.min(1, (v - 0.55) / 0.45);\n      // Eased, not squared: squared, the red of the rim climbs 7 levels a\n      // row near the ridge and the whole rim reads as a soft edge.\n      f = Math.pow(f, 1.5);\n      a = 3;\n      b = 6;\n    }\n    for (let c = 0; c \u003c 3; c++) P.sky[y * 3 + c] = keys[a + c] + (keys[b + c] - keys[a + c]) * f;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      if (y >= P.ridge[x]) {\n        // The ridge and the field under it, black but for the town.\n        const t = P.town[p] * (1 - 0.8 * smooth(0.3, 0.9, s));\n        const shade = 10 + 34 * smooth(0.2, 1, s);\n        bg[o] = shade * 0.8 + t * 255;\n        bg[o + 1] = shade * 0.75 + t * 190;\n        bg[o + 2] = shade + t * 90;\n        continue;\n      }\n      const gx = (x - sunX) / 34;\n      const gy = (y - sunY) / 22;\n      const g = sunAmp * Math.exp(-(gx * gx + gy * gy));\n      const st = P.stars[p] * starAmp;\n      bg[o] = P.sky[y * 3] + g * 120 + st;\n      bg[o + 1] = P.sky[y * 3 + 1] + g * 70 + st;\n      bg[o + 2] = P.sky[y * 3 + 2] + g * 30 + st;\n    }\n  }\n\n  // Far balloons first, so near ones pass in front.\n  let n = 0;\n  for (let i = 0; i \u003c MAX; i++) if (P.live[i]) P.order[n++] = i;\n  for (let a = 1; a \u003c n; a++) {\n    const v = P.order[a];\n    let b = a - 1;\n    while (b >= 0 && P.depth[P.order[b]] > P.depth[v]) {\n      P.order[b + 1] = P.order[b];\n      b--;\n    }\n    P.order[b + 1] = v;\n  }\n\n  // Light from the east and a little from below, the sun at the rim.\n  const Lx = 0.6;\n  const Ly = 0.12;\n  const Lz = 0.79;\n  const amb = 0.63 + 0.06 * s;\n  const sunL = 0.41 + 0.04 * s;\n  const fab = P.fab;\n  const col = P.col;\n  for (let q = 0; q \u003c n; q++) {\n    const i = P.order[q];\n    const cx = P.x[i];\n    const cy = P.y[i];\n    const R = P.R[i];\n    const d = P.depth[i];\n    const des = P.design[i];\n    const G = P.gores[i];\n    const rot = P.rot[i];\n    const glow = P.glow[i];\n    // Far balloons sit in more of the dawn's shadow.\n    const far = 0.88 + 0.12 * d;\n    const o9 = i * 9;\n    const x0 = Math.max(0, Math.floor(cx - R - 1));\n    const x1 = Math.min(W - 1, Math.ceil(cx + R + 1));\n    const y0 = Math.max(0, Math.floor(cy - R - 1));\n    const y1 = Math.min(H - 1, Math.ceil(cy + 1.4 * R));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = y + 0.5 - cy;\n      const t = dy / R;\n      const hw = halfWidth(t) * R;\n      if (hw \u003c= 0) continue;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x + 0.5 - cx;\n        const cover = Math.min(1, hw - Math.abs(dx) + 0.5);\n        if (cover \u003c= 0) continue;\n        const u = Math.asin(Math.max(-1, Math.min(1, dx / hw)));\n        const lon = (u + rot) / 6.2831853 + 2;\n        const lf = lon * G;\n        const gore = Math.floor(lf) % G;\n        let c;\n        if (des === 0 || des === 1) c = gore % (des === 0 ? 2 : 3);\n        else if (des === 2) c = -1;\n        else if (des === 3) c = Math.floor((t + 1) * 2.4) % 3;\n        else if (des === 4) {\n          const zig = Math.abs(lf - Math.floor(lf) - 0.5);\n          c = Math.floor((t + 1) * 2.2 + zig * 1.2) % 3;\n        } else c = t \u003c -0.45 || t > 0.95 ? 0 : 1 + (gore % 2);\n        const from = c \u003c 0 ? P.rain : fab;\n        const oc = c \u003c 0 ? (i * 12 + gore) * 3 : o9 + c * 3;\n        col[0] = from[oc];\n        col[1] = from[oc + 1];\n        col[2] = from[oc + 2];\n        // The cloth's light: a sphere above the waist, a cone below it.\n        let nx;\n        let ny;\n        if (t \u003c= 0.3) {\n          nx = dx / R;\n          ny = t;\n        } else {\n          nx = (dx / hw) * 0.95;\n          ny = 0.3;\n        }\n        const nz = Math.sqrt(Math.max(0, 1 - nx * nx - ny * ny));\n        // Half Lambert: the shadow side turns gently into the dark limb.\n        const lam = 0.5 + 0.5 * (nx * Lx + ny * Ly + nz * Lz);\n        // The burner lights the envelope from inside, strongest near the mouth.\n        const lit = amb + sunL * lam + glow * 0.5 * (0.45 + 0.55 * Math.min(1, (t + 1) / 2.2));\n        const p = y * W + x;\n        const o = p * 3;\n        const white = glow * 0.22;\n        for (let ch = 0; ch \u003c 3; ch++) {\n          let v = col[ch] * Math.min(1.08, lit) * far;\n          v += (255 - v) * white;\n          bg[o + ch] += (Math.min(255, v) - bg[o + ch]) * cover;\n        }\n      }\n    }\n    // Under the mouth: the cables, the basket and, while it fires, the flame.\n    const mouth = cy + 1.4 * R;\n    const basketTop = Math.round(mouth + Math.max(2, 0.32 * R));\n    const bh = Math.max(2, Math.round(0.24 * R));\n    const bw = Math.max(2, Math.round(0.36 * R));\n    const bx0 = Math.round(cx - bw / 2);\n    const dim = 0.55 + 0.45 * d;\n    for (let y = Math.round(mouth); y \u003c basketTop + bh; y++) {\n      if (y \u003c 0 || y >= H) continue;\n      if (y \u003c basketTop) {\n        // Cables from the mouth's corners to the basket's.\n        const f = (y - mouth) / Math.max(1, basketTop - mouth);\n        const half = 0.22 * R + (bw / 2 - 0.22 * R) * f;\n        for (const x of [Math.round(cx - half - 0.5), Math.round(cx + half - 0.5)]) {\n          if (x \u003c 0 || x >= W) continue;\n          const o = (y * W + x) * 3;\n          bg[o] = 70 * dim;\n          bg[o + 1] = 62 * dim;\n          bg[o + 2] = 56 * dim;\n        }\n        if (P.burn[i] > 0) {\n          const x = Math.round(cx - 0.5);\n          if (x >= 0 && x \u003c W) {\n            const fl = 0.75 + 0.25 * hash(Math.floor(time * 20), i);\n            const o = (y * W + x) * 3;\n            bg[o] = 255 * fl;\n            bg[o + 1] = 205 * fl;\n            bg[o + 2] = 110 * fl;\n          }\n        }\n        continue;\n      }\n      for (let x = bx0; x \u003c bx0 + bw; x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const o = (y * W + x) * 3;\n        const e = y === basketTop ? 1.15 : 1;\n        bg[o] = 130 * dim * e;\n        bg[o + 1] = 80 * dim * e;\n        bg[o + 2] = 40 * dim * e;\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, bg[o]), Math.min(255, bg[o + 1]), Math.min(255, bg[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Wind=0.2..3, Balloons=8..16, Sunrise=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every envelope's colours around the wheel together; each balloon keeps its own stripes, bands or chevrons."},{"name":"Wind","min":0.2,"max":3,"about":"How hard the two winds blow: at the bottom of the range the balloons hang almost still, at the top the near ones cross the panel in a few seconds."},{"name":"Balloons","min":8,"max":16,"about":"How many are in the air; a balloon that joins drifts in from the side or lifts off from the field, and one that leaves drifts out and does not come back."},{"name":"Sunrise","min":0,"max":1,"about":"The hour: before dawn the sky is deep blue over an orange rim and the burners glow, turned up the sun comes over the ridge and the sky goes to morning blue."}],"start":[0,2,8,0.06],"measures":{"motion":0.167,"detail":0.0307,"edges":0.6336,"complexity":0.5511,"coverage":0.8946,"colour":0.5662,"drift":0.2806},"knobResponse":[0.306,0.2762,0.2316,0.2865]},{"slug":"bauhaus","title":"Bauhaus","family":"geometry","round":1,"note":"바우하우스 포스터처럼 납작한 원반과 막대가 2×4 칸에 놓이고, 한 칸씩 천천히 다른 모양이나 색으로 바뀌어요.","idea":"A poster grid of discs, halves, quarters and bars in three primaries and a cream, where one cell at a time turns or trades its shape and the sheet finds a new balance.","buttons":"K1 tap deals the whole sheet again, a diagonal of cells at a time.","code":"// ===== Patternflow pattern =====\n// Title:   Bauhaus\n// Family:  geometry\n// Idea:    A poster grid of discs, halves, quarters and bars in three primaries and a cream, where one cell at a time turns or trades its shape and the sheet finds a new balance.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0.25..6, Grid=4..12, Line=0..1\n//\n// Knob 1: Hue. Turns the red, yellow and blue together around the wheel; the cream stays cream.\n// Knob 2: Pace. How often a cell changes and how long it takes; low is one slow turn after another, high has three cells moving at once.\n// Knob 3: Grid. Cells down the long side, from four big squares to twelve small ones.\n// Knob 4: Line. How many cells are drawn as a line instead of a solid shape; at the top the sheet is a line drawing.\n// Buttons: K1 tap deals the whole sheet again, a diagonal of cells at a time.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 12 * 6;\n\nconst DISC = 0;\nconst HALF = 1;\nconst QUARTER = 2;\nconst BAR = 3;\nconst SQUARE = 4;\nconst TRIANGLE = 5;\nconst LEAF = 6;\nconst ARCS = 7;\nconst DOT = 8;\nconst SHAPES = 9;\n\n// Where each shape shrinks to and grows from, in its own unturned frame.\nconst ANCHOR_U = [0, 0, -1, 0, 0, 1, 0, -1, 0.5];\nconst ANCHOR_V = [0, 1, 1, 0, 0, 1, 0, 1, 0.5];\n\n// How likely a freshly dealt shape sits on a coloured square: small ones often, big ones seldom.\nconst GROUND = [0.3, 0.1, 0.06, 0.22, 0.35, 0.1, 0.1, 0.06, 0.5];\n\nconst TURN = 1;\nconst MORPH = 2;\nconst RECOLOUR = 3;\n\nconst SQRT_HALF = Math.SQRT1_2;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(t) {\n  t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\n// Signed distance to a shape, in half-cells, negative inside.\nfunction shapeDist(shape, u, v) {\n  if (shape === DISC) return Math.sqrt(u * u + v * v) - 0.81;\n  if (shape === HALF) return Math.max(Math.sqrt(u * u + (v - 1) * (v - 1)) - 1, v - 1);\n  if (shape === QUARTER) return Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1)) - 2;\n  if (shape === BAR) return Math.abs(v) - 0.36;\n  if (shape === SQUARE) return Math.max(Math.abs(u), Math.abs(v)) - 0.56;\n  if (shape === TRIANGLE) return -(u + v) * SQRT_HALF;\n  if (shape === DOT) return Math.sqrt((u - 0.5) * (u - 0.5) + (v - 0.5) * (v - 0.5)) - 0.3;\n  if (shape === LEAF) {\n    const a = Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1)) - 2;\n    const b = Math.sqrt((u - 1) * (u - 1) + (v + 1) * (v + 1)) - 2;\n    return Math.max(a, b);\n  }\n  // Three bands round a corner, two of them lit.\n  const r = Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1));\n  if (r >= 2) return r - 2;\n  const q = r * 1.5;\n  const band = Math.floor(q);\n  const f = q - band;\n  const edge = Math.min(f, 1 - f) / 1.5;\n  return band === 1 ? edge : -edge;\n}\n\n// A shape turned by `ang` and scaled by `s` about its anchor.\nfunction placed(shape, u, v, c, sn, s) {\n  let su = c * u + sn * v;\n  let sv = -sn * u + c * v;\n  if (s \u003c 0.999) {\n    if (s \u003c 0.02) return 9;\n    const au = ANCHOR_U[shape];\n    const av = ANCHOR_V[shape];\n    su = au + (su - au) / s;\n    sv = av + (sv - av) / s;\n    return shapeDist(shape, su, sv) * s;\n  }\n  return shapeDist(shape, su, sv);\n}\n\n// A square looks the same after a quarter turn, so it turns in eighths.\nfunction angleOf(shape, rot) {\n  return rot * (shape === SQUARE ? Math.PI / 4 : Math.PI / 2);\n}\n\nfunction pickColour(p, avoidA, avoidB) {\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const r = Math.random();\n    const c = r \u003c 0.32 ? 1 : r \u003c 0.58 ? 2 : r \u003c 0.88 ? 3 : 4;\n    if (c !== avoidA && c !== avoidB) return c;\n  }\n  return 1 + Math.floor(Math.random() * 4);\n}\n\n// Grounds lean to red and blue; a yellow square is loud on a dark panel.\nfunction pickGround(avoid) {\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const r = Math.random();\n    const c = r \u003c 0.38 ? 1 : r \u003c 0.8 ? 3 : r \u003c 0.9 ? 2 : 4;\n    if (c !== avoid) return c;\n  }\n  return avoid === 3 ? 1 : 3;\n}\n\n// A neighbour's colour, so a new cell can avoid matching the one beside it and the one above.\nfunction neighbour(p, c, dx, dy) {\n  const i = c % p.cols;\n  const j = (c - i) / p.cols;\n  const ni = i + dx;\n  const nj = j + dy;\n  if (ni \u003c 0 || nj \u003c 0 || ni >= p.cols || nj >= p.rows) return -1;\n  return p.toFg[nj * p.cols + ni];\n}\n\nfunction randomShape(p, c) {\n  p.toShape[c] = Math.floor(Math.random() * SHAPES);\n  p.toRot[c] = Math.floor(Math.random() * 4);\n  p.toFg[c] = pickColour(p, neighbour(p, c, -1, 0), neighbour(p, c, 0, -1));\n  if (Math.random() \u003c GROUND[p.toShape[c]]) {\n    p.toBg[c] = pickGround(p.toFg[c]);\n  } else p.toBg[c] = 0;\n}\n\nfunction build(p, n) {\n  p.n = n;\n  // The panel stands up, so the knob counts cells down its long side.\n  const S = Math.floor(H / n);\n  p.S = S;\n  p.rows = n;\n  p.cols = Math.max(1, Math.floor(W / S));\n  p.ox = Math.floor((W - p.cols * S) / 2);\n  p.oy = Math.floor((H - n * S) / 2);\n  const count = p.cols * p.rows;\n  for (let c = 0; c \u003c count; c++) {\n    randomShape(p, c);\n    p.fromShape[c] = p.toShape[c];\n    p.fromRot[c] = p.toRot[c];\n    p.fromFg[c] = p.toFg[c];\n    p.fromBg[c] = p.toBg[c];\n    p.kind[c] = 0;\n    p.prog[c] = 1;\n    p.last[c] = p.clock - Math.random() * 4;\n    p.pending[c] = -1;\n    p.lineR[c] = Math.random();\n  }\n  p.count = count;\n}\n\nfunction start(p, c, kind, dur) {\n  p.fromShape[c] = p.toShape[c];\n  p.fromRot[c] = p.toRot[c];\n  p.fromFg[c] = p.toFg[c];\n  p.fromBg[c] = p.toBg[c];\n  if (kind === TURN && p.toShape[c] === DISC) kind = Math.random() \u003c 0.5 ? MORPH : RECOLOUR;\n  if (kind === TURN) {\n    p.toRot[c] = (p.toRot[c] + (Math.random() \u003c 0.5 ? 1 : 3)) & 3;\n  } else if (kind === MORPH) {\n    let s = Math.floor(Math.random() * (SHAPES - 1));\n    if (s >= p.fromShape[c]) s++;\n    p.toShape[c] = s;\n    p.toRot[c] = Math.floor(Math.random() * 4);\n    if (Math.random() \u003c 0.5) p.toFg[c] = pickColour(p, p.fromFg[c], p.toBg[c]);\n  } else {\n    if (Math.random() \u003c 0.35) {\n      // The ground changes: a bare cell gets a colour, a coloured one usually goes bare.\n      p.toBg[c] = p.fromBg[c] && Math.random() \u003c 0.6 ? 0 : pickGround(p.fromFg[c]);\n    } else p.toFg[c] = pickColour(p, p.fromFg[c], p.toBg[c]);\n    p.wipe[c] = Math.floor(Math.random() * 5);\n  }\n  p.kind[c] = kind;\n  p.prog[c] = 0;\n  p.dur[c] = dur;\n  p.last[c] = p.clock;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.fromShape = new Uint8Array(MAX);\n  p.toShape = new Uint8Array(MAX);\n  p.fromRot = new Uint8Array(MAX);\n  p.toRot = new Uint8Array(MAX);\n  p.fromFg = new Uint8Array(MAX);\n  p.toFg = new Uint8Array(MAX);\n  p.fromBg = new Uint8Array(MAX);\n  p.toBg = new Uint8Array(MAX);\n  p.kind = new Uint8Array(MAX);\n  p.wipe = new Uint8Array(MAX);\n  p.prog = new Float32Array(MAX);\n  p.dur = new Float32Array(MAX);\n  p.last = new Float32Array(MAX);\n  p.pending = new Float32Array(MAX);\n  p.lineR = new Float32Array(MAX);\n  p.pal = new Float32Array(5 * 3);\n  p.hue = -1;\n  p.n = 0;\n  p.clock = 0;\n  p.timer = 0.4;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  p.clock += dt;\n  const n = Math.max(4, Math.min(12, Math.round(k[2])));\n  if (n !== p.n) build(p, n);\n  p.line = k[3];\n\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    hsv(0.995 + p.hue, 0.86, 0.94, p.pal, 3);\n    hsv(0.125 + p.hue, 0.9, 1, p.pal, 6);\n    hsv(0.6 + p.hue, 0.84, 0.92, p.pal, 9);\n    p.pal[12] = 190;\n    p.pal[13] = 168;\n    p.pal[14] = 128;\n  }\n\n  // At pace 2 a cell changes every 2.5 s, and each whole step of the knob is 1.7 times quicker or slower.\n  const every = 2.5 * Math.pow(2, (2 - k[1]) * 0.8);\n  const dur = Math.max(0.6, every * 1.1);\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    for (let c = 0; c \u003c p.count; c++) {\n      const i = c % p.cols;\n      p.pending[c] = p.clock + (i + (c - i) / p.cols) * 0.14;\n    }\n  }\n\n  for (let c = 0; c \u003c p.count; c++) {\n    if (p.prog[c] \u003c 1) {\n      p.prog[c] = Math.min(1, p.prog[c] + dt / p.dur[c]);\n      if (p.prog[c] >= 1) p.kind[c] = 0;\n    } else if (p.pending[c] >= 0 && p.clock >= p.pending[c]) {\n      p.pending[c] = -1;\n      start(p, c, MORPH, 0.9);\n    }\n  }\n\n  p.timer -= dt;\n  if (p.timer \u003c= 0) {\n    p.timer += every;\n    if (p.timer \u003c 0) p.timer = every;\n    // Of four cells drawn at random, the one left alone longest changes.\n    let best = -1;\n    for (let tries = 0; tries \u003c 4; tries++) {\n      const c = Math.floor(Math.random() * p.count);\n      if (p.prog[c] \u003c 1 || p.pending[c] >= 0) continue;\n      if (best \u003c 0 || p.last[c] \u003c p.last[best]) best = c;\n    }\n    if (best >= 0) {\n      const r = Math.random();\n      start(p, best, r \u003c 0.4 ? TURN : r \u003c 0.8 ? MORPH : RECOLOUR, dur);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const S = p.S;\n  const half = S / 2;\n  const pal = p.pal;\n  const lineW = (S >= 20 ? 2 : 1) / half;\n\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n\n  for (let c = 0; c \u003c p.count; c++) {\n    const i = c % p.cols;\n    const j = (c - i) / p.cols;\n    const x0 = p.ox + i * S;\n    const y0 = p.oy + j * S;\n    const kind = p.kind[c];\n    const e = smooth(p.prog[c]);\n    const outline = p.lineR[c] \u003c p.line;\n\n    let shape = p.toShape[c];\n    let ang = angleOf(shape, p.toRot[c]);\n    let scale = 1;\n    let fg = p.toFg[c];\n    let bg = p.toBg[c];\n    let fg2 = fg;\n    let bg2 = bg;\n    let front = 2;\n    if (kind === TURN) {\n      const a0 = angleOf(shape, p.fromRot[c]);\n      let d = ang - a0;\n      // The short way round.\n      if (d > Math.PI) d -= Math.PI * 2;\n      if (d \u003c -Math.PI) d += Math.PI * 2;\n      ang = a0 + d * e;\n    } else if (kind === MORPH) {\n      const pr = p.prog[c];\n      if (pr \u003c 0.5) {\n        shape = p.fromShape[c];\n        ang = angleOf(shape, p.fromRot[c]);\n        fg = p.fromFg[c];\n        scale = 1 - smooth(pr * 2);\n      } else scale = smooth(pr * 2 - 1);\n    } else if (kind === RECOLOUR) {\n      fg = p.fromFg[c];\n      bg = p.fromBg[c];\n      front = -1.45 + e * 2.9;\n    }\n    const cs = Math.cos(ang);\n    const sn = Math.sin(ang);\n    const wipe = p.wipe[c];\n\n    for (let ly = 0; ly \u003c S; ly++) {\n      const y = y0 + ly;\n      const v = (ly + 0.5 - half) / half;\n      for (let lx = 0; lx \u003c S; lx++) {\n        const x = x0 + lx;\n        const u = (lx + 0.5 - half) / half;\n        let f = fg;\n        let b = bg;\n        if (kind === RECOLOUR) {\n          // A hard front sweeps the new colours in: from a side, or as an iris.\n          const w = wipe === 0 ? u : wipe === 1 ? -u : wipe === 2 ? v : wipe === 3 ? -v : Math.sqrt(u * u + v * v) * 1.42 - 1;\n          if (w \u003c front) {\n            f = fg2;\n            b = bg2;\n          }\n        }\n        const d = Math.max(placed(shape, u, v, cs, sn, scale), Math.max(Math.abs(u), Math.abs(v)) - 1);\n        let col = d \u003c 0 && (!outline || d > -lineW) ? f : 0;\n        // Drawn as a line, the ground is a frame round the cell.\n        if (!col && b) col = !outline || Math.max(Math.abs(u), Math.abs(v)) > 1 - lineW ? b : 0;\n        if (col) display.setPixel(x, y, pal[col * 3], pal[col * 3 + 1], pal[col * 3 + 2]);\n      }\n    }\n  }\n}\n","layer":{"id":"layer-bauhaus","type":"code","name":"bauhaus","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bauhaus\n// Family:  geometry\n// Idea:    A poster grid of discs, halves, quarters and bars in three primaries and a cream, where one cell at a time turns or trades its shape and the sheet finds a new balance.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0.25..6, Grid=4..12, Line=0..1\n//\n// Knob 1: Hue. Turns the red, yellow and blue together around the wheel; the cream stays cream.\n// Knob 2: Pace. How often a cell changes and how long it takes; low is one slow turn after another, high has three cells moving at once.\n// Knob 3: Grid. Cells down the long side, from four big squares to twelve small ones.\n// Knob 4: Line. How many cells are drawn as a line instead of a solid shape; at the top the sheet is a line drawing.\n// Buttons: K1 tap deals the whole sheet again, a diagonal of cells at a time.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 12 * 6;\n\nconst DISC = 0;\nconst HALF = 1;\nconst QUARTER = 2;\nconst BAR = 3;\nconst SQUARE = 4;\nconst TRIANGLE = 5;\nconst LEAF = 6;\nconst ARCS = 7;\nconst DOT = 8;\nconst SHAPES = 9;\n\n// Where each shape shrinks to and grows from, in its own unturned frame.\nconst ANCHOR_U = [0, 0, -1, 0, 0, 1, 0, -1, 0.5];\nconst ANCHOR_V = [0, 1, 1, 0, 0, 1, 0, 1, 0.5];\n\n// How likely a freshly dealt shape sits on a coloured square: small ones often, big ones seldom.\nconst GROUND = [0.3, 0.1, 0.06, 0.22, 0.35, 0.1, 0.1, 0.06, 0.5];\n\nconst TURN = 1;\nconst MORPH = 2;\nconst RECOLOUR = 3;\n\nconst SQRT_HALF = Math.SQRT1_2;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(t) {\n  t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\n// Signed distance to a shape, in half-cells, negative inside.\nfunction shapeDist(shape, u, v) {\n  if (shape === DISC) return Math.sqrt(u * u + v * v) - 0.81;\n  if (shape === HALF) return Math.max(Math.sqrt(u * u + (v - 1) * (v - 1)) - 1, v - 1);\n  if (shape === QUARTER) return Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1)) - 2;\n  if (shape === BAR) return Math.abs(v) - 0.36;\n  if (shape === SQUARE) return Math.max(Math.abs(u), Math.abs(v)) - 0.56;\n  if (shape === TRIANGLE) return -(u + v) * SQRT_HALF;\n  if (shape === DOT) return Math.sqrt((u - 0.5) * (u - 0.5) + (v - 0.5) * (v - 0.5)) - 0.3;\n  if (shape === LEAF) {\n    const a = Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1)) - 2;\n    const b = Math.sqrt((u - 1) * (u - 1) + (v + 1) * (v + 1)) - 2;\n    return Math.max(a, b);\n  }\n  // Three bands round a corner, two of them lit.\n  const r = Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1));\n  if (r >= 2) return r - 2;\n  const q = r * 1.5;\n  const band = Math.floor(q);\n  const f = q - band;\n  const edge = Math.min(f, 1 - f) / 1.5;\n  return band === 1 ? edge : -edge;\n}\n\n// A shape turned by `ang` and scaled by `s` about its anchor.\nfunction placed(shape, u, v, c, sn, s) {\n  let su = c * u + sn * v;\n  let sv = -sn * u + c * v;\n  if (s \u003c 0.999) {\n    if (s \u003c 0.02) return 9;\n    const au = ANCHOR_U[shape];\n    const av = ANCHOR_V[shape];\n    su = au + (su - au) / s;\n    sv = av + (sv - av) / s;\n    return shapeDist(shape, su, sv) * s;\n  }\n  return shapeDist(shape, su, sv);\n}\n\n// A square looks the same after a quarter turn, so it turns in eighths.\nfunction angleOf(shape, rot) {\n  return rot * (shape === SQUARE ? Math.PI / 4 : Math.PI / 2);\n}\n\nfunction pickColour(p, avoidA, avoidB) {\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const r = Math.random();\n    const c = r \u003c 0.32 ? 1 : r \u003c 0.58 ? 2 : r \u003c 0.88 ? 3 : 4;\n    if (c !== avoidA && c !== avoidB) return c;\n  }\n  return 1 + Math.floor(Math.random() * 4);\n}\n\n// Grounds lean to red and blue; a yellow square is loud on a dark panel.\nfunction pickGround(avoid) {\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const r = Math.random();\n    const c = r \u003c 0.38 ? 1 : r \u003c 0.8 ? 3 : r \u003c 0.9 ? 2 : 4;\n    if (c !== avoid) return c;\n  }\n  return avoid === 3 ? 1 : 3;\n}\n\n// A neighbour's colour, so a new cell can avoid matching the one beside it and the one above.\nfunction neighbour(p, c, dx, dy) {\n  const i = c % p.cols;\n  const j = (c - i) / p.cols;\n  const ni = i + dx;\n  const nj = j + dy;\n  if (ni \u003c 0 || nj \u003c 0 || ni >= p.cols || nj >= p.rows) return -1;\n  return p.toFg[nj * p.cols + ni];\n}\n\nfunction randomShape(p, c) {\n  p.toShape[c] = Math.floor(Math.random() * SHAPES);\n  p.toRot[c] = Math.floor(Math.random() * 4);\n  p.toFg[c] = pickColour(p, neighbour(p, c, -1, 0), neighbour(p, c, 0, -1));\n  if (Math.random() \u003c GROUND[p.toShape[c]]) {\n    p.toBg[c] = pickGround(p.toFg[c]);\n  } else p.toBg[c] = 0;\n}\n\nfunction build(p, n) {\n  p.n = n;\n  // The panel stands up, so the knob counts cells down its long side.\n  const S = Math.floor(H / n);\n  p.S = S;\n  p.rows = n;\n  p.cols = Math.max(1, Math.floor(W / S));\n  p.ox = Math.floor((W - p.cols * S) / 2);\n  p.oy = Math.floor((H - n * S) / 2);\n  const count = p.cols * p.rows;\n  for (let c = 0; c \u003c count; c++) {\n    randomShape(p, c);\n    p.fromShape[c] = p.toShape[c];\n    p.fromRot[c] = p.toRot[c];\n    p.fromFg[c] = p.toFg[c];\n    p.fromBg[c] = p.toBg[c];\n    p.kind[c] = 0;\n    p.prog[c] = 1;\n    p.last[c] = p.clock - Math.random() * 4;\n    p.pending[c] = -1;\n    p.lineR[c] = Math.random();\n  }\n  p.count = count;\n}\n\nfunction start(p, c, kind, dur) {\n  p.fromShape[c] = p.toShape[c];\n  p.fromRot[c] = p.toRot[c];\n  p.fromFg[c] = p.toFg[c];\n  p.fromBg[c] = p.toBg[c];\n  if (kind === TURN && p.toShape[c] === DISC) kind = Math.random() \u003c 0.5 ? MORPH : RECOLOUR;\n  if (kind === TURN) {\n    p.toRot[c] = (p.toRot[c] + (Math.random() \u003c 0.5 ? 1 : 3)) & 3;\n  } else if (kind === MORPH) {\n    let s = Math.floor(Math.random() * (SHAPES - 1));\n    if (s >= p.fromShape[c]) s++;\n    p.toShape[c] = s;\n    p.toRot[c] = Math.floor(Math.random() * 4);\n    if (Math.random() \u003c 0.5) p.toFg[c] = pickColour(p, p.fromFg[c], p.toBg[c]);\n  } else {\n    if (Math.random() \u003c 0.35) {\n      // The ground changes: a bare cell gets a colour, a coloured one usually goes bare.\n      p.toBg[c] = p.fromBg[c] && Math.random() \u003c 0.6 ? 0 : pickGround(p.fromFg[c]);\n    } else p.toFg[c] = pickColour(p, p.fromFg[c], p.toBg[c]);\n    p.wipe[c] = Math.floor(Math.random() * 5);\n  }\n  p.kind[c] = kind;\n  p.prog[c] = 0;\n  p.dur[c] = dur;\n  p.last[c] = p.clock;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.fromShape = new Uint8Array(MAX);\n  p.toShape = new Uint8Array(MAX);\n  p.fromRot = new Uint8Array(MAX);\n  p.toRot = new Uint8Array(MAX);\n  p.fromFg = new Uint8Array(MAX);\n  p.toFg = new Uint8Array(MAX);\n  p.fromBg = new Uint8Array(MAX);\n  p.toBg = new Uint8Array(MAX);\n  p.kind = new Uint8Array(MAX);\n  p.wipe = new Uint8Array(MAX);\n  p.prog = new Float32Array(MAX);\n  p.dur = new Float32Array(MAX);\n  p.last = new Float32Array(MAX);\n  p.pending = new Float32Array(MAX);\n  p.lineR = new Float32Array(MAX);\n  p.pal = new Float32Array(5 * 3);\n  p.hue = -1;\n  p.n = 0;\n  p.clock = 0;\n  p.timer = 0.4;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  p.clock += dt;\n  const n = Math.max(4, Math.min(12, Math.round(k[2])));\n  if (n !== p.n) build(p, n);\n  p.line = k[3];\n\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    hsv(0.995 + p.hue, 0.86, 0.94, p.pal, 3);\n    hsv(0.125 + p.hue, 0.9, 1, p.pal, 6);\n    hsv(0.6 + p.hue, 0.84, 0.92, p.pal, 9);\n    p.pal[12] = 190;\n    p.pal[13] = 168;\n    p.pal[14] = 128;\n  }\n\n  // At pace 2 a cell changes every 2.5 s, and each whole step of the knob is 1.7 times quicker or slower.\n  const every = 2.5 * Math.pow(2, (2 - k[1]) * 0.8);\n  const dur = Math.max(0.6, every * 1.1);\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    for (let c = 0; c \u003c p.count; c++) {\n      const i = c % p.cols;\n      p.pending[c] = p.clock + (i + (c - i) / p.cols) * 0.14;\n    }\n  }\n\n  for (let c = 0; c \u003c p.count; c++) {\n    if (p.prog[c] \u003c 1) {\n      p.prog[c] = Math.min(1, p.prog[c] + dt / p.dur[c]);\n      if (p.prog[c] >= 1) p.kind[c] = 0;\n    } else if (p.pending[c] >= 0 && p.clock >= p.pending[c]) {\n      p.pending[c] = -1;\n      start(p, c, MORPH, 0.9);\n    }\n  }\n\n  p.timer -= dt;\n  if (p.timer \u003c= 0) {\n    p.timer += every;\n    if (p.timer \u003c 0) p.timer = every;\n    // Of four cells drawn at random, the one left alone longest changes.\n    let best = -1;\n    for (let tries = 0; tries \u003c 4; tries++) {\n      const c = Math.floor(Math.random() * p.count);\n      if (p.prog[c] \u003c 1 || p.pending[c] >= 0) continue;\n      if (best \u003c 0 || p.last[c] \u003c p.last[best]) best = c;\n    }\n    if (best >= 0) {\n      const r = Math.random();\n      start(p, best, r \u003c 0.4 ? TURN : r \u003c 0.8 ? MORPH : RECOLOUR, dur);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const S = p.S;\n  const half = S / 2;\n  const pal = p.pal;\n  const lineW = (S >= 20 ? 2 : 1) / half;\n\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n\n  for (let c = 0; c \u003c p.count; c++) {\n    const i = c % p.cols;\n    const j = (c - i) / p.cols;\n    const x0 = p.ox + i * S;\n    const y0 = p.oy + j * S;\n    const kind = p.kind[c];\n    const e = smooth(p.prog[c]);\n    const outline = p.lineR[c] \u003c p.line;\n\n    let shape = p.toShape[c];\n    let ang = angleOf(shape, p.toRot[c]);\n    let scale = 1;\n    let fg = p.toFg[c];\n    let bg = p.toBg[c];\n    let fg2 = fg;\n    let bg2 = bg;\n    let front = 2;\n    if (kind === TURN) {\n      const a0 = angleOf(shape, p.fromRot[c]);\n      let d = ang - a0;\n      // The short way round.\n      if (d > Math.PI) d -= Math.PI * 2;\n      if (d \u003c -Math.PI) d += Math.PI * 2;\n      ang = a0 + d * e;\n    } else if (kind === MORPH) {\n      const pr = p.prog[c];\n      if (pr \u003c 0.5) {\n        shape = p.fromShape[c];\n        ang = angleOf(shape, p.fromRot[c]);\n        fg = p.fromFg[c];\n        scale = 1 - smooth(pr * 2);\n      } else scale = smooth(pr * 2 - 1);\n    } else if (kind === RECOLOUR) {\n      fg = p.fromFg[c];\n      bg = p.fromBg[c];\n      front = -1.45 + e * 2.9;\n    }\n    const cs = Math.cos(ang);\n    const sn = Math.sin(ang);\n    const wipe = p.wipe[c];\n\n    for (let ly = 0; ly \u003c S; ly++) {\n      const y = y0 + ly;\n      const v = (ly + 0.5 - half) / half;\n      for (let lx = 0; lx \u003c S; lx++) {\n        const x = x0 + lx;\n        const u = (lx + 0.5 - half) / half;\n        let f = fg;\n        let b = bg;\n        if (kind === RECOLOUR) {\n          // A hard front sweeps the new colours in: from a side, or as an iris.\n          const w = wipe === 0 ? u : wipe === 1 ? -u : wipe === 2 ? v : wipe === 3 ? -v : Math.sqrt(u * u + v * v) * 1.42 - 1;\n          if (w \u003c front) {\n            f = fg2;\n            b = bg2;\n          }\n        }\n        const d = Math.max(placed(shape, u, v, cs, sn, scale), Math.max(Math.abs(u), Math.abs(v)) - 1);\n        let col = d \u003c 0 && (!outline || d > -lineW) ? f : 0;\n        // Drawn as a line, the ground is a frame round the cell.\n        if (!col && b) col = !outline || Math.max(Math.abs(u), Math.abs(v)) > 1 - lineW ? b : 0;\n        if (col) display.setPixel(x, y, pal[col * 3], pal[col * 3 + 1], pal[col * 3 + 2]);\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Pace=0.25..6, Grid=4..12, Line=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the red, yellow and blue together around the wheel; the cream stays cream."},{"name":"Pace","min":0.25,"max":6,"about":"How often a cell changes and how long it takes; low is one slow turn after another, high has three cells moving at once."},{"name":"Grid","min":4,"max":12,"about":"Cells down the long side, from four big squares to twelve small ones."},{"name":"Line","min":0,"max":1,"about":"How many cells are drawn as a line instead of a solid shape; at the top the sheet is a line drawing."}],"start":[0,2,4,0.06],"measures":{"motion":0.0436,"detail":0.04,"edges":0.8787,"complexity":0.0601,"coverage":0.5555,"colour":0.5847,"drift":0.0591},"knobResponse":[0.3486,0.141,0.3458,0.2172]},{"slug":"big-type","title":"Big Type","family":"type","round":1,"note":"화면을 꽉 채운 낱말 하나가 자석을 댄 옛 텔레비전 화면처럼 휘어요.","idea":"One word as big as the screen will hold, on a set that cannot keep it still, the way a magnet bends the picture on an old television.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Big Type\n// Family:  type\n// Idea:    One word as big as the screen will hold, on a set that cannot keep it still, the way a magnet bends the picture on an old television.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..5, Word=0..6, Warp=0..1\n//\n// Knob 1: Hue. Turns the outline colour; the fill and the shadow follow it.\n// Knob 2: Speed. How fast the wave runs down the word and the bright scan bar rolls.\n// Knob 3: Word. Picks the word: TV, 1963, LIGHT, HELLO, FLOW, PLAY, KNOB.\n// Knob 4: Warp. How hard the picture bends, from a slow sway to a set losing its hold.\n\nconst W = 64;\nconst H = 128;\n\n// The font is drawn from its Scale2x copy, ten by fourteen cells a glyph.\nconst ZOOM = 2;\n\nconst WORDS = [\"TV\", \"1963\", \"LIGHT\", \"HELLO\", \"FLOW\", \"PLAY\", \"KNOB\"];\n// The panel stands up, so a word is set in lines: four letters as two over\n// two like a poster, five down the panel like a hotel sign.\nconst LINES = [[\"T\", \"V\"], [\"19\", \"63\"], [\"L\", \"I\", \"G\", \"H\", \"T\"], [\"H\", \"E\", \"L\", \"L\", \"O\"], [\"FL\", \"OW\"], [\"PL\", \"AY\"], [\"KN\", \"OB\"]];\nconst MAX_LINES = 5;\n\n// 5x7 glyphs, seven rows each from the top, 16 is the left column.\nconst LETTERS = \"TV1963LIGHEOFWPAYKNB\";\nconst FONT = [\n  31, 4, 4, 4, 4, 4, 4,\n  17, 17, 17, 17, 17, 10, 4,\n  4, 12, 4, 4, 4, 4, 14,\n  14, 17, 17, 15, 1, 2, 12,\n  6, 8, 16, 30, 17, 17, 14,\n  31, 2, 4, 2, 1, 17, 14,\n  16, 16, 16, 16, 16, 16, 31,\n  14, 4, 4, 4, 4, 4, 14,\n  14, 17, 16, 23, 17, 17, 15,\n  17, 17, 17, 31, 17, 17, 17,\n  31, 16, 16, 30, 16, 16, 31,\n  14, 17, 17, 17, 17, 17, 14,\n  31, 16, 16, 30, 16, 16, 16,\n  17, 17, 17, 21, 21, 21, 10,\n  30, 17, 17, 30, 16, 16, 16,\n  14, 17, 17, 31, 17, 17, 17,\n  17, 17, 10, 4, 4, 4, 4,\n  17, 18, 20, 24, 20, 18, 17,\n  17, 17, 25, 21, 19, 17, 17,\n  30, 17, 17, 30, 17, 17, 30,\n];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash(n) {\n  let x = (Math.imul(n | 0, 374761393) + 668265263) >>> 0;\n  x = Math.imul(x ^ (x >>> 13), 1274126177) >>> 0;\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296;\n}\n\n// Lays a word out: its lines, the glyphs of each, and one scale for all of\n// them, as tall as the lines allow and no wider than 1.8 times that. The\n// scale need not be whole: five lines get 3.2 LEDs a font row.\nfunction setWord(p, slot, index) {\n  const lines = LINES[index];\n  const L = p.layout[slot];\n  L.lines = lines.length;\n  let wide = 0;\n  let k = 0;\n  for (let j = 0; j \u003c L.lines; j++) {\n    const text = lines[j];\n    L.first[j] = k;\n    L.cols[j] = text.length * 6 - 1;\n    wide = Math.max(wide, L.cols[j]);\n    for (let i = 0; i \u003c text.length; i++) L.bits[k++] = p.big[LETTERS.indexOf(text[i])];\n  }\n  L.gap = L.lines > 2 ? 2 : 8;\n  L.sy = Math.min(8, (H - 8 - (L.lines - 1) * L.gap) / (7 * L.lines));\n  L.sx = Math.min(11, Math.floor((W - 6) / wide), L.sy * 1.8);\n  L.pitch = Math.ceil(7 * L.sy) + L.gap;\n  L.y0 = Math.floor((H - L.lines * L.pitch + L.gap) / 2);\n  for (let j = 0; j \u003c L.lines; j++) L.x0[j] = Math.floor((W - L.cols[j] * L.sx) / 2);\n}\n\n// Scale2x (EPX) on a bitmap: square corners stay, a diagonal step gets joined.\nfunction epx(src, w, h) {\n  const out = new Uint8Array(w * h * 4);\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= w || y >= h ? 0 : src[y * w + x]);\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const P = at(x, y);\n      const A = at(x, y - 1);\n      const B = at(x + 1, y);\n      const C = at(x - 1, y);\n      const D = at(x, y + 1);\n      const o = y * 2 * w * 2 + x * 2;\n      out[o] = C === A && C !== D && A !== B ? A : P;\n      out[o + 1] = A === B && A !== C && B !== D ? B : P;\n      out[o + w * 2] = D === C && D !== B && C !== A ? C : P;\n      out[o + w * 2 + 1] = B === D && B !== A && D !== C ? D : P;\n    }\n  }\n  return out;\n}\n\n// u is across the panel, v down from the top of the word.\nfunction inside(L, u, v) {\n  if (v \u003c 0) return 0;\n  const j = Math.floor(v / L.pitch);\n  if (j >= L.lines) return 0;\n  v -= j * L.pitch;\n  u -= L.x0[j];\n  if (u \u003c 0) return 0;\n  const cu = Math.floor((u * ZOOM) / L.sx);\n  const cv = Math.floor((v * ZOOM) / L.sy);\n  if (cu >= L.cols[j] * ZOOM || cv >= 7 * ZOOM) return 0;\n  const letter = Math.floor(cu / (6 * ZOOM));\n  const b = cu - letter * 6 * ZOOM;\n  if (b >= 5 * ZOOM) return 0;\n  return L.bits[L.first[j] + letter][cv * 5 * ZOOM + b];\n}\n\nfunction newLayout() {\n  return {\n    lines: 0,\n    gap: 0,\n    pitch: 1,\n    sx: 1,\n    sy: 1,\n    y0: 0,\n    first: new Int8Array(MAX_LINES),\n    cols: new Int16Array(MAX_LINES),\n    x0: new Int16Array(MAX_LINES),\n    bits: [],\n  };\n}\n\nexport function setup(params) {\n  params.phase = 0;\n  params.roll = 1;\n  params.word = -1;\n  params.layout = [newLayout(), newLayout()];\n  params.big = [];\n  for (let g = 0; g \u003c LETTERS.length; g++) {\n    const bits = new Uint8Array(35);\n    for (let r = 0; r \u003c 7; r++) for (let c = 0; c \u003c 5; c++) bits[r * 5 + c] = (FONT[g * 7 + r] >> (4 - c)) & 1;\n    params.big.push(epx(bits, 5, 7));\n  }\n  params.mask = new Uint8Array(W * H);\n  params.rowShift = new Float32Array(H);\n  params.colShift = new Float32Array(W);\n  params.line = [0, 0, 0];\n  params.fill = [0, 0, 0];\n  params.shade = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  p.hue = k[0];\n  p.speed = k[1];\n  p.warp = k[3];\n  const index = Math.max(0, Math.min(WORDS.length - 1, Math.round(k[2])));\n  if (p.word \u003c 0) {\n    setWord(p, 0, index);\n    p.word = index;\n  } else if (index !== p.word) {\n    // The old word rolls up out of frame and the new one follows it in.\n    p.layout.reverse();\n    setWord(p, 0, index);\n    p.word = index;\n    p.roll = 0;\n  }\n  p.roll = Math.min(1, p.roll + dt * 3);\n  p.phase += dt * p.speed;\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const warp = p.warp;\n  const ph = p.phase;\n  const amp = 1.5 + warp * 6;\n  // About one wave to a big letter, as on the wide panel.\n  const lambda = 64 - warp * 16;\n  const shear = warp * 0.09 * Math.sin(ph * 0.45);\n  // Above half warp a band of rows slips sideways now and then, like lost sync.\n  const slot = Math.floor(ph * 3);\n  const tearY = hash(slot) * H;\n  const tearH = 3 + hash(slot + 7) * 12;\n  const tear = warp > 0.5 && hash(slot + 3) \u003c 0.6 ? (hash(slot + 11) - 0.5) * 44 * (warp - 0.5) : 0;\n  for (let y = 0; y \u003c H; y++) {\n    let s = amp * Math.sin((y / lambda) * 6.2832 - ph * 2.4) + shear * (y - H / 2);\n    if (tear !== 0 && y >= tearY && y \u003c tearY + tearH) s += tear;\n    p.rowShift[y] = s;\n  }\n  for (let x = 0; x \u003c W; x++) p.colShift[x] = warp * 3 * Math.sin((x / 56) * 6.2832 + ph * 1.3);\n\n  const e = p.roll * p.roll * (3 - 2 * p.roll);\n  const now = p.layout[0];\n  const old = p.layout[1];\n  const rolling = p.roll \u003c 1;\n  const mask = p.mask;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const u = x - p.rowShift[y];\n      const v = y - p.colShift[x];\n      let m = inside(now, u, v - now.y0 - (rolling ? (1 - e) * H : 0));\n      if (rolling && !m) m = inside(old, u, v - old.y0 + e * H);\n      mask[y * W + x] = m;\n    }\n  }\n\n  hsv(p.hue, 0.75, 1, p.line);\n  hsv(p.hue + 0.07, 0.95, 1, p.fill);\n  hsv(p.hue + 0.55, 0.9, 0.32, p.shade);\n  const line = p.line;\n  const fill = p.fill;\n  const shade = p.shade;\n  const bar = ((ph * 30) % (H + 24)) - 12;\n  const sdx = 2;\n  const sdy = 2;\n  for (let y = 0; y \u003c H; y++) {\n    const glow = Math.max(0, 1 - Math.abs(y - bar) / 7);\n    const lit = (y & 1) === 0 ? 0.3 + glow * 0.6 : glow * 0.35;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (mask[i]) {\n        const edge =\n          x === 0 || y === 0 || x === W - 1 || y === H - 1 ||\n          !mask[i - 1] || !mask[i + 1] || !mask[i - W] || !mask[i + W];\n        if (edge) display.setPixel(x, y, line[0], line[1], line[2]);\n        else display.setPixel(x, y, fill[0] * lit, fill[1] * lit, fill[2] * lit);\n      } else if (x >= sdx && y >= sdy && mask[i - sdy * W - sdx]) {\n        display.setPixel(x, y, shade[0], shade[1], shade[2]);\n      } else {\n        display.setPixel(x, y, 0, 0, 0);\n      }\n    }\n  }\n}\n","layer":{"id":"layer-big-type","type":"code","name":"big-type","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Big Type\n// Family:  type\n// Idea:    One word as big as the screen will hold, on a set that cannot keep it still, the way a magnet bends the picture on an old television.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..5, Word=0..6, Warp=0..1\n//\n// Knob 1: Hue. Turns the outline colour; the fill and the shadow follow it.\n// Knob 2: Speed. How fast the wave runs down the word and the bright scan bar rolls.\n// Knob 3: Word. Picks the word: TV, 1963, LIGHT, HELLO, FLOW, PLAY, KNOB.\n// Knob 4: Warp. How hard the picture bends, from a slow sway to a set losing its hold.\n\nconst W = 64;\nconst H = 128;\n\n// The font is drawn from its Scale2x copy, ten by fourteen cells a glyph.\nconst ZOOM = 2;\n\nconst WORDS = [\"TV\", \"1963\", \"LIGHT\", \"HELLO\", \"FLOW\", \"PLAY\", \"KNOB\"];\n// The panel stands up, so a word is set in lines: four letters as two over\n// two like a poster, five down the panel like a hotel sign.\nconst LINES = [[\"T\", \"V\"], [\"19\", \"63\"], [\"L\", \"I\", \"G\", \"H\", \"T\"], [\"H\", \"E\", \"L\", \"L\", \"O\"], [\"FL\", \"OW\"], [\"PL\", \"AY\"], [\"KN\", \"OB\"]];\nconst MAX_LINES = 5;\n\n// 5x7 glyphs, seven rows each from the top, 16 is the left column.\nconst LETTERS = \"TV1963LIGHEOFWPAYKNB\";\nconst FONT = [\n  31, 4, 4, 4, 4, 4, 4,\n  17, 17, 17, 17, 17, 10, 4,\n  4, 12, 4, 4, 4, 4, 14,\n  14, 17, 17, 15, 1, 2, 12,\n  6, 8, 16, 30, 17, 17, 14,\n  31, 2, 4, 2, 1, 17, 14,\n  16, 16, 16, 16, 16, 16, 31,\n  14, 4, 4, 4, 4, 4, 14,\n  14, 17, 16, 23, 17, 17, 15,\n  17, 17, 17, 31, 17, 17, 17,\n  31, 16, 16, 30, 16, 16, 31,\n  14, 17, 17, 17, 17, 17, 14,\n  31, 16, 16, 30, 16, 16, 16,\n  17, 17, 17, 21, 21, 21, 10,\n  30, 17, 17, 30, 16, 16, 16,\n  14, 17, 17, 31, 17, 17, 17,\n  17, 17, 10, 4, 4, 4, 4,\n  17, 18, 20, 24, 20, 18, 17,\n  17, 17, 25, 21, 19, 17, 17,\n  30, 17, 17, 30, 17, 17, 30,\n];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash(n) {\n  let x = (Math.imul(n | 0, 374761393) + 668265263) >>> 0;\n  x = Math.imul(x ^ (x >>> 13), 1274126177) >>> 0;\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296;\n}\n\n// Lays a word out: its lines, the glyphs of each, and one scale for all of\n// them, as tall as the lines allow and no wider than 1.8 times that. The\n// scale need not be whole: five lines get 3.2 LEDs a font row.\nfunction setWord(p, slot, index) {\n  const lines = LINES[index];\n  const L = p.layout[slot];\n  L.lines = lines.length;\n  let wide = 0;\n  let k = 0;\n  for (let j = 0; j \u003c L.lines; j++) {\n    const text = lines[j];\n    L.first[j] = k;\n    L.cols[j] = text.length * 6 - 1;\n    wide = Math.max(wide, L.cols[j]);\n    for (let i = 0; i \u003c text.length; i++) L.bits[k++] = p.big[LETTERS.indexOf(text[i])];\n  }\n  L.gap = L.lines > 2 ? 2 : 8;\n  L.sy = Math.min(8, (H - 8 - (L.lines - 1) * L.gap) / (7 * L.lines));\n  L.sx = Math.min(11, Math.floor((W - 6) / wide), L.sy * 1.8);\n  L.pitch = Math.ceil(7 * L.sy) + L.gap;\n  L.y0 = Math.floor((H - L.lines * L.pitch + L.gap) / 2);\n  for (let j = 0; j \u003c L.lines; j++) L.x0[j] = Math.floor((W - L.cols[j] * L.sx) / 2);\n}\n\n// Scale2x (EPX) on a bitmap: square corners stay, a diagonal step gets joined.\nfunction epx(src, w, h) {\n  const out = new Uint8Array(w * h * 4);\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= w || y >= h ? 0 : src[y * w + x]);\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const P = at(x, y);\n      const A = at(x, y - 1);\n      const B = at(x + 1, y);\n      const C = at(x - 1, y);\n      const D = at(x, y + 1);\n      const o = y * 2 * w * 2 + x * 2;\n      out[o] = C === A && C !== D && A !== B ? A : P;\n      out[o + 1] = A === B && A !== C && B !== D ? B : P;\n      out[o + w * 2] = D === C && D !== B && C !== A ? C : P;\n      out[o + w * 2 + 1] = B === D && B !== A && D !== C ? D : P;\n    }\n  }\n  return out;\n}\n\n// u is across the panel, v down from the top of the word.\nfunction inside(L, u, v) {\n  if (v \u003c 0) return 0;\n  const j = Math.floor(v / L.pitch);\n  if (j >= L.lines) return 0;\n  v -= j * L.pitch;\n  u -= L.x0[j];\n  if (u \u003c 0) return 0;\n  const cu = Math.floor((u * ZOOM) / L.sx);\n  const cv = Math.floor((v * ZOOM) / L.sy);\n  if (cu >= L.cols[j] * ZOOM || cv >= 7 * ZOOM) return 0;\n  const letter = Math.floor(cu / (6 * ZOOM));\n  const b = cu - letter * 6 * ZOOM;\n  if (b >= 5 * ZOOM) return 0;\n  return L.bits[L.first[j] + letter][cv * 5 * ZOOM + b];\n}\n\nfunction newLayout() {\n  return {\n    lines: 0,\n    gap: 0,\n    pitch: 1,\n    sx: 1,\n    sy: 1,\n    y0: 0,\n    first: new Int8Array(MAX_LINES),\n    cols: new Int16Array(MAX_LINES),\n    x0: new Int16Array(MAX_LINES),\n    bits: [],\n  };\n}\n\nexport function setup(params) {\n  params.phase = 0;\n  params.roll = 1;\n  params.word = -1;\n  params.layout = [newLayout(), newLayout()];\n  params.big = [];\n  for (let g = 0; g \u003c LETTERS.length; g++) {\n    const bits = new Uint8Array(35);\n    for (let r = 0; r \u003c 7; r++) for (let c = 0; c \u003c 5; c++) bits[r * 5 + c] = (FONT[g * 7 + r] >> (4 - c)) & 1;\n    params.big.push(epx(bits, 5, 7));\n  }\n  params.mask = new Uint8Array(W * H);\n  params.rowShift = new Float32Array(H);\n  params.colShift = new Float32Array(W);\n  params.line = [0, 0, 0];\n  params.fill = [0, 0, 0];\n  params.shade = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  p.hue = k[0];\n  p.speed = k[1];\n  p.warp = k[3];\n  const index = Math.max(0, Math.min(WORDS.length - 1, Math.round(k[2])));\n  if (p.word \u003c 0) {\n    setWord(p, 0, index);\n    p.word = index;\n  } else if (index !== p.word) {\n    // The old word rolls up out of frame and the new one follows it in.\n    p.layout.reverse();\n    setWord(p, 0, index);\n    p.word = index;\n    p.roll = 0;\n  }\n  p.roll = Math.min(1, p.roll + dt * 3);\n  p.phase += dt * p.speed;\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const warp = p.warp;\n  const ph = p.phase;\n  const amp = 1.5 + warp * 6;\n  // About one wave to a big letter, as on the wide panel.\n  const lambda = 64 - warp * 16;\n  const shear = warp * 0.09 * Math.sin(ph * 0.45);\n  // Above half warp a band of rows slips sideways now and then, like lost sync.\n  const slot = Math.floor(ph * 3);\n  const tearY = hash(slot) * H;\n  const tearH = 3 + hash(slot + 7) * 12;\n  const tear = warp > 0.5 && hash(slot + 3) \u003c 0.6 ? (hash(slot + 11) - 0.5) * 44 * (warp - 0.5) : 0;\n  for (let y = 0; y \u003c H; y++) {\n    let s = amp * Math.sin((y / lambda) * 6.2832 - ph * 2.4) + shear * (y - H / 2);\n    if (tear !== 0 && y >= tearY && y \u003c tearY + tearH) s += tear;\n    p.rowShift[y] = s;\n  }\n  for (let x = 0; x \u003c W; x++) p.colShift[x] = warp * 3 * Math.sin((x / 56) * 6.2832 + ph * 1.3);\n\n  const e = p.roll * p.roll * (3 - 2 * p.roll);\n  const now = p.layout[0];\n  const old = p.layout[1];\n  const rolling = p.roll \u003c 1;\n  const mask = p.mask;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const u = x - p.rowShift[y];\n      const v = y - p.colShift[x];\n      let m = inside(now, u, v - now.y0 - (rolling ? (1 - e) * H : 0));\n      if (rolling && !m) m = inside(old, u, v - old.y0 + e * H);\n      mask[y * W + x] = m;\n    }\n  }\n\n  hsv(p.hue, 0.75, 1, p.line);\n  hsv(p.hue + 0.07, 0.95, 1, p.fill);\n  hsv(p.hue + 0.55, 0.9, 0.32, p.shade);\n  const line = p.line;\n  const fill = p.fill;\n  const shade = p.shade;\n  const bar = ((ph * 30) % (H + 24)) - 12;\n  const sdx = 2;\n  const sdy = 2;\n  for (let y = 0; y \u003c H; y++) {\n    const glow = Math.max(0, 1 - Math.abs(y - bar) / 7);\n    const lit = (y & 1) === 0 ? 0.3 + glow * 0.6 : glow * 0.35;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (mask[i]) {\n        const edge =\n          x === 0 || y === 0 || x === W - 1 || y === H - 1 ||\n          !mask[i - 1] || !mask[i + 1] || !mask[i - W] || !mask[i + W];\n        if (edge) display.setPixel(x, y, line[0], line[1], line[2]);\n        else display.setPixel(x, y, fill[0] * lit, fill[1] * lit, fill[2] * lit);\n      } else if (x >= sdx && y >= sdy && mask[i - sdy * W - sdx]) {\n        display.setPixel(x, y, shade[0], shade[1], shade[2]);\n      } else {\n        display.setPixel(x, y, 0, 0, 0);\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..5, Word=0..6, Warp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the outline colour; the fill and the shadow follow it."},{"name":"Speed","min":0.2,"max":5,"about":"How fast the wave runs down the word and the bright scan bar rolls."},{"name":"Word","min":0,"max":6,"about":"Picks the word: TV, 1963, LIGHT, HELLO, FLOW, PLAY, KNOB."},{"name":"Warp","min":0,"max":1,"about":"How hard the picture bends, from a slow sway to a set losing its hold."}],"start":[0,2,0,0.06],"measures":{"motion":0.4681,"detail":0.0954,"edges":0.9989,"complexity":0.0628,"coverage":0.2402,"colour":0.253,"drift":0.0745},"knobResponse":[0.0865,0.0522,0.1361,0.0808]},{"slug":"bismuth","title":"Bismuth","family":"mineral","round":18,"note":"녹은 비스무트 웅덩이에서 계단 진 네모 호퍼 결정이 가지를 치며 패널 꼭대기까지 자라요. 테라스마다 산화막이 은색에서 금색, 자홍, 파랑, 청록을 지나 두 번째 금색과 분홍으로 바뀌어서 색이 그 단이 생긴 때를 말해요. K1 을 누르면 웅덩이가 패널을 타고 올라 결정을 녹였다가 빠지고, 결정이 다시 자라요.","idea":"Stepped square hopper crystals of bismuth grow up out of a glowing melt pool to the top of the panel, each terrace turning through the oxide film's silver, gold, purple, blue and green as it ages, until the melt rises and takes them back.","buttons":"K1 tap heats the pool now: the melt rises up the panel, takes the cluster back and drains, and growth starts again.","code":"// ===== Patternflow pattern =====\n// Title:   Bismuth\n// Family:  mineral\n// Idea:    Stepped square hopper crystals of bismuth grow up out of a glowing melt pool to the top of the panel, each terrace turning through the oxide film's silver, gold, purple, blue and green as it ages, until the melt rises and takes them back.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after lab-grown bismuth hopper crystals and the interference colours of their oxide skin\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Steps=3..8, Heat=0..1\n//\n// Knob 1: Tint. Moves every terrace along the oxide sequence: at 0 fresh growth is silver and gold, at 0.5 it starts out purple and blue, at 1 in the second order's gold and pink.\n// Knob 2: Speed. How fast the crystals grow and their oxide thickens: at 2 the cluster climbs the 113 rows to the top in about 40 s, at 0.2 it barely moves.\n// Knob 3: Steps. How wide each terrace of a hopper is, from fine 3 LED steps to deep 8 LED steps, so how many rings each square shows.\n// Knob 4: Heat. How hot the pool burns, from dull cherry red to yellow; a hotter pool lights the lower crystals, thickens their oxide faster and rises sooner to take the cluster back.\n// Buttons: K1 tap heats the pool now: the melt rises up the panel, takes the cluster back and drains, and growth starts again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The pool's surface row when it is at rest.\nconst POOL = 116;\n// Growth phases.\nconst GROW = 0;\nconst HOLD = 1;\nconst MELT = 2;\nconst DRAIN = 3;\n// Oxide film colours by thickness: bare silver, then the first order's straw,\n// gold, bronze, magenta, purple and blue, the second order's sky, teal, gold\n// and pink. Old metal slows toward the second order's teal, and Tint wraps\n// what goes past it back round to gold.\nconst FILM = [\n  [0.0, 200, 204, 214],\n  [0.08, 218, 208, 168],\n  [0.17, 240, 190, 78],\n  [0.26, 226, 130, 64],\n  [0.34, 206, 64, 126],\n  [0.42, 150, 54, 200],\n  [0.5, 70, 84, 236],\n  [0.59, 50, 160, 230],\n  [0.68, 44, 210, 170],\n  [0.78, 150, 216, 80],\n  [0.86, 238, 198, 70],\n  [0.96, 240, 108, 150],\n  [1.06, 168, 92, 210],\n  [1.18, 70, 172, 196],\n  [1.25, 96, 190, 176],\n];\nconst LUT = 600;\n// The longest the opening runs ahead, in seconds, waiting for the cluster to\n// reach row 20.\nconst PRE = 60;\nconst TH_MAX = 1.25;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction buildLut(P) {\n  P.lut = new Float32Array(LUT * 3);\n  for (let i = 0; i \u003c LUT; i++) {\n    const th = (i / (LUT - 1)) * TH_MAX;\n    let j = 0;\n    while (j \u003c FILM.length - 2 && FILM[j + 1][0] \u003c th) j++;\n    const a = FILM[j];\n    const b = FILM[j + 1];\n    const f = clamp((th - a[0]) / (b[0] - a[0]), 0, 1);\n    const s = f * f * (3 - 2 * f);\n    for (let c = 0; c \u003c 3; c++) P.lut[i * 3 + c] = a[c + 1] + (b[c + 1] - a[c + 1]) * s;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.owner = new Int16Array(N);\n  P.dist = new Uint8Array(N);\n  P.phase = new Uint8Array(N);\n  P.buf = new Float32Array(N * 3);\n  // Per LED: when its terrace started, and how far across the terrace it sits.\n  P.tStart = new Float32Array(N);\n  P.frac = new Float32Array(N);\n  P.wAt = 3;\n  buildLut(P);\n  // Oxide thickness grows as age to the power 0.82, here in tenths of a second.\n  P.ageLut = new Float32Array(4001);\n  for (let i = 0; i \u003c= 4000; i++) P.ageLut[i] = Math.pow(i / 10, 0.82);\n  P.glint = new Float32Array(513);\n  for (let i = 0; i \u003c= 512; i++) P.glint[i] = Math.exp(-(((i - 256) / 4 / 16) ** 2));\n  Object.assign(P, { T: 0, t: 0, tint: 0, w: 3, heat: 0.06, started: false });\n  restart(P);\n}\n\n// A clean pool: no crystals, and three seeds on its surface spread across the width.\nfunction restart(P) {\n  P.owner.fill(0);\n  P.crystals = [];\n  P.mode = GROW;\n  P.modeT = 0;\n  P.melt = POOL;\n  P.fill = 0;\n  P.quiet = 0;\n  for (let i = 0; i \u003c 3; i++) addCrystal(P, Math.round(10 + 22 * i + (Math.random() - 0.5) * 6), POOL - 3, null, false);\n}\n\nfunction addCrystal(P, x, y, parent, small) {\n  // A big crystal keeps growing round its neighbours where a small one stops.\n  const big = !small && (!parent || Math.random() \u003c 0.3);\n  const c = {\n    id: P.crystals.length + 1,\n    x,\n    y,\n    parent: parent ? parent.id : 0,\n    gen: parent ? parent.gen + 1 : 0,\n    tb: P.T,\n    // Half-size r grows as rmax * (1 - exp(-age / tau)): fast at first, then\n    // slower as the melt round it runs out.\n    rmax: small ? 3 + Math.floor(Math.random() * 3) : parent ? (big ? 10 + Math.floor(Math.random() * 6) : 5 + Math.floor(Math.random() * 6)) : 13 + Math.floor(Math.random() * 5),\n    tau: small ? 4 : parent ? 6 + Math.random() * 3 : 14,\n    r: 0,\n    // Branch slots: 0 and 1 the upper corners, 2 the top, 3 and 4 the sides.\n    slots: small ? [] : shuffle(parent && parent.gen > 1 ? [0, 1] : parent ? [0, 1, Math.random() \u003c 0.5 ? 3 : 4] : [0, 1, 2, 3, 4]),\n    // Each crystal's own oxide rate: the melt is not the same heat everywhere.\n    ox: 0.8 + 0.45 * Math.random(),\n    nextKid: parent ? 2 : 3,\n    // The side the square spiral starts its turn on, and which way it turns.\n    spin: Math.floor(Math.random() * 4),\n    hand: Math.random() \u003c 0.5 ? 1 : 3,\n    big,\n    done: false,\n  };\n  P.crystals.push(c);\n  claimRing(P, c, 0, true);\n  return c;\n}\n\nfunction shuffle(a) {\n  for (let i = a.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    [a[i], a[j]] = [a[j], a[i]];\n  }\n  return a;\n}\n\n// The quarter turn of a square spiral an LED of a crystal sits on.\nfunction sideOf(c, dx, dy) {\n  const s = Math.abs(dx) >= Math.abs(dy) ? (dx > 0 ? 1 : 3) : dy > 0 ? 2 : 0;\n  return ((s * c.hand + c.spin) % 4) * 64;\n}\n\nconst family = (P, c, q) => q === c.id || q === c.parent || P.crystals[q - 1].parent === c.id;\n\n// Looks at ring r of a crystal, a square. With claim set, takes the LEDs no crystal has reached;\n// without it, returns the share of the ring's LEDs inside the panel that\n// another crystal, not a parent or a branch, already holds.\nfunction claimRing(P, c, r, claim) {\n  let taken = 0;\n  let total = 0;\n  const own = P.owner;\n  const take = (dx, dy) => {\n    const x = c.x + dx;\n    const y = c.y + dy;\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    if (y >= P.melt - 0.5) return;\n    const q = own[p];\n    if (claim) {\n      if (q) return;\n      own[p] = c.id;\n      P.dist[p] = r;\n      P.phase[p] = sideOf(c, dx, dy);\n      terrace(P, c, p);\n      return;\n    }\n    if (q && family(P, c, q)) return;\n    total++;\n    if (q) taken++;\n  };\n  if (r === 0) take(0, 0);\n  else {\n    for (let i = -r; i \u003c= r; i++) {\n      take(i, -r);\n      take(i, r);\n    }\n    for (let i = -r + 1; i \u003c r; i++) {\n      take(-r, i);\n      take(r, i);\n    }\n  }\n  return total ? taken / total : 1;\n}\n\n// Which terrace of the square spiral an LED is on at the current step width,\n// and when the growing edge passed that terrace's inner border.\nfunction terrace(P, c, p) {\n  const w = P.wAt;\n  const ph = P.phase[p] / 256;\n  const u = P.dist[p] / w + ph;\n  const k = Math.floor(u);\n  P.frac[p] = u - k;\n  const start = Math.min(0.97, Math.max(0, (k - ph) * w) / c.rmax);\n  P.tStart[p] = c.tb - c.tau * Math.log(1 - start);\n}\n\nfunction isFree(P, x, y, m) {\n  if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= P.melt - 3) return false;\n  const o = P.owner;\n  for (let j = -m; j \u003c= m; j++)\n    for (let i = -m; i \u003c= m; i++) {\n      const xx = x + i;\n      const yy = y + j;\n      if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H && o[yy * W + xx]) return false;\n    }\n  return true;\n}\n\n// A branch starts just past an upper corner of its parent, or over its top.\nfunction branch(P, c) {\n  const slot = c.slots.pop();\n  const R = c.r + 2 + Math.floor(Math.random() * 3);\n  const sx = slot === 0 || slot === 3 ? -1 : slot === 1 || slot === 4 ? 1 : 0;\n  const x = Math.round(c.x + sx * R + (sx ? 0 : (Math.random() - 0.5) * 6));\n  const y = c.y - (slot > 2 ? Math.floor(R / 3) : R);\n  if (isFree(P, x, y, 1)) addCrystal(P, x, y, c, false);\n}\n\nfunction grow(P, h) {\n  let grew = false;\n  for (const c of P.crystals) {\n    if (c.done) continue;\n    const target = Math.floor(c.rmax * (1 - Math.exp(-(P.T - c.tb) / c.tau)) + 0.5);\n    while (c.r \u003c target && !c.done) {\n      // Stop a ring short of any crystal that is not kin, so a dark gap stays.\n      const near = claimRing(P, c, c.r + 1, false);\n      if (c.big ? near > 0.4 : near > 0.15 || claimRing(P, c, c.r + 2, false) > 0.3) {\n        c.done = true;\n        break;\n      }\n      c.r++;\n      claimRing(P, c, c.r, true);\n      grew = true;\n      if (c.r >= c.rmax) c.done = true;\n      if (c.slots.length && c.r >= c.nextKid) {\n        c.nextKid += 3 + Math.floor(Math.random() * 3);\n        branch(P, c);\n      }\n    }\n  }\n  // Small crystals start on the faces of old ones wherever there is room.\n  const tries = Math.floor(h * 4 + Math.random());\n  for (let i = 0; i \u003c tries; i++) {\n    const x = 1 + Math.floor(Math.random() * (W - 2));\n    const y = 1 + Math.floor(Math.random() * (P.melt - 10));\n    if (!isFree(P, x, y, 2)) continue;\n    const o = P.owner;\n    const p = y * W + x;\n    if ((x > 2 && o[p - 3]) || (x \u003c W - 3 && o[p + 3]) || (y > 3 && o[p - 3 * W]) || o[p + 3 * W]) {\n      addCrystal(P, x, y, null, true);\n      grew = true;\n    }\n  }\n  return grew;\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.modeT += h;\n  const heat = P.heat;\n  if (P.mode === GROW || P.mode === HOLD) {\n    const grew = grow(P, h);\n    P.quiet = grew ? 0 : P.quiet + h;\n    // A cluster that has stopped short of the top sends a new branch up from\n    // its highest crystal.\n    if (P.mode === GROW && P.quiet > 1.5 && top(P) > 6) {\n      let hi = null;\n      for (const c of P.crystals) if (c.r >= 2 && (!hi || c.y - c.r \u003c hi.y - hi.r)) hi = c;\n      if (hi) {\n        hi.slots = [0, 1, 2];\n        while (hi.slots.length) branch(P, hi);\n      }\n      P.quiet = 0;\n    }\n    if (P.mode === GROW && ((P.quiet > 4 && top(P) \u003c= 6) || P.modeT > 60)) {\n      P.mode = HOLD;\n      P.modeT = 0;\n    }\n    if (P.mode === HOLD && P.modeT > 3 + 9 * (1 - heat)) {\n      P.mode = MELT;\n      P.modeT = 0;\n    }\n  } else if (P.mode === MELT) {\n    // The pool rises and every crystal under its surface goes back into it.\n    const from = Math.ceil(P.melt);\n    P.melt -= h * (9 + 26 * heat);\n    for (let y = Math.max(0, Math.ceil(P.melt)); y \u003c from && y \u003c H; y++) P.owner.fill(0, y * W, y * W + W);\n    if (P.melt \u003c -4) {\n      P.mode = DRAIN;\n      P.modeT = 0;\n      P.owner.fill(0);\n      P.crystals = [];\n    }\n  } else {\n    P.melt += h * 70;\n    if (P.melt >= POOL) restart(P);\n  }\n}\n\n// The highest row the cluster reaches.\nfunction top(P) {\n  let t = H;\n  for (const c of P.crystals) t = Math.min(t, c.y - c.r);\n  return t;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.tint = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0, 3) / 2;\n  P.w = clamp(k[2], 3, 8);\n  P.heat = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The pour cooled some time ago: the cluster already stands the height of\n    // the panel when it opens, still growing into its gaps.\n    for (let i = 0; i \u003c PRE * 30 && top(P) > 20; i++) {\n      step(P, 1 / 30);\n      P.modeT = Math.min(P.modeT, 20);\n    }\n    for (let i = 0; i \u003c 90; i++) step(P, rate / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.mode \u003c MELT) {\n    P.mode = MELT;\n    P.modeT = 0;\n  }\n  P.t += dt;\n  step(P, dt * rate);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const own = P.owner;\n  const cs = P.crystals;\n  const lut = P.lut;\n  const w = P.w;\n  const heat = P.heat;\n  const T = P.T;\n  const melt = P.melt;\n  // Oxide grows faster on hot metal.\n  const ox = 0.06 * (0.8 + 0.5 * heat);\n  const tint = P.tint * 0.95;\n  // The pool's glow: cherry red when cool, yellow when hot.\n  const gr = 170 + 85 * heat;\n  const gg = 28 + 140 * heat * heat;\n  const gb = 12 + 40 * heat * heat * heat;\n  const reach = 10 + 22 * heat;\n  // A broad band of light that sweeps down the cluster every 26 s and\n  // catches the rims as it passes.\n  const band = ((T * 7) % 180) - 30;\n  if (P.wAt !== w) {\n    P.wAt = w;\n    for (let p = 0; p \u003c N; p++) if (own[p]) terrace(P, cs[own[p] - 1], p);\n  }\n  const ageLut = P.ageLut;\n  const glint = P.glint;\n  for (let y = 0; y \u003c H; y++) {\n    const above = melt - y;\n    const warm = above > 0 ? Math.exp(-above / reach) * (0.35 + 0.4 * heat) : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let r;\n      let g;\n      let b;\n      if (above \u003c= 0) {\n        // Molten bismuth seen from a little above: slow ripples under the\n        // glow, and the bar of light they throw back.\n        const depth = -above;\n        const ripple = Math.sin(depth * 1.1 - P.t * 1.6 + 1.3 * Math.sin(x * 0.13 + P.t * 0.5));\n        const sheen = Math.max(0, ripple - 0.55) * 2.2 * (0.6 + 0.4 * Math.sin(x * 0.4 - P.t * 0.8 + depth));\n        const dim = 0.72 + 0.12 * ripple - 0.2 * Math.min(1, depth / 12);\n        const edge = depth \u003c 1 ? 0.6 : 0;\n        r = gr * dim + 120 * sheen + 120 * edge;\n        g = gg * dim + 120 * sheen + 110 * edge;\n        b = gb * dim + 130 * sheen + 100 * edge;\n      } else if (own[p]) {\n        const c = cs[own[p] - 1];\n        const d = P.dist[p];\n        const f = P.frac[p];\n        const age = T - P.tStart[p];\n        const rim = (1 - f) * w \u003c= 1.001;\n        let th = ox * c.ox * ageLut[age \u003c= 0 ? 0 : age >= 400 ? 4000 : (age * 10) | 0] + (rim ? 0.07 : 0);\n        if (th > 1) th = 1.2 - 0.2 * Math.exp((1 - th) / 0.2);\n        th += tint;\n        if (th > TH_MAX) th -= 1.05;\n        const li = Math.floor((th / TH_MAX) * (LUT - 1)) * 3;\n        // Which side of the square this LED is on, for the light.\n        const dx = x - c.x;\n        const dy = y - c.y;\n        const lit = Math.abs(dx) >= Math.abs(dy) ? dx > 0 : dy > 0;\n        // Terraces step down into the hollow, so the inner ones sit darker.\n        let m = (0.72 + 0.2 * f) * (0.7 + (0.3 * d) / Math.max(4, c.r));\n        // The rim of each step: the riser on the far side of the hollow faces\n        // the light from the upper left, the near side is in shadow.\n        if (rim) m = lit ? 1.05 : 0.36;\n        // The crystal's outer walls: lit at the top and left, in shade at the\n        // bottom and right, silver where it is still growing; and a dark seam\n        // where it meets an older crystal.\n        const up = y > 0 ? own[p - W] : 0;\n        const left = x > 0 ? own[p - 1] : 0;\n        const down = own[p + W];\n        const right = x \u003c W - 1 ? own[p + 1] : 0;\n        const o0 = own[p];\n        if (!up || !left) m = d === c.r && !c.done ? 1.3 : 1.12;\n        else if (!down || !right) m = d === c.r && !c.done ? 1.1 : 0.42;\n        if ((up && up !== o0) || (left && left !== o0)) m *= 0.3;\n        else if ((down && down \u003c o0) || (right && right \u003c o0)) m *= 0.6;\n        const go = ((x * 0.5 + y - band) * 4 + 256) | 0;\n        const gl = go \u003c 0 || go > 512 ? 0 : glint[go];\n        const shine = (m > 0.95 ? 0.4 : 0.06) * gl;\n        m *= 1 + 0.45 * gl;\n        r = lut[li] * m + 255 * shine + gr * warm;\n        g = lut[li + 1] * m + 255 * shine + gg * warm;\n        b = lut[li + 2] * m + 255 * shine + gb * warm;\n      } else {\n        r = 5 + gr * warm * 0.35;\n        g = 6 + gg * warm * 0.35;\n        b = 10 + gb * warm * 0.35;\n      }\n      // Crystals just above a rising pool glow red hot.\n      if (P.mode === MELT && above > 0 && above \u003c 7) {\n        const hot = 1 - above / 7;\n        r += 200 * hot;\n        g += 50 * hot;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-bismuth","type":"code","name":"bismuth","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bismuth\n// Family:  mineral\n// Idea:    Stepped square hopper crystals of bismuth grow up out of a glowing melt pool to the top of the panel, each terrace turning through the oxide film's silver, gold, purple, blue and green as it ages, until the melt rises and takes them back.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after lab-grown bismuth hopper crystals and the interference colours of their oxide skin\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Steps=3..8, Heat=0..1\n//\n// Knob 1: Tint. Moves every terrace along the oxide sequence: at 0 fresh growth is silver and gold, at 0.5 it starts out purple and blue, at 1 in the second order's gold and pink.\n// Knob 2: Speed. How fast the crystals grow and their oxide thickens: at 2 the cluster climbs the 113 rows to the top in about 40 s, at 0.2 it barely moves.\n// Knob 3: Steps. How wide each terrace of a hopper is, from fine 3 LED steps to deep 8 LED steps, so how many rings each square shows.\n// Knob 4: Heat. How hot the pool burns, from dull cherry red to yellow; a hotter pool lights the lower crystals, thickens their oxide faster and rises sooner to take the cluster back.\n// Buttons: K1 tap heats the pool now: the melt rises up the panel, takes the cluster back and drains, and growth starts again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The pool's surface row when it is at rest.\nconst POOL = 116;\n// Growth phases.\nconst GROW = 0;\nconst HOLD = 1;\nconst MELT = 2;\nconst DRAIN = 3;\n// Oxide film colours by thickness: bare silver, then the first order's straw,\n// gold, bronze, magenta, purple and blue, the second order's sky, teal, gold\n// and pink. Old metal slows toward the second order's teal, and Tint wraps\n// what goes past it back round to gold.\nconst FILM = [\n  [0.0, 200, 204, 214],\n  [0.08, 218, 208, 168],\n  [0.17, 240, 190, 78],\n  [0.26, 226, 130, 64],\n  [0.34, 206, 64, 126],\n  [0.42, 150, 54, 200],\n  [0.5, 70, 84, 236],\n  [0.59, 50, 160, 230],\n  [0.68, 44, 210, 170],\n  [0.78, 150, 216, 80],\n  [0.86, 238, 198, 70],\n  [0.96, 240, 108, 150],\n  [1.06, 168, 92, 210],\n  [1.18, 70, 172, 196],\n  [1.25, 96, 190, 176],\n];\nconst LUT = 600;\n// The longest the opening runs ahead, in seconds, waiting for the cluster to\n// reach row 20.\nconst PRE = 60;\nconst TH_MAX = 1.25;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction buildLut(P) {\n  P.lut = new Float32Array(LUT * 3);\n  for (let i = 0; i \u003c LUT; i++) {\n    const th = (i / (LUT - 1)) * TH_MAX;\n    let j = 0;\n    while (j \u003c FILM.length - 2 && FILM[j + 1][0] \u003c th) j++;\n    const a = FILM[j];\n    const b = FILM[j + 1];\n    const f = clamp((th - a[0]) / (b[0] - a[0]), 0, 1);\n    const s = f * f * (3 - 2 * f);\n    for (let c = 0; c \u003c 3; c++) P.lut[i * 3 + c] = a[c + 1] + (b[c + 1] - a[c + 1]) * s;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.owner = new Int16Array(N);\n  P.dist = new Uint8Array(N);\n  P.phase = new Uint8Array(N);\n  P.buf = new Float32Array(N * 3);\n  // Per LED: when its terrace started, and how far across the terrace it sits.\n  P.tStart = new Float32Array(N);\n  P.frac = new Float32Array(N);\n  P.wAt = 3;\n  buildLut(P);\n  // Oxide thickness grows as age to the power 0.82, here in tenths of a second.\n  P.ageLut = new Float32Array(4001);\n  for (let i = 0; i \u003c= 4000; i++) P.ageLut[i] = Math.pow(i / 10, 0.82);\n  P.glint = new Float32Array(513);\n  for (let i = 0; i \u003c= 512; i++) P.glint[i] = Math.exp(-(((i - 256) / 4 / 16) ** 2));\n  Object.assign(P, { T: 0, t: 0, tint: 0, w: 3, heat: 0.06, started: false });\n  restart(P);\n}\n\n// A clean pool: no crystals, and three seeds on its surface spread across the width.\nfunction restart(P) {\n  P.owner.fill(0);\n  P.crystals = [];\n  P.mode = GROW;\n  P.modeT = 0;\n  P.melt = POOL;\n  P.fill = 0;\n  P.quiet = 0;\n  for (let i = 0; i \u003c 3; i++) addCrystal(P, Math.round(10 + 22 * i + (Math.random() - 0.5) * 6), POOL - 3, null, false);\n}\n\nfunction addCrystal(P, x, y, parent, small) {\n  // A big crystal keeps growing round its neighbours where a small one stops.\n  const big = !small && (!parent || Math.random() \u003c 0.3);\n  const c = {\n    id: P.crystals.length + 1,\n    x,\n    y,\n    parent: parent ? parent.id : 0,\n    gen: parent ? parent.gen + 1 : 0,\n    tb: P.T,\n    // Half-size r grows as rmax * (1 - exp(-age / tau)): fast at first, then\n    // slower as the melt round it runs out.\n    rmax: small ? 3 + Math.floor(Math.random() * 3) : parent ? (big ? 10 + Math.floor(Math.random() * 6) : 5 + Math.floor(Math.random() * 6)) : 13 + Math.floor(Math.random() * 5),\n    tau: small ? 4 : parent ? 6 + Math.random() * 3 : 14,\n    r: 0,\n    // Branch slots: 0 and 1 the upper corners, 2 the top, 3 and 4 the sides.\n    slots: small ? [] : shuffle(parent && parent.gen > 1 ? [0, 1] : parent ? [0, 1, Math.random() \u003c 0.5 ? 3 : 4] : [0, 1, 2, 3, 4]),\n    // Each crystal's own oxide rate: the melt is not the same heat everywhere.\n    ox: 0.8 + 0.45 * Math.random(),\n    nextKid: parent ? 2 : 3,\n    // The side the square spiral starts its turn on, and which way it turns.\n    spin: Math.floor(Math.random() * 4),\n    hand: Math.random() \u003c 0.5 ? 1 : 3,\n    big,\n    done: false,\n  };\n  P.crystals.push(c);\n  claimRing(P, c, 0, true);\n  return c;\n}\n\nfunction shuffle(a) {\n  for (let i = a.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    [a[i], a[j]] = [a[j], a[i]];\n  }\n  return a;\n}\n\n// The quarter turn of a square spiral an LED of a crystal sits on.\nfunction sideOf(c, dx, dy) {\n  const s = Math.abs(dx) >= Math.abs(dy) ? (dx > 0 ? 1 : 3) : dy > 0 ? 2 : 0;\n  return ((s * c.hand + c.spin) % 4) * 64;\n}\n\nconst family = (P, c, q) => q === c.id || q === c.parent || P.crystals[q - 1].parent === c.id;\n\n// Looks at ring r of a crystal, a square. With claim set, takes the LEDs no crystal has reached;\n// without it, returns the share of the ring's LEDs inside the panel that\n// another crystal, not a parent or a branch, already holds.\nfunction claimRing(P, c, r, claim) {\n  let taken = 0;\n  let total = 0;\n  const own = P.owner;\n  const take = (dx, dy) => {\n    const x = c.x + dx;\n    const y = c.y + dy;\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    if (y >= P.melt - 0.5) return;\n    const q = own[p];\n    if (claim) {\n      if (q) return;\n      own[p] = c.id;\n      P.dist[p] = r;\n      P.phase[p] = sideOf(c, dx, dy);\n      terrace(P, c, p);\n      return;\n    }\n    if (q && family(P, c, q)) return;\n    total++;\n    if (q) taken++;\n  };\n  if (r === 0) take(0, 0);\n  else {\n    for (let i = -r; i \u003c= r; i++) {\n      take(i, -r);\n      take(i, r);\n    }\n    for (let i = -r + 1; i \u003c r; i++) {\n      take(-r, i);\n      take(r, i);\n    }\n  }\n  return total ? taken / total : 1;\n}\n\n// Which terrace of the square spiral an LED is on at the current step width,\n// and when the growing edge passed that terrace's inner border.\nfunction terrace(P, c, p) {\n  const w = P.wAt;\n  const ph = P.phase[p] / 256;\n  const u = P.dist[p] / w + ph;\n  const k = Math.floor(u);\n  P.frac[p] = u - k;\n  const start = Math.min(0.97, Math.max(0, (k - ph) * w) / c.rmax);\n  P.tStart[p] = c.tb - c.tau * Math.log(1 - start);\n}\n\nfunction isFree(P, x, y, m) {\n  if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= P.melt - 3) return false;\n  const o = P.owner;\n  for (let j = -m; j \u003c= m; j++)\n    for (let i = -m; i \u003c= m; i++) {\n      const xx = x + i;\n      const yy = y + j;\n      if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H && o[yy * W + xx]) return false;\n    }\n  return true;\n}\n\n// A branch starts just past an upper corner of its parent, or over its top.\nfunction branch(P, c) {\n  const slot = c.slots.pop();\n  const R = c.r + 2 + Math.floor(Math.random() * 3);\n  const sx = slot === 0 || slot === 3 ? -1 : slot === 1 || slot === 4 ? 1 : 0;\n  const x = Math.round(c.x + sx * R + (sx ? 0 : (Math.random() - 0.5) * 6));\n  const y = c.y - (slot > 2 ? Math.floor(R / 3) : R);\n  if (isFree(P, x, y, 1)) addCrystal(P, x, y, c, false);\n}\n\nfunction grow(P, h) {\n  let grew = false;\n  for (const c of P.crystals) {\n    if (c.done) continue;\n    const target = Math.floor(c.rmax * (1 - Math.exp(-(P.T - c.tb) / c.tau)) + 0.5);\n    while (c.r \u003c target && !c.done) {\n      // Stop a ring short of any crystal that is not kin, so a dark gap stays.\n      const near = claimRing(P, c, c.r + 1, false);\n      if (c.big ? near > 0.4 : near > 0.15 || claimRing(P, c, c.r + 2, false) > 0.3) {\n        c.done = true;\n        break;\n      }\n      c.r++;\n      claimRing(P, c, c.r, true);\n      grew = true;\n      if (c.r >= c.rmax) c.done = true;\n      if (c.slots.length && c.r >= c.nextKid) {\n        c.nextKid += 3 + Math.floor(Math.random() * 3);\n        branch(P, c);\n      }\n    }\n  }\n  // Small crystals start on the faces of old ones wherever there is room.\n  const tries = Math.floor(h * 4 + Math.random());\n  for (let i = 0; i \u003c tries; i++) {\n    const x = 1 + Math.floor(Math.random() * (W - 2));\n    const y = 1 + Math.floor(Math.random() * (P.melt - 10));\n    if (!isFree(P, x, y, 2)) continue;\n    const o = P.owner;\n    const p = y * W + x;\n    if ((x > 2 && o[p - 3]) || (x \u003c W - 3 && o[p + 3]) || (y > 3 && o[p - 3 * W]) || o[p + 3 * W]) {\n      addCrystal(P, x, y, null, true);\n      grew = true;\n    }\n  }\n  return grew;\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.modeT += h;\n  const heat = P.heat;\n  if (P.mode === GROW || P.mode === HOLD) {\n    const grew = grow(P, h);\n    P.quiet = grew ? 0 : P.quiet + h;\n    // A cluster that has stopped short of the top sends a new branch up from\n    // its highest crystal.\n    if (P.mode === GROW && P.quiet > 1.5 && top(P) > 6) {\n      let hi = null;\n      for (const c of P.crystals) if (c.r >= 2 && (!hi || c.y - c.r \u003c hi.y - hi.r)) hi = c;\n      if (hi) {\n        hi.slots = [0, 1, 2];\n        while (hi.slots.length) branch(P, hi);\n      }\n      P.quiet = 0;\n    }\n    if (P.mode === GROW && ((P.quiet > 4 && top(P) \u003c= 6) || P.modeT > 60)) {\n      P.mode = HOLD;\n      P.modeT = 0;\n    }\n    if (P.mode === HOLD && P.modeT > 3 + 9 * (1 - heat)) {\n      P.mode = MELT;\n      P.modeT = 0;\n    }\n  } else if (P.mode === MELT) {\n    // The pool rises and every crystal under its surface goes back into it.\n    const from = Math.ceil(P.melt);\n    P.melt -= h * (9 + 26 * heat);\n    for (let y = Math.max(0, Math.ceil(P.melt)); y \u003c from && y \u003c H; y++) P.owner.fill(0, y * W, y * W + W);\n    if (P.melt \u003c -4) {\n      P.mode = DRAIN;\n      P.modeT = 0;\n      P.owner.fill(0);\n      P.crystals = [];\n    }\n  } else {\n    P.melt += h * 70;\n    if (P.melt >= POOL) restart(P);\n  }\n}\n\n// The highest row the cluster reaches.\nfunction top(P) {\n  let t = H;\n  for (const c of P.crystals) t = Math.min(t, c.y - c.r);\n  return t;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.tint = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0, 3) / 2;\n  P.w = clamp(k[2], 3, 8);\n  P.heat = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The pour cooled some time ago: the cluster already stands the height of\n    // the panel when it opens, still growing into its gaps.\n    for (let i = 0; i \u003c PRE * 30 && top(P) > 20; i++) {\n      step(P, 1 / 30);\n      P.modeT = Math.min(P.modeT, 20);\n    }\n    for (let i = 0; i \u003c 90; i++) step(P, rate / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.mode \u003c MELT) {\n    P.mode = MELT;\n    P.modeT = 0;\n  }\n  P.t += dt;\n  step(P, dt * rate);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const own = P.owner;\n  const cs = P.crystals;\n  const lut = P.lut;\n  const w = P.w;\n  const heat = P.heat;\n  const T = P.T;\n  const melt = P.melt;\n  // Oxide grows faster on hot metal.\n  const ox = 0.06 * (0.8 + 0.5 * heat);\n  const tint = P.tint * 0.95;\n  // The pool's glow: cherry red when cool, yellow when hot.\n  const gr = 170 + 85 * heat;\n  const gg = 28 + 140 * heat * heat;\n  const gb = 12 + 40 * heat * heat * heat;\n  const reach = 10 + 22 * heat;\n  // A broad band of light that sweeps down the cluster every 26 s and\n  // catches the rims as it passes.\n  const band = ((T * 7) % 180) - 30;\n  if (P.wAt !== w) {\n    P.wAt = w;\n    for (let p = 0; p \u003c N; p++) if (own[p]) terrace(P, cs[own[p] - 1], p);\n  }\n  const ageLut = P.ageLut;\n  const glint = P.glint;\n  for (let y = 0; y \u003c H; y++) {\n    const above = melt - y;\n    const warm = above > 0 ? Math.exp(-above / reach) * (0.35 + 0.4 * heat) : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let r;\n      let g;\n      let b;\n      if (above \u003c= 0) {\n        // Molten bismuth seen from a little above: slow ripples under the\n        // glow, and the bar of light they throw back.\n        const depth = -above;\n        const ripple = Math.sin(depth * 1.1 - P.t * 1.6 + 1.3 * Math.sin(x * 0.13 + P.t * 0.5));\n        const sheen = Math.max(0, ripple - 0.55) * 2.2 * (0.6 + 0.4 * Math.sin(x * 0.4 - P.t * 0.8 + depth));\n        const dim = 0.72 + 0.12 * ripple - 0.2 * Math.min(1, depth / 12);\n        const edge = depth \u003c 1 ? 0.6 : 0;\n        r = gr * dim + 120 * sheen + 120 * edge;\n        g = gg * dim + 120 * sheen + 110 * edge;\n        b = gb * dim + 130 * sheen + 100 * edge;\n      } else if (own[p]) {\n        const c = cs[own[p] - 1];\n        const d = P.dist[p];\n        const f = P.frac[p];\n        const age = T - P.tStart[p];\n        const rim = (1 - f) * w \u003c= 1.001;\n        let th = ox * c.ox * ageLut[age \u003c= 0 ? 0 : age >= 400 ? 4000 : (age * 10) | 0] + (rim ? 0.07 : 0);\n        if (th > 1) th = 1.2 - 0.2 * Math.exp((1 - th) / 0.2);\n        th += tint;\n        if (th > TH_MAX) th -= 1.05;\n        const li = Math.floor((th / TH_MAX) * (LUT - 1)) * 3;\n        // Which side of the square this LED is on, for the light.\n        const dx = x - c.x;\n        const dy = y - c.y;\n        const lit = Math.abs(dx) >= Math.abs(dy) ? dx > 0 : dy > 0;\n        // Terraces step down into the hollow, so the inner ones sit darker.\n        let m = (0.72 + 0.2 * f) * (0.7 + (0.3 * d) / Math.max(4, c.r));\n        // The rim of each step: the riser on the far side of the hollow faces\n        // the light from the upper left, the near side is in shadow.\n        if (rim) m = lit ? 1.05 : 0.36;\n        // The crystal's outer walls: lit at the top and left, in shade at the\n        // bottom and right, silver where it is still growing; and a dark seam\n        // where it meets an older crystal.\n        const up = y > 0 ? own[p - W] : 0;\n        const left = x > 0 ? own[p - 1] : 0;\n        const down = own[p + W];\n        const right = x \u003c W - 1 ? own[p + 1] : 0;\n        const o0 = own[p];\n        if (!up || !left) m = d === c.r && !c.done ? 1.3 : 1.12;\n        else if (!down || !right) m = d === c.r && !c.done ? 1.1 : 0.42;\n        if ((up && up !== o0) || (left && left !== o0)) m *= 0.3;\n        else if ((down && down \u003c o0) || (right && right \u003c o0)) m *= 0.6;\n        const go = ((x * 0.5 + y - band) * 4 + 256) | 0;\n        const gl = go \u003c 0 || go > 512 ? 0 : glint[go];\n        const shine = (m > 0.95 ? 0.4 : 0.06) * gl;\n        m *= 1 + 0.45 * gl;\n        r = lut[li] * m + 255 * shine + gr * warm;\n        g = lut[li + 1] * m + 255 * shine + gg * warm;\n        b = lut[li + 2] * m + 255 * shine + gb * warm;\n      } else {\n        r = 5 + gr * warm * 0.35;\n        g = 6 + gg * warm * 0.35;\n        b = 10 + gb * warm * 0.35;\n      }\n      // Crystals just above a rising pool glow red hot.\n      if (P.mode === MELT && above > 0 && above \u003c 7) {\n        const hot = 1 - above / 7;\n        r += 200 * hot;\n        g += 50 * hot;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tint=0..1, Speed=0.2..3, Steps=3..8, Heat=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tint","min":0,"max":1,"about":"Moves every terrace along the oxide sequence: at 0 fresh growth is silver and gold, at 0.5 it starts out purple and blue, at 1 in the second order's gold and pink."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the crystals grow and their oxide thickens: at 2 the cluster climbs the 113 rows to the top in about 40 s, at 0.2 it barely moves."},{"name":"Steps","min":3,"max":8,"about":"How wide each terrace of a hopper is, from fine 3 LED steps to deep 8 LED steps, so how many rings each square shows."},{"name":"Heat","min":0,"max":1,"about":"How hot the pool burns, from dull cherry red to yellow; a hotter pool lights the lower crystals, thickens their oxide faster and rises sooner to take the cluster back."}],"start":[0,2,3,0.06],"measures":{"motion":0.0634,"detail":0.155,"edges":0.6769,"complexity":1.8463,"coverage":0.7656,"colour":0.3505,"drift":0.1056},"knobResponse":[0.1563,0.1868,0.0876,0.1811]},{"slug":"bokeh","title":"Bokeh","family":"light","round":1,"note":"초점이 나간 밤거리 불빛이에요. 여섯 모 진 빛 원반이 피었다 흘러가며 겹친 자리만 부드럽게 밝아져요.","idea":"A city at night with the lens left out of focus, so every lamp turns into a disc the shape of the iris.","buttons":"K1 tap racks the focus through, so every disc closes to a point and opens out again.","code":"// ===== Patternflow pattern =====\n// Title:   Bokeh\n// Family:  light\n// Idea:    A city at night with the lens left out of focus, so every lamp turns into a disc the shape of the iris.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0.2..4, Size=-1..1, Lights=40..90\n//\n// Knob 1: Hue. Turns the lights round the colour wheel, starting from sodium amber with a few red and blue ones among them.\n// Knob 2: Pace. How fast the lights drift past and how quickly each one blooms and goes out.\n// Knob 3: Size. How far out of focus they are, from small bright points to wide soft discs.\n// Knob 4: Lights. How many are lit at once; big discs come in fewer.\n// Buttons: K1 tap racks the focus through, so every disc closes to a point and opens out again.\n\nconst W = 64;\nconst H = 128;\nconst N = 160;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nfunction smooth(a, b, x) {\n  const t = Math.max(0, Math.min(1, (x - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction spawn(params, i) {\n  params.x[i] = Math.random() * (W + 12) - 6;\n  params.y[i] = Math.random() * (H + 20) - 10;\n  // Bigger discs are nearer lamps, so they also drift faster.\n  params.size[i] = 0.65 + Math.random() * 0.75;\n  const pick = Math.random();\n  if (pick \u003c 0.62) {\n    params.off[i] = (Math.random() - 0.5) * 0.07;\n    params.sat[i] = 0.82 + Math.random() * 0.18;\n  } else if (pick \u003c 0.8) {\n    // Pale lamps, nearly white.\n    params.off[i] = (Math.random() - 0.5) * 0.05;\n    params.sat[i] = 0.25 + Math.random() * 0.25;\n  } else if (pick \u003c 0.92) {\n    // Tail lights, a step towards red.\n    params.off[i] = -0.07 - Math.random() * 0.03;\n    params.sat[i] = 0.95;\n  } else {\n    // The odd cool one across the wheel.\n    params.off[i] = 0.47 + Math.random() * 0.08;\n    params.sat[i] = 0.75;\n  }\n  params.bright[i] = 0.65 + Math.random() * 0.35;\n  params.life[i] = 1.8 + Math.random() * 1.6;\n  params.age[i] = 0;\n  params.jx[i] = (Math.random() - 0.5) * 2;\n  params.jy[i] = (Math.random() - 0.5) * 2;\n  params.on[i] = 1;\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(N);\n  params.y = new Float32Array(N);\n  params.size = new Float32Array(N);\n  params.off = new Float32Array(N);\n  params.sat = new Float32Array(N);\n  params.bright = new Float32Array(N);\n  params.life = new Float32Array(N);\n  params.age = new Float32Array(N);\n  params.jx = new Float32Array(N);\n  params.jy = new Float32Array(N);\n  params.on = new Uint8Array(N);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.t = 0;\n  params.rack = 0;\n  params.started = false;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 40];\n  params.hue = k[0];\n  const pace = Math.max(0.05, k[1]);\n  params.radius = 9 * Math.pow(1.6, k[2]);\n  const want = Math.min(N, Math.round(k[3] * Math.pow(9 / params.radius, 1.8)));\n  // A crowd dims each lamp a little, so the overlaps stay colours rather than a white wash.\n  params.crowd = Math.min(1, Math.pow(45 / k[3], 0.6));\n  dt = Math.min(dt, 0.1);\n  const step = dt * pace;\n  params.t += step;\n\n  if (!params.started) {\n    // The first frame finds each lamp somewhere in its life, so they never bloom together.\n    for (let i = 0; i \u003c want; i++) {\n      spawn(params, i);\n      params.age[i] = Math.random() * params.life[i];\n    }\n    params.started = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) params.rack = 1;\n  params.rack = Math.max(0, params.rack - dt * 0.9);\n\n  // The whole view pans slowly, the way a car window passes a street.\n  const t = params.t;\n  const ang = 0.6 * Math.sin(t * 0.11) + 0.3 * Math.sin(t * 0.23 + 2);\n  const sp = 9;\n  const dx = Math.cos(ang) * sp;\n  const dy = Math.sin(ang) * sp * 0.6;\n  for (let i = 0; i \u003c N; i++) {\n    if (!params.on[i]) {\n      if (i \u003c want) {\n        spawn(params, i);\n        // A lamp that K4 adds waits a moment, so a quick turn does not light a crowd at once.\n        params.age[i] = -Math.random() * 1.5;\n      }\n      continue;\n    }\n    params.age[i] += step;\n    if (params.age[i] >= params.life[i]) {\n      if (i \u003c want) spawn(params, i);\n      else params.on[i] = 0;\n      continue;\n    }\n    const s = params.size[i];\n    params.x[i] += (dx * s + params.jx[i]) * step;\n    params.y[i] += (dy * s + params.jy[i]) * step;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  buf.fill(0);\n  const col = params.col;\n  // Racking focus: the discs close to points and open again, brighter as they shrink.\n  const r0 = params.rack > 0 ? Math.sin(params.rack * Math.PI) : 0;\n  const focus = 1 - 0.8 * r0;\n  const gain = Math.min(4, 1 / (focus * focus));\n  // A six-bladed iris, turned a little off square.\n  const ic = Math.cos(0.3);\n  const is = Math.sin(0.3);\n  for (let i = 0; i \u003c N; i++) {\n    if (!params.on[i]) continue;\n    const u = params.age[i] / params.life[i];\n    const env = smooth(0, 0.2, u) * (1 - smooth(0.45, 1, u));\n    if (env \u003c= 0.01) continue;\n    const r = params.radius * params.size[i] * (0.6 + 0.4 * smooth(0, 0.35, u) + 0.1 * smooth(0.5, 1, u)) * focus;\n    hsvInto(col, params.hue + 0.075 + params.off[i], params.sat[i], 1);\n    const level = params.bright[i] * env * gain * params.crowd;\n    const cr = col[0] * level;\n    const cg = col[1] * level;\n    const cb = col[2] * level;\n    const cx = params.x[i];\n    const cy = params.y[i];\n    // Soft edge never narrower than four and a half LEDs.\n    const e = Math.max(0.3, 4.5 / r);\n    const e0 = 1 - e * 0.5;\n    const e1 = 1 + e * 0.5;\n    // Near the panel's edge the lens barrel clips the disc into a cat's eye,\n    // measured against the long side so the corners clip as much as before.\n    const vx = ((cx - W / 2) / (H / 2)) * 0.45 * r;\n    const vy = ((cy - H / 2) / (H / 2)) * 0.45 * r;\n    const reach = r * e1 * 1.12 + 1;\n    const x0 = Math.max(0, Math.floor(cx - reach));\n    const x1 = Math.min(W - 1, Math.ceil(cx + reach));\n    const y0 = Math.max(0, Math.floor(cy - reach));\n    const y1 = Math.min(H - 1, Math.ceil(cy + reach));\n    const inv = 1 / r;\n    const vinv = 1 / (r * 1.12);\n    for (let y = y0; y \u003c= y1; y++) {\n      const py = y - cy;\n      for (let x = x0; x \u003c= x1; x++) {\n        const px = x - cx;\n        const round = Math.sqrt(px * px + py * py) * inv;\n        if (round > e1 * 1.2) continue;\n        const ax = Math.abs(px * ic - py * is);\n        const ay = Math.abs(px * is + py * ic);\n        const hex = Math.max(ay, ax * 0.866 + ay * 0.5) * inv * 1.05;\n        let d = round * 0.6 + hex * 0.4;\n        const qx = px + vx;\n        const qy = py + vy;\n        const clip = Math.sqrt(qx * qx + qy * qy) * vinv;\n        if (clip > d) d = clip;\n        if (d >= e1) continue;\n        // Brighter towards the rim, the way a lens draws an out-of-focus light.\n        const v = (1 - smooth(e0, e1, d)) * (0.64 + 0.36 * smooth(0.15, e0, d));\n        const o = (y * W + x) * 3;\n        buf[o] += cr * v;\n        buf[o + 1] += cg * v;\n        buf[o + 2] += cb * v;\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[o]), knee(buf[o + 1]), knee(buf[o + 2]));\n    }\n  }\n}\n\n// Overlaps add up, and past 160 the light rolls off instead of clipping flat.\nfunction knee(c) {\n  if (c \u003c 160) return c;\n  return 160 + 95 * (1 - Math.exp(-(c - 160) / 95));\n}\n","layer":{"id":"layer-bokeh","type":"code","name":"bokeh","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bokeh\n// Family:  light\n// Idea:    A city at night with the lens left out of focus, so every lamp turns into a disc the shape of the iris.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0.2..4, Size=-1..1, Lights=40..90\n//\n// Knob 1: Hue. Turns the lights round the colour wheel, starting from sodium amber with a few red and blue ones among them.\n// Knob 2: Pace. How fast the lights drift past and how quickly each one blooms and goes out.\n// Knob 3: Size. How far out of focus they are, from small bright points to wide soft discs.\n// Knob 4: Lights. How many are lit at once; big discs come in fewer.\n// Buttons: K1 tap racks the focus through, so every disc closes to a point and opens out again.\n\nconst W = 64;\nconst H = 128;\nconst N = 160;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nfunction smooth(a, b, x) {\n  const t = Math.max(0, Math.min(1, (x - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction spawn(params, i) {\n  params.x[i] = Math.random() * (W + 12) - 6;\n  params.y[i] = Math.random() * (H + 20) - 10;\n  // Bigger discs are nearer lamps, so they also drift faster.\n  params.size[i] = 0.65 + Math.random() * 0.75;\n  const pick = Math.random();\n  if (pick \u003c 0.62) {\n    params.off[i] = (Math.random() - 0.5) * 0.07;\n    params.sat[i] = 0.82 + Math.random() * 0.18;\n  } else if (pick \u003c 0.8) {\n    // Pale lamps, nearly white.\n    params.off[i] = (Math.random() - 0.5) * 0.05;\n    params.sat[i] = 0.25 + Math.random() * 0.25;\n  } else if (pick \u003c 0.92) {\n    // Tail lights, a step towards red.\n    params.off[i] = -0.07 - Math.random() * 0.03;\n    params.sat[i] = 0.95;\n  } else {\n    // The odd cool one across the wheel.\n    params.off[i] = 0.47 + Math.random() * 0.08;\n    params.sat[i] = 0.75;\n  }\n  params.bright[i] = 0.65 + Math.random() * 0.35;\n  params.life[i] = 1.8 + Math.random() * 1.6;\n  params.age[i] = 0;\n  params.jx[i] = (Math.random() - 0.5) * 2;\n  params.jy[i] = (Math.random() - 0.5) * 2;\n  params.on[i] = 1;\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(N);\n  params.y = new Float32Array(N);\n  params.size = new Float32Array(N);\n  params.off = new Float32Array(N);\n  params.sat = new Float32Array(N);\n  params.bright = new Float32Array(N);\n  params.life = new Float32Array(N);\n  params.age = new Float32Array(N);\n  params.jx = new Float32Array(N);\n  params.jy = new Float32Array(N);\n  params.on = new Uint8Array(N);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.t = 0;\n  params.rack = 0;\n  params.started = false;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 40];\n  params.hue = k[0];\n  const pace = Math.max(0.05, k[1]);\n  params.radius = 9 * Math.pow(1.6, k[2]);\n  const want = Math.min(N, Math.round(k[3] * Math.pow(9 / params.radius, 1.8)));\n  // A crowd dims each lamp a little, so the overlaps stay colours rather than a white wash.\n  params.crowd = Math.min(1, Math.pow(45 / k[3], 0.6));\n  dt = Math.min(dt, 0.1);\n  const step = dt * pace;\n  params.t += step;\n\n  if (!params.started) {\n    // The first frame finds each lamp somewhere in its life, so they never bloom together.\n    for (let i = 0; i \u003c want; i++) {\n      spawn(params, i);\n      params.age[i] = Math.random() * params.life[i];\n    }\n    params.started = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) params.rack = 1;\n  params.rack = Math.max(0, params.rack - dt * 0.9);\n\n  // The whole view pans slowly, the way a car window passes a street.\n  const t = params.t;\n  const ang = 0.6 * Math.sin(t * 0.11) + 0.3 * Math.sin(t * 0.23 + 2);\n  const sp = 9;\n  const dx = Math.cos(ang) * sp;\n  const dy = Math.sin(ang) * sp * 0.6;\n  for (let i = 0; i \u003c N; i++) {\n    if (!params.on[i]) {\n      if (i \u003c want) {\n        spawn(params, i);\n        // A lamp that K4 adds waits a moment, so a quick turn does not light a crowd at once.\n        params.age[i] = -Math.random() * 1.5;\n      }\n      continue;\n    }\n    params.age[i] += step;\n    if (params.age[i] >= params.life[i]) {\n      if (i \u003c want) spawn(params, i);\n      else params.on[i] = 0;\n      continue;\n    }\n    const s = params.size[i];\n    params.x[i] += (dx * s + params.jx[i]) * step;\n    params.y[i] += (dy * s + params.jy[i]) * step;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  buf.fill(0);\n  const col = params.col;\n  // Racking focus: the discs close to points and open again, brighter as they shrink.\n  const r0 = params.rack > 0 ? Math.sin(params.rack * Math.PI) : 0;\n  const focus = 1 - 0.8 * r0;\n  const gain = Math.min(4, 1 / (focus * focus));\n  // A six-bladed iris, turned a little off square.\n  const ic = Math.cos(0.3);\n  const is = Math.sin(0.3);\n  for (let i = 0; i \u003c N; i++) {\n    if (!params.on[i]) continue;\n    const u = params.age[i] / params.life[i];\n    const env = smooth(0, 0.2, u) * (1 - smooth(0.45, 1, u));\n    if (env \u003c= 0.01) continue;\n    const r = params.radius * params.size[i] * (0.6 + 0.4 * smooth(0, 0.35, u) + 0.1 * smooth(0.5, 1, u)) * focus;\n    hsvInto(col, params.hue + 0.075 + params.off[i], params.sat[i], 1);\n    const level = params.bright[i] * env * gain * params.crowd;\n    const cr = col[0] * level;\n    const cg = col[1] * level;\n    const cb = col[2] * level;\n    const cx = params.x[i];\n    const cy = params.y[i];\n    // Soft edge never narrower than four and a half LEDs.\n    const e = Math.max(0.3, 4.5 / r);\n    const e0 = 1 - e * 0.5;\n    const e1 = 1 + e * 0.5;\n    // Near the panel's edge the lens barrel clips the disc into a cat's eye,\n    // measured against the long side so the corners clip as much as before.\n    const vx = ((cx - W / 2) / (H / 2)) * 0.45 * r;\n    const vy = ((cy - H / 2) / (H / 2)) * 0.45 * r;\n    const reach = r * e1 * 1.12 + 1;\n    const x0 = Math.max(0, Math.floor(cx - reach));\n    const x1 = Math.min(W - 1, Math.ceil(cx + reach));\n    const y0 = Math.max(0, Math.floor(cy - reach));\n    const y1 = Math.min(H - 1, Math.ceil(cy + reach));\n    const inv = 1 / r;\n    const vinv = 1 / (r * 1.12);\n    for (let y = y0; y \u003c= y1; y++) {\n      const py = y - cy;\n      for (let x = x0; x \u003c= x1; x++) {\n        const px = x - cx;\n        const round = Math.sqrt(px * px + py * py) * inv;\n        if (round > e1 * 1.2) continue;\n        const ax = Math.abs(px * ic - py * is);\n        const ay = Math.abs(px * is + py * ic);\n        const hex = Math.max(ay, ax * 0.866 + ay * 0.5) * inv * 1.05;\n        let d = round * 0.6 + hex * 0.4;\n        const qx = px + vx;\n        const qy = py + vy;\n        const clip = Math.sqrt(qx * qx + qy * qy) * vinv;\n        if (clip > d) d = clip;\n        if (d >= e1) continue;\n        // Brighter towards the rim, the way a lens draws an out-of-focus light.\n        const v = (1 - smooth(e0, e1, d)) * (0.64 + 0.36 * smooth(0.15, e0, d));\n        const o = (y * W + x) * 3;\n        buf[o] += cr * v;\n        buf[o + 1] += cg * v;\n        buf[o + 2] += cb * v;\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[o]), knee(buf[o + 1]), knee(buf[o + 2]));\n    }\n  }\n}\n\n// Overlaps add up, and past 160 the light rolls off instead of clipping flat.\nfunction knee(c) {\n  if (c \u003c 160) return c;\n  return 160 + 95 * (1 - Math.exp(-(c - 160) / 95));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Pace=0.2..4, Size=-1..1, Lights=40..90","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the lights round the colour wheel, starting from sodium amber with a few red and blue ones among them."},{"name":"Pace","min":0.2,"max":4,"about":"How fast the lights drift past and how quickly each one blooms and goes out."},{"name":"Size","min":-1,"max":1,"about":"How far out of focus they are, from small bright points to wide soft discs."},{"name":"Lights","min":40,"max":90,"about":"How many are lit at once; big discs come in fewer."}],"start":[0,2,0,40],"measures":{"motion":0.9868,"detail":0.0384,"edges":0.1836,"complexity":1.7001,"coverage":0.5358,"colour":0.318,"drift":0.3822},"knobResponse":[0.2498,0.2782,0.2491,0.2757]},{"slug":"bowling-lane","title":"Bowling Lane","family":"sport","round":22,"note":"볼러 뒤에서 본 10핀 레인이에요. 공이 오일 위로 제 반사를 끌며 휘어 올라가 핀을 흩고, 스위프 바가 데드우드를 쓸어 낸 뒤 핀이 다시 서요. 처음에는 블랙라이트 아래 핀과 화살표, 오일이 빛나고, K4 를 올리면 나무 레인에 하우스 조명이 켜져요.","idea":"A ten-pin lane seen from behind the bowler, foul line to pinsetter, where a hooking ball rolls up through the oil over its reflection, scatters the pins and the sweep clears them for the next rack, under house lights or blacklight.","buttons":"K1 tap throws the next ball now.","code":"// ===== Patternflow pattern =====\n// Title:   Bowling Lane\n// Family:  sport\n// Idea:    A ten-pin lane seen from behind the bowler, foul line to pinsetter, where a hooking ball rolls up through the oil over its reflection, scatters the pins and the sweep clears them for the next rack, under house lights or blacklight.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after cosmic bowling on ten-pin lanes with ball-tracking lane lights\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Ball=0..1, Speed=0.2..3, Hook=0..1, Lights=0..1\n//\n// Knob 1: Ball. The colour of the ball, which the lane lights and the projected trail follow: cyan at 0, round through blue, pink, red, orange and green.\n// Knob 2: Speed. How fast everything goes: at 2 the ball takes about 2.5 s from the foul line to the pins.\n// Knob 3: Hook. How far the oil runs and how much the ball curves: at 0 the oil runs 46 ft and a straight ball hits the head pin on the nose and leaves pins. Near 0.6 it hooks into the pocket and strikes; at 1 the oil stops at 30 ft and it crosses to the Brooklyn side.\n// Knob 4: Lights. Cosmic bowling at 0, the pins, arrows and oil glowing under blacklight, up to the full house lights on the wood at 1.\n// Buttons: K1 tap throws the next ball now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, sign, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = (((h % 1) + 1) % 1) * 6;\n  const k = (n) => v * (1 - s * cl(min((n + h) % 6, 4 - ((n + h) % 6)), 0, 1));\n  return [k(5), k(3), k(1)];\n}\n\n// d is feet past the foul line, x inches from the middle board. The lane\n// narrows in perspective; the pin deck is drawn nearer, 4.7 rows a foot.\nconst Z0 = 255.8;\nconst sc = (d) => 246.6 / (d + Z0);\nconst RD = 4.7;\nconst D0 = -16;\nconst NT = 1312;\nconst YT = new Float32Array(NT + 1);\n{\n  const ramp = (d) => sm(57, 59.5, d);\n  let i1 = 0;\n  let i2 = 0;\n  for (let k = 0; k \u003c 960; k++) {\n    const d = (k + 0.5) / 16;\n    i1 += (1 - ramp(d)) / (d + Z0) ** 2 / 16;\n    i2 += ramp(d) / 16;\n  }\n  // Foul line on row 106, head pin on row 36.\n  const G = (70 - RD * i2) / i1;\n  const rate = (d) => (G / (d + Z0) ** 2) * (1 - ramp(d)) + RD * ramp(d);\n  YT[1216] = 36;\n  for (let i = 1216; i \u003c NT; i++) YT[i + 1] = YT[i] - rate(D0 + (i + 0.5) / 16) / 16;\n  for (let i = 1216; i > 0; i--) YT[i - 1] = YT[i] + rate(D0 + (i - 0.5) / 16) / 16;\n}\nconst rowOf = (d) => {\n  const f = cl((d - D0) * 16, 0, NT - 0.001);\n  const i = f | 0;\n  return YT[i] + (YT[i + 1] - YT[i]) * (f - i);\n};\nconst DR = new Float32Array(H);\nfor (let y = 0, i = NT; y \u003c H; y++) {\n  while (i > 0 && YT[i] \u003c y) i--;\n  DR[y] = i >= NT ? 66 : D0 + (i + (YT[i] - y) / (YT[i] - YT[i + 1])) / 16;\n}\n// The pit edge and the row under the masking unit.\nconst PIT = round(rowOf(62.85));\nconst MB = 11;\nconst proj = (x, d, h) => {\n  const s = sc(d);\n  return [CX + x * s, rowOf(d) - h * 0.85 * s, s];\n};\nconst SPOT = [];\nfor (let r = 0; r \u003c 4; r++) for (let i = 0; i \u003c= r; i++) SPOT.push([(i - r / 2) * 12, r * 10.392]);\nconst bx = (b) => 20.75 - (b - 0.5) * 1.064;\nconst DOTS = [3, 5, 8, 11, 14, 26, 29, 32, 35, 37];\n// Pin radius in inches, base to crown.\nconst PROF = [1.0, 1.7, 2.38, 2.15, 1.6, 1.0, 0.92, 1.2, 1.15, 0.6];\nconst HOLES = [[-0.3, 0.5, 0.81], [0.3, 0.5, 0.81], [0, -0.4, 0.92]];\n// Maple approach, maple heads, pine, maple pin deck.\nconst WOOD = [[234, 178, 112], [228, 168, 100], [212, 134, 68], [238, 188, 124]];\nconst OILC = [0.4, 0.7, 1.4];\nconst SEG = [0.45, 0.55, 0.8, 0.6, 0.6, 0.45];\n\n// The still picture: house light colour A, blacklight glow F, wash share WM.\nfunction paint(P) {\n  const A = (P.A = new Float32Array(N * 3)), F = (P.F = new Float32Array(N * 3)), WM = (P.WM = new Float32Array(N));\n  const put = (x, y, a, f, wm = WM[y * W + x]) => {\n    if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n    const o = (y * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) {\n      A[o + c] = a[c];\n      F[o + c] = f[c];\n    }\n    WM[y * W + x] = wm;\n  };\n  for (let y = MB; y \u003c H; y++) {\n    const d = DR[y], s = sc(d);\n    const lit = d \u003c 57 ? 0.9 + 0.08 * cos((2 * PI * (d + 3)) / 15) : 1.12;\n    const oil = sm(44, 36, d) * (d > 0 ? 1 : 0);\n    for (let x = 0; x \u003c W; x++) {\n      const X = (x - CX) / s, ax = abs(X);\n      if (y \u003c PIT || (d > 57 && ax > 30.5)) {\n        // Kickbacks and the pit curtain.\n        const k = (x * 2 + y) % 11;\n        if (ax > 30.5) put(x, y, k \u003c 2 ? [70, 70, 80] : [28, 28, 34], k \u003c 1 ? [200, 30, 150] : k \u003c 2 ? [60, 20, 140] : [14, 6, 34], 0);\n        else put(x, y, [10, 10, 12], [6, 3, 16], 0);\n      } else if (ax \u003c= 20.75 || ax > 43.75 || (d \u003c 0 && (ax \u003c= 30 || ax > 34.5))) {\n        const far = ax > 43.75, lx = far ? ax - 64.5 : X, a = [0, 0, 0];\n        let tone = 0;\n        for (const e of [-0.25, 0.25]) {\n          const k = floor((20.75 - lx - e / s) / 1.064);\n          const kind = d \u003c 0 ? 0 : d \u003c 15.2 + (k & 3) * 0.7 ? 1 : d \u003c 56 + (k % 3) * 0.6 ? 2 : 3;\n          const t = 0.88 + 0.14 * hash(k + 40, kind) + 0.06 * (hash(k + 40, floor(d * 2.5) + 99) - 0.5);\n          for (let c = 0; c \u003c 3; c++) a[c] += WOOD[kind][c] * t * (far ? 0.7 : 1) * lit * 0.5;\n          tone += t / 2;\n        }\n        // Ceiling lights mirrored in the oil.\n        const glare = far ? 0 : 70 * oil * (exp(-(((X - 9) / 3.5) ** 2)) + exp(-(((X + 9) / 3.5) ** 2))) * (0.5 + 0.5 * cos((2 * PI * d) / 15)) ** 2;\n        const u = (far ? 0.7 : 1) * (d \u003c 0 ? 0.8 : 1) * tone;\n        let f = [22 * u, 8 * u, 46 * u];\n        if (!far && d > 2 && d \u003c 55 && hash(x, y * 7 + 3) \u003c 0.014) f = hsv(hash(y, x), 0.7, 180);\n        put(x, y, a.map((v) => v + glare), f, far ? 0.4 : 1);\n      } else if (ax \u003c= 30 || ax > 34.5) {\n        const g = ((ax \u003c= 30 ? ax - 25.375 : ax - 39.125) / 4.625) ** 2, v = (0.4 + 0.6 * g) * lit;\n        put(x, y, [70 * v, 72 * v, 84 * v], g > 0.75 ? [30, 12, 80] : [8, 4, 22], 0.5);\n      } else put(x, y, [50 * lit, 38 * lit, 32 * lit], [10, 5, 20], 0);\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    const ax = abs((x - CX) / sc(0));\n    if (ax \u003c= 30 || ax > 34.5) put(x, round(rowOf(0)), [16, 16, 18], [255, 30, 90]);\n  }\n  // Foul line, arrows, dots, range finders and pin spots.\n  for (let b = 5; b \u003c= 35; b += 5) {\n    const dt = 16 - abs(20 - b) * 0.267, ty = round(rowOf(dt)), ax = round(CX + bx(b) * sc(dt));\n    for (let j = 0; j \u003c 4; j++) for (let i = -(j >> 1); i \u003c= j >> 1; i++) put(ax + i, ty + j, [96, 34, 22], [255, 120, 24]);\n  }\n  for (const b of DOTS) put(round(CX + bx(b) * sc(7)), round(rowOf(7)), [96, 40, 26], [80, 255, 110]);\n  for (const b of [...DOTS, 20]) put(round(CX + bx(b) * sc(-12)), round(rowOf(-12)), [90, 50, 30], [70, 220, 100]);\n  for (let y = round(rowOf(40)); y \u003c= round(rowOf(34)); y++) for (const b of [10, 30]) put(round(CX + bx(b) * sc(DR[y])), y, [100, 46, 30], [40, 190, 255]);\n  for (const [X, Z] of SPOT) put(round(CX + X * sc(60 + Z / 12)), round(rowOf(60 + Z / 12)), [70, 46, 30], [60, 40, 130]);\n}\n\nconst rack = (h) => SPOT.map(([X, Z]) => ({ X, Z, vx: 0, vz: 0, th: 0, om: 0, ph: 0, w: 0, h, vh: 0, st: h ? 4 : 0 }));\n\nexport function setup(params) {\n  paint(params);\n  Object.assign(params, {\n    buf: new Float32Array(N * 3),\n    tx: new Float32Array(H),\n    tt: new Float32Array(H).fill(-99),\n    t: 0, ph: 0, tm: 1.5, first: true, ball: 1, full: true, fl: 0, mark: 0, seg: -1, pins: rack(0), B: null,\n    ra: 0, ax: [-1, 0, 0], hs: 46, zs: -9, pt: 0, path: [0, 0, 0, 0, 40], bd: -13, bh: 0, bt: 0,\n    m: 1, hook: 0, oil: 46, Hh: 0.1, U: 1, c1: [0, 1, 1], c2: [0, 0, 1],\n  });\n}\n\nconst pathX = (P, d) => {\n  const [x0, xb, sb, a, db] = P.path;\n  return d \u003c db ? x0 + sb * d : xb + sb * (d - db) - (a * (d - db) ** 2) / 2;\n};\nconst pathS = (P, d) => (d \u003c P.path[4] ? P.path[2] : P.path[2] - P.path[3] * (d - P.path[4]));\n\n// Out toward the gutter until the oil thins, then the hook back. A spare ball\n// moves the whole line onto the standing pins.\nfunction throwBall(P) {\n  const h = P.hook, db = P.oil - 6, e = 60 - db;\n  let x60 = (h \u003c 0.55 ? 0.4 + (2.3 * h) / 0.55 : 2.7 - (4.7 * (h - 0.55)) / 0.45) + (rnd() - 0.5) * 1.6;\n  let x0 = 12 - 24 * h;\n  const xs = x0 + ((x60 - x0) * db) / 60;\n  let xb = xs + (16 - xs) * min(1, h * 1.4);\n  const line = () => {\n    const sb = (xb - x0) / db;\n    return [sb, ((xb + e * sb - x60) * 2) / (e * e)];\n  };\n  const up = P.pins.filter((p) => p.st === 0);\n  if (P.ball === 2 && up.length) {\n    const z = min(...up.map((p) => p.Z)), front = up.filter((p) => p.Z \u003c z + 11), [sb, a] = line();\n    const shift = front.reduce((s, p) => s + p.X, 0) / front.length - x60 - ((sb - a * e) * z) / 12 + (rnd() - 0.5) * 2;\n    x0 += shift;\n    xb += shift;\n    x60 += shift;\n  }\n  x0 = cl(x0, -17, 17);\n  xb = cl(xb, -17, 17);\n  P.path = [x0, xb, ...line(), db];\n  Object.assign(P, { ph: 1, bt: 0, bd: -13, ra: 0 });\n  const b = 0.9 * h;\n  const k = [-cos(b), 0.3 * sin(b), sin(b)];\n  P.ax = k.map((v) => v / hypot(...k));\n}\n\n// The swing brings the ball in from below the panel, then it rolls.\nfunction roll(P, h) {\n  P.bt += h;\n  const y0 = rowOf(P.bd), v = 25 - 0.07 * P.bd;\n  if (P.bt \u003c 0.45) {\n    P.bd = -13 + 30 * P.bt;\n    P.bh = 10 * (1 - P.bt / 0.45) ** 2;\n  } else {\n    P.bd += v * h;\n    P.bh = 0;\n    P.ra += v * 0.36 * h;\n  }\n  const d = P.bd, x = CX + pathX(P, max(0, d)) * sc(d);\n  for (let y = max(0, round(rowOf(d))); y \u003c= round(y0) && y \u003c H; y++) {\n    P.tx[y] = x;\n    P.tt[y] = P.t;\n  }\n  if (d >= 58.6) {\n    P.B = { X: pathX(P, d), Z: (d - 60) * 12, vx: pathS(P, d) * v, vz: 12 * v, h: 0, vh: 0, st: -1 };\n    P.ph = 2;\n    P.pt = 0;\n  }\n}\n\nfunction pts(p) {\n  if (p.th \u003c 0.35) return [[p.X, p.Z, 0.5]];\n  const L = 15 * sin(p.th);\n  return [0.12, 0.5, 0.88].map((f) => [p.X + cos(p.ph) * L * f, p.Z + sin(p.ph) * L * f, f]);\n}\n\nfunction kick(p, dvx, dvz, f) {\n  p.vx += dvx;\n  p.vz += dvz;\n  if (p.st \u003c 0) return;\n  const dv = sqrt(dvx * dvx + dvz * dvz);\n  if (p.st === 0) {\n    if (p.th \u003c 0.05) p.ph = atan2(dvz, dvx);\n    p.om += dv / 7;\n    if (dv > 130) Object.assign(p, { vh: dv * 0.28, om: dv / 7 + 5, st: 1, th: max(p.th, 0.05) });\n  } else p.w += (15 * sin(p.th) * (f - 0.5) * (cos(p.ph) * dvz - sin(p.ph) * dvx)) / 70;\n}\n\n// Ball and pins are discs on the deck; pins rock, topple past 11 degrees, fly\n// when hit hard and spin off the kickbacks.\nfunction collide(P) {\n  const bodies = [];\n  if (P.B && P.B.h > -3) bodies.push([P.B, 15, 4.3, [[P.B.X, P.B.Z, 0.5]]]);\n  for (const p of P.pins) if (p.st \u003c 2 && p.h \u003c 14) bodies.push([p, 3.5, 2.4, pts(p)]);\n  for (let i = 0; i \u003c bodies.length; i++) {\n    const [a, ma, ra, pa] = bodies[i];\n    for (const [qx] of pa) {\n      const sg = sign(qx), lim = 30.5 - ra;\n      if (abs(qx) > lim) {\n        a.X -= qx - sg * lim;\n        if (a.vx * sg > 0) a.vx *= -0.5;\n      }\n    }\n    for (let j = i + 1; j \u003c bodies.length; j++) {\n      const [b, mb, rb, pb] = bodies[j];\n      const R = ra + rb, ia = 1 / ma, ib = 1 / mb;\n      for (const qa of pa)\n        for (const qb of pb) {\n          const dx = qb[0] - qa[0], dz = qb[1] - qa[1], dd = dx * dx + dz * dz;\n          if (dd >= R * R || dd \u003c 1e-6) continue;\n          const D = sqrt(dd), nx = dx / D, nz = dz / D, pen = (R - D) / (ia + ib);\n          a.X -= nx * pen * ia;\n          a.Z -= nz * pen * ia;\n          b.X += nx * pen * ib;\n          b.Z += nz * pen * ib;\n          const vn = (b.vx - a.vx) * nx + (b.vz - a.vz) * nz;\n          if (vn >= 0) continue;\n          const J = (-1.5 * vn) / (ia + ib);\n          kick(a, -J * nx * ia, -J * nz * ia, qa[2]);\n          kick(b, J * nx * ib, J * nz * ib, qb[2]);\n        }\n    }\n  }\n}\n\nfunction move(P, dt) {\n  const B = P.B;\n  if (B) {\n    B.X += B.vx * dt;\n    B.Z += B.vz * dt;\n    P.ra += B.vz * 0.03 * dt;\n    if (B.Z > 34.2) {\n      B.vh -= 386 * dt;\n      B.h += B.vh * dt;\n      if (B.Z > 44) B.vz = 0;\n    }\n  }\n  for (const p of P.pins) {\n    if (p.st >= 3) continue;\n    if (p.st === 2 || p.h > 0 || p.vh > 0) {\n      p.vh -= 386 * dt;\n      p.h += p.vh * dt;\n      p.th += p.om * dt;\n      if (p.st === 2) {\n        if (p.Z > 46) p.vz = 0;\n        if (p.h \u003c -40) p.st = 3;\n      } else if (p.h \u003c= 0) {\n        if (sin(p.th) \u003c 0) p.ph += PI;\n        Object.assign(p, { h: 0, vh: p.vh \u003c -80 ? -p.vh * 0.3 : 0, th: PI / 2, om: 0, st: 1 });\n      }\n    } else if (p.st === 0) {\n      if (p.th > 0 || p.om > 0) {\n        p.om += 60 * sin(p.th - 0.2) * dt;\n        p.th += p.om * dt;\n        if (p.th \u003c 0) {\n          p.th = -p.th;\n          p.om *= -0.4;\n          p.ph += PI;\n          if (abs(p.om) \u003c 0.3) p.th = p.om = 0;\n        }\n        if (p.th > 0.2) p.st = 1;\n      }\n    } else if (p.th \u003c PI / 2) {\n      p.om += 64 * sin(p.th) * dt;\n      p.th += p.om * dt;\n      if (p.th >= PI / 2) {\n        p.th = PI / 2;\n        p.om = 0;\n      }\n    }\n    if (p.st \u003c 2 && p.h \u003c= 0) {\n      const v = hypot(p.vx, p.vz), dec = (p.st ? 110 : 400) * dt, k = v > dec ? (v - dec) / v : 0;\n      p.vx *= k;\n      p.vz *= k;\n      p.w *= exp(-2.5 * dt);\n    }\n    p.X += p.vx * dt;\n    p.Z += p.vz * dt;\n    p.ph += p.w * dt;\n    if (p.st \u003c 2 && p.h \u003c 8 && p.Z + 7.5 * sin(p.th) * sin(p.ph) > 34.2) p.st = 2;\n  }\n}\n\nfunction physics(P, h) {\n  for (let s = 0, n = ceil(h / 0.004); s \u003c n; s++) {\n    move(P, h / n);\n    collide(P);\n  }\n}\n\nfunction endPins(P) {\n  const up = P.pins.filter((p) => p.st === 0).length;\n  if (!up) {\n    P.fl = P.ball === 1 ? 1 : 0.8;\n    P.mark = P.ball;\n  }\n  Object.assign(P, { full: !up || P.ball === 2, ph: 3, tm: 0, seg: -1, B: null });\n}\n\n// Sweep drops, table lifts standing pins, sweep rakes the deadwood into the\n// pit and returns, table sets the pins or a new rack, sweep lifts.\nfunction sweep(P, h) {\n  let u = (P.tm += h), k = 0;\n  while (k \u003c 6 && u > SEG[k]) u -= SEG[k++];\n  if (k >= 6) return Object.assign(P, { ph: 0, tm: 0.7, ball: P.full ? 1 : 2, hs: 46 });\n  const e = sm(0, 1, u / SEG[k]);\n  if (k !== P.seg) {\n    P.seg = k;\n    if (k === 4 && P.full) P.pins = rack(46);\n    if (k === 5) for (const p of P.pins) if (p.st === 4) p.st = p.h = 0;\n  }\n  if (k === 0) P.hs = 46 - 45 * e;\n  else if (k === 1) {\n    if (!P.full) for (const p of P.pins) if (p.st === 0 || p.st === 4) Object.assign(p, { st: 4, h: 46 * e, th: 0, om: 0, vx: 0, vz: 0 });\n  } else if (k === 2) {\n    P.zs = -9 + 47 * e;\n    for (const p of P.pins)\n      if (p.st \u003c 2 && p.h \u003c 12 && p.Z \u003c P.zs + 3) {\n        p.Z = P.zs + 3;\n        p.vz = max(p.vz, 0);\n        if (p.st === 0) Object.assign(p, { st: 1, th: 1.3, ph: PI / 2 });\n      }\n  } else if (k === 3) P.zs = 38 - 47 * e;\n  else if (k === 4) {\n    for (const p of P.pins) if (p.st === 4) p.h = 46 * (1 - e);\n  } else P.hs = 1 + 45 * e;\n}\n\nfunction throwNow(P) {\n  if (P.ph === 1) return;\n  if (P.ph >= 2) {\n    if (P.ph === 2) endPins(P);\n    P.pins = P.full ? rack(0) : P.pins.filter((p) => p.st === 0 || p.st === 4).map((p) => Object.assign(p, { st: 0, h: 0, th: 0, om: 0 }));\n    Object.assign(P, { ball: P.full ? 1 : 2, hs: 46, B: null });\n  }\n  throwBall(P);\n}\n\nfunction step(P, h) {\n  P.t += h;\n  P.fl = max(0, P.fl - h * 0.5);\n  let ph = h;\n  if (P.ph === 0) {\n    // The first ball goes at 1.5 s at any speed.\n    if ((P.tm -= P.first ? h / P.m : h) \u003c= 0) {\n      P.first = false;\n      throwBall(P);\n    }\n  } else if (P.ph === 1) roll(P, h);\n  else if (P.ph === 2) {\n    // Pin action in slow motion at first.\n    ph = h * (0.45 + 0.55 * sm(0.5, 1, P.pt));\n    P.pt += ph;\n    if (P.pt > 1.6) endPins(P);\n  } else sweep(P, h);\n  physics(P, ph);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.c1 = hsv(0.52 + k[0], 0.9, 1);\n  P.c2 = hsv(0.66 + k[0], 0.7, 1);\n  P.m = cl(k[1], 0.2, 3) / 2;\n  P.hook = cl(k[2], 0, 1);\n  P.oil = 46 - 16 * P.hook;\n  const L = cl(k[3], 0, 1);\n  P.Hh = 0.1 + 0.9 * L * L;\n  P.U = 1 - L;\n  if (input.btnPressed && input.btnPressed[0]) throwNow(P);\n  step(P, cl(dt, 0, 0.1) * P.m);\n}\n\nfunction add(buf, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) buf[o + i] += c[i] * v;\n}\nfunction blend(buf, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n  const o = (y * W + x) * 3;\n  [r, g, b].forEach((v, i) => (buf[o + i] += (v - buf[o + i]) * a));\n}\n\n// Capping lights that chase, follow the ball and light the gutters, and the\n// projected trail.\nfunction lights(P) {\n  const { buf, c1, t, U, fl, tx, tt } = P;\n  const db = P.ph === 1 ? P.bd : P.ph === 2 ? 70 : -99;\n  for (let y = round(rowOf(57)); y \u003c H; y++) {\n    const d = DR[y], s = sc(d);\n    let v = 0.16 + 0.34 * max(0, sin(2 * PI * (d / 9 - t * 0.55))) ** 6;\n    if (db > -50) v += d \u003c db ? 0.9 * exp((d - db) / 7) : exp(-(d - db) * 1.5);\n    v = (v + fl * (0.5 + 0.5 * sin(d * 0.7 - t * 14))) * 200 * (0.45 + 0.55 * U);\n    for (const sg of [-1, 1]) {\n      const xs = CX + sg * 32.25 * s, x = floor(xs), f = xs - x;\n      [0.2, 1 - f * 0.8, 0.2 + f * 0.8, 0.2].forEach((k, i) => add(buf, x + i - 1, y, c1, v * k));\n      if (d > 0) for (let X = 21; X \u003c 30; X += 1 / s) add(buf, round(CX + sg * X * s), y, c1, v * 0.4 * ((X - 20.75) / 9.25) ** 1.5);\n    }\n    const age = t - tt[y];\n    if (age \u003c 4) {\n      const I = min(1, age * 8) * exp(-age / 1.2) * 140 * U, w = 4.3 * s + 0.8;\n      for (let x = max(0, floor(tx[y] - w)); x \u003c= min(W - 1, tx[y] + w); x++) {\n        const f = 1 - ((x - tx[y]) / w) ** 2;\n        if (f > 0) add(buf, x, y, c1, I * f);\n      }\n    }\n  }\n}\n\n// Marbled shell and holes turning with the roll.\nfunction drawBall(P, cx, cy, r, alpha, mirror, clip) {\n  const { buf, c1, c2, Hh, U } = P;\n  const [k0, k1, k2] = P.ax, ca = cos(P.ra), sa = sin(P.ra);\n  for (let y = floor(cy - r - 1); y \u003c= cy + r + 1 && y \u003c clip; y++)\n    for (let x = floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n      const u = (x - cx) / r, v = (y - cy) / r, q = u * u + v * v;\n      const cov = cl((1 - sqrt(q)) * r + 0.5, 0, 1);\n      if (cov \u003c= 0) continue;\n      const nz = sqrt(max(0, 1 - q)), ny = mirror ? v : -v;\n      const kd = (k0 * u + k1 * ny + k2 * nz) * (1 - ca);\n      const X = u * ca + (k1 * nz - k2 * ny) * sa + k0 * kd;\n      const Y = ny * ca + (k2 * u - k0 * nz) * sa + k1 * kd;\n      const Z = nz * ca + (k0 * ny - k1 * u) * sa + k2 * kd;\n      const sw = (0.5 + 0.5 * sin(3.2 * X + 2.4 * sin(2.6 * Y + 1.8 * Z) + 2 * Z * X)) ** 2;\n      let hole = 1;\n      for (const [hx, hy, hz] of HOLES) if (hx * X + hy * Y + hz * Z > 0.972) hole = 0.12;\n      const lit = (0.25 + 0.75 * max(0, -0.35 * u + 0.6 * ny + 0.72 * nz)) * Hh * 1.15 + U * (0.45 + 0.6 * nz);\n      const sp = mirror ? 0 : 230 * Hh * max(0, -0.2 * u + 0.5 * ny + 0.84 * nz) ** 24;\n      const col = [0, 1, 2].map((c) => (c1[c] * (1 - sw) * 0.9 + c2[c] * sw) * 255 * lit * hole + sp);\n      blend(buf, x, y, col[0], col[1], col[2], cov * (mirror ? alpha * max(0, 1 - (y - cy + r) / (2 * r)) : alpha));\n    }\n}\n\n// A pin's profile swept from base to crown, tilted by th toward ph.\nfunction drawPin(P, p) {\n  const { buf, Hh, U } = P;\n  const [x0, y0, s] = proj(p.X, 60 + p.Z / 12, p.h - (abs(p.X) > 21 && p.st === 1 ? 2.5 : 0));\n  const hx = cos(p.ph) * 15 * sin(p.th) * s;\n  const hy = (-sin(p.ph) * 15 * sin(p.th) * RD) / 12 - 15 * cos(p.th) * 0.85 * s;\n  const L2 = hx * hx + hy * hy, clip = p.Z > 34.2 ? PIT : H;\n  for (let y = floor(min(y0, y0 + hy) - 3); y \u003c= max(y0, y0 + hy) + 3 && y \u003c clip; y++)\n    for (let x = floor(min(x0, x0 + hx) - 3); x \u003c= max(x0, x0 + hx) + 3; x++) {\n      const px = x - x0, py = y - y0;\n      const t = L2 > 0.01 ? cl((px * hx + py * hy) / L2, 0, 1) : 0;\n      const ex = px - t * hx, ey = py - t * hy, f = t * 9, i = min(8, f | 0);\n      const rw = (PROF[i] + (PROF[i + 1] - PROF[i]) * (f - i)) * s;\n      const cov = cl(rw - sqrt(ex * ex + ey * ey) + 0.5, 0, 1);\n      if (cov \u003c= 0) continue;\n      const lit = (0.82 - (0.18 * ex) / (rw + 0.3)) * Hh;\n      if (t > 0.6 && t \u003c 0.73) blend(buf, x, y, 215 * Hh + 255 * U, 30 * Hh + 40 * U, 40 * Hh + 150 * U, cov);\n      else blend(buf, x, y, 240 * lit + 180 * U, 240 * lit + 192 * U, 234 * lit + 255 * U, cov);\n    }\n}\n\nfunction drawSweep(P) {\n  const { buf, Hh, U, hs, zs } = P;\n  const [xl, yb, s] = proj(-31, 60 + zs / 12, hs);\n  const th = 3.4 * s;\n  for (let y = floor(yb - th); y \u003c= yb; y++)\n    for (let x = round(xl); x \u003c= round(2 * CX - xl); x++) {\n      const top = y \u003c yb - th + 1 ? 60 : 0;\n      const hz = ((x + 64) >> 1) % 3 === 0;\n      blend(buf, x, y, (140 + top) * Hh + (hz ? 255 : 40) * U, (142 + top) * Hh + (hz ? 210 : 20) * U, (152 + top) * Hh + (hz ? 40 : 70) * U, 1);\n    }\n  for (const x of [round(CX - 29.5 * s), round(CX + 29.5 * s)]) for (let y = MB; y \u003c yb - th; y++) blend(buf, x, y, 80 * Hh + 50 * U, 80 * Hh + 30 * U, 92 * Hh + 120 * U, 1);\n}\n\n// The masking unit, with the blacklight tube along its lip.\nfunction hood(P) {\n  const { buf, Hh, U, c1, c2, fl, t } = P;\n  for (let y = 0; y \u003c MB; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, wy = 4.4 + 2.4 * sin(x * 0.11 + 0.8), b1 = max(0, 1 - abs(y - wy));\n      const b2 = max(0, 1 - abs(y - wy - 2.5) * 1.3) * sm(4, 14, x), pulse = 0.55 + 0.45 * sin(x * 0.35 - t * 5);\n      const tw = hash(x, y) \u003c 0.07 ? (0.5 + 0.5 * sin(t * 4 + hash(y, x) * 40)) * 150 * U : 0;\n      const fx = fl > 0 ? hsv(x / 40 - t * 2, 1, fl * 200) : [0, 0, 0];\n      for (let c = 0; c \u003c 3; c++)\n        buf[o + c] =\n          y === MB - 1\n            ? 150 * Hh + [110, 50, 255][c] * U\n            : [20, 30, 88][c] * Hh * (0.85 + y * 0.03) + [12, 4, 30][c] * U + b1 * ([190, 220, 255][c] * Hh + c1[c] * 255 * U * pulse) + b2 * ([255, 140, 40][c] * Hh + c2[c] * 230 * U) + tw + fx[c];\n    }\n  // X for a strike, a slash for a spare.\n  if (fl > 0.05)\n    for (let j = -3; j \u003c= 3; j++)\n      for (const i of P.mark === 1 ? [j, -j] : [-j]) {\n        const o = ((5 + j) * W + 32 + i) * 3;\n        for (let c = 0; c \u003c 3; c++) buf[o + c] = 255 * min(1, fl * 2);\n      }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, A, F, WM, Hh, U, c1 } = P;\n  // The lane lights wash the boards in slow waves; the oil glows.\n  for (let y = MB; y \u003c H; y++) {\n    const d = DR[y], s = sc(d), wave = 16 + 9 * sin(2 * PI * (d / 14 - P.t * 0.5));\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, wm = WM[i] * wave * U;\n      const ax = abs(x - CX) / s;\n      const oil = WM[i] === 1 && d > 0 ? sm(P.oil + 3, P.oil - 4, d + ax * 0.2) * (64 - ax * ax * 0.08) * U : 0;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = A[o + c] * Hh + F[o + c] * U + c1[c] * wm + oil * OILC[c];\n    }\n  }\n  lights(P);\n  let ball = null;\n  if (P.ph === 1) ball = [pathX(P, max(0, P.bd)), P.bd, P.bh, H];\n  else if (P.B && P.B.h > -14) ball = [P.B.X, 60 + P.B.Z / 12, P.B.h, P.B.Z > 34.2 ? PIT : H];\n  let bs = null;\n  if (ball) {\n    const [x, d, h, clip] = ball;\n    const [cx, cy, s] = proj(x, d, 4.3 + h), fy = rowOf(d), r = 4.3 * s, R = r * 3.4;\n    bs = [cx, cy, r, clip, d];\n    // Halo, shadow, reflection.\n    for (let y = floor(cy - R); y \u003c= cy + R && y \u003c clip; y++)\n      for (let x2 = floor(cx - R); x2 \u003c= cx + R; x2++) {\n        const q = 1 - hypot(x2 - cx, (y - cy) * 1.2) / R;\n        if (q > 0) add(buf, x2, y, c1, q * q * 110 * U);\n        const e = ((x2 - cx) / (r * 1.1)) ** 2 + ((y - fy) / (r * 0.45)) ** 2;\n        if (e \u003c 1 && clip === H && y >= MB && y \u003c H && x2 >= 0 && x2 \u003c W)\n          for (let c = 0; c \u003c 3; c++) buf[(y * W + x2) * 3 + c] *= 1 - 0.55 * Hh * (1 - e) * exp(-h / 6);\n      }\n    if (d > 0 && d \u003c P.oil + 2) drawBall(P, cx, 2 * fy - cy + h * 1.7 * s, r, 0.15 + 0.4 * sm(P.oil + 2, P.oil - 8, d), true, H);\n  }\n  // Deck objects far to near.\n  const items = P.pins.filter((p) => p.st \u003c 3).map((p) => [p.Z + (p.st === 1 ? 7 * sin(p.ph) : 0), p]);\n  if (P.hs \u003c 45) items.push([P.zs - 0.5, 0]);\n  if (bs && bs[4] > 57) items.push([(bs[4] - 60) * 12, 1]);\n  items.sort((a, b) => b[0] - a[0]);\n  for (const [, it] of items) {\n    if (it === 0) drawSweep(P);\n    else if (it === 1) drawBall(P, bs[0], bs[1], bs[2], 1, false, bs[3]);\n    else drawPin(P, it);\n  }\n  if (bs && bs[4] \u003c= 57) drawBall(P, bs[0], bs[1], bs[2], 1, false, bs[3]);\n  hood(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-bowling-lane","type":"code","name":"bowling-lane","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bowling Lane\n// Family:  sport\n// Idea:    A ten-pin lane seen from behind the bowler, foul line to pinsetter, where a hooking ball rolls up through the oil over its reflection, scatters the pins and the sweep clears them for the next rack, under house lights or blacklight.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after cosmic bowling on ten-pin lanes with ball-tracking lane lights\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Ball=0..1, Speed=0.2..3, Hook=0..1, Lights=0..1\n//\n// Knob 1: Ball. The colour of the ball, which the lane lights and the projected trail follow: cyan at 0, round through blue, pink, red, orange and green.\n// Knob 2: Speed. How fast everything goes: at 2 the ball takes about 2.5 s from the foul line to the pins.\n// Knob 3: Hook. How far the oil runs and how much the ball curves: at 0 the oil runs 46 ft and a straight ball hits the head pin on the nose and leaves pins. Near 0.6 it hooks into the pocket and strikes; at 1 the oil stops at 30 ft and it crosses to the Brooklyn side.\n// Knob 4: Lights. Cosmic bowling at 0, the pins, arrows and oil glowing under blacklight, up to the full house lights on the wood at 1.\n// Buttons: K1 tap throws the next ball now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, sign, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = (((h % 1) + 1) % 1) * 6;\n  const k = (n) => v * (1 - s * cl(min((n + h) % 6, 4 - ((n + h) % 6)), 0, 1));\n  return [k(5), k(3), k(1)];\n}\n\n// d is feet past the foul line, x inches from the middle board. The lane\n// narrows in perspective; the pin deck is drawn nearer, 4.7 rows a foot.\nconst Z0 = 255.8;\nconst sc = (d) => 246.6 / (d + Z0);\nconst RD = 4.7;\nconst D0 = -16;\nconst NT = 1312;\nconst YT = new Float32Array(NT + 1);\n{\n  const ramp = (d) => sm(57, 59.5, d);\n  let i1 = 0;\n  let i2 = 0;\n  for (let k = 0; k \u003c 960; k++) {\n    const d = (k + 0.5) / 16;\n    i1 += (1 - ramp(d)) / (d + Z0) ** 2 / 16;\n    i2 += ramp(d) / 16;\n  }\n  // Foul line on row 106, head pin on row 36.\n  const G = (70 - RD * i2) / i1;\n  const rate = (d) => (G / (d + Z0) ** 2) * (1 - ramp(d)) + RD * ramp(d);\n  YT[1216] = 36;\n  for (let i = 1216; i \u003c NT; i++) YT[i + 1] = YT[i] - rate(D0 + (i + 0.5) / 16) / 16;\n  for (let i = 1216; i > 0; i--) YT[i - 1] = YT[i] + rate(D0 + (i - 0.5) / 16) / 16;\n}\nconst rowOf = (d) => {\n  const f = cl((d - D0) * 16, 0, NT - 0.001);\n  const i = f | 0;\n  return YT[i] + (YT[i + 1] - YT[i]) * (f - i);\n};\nconst DR = new Float32Array(H);\nfor (let y = 0, i = NT; y \u003c H; y++) {\n  while (i > 0 && YT[i] \u003c y) i--;\n  DR[y] = i >= NT ? 66 : D0 + (i + (YT[i] - y) / (YT[i] - YT[i + 1])) / 16;\n}\n// The pit edge and the row under the masking unit.\nconst PIT = round(rowOf(62.85));\nconst MB = 11;\nconst proj = (x, d, h) => {\n  const s = sc(d);\n  return [CX + x * s, rowOf(d) - h * 0.85 * s, s];\n};\nconst SPOT = [];\nfor (let r = 0; r \u003c 4; r++) for (let i = 0; i \u003c= r; i++) SPOT.push([(i - r / 2) * 12, r * 10.392]);\nconst bx = (b) => 20.75 - (b - 0.5) * 1.064;\nconst DOTS = [3, 5, 8, 11, 14, 26, 29, 32, 35, 37];\n// Pin radius in inches, base to crown.\nconst PROF = [1.0, 1.7, 2.38, 2.15, 1.6, 1.0, 0.92, 1.2, 1.15, 0.6];\nconst HOLES = [[-0.3, 0.5, 0.81], [0.3, 0.5, 0.81], [0, -0.4, 0.92]];\n// Maple approach, maple heads, pine, maple pin deck.\nconst WOOD = [[234, 178, 112], [228, 168, 100], [212, 134, 68], [238, 188, 124]];\nconst OILC = [0.4, 0.7, 1.4];\nconst SEG = [0.45, 0.55, 0.8, 0.6, 0.6, 0.45];\n\n// The still picture: house light colour A, blacklight glow F, wash share WM.\nfunction paint(P) {\n  const A = (P.A = new Float32Array(N * 3)), F = (P.F = new Float32Array(N * 3)), WM = (P.WM = new Float32Array(N));\n  const put = (x, y, a, f, wm = WM[y * W + x]) => {\n    if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n    const o = (y * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) {\n      A[o + c] = a[c];\n      F[o + c] = f[c];\n    }\n    WM[y * W + x] = wm;\n  };\n  for (let y = MB; y \u003c H; y++) {\n    const d = DR[y], s = sc(d);\n    const lit = d \u003c 57 ? 0.9 + 0.08 * cos((2 * PI * (d + 3)) / 15) : 1.12;\n    const oil = sm(44, 36, d) * (d > 0 ? 1 : 0);\n    for (let x = 0; x \u003c W; x++) {\n      const X = (x - CX) / s, ax = abs(X);\n      if (y \u003c PIT || (d > 57 && ax > 30.5)) {\n        // Kickbacks and the pit curtain.\n        const k = (x * 2 + y) % 11;\n        if (ax > 30.5) put(x, y, k \u003c 2 ? [70, 70, 80] : [28, 28, 34], k \u003c 1 ? [200, 30, 150] : k \u003c 2 ? [60, 20, 140] : [14, 6, 34], 0);\n        else put(x, y, [10, 10, 12], [6, 3, 16], 0);\n      } else if (ax \u003c= 20.75 || ax > 43.75 || (d \u003c 0 && (ax \u003c= 30 || ax > 34.5))) {\n        const far = ax > 43.75, lx = far ? ax - 64.5 : X, a = [0, 0, 0];\n        let tone = 0;\n        for (const e of [-0.25, 0.25]) {\n          const k = floor((20.75 - lx - e / s) / 1.064);\n          const kind = d \u003c 0 ? 0 : d \u003c 15.2 + (k & 3) * 0.7 ? 1 : d \u003c 56 + (k % 3) * 0.6 ? 2 : 3;\n          const t = 0.88 + 0.14 * hash(k + 40, kind) + 0.06 * (hash(k + 40, floor(d * 2.5) + 99) - 0.5);\n          for (let c = 0; c \u003c 3; c++) a[c] += WOOD[kind][c] * t * (far ? 0.7 : 1) * lit * 0.5;\n          tone += t / 2;\n        }\n        // Ceiling lights mirrored in the oil.\n        const glare = far ? 0 : 70 * oil * (exp(-(((X - 9) / 3.5) ** 2)) + exp(-(((X + 9) / 3.5) ** 2))) * (0.5 + 0.5 * cos((2 * PI * d) / 15)) ** 2;\n        const u = (far ? 0.7 : 1) * (d \u003c 0 ? 0.8 : 1) * tone;\n        let f = [22 * u, 8 * u, 46 * u];\n        if (!far && d > 2 && d \u003c 55 && hash(x, y * 7 + 3) \u003c 0.014) f = hsv(hash(y, x), 0.7, 180);\n        put(x, y, a.map((v) => v + glare), f, far ? 0.4 : 1);\n      } else if (ax \u003c= 30 || ax > 34.5) {\n        const g = ((ax \u003c= 30 ? ax - 25.375 : ax - 39.125) / 4.625) ** 2, v = (0.4 + 0.6 * g) * lit;\n        put(x, y, [70 * v, 72 * v, 84 * v], g > 0.75 ? [30, 12, 80] : [8, 4, 22], 0.5);\n      } else put(x, y, [50 * lit, 38 * lit, 32 * lit], [10, 5, 20], 0);\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    const ax = abs((x - CX) / sc(0));\n    if (ax \u003c= 30 || ax > 34.5) put(x, round(rowOf(0)), [16, 16, 18], [255, 30, 90]);\n  }\n  // Foul line, arrows, dots, range finders and pin spots.\n  for (let b = 5; b \u003c= 35; b += 5) {\n    const dt = 16 - abs(20 - b) * 0.267, ty = round(rowOf(dt)), ax = round(CX + bx(b) * sc(dt));\n    for (let j = 0; j \u003c 4; j++) for (let i = -(j >> 1); i \u003c= j >> 1; i++) put(ax + i, ty + j, [96, 34, 22], [255, 120, 24]);\n  }\n  for (const b of DOTS) put(round(CX + bx(b) * sc(7)), round(rowOf(7)), [96, 40, 26], [80, 255, 110]);\n  for (const b of [...DOTS, 20]) put(round(CX + bx(b) * sc(-12)), round(rowOf(-12)), [90, 50, 30], [70, 220, 100]);\n  for (let y = round(rowOf(40)); y \u003c= round(rowOf(34)); y++) for (const b of [10, 30]) put(round(CX + bx(b) * sc(DR[y])), y, [100, 46, 30], [40, 190, 255]);\n  for (const [X, Z] of SPOT) put(round(CX + X * sc(60 + Z / 12)), round(rowOf(60 + Z / 12)), [70, 46, 30], [60, 40, 130]);\n}\n\nconst rack = (h) => SPOT.map(([X, Z]) => ({ X, Z, vx: 0, vz: 0, th: 0, om: 0, ph: 0, w: 0, h, vh: 0, st: h ? 4 : 0 }));\n\nexport function setup(params) {\n  paint(params);\n  Object.assign(params, {\n    buf: new Float32Array(N * 3),\n    tx: new Float32Array(H),\n    tt: new Float32Array(H).fill(-99),\n    t: 0, ph: 0, tm: 1.5, first: true, ball: 1, full: true, fl: 0, mark: 0, seg: -1, pins: rack(0), B: null,\n    ra: 0, ax: [-1, 0, 0], hs: 46, zs: -9, pt: 0, path: [0, 0, 0, 0, 40], bd: -13, bh: 0, bt: 0,\n    m: 1, hook: 0, oil: 46, Hh: 0.1, U: 1, c1: [0, 1, 1], c2: [0, 0, 1],\n  });\n}\n\nconst pathX = (P, d) => {\n  const [x0, xb, sb, a, db] = P.path;\n  return d \u003c db ? x0 + sb * d : xb + sb * (d - db) - (a * (d - db) ** 2) / 2;\n};\nconst pathS = (P, d) => (d \u003c P.path[4] ? P.path[2] : P.path[2] - P.path[3] * (d - P.path[4]));\n\n// Out toward the gutter until the oil thins, then the hook back. A spare ball\n// moves the whole line onto the standing pins.\nfunction throwBall(P) {\n  const h = P.hook, db = P.oil - 6, e = 60 - db;\n  let x60 = (h \u003c 0.55 ? 0.4 + (2.3 * h) / 0.55 : 2.7 - (4.7 * (h - 0.55)) / 0.45) + (rnd() - 0.5) * 1.6;\n  let x0 = 12 - 24 * h;\n  const xs = x0 + ((x60 - x0) * db) / 60;\n  let xb = xs + (16 - xs) * min(1, h * 1.4);\n  const line = () => {\n    const sb = (xb - x0) / db;\n    return [sb, ((xb + e * sb - x60) * 2) / (e * e)];\n  };\n  const up = P.pins.filter((p) => p.st === 0);\n  if (P.ball === 2 && up.length) {\n    const z = min(...up.map((p) => p.Z)), front = up.filter((p) => p.Z \u003c z + 11), [sb, a] = line();\n    const shift = front.reduce((s, p) => s + p.X, 0) / front.length - x60 - ((sb - a * e) * z) / 12 + (rnd() - 0.5) * 2;\n    x0 += shift;\n    xb += shift;\n    x60 += shift;\n  }\n  x0 = cl(x0, -17, 17);\n  xb = cl(xb, -17, 17);\n  P.path = [x0, xb, ...line(), db];\n  Object.assign(P, { ph: 1, bt: 0, bd: -13, ra: 0 });\n  const b = 0.9 * h;\n  const k = [-cos(b), 0.3 * sin(b), sin(b)];\n  P.ax = k.map((v) => v / hypot(...k));\n}\n\n// The swing brings the ball in from below the panel, then it rolls.\nfunction roll(P, h) {\n  P.bt += h;\n  const y0 = rowOf(P.bd), v = 25 - 0.07 * P.bd;\n  if (P.bt \u003c 0.45) {\n    P.bd = -13 + 30 * P.bt;\n    P.bh = 10 * (1 - P.bt / 0.45) ** 2;\n  } else {\n    P.bd += v * h;\n    P.bh = 0;\n    P.ra += v * 0.36 * h;\n  }\n  const d = P.bd, x = CX + pathX(P, max(0, d)) * sc(d);\n  for (let y = max(0, round(rowOf(d))); y \u003c= round(y0) && y \u003c H; y++) {\n    P.tx[y] = x;\n    P.tt[y] = P.t;\n  }\n  if (d >= 58.6) {\n    P.B = { X: pathX(P, d), Z: (d - 60) * 12, vx: pathS(P, d) * v, vz: 12 * v, h: 0, vh: 0, st: -1 };\n    P.ph = 2;\n    P.pt = 0;\n  }\n}\n\nfunction pts(p) {\n  if (p.th \u003c 0.35) return [[p.X, p.Z, 0.5]];\n  const L = 15 * sin(p.th);\n  return [0.12, 0.5, 0.88].map((f) => [p.X + cos(p.ph) * L * f, p.Z + sin(p.ph) * L * f, f]);\n}\n\nfunction kick(p, dvx, dvz, f) {\n  p.vx += dvx;\n  p.vz += dvz;\n  if (p.st \u003c 0) return;\n  const dv = sqrt(dvx * dvx + dvz * dvz);\n  if (p.st === 0) {\n    if (p.th \u003c 0.05) p.ph = atan2(dvz, dvx);\n    p.om += dv / 7;\n    if (dv > 130) Object.assign(p, { vh: dv * 0.28, om: dv / 7 + 5, st: 1, th: max(p.th, 0.05) });\n  } else p.w += (15 * sin(p.th) * (f - 0.5) * (cos(p.ph) * dvz - sin(p.ph) * dvx)) / 70;\n}\n\n// Ball and pins are discs on the deck; pins rock, topple past 11 degrees, fly\n// when hit hard and spin off the kickbacks.\nfunction collide(P) {\n  const bodies = [];\n  if (P.B && P.B.h > -3) bodies.push([P.B, 15, 4.3, [[P.B.X, P.B.Z, 0.5]]]);\n  for (const p of P.pins) if (p.st \u003c 2 && p.h \u003c 14) bodies.push([p, 3.5, 2.4, pts(p)]);\n  for (let i = 0; i \u003c bodies.length; i++) {\n    const [a, ma, ra, pa] = bodies[i];\n    for (const [qx] of pa) {\n      const sg = sign(qx), lim = 30.5 - ra;\n      if (abs(qx) > lim) {\n        a.X -= qx - sg * lim;\n        if (a.vx * sg > 0) a.vx *= -0.5;\n      }\n    }\n    for (let j = i + 1; j \u003c bodies.length; j++) {\n      const [b, mb, rb, pb] = bodies[j];\n      const R = ra + rb, ia = 1 / ma, ib = 1 / mb;\n      for (const qa of pa)\n        for (const qb of pb) {\n          const dx = qb[0] - qa[0], dz = qb[1] - qa[1], dd = dx * dx + dz * dz;\n          if (dd >= R * R || dd \u003c 1e-6) continue;\n          const D = sqrt(dd), nx = dx / D, nz = dz / D, pen = (R - D) / (ia + ib);\n          a.X -= nx * pen * ia;\n          a.Z -= nz * pen * ia;\n          b.X += nx * pen * ib;\n          b.Z += nz * pen * ib;\n          const vn = (b.vx - a.vx) * nx + (b.vz - a.vz) * nz;\n          if (vn >= 0) continue;\n          const J = (-1.5 * vn) / (ia + ib);\n          kick(a, -J * nx * ia, -J * nz * ia, qa[2]);\n          kick(b, J * nx * ib, J * nz * ib, qb[2]);\n        }\n    }\n  }\n}\n\nfunction move(P, dt) {\n  const B = P.B;\n  if (B) {\n    B.X += B.vx * dt;\n    B.Z += B.vz * dt;\n    P.ra += B.vz * 0.03 * dt;\n    if (B.Z > 34.2) {\n      B.vh -= 386 * dt;\n      B.h += B.vh * dt;\n      if (B.Z > 44) B.vz = 0;\n    }\n  }\n  for (const p of P.pins) {\n    if (p.st >= 3) continue;\n    if (p.st === 2 || p.h > 0 || p.vh > 0) {\n      p.vh -= 386 * dt;\n      p.h += p.vh * dt;\n      p.th += p.om * dt;\n      if (p.st === 2) {\n        if (p.Z > 46) p.vz = 0;\n        if (p.h \u003c -40) p.st = 3;\n      } else if (p.h \u003c= 0) {\n        if (sin(p.th) \u003c 0) p.ph += PI;\n        Object.assign(p, { h: 0, vh: p.vh \u003c -80 ? -p.vh * 0.3 : 0, th: PI / 2, om: 0, st: 1 });\n      }\n    } else if (p.st === 0) {\n      if (p.th > 0 || p.om > 0) {\n        p.om += 60 * sin(p.th - 0.2) * dt;\n        p.th += p.om * dt;\n        if (p.th \u003c 0) {\n          p.th = -p.th;\n          p.om *= -0.4;\n          p.ph += PI;\n          if (abs(p.om) \u003c 0.3) p.th = p.om = 0;\n        }\n        if (p.th > 0.2) p.st = 1;\n      }\n    } else if (p.th \u003c PI / 2) {\n      p.om += 64 * sin(p.th) * dt;\n      p.th += p.om * dt;\n      if (p.th >= PI / 2) {\n        p.th = PI / 2;\n        p.om = 0;\n      }\n    }\n    if (p.st \u003c 2 && p.h \u003c= 0) {\n      const v = hypot(p.vx, p.vz), dec = (p.st ? 110 : 400) * dt, k = v > dec ? (v - dec) / v : 0;\n      p.vx *= k;\n      p.vz *= k;\n      p.w *= exp(-2.5 * dt);\n    }\n    p.X += p.vx * dt;\n    p.Z += p.vz * dt;\n    p.ph += p.w * dt;\n    if (p.st \u003c 2 && p.h \u003c 8 && p.Z + 7.5 * sin(p.th) * sin(p.ph) > 34.2) p.st = 2;\n  }\n}\n\nfunction physics(P, h) {\n  for (let s = 0, n = ceil(h / 0.004); s \u003c n; s++) {\n    move(P, h / n);\n    collide(P);\n  }\n}\n\nfunction endPins(P) {\n  const up = P.pins.filter((p) => p.st === 0).length;\n  if (!up) {\n    P.fl = P.ball === 1 ? 1 : 0.8;\n    P.mark = P.ball;\n  }\n  Object.assign(P, { full: !up || P.ball === 2, ph: 3, tm: 0, seg: -1, B: null });\n}\n\n// Sweep drops, table lifts standing pins, sweep rakes the deadwood into the\n// pit and returns, table sets the pins or a new rack, sweep lifts.\nfunction sweep(P, h) {\n  let u = (P.tm += h), k = 0;\n  while (k \u003c 6 && u > SEG[k]) u -= SEG[k++];\n  if (k >= 6) return Object.assign(P, { ph: 0, tm: 0.7, ball: P.full ? 1 : 2, hs: 46 });\n  const e = sm(0, 1, u / SEG[k]);\n  if (k !== P.seg) {\n    P.seg = k;\n    if (k === 4 && P.full) P.pins = rack(46);\n    if (k === 5) for (const p of P.pins) if (p.st === 4) p.st = p.h = 0;\n  }\n  if (k === 0) P.hs = 46 - 45 * e;\n  else if (k === 1) {\n    if (!P.full) for (const p of P.pins) if (p.st === 0 || p.st === 4) Object.assign(p, { st: 4, h: 46 * e, th: 0, om: 0, vx: 0, vz: 0 });\n  } else if (k === 2) {\n    P.zs = -9 + 47 * e;\n    for (const p of P.pins)\n      if (p.st \u003c 2 && p.h \u003c 12 && p.Z \u003c P.zs + 3) {\n        p.Z = P.zs + 3;\n        p.vz = max(p.vz, 0);\n        if (p.st === 0) Object.assign(p, { st: 1, th: 1.3, ph: PI / 2 });\n      }\n  } else if (k === 3) P.zs = 38 - 47 * e;\n  else if (k === 4) {\n    for (const p of P.pins) if (p.st === 4) p.h = 46 * (1 - e);\n  } else P.hs = 1 + 45 * e;\n}\n\nfunction throwNow(P) {\n  if (P.ph === 1) return;\n  if (P.ph >= 2) {\n    if (P.ph === 2) endPins(P);\n    P.pins = P.full ? rack(0) : P.pins.filter((p) => p.st === 0 || p.st === 4).map((p) => Object.assign(p, { st: 0, h: 0, th: 0, om: 0 }));\n    Object.assign(P, { ball: P.full ? 1 : 2, hs: 46, B: null });\n  }\n  throwBall(P);\n}\n\nfunction step(P, h) {\n  P.t += h;\n  P.fl = max(0, P.fl - h * 0.5);\n  let ph = h;\n  if (P.ph === 0) {\n    // The first ball goes at 1.5 s at any speed.\n    if ((P.tm -= P.first ? h / P.m : h) \u003c= 0) {\n      P.first = false;\n      throwBall(P);\n    }\n  } else if (P.ph === 1) roll(P, h);\n  else if (P.ph === 2) {\n    // Pin action in slow motion at first.\n    ph = h * (0.45 + 0.55 * sm(0.5, 1, P.pt));\n    P.pt += ph;\n    if (P.pt > 1.6) endPins(P);\n  } else sweep(P, h);\n  physics(P, ph);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.c1 = hsv(0.52 + k[0], 0.9, 1);\n  P.c2 = hsv(0.66 + k[0], 0.7, 1);\n  P.m = cl(k[1], 0.2, 3) / 2;\n  P.hook = cl(k[2], 0, 1);\n  P.oil = 46 - 16 * P.hook;\n  const L = cl(k[3], 0, 1);\n  P.Hh = 0.1 + 0.9 * L * L;\n  P.U = 1 - L;\n  if (input.btnPressed && input.btnPressed[0]) throwNow(P);\n  step(P, cl(dt, 0, 0.1) * P.m);\n}\n\nfunction add(buf, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) buf[o + i] += c[i] * v;\n}\nfunction blend(buf, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n  const o = (y * W + x) * 3;\n  [r, g, b].forEach((v, i) => (buf[o + i] += (v - buf[o + i]) * a));\n}\n\n// Capping lights that chase, follow the ball and light the gutters, and the\n// projected trail.\nfunction lights(P) {\n  const { buf, c1, t, U, fl, tx, tt } = P;\n  const db = P.ph === 1 ? P.bd : P.ph === 2 ? 70 : -99;\n  for (let y = round(rowOf(57)); y \u003c H; y++) {\n    const d = DR[y], s = sc(d);\n    let v = 0.16 + 0.34 * max(0, sin(2 * PI * (d / 9 - t * 0.55))) ** 6;\n    if (db > -50) v += d \u003c db ? 0.9 * exp((d - db) / 7) : exp(-(d - db) * 1.5);\n    v = (v + fl * (0.5 + 0.5 * sin(d * 0.7 - t * 14))) * 200 * (0.45 + 0.55 * U);\n    for (const sg of [-1, 1]) {\n      const xs = CX + sg * 32.25 * s, x = floor(xs), f = xs - x;\n      [0.2, 1 - f * 0.8, 0.2 + f * 0.8, 0.2].forEach((k, i) => add(buf, x + i - 1, y, c1, v * k));\n      if (d > 0) for (let X = 21; X \u003c 30; X += 1 / s) add(buf, round(CX + sg * X * s), y, c1, v * 0.4 * ((X - 20.75) / 9.25) ** 1.5);\n    }\n    const age = t - tt[y];\n    if (age \u003c 4) {\n      const I = min(1, age * 8) * exp(-age / 1.2) * 140 * U, w = 4.3 * s + 0.8;\n      for (let x = max(0, floor(tx[y] - w)); x \u003c= min(W - 1, tx[y] + w); x++) {\n        const f = 1 - ((x - tx[y]) / w) ** 2;\n        if (f > 0) add(buf, x, y, c1, I * f);\n      }\n    }\n  }\n}\n\n// Marbled shell and holes turning with the roll.\nfunction drawBall(P, cx, cy, r, alpha, mirror, clip) {\n  const { buf, c1, c2, Hh, U } = P;\n  const [k0, k1, k2] = P.ax, ca = cos(P.ra), sa = sin(P.ra);\n  for (let y = floor(cy - r - 1); y \u003c= cy + r + 1 && y \u003c clip; y++)\n    for (let x = floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n      const u = (x - cx) / r, v = (y - cy) / r, q = u * u + v * v;\n      const cov = cl((1 - sqrt(q)) * r + 0.5, 0, 1);\n      if (cov \u003c= 0) continue;\n      const nz = sqrt(max(0, 1 - q)), ny = mirror ? v : -v;\n      const kd = (k0 * u + k1 * ny + k2 * nz) * (1 - ca);\n      const X = u * ca + (k1 * nz - k2 * ny) * sa + k0 * kd;\n      const Y = ny * ca + (k2 * u - k0 * nz) * sa + k1 * kd;\n      const Z = nz * ca + (k0 * ny - k1 * u) * sa + k2 * kd;\n      const sw = (0.5 + 0.5 * sin(3.2 * X + 2.4 * sin(2.6 * Y + 1.8 * Z) + 2 * Z * X)) ** 2;\n      let hole = 1;\n      for (const [hx, hy, hz] of HOLES) if (hx * X + hy * Y + hz * Z > 0.972) hole = 0.12;\n      const lit = (0.25 + 0.75 * max(0, -0.35 * u + 0.6 * ny + 0.72 * nz)) * Hh * 1.15 + U * (0.45 + 0.6 * nz);\n      const sp = mirror ? 0 : 230 * Hh * max(0, -0.2 * u + 0.5 * ny + 0.84 * nz) ** 24;\n      const col = [0, 1, 2].map((c) => (c1[c] * (1 - sw) * 0.9 + c2[c] * sw) * 255 * lit * hole + sp);\n      blend(buf, x, y, col[0], col[1], col[2], cov * (mirror ? alpha * max(0, 1 - (y - cy + r) / (2 * r)) : alpha));\n    }\n}\n\n// A pin's profile swept from base to crown, tilted by th toward ph.\nfunction drawPin(P, p) {\n  const { buf, Hh, U } = P;\n  const [x0, y0, s] = proj(p.X, 60 + p.Z / 12, p.h - (abs(p.X) > 21 && p.st === 1 ? 2.5 : 0));\n  const hx = cos(p.ph) * 15 * sin(p.th) * s;\n  const hy = (-sin(p.ph) * 15 * sin(p.th) * RD) / 12 - 15 * cos(p.th) * 0.85 * s;\n  const L2 = hx * hx + hy * hy, clip = p.Z > 34.2 ? PIT : H;\n  for (let y = floor(min(y0, y0 + hy) - 3); y \u003c= max(y0, y0 + hy) + 3 && y \u003c clip; y++)\n    for (let x = floor(min(x0, x0 + hx) - 3); x \u003c= max(x0, x0 + hx) + 3; x++) {\n      const px = x - x0, py = y - y0;\n      const t = L2 > 0.01 ? cl((px * hx + py * hy) / L2, 0, 1) : 0;\n      const ex = px - t * hx, ey = py - t * hy, f = t * 9, i = min(8, f | 0);\n      const rw = (PROF[i] + (PROF[i + 1] - PROF[i]) * (f - i)) * s;\n      const cov = cl(rw - sqrt(ex * ex + ey * ey) + 0.5, 0, 1);\n      if (cov \u003c= 0) continue;\n      const lit = (0.82 - (0.18 * ex) / (rw + 0.3)) * Hh;\n      if (t > 0.6 && t \u003c 0.73) blend(buf, x, y, 215 * Hh + 255 * U, 30 * Hh + 40 * U, 40 * Hh + 150 * U, cov);\n      else blend(buf, x, y, 240 * lit + 180 * U, 240 * lit + 192 * U, 234 * lit + 255 * U, cov);\n    }\n}\n\nfunction drawSweep(P) {\n  const { buf, Hh, U, hs, zs } = P;\n  const [xl, yb, s] = proj(-31, 60 + zs / 12, hs);\n  const th = 3.4 * s;\n  for (let y = floor(yb - th); y \u003c= yb; y++)\n    for (let x = round(xl); x \u003c= round(2 * CX - xl); x++) {\n      const top = y \u003c yb - th + 1 ? 60 : 0;\n      const hz = ((x + 64) >> 1) % 3 === 0;\n      blend(buf, x, y, (140 + top) * Hh + (hz ? 255 : 40) * U, (142 + top) * Hh + (hz ? 210 : 20) * U, (152 + top) * Hh + (hz ? 40 : 70) * U, 1);\n    }\n  for (const x of [round(CX - 29.5 * s), round(CX + 29.5 * s)]) for (let y = MB; y \u003c yb - th; y++) blend(buf, x, y, 80 * Hh + 50 * U, 80 * Hh + 30 * U, 92 * Hh + 120 * U, 1);\n}\n\n// The masking unit, with the blacklight tube along its lip.\nfunction hood(P) {\n  const { buf, Hh, U, c1, c2, fl, t } = P;\n  for (let y = 0; y \u003c MB; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, wy = 4.4 + 2.4 * sin(x * 0.11 + 0.8), b1 = max(0, 1 - abs(y - wy));\n      const b2 = max(0, 1 - abs(y - wy - 2.5) * 1.3) * sm(4, 14, x), pulse = 0.55 + 0.45 * sin(x * 0.35 - t * 5);\n      const tw = hash(x, y) \u003c 0.07 ? (0.5 + 0.5 * sin(t * 4 + hash(y, x) * 40)) * 150 * U : 0;\n      const fx = fl > 0 ? hsv(x / 40 - t * 2, 1, fl * 200) : [0, 0, 0];\n      for (let c = 0; c \u003c 3; c++)\n        buf[o + c] =\n          y === MB - 1\n            ? 150 * Hh + [110, 50, 255][c] * U\n            : [20, 30, 88][c] * Hh * (0.85 + y * 0.03) + [12, 4, 30][c] * U + b1 * ([190, 220, 255][c] * Hh + c1[c] * 255 * U * pulse) + b2 * ([255, 140, 40][c] * Hh + c2[c] * 230 * U) + tw + fx[c];\n    }\n  // X for a strike, a slash for a spare.\n  if (fl > 0.05)\n    for (let j = -3; j \u003c= 3; j++)\n      for (const i of P.mark === 1 ? [j, -j] : [-j]) {\n        const o = ((5 + j) * W + 32 + i) * 3;\n        for (let c = 0; c \u003c 3; c++) buf[o + c] = 255 * min(1, fl * 2);\n      }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, A, F, WM, Hh, U, c1 } = P;\n  // The lane lights wash the boards in slow waves; the oil glows.\n  for (let y = MB; y \u003c H; y++) {\n    const d = DR[y], s = sc(d), wave = 16 + 9 * sin(2 * PI * (d / 14 - P.t * 0.5));\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, wm = WM[i] * wave * U;\n      const ax = abs(x - CX) / s;\n      const oil = WM[i] === 1 && d > 0 ? sm(P.oil + 3, P.oil - 4, d + ax * 0.2) * (64 - ax * ax * 0.08) * U : 0;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = A[o + c] * Hh + F[o + c] * U + c1[c] * wm + oil * OILC[c];\n    }\n  }\n  lights(P);\n  let ball = null;\n  if (P.ph === 1) ball = [pathX(P, max(0, P.bd)), P.bd, P.bh, H];\n  else if (P.B && P.B.h > -14) ball = [P.B.X, 60 + P.B.Z / 12, P.B.h, P.B.Z > 34.2 ? PIT : H];\n  let bs = null;\n  if (ball) {\n    const [x, d, h, clip] = ball;\n    const [cx, cy, s] = proj(x, d, 4.3 + h), fy = rowOf(d), r = 4.3 * s, R = r * 3.4;\n    bs = [cx, cy, r, clip, d];\n    // Halo, shadow, reflection.\n    for (let y = floor(cy - R); y \u003c= cy + R && y \u003c clip; y++)\n      for (let x2 = floor(cx - R); x2 \u003c= cx + R; x2++) {\n        const q = 1 - hypot(x2 - cx, (y - cy) * 1.2) / R;\n        if (q > 0) add(buf, x2, y, c1, q * q * 110 * U);\n        const e = ((x2 - cx) / (r * 1.1)) ** 2 + ((y - fy) / (r * 0.45)) ** 2;\n        if (e \u003c 1 && clip === H && y >= MB && y \u003c H && x2 >= 0 && x2 \u003c W)\n          for (let c = 0; c \u003c 3; c++) buf[(y * W + x2) * 3 + c] *= 1 - 0.55 * Hh * (1 - e) * exp(-h / 6);\n      }\n    if (d > 0 && d \u003c P.oil + 2) drawBall(P, cx, 2 * fy - cy + h * 1.7 * s, r, 0.15 + 0.4 * sm(P.oil + 2, P.oil - 8, d), true, H);\n  }\n  // Deck objects far to near.\n  const items = P.pins.filter((p) => p.st \u003c 3).map((p) => [p.Z + (p.st === 1 ? 7 * sin(p.ph) : 0), p]);\n  if (P.hs \u003c 45) items.push([P.zs - 0.5, 0]);\n  if (bs && bs[4] > 57) items.push([(bs[4] - 60) * 12, 1]);\n  items.sort((a, b) => b[0] - a[0]);\n  for (const [, it] of items) {\n    if (it === 0) drawSweep(P);\n    else if (it === 1) drawBall(P, bs[0], bs[1], bs[2], 1, false, bs[3]);\n    else drawPin(P, it);\n  }\n  if (bs && bs[4] \u003c= 57) drawBall(P, bs[0], bs[1], bs[2], 1, false, bs[3]);\n  hood(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Ball=0..1, Speed=0.2..3, Hook=0..1, Lights=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Ball","min":0,"max":1,"about":"The colour of the ball, which the lane lights and the projected trail follow: cyan at 0, round through blue, pink, red, orange and green."},{"name":"Speed","min":0.2,"max":3,"about":"How fast everything goes: at 2 the ball takes about 2.5 s from the foul line to the pins."},{"name":"Hook","min":0,"max":1,"about":"How far the oil runs and how much the ball curves: at 0 the oil runs 46 ft and a straight ball hits the head pin on the nose and leaves pins. Near 0.6 it hooks into the pocket and strikes; at 1 the oil stops at 30 ft and it crosses to the Brooklyn side."},{"name":"Lights","min":0,"max":1,"about":"Cosmic bowling at 0, the pins, arrows and oil glowing under blacklight, up to the full house lights on the wood at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.1625,"detail":0.0689,"edges":0.5323,"complexity":1.7471,"coverage":0.9404,"colour":0.2104,"drift":0.042},"knobResponse":[0.0566,0.0281,0.0252,0.2377]},{"slug":"bread-mould","title":"Bread Mould","family":"fungi","round":21,"note":"도마 위 식빵 두 쪽이 곰팡이로 덮여 가는 저속 촬영이에요. 내려앉은 포자에서 흰 테를 두른 푸른곰팡이와 검은 털곰팡이가 고리를 그리며 번지고, 다 덮이면 새 두 쪽이 옆에서 밀려 들어와요.","idea":"A time-lapse of two slices of bread on a board under the kitchen lamp: spores drift down and land, colonies spread in fuzzy rings, white at the rim and blue-green, black or orange behind it, until the slices are overrun and a fresh pair slides in from the side.","buttons":"K1 tap slides a fresh pair of slices in now.","code":"// ===== Patternflow pattern =====\n// Title:   Bread Mould\n// Family:  fungi\n// Idea:    A time-lapse of two slices of bread on a board under the kitchen lamp: spores drift down and land, colonies spread in fuzzy rings, white at the rim and blue-green, black or orange behind it, until the slices are overrun and a fresh pair slides in from the side.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after time-lapse films of mould on bread left in a bread bin\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Mould=0..3, Speed=0.2..3, Spores=4..40, Damp=0..1\n//\n// Knob 1: Mould. What the air carries: the bread bin at 0 (blue-green Penicillium, black pin mould and the odd pink yeast), black bread mould at 1 (grey Rhizopus cotton and Aspergillus niger), green-gold Aspergillus and olive Cladosporium at 2, orange Neurospora with pink yeast and blood-red Serratia at 3.\n// Knob 2: Speed. How fast the time-lapse runs: at 2 a pair of slices goes from the first spore to overrun in about fifteen seconds; at 0.2 the colonies creep.\n// Knob 3: Spores. How many colonies start on each slice: four that grow into wide ringed discs at 4, up to forty small ones that close up fast at 40.\n// Knob 4: Damp. A dry kitchen near 0, with compact velvety colonies and thin white rims; turned up, the bread greys, the mould grows faster under a long white cotton and beads of liquid stand on the older colonies.\n// Buttons: K1 tap slides a fresh pair of slices in now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Each slice lives in its own 62x62 box; the pair sits one above the other.\nconst SW = 62;\nconst SH = 62;\nconst SN = SW * SH;\nconst BX = 1;\nconst BY = [1, 65];\n// Slice time a pair stays overrun before it goes, how long after the Lab\n// opens the first pair goes, and how many seconds a swap takes.\nconst HOLD = 1.2;\nconst LEAD = 2.4;\nconst SLIDE = 0.9;\nconst { min, max, floor, round, sin, cos, sqrt, atan2, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// A warm bulb overhead.\nconst TINT = [1, 0.95, 0.86];\nconst WHITE = [236, 238, 230];\n// Each mould: how fast its front runs (LED a second of slice time), how far\n// its loose hyphae reach ahead of it (s), how long it stays white, the\n// colour it sporulates to and the colour it ages to, how deep its growth\n// rings are, how thick its pin heads come and in what colour, and whether it\n// is a smooth wet patch instead of a felt.\nconst MOULDS = [\n  // Penicillium: velvety blue-green in growth rings behind a white margin.\n  { v: 3.2, fz: 0.35, wh: 0.75, c1: [72, 156, 148], c2: [34, 88, 86], ring: 0.22, pin: 0, pc: null, gl: 0 },\n  // Rhizopus, the black bread mould: grey cotton that runs, then black pin heads.\n  { v: 4.2, fz: 0.9, wh: 1.2, c1: [184, 184, 176], c2: [128, 126, 120], ring: 0.04, pin: 0.3, pc: [20, 18, 24], gl: 0 },\n  // Cladosporium: slow and compact, olive-black velvet with hardly a margin.\n  { v: 1.8, fz: 0.15, wh: 0.2, c1: [76, 92, 58], c2: [34, 42, 30], ring: 0.12, pin: 0, pc: null, gl: 0 },\n  // Aspergillus niger: a yellowish felt that fills with black heads.\n  { v: 2.8, fz: 0.3, wh: 0.5, c1: [206, 192, 124], c2: [70, 62, 52], ring: 0.06, pin: 0.75, pc: [30, 26, 24], gl: 0 },\n  // Aspergillus flavus: yellow-green powder.\n  { v: 2.9, fz: 0.3, wh: 0.6, c1: [178, 190, 70], c2: [112, 128, 46], ring: 0.18, pin: 0, pc: null, gl: 0 },\n  // Neurospora, the orange bread mould: the fastest, a loose orange fleece.\n  { v: 6, fz: 1, wh: 0.5, c1: [252, 170, 80], c2: [230, 122, 52], ring: 0.05, pin: 0, pc: null, gl: 0 },\n  // A pink yeast: slow, smooth and wet.\n  { v: 1.3, fz: 0, wh: 0, c1: [238, 140, 156], c2: [214, 102, 124], ring: 0, pin: 0, pc: null, gl: 1 },\n  // Serratia, the bacterium that makes bread look as if it bleeds.\n  { v: 1.1, fz: 0, wh: 0, c1: [214, 52, 66], c2: [160, 30, 48], ring: 0, pin: 0, pc: null, gl: 1 },\n];\n// What the air carries at each whole turn of K1.\nconst MIX = [\n  [0.62, 0.24, 0.08, 0, 0, 0, 0.06, 0],\n  [0.14, 0.5, 0.08, 0.28, 0, 0, 0, 0],\n  [0.24, 0.06, 0.22, 0, 0.48, 0, 0, 0],\n  [0.06, 0.1, 0, 0, 0, 0.44, 0.24, 0.16],\n];\nfunction pick(k1, u) {\n  const i = min(2, floor(k1)), f = k1 - i, A = MIX[i], B = MIX[i + 1];\n  for (let t = 0, acc = 0; t \u003c A.length; t++) if ((acc += mix(A[t], B[t], f)) > u) return t;\n  return 0;\n}\n\n// The board: long-grain wood under the lamp, scored by old knife cuts.\nfunction board(P) {\n  const bg = (P.bg = new Float32Array(N * 3)), lamp = (P.lamp = new Float32Array(N)), WOOD = [128, 84, 48];\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, L = (lamp[p] = 0.8 + 0.26 * exp(-((x - 25) ** 2 + ((y - 56) * 0.5) ** 2) / 900));\n    const w = x + 4 * vn(x * 0.05 + 7, y * 0.02), n = vn(w * 0.7, y * 0.03), ln = vn(w * 1.9 + 50, y * 0.012);\n    const k = (0.72 + 0.32 * n - max(0, ln - 0.7) * 1.4) * L;\n    for (let c = 0; c \u003c 3; c++) bg[p * 3 + c] = (WOOD[c] + (hash(p, c + 9) - 0.5) * 6) * k * TINT[c];\n  }\n  for (let i = 0; i \u003c 14; i++) {\n    const a = (rnd() - 0.5) * 1.2 + (rnd() \u003c 0.5 ? 0 : PI), len = 4 + rnd() * 10;\n    for (let s = 0, x = rnd() * W, y = rnd() * H; s \u003c len; s++, x += cos(a), y += sin(a) * 0.5) {\n      const xi = round(x), yi = round(y);\n      if (xi >= 0 && xi \u003c W && yi >= 0 && yi \u003c H) for (let c = 0; c \u003c 3; c++) bg[(yi * W + xi) * 3 + c] *= 0.8;\n    }\n  }\n}\n\n// A pan loaf slice: a square body under a domed top that overhangs it at the\n// shoulders, a crust two LEDs deep and baked darker over the dome, the crumb\n// full of holes.\nconst CRUMB = [242, 226, 188];\nconst DENSE = [222, 186, 128];\nconst CR_OUT = [100, 54, 26];\nconst CR_IN = [194, 134, 70];\nfunction slice() {\n  const S = { mask: new Uint8Array(SN), D: new Float32Array(SN), alb: new Float32Array(SN * 3), gr: new Float32Array(SN * 3), hs: new Float32Array(SN), hp: new Float32Array(SN), nz: new Float32Array(SN), T: new Float32Array(SN), own: new Uint8Array(SN), seam: new Uint8Array(SN), sp: [], col: [] };\n  const { mask, D, alb, gr, hs, hp, nz } = S, top = new Uint8Array(SN);\n  const so = floor(rnd() * 99999), flip = rnd() \u003c 0.35, lean = (rnd() - 0.5) * 5, sc = 0.96 + rnd() * 0.04, shy = 17 + rnd() * 5;\n  for (let q = 0; q \u003c SN; q++) {\n    const x = q % SW, y = (q / SW) | 0;\n    let py = (y + 0.5 - 31) / sc + 31, px = (x + 0.5 - 31) / sc, hw = 0;\n    if (flip) py = 62 - py;\n    if (py \u003c shy) px -= lean * (1 - py / shy);\n    if (py > 1 && py \u003c 61) {\n      hw = py \u003c shy ? 30.5 * (1 - ((shy - py) / (shy - 1)) ** 2.2) ** (1 / 2.2) : py \u003c shy + 5 ? 28.5 + 2 * cos(((py - shy) / 5) * PI * 0.5) : 28.5;\n      if (py > 56) hw -= 5 - sqrt(max(0, 25 - (py - 56) ** 2));\n    }\n    mask[q] = abs(px) \u003c hw ? 1 : 0;\n    top[q] = py \u003c shy + 2;\n    D[q] = mask[q] ? 99 : 0;\n  }\n  // Distance in from the edge, two chamfer passes.\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= SW || y >= SH ? 0 : D[y * SW + x]);\n  for (let y = 0; y \u003c SH; y++)\n    for (let x = 0, q = y * SW; x \u003c SW; x++, q++) if (mask[q]) D[q] = min(D[q], at(x - 1, y) + 1, at(x, y - 1) + 1, at(x - 1, y - 1) + 1.41, at(x + 1, y - 1) + 1.41);\n  for (let y = SH - 1; y >= 0; y--)\n    for (let x = SW - 1, q = y * SW + x; x >= 0; x--, q--) if (mask[q]) D[q] = min(D[q], at(x + 1, y) + 1, at(x, y + 1) + 1, at(x + 1, y + 1) + 1.41, at(x - 1, y + 1) + 1.41);\n  for (let q = 0; q \u003c SN; q++) {\n    if (!mask[q]) continue;\n    const x = q % SW, y = (q / SW) | 0, d = D[q], crust = d \u003c 2.5;\n    const t = crust ? cl((d - 1) / 1.4, 0, 1) : cl((d - 2.5) / 5, 0, 1), k = crust ? (0.82 + 0.32 * vn(x * 0.4 + so, y * 0.4)) * (top[q] ? 0.84 : 1) : 0.92 + 0.12 * vn(x * 0.3 + so, y * 0.16);\n    for (let c = 0; c \u003c 3; c++) {\n      alb[q * 3 + c] = (crust ? mix(CR_OUT[c], CR_IN[c], t) : mix(DENSE[c], CRUMB[c], t)) * k + (hash(q + so, c) - 0.5) * 12;\n      gr[q * 3 + c] = hash(q + so, c + 3) * 2 - 1;\n    }\n    hs[q] = hash(q + so, 7);\n    // Pin heads come in clumps.\n    hp[q] = hash(q + so, 8) * (0.5 + vn(x * 0.25 + so, y * 0.25 + 9));\n    // Ragged fronts: a colony reaches some crumb a little sooner than others.\n    nz[q] = (vn(x * 0.3 + so, y * 0.3) - 0.5) * 0.6 + (hash(q + so, 6) - 0.5) * 0.25;\n  }\n  // The holes of the crumb, drawn a little tall the way the dough rose. The\n  // lamp is up and to the left, so the far wall of a hole catches it.\n  for (let i = 0; i \u003c 120; i++) {\n    const rx = 0.5 + 1.7 * rnd() ** 3, ry = rx * (1.05 + 0.6 * rnd()), cx = 4 + rnd() * 54, cy = 4 + rnd() * 54, dp = 0.14 + 0.2 * cl((rx - 0.5) / 1.5, 0, 1);\n    for (let y = floor(cy - ry - 1); y \u003c= cy + ry + 1; y++)\n      for (let x = floor(cx - rx - 1); x \u003c= cx + rx + 1; x++) {\n        const q = y * SW + x;\n        if (x \u003c 0 || y \u003c 0 || x >= SW || y >= SH || D[q] \u003c 3.4) continue;\n        const dx = (x + 0.5 - cx) / rx, dy = (y + 0.5 - cy) / ry, r2 = dx * dx + dy * dy;\n        const f = r2 \u003c 1 ? 1 - dp * (1 - 0.45 * cl((dx + dy) * 0.8, -1, 1)) * (1 - 0.4 * r2) : r2 \u003c 2 && dx + dy \u003c -0.6 ? 1 + dp * 0.3 : 1;\n        alb[q * 3] *= f;\n        alb[q * 3 + 1] *= f;\n        alb[q * 3 + 2] *= f;\n      }\n  }\n  // Forty landing places, each one as far from the others as twelve tries\n  // can find, so the first few cover the slice whatever K3 asks for. Landing\n  // times and kinds are spread the same way.\n  const r0 = rnd(), r1 = rnd();\n  for (let i = 0; i \u003c 40; i++) {\n    let bx = 0, by = 0, bd = -1;\n    for (let c = 0; c \u003c 12; c++) {\n      let q = 0;\n      do q = floor(rnd() * SN);\n      while (D[q] \u003c 2.5);\n      const x = (q % SW) + rnd(), y = floor(q / SW) + rnd();\n      let md = 1e9;\n      for (const s of S.sp) md = min(md, (s.x - x) ** 2 + (s.y - y) ** 2);\n      if (md > bd) (bd = md), (bx = x), (by = y);\n    }\n    S.sp.push({ x: bx, y: by, u: (r1 + i * 0.618034) % 1, t0: 0.2 + 2.8 * ((r0 + i * 0.381966) % 1), a: rnd() * 7, b: rnd() * 7, c: rnd() * 7, dx: rnd() - 0.5 });\n  }\n  return S;\n}\n\n// When each LED of a slice is reached: the first colony to get there owns it.\n// Fronts are lobed, crust is slow ground, and the result is fixed, so a\n// frame only reads it against the slice's age.\nfunction grow(P, S) {\n  const { T, own, mask, D, sp, seam, nz } = S, col = (S.col = []);\n  T.fill(1e9);\n  for (let i = 0; i \u003c P.nsp; i++) {\n    const s = sp[i], M = MOULDS[pick(P.k1, s.u)], iv = 1 / (M.v * P.vk);\n    col.push({ M, t0: s.t0 });\n    for (let q = 0; q \u003c SN; q++) {\n      if (!mask[q]) continue;\n      const dx = (q % SW) + 0.5 - s.x, dy = ((q / SW) | 0) + 0.5 - s.y, d = sqrt(dx * dx + dy * dy);\n      if (s.t0 + d * 0.86 * iv >= T[q]) continue;\n      const a = atan2(dy, dx), t = s.t0 + d * iv * (1 + 0.05 * sin(2 * a + s.a) + 0.05 * sin(5 * a + s.b) + 0.035 * sin(11 * a + s.c));\n      if (t \u003c T[q]) (T[q] = t), (own[q] = i);\n    }\n  }\n  let tmax = 0;\n  for (let q = 0; q \u003c SN; q++) {\n    if (!mask[q]) continue;\n    T[q] += nz[q] + (D[q] \u003c 2.5 ? 0.5 : 0);\n    tmax = max(tmax, T[q]);\n  }\n  // Where two kinds meet they leave a groove.\n  for (let q = 0; q \u003c SN; q++) {\n    const m = mask[q] && col[own[q]].M, r = q % SW \u003c SW - 1 && mask[q + 1] && col[own[q + 1]].M, dn = q + SW \u003c SN && mask[q + SW] && col[own[q + SW]].M;\n    seam[q] = m && ((r && r !== m) || (dn && dn !== m)) ? 1 : 0;\n  }\n  return tmax;\n}\n\nfunction makeSet(P) {\n  const set = { s: [slice(), slice()], A: 0, L: 0 };\n  regrow(P, set);\n  return set;\n}\nfunction regrow(P, set) {\n  set.L = max(grow(P, set.s[0]), grow(P, set.s[1])) + HOLD;\n}\nconst crumb = (x, y) => [round(x), round(y), 0.6 + rnd() * 0.5, rnd() \u003c 0.3];\n\nfunction swap(P) {\n  P.old = P.cur;\n  P.cur = makeSet(P);\n  P.sw = 0;\n  // Crumbs knocked off on the way, in the gaps where they show.\n  for (let i = 0; i \u003c 7; i++) P.crumbs.push(crumb(rnd() * W, [0.5, 63.5, 64.5, 126.5][floor(rnd() * 4)] + (rnd() - 0.5) * 2));\n  P.crumbs.splice(0, max(0, P.crumbs.length - 48));\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, cur: null, old: null, sw: -1, buf: new Float32Array(N * 3), sh: new Float32Array(N), crumbs: [], motes: [], k1: -1 });\n  board(P);\n  for (let i = 0; i \u003c 26; i++) P.crumbs.push(crumb(rnd() * W, rnd() * H));\n  for (let i = 0; i \u003c 12; i++) P.motes.push({ x: rnd() * W, y: rnd() * H, vx: 0, vy: 0, ph: rnd() * 7 });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt, 0, 0.1);\n  const k1 = cl(k[0], 0, 3), nsp = round(cl(k[2], 4, 40)), damp = cl(k[3], 0, 1);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  if (abs(k1 - P.k1) > 0.002 || nsp !== P.nsp || abs(damp - P.damp) > 0.002) {\n    Object.assign(P, { k1, nsp, damp, vk: 0.85 + 0.6 * damp, fk: 1 + 1.8 * damp, wk: 1 + 1.4 * damp });\n    // The first pair opens nearly overrun and goes LEAD seconds in.\n    if (!P.cur) (P.cur = makeSet(P)), (P.cur.A = max(0, P.cur.L - LEAD));\n    else regrow(P, P.cur);\n  }\n  P.t += d;\n  if (P.sw >= 0) {\n    if ((P.sw += d) >= SLIDE) (P.sw = -1), (P.old = null);\n  } else if ((P.cur.A += d * P.rate) >= P.cur.L || input.btnPressed?.[0]) swap(P);\n  for (const m of P.motes) {\n    m.vx += ((rnd() - 0.5) * 24 - m.vx) * d;\n    m.vy += ((rnd() - 0.5) * 24 - m.vy - 2) * d;\n    m.x = (m.x + m.vx * d + W) % W;\n    m.y = (m.y + m.vy * d + H) % H;\n  }\n}\n\nfunction drawSlice(P, S, A, ox, oy) {\n  const { buf, lamp, damp, fk, wk } = P, { mask, alb, gr, hs, hp, T, own, seam, col } = S;\n  const dk0 = 1 - 0.14 * damp, dk1 = 1 - 0.15 * damp, dk2 = 1 - 0.07 * damp, bead = 0.012 * damp;\n  for (let ly = 0; ly \u003c SH; ly++)\n    for (let lx = 0, x = ox, q = ly * SW; lx \u003c SW; lx++, x++, q++) {\n      if (x \u003c 0 || x >= W || !mask[q]) continue;\n      const q3 = q * 3, age = A - T[q];\n      let r = alb[q3] * dk0, g = alb[q3 + 1] * dk1, b = alb[q3 + 2] * dk2;\n      if (age > -2) {\n        const c = col[own[q]], M = c.M, fz = M.fz * fk, wh = M.wh * wk;\n        if (age \u003c 0) {\n          // Loose hyphae run ahead of the colony.\n          if (fz > 0 && hs[q] \u003c 0.8 * (1 + age / fz)) (r = mix(r, WHITE[0], 0.55)), (g = mix(g, WHITE[1], 0.55)), (b = mix(b, WHITE[2], 0.55));\n        } else {\n          let mr, mg, mb, a;\n          if (M.gl) {\n            const t = cl(age / 3, 0, 1), s = 1 + 0.16 * cl(1 - (T[q] - c.t0) / 2, 0, 1) + (hs[q] \u003c 0.04 ? 0.25 : 0);\n            mr = mix(M.c1[0], M.c2[0], t) * s;\n            mg = mix(M.c1[1], M.c2[1], t) * s;\n            mb = mix(M.c1[2], M.c2[2], t) * s;\n            a = min(1, 0.55 + age * 2);\n          } else {\n            const t1 = cl((age - wh) / 0.7, 0, 1), t2 = cl((age - wh - 0.7) / 3, 0, 1);\n            mr = mix(mix(WHITE[0], M.c1[0], t1), M.c2[0], t2);\n            mg = mix(mix(WHITE[1], M.c1[1], t1), M.c2[1], t2);\n            mb = mix(mix(WHITE[2], M.c1[2], t1), M.c2[2], t2);\n            // Growth rings: the colony sporulates in bands as its front goes on.\n            if (M.ring) {\n              const k = 1 - M.ring * t1 * (0.5 + 0.5 * cos((T[q] - c.t0) * 7));\n              (mr *= k), (mg *= k), (mb *= k);\n            }\n            // Damp air keeps a grey cotton of aerial hyphae over the old growth.\n            const hz = damp * 0.45 * t1 * (0.6 + 0.4 * hs[q]);\n            (mr = mix(mr, 206, hz)), (mg = mix(mg, 208, hz)), (mb = mix(mb, 200, hz));\n            if (M.pin) {\n              const pr = M.pin * cl((age - wh) / 2.5, 0, 1), f = hp[q] \u003c pr ? 1 : hp[q] \u003c pr * 1.5 ? 0.5 : 0;\n              (mr = mix(mr, M.pc[0], f)), (mg = mix(mg, M.pc[1], f)), (mb = mix(mb, M.pc[2], f));\n            }\n            const gk = 6 + 8 * t1;\n            mr += gr[q3] * gk;\n            mg += gr[q3 + 1] * gk;\n            mb += gr[q3 + 2] * gk;\n            a = min(1, 0.4 + age * 1.6);\n            // Beads of liquid on old colonies when it is damp.\n            if (age > 2.5 && hs[q] > 1 - bead) (mr = 250), (mg = 246), (mb = 226), (a = 1);\n          }\n          if (seam[q] && age > 0.5) (mr *= 0.7), (mg *= 0.7), (mb *= 0.7);\n          r = mix(r, mr, a);\n          g = mix(g, mg, a);\n          b = mix(b, mb, a);\n        }\n      }\n      const p = (oy + ly) * W + x, L = lamp[p], o = p * 3;\n      buf[o] = r * L;\n      buf[o + 1] = g * L * TINT[1];\n      buf[o + 2] = b * L * TINT[2];\n    }\n}\n\n// Even steps only: the grain is there to be seen, not to be counted twice.\nconst q2 = (v) => (v > 255 ? 254 : v \u003c 0 ? 0 : (v >> 1) \u003c\u003c 1);\nconst ease = (u) => (u = cl(u, 0, 1)) * u * (3 - 2 * u);\n\nexport function draw(display, params) {\n  const P = params, { buf, sh, lamp } = P;\n  if (!P.cur) return;\n  buf.set(P.bg);\n  for (const [x, y, k, big] of P.crumbs)\n    for (let i = 0; i \u003c= (big ? 1 : 0); i++) {\n      const p = y * W + x + i;\n      if (x + i \u003c W && y >= 0 && y \u003c H) (buf[p * 3] = 214 * k * lamp[p]), (buf[p * 3 + 1] = 160 * k * lamp[p]), (buf[p * 3 + 2] = 86 * k * lamp[p]);\n    }\n  // In a swap the bottom slice follows the top one a moment later.\n  const e = [0, 1].map((j) => (P.sw >= 0 ? ease((P.sw - 0.14 * j) / (SLIDE - 0.14)) : 1));\n  const sets = P.sw >= 0 ? [[P.old, e.map((v) => round(-68 * v))], [P.cur, e.map((v) => round(68 * (1 - v)))]] : [[P.cur, [0, 0]]];\n  // Shadows on the board, cast down and to the right.\n  sh.fill(1);\n  for (const [set, ox] of sets)\n    for (let j = 0; j \u003c 2; j++)\n      for (let q = 0, m = set.s[j].mask; q \u003c SN; q++) {\n        if (!m[q]) continue;\n        const x = BX + ox[j] + (q % SW), y = BY[j] + ((q / SW) | 0);\n        if (x + 1 >= 0 && x + 1 \u003c W && y + 2 \u003c H) sh[(y + 2) * W + x + 1] = 0.5;\n        if (x + 2 >= 0 && x + 2 \u003c W && y + 4 \u003c H) sh[(y + 4) * W + x + 2] = min(sh[(y + 4) * W + x + 2], 0.74);\n      }\n  for (let p = 0; p \u003c N; p++) if (sh[p] \u003c 1) (buf[p * 3] *= sh[p]), (buf[p * 3 + 1] *= sh[p]), (buf[p * 3 + 2] *= sh[p]);\n  for (const [set, ox] of sets) for (let j = 0; j \u003c 2; j++) drawSlice(P, set.s[j], set.A, BX + ox[j], BY[j]);\n  // Spores settling out of the air, and dust in the lamplight.\n  const add = (x, y, v) => {\n    const xi = round(x), yi = round(y);\n    if (xi >= 0 && xi \u003c W && yi >= 0 && yi \u003c H) for (let c = 0, o = (yi * W + xi) * 3; c \u003c 3; c++) buf[o + c] += v * TINT[c];\n  };\n  if (P.sw \u003c 0)\n    for (let j = 0; j \u003c 2; j++)\n      for (const s of P.cur.s[j].sp.slice(0, P.nsp)) {\n        const u = (s.t0 - P.cur.A) / 0.6;\n        if (u > 0 && u \u003c 1) add(BX + s.x + s.dx * 16 * u, BY[j] + s.y - 10 * u, 150 * (1 - u));\n      }\n  for (const m of P.motes) add(m.x, m.y, 90 * lamp[(m.y | 0) * W + (m.x | 0)] ** 4 * (0.5 + 0.5 * sin(P.t * 3 + m.ph)) ** 2);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, q2(buf[o]), q2(buf[o + 1]), q2(buf[o + 2]));\n}\n","layer":{"id":"layer-bread-mould","type":"code","name":"bread-mould","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bread Mould\n// Family:  fungi\n// Idea:    A time-lapse of two slices of bread on a board under the kitchen lamp: spores drift down and land, colonies spread in fuzzy rings, white at the rim and blue-green, black or orange behind it, until the slices are overrun and a fresh pair slides in from the side.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after time-lapse films of mould on bread left in a bread bin\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Mould=0..3, Speed=0.2..3, Spores=4..40, Damp=0..1\n//\n// Knob 1: Mould. What the air carries: the bread bin at 0 (blue-green Penicillium, black pin mould and the odd pink yeast), black bread mould at 1 (grey Rhizopus cotton and Aspergillus niger), green-gold Aspergillus and olive Cladosporium at 2, orange Neurospora with pink yeast and blood-red Serratia at 3.\n// Knob 2: Speed. How fast the time-lapse runs: at 2 a pair of slices goes from the first spore to overrun in about fifteen seconds; at 0.2 the colonies creep.\n// Knob 3: Spores. How many colonies start on each slice: four that grow into wide ringed discs at 4, up to forty small ones that close up fast at 40.\n// Knob 4: Damp. A dry kitchen near 0, with compact velvety colonies and thin white rims; turned up, the bread greys, the mould grows faster under a long white cotton and beads of liquid stand on the older colonies.\n// Buttons: K1 tap slides a fresh pair of slices in now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Each slice lives in its own 62x62 box; the pair sits one above the other.\nconst SW = 62;\nconst SH = 62;\nconst SN = SW * SH;\nconst BX = 1;\nconst BY = [1, 65];\n// Slice time a pair stays overrun before it goes, how long after the Lab\n// opens the first pair goes, and how many seconds a swap takes.\nconst HOLD = 1.2;\nconst LEAD = 2.4;\nconst SLIDE = 0.9;\nconst { min, max, floor, round, sin, cos, sqrt, atan2, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// A warm bulb overhead.\nconst TINT = [1, 0.95, 0.86];\nconst WHITE = [236, 238, 230];\n// Each mould: how fast its front runs (LED a second of slice time), how far\n// its loose hyphae reach ahead of it (s), how long it stays white, the\n// colour it sporulates to and the colour it ages to, how deep its growth\n// rings are, how thick its pin heads come and in what colour, and whether it\n// is a smooth wet patch instead of a felt.\nconst MOULDS = [\n  // Penicillium: velvety blue-green in growth rings behind a white margin.\n  { v: 3.2, fz: 0.35, wh: 0.75, c1: [72, 156, 148], c2: [34, 88, 86], ring: 0.22, pin: 0, pc: null, gl: 0 },\n  // Rhizopus, the black bread mould: grey cotton that runs, then black pin heads.\n  { v: 4.2, fz: 0.9, wh: 1.2, c1: [184, 184, 176], c2: [128, 126, 120], ring: 0.04, pin: 0.3, pc: [20, 18, 24], gl: 0 },\n  // Cladosporium: slow and compact, olive-black velvet with hardly a margin.\n  { v: 1.8, fz: 0.15, wh: 0.2, c1: [76, 92, 58], c2: [34, 42, 30], ring: 0.12, pin: 0, pc: null, gl: 0 },\n  // Aspergillus niger: a yellowish felt that fills with black heads.\n  { v: 2.8, fz: 0.3, wh: 0.5, c1: [206, 192, 124], c2: [70, 62, 52], ring: 0.06, pin: 0.75, pc: [30, 26, 24], gl: 0 },\n  // Aspergillus flavus: yellow-green powder.\n  { v: 2.9, fz: 0.3, wh: 0.6, c1: [178, 190, 70], c2: [112, 128, 46], ring: 0.18, pin: 0, pc: null, gl: 0 },\n  // Neurospora, the orange bread mould: the fastest, a loose orange fleece.\n  { v: 6, fz: 1, wh: 0.5, c1: [252, 170, 80], c2: [230, 122, 52], ring: 0.05, pin: 0, pc: null, gl: 0 },\n  // A pink yeast: slow, smooth and wet.\n  { v: 1.3, fz: 0, wh: 0, c1: [238, 140, 156], c2: [214, 102, 124], ring: 0, pin: 0, pc: null, gl: 1 },\n  // Serratia, the bacterium that makes bread look as if it bleeds.\n  { v: 1.1, fz: 0, wh: 0, c1: [214, 52, 66], c2: [160, 30, 48], ring: 0, pin: 0, pc: null, gl: 1 },\n];\n// What the air carries at each whole turn of K1.\nconst MIX = [\n  [0.62, 0.24, 0.08, 0, 0, 0, 0.06, 0],\n  [0.14, 0.5, 0.08, 0.28, 0, 0, 0, 0],\n  [0.24, 0.06, 0.22, 0, 0.48, 0, 0, 0],\n  [0.06, 0.1, 0, 0, 0, 0.44, 0.24, 0.16],\n];\nfunction pick(k1, u) {\n  const i = min(2, floor(k1)), f = k1 - i, A = MIX[i], B = MIX[i + 1];\n  for (let t = 0, acc = 0; t \u003c A.length; t++) if ((acc += mix(A[t], B[t], f)) > u) return t;\n  return 0;\n}\n\n// The board: long-grain wood under the lamp, scored by old knife cuts.\nfunction board(P) {\n  const bg = (P.bg = new Float32Array(N * 3)), lamp = (P.lamp = new Float32Array(N)), WOOD = [128, 84, 48];\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, L = (lamp[p] = 0.8 + 0.26 * exp(-((x - 25) ** 2 + ((y - 56) * 0.5) ** 2) / 900));\n    const w = x + 4 * vn(x * 0.05 + 7, y * 0.02), n = vn(w * 0.7, y * 0.03), ln = vn(w * 1.9 + 50, y * 0.012);\n    const k = (0.72 + 0.32 * n - max(0, ln - 0.7) * 1.4) * L;\n    for (let c = 0; c \u003c 3; c++) bg[p * 3 + c] = (WOOD[c] + (hash(p, c + 9) - 0.5) * 6) * k * TINT[c];\n  }\n  for (let i = 0; i \u003c 14; i++) {\n    const a = (rnd() - 0.5) * 1.2 + (rnd() \u003c 0.5 ? 0 : PI), len = 4 + rnd() * 10;\n    for (let s = 0, x = rnd() * W, y = rnd() * H; s \u003c len; s++, x += cos(a), y += sin(a) * 0.5) {\n      const xi = round(x), yi = round(y);\n      if (xi >= 0 && xi \u003c W && yi >= 0 && yi \u003c H) for (let c = 0; c \u003c 3; c++) bg[(yi * W + xi) * 3 + c] *= 0.8;\n    }\n  }\n}\n\n// A pan loaf slice: a square body under a domed top that overhangs it at the\n// shoulders, a crust two LEDs deep and baked darker over the dome, the crumb\n// full of holes.\nconst CRUMB = [242, 226, 188];\nconst DENSE = [222, 186, 128];\nconst CR_OUT = [100, 54, 26];\nconst CR_IN = [194, 134, 70];\nfunction slice() {\n  const S = { mask: new Uint8Array(SN), D: new Float32Array(SN), alb: new Float32Array(SN * 3), gr: new Float32Array(SN * 3), hs: new Float32Array(SN), hp: new Float32Array(SN), nz: new Float32Array(SN), T: new Float32Array(SN), own: new Uint8Array(SN), seam: new Uint8Array(SN), sp: [], col: [] };\n  const { mask, D, alb, gr, hs, hp, nz } = S, top = new Uint8Array(SN);\n  const so = floor(rnd() * 99999), flip = rnd() \u003c 0.35, lean = (rnd() - 0.5) * 5, sc = 0.96 + rnd() * 0.04, shy = 17 + rnd() * 5;\n  for (let q = 0; q \u003c SN; q++) {\n    const x = q % SW, y = (q / SW) | 0;\n    let py = (y + 0.5 - 31) / sc + 31, px = (x + 0.5 - 31) / sc, hw = 0;\n    if (flip) py = 62 - py;\n    if (py \u003c shy) px -= lean * (1 - py / shy);\n    if (py > 1 && py \u003c 61) {\n      hw = py \u003c shy ? 30.5 * (1 - ((shy - py) / (shy - 1)) ** 2.2) ** (1 / 2.2) : py \u003c shy + 5 ? 28.5 + 2 * cos(((py - shy) / 5) * PI * 0.5) : 28.5;\n      if (py > 56) hw -= 5 - sqrt(max(0, 25 - (py - 56) ** 2));\n    }\n    mask[q] = abs(px) \u003c hw ? 1 : 0;\n    top[q] = py \u003c shy + 2;\n    D[q] = mask[q] ? 99 : 0;\n  }\n  // Distance in from the edge, two chamfer passes.\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= SW || y >= SH ? 0 : D[y * SW + x]);\n  for (let y = 0; y \u003c SH; y++)\n    for (let x = 0, q = y * SW; x \u003c SW; x++, q++) if (mask[q]) D[q] = min(D[q], at(x - 1, y) + 1, at(x, y - 1) + 1, at(x - 1, y - 1) + 1.41, at(x + 1, y - 1) + 1.41);\n  for (let y = SH - 1; y >= 0; y--)\n    for (let x = SW - 1, q = y * SW + x; x >= 0; x--, q--) if (mask[q]) D[q] = min(D[q], at(x + 1, y) + 1, at(x, y + 1) + 1, at(x + 1, y + 1) + 1.41, at(x - 1, y + 1) + 1.41);\n  for (let q = 0; q \u003c SN; q++) {\n    if (!mask[q]) continue;\n    const x = q % SW, y = (q / SW) | 0, d = D[q], crust = d \u003c 2.5;\n    const t = crust ? cl((d - 1) / 1.4, 0, 1) : cl((d - 2.5) / 5, 0, 1), k = crust ? (0.82 + 0.32 * vn(x * 0.4 + so, y * 0.4)) * (top[q] ? 0.84 : 1) : 0.92 + 0.12 * vn(x * 0.3 + so, y * 0.16);\n    for (let c = 0; c \u003c 3; c++) {\n      alb[q * 3 + c] = (crust ? mix(CR_OUT[c], CR_IN[c], t) : mix(DENSE[c], CRUMB[c], t)) * k + (hash(q + so, c) - 0.5) * 12;\n      gr[q * 3 + c] = hash(q + so, c + 3) * 2 - 1;\n    }\n    hs[q] = hash(q + so, 7);\n    // Pin heads come in clumps.\n    hp[q] = hash(q + so, 8) * (0.5 + vn(x * 0.25 + so, y * 0.25 + 9));\n    // Ragged fronts: a colony reaches some crumb a little sooner than others.\n    nz[q] = (vn(x * 0.3 + so, y * 0.3) - 0.5) * 0.6 + (hash(q + so, 6) - 0.5) * 0.25;\n  }\n  // The holes of the crumb, drawn a little tall the way the dough rose. The\n  // lamp is up and to the left, so the far wall of a hole catches it.\n  for (let i = 0; i \u003c 120; i++) {\n    const rx = 0.5 + 1.7 * rnd() ** 3, ry = rx * (1.05 + 0.6 * rnd()), cx = 4 + rnd() * 54, cy = 4 + rnd() * 54, dp = 0.14 + 0.2 * cl((rx - 0.5) / 1.5, 0, 1);\n    for (let y = floor(cy - ry - 1); y \u003c= cy + ry + 1; y++)\n      for (let x = floor(cx - rx - 1); x \u003c= cx + rx + 1; x++) {\n        const q = y * SW + x;\n        if (x \u003c 0 || y \u003c 0 || x >= SW || y >= SH || D[q] \u003c 3.4) continue;\n        const dx = (x + 0.5 - cx) / rx, dy = (y + 0.5 - cy) / ry, r2 = dx * dx + dy * dy;\n        const f = r2 \u003c 1 ? 1 - dp * (1 - 0.45 * cl((dx + dy) * 0.8, -1, 1)) * (1 - 0.4 * r2) : r2 \u003c 2 && dx + dy \u003c -0.6 ? 1 + dp * 0.3 : 1;\n        alb[q * 3] *= f;\n        alb[q * 3 + 1] *= f;\n        alb[q * 3 + 2] *= f;\n      }\n  }\n  // Forty landing places, each one as far from the others as twelve tries\n  // can find, so the first few cover the slice whatever K3 asks for. Landing\n  // times and kinds are spread the same way.\n  const r0 = rnd(), r1 = rnd();\n  for (let i = 0; i \u003c 40; i++) {\n    let bx = 0, by = 0, bd = -1;\n    for (let c = 0; c \u003c 12; c++) {\n      let q = 0;\n      do q = floor(rnd() * SN);\n      while (D[q] \u003c 2.5);\n      const x = (q % SW) + rnd(), y = floor(q / SW) + rnd();\n      let md = 1e9;\n      for (const s of S.sp) md = min(md, (s.x - x) ** 2 + (s.y - y) ** 2);\n      if (md > bd) (bd = md), (bx = x), (by = y);\n    }\n    S.sp.push({ x: bx, y: by, u: (r1 + i * 0.618034) % 1, t0: 0.2 + 2.8 * ((r0 + i * 0.381966) % 1), a: rnd() * 7, b: rnd() * 7, c: rnd() * 7, dx: rnd() - 0.5 });\n  }\n  return S;\n}\n\n// When each LED of a slice is reached: the first colony to get there owns it.\n// Fronts are lobed, crust is slow ground, and the result is fixed, so a\n// frame only reads it against the slice's age.\nfunction grow(P, S) {\n  const { T, own, mask, D, sp, seam, nz } = S, col = (S.col = []);\n  T.fill(1e9);\n  for (let i = 0; i \u003c P.nsp; i++) {\n    const s = sp[i], M = MOULDS[pick(P.k1, s.u)], iv = 1 / (M.v * P.vk);\n    col.push({ M, t0: s.t0 });\n    for (let q = 0; q \u003c SN; q++) {\n      if (!mask[q]) continue;\n      const dx = (q % SW) + 0.5 - s.x, dy = ((q / SW) | 0) + 0.5 - s.y, d = sqrt(dx * dx + dy * dy);\n      if (s.t0 + d * 0.86 * iv >= T[q]) continue;\n      const a = atan2(dy, dx), t = s.t0 + d * iv * (1 + 0.05 * sin(2 * a + s.a) + 0.05 * sin(5 * a + s.b) + 0.035 * sin(11 * a + s.c));\n      if (t \u003c T[q]) (T[q] = t), (own[q] = i);\n    }\n  }\n  let tmax = 0;\n  for (let q = 0; q \u003c SN; q++) {\n    if (!mask[q]) continue;\n    T[q] += nz[q] + (D[q] \u003c 2.5 ? 0.5 : 0);\n    tmax = max(tmax, T[q]);\n  }\n  // Where two kinds meet they leave a groove.\n  for (let q = 0; q \u003c SN; q++) {\n    const m = mask[q] && col[own[q]].M, r = q % SW \u003c SW - 1 && mask[q + 1] && col[own[q + 1]].M, dn = q + SW \u003c SN && mask[q + SW] && col[own[q + SW]].M;\n    seam[q] = m && ((r && r !== m) || (dn && dn !== m)) ? 1 : 0;\n  }\n  return tmax;\n}\n\nfunction makeSet(P) {\n  const set = { s: [slice(), slice()], A: 0, L: 0 };\n  regrow(P, set);\n  return set;\n}\nfunction regrow(P, set) {\n  set.L = max(grow(P, set.s[0]), grow(P, set.s[1])) + HOLD;\n}\nconst crumb = (x, y) => [round(x), round(y), 0.6 + rnd() * 0.5, rnd() \u003c 0.3];\n\nfunction swap(P) {\n  P.old = P.cur;\n  P.cur = makeSet(P);\n  P.sw = 0;\n  // Crumbs knocked off on the way, in the gaps where they show.\n  for (let i = 0; i \u003c 7; i++) P.crumbs.push(crumb(rnd() * W, [0.5, 63.5, 64.5, 126.5][floor(rnd() * 4)] + (rnd() - 0.5) * 2));\n  P.crumbs.splice(0, max(0, P.crumbs.length - 48));\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, cur: null, old: null, sw: -1, buf: new Float32Array(N * 3), sh: new Float32Array(N), crumbs: [], motes: [], k1: -1 });\n  board(P);\n  for (let i = 0; i \u003c 26; i++) P.crumbs.push(crumb(rnd() * W, rnd() * H));\n  for (let i = 0; i \u003c 12; i++) P.motes.push({ x: rnd() * W, y: rnd() * H, vx: 0, vy: 0, ph: rnd() * 7 });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt, 0, 0.1);\n  const k1 = cl(k[0], 0, 3), nsp = round(cl(k[2], 4, 40)), damp = cl(k[3], 0, 1);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  if (abs(k1 - P.k1) > 0.002 || nsp !== P.nsp || abs(damp - P.damp) > 0.002) {\n    Object.assign(P, { k1, nsp, damp, vk: 0.85 + 0.6 * damp, fk: 1 + 1.8 * damp, wk: 1 + 1.4 * damp });\n    // The first pair opens nearly overrun and goes LEAD seconds in.\n    if (!P.cur) (P.cur = makeSet(P)), (P.cur.A = max(0, P.cur.L - LEAD));\n    else regrow(P, P.cur);\n  }\n  P.t += d;\n  if (P.sw >= 0) {\n    if ((P.sw += d) >= SLIDE) (P.sw = -1), (P.old = null);\n  } else if ((P.cur.A += d * P.rate) >= P.cur.L || input.btnPressed?.[0]) swap(P);\n  for (const m of P.motes) {\n    m.vx += ((rnd() - 0.5) * 24 - m.vx) * d;\n    m.vy += ((rnd() - 0.5) * 24 - m.vy - 2) * d;\n    m.x = (m.x + m.vx * d + W) % W;\n    m.y = (m.y + m.vy * d + H) % H;\n  }\n}\n\nfunction drawSlice(P, S, A, ox, oy) {\n  const { buf, lamp, damp, fk, wk } = P, { mask, alb, gr, hs, hp, T, own, seam, col } = S;\n  const dk0 = 1 - 0.14 * damp, dk1 = 1 - 0.15 * damp, dk2 = 1 - 0.07 * damp, bead = 0.012 * damp;\n  for (let ly = 0; ly \u003c SH; ly++)\n    for (let lx = 0, x = ox, q = ly * SW; lx \u003c SW; lx++, x++, q++) {\n      if (x \u003c 0 || x >= W || !mask[q]) continue;\n      const q3 = q * 3, age = A - T[q];\n      let r = alb[q3] * dk0, g = alb[q3 + 1] * dk1, b = alb[q3 + 2] * dk2;\n      if (age > -2) {\n        const c = col[own[q]], M = c.M, fz = M.fz * fk, wh = M.wh * wk;\n        if (age \u003c 0) {\n          // Loose hyphae run ahead of the colony.\n          if (fz > 0 && hs[q] \u003c 0.8 * (1 + age / fz)) (r = mix(r, WHITE[0], 0.55)), (g = mix(g, WHITE[1], 0.55)), (b = mix(b, WHITE[2], 0.55));\n        } else {\n          let mr, mg, mb, a;\n          if (M.gl) {\n            const t = cl(age / 3, 0, 1), s = 1 + 0.16 * cl(1 - (T[q] - c.t0) / 2, 0, 1) + (hs[q] \u003c 0.04 ? 0.25 : 0);\n            mr = mix(M.c1[0], M.c2[0], t) * s;\n            mg = mix(M.c1[1], M.c2[1], t) * s;\n            mb = mix(M.c1[2], M.c2[2], t) * s;\n            a = min(1, 0.55 + age * 2);\n          } else {\n            const t1 = cl((age - wh) / 0.7, 0, 1), t2 = cl((age - wh - 0.7) / 3, 0, 1);\n            mr = mix(mix(WHITE[0], M.c1[0], t1), M.c2[0], t2);\n            mg = mix(mix(WHITE[1], M.c1[1], t1), M.c2[1], t2);\n            mb = mix(mix(WHITE[2], M.c1[2], t1), M.c2[2], t2);\n            // Growth rings: the colony sporulates in bands as its front goes on.\n            if (M.ring) {\n              const k = 1 - M.ring * t1 * (0.5 + 0.5 * cos((T[q] - c.t0) * 7));\n              (mr *= k), (mg *= k), (mb *= k);\n            }\n            // Damp air keeps a grey cotton of aerial hyphae over the old growth.\n            const hz = damp * 0.45 * t1 * (0.6 + 0.4 * hs[q]);\n            (mr = mix(mr, 206, hz)), (mg = mix(mg, 208, hz)), (mb = mix(mb, 200, hz));\n            if (M.pin) {\n              const pr = M.pin * cl((age - wh) / 2.5, 0, 1), f = hp[q] \u003c pr ? 1 : hp[q] \u003c pr * 1.5 ? 0.5 : 0;\n              (mr = mix(mr, M.pc[0], f)), (mg = mix(mg, M.pc[1], f)), (mb = mix(mb, M.pc[2], f));\n            }\n            const gk = 6 + 8 * t1;\n            mr += gr[q3] * gk;\n            mg += gr[q3 + 1] * gk;\n            mb += gr[q3 + 2] * gk;\n            a = min(1, 0.4 + age * 1.6);\n            // Beads of liquid on old colonies when it is damp.\n            if (age > 2.5 && hs[q] > 1 - bead) (mr = 250), (mg = 246), (mb = 226), (a = 1);\n          }\n          if (seam[q] && age > 0.5) (mr *= 0.7), (mg *= 0.7), (mb *= 0.7);\n          r = mix(r, mr, a);\n          g = mix(g, mg, a);\n          b = mix(b, mb, a);\n        }\n      }\n      const p = (oy + ly) * W + x, L = lamp[p], o = p * 3;\n      buf[o] = r * L;\n      buf[o + 1] = g * L * TINT[1];\n      buf[o + 2] = b * L * TINT[2];\n    }\n}\n\n// Even steps only: the grain is there to be seen, not to be counted twice.\nconst q2 = (v) => (v > 255 ? 254 : v \u003c 0 ? 0 : (v >> 1) \u003c\u003c 1);\nconst ease = (u) => (u = cl(u, 0, 1)) * u * (3 - 2 * u);\n\nexport function draw(display, params) {\n  const P = params, { buf, sh, lamp } = P;\n  if (!P.cur) return;\n  buf.set(P.bg);\n  for (const [x, y, k, big] of P.crumbs)\n    for (let i = 0; i \u003c= (big ? 1 : 0); i++) {\n      const p = y * W + x + i;\n      if (x + i \u003c W && y >= 0 && y \u003c H) (buf[p * 3] = 214 * k * lamp[p]), (buf[p * 3 + 1] = 160 * k * lamp[p]), (buf[p * 3 + 2] = 86 * k * lamp[p]);\n    }\n  // In a swap the bottom slice follows the top one a moment later.\n  const e = [0, 1].map((j) => (P.sw >= 0 ? ease((P.sw - 0.14 * j) / (SLIDE - 0.14)) : 1));\n  const sets = P.sw >= 0 ? [[P.old, e.map((v) => round(-68 * v))], [P.cur, e.map((v) => round(68 * (1 - v)))]] : [[P.cur, [0, 0]]];\n  // Shadows on the board, cast down and to the right.\n  sh.fill(1);\n  for (const [set, ox] of sets)\n    for (let j = 0; j \u003c 2; j++)\n      for (let q = 0, m = set.s[j].mask; q \u003c SN; q++) {\n        if (!m[q]) continue;\n        const x = BX + ox[j] + (q % SW), y = BY[j] + ((q / SW) | 0);\n        if (x + 1 >= 0 && x + 1 \u003c W && y + 2 \u003c H) sh[(y + 2) * W + x + 1] = 0.5;\n        if (x + 2 >= 0 && x + 2 \u003c W && y + 4 \u003c H) sh[(y + 4) * W + x + 2] = min(sh[(y + 4) * W + x + 2], 0.74);\n      }\n  for (let p = 0; p \u003c N; p++) if (sh[p] \u003c 1) (buf[p * 3] *= sh[p]), (buf[p * 3 + 1] *= sh[p]), (buf[p * 3 + 2] *= sh[p]);\n  for (const [set, ox] of sets) for (let j = 0; j \u003c 2; j++) drawSlice(P, set.s[j], set.A, BX + ox[j], BY[j]);\n  // Spores settling out of the air, and dust in the lamplight.\n  const add = (x, y, v) => {\n    const xi = round(x), yi = round(y);\n    if (xi >= 0 && xi \u003c W && yi >= 0 && yi \u003c H) for (let c = 0, o = (yi * W + xi) * 3; c \u003c 3; c++) buf[o + c] += v * TINT[c];\n  };\n  if (P.sw \u003c 0)\n    for (let j = 0; j \u003c 2; j++)\n      for (const s of P.cur.s[j].sp.slice(0, P.nsp)) {\n        const u = (s.t0 - P.cur.A) / 0.6;\n        if (u > 0 && u \u003c 1) add(BX + s.x + s.dx * 16 * u, BY[j] + s.y - 10 * u, 150 * (1 - u));\n      }\n  for (const m of P.motes) add(m.x, m.y, 90 * lamp[(m.y | 0) * W + (m.x | 0)] ** 4 * (0.5 + 0.5 * sin(P.t * 3 + m.ph)) ** 2);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, q2(buf[o]), q2(buf[o + 1]), q2(buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Mould=0..3, Speed=0.2..3, Spores=4..40, Damp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Mould","min":0,"max":3,"about":"What the air carries: the bread bin at 0 (blue-green Penicillium, black pin mould and the odd pink yeast), black bread mould at 1 (grey Rhizopus cotton and Aspergillus niger), green-gold Aspergillus and olive Cladosporium at 2, orange Neurospora with pink yeast and blood-red Serratia at 3."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the time-lapse runs: at 2 a pair of slices goes from the first spore to overrun in about fifteen seconds; at 0.2 the colonies creep."},{"name":"Spores","min":4,"max":40,"about":"How many colonies start on each slice: four that grow into wide ringed discs at 4, up to forty small ones that close up fast at 40."},{"name":"Damp","min":0,"max":1,"about":"A dry kitchen near 0, with compact velvety colonies and thin white rims; turned up, the bread greys, the mould grows faster under a long white cotton and beads of liquid stand on the older colonies."}],"start":[0,2,4,0.06],"measures":{"motion":0.3259,"detail":0.0597,"edges":0.2499,"complexity":2.3664,"coverage":0.9889,"colour":0.1543,"drift":0.3583},"knobResponse":[0.188,0.3046,0.062,0.1018]},{"slug":"brushstrokes","title":"Brushstrokes","family":"noise","round":17,"note":"반 고흐의 「별이 빛나는 밤」을 짧고 두꺼운 붓질로 칠하고 또 칠해요. 흐름을 따라 놓인 군청과 코발트 붓질이 노란 별무리와 초승달을 감아 돌고, 불꽃처럼 솟은 사이프러스 옆 마을에 창이 켜져요.","idea":"A night sky is painted and painted again in short thick strokes laid along a swirling flow field, ultramarine and cobalt curling round yellow-white stars and a crescent moon, over a flame-shaped cypress and a village with lit windows.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Brushstrokes\n// Family:  noise\n// Idea:    A night sky is painted and painted again in short thick strokes laid along a swirling flow field, ultramarine and cobalt curling round yellow-white stars and a crescent moon, over a flame-shaped cypress and a village with lit windows.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: after Vincent van Gogh's The Starry Night (1889), painted with strokes traced along the level lines of a stream function\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Flow=0.2..3, Length=4..12, Swirl=0..1\n//\n// Knob 1: Palette. Turns every colour of the painting round the colour wheel together, starting from Van Gogh's blue and yellow.\n// Knob 2: Flow. How fast the paint moves: at 2 the whole canvas is painted over every three seconds and the big swirl's arms turn on by a band of colour every second and a half; at 0.2 everything goes ten times slower.\n// Knob 3: Length. How long a stroke is, from short dabs four LEDs long to sweeps of twelve; the cypress takes longer strokes and the village shorter ones.\n// Knob 4: Swirl. How hard the sky turns: low, the stars sit in their haloes and the sky rolls past in long waves; turned up, the big spiral grows and the waves break into eddies.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Regions. A stroke keeps to the region it starts in, so the cypress and the\n// houses keep their outlines however many strokes cross the sky beside them.\nconst SKY = 0;\nconst TREE = 1;\nconst HILL = 2;\nconst WALL = 3;\nconst ROOF = 4;\nconst SPIRE = 5;\nconst LIT = 6;\nconst SHADE = 7;\n\n// The two swirls in the middle of the sky as x, y, radius, turn; the big one's\n// arms rotate. Then the moon and nine stars as x, y, radius.\nconst SWIRLS = [\n  [35, 50, 10, 1],\n  [16, 39, 7, -1],\n];\nconst MOON = [50, 14, 5.5];\nconst STARS = [\n  [9, 10, 4.2],\n  [27, 8, 3.6],\n  [40, 26, 4.8],\n  [6, 27, 3.6],\n  [59, 39, 4.2],\n  [24, 70, 3.6],\n  [50, 68, 4.8],\n  [41, 85, 3],\n  [59, 86, 3.6],\n];\n\n// Colours, 0..255. The sky's bands cycle through six blues and one streak of\n// pale yellow-green; the stars and the moon go out from their cores through\n// yellow to a green-white ring and a pale blue one.\nconst SKY_BANDS = [\n  [12, 28, 150],\n  [20, 62, 215],\n  [44, 110, 235],\n  [100, 150, 240],\n  [190, 206, 96],\n  [24, 80, 220],\n  [16, 90, 180],\n];\nconst STAR_RINGS = [\n  [0.45, 255, 250, 200],\n  [0.9, 255, 228, 60],\n  [1.3, 245, 196, 30],\n  [1.65, 205, 220, 90],\n  [2.0, 90, 150, 230],\n];\nconst MOON_RINGS = [\n  [1.35, 238, 182, 36],\n  [1.75, 200, 206, 100],\n  [2.2, 100, 150, 222],\n];\nconst MOON_COLS = [\n  [255, 248, 170],\n  [214, 112, 22],\n];\nconst TREE_COLS = [\n  [22, 54, 34],\n  [42, 74, 30],\n  [70, 58, 26],\n  [20, 38, 58],\n  [34, 90, 52],\n  [14, 30, 26],\n];\nconst HILL_COLS = [\n  [24, 40, 130],\n  [20, 64, 120],\n  [44, 50, 150],\n  [22, 76, 96],\n];\nconst WALL_COLS = [\n  [54, 80, 140],\n  [80, 92, 150],\n  [40, 90, 130],\n];\nconst ROOF_COLS = [\n  [28, 34, 74],\n  [116, 78, 44],\n  [40, 52, 96],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The cypress: a flame that rises from the foot of the panel to row 42, its\n// sides licking in and out.\nfunction cypressHalf(y) {\n  if (y \u003c 42) return -1;\n  const u = (y - 42) / 86;\n  return 10 * Math.pow(u, 0.72) * (1 + 0.22 * Math.sin(y * 0.55 + 1) + 0.1 * Math.sin(y * 1.3));\n}\nfunction cypressMid(y) {\n  return 13 + 2.4 * Math.sin(y * 0.09 + 0.4);\n}\nfunction hillTop(x) {\n  return 96 + 4 * Math.sin(x * 0.085 + 0.6) + 1.8 * Math.sin(x * 0.27 + 2);\n}\n\n// The village, the same on every load: a back row of houses up the slope and\n// a front row along the foot of the panel, each house a wall under a pitched\n// roof with a window or two, and the church's spire standing up between them.\nfunction house(P, x, top, w, bottom, b, win) {\n  const reg = P.reg;\n  const mat = P.mat;\n  const wc = Math.floor(hash(b, 4) * WALL_COLS.length);\n  const rc = Math.floor(hash(b, 5) * ROOF_COLS.length);\n  for (let y = top; y \u003c bottom; y++) {\n    const r = y - top;\n    for (let c = x; c \u003c x + w && c \u003c W; c++) {\n      const p = y * W + c;\n      if (reg[p] === TREE) continue;\n      if (r \u003c 2) {\n        if (r === 0 && (c === x || c === x + w - 1)) continue;\n        reg[p] = ROOF;\n        mat[p] = rc;\n      } else {\n        reg[p] = WALL;\n        mat[p] = wc;\n      }\n      win[p] = 0;\n    }\n  }\n  const n = 1 + Math.floor(hash(b, 6) * 2.4);\n  for (let i = 0; i \u003c n; i++) {\n    const c = x + 1 + Math.floor(hash(b, 10 + i) * (w - 2));\n    const y = top + 3 + Math.floor(hash(b, 20 + i) * Math.max(1, bottom - top - 5));\n    if (c \u003c W && y \u003c H && reg[y * W + c] === WALL) win[y * W + c] = 1;\n  }\n}\n\nfunction buildVillage(P) {\n  const reg = P.reg;\n  const mat = P.mat;\n  const win = new Uint8Array(N);\n  // The church's spire and tower first, so the houses stand in front of it.\n  for (let y = 84; y \u003c 112; y++) {\n    const half = y \u003c 97 ? 0 : 1;\n    for (let c = 45 - half; c \u003c= 45 + half; c++) {\n      reg[y * W + c] = SPIRE;\n      mat[y * W + c] = 0;\n    }\n  }\n  win[104 * W + 45] = 1;\n  let b = 0;\n  for (let row = 0; row \u003c 2; row++) {\n    let x = row ? 20 : 24;\n    while (x \u003c W - 2) {\n      const w = 4 + Math.floor(hash(b, 1) * 4);\n      const top = (row ? 113 : 103) + Math.floor(hash(b, 2) * 5);\n      const bottom = row ? H : top + 7 + Math.floor(hash(b, 3) * 3);\n      if (!(row === 0 && x \u003c= 45 && x + w > 44)) house(P, x, top, w, bottom, b, win);\n      x += w + (hash(b, 7) \u003c 0.45 ? 1 + Math.floor(hash(b, 8) * 3) : 0);\n      b++;\n    }\n  }\n  const wins = [];\n  for (let p = 0; p \u003c N; p++) if (win[p] && (reg[p] === WALL || reg[p] === SPIRE)) wins.push(p);\n  P.wins = Int32Array.from(wins);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.canvas = new Float32Array(N * 3);\n  P.reg = new Uint8Array(N);\n  P.mat = new Uint8Array(N);\n  P.col = new Float32Array(3);\n  P.m = new Float32Array(9);\n  for (let y = 0; y \u003c H; y++) {\n    const half = cypressHalf(y);\n    const mid = cypressMid(y);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const mx = x + 0.5 - MOON[0];\n      const my = y + 0.5 - MOON[1];\n      const cx = mx - 2.6;\n      const cy = my + 1.8;\n      if (half > 0 && Math.abs(x + 0.5 - mid) \u003c half) P.reg[p] = TREE;\n      else if (y >= hillTop(x)) P.reg[p] = HILL;\n      else if (mx * mx + my * my \u003c MOON[2] * MOON[2]) P.reg[p] = cx * cx + cy * cy > 20 ? LIT : SHADE;\n      else P.reg[p] = SKY;\n      P.mat[p] = Math.floor(hash(x >> 2, y >> 1) * 4);\n    }\n  }\n  buildVillage(P);\n  P.t = 0;\n  P.hue = 0;\n  P.flow = 2;\n  P.len = 4;\n  P.swirl = 0.06;\n  P.debt = 0;\n  P.started = false;\n}\n\n// The stream function: rolling bands across the sky, and a bump round each\n// swirl, star and the moon. Strokes run along its level lines, and the sky's\n// colour is picked by its value, so a stroke stays inside its band of colour.\nfunction psi(P, x, y) {\n  const t = P.t;\n  const g = 0.8 + 2.4 * P.swirl;\n  let v = y + 5 * Math.sin(x * 0.11 + y * 0.05 + t * 0.07) + 2.5 * Math.sin(x * 0.05 - y * 0.09 - t * 0.05);\n  for (let i = 0; i \u003c SWIRLS.length; i++) {\n    const s = SWIRLS[i];\n    const R = s[2] * (0.9 + 0.5 * P.swirl);\n    const dx = x - s[0];\n    const dy = y - s[1];\n    v += s[3] * 3.2 * R * g * Math.exp(-(dx * dx + dy * dy) / (2 * R * R));\n  }\n  const mr = MOON[2] * 1.7;\n  const mx = x - MOON[0];\n  const my = y - MOON[1];\n  v += 2.6 * mr * Math.exp(-(mx * mx + my * my) / (2 * mr * mr));\n  for (let i = 0; i \u003c STARS.length; i++) {\n    const s = STARS[i];\n    const R = s[2] * 1.2;\n    const dx = x - s[0];\n    const dy = y - s[1];\n    const d2 = dx * dx + dy * dy;\n    if (d2 > 50 * R * R) continue;\n    v += (i & 1 ? -2.6 : 2.6) * R * Math.exp(-d2 / (2 * R * R));\n  }\n  return v;\n}\n\n// Which way a stroke goes at (x, y), as a unit vector in out[0], out[1].\nfunction dirAt(P, reg, x, y, out) {\n  let dx;\n  let dy;\n  if (reg === SKY || reg >= LIT) {\n    const e = 0.5;\n    dx = psi(P, x, y + e) - psi(P, x, y - e);\n    dy = psi(P, x - e, y) - psi(P, x + e, y);\n    // Swirl also stirs a wobble into the flow, so the long waves break up.\n    const a = P.swirl * 1.3 * Math.sin(x * 0.31 + y * 0.17 + P.t * 0.4) * Math.sin(y * 0.23 - x * 0.07);\n    const c = Math.cos(a);\n    const s = Math.sin(a);\n    const rx = dx * c - dy * s;\n    dy = dx * s + dy * c;\n    dx = rx;\n  } else if (reg === TREE) {\n    // The cypress licks upward like a flame.\n    dx = 0.45 * Math.sin(y * 0.21 + x * 0.35 + P.t * 0.3);\n    dy = -1;\n  } else if (reg === HILL) {\n    dx = 1;\n    dy = 0.35 * Math.cos(x * 0.085 + 0.6) + 0.4 * Math.sin(y * 0.4 + x * 0.2);\n  } else if (reg === SPIRE) {\n    dx = 0;\n    dy = 1;\n  } else {\n    dx = 1;\n    dy = 0.15 * Math.sin(x + y);\n  }\n  const l = Math.hypot(dx, dy) || 1;\n  out[0] = dx / l;\n  out[1] = dy / l;\n}\n\nfunction ringCol(rings, d, out) {\n  for (let i = 0; i \u003c rings.length; i++) {\n    if (d \u003c rings[i][0]) {\n      out[0] = rings[i][1];\n      out[1] = rings[i][2];\n      out[2] = rings[i][3];\n      return true;\n    }\n  }\n  return false;\n}\n\n// The colour the painter loads for a stroke that starts at (x, y).\nfunction colourAt(P, reg, p, x, y, out) {\n  if (reg === TREE) return pick(TREE_COLS, P.mat[p] + Math.floor(Math.random() * 3), out);\n  if (reg === HILL) return pick(HILL_COLS, P.mat[p] + Math.floor(Math.random() * 2), out);\n  if (reg === WALL) return pick(WALL_COLS, P.mat[p], out);\n  if (reg === ROOF) return pick(ROOF_COLS, P.mat[p], out);\n  if (reg === SPIRE) return pick(ROOF_COLS, 0, out);\n  // The moon: a crescent lit on its lower left, its shadowed part glowing orange.\n  if (reg === LIT) return pick(MOON_COLS, 0, out);\n  if (reg === SHADE) return pick(MOON_COLS, 1, out);\n  const mx = x - MOON[0];\n  const my = y - MOON[1];\n  const md = Math.sqrt(mx * mx + my * my) / MOON[2];\n  if (ringCol(MOON_RINGS, md, out)) return;\n  for (let i = 0; i \u003c STARS.length; i++) {\n    const s = STARS[i];\n    const dx = x - s[0];\n    const dy = y - s[1];\n    // Each star's halo breathes on its own clock.\n    const r = s[2] * (1 + 0.12 * Math.sin(P.t * (0.5 + 0.13 * i) + i * 2.1));\n    if (ringCol(STAR_RINGS, Math.sqrt(dx * dx + dy * dy) / r, out)) return;\n  }\n  // The sky: bands picked by the stream function, and round the big swirl\n  // two spiral arms that turn as the clock runs.\n  const s = SWIRLS[0];\n  const dx = x - s[0];\n  const dy = y - s[1];\n  const near = Math.exp(-(dx * dx + dy * dy) / 300);\n  const k = psi(P, x, y) * 0.14 + near * (Math.atan2(dy, dx) / Math.PI + P.t * 0.12) + P.t * 0.02;\n  const band = SKY_BANDS[((Math.floor(k * 3) % 7) + 7) % 7];\n  out[0] = band[0];\n  out[1] = band[1];\n  out[2] = band[2];\n}\n\nfunction pick(list, i, out) {\n  const c = list[i % list.length];\n  out[0] = c[0];\n  out[1] = c[1];\n  out[2] = c[2];\n}\n\nconst DIR = new Float32Array(2);\nconst SAT = 1.15;\n\n// One stroke: load the brush, then walk half its length each way along the\n// flow from where it starts, one or two LEDs wide, until it runs off its region.\nfunction stroke(P, x0, y0) {\n  const p0 = Math.floor(y0) * W + Math.floor(x0);\n  const reg = P.reg[p0];\n  const col = P.col;\n  colourAt(P, reg, p0, x0, y0, col);\n  // Each stroke mixes its own shade: a little lighter or darker, a little warmer or cooler.\n  const v = 0.82 + 0.34 * Math.random();\n  const warm = (Math.random() - 0.5) * 34;\n  const r = col[0] * v + warm;\n  const g = col[1] * v + (Math.random() - 0.5) * 22;\n  const b = col[2] * v - warm * 0.6;\n  let len = P.len * (0.7 + 0.6 * Math.random());\n  if (reg === TREE) len *= 1.4;\n  else if (reg >= WALL) len *= 0.45;\n  const wide = reg !== SPIRE && Math.random() \u003c 0.55;\n  const c = P.canvas;\n  for (let side = -1; side \u003c= 1; side += 2) {\n    let x = x0;\n    let y = y0;\n    const steps = Math.ceil(len * 0.5 / 0.6);\n    for (let s = 0; s \u003c steps; s++) {\n      const px = Math.floor(x);\n      const py = Math.floor(y);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) break;\n      const p = py * W + px;\n      if (P.reg[p] !== reg) break;\n      dirAt(P, reg, x, y, DIR);\n      // Bristle grain: about one LED in eight picks up a lighter or darker fleck.\n      const q = Math.random() \u003c 0.13 ? 1 + (Math.random() - 0.5) * 0.16 : 1;\n      c[p * 3] = r * q;\n      c[p * 3 + 1] = g * q;\n      c[p * 3 + 2] = b * q;\n      if (wide) {\n        const nx = Math.floor(x - DIR[1] * 0.9);\n        const ny = Math.floor(y + DIR[0] * 0.9);\n        const n = ny * W + nx;\n        if (nx >= 0 && nx \u003c W && ny >= 0 && ny \u003c H && P.reg[n] === reg) {\n          const q2 = Math.random() \u003c 0.13 ? 0.9 + (Math.random() - 0.5) * 0.16 : 0.9;\n          c[n * 3] = r * q2;\n          c[n * 3 + 1] = g * q2;\n          c[n * 3 + 2] = b * q2;\n        }\n      }\n      x += DIR[0] * 0.6 * side;\n      y += DIR[1] * 0.6 * side;\n    }\n  }\n}\n\nfunction paint(P, count) {\n  for (let i = 0; i \u003c count; i++) stroke(P, Math.random() * W, Math.random() * H);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.flow = Math.max(0.2, Math.min(3, k[1]));\n  P.len = Math.max(4, Math.min(12, k[2]));\n  P.swirl = Math.max(0, Math.min(1, k[3]));\n  if (!P.started) {\n    // The canvas is already painted when the panel opens: a ground of flat\n    // colour, then enough strokes to cover it three times over while the\n    // clock runs four seconds, so the knobs have set the picture.\n    P.started = true;\n    for (let y = 0; y \u003c H; y++) {\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        colourAt(P, P.reg[p], p, x + 0.5, y + 0.5, P.col);\n        P.canvas[p * 3] = P.col[0] * 0.9;\n        P.canvas[p * 3 + 1] = P.col[1] * 0.9;\n        P.canvas[p * 3 + 2] = P.col[2] * 0.9;\n      }\n    }\n    const per = Math.round((3 * N) / (1.55 * P.len) / 40);\n    for (let i = 0; i \u003c 40; i++) {\n      P.t += 0.1 * P.flow;\n      paint(P, per);\n    }\n  }\n  P.t += dt * P.flow;\n  // A stroke covers about one and a half times its length in LEDs, so at\n  // Flow 2 the canvas is painted over every three seconds whatever the\n  // Length: 440 strokes a second at Length 4, 147 at Length 12.\n  P.debt += (dt * P.flow * 880) / P.len;\n  const n = Math.floor(P.debt);\n  P.debt -= n;\n  paint(P, n);\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const c = P.canvas;\n  const m = P.m;\n  // Palette: a hue rotation that keeps each colour's lightness, with the\n  // colours pushed a little further from grey, the way oil paint sits fresh.\n  const a = P.hue * Math.PI * 2;\n  const cs = Math.cos(a) * SAT;\n  const sn = Math.sin(a) * SAT;\n  m[0] = 0.213 + cs * 0.787 - sn * 0.213;\n  m[1] = 0.715 - cs * 0.715 - sn * 0.715;\n  m[2] = 0.072 - cs * 0.072 + sn * 0.928;\n  m[3] = 0.213 - cs * 0.213 + sn * 0.143;\n  m[4] = 0.715 + cs * 0.285 + sn * 0.14;\n  m[5] = 0.072 - cs * 0.072 - sn * 0.283;\n  m[6] = 0.213 - cs * 0.213 - sn * 0.787;\n  m[7] = 0.715 - cs * 0.715 + sn * 0.715;\n  m[8] = 0.072 + cs * 0.928 + sn * 0.072;\n  for (let p = 0; p \u003c N; p++) {\n    const r = c[p * 3];\n    const g = c[p * 3 + 1];\n    const b = c[p * 3 + 2];\n    const R = m[0] * r + m[1] * g + m[2] * b;\n    const G = m[3] * r + m[4] * g + m[5] * b;\n    const B = m[6] * r + m[7] * g + m[8] * b;\n    display.setPixel(p % W, (p / W) | 0, R \u003c 0 ? 0 : R > 255 ? 255 : R, G \u003c 0 ? 0 : G > 255 ? 255 : G, B \u003c 0 ? 0 : B > 255 ? 255 : B);\n  }\n  // The village's windows, dabbed on last; one now and then goes dim and comes back.\n  const wins = P.wins;\n  for (let i = 0; i \u003c wins.length; i++) {\n    const p = wins[i];\n    const f = Math.sin(time * 0.7 + i * 2.3) > 0.93 ? 0.55 : 1;\n    const r = 255 * f;\n    const g = 214 * f;\n    const b = 72 * f;\n    const R = m[0] * r + m[1] * g + m[2] * b;\n    const G = m[3] * r + m[4] * g + m[5] * b;\n    const B = m[6] * r + m[7] * g + m[8] * b;\n    display.setPixel(p % W, (p / W) | 0, Math.max(0, Math.min(255, R)), Math.max(0, Math.min(255, G)), Math.max(0, Math.min(255, B)));\n  }\n}\n","layer":{"id":"layer-brushstrokes","type":"code","name":"brushstrokes","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Brushstrokes\n// Family:  noise\n// Idea:    A night sky is painted and painted again in short thick strokes laid along a swirling flow field, ultramarine and cobalt curling round yellow-white stars and a crescent moon, over a flame-shaped cypress and a village with lit windows.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: after Vincent van Gogh's The Starry Night (1889), painted with strokes traced along the level lines of a stream function\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Flow=0.2..3, Length=4..12, Swirl=0..1\n//\n// Knob 1: Palette. Turns every colour of the painting round the colour wheel together, starting from Van Gogh's blue and yellow.\n// Knob 2: Flow. How fast the paint moves: at 2 the whole canvas is painted over every three seconds and the big swirl's arms turn on by a band of colour every second and a half; at 0.2 everything goes ten times slower.\n// Knob 3: Length. How long a stroke is, from short dabs four LEDs long to sweeps of twelve; the cypress takes longer strokes and the village shorter ones.\n// Knob 4: Swirl. How hard the sky turns: low, the stars sit in their haloes and the sky rolls past in long waves; turned up, the big spiral grows and the waves break into eddies.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Regions. A stroke keeps to the region it starts in, so the cypress and the\n// houses keep their outlines however many strokes cross the sky beside them.\nconst SKY = 0;\nconst TREE = 1;\nconst HILL = 2;\nconst WALL = 3;\nconst ROOF = 4;\nconst SPIRE = 5;\nconst LIT = 6;\nconst SHADE = 7;\n\n// The two swirls in the middle of the sky as x, y, radius, turn; the big one's\n// arms rotate. Then the moon and nine stars as x, y, radius.\nconst SWIRLS = [\n  [35, 50, 10, 1],\n  [16, 39, 7, -1],\n];\nconst MOON = [50, 14, 5.5];\nconst STARS = [\n  [9, 10, 4.2],\n  [27, 8, 3.6],\n  [40, 26, 4.8],\n  [6, 27, 3.6],\n  [59, 39, 4.2],\n  [24, 70, 3.6],\n  [50, 68, 4.8],\n  [41, 85, 3],\n  [59, 86, 3.6],\n];\n\n// Colours, 0..255. The sky's bands cycle through six blues and one streak of\n// pale yellow-green; the stars and the moon go out from their cores through\n// yellow to a green-white ring and a pale blue one.\nconst SKY_BANDS = [\n  [12, 28, 150],\n  [20, 62, 215],\n  [44, 110, 235],\n  [100, 150, 240],\n  [190, 206, 96],\n  [24, 80, 220],\n  [16, 90, 180],\n];\nconst STAR_RINGS = [\n  [0.45, 255, 250, 200],\n  [0.9, 255, 228, 60],\n  [1.3, 245, 196, 30],\n  [1.65, 205, 220, 90],\n  [2.0, 90, 150, 230],\n];\nconst MOON_RINGS = [\n  [1.35, 238, 182, 36],\n  [1.75, 200, 206, 100],\n  [2.2, 100, 150, 222],\n];\nconst MOON_COLS = [\n  [255, 248, 170],\n  [214, 112, 22],\n];\nconst TREE_COLS = [\n  [22, 54, 34],\n  [42, 74, 30],\n  [70, 58, 26],\n  [20, 38, 58],\n  [34, 90, 52],\n  [14, 30, 26],\n];\nconst HILL_COLS = [\n  [24, 40, 130],\n  [20, 64, 120],\n  [44, 50, 150],\n  [22, 76, 96],\n];\nconst WALL_COLS = [\n  [54, 80, 140],\n  [80, 92, 150],\n  [40, 90, 130],\n];\nconst ROOF_COLS = [\n  [28, 34, 74],\n  [116, 78, 44],\n  [40, 52, 96],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The cypress: a flame that rises from the foot of the panel to row 42, its\n// sides licking in and out.\nfunction cypressHalf(y) {\n  if (y \u003c 42) return -1;\n  const u = (y - 42) / 86;\n  return 10 * Math.pow(u, 0.72) * (1 + 0.22 * Math.sin(y * 0.55 + 1) + 0.1 * Math.sin(y * 1.3));\n}\nfunction cypressMid(y) {\n  return 13 + 2.4 * Math.sin(y * 0.09 + 0.4);\n}\nfunction hillTop(x) {\n  return 96 + 4 * Math.sin(x * 0.085 + 0.6) + 1.8 * Math.sin(x * 0.27 + 2);\n}\n\n// The village, the same on every load: a back row of houses up the slope and\n// a front row along the foot of the panel, each house a wall under a pitched\n// roof with a window or two, and the church's spire standing up between them.\nfunction house(P, x, top, w, bottom, b, win) {\n  const reg = P.reg;\n  const mat = P.mat;\n  const wc = Math.floor(hash(b, 4) * WALL_COLS.length);\n  const rc = Math.floor(hash(b, 5) * ROOF_COLS.length);\n  for (let y = top; y \u003c bottom; y++) {\n    const r = y - top;\n    for (let c = x; c \u003c x + w && c \u003c W; c++) {\n      const p = y * W + c;\n      if (reg[p] === TREE) continue;\n      if (r \u003c 2) {\n        if (r === 0 && (c === x || c === x + w - 1)) continue;\n        reg[p] = ROOF;\n        mat[p] = rc;\n      } else {\n        reg[p] = WALL;\n        mat[p] = wc;\n      }\n      win[p] = 0;\n    }\n  }\n  const n = 1 + Math.floor(hash(b, 6) * 2.4);\n  for (let i = 0; i \u003c n; i++) {\n    const c = x + 1 + Math.floor(hash(b, 10 + i) * (w - 2));\n    const y = top + 3 + Math.floor(hash(b, 20 + i) * Math.max(1, bottom - top - 5));\n    if (c \u003c W && y \u003c H && reg[y * W + c] === WALL) win[y * W + c] = 1;\n  }\n}\n\nfunction buildVillage(P) {\n  const reg = P.reg;\n  const mat = P.mat;\n  const win = new Uint8Array(N);\n  // The church's spire and tower first, so the houses stand in front of it.\n  for (let y = 84; y \u003c 112; y++) {\n    const half = y \u003c 97 ? 0 : 1;\n    for (let c = 45 - half; c \u003c= 45 + half; c++) {\n      reg[y * W + c] = SPIRE;\n      mat[y * W + c] = 0;\n    }\n  }\n  win[104 * W + 45] = 1;\n  let b = 0;\n  for (let row = 0; row \u003c 2; row++) {\n    let x = row ? 20 : 24;\n    while (x \u003c W - 2) {\n      const w = 4 + Math.floor(hash(b, 1) * 4);\n      const top = (row ? 113 : 103) + Math.floor(hash(b, 2) * 5);\n      const bottom = row ? H : top + 7 + Math.floor(hash(b, 3) * 3);\n      if (!(row === 0 && x \u003c= 45 && x + w > 44)) house(P, x, top, w, bottom, b, win);\n      x += w + (hash(b, 7) \u003c 0.45 ? 1 + Math.floor(hash(b, 8) * 3) : 0);\n      b++;\n    }\n  }\n  const wins = [];\n  for (let p = 0; p \u003c N; p++) if (win[p] && (reg[p] === WALL || reg[p] === SPIRE)) wins.push(p);\n  P.wins = Int32Array.from(wins);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.canvas = new Float32Array(N * 3);\n  P.reg = new Uint8Array(N);\n  P.mat = new Uint8Array(N);\n  P.col = new Float32Array(3);\n  P.m = new Float32Array(9);\n  for (let y = 0; y \u003c H; y++) {\n    const half = cypressHalf(y);\n    const mid = cypressMid(y);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const mx = x + 0.5 - MOON[0];\n      const my = y + 0.5 - MOON[1];\n      const cx = mx - 2.6;\n      const cy = my + 1.8;\n      if (half > 0 && Math.abs(x + 0.5 - mid) \u003c half) P.reg[p] = TREE;\n      else if (y >= hillTop(x)) P.reg[p] = HILL;\n      else if (mx * mx + my * my \u003c MOON[2] * MOON[2]) P.reg[p] = cx * cx + cy * cy > 20 ? LIT : SHADE;\n      else P.reg[p] = SKY;\n      P.mat[p] = Math.floor(hash(x >> 2, y >> 1) * 4);\n    }\n  }\n  buildVillage(P);\n  P.t = 0;\n  P.hue = 0;\n  P.flow = 2;\n  P.len = 4;\n  P.swirl = 0.06;\n  P.debt = 0;\n  P.started = false;\n}\n\n// The stream function: rolling bands across the sky, and a bump round each\n// swirl, star and the moon. Strokes run along its level lines, and the sky's\n// colour is picked by its value, so a stroke stays inside its band of colour.\nfunction psi(P, x, y) {\n  const t = P.t;\n  const g = 0.8 + 2.4 * P.swirl;\n  let v = y + 5 * Math.sin(x * 0.11 + y * 0.05 + t * 0.07) + 2.5 * Math.sin(x * 0.05 - y * 0.09 - t * 0.05);\n  for (let i = 0; i \u003c SWIRLS.length; i++) {\n    const s = SWIRLS[i];\n    const R = s[2] * (0.9 + 0.5 * P.swirl);\n    const dx = x - s[0];\n    const dy = y - s[1];\n    v += s[3] * 3.2 * R * g * Math.exp(-(dx * dx + dy * dy) / (2 * R * R));\n  }\n  const mr = MOON[2] * 1.7;\n  const mx = x - MOON[0];\n  const my = y - MOON[1];\n  v += 2.6 * mr * Math.exp(-(mx * mx + my * my) / (2 * mr * mr));\n  for (let i = 0; i \u003c STARS.length; i++) {\n    const s = STARS[i];\n    const R = s[2] * 1.2;\n    const dx = x - s[0];\n    const dy = y - s[1];\n    const d2 = dx * dx + dy * dy;\n    if (d2 > 50 * R * R) continue;\n    v += (i & 1 ? -2.6 : 2.6) * R * Math.exp(-d2 / (2 * R * R));\n  }\n  return v;\n}\n\n// Which way a stroke goes at (x, y), as a unit vector in out[0], out[1].\nfunction dirAt(P, reg, x, y, out) {\n  let dx;\n  let dy;\n  if (reg === SKY || reg >= LIT) {\n    const e = 0.5;\n    dx = psi(P, x, y + e) - psi(P, x, y - e);\n    dy = psi(P, x - e, y) - psi(P, x + e, y);\n    // Swirl also stirs a wobble into the flow, so the long waves break up.\n    const a = P.swirl * 1.3 * Math.sin(x * 0.31 + y * 0.17 + P.t * 0.4) * Math.sin(y * 0.23 - x * 0.07);\n    const c = Math.cos(a);\n    const s = Math.sin(a);\n    const rx = dx * c - dy * s;\n    dy = dx * s + dy * c;\n    dx = rx;\n  } else if (reg === TREE) {\n    // The cypress licks upward like a flame.\n    dx = 0.45 * Math.sin(y * 0.21 + x * 0.35 + P.t * 0.3);\n    dy = -1;\n  } else if (reg === HILL) {\n    dx = 1;\n    dy = 0.35 * Math.cos(x * 0.085 + 0.6) + 0.4 * Math.sin(y * 0.4 + x * 0.2);\n  } else if (reg === SPIRE) {\n    dx = 0;\n    dy = 1;\n  } else {\n    dx = 1;\n    dy = 0.15 * Math.sin(x + y);\n  }\n  const l = Math.hypot(dx, dy) || 1;\n  out[0] = dx / l;\n  out[1] = dy / l;\n}\n\nfunction ringCol(rings, d, out) {\n  for (let i = 0; i \u003c rings.length; i++) {\n    if (d \u003c rings[i][0]) {\n      out[0] = rings[i][1];\n      out[1] = rings[i][2];\n      out[2] = rings[i][3];\n      return true;\n    }\n  }\n  return false;\n}\n\n// The colour the painter loads for a stroke that starts at (x, y).\nfunction colourAt(P, reg, p, x, y, out) {\n  if (reg === TREE) return pick(TREE_COLS, P.mat[p] + Math.floor(Math.random() * 3), out);\n  if (reg === HILL) return pick(HILL_COLS, P.mat[p] + Math.floor(Math.random() * 2), out);\n  if (reg === WALL) return pick(WALL_COLS, P.mat[p], out);\n  if (reg === ROOF) return pick(ROOF_COLS, P.mat[p], out);\n  if (reg === SPIRE) return pick(ROOF_COLS, 0, out);\n  // The moon: a crescent lit on its lower left, its shadowed part glowing orange.\n  if (reg === LIT) return pick(MOON_COLS, 0, out);\n  if (reg === SHADE) return pick(MOON_COLS, 1, out);\n  const mx = x - MOON[0];\n  const my = y - MOON[1];\n  const md = Math.sqrt(mx * mx + my * my) / MOON[2];\n  if (ringCol(MOON_RINGS, md, out)) return;\n  for (let i = 0; i \u003c STARS.length; i++) {\n    const s = STARS[i];\n    const dx = x - s[0];\n    const dy = y - s[1];\n    // Each star's halo breathes on its own clock.\n    const r = s[2] * (1 + 0.12 * Math.sin(P.t * (0.5 + 0.13 * i) + i * 2.1));\n    if (ringCol(STAR_RINGS, Math.sqrt(dx * dx + dy * dy) / r, out)) return;\n  }\n  // The sky: bands picked by the stream function, and round the big swirl\n  // two spiral arms that turn as the clock runs.\n  const s = SWIRLS[0];\n  const dx = x - s[0];\n  const dy = y - s[1];\n  const near = Math.exp(-(dx * dx + dy * dy) / 300);\n  const k = psi(P, x, y) * 0.14 + near * (Math.atan2(dy, dx) / Math.PI + P.t * 0.12) + P.t * 0.02;\n  const band = SKY_BANDS[((Math.floor(k * 3) % 7) + 7) % 7];\n  out[0] = band[0];\n  out[1] = band[1];\n  out[2] = band[2];\n}\n\nfunction pick(list, i, out) {\n  const c = list[i % list.length];\n  out[0] = c[0];\n  out[1] = c[1];\n  out[2] = c[2];\n}\n\nconst DIR = new Float32Array(2);\nconst SAT = 1.15;\n\n// One stroke: load the brush, then walk half its length each way along the\n// flow from where it starts, one or two LEDs wide, until it runs off its region.\nfunction stroke(P, x0, y0) {\n  const p0 = Math.floor(y0) * W + Math.floor(x0);\n  const reg = P.reg[p0];\n  const col = P.col;\n  colourAt(P, reg, p0, x0, y0, col);\n  // Each stroke mixes its own shade: a little lighter or darker, a little warmer or cooler.\n  const v = 0.82 + 0.34 * Math.random();\n  const warm = (Math.random() - 0.5) * 34;\n  const r = col[0] * v + warm;\n  const g = col[1] * v + (Math.random() - 0.5) * 22;\n  const b = col[2] * v - warm * 0.6;\n  let len = P.len * (0.7 + 0.6 * Math.random());\n  if (reg === TREE) len *= 1.4;\n  else if (reg >= WALL) len *= 0.45;\n  const wide = reg !== SPIRE && Math.random() \u003c 0.55;\n  const c = P.canvas;\n  for (let side = -1; side \u003c= 1; side += 2) {\n    let x = x0;\n    let y = y0;\n    const steps = Math.ceil(len * 0.5 / 0.6);\n    for (let s = 0; s \u003c steps; s++) {\n      const px = Math.floor(x);\n      const py = Math.floor(y);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) break;\n      const p = py * W + px;\n      if (P.reg[p] !== reg) break;\n      dirAt(P, reg, x, y, DIR);\n      // Bristle grain: about one LED in eight picks up a lighter or darker fleck.\n      const q = Math.random() \u003c 0.13 ? 1 + (Math.random() - 0.5) * 0.16 : 1;\n      c[p * 3] = r * q;\n      c[p * 3 + 1] = g * q;\n      c[p * 3 + 2] = b * q;\n      if (wide) {\n        const nx = Math.floor(x - DIR[1] * 0.9);\n        const ny = Math.floor(y + DIR[0] * 0.9);\n        const n = ny * W + nx;\n        if (nx >= 0 && nx \u003c W && ny >= 0 && ny \u003c H && P.reg[n] === reg) {\n          const q2 = Math.random() \u003c 0.13 ? 0.9 + (Math.random() - 0.5) * 0.16 : 0.9;\n          c[n * 3] = r * q2;\n          c[n * 3 + 1] = g * q2;\n          c[n * 3 + 2] = b * q2;\n        }\n      }\n      x += DIR[0] * 0.6 * side;\n      y += DIR[1] * 0.6 * side;\n    }\n  }\n}\n\nfunction paint(P, count) {\n  for (let i = 0; i \u003c count; i++) stroke(P, Math.random() * W, Math.random() * H);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.flow = Math.max(0.2, Math.min(3, k[1]));\n  P.len = Math.max(4, Math.min(12, k[2]));\n  P.swirl = Math.max(0, Math.min(1, k[3]));\n  if (!P.started) {\n    // The canvas is already painted when the panel opens: a ground of flat\n    // colour, then enough strokes to cover it three times over while the\n    // clock runs four seconds, so the knobs have set the picture.\n    P.started = true;\n    for (let y = 0; y \u003c H; y++) {\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        colourAt(P, P.reg[p], p, x + 0.5, y + 0.5, P.col);\n        P.canvas[p * 3] = P.col[0] * 0.9;\n        P.canvas[p * 3 + 1] = P.col[1] * 0.9;\n        P.canvas[p * 3 + 2] = P.col[2] * 0.9;\n      }\n    }\n    const per = Math.round((3 * N) / (1.55 * P.len) / 40);\n    for (let i = 0; i \u003c 40; i++) {\n      P.t += 0.1 * P.flow;\n      paint(P, per);\n    }\n  }\n  P.t += dt * P.flow;\n  // A stroke covers about one and a half times its length in LEDs, so at\n  // Flow 2 the canvas is painted over every three seconds whatever the\n  // Length: 440 strokes a second at Length 4, 147 at Length 12.\n  P.debt += (dt * P.flow * 880) / P.len;\n  const n = Math.floor(P.debt);\n  P.debt -= n;\n  paint(P, n);\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const c = P.canvas;\n  const m = P.m;\n  // Palette: a hue rotation that keeps each colour's lightness, with the\n  // colours pushed a little further from grey, the way oil paint sits fresh.\n  const a = P.hue * Math.PI * 2;\n  const cs = Math.cos(a) * SAT;\n  const sn = Math.sin(a) * SAT;\n  m[0] = 0.213 + cs * 0.787 - sn * 0.213;\n  m[1] = 0.715 - cs * 0.715 - sn * 0.715;\n  m[2] = 0.072 - cs * 0.072 + sn * 0.928;\n  m[3] = 0.213 - cs * 0.213 + sn * 0.143;\n  m[4] = 0.715 + cs * 0.285 + sn * 0.14;\n  m[5] = 0.072 - cs * 0.072 - sn * 0.283;\n  m[6] = 0.213 - cs * 0.213 - sn * 0.787;\n  m[7] = 0.715 - cs * 0.715 + sn * 0.715;\n  m[8] = 0.072 + cs * 0.928 + sn * 0.072;\n  for (let p = 0; p \u003c N; p++) {\n    const r = c[p * 3];\n    const g = c[p * 3 + 1];\n    const b = c[p * 3 + 2];\n    const R = m[0] * r + m[1] * g + m[2] * b;\n    const G = m[3] * r + m[4] * g + m[5] * b;\n    const B = m[6] * r + m[7] * g + m[8] * b;\n    display.setPixel(p % W, (p / W) | 0, R \u003c 0 ? 0 : R > 255 ? 255 : R, G \u003c 0 ? 0 : G > 255 ? 255 : G, B \u003c 0 ? 0 : B > 255 ? 255 : B);\n  }\n  // The village's windows, dabbed on last; one now and then goes dim and comes back.\n  const wins = P.wins;\n  for (let i = 0; i \u003c wins.length; i++) {\n    const p = wins[i];\n    const f = Math.sin(time * 0.7 + i * 2.3) > 0.93 ? 0.55 : 1;\n    const r = 255 * f;\n    const g = 214 * f;\n    const b = 72 * f;\n    const R = m[0] * r + m[1] * g + m[2] * b;\n    const G = m[3] * r + m[4] * g + m[5] * b;\n    const B = m[6] * r + m[7] * g + m[8] * b;\n    display.setPixel(p % W, (p / W) | 0, Math.max(0, Math.min(255, R)), Math.max(0, Math.min(255, G)), Math.max(0, Math.min(255, B)));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..1, Flow=0.2..3, Length=4..12, Swirl=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":1,"about":"Turns every colour of the painting round the colour wheel together, starting from Van Gogh's blue and yellow."},{"name":"Flow","min":0.2,"max":3,"about":"How fast the paint moves: at 2 the whole canvas is painted over every three seconds and the big swirl's arms turn on by a band of colour every second and a half; at 0.2 everything goes ten times slower."},{"name":"Length","min":4,"max":12,"about":"How long a stroke is, from short dabs four LEDs long to sweeps of twelve; the cypress takes longer strokes and the village shorter ones."},{"name":"Swirl","min":0,"max":1,"about":"How hard the sky turns: low, the stars sit in their haloes and the sky rolls past in long waves; turned up, the big spiral grows and the waves break into eddies."}],"start":[0,2,4,0.06],"measures":{"motion":0.0383,"detail":0.0951,"edges":0.2993,"complexity":2.3542,"coverage":0.998,"colour":0.5763,"drift":0.0278},"knobResponse":[0.4036,0.1538,0.1578,0.1518]},{"slug":"cam-wave","title":"Cam Wave","family":"machine","round":15,"note":"발치의 캠축이 돌면 캠마다 막대를 밀어 올리고, 막대 끝에 걸린 구슬 띠가 물결이 되어 옆으로 흘러가요. K1 을 누르면 캠이 둥근 편심에서 달걀꼴, 달팽이꼴로 바뀌어요.","idea":"A camshaft turns at the foot of the panel, every cam on it keyed a little further round than its neighbour; a rod rides on each cam, slides up through two guides and lifts a beaded strip into a wave that travels across the top.","buttons":"K1 tap swaps the cam profile, round eccentric, then egg, then a snail drop cam that lifts each rod slowly and lets it fall.","code":"// ===== Patternflow pattern =====\n// Title:   Cam Wave\n// Family:  machine\n// Idea:    A camshaft turns at the foot of the panel, every cam on it keyed a little further round than its neighbour; a rod rides on each cam, slides up through two guides and lifts a beaded strip into a wave that travels across the top.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Reuben Margolin's kinetic wave sculptures, where one camshaft and its followers make a wave out of many rods\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Cams=6..12, Phase=-1..1\n//\n// Knob 1: Hue. Turns the colours of the cams and the strip together, starting from a row that runs from teal at the near end through blue and violet to magenta at the far end.\n// Knob 2: Speed. How fast the shaft turns: at 2 every cam goes round once in two seconds, at the top in 1.3, at the bottom in 20.\n// Knob 3: Cams. How many cams and rods the shaft carries, from 6 to 12; the cams stay 38 LEDs tall and crowd closer along the shaft, 7.9 LEDs apart at 6 and 3.6 at 12.\n// Knob 4: Phase. How far each cam is keyed past its neighbour: at the left end all alike and the rods pump together, in the middle 60 degrees so six cams make one wave, at the right end 180 degrees so neighbours move opposite and the wave stands still. The cams slide round to their new keying in about half a second.\n// Buttons: K1 tap swaps the cam profile, round eccentric, then egg, then a snail drop cam that lifts each rod slowly and lets it fall.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 12;\n// Points around a cam's outline, for the follower's contact.\nconst S = 192;\nconst TAU = Math.PI * 2;\n// The shaft runs left to right and away from us: we look along it from the\n// left, so a cam's face shows at this share of its width and the far cams\n// stand to the right.\nconst SB = 0.5;\nconst CB = Math.sqrt(1 - SB * SB);\n// A cam's full reach from the shaft, in LEDs, and the shaft's height.\nconst R = 19;\nconst SHAFT = 97;\n// The rod's width, in LEDs.\nconst ROD = 1.5;\n// Where the wave's beads sit when every rod is at its lowest.\nconst WAVE = 20;\n// How far the strip hangs below its top edge.\nconst STRIP = 4;\n// Free fall for a rod that drops off a cam, in LEDs per second squared.\nconst FALL = 900;\nconst PROFILES = 3;\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// A cam's radius at angle phi from its nose, as a share of its full reach.\n// 0: a round disc bored off centre, 1: an egg, 2: a snail that climbs the\n// whole way round and drops back at the nose.\nfunction radius(kind, phi) {\n  phi -= Math.floor(phi / TAU) * TAU;\n  if (kind === 0) {\n    const e = 0.36;\n    const r = 0.64;\n    const s = Math.sin(phi);\n    return e * Math.cos(phi) + Math.sqrt(r * r - e * e * s * s);\n  }\n  if (kind === 1) {\n    const c = (1 + Math.cos(phi)) / 2;\n    return 0.42 + 0.58 * c * c * Math.sqrt(c);\n  }\n  return 0.3 + 0.7 * (1 - phi / TAU);\n}\n\n// Cams spread along the shaft so the nearest one's face and the farthest\n// one's rim both stay on the panel.\nfunction layout(P, n) {\n  P.n = n;\n  const span = W - 3 - 2 * SB * R - 2.5;\n  P.gap = span / (n - 1);\n  P.thick = Math.min(3, (0.7 * P.gap) / CB);\n  P.roller = Math.min(1.7, P.gap / 2 - 0.25);\n  for (let i = 0; i \u003c n; i++) P.cx[i] = 1.5 + SB * R + i * P.gap;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frame = new Float32Array(N * 3);\n  P.alpha = new Float32Array(N);\n  P.tops = new Float32Array(MAX);\n  P.cx = new Float32Array(MAX);\n  P.rodY = new Float32Array(MAX);\n  P.rodV = new Float32Array(MAX);\n  P.theta = new Float32Array(MAX);\n  P.tables = [];\n  for (let k = 0; k \u003c PROFILES; k++) {\n    const t = new Float32Array(S);\n    for (let s = 0; s \u003c S; s++) t[s] = radius(k, (s * TAU) / S);\n    P.tables.push(t);\n  }\n  P.prof = new Float32Array(S);\n  P.prof.set(P.tables[0]);\n  P.kind = 0;\n  P.from = 0;\n  P.morph = 1;\n  P.shaft = 0;\n  P.step = Math.PI / 3;\n  P.hue = 0;\n  P.col = new Float32Array(MAX * 3);\n  P.bead = new Float32Array(3);\n  P.started = false;\n  layout(P, 6);\n}\n\n// How high the roller on cam i rides over the shaft.\nfunction contact(P, i) {\n  const prof = P.prof;\n  const rr = P.roller;\n  const th = P.theta[i];\n  let best = 0;\n  for (let k = 0; k \u003c S; k++) {\n    const a = (k * TAU) / S + th;\n    const r = prof[k] * R;\n    const x = r * Math.cos(a);\n    if (x > -rr && x \u003c rr) {\n      const h = r * Math.sin(a) + Math.sqrt(rr * rr - x * x);\n      if (h > best) best = h;\n    }\n  }\n  return best;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const speed = Math.max(0.2, Math.min(3, k[1]));\n  const n = Math.max(6, Math.min(MAX, Math.round(k[2])));\n  const v = Math.max(-1, Math.min(1, k[3]));\n  // Degrees between neighbours: 0 at the left end, 60 in the middle, 180 at the right.\n  const target = ((v \u003c 0 ? 60 * (1 + v) : 60 + 120 * v) * Math.PI) / 180;\n  if (n !== P.n) {\n    layout(P, n);\n    P.started = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.from = P.kind;\n    P.kind = (P.kind + 1) % PROFILES;\n    P.morph = 0;\n  }\n  // A new profile grows out of the old one over half a second.\n  if (P.morph \u003c 1) {\n    P.morph = Math.min(1, P.morph + dt * 2);\n    const a = P.tables[P.from];\n    const b = P.tables[P.kind];\n    const m = P.morph * P.morph * (3 - 2 * P.morph);\n    for (let s = 0; s \u003c S; s++) P.prof[s] = a[s] + (b[s] - a[s]) * m;\n  }\n  // Re-keying the cams when Phase turns: each slides round to its new place.\n  P.step += (target - P.step) * (P.started ? Math.min(1, dt * 4) : 1);\n  P.shaft += speed * Math.PI * 0.5 * dt;\n  for (let i = 0; i \u003c P.n; i++) {\n    P.theta[i] = P.shaft - i * P.step;\n    const h = contact(P, i);\n    // A rod is pushed up by its cam at once, but falls no faster than gravity.\n    if (!P.started || h >= P.rodY[i]) {\n      P.rodY[i] = h;\n      P.rodV[i] = 0;\n    } else {\n      P.rodV[i] += FALL * dt;\n      P.rodY[i] = Math.max(h, P.rodY[i] - P.rodV[i] * dt);\n      if (P.rodY[i] === h) P.rodV[i] = 0;\n    }\n  }\n  P.started = true;\n}\n\n\n// The frame and its coverage. Things nearer the eye are drawn first and each\n// later one only shows where the nearer ones left the LED uncovered.\nlet OUT = null;\nlet ALPHA = null;\n\nfunction under(x, y, a, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const q = y * W + x;\n  const left = 1 - ALPHA[q];\n  if (left \u003c 0.003) return;\n  const w = left * (a > 1 ? 1 : a);\n  const o = q * 3;\n  OUT[o] += r * w;\n  OUT[o + 1] += g * w;\n  OUT[o + 2] += b * w;\n  ALPHA[q] += w;\n}\n\n// A round dot with a soft edge, so it glides between LEDs.\nfunction dot(x, y, rad, r, g, b) {\n  for (let yy = Math.floor(y - rad - 1); yy \u003c= Math.ceil(y + rad + 1); yy++)\n    for (let xx = Math.floor(x - rad - 1); xx \u003c= Math.ceil(x + rad + 1); xx++) {\n      const dx = xx + 0.5 - x;\n      const dy = yy + 0.5 - y;\n      under(xx, yy, rad + 0.5 - Math.sqrt(dx * dx + dy * dy), r, g, b);\n    }\n}\n\n// atan2 to about 1e-5 of a radian, which is plenty for an outline on LEDs.\nfunction angle(y, x) {\n  const ax = x \u003c 0 ? -x : x;\n  const ay = y \u003c 0 ? -y : y;\n  const a = (ax \u003c ay ? ax : ay) / ((ax > ay ? ax : ay) + 1e-9);\n  const s = a * a;\n  let r = ((-0.0464964749 * s + 0.15931422) * s - 0.327622764) * s * a + a;\n  if (ay > ax) r = 1.5707963 - r;\n  if (x \u003c 0) r = 3.1415927 - r;\n  return y \u003c 0 ? -r : r;\n}\n\n// How far an LED centre at (px, py) is inside the outline of a cam face\n// whose axle shows at screen x ax, measured in LEDs on the panel. Leaves the\n// in-plane position in hit.\nconst hit = { u: 0, v: 0, r: 0, a: 0 };\nfunction inside(prof, th, ax, px, py, low) {\n  const u = (px - ax) / SB;\n  const v = SHAFT - py;\n  const r = Math.sqrt(u * u + v * v);\n  hit.u = u;\n  hit.v = v;\n  hit.r = r;\n  if (r > R + 2) return -2;\n  if (r \u003c low - 3) return 2;\n  const a = angle(v, u);\n  hit.a = a;\n  let f = ((a - th) * S) / TAU;\n  f -= Math.floor(f / S) * S;\n  const k0 = f | 0;\n  const k1 = k0 + 1 === S ? 0 : k0 + 1;\n  const ca = r > 0 ? u / r : 1;\n  const sa = r > 0 ? v / r : 0;\n  const radial = Math.sqrt(ca * ca * SB * SB + sa * sa);\n  // A snail's drop is a straight edge out from the axle: near it, blend the\n  // high side and the low side by how far the LED sits from the edge.\n  const jump = prof[0] - prof[S - 1];\n  if (jump > 0.02) {\n    const side = (f > S / 2 ? f - S : f) * (TAU / S) * r;\n    if (side > -2.5 && side \u003c 2.5) {\n      const w = clamp01(0.5 + side * Math.sqrt(sa * sa * SB * SB + ca * ca));\n      return w * clamp01((prof[0] * R - r) * radial + 0.5) + (1 - w) * clamp01((prof[S - 1] * R - r) * radial + 0.5) - 0.5;\n    }\n  }\n  const edge = (prof[k0] + (prof[k1] - prof[k0]) * (f - k0)) * R;\n  return (edge - r) * radial;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  OUT = P.frame;\n  ALPHA = P.alpha;\n  OUT.fill(0);\n  ALPHA.fill(0);\n  const n = P.n;\n  const prof = P.prof;\n  const col = P.col;\n  const rr = P.roller;\n  const thick = P.thick * CB;\n  const gap = P.gap;\n  // Hues run along the shaft; the far cams sit a little deeper in shadow.\n  for (let i = 0; i \u003c n; i++) hsvInto(col, i * 3, 0.47 + P.hue + (0.36 * i) / (n - 1), 0.8, 0.97 - (0.22 * i) / (n - 1));\n\n  let low = Infinity;\n  for (let s = 0; s \u003c S; s++) low = Math.min(low, prof[s]);\n  const rest = low * R + rr;\n  const lowR = low * R;\n  const tops = P.tops;\n  for (let i = 0; i \u003c n; i++) tops[i] = WAVE - (P.rodY[i] - rest);\n  const guide1 = Math.round(SHAFT - R - rr * 2 - 6);\n  const guide2 = Math.round((guide1 + WAVE) / 2 + 4);\n\n  // The beads on the rod tops, and the strip they carry. The strip's height\n  // is worked out once per column, so it only ever moves up and down.\n  for (let i = 0; i \u003c n; i++) dot(P.cx[i], tops[i], 1.7, 255, 246, 228);\n  const first = P.cx[0];\n  const last = P.cx[n - 1];\n  const bead = P.bead;\n  let seg = 0;\n  for (let x = Math.floor(first); x \u003c= Math.ceil(last); x++) {\n    const px = Math.max(first, Math.min(last, x + 0.5));\n    while (seg \u003c n - 2 && px > P.cx[seg + 1]) seg++;\n    const t = (px - P.cx[seg]) / (P.cx[seg + 1] - P.cx[seg]);\n    const y1 = tops[seg];\n    const y2 = tops[seg + 1];\n    const y0 = seg > 0 ? tops[seg - 1] : 2 * y1 - y2;\n    const y3 = seg + 2 \u003c n ? tops[seg + 2] : 2 * y2 - y1;\n    // Catmull-Rom through the bead heights.\n    const y = 0.5 * (2 * y1 + (-y0 + y2) * t + (2 * y0 - 5 * y1 + 4 * y2 - y3) * t * t + (-y0 + 3 * y1 - 3 * y2 + y3) * t * t * t);\n    hsvInto(bead, 0, 0.47 + P.hue + 0.36 * clamp01((px - first) / (last - first)), 0.75, 1);\n    const top = y - 1;\n    const bot = y + STRIP;\n    for (let yy = Math.floor(top); yy \u003c= Math.ceil(bot); yy++) {\n      const a = Math.min(bot, yy + 1) - Math.max(top, yy);\n      if (a \u003c= 0) continue;\n      // Bright along the top edge, deeper underneath.\n      const k = (yy + 0.5 - top) / (bot - top);\n      const s = k \u003c 0.25 ? 1 : 1 - 0.55 * (k - 0.25);\n      const wv = k \u003c 0.25 ? 0.35 : 0;\n      under(x, yy, a, (bead[0] + (255 - bead[0]) * wv) * s, (bead[1] + (255 - bead[1]) * wv) * s, (bead[2] + (255 - bead[2]) * wv) * s);\n    }\n  }\n\n  // Brass bushings where each rod passes a guide, then the guides.\n  const bw = Math.min(2, gap / 2 - 0.7);\n  for (let i = 0; i \u003c n; i++) {\n    const x = P.cx[i];\n    for (const g of [guide1, guide2])\n      for (let y = g - 1; y \u003c= g + 3; y++)\n        for (let xx = Math.floor(x - bw - 1); xx \u003c= Math.floor(x + bw + 1); xx++) {\n          const s = y === g - 1 ? 1.15 : y === g + 3 ? 0.7 : 1;\n          under(xx, y, bw + 0.5 - Math.abs(xx + 0.5 - x), 212 * s, 166 * s, 74 * s);\n        }\n  }\n  for (const g of [guide1, guide2])\n    for (let x = 0; x \u003c W; x++) {\n      under(x, g, 1, 78, 90, 120);\n      under(x, g + 1, 1, 52, 60, 86);\n      under(x, g + 2, 1, 34, 40, 58);\n    }\n\n  // Cams from the nearest to the farthest, each after its own roller and rod.\n  for (let i = 0; i \u003c n; i++) {\n    const ax = P.cx[i];\n    const th = P.theta[i];\n    const cr = col[i * 3];\n    const cg = col[i * 3 + 1];\n    const cb = col[i * 3 + 2];\n    const yb = SHAFT - P.rodY[i];\n    dot(ax, yb, rr - 0.1, 240, 192, 96);\n    const yt = tops[i];\n    const xa = ax - ROD / 2;\n    const xb = ax + ROD / 2;\n    for (let xx = Math.floor(xa); xx \u003c= Math.floor(xb); xx++) {\n      const a = Math.min(xb, xx + 1) - Math.max(xa, xx);\n      if (a \u003c= 0) continue;\n      const shine = xx + 0.5 \u003c ax ? 1.15 : 0.8;\n      for (let y = Math.floor(yt); y \u003c= Math.ceil(yb); y++) under(xx, y, a * clamp01(Math.min(yb, y + 1) - Math.max(yt, y)), 160 * shine, 168 * shine, 186 * shine);\n    }\n\n    const hole = 0.14 * R;\n    const hu = Math.cos(th) * R * 0.56;\n    const hv = Math.sin(th) * R * 0.56;\n    for (let y = Math.floor(SHAFT - R - 1); y \u003c= Math.ceil(SHAFT + R + 1); y++) {\n      const py = y + 0.5;\n      const vv = SHAFT - py;\n      const half = Math.sqrt(Math.max(0, (R + 1.5) * (R + 1.5) - vv * vv)) * SB;\n      const x0 = Math.max(0, Math.floor(ax - half - 1));\n      const x1 = Math.min(W - 1, Math.ceil(ax + half + thick + 1));\n      for (let x = x0; x \u003c= x1; x++) {\n        if (ALPHA[y * W + x] > 0.997) continue;\n        const px = x + 0.5;\n        const d = inside(prof, th, ax, px, py, lowR);\n        const face = clamp01(d + 0.5);\n        if (face > 0) {\n          const u = hit.u;\n          const v = hit.v;\n          const r = hit.r;\n          // Light from the top left: the face's edge catches it there.\n          const lit = clamp01(1 - d / 1.4) * clamp01((v - u * 0.4) / Math.max(1, r));\n          let fr = cr + (255 - cr) * 0.45 * lit;\n          let fg = cg + (255 - cg) * 0.45 * lit;\n          let fb = cb + (255 - cb) * 0.45 * lit;\n          let cover = face;\n          // A lightening hole toward the nose: what is behind shows through.\n          const hx = (u - hu) * SB;\n          const hy = v - hv;\n          cover *= 1 - clamp01(hole * 0.75 + 0.5 - Math.sqrt(hx * hx + hy * hy));\n          // The hub and the shaft's end, steel.\n          const hub = clamp01(2.6 - r * 0.75);\n          if (hub > 0) {\n            const s = r \u003c 1.6 ? 0.7 : 1;\n            fr += (180 * s - fr) * hub;\n            fg += (186 * s - fg) * hub;\n            fb += (200 * s - fb) * hub;\n            cover = Math.max(cover, hub * face);\n          }\n          under(x, y, cover, fr, fg, fb);\n          if (face >= 1 && cover >= 1) continue;\n        }\n        // The rim: the outline swept back along the shaft to the far face,\n        // lit on top and in shade underneath.\n        const rim = clamp01(inside(prof, th, ax + thick, px, py, lowR) + 0.5);\n        if (rim > 0) {\n          const s = 0.38 + 0.35 * clamp01(0.5 + (0.6 * hit.v) / Math.max(1, hit.r));\n          under(x, y, rim, cr * s, cg * s, cb * s);\n        }\n      }\n    }\n  }\n\n  // The shaft, seen between the cams, and the frame that carries it.\n  for (let y = SHAFT - 2; y \u003c= SHAFT + 1; y++)\n    for (let x = 2; x \u003c W - 2; x++) {\n      const s = y === SHAFT - 2 ? 1.2 : y === SHAFT + 1 ? 0.55 : 0.85;\n      under(x, y, 1, 150 * s, 156 * s, 172 * s);\n    }\n  for (let y = guide2; y \u003c H; y++) {\n    for (const x of [0, W - 2]) {\n      under(x, y, 1, 84, 94, 124);\n      under(x + 1, y, 1, 54, 62, 86);\n    }\n  }\n  for (let y = H - 4; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const s = y === H - 4 ? 1.25 : 0.8;\n      under(x, y, 1, 60 * s, 68 * s, 94 * s);\n    }\n\n  const out = OUT;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n}\n","layer":{"id":"layer-cam-wave","type":"code","name":"cam-wave","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cam Wave\n// Family:  machine\n// Idea:    A camshaft turns at the foot of the panel, every cam on it keyed a little further round than its neighbour; a rod rides on each cam, slides up through two guides and lifts a beaded strip into a wave that travels across the top.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Reuben Margolin's kinetic wave sculptures, where one camshaft and its followers make a wave out of many rods\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Cams=6..12, Phase=-1..1\n//\n// Knob 1: Hue. Turns the colours of the cams and the strip together, starting from a row that runs from teal at the near end through blue and violet to magenta at the far end.\n// Knob 2: Speed. How fast the shaft turns: at 2 every cam goes round once in two seconds, at the top in 1.3, at the bottom in 20.\n// Knob 3: Cams. How many cams and rods the shaft carries, from 6 to 12; the cams stay 38 LEDs tall and crowd closer along the shaft, 7.9 LEDs apart at 6 and 3.6 at 12.\n// Knob 4: Phase. How far each cam is keyed past its neighbour: at the left end all alike and the rods pump together, in the middle 60 degrees so six cams make one wave, at the right end 180 degrees so neighbours move opposite and the wave stands still. The cams slide round to their new keying in about half a second.\n// Buttons: K1 tap swaps the cam profile, round eccentric, then egg, then a snail drop cam that lifts each rod slowly and lets it fall.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 12;\n// Points around a cam's outline, for the follower's contact.\nconst S = 192;\nconst TAU = Math.PI * 2;\n// The shaft runs left to right and away from us: we look along it from the\n// left, so a cam's face shows at this share of its width and the far cams\n// stand to the right.\nconst SB = 0.5;\nconst CB = Math.sqrt(1 - SB * SB);\n// A cam's full reach from the shaft, in LEDs, and the shaft's height.\nconst R = 19;\nconst SHAFT = 97;\n// The rod's width, in LEDs.\nconst ROD = 1.5;\n// Where the wave's beads sit when every rod is at its lowest.\nconst WAVE = 20;\n// How far the strip hangs below its top edge.\nconst STRIP = 4;\n// Free fall for a rod that drops off a cam, in LEDs per second squared.\nconst FALL = 900;\nconst PROFILES = 3;\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// A cam's radius at angle phi from its nose, as a share of its full reach.\n// 0: a round disc bored off centre, 1: an egg, 2: a snail that climbs the\n// whole way round and drops back at the nose.\nfunction radius(kind, phi) {\n  phi -= Math.floor(phi / TAU) * TAU;\n  if (kind === 0) {\n    const e = 0.36;\n    const r = 0.64;\n    const s = Math.sin(phi);\n    return e * Math.cos(phi) + Math.sqrt(r * r - e * e * s * s);\n  }\n  if (kind === 1) {\n    const c = (1 + Math.cos(phi)) / 2;\n    return 0.42 + 0.58 * c * c * Math.sqrt(c);\n  }\n  return 0.3 + 0.7 * (1 - phi / TAU);\n}\n\n// Cams spread along the shaft so the nearest one's face and the farthest\n// one's rim both stay on the panel.\nfunction layout(P, n) {\n  P.n = n;\n  const span = W - 3 - 2 * SB * R - 2.5;\n  P.gap = span / (n - 1);\n  P.thick = Math.min(3, (0.7 * P.gap) / CB);\n  P.roller = Math.min(1.7, P.gap / 2 - 0.25);\n  for (let i = 0; i \u003c n; i++) P.cx[i] = 1.5 + SB * R + i * P.gap;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frame = new Float32Array(N * 3);\n  P.alpha = new Float32Array(N);\n  P.tops = new Float32Array(MAX);\n  P.cx = new Float32Array(MAX);\n  P.rodY = new Float32Array(MAX);\n  P.rodV = new Float32Array(MAX);\n  P.theta = new Float32Array(MAX);\n  P.tables = [];\n  for (let k = 0; k \u003c PROFILES; k++) {\n    const t = new Float32Array(S);\n    for (let s = 0; s \u003c S; s++) t[s] = radius(k, (s * TAU) / S);\n    P.tables.push(t);\n  }\n  P.prof = new Float32Array(S);\n  P.prof.set(P.tables[0]);\n  P.kind = 0;\n  P.from = 0;\n  P.morph = 1;\n  P.shaft = 0;\n  P.step = Math.PI / 3;\n  P.hue = 0;\n  P.col = new Float32Array(MAX * 3);\n  P.bead = new Float32Array(3);\n  P.started = false;\n  layout(P, 6);\n}\n\n// How high the roller on cam i rides over the shaft.\nfunction contact(P, i) {\n  const prof = P.prof;\n  const rr = P.roller;\n  const th = P.theta[i];\n  let best = 0;\n  for (let k = 0; k \u003c S; k++) {\n    const a = (k * TAU) / S + th;\n    const r = prof[k] * R;\n    const x = r * Math.cos(a);\n    if (x > -rr && x \u003c rr) {\n      const h = r * Math.sin(a) + Math.sqrt(rr * rr - x * x);\n      if (h > best) best = h;\n    }\n  }\n  return best;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const speed = Math.max(0.2, Math.min(3, k[1]));\n  const n = Math.max(6, Math.min(MAX, Math.round(k[2])));\n  const v = Math.max(-1, Math.min(1, k[3]));\n  // Degrees between neighbours: 0 at the left end, 60 in the middle, 180 at the right.\n  const target = ((v \u003c 0 ? 60 * (1 + v) : 60 + 120 * v) * Math.PI) / 180;\n  if (n !== P.n) {\n    layout(P, n);\n    P.started = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.from = P.kind;\n    P.kind = (P.kind + 1) % PROFILES;\n    P.morph = 0;\n  }\n  // A new profile grows out of the old one over half a second.\n  if (P.morph \u003c 1) {\n    P.morph = Math.min(1, P.morph + dt * 2);\n    const a = P.tables[P.from];\n    const b = P.tables[P.kind];\n    const m = P.morph * P.morph * (3 - 2 * P.morph);\n    for (let s = 0; s \u003c S; s++) P.prof[s] = a[s] + (b[s] - a[s]) * m;\n  }\n  // Re-keying the cams when Phase turns: each slides round to its new place.\n  P.step += (target - P.step) * (P.started ? Math.min(1, dt * 4) : 1);\n  P.shaft += speed * Math.PI * 0.5 * dt;\n  for (let i = 0; i \u003c P.n; i++) {\n    P.theta[i] = P.shaft - i * P.step;\n    const h = contact(P, i);\n    // A rod is pushed up by its cam at once, but falls no faster than gravity.\n    if (!P.started || h >= P.rodY[i]) {\n      P.rodY[i] = h;\n      P.rodV[i] = 0;\n    } else {\n      P.rodV[i] += FALL * dt;\n      P.rodY[i] = Math.max(h, P.rodY[i] - P.rodV[i] * dt);\n      if (P.rodY[i] === h) P.rodV[i] = 0;\n    }\n  }\n  P.started = true;\n}\n\n\n// The frame and its coverage. Things nearer the eye are drawn first and each\n// later one only shows where the nearer ones left the LED uncovered.\nlet OUT = null;\nlet ALPHA = null;\n\nfunction under(x, y, a, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const q = y * W + x;\n  const left = 1 - ALPHA[q];\n  if (left \u003c 0.003) return;\n  const w = left * (a > 1 ? 1 : a);\n  const o = q * 3;\n  OUT[o] += r * w;\n  OUT[o + 1] += g * w;\n  OUT[o + 2] += b * w;\n  ALPHA[q] += w;\n}\n\n// A round dot with a soft edge, so it glides between LEDs.\nfunction dot(x, y, rad, r, g, b) {\n  for (let yy = Math.floor(y - rad - 1); yy \u003c= Math.ceil(y + rad + 1); yy++)\n    for (let xx = Math.floor(x - rad - 1); xx \u003c= Math.ceil(x + rad + 1); xx++) {\n      const dx = xx + 0.5 - x;\n      const dy = yy + 0.5 - y;\n      under(xx, yy, rad + 0.5 - Math.sqrt(dx * dx + dy * dy), r, g, b);\n    }\n}\n\n// atan2 to about 1e-5 of a radian, which is plenty for an outline on LEDs.\nfunction angle(y, x) {\n  const ax = x \u003c 0 ? -x : x;\n  const ay = y \u003c 0 ? -y : y;\n  const a = (ax \u003c ay ? ax : ay) / ((ax > ay ? ax : ay) + 1e-9);\n  const s = a * a;\n  let r = ((-0.0464964749 * s + 0.15931422) * s - 0.327622764) * s * a + a;\n  if (ay > ax) r = 1.5707963 - r;\n  if (x \u003c 0) r = 3.1415927 - r;\n  return y \u003c 0 ? -r : r;\n}\n\n// How far an LED centre at (px, py) is inside the outline of a cam face\n// whose axle shows at screen x ax, measured in LEDs on the panel. Leaves the\n// in-plane position in hit.\nconst hit = { u: 0, v: 0, r: 0, a: 0 };\nfunction inside(prof, th, ax, px, py, low) {\n  const u = (px - ax) / SB;\n  const v = SHAFT - py;\n  const r = Math.sqrt(u * u + v * v);\n  hit.u = u;\n  hit.v = v;\n  hit.r = r;\n  if (r > R + 2) return -2;\n  if (r \u003c low - 3) return 2;\n  const a = angle(v, u);\n  hit.a = a;\n  let f = ((a - th) * S) / TAU;\n  f -= Math.floor(f / S) * S;\n  const k0 = f | 0;\n  const k1 = k0 + 1 === S ? 0 : k0 + 1;\n  const ca = r > 0 ? u / r : 1;\n  const sa = r > 0 ? v / r : 0;\n  const radial = Math.sqrt(ca * ca * SB * SB + sa * sa);\n  // A snail's drop is a straight edge out from the axle: near it, blend the\n  // high side and the low side by how far the LED sits from the edge.\n  const jump = prof[0] - prof[S - 1];\n  if (jump > 0.02) {\n    const side = (f > S / 2 ? f - S : f) * (TAU / S) * r;\n    if (side > -2.5 && side \u003c 2.5) {\n      const w = clamp01(0.5 + side * Math.sqrt(sa * sa * SB * SB + ca * ca));\n      return w * clamp01((prof[0] * R - r) * radial + 0.5) + (1 - w) * clamp01((prof[S - 1] * R - r) * radial + 0.5) - 0.5;\n    }\n  }\n  const edge = (prof[k0] + (prof[k1] - prof[k0]) * (f - k0)) * R;\n  return (edge - r) * radial;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  OUT = P.frame;\n  ALPHA = P.alpha;\n  OUT.fill(0);\n  ALPHA.fill(0);\n  const n = P.n;\n  const prof = P.prof;\n  const col = P.col;\n  const rr = P.roller;\n  const thick = P.thick * CB;\n  const gap = P.gap;\n  // Hues run along the shaft; the far cams sit a little deeper in shadow.\n  for (let i = 0; i \u003c n; i++) hsvInto(col, i * 3, 0.47 + P.hue + (0.36 * i) / (n - 1), 0.8, 0.97 - (0.22 * i) / (n - 1));\n\n  let low = Infinity;\n  for (let s = 0; s \u003c S; s++) low = Math.min(low, prof[s]);\n  const rest = low * R + rr;\n  const lowR = low * R;\n  const tops = P.tops;\n  for (let i = 0; i \u003c n; i++) tops[i] = WAVE - (P.rodY[i] - rest);\n  const guide1 = Math.round(SHAFT - R - rr * 2 - 6);\n  const guide2 = Math.round((guide1 + WAVE) / 2 + 4);\n\n  // The beads on the rod tops, and the strip they carry. The strip's height\n  // is worked out once per column, so it only ever moves up and down.\n  for (let i = 0; i \u003c n; i++) dot(P.cx[i], tops[i], 1.7, 255, 246, 228);\n  const first = P.cx[0];\n  const last = P.cx[n - 1];\n  const bead = P.bead;\n  let seg = 0;\n  for (let x = Math.floor(first); x \u003c= Math.ceil(last); x++) {\n    const px = Math.max(first, Math.min(last, x + 0.5));\n    while (seg \u003c n - 2 && px > P.cx[seg + 1]) seg++;\n    const t = (px - P.cx[seg]) / (P.cx[seg + 1] - P.cx[seg]);\n    const y1 = tops[seg];\n    const y2 = tops[seg + 1];\n    const y0 = seg > 0 ? tops[seg - 1] : 2 * y1 - y2;\n    const y3 = seg + 2 \u003c n ? tops[seg + 2] : 2 * y2 - y1;\n    // Catmull-Rom through the bead heights.\n    const y = 0.5 * (2 * y1 + (-y0 + y2) * t + (2 * y0 - 5 * y1 + 4 * y2 - y3) * t * t + (-y0 + 3 * y1 - 3 * y2 + y3) * t * t * t);\n    hsvInto(bead, 0, 0.47 + P.hue + 0.36 * clamp01((px - first) / (last - first)), 0.75, 1);\n    const top = y - 1;\n    const bot = y + STRIP;\n    for (let yy = Math.floor(top); yy \u003c= Math.ceil(bot); yy++) {\n      const a = Math.min(bot, yy + 1) - Math.max(top, yy);\n      if (a \u003c= 0) continue;\n      // Bright along the top edge, deeper underneath.\n      const k = (yy + 0.5 - top) / (bot - top);\n      const s = k \u003c 0.25 ? 1 : 1 - 0.55 * (k - 0.25);\n      const wv = k \u003c 0.25 ? 0.35 : 0;\n      under(x, yy, a, (bead[0] + (255 - bead[0]) * wv) * s, (bead[1] + (255 - bead[1]) * wv) * s, (bead[2] + (255 - bead[2]) * wv) * s);\n    }\n  }\n\n  // Brass bushings where each rod passes a guide, then the guides.\n  const bw = Math.min(2, gap / 2 - 0.7);\n  for (let i = 0; i \u003c n; i++) {\n    const x = P.cx[i];\n    for (const g of [guide1, guide2])\n      for (let y = g - 1; y \u003c= g + 3; y++)\n        for (let xx = Math.floor(x - bw - 1); xx \u003c= Math.floor(x + bw + 1); xx++) {\n          const s = y === g - 1 ? 1.15 : y === g + 3 ? 0.7 : 1;\n          under(xx, y, bw + 0.5 - Math.abs(xx + 0.5 - x), 212 * s, 166 * s, 74 * s);\n        }\n  }\n  for (const g of [guide1, guide2])\n    for (let x = 0; x \u003c W; x++) {\n      under(x, g, 1, 78, 90, 120);\n      under(x, g + 1, 1, 52, 60, 86);\n      under(x, g + 2, 1, 34, 40, 58);\n    }\n\n  // Cams from the nearest to the farthest, each after its own roller and rod.\n  for (let i = 0; i \u003c n; i++) {\n    const ax = P.cx[i];\n    const th = P.theta[i];\n    const cr = col[i * 3];\n    const cg = col[i * 3 + 1];\n    const cb = col[i * 3 + 2];\n    const yb = SHAFT - P.rodY[i];\n    dot(ax, yb, rr - 0.1, 240, 192, 96);\n    const yt = tops[i];\n    const xa = ax - ROD / 2;\n    const xb = ax + ROD / 2;\n    for (let xx = Math.floor(xa); xx \u003c= Math.floor(xb); xx++) {\n      const a = Math.min(xb, xx + 1) - Math.max(xa, xx);\n      if (a \u003c= 0) continue;\n      const shine = xx + 0.5 \u003c ax ? 1.15 : 0.8;\n      for (let y = Math.floor(yt); y \u003c= Math.ceil(yb); y++) under(xx, y, a * clamp01(Math.min(yb, y + 1) - Math.max(yt, y)), 160 * shine, 168 * shine, 186 * shine);\n    }\n\n    const hole = 0.14 * R;\n    const hu = Math.cos(th) * R * 0.56;\n    const hv = Math.sin(th) * R * 0.56;\n    for (let y = Math.floor(SHAFT - R - 1); y \u003c= Math.ceil(SHAFT + R + 1); y++) {\n      const py = y + 0.5;\n      const vv = SHAFT - py;\n      const half = Math.sqrt(Math.max(0, (R + 1.5) * (R + 1.5) - vv * vv)) * SB;\n      const x0 = Math.max(0, Math.floor(ax - half - 1));\n      const x1 = Math.min(W - 1, Math.ceil(ax + half + thick + 1));\n      for (let x = x0; x \u003c= x1; x++) {\n        if (ALPHA[y * W + x] > 0.997) continue;\n        const px = x + 0.5;\n        const d = inside(prof, th, ax, px, py, lowR);\n        const face = clamp01(d + 0.5);\n        if (face > 0) {\n          const u = hit.u;\n          const v = hit.v;\n          const r = hit.r;\n          // Light from the top left: the face's edge catches it there.\n          const lit = clamp01(1 - d / 1.4) * clamp01((v - u * 0.4) / Math.max(1, r));\n          let fr = cr + (255 - cr) * 0.45 * lit;\n          let fg = cg + (255 - cg) * 0.45 * lit;\n          let fb = cb + (255 - cb) * 0.45 * lit;\n          let cover = face;\n          // A lightening hole toward the nose: what is behind shows through.\n          const hx = (u - hu) * SB;\n          const hy = v - hv;\n          cover *= 1 - clamp01(hole * 0.75 + 0.5 - Math.sqrt(hx * hx + hy * hy));\n          // The hub and the shaft's end, steel.\n          const hub = clamp01(2.6 - r * 0.75);\n          if (hub > 0) {\n            const s = r \u003c 1.6 ? 0.7 : 1;\n            fr += (180 * s - fr) * hub;\n            fg += (186 * s - fg) * hub;\n            fb += (200 * s - fb) * hub;\n            cover = Math.max(cover, hub * face);\n          }\n          under(x, y, cover, fr, fg, fb);\n          if (face >= 1 && cover >= 1) continue;\n        }\n        // The rim: the outline swept back along the shaft to the far face,\n        // lit on top and in shade underneath.\n        const rim = clamp01(inside(prof, th, ax + thick, px, py, lowR) + 0.5);\n        if (rim > 0) {\n          const s = 0.38 + 0.35 * clamp01(0.5 + (0.6 * hit.v) / Math.max(1, hit.r));\n          under(x, y, rim, cr * s, cg * s, cb * s);\n        }\n      }\n    }\n  }\n\n  // The shaft, seen between the cams, and the frame that carries it.\n  for (let y = SHAFT - 2; y \u003c= SHAFT + 1; y++)\n    for (let x = 2; x \u003c W - 2; x++) {\n      const s = y === SHAFT - 2 ? 1.2 : y === SHAFT + 1 ? 0.55 : 0.85;\n      under(x, y, 1, 150 * s, 156 * s, 172 * s);\n    }\n  for (let y = guide2; y \u003c H; y++) {\n    for (const x of [0, W - 2]) {\n      under(x, y, 1, 84, 94, 124);\n      under(x + 1, y, 1, 54, 62, 86);\n    }\n  }\n  for (let y = H - 4; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const s = y === H - 4 ? 1.25 : 0.8;\n      under(x, y, 1, 60 * s, 68 * s, 94 * s);\n    }\n\n  const out = OUT;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Cams=6..12, Phase=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours of the cams and the strip together, starting from a row that runs from teal at the near end through blue and violet to magenta at the far end."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the shaft turns: at 2 every cam goes round once in two seconds, at the top in 1.3, at the bottom in 20."},{"name":"Cams","min":6,"max":12,"about":"How many cams and rods the shaft carries, from 6 to 12; the cams stay 38 LEDs tall and crowd closer along the shaft, 7.9 LEDs apart at 6 and 3.6 at 12."},{"name":"Phase","min":-1,"max":1,"about":"How far each cam is keyed past its neighbour: at the left end all alike and the rods pump together, in the middle 60 degrees so six cams make one wave, at the right end 180 degrees so neighbours move opposite and the wave stands still. The cams slide round to their new keying in about half a second."}],"start":[0,2,6,0.06],"measures":{"motion":0.4062,"detail":0.0758,"edges":0.6341,"complexity":0.5068,"coverage":0.4175,"colour":0.2693,"drift":0.1185},"knobResponse":[0.0838,0.0978,0.1488,0.0628]},{"slug":"change-ringing","title":"Change Ringing","family":"rhythm","round":20,"note":"종탑 종실에서 종들이 바퀴째 한 바퀴씩 돌며 칠 때마다 번쩍이고, 그 아래로 종마다 제 색의 선이 체인지 한 줄에 한 칸씩 Plain Bob 을 따라 지그재그로 흘러내려요. 트레블의 선만 빨강이고, K1 을 누르면 「Bob!」을 불러 다음 리드 엔드에서 2번 자리 대신 4번 자리를 만들어요.","idea":"In the bell chamber of a church tower the bells swing full circle on their wheels and flash as they strike, while below them the method they ring prints itself down the panel as a blue line, one change to a row, the treble's line in red, from rounds into Plain Bob and back into rounds.","buttons":"K1 tap calls \"Bob!\": the next lead end makes fourths place instead, a gold rule marks it in the scroll, and the conductor calls more bobs as needed to bring the bells back into rounds.","code":"// ===== Patternflow pattern =====\n// Title:   Change Ringing\n// Family:  rhythm\n// Idea:    In the bell chamber of a church tower the bells swing full circle on their wheels and flash as they strike, while below them the method they ring prints itself down the panel as a blue line, one change to a row, the treble's line in red, from rounds into Plain Bob and back into rounds.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: English change ringing (plain hunting, Plain Bob, Double Bob) and the blue-line diagrams ringers learn methods from, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Lines=0..1, Speed=0.25..3, Bells=4..8, Method=-1..1\n//\n// Knob 1: Lines. Turns the colours of the working bells' lines round the wheel together, from yellow through cyan to violet at 0; the turn skips the reds, so the treble's line is the only red one.\n// Knob 2: Speed. The ringing pace: at 2 a bell strikes every 0.3 s, so a row of six takes 1.8 s, with the open handstroke gap of one more beat after every second row.\n// Knob 3: Bells. How many bells hang in the tower and ring: 4 is Minimus, 5 Doubles, 6 Minor, 7 Triples and 8 Major. Changing it starts the band again from rounds.\n// Knob 4: Method. -1 is plain hunting, 0 is Plain Bob (seconds place at each lead end, the bells dodging round the treble) and 1 is Double Bob, which makes the mirror of it at the half lead as well. A change waits for the next lead end, so the methods splice.\n// Buttons: K1 tap calls \"Bob!\": the next lead end makes fourths place instead, a gold rule marks it in the scroll, and the conductor calls more bobs as needed to bring the bells back into rounds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Axle rows of the two tiers of bells, and the chamber floor.\nconst TIER = [12, 26];\nconst FLOOR = 37;\n// The current change printed as numbers, the row its line starts on, and the\n// bottom of the scroll. The ringing chamber is under that.\nconst DIG = 41;\nconst TOP = 49;\nconst LOW = 111;\nconst CEIL = 112;\n// A bell rings just short of the balance either side, mouth up.\nconst SWING = Math.PI * 0.94;\n// Seconds a beat at Speed 1, and how far past a strike the bell reaches the balance.\nconst BEAT = 0.6;\nconst BAL = 0.22;\nconst ROUNDS = 6;\nconst SLIDE = 1.2;\nconst { min, max, floor, round, sin, cos, abs, sqrt, exp, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n// 3x5 letters, one octal digit a row.\nconst FONT = {\n  1: \"26227\", 2: \"71747\", 3: \"71717\", 4: \"55711\", 5: \"74717\", 6: \"74757\", 7: \"71222\", 8: \"75757\",\n  A: \"25755\", B: \"65656\", D: \"65556\", E: \"74647\", G: \"34553\", H: \"55755\", I: \"72227\", L: \"44447\",\n  N: \"57755\", O: \"25552\", P: \"65644\", S: \"34216\", T: \"72222\", U: \"55557\", \"!\": \"22202\", \" \": \"00000\",\n};\nconst NAMES = [\"PLAIN HUNT\", \"PLAIN BOB\", \"DOUBLE BOB\"];\n\n// Start of row r in beats: n strikes a row and one beat of handstroke gap\n// before every handstroke but the first.\nconst startOf = (n, r) => r * n + floor(r / 2);\n\n// One lead as place notation: a bitmask of the places made, 0 for a cross.\n// Even stages hunt x.1n, odd ones n.1; Plain Bob makes seconds at the lead\n// end (fourths at a bob) and Double Bob the mirror of it at the half lead.\nfunction leadChanges(n, m, bob) {\n  const top = 1 \u003c\u003c (n - 1);\n  const odd = n & 1;\n  const ch = [];\n  for (let k = 0; k \u003c 2 * n; k++) ch.push(k & 1 ? (odd ? 1 : 1 | top) : odd ? top : 0);\n  if (m === 2) ch[n - 1] = top | (top >> 1) | (odd ? 1 : 0);\n  if (m > 0 || bob) ch[2 * n - 1] = (bob ? 9 : 3) | (odd ? top : 0);\n  return ch;\n}\n\nfunction change(row, mask, n) {\n  for (let i = 0; i \u003c n; ) {\n    if ((mask >> i) & 1 || i === n - 1) i++;\n    else {\n      const t = row[i];\n      row[i] = row[i + 1];\n      row[i + 1] = t;\n      i += 2;\n    }\n  }\n}\n\nconst rounds = (n) => Array.from({ length: n }, (_, i) => i);\n\nfunction leadPerm(n, m, bob) {\n  const r = rounds(n);\n  for (const c of leadChanges(n, m, bob)) change(r, c, n);\n  return r;\n}\n\n// Leads from each lead head back to rounds, plain or bob, found once.\nfunction table(P, n, m) {\n  const id = n * 3 + m;\n  if (P.tables[id]) return P.tables[id];\n  const R = [leadPerm(n, m, false), leadPerm(n, m, true)];\n  const dist = new Map([[rounds(n).join(\"\"), 0]]);\n  const q = [rounds(n)];\n  for (let h = 0; h \u003c q.length; h++) {\n    const X = q[h];\n    const d = dist.get(X.join(\"\"));\n    for (const p of R) {\n      const Y = [];\n      for (let i = 0; i \u003c n; i++) Y[p[i]] = X[i];\n      const key = Y.join(\"\");\n      if (!dist.has(key)) {\n        dist.set(key, d + 1);\n        q.push(Y);\n      }\n    }\n  }\n  return (P.tables[id] = dist);\n}\n\nfunction say(P, text, row) {\n  if (row \u003c= P.cur) P.msg = [text, 2.4];\n  else P.calls.set(row, text);\n}\n\n// The next row of the touch: rounds, then the method lead after lead until\n// it comes round, then rounds again.\nfunction gen(P) {\n  const G = P.G;\n  const n = P.n;\n  const r = P.r0 + P.rows.length;\n  const row = G.row.slice();\n  let mark = 0;\n  if (G.phase === 0) {\n    if (++G.count >= G.need) {\n      Object.assign(G, { phase: 1, ci: 0, m: P.m, called: false, first: true, need: ROUNDS, rung: 0 });\n      say(P, \"GO \" + NAMES[G.m], r - 1);\n    }\n  } else {\n    if (G.ci === 0) {\n      if (!G.first && G.m !== P.m) say(P, NAMES[P.m], r - 1);\n      G.m = P.m;\n      G.first = false;\n      G.head = row.slice();\n    }\n    const last = G.ci === 2 * n - 1;\n    let bob = false;\n    if (last) {\n      if (G.pend) {\n        G.pend = false;\n        G.called = bob = true;\n      } else if (G.called) {\n        const T = table(P, n, G.m);\n        const after = (b) => {\n          const p = leadPerm(n, G.m, b);\n          return T.get(p.map((i) => G.head[i]).join(\"\")) ?? 1e9;\n        };\n        bob = after(true) \u003c after(false);\n        if (bob) say(P, \"BOB!\", r - 2);\n      }\n      // Plain hunting has no lead end to rule off.\n      mark = bob ? 2 : G.m ? 1 : 0;\n    }\n    change(row, leadChanges(n, G.m, bob)[G.ci], n);\n    G.ci = last ? 0 : G.ci + 1;\n    G.rung++;\n    if (last && G.rung >= 24 && row.every((b, i) => b === i)) {\n      Object.assign(G, { phase: 0, count: 0 });\n      say(P, \"THATS ALL\", r);\n    }\n  }\n  G.row = row;\n  const pos = new Int8Array(n);\n  row.forEach((b, i) => (pos[b] = i));\n  P.rows.push(Int8Array.from(row));\n  P.pos.push(pos);\n  P.mark.push(mark);\n}\n\nfunction rowAt(P, tau) {\n  const n = P.n;\n  let r = max(0, floor(tau / (n + 0.5)));\n  while (startOf(n, r + 1) \u003c= tau) r++;\n  while (r > 0 && startOf(n, r) > tau) r--;\n  return r;\n}\n\nfunction need(P, r) {\n  while (P.r0 + P.rows.length \u003c= r) gen(P);\n}\n\nconst strike = (P, r, b) => startOf(P.n, r) + P.pos[r - P.r0][b];\nconst balance = (P, r, b) => strike(P, r, b) + BAL * (strike(P, r + 1, b) - strike(P, r, b));\n\nfunction layout(P, n) {\n  const dx = W / n;\n  const rb = min(10, 0.47 * Math.hypot(dx, TIER[1] - TIER[0]), 0.94 * dx);\n  for (let i = 0; i \u003c n; i++) {\n    P.bx[i] = (i + 0.5) * dx;\n    P.by[i] = TIER[i & 1];\n    P.br[i] = rb * (0.74 + (0.26 * i) / (n - 1));\n  }\n  P.rh = n \u003c 5 ? 6 : n \u003c 7 ? 5 : 4;\n  P.sp = min(60 / (n - 1), P.rh * 2.1);\n  for (let p = 0; p \u003c n; p++) P.xs[p] = 32 + (p - (n - 1) / 2) * P.sp;\n  P.V = floor((LOW - TOP) / P.rh) + 1;\n}\n\nfunction paint(P) {\n  const S = P.bg;\n  const n = P.n;\n  S.fill(0);\n  const set = (x, y, r, g, b) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) S.set([r, g, b], (y * W + x) * 3);\n  };\n  // Stone walls of the bell chamber, coursed in blocks of 8 by 4.\n  for (let y = 0; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const bx = floor((x + ((y >> 2) & 1) * 4) / 8);\n      const by = y >> 2;\n      const joint = y % 4 === 3 || (x + ((y >> 2) & 1) * 4) % 8 === 7;\n      const s = joint ? 8 : 15 + ((bx * 7 + by * 13) % 5) * 1.6 + Math.random() * 3;\n      set(x, y, s * 1.05, s, s * 0.9);\n    }\n  // A louvred window behind the bells, daylight between the boards.\n  for (let y = 3; y \u003c 33; y++)\n    for (let x = 27; x \u003c 37; x++) {\n      const arch = y \u003c 8 && Math.hypot(x + 0.5 - 32, y - 8) > 5;\n      if (arch) continue;\n      const edge = x === 27 || x === 36 || (y \u003c 8 && Math.hypot(x + 0.5 - 32, y - 8) > 4);\n      const slat = (y + floor((x - 27) / 3)) % 3 === 0;\n      if (edge) set(x, y, 52, 46, 40);\n      else if (slat) set(x, y, 46, 40, 34);\n      else set(x, y, 120 + y, 150 + y, 186 + y * 0.5);\n    }\n  // The frame: an oak beam under each tier's bearings.\n  for (const ty of TIER)\n    for (let x = 0; x \u003c W; x++) {\n      set(x, ty + 2, 70, 46, 28);\n      set(x, ty + 3, 44, 28, 18);\n    }\n  // The floor boards, with a hole for each rope.\n  for (let y = FLOOR; y \u003c FLOOR + 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const hole = y > FLOOR && P.bx.some((b, i) => i \u003c n && x === floor(b + P.br[i] - 0.6));\n      const v = y === FLOOR ? 1 : hole ? 0.2 : x % 11 === 5 ? 0.45 : 0.72;\n      set(x, y, 104 * v, 70 * v, 42 * v);\n    }\n  // Faint rulings down each place of the scroll.\n  for (let p = 0; p \u003c n; p++)\n    for (let y = TOP; y \u003c= LOW; y += 2) set(floor(P.xs[p]), y, 9, 9, 13);\n  // The ringing chamber: ceiling beam and plastered wall.\n  for (let y = CEIL; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y \u003c CEIL + 2) set(x, y, y === CEIL ? 84 : 52, y === CEIL ? 58 : 34, y === CEIL ? 36 : 22);\n      else {\n        const s = 34 + Math.random() * 4 - (y - CEIL) * 0.5;\n        set(x, y, s * 1.1, s, s * 0.84);\n      }\n    }\n}\n\nfunction reset(P, n) {\n  P.n = n;\n  layout(P, n);\n  paint(P);\n  P.G = { row: rounds(n), phase: 0, count: 0, need: 4, ci: 0, m: P.m, pend: false, called: false };\n  Object.assign(P, { rows: [], pos: [], mark: [], r0: 0, calls: new Map(), msg: null, cur: -1 });\n  // Open part way into the first touch, with its first lead end in view.\n  const r = 4 + 2 * n + floor(P.V / 2);\n  need(P, r + 3);\n  P.tau = startOf(n, r) + 1.5;\n  P.cur = r;\n  P.fl.fill(0);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (k) => new Float32Array(k);\n  Object.assign(P, { buf: F(N * 3), bg: F(N * 3), bx: F(8), by: F(8), br: F(8), xs: F(8), th: F(8), fl: F(8), col: F(24) });\n  Object.assign(P, { tables: {}, n: 0, m: 1, hue: 0, speed: 2, tau: 0, e: 1 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = clamp(k[1], 0.25, 3);\n  P.m = k[3] \u003c -0.4 ? 0 : k[3] > 0.4 ? 2 : 1;\n  const n = clamp(round(k[2]), 4, 8);\n  if (n !== P.n) reset(P, n);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.G.pend = true;\n    P.msg = [\"BOB!\", 2.4];\n  }\n  const was = P.tau;\n  P.tau += (dt * P.speed) / BEAT;\n  const cur = rowAt(P, P.tau);\n  need(P, cur + 3);\n  for (let r = P.cur + 1; r \u003c= cur; r++)\n    if (P.calls.has(r)) {\n      P.msg = [P.calls.get(r), 2.4];\n      P.calls.delete(r);\n    }\n  P.cur = cur;\n  // Strikes since the last frame.\n  for (let r = rowAt(P, was); r \u003c= cur; r++)\n    for (let b = 0; b \u003c n; b++) {\n      const t = strike(P, r, b);\n      if (t > was && t \u003c= P.tau) P.fl[b] = 1;\n    }\n  for (let b = 0; b \u003c n; b++) {\n    P.fl[b] *= exp(-dt * 5);\n    // The stroke this bell is in: from one balance to the next.\n    let s = cur;\n    if (P.tau \u003c balance(P, s - 1, b)) s--;\n    else if (P.tau >= balance(P, s, b)) s++;\n    const b0 = balance(P, s - 1, b);\n    const u = (P.tau - b0) / (balance(P, s, b) - b0);\n    P.th[b] = (s & 1 ? -1 : 1) * SWING * cos(PI * clamp(u, 0, 1));\n  }\n  P.e = smooth((P.tau - startOf(n, cur)) / SLIDE);\n  if (P.msg && (P.msg[1] -= dt) \u003c= 0) P.msg = null;\n  // Keep sixty rows of history; the scroll shows at most seventeen.\n  if (P.rows.length > 80) {\n    const cut = P.rows.length - 60;\n    for (const A of [P.rows, P.pos, P.mark]) A.splice(0, cut);\n    P.r0 += cut;\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6;\n  const f = h - floor(h);\n  const a = v * (1 - s);\n  const b = v * (1 - s * f);\n  const c = v * (1 - s * (1 - f));\n  const rgb = [[v, c, a], [b, v, a], [a, v, c], [a, b, v], [c, a, v], [v, a, b]][i];\n  for (let k = 0; k \u003c 3; k++) out[o + k] = rgb[k] * 255;\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = (y * W + x) * 3;\n  buf[p] = r;\n  buf[p + 1] = g;\n  buf[p + 2] = b;\n}\n\nfunction bell(P, i) {\n  const { buf, col } = P;\n  const ax = P.bx[i];\n  const ay = P.by[i];\n  const R = P.br[i];\n  const th = P.th[i];\n  const fl = P.fl[i];\n  const mx = -sin(th);\n  const my = cos(th);\n  const L = 0.92 * R;\n  const u0 = 0.06 * R;\n  const G = R + 3;\n  const hl = -0.45 * my;\n  const spokes = [0, 1, 2, 3].map((s) => [cos(th + PI / 4 + (s * PI) / 2), sin(th + PI / 4 + (s * PI) / 2)]);\n  for (let y = max(0, floor(ay - G)); y \u003c= min(FLOOR - 1, floor(ay + G)); y++)\n    for (let x = max(0, floor(ax - G)); x \u003c= min(W - 1, floor(ax + G)); x++) {\n      const p = (y * W + x) * 3;\n      const dx = x + 0.5 - ax;\n      const dy = y + 0.5 - ay;\n      const d = sqrt(dx * dx + dy * dy);\n      if (d >= G) continue;\n      // The strike lights the air round the bell in the colour of its line.\n      if (fl > 0.02) {\n        const g = fl * 0.55 * (1 - d / G);\n        for (let c = 0; c \u003c 3; c++) buf[p + c] += col[i * 3 + c] * g;\n      }\n      // Wheel: rim and four spokes, turning with the bell.\n      let wv = clamp(1 - abs(d - (R - 0.5)) / 0.7, 0, 1);\n      if (d \u003c R - 0.8)\n        for (const [c, s] of spokes) {\n          const along = dx * c + dy * s;\n          if (along > 0) wv = max(wv, 0.5 * clamp(1 - abs(dy * c - dx * s) / 0.6, 0, 1));\n        }\n      if (wv > 0) {\n        buf[p] += (104 - buf[p]) * wv;\n        buf[p + 1] += (68 - buf[p + 1]) * wv;\n        buf[p + 2] += (38 - buf[p + 2]) * wv;\n      }\n      // The bell and its headstock, four samples to an LED.\n      if (d > 1.15 * R + 0.8) continue;\n      let cov = 0;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let s = 0; s \u003c 4; s++) {\n        const sx = dx - 0.25 + 0.5 * (s & 1);\n        const sy = dy - 0.25 + 0.5 * (s >> 1);\n        const u = sx * mx + sy * my;\n        const v = sx * my - sy * mx;\n        if (u \u003c u0) {\n          if (u > -0.16 * R && abs(v) \u003c 0.38 * R) {\n            r += 72;\n            g += 58;\n            b += 50;\n            cov++;\n          }\n          continue;\n        }\n        const t = (u - u0) / L;\n        if (t \u003c 0 || t > 1) continue;\n        let w = L * (0.27 + 0.06 * t + 0.27 * t * t * t * t);\n        if (t \u003c 0.12) w *= 0.6 + (0.4 * t) / 0.12;\n        const q = v / w;\n        if (abs(q) > 1) continue;\n        let sh = (0.5 + 0.65 * exp(-(q - hl) * (q - hl) * 5)) * (1 - 0.3 * q * q);\n        if (t > 0.8 && t \u003c 0.93) sh *= 1.12;\n        else if (t > 0.94) sh *= 0.55;\n        r += 228 * sh + fl * 200;\n        g += 160 * sh + fl * 170;\n        b += 70 * sh + fl * 120;\n        cov++;\n      }\n      if (cov) {\n        const a = cov / 4;\n        buf[p] = buf[p] * (1 - a) + r / 4;\n        buf[p + 1] = buf[p + 1] * (1 - a) + g / 4;\n        buf[p + 2] = buf[p + 2] * (1 - a) + b / 4;\n      }\n    }\n}\n\nfunction chamber(P) {\n  const { n, buf } = P;\n  // Each rope comes off its wheel and down through the floor, creeping as the wheel turns.\n  for (let i = 0; i \u003c n; i++) {\n    const x = floor(P.bx[i] + P.br[i] - 0.6);\n    for (let y = P.by[i]; y \u003c FLOOR + 3 && x \u003c W; y++) {\n      const v = 0.6 + 0.3 * sin((y + P.th[i] * P.br[i]) * 1.4);\n      put(buf, x, y, 168 * v, 134 * v, 90 * v);\n    }\n  }\n  for (let i = 0; i \u003c n; i += 2) bell(P, i);\n  for (let i = 1; i \u003c n; i += 2) bell(P, i);\n}\n\n// One leg of a bell's line, a soft 1-LED core with a dim edge either side,\n// kept brightest where lines cross.\nfunction seg(P, x0, y0, x1, y1, b, k) {\n  const { buf, col } = P;\n  const core = b === 0 ? 0.9 : 0.72;\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const l2 = dx * dx + dy * dy || 1;\n  const o = b * 3;\n  for (let y = max(TOP - 1, floor(min(y0, y1) - 3)); y \u003c= min(LOW, floor(max(y0, y1) + 3)); y++)\n    for (let x = max(0, floor(min(x0, x1) - 3)); x \u003c= min(W - 1, floor(max(x0, x1) + 3)); x++) {\n      const px = x + 0.5 - x0;\n      const py = y + 0.5 - y0;\n      const t = clamp((px * dx + py * dy) / l2, 0, 1);\n      const ex = px - t * dx;\n      const ey = py - t * dy;\n      const d = sqrt(ex * ex + ey * ey);\n      let v = d \u003c core ? 1 : d \u003c core + 1 ? core + 1 - d : 0;\n      v = max(v, 0.36 * clamp(2.8 - d, 0, 1)) * k;\n      if (v \u003c= 0) continue;\n      const p = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[p + c] = max(buf[p + c], col[o + c] * v);\n    }\n}\n\nfunction scroll(P) {\n  const { n, rh, xs, cur, buf, e } = P;\n  for (let a = 0; a \u003c= P.V; a++) {\n    const r = cur - a;\n    if (r - 1 \u003c P.r0) break;\n    const ya = TOP + (a - 1 + e) * rh + 0.5;\n    const k = 0.4 + 0.6 * exp(-(a + e) / 6);\n    const A = P.pos[r - P.r0];\n    const B = P.pos[r - 1 - P.r0];\n    // A rule under each lead end, gold and dashed where a bob was called.\n    const mark = P.mark[r - P.r0];\n    const yr = floor(ya + rh / 2);\n    if (mark && yr >= TOP && yr \u003c= LOW)\n      for (let x = floor(xs[0] - 3); x \u003c= xs[n - 1] + 3; x++)\n        if (mark === 2 ? x % 3 !== 0 : x % 2 === 0) put(buf, x, yr, (mark === 2 ? 220 : 70) * k, (mark === 2 ? 170 : 70) * k, (mark === 2 ? 60 : 84) * k);\n    for (let b = n - 1; b >= 0; b--) seg(P, xs[A[b]], ya, xs[B[b]], ya + rh, b, k);\n  }\n}\n\nfunction glyphs(buf, s, x, y, r, g, b) {\n  for (const ch of s) {\n    const gl = FONT[ch] || FONT[\" \"];\n    for (let row = 0; row \u003c 5; row++)\n      for (let c = 0; c \u003c 3; c++) if ((+gl[row] >> (2 - c)) & 1) put(buf, x + c, y + row, r, g, b);\n    x += 4;\n  }\n}\n\n// The change being struck, as numbers: each lights in its bell's colour as\n// it sounds, with a white flash on the strike.\nfunction numbers(P) {\n  const { n, buf, col, xs } = P;\n  const row = P.rows[P.cur - P.r0];\n  const j = P.tau - startOf(n, P.cur);\n  for (let p = 0; p \u003c n; p++) {\n    const b = row[p];\n    const since = j - p;\n    const v = since \u003c 0 ? 0.3 : 0.85;\n    const w = since \u003c 0 ? 0 : max(0, 1 - since / 0.9);\n    const c = [0, 1, 2].map((i) => col[b * 3 + i] * v * (1 - w) + 255 * w);\n    glyphs(buf, String(b + 1), round(xs[p] - 1.5), DIG, c[0], c[1], c[2]);\n    if (since \u003c 0) continue;\n    // Each node of the row lights as its bell sounds, white for the moment of the strike.\n    const ny = TOP + (P.e - 1) * P.rh + 0.5;\n    for (let y = max(TOP - 1, floor(ny - 4)); y \u003c= floor(ny + 4); y++)\n      for (let x = max(0, floor(xs[p] - 4)); x \u003c= min(W - 1, floor(xs[p] + 4)); x++) {\n        const d = Math.hypot(x + 0.5 - xs[p], y + 0.5 - ny);\n        if (d >= 4) continue;\n        const g = (1 - d / 4) * (0.45 + 0.5 * w);\n        const q = (y * W + x) * 3;\n        for (let i = 0; i \u003c 3; i++) buf[q + i] = max(buf[q + i], (col[b * 3 + i] * (1 - w) + 255 * w) * g);\n      }\n  }\n}\n\n// Ropes and sallies in the ringing chamber, each sally woven in its bell's\n// colour and white: it rises as its bell swings off the handstroke and comes\n// back down to the ringer.\nfunction ringers(P) {\n  const { n, buf, col } = P;\n  for (let i = 0; i \u003c n; i++) {\n    const x = round(P.bx[i] - 0.5);\n    const rise = (SWING - P.th[i]) / (2 * SWING);\n    const top = round(CEIL + 9 - rise * 7);\n    for (let y = CEIL + 2; y \u003c H; y++) {\n      if (y >= top && y \u003c top + 7) {\n        for (let c = -1; c \u003c= 1; c++) {\n          const k = (y - top + c + 8) % 4;\n          const v = (c === 1 ? 0.7 : 1) * (k === 2 ? 0.55 : 1);\n          for (let j = 0; j \u003c 3; j++) buf[(y * W + x + c) * 3 + j] = (k & 1 ? [232, 226, 214][j] : col[i * 3 + j]) * v;\n        }\n      } else if (y \u003c top + 13) put(buf, x, y, 176, 146, 102);\n    }\n  }\n}\n\nfunction message(P) {\n  if (!P.msg) return;\n  const [s, left] = P.msg;\n  const f = min(1, left / 0.5);\n  const w = s.length * 4 - 1;\n  const x = round(32 - w / 2);\n  const y = LOW - 8;\n  for (let yy = y - 2; yy \u003c y + 7; yy++) for (let xx = x - 2; xx \u003c x + w + 2; xx++) put(P.buf, xx, yy, 0, 0, 0);\n  glyphs(P.buf, s, x, y, 255 * f, 240 * f, 200 * f);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, col, n } = P;\n  if (!n) return;\n  for (let b = 0; b \u003c n; b++) {\n    if (b === 0) hsv(0, 0.84, 1, col, 0);\n    else {\n      // The working bells share the wheel without its reds, so only the treble is red.\n      const u = 0.05 + P.hue + (0.84 * (b - 1)) / (n - 2);\n      hsv(0.13 + 0.74 * (u - floor(u)), 0.82, 1, col, b * 3);\n    }\n  }\n  buf.set(P.bg);\n  chamber(P);\n  scroll(P);\n  numbers(P);\n  ringers(P);\n  message(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-change-ringing","type":"code","name":"change-ringing","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Change Ringing\n// Family:  rhythm\n// Idea:    In the bell chamber of a church tower the bells swing full circle on their wheels and flash as they strike, while below them the method they ring prints itself down the panel as a blue line, one change to a row, the treble's line in red, from rounds into Plain Bob and back into rounds.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: English change ringing (plain hunting, Plain Bob, Double Bob) and the blue-line diagrams ringers learn methods from, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Lines=0..1, Speed=0.25..3, Bells=4..8, Method=-1..1\n//\n// Knob 1: Lines. Turns the colours of the working bells' lines round the wheel together, from yellow through cyan to violet at 0; the turn skips the reds, so the treble's line is the only red one.\n// Knob 2: Speed. The ringing pace: at 2 a bell strikes every 0.3 s, so a row of six takes 1.8 s, with the open handstroke gap of one more beat after every second row.\n// Knob 3: Bells. How many bells hang in the tower and ring: 4 is Minimus, 5 Doubles, 6 Minor, 7 Triples and 8 Major. Changing it starts the band again from rounds.\n// Knob 4: Method. -1 is plain hunting, 0 is Plain Bob (seconds place at each lead end, the bells dodging round the treble) and 1 is Double Bob, which makes the mirror of it at the half lead as well. A change waits for the next lead end, so the methods splice.\n// Buttons: K1 tap calls \"Bob!\": the next lead end makes fourths place instead, a gold rule marks it in the scroll, and the conductor calls more bobs as needed to bring the bells back into rounds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Axle rows of the two tiers of bells, and the chamber floor.\nconst TIER = [12, 26];\nconst FLOOR = 37;\n// The current change printed as numbers, the row its line starts on, and the\n// bottom of the scroll. The ringing chamber is under that.\nconst DIG = 41;\nconst TOP = 49;\nconst LOW = 111;\nconst CEIL = 112;\n// A bell rings just short of the balance either side, mouth up.\nconst SWING = Math.PI * 0.94;\n// Seconds a beat at Speed 1, and how far past a strike the bell reaches the balance.\nconst BEAT = 0.6;\nconst BAL = 0.22;\nconst ROUNDS = 6;\nconst SLIDE = 1.2;\nconst { min, max, floor, round, sin, cos, abs, sqrt, exp, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n// 3x5 letters, one octal digit a row.\nconst FONT = {\n  1: \"26227\", 2: \"71747\", 3: \"71717\", 4: \"55711\", 5: \"74717\", 6: \"74757\", 7: \"71222\", 8: \"75757\",\n  A: \"25755\", B: \"65656\", D: \"65556\", E: \"74647\", G: \"34553\", H: \"55755\", I: \"72227\", L: \"44447\",\n  N: \"57755\", O: \"25552\", P: \"65644\", S: \"34216\", T: \"72222\", U: \"55557\", \"!\": \"22202\", \" \": \"00000\",\n};\nconst NAMES = [\"PLAIN HUNT\", \"PLAIN BOB\", \"DOUBLE BOB\"];\n\n// Start of row r in beats: n strikes a row and one beat of handstroke gap\n// before every handstroke but the first.\nconst startOf = (n, r) => r * n + floor(r / 2);\n\n// One lead as place notation: a bitmask of the places made, 0 for a cross.\n// Even stages hunt x.1n, odd ones n.1; Plain Bob makes seconds at the lead\n// end (fourths at a bob) and Double Bob the mirror of it at the half lead.\nfunction leadChanges(n, m, bob) {\n  const top = 1 \u003c\u003c (n - 1);\n  const odd = n & 1;\n  const ch = [];\n  for (let k = 0; k \u003c 2 * n; k++) ch.push(k & 1 ? (odd ? 1 : 1 | top) : odd ? top : 0);\n  if (m === 2) ch[n - 1] = top | (top >> 1) | (odd ? 1 : 0);\n  if (m > 0 || bob) ch[2 * n - 1] = (bob ? 9 : 3) | (odd ? top : 0);\n  return ch;\n}\n\nfunction change(row, mask, n) {\n  for (let i = 0; i \u003c n; ) {\n    if ((mask >> i) & 1 || i === n - 1) i++;\n    else {\n      const t = row[i];\n      row[i] = row[i + 1];\n      row[i + 1] = t;\n      i += 2;\n    }\n  }\n}\n\nconst rounds = (n) => Array.from({ length: n }, (_, i) => i);\n\nfunction leadPerm(n, m, bob) {\n  const r = rounds(n);\n  for (const c of leadChanges(n, m, bob)) change(r, c, n);\n  return r;\n}\n\n// Leads from each lead head back to rounds, plain or bob, found once.\nfunction table(P, n, m) {\n  const id = n * 3 + m;\n  if (P.tables[id]) return P.tables[id];\n  const R = [leadPerm(n, m, false), leadPerm(n, m, true)];\n  const dist = new Map([[rounds(n).join(\"\"), 0]]);\n  const q = [rounds(n)];\n  for (let h = 0; h \u003c q.length; h++) {\n    const X = q[h];\n    const d = dist.get(X.join(\"\"));\n    for (const p of R) {\n      const Y = [];\n      for (let i = 0; i \u003c n; i++) Y[p[i]] = X[i];\n      const key = Y.join(\"\");\n      if (!dist.has(key)) {\n        dist.set(key, d + 1);\n        q.push(Y);\n      }\n    }\n  }\n  return (P.tables[id] = dist);\n}\n\nfunction say(P, text, row) {\n  if (row \u003c= P.cur) P.msg = [text, 2.4];\n  else P.calls.set(row, text);\n}\n\n// The next row of the touch: rounds, then the method lead after lead until\n// it comes round, then rounds again.\nfunction gen(P) {\n  const G = P.G;\n  const n = P.n;\n  const r = P.r0 + P.rows.length;\n  const row = G.row.slice();\n  let mark = 0;\n  if (G.phase === 0) {\n    if (++G.count >= G.need) {\n      Object.assign(G, { phase: 1, ci: 0, m: P.m, called: false, first: true, need: ROUNDS, rung: 0 });\n      say(P, \"GO \" + NAMES[G.m], r - 1);\n    }\n  } else {\n    if (G.ci === 0) {\n      if (!G.first && G.m !== P.m) say(P, NAMES[P.m], r - 1);\n      G.m = P.m;\n      G.first = false;\n      G.head = row.slice();\n    }\n    const last = G.ci === 2 * n - 1;\n    let bob = false;\n    if (last) {\n      if (G.pend) {\n        G.pend = false;\n        G.called = bob = true;\n      } else if (G.called) {\n        const T = table(P, n, G.m);\n        const after = (b) => {\n          const p = leadPerm(n, G.m, b);\n          return T.get(p.map((i) => G.head[i]).join(\"\")) ?? 1e9;\n        };\n        bob = after(true) \u003c after(false);\n        if (bob) say(P, \"BOB!\", r - 2);\n      }\n      // Plain hunting has no lead end to rule off.\n      mark = bob ? 2 : G.m ? 1 : 0;\n    }\n    change(row, leadChanges(n, G.m, bob)[G.ci], n);\n    G.ci = last ? 0 : G.ci + 1;\n    G.rung++;\n    if (last && G.rung >= 24 && row.every((b, i) => b === i)) {\n      Object.assign(G, { phase: 0, count: 0 });\n      say(P, \"THATS ALL\", r);\n    }\n  }\n  G.row = row;\n  const pos = new Int8Array(n);\n  row.forEach((b, i) => (pos[b] = i));\n  P.rows.push(Int8Array.from(row));\n  P.pos.push(pos);\n  P.mark.push(mark);\n}\n\nfunction rowAt(P, tau) {\n  const n = P.n;\n  let r = max(0, floor(tau / (n + 0.5)));\n  while (startOf(n, r + 1) \u003c= tau) r++;\n  while (r > 0 && startOf(n, r) > tau) r--;\n  return r;\n}\n\nfunction need(P, r) {\n  while (P.r0 + P.rows.length \u003c= r) gen(P);\n}\n\nconst strike = (P, r, b) => startOf(P.n, r) + P.pos[r - P.r0][b];\nconst balance = (P, r, b) => strike(P, r, b) + BAL * (strike(P, r + 1, b) - strike(P, r, b));\n\nfunction layout(P, n) {\n  const dx = W / n;\n  const rb = min(10, 0.47 * Math.hypot(dx, TIER[1] - TIER[0]), 0.94 * dx);\n  for (let i = 0; i \u003c n; i++) {\n    P.bx[i] = (i + 0.5) * dx;\n    P.by[i] = TIER[i & 1];\n    P.br[i] = rb * (0.74 + (0.26 * i) / (n - 1));\n  }\n  P.rh = n \u003c 5 ? 6 : n \u003c 7 ? 5 : 4;\n  P.sp = min(60 / (n - 1), P.rh * 2.1);\n  for (let p = 0; p \u003c n; p++) P.xs[p] = 32 + (p - (n - 1) / 2) * P.sp;\n  P.V = floor((LOW - TOP) / P.rh) + 1;\n}\n\nfunction paint(P) {\n  const S = P.bg;\n  const n = P.n;\n  S.fill(0);\n  const set = (x, y, r, g, b) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) S.set([r, g, b], (y * W + x) * 3);\n  };\n  // Stone walls of the bell chamber, coursed in blocks of 8 by 4.\n  for (let y = 0; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const bx = floor((x + ((y >> 2) & 1) * 4) / 8);\n      const by = y >> 2;\n      const joint = y % 4 === 3 || (x + ((y >> 2) & 1) * 4) % 8 === 7;\n      const s = joint ? 8 : 15 + ((bx * 7 + by * 13) % 5) * 1.6 + Math.random() * 3;\n      set(x, y, s * 1.05, s, s * 0.9);\n    }\n  // A louvred window behind the bells, daylight between the boards.\n  for (let y = 3; y \u003c 33; y++)\n    for (let x = 27; x \u003c 37; x++) {\n      const arch = y \u003c 8 && Math.hypot(x + 0.5 - 32, y - 8) > 5;\n      if (arch) continue;\n      const edge = x === 27 || x === 36 || (y \u003c 8 && Math.hypot(x + 0.5 - 32, y - 8) > 4);\n      const slat = (y + floor((x - 27) / 3)) % 3 === 0;\n      if (edge) set(x, y, 52, 46, 40);\n      else if (slat) set(x, y, 46, 40, 34);\n      else set(x, y, 120 + y, 150 + y, 186 + y * 0.5);\n    }\n  // The frame: an oak beam under each tier's bearings.\n  for (const ty of TIER)\n    for (let x = 0; x \u003c W; x++) {\n      set(x, ty + 2, 70, 46, 28);\n      set(x, ty + 3, 44, 28, 18);\n    }\n  // The floor boards, with a hole for each rope.\n  for (let y = FLOOR; y \u003c FLOOR + 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const hole = y > FLOOR && P.bx.some((b, i) => i \u003c n && x === floor(b + P.br[i] - 0.6));\n      const v = y === FLOOR ? 1 : hole ? 0.2 : x % 11 === 5 ? 0.45 : 0.72;\n      set(x, y, 104 * v, 70 * v, 42 * v);\n    }\n  // Faint rulings down each place of the scroll.\n  for (let p = 0; p \u003c n; p++)\n    for (let y = TOP; y \u003c= LOW; y += 2) set(floor(P.xs[p]), y, 9, 9, 13);\n  // The ringing chamber: ceiling beam and plastered wall.\n  for (let y = CEIL; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y \u003c CEIL + 2) set(x, y, y === CEIL ? 84 : 52, y === CEIL ? 58 : 34, y === CEIL ? 36 : 22);\n      else {\n        const s = 34 + Math.random() * 4 - (y - CEIL) * 0.5;\n        set(x, y, s * 1.1, s, s * 0.84);\n      }\n    }\n}\n\nfunction reset(P, n) {\n  P.n = n;\n  layout(P, n);\n  paint(P);\n  P.G = { row: rounds(n), phase: 0, count: 0, need: 4, ci: 0, m: P.m, pend: false, called: false };\n  Object.assign(P, { rows: [], pos: [], mark: [], r0: 0, calls: new Map(), msg: null, cur: -1 });\n  // Open part way into the first touch, with its first lead end in view.\n  const r = 4 + 2 * n + floor(P.V / 2);\n  need(P, r + 3);\n  P.tau = startOf(n, r) + 1.5;\n  P.cur = r;\n  P.fl.fill(0);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (k) => new Float32Array(k);\n  Object.assign(P, { buf: F(N * 3), bg: F(N * 3), bx: F(8), by: F(8), br: F(8), xs: F(8), th: F(8), fl: F(8), col: F(24) });\n  Object.assign(P, { tables: {}, n: 0, m: 1, hue: 0, speed: 2, tau: 0, e: 1 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = clamp(k[1], 0.25, 3);\n  P.m = k[3] \u003c -0.4 ? 0 : k[3] > 0.4 ? 2 : 1;\n  const n = clamp(round(k[2]), 4, 8);\n  if (n !== P.n) reset(P, n);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.G.pend = true;\n    P.msg = [\"BOB!\", 2.4];\n  }\n  const was = P.tau;\n  P.tau += (dt * P.speed) / BEAT;\n  const cur = rowAt(P, P.tau);\n  need(P, cur + 3);\n  for (let r = P.cur + 1; r \u003c= cur; r++)\n    if (P.calls.has(r)) {\n      P.msg = [P.calls.get(r), 2.4];\n      P.calls.delete(r);\n    }\n  P.cur = cur;\n  // Strikes since the last frame.\n  for (let r = rowAt(P, was); r \u003c= cur; r++)\n    for (let b = 0; b \u003c n; b++) {\n      const t = strike(P, r, b);\n      if (t > was && t \u003c= P.tau) P.fl[b] = 1;\n    }\n  for (let b = 0; b \u003c n; b++) {\n    P.fl[b] *= exp(-dt * 5);\n    // The stroke this bell is in: from one balance to the next.\n    let s = cur;\n    if (P.tau \u003c balance(P, s - 1, b)) s--;\n    else if (P.tau >= balance(P, s, b)) s++;\n    const b0 = balance(P, s - 1, b);\n    const u = (P.tau - b0) / (balance(P, s, b) - b0);\n    P.th[b] = (s & 1 ? -1 : 1) * SWING * cos(PI * clamp(u, 0, 1));\n  }\n  P.e = smooth((P.tau - startOf(n, cur)) / SLIDE);\n  if (P.msg && (P.msg[1] -= dt) \u003c= 0) P.msg = null;\n  // Keep sixty rows of history; the scroll shows at most seventeen.\n  if (P.rows.length > 80) {\n    const cut = P.rows.length - 60;\n    for (const A of [P.rows, P.pos, P.mark]) A.splice(0, cut);\n    P.r0 += cut;\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6;\n  const f = h - floor(h);\n  const a = v * (1 - s);\n  const b = v * (1 - s * f);\n  const c = v * (1 - s * (1 - f));\n  const rgb = [[v, c, a], [b, v, a], [a, v, c], [a, b, v], [c, a, v], [v, a, b]][i];\n  for (let k = 0; k \u003c 3; k++) out[o + k] = rgb[k] * 255;\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = (y * W + x) * 3;\n  buf[p] = r;\n  buf[p + 1] = g;\n  buf[p + 2] = b;\n}\n\nfunction bell(P, i) {\n  const { buf, col } = P;\n  const ax = P.bx[i];\n  const ay = P.by[i];\n  const R = P.br[i];\n  const th = P.th[i];\n  const fl = P.fl[i];\n  const mx = -sin(th);\n  const my = cos(th);\n  const L = 0.92 * R;\n  const u0 = 0.06 * R;\n  const G = R + 3;\n  const hl = -0.45 * my;\n  const spokes = [0, 1, 2, 3].map((s) => [cos(th + PI / 4 + (s * PI) / 2), sin(th + PI / 4 + (s * PI) / 2)]);\n  for (let y = max(0, floor(ay - G)); y \u003c= min(FLOOR - 1, floor(ay + G)); y++)\n    for (let x = max(0, floor(ax - G)); x \u003c= min(W - 1, floor(ax + G)); x++) {\n      const p = (y * W + x) * 3;\n      const dx = x + 0.5 - ax;\n      const dy = y + 0.5 - ay;\n      const d = sqrt(dx * dx + dy * dy);\n      if (d >= G) continue;\n      // The strike lights the air round the bell in the colour of its line.\n      if (fl > 0.02) {\n        const g = fl * 0.55 * (1 - d / G);\n        for (let c = 0; c \u003c 3; c++) buf[p + c] += col[i * 3 + c] * g;\n      }\n      // Wheel: rim and four spokes, turning with the bell.\n      let wv = clamp(1 - abs(d - (R - 0.5)) / 0.7, 0, 1);\n      if (d \u003c R - 0.8)\n        for (const [c, s] of spokes) {\n          const along = dx * c + dy * s;\n          if (along > 0) wv = max(wv, 0.5 * clamp(1 - abs(dy * c - dx * s) / 0.6, 0, 1));\n        }\n      if (wv > 0) {\n        buf[p] += (104 - buf[p]) * wv;\n        buf[p + 1] += (68 - buf[p + 1]) * wv;\n        buf[p + 2] += (38 - buf[p + 2]) * wv;\n      }\n      // The bell and its headstock, four samples to an LED.\n      if (d > 1.15 * R + 0.8) continue;\n      let cov = 0;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let s = 0; s \u003c 4; s++) {\n        const sx = dx - 0.25 + 0.5 * (s & 1);\n        const sy = dy - 0.25 + 0.5 * (s >> 1);\n        const u = sx * mx + sy * my;\n        const v = sx * my - sy * mx;\n        if (u \u003c u0) {\n          if (u > -0.16 * R && abs(v) \u003c 0.38 * R) {\n            r += 72;\n            g += 58;\n            b += 50;\n            cov++;\n          }\n          continue;\n        }\n        const t = (u - u0) / L;\n        if (t \u003c 0 || t > 1) continue;\n        let w = L * (0.27 + 0.06 * t + 0.27 * t * t * t * t);\n        if (t \u003c 0.12) w *= 0.6 + (0.4 * t) / 0.12;\n        const q = v / w;\n        if (abs(q) > 1) continue;\n        let sh = (0.5 + 0.65 * exp(-(q - hl) * (q - hl) * 5)) * (1 - 0.3 * q * q);\n        if (t > 0.8 && t \u003c 0.93) sh *= 1.12;\n        else if (t > 0.94) sh *= 0.55;\n        r += 228 * sh + fl * 200;\n        g += 160 * sh + fl * 170;\n        b += 70 * sh + fl * 120;\n        cov++;\n      }\n      if (cov) {\n        const a = cov / 4;\n        buf[p] = buf[p] * (1 - a) + r / 4;\n        buf[p + 1] = buf[p + 1] * (1 - a) + g / 4;\n        buf[p + 2] = buf[p + 2] * (1 - a) + b / 4;\n      }\n    }\n}\n\nfunction chamber(P) {\n  const { n, buf } = P;\n  // Each rope comes off its wheel and down through the floor, creeping as the wheel turns.\n  for (let i = 0; i \u003c n; i++) {\n    const x = floor(P.bx[i] + P.br[i] - 0.6);\n    for (let y = P.by[i]; y \u003c FLOOR + 3 && x \u003c W; y++) {\n      const v = 0.6 + 0.3 * sin((y + P.th[i] * P.br[i]) * 1.4);\n      put(buf, x, y, 168 * v, 134 * v, 90 * v);\n    }\n  }\n  for (let i = 0; i \u003c n; i += 2) bell(P, i);\n  for (let i = 1; i \u003c n; i += 2) bell(P, i);\n}\n\n// One leg of a bell's line, a soft 1-LED core with a dim edge either side,\n// kept brightest where lines cross.\nfunction seg(P, x0, y0, x1, y1, b, k) {\n  const { buf, col } = P;\n  const core = b === 0 ? 0.9 : 0.72;\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const l2 = dx * dx + dy * dy || 1;\n  const o = b * 3;\n  for (let y = max(TOP - 1, floor(min(y0, y1) - 3)); y \u003c= min(LOW, floor(max(y0, y1) + 3)); y++)\n    for (let x = max(0, floor(min(x0, x1) - 3)); x \u003c= min(W - 1, floor(max(x0, x1) + 3)); x++) {\n      const px = x + 0.5 - x0;\n      const py = y + 0.5 - y0;\n      const t = clamp((px * dx + py * dy) / l2, 0, 1);\n      const ex = px - t * dx;\n      const ey = py - t * dy;\n      const d = sqrt(ex * ex + ey * ey);\n      let v = d \u003c core ? 1 : d \u003c core + 1 ? core + 1 - d : 0;\n      v = max(v, 0.36 * clamp(2.8 - d, 0, 1)) * k;\n      if (v \u003c= 0) continue;\n      const p = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[p + c] = max(buf[p + c], col[o + c] * v);\n    }\n}\n\nfunction scroll(P) {\n  const { n, rh, xs, cur, buf, e } = P;\n  for (let a = 0; a \u003c= P.V; a++) {\n    const r = cur - a;\n    if (r - 1 \u003c P.r0) break;\n    const ya = TOP + (a - 1 + e) * rh + 0.5;\n    const k = 0.4 + 0.6 * exp(-(a + e) / 6);\n    const A = P.pos[r - P.r0];\n    const B = P.pos[r - 1 - P.r0];\n    // A rule under each lead end, gold and dashed where a bob was called.\n    const mark = P.mark[r - P.r0];\n    const yr = floor(ya + rh / 2);\n    if (mark && yr >= TOP && yr \u003c= LOW)\n      for (let x = floor(xs[0] - 3); x \u003c= xs[n - 1] + 3; x++)\n        if (mark === 2 ? x % 3 !== 0 : x % 2 === 0) put(buf, x, yr, (mark === 2 ? 220 : 70) * k, (mark === 2 ? 170 : 70) * k, (mark === 2 ? 60 : 84) * k);\n    for (let b = n - 1; b >= 0; b--) seg(P, xs[A[b]], ya, xs[B[b]], ya + rh, b, k);\n  }\n}\n\nfunction glyphs(buf, s, x, y, r, g, b) {\n  for (const ch of s) {\n    const gl = FONT[ch] || FONT[\" \"];\n    for (let row = 0; row \u003c 5; row++)\n      for (let c = 0; c \u003c 3; c++) if ((+gl[row] >> (2 - c)) & 1) put(buf, x + c, y + row, r, g, b);\n    x += 4;\n  }\n}\n\n// The change being struck, as numbers: each lights in its bell's colour as\n// it sounds, with a white flash on the strike.\nfunction numbers(P) {\n  const { n, buf, col, xs } = P;\n  const row = P.rows[P.cur - P.r0];\n  const j = P.tau - startOf(n, P.cur);\n  for (let p = 0; p \u003c n; p++) {\n    const b = row[p];\n    const since = j - p;\n    const v = since \u003c 0 ? 0.3 : 0.85;\n    const w = since \u003c 0 ? 0 : max(0, 1 - since / 0.9);\n    const c = [0, 1, 2].map((i) => col[b * 3 + i] * v * (1 - w) + 255 * w);\n    glyphs(buf, String(b + 1), round(xs[p] - 1.5), DIG, c[0], c[1], c[2]);\n    if (since \u003c 0) continue;\n    // Each node of the row lights as its bell sounds, white for the moment of the strike.\n    const ny = TOP + (P.e - 1) * P.rh + 0.5;\n    for (let y = max(TOP - 1, floor(ny - 4)); y \u003c= floor(ny + 4); y++)\n      for (let x = max(0, floor(xs[p] - 4)); x \u003c= min(W - 1, floor(xs[p] + 4)); x++) {\n        const d = Math.hypot(x + 0.5 - xs[p], y + 0.5 - ny);\n        if (d >= 4) continue;\n        const g = (1 - d / 4) * (0.45 + 0.5 * w);\n        const q = (y * W + x) * 3;\n        for (let i = 0; i \u003c 3; i++) buf[q + i] = max(buf[q + i], (col[b * 3 + i] * (1 - w) + 255 * w) * g);\n      }\n  }\n}\n\n// Ropes and sallies in the ringing chamber, each sally woven in its bell's\n// colour and white: it rises as its bell swings off the handstroke and comes\n// back down to the ringer.\nfunction ringers(P) {\n  const { n, buf, col } = P;\n  for (let i = 0; i \u003c n; i++) {\n    const x = round(P.bx[i] - 0.5);\n    const rise = (SWING - P.th[i]) / (2 * SWING);\n    const top = round(CEIL + 9 - rise * 7);\n    for (let y = CEIL + 2; y \u003c H; y++) {\n      if (y >= top && y \u003c top + 7) {\n        for (let c = -1; c \u003c= 1; c++) {\n          const k = (y - top + c + 8) % 4;\n          const v = (c === 1 ? 0.7 : 1) * (k === 2 ? 0.55 : 1);\n          for (let j = 0; j \u003c 3; j++) buf[(y * W + x + c) * 3 + j] = (k & 1 ? [232, 226, 214][j] : col[i * 3 + j]) * v;\n        }\n      } else if (y \u003c top + 13) put(buf, x, y, 176, 146, 102);\n    }\n  }\n}\n\nfunction message(P) {\n  if (!P.msg) return;\n  const [s, left] = P.msg;\n  const f = min(1, left / 0.5);\n  const w = s.length * 4 - 1;\n  const x = round(32 - w / 2);\n  const y = LOW - 8;\n  for (let yy = y - 2; yy \u003c y + 7; yy++) for (let xx = x - 2; xx \u003c x + w + 2; xx++) put(P.buf, xx, yy, 0, 0, 0);\n  glyphs(P.buf, s, x, y, 255 * f, 240 * f, 200 * f);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, col, n } = P;\n  if (!n) return;\n  for (let b = 0; b \u003c n; b++) {\n    if (b === 0) hsv(0, 0.84, 1, col, 0);\n    else {\n      // The working bells share the wheel without its reds, so only the treble is red.\n      const u = 0.05 + P.hue + (0.84 * (b - 1)) / (n - 2);\n      hsv(0.13 + 0.74 * (u - floor(u)), 0.82, 1, col, b * 3);\n    }\n  }\n  buf.set(P.bg);\n  chamber(P);\n  scroll(P);\n  numbers(P);\n  ringers(P);\n  message(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lines=0..1, Speed=0.25..3, Bells=4..8, Method=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lines","min":0,"max":1,"about":"Turns the colours of the working bells' lines round the wheel together, from yellow through cyan to violet at 0; the turn skips the reds, so the treble's line is the only red one."},{"name":"Speed","min":0.25,"max":3,"about":"The ringing pace: at 2 a bell strikes every 0.3 s, so a row of six takes 1.8 s, with the open handstroke gap of one more beat after every second row."},{"name":"Bells","min":4,"max":8,"about":"How many bells hang in the tower and ring: 4 is Minimus, 5 Doubles, 6 Minor, 7 Triples and 8 Major. Changing it starts the band again from rounds."},{"name":"Method","min":-1,"max":1,"about":"-1 is plain hunting, 0 is Plain Bob (seconds place at each lead end, the bells dodging round the treble) and 1 is Double Bob, which makes the mirror of it at the half lead as well. A change waits for the next lead end, so the methods splice."}],"start":[0,2,4,0.06],"measures":{"motion":0.4844,"detail":0.08,"edges":0.458,"complexity":1.2457,"coverage":0.5293,"colour":0.2305,"drift":0.0504},"knobResponse":[0.0499,0.1129,0.1732,0.0613]},{"slug":"chemical-garden","title":"Chemical Garden","family":"chemistry","round":21,"note":"물유리 용액을 채운 키 큰 유리컵 모래 위에 금속염 결정을 떨어뜨리면 코발트의 청보라나 철의 녹슨 주황 같은 속 빈 광물 관이 흔들리며 수면까지 자라요. 컵이 차면 빈 컵이 밀려 들어와 다시 자라요.","idea":"Metal-salt crystals dropped into a tall glass of water-glass solution on a lab bench sprout hollow mineral tubes in cobalt blue, copper turquoise, rust, nickel green, manganese pink and calcium white that wobble up towards the surface, burst and bud sideways, until the glass is full and a fresh one slides in.","buttons":"K1 tap slides the glass away and brings in a fresh one.","code":"// ===== Patternflow pattern =====\n// Title:   Chemical Garden\n// Family:  chemistry\n// Idea:    Metal-salt crystals dropped into a tall glass of water-glass solution on a lab bench sprout hollow mineral tubes in cobalt blue, copper turquoise, rust, nickel green, manganese pink and calcium white that wobble up towards the surface, burst and bud sideways, until the glass is full and a fresh one slides in.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the chemical garden (silicate garden) of the school chemistry lab\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Salts=0..4, Speed=0.2..3, Crystals=5..20, Strength=-1..1\n//\n// Knob 1: Salts. What goes into the glass: all six salts at 0 (cobalt chloride's blue-violet, copper sulfate's turquoise, iron(III) chloride's rust, nickel sulfate's green, manganese chloride's pink, calcium chloride's white), the cool cobalt, copper and calcium at 1, the warm iron, manganese and calcium at 2, the greens of nickel and copper at 3, cobalt alone at 4.\n// Knob 2: Speed. How fast the garden grows: at 2 a tube that races takes about 11 s from its crystal to the surface and a glass lasts about half a minute before the next slides in; at 0.2 it creeps.\n// Knob 3: Crystals. How many crystals are dropped in, 5 to 20; each sends up four to six tubes as it dissolves, and those bud more. Turned up mid-glass, the extra crystals drop in at once.\n// Knob 4: Strength. How strong the water glass is: near 0 the usual mix, towards -1 a thin solution where hair-fine threads shoot up in 6 s and wriggle, towards 1 a thick one where fat tubes take 18 s and bud into knobbly branches.\n// Buttons: K1 tap slides the glass away and brings in a fresh one.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round, ceil, sin, abs, sqrt, exp, hypot } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\n\n// The glass in its own columns (walls at 3..4 and 59..60), so sliding it is\n// one offset. The rim, the solution's surface and the sand's top are\n// ellipses seen from a little above; z is depth, 0 at the front pane.\nconst GL = 3;\nconst GR = 60;\nconst IL = 5;\nconst IR = 58;\nconst RIM = 4;\nconst SY = 13;\nconst SAND = 104;\nconst BOT = 110;\nconst BENCH = 114;\nconst [HR, HS, HD] = [2.2, 2.2, 2.6];\nconst ell = (x) => sqrt(max(0, 1 - ((x - 31.5) / 28) ** 2));\nconst surfAt = (x, z) => SY + HS * ell(x) * (1 - 2 * z);\nconst sandAt = (x, z) => SAND + HD * ell(x) * (1 - 2 * z);\nconst [OUT, AIR, SOL, TOPS, SIDE, WALL, SHEET, BASE] = [0, 1, 2, 3, 4, 5, 6, 7];\nconst GROWS = [0, 0, 1, 1, 1, 0, 1, 0];\nconst [GROW, HOLD, SWAP] = [0, 1, 2];\nconst SLIDE = 70;\nconst MAXT = 900;\n\n// Each salt: the colour of its silicate tube, the colour of the crystal as\n// it goes in (cobalt chloride goes in pink and grows blue), and how fast and\n// how fat its tubes grow: iron's rust threads shoot up, calcium's white tubes\n// push up slow and thick.\nconst SALT = [\n  [[96, 76, 246], [222, 52, 112], 1.1, 0.9],\n  [[30, 184, 214], [40, 108, 255], 0.95, 1],\n  [[255, 122, 30], [200, 150, 34], 1.3, 0.72],\n  [[118, 224, 74], [58, 198, 126], 0.85, 1.15],\n  [[255, 168, 184], [240, 170, 186], 0.8, 1.05],\n  [[232, 234, 224], [244, 244, 238], 0.72, 1.4],\n];\nconst SETS = [[0, 1, 2, 3, 4, 5], [0, 1, 5], [2, 4, 5], [3, 1], [0]];\nconst saltOf = (P, J, si) => SALT[SETS[P.set][J.seeds[si].slot % SETS[P.set].length]];\n\n// The room: a dark wall with a frosted globe lamp behind the glass. The\n// solution seen against it is faintly yellow-green and a little cloudy.\nfunction paint(P) {\n  const WL = (P.wl = new Float32Array(N * 3));\n  const LA = (P.la = new Float32Array(N));\n  const SO = (P.so = new Float32Array(N * 3));\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const d = hypot((x + 0.5 - 32) * 1.15, y + 0.5 - 44);\n      const bulb = exp(-((d / 9) ** 2));\n      const glow = exp(-((d / 24) ** 2));\n      LA[p] = 0.45 * bulb + 0.75 * glow;\n      const n = (rnd() - 0.5) * 3;\n      const a = 0.12 * bulb + 0.25 * glow;\n      WL.set([11 + 255 * a + n, 12 + 234 * a + n, 17 + 194 * a + n], p * 3);\n      const deep = 1 - (0.16 * max(0, y - SY)) / 95;\n      SO.set([(WL[p * 3] * 0.9 + 7) * deep, (WL[p * 3 + 1] * 0.98 + 10) * deep, (WL[p * 3 + 2] * 0.78 + 7) * deep], p * 3);\n    }\n}\n\n// The glass, its sand and its base, in the glass's own columns. C holds the\n// opaque colours, M darkens the solution towards the walls, O is the front\n// pane's reflections, added last.\nfunction glass(P) {\n  const K = (P.jk = new Uint8Array(N));\n  const C = (P.jc = new Float32Array(N * 3));\n  const M = (P.jm = new Float32Array(N));\n  const O = (P.jo = new Float32Array(N * 3));\n  const put = (A, x, y, c) => A.set(c, (y * W + x) * 3);\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = GL; x \u003c= GR; x++) {\n      const p = y * W + x;\n      const e = ell(x);\n      const u = (x + 0.5 - 31.5) / 28;\n      const lamp = exp(-(((y - 46) / 30) ** 2));\n      M[p] = 0.7 + 0.3 * sqrt(max(0, 1 - u * u));\n      const yc = y + 0.5;\n      let k = OUT;\n      if (y >= BOT) {\n        k = BASE;\n        if (y === BENCH - 1 && (x === GL || x === GR)) k = OUT;\n      } else if (x \u003c IL || x > IR) k = y >= RIM ? WALL : OUT;\n      else if (yc \u003c RIM - HR * e - 0.6) k = OUT;\n      else if (yc \u003c SY - HS * e) k = AIR;\n      else if (yc \u003c SY + HS * e) k = SHEET;\n      else if (yc \u003c SAND - HD * e) k = SOL;\n      else if (yc \u003c SAND + HD * e) k = TOPS;\n      else k = SIDE;\n      K[p] = k;\n      const gr = 0.8 + 0.4 * rnd();\n      if (k === WALL) {\n        // The outer edge of each wall catches the lamp; the glass's thickness, seen edge on, is dark.\n        const c = x === GL ? 0.55 + 0.75 * lamp : x === GR ? 0.4 + 0.5 * lamp : x === GL + 1 ? 0.1 : 0.14;\n        put(C, x, y, [110 * c, 140 * c, 134 * c]);\n      } else if (k === BASE) {\n        const c = y === BOT ? 0.95 - 0.35 * abs(u) : y === BENCH - 1 ? 0.62 : 0.3 + 0.1 * sin(x * 0.7);\n        put(C, x, y, [100 * c, 136 * c, 126 * c]);\n      } else if (k === TOPS) put(C, x, y, [176 * gr, 160 * gr, 124 * gr]);\n      else if (k === SIDE) {\n        // Sand through the front pane, darker low down, in faint layers.\n        const f = (0.8 - (0.32 * (y - SAND)) / 6 + 0.08 * sin(y * 2.1 + x * 0.15)) * gr;\n        put(C, x, y, [150 * f, 134 * f, 100 * f]);\n      } else if (k === SHEET) put(C, x, y, [34, 44, 42]);\n    }\n  // The rim's lips and the meniscus, smoothed over two rows, with the room's\n  // window caught on the left.\n  const line = (x, yc, c) => {\n    for (let y = floor(yc - 1); y \u003c= floor(yc + 1); y++) {\n      const w = max(0, 1 - abs(y + 0.5 - yc));\n      for (let i = 0; i \u003c 3; i++) O[(y * W + x) * 3 + i] += c[i] * w;\n    }\n  };\n  for (let x = IL; x \u003c= IR; x++) {\n    const e = ell(x);\n    const gl = x > 8 && x \u003c 19 ? 1.6 : 1;\n    line(x, RIM - HR * e, [56, 70, 68]);\n    line(x, RIM + HR * e, [140 * gl, 158 * gl, 152 * gl]);\n    line(x, RIM + HR * e + 1, [26, 34, 32]);\n    line(x, SY - HS * e, [26, 36, 34]);\n    line(x, SY + HS * e, [100 * gl, 124 * gl, 116 * gl]);\n  }\n  for (let y = 16; y \u003c 100; y++) {\n    const f = sin((Math.PI * (y - 16)) / 84);\n    for (let c = 0; c \u003c 3; c++) {\n      O[(y * W + 9) * 3 + c] += 16 * f;\n      O[(y * W + 10) * 3 + c] += 9 * f;\n      O[(y * W + 52) * 3 + c] += 8 * f;\n    }\n  }\n}\n\nfunction jar() {\n  return { tid: new Int16Array(N), sh: new Float32Array(N), zb: new Float32Array(N), bo: new Float32Array(N), on: false, off: 0, g: 0, tips: [], tubes: [], seeds: [], bub: [], pops: [], motes: [], done: false };\n}\n\nfunction addSeed(P, J, x, t0) {\n  const z = rnd();\n  J.seeds.push({ x, z, y: -2, rest: sandAt(x, z) - 0.6, slot: J.seeds.length + J.rot, t0, land: -1, wet: 0, m: 0, mid: -1, next: 0, left: 4 + floor(rnd() * 3), sz: rnd() });\n}\n\n// A fresh glass: clean sand and the crystals waiting to go in.\nfunction fresh(P, J) {\n  J.tid.fill(-1);\n  J.zb.fill(9);\n  Object.assign(J, { g: 0, tips: [], tubes: [], seeds: [], bub: [], pops: [], done: false, up: 0, full: 50, rot: floor(rnd() * 6) });\n  const n = P.nc;\n  const order = Array.from({ length: n }, (_, i) => i).sort(() => rnd() - 0.5);\n  for (let i = 0; i \u003c n; i++) addSeed(P, J, IL + 4 + ((i + 0.5 + (rnd() - 0.5) * 0.7) * (IR - IL - 8)) / n, 0.3 + order[i] * (2.2 / n + 0.1));\n  J.motes = Array.from({ length: 14 }, () => [IL + rnd() * (IR - IL), SY + 4 + rnd() * 86, 0.6 + rnd() * 1.6, rnd() * 7]);\n}\n\n// One disc of membrane, shaded across the tube's direction (dx, dy): the\n// wall seen edge on at each side, a sheen on the left.\nfunction stamp(P, J, x, y, r, dx, dy, id, z, ring) {\n  const K = P.jk;\n  for (let py = max(RIM, floor(y - r)); py \u003c= min(BOT - 1, ceil(y + r)); py++)\n    for (let px = max(IL, floor(x - r)); px \u003c= min(IR, ceil(x + r)); px++) {\n      const ex = px + 0.5 - x;\n      const ey = py + 0.5 - y;\n      if (ex * ex + ey * ey > r * r) continue;\n      const q = py * W + px;\n      if (!GROWS[K[q]] || z > J.zb[q] + 0.002) continue;\n      const s = (ex * dy - ey * dx) / r;\n      J.tid[q] = id;\n      J.zb[q] = z;\n      J.bo[q] = J.g;\n      J.sh[q] = (0.42 + 0.58 * sqrt(max(0, 1 - s * s))) * ring * (0.9 + 0.2 * rnd()) + 0.3 * exp(-(((s - 0.45) / 0.3) ** 2));\n    }\n}\n\nfunction tip(P, J, o) {\n  if (J.tubes.length >= MAXT) return;\n  o.id = J.tubes.push(o.seed) - 1;\n  J.tips.push(Object.assign({ age: 0, len: 0, cap: 0, dir: 1, ph: rnd() * 7, rt: o.r, wan: 0 }, o));\n}\n\n// A crystal sends up a new tube from its skin: one in three races for the\n// surface, the rest give out somewhere on the way.\nfunction sprout(P, J, S, si) {\n  const race = rnd() \u003c 0.32;\n  const rs = (0.75 + 0.5 * rnd()) * (1.12 - 0.25 * S.z);\n  tip(P, J, {\n    seed: si, x: S.x + (rnd() - 0.5) * (2 * S.m + 3), y: S.rest - S.m * 0.8, a: (rnd() - 0.5) * 0.9, a0: (rnd() - 0.5) * 0.8,\n    r: P.r0 * rs * saltOf(P, J, si)[3], rs, v: race ? 0.95 + 0.3 * rnd() : 0.45 + 0.55 * rnd(), fuel: race ? 999 : 10 + 75 * rnd() ** 1.3,\n    z: cl(S.z + (rnd() - 0.5) * 0.08, 0, 1), y0: S.rest, bub: rnd() \u003c 0.22,\n  });\n}\n\nfunction grow(P, J, d) {\n  const g = (J.g += d);\n  if (J.seeds.length \u003c P.nc && g \u003c 30) addSeed(P, J, IL + 4 + rnd() * (IR - IL - 8), g + 0.1);\n  J.seeds.forEach((S, si) => {\n    if (g \u003c S.t0) return;\n    if (S.land \u003c 0) {\n      // Through the air to the surface, then sinking slowly through the thick solution.\n      const surf = surfAt(S.x, S.z);\n      if (S.y \u003c surf) S.y += 110 * d;\n      else {\n        if (!S.wet) (S.wet = 1), J.pops.push([S.x, surf, 0, 4]);\n        S.y += (38 + 14 * S.sz) * d;\n      }\n      if (S.y >= S.rest) [S.y, S.land, S.next] = [S.rest, g, g + 0.6 + rnd() * 0.9];\n      return;\n    }\n    // The crystal coats in a skin of silicate that swells as it dissolves.\n    if (S.mid \u003c 0) S.mid = J.tubes.push(si) - 1;\n    const m = min(1, (g - S.land) / 1.8 + (g - S.land) * 0.025) * P.mr * (0.8 + 0.4 * S.sz) * saltOf(P, J, si)[3];\n    if (m > S.m + 0.25) {\n      S.m = m;\n      stamp(P, J, S.x, S.rest - m * 0.45, m, 0, -1, S.mid, S.z, 0.9);\n      stamp(P, J, S.x + (S.sz - 0.5) * m, S.rest - m * 0.9, m * 0.7, 0, -1, S.mid, S.z, 1);\n    }\n    // Air caught in the crystal now and then lets go as a bubble.\n    if (rnd() \u003c d * 0.12) J.bub.push([S.x + (rnd() - 0.5) * 2 * m, S.rest - m - 1, S.z]);\n    if (S.left > 0 && g >= S.next && g \u003c J.full - 4 && J.tips.length \u003c 80) {\n      sprout(P, J, S, si);\n      S.left--;\n      S.next = g + 1.2 + rnd() * 3.2;\n    }\n  });\n  const born = [];\n  for (const T of J.tips) {\n    T.age += d;\n    // Growth comes in spurts, each time the skin at the open tip splits and seals again.\n    const pulse = 0.4 + 0.6 * sqrt(max(0, sin(T.age * 2.6 + T.ph)));\n    const sa = saltOf(P, J, T.seed);\n    const dist = P.v0 * T.v * sa[2] * (T.bub ? 1.6 : 1) * pulse * d;\n    // Each tube wanders off on its own way, back towards upright.\n    T.wan = cl(T.wan + (rnd() - 0.5) * 2.4 * d - T.wan * 0.4 * d, -0.3, 0.3);\n    let aim = T.wan + T.a0 * exp(-T.age * 0.8) + P.wob * (T.bub ? 0.25 : 1) * (0.7 * sin(T.ph + T.age * 1.9) + 0.3 * sin(T.ph * 1.7 + T.age * 4.3));\n    if (T.x \u003c IL + 3) aim += 0.6;\n    if (T.x > IR - 3) aim -= 0.6;\n    T.a += (aim - T.a) * min(1, d * 4);\n    if (T.cap) T.a = T.dir * 1.45;\n    if (rnd() \u003c d * 0.6) T.rt = P.r0 * T.rs * sa[3] * (0.6 + 0.9 * rnd());\n    T.r += (cl(T.rt, 0.5, 4.2) - T.r) * min(1, d * 1.3);\n    const n = max(1, ceil(dist / 0.5));\n    const dx = sin(T.a);\n    const dy = -Math.cos(T.a);\n    for (let i = 0; i \u003c n; i++) {\n      T.x = cl(T.x + (dx * dist) / n, IL + 0.5, IR + 0.5);\n      if (!T.cap) T.y += (dy * dist) / n;\n      T.len += dist / n;\n      stamp(P, J, T.x, T.y, T.r, dx, dy, T.id, T.z, 0.92 + 0.1 * sin(T.len * 0.9 + T.ph));\n    }\n    T.fuel -= dist;\n    const top = surfAt(T.x, T.z) + 1.4 + T.r;\n    if (!T.cap && T.y \u003c= top) {\n      // At the surface it spreads a little way under the skin of the solution.\n      Object.assign(T, { cap: 1, y: top, dir: T.a > 0.05 ? 1 : T.a \u003c -0.05 ? -1 : rnd() \u003c 0.5 ? -1 : 1, fuel: 7 + rnd() * 11 });\n      if (++J.up === 3) J.full = g + 7;\n      if (T.bub) J.pops.push([T.x, surfAt(T.x, T.z), 0, 3]), (T.bub = 0);\n    }\n    if (T.bub && rnd() \u003c d * 0.22) J.bub.push([T.x, T.y - T.r - 0.5, T.z]), (T.bub = 0);\n    // A tube bursts and buds sideways; often the old tip seals over.\n    if (!T.cap && g \u003c 34 && J.tips.length + born.length \u003c 80 && T.y \u003c T.y0 - 6 && rnd() \u003c P.bud * d) {\n      const sd = rnd() \u003c 0.5 ? -1 : 1;\n      stamp(P, J, T.x, T.y, T.r * 1.5, dx, dy, T.id, T.z, 1);\n      born.push({ seed: J.tubes[T.id], x: T.x + sd * T.r, y: T.y + rnd() * 2, a: sd * (0.9 + 0.6 * rnd()), a0: sd * (0.9 + 0.5 * rnd()), r: T.r * 0.75, rs: T.rs * 0.75, v: T.v * (0.6 + 0.5 * rnd()), fuel: 8 + rnd() * 40, z: cl(T.z + (rnd() - 0.5) * 0.06, 0, 1), y0: T.y + 6, bub: false });\n      if (rnd() \u003c 0.35) T.fuel = 0;\n    }\n    if (g > J.full) T.fuel = 0;\n  }\n  J.tips = J.tips.filter((T) => T.fuel > 0);\n  for (const o of born) tip(P, J, o);\n  J.done = g > J.full || (!J.tips.length && g > 6 && J.seeds.every((S) => S.land >= 0 && !S.left));\n  // Bubbles let go of their tubes and rise; rings where things meet the surface.\n  J.bub = J.bub.filter((b) => {\n    b[1] -= 26 * d;\n    b[0] += sin(b[1] * 0.5) * 2 * d;\n    if (b[1] > surfAt(b[0], b[2]) + 1) return true;\n    J.pops.push([b[0], surfAt(b[0], b[2]), 0, 3]);\n    return false;\n  });\n  for (const p of J.pops) p[2] += d;\n  J.pops = J.pops.filter((p) => p[2] \u003c 0.7);\n  for (const m of J.motes) {\n    m[1] += m[2] * d;\n    m[0] += sin(P.clock * 0.7 + m[3]) * 0.8 * d;\n    if (m[1] > SAND - 3) [m[0], m[1]] = [IL + rnd() * (IR - IL), SY + 4];\n  }\n}\n\nfunction slideIn(P) {\n  const nw = P.jars[1 - P.cur];\n  fresh(P, nw);\n  [nw.on, nw.off, P.phase, P.pt] = [true, -SLIDE, SWAP, 0];\n}\n\nexport function setup(params) {\n  const P = params;\n  paint(P);\n  glass(P);\n  P.jars = [jar(), jar()];\n  P.tc = new Float32Array(3 * MAXT);\n  P.buf = new Float32Array(N * 3);\n  P.cc = new Float32Array(W * 3);\n  Object.assign(P, { cur: 0, phase: GROW, pt: 0, clock: 0, started: false, set: 0, rate: 1, nc: 5, str: 0 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 5, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.set = cl(round(k[0]), 0, 4);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  P.nc = cl(round(k[2]), 5, 20);\n  const s = (P.str = cl(k[3], -1, 1));\n  P.v0 = 11.5 * 1.8 ** -s;\n  P.r0 = 1.2 * 1.9 ** s;\n  P.wob = 0.3 * 1.8 ** -s;\n  P.bud = 0.1 * 1.5 ** s;\n  P.mr = 1.7 + 0.9 * (s + 1);\n  const d = dt * P.rate;\n  P.clock += d;\n  const J = P.jars[P.cur];\n  if (!P.started) {\n    // Open on a garden already some seconds old, further on the faster it grows.\n    P.started = true;\n    fresh(P, J);\n    J.on = true;\n    for (let g = 10 + 2.5 * P.rate; g > 0; g -= 1 / 30) grow(P, J, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== SWAP) slideIn(P);\n  if (P.phase !== SWAP) grow(P, J, d);\n  if (P.phase === GROW && J.done) [P.phase, P.pt] = [HOLD, 0];\n  else if (P.phase === HOLD && (P.pt += d) > 2.5) slideIn(P);\n  else if (P.phase === SWAP) {\n    const nw = P.jars[1 - P.cur];\n    const q = min(1, (P.pt += dt * max(P.rate, 0.6)) / 2.4);\n    J.off = round(SLIDE * q * q * (3 - 2 * q));\n    nw.off = J.off - SLIDE;\n    if (q >= 1) [J.on, nw.off, P.cur, P.phase] = [false, 0, 1 - P.cur, GROW];\n  }\n}\n\nlet B;\nfunction add(x, y, r, g, b, a = 1) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= BENCH) return;\n  const o = (y * W + x) * 3;\n  B[o] += r * a;\n  B[o + 1] += g * a;\n  B[o + 2] += b * a;\n}\nfunction mixp(x, y, c, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= BENCH) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) B[o + i] += (c[i] - B[o + i]) * a;\n}\n\n// The moving things of one glass, drawn in screen columns.\nfunction life(P, J, cols) {\n  const o = J.off;\n  const set = SETS[P.set];\n  const t = P.clock;\n  for (const m of J.motes) add(round(m[0]) + o, round(m[1]), 34, 36, 32, 0.6 + 0.4 * sin(t * 3 + m[3]));\n  // Above each open tip, the salt solution it pushes out rises as a faint wavering thread.\n  const L = round(6 + 4 * (1 - P.str));\n  for (const T of J.tips) {\n    if (T.cap) continue;\n    const c = cols(T.id);\n    for (let i = 1; i \u003c= L; i++) {\n      const x = round(T.x + sin(t * 2.4 + T.ph + i * 0.45) * i * 0.12) + o;\n      const y = round(T.y - T.r - i);\n      if (y > SY + 2) add(x, y, c[0] + 40, c[1] + 40, c[2] + 40, 0.16 * (1 - i / (L + 1)));\n    }\n    if (T.bub) {\n      const x = round(T.x) + o;\n      const y = round(T.y - T.r - 0.6);\n      mixp(x, y, [210, 228, 226], 0.9);\n      mixp(x - 1, y, [120, 140, 140], 0.4);\n      mixp(x + 1, y, [120, 140, 140], 0.4);\n    }\n  }\n  for (const b of J.bub) {\n    const x = round(b[0]) + o;\n    const y = round(b[1]);\n    mixp(x, y, [220, 236, 234], 0.85);\n    mixp(x, y + 1, [90, 110, 110], 0.3);\n  }\n  for (const [px, py, age, w] of J.pops) {\n    const k = 1 - age / 0.7;\n    const r = w * (0.5 + age * 2);\n    for (let x = round(px - r); x \u003c= round(px + r); x++) add(x + o, round(py), 90 * k, 104 * k, 100 * k);\n  }\n  for (const S of J.seeds) {\n    if (J.g \u003c S.t0) continue;\n    const sc = SALT[set[S.slot % set.length]];\n    // Salt leaking from the crystal's skin tints the solution round it.\n    if (S.land >= 0) {\n      const R = min(9, 2 + (J.g - S.land) * 0.7);\n      const [hr, hg, hb] = sc[0];\n      for (let y = round(S.rest - R * 1.3); y \u003c= S.rest + 1; y++) {\n        const v = (y - S.rest) / (R * 1.3);\n        for (let x = max(-o, round(S.x - R)); x \u003c= S.x + R && x + o \u003c W; x++) {\n          const u = (x - S.x) / R;\n          const f = 0.08 * (1 - u * u - v * v);\n          if (f > 0) {\n            const q = (y * W + x + o) * 3;\n            B[q] += hr * f;\n            B[q + 1] += hg * f;\n            B[q + 2] += hb * f;\n          }\n        }\n      }\n    }\n    // A falling crystal leaves a faint streak of dissolving salt.\n    const surf = surfAt(S.x, S.z);\n    const fade = S.land \u003c 0 ? 1 : max(0, 1 - (J.g - S.land) / 2.5);\n    if (fade > 0 && S.y > surf)\n      for (let y = round(surf) + 1; y \u003c S.y - 1; y++) add(round(S.x) + o, y, sc[0][0], sc[0][1], sc[0][2], 0.22 * fade * exp(-(S.y - y) / 14));\n    const a = S.land \u003c 0 || J.g - S.land \u003c 1 ? 1 : 0.5;\n    const x = round(S.x - 1) + o;\n    const y = round(S.y) - 1;\n    mixp(x, y, sc[1], a);\n    mixp(x + 1, y, sc[1].map((v) => min(255, v * 1.15 + 30)), a);\n    mixp(x, y + 1, sc[1].map((v) => v * 0.7), a);\n    mixp(x + 1, y + 1, sc[1].map((v) => v * 0.85), a);\n    if (S.sz > 0.5) mixp(x + 2, y + 1, sc[1].map((v) => v * 0.75), a);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  B = P.buf;\n  const { wl: WL, la: LA, so: SO, jk: K, jc: C, jm: M, jo: O, tc: TC } = P;\n  const on = P.jars.filter((J) => J.on);\n  for (const J of on) {\n    // This frame's colour for every tube, from its crystal's salt.\n    J.tubes.forEach((si, id) => TC.set(saltOf(P, J, si)[0], id * 3));\n    J.tc = TC.slice(0, J.tubes.length * 3);\n  }\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let J = null;\n      for (let i = 0; i \u003c on.length; i++) if (x - on[i].off >= GL && x - on[i].off \u003c= GR) J = on[i];\n      const q = J ? p - J.off : 0;\n      const qo = q * 3;\n      const kind = J ? K[q] : OUT;\n      const l = 0.62 + 0.25 * LA[p];\n      for (let c = 0; c \u003c 3; c++) {\n        let v = WL[o + c];\n        if (kind === AIR) v = v * 0.9 + 5;\n        else if (kind === WALL || kind === BASE) v = C[qo + c] + v * 0.25;\n        else if (kind === SOL) v = SO[o + c] * M[q];\n        else if (kind === SHEET) v = SO[o + c] * 0.5 + C[qo + c];\n        else if (kind) v = C[qo + c] * l;\n        B[o + c] = v;\n      }\n      if (J && GROWS[kind] && J.tid[q] >= 0) {\n        // A tube: lit through from the lamp behind, paler where its skin is\n        // fresh, and fading into the solution the further back it stands.\n        const id = J.tid[q] * 3;\n        const s = J.sh[q];\n        const fr = 0.3 * max(0, 1 - (J.g - J.bo[q]) / 1.4);\n        const fog = 0.06 + 0.5 * J.zb[q];\n        const hl = max(0, s - 1);\n        const sv = min(1, s) * (0.68 + 0.48 * LA[p]);\n        for (let c = 0; c \u003c 3; c++) {\n          let v = J.tc[id + c] * sv;\n          v += (255 - v) * hl;\n          v += (235 - v) * fr;\n          v += (B[o + c] - v) * fog;\n          B[o + c] = kind === SHEET ? v * 0.75 + 11 : v;\n        }\n      }\n      if (kind) for (let c = 0; c \u003c 3; c++) B[o + c] += O[qo + c];\n    }\n  for (const J of on) life(P, J, (id) => J.tc.subarray(id * 3, id * 3 + 3));\n  for (let p = 0, o = 0; p \u003c BENCH * W; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, max(0, B[o])), min(255, max(0, B[o + 1])), min(255, max(0, B[o + 2])));\n  bench(P, display, on);\n}\n\n// A black resin bench top. The jar's foot is reflected in it, and the lamp,\n// focused through the full glass, throws a pool of light on it that takes the\n// colours of the garden it passed through, left for right.\nfunction bench(P, display, on) {\n  const B2 = P.buf;\n  const cc = P.cc.fill(0);\n  for (const J of on)\n    for (let lx = IL; lx \u003c= IR; lx++) {\n      const x = lx + J.off;\n      const xm = 63 - lx + J.off;\n      if (x \u003c 0 || x >= W || xm \u003c 0 || xm >= W) continue;\n      for (let y = 30; y \u003c 100; y += 5) for (let i = 0; i \u003c 3; i++) cc[x * 3 + i] += B2[(y * W + xm) * 3 + i] / 14;\n    }\n  for (let y = BENCH; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const gr = ((x * 7 + y * 13) % 5) * 0.6;\n      const f = 1 - (y - BENCH) / 9;\n      let r = 16 + 10 * f + gr;\n      let g = 17 + 10 * f + gr;\n      let b = 21 + 11 * f + gr;\n      if (y === 123) [r, g, b] = [66, 68, 76];\n      else if (y > 123) [r, g, b] = [26 - (y - 124) * 3 + gr, 27 - (y - 124) * 3 + gr, 31 - (y - 124) * 3 + gr];\n      else\n        for (const J of on) {\n          const lx = x - J.off;\n          if (lx \u003c GL || lx > GR) continue;\n          if (y === BENCH) {\n            [r, g, b] = [7, 7, 9];\n            continue;\n          }\n          const m = (2 * BENCH - 1 - y) * W + x;\n          const ex = (lx - 31.5) / 23;\n          const ey = (y - 118.5) / 3.4;\n          const a = 0.9 * sm(1 - ex * ex - ey * ey) + 0.7 * exp(-(((y - 117.5) / 1.1) ** 2)) * sm(1 - ex * ex * 1.4);\n          r += B2[m * 3] * 0.22 * f + (cc[x * 3] * 1.15 + 26) * a;\n          g += B2[m * 3 + 1] * 0.22 * f + (cc[x * 3 + 1] * 1.15 + 28) * a;\n          b += B2[m * 3 + 2] * 0.22 * f + (cc[x * 3 + 2] * 1.15 + 18) * a;\n        }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n}\n","layer":{"id":"layer-chemical-garden","type":"code","name":"chemical-garden","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Chemical Garden\n// Family:  chemistry\n// Idea:    Metal-salt crystals dropped into a tall glass of water-glass solution on a lab bench sprout hollow mineral tubes in cobalt blue, copper turquoise, rust, nickel green, manganese pink and calcium white that wobble up towards the surface, burst and bud sideways, until the glass is full and a fresh one slides in.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the chemical garden (silicate garden) of the school chemistry lab\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Salts=0..4, Speed=0.2..3, Crystals=5..20, Strength=-1..1\n//\n// Knob 1: Salts. What goes into the glass: all six salts at 0 (cobalt chloride's blue-violet, copper sulfate's turquoise, iron(III) chloride's rust, nickel sulfate's green, manganese chloride's pink, calcium chloride's white), the cool cobalt, copper and calcium at 1, the warm iron, manganese and calcium at 2, the greens of nickel and copper at 3, cobalt alone at 4.\n// Knob 2: Speed. How fast the garden grows: at 2 a tube that races takes about 11 s from its crystal to the surface and a glass lasts about half a minute before the next slides in; at 0.2 it creeps.\n// Knob 3: Crystals. How many crystals are dropped in, 5 to 20; each sends up four to six tubes as it dissolves, and those bud more. Turned up mid-glass, the extra crystals drop in at once.\n// Knob 4: Strength. How strong the water glass is: near 0 the usual mix, towards -1 a thin solution where hair-fine threads shoot up in 6 s and wriggle, towards 1 a thick one where fat tubes take 18 s and bud into knobbly branches.\n// Buttons: K1 tap slides the glass away and brings in a fresh one.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round, ceil, sin, abs, sqrt, exp, hypot } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\n\n// The glass in its own columns (walls at 3..4 and 59..60), so sliding it is\n// one offset. The rim, the solution's surface and the sand's top are\n// ellipses seen from a little above; z is depth, 0 at the front pane.\nconst GL = 3;\nconst GR = 60;\nconst IL = 5;\nconst IR = 58;\nconst RIM = 4;\nconst SY = 13;\nconst SAND = 104;\nconst BOT = 110;\nconst BENCH = 114;\nconst [HR, HS, HD] = [2.2, 2.2, 2.6];\nconst ell = (x) => sqrt(max(0, 1 - ((x - 31.5) / 28) ** 2));\nconst surfAt = (x, z) => SY + HS * ell(x) * (1 - 2 * z);\nconst sandAt = (x, z) => SAND + HD * ell(x) * (1 - 2 * z);\nconst [OUT, AIR, SOL, TOPS, SIDE, WALL, SHEET, BASE] = [0, 1, 2, 3, 4, 5, 6, 7];\nconst GROWS = [0, 0, 1, 1, 1, 0, 1, 0];\nconst [GROW, HOLD, SWAP] = [0, 1, 2];\nconst SLIDE = 70;\nconst MAXT = 900;\n\n// Each salt: the colour of its silicate tube, the colour of the crystal as\n// it goes in (cobalt chloride goes in pink and grows blue), and how fast and\n// how fat its tubes grow: iron's rust threads shoot up, calcium's white tubes\n// push up slow and thick.\nconst SALT = [\n  [[96, 76, 246], [222, 52, 112], 1.1, 0.9],\n  [[30, 184, 214], [40, 108, 255], 0.95, 1],\n  [[255, 122, 30], [200, 150, 34], 1.3, 0.72],\n  [[118, 224, 74], [58, 198, 126], 0.85, 1.15],\n  [[255, 168, 184], [240, 170, 186], 0.8, 1.05],\n  [[232, 234, 224], [244, 244, 238], 0.72, 1.4],\n];\nconst SETS = [[0, 1, 2, 3, 4, 5], [0, 1, 5], [2, 4, 5], [3, 1], [0]];\nconst saltOf = (P, J, si) => SALT[SETS[P.set][J.seeds[si].slot % SETS[P.set].length]];\n\n// The room: a dark wall with a frosted globe lamp behind the glass. The\n// solution seen against it is faintly yellow-green and a little cloudy.\nfunction paint(P) {\n  const WL = (P.wl = new Float32Array(N * 3));\n  const LA = (P.la = new Float32Array(N));\n  const SO = (P.so = new Float32Array(N * 3));\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const d = hypot((x + 0.5 - 32) * 1.15, y + 0.5 - 44);\n      const bulb = exp(-((d / 9) ** 2));\n      const glow = exp(-((d / 24) ** 2));\n      LA[p] = 0.45 * bulb + 0.75 * glow;\n      const n = (rnd() - 0.5) * 3;\n      const a = 0.12 * bulb + 0.25 * glow;\n      WL.set([11 + 255 * a + n, 12 + 234 * a + n, 17 + 194 * a + n], p * 3);\n      const deep = 1 - (0.16 * max(0, y - SY)) / 95;\n      SO.set([(WL[p * 3] * 0.9 + 7) * deep, (WL[p * 3 + 1] * 0.98 + 10) * deep, (WL[p * 3 + 2] * 0.78 + 7) * deep], p * 3);\n    }\n}\n\n// The glass, its sand and its base, in the glass's own columns. C holds the\n// opaque colours, M darkens the solution towards the walls, O is the front\n// pane's reflections, added last.\nfunction glass(P) {\n  const K = (P.jk = new Uint8Array(N));\n  const C = (P.jc = new Float32Array(N * 3));\n  const M = (P.jm = new Float32Array(N));\n  const O = (P.jo = new Float32Array(N * 3));\n  const put = (A, x, y, c) => A.set(c, (y * W + x) * 3);\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = GL; x \u003c= GR; x++) {\n      const p = y * W + x;\n      const e = ell(x);\n      const u = (x + 0.5 - 31.5) / 28;\n      const lamp = exp(-(((y - 46) / 30) ** 2));\n      M[p] = 0.7 + 0.3 * sqrt(max(0, 1 - u * u));\n      const yc = y + 0.5;\n      let k = OUT;\n      if (y >= BOT) {\n        k = BASE;\n        if (y === BENCH - 1 && (x === GL || x === GR)) k = OUT;\n      } else if (x \u003c IL || x > IR) k = y >= RIM ? WALL : OUT;\n      else if (yc \u003c RIM - HR * e - 0.6) k = OUT;\n      else if (yc \u003c SY - HS * e) k = AIR;\n      else if (yc \u003c SY + HS * e) k = SHEET;\n      else if (yc \u003c SAND - HD * e) k = SOL;\n      else if (yc \u003c SAND + HD * e) k = TOPS;\n      else k = SIDE;\n      K[p] = k;\n      const gr = 0.8 + 0.4 * rnd();\n      if (k === WALL) {\n        // The outer edge of each wall catches the lamp; the glass's thickness, seen edge on, is dark.\n        const c = x === GL ? 0.55 + 0.75 * lamp : x === GR ? 0.4 + 0.5 * lamp : x === GL + 1 ? 0.1 : 0.14;\n        put(C, x, y, [110 * c, 140 * c, 134 * c]);\n      } else if (k === BASE) {\n        const c = y === BOT ? 0.95 - 0.35 * abs(u) : y === BENCH - 1 ? 0.62 : 0.3 + 0.1 * sin(x * 0.7);\n        put(C, x, y, [100 * c, 136 * c, 126 * c]);\n      } else if (k === TOPS) put(C, x, y, [176 * gr, 160 * gr, 124 * gr]);\n      else if (k === SIDE) {\n        // Sand through the front pane, darker low down, in faint layers.\n        const f = (0.8 - (0.32 * (y - SAND)) / 6 + 0.08 * sin(y * 2.1 + x * 0.15)) * gr;\n        put(C, x, y, [150 * f, 134 * f, 100 * f]);\n      } else if (k === SHEET) put(C, x, y, [34, 44, 42]);\n    }\n  // The rim's lips and the meniscus, smoothed over two rows, with the room's\n  // window caught on the left.\n  const line = (x, yc, c) => {\n    for (let y = floor(yc - 1); y \u003c= floor(yc + 1); y++) {\n      const w = max(0, 1 - abs(y + 0.5 - yc));\n      for (let i = 0; i \u003c 3; i++) O[(y * W + x) * 3 + i] += c[i] * w;\n    }\n  };\n  for (let x = IL; x \u003c= IR; x++) {\n    const e = ell(x);\n    const gl = x > 8 && x \u003c 19 ? 1.6 : 1;\n    line(x, RIM - HR * e, [56, 70, 68]);\n    line(x, RIM + HR * e, [140 * gl, 158 * gl, 152 * gl]);\n    line(x, RIM + HR * e + 1, [26, 34, 32]);\n    line(x, SY - HS * e, [26, 36, 34]);\n    line(x, SY + HS * e, [100 * gl, 124 * gl, 116 * gl]);\n  }\n  for (let y = 16; y \u003c 100; y++) {\n    const f = sin((Math.PI * (y - 16)) / 84);\n    for (let c = 0; c \u003c 3; c++) {\n      O[(y * W + 9) * 3 + c] += 16 * f;\n      O[(y * W + 10) * 3 + c] += 9 * f;\n      O[(y * W + 52) * 3 + c] += 8 * f;\n    }\n  }\n}\n\nfunction jar() {\n  return { tid: new Int16Array(N), sh: new Float32Array(N), zb: new Float32Array(N), bo: new Float32Array(N), on: false, off: 0, g: 0, tips: [], tubes: [], seeds: [], bub: [], pops: [], motes: [], done: false };\n}\n\nfunction addSeed(P, J, x, t0) {\n  const z = rnd();\n  J.seeds.push({ x, z, y: -2, rest: sandAt(x, z) - 0.6, slot: J.seeds.length + J.rot, t0, land: -1, wet: 0, m: 0, mid: -1, next: 0, left: 4 + floor(rnd() * 3), sz: rnd() });\n}\n\n// A fresh glass: clean sand and the crystals waiting to go in.\nfunction fresh(P, J) {\n  J.tid.fill(-1);\n  J.zb.fill(9);\n  Object.assign(J, { g: 0, tips: [], tubes: [], seeds: [], bub: [], pops: [], done: false, up: 0, full: 50, rot: floor(rnd() * 6) });\n  const n = P.nc;\n  const order = Array.from({ length: n }, (_, i) => i).sort(() => rnd() - 0.5);\n  for (let i = 0; i \u003c n; i++) addSeed(P, J, IL + 4 + ((i + 0.5 + (rnd() - 0.5) * 0.7) * (IR - IL - 8)) / n, 0.3 + order[i] * (2.2 / n + 0.1));\n  J.motes = Array.from({ length: 14 }, () => [IL + rnd() * (IR - IL), SY + 4 + rnd() * 86, 0.6 + rnd() * 1.6, rnd() * 7]);\n}\n\n// One disc of membrane, shaded across the tube's direction (dx, dy): the\n// wall seen edge on at each side, a sheen on the left.\nfunction stamp(P, J, x, y, r, dx, dy, id, z, ring) {\n  const K = P.jk;\n  for (let py = max(RIM, floor(y - r)); py \u003c= min(BOT - 1, ceil(y + r)); py++)\n    for (let px = max(IL, floor(x - r)); px \u003c= min(IR, ceil(x + r)); px++) {\n      const ex = px + 0.5 - x;\n      const ey = py + 0.5 - y;\n      if (ex * ex + ey * ey > r * r) continue;\n      const q = py * W + px;\n      if (!GROWS[K[q]] || z > J.zb[q] + 0.002) continue;\n      const s = (ex * dy - ey * dx) / r;\n      J.tid[q] = id;\n      J.zb[q] = z;\n      J.bo[q] = J.g;\n      J.sh[q] = (0.42 + 0.58 * sqrt(max(0, 1 - s * s))) * ring * (0.9 + 0.2 * rnd()) + 0.3 * exp(-(((s - 0.45) / 0.3) ** 2));\n    }\n}\n\nfunction tip(P, J, o) {\n  if (J.tubes.length >= MAXT) return;\n  o.id = J.tubes.push(o.seed) - 1;\n  J.tips.push(Object.assign({ age: 0, len: 0, cap: 0, dir: 1, ph: rnd() * 7, rt: o.r, wan: 0 }, o));\n}\n\n// A crystal sends up a new tube from its skin: one in three races for the\n// surface, the rest give out somewhere on the way.\nfunction sprout(P, J, S, si) {\n  const race = rnd() \u003c 0.32;\n  const rs = (0.75 + 0.5 * rnd()) * (1.12 - 0.25 * S.z);\n  tip(P, J, {\n    seed: si, x: S.x + (rnd() - 0.5) * (2 * S.m + 3), y: S.rest - S.m * 0.8, a: (rnd() - 0.5) * 0.9, a0: (rnd() - 0.5) * 0.8,\n    r: P.r0 * rs * saltOf(P, J, si)[3], rs, v: race ? 0.95 + 0.3 * rnd() : 0.45 + 0.55 * rnd(), fuel: race ? 999 : 10 + 75 * rnd() ** 1.3,\n    z: cl(S.z + (rnd() - 0.5) * 0.08, 0, 1), y0: S.rest, bub: rnd() \u003c 0.22,\n  });\n}\n\nfunction grow(P, J, d) {\n  const g = (J.g += d);\n  if (J.seeds.length \u003c P.nc && g \u003c 30) addSeed(P, J, IL + 4 + rnd() * (IR - IL - 8), g + 0.1);\n  J.seeds.forEach((S, si) => {\n    if (g \u003c S.t0) return;\n    if (S.land \u003c 0) {\n      // Through the air to the surface, then sinking slowly through the thick solution.\n      const surf = surfAt(S.x, S.z);\n      if (S.y \u003c surf) S.y += 110 * d;\n      else {\n        if (!S.wet) (S.wet = 1), J.pops.push([S.x, surf, 0, 4]);\n        S.y += (38 + 14 * S.sz) * d;\n      }\n      if (S.y >= S.rest) [S.y, S.land, S.next] = [S.rest, g, g + 0.6 + rnd() * 0.9];\n      return;\n    }\n    // The crystal coats in a skin of silicate that swells as it dissolves.\n    if (S.mid \u003c 0) S.mid = J.tubes.push(si) - 1;\n    const m = min(1, (g - S.land) / 1.8 + (g - S.land) * 0.025) * P.mr * (0.8 + 0.4 * S.sz) * saltOf(P, J, si)[3];\n    if (m > S.m + 0.25) {\n      S.m = m;\n      stamp(P, J, S.x, S.rest - m * 0.45, m, 0, -1, S.mid, S.z, 0.9);\n      stamp(P, J, S.x + (S.sz - 0.5) * m, S.rest - m * 0.9, m * 0.7, 0, -1, S.mid, S.z, 1);\n    }\n    // Air caught in the crystal now and then lets go as a bubble.\n    if (rnd() \u003c d * 0.12) J.bub.push([S.x + (rnd() - 0.5) * 2 * m, S.rest - m - 1, S.z]);\n    if (S.left > 0 && g >= S.next && g \u003c J.full - 4 && J.tips.length \u003c 80) {\n      sprout(P, J, S, si);\n      S.left--;\n      S.next = g + 1.2 + rnd() * 3.2;\n    }\n  });\n  const born = [];\n  for (const T of J.tips) {\n    T.age += d;\n    // Growth comes in spurts, each time the skin at the open tip splits and seals again.\n    const pulse = 0.4 + 0.6 * sqrt(max(0, sin(T.age * 2.6 + T.ph)));\n    const sa = saltOf(P, J, T.seed);\n    const dist = P.v0 * T.v * sa[2] * (T.bub ? 1.6 : 1) * pulse * d;\n    // Each tube wanders off on its own way, back towards upright.\n    T.wan = cl(T.wan + (rnd() - 0.5) * 2.4 * d - T.wan * 0.4 * d, -0.3, 0.3);\n    let aim = T.wan + T.a0 * exp(-T.age * 0.8) + P.wob * (T.bub ? 0.25 : 1) * (0.7 * sin(T.ph + T.age * 1.9) + 0.3 * sin(T.ph * 1.7 + T.age * 4.3));\n    if (T.x \u003c IL + 3) aim += 0.6;\n    if (T.x > IR - 3) aim -= 0.6;\n    T.a += (aim - T.a) * min(1, d * 4);\n    if (T.cap) T.a = T.dir * 1.45;\n    if (rnd() \u003c d * 0.6) T.rt = P.r0 * T.rs * sa[3] * (0.6 + 0.9 * rnd());\n    T.r += (cl(T.rt, 0.5, 4.2) - T.r) * min(1, d * 1.3);\n    const n = max(1, ceil(dist / 0.5));\n    const dx = sin(T.a);\n    const dy = -Math.cos(T.a);\n    for (let i = 0; i \u003c n; i++) {\n      T.x = cl(T.x + (dx * dist) / n, IL + 0.5, IR + 0.5);\n      if (!T.cap) T.y += (dy * dist) / n;\n      T.len += dist / n;\n      stamp(P, J, T.x, T.y, T.r, dx, dy, T.id, T.z, 0.92 + 0.1 * sin(T.len * 0.9 + T.ph));\n    }\n    T.fuel -= dist;\n    const top = surfAt(T.x, T.z) + 1.4 + T.r;\n    if (!T.cap && T.y \u003c= top) {\n      // At the surface it spreads a little way under the skin of the solution.\n      Object.assign(T, { cap: 1, y: top, dir: T.a > 0.05 ? 1 : T.a \u003c -0.05 ? -1 : rnd() \u003c 0.5 ? -1 : 1, fuel: 7 + rnd() * 11 });\n      if (++J.up === 3) J.full = g + 7;\n      if (T.bub) J.pops.push([T.x, surfAt(T.x, T.z), 0, 3]), (T.bub = 0);\n    }\n    if (T.bub && rnd() \u003c d * 0.22) J.bub.push([T.x, T.y - T.r - 0.5, T.z]), (T.bub = 0);\n    // A tube bursts and buds sideways; often the old tip seals over.\n    if (!T.cap && g \u003c 34 && J.tips.length + born.length \u003c 80 && T.y \u003c T.y0 - 6 && rnd() \u003c P.bud * d) {\n      const sd = rnd() \u003c 0.5 ? -1 : 1;\n      stamp(P, J, T.x, T.y, T.r * 1.5, dx, dy, T.id, T.z, 1);\n      born.push({ seed: J.tubes[T.id], x: T.x + sd * T.r, y: T.y + rnd() * 2, a: sd * (0.9 + 0.6 * rnd()), a0: sd * (0.9 + 0.5 * rnd()), r: T.r * 0.75, rs: T.rs * 0.75, v: T.v * (0.6 + 0.5 * rnd()), fuel: 8 + rnd() * 40, z: cl(T.z + (rnd() - 0.5) * 0.06, 0, 1), y0: T.y + 6, bub: false });\n      if (rnd() \u003c 0.35) T.fuel = 0;\n    }\n    if (g > J.full) T.fuel = 0;\n  }\n  J.tips = J.tips.filter((T) => T.fuel > 0);\n  for (const o of born) tip(P, J, o);\n  J.done = g > J.full || (!J.tips.length && g > 6 && J.seeds.every((S) => S.land >= 0 && !S.left));\n  // Bubbles let go of their tubes and rise; rings where things meet the surface.\n  J.bub = J.bub.filter((b) => {\n    b[1] -= 26 * d;\n    b[0] += sin(b[1] * 0.5) * 2 * d;\n    if (b[1] > surfAt(b[0], b[2]) + 1) return true;\n    J.pops.push([b[0], surfAt(b[0], b[2]), 0, 3]);\n    return false;\n  });\n  for (const p of J.pops) p[2] += d;\n  J.pops = J.pops.filter((p) => p[2] \u003c 0.7);\n  for (const m of J.motes) {\n    m[1] += m[2] * d;\n    m[0] += sin(P.clock * 0.7 + m[3]) * 0.8 * d;\n    if (m[1] > SAND - 3) [m[0], m[1]] = [IL + rnd() * (IR - IL), SY + 4];\n  }\n}\n\nfunction slideIn(P) {\n  const nw = P.jars[1 - P.cur];\n  fresh(P, nw);\n  [nw.on, nw.off, P.phase, P.pt] = [true, -SLIDE, SWAP, 0];\n}\n\nexport function setup(params) {\n  const P = params;\n  paint(P);\n  glass(P);\n  P.jars = [jar(), jar()];\n  P.tc = new Float32Array(3 * MAXT);\n  P.buf = new Float32Array(N * 3);\n  P.cc = new Float32Array(W * 3);\n  Object.assign(P, { cur: 0, phase: GROW, pt: 0, clock: 0, started: false, set: 0, rate: 1, nc: 5, str: 0 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 5, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.set = cl(round(k[0]), 0, 4);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  P.nc = cl(round(k[2]), 5, 20);\n  const s = (P.str = cl(k[3], -1, 1));\n  P.v0 = 11.5 * 1.8 ** -s;\n  P.r0 = 1.2 * 1.9 ** s;\n  P.wob = 0.3 * 1.8 ** -s;\n  P.bud = 0.1 * 1.5 ** s;\n  P.mr = 1.7 + 0.9 * (s + 1);\n  const d = dt * P.rate;\n  P.clock += d;\n  const J = P.jars[P.cur];\n  if (!P.started) {\n    // Open on a garden already some seconds old, further on the faster it grows.\n    P.started = true;\n    fresh(P, J);\n    J.on = true;\n    for (let g = 10 + 2.5 * P.rate; g > 0; g -= 1 / 30) grow(P, J, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== SWAP) slideIn(P);\n  if (P.phase !== SWAP) grow(P, J, d);\n  if (P.phase === GROW && J.done) [P.phase, P.pt] = [HOLD, 0];\n  else if (P.phase === HOLD && (P.pt += d) > 2.5) slideIn(P);\n  else if (P.phase === SWAP) {\n    const nw = P.jars[1 - P.cur];\n    const q = min(1, (P.pt += dt * max(P.rate, 0.6)) / 2.4);\n    J.off = round(SLIDE * q * q * (3 - 2 * q));\n    nw.off = J.off - SLIDE;\n    if (q >= 1) [J.on, nw.off, P.cur, P.phase] = [false, 0, 1 - P.cur, GROW];\n  }\n}\n\nlet B;\nfunction add(x, y, r, g, b, a = 1) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= BENCH) return;\n  const o = (y * W + x) * 3;\n  B[o] += r * a;\n  B[o + 1] += g * a;\n  B[o + 2] += b * a;\n}\nfunction mixp(x, y, c, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= BENCH) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) B[o + i] += (c[i] - B[o + i]) * a;\n}\n\n// The moving things of one glass, drawn in screen columns.\nfunction life(P, J, cols) {\n  const o = J.off;\n  const set = SETS[P.set];\n  const t = P.clock;\n  for (const m of J.motes) add(round(m[0]) + o, round(m[1]), 34, 36, 32, 0.6 + 0.4 * sin(t * 3 + m[3]));\n  // Above each open tip, the salt solution it pushes out rises as a faint wavering thread.\n  const L = round(6 + 4 * (1 - P.str));\n  for (const T of J.tips) {\n    if (T.cap) continue;\n    const c = cols(T.id);\n    for (let i = 1; i \u003c= L; i++) {\n      const x = round(T.x + sin(t * 2.4 + T.ph + i * 0.45) * i * 0.12) + o;\n      const y = round(T.y - T.r - i);\n      if (y > SY + 2) add(x, y, c[0] + 40, c[1] + 40, c[2] + 40, 0.16 * (1 - i / (L + 1)));\n    }\n    if (T.bub) {\n      const x = round(T.x) + o;\n      const y = round(T.y - T.r - 0.6);\n      mixp(x, y, [210, 228, 226], 0.9);\n      mixp(x - 1, y, [120, 140, 140], 0.4);\n      mixp(x + 1, y, [120, 140, 140], 0.4);\n    }\n  }\n  for (const b of J.bub) {\n    const x = round(b[0]) + o;\n    const y = round(b[1]);\n    mixp(x, y, [220, 236, 234], 0.85);\n    mixp(x, y + 1, [90, 110, 110], 0.3);\n  }\n  for (const [px, py, age, w] of J.pops) {\n    const k = 1 - age / 0.7;\n    const r = w * (0.5 + age * 2);\n    for (let x = round(px - r); x \u003c= round(px + r); x++) add(x + o, round(py), 90 * k, 104 * k, 100 * k);\n  }\n  for (const S of J.seeds) {\n    if (J.g \u003c S.t0) continue;\n    const sc = SALT[set[S.slot % set.length]];\n    // Salt leaking from the crystal's skin tints the solution round it.\n    if (S.land >= 0) {\n      const R = min(9, 2 + (J.g - S.land) * 0.7);\n      const [hr, hg, hb] = sc[0];\n      for (let y = round(S.rest - R * 1.3); y \u003c= S.rest + 1; y++) {\n        const v = (y - S.rest) / (R * 1.3);\n        for (let x = max(-o, round(S.x - R)); x \u003c= S.x + R && x + o \u003c W; x++) {\n          const u = (x - S.x) / R;\n          const f = 0.08 * (1 - u * u - v * v);\n          if (f > 0) {\n            const q = (y * W + x + o) * 3;\n            B[q] += hr * f;\n            B[q + 1] += hg * f;\n            B[q + 2] += hb * f;\n          }\n        }\n      }\n    }\n    // A falling crystal leaves a faint streak of dissolving salt.\n    const surf = surfAt(S.x, S.z);\n    const fade = S.land \u003c 0 ? 1 : max(0, 1 - (J.g - S.land) / 2.5);\n    if (fade > 0 && S.y > surf)\n      for (let y = round(surf) + 1; y \u003c S.y - 1; y++) add(round(S.x) + o, y, sc[0][0], sc[0][1], sc[0][2], 0.22 * fade * exp(-(S.y - y) / 14));\n    const a = S.land \u003c 0 || J.g - S.land \u003c 1 ? 1 : 0.5;\n    const x = round(S.x - 1) + o;\n    const y = round(S.y) - 1;\n    mixp(x, y, sc[1], a);\n    mixp(x + 1, y, sc[1].map((v) => min(255, v * 1.15 + 30)), a);\n    mixp(x, y + 1, sc[1].map((v) => v * 0.7), a);\n    mixp(x + 1, y + 1, sc[1].map((v) => v * 0.85), a);\n    if (S.sz > 0.5) mixp(x + 2, y + 1, sc[1].map((v) => v * 0.75), a);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  B = P.buf;\n  const { wl: WL, la: LA, so: SO, jk: K, jc: C, jm: M, jo: O, tc: TC } = P;\n  const on = P.jars.filter((J) => J.on);\n  for (const J of on) {\n    // This frame's colour for every tube, from its crystal's salt.\n    J.tubes.forEach((si, id) => TC.set(saltOf(P, J, si)[0], id * 3));\n    J.tc = TC.slice(0, J.tubes.length * 3);\n  }\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let J = null;\n      for (let i = 0; i \u003c on.length; i++) if (x - on[i].off >= GL && x - on[i].off \u003c= GR) J = on[i];\n      const q = J ? p - J.off : 0;\n      const qo = q * 3;\n      const kind = J ? K[q] : OUT;\n      const l = 0.62 + 0.25 * LA[p];\n      for (let c = 0; c \u003c 3; c++) {\n        let v = WL[o + c];\n        if (kind === AIR) v = v * 0.9 + 5;\n        else if (kind === WALL || kind === BASE) v = C[qo + c] + v * 0.25;\n        else if (kind === SOL) v = SO[o + c] * M[q];\n        else if (kind === SHEET) v = SO[o + c] * 0.5 + C[qo + c];\n        else if (kind) v = C[qo + c] * l;\n        B[o + c] = v;\n      }\n      if (J && GROWS[kind] && J.tid[q] >= 0) {\n        // A tube: lit through from the lamp behind, paler where its skin is\n        // fresh, and fading into the solution the further back it stands.\n        const id = J.tid[q] * 3;\n        const s = J.sh[q];\n        const fr = 0.3 * max(0, 1 - (J.g - J.bo[q]) / 1.4);\n        const fog = 0.06 + 0.5 * J.zb[q];\n        const hl = max(0, s - 1);\n        const sv = min(1, s) * (0.68 + 0.48 * LA[p]);\n        for (let c = 0; c \u003c 3; c++) {\n          let v = J.tc[id + c] * sv;\n          v += (255 - v) * hl;\n          v += (235 - v) * fr;\n          v += (B[o + c] - v) * fog;\n          B[o + c] = kind === SHEET ? v * 0.75 + 11 : v;\n        }\n      }\n      if (kind) for (let c = 0; c \u003c 3; c++) B[o + c] += O[qo + c];\n    }\n  for (const J of on) life(P, J, (id) => J.tc.subarray(id * 3, id * 3 + 3));\n  for (let p = 0, o = 0; p \u003c BENCH * W; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, max(0, B[o])), min(255, max(0, B[o + 1])), min(255, max(0, B[o + 2])));\n  bench(P, display, on);\n}\n\n// A black resin bench top. The jar's foot is reflected in it, and the lamp,\n// focused through the full glass, throws a pool of light on it that takes the\n// colours of the garden it passed through, left for right.\nfunction bench(P, display, on) {\n  const B2 = P.buf;\n  const cc = P.cc.fill(0);\n  for (const J of on)\n    for (let lx = IL; lx \u003c= IR; lx++) {\n      const x = lx + J.off;\n      const xm = 63 - lx + J.off;\n      if (x \u003c 0 || x >= W || xm \u003c 0 || xm >= W) continue;\n      for (let y = 30; y \u003c 100; y += 5) for (let i = 0; i \u003c 3; i++) cc[x * 3 + i] += B2[(y * W + xm) * 3 + i] / 14;\n    }\n  for (let y = BENCH; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const gr = ((x * 7 + y * 13) % 5) * 0.6;\n      const f = 1 - (y - BENCH) / 9;\n      let r = 16 + 10 * f + gr;\n      let g = 17 + 10 * f + gr;\n      let b = 21 + 11 * f + gr;\n      if (y === 123) [r, g, b] = [66, 68, 76];\n      else if (y > 123) [r, g, b] = [26 - (y - 124) * 3 + gr, 27 - (y - 124) * 3 + gr, 31 - (y - 124) * 3 + gr];\n      else\n        for (const J of on) {\n          const lx = x - J.off;\n          if (lx \u003c GL || lx > GR) continue;\n          if (y === BENCH) {\n            [r, g, b] = [7, 7, 9];\n            continue;\n          }\n          const m = (2 * BENCH - 1 - y) * W + x;\n          const ex = (lx - 31.5) / 23;\n          const ey = (y - 118.5) / 3.4;\n          const a = 0.9 * sm(1 - ex * ex - ey * ey) + 0.7 * exp(-(((y - 117.5) / 1.1) ** 2)) * sm(1 - ex * ex * 1.4);\n          r += B2[m * 3] * 0.22 * f + (cc[x * 3] * 1.15 + 26) * a;\n          g += B2[m * 3 + 1] * 0.22 * f + (cc[x * 3 + 1] * 1.15 + 28) * a;\n          b += B2[m * 3 + 2] * 0.22 * f + (cc[x * 3 + 2] * 1.15 + 18) * a;\n        }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Salts=0..4, Speed=0.2..3, Crystals=5..20, Strength=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Salts","min":0,"max":4,"about":"What goes into the glass: all six salts at 0 (cobalt chloride's blue-violet, copper sulfate's turquoise, iron(III) chloride's rust, nickel sulfate's green, manganese chloride's pink, calcium chloride's white), the cool cobalt, copper and calcium at 1, the warm iron, manganese and calcium at 2, the greens of nickel and copper at 3, cobalt alone at 4."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the garden grows: at 2 a tube that races takes about 11 s from its crystal to the surface and a glass lasts about half a minute before the next slides in; at 0.2 it creeps."},{"name":"Crystals","min":5,"max":20,"about":"How many crystals are dropped in, 5 to 20; each sends up four to six tubes as it dissolves, and those bud more. Turned up mid-glass, the extra crystals drop in at once."},{"name":"Strength","min":-1,"max":1,"about":"How strong the water glass is: near 0 the usual mix, towards -1 a thin solution where hair-fine threads shoot up in 6 s and wriggle, towards 1 a thick one where fat tubes take 18 s and bud into knobbly branches."}],"start":[0,2,5,0.06],"measures":{"motion":0.044,"detail":0.0682,"edges":0.4036,"complexity":2.0411,"coverage":0.7726,"colour":0.152,"drift":0.0448},"knobResponse":[0.0762,0.0506,0.0924,0.0773]},{"slug":"chladni","title":"Chladni","family":"wave","round":16,"note":"세운 놋쇠 판에 뿌린 모래가 떨리는 자리에서 튀어 나가 가만히 있는 마디선에 모여 클라드니 도형을 그려요. 5초마다 활을 다시 그으면 모래가 흩어졌다가 새 모드의 도형을 찾아가고, K4 를 올리면 석송 가루가 배 자리마다 둥근 노란 더미로 모여요.","idea":"Sand on a tall metal plate jumps off the vibrating parts and settles on the still nodal lines, and every few seconds the plate is bowed into a new mode and the sand scatters to find the new figure.","buttons":"K1 tap draws the bow again now: the sand jumps up and finds the figure of another mode in the same register.","code":"// ===== Patternflow pattern =====\n// Title:   Chladni\n// Family:  wave\n// Idea:    Sand on a tall metal plate jumps off the vibrating parts and settles on the still nodal lines, and every few seconds the plate is bowed into a new mode and the sand scatters to find the new figure.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ernst Chladni, Entdeckungen über die Theorie des Klanges (1787); the powder heaps from Michael Faraday, On a peculiar class of acoustical figures (1831)\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Plate=0..1, Drive=0.8..3, Pitch=-1..1, Powder=0..1\n//\n// Knob 1: Plate. What the plate is made of: brass at 0, then copper, blued steel and black glass, each with the sand that shows best on it; between copper and steel it passes the purple of tempered steel.\n// Knob 2: Drive. How hard the plate is bowed. Sand only jumps where the plate throws it harder than gravity, so at the bottom only the antinodes clear and the lines lie in broad soft bands; at 2 a figure gathers in about a second; at the top the lines come out thin and hard.\n// Knob 3: Pitch. Which register the bow plays in, 1.4 octaves either way: low notes make two or three big curves, high notes a dense lace of small cells.\n// Knob 4: Powder. How much of what is on the plate is lycopodium powder instead of sand: the air the plate pumps carries the powder the other way, into round yellow heaps on the antinodes, as Faraday found.\n// Buttons: K1 tap draws the bow again now: the sand jumps up and finds the figure of another mode in the same register.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst GRAINS = 4000;\n// One period of cosine in a table, so a grain's displacement is four lookups.\nconst TAB = 4096;\nconst MASK = TAB - 1;\nconst QUARTER = TAB / 4;\nconst COS = new Float32Array(TAB);\nfor (let i = 0; i \u003c TAB; i++) COS[i] = Math.cos((2 * Math.PI * i) / TAB);\n// 1 - exp(-c) for a grain count c in steps of 1/16: how much of an LED the sand hides.\nconst COVER = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) COVER[i] = 1 - Math.exp(-0.55 * (i / 16));\n// How long a figure stands before the next bow stroke, in seconds.\nconst HOLD = 5;\n\n// Modes of a free plate twice as tall as it is wide. A free edge does not hold\n// the plate still, so each standing wave is cos(p pi x / 64) cos(q pi y / 128).\n// That is the usual approximation; the note of such a wave goes up with\n// (p/64)^2 + (q/128)^2, so on this plate two waves sound the same note when\n// 4p^2 + q^2 is the same number, and a plate bowed at that note rings with both\n// at once, added or taken away. The sum is what draws a Chladni figure. On a\n// square plate the pairs are (p, q) and (q, p); matched to the 1:2 plate\n// instead, the cells of the figure come out as tall as they are wide.\n// Each row: that number, then p and q of the first wave and of the second.\nconst MODES = [\n  [25, 0, 5, 2, 3],\n  [36, 0, 6, 3, 0],\n  [40, 1, 6, 3, 2],\n  [52, 2, 6, 3, 4],\n  [64, 0, 8, 4, 0],\n  [65, 2, 7, 4, 1],\n  [68, 1, 8, 4, 2],\n  [80, 2, 8, 4, 4],\n  [85, 1, 9, 3, 7],\n  [100, 3, 8, 4, 6],\n  [100, 0, 10, 4, 6],\n  [104, 1, 10, 5, 2],\n  [116, 2, 10, 5, 4],\n  [125, 1, 11, 5, 5],\n  [136, 3, 10, 5, 6],\n  [145, 4, 9, 6, 1],\n  [148, 1, 12, 6, 2],\n  [160, 2, 12, 6, 4],\n  [164, 4, 10, 5, 8],\n  [169, 0, 13, 6, 5],\n  [180, 3, 12, 6, 6],\n  [185, 2, 13, 4, 11],\n  [200, 5, 10, 7, 2],\n  [205, 3, 13, 7, 3],\n  [208, 4, 12, 6, 8],\n  [212, 2, 14, 7, 4],\n  [221, 5, 11, 7, 5],\n  [225, 0, 15, 6, 9],\n  [232, 3, 14, 7, 6],\n  [244, 5, 12, 6, 10],\n];\n\n// Plates, each with the sand that reads on it: the plate's colour at full light,\n// the sand's colour, how much light the plate gives back, and how sharply it\n// mirrors the window. Glass is darker than metal and the glossiest of the four.\nconst PLATES = [\n  [[255, 196, 92], [238, 232, 212], 0.13, 1], // brass, quartz sand\n  [[255, 128, 80], [242, 240, 232], 0.13, 1], // copper, white sand\n  [[90, 135, 255], [246, 214, 150], 0.14, 0.9], // blued steel, golden sand\n  [[140, 160, 185], [250, 250, 248], 0.09, 1.5], // black glass, chalk-white sand\n];\n// The grains are not all one colour: mostly clear quartz, some cream, a few amber and grey.\nconst TINTS = [\n  [1, 1, 1],\n  [1, 0.94, 0.8],\n  [0.96, 0.8, 0.56],\n  [0.78, 0.78, 0.76],\n];\n// Lycopodium spores, the club-moss powder Faraday used, sulphur yellow.\nconst POWDER = [236, 212, 92];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vnoise(x, y, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const a = hash(ix + seed, iy);\n  const b = hash(ix + 1 + seed, iy);\n  const c = hash(ix + seed, iy + 1);\n  const d = hash(ix + 1 + seed, iy + 1);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nexport function setup(params) {\n  params.gx = new Float32Array(GRAINS);\n  params.gy = new Float32Array(GRAINS);\n  params.hop = new Float32Array(GRAINS);\n  params.tint = new Uint8Array(GRAINS);\n  // Each grain draws a number once: grains under the Powder knob are powder.\n  params.kind = new Float32Array(GRAINS);\n  for (let i = 0; i \u003c GRAINS; i++) {\n    params.gx[i] = Math.random() * W;\n    params.gy[i] = Math.random() * H;\n    const r = Math.random();\n    params.tint[i] = r \u003c 0.55 ? 0 : r \u003c 0.82 ? 1 : r \u003c 0.93 ? 2 : 3;\n    params.kind[i] = Math.random();\n  }\n  params.cnt = new Float32Array(N);\n  params.sr = new Float32Array(N);\n  params.sg = new Float32Array(N);\n  params.sb = new Float32Array(N);\n  params.pw = new Float32Array(N);\n  params.cov = new Float32Array(N);\n  params.slope = new Float32Array(N);\n  params.amp2 = new Float32Array(N);\n  params.up = new Int32Array(N);\n  params.peak = new Int32Array(N);\n  params.lum = new Float32Array(N);\n  params.sheen = new Float32Array(N);\n  bakePlate(params);\n  params.mode = -1;\n  params.sign = 1;\n  params.since = 0;\n  // The plate has been sprinkled; the first stroke comes a moment after it shows.\n  params.next = 0.15;\n  params.amp = 2;\n  params.plate = 0;\n  params.powder = 0.06;\n}\n\n// The plate's own light, the same whatever it is made of: fine brushing along\n// its width, a soft window reflection running down it, and the bevel of the edge.\nfunction bakePlate(params) {\n  const lum = params.lum;\n  const sheen = params.sheen;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // Brushed: streaks 10 to 20 LEDs long across the plate, a row or two tall.\n      const brush = vnoise(x / 14, y / 1.3, 11) * 0.6 + vnoise(x / 5, y / 0.8, 37) * 0.4;\n      let l = 1 + 0.09 * (brush - 0.5) * 2;\n      // The whole plate a little lighter at the top, where it faces the window.\n      l *= 1.12 - 0.24 * (y / H);\n      // The edge catches light along the top and the left and falls into shadow on the other two.\n      if (y === 0 || x === 0) l *= 1.9;\n      else if (y === H - 1 || x === W - 1) l *= 0.5;\n      lum[i] = l;\n      // The window: a broad band leaning down the length of the plate, split by\n      // the dark bar of the sash.\n      const d = (x - 30) * 0.9 + (y - 64) * 0.3;\n      const bar = 1 - 0.55 * Math.exp(-((d - 2) * (d - 2)) / 4);\n      sheen[i] = (0.17 * Math.exp(-(d * d) / 300) + 0.1 * Math.exp(-(d * d) / 40)) * bar;\n    }\n}\n\nfunction pickMode(params, k3) {\n  // Pitch moves the middle of the register an octave and a half each way;\n  // the note of a plate mode goes with that number, so an octave doubles it.\n  const centre = 85 * Math.pow(2, 1.4 * k3);\n  const band = [];\n  for (let m = 0; m \u003c MODES.length; m++) {\n    const o = Math.abs(Math.log2(MODES[m][0] / centre));\n    if (o \u003c 0.38 && m !== params.mode) band.push(m);\n  }\n  if (band.length === 0) {\n    // At the ends of the range take the nearest modes.\n    let best = 0;\n    for (let m = 0; m \u003c MODES.length; m++) if (Math.abs(Math.log2(MODES[m][0] / centre)) \u003c Math.abs(Math.log2(MODES[best][0] / centre))) best = m;\n    band.push(best);\n  }\n  const m = band[Math.floor(Math.random() * band.length)];\n  params.mode = m;\n  params.sign = Math.random() \u003c 0.5 ? 1 : -1;\n  const row = MODES[m];\n  // Table steps per LED for each of the four cosines.\n  params.ax = (row[1] * TAB) / (2 * W);\n  params.ay = (row[2] * TAB) / (2 * H);\n  params.bx = (row[3] * TAB) / (2 * W);\n  params.by = (row[4] * TAB) / (2 * H);\n  // The wavenumber in radians per LED, the same for both waves of a pair.\n  params.k = (Math.PI / H) * Math.sqrt(row[0]);\n  // How steep the plate is at each LED, for the reflection it smears, and how\n  // hard it swings there, for the powder.\n  const slope = params.slope;\n  const amp = params.amp2;\n  const s = params.sign;\n  const inv = 1 / params.k;\n  const kax = (row[1] * Math.PI) / W;\n  const kay = (row[2] * Math.PI) / H;\n  const kbx = (row[3] * Math.PI) / W;\n  const kby = (row[4] * Math.PI) / H;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const X = x + 0.5;\n      const Y = y + 0.5;\n      const ca = COS[(params.ax * X) & MASK];\n      const sa = COS[((params.ax * X) - QUARTER) & MASK];\n      const cb = COS[(params.ay * Y) & MASK];\n      const sb = COS[((params.ay * Y) - QUARTER) & MASK];\n      const cc = COS[(params.bx * X) & MASK];\n      const sc = COS[((params.bx * X) - QUARTER) & MASK];\n      const cd = COS[(params.by * Y) & MASK];\n      const sd = COS[((params.by * Y) - QUARTER) & MASK];\n      const dx = -kax * sa * cb - s * kbx * sc * cd;\n      const dy = -kay * ca * sb - s * kby * cc * sd;\n      slope[y * W + x] = Math.sqrt(dx * dx + dy * dy) * inv * 0.5;\n      amp[y * W + x] = Math.abs(ca * cb + s * cc * cd);\n    }\n  // Where the powder goes: from each LED, climb to the neighbour that swings\n  // hardest until no neighbour swings harder. That LED is the antinode whose\n  // heap this LED feeds. Climbing on the grid finds the true peaks; following\n  // the slope by itself left powder strung out along the ridges between them.\n  const up = params.up;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let best = i;\n      for (let oy = -1; oy \u003c= 1; oy++)\n        for (let ox = -1; ox \u003c= 1; ox++) {\n          const xx = x + ox;\n          const yy = y + oy;\n          if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n          const j = yy * W + xx;\n          if (amp[j] > amp[best]) best = j;\n        }\n      up[i] = best;\n    }\n  const peak = params.peak;\n  for (let i = 0; i \u003c N; i++) {\n    let j = i;\n    while (up[j] !== j) j = up[j];\n    peak[i] = j;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.plate = Math.max(0, Math.min(1, k[0]));\n  const amp = Math.max(0.05, k[1]);\n  params.amp = amp;\n  const k3 = Math.max(-1, Math.min(1, k[2]));\n  params.powder = Math.max(0, Math.min(1, k[3]));\n\n  params.since += dt;\n  params.next -= dt;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  // Turned to another register, the bow does not wait out the figure.\n  if (params.mode >= 0 && Math.abs(Math.log2(MODES[params.mode][0] / (85 * Math.pow(2, 1.4 * k3)))) > 0.6 && params.next > 0.4) params.next = 0.4;\n  if (pressed || params.next \u003c= 0) {\n    pickMode(params, k3);\n    params.since = 0;\n    params.next = HOLD;\n  }\n  if (params.mode \u003c 0) return;\n\n  // A stroke throws everything up for a moment; then the note settles in.\n  const t = params.since;\n  const burst = 2.2 * Math.exp(-t / 0.18);\n  const env = 0.4 + 0.6 * Math.min(1, t / 0.5);\n  const a = amp * env;\n  const f = Math.sqrt(dt * 30);\n  const inv = 1 / params.k;\n  const ax = params.ax;\n  const ay = params.ay;\n  const bx = params.bx;\n  const by = params.by;\n  const s = params.sign;\n  const row = MODES[params.mode];\n  const kax = (row[1] * Math.PI) / W;\n  const kay = (row[2] * Math.PI) / H;\n  const kbx = (row[3] * Math.PI) / W;\n  const kby = (row[4] * Math.PI) / H;\n  const gx = params.gx;\n  const gy = params.gy;\n  const hop = params.hop;\n  const kind = params.kind;\n  const powder = params.powder;\n  const peak = params.peak;\n  const spread = 0.8 + 1.6 * Math.sqrt(powder);\n  for (let i = 0; i \u003c GRAINS; i++) {\n    let x = gx[i];\n    let y = gy[i];\n    const ca = COS[(ax * x) & MASK];\n    const cb = COS[(ay * y) & MASK];\n    const cc = COS[(bx * x) & MASK];\n    const cd = COS[(by * y) & MASK];\n    const u = ca * cb + s * cc * cd;\n    const sa = COS[((ax * x) - QUARTER) & MASK];\n    const sb = COS[((ay * y) - QUARTER) & MASK];\n    const sc = COS[((bx * x) - QUARTER) & MASK];\n    const sd = COS[((by * y) - QUARTER) & MASK];\n    const dx = -kax * sa * cb - s * kbx * sc * cd;\n    const dy = -kay * ca * sb - s * kby * cc * sd;\n    if (kind[i] \u003c powder) {\n      // Powder is light enough for the air the plate pumps: the currents grow\n      // with the square of the swing and carry it to the antinode of its cell.\n      // A heap holds what reaches it, so more powder makes wider heaps, and as\n      // Faraday saw in 1831, each heap turns slowly on itself.\n      const pk = peak[((y | 0) * W + (x | 0))];\n      const tx = (pk % W) + 0.5;\n      const ty = ((pk / W) | 0) + 0.5;\n      const pull = Math.min(0.5, 0.035 * a * a) * f * f;\n      const spin = (u > 0 ? 0.06 : -0.06) * f * f;\n      const j = spread * Math.sqrt(2 * pull) * 1.7 + burst * f;\n      const ox = x - tx;\n      const oy = y - ty;\n      x += -pull * ox - spin * oy + (Math.random() - 0.5) * j;\n      y += -pull * oy + spin * ox + (Math.random() - 0.5) * j;\n      hop[i] = 0;\n    } else {\n      // Sand only leaves the plate where the plate's acceleration beats gravity.\n      // e is that acceleration in g: at the antinodes it is the Drive times 4.4,\n      // and the band where it stays under 1 is where the sand lies still, so the\n      // lines thin as the bow presses harder. Above 1 a grain jumps further the\n      // harder the plate throws it, in any direction.\n      const e = 2.2 * a * Math.abs(u);\n      const e2 = e * e;\n      const e8 = e2 * e2 * e2 * e2;\n      const h = ((e > 1 ? e - 0.7 : 0.3 * e8) * 0.18 * inv + 0.015 + burst) * f;\n      x += (Math.random() * 2 - 1) * h;\n      y += (Math.random() * 2 - 1) * h;\n      // Inside the band the plate still tilts under each grain, and the sand\n      // creeps down to the line itself, so a figure sharpens while it stands.\n      const g2 = dx * dx + dy * dy;\n      if (e \u003c 1 && g2 > 1e-6) {\n        const c = (0.003 * a * u * f * f) / g2;\n        x -= c * dx;\n        y -= c * dy;\n      }\n      hop[i] = h;\n    }\n    if (x \u003c 0) x = -x;\n    else if (x >= W) x = 2 * W - x - 0.001;\n    if (y \u003c 0) y = -y;\n    else if (y >= H) y = 2 * H - y - 0.001;\n    gx[i] = Math.max(0, Math.min(W - 0.001, x));\n    gy[i] = Math.max(0, Math.min(H - 0.001, y));\n  }\n}\n\nexport function draw(display, params, time) {\n  const cnt = params.cnt;\n  const sr = params.sr;\n  const sg = params.sg;\n  const sb = params.sb;\n  const pw = params.pw;\n  const cov = params.cov;\n  cnt.fill(0);\n  sr.fill(0);\n  sg.fill(0);\n  sb.fill(0);\n  pw.fill(0);\n\n  // Plate and sand for this setting of the knob, blended between neighbours.\n  const pf = params.plate * (PLATES.length - 1);\n  const p0 = Math.min(PLATES.length - 2, Math.floor(pf));\n  const pt = pf - p0;\n  const plate = [0, 0, 0];\n  const sand = [0, 0, 0];\n  for (let c = 0; c \u003c 3; c++) {\n    plate[c] = PLATES[p0][0][c] + (PLATES[p0 + 1][0][c] - PLATES[p0][0][c]) * pt;\n    sand[c] = PLATES[p0][1][c] + (PLATES[p0 + 1][1][c] - PLATES[p0][1][c]) * pt;\n  }\n  const base = PLATES[p0][2] + (PLATES[p0 + 1][2] - PLATES[p0][2]) * pt;\n  const gloss = PLATES[p0][3] + (PLATES[p0 + 1][3] - PLATES[p0][3]) * pt;\n\n  const gx = params.gx;\n  const gy = params.gy;\n  const hop = params.hop;\n  const kind = params.kind;\n  const tint = params.tint;\n  const powder = params.powder;\n  for (let i = 0; i \u003c GRAINS; i++) {\n    const x = gx[i] | 0;\n    const y = gy[i] | 0;\n    const o = y * W + x;\n    if (kind[i] \u003c powder) {\n      // Powder is fluff: a soft spot rather than a point.\n      pw[o] += 1;\n      if (x > 0) pw[o - 1] += 0.35;\n      if (x \u003c W - 1) pw[o + 1] += 0.35;\n      if (y > 0) pw[o - W] += 0.35;\n      if (y \u003c H - 1) pw[o + W] += 0.35;\n      continue;\n    }\n    // A grain in the air is a blur, so it shows less than one lying still.\n    const w = 1 / (1 + 1.2 * hop[i]);\n    const tt = TINTS[tint[i]];\n    cnt[o] += w;\n    sr[o] += w * tt[0];\n    sg[o] += w * tt[1];\n    sb[o] += w * tt[2];\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const c = cnt[i] * 16;\n    cov[i] = COVER[c \u003c 256 ? c | 0 : 256];\n  }\n\n  const lum = params.lum;\n  const sheen = params.sheen;\n  const slope = params.slope;\n  // Where the plate tilts back and forth, the window it reflects is smeared out.\n  const smear = Math.min(0.85, params.amp * 0.3);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let l = base * lum[i] + gloss * sheen[i] * (1 - smear * Math.min(1, slope[i]));\n      let r = plate[0] * l;\n      let g = plate[1] * l;\n      let b = plate[2] * l;\n      const cv = cov[i];\n      if (cv > 0) {\n        const n = cnt[i];\n        const tr = (sand[0] * sr[i]) / n;\n        const tg = (sand[1] * sg[i]) / n;\n        const tb = (sand[2] * sb[i]) / n;\n        r += (tr - r) * cv;\n        g += (tg - g) * cv;\n        b += (tb - b) * cv;\n      }\n      const pv = pw[i];\n      if (pv > 0) {\n        const a = Math.min(0.95, 1 - Math.exp(-0.5 * pv));\n        r += (POWDER[0] - r) * a;\n        g += (POWDER[1] - g) * a;\n        b += (POWDER[2] - b) * a;\n      }\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n}\n","layer":{"id":"layer-chladni","type":"code","name":"chladni","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Chladni\n// Family:  wave\n// Idea:    Sand on a tall metal plate jumps off the vibrating parts and settles on the still nodal lines, and every few seconds the plate is bowed into a new mode and the sand scatters to find the new figure.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ernst Chladni, Entdeckungen über die Theorie des Klanges (1787); the powder heaps from Michael Faraday, On a peculiar class of acoustical figures (1831)\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Plate=0..1, Drive=0.8..3, Pitch=-1..1, Powder=0..1\n//\n// Knob 1: Plate. What the plate is made of: brass at 0, then copper, blued steel and black glass, each with the sand that shows best on it; between copper and steel it passes the purple of tempered steel.\n// Knob 2: Drive. How hard the plate is bowed. Sand only jumps where the plate throws it harder than gravity, so at the bottom only the antinodes clear and the lines lie in broad soft bands; at 2 a figure gathers in about a second; at the top the lines come out thin and hard.\n// Knob 3: Pitch. Which register the bow plays in, 1.4 octaves either way: low notes make two or three big curves, high notes a dense lace of small cells.\n// Knob 4: Powder. How much of what is on the plate is lycopodium powder instead of sand: the air the plate pumps carries the powder the other way, into round yellow heaps on the antinodes, as Faraday found.\n// Buttons: K1 tap draws the bow again now: the sand jumps up and finds the figure of another mode in the same register.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst GRAINS = 4000;\n// One period of cosine in a table, so a grain's displacement is four lookups.\nconst TAB = 4096;\nconst MASK = TAB - 1;\nconst QUARTER = TAB / 4;\nconst COS = new Float32Array(TAB);\nfor (let i = 0; i \u003c TAB; i++) COS[i] = Math.cos((2 * Math.PI * i) / TAB);\n// 1 - exp(-c) for a grain count c in steps of 1/16: how much of an LED the sand hides.\nconst COVER = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) COVER[i] = 1 - Math.exp(-0.55 * (i / 16));\n// How long a figure stands before the next bow stroke, in seconds.\nconst HOLD = 5;\n\n// Modes of a free plate twice as tall as it is wide. A free edge does not hold\n// the plate still, so each standing wave is cos(p pi x / 64) cos(q pi y / 128).\n// That is the usual approximation; the note of such a wave goes up with\n// (p/64)^2 + (q/128)^2, so on this plate two waves sound the same note when\n// 4p^2 + q^2 is the same number, and a plate bowed at that note rings with both\n// at once, added or taken away. The sum is what draws a Chladni figure. On a\n// square plate the pairs are (p, q) and (q, p); matched to the 1:2 plate\n// instead, the cells of the figure come out as tall as they are wide.\n// Each row: that number, then p and q of the first wave and of the second.\nconst MODES = [\n  [25, 0, 5, 2, 3],\n  [36, 0, 6, 3, 0],\n  [40, 1, 6, 3, 2],\n  [52, 2, 6, 3, 4],\n  [64, 0, 8, 4, 0],\n  [65, 2, 7, 4, 1],\n  [68, 1, 8, 4, 2],\n  [80, 2, 8, 4, 4],\n  [85, 1, 9, 3, 7],\n  [100, 3, 8, 4, 6],\n  [100, 0, 10, 4, 6],\n  [104, 1, 10, 5, 2],\n  [116, 2, 10, 5, 4],\n  [125, 1, 11, 5, 5],\n  [136, 3, 10, 5, 6],\n  [145, 4, 9, 6, 1],\n  [148, 1, 12, 6, 2],\n  [160, 2, 12, 6, 4],\n  [164, 4, 10, 5, 8],\n  [169, 0, 13, 6, 5],\n  [180, 3, 12, 6, 6],\n  [185, 2, 13, 4, 11],\n  [200, 5, 10, 7, 2],\n  [205, 3, 13, 7, 3],\n  [208, 4, 12, 6, 8],\n  [212, 2, 14, 7, 4],\n  [221, 5, 11, 7, 5],\n  [225, 0, 15, 6, 9],\n  [232, 3, 14, 7, 6],\n  [244, 5, 12, 6, 10],\n];\n\n// Plates, each with the sand that reads on it: the plate's colour at full light,\n// the sand's colour, how much light the plate gives back, and how sharply it\n// mirrors the window. Glass is darker than metal and the glossiest of the four.\nconst PLATES = [\n  [[255, 196, 92], [238, 232, 212], 0.13, 1], // brass, quartz sand\n  [[255, 128, 80], [242, 240, 232], 0.13, 1], // copper, white sand\n  [[90, 135, 255], [246, 214, 150], 0.14, 0.9], // blued steel, golden sand\n  [[140, 160, 185], [250, 250, 248], 0.09, 1.5], // black glass, chalk-white sand\n];\n// The grains are not all one colour: mostly clear quartz, some cream, a few amber and grey.\nconst TINTS = [\n  [1, 1, 1],\n  [1, 0.94, 0.8],\n  [0.96, 0.8, 0.56],\n  [0.78, 0.78, 0.76],\n];\n// Lycopodium spores, the club-moss powder Faraday used, sulphur yellow.\nconst POWDER = [236, 212, 92];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vnoise(x, y, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const a = hash(ix + seed, iy);\n  const b = hash(ix + 1 + seed, iy);\n  const c = hash(ix + seed, iy + 1);\n  const d = hash(ix + 1 + seed, iy + 1);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nexport function setup(params) {\n  params.gx = new Float32Array(GRAINS);\n  params.gy = new Float32Array(GRAINS);\n  params.hop = new Float32Array(GRAINS);\n  params.tint = new Uint8Array(GRAINS);\n  // Each grain draws a number once: grains under the Powder knob are powder.\n  params.kind = new Float32Array(GRAINS);\n  for (let i = 0; i \u003c GRAINS; i++) {\n    params.gx[i] = Math.random() * W;\n    params.gy[i] = Math.random() * H;\n    const r = Math.random();\n    params.tint[i] = r \u003c 0.55 ? 0 : r \u003c 0.82 ? 1 : r \u003c 0.93 ? 2 : 3;\n    params.kind[i] = Math.random();\n  }\n  params.cnt = new Float32Array(N);\n  params.sr = new Float32Array(N);\n  params.sg = new Float32Array(N);\n  params.sb = new Float32Array(N);\n  params.pw = new Float32Array(N);\n  params.cov = new Float32Array(N);\n  params.slope = new Float32Array(N);\n  params.amp2 = new Float32Array(N);\n  params.up = new Int32Array(N);\n  params.peak = new Int32Array(N);\n  params.lum = new Float32Array(N);\n  params.sheen = new Float32Array(N);\n  bakePlate(params);\n  params.mode = -1;\n  params.sign = 1;\n  params.since = 0;\n  // The plate has been sprinkled; the first stroke comes a moment after it shows.\n  params.next = 0.15;\n  params.amp = 2;\n  params.plate = 0;\n  params.powder = 0.06;\n}\n\n// The plate's own light, the same whatever it is made of: fine brushing along\n// its width, a soft window reflection running down it, and the bevel of the edge.\nfunction bakePlate(params) {\n  const lum = params.lum;\n  const sheen = params.sheen;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // Brushed: streaks 10 to 20 LEDs long across the plate, a row or two tall.\n      const brush = vnoise(x / 14, y / 1.3, 11) * 0.6 + vnoise(x / 5, y / 0.8, 37) * 0.4;\n      let l = 1 + 0.09 * (brush - 0.5) * 2;\n      // The whole plate a little lighter at the top, where it faces the window.\n      l *= 1.12 - 0.24 * (y / H);\n      // The edge catches light along the top and the left and falls into shadow on the other two.\n      if (y === 0 || x === 0) l *= 1.9;\n      else if (y === H - 1 || x === W - 1) l *= 0.5;\n      lum[i] = l;\n      // The window: a broad band leaning down the length of the plate, split by\n      // the dark bar of the sash.\n      const d = (x - 30) * 0.9 + (y - 64) * 0.3;\n      const bar = 1 - 0.55 * Math.exp(-((d - 2) * (d - 2)) / 4);\n      sheen[i] = (0.17 * Math.exp(-(d * d) / 300) + 0.1 * Math.exp(-(d * d) / 40)) * bar;\n    }\n}\n\nfunction pickMode(params, k3) {\n  // Pitch moves the middle of the register an octave and a half each way;\n  // the note of a plate mode goes with that number, so an octave doubles it.\n  const centre = 85 * Math.pow(2, 1.4 * k3);\n  const band = [];\n  for (let m = 0; m \u003c MODES.length; m++) {\n    const o = Math.abs(Math.log2(MODES[m][0] / centre));\n    if (o \u003c 0.38 && m !== params.mode) band.push(m);\n  }\n  if (band.length === 0) {\n    // At the ends of the range take the nearest modes.\n    let best = 0;\n    for (let m = 0; m \u003c MODES.length; m++) if (Math.abs(Math.log2(MODES[m][0] / centre)) \u003c Math.abs(Math.log2(MODES[best][0] / centre))) best = m;\n    band.push(best);\n  }\n  const m = band[Math.floor(Math.random() * band.length)];\n  params.mode = m;\n  params.sign = Math.random() \u003c 0.5 ? 1 : -1;\n  const row = MODES[m];\n  // Table steps per LED for each of the four cosines.\n  params.ax = (row[1] * TAB) / (2 * W);\n  params.ay = (row[2] * TAB) / (2 * H);\n  params.bx = (row[3] * TAB) / (2 * W);\n  params.by = (row[4] * TAB) / (2 * H);\n  // The wavenumber in radians per LED, the same for both waves of a pair.\n  params.k = (Math.PI / H) * Math.sqrt(row[0]);\n  // How steep the plate is at each LED, for the reflection it smears, and how\n  // hard it swings there, for the powder.\n  const slope = params.slope;\n  const amp = params.amp2;\n  const s = params.sign;\n  const inv = 1 / params.k;\n  const kax = (row[1] * Math.PI) / W;\n  const kay = (row[2] * Math.PI) / H;\n  const kbx = (row[3] * Math.PI) / W;\n  const kby = (row[4] * Math.PI) / H;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const X = x + 0.5;\n      const Y = y + 0.5;\n      const ca = COS[(params.ax * X) & MASK];\n      const sa = COS[((params.ax * X) - QUARTER) & MASK];\n      const cb = COS[(params.ay * Y) & MASK];\n      const sb = COS[((params.ay * Y) - QUARTER) & MASK];\n      const cc = COS[(params.bx * X) & MASK];\n      const sc = COS[((params.bx * X) - QUARTER) & MASK];\n      const cd = COS[(params.by * Y) & MASK];\n      const sd = COS[((params.by * Y) - QUARTER) & MASK];\n      const dx = -kax * sa * cb - s * kbx * sc * cd;\n      const dy = -kay * ca * sb - s * kby * cc * sd;\n      slope[y * W + x] = Math.sqrt(dx * dx + dy * dy) * inv * 0.5;\n      amp[y * W + x] = Math.abs(ca * cb + s * cc * cd);\n    }\n  // Where the powder goes: from each LED, climb to the neighbour that swings\n  // hardest until no neighbour swings harder. That LED is the antinode whose\n  // heap this LED feeds. Climbing on the grid finds the true peaks; following\n  // the slope by itself left powder strung out along the ridges between them.\n  const up = params.up;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let best = i;\n      for (let oy = -1; oy \u003c= 1; oy++)\n        for (let ox = -1; ox \u003c= 1; ox++) {\n          const xx = x + ox;\n          const yy = y + oy;\n          if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n          const j = yy * W + xx;\n          if (amp[j] > amp[best]) best = j;\n        }\n      up[i] = best;\n    }\n  const peak = params.peak;\n  for (let i = 0; i \u003c N; i++) {\n    let j = i;\n    while (up[j] !== j) j = up[j];\n    peak[i] = j;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.plate = Math.max(0, Math.min(1, k[0]));\n  const amp = Math.max(0.05, k[1]);\n  params.amp = amp;\n  const k3 = Math.max(-1, Math.min(1, k[2]));\n  params.powder = Math.max(0, Math.min(1, k[3]));\n\n  params.since += dt;\n  params.next -= dt;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  // Turned to another register, the bow does not wait out the figure.\n  if (params.mode >= 0 && Math.abs(Math.log2(MODES[params.mode][0] / (85 * Math.pow(2, 1.4 * k3)))) > 0.6 && params.next > 0.4) params.next = 0.4;\n  if (pressed || params.next \u003c= 0) {\n    pickMode(params, k3);\n    params.since = 0;\n    params.next = HOLD;\n  }\n  if (params.mode \u003c 0) return;\n\n  // A stroke throws everything up for a moment; then the note settles in.\n  const t = params.since;\n  const burst = 2.2 * Math.exp(-t / 0.18);\n  const env = 0.4 + 0.6 * Math.min(1, t / 0.5);\n  const a = amp * env;\n  const f = Math.sqrt(dt * 30);\n  const inv = 1 / params.k;\n  const ax = params.ax;\n  const ay = params.ay;\n  const bx = params.bx;\n  const by = params.by;\n  const s = params.sign;\n  const row = MODES[params.mode];\n  const kax = (row[1] * Math.PI) / W;\n  const kay = (row[2] * Math.PI) / H;\n  const kbx = (row[3] * Math.PI) / W;\n  const kby = (row[4] * Math.PI) / H;\n  const gx = params.gx;\n  const gy = params.gy;\n  const hop = params.hop;\n  const kind = params.kind;\n  const powder = params.powder;\n  const peak = params.peak;\n  const spread = 0.8 + 1.6 * Math.sqrt(powder);\n  for (let i = 0; i \u003c GRAINS; i++) {\n    let x = gx[i];\n    let y = gy[i];\n    const ca = COS[(ax * x) & MASK];\n    const cb = COS[(ay * y) & MASK];\n    const cc = COS[(bx * x) & MASK];\n    const cd = COS[(by * y) & MASK];\n    const u = ca * cb + s * cc * cd;\n    const sa = COS[((ax * x) - QUARTER) & MASK];\n    const sb = COS[((ay * y) - QUARTER) & MASK];\n    const sc = COS[((bx * x) - QUARTER) & MASK];\n    const sd = COS[((by * y) - QUARTER) & MASK];\n    const dx = -kax * sa * cb - s * kbx * sc * cd;\n    const dy = -kay * ca * sb - s * kby * cc * sd;\n    if (kind[i] \u003c powder) {\n      // Powder is light enough for the air the plate pumps: the currents grow\n      // with the square of the swing and carry it to the antinode of its cell.\n      // A heap holds what reaches it, so more powder makes wider heaps, and as\n      // Faraday saw in 1831, each heap turns slowly on itself.\n      const pk = peak[((y | 0) * W + (x | 0))];\n      const tx = (pk % W) + 0.5;\n      const ty = ((pk / W) | 0) + 0.5;\n      const pull = Math.min(0.5, 0.035 * a * a) * f * f;\n      const spin = (u > 0 ? 0.06 : -0.06) * f * f;\n      const j = spread * Math.sqrt(2 * pull) * 1.7 + burst * f;\n      const ox = x - tx;\n      const oy = y - ty;\n      x += -pull * ox - spin * oy + (Math.random() - 0.5) * j;\n      y += -pull * oy + spin * ox + (Math.random() - 0.5) * j;\n      hop[i] = 0;\n    } else {\n      // Sand only leaves the plate where the plate's acceleration beats gravity.\n      // e is that acceleration in g: at the antinodes it is the Drive times 4.4,\n      // and the band where it stays under 1 is where the sand lies still, so the\n      // lines thin as the bow presses harder. Above 1 a grain jumps further the\n      // harder the plate throws it, in any direction.\n      const e = 2.2 * a * Math.abs(u);\n      const e2 = e * e;\n      const e8 = e2 * e2 * e2 * e2;\n      const h = ((e > 1 ? e - 0.7 : 0.3 * e8) * 0.18 * inv + 0.015 + burst) * f;\n      x += (Math.random() * 2 - 1) * h;\n      y += (Math.random() * 2 - 1) * h;\n      // Inside the band the plate still tilts under each grain, and the sand\n      // creeps down to the line itself, so a figure sharpens while it stands.\n      const g2 = dx * dx + dy * dy;\n      if (e \u003c 1 && g2 > 1e-6) {\n        const c = (0.003 * a * u * f * f) / g2;\n        x -= c * dx;\n        y -= c * dy;\n      }\n      hop[i] = h;\n    }\n    if (x \u003c 0) x = -x;\n    else if (x >= W) x = 2 * W - x - 0.001;\n    if (y \u003c 0) y = -y;\n    else if (y >= H) y = 2 * H - y - 0.001;\n    gx[i] = Math.max(0, Math.min(W - 0.001, x));\n    gy[i] = Math.max(0, Math.min(H - 0.001, y));\n  }\n}\n\nexport function draw(display, params, time) {\n  const cnt = params.cnt;\n  const sr = params.sr;\n  const sg = params.sg;\n  const sb = params.sb;\n  const pw = params.pw;\n  const cov = params.cov;\n  cnt.fill(0);\n  sr.fill(0);\n  sg.fill(0);\n  sb.fill(0);\n  pw.fill(0);\n\n  // Plate and sand for this setting of the knob, blended between neighbours.\n  const pf = params.plate * (PLATES.length - 1);\n  const p0 = Math.min(PLATES.length - 2, Math.floor(pf));\n  const pt = pf - p0;\n  const plate = [0, 0, 0];\n  const sand = [0, 0, 0];\n  for (let c = 0; c \u003c 3; c++) {\n    plate[c] = PLATES[p0][0][c] + (PLATES[p0 + 1][0][c] - PLATES[p0][0][c]) * pt;\n    sand[c] = PLATES[p0][1][c] + (PLATES[p0 + 1][1][c] - PLATES[p0][1][c]) * pt;\n  }\n  const base = PLATES[p0][2] + (PLATES[p0 + 1][2] - PLATES[p0][2]) * pt;\n  const gloss = PLATES[p0][3] + (PLATES[p0 + 1][3] - PLATES[p0][3]) * pt;\n\n  const gx = params.gx;\n  const gy = params.gy;\n  const hop = params.hop;\n  const kind = params.kind;\n  const tint = params.tint;\n  const powder = params.powder;\n  for (let i = 0; i \u003c GRAINS; i++) {\n    const x = gx[i] | 0;\n    const y = gy[i] | 0;\n    const o = y * W + x;\n    if (kind[i] \u003c powder) {\n      // Powder is fluff: a soft spot rather than a point.\n      pw[o] += 1;\n      if (x > 0) pw[o - 1] += 0.35;\n      if (x \u003c W - 1) pw[o + 1] += 0.35;\n      if (y > 0) pw[o - W] += 0.35;\n      if (y \u003c H - 1) pw[o + W] += 0.35;\n      continue;\n    }\n    // A grain in the air is a blur, so it shows less than one lying still.\n    const w = 1 / (1 + 1.2 * hop[i]);\n    const tt = TINTS[tint[i]];\n    cnt[o] += w;\n    sr[o] += w * tt[0];\n    sg[o] += w * tt[1];\n    sb[o] += w * tt[2];\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const c = cnt[i] * 16;\n    cov[i] = COVER[c \u003c 256 ? c | 0 : 256];\n  }\n\n  const lum = params.lum;\n  const sheen = params.sheen;\n  const slope = params.slope;\n  // Where the plate tilts back and forth, the window it reflects is smeared out.\n  const smear = Math.min(0.85, params.amp * 0.3);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let l = base * lum[i] + gloss * sheen[i] * (1 - smear * Math.min(1, slope[i]));\n      let r = plate[0] * l;\n      let g = plate[1] * l;\n      let b = plate[2] * l;\n      const cv = cov[i];\n      if (cv > 0) {\n        const n = cnt[i];\n        const tr = (sand[0] * sr[i]) / n;\n        const tg = (sand[1] * sg[i]) / n;\n        const tb = (sand[2] * sb[i]) / n;\n        r += (tr - r) * cv;\n        g += (tg - g) * cv;\n        b += (tb - b) * cv;\n      }\n      const pv = pw[i];\n      if (pv > 0) {\n        const a = Math.min(0.95, 1 - Math.exp(-0.5 * pv));\n        r += (POWDER[0] - r) * a;\n        g += (POWDER[1] - g) * a;\n        b += (POWDER[2] - b) * a;\n      }\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Plate=0..1, Drive=0.8..3, Pitch=-1..1, Powder=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Plate","min":0,"max":1,"about":"What the plate is made of: brass at 0, then copper, blued steel and black glass, each with the sand that shows best on it; between copper and steel it passes the purple of tempered steel."},{"name":"Drive","min":0.8,"max":3,"about":"How hard the plate is bowed. Sand only jumps where the plate throws it harder than gravity, so at the bottom only the antinodes clear and the lines lie in broad soft bands; at 2 a figure gathers in about a second; at the top the lines come out thin and hard."},{"name":"Pitch","min":-1,"max":1,"about":"Which register the bow plays in, 1.4 octaves either way: low notes make two or three big curves, high notes a dense lace of small cells."},{"name":"Powder","min":0,"max":1,"about":"How much of what is on the plate is lycopodium powder instead of sand: the air the plate pumps carries the powder the other way, into round yellow heaps on the antinodes, as Faraday found."}],"start":[0,2,0,0.06],"measures":{"motion":0.4769,"detail":0.0916,"edges":0.6144,"complexity":1.6152,"coverage":0.9904,"colour":0.0973,"drift":0.0566},"knobResponse":[0.0837,0.1502,0.16,0.131]},{"slug":"chromatography","title":"Chromatography","family":"chemistry","round":20,"note":"실험대 위 유리 수조에 거름종이 띠가 매달려 발끝을 용매에 담그고, 젖은 앞선이 올라가는 동안 연필 출발선의 잉크 점이 색 띠로 갈라져 저마다 다른 빠르기로 올라가요. K1 을 누르면 띠를 들어 올리고 새 띠를 걸어요.","idea":"Strips of filter paper hang from a glass rod in a tall glass tank on a lab bench, the solvent climbs them from a shallow pool, and the ink spot on each pencil start line splits into coloured bands that rise at their own speeds until the strips are lifted out and fresh ones go in.","buttons":"K1 tap lifts the strips out of the tank now and hangs fresh ones.","code":"// ===== Patternflow pattern =====\n// Title:   Chromatography\n// Family:  chemistry\n// Idea:    Strips of filter paper hang from a glass rod in a tall glass tank on a lab bench, the solvent climbs them from a shallow pool, and the ink spot on each pencil start line splits into coloured bands that rise at their own speeds until the strips are lifted out and fresh ones go in.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the paper chromatography of the school chemistry lab\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Inks=0..3, Speed=0.2..3, Strips=3..6, Solvent=-1..1\n//\n// Knob 1: Inks. What is spotted on the strips: felt-tip pens at 0 (black splits into yellow, magenta, cyan and violet, green into yellow and blue, brown into orange and blue-grey), the food dyes of sugar-coated sweets at 1, a leaf extract at 2 (orange carotene running near the front, yellow xanthophyll, blue-green and olive chlorophylls), fountain-pen inks at 3.\n// Knob 2: Speed. How fast the solvent climbs: at 2 the front takes about 15 s from the pool to the top, slowing as it goes as a wick does, and fresh strips go in every 19 s; at 0.2 it creeps.\n// Knob 3: Strips. How many strips hang from the rod, three wide ones at 3 up to six narrow ones at 6.\n// Knob 4: Solvent. How polar the solvent is: near 0 the bands spread out over the whole run; towards -1 most of the dyes stay down by the start line, towards 1 they all crowd up behind the front, and the wetter paper of a watery solvent reads darker.\n// Buttons: K1 tap lifts the strips out of the tank now and hangs fresh ones.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the glass, and the rows things sit on. Strips are drawn in their own\n// rows, so lifting them is one offset.\nconst XL = 3;\nconst XR = 60;\nconst TOP = 2;\nconst ROD = 3;\nconst RIM = 7;\nconst LABEL = 13;\nconst Y0 = 99;\nconst YS = 106;\nconst FOOT = 110;\nconst YB = 113;\nconst BENCH = 117;\n// The front climbs from the solvent surface; it stops HMAX rows above it.\nconst HO = YS - Y0;\nconst HMAX = 84;\nconst T = 15;\nconst EXP = 0.7;\nconst [RUN, LIFT, EMPTY, LOWER] = [0, 1, 2, 3];\nconst DUR = [0, 1.8, 0.9, 1.7];\nconst LIFT_H = 126;\nconst DRY = [238, 236, 226];\nconst WET = [100, 114, 130];\n// Pencil digits, 3x5, one hex digit a row.\nconst DIG = [\"26227\", \"71747\", \"71717\", \"55711\", \"74717\", \"74757\"];\n\nconst { min, max, round, floor, exp, sin, abs, sqrt } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Each ink: the colour of the spot as it goes on, how much of it stays behind\n// at the start line, and its dyes as [r, g, b, affinity, strength]. Affinity\n// is the dye's Rf in a balanced solvent: how far up the wet paper it gets as\n// a share of the solvent front.\nconst SETS = [\n  // Felt-tip pens, run in water.\n  [\n    [[34, 30, 40], 0.28, [[255, 212, 0, 0.88, 1], [255, 40, 160, 0.64, 1], [0, 190, 255, 0.44, 1], [130, 56, 255, 0.22, 1]]],\n    [[24, 120, 52], 0.15, [[220, 240, 0, 0.8, 1], [20, 90, 255, 0.38, 1]]],\n    [[100, 56, 24], 0.32, [[255, 128, 0, 0.74, 1], [104, 134, 196, 0.3, 1]]],\n    [[30, 60, 200], 0.15, [[0, 204, 255, 0.68, 1], [126, 64, 255, 0.3, 1]]],\n    [[100, 30, 130], 0.2, [[255, 40, 176, 0.7, 1], [40, 84, 255, 0.36, 1]]],\n    [[240, 110, 20], 0.12, [[255, 222, 0, 0.82, 1], [255, 64, 112, 0.52, 1]]],\n  ],\n  // The sugar shells of sweets, run in salt water.\n  [\n    [[40, 170, 60], 0.1, [[240, 232, 0, 0.82, 1], [0, 112, 255, 0.62, 1]]],\n    [[220, 30, 50], 0.12, [[255, 30, 72, 0.5, 1], [255, 172, 0, 0.78, 0.9]]],\n    [[130, 40, 140], 0.12, [[255, 40, 92, 0.48, 1], [30, 92, 255, 0.66, 1]]],\n    [[255, 120, 20], 0.1, [[255, 216, 0, 0.84, 1], [255, 52, 60, 0.52, 0.9]]],\n    [[110, 60, 30], 0.18, [[255, 40, 72, 0.46, 0.9], [255, 210, 0, 0.8, 1], [20, 100, 255, 0.64, 0.9]]],\n    [[20, 90, 230], 0.1, [[0, 120, 255, 0.66, 1], [0, 224, 200, 0.9, 0.55]]],\n  ],\n  // Leaves ground in acetone and run in petroleum ether.\n  [\n    [[30, 90, 30], 0.22, [[255, 150, 0, 0.95, 0.8], [240, 222, 30, 0.62, 0.9], [0, 190, 130, 0.42, 1], [130, 200, 20, 0.28, 0.9]]],\n    [[110, 20, 60], 0.3, [[230, 0, 120, 0.06, 1], [240, 222, 30, 0.62, 0.7], [0, 190, 130, 0.42, 0.8]]],\n    [[170, 80, 20], 0.26, [[255, 140, 0, 0.95, 1], [250, 224, 20, 0.62, 1], [160, 84, 30, 0.1, 0.8]]],\n    [[40, 120, 30], 0.18, [[0, 196, 120, 0.42, 1], [140, 210, 20, 0.28, 1], [255, 160, 0, 0.95, 0.6]]],\n    [[90, 30, 50], 0.28, [[200, 0, 140, 0.08, 0.9], [0, 180, 130, 0.42, 0.9], [255, 150, 0, 0.95, 0.6]]],\n    [[36, 100, 36], 0.2, [[255, 150, 0, 0.95, 0.7], [240, 222, 30, 0.62, 0.8], [0, 190, 130, 0.42, 0.9], [130, 200, 20, 0.28, 0.8]]],\n  ],\n  // Fountain-pen inks, run in water.\n  [\n    [[30, 50, 200], 0.15, [[40, 90, 255, 0.55, 1], [150, 60, 255, 0.3, 0.9], [255, 90, 200, 0.82, 0.5]]],\n    [[30, 30, 36], 0.25, [[255, 200, 0, 0.78, 0.9], [0, 180, 255, 0.56, 1], [230, 30, 150, 0.38, 1]]],\n    [[0, 150, 190], 0.1, [[0, 220, 255, 0.62, 1], [180, 255, 40, 0.86, 0.5]]],\n    [[200, 20, 40], 0.12, [[255, 30, 120, 0.72, 1], [255, 120, 0, 0.48, 1]]],\n    [[20, 140, 90], 0.12, [[0, 200, 230, 0.68, 1], [230, 230, 0, 0.44, 1]]],\n    [[110, 30, 200], 0.15, [[255, 40, 200, 0.66, 1], [60, 60, 255, 0.4, 1]]],\n  ],\n];\n\n// How far each kind of ink streaks back to the start line: leaf extracts\n// smear the most.\nconst TAIL = [0.4, 0.32, 0.6, 0.45];\n\nfunction layout(P, n) {\n  P.n = n;\n  P.sw = [12, 10, 8, 7][n - 3];\n  const gap = (XR - XL + 1 - n * P.sw) / (n + 1);\n  for (let j = 0; j \u003c n; j++) P.sx[j] = XL + round(gap * (j + 1) + P.sw * j);\n}\n\n// Fresh strips: each wicks at its own rate, with its own ragged front and\n// spot, and after the first set the inks go on in a new order.\nfunction fresh(P, shuffle) {\n  P.t = 0;\n  P.maxf = 0;\n  for (const S of P.st) {\n    S.f = 0.93 + rnd() * 0.13;\n    P.maxf = max(P.maxf, S.f);\n    S.spot = rnd();\n    S.ph = rnd() * 6.28;\n    let a = 0;\n    for (let i = 0; i \u003c 14; i++) S.rag[i] = a = a * 0.55 + (rnd() - 0.5) * 1.8;\n    for (let i = 0; i \u003c 5; i++) S.jit[i] = (rnd() - 0.5) * 0.05;\n  }\n  if (shuffle)\n    for (let j = 5; j > 0; j--) {\n      const i = floor(rnd() * (j + 1));\n      [P.perm[i], P.perm[j]] = [P.perm[j], P.perm[i]];\n    }\n}\n\n// The room behind, the tank and the bench, painted once. Glass in front of\n// the strips goes in an overlay added last.\nfunction paint(P) {\n  const B = (P.bg = new Float32Array(N * 3));\n  const O = (P.ov = new Float32Array(N * 3));\n  const put = (A, x, y, c) => A.set(c, (y * W + x) * 3);\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      // White wall tiles of the lab, dimmed again through two panes of glass.\n      const grout = x % 9 === 4 || y % 9 === 2;\n      const inTank = x >= 1 && x \u003c= 62 && y >= RIM;\n      let c = grout ? [12, 12, 14] : [27, 27, 30];\n      if (inTank) c = grout ? [8, 12, 13] : [15, 21, 23];\n      put(B, x, y, c);\n    }\n  // The pool: shallow solvent over the glass floor.\n  for (let y = YS; y \u003c YB; y++)\n    for (let x = XL; x \u003c= XR; x++) {\n      const d = (y - YS) / (YB - YS);\n      put(B, x, y, [24 + 6 * d, 42 + 8 * d, 54 + 6 * d]);\n    }\n  for (let x = 1; x \u003c= 62; x++) {\n    put(B, x, YB, [92, 132, 122]);\n    put(B, x, YB + 1, [40, 70, 62]);\n    put(B, x, YB + 2, [34, 60, 53]);\n    put(B, x, YB + 3, [74, 104, 96]);\n  }\n  for (let y = YS; y \u003c YB; y++) for (const x of [1, 2, 61, 62]) put(B, x, y, x === 1 || x === 62 ? [44, 70, 64] : [30, 50, 56]);\n  // The bench: a varnished hardwood top and its front edge.\n  for (let y = BENCH; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 0.86 + 0.14 * sin(x * 0.23 + y * 2.9 + 2.2 * sin(x * 0.07 + y)) + ((x * 7 + y * 13) % 5) * 0.012;\n      let c;\n      if (y === 122) c = [178, 114, 62];\n      else if (y \u003c 122) c = [132 * g, 80 * g, 40 * g];\n      else c = [88 * g, 50 * g, 24 * g];\n      if (y === BENCH && x >= 1 && x \u003c= 62) c = [60, 34, 17];\n      if (y === BENCH + 1 && x >= 2 && x \u003c= 61) c = c.map((v) => v * 0.8);\n      put(B, x, y, c);\n    }\n  // Glass: the front rim, the side walls catching the lab light from the left,\n  // and two faint streaks of reflection on the front pane.\n  for (let x = 1; x \u003c= 62; x++) {\n    put(O, x, RIM, [46, 66, 62]);\n    put(O, x, RIM + 1, [12, 18, 17]);\n  }\n  for (let y = RIM; y \u003c YB; y++) {\n    const fall = 1 - y / 200;\n    const streak = y > 14 && y \u003c 52 ? 1 : 0;\n    put(O, 1, y, [(40 + 44 * streak) * fall, (62 + 60 * streak) * fall, (58 + 56 * streak) * fall]);\n    put(O, 2, y, [12, 18, 17]);\n    put(O, 61, y, [8, 12, 12]);\n    put(O, 62, y, [28, 42, 40]);\n  }\n  for (let y = 16; y \u003c 84; y++) {\n    const x = round(56 - (y - 16) * 0.32);\n    for (let i = 0; i \u003c 3; i++) {\n      O[(y * W + x) * 3 + i] += 9;\n      O[(y * W + x - 3) * 3 + i] += 5;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.buf = new Float32Array(N * 3);\n  P.st = Array.from({ length: 6 }, () => ({ rag: new Float32Array(14), jit: new Float32Array(5) }));\n  P.perm = [0, 1, 2, 3, 4, 5];\n  P.sx = [0, 0, 0, 0, 0, 0];\n  P.h = new Float32Array(6);\n  P.fa = new Float32Array(14);\n  P.dye = new Float32Array(5 * 6);\n  P.mask = new Uint8Array(N);\n  P.drops = [];\n  P.rip = [];\n  paint(P);\n  fresh(P, false);\n  // Open with the front 32 rows up the strips, so the bands have begun to part.\n  P.t = 0.25 * T;\n  Object.assign(P, { n: 0, sw: 12, phase: RUN, pt: 0, dy: 0, clock: 0, set: 0, rate: 1, sol: 0 });\n}\n\n// Fresh strips are dry until their feet are in the pool.\nfunction fronts(P) {\n  for (let j = 0; j \u003c 6; j++) P.h[j] = P.phase === LOWER ? -9 : HMAX * min(1, (P.t * P.st[j].f) / T) ** EXP;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.set = clamp(round(k[0]), 0, 3);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  const n = clamp(round(k[2]), 3, 6);\n  if (n !== P.n) layout(P, n);\n  P.sol = clamp(k[3], -1, 1);\n  P.clock += dt;\n  if (input.btnPressed && input.btnPressed[0] && P.phase === RUN) [P.phase, P.pt] = [LIFT, 0];\n  const r = P.rate;\n  if (P.phase === RUN) {\n    P.t += dt * r;\n    if (P.t * P.maxf >= T) [P.phase, P.pt] = [LIFT, 0];\n  } else {\n    P.pt += dt * max(r, 0.7);\n    const q = min(1, P.pt / DUR[P.phase]);\n    if (P.phase === LIFT) {\n      P.dy = LIFT_H * q * q;\n      // The feet drip as they come out of the pool.\n      const foot = FOOT - P.dy;\n      if (foot \u003c YS && foot > YS - 30)\n        for (let j = 0; j \u003c P.n; j++)\n          if (rnd() \u003c dt * 7) P.drops.push([P.sx[j] + 1 + rnd() * (P.sw - 2), foot, 0]);\n    } else if (P.phase === LOWER) P.dy = LIFT_H * (1 - q) * (1 - q);\n    if (q >= 1) {\n      if (P.phase === EMPTY) fresh(P, true);\n      if (P.phase === LOWER) for (let j = 0; j \u003c P.n; j++) P.rip.push([P.sx[j] + P.sw / 2, 0]);\n      P.phase = (P.phase + 1) % 4;\n      P.pt = 0;\n      if (P.phase === RUN) P.dy = 0;\n    }\n  }\n  fronts(P);\n  for (const d of P.drops) {\n    d[2] += 160 * dt;\n    d[1] += d[2] * dt;\n    if (d[1] >= YS) P.rip.push([d[0], 0]);\n  }\n  P.drops = P.drops.filter((d) => d[1] \u003c YS);\n  for (const p of P.rip) p[1] += dt;\n  P.rip = P.rip.filter((p) => p[1] \u003c 0.9);\n}\n\n// One strip, in its own rows v (screen row y = v - dy).\nfunction strip(P, j, ink, ex) {\n  const B = P.buf;\n  const S = P.st[j];\n  const x0 = P.sx[j];\n  const w = P.sw;\n  const hw = w / 2;\n  const h = P.h[j];\n  const D = max(0, h - HO);\n  const dy = round(P.dy);\n  const wet = WET.map((c) => c * (1 - 0.2 * P.sol));\n  for (let i = 0; i \u003c w; i++) {\n    const e = (i + 0.5 - hw) / hw;\n    // Faster in the middle, and more ragged the further it has come.\n    P.fa[i] = h + (0.5 + 0.04 * h) * (1 - e * e) + S.rag[i] * (0.25 + h / HMAX) + 0.3 * sin(i * 1.3 + P.clock * 0.8 + S.ph);\n  }\n  const dyes = ink[2];\n  const nd = dyes.length;\n  const dv = P.dye;\n  for (let q = 0; q \u003c nd; q++) {\n    const rf = clamp(dyes[q][3] + S.jit[q], 0.02, 0.97) ** ex;\n    const c = rf * D;\n    const sig = 1.2 + 0.065 * c + 0.6 * S.spot;\n    dv.set([rf, 1 / (0.6 * sig), dyes[q][4] * min(1, 2.4 / (1.4 + 0.35 * sig)), min(hw - 0.6, 2.6 + 0.12 * c + S.spot), 1 / (1.7 * sig), sig], q * 6);\n  }\n  const spotC = ink[0];\n  const fade = D \u003c= 0 ? 1 : max(ink[1], exp(-D / 4));\n  const rs = 1.2 + 0.9 * S.spot;\n  const dig = DIG[j];\n  const tail = TAIL[P.set];\n  for (let v = TOP; v \u003c= FOOT; v++) {\n    const y = v - dy;\n    if (y \u003c 0 || y >= YB) continue;\n    const ly = 1 - (0.1 * v) / 110;\n    for (let i = 0; i \u003c w; i++) {\n      const x = x0 + i;\n      const p = y * W + x;\n      const o = p * 3;\n      P.mask[p] = 1;\n      const e = (i + 0.5 - hw) / hw;\n      let L = (1.03 - 0.07 * e - (i === w - 1 ? 0.12 : 0)) * ly;\n      // The fold over the rod and the shade the clip throws.\n      if (v === TOP) L *= 1.06;\n      else if (v \u003c= RIM + 1) L *= 0.9;\n      else if (v === RIM + 2) L *= 0.78;\n      const fa = P.fa[i];\n      const dist = v - (YS - fa);\n      const wt = clamp((dist + 0.5) / 2.5, 0, 1);\n      let r = (DRY[0] + (wet[0] - DRY[0]) * wt) * L;\n      let g = (DRY[1] + (wet[1] - DRY[1]) * wt) * L;\n      let b = (DRY[2] + (wet[2] - DRY[2]) * wt) * L;\n      // The front itself: a thin darker line where the dirt in the solvent\n      // collects.\n      if (dist > -2 && dist \u003c 3.2) {\n        const fl = exp(-(((dist - 0.6) / 0.8) ** 2));\n        r *= 1 - 0.22 * fl;\n        g *= 1 - 0.24 * fl;\n        b *= 1 - 0.34 * fl;\n      }\n      // Wet paper lets the grout of the wall behind show through.\n      if (wt > 0 && (x % 9 === 4 || y % 9 === 2)) {\n        r *= 1 - 0.1 * wt;\n        g *= 1 - 0.1 * wt;\n        b *= 1 - 0.08 * wt;\n      }\n      if (v > Y0) {\n        r *= 1 - 0.08 * wt;\n        g *= 1 - 0.08 * wt;\n        b *= 1 - 0.06 * wt;\n      }\n      // Pencil: the start line and the strip's number.\n      if (v === Y0 && (i + j) % 7 !== 3) [r, g, b] = [r * 0.6 + 24, g * 0.6 + 24, b * 0.6 + 28];\n      const di = i - floor(hw) + 1;\n      if (v >= LABEL && v \u003c LABEL + 5 && di >= 0 && di \u003c 3 && (parseInt(dig[v - LABEL], 16) >> (2 - di)) & 1) [r, g, b] = [r * 0.5 + 20, g * 0.5 + 20, b * 0.5 + 24];\n      // The spot as it went on, dissolving once the solvent reaches it.\n      const ds = abs(v - Y0) \u003c 3 ? clamp(rs + 0.5 - sqrt((i + 0.5 - hw) ** 2 + ((v - Y0) * 1.15) ** 2), 0, 1) * fade * 0.9 : 0;\n      if (ds > 0) {\n        r += (spotC[0] * L - r) * ds;\n        g += (spotC[1] * L - g) * ds;\n        b += (spotC[2] * L - b) * ds;\n      }\n      // The bands: a sharp, bright leading edge and a long soft tail back to\n      // the start line.\n      if (D > 0 && wt > 0) {\n        const u = Y0 - v;\n        const Dx = max(0, fa - HO);\n        const ax = abs(i + 0.5 - hw);\n        for (let q = 0, k = 0; q \u003c nd; q++, k += 6) {\n          const hx = clamp((dv[k + 3] + 0.6 - ax) / 1.2, 0, 1);\n          if (hx \u003c= 0) continue;\n          const c = dv[k] * Dx;\n          const du = u - c;\n          let pr = 0;\n          if (du >= 0) {\n            const z = du * dv[k + 1];\n            if (z \u003c 3) pr = exp(-z * z);\n          } else {\n            const z = du * dv[k + 4];\n            pr = (z > -3 ? exp(-z * z) : 0) + (u > 0 ? tail * sqrt(u / c) : 0);\n          }\n          const A = dv[k + 2] * hx;\n          const d = A * pr * wt;\n          if (d \u003c 0.01) continue;\n          const m = min(0.95, d);\n          const V = dyes[q];\n          const sig = dv[k + 5];\n          const zg = (du - 0.35 * sig) / (0.45 * sig);\n          const gl = zg > -3 && zg \u003c 3 ? 0.3 * A * exp(-zg * zg) : 0;\n          r += (V[0] * 0.92 * L - r) * m + V[0] * gl;\n          g += (V[1] * 0.92 * L - g) * m + V[1] * gl;\n          b += (V[2] * 0.92 * L - b) * m + V[2] * gl;\n        }\n      }\n      // Under the solvent the paper takes the pool's colour.\n      if (y >= YS) [r, g, b] = [r * 0.6, g * 0.76, b * 0.9];\n      B[o] = r;\n      B[o + 1] = g;\n      B[o + 2] = b;\n    }\n  }\n  // A bulldog clip holds the fold to the rod.\n  const cw = min(6, w - 2);\n  const c0 = x0 + round((w - cw) / 2);\n  for (let v = ROD - 1; v \u003c= RIM + 1; v++) {\n    const y = v - dy;\n    if (y \u003c 0 || y >= H) continue;\n    for (let x = c0; x \u003c c0 + cw; x++) {\n      let c;\n      if (v \u003c ROD + 1) c = x === c0 + 1 || x === c0 + cw - 2 ? [176, 180, 190] : null;\n      else if (v === ROD + 1) c = [150, 154, 166];\n      else c = [64 - (v - ROD) * 4, 66 - (v - ROD) * 4, 76 - (v - ROD) * 4];\n      if (c) B.set(c, (y * W + x) * 3);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  B.set(P.bg);\n  P.mask.fill(0);\n  const dy = round(P.dy);\n  const set = SETS[P.set];\n  const ex = 2 ** (-1.6 * P.sol);\n  // The glass rod across the rim, lifted with the strips.\n  const ROW = [[150, 180, 175], [70, 96, 92], [34, 48, 46]];\n  for (let r = 0; r \u003c 3; r++) {\n    const y = ROD + r - dy;\n    if (y \u003c 0) continue;\n    for (let x = 0; x \u003c W; x++) B.set(r === 0 && x > 6 && x \u003c 20 ? [226, 244, 238] : ROW[r], (y * W + x) * 3);\n  }\n  if (P.phase !== EMPTY) for (let j = 0; j \u003c P.n; j++) strip(P, j, set[P.perm[j]], ex);\n  // The solvent surface glints, and rings run out where drops land and feet\n  // go in.\n  const t = P.clock;\n  for (let x = XL; x \u003c= XR; x++) {\n    let s = 0.55 + 0.45 * sin(x * 0.8 + t * 2.1) * sin(x * 0.31 - t * 1.3 + 1);\n    for (const [rx, age] of P.rip) s += 1.4 * (1 - age / 0.9) * exp(-((abs(x - rx) - 4 - 16 * age) ** 2) / 3);\n    const o = (YS * W + x) * 3;\n    const k = P.mask[YS * W + x] ? 0.4 : 1;\n    B[o] += 54 * s * k;\n    B[o + 1] += 80 * s * k;\n    B[o + 2] += 92 * s * k;\n    for (let y = YS + 1; y \u003c YB; y++) {\n      const c = 6 * sin(x * 0.6 + y * 1.7 - t * 1.6) * sin(x * 0.23 + t * 0.9);\n      const q = (y * W + x) * 3;\n      B[q] += c;\n      B[q + 1] += c * 1.4;\n      B[q + 2] += c * 1.6;\n    }\n  }\n  for (const [x, y] of P.drops) {\n    const o = (round(y) * W + round(x)) * 3;\n    if (y >= 0) B.set([170, 200, 220], o);\n  }\n  const O = P.ov;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, B[o] + O[o]), min(255, B[o + 1] + O[o + 1]), min(255, B[o + 2] + O[o + 2]));\n  }\n}\n","layer":{"id":"layer-chromatography","type":"code","name":"chromatography","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Chromatography\n// Family:  chemistry\n// Idea:    Strips of filter paper hang from a glass rod in a tall glass tank on a lab bench, the solvent climbs them from a shallow pool, and the ink spot on each pencil start line splits into coloured bands that rise at their own speeds until the strips are lifted out and fresh ones go in.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the paper chromatography of the school chemistry lab\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Inks=0..3, Speed=0.2..3, Strips=3..6, Solvent=-1..1\n//\n// Knob 1: Inks. What is spotted on the strips: felt-tip pens at 0 (black splits into yellow, magenta, cyan and violet, green into yellow and blue, brown into orange and blue-grey), the food dyes of sugar-coated sweets at 1, a leaf extract at 2 (orange carotene running near the front, yellow xanthophyll, blue-green and olive chlorophylls), fountain-pen inks at 3.\n// Knob 2: Speed. How fast the solvent climbs: at 2 the front takes about 15 s from the pool to the top, slowing as it goes as a wick does, and fresh strips go in every 19 s; at 0.2 it creeps.\n// Knob 3: Strips. How many strips hang from the rod, three wide ones at 3 up to six narrow ones at 6.\n// Knob 4: Solvent. How polar the solvent is: near 0 the bands spread out over the whole run; towards -1 most of the dyes stay down by the start line, towards 1 they all crowd up behind the front, and the wetter paper of a watery solvent reads darker.\n// Buttons: K1 tap lifts the strips out of the tank now and hangs fresh ones.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the glass, and the rows things sit on. Strips are drawn in their own\n// rows, so lifting them is one offset.\nconst XL = 3;\nconst XR = 60;\nconst TOP = 2;\nconst ROD = 3;\nconst RIM = 7;\nconst LABEL = 13;\nconst Y0 = 99;\nconst YS = 106;\nconst FOOT = 110;\nconst YB = 113;\nconst BENCH = 117;\n// The front climbs from the solvent surface; it stops HMAX rows above it.\nconst HO = YS - Y0;\nconst HMAX = 84;\nconst T = 15;\nconst EXP = 0.7;\nconst [RUN, LIFT, EMPTY, LOWER] = [0, 1, 2, 3];\nconst DUR = [0, 1.8, 0.9, 1.7];\nconst LIFT_H = 126;\nconst DRY = [238, 236, 226];\nconst WET = [100, 114, 130];\n// Pencil digits, 3x5, one hex digit a row.\nconst DIG = [\"26227\", \"71747\", \"71717\", \"55711\", \"74717\", \"74757\"];\n\nconst { min, max, round, floor, exp, sin, abs, sqrt } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Each ink: the colour of the spot as it goes on, how much of it stays behind\n// at the start line, and its dyes as [r, g, b, affinity, strength]. Affinity\n// is the dye's Rf in a balanced solvent: how far up the wet paper it gets as\n// a share of the solvent front.\nconst SETS = [\n  // Felt-tip pens, run in water.\n  [\n    [[34, 30, 40], 0.28, [[255, 212, 0, 0.88, 1], [255, 40, 160, 0.64, 1], [0, 190, 255, 0.44, 1], [130, 56, 255, 0.22, 1]]],\n    [[24, 120, 52], 0.15, [[220, 240, 0, 0.8, 1], [20, 90, 255, 0.38, 1]]],\n    [[100, 56, 24], 0.32, [[255, 128, 0, 0.74, 1], [104, 134, 196, 0.3, 1]]],\n    [[30, 60, 200], 0.15, [[0, 204, 255, 0.68, 1], [126, 64, 255, 0.3, 1]]],\n    [[100, 30, 130], 0.2, [[255, 40, 176, 0.7, 1], [40, 84, 255, 0.36, 1]]],\n    [[240, 110, 20], 0.12, [[255, 222, 0, 0.82, 1], [255, 64, 112, 0.52, 1]]],\n  ],\n  // The sugar shells of sweets, run in salt water.\n  [\n    [[40, 170, 60], 0.1, [[240, 232, 0, 0.82, 1], [0, 112, 255, 0.62, 1]]],\n    [[220, 30, 50], 0.12, [[255, 30, 72, 0.5, 1], [255, 172, 0, 0.78, 0.9]]],\n    [[130, 40, 140], 0.12, [[255, 40, 92, 0.48, 1], [30, 92, 255, 0.66, 1]]],\n    [[255, 120, 20], 0.1, [[255, 216, 0, 0.84, 1], [255, 52, 60, 0.52, 0.9]]],\n    [[110, 60, 30], 0.18, [[255, 40, 72, 0.46, 0.9], [255, 210, 0, 0.8, 1], [20, 100, 255, 0.64, 0.9]]],\n    [[20, 90, 230], 0.1, [[0, 120, 255, 0.66, 1], [0, 224, 200, 0.9, 0.55]]],\n  ],\n  // Leaves ground in acetone and run in petroleum ether.\n  [\n    [[30, 90, 30], 0.22, [[255, 150, 0, 0.95, 0.8], [240, 222, 30, 0.62, 0.9], [0, 190, 130, 0.42, 1], [130, 200, 20, 0.28, 0.9]]],\n    [[110, 20, 60], 0.3, [[230, 0, 120, 0.06, 1], [240, 222, 30, 0.62, 0.7], [0, 190, 130, 0.42, 0.8]]],\n    [[170, 80, 20], 0.26, [[255, 140, 0, 0.95, 1], [250, 224, 20, 0.62, 1], [160, 84, 30, 0.1, 0.8]]],\n    [[40, 120, 30], 0.18, [[0, 196, 120, 0.42, 1], [140, 210, 20, 0.28, 1], [255, 160, 0, 0.95, 0.6]]],\n    [[90, 30, 50], 0.28, [[200, 0, 140, 0.08, 0.9], [0, 180, 130, 0.42, 0.9], [255, 150, 0, 0.95, 0.6]]],\n    [[36, 100, 36], 0.2, [[255, 150, 0, 0.95, 0.7], [240, 222, 30, 0.62, 0.8], [0, 190, 130, 0.42, 0.9], [130, 200, 20, 0.28, 0.8]]],\n  ],\n  // Fountain-pen inks, run in water.\n  [\n    [[30, 50, 200], 0.15, [[40, 90, 255, 0.55, 1], [150, 60, 255, 0.3, 0.9], [255, 90, 200, 0.82, 0.5]]],\n    [[30, 30, 36], 0.25, [[255, 200, 0, 0.78, 0.9], [0, 180, 255, 0.56, 1], [230, 30, 150, 0.38, 1]]],\n    [[0, 150, 190], 0.1, [[0, 220, 255, 0.62, 1], [180, 255, 40, 0.86, 0.5]]],\n    [[200, 20, 40], 0.12, [[255, 30, 120, 0.72, 1], [255, 120, 0, 0.48, 1]]],\n    [[20, 140, 90], 0.12, [[0, 200, 230, 0.68, 1], [230, 230, 0, 0.44, 1]]],\n    [[110, 30, 200], 0.15, [[255, 40, 200, 0.66, 1], [60, 60, 255, 0.4, 1]]],\n  ],\n];\n\n// How far each kind of ink streaks back to the start line: leaf extracts\n// smear the most.\nconst TAIL = [0.4, 0.32, 0.6, 0.45];\n\nfunction layout(P, n) {\n  P.n = n;\n  P.sw = [12, 10, 8, 7][n - 3];\n  const gap = (XR - XL + 1 - n * P.sw) / (n + 1);\n  for (let j = 0; j \u003c n; j++) P.sx[j] = XL + round(gap * (j + 1) + P.sw * j);\n}\n\n// Fresh strips: each wicks at its own rate, with its own ragged front and\n// spot, and after the first set the inks go on in a new order.\nfunction fresh(P, shuffle) {\n  P.t = 0;\n  P.maxf = 0;\n  for (const S of P.st) {\n    S.f = 0.93 + rnd() * 0.13;\n    P.maxf = max(P.maxf, S.f);\n    S.spot = rnd();\n    S.ph = rnd() * 6.28;\n    let a = 0;\n    for (let i = 0; i \u003c 14; i++) S.rag[i] = a = a * 0.55 + (rnd() - 0.5) * 1.8;\n    for (let i = 0; i \u003c 5; i++) S.jit[i] = (rnd() - 0.5) * 0.05;\n  }\n  if (shuffle)\n    for (let j = 5; j > 0; j--) {\n      const i = floor(rnd() * (j + 1));\n      [P.perm[i], P.perm[j]] = [P.perm[j], P.perm[i]];\n    }\n}\n\n// The room behind, the tank and the bench, painted once. Glass in front of\n// the strips goes in an overlay added last.\nfunction paint(P) {\n  const B = (P.bg = new Float32Array(N * 3));\n  const O = (P.ov = new Float32Array(N * 3));\n  const put = (A, x, y, c) => A.set(c, (y * W + x) * 3);\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      // White wall tiles of the lab, dimmed again through two panes of glass.\n      const grout = x % 9 === 4 || y % 9 === 2;\n      const inTank = x >= 1 && x \u003c= 62 && y >= RIM;\n      let c = grout ? [12, 12, 14] : [27, 27, 30];\n      if (inTank) c = grout ? [8, 12, 13] : [15, 21, 23];\n      put(B, x, y, c);\n    }\n  // The pool: shallow solvent over the glass floor.\n  for (let y = YS; y \u003c YB; y++)\n    for (let x = XL; x \u003c= XR; x++) {\n      const d = (y - YS) / (YB - YS);\n      put(B, x, y, [24 + 6 * d, 42 + 8 * d, 54 + 6 * d]);\n    }\n  for (let x = 1; x \u003c= 62; x++) {\n    put(B, x, YB, [92, 132, 122]);\n    put(B, x, YB + 1, [40, 70, 62]);\n    put(B, x, YB + 2, [34, 60, 53]);\n    put(B, x, YB + 3, [74, 104, 96]);\n  }\n  for (let y = YS; y \u003c YB; y++) for (const x of [1, 2, 61, 62]) put(B, x, y, x === 1 || x === 62 ? [44, 70, 64] : [30, 50, 56]);\n  // The bench: a varnished hardwood top and its front edge.\n  for (let y = BENCH; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 0.86 + 0.14 * sin(x * 0.23 + y * 2.9 + 2.2 * sin(x * 0.07 + y)) + ((x * 7 + y * 13) % 5) * 0.012;\n      let c;\n      if (y === 122) c = [178, 114, 62];\n      else if (y \u003c 122) c = [132 * g, 80 * g, 40 * g];\n      else c = [88 * g, 50 * g, 24 * g];\n      if (y === BENCH && x >= 1 && x \u003c= 62) c = [60, 34, 17];\n      if (y === BENCH + 1 && x >= 2 && x \u003c= 61) c = c.map((v) => v * 0.8);\n      put(B, x, y, c);\n    }\n  // Glass: the front rim, the side walls catching the lab light from the left,\n  // and two faint streaks of reflection on the front pane.\n  for (let x = 1; x \u003c= 62; x++) {\n    put(O, x, RIM, [46, 66, 62]);\n    put(O, x, RIM + 1, [12, 18, 17]);\n  }\n  for (let y = RIM; y \u003c YB; y++) {\n    const fall = 1 - y / 200;\n    const streak = y > 14 && y \u003c 52 ? 1 : 0;\n    put(O, 1, y, [(40 + 44 * streak) * fall, (62 + 60 * streak) * fall, (58 + 56 * streak) * fall]);\n    put(O, 2, y, [12, 18, 17]);\n    put(O, 61, y, [8, 12, 12]);\n    put(O, 62, y, [28, 42, 40]);\n  }\n  for (let y = 16; y \u003c 84; y++) {\n    const x = round(56 - (y - 16) * 0.32);\n    for (let i = 0; i \u003c 3; i++) {\n      O[(y * W + x) * 3 + i] += 9;\n      O[(y * W + x - 3) * 3 + i] += 5;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.buf = new Float32Array(N * 3);\n  P.st = Array.from({ length: 6 }, () => ({ rag: new Float32Array(14), jit: new Float32Array(5) }));\n  P.perm = [0, 1, 2, 3, 4, 5];\n  P.sx = [0, 0, 0, 0, 0, 0];\n  P.h = new Float32Array(6);\n  P.fa = new Float32Array(14);\n  P.dye = new Float32Array(5 * 6);\n  P.mask = new Uint8Array(N);\n  P.drops = [];\n  P.rip = [];\n  paint(P);\n  fresh(P, false);\n  // Open with the front 32 rows up the strips, so the bands have begun to part.\n  P.t = 0.25 * T;\n  Object.assign(P, { n: 0, sw: 12, phase: RUN, pt: 0, dy: 0, clock: 0, set: 0, rate: 1, sol: 0 });\n}\n\n// Fresh strips are dry until their feet are in the pool.\nfunction fronts(P) {\n  for (let j = 0; j \u003c 6; j++) P.h[j] = P.phase === LOWER ? -9 : HMAX * min(1, (P.t * P.st[j].f) / T) ** EXP;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.set = clamp(round(k[0]), 0, 3);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  const n = clamp(round(k[2]), 3, 6);\n  if (n !== P.n) layout(P, n);\n  P.sol = clamp(k[3], -1, 1);\n  P.clock += dt;\n  if (input.btnPressed && input.btnPressed[0] && P.phase === RUN) [P.phase, P.pt] = [LIFT, 0];\n  const r = P.rate;\n  if (P.phase === RUN) {\n    P.t += dt * r;\n    if (P.t * P.maxf >= T) [P.phase, P.pt] = [LIFT, 0];\n  } else {\n    P.pt += dt * max(r, 0.7);\n    const q = min(1, P.pt / DUR[P.phase]);\n    if (P.phase === LIFT) {\n      P.dy = LIFT_H * q * q;\n      // The feet drip as they come out of the pool.\n      const foot = FOOT - P.dy;\n      if (foot \u003c YS && foot > YS - 30)\n        for (let j = 0; j \u003c P.n; j++)\n          if (rnd() \u003c dt * 7) P.drops.push([P.sx[j] + 1 + rnd() * (P.sw - 2), foot, 0]);\n    } else if (P.phase === LOWER) P.dy = LIFT_H * (1 - q) * (1 - q);\n    if (q >= 1) {\n      if (P.phase === EMPTY) fresh(P, true);\n      if (P.phase === LOWER) for (let j = 0; j \u003c P.n; j++) P.rip.push([P.sx[j] + P.sw / 2, 0]);\n      P.phase = (P.phase + 1) % 4;\n      P.pt = 0;\n      if (P.phase === RUN) P.dy = 0;\n    }\n  }\n  fronts(P);\n  for (const d of P.drops) {\n    d[2] += 160 * dt;\n    d[1] += d[2] * dt;\n    if (d[1] >= YS) P.rip.push([d[0], 0]);\n  }\n  P.drops = P.drops.filter((d) => d[1] \u003c YS);\n  for (const p of P.rip) p[1] += dt;\n  P.rip = P.rip.filter((p) => p[1] \u003c 0.9);\n}\n\n// One strip, in its own rows v (screen row y = v - dy).\nfunction strip(P, j, ink, ex) {\n  const B = P.buf;\n  const S = P.st[j];\n  const x0 = P.sx[j];\n  const w = P.sw;\n  const hw = w / 2;\n  const h = P.h[j];\n  const D = max(0, h - HO);\n  const dy = round(P.dy);\n  const wet = WET.map((c) => c * (1 - 0.2 * P.sol));\n  for (let i = 0; i \u003c w; i++) {\n    const e = (i + 0.5 - hw) / hw;\n    // Faster in the middle, and more ragged the further it has come.\n    P.fa[i] = h + (0.5 + 0.04 * h) * (1 - e * e) + S.rag[i] * (0.25 + h / HMAX) + 0.3 * sin(i * 1.3 + P.clock * 0.8 + S.ph);\n  }\n  const dyes = ink[2];\n  const nd = dyes.length;\n  const dv = P.dye;\n  for (let q = 0; q \u003c nd; q++) {\n    const rf = clamp(dyes[q][3] + S.jit[q], 0.02, 0.97) ** ex;\n    const c = rf * D;\n    const sig = 1.2 + 0.065 * c + 0.6 * S.spot;\n    dv.set([rf, 1 / (0.6 * sig), dyes[q][4] * min(1, 2.4 / (1.4 + 0.35 * sig)), min(hw - 0.6, 2.6 + 0.12 * c + S.spot), 1 / (1.7 * sig), sig], q * 6);\n  }\n  const spotC = ink[0];\n  const fade = D \u003c= 0 ? 1 : max(ink[1], exp(-D / 4));\n  const rs = 1.2 + 0.9 * S.spot;\n  const dig = DIG[j];\n  const tail = TAIL[P.set];\n  for (let v = TOP; v \u003c= FOOT; v++) {\n    const y = v - dy;\n    if (y \u003c 0 || y >= YB) continue;\n    const ly = 1 - (0.1 * v) / 110;\n    for (let i = 0; i \u003c w; i++) {\n      const x = x0 + i;\n      const p = y * W + x;\n      const o = p * 3;\n      P.mask[p] = 1;\n      const e = (i + 0.5 - hw) / hw;\n      let L = (1.03 - 0.07 * e - (i === w - 1 ? 0.12 : 0)) * ly;\n      // The fold over the rod and the shade the clip throws.\n      if (v === TOP) L *= 1.06;\n      else if (v \u003c= RIM + 1) L *= 0.9;\n      else if (v === RIM + 2) L *= 0.78;\n      const fa = P.fa[i];\n      const dist = v - (YS - fa);\n      const wt = clamp((dist + 0.5) / 2.5, 0, 1);\n      let r = (DRY[0] + (wet[0] - DRY[0]) * wt) * L;\n      let g = (DRY[1] + (wet[1] - DRY[1]) * wt) * L;\n      let b = (DRY[2] + (wet[2] - DRY[2]) * wt) * L;\n      // The front itself: a thin darker line where the dirt in the solvent\n      // collects.\n      if (dist > -2 && dist \u003c 3.2) {\n        const fl = exp(-(((dist - 0.6) / 0.8) ** 2));\n        r *= 1 - 0.22 * fl;\n        g *= 1 - 0.24 * fl;\n        b *= 1 - 0.34 * fl;\n      }\n      // Wet paper lets the grout of the wall behind show through.\n      if (wt > 0 && (x % 9 === 4 || y % 9 === 2)) {\n        r *= 1 - 0.1 * wt;\n        g *= 1 - 0.1 * wt;\n        b *= 1 - 0.08 * wt;\n      }\n      if (v > Y0) {\n        r *= 1 - 0.08 * wt;\n        g *= 1 - 0.08 * wt;\n        b *= 1 - 0.06 * wt;\n      }\n      // Pencil: the start line and the strip's number.\n      if (v === Y0 && (i + j) % 7 !== 3) [r, g, b] = [r * 0.6 + 24, g * 0.6 + 24, b * 0.6 + 28];\n      const di = i - floor(hw) + 1;\n      if (v >= LABEL && v \u003c LABEL + 5 && di >= 0 && di \u003c 3 && (parseInt(dig[v - LABEL], 16) >> (2 - di)) & 1) [r, g, b] = [r * 0.5 + 20, g * 0.5 + 20, b * 0.5 + 24];\n      // The spot as it went on, dissolving once the solvent reaches it.\n      const ds = abs(v - Y0) \u003c 3 ? clamp(rs + 0.5 - sqrt((i + 0.5 - hw) ** 2 + ((v - Y0) * 1.15) ** 2), 0, 1) * fade * 0.9 : 0;\n      if (ds > 0) {\n        r += (spotC[0] * L - r) * ds;\n        g += (spotC[1] * L - g) * ds;\n        b += (spotC[2] * L - b) * ds;\n      }\n      // The bands: a sharp, bright leading edge and a long soft tail back to\n      // the start line.\n      if (D > 0 && wt > 0) {\n        const u = Y0 - v;\n        const Dx = max(0, fa - HO);\n        const ax = abs(i + 0.5 - hw);\n        for (let q = 0, k = 0; q \u003c nd; q++, k += 6) {\n          const hx = clamp((dv[k + 3] + 0.6 - ax) / 1.2, 0, 1);\n          if (hx \u003c= 0) continue;\n          const c = dv[k] * Dx;\n          const du = u - c;\n          let pr = 0;\n          if (du >= 0) {\n            const z = du * dv[k + 1];\n            if (z \u003c 3) pr = exp(-z * z);\n          } else {\n            const z = du * dv[k + 4];\n            pr = (z > -3 ? exp(-z * z) : 0) + (u > 0 ? tail * sqrt(u / c) : 0);\n          }\n          const A = dv[k + 2] * hx;\n          const d = A * pr * wt;\n          if (d \u003c 0.01) continue;\n          const m = min(0.95, d);\n          const V = dyes[q];\n          const sig = dv[k + 5];\n          const zg = (du - 0.35 * sig) / (0.45 * sig);\n          const gl = zg > -3 && zg \u003c 3 ? 0.3 * A * exp(-zg * zg) : 0;\n          r += (V[0] * 0.92 * L - r) * m + V[0] * gl;\n          g += (V[1] * 0.92 * L - g) * m + V[1] * gl;\n          b += (V[2] * 0.92 * L - b) * m + V[2] * gl;\n        }\n      }\n      // Under the solvent the paper takes the pool's colour.\n      if (y >= YS) [r, g, b] = [r * 0.6, g * 0.76, b * 0.9];\n      B[o] = r;\n      B[o + 1] = g;\n      B[o + 2] = b;\n    }\n  }\n  // A bulldog clip holds the fold to the rod.\n  const cw = min(6, w - 2);\n  const c0 = x0 + round((w - cw) / 2);\n  for (let v = ROD - 1; v \u003c= RIM + 1; v++) {\n    const y = v - dy;\n    if (y \u003c 0 || y >= H) continue;\n    for (let x = c0; x \u003c c0 + cw; x++) {\n      let c;\n      if (v \u003c ROD + 1) c = x === c0 + 1 || x === c0 + cw - 2 ? [176, 180, 190] : null;\n      else if (v === ROD + 1) c = [150, 154, 166];\n      else c = [64 - (v - ROD) * 4, 66 - (v - ROD) * 4, 76 - (v - ROD) * 4];\n      if (c) B.set(c, (y * W + x) * 3);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  B.set(P.bg);\n  P.mask.fill(0);\n  const dy = round(P.dy);\n  const set = SETS[P.set];\n  const ex = 2 ** (-1.6 * P.sol);\n  // The glass rod across the rim, lifted with the strips.\n  const ROW = [[150, 180, 175], [70, 96, 92], [34, 48, 46]];\n  for (let r = 0; r \u003c 3; r++) {\n    const y = ROD + r - dy;\n    if (y \u003c 0) continue;\n    for (let x = 0; x \u003c W; x++) B.set(r === 0 && x > 6 && x \u003c 20 ? [226, 244, 238] : ROW[r], (y * W + x) * 3);\n  }\n  if (P.phase !== EMPTY) for (let j = 0; j \u003c P.n; j++) strip(P, j, set[P.perm[j]], ex);\n  // The solvent surface glints, and rings run out where drops land and feet\n  // go in.\n  const t = P.clock;\n  for (let x = XL; x \u003c= XR; x++) {\n    let s = 0.55 + 0.45 * sin(x * 0.8 + t * 2.1) * sin(x * 0.31 - t * 1.3 + 1);\n    for (const [rx, age] of P.rip) s += 1.4 * (1 - age / 0.9) * exp(-((abs(x - rx) - 4 - 16 * age) ** 2) / 3);\n    const o = (YS * W + x) * 3;\n    const k = P.mask[YS * W + x] ? 0.4 : 1;\n    B[o] += 54 * s * k;\n    B[o + 1] += 80 * s * k;\n    B[o + 2] += 92 * s * k;\n    for (let y = YS + 1; y \u003c YB; y++) {\n      const c = 6 * sin(x * 0.6 + y * 1.7 - t * 1.6) * sin(x * 0.23 + t * 0.9);\n      const q = (y * W + x) * 3;\n      B[q] += c;\n      B[q + 1] += c * 1.4;\n      B[q + 2] += c * 1.6;\n    }\n  }\n  for (const [x, y] of P.drops) {\n    const o = (round(y) * W + round(x)) * 3;\n    if (y >= 0) B.set([170, 200, 220], o);\n  }\n  const O = P.ov;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, B[o] + O[o]), min(255, B[o + 1] + O[o + 1]), min(255, B[o + 2] + O[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Inks=0..3, Speed=0.2..3, Strips=3..6, Solvent=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Inks","min":0,"max":3,"about":"What is spotted on the strips: felt-tip pens at 0 (black splits into yellow, magenta, cyan and violet, green into yellow and blue, brown into orange and blue-grey), the food dyes of sugar-coated sweets at 1, a leaf extract at 2 (orange carotene running near the front, yellow xanthophyll, blue-green and olive chlorophylls), fountain-pen inks at 3."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the solvent climbs: at 2 the front takes about 15 s from the pool to the top, slowing as it goes as a wick does, and fresh strips go in every 19 s; at 0.2 it creeps."},{"name":"Strips","min":3,"max":6,"about":"How many strips hang from the rod, three wide ones at 3 up to six narrow ones at 6."},{"name":"Solvent","min":-1,"max":1,"about":"How polar the solvent is: near 0 the bands spread out over the whole run; towards -1 most of the dyes stay down by the start line, towards 1 they all crowd up behind the front, and the wetter paper of a watery solvent reads darker."}],"start":[0,2,3,0.06],"measures":{"motion":0.0352,"detail":0.0646,"edges":0.3051,"complexity":1.2207,"coverage":0.7347,"colour":0.2232,"drift":0.0399},"knobResponse":[0.0454,0.0548,0.2236,0.048]},{"slug":"circuit-board","title":"Circuit Board","family":"circuit","round":17,"note":"회로 기판이 패널을 다 채우고, Lee 의 미로 라우터가 프로세서와 메모리 둘, 플래시, 크리스털, 금도금 단자 사이에 구리 선 47개를 곧게, 또 45도로 깔아요. 버스에는 펄스 열이 나란히 달리고 바쁜 선은 신호 색으로 데워지며, K1 을 누르면 기판이 꺼졌다가 부팅해요.","idea":"A circuit board fills the panel with copper a maze router lays in setup between a processor, two memory chips, a flash chip, a crystal and the gold fingers of an edge connector, and signals run along the traces as bright pulses while four status LEDs answer the traffic.","buttons":"K1 tap resets the board: it goes dark, the power LED comes on, the crystal starts, the processor reads the flash, walks a one across both memory buses and brings the link up.","code":"// ===== Patternflow pattern =====\n// Title:   Circuit Board\n// Family:  circuit\n// Idea:    A circuit board fills the panel with copper a maze router lays in setup between a processor, two memory chips, a flash chip, a crystal and the gold fingers of an edge connector, and signals run along the traces as bright pulses while four status LEDs answer the traffic.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: C. Y. Lee's maze router (\"An algorithm for path connections and its applications\", 1961), here with 45-degree moves\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Mask=0..1, Clock=0.5..4, Traffic=0..1, Glow=0..1\n//\n// Knob 1: Mask. The colour of the solder mask: green at 0, then blue, red, matte black and purple at 1.\n// Knob 2: Clock. How fast the board runs: at 2 the crystal ticks six times a second and a pulse covers 32 LEDs a second, at 0.5 a quarter of that, at 4 twice.\n// Knob 3: Traffic. At 0 the processor works through its program in spells of 2.4 s (loading from the flash, computing in memory, input and output, a rest, a copy out to the connector); turned up, the quiet buses fill until at 1 every bus carries trains back to back.\n// Knob 4: Glow. How far the light of a pulse spreads through the mask, and how long a busy trace stays warm after it, from one second to three.\n// Buttons: K1 tap resets the board: it goes dark, the power LED comes on, the crystal starts, the processor reads the flash, walks a one across both memory buses and brings the link up.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// What each LED of the bare board is: mask (0) over bare board, over a trace\n// or over the pour, or a part coloured from FIX.\nconst TRACE = 1;\nconst POUR = 2;\nconst PAD = 3;\nconst CHIP = 4;\nconst SILK = 5;\nconst HOLE = 6;\nconst GOLD = 7;\nconst RES = 8;\nconst LENS = 9;\nconst CAN = 10;\nconst BASE = 11;\nconst VIA = 12;\nconst ETCH = 13;\nconst FIX = [[196, 196, 186], [30, 30, 34], [222, 222, 208], [0, 0, 0], [228, 172, 52], [24, 24, 24], [120, 122, 112], [212, 214, 220], [36, 36, 40], [170, 170, 152], [92, 92, 98]];\n// Solder mask over bare board and over copper, for the five stops of K1.\nconst MASKS = [\n  [[10, 70, 34], [44, 124, 52]],\n  [[8, 32, 96], [38, 84, 170]],\n  [[96, 12, 14], [164, 50, 40]],\n  [[16, 17, 19], [46, 50, 52]],\n  [[56, 16, 86], [112, 58, 154]],\n];\n// Signal light: data, clock, connector, flash, LED drive.\nconst SIG = [[255, 196, 80], [90, 225, 255], [255, 110, 215], [150, 255, 110], [255, 255, 240]];\n// Status LEDs (power, heartbeat, connector, memory): lens top and colour lit.\nconst LENS_AT = [[39, 24], [31, 30], [33, 30], [35, 30]];\nconst LED_ON = [[60, 255, 90], [255, 50, 40], [255, 176, 30], [70, 130, 255]];\n// The program, as spells of 2.4 s at Clock 2 (load, compute, input and output,\n// rest, copy), each the load on buses A and B (memory), C (connector), L and\n// R (memory to connector) and S (flash).\nconst WORK = [[1.5, 0.3, 0.2, 0.1, 0.1, 3], [2.6, 2.6, 0.2, 0.1, 0.1, 0.2], [0.3, 0.3, 2.6, 1.8, 1.8, 0.2], [0.15, 0.15, 0.2, 0.1, 0.1, 0.2], [2, 2, 2.4, 2.5, 2.5, 0.2]];\nconst COPY = 4;\n// The router's moves: straight steps cost 5, diagonal ones 7, so a route is\n// straight runs joined by 45-degree runs.\nconst DX = [1, 0, -1, 0, 1, -1, -1, 1];\nconst DY = [0, 1, 0, -1, 1, 1, -1, -1];\n// Bits on a bus are 4 LEDs apart; a pulse's tail is 2 LEDs.\nconst GAP = 4;\nconst TAIL = 2;\n// A 3x5 font for the markings on the chips.\nconst FONT = { U: 0x5b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9 };\n\nfunction inside(x, y) {\n  return x >= 0 && y >= 0 && x \u003c W && y \u003c H;\n}\n\nfunction put(P, x, y, m, s) {\n  if (!inside(x, y)) return;\n  P.mat[y * W + x] = m;\n  P.shade[y * W + x] = s || 1;\n}\n\n// Copper keeps every other net one LED away: blk holds the net that may pass\n// each LED, 0 for any and -1 for none.\nfunction claim(P, x, y, net) {\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      if (!inside(x + i, y + j)) continue;\n      const k = (y + j) * W + x + i;\n      if (!P.blk[k]) P.blk[k] = net;\n      else if (P.blk[k] !== net) P.blk[k] = -1;\n    }\n}\n\nfunction copper(P, x, y, net) {\n  claim(P, x, y, net);\n  P.blk[y * W + x] = net;\n}\n\nfunction block(P, x0, y0, x1, y1) {\n  for (let y = y0 - 1; y \u003c= y1 + 1; y++) for (let x = x0 - 1; x \u003c= x1 + 1; x++) if (inside(x, y)) P.blk[y * W + x] = -1;\n}\n\nfunction pad(P, x, y, net, s) {\n  put(P, x, y, PAD, s);\n  copper(P, x, y, net);\n}\n\nfunction reserve(P, x, y, net) {\n  const v = P.blk[y * W + x];\n  if (!v || v === net) copper(P, x, y, net);\n}\n\n// A gull-wing lead. The LED in front of its tip is kept for its own net and\n// the others round the tip are shut, so the route leaves straight out.\nfunction lead(P, x, y, dx, dy, net) {\n  for (let i = 0; i \u003c 3; i++) pad(P, x + dx * i, y + dy * i, net, i === 2 ? 0.7 : 1);\n  reserve(P, x - dx, y - dy, net);\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      const k = (y + j) * W + x + i;\n      if ((i || j) && (i !== -dx || j !== -dy) && (i !== dx || j !== dy) && inside(x + i, y + j) && (!P.blk[k] || P.blk[k] === net)) P.blk[k] = -1;\n    }\n  return [x, y];\n}\n\nfunction chip(P, x0, y0, x1, y1) {\n  block(P, x0, y0, x1, y1);\n  for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) put(P, x, y, CHIP, y === y0 || x === x0 ? 1.45 : y === y1 || x === x1 ? 0.7 : 1);\n}\n\nfunction text(P, s, x, y) {\n  for (const ch of s) {\n    for (let b = 0; b \u003c 15; b++) if (FONT[ch] & (1 \u003c\u003c (14 - b))) put(P, x + (b % 3), y + Math.floor(b / 3), ETCH);\n    x += 4;\n  }\n}\n\nfunction via(P, x, y, net) {\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      put(P, x + i, y + j, i || j ? VIA : HOLE, i && j ? 0.8 : 1);\n      copper(P, x + i, y + j, net);\n    }\n}\n\n// A resistor and a LED in a line, from the resistor's far pad at y0 to the\n// LED's, which is ground, eight rows on in direction dy.\nfunction ledPair(P, x, y0, dy, net, inner) {\n  pad(P, x, y0, net);\n  for (let i = 3; i \u003c= 5; i++) pad(P, x, y0 + dy * i, inner);\n  put(P, x, y0 + dy * 4, TRACE);\n  pad(P, x, y0 + dy * 8, 1);\n  for (const [i, m] of [[1, RES], [2, RES], [6, LENS], [7, LENS]]) {\n    put(P, x, y0 + dy * i, m);\n    P.blk[(y0 + dy * i) * W + x] = -1;\n  }\n}\n\n// Lee's wave: every LED the net may cross gets its distance from the start,\n// cheapest first, until the wave reaches the end; the route is read back\n// from the end, keeping its direction where it can. With `diag` its first\n// turn is a diagonal, so a fan to the wider fingers jogs where there is room.\nfunction route(P, net, a, b, diag) {\n  const dist = P.dist;\n  const blk = P.blk;\n  const ring = P.ring;\n  dist.fill(1e9);\n  for (const q of ring) q.length = 0;\n  const s = a[1] * W + a[0];\n  const t = b[1] * W + b[0];\n  dist[s] = 0;\n  ring[0].push(s);\n  let pending = 1;\n  for (let d = 0; pending > 0 && d \u003c= dist[t]; d++) {\n    const q = ring[d & 7];\n    while (q.length) {\n      const u = q.pop();\n      pending--;\n      if (dist[u] !== d) continue;\n      const x = u % W;\n      const y = (u - x) / W;\n      for (let k = 0; k \u003c 8; k++) {\n        const v = u + DY[k] * W + DX[k];\n        if (!inside(x + DX[k], y + DY[k]) || (blk[v] && blk[v] !== net)) continue;\n        const nd = d + (k \u003c 4 ? 5 : 7);\n        if (nd \u003c dist[v]) {\n          dist[v] = nd;\n          ring[nd & 7].push(v);\n          pending++;\n        }\n      }\n    }\n  }\n  if (dist[t] >= 1e9) return null;\n  const path = [t];\n  let last = -1;\n  for (let u = t; u !== s; ) {\n    const x = u % W;\n    const y = (u - x) / W;\n    let best = -1;\n    let bk = -1;\n    let score = -1;\n    for (let k = 0; k \u003c 8; k++) {\n      const p = u - DY[k] * W - DX[k];\n      if (!inside(x - DX[k], y - DY[k]) || dist[p] + (k \u003c 4 ? 5 : 7) !== dist[u]) continue;\n      const sc = (k === last ? 4 : 0) + (k \u003c 4 ? 1 : 0) + (diag && k >= 4 ? 6 : 0);\n      if (sc > score) {\n        score = sc;\n        best = p;\n        bk = k;\n      }\n    }\n    path.push(best);\n    u = best;\n    last = bk;\n    if (bk >= 4) diag = false;\n  }\n  for (const c of path) {\n    copper(P, c % W, Math.floor(c / W), net);\n    if (!P.mat[c]) P.mat[c] = TRACE;\n  }\n  return Int16Array.from(path.reverse());\n}\n\nfunction buildBoard(P) {\n  const jobs = [];\n  let id = 2;\n  const net = (cls, grp, line) => ({ id: id++, cls, grp, line });\n  // Short nets are routed first, then fans and buses, each line in the order\n  // that lets the next pass outside it.\n  const link = (n, a, b, o, diag) => jobs.push({ n, a, b, o: o || 9, diag });\n  const gnd = (a, x, y) => {\n    via(P, x, y, 1);\n    link({ id: 1, cls: -1 }, a, [x, y], 1);\n  };\n  // Mounting holes, plated, in the two top corners.\n  for (const cx of [4, 59]) {\n    block(P, cx - 3, 1, cx + 3, 7);\n    for (let y = 0; y \u003c= 8; y++)\n      for (let x = cx - 4; x \u003c= cx + 4; x++) {\n        const r = Math.hypot(x - cx, y - 4);\n        if (r \u003c 1.9) put(P, x, y, HOLE);\n        else if (r \u003c 3.4) put(P, x, y, PAD, 0.9 + 0.25 * Math.cos(Math.atan2(y - 4, x - cx) + 2.3));\n      }\n  }\n  // The processor, a QFP with nine leads a side, and two memory chips under it.\n  chip(P, 22, 44, 41, 63);\n  put(P, 24, 46, ETCH);\n  text(P, \"U1\", 28, 51);\n  chip(P, 1, 84, 20, 93);\n  chip(P, 43, 84, 62, 93);\n  text(P, \"U2\", 7, 87);\n  text(P, \"U3\", 49, 87);\n  // Memory buses: nine lines from each side of the processor down to the top\n  // leads of a memory chip, the innermost being that chip's clock.\n  for (const side of [0, 1])\n    for (let j = 8; j >= 0; j--) {\n      const n = net(j === 8 ? 1 : 0, side ? \"B\" : \"A\", j);\n      const a = side ? lead(P, 44, 45 + 2 * j, -1, 0, n.id) : lead(P, 19, 45 + 2 * j, 1, 0, n.id);\n      link(n, a, lead(P, side ? 60 - 2 * j : 3 + 2 * j, 81, 0, 1, n.id));\n    }\n  // Nineteen gold fingers, two LEDs wide, the outer two ground.\n  const finger = (i, nid) => {\n    const x0 = 4 + 3 * i;\n    for (let y = 116; y \u003c H; y++)\n      for (let x = x0; x \u003c= x0 + 1; x++) {\n        put(P, x, y, GOLD, y === 116 ? 0.75 : y === H - 1 ? 0.6 : x === x0 ? 1.1 : 0.9);\n        copper(P, x, y, nid);\n      }\n    return x0;\n  };\n  finger(0, 1);\n  finger(18, 1);\n  // Nine lines from the bottom of the processor fan out to the middle fingers.\n  for (let j = 0; j \u003c 9; j++) {\n    const n = net(2, \"C\", j);\n    const f = finger(5 + j, n.id);\n    reserve(P, f, 115, n.id);\n    link(n, lead(P, 23 + 2 * j, 66, 0, -1, n.id), [f, 116], 9, true);\n  }\n  // Four lines from each memory chip's bottom leads to the outer fingers.\n  for (const side of [0, 1])\n    for (let j = 0; j \u003c 9; j++) {\n      const x = side ? 60 - 2 * j : 3 + 2 * j;\n      if (j >= 1 && j \u003c= 4) {\n        const n = net(2, side ? \"R\" : \"L\", j - 1);\n        const a = lead(P, x, 96, 0, -1, n.id);\n        const f = finger(side ? 18 - j : j, n.id) + side;\n        reserve(P, f, 115, n.id);\n        link(n, a, [f, 116], 9, true);\n      } else if (j === 0) gnd(lead(P, x, 96, 0, -1, 1), side ? 61 : 2, 100);\n      else lead(P, x, 96, 0, -1, id++);\n    }\n  // The flash chip on its side at the top left; its four right leads take\n  // the processor's first four top leads, the lowest to the nearest.\n  chip(P, 4, 24, 11, 33);\n  text(P, \"U4\", 5, 27);\n  for (let j = 0; j \u003c 4; j++) {\n    const n = net(3, \"S\", j);\n    link(n, lead(P, 23 + 2 * j, 41, 0, 1, n.id), lead(P, 14, 32 - 2 * j, -1, 0, n.id), 4);\n    lead(P, 1, 32 - 2 * j, 1, 0, id++);\n  }\n  // Three status LEDs over the next three top leads; each top pad meets the pour.\n  P.ledNet = [{ id: 0, cls: 4, grp: \"D\", line: 0 }];\n  for (let k = 1; k \u003c 4; k++) {\n    const x = 29 + 2 * k;\n    const n = net(4, \"D\", k);\n    P.ledNet.push(n);\n    ledPair(P, x, 37, -1, n.id, id++);\n    link(n, lead(P, x, 41, 0, 1, n.id), [x, 37], 3);\n  }\n  // The crystal, a metal can on two pads, on the last two top leads.\n  block(P, 45, 34, 54, 38);\n  for (let y = 34; y \u003c= 38; y++)\n    for (let x = 45; x \u003c= 54; x++) if ((y - 34) % 4 || (x - 45) % 9) put(P, x, y, CAN, y === 35 ? 1.2 : y === 38 ? 0.62 : 0.9);\n  for (let j = 0; j \u003c 2; j++) {\n    const n = net(1, \"X\", j);\n    for (let y = 35; y \u003c= 37; y++) for (let x = 42 + 14 * j; x \u003c= 43 + 14 * j; x++) pad(P, x, y, n.id);\n    link(n, lead(P, 37 + 2 * j, 41, 0, 1, n.id), j ? [56, 37] : [42, 36], 2);\n  }\n  // The regulator, a SOT-223 under its tab, between two electrolytic capacitors.\n  chip(P, 27, 8, 36, 12);\n  for (let y = 3; y \u003c= 6; y++) for (let x = 28; x \u003c= 35; x++) pad(P, x, y, 1, y === 3 ? 0.8 : 1);\n  const vin = id++;\n  const vout = id++;\n  for (let k = 0; k \u003c 3; k++)\n    for (let y = 14; y \u003c= 16; y++) for (let i = 0; i \u003c 2; i++) pad(P, 28 + 3 * k + i, y, [vin, 1, vout][k], y === 14 ? 0.7 : 1);\n  for (const [cx, side] of [[14, 0], [49, 1]]) {\n    block(P, cx - 5, 6, cx + 5, 16);\n    for (let y = 6; y \u003c= 16; y++)\n      for (let x = cx - 5; x \u003c= cx + 5; x++) {\n        const r = Math.hypot(x - cx, y - 11);\n        if (Math.abs(x - cx) + Math.abs(y - 11) > 8) continue;\n        if (r \u003c 4.3) put(P, x, y, CAN, 1.05 - 0.05 * r + 0.12 * Math.cos(Math.atan2(y - 11, x - cx) + 2.3) - (x === cx || y === 11 ? 0.28 : 0));\n        else put(P, x, y, BASE);\n      }\n    // Its tabs: the plus side to the regulator, the other to ground.\n    for (let y = 10; y \u003c= 12; y++)\n      for (let i = 0; i \u003c 2; i++) {\n        pad(P, cx - 7 + i, y, side ? vout : 1);\n        pad(P, cx + 6 + i, y, side ? 1 : vin);\n      }\n  }\n  // The power LED hangs under its resistor beside the regulator.\n  P.ledNet[0].id = vout;\n  ledPair(P, 39, 18, 1, vout, id++);\n  link({ id: vin, cls: 4 }, [28, 16], [21, 12], 2);\n  link({ id: vout, cls: 4 }, [35, 16], [42, 12], 2);\n  link(P.ledNet[0], [35, 16], [39, 18], 3);\n  // Route in that order; a net the router cannot reach is left off the board.\n  jobs.sort((a, b) => a.o - b.o);\n  P.routes = [];\n  P.group = {};\n  let off = 0;\n  for (const { n, a, b, diag } of jobs) {\n    const cells = route(P, n.id, a, b, diag);\n    if (!cells || n.cls \u003c 0) continue;\n    const r = { cells, n: cells.length, o: off, cls: n.cls, grp: n.grp, line: n.line };\n    off += r.n;\n    P.routes.push(r);\n    if (n.grp) (P.group[n.grp] = P.group[n.grp] || [])[n.line] = r;\n  }\n  P.heat = new Float32Array(off);\n  // Ground pour fills the rest a LED clear of other copper, stitched by a via\n  // wherever a 5x5 patch of it is free.\n  for (let c = 0; c \u003c N; c++) if (!P.mat[c] && (P.blk[c] === 0 || P.blk[c] === 1)) P.mat[c] = POUR;\n  for (let y = 6; y \u003c 112; y += 7)\n    for (let x = 3 + (Math.floor(y / 7) % 2) * 3; x \u003c W - 3; x += 7) {\n      let ok = true;\n      for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) if (P.mat[(y + j) * W + x + i] !== POUR) ok = false;\n      if (ok) via(P, x, y, 1);\n    }\n  // Silkscreen: corner marks round the processor and its pin-one dot.\n  for (const [x, y, dx, dy] of [[17, 40, 1, 1], [46, 40, -1, 1], [17, 67, 1, -1], [46, 67, -1, -1]])\n    for (let i = 0; i \u003c 3; i++) {\n      put(P, x + dx * i, y, SILK);\n      put(P, x, y + dy * i, SILK);\n    }\n  put(P, 19, 42, SILK);\n}\n\nfunction paintBoard(P) {\n  const k = Math.min(3.999, Math.max(0, P.mask) * 4);\n  const i0 = Math.floor(k);\n  const f = k - i0;\n  const mix = (j) => MASKS[i0][j].map((v, c) => v + (MASKS[i0 + 1][j][c] - v) * f);\n  const M = mix(0);\n  const C = mix(1);\n  const pour = M.map((v, i) => v + (C[i] - v) * 0.55);\n  for (let p = 0; p \u003c N; p++) {\n    const m = P.mat[p];\n    const s = m \u003c PAD ? 1 : P.shade[p];\n    const c = m === TRACE ? C : m === POUR ? pour : m ? FIX[m - PAD] : M;\n    for (let i = 0; i \u003c 3; i++) P.base[p * 3 + i] = c[i] * s;\n  }\n  P.maskAt = P.mask;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.mat = new Uint8Array(N);\n  P.shade = new Float32Array(N).fill(1);\n  P.blk = new Int16Array(N);\n  P.dist = new Int32Array(N);\n  P.ring = [[], [], [], [], [], [], [], []];\n  buildBoard(P);\n  for (const k of [\"base\", \"buf\", \"E\", \"T\", \"G\"]) P[k] = new Float32Array(N * 3);\n  Object.assign(P, { maskAt: -1, mask: 0, glow: 0, pulses: [], t: 0, next: {}, busy: {}, clear: {}, rev: {}, act: 0, mem: 0, tick: 0, boot: -1, started: false });\n  // The program starts near the end of a rest, a spell before the copy.\n  P.spell = 1.8;\n  P.led = new Float32Array(4);\n  P.ledWas = new Uint8Array(4);\n}\n\nfunction bits(n, p) {\n  const out = [1];\n  for (let i = 1; i \u003c n; i++) out.push(Math.random() \u003c p ? 1 : 0);\n  return out;\n}\n\n// Puts a train of bits on a route, from its first end or, reversed, its last;\n// returns the seconds until the train has left the route.\nfunction train(P, r, rev, b, at) {\n  if (!r) return 0;\n  for (let i = 0; i \u003c b.length; i++) if (b[i]) P.pulses.push({ r, rev, s: -(at || 0) - i * GAP });\n  return (r.n + (at || 0) + b.length * GAP + TAIL) / P.v;\n}\n\n// One transaction on group g once the last has gone onto the bus; a train the\n// other way waits for the bus to clear.\nfunction transact(P, g, kind) {\n  const lines = P.group[g];\n  if (!lines || P.busy[g] > P.t) return;\n  let rev = P.clear[g] > P.t ? P.rev[g] : Math.random() \u003c 0.5;\n  const n = kind === 1 ? 8 + Math.floor(Math.random() * 7) : kind ? 16 : 4 + Math.floor(Math.random() * 5);\n  let dur = 0;\n  if (kind === 0) {\n    // A memory cycle: eight data lines in step and the chip's clock with them.\n    for (let j = 0; j \u003c 8; j++) dur = Math.max(dur, train(P, lines[j], rev, bits(n, 0.5)));\n    train(P, lines[8], false, bits(n, 1));\n    P.mem = Math.max(P.mem, P.t + dur * 0.6);\n  } else if (kind === 1) {\n    // A packet on a pair of lines, or a burst on all, as a copy mostly sends.\n    const all = Math.random() \u003c (P.copy ? 0.8 : 0.25);\n    const j0 = Math.floor(Math.random() * (lines.length - 1));\n    const b = bits(all ? 4 : n, 0.6);\n    for (let j = 0; j \u003c lines.length; j++) if (all || j === j0 || j === j0 + 1) dur = Math.max(dur, train(P, lines[j], rev, b));\n    P.act = Math.max(P.act, P.t + 0.25 + dur * 0.4);\n  } else {\n    // A flash read: chip select, sixteen clocks, a command out and a byte back.\n    rev = false;\n    train(P, lines[0], false, [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]);\n    train(P, lines[1], false, bits(16, 1));\n    train(P, lines[2], false, bits(8, 0.5));\n    dur = train(P, lines[3], true, bits(8, 0.5), 8 * GAP);\n  }\n  P.busy[g] = P.t + (n * GAP + 2) / P.v;\n  P.clear[g] = P.t + dur;\n  P.rev[g] = rev;\n}\n\n// After a reset: power at 0.5 s, the crystal at 0.9, flash reads to 2.6, a one\n// walked across both memory buses, the buses filled, then two link bursts.\nfunction bootStep(P, dt) {\n  const b0 = P.boot;\n  const b1 = (P.boot += dt);\n  const at = (x) => b0 \u003c x && b1 >= x;\n  const all = (g, rev, b) => {\n    for (let j = 0; j \u003c 9; j++) train(P, P.group[g] && P.group[g][j], rev, b);\n  };\n  if (b1 > 1 && b1 \u003c 2.6) transact(P, \"S\", 2);\n  for (let j = 0; j \u003c 9; j++)\n    if (at(2.7 + j * 0.14))\n      for (const g of [\"A\", \"B\"]) train(P, P.group[g] && P.group[g][j], false, [1]);\n  if (at(4.2)) for (const g of [\"A\", \"B\"]) all(g, true, [1, 1, 1, 1]);\n  if (at(4.9) || at(5.3)) {\n    all(\"C\", false, [1, 0, 1]);\n    P.act = P.t + 0.25;\n  }\n  if (b1 > 5.8) P.boot = -1;\n}\n\nfunction step(P, dt, traffic, clock) {\n  P.t += dt;\n  P.v = 16 * clock;\n  const f = clock / 2;\n  const booting = P.boot >= 0;\n  if (booting) bootStep(P, dt);\n  // The crystal ticks: out on one pad, back on the other.\n  if (!booting || P.boot > 0.9) {\n    P.tick += dt * 3 * clock;\n    if (P.tick >= 1) {\n      P.tick -= Math.floor(P.tick);\n      train(P, P.group.X && P.group.X[0], false, [1]);\n      train(P, P.group.X && P.group.X[1], true, [1]);\n    }\n  }\n  if (!booting) {\n    const rate = { A: [0, 0.9 + 3.5 * traffic], B: [0, 0.9 + 3.5 * traffic], C: [1, 0.6 + 2.6 * traffic], L: [1, 0.25 + 1.2 * traffic], R: [1, 0.25 + 1.2 * traffic], S: [2, 0.25 + 0.9 * traffic] };\n    P.spell += (dt * f) / 2.4;\n    const w = Math.floor(P.spell) % WORK.length;\n    P.copy = w === COPY;\n    for (const g in rate) {\n      // Traffic turned up fills the quiet buses too.\n      const rg = rate[g][1] * f * (WORK[w][\"ABCLRS\".indexOf(g)] * (1 + traffic) + 2 * traffic);\n      if (P.next[g] === undefined) P.next[g] = P.t + Math.random() / rg;\n      if (P.t >= P.next[g]) {\n        transact(P, g, rate[g][0]);\n        P.next[g] = P.t - Math.log(1 - Math.random() * 0.98) / rg;\n      }\n    }\n  }\n  // The LEDs: power, a heartbeat, the connector, the memory. Each one that\n  // lights sends a pulse up its drive line.\n  const hb = (P.t * f) % 1.6;\n  const on = [!booting || P.boot > 0.5, !booting && (hb \u003c 0.1 || (hb > 0.25 && hb \u003c 0.35)), P.act > P.t, P.mem > P.t || (booting && P.boot > 2.6 && P.boot \u003c 4.6 && (P.boot * 8) % 1 \u003c 0.5)];\n  for (let k = 0; k \u003c 4; k++) {\n    if (on[k] && !P.ledWas[k] && k) train(P, P.ledNet[k].r, false, [1]);\n    P.ledWas[k] = on[k] ? 1 : 0;\n    P.led[k] += ((on[k] ? 1 : 0) - P.led[k]) * Math.min(1, dt * 30);\n  }\n  // Pulses move on, warming every LED of copper their head crosses.\n  const heat = P.heat;\n  const ps = P.pulses;\n  let kept = 0;\n  for (const p of ps) {\n    const s0 = p.s;\n    p.s += P.v * dt;\n    const r = p.r;\n    for (let c = Math.max(0, Math.ceil(s0)); c \u003c= p.s && c \u003c r.n; c++) {\n      const j = r.o + (p.rev ? r.n - 1 - c : c);\n      heat[j] = Math.min(1, heat[j] + 0.3);\n    }\n    if (p.s - TAIL \u003c r.n) ps[kept++] = p;\n  }\n  ps.length = kept;\n  const keep = Math.exp(-dt / P.tau);\n  for (let i = 0; i \u003c heat.length; i++) heat[i] *= keep;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.mask = Math.min(1, Math.max(0, k[0]));\n  const clock = Math.max(0.1, k[1]);\n  const traffic = Math.min(1, Math.max(0, k[2]));\n  P.glow = Math.min(1, Math.max(0, k[3]));\n  P.tau = 1 + 2.2 * P.glow ** 1.3;\n  if (!P.started) {\n    P.started = true;\n    for (const n of P.ledNet) n.r = P.routes.find((r) => r.grp === \"D\" && r.line === n.line);\n    // The board has been running for three seconds when the panel opens.\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30, traffic, clock);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    Object.assign(P, { boot: 0, next: {}, busy: {}, clear: {} });\n    P.pulses.length = 0;\n    P.heat.fill(0);\n  }\n  step(P, dt, traffic, clock);\n}\n\n// A box blur of one channel, along rows and then along columns.\nfunction blur(src, dst, tmp, r, c) {\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const from = pass ? tmp : src;\n    const to = pass ? dst : tmp;\n    const len = pass ? H : W;\n    const st = pass ? W * 3 : 3;\n    for (let line = 0; line \u003c (pass ? W : H); line++) {\n      const o = (pass ? line : line * W) * 3 + c;\n      let acc = 0;\n      for (let i = 0; i \u003c= r; i++) acc += from[o + i * st];\n      for (let i = 0; i \u003c len; i++) {\n        to[o + i * st] = acc / (2 * r + 1);\n        if (i + r + 1 \u003c len) acc += from[o + (i + r + 1) * st];\n        if (i - r >= 0) acc -= from[o + (i - r) * st];\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.maskAt !== P.mask) paintBoard(P);\n  const buf = P.buf;\n  const E = P.E;\n  buf.set(P.base);\n  E.fill(0);\n  // A busy trace stays warm in its signal's colour.\n  const heat = P.heat;\n  for (const r of P.routes) {\n    const col = SIG[r.cls];\n    for (let i = 0; i \u003c r.n; i++) {\n      const h = heat[r.o + i] * 0.7;\n      if (h \u003c 0.007) continue;\n      for (let c = 0; c \u003c 3; c++) E[r.cells[i] * 3 + c] += col[c] * h;\n    }\n  }\n  for (const p of P.pulses) {\n    const r = p.r;\n    const col = SIG[r.cls];\n    const hi = Math.floor(p.s);\n    for (let i = hi + 1; i >= hi - TAIL - 1; i--) {\n      if (i \u003c 0 || i >= r.n) continue;\n      const d = p.s - i;\n      let b = d \u003c 0 ? 1 + d : d \u003c 1 ? 1 : 1 - (d - 1) / (TAIL + 1);\n      if (b \u003c= 0) continue;\n      b *= b;\n      // The head burns nearly white, the tail in the signal's colour.\n      const wh = d \u003c 1 ? 0.55 : 0;\n      const o = r.cells[p.rev ? r.n - 1 - i : i] * 3;\n      for (let c = 0; c \u003c 3; c++) E[o + c] += (col[c] + (255 - col[c]) * wh) * b;\n    }\n  }\n  for (let k = 0; k \u003c 4; k++)\n    for (let y = 0; y \u003c 2; y++) {\n      const o = ((LENS_AT[k][1] + y) * W + LENS_AT[k][0]) * 3;\n      for (let c = 0; c \u003c 3; c++) E[o + c] += LED_ON[k][c] * P.led[k] * 1.8;\n    }\n  // The glow: the pulses' light spread through the mask.\n  const r = 1 + Math.round(P.glow * 3);\n  const g = 0.5 + 2.8 * P.glow;\n  const G = P.G;\n  for (let c = 0; c \u003c 3; c++) blur(E, G, P.T, r, c);\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    // Where a pulse is, its light covers the copper under it.\n    const m = 1 - 0.5 * Math.min(1, Math.max(E[o], E[o + 1], E[o + 2]) / 255);\n    display.setPixel(p % W, (p - (p % W)) / W, knee(buf[o] * m + E[o] + G[o] * g), knee(buf[o + 1] * m + E[o + 1] + G[o + 1] * g), knee(buf[o + 2] * m + E[o + 2] + G[o + 2] * g));\n  }\n}\n\n// Light past 180 rolls off towards 255, so a bright pulse keeps its colour.\nfunction knee(v) {\n  return v \u003c 180 ? v : 255 - 75 * Math.exp(-(v - 180) / 75);\n}\n","layer":{"id":"layer-circuit-board","type":"code","name":"circuit-board","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Circuit Board\n// Family:  circuit\n// Idea:    A circuit board fills the panel with copper a maze router lays in setup between a processor, two memory chips, a flash chip, a crystal and the gold fingers of an edge connector, and signals run along the traces as bright pulses while four status LEDs answer the traffic.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: C. Y. Lee's maze router (\"An algorithm for path connections and its applications\", 1961), here with 45-degree moves\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Mask=0..1, Clock=0.5..4, Traffic=0..1, Glow=0..1\n//\n// Knob 1: Mask. The colour of the solder mask: green at 0, then blue, red, matte black and purple at 1.\n// Knob 2: Clock. How fast the board runs: at 2 the crystal ticks six times a second and a pulse covers 32 LEDs a second, at 0.5 a quarter of that, at 4 twice.\n// Knob 3: Traffic. At 0 the processor works through its program in spells of 2.4 s (loading from the flash, computing in memory, input and output, a rest, a copy out to the connector); turned up, the quiet buses fill until at 1 every bus carries trains back to back.\n// Knob 4: Glow. How far the light of a pulse spreads through the mask, and how long a busy trace stays warm after it, from one second to three.\n// Buttons: K1 tap resets the board: it goes dark, the power LED comes on, the crystal starts, the processor reads the flash, walks a one across both memory buses and brings the link up.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// What each LED of the bare board is: mask (0) over bare board, over a trace\n// or over the pour, or a part coloured from FIX.\nconst TRACE = 1;\nconst POUR = 2;\nconst PAD = 3;\nconst CHIP = 4;\nconst SILK = 5;\nconst HOLE = 6;\nconst GOLD = 7;\nconst RES = 8;\nconst LENS = 9;\nconst CAN = 10;\nconst BASE = 11;\nconst VIA = 12;\nconst ETCH = 13;\nconst FIX = [[196, 196, 186], [30, 30, 34], [222, 222, 208], [0, 0, 0], [228, 172, 52], [24, 24, 24], [120, 122, 112], [212, 214, 220], [36, 36, 40], [170, 170, 152], [92, 92, 98]];\n// Solder mask over bare board and over copper, for the five stops of K1.\nconst MASKS = [\n  [[10, 70, 34], [44, 124, 52]],\n  [[8, 32, 96], [38, 84, 170]],\n  [[96, 12, 14], [164, 50, 40]],\n  [[16, 17, 19], [46, 50, 52]],\n  [[56, 16, 86], [112, 58, 154]],\n];\n// Signal light: data, clock, connector, flash, LED drive.\nconst SIG = [[255, 196, 80], [90, 225, 255], [255, 110, 215], [150, 255, 110], [255, 255, 240]];\n// Status LEDs (power, heartbeat, connector, memory): lens top and colour lit.\nconst LENS_AT = [[39, 24], [31, 30], [33, 30], [35, 30]];\nconst LED_ON = [[60, 255, 90], [255, 50, 40], [255, 176, 30], [70, 130, 255]];\n// The program, as spells of 2.4 s at Clock 2 (load, compute, input and output,\n// rest, copy), each the load on buses A and B (memory), C (connector), L and\n// R (memory to connector) and S (flash).\nconst WORK = [[1.5, 0.3, 0.2, 0.1, 0.1, 3], [2.6, 2.6, 0.2, 0.1, 0.1, 0.2], [0.3, 0.3, 2.6, 1.8, 1.8, 0.2], [0.15, 0.15, 0.2, 0.1, 0.1, 0.2], [2, 2, 2.4, 2.5, 2.5, 0.2]];\nconst COPY = 4;\n// The router's moves: straight steps cost 5, diagonal ones 7, so a route is\n// straight runs joined by 45-degree runs.\nconst DX = [1, 0, -1, 0, 1, -1, -1, 1];\nconst DY = [0, 1, 0, -1, 1, 1, -1, -1];\n// Bits on a bus are 4 LEDs apart; a pulse's tail is 2 LEDs.\nconst GAP = 4;\nconst TAIL = 2;\n// A 3x5 font for the markings on the chips.\nconst FONT = { U: 0x5b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9 };\n\nfunction inside(x, y) {\n  return x >= 0 && y >= 0 && x \u003c W && y \u003c H;\n}\n\nfunction put(P, x, y, m, s) {\n  if (!inside(x, y)) return;\n  P.mat[y * W + x] = m;\n  P.shade[y * W + x] = s || 1;\n}\n\n// Copper keeps every other net one LED away: blk holds the net that may pass\n// each LED, 0 for any and -1 for none.\nfunction claim(P, x, y, net) {\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      if (!inside(x + i, y + j)) continue;\n      const k = (y + j) * W + x + i;\n      if (!P.blk[k]) P.blk[k] = net;\n      else if (P.blk[k] !== net) P.blk[k] = -1;\n    }\n}\n\nfunction copper(P, x, y, net) {\n  claim(P, x, y, net);\n  P.blk[y * W + x] = net;\n}\n\nfunction block(P, x0, y0, x1, y1) {\n  for (let y = y0 - 1; y \u003c= y1 + 1; y++) for (let x = x0 - 1; x \u003c= x1 + 1; x++) if (inside(x, y)) P.blk[y * W + x] = -1;\n}\n\nfunction pad(P, x, y, net, s) {\n  put(P, x, y, PAD, s);\n  copper(P, x, y, net);\n}\n\nfunction reserve(P, x, y, net) {\n  const v = P.blk[y * W + x];\n  if (!v || v === net) copper(P, x, y, net);\n}\n\n// A gull-wing lead. The LED in front of its tip is kept for its own net and\n// the others round the tip are shut, so the route leaves straight out.\nfunction lead(P, x, y, dx, dy, net) {\n  for (let i = 0; i \u003c 3; i++) pad(P, x + dx * i, y + dy * i, net, i === 2 ? 0.7 : 1);\n  reserve(P, x - dx, y - dy, net);\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      const k = (y + j) * W + x + i;\n      if ((i || j) && (i !== -dx || j !== -dy) && (i !== dx || j !== dy) && inside(x + i, y + j) && (!P.blk[k] || P.blk[k] === net)) P.blk[k] = -1;\n    }\n  return [x, y];\n}\n\nfunction chip(P, x0, y0, x1, y1) {\n  block(P, x0, y0, x1, y1);\n  for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) put(P, x, y, CHIP, y === y0 || x === x0 ? 1.45 : y === y1 || x === x1 ? 0.7 : 1);\n}\n\nfunction text(P, s, x, y) {\n  for (const ch of s) {\n    for (let b = 0; b \u003c 15; b++) if (FONT[ch] & (1 \u003c\u003c (14 - b))) put(P, x + (b % 3), y + Math.floor(b / 3), ETCH);\n    x += 4;\n  }\n}\n\nfunction via(P, x, y, net) {\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      put(P, x + i, y + j, i || j ? VIA : HOLE, i && j ? 0.8 : 1);\n      copper(P, x + i, y + j, net);\n    }\n}\n\n// A resistor and a LED in a line, from the resistor's far pad at y0 to the\n// LED's, which is ground, eight rows on in direction dy.\nfunction ledPair(P, x, y0, dy, net, inner) {\n  pad(P, x, y0, net);\n  for (let i = 3; i \u003c= 5; i++) pad(P, x, y0 + dy * i, inner);\n  put(P, x, y0 + dy * 4, TRACE);\n  pad(P, x, y0 + dy * 8, 1);\n  for (const [i, m] of [[1, RES], [2, RES], [6, LENS], [7, LENS]]) {\n    put(P, x, y0 + dy * i, m);\n    P.blk[(y0 + dy * i) * W + x] = -1;\n  }\n}\n\n// Lee's wave: every LED the net may cross gets its distance from the start,\n// cheapest first, until the wave reaches the end; the route is read back\n// from the end, keeping its direction where it can. With `diag` its first\n// turn is a diagonal, so a fan to the wider fingers jogs where there is room.\nfunction route(P, net, a, b, diag) {\n  const dist = P.dist;\n  const blk = P.blk;\n  const ring = P.ring;\n  dist.fill(1e9);\n  for (const q of ring) q.length = 0;\n  const s = a[1] * W + a[0];\n  const t = b[1] * W + b[0];\n  dist[s] = 0;\n  ring[0].push(s);\n  let pending = 1;\n  for (let d = 0; pending > 0 && d \u003c= dist[t]; d++) {\n    const q = ring[d & 7];\n    while (q.length) {\n      const u = q.pop();\n      pending--;\n      if (dist[u] !== d) continue;\n      const x = u % W;\n      const y = (u - x) / W;\n      for (let k = 0; k \u003c 8; k++) {\n        const v = u + DY[k] * W + DX[k];\n        if (!inside(x + DX[k], y + DY[k]) || (blk[v] && blk[v] !== net)) continue;\n        const nd = d + (k \u003c 4 ? 5 : 7);\n        if (nd \u003c dist[v]) {\n          dist[v] = nd;\n          ring[nd & 7].push(v);\n          pending++;\n        }\n      }\n    }\n  }\n  if (dist[t] >= 1e9) return null;\n  const path = [t];\n  let last = -1;\n  for (let u = t; u !== s; ) {\n    const x = u % W;\n    const y = (u - x) / W;\n    let best = -1;\n    let bk = -1;\n    let score = -1;\n    for (let k = 0; k \u003c 8; k++) {\n      const p = u - DY[k] * W - DX[k];\n      if (!inside(x - DX[k], y - DY[k]) || dist[p] + (k \u003c 4 ? 5 : 7) !== dist[u]) continue;\n      const sc = (k === last ? 4 : 0) + (k \u003c 4 ? 1 : 0) + (diag && k >= 4 ? 6 : 0);\n      if (sc > score) {\n        score = sc;\n        best = p;\n        bk = k;\n      }\n    }\n    path.push(best);\n    u = best;\n    last = bk;\n    if (bk >= 4) diag = false;\n  }\n  for (const c of path) {\n    copper(P, c % W, Math.floor(c / W), net);\n    if (!P.mat[c]) P.mat[c] = TRACE;\n  }\n  return Int16Array.from(path.reverse());\n}\n\nfunction buildBoard(P) {\n  const jobs = [];\n  let id = 2;\n  const net = (cls, grp, line) => ({ id: id++, cls, grp, line });\n  // Short nets are routed first, then fans and buses, each line in the order\n  // that lets the next pass outside it.\n  const link = (n, a, b, o, diag) => jobs.push({ n, a, b, o: o || 9, diag });\n  const gnd = (a, x, y) => {\n    via(P, x, y, 1);\n    link({ id: 1, cls: -1 }, a, [x, y], 1);\n  };\n  // Mounting holes, plated, in the two top corners.\n  for (const cx of [4, 59]) {\n    block(P, cx - 3, 1, cx + 3, 7);\n    for (let y = 0; y \u003c= 8; y++)\n      for (let x = cx - 4; x \u003c= cx + 4; x++) {\n        const r = Math.hypot(x - cx, y - 4);\n        if (r \u003c 1.9) put(P, x, y, HOLE);\n        else if (r \u003c 3.4) put(P, x, y, PAD, 0.9 + 0.25 * Math.cos(Math.atan2(y - 4, x - cx) + 2.3));\n      }\n  }\n  // The processor, a QFP with nine leads a side, and two memory chips under it.\n  chip(P, 22, 44, 41, 63);\n  put(P, 24, 46, ETCH);\n  text(P, \"U1\", 28, 51);\n  chip(P, 1, 84, 20, 93);\n  chip(P, 43, 84, 62, 93);\n  text(P, \"U2\", 7, 87);\n  text(P, \"U3\", 49, 87);\n  // Memory buses: nine lines from each side of the processor down to the top\n  // leads of a memory chip, the innermost being that chip's clock.\n  for (const side of [0, 1])\n    for (let j = 8; j >= 0; j--) {\n      const n = net(j === 8 ? 1 : 0, side ? \"B\" : \"A\", j);\n      const a = side ? lead(P, 44, 45 + 2 * j, -1, 0, n.id) : lead(P, 19, 45 + 2 * j, 1, 0, n.id);\n      link(n, a, lead(P, side ? 60 - 2 * j : 3 + 2 * j, 81, 0, 1, n.id));\n    }\n  // Nineteen gold fingers, two LEDs wide, the outer two ground.\n  const finger = (i, nid) => {\n    const x0 = 4 + 3 * i;\n    for (let y = 116; y \u003c H; y++)\n      for (let x = x0; x \u003c= x0 + 1; x++) {\n        put(P, x, y, GOLD, y === 116 ? 0.75 : y === H - 1 ? 0.6 : x === x0 ? 1.1 : 0.9);\n        copper(P, x, y, nid);\n      }\n    return x0;\n  };\n  finger(0, 1);\n  finger(18, 1);\n  // Nine lines from the bottom of the processor fan out to the middle fingers.\n  for (let j = 0; j \u003c 9; j++) {\n    const n = net(2, \"C\", j);\n    const f = finger(5 + j, n.id);\n    reserve(P, f, 115, n.id);\n    link(n, lead(P, 23 + 2 * j, 66, 0, -1, n.id), [f, 116], 9, true);\n  }\n  // Four lines from each memory chip's bottom leads to the outer fingers.\n  for (const side of [0, 1])\n    for (let j = 0; j \u003c 9; j++) {\n      const x = side ? 60 - 2 * j : 3 + 2 * j;\n      if (j >= 1 && j \u003c= 4) {\n        const n = net(2, side ? \"R\" : \"L\", j - 1);\n        const a = lead(P, x, 96, 0, -1, n.id);\n        const f = finger(side ? 18 - j : j, n.id) + side;\n        reserve(P, f, 115, n.id);\n        link(n, a, [f, 116], 9, true);\n      } else if (j === 0) gnd(lead(P, x, 96, 0, -1, 1), side ? 61 : 2, 100);\n      else lead(P, x, 96, 0, -1, id++);\n    }\n  // The flash chip on its side at the top left; its four right leads take\n  // the processor's first four top leads, the lowest to the nearest.\n  chip(P, 4, 24, 11, 33);\n  text(P, \"U4\", 5, 27);\n  for (let j = 0; j \u003c 4; j++) {\n    const n = net(3, \"S\", j);\n    link(n, lead(P, 23 + 2 * j, 41, 0, 1, n.id), lead(P, 14, 32 - 2 * j, -1, 0, n.id), 4);\n    lead(P, 1, 32 - 2 * j, 1, 0, id++);\n  }\n  // Three status LEDs over the next three top leads; each top pad meets the pour.\n  P.ledNet = [{ id: 0, cls: 4, grp: \"D\", line: 0 }];\n  for (let k = 1; k \u003c 4; k++) {\n    const x = 29 + 2 * k;\n    const n = net(4, \"D\", k);\n    P.ledNet.push(n);\n    ledPair(P, x, 37, -1, n.id, id++);\n    link(n, lead(P, x, 41, 0, 1, n.id), [x, 37], 3);\n  }\n  // The crystal, a metal can on two pads, on the last two top leads.\n  block(P, 45, 34, 54, 38);\n  for (let y = 34; y \u003c= 38; y++)\n    for (let x = 45; x \u003c= 54; x++) if ((y - 34) % 4 || (x - 45) % 9) put(P, x, y, CAN, y === 35 ? 1.2 : y === 38 ? 0.62 : 0.9);\n  for (let j = 0; j \u003c 2; j++) {\n    const n = net(1, \"X\", j);\n    for (let y = 35; y \u003c= 37; y++) for (let x = 42 + 14 * j; x \u003c= 43 + 14 * j; x++) pad(P, x, y, n.id);\n    link(n, lead(P, 37 + 2 * j, 41, 0, 1, n.id), j ? [56, 37] : [42, 36], 2);\n  }\n  // The regulator, a SOT-223 under its tab, between two electrolytic capacitors.\n  chip(P, 27, 8, 36, 12);\n  for (let y = 3; y \u003c= 6; y++) for (let x = 28; x \u003c= 35; x++) pad(P, x, y, 1, y === 3 ? 0.8 : 1);\n  const vin = id++;\n  const vout = id++;\n  for (let k = 0; k \u003c 3; k++)\n    for (let y = 14; y \u003c= 16; y++) for (let i = 0; i \u003c 2; i++) pad(P, 28 + 3 * k + i, y, [vin, 1, vout][k], y === 14 ? 0.7 : 1);\n  for (const [cx, side] of [[14, 0], [49, 1]]) {\n    block(P, cx - 5, 6, cx + 5, 16);\n    for (let y = 6; y \u003c= 16; y++)\n      for (let x = cx - 5; x \u003c= cx + 5; x++) {\n        const r = Math.hypot(x - cx, y - 11);\n        if (Math.abs(x - cx) + Math.abs(y - 11) > 8) continue;\n        if (r \u003c 4.3) put(P, x, y, CAN, 1.05 - 0.05 * r + 0.12 * Math.cos(Math.atan2(y - 11, x - cx) + 2.3) - (x === cx || y === 11 ? 0.28 : 0));\n        else put(P, x, y, BASE);\n      }\n    // Its tabs: the plus side to the regulator, the other to ground.\n    for (let y = 10; y \u003c= 12; y++)\n      for (let i = 0; i \u003c 2; i++) {\n        pad(P, cx - 7 + i, y, side ? vout : 1);\n        pad(P, cx + 6 + i, y, side ? 1 : vin);\n      }\n  }\n  // The power LED hangs under its resistor beside the regulator.\n  P.ledNet[0].id = vout;\n  ledPair(P, 39, 18, 1, vout, id++);\n  link({ id: vin, cls: 4 }, [28, 16], [21, 12], 2);\n  link({ id: vout, cls: 4 }, [35, 16], [42, 12], 2);\n  link(P.ledNet[0], [35, 16], [39, 18], 3);\n  // Route in that order; a net the router cannot reach is left off the board.\n  jobs.sort((a, b) => a.o - b.o);\n  P.routes = [];\n  P.group = {};\n  let off = 0;\n  for (const { n, a, b, diag } of jobs) {\n    const cells = route(P, n.id, a, b, diag);\n    if (!cells || n.cls \u003c 0) continue;\n    const r = { cells, n: cells.length, o: off, cls: n.cls, grp: n.grp, line: n.line };\n    off += r.n;\n    P.routes.push(r);\n    if (n.grp) (P.group[n.grp] = P.group[n.grp] || [])[n.line] = r;\n  }\n  P.heat = new Float32Array(off);\n  // Ground pour fills the rest a LED clear of other copper, stitched by a via\n  // wherever a 5x5 patch of it is free.\n  for (let c = 0; c \u003c N; c++) if (!P.mat[c] && (P.blk[c] === 0 || P.blk[c] === 1)) P.mat[c] = POUR;\n  for (let y = 6; y \u003c 112; y += 7)\n    for (let x = 3 + (Math.floor(y / 7) % 2) * 3; x \u003c W - 3; x += 7) {\n      let ok = true;\n      for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) if (P.mat[(y + j) * W + x + i] !== POUR) ok = false;\n      if (ok) via(P, x, y, 1);\n    }\n  // Silkscreen: corner marks round the processor and its pin-one dot.\n  for (const [x, y, dx, dy] of [[17, 40, 1, 1], [46, 40, -1, 1], [17, 67, 1, -1], [46, 67, -1, -1]])\n    for (let i = 0; i \u003c 3; i++) {\n      put(P, x + dx * i, y, SILK);\n      put(P, x, y + dy * i, SILK);\n    }\n  put(P, 19, 42, SILK);\n}\n\nfunction paintBoard(P) {\n  const k = Math.min(3.999, Math.max(0, P.mask) * 4);\n  const i0 = Math.floor(k);\n  const f = k - i0;\n  const mix = (j) => MASKS[i0][j].map((v, c) => v + (MASKS[i0 + 1][j][c] - v) * f);\n  const M = mix(0);\n  const C = mix(1);\n  const pour = M.map((v, i) => v + (C[i] - v) * 0.55);\n  for (let p = 0; p \u003c N; p++) {\n    const m = P.mat[p];\n    const s = m \u003c PAD ? 1 : P.shade[p];\n    const c = m === TRACE ? C : m === POUR ? pour : m ? FIX[m - PAD] : M;\n    for (let i = 0; i \u003c 3; i++) P.base[p * 3 + i] = c[i] * s;\n  }\n  P.maskAt = P.mask;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.mat = new Uint8Array(N);\n  P.shade = new Float32Array(N).fill(1);\n  P.blk = new Int16Array(N);\n  P.dist = new Int32Array(N);\n  P.ring = [[], [], [], [], [], [], [], []];\n  buildBoard(P);\n  for (const k of [\"base\", \"buf\", \"E\", \"T\", \"G\"]) P[k] = new Float32Array(N * 3);\n  Object.assign(P, { maskAt: -1, mask: 0, glow: 0, pulses: [], t: 0, next: {}, busy: {}, clear: {}, rev: {}, act: 0, mem: 0, tick: 0, boot: -1, started: false });\n  // The program starts near the end of a rest, a spell before the copy.\n  P.spell = 1.8;\n  P.led = new Float32Array(4);\n  P.ledWas = new Uint8Array(4);\n}\n\nfunction bits(n, p) {\n  const out = [1];\n  for (let i = 1; i \u003c n; i++) out.push(Math.random() \u003c p ? 1 : 0);\n  return out;\n}\n\n// Puts a train of bits on a route, from its first end or, reversed, its last;\n// returns the seconds until the train has left the route.\nfunction train(P, r, rev, b, at) {\n  if (!r) return 0;\n  for (let i = 0; i \u003c b.length; i++) if (b[i]) P.pulses.push({ r, rev, s: -(at || 0) - i * GAP });\n  return (r.n + (at || 0) + b.length * GAP + TAIL) / P.v;\n}\n\n// One transaction on group g once the last has gone onto the bus; a train the\n// other way waits for the bus to clear.\nfunction transact(P, g, kind) {\n  const lines = P.group[g];\n  if (!lines || P.busy[g] > P.t) return;\n  let rev = P.clear[g] > P.t ? P.rev[g] : Math.random() \u003c 0.5;\n  const n = kind === 1 ? 8 + Math.floor(Math.random() * 7) : kind ? 16 : 4 + Math.floor(Math.random() * 5);\n  let dur = 0;\n  if (kind === 0) {\n    // A memory cycle: eight data lines in step and the chip's clock with them.\n    for (let j = 0; j \u003c 8; j++) dur = Math.max(dur, train(P, lines[j], rev, bits(n, 0.5)));\n    train(P, lines[8], false, bits(n, 1));\n    P.mem = Math.max(P.mem, P.t + dur * 0.6);\n  } else if (kind === 1) {\n    // A packet on a pair of lines, or a burst on all, as a copy mostly sends.\n    const all = Math.random() \u003c (P.copy ? 0.8 : 0.25);\n    const j0 = Math.floor(Math.random() * (lines.length - 1));\n    const b = bits(all ? 4 : n, 0.6);\n    for (let j = 0; j \u003c lines.length; j++) if (all || j === j0 || j === j0 + 1) dur = Math.max(dur, train(P, lines[j], rev, b));\n    P.act = Math.max(P.act, P.t + 0.25 + dur * 0.4);\n  } else {\n    // A flash read: chip select, sixteen clocks, a command out and a byte back.\n    rev = false;\n    train(P, lines[0], false, [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]);\n    train(P, lines[1], false, bits(16, 1));\n    train(P, lines[2], false, bits(8, 0.5));\n    dur = train(P, lines[3], true, bits(8, 0.5), 8 * GAP);\n  }\n  P.busy[g] = P.t + (n * GAP + 2) / P.v;\n  P.clear[g] = P.t + dur;\n  P.rev[g] = rev;\n}\n\n// After a reset: power at 0.5 s, the crystal at 0.9, flash reads to 2.6, a one\n// walked across both memory buses, the buses filled, then two link bursts.\nfunction bootStep(P, dt) {\n  const b0 = P.boot;\n  const b1 = (P.boot += dt);\n  const at = (x) => b0 \u003c x && b1 >= x;\n  const all = (g, rev, b) => {\n    for (let j = 0; j \u003c 9; j++) train(P, P.group[g] && P.group[g][j], rev, b);\n  };\n  if (b1 > 1 && b1 \u003c 2.6) transact(P, \"S\", 2);\n  for (let j = 0; j \u003c 9; j++)\n    if (at(2.7 + j * 0.14))\n      for (const g of [\"A\", \"B\"]) train(P, P.group[g] && P.group[g][j], false, [1]);\n  if (at(4.2)) for (const g of [\"A\", \"B\"]) all(g, true, [1, 1, 1, 1]);\n  if (at(4.9) || at(5.3)) {\n    all(\"C\", false, [1, 0, 1]);\n    P.act = P.t + 0.25;\n  }\n  if (b1 > 5.8) P.boot = -1;\n}\n\nfunction step(P, dt, traffic, clock) {\n  P.t += dt;\n  P.v = 16 * clock;\n  const f = clock / 2;\n  const booting = P.boot >= 0;\n  if (booting) bootStep(P, dt);\n  // The crystal ticks: out on one pad, back on the other.\n  if (!booting || P.boot > 0.9) {\n    P.tick += dt * 3 * clock;\n    if (P.tick >= 1) {\n      P.tick -= Math.floor(P.tick);\n      train(P, P.group.X && P.group.X[0], false, [1]);\n      train(P, P.group.X && P.group.X[1], true, [1]);\n    }\n  }\n  if (!booting) {\n    const rate = { A: [0, 0.9 + 3.5 * traffic], B: [0, 0.9 + 3.5 * traffic], C: [1, 0.6 + 2.6 * traffic], L: [1, 0.25 + 1.2 * traffic], R: [1, 0.25 + 1.2 * traffic], S: [2, 0.25 + 0.9 * traffic] };\n    P.spell += (dt * f) / 2.4;\n    const w = Math.floor(P.spell) % WORK.length;\n    P.copy = w === COPY;\n    for (const g in rate) {\n      // Traffic turned up fills the quiet buses too.\n      const rg = rate[g][1] * f * (WORK[w][\"ABCLRS\".indexOf(g)] * (1 + traffic) + 2 * traffic);\n      if (P.next[g] === undefined) P.next[g] = P.t + Math.random() / rg;\n      if (P.t >= P.next[g]) {\n        transact(P, g, rate[g][0]);\n        P.next[g] = P.t - Math.log(1 - Math.random() * 0.98) / rg;\n      }\n    }\n  }\n  // The LEDs: power, a heartbeat, the connector, the memory. Each one that\n  // lights sends a pulse up its drive line.\n  const hb = (P.t * f) % 1.6;\n  const on = [!booting || P.boot > 0.5, !booting && (hb \u003c 0.1 || (hb > 0.25 && hb \u003c 0.35)), P.act > P.t, P.mem > P.t || (booting && P.boot > 2.6 && P.boot \u003c 4.6 && (P.boot * 8) % 1 \u003c 0.5)];\n  for (let k = 0; k \u003c 4; k++) {\n    if (on[k] && !P.ledWas[k] && k) train(P, P.ledNet[k].r, false, [1]);\n    P.ledWas[k] = on[k] ? 1 : 0;\n    P.led[k] += ((on[k] ? 1 : 0) - P.led[k]) * Math.min(1, dt * 30);\n  }\n  // Pulses move on, warming every LED of copper their head crosses.\n  const heat = P.heat;\n  const ps = P.pulses;\n  let kept = 0;\n  for (const p of ps) {\n    const s0 = p.s;\n    p.s += P.v * dt;\n    const r = p.r;\n    for (let c = Math.max(0, Math.ceil(s0)); c \u003c= p.s && c \u003c r.n; c++) {\n      const j = r.o + (p.rev ? r.n - 1 - c : c);\n      heat[j] = Math.min(1, heat[j] + 0.3);\n    }\n    if (p.s - TAIL \u003c r.n) ps[kept++] = p;\n  }\n  ps.length = kept;\n  const keep = Math.exp(-dt / P.tau);\n  for (let i = 0; i \u003c heat.length; i++) heat[i] *= keep;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.mask = Math.min(1, Math.max(0, k[0]));\n  const clock = Math.max(0.1, k[1]);\n  const traffic = Math.min(1, Math.max(0, k[2]));\n  P.glow = Math.min(1, Math.max(0, k[3]));\n  P.tau = 1 + 2.2 * P.glow ** 1.3;\n  if (!P.started) {\n    P.started = true;\n    for (const n of P.ledNet) n.r = P.routes.find((r) => r.grp === \"D\" && r.line === n.line);\n    // The board has been running for three seconds when the panel opens.\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30, traffic, clock);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    Object.assign(P, { boot: 0, next: {}, busy: {}, clear: {} });\n    P.pulses.length = 0;\n    P.heat.fill(0);\n  }\n  step(P, dt, traffic, clock);\n}\n\n// A box blur of one channel, along rows and then along columns.\nfunction blur(src, dst, tmp, r, c) {\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const from = pass ? tmp : src;\n    const to = pass ? dst : tmp;\n    const len = pass ? H : W;\n    const st = pass ? W * 3 : 3;\n    for (let line = 0; line \u003c (pass ? W : H); line++) {\n      const o = (pass ? line : line * W) * 3 + c;\n      let acc = 0;\n      for (let i = 0; i \u003c= r; i++) acc += from[o + i * st];\n      for (let i = 0; i \u003c len; i++) {\n        to[o + i * st] = acc / (2 * r + 1);\n        if (i + r + 1 \u003c len) acc += from[o + (i + r + 1) * st];\n        if (i - r >= 0) acc -= from[o + (i - r) * st];\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.maskAt !== P.mask) paintBoard(P);\n  const buf = P.buf;\n  const E = P.E;\n  buf.set(P.base);\n  E.fill(0);\n  // A busy trace stays warm in its signal's colour.\n  const heat = P.heat;\n  for (const r of P.routes) {\n    const col = SIG[r.cls];\n    for (let i = 0; i \u003c r.n; i++) {\n      const h = heat[r.o + i] * 0.7;\n      if (h \u003c 0.007) continue;\n      for (let c = 0; c \u003c 3; c++) E[r.cells[i] * 3 + c] += col[c] * h;\n    }\n  }\n  for (const p of P.pulses) {\n    const r = p.r;\n    const col = SIG[r.cls];\n    const hi = Math.floor(p.s);\n    for (let i = hi + 1; i >= hi - TAIL - 1; i--) {\n      if (i \u003c 0 || i >= r.n) continue;\n      const d = p.s - i;\n      let b = d \u003c 0 ? 1 + d : d \u003c 1 ? 1 : 1 - (d - 1) / (TAIL + 1);\n      if (b \u003c= 0) continue;\n      b *= b;\n      // The head burns nearly white, the tail in the signal's colour.\n      const wh = d \u003c 1 ? 0.55 : 0;\n      const o = r.cells[p.rev ? r.n - 1 - i : i] * 3;\n      for (let c = 0; c \u003c 3; c++) E[o + c] += (col[c] + (255 - col[c]) * wh) * b;\n    }\n  }\n  for (let k = 0; k \u003c 4; k++)\n    for (let y = 0; y \u003c 2; y++) {\n      const o = ((LENS_AT[k][1] + y) * W + LENS_AT[k][0]) * 3;\n      for (let c = 0; c \u003c 3; c++) E[o + c] += LED_ON[k][c] * P.led[k] * 1.8;\n    }\n  // The glow: the pulses' light spread through the mask.\n  const r = 1 + Math.round(P.glow * 3);\n  const g = 0.5 + 2.8 * P.glow;\n  const G = P.G;\n  for (let c = 0; c \u003c 3; c++) blur(E, G, P.T, r, c);\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    // Where a pulse is, its light covers the copper under it.\n    const m = 1 - 0.5 * Math.min(1, Math.max(E[o], E[o + 1], E[o + 2]) / 255);\n    display.setPixel(p % W, (p - (p % W)) / W, knee(buf[o] * m + E[o] + G[o] * g), knee(buf[o + 1] * m + E[o + 1] + G[o + 1] * g), knee(buf[o + 2] * m + E[o + 2] + G[o + 2] * g));\n  }\n}\n\n// Light past 180 rolls off towards 255, so a bright pulse keeps its colour.\nfunction knee(v) {\n  return v \u003c 180 ? v : 255 - 75 * Math.exp(-(v - 180) / 75);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Mask=0..1, Clock=0.5..4, Traffic=0..1, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Mask","min":0,"max":1,"about":"The colour of the solder mask: green at 0, then blue, red, matte black and purple at 1."},{"name":"Clock","min":0.5,"max":4,"about":"How fast the board runs: at 2 the crystal ticks six times a second and a pulse covers 32 LEDs a second, at 0.5 a quarter of that, at 4 twice."},{"name":"Traffic","min":0,"max":1,"about":"At 0 the processor works through its program in spells of 2.4 s (loading from the flash, computing in memory, input and output, a rest, a copy out to the connector); turned up, the quiet buses fill until at 1 every bus carries trains back to back."},{"name":"Glow","min":0,"max":1,"about":"How far the light of a pulse spreads through the mask, and how long a busy trace stays warm after it, from one second to three."}],"start":[0,2,0,0.06],"measures":{"motion":0.2002,"detail":0.119,"edges":0.678,"complexity":0.7577,"coverage":0.9814,"colour":0.2535,"drift":0.0471},"knobResponse":[0.2116,0.0618,0.0696,0.0621]},{"slug":"circulation","title":"Circulation","family":"body","round":22,"note":"해부도처럼 머리부터 발끝까지 선 사람이에요. 심장이 뛸 때마다 붉은 피의 맥이 동맥을 타고 머리와 손발 끝까지 번져 가고, 푸른 정맥혈은 심장 쪽으로 거슬러 올라오며 폐가 박동과 숨에 분홍빛으로 물들어요. 발치의 모니터에는 심전도와 맥박 수가 떠요.","idea":"A standing figure drawn head to feet like an anatomical chart, whose heart beats lub-dub and sends each pulse of red blood out along the arteries to the head, hands and feet while blue blood flows back up the veins and the lungs flush pink.","buttons":"K1 tap startles the figure: one hard beat at once and a rush of adrenaline that races the heart for a few seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Circulation\n// Family:  body\n// Idea:    A standing figure drawn head to feet like an anatomical chart, whose heart beats lub-dub and sends each pulse of red blood out along the arteries to the head, hands and feet while blue blood flows back up the veins and the lungs flush pink.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the anatomical wall charts of the human circulatory system\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Chart=0..1, Rate=1..5, Detail=1..4, Effort=0..1\n//\n// Knob 1: Chart. The red and blue anatomical chart at 0, an angiogram with the skeleton showing at 0.5, a thermal camera at 1.\n// Knob 2: Rate. The resting heart rate, 36 a minute at 1, 72 at 2, 180 at 5; the faster, the closer the pulses follow each other.\n// Knob 3: Detail. How far the vessels branch, from the named arteries and veins drawn bold at 1 to the capillaries at 4.\n// Knob 4: Effort. From rest to a hard run: the heart beats faster and harder, the breath deepens and the arms and legs flush with blood.\n// Buttons: K1 tap startles the figure: one hard beat at once and a rush of adrenaline that races the heart for a few seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, abs, exp, sin, cos, atan2, floor, ceil, round, hypot, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst g2 = (z) => exp(-z * z);\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\n\n// Pulse tables, 100 steps a second; the arterial pulse and the venous return\n// run at CA and CV LEDs a second.\nconst KS = 100, KN = 520, CA = 80, CV = 30;\n// Vessel kinds: 0 artery, 1 vein, 2 and 3 the lungs' arteries and veins.\n// Branch levels 1..4: spacing, length, radius; the turns a blocked branch tries.\nconst GAP = [0, 7, 3, 2.2, 1.8], LEN = [0, 9, 7, 5, 3.5], RAD = [0, 0.52, 0.43, 0.37, 0.33];\nconst TURN = [0, 0.5, -0.5, 1, -1];\n\n// The trunk's half-width row by row, from the base of the neck to the crotch.\nconst TY = [22.5, 24, 25.5, 27.5, 31, 36, 44, 51, 57, 63, 67, 70.5];\nconst TW = [4.6, 9.5, 13, 14.3, 13.8, 13, 11.6, 10.3, 11, 12.4, 11.2, 6];\n// Arm and leg axes on the viewer's left, x y radius per joint.\nconst ARM = [18.3, 28.4, 3.4, 12.8, 47, 2.6, 8.6, 64.5, 2.2, 7.6, 70.5, 2.1, 6.6, 76, 1.3];\nconst LEG = [26.4, 66, 5.9, 26.2, 94, 3.7, 25.8, 119.5, 2, 24, 124.8, 2.2];\n// Capsules x1 y1 r1 x2 y2 r2 of the neck, an ear, a thumb, a calf and the\n// limbs; the body is folded at the middle, so they stand for both sides.\nconst CAPS = [[31.5, 14, 4, 31.5, 24, 4.2], [25.1, 8.8, 1.2, 25.3, 11.6, 1], [7, 66.6, 1, 5.3, 70.6, 0.8], [25.6, 98, 3.5, 25.6, 110, 2.6]];\nfor (const L of [ARM, LEG]) for (let i = 0; i \u003c L.length - 3; i += 3) CAPS.push([0, 1, 2, 3, 4, 5].map((j) => L[i + j]));\n// The lungs: centre, radii, hilum. The heart's centre.\nconst LUNG = [[25, 38.6, 5.4, 11.6, 27.6, 34], [38.2, 39.2, 5.1, 11, 35.6, 34.5]];\nconst HX = 34.4, HY = 38.4;\n// Artery and vein colours from the big trunks to the capillaries.\nconst RED = [[238, 30, 40], [238, 30, 40], [232, 38, 70], [215, 46, 110], [190, 56, 150]];\nconst BLUE = [[46, 70, 240], [46, 70, 240], [66, 68, 236], [96, 66, 226], [128, 66, 214]];\n// The readout's 3x5 letters, five rows of three bits, and its heart.\nconst GLYPH = {\n  0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7292, 8: 0x7bef, 9: 0x7bcf,\n  B: 0x6bae, P: 0x6ba4, M: 0x5fed,\n};\nconst HEART = [10, 31, 31, 14, 4];\n\n// A colour table from stops of position and r g b.\nconst lut = (s) =>\n  Uint8Array.from({ length: 768 }, (_, n) => {\n    const v = ((n / 3) | 0) / 255, c = n % 3;\n    let j = 0;\n    while (j \u003c s.length - 8 && v > s[j + 4]) j += 4;\n    return s[j + 1 + c] + (s[j + 5 + c] - s[j + 1 + c]) * clamp((v - s[j]) / (s[j + 4] - s[j]), 0, 1);\n  });\n// The angiogram and the thermal chart are one value through a colour table;\n// the weights are in the order pal() reads them.\nconst CHARTS = [\n  null,\n  [lut([0, 0, 0, 0, 0.15, 8, 20, 38, 0.4, 42, 80, 112, 0.7, 150, 196, 220, 1, 240, 252, 255]), 0.04, 0.1, 0.07, 0.14, 0, 0.06, 0, 0, 0.74, 0.05, 0.07, 0.5, 0.5, 0.36, 0.2, 0.5, 0.3, 0.95],\n  [lut([0, 0, 0, 10, 0.2, 34, 0, 86, 0.4, 145, 0, 140, 0.6, 232, 64, 36, 0.8, 255, 172, 0, 1, 255, 255, 210]), 0.07, 0.2, -0.05, 0.08, 0.3, 0.2, 0.18, 0.12, 0, 0.5, 0.16, 0.7, 0.3, 0.56, 0.12, 0.8, 0.2, 1],\n];\n\n// Distance to a segment, less a radius running r0..r1 along it.\nfunction seg(x, y, x0, y0, x1, y1, r0, r1) {\n  const dx = x1 - x0, dy = y1 - y0;\n  const t = clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1e-6), 0, 1);\n  return hypot(x - x0 - dx * t, y - y0 - dy * t) - r0 - (r1 - r0) * t;\n}\n\n// Signed distance to the skin, negative inside.\nfunction sdBody(x, y) {\n  let d = (hypot((x - 31.5) / 6.4, (y - 9.8) / 8.6) - 1) * 6.4, i = 0;\n  while (i \u003c TY.length - 2 && y > TY[i + 1]) i++;\n  const u = clamp((y - TY[i]) / (TY[i + 1] - TY[i]), 0, 1);\n  d = min(d, max(abs(x - 31.5) - TW[i] - (TW[i + 1] - TW[i]) * u, TY[0] - y, y - TY[TY.length - 1]));\n  const xr = x \u003c 31.5 ? x : 63 - x;\n  for (const c of CAPS) d = min(d, seg(xr, y, c[0], c[1], c[3], c[4], c[2], c[5]));\n  return d;\n}\n\nfunction lung(x, y, j, br) {\n  const L = LUNG[j], ry = L[3] * (1 + 0.07 * br);\n  const dy = (y - L[1] - (ry - L[3]) * 0.8) / ry;\n  return hypot(((x - L[0]) / (L[2] * (1 + 0.04 * br))) * (1 + 0.35 * max(0, -dy)), dy);\n}\n\n// The heart in its own frame: v runs from the base to the apex, u across.\nfunction heart(P, x, y, s) {\n  const dx = x - HX, dy = y - HY, k = s * 1.12;\n  const v = (P.hv = (dx * 0.55 + dy * 0.835) / k), u = (P.hu = (dx * 0.835 - dy * 0.55) / k);\n  return v \u003c 0 ? hypot(u / 5, v / 4.6) : hypot(u / (5 * (1 - 0.8 * (v / 7) ** 1.5) + 0.05), v / 7);\n}\n\n// Points along a limb axis: t counts joints, f is the share of the radius off\n// the axis, toward the outside of the limb when positive.\nfunction limb(L, list) {\n  const out = [];\n  for (let i = 0; i \u003c list.length; i += 2) {\n    const t = list[i], k = min(floor(t), L.length / 3 - 2), u = t - k;\n    const [x0, y0, r0, x1, y1, r1] = L.slice(k * 3, k * 3 + 6);\n    const dx = x1 - x0, dy = y1 - y0, l = hypot(dx, dy), r = (r0 + (r1 - r0) * u) * list[i + 1];\n    out.push(x0 + dx * u - (dy / l) * r, y0 + dy * u + (dx / l) * r);\n  }\n  return out;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, started: false, beats: [], ph: 0, br: 0, brPh: 0, adr: 0, det: -1, eh: 0, last: -9, f: {}, TA: F32(KN) });\n  Object.assign(P, { TV: F32(KN), TP: F32(KN), hud: F32(N), c0: F32(3), c1: F32(3) });\n  body(P), bones(P), vessels(P);\n}\n\n// Skin mask, rim, depth, muscle, and the way through the body from the heart.\nfunction body(P) {\n  const [m, rim, dep, mus] = [\"m\", \"rim\", \"dep\", \"mus\"].map((k) => (P[k] = F32(N)));\n  const geo = (P.geo = F32(N).fill(1e4)), room = (P.room = new Uint8Array(N));\n  P.tex = F32(N).map(() => 0.75 + 0.35 * rnd());\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p / W) | 0, sd = sdBody(x, y), lu = min(lung(x, y, 0, 0), lung(x, y, 1, 0));\n    // Room to grow: 1 in the body but not the lungs or heart, 2 in the lungs.\n    room[p] = lu \u003c 0.9 ? 2 : sd \u003c -0.6 && lu > 1.1 && hypot(x - HX, y - HY) > 6.5 ? 1 : 0;\n    [m[p], rim[p], dep[p]] = [clamp(0.5 - sd, 0, 1), clamp(1 - abs(sd + 0.7) / 1.1, 0, 1), clamp(-sd / 5, 0, 1)];\n    mus[p] = m[p] * (y > 68 ? 1 : smooth(12.5, 14.5, abs(x - 31.5)));\n  }\n  geo[38 * W + 34] = 0;\n  const NB = [1, 1, W, 1, W + 1, 1.414, W - 1, 1.414];\n  for (let pass = 0; pass \u003c 4; pass++)\n    for (let q = 0, sg = pass & 1 ? 1 : -1; q \u003c N; q++) {\n      const p = sg > 0 ? N - 1 - q : q;\n      if (m[p] > 0.2)\n        for (let j = 0; j \u003c 8; j += 2) if (geo[p + sg * NB[j]] + NB[j + 1] \u003c geo[p]) geo[p] = geo[p + sg * NB[j]] + NB[j + 1];\n    }\n  P.core = Float32Array.from(geo, (g) => exp(-g / 55));\n}\n\n// The skeleton for the angiogram: radius, brightness and a polyline for each\n// bone of the left half, which is mirrored.\nconst BONES = [\n  [0.5, 0.8, 26.5, 12.6, 26.9, 15.4, 28.6, 17.3, 31.6, 17.8], [0.55, 0.8, 31.6, 25.4, 25, 24.6, 19.5, 26.4], [0.7, 0.7, 31.6, 26.6, 31.6, 41],\n  [0.6, 0.75, 31.6, 63.5, 27.5, 62.4, 23.2, 59.2, 21, 60.5, 21.6, 64.5, 25, 68.8, 29.5, 69.8, 31.6, 69.6],\n  [1, 0.9, 26.2, 66.8, 26.4, 70, 26.2, 92], [0.85, 0.9, 26.6, 96, 26.4, 118.5], [0.45, 0.7, 24, 97, 24.4, 118.5],\n  [0.7, 0.75, 25.8, 120.5, 24.6, 124.5, 23.2, 126.2], [0.95, 0.9, 18.3, 28.4, 12.9, 46.6],\n  [0.55, 0.8, 12.2, 47.8, 7.9, 64.2], [0.55, 0.8, 13.6, 47.6, 9.5, 64.4], [0.45, 0.7, 8.6, 65.6, 6.4, 76],\n];\nfunction bones(P) {\n  const bone = (P.bone = F32(N)), skull = [0.5, 0.9], all = [skull, ...BONES];\n  for (let a = 0; a \u003c 2; a += 0.2) skull.push(31.5 - 5.6 * sin(a), 9.6 - 7.6 * cos(a));\n  for (let y = 18.5; y \u003c 64; y += 2.7) all.push([0.8, 0.85, 30.8, y, 32.2, y]);\n  for (let i = 0; i \u003c 8; i++) {\n    const y = 27.6 + i * 2.5, w = 21.7 + i * 0.3;\n    all.push([0.42, 0.65, 30.6, y, 26, y - 0.9, w, y + 1.2, w + 0.2, y + 3.4, w + 3 + i * 0.4, y + 5.2, 29.8 - i * 0.2, y + 6.2 - i * 0.2]);\n  }\n  for (const [r, v, ...q] of all)\n    for (let i = 2; i \u003c q.length; i += 2) {\n      const [x0, y0, x1, y1] = q.slice(i - 2, i + 2);\n      for (let y = max(0, floor(min(y0, y1) - r - 1)); y \u003c= min(H - 1, ceil(max(y0, y1) + r + 1)); y++)\n        for (let x = max(0, floor(min(x0, x1) - r - 1)); x \u003c= min(31, ceil(max(x0, x1) + r + 1)); x++) {\n          const a = clamp(0.5 - seg(x, y, x0, y0, x1, y1, r, r), 0, 1) * v, p = y * W + x;\n          if (a > bone[p]) bone[p] = bone[p + 63 - 2 * x] = a;\n        }\n    }\n}\n\n// The named vessels; four levels of branches grow between them.\nfunction vessels(P) {\n  const ves = (P.ves = []);\n  const add = (kind, parent, r, pts) => (ves.push({ kind, parent, r, pts, lv: 0 }), ves[ves.length - 1]);\n  const pair = (kind, pr, pl, r, pts) => [add(kind, pr, r, pts), add(kind, pl, r, pts.map((v, i) => (i & 1 ? v : 63 - v)))];\n  // Arteries, from the aorta out.\n  const ao = add(0, null, 1.3, [33.4, 35.5, 32.4, 31.6, 32.7, 29, 34, 27.6, 35.8, 28.4, 36.1, 31, 34.9, 35, 33.9, 40, 33.4, 47, 33, 55, 31.5, 62.5]);\n  const bc = add(0, ao, 1, [32.9, 28.3, 30.8, 26.9, 29.6, 25.6]);\n  const carR = add(0, bc, 0.8, [29.6, 25.6, 30, 21.5, 30, 17.5, 29.6, 15]);\n  const carL = add(0, ao, 0.8, [34.4, 27.8, 33.4, 24.5, 33, 21.5, 33, 17.5, 33.4, 15]);\n  pair(0, carR, carL, 0.6, [29.6, 15, 29.1, 12.2, 29.6, 9.6, 30.8, 8]);\n  pair(0, carR, carL, 0.55, [29.6, 15.4, 27.6, 13.6, 26.3, 10.2, 26.6, 6, 28.4, 3]);\n  const subR = add(0, bc, 0.9, [29.6, 25.6, 26.2, 26, 22.6, 26.7, 19.8, 28]);\n  const subL = add(0, ao, 0.9, [35.8, 28.4, 37.8, 26.6, 40.6, 26.8, 43.2, 28]);\n  const [brR, brL] = pair(0, subR, subL, 0.8, [19.8, 28, ...limb(ARM, [0.15, -0.3, 0.5, -0.28, 0.85, -0.22, 1, -0.1])]);\n  pair(0, brR, brL, 0.55, limb(ARM, [1, -0.1, 1.2, 0.35, 1.6, 0.42, 2, 0.42, 2.3, 0.15, 2.5, -0.2]));\n  const [ilR, ilL] = pair(0, ao, ao, 1, [31.5, 62.5, 30, 64.2, 28.6, 66.3]);\n  const [feR, feL] = pair(0, ilR, ilL, 0.85, [28.6, 66.3, ...limb(LEG, [0.08, -0.32, 0.4, -0.3, 0.75, -0.24, 1, -0.12])]);\n  pair(0, feR, feL, 0.55, limb(LEG, [1, -0.12, 1.25, -0.32, 1.6, -0.36, 1.95, -0.4, 2.3, -0.15, 2.75, 0.1]));\n  pair(0, feR, feL, 0.55, limb(LEG, [1.02, 0, 1.2, 0.36, 1.6, 0.42, 2, 0.32, 2.45, 0.2, 2.95, 0.35]));\n  // Veins, from the venae cavae out; the sinus over the brain joins the jugulars.\n  const svc = add(1, null, 1.2, [30.3, 35.6, 29.9, 31, 29.9, 27.4]);\n  const bvR = add(1, svc, 1, [29.9, 27.4, 28.2, 26, 26.6, 25.4]);\n  const bvL = add(1, svc, 0.9, [29.9, 27.4, 32.4, 26.3, 34.8, 25.6, 36.4, 25.4]);\n  pair(1, bvR, bvL, 0.8, [28.4, 25.8, 28.4, 21.5, 28.5, 17.5, 28.3, 14.4, 27.6, 11.6, 27.9, 7.2, 29.4, 4.6, 31.5, 3.9]);\n  const [axR, axL] = pair(1, bvR, bvL, 0.9, [26.6, 25.4, 23.2, 26.1, 20.4, 27.8]);\n  pair(1, axR, axL, 0.55, [20.4, 27.8, ...limb(ARM, [0.2, -0.68, 0.6, -0.64, 1, -0.68, 1.5, -0.78, 2, -0.78, 2.25, -0.45])]);\n  pair(1, axR, axL, 0.5, [21.2, 27, ...limb(ARM, [0.08, 0.5, 0.5, 0.64, 1, 0.7, 1.5, 0.78, 2, 0.78, 2.25, 0.5])]);\n  const ivc = add(1, null, 1.2, [30.5, 42.5, 30.8, 48, 31, 56, 31.4, 62.8]);\n  const [icR, icL] = pair(1, ivc, ivc, 1, [31.4, 62.8, 30, 65.4, 29.8, 67.2]);\n  pair(1, icR, icL, 0.8, [29.8, 67.2, ...limb(LEG, [0.1, -0.54, 0.4, -0.54, 0.75, -0.46, 1, -0.3, 1.3, -0.05, 1.7, 0, 2, 0.02, 2.4, -0.1])]);\n  pair(1, icR, icL, 0.5, [30, 68, ...limb(LEG, [0.15, -0.8, 0.5, -0.82, 1, -0.82, 1.5, -0.86, 2, -0.85, 2.4, -0.5, 2.8, -0.3])]);\n  // The lungs: blue blood out along the pulmonary arteries, red back.\n  const pt = add(2, null, 1.1, [32.4, 37, 31.6, 33.4, 31.8, 31.4]);\n  pair(2, pt, pt, 0.8, [31.8, 31.4, 29, 31.8, 26.4, 33.4, 25, 35]);\n  add(3, null, 0.8, [35, 36.2, 31.4, 37, 28, 37.4, 25.6, 38.6]);\n  add(3, null, 0.8, [35.6, 35.8, 37.6, 36.6, 39.2, 37.8]);\n  for (const v of ves) samples(v);\n  grow(P);\n}\n\n// Resample a vessel every 0.4 LED with its distance from the heart.\nfunction samples(v) {\n  const { pts, parent: q } = v;\n  let d = v.d0 || 0, best = 1e9;\n  if (q && v.d0 === undefined)\n    for (let i = 0; i \u003c q.x.length; i++) {\n      const e = hypot(q.x[i] - pts[0], q.y[i] - pts[1]);\n      if (e \u003c best) [best, d] = [e, q.d[i] + e];\n    }\n  [v.x, v.y, v.d] = [[pts[0]], [pts[1]], [d]];\n  for (let i = 2; i \u003c pts.length; i += 2) {\n    const x0 = pts[i - 2], y0 = pts[i - 1], dx = pts[i] - x0, dy = pts[i + 1] - y0, l = hypot(dx, dy), n = max(1, ceil(l / 0.4));\n    for (let k = 1; k \u003c= n; k++) v.x.push(x0 + (dx * k) / n), v.y.push(y0 + (dy * k) / n), v.d.push(d + (l * k) / n);\n    d += l;\n  }\n}\n\n// Branches grow level by level, shuffled so arteries and veins take their room\n// in turn; a branch bends away from the skin or another vessel, or stops.\nfunction grow(P) {\n  const occ = new Uint8Array(N);\n  const mark = (v) => v.x.forEach((x, i) => (occ[round(v.y[i]) * W + round(x)] = 1));\n  P.ves.forEach(mark);\n  let front = P.ves.slice();\n  for (let lv = 1; lv \u003c= 4; lv++) {\n    const next = [];\n    front.sort(() => rnd() - 0.5);\n    for (const v of front) {\n      const n = v.x.length, want = v.kind >= 2 ? 2 : 1;\n      for (let s = GAP[lv] * rnd(); s \u003c n * 0.4 - 0.8; s += GAP[lv] * (0.6 + 0.8 * rnd())) {\n        const i = min(n - 2, round(s / 0.4)), len = LEN[lv] * (0.5 + rnd());\n        let a = atan2(v.y[i + 1] - v.y[i], v.x[i + 1] - v.x[i]) + (rnd() \u003c 0.5 ? -1 : 1) * (0.35 + 0.6 * rnd());\n        let x = v.x[i], y = v.y[i];\n        const pts = [x, y];\n        for (let st = 1; st \u003c= len; st++) {\n          a += (rnd() - 0.5) * 0.7;\n          const turn = TURN.find((tu) => {\n            const nx = x + cos(a + tu), ny = y + sin(a + tu);\n            const q = round(ny) * W + round(nx);\n            return P.room[q] === want && (st \u003c 2 + v.r || !occ[q]);\n          });\n          if (turn === undefined) break;\n          a += turn;\n          pts.push((x += cos(a)), (y += sin(a)));\n        }\n        if (pts.length \u003c 6) continue;\n        const b = { kind: v.kind, parent: v, r: RAD[lv], pts, lv, d0: v.d[i] };\n        samples(b), mark(b), next.push(b);\n      }\n    }\n    P.ves.push(...(front = next));\n  }\n}\n\n// The vessels Detail shows in a red and a blue layer: weight, key (seconds\n// after a beat), level, pulse or flow. Low detail draws the trunks bold.\nfunction raster(P, det) {\n  for (const k of [\"wR\", \"kR\", \"lR\", \"mR\", \"wB\", \"kB\", \"lB\", \"mB\"]) (P[k] = P[k] || F32(N)).fill(0);\n  for (const v of P.ves) {\n    const vis = clamp(((det - 1) * 7) / 6 + 1.5 - v.lv, 0, 1);\n    if (vis \u003c= 0) continue;\n    const red = v.kind === 0 || v.kind === 3, flow = v.kind & 1;\n    const [w, kk, l, mo] = red ? [P.wR, P.kR, P.lR, P.mR] : [P.wB, P.kB, P.lB, P.mB];\n    const r = v.r * (v.lv ? 1 : 1.25 - 0.15 * (det - 1)), g = v.lv ? 0 : 0.9, e0 = r + g + 0.5;\n    for (let i = 0; i \u003c v.x.length; i++) {\n      const x = v.x[i], y = v.y[i], key = flow ? max(0, 0.3 + (125 - v.d[i]) / CV) : v.d[i] / CA;\n      for (let py = max(0, ceil(y - e0)); py \u003c= min(H - 1, floor(y + e0)); py++)\n        for (let px = max(0, ceil(x - e0)); px \u003c= min(W - 1, floor(x + e0)); px++) {\n          const e = hypot(px - x, py - y), p = py * W + px;\n          let a = clamp(r + 0.5 - e, 0, 1);\n          if (g) a = max(a, 0.16 * clamp(e0 - e, 0, 1));\n          if ((a *= vis) > w[p]) [w[p], kk[p], l[p], mo[p]] = [a, key, v.lv, flow];\n        }\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  if (!P.ves) setup(P);\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.chart = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 1, 5), det = clamp(k[2], 1, 4), E = (P.E = clamp(k[3], 0, 1));\n  if (abs(det - P.det) > 0.02) raster(P, (P.det = det));\n  let kick = false;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.adr = 1;\n    if (P.t - P.last > 0.28) [P.ph, kick] = [1, true];\n  }\n  P.adr *= exp(-dt / 5);\n  P.bpm = min(200, 36 * rate * (1 + 0.6 * E * E) + 75 * P.adr);\n  const T = (P.T = 60 / P.bpm);\n  P.tsys = clamp(0.16 + 0.17 * T, 0.2, 0.36);\n  P.stroke = 1 + 0.45 * E + 0.5 * P.adr;\n  if (!P.started) {\n    // Open as if the heart had been beating for a while.\n    P.started = true;\n    for (let i = 12; i >= 1; i--) P.beats.push([-(i - 0.6) * T, P.stroke]);\n    [P.ph, P.last, P.brPh] = [0.6, -0.6 * T, 0.15];\n  }\n  P.t += dt;\n  if ((P.ph += dt / T) >= 1) {\n    P.last = P.t - (P.ph = kick ? 0 : P.ph % 1) * T;\n    P.beats.push([P.last, P.stroke * (kick ? 1.5 : 1)]);\n  }\n  while (P.beats.length && P.t - P.beats[0][0] > 5.6) P.beats.shift();\n  P.brPh += dt / max(1, 4.4 - 2.6 * E - 1.2 * P.adr);\n  P.br = (0.5 - 0.5 * cos(2 * PI * P.brPh)) * (0.55 + 0.45 * E + 0.4 * P.adr);\n  P.eh = (P.eh + dt * 16) % 18;\n  tables(P), readout(P);\n}\n\n// Each beat's waves by the time since it: TA the sharp arterial pulse with its\n// dicrotic notch, TP the softer flush of the tissue, TV the venous swell.\nfunction tables(P) {\n  const { TA, TV, TP, t } = P, td = 0.13 * (1 + 0.4 * P.E);\n  TA.fill(0), TV.fill(0), TP.fill(0);\n  const span = (age, a, b, fn) => {\n    for (let k = max(0, ceil((age - a) * KS)); k \u003c= min(KN - 1, floor((age + b) * KS)); k++) fn(k, age - k / KS);\n  };\n  for (const [tb, a] of P.beats) {\n    const age = t - tb;\n    span(age, 0.9, 0, (k, s) => (TA[k] += a * ((1 - exp(-s / 0.02)) * exp(-s / td) + 0.22 * g2((s - 0.3) / 0.05))));\n    span(age, 1.4, 0, (k, s) => (TP[k] += a * (1 - exp(-s / 0.06)) * exp(-s / 0.26)));\n    span(age, 0.4, 0.4, (k, s) => (TV[k] += a * g2(s / 0.13)));\n  }\n}\n\nconst look = (T, key) => {\n  const f = key * KS, i = f | 0;\n  return i \u003c KN - 1 ? T[i] + (T[i + 1] - T[i]) * (f - i) : 0;\n};\n\nfunction ecgAt(P, tt) {\n  let v = 0;\n  for (const [tb] of P.beats) {\n    const s = tt - tb;\n    if (s > -0.3 && s \u003c 0.6)\n      v += 0.13 * g2((s + 0.16) / 0.03) - 0.12 * g2((s + 0.022) / 0.01) + g2(s / 0.016) - 0.28 * g2((s - 0.03) / 0.012) + 0.3 * g2((s - P.tsys + 0.07) / 0.055);\n  }\n  return v;\n}\n\n// The monitor beside the feet: an ECG sweep on the left, the rate on the right.\nfunction readout(P) {\n  const { hud } = P;\n  hud.fill(0, 100 * W, 120 * W);\n  for (let y = 104; y \u003c 117; y += 3) for (let x = 2; x \u003c 19; x += 3) hud[y * W + x] = 0.12;\n  for (let c = 0; c \u003c 18; c++) {\n    const a = (P.eh - c + 18) % 18;\n    if (a > 16.4) continue;\n    let lo = 999, hi = 0;\n    for (let s = 0; s \u003c= 6; s++) {\n      const yy = round(112 - 8 * ecgAt(P, P.t - (a + s / 6) / 16));\n      [lo, hi] = [min(lo, yy), max(hi, yy)];\n    }\n    for (let y = max(101, lo); y \u003c= min(118, hi); y++) hud[y * W + c + 1] = a \u003c 1 ? 1 : 0.95 - (0.55 * a) / 18;\n  }\n  const fl = 0.45 + 0.55 * g2((P.t - P.last - 0.05) / 0.08);\n  HEART.forEach((row, j) => {\n    for (let i = 0; i \u003c 5; i++) if ((row >> (4 - i)) & 1) hud[(105 + j) * W + 46 + i] = fl;\n  });\n  const put = (s, x0, y0, b) => {\n    for (let n = 0; n \u003c s.length; n++)\n      for (let q = 0; q \u003c 15; q++) if ((GLYPH[s[n]] >> (14 - q)) & 1) hud[(y0 + ((q / 3) | 0)) * W + x0 + n * 4 + (q % 3)] = b;\n  };\n  const txt = String(round(P.bpm));\n  put(txt, 63 - txt.length * 4, 105, 0.95);\n  put(\"BPM\", 51, 112, 0.55);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.wR) return;\n  const { m, rim, dep, core, geo, bone, tex, mus, hud, TA, TV, TP, wR, kR, lR, mR, wB, kB, lB, mB, f, c0, c1, E, br } = P;\n  const fc = P.chart * 2, i0 = min(1, floor(fc)), u = smooth(0.3, 0.7, fc - i0);\n  // The heart squeezes in systole and flashes on the first sound, less on the second.\n  const since = P.t - P.last, sys = since \u003c P.tsys ? sin((PI * since) / P.tsys) ** 0.7 : 0;\n  const s = 1 - (0.1 + 0.08 * E + 0.05 * P.adr) * sys;\n  const flash = g2((since - 0.03) / 0.06) + 0.6 * g2((since - P.tsys) / 0.045);\n  // The more capillaries drawn, the more the skin flushes as a pulse passes.\n  const bla = 0.3 + 0.24 * (P.det - 1);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      Object.assign(f, { y, m: m[p], rim: rim[p], dep: dep[p], core: core[p], mus: mus[p], bone: bone[p], hud: hud[p], lw: 0, hw: 0, ho: 0 });\n      f.bl = m[p] > 0 ? look(TP, geo[p] / CA + 0.04) * (bla + 0.3 * E + 0.7 * E * mus[p]) : 0;\n      if (x > 17 && x \u003c 46 && y > 24 && y \u003c 54) {\n        const e0 = lung(x, y, 0, br), e1 = lung(x, y, 1, br), e = min(e0, e1), L = LUNG[e0 \u003c e1 ? 0 : 1];\n        if (e \u003c 1.05) {\n          f.lw = clamp((1.03 - e) * 7, 0, 1) * m[p];\n          f.lrim = clamp(1 - abs(e - 0.92) / 0.1, 0, 1);\n          f.ox = clamp(0.2 + 0.4 * br + 0.5 * look(TP, hypot(x - L[4], y - L[5]) / 40 + 0.06), 0, 1.2);\n          f.lt = tex[p];\n        }\n      }\n      if ((f.wb = wB[p]) > 0) [f.bm, f.bp, f.lb] = [mB[p], look(mB[p] ? TV : TA, kB[p]), lB[p]];\n      if ((f.wr = wR[p]) > 0) [f.rm, f.rp, f.lr] = [mR[p], look(mR[p] ? TV : TA, kR[p]), lR[p]];\n      if (x > 24 && x \u003c 45 && y > 27 && y \u003c 49) {\n        const e = heart(P, x, y, s);\n        f.ho = clamp((1.3 - e) * 5, 0, 1);\n        if (e \u003c 1.1) {\n          f.hw = clamp((1.02 - e) * 5, 0, 1);\n          f.hs = smooth(-0.9, 0.3, P.hu);\n          f.hr = clamp(1 - abs(e - 0.86) / 0.16, 0, 1);\n          f.hb = 0.62 + 0.45 * flash + 0.2 * sys - (abs(P.hu + 0.3) \u003c 0.4 && P.hv > -2 ? 0.25 : 0);\n        }\n      }\n      if (i0 === 0) anat(f, c0);\n      else pal(f, CHARTS[1], c0, E);\n      if (u > 0) {\n        pal(f, CHARTS[i0 + 1], c1, E);\n        for (let c = 0; c \u003c 3; c++) c0[c] += (c1[c] - c0[c]) * u;\n      }\n      display.setPixel(x, y, min(255, c0[0]), min(255, c0[1]), min(255, c0[2]));\n    }\n}\n\n// Lerp o toward the colour c at brightness b by w; past full brightness it\n// runs toward a hot pale core.\nfunction tint(o, c, b, w) {\n  const k = min(b, 1), h = max(0, b - 1) * 0.9;\n  o[0] += (c[0] * k + 255 * h - o[0]) * w;\n  o[1] += (c[1] * k + 190 * h - o[1]) * w;\n  o[2] += (c[2] * k + 170 * h - o[2]) * w;\n}\n\n// The anatomical chart: a pale ghost of a body on a slate ground.\nfunction anat(f, o) {\n  const top = 1 - f.y / H, t = f.rim, bl = f.bl;\n  [o[0], o[1], o[2]] = [2 + 3 * top, 5 + 5 * top, 12 + 9 * top];\n  if (f.m > 0) tint(o, [18 + 34 * t + 8 * f.dep + 80 * bl, 26 + 44 * t + 10 * f.dep + 14 * bl, 42 + 50 * t + 16 * f.dep + 40 * bl], 1, f.m);\n  if (f.lw > 0) {\n    const ox = f.ox;\n    tint(o, [70 + 170 * ox, 60 + 30 * ox, 160 - 40 * ox], f.lt * (0.55 + 0.35 * ox) + 0.35 * f.lrim, f.lw);\n  }\n  const vb = () => f.wb > 0 && tint(o, BLUE[f.lb], (f.bm ? 0.36 + 0.8 * f.bp : 0.4 + 1.05 * f.bp) + 0.04 * f.lb, f.wb);\n  const vr = () => f.wr > 0 && tint(o, RED[f.lr], (f.rm ? 0.36 + 0.8 * f.rp : 0.32 + 1.05 * f.rp) + 0.05 * f.lr, f.wr);\n  // The vessel that owns the LED is drawn last.\n  if (f.wb > f.wr) vr(), vb();\n  else vb(), vr();\n  for (let c = 0; c \u003c 3; c++) o[c] *= 1 - 0.55 * f.ho;\n  if (f.hw > 0) {\n    const hs = f.hs, b = f.hb, k = 0.45 * f.hr;\n    tint(o, [(70 + 170 * hs) * b + 255 * k, (80 - 45 * hs) * b + 170 * k, (230 - 185 * hs) * b + 180 * k], 1, f.hw);\n  }\n  [40, 235, 140].forEach((c, i) => (o[i] += c * f.hud));\n}\n\n// The angiogram and the thermal chart: one value, then its colour table.\nfunction pal(f, c, o, E) {\n  const [lt, bg, t0, rim, dep, core, bl, mus, heat, bone, lung, ox, a0, a1, v0, v1, h0, h1, hud] = c;\n  let v = bg * (1.2 - (0.6 * f.y) / H);\n  if (f.m > 0) v += (t0 + rim * f.rim + dep * f.dep + core * f.core + bl * f.bl + (heat + mus * f.mus) * E - v) * f.m;\n  if (f.lw > 0) v += (lung + ox * f.ox * f.lt - v) * f.lw;\n  v += (bone - v) * f.bone * f.m * (bone > 0);\n  if (f.wb > 0) v += ((f.bm ? v0 + v1 * f.bp : a0 * 0.9 + a1 * f.bp) * (1 - 0.08 * f.lb) - v) * f.wb;\n  if (f.wr > 0) v += ((f.rm ? v0 + v1 * f.rp : a0 + a1 * f.rp) * (1 - 0.08 * f.lr) - v) * f.wr;\n  v *= 1 - 0.35 * f.ho;\n  if (f.hw > 0) v += (h0 + h1 * (f.hb - 0.62) + 0.15 * f.hr - v) * f.hw;\n  const i = clamp(round(max(v, f.hud * hud) * 255), 0, 255) * 3;\n  [o[0], o[1], o[2]] = [lt[i], lt[i + 1], lt[i + 2]];\n}\n","layer":{"id":"layer-circulation","type":"code","name":"circulation","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Circulation\n// Family:  body\n// Idea:    A standing figure drawn head to feet like an anatomical chart, whose heart beats lub-dub and sends each pulse of red blood out along the arteries to the head, hands and feet while blue blood flows back up the veins and the lungs flush pink.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the anatomical wall charts of the human circulatory system\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Chart=0..1, Rate=1..5, Detail=1..4, Effort=0..1\n//\n// Knob 1: Chart. The red and blue anatomical chart at 0, an angiogram with the skeleton showing at 0.5, a thermal camera at 1.\n// Knob 2: Rate. The resting heart rate, 36 a minute at 1, 72 at 2, 180 at 5; the faster, the closer the pulses follow each other.\n// Knob 3: Detail. How far the vessels branch, from the named arteries and veins drawn bold at 1 to the capillaries at 4.\n// Knob 4: Effort. From rest to a hard run: the heart beats faster and harder, the breath deepens and the arms and legs flush with blood.\n// Buttons: K1 tap startles the figure: one hard beat at once and a rush of adrenaline that races the heart for a few seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, abs, exp, sin, cos, atan2, floor, ceil, round, hypot, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst g2 = (z) => exp(-z * z);\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\n\n// Pulse tables, 100 steps a second; the arterial pulse and the venous return\n// run at CA and CV LEDs a second.\nconst KS = 100, KN = 520, CA = 80, CV = 30;\n// Vessel kinds: 0 artery, 1 vein, 2 and 3 the lungs' arteries and veins.\n// Branch levels 1..4: spacing, length, radius; the turns a blocked branch tries.\nconst GAP = [0, 7, 3, 2.2, 1.8], LEN = [0, 9, 7, 5, 3.5], RAD = [0, 0.52, 0.43, 0.37, 0.33];\nconst TURN = [0, 0.5, -0.5, 1, -1];\n\n// The trunk's half-width row by row, from the base of the neck to the crotch.\nconst TY = [22.5, 24, 25.5, 27.5, 31, 36, 44, 51, 57, 63, 67, 70.5];\nconst TW = [4.6, 9.5, 13, 14.3, 13.8, 13, 11.6, 10.3, 11, 12.4, 11.2, 6];\n// Arm and leg axes on the viewer's left, x y radius per joint.\nconst ARM = [18.3, 28.4, 3.4, 12.8, 47, 2.6, 8.6, 64.5, 2.2, 7.6, 70.5, 2.1, 6.6, 76, 1.3];\nconst LEG = [26.4, 66, 5.9, 26.2, 94, 3.7, 25.8, 119.5, 2, 24, 124.8, 2.2];\n// Capsules x1 y1 r1 x2 y2 r2 of the neck, an ear, a thumb, a calf and the\n// limbs; the body is folded at the middle, so they stand for both sides.\nconst CAPS = [[31.5, 14, 4, 31.5, 24, 4.2], [25.1, 8.8, 1.2, 25.3, 11.6, 1], [7, 66.6, 1, 5.3, 70.6, 0.8], [25.6, 98, 3.5, 25.6, 110, 2.6]];\nfor (const L of [ARM, LEG]) for (let i = 0; i \u003c L.length - 3; i += 3) CAPS.push([0, 1, 2, 3, 4, 5].map((j) => L[i + j]));\n// The lungs: centre, radii, hilum. The heart's centre.\nconst LUNG = [[25, 38.6, 5.4, 11.6, 27.6, 34], [38.2, 39.2, 5.1, 11, 35.6, 34.5]];\nconst HX = 34.4, HY = 38.4;\n// Artery and vein colours from the big trunks to the capillaries.\nconst RED = [[238, 30, 40], [238, 30, 40], [232, 38, 70], [215, 46, 110], [190, 56, 150]];\nconst BLUE = [[46, 70, 240], [46, 70, 240], [66, 68, 236], [96, 66, 226], [128, 66, 214]];\n// The readout's 3x5 letters, five rows of three bits, and its heart.\nconst GLYPH = {\n  0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7292, 8: 0x7bef, 9: 0x7bcf,\n  B: 0x6bae, P: 0x6ba4, M: 0x5fed,\n};\nconst HEART = [10, 31, 31, 14, 4];\n\n// A colour table from stops of position and r g b.\nconst lut = (s) =>\n  Uint8Array.from({ length: 768 }, (_, n) => {\n    const v = ((n / 3) | 0) / 255, c = n % 3;\n    let j = 0;\n    while (j \u003c s.length - 8 && v > s[j + 4]) j += 4;\n    return s[j + 1 + c] + (s[j + 5 + c] - s[j + 1 + c]) * clamp((v - s[j]) / (s[j + 4] - s[j]), 0, 1);\n  });\n// The angiogram and the thermal chart are one value through a colour table;\n// the weights are in the order pal() reads them.\nconst CHARTS = [\n  null,\n  [lut([0, 0, 0, 0, 0.15, 8, 20, 38, 0.4, 42, 80, 112, 0.7, 150, 196, 220, 1, 240, 252, 255]), 0.04, 0.1, 0.07, 0.14, 0, 0.06, 0, 0, 0.74, 0.05, 0.07, 0.5, 0.5, 0.36, 0.2, 0.5, 0.3, 0.95],\n  [lut([0, 0, 0, 10, 0.2, 34, 0, 86, 0.4, 145, 0, 140, 0.6, 232, 64, 36, 0.8, 255, 172, 0, 1, 255, 255, 210]), 0.07, 0.2, -0.05, 0.08, 0.3, 0.2, 0.18, 0.12, 0, 0.5, 0.16, 0.7, 0.3, 0.56, 0.12, 0.8, 0.2, 1],\n];\n\n// Distance to a segment, less a radius running r0..r1 along it.\nfunction seg(x, y, x0, y0, x1, y1, r0, r1) {\n  const dx = x1 - x0, dy = y1 - y0;\n  const t = clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1e-6), 0, 1);\n  return hypot(x - x0 - dx * t, y - y0 - dy * t) - r0 - (r1 - r0) * t;\n}\n\n// Signed distance to the skin, negative inside.\nfunction sdBody(x, y) {\n  let d = (hypot((x - 31.5) / 6.4, (y - 9.8) / 8.6) - 1) * 6.4, i = 0;\n  while (i \u003c TY.length - 2 && y > TY[i + 1]) i++;\n  const u = clamp((y - TY[i]) / (TY[i + 1] - TY[i]), 0, 1);\n  d = min(d, max(abs(x - 31.5) - TW[i] - (TW[i + 1] - TW[i]) * u, TY[0] - y, y - TY[TY.length - 1]));\n  const xr = x \u003c 31.5 ? x : 63 - x;\n  for (const c of CAPS) d = min(d, seg(xr, y, c[0], c[1], c[3], c[4], c[2], c[5]));\n  return d;\n}\n\nfunction lung(x, y, j, br) {\n  const L = LUNG[j], ry = L[3] * (1 + 0.07 * br);\n  const dy = (y - L[1] - (ry - L[3]) * 0.8) / ry;\n  return hypot(((x - L[0]) / (L[2] * (1 + 0.04 * br))) * (1 + 0.35 * max(0, -dy)), dy);\n}\n\n// The heart in its own frame: v runs from the base to the apex, u across.\nfunction heart(P, x, y, s) {\n  const dx = x - HX, dy = y - HY, k = s * 1.12;\n  const v = (P.hv = (dx * 0.55 + dy * 0.835) / k), u = (P.hu = (dx * 0.835 - dy * 0.55) / k);\n  return v \u003c 0 ? hypot(u / 5, v / 4.6) : hypot(u / (5 * (1 - 0.8 * (v / 7) ** 1.5) + 0.05), v / 7);\n}\n\n// Points along a limb axis: t counts joints, f is the share of the radius off\n// the axis, toward the outside of the limb when positive.\nfunction limb(L, list) {\n  const out = [];\n  for (let i = 0; i \u003c list.length; i += 2) {\n    const t = list[i], k = min(floor(t), L.length / 3 - 2), u = t - k;\n    const [x0, y0, r0, x1, y1, r1] = L.slice(k * 3, k * 3 + 6);\n    const dx = x1 - x0, dy = y1 - y0, l = hypot(dx, dy), r = (r0 + (r1 - r0) * u) * list[i + 1];\n    out.push(x0 + dx * u - (dy / l) * r, y0 + dy * u + (dx / l) * r);\n  }\n  return out;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, started: false, beats: [], ph: 0, br: 0, brPh: 0, adr: 0, det: -1, eh: 0, last: -9, f: {}, TA: F32(KN) });\n  Object.assign(P, { TV: F32(KN), TP: F32(KN), hud: F32(N), c0: F32(3), c1: F32(3) });\n  body(P), bones(P), vessels(P);\n}\n\n// Skin mask, rim, depth, muscle, and the way through the body from the heart.\nfunction body(P) {\n  const [m, rim, dep, mus] = [\"m\", \"rim\", \"dep\", \"mus\"].map((k) => (P[k] = F32(N)));\n  const geo = (P.geo = F32(N).fill(1e4)), room = (P.room = new Uint8Array(N));\n  P.tex = F32(N).map(() => 0.75 + 0.35 * rnd());\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p / W) | 0, sd = sdBody(x, y), lu = min(lung(x, y, 0, 0), lung(x, y, 1, 0));\n    // Room to grow: 1 in the body but not the lungs or heart, 2 in the lungs.\n    room[p] = lu \u003c 0.9 ? 2 : sd \u003c -0.6 && lu > 1.1 && hypot(x - HX, y - HY) > 6.5 ? 1 : 0;\n    [m[p], rim[p], dep[p]] = [clamp(0.5 - sd, 0, 1), clamp(1 - abs(sd + 0.7) / 1.1, 0, 1), clamp(-sd / 5, 0, 1)];\n    mus[p] = m[p] * (y > 68 ? 1 : smooth(12.5, 14.5, abs(x - 31.5)));\n  }\n  geo[38 * W + 34] = 0;\n  const NB = [1, 1, W, 1, W + 1, 1.414, W - 1, 1.414];\n  for (let pass = 0; pass \u003c 4; pass++)\n    for (let q = 0, sg = pass & 1 ? 1 : -1; q \u003c N; q++) {\n      const p = sg > 0 ? N - 1 - q : q;\n      if (m[p] > 0.2)\n        for (let j = 0; j \u003c 8; j += 2) if (geo[p + sg * NB[j]] + NB[j + 1] \u003c geo[p]) geo[p] = geo[p + sg * NB[j]] + NB[j + 1];\n    }\n  P.core = Float32Array.from(geo, (g) => exp(-g / 55));\n}\n\n// The skeleton for the angiogram: radius, brightness and a polyline for each\n// bone of the left half, which is mirrored.\nconst BONES = [\n  [0.5, 0.8, 26.5, 12.6, 26.9, 15.4, 28.6, 17.3, 31.6, 17.8], [0.55, 0.8, 31.6, 25.4, 25, 24.6, 19.5, 26.4], [0.7, 0.7, 31.6, 26.6, 31.6, 41],\n  [0.6, 0.75, 31.6, 63.5, 27.5, 62.4, 23.2, 59.2, 21, 60.5, 21.6, 64.5, 25, 68.8, 29.5, 69.8, 31.6, 69.6],\n  [1, 0.9, 26.2, 66.8, 26.4, 70, 26.2, 92], [0.85, 0.9, 26.6, 96, 26.4, 118.5], [0.45, 0.7, 24, 97, 24.4, 118.5],\n  [0.7, 0.75, 25.8, 120.5, 24.6, 124.5, 23.2, 126.2], [0.95, 0.9, 18.3, 28.4, 12.9, 46.6],\n  [0.55, 0.8, 12.2, 47.8, 7.9, 64.2], [0.55, 0.8, 13.6, 47.6, 9.5, 64.4], [0.45, 0.7, 8.6, 65.6, 6.4, 76],\n];\nfunction bones(P) {\n  const bone = (P.bone = F32(N)), skull = [0.5, 0.9], all = [skull, ...BONES];\n  for (let a = 0; a \u003c 2; a += 0.2) skull.push(31.5 - 5.6 * sin(a), 9.6 - 7.6 * cos(a));\n  for (let y = 18.5; y \u003c 64; y += 2.7) all.push([0.8, 0.85, 30.8, y, 32.2, y]);\n  for (let i = 0; i \u003c 8; i++) {\n    const y = 27.6 + i * 2.5, w = 21.7 + i * 0.3;\n    all.push([0.42, 0.65, 30.6, y, 26, y - 0.9, w, y + 1.2, w + 0.2, y + 3.4, w + 3 + i * 0.4, y + 5.2, 29.8 - i * 0.2, y + 6.2 - i * 0.2]);\n  }\n  for (const [r, v, ...q] of all)\n    for (let i = 2; i \u003c q.length; i += 2) {\n      const [x0, y0, x1, y1] = q.slice(i - 2, i + 2);\n      for (let y = max(0, floor(min(y0, y1) - r - 1)); y \u003c= min(H - 1, ceil(max(y0, y1) + r + 1)); y++)\n        for (let x = max(0, floor(min(x0, x1) - r - 1)); x \u003c= min(31, ceil(max(x0, x1) + r + 1)); x++) {\n          const a = clamp(0.5 - seg(x, y, x0, y0, x1, y1, r, r), 0, 1) * v, p = y * W + x;\n          if (a > bone[p]) bone[p] = bone[p + 63 - 2 * x] = a;\n        }\n    }\n}\n\n// The named vessels; four levels of branches grow between them.\nfunction vessels(P) {\n  const ves = (P.ves = []);\n  const add = (kind, parent, r, pts) => (ves.push({ kind, parent, r, pts, lv: 0 }), ves[ves.length - 1]);\n  const pair = (kind, pr, pl, r, pts) => [add(kind, pr, r, pts), add(kind, pl, r, pts.map((v, i) => (i & 1 ? v : 63 - v)))];\n  // Arteries, from the aorta out.\n  const ao = add(0, null, 1.3, [33.4, 35.5, 32.4, 31.6, 32.7, 29, 34, 27.6, 35.8, 28.4, 36.1, 31, 34.9, 35, 33.9, 40, 33.4, 47, 33, 55, 31.5, 62.5]);\n  const bc = add(0, ao, 1, [32.9, 28.3, 30.8, 26.9, 29.6, 25.6]);\n  const carR = add(0, bc, 0.8, [29.6, 25.6, 30, 21.5, 30, 17.5, 29.6, 15]);\n  const carL = add(0, ao, 0.8, [34.4, 27.8, 33.4, 24.5, 33, 21.5, 33, 17.5, 33.4, 15]);\n  pair(0, carR, carL, 0.6, [29.6, 15, 29.1, 12.2, 29.6, 9.6, 30.8, 8]);\n  pair(0, carR, carL, 0.55, [29.6, 15.4, 27.6, 13.6, 26.3, 10.2, 26.6, 6, 28.4, 3]);\n  const subR = add(0, bc, 0.9, [29.6, 25.6, 26.2, 26, 22.6, 26.7, 19.8, 28]);\n  const subL = add(0, ao, 0.9, [35.8, 28.4, 37.8, 26.6, 40.6, 26.8, 43.2, 28]);\n  const [brR, brL] = pair(0, subR, subL, 0.8, [19.8, 28, ...limb(ARM, [0.15, -0.3, 0.5, -0.28, 0.85, -0.22, 1, -0.1])]);\n  pair(0, brR, brL, 0.55, limb(ARM, [1, -0.1, 1.2, 0.35, 1.6, 0.42, 2, 0.42, 2.3, 0.15, 2.5, -0.2]));\n  const [ilR, ilL] = pair(0, ao, ao, 1, [31.5, 62.5, 30, 64.2, 28.6, 66.3]);\n  const [feR, feL] = pair(0, ilR, ilL, 0.85, [28.6, 66.3, ...limb(LEG, [0.08, -0.32, 0.4, -0.3, 0.75, -0.24, 1, -0.12])]);\n  pair(0, feR, feL, 0.55, limb(LEG, [1, -0.12, 1.25, -0.32, 1.6, -0.36, 1.95, -0.4, 2.3, -0.15, 2.75, 0.1]));\n  pair(0, feR, feL, 0.55, limb(LEG, [1.02, 0, 1.2, 0.36, 1.6, 0.42, 2, 0.32, 2.45, 0.2, 2.95, 0.35]));\n  // Veins, from the venae cavae out; the sinus over the brain joins the jugulars.\n  const svc = add(1, null, 1.2, [30.3, 35.6, 29.9, 31, 29.9, 27.4]);\n  const bvR = add(1, svc, 1, [29.9, 27.4, 28.2, 26, 26.6, 25.4]);\n  const bvL = add(1, svc, 0.9, [29.9, 27.4, 32.4, 26.3, 34.8, 25.6, 36.4, 25.4]);\n  pair(1, bvR, bvL, 0.8, [28.4, 25.8, 28.4, 21.5, 28.5, 17.5, 28.3, 14.4, 27.6, 11.6, 27.9, 7.2, 29.4, 4.6, 31.5, 3.9]);\n  const [axR, axL] = pair(1, bvR, bvL, 0.9, [26.6, 25.4, 23.2, 26.1, 20.4, 27.8]);\n  pair(1, axR, axL, 0.55, [20.4, 27.8, ...limb(ARM, [0.2, -0.68, 0.6, -0.64, 1, -0.68, 1.5, -0.78, 2, -0.78, 2.25, -0.45])]);\n  pair(1, axR, axL, 0.5, [21.2, 27, ...limb(ARM, [0.08, 0.5, 0.5, 0.64, 1, 0.7, 1.5, 0.78, 2, 0.78, 2.25, 0.5])]);\n  const ivc = add(1, null, 1.2, [30.5, 42.5, 30.8, 48, 31, 56, 31.4, 62.8]);\n  const [icR, icL] = pair(1, ivc, ivc, 1, [31.4, 62.8, 30, 65.4, 29.8, 67.2]);\n  pair(1, icR, icL, 0.8, [29.8, 67.2, ...limb(LEG, [0.1, -0.54, 0.4, -0.54, 0.75, -0.46, 1, -0.3, 1.3, -0.05, 1.7, 0, 2, 0.02, 2.4, -0.1])]);\n  pair(1, icR, icL, 0.5, [30, 68, ...limb(LEG, [0.15, -0.8, 0.5, -0.82, 1, -0.82, 1.5, -0.86, 2, -0.85, 2.4, -0.5, 2.8, -0.3])]);\n  // The lungs: blue blood out along the pulmonary arteries, red back.\n  const pt = add(2, null, 1.1, [32.4, 37, 31.6, 33.4, 31.8, 31.4]);\n  pair(2, pt, pt, 0.8, [31.8, 31.4, 29, 31.8, 26.4, 33.4, 25, 35]);\n  add(3, null, 0.8, [35, 36.2, 31.4, 37, 28, 37.4, 25.6, 38.6]);\n  add(3, null, 0.8, [35.6, 35.8, 37.6, 36.6, 39.2, 37.8]);\n  for (const v of ves) samples(v);\n  grow(P);\n}\n\n// Resample a vessel every 0.4 LED with its distance from the heart.\nfunction samples(v) {\n  const { pts, parent: q } = v;\n  let d = v.d0 || 0, best = 1e9;\n  if (q && v.d0 === undefined)\n    for (let i = 0; i \u003c q.x.length; i++) {\n      const e = hypot(q.x[i] - pts[0], q.y[i] - pts[1]);\n      if (e \u003c best) [best, d] = [e, q.d[i] + e];\n    }\n  [v.x, v.y, v.d] = [[pts[0]], [pts[1]], [d]];\n  for (let i = 2; i \u003c pts.length; i += 2) {\n    const x0 = pts[i - 2], y0 = pts[i - 1], dx = pts[i] - x0, dy = pts[i + 1] - y0, l = hypot(dx, dy), n = max(1, ceil(l / 0.4));\n    for (let k = 1; k \u003c= n; k++) v.x.push(x0 + (dx * k) / n), v.y.push(y0 + (dy * k) / n), v.d.push(d + (l * k) / n);\n    d += l;\n  }\n}\n\n// Branches grow level by level, shuffled so arteries and veins take their room\n// in turn; a branch bends away from the skin or another vessel, or stops.\nfunction grow(P) {\n  const occ = new Uint8Array(N);\n  const mark = (v) => v.x.forEach((x, i) => (occ[round(v.y[i]) * W + round(x)] = 1));\n  P.ves.forEach(mark);\n  let front = P.ves.slice();\n  for (let lv = 1; lv \u003c= 4; lv++) {\n    const next = [];\n    front.sort(() => rnd() - 0.5);\n    for (const v of front) {\n      const n = v.x.length, want = v.kind >= 2 ? 2 : 1;\n      for (let s = GAP[lv] * rnd(); s \u003c n * 0.4 - 0.8; s += GAP[lv] * (0.6 + 0.8 * rnd())) {\n        const i = min(n - 2, round(s / 0.4)), len = LEN[lv] * (0.5 + rnd());\n        let a = atan2(v.y[i + 1] - v.y[i], v.x[i + 1] - v.x[i]) + (rnd() \u003c 0.5 ? -1 : 1) * (0.35 + 0.6 * rnd());\n        let x = v.x[i], y = v.y[i];\n        const pts = [x, y];\n        for (let st = 1; st \u003c= len; st++) {\n          a += (rnd() - 0.5) * 0.7;\n          const turn = TURN.find((tu) => {\n            const nx = x + cos(a + tu), ny = y + sin(a + tu);\n            const q = round(ny) * W + round(nx);\n            return P.room[q] === want && (st \u003c 2 + v.r || !occ[q]);\n          });\n          if (turn === undefined) break;\n          a += turn;\n          pts.push((x += cos(a)), (y += sin(a)));\n        }\n        if (pts.length \u003c 6) continue;\n        const b = { kind: v.kind, parent: v, r: RAD[lv], pts, lv, d0: v.d[i] };\n        samples(b), mark(b), next.push(b);\n      }\n    }\n    P.ves.push(...(front = next));\n  }\n}\n\n// The vessels Detail shows in a red and a blue layer: weight, key (seconds\n// after a beat), level, pulse or flow. Low detail draws the trunks bold.\nfunction raster(P, det) {\n  for (const k of [\"wR\", \"kR\", \"lR\", \"mR\", \"wB\", \"kB\", \"lB\", \"mB\"]) (P[k] = P[k] || F32(N)).fill(0);\n  for (const v of P.ves) {\n    const vis = clamp(((det - 1) * 7) / 6 + 1.5 - v.lv, 0, 1);\n    if (vis \u003c= 0) continue;\n    const red = v.kind === 0 || v.kind === 3, flow = v.kind & 1;\n    const [w, kk, l, mo] = red ? [P.wR, P.kR, P.lR, P.mR] : [P.wB, P.kB, P.lB, P.mB];\n    const r = v.r * (v.lv ? 1 : 1.25 - 0.15 * (det - 1)), g = v.lv ? 0 : 0.9, e0 = r + g + 0.5;\n    for (let i = 0; i \u003c v.x.length; i++) {\n      const x = v.x[i], y = v.y[i], key = flow ? max(0, 0.3 + (125 - v.d[i]) / CV) : v.d[i] / CA;\n      for (let py = max(0, ceil(y - e0)); py \u003c= min(H - 1, floor(y + e0)); py++)\n        for (let px = max(0, ceil(x - e0)); px \u003c= min(W - 1, floor(x + e0)); px++) {\n          const e = hypot(px - x, py - y), p = py * W + px;\n          let a = clamp(r + 0.5 - e, 0, 1);\n          if (g) a = max(a, 0.16 * clamp(e0 - e, 0, 1));\n          if ((a *= vis) > w[p]) [w[p], kk[p], l[p], mo[p]] = [a, key, v.lv, flow];\n        }\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  if (!P.ves) setup(P);\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.chart = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 1, 5), det = clamp(k[2], 1, 4), E = (P.E = clamp(k[3], 0, 1));\n  if (abs(det - P.det) > 0.02) raster(P, (P.det = det));\n  let kick = false;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.adr = 1;\n    if (P.t - P.last > 0.28) [P.ph, kick] = [1, true];\n  }\n  P.adr *= exp(-dt / 5);\n  P.bpm = min(200, 36 * rate * (1 + 0.6 * E * E) + 75 * P.adr);\n  const T = (P.T = 60 / P.bpm);\n  P.tsys = clamp(0.16 + 0.17 * T, 0.2, 0.36);\n  P.stroke = 1 + 0.45 * E + 0.5 * P.adr;\n  if (!P.started) {\n    // Open as if the heart had been beating for a while.\n    P.started = true;\n    for (let i = 12; i >= 1; i--) P.beats.push([-(i - 0.6) * T, P.stroke]);\n    [P.ph, P.last, P.brPh] = [0.6, -0.6 * T, 0.15];\n  }\n  P.t += dt;\n  if ((P.ph += dt / T) >= 1) {\n    P.last = P.t - (P.ph = kick ? 0 : P.ph % 1) * T;\n    P.beats.push([P.last, P.stroke * (kick ? 1.5 : 1)]);\n  }\n  while (P.beats.length && P.t - P.beats[0][0] > 5.6) P.beats.shift();\n  P.brPh += dt / max(1, 4.4 - 2.6 * E - 1.2 * P.adr);\n  P.br = (0.5 - 0.5 * cos(2 * PI * P.brPh)) * (0.55 + 0.45 * E + 0.4 * P.adr);\n  P.eh = (P.eh + dt * 16) % 18;\n  tables(P), readout(P);\n}\n\n// Each beat's waves by the time since it: TA the sharp arterial pulse with its\n// dicrotic notch, TP the softer flush of the tissue, TV the venous swell.\nfunction tables(P) {\n  const { TA, TV, TP, t } = P, td = 0.13 * (1 + 0.4 * P.E);\n  TA.fill(0), TV.fill(0), TP.fill(0);\n  const span = (age, a, b, fn) => {\n    for (let k = max(0, ceil((age - a) * KS)); k \u003c= min(KN - 1, floor((age + b) * KS)); k++) fn(k, age - k / KS);\n  };\n  for (const [tb, a] of P.beats) {\n    const age = t - tb;\n    span(age, 0.9, 0, (k, s) => (TA[k] += a * ((1 - exp(-s / 0.02)) * exp(-s / td) + 0.22 * g2((s - 0.3) / 0.05))));\n    span(age, 1.4, 0, (k, s) => (TP[k] += a * (1 - exp(-s / 0.06)) * exp(-s / 0.26)));\n    span(age, 0.4, 0.4, (k, s) => (TV[k] += a * g2(s / 0.13)));\n  }\n}\n\nconst look = (T, key) => {\n  const f = key * KS, i = f | 0;\n  return i \u003c KN - 1 ? T[i] + (T[i + 1] - T[i]) * (f - i) : 0;\n};\n\nfunction ecgAt(P, tt) {\n  let v = 0;\n  for (const [tb] of P.beats) {\n    const s = tt - tb;\n    if (s > -0.3 && s \u003c 0.6)\n      v += 0.13 * g2((s + 0.16) / 0.03) - 0.12 * g2((s + 0.022) / 0.01) + g2(s / 0.016) - 0.28 * g2((s - 0.03) / 0.012) + 0.3 * g2((s - P.tsys + 0.07) / 0.055);\n  }\n  return v;\n}\n\n// The monitor beside the feet: an ECG sweep on the left, the rate on the right.\nfunction readout(P) {\n  const { hud } = P;\n  hud.fill(0, 100 * W, 120 * W);\n  for (let y = 104; y \u003c 117; y += 3) for (let x = 2; x \u003c 19; x += 3) hud[y * W + x] = 0.12;\n  for (let c = 0; c \u003c 18; c++) {\n    const a = (P.eh - c + 18) % 18;\n    if (a > 16.4) continue;\n    let lo = 999, hi = 0;\n    for (let s = 0; s \u003c= 6; s++) {\n      const yy = round(112 - 8 * ecgAt(P, P.t - (a + s / 6) / 16));\n      [lo, hi] = [min(lo, yy), max(hi, yy)];\n    }\n    for (let y = max(101, lo); y \u003c= min(118, hi); y++) hud[y * W + c + 1] = a \u003c 1 ? 1 : 0.95 - (0.55 * a) / 18;\n  }\n  const fl = 0.45 + 0.55 * g2((P.t - P.last - 0.05) / 0.08);\n  HEART.forEach((row, j) => {\n    for (let i = 0; i \u003c 5; i++) if ((row >> (4 - i)) & 1) hud[(105 + j) * W + 46 + i] = fl;\n  });\n  const put = (s, x0, y0, b) => {\n    for (let n = 0; n \u003c s.length; n++)\n      for (let q = 0; q \u003c 15; q++) if ((GLYPH[s[n]] >> (14 - q)) & 1) hud[(y0 + ((q / 3) | 0)) * W + x0 + n * 4 + (q % 3)] = b;\n  };\n  const txt = String(round(P.bpm));\n  put(txt, 63 - txt.length * 4, 105, 0.95);\n  put(\"BPM\", 51, 112, 0.55);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.wR) return;\n  const { m, rim, dep, core, geo, bone, tex, mus, hud, TA, TV, TP, wR, kR, lR, mR, wB, kB, lB, mB, f, c0, c1, E, br } = P;\n  const fc = P.chart * 2, i0 = min(1, floor(fc)), u = smooth(0.3, 0.7, fc - i0);\n  // The heart squeezes in systole and flashes on the first sound, less on the second.\n  const since = P.t - P.last, sys = since \u003c P.tsys ? sin((PI * since) / P.tsys) ** 0.7 : 0;\n  const s = 1 - (0.1 + 0.08 * E + 0.05 * P.adr) * sys;\n  const flash = g2((since - 0.03) / 0.06) + 0.6 * g2((since - P.tsys) / 0.045);\n  // The more capillaries drawn, the more the skin flushes as a pulse passes.\n  const bla = 0.3 + 0.24 * (P.det - 1);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      Object.assign(f, { y, m: m[p], rim: rim[p], dep: dep[p], core: core[p], mus: mus[p], bone: bone[p], hud: hud[p], lw: 0, hw: 0, ho: 0 });\n      f.bl = m[p] > 0 ? look(TP, geo[p] / CA + 0.04) * (bla + 0.3 * E + 0.7 * E * mus[p]) : 0;\n      if (x > 17 && x \u003c 46 && y > 24 && y \u003c 54) {\n        const e0 = lung(x, y, 0, br), e1 = lung(x, y, 1, br), e = min(e0, e1), L = LUNG[e0 \u003c e1 ? 0 : 1];\n        if (e \u003c 1.05) {\n          f.lw = clamp((1.03 - e) * 7, 0, 1) * m[p];\n          f.lrim = clamp(1 - abs(e - 0.92) / 0.1, 0, 1);\n          f.ox = clamp(0.2 + 0.4 * br + 0.5 * look(TP, hypot(x - L[4], y - L[5]) / 40 + 0.06), 0, 1.2);\n          f.lt = tex[p];\n        }\n      }\n      if ((f.wb = wB[p]) > 0) [f.bm, f.bp, f.lb] = [mB[p], look(mB[p] ? TV : TA, kB[p]), lB[p]];\n      if ((f.wr = wR[p]) > 0) [f.rm, f.rp, f.lr] = [mR[p], look(mR[p] ? TV : TA, kR[p]), lR[p]];\n      if (x > 24 && x \u003c 45 && y > 27 && y \u003c 49) {\n        const e = heart(P, x, y, s);\n        f.ho = clamp((1.3 - e) * 5, 0, 1);\n        if (e \u003c 1.1) {\n          f.hw = clamp((1.02 - e) * 5, 0, 1);\n          f.hs = smooth(-0.9, 0.3, P.hu);\n          f.hr = clamp(1 - abs(e - 0.86) / 0.16, 0, 1);\n          f.hb = 0.62 + 0.45 * flash + 0.2 * sys - (abs(P.hu + 0.3) \u003c 0.4 && P.hv > -2 ? 0.25 : 0);\n        }\n      }\n      if (i0 === 0) anat(f, c0);\n      else pal(f, CHARTS[1], c0, E);\n      if (u > 0) {\n        pal(f, CHARTS[i0 + 1], c1, E);\n        for (let c = 0; c \u003c 3; c++) c0[c] += (c1[c] - c0[c]) * u;\n      }\n      display.setPixel(x, y, min(255, c0[0]), min(255, c0[1]), min(255, c0[2]));\n    }\n}\n\n// Lerp o toward the colour c at brightness b by w; past full brightness it\n// runs toward a hot pale core.\nfunction tint(o, c, b, w) {\n  const k = min(b, 1), h = max(0, b - 1) * 0.9;\n  o[0] += (c[0] * k + 255 * h - o[0]) * w;\n  o[1] += (c[1] * k + 190 * h - o[1]) * w;\n  o[2] += (c[2] * k + 170 * h - o[2]) * w;\n}\n\n// The anatomical chart: a pale ghost of a body on a slate ground.\nfunction anat(f, o) {\n  const top = 1 - f.y / H, t = f.rim, bl = f.bl;\n  [o[0], o[1], o[2]] = [2 + 3 * top, 5 + 5 * top, 12 + 9 * top];\n  if (f.m > 0) tint(o, [18 + 34 * t + 8 * f.dep + 80 * bl, 26 + 44 * t + 10 * f.dep + 14 * bl, 42 + 50 * t + 16 * f.dep + 40 * bl], 1, f.m);\n  if (f.lw > 0) {\n    const ox = f.ox;\n    tint(o, [70 + 170 * ox, 60 + 30 * ox, 160 - 40 * ox], f.lt * (0.55 + 0.35 * ox) + 0.35 * f.lrim, f.lw);\n  }\n  const vb = () => f.wb > 0 && tint(o, BLUE[f.lb], (f.bm ? 0.36 + 0.8 * f.bp : 0.4 + 1.05 * f.bp) + 0.04 * f.lb, f.wb);\n  const vr = () => f.wr > 0 && tint(o, RED[f.lr], (f.rm ? 0.36 + 0.8 * f.rp : 0.32 + 1.05 * f.rp) + 0.05 * f.lr, f.wr);\n  // The vessel that owns the LED is drawn last.\n  if (f.wb > f.wr) vr(), vb();\n  else vb(), vr();\n  for (let c = 0; c \u003c 3; c++) o[c] *= 1 - 0.55 * f.ho;\n  if (f.hw > 0) {\n    const hs = f.hs, b = f.hb, k = 0.45 * f.hr;\n    tint(o, [(70 + 170 * hs) * b + 255 * k, (80 - 45 * hs) * b + 170 * k, (230 - 185 * hs) * b + 180 * k], 1, f.hw);\n  }\n  [40, 235, 140].forEach((c, i) => (o[i] += c * f.hud));\n}\n\n// The angiogram and the thermal chart: one value, then its colour table.\nfunction pal(f, c, o, E) {\n  const [lt, bg, t0, rim, dep, core, bl, mus, heat, bone, lung, ox, a0, a1, v0, v1, h0, h1, hud] = c;\n  let v = bg * (1.2 - (0.6 * f.y) / H);\n  if (f.m > 0) v += (t0 + rim * f.rim + dep * f.dep + core * f.core + bl * f.bl + (heat + mus * f.mus) * E - v) * f.m;\n  if (f.lw > 0) v += (lung + ox * f.ox * f.lt - v) * f.lw;\n  v += (bone - v) * f.bone * f.m * (bone > 0);\n  if (f.wb > 0) v += ((f.bm ? v0 + v1 * f.bp : a0 * 0.9 + a1 * f.bp) * (1 - 0.08 * f.lb) - v) * f.wb;\n  if (f.wr > 0) v += ((f.rm ? v0 + v1 * f.rp : a0 + a1 * f.rp) * (1 - 0.08 * f.lr) - v) * f.wr;\n  v *= 1 - 0.35 * f.ho;\n  if (f.hw > 0) v += (h0 + h1 * (f.hb - 0.62) + 0.15 * f.hr - v) * f.hw;\n  const i = clamp(round(max(v, f.hud * hud) * 255), 0, 255) * 3;\n  [o[0], o[1], o[2]] = [lt[i], lt[i + 1], lt[i + 2]];\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Chart=0..1, Rate=1..5, Detail=1..4, Effort=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Chart","min":0,"max":1,"about":"The red and blue anatomical chart at 0, an angiogram with the skeleton showing at 0.5, a thermal camera at 1."},{"name":"Rate","min":1,"max":5,"about":"The resting heart rate, 36 a minute at 1, 72 at 2, 180 at 5; the faster, the closer the pulses follow each other."},{"name":"Detail","min":1,"max":4,"about":"How far the vessels branch, from the named arteries and veins drawn bold at 1 to the capillaries at 4."},{"name":"Effort","min":0,"max":1,"about":"From rest to a hard run: the heart beats faster and harder, the breath deepens and the arms and legs flush with blood."}],"start":[0,2,1,0.06],"measures":{"motion":0.3125,"detail":0.0474,"edges":0.3512,"complexity":1.0533,"coverage":0.3719,"colour":0.2033,"drift":0.0315},"knobResponse":[0.1504,0.046,0.0247,0.0525]},{"slug":"climber","title":"Climber","family":"pixel","round":2,"note":"빨간 목도리를 맨 꼬마가 혼자서 끝없는 탑의 턱을 뛰어올라요. K4 를 돌리면 한낮에서 노을을 지나 횃불 켜진 밤이 돼요.","idea":"A hooded climber with a red scarf plays its own platform game up an endless tower: it runs to the edge of a ledge, jumps for the next one, grabs the odd coin, and the brick wall and the sky through its windows slide past at their own depths.","buttons":"K1 tap makes the climber jump now, and again in the air.","code":"// ===== Patternflow pattern =====\n// Title:   Climber\n// Family:  pixel\n// Idea:    A hooded climber with a red scarf plays its own platform game up an endless tower: it runs to the edge of a ledge, jumps for the next one, grabs the odd coin, and the brick wall and the sky through its windows slide past at their own depths.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.3..3.5, Gap=16..34, Sky=0..1\n//\n// Knob 1: Hue. The stone of the tower and its ledges; the climber keeps its own colours.\n// Knob 2: Speed. How fast the climber runs and jumps, and with it how fast the tower goes by.\n// Knob 3: Gap. How far apart the ledges are, from quick hops to long leaps with the climber high in the air.\n// Knob 4: Sky. The time of day through the windows, from noon through sunset to night, when the torches on the wall are lit.\n// Buttons: K1 tap makes the climber jump now, and again in the air.\n\nconst W = 64;\nconst H = 128;\nconst LEDGES = 24;\nconst COIN_SPARKS = 24;\nconst GRAVITY = 300;\nconst RUN = 24;\n// Height of the wall pattern's repeat: one window and one torch per band.\nconst BAND = 44;\n\nconst IDLE = 0;\nconst RUN1 = 1;\nconst RUN2 = 2;\nconst RUN3 = 3;\nconst JUMP = 4;\nconst FALL = 5;\n\n// The climber faces right; 8 wide, 8 tall, feet on the bottom row.\nconst POSES = [\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \".r.gggs.\",\n    \"...p.p..\",\n    \"...b.b..\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \"r..gggs.\",\n    \"..pp..p.\",\n    \".bb....b\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \".rrggg..\",\n    \"rr.ggs..\",\n    \"...pp...\",\n    \"...bb...\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \".r.gggs.\",\n    \"...p.pp.\",\n    \"..b...bb\",\n  ],\n  [\n    \"...ooo.s\",\n    \"..ooooos\",\n    \"..ossse.\",\n    \"r.oosss.\",\n    \"rrrggg..\",\n    \"...ggg..\",\n    \"..pp.pp.\",\n    \"..b...b.\",\n  ],\n  [\n    \"rr.ooo..\",\n    \".rooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"s..ggg.s\",\n    \"...ggg..\",\n    \"...p.p..\",\n    \"...b.b..\",\n  ],\n];\nconst CLIMBER = { o: 0xeaf0fa, s: 0xffac6a, e: 0x141414, r: 0xff2a2a, g: 0x2fa85a, p: 0x2a3a8a, b: 0x8a4a1e };\n\nconst COIN = [\n  [\".yyy.\", \"yhyyd\", \"yhyyd\", \"yyyyd\", \".ddd.\"],\n  [\"..y..\", \".hyd.\", \".hyd.\", \".yyd.\", \"..d..\"],\n  [\"..y..\", \"..h..\", \"..y..\", \"..y..\", \"..d..\"],\n];\nconst COIN_PAL = { y: 0xffc818, h: 0xfff6b0, d: 0xc08000 };\n\n// 3x5 digits for the coin count, one octal digit per row from the top.\nconst DIGITS = [0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717];\n\n// Sky through the windows, top and bottom colour, at noon, sunset and night.\nconst SKIES = [\n  [0x3a8cf0, 0x9ad4ff],\n  [0x4a2a86, 0xff8a4a],\n  [0x040822, 0x101c50],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, lo, hi) {\n  return v \u003c lo ? lo : v > hi ? hi : v;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Sprite strings become palette indices once, in setup.\nfunction bake(frames, colours) {\n  const keys = Object.keys(colours);\n  const h = frames[0].length;\n  const w = frames[0][0].length;\n  const pix = new Uint8Array(frames.length * w * h);\n  for (let f = 0; f \u003c frames.length; f++)\n    for (let y = 0; y \u003c h; y++)\n      for (let x = 0; x \u003c w; x++) pix[(f * h + y) * w + x] = keys.indexOf(frames[f][y][x]) + 1;\n  const pal = new Float32Array((keys.length + 1) * 3);\n  for (let i = 0; i \u003c keys.length; i++) {\n    const c = colours[keys[i]];\n    pal[(i + 1) * 3] = (c >> 16) & 255;\n    pal[(i + 1) * 3 + 1] = (c >> 8) & 255;\n    pal[(i + 1) * 3 + 2] = c & 255;\n  }\n  return { w, h, pix, pal };\n}\n\n// The topmost ledge gets a new one above it, a gap up and to one side.\nfunction addLedge(p) {\n  const top = p.top;\n  const i = (top + 1) % LEDGES;\n  const gap = p.gap * (0.85 + Math.random() * 0.3);\n  const width = 12 + Math.floor(Math.random() * 13);\n  const prevMid = (p.lx0[top] + p.lx1[top]) * 0.5;\n  let mid = prevMid + (Math.random() \u003c 0.5 ? -1 : 1) * (8 + Math.random() * 18);\n  if (mid \u003c 2 + width / 2 || mid > W - 2 - width / 2) mid = prevMid + (prevMid \u003c W / 2 ? 1 : -1) * (8 + Math.random() * 18);\n  const x0 = Math.round(clamp(mid - width / 2, 2, W - 2 - width));\n  p.lx0[i] = x0;\n  p.lx1[i] = x0 + width;\n  p.ly[i] = Math.round(p.ly[top] - gap);\n  p.coin[i] = Math.random() \u003c 0.4 ? 1 : 0;\n  p.coinX[i] = x0 + 2 + Math.random() * (width - 4);\n  p.top = i;\n}\n\nfunction next(i) {\n  return (i + 1) % LEDGES;\n}\n\n// Plans the next jump: where on the ledge above to land, and where to take off from.\nfunction plan(p) {\n  const n = next(p.on);\n  p.target = n;\n  const landX = p.coin[n] ? p.coinX[n] : p.lx0[n] + 2 + Math.random() * (p.lx1[n] - p.lx0[n] - 4);\n  p.landX = landX;\n  let dir = Math.sign(landX - p.cx);\n  if (dir === 0) dir = Math.random() \u003c 0.5 ? -1 : 1;\n  p.takeoff = clamp(landX - dir * (5 + Math.random() * 9), p.lx0[p.on] + 1, p.lx1[p.on] - 1);\n}\n\nfunction jump(p, from) {\n  const n = p.target;\n  const rise = Math.max(4, p.cy - p.ly[n]) + 5;\n  const up = Math.sqrt((2 * rise) / GRAVITY);\n  const down = Math.sqrt((2 * 5) / GRAVITY);\n  p.vy = -GRAVITY * up;\n  p.vx = clamp((p.landX - from) / (up + down), -70, 70);\n  p.air = true;\n  p.doubled = false;\n  if (p.vx !== 0) p.face = p.vx > 0 ? 1 : -1;\n}\n\nfunction step(p, dt) {\n  p.t += dt;\n  // Keep ledges above the top of the screen, and recycle the ones that left the bottom.\n  while (p.ly[p.top] > p.cam - 40) addLedge(p);\n\n  if (!p.air && p.land > 0) {\n    // Catching its breath after a landing.\n  } else if (!p.air) {\n    const dx = p.takeoff - p.cx;\n    if (Math.abs(dx) \u003c= RUN * dt + 0.01) {\n      p.cx = p.takeoff;\n      jump(p, p.cx);\n    } else {\n      p.face = dx > 0 ? 1 : -1;\n      p.cx += p.face * RUN * dt;\n      p.runPhase += dt * RUN * 0.22;\n    }\n  } else {\n    const before = p.cy;\n    p.vy += GRAVITY * dt;\n    p.cx = clamp(p.cx + p.vx * dt, 3, W - 4);\n    p.cy += p.vy * dt;\n    if (p.vy > 0) {\n      for (let i = 0; i \u003c LEDGES; i++) {\n        const y = p.ly[i];\n        if (before \u003c= y && p.cy >= y && p.cx >= p.lx0[i] - 1 && p.cx \u003c= p.lx1[i] + 1) {\n          p.cy = y;\n          p.air = false;\n          p.on = i;\n          p.land = Math.random() \u003c 0.2 ? 0.5 : 0.1;\n          plan(p);\n          break;\n        }\n      }\n    }\n    // Fell past the bottom of the screen: drop back in on a ledge in view.\n    if (p.air && p.cy > p.cam + H + 12) {\n      let best = -1;\n      for (let i = 0; i \u003c LEDGES; i++) {\n        if (p.ly[i] \u003c p.cam + 30 || p.ly[i] > p.cam + H - 20) continue;\n        if (best \u003c 0 || p.ly[i] > p.ly[best]) best = i;\n      }\n      if (best >= 0) {\n        p.on = best;\n        p.cx = (p.lx0[best] + p.lx1[best]) * 0.5;\n        p.cy = p.ly[best];\n        p.air = false;\n        plan(p);\n      }\n    }\n  }\n  p.land = Math.max(0, p.land - dt);\n\n  // A coin is taken when the climber's body passes over it.\n  for (let i = 0; i \u003c LEDGES; i++) {\n    if (!p.coin[i]) continue;\n    const cy = p.ly[i] - 6;\n    if (Math.abs(p.coinX[i] - p.cx) \u003c 4 && cy > p.cy - 10 && cy \u003c p.cy + 2) {\n      p.coin[i] = 0;\n      p.coins = (p.coins + 1) % 1000;\n      for (let s = 0; s \u003c 6; s++) {\n        const k = p.sparkNext;\n        p.sparkNext = (k + 1) % COIN_SPARKS;\n        const a = (s / 6) * Math.PI * 2 + 0.3;\n        p.sx[k] = p.coinX[i];\n        p.sy[k] = cy;\n        p.svx[k] = Math.cos(a) * 30;\n        p.svy[k] = Math.sin(a) * 30 - 10;\n        p.slife[k] = 0.45;\n      }\n    }\n  }\n  for (let k = 0; k \u003c COIN_SPARKS; k++) {\n    if (p.slife[k] \u003c= 0) continue;\n    p.slife[k] -= dt;\n    p.sx[k] += p.svx[k] * dt;\n    p.sy[k] += p.svy[k] * dt;\n  }\n\n  // The camera only climbs; it keeps the climber a little below the middle.\n  const want = p.cy - H * 0.6;\n  if (want \u003c p.cam) p.cam += (want - p.cam) * Math.min(1, dt * 2.5);\n}\n\nexport function setup(params) {\n  const p = params;\n  p.climber = bake(POSES, CLIMBER);\n  p.coinArt = bake(COIN, COIN_PAL);\n  p.lx0 = new Int16Array(LEDGES);\n  p.lx1 = new Int16Array(LEDGES);\n  p.ly = new Float64Array(LEDGES);\n  p.coin = new Uint8Array(LEDGES);\n  p.coinX = new Float32Array(LEDGES);\n  p.sx = new Float32Array(COIN_SPARKS);\n  p.sy = new Float32Array(COIN_SPARKS);\n  p.svx = new Float32Array(COIN_SPARKS);\n  p.svy = new Float32Array(COIN_SPARKS);\n  p.slife = new Float32Array(COIN_SPARKS);\n  p.sparkNext = 0;\n  p.buf = new Float32Array(W * H * 3);\n  p.stone = new Float32Array(3);\n  p.ledge = new Float32Array(3);\n  p.skyTop = new Float32Array(3);\n  p.skyLow = new Float32Array(3);\n  p.ready = false;\n  p.t = 0;\n  p.coins = 0;\n  p.gap = 20;\n}\n\nfunction start(p) {\n  // The ground floor, full width, then ledges above it.\n  p.top = 0;\n  p.lx0[0] = 2;\n  p.lx1[0] = W - 2;\n  p.ly[0] = 0;\n  p.coin[0] = 0;\n  for (let i = 1; i \u003c LEDGES; i++) p.ly[i] = 1e9;\n  p.cam = -H + 6;\n  p.cx = 12;\n  p.cy = 0;\n  p.vx = 0;\n  p.vy = 0;\n  p.air = false;\n  p.face = 1;\n  p.on = 0;\n  p.land = 0;\n  p.runPhase = 0;\n  for (let i = 0; i \u003c 12; i++) addLedge(p);\n  plan(p);\n  // Climb a while before the first frame, so the tower is already under way.\n  for (let s = 0; s \u003c 150; s++) step(p, 1 / 30);\n  p.coins = 0;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 16, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.hue = k[0];\n  p.gap = clamp(k[2], 8, 60);\n  p.sky = clamp(k[3], 0, 1);\n  if (!p.ready) {\n    p.ready = true;\n    start(p);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (!p.air) jump(p, p.cx);\n    else if (!p.doubled) {\n      p.doubled = true;\n      p.vy = -GRAVITY * 0.32;\n    }\n  }\n  step(p, dt * Math.max(0.1, k[1] * 0.5));\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const buf = p.buf;\n  const night = p.sky;\n  // Noon to sunset over the first half of the knob, sunset to night over the second.\n  const u = night * 2;\n  const a = Math.min(1, Math.floor(u));\n  const f = u - a;\n  for (let c = 0; c \u003c 3; c++) {\n    const sh = 16 - c * 8;\n    p.skyTop[c] = ((SKIES[a][0] >> sh) & 255) * (1 - f) + ((SKIES[a + 1][0] >> sh) & 255) * f;\n    p.skyLow[c] = ((SKIES[a][1] >> sh) & 255) * (1 - f) + ((SKIES[a + 1][1] >> sh) & 255) * f;\n  }\n  const dusk = clamp((night - 0.35) / 0.5, 0, 1);\n  const lightness = 1 - 0.55 * dusk;\n  const hue = p.hue + 0.72;\n  hsv(hue, 0.32, 0.3 * lightness, p.stone, 0);\n  hsv(hue + 0.02, 0.42, 0.8 * (1 - 0.35 * dusk), p.ledge, 0);\n  const stone = p.stone;\n  const cam = Math.round(p.cam);\n  const wall = Math.round(p.cam * 0.5);\n  const far = Math.round(p.cam * 0.2);\n\n  for (let y = 0; y \u003c H; y++) {\n    const ly = y + wall;\n    const band = Math.floor(ly / BAND);\n    const by = ly - band * BAND;\n    const brickRow = Math.floor(ly / 4);\n    const seam = (ly & 3) === 0;\n    // One arched window a band, on alternate sides.\n    const wx = (band & 1 ? 9 : 43) + Math.floor(hash(band, 1) * 5);\n    const wy = by - 10;\n    let w0 = 99;\n    let w1 = -99;\n    if (wy >= 0 && wy \u003c 16) {\n      const inset = wy === 0 ? 3 : wy === 1 ? 1 : 0;\n      w0 = wx + inset;\n      w1 = wx + 10 - inset;\n    }\n    const sky = clamp(wy / 15, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      if (x >= w0 && x \u003c w1) {\n        // Through the window: the sky, its clouds or its stars, much further away.\n        let r = p.skyTop[0] * (1 - sky) + p.skyLow[0] * sky;\n        let g = p.skyTop[1] * (1 - sky) + p.skyLow[1] * sky;\n        let b = p.skyTop[2] * (1 - sky) + p.skyLow[2] * sky;\n        const fy = y + far;\n        const fx = x + Math.floor(p.t * 3);\n        const cell = Math.floor(fy / 18);\n        const cx = Math.floor(hash(cell, 7) * 64);\n        const dx = ((fx - cx) % 64 + 96) % 64 - 32;\n        const dy = fy - cell * 18 - 9;\n        const cloud = dx * dx * 0.08 + dy * dy * 0.6 \u003c 4 + 3 * hash(cell, 9);\n        if (cloud && night \u003c 0.85) {\n          const cv = 1 - night * 0.7;\n          r = 235 * cv + r * 0.1;\n          g = 225 * cv + g * 0.1;\n          b = 235 * cv + b * 0.1;\n        } else if (night > 0.6 && hash(fx, fy) > 0.965) {\n          const s = (night - 0.6) * 2.5 * (0.6 + 0.4 * Math.sin(p.t * 3 + fx));\n          r += 220 * s;\n          g += 220 * s;\n          b += 200 * s;\n        }\n        buf[o] = r;\n        buf[o + 1] = g;\n        buf[o + 2] = b;\n      } else {\n        const col = Math.floor((x + (brickRow & 1) * 4) / 8);\n        const seamX = ((x + (brickRow & 1) * 4) & 7) === 0;\n        // Flat bricks and dark mortar, the way a tile set draws a wall.\n        let v = seam || seamX ? 0.32 : 0.97 + 0.06 * hash(brickRow, col);\n        // The window's frame and sill.\n        if (wy >= -1 && wy \u003c= 16 && x >= wx - 1 && x \u003c= wx + 10) v = wy === 16 ? 1.7 : 1.35;\n        buf[o] = stone[0] * v;\n        buf[o + 1] = stone[1] * v;\n        buf[o + 2] = stone[2] * v;\n      }\n    }\n  }\n\n  // Torches, one a band opposite the window, lit as the sky darkens.\n  const firstBand = Math.floor(wall / BAND) - 1;\n  for (let band = firstBand; band \u003c= firstBand + 4; band++) {\n    const tx = band & 1 ? 47 : 13;\n    const ty = band * BAND + 22 - wall;\n    if (ty \u003c -12 || ty > H + 12) continue;\n    const lit = clamp((night - 0.3) / 0.4, 0, 1);\n    if (lit > 0) {\n      const flick = 0.85 + 0.15 * Math.sin(p.t * 11 + band * 3) * Math.sin(p.t * 7.3 + band);\n      for (let y = ty - 12; y \u003c= ty + 12; y++) {\n        if (y \u003c 0 || y >= H) continue;\n        for (let x = tx - 12; x \u003c= tx + 12; x++) {\n          if (x \u003c 0 || x >= W) continue;\n          const d = Math.sqrt((x - tx) * (x - tx) + (y - ty + 2) * (y - ty + 2)) / 12;\n          if (d >= 1) continue;\n          const g = (1 - d) * (1 - d) * lit * flick;\n          const o = (y * W + x) * 3;\n          buf[o] += 150 * g;\n          buf[o + 1] += 80 * g;\n          buf[o + 2] += 20 * g;\n        }\n      }\n    }\n    // An iron sconce, and the torch's wooden head in it.\n    const iron = 70 + 60 * (1 - dusk);\n    put(buf, tx, ty + 2, iron, iron, iron * 1.1);\n    put(buf, tx, ty + 3, iron, iron, iron * 1.1);\n    put(buf, tx - 1, ty + 1, iron, iron, iron * 1.1);\n    put(buf, tx + 1, ty + 1, iron, iron, iron * 1.1);\n    put(buf, tx, ty + 1, 150, 90, 40);\n    if (lit > 0) {\n      const tip = Math.sin(p.t * 9 + band) > 0 ? 1 : 0;\n      put(buf, tx, ty, 255, 200 * lit + 40, 60);\n      put(buf, tx, ty - 1, 255, 150, 30);\n      put(buf, tx - 1 + tip * 2, ty - 1, 230, 110, 20);\n      put(buf, tx, ty - 2 - tip, 255, 230, 120);\n    }\n  }\n\n  // The tower's own walls left and right move with the ledges.\n  for (let y = 0; y \u003c H; y++) {\n    const wy = y + cam;\n    const row = Math.floor(wy / 3);\n    for (let x = 0; x \u003c 2; x++) {\n      const v = (wy % 3 + 3) % 3 === 0 ? 0.6 : 1.1 + 0.2 * hash(row, x);\n      put(buf, x, y, p.ledge[0] * v * 0.6, p.ledge[1] * v * 0.6, p.ledge[2] * v * 0.6);\n      put(buf, W - 1 - x, y, p.ledge[0] * v * 0.6, p.ledge[1] * v * 0.6, p.ledge[2] * v * 0.6);\n    }\n  }\n\n  const ledge = p.ledge;\n  for (let i = 0; i \u003c LEDGES; i++) {\n    const y0 = Math.round(p.ly[i]) - cam;\n    if (y0 \u003c -4 || y0 >= H) continue;\n    // A slab four LEDs deep: a lit top edge, two rows of face cut into blocks, and a shadow under a bevel.\n    for (let r = 0; r \u003c 4; r++) {\n      const v = r === 0 ? 1.25 : r === 1 ? 0.9 : r === 2 ? 0.72 : 0.42;\n      const inset = r === 3 ? 1 : 0;\n      for (let x = p.lx0[i] + inset; x \u003c p.lx1[i] - inset; x++) {\n        const s = (r === 1 || r === 2) && (x - p.lx0[i]) % 6 === 5 ? 0.55 : 1;\n        put(buf, x, y0 + r, ledge[0] * v * s, ledge[1] * v * s, ledge[2] * v * s);\n      }\n    }\n    if (p.coin[i]) {\n      const frame = [0, 1, 2, 1][Math.floor(p.t * 8 + i) & 3];\n      const bob = Math.sin(p.t * 4 + i) > 0 ? 1 : 0;\n      sprite(p, p.coinArt, frame, Math.round(p.coinX[i]) - 2, y0 - 8 - bob, true, 1);\n    }\n  }\n\n  let pose = IDLE;\n  if (p.air) pose = p.vy \u003c 0 ? JUMP : FALL;\n  else if (p.land \u003c= 0) pose = [RUN1, RUN2, RUN3, RUN2][Math.floor(p.runPhase) & 3];\n  const light = 1 - 0.25 * dusk;\n  sprite(p, p.climber, pose, Math.round(p.cx) - 4, Math.round(p.cy) - cam - 8, p.face > 0, light);\n\n  for (let k = 0; k \u003c COIN_SPARKS; k++) {\n    if (p.slife[k] \u003c= 0) continue;\n    put(buf, Math.round(p.sx[k]), Math.round(p.sy[k]) - cam, 255, 240, 150);\n  }\n\n  // The coin count, top left.\n  sprite(p, p.coinArt, 0, 3, 3, true, 1);\n  let n = p.coins;\n  let digits = 1;\n  while (n >= Math.pow(10, digits)) digits++;\n  for (let d = 0; d \u003c digits; d++) {\n    const v = Math.floor(n / Math.pow(10, digits - 1 - d)) % 10;\n    const bits = DIGITS[v];\n    for (let gy = 0; gy \u003c 5; gy++) {\n      const row = (bits >> ((4 - gy) * 3)) & 7;\n      for (let gx = 0; gx \u003c 3; gx++) if (row & (4 >> gx)) put(buf, 10 + d * 4 + gx, 3 + gy, 255, 236, 160);\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nfunction sprite(p, s, frame, ix, iy, right, light) {\n  const base = frame * s.w * s.h;\n  for (let y = 0; y \u003c s.h; y++) {\n    for (let x = 0; x \u003c s.w; x++) {\n      const c = s.pix[base + y * s.w + x];\n      if (!c) continue;\n      put(p.buf, ix + (right ? x : s.w - 1 - x), iy + y, s.pal[c * 3] * light, s.pal[c * 3 + 1] * light, s.pal[c * 3 + 2] * light);\n    }\n  }\n}\n","layer":{"id":"layer-climber","type":"code","name":"climber","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Climber\n// Family:  pixel\n// Idea:    A hooded climber with a red scarf plays its own platform game up an endless tower: it runs to the edge of a ledge, jumps for the next one, grabs the odd coin, and the brick wall and the sky through its windows slide past at their own depths.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.3..3.5, Gap=16..34, Sky=0..1\n//\n// Knob 1: Hue. The stone of the tower and its ledges; the climber keeps its own colours.\n// Knob 2: Speed. How fast the climber runs and jumps, and with it how fast the tower goes by.\n// Knob 3: Gap. How far apart the ledges are, from quick hops to long leaps with the climber high in the air.\n// Knob 4: Sky. The time of day through the windows, from noon through sunset to night, when the torches on the wall are lit.\n// Buttons: K1 tap makes the climber jump now, and again in the air.\n\nconst W = 64;\nconst H = 128;\nconst LEDGES = 24;\nconst COIN_SPARKS = 24;\nconst GRAVITY = 300;\nconst RUN = 24;\n// Height of the wall pattern's repeat: one window and one torch per band.\nconst BAND = 44;\n\nconst IDLE = 0;\nconst RUN1 = 1;\nconst RUN2 = 2;\nconst RUN3 = 3;\nconst JUMP = 4;\nconst FALL = 5;\n\n// The climber faces right; 8 wide, 8 tall, feet on the bottom row.\nconst POSES = [\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \".r.gggs.\",\n    \"...p.p..\",\n    \"...b.b..\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \"r..gggs.\",\n    \"..pp..p.\",\n    \".bb....b\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \".rrggg..\",\n    \"rr.ggs..\",\n    \"...pp...\",\n    \"...bb...\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \".r.gggs.\",\n    \"...p.pp.\",\n    \"..b...bb\",\n  ],\n  [\n    \"...ooo.s\",\n    \"..ooooos\",\n    \"..ossse.\",\n    \"r.oosss.\",\n    \"rrrggg..\",\n    \"...ggg..\",\n    \"..pp.pp.\",\n    \"..b...b.\",\n  ],\n  [\n    \"rr.ooo..\",\n    \".rooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"s..ggg.s\",\n    \"...ggg..\",\n    \"...p.p..\",\n    \"...b.b..\",\n  ],\n];\nconst CLIMBER = { o: 0xeaf0fa, s: 0xffac6a, e: 0x141414, r: 0xff2a2a, g: 0x2fa85a, p: 0x2a3a8a, b: 0x8a4a1e };\n\nconst COIN = [\n  [\".yyy.\", \"yhyyd\", \"yhyyd\", \"yyyyd\", \".ddd.\"],\n  [\"..y..\", \".hyd.\", \".hyd.\", \".yyd.\", \"..d..\"],\n  [\"..y..\", \"..h..\", \"..y..\", \"..y..\", \"..d..\"],\n];\nconst COIN_PAL = { y: 0xffc818, h: 0xfff6b0, d: 0xc08000 };\n\n// 3x5 digits for the coin count, one octal digit per row from the top.\nconst DIGITS = [0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717];\n\n// Sky through the windows, top and bottom colour, at noon, sunset and night.\nconst SKIES = [\n  [0x3a8cf0, 0x9ad4ff],\n  [0x4a2a86, 0xff8a4a],\n  [0x040822, 0x101c50],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, lo, hi) {\n  return v \u003c lo ? lo : v > hi ? hi : v;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Sprite strings become palette indices once, in setup.\nfunction bake(frames, colours) {\n  const keys = Object.keys(colours);\n  const h = frames[0].length;\n  const w = frames[0][0].length;\n  const pix = new Uint8Array(frames.length * w * h);\n  for (let f = 0; f \u003c frames.length; f++)\n    for (let y = 0; y \u003c h; y++)\n      for (let x = 0; x \u003c w; x++) pix[(f * h + y) * w + x] = keys.indexOf(frames[f][y][x]) + 1;\n  const pal = new Float32Array((keys.length + 1) * 3);\n  for (let i = 0; i \u003c keys.length; i++) {\n    const c = colours[keys[i]];\n    pal[(i + 1) * 3] = (c >> 16) & 255;\n    pal[(i + 1) * 3 + 1] = (c >> 8) & 255;\n    pal[(i + 1) * 3 + 2] = c & 255;\n  }\n  return { w, h, pix, pal };\n}\n\n// The topmost ledge gets a new one above it, a gap up and to one side.\nfunction addLedge(p) {\n  const top = p.top;\n  const i = (top + 1) % LEDGES;\n  const gap = p.gap * (0.85 + Math.random() * 0.3);\n  const width = 12 + Math.floor(Math.random() * 13);\n  const prevMid = (p.lx0[top] + p.lx1[top]) * 0.5;\n  let mid = prevMid + (Math.random() \u003c 0.5 ? -1 : 1) * (8 + Math.random() * 18);\n  if (mid \u003c 2 + width / 2 || mid > W - 2 - width / 2) mid = prevMid + (prevMid \u003c W / 2 ? 1 : -1) * (8 + Math.random() * 18);\n  const x0 = Math.round(clamp(mid - width / 2, 2, W - 2 - width));\n  p.lx0[i] = x0;\n  p.lx1[i] = x0 + width;\n  p.ly[i] = Math.round(p.ly[top] - gap);\n  p.coin[i] = Math.random() \u003c 0.4 ? 1 : 0;\n  p.coinX[i] = x0 + 2 + Math.random() * (width - 4);\n  p.top = i;\n}\n\nfunction next(i) {\n  return (i + 1) % LEDGES;\n}\n\n// Plans the next jump: where on the ledge above to land, and where to take off from.\nfunction plan(p) {\n  const n = next(p.on);\n  p.target = n;\n  const landX = p.coin[n] ? p.coinX[n] : p.lx0[n] + 2 + Math.random() * (p.lx1[n] - p.lx0[n] - 4);\n  p.landX = landX;\n  let dir = Math.sign(landX - p.cx);\n  if (dir === 0) dir = Math.random() \u003c 0.5 ? -1 : 1;\n  p.takeoff = clamp(landX - dir * (5 + Math.random() * 9), p.lx0[p.on] + 1, p.lx1[p.on] - 1);\n}\n\nfunction jump(p, from) {\n  const n = p.target;\n  const rise = Math.max(4, p.cy - p.ly[n]) + 5;\n  const up = Math.sqrt((2 * rise) / GRAVITY);\n  const down = Math.sqrt((2 * 5) / GRAVITY);\n  p.vy = -GRAVITY * up;\n  p.vx = clamp((p.landX - from) / (up + down), -70, 70);\n  p.air = true;\n  p.doubled = false;\n  if (p.vx !== 0) p.face = p.vx > 0 ? 1 : -1;\n}\n\nfunction step(p, dt) {\n  p.t += dt;\n  // Keep ledges above the top of the screen, and recycle the ones that left the bottom.\n  while (p.ly[p.top] > p.cam - 40) addLedge(p);\n\n  if (!p.air && p.land > 0) {\n    // Catching its breath after a landing.\n  } else if (!p.air) {\n    const dx = p.takeoff - p.cx;\n    if (Math.abs(dx) \u003c= RUN * dt + 0.01) {\n      p.cx = p.takeoff;\n      jump(p, p.cx);\n    } else {\n      p.face = dx > 0 ? 1 : -1;\n      p.cx += p.face * RUN * dt;\n      p.runPhase += dt * RUN * 0.22;\n    }\n  } else {\n    const before = p.cy;\n    p.vy += GRAVITY * dt;\n    p.cx = clamp(p.cx + p.vx * dt, 3, W - 4);\n    p.cy += p.vy * dt;\n    if (p.vy > 0) {\n      for (let i = 0; i \u003c LEDGES; i++) {\n        const y = p.ly[i];\n        if (before \u003c= y && p.cy >= y && p.cx >= p.lx0[i] - 1 && p.cx \u003c= p.lx1[i] + 1) {\n          p.cy = y;\n          p.air = false;\n          p.on = i;\n          p.land = Math.random() \u003c 0.2 ? 0.5 : 0.1;\n          plan(p);\n          break;\n        }\n      }\n    }\n    // Fell past the bottom of the screen: drop back in on a ledge in view.\n    if (p.air && p.cy > p.cam + H + 12) {\n      let best = -1;\n      for (let i = 0; i \u003c LEDGES; i++) {\n        if (p.ly[i] \u003c p.cam + 30 || p.ly[i] > p.cam + H - 20) continue;\n        if (best \u003c 0 || p.ly[i] > p.ly[best]) best = i;\n      }\n      if (best >= 0) {\n        p.on = best;\n        p.cx = (p.lx0[best] + p.lx1[best]) * 0.5;\n        p.cy = p.ly[best];\n        p.air = false;\n        plan(p);\n      }\n    }\n  }\n  p.land = Math.max(0, p.land - dt);\n\n  // A coin is taken when the climber's body passes over it.\n  for (let i = 0; i \u003c LEDGES; i++) {\n    if (!p.coin[i]) continue;\n    const cy = p.ly[i] - 6;\n    if (Math.abs(p.coinX[i] - p.cx) \u003c 4 && cy > p.cy - 10 && cy \u003c p.cy + 2) {\n      p.coin[i] = 0;\n      p.coins = (p.coins + 1) % 1000;\n      for (let s = 0; s \u003c 6; s++) {\n        const k = p.sparkNext;\n        p.sparkNext = (k + 1) % COIN_SPARKS;\n        const a = (s / 6) * Math.PI * 2 + 0.3;\n        p.sx[k] = p.coinX[i];\n        p.sy[k] = cy;\n        p.svx[k] = Math.cos(a) * 30;\n        p.svy[k] = Math.sin(a) * 30 - 10;\n        p.slife[k] = 0.45;\n      }\n    }\n  }\n  for (let k = 0; k \u003c COIN_SPARKS; k++) {\n    if (p.slife[k] \u003c= 0) continue;\n    p.slife[k] -= dt;\n    p.sx[k] += p.svx[k] * dt;\n    p.sy[k] += p.svy[k] * dt;\n  }\n\n  // The camera only climbs; it keeps the climber a little below the middle.\n  const want = p.cy - H * 0.6;\n  if (want \u003c p.cam) p.cam += (want - p.cam) * Math.min(1, dt * 2.5);\n}\n\nexport function setup(params) {\n  const p = params;\n  p.climber = bake(POSES, CLIMBER);\n  p.coinArt = bake(COIN, COIN_PAL);\n  p.lx0 = new Int16Array(LEDGES);\n  p.lx1 = new Int16Array(LEDGES);\n  p.ly = new Float64Array(LEDGES);\n  p.coin = new Uint8Array(LEDGES);\n  p.coinX = new Float32Array(LEDGES);\n  p.sx = new Float32Array(COIN_SPARKS);\n  p.sy = new Float32Array(COIN_SPARKS);\n  p.svx = new Float32Array(COIN_SPARKS);\n  p.svy = new Float32Array(COIN_SPARKS);\n  p.slife = new Float32Array(COIN_SPARKS);\n  p.sparkNext = 0;\n  p.buf = new Float32Array(W * H * 3);\n  p.stone = new Float32Array(3);\n  p.ledge = new Float32Array(3);\n  p.skyTop = new Float32Array(3);\n  p.skyLow = new Float32Array(3);\n  p.ready = false;\n  p.t = 0;\n  p.coins = 0;\n  p.gap = 20;\n}\n\nfunction start(p) {\n  // The ground floor, full width, then ledges above it.\n  p.top = 0;\n  p.lx0[0] = 2;\n  p.lx1[0] = W - 2;\n  p.ly[0] = 0;\n  p.coin[0] = 0;\n  for (let i = 1; i \u003c LEDGES; i++) p.ly[i] = 1e9;\n  p.cam = -H + 6;\n  p.cx = 12;\n  p.cy = 0;\n  p.vx = 0;\n  p.vy = 0;\n  p.air = false;\n  p.face = 1;\n  p.on = 0;\n  p.land = 0;\n  p.runPhase = 0;\n  for (let i = 0; i \u003c 12; i++) addLedge(p);\n  plan(p);\n  // Climb a while before the first frame, so the tower is already under way.\n  for (let s = 0; s \u003c 150; s++) step(p, 1 / 30);\n  p.coins = 0;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 16, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.hue = k[0];\n  p.gap = clamp(k[2], 8, 60);\n  p.sky = clamp(k[3], 0, 1);\n  if (!p.ready) {\n    p.ready = true;\n    start(p);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (!p.air) jump(p, p.cx);\n    else if (!p.doubled) {\n      p.doubled = true;\n      p.vy = -GRAVITY * 0.32;\n    }\n  }\n  step(p, dt * Math.max(0.1, k[1] * 0.5));\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const buf = p.buf;\n  const night = p.sky;\n  // Noon to sunset over the first half of the knob, sunset to night over the second.\n  const u = night * 2;\n  const a = Math.min(1, Math.floor(u));\n  const f = u - a;\n  for (let c = 0; c \u003c 3; c++) {\n    const sh = 16 - c * 8;\n    p.skyTop[c] = ((SKIES[a][0] >> sh) & 255) * (1 - f) + ((SKIES[a + 1][0] >> sh) & 255) * f;\n    p.skyLow[c] = ((SKIES[a][1] >> sh) & 255) * (1 - f) + ((SKIES[a + 1][1] >> sh) & 255) * f;\n  }\n  const dusk = clamp((night - 0.35) / 0.5, 0, 1);\n  const lightness = 1 - 0.55 * dusk;\n  const hue = p.hue + 0.72;\n  hsv(hue, 0.32, 0.3 * lightness, p.stone, 0);\n  hsv(hue + 0.02, 0.42, 0.8 * (1 - 0.35 * dusk), p.ledge, 0);\n  const stone = p.stone;\n  const cam = Math.round(p.cam);\n  const wall = Math.round(p.cam * 0.5);\n  const far = Math.round(p.cam * 0.2);\n\n  for (let y = 0; y \u003c H; y++) {\n    const ly = y + wall;\n    const band = Math.floor(ly / BAND);\n    const by = ly - band * BAND;\n    const brickRow = Math.floor(ly / 4);\n    const seam = (ly & 3) === 0;\n    // One arched window a band, on alternate sides.\n    const wx = (band & 1 ? 9 : 43) + Math.floor(hash(band, 1) * 5);\n    const wy = by - 10;\n    let w0 = 99;\n    let w1 = -99;\n    if (wy >= 0 && wy \u003c 16) {\n      const inset = wy === 0 ? 3 : wy === 1 ? 1 : 0;\n      w0 = wx + inset;\n      w1 = wx + 10 - inset;\n    }\n    const sky = clamp(wy / 15, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      if (x >= w0 && x \u003c w1) {\n        // Through the window: the sky, its clouds or its stars, much further away.\n        let r = p.skyTop[0] * (1 - sky) + p.skyLow[0] * sky;\n        let g = p.skyTop[1] * (1 - sky) + p.skyLow[1] * sky;\n        let b = p.skyTop[2] * (1 - sky) + p.skyLow[2] * sky;\n        const fy = y + far;\n        const fx = x + Math.floor(p.t * 3);\n        const cell = Math.floor(fy / 18);\n        const cx = Math.floor(hash(cell, 7) * 64);\n        const dx = ((fx - cx) % 64 + 96) % 64 - 32;\n        const dy = fy - cell * 18 - 9;\n        const cloud = dx * dx * 0.08 + dy * dy * 0.6 \u003c 4 + 3 * hash(cell, 9);\n        if (cloud && night \u003c 0.85) {\n          const cv = 1 - night * 0.7;\n          r = 235 * cv + r * 0.1;\n          g = 225 * cv + g * 0.1;\n          b = 235 * cv + b * 0.1;\n        } else if (night > 0.6 && hash(fx, fy) > 0.965) {\n          const s = (night - 0.6) * 2.5 * (0.6 + 0.4 * Math.sin(p.t * 3 + fx));\n          r += 220 * s;\n          g += 220 * s;\n          b += 200 * s;\n        }\n        buf[o] = r;\n        buf[o + 1] = g;\n        buf[o + 2] = b;\n      } else {\n        const col = Math.floor((x + (brickRow & 1) * 4) / 8);\n        const seamX = ((x + (brickRow & 1) * 4) & 7) === 0;\n        // Flat bricks and dark mortar, the way a tile set draws a wall.\n        let v = seam || seamX ? 0.32 : 0.97 + 0.06 * hash(brickRow, col);\n        // The window's frame and sill.\n        if (wy >= -1 && wy \u003c= 16 && x >= wx - 1 && x \u003c= wx + 10) v = wy === 16 ? 1.7 : 1.35;\n        buf[o] = stone[0] * v;\n        buf[o + 1] = stone[1] * v;\n        buf[o + 2] = stone[2] * v;\n      }\n    }\n  }\n\n  // Torches, one a band opposite the window, lit as the sky darkens.\n  const firstBand = Math.floor(wall / BAND) - 1;\n  for (let band = firstBand; band \u003c= firstBand + 4; band++) {\n    const tx = band & 1 ? 47 : 13;\n    const ty = band * BAND + 22 - wall;\n    if (ty \u003c -12 || ty > H + 12) continue;\n    const lit = clamp((night - 0.3) / 0.4, 0, 1);\n    if (lit > 0) {\n      const flick = 0.85 + 0.15 * Math.sin(p.t * 11 + band * 3) * Math.sin(p.t * 7.3 + band);\n      for (let y = ty - 12; y \u003c= ty + 12; y++) {\n        if (y \u003c 0 || y >= H) continue;\n        for (let x = tx - 12; x \u003c= tx + 12; x++) {\n          if (x \u003c 0 || x >= W) continue;\n          const d = Math.sqrt((x - tx) * (x - tx) + (y - ty + 2) * (y - ty + 2)) / 12;\n          if (d >= 1) continue;\n          const g = (1 - d) * (1 - d) * lit * flick;\n          const o = (y * W + x) * 3;\n          buf[o] += 150 * g;\n          buf[o + 1] += 80 * g;\n          buf[o + 2] += 20 * g;\n        }\n      }\n    }\n    // An iron sconce, and the torch's wooden head in it.\n    const iron = 70 + 60 * (1 - dusk);\n    put(buf, tx, ty + 2, iron, iron, iron * 1.1);\n    put(buf, tx, ty + 3, iron, iron, iron * 1.1);\n    put(buf, tx - 1, ty + 1, iron, iron, iron * 1.1);\n    put(buf, tx + 1, ty + 1, iron, iron, iron * 1.1);\n    put(buf, tx, ty + 1, 150, 90, 40);\n    if (lit > 0) {\n      const tip = Math.sin(p.t * 9 + band) > 0 ? 1 : 0;\n      put(buf, tx, ty, 255, 200 * lit + 40, 60);\n      put(buf, tx, ty - 1, 255, 150, 30);\n      put(buf, tx - 1 + tip * 2, ty - 1, 230, 110, 20);\n      put(buf, tx, ty - 2 - tip, 255, 230, 120);\n    }\n  }\n\n  // The tower's own walls left and right move with the ledges.\n  for (let y = 0; y \u003c H; y++) {\n    const wy = y + cam;\n    const row = Math.floor(wy / 3);\n    for (let x = 0; x \u003c 2; x++) {\n      const v = (wy % 3 + 3) % 3 === 0 ? 0.6 : 1.1 + 0.2 * hash(row, x);\n      put(buf, x, y, p.ledge[0] * v * 0.6, p.ledge[1] * v * 0.6, p.ledge[2] * v * 0.6);\n      put(buf, W - 1 - x, y, p.ledge[0] * v * 0.6, p.ledge[1] * v * 0.6, p.ledge[2] * v * 0.6);\n    }\n  }\n\n  const ledge = p.ledge;\n  for (let i = 0; i \u003c LEDGES; i++) {\n    const y0 = Math.round(p.ly[i]) - cam;\n    if (y0 \u003c -4 || y0 >= H) continue;\n    // A slab four LEDs deep: a lit top edge, two rows of face cut into blocks, and a shadow under a bevel.\n    for (let r = 0; r \u003c 4; r++) {\n      const v = r === 0 ? 1.25 : r === 1 ? 0.9 : r === 2 ? 0.72 : 0.42;\n      const inset = r === 3 ? 1 : 0;\n      for (let x = p.lx0[i] + inset; x \u003c p.lx1[i] - inset; x++) {\n        const s = (r === 1 || r === 2) && (x - p.lx0[i]) % 6 === 5 ? 0.55 : 1;\n        put(buf, x, y0 + r, ledge[0] * v * s, ledge[1] * v * s, ledge[2] * v * s);\n      }\n    }\n    if (p.coin[i]) {\n      const frame = [0, 1, 2, 1][Math.floor(p.t * 8 + i) & 3];\n      const bob = Math.sin(p.t * 4 + i) > 0 ? 1 : 0;\n      sprite(p, p.coinArt, frame, Math.round(p.coinX[i]) - 2, y0 - 8 - bob, true, 1);\n    }\n  }\n\n  let pose = IDLE;\n  if (p.air) pose = p.vy \u003c 0 ? JUMP : FALL;\n  else if (p.land \u003c= 0) pose = [RUN1, RUN2, RUN3, RUN2][Math.floor(p.runPhase) & 3];\n  const light = 1 - 0.25 * dusk;\n  sprite(p, p.climber, pose, Math.round(p.cx) - 4, Math.round(p.cy) - cam - 8, p.face > 0, light);\n\n  for (let k = 0; k \u003c COIN_SPARKS; k++) {\n    if (p.slife[k] \u003c= 0) continue;\n    put(buf, Math.round(p.sx[k]), Math.round(p.sy[k]) - cam, 255, 240, 150);\n  }\n\n  // The coin count, top left.\n  sprite(p, p.coinArt, 0, 3, 3, true, 1);\n  let n = p.coins;\n  let digits = 1;\n  while (n >= Math.pow(10, digits)) digits++;\n  for (let d = 0; d \u003c digits; d++) {\n    const v = Math.floor(n / Math.pow(10, digits - 1 - d)) % 10;\n    const bits = DIGITS[v];\n    for (let gy = 0; gy \u003c 5; gy++) {\n      const row = (bits >> ((4 - gy) * 3)) & 7;\n      for (let gx = 0; gx \u003c 3; gx++) if (row & (4 >> gx)) put(buf, 10 + d * 4 + gx, 3 + gy, 255, 236, 160);\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nfunction sprite(p, s, frame, ix, iy, right, light) {\n  const base = frame * s.w * s.h;\n  for (let y = 0; y \u003c s.h; y++) {\n    for (let x = 0; x \u003c s.w; x++) {\n      const c = s.pix[base + y * s.w + x];\n      if (!c) continue;\n      put(p.buf, ix + (right ? x : s.w - 1 - x), iy + y, s.pal[c * 3] * light, s.pal[c * 3 + 1] * light, s.pal[c * 3 + 2] * light);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.3..3.5, Gap=16..34, Sky=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The stone of the tower and its ledges; the climber keeps its own colours."},{"name":"Speed","min":0.3,"max":3.5,"about":"How fast the climber runs and jumps, and with it how fast the tower goes by."},{"name":"Gap","min":16,"max":34,"about":"How far apart the ledges are, from quick hops to long leaps with the climber high in the air."},{"name":"Sky","min":0,"max":1,"about":"The time of day through the windows, from noon through sunset to night, when the torches on the wall are lit."}],"start":[0,2,16,0.06],"measures":{"motion":1.5193,"detail":0.0867,"edges":0.9308,"complexity":0.2662,"coverage":0.7278,"colour":0.1488,"drift":0.118},"knobResponse":[0.0827,0.1542,0.146,0.1338]},{"slug":"cloth","title":"Cloth","family":"physics","round":2,"note":"12×22 매듭 천이 나무 봉의 집게에 걸려 있고, 뒤에서 부는 돌풍이 천을 앞으로 들어 올려요. LED 마다 그 자리 천이 빛에서 기운 만큼 밝아서 주름이 등고선처럼 읽혀요.","idea":"A Verlet cloth of 12 by 22 knots hangs from clips on a wooden rod, gusts from behind lift it towards you, and each LED is lit by how far the cloth there tilts from the light.","buttons":"K1 tap opens the clips; the cloth drops to the floor and is lifted back onto the rod.","code":"// ===== Patternflow pattern =====\n// Title:   Cloth\n// Family:  physics\n// Idea:    A Verlet cloth of 12 by 22 knots hangs from clips on a wooden rod, gusts from behind lift it towards you, and each LED is lit by how far the cloth there tilts from the light.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Wind=0..3, Stiffness=0..1, Pins=2..12\n//\n// Knob 1: Hue. The dye of the cloth; its stripes and its paler wrong side follow.\n// Knob 2: Wind. From still air, where it only sways, to gusts that throw the hem up past the rod.\n// Knob 3: Stiffness. Silk at 0, light with a sheen and many small folds; canvas at 1, heavy and matt in a few broad ones.\n// Knob 4: Pins. How many clips hold it to the rod, from two corners with a swag between them to every knot along the top.\n// Buttons: K1 tap opens the clips; the cloth drops to the floor and is lifted back onto the rod.\n\nconst W = 64;\nconst H = 128;\nconst NX = 12;\nconst NY = 22;\nconst N = NX * NY;\nconst REST = 5;\nconst ROD_Y = 8;\nconst PIN_Y = 10.5;\n// The clips sit closer together than the cloth is wide, so the top gathers.\nconst SPAN0 = 12;\nconst SPAN1 = 52;\nconst FLOOR = 126.5;\nconst STEP = 1 / 60;\nconst ITER = 6;\nconst G = 420;\n// A weak perspective: cloth blown towards you grows a little.\nconst CAM = 260;\nconst CX = 32;\nconst CY = 56;\n// Light from the upper left, low enough across the cloth that a fold's two sides differ.\nconst LX = -0.655;\nconst LY = -0.453;\nconst LZ = 0.605;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy) * (1 - ux) + hash(ix + 1, iy) * ux;\n  const b = hash(ix, iy + 1) * (1 - ux) + hash(ix + 1, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.px = new Float32Array(N);\n  params.py = new Float32Array(N);\n  params.pz = new Float32Array(N);\n  params.ox = new Float32Array(N);\n  params.oy = new Float32Array(N);\n  params.oz = new Float32Array(N);\n  params.nx = new Float32Array(N);\n  params.ny = new Float32Array(N);\n  params.nz = new Float32Array(N);\n  params.inv = new Float32Array(N);\n  // Where each clipped knot is pulled to, and where it was when the pull began.\n  params.tx = new Float32Array(NX);\n  params.ty = new Float32Array(NX);\n  params.tz = new Float32Array(NX);\n  params.lx = new Float32Array(NX);\n  params.ly = new Float32Array(NX);\n  params.lz = new Float32Array(NX);\n  params.sx = new Float32Array(N);\n  params.sy = new Float32Array(N);\n  params.fi = new Float32Array(N);\n  params.bi = new Float32Array(N);\n  params.fs = new Float32Array(N);\n  params.bs = new Float32Array(N);\n\n  // Springs: along the weave, across the diagonals, and over one knot to resist bending.\n  const pairs = [];\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      if (i + 1 \u003c NX) pairs.push(a, a + 1, 0);\n      if (j + 1 \u003c NY) pairs.push(a, a + NX, 0);\n    }\n  for (let j = 0; j + 1 \u003c NY; j++)\n    for (let i = 0; i + 1 \u003c NX; i++) {\n      const a = j * NX + i;\n      pairs.push(a, a + NX + 1, 1, a + 1, a + NX, 1);\n    }\n  params.nb = pairs.length / 3;\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      if (i + 2 \u003c NX) pairs.push(a, a + 2, 2);\n      if (j + 2 \u003c NY) pairs.push(a, a + 2 * NX, 2);\n    }\n  const count = pairs.length / 3;\n  params.nc = count;\n  params.ca = new Uint16Array(count);\n  params.cb = new Uint16Array(count);\n  params.ct = new Uint8Array(count);\n  params.cr = new Float32Array(count);\n  const len = [REST, REST * Math.SQRT2, REST * 2];\n  for (let c = 0; c \u003c count; c++) {\n    params.ca[c] = pairs[c * 3];\n    params.cb[c] = pairs[c * 3 + 1];\n    params.ct[c] = pairs[c * 3 + 2];\n    params.cr[c] = len[params.ct[c]];\n  }\n  params.k = new Float32Array(3);\n\n  params.rgb = new Float32Array(W * H * 3);\n  params.zbuf = new Float32Array(W * H);\n  params.front = new Float32Array(3);\n  params.back = new Float32Array(3);\n  params.stripe = new Float32Array(3);\n  params.pins = 0;\n  params.t = 0;\n  params.drop = -1;\n  params.lift = 0;\n  params.warm = false;\n  params.acc = 0;\n  hang(params);\n}\n\n// The cloth straight down from the rod, its top already gathered to the clips' spacing.\nfunction hang(params) {\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      const x = SPAN0 + ((SPAN1 - SPAN0) * i) / (NX - 1);\n      params.px[a] = params.ox[a] = x;\n      params.py[a] = params.oy[a] = PIN_Y + j * REST;\n      params.pz[a] = params.oz[a] = (Math.random() - 0.5) * 1.5;\n    }\n}\n\nfunction setPins(params, n) {\n  params.pins = n;\n  for (let i = 0; i \u003c N; i++) params.inv[i] = 1;\n  for (let p = 0; p \u003c n; p++) {\n    const i = Math.round((p * (NX - 1)) / (n - 1));\n    params.inv[i] = 0;\n  }\n  for (let i = 0; i \u003c NX; i++) {\n    params.tx[i] = SPAN0 + ((SPAN1 - SPAN0) * i) / (NX - 1);\n    params.ty[i] = PIN_Y;\n    params.tz[i] = 0;\n  }\n}\n\nfunction normals(params) {\n  const { px, py, pz, nx, ny, nz } = params;\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      const l = i > 0 ? a - 1 : a;\n      const r = i \u003c NX - 1 ? a + 1 : a;\n      const u = j > 0 ? a - NX : a;\n      const d = j \u003c NY - 1 ? a + NX : a;\n      const ax = px[r] - px[l];\n      const ay = py[r] - py[l];\n      const az = pz[r] - pz[l];\n      const bx = px[d] - px[u];\n      const by = py[d] - py[u];\n      const bz = pz[d] - pz[u];\n      // Across the weave crossed with down it: towards the viewer when the cloth hangs flat.\n      const cx = ay * bz - az * by;\n      const cy = az * bx - ax * bz;\n      const cz = ax * by - ay * bx;\n      const m = Math.sqrt(cx * cx + cy * cy + cz * cz) + 1e-6;\n      nx[a] = cx / m;\n      ny[a] = cy / m;\n      nz[a] = cz / m;\n    }\n}\n\nfunction step(params, wind, stiff, clipped) {\n  const { px, py, pz, ox, oy, oz, nx, ny, nz, inv } = params;\n  const dt = STEP;\n  const t = (params.t += dt);\n  normals(params);\n\n  // Gusts: a slow swell in strength and a direction that wanders either side of straight at you.\n  const swell = noise(t * 0.45, 7.1);\n  const gust = 0.3 + 1.52 * swell * swell;\n  const turn = (noise(t * 0.09, 2.3) - 0.5) * 2.4;\n  // Still air still breathes a little, so the cloth never hangs dead.\n  const speed = (wind + 0.2) * 62 * gust;\n  const wx = Math.sin(turn) * speed;\n  const wz = Math.cos(turn) * speed * 0.85;\n  // Silk catches the air; canvas is heavier for the same push.\n  const kd = (5.5 - stiff * 3) * dt;\n  const keep = 0.994;\n  // A falling cloth drops mostly straight; the wind only turns it.\n  const air = clipped ? 1 : 0.25;\n  for (let a = 0; a \u003c N; a++) {\n    if (clipped && inv[a] === 0) continue;\n    const vx = px[a] - ox[a];\n    const vy = py[a] - oy[a];\n    const vz = pz[a] - oz[a];\n    // Patches of the gust travel across the cloth, so it ripples rather than swings as one.\n    const local = (0.55 + 0.9 * noise(px[a] * 0.06 + t * 1.3, py[a] * 0.05 - t * 0.8)) * air;\n    const ux = wx * local * dt - vx;\n    const uy = -wind * 8 * local * dt - vy;\n    const uz = wz * local * dt - vz;\n    const d = (nx[a] * ux + ny[a] * uy + nz[a] * uz) * kd;\n    ox[a] = px[a];\n    oy[a] = py[a];\n    oz[a] = pz[a];\n    px[a] += vx * keep + nx[a] * d + ux * 0.002;\n    py[a] += vy * keep + ny[a] * d + G * dt * dt + uy * 0.002;\n    pz[a] += vz * keep + nz[a] * d + uz * 0.002;\n  }\n\n  // Clipped knots are carried, never pushed: straight to the rod, or along the lift after a drop.\n  for (let i = 0; i \u003c NX; i++) {\n    if (inv[i] !== 0 || !clipped) continue;\n    let x = params.tx[i];\n    let y = params.ty[i];\n    let z = params.tz[i];\n    if (params.lift \u003c 1) {\n      const e = params.lift * params.lift * (3 - 2 * params.lift);\n      x = params.lx[i] + (x - params.lx[i]) * e;\n      y = params.ly[i] + (y - params.ly[i]) * e;\n      z = params.lz[i] + (z - params.lz[i]) * e;\n    }\n    ox[i] = px[i];\n    oy[i] = py[i];\n    oz[i] = pz[i];\n    px[i] = x;\n    py[i] = y;\n    pz[i] = z;\n  }\n\n  const k = params.k;\n  k[0] = 1;\n  k[1] = 0.5;\n  k[2] = 0.015 + stiff * stiff * 0.5;\n  const { ca, cb, ct, cr } = params;\n  const nc = params.nc;\n  const free = clipped ? inv : null;\n  for (let it = 0; it \u003c ITER; it++) {\n    // The bending springs are soft anyway, so every other pass is enough for them.\n    const last = it & 1 ? params.nb : nc;\n    for (let c = 0; c \u003c last; c++) {\n      const a = ca[c];\n      const b = cb[c];\n      const wa = free ? free[a] : 1;\n      const wb = free ? free[b] : 1;\n      const ws = wa + wb;\n      if (ws === 0) continue;\n      const dx = px[b] - px[a];\n      const dy = py[b] - py[a];\n      const dz = pz[b] - pz[a];\n      const dist = Math.sqrt(dx * dx + dy * dy + dz * dz) + 1e-6;\n      const f = ((dist - cr[c]) / dist) * k[ct[c]] / ws;\n      px[a] += dx * f * wa;\n      py[a] += dy * f * wa;\n      pz[a] += dz * f * wa;\n      px[b] -= dx * f * wb;\n      py[b] -= dy * f * wb;\n      pz[b] -= dz * f * wb;\n    }\n  }\n  for (let a = 0; a \u003c N; a++) {\n    if (pz[a] > 150) pz[a] = 150;\n    // The floor and, while it falls, the walls are where the panel's edges are seen to be,\n    // so a cloth nearer the eye still lands on the bottom row and not below it.\n    const f = CAM / (CAM - pz[a]);\n    const floor = CY + (FLOOR - CY) / f;\n    if (py[a] > floor) {\n      // The floor holds and drags, so a dropped cloth crumples instead of sliding.\n      py[a] = floor;\n      ox[a] = px[a] - (px[a] - ox[a]) * 0.4;\n      pz[a] *= 0.9;\n      oz[a] = pz[a];\n    }\n    if (!clipped) {\n      const wall = 31 / f;\n      if (px[a] \u003c CX - wall) px[a] = CX - wall;\n      if (px[a] > CX + wall) px[a] = CX + wall;\n    }\n  }\n}\n\nfunction update1(params, dt, k, pressed) {\n  const wind = Math.max(0, k[1]);\n  const stiff = Math.max(0, Math.min(1, k[2]));\n  const pins = Math.max(2, Math.min(NX, Math.round(k[3])));\n  if (pins !== params.pins) setPins(params, pins);\n\n  if (pressed && params.drop \u003c 0) params.drop = 0;\n  let clipped = true;\n  if (params.drop >= 0) {\n    params.drop += dt;\n    if (params.drop \u003c 2.2) clipped = false;\n    else {\n      if (params.lift >= 1) {\n        // The lift starts from wherever the top knots lie on the floor.\n        params.lift = 0;\n        for (let i = 0; i \u003c NX; i++) {\n          params.lx[i] = params.px[i];\n          params.ly[i] = params.py[i];\n          params.lz[i] = params.pz[i];\n        }\n      }\n      params.lift = Math.min(1, (params.drop - 2.2) / 1.4);\n      if (params.lift >= 1) params.drop = -1;\n    }\n  }\n\n  params.acc += dt;\n  let n = 0;\n  while (params.acc >= STEP && n \u003c 4) {\n    params.acc -= STEP;\n    step(params, wind, stiff, clipped);\n    n++;\n  }\n  if (n === 4) params.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 2];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0] + 0.6;\n  params.stiff = Math.max(0, Math.min(1, k[2]));\n  if (!params.warm) {\n    // Open on a cloth that has been hanging in the wind for a while.\n    params.warm = true;\n    params.lift = 1;\n    setPins(params, Math.max(2, Math.min(NX, Math.round(k[3]))));\n    for (let s = 0; s \u003c 90; s++) update1(params, STEP, k, false);\n  }\n  params.lift = params.drop \u003c 0 ? 1 : params.lift;\n  update1(params, dt, k, input.btnPressed && input.btnPressed[0]);\n}\n\n// One triangle of the cloth, Gouraud-lit from its three knots, kept where it is nearest.\nfunction tri(params, a, b, c) {\n  const { sx, sy, pz, fi, bi, fs, bs, rgb, zbuf, front, back, stripe } = params;\n  const x0 = sx[a];\n  const y0 = sy[a];\n  const x1 = sx[b];\n  const y1 = sy[b];\n  const x2 = sx[c];\n  const y2 = sy[c];\n  const area = (x1 - x0) * (y2 - y0) - (y1 - y0) * (x2 - x0);\n  if (area > -1e-4 && area \u003c 1e-4) return;\n  const facing = area > 0;\n  const minX = Math.max(0, Math.floor(Math.min(x0, x1, x2)));\n  const maxX = Math.min(W - 1, Math.ceil(Math.max(x0, x1, x2)));\n  const minY = Math.max(0, Math.floor(Math.min(y0, y1, y2)));\n  const maxY = Math.min(H - 1, Math.ceil(Math.max(y0, y1, y2)));\n  if (minX > maxX || minY > maxY) return;\n  const inv = 1 / area;\n  const I0 = facing ? fi[a] : bi[a];\n  const I1 = facing ? fi[b] : bi[b];\n  const I2 = facing ? fi[c] : bi[c];\n  const S0 = facing ? fs[a] : bs[a];\n  const S1 = facing ? fs[b] : bs[b];\n  const S2 = facing ? fs[c] : bs[c];\n  const v0 = Math.floor(a / NX);\n  const v1 = Math.floor(b / NX);\n  const v2 = Math.floor(c / NX);\n  const u0 = a - v0 * NX;\n  const u1 = b - v1 * NX;\n  const u2 = c - v2 * NX;\n  const base = facing ? front : back;\n  // Barycentric weights step by a constant from one LED to the next along a row.\n  const d0 = (y1 - y2) * inv;\n  const d1 = (y2 - y0) * inv;\n  const za = pz[a];\n  const zb = pz[b];\n  const zc = pz[c];\n  for (let y = minY; y \u003c= maxY; y++) {\n    const py = y + 0.5;\n    const px0 = minX + 0.5;\n    let l0 = ((x1 - px0) * (y2 - py) - (y1 - py) * (x2 - px0)) * inv - d0;\n    let l1 = ((x2 - px0) * (y0 - py) - (y2 - py) * (x0 - px0)) * inv - d1;\n    for (let x = minX; x \u003c= maxX; x++) {\n      l0 += d0;\n      l1 += d1;\n      const l2 = 1 - l0 - l1;\n      if (l0 \u003c 0 || l1 \u003c 0 || l2 \u003c 0) continue;\n      const z = l0 * za + l1 * zb + l2 * zc;\n      const o = y * W + x;\n      if (z \u003c= zbuf[o]) continue;\n      zbuf[o] = z;\n      let I = l0 * I0 + l1 * I1 + l2 * I2;\n      // The light comes in five steps with short ramps between, so a fold shows as\n      // contour lines on the LEDs rather than one long smear.\n      const q = I * 5;\n      const fl = Math.floor(q);\n      let fr = (q - fl - 0.38) / 0.24;\n      fr = fr \u003c 0 ? 0 : fr > 1 ? 1 : fr;\n      I = (fl + fr * fr * (3 - 2 * fr)) / 5;\n      const S = l0 * S0 + l1 * S1 + l2 * S2;\n      // A cream border down each side, two stripes near the hem and one under the rod,\n      // woven into the front only.\n      const v = l0 * v0 + l1 * v1 + l2 * v2;\n      const u = l0 * u0 + l1 * u1 + l2 * u2;\n      const band =\n        facing &&\n        ((v > 1.3 && v \u003c 2.1) || (v > 16.4 && v \u003c 17.4) || (v > 18.6 && v \u003c 19.2) || ((u > 0.45 && u \u003c 0.95) || (u > 10.05 && u \u003c 10.55)) && v > 1.3 && v \u003c 19.2);\n      const col = band ? stripe : base;\n      const qq = o * 3;\n      rgb[qq] = col[0] * I + S;\n      rgb[qq + 1] = col[1] * I + S;\n      rgb[qq + 2] = col[2] * I + S;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const { px, py, pz, nx, ny, nz, sx, sy, fi, bi, fs, bs, rgb, zbuf } = params;\n  normals(params);\n  const stiff = params.stiff;\n  const sheen = 70 * (1 - stiff) * (1 - stiff);\n  // Halfway between the light and the eye, for the sheen.\n  let hx = LX;\n  let hy = LY;\n  let hz = LZ + 1;\n  const hm = Math.sqrt(hx * hx + hy * hy + hz * hz);\n  hx /= hm;\n  hy /= hm;\n  hz /= hm;\n  const shine = 10 + stiff * 8;\n  for (let a = 0; a \u003c N; a++) {\n    const f = CAM / (CAM - pz[a]);\n    sx[a] = CX + (px[a] - CX) * f;\n    sy[a] = CY + (py[a] - CY) * f;\n    const d = nx[a] * LX + ny[a] * LY + nz[a] * LZ;\n    const h = nx[a] * hx + ny[a] * hy + nz[a] * hz;\n    fi[a] = 0.12 + 0.88 * Math.max(0, d);\n    bi[a] = 0.12 + 0.75 * Math.max(0, -d);\n    fs[a] = h > 0 ? sheen * Math.pow(h, shine) : 0;\n    bs[a] = h \u003c 0 ? sheen * 0.6 * Math.pow(-h, shine) : 0;\n  }\n  hsvInto(params.front, 0, params.hue, 0.85, 0.95);\n  hsvInto(params.back, 0, params.hue + 0.04, 0.42, 0.85);\n  hsvInto(params.stripe, 0, params.hue + 0.1, 0.16, 0.92);\n\n  rgb.fill(0);\n  zbuf.fill(-1e9);\n  // The rod, a dowel lit from above, with a knob at each end.\n  for (let x = 3; x \u003c= 60; x++) {\n    const end = x \u003c 5 || x > 58;\n    for (let y = ROD_Y - (end ? 2 : 1); y \u003c= ROD_Y + (end ? 1 : 0); y++) {\n      const o = y * W + x;\n      const top = y \u003c ROD_Y;\n      rgb[o * 3] = top ? 150 : 105;\n      rgb[o * 3 + 1] = top ? 96 : 62;\n      rgb[o * 3 + 2] = top ? 52 : 30;\n      zbuf[o] = 0;\n    }\n  }\n  for (let j = 0; j + 1 \u003c NY; j++)\n    for (let i = 0; i + 1 \u003c NX; i++) {\n      const a = j * NX + i;\n      tri(params, a, a + 1, a + NX);\n      tri(params, a + 1, a + NX + 1, a + NX);\n    }\n  // The clips, drawn last so they always show.\n  const clipped = params.drop \u003c 0 || params.drop >= 2.2;\n  if (clipped) {\n    for (let i = 0; i \u003c NX; i++) {\n      if (params.inv[i] !== 0) continue;\n      const cx = Math.round(sx[i] - 1);\n      const cy = Math.round(sy[i] - 3);\n      for (let y = cy; y \u003c cy + 3; y++)\n        for (let x = cx; x \u003c cx + 2; x++) {\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const o = (y * W + x) * 3;\n          const lit = y === cy ? 215 : 160;\n          rgb[o] = lit;\n          rgb[o + 1] = lit;\n          rgb[o + 2] = lit + 10;\n        }\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(235, rgb[o]), Math.min(235, rgb[o + 1]), Math.min(235, rgb[o + 2]));\n    }\n}\n","layer":{"id":"layer-cloth","type":"code","name":"cloth","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cloth\n// Family:  physics\n// Idea:    A Verlet cloth of 12 by 22 knots hangs from clips on a wooden rod, gusts from behind lift it towards you, and each LED is lit by how far the cloth there tilts from the light.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Wind=0..3, Stiffness=0..1, Pins=2..12\n//\n// Knob 1: Hue. The dye of the cloth; its stripes and its paler wrong side follow.\n// Knob 2: Wind. From still air, where it only sways, to gusts that throw the hem up past the rod.\n// Knob 3: Stiffness. Silk at 0, light with a sheen and many small folds; canvas at 1, heavy and matt in a few broad ones.\n// Knob 4: Pins. How many clips hold it to the rod, from two corners with a swag between them to every knot along the top.\n// Buttons: K1 tap opens the clips; the cloth drops to the floor and is lifted back onto the rod.\n\nconst W = 64;\nconst H = 128;\nconst NX = 12;\nconst NY = 22;\nconst N = NX * NY;\nconst REST = 5;\nconst ROD_Y = 8;\nconst PIN_Y = 10.5;\n// The clips sit closer together than the cloth is wide, so the top gathers.\nconst SPAN0 = 12;\nconst SPAN1 = 52;\nconst FLOOR = 126.5;\nconst STEP = 1 / 60;\nconst ITER = 6;\nconst G = 420;\n// A weak perspective: cloth blown towards you grows a little.\nconst CAM = 260;\nconst CX = 32;\nconst CY = 56;\n// Light from the upper left, low enough across the cloth that a fold's two sides differ.\nconst LX = -0.655;\nconst LY = -0.453;\nconst LZ = 0.605;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy) * (1 - ux) + hash(ix + 1, iy) * ux;\n  const b = hash(ix, iy + 1) * (1 - ux) + hash(ix + 1, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.px = new Float32Array(N);\n  params.py = new Float32Array(N);\n  params.pz = new Float32Array(N);\n  params.ox = new Float32Array(N);\n  params.oy = new Float32Array(N);\n  params.oz = new Float32Array(N);\n  params.nx = new Float32Array(N);\n  params.ny = new Float32Array(N);\n  params.nz = new Float32Array(N);\n  params.inv = new Float32Array(N);\n  // Where each clipped knot is pulled to, and where it was when the pull began.\n  params.tx = new Float32Array(NX);\n  params.ty = new Float32Array(NX);\n  params.tz = new Float32Array(NX);\n  params.lx = new Float32Array(NX);\n  params.ly = new Float32Array(NX);\n  params.lz = new Float32Array(NX);\n  params.sx = new Float32Array(N);\n  params.sy = new Float32Array(N);\n  params.fi = new Float32Array(N);\n  params.bi = new Float32Array(N);\n  params.fs = new Float32Array(N);\n  params.bs = new Float32Array(N);\n\n  // Springs: along the weave, across the diagonals, and over one knot to resist bending.\n  const pairs = [];\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      if (i + 1 \u003c NX) pairs.push(a, a + 1, 0);\n      if (j + 1 \u003c NY) pairs.push(a, a + NX, 0);\n    }\n  for (let j = 0; j + 1 \u003c NY; j++)\n    for (let i = 0; i + 1 \u003c NX; i++) {\n      const a = j * NX + i;\n      pairs.push(a, a + NX + 1, 1, a + 1, a + NX, 1);\n    }\n  params.nb = pairs.length / 3;\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      if (i + 2 \u003c NX) pairs.push(a, a + 2, 2);\n      if (j + 2 \u003c NY) pairs.push(a, a + 2 * NX, 2);\n    }\n  const count = pairs.length / 3;\n  params.nc = count;\n  params.ca = new Uint16Array(count);\n  params.cb = new Uint16Array(count);\n  params.ct = new Uint8Array(count);\n  params.cr = new Float32Array(count);\n  const len = [REST, REST * Math.SQRT2, REST * 2];\n  for (let c = 0; c \u003c count; c++) {\n    params.ca[c] = pairs[c * 3];\n    params.cb[c] = pairs[c * 3 + 1];\n    params.ct[c] = pairs[c * 3 + 2];\n    params.cr[c] = len[params.ct[c]];\n  }\n  params.k = new Float32Array(3);\n\n  params.rgb = new Float32Array(W * H * 3);\n  params.zbuf = new Float32Array(W * H);\n  params.front = new Float32Array(3);\n  params.back = new Float32Array(3);\n  params.stripe = new Float32Array(3);\n  params.pins = 0;\n  params.t = 0;\n  params.drop = -1;\n  params.lift = 0;\n  params.warm = false;\n  params.acc = 0;\n  hang(params);\n}\n\n// The cloth straight down from the rod, its top already gathered to the clips' spacing.\nfunction hang(params) {\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      const x = SPAN0 + ((SPAN1 - SPAN0) * i) / (NX - 1);\n      params.px[a] = params.ox[a] = x;\n      params.py[a] = params.oy[a] = PIN_Y + j * REST;\n      params.pz[a] = params.oz[a] = (Math.random() - 0.5) * 1.5;\n    }\n}\n\nfunction setPins(params, n) {\n  params.pins = n;\n  for (let i = 0; i \u003c N; i++) params.inv[i] = 1;\n  for (let p = 0; p \u003c n; p++) {\n    const i = Math.round((p * (NX - 1)) / (n - 1));\n    params.inv[i] = 0;\n  }\n  for (let i = 0; i \u003c NX; i++) {\n    params.tx[i] = SPAN0 + ((SPAN1 - SPAN0) * i) / (NX - 1);\n    params.ty[i] = PIN_Y;\n    params.tz[i] = 0;\n  }\n}\n\nfunction normals(params) {\n  const { px, py, pz, nx, ny, nz } = params;\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      const l = i > 0 ? a - 1 : a;\n      const r = i \u003c NX - 1 ? a + 1 : a;\n      const u = j > 0 ? a - NX : a;\n      const d = j \u003c NY - 1 ? a + NX : a;\n      const ax = px[r] - px[l];\n      const ay = py[r] - py[l];\n      const az = pz[r] - pz[l];\n      const bx = px[d] - px[u];\n      const by = py[d] - py[u];\n      const bz = pz[d] - pz[u];\n      // Across the weave crossed with down it: towards the viewer when the cloth hangs flat.\n      const cx = ay * bz - az * by;\n      const cy = az * bx - ax * bz;\n      const cz = ax * by - ay * bx;\n      const m = Math.sqrt(cx * cx + cy * cy + cz * cz) + 1e-6;\n      nx[a] = cx / m;\n      ny[a] = cy / m;\n      nz[a] = cz / m;\n    }\n}\n\nfunction step(params, wind, stiff, clipped) {\n  const { px, py, pz, ox, oy, oz, nx, ny, nz, inv } = params;\n  const dt = STEP;\n  const t = (params.t += dt);\n  normals(params);\n\n  // Gusts: a slow swell in strength and a direction that wanders either side of straight at you.\n  const swell = noise(t * 0.45, 7.1);\n  const gust = 0.3 + 1.52 * swell * swell;\n  const turn = (noise(t * 0.09, 2.3) - 0.5) * 2.4;\n  // Still air still breathes a little, so the cloth never hangs dead.\n  const speed = (wind + 0.2) * 62 * gust;\n  const wx = Math.sin(turn) * speed;\n  const wz = Math.cos(turn) * speed * 0.85;\n  // Silk catches the air; canvas is heavier for the same push.\n  const kd = (5.5 - stiff * 3) * dt;\n  const keep = 0.994;\n  // A falling cloth drops mostly straight; the wind only turns it.\n  const air = clipped ? 1 : 0.25;\n  for (let a = 0; a \u003c N; a++) {\n    if (clipped && inv[a] === 0) continue;\n    const vx = px[a] - ox[a];\n    const vy = py[a] - oy[a];\n    const vz = pz[a] - oz[a];\n    // Patches of the gust travel across the cloth, so it ripples rather than swings as one.\n    const local = (0.55 + 0.9 * noise(px[a] * 0.06 + t * 1.3, py[a] * 0.05 - t * 0.8)) * air;\n    const ux = wx * local * dt - vx;\n    const uy = -wind * 8 * local * dt - vy;\n    const uz = wz * local * dt - vz;\n    const d = (nx[a] * ux + ny[a] * uy + nz[a] * uz) * kd;\n    ox[a] = px[a];\n    oy[a] = py[a];\n    oz[a] = pz[a];\n    px[a] += vx * keep + nx[a] * d + ux * 0.002;\n    py[a] += vy * keep + ny[a] * d + G * dt * dt + uy * 0.002;\n    pz[a] += vz * keep + nz[a] * d + uz * 0.002;\n  }\n\n  // Clipped knots are carried, never pushed: straight to the rod, or along the lift after a drop.\n  for (let i = 0; i \u003c NX; i++) {\n    if (inv[i] !== 0 || !clipped) continue;\n    let x = params.tx[i];\n    let y = params.ty[i];\n    let z = params.tz[i];\n    if (params.lift \u003c 1) {\n      const e = params.lift * params.lift * (3 - 2 * params.lift);\n      x = params.lx[i] + (x - params.lx[i]) * e;\n      y = params.ly[i] + (y - params.ly[i]) * e;\n      z = params.lz[i] + (z - params.lz[i]) * e;\n    }\n    ox[i] = px[i];\n    oy[i] = py[i];\n    oz[i] = pz[i];\n    px[i] = x;\n    py[i] = y;\n    pz[i] = z;\n  }\n\n  const k = params.k;\n  k[0] = 1;\n  k[1] = 0.5;\n  k[2] = 0.015 + stiff * stiff * 0.5;\n  const { ca, cb, ct, cr } = params;\n  const nc = params.nc;\n  const free = clipped ? inv : null;\n  for (let it = 0; it \u003c ITER; it++) {\n    // The bending springs are soft anyway, so every other pass is enough for them.\n    const last = it & 1 ? params.nb : nc;\n    for (let c = 0; c \u003c last; c++) {\n      const a = ca[c];\n      const b = cb[c];\n      const wa = free ? free[a] : 1;\n      const wb = free ? free[b] : 1;\n      const ws = wa + wb;\n      if (ws === 0) continue;\n      const dx = px[b] - px[a];\n      const dy = py[b] - py[a];\n      const dz = pz[b] - pz[a];\n      const dist = Math.sqrt(dx * dx + dy * dy + dz * dz) + 1e-6;\n      const f = ((dist - cr[c]) / dist) * k[ct[c]] / ws;\n      px[a] += dx * f * wa;\n      py[a] += dy * f * wa;\n      pz[a] += dz * f * wa;\n      px[b] -= dx * f * wb;\n      py[b] -= dy * f * wb;\n      pz[b] -= dz * f * wb;\n    }\n  }\n  for (let a = 0; a \u003c N; a++) {\n    if (pz[a] > 150) pz[a] = 150;\n    // The floor and, while it falls, the walls are where the panel's edges are seen to be,\n    // so a cloth nearer the eye still lands on the bottom row and not below it.\n    const f = CAM / (CAM - pz[a]);\n    const floor = CY + (FLOOR - CY) / f;\n    if (py[a] > floor) {\n      // The floor holds and drags, so a dropped cloth crumples instead of sliding.\n      py[a] = floor;\n      ox[a] = px[a] - (px[a] - ox[a]) * 0.4;\n      pz[a] *= 0.9;\n      oz[a] = pz[a];\n    }\n    if (!clipped) {\n      const wall = 31 / f;\n      if (px[a] \u003c CX - wall) px[a] = CX - wall;\n      if (px[a] > CX + wall) px[a] = CX + wall;\n    }\n  }\n}\n\nfunction update1(params, dt, k, pressed) {\n  const wind = Math.max(0, k[1]);\n  const stiff = Math.max(0, Math.min(1, k[2]));\n  const pins = Math.max(2, Math.min(NX, Math.round(k[3])));\n  if (pins !== params.pins) setPins(params, pins);\n\n  if (pressed && params.drop \u003c 0) params.drop = 0;\n  let clipped = true;\n  if (params.drop >= 0) {\n    params.drop += dt;\n    if (params.drop \u003c 2.2) clipped = false;\n    else {\n      if (params.lift >= 1) {\n        // The lift starts from wherever the top knots lie on the floor.\n        params.lift = 0;\n        for (let i = 0; i \u003c NX; i++) {\n          params.lx[i] = params.px[i];\n          params.ly[i] = params.py[i];\n          params.lz[i] = params.pz[i];\n        }\n      }\n      params.lift = Math.min(1, (params.drop - 2.2) / 1.4);\n      if (params.lift >= 1) params.drop = -1;\n    }\n  }\n\n  params.acc += dt;\n  let n = 0;\n  while (params.acc >= STEP && n \u003c 4) {\n    params.acc -= STEP;\n    step(params, wind, stiff, clipped);\n    n++;\n  }\n  if (n === 4) params.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 2];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0] + 0.6;\n  params.stiff = Math.max(0, Math.min(1, k[2]));\n  if (!params.warm) {\n    // Open on a cloth that has been hanging in the wind for a while.\n    params.warm = true;\n    params.lift = 1;\n    setPins(params, Math.max(2, Math.min(NX, Math.round(k[3]))));\n    for (let s = 0; s \u003c 90; s++) update1(params, STEP, k, false);\n  }\n  params.lift = params.drop \u003c 0 ? 1 : params.lift;\n  update1(params, dt, k, input.btnPressed && input.btnPressed[0]);\n}\n\n// One triangle of the cloth, Gouraud-lit from its three knots, kept where it is nearest.\nfunction tri(params, a, b, c) {\n  const { sx, sy, pz, fi, bi, fs, bs, rgb, zbuf, front, back, stripe } = params;\n  const x0 = sx[a];\n  const y0 = sy[a];\n  const x1 = sx[b];\n  const y1 = sy[b];\n  const x2 = sx[c];\n  const y2 = sy[c];\n  const area = (x1 - x0) * (y2 - y0) - (y1 - y0) * (x2 - x0);\n  if (area > -1e-4 && area \u003c 1e-4) return;\n  const facing = area > 0;\n  const minX = Math.max(0, Math.floor(Math.min(x0, x1, x2)));\n  const maxX = Math.min(W - 1, Math.ceil(Math.max(x0, x1, x2)));\n  const minY = Math.max(0, Math.floor(Math.min(y0, y1, y2)));\n  const maxY = Math.min(H - 1, Math.ceil(Math.max(y0, y1, y2)));\n  if (minX > maxX || minY > maxY) return;\n  const inv = 1 / area;\n  const I0 = facing ? fi[a] : bi[a];\n  const I1 = facing ? fi[b] : bi[b];\n  const I2 = facing ? fi[c] : bi[c];\n  const S0 = facing ? fs[a] : bs[a];\n  const S1 = facing ? fs[b] : bs[b];\n  const S2 = facing ? fs[c] : bs[c];\n  const v0 = Math.floor(a / NX);\n  const v1 = Math.floor(b / NX);\n  const v2 = Math.floor(c / NX);\n  const u0 = a - v0 * NX;\n  const u1 = b - v1 * NX;\n  const u2 = c - v2 * NX;\n  const base = facing ? front : back;\n  // Barycentric weights step by a constant from one LED to the next along a row.\n  const d0 = (y1 - y2) * inv;\n  const d1 = (y2 - y0) * inv;\n  const za = pz[a];\n  const zb = pz[b];\n  const zc = pz[c];\n  for (let y = minY; y \u003c= maxY; y++) {\n    const py = y + 0.5;\n    const px0 = minX + 0.5;\n    let l0 = ((x1 - px0) * (y2 - py) - (y1 - py) * (x2 - px0)) * inv - d0;\n    let l1 = ((x2 - px0) * (y0 - py) - (y2 - py) * (x0 - px0)) * inv - d1;\n    for (let x = minX; x \u003c= maxX; x++) {\n      l0 += d0;\n      l1 += d1;\n      const l2 = 1 - l0 - l1;\n      if (l0 \u003c 0 || l1 \u003c 0 || l2 \u003c 0) continue;\n      const z = l0 * za + l1 * zb + l2 * zc;\n      const o = y * W + x;\n      if (z \u003c= zbuf[o]) continue;\n      zbuf[o] = z;\n      let I = l0 * I0 + l1 * I1 + l2 * I2;\n      // The light comes in five steps with short ramps between, so a fold shows as\n      // contour lines on the LEDs rather than one long smear.\n      const q = I * 5;\n      const fl = Math.floor(q);\n      let fr = (q - fl - 0.38) / 0.24;\n      fr = fr \u003c 0 ? 0 : fr > 1 ? 1 : fr;\n      I = (fl + fr * fr * (3 - 2 * fr)) / 5;\n      const S = l0 * S0 + l1 * S1 + l2 * S2;\n      // A cream border down each side, two stripes near the hem and one under the rod,\n      // woven into the front only.\n      const v = l0 * v0 + l1 * v1 + l2 * v2;\n      const u = l0 * u0 + l1 * u1 + l2 * u2;\n      const band =\n        facing &&\n        ((v > 1.3 && v \u003c 2.1) || (v > 16.4 && v \u003c 17.4) || (v > 18.6 && v \u003c 19.2) || ((u > 0.45 && u \u003c 0.95) || (u > 10.05 && u \u003c 10.55)) && v > 1.3 && v \u003c 19.2);\n      const col = band ? stripe : base;\n      const qq = o * 3;\n      rgb[qq] = col[0] * I + S;\n      rgb[qq + 1] = col[1] * I + S;\n      rgb[qq + 2] = col[2] * I + S;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const { px, py, pz, nx, ny, nz, sx, sy, fi, bi, fs, bs, rgb, zbuf } = params;\n  normals(params);\n  const stiff = params.stiff;\n  const sheen = 70 * (1 - stiff) * (1 - stiff);\n  // Halfway between the light and the eye, for the sheen.\n  let hx = LX;\n  let hy = LY;\n  let hz = LZ + 1;\n  const hm = Math.sqrt(hx * hx + hy * hy + hz * hz);\n  hx /= hm;\n  hy /= hm;\n  hz /= hm;\n  const shine = 10 + stiff * 8;\n  for (let a = 0; a \u003c N; a++) {\n    const f = CAM / (CAM - pz[a]);\n    sx[a] = CX + (px[a] - CX) * f;\n    sy[a] = CY + (py[a] - CY) * f;\n    const d = nx[a] * LX + ny[a] * LY + nz[a] * LZ;\n    const h = nx[a] * hx + ny[a] * hy + nz[a] * hz;\n    fi[a] = 0.12 + 0.88 * Math.max(0, d);\n    bi[a] = 0.12 + 0.75 * Math.max(0, -d);\n    fs[a] = h > 0 ? sheen * Math.pow(h, shine) : 0;\n    bs[a] = h \u003c 0 ? sheen * 0.6 * Math.pow(-h, shine) : 0;\n  }\n  hsvInto(params.front, 0, params.hue, 0.85, 0.95);\n  hsvInto(params.back, 0, params.hue + 0.04, 0.42, 0.85);\n  hsvInto(params.stripe, 0, params.hue + 0.1, 0.16, 0.92);\n\n  rgb.fill(0);\n  zbuf.fill(-1e9);\n  // The rod, a dowel lit from above, with a knob at each end.\n  for (let x = 3; x \u003c= 60; x++) {\n    const end = x \u003c 5 || x > 58;\n    for (let y = ROD_Y - (end ? 2 : 1); y \u003c= ROD_Y + (end ? 1 : 0); y++) {\n      const o = y * W + x;\n      const top = y \u003c ROD_Y;\n      rgb[o * 3] = top ? 150 : 105;\n      rgb[o * 3 + 1] = top ? 96 : 62;\n      rgb[o * 3 + 2] = top ? 52 : 30;\n      zbuf[o] = 0;\n    }\n  }\n  for (let j = 0; j + 1 \u003c NY; j++)\n    for (let i = 0; i + 1 \u003c NX; i++) {\n      const a = j * NX + i;\n      tri(params, a, a + 1, a + NX);\n      tri(params, a + 1, a + NX + 1, a + NX);\n    }\n  // The clips, drawn last so they always show.\n  const clipped = params.drop \u003c 0 || params.drop >= 2.2;\n  if (clipped) {\n    for (let i = 0; i \u003c NX; i++) {\n      if (params.inv[i] !== 0) continue;\n      const cx = Math.round(sx[i] - 1);\n      const cy = Math.round(sy[i] - 3);\n      for (let y = cy; y \u003c cy + 3; y++)\n        for (let x = cx; x \u003c cx + 2; x++) {\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const o = (y * W + x) * 3;\n          const lit = y === cy ? 215 : 160;\n          rgb[o] = lit;\n          rgb[o + 1] = lit;\n          rgb[o + 2] = lit + 10;\n        }\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(235, rgb[o]), Math.min(235, rgb[o + 1]), Math.min(235, rgb[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Wind=0..3, Stiffness=0..1, Pins=2..12","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The dye of the cloth; its stripes and its paler wrong side follow."},{"name":"Wind","min":0,"max":3,"about":"From still air, where it only sways, to gusts that throw the hem up past the rod."},{"name":"Stiffness","min":0,"max":1,"about":"Silk at 0, light with a sheen and many small folds; canvas at 1, heavy and matt in a few broad ones."},{"name":"Pins","min":2,"max":12,"about":"How many clips hold it to the rod, from two corners with a swag between them to every knot along the top."}],"start":[0,2,0,2],"measures":{"motion":0.5789,"detail":0.0244,"edges":0.3966,"complexity":0.9079,"coverage":0.5904,"colour":0.3319,"drift":0.4132},"knobResponse":[0.2963,0.322,0.2371,0.2837]},{"slug":"contour","title":"Contour Map","family":"data","round":2,"note":"천천히 솟고 가라앉는 땅의 지형도예요. 다섯째 등고선마다 밝고, 바닷물이 차오르면 선은 땅에 그대로 남은 채 물 밑으로 들어가요.","idea":"A topographic map of slowly heaving land, a contour line every so many metres and every fifth one brighter, tinted green in the lowland and white on the peaks, with a sea that floods whatever lies below it.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Contour Map\n// Family:  data\n// Idea:    A topographic map of slowly heaving land, a contour line every so many metres and every fifth one brighter, tinted green in the lowland and white on the peaks, with a sea that floods whatever lies below it.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Morph=0..6, Interval=50..200, Sea level=-300..600\n//\n// Knob 1: Palette. The atlas, then a viridis data plot, then neon lines on black, then a survey sheet in dark ink.\n// Knob 2: Morph. How fast the land rises and sinks; 0 holds the map still.\n// Knob 3: Interval. Metres between contour lines, from a dense survey at 50 to a few wide rings at 200.\n// Knob 4: Sea level. Floods the lowland or drains the shelf; the lines stay where the ground is and go under the water.\n\nconst W = 64;\nconst H = 128;\nconst N = 128;\nconst LAND_LO = -400;\nconst LAND_HI = 1400;\nconst DEEP = 700;\nconst KEYS = [\"fill\", \"line\", \"index\", \"water\", \"wline\", \"coast\"];\n// Where the three slices of the noise are read from.\nconst OX = [0, 61.3, 17.9];\nconst OY = [0, 23.7, 88.1];\n\n// Stops are [metres, colour]: land by height, water by depth.\nconst PALETTES = [\n  {\n    land: [[-400, 0x2c6e30], [0, 0x2f7a34], [150, 0x5c9a38], [350, 0xa6a64c], [550, 0xb08444], [750, 0x8a5a36], [950, 0x7a625a], [1150, 0xb4aea8], [1400, 0xf2f4f6]],\n    water: [[0, 0x3c8ed4], [200, 0x1c52a0], [700, 0x0a1c50]],\n    fill: 0.5, line: 0.3, index: 0.7, wline: 0.45, coast: 0xd8f0ff,\n  },\n  {\n    land: [[-150, 0x440154], [50, 0x472d7b], [200, 0x3b528b], [350, 0x2c728e], [500, 0x21918c], [650, 0x28ae80], [800, 0x5ec962], [950, 0xaadc32], [1100, 0xfde725]],\n    water: [[0, 0x2a2a34], [700, 0x0e0e14]],\n    fill: 0.6, line: 0.3, index: 0.7, wline: 0.35, coast: 0xffffff,\n  },\n  {\n    land: [[-400, 0x00c8ff], [300, 0x00ffa0], [700, 0xc0ff40], [1000, 0xff9020], [1400, 0xff40c0]],\n    water: [[0, 0x082050], [700, 0x020818]],\n    fill: 0.08, line: 0, index: 0.55, wline: 0.6, coast: 0x60ffe0,\n  },\n  {\n    // Dark ink on paper: here the index lines are heavier, not brighter.\n    land: [[-400, 0xe0d0a8], [1400, 0xc8ae86]],\n    water: [[0, 0x6c9cac], [700, 0x48788c]],\n    fill: 0.58, ink: 0x3a2412, inkIndex: 0x1a0c04, wink: 0x1e3c58, coast: 0x102c4a,\n  },\n];\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x, 374761393) + Math.imul(y, 668265263) + Math.imul(s, 2147483647);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction fade(t) {\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\n// Tileable gradient noise, three octaves, zero mean and unit spread. Value\n// noise was tried first; its contours run along the lattice. A fourth\n// octave put a wiggle in every line that the panel cannot draw.\nfunction bake(seed) {\n  const tex = new Float32Array(N * N);\n  let amp = 1;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 4 \u003c\u003c o;\n    const size = N / cells;\n    for (let y = 0; y \u003c N; y++) {\n      const gy = Math.floor(y / size);\n      const fy = y / size - gy;\n      const uy = fade(fy);\n      for (let x = 0; x \u003c N; x++) {\n        const gx = Math.floor(x / size);\n        const fx = x / size - gx;\n        const ux = fade(fx);\n        let top = 0;\n        let bottom = 0;\n        for (let c = 0; c \u003c 4; c++) {\n          const cx = (gx + (c & 1)) % cells;\n          const cy = (gy + (c >> 1)) % cells;\n          const a = hash(cx, cy, seed * 8 + o) * 6.2832;\n          const d = Math.cos(a) * (fx - (c & 1)) + Math.sin(a) * (fy - (c >> 1));\n          if (c === 0) top = d;\n          else if (c === 1) top += (d - top) * ux;\n          else if (c === 2) bottom = d;\n          else bottom += (d - bottom) * ux;\n        }\n        tex[y * N + x] += (top + (bottom - top) * uy) * amp;\n      }\n    }\n    amp *= 0.4;\n  }\n  let sum = 0;\n  for (let i = 0; i \u003c tex.length; i++) sum += tex[i];\n  const mean = sum / tex.length;\n  let sq = 0;\n  for (let i = 0; i \u003c tex.length; i++) sq += (tex[i] - mean) * (tex[i] - mean);\n  const sd = Math.sqrt(sq / tex.length);\n  for (let i = 0; i \u003c tex.length; i++) tex[i] = (tex[i] - mean) / sd;\n  return tex;\n}\n\nfunction ramp(out, stops, lo, hi, scale, toward, mix) {\n  const n = out.length / 3;\n  let s = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const m = lo + ((hi - lo) * i) / (n - 1);\n    while (s \u003c stops.length - 2 && m > stops[s + 1][0]) s++;\n    const a = stops[s];\n    const b = stops[Math.min(stops.length - 1, s + 1)];\n    const f = b[0] === a[0] ? 0 : Math.max(0, Math.min(1, (m - a[0]) / (b[0] - a[0])));\n    for (let c = 0; c \u003c 3; c++) {\n      const sh = 16 - c * 8;\n      const v = ((a[1] >> sh) & 255) * (1 - f) + ((b[1] >> sh) & 255) * f;\n      out[i * 3 + c] = (v + (toward - v) * mix) * scale;\n    }\n  }\n}\n\n// One palette as five tables: land fill, land line, index line, water fill, water line.\nfunction tables(p) {\n  const t = {\n    fill: new Float32Array(128 * 3),\n    line: new Float32Array(128 * 3),\n    index: new Float32Array(128 * 3),\n    water: new Float32Array(64 * 3),\n    wline: new Float32Array(64 * 3),\n    coast: new Float32Array(3),\n  };\n  ramp(t.fill, p.land, LAND_LO, LAND_HI, p.fill, 0, 0);\n  ramp(t.water, p.water, 0, DEEP, 1, 0, 0);\n  if (p.ink) {\n    ramp(t.line, [[0, p.ink], [1, p.ink]], 0, 1, 1, 0, 0);\n    ramp(t.index, [[0, p.inkIndex], [1, p.inkIndex]], 0, 1, 1, 0, 0);\n    ramp(t.wline, [[0, p.wink], [1, p.wink]], 0, 1, 1, 0, 0);\n  } else {\n    ramp(t.line, p.land, LAND_LO, LAND_HI, 0.85, 255, p.line);\n    ramp(t.index, p.land, LAND_LO, LAND_HI, 1, 255, p.index);\n    ramp(t.wline, p.water, 0, DEEP, 1, 200, p.wline);\n  }\n  t.coast[0] = (p.coast >> 16) & 255;\n  t.coast[1] = (p.coast >> 8) & 255;\n  t.coast[2] = p.coast & 255;\n  return t;\n}\n\nexport function setup(params) {\n  params.tex = bake(1);\n  params.e = new Float32Array(W * H);\n  params.cx = new Int32Array(3 * W);\n  params.cf = new Float32Array(3 * W);\n  params.ry = new Int32Array(3 * H);\n  params.rf = new Float32Array(3 * H);\n  params.wk = new Float32Array(3);\n  params.sets = PALETTES.map(tables);\n  params.mix = tables(PALETTES[0]);\n  params.palKey = -1;\n  params.phi = 0.6;\n  params.psi = 0;\n  params.drift = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 50, 0.06];\n  dt = Math.min(dt, 0.1);\n  const morph = Math.max(0, k[1]);\n  params.phi += dt * morph * 0.0075;\n  params.psi += dt * morph * 0.003;\n  params.drift += dt * morph * 0.016;\n  params.interval = Math.max(10, k[2]);\n  params.sea = k[3];\n\n  // Four palettes in a row, each held for a while before it blends into the next.\n  const pos = Math.max(0, Math.min(1, k[0])) * (PALETTES.length - 1);\n  if (pos !== params.palKey) {\n    params.palKey = pos;\n    const a = Math.min(PALETTES.length - 2, Math.floor(pos));\n    const u = pos - a;\n    const g = Math.max(0, Math.min(1, (u - 0.2) / 0.6));\n    const m = g * g * (3 - 2 * g);\n    const A = params.sets[a];\n    const B = params.sets[a + 1];\n    for (const key of KEYS) {\n      const o = params.mix[key];\n      for (let i = 0; i \u003c o.length; i++) o[i] = A[key][i] * (1 - m) + B[key][i] * m;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const tex = params.tex;\n  const e = params.e;\n  // The land is three slices of one noise, turned slowly against each other,\n  // so hills swell and sink in place instead of sliding past.\n  const c1 = Math.cos(params.phi);\n  const s1 = Math.sin(params.phi);\n  const c2 = Math.cos(params.psi) * s1;\n  const s2 = Math.sin(params.psi) * s1;\n  const s = 0.6;\n  const dr = params.drift;\n  // Each slice is read at the same columns in every row and the same rows in\n  // every column, so the lattice lookups are worked out once per frame.\n  const cx = params.cx;\n  const cf = params.cf;\n  const ry = params.ry;\n  const rf = params.rf;\n  for (let k = 0; k \u003c 3; k++) {\n    for (let x = 0; x \u003c W; x++) {\n      const u = x * s + dr + OX[k];\n      const fu = Math.floor(u);\n      cx[k * W + x] = fu & (N - 1);\n      cf[k * W + x] = u - fu;\n    }\n    for (let y = 0; y \u003c H; y++) {\n      const v = y * s + dr * 0.4 + OY[k];\n      const fv = Math.floor(v);\n      ry[k * H + y] = (fv & (N - 1)) * N;\n      rf[k * H + y] = v - fv;\n    }\n  }\n  const wk = params.wk;\n  wk[0] = c1;\n  wk[1] = c2;\n  wk[2] = s2;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) e[y * W + x] = 0;\n    for (let k = 0; k \u003c 3; k++) {\n      const r0 = ry[k * H + y];\n      const r1 = (r0 + N) & (N * N - 1);\n      const ty = rf[k * H + y];\n      const w = wk[k];\n      for (let x = 0; x \u003c W; x++) {\n        const x0 = cx[k * W + x];\n        const x1 = (x0 + 1) & (N - 1);\n        const tx = cf[k * W + x];\n        const a = tex[r0 + x0];\n        const b = tex[r0 + x1];\n        const c = tex[r1 + x0];\n        const d = tex[r1 + x1];\n        e[y * W + x] += (a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty) * w;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const n = e[y * W + x];\n      // Peaks a little sharper than valleys, the way real ground erodes.\n      e[y * W + x] = 190 + 240 * n + 50 * n * Math.abs(n);\n    }\n  }\n\n  const P = params.mix;\n  const fill = P.fill;\n  const line = P.line;\n  const index = P.index;\n  const water = P.water;\n  const wline = P.wline;\n  const coast = P.coast;\n  const I = params.interval;\n  const sea = params.sea;\n  const toLand = 127 / (LAND_HI - LAND_LO);\n  const toDepth = 63 / DEEP;\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const row = y * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      const h = e[row + x];\n      const gx = (e[row + r] - e[row + l]) * 0.5;\n      const gy = (e[down + x] - e[up + x]) * 0.5;\n      // Metres per LED here, so a height difference becomes a distance.\n      const ig = 1 / (Math.sqrt(gx * gx + gy * gy) + 0.5);\n      const q = h / I;\n      const level = Math.floor(q + 0.5);\n      const major = level % 5 === 0;\n      // A line is drawn by its distance from the pixel, so it glides as the\n      // land moves instead of jumping a whole LED.\n      const off = q > level ? q - level : level - q;\n      let a = 1 - off * I * ig * (major ? 1.05 : 1.43);\n      if (a \u003c 0) a = 0;\n      let R;\n      let G;\n      let B;\n      let LR;\n      let LG;\n      let LB;\n      if (h \u003c sea) {\n        let d = ((sea - h) * toDepth + 0.5) | 0;\n        d = (d > 63 ? 63 : d) * 3;\n        R = water[d];\n        G = water[d + 1];\n        B = water[d + 2];\n        LR = wline[d];\n        LG = wline[d + 1];\n        LB = wline[d + 2];\n        if (!major) a *= 0.5;\n      } else {\n        let i = ((h - LAND_LO) * toLand + 0.5) | 0;\n        i = (i \u003c 0 ? 0 : i > 127 ? 127 : i) * 3;\n        // Light from the top left, a hillshade under the tint.\n        let sh = 1 + (e[up + l] - e[down + r]) * 0.006;\n        sh = sh \u003c 0.55 ? 0.55 : sh > 1.45 ? 1.45 : sh;\n        R = fill[i] * sh;\n        G = fill[i + 1] * sh;\n        B = fill[i + 2] * sh;\n        const t = major ? index : line;\n        LR = t[i];\n        LG = t[i + 1];\n        LB = t[i + 2];\n      }\n      R += (LR - R) * a;\n      G += (LG - G) * a;\n      B += (LB - B) * a;\n      // The shore is a line of its own at whatever height the sea stands.\n      const c = 1 - (h > sea ? h - sea : sea - h) * ig * 1.25;\n      if (c > 0) {\n        R += (coast[0] - R) * c;\n        G += (coast[1] - G) * c;\n        B += (coast[2] - B) * c;\n      }\n      display.setPixel(x, y, R > 255 ? 255 : R, G > 255 ? 255 : G, B > 255 ? 255 : B);\n    }\n  }\n}\n","layer":{"id":"layer-contour","type":"code","name":"contour","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Contour Map\n// Family:  data\n// Idea:    A topographic map of slowly heaving land, a contour line every so many metres and every fifth one brighter, tinted green in the lowland and white on the peaks, with a sea that floods whatever lies below it.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Morph=0..6, Interval=50..200, Sea level=-300..600\n//\n// Knob 1: Palette. The atlas, then a viridis data plot, then neon lines on black, then a survey sheet in dark ink.\n// Knob 2: Morph. How fast the land rises and sinks; 0 holds the map still.\n// Knob 3: Interval. Metres between contour lines, from a dense survey at 50 to a few wide rings at 200.\n// Knob 4: Sea level. Floods the lowland or drains the shelf; the lines stay where the ground is and go under the water.\n\nconst W = 64;\nconst H = 128;\nconst N = 128;\nconst LAND_LO = -400;\nconst LAND_HI = 1400;\nconst DEEP = 700;\nconst KEYS = [\"fill\", \"line\", \"index\", \"water\", \"wline\", \"coast\"];\n// Where the three slices of the noise are read from.\nconst OX = [0, 61.3, 17.9];\nconst OY = [0, 23.7, 88.1];\n\n// Stops are [metres, colour]: land by height, water by depth.\nconst PALETTES = [\n  {\n    land: [[-400, 0x2c6e30], [0, 0x2f7a34], [150, 0x5c9a38], [350, 0xa6a64c], [550, 0xb08444], [750, 0x8a5a36], [950, 0x7a625a], [1150, 0xb4aea8], [1400, 0xf2f4f6]],\n    water: [[0, 0x3c8ed4], [200, 0x1c52a0], [700, 0x0a1c50]],\n    fill: 0.5, line: 0.3, index: 0.7, wline: 0.45, coast: 0xd8f0ff,\n  },\n  {\n    land: [[-150, 0x440154], [50, 0x472d7b], [200, 0x3b528b], [350, 0x2c728e], [500, 0x21918c], [650, 0x28ae80], [800, 0x5ec962], [950, 0xaadc32], [1100, 0xfde725]],\n    water: [[0, 0x2a2a34], [700, 0x0e0e14]],\n    fill: 0.6, line: 0.3, index: 0.7, wline: 0.35, coast: 0xffffff,\n  },\n  {\n    land: [[-400, 0x00c8ff], [300, 0x00ffa0], [700, 0xc0ff40], [1000, 0xff9020], [1400, 0xff40c0]],\n    water: [[0, 0x082050], [700, 0x020818]],\n    fill: 0.08, line: 0, index: 0.55, wline: 0.6, coast: 0x60ffe0,\n  },\n  {\n    // Dark ink on paper: here the index lines are heavier, not brighter.\n    land: [[-400, 0xe0d0a8], [1400, 0xc8ae86]],\n    water: [[0, 0x6c9cac], [700, 0x48788c]],\n    fill: 0.58, ink: 0x3a2412, inkIndex: 0x1a0c04, wink: 0x1e3c58, coast: 0x102c4a,\n  },\n];\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x, 374761393) + Math.imul(y, 668265263) + Math.imul(s, 2147483647);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction fade(t) {\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\n// Tileable gradient noise, three octaves, zero mean and unit spread. Value\n// noise was tried first; its contours run along the lattice. A fourth\n// octave put a wiggle in every line that the panel cannot draw.\nfunction bake(seed) {\n  const tex = new Float32Array(N * N);\n  let amp = 1;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 4 \u003c\u003c o;\n    const size = N / cells;\n    for (let y = 0; y \u003c N; y++) {\n      const gy = Math.floor(y / size);\n      const fy = y / size - gy;\n      const uy = fade(fy);\n      for (let x = 0; x \u003c N; x++) {\n        const gx = Math.floor(x / size);\n        const fx = x / size - gx;\n        const ux = fade(fx);\n        let top = 0;\n        let bottom = 0;\n        for (let c = 0; c \u003c 4; c++) {\n          const cx = (gx + (c & 1)) % cells;\n          const cy = (gy + (c >> 1)) % cells;\n          const a = hash(cx, cy, seed * 8 + o) * 6.2832;\n          const d = Math.cos(a) * (fx - (c & 1)) + Math.sin(a) * (fy - (c >> 1));\n          if (c === 0) top = d;\n          else if (c === 1) top += (d - top) * ux;\n          else if (c === 2) bottom = d;\n          else bottom += (d - bottom) * ux;\n        }\n        tex[y * N + x] += (top + (bottom - top) * uy) * amp;\n      }\n    }\n    amp *= 0.4;\n  }\n  let sum = 0;\n  for (let i = 0; i \u003c tex.length; i++) sum += tex[i];\n  const mean = sum / tex.length;\n  let sq = 0;\n  for (let i = 0; i \u003c tex.length; i++) sq += (tex[i] - mean) * (tex[i] - mean);\n  const sd = Math.sqrt(sq / tex.length);\n  for (let i = 0; i \u003c tex.length; i++) tex[i] = (tex[i] - mean) / sd;\n  return tex;\n}\n\nfunction ramp(out, stops, lo, hi, scale, toward, mix) {\n  const n = out.length / 3;\n  let s = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const m = lo + ((hi - lo) * i) / (n - 1);\n    while (s \u003c stops.length - 2 && m > stops[s + 1][0]) s++;\n    const a = stops[s];\n    const b = stops[Math.min(stops.length - 1, s + 1)];\n    const f = b[0] === a[0] ? 0 : Math.max(0, Math.min(1, (m - a[0]) / (b[0] - a[0])));\n    for (let c = 0; c \u003c 3; c++) {\n      const sh = 16 - c * 8;\n      const v = ((a[1] >> sh) & 255) * (1 - f) + ((b[1] >> sh) & 255) * f;\n      out[i * 3 + c] = (v + (toward - v) * mix) * scale;\n    }\n  }\n}\n\n// One palette as five tables: land fill, land line, index line, water fill, water line.\nfunction tables(p) {\n  const t = {\n    fill: new Float32Array(128 * 3),\n    line: new Float32Array(128 * 3),\n    index: new Float32Array(128 * 3),\n    water: new Float32Array(64 * 3),\n    wline: new Float32Array(64 * 3),\n    coast: new Float32Array(3),\n  };\n  ramp(t.fill, p.land, LAND_LO, LAND_HI, p.fill, 0, 0);\n  ramp(t.water, p.water, 0, DEEP, 1, 0, 0);\n  if (p.ink) {\n    ramp(t.line, [[0, p.ink], [1, p.ink]], 0, 1, 1, 0, 0);\n    ramp(t.index, [[0, p.inkIndex], [1, p.inkIndex]], 0, 1, 1, 0, 0);\n    ramp(t.wline, [[0, p.wink], [1, p.wink]], 0, 1, 1, 0, 0);\n  } else {\n    ramp(t.line, p.land, LAND_LO, LAND_HI, 0.85, 255, p.line);\n    ramp(t.index, p.land, LAND_LO, LAND_HI, 1, 255, p.index);\n    ramp(t.wline, p.water, 0, DEEP, 1, 200, p.wline);\n  }\n  t.coast[0] = (p.coast >> 16) & 255;\n  t.coast[1] = (p.coast >> 8) & 255;\n  t.coast[2] = p.coast & 255;\n  return t;\n}\n\nexport function setup(params) {\n  params.tex = bake(1);\n  params.e = new Float32Array(W * H);\n  params.cx = new Int32Array(3 * W);\n  params.cf = new Float32Array(3 * W);\n  params.ry = new Int32Array(3 * H);\n  params.rf = new Float32Array(3 * H);\n  params.wk = new Float32Array(3);\n  params.sets = PALETTES.map(tables);\n  params.mix = tables(PALETTES[0]);\n  params.palKey = -1;\n  params.phi = 0.6;\n  params.psi = 0;\n  params.drift = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 50, 0.06];\n  dt = Math.min(dt, 0.1);\n  const morph = Math.max(0, k[1]);\n  params.phi += dt * morph * 0.0075;\n  params.psi += dt * morph * 0.003;\n  params.drift += dt * morph * 0.016;\n  params.interval = Math.max(10, k[2]);\n  params.sea = k[3];\n\n  // Four palettes in a row, each held for a while before it blends into the next.\n  const pos = Math.max(0, Math.min(1, k[0])) * (PALETTES.length - 1);\n  if (pos !== params.palKey) {\n    params.palKey = pos;\n    const a = Math.min(PALETTES.length - 2, Math.floor(pos));\n    const u = pos - a;\n    const g = Math.max(0, Math.min(1, (u - 0.2) / 0.6));\n    const m = g * g * (3 - 2 * g);\n    const A = params.sets[a];\n    const B = params.sets[a + 1];\n    for (const key of KEYS) {\n      const o = params.mix[key];\n      for (let i = 0; i \u003c o.length; i++) o[i] = A[key][i] * (1 - m) + B[key][i] * m;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const tex = params.tex;\n  const e = params.e;\n  // The land is three slices of one noise, turned slowly against each other,\n  // so hills swell and sink in place instead of sliding past.\n  const c1 = Math.cos(params.phi);\n  const s1 = Math.sin(params.phi);\n  const c2 = Math.cos(params.psi) * s1;\n  const s2 = Math.sin(params.psi) * s1;\n  const s = 0.6;\n  const dr = params.drift;\n  // Each slice is read at the same columns in every row and the same rows in\n  // every column, so the lattice lookups are worked out once per frame.\n  const cx = params.cx;\n  const cf = params.cf;\n  const ry = params.ry;\n  const rf = params.rf;\n  for (let k = 0; k \u003c 3; k++) {\n    for (let x = 0; x \u003c W; x++) {\n      const u = x * s + dr + OX[k];\n      const fu = Math.floor(u);\n      cx[k * W + x] = fu & (N - 1);\n      cf[k * W + x] = u - fu;\n    }\n    for (let y = 0; y \u003c H; y++) {\n      const v = y * s + dr * 0.4 + OY[k];\n      const fv = Math.floor(v);\n      ry[k * H + y] = (fv & (N - 1)) * N;\n      rf[k * H + y] = v - fv;\n    }\n  }\n  const wk = params.wk;\n  wk[0] = c1;\n  wk[1] = c2;\n  wk[2] = s2;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) e[y * W + x] = 0;\n    for (let k = 0; k \u003c 3; k++) {\n      const r0 = ry[k * H + y];\n      const r1 = (r0 + N) & (N * N - 1);\n      const ty = rf[k * H + y];\n      const w = wk[k];\n      for (let x = 0; x \u003c W; x++) {\n        const x0 = cx[k * W + x];\n        const x1 = (x0 + 1) & (N - 1);\n        const tx = cf[k * W + x];\n        const a = tex[r0 + x0];\n        const b = tex[r0 + x1];\n        const c = tex[r1 + x0];\n        const d = tex[r1 + x1];\n        e[y * W + x] += (a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty) * w;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const n = e[y * W + x];\n      // Peaks a little sharper than valleys, the way real ground erodes.\n      e[y * W + x] = 190 + 240 * n + 50 * n * Math.abs(n);\n    }\n  }\n\n  const P = params.mix;\n  const fill = P.fill;\n  const line = P.line;\n  const index = P.index;\n  const water = P.water;\n  const wline = P.wline;\n  const coast = P.coast;\n  const I = params.interval;\n  const sea = params.sea;\n  const toLand = 127 / (LAND_HI - LAND_LO);\n  const toDepth = 63 / DEEP;\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const row = y * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      const h = e[row + x];\n      const gx = (e[row + r] - e[row + l]) * 0.5;\n      const gy = (e[down + x] - e[up + x]) * 0.5;\n      // Metres per LED here, so a height difference becomes a distance.\n      const ig = 1 / (Math.sqrt(gx * gx + gy * gy) + 0.5);\n      const q = h / I;\n      const level = Math.floor(q + 0.5);\n      const major = level % 5 === 0;\n      // A line is drawn by its distance from the pixel, so it glides as the\n      // land moves instead of jumping a whole LED.\n      const off = q > level ? q - level : level - q;\n      let a = 1 - off * I * ig * (major ? 1.05 : 1.43);\n      if (a \u003c 0) a = 0;\n      let R;\n      let G;\n      let B;\n      let LR;\n      let LG;\n      let LB;\n      if (h \u003c sea) {\n        let d = ((sea - h) * toDepth + 0.5) | 0;\n        d = (d > 63 ? 63 : d) * 3;\n        R = water[d];\n        G = water[d + 1];\n        B = water[d + 2];\n        LR = wline[d];\n        LG = wline[d + 1];\n        LB = wline[d + 2];\n        if (!major) a *= 0.5;\n      } else {\n        let i = ((h - LAND_LO) * toLand + 0.5) | 0;\n        i = (i \u003c 0 ? 0 : i > 127 ? 127 : i) * 3;\n        // Light from the top left, a hillshade under the tint.\n        let sh = 1 + (e[up + l] - e[down + r]) * 0.006;\n        sh = sh \u003c 0.55 ? 0.55 : sh > 1.45 ? 1.45 : sh;\n        R = fill[i] * sh;\n        G = fill[i + 1] * sh;\n        B = fill[i + 2] * sh;\n        const t = major ? index : line;\n        LR = t[i];\n        LG = t[i + 1];\n        LB = t[i + 2];\n      }\n      R += (LR - R) * a;\n      G += (LG - G) * a;\n      B += (LB - B) * a;\n      // The shore is a line of its own at whatever height the sea stands.\n      const c = 1 - (h > sea ? h - sea : sea - h) * ig * 1.25;\n      if (c > 0) {\n        R += (coast[0] - R) * c;\n        G += (coast[1] - G) * c;\n        B += (coast[2] - B) * c;\n      }\n      display.setPixel(x, y, R > 255 ? 255 : R, G > 255 ? 255 : G, B > 255 ? 255 : B);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..1, Morph=0..6, Interval=50..200, Sea level=-300..600","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":1,"about":"The atlas, then a viridis data plot, then neon lines on black, then a survey sheet in dark ink."},{"name":"Morph","min":0,"max":6,"about":"How fast the land rises and sinks; 0 holds the map still."},{"name":"Interval","min":50,"max":200,"about":"Metres between contour lines, from a dense survey at 50 to a few wide rings at 200."},{"name":"Sea level","min":-300,"max":600,"about":"Floods the lowland or drains the shelf; the lines stay where the ground is and go under the water."}],"start":[0,2,50,0.06],"measures":{"motion":0.059,"detail":0.1124,"edges":0.4216,"complexity":2.7352,"coverage":1,"colour":0.2347,"drift":0.0329},"knobResponse":[0.3087,0.1314,0.1058,0.2222]},{"slug":"crossroads","title":"Crossroads","family":"city","round":17,"note":"드론으로 곧장 내려다본 밤 네거리예요. 차는 전조등과 미등으로만 보이고, 나트륨등 웅덩이 사이에서 신호가 줄을 세웠다 풀며, 모든 차가 서면 사람들이 건널목 넷을 한꺼번에 건너요.","idea":"A night avenue seen straight down from a drone and crossed by two side streets, where the cars show by their lights, the signals hold and release the queues, and people cross all four zebras at once while every car waits.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Crossroads\n// Family:  city\n// Idea:    A night avenue seen straight down from a drone and crossed by two side streets, where the cars show by their lights, the signals hold and release the queues, and people cross all four zebras at once while every car waits.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17; the intelligent driver model of Treiber, Hennecke and Helbing (2000) and the all-way pedestrian phase of Seoul junctions\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Lamps=0..1, Pace=0.2..3, Hour=0..1, Rain=0..1\n//\n// Knob 1: Lamps. At 0 every street lamp is low-pressure sodium and pools the road in orange; turned up, the city swaps them one at a time for white LED heads.\n// Knob 2: Pace. The clock of the whole street: at 2 a car crosses the panel in about five seconds and the signals cycle every thirty, at 0.2 it all creeps.\n// Knob 3: Hour. At 0 the evening rush, with queues at every red; turned up, traffic and people thin out, after 1 am every other lamp goes out, and past 3 am the signals flash amber on the avenue and red on the side streets.\n// Knob 4: Rain. Darkens the asphalt to a mirror: each lamp glares under itself inside a haze of lit drops, signals and tail lights streak across the road, and people open umbrellas.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// First row of each side street, 12 rows across.\nconst JY = [30, 90];\n// Lane centres. Traffic keeps right: down the panel on the west half of the\n// avenue, up it on the east half; west on the north half of a side street.\nconst [SBO, SBI, NBI, NBO] = [22.5, 27.5, 36.5, 41.5];\nconst STEP = 0.25;\nconst cl = (v) => Math.min(1, Math.max(0, v));\n\n// A movement: an approach (from N, S, W, E) and a turn (straight, left, right).\nconst mv = (a, t) => 1 \u003c\u003c (a * 3 + t);\nconst all = (a) => 7 \u003c\u003c (a * 3);\nconst SR = (a) => mv(a, 0) | mv(a, 2);\n// The cycle in seconds at Pace 2: [length, green, amber, walk]. Each avenue\n// direction leads with its left arrow, the side streets take turns, then\n// every car waits while people cross all four zebras at once.\nconst PH = [\n  [4, all(0), 0, 0], [1, SR(0), mv(0, 1), 0], [5, SR(0) | SR(1), 0, 0], [1.2, SR(1), SR(0), 0], [4, all(1), 0, 0], [1.2, 0, all(1), 0],\n  [3, all(2), 0, 0], [1.2, 0, all(2), 0], [3, all(3), 0, 0], [1.2, 0, all(3), 0], [5, 0, 0, 1], [1.5, 0, 0, 2], [0.8, 0, 0, 0],\n];\nconst CYCLE = PH.reduce((a, p) => a + p[0], 0);\n\n// Low-pressure sodium burns in one orange line at 589 nm; LED heads are cool white.\nconst SODIUM = [1, 0.34, 0];\nconst LED = [0.4, 0.43, 0.47];\n// Lamps [x, y, reach]: both ends of the school street, two mid-block, and\n// opposite corners of each junction so the zebras stand in light.\nconst LAMPS = [\n  [6, 36, 8], [42, 70, 8], [21, 58, 8], [57, 36, 8],\n  ...JY.flatMap((y) => [[21, y - 1, 9], [42, y + 12, 9]]),\n];\n// The lamp at row 70 is dying: it goes out, strikes again in the red of its\n// neon starter gas and warms back up.\nconst DYING = 1;\n// Red neon crosses on church roofs, as on every Seoul skyline.\nconst CROSSES = [[7, 9], [56, 63], [9, 115]];\n// Lamp, headlight and tail light at their brightest, over albedo.\nconst [I_LAMP, I_HEAD, I_TAIL] = [20, 1, 9];\nconst AMBIENT = [0.13, 0.14, 0.18];\nconst RED = [1, 0.04, 0.03];\nconst GREEN = [0.05, 1, 0.5];\nconst SIG = [RED, [1, 0.5, 0], GREEN];\nconst GLASS = [0.03, 0.034, 0.04];\nconst AMBER = [255, 150, 0];\nconst BEAMS = [[1, 0.85, 0.6], [0.9, 0.95, 1]];\n// Car paint and its odds: white and silver half the time, as on Korean roads.\nconst PAINT = [[0.72, 0.72, 0.72], [0.48, 0.5, 0.53], [0.05, 0.05, 0.06], [0.2, 0.2, 0.22], [0.07, 0.09, 0.24], [0.55, 0.05, 0.04], [0.8, 0.4, 0.06]];\nconst PAINT_P = [0.3, 0.2, 0.17, 0.1, 0.07, 0.06, 0.1];\n// Umbrellas: clear convenience-store plastic most, then black, red, yellow, navy.\nconst UMBRELLA = [[0.7, 0.72, 0.75], [0.7, 0.72, 0.75], [0.05, 0.05, 0.08], [0.6, 0.05, 0.08], [0.75, 0.6, 0.05], [0.06, 0.12, 0.4]];\nconst PLUS = [[0, 0], [1, 0], [-1, 0], [0, 1], [0, -1]];\n// Walk lights laid in the kerb at both ends of each zebra, as in Seoul: first\n// LED and the way the strip runs.\nconst KERB = [[19, -6, 0, 1], [44, -6, 0, 1], [19, 14, 0, 1], [44, 14, 0, 1], [14, -1, 1, 0], [14, 12, 1, 0], [46, -1, 1, 0], [46, 12, 1, 0]];\n// Signal heads by approach, from the junction's first row: first LED of the\n// bar (red, amber, left arrow, green), the step along it, the way it faces.\nconst HEADS = [[23, 12, 1, 0, 0, -1], [40, -1, -1, 0, 0, 1], [44, 7, 0, 1, -1, 0], [19, 4, 0, -1, 1, 0]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction pick(list) {\n  let r = Math.random();\n  for (let i = 0; i \u003c list.length; i++) if ((r -= list[i]) \u003c 0) return i;\n  return list.length - 1;\n}\n\n// A route: a path sampled every STEP pixels, the speed allowed at each sample,\n// stop lines [s, junction, movement] and a turn [s0, s1, side]. Ops: [\"t\", c]\n// on until x or y is c, [\"s\", j, m] a stop line, [\"r\", side, radius] a turn.\nfunction route(x, y, hx, hy, ops) {\n  const X = [x];\n  const Y = [y];\n  const C = [99];\n  const stops = [];\n  let turn = null;\n  for (const op of ops) {\n    const s = (X.length - 1) * STEP;\n    if (op[0] === \"s\") stops.push([s, op[1], op[2]]);\n    else if (op[0] === \"t\") {\n      const n = Math.round((hx ? (op[1] - x) * hx : (op[1] - y) * hy) / STEP);\n      for (let i = 1; i \u003c= n; i++) X.push(x + hx * i * STEP), Y.push(y + hy * i * STEP), C.push(99);\n      x += hx * n * STEP;\n      y += hy * n * STEP;\n    } else {\n      const [, side, r] = op;\n      const nx = side > 0 ? -hy : hy;\n      const ny = side > 0 ? hx : -hx;\n      const cx = x + r * nx;\n      const cy = y + r * ny;\n      const n = Math.round((Math.PI / 2) * r / STEP);\n      turn = [s, s + n * STEP, side];\n      for (let i = 1; i \u003c= n; i++) {\n        const a = (i / n) * (Math.PI / 2);\n        X.push(cx - r * nx * Math.cos(a) + r * hx * Math.sin(a));\n        Y.push(cy - r * ny * Math.cos(a) + r * hy * Math.sin(a));\n        C.push(Math.sqrt(40 * r));\n      }\n      x = cx + r * hx;\n      y = cy + r * hy;\n      hx = nx;\n      hy = ny;\n    }\n  }\n  // Slow for a turn ahead at 25 px/s per second.\n  for (let i = C.length - 2; i >= 0; i--) C[i] = Math.min(C[i], Math.sqrt(C[i + 1] * C[i + 1] + 50 * STEP));\n  return { X, Y, C, stops, turn, len: (X.length - 1) * STEP };\n}\n\n// Eight entries, each a list of [odds, route].\nfunction routes() {\n  const [a, b] = JY;\n  const st = (j, ap, t) => [\"s\", j, mv(ap, t)];\n  // Along the avenue in lane x, through both junctions or turning t at one.\n  const avenue = (x, up, t) => {\n    const ap = up ? 1 : 0;\n    const order = up ? [1, 0] : [0, 1];\n    const ops = (at) => {\n      const o = [];\n      for (const j of order) {\n        const y = JY[j];\n        o.push([\"t\", up ? y + 20 : y - 8], st(j, ap, j === at ? t : 0));\n        if (j === at)\n          return o.concat(t === 2 ? [[\"t\", up ? y + 13 : y - 1], [\"r\", 1, 3.5], [\"t\", up ? 78 : -14]] : [[\"t\", up ? y + 9.5 : y + 2.5], [\"r\", -1, 7], [\"t\", up ? -14 : 78]]);\n      }\n      return o.concat([[\"t\", up ? -14 : 142]]);\n    };\n    return [[0.7, -1], [0.15, order[0]], [0.15, order[1]]].map(([p, at]) => [p, route(x, up ? 142 : -14, 0, up ? -1 : 1, ops(at))]);\n  };\n  const E = [avenue(SBO, 0, 2), avenue(SBI, 0, 1), avenue(NBI, 1, 1), avenue(NBO, 1, 2)];\n  JY.forEach((y, j) => {\n    // Turned onto the avenue, on through the other junction if it is ahead.\n    const down = j ? [[\"t\", 142]] : [[\"t\", b - 8], st(1, 0, 0), [\"t\", 142]];\n    const up = j ? [[\"t\", a + 20], st(0, 1, 0), [\"t\", -14]] : [[\"t\", -14]];\n    const side = (x, ly, h, sx, ap, ra, rt, la, lt) => [\n      [0.45, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 0), [\"t\", 64 - x]])],\n      [0.3, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 2), [\"t\", ra], [\"r\", 1, 3.5], ...rt])],\n      [0.25, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 1), [\"t\", la], [\"r\", -1, 7], ...lt])],\n    ];\n    E.push(side(-14, y + 9.5, 1, 12, 2, 19, down, 29.5, up), side(78, y + 2.5, -1, 52, 3, 45, up, 34.5, down));\n  });\n  return E;\n}\n\n// The ground as albedo per channel, and what each LED is: 0 roof, 1 road, 2 pavement.\nfunction ground(S) {\n  const { AR, AG, AB, kind } = S;\n  const set = (p, r, g, b) => ((AR[p] = r), (AG[p] = g), (AB[p] = b));\n  const paint = (p, v, yellow) => set(p, v, yellow ? v * 0.8 : v, yellow ? v * 0.2 : v);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const g = hash(x, y);\n      let j = -1;\n      let c = -1;\n      for (let i = 0; i \u003c 2; i++) if (y >= JY[i] - 20 && y \u003c JY[i] + 32) (j = i), (c = y - JY[i]);\n      const cross = c >= 0 && c \u003c 12;\n      const av = x >= 20 && x \u003c 44;\n      if (av || cross) {\n        kind[p] = 1;\n        const v = 0.12 * (0.85 + 0.3 * g);\n        set(p, v, v, v * 0.95);\n        // The first side street runs past a school and is paved red.\n        if (j === 0 && cross && (x \u003c 14 || x > 49)) set(p, v * 2.6, v * 0.3, v * 0.3);\n        if (av && !cross) {\n          if ((c >= -6 && c \u003c -2) || (c >= 14 && c \u003c 18)) !(x & 1) && paint(p, 0.42);\n          else if ((c === -8 && x \u003c 31) || (c === 19 && x > 32)) paint(p, 0.42);\n          else if (x === 31 || x === 32) paint(p, 0.4, 1);\n          else if ((x === 25 || x === 38) && y % 9 \u003c 4) paint(p, 0.36);\n        } else if (!av) {\n          if ((x >= 14 && x \u003c 18) || (x >= 46 && x \u003c 50)) !(y & 1) && paint(p, 0.42);\n          else if ((x === 12 && c > 6) || (x === 51 && c \u003c 5)) paint(p, 0.42);\n          else if (c === 5 || c === 6) paint(p, 0.4, 1);\n        }\n      } else if ((x >= 16 && x \u003c 20) || (x >= 44 && x \u003c 48) || (c >= -4 && c \u003c 0) || (c >= 12 && c \u003c 16)) {\n        kind[p] = 2;\n        const v = (x % 3 && y % 3 ? 0.15 : 0.12) + g * 0.02;\n        set(p, v, v, v * 0.92);\n      } else {\n        set(p, 0.05, 0.05, 0.05);\n      }\n    }\n}\n\n// Each lamp's light on the street, falling as (1 - r^2)^1.5 so the core burns\n// amber and the rim fades over four LEDs; its wet glare; its haze in rain.\nfunction pools(S) {\n  S.pools = LAMPS.map(([hx, hy, R], i) => {\n    const o = { idx: [], w: [], g: [], hi: [], hw: [] };\n    // An oval pool along its road, a little out of round.\n    const sx = hx \u003c 16 || hx > 47 ? 1.2 : 0.85;\n    const r2 = R * 1.9;\n    box(hx - r2, hy - r2, hx + r2, hy + r2, (x, y, p) => {\n      const [dx, dy] = [(x - hx) / sx, (y - hy) * sx];\n      const r = Math.hypot(dx, dy) * (1 + 0.06 * Math.sin(3 * Math.atan2(dy, dx) + i * 2));\n      const u = 1 - (r / R) ** 2;\n      if (u > 0 && S.kind[p]) o.idx.push(p), o.w.push(u ** 1.5), o.g.push(Math.exp((-r * r) / 3));\n      if (r \u003c r2) o.hi.push(p), o.hw.push(r \u003c R ? 0.3 + 0.7 * (r / R) ** 2 : ((r2 - r) / (r2 - R)) ** 2);\n    });\n    return o;\n  });\n}\n\nfunction newCar(R, e) {\n  return { R, e, s: 0, v: 14, k: 0, wait: 0, brake: 0, vmax: 24 * (0.85 + Math.random() * 0.3), L: [5, 6, 6, 6, 7][Math.floor(Math.random() * 5)], col: PAINT[pick(PAINT_P)], led: +(Math.random() \u003c 0.5), ph: Math.random() };\n}\n\n// A car's nose and heading (fx, fy, hx, hy), and its middle (cx, cy, bx, by).\nfunction pose(c) {\n  const { X, Y } = c.R;\n  for (let k = 0; k \u003c 2; k++) {\n    const s = k ? c.s - c.L / 2 : c.s;\n    const f = Math.min(Math.max(s / STEP, 0), X.length - 1.001);\n    const i = Math.floor(f);\n    const dx = X[i + 1] - X[i];\n    const dy = Y[i + 1] - Y[i];\n    const l = Math.hypot(dx, dy) || 1;\n    const u = f - i + (s \u003c 0 ? s / l : 0);\n    if (k) (c.cx = X[i] + dx * u), (c.cy = Y[i] + dy * u), (c.bx = dx / l), (c.by = dy / l);\n    else (c.fx = X[i] + dx * u), (c.fy = Y[i] + dy * u), (c.hx = dx / l), (c.hy = dy / l);\n  }\n}\n\n// A signal for a movement: 0 red, 1 amber, 2 green, 3 and 4 flashing amber and red.\nfunction signal(S, j, m) {\n  if (S.flash) return m & (all(2) | all(3)) ? 4 : 3;\n  const p = PH[S.ph[j]];\n  return p[1] & m ? 2 : p[2] & m ? 1 : 0;\n}\n\n// Zebra w of junction j: 0 and 1 cross the avenue, 2 and 3 the side street.\n// Returns the two ends and the way out, away from the junction.\nfunction zebra(j, w) {\n  const y0 = JY[j];\n  if (w \u003c 2) return [18, y0 + (w ? 16 : -4), 46, y0 + (w ? 16 : -4), 0, w ? 1 : -1];\n  const x = w === 2 ? 16 : 48;\n  return [x, y0 - 2, x, y0 + 14, w === 2 ? -1 : 1, 0];\n}\n\n// People walk to a corner, wait, cross on the walk phase, hurrying when it\n// blinks, and walk off along the far pavement.\nfunction stepPeople(S, dt, rate) {\n  for (let i = 0; i \u003c 16; i++)\n    if (S.people.length \u003c 60 && Math.random() \u003c rate * dt) {\n      const j = i >> 3;\n      const w = (i >> 1) & 3;\n      const e = i & 1;\n      const z = zebra(j, w);\n      const o = (Math.random() - 0.5) * 3;\n      const tx = z[e * 2] + (z[4] ? o : 0);\n      const ty = z[e * 2 + 1] + (z[5] ? o : 0);\n      const d = 8 + Math.random() * 10;\n      S.people.push({\n        j, w, e, o, tx, ty, st: 0, life: 1, x: tx + z[4] * d, y: ty + z[5] * d,\n        v: 3.5 + Math.random() * 2, delay: Math.random() * 1.2,\n        umb: Math.floor(Math.random() * 6),\n      });\n    }\n  for (const p of S.people) {\n    const walk = PH[S.ph[p.j]][3];\n    const z = zebra(p.j, p.w);\n    if (p.st === 1) {\n      if (walk !== 1 || (p.delay -= dt) > 0) continue;\n      p.st = 2;\n      p.tx = z[2 - p.e * 2] + (z[4] ? p.o : 0);\n      p.ty = z[3 - p.e * 2] + (z[5] ? p.o : 0);\n    }\n    const dx = p.tx - p.x;\n    const dy = p.ty - p.y;\n    const d = Math.hypot(dx, dy);\n    const v = p.v * (p.st === 2 && walk === 2 ? 1.5 : 1) * dt;\n    if (d > v) (p.x += (dx / d) * v), (p.y += (dy / d) * v);\n    else if (p.st === 2) (p.st = 3), (p.tx = p.x + z[4] * 14), (p.ty = p.y + z[5] * 14);\n    else if (p.st === 0) p.st = 1;\n    else p.life = 0;\n    if (p.st === 3) p.life = Math.min(p.life, d / 6);\n  }\n  S.people = S.people.filter((p) => p.life > 0);\n}\n\nfunction stepCars(S, dt, rate) {\n  const cars = S.cars;\n  for (let e = 0; e \u003c 8; e++) {\n    S.due[e] = Math.min(2, S.due[e] + dt * rate * (e \u003c 4 ? 0.16 : 0.07));\n    if (S.due[e] \u003c 1) continue;\n    const list = S.E[e];\n    const R = list[pick(list.map((r) => r[0]))][1];\n    if (cars.some((c) => c.e === e && c.s \u003c c.L + 3)) continue;\n    const c = newCar(R, e);\n    pose(c);\n    cars.push(c);\n    S.due[e]--;\n  }\n  for (const c of cars) pose(c);\n  for (const c of cars) {\n    // The nearest thing ahead in the lane: a car, or someone on a zebra.\n    let gap = 60;\n    let lv = 0;\n    const { fx, fy, hx, hy } = c;\n    const see = (ox, oy, half, ov) => {\n      const rx = ox - fx;\n      const ry = oy - fy;\n      const d = rx * hx + ry * hy - half;\n      if (d > -2 * half && d \u003c gap && Math.abs(rx * hy - ry * hx) \u003c 2.6) (gap = d), (lv = ov);\n    };\n    for (const o of cars) if (o !== c) see(o.cx, o.cy, o.L / 2, o.v * (o.hx * hx + o.hy * hy));\n    for (const p of S.people) if (p.st === 2) see(p.x, p.y, 0.5, 0);\n    const st = c.R.stops[c.k];\n    if (st) {\n      const g = st[0] - c.s;\n      if (g \u003c -0.3) {\n        c.k++;\n        c.wait = 0;\n      } else {\n        const sg = signal(S, st[1], st[2]);\n        // Stop for red, for amber with room to, a moment at a flashing red, and\n        // on green when there is no room on the far side.\n        const stop = !sg || (sg === 1 && g > (c.v * c.v) / 70 + 0.5) || (sg === 4 && c.wait \u003c 1.2) || ((sg === 2 || sg === 3) && gap \u003c g + 24 && lv \u003c 3);\n        if (stop && g \u003c gap) (gap = g), (lv = 0);\n        if (sg === 4 && g \u003c 1.5 && c.v \u003c 0.5) c.wait += dt;\n      }\n    }\n    // The intelligent driver model in pixels and seconds.\n    const v0 = Math.min(c.vmax * (S.flash ? 1.2 : 1), c.R.C[Math.min(c.R.C.length - 1, Math.max(0, Math.round(c.s / STEP)))]);\n    const ss = 1.2 + Math.max(0, c.v * 0.5 + (c.v * (c.v - lv)) / 70);\n    const acc = Math.max(-160, 30 * (1 - (c.v / v0) ** 4 - (ss / Math.max(gap, 0.05)) ** 2));\n    c.v = Math.max(0, c.v + acc * dt);\n    c.s += Math.min(c.v * dt, Math.max(0, gap - 0.4));\n    c.brake = acc \u003c -6 || c.v \u003c 1;\n  }\n  S.cars = cars.filter((c) => c.s \u003c c.R.len);\n}\n\nfunction step(S, dt, k) {\n  S.clk += dt;\n  S.flash = k[2] > 0.8;\n  for (let j = 0; j \u003c 2; j++) {\n    let c = (S.clk + j * 5) % CYCLE;\n    let i = 0;\n    while (c >= PH[i][0]) c -= PH[i++][0];\n    S.ph[j] = i;\n  }\n  stepCars(S, dt, (1 - 0.94 * k[2]) ** 1.5);\n  stepPeople(S, dt, 0.06 * (1 - k[2]) ** 2);\n}\n\nexport function setup(params) {\n  Object.assign(params, {\n    AR: new Float32Array(N), AG: new Float32Array(N), AB: new Float32Array(N), kind: new Uint8Array(N),\n    L: new Float32Array(N * 3), buf: new Float32Array(N * 3), amb: new Float32Array(N * 3).map((_, i) => AMBIENT[i % 3]),\n    E: routes(), cars: [], people: [], due: new Float32Array(8), ph: [0, 0], clk: 0, t: 0, k: null,\n    // Which lamp the city replaces first.\n    order: LAMPS.map((_, i) => i).sort(() => Math.random() - 0.5),\n  });\n  ground(params);\n  pools(params);\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const kv = input.knobValues || [];\n  const k = [kv[0] ?? 0, kv[1] ?? 2, kv[2] ?? 0, kv[3] ?? 0.06];\n  const m = k[1] / 2;\n  // Twenty seconds to fill the street, then ten at the knobs' pace, so the\n  // knobs have placed the queues and the signals by the first frame.\n  if (!S.k) for (let i = 0; i \u003c 350; i++) step(S, i \u003c 200 ? 0.1 : m / 15, k);\n  S.k = k;\n  S.t += dt;\n  step(S, dt * m, k);\n}\n\n// Add colour c times v to the buffer A at LED p.\nconst add = (A, p, c, v) => ((A[(p *= 3)] += c[0] * v), (A[p + 1] += c[1] * v), (A[p + 2] += c[2] * v));\n\n// Call f(x, y, p) for each LED of a box, clipped to the panel.\nfunction box(x0, y0, x1, y1, f) {\n  for (let y = Math.max(0, Math.floor(y0)); y \u003c= Math.min(H - 1, y1); y++) for (let x = Math.max(0, Math.floor(x0)); x \u003c= Math.min(W - 1, x1); x++) f(x, y, y * W + x);\n}\n\n// Light c from (x0, y0) along (hx, hy) out to len: strength I falling as\n// (1 - t) ** q, or 1 - t ** -q for negative q, from w0 to w1 wide. With len 0,\n// a disc of radius w0 + 1.\nfunction beam(L, x0, y0, hx, hy, len, w0, w1, I, q, c) {\n  const r = Math.max(w0, w1) + 1;\n  box(Math.min(x0, x0 + hx * len) - r, Math.min(y0, y0 + hy * len) - r, Math.max(x0, x0 + hx * len) + r, Math.max(y0, y0 + hy * len) + r, (x, y, p) => {\n    const rx = x + 0.5 - x0;\n    const ry = y + 0.5 - y0;\n    const t = len && (rx * hx + ry * hy) / len;\n    const e = w0 + (w1 - w0) * t + 1 - Math.abs(rx * hy - ry * hx);\n    const v = !len ? I * (1 - Math.hypot(rx, ry) / r) : t > 0 && t \u003c 1 && e > 0 ? I * (q >= 0 ? (1 - t) ** q : 1 - t ** -q) * Math.min(1, e) : 0;\n    if (v > 0) add(L, p, c, v);\n  });\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.k) return;\n  const { L, buf, AR, AG, AB, kind } = S;\n  const [k0, , hour, rain] = S.k;\n  const wet = cl((rain - 0.08) / 0.5);\n  L.set(S.amb);\n  // After 1 am every other lamp goes out and the rest dim.\n  const dim = cl((hour - 0.4) / 0.2);\n  const lamps = LAMPS.map((_, i) => {\n    const led = (S.order.indexOf(i) + 0.5) / LAMPS.length \u003c k0;\n    let c = led ? LED : SODIUM;\n    let lv = 1 - (i & 1 ? 0.9 : 0.25) * dim;\n    if (i === DYING && !led) {\n      const t = (S.clk + 8.9) % 16;\n      const u = cl((t - 12.3) / 3.7);\n      lv *= t \u003c 9 ? 1 : t \u003c 9.4 ? (9.4 - t) / 0.4 : t \u003c 12 ? 0 : t \u003c 12.3 ? 0.2 : 0.2 + 0.8 * u;\n      if (t > 12) c = [1, 0.12 + 0.38 * u, 0.15 * (1 - u)];\n    }\n    const { idx, w, g } = S.pools[i];\n    for (let n = 0; n \u003c idx.length; n++) add(L, idx[n], c, I_LAMP * lv * (w[n] + wet * 2 * g[n]));\n    return [c, lv];\n  });\n  const blink = S.t % 1 > 0.5;\n  const lit = [];\n  for (let j = 0; j \u003c 2; j++) {\n    const y0 = JY[j];\n    for (let a = 0; a \u003c 4; a++) {\n      const [x, y, sx, sy, fx, fy] = HEADS[a];\n      const s0 = signal(S, j, mv(a, 0));\n      const on = [!s0 || (s0 === 4 && blink), s0 === 1 || (s0 === 3 && blink), signal(S, j, mv(a, 1)) === 2, s0 === 2];\n      // A lit lamp hazes the road under it, and on wet asphalt streaks toward\n      // the drivers.\n      for (let i = 0; i \u003c 4; i++)\n        if (on[i]) {\n          const c = SIG[Math.min(i, 2)];\n          const lx = x + sx * i + 0.5;\n          const ly = y0 + y + sy * i + 0.5;\n          lit.push([lx, ly, c, 0, 0, 1]);\n          beam(L, lx, ly, 0, 0, 0, 1.2, 0, 6, 0, c);\n          if (wet) beam(L, lx, ly, fx, fy, 2.2 + wet * 6, 0, 0, 4 * wet, 1, c);\n        }\n    }\n    const walk = PH[S.ph[j]][3];\n    const g = walk === 1 || (walk === 2 && S.t % 0.6 \u003c 0.3);\n    if (!S.flash && (g || walk !== 2))\n      for (const [x, y, dx, dy] of KERB) {\n        const c = g ? GREEN : RED;\n        lit.push([x, y0 + y, c, dx, dy, 4]);\n        beam(L, x + 0.5 - dx, y0 + y + 0.5 - dy, dx, dy, 5, 0.8, 0.8, 3.4, 0, c);\n      }\n  }\n  for (const c of S.cars) {\n    beam(L, c.fx, c.fy, c.hx, c.hy, 8, 1.3, 4.5, I_HEAD * (1 - wet * 0.4), 2, BEAMS[c.led]);\n    beam(L, c.cx - c.bx * c.L * 0.5, c.cy - c.by * c.L * 0.5, -c.bx, -c.by, 5.5 + wet * 5, 1.2, 1.2, I_TAIL * (c.brake ? 1 : 0.35), -3, RED);\n  }\n  // Each channel rolls off on its own, as film does, so paint too bright for\n  // the orange light burns through to yellow.\n  const roll = (v) => (v \u003c 200 ? v : 255 - 55 * Math.exp((200 - v) / 55));\n  const shade = (q, r, g, b) => ((buf[q] = roll(r)), (buf[q + 1] = roll(g)), (buf[q + 2] = roll(b)));\n  const aw = 255 * (1 - wet * 0.7);\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const a = kind[p] ? aw : 255;\n    shade(q, AR[p] * L[q] * a, AG[p] * L[q + 1] * a, AB[p] * L[q + 2] * a);\n  }\n  // Cars: the body in the light where it stands, dark glass fore and aft.\n  for (const c of S.cars) {\n    const h = c.L / 2;\n    box(c.cx - h - 1, c.cy - h - 1, c.cx + h + 1, c.cy + h + 1, (x, y, p) => {\n      const rx = x + 0.5 - c.cx;\n      const ry = y + 0.5 - c.cy;\n      const u = rx * c.bx + ry * c.by;\n      if (Math.abs(u) >= h || Math.abs(ry * c.bx - rx * c.by) >= 1.5) return;\n      const f = (h - u) / c.L;\n      const glass = (f > 0.22 && f \u003c 0.4) || (f > 0.74 && f \u003c 0.88);\n      const [r, g, b] = glass ? GLASS : c.col;\n      const sh = glass ? 255 : 166;\n      shade(p * 3, r * L[p * 3] * sh, g * L[p * 3 + 1] * sh, b * L[p * 3 + 2] * sh);\n    });\n  }\n  const put = (x, y, r, g, b, more) => {\n    x = Math.floor(x);\n    y = Math.floor(y);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const q = (y * W + x) * 3;\n    buf[q] = r + (more ? buf[q] : 0);\n    buf[q + 1] = g + (more ? buf[q + 1] : 0);\n    buf[q + 2] = b + (more ? buf[q + 2] : 0);\n  };\n  // People: a dark speck and its shadow in the light, a coat the shop\n  // windows catch out of it, a phone in some hands, umbrellas in the rain.\n  for (const p of S.people) {\n    const x = Math.floor(p.x);\n    const y = Math.floor(p.y);\n    if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= H - 1) continue;\n    const q = (y * W + x) * 3;\n    const f = p.life;\n    if (rain > 0.25) {\n      const u = UMBRELLA[p.umb];\n      for (const [dx, dy] of PLUS) put(x + dx, y + dy, Math.max(24, u[0] * L[q] * 200) * f, u[1] * L[q + 1] * 200 * f, u[2] * L[q + 2] * 200 * f);\n      continue;\n    }\n    if (Math.max(buf[q], buf[q + 1]) > 70)\n      for (let c = 0; c \u003c 3; c++) {\n        buf[q + c] *= 1 - 0.88 * f;\n        buf[q + (W + 1) * 3 + c] *= 1 - 0.65 * f;\n      }\n    else put(x, y, 52 * f, 46 * f, 40 * f);\n    if (p.o > 0.6) put(x + 1, y, 80 * f, 100 * f, 150 * f);\n  }\n  // Car lights: headlamps, tail lamps and the brake light between them, and\n  // the indicator on the side a car turns to.\n  for (const c of S.cars) {\n    const h = c.L / 2 - 0.5;\n    const t = c.R.turn;\n    const ind = t && c.s > t[0] - 30 && c.s \u003c t[1] + 2 && (S.clk * 1.5 + c.ph) % 1 \u003c 0.5 ? t[2] : 0;\n    for (let sd = -1; sd \u003c 2; sd += 2) {\n      const ax = c.cx - c.by * sd;\n      const ay = c.cy + c.bx * sd;\n      put(ax + c.bx * h, ay + c.by * h, ...(ind === sd ? AMBER : c.led ? [235, 242, 255] : [255, 225, 170]));\n      put(ax - c.bx * h, ay - c.by * h, ...(ind === sd ? AMBER : c.brake ? [255, 18, 8] : [200, 8, 5]));\n    }\n    if (c.brake) put(c.cx - c.bx * h, c.cy - c.by * h, 200, 10, 5);\n  }\n  // Signal and walk lights, lamp heads, church crosses.\n  for (const [x, y, c, dx, dy, n] of lit) for (let i = 0; i \u003c n; i++) put(x + dx * i, y + dy * i, c[0] * 255, c[1] * 255, c[2] * 255);\n  LAMPS.forEach(([x, y], i) => put(x, y, ...lamps[i][0].map((v) => v * 255 * lamps[i][1])));\n  for (const [x, y] of CROSSES) for (let i = 0; i \u003c 7; i++) put(x, y + i, 255, 20, 30), i \u003c 5 && put(x - 2 + i, y + 2, 255, 20, 30);\n  // Rain round each lamp: a haze in its colour, and drops flashing through it.\n  if (wet)\n    lamps.forEach(([c, lv], i) => {\n      const { hi, hw } = S.pools[i];\n      for (let n = 0; n \u003c hi.length; n++) add(buf, hi[n], c, 120 * wet * lv * hw[n] * (Math.random() \u003c 0.04 * wet ? 3 : 1));\n    });\n  // Below 3 of 255 an LED is off.\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3)\n    if (buf[q] > 3 || buf[q + 1] > 3 || buf[q + 2] > 3) display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[q]) | 0, Math.min(255, buf[q + 1]) | 0, Math.min(255, buf[q + 2]) | 0);\n}\n","layer":{"id":"layer-crossroads","type":"code","name":"crossroads","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Crossroads\n// Family:  city\n// Idea:    A night avenue seen straight down from a drone and crossed by two side streets, where the cars show by their lights, the signals hold and release the queues, and people cross all four zebras at once while every car waits.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17; the intelligent driver model of Treiber, Hennecke and Helbing (2000) and the all-way pedestrian phase of Seoul junctions\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Lamps=0..1, Pace=0.2..3, Hour=0..1, Rain=0..1\n//\n// Knob 1: Lamps. At 0 every street lamp is low-pressure sodium and pools the road in orange; turned up, the city swaps them one at a time for white LED heads.\n// Knob 2: Pace. The clock of the whole street: at 2 a car crosses the panel in about five seconds and the signals cycle every thirty, at 0.2 it all creeps.\n// Knob 3: Hour. At 0 the evening rush, with queues at every red; turned up, traffic and people thin out, after 1 am every other lamp goes out, and past 3 am the signals flash amber on the avenue and red on the side streets.\n// Knob 4: Rain. Darkens the asphalt to a mirror: each lamp glares under itself inside a haze of lit drops, signals and tail lights streak across the road, and people open umbrellas.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// First row of each side street, 12 rows across.\nconst JY = [30, 90];\n// Lane centres. Traffic keeps right: down the panel on the west half of the\n// avenue, up it on the east half; west on the north half of a side street.\nconst [SBO, SBI, NBI, NBO] = [22.5, 27.5, 36.5, 41.5];\nconst STEP = 0.25;\nconst cl = (v) => Math.min(1, Math.max(0, v));\n\n// A movement: an approach (from N, S, W, E) and a turn (straight, left, right).\nconst mv = (a, t) => 1 \u003c\u003c (a * 3 + t);\nconst all = (a) => 7 \u003c\u003c (a * 3);\nconst SR = (a) => mv(a, 0) | mv(a, 2);\n// The cycle in seconds at Pace 2: [length, green, amber, walk]. Each avenue\n// direction leads with its left arrow, the side streets take turns, then\n// every car waits while people cross all four zebras at once.\nconst PH = [\n  [4, all(0), 0, 0], [1, SR(0), mv(0, 1), 0], [5, SR(0) | SR(1), 0, 0], [1.2, SR(1), SR(0), 0], [4, all(1), 0, 0], [1.2, 0, all(1), 0],\n  [3, all(2), 0, 0], [1.2, 0, all(2), 0], [3, all(3), 0, 0], [1.2, 0, all(3), 0], [5, 0, 0, 1], [1.5, 0, 0, 2], [0.8, 0, 0, 0],\n];\nconst CYCLE = PH.reduce((a, p) => a + p[0], 0);\n\n// Low-pressure sodium burns in one orange line at 589 nm; LED heads are cool white.\nconst SODIUM = [1, 0.34, 0];\nconst LED = [0.4, 0.43, 0.47];\n// Lamps [x, y, reach]: both ends of the school street, two mid-block, and\n// opposite corners of each junction so the zebras stand in light.\nconst LAMPS = [\n  [6, 36, 8], [42, 70, 8], [21, 58, 8], [57, 36, 8],\n  ...JY.flatMap((y) => [[21, y - 1, 9], [42, y + 12, 9]]),\n];\n// The lamp at row 70 is dying: it goes out, strikes again in the red of its\n// neon starter gas and warms back up.\nconst DYING = 1;\n// Red neon crosses on church roofs, as on every Seoul skyline.\nconst CROSSES = [[7, 9], [56, 63], [9, 115]];\n// Lamp, headlight and tail light at their brightest, over albedo.\nconst [I_LAMP, I_HEAD, I_TAIL] = [20, 1, 9];\nconst AMBIENT = [0.13, 0.14, 0.18];\nconst RED = [1, 0.04, 0.03];\nconst GREEN = [0.05, 1, 0.5];\nconst SIG = [RED, [1, 0.5, 0], GREEN];\nconst GLASS = [0.03, 0.034, 0.04];\nconst AMBER = [255, 150, 0];\nconst BEAMS = [[1, 0.85, 0.6], [0.9, 0.95, 1]];\n// Car paint and its odds: white and silver half the time, as on Korean roads.\nconst PAINT = [[0.72, 0.72, 0.72], [0.48, 0.5, 0.53], [0.05, 0.05, 0.06], [0.2, 0.2, 0.22], [0.07, 0.09, 0.24], [0.55, 0.05, 0.04], [0.8, 0.4, 0.06]];\nconst PAINT_P = [0.3, 0.2, 0.17, 0.1, 0.07, 0.06, 0.1];\n// Umbrellas: clear convenience-store plastic most, then black, red, yellow, navy.\nconst UMBRELLA = [[0.7, 0.72, 0.75], [0.7, 0.72, 0.75], [0.05, 0.05, 0.08], [0.6, 0.05, 0.08], [0.75, 0.6, 0.05], [0.06, 0.12, 0.4]];\nconst PLUS = [[0, 0], [1, 0], [-1, 0], [0, 1], [0, -1]];\n// Walk lights laid in the kerb at both ends of each zebra, as in Seoul: first\n// LED and the way the strip runs.\nconst KERB = [[19, -6, 0, 1], [44, -6, 0, 1], [19, 14, 0, 1], [44, 14, 0, 1], [14, -1, 1, 0], [14, 12, 1, 0], [46, -1, 1, 0], [46, 12, 1, 0]];\n// Signal heads by approach, from the junction's first row: first LED of the\n// bar (red, amber, left arrow, green), the step along it, the way it faces.\nconst HEADS = [[23, 12, 1, 0, 0, -1], [40, -1, -1, 0, 0, 1], [44, 7, 0, 1, -1, 0], [19, 4, 0, -1, 1, 0]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction pick(list) {\n  let r = Math.random();\n  for (let i = 0; i \u003c list.length; i++) if ((r -= list[i]) \u003c 0) return i;\n  return list.length - 1;\n}\n\n// A route: a path sampled every STEP pixels, the speed allowed at each sample,\n// stop lines [s, junction, movement] and a turn [s0, s1, side]. Ops: [\"t\", c]\n// on until x or y is c, [\"s\", j, m] a stop line, [\"r\", side, radius] a turn.\nfunction route(x, y, hx, hy, ops) {\n  const X = [x];\n  const Y = [y];\n  const C = [99];\n  const stops = [];\n  let turn = null;\n  for (const op of ops) {\n    const s = (X.length - 1) * STEP;\n    if (op[0] === \"s\") stops.push([s, op[1], op[2]]);\n    else if (op[0] === \"t\") {\n      const n = Math.round((hx ? (op[1] - x) * hx : (op[1] - y) * hy) / STEP);\n      for (let i = 1; i \u003c= n; i++) X.push(x + hx * i * STEP), Y.push(y + hy * i * STEP), C.push(99);\n      x += hx * n * STEP;\n      y += hy * n * STEP;\n    } else {\n      const [, side, r] = op;\n      const nx = side > 0 ? -hy : hy;\n      const ny = side > 0 ? hx : -hx;\n      const cx = x + r * nx;\n      const cy = y + r * ny;\n      const n = Math.round((Math.PI / 2) * r / STEP);\n      turn = [s, s + n * STEP, side];\n      for (let i = 1; i \u003c= n; i++) {\n        const a = (i / n) * (Math.PI / 2);\n        X.push(cx - r * nx * Math.cos(a) + r * hx * Math.sin(a));\n        Y.push(cy - r * ny * Math.cos(a) + r * hy * Math.sin(a));\n        C.push(Math.sqrt(40 * r));\n      }\n      x = cx + r * hx;\n      y = cy + r * hy;\n      hx = nx;\n      hy = ny;\n    }\n  }\n  // Slow for a turn ahead at 25 px/s per second.\n  for (let i = C.length - 2; i >= 0; i--) C[i] = Math.min(C[i], Math.sqrt(C[i + 1] * C[i + 1] + 50 * STEP));\n  return { X, Y, C, stops, turn, len: (X.length - 1) * STEP };\n}\n\n// Eight entries, each a list of [odds, route].\nfunction routes() {\n  const [a, b] = JY;\n  const st = (j, ap, t) => [\"s\", j, mv(ap, t)];\n  // Along the avenue in lane x, through both junctions or turning t at one.\n  const avenue = (x, up, t) => {\n    const ap = up ? 1 : 0;\n    const order = up ? [1, 0] : [0, 1];\n    const ops = (at) => {\n      const o = [];\n      for (const j of order) {\n        const y = JY[j];\n        o.push([\"t\", up ? y + 20 : y - 8], st(j, ap, j === at ? t : 0));\n        if (j === at)\n          return o.concat(t === 2 ? [[\"t\", up ? y + 13 : y - 1], [\"r\", 1, 3.5], [\"t\", up ? 78 : -14]] : [[\"t\", up ? y + 9.5 : y + 2.5], [\"r\", -1, 7], [\"t\", up ? -14 : 78]]);\n      }\n      return o.concat([[\"t\", up ? -14 : 142]]);\n    };\n    return [[0.7, -1], [0.15, order[0]], [0.15, order[1]]].map(([p, at]) => [p, route(x, up ? 142 : -14, 0, up ? -1 : 1, ops(at))]);\n  };\n  const E = [avenue(SBO, 0, 2), avenue(SBI, 0, 1), avenue(NBI, 1, 1), avenue(NBO, 1, 2)];\n  JY.forEach((y, j) => {\n    // Turned onto the avenue, on through the other junction if it is ahead.\n    const down = j ? [[\"t\", 142]] : [[\"t\", b - 8], st(1, 0, 0), [\"t\", 142]];\n    const up = j ? [[\"t\", a + 20], st(0, 1, 0), [\"t\", -14]] : [[\"t\", -14]];\n    const side = (x, ly, h, sx, ap, ra, rt, la, lt) => [\n      [0.45, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 0), [\"t\", 64 - x]])],\n      [0.3, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 2), [\"t\", ra], [\"r\", 1, 3.5], ...rt])],\n      [0.25, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 1), [\"t\", la], [\"r\", -1, 7], ...lt])],\n    ];\n    E.push(side(-14, y + 9.5, 1, 12, 2, 19, down, 29.5, up), side(78, y + 2.5, -1, 52, 3, 45, up, 34.5, down));\n  });\n  return E;\n}\n\n// The ground as albedo per channel, and what each LED is: 0 roof, 1 road, 2 pavement.\nfunction ground(S) {\n  const { AR, AG, AB, kind } = S;\n  const set = (p, r, g, b) => ((AR[p] = r), (AG[p] = g), (AB[p] = b));\n  const paint = (p, v, yellow) => set(p, v, yellow ? v * 0.8 : v, yellow ? v * 0.2 : v);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const g = hash(x, y);\n      let j = -1;\n      let c = -1;\n      for (let i = 0; i \u003c 2; i++) if (y >= JY[i] - 20 && y \u003c JY[i] + 32) (j = i), (c = y - JY[i]);\n      const cross = c >= 0 && c \u003c 12;\n      const av = x >= 20 && x \u003c 44;\n      if (av || cross) {\n        kind[p] = 1;\n        const v = 0.12 * (0.85 + 0.3 * g);\n        set(p, v, v, v * 0.95);\n        // The first side street runs past a school and is paved red.\n        if (j === 0 && cross && (x \u003c 14 || x > 49)) set(p, v * 2.6, v * 0.3, v * 0.3);\n        if (av && !cross) {\n          if ((c >= -6 && c \u003c -2) || (c >= 14 && c \u003c 18)) !(x & 1) && paint(p, 0.42);\n          else if ((c === -8 && x \u003c 31) || (c === 19 && x > 32)) paint(p, 0.42);\n          else if (x === 31 || x === 32) paint(p, 0.4, 1);\n          else if ((x === 25 || x === 38) && y % 9 \u003c 4) paint(p, 0.36);\n        } else if (!av) {\n          if ((x >= 14 && x \u003c 18) || (x >= 46 && x \u003c 50)) !(y & 1) && paint(p, 0.42);\n          else if ((x === 12 && c > 6) || (x === 51 && c \u003c 5)) paint(p, 0.42);\n          else if (c === 5 || c === 6) paint(p, 0.4, 1);\n        }\n      } else if ((x >= 16 && x \u003c 20) || (x >= 44 && x \u003c 48) || (c >= -4 && c \u003c 0) || (c >= 12 && c \u003c 16)) {\n        kind[p] = 2;\n        const v = (x % 3 && y % 3 ? 0.15 : 0.12) + g * 0.02;\n        set(p, v, v, v * 0.92);\n      } else {\n        set(p, 0.05, 0.05, 0.05);\n      }\n    }\n}\n\n// Each lamp's light on the street, falling as (1 - r^2)^1.5 so the core burns\n// amber and the rim fades over four LEDs; its wet glare; its haze in rain.\nfunction pools(S) {\n  S.pools = LAMPS.map(([hx, hy, R], i) => {\n    const o = { idx: [], w: [], g: [], hi: [], hw: [] };\n    // An oval pool along its road, a little out of round.\n    const sx = hx \u003c 16 || hx > 47 ? 1.2 : 0.85;\n    const r2 = R * 1.9;\n    box(hx - r2, hy - r2, hx + r2, hy + r2, (x, y, p) => {\n      const [dx, dy] = [(x - hx) / sx, (y - hy) * sx];\n      const r = Math.hypot(dx, dy) * (1 + 0.06 * Math.sin(3 * Math.atan2(dy, dx) + i * 2));\n      const u = 1 - (r / R) ** 2;\n      if (u > 0 && S.kind[p]) o.idx.push(p), o.w.push(u ** 1.5), o.g.push(Math.exp((-r * r) / 3));\n      if (r \u003c r2) o.hi.push(p), o.hw.push(r \u003c R ? 0.3 + 0.7 * (r / R) ** 2 : ((r2 - r) / (r2 - R)) ** 2);\n    });\n    return o;\n  });\n}\n\nfunction newCar(R, e) {\n  return { R, e, s: 0, v: 14, k: 0, wait: 0, brake: 0, vmax: 24 * (0.85 + Math.random() * 0.3), L: [5, 6, 6, 6, 7][Math.floor(Math.random() * 5)], col: PAINT[pick(PAINT_P)], led: +(Math.random() \u003c 0.5), ph: Math.random() };\n}\n\n// A car's nose and heading (fx, fy, hx, hy), and its middle (cx, cy, bx, by).\nfunction pose(c) {\n  const { X, Y } = c.R;\n  for (let k = 0; k \u003c 2; k++) {\n    const s = k ? c.s - c.L / 2 : c.s;\n    const f = Math.min(Math.max(s / STEP, 0), X.length - 1.001);\n    const i = Math.floor(f);\n    const dx = X[i + 1] - X[i];\n    const dy = Y[i + 1] - Y[i];\n    const l = Math.hypot(dx, dy) || 1;\n    const u = f - i + (s \u003c 0 ? s / l : 0);\n    if (k) (c.cx = X[i] + dx * u), (c.cy = Y[i] + dy * u), (c.bx = dx / l), (c.by = dy / l);\n    else (c.fx = X[i] + dx * u), (c.fy = Y[i] + dy * u), (c.hx = dx / l), (c.hy = dy / l);\n  }\n}\n\n// A signal for a movement: 0 red, 1 amber, 2 green, 3 and 4 flashing amber and red.\nfunction signal(S, j, m) {\n  if (S.flash) return m & (all(2) | all(3)) ? 4 : 3;\n  const p = PH[S.ph[j]];\n  return p[1] & m ? 2 : p[2] & m ? 1 : 0;\n}\n\n// Zebra w of junction j: 0 and 1 cross the avenue, 2 and 3 the side street.\n// Returns the two ends and the way out, away from the junction.\nfunction zebra(j, w) {\n  const y0 = JY[j];\n  if (w \u003c 2) return [18, y0 + (w ? 16 : -4), 46, y0 + (w ? 16 : -4), 0, w ? 1 : -1];\n  const x = w === 2 ? 16 : 48;\n  return [x, y0 - 2, x, y0 + 14, w === 2 ? -1 : 1, 0];\n}\n\n// People walk to a corner, wait, cross on the walk phase, hurrying when it\n// blinks, and walk off along the far pavement.\nfunction stepPeople(S, dt, rate) {\n  for (let i = 0; i \u003c 16; i++)\n    if (S.people.length \u003c 60 && Math.random() \u003c rate * dt) {\n      const j = i >> 3;\n      const w = (i >> 1) & 3;\n      const e = i & 1;\n      const z = zebra(j, w);\n      const o = (Math.random() - 0.5) * 3;\n      const tx = z[e * 2] + (z[4] ? o : 0);\n      const ty = z[e * 2 + 1] + (z[5] ? o : 0);\n      const d = 8 + Math.random() * 10;\n      S.people.push({\n        j, w, e, o, tx, ty, st: 0, life: 1, x: tx + z[4] * d, y: ty + z[5] * d,\n        v: 3.5 + Math.random() * 2, delay: Math.random() * 1.2,\n        umb: Math.floor(Math.random() * 6),\n      });\n    }\n  for (const p of S.people) {\n    const walk = PH[S.ph[p.j]][3];\n    const z = zebra(p.j, p.w);\n    if (p.st === 1) {\n      if (walk !== 1 || (p.delay -= dt) > 0) continue;\n      p.st = 2;\n      p.tx = z[2 - p.e * 2] + (z[4] ? p.o : 0);\n      p.ty = z[3 - p.e * 2] + (z[5] ? p.o : 0);\n    }\n    const dx = p.tx - p.x;\n    const dy = p.ty - p.y;\n    const d = Math.hypot(dx, dy);\n    const v = p.v * (p.st === 2 && walk === 2 ? 1.5 : 1) * dt;\n    if (d > v) (p.x += (dx / d) * v), (p.y += (dy / d) * v);\n    else if (p.st === 2) (p.st = 3), (p.tx = p.x + z[4] * 14), (p.ty = p.y + z[5] * 14);\n    else if (p.st === 0) p.st = 1;\n    else p.life = 0;\n    if (p.st === 3) p.life = Math.min(p.life, d / 6);\n  }\n  S.people = S.people.filter((p) => p.life > 0);\n}\n\nfunction stepCars(S, dt, rate) {\n  const cars = S.cars;\n  for (let e = 0; e \u003c 8; e++) {\n    S.due[e] = Math.min(2, S.due[e] + dt * rate * (e \u003c 4 ? 0.16 : 0.07));\n    if (S.due[e] \u003c 1) continue;\n    const list = S.E[e];\n    const R = list[pick(list.map((r) => r[0]))][1];\n    if (cars.some((c) => c.e === e && c.s \u003c c.L + 3)) continue;\n    const c = newCar(R, e);\n    pose(c);\n    cars.push(c);\n    S.due[e]--;\n  }\n  for (const c of cars) pose(c);\n  for (const c of cars) {\n    // The nearest thing ahead in the lane: a car, or someone on a zebra.\n    let gap = 60;\n    let lv = 0;\n    const { fx, fy, hx, hy } = c;\n    const see = (ox, oy, half, ov) => {\n      const rx = ox - fx;\n      const ry = oy - fy;\n      const d = rx * hx + ry * hy - half;\n      if (d > -2 * half && d \u003c gap && Math.abs(rx * hy - ry * hx) \u003c 2.6) (gap = d), (lv = ov);\n    };\n    for (const o of cars) if (o !== c) see(o.cx, o.cy, o.L / 2, o.v * (o.hx * hx + o.hy * hy));\n    for (const p of S.people) if (p.st === 2) see(p.x, p.y, 0.5, 0);\n    const st = c.R.stops[c.k];\n    if (st) {\n      const g = st[0] - c.s;\n      if (g \u003c -0.3) {\n        c.k++;\n        c.wait = 0;\n      } else {\n        const sg = signal(S, st[1], st[2]);\n        // Stop for red, for amber with room to, a moment at a flashing red, and\n        // on green when there is no room on the far side.\n        const stop = !sg || (sg === 1 && g > (c.v * c.v) / 70 + 0.5) || (sg === 4 && c.wait \u003c 1.2) || ((sg === 2 || sg === 3) && gap \u003c g + 24 && lv \u003c 3);\n        if (stop && g \u003c gap) (gap = g), (lv = 0);\n        if (sg === 4 && g \u003c 1.5 && c.v \u003c 0.5) c.wait += dt;\n      }\n    }\n    // The intelligent driver model in pixels and seconds.\n    const v0 = Math.min(c.vmax * (S.flash ? 1.2 : 1), c.R.C[Math.min(c.R.C.length - 1, Math.max(0, Math.round(c.s / STEP)))]);\n    const ss = 1.2 + Math.max(0, c.v * 0.5 + (c.v * (c.v - lv)) / 70);\n    const acc = Math.max(-160, 30 * (1 - (c.v / v0) ** 4 - (ss / Math.max(gap, 0.05)) ** 2));\n    c.v = Math.max(0, c.v + acc * dt);\n    c.s += Math.min(c.v * dt, Math.max(0, gap - 0.4));\n    c.brake = acc \u003c -6 || c.v \u003c 1;\n  }\n  S.cars = cars.filter((c) => c.s \u003c c.R.len);\n}\n\nfunction step(S, dt, k) {\n  S.clk += dt;\n  S.flash = k[2] > 0.8;\n  for (let j = 0; j \u003c 2; j++) {\n    let c = (S.clk + j * 5) % CYCLE;\n    let i = 0;\n    while (c >= PH[i][0]) c -= PH[i++][0];\n    S.ph[j] = i;\n  }\n  stepCars(S, dt, (1 - 0.94 * k[2]) ** 1.5);\n  stepPeople(S, dt, 0.06 * (1 - k[2]) ** 2);\n}\n\nexport function setup(params) {\n  Object.assign(params, {\n    AR: new Float32Array(N), AG: new Float32Array(N), AB: new Float32Array(N), kind: new Uint8Array(N),\n    L: new Float32Array(N * 3), buf: new Float32Array(N * 3), amb: new Float32Array(N * 3).map((_, i) => AMBIENT[i % 3]),\n    E: routes(), cars: [], people: [], due: new Float32Array(8), ph: [0, 0], clk: 0, t: 0, k: null,\n    // Which lamp the city replaces first.\n    order: LAMPS.map((_, i) => i).sort(() => Math.random() - 0.5),\n  });\n  ground(params);\n  pools(params);\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const kv = input.knobValues || [];\n  const k = [kv[0] ?? 0, kv[1] ?? 2, kv[2] ?? 0, kv[3] ?? 0.06];\n  const m = k[1] / 2;\n  // Twenty seconds to fill the street, then ten at the knobs' pace, so the\n  // knobs have placed the queues and the signals by the first frame.\n  if (!S.k) for (let i = 0; i \u003c 350; i++) step(S, i \u003c 200 ? 0.1 : m / 15, k);\n  S.k = k;\n  S.t += dt;\n  step(S, dt * m, k);\n}\n\n// Add colour c times v to the buffer A at LED p.\nconst add = (A, p, c, v) => ((A[(p *= 3)] += c[0] * v), (A[p + 1] += c[1] * v), (A[p + 2] += c[2] * v));\n\n// Call f(x, y, p) for each LED of a box, clipped to the panel.\nfunction box(x0, y0, x1, y1, f) {\n  for (let y = Math.max(0, Math.floor(y0)); y \u003c= Math.min(H - 1, y1); y++) for (let x = Math.max(0, Math.floor(x0)); x \u003c= Math.min(W - 1, x1); x++) f(x, y, y * W + x);\n}\n\n// Light c from (x0, y0) along (hx, hy) out to len: strength I falling as\n// (1 - t) ** q, or 1 - t ** -q for negative q, from w0 to w1 wide. With len 0,\n// a disc of radius w0 + 1.\nfunction beam(L, x0, y0, hx, hy, len, w0, w1, I, q, c) {\n  const r = Math.max(w0, w1) + 1;\n  box(Math.min(x0, x0 + hx * len) - r, Math.min(y0, y0 + hy * len) - r, Math.max(x0, x0 + hx * len) + r, Math.max(y0, y0 + hy * len) + r, (x, y, p) => {\n    const rx = x + 0.5 - x0;\n    const ry = y + 0.5 - y0;\n    const t = len && (rx * hx + ry * hy) / len;\n    const e = w0 + (w1 - w0) * t + 1 - Math.abs(rx * hy - ry * hx);\n    const v = !len ? I * (1 - Math.hypot(rx, ry) / r) : t > 0 && t \u003c 1 && e > 0 ? I * (q >= 0 ? (1 - t) ** q : 1 - t ** -q) * Math.min(1, e) : 0;\n    if (v > 0) add(L, p, c, v);\n  });\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.k) return;\n  const { L, buf, AR, AG, AB, kind } = S;\n  const [k0, , hour, rain] = S.k;\n  const wet = cl((rain - 0.08) / 0.5);\n  L.set(S.amb);\n  // After 1 am every other lamp goes out and the rest dim.\n  const dim = cl((hour - 0.4) / 0.2);\n  const lamps = LAMPS.map((_, i) => {\n    const led = (S.order.indexOf(i) + 0.5) / LAMPS.length \u003c k0;\n    let c = led ? LED : SODIUM;\n    let lv = 1 - (i & 1 ? 0.9 : 0.25) * dim;\n    if (i === DYING && !led) {\n      const t = (S.clk + 8.9) % 16;\n      const u = cl((t - 12.3) / 3.7);\n      lv *= t \u003c 9 ? 1 : t \u003c 9.4 ? (9.4 - t) / 0.4 : t \u003c 12 ? 0 : t \u003c 12.3 ? 0.2 : 0.2 + 0.8 * u;\n      if (t > 12) c = [1, 0.12 + 0.38 * u, 0.15 * (1 - u)];\n    }\n    const { idx, w, g } = S.pools[i];\n    for (let n = 0; n \u003c idx.length; n++) add(L, idx[n], c, I_LAMP * lv * (w[n] + wet * 2 * g[n]));\n    return [c, lv];\n  });\n  const blink = S.t % 1 > 0.5;\n  const lit = [];\n  for (let j = 0; j \u003c 2; j++) {\n    const y0 = JY[j];\n    for (let a = 0; a \u003c 4; a++) {\n      const [x, y, sx, sy, fx, fy] = HEADS[a];\n      const s0 = signal(S, j, mv(a, 0));\n      const on = [!s0 || (s0 === 4 && blink), s0 === 1 || (s0 === 3 && blink), signal(S, j, mv(a, 1)) === 2, s0 === 2];\n      // A lit lamp hazes the road under it, and on wet asphalt streaks toward\n      // the drivers.\n      for (let i = 0; i \u003c 4; i++)\n        if (on[i]) {\n          const c = SIG[Math.min(i, 2)];\n          const lx = x + sx * i + 0.5;\n          const ly = y0 + y + sy * i + 0.5;\n          lit.push([lx, ly, c, 0, 0, 1]);\n          beam(L, lx, ly, 0, 0, 0, 1.2, 0, 6, 0, c);\n          if (wet) beam(L, lx, ly, fx, fy, 2.2 + wet * 6, 0, 0, 4 * wet, 1, c);\n        }\n    }\n    const walk = PH[S.ph[j]][3];\n    const g = walk === 1 || (walk === 2 && S.t % 0.6 \u003c 0.3);\n    if (!S.flash && (g || walk !== 2))\n      for (const [x, y, dx, dy] of KERB) {\n        const c = g ? GREEN : RED;\n        lit.push([x, y0 + y, c, dx, dy, 4]);\n        beam(L, x + 0.5 - dx, y0 + y + 0.5 - dy, dx, dy, 5, 0.8, 0.8, 3.4, 0, c);\n      }\n  }\n  for (const c of S.cars) {\n    beam(L, c.fx, c.fy, c.hx, c.hy, 8, 1.3, 4.5, I_HEAD * (1 - wet * 0.4), 2, BEAMS[c.led]);\n    beam(L, c.cx - c.bx * c.L * 0.5, c.cy - c.by * c.L * 0.5, -c.bx, -c.by, 5.5 + wet * 5, 1.2, 1.2, I_TAIL * (c.brake ? 1 : 0.35), -3, RED);\n  }\n  // Each channel rolls off on its own, as film does, so paint too bright for\n  // the orange light burns through to yellow.\n  const roll = (v) => (v \u003c 200 ? v : 255 - 55 * Math.exp((200 - v) / 55));\n  const shade = (q, r, g, b) => ((buf[q] = roll(r)), (buf[q + 1] = roll(g)), (buf[q + 2] = roll(b)));\n  const aw = 255 * (1 - wet * 0.7);\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const a = kind[p] ? aw : 255;\n    shade(q, AR[p] * L[q] * a, AG[p] * L[q + 1] * a, AB[p] * L[q + 2] * a);\n  }\n  // Cars: the body in the light where it stands, dark glass fore and aft.\n  for (const c of S.cars) {\n    const h = c.L / 2;\n    box(c.cx - h - 1, c.cy - h - 1, c.cx + h + 1, c.cy + h + 1, (x, y, p) => {\n      const rx = x + 0.5 - c.cx;\n      const ry = y + 0.5 - c.cy;\n      const u = rx * c.bx + ry * c.by;\n      if (Math.abs(u) >= h || Math.abs(ry * c.bx - rx * c.by) >= 1.5) return;\n      const f = (h - u) / c.L;\n      const glass = (f > 0.22 && f \u003c 0.4) || (f > 0.74 && f \u003c 0.88);\n      const [r, g, b] = glass ? GLASS : c.col;\n      const sh = glass ? 255 : 166;\n      shade(p * 3, r * L[p * 3] * sh, g * L[p * 3 + 1] * sh, b * L[p * 3 + 2] * sh);\n    });\n  }\n  const put = (x, y, r, g, b, more) => {\n    x = Math.floor(x);\n    y = Math.floor(y);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const q = (y * W + x) * 3;\n    buf[q] = r + (more ? buf[q] : 0);\n    buf[q + 1] = g + (more ? buf[q + 1] : 0);\n    buf[q + 2] = b + (more ? buf[q + 2] : 0);\n  };\n  // People: a dark speck and its shadow in the light, a coat the shop\n  // windows catch out of it, a phone in some hands, umbrellas in the rain.\n  for (const p of S.people) {\n    const x = Math.floor(p.x);\n    const y = Math.floor(p.y);\n    if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= H - 1) continue;\n    const q = (y * W + x) * 3;\n    const f = p.life;\n    if (rain > 0.25) {\n      const u = UMBRELLA[p.umb];\n      for (const [dx, dy] of PLUS) put(x + dx, y + dy, Math.max(24, u[0] * L[q] * 200) * f, u[1] * L[q + 1] * 200 * f, u[2] * L[q + 2] * 200 * f);\n      continue;\n    }\n    if (Math.max(buf[q], buf[q + 1]) > 70)\n      for (let c = 0; c \u003c 3; c++) {\n        buf[q + c] *= 1 - 0.88 * f;\n        buf[q + (W + 1) * 3 + c] *= 1 - 0.65 * f;\n      }\n    else put(x, y, 52 * f, 46 * f, 40 * f);\n    if (p.o > 0.6) put(x + 1, y, 80 * f, 100 * f, 150 * f);\n  }\n  // Car lights: headlamps, tail lamps and the brake light between them, and\n  // the indicator on the side a car turns to.\n  for (const c of S.cars) {\n    const h = c.L / 2 - 0.5;\n    const t = c.R.turn;\n    const ind = t && c.s > t[0] - 30 && c.s \u003c t[1] + 2 && (S.clk * 1.5 + c.ph) % 1 \u003c 0.5 ? t[2] : 0;\n    for (let sd = -1; sd \u003c 2; sd += 2) {\n      const ax = c.cx - c.by * sd;\n      const ay = c.cy + c.bx * sd;\n      put(ax + c.bx * h, ay + c.by * h, ...(ind === sd ? AMBER : c.led ? [235, 242, 255] : [255, 225, 170]));\n      put(ax - c.bx * h, ay - c.by * h, ...(ind === sd ? AMBER : c.brake ? [255, 18, 8] : [200, 8, 5]));\n    }\n    if (c.brake) put(c.cx - c.bx * h, c.cy - c.by * h, 200, 10, 5);\n  }\n  // Signal and walk lights, lamp heads, church crosses.\n  for (const [x, y, c, dx, dy, n] of lit) for (let i = 0; i \u003c n; i++) put(x + dx * i, y + dy * i, c[0] * 255, c[1] * 255, c[2] * 255);\n  LAMPS.forEach(([x, y], i) => put(x, y, ...lamps[i][0].map((v) => v * 255 * lamps[i][1])));\n  for (const [x, y] of CROSSES) for (let i = 0; i \u003c 7; i++) put(x, y + i, 255, 20, 30), i \u003c 5 && put(x - 2 + i, y + 2, 255, 20, 30);\n  // Rain round each lamp: a haze in its colour, and drops flashing through it.\n  if (wet)\n    lamps.forEach(([c, lv], i) => {\n      const { hi, hw } = S.pools[i];\n      for (let n = 0; n \u003c hi.length; n++) add(buf, hi[n], c, 120 * wet * lv * hw[n] * (Math.random() \u003c 0.04 * wet ? 3 : 1));\n    });\n  // Below 3 of 255 an LED is off.\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3)\n    if (buf[q] > 3 || buf[q + 1] > 3 || buf[q + 2] > 3) display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[q]) | 0, Math.min(255, buf[q + 1]) | 0, Math.min(255, buf[q + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamps=0..1, Pace=0.2..3, Hour=0..1, Rain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamps","min":0,"max":1,"about":"At 0 every street lamp is low-pressure sodium and pools the road in orange; turned up, the city swaps them one at a time for white LED heads."},{"name":"Pace","min":0.2,"max":3,"about":"The clock of the whole street: at 2 a car crosses the panel in about five seconds and the signals cycle every thirty, at 0.2 it all creeps."},{"name":"Hour","min":0,"max":1,"about":"At 0 the evening rush, with queues at every red; turned up, traffic and people thin out, after 1 am every other lamp goes out, and past 3 am the signals flash amber on the avenue and red on the side streets."},{"name":"Rain","min":0,"max":1,"about":"Darkens the asphalt to a mirror: each lamp glares under itself inside a haze of lit drops, signals and tail lights streak across the road, and people open umbrellas."}],"start":[0,2,0,0.06],"measures":{"motion":0.2133,"detail":0.0621,"edges":0.4808,"complexity":0.9935,"coverage":0.2564,"colour":0.385,"drift":0.0485},"knobResponse":[0.05,0.0417,0.0482,0.062]},{"slug":"cyanotype","title":"Cyanotype","family":"print","round":19,"note":"철염을 바른 종이에 고사리와 깃털, 민들레 씨앗, 레이스를 놓고 햇빛에 구운 뒤 물로 씻어 내리면 프러시안 블루 인화가 드러나요. 마르며 짙어진 인화가 옆으로 밀려 나가면 다음 장이 깔려요.","idea":"A sun print is made over and over: pressed ferns, feathers, seed heads and lace are laid on a sheet brushed with pale yellow-green iron salts, the sun turns the bare paper blue-grey round them, and when they are lifted a wash runs down the sheet, clearing their shadows to white and the ground to Prussian blue, which deepens as it dries before the print is slid away for the next sheet.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Cyanotype\n// Family:  print\n// Idea:    A sun print is made over and over: pressed ferns, feathers, seed heads and lace are laid on a sheet brushed with pale yellow-green iron salts, the sun turns the bare paper blue-grey round them, and when they are lifted a wash runs down the sheet, clearing their shadows to white and the ground to Prussian blue, which deepens as it dries before the print is slid away for the next sheet.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after John Herschel's cyanotype process (1842) and Anna Atkins's photograms of algae and ferns\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Tone=0..1, Speed=0.2..3, Specimen=0..4, Exposure=-1..1\n//\n// Knob 1: Tone. The washed print, from the plain Prussian blue on white at 0 through a violet to a tea-toned print at 1, brown-black on cream.\n// Knob 2: Speed. How fast the printer works: at 2 one sheet takes 15 seconds from laying the specimens to sliding the dry print away, five of them in the sun; at 0.2 it takes two and a half minutes.\n// Knob 3: Specimen. What is laid on the sheet: a fern frond and a feather, two feathers over a strip of lace, dandelion clocks and grasses, two ferns, or a lace doily with a sprig; turning it washes up a print of that one, and after it the sheets follow in that order.\n// Knob 4: Exposure. How long the sheet lies in the sun: at -1 the ground stays a pale blue and every barb and lace thread prints; at 0 the blue is full; at 1 it goes nearly navy and the thin parts burn through.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n\n// The steps of one sheet, in seconds at Speed 2: the last print slides away,\n// the specimens are laid one by one, the glass goes down, the sun, the glass\n// and specimens come off, the wash runs down the sheet, and it dries.\nconst SLIDE = 0;\nconst LAY = 1.2;\nconst GLASS = 2.6;\nconst SUN = 3;\nconst LIFT = 8;\nconst WASH = 8.8;\nconst DRY = 11.8;\nconst CYCLE = 15;\n// The panel opens with the wash 60% of the way down the first print.\nconst OPEN = WASH + 0.6 * (DRY - WASH);\nconst ARRANGEMENTS = 5;\n\nconst PAPER = [212, 208, 196];\nconst CREAM = [214, 188, 136];\n// The iron salts as brushed on, and the grey-blue they turn in the sun\n// before they are washed.\nconst COAT = [198, 202, 92];\nconst SUNNED = [88, 102, 112];\n// Prussian blue wet from the wash and dry; tea turns it brown-black.\nconst WET = [44, 96, 182];\nconst BLUE = [12, 44, 122];\nconst TEA_WET = [104, 74, 76];\nconst TEA = [62, 40, 46];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction noise1(x, s) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, s) * (1 - u) + hash(i + 1, s) * u;\n}\n\n// A sheet: how thick the salts were brushed at each LED, how much light the\n// specimens on it stop there, and what the specimens look like lying on it.\nfunction newSheet(arr, n) {\n  const S = {\n    arr,\n    coat: new Float32Array(N),\n    mask: new Float32Array(N),\n    obj: new Float32Array(N * 3),\n    order: new Float32Array(N),\n    // Where one specimen lies over another, the one under it.\n    under: new Float32Array(N * 3),\n    uorder: new Float32Array(N),\n    parts: 0,\n  };\n  // Brushed side to side, so the edges are ragged and a few bristles run\n  // past them, and the strokes leave streaks along the rows.\n  for (let y = 0; y \u003c H; y++) {\n    const left = 3 + 2.5 * noise1(y * 0.35, n * 13 + 1) + (hash(y, n * 13 + 2) > 0.88 ? -3 * hash(y, n * 13 + 3) : 0);\n    const right = 60 - 2.5 * noise1(y * 0.35, n * 13 + 4) + (hash(y, n * 13 + 5) > 0.88 ? 3 * hash(y, n * 13 + 6) : 0);\n    const streak = 0.9 + 0.07 * noise1(y * 0.22, n * 13 + 7) + 0.03 * noise1(y * 1.1, n * 13 + 11);\n    for (let x = 0; x \u003c W; x++) {\n      const top = 4 + 2 * noise1(x * 0.3, n * 13 + 8);\n      const bottom = 123 - 2 * noise1(x * 0.3, n * 13 + 9);\n      const inside = smooth(left - 1, left + 1.5, x) * smooth(right + 1, right - 1.5, x) * smooth(top - 1, top + 1, y) * smooth(bottom + 1, bottom - 1, y);\n      S.coat[y * W + x] = inside * streak * (0.94 + 0.06 * noise1(x * 0.2 + y * 3.7, n * 13 + 10));\n    }\n  }\n  ARRANGE[arr](S);\n  return S;\n}\n\n// Lays one stroke of a specimen: a segment `w` LEDs wide that stops `op` of\n// the light, in colour `col`.\nfunction stroke(S, x0, y0, x1, y1, w, op, col) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const len2 = dx * dx + dy * dy || 1;\n  const r = w / 2 + 0.5;\n  const xa = Math.max(0, Math.floor(Math.min(x0, x1) - r));\n  const xb = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + r));\n  const ya = Math.max(0, Math.floor(Math.min(y0, y1) - r));\n  const yb = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + r));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const u = clamp(((x - x0) * dx + (y - y0) * dy) / len2, 0, 1);\n      const d = Math.hypot(x - x0 - u * dx, y - y0 - u * dy);\n      // Pressed flat under the glass, a specimen's edge prints sharp.\n      if (d \u003c r - 0.5) paint(S, y * W + x, op, col);\n    }\n}\n\n// One LED of a specimen. The light it lets through is the least any layer\n// there lets through; the specimen laid last is the one seen on top.\nfunction paint(S, p, op, col) {\n  S.mask[p] = Math.max(S.mask[p], op);\n  if (S.order[p] && S.order[p] !== S.parts) {\n    S.uorder[p] = S.order[p];\n    for (let c = 0; c \u003c 3; c++) S.under[p * 3 + c] = S.obj[p * 3 + c];\n  }\n  for (let c = 0; c \u003c 3; c++) S.obj[p * 3 + c] = col[c];\n  S.order[p] = S.parts;\n}\n\nconst FROND = [70, 112, 48];\nconst QUILL = [196, 186, 166];\nconst SHAFT = [150, 128, 100];\nconst STRAW = [196, 166, 104];\nconst DOWN = [226, 224, 216];\nconst LACE = [232, 226, 210];\n\n// A fern frond from its foot (x, y) along angle `a` for `len` LEDs, bending\n// by `bend`, with pinnae up to `wide` LEDs long, alternate, the lowest few\n// pairs short and the frond tapering to its tip; each pinna is lobed.\nfunction fern(S, x, y, a, len, wide, bend) {\n  S.parts++;\n  const at = (s) => {\n    const c = Math.cos(a + bend * s);\n    const d = Math.sin(a + bend * s);\n    return [x + c * s * len, y + d * s * len, c, d];\n  };\n  for (let s = 0; s \u003c 1; s += 0.02) {\n    const [x0, y0] = at(s);\n    const [x1, y1] = at(s + 0.02);\n    stroke(S, x0, y0, x1, y1, 1.4 - 0.7 * s, 0.95, FROND);\n  }\n  const step = 2.9 / len;\n  let side = 1;\n  for (let s = 0.16; s \u003c 0.97; s += step) {\n    const [px, py, c, d] = at(s);\n    const k = (s - 0.16) / 0.81;\n    const l = wide * Math.pow(Math.sin(Math.PI * Math.min(1, k * 1.25 + 0.06)), 0.8) * (1 - 0.35 * k) + 1;\n    // Pinnae lean toward the tip and curve up at their ends.\n    const pa = a + bend * s + side * (1.15 - 0.25 * k);\n    let qx = px;\n    let qy = py;\n    const n = Math.max(2, Math.round(l));\n    for (let j = 0; j \u003c n; j++) {\n      const t = j / n;\n      const ang = pa - side * 0.45 * t;\n      const nx = qx + Math.cos(ang);\n      const ny = qy + Math.sin(ang);\n      const lobe = 0.75 + 0.25 * Math.cos(j * 2.4);\n      stroke(S, qx, qy, nx, ny, (2.4 - 1.5 * t) * lobe, 0.9, FROND);\n      qx = nx;\n      qy = ny;\n    }\n    side = -side;\n  }\n}\n\n// A feather from the end of its quill along angle `a`: the vanes are barbs\n// side by side that let some light through, split apart here and there, with\n// soft down at the foot, and the shaft drawn over them.\nfunction feather(S, x, y, a, len, wl, wr, seed) {\n  S.parts++;\n  const c = Math.cos(a);\n  const d = Math.sin(a);\n  const bend = 0.12 * len;\n  const at = (s) => [x + c * s * len - d * bend * s * s, y + d * s * len + c * bend * s * s];\n  const [mx, my] = at(0.5);\n  const reach = len / 2 + Math.max(wl, wr) + 4;\n  for (let py = Math.max(0, Math.floor(my - reach)); py \u003c= Math.min(H - 1, my + reach); py++)\n    for (let px = Math.max(0, Math.floor(mx - reach)); px \u003c= Math.min(W - 1, mx + reach); px++) {\n      const s = ((px - x) * c + (py - y) * d) / len;\n      if (s \u003c 0.08 || s > 1) continue;\n      const t = -(px - x) * d + (py - y) * c - bend * s * s;\n      const side = t \u003c 0 ? -1 : 1;\n      const at2 = Math.abs(t);\n      const down = s \u003c 0.3;\n      const wide = (side \u003c 0 ? wl : wr) * (down ? 0.7 + 0.5 * hash(px * 7 + py, seed) : Math.sqrt(Math.max(0, 1 - ((s - 0.55) / 0.46) ** 2)));\n      if (at2 > wide) continue;\n      // Each barb runs out from the shaft and forward toward the tip.\n      const b = (s * len - at2 * 0.55) / 2.4;\n      const k = Math.floor(b);\n      let op = b - k \u003c 0.5 ? 0.9 : 0.5;\n      if (down) op = 0.25 + 0.25 * hash(px, py + seed);\n      else if (hash(k, seed + side) > 0.88 && at2 > 0.35 * wide) op = 0.15;\n      paint(S, py * W + px, op, op > 0.6 ? QUILL : DOWN);\n    }\n  for (let s = 0; s \u003c 1; s += 0.025) {\n    const [x0, y0] = at(s);\n    const [x1, y1] = at(s + 0.025);\n    stroke(S, x0, y0, x1, y1, 1.5 - 1 * s, 0.97, SHAFT);\n  }\n}\n\n// A grass in seed: a thin stem nodding over, its seed heads hung on short\n// stalks either side.\nfunction grass(S, x, y, a, len, bend) {\n  S.parts++;\n  let px = x;\n  let py = y;\n  for (let i = 0; i \u003c len; i++) {\n    const g = a + (bend * i) / len;\n    const nx = px + Math.cos(g);\n    const ny = py + Math.sin(g);\n    stroke(S, px, py, nx, ny, 0.9, 0.9, STRAW);\n    if (i > len * 0.45 && i % 3 === 0) {\n      const side = (i / 3) % 2 ? 1 : -1;\n      const h = g + side * 0.9 + 0.5 * bend;\n      const sx = nx + 2 * Math.cos(h);\n      const sy = ny + 2 * Math.sin(h);\n      stroke(S, nx, ny, sx, sy, 0.6, 0.8, STRAW);\n      const e = h + 0.4 * side;\n      stroke(S, sx, sy, sx + 2.6 * Math.cos(e), sy + 2.6 * Math.sin(e), 1.7, 0.95, STRAW);\n    }\n    px = nx;\n    py = ny;\n  }\n}\n\n// A dandelion clock: its stem up from (x, y), a ball of seeds on fine\n// stalks, each with its little parachute.\nfunction clock(S, x, y, cx, cy, r, seed) {\n  S.parts++;\n  stroke(S, x, y, (x + cx) / 2 + 2, (y + cy) / 2, 1, 0.9, STRAW);\n  stroke(S, (x + cx) / 2 + 2, (y + cy) / 2, cx, cy, 1, 0.9, STRAW);\n  const n = 26;\n  for (let i = 0; i \u003c n; i++) {\n    const g = (i / n) * 6.283 + 0.2 * hash(i, seed);\n    const l = r * (0.8 + 0.2 * hash(i, seed + 1));\n    const ex = cx + Math.cos(g) * l;\n    const ey = cy + Math.sin(g) * l;\n    stroke(S, cx, cy, ex, ey, 0.5, 0.7, DOWN);\n    stroke(S, ex - 1.2 * Math.sin(g), ey + 1.2 * Math.cos(g), ex + 1.2 * Math.sin(g), ey - 1.2 * Math.cos(g), 0.8, 0.85, DOWN);\n  }\n  stroke(S, cx - 0.5, cy, cx + 0.5, cy, 2.4, 0.95, STRAW);\n}\n\n// Lace: a band from (x0, y0) to (x1, y1), `wide` LEDs deep, with a solid\n// heading, a net of diagonal threads, rings at each repeat and a scalloped\n// edge. `round` bends the band into a doily of that radius instead.\nfunction lace(S, x0, y0, x1, y1, wide, round) {\n  S.parts++;\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const len = Math.hypot(dx, dy);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let u;\n      let v;\n      if (round) {\n        const r = Math.hypot(x - x0, y - y0);\n        v = round - r;\n        u = (Math.atan2(y - y0, x - x0) + Math.PI) * round * 0.75;\n        if (r \u003c 3) {\n          paint(S, y * W + x, 0.85, LACE);\n          continue;\n        }\n      } else {\n        u = ((x - x0) * dx + (y - y0) * dy) / len;\n        v = (-(x - x0) * dy + (y - y0) * dx) / len;\n        if (u \u003c 0 || u > len) continue;\n      }\n      const rep = 10;\n      const m = ((u % rep) + rep) % rep;\n      const scallop = 2.6 * Math.sqrt(Math.max(0, 1 - ((m - rep / 2) / (rep / 2)) ** 2));\n      if (v \u003c 0 || v > wide + scallop) continue;\n      let op = 0;\n      if (v \u003c 1.6) op = 0.85;\n      else if (v > wide + scallop - 1.2) op = 0.8;\n      else {\n        const ring = Math.hypot(m - rep / 2, v - wide * 0.55);\n        if (Math.abs(ring - 3) \u003c 0.8) op = 0.85;\n        else if (ring \u003c 1.2) op = 0.75;\n        else if (ring > 4 && (Math.abs(((u + v) % 3.4) - 1.7) \u003c 0.5 || Math.abs(((((u - v) % 3.4) + 3.4) % 3.4) - 1.7) \u003c 0.5)) op = 0.7;\n      }\n      if (op > 0) paint(S, y * W + x, op, LACE);\n    }\n}\n\nconst ARRANGE = [\n  (S) => {\n    fern(S, 11, 126, -1.5, 100, 11, 0.2);\n    feather(S, 58, 126, -1.82, 82, 5, 8, 1);\n  },\n  (S) => {\n    feather(S, 8, 98, -1.15, 92, 7, 5, 2);\n    feather(S, 56, 96, -2.05, 80, 4, 6, 3);\n    lace(S, -2, 104, 66, 104, 11, 0);\n  },\n  (S) => {\n    clock(S, 20, 127, 18, 24, 12, 4);\n    clock(S, 34, 127, 46, 54, 10, 5);\n    clock(S, 26, 127, 16, 88, 8, 6);\n    grass(S, 56, 126, -1.65, 64, -1.2);\n  },\n  (S) => {\n    fern(S, 34, 126, -1.62, 112, 13, -0.15);\n    fern(S, 6, 4, 1.25, 52, 7, 0.25);\n  },\n  (S) => {\n    lace(S, 32, 38, 0, 0, 18, 25);\n    grass(S, 20, 126, -1.35, 60, -0.5);\n    fern(S, 48, 126, -1.75, 56, 8, -0.3);\n  },\n];\n\nexport function setup(params) {\n  const P = params;\n  P.grain = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) P.grain[p] = hash(p, 99) - 0.5;\n  P.drops = [];\n  Object.assign(P, { ct: OPEN, count: 0, arr: 0, sheet: null, last: null, started: false, tone: 0, k: 2.6 });\n  lay(P, 0);\n}\n\nfunction lay(P, arr) {\n  P.last = P.sheet;\n  P.sheet = newSheet(arr, P.count++);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.tone = clamp(k[0], 0, 1);\n  P.k = 2.6 * Math.pow(2, 1.3 * clamp(k[3], -1, 1));\n  const arr = clamp(Math.round(k[2]), 0, ARRANGEMENTS - 1);\n  if (arr !== P.arr) {\n    // A new specimen: its print comes up under the wash.\n    P.arr = arr;\n    lay(P, arr);\n    P.ct = P.started ? WASH : OPEN;\n    P.last = null;\n  }\n  P.started = true;\n  const speed = clamp(k[1], 0.1, 4) / 2;\n  P.ct += dt * speed;\n  if (P.ct >= CYCLE) {\n    P.ct -= CYCLE;\n    P.arr = arr;\n    lay(P, (P.sheet.arr + 1) % ARRANGEMENTS);\n  }\n  // Drops of the wash run down the wet sheet.\n  const ct = P.ct;\n  if (ct > WASH && ct \u003c DRY + 2 && Math.random() \u003c dt * speed * 3) P.drops.push({ x: 4 + Math.random() * 56, y: Math.min(H, washLine(ct)) * Math.random(), v: 6 + 10 * Math.random() });\n  for (const d of P.drops) d.y += d.v * dt * speed;\n  P.drops = P.drops.filter((d) => d.y \u003c H + 4);\n}\n\n// How far down the sheet the wash has run.\nfunction washLine(ct) {\n  return -10 + (H + 18) * smooth(WASH, DRY, ct);\n}\n\n// The colour of a sheet at one LED: the salts as they are at time `ct` of the\n// sheet's life, with the specimens on top while they lie there.\nfunction colour(P, S, p, x, y, ct, out) {\n  const c = S.coat[p];\n  const m = S.mask[p];\n  const tone = P.tone;\n  const g = 3 * P.grain[p];\n  let r = PAPER[0];\n  let gg = PAPER[1];\n  let b = PAPER[2];\n  // The wash front, ragged along the row.\n  const front = ct \u003c WASH ? -99 : ct \u003c DRY ? washLine(ct) + 2.2 * Math.sin(x * 0.37 + ct * 2.1) + 1.6 * Math.sin(x * 0.93 - ct * 3.3) + 3 * noise1(x * 0.45 + ct, 33) : 999;\n  if (y \u003c front) {\n    // Washed: the salts that never saw the sun are gone, and what did is blue.\n    const blue = c * (1 - Math.exp(-P.k * (1 - m)));\n    const wet = smooth(DRY + 3.2, DRY - 0.5, ct + (H - y) * 0.012);\n    const dark0 = WET[0] * wet + BLUE[0] * (1 - wet);\n    const dark1 = WET[1] * wet + BLUE[1] * (1 - wet);\n    const dark2 = WET[2] * wet + BLUE[2] * (1 - wet);\n    const t0 = TEA_WET[0] * wet + TEA[0] * (1 - wet);\n    const t1 = TEA_WET[1] * wet + TEA[1] * (1 - wet);\n    const t2 = TEA_WET[2] * wet + TEA[2] * (1 - wet);\n    const d0 = dark0 + (t0 - dark0) * tone;\n    const d1 = dark1 + (t1 - dark1) * tone;\n    const d2 = dark2 + (t2 - dark2) * tone;\n    const l0 = PAPER[0] + (CREAM[0] - PAPER[0]) * tone;\n    const l1 = PAPER[1] + (CREAM[1] - PAPER[1]) * tone;\n    const l2 = PAPER[2] + (CREAM[2] - PAPER[2]) * tone;\n    r = l0 + (d0 - l0) * blue;\n    gg = l1 + (d1 - l1) * blue;\n    b = l2 + (d2 - l2) * blue;\n    // Water on the sheet shines; the shine draws back down as it dries.\n    const film = front - y \u003c 6 ? 1 - (front - y) / 6 : wet * 0.35;\n    if (film > 0) {\n      const shine = film * (18 + 14 * Math.sin(x * 0.7 + y * 0.35 - ct * 9));\n      r += shine;\n      gg += shine;\n      b += shine;\n    }\n  } else {\n    // In the sun the salts go from yellow-green to grey-blue where light\n    // reaches them.\n    const dose = ct \u003c SUN ? 0 : smooth(SUN, LIFT, ct) * (1 - m);\n    const e = 1 - Math.exp(-P.k * 1.2 * dose);\n    const s0 = COAT[0] + (SUNNED[0] - COAT[0]) * e;\n    const s1 = COAT[1] + (SUNNED[1] - COAT[1]) * e;\n    const s2 = COAT[2] + (SUNNED[2] - COAT[2]) * e;\n    r += (s0 - r) * c;\n    gg += (s1 - gg) * c;\n    b += (s2 - b) * c;\n    // Just under the wash front the salts run yellow down the sheet.\n    if (front > -99 && y - front \u003c 10) {\n      const run = (1 - (y - front) / 10) * c;\n      r += (220 - r) * run * 0.3;\n      gg += (214 - gg) * run * 0.3;\n      b += (120 - b) * run * 0.3;\n    }\n    // The specimens, laid one after another and lifted together.\n    if (S.order[p] && ct > LAY && ct \u003c LIFT + 0.6) {\n      const off = smooth(LIFT + 0.6, LIFT, ct);\n      for (let layer = 0; layer \u003c 2; layer++) {\n        const o = layer ? S.order[p] : S.uorder[p];\n        if (!o) continue;\n        const src = layer ? S.obj : S.under;\n        const on = smooth(LAY + 0.35 * (o - 1), LAY + 0.35 * o, ct) * off;\n        r += (src[p * 3] - r) * on;\n        gg += (src[p * 3 + 1] - gg) * on;\n        b += (src[p * 3 + 2] - b) * on;\n      }\n    }\n    // The glass over it all catches the sun in a broad band.\n    if (ct > GLASS && ct \u003c LIFT + 0.4) {\n      const lit = smooth(GLASS, GLASS + 0.4, ct) * smooth(LIFT + 0.4, LIFT, ct);\n      const band = x * 0.8 + y * 0.45 - 20 - 9 * (ct - GLASS);\n      const glare = lit * (8 + 30 * Math.exp(-(band * band) / 60));\n      r += glare;\n      gg += glare;\n      b += glare;\n    }\n  }\n  out[0] = r + g;\n  out[1] = gg + g;\n  out[2] = b + g;\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.sheet) return;\n  const ct = P.ct;\n  const S = P.sheet;\n  const out = [0, 0, 0];\n  // While the last print slides off to the left, the new sheet lies under it.\n  const off = P.last && ct \u003c LAY ? Math.round(W * smooth(SLIDE, LAY, ct)) : W;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (x + off \u003c W) {\n        colour(P, P.last, p + off, x + off, y, CYCLE - 0.01, out);\n      } else {\n        colour(P, S, p, x, y, ct, out);\n        // The print's edge throws a shadow on the sheet beneath.\n        const e = x + off - W;\n        if (off \u003c W && e \u003c 3) {\n          const sh = 0.55 + 0.15 * e;\n          out[0] *= sh;\n          out[1] *= sh;\n          out[2] *= sh;\n        }\n      }\n      display.setPixel(x, y, byte(out[0]), byte(out[1]), byte(out[2]));\n    }\n  // Drops running down the wet print.\n  if (ct > WASH && ct \u003c CYCLE)\n    for (const d of P.drops) {\n      const x = Math.round(d.x);\n      for (let j = 0; j \u003c 3; j++) {\n        const y = Math.round(d.y) - j;\n        if (y \u003c 0 || y >= H || y > (ct \u003c DRY ? washLine(ct) - 3 : H)) continue;\n        colour(P, S, y * W + x, x, y, ct, out);\n        const v = 40 - 12 * j;\n        display.setPixel(x, y, byte(out[0] + v), byte(out[1] + v), byte(out[2] + v));\n      }\n    }\n}\n","layer":{"id":"layer-cyanotype","type":"code","name":"cyanotype","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cyanotype\n// Family:  print\n// Idea:    A sun print is made over and over: pressed ferns, feathers, seed heads and lace are laid on a sheet brushed with pale yellow-green iron salts, the sun turns the bare paper blue-grey round them, and when they are lifted a wash runs down the sheet, clearing their shadows to white and the ground to Prussian blue, which deepens as it dries before the print is slid away for the next sheet.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after John Herschel's cyanotype process (1842) and Anna Atkins's photograms of algae and ferns\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Tone=0..1, Speed=0.2..3, Specimen=0..4, Exposure=-1..1\n//\n// Knob 1: Tone. The washed print, from the plain Prussian blue on white at 0 through a violet to a tea-toned print at 1, brown-black on cream.\n// Knob 2: Speed. How fast the printer works: at 2 one sheet takes 15 seconds from laying the specimens to sliding the dry print away, five of them in the sun; at 0.2 it takes two and a half minutes.\n// Knob 3: Specimen. What is laid on the sheet: a fern frond and a feather, two feathers over a strip of lace, dandelion clocks and grasses, two ferns, or a lace doily with a sprig; turning it washes up a print of that one, and after it the sheets follow in that order.\n// Knob 4: Exposure. How long the sheet lies in the sun: at -1 the ground stays a pale blue and every barb and lace thread prints; at 0 the blue is full; at 1 it goes nearly navy and the thin parts burn through.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n\n// The steps of one sheet, in seconds at Speed 2: the last print slides away,\n// the specimens are laid one by one, the glass goes down, the sun, the glass\n// and specimens come off, the wash runs down the sheet, and it dries.\nconst SLIDE = 0;\nconst LAY = 1.2;\nconst GLASS = 2.6;\nconst SUN = 3;\nconst LIFT = 8;\nconst WASH = 8.8;\nconst DRY = 11.8;\nconst CYCLE = 15;\n// The panel opens with the wash 60% of the way down the first print.\nconst OPEN = WASH + 0.6 * (DRY - WASH);\nconst ARRANGEMENTS = 5;\n\nconst PAPER = [212, 208, 196];\nconst CREAM = [214, 188, 136];\n// The iron salts as brushed on, and the grey-blue they turn in the sun\n// before they are washed.\nconst COAT = [198, 202, 92];\nconst SUNNED = [88, 102, 112];\n// Prussian blue wet from the wash and dry; tea turns it brown-black.\nconst WET = [44, 96, 182];\nconst BLUE = [12, 44, 122];\nconst TEA_WET = [104, 74, 76];\nconst TEA = [62, 40, 46];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction noise1(x, s) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, s) * (1 - u) + hash(i + 1, s) * u;\n}\n\n// A sheet: how thick the salts were brushed at each LED, how much light the\n// specimens on it stop there, and what the specimens look like lying on it.\nfunction newSheet(arr, n) {\n  const S = {\n    arr,\n    coat: new Float32Array(N),\n    mask: new Float32Array(N),\n    obj: new Float32Array(N * 3),\n    order: new Float32Array(N),\n    // Where one specimen lies over another, the one under it.\n    under: new Float32Array(N * 3),\n    uorder: new Float32Array(N),\n    parts: 0,\n  };\n  // Brushed side to side, so the edges are ragged and a few bristles run\n  // past them, and the strokes leave streaks along the rows.\n  for (let y = 0; y \u003c H; y++) {\n    const left = 3 + 2.5 * noise1(y * 0.35, n * 13 + 1) + (hash(y, n * 13 + 2) > 0.88 ? -3 * hash(y, n * 13 + 3) : 0);\n    const right = 60 - 2.5 * noise1(y * 0.35, n * 13 + 4) + (hash(y, n * 13 + 5) > 0.88 ? 3 * hash(y, n * 13 + 6) : 0);\n    const streak = 0.9 + 0.07 * noise1(y * 0.22, n * 13 + 7) + 0.03 * noise1(y * 1.1, n * 13 + 11);\n    for (let x = 0; x \u003c W; x++) {\n      const top = 4 + 2 * noise1(x * 0.3, n * 13 + 8);\n      const bottom = 123 - 2 * noise1(x * 0.3, n * 13 + 9);\n      const inside = smooth(left - 1, left + 1.5, x) * smooth(right + 1, right - 1.5, x) * smooth(top - 1, top + 1, y) * smooth(bottom + 1, bottom - 1, y);\n      S.coat[y * W + x] = inside * streak * (0.94 + 0.06 * noise1(x * 0.2 + y * 3.7, n * 13 + 10));\n    }\n  }\n  ARRANGE[arr](S);\n  return S;\n}\n\n// Lays one stroke of a specimen: a segment `w` LEDs wide that stops `op` of\n// the light, in colour `col`.\nfunction stroke(S, x0, y0, x1, y1, w, op, col) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const len2 = dx * dx + dy * dy || 1;\n  const r = w / 2 + 0.5;\n  const xa = Math.max(0, Math.floor(Math.min(x0, x1) - r));\n  const xb = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + r));\n  const ya = Math.max(0, Math.floor(Math.min(y0, y1) - r));\n  const yb = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + r));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const u = clamp(((x - x0) * dx + (y - y0) * dy) / len2, 0, 1);\n      const d = Math.hypot(x - x0 - u * dx, y - y0 - u * dy);\n      // Pressed flat under the glass, a specimen's edge prints sharp.\n      if (d \u003c r - 0.5) paint(S, y * W + x, op, col);\n    }\n}\n\n// One LED of a specimen. The light it lets through is the least any layer\n// there lets through; the specimen laid last is the one seen on top.\nfunction paint(S, p, op, col) {\n  S.mask[p] = Math.max(S.mask[p], op);\n  if (S.order[p] && S.order[p] !== S.parts) {\n    S.uorder[p] = S.order[p];\n    for (let c = 0; c \u003c 3; c++) S.under[p * 3 + c] = S.obj[p * 3 + c];\n  }\n  for (let c = 0; c \u003c 3; c++) S.obj[p * 3 + c] = col[c];\n  S.order[p] = S.parts;\n}\n\nconst FROND = [70, 112, 48];\nconst QUILL = [196, 186, 166];\nconst SHAFT = [150, 128, 100];\nconst STRAW = [196, 166, 104];\nconst DOWN = [226, 224, 216];\nconst LACE = [232, 226, 210];\n\n// A fern frond from its foot (x, y) along angle `a` for `len` LEDs, bending\n// by `bend`, with pinnae up to `wide` LEDs long, alternate, the lowest few\n// pairs short and the frond tapering to its tip; each pinna is lobed.\nfunction fern(S, x, y, a, len, wide, bend) {\n  S.parts++;\n  const at = (s) => {\n    const c = Math.cos(a + bend * s);\n    const d = Math.sin(a + bend * s);\n    return [x + c * s * len, y + d * s * len, c, d];\n  };\n  for (let s = 0; s \u003c 1; s += 0.02) {\n    const [x0, y0] = at(s);\n    const [x1, y1] = at(s + 0.02);\n    stroke(S, x0, y0, x1, y1, 1.4 - 0.7 * s, 0.95, FROND);\n  }\n  const step = 2.9 / len;\n  let side = 1;\n  for (let s = 0.16; s \u003c 0.97; s += step) {\n    const [px, py, c, d] = at(s);\n    const k = (s - 0.16) / 0.81;\n    const l = wide * Math.pow(Math.sin(Math.PI * Math.min(1, k * 1.25 + 0.06)), 0.8) * (1 - 0.35 * k) + 1;\n    // Pinnae lean toward the tip and curve up at their ends.\n    const pa = a + bend * s + side * (1.15 - 0.25 * k);\n    let qx = px;\n    let qy = py;\n    const n = Math.max(2, Math.round(l));\n    for (let j = 0; j \u003c n; j++) {\n      const t = j / n;\n      const ang = pa - side * 0.45 * t;\n      const nx = qx + Math.cos(ang);\n      const ny = qy + Math.sin(ang);\n      const lobe = 0.75 + 0.25 * Math.cos(j * 2.4);\n      stroke(S, qx, qy, nx, ny, (2.4 - 1.5 * t) * lobe, 0.9, FROND);\n      qx = nx;\n      qy = ny;\n    }\n    side = -side;\n  }\n}\n\n// A feather from the end of its quill along angle `a`: the vanes are barbs\n// side by side that let some light through, split apart here and there, with\n// soft down at the foot, and the shaft drawn over them.\nfunction feather(S, x, y, a, len, wl, wr, seed) {\n  S.parts++;\n  const c = Math.cos(a);\n  const d = Math.sin(a);\n  const bend = 0.12 * len;\n  const at = (s) => [x + c * s * len - d * bend * s * s, y + d * s * len + c * bend * s * s];\n  const [mx, my] = at(0.5);\n  const reach = len / 2 + Math.max(wl, wr) + 4;\n  for (let py = Math.max(0, Math.floor(my - reach)); py \u003c= Math.min(H - 1, my + reach); py++)\n    for (let px = Math.max(0, Math.floor(mx - reach)); px \u003c= Math.min(W - 1, mx + reach); px++) {\n      const s = ((px - x) * c + (py - y) * d) / len;\n      if (s \u003c 0.08 || s > 1) continue;\n      const t = -(px - x) * d + (py - y) * c - bend * s * s;\n      const side = t \u003c 0 ? -1 : 1;\n      const at2 = Math.abs(t);\n      const down = s \u003c 0.3;\n      const wide = (side \u003c 0 ? wl : wr) * (down ? 0.7 + 0.5 * hash(px * 7 + py, seed) : Math.sqrt(Math.max(0, 1 - ((s - 0.55) / 0.46) ** 2)));\n      if (at2 > wide) continue;\n      // Each barb runs out from the shaft and forward toward the tip.\n      const b = (s * len - at2 * 0.55) / 2.4;\n      const k = Math.floor(b);\n      let op = b - k \u003c 0.5 ? 0.9 : 0.5;\n      if (down) op = 0.25 + 0.25 * hash(px, py + seed);\n      else if (hash(k, seed + side) > 0.88 && at2 > 0.35 * wide) op = 0.15;\n      paint(S, py * W + px, op, op > 0.6 ? QUILL : DOWN);\n    }\n  for (let s = 0; s \u003c 1; s += 0.025) {\n    const [x0, y0] = at(s);\n    const [x1, y1] = at(s + 0.025);\n    stroke(S, x0, y0, x1, y1, 1.5 - 1 * s, 0.97, SHAFT);\n  }\n}\n\n// A grass in seed: a thin stem nodding over, its seed heads hung on short\n// stalks either side.\nfunction grass(S, x, y, a, len, bend) {\n  S.parts++;\n  let px = x;\n  let py = y;\n  for (let i = 0; i \u003c len; i++) {\n    const g = a + (bend * i) / len;\n    const nx = px + Math.cos(g);\n    const ny = py + Math.sin(g);\n    stroke(S, px, py, nx, ny, 0.9, 0.9, STRAW);\n    if (i > len * 0.45 && i % 3 === 0) {\n      const side = (i / 3) % 2 ? 1 : -1;\n      const h = g + side * 0.9 + 0.5 * bend;\n      const sx = nx + 2 * Math.cos(h);\n      const sy = ny + 2 * Math.sin(h);\n      stroke(S, nx, ny, sx, sy, 0.6, 0.8, STRAW);\n      const e = h + 0.4 * side;\n      stroke(S, sx, sy, sx + 2.6 * Math.cos(e), sy + 2.6 * Math.sin(e), 1.7, 0.95, STRAW);\n    }\n    px = nx;\n    py = ny;\n  }\n}\n\n// A dandelion clock: its stem up from (x, y), a ball of seeds on fine\n// stalks, each with its little parachute.\nfunction clock(S, x, y, cx, cy, r, seed) {\n  S.parts++;\n  stroke(S, x, y, (x + cx) / 2 + 2, (y + cy) / 2, 1, 0.9, STRAW);\n  stroke(S, (x + cx) / 2 + 2, (y + cy) / 2, cx, cy, 1, 0.9, STRAW);\n  const n = 26;\n  for (let i = 0; i \u003c n; i++) {\n    const g = (i / n) * 6.283 + 0.2 * hash(i, seed);\n    const l = r * (0.8 + 0.2 * hash(i, seed + 1));\n    const ex = cx + Math.cos(g) * l;\n    const ey = cy + Math.sin(g) * l;\n    stroke(S, cx, cy, ex, ey, 0.5, 0.7, DOWN);\n    stroke(S, ex - 1.2 * Math.sin(g), ey + 1.2 * Math.cos(g), ex + 1.2 * Math.sin(g), ey - 1.2 * Math.cos(g), 0.8, 0.85, DOWN);\n  }\n  stroke(S, cx - 0.5, cy, cx + 0.5, cy, 2.4, 0.95, STRAW);\n}\n\n// Lace: a band from (x0, y0) to (x1, y1), `wide` LEDs deep, with a solid\n// heading, a net of diagonal threads, rings at each repeat and a scalloped\n// edge. `round` bends the band into a doily of that radius instead.\nfunction lace(S, x0, y0, x1, y1, wide, round) {\n  S.parts++;\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const len = Math.hypot(dx, dy);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let u;\n      let v;\n      if (round) {\n        const r = Math.hypot(x - x0, y - y0);\n        v = round - r;\n        u = (Math.atan2(y - y0, x - x0) + Math.PI) * round * 0.75;\n        if (r \u003c 3) {\n          paint(S, y * W + x, 0.85, LACE);\n          continue;\n        }\n      } else {\n        u = ((x - x0) * dx + (y - y0) * dy) / len;\n        v = (-(x - x0) * dy + (y - y0) * dx) / len;\n        if (u \u003c 0 || u > len) continue;\n      }\n      const rep = 10;\n      const m = ((u % rep) + rep) % rep;\n      const scallop = 2.6 * Math.sqrt(Math.max(0, 1 - ((m - rep / 2) / (rep / 2)) ** 2));\n      if (v \u003c 0 || v > wide + scallop) continue;\n      let op = 0;\n      if (v \u003c 1.6) op = 0.85;\n      else if (v > wide + scallop - 1.2) op = 0.8;\n      else {\n        const ring = Math.hypot(m - rep / 2, v - wide * 0.55);\n        if (Math.abs(ring - 3) \u003c 0.8) op = 0.85;\n        else if (ring \u003c 1.2) op = 0.75;\n        else if (ring > 4 && (Math.abs(((u + v) % 3.4) - 1.7) \u003c 0.5 || Math.abs(((((u - v) % 3.4) + 3.4) % 3.4) - 1.7) \u003c 0.5)) op = 0.7;\n      }\n      if (op > 0) paint(S, y * W + x, op, LACE);\n    }\n}\n\nconst ARRANGE = [\n  (S) => {\n    fern(S, 11, 126, -1.5, 100, 11, 0.2);\n    feather(S, 58, 126, -1.82, 82, 5, 8, 1);\n  },\n  (S) => {\n    feather(S, 8, 98, -1.15, 92, 7, 5, 2);\n    feather(S, 56, 96, -2.05, 80, 4, 6, 3);\n    lace(S, -2, 104, 66, 104, 11, 0);\n  },\n  (S) => {\n    clock(S, 20, 127, 18, 24, 12, 4);\n    clock(S, 34, 127, 46, 54, 10, 5);\n    clock(S, 26, 127, 16, 88, 8, 6);\n    grass(S, 56, 126, -1.65, 64, -1.2);\n  },\n  (S) => {\n    fern(S, 34, 126, -1.62, 112, 13, -0.15);\n    fern(S, 6, 4, 1.25, 52, 7, 0.25);\n  },\n  (S) => {\n    lace(S, 32, 38, 0, 0, 18, 25);\n    grass(S, 20, 126, -1.35, 60, -0.5);\n    fern(S, 48, 126, -1.75, 56, 8, -0.3);\n  },\n];\n\nexport function setup(params) {\n  const P = params;\n  P.grain = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) P.grain[p] = hash(p, 99) - 0.5;\n  P.drops = [];\n  Object.assign(P, { ct: OPEN, count: 0, arr: 0, sheet: null, last: null, started: false, tone: 0, k: 2.6 });\n  lay(P, 0);\n}\n\nfunction lay(P, arr) {\n  P.last = P.sheet;\n  P.sheet = newSheet(arr, P.count++);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.tone = clamp(k[0], 0, 1);\n  P.k = 2.6 * Math.pow(2, 1.3 * clamp(k[3], -1, 1));\n  const arr = clamp(Math.round(k[2]), 0, ARRANGEMENTS - 1);\n  if (arr !== P.arr) {\n    // A new specimen: its print comes up under the wash.\n    P.arr = arr;\n    lay(P, arr);\n    P.ct = P.started ? WASH : OPEN;\n    P.last = null;\n  }\n  P.started = true;\n  const speed = clamp(k[1], 0.1, 4) / 2;\n  P.ct += dt * speed;\n  if (P.ct >= CYCLE) {\n    P.ct -= CYCLE;\n    P.arr = arr;\n    lay(P, (P.sheet.arr + 1) % ARRANGEMENTS);\n  }\n  // Drops of the wash run down the wet sheet.\n  const ct = P.ct;\n  if (ct > WASH && ct \u003c DRY + 2 && Math.random() \u003c dt * speed * 3) P.drops.push({ x: 4 + Math.random() * 56, y: Math.min(H, washLine(ct)) * Math.random(), v: 6 + 10 * Math.random() });\n  for (const d of P.drops) d.y += d.v * dt * speed;\n  P.drops = P.drops.filter((d) => d.y \u003c H + 4);\n}\n\n// How far down the sheet the wash has run.\nfunction washLine(ct) {\n  return -10 + (H + 18) * smooth(WASH, DRY, ct);\n}\n\n// The colour of a sheet at one LED: the salts as they are at time `ct` of the\n// sheet's life, with the specimens on top while they lie there.\nfunction colour(P, S, p, x, y, ct, out) {\n  const c = S.coat[p];\n  const m = S.mask[p];\n  const tone = P.tone;\n  const g = 3 * P.grain[p];\n  let r = PAPER[0];\n  let gg = PAPER[1];\n  let b = PAPER[2];\n  // The wash front, ragged along the row.\n  const front = ct \u003c WASH ? -99 : ct \u003c DRY ? washLine(ct) + 2.2 * Math.sin(x * 0.37 + ct * 2.1) + 1.6 * Math.sin(x * 0.93 - ct * 3.3) + 3 * noise1(x * 0.45 + ct, 33) : 999;\n  if (y \u003c front) {\n    // Washed: the salts that never saw the sun are gone, and what did is blue.\n    const blue = c * (1 - Math.exp(-P.k * (1 - m)));\n    const wet = smooth(DRY + 3.2, DRY - 0.5, ct + (H - y) * 0.012);\n    const dark0 = WET[0] * wet + BLUE[0] * (1 - wet);\n    const dark1 = WET[1] * wet + BLUE[1] * (1 - wet);\n    const dark2 = WET[2] * wet + BLUE[2] * (1 - wet);\n    const t0 = TEA_WET[0] * wet + TEA[0] * (1 - wet);\n    const t1 = TEA_WET[1] * wet + TEA[1] * (1 - wet);\n    const t2 = TEA_WET[2] * wet + TEA[2] * (1 - wet);\n    const d0 = dark0 + (t0 - dark0) * tone;\n    const d1 = dark1 + (t1 - dark1) * tone;\n    const d2 = dark2 + (t2 - dark2) * tone;\n    const l0 = PAPER[0] + (CREAM[0] - PAPER[0]) * tone;\n    const l1 = PAPER[1] + (CREAM[1] - PAPER[1]) * tone;\n    const l2 = PAPER[2] + (CREAM[2] - PAPER[2]) * tone;\n    r = l0 + (d0 - l0) * blue;\n    gg = l1 + (d1 - l1) * blue;\n    b = l2 + (d2 - l2) * blue;\n    // Water on the sheet shines; the shine draws back down as it dries.\n    const film = front - y \u003c 6 ? 1 - (front - y) / 6 : wet * 0.35;\n    if (film > 0) {\n      const shine = film * (18 + 14 * Math.sin(x * 0.7 + y * 0.35 - ct * 9));\n      r += shine;\n      gg += shine;\n      b += shine;\n    }\n  } else {\n    // In the sun the salts go from yellow-green to grey-blue where light\n    // reaches them.\n    const dose = ct \u003c SUN ? 0 : smooth(SUN, LIFT, ct) * (1 - m);\n    const e = 1 - Math.exp(-P.k * 1.2 * dose);\n    const s0 = COAT[0] + (SUNNED[0] - COAT[0]) * e;\n    const s1 = COAT[1] + (SUNNED[1] - COAT[1]) * e;\n    const s2 = COAT[2] + (SUNNED[2] - COAT[2]) * e;\n    r += (s0 - r) * c;\n    gg += (s1 - gg) * c;\n    b += (s2 - b) * c;\n    // Just under the wash front the salts run yellow down the sheet.\n    if (front > -99 && y - front \u003c 10) {\n      const run = (1 - (y - front) / 10) * c;\n      r += (220 - r) * run * 0.3;\n      gg += (214 - gg) * run * 0.3;\n      b += (120 - b) * run * 0.3;\n    }\n    // The specimens, laid one after another and lifted together.\n    if (S.order[p] && ct > LAY && ct \u003c LIFT + 0.6) {\n      const off = smooth(LIFT + 0.6, LIFT, ct);\n      for (let layer = 0; layer \u003c 2; layer++) {\n        const o = layer ? S.order[p] : S.uorder[p];\n        if (!o) continue;\n        const src = layer ? S.obj : S.under;\n        const on = smooth(LAY + 0.35 * (o - 1), LAY + 0.35 * o, ct) * off;\n        r += (src[p * 3] - r) * on;\n        gg += (src[p * 3 + 1] - gg) * on;\n        b += (src[p * 3 + 2] - b) * on;\n      }\n    }\n    // The glass over it all catches the sun in a broad band.\n    if (ct > GLASS && ct \u003c LIFT + 0.4) {\n      const lit = smooth(GLASS, GLASS + 0.4, ct) * smooth(LIFT + 0.4, LIFT, ct);\n      const band = x * 0.8 + y * 0.45 - 20 - 9 * (ct - GLASS);\n      const glare = lit * (8 + 30 * Math.exp(-(band * band) / 60));\n      r += glare;\n      gg += glare;\n      b += glare;\n    }\n  }\n  out[0] = r + g;\n  out[1] = gg + g;\n  out[2] = b + g;\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.sheet) return;\n  const ct = P.ct;\n  const S = P.sheet;\n  const out = [0, 0, 0];\n  // While the last print slides off to the left, the new sheet lies under it.\n  const off = P.last && ct \u003c LAY ? Math.round(W * smooth(SLIDE, LAY, ct)) : W;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (x + off \u003c W) {\n        colour(P, P.last, p + off, x + off, y, CYCLE - 0.01, out);\n      } else {\n        colour(P, S, p, x, y, ct, out);\n        // The print's edge throws a shadow on the sheet beneath.\n        const e = x + off - W;\n        if (off \u003c W && e \u003c 3) {\n          const sh = 0.55 + 0.15 * e;\n          out[0] *= sh;\n          out[1] *= sh;\n          out[2] *= sh;\n        }\n      }\n      display.setPixel(x, y, byte(out[0]), byte(out[1]), byte(out[2]));\n    }\n  // Drops running down the wet print.\n  if (ct > WASH && ct \u003c CYCLE)\n    for (const d of P.drops) {\n      const x = Math.round(d.x);\n      for (let j = 0; j \u003c 3; j++) {\n        const y = Math.round(d.y) - j;\n        if (y \u003c 0 || y >= H || y > (ct \u003c DRY ? washLine(ct) - 3 : H)) continue;\n        colour(P, S, y * W + x, x, y, ct, out);\n        const v = 40 - 12 * j;\n        display.setPixel(x, y, byte(out[0] + v), byte(out[1] + v), byte(out[2] + v));\n      }\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tone=0..1, Speed=0.2..3, Specimen=0..4, Exposure=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tone","min":0,"max":1,"about":"The washed print, from the plain Prussian blue on white at 0 through a violet to a tea-toned print at 1, brown-black on cream."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the printer works: at 2 one sheet takes 15 seconds from laying the specimens to sliding the dry print away, five of them in the sun; at 0.2 it takes two and a half minutes."},{"name":"Specimen","min":0,"max":4,"about":"What is laid on the sheet: a fern frond and a feather, two feathers over a strip of lace, dandelion clocks and grasses, two ferns, or a lace doily with a sprig; turning it washes up a print of that one, and after it the sheets follow in that order."},{"name":"Exposure","min":-1,"max":1,"about":"How long the sheet lies in the sun: at -1 the ground stays a pale blue and every barb and lace thread prints; at 0 the blue is full; at 1 it goes nearly navy and the thin parts burn through."}],"start":[0,2,0,0.06],"measures":{"motion":0.2407,"detail":0.0234,"edges":0.2171,"complexity":1.3748,"coverage":1,"colour":0.239,"drift":0.1842},"knobResponse":[0.1554,0.128,0.0957,0.1334]},{"slug":"datamosh","title":"Datamosh","family":"glitch","round":15,"note":"키프레임을 잃은 영상이에요. 노을과 격자 바닥이 제 움직임대로 블록째 밀려 녹아 흐르고, 장면이 바뀌면 새 그림이 옛 움직임을 따라 부서져요.","idea":"A video of a sunset and a spinning pinwheel plays with its keyframes dropped, so each frame only moves the last one's blocks along the picture's own motion and the image melts in blocky streams, swirls when the shot cuts, and comes back in partial slices now and then.","buttons":"K1 tap drops a whole clean keyframe, which then melts.","code":"// ===== Patternflow pattern =====\n// Title:   Datamosh\n// Family:  glitch\n// Idea:    A video of a sunset and a spinning pinwheel plays with its keyframes dropped, so each frame only moves the last one's blocks along the picture's own motion and the image melts in blocky streams, swirls when the shot cuts, and comes back in partial slices now and then.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: datamoshing, after Takeshi Murata's Monster Movie (2005)\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Block=8..16, Mosh=0..1\n//\n// Knob 1: Hue. Turns every colour of the video round the colour wheel, opening on a magenta and orange sunset over a cyan grid.\n// Knob 2: Speed. How fast the video runs, from a tenth of its speed to one and a half times, opening at full speed, where the ground nearest the viewer streams down about 45 LEDs a second.\n// Knob 3: Block. The codec's block size, from 8 LEDs square to 16; sizes that do not divide the panel leave cut blocks along its right and bottom edges, as a codec pads a frame.\n// Knob 4: Mosh. How long the decoder goes without a keyframe and how hard the motion pushes: a partial keyframe every 2 s of video at 0, every 12 s and twice the push at 1.\n// Buttons: K1 tap drops a whole clean keyframe, which then melts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Blocks are 8 LEDs or more, so there are never more than 8 by 16 of them.\nconst MAXB = (W / 8) * (H / 8);\n// The sunset's horizon row.\nconst HZ = 70;\nconst SHOT_A = 0;\nconst SHOT_B = 1;\n// How far, in LEDs a second, the encoder's vectors stray over flat sky.\nconst NOISE = 3;\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction mix(a, b, t, c) {\n  return a[c] + (b[c] - a[c]) * t;\n}\n\nconst SKY = [\n  [0, [20, 4, 56]],\n  [0.5, [120, 16, 124]],\n  [0.84, [235, 52, 96]],\n  [1, [255, 126, 48]],\n];\nconst BLADES = [\n  [255, 200, 0],\n  [240, 0, 140],\n  [0, 180, 240],\n];\n\n// The camera on the sunset sways slowly from side to side.\nfunction pan(t) {\n  return 9 * Math.sin(t * 0.45);\n}\n\nfunction panSpeed(t) {\n  return 9 * 0.45 * Math.cos(t * 0.45);\n}\n\n// One LED of the clean video, written into out at o: shot A is a sunset over\n// a grid running towards the viewer, shot B a pinwheel spinning on dark.\nfunction source(shot, x, y, t, out, o) {\n  let r = 0;\n  let g = 0;\n  let b = 0;\n  if (shot === SHOT_A) {\n    const px = pan(t);\n    if (y \u003c HZ) {\n      const v = y / HZ;\n      let i = 0;\n      while (i \u003c SKY.length - 2 && v > SKY[i + 1][0]) i++;\n      const f = (v - SKY[i][0]) / (SKY[i + 1][0] - SKY[i][0]);\n      r = mix(SKY[i][1], SKY[i + 1][1], f, 0);\n      g = mix(SKY[i][1], SKY[i + 1][1], f, 1);\n      b = mix(SKY[i][1], SKY[i + 1][1], f, 2);\n      // The sun, cut into bands that thicken towards the horizon and slide down.\n      const sx = 32 + px;\n      const sy = HZ - 18;\n      const dx = x - sx;\n      const dy = y - sy;\n      const R = 20;\n      if (dx * dx + dy * dy \u003c R * R) {\n        const u = dy / R;\n        const band = u > -0.15 && ((u * 5 - t * 0.6) % 1 + 1) % 1 \u003c 0.15 + 0.35 * (u + 0.15);\n        if (!band) {\n          const k = (u + 1) / 2;\n          r = 255;\n          g = 236 - 180 * k;\n          b = 70 + 80 * k;\n        }\n      }\n    } else {\n      // The ground: a dark plain, a cyan grid in perspective and the sun's\n      // reflection broken into ripples under it.\n      const d = y - HZ + 0.5;\n      const z = 60 / d;\n      const zl = z * 1.5 + t * 1.2;\n      const fz = zl - Math.floor(zl);\n      const wz = 0.9 * (60 / (d * d)) * 1.5 + 0.03;\n      const wx = ((x - 32 - px) * z) / 60;\n      const fx = wx * 1.4 - Math.floor(wx * 1.4);\n      const wl = (0.6 * z) / 60 + 0.02;\n      // Cross lines fade into the haze near the horizon; the lines running\n      // away from the viewer reach it.\n      const across = Math.max(0, 1 - Math.min(fz, 1 - fz) / wz) * smooth(5, 22, d);\n      const away = Math.max(0, 1 - Math.min(fx, 1 - fx) / (wl * 1.4)) * smooth(0, 4, d);\n      const L = Math.max(across, away);\n      const glow = Math.max(0, 1 - d / 14);\n      r = 10 + 110 * glow;\n      g = 2 + 14 * glow;\n      b = 26 + 64 * glow;\n      const half = 15 * (1 - d / 50);\n      if (half > 0 && Math.abs(x - 32 - px) \u003c half && Math.sin(d * 1.3 - t * 3 + Math.sin(x * 0.5) * 0.6) > 0.1 - 0.5 * (d / 50)) {\n        const f = 1 - d / 50;\n        r = 255 * f + r * (1 - f);\n        g = 110 * f + g * (1 - f);\n        b = 70 * f + b * (1 - f);\n      }\n      r = r * (1 - L) + 30 * L;\n      g = g * (1 - L) + 200 * L;\n      b = b * (1 - L) + 240 * L;\n    }\n  } else {\n    const dx = x - 32;\n    const dy = y - 64;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    r = 12;\n    g = 8;\n    b = 40;\n    // Rings round the pinwheel, far apart and faint.\n    if (((d / 9) % 1) \u003c 0.18) {\n      r = 50;\n      g = 16;\n      b = 100;\n    }\n    if (d \u003c 26) {\n      const a = Math.atan2(dy, dx) - t * 0.9;\n      const s = Math.floor(((a / (Math.PI * 2)) % 1 + 1) % 1 * 6);\n      const twist = d \u003c 6 ? -1 : s % 3;\n      if (twist >= 0) {\n        const c = BLADES[twist];\n        r = c[0];\n        g = c[1];\n        b = c[2];\n      } else {\n        r = 250;\n        g = 250;\n        b = 240;\n      }\n    }\n  }\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\n// The video's own motion at (x, y), in LEDs a second: what the encoder found\n// when it still had keyframes to compare against.\nfunction motion(shot, x, y, t, out) {\n  if (shot === SHOT_A) {\n    const pv = panSpeed(t);\n    if (y \u003c HZ) {\n      out[0] = pv;\n      // Inside the sun the bands slide down. The sky round it is one smooth\n      // ramp, where the encoder's search finds nothing to hold on to.\n      const dx = x - 32 - pan(t);\n      const dy = y - (HZ - 18);\n      const sun = dx * dx + dy * dy \u003c 400;\n      out[1] = sun && dy > -3 ? 2.4 : 0;\n      out[2] = sun ? 0 : 1;\n    } else {\n      // Ground running at the camera: everything below the horizon spreads\n      // away from the vanishing point, faster the nearer it is, and the\n      // near ground swings further with the camera than the far.\n      const d = y - HZ + 0.5;\n      const k = (d * 1.2) / 60 / 1.5;\n      out[0] = pv * (1 + d / 20) + (x - 32 - pan(t)) * k;\n      out[1] = d * k;\n      out[2] = 0;\n    }\n  } else {\n    const dx = x - 32;\n    const dy = y - 64;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    // Only the pinwheel turns; the dark round it stands still.\n    const w = d \u003c 27 ? 0.9 : 0;\n    out[0] = -dy * w;\n    out[1] = dx * w;\n    out[2] = 0;\n  }\n}\n\nexport function setup(params) {\n  params.buf = new Float32Array(N * 3);\n  params.old = new Float32Array(N * 3);\n  params.ax = new Float32Array(MAXB);\n  params.ay = new Float32Array(MAXB);\n  params.v = new Float32Array(3);\n  params.src = 0;\n  params.shot = SHOT_A;\n  params.cut = 3.5;\n  params.nextKey = 2.0;\n  params.size = 0;\n  params.keys = 0;\n  params.started = false;\n  params.m = new Float32Array(9);\n  params.hue = -1;\n}\n\n// Writes the clean video over a block, or over every block for a whole keyframe.\nfunction paintBlock(P, x0, y0, bs) {\n  const buf = P.buf;\n  const x1 = Math.min(W, x0 + bs);\n  const y1 = Math.min(H, y0 + bs);\n  for (let y = y0; y \u003c y1; y++) for (let x = x0; x \u003c x1; x++) source(P.shot, x + 0.5, y + 0.5, P.src, buf, (y * W + x) * 3);\n}\n\nfunction keyframe(P, whole) {\n  const bs = P.size;\n  const rows = Math.ceil(H / bs);\n  const cols = Math.ceil(W / bs);\n  P.keys++;\n  // A keyframe that arrives only partly: a band of slices comes through\n  // with a few blocks missing, and a scatter of single blocks elsewhere.\n  const r0 = Math.floor(hash(P.keys, 1) * rows * 0.7);\n  const r1 = Math.min(rows, r0 + Math.max(2, Math.floor(rows * (0.2 + 0.25 * hash(P.keys, 2)))));\n  for (let by = 0; by \u003c rows; by++)\n    for (let bx = 0; bx \u003c cols; bx++) {\n      const inBand = by >= r0 && by \u003c r1;\n      const p = hash(P.keys * 977 + bx, by);\n      if (whole || (inBand && p \u003c 0.85) || (!inBand && p \u003c 0.04)) {\n        paintBlock(P, bx * bs, by * bs, bs);\n        P.ax[by * cols + bx] = 0;\n        P.ay[by * cols + bx] = 0;\n      }\n    }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = Math.min(dt, 0.1);\n  const P = params;\n  const mosh = Math.max(0, Math.min(1, k[3]));\n  const bs = Math.max(8, Math.min(16, Math.round(k[2])));\n  const step = dt * Math.max(0.05, k[1]) * 0.5;\n  if (bs !== P.size) {\n    P.size = bs;\n    P.ax.fill(0);\n    P.ay.fill(0);\n  }\n  if (!P.started) {\n    P.started = true;\n    keyframe(P, true);\n  }\n  P.src += step;\n  // The video cuts between its two shots, and the encoder's keyframe at the\n  // cut is lost with the rest: the new shot's motion moves the old picture.\n  if (P.src >= P.cut) {\n    P.shot = P.shot === SHOT_A ? SHOT_B : SHOT_A;\n    const len = P.shot === SHOT_A ? 6 : 4.5;\n    P.cut = P.src + len;\n    // The new shot's motion has most of the shot to work on the old picture\n    // before a slice of the new one gets through.\n    P.nextKey = Math.max(P.nextKey, P.src + len * 0.6);\n  }\n  if (input.btnPressed && input.btnPressed[0]) keyframe(P, true);\n  else if (P.src >= P.nextKey) {\n    keyframe(P, false);\n    P.nextKey = P.src + 2 + 10 * mosh * mosh;\n  }\n\n  // Each block moves as one, by its own motion vector, rounded to whole\n  // LEDs; what is left over carries to the next frame.\n  const old = P.old;\n  const buf = P.buf;\n  old.set(buf);\n  const cols = Math.ceil(W / bs);\n  const rows = Math.ceil(H / bs);\n  const gain = (1 + mosh) * step;\n  const v = P.v;\n  for (let by = 0; by \u003c rows; by++)\n    for (let bx = 0; bx \u003c cols; bx++) {\n      const b = by * cols + bx;\n      const x0 = bx * bs;\n      const y0 = by * bs;\n      const x1 = Math.min(W, x0 + bs);\n      const y1 = Math.min(H, y0 + bs);\n      motion(P.shot, (x0 + x1) / 2, (y0 + y1) / 2, P.src, v);\n      // The encoder's search was never exact: each block's vector strays a\n      // little, and the stray changes every so often.\n      const e = Math.floor(P.src * 1.5 + hash(b, 7) * 3);\n      v[0] += (hash(b * 31 + e, 11) - 0.5) * NOISE * v[2];\n      v[1] += (hash(b * 31 + e, 13) - 0.5) * NOISE * v[2];\n      P.ax[b] += v[0] * gain;\n      P.ay[b] += v[1] * gain;\n      const mx = Math.trunc(P.ax[b]);\n      const my = Math.trunc(P.ay[b]);\n      if (mx === 0 && my === 0) continue;\n      P.ax[b] -= mx;\n      P.ay[b] -= my;\n      for (let y = y0; y \u003c y1; y++) {\n        // Past the frame's edge the decoder repeats the edge LEDs.\n        const sy = Math.max(0, Math.min(H - 1, y - my));\n        for (let x = x0; x \u003c x1; x++) {\n          const sx = Math.max(0, Math.min(W - 1, x - mx));\n          const o = (y * W + x) * 3;\n          const s = (sy * W + sx) * 3;\n          buf[o] = old[s];\n          buf[o + 1] = old[s + 1];\n          buf[o + 2] = old[s + 2];\n        }\n      }\n    }\n\n  if (k[0] !== P.hue) {\n    // Hue turns colours round the grey axis.\n    P.hue = k[0];\n    const a = k[0] * Math.PI * 2;\n    const c = Math.cos(a);\n    const s = Math.sin(a);\n    const q = (1 - c) / 3;\n    const r3 = Math.sqrt(1 / 3) * s;\n    const m = P.m;\n    m[0] = c + q;\n    m[1] = q - r3;\n    m[2] = q + r3;\n    m[3] = q + r3;\n    m[4] = c + q;\n    m[5] = q - r3;\n    m[6] = q - r3;\n    m[7] = q + r3;\n    m[8] = c + q;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const m = params.m;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      const r = buf[o];\n      const g = buf[o + 1];\n      const b = buf[o + 2];\n      display.setPixel(\n        x,\n        y,\n        Math.max(0, Math.min(255, r * m[0] + g * m[1] + b * m[2])),\n        Math.max(0, Math.min(255, r * m[3] + g * m[4] + b * m[5])),\n        Math.max(0, Math.min(255, r * m[6] + g * m[7] + b * m[8])),\n      );\n    }\n}\n","layer":{"id":"layer-datamosh","type":"code","name":"datamosh","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Datamosh\n// Family:  glitch\n// Idea:    A video of a sunset and a spinning pinwheel plays with its keyframes dropped, so each frame only moves the last one's blocks along the picture's own motion and the image melts in blocky streams, swirls when the shot cuts, and comes back in partial slices now and then.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: datamoshing, after Takeshi Murata's Monster Movie (2005)\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Block=8..16, Mosh=0..1\n//\n// Knob 1: Hue. Turns every colour of the video round the colour wheel, opening on a magenta and orange sunset over a cyan grid.\n// Knob 2: Speed. How fast the video runs, from a tenth of its speed to one and a half times, opening at full speed, where the ground nearest the viewer streams down about 45 LEDs a second.\n// Knob 3: Block. The codec's block size, from 8 LEDs square to 16; sizes that do not divide the panel leave cut blocks along its right and bottom edges, as a codec pads a frame.\n// Knob 4: Mosh. How long the decoder goes without a keyframe and how hard the motion pushes: a partial keyframe every 2 s of video at 0, every 12 s and twice the push at 1.\n// Buttons: K1 tap drops a whole clean keyframe, which then melts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Blocks are 8 LEDs or more, so there are never more than 8 by 16 of them.\nconst MAXB = (W / 8) * (H / 8);\n// The sunset's horizon row.\nconst HZ = 70;\nconst SHOT_A = 0;\nconst SHOT_B = 1;\n// How far, in LEDs a second, the encoder's vectors stray over flat sky.\nconst NOISE = 3;\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction mix(a, b, t, c) {\n  return a[c] + (b[c] - a[c]) * t;\n}\n\nconst SKY = [\n  [0, [20, 4, 56]],\n  [0.5, [120, 16, 124]],\n  [0.84, [235, 52, 96]],\n  [1, [255, 126, 48]],\n];\nconst BLADES = [\n  [255, 200, 0],\n  [240, 0, 140],\n  [0, 180, 240],\n];\n\n// The camera on the sunset sways slowly from side to side.\nfunction pan(t) {\n  return 9 * Math.sin(t * 0.45);\n}\n\nfunction panSpeed(t) {\n  return 9 * 0.45 * Math.cos(t * 0.45);\n}\n\n// One LED of the clean video, written into out at o: shot A is a sunset over\n// a grid running towards the viewer, shot B a pinwheel spinning on dark.\nfunction source(shot, x, y, t, out, o) {\n  let r = 0;\n  let g = 0;\n  let b = 0;\n  if (shot === SHOT_A) {\n    const px = pan(t);\n    if (y \u003c HZ) {\n      const v = y / HZ;\n      let i = 0;\n      while (i \u003c SKY.length - 2 && v > SKY[i + 1][0]) i++;\n      const f = (v - SKY[i][0]) / (SKY[i + 1][0] - SKY[i][0]);\n      r = mix(SKY[i][1], SKY[i + 1][1], f, 0);\n      g = mix(SKY[i][1], SKY[i + 1][1], f, 1);\n      b = mix(SKY[i][1], SKY[i + 1][1], f, 2);\n      // The sun, cut into bands that thicken towards the horizon and slide down.\n      const sx = 32 + px;\n      const sy = HZ - 18;\n      const dx = x - sx;\n      const dy = y - sy;\n      const R = 20;\n      if (dx * dx + dy * dy \u003c R * R) {\n        const u = dy / R;\n        const band = u > -0.15 && ((u * 5 - t * 0.6) % 1 + 1) % 1 \u003c 0.15 + 0.35 * (u + 0.15);\n        if (!band) {\n          const k = (u + 1) / 2;\n          r = 255;\n          g = 236 - 180 * k;\n          b = 70 + 80 * k;\n        }\n      }\n    } else {\n      // The ground: a dark plain, a cyan grid in perspective and the sun's\n      // reflection broken into ripples under it.\n      const d = y - HZ + 0.5;\n      const z = 60 / d;\n      const zl = z * 1.5 + t * 1.2;\n      const fz = zl - Math.floor(zl);\n      const wz = 0.9 * (60 / (d * d)) * 1.5 + 0.03;\n      const wx = ((x - 32 - px) * z) / 60;\n      const fx = wx * 1.4 - Math.floor(wx * 1.4);\n      const wl = (0.6 * z) / 60 + 0.02;\n      // Cross lines fade into the haze near the horizon; the lines running\n      // away from the viewer reach it.\n      const across = Math.max(0, 1 - Math.min(fz, 1 - fz) / wz) * smooth(5, 22, d);\n      const away = Math.max(0, 1 - Math.min(fx, 1 - fx) / (wl * 1.4)) * smooth(0, 4, d);\n      const L = Math.max(across, away);\n      const glow = Math.max(0, 1 - d / 14);\n      r = 10 + 110 * glow;\n      g = 2 + 14 * glow;\n      b = 26 + 64 * glow;\n      const half = 15 * (1 - d / 50);\n      if (half > 0 && Math.abs(x - 32 - px) \u003c half && Math.sin(d * 1.3 - t * 3 + Math.sin(x * 0.5) * 0.6) > 0.1 - 0.5 * (d / 50)) {\n        const f = 1 - d / 50;\n        r = 255 * f + r * (1 - f);\n        g = 110 * f + g * (1 - f);\n        b = 70 * f + b * (1 - f);\n      }\n      r = r * (1 - L) + 30 * L;\n      g = g * (1 - L) + 200 * L;\n      b = b * (1 - L) + 240 * L;\n    }\n  } else {\n    const dx = x - 32;\n    const dy = y - 64;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    r = 12;\n    g = 8;\n    b = 40;\n    // Rings round the pinwheel, far apart and faint.\n    if (((d / 9) % 1) \u003c 0.18) {\n      r = 50;\n      g = 16;\n      b = 100;\n    }\n    if (d \u003c 26) {\n      const a = Math.atan2(dy, dx) - t * 0.9;\n      const s = Math.floor(((a / (Math.PI * 2)) % 1 + 1) % 1 * 6);\n      const twist = d \u003c 6 ? -1 : s % 3;\n      if (twist >= 0) {\n        const c = BLADES[twist];\n        r = c[0];\n        g = c[1];\n        b = c[2];\n      } else {\n        r = 250;\n        g = 250;\n        b = 240;\n      }\n    }\n  }\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\n// The video's own motion at (x, y), in LEDs a second: what the encoder found\n// when it still had keyframes to compare against.\nfunction motion(shot, x, y, t, out) {\n  if (shot === SHOT_A) {\n    const pv = panSpeed(t);\n    if (y \u003c HZ) {\n      out[0] = pv;\n      // Inside the sun the bands slide down. The sky round it is one smooth\n      // ramp, where the encoder's search finds nothing to hold on to.\n      const dx = x - 32 - pan(t);\n      const dy = y - (HZ - 18);\n      const sun = dx * dx + dy * dy \u003c 400;\n      out[1] = sun && dy > -3 ? 2.4 : 0;\n      out[2] = sun ? 0 : 1;\n    } else {\n      // Ground running at the camera: everything below the horizon spreads\n      // away from the vanishing point, faster the nearer it is, and the\n      // near ground swings further with the camera than the far.\n      const d = y - HZ + 0.5;\n      const k = (d * 1.2) / 60 / 1.5;\n      out[0] = pv * (1 + d / 20) + (x - 32 - pan(t)) * k;\n      out[1] = d * k;\n      out[2] = 0;\n    }\n  } else {\n    const dx = x - 32;\n    const dy = y - 64;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    // Only the pinwheel turns; the dark round it stands still.\n    const w = d \u003c 27 ? 0.9 : 0;\n    out[0] = -dy * w;\n    out[1] = dx * w;\n    out[2] = 0;\n  }\n}\n\nexport function setup(params) {\n  params.buf = new Float32Array(N * 3);\n  params.old = new Float32Array(N * 3);\n  params.ax = new Float32Array(MAXB);\n  params.ay = new Float32Array(MAXB);\n  params.v = new Float32Array(3);\n  params.src = 0;\n  params.shot = SHOT_A;\n  params.cut = 3.5;\n  params.nextKey = 2.0;\n  params.size = 0;\n  params.keys = 0;\n  params.started = false;\n  params.m = new Float32Array(9);\n  params.hue = -1;\n}\n\n// Writes the clean video over a block, or over every block for a whole keyframe.\nfunction paintBlock(P, x0, y0, bs) {\n  const buf = P.buf;\n  const x1 = Math.min(W, x0 + bs);\n  const y1 = Math.min(H, y0 + bs);\n  for (let y = y0; y \u003c y1; y++) for (let x = x0; x \u003c x1; x++) source(P.shot, x + 0.5, y + 0.5, P.src, buf, (y * W + x) * 3);\n}\n\nfunction keyframe(P, whole) {\n  const bs = P.size;\n  const rows = Math.ceil(H / bs);\n  const cols = Math.ceil(W / bs);\n  P.keys++;\n  // A keyframe that arrives only partly: a band of slices comes through\n  // with a few blocks missing, and a scatter of single blocks elsewhere.\n  const r0 = Math.floor(hash(P.keys, 1) * rows * 0.7);\n  const r1 = Math.min(rows, r0 + Math.max(2, Math.floor(rows * (0.2 + 0.25 * hash(P.keys, 2)))));\n  for (let by = 0; by \u003c rows; by++)\n    for (let bx = 0; bx \u003c cols; bx++) {\n      const inBand = by >= r0 && by \u003c r1;\n      const p = hash(P.keys * 977 + bx, by);\n      if (whole || (inBand && p \u003c 0.85) || (!inBand && p \u003c 0.04)) {\n        paintBlock(P, bx * bs, by * bs, bs);\n        P.ax[by * cols + bx] = 0;\n        P.ay[by * cols + bx] = 0;\n      }\n    }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = Math.min(dt, 0.1);\n  const P = params;\n  const mosh = Math.max(0, Math.min(1, k[3]));\n  const bs = Math.max(8, Math.min(16, Math.round(k[2])));\n  const step = dt * Math.max(0.05, k[1]) * 0.5;\n  if (bs !== P.size) {\n    P.size = bs;\n    P.ax.fill(0);\n    P.ay.fill(0);\n  }\n  if (!P.started) {\n    P.started = true;\n    keyframe(P, true);\n  }\n  P.src += step;\n  // The video cuts between its two shots, and the encoder's keyframe at the\n  // cut is lost with the rest: the new shot's motion moves the old picture.\n  if (P.src >= P.cut) {\n    P.shot = P.shot === SHOT_A ? SHOT_B : SHOT_A;\n    const len = P.shot === SHOT_A ? 6 : 4.5;\n    P.cut = P.src + len;\n    // The new shot's motion has most of the shot to work on the old picture\n    // before a slice of the new one gets through.\n    P.nextKey = Math.max(P.nextKey, P.src + len * 0.6);\n  }\n  if (input.btnPressed && input.btnPressed[0]) keyframe(P, true);\n  else if (P.src >= P.nextKey) {\n    keyframe(P, false);\n    P.nextKey = P.src + 2 + 10 * mosh * mosh;\n  }\n\n  // Each block moves as one, by its own motion vector, rounded to whole\n  // LEDs; what is left over carries to the next frame.\n  const old = P.old;\n  const buf = P.buf;\n  old.set(buf);\n  const cols = Math.ceil(W / bs);\n  const rows = Math.ceil(H / bs);\n  const gain = (1 + mosh) * step;\n  const v = P.v;\n  for (let by = 0; by \u003c rows; by++)\n    for (let bx = 0; bx \u003c cols; bx++) {\n      const b = by * cols + bx;\n      const x0 = bx * bs;\n      const y0 = by * bs;\n      const x1 = Math.min(W, x0 + bs);\n      const y1 = Math.min(H, y0 + bs);\n      motion(P.shot, (x0 + x1) / 2, (y0 + y1) / 2, P.src, v);\n      // The encoder's search was never exact: each block's vector strays a\n      // little, and the stray changes every so often.\n      const e = Math.floor(P.src * 1.5 + hash(b, 7) * 3);\n      v[0] += (hash(b * 31 + e, 11) - 0.5) * NOISE * v[2];\n      v[1] += (hash(b * 31 + e, 13) - 0.5) * NOISE * v[2];\n      P.ax[b] += v[0] * gain;\n      P.ay[b] += v[1] * gain;\n      const mx = Math.trunc(P.ax[b]);\n      const my = Math.trunc(P.ay[b]);\n      if (mx === 0 && my === 0) continue;\n      P.ax[b] -= mx;\n      P.ay[b] -= my;\n      for (let y = y0; y \u003c y1; y++) {\n        // Past the frame's edge the decoder repeats the edge LEDs.\n        const sy = Math.max(0, Math.min(H - 1, y - my));\n        for (let x = x0; x \u003c x1; x++) {\n          const sx = Math.max(0, Math.min(W - 1, x - mx));\n          const o = (y * W + x) * 3;\n          const s = (sy * W + sx) * 3;\n          buf[o] = old[s];\n          buf[o + 1] = old[s + 1];\n          buf[o + 2] = old[s + 2];\n        }\n      }\n    }\n\n  if (k[0] !== P.hue) {\n    // Hue turns colours round the grey axis.\n    P.hue = k[0];\n    const a = k[0] * Math.PI * 2;\n    const c = Math.cos(a);\n    const s = Math.sin(a);\n    const q = (1 - c) / 3;\n    const r3 = Math.sqrt(1 / 3) * s;\n    const m = P.m;\n    m[0] = c + q;\n    m[1] = q - r3;\n    m[2] = q + r3;\n    m[3] = q + r3;\n    m[4] = c + q;\n    m[5] = q - r3;\n    m[6] = q - r3;\n    m[7] = q + r3;\n    m[8] = c + q;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const m = params.m;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      const r = buf[o];\n      const g = buf[o + 1];\n      const b = buf[o + 2];\n      display.setPixel(\n        x,\n        y,\n        Math.max(0, Math.min(255, r * m[0] + g * m[1] + b * m[2])),\n        Math.max(0, Math.min(255, r * m[3] + g * m[4] + b * m[5])),\n        Math.max(0, Math.min(255, r * m[6] + g * m[7] + b * m[8])),\n      );\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Block=8..16, Mosh=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour of the video round the colour wheel, opening on a magenta and orange sunset over a cyan grid."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the video runs, from a tenth of its speed to one and a half times, opening at full speed, where the ground nearest the viewer streams down about 45 LEDs a second."},{"name":"Block","min":8,"max":16,"about":"The codec's block size, from 8 LEDs square to 16; sizes that do not divide the panel leave cut blocks along its right and bottom edges, as a codec pads a frame."},{"name":"Mosh","min":0,"max":1,"about":"How long the decoder goes without a keyframe and how hard the motion pushes: a partial keyframe every 2 s of video at 0, every 12 s and twice the push at 1."}],"start":[0,2,8,0.06],"measures":{"motion":0.3661,"detail":0.0404,"edges":0.6611,"complexity":0.3641,"coverage":1,"colour":0.4625,"drift":0.1386},"knobResponse":[0.3092,0.1339,0.1128,0.1158]},{"slug":"day-cycle","title":"Day and Night","family":"weather","round":2,"note":"호수 위 작은 집이 하루를 지켜봐요. 해가 언덕 뒤로 지면 하늘이 노을을 지나 별과 달로 넘어가고 창에 하나씩 불이 켜져요.","idea":"A house above a lake watches one whole day go by: the sun climbs and sets behind the hills, the sky runs through dusk to stars and a moon, and the windows light up for the night.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Day and Night\n// Family:  weather\n// Idea:    A house above a lake watches one whole day go by: the sun climbs and sets behind the hills, the sky runs through dusk to stars and a moon, and the windows light up for the night.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Time=0.2..8, Clouds=0.15..1, Sun path=-1..1\n//\n// Knob 1: Season. Spring, summer, autumn and winter in turn. Summer nights have fireflies, and in winter snow falls and lies on the roof.\n// Knob 2: Time. How fast the day goes, from ten minutes a day to fifteen seconds; a day takes a minute where it starts.\n// Knob 3: Clouds. From a few small clouds to a sky that is nearly overcast.\n// Knob 4: Sun path. How high the sun climbs, from a winter sun that skims the hills to a summer one that reaches the top.\n\nconst W = 64;\nconst H = 128;\n// The sun and moon rise and set on this row, behind the hills.\nconst HORIZON = 80;\n// The far edge of the lake.\nconst LAKE = 86;\nconst TW = 128;\nconst TH = 64;\nconst STARS = 56;\nconst FLAKES = 60;\nconst FLIES = 18;\n\n// Per season: sky top, sky low, far hills, near hills, meadow, meadow shade, flowers,\n// leaves, blossom, wall, roof, lake, roof cap, trunk.\nconst SEASONS = [\n  [0x4a8ceb, 0xaad7fa, 0x6ea096, 0x4e9a5a, 0x60be46, 0x3f9634, 0xffaad2, 0x78c85a, 0xffbedc, 0xe6d7b4, 0xbe3c30, 0x3c78b4, 0xbe3c30, 0x6e4628],\n  [0x286ee6, 0x8cc8fa, 0x50867a, 0x2e7a3c, 0x34a032, 0x247826, 0xffe650, 0x2e8c2e, 0x46aa3c, 0xe6d7b4, 0xbe3c30, 0x2864b4, 0xbe3c30, 0x6e4628],\n  [0x5082d2, 0xc8d7eb, 0x8c8278, 0x8c6e3c, 0xc8a03c, 0x9c7a2a, 0xe65a1e, 0xeb7a1e, 0xffc83c, 0xe6d7b4, 0xa03228, 0x3c6496, 0xa03228, 0x5a3a22],\n  [0x6e96d2, 0xd2e1f0, 0xaab9d2, 0x8ca0b9, 0xd2dcec, 0xaebcd2, 0xffffff, 0x466e5a, 0xe6f0fa, 0xd7c8aa, 0x8c3228, 0x5a78a0, 0xf0f5ff, 0x4a3422],\n];\nconst NCOL = 14;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction lattice(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const a = hash(x0 + seed, iy) * (1 - ux) + hash(x1 + seed, iy) * ux;\n  const b = hash(x0 + seed, iy + 1) * (1 - ux) + hash(x1 + seed, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction smooth(a, b, x) {\n  const t = Math.max(0, Math.min(1, (x - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Sky colours by the sun's height, from deep night to full day: top then low, as 0xRRGGBB.\nconst SKY_E = [-1, -0.22, -0.1, -0.02, 0.06, 0.16, 0.32];\nconst SKY_TOP = [0x060a26, 0x060a26, 0x141c4c, 0x2c3a82, 0x4a64b4, 0, 0];\nconst SKY_LOW = [0x18204e, 0x18204e, 0x5a3c78, 0xd2645a, 0xff9650, 0xffc88c, 0];\n\nexport function setup(params) {\n  params.t = 0;\n  // Where the day stands when the pattern starts: late afternoon, a few seconds before the sun meets the hills.\n  params.phase = 0.625;\n  params.cloudX = 0;\n  params.pal = new Float32Array(NCOL * 3);\n  params.seasons = SEASONS.map((list) => {\n    const out = new Float32Array(NCOL * 3);\n    list.forEach((c, i) => {\n      out[i * 3] = (c >> 16) & 255;\n      out[i * 3 + 1] = (c >> 8) & 255;\n      out[i * 3 + 2] = c & 255;\n    });\n    return out;\n  });\n  params.buf = new Float32Array(W * H * 3);\n  params.rowR = new Float32Array(H);\n  params.rowG = new Float32Array(H);\n  params.rowB = new Float32Array(H);\n  params.light = new Float32Array(3);\n  params.top = new Float32Array(3);\n  params.low = new Float32Array(3);\n\n  params.far = new Int16Array(W);\n  params.mid = new Int16Array(W);\n  params.near = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    params.far[x] = Math.round(61 + 9 * noise1(x * 0.06 + 1, 3) + 4 * noise1(x * 0.17 + 7, 5));\n    params.mid[x] = Math.round(73 + 7 * noise1(x * 0.08 + 20, 9) + 2 * noise1(x * 0.3, 11));\n    // The near shore climbs to the left, where the house stands; the lake opens out to the right.\n    params.near[x] = Math.round(95 + 9 * smooth(16, 50, x) + 1.5 * noise1(x * 0.25 + 4, 13));\n  }\n  params.tex = new Float32Array(TW * TH);\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c TW; x++)\n      params.tex[y * TW + x] = lattice(x / 12.8, y / 8, TW / 12.8, 21) * 0.68 + lattice(x / 6.4, y / 4.5, TW / 6.4, 37) * 0.32;\n  params.sx = new Int16Array(STARS);\n  params.sy = new Int16Array(STARS);\n  params.sb = new Float32Array(STARS);\n  for (let i = 0; i \u003c STARS; i++) {\n    params.sx[i] = Math.floor(hash(i, 71) * W);\n    params.sy[i] = Math.floor(hash(i, 73) * 64);\n    params.sb[i] = 0.45 + 0.55 * hash(i, 79) * hash(i, 83);\n  }\n  params.fx = new Float32Array(FLAKES);\n  params.fy = new Float32Array(FLAKES);\n  params.fs = new Float32Array(FLAKES);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    params.fx[i] = Math.random() * W;\n    params.fy[i] = Math.random() * H;\n    params.fs[i] = 0.6 + Math.random() * 0.8;\n  }\n  params.gx = new Float32Array(FLIES);\n  params.gy = new Float32Array(FLIES);\n  for (let i = 0; i \u003c FLIES; i++) {\n    params.gx[i] = Math.random() * W;\n    params.gy[i] = 92 + Math.random() * 32;\n  }\n  // Flowers in the meadow, fixed, more of them nearer.\n  params.fl = new Int16Array(70 * 2);\n  for (let i = 0; i \u003c 70; i++) {\n    const x = Math.floor(hash(i, 91) * W);\n    const y = params.near[x] + 3 + Math.floor(Math.pow(hash(i, 93), 0.7) * (H - params.near[x] - 4));\n    params.fl[i * 2] = x;\n    params.fl[i * 2 + 1] = y;\n  }\n}\n\nfunction mixHex(out, a, b, u) {\n  out[0] = ((a >> 16) & 255) * (1 - u) + ((b >> 16) & 255) * u;\n  out[1] = ((a >> 8) & 255) * (1 - u) + ((b >> 8) & 255) * u;\n  out[2] = (a & 255) * (1 - u) + (b & 255) * u;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.15, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  // A day lasts 120 / Time seconds: a minute where the knob starts. The clock slows round\n  // sunrise and sunset and hurries through noon and midnight, so the colours get the time.\n  const e = Math.sin((params.phase - 0.25) * Math.PI * 2);\n  const pace = (0.55 + 0.9 * Math.abs(e)) / 1.123;\n  params.phase = (params.phase + (dt * Math.max(0.05, k[1]) * pace) / 120) % 1;\n  params.cloudX += dt * (0.9 + 0.25 * k[1]);\n  params.season = Math.max(0, Math.min(1, k[0]));\n  params.clouds = k[2];\n  params.arc = 46 + 28 * Math.max(-1, Math.min(1, k[3]));\n\n  // Season: four palettes in a row, each held a while before it turns into the next.\n  const q = params.season * 3;\n  const a = Math.min(2, Math.floor(q));\n  const m = smooth(0.2, 0.8, q - a);\n  const pa = params.seasons[a];\n  const pb = params.seasons[a + 1];\n  for (let i = 0; i \u003c NCOL * 3; i++) params.pal[i] = pa[i] * (1 - m) + pb[i] * m;\n  params.snow = smooth(0.78, 0.95, params.season);\n  // Summer nights have fireflies.\n  params.summer = Math.max(0, 1 - Math.abs(params.season - 0.33) / 0.16);\n\n  if (params.snow > 0) {\n    for (let i = 0; i \u003c FLAKES; i++) {\n      params.fy[i] += dt * 7 * params.fs[i];\n      params.fx[i] += dt * (Math.sin(params.t * 0.9 + i * 1.7) * 3 + 1.2);\n      if (params.fy[i] > H) {\n        params.fy[i] -= H + 2;\n        params.fx[i] = Math.random() * W;\n      }\n      if (params.fx[i] >= W) params.fx[i] -= W;\n    }\n  }\n  if (params.summer > 0) {\n    for (let i = 0; i \u003c FLIES; i++) {\n      params.gx[i] += dt * (noise1(params.t * 0.4 + i * 9.3, 17) - 0.5) * 8;\n      params.gy[i] += dt * (noise1(params.t * 0.35 + i * 5.1, 19) - 0.5) * 6;\n      if (params.gx[i] \u003c 0) params.gx[i] += W;\n      if (params.gx[i] >= W) params.gx[i] -= W;\n      params.gy[i] = Math.max(88, Math.min(H - 2, params.gy[i]));\n    }\n  }\n}\n\n// One soft point spread over its 2x2 neighbours, so it glides instead of hopping LED to LED.\nfunction splat(buf, x, y, r, g, b) {\n  const x0 = Math.floor(x - 0.5);\n  const y0 = Math.floor(y - 0.5);\n  const fx = x - 0.5 - x0;\n  const fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++) {\n    const yy = y0 + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    const wy = j === 0 ? 1 - fy : fy;\n    for (let i = 0; i \u003c 2; i++) {\n      const xx = x0 + i;\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = wy * (i === 0 ? 1 - fx : fx);\n      const o = (yy * W + xx) * 3;\n      buf[o] = buf[o] * (1 - w) + Math.max(buf[o], r) * w;\n      buf[o + 1] = buf[o + 1] * (1 - w) + Math.max(buf[o + 1], g) * w;\n      buf[o + 2] = buf[o + 2] * (1 - w) + Math.max(buf[o + 2], b) * w;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const pal = params.pal;\n  const p = params.phase;\n  const t = params.t;\n  // The sun's height, -1 at midnight to 1 at noon. It crosses the panel at an even pace and climbs on a sine.\n  const e = Math.sin((p - 0.25) * Math.PI * 2);\n  const dayU = (p - 0.25) / 0.5;\n  const sunX = 4 + 56 * dayU;\n  const sunY = HORIZON - e * params.arc;\n  const nightU = ((p + 0.25) % 1) / 0.5;\n  const moonX = 4 + 56 * nightU;\n  const moonY = HORIZON + e * params.arc * 0.85;\n  const cover = params.clouds;\n  // How high the sun really stands. A low arc gives a weaker, warmer day from morning to evening.\n  const el = e > 0 ? e * (0.45 + (0.55 * (params.arc - 18)) / 56) : e;\n\n  // Daylight on the land: full by day, warm as the sun gets low, moonlit blue at night.\n  const day = smooth(-0.14, 0.22, el);\n  const gold = smooth(-0.08, 0.04, el) * (1 - smooth(0.18, 0.42, el));\n  // Cloud dims the land, and so does a low sun in front of us: the near side of everything is in shade.\n  const dim = (1 - cover * 0.3) * (1 - gold * 0.22);\n  const light = params.light;\n  // The warm cast stays light: a dim orange hill reads as brown on the panel.\n  light[0] = (day * (1 + gold * 0.08) + (1 - day) * 0.3) * dim;\n  light[1] = (day * (1 - gold * 0.08) + (1 - day) * 0.34) * dim;\n  light[2] = (day * (1 - gold * 0.3) + (1 - day) * 0.58) * dim;\n\n  // Sky: the keyframe pair for this sun height, then a gradient down to the horizon.\n  let s = 0;\n  while (s \u003c SKY_E.length - 2 && el > SKY_E[s + 1]) s++;\n  const u = smooth(SKY_E[s], SKY_E[s + 1], el);\n  const top = params.top;\n  const low = params.low;\n  const topA = SKY_TOP[s] || hexOf(pal, 0);\n  const topB = SKY_TOP[s + 1] || hexOf(pal, 0);\n  const lowA = SKY_LOW[s] || hexOf(pal, 1);\n  const lowB = SKY_LOW[s + 1] || hexOf(pal, 1);\n  mixHex(top, topA, topB, u);\n  mixHex(low, lowA, lowB, u);\n  // Cloud cover greys the sky.\n  const grey = cover * cover * 0.55;\n  const avgT = (top[0] + top[1] + top[2]) / 3;\n  const avgL = (low[0] + low[1] + low[2]) / 3;\n  for (let c = 0; c \u003c 3; c++) {\n    top[c] = top[c] * (1 - grey) + avgT * grey * 0.9;\n    low[c] = low[c] * (1 - grey) + avgL * grey * 0.9;\n  }\n  for (let y = 0; y \u003c LAKE; y++) {\n    const v = Math.pow(Math.min(1, y / HORIZON), 1.6);\n    params.rowR[y] = top[0] + (low[0] - top[0]) * v;\n    params.rowG[y] = top[1] + (low[1] - top[1]) * v;\n    params.rowB[y] = top[2] + (low[2] - top[2]) * v;\n  }\n  // The glow round a low sun, warm, spread wide along the horizon.\n  const glowK = (0.2 + 0.7 * gold) * (1 - cover * 0.6) * smooth(-0.2, 0, el);\n  for (let y = 0; y \u003c LAKE; y++) {\n    const o0 = y * W * 3;\n    const dy = (y - sunY) * 1.4;\n    const r0 = params.rowR[y];\n    const g0 = params.rowG[y];\n    const b0 = params.rowB[y];\n    const c = 140 * glowK;\n    const d0 = 140 + dy * dy;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x - sunX;\n      const g = c / (d0 + dx * dx);\n      const o = o0 + x * 3;\n      // Blended toward warm rather than added, so a bright sky does not burn white round the sun.\n      buf[o] = r0 + (255 - r0) * g;\n      buf[o + 1] = g0 + (178 - g0) * g;\n      buf[o + 2] = b0 + (84 - b0) * g * 0.8;\n    }\n  }\n\n  // Stars come out as the sky darkens; a few twinkle.\n  const starVis = smooth(-0.04, -0.2, e);\n  if (starVis > 0) {\n    for (let i = 0; i \u003c STARS; i++) {\n      const x = params.sx[i];\n      const y = params.sy[i];\n      const b = starVis * params.sb[i] * (0.75 + 0.25 * Math.sin(t * (2 + i * 0.13) + i));\n      const o = (y * W + x) * 3;\n      buf[o] = Math.max(buf[o], 200 * b);\n      buf[o + 1] = Math.max(buf[o + 1], 210 * b);\n      buf[o + 2] = Math.max(buf[o + 2], 255 * b);\n    }\n  }\n\n  // The sun: a hard disc, yellow-white high up, orange as it nears the hills.\n  if (e > -0.12) {\n    const low = 1 - smooth(0.05, 0.4, el);\n    const sr = 255;\n    const sg = 238 - 88 * low;\n    const sb = 150 - 110 * low;\n    disc(buf, sunX, sunY, 3.6, sr, sg, sb);\n  }\n  // The moon: a pale crescent, with the dark side cut away by a second disc.\n  if (e \u003c 0.12) {\n    const mv = smooth(0.12, -0.05, e);\n    moon(buf, moonX, moonY, mv);\n  }\n\n  // Clouds: a baked texture drifting left to right, cut at a level set by Clouds.\n  const tex = params.tex;\n  const thr = 0.78 - 0.5 * cover;\n  const cx0 = params.cloudX;\n  const ix = Math.floor(cx0);\n  const fx = cx0 - ix;\n  const base = ((ix % TW) + TW) % TW;\n  // White by day and greyer the more of them there are, salmon while the sun is low, slate under the moon.\n  const lit = Math.max(day, gold);\n  const grey2 = 1 - cover * 0.28;\n  // A heavy sky is grey even at sunset.\n  const pink = gold * (1 - cover * 0.65);\n  const cr = 58 * (1 - lit) + (228 * grey2 * (1 - pink) + 255 * pink) * lit;\n  const cg = 62 * (1 - lit) + (230 * grey2 * (1 - pink) + 178 * pink) * lit;\n  const cbb = 96 * (1 - lit) + (236 * grey2 * (1 - pink) + 172 * pink) * lit;\n  for (let y = 2; y \u003c 62; y++) {\n    const band = smooth(2, 12, y) * (1 - smooth(44, 62, y));\n    if (band \u003c= 0) continue;\n    const row = y * TW;\n    const up = (y - 2) * TW;\n    const bandUp = smooth(2, 12, y - 2) * (1 - smooth(44, 62, y - 2));\n    for (let x = 0; x \u003c W; x++) {\n      let xa = base - x;\n      if (xa \u003c 0) xa += TW;\n      const xb = xa + 1 === TW ? 0 : xa + 1;\n      const n = (tex[row + xa] * (1 - fx) + tex[row + xb] * fx) * (0.55 + 0.45 * band);\n      const a = smooth(thr, thr + 0.07, n);\n      if (a \u003c= 0) continue;\n      // Where the cloud is thicker just above, this is its underside, and a shade darker.\n      const nUp = (tex[up + xa] * (1 - fx) + tex[up + xb] * fx) * (0.55 + 0.45 * bandUp);\n      const lift = 0.86 + 0.14 * Math.max(-1, Math.min(1, (n - nUp) * 9));\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + cr * lift * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + cg * lift * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + cbb * lift * a;\n    }\n  }\n\n  // Hills: the far ones hazed toward the sky, the near ones in their own colour. With the\n  // sun low behind them they go to a cool silhouette instead of a lit brown.\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  const back = gold * 0.7;\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = params.far[x]; y \u003c LAKE; y++) {\n      const o = (y * W + x) * 3;\n      const near = y >= params.mid[x];\n      const ci = near ? 3 : 2;\n      const haze = near ? 0.12 : 0.4 * (1 - back * 0.5);\n      const dark = near ? back * 0.75 : back;\n      buf[o] = ((pal[ci * 3] * (1 - haze) + low[0] * haze) * lr) * (1 - dark) + 46 * dark;\n      buf[o + 1] = ((pal[ci * 3 + 1] * (1 - haze) + low[1] * haze) * lg) * (1 - dark) + 50 * dark;\n      buf[o + 2] = ((pal[ci * 3 + 2] * (1 - haze) + low[2] * haze) * lb) * (1 - dark) + 84 * dark;\n    }\n  }\n\n  // The lake mirrors what is above it, darker and bluer, broken by a slow shimmer.\n  const wr = pal[33] * 0.18 * lr;\n  const wg = pal[34] * 0.18 * lg;\n  const wb = pal[35] * 0.2 * lb;\n  for (let y = LAKE; y \u003c H; y++) {\n    // Squeezed upward, so the water shows the sky over the hills as well as the hills.\n    const my = Math.round(LAKE - 1 - (y - LAKE) * 1.7);\n    if (my \u003c 0) break;\n    const wob = Math.sin(y * 1.3 + t * 1.6) * 0.6;\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= params.near[x]) continue;\n      let sx = Math.round(x + wob * Math.sin(x * 0.4 + y));\n      if (sx \u003c 0) sx = 0;\n      if (sx >= W) sx = W - 1;\n      const so = (my * W + sx) * 3;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[so] * 0.55 + wr;\n      buf[o + 1] = buf[so + 1] * 0.6 + wg;\n      buf[o + 2] = buf[so + 2] * 0.66 + wb;\n    }\n  }\n  // A path of glitter under the sun or the moon, on the water.\n  const glitSun = e > -0.02 ? (1 - smooth(0.2, 0.6, el)) * (1 - cover * 0.7) : 0;\n  const glitMoon = e \u003c -0.05 ? smooth(-0.05, -0.25, e) * 0.5 : 0;\n  const gx = glitSun > 0 ? sunX : moonX;\n  const gk = Math.max(glitSun, glitMoon);\n  if (gk > 0.02) {\n    for (let y = LAKE + 1; y \u003c 108; y++) {\n      // Each row of water holds one short dash that slides to and fro about the light's line.\n      const half = 0.8 + (y - LAKE) * 0.12 + 0.8 * Math.sin(y * 2.3 + t * 2.1);\n      const mid = gx + Math.sin(y * 3.7 + t * 1.3) * (1 + (y - LAKE) * 0.08);\n      // A weak light breaks the path into fewer dashes rather than dimmer ones.\n      if (Math.sin(y * 5.1 + t * 2.7) \u003c 1.2 - 1.6 * gk) continue;\n      for (let x = Math.max(0, Math.round(mid - half)); x \u003c= Math.min(W - 1, Math.round(mid + half)); x++) {\n        if (y >= params.near[x]) continue;\n        const o = (y * W + x) * 3;\n        // Never dimmer than about two thirds: a dim gold dash on the water reads as tan.\n        const b = 0.62 + 0.38 * gk;\n        buf[o] = Math.max(buf[o], (glitSun > 0 ? 255 : 200) * b);\n        buf[o + 1] = Math.max(buf[o + 1], (glitSun > 0 ? 226 : 210) * b);\n        buf[o + 2] = Math.max(buf[o + 2], (glitSun > 0 ? 150 : 240) * b);\n      }\n    }\n  }\n\n  // The near meadow, a shade darker toward us, with its flowers.\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = params.near[x]; y \u003c H; y++) {\n      const v = smooth(params.near[x], H, y);\n      const o = (y * W + x) * 3;\n      buf[o] = (pal[12] * (1 - v) + pal[15] * v) * lr;\n      buf[o + 1] = (pal[13] * (1 - v) + pal[16] * v) * lg;\n      buf[o + 2] = (pal[14] * (1 - v) + pal[17] * v) * lb;\n    }\n  }\n  for (let i = 0; i \u003c 70; i++) {\n    const o = (params.fl[i * 2 + 1] * W + params.fl[i * 2]) * 3;\n    buf[o] = pal[18] * lr;\n    buf[o + 1] = pal[19] * lg;\n    buf[o + 2] = pal[20] * lb;\n  }\n\n  tree(buf, pal, params, 27, light);\n  house(buf, pal, params, light, el, p);\n\n  const flies = params.summer * (1 - day);\n  if (flies > 0.02) {\n    for (let i = 0; i \u003c FLIES; i++) {\n      const blink = Math.max(0, Math.sin(t * (1.3 + i * 0.07) + i * 2.4));\n      const b = flies * blink * blink;\n      if (b \u003c 0.05) continue;\n      // Drawn past full so the point is still bright once it is shared out over four LEDs.\n      splat(buf, params.gx[i], params.gy[i], 330 * b, 400 * b, 120 * b);\n    }\n  }\n  if (params.snow > 0.02) {\n    // Snow catches whatever light there is: white by day, blue under the moon.\n    const k = params.snow;\n    for (let i = 0; i \u003c FLAKES; i++) {\n      const v = k * (0.65 + 0.35 * params.fs[i] / 1.4);\n      splat(buf, params.fx[i], params.fy[i], 250 * v * Math.min(1, lr * 1.3), 250 * v * Math.min(1, lg * 1.3), 255 * v * Math.min(1, lb * 1.3));\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction hexOf(pal, i) {\n  return (Math.round(pal[i * 3]) \u003c\u003c 16) | (Math.round(pal[i * 3 + 1]) \u003c\u003c 8) | Math.round(pal[i * 3 + 2]);\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// A disc with a one-LED soft rim, so it moves without stepping. The hills, drawn after it, hide it as it sets.\nfunction disc(buf, cx, cy, r, cr, cg, cb) {\n  const x0 = Math.max(0, Math.floor(cx - r - 1));\n  const x1 = Math.min(W - 1, Math.ceil(cx + r + 1));\n  const y0 = Math.max(0, Math.floor(cy - r - 1));\n  const y1 = Math.min(HORIZON + 2, Math.ceil(cy + r + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - cy;\n      const a = Math.max(0, Math.min(1, r - Math.sqrt(px * px + py * py) + 0.5));\n      if (a \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + cr * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + cg * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + cb * a;\n    }\n}\n\nfunction moon(buf, cx, cy, k) {\n  const r = 3.2;\n  const x0 = Math.max(0, Math.floor(cx - r - 1));\n  const x1 = Math.min(W - 1, Math.ceil(cx + r + 1));\n  const y0 = Math.max(0, Math.floor(cy - r - 1));\n  const y1 = Math.min(HORIZON + 2, Math.ceil(cy + r + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - cy;\n      const d = Math.sqrt(px * px + py * py);\n      const cut = Math.sqrt((px + 2.4) * (px + 2.4) + (py - 1) * (py - 1));\n      const a = Math.max(0, Math.min(1, r - d + 0.5)) * Math.max(0, Math.min(1, cut - r + 0.5)) * k;\n      if (a \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + 240 * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + 236 * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + 205 * a;\n    }\n}\n\nfunction tree(buf, pal, params, tx, light) {\n  const base = params.near[tx] + 1;\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  for (let y = base - 7; y \u003c base; y++) {\n    put(buf, tx, y, pal[39] * lr, pal[40] * lg, pal[41] * lb);\n    put(buf, tx + 1, y, pal[39] * lr * 0.8, pal[40] * lg * 0.8, pal[41] * lb * 0.8);\n  }\n  const cy = base - 12;\n  for (let y = cy - 6; y \u003c= cy + 5; y++)\n    for (let x = tx - 6; x \u003c= tx + 7; x++) {\n      const dx = (x - tx - 0.5) / 6.2;\n      const dy = (y - cy) / 5.6;\n      const edge = 0.12 * Math.sin(x * 2.1 + y * 1.3);\n      if (dx * dx + dy * dy > 1 + edge) continue;\n      // The side away from the light is a shade darker, and the crown is speckled with blossom or fruit.\n      const shade = 0.78 + 0.22 * smooth(1, -1, dx + dy);\n      const dot = hash(x * 7 + 3, y * 5 + 1) \u003c 0.18;\n      const c = dot ? 24 : 21;\n      put(buf, x, y, pal[c] * shade * lr, pal[c + 1] * shade * lg, pal[c + 2] * shade * lb);\n    }\n}\n\nfunction house(buf, pal, params, light, e, p) {\n  const hx = 5;\n  const g = params.near[hx + 5] + 1;\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  const snow = params.snow;\n  // Walls.\n  for (let y = g - 7; y \u003c g; y++)\n    for (let x = hx; x \u003c hx + 11; x++) {\n      const side = x >= hx + 8 ? 0.82 : 1;\n      put(buf, x, y, pal[27] * lr * side, pal[28] * lg * side, pal[29] * lb * side);\n    }\n  // Roof: a triangle a little wider than the walls, with snow along its edge in winter.\n  for (let r = 0; r \u003c 7; r++) {\n    const y = g - 8 - r;\n    const half = 6.5 - r;\n    for (let x = Math.ceil(hx + 5 - half); x \u003c= Math.floor(hx + 5 + half); x++) {\n      const rim = r === 6 || Math.abs(x - (hx + 5)) >= half - 1;\n      const cap = rim ? snow : snow * 0.35;\n      const ri = pal[30] * (1 - cap) + pal[36] * cap;\n      const gi = pal[31] * (1 - cap) + pal[37] * cap;\n      const bi = pal[32] * (1 - cap) + pal[38] * cap;\n      put(buf, x, y, ri * lr, gi * lg, bi * lb);\n    }\n  }\n  // Chimney.\n  for (let y = g - 14; y \u003c g - 10; y++) put(buf, hx + 8, y, 120 * lr, 70 * lg, 60 * lb);\n  // Door.\n  for (let y = g - 4; y \u003c g; y++) put(buf, hx + 5, y, pal[39] * lr, pal[40] * lg, pal[41] * lb);\n  // Windows: dark glass by day; one by one they light up at dusk, and one goes out after midnight.\n  const night = p > 0.5 ? p - 1 : p;\n  for (let i = 0; i \u003c 2; i++) {\n    const wx = hx + (i === 0 ? 2 : 7);\n    const at = i === 0 ? 0.05 : 0;\n    let on = smooth(at + 0.03, at - 0.03, e);\n    // The left window goes dark from about one in the morning until five.\n    if (i === 0 && night > 0.04 && night \u003c 0.2) on = 0;\n    const wr = 50 * lr * (1 - on) + 255 * on;\n    const wg = 70 * lg * (1 - on) + 196 * on;\n    const wb = 90 * lb * (1 - on) + 90 * on;\n    put(buf, wx, g - 5, wr, wg, wb);\n    put(buf, wx + 1, g - 5, wr, wg, wb);\n    put(buf, wx, g - 4, wr, wg, wb);\n    put(buf, wx + 1, g - 4, wr, wg, wb);\n  }\n}\n","layer":{"id":"layer-day-cycle","type":"code","name":"day-cycle","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Day and Night\n// Family:  weather\n// Idea:    A house above a lake watches one whole day go by: the sun climbs and sets behind the hills, the sky runs through dusk to stars and a moon, and the windows light up for the night.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Time=0.2..8, Clouds=0.15..1, Sun path=-1..1\n//\n// Knob 1: Season. Spring, summer, autumn and winter in turn. Summer nights have fireflies, and in winter snow falls and lies on the roof.\n// Knob 2: Time. How fast the day goes, from ten minutes a day to fifteen seconds; a day takes a minute where it starts.\n// Knob 3: Clouds. From a few small clouds to a sky that is nearly overcast.\n// Knob 4: Sun path. How high the sun climbs, from a winter sun that skims the hills to a summer one that reaches the top.\n\nconst W = 64;\nconst H = 128;\n// The sun and moon rise and set on this row, behind the hills.\nconst HORIZON = 80;\n// The far edge of the lake.\nconst LAKE = 86;\nconst TW = 128;\nconst TH = 64;\nconst STARS = 56;\nconst FLAKES = 60;\nconst FLIES = 18;\n\n// Per season: sky top, sky low, far hills, near hills, meadow, meadow shade, flowers,\n// leaves, blossom, wall, roof, lake, roof cap, trunk.\nconst SEASONS = [\n  [0x4a8ceb, 0xaad7fa, 0x6ea096, 0x4e9a5a, 0x60be46, 0x3f9634, 0xffaad2, 0x78c85a, 0xffbedc, 0xe6d7b4, 0xbe3c30, 0x3c78b4, 0xbe3c30, 0x6e4628],\n  [0x286ee6, 0x8cc8fa, 0x50867a, 0x2e7a3c, 0x34a032, 0x247826, 0xffe650, 0x2e8c2e, 0x46aa3c, 0xe6d7b4, 0xbe3c30, 0x2864b4, 0xbe3c30, 0x6e4628],\n  [0x5082d2, 0xc8d7eb, 0x8c8278, 0x8c6e3c, 0xc8a03c, 0x9c7a2a, 0xe65a1e, 0xeb7a1e, 0xffc83c, 0xe6d7b4, 0xa03228, 0x3c6496, 0xa03228, 0x5a3a22],\n  [0x6e96d2, 0xd2e1f0, 0xaab9d2, 0x8ca0b9, 0xd2dcec, 0xaebcd2, 0xffffff, 0x466e5a, 0xe6f0fa, 0xd7c8aa, 0x8c3228, 0x5a78a0, 0xf0f5ff, 0x4a3422],\n];\nconst NCOL = 14;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction lattice(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const a = hash(x0 + seed, iy) * (1 - ux) + hash(x1 + seed, iy) * ux;\n  const b = hash(x0 + seed, iy + 1) * (1 - ux) + hash(x1 + seed, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction smooth(a, b, x) {\n  const t = Math.max(0, Math.min(1, (x - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Sky colours by the sun's height, from deep night to full day: top then low, as 0xRRGGBB.\nconst SKY_E = [-1, -0.22, -0.1, -0.02, 0.06, 0.16, 0.32];\nconst SKY_TOP = [0x060a26, 0x060a26, 0x141c4c, 0x2c3a82, 0x4a64b4, 0, 0];\nconst SKY_LOW = [0x18204e, 0x18204e, 0x5a3c78, 0xd2645a, 0xff9650, 0xffc88c, 0];\n\nexport function setup(params) {\n  params.t = 0;\n  // Where the day stands when the pattern starts: late afternoon, a few seconds before the sun meets the hills.\n  params.phase = 0.625;\n  params.cloudX = 0;\n  params.pal = new Float32Array(NCOL * 3);\n  params.seasons = SEASONS.map((list) => {\n    const out = new Float32Array(NCOL * 3);\n    list.forEach((c, i) => {\n      out[i * 3] = (c >> 16) & 255;\n      out[i * 3 + 1] = (c >> 8) & 255;\n      out[i * 3 + 2] = c & 255;\n    });\n    return out;\n  });\n  params.buf = new Float32Array(W * H * 3);\n  params.rowR = new Float32Array(H);\n  params.rowG = new Float32Array(H);\n  params.rowB = new Float32Array(H);\n  params.light = new Float32Array(3);\n  params.top = new Float32Array(3);\n  params.low = new Float32Array(3);\n\n  params.far = new Int16Array(W);\n  params.mid = new Int16Array(W);\n  params.near = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    params.far[x] = Math.round(61 + 9 * noise1(x * 0.06 + 1, 3) + 4 * noise1(x * 0.17 + 7, 5));\n    params.mid[x] = Math.round(73 + 7 * noise1(x * 0.08 + 20, 9) + 2 * noise1(x * 0.3, 11));\n    // The near shore climbs to the left, where the house stands; the lake opens out to the right.\n    params.near[x] = Math.round(95 + 9 * smooth(16, 50, x) + 1.5 * noise1(x * 0.25 + 4, 13));\n  }\n  params.tex = new Float32Array(TW * TH);\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c TW; x++)\n      params.tex[y * TW + x] = lattice(x / 12.8, y / 8, TW / 12.8, 21) * 0.68 + lattice(x / 6.4, y / 4.5, TW / 6.4, 37) * 0.32;\n  params.sx = new Int16Array(STARS);\n  params.sy = new Int16Array(STARS);\n  params.sb = new Float32Array(STARS);\n  for (let i = 0; i \u003c STARS; i++) {\n    params.sx[i] = Math.floor(hash(i, 71) * W);\n    params.sy[i] = Math.floor(hash(i, 73) * 64);\n    params.sb[i] = 0.45 + 0.55 * hash(i, 79) * hash(i, 83);\n  }\n  params.fx = new Float32Array(FLAKES);\n  params.fy = new Float32Array(FLAKES);\n  params.fs = new Float32Array(FLAKES);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    params.fx[i] = Math.random() * W;\n    params.fy[i] = Math.random() * H;\n    params.fs[i] = 0.6 + Math.random() * 0.8;\n  }\n  params.gx = new Float32Array(FLIES);\n  params.gy = new Float32Array(FLIES);\n  for (let i = 0; i \u003c FLIES; i++) {\n    params.gx[i] = Math.random() * W;\n    params.gy[i] = 92 + Math.random() * 32;\n  }\n  // Flowers in the meadow, fixed, more of them nearer.\n  params.fl = new Int16Array(70 * 2);\n  for (let i = 0; i \u003c 70; i++) {\n    const x = Math.floor(hash(i, 91) * W);\n    const y = params.near[x] + 3 + Math.floor(Math.pow(hash(i, 93), 0.7) * (H - params.near[x] - 4));\n    params.fl[i * 2] = x;\n    params.fl[i * 2 + 1] = y;\n  }\n}\n\nfunction mixHex(out, a, b, u) {\n  out[0] = ((a >> 16) & 255) * (1 - u) + ((b >> 16) & 255) * u;\n  out[1] = ((a >> 8) & 255) * (1 - u) + ((b >> 8) & 255) * u;\n  out[2] = (a & 255) * (1 - u) + (b & 255) * u;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.15, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  // A day lasts 120 / Time seconds: a minute where the knob starts. The clock slows round\n  // sunrise and sunset and hurries through noon and midnight, so the colours get the time.\n  const e = Math.sin((params.phase - 0.25) * Math.PI * 2);\n  const pace = (0.55 + 0.9 * Math.abs(e)) / 1.123;\n  params.phase = (params.phase + (dt * Math.max(0.05, k[1]) * pace) / 120) % 1;\n  params.cloudX += dt * (0.9 + 0.25 * k[1]);\n  params.season = Math.max(0, Math.min(1, k[0]));\n  params.clouds = k[2];\n  params.arc = 46 + 28 * Math.max(-1, Math.min(1, k[3]));\n\n  // Season: four palettes in a row, each held a while before it turns into the next.\n  const q = params.season * 3;\n  const a = Math.min(2, Math.floor(q));\n  const m = smooth(0.2, 0.8, q - a);\n  const pa = params.seasons[a];\n  const pb = params.seasons[a + 1];\n  for (let i = 0; i \u003c NCOL * 3; i++) params.pal[i] = pa[i] * (1 - m) + pb[i] * m;\n  params.snow = smooth(0.78, 0.95, params.season);\n  // Summer nights have fireflies.\n  params.summer = Math.max(0, 1 - Math.abs(params.season - 0.33) / 0.16);\n\n  if (params.snow > 0) {\n    for (let i = 0; i \u003c FLAKES; i++) {\n      params.fy[i] += dt * 7 * params.fs[i];\n      params.fx[i] += dt * (Math.sin(params.t * 0.9 + i * 1.7) * 3 + 1.2);\n      if (params.fy[i] > H) {\n        params.fy[i] -= H + 2;\n        params.fx[i] = Math.random() * W;\n      }\n      if (params.fx[i] >= W) params.fx[i] -= W;\n    }\n  }\n  if (params.summer > 0) {\n    for (let i = 0; i \u003c FLIES; i++) {\n      params.gx[i] += dt * (noise1(params.t * 0.4 + i * 9.3, 17) - 0.5) * 8;\n      params.gy[i] += dt * (noise1(params.t * 0.35 + i * 5.1, 19) - 0.5) * 6;\n      if (params.gx[i] \u003c 0) params.gx[i] += W;\n      if (params.gx[i] >= W) params.gx[i] -= W;\n      params.gy[i] = Math.max(88, Math.min(H - 2, params.gy[i]));\n    }\n  }\n}\n\n// One soft point spread over its 2x2 neighbours, so it glides instead of hopping LED to LED.\nfunction splat(buf, x, y, r, g, b) {\n  const x0 = Math.floor(x - 0.5);\n  const y0 = Math.floor(y - 0.5);\n  const fx = x - 0.5 - x0;\n  const fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++) {\n    const yy = y0 + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    const wy = j === 0 ? 1 - fy : fy;\n    for (let i = 0; i \u003c 2; i++) {\n      const xx = x0 + i;\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = wy * (i === 0 ? 1 - fx : fx);\n      const o = (yy * W + xx) * 3;\n      buf[o] = buf[o] * (1 - w) + Math.max(buf[o], r) * w;\n      buf[o + 1] = buf[o + 1] * (1 - w) + Math.max(buf[o + 1], g) * w;\n      buf[o + 2] = buf[o + 2] * (1 - w) + Math.max(buf[o + 2], b) * w;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const pal = params.pal;\n  const p = params.phase;\n  const t = params.t;\n  // The sun's height, -1 at midnight to 1 at noon. It crosses the panel at an even pace and climbs on a sine.\n  const e = Math.sin((p - 0.25) * Math.PI * 2);\n  const dayU = (p - 0.25) / 0.5;\n  const sunX = 4 + 56 * dayU;\n  const sunY = HORIZON - e * params.arc;\n  const nightU = ((p + 0.25) % 1) / 0.5;\n  const moonX = 4 + 56 * nightU;\n  const moonY = HORIZON + e * params.arc * 0.85;\n  const cover = params.clouds;\n  // How high the sun really stands. A low arc gives a weaker, warmer day from morning to evening.\n  const el = e > 0 ? e * (0.45 + (0.55 * (params.arc - 18)) / 56) : e;\n\n  // Daylight on the land: full by day, warm as the sun gets low, moonlit blue at night.\n  const day = smooth(-0.14, 0.22, el);\n  const gold = smooth(-0.08, 0.04, el) * (1 - smooth(0.18, 0.42, el));\n  // Cloud dims the land, and so does a low sun in front of us: the near side of everything is in shade.\n  const dim = (1 - cover * 0.3) * (1 - gold * 0.22);\n  const light = params.light;\n  // The warm cast stays light: a dim orange hill reads as brown on the panel.\n  light[0] = (day * (1 + gold * 0.08) + (1 - day) * 0.3) * dim;\n  light[1] = (day * (1 - gold * 0.08) + (1 - day) * 0.34) * dim;\n  light[2] = (day * (1 - gold * 0.3) + (1 - day) * 0.58) * dim;\n\n  // Sky: the keyframe pair for this sun height, then a gradient down to the horizon.\n  let s = 0;\n  while (s \u003c SKY_E.length - 2 && el > SKY_E[s + 1]) s++;\n  const u = smooth(SKY_E[s], SKY_E[s + 1], el);\n  const top = params.top;\n  const low = params.low;\n  const topA = SKY_TOP[s] || hexOf(pal, 0);\n  const topB = SKY_TOP[s + 1] || hexOf(pal, 0);\n  const lowA = SKY_LOW[s] || hexOf(pal, 1);\n  const lowB = SKY_LOW[s + 1] || hexOf(pal, 1);\n  mixHex(top, topA, topB, u);\n  mixHex(low, lowA, lowB, u);\n  // Cloud cover greys the sky.\n  const grey = cover * cover * 0.55;\n  const avgT = (top[0] + top[1] + top[2]) / 3;\n  const avgL = (low[0] + low[1] + low[2]) / 3;\n  for (let c = 0; c \u003c 3; c++) {\n    top[c] = top[c] * (1 - grey) + avgT * grey * 0.9;\n    low[c] = low[c] * (1 - grey) + avgL * grey * 0.9;\n  }\n  for (let y = 0; y \u003c LAKE; y++) {\n    const v = Math.pow(Math.min(1, y / HORIZON), 1.6);\n    params.rowR[y] = top[0] + (low[0] - top[0]) * v;\n    params.rowG[y] = top[1] + (low[1] - top[1]) * v;\n    params.rowB[y] = top[2] + (low[2] - top[2]) * v;\n  }\n  // The glow round a low sun, warm, spread wide along the horizon.\n  const glowK = (0.2 + 0.7 * gold) * (1 - cover * 0.6) * smooth(-0.2, 0, el);\n  for (let y = 0; y \u003c LAKE; y++) {\n    const o0 = y * W * 3;\n    const dy = (y - sunY) * 1.4;\n    const r0 = params.rowR[y];\n    const g0 = params.rowG[y];\n    const b0 = params.rowB[y];\n    const c = 140 * glowK;\n    const d0 = 140 + dy * dy;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x - sunX;\n      const g = c / (d0 + dx * dx);\n      const o = o0 + x * 3;\n      // Blended toward warm rather than added, so a bright sky does not burn white round the sun.\n      buf[o] = r0 + (255 - r0) * g;\n      buf[o + 1] = g0 + (178 - g0) * g;\n      buf[o + 2] = b0 + (84 - b0) * g * 0.8;\n    }\n  }\n\n  // Stars come out as the sky darkens; a few twinkle.\n  const starVis = smooth(-0.04, -0.2, e);\n  if (starVis > 0) {\n    for (let i = 0; i \u003c STARS; i++) {\n      const x = params.sx[i];\n      const y = params.sy[i];\n      const b = starVis * params.sb[i] * (0.75 + 0.25 * Math.sin(t * (2 + i * 0.13) + i));\n      const o = (y * W + x) * 3;\n      buf[o] = Math.max(buf[o], 200 * b);\n      buf[o + 1] = Math.max(buf[o + 1], 210 * b);\n      buf[o + 2] = Math.max(buf[o + 2], 255 * b);\n    }\n  }\n\n  // The sun: a hard disc, yellow-white high up, orange as it nears the hills.\n  if (e > -0.12) {\n    const low = 1 - smooth(0.05, 0.4, el);\n    const sr = 255;\n    const sg = 238 - 88 * low;\n    const sb = 150 - 110 * low;\n    disc(buf, sunX, sunY, 3.6, sr, sg, sb);\n  }\n  // The moon: a pale crescent, with the dark side cut away by a second disc.\n  if (e \u003c 0.12) {\n    const mv = smooth(0.12, -0.05, e);\n    moon(buf, moonX, moonY, mv);\n  }\n\n  // Clouds: a baked texture drifting left to right, cut at a level set by Clouds.\n  const tex = params.tex;\n  const thr = 0.78 - 0.5 * cover;\n  const cx0 = params.cloudX;\n  const ix = Math.floor(cx0);\n  const fx = cx0 - ix;\n  const base = ((ix % TW) + TW) % TW;\n  // White by day and greyer the more of them there are, salmon while the sun is low, slate under the moon.\n  const lit = Math.max(day, gold);\n  const grey2 = 1 - cover * 0.28;\n  // A heavy sky is grey even at sunset.\n  const pink = gold * (1 - cover * 0.65);\n  const cr = 58 * (1 - lit) + (228 * grey2 * (1 - pink) + 255 * pink) * lit;\n  const cg = 62 * (1 - lit) + (230 * grey2 * (1 - pink) + 178 * pink) * lit;\n  const cbb = 96 * (1 - lit) + (236 * grey2 * (1 - pink) + 172 * pink) * lit;\n  for (let y = 2; y \u003c 62; y++) {\n    const band = smooth(2, 12, y) * (1 - smooth(44, 62, y));\n    if (band \u003c= 0) continue;\n    const row = y * TW;\n    const up = (y - 2) * TW;\n    const bandUp = smooth(2, 12, y - 2) * (1 - smooth(44, 62, y - 2));\n    for (let x = 0; x \u003c W; x++) {\n      let xa = base - x;\n      if (xa \u003c 0) xa += TW;\n      const xb = xa + 1 === TW ? 0 : xa + 1;\n      const n = (tex[row + xa] * (1 - fx) + tex[row + xb] * fx) * (0.55 + 0.45 * band);\n      const a = smooth(thr, thr + 0.07, n);\n      if (a \u003c= 0) continue;\n      // Where the cloud is thicker just above, this is its underside, and a shade darker.\n      const nUp = (tex[up + xa] * (1 - fx) + tex[up + xb] * fx) * (0.55 + 0.45 * bandUp);\n      const lift = 0.86 + 0.14 * Math.max(-1, Math.min(1, (n - nUp) * 9));\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + cr * lift * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + cg * lift * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + cbb * lift * a;\n    }\n  }\n\n  // Hills: the far ones hazed toward the sky, the near ones in their own colour. With the\n  // sun low behind them they go to a cool silhouette instead of a lit brown.\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  const back = gold * 0.7;\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = params.far[x]; y \u003c LAKE; y++) {\n      const o = (y * W + x) * 3;\n      const near = y >= params.mid[x];\n      const ci = near ? 3 : 2;\n      const haze = near ? 0.12 : 0.4 * (1 - back * 0.5);\n      const dark = near ? back * 0.75 : back;\n      buf[o] = ((pal[ci * 3] * (1 - haze) + low[0] * haze) * lr) * (1 - dark) + 46 * dark;\n      buf[o + 1] = ((pal[ci * 3 + 1] * (1 - haze) + low[1] * haze) * lg) * (1 - dark) + 50 * dark;\n      buf[o + 2] = ((pal[ci * 3 + 2] * (1 - haze) + low[2] * haze) * lb) * (1 - dark) + 84 * dark;\n    }\n  }\n\n  // The lake mirrors what is above it, darker and bluer, broken by a slow shimmer.\n  const wr = pal[33] * 0.18 * lr;\n  const wg = pal[34] * 0.18 * lg;\n  const wb = pal[35] * 0.2 * lb;\n  for (let y = LAKE; y \u003c H; y++) {\n    // Squeezed upward, so the water shows the sky over the hills as well as the hills.\n    const my = Math.round(LAKE - 1 - (y - LAKE) * 1.7);\n    if (my \u003c 0) break;\n    const wob = Math.sin(y * 1.3 + t * 1.6) * 0.6;\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= params.near[x]) continue;\n      let sx = Math.round(x + wob * Math.sin(x * 0.4 + y));\n      if (sx \u003c 0) sx = 0;\n      if (sx >= W) sx = W - 1;\n      const so = (my * W + sx) * 3;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[so] * 0.55 + wr;\n      buf[o + 1] = buf[so + 1] * 0.6 + wg;\n      buf[o + 2] = buf[so + 2] * 0.66 + wb;\n    }\n  }\n  // A path of glitter under the sun or the moon, on the water.\n  const glitSun = e > -0.02 ? (1 - smooth(0.2, 0.6, el)) * (1 - cover * 0.7) : 0;\n  const glitMoon = e \u003c -0.05 ? smooth(-0.05, -0.25, e) * 0.5 : 0;\n  const gx = glitSun > 0 ? sunX : moonX;\n  const gk = Math.max(glitSun, glitMoon);\n  if (gk > 0.02) {\n    for (let y = LAKE + 1; y \u003c 108; y++) {\n      // Each row of water holds one short dash that slides to and fro about the light's line.\n      const half = 0.8 + (y - LAKE) * 0.12 + 0.8 * Math.sin(y * 2.3 + t * 2.1);\n      const mid = gx + Math.sin(y * 3.7 + t * 1.3) * (1 + (y - LAKE) * 0.08);\n      // A weak light breaks the path into fewer dashes rather than dimmer ones.\n      if (Math.sin(y * 5.1 + t * 2.7) \u003c 1.2 - 1.6 * gk) continue;\n      for (let x = Math.max(0, Math.round(mid - half)); x \u003c= Math.min(W - 1, Math.round(mid + half)); x++) {\n        if (y >= params.near[x]) continue;\n        const o = (y * W + x) * 3;\n        // Never dimmer than about two thirds: a dim gold dash on the water reads as tan.\n        const b = 0.62 + 0.38 * gk;\n        buf[o] = Math.max(buf[o], (glitSun > 0 ? 255 : 200) * b);\n        buf[o + 1] = Math.max(buf[o + 1], (glitSun > 0 ? 226 : 210) * b);\n        buf[o + 2] = Math.max(buf[o + 2], (glitSun > 0 ? 150 : 240) * b);\n      }\n    }\n  }\n\n  // The near meadow, a shade darker toward us, with its flowers.\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = params.near[x]; y \u003c H; y++) {\n      const v = smooth(params.near[x], H, y);\n      const o = (y * W + x) * 3;\n      buf[o] = (pal[12] * (1 - v) + pal[15] * v) * lr;\n      buf[o + 1] = (pal[13] * (1 - v) + pal[16] * v) * lg;\n      buf[o + 2] = (pal[14] * (1 - v) + pal[17] * v) * lb;\n    }\n  }\n  for (let i = 0; i \u003c 70; i++) {\n    const o = (params.fl[i * 2 + 1] * W + params.fl[i * 2]) * 3;\n    buf[o] = pal[18] * lr;\n    buf[o + 1] = pal[19] * lg;\n    buf[o + 2] = pal[20] * lb;\n  }\n\n  tree(buf, pal, params, 27, light);\n  house(buf, pal, params, light, el, p);\n\n  const flies = params.summer * (1 - day);\n  if (flies > 0.02) {\n    for (let i = 0; i \u003c FLIES; i++) {\n      const blink = Math.max(0, Math.sin(t * (1.3 + i * 0.07) + i * 2.4));\n      const b = flies * blink * blink;\n      if (b \u003c 0.05) continue;\n      // Drawn past full so the point is still bright once it is shared out over four LEDs.\n      splat(buf, params.gx[i], params.gy[i], 330 * b, 400 * b, 120 * b);\n    }\n  }\n  if (params.snow > 0.02) {\n    // Snow catches whatever light there is: white by day, blue under the moon.\n    const k = params.snow;\n    for (let i = 0; i \u003c FLAKES; i++) {\n      const v = k * (0.65 + 0.35 * params.fs[i] / 1.4);\n      splat(buf, params.fx[i], params.fy[i], 250 * v * Math.min(1, lr * 1.3), 250 * v * Math.min(1, lg * 1.3), 255 * v * Math.min(1, lb * 1.3));\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction hexOf(pal, i) {\n  return (Math.round(pal[i * 3]) \u003c\u003c 16) | (Math.round(pal[i * 3 + 1]) \u003c\u003c 8) | Math.round(pal[i * 3 + 2]);\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// A disc with a one-LED soft rim, so it moves without stepping. The hills, drawn after it, hide it as it sets.\nfunction disc(buf, cx, cy, r, cr, cg, cb) {\n  const x0 = Math.max(0, Math.floor(cx - r - 1));\n  const x1 = Math.min(W - 1, Math.ceil(cx + r + 1));\n  const y0 = Math.max(0, Math.floor(cy - r - 1));\n  const y1 = Math.min(HORIZON + 2, Math.ceil(cy + r + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - cy;\n      const a = Math.max(0, Math.min(1, r - Math.sqrt(px * px + py * py) + 0.5));\n      if (a \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + cr * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + cg * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + cb * a;\n    }\n}\n\nfunction moon(buf, cx, cy, k) {\n  const r = 3.2;\n  const x0 = Math.max(0, Math.floor(cx - r - 1));\n  const x1 = Math.min(W - 1, Math.ceil(cx + r + 1));\n  const y0 = Math.max(0, Math.floor(cy - r - 1));\n  const y1 = Math.min(HORIZON + 2, Math.ceil(cy + r + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - cy;\n      const d = Math.sqrt(px * px + py * py);\n      const cut = Math.sqrt((px + 2.4) * (px + 2.4) + (py - 1) * (py - 1));\n      const a = Math.max(0, Math.min(1, r - d + 0.5)) * Math.max(0, Math.min(1, cut - r + 0.5)) * k;\n      if (a \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + 240 * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + 236 * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + 205 * a;\n    }\n}\n\nfunction tree(buf, pal, params, tx, light) {\n  const base = params.near[tx] + 1;\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  for (let y = base - 7; y \u003c base; y++) {\n    put(buf, tx, y, pal[39] * lr, pal[40] * lg, pal[41] * lb);\n    put(buf, tx + 1, y, pal[39] * lr * 0.8, pal[40] * lg * 0.8, pal[41] * lb * 0.8);\n  }\n  const cy = base - 12;\n  for (let y = cy - 6; y \u003c= cy + 5; y++)\n    for (let x = tx - 6; x \u003c= tx + 7; x++) {\n      const dx = (x - tx - 0.5) / 6.2;\n      const dy = (y - cy) / 5.6;\n      const edge = 0.12 * Math.sin(x * 2.1 + y * 1.3);\n      if (dx * dx + dy * dy > 1 + edge) continue;\n      // The side away from the light is a shade darker, and the crown is speckled with blossom or fruit.\n      const shade = 0.78 + 0.22 * smooth(1, -1, dx + dy);\n      const dot = hash(x * 7 + 3, y * 5 + 1) \u003c 0.18;\n      const c = dot ? 24 : 21;\n      put(buf, x, y, pal[c] * shade * lr, pal[c + 1] * shade * lg, pal[c + 2] * shade * lb);\n    }\n}\n\nfunction house(buf, pal, params, light, e, p) {\n  const hx = 5;\n  const g = params.near[hx + 5] + 1;\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  const snow = params.snow;\n  // Walls.\n  for (let y = g - 7; y \u003c g; y++)\n    for (let x = hx; x \u003c hx + 11; x++) {\n      const side = x >= hx + 8 ? 0.82 : 1;\n      put(buf, x, y, pal[27] * lr * side, pal[28] * lg * side, pal[29] * lb * side);\n    }\n  // Roof: a triangle a little wider than the walls, with snow along its edge in winter.\n  for (let r = 0; r \u003c 7; r++) {\n    const y = g - 8 - r;\n    const half = 6.5 - r;\n    for (let x = Math.ceil(hx + 5 - half); x \u003c= Math.floor(hx + 5 + half); x++) {\n      const rim = r === 6 || Math.abs(x - (hx + 5)) >= half - 1;\n      const cap = rim ? snow : snow * 0.35;\n      const ri = pal[30] * (1 - cap) + pal[36] * cap;\n      const gi = pal[31] * (1 - cap) + pal[37] * cap;\n      const bi = pal[32] * (1 - cap) + pal[38] * cap;\n      put(buf, x, y, ri * lr, gi * lg, bi * lb);\n    }\n  }\n  // Chimney.\n  for (let y = g - 14; y \u003c g - 10; y++) put(buf, hx + 8, y, 120 * lr, 70 * lg, 60 * lb);\n  // Door.\n  for (let y = g - 4; y \u003c g; y++) put(buf, hx + 5, y, pal[39] * lr, pal[40] * lg, pal[41] * lb);\n  // Windows: dark glass by day; one by one they light up at dusk, and one goes out after midnight.\n  const night = p > 0.5 ? p - 1 : p;\n  for (let i = 0; i \u003c 2; i++) {\n    const wx = hx + (i === 0 ? 2 : 7);\n    const at = i === 0 ? 0.05 : 0;\n    let on = smooth(at + 0.03, at - 0.03, e);\n    // The left window goes dark from about one in the morning until five.\n    if (i === 0 && night > 0.04 && night \u003c 0.2) on = 0;\n    const wr = 50 * lr * (1 - on) + 255 * on;\n    const wg = 70 * lg * (1 - on) + 196 * on;\n    const wb = 90 * lb * (1 - on) + 90 * on;\n    put(buf, wx, g - 5, wr, wg, wb);\n    put(buf, wx + 1, g - 5, wr, wg, wb);\n    put(buf, wx, g - 4, wr, wg, wb);\n    put(buf, wx + 1, g - 4, wr, wg, wb);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Season=0..1, Time=0.2..8, Clouds=0.15..1, Sun path=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Season","min":0,"max":1,"about":"Spring, summer, autumn and winter in turn. Summer nights have fireflies, and in winter snow falls and lies on the roof."},{"name":"Time","min":0.2,"max":8,"about":"How fast the day goes, from ten minutes a day to fifteen seconds; a day takes a minute where it starts."},{"name":"Clouds","min":0.15,"max":1,"about":"From a few small clouds to a sky that is nearly overcast."},{"name":"Sun path","min":-1,"max":1,"about":"How high the sun climbs, from a winter sun that skims the hills to a summer one that reaches the top."}],"start":[0,2,0.15,0.06],"measures":{"motion":0.0549,"detail":0.0184,"edges":0.5425,"complexity":0.6376,"coverage":1,"colour":0.3226,"drift":0.2553},"knobResponse":[0.2229,0.2763,0.1419,0.1052]},{"slug":"domain-warp","title":"Domain Warp","family":"noise","round":1,"note":"노이즈가 제 자신을 비틀어서 어두운 쪽빛 돌에 금빛 결이 흘러요. 대리석을 붓는 것처럼 천천히 뒤섞여요.","idea":"Noise that is pushed around by its own noise twice over stops looking like noise and starts looking like stone being poured.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Domain Warp\n// Family:  noise\n// Idea:    Noise that is pushed around by its own noise twice over stops looking like noise and starts looking like stone being poured.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Cycle=0..1, Speed=0..5, Warp=1..6, Zoom=0.035..0.095\n// @ramp oklab wrap 0:#05030f 0.16:#0e1450 0.22:#2a7ac0 0.27:#100c44 0.5:#2c1478 0.62:#c83888 0.68:#ffd890 0.74:#ff6a3a 0.84:#4a0a3a 1:#05030f\n//\n// Knob 1: Cycle. Slides the palette through the stone, so the gold veins move onto other contours; one turn comes back.\n// Knob 2: Speed. How fast the marble pours; 0 holds it still.\n// Knob 3: Warp. How hard the noise is folded into itself, from loose marble to tight swirls.\n// Knob 4: Zoom. Size of the stone; low is a few big swirls, high is fine grain.\n\n// The noise is built once into a tileable texture, so each stage of the\n// warp is one lookup instead of four octaves of noise.\nconst N = 128;\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x, 374761393) + Math.imul(y, 668265263) + Math.imul(s, 2147483647);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction fade(t) {\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\nfunction tap(tex, u, v) {\n  const fu = Math.floor(u);\n  const fv = Math.floor(v);\n  const x0 = fu & (N - 1);\n  const y0 = fv & (N - 1);\n  const x1 = (x0 + 1) & (N - 1);\n  const y1 = (y0 + 1) & (N - 1);\n  const tx = u - fu;\n  const ty = v - fv;\n  const a = tex[y0 * N + x0];\n  const b = tex[y0 * N + x1];\n  const c = tex[y1 * N + x0];\n  const d = tex[y1 * N + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nexport function setup(params) {\n  const tex = new Float32Array(N * N);\n  let amp = 1;\n  for (let o = 0; o \u003c 4; o++) {\n    const cells = 4 \u003c\u003c o;\n    const size = N / cells;\n    for (let y = 0; y \u003c N; y++) {\n      const gy = Math.floor(y / size);\n      const fy = fade(y / size - gy);\n      for (let x = 0; x \u003c N; x++) {\n        const gx = Math.floor(x / size);\n        const fx = fade(x / size - gx);\n        const x1 = (gx + 1) % cells;\n        const y1 = (gy + 1) % cells;\n        const a = hash(gx, gy, o);\n        const b = hash(x1, gy, o);\n        const c = hash(gx, y1, o);\n        const d = hash(x1, y1, o);\n        const top = a + (b - a) * fx;\n        const bottom = c + (d - c) * fx;\n        tex[y * N + x] += (top + (bottom - top) * fy) * amp;\n      }\n    }\n    amp *= 0.5;\n  }\n  let lo = Infinity;\n  let hi = -Infinity;\n  for (let i = 0; i \u003c tex.length; i++) {\n    lo = Math.min(lo, tex[i]);\n    hi = Math.max(hi, tex[i]);\n  }\n  for (let i = 0; i \u003c tex.length; i++) tex[i] = (tex[i] - lo) / (hi - lo);\n  params.tex = tex;\n  params.clock = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  params.colour = k[0];\n  params.speed = k[1];\n  params.warp = k[2];\n  params.zoom = k[3];\n  params.clock += dt * params.speed * 0.4;\n}\n\nexport function draw(display, params, time) {\n  const tex = params.tex;\n  const w = display.width;\n  const h = display.height;\n  const t = params.clock;\n  // Texels per LED; the texture's coarsest noise cell is 32 texels wide.\n  const s = params.zoom * 12;\n  const amount = 36 + (params.warp - 1) * 5.5;\n  const ox = t * 3.1;\n  const oy = t * 1.7;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const px = (x - w / 2) * s + 64 + t * 1.3;\n      const py = (y - h / 2) * s + 64 + t * 0.4;\n      const qx = tap(tex, px + ox, py) - 0.5;\n      const qy = tap(tex, px + 41.3, py + 17.9 - oy) - 0.5;\n      const rx = tap(tex, px + amount * qx + 23.7 - oy, py + amount * qy + 91.1) - 0.5;\n      const ry = tap(tex, px + amount * qx + 77.2, py + amount * qy + 5.3 + ox * 0.6) - 0.5;\n      const f = tap(tex, px + amount * rx, py + amount * ry);\n      let v = f * 3 + params.colour;\n      v -= Math.floor(v);\n      display.setValue(x, y, v);\n    }\n  }\n}\n","layer":{"id":"layer-domain-warp","type":"code","name":"domain-warp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Domain Warp\n// Family:  noise\n// Idea:    Noise that is pushed around by its own noise twice over stops looking like noise and starts looking like stone being poured.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Cycle=0..1, Speed=0..5, Warp=1..6, Zoom=0.035..0.095\n\n//\n// Knob 1: Cycle. Slides the palette through the stone, so the gold veins move onto other contours; one turn comes back.\n// Knob 2: Speed. How fast the marble pours; 0 holds it still.\n// Knob 3: Warp. How hard the noise is folded into itself, from loose marble to tight swirls.\n// Knob 4: Zoom. Size of the stone; low is a few big swirls, high is fine grain.\n\n// The noise is built once into a tileable texture, so each stage of the\n// warp is one lookup instead of four octaves of noise.\nconst N = 128;\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x, 374761393) + Math.imul(y, 668265263) + Math.imul(s, 2147483647);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction fade(t) {\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\nfunction tap(tex, u, v) {\n  const fu = Math.floor(u);\n  const fv = Math.floor(v);\n  const x0 = fu & (N - 1);\n  const y0 = fv & (N - 1);\n  const x1 = (x0 + 1) & (N - 1);\n  const y1 = (y0 + 1) & (N - 1);\n  const tx = u - fu;\n  const ty = v - fv;\n  const a = tex[y0 * N + x0];\n  const b = tex[y0 * N + x1];\n  const c = tex[y1 * N + x0];\n  const d = tex[y1 * N + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nexport function setup(params) {\n  const tex = new Float32Array(N * N);\n  let amp = 1;\n  for (let o = 0; o \u003c 4; o++) {\n    const cells = 4 \u003c\u003c o;\n    const size = N / cells;\n    for (let y = 0; y \u003c N; y++) {\n      const gy = Math.floor(y / size);\n      const fy = fade(y / size - gy);\n      for (let x = 0; x \u003c N; x++) {\n        const gx = Math.floor(x / size);\n        const fx = fade(x / size - gx);\n        const x1 = (gx + 1) % cells;\n        const y1 = (gy + 1) % cells;\n        const a = hash(gx, gy, o);\n        const b = hash(x1, gy, o);\n        const c = hash(gx, y1, o);\n        const d = hash(x1, y1, o);\n        const top = a + (b - a) * fx;\n        const bottom = c + (d - c) * fx;\n        tex[y * N + x] += (top + (bottom - top) * fy) * amp;\n      }\n    }\n    amp *= 0.5;\n  }\n  let lo = Infinity;\n  let hi = -Infinity;\n  for (let i = 0; i \u003c tex.length; i++) {\n    lo = Math.min(lo, tex[i]);\n    hi = Math.max(hi, tex[i]);\n  }\n  for (let i = 0; i \u003c tex.length; i++) tex[i] = (tex[i] - lo) / (hi - lo);\n  params.tex = tex;\n  params.clock = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  params.colour = k[0];\n  params.speed = k[1];\n  params.warp = k[2];\n  params.zoom = k[3];\n  params.clock += dt * params.speed * 0.4;\n}\n\nexport function draw(display, params, time) {\n  const tex = params.tex;\n  const w = display.width;\n  const h = display.height;\n  const t = params.clock;\n  // Texels per LED; the texture's coarsest noise cell is 32 texels wide.\n  const s = params.zoom * 12;\n  const amount = 36 + (params.warp - 1) * 5.5;\n  const ox = t * 3.1;\n  const oy = t * 1.7;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const px = (x - w / 2) * s + 64 + t * 1.3;\n      const py = (y - h / 2) * s + 64 + t * 0.4;\n      const qx = tap(tex, px + ox, py) - 0.5;\n      const qy = tap(tex, px + 41.3, py + 17.9 - oy) - 0.5;\n      const rx = tap(tex, px + amount * qx + 23.7 - oy, py + amount * qy + 91.1) - 0.5;\n      const ry = tap(tex, px + amount * qx + 77.2, py + amount * qy + 5.3 + ox * 0.6) - 0.5;\n      const f = tap(tex, px + amount * rx, py + amount * ry);\n      let v = f * 3 + params.colour;\n      v -= Math.floor(v);\n      display.setValue(x, y, v);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#05030f","alpha":1},{"position":0.16,"color":"#0e1450","alpha":1},{"position":0.22,"color":"#2a7ac0","alpha":1},{"position":0.27,"color":"#100c44","alpha":1},{"position":0.5,"color":"#2c1478","alpha":1},{"position":0.62,"color":"#c83888","alpha":1},{"position":0.68,"color":"#ffd890","alpha":1},{"position":0.74,"color":"#ff6a3a","alpha":1},{"position":0.84,"color":"#4a0a3a","alpha":1},{"position":1,"color":"#05030f","alpha":1}],"mode":"oklab","wrap":true},"recolor":false,"knobsAnnotationRaw":"// @knobs Cycle=0..1, Speed=0..5, Warp=1..6, Zoom=0.035..0.095","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Cycle","min":0,"max":1,"about":"Slides the palette through the stone, so the gold veins move onto other contours; one turn comes back."},{"name":"Speed","min":0,"max":5,"about":"How fast the marble pours; 0 holds it still."},{"name":"Warp","min":1,"max":6,"about":"How hard the noise is folded into itself, from loose marble to tight swirls."},{"name":"Zoom","min":0.035,"max":0.095,"about":"Size of the stone; low is a few big swirls, high is fine grain."}],"start":[0,2,1,0.06],"measures":{"motion":0.2428,"detail":0.0806,"edges":0.2816,"complexity":1.8069,"coverage":0.9604,"colour":0.3247,"drift":0.15},"knobResponse":[0.3352,0.1929,0.1917,0.2107]},{"slug":"domino-run","title":"Domino Run","family":"physics","round":16,"note":"여섯 선반과 나선 계단 다섯을 잇는 도미노 마흔 개를 손끝이 밀면, 물결이 제 물리 빠르기로 내려가고 낮은 램프 빛을 받던 상아색 면이 쓰러지는 대로 어두워져요. 다 쓰러지면 필름이 거꾸로 돌아 줄을 다시 세워요. 줄이 달리는 동안 K1 을 누르면 아직 서 있는 선반 머리에서 두 번째 물결이 떠나요.","idea":"A fingertip tips the first of forty dominoes and the wave runs down six shelves and five spiral stairs at its own physical pace, each domino going dark in a low lamp's light as it falls, until the run rewinds.","buttons":"K1 tap pushes: the first domino if the run is waiting, the start of a shelf ahead of the wave if it is running (a second wave), the rewind if it is over.","code":"// ===== Patternflow pattern =====\n// Title:   Domino Run\n// Family:  physics\n// Idea:    A fingertip tips the first of forty dominoes and the wave runs down six shelves and five spiral stairs at its own physical pace, each domino going dark in a low lamp's light as it falls, until the run rewinds.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: domino toppling runs, with the pushing group moved as one body after J. M. J. van Leeuwen's \"The domino effect\" (2004)\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Speed=0.5..4, Spacing=-1..1, Angle=-1..1\n//\n// Knob 1: Colour. Ivory dominoes with black spots at 0; turned up, the run becomes a set of coloured toppling dominoes whose hues walk along the chain.\n// Knob 2: Speed. How fast the film runs, finger and all: at 2 the forty dominoes fall in under five seconds, at 0.5 the wave crawls, at 4 it is half of real speed.\n// Knob 3: Spacing. The gap between dominoes, from 0.44 to 0.8 of a domino's height; a wider gap means fewer dominoes and a flatter pile once they fall.\n// Knob 4: Angle. Swings the camera round the run, from almost straight side-on, where only the narrow edges show, to well round, where the spotted faces fill the shelves.\n// Buttons: K1 tap pushes: the first domino if the run is waiting, the start of a shelf ahead of the wave if it is running (a second wave), the rewind if it is over.\n\nconst W = 64;\nconst H = 128;\n// Two by two samples per LED, or a tipping edge jumps a whole LED at a time.\nconst SS = 2;\nconst SW = W * SS;\nconst SH = H * SS;\nconst MAXN = 64;\nconst TIERS = 6;\n// A domino in LEDs, in a real one's proportions (48 x 24 x 7.5 mm): one LED\n// is three millimetres.\nconst DH = 16;\nconst DT = 2.5;\nconst DWID = 8;\n// A shelf's straight run and the half turn at each end: the run goes into\n// the room at the right and comes back at the left, so every other shelf\n// stands 14 LEDs further back.\nconst RUN = 50;\nconst TURN_R = 7;\nconst BACK = 2 * TURN_R;\nconst SPACING = 20.5;\n// The camera looks down ten degrees, enough to see shelves as shelves and\n// turns as curves, and stands 40 degrees round to the left.\nconst PITCH = 0.18;\nconst YAW0 = 0.7;\nconst YAW_SWING = 0.44;\n// Tipping about the front bottom edge: the centre of mass sits behind the\n// edge by atan(t / h), and the moment of inertia is a slab's about its edge.\nconst BETA = Math.atan(DT / DH);\nconst RCOM = 0.5 * Math.hypot(DH, DT);\nconst INERTIA = (DH * DH + DT * DT) / 3;\n// The share of the pushing group's momentum that carries into the next\n// domino: 0.93 settles a long flat run at 1.5 sqrt(g h), as real runs go, at\n// every spacing the knob reaches. A stair hands the wave height to spend, so\n// a five-domino shelf after one runs nearer 1.8.\nconst KAPPA = 0.93;\n// Gravity in LEDs per second squared. Real gravity at three millimetres an\n// LED is about 3270, so the film runs at a little over a quarter of real\n// speed and a flat run would cover 95 LEDs a second.\nconst G0 = 250;\nconst GROUP = 8;\nconst SUBSTEP = 1 / 150;\n// The recording the rewind plays back: one pose a thirtieth of a second.\nconst MAXF = 600;\nconst REC_DT = 1 / 30;\nconst REWIND = 3;\n\n// Spots on each half of a face, as bits of a three by three grid.\nconst PIPMASK = [0, 16, 257, 273, 325, 341, 365];\n// Ivory as the lamp's warm bulb shows it.\nconst IVORY = [255, 230, 186];\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Hue h at saturation 0.85, full value.\nfunction hsvInto(out, h) {\n  for (let j = 0; j \u003c 3; j++) {\n    const k = (5 - 2 * j + 6 * (h - Math.floor(h))) % 6;\n    out[j] = 255 * (1 - 0.85 * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n}\n\n// The angle domino i leans at when it rests on domino i + 1 at angle tn. In\n// i's frame (along its heading, y up) i + 1's back face starts at `gap` and\n// its ground sits `dy` higher. Either i's top corner presses on i + 1's back\n// face or, down a step, i's front face presses on i + 1's top back corner;\n// i rests on whichever it reaches first. 9: neither is in reach.\nfunction contact(gap, dy, tn) {\n  let best = 9;\n  const s = Math.sin(tn);\n  const c = Math.cos(tn);\n  const arg = (DT + dy * s - (gap + DT) * c) / DH;\n  if (arg >= -1 && arg \u003c= 1) {\n    const ti = tn - Math.asin(arg);\n    const px = DH * Math.sin(ti) - (gap + DT - DT * c);\n    const py = DH * Math.cos(ti) - (dy + DT * s);\n    const u = px * s + py * c;\n    if (u >= -0.01 && u \u003c= DH + 0.01) best = ti;\n  }\n  const cx = gap + DT - DT * c + DH * s;\n  const cy = dy + DT * s + DH * c;\n  if (cy > 0 && cx * cx + cy * cy \u003c= DH * DH) {\n    const ti = Math.atan2(cx, cy);\n    if (ti \u003c best) best = ti;\n  }\n  return best;\n}\n\nfunction tierY(k) {\n  // Shelves at the back are lowered by what the camera's pitch lifts them,\n  // so all six sit the same distance apart on the panel.\n  const lift = (BACK * Math.cos(YAW0) * Math.sin(PITCH)) / Math.cos(PITCH);\n  return -k * SPACING - (k % 2 ? lift : 0);\n}\n\n// A point on the run's path at arc length s: position, heading and ground.\nfunction pathAt(s, out) {\n  const turn = Math.PI * TURN_R;\n  const per = RUN + turn;\n  let k = Math.floor(s / per);\n  let u = s - k * per;\n  if (k >= TIERS - 1) {\n    k = TIERS - 1;\n    u = s - k * per;\n  }\n  const even = k % 2 === 0;\n  if (u \u003c= RUN || k === TIERS - 1) {\n    out.x = even ? u : RUN - u;\n    out.z = even ? 0 : -BACK;\n    out.hx = even ? 1 : -1;\n    out.hz = 0;\n    out.y = tierY(k);\n    out.turn = 0;\n  } else {\n    const a = (u - RUN) / TURN_R;\n    if (even) {\n      out.x = RUN + TURN_R * Math.sin(a);\n      out.z = -TURN_R + TURN_R * Math.cos(a);\n      out.hx = Math.cos(a);\n      out.hz = -Math.sin(a);\n    } else {\n      out.x = -TURN_R * Math.sin(a);\n      out.z = -TURN_R - TURN_R * Math.cos(a);\n      out.hx = -Math.cos(a);\n      out.hz = Math.sin(a);\n    }\n    // Each domino in a turn has its own step, going down to the next shelf.\n    out.y = tierY(k) + (tierY(k + 1) - tierY(k)) * (a / Math.PI);\n    out.turn = 1;\n  }\n  out.tier = k;\n}\n\nfunction build(P, ratio) {\n  P.ratio = ratio;\n  const d = ratio * DH;\n  const total = TIERS * RUN + (TIERS - 1) * Math.PI * TURN_R;\n  const q = {};\n  let n = 0;\n  let lastTier = -1;\n  P.tierStart.fill(-1);\n  for (let s = 1.5; s \u003c= total - DH - 1 && n \u003c MAXN; s += d) {\n    pathAt(s, q);\n    P.px[n] = q.x;\n    P.py[n] = q.y;\n    P.pz[n] = q.z;\n    P.hx[n] = q.hx;\n    P.hz[n] = q.hz;\n    if (q.tier !== lastTier && !q.turn) {\n      P.tierStart[q.tier] = n;\n      lastTier = q.tier;\n    }\n    // The builder set every domino with its spots toward the camera.\n    const toCam = -Math.sin(YAW0) * q.hx + Math.cos(YAW0) * q.hz;\n    P.pipFront[n] = toCam > 0 ? 1 : 0;\n    // Their numbers from two irrational strides, so no two neighbours match.\n    P.pip0[n] = PIPMASK[Math.floor(((n * 0.618 + 0.3) % 1) * 7)];\n    P.pip1[n] = PIPMASK[Math.floor(((n * 0.414 + 0.8) % 1) * 7)];\n    P.turn[n] = q.turn;\n    n++;\n  }\n  P.n = n;\n  for (let i = 0; i \u003c n - 1; i++) {\n    const dx = P.px[i + 1] - P.px[i];\n    const dz = P.pz[i + 1] - P.pz[i];\n    P.gap[i] = dx * P.hx[i] + dz * P.hz[i] - DT;\n    P.dy[i] = P.py[i + 1] - P.py[i];\n  }\n  for (let i = 0; i \u003c n; i++) P.hue[i] = (i / n) * 0.85;\n  standAll(P);\n}\n\nfunction standAll(P) {\n  P.th.fill(0);\n  P.om.fill(0);\n  P.st.fill(0);\n}\n\n// The pushing group: a moving front and the dominoes leaning on it. Every\n// angle in it follows from the front's, so it moves as one body.\nfunction pose(P, f, x, out) {\n  out[0] = x;\n  let m = 1;\n  for (let j = 1; j \u003c= GROUP && f - j >= 0 && P.st[f - j] === 2; j++) {\n    const i = f - j;\n    out[j] = Math.min(Math.PI / 2, contact(P.gap[i], P.dy[i], out[j - 1]));\n    m++;\n  }\n  return m;\n}\n\nfunction potential(P, f, x) {\n  const m = pose(P, f, x, P.tmp);\n  let v = 0;\n  for (let j = 0; j \u003c m; j++) v += RCOM * Math.cos(P.tmp[j] - BETA);\n  return v;\n}\n\nfunction inertia(P, f, x) {\n  const e = 1e-4;\n  const m = pose(P, f, x + e, P.tmp);\n  for (let j = 0; j \u003c m; j++) P.tmp2[j] = P.tmp[j];\n  pose(P, f, x - e, P.tmp);\n  let s = 0;\n  for (let j = 0; j \u003c m; j++) {\n    const J = (P.tmp2[j] - P.tmp[j]) / (2 * e);\n    s += J * J;\n  }\n  return INERTIA * s;\n}\n\nfunction stepFront(P, f, g, dt) {\n  const x = P.th[f];\n  const e = 1e-4;\n  const dV = (g * (potential(P, f, x + e) - potential(P, f, x - e))) / (2 * e);\n  const I = inertia(P, f, x);\n  const dI = (inertia(P, f, x + 1e-3) - inertia(P, f, x - 1e-3)) / 2e-3;\n  let w = P.om[f];\n  // A group whose inertia shrinks hands energy back to its front. One whose\n  // inertia grew would make a leaning domino outrun the one under it, and a\n  // contact only pushes: that domino lags instead.\n  w += ((-dV - 0.5 * Math.min(0, dI) * w * w) / I) * dt;\n  let th = x + w * dt;\n  if (th \u003c 0) {\n    // Not pushed hard enough: it rocks back and stands.\n    th = 0;\n    w = 0;\n    P.st[f] = 0;\n  }\n  const last = f === P.n - 1;\n  if (!last) {\n    const next = P.st[f + 1];\n    const c = contact(P.gap[f], P.dy[f], P.th[f + 1]);\n    if (th >= c) {\n      th = c;\n      if (next === 0) {\n        // Generalised momentum carries across: the old front now moves at\n        // J times the new one's rate.\n        const J = (contact(P.gap[f], P.dy[f], 1e-3) - contact(P.gap[f], P.dy[f], 0)) / 1e-3;\n        const before = I * w;\n        P.st[f] = 2;\n        P.st[f + 1] = 1;\n        P.th[f + 1] = 0;\n        P.th[f] = th;\n        const after = inertia(P, f + 1, 0);\n        P.om[f + 1] = (KAPPA * before * J) / after;\n        P.om[f] = 0;\n        return;\n      }\n      // It met dominoes that already lie: the group stops on them.\n      P.st[f] = 2;\n      P.om[f] = 0;\n      P.th[f] = th;\n      return;\n    }\n  } else if (th >= Math.PI / 2) {\n    // The last one lands flat and bounces.\n    th = Math.PI / 2;\n    w = Math.abs(w) > 1.5 ? -0.22 * w : 0;\n    if (w === 0) P.st[f] = 3;\n  }\n  P.th[f] = th;\n  P.om[f] = w;\n}\n\nfunction settle(P) {\n  // Leaning dominoes follow the one they lean on, front to back.\n  for (let i = P.n - 2; i >= 0; i--)\n    if (P.st[i] === 2) P.th[i] = Math.min(Math.PI / 2, contact(P.gap[i], P.dy[i], P.th[i + 1]));\n}\n\nfunction record(P) {\n  if (P.frames >= MAXF) {\n    // Out of tape: keep every other pose and record at half the rate.\n    const n = P.n;\n    for (let f = 0; f \u003c MAXF / 2; f++) for (let i = 0; i \u003c n; i++) P.tape[f * MAXN + i] = P.tape[2 * f * MAXN + i];\n    P.frames = MAXF / 2;\n    P.recEvery *= 2;\n  }\n  const o = P.frames * MAXN;\n  for (let i = 0; i \u003c P.n; i++) P.tape[o + i] = Math.round((P.th[i] / (Math.PI / 2)) * 255);\n  P.frames++;\n}\n\nfunction startPush(P, i) {\n  P.finger = 0;\n  P.fingerOn = i;\n  P.st[i] = 4;\n}\n\nexport function setup(params) {\n  const P = params;\n  // Per domino: pivot (front bottom edge), heading, gap and step to the next.\n  for (const key of [\"px\", \"py\", \"pz\", \"hx\", \"hz\", \"gap\", \"dy\", \"th\", \"om\", \"hue\"]) P[key] = new Float32Array(MAXN);\n  for (const key of [\"st\", \"pipFront\", \"turn\", \"pfOn\"]) P[key] = new Uint8Array(MAXN);\n  P.pip0 = new Uint16Array(MAXN);\n  P.pip1 = new Uint16Array(MAXN);\n  P.tierStart = new Int16Array(TIERS);\n  P.tmp = new Float64Array(GROUP + 2);\n  P.tmp2 = new Float64Array(GROUP + 2);\n  P.tape = new Uint8Array(MAXN * MAXF);\n  P.zbuf = new Float32Array(SW * SH);\n  // Which domino's spotted face each sample shows, plus one.\n  P.own = new Int16Array(SW * SH);\n  P.pf = new Float32Array(MAXN * 6);\n  P.cbuf = new Uint8Array(SW * SH * 3);\n  P.pix = new Float32Array(W * H * 3);\n  P.col = new Float32Array(3);\n  Object.assign(P, { built: false, mode: \"wait\", timer: 1.4, finger: -1, fingerOn: 0, frames: 0, play: 0, colour: 0, speed: 2, yaw: YAW0 });\n  build(P, 0.62);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const cl = (v, a, b) => Math.max(a, Math.min(b, v));\n  dt = Math.min(dt, 0.1);\n  P.colour = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.5, 4);\n  const ratio = 0.62 + 0.18 * cl(k[2], -1, 1);\n  P.yaw = YAW0 + YAW_SWING * cl(k[3], -1, 1);\n  // Everything below runs in film time.\n  dt *= P.speed / 2;\n\n  // A new spacing is a new run: the builder sets it out again and pushes.\n  if (Math.abs(ratio - P.ratio) > 0.004) {\n    build(P, ratio);\n    P.mode = \"wait\";\n    P.timer = P.built ? 0.8 : 1.4;\n    P.finger = -1;\n    P.frames = 0;\n  }\n  P.built = true;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.mode === \"wait\") P.timer = 0;\n    else if (P.mode === \"run\" && P.finger \u003c 0) {\n      // A second push at the start of the first shelf the wave has not reached.\n      let far = 0;\n      for (let i = 0; i \u003c P.n; i++) if (P.st[i] !== 0) far = i;\n      for (let t = 0; t \u003c TIERS; t++) {\n        const s = P.tierStart[t];\n        if (s > far + 2 && P.st[s] === 0) {\n          startPush(P, s);\n          break;\n        }\n      }\n    } else if (P.mode === \"rest\") P.timer = 0;\n  }\n\n  if (P.mode === \"wait\") {\n    P.timer -= dt;\n    if (P.timer \u003c= 0 && P.finger \u003c 0) {\n      startPush(P, 0);\n      Object.assign(P, { mode: \"run\", frames: 0, recEvery: 1, recT: 0, quiet: 0 });\n    }\n  }\n\n  // The fingertip: in for 0.4 s, pushes for 0.22 s until the domino is past\n  // its balance point, lets go and goes back out.\n  if (P.finger >= 0) {\n    P.finger += dt;\n    const i = P.fingerOn;\n    if (P.finger \u003c 0.4) P.th[i] = 0;\n    else if (P.finger \u003c 0.62) P.th[i] = (BETA + 0.07) * smooth(0.4, 0.62, P.finger);\n    else if (P.st[i] === 4) {\n      P.st[i] = 1;\n      P.th[i] = BETA + 0.07;\n      P.om[i] = 0.7;\n    }\n    if (P.finger > 1.1) P.finger = -1;\n  }\n\n  if (P.mode === \"run\") {\n    const steps = Math.ceil(dt / SUBSTEP);\n    const h = dt / steps;\n    for (let s = 0; s \u003c steps; s++) {\n      for (let i = P.n - 1; i >= 0; i--) if (P.st[i] === 1) stepFront(P, i, G0, h);\n      settle(P);\n    }\n    P.recT += dt;\n    if (P.recT >= REC_DT * P.recEvery) {\n      P.recT -= REC_DT * P.recEvery;\n      record(P);\n    }\n    let moving = P.finger >= 0;\n    for (let i = 0; i \u003c P.n && !moving; i++) if (P.st[i] === 1 || P.st[i] === 4) moving = true;\n    P.quiet = moving ? 0 : P.quiet + dt;\n    if (P.quiet > 0.4) {\n      record(P);\n      P.mode = \"rest\";\n      P.timer = 2.2;\n    }\n  } else if (P.mode === \"rest\") {\n    P.timer -= dt;\n    if (P.timer \u003c= 0) {\n      P.mode = \"rewind\";\n      P.play = P.frames - 1;\n    }\n  } else if (P.mode === \"rewind\") {\n    // The film runs backwards three times as fast; every domino springs up\n    // the way it fell.\n    P.play -= (dt * REWIND) / (REC_DT * P.recEvery);\n    if (P.play \u003c= 0) {\n      standAll(P);\n      P.mode = \"wait\";\n      P.timer = 1.1;\n    } else {\n      const f0 = Math.floor(P.play);\n      const f1 = Math.min(P.frames - 1, f0 + 1);\n      const a = P.play - f0;\n      const s = Math.PI / 2 / 255;\n      for (let i = 0; i \u003c P.n; i++)\n        P.th[i] = s * ((1 - a) * P.tape[f0 * MAXN + i] + a * P.tape[f1 * MAXN + i]);\n    }\n  }\n}\n\n// The camera: screen right r, screen up u, c toward the camera.\nfunction camera(P) {\n  const sp = Math.sin(P.yaw);\n  const cp = Math.cos(P.yaw);\n  const se = Math.sin(PITCH);\n  const ce = Math.cos(PITCH);\n  P.rx = cp;\n  P.rz = sp;\n  P.ux = sp * se;\n  P.uy = ce;\n  P.uz = -cp * se;\n  P.cx = -sp * ce;\n  P.cy = se;\n  P.cz = cp * ce;\n  // Centre the run on the panel by its top and bottom shelves' corners.\n  const b = [1e9, -1e9, 1e9, -1e9];\n  for (const x of [-TURN_R - 3, RUN + TURN_R + 3])\n    for (const z of [DWID, -BACK - DWID])\n      for (const y of [tierY(0) + DH + 1, tierY(TIERS - 1) - 2]) {\n        const sx = x * P.rx + z * P.rz;\n        const sy = -(x * P.ux + y * P.uy + z * P.uz);\n        b[0] = Math.min(b[0], sx);\n        b[1] = Math.max(b[1], sx);\n        b[2] = Math.min(b[2], sy);\n        b[3] = Math.max(b[3], sy);\n      }\n  P.X0 = W / 2 - (b[0] + b[1]) / 2;\n  P.Y0 = H / 2 - (b[2] + b[3]) / 2;\n}\n\n// One lamp, low on the left: it lights a standing domino's face full on and\n// only grazes one that lies. The room adds a little light to the wood.\nconst LX = -0.975;\nconst LY = 0.05;\n\n// One face of a box into the samples where it is nearest: corner o, edges a\n// and b (across and up on a spotted face), outward normal n.\nfunction face(P, ox, oy, oz, ax, ay, az, bx, by, bz, nx, ny, nz, col, spots) {\n  if (nx * P.cx + ny * P.cy + nz * P.cz \u003c= 0.02) return;\n  const shade = P.amb + P.dif * Math.max(0, nx * LX + ny * LY) + P.front * Math.max(0, nz);\n  const cr = col[0] * shade;\n  const cg = col[1] * shade;\n  const cb = col[2] * shade;\n  const sx = (P.X0 + ox * P.rx + oz * P.rz) * SS;\n  const sy = (P.Y0 - (ox * P.ux + oy * P.uy + oz * P.uz)) * SS;\n  const sd = ox * P.cx + oy * P.cy + oz * P.cz;\n  const eax = (ax * P.rx + az * P.rz) * SS;\n  const eay = -(ax * P.ux + ay * P.uy + az * P.uz) * SS;\n  const ead = ax * P.cx + ay * P.cy + az * P.cz;\n  const ebx = (bx * P.rx + bz * P.rz) * SS;\n  const eby = -(bx * P.ux + by * P.uy + bz * P.uz) * SS;\n  const ebd = bx * P.cx + by * P.cy + bz * P.cz;\n  const det = eax * eby - eay * ebx;\n  if (Math.abs(det) \u003c 0.05) return;\n  const inv = 1 / det;\n  const minX = Math.max(0, Math.floor(sx + Math.min(0, eax) + Math.min(0, ebx)));\n  const maxX = Math.min(SW - 1, Math.ceil(sx + Math.max(0, eax) + Math.max(0, ebx)));\n  const minY = Math.max(0, Math.floor(sy + Math.min(0, eay) + Math.min(0, eby)));\n  const maxY = Math.min(SH - 1, Math.ceil(sy + Math.max(0, eay) + Math.max(0, eby)));\n  const zb = P.zbuf;\n  const cbuf = P.cbuf;\n  const own = P.own;\n  const id = spots ? P.cur + 1 : 0;\n  // Spots once the face is wide and tall enough for three by three a half.\n  const la = Math.hypot(eax, eay);\n  const lb = Math.hypot(ebx, eby);\n  const showPips = id > 0 && Math.abs(det) > 2.6 * SS * lb && Math.abs(det) > 6 * SS * la;\n  if (showPips) {\n    P.pf.set([sx, sy, eax, eay, ebx, eby], P.cur * 6);\n    P.pfOn[P.cur] = 1;\n  }\n  for (let y = minY; y \u003c= maxY; y++) {\n    const qy = y + 0.5 - sy;\n    for (let x = minX; x \u003c= maxX; x++) {\n      const qx = x + 0.5 - sx;\n      const a = (qx * eby - qy * ebx) * inv;\n      if (a \u003c 0 || a > 1) continue;\n      const b = (eax * qy - eay * qx) * inv;\n      if (b \u003c 0 || b > 1) continue;\n      const d = sd + a * ead + b * ebd;\n      const s = y * SW + x;\n      if (d \u003c= zb[s]) continue;\n      zb[s] = d;\n      own[s] = id;\n      // The bar between the two halves.\n      const k = showPips && Math.abs(b - 0.5) \u003c 0.03 ? 0.5 : 1;\n      cbuf[s * 3] = cr * k;\n      cbuf[s * 3 + 1] = cg * k;\n      cbuf[s * 3 + 2] = cb * k;\n    }\n  }\n}\n\n// A box from corner o along three edges a (thickness), b (across), c (up).\n// pip: -1 no spots, 0 spots on the a = 0 face, 1 on the a = 1 face.\nfunction box(P, ox, oy, oz, ax, ay, az, bx, by, bz, cx, cy, cz, la, lb, lc, col, pip) {\n  const na = 1 / la;\n  const nb = 1 / lb;\n  const nc = 1 / lc;\n  face(P, ox, oy, oz, bx, by, bz, cx, cy, cz, -ax * na, -ay * na, -az * na, col, pip === 0);\n  face(P, ox + ax, oy + ay, oz + az, bx, by, bz, cx, cy, cz, ax * na, ay * na, az * na, col, pip === 1);\n  face(P, ox, oy, oz, ax, ay, az, cx, cy, cz, -bx * nb, -by * nb, -bz * nb, col, false);\n  face(P, ox + bx, oy + by, oz + bz, ax, ay, az, cx, cy, cz, bx * nb, by * nb, bz * nb, col, false);\n  face(P, ox, oy, oz, ax, ay, az, bx, by, bz, -cx * nc, -cy * nc, -cz * nc, col, false);\n  face(P, ox + cx, oy + cy, oz + cz, ax, ay, az, bx, by, bz, cx * nc, cy * nc, cz * nc, col, false);\n}\n\nconst WOOD = [52, 34, 22];\nconst WOOD_EDGE = [96, 64, 40];\n\nexport function draw(display, params, time) {\n  const P = params;\n  camera(P);\n  P.zbuf.fill(-1e9);\n  P.own.fill(0);\n  P.pfOn.fill(0);\n  P.cur = -1;\n\n  // Dark wood that takes the room's light on its front edges, so a shelf\n  // reads as one dim line: a plank under each straight run, and in each turn\n  // a spiral stair, a post with a step out from it under every domino.\n  Object.assign(P, { amb: 0.1, dif: 0.2, front: 0.3 });\n  const deep = DWID + 2.4;\n  for (let k = 0; k \u003c TIERS; k++) {\n    const y = tierY(k);\n    box(P, -2, y - 1, (k % 2 ? -BACK : 0) + deep / 2, RUN + 4, 0, 0, 0, 0, -deep, 0, 1, 0, RUN + 4, deep, 1, WOOD_EDGE, -1);\n    const tall = y - tierY(k + 1);\n    if (k \u003c TIERS - 1) box(P, (k % 2 ? 0 : RUN) - 0.8, y - tall, -TURN_R - 0.8, 1.6, 0, 0, 0, 0, 1.6, 0, tall, 0, 1.6, 1.6, tall, WOOD, -1);\n  }\n  const out = TURN_R + DWID / 2 + 0.8;\n  const step = DT + 2.8;\n  for (let i = 0; i \u003c P.n; i++) {\n    const hx = P.hx[i];\n    const hz = P.hz[i];\n    if (P.turn[i]) box(P, P.px[i] - hx * (step - 1.4) + hz * TURN_R, P.py[i] - 1, P.pz[i] - hz * (step - 1.4) - hx * TURN_R, hx * step, 0, hz * step, -hz * out, 0, hx * out, 0, 1, 0, step, out, 1, WOOD_EDGE, -1);\n  }\n\n  // The dominoes, in the lamp's light.\n  Object.assign(P, { amb: 0.04, dif: 0.96, front: 0 });\n  const q = P.col;\n  const sat = smooth(0, 0.35, P.colour);\n  for (let i = 0; i \u003c P.n; i++) {\n    const s = Math.sin(P.th[i]);\n    const c = Math.cos(P.th[i]);\n    const hx = P.hx[i];\n    const hz = P.hz[i];\n    // Tipped edges: thickness along the heading, width across, height up.\n    const ax = hx * c * DT;\n    const az = hz * c * DT;\n    const ox = P.px[i] - ax + hz * (DWID / 2);\n    const oz = P.pz[i] - az - hx * (DWID / 2);\n    hsvInto(q, P.hue[i] + P.colour);\n    for (let j = 0; j \u003c 3; j++) q[j] = IVORY[j] + (q[j] - IVORY[j]) * sat;\n    P.cur = i;\n    box(P, ox, P.py[i] + s * DT, oz, ax, -s * DT, az, -hz * DWID, 0, hx * DWID, hx * s * DH, c * DH, hz * s * DH, DT, DWID, DH, q, P.pipFront[i]);\n  }\n\n  // Resolve the samples over a dark wall, a little warmer at the foot.\n  const pix = P.pix;\n  const zb = P.zbuf;\n  const cb = P.cbuf;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let j = 0; j \u003c 4; j++) {\n        const s = (y * SS + (j >> 1)) * SW + x * SS + (j & 1);\n        if (zb[s] > -1e8) {\n          r += cb[s * 3];\n          g += cb[s * 3 + 1];\n          b += cb[s * 3 + 2];\n        } else {\n          r += 5 + (3 * y) / H;\n          g += 5 + (2 * y) / H;\n          b += 9;\n        }\n      }\n      const p = (y * W + x) * 3;\n      pix[p] = r / 4;\n      pix[p + 1] = g / 4;\n      pix[p + 2] = b / 4;\n    }\n\n  drawPips(P);\n  if (P.finger >= 0) drawFinger(P);\n\n  for (let p = 0; p \u003c W * H; p++) display.setPixel(p % W, Math.floor(p / W), Math.min(255, pix[p * 3]), Math.min(255, pix[p * 3 + 1]), Math.min(255, pix[p * 3 + 2]));\n}\n\n// The spots, one dark LED each where that LED shows the spotted face. Drawn\n// soft, they smeared half of every face to grey.\nfunction drawPips(P) {\n  const pix = P.pix;\n  const own = P.own;\n  for (let i = 0; i \u003c P.n; i++) {\n    if (!P.pfOn[i]) continue;\n    const o = i * 6;\n    for (let half = 0; half \u003c 2; half++) {\n      const mask = half ? P.pip1[i] : P.pip0[i];\n      for (let bit = 0; bit \u003c 9; bit++) {\n        if (!(mask & (1 \u003c\u003c bit))) continue;\n        const a = 0.2 + 0.3 * (bit % 3);\n        const b = 0.5 * half + 0.1 + 0.15 * Math.floor(bit / 3);\n        const x = Math.floor((P.pf[o] + a * P.pf[o + 2] + b * P.pf[o + 4]) / SS);\n        const y = Math.floor((P.pf[o + 1] + a * P.pf[o + 3] + b * P.pf[o + 5]) / SS);\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        let mine = 0;\n        for (let j = 0; j \u003c SS; j++) for (let k = 0; k \u003c SS; k++) if (own[(y * SS + j) * SW + x * SS + k] === i + 1) mine++;\n        if (mine \u003c 3) continue;\n        const p = (y * W + x) * 3;\n        pix[p] *= 0.08;\n        pix[p + 1] *= 0.08;\n        pix[p + 2] *= 0.08;\n      }\n    }\n  }\n}\n\n// The fingertip comes from behind the domino it pushes, a little from above,\n// and touches the domino's back three quarters of the way up.\nfunction drawFinger(P) {\n  const i = P.fingerOn;\n  const s = Math.sin(P.th[i]);\n  const c = Math.cos(P.th[i]);\n  const hx = P.hx[i];\n  const hz = P.hz[i];\n  const back = DH * 0.75 * s - DT * c;\n  const tx = P.px[i] + hx * back;\n  const ty = P.py[i] + DT * s + c * DH * 0.75;\n  const tz = P.pz[i] + hz * back;\n  // Backwards along the heading on the panel, tilted 20 degrees up.\n  const dx = -(hx * P.rx + hz * P.rz);\n  const dy = hx * P.ux + hz * P.uz;\n  const up = dx > 0 ? -0.34 : 0.34;\n  const l = Math.hypot(dx, dy) || 1;\n  const ex = (dx * Math.cos(up) - dy * Math.sin(up)) / l;\n  const ey = (dx * Math.sin(up) + dy * Math.cos(up)) / l;\n  const f = P.finger;\n  const out = 2 + 26 * (f \u003c 0.4 ? 1 - smooth(0, 0.4, f) : smooth(0.62, 1.05, f));\n  const ax = P.X0 + tx * P.rx + tz * P.rz + ex * out;\n  const ay = P.Y0 - (tx * P.ux + ty * P.uy + tz * P.uz) + ey * out;\n  const pix = P.pix;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x + 0.5 - ax;\n      const py = y + 0.5 - ay;\n      const along = Math.max(0, px * ex + py * ey);\n      const cov = Math.min(1, 2.2 - Math.hypot(px - along * ex, py - along * ey));\n      if (cov \u003c= 0) continue;\n      // Skin, lighter along the top, and the nail at the tip.\n      const top = ((ex > 0 ? ey : -ey) * px - (ex > 0 ? ex : -ex) * py) / 1.7;\n      const nail = along \u003c 2.6 && top > -0.2;\n      const p = (y * W + x) * 3;\n      pix[p] += ((nail ? 250 : 232 + 14 * top) - pix[p]) * cov;\n      pix[p + 1] += ((nail ? 222 : 170 + 18 * top) - pix[p + 1]) * cov;\n      pix[p + 2] += ((nail ? 212 : 138 + 16 * top) - pix[p + 2]) * cov;\n    }\n}\n","layer":{"id":"layer-domino-run","type":"code","name":"domino-run","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Domino Run\n// Family:  physics\n// Idea:    A fingertip tips the first of forty dominoes and the wave runs down six shelves and five spiral stairs at its own physical pace, each domino going dark in a low lamp's light as it falls, until the run rewinds.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: domino toppling runs, with the pushing group moved as one body after J. M. J. van Leeuwen's \"The domino effect\" (2004)\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Speed=0.5..4, Spacing=-1..1, Angle=-1..1\n//\n// Knob 1: Colour. Ivory dominoes with black spots at 0; turned up, the run becomes a set of coloured toppling dominoes whose hues walk along the chain.\n// Knob 2: Speed. How fast the film runs, finger and all: at 2 the forty dominoes fall in under five seconds, at 0.5 the wave crawls, at 4 it is half of real speed.\n// Knob 3: Spacing. The gap between dominoes, from 0.44 to 0.8 of a domino's height; a wider gap means fewer dominoes and a flatter pile once they fall.\n// Knob 4: Angle. Swings the camera round the run, from almost straight side-on, where only the narrow edges show, to well round, where the spotted faces fill the shelves.\n// Buttons: K1 tap pushes: the first domino if the run is waiting, the start of a shelf ahead of the wave if it is running (a second wave), the rewind if it is over.\n\nconst W = 64;\nconst H = 128;\n// Two by two samples per LED, or a tipping edge jumps a whole LED at a time.\nconst SS = 2;\nconst SW = W * SS;\nconst SH = H * SS;\nconst MAXN = 64;\nconst TIERS = 6;\n// A domino in LEDs, in a real one's proportions (48 x 24 x 7.5 mm): one LED\n// is three millimetres.\nconst DH = 16;\nconst DT = 2.5;\nconst DWID = 8;\n// A shelf's straight run and the half turn at each end: the run goes into\n// the room at the right and comes back at the left, so every other shelf\n// stands 14 LEDs further back.\nconst RUN = 50;\nconst TURN_R = 7;\nconst BACK = 2 * TURN_R;\nconst SPACING = 20.5;\n// The camera looks down ten degrees, enough to see shelves as shelves and\n// turns as curves, and stands 40 degrees round to the left.\nconst PITCH = 0.18;\nconst YAW0 = 0.7;\nconst YAW_SWING = 0.44;\n// Tipping about the front bottom edge: the centre of mass sits behind the\n// edge by atan(t / h), and the moment of inertia is a slab's about its edge.\nconst BETA = Math.atan(DT / DH);\nconst RCOM = 0.5 * Math.hypot(DH, DT);\nconst INERTIA = (DH * DH + DT * DT) / 3;\n// The share of the pushing group's momentum that carries into the next\n// domino: 0.93 settles a long flat run at 1.5 sqrt(g h), as real runs go, at\n// every spacing the knob reaches. A stair hands the wave height to spend, so\n// a five-domino shelf after one runs nearer 1.8.\nconst KAPPA = 0.93;\n// Gravity in LEDs per second squared. Real gravity at three millimetres an\n// LED is about 3270, so the film runs at a little over a quarter of real\n// speed and a flat run would cover 95 LEDs a second.\nconst G0 = 250;\nconst GROUP = 8;\nconst SUBSTEP = 1 / 150;\n// The recording the rewind plays back: one pose a thirtieth of a second.\nconst MAXF = 600;\nconst REC_DT = 1 / 30;\nconst REWIND = 3;\n\n// Spots on each half of a face, as bits of a three by three grid.\nconst PIPMASK = [0, 16, 257, 273, 325, 341, 365];\n// Ivory as the lamp's warm bulb shows it.\nconst IVORY = [255, 230, 186];\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Hue h at saturation 0.85, full value.\nfunction hsvInto(out, h) {\n  for (let j = 0; j \u003c 3; j++) {\n    const k = (5 - 2 * j + 6 * (h - Math.floor(h))) % 6;\n    out[j] = 255 * (1 - 0.85 * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n}\n\n// The angle domino i leans at when it rests on domino i + 1 at angle tn. In\n// i's frame (along its heading, y up) i + 1's back face starts at `gap` and\n// its ground sits `dy` higher. Either i's top corner presses on i + 1's back\n// face or, down a step, i's front face presses on i + 1's top back corner;\n// i rests on whichever it reaches first. 9: neither is in reach.\nfunction contact(gap, dy, tn) {\n  let best = 9;\n  const s = Math.sin(tn);\n  const c = Math.cos(tn);\n  const arg = (DT + dy * s - (gap + DT) * c) / DH;\n  if (arg >= -1 && arg \u003c= 1) {\n    const ti = tn - Math.asin(arg);\n    const px = DH * Math.sin(ti) - (gap + DT - DT * c);\n    const py = DH * Math.cos(ti) - (dy + DT * s);\n    const u = px * s + py * c;\n    if (u >= -0.01 && u \u003c= DH + 0.01) best = ti;\n  }\n  const cx = gap + DT - DT * c + DH * s;\n  const cy = dy + DT * s + DH * c;\n  if (cy > 0 && cx * cx + cy * cy \u003c= DH * DH) {\n    const ti = Math.atan2(cx, cy);\n    if (ti \u003c best) best = ti;\n  }\n  return best;\n}\n\nfunction tierY(k) {\n  // Shelves at the back are lowered by what the camera's pitch lifts them,\n  // so all six sit the same distance apart on the panel.\n  const lift = (BACK * Math.cos(YAW0) * Math.sin(PITCH)) / Math.cos(PITCH);\n  return -k * SPACING - (k % 2 ? lift : 0);\n}\n\n// A point on the run's path at arc length s: position, heading and ground.\nfunction pathAt(s, out) {\n  const turn = Math.PI * TURN_R;\n  const per = RUN + turn;\n  let k = Math.floor(s / per);\n  let u = s - k * per;\n  if (k >= TIERS - 1) {\n    k = TIERS - 1;\n    u = s - k * per;\n  }\n  const even = k % 2 === 0;\n  if (u \u003c= RUN || k === TIERS - 1) {\n    out.x = even ? u : RUN - u;\n    out.z = even ? 0 : -BACK;\n    out.hx = even ? 1 : -1;\n    out.hz = 0;\n    out.y = tierY(k);\n    out.turn = 0;\n  } else {\n    const a = (u - RUN) / TURN_R;\n    if (even) {\n      out.x = RUN + TURN_R * Math.sin(a);\n      out.z = -TURN_R + TURN_R * Math.cos(a);\n      out.hx = Math.cos(a);\n      out.hz = -Math.sin(a);\n    } else {\n      out.x = -TURN_R * Math.sin(a);\n      out.z = -TURN_R - TURN_R * Math.cos(a);\n      out.hx = -Math.cos(a);\n      out.hz = Math.sin(a);\n    }\n    // Each domino in a turn has its own step, going down to the next shelf.\n    out.y = tierY(k) + (tierY(k + 1) - tierY(k)) * (a / Math.PI);\n    out.turn = 1;\n  }\n  out.tier = k;\n}\n\nfunction build(P, ratio) {\n  P.ratio = ratio;\n  const d = ratio * DH;\n  const total = TIERS * RUN + (TIERS - 1) * Math.PI * TURN_R;\n  const q = {};\n  let n = 0;\n  let lastTier = -1;\n  P.tierStart.fill(-1);\n  for (let s = 1.5; s \u003c= total - DH - 1 && n \u003c MAXN; s += d) {\n    pathAt(s, q);\n    P.px[n] = q.x;\n    P.py[n] = q.y;\n    P.pz[n] = q.z;\n    P.hx[n] = q.hx;\n    P.hz[n] = q.hz;\n    if (q.tier !== lastTier && !q.turn) {\n      P.tierStart[q.tier] = n;\n      lastTier = q.tier;\n    }\n    // The builder set every domino with its spots toward the camera.\n    const toCam = -Math.sin(YAW0) * q.hx + Math.cos(YAW0) * q.hz;\n    P.pipFront[n] = toCam > 0 ? 1 : 0;\n    // Their numbers from two irrational strides, so no two neighbours match.\n    P.pip0[n] = PIPMASK[Math.floor(((n * 0.618 + 0.3) % 1) * 7)];\n    P.pip1[n] = PIPMASK[Math.floor(((n * 0.414 + 0.8) % 1) * 7)];\n    P.turn[n] = q.turn;\n    n++;\n  }\n  P.n = n;\n  for (let i = 0; i \u003c n - 1; i++) {\n    const dx = P.px[i + 1] - P.px[i];\n    const dz = P.pz[i + 1] - P.pz[i];\n    P.gap[i] = dx * P.hx[i] + dz * P.hz[i] - DT;\n    P.dy[i] = P.py[i + 1] - P.py[i];\n  }\n  for (let i = 0; i \u003c n; i++) P.hue[i] = (i / n) * 0.85;\n  standAll(P);\n}\n\nfunction standAll(P) {\n  P.th.fill(0);\n  P.om.fill(0);\n  P.st.fill(0);\n}\n\n// The pushing group: a moving front and the dominoes leaning on it. Every\n// angle in it follows from the front's, so it moves as one body.\nfunction pose(P, f, x, out) {\n  out[0] = x;\n  let m = 1;\n  for (let j = 1; j \u003c= GROUP && f - j >= 0 && P.st[f - j] === 2; j++) {\n    const i = f - j;\n    out[j] = Math.min(Math.PI / 2, contact(P.gap[i], P.dy[i], out[j - 1]));\n    m++;\n  }\n  return m;\n}\n\nfunction potential(P, f, x) {\n  const m = pose(P, f, x, P.tmp);\n  let v = 0;\n  for (let j = 0; j \u003c m; j++) v += RCOM * Math.cos(P.tmp[j] - BETA);\n  return v;\n}\n\nfunction inertia(P, f, x) {\n  const e = 1e-4;\n  const m = pose(P, f, x + e, P.tmp);\n  for (let j = 0; j \u003c m; j++) P.tmp2[j] = P.tmp[j];\n  pose(P, f, x - e, P.tmp);\n  let s = 0;\n  for (let j = 0; j \u003c m; j++) {\n    const J = (P.tmp2[j] - P.tmp[j]) / (2 * e);\n    s += J * J;\n  }\n  return INERTIA * s;\n}\n\nfunction stepFront(P, f, g, dt) {\n  const x = P.th[f];\n  const e = 1e-4;\n  const dV = (g * (potential(P, f, x + e) - potential(P, f, x - e))) / (2 * e);\n  const I = inertia(P, f, x);\n  const dI = (inertia(P, f, x + 1e-3) - inertia(P, f, x - 1e-3)) / 2e-3;\n  let w = P.om[f];\n  // A group whose inertia shrinks hands energy back to its front. One whose\n  // inertia grew would make a leaning domino outrun the one under it, and a\n  // contact only pushes: that domino lags instead.\n  w += ((-dV - 0.5 * Math.min(0, dI) * w * w) / I) * dt;\n  let th = x + w * dt;\n  if (th \u003c 0) {\n    // Not pushed hard enough: it rocks back and stands.\n    th = 0;\n    w = 0;\n    P.st[f] = 0;\n  }\n  const last = f === P.n - 1;\n  if (!last) {\n    const next = P.st[f + 1];\n    const c = contact(P.gap[f], P.dy[f], P.th[f + 1]);\n    if (th >= c) {\n      th = c;\n      if (next === 0) {\n        // Generalised momentum carries across: the old front now moves at\n        // J times the new one's rate.\n        const J = (contact(P.gap[f], P.dy[f], 1e-3) - contact(P.gap[f], P.dy[f], 0)) / 1e-3;\n        const before = I * w;\n        P.st[f] = 2;\n        P.st[f + 1] = 1;\n        P.th[f + 1] = 0;\n        P.th[f] = th;\n        const after = inertia(P, f + 1, 0);\n        P.om[f + 1] = (KAPPA * before * J) / after;\n        P.om[f] = 0;\n        return;\n      }\n      // It met dominoes that already lie: the group stops on them.\n      P.st[f] = 2;\n      P.om[f] = 0;\n      P.th[f] = th;\n      return;\n    }\n  } else if (th >= Math.PI / 2) {\n    // The last one lands flat and bounces.\n    th = Math.PI / 2;\n    w = Math.abs(w) > 1.5 ? -0.22 * w : 0;\n    if (w === 0) P.st[f] = 3;\n  }\n  P.th[f] = th;\n  P.om[f] = w;\n}\n\nfunction settle(P) {\n  // Leaning dominoes follow the one they lean on, front to back.\n  for (let i = P.n - 2; i >= 0; i--)\n    if (P.st[i] === 2) P.th[i] = Math.min(Math.PI / 2, contact(P.gap[i], P.dy[i], P.th[i + 1]));\n}\n\nfunction record(P) {\n  if (P.frames >= MAXF) {\n    // Out of tape: keep every other pose and record at half the rate.\n    const n = P.n;\n    for (let f = 0; f \u003c MAXF / 2; f++) for (let i = 0; i \u003c n; i++) P.tape[f * MAXN + i] = P.tape[2 * f * MAXN + i];\n    P.frames = MAXF / 2;\n    P.recEvery *= 2;\n  }\n  const o = P.frames * MAXN;\n  for (let i = 0; i \u003c P.n; i++) P.tape[o + i] = Math.round((P.th[i] / (Math.PI / 2)) * 255);\n  P.frames++;\n}\n\nfunction startPush(P, i) {\n  P.finger = 0;\n  P.fingerOn = i;\n  P.st[i] = 4;\n}\n\nexport function setup(params) {\n  const P = params;\n  // Per domino: pivot (front bottom edge), heading, gap and step to the next.\n  for (const key of [\"px\", \"py\", \"pz\", \"hx\", \"hz\", \"gap\", \"dy\", \"th\", \"om\", \"hue\"]) P[key] = new Float32Array(MAXN);\n  for (const key of [\"st\", \"pipFront\", \"turn\", \"pfOn\"]) P[key] = new Uint8Array(MAXN);\n  P.pip0 = new Uint16Array(MAXN);\n  P.pip1 = new Uint16Array(MAXN);\n  P.tierStart = new Int16Array(TIERS);\n  P.tmp = new Float64Array(GROUP + 2);\n  P.tmp2 = new Float64Array(GROUP + 2);\n  P.tape = new Uint8Array(MAXN * MAXF);\n  P.zbuf = new Float32Array(SW * SH);\n  // Which domino's spotted face each sample shows, plus one.\n  P.own = new Int16Array(SW * SH);\n  P.pf = new Float32Array(MAXN * 6);\n  P.cbuf = new Uint8Array(SW * SH * 3);\n  P.pix = new Float32Array(W * H * 3);\n  P.col = new Float32Array(3);\n  Object.assign(P, { built: false, mode: \"wait\", timer: 1.4, finger: -1, fingerOn: 0, frames: 0, play: 0, colour: 0, speed: 2, yaw: YAW0 });\n  build(P, 0.62);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const cl = (v, a, b) => Math.max(a, Math.min(b, v));\n  dt = Math.min(dt, 0.1);\n  P.colour = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.5, 4);\n  const ratio = 0.62 + 0.18 * cl(k[2], -1, 1);\n  P.yaw = YAW0 + YAW_SWING * cl(k[3], -1, 1);\n  // Everything below runs in film time.\n  dt *= P.speed / 2;\n\n  // A new spacing is a new run: the builder sets it out again and pushes.\n  if (Math.abs(ratio - P.ratio) > 0.004) {\n    build(P, ratio);\n    P.mode = \"wait\";\n    P.timer = P.built ? 0.8 : 1.4;\n    P.finger = -1;\n    P.frames = 0;\n  }\n  P.built = true;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.mode === \"wait\") P.timer = 0;\n    else if (P.mode === \"run\" && P.finger \u003c 0) {\n      // A second push at the start of the first shelf the wave has not reached.\n      let far = 0;\n      for (let i = 0; i \u003c P.n; i++) if (P.st[i] !== 0) far = i;\n      for (let t = 0; t \u003c TIERS; t++) {\n        const s = P.tierStart[t];\n        if (s > far + 2 && P.st[s] === 0) {\n          startPush(P, s);\n          break;\n        }\n      }\n    } else if (P.mode === \"rest\") P.timer = 0;\n  }\n\n  if (P.mode === \"wait\") {\n    P.timer -= dt;\n    if (P.timer \u003c= 0 && P.finger \u003c 0) {\n      startPush(P, 0);\n      Object.assign(P, { mode: \"run\", frames: 0, recEvery: 1, recT: 0, quiet: 0 });\n    }\n  }\n\n  // The fingertip: in for 0.4 s, pushes for 0.22 s until the domino is past\n  // its balance point, lets go and goes back out.\n  if (P.finger >= 0) {\n    P.finger += dt;\n    const i = P.fingerOn;\n    if (P.finger \u003c 0.4) P.th[i] = 0;\n    else if (P.finger \u003c 0.62) P.th[i] = (BETA + 0.07) * smooth(0.4, 0.62, P.finger);\n    else if (P.st[i] === 4) {\n      P.st[i] = 1;\n      P.th[i] = BETA + 0.07;\n      P.om[i] = 0.7;\n    }\n    if (P.finger > 1.1) P.finger = -1;\n  }\n\n  if (P.mode === \"run\") {\n    const steps = Math.ceil(dt / SUBSTEP);\n    const h = dt / steps;\n    for (let s = 0; s \u003c steps; s++) {\n      for (let i = P.n - 1; i >= 0; i--) if (P.st[i] === 1) stepFront(P, i, G0, h);\n      settle(P);\n    }\n    P.recT += dt;\n    if (P.recT >= REC_DT * P.recEvery) {\n      P.recT -= REC_DT * P.recEvery;\n      record(P);\n    }\n    let moving = P.finger >= 0;\n    for (let i = 0; i \u003c P.n && !moving; i++) if (P.st[i] === 1 || P.st[i] === 4) moving = true;\n    P.quiet = moving ? 0 : P.quiet + dt;\n    if (P.quiet > 0.4) {\n      record(P);\n      P.mode = \"rest\";\n      P.timer = 2.2;\n    }\n  } else if (P.mode === \"rest\") {\n    P.timer -= dt;\n    if (P.timer \u003c= 0) {\n      P.mode = \"rewind\";\n      P.play = P.frames - 1;\n    }\n  } else if (P.mode === \"rewind\") {\n    // The film runs backwards three times as fast; every domino springs up\n    // the way it fell.\n    P.play -= (dt * REWIND) / (REC_DT * P.recEvery);\n    if (P.play \u003c= 0) {\n      standAll(P);\n      P.mode = \"wait\";\n      P.timer = 1.1;\n    } else {\n      const f0 = Math.floor(P.play);\n      const f1 = Math.min(P.frames - 1, f0 + 1);\n      const a = P.play - f0;\n      const s = Math.PI / 2 / 255;\n      for (let i = 0; i \u003c P.n; i++)\n        P.th[i] = s * ((1 - a) * P.tape[f0 * MAXN + i] + a * P.tape[f1 * MAXN + i]);\n    }\n  }\n}\n\n// The camera: screen right r, screen up u, c toward the camera.\nfunction camera(P) {\n  const sp = Math.sin(P.yaw);\n  const cp = Math.cos(P.yaw);\n  const se = Math.sin(PITCH);\n  const ce = Math.cos(PITCH);\n  P.rx = cp;\n  P.rz = sp;\n  P.ux = sp * se;\n  P.uy = ce;\n  P.uz = -cp * se;\n  P.cx = -sp * ce;\n  P.cy = se;\n  P.cz = cp * ce;\n  // Centre the run on the panel by its top and bottom shelves' corners.\n  const b = [1e9, -1e9, 1e9, -1e9];\n  for (const x of [-TURN_R - 3, RUN + TURN_R + 3])\n    for (const z of [DWID, -BACK - DWID])\n      for (const y of [tierY(0) + DH + 1, tierY(TIERS - 1) - 2]) {\n        const sx = x * P.rx + z * P.rz;\n        const sy = -(x * P.ux + y * P.uy + z * P.uz);\n        b[0] = Math.min(b[0], sx);\n        b[1] = Math.max(b[1], sx);\n        b[2] = Math.min(b[2], sy);\n        b[3] = Math.max(b[3], sy);\n      }\n  P.X0 = W / 2 - (b[0] + b[1]) / 2;\n  P.Y0 = H / 2 - (b[2] + b[3]) / 2;\n}\n\n// One lamp, low on the left: it lights a standing domino's face full on and\n// only grazes one that lies. The room adds a little light to the wood.\nconst LX = -0.975;\nconst LY = 0.05;\n\n// One face of a box into the samples where it is nearest: corner o, edges a\n// and b (across and up on a spotted face), outward normal n.\nfunction face(P, ox, oy, oz, ax, ay, az, bx, by, bz, nx, ny, nz, col, spots) {\n  if (nx * P.cx + ny * P.cy + nz * P.cz \u003c= 0.02) return;\n  const shade = P.amb + P.dif * Math.max(0, nx * LX + ny * LY) + P.front * Math.max(0, nz);\n  const cr = col[0] * shade;\n  const cg = col[1] * shade;\n  const cb = col[2] * shade;\n  const sx = (P.X0 + ox * P.rx + oz * P.rz) * SS;\n  const sy = (P.Y0 - (ox * P.ux + oy * P.uy + oz * P.uz)) * SS;\n  const sd = ox * P.cx + oy * P.cy + oz * P.cz;\n  const eax = (ax * P.rx + az * P.rz) * SS;\n  const eay = -(ax * P.ux + ay * P.uy + az * P.uz) * SS;\n  const ead = ax * P.cx + ay * P.cy + az * P.cz;\n  const ebx = (bx * P.rx + bz * P.rz) * SS;\n  const eby = -(bx * P.ux + by * P.uy + bz * P.uz) * SS;\n  const ebd = bx * P.cx + by * P.cy + bz * P.cz;\n  const det = eax * eby - eay * ebx;\n  if (Math.abs(det) \u003c 0.05) return;\n  const inv = 1 / det;\n  const minX = Math.max(0, Math.floor(sx + Math.min(0, eax) + Math.min(0, ebx)));\n  const maxX = Math.min(SW - 1, Math.ceil(sx + Math.max(0, eax) + Math.max(0, ebx)));\n  const minY = Math.max(0, Math.floor(sy + Math.min(0, eay) + Math.min(0, eby)));\n  const maxY = Math.min(SH - 1, Math.ceil(sy + Math.max(0, eay) + Math.max(0, eby)));\n  const zb = P.zbuf;\n  const cbuf = P.cbuf;\n  const own = P.own;\n  const id = spots ? P.cur + 1 : 0;\n  // Spots once the face is wide and tall enough for three by three a half.\n  const la = Math.hypot(eax, eay);\n  const lb = Math.hypot(ebx, eby);\n  const showPips = id > 0 && Math.abs(det) > 2.6 * SS * lb && Math.abs(det) > 6 * SS * la;\n  if (showPips) {\n    P.pf.set([sx, sy, eax, eay, ebx, eby], P.cur * 6);\n    P.pfOn[P.cur] = 1;\n  }\n  for (let y = minY; y \u003c= maxY; y++) {\n    const qy = y + 0.5 - sy;\n    for (let x = minX; x \u003c= maxX; x++) {\n      const qx = x + 0.5 - sx;\n      const a = (qx * eby - qy * ebx) * inv;\n      if (a \u003c 0 || a > 1) continue;\n      const b = (eax * qy - eay * qx) * inv;\n      if (b \u003c 0 || b > 1) continue;\n      const d = sd + a * ead + b * ebd;\n      const s = y * SW + x;\n      if (d \u003c= zb[s]) continue;\n      zb[s] = d;\n      own[s] = id;\n      // The bar between the two halves.\n      const k = showPips && Math.abs(b - 0.5) \u003c 0.03 ? 0.5 : 1;\n      cbuf[s * 3] = cr * k;\n      cbuf[s * 3 + 1] = cg * k;\n      cbuf[s * 3 + 2] = cb * k;\n    }\n  }\n}\n\n// A box from corner o along three edges a (thickness), b (across), c (up).\n// pip: -1 no spots, 0 spots on the a = 0 face, 1 on the a = 1 face.\nfunction box(P, ox, oy, oz, ax, ay, az, bx, by, bz, cx, cy, cz, la, lb, lc, col, pip) {\n  const na = 1 / la;\n  const nb = 1 / lb;\n  const nc = 1 / lc;\n  face(P, ox, oy, oz, bx, by, bz, cx, cy, cz, -ax * na, -ay * na, -az * na, col, pip === 0);\n  face(P, ox + ax, oy + ay, oz + az, bx, by, bz, cx, cy, cz, ax * na, ay * na, az * na, col, pip === 1);\n  face(P, ox, oy, oz, ax, ay, az, cx, cy, cz, -bx * nb, -by * nb, -bz * nb, col, false);\n  face(P, ox + bx, oy + by, oz + bz, ax, ay, az, cx, cy, cz, bx * nb, by * nb, bz * nb, col, false);\n  face(P, ox, oy, oz, ax, ay, az, bx, by, bz, -cx * nc, -cy * nc, -cz * nc, col, false);\n  face(P, ox + cx, oy + cy, oz + cz, ax, ay, az, bx, by, bz, cx * nc, cy * nc, cz * nc, col, false);\n}\n\nconst WOOD = [52, 34, 22];\nconst WOOD_EDGE = [96, 64, 40];\n\nexport function draw(display, params, time) {\n  const P = params;\n  camera(P);\n  P.zbuf.fill(-1e9);\n  P.own.fill(0);\n  P.pfOn.fill(0);\n  P.cur = -1;\n\n  // Dark wood that takes the room's light on its front edges, so a shelf\n  // reads as one dim line: a plank under each straight run, and in each turn\n  // a spiral stair, a post with a step out from it under every domino.\n  Object.assign(P, { amb: 0.1, dif: 0.2, front: 0.3 });\n  const deep = DWID + 2.4;\n  for (let k = 0; k \u003c TIERS; k++) {\n    const y = tierY(k);\n    box(P, -2, y - 1, (k % 2 ? -BACK : 0) + deep / 2, RUN + 4, 0, 0, 0, 0, -deep, 0, 1, 0, RUN + 4, deep, 1, WOOD_EDGE, -1);\n    const tall = y - tierY(k + 1);\n    if (k \u003c TIERS - 1) box(P, (k % 2 ? 0 : RUN) - 0.8, y - tall, -TURN_R - 0.8, 1.6, 0, 0, 0, 0, 1.6, 0, tall, 0, 1.6, 1.6, tall, WOOD, -1);\n  }\n  const out = TURN_R + DWID / 2 + 0.8;\n  const step = DT + 2.8;\n  for (let i = 0; i \u003c P.n; i++) {\n    const hx = P.hx[i];\n    const hz = P.hz[i];\n    if (P.turn[i]) box(P, P.px[i] - hx * (step - 1.4) + hz * TURN_R, P.py[i] - 1, P.pz[i] - hz * (step - 1.4) - hx * TURN_R, hx * step, 0, hz * step, -hz * out, 0, hx * out, 0, 1, 0, step, out, 1, WOOD_EDGE, -1);\n  }\n\n  // The dominoes, in the lamp's light.\n  Object.assign(P, { amb: 0.04, dif: 0.96, front: 0 });\n  const q = P.col;\n  const sat = smooth(0, 0.35, P.colour);\n  for (let i = 0; i \u003c P.n; i++) {\n    const s = Math.sin(P.th[i]);\n    const c = Math.cos(P.th[i]);\n    const hx = P.hx[i];\n    const hz = P.hz[i];\n    // Tipped edges: thickness along the heading, width across, height up.\n    const ax = hx * c * DT;\n    const az = hz * c * DT;\n    const ox = P.px[i] - ax + hz * (DWID / 2);\n    const oz = P.pz[i] - az - hx * (DWID / 2);\n    hsvInto(q, P.hue[i] + P.colour);\n    for (let j = 0; j \u003c 3; j++) q[j] = IVORY[j] + (q[j] - IVORY[j]) * sat;\n    P.cur = i;\n    box(P, ox, P.py[i] + s * DT, oz, ax, -s * DT, az, -hz * DWID, 0, hx * DWID, hx * s * DH, c * DH, hz * s * DH, DT, DWID, DH, q, P.pipFront[i]);\n  }\n\n  // Resolve the samples over a dark wall, a little warmer at the foot.\n  const pix = P.pix;\n  const zb = P.zbuf;\n  const cb = P.cbuf;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let j = 0; j \u003c 4; j++) {\n        const s = (y * SS + (j >> 1)) * SW + x * SS + (j & 1);\n        if (zb[s] > -1e8) {\n          r += cb[s * 3];\n          g += cb[s * 3 + 1];\n          b += cb[s * 3 + 2];\n        } else {\n          r += 5 + (3 * y) / H;\n          g += 5 + (2 * y) / H;\n          b += 9;\n        }\n      }\n      const p = (y * W + x) * 3;\n      pix[p] = r / 4;\n      pix[p + 1] = g / 4;\n      pix[p + 2] = b / 4;\n    }\n\n  drawPips(P);\n  if (P.finger >= 0) drawFinger(P);\n\n  for (let p = 0; p \u003c W * H; p++) display.setPixel(p % W, Math.floor(p / W), Math.min(255, pix[p * 3]), Math.min(255, pix[p * 3 + 1]), Math.min(255, pix[p * 3 + 2]));\n}\n\n// The spots, one dark LED each where that LED shows the spotted face. Drawn\n// soft, they smeared half of every face to grey.\nfunction drawPips(P) {\n  const pix = P.pix;\n  const own = P.own;\n  for (let i = 0; i \u003c P.n; i++) {\n    if (!P.pfOn[i]) continue;\n    const o = i * 6;\n    for (let half = 0; half \u003c 2; half++) {\n      const mask = half ? P.pip1[i] : P.pip0[i];\n      for (let bit = 0; bit \u003c 9; bit++) {\n        if (!(mask & (1 \u003c\u003c bit))) continue;\n        const a = 0.2 + 0.3 * (bit % 3);\n        const b = 0.5 * half + 0.1 + 0.15 * Math.floor(bit / 3);\n        const x = Math.floor((P.pf[o] + a * P.pf[o + 2] + b * P.pf[o + 4]) / SS);\n        const y = Math.floor((P.pf[o + 1] + a * P.pf[o + 3] + b * P.pf[o + 5]) / SS);\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        let mine = 0;\n        for (let j = 0; j \u003c SS; j++) for (let k = 0; k \u003c SS; k++) if (own[(y * SS + j) * SW + x * SS + k] === i + 1) mine++;\n        if (mine \u003c 3) continue;\n        const p = (y * W + x) * 3;\n        pix[p] *= 0.08;\n        pix[p + 1] *= 0.08;\n        pix[p + 2] *= 0.08;\n      }\n    }\n  }\n}\n\n// The fingertip comes from behind the domino it pushes, a little from above,\n// and touches the domino's back three quarters of the way up.\nfunction drawFinger(P) {\n  const i = P.fingerOn;\n  const s = Math.sin(P.th[i]);\n  const c = Math.cos(P.th[i]);\n  const hx = P.hx[i];\n  const hz = P.hz[i];\n  const back = DH * 0.75 * s - DT * c;\n  const tx = P.px[i] + hx * back;\n  const ty = P.py[i] + DT * s + c * DH * 0.75;\n  const tz = P.pz[i] + hz * back;\n  // Backwards along the heading on the panel, tilted 20 degrees up.\n  const dx = -(hx * P.rx + hz * P.rz);\n  const dy = hx * P.ux + hz * P.uz;\n  const up = dx > 0 ? -0.34 : 0.34;\n  const l = Math.hypot(dx, dy) || 1;\n  const ex = (dx * Math.cos(up) - dy * Math.sin(up)) / l;\n  const ey = (dx * Math.sin(up) + dy * Math.cos(up)) / l;\n  const f = P.finger;\n  const out = 2 + 26 * (f \u003c 0.4 ? 1 - smooth(0, 0.4, f) : smooth(0.62, 1.05, f));\n  const ax = P.X0 + tx * P.rx + tz * P.rz + ex * out;\n  const ay = P.Y0 - (tx * P.ux + ty * P.uy + tz * P.uz) + ey * out;\n  const pix = P.pix;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x + 0.5 - ax;\n      const py = y + 0.5 - ay;\n      const along = Math.max(0, px * ex + py * ey);\n      const cov = Math.min(1, 2.2 - Math.hypot(px - along * ex, py - along * ey));\n      if (cov \u003c= 0) continue;\n      // Skin, lighter along the top, and the nail at the tip.\n      const top = ((ex > 0 ? ey : -ey) * px - (ex > 0 ? ex : -ex) * py) / 1.7;\n      const nail = along \u003c 2.6 && top > -0.2;\n      const p = (y * W + x) * 3;\n      pix[p] += ((nail ? 250 : 232 + 14 * top) - pix[p]) * cov;\n      pix[p + 1] += ((nail ? 222 : 170 + 18 * top) - pix[p + 1]) * cov;\n      pix[p + 2] += ((nail ? 212 : 138 + 16 * top) - pix[p + 2]) * cov;\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Colour=0..1, Speed=0.5..4, Spacing=-1..1, Angle=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Colour","min":0,"max":1,"about":"Ivory dominoes with black spots at 0; turned up, the run becomes a set of coloured toppling dominoes whose hues walk along the chain."},{"name":"Speed","min":0.5,"max":4,"about":"How fast the film runs, finger and all: at 2 the forty dominoes fall in under five seconds, at 0.5 the wave crawls, at 4 it is half of real speed."},{"name":"Spacing","min":-1,"max":1,"about":"The gap between dominoes, from 0.44 to 0.8 of a domino's height; a wider gap means fewer dominoes and a flatter pile once they fall."},{"name":"Angle","min":-1,"max":1,"about":"Swings the camera round the run, from almost straight side-on, where only the narrow edges show, to well round, where the spotted faces fill the shelves."}],"start":[0,2,0,0.06],"measures":{"motion":0.1541,"detail":0.079,"edges":0.5891,"complexity":0.4474,"coverage":0.2699,"colour":0.0868,"drift":0.2609},"knobResponse":[0.2214,0.1713,0.2211,0.2694]},{"slug":"dragon","title":"Dragon Fold","family":"fractal","round":2,"note":"종이띠를 반으로 접기를 열 번 되풀이하면 헤이웨이 드래곤이 돼요. 세대마다 선 전체의 복사본이 끝점을 축으로 90도 돌아 나오고, 다 접히면 거꾸로 닫혀요.","idea":"A strip folded in half again and again opens into the Heighway dragon: each new generation swings a copy of the whole line a quarter turn out of its own end, and later the folds close back up.","buttons":"K1 tap turns the folding round, so it closes up or opens out from where it is.","code":"// ===== Patternflow pattern =====\n// Title:   Dragon Fold\n// Family:  fractal\n// Idea:    A strip folded in half again and again opens into the Heighway dragon: each new generation swings a copy of the whole line a quarter turn out of its own end, and later the folds close back up.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Fold Speed=0.5..6, Generations=8..10, Dragons=1..4\n//\n// Knob 1: Hue. Where the colour that runs along the line starts.\n// Knob 2: Fold Speed. How quickly one generation swings out of the last.\n// Knob 3: Generations. How many folds before it holds, from 256 segments to 1024.\n// Knob 4: Dragons. One to four dragons from the same first point, the second turned half round and the others a quarter; four of them tile the plane around that point.\n// Buttons: K1 tap turns the folding round, so it closes up or opens out from where it is.\n\nconst W = 64;\nconst H = 128;\nconst MAX_GEN = 10;\nconst COUNT = 1 \u003c\u003c MAX_GEN;\n// Panel LEDs per unit of the line's end-to-end span. With 64 a held\n// dragon's segments land on whole LEDs: 4 LEDs long at 8 folds, 2 diagonal\n// steps at 9, 2 LEDs at 10.\nconst K = 64;\nconst HOLD = 4;\nconst QUARTERS = [0, 2, 1, 3];\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  // The deepest dragon's corners. A shallower generation is its first 2^n + 1\n  // points, because each fold only adds to the end.\n  const px = new Int32Array(COUNT + 1);\n  const py = new Int32Array(COUNT + 1);\n  px[1] = 1;\n  for (let n = 0; n \u003c MAX_GEN; n++) {\n    const m = 1 \u003c\u003c n;\n    for (let k = 1; k \u003c= m; k++) {\n      // The new half is the old one walked backward and turned a quarter about the end.\n      const dx = px[m - k] - px[m];\n      const dy = py[m - k] - py[m];\n      px[m + k] = px[m] - dy;\n      py[m + k] = py[m] + dx;\n    }\n  }\n  params.px = px;\n  params.py = py;\n  params.sx = new Float32Array(COUNT + 1);\n  params.sy = new Float32Array(COUNT + 1);\n  params.rgb = new Float32Array(W * H * 3);\n  params.colour = new Float32Array(4 * 3 * 64);\n  params.g = -1;\n  params.dir = 1;\n  params.hold = 0;\n  params.flow = 0;\n  params.run = 0;\n  params.ox = 21;\n  params.oy = 37;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 1];\n  const gen = Math.max(1, Math.min(MAX_GEN, Math.round(k[2])));\n  params.gen = gen;\n  params.dragons = Math.max(1, Math.min(4, Math.round(k[3])));\n  // Open two folds short of the top, so the first seconds show folding.\n  if (params.g \u003c 0) params.g = Math.max(0, gen - 2);\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.dir = -params.dir;\n    params.hold = 0;\n  }\n  // A fold of a long line takes longer than a fold of a short one.\n  const n = Math.floor(params.g);\n  const step = (dt * k[1]) / (1 + 0.26 * n);\n  if (params.hold > 0) {\n    params.hold -= dt;\n    if (params.hold \u003c= 0) params.dir = params.g >= gen ? -1 : 1;\n  } else if (params.dir > 0) {\n    params.g = Math.min(gen, params.g + step);\n    if (params.g >= gen) params.hold = HOLD;\n  } else {\n    params.g = Math.max(0, params.g - step);\n    if (params.g \u003c= 0) params.hold = 0.6;\n  }\n  if (params.g > gen) {\n    params.dir = -1;\n    params.hold = 0;\n  }\n  params.flow += dt * 0.025;\n  params.run += dt * 0.12;\n\n  // One dragon sits in the middle of its own box; more share the panel's centre.\n  const tx = params.dragons > 1 ? 32 : 21;\n  const ty = params.dragons > 1 ? 64 : 37;\n  const ease = Math.min(1, dt * 2.5);\n  params.ox += (tx - params.ox) * ease;\n  params.oy += (ty - params.oy) * ease;\n\n  // Colours along the line, 64 steps per dragon, yellow through green to cyan at K1 0.\n  const hue = k[0] + 0.11 + params.flow;\n  for (let d = 0; d \u003c 4; d++) {\n    for (let s = 0; s \u003c 64; s++) hsv(hue + d * 0.27 + (s / 63) * 0.38, 0.85, 0.9, params.colour, (d * 64 + s) * 3);\n  }\n}\n\nfunction plot(rgb, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  rgb[o] = r;\n  rgb[o + 1] = g;\n  rgb[o + 2] = b;\n}\n\n// A crisp line one LED wide, both ends included.\nfunction line(rgb, x0, y0, x1, y1, r, g, b) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const steps = Math.max(1, Math.ceil(Math.max(Math.abs(dx), Math.abs(dy))));\n  for (let s = 0; s \u003c= steps; s++) {\n    const t = s / steps;\n    plot(rgb, Math.round(x0 + dx * t), Math.round(y0 + dy * t), r, g, b);\n  }\n}\n\nexport function draw(display, params, time) {\n  const rgb = params.rgb;\n  rgb.fill(0);\n  const g = params.g;\n  const n = Math.min(MAX_GEN - 1, Math.floor(g));\n  const f = g - n;\n  const e = f * f * (3 - 2 * f);\n  const m = 1 \u003c\u003c n;\n  // Points past 2^(n+1) are not drawn. Those past 2^n are mid-fold: turned\n  // back toward the old half by the part of the quarter turn still to go.\n  const last = f > 0 ? 2 * m : m;\n  const turn = (e - 1) * Math.PI * 0.5;\n  const tc = Math.cos(turn);\n  const ts = Math.sin(turn);\n  // The view divides by the span from first point to last, (1 - i)^g, so the\n  // dragon keeps its size and its heading while it folds.\n  const span = Math.pow(2, -(n + e) / 2) * K;\n  const va = (Math.PI / 4) * (n + e);\n  const vc = Math.cos(va) * span;\n  const vs = Math.sin(va) * span;\n  const px = params.px;\n  const py = params.py;\n  const sx = params.sx;\n  const sy = params.sy;\n  const cx = px[m];\n  const cy = py[m];\n  const col = params.colour;\n  const total = 1 \u003c\u003c params.gen;\n  for (let d = params.dragons - 1; d >= 0; d--) {\n    // The second dragon is the first turned half round about the first point,\n    // so two of them stand up and down the tall panel; the third and fourth\n    // fill the quarter turns between.\n    const q = QUARTERS[d];\n    const dc = q === 0 ? 1 : q === 2 ? -1 : 0;\n    const ds = q === 1 ? 1 : q === 3 ? -1 : 0;\n    for (let i = 0; i \u003c= last; i++) {\n      let x = px[i];\n      let y = py[i];\n      if (i > m) {\n        const ax = x - cx;\n        const ay = y - cy;\n        x = cx + ax * tc - ay * ts;\n        y = cy + ax * ts + ay * tc;\n      }\n      const rx = x * dc - y * ds;\n      const ry = x * ds + y * dc;\n      // Down the panel is along the span, across is the quarter turn from it.\n      sy[i] = params.oy + rx * vc - ry * vs;\n      sx[i] = params.ox + rx * vs + ry * vc;\n    }\n    // Newest segments first, so a half that has only begun to swing out\n    // stays under the line it is leaving.\n    for (let i = last - 1; i >= 0; i--) {\n      const c = (d * 64 + Math.min(63, Math.floor((i / total) * 64))) * 3;\n      // A slow swell of light walks from the first point to the last.\n      const along = i / total - params.run;\n      const lift = 0.8 + 0.2 * Math.cos((along - Math.floor(along)) * Math.PI * 2 * 3);\n      line(rgb, sx[i], sy[i], sx[i + 1], sy[i + 1], col[c] * lift, col[c + 1] * lift, col[c + 2] * lift);\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[o], rgb[o + 1], rgb[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-dragon","type":"code","name":"dragon","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dragon Fold\n// Family:  fractal\n// Idea:    A strip folded in half again and again opens into the Heighway dragon: each new generation swings a copy of the whole line a quarter turn out of its own end, and later the folds close back up.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Fold Speed=0.5..6, Generations=8..10, Dragons=1..4\n//\n// Knob 1: Hue. Where the colour that runs along the line starts.\n// Knob 2: Fold Speed. How quickly one generation swings out of the last.\n// Knob 3: Generations. How many folds before it holds, from 256 segments to 1024.\n// Knob 4: Dragons. One to four dragons from the same first point, the second turned half round and the others a quarter; four of them tile the plane around that point.\n// Buttons: K1 tap turns the folding round, so it closes up or opens out from where it is.\n\nconst W = 64;\nconst H = 128;\nconst MAX_GEN = 10;\nconst COUNT = 1 \u003c\u003c MAX_GEN;\n// Panel LEDs per unit of the line's end-to-end span. With 64 a held\n// dragon's segments land on whole LEDs: 4 LEDs long at 8 folds, 2 diagonal\n// steps at 9, 2 LEDs at 10.\nconst K = 64;\nconst HOLD = 4;\nconst QUARTERS = [0, 2, 1, 3];\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  // The deepest dragon's corners. A shallower generation is its first 2^n + 1\n  // points, because each fold only adds to the end.\n  const px = new Int32Array(COUNT + 1);\n  const py = new Int32Array(COUNT + 1);\n  px[1] = 1;\n  for (let n = 0; n \u003c MAX_GEN; n++) {\n    const m = 1 \u003c\u003c n;\n    for (let k = 1; k \u003c= m; k++) {\n      // The new half is the old one walked backward and turned a quarter about the end.\n      const dx = px[m - k] - px[m];\n      const dy = py[m - k] - py[m];\n      px[m + k] = px[m] - dy;\n      py[m + k] = py[m] + dx;\n    }\n  }\n  params.px = px;\n  params.py = py;\n  params.sx = new Float32Array(COUNT + 1);\n  params.sy = new Float32Array(COUNT + 1);\n  params.rgb = new Float32Array(W * H * 3);\n  params.colour = new Float32Array(4 * 3 * 64);\n  params.g = -1;\n  params.dir = 1;\n  params.hold = 0;\n  params.flow = 0;\n  params.run = 0;\n  params.ox = 21;\n  params.oy = 37;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 1];\n  const gen = Math.max(1, Math.min(MAX_GEN, Math.round(k[2])));\n  params.gen = gen;\n  params.dragons = Math.max(1, Math.min(4, Math.round(k[3])));\n  // Open two folds short of the top, so the first seconds show folding.\n  if (params.g \u003c 0) params.g = Math.max(0, gen - 2);\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.dir = -params.dir;\n    params.hold = 0;\n  }\n  // A fold of a long line takes longer than a fold of a short one.\n  const n = Math.floor(params.g);\n  const step = (dt * k[1]) / (1 + 0.26 * n);\n  if (params.hold > 0) {\n    params.hold -= dt;\n    if (params.hold \u003c= 0) params.dir = params.g >= gen ? -1 : 1;\n  } else if (params.dir > 0) {\n    params.g = Math.min(gen, params.g + step);\n    if (params.g >= gen) params.hold = HOLD;\n  } else {\n    params.g = Math.max(0, params.g - step);\n    if (params.g \u003c= 0) params.hold = 0.6;\n  }\n  if (params.g > gen) {\n    params.dir = -1;\n    params.hold = 0;\n  }\n  params.flow += dt * 0.025;\n  params.run += dt * 0.12;\n\n  // One dragon sits in the middle of its own box; more share the panel's centre.\n  const tx = params.dragons > 1 ? 32 : 21;\n  const ty = params.dragons > 1 ? 64 : 37;\n  const ease = Math.min(1, dt * 2.5);\n  params.ox += (tx - params.ox) * ease;\n  params.oy += (ty - params.oy) * ease;\n\n  // Colours along the line, 64 steps per dragon, yellow through green to cyan at K1 0.\n  const hue = k[0] + 0.11 + params.flow;\n  for (let d = 0; d \u003c 4; d++) {\n    for (let s = 0; s \u003c 64; s++) hsv(hue + d * 0.27 + (s / 63) * 0.38, 0.85, 0.9, params.colour, (d * 64 + s) * 3);\n  }\n}\n\nfunction plot(rgb, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  rgb[o] = r;\n  rgb[o + 1] = g;\n  rgb[o + 2] = b;\n}\n\n// A crisp line one LED wide, both ends included.\nfunction line(rgb, x0, y0, x1, y1, r, g, b) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const steps = Math.max(1, Math.ceil(Math.max(Math.abs(dx), Math.abs(dy))));\n  for (let s = 0; s \u003c= steps; s++) {\n    const t = s / steps;\n    plot(rgb, Math.round(x0 + dx * t), Math.round(y0 + dy * t), r, g, b);\n  }\n}\n\nexport function draw(display, params, time) {\n  const rgb = params.rgb;\n  rgb.fill(0);\n  const g = params.g;\n  const n = Math.min(MAX_GEN - 1, Math.floor(g));\n  const f = g - n;\n  const e = f * f * (3 - 2 * f);\n  const m = 1 \u003c\u003c n;\n  // Points past 2^(n+1) are not drawn. Those past 2^n are mid-fold: turned\n  // back toward the old half by the part of the quarter turn still to go.\n  const last = f > 0 ? 2 * m : m;\n  const turn = (e - 1) * Math.PI * 0.5;\n  const tc = Math.cos(turn);\n  const ts = Math.sin(turn);\n  // The view divides by the span from first point to last, (1 - i)^g, so the\n  // dragon keeps its size and its heading while it folds.\n  const span = Math.pow(2, -(n + e) / 2) * K;\n  const va = (Math.PI / 4) * (n + e);\n  const vc = Math.cos(va) * span;\n  const vs = Math.sin(va) * span;\n  const px = params.px;\n  const py = params.py;\n  const sx = params.sx;\n  const sy = params.sy;\n  const cx = px[m];\n  const cy = py[m];\n  const col = params.colour;\n  const total = 1 \u003c\u003c params.gen;\n  for (let d = params.dragons - 1; d >= 0; d--) {\n    // The second dragon is the first turned half round about the first point,\n    // so two of them stand up and down the tall panel; the third and fourth\n    // fill the quarter turns between.\n    const q = QUARTERS[d];\n    const dc = q === 0 ? 1 : q === 2 ? -1 : 0;\n    const ds = q === 1 ? 1 : q === 3 ? -1 : 0;\n    for (let i = 0; i \u003c= last; i++) {\n      let x = px[i];\n      let y = py[i];\n      if (i > m) {\n        const ax = x - cx;\n        const ay = y - cy;\n        x = cx + ax * tc - ay * ts;\n        y = cy + ax * ts + ay * tc;\n      }\n      const rx = x * dc - y * ds;\n      const ry = x * ds + y * dc;\n      // Down the panel is along the span, across is the quarter turn from it.\n      sy[i] = params.oy + rx * vc - ry * vs;\n      sx[i] = params.ox + rx * vs + ry * vc;\n    }\n    // Newest segments first, so a half that has only begun to swing out\n    // stays under the line it is leaving.\n    for (let i = last - 1; i >= 0; i--) {\n      const c = (d * 64 + Math.min(63, Math.floor((i / total) * 64))) * 3;\n      // A slow swell of light walks from the first point to the last.\n      const along = i / total - params.run;\n      const lift = 0.8 + 0.2 * Math.cos((along - Math.floor(along)) * Math.PI * 2 * 3);\n      line(rgb, sx[i], sy[i], sx[i + 1], sy[i + 1], col[c] * lift, col[c + 1] * lift, col[c + 2] * lift);\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[o], rgb[o + 1], rgb[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Fold Speed=0.5..6, Generations=8..10, Dragons=1..4","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Where the colour that runs along the line starts."},{"name":"Fold Speed","min":0.5,"max":6,"about":"How quickly one generation swings out of the last."},{"name":"Generations","min":8,"max":10,"about":"How many folds before it holds, from 256 segments to 1024."},{"name":"Dragons","min":1,"max":4,"about":"One to four dragons from the same first point, the second turned half round and the others a quarter; four of them tile the plane around that point."}],"start":[0,2,8,1],"measures":{"motion":0.7649,"detail":0.0834,"edges":0.9552,"complexity":0.1947,"coverage":0.1168,"colour":0.2214,"drift":0.0797},"knobResponse":[0.0573,0.0725,0.0977,0.1563]},{"slug":"dripstone","title":"Dripstone","family":"mineral","round":19,"note":"석회동굴 단면이 128줄을 다 써요. 종유석 끝에서 물방울이 부풀다 떨어져 석순을 한 방울씩 키우고 웅덩이에 동심원을 그리는 사이, 쇼케이브 조명이 청록과 보라, 흰빛으로 번갈아 바뀌고 동굴 탐험가의 헤드램프가 옆으로 훑고 지나가요.","idea":"A limestone cave in cross-section fills the panel, with stalactites hanging over stalagmites and columns and a banded flowstone curtain on one side, while drops swell at the tips, fall and splash on the stalagmites or ring the pool on the floor, each drop lengthening its formation a little under a show-cave light sequence and a caver's passing headlamp.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Dripstone\n// Family:  mineral\n// Idea:    A limestone cave in cross-section fills the panel, with stalactites hanging over stalagmites and columns and a banded flowstone curtain on one side, while drops swell at the tips, fall and splash on the stalagmites or ring the pool on the floor, each drop lengthening its formation a little under a show-cave light sequence and a caver's passing headlamp.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after show-cave lighting and the banded \"bacon\" drapery of limestone caves\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Age=0..1, Damp=0..1\n//\n// Knob 1: Lamp. Turns the two coloured show lamps round the colour wheel together, from aqua and violet at 0; the warm lamp behind the curtain and the headlamp stay white.\n// Knob 2: Speed. How fast cave time runs: at 2 a drop falls the 100 rows from the roof in 1.3 s and the light sequence takes 15 s round its three lamps; each drop that lands lengthens its stalagmite and stalactite by about half a row.\n// Knob 3: Age. How far the cave has grown, from short stalactites, soda straws and one column at 0 to a hall of thick columns at 1, with the curtain hanging twice as far down and the straws thickened into carrots. A straw that grows too long snaps and falls into the pool.\n// Knob 4: Damp. How wet the cave is: at 0 the stone is pale and chalky and the pool sits in a hollow of the floor; at 1 the pool covers the whole floor, the drips come three times as often, and the stone turns dark and shines with films of water creeping down the wall.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Drops fall at this many rows per second squared of cave time.\nconst GRAV = 110;\nconst MAXP = 160;\n// How far in front of the stone the lamps stand, in LEDs.\nconst DZ = 16;\n// The rows the wall's water films repeat over.\nconst FT = 144;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  return [k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p, k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p, k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p];\n}\n\n// The flowstone's bands, from cream through orange to rust and brown.\nconst BANDS = [\n  [0.95, 0.86, 0.68],\n  [0.92, 0.52, 0.2],\n  [0.98, 0.74, 0.42],\n  [0.62, 0.26, 0.12],\n  [0.96, 0.9, 0.78],\n  [0.84, 0.4, 0.16],\n  [0.45, 0.2, 0.1],\n];\n\nexport function setup(params) {\n  const P = params;\n  const lat = new Float32Array(65536);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  P.lat = lat;\n  P.ceil = new Int16Array(W);\n  P.flo = new Int16Array(W);\n  P.edge = new Float32Array(W);\n  // The curtain hangs from the roof where it slopes down to one side wall.\n  const right = Math.random() \u003c 0.5;\n  const cw = 20 + Math.floor(Math.random() * 4);\n  P.cx0 = right ? W - cw : 0;\n  P.cx1 = right ? W : cw;\n  P.cw = cw;\n  P.right = right;\n  P.cph = Math.random() * 6.28;\n  P.cfold = 6.5 + Math.random() * 2;\n  // The pool lies in a hollow of the floor away from the curtain.\n  P.bc = right ? 20 + Math.random() * 8 : 36 + Math.random() * 8;\n  P.bw = 11 + Math.random() * 3;\n  let deep = 0;\n  for (let x = 0; x \u003c W; x++) {\n    let c = 8 + 4 * vn(lat, x / 9, 5.5) + 1.6 * vn(lat, x / 3, 9.5);\n    if (x >= P.cx0 && x \u003c P.cx1) c += 9 * (right ? (x - P.cx0) / cw : (P.cx1 - 1 - x) / cw);\n    P.ceil[x] = Math.round(c);\n    let f = 115 + 3 * vn(lat, x / 8, 15.5) + 1.5 * vn(lat, x / 3, 19.5);\n    const b = (x + 0.5 - P.bc) / P.bw;\n    if (Math.abs(b) \u003c 1) f += 8.5 * Math.pow(1 - b * b, 0.6);\n    P.flo[x] = Math.round(f);\n    deep = Math.max(deep, P.flo[x]);\n  }\n  P.deep = deep;\n  bakeStone(P);\n\n  // Stalactite and stalagmite pairs across the width, none over the pool.\n  P.sites = [];\n  let x = 2 + Math.random() * 3;\n  while (x \u003c W - 2) {\n    const xi = Math.floor(x);\n    if (Math.abs(xi + 0.5 - P.bc) > P.bw - 4) P.sites.push(site(xi, 0));\n    x += 8 + Math.random() * 4;\n  }\n  // One pair, the one nearest the middle and clear of the curtain, has met already.\n  let best = null;\n  for (const s of P.sites) if (!inCurtain(P, s.x) && (!best || Math.abs(s.x - 32) \u003c Math.abs(best.x - 32))) best = s;\n  if (best) {\n    best.base = 1.04;\n    best.thick = 0.9;\n  }\n  // Soda straws over the pool, dripping quicker than the big stalactites.\n  for (let i = 0; i \u003c 4; i++) {\n    const s = site(Math.round(P.bc + (i - 1.5) * (3.5 + Math.random() * 1.5)), 1);\n    s.per *= 0.7;\n    P.sites.push(s);\n  }\n  P.drops = [];\n  P.rip = [];\n  P.px = new Float32Array(MAXP);\n  P.py = new Float32Array(MAXP);\n  P.pvx = new Float32Array(MAXP);\n  P.pvy = new Float32Array(MAXP);\n  P.pl = new Float32Array(MAXP);\n  P.pn = 0;\n  P.fu = new Float32Array(N);\n  P.fs = new Int8Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.ex = new Float32Array(W * 4);\n  P.ey = new Float32Array(H * 4);\n  Object.assign(P, { T: 0, t: 0, cGrow: 0, hue: 0, rate: 1, age: 0, damp: 0.06, started: false });\n}\n\nfunction site(x, kind) {\n  return {\n    x,\n    kind,\n    base: 0.12 + Math.pow(Math.random(), 1.2) * 0.58,\n    thick: 0.55 + Math.random() * 0.45,\n    grow: 0,\n    per: 1.6 + Math.random() * 2.4,\n    sw: Math.random(),\n    ph: Math.random() * 6.28,\n    tint: Math.random(),\n    // A soda straw's length, and the length it snaps at.\n    len: 4 + Math.random() * 14,\n    maxL: 20 + Math.random() * 8,\n    g: 0,\n    y0: 0,\n    y1: 0,\n    ls: 0,\n    lm: 0,\n  };\n}\n\nconst inCurtain = (P, x) => x >= P.cx0 && x \u003c P.cx1;\n\n// The back wall and the cut rock: colour, and the wall's relief as a normal.\nfunction bakeStone(P) {\n  const lat = P.lat;\n  P.alb = new Float32Array(N * 3);\n  P.nrm = new Float32Array(N * 3);\n  P.tex = new Float32Array(N);\n  const hgt = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) hgt[y * W + x] = 0.7 * vn(lat, x / 5 + 60, y / 7 + 60) + 0.3 * vn(lat, x / 2 + 90, y / 2.5 + 90);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const gx = hgt[y * W + Math.min(W - 1, x + 1)] - hgt[y * W + Math.max(0, x - 1)];\n      const gy = hgt[Math.min(H - 1, y + 1) * W + x] - hgt[Math.max(0, y - 1) * W + x];\n      const nx = -gx * 3;\n      const ny = -gy * 3;\n      const l = 1 / Math.sqrt(nx * nx + ny * ny + 1);\n      P.nrm[o] = nx * l;\n      P.nrm[o + 1] = ny * l;\n      P.nrm[o + 2] = l;\n      const ce = P.ceil[x];\n      const fl = P.flo[x];\n      let r;\n      let g;\n      let b;\n      if (y \u003c ce - 1 || y > fl) {\n        // The cut rock: beds of limestone, each its own shade.\n        const bed = Math.floor((y + 3 * vn(lat, x / 12, 40.5)) / 3);\n        const v = 0.13 + 0.05 * (((bed * 7919) % 5) / 4) + 0.05 * vn(lat, x / 2, y / 2 + 50);\n        r = v * 1.05;\n        g = v * 0.95;\n        b = v * 0.88;\n      } else if (y === ce - 1 || y === fl) {\n        // The skin of the roof and the floor, white with old calcite.\n        r = 0.8;\n        g = 0.74;\n        b = 0.62;\n        P.nrm[o] = 0;\n        P.nrm[o + 1] = y === fl ? -0.8 : 0.8;\n        P.nrm[o + 2] = 0.6;\n      } else {\n        // The back wall, darker than what stands in front of it, with pale streaks of flowstone.\n        const v = 0.22 + 0.22 * vn(lat, x / 9, y / 9 + 20);\n        const streak = Math.max(0, vn(lat, x / 2.2 + 30, y / 16 + 30) - 0.58) * 1.6;\n        r = v * 1.1 + streak * 0.5;\n        g = v * 0.96 + streak * 0.44;\n        b = v * 0.8 + streak * 0.34;\n      }\n      P.alb[o] = r;\n      P.alb[o + 1] = g;\n      P.alb[o + 2] = b;\n      // Streaks down the calcite of the formations.\n      P.tex[p] = 0.16 * (vn(lat, x * 1.1 + 200, y / 9 + 200) - 0.5);\n    }\n  // The wall's water films, as rivulets that wrap round every FT rows so they can scroll down.\n  P.ftex = new Float32Array(W * FT);\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 0; y \u003c FT; y++) {\n      const a = vn(lat, x / 1.4 + 140, y / 9);\n      const b = vn(lat, x / 1.4 + 140, (y - FT) / 9);\n      const m = y / FT;\n      P.ftex[x * FT + y] = a * (1 - m) + b * m;\n    }\n}\n\n// The curtain's lower edge in each of its columns, as long as Age and its drips have made it.\nfunction curtain(P) {\n  const a = Math.min(1.2, 0.45 + 0.65 * P.age + P.cGrow);\n  for (let x = P.cx0; x \u003c P.cx1; x++) {\n    const s = (x - P.cx0 + 0.5) / P.cw;\n    const fold = 0.5 - 0.5 * Math.cos((6.2832 * (x + 0.5)) / P.cfold + P.cph);\n    P.edge[x] = P.ceil[x] + (8 + 30 * a) * (0.45 + 0.55 * Math.sin(Math.PI * (P.right ? 0.35 + 0.65 * s : 1 - 0.65 * s))) + 3.4 * fold;\n  }\n}\n\nfunction geom(P, s) {\n  if (s.kind === 1) {\n    s.y0 = P.ceil[s.x];\n    return;\n  }\n  const y0 = inCurtain(P, s.x) ? P.edge[s.x] : P.ceil[s.x];\n  const y1 = P.flo[s.x];\n  const gap = y1 - y0;\n  s.g = Math.min(1.3, s.base + 0.8 * P.age + s.grow);\n  s.y0 = y0;\n  s.y1 = y1;\n  s.ls = s.g * gap * 0.42;\n  s.lm = s.g * gap * 0.58;\n}\n\nfunction splash(P, x, y, n, up) {\n  for (let i = 0; i \u003c n; i++) {\n    const k = P.pn;\n    P.pn = (k + 1) % MAXP;\n    P.px[k] = x + (Math.random() - 0.5);\n    P.py[k] = y;\n    P.pvx[k] = (Math.random() - 0.5) * 34;\n    P.pvy[k] = -(10 + Math.random() * 26) * up;\n    P.pl[k] = 0.45 + Math.random() * 0.3;\n  }\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.level = P.deep - 7.5 - P.damp * 12;\n  curtain(P);\n  const often = 0.6 + 1.4 * P.damp;\n  for (const s of P.sites) {\n    geom(P, s);\n    if (s.kind === 0 && s.g >= 1) continue;\n    s.sw += (h * often) / s.per;\n    if (s.sw >= 1) {\n      s.sw -= 1;\n      const tip = s.kind === 1 ? s.y0 + s.len : s.y0 + s.ls;\n      P.drops.push({ s, x: s.x, y: tip + 1, v: 6, len: 0 });\n    }\n  }\n  const lvl = P.level;\n  for (let i = P.drops.length - 1; i >= 0; i--) {\n    const d = P.drops[i];\n    const s = d.s;\n    d.v += GRAV * h;\n    d.y += d.v * h;\n    const fl = P.flo[d.x];\n    const pool = fl > lvl + 0.5;\n    const target = s.kind === 0 && !d.len ? s.y1 - s.lm : pool ? lvl : fl;\n    if (d.y \u003c target) continue;\n    P.drops.splice(i, 1);\n    if (d.len) {\n      // A broken straw goes into the pool with a heavy splash.\n      splash(P, d.x, target - 1, 14, 1.4);\n      P.rip.push({ x: d.x + 0.5, a: 0, k: 1.6 });\n      continue;\n    }\n    if (s.kind === 0 && s.y1 - s.lm \u003c fl - 0.5) {\n      // Each drop leaves a little calcite: the stalagmite rises and the stalactite reaches down.\n      s.grow += 0.011 * (1 - s.grow / 0.36);\n      if (inCurtain(P, s.x)) P.cGrow += 0.004 * (1 - P.cGrow / 0.25);\n      splash(P, d.x, target - 1, 4, 1);\n    } else {\n      splash(P, d.x, target - 1, pool ? 3 : 4, pool ? 1.2 : 0.8);\n      if (pool) P.rip.push({ x: d.x + 0.5, a: 0, k: 1 });\n      if (s.kind === 1) {\n        s.len += 0.55;\n        if (s.len > s.maxL + 10 * P.age) {\n          // Too long to hold its own weight: the straw snaps and falls.\n          const keep = 2 + Math.random() * 3;\n          P.drops.push({ s, x: s.x, y: s.y0 + s.len, v: 0, len: s.len - keep });\n          s.len = keep;\n        }\n      }\n    }\n  }\n  for (let i = 0; i \u003c MAXP; i++) {\n    if (P.pl[i] \u003c= 0) continue;\n    P.pl[i] -= h;\n    P.pvy[i] += GRAV * 0.8 * h;\n    P.px[i] += P.pvx[i] * h;\n    P.py[i] += P.pvy[i] * h;\n  }\n  for (let i = P.rip.length - 1; i >= 0; i--) {\n    P.rip[i].a += h;\n    if (P.rip[i].a > 1.8) P.rip.splice(i, 1);\n  }\n  if (P.rip.length > 14) P.rip.splice(0, P.rip.length - 14);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  P.age = clamp(k[2], 0, 1);\n  P.damp = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Twenty seconds of the cave before it opens, at the knob's pace, so the drips are\n    // already falling and the time-lapse has grown what Speed lets it.\n    for (let i = 0; i \u003c 600; i++) step(P, P.rate / 30);\n  }\n  P.t += dt;\n  step(P, dt * P.rate);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { lat, buf, fu, fs, alb, nrm, ceil, flo, edge, sites } = P;\n  const T = P.T;\n  const damp = P.damp;\n\n  // The show lamps: two coloured ones low on either side and a warm one behind the curtain,\n  // fading up and down in turn, their colours wandering a little.\n  const w = (6.2832 * T) / 15;\n  const lamps = [];\n  const ha = 0.47 + P.hue;\n  const cxm = (P.cx0 + P.cx1) / 2;\n  const defs = [\n    [6, 108, ha + 0.04 * Math.sin(T * 0.31), 0.7, 52],\n    [58, 104, ha + 0.3 + 0.04 * Math.sin(T * 0.23 + 2), 0.7, 52],\n    [cxm, 38, 0.08, 0.3, 40],\n  ];\n  for (let k = 0; k \u003c 3; k++) {\n    const d = defs[k];\n    const s = 0.5 + 0.5 * Math.sin(w + (k * 6.2832) / 3);\n    const I = 0.3 + 0.95 * s * Math.sqrt(s);\n    const c = hsv(d[2], d[3], I);\n    lamps.push({ x: d[0], y: d[1], r: c[0], g: c[1], b: c[2], I });\n    const inv = 1 / (d[4] * d[4]);\n    for (let x = 0; x \u003c W; x++) P.ex[k * W + x] = Math.exp(-(x - d[0]) * (x - d[0]) * inv);\n    for (let y = 0; y \u003c H; y++) P.ey[k * H + y] = Math.exp(-(y - d[1]) * (y - d[1]) * inv);\n  }\n  // The caver's headlamp wanders over the cave on its own time.\n  const t = P.t;\n  const hx = 32 + 38 * Math.sin(0.52 * t + 0.4);\n  const hy = 62 + 36 * Math.sin(0.23 * t + 2.1);\n  for (let x = 0; x \u003c W; x++) P.ex[3 * W + x] = 1.05 * Math.exp(-((x - hx) * (x - hx)) / 90);\n  for (let y = 0; y \u003c H; y++) P.ey[3 * H + y] = Math.exp(-((y - hy) * (y - hy)) / 170);\n  const ex = P.ex;\n  const ey = P.ey;\n\n  // The formations, drawn into a map of which one covers each LED and where across it.\n  fs.fill(-1);\n  for (let i = 0; i \u003c sites.length; i++) {\n    const s = sites[i];\n    const xc = s.x + 0.5;\n    if (s.kind === 1) {\n      // A soda straw: one LED wide, thickening into a carrot with Age.\n      const wT = 0.55 + 1.7 * P.age;\n      for (let y = s.y0; y \u003c s.y0 + s.len && y \u003c H; y++) {\n        const d = (y + 0.5 - s.y0) / s.len;\n        span(P, i, xc, y, 0.55 + (wT - 0.55) * (1 - d) * (1 - d));\n      }\n      continue;\n    }\n    const gg = Math.min(1.2, s.g);\n    const wT = 0.9 + 2.4 * s.thick * (0.3 + gg);\n    const y0 = s.y0;\n    for (let y = Math.max(0, Math.floor(y0)); y \u003c y0 + s.ls && y \u003c H; y++) {\n      const d = (y + 0.5 - y0) / s.ls;\n      const hw = 0.55 + (wT - 0.55) * Math.pow(1 - d, 1.7) + 0.3 * Math.sin(y * 1.3 + s.ph) * (1 - d);\n      span(P, i, xc, y, hw);\n    }\n    const wB = 1.6 + 3 * s.thick * (0.45 + gg);\n    const y1 = s.y1;\n    for (let y = Math.floor(y1 - s.lm); y \u003c y1; y++) {\n      const hh = (y1 - (y + 0.5)) / s.lm;\n      if (hh > 1 || hh \u003c 0) continue;\n      const hw = Math.max(0.55, wB * Math.pow(1 - hh * hh * hh * hh, 0.3) * (0.8 + 0.2 * (1 - hh)) * (1 + 0.35 * Math.pow(1 - hh, 5)));\n      span(P, i, xc, y, hw);\n    }\n  }\n\n  const amb = 0.07;\n  const tex = P.tex;\n  const ftex = P.ftex;\n  const fsh = FT - (Math.floor(T * 12.6) % FT);\n  const wet = 0.15 + 0.85 * damp;\n  const dry = 1 - damp;\n  const cfold = P.cfold;\n  const cph = P.cph;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const ce = ceil[x];\n      const fl = flo[x];\n      let ar;\n      let ag;\n      let ab;\n      let nx;\n      let ny;\n      let nz;\n      let glow = 0;\n      let spec = 0;\n      let lit = 1;\n      const f = fs[p];\n      const cur = x >= P.cx0 && x \u003c P.cx1 && y >= ce - 1 && y \u003c edge[x];\n      if (f >= 0) {\n        const s = sites[f];\n        const u = fu[p];\n        nx = u;\n        ny = 0;\n        nz = Math.sqrt(Math.max(0, 1 - u * u));\n        // Calcite, white or stained with iron, ringed where it grew in pulses.\n        const ring = 0.97 + 0.03 * Math.sin(y * 0.9 + s.ph) + tex[p];\n        const st = s.tint;\n        ar = (0.96 - 0.02 * st) * ring;\n        ag = (0.9 - 0.2 * st) * ring;\n        ab = (0.8 - 0.36 * st) * ring;\n        spec = wet * Math.max(0, 1 - Math.abs(u + 0.4) * 3.5);\n        if (s.kind === 0 && s.g >= 1) {\n          // Water runs down a column in a thin film that catches the light as it goes.\n          const run = (((y - T * 14 + s.ph * 9) % 26) + 26) % 26;\n          if (run \u003c 4) spec += 0.7 * wet * Math.max(0, 1 - Math.abs(u + 0.3) * 2.5);\n        }\n      } else if (cur) {\n        // The curtain: bands laid down parallel to its edge, folded, lit through from behind.\n        const top = ce - 1;\n        const fold = Math.sin((6.2832 * (x + 0.5)) / cfold + cph);\n        const hang = (y - top) / Math.max(4, edge[x] - top);\n        const by = (y - top - 3.4 * (0.5 - 0.5 * Math.cos((6.2832 * (x + 0.5)) / cfold + cph)) * hang * hang) / 2.4;\n        const bi = Math.floor(by + 0.25 * vn(lat, x / 4, by * 1.3));\n        const c = BANDS[((bi % 7) + 7) % 7];\n        const pleat = 0.6 + 0.4 * Math.cos((6.2832 * (x + 0.5)) / cfold + cph + 1.2);\n        ar = c[0] * pleat;\n        ag = c[1] * pleat;\n        ab = c[2] * pleat;\n        nx = 0.75 * fold;\n        ny = 0;\n        nz = 0.66;\n        const thin = clamp(1 - (edge[x] - y) / 24, 0, 1);\n        glow = lamps[2].I * (0.1 + 0.6 * thin) * (0.55 + 0.45 * fold);\n        spec = wet * 0.35 * Math.max(0, fold - 0.6);\n      } else {\n        ar = alb[o];\n        ag = alb[o + 1];\n        ab = alb[o + 2];\n        nx = nrm[o];\n        ny = nrm[o + 1];\n        nz = nrm[o + 2];\n        if (y \u003c ce - 1 || y > fl) {\n          // Cut rock takes only what light leaks in at its edge.\n          const dd = y \u003c ce ? ce - 1 - y : y - fl;\n          lit = Math.max(0, 0.45 - dd * 0.15);\n          glow = 0.9;\n        } else if (damp > 0.02) {\n          // Films of water creep down a damp wall and shine.\n          const film = ftex[x * FT + ((y + fsh) % FT)] - 0.7 + 0.12 * damp;\n          if (film > 0) spec = damp * film * 1.3;\n        }\n      }\n      if (glow \u003c 0.9) {\n        // Dry stone is chalky and pale; wet stone is darker and its colour deeper.\n        const grey = (ar + ag + ab) * 0.38;\n        const d = dry * 0.45;\n        const v = 1.08 - 0.3 * damp;\n        ar = (ar + (grey - ar) * d) * v;\n        ag = (ag + (grey - ag) * d) * v;\n        ab = (ab + (grey - ab) * d) * v;\n      }\n      let sr = 0;\n      let sg = 0;\n      let sb = 0;\n      let lr = amb;\n      let lg = amb;\n      let lb = amb * 1.15;\n      if (lit > 0) {\n        for (let k = 0; k \u003c 3; k++) {\n          const e = ex[k * W + x] * ey[k * H + y];\n          if (e \u003c 0.01) continue;\n          const L = lamps[k];\n          const dx = L.x - x;\n          const dy = L.y - y;\n          const dif = (nx * dx + ny * dy + nz * DZ) / Math.sqrt(dx * dx + dy * dy + DZ * DZ);\n          const a = e * (0.2 + 0.8 * Math.max(0, dif)) * lit;\n          lr += L.r * a;\n          lg += L.g * a;\n          lb += L.b * a;\n          if (dif > 0.8) {\n            // A wet face turned to a lamp throws back a glint of its colour.\n            const g2 = (dif - 0.8) * 5;\n            const gl = g2 * g2 * e * damp * 0.45;\n            sr += L.r * gl;\n            sg += L.g * gl;\n            sb += L.b * gl;\n          }\n        }\n        const eh = ex[3 * W + x] * ey[3 * H + y] * lit;\n        if (eh > 0.01) {\n          lr += eh * nz;\n          lg += eh * 0.93 * nz;\n          lb += eh * 0.8 * nz;\n          spec *= 1 + 2 * eh;\n        }\n      }\n      const sp = spec * 0.5 * (lr + lg + lb);\n      buf[o] = 255 * (ar * (lr * 1.25 + glow) + sp + sr);\n      buf[o + 1] = 255 * (ag * (lg * 1.25 + glow * 0.9) + sp + sg);\n      buf[o + 2] = 255 * (ab * (lb * 1.25 + glow * 0.75) + sp + sb);\n    }\n  }\n\n  // Drops swelling at the tips and falling, and the spray where they land.\n  for (const s of sites) {\n    if (s.kind === 0 && s.g >= 1) continue;\n    const tip = Math.floor(s.kind === 1 ? s.y0 + s.len : s.y0 + s.ls);\n    if (s.sw > 0.25) bead(buf, s.x, tip, (s.sw - 0.25) / 0.75);\n    if (s.sw > 0.8) bead(buf, s.x, tip + 1, (s.sw - 0.8) / 0.2);\n  }\n  for (const d of P.drops) {\n    if (d.len) {\n      for (let j = 0; j \u003c d.len; j++) put(buf, d.x, Math.round(d.y - j), 200, 180, 150, 1);\n      continue;\n    }\n    const tail = Math.min(3, d.v * 0.03);\n    for (let j = 0; j \u003c= tail; j++) put(buf, d.x, Math.round(d.y - j), 190, 220, 255, 1 - j / (tail + 1));\n  }\n  for (let i = 0; i \u003c MAXP; i++) if (P.pl[i] > 0) put(buf, Math.round(P.px[i]), Math.round(P.py[i]), 210, 230, 255, Math.min(1, P.pl[i] * 3));\n\n  // The pool: the cave mirrored in it, rings running out from each drop.\n  const lvl = P.level;\n  const ly = Math.ceil(lvl);\n  const rip = P.rip;\n  // The water's own colour, from the lamp nearest the pool.\n  const L0 = lamps[P.bc \u003c 32 ? 0 : 1];\n  const wr = 10 + 60 * L0.r;\n  const wg = 20 + 60 * L0.g;\n  const wb = 30 + 60 * L0.b;\n  for (let x = 0; x \u003c W; x++) {\n    if (flo[x] \u003c= ly) continue;\n    for (let y = ly; y \u003c= flo[x] && y \u003c H; y++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const dy = (y - lvl) * 3.5;\n      let ring = 0;\n      for (const r of rip) {\n        const dx = x + 0.5 - r.x;\n        const R = 2 + 15 * r.a;\n        const q = Math.sqrt(dx * dx + dy * dy) - R;\n        if (q > -2 && q \u003c 2) ring += (1 - q * q * 0.25) * (1 - r.a / 1.8) * r.k * 1.4;\n      }\n      const sx = clamp(Math.round(x + ring * 1.5 + Math.sin(y * 0.9 + T * 2) * 0.6), 0, W - 1);\n      const sy = clamp(2 * ly - y - 1, 0, H - 1);\n      const q = (sy * W + sx) * 3;\n      const depth = Math.min(1, (y - lvl) / 8);\n      const m = 0.5 - 0.2 * depth;\n      const under = y === flo[x] ? 0.35 : 0.15;\n      const shine = (y === ly ? 0.3 : 0) + 0.4 * Math.min(1, ring);\n      buf[o] = buf[q] * m + buf[o] * under + wr + 200 * shine;\n      buf[o + 1] = buf[q + 1] * m + buf[o + 1] * under + wg + 220 * shine;\n      buf[o + 2] = buf[q + 2] * m + buf[o + 2] * under + wb + 240 * shine;\n    }\n  }\n\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n\nfunction span(P, i, xc, y, hw) {\n  if (y \u003c 0 || y >= H) return;\n  const a = Math.max(0, Math.ceil(xc - hw - 0.5));\n  const b = Math.min(W - 1, Math.floor(xc + hw - 0.5));\n  const k = 1 / Math.max(hw, 0.6);\n  for (let x = a; x \u003c= b; x++) {\n    const p = y * W + x;\n    P.fs[p] = i;\n    P.fu[p] = clamp((x + 0.5 - xc) * k, -0.98, 0.98);\n  }\n}\n\nfunction put(buf, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  buf[o] += (r - buf[o]) * a;\n  buf[o + 1] += (g - buf[o + 1]) * a;\n  buf[o + 2] += (b - buf[o + 2]) * a;\n}\n\n// A drop on a tip catches the light brighter as it swells.\nfunction bead(buf, x, y, a) {\n  put(buf, x, y, 180, 215, 255, 0.35 + 0.65 * a);\n}\n","layer":{"id":"layer-dripstone","type":"code","name":"dripstone","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dripstone\n// Family:  mineral\n// Idea:    A limestone cave in cross-section fills the panel, with stalactites hanging over stalagmites and columns and a banded flowstone curtain on one side, while drops swell at the tips, fall and splash on the stalagmites or ring the pool on the floor, each drop lengthening its formation a little under a show-cave light sequence and a caver's passing headlamp.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after show-cave lighting and the banded \"bacon\" drapery of limestone caves\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Age=0..1, Damp=0..1\n//\n// Knob 1: Lamp. Turns the two coloured show lamps round the colour wheel together, from aqua and violet at 0; the warm lamp behind the curtain and the headlamp stay white.\n// Knob 2: Speed. How fast cave time runs: at 2 a drop falls the 100 rows from the roof in 1.3 s and the light sequence takes 15 s round its three lamps; each drop that lands lengthens its stalagmite and stalactite by about half a row.\n// Knob 3: Age. How far the cave has grown, from short stalactites, soda straws and one column at 0 to a hall of thick columns at 1, with the curtain hanging twice as far down and the straws thickened into carrots. A straw that grows too long snaps and falls into the pool.\n// Knob 4: Damp. How wet the cave is: at 0 the stone is pale and chalky and the pool sits in a hollow of the floor; at 1 the pool covers the whole floor, the drips come three times as often, and the stone turns dark and shines with films of water creeping down the wall.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Drops fall at this many rows per second squared of cave time.\nconst GRAV = 110;\nconst MAXP = 160;\n// How far in front of the stone the lamps stand, in LEDs.\nconst DZ = 16;\n// The rows the wall's water films repeat over.\nconst FT = 144;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  return [k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p, k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p, k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p];\n}\n\n// The flowstone's bands, from cream through orange to rust and brown.\nconst BANDS = [\n  [0.95, 0.86, 0.68],\n  [0.92, 0.52, 0.2],\n  [0.98, 0.74, 0.42],\n  [0.62, 0.26, 0.12],\n  [0.96, 0.9, 0.78],\n  [0.84, 0.4, 0.16],\n  [0.45, 0.2, 0.1],\n];\n\nexport function setup(params) {\n  const P = params;\n  const lat = new Float32Array(65536);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  P.lat = lat;\n  P.ceil = new Int16Array(W);\n  P.flo = new Int16Array(W);\n  P.edge = new Float32Array(W);\n  // The curtain hangs from the roof where it slopes down to one side wall.\n  const right = Math.random() \u003c 0.5;\n  const cw = 20 + Math.floor(Math.random() * 4);\n  P.cx0 = right ? W - cw : 0;\n  P.cx1 = right ? W : cw;\n  P.cw = cw;\n  P.right = right;\n  P.cph = Math.random() * 6.28;\n  P.cfold = 6.5 + Math.random() * 2;\n  // The pool lies in a hollow of the floor away from the curtain.\n  P.bc = right ? 20 + Math.random() * 8 : 36 + Math.random() * 8;\n  P.bw = 11 + Math.random() * 3;\n  let deep = 0;\n  for (let x = 0; x \u003c W; x++) {\n    let c = 8 + 4 * vn(lat, x / 9, 5.5) + 1.6 * vn(lat, x / 3, 9.5);\n    if (x >= P.cx0 && x \u003c P.cx1) c += 9 * (right ? (x - P.cx0) / cw : (P.cx1 - 1 - x) / cw);\n    P.ceil[x] = Math.round(c);\n    let f = 115 + 3 * vn(lat, x / 8, 15.5) + 1.5 * vn(lat, x / 3, 19.5);\n    const b = (x + 0.5 - P.bc) / P.bw;\n    if (Math.abs(b) \u003c 1) f += 8.5 * Math.pow(1 - b * b, 0.6);\n    P.flo[x] = Math.round(f);\n    deep = Math.max(deep, P.flo[x]);\n  }\n  P.deep = deep;\n  bakeStone(P);\n\n  // Stalactite and stalagmite pairs across the width, none over the pool.\n  P.sites = [];\n  let x = 2 + Math.random() * 3;\n  while (x \u003c W - 2) {\n    const xi = Math.floor(x);\n    if (Math.abs(xi + 0.5 - P.bc) > P.bw - 4) P.sites.push(site(xi, 0));\n    x += 8 + Math.random() * 4;\n  }\n  // One pair, the one nearest the middle and clear of the curtain, has met already.\n  let best = null;\n  for (const s of P.sites) if (!inCurtain(P, s.x) && (!best || Math.abs(s.x - 32) \u003c Math.abs(best.x - 32))) best = s;\n  if (best) {\n    best.base = 1.04;\n    best.thick = 0.9;\n  }\n  // Soda straws over the pool, dripping quicker than the big stalactites.\n  for (let i = 0; i \u003c 4; i++) {\n    const s = site(Math.round(P.bc + (i - 1.5) * (3.5 + Math.random() * 1.5)), 1);\n    s.per *= 0.7;\n    P.sites.push(s);\n  }\n  P.drops = [];\n  P.rip = [];\n  P.px = new Float32Array(MAXP);\n  P.py = new Float32Array(MAXP);\n  P.pvx = new Float32Array(MAXP);\n  P.pvy = new Float32Array(MAXP);\n  P.pl = new Float32Array(MAXP);\n  P.pn = 0;\n  P.fu = new Float32Array(N);\n  P.fs = new Int8Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.ex = new Float32Array(W * 4);\n  P.ey = new Float32Array(H * 4);\n  Object.assign(P, { T: 0, t: 0, cGrow: 0, hue: 0, rate: 1, age: 0, damp: 0.06, started: false });\n}\n\nfunction site(x, kind) {\n  return {\n    x,\n    kind,\n    base: 0.12 + Math.pow(Math.random(), 1.2) * 0.58,\n    thick: 0.55 + Math.random() * 0.45,\n    grow: 0,\n    per: 1.6 + Math.random() * 2.4,\n    sw: Math.random(),\n    ph: Math.random() * 6.28,\n    tint: Math.random(),\n    // A soda straw's length, and the length it snaps at.\n    len: 4 + Math.random() * 14,\n    maxL: 20 + Math.random() * 8,\n    g: 0,\n    y0: 0,\n    y1: 0,\n    ls: 0,\n    lm: 0,\n  };\n}\n\nconst inCurtain = (P, x) => x >= P.cx0 && x \u003c P.cx1;\n\n// The back wall and the cut rock: colour, and the wall's relief as a normal.\nfunction bakeStone(P) {\n  const lat = P.lat;\n  P.alb = new Float32Array(N * 3);\n  P.nrm = new Float32Array(N * 3);\n  P.tex = new Float32Array(N);\n  const hgt = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) hgt[y * W + x] = 0.7 * vn(lat, x / 5 + 60, y / 7 + 60) + 0.3 * vn(lat, x / 2 + 90, y / 2.5 + 90);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const gx = hgt[y * W + Math.min(W - 1, x + 1)] - hgt[y * W + Math.max(0, x - 1)];\n      const gy = hgt[Math.min(H - 1, y + 1) * W + x] - hgt[Math.max(0, y - 1) * W + x];\n      const nx = -gx * 3;\n      const ny = -gy * 3;\n      const l = 1 / Math.sqrt(nx * nx + ny * ny + 1);\n      P.nrm[o] = nx * l;\n      P.nrm[o + 1] = ny * l;\n      P.nrm[o + 2] = l;\n      const ce = P.ceil[x];\n      const fl = P.flo[x];\n      let r;\n      let g;\n      let b;\n      if (y \u003c ce - 1 || y > fl) {\n        // The cut rock: beds of limestone, each its own shade.\n        const bed = Math.floor((y + 3 * vn(lat, x / 12, 40.5)) / 3);\n        const v = 0.13 + 0.05 * (((bed * 7919) % 5) / 4) + 0.05 * vn(lat, x / 2, y / 2 + 50);\n        r = v * 1.05;\n        g = v * 0.95;\n        b = v * 0.88;\n      } else if (y === ce - 1 || y === fl) {\n        // The skin of the roof and the floor, white with old calcite.\n        r = 0.8;\n        g = 0.74;\n        b = 0.62;\n        P.nrm[o] = 0;\n        P.nrm[o + 1] = y === fl ? -0.8 : 0.8;\n        P.nrm[o + 2] = 0.6;\n      } else {\n        // The back wall, darker than what stands in front of it, with pale streaks of flowstone.\n        const v = 0.22 + 0.22 * vn(lat, x / 9, y / 9 + 20);\n        const streak = Math.max(0, vn(lat, x / 2.2 + 30, y / 16 + 30) - 0.58) * 1.6;\n        r = v * 1.1 + streak * 0.5;\n        g = v * 0.96 + streak * 0.44;\n        b = v * 0.8 + streak * 0.34;\n      }\n      P.alb[o] = r;\n      P.alb[o + 1] = g;\n      P.alb[o + 2] = b;\n      // Streaks down the calcite of the formations.\n      P.tex[p] = 0.16 * (vn(lat, x * 1.1 + 200, y / 9 + 200) - 0.5);\n    }\n  // The wall's water films, as rivulets that wrap round every FT rows so they can scroll down.\n  P.ftex = new Float32Array(W * FT);\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 0; y \u003c FT; y++) {\n      const a = vn(lat, x / 1.4 + 140, y / 9);\n      const b = vn(lat, x / 1.4 + 140, (y - FT) / 9);\n      const m = y / FT;\n      P.ftex[x * FT + y] = a * (1 - m) + b * m;\n    }\n}\n\n// The curtain's lower edge in each of its columns, as long as Age and its drips have made it.\nfunction curtain(P) {\n  const a = Math.min(1.2, 0.45 + 0.65 * P.age + P.cGrow);\n  for (let x = P.cx0; x \u003c P.cx1; x++) {\n    const s = (x - P.cx0 + 0.5) / P.cw;\n    const fold = 0.5 - 0.5 * Math.cos((6.2832 * (x + 0.5)) / P.cfold + P.cph);\n    P.edge[x] = P.ceil[x] + (8 + 30 * a) * (0.45 + 0.55 * Math.sin(Math.PI * (P.right ? 0.35 + 0.65 * s : 1 - 0.65 * s))) + 3.4 * fold;\n  }\n}\n\nfunction geom(P, s) {\n  if (s.kind === 1) {\n    s.y0 = P.ceil[s.x];\n    return;\n  }\n  const y0 = inCurtain(P, s.x) ? P.edge[s.x] : P.ceil[s.x];\n  const y1 = P.flo[s.x];\n  const gap = y1 - y0;\n  s.g = Math.min(1.3, s.base + 0.8 * P.age + s.grow);\n  s.y0 = y0;\n  s.y1 = y1;\n  s.ls = s.g * gap * 0.42;\n  s.lm = s.g * gap * 0.58;\n}\n\nfunction splash(P, x, y, n, up) {\n  for (let i = 0; i \u003c n; i++) {\n    const k = P.pn;\n    P.pn = (k + 1) % MAXP;\n    P.px[k] = x + (Math.random() - 0.5);\n    P.py[k] = y;\n    P.pvx[k] = (Math.random() - 0.5) * 34;\n    P.pvy[k] = -(10 + Math.random() * 26) * up;\n    P.pl[k] = 0.45 + Math.random() * 0.3;\n  }\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.level = P.deep - 7.5 - P.damp * 12;\n  curtain(P);\n  const often = 0.6 + 1.4 * P.damp;\n  for (const s of P.sites) {\n    geom(P, s);\n    if (s.kind === 0 && s.g >= 1) continue;\n    s.sw += (h * often) / s.per;\n    if (s.sw >= 1) {\n      s.sw -= 1;\n      const tip = s.kind === 1 ? s.y0 + s.len : s.y0 + s.ls;\n      P.drops.push({ s, x: s.x, y: tip + 1, v: 6, len: 0 });\n    }\n  }\n  const lvl = P.level;\n  for (let i = P.drops.length - 1; i >= 0; i--) {\n    const d = P.drops[i];\n    const s = d.s;\n    d.v += GRAV * h;\n    d.y += d.v * h;\n    const fl = P.flo[d.x];\n    const pool = fl > lvl + 0.5;\n    const target = s.kind === 0 && !d.len ? s.y1 - s.lm : pool ? lvl : fl;\n    if (d.y \u003c target) continue;\n    P.drops.splice(i, 1);\n    if (d.len) {\n      // A broken straw goes into the pool with a heavy splash.\n      splash(P, d.x, target - 1, 14, 1.4);\n      P.rip.push({ x: d.x + 0.5, a: 0, k: 1.6 });\n      continue;\n    }\n    if (s.kind === 0 && s.y1 - s.lm \u003c fl - 0.5) {\n      // Each drop leaves a little calcite: the stalagmite rises and the stalactite reaches down.\n      s.grow += 0.011 * (1 - s.grow / 0.36);\n      if (inCurtain(P, s.x)) P.cGrow += 0.004 * (1 - P.cGrow / 0.25);\n      splash(P, d.x, target - 1, 4, 1);\n    } else {\n      splash(P, d.x, target - 1, pool ? 3 : 4, pool ? 1.2 : 0.8);\n      if (pool) P.rip.push({ x: d.x + 0.5, a: 0, k: 1 });\n      if (s.kind === 1) {\n        s.len += 0.55;\n        if (s.len > s.maxL + 10 * P.age) {\n          // Too long to hold its own weight: the straw snaps and falls.\n          const keep = 2 + Math.random() * 3;\n          P.drops.push({ s, x: s.x, y: s.y0 + s.len, v: 0, len: s.len - keep });\n          s.len = keep;\n        }\n      }\n    }\n  }\n  for (let i = 0; i \u003c MAXP; i++) {\n    if (P.pl[i] \u003c= 0) continue;\n    P.pl[i] -= h;\n    P.pvy[i] += GRAV * 0.8 * h;\n    P.px[i] += P.pvx[i] * h;\n    P.py[i] += P.pvy[i] * h;\n  }\n  for (let i = P.rip.length - 1; i >= 0; i--) {\n    P.rip[i].a += h;\n    if (P.rip[i].a > 1.8) P.rip.splice(i, 1);\n  }\n  if (P.rip.length > 14) P.rip.splice(0, P.rip.length - 14);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  P.age = clamp(k[2], 0, 1);\n  P.damp = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Twenty seconds of the cave before it opens, at the knob's pace, so the drips are\n    // already falling and the time-lapse has grown what Speed lets it.\n    for (let i = 0; i \u003c 600; i++) step(P, P.rate / 30);\n  }\n  P.t += dt;\n  step(P, dt * P.rate);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { lat, buf, fu, fs, alb, nrm, ceil, flo, edge, sites } = P;\n  const T = P.T;\n  const damp = P.damp;\n\n  // The show lamps: two coloured ones low on either side and a warm one behind the curtain,\n  // fading up and down in turn, their colours wandering a little.\n  const w = (6.2832 * T) / 15;\n  const lamps = [];\n  const ha = 0.47 + P.hue;\n  const cxm = (P.cx0 + P.cx1) / 2;\n  const defs = [\n    [6, 108, ha + 0.04 * Math.sin(T * 0.31), 0.7, 52],\n    [58, 104, ha + 0.3 + 0.04 * Math.sin(T * 0.23 + 2), 0.7, 52],\n    [cxm, 38, 0.08, 0.3, 40],\n  ];\n  for (let k = 0; k \u003c 3; k++) {\n    const d = defs[k];\n    const s = 0.5 + 0.5 * Math.sin(w + (k * 6.2832) / 3);\n    const I = 0.3 + 0.95 * s * Math.sqrt(s);\n    const c = hsv(d[2], d[3], I);\n    lamps.push({ x: d[0], y: d[1], r: c[0], g: c[1], b: c[2], I });\n    const inv = 1 / (d[4] * d[4]);\n    for (let x = 0; x \u003c W; x++) P.ex[k * W + x] = Math.exp(-(x - d[0]) * (x - d[0]) * inv);\n    for (let y = 0; y \u003c H; y++) P.ey[k * H + y] = Math.exp(-(y - d[1]) * (y - d[1]) * inv);\n  }\n  // The caver's headlamp wanders over the cave on its own time.\n  const t = P.t;\n  const hx = 32 + 38 * Math.sin(0.52 * t + 0.4);\n  const hy = 62 + 36 * Math.sin(0.23 * t + 2.1);\n  for (let x = 0; x \u003c W; x++) P.ex[3 * W + x] = 1.05 * Math.exp(-((x - hx) * (x - hx)) / 90);\n  for (let y = 0; y \u003c H; y++) P.ey[3 * H + y] = Math.exp(-((y - hy) * (y - hy)) / 170);\n  const ex = P.ex;\n  const ey = P.ey;\n\n  // The formations, drawn into a map of which one covers each LED and where across it.\n  fs.fill(-1);\n  for (let i = 0; i \u003c sites.length; i++) {\n    const s = sites[i];\n    const xc = s.x + 0.5;\n    if (s.kind === 1) {\n      // A soda straw: one LED wide, thickening into a carrot with Age.\n      const wT = 0.55 + 1.7 * P.age;\n      for (let y = s.y0; y \u003c s.y0 + s.len && y \u003c H; y++) {\n        const d = (y + 0.5 - s.y0) / s.len;\n        span(P, i, xc, y, 0.55 + (wT - 0.55) * (1 - d) * (1 - d));\n      }\n      continue;\n    }\n    const gg = Math.min(1.2, s.g);\n    const wT = 0.9 + 2.4 * s.thick * (0.3 + gg);\n    const y0 = s.y0;\n    for (let y = Math.max(0, Math.floor(y0)); y \u003c y0 + s.ls && y \u003c H; y++) {\n      const d = (y + 0.5 - y0) / s.ls;\n      const hw = 0.55 + (wT - 0.55) * Math.pow(1 - d, 1.7) + 0.3 * Math.sin(y * 1.3 + s.ph) * (1 - d);\n      span(P, i, xc, y, hw);\n    }\n    const wB = 1.6 + 3 * s.thick * (0.45 + gg);\n    const y1 = s.y1;\n    for (let y = Math.floor(y1 - s.lm); y \u003c y1; y++) {\n      const hh = (y1 - (y + 0.5)) / s.lm;\n      if (hh > 1 || hh \u003c 0) continue;\n      const hw = Math.max(0.55, wB * Math.pow(1 - hh * hh * hh * hh, 0.3) * (0.8 + 0.2 * (1 - hh)) * (1 + 0.35 * Math.pow(1 - hh, 5)));\n      span(P, i, xc, y, hw);\n    }\n  }\n\n  const amb = 0.07;\n  const tex = P.tex;\n  const ftex = P.ftex;\n  const fsh = FT - (Math.floor(T * 12.6) % FT);\n  const wet = 0.15 + 0.85 * damp;\n  const dry = 1 - damp;\n  const cfold = P.cfold;\n  const cph = P.cph;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const ce = ceil[x];\n      const fl = flo[x];\n      let ar;\n      let ag;\n      let ab;\n      let nx;\n      let ny;\n      let nz;\n      let glow = 0;\n      let spec = 0;\n      let lit = 1;\n      const f = fs[p];\n      const cur = x >= P.cx0 && x \u003c P.cx1 && y >= ce - 1 && y \u003c edge[x];\n      if (f >= 0) {\n        const s = sites[f];\n        const u = fu[p];\n        nx = u;\n        ny = 0;\n        nz = Math.sqrt(Math.max(0, 1 - u * u));\n        // Calcite, white or stained with iron, ringed where it grew in pulses.\n        const ring = 0.97 + 0.03 * Math.sin(y * 0.9 + s.ph) + tex[p];\n        const st = s.tint;\n        ar = (0.96 - 0.02 * st) * ring;\n        ag = (0.9 - 0.2 * st) * ring;\n        ab = (0.8 - 0.36 * st) * ring;\n        spec = wet * Math.max(0, 1 - Math.abs(u + 0.4) * 3.5);\n        if (s.kind === 0 && s.g >= 1) {\n          // Water runs down a column in a thin film that catches the light as it goes.\n          const run = (((y - T * 14 + s.ph * 9) % 26) + 26) % 26;\n          if (run \u003c 4) spec += 0.7 * wet * Math.max(0, 1 - Math.abs(u + 0.3) * 2.5);\n        }\n      } else if (cur) {\n        // The curtain: bands laid down parallel to its edge, folded, lit through from behind.\n        const top = ce - 1;\n        const fold = Math.sin((6.2832 * (x + 0.5)) / cfold + cph);\n        const hang = (y - top) / Math.max(4, edge[x] - top);\n        const by = (y - top - 3.4 * (0.5 - 0.5 * Math.cos((6.2832 * (x + 0.5)) / cfold + cph)) * hang * hang) / 2.4;\n        const bi = Math.floor(by + 0.25 * vn(lat, x / 4, by * 1.3));\n        const c = BANDS[((bi % 7) + 7) % 7];\n        const pleat = 0.6 + 0.4 * Math.cos((6.2832 * (x + 0.5)) / cfold + cph + 1.2);\n        ar = c[0] * pleat;\n        ag = c[1] * pleat;\n        ab = c[2] * pleat;\n        nx = 0.75 * fold;\n        ny = 0;\n        nz = 0.66;\n        const thin = clamp(1 - (edge[x] - y) / 24, 0, 1);\n        glow = lamps[2].I * (0.1 + 0.6 * thin) * (0.55 + 0.45 * fold);\n        spec = wet * 0.35 * Math.max(0, fold - 0.6);\n      } else {\n        ar = alb[o];\n        ag = alb[o + 1];\n        ab = alb[o + 2];\n        nx = nrm[o];\n        ny = nrm[o + 1];\n        nz = nrm[o + 2];\n        if (y \u003c ce - 1 || y > fl) {\n          // Cut rock takes only what light leaks in at its edge.\n          const dd = y \u003c ce ? ce - 1 - y : y - fl;\n          lit = Math.max(0, 0.45 - dd * 0.15);\n          glow = 0.9;\n        } else if (damp > 0.02) {\n          // Films of water creep down a damp wall and shine.\n          const film = ftex[x * FT + ((y + fsh) % FT)] - 0.7 + 0.12 * damp;\n          if (film > 0) spec = damp * film * 1.3;\n        }\n      }\n      if (glow \u003c 0.9) {\n        // Dry stone is chalky and pale; wet stone is darker and its colour deeper.\n        const grey = (ar + ag + ab) * 0.38;\n        const d = dry * 0.45;\n        const v = 1.08 - 0.3 * damp;\n        ar = (ar + (grey - ar) * d) * v;\n        ag = (ag + (grey - ag) * d) * v;\n        ab = (ab + (grey - ab) * d) * v;\n      }\n      let sr = 0;\n      let sg = 0;\n      let sb = 0;\n      let lr = amb;\n      let lg = amb;\n      let lb = amb * 1.15;\n      if (lit > 0) {\n        for (let k = 0; k \u003c 3; k++) {\n          const e = ex[k * W + x] * ey[k * H + y];\n          if (e \u003c 0.01) continue;\n          const L = lamps[k];\n          const dx = L.x - x;\n          const dy = L.y - y;\n          const dif = (nx * dx + ny * dy + nz * DZ) / Math.sqrt(dx * dx + dy * dy + DZ * DZ);\n          const a = e * (0.2 + 0.8 * Math.max(0, dif)) * lit;\n          lr += L.r * a;\n          lg += L.g * a;\n          lb += L.b * a;\n          if (dif > 0.8) {\n            // A wet face turned to a lamp throws back a glint of its colour.\n            const g2 = (dif - 0.8) * 5;\n            const gl = g2 * g2 * e * damp * 0.45;\n            sr += L.r * gl;\n            sg += L.g * gl;\n            sb += L.b * gl;\n          }\n        }\n        const eh = ex[3 * W + x] * ey[3 * H + y] * lit;\n        if (eh > 0.01) {\n          lr += eh * nz;\n          lg += eh * 0.93 * nz;\n          lb += eh * 0.8 * nz;\n          spec *= 1 + 2 * eh;\n        }\n      }\n      const sp = spec * 0.5 * (lr + lg + lb);\n      buf[o] = 255 * (ar * (lr * 1.25 + glow) + sp + sr);\n      buf[o + 1] = 255 * (ag * (lg * 1.25 + glow * 0.9) + sp + sg);\n      buf[o + 2] = 255 * (ab * (lb * 1.25 + glow * 0.75) + sp + sb);\n    }\n  }\n\n  // Drops swelling at the tips and falling, and the spray where they land.\n  for (const s of sites) {\n    if (s.kind === 0 && s.g >= 1) continue;\n    const tip = Math.floor(s.kind === 1 ? s.y0 + s.len : s.y0 + s.ls);\n    if (s.sw > 0.25) bead(buf, s.x, tip, (s.sw - 0.25) / 0.75);\n    if (s.sw > 0.8) bead(buf, s.x, tip + 1, (s.sw - 0.8) / 0.2);\n  }\n  for (const d of P.drops) {\n    if (d.len) {\n      for (let j = 0; j \u003c d.len; j++) put(buf, d.x, Math.round(d.y - j), 200, 180, 150, 1);\n      continue;\n    }\n    const tail = Math.min(3, d.v * 0.03);\n    for (let j = 0; j \u003c= tail; j++) put(buf, d.x, Math.round(d.y - j), 190, 220, 255, 1 - j / (tail + 1));\n  }\n  for (let i = 0; i \u003c MAXP; i++) if (P.pl[i] > 0) put(buf, Math.round(P.px[i]), Math.round(P.py[i]), 210, 230, 255, Math.min(1, P.pl[i] * 3));\n\n  // The pool: the cave mirrored in it, rings running out from each drop.\n  const lvl = P.level;\n  const ly = Math.ceil(lvl);\n  const rip = P.rip;\n  // The water's own colour, from the lamp nearest the pool.\n  const L0 = lamps[P.bc \u003c 32 ? 0 : 1];\n  const wr = 10 + 60 * L0.r;\n  const wg = 20 + 60 * L0.g;\n  const wb = 30 + 60 * L0.b;\n  for (let x = 0; x \u003c W; x++) {\n    if (flo[x] \u003c= ly) continue;\n    for (let y = ly; y \u003c= flo[x] && y \u003c H; y++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const dy = (y - lvl) * 3.5;\n      let ring = 0;\n      for (const r of rip) {\n        const dx = x + 0.5 - r.x;\n        const R = 2 + 15 * r.a;\n        const q = Math.sqrt(dx * dx + dy * dy) - R;\n        if (q > -2 && q \u003c 2) ring += (1 - q * q * 0.25) * (1 - r.a / 1.8) * r.k * 1.4;\n      }\n      const sx = clamp(Math.round(x + ring * 1.5 + Math.sin(y * 0.9 + T * 2) * 0.6), 0, W - 1);\n      const sy = clamp(2 * ly - y - 1, 0, H - 1);\n      const q = (sy * W + sx) * 3;\n      const depth = Math.min(1, (y - lvl) / 8);\n      const m = 0.5 - 0.2 * depth;\n      const under = y === flo[x] ? 0.35 : 0.15;\n      const shine = (y === ly ? 0.3 : 0) + 0.4 * Math.min(1, ring);\n      buf[o] = buf[q] * m + buf[o] * under + wr + 200 * shine;\n      buf[o + 1] = buf[q + 1] * m + buf[o + 1] * under + wg + 220 * shine;\n      buf[o + 2] = buf[q + 2] * m + buf[o + 2] * under + wb + 240 * shine;\n    }\n  }\n\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n\nfunction span(P, i, xc, y, hw) {\n  if (y \u003c 0 || y >= H) return;\n  const a = Math.max(0, Math.ceil(xc - hw - 0.5));\n  const b = Math.min(W - 1, Math.floor(xc + hw - 0.5));\n  const k = 1 / Math.max(hw, 0.6);\n  for (let x = a; x \u003c= b; x++) {\n    const p = y * W + x;\n    P.fs[p] = i;\n    P.fu[p] = clamp((x + 0.5 - xc) * k, -0.98, 0.98);\n  }\n}\n\nfunction put(buf, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  buf[o] += (r - buf[o]) * a;\n  buf[o + 1] += (g - buf[o + 1]) * a;\n  buf[o + 2] += (b - buf[o + 2]) * a;\n}\n\n// A drop on a tip catches the light brighter as it swells.\nfunction bead(buf, x, y, a) {\n  put(buf, x, y, 180, 215, 255, 0.35 + 0.65 * a);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Speed=0.2..3, Age=0..1, Damp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"Turns the two coloured show lamps round the colour wheel together, from aqua and violet at 0; the warm lamp behind the curtain and the headlamp stay white."},{"name":"Speed","min":0.2,"max":3,"about":"How fast cave time runs: at 2 a drop falls the 100 rows from the roof in 1.3 s and the light sequence takes 15 s round its three lamps; each drop that lands lengthens its stalagmite and stalactite by about half a row."},{"name":"Age","min":0,"max":1,"about":"How far the cave has grown, from short stalactites, soda straws and one column at 0 to a hall of thick columns at 1, with the curtain hanging twice as far down and the straws thickened into carrots. A straw that grows too long snaps and falls into the pool."},{"name":"Damp","min":0,"max":1,"about":"How wet the cave is: at 0 the stone is pale and chalky and the pool sits in a hollow of the floor; at 1 the pool covers the whole floor, the drips come three times as often, and the stone turns dark and shines with films of water creeping down the wall."}],"start":[0,2,0,0.06],"measures":{"motion":0.113,"detail":0.0548,"edges":0.2063,"complexity":2.555,"coverage":0.9702,"colour":0.163,"drift":0.1125},"knobResponse":[0.0618,0.1355,0.0996,0.0869]},{"slug":"drop-tower","title":"Drop Tower","family":"fair","round":18,"note":"밤 놀이공원의 드롭 타워가 128줄을 다 써요. 링에 탄 여덟 사람을 꼭대기까지 끌어올려 매달아 두었다가 탑 높이에 맞춘 중력으로 떨어뜨리고, 자석 브레이크에서 번쩍이며 세워요. K1 을 누르면 오르는 중에도 바로 떨어뜨려요.","idea":"A drop tower at a night fair hauls a ring of riders up the full height of the panel while its marquee lights chase after them, holds them at the top while the lights go out below, lets them fall at the tower's own gravity and stops them hard on the magnetic brakes over a crowd holding up their phones.","buttons":"K1 tap drops the ring at once from wherever it is on the way up, or starts the haul when it is waiting at the station.","code":"// ===== Patternflow pattern =====\n// Title:   Drop Tower\n// Family:  fair\n// Idea:    A drop tower at a night fair hauls a ring of riders up the full height of the panel while its marquee lights chase after them, holds them at the top while the lights go out below, lets them fall at the tower's own gravity and stops them hard on the magnetic brakes over a crowd holding up their phones.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the free-fall towers of amusement parks, whose ring of seats is stopped by magnetic brakes\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Height=50..110, Thrill=0..1\n//\n// Knob 1: Lights. Turns the bulbs of the tower, the ring and the Ferris wheel round the colour wheel together with the glow they throw on the sky, starting from gold marquee bulbs over a violet glow.\n// Knob 2: Speed. How fast the night runs: at 2 the ride runs in real time, 19 s a ride with a fall of 2.1 s at 74 km/h from the top of a 50 m tower; at 0.2 it is ten times slower, at 3 half as fast again.\n// Knob 3: Height. The tower's height, 50 to 110 m. The tower always stands the full 128 rows, so a taller one makes the 40 m Ferris wheel beside it smaller, the haul longer and the fall slower on the panel, 3.3 s at 110 m.\n// Knob 4: Thrill. How long the ring hangs at the top, 1.8 s to 6 s, with the tower beating like a heart until its lights go out from the foot up in the last 1.8 s; and how hard the brakes bite, from a third of the travel at 1.8 g to a fifth at 4 g.\n// Buttons: K1 tap drops the ring at once from wherever it is on the way up, or starts the haul when it is waiting at the station.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The tower stands on column 40, from the beacon on row 1 and the cap at rows 4..10 to its\n// foot on row 121.\nconst TX = 40;\nconst YG = 121;\n// The riders' seat row at the top of the travel and at the station.\nconst YTOP = 22;\nconst YST = 110;\n// Ride states.\nconst BOARD = 0;\nconst CLIMB = 1;\nconst HOLD = 2;\nconst FALL = 3;\nconst BRAKE = 4;\nconst SETTLE = 5;\nconst LOWER = 6;\nconst G = 9.81;\n// The brakes stop the ring 4 m above the station, and it is let down from there.\nconst STOP = 4;\nconst SHIRTS = [[170, 40, 50], [40, 90, 170], [220, 210, 200], [50, 150, 70], [190, 140, 40], [130, 60, 160], [40, 40, 48]];\nconst SKIN = [[210, 160, 120], [150, 100, 70], [235, 190, 155]];\nconst HAIR = [[30, 20, 16], [90, 60, 30], [200, 170, 90], [20, 20, 24]];\n// A bulb's light on its neighbours: 1 LED away, diagonal, 2 away.\nconst GLOW = [[1, 0, 0.32], [-1, 0, 0.32], [0, 1, 0.32], [0, -1, 0.32], [1, 1, 0.14], [-1, 1, 0.14], [1, -1, 0.14], [-1, -1, 0.14], [2, 0, 0.06], [-2, 0, 0.06], [0, 2, 0.06], [0, -2, 0.06]];\n\n// Colours the Lights knob leaves alone: the wheel's legs and rim, a cabin's window, the\n// ring's catch car, seats and bands, the riders' harness, jeans and shoes, the strings'\n// wire and warm bulbs, a phone's arm, the beacon, a star and the crowd.\nconst LEG = [26, 26, 40];\nconst RIM1 = [40, 40, 58];\nconst RIM2 = [30, 30, 46];\nconst WINDOW = [210, 170, 100];\nconst CAR = [24, 24, 34];\nconst SEAT = [30, 26, 44];\nconst BAND = [96, 96, 112];\nconst BAND2 = [30, 30, 42];\nconst HARNESS = [90, 86, 30];\nconst JEANS = [40, 56, 110];\nconst SHOE = [225, 225, 235];\nconst WIRE = [12, 10, 16];\nconst WARM = [255, 196, 120];\nconst ARM = [6, 6, 10];\nconst STROBE = [255, 255, 255];\nconst BEACON = [255, 30, 20];\nconst STAR = [1, 1, 1.2];\nconst DARK = [4, 4, 8];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction mix(a, b, u) {\n  return [a[0] + (b[0] - a[0]) * u, a[1] + (b[1] - a[1]) * u, a[2] + (b[2] - a[2]) * u];\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, started: false, Ht: 0, wheel: 0.3, flash: 0, st: BOARD, e: 0, h: 0, v: 0, hc: 0, hue: 0, thrill: 0 });\n  P.buf = new Float32Array(N * 3);\n  P.sky = new Float32Array(N * 3);\n  P.tw = new Float32Array(N * 3);\n  P.tm = new Uint8Array(N);\n  P.lv = new Float32Array(H);\n  P.gx = new Float32Array(W);\n  P.gy = new Float32Array(H);\n  // Deep blue overhead, paler towards the horizon, and the stalls' warm light on the\n  // ground behind the crowd.\n  for (let y = 0; y \u003c H; y++) {\n    const c = mix([2, 4, 18], [10, 16, 52], y / (H - 1));\n    if (y > 108) for (let i = 0; i \u003c 3; i++) c[i] += [70, 46, 30][i] * ((y - 108) / 13) ** 2;\n    for (let x = 0; x \u003c W; x++) P.sky.set(c, (y * W + x) * 3);\n  }\n  // A game stall on the right: a striped awning, a lit counter with prizes on two shelves.\n  const paint = (x, y, c) => P.sky.set(c, (y * W + x) * 3);\n  for (let x = 49; x \u003c W; x++) {\n    for (let y = 103; y \u003c= 105; y++) paint(x, y, ((x - 49) >> 1) & 1 ? [220, 210, 200] : [200, 40, 50]);\n    if ((x & 1) === 0) paint(x, 106, [200, 40, 50]);\n    for (let y = 107; y \u003c= 112; y++) paint(x, y, x === 49 || x === 63 ? [60, 40, 30] : [150, 108, 60]);\n    for (let y = 113; y \u003c= 118; y++) paint(x, y, y === 113 ? [150, 60, 56] : [80, 30, 34]);\n  }\n  for (let x = 51; x \u003c 62; x += 2)\n    for (const y of [108, 110]) paint(x, y, hsv(Math.random(), 0.8, 1));\n  P.stars = [];\n  for (let i = 0; i \u003c 34; i++) P.stars.push([Math.floor(Math.random() * W), Math.floor(Math.random() * 64), 20 + Math.random() * 40, Math.random() * 7]);\n  // Marquee bulbs every 3 rows down both edges of the tower, counted from the foot.\n  P.bulbs = [];\n  for (let y = 116; y >= 14; y -= 3) for (const s of [-1, 1]) P.bulbs.push({ x: TX + 5 * s, y, q: (116 - y) / 102, i: (116 - y) / 3, L: 0 });\n  // Eight riders round the front of the ring, two LEDs wide.\n  P.riders = [];\n  for (let i = 0; i \u003c 8; i++) {\n    const pick = (a) => a[Math.floor(Math.random() * a.length)];\n    P.riders.push({ x: TX - 15 + 4 * i, shirt: pick(SHIRTS), skin: pick(SKIN), hair: pick(HAIR), bold: Math.random(), kick: Math.random() * 7 });\n  }\n  // The crowd: heads 3 LEDs wide over shoulders that widen to 7, children lower and a few on shoulders.\n  const C = (P.crowd = new Uint8Array(N));\n  P.phones = [];\n  const person = (hx, hy, rows) => {\n    for (let d = 0; d \u003c rows && hy + d \u003c H; d++) {\n      const half = d \u003c 3 ? 1 : d === 3 ? 0 : Math.min(3, d - 3);\n      for (let x = hx - half; x \u003c= hx + half; x++) if (x >= 0 && x \u003c W && hy + d >= 0) C[(hy + d) * W + x] = 1;\n    }\n  };\n  let j = 0;\n  for (let x = -1; x \u003c W + 2; x += 4 + Math.floor(Math.random() * 3)) {\n    const r = Math.random();\n    const hy = r \u003c 0.2 ? 121 : 117 + Math.floor(Math.random() * 3);\n    person(x, hy, 20);\n    if (r > 0.93) person(x, hy - 6, 6);\n    if (j++ % 2 === 0 && x > 1 && x \u003c W - 2) {\n      const side = Math.random() \u003c 0.5 ? -2 : 2;\n      P.phones.push({ x: x + side, y: hy - 3, at: 0.1 + 0.75 * Math.random(), up: 0 });\n    }\n  }\n  P.body = [];\n  for (let p = W; p \u003c N; p++) if (C[p]) P.body.push(p);\n  // Two strings of bulbs from the station canopy out past the panel's edges.\n  P.string = [];\n  const sag = (x0, y0, x1, y1, s) => {\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      P.string.push([x, Math.round(y0 + (y1 - y0) * u + s * 4 * u * (1 - u)), (x - x0) % 3 === 0]);\n    }\n  };\n  sag(0, 86, 29, 99, 5);\n  sag(51, 99, 63, 90, 3);\n}\n\n// The tower's steel for a height in metres: two rails, an X brace every 5 m, the cap,\n// the station, and the scale of everything round it.\nfunction build(P, Ht) {\n  P.Ht = Ht;\n  P.sc = (YG - 2) / Ht;\n  P.h0 = (YG - YST) / P.sc;\n  P.h1 = (YG - YTOP) / P.sc;\n  P.vc = 3 + Ht / 20;\n  P.h = clamp(P.h || P.h0, P.h0, P.h1);\n  const T = P.tw;\n  const M = P.tm;\n  T.fill(0);\n  M.fill(0);\n  const put = (x, y, c) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    T.set(c, (y * W + x) * 3);\n    M[y * W + x] = 1;\n  };\n  // Lit from the fair below: brighter at the foot.\n  const steel = (y, f) => mix([30, 34, 54], [72, 62, 66], clamp((y - 40) / 81, 0, 1)).map((v) => v * f);\n  for (let y = 11; y \u003c= YG; y++) {\n    put(TX - 4, y, steel(y, 1));\n    put(TX + 4, y, steel(y, 1));\n    put(TX, y, steel(y, 0.45));\n  }\n  const seg = 5 * P.sc;\n  for (let y0 = YG; y0 > 11; y0 -= seg) {\n    const y1 = Math.max(11, y0 - seg);\n    for (let x = -3; x \u003c= 3; x++) put(TX + x, y0, steel(y0, 0.7));\n    for (let s = 0; s \u003c= 1; s += 0.5 / seg) {\n      const y = y0 + (y1 - y0) * s;\n      put(TX - 4 + 8 * s, y, steel(y, 0.6));\n      put(TX + 4 - 8 * s, y, steel(y, 0.6));\n    }\n  }\n  // The cap: the hoist house on top, and a mast for the beacon.\n  for (let y = 4; y \u003c= 10; y++) for (let x = TX - 6; x \u003c= TX + 6; x++) put(x, y, y === 4 || Math.abs(x - TX) === 6 ? [64, 62, 84] : [16, 16, 28]);\n  for (let y = 1; y \u003c 4; y++) put(TX, y, [50, 50, 64]);\n  // The station: a lit deck under the ring and a canopy over the queue.\n  for (let x = TX - 15; x \u003c= TX + 15; x++) {\n    put(x, YG - 1, [190, 140, 80]);\n    put(x, YG, [90, 60, 40]);\n  }\n  for (let x = TX - 10; x \u003c= TX + 10; x++) put(x, 99, [80, 54, 70]);\n  P.steel = [];\n  for (let p = 0; p \u003c N; p++) if (M[p]) P.steel.push(p);\n}\n\nfunction go(P, st) {\n  P.st = st;\n  P.e = 0;\n  P.hc = P.h;\n}\n\nfunction fall(P) {\n  go(P, FALL);\n  P.v = 0;\n}\n\nfunction ride(P, d) {\n  P.e += d;\n  if (P.st === BOARD) {\n    P.h = P.h0;\n    if (P.e > 3.5) go(P, CLIMB);\n  } else if (P.st === CLIMB) {\n    // An even haul that eases in and out: the speed peaks at twice the average.\n    const u = Math.min(1, P.e / Math.max(1, (P.h1 - P.hc) / P.vc));\n    P.h = P.hc + (P.h1 - P.hc) * (u - Math.sin(2 * Math.PI * u) / (2 * Math.PI));\n    if (u >= 1) go(P, HOLD);\n  } else if (P.st === HOLD) {\n    P.h = P.h1;\n    if (P.e > P.hold) fall(P);\n  } else if (P.st === FALL) {\n    P.v -= G * d;\n    P.h += P.v * d;\n    if (P.h \u003c= P.hB) {\n      go(P, BRAKE);\n      P.a = (P.v * P.v) / (2 * Math.max(0.5, P.h - P.hS));\n      P.flash = 1;\n    }\n  } else if (P.st === BRAKE) {\n    P.v += P.a * d;\n    P.h += P.v * d;\n    if (P.v >= 0) {\n      P.v = 0;\n      go(P, SETTLE);\n    }\n  } else if (P.st === SETTLE) {\n    // The ring rocks on the brake fins and comes to rest.\n    P.h = P.hc + (0.3 + 0.9 * P.thrill) * Math.sin(P.e * 13) * Math.exp(-P.e * 5);\n    if (P.e > 1.2) go(P, LOWER);\n  } else {\n    P.h = Math.max(P.h0, P.hc - 1.5 * P.e);\n    if (P.h \u003c= P.h0) go(P, BOARD);\n  }\n}\n\nfunction tick(P, dt) {\n  while (dt > 1e-6) {\n    const d = Math.min(dt, 1 / 60);\n    dt -= d;\n    ride(P, d);\n    P.t += d;\n    P.wheel += d * 0.1;\n    P.flash *= Math.exp(-d / 0.3);\n    const high = P.st >= CLIMB && P.st \u003c= BRAKE ? (P.h - P.h0) / (P.h1 - P.h0) : P.st === SETTLE ? 1 : -1;\n    for (const f of P.phones) f.up = clamp(f.up + (high > f.at ? d * 2 : -d * 0.6), 0, 1);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 50, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  const Ht = clamp(k[2], 50, 110);\n  P.thrill = clamp(k[3], 0, 1);\n  if (Math.abs(Ht - P.Ht) > 0.25) build(P, Ht);\n  P.hold = 1.8 + 4.2 * P.thrill;\n  P.hS = P.h0 + STOP;\n  P.hB = P.hS + (0.32 - 0.14 * P.thrill) * (P.h1 - P.h0);\n  if (!P.started) {\n    // The fair has been open a while: the panel opens on the ring hanging at the top,\n    // and at the opening knobs it falls 2 s in.\n    P.started = true;\n    for (let i = 0; i \u003c 307; i++) tick(P, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.st === BOARD) go(P, CLIMB);\n    else if ((P.st === CLIMB || P.st === HOLD) && P.h > P.hB + 2) fall(P);\n  }\n  tick(P, (dt * speed) / 2);\n}\n\n// How bright each tower bulb is in this part of the ride.\nfunction bulbLevel(P, b, ys) {\n  const t = P.t;\n  if (P.st === CLIMB) {\n    // A three-bulb chase running up at 12 bulbs a second, brighter under the ring.\n    const on = (((Math.floor(t * 12) - b.i) % 3) + 3) % 3 === 0;\n    return (on ? 1 : 0.2) * (b.y > ys ? 1 : 0.5) * (0.8 + 0.2 * Math.sin(t * 7.5));\n  }\n  if (P.st === HOLD) {\n    // The tower beats like a heart while the ring hangs. In the last 1.8 s its lights go\n    // out from the foot up, and those by the ring blink faster and faster.\n    const f = 1 - (P.hold - P.e) / 1.8;\n    if (f > 0 && b.q \u003c f * 1.05) return 0.03;\n    if (Math.abs(b.y - ys) \u003c 9) return Math.sin(P.e * (8 + 34 * clamp(f, 0, 1))) > 0 ? 1 : 0.12;\n    return f > 0 ? 0.75 : 0.3 + 0.7 * Math.max(0, Math.sin(P.e * 7)) ** 3;\n  }\n  if (P.st === FALL) return b.y \u003c ys ? 1 : 0.04;\n  if (P.st === BRAKE) return Math.floor(P.e * 18) & 1 ? 1 : 0.3;\n  if (P.st === SETTLE) return 1;\n  // Waiting and letting down: a two-phase marquee, twice a second.\n  const idle = (b.i + Math.floor(t * 2)) & 1 ? 0.85 : 0.22;\n  return P.st === LOWER ? Math.max(idle, 1 - P.e / 3) : idle;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  const t = P.t;\n  const hA = 0.12 + P.hue;\n  const cA = hsv(hA, 0.72, 1);\n  const cB = hsv(hA + 0.47, 0.7, 1);\n  const add = (x, y, c, w) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H || w \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    B[o] += c[0] * w;\n    B[o + 1] += c[1] * w;\n    B[o + 2] += c[2] * w;\n  };\n  const set = (x, y, c, f = 1) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  const bulb = (x, y, c, L) => {\n    add(x, y, c, L);\n    for (const g of GLOW) add(x + g[0], y + g[1], c, L * g[2]);\n  };\n  const ys = YST - (P.h - P.h0) * P.sc;\n  // Each tower bulb's level, and the glow they throw on the sky round the tower.\n  let lit = 0;\n  for (const b of P.bulbs) lit += b.L = bulbLevel(P, b, ys);\n  lit /= P.bulbs.length;\n  const lv = P.lv;\n  lv.fill(0);\n  for (const b of P.bulbs) if (b.L > 0.1) for (let y = Math.max(0, b.y - 14); y \u003c Math.min(H, b.y + 15); y++) lv[y] += b.L * (1 - Math.abs(y - b.y) / 15);\n  const gx = P.gx;\n  for (let x = 0; x \u003c W; x++) gx[x] = Math.exp(-(((x - TX) / 10) ** 2));\n  const halo = hsv(hA, 0.75, 0.3);\n  // The fair's glow on the low sky, in the lights' second colour, brighter while the tower is lit.\n  const glow = hsv(hA + 0.6, 0.65, 0.3 + 0.12 * lit);\n  sky(B, P.sky, lv, gx, halo, glow);\n  for (const q of P.stars) add(q[0], q[1], STAR, q[2] * (0.7 + 0.3 * Math.sin(t * 1.7 + q[3])));\n  // The Ferris wheel, 40 m across, behind the tower on the left.\n  const R = 20 * P.sc;\n  const wx = 8 - 0.55 * R;\n  const wy = YG - R - 3 * P.sc;\n  for (const s of [-1, 1]) for (let u = 0; u \u003c 1; u += 0.5 / R) add(wx + s * 0.45 * R * u, wy + (YG - wy) * u, LEG, 1);\n  for (let k = 0; k \u003c 16; k++) {\n    const a = P.wheel + (k * Math.PI) / 8;\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    for (let r = 2; r \u003c R - 1; r += 0.8) {\n      const x = wx + r * ca;\n      if (x \u003c -0.5) continue;\n      add(x, wy + r * sa, cB, 0.14 + 0.3 * Math.max(0, Math.sin((r / R) * 9 - t * 3 + k * 0.4)));\n    }\n  }\n  for (let a = -Math.PI / 2; a \u003c Math.PI / 2; a += 0.8 / R) {\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    add(wx + R * ca, wy + R * sa, RIM1, 1);\n    add(wx + (R - 2) * ca, wy + (R - 2) * sa, RIM2, 1);\n  }\n  const nb = Math.floor((2 * Math.PI * R) / 3);\n  for (let j = 0; j \u003c nb; j++) {\n    const a = P.wheel + (j * 2 * Math.PI) / nb;\n    const x = wx + R * Math.cos(a);\n    if (x \u003c -2) continue;\n    bulb(x, wy + R * Math.sin(a), j & 1 ? cB : cA, (j + Math.floor(t * 4)) % 3 === 0 ? 0.9 : 0.4);\n  }\n  const cabin = cB.map((v) => v * 0.22);\n  for (let k = 0; k \u003c 12; k++) {\n    const a = P.wheel + (k * Math.PI) / 6;\n    const x = Math.round(wx + R * Math.cos(a));\n    const y = Math.round(wy + R * Math.sin(a));\n    if (x \u003c -2) continue;\n    for (let dy = 1; dy \u003c= 3; dy++) for (let dx = -1; dx \u003c= 1; dx++) set(x + dx, y + dy, dy === 2 && dx === 0 ? WINDOW : cabin);\n  }\n  // The tower's steel over everything behind it.\n  steel(B, P.tw, P.steel);\n  // The brake fins: copper plates on both faces over the last metres, white hot while they bite.\n  const heat = P.st === BRAKE ? 1 : P.st === SETTLE ? Math.exp(-P.e * 3) : 0;\n  const fin = mix([100, 60, 40], [255, 235, 210], heat);\n  for (let y = Math.round(YST - (P.hB - P.h0) * P.sc); y \u003c= YST - (P.hS - P.h0) * P.sc + 6; y += 2) for (const x of [TX - 2, TX + 2]) set(x, y, fin);\n  const white = mix(cA, [255, 250, 240], 0.55);\n  const hot = P.st === FALL || P.st === BRAKE;\n  for (const b of P.bulbs) bulb(b.x, b.y, hot ? white : cA, b.L);\n  for (let x = TX - 6; x \u003c= TX + 6; x += 2) bulb(x, 4, cB, (x / 2 + Math.floor(t * 3)) & 1 ? 0.7 : 0.25);\n  // The beacon: a red light once every 1.5 s, a white strobe while the ring hangs at the top.\n  if (P.st === HOLD) bulb(TX, 1, STROBE, Math.sin(P.e * 20) > 0.6 ? 1.6 : 0);\n  else bulb(TX, 1, BEACON, t % 1.5 \u003c 0.25 ? 1.2 : 0.15);\n  // The ring: the catch car round the tower, the seats, the riders and their legs.\n  const yi = Math.round(ys);\n  const drop = hot || (P.st === SETTLE && P.e \u003c 0.6);\n  for (let y = yi - 6; y \u003c= yi + 1; y++) for (let x = TX - 4; x \u003c= TX + 4; x++) set(x, y, CAR);\n  for (let x = TX - 16; x \u003c= TX + 16; x++) {\n    for (let y = yi - 4; y \u003c yi; y++) set(x, y, SEAT);\n    set(x, yi, BAND);\n    if (Math.abs(x - TX) \u003c 16) set(x, yi + 1, BAND2);\n  }\n  for (let x = TX - 15; x \u003c= TX + 15; x += 2) {\n    const on = drop ? 1 : P.st === HOLD ? (Math.sin(P.e * 12) > 0 ? 1 : 0.2) : (x / 2 + Math.floor(t * 6)) % 3 === 0 ? 1 : 0.35;\n    bulb(x, yi + 1, drop ? white : ((x + 1) / 2) & 1 ? cA : cB, on * 0.9);\n  }\n  for (const r of P.riders) {\n    for (let dx = 0; dx \u003c 2; dx++) {\n      const x = r.x + dx;\n      set(x, yi - 5, r.hair);\n      set(x, yi - 4, r.skin);\n      set(x, yi - 3, HARNESS);\n      set(x, yi - 2, r.shirt);\n      set(x, yi - 1, r.shirt, 0.7);\n    }\n    if (drop) {\n      // On the drop the legs fly up and the arms go up: about half the riders' at Thrill 0,\n      // everyone's at 1.\n      set(r.x, yi + 2, JEANS);\n      set(r.x + 1, yi + 2, JEANS);\n      set(r.x - 1, yi + 3, SHOE);\n      set(r.x + 2, yi + 3, SHOE);\n      if (r.bold \u003c 0.45 + 0.55 * P.thrill)\n        for (let y = yi - 7; y \u003c= yi - 4; y++) {\n          set(r.x - 1, y, r.skin, y === yi - 7 ? 1 : 0.8);\n          set(r.x + 2, y, r.skin, y === yi - 7 ? 1 : 0.8);\n        }\n    } else {\n      const sway = Math.sin(t * 2.2 + r.kick) > 0.6 ? 1 : 0;\n      for (let y = yi + 2; y \u003c= yi + 4; y++) {\n        set(r.x, y, JEANS);\n        set(r.x + 1, y, JEANS, 0.8);\n      }\n      set(r.x + sway, yi + 5, SHOE);\n    }\n  }\n  // Strings of bulbs from the station canopy, warm white with every third one in the tower's colour.\n  let n = 0;\n  for (const q of P.string) {\n    const x = q[0];\n    const y = q[1];\n    if (!q[2]) {\n      set(x, y, WIRE);\n      continue;\n    }\n    n++;\n    bulb(x, y + 1, n % 3 === 0 ? cA : WARM, 0.55 + 0.15 * Math.sin(t * 2.3 + n * 1.7));\n  }\n  // The crowd in silhouette, its heads rimmed by the fair's light, and phones held up to film.\n  const rim = mix([20, 16, 24], cA, 0.08 + 0.1 * lit);\n  const C = P.crowd;\n  for (const p of P.body) set(p % W, Math.floor(p / W), C[p - W] ? DARK : rim);\n  for (const f of P.phones) {\n    if (f.up \u003c= 0.05) continue;\n    const y = Math.round(f.y + (1 - f.up) * 5);\n    const g = 0.75 + 0.6 * P.flash;\n    for (let a = y + 2; a \u003c y + 5; a++) if (!C[a * W + f.x]) set(f.x, a, ARM);\n    set(f.x, y, [150 * g, 185 * g, Math.min(255, 255 * g)]);\n    set(f.x, y + 1, [120 * g, 150 * g, 220 * g]);\n  }\n  // The brakes' flash lights the tower, the ring and the faces below.\n  if (P.flash > 0.01) flash(B, gx, P.gy, ys, P.flash);\n  show(display, B);\n}\n\nfunction steel(B, T, list) {\n  for (let i = 0; i \u003c list.length; i++) {\n    const o = list[i] * 3;\n    B[o] = T[o] + B[o] * 0.3;\n    B[o + 1] = T[o + 1] + B[o + 1] * 0.3;\n    B[o + 2] = T[o + 2] + B[o + 2] * 0.3;\n  }\n}\n\n// The sky, with the tower's glow round it and the fair's on the low sky.\nfunction sky(B, S, lv, gx, halo, glow) {\n  for (let y = 0, o = 0; y \u003c H; y++) {\n    const v = y \u003c YG ? Math.min(1.6, lv[y] / 6) : 0;\n    const w = y \u003c 48 || y >= YG ? 0 : ((y - 48) / 73) ** 1.4;\n    const r = glow[0] * w;\n    const g = glow[1] * w;\n    const b = glow[2] * w;\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const u = v * gx[x];\n      B[o] = S[o] + halo[0] * u + r;\n      B[o + 1] = S[o + 1] + halo[1] * u + g;\n      B[o + 2] = S[o + 2] + halo[2] * u + b;\n    }\n  }\n}\n\nfunction flash(B, gx, gy, ys, f) {\n  for (let x = 0; x \u003c W; x++) gx[x] = Math.exp(-((x - TX) ** 2) / 390);\n  for (let y = 0; y \u003c H; y++) gy[y] = f * 0.85 * Math.exp(-((y - ys) ** 2) / 390);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) {\n      const w = gx[x] * gy[y];\n      B[p] += 190 * w;\n      B[p + 1] += 215 * w;\n      B[p + 2] += 255 * w;\n    }\n}\n\nfunction show(display, B) {\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, B[p] > 255 ? 255 : B[p], B[p + 1] > 255 ? 255 : B[p + 1], B[p + 2] > 255 ? 255 : B[p + 2]);\n}\n","layer":{"id":"layer-drop-tower","type":"code","name":"drop-tower","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Drop Tower\n// Family:  fair\n// Idea:    A drop tower at a night fair hauls a ring of riders up the full height of the panel while its marquee lights chase after them, holds them at the top while the lights go out below, lets them fall at the tower's own gravity and stops them hard on the magnetic brakes over a crowd holding up their phones.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the free-fall towers of amusement parks, whose ring of seats is stopped by magnetic brakes\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Height=50..110, Thrill=0..1\n//\n// Knob 1: Lights. Turns the bulbs of the tower, the ring and the Ferris wheel round the colour wheel together with the glow they throw on the sky, starting from gold marquee bulbs over a violet glow.\n// Knob 2: Speed. How fast the night runs: at 2 the ride runs in real time, 19 s a ride with a fall of 2.1 s at 74 km/h from the top of a 50 m tower; at 0.2 it is ten times slower, at 3 half as fast again.\n// Knob 3: Height. The tower's height, 50 to 110 m. The tower always stands the full 128 rows, so a taller one makes the 40 m Ferris wheel beside it smaller, the haul longer and the fall slower on the panel, 3.3 s at 110 m.\n// Knob 4: Thrill. How long the ring hangs at the top, 1.8 s to 6 s, with the tower beating like a heart until its lights go out from the foot up in the last 1.8 s; and how hard the brakes bite, from a third of the travel at 1.8 g to a fifth at 4 g.\n// Buttons: K1 tap drops the ring at once from wherever it is on the way up, or starts the haul when it is waiting at the station.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The tower stands on column 40, from the beacon on row 1 and the cap at rows 4..10 to its\n// foot on row 121.\nconst TX = 40;\nconst YG = 121;\n// The riders' seat row at the top of the travel and at the station.\nconst YTOP = 22;\nconst YST = 110;\n// Ride states.\nconst BOARD = 0;\nconst CLIMB = 1;\nconst HOLD = 2;\nconst FALL = 3;\nconst BRAKE = 4;\nconst SETTLE = 5;\nconst LOWER = 6;\nconst G = 9.81;\n// The brakes stop the ring 4 m above the station, and it is let down from there.\nconst STOP = 4;\nconst SHIRTS = [[170, 40, 50], [40, 90, 170], [220, 210, 200], [50, 150, 70], [190, 140, 40], [130, 60, 160], [40, 40, 48]];\nconst SKIN = [[210, 160, 120], [150, 100, 70], [235, 190, 155]];\nconst HAIR = [[30, 20, 16], [90, 60, 30], [200, 170, 90], [20, 20, 24]];\n// A bulb's light on its neighbours: 1 LED away, diagonal, 2 away.\nconst GLOW = [[1, 0, 0.32], [-1, 0, 0.32], [0, 1, 0.32], [0, -1, 0.32], [1, 1, 0.14], [-1, 1, 0.14], [1, -1, 0.14], [-1, -1, 0.14], [2, 0, 0.06], [-2, 0, 0.06], [0, 2, 0.06], [0, -2, 0.06]];\n\n// Colours the Lights knob leaves alone: the wheel's legs and rim, a cabin's window, the\n// ring's catch car, seats and bands, the riders' harness, jeans and shoes, the strings'\n// wire and warm bulbs, a phone's arm, the beacon, a star and the crowd.\nconst LEG = [26, 26, 40];\nconst RIM1 = [40, 40, 58];\nconst RIM2 = [30, 30, 46];\nconst WINDOW = [210, 170, 100];\nconst CAR = [24, 24, 34];\nconst SEAT = [30, 26, 44];\nconst BAND = [96, 96, 112];\nconst BAND2 = [30, 30, 42];\nconst HARNESS = [90, 86, 30];\nconst JEANS = [40, 56, 110];\nconst SHOE = [225, 225, 235];\nconst WIRE = [12, 10, 16];\nconst WARM = [255, 196, 120];\nconst ARM = [6, 6, 10];\nconst STROBE = [255, 255, 255];\nconst BEACON = [255, 30, 20];\nconst STAR = [1, 1, 1.2];\nconst DARK = [4, 4, 8];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction mix(a, b, u) {\n  return [a[0] + (b[0] - a[0]) * u, a[1] + (b[1] - a[1]) * u, a[2] + (b[2] - a[2]) * u];\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, started: false, Ht: 0, wheel: 0.3, flash: 0, st: BOARD, e: 0, h: 0, v: 0, hc: 0, hue: 0, thrill: 0 });\n  P.buf = new Float32Array(N * 3);\n  P.sky = new Float32Array(N * 3);\n  P.tw = new Float32Array(N * 3);\n  P.tm = new Uint8Array(N);\n  P.lv = new Float32Array(H);\n  P.gx = new Float32Array(W);\n  P.gy = new Float32Array(H);\n  // Deep blue overhead, paler towards the horizon, and the stalls' warm light on the\n  // ground behind the crowd.\n  for (let y = 0; y \u003c H; y++) {\n    const c = mix([2, 4, 18], [10, 16, 52], y / (H - 1));\n    if (y > 108) for (let i = 0; i \u003c 3; i++) c[i] += [70, 46, 30][i] * ((y - 108) / 13) ** 2;\n    for (let x = 0; x \u003c W; x++) P.sky.set(c, (y * W + x) * 3);\n  }\n  // A game stall on the right: a striped awning, a lit counter with prizes on two shelves.\n  const paint = (x, y, c) => P.sky.set(c, (y * W + x) * 3);\n  for (let x = 49; x \u003c W; x++) {\n    for (let y = 103; y \u003c= 105; y++) paint(x, y, ((x - 49) >> 1) & 1 ? [220, 210, 200] : [200, 40, 50]);\n    if ((x & 1) === 0) paint(x, 106, [200, 40, 50]);\n    for (let y = 107; y \u003c= 112; y++) paint(x, y, x === 49 || x === 63 ? [60, 40, 30] : [150, 108, 60]);\n    for (let y = 113; y \u003c= 118; y++) paint(x, y, y === 113 ? [150, 60, 56] : [80, 30, 34]);\n  }\n  for (let x = 51; x \u003c 62; x += 2)\n    for (const y of [108, 110]) paint(x, y, hsv(Math.random(), 0.8, 1));\n  P.stars = [];\n  for (let i = 0; i \u003c 34; i++) P.stars.push([Math.floor(Math.random() * W), Math.floor(Math.random() * 64), 20 + Math.random() * 40, Math.random() * 7]);\n  // Marquee bulbs every 3 rows down both edges of the tower, counted from the foot.\n  P.bulbs = [];\n  for (let y = 116; y >= 14; y -= 3) for (const s of [-1, 1]) P.bulbs.push({ x: TX + 5 * s, y, q: (116 - y) / 102, i: (116 - y) / 3, L: 0 });\n  // Eight riders round the front of the ring, two LEDs wide.\n  P.riders = [];\n  for (let i = 0; i \u003c 8; i++) {\n    const pick = (a) => a[Math.floor(Math.random() * a.length)];\n    P.riders.push({ x: TX - 15 + 4 * i, shirt: pick(SHIRTS), skin: pick(SKIN), hair: pick(HAIR), bold: Math.random(), kick: Math.random() * 7 });\n  }\n  // The crowd: heads 3 LEDs wide over shoulders that widen to 7, children lower and a few on shoulders.\n  const C = (P.crowd = new Uint8Array(N));\n  P.phones = [];\n  const person = (hx, hy, rows) => {\n    for (let d = 0; d \u003c rows && hy + d \u003c H; d++) {\n      const half = d \u003c 3 ? 1 : d === 3 ? 0 : Math.min(3, d - 3);\n      for (let x = hx - half; x \u003c= hx + half; x++) if (x >= 0 && x \u003c W && hy + d >= 0) C[(hy + d) * W + x] = 1;\n    }\n  };\n  let j = 0;\n  for (let x = -1; x \u003c W + 2; x += 4 + Math.floor(Math.random() * 3)) {\n    const r = Math.random();\n    const hy = r \u003c 0.2 ? 121 : 117 + Math.floor(Math.random() * 3);\n    person(x, hy, 20);\n    if (r > 0.93) person(x, hy - 6, 6);\n    if (j++ % 2 === 0 && x > 1 && x \u003c W - 2) {\n      const side = Math.random() \u003c 0.5 ? -2 : 2;\n      P.phones.push({ x: x + side, y: hy - 3, at: 0.1 + 0.75 * Math.random(), up: 0 });\n    }\n  }\n  P.body = [];\n  for (let p = W; p \u003c N; p++) if (C[p]) P.body.push(p);\n  // Two strings of bulbs from the station canopy out past the panel's edges.\n  P.string = [];\n  const sag = (x0, y0, x1, y1, s) => {\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      P.string.push([x, Math.round(y0 + (y1 - y0) * u + s * 4 * u * (1 - u)), (x - x0) % 3 === 0]);\n    }\n  };\n  sag(0, 86, 29, 99, 5);\n  sag(51, 99, 63, 90, 3);\n}\n\n// The tower's steel for a height in metres: two rails, an X brace every 5 m, the cap,\n// the station, and the scale of everything round it.\nfunction build(P, Ht) {\n  P.Ht = Ht;\n  P.sc = (YG - 2) / Ht;\n  P.h0 = (YG - YST) / P.sc;\n  P.h1 = (YG - YTOP) / P.sc;\n  P.vc = 3 + Ht / 20;\n  P.h = clamp(P.h || P.h0, P.h0, P.h1);\n  const T = P.tw;\n  const M = P.tm;\n  T.fill(0);\n  M.fill(0);\n  const put = (x, y, c) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    T.set(c, (y * W + x) * 3);\n    M[y * W + x] = 1;\n  };\n  // Lit from the fair below: brighter at the foot.\n  const steel = (y, f) => mix([30, 34, 54], [72, 62, 66], clamp((y - 40) / 81, 0, 1)).map((v) => v * f);\n  for (let y = 11; y \u003c= YG; y++) {\n    put(TX - 4, y, steel(y, 1));\n    put(TX + 4, y, steel(y, 1));\n    put(TX, y, steel(y, 0.45));\n  }\n  const seg = 5 * P.sc;\n  for (let y0 = YG; y0 > 11; y0 -= seg) {\n    const y1 = Math.max(11, y0 - seg);\n    for (let x = -3; x \u003c= 3; x++) put(TX + x, y0, steel(y0, 0.7));\n    for (let s = 0; s \u003c= 1; s += 0.5 / seg) {\n      const y = y0 + (y1 - y0) * s;\n      put(TX - 4 + 8 * s, y, steel(y, 0.6));\n      put(TX + 4 - 8 * s, y, steel(y, 0.6));\n    }\n  }\n  // The cap: the hoist house on top, and a mast for the beacon.\n  for (let y = 4; y \u003c= 10; y++) for (let x = TX - 6; x \u003c= TX + 6; x++) put(x, y, y === 4 || Math.abs(x - TX) === 6 ? [64, 62, 84] : [16, 16, 28]);\n  for (let y = 1; y \u003c 4; y++) put(TX, y, [50, 50, 64]);\n  // The station: a lit deck under the ring and a canopy over the queue.\n  for (let x = TX - 15; x \u003c= TX + 15; x++) {\n    put(x, YG - 1, [190, 140, 80]);\n    put(x, YG, [90, 60, 40]);\n  }\n  for (let x = TX - 10; x \u003c= TX + 10; x++) put(x, 99, [80, 54, 70]);\n  P.steel = [];\n  for (let p = 0; p \u003c N; p++) if (M[p]) P.steel.push(p);\n}\n\nfunction go(P, st) {\n  P.st = st;\n  P.e = 0;\n  P.hc = P.h;\n}\n\nfunction fall(P) {\n  go(P, FALL);\n  P.v = 0;\n}\n\nfunction ride(P, d) {\n  P.e += d;\n  if (P.st === BOARD) {\n    P.h = P.h0;\n    if (P.e > 3.5) go(P, CLIMB);\n  } else if (P.st === CLIMB) {\n    // An even haul that eases in and out: the speed peaks at twice the average.\n    const u = Math.min(1, P.e / Math.max(1, (P.h1 - P.hc) / P.vc));\n    P.h = P.hc + (P.h1 - P.hc) * (u - Math.sin(2 * Math.PI * u) / (2 * Math.PI));\n    if (u >= 1) go(P, HOLD);\n  } else if (P.st === HOLD) {\n    P.h = P.h1;\n    if (P.e > P.hold) fall(P);\n  } else if (P.st === FALL) {\n    P.v -= G * d;\n    P.h += P.v * d;\n    if (P.h \u003c= P.hB) {\n      go(P, BRAKE);\n      P.a = (P.v * P.v) / (2 * Math.max(0.5, P.h - P.hS));\n      P.flash = 1;\n    }\n  } else if (P.st === BRAKE) {\n    P.v += P.a * d;\n    P.h += P.v * d;\n    if (P.v >= 0) {\n      P.v = 0;\n      go(P, SETTLE);\n    }\n  } else if (P.st === SETTLE) {\n    // The ring rocks on the brake fins and comes to rest.\n    P.h = P.hc + (0.3 + 0.9 * P.thrill) * Math.sin(P.e * 13) * Math.exp(-P.e * 5);\n    if (P.e > 1.2) go(P, LOWER);\n  } else {\n    P.h = Math.max(P.h0, P.hc - 1.5 * P.e);\n    if (P.h \u003c= P.h0) go(P, BOARD);\n  }\n}\n\nfunction tick(P, dt) {\n  while (dt > 1e-6) {\n    const d = Math.min(dt, 1 / 60);\n    dt -= d;\n    ride(P, d);\n    P.t += d;\n    P.wheel += d * 0.1;\n    P.flash *= Math.exp(-d / 0.3);\n    const high = P.st >= CLIMB && P.st \u003c= BRAKE ? (P.h - P.h0) / (P.h1 - P.h0) : P.st === SETTLE ? 1 : -1;\n    for (const f of P.phones) f.up = clamp(f.up + (high > f.at ? d * 2 : -d * 0.6), 0, 1);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 50, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  const Ht = clamp(k[2], 50, 110);\n  P.thrill = clamp(k[3], 0, 1);\n  if (Math.abs(Ht - P.Ht) > 0.25) build(P, Ht);\n  P.hold = 1.8 + 4.2 * P.thrill;\n  P.hS = P.h0 + STOP;\n  P.hB = P.hS + (0.32 - 0.14 * P.thrill) * (P.h1 - P.h0);\n  if (!P.started) {\n    // The fair has been open a while: the panel opens on the ring hanging at the top,\n    // and at the opening knobs it falls 2 s in.\n    P.started = true;\n    for (let i = 0; i \u003c 307; i++) tick(P, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.st === BOARD) go(P, CLIMB);\n    else if ((P.st === CLIMB || P.st === HOLD) && P.h > P.hB + 2) fall(P);\n  }\n  tick(P, (dt * speed) / 2);\n}\n\n// How bright each tower bulb is in this part of the ride.\nfunction bulbLevel(P, b, ys) {\n  const t = P.t;\n  if (P.st === CLIMB) {\n    // A three-bulb chase running up at 12 bulbs a second, brighter under the ring.\n    const on = (((Math.floor(t * 12) - b.i) % 3) + 3) % 3 === 0;\n    return (on ? 1 : 0.2) * (b.y > ys ? 1 : 0.5) * (0.8 + 0.2 * Math.sin(t * 7.5));\n  }\n  if (P.st === HOLD) {\n    // The tower beats like a heart while the ring hangs. In the last 1.8 s its lights go\n    // out from the foot up, and those by the ring blink faster and faster.\n    const f = 1 - (P.hold - P.e) / 1.8;\n    if (f > 0 && b.q \u003c f * 1.05) return 0.03;\n    if (Math.abs(b.y - ys) \u003c 9) return Math.sin(P.e * (8 + 34 * clamp(f, 0, 1))) > 0 ? 1 : 0.12;\n    return f > 0 ? 0.75 : 0.3 + 0.7 * Math.max(0, Math.sin(P.e * 7)) ** 3;\n  }\n  if (P.st === FALL) return b.y \u003c ys ? 1 : 0.04;\n  if (P.st === BRAKE) return Math.floor(P.e * 18) & 1 ? 1 : 0.3;\n  if (P.st === SETTLE) return 1;\n  // Waiting and letting down: a two-phase marquee, twice a second.\n  const idle = (b.i + Math.floor(t * 2)) & 1 ? 0.85 : 0.22;\n  return P.st === LOWER ? Math.max(idle, 1 - P.e / 3) : idle;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  const t = P.t;\n  const hA = 0.12 + P.hue;\n  const cA = hsv(hA, 0.72, 1);\n  const cB = hsv(hA + 0.47, 0.7, 1);\n  const add = (x, y, c, w) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H || w \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    B[o] += c[0] * w;\n    B[o + 1] += c[1] * w;\n    B[o + 2] += c[2] * w;\n  };\n  const set = (x, y, c, f = 1) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  const bulb = (x, y, c, L) => {\n    add(x, y, c, L);\n    for (const g of GLOW) add(x + g[0], y + g[1], c, L * g[2]);\n  };\n  const ys = YST - (P.h - P.h0) * P.sc;\n  // Each tower bulb's level, and the glow they throw on the sky round the tower.\n  let lit = 0;\n  for (const b of P.bulbs) lit += b.L = bulbLevel(P, b, ys);\n  lit /= P.bulbs.length;\n  const lv = P.lv;\n  lv.fill(0);\n  for (const b of P.bulbs) if (b.L > 0.1) for (let y = Math.max(0, b.y - 14); y \u003c Math.min(H, b.y + 15); y++) lv[y] += b.L * (1 - Math.abs(y - b.y) / 15);\n  const gx = P.gx;\n  for (let x = 0; x \u003c W; x++) gx[x] = Math.exp(-(((x - TX) / 10) ** 2));\n  const halo = hsv(hA, 0.75, 0.3);\n  // The fair's glow on the low sky, in the lights' second colour, brighter while the tower is lit.\n  const glow = hsv(hA + 0.6, 0.65, 0.3 + 0.12 * lit);\n  sky(B, P.sky, lv, gx, halo, glow);\n  for (const q of P.stars) add(q[0], q[1], STAR, q[2] * (0.7 + 0.3 * Math.sin(t * 1.7 + q[3])));\n  // The Ferris wheel, 40 m across, behind the tower on the left.\n  const R = 20 * P.sc;\n  const wx = 8 - 0.55 * R;\n  const wy = YG - R - 3 * P.sc;\n  for (const s of [-1, 1]) for (let u = 0; u \u003c 1; u += 0.5 / R) add(wx + s * 0.45 * R * u, wy + (YG - wy) * u, LEG, 1);\n  for (let k = 0; k \u003c 16; k++) {\n    const a = P.wheel + (k * Math.PI) / 8;\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    for (let r = 2; r \u003c R - 1; r += 0.8) {\n      const x = wx + r * ca;\n      if (x \u003c -0.5) continue;\n      add(x, wy + r * sa, cB, 0.14 + 0.3 * Math.max(0, Math.sin((r / R) * 9 - t * 3 + k * 0.4)));\n    }\n  }\n  for (let a = -Math.PI / 2; a \u003c Math.PI / 2; a += 0.8 / R) {\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    add(wx + R * ca, wy + R * sa, RIM1, 1);\n    add(wx + (R - 2) * ca, wy + (R - 2) * sa, RIM2, 1);\n  }\n  const nb = Math.floor((2 * Math.PI * R) / 3);\n  for (let j = 0; j \u003c nb; j++) {\n    const a = P.wheel + (j * 2 * Math.PI) / nb;\n    const x = wx + R * Math.cos(a);\n    if (x \u003c -2) continue;\n    bulb(x, wy + R * Math.sin(a), j & 1 ? cB : cA, (j + Math.floor(t * 4)) % 3 === 0 ? 0.9 : 0.4);\n  }\n  const cabin = cB.map((v) => v * 0.22);\n  for (let k = 0; k \u003c 12; k++) {\n    const a = P.wheel + (k * Math.PI) / 6;\n    const x = Math.round(wx + R * Math.cos(a));\n    const y = Math.round(wy + R * Math.sin(a));\n    if (x \u003c -2) continue;\n    for (let dy = 1; dy \u003c= 3; dy++) for (let dx = -1; dx \u003c= 1; dx++) set(x + dx, y + dy, dy === 2 && dx === 0 ? WINDOW : cabin);\n  }\n  // The tower's steel over everything behind it.\n  steel(B, P.tw, P.steel);\n  // The brake fins: copper plates on both faces over the last metres, white hot while they bite.\n  const heat = P.st === BRAKE ? 1 : P.st === SETTLE ? Math.exp(-P.e * 3) : 0;\n  const fin = mix([100, 60, 40], [255, 235, 210], heat);\n  for (let y = Math.round(YST - (P.hB - P.h0) * P.sc); y \u003c= YST - (P.hS - P.h0) * P.sc + 6; y += 2) for (const x of [TX - 2, TX + 2]) set(x, y, fin);\n  const white = mix(cA, [255, 250, 240], 0.55);\n  const hot = P.st === FALL || P.st === BRAKE;\n  for (const b of P.bulbs) bulb(b.x, b.y, hot ? white : cA, b.L);\n  for (let x = TX - 6; x \u003c= TX + 6; x += 2) bulb(x, 4, cB, (x / 2 + Math.floor(t * 3)) & 1 ? 0.7 : 0.25);\n  // The beacon: a red light once every 1.5 s, a white strobe while the ring hangs at the top.\n  if (P.st === HOLD) bulb(TX, 1, STROBE, Math.sin(P.e * 20) > 0.6 ? 1.6 : 0);\n  else bulb(TX, 1, BEACON, t % 1.5 \u003c 0.25 ? 1.2 : 0.15);\n  // The ring: the catch car round the tower, the seats, the riders and their legs.\n  const yi = Math.round(ys);\n  const drop = hot || (P.st === SETTLE && P.e \u003c 0.6);\n  for (let y = yi - 6; y \u003c= yi + 1; y++) for (let x = TX - 4; x \u003c= TX + 4; x++) set(x, y, CAR);\n  for (let x = TX - 16; x \u003c= TX + 16; x++) {\n    for (let y = yi - 4; y \u003c yi; y++) set(x, y, SEAT);\n    set(x, yi, BAND);\n    if (Math.abs(x - TX) \u003c 16) set(x, yi + 1, BAND2);\n  }\n  for (let x = TX - 15; x \u003c= TX + 15; x += 2) {\n    const on = drop ? 1 : P.st === HOLD ? (Math.sin(P.e * 12) > 0 ? 1 : 0.2) : (x / 2 + Math.floor(t * 6)) % 3 === 0 ? 1 : 0.35;\n    bulb(x, yi + 1, drop ? white : ((x + 1) / 2) & 1 ? cA : cB, on * 0.9);\n  }\n  for (const r of P.riders) {\n    for (let dx = 0; dx \u003c 2; dx++) {\n      const x = r.x + dx;\n      set(x, yi - 5, r.hair);\n      set(x, yi - 4, r.skin);\n      set(x, yi - 3, HARNESS);\n      set(x, yi - 2, r.shirt);\n      set(x, yi - 1, r.shirt, 0.7);\n    }\n    if (drop) {\n      // On the drop the legs fly up and the arms go up: about half the riders' at Thrill 0,\n      // everyone's at 1.\n      set(r.x, yi + 2, JEANS);\n      set(r.x + 1, yi + 2, JEANS);\n      set(r.x - 1, yi + 3, SHOE);\n      set(r.x + 2, yi + 3, SHOE);\n      if (r.bold \u003c 0.45 + 0.55 * P.thrill)\n        for (let y = yi - 7; y \u003c= yi - 4; y++) {\n          set(r.x - 1, y, r.skin, y === yi - 7 ? 1 : 0.8);\n          set(r.x + 2, y, r.skin, y === yi - 7 ? 1 : 0.8);\n        }\n    } else {\n      const sway = Math.sin(t * 2.2 + r.kick) > 0.6 ? 1 : 0;\n      for (let y = yi + 2; y \u003c= yi + 4; y++) {\n        set(r.x, y, JEANS);\n        set(r.x + 1, y, JEANS, 0.8);\n      }\n      set(r.x + sway, yi + 5, SHOE);\n    }\n  }\n  // Strings of bulbs from the station canopy, warm white with every third one in the tower's colour.\n  let n = 0;\n  for (const q of P.string) {\n    const x = q[0];\n    const y = q[1];\n    if (!q[2]) {\n      set(x, y, WIRE);\n      continue;\n    }\n    n++;\n    bulb(x, y + 1, n % 3 === 0 ? cA : WARM, 0.55 + 0.15 * Math.sin(t * 2.3 + n * 1.7));\n  }\n  // The crowd in silhouette, its heads rimmed by the fair's light, and phones held up to film.\n  const rim = mix([20, 16, 24], cA, 0.08 + 0.1 * lit);\n  const C = P.crowd;\n  for (const p of P.body) set(p % W, Math.floor(p / W), C[p - W] ? DARK : rim);\n  for (const f of P.phones) {\n    if (f.up \u003c= 0.05) continue;\n    const y = Math.round(f.y + (1 - f.up) * 5);\n    const g = 0.75 + 0.6 * P.flash;\n    for (let a = y + 2; a \u003c y + 5; a++) if (!C[a * W + f.x]) set(f.x, a, ARM);\n    set(f.x, y, [150 * g, 185 * g, Math.min(255, 255 * g)]);\n    set(f.x, y + 1, [120 * g, 150 * g, 220 * g]);\n  }\n  // The brakes' flash lights the tower, the ring and the faces below.\n  if (P.flash > 0.01) flash(B, gx, P.gy, ys, P.flash);\n  show(display, B);\n}\n\nfunction steel(B, T, list) {\n  for (let i = 0; i \u003c list.length; i++) {\n    const o = list[i] * 3;\n    B[o] = T[o] + B[o] * 0.3;\n    B[o + 1] = T[o + 1] + B[o + 1] * 0.3;\n    B[o + 2] = T[o + 2] + B[o + 2] * 0.3;\n  }\n}\n\n// The sky, with the tower's glow round it and the fair's on the low sky.\nfunction sky(B, S, lv, gx, halo, glow) {\n  for (let y = 0, o = 0; y \u003c H; y++) {\n    const v = y \u003c YG ? Math.min(1.6, lv[y] / 6) : 0;\n    const w = y \u003c 48 || y >= YG ? 0 : ((y - 48) / 73) ** 1.4;\n    const r = glow[0] * w;\n    const g = glow[1] * w;\n    const b = glow[2] * w;\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const u = v * gx[x];\n      B[o] = S[o] + halo[0] * u + r;\n      B[o + 1] = S[o + 1] + halo[1] * u + g;\n      B[o + 2] = S[o + 2] + halo[2] * u + b;\n    }\n  }\n}\n\nfunction flash(B, gx, gy, ys, f) {\n  for (let x = 0; x \u003c W; x++) gx[x] = Math.exp(-((x - TX) ** 2) / 390);\n  for (let y = 0; y \u003c H; y++) gy[y] = f * 0.85 * Math.exp(-((y - ys) ** 2) / 390);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) {\n      const w = gx[x] * gy[y];\n      B[p] += 190 * w;\n      B[p + 1] += 215 * w;\n      B[p + 2] += 255 * w;\n    }\n}\n\nfunction show(display, B) {\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, B[p] > 255 ? 255 : B[p], B[p + 1] > 255 ? 255 : B[p + 1], B[p + 2] > 255 ? 255 : B[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lights=0..1, Speed=0.2..3, Height=50..110, Thrill=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lights","min":0,"max":1,"about":"Turns the bulbs of the tower, the ring and the Ferris wheel round the colour wheel together with the glow they throw on the sky, starting from gold marquee bulbs over a violet glow."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the night runs: at 2 the ride runs in real time, 19 s a ride with a fall of 2.1 s at 74 km/h from the top of a 50 m tower; at 0.2 it is ten times slower, at 3 half as fast again."},{"name":"Height","min":50,"max":110,"about":"The tower's height, 50 to 110 m. The tower always stands the full 128 rows, so a taller one makes the 40 m Ferris wheel beside it smaller, the haul longer and the fall slower on the panel, 3.3 s at 110 m."},{"name":"Thrill","min":0,"max":1,"about":"How long the ring hangs at the top, 1.8 s to 6 s, with the tower beating like a heart until its lights go out from the foot up in the last 1.8 s; and how hard the brakes bite, from a third of the travel at 1.8 g to a fifth at 4 g."}],"start":[0,2,50,0.06],"measures":{"motion":0.437,"detail":0.0668,"edges":0.5494,"complexity":1.5352,"coverage":0.8276,"colour":0.1705,"drift":0.1633},"knobResponse":[0.0483,0.0875,0.0709,0.0567]},{"slug":"drying-mud","title":"Drying Mud","family":"cells","round":16,"note":"젖은 흙이 마르며 금이 직각으로 갈라져 T 자로 만나고, 오래된 금은 넓고 깊어지며 조각 테두리가 밝게 말려 올라가요. K1 을 누르면 소나기가 와서 금이 물에 잠겨 닫히고 흙이 다시 말라요.","idea":"Wet clay dries in the sun and splits into polygons, each new crack leaving an old one at a right angle and running until it meets another, the chips paling and curling at their rims, until a shower darkens the clay and closes the cracks.","buttons":"K1 tap brings a shower now: drops spot the clay dark, the cracks fill with water and close, and the mud starts drying again.","code":"// ===== Patternflow pattern =====\n// Title:   Drying Mud\n// Family:  cells\n// Idea:    Wet clay dries in the sun and splits into polygons, each new crack leaving an old one at a right angle and running until it meets another, the chips paling and curling at their rims, until a shower darkens the clay and closes the cracks.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Jared Tarbell's Substrate (2003), and desiccation cracks in a drying puddle\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Clay=0..1, Sun=0.3..3, Cracks=0..1, Curl=0..1\n//\n// Knob 1: Clay. What the mud is made of, starting from yellow ochre loess, then red laterite, grey river silt and at the top pale playa clay.\n// Knob 2: Sun. How hot the sun is: at 2 the first crack opens within half a second and the shower comes after 24 seconds; turned down the clay stays dark and wet for minutes, turned up it bakes paler and the cracks open wider.\n// Knob 3: Cracks. How finely the mud splits: at 0 a thick layer breaks into slabs about sixteen LEDs across with wide deep cracks, at 1 a thin film dries twice as fast and crazes into chips about six across.\n// Knob 4: Curl. How far the chips lift at their rims as they dry: low, they lie nearly flat; high, each chip is a dish, lit along the rim away from the sun and dark along the rim toward it, in the shadow of the next chip's lip.\n// Buttons: K1 tap brings a shower now: drops spot the clay dark, the cracks fill with water and close, and the mud starts drying again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// How far round a crack point its distance is written: as far as a lip,\n// its shadow and the faster drying reach.\nconst REACH = 6;\nconst NONE = 1e9;\nconst MAXC = 520;\nconst MAXP = 4096;\nconst MAXD = 96;\n// A tip moves half an LED at a time, so it enters every LED it crosses.\nconst STEP = 0.5;\n// Toward the sun, in panel terms (x right, y down): the sun stands up and to the left.\nconst SX = -0.6;\nconst SY = -0.8;\n// Dry seconds (the clock that Sun runs) before the first crack, and before the shower.\nconst ONSET = 0.4;\nconst RAIN_AT = 24;\n// A shower in real seconds: drops for 4.4 s, the cracks shut between 1.0 and 3.4,\n// and the old network is wiped at 3.6 when nothing of it shows.\nconst RAIN_LEN = 4.4;\n// The light under the shower's cloud, against full sun.\nconst DIM = 0.86;\nconst WIPE = 3.6;\n// Widest opening per generation, in LEDs: the first cracks open widest.\nconst WMAX = [3.4, 2.5, 1.8, 1.4, 1.15, 1.0];\n// Tip speed per generation in LEDs per dry second.\nconst SPEED = [48, 38, 30, 26, 24, 22];\n// Dry and wet colours of four clays.\nconst CLAYS = [\n  [230, 190, 134, 128, 82, 48],\n  [228, 132, 86, 128, 56, 34],\n  [204, 190, 166, 104, 92, 74],\n  [244, 230, 202, 140, 118, 92],\n];\n\n// exp() tables: ages in steps of 1/16 dry second up to 64 s, distances from\n// a crack's lip in steps of 1/32 LED up to REACH.\nconst AGE = new Float32Array(1025);\nconst DEEP = new Float32Array(1025);\nfor (let i = 0; i \u003c= 1024; i++) {\n  AGE[i] = 1 - Math.exp(-i / 16 / 4);\n  DEEP[i] = 1 - Math.exp(-i / 16 / 2.5);\n}\nconst LIPN = REACH * 32 + 1;\nconst DRYLIP = new Float32Array(LIPN);\nconst DISH = new Float32Array(LIPN);\nconst EDGE = new Float32Array(LIPN);\nfor (let i = 0; i \u003c LIPN; i++) {\n  const l = i / 32;\n  // Water leaves fastest at the lip, and the extra drying is gone before\n  // REACH, so a chip's damp middle has no hard edge.\n  const fade = 1 - smooth(REACH - 3, REACH - 0.5, l);\n  DRYLIP[i] = Math.exp(-l / 2.6) * fade;\n  DISH[i] = Math.exp(-l / 2.2) * fade;\n  EDGE[i] = Math.exp(-l / 0.9);\n}\n\n// How far clay with this much water left has come toward its dry colour.\nconst DRYC = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) DRYC[i] = Math.pow(1 - i / 256, 0.85);\n\nfunction ageIndex(a) {\n  const i = (a * 16) | 0;\n  return i \u003c 0 ? 0 : i > 1024 ? 1024 : i;\n}\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise whose lattice wraps every period cells.\nfunction tile(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const y0 = ((iy % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const y1 = (y0 + 1) % period;\n  const s = seed * 7919;\n  const a = hash(x0 + s, y0);\n  const b = hash(x1 + s, y0);\n  const c = hash(x0 + s, y1);\n  const d = hash(x1 + s, y1);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction wipe(P) {\n  P.occ.fill(0);\n  P.key.fill(NONE);\n  P.cid.fill(-1);\n  P.nc = 0;\n  P.np = 0;\n  P.nuclei = 0;\n  P.spawnT = 0;\n}\n\nexport function setup(params) {\n  const P = params;\n  // About 440 KB of fields per LED. On the ESP32-S3 they fit in 8 and 16\n  // bits (the nearest point as an offset, times in 1/16 s), about 160 KB.\n  P.occ = new Int16Array(N);\n  P.key = new Float32Array(N);\n  P.dist = new Float32Array(N);\n  P.nx = new Float32Array(N);\n  P.ny = new Float32Array(N);\n  P.born = new Float32Array(N);\n  P.cid = new Int16Array(N);\n  P.m = new Float32Array(N);\n  P.tone = new Float32Array(N);\n  P.rate = new Float32Array(N);\n  P.wid = new Float32Array(N);\n  P.sky = new Float32Array(128 * 128);\n  P.rgb = new Uint8ClampedArray(N * 3);\n  // Cracks: tip, heading, generation, the crack it left (which it may cross\n  // for 1.6 LEDs) and where it stops if it runs straight on.\n  P.cx = new Float32Array(MAXC);\n  P.cy = new Float32Array(MAXC);\n  P.cdx = new Float32Array(MAXC);\n  P.cdy = new Float32Array(MAXC);\n  P.cgen = new Uint8Array(MAXC);\n  P.alive = new Uint8Array(MAXC);\n  P.par = new Int16Array(MAXC);\n  P.grace = new Float32Array(MAXC);\n  P.acc = new Float32Array(MAXC);\n  P.ex = new Float32Array(MAXC);\n  P.ey = new Float32Array(MAXC);\n  // Every crack as points one LED apart, for finding the widest open clay.\n  P.px = new Float32Array(MAXP);\n  P.py = new Float32Array(MAXP);\n  P.pid = new Int16Array(MAXP);\n  // Raindrops: where and how long ago they landed.\n  P.dx = new Float32Array(MAXD);\n  P.dy = new Float32Array(MAXD);\n  P.dage = new Float32Array(MAXD).fill(9);\n  P.di = 0;\n  // The clay's own texture: blotches of silt, grit, the odd dark speck of\n  // straw and a pale sand grain, and patches that dry a little faster.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      let t = 1 + 0.12 * (tile(x / 9, y / 9, 99, 1) - 0.5) + 0.07 * (tile(x / 3.2, y / 3.2, 99, 2) - 0.5) + 0.07 * (hash(x, y + 977) - 0.5);\n      const g = hash(x + 311, y);\n      if (g \u003c 0.012) t *= 0.85;\n      else if (g > 0.988) t *= 1.12;\n      P.tone[q] = t;\n      P.rate[q] = 0.7 + 0.6 * tile(x / 11, y / 11, 99, 3);\n    }\n  // The sky the wet clay mirrors: soft clouds on a tile that wraps.\n  for (let y = 0; y \u003c 128; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      const u = (x / 128) * 8;\n      const v = (y / 128) * 8;\n      // Three octaves on lattices that wrap with the tile. Thresholding it\n      // twice gave the clouds straight edges.\n      P.sky[y * 128 + x] = 0.55 * tile(u, v, 8, 4) + 0.3 * tile(u * 2, v * 2, 16, 5) + 0.15 * tile(u * 4, v * 4, 32, 8);\n    }\n  wipe(P);\n  P.m.fill(1);\n  Object.assign(P, { clock: 0, rain: -1, wiped: false, close: 1, fill: 0, light: 1, dropAcc: 0, skyX: 0, cloudX: 0, gather: 0 });\n  Object.assign(P, { clay: 0, sun: 2, fine: 0, curl: 0.06 });\n}\n\n// A crack point at (x, y): every LED within REACH takes it as its crack,\n// with the time it opened, unless another crack's eventual lip is nearer.\n// Plain nearness let a young crack starting or ending on an old one take\n// the old one's LEDs at the junction and bridge it.\nfunction mark(P, x, y, c, point) {\n  const half = WMAX[P.cgen[c]] / 2;\n  const x0 = Math.max(0, Math.ceil(x - REACH));\n  const x1 = Math.min(W - 1, Math.floor(x + REACH));\n  const y0 = Math.max(0, Math.ceil(y - REACH));\n  const y1 = Math.min(H - 1, Math.floor(y + REACH));\n  const t = P.clock;\n  for (let j = y0; j \u003c= y1; j++) {\n    const ddy = j - y;\n    for (let i = x0; i \u003c= x1; i++) {\n      const ddx = i - x;\n      const d2 = ddx * ddx + ddy * ddy;\n      if (d2 > REACH * REACH) continue;\n      const q = j * W + i;\n      const d = Math.sqrt(d2);\n      if (d - half \u003c P.key[q]) {\n        P.key[q] = d - half;\n        P.dist[q] = d;\n        P.nx[q] = x;\n        P.ny[q] = y;\n        P.born[q] = t;\n        P.cid[q] = c;\n      }\n    }\n  }\n  if (point && P.np \u003c MAXP) {\n    P.px[P.np] = x;\n    P.py[P.np] = y;\n    P.pid[P.np] = c;\n    P.np++;\n  }\n}\n\nfunction blocked(P, c, i, j) {\n  const o = P.occ[j * W + i];\n  if (o === 0 || o - 1 === c) return false;\n  return !(o - 1 === P.par[c] && P.grace[c] > 0);\n}\n\nfunction startCrack(P, x, y, hx, hy, gen, parent) {\n  if (P.nc >= MAXC) return -1;\n  const c = P.nc++;\n  const l = Math.hypot(hx, hy) || 1;\n  P.cx[c] = x;\n  P.cy[c] = y;\n  P.cdx[c] = hx / l;\n  P.cdy[c] = hy / l;\n  P.cgen[c] = Math.min(gen, WMAX.length - 1);\n  P.alive[c] = 1;\n  P.par[c] = parent;\n  P.grace[c] = 1.6;\n  P.acc[c] = 0;\n  const i = Math.round(x);\n  const j = Math.round(y);\n  if (!P.occ[j * W + i]) P.occ[j * W + i] = c + 1;\n  mark(P, x, y, c, true);\n  return c;\n}\n\n// Walk a tip forward by len LEDs. It wobbles a little, bends to meet a crack\n// it is about to hit square on, and stops at the first LED another crack owns.\nfunction grow(P, c, len) {\n  while (len > 0 && P.alive[c]) {\n    const s = Math.min(STEP, len);\n    len -= s;\n    let hx = P.cdx[c];\n    let hy = P.cdy[c];\n    // Later, shorter cracks wander a little more than the first long ones.\n    const wob = (Math.random() - 0.5) * (0.05 + 0.02 * P.cgen[c]);\n    const cw = Math.cos(wob);\n    const sw = Math.sin(wob);\n    let tx = hx * cw - hy * sw;\n    let ty = hx * sw + hy * cw;\n    const x = P.cx[c];\n    const y = P.cy[c];\n    // Three LEDs ahead: if another crack is near there, turn toward its\n    // nearest point, which is the way that meets it at a right angle.\n    const ai = Math.round(x + tx * 3);\n    const aj = Math.round(y + ty * 3);\n    if (ai >= 0 && ai \u003c W && aj >= 0 && aj \u003c H) {\n      const q = aj * W + ai;\n      const o = P.cid[q];\n      if (o >= 0 && o !== c && o !== P.par[c] && P.dist[q] \u003c 2.6) {\n        const vx = P.nx[q] - x;\n        const vy = P.ny[q] - y;\n        const vl = Math.hypot(vx, vy) || 1;\n        tx += (vx / vl) * 0.16;\n        ty += (vy / vl) * 0.16;\n      }\n    }\n    const tl = Math.hypot(tx, ty);\n    hx = tx / tl;\n    hy = ty / tl;\n    P.cdx[c] = hx;\n    P.cdy[c] = hy;\n    const fx = x + hx * s;\n    const fy = y + hy * s;\n    const pi = Math.round(x);\n    const pj = Math.round(y);\n    const ci = Math.round(fx);\n    const cj = Math.round(fy);\n    if (ci \u003c 0 || ci >= W || cj \u003c 0 || cj >= H) {\n      P.alive[c] = 0;\n      break;\n    }\n    if (ci !== pi || cj !== pj) {\n      const diag = ci !== pi && cj !== pj;\n      let hit = blocked(P, c, ci, cj);\n      let hi = ci;\n      let hj = cj;\n      if (!hit && diag) {\n        if (blocked(P, c, ci, pj)) {\n          hit = true;\n          hj = pj;\n        } else if (blocked(P, c, pi, cj)) {\n          hit = true;\n          hi = pi;\n        }\n      }\n      if (hit) {\n        // Close the gap onto the crack it ran into: a T-junction.\n        mark(P, (x + hi) / 2, (y + hj) / 2, c, false);\n        mark(P, hi, hj, c, true);\n        P.alive[c] = 0;\n        break;\n      }\n      P.occ[cj * W + ci] = c + 1;\n      if (diag) P.occ[pj * W + ci] = c + 1;\n    }\n    P.cx[c] = fx;\n    P.cy[c] = fy;\n    P.grace[c] -= s;\n    // The distance field gets every half LED; the point list one per LED.\n    P.acc[c] += s;\n    const point = P.acc[c] >= 1;\n    if (point) P.acc[c] -= 1;\n    mark(P, fx, fy, c, point);\n  }\n}\n\nfunction segDist2(x, y, ax, ay, bx, by) {\n  const vx = bx - ax;\n  const vy = by - ay;\n  const l2 = vx * vx + vy * vy;\n  let t = l2 > 0 ? ((x - ax) * vx + (y - ay) * vy) / l2 : 0;\n  t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n  const dx = x - ax - vx * t;\n  const dy = y - ay - vy * t;\n  return dx * dx + dy * dy;\n}\n\n// The mud cracks where the stress is, in the widest clay no crack has\n// reached: of ten places tried, the one furthest from every crack, every\n// tip's path ahead and the frame. The new crack leaves the nearest crack\n// toward it, so at a right angle.\nfunction spawn(P) {\n  for (let c = 0; c \u003c P.nc; c++) {\n    if (!P.alive[c]) continue;\n    let x = P.cx[c];\n    let y = P.cy[c];\n    for (let k = 0; k \u003c 140; k++) {\n      const i = Math.round(x + P.cdx[c]);\n      const j = Math.round(y + P.cdy[c]);\n      if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || blocked(P, c, i, j)) break;\n      x += P.cdx[c];\n      y += P.cdy[c];\n    }\n    P.ex[c] = x;\n    P.ey[c] = y;\n  }\n  let best = -1;\n  let bx = 0;\n  let by = 0;\n  for (let s = 0; s \u003c 10; s++) {\n    const x = Math.random() * (W - 1);\n    const y = Math.random() * (H - 1);\n    // The frame counts as a crack two LEDs out: the mud goes on past the panel.\n    const e = Math.min(x + 2.5, W + 1.5 - x, y + 2.5, H + 1.5 - y);\n    let d2 = e * e;\n    for (let p = 0; p \u003c P.np; p++) {\n      const ddx = P.px[p] - x;\n      const ddy = P.py[p] - y;\n      const v = ddx * ddx + ddy * ddy;\n      if (v \u003c d2) d2 = v;\n    }\n    for (let c = 0; c \u003c P.nc; c++) {\n      if (!P.alive[c]) continue;\n      const v = segDist2(x, y, P.cx[c], P.cy[c], P.ex[c], P.ey[c]);\n      if (v \u003c d2) d2 = v;\n    }\n    if (d2 > best) {\n      best = d2;\n      bx = x;\n      by = y;\n    }\n  }\n  if (best \u003c P.lmin * P.lmin) return;\n  const gen0 = P.nuclei \u003c P.wantNuclei;\n  if (gen0) {\n    // A crack that starts in open clay runs both ways from where it started.\n    P.nuclei++;\n    const a = Math.random() * Math.PI;\n    const hx = Math.cos(a);\n    const hy = Math.sin(a);\n    const c1 = startCrack(P, bx, by, hx, hy, 0, -1);\n    if (c1 \u003c 0) return;\n    const c2 = startCrack(P, bx, by, -hx, -hy, 0, c1);\n    if (c2 >= 0) P.par[c1] = c2;\n    return;\n  }\n  // The nearest crack point, or the frame if that is nearer.\n  let src = -1;\n  let sd = NONE;\n  for (let p = 0; p \u003c P.np; p++) {\n    const ddx = P.px[p] - bx;\n    const ddy = P.py[p] - by;\n    const v = ddx * ddx + ddy * ddy;\n    if (v \u003c sd) {\n      sd = v;\n      src = p;\n    }\n  }\n  const el = bx + 2.5;\n  const er = W + 1.5 - bx;\n  const et = by + 2.5;\n  const e = Math.min(el, er, et, H + 1.5 - by);\n  const jit = (Math.random() - 0.5) * 0.24;\n  let sx, sy, hx, hy;\n  let gen = 1;\n  let parent = -1;\n  if (src \u003c 0 || e * e \u003c sd) {\n    // A crack that started beyond the frame comes in square to it.\n    if (e === el) [sx, sy, hx, hy] = [0, by, 1, jit];\n    else if (e === er) [sx, sy, hx, hy] = [W - 1, by, -1, jit];\n    else if (e === et) [sx, sy, hx, hy] = [bx, 0, jit, 1];\n    else [sx, sy, hx, hy] = [bx, H - 1, jit, -1];\n    if (P.occ[Math.round(sy) * W + Math.round(sx)]) return;\n  } else {\n    sx = P.px[src];\n    sy = P.py[src];\n    parent = P.pid[src];\n    gen = P.cgen[parent] + 1;\n    const vx = bx - sx;\n    const vy = by - sy;\n    const cj = Math.cos(jit);\n    const sj = Math.sin(jit);\n    hx = vx * cj - vy * sj;\n    hy = vx * sj + vy * cj;\n  }\n  startCrack(P, sx, sy, hx, hy, gen, parent);\n}\n\nfunction startRain(P) {\n  if (P.rain >= 0) return;\n  P.rain = 0;\n  P.wiped = false;\n}\n\n// One pass over the clay. A crack opens as a hairline and widens toward its\n// generation's width, so a tip is always thinner than the crack behind it.\n// Clay along a crack dries fast, having a second face to the air; a thin\n// film dries faster than a thick layer, and a curled rim dries from below too.\nfunction soak(P, ddt) {\n  const close = P.close;\n  const wsc = (1 - 0.5 * P.fine) * (0.8 + 0.1 * P.sun) * close;\n  const young = 0.45 * close;\n  const clock = P.clock;\n  const dries = P.rain \u003c 0;\n  const thin = ddt * (0.7 + 0.8 * P.fine);\n  const edge = 0.2 + (1.1 + 0.6 * P.curl) * P.curl;\n  const m = P.m;\n  for (let q = 0; q \u003c N; q++) {\n    let rate = 0.15;\n    if (P.key[q] \u003c NONE) {\n      const wmax = WMAX[P.cgen[P.cid[q]]] * wsc;\n      const w = young + (wmax - young) * AGE[ageIndex(clock - P.born[q])];\n      P.wid[q] = w;\n      const lip = P.dist[q] - w / 2;\n      rate += edge * (lip \u003c= 0 ? 1 : DRYLIP[Math.min(LIPN - 1, (lip * 32) | 0)]);\n    }\n    if (dries) {\n      const v = m[q] - thin * rate * P.rate[q];\n      m[q] = v > 0 ? v : 0;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.clay = Math.max(0, Math.min(1, k[0]));\n  P.sun = Math.max(0.3, Math.min(3, k[1]));\n  P.fine = Math.max(0, Math.min(1, k[2]));\n  P.curl = Math.max(0, Math.min(1, k[3]));\n  // The widest clay left uncracked. It shrinks a little in the dry spell, so\n  // the biggest chips still split now and then.\n  P.lmin = (8 - 5 * P.fine) * (1 - 0.22 * smooth(9, 22, P.clock));\n  P.wantNuclei = 3 + Math.round(2 * P.fine);\n  if (input.btnPressed && input.btnPressed[0]) startRain(P);\n  // The clock everything dries by: Sun 2 runs it at real time.\n  const ddt = (dt * P.sun) / 2;\n  // Clouds mirrored in wet clay drift at three LEDs a second.\n  P.skyX += dt * 3;\n  // Cloud shadows cross the flat on the wind at eight LEDs a second. They\n  // gather over the last eight dry seconds before a shower and clear after it.\n  P.cloudX += dt * 8;\n  const gather = P.rain >= 0 ? 1 : smooth(RAIN_AT - 8, RAIN_AT, P.clock);\n  P.gather += (gather - P.gather) * Math.min(1, dt * (P.rain >= 0 ? 4 : 0.5));\n\n  const m = P.m;\n  if (P.rain >= 0) {\n    P.rain += dt;\n    const r = P.rain;\n    const env = smooth(0, 0.8, r) * (1 - smooth(3.0, RAIN_LEN, r));\n    P.light = Math.max(DIM, P.light - dt * 0.2);\n    P.fill = smooth(0.2, 1.4, r);\n    P.close = 1 - smooth(1.0, 3.4, r);\n    P.dropAcc += dt * 150 * env;\n    while (P.dropAcc >= 1) {\n      P.dropAcc -= 1;\n      const x = Math.random() * W;\n      const y = Math.random() * H;\n      P.dx[P.di] = x;\n      P.dy[P.di] = y;\n      P.dage[P.di] = 0;\n      P.di = (P.di + 1) % MAXD;\n      // Each drop darkens a spot three LEDs across, the way the first drops\n      // of a shower spot dry dirt.\n      for (let j = Math.floor(y - 1.5); j \u003c= y + 1.5; j++)\n        for (let i = Math.floor(x - 1.5); i \u003c= x + 1.5; i++)\n          if (i >= 0 && i \u003c W && j >= 0 && j \u003c H && (i - x) * (i - x) + (j - y) * (j - y) \u003c 2.3) m[j * W + i] = 1;\n    }\n    for (let q = 0; q \u003c N; q++) m[q] = Math.min(1, m[q] + dt * 0.3 * env);\n    if (r >= WIPE && !P.wiped) {\n      P.wiped = true;\n      wipe(P);\n    }\n    if (r >= RAIN_LEN) {\n      P.rain = -1;\n      // The water soaks away before the clay starts to crack again.\n      P.clock = -2.5;\n      P.close = 1;\n      P.fill = 0;\n    }\n  } else {\n    P.light = Math.min(1, P.light + dt * 0.3);\n    P.clock += ddt;\n    // A thin film cracks sooner than a thick layer.\n    if (P.clock > ONSET - 0.4 * P.fine) {\n      for (let c = 0; c \u003c P.nc; c++) if (P.alive[c]) grow(P, c, SPEED[P.cgen[c]] * ddt);\n      let active = 0;\n      for (let c = 0; c \u003c P.nc; c++) active += P.alive[c];\n      P.spawnT += ddt;\n      const most = 5 + Math.round(5 * P.fine);\n      while (P.spawnT > 0.1) {\n        P.spawnT -= 0.1;\n        if (active \u003c most || P.nuclei \u003c P.wantNuclei) {\n          const before = P.nc;\n          spawn(P);\n          active += P.nc - before;\n        }\n      }\n    }\n    if (P.clock > RAIN_AT) startRain(P);\n  }\n  soak(P, ddt);\n  for (let i = 0; i \u003c MAXD; i++) P.dage[i] += dt;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const f = P.clay * (CLAYS.length - 1);\n  const ci = Math.min(CLAYS.length - 2, Math.floor(f));\n  const u = f - ci;\n  const A = CLAYS[ci];\n  const B = CLAYS[ci + 1];\n  const [dr, dg, db, wr, wg, wb] = A.map((v, i) => v + (B[i] - v) * u);\n  // A hot sun bleaches the dry clay a little; an overcast one leaves it dull.\n  const light = P.light * (0.86 + 0.07 * P.sun);\n  // Curl needs sun: under the shower's cloud the chips lie in flat light.\n  const curl = (0.42 + 0.58 * P.curl) * ((P.light - DIM) / (1 - DIM)) * (0.7 + 0.15 * P.sun);\n  const fill = P.fill;\n  const clock = P.clock;\n  const sky = P.sky;\n  const sxo = Math.floor(P.skyX);\n  const cxo = P.cloudX * 0.24;\n  const cth = 0.56 - 0.38 * P.gather;\n  // A cloud's shadow takes as much light as the shower's overcast, and\n  // melts into it when the shower comes.\n  const deep = (1 - DIM) * ((P.light - DIM) / (1 - DIM));\n  const rgb = P.rgb;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const wet = P.m[q];\n      const dry = DRYC[(wet * 256) | 0];\n      // The cloud shadow: the sky tile at four times the size, sampled\n      // smoothly so its edge slides rather than steps.\n      const cu = (x * 0.22 - y * 0.09 + 64 + cxo) % 128;\n      const cv = x * 0.09 + y * 0.22 + 37;\n      const c0 = Math.floor(cu);\n      const v0 = Math.floor(cv);\n      const fu = cu - c0;\n      const fv = cv - v0;\n      const r0 = (v0 & 127) * 128;\n      const r1 = ((v0 + 1) & 127) * 128;\n      const a0 = sky[r0 + c0] + (sky[r0 + ((c0 + 1) & 127)] - sky[r0 + c0]) * fu;\n      const a1 = sky[r1 + c0] + (sky[r1 + ((c0 + 1) & 127)] - sky[r1 + c0]) * fu;\n      let shadow = (a0 + (a1 - a0) * fv - cth) * 6;\n      shadow = shadow \u003c 0 ? 0 : shadow > 1 ? 1 : shadow * shadow * (3 - 2 * shadow);\n      const t = P.tone[q] * light * (1 - deep * shadow);\n      const sun = 1 - 0.75 * shadow;\n      let r = (wr + (dr - wr) * dry) * t;\n      let g = (wg + (dg - wg) * dry) * t;\n      let b = (wb + (db - wb) * dry) * t;\n      // Wet clay mirrors the sky faintly.\n      let sk = (sky[(y & 127) * 128 + ((x + sxo) & 127)] - 0.38) * 2.9;\n      sk = sk \u003c 0 ? 0 : sk > 1 ? 1 : sk;\n      let sh = wet > 0.7 ? (wet - 0.7) / 0.3 : 0;\n      sh = sh * sh * (0.03 + 0.12 * sk);\n      if (sh > 0) {\n        r += (214 - r) * sh;\n        g += (212 - g) * sh;\n        b += (206 - b) * sh;\n      }\n      if (P.key[q] \u003c NONE) {\n        const d = P.dist[q];\n        const w = P.wid[q];\n        const half = w / 2;\n        let gx = 0;\n        let gy = 0;\n        if (d > 0.05) {\n          gx = (x - P.nx[q]) / d;\n          gy = (y - P.ny[q]) / d;\n        }\n        // Positive where this LED's chip lies toward the sun from its crack.\n        const facing = gx * SX + gy * SY;\n        const lip = d - half;\n        if (lip > 0) {\n          // A drying chip curls into a dish: the rim away from the sun tilts\n          // toward it, and the rim on the sun side turns away and lies in\n          // the shadow of the lip across the crack.\n          const li = Math.min(LIPN - 1, (lip * 32) | 0);\n          const cs = curl * sun * smooth(0, 0.6, 1 - wet);\n          let lift = 1 + cs * DISH[li] * (0.06 + 0.4 * facing) + cs * 0.14 * EDGE[li];\n          if (facing \u003c 0) {\n            const reach = cs * 2.4 * -facing;\n            if (lip \u003c reach) lift *= 1 - 0.45 * smooth(0, 0.8, reach - lip);\n          }\n          r *= lift;\n          g *= lift;\n          b *= lift;\n        }\n        const a = half + 0.5 - d;\n        if (a > 0) {\n          const cover = a > 1 ? 1 : a;\n          const depth = DEEP[ageIndex(clock - P.born[q])];\n          // The wall that faces the sun is lit; the other lies in the shadow of its lip.\n          const wall = facing \u003c -0.3 && w > 1.5 && d > 0.6;\n          const shade = wall ? 0.58 - 0.2 * depth : 0.5 - 0.44 * depth;\n          let cr = r * shade;\n          let cg = g * shade;\n          let cb = b * shade;\n          if (fill > 0) {\n            // Rain water in the crack: dark, with the clouds in it.\n            const v = 0.75 + 0.5 * sk;\n            cr += (62 * v - cr) * fill;\n            cg += (66 * v - cg) * fill;\n            cb += (70 * v - cb) * fill;\n          }\n          r += (cr - r) * cover;\n          g += (cg - g) * cover;\n          b += (cb - b) * cover;\n        }\n      }\n      rgb[q * 3] = r;\n      rgb[q * 3 + 1] = g;\n      rgb[q * 3 + 2] = b;\n    }\n  }\n  // Raindrops: a bright point where one lands, then a ring that spreads and fades.\n  for (let i = 0; i \u003c MAXD; i++) {\n    const age = P.dage[i];\n    if (age > 0.3) continue;\n    const x = P.dx[i];\n    const y = P.dy[i];\n    const rad = 0.3 + age * 7;\n    const amp = (1 - age / 0.3) * (age \u003c 0.05 ? 0.9 : 0.45);\n    const e = Math.ceil(rad + 1);\n    for (let j = Math.round(y) - e; j \u003c= y + e; j++)\n      for (let ii = Math.round(x) - e; ii \u003c= x + e; ii++) {\n        if (ii \u003c 0 || ii >= W || j \u003c 0 || j >= H) continue;\n        const ring = (1 - Math.abs(Math.hypot(ii - x, j - y) - rad) / 0.8) * amp;\n        if (ring \u003c= 0) continue;\n        const q = (j * W + ii) * 3;\n        rgb[q] += (214 - rgb[q]) * ring;\n        rgb[q + 1] += (220 - rgb[q + 1]) * ring;\n        rgb[q + 2] += (226 - rgb[q + 2]) * ring;\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[q], rgb[q + 1], rgb[q + 2]);\n    }\n}\n","layer":{"id":"layer-drying-mud","type":"code","name":"drying-mud","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Drying Mud\n// Family:  cells\n// Idea:    Wet clay dries in the sun and splits into polygons, each new crack leaving an old one at a right angle and running until it meets another, the chips paling and curling at their rims, until a shower darkens the clay and closes the cracks.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Jared Tarbell's Substrate (2003), and desiccation cracks in a drying puddle\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Clay=0..1, Sun=0.3..3, Cracks=0..1, Curl=0..1\n//\n// Knob 1: Clay. What the mud is made of, starting from yellow ochre loess, then red laterite, grey river silt and at the top pale playa clay.\n// Knob 2: Sun. How hot the sun is: at 2 the first crack opens within half a second and the shower comes after 24 seconds; turned down the clay stays dark and wet for minutes, turned up it bakes paler and the cracks open wider.\n// Knob 3: Cracks. How finely the mud splits: at 0 a thick layer breaks into slabs about sixteen LEDs across with wide deep cracks, at 1 a thin film dries twice as fast and crazes into chips about six across.\n// Knob 4: Curl. How far the chips lift at their rims as they dry: low, they lie nearly flat; high, each chip is a dish, lit along the rim away from the sun and dark along the rim toward it, in the shadow of the next chip's lip.\n// Buttons: K1 tap brings a shower now: drops spot the clay dark, the cracks fill with water and close, and the mud starts drying again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// How far round a crack point its distance is written: as far as a lip,\n// its shadow and the faster drying reach.\nconst REACH = 6;\nconst NONE = 1e9;\nconst MAXC = 520;\nconst MAXP = 4096;\nconst MAXD = 96;\n// A tip moves half an LED at a time, so it enters every LED it crosses.\nconst STEP = 0.5;\n// Toward the sun, in panel terms (x right, y down): the sun stands up and to the left.\nconst SX = -0.6;\nconst SY = -0.8;\n// Dry seconds (the clock that Sun runs) before the first crack, and before the shower.\nconst ONSET = 0.4;\nconst RAIN_AT = 24;\n// A shower in real seconds: drops for 4.4 s, the cracks shut between 1.0 and 3.4,\n// and the old network is wiped at 3.6 when nothing of it shows.\nconst RAIN_LEN = 4.4;\n// The light under the shower's cloud, against full sun.\nconst DIM = 0.86;\nconst WIPE = 3.6;\n// Widest opening per generation, in LEDs: the first cracks open widest.\nconst WMAX = [3.4, 2.5, 1.8, 1.4, 1.15, 1.0];\n// Tip speed per generation in LEDs per dry second.\nconst SPEED = [48, 38, 30, 26, 24, 22];\n// Dry and wet colours of four clays.\nconst CLAYS = [\n  [230, 190, 134, 128, 82, 48],\n  [228, 132, 86, 128, 56, 34],\n  [204, 190, 166, 104, 92, 74],\n  [244, 230, 202, 140, 118, 92],\n];\n\n// exp() tables: ages in steps of 1/16 dry second up to 64 s, distances from\n// a crack's lip in steps of 1/32 LED up to REACH.\nconst AGE = new Float32Array(1025);\nconst DEEP = new Float32Array(1025);\nfor (let i = 0; i \u003c= 1024; i++) {\n  AGE[i] = 1 - Math.exp(-i / 16 / 4);\n  DEEP[i] = 1 - Math.exp(-i / 16 / 2.5);\n}\nconst LIPN = REACH * 32 + 1;\nconst DRYLIP = new Float32Array(LIPN);\nconst DISH = new Float32Array(LIPN);\nconst EDGE = new Float32Array(LIPN);\nfor (let i = 0; i \u003c LIPN; i++) {\n  const l = i / 32;\n  // Water leaves fastest at the lip, and the extra drying is gone before\n  // REACH, so a chip's damp middle has no hard edge.\n  const fade = 1 - smooth(REACH - 3, REACH - 0.5, l);\n  DRYLIP[i] = Math.exp(-l / 2.6) * fade;\n  DISH[i] = Math.exp(-l / 2.2) * fade;\n  EDGE[i] = Math.exp(-l / 0.9);\n}\n\n// How far clay with this much water left has come toward its dry colour.\nconst DRYC = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) DRYC[i] = Math.pow(1 - i / 256, 0.85);\n\nfunction ageIndex(a) {\n  const i = (a * 16) | 0;\n  return i \u003c 0 ? 0 : i > 1024 ? 1024 : i;\n}\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise whose lattice wraps every period cells.\nfunction tile(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const y0 = ((iy % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const y1 = (y0 + 1) % period;\n  const s = seed * 7919;\n  const a = hash(x0 + s, y0);\n  const b = hash(x1 + s, y0);\n  const c = hash(x0 + s, y1);\n  const d = hash(x1 + s, y1);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction wipe(P) {\n  P.occ.fill(0);\n  P.key.fill(NONE);\n  P.cid.fill(-1);\n  P.nc = 0;\n  P.np = 0;\n  P.nuclei = 0;\n  P.spawnT = 0;\n}\n\nexport function setup(params) {\n  const P = params;\n  // About 440 KB of fields per LED. On the ESP32-S3 they fit in 8 and 16\n  // bits (the nearest point as an offset, times in 1/16 s), about 160 KB.\n  P.occ = new Int16Array(N);\n  P.key = new Float32Array(N);\n  P.dist = new Float32Array(N);\n  P.nx = new Float32Array(N);\n  P.ny = new Float32Array(N);\n  P.born = new Float32Array(N);\n  P.cid = new Int16Array(N);\n  P.m = new Float32Array(N);\n  P.tone = new Float32Array(N);\n  P.rate = new Float32Array(N);\n  P.wid = new Float32Array(N);\n  P.sky = new Float32Array(128 * 128);\n  P.rgb = new Uint8ClampedArray(N * 3);\n  // Cracks: tip, heading, generation, the crack it left (which it may cross\n  // for 1.6 LEDs) and where it stops if it runs straight on.\n  P.cx = new Float32Array(MAXC);\n  P.cy = new Float32Array(MAXC);\n  P.cdx = new Float32Array(MAXC);\n  P.cdy = new Float32Array(MAXC);\n  P.cgen = new Uint8Array(MAXC);\n  P.alive = new Uint8Array(MAXC);\n  P.par = new Int16Array(MAXC);\n  P.grace = new Float32Array(MAXC);\n  P.acc = new Float32Array(MAXC);\n  P.ex = new Float32Array(MAXC);\n  P.ey = new Float32Array(MAXC);\n  // Every crack as points one LED apart, for finding the widest open clay.\n  P.px = new Float32Array(MAXP);\n  P.py = new Float32Array(MAXP);\n  P.pid = new Int16Array(MAXP);\n  // Raindrops: where and how long ago they landed.\n  P.dx = new Float32Array(MAXD);\n  P.dy = new Float32Array(MAXD);\n  P.dage = new Float32Array(MAXD).fill(9);\n  P.di = 0;\n  // The clay's own texture: blotches of silt, grit, the odd dark speck of\n  // straw and a pale sand grain, and patches that dry a little faster.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      let t = 1 + 0.12 * (tile(x / 9, y / 9, 99, 1) - 0.5) + 0.07 * (tile(x / 3.2, y / 3.2, 99, 2) - 0.5) + 0.07 * (hash(x, y + 977) - 0.5);\n      const g = hash(x + 311, y);\n      if (g \u003c 0.012) t *= 0.85;\n      else if (g > 0.988) t *= 1.12;\n      P.tone[q] = t;\n      P.rate[q] = 0.7 + 0.6 * tile(x / 11, y / 11, 99, 3);\n    }\n  // The sky the wet clay mirrors: soft clouds on a tile that wraps.\n  for (let y = 0; y \u003c 128; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      const u = (x / 128) * 8;\n      const v = (y / 128) * 8;\n      // Three octaves on lattices that wrap with the tile. Thresholding it\n      // twice gave the clouds straight edges.\n      P.sky[y * 128 + x] = 0.55 * tile(u, v, 8, 4) + 0.3 * tile(u * 2, v * 2, 16, 5) + 0.15 * tile(u * 4, v * 4, 32, 8);\n    }\n  wipe(P);\n  P.m.fill(1);\n  Object.assign(P, { clock: 0, rain: -1, wiped: false, close: 1, fill: 0, light: 1, dropAcc: 0, skyX: 0, cloudX: 0, gather: 0 });\n  Object.assign(P, { clay: 0, sun: 2, fine: 0, curl: 0.06 });\n}\n\n// A crack point at (x, y): every LED within REACH takes it as its crack,\n// with the time it opened, unless another crack's eventual lip is nearer.\n// Plain nearness let a young crack starting or ending on an old one take\n// the old one's LEDs at the junction and bridge it.\nfunction mark(P, x, y, c, point) {\n  const half = WMAX[P.cgen[c]] / 2;\n  const x0 = Math.max(0, Math.ceil(x - REACH));\n  const x1 = Math.min(W - 1, Math.floor(x + REACH));\n  const y0 = Math.max(0, Math.ceil(y - REACH));\n  const y1 = Math.min(H - 1, Math.floor(y + REACH));\n  const t = P.clock;\n  for (let j = y0; j \u003c= y1; j++) {\n    const ddy = j - y;\n    for (let i = x0; i \u003c= x1; i++) {\n      const ddx = i - x;\n      const d2 = ddx * ddx + ddy * ddy;\n      if (d2 > REACH * REACH) continue;\n      const q = j * W + i;\n      const d = Math.sqrt(d2);\n      if (d - half \u003c P.key[q]) {\n        P.key[q] = d - half;\n        P.dist[q] = d;\n        P.nx[q] = x;\n        P.ny[q] = y;\n        P.born[q] = t;\n        P.cid[q] = c;\n      }\n    }\n  }\n  if (point && P.np \u003c MAXP) {\n    P.px[P.np] = x;\n    P.py[P.np] = y;\n    P.pid[P.np] = c;\n    P.np++;\n  }\n}\n\nfunction blocked(P, c, i, j) {\n  const o = P.occ[j * W + i];\n  if (o === 0 || o - 1 === c) return false;\n  return !(o - 1 === P.par[c] && P.grace[c] > 0);\n}\n\nfunction startCrack(P, x, y, hx, hy, gen, parent) {\n  if (P.nc >= MAXC) return -1;\n  const c = P.nc++;\n  const l = Math.hypot(hx, hy) || 1;\n  P.cx[c] = x;\n  P.cy[c] = y;\n  P.cdx[c] = hx / l;\n  P.cdy[c] = hy / l;\n  P.cgen[c] = Math.min(gen, WMAX.length - 1);\n  P.alive[c] = 1;\n  P.par[c] = parent;\n  P.grace[c] = 1.6;\n  P.acc[c] = 0;\n  const i = Math.round(x);\n  const j = Math.round(y);\n  if (!P.occ[j * W + i]) P.occ[j * W + i] = c + 1;\n  mark(P, x, y, c, true);\n  return c;\n}\n\n// Walk a tip forward by len LEDs. It wobbles a little, bends to meet a crack\n// it is about to hit square on, and stops at the first LED another crack owns.\nfunction grow(P, c, len) {\n  while (len > 0 && P.alive[c]) {\n    const s = Math.min(STEP, len);\n    len -= s;\n    let hx = P.cdx[c];\n    let hy = P.cdy[c];\n    // Later, shorter cracks wander a little more than the first long ones.\n    const wob = (Math.random() - 0.5) * (0.05 + 0.02 * P.cgen[c]);\n    const cw = Math.cos(wob);\n    const sw = Math.sin(wob);\n    let tx = hx * cw - hy * sw;\n    let ty = hx * sw + hy * cw;\n    const x = P.cx[c];\n    const y = P.cy[c];\n    // Three LEDs ahead: if another crack is near there, turn toward its\n    // nearest point, which is the way that meets it at a right angle.\n    const ai = Math.round(x + tx * 3);\n    const aj = Math.round(y + ty * 3);\n    if (ai >= 0 && ai \u003c W && aj >= 0 && aj \u003c H) {\n      const q = aj * W + ai;\n      const o = P.cid[q];\n      if (o >= 0 && o !== c && o !== P.par[c] && P.dist[q] \u003c 2.6) {\n        const vx = P.nx[q] - x;\n        const vy = P.ny[q] - y;\n        const vl = Math.hypot(vx, vy) || 1;\n        tx += (vx / vl) * 0.16;\n        ty += (vy / vl) * 0.16;\n      }\n    }\n    const tl = Math.hypot(tx, ty);\n    hx = tx / tl;\n    hy = ty / tl;\n    P.cdx[c] = hx;\n    P.cdy[c] = hy;\n    const fx = x + hx * s;\n    const fy = y + hy * s;\n    const pi = Math.round(x);\n    const pj = Math.round(y);\n    const ci = Math.round(fx);\n    const cj = Math.round(fy);\n    if (ci \u003c 0 || ci >= W || cj \u003c 0 || cj >= H) {\n      P.alive[c] = 0;\n      break;\n    }\n    if (ci !== pi || cj !== pj) {\n      const diag = ci !== pi && cj !== pj;\n      let hit = blocked(P, c, ci, cj);\n      let hi = ci;\n      let hj = cj;\n      if (!hit && diag) {\n        if (blocked(P, c, ci, pj)) {\n          hit = true;\n          hj = pj;\n        } else if (blocked(P, c, pi, cj)) {\n          hit = true;\n          hi = pi;\n        }\n      }\n      if (hit) {\n        // Close the gap onto the crack it ran into: a T-junction.\n        mark(P, (x + hi) / 2, (y + hj) / 2, c, false);\n        mark(P, hi, hj, c, true);\n        P.alive[c] = 0;\n        break;\n      }\n      P.occ[cj * W + ci] = c + 1;\n      if (diag) P.occ[pj * W + ci] = c + 1;\n    }\n    P.cx[c] = fx;\n    P.cy[c] = fy;\n    P.grace[c] -= s;\n    // The distance field gets every half LED; the point list one per LED.\n    P.acc[c] += s;\n    const point = P.acc[c] >= 1;\n    if (point) P.acc[c] -= 1;\n    mark(P, fx, fy, c, point);\n  }\n}\n\nfunction segDist2(x, y, ax, ay, bx, by) {\n  const vx = bx - ax;\n  const vy = by - ay;\n  const l2 = vx * vx + vy * vy;\n  let t = l2 > 0 ? ((x - ax) * vx + (y - ay) * vy) / l2 : 0;\n  t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n  const dx = x - ax - vx * t;\n  const dy = y - ay - vy * t;\n  return dx * dx + dy * dy;\n}\n\n// The mud cracks where the stress is, in the widest clay no crack has\n// reached: of ten places tried, the one furthest from every crack, every\n// tip's path ahead and the frame. The new crack leaves the nearest crack\n// toward it, so at a right angle.\nfunction spawn(P) {\n  for (let c = 0; c \u003c P.nc; c++) {\n    if (!P.alive[c]) continue;\n    let x = P.cx[c];\n    let y = P.cy[c];\n    for (let k = 0; k \u003c 140; k++) {\n      const i = Math.round(x + P.cdx[c]);\n      const j = Math.round(y + P.cdy[c]);\n      if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || blocked(P, c, i, j)) break;\n      x += P.cdx[c];\n      y += P.cdy[c];\n    }\n    P.ex[c] = x;\n    P.ey[c] = y;\n  }\n  let best = -1;\n  let bx = 0;\n  let by = 0;\n  for (let s = 0; s \u003c 10; s++) {\n    const x = Math.random() * (W - 1);\n    const y = Math.random() * (H - 1);\n    // The frame counts as a crack two LEDs out: the mud goes on past the panel.\n    const e = Math.min(x + 2.5, W + 1.5 - x, y + 2.5, H + 1.5 - y);\n    let d2 = e * e;\n    for (let p = 0; p \u003c P.np; p++) {\n      const ddx = P.px[p] - x;\n      const ddy = P.py[p] - y;\n      const v = ddx * ddx + ddy * ddy;\n      if (v \u003c d2) d2 = v;\n    }\n    for (let c = 0; c \u003c P.nc; c++) {\n      if (!P.alive[c]) continue;\n      const v = segDist2(x, y, P.cx[c], P.cy[c], P.ex[c], P.ey[c]);\n      if (v \u003c d2) d2 = v;\n    }\n    if (d2 > best) {\n      best = d2;\n      bx = x;\n      by = y;\n    }\n  }\n  if (best \u003c P.lmin * P.lmin) return;\n  const gen0 = P.nuclei \u003c P.wantNuclei;\n  if (gen0) {\n    // A crack that starts in open clay runs both ways from where it started.\n    P.nuclei++;\n    const a = Math.random() * Math.PI;\n    const hx = Math.cos(a);\n    const hy = Math.sin(a);\n    const c1 = startCrack(P, bx, by, hx, hy, 0, -1);\n    if (c1 \u003c 0) return;\n    const c2 = startCrack(P, bx, by, -hx, -hy, 0, c1);\n    if (c2 >= 0) P.par[c1] = c2;\n    return;\n  }\n  // The nearest crack point, or the frame if that is nearer.\n  let src = -1;\n  let sd = NONE;\n  for (let p = 0; p \u003c P.np; p++) {\n    const ddx = P.px[p] - bx;\n    const ddy = P.py[p] - by;\n    const v = ddx * ddx + ddy * ddy;\n    if (v \u003c sd) {\n      sd = v;\n      src = p;\n    }\n  }\n  const el = bx + 2.5;\n  const er = W + 1.5 - bx;\n  const et = by + 2.5;\n  const e = Math.min(el, er, et, H + 1.5 - by);\n  const jit = (Math.random() - 0.5) * 0.24;\n  let sx, sy, hx, hy;\n  let gen = 1;\n  let parent = -1;\n  if (src \u003c 0 || e * e \u003c sd) {\n    // A crack that started beyond the frame comes in square to it.\n    if (e === el) [sx, sy, hx, hy] = [0, by, 1, jit];\n    else if (e === er) [sx, sy, hx, hy] = [W - 1, by, -1, jit];\n    else if (e === et) [sx, sy, hx, hy] = [bx, 0, jit, 1];\n    else [sx, sy, hx, hy] = [bx, H - 1, jit, -1];\n    if (P.occ[Math.round(sy) * W + Math.round(sx)]) return;\n  } else {\n    sx = P.px[src];\n    sy = P.py[src];\n    parent = P.pid[src];\n    gen = P.cgen[parent] + 1;\n    const vx = bx - sx;\n    const vy = by - sy;\n    const cj = Math.cos(jit);\n    const sj = Math.sin(jit);\n    hx = vx * cj - vy * sj;\n    hy = vx * sj + vy * cj;\n  }\n  startCrack(P, sx, sy, hx, hy, gen, parent);\n}\n\nfunction startRain(P) {\n  if (P.rain >= 0) return;\n  P.rain = 0;\n  P.wiped = false;\n}\n\n// One pass over the clay. A crack opens as a hairline and widens toward its\n// generation's width, so a tip is always thinner than the crack behind it.\n// Clay along a crack dries fast, having a second face to the air; a thin\n// film dries faster than a thick layer, and a curled rim dries from below too.\nfunction soak(P, ddt) {\n  const close = P.close;\n  const wsc = (1 - 0.5 * P.fine) * (0.8 + 0.1 * P.sun) * close;\n  const young = 0.45 * close;\n  const clock = P.clock;\n  const dries = P.rain \u003c 0;\n  const thin = ddt * (0.7 + 0.8 * P.fine);\n  const edge = 0.2 + (1.1 + 0.6 * P.curl) * P.curl;\n  const m = P.m;\n  for (let q = 0; q \u003c N; q++) {\n    let rate = 0.15;\n    if (P.key[q] \u003c NONE) {\n      const wmax = WMAX[P.cgen[P.cid[q]]] * wsc;\n      const w = young + (wmax - young) * AGE[ageIndex(clock - P.born[q])];\n      P.wid[q] = w;\n      const lip = P.dist[q] - w / 2;\n      rate += edge * (lip \u003c= 0 ? 1 : DRYLIP[Math.min(LIPN - 1, (lip * 32) | 0)]);\n    }\n    if (dries) {\n      const v = m[q] - thin * rate * P.rate[q];\n      m[q] = v > 0 ? v : 0;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.clay = Math.max(0, Math.min(1, k[0]));\n  P.sun = Math.max(0.3, Math.min(3, k[1]));\n  P.fine = Math.max(0, Math.min(1, k[2]));\n  P.curl = Math.max(0, Math.min(1, k[3]));\n  // The widest clay left uncracked. It shrinks a little in the dry spell, so\n  // the biggest chips still split now and then.\n  P.lmin = (8 - 5 * P.fine) * (1 - 0.22 * smooth(9, 22, P.clock));\n  P.wantNuclei = 3 + Math.round(2 * P.fine);\n  if (input.btnPressed && input.btnPressed[0]) startRain(P);\n  // The clock everything dries by: Sun 2 runs it at real time.\n  const ddt = (dt * P.sun) / 2;\n  // Clouds mirrored in wet clay drift at three LEDs a second.\n  P.skyX += dt * 3;\n  // Cloud shadows cross the flat on the wind at eight LEDs a second. They\n  // gather over the last eight dry seconds before a shower and clear after it.\n  P.cloudX += dt * 8;\n  const gather = P.rain >= 0 ? 1 : smooth(RAIN_AT - 8, RAIN_AT, P.clock);\n  P.gather += (gather - P.gather) * Math.min(1, dt * (P.rain >= 0 ? 4 : 0.5));\n\n  const m = P.m;\n  if (P.rain >= 0) {\n    P.rain += dt;\n    const r = P.rain;\n    const env = smooth(0, 0.8, r) * (1 - smooth(3.0, RAIN_LEN, r));\n    P.light = Math.max(DIM, P.light - dt * 0.2);\n    P.fill = smooth(0.2, 1.4, r);\n    P.close = 1 - smooth(1.0, 3.4, r);\n    P.dropAcc += dt * 150 * env;\n    while (P.dropAcc >= 1) {\n      P.dropAcc -= 1;\n      const x = Math.random() * W;\n      const y = Math.random() * H;\n      P.dx[P.di] = x;\n      P.dy[P.di] = y;\n      P.dage[P.di] = 0;\n      P.di = (P.di + 1) % MAXD;\n      // Each drop darkens a spot three LEDs across, the way the first drops\n      // of a shower spot dry dirt.\n      for (let j = Math.floor(y - 1.5); j \u003c= y + 1.5; j++)\n        for (let i = Math.floor(x - 1.5); i \u003c= x + 1.5; i++)\n          if (i >= 0 && i \u003c W && j >= 0 && j \u003c H && (i - x) * (i - x) + (j - y) * (j - y) \u003c 2.3) m[j * W + i] = 1;\n    }\n    for (let q = 0; q \u003c N; q++) m[q] = Math.min(1, m[q] + dt * 0.3 * env);\n    if (r >= WIPE && !P.wiped) {\n      P.wiped = true;\n      wipe(P);\n    }\n    if (r >= RAIN_LEN) {\n      P.rain = -1;\n      // The water soaks away before the clay starts to crack again.\n      P.clock = -2.5;\n      P.close = 1;\n      P.fill = 0;\n    }\n  } else {\n    P.light = Math.min(1, P.light + dt * 0.3);\n    P.clock += ddt;\n    // A thin film cracks sooner than a thick layer.\n    if (P.clock > ONSET - 0.4 * P.fine) {\n      for (let c = 0; c \u003c P.nc; c++) if (P.alive[c]) grow(P, c, SPEED[P.cgen[c]] * ddt);\n      let active = 0;\n      for (let c = 0; c \u003c P.nc; c++) active += P.alive[c];\n      P.spawnT += ddt;\n      const most = 5 + Math.round(5 * P.fine);\n      while (P.spawnT > 0.1) {\n        P.spawnT -= 0.1;\n        if (active \u003c most || P.nuclei \u003c P.wantNuclei) {\n          const before = P.nc;\n          spawn(P);\n          active += P.nc - before;\n        }\n      }\n    }\n    if (P.clock > RAIN_AT) startRain(P);\n  }\n  soak(P, ddt);\n  for (let i = 0; i \u003c MAXD; i++) P.dage[i] += dt;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const f = P.clay * (CLAYS.length - 1);\n  const ci = Math.min(CLAYS.length - 2, Math.floor(f));\n  const u = f - ci;\n  const A = CLAYS[ci];\n  const B = CLAYS[ci + 1];\n  const [dr, dg, db, wr, wg, wb] = A.map((v, i) => v + (B[i] - v) * u);\n  // A hot sun bleaches the dry clay a little; an overcast one leaves it dull.\n  const light = P.light * (0.86 + 0.07 * P.sun);\n  // Curl needs sun: under the shower's cloud the chips lie in flat light.\n  const curl = (0.42 + 0.58 * P.curl) * ((P.light - DIM) / (1 - DIM)) * (0.7 + 0.15 * P.sun);\n  const fill = P.fill;\n  const clock = P.clock;\n  const sky = P.sky;\n  const sxo = Math.floor(P.skyX);\n  const cxo = P.cloudX * 0.24;\n  const cth = 0.56 - 0.38 * P.gather;\n  // A cloud's shadow takes as much light as the shower's overcast, and\n  // melts into it when the shower comes.\n  const deep = (1 - DIM) * ((P.light - DIM) / (1 - DIM));\n  const rgb = P.rgb;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const wet = P.m[q];\n      const dry = DRYC[(wet * 256) | 0];\n      // The cloud shadow: the sky tile at four times the size, sampled\n      // smoothly so its edge slides rather than steps.\n      const cu = (x * 0.22 - y * 0.09 + 64 + cxo) % 128;\n      const cv = x * 0.09 + y * 0.22 + 37;\n      const c0 = Math.floor(cu);\n      const v0 = Math.floor(cv);\n      const fu = cu - c0;\n      const fv = cv - v0;\n      const r0 = (v0 & 127) * 128;\n      const r1 = ((v0 + 1) & 127) * 128;\n      const a0 = sky[r0 + c0] + (sky[r0 + ((c0 + 1) & 127)] - sky[r0 + c0]) * fu;\n      const a1 = sky[r1 + c0] + (sky[r1 + ((c0 + 1) & 127)] - sky[r1 + c0]) * fu;\n      let shadow = (a0 + (a1 - a0) * fv - cth) * 6;\n      shadow = shadow \u003c 0 ? 0 : shadow > 1 ? 1 : shadow * shadow * (3 - 2 * shadow);\n      const t = P.tone[q] * light * (1 - deep * shadow);\n      const sun = 1 - 0.75 * shadow;\n      let r = (wr + (dr - wr) * dry) * t;\n      let g = (wg + (dg - wg) * dry) * t;\n      let b = (wb + (db - wb) * dry) * t;\n      // Wet clay mirrors the sky faintly.\n      let sk = (sky[(y & 127) * 128 + ((x + sxo) & 127)] - 0.38) * 2.9;\n      sk = sk \u003c 0 ? 0 : sk > 1 ? 1 : sk;\n      let sh = wet > 0.7 ? (wet - 0.7) / 0.3 : 0;\n      sh = sh * sh * (0.03 + 0.12 * sk);\n      if (sh > 0) {\n        r += (214 - r) * sh;\n        g += (212 - g) * sh;\n        b += (206 - b) * sh;\n      }\n      if (P.key[q] \u003c NONE) {\n        const d = P.dist[q];\n        const w = P.wid[q];\n        const half = w / 2;\n        let gx = 0;\n        let gy = 0;\n        if (d > 0.05) {\n          gx = (x - P.nx[q]) / d;\n          gy = (y - P.ny[q]) / d;\n        }\n        // Positive where this LED's chip lies toward the sun from its crack.\n        const facing = gx * SX + gy * SY;\n        const lip = d - half;\n        if (lip > 0) {\n          // A drying chip curls into a dish: the rim away from the sun tilts\n          // toward it, and the rim on the sun side turns away and lies in\n          // the shadow of the lip across the crack.\n          const li = Math.min(LIPN - 1, (lip * 32) | 0);\n          const cs = curl * sun * smooth(0, 0.6, 1 - wet);\n          let lift = 1 + cs * DISH[li] * (0.06 + 0.4 * facing) + cs * 0.14 * EDGE[li];\n          if (facing \u003c 0) {\n            const reach = cs * 2.4 * -facing;\n            if (lip \u003c reach) lift *= 1 - 0.45 * smooth(0, 0.8, reach - lip);\n          }\n          r *= lift;\n          g *= lift;\n          b *= lift;\n        }\n        const a = half + 0.5 - d;\n        if (a > 0) {\n          const cover = a > 1 ? 1 : a;\n          const depth = DEEP[ageIndex(clock - P.born[q])];\n          // The wall that faces the sun is lit; the other lies in the shadow of its lip.\n          const wall = facing \u003c -0.3 && w > 1.5 && d > 0.6;\n          const shade = wall ? 0.58 - 0.2 * depth : 0.5 - 0.44 * depth;\n          let cr = r * shade;\n          let cg = g * shade;\n          let cb = b * shade;\n          if (fill > 0) {\n            // Rain water in the crack: dark, with the clouds in it.\n            const v = 0.75 + 0.5 * sk;\n            cr += (62 * v - cr) * fill;\n            cg += (66 * v - cg) * fill;\n            cb += (70 * v - cb) * fill;\n          }\n          r += (cr - r) * cover;\n          g += (cg - g) * cover;\n          b += (cb - b) * cover;\n        }\n      }\n      rgb[q * 3] = r;\n      rgb[q * 3 + 1] = g;\n      rgb[q * 3 + 2] = b;\n    }\n  }\n  // Raindrops: a bright point where one lands, then a ring that spreads and fades.\n  for (let i = 0; i \u003c MAXD; i++) {\n    const age = P.dage[i];\n    if (age > 0.3) continue;\n    const x = P.dx[i];\n    const y = P.dy[i];\n    const rad = 0.3 + age * 7;\n    const amp = (1 - age / 0.3) * (age \u003c 0.05 ? 0.9 : 0.45);\n    const e = Math.ceil(rad + 1);\n    for (let j = Math.round(y) - e; j \u003c= y + e; j++)\n      for (let ii = Math.round(x) - e; ii \u003c= x + e; ii++) {\n        if (ii \u003c 0 || ii >= W || j \u003c 0 || j >= H) continue;\n        const ring = (1 - Math.abs(Math.hypot(ii - x, j - y) - rad) / 0.8) * amp;\n        if (ring \u003c= 0) continue;\n        const q = (j * W + ii) * 3;\n        rgb[q] += (214 - rgb[q]) * ring;\n        rgb[q + 1] += (220 - rgb[q + 1]) * ring;\n        rgb[q + 2] += (226 - rgb[q + 2]) * ring;\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[q], rgb[q + 1], rgb[q + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Clay=0..1, Sun=0.3..3, Cracks=0..1, Curl=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Clay","min":0,"max":1,"about":"What the mud is made of, starting from yellow ochre loess, then red laterite, grey river silt and at the top pale playa clay."},{"name":"Sun","min":0.3,"max":3,"about":"How hot the sun is: at 2 the first crack opens within half a second and the shower comes after 24 seconds; turned down the clay stays dark and wet for minutes, turned up it bakes paler and the cracks open wider."},{"name":"Cracks","min":0,"max":1,"about":"How finely the mud splits: at 0 a thick layer breaks into slabs about sixteen LEDs across with wide deep cracks, at 1 a thin film dries twice as fast and crazes into chips about six across."},{"name":"Curl","min":0,"max":1,"about":"How far the chips lift at their rims as they dry: low, they lie nearly flat; high, each chip is a dish, lit along the rim away from the sun and dark along the rim toward it, in the shadow of the next chip's lip."}],"start":[0,2,0,0.06],"measures":{"motion":0.0652,"detail":0.0775,"edges":0.2652,"complexity":2.4007,"coverage":0.991,"colour":0.1598,"drift":0.1523},"knobResponse":[0.1914,0.2254,0.1497,0.0607]},{"slug":"dust-motes","title":"Dust Motes","family":"particle","round":19,"note":"어두운 방, 높은 창에서 내려온 햇살 한 줄기 안에서만 먼지가 반짝이며 떠돌고, 커튼이 흔들리면 빛줄기가 좁아졌다 넓어져요. K1 을 누르면 사람이 방을 가로질러 빛줄기에 그림자를 내고, 발치에서 먼지가 빛 속으로 피어올라요.","idea":"A shaft of sunlight slants from a high window across a dark room to the floorboards, and the dust drifting on the slow air shows only where it crosses the shaft, glinting as each mote turns, while the curtain sways and the sun edges round.","buttons":"K1 tap sends someone walking across the room: a dark figure that cuts a shadow out of the shaft as it passes, with dust puffing up from the boards round its feet into the light.","code":"// ===== Patternflow pattern =====\n// Title:   Dust Motes\n// Family:  particle\n// Idea:    A shaft of sunlight slants from a high window across a dark room to the floorboards, and the dust drifting on the slow air shows only where it crosses the shaft, glinting as each mote turns, while the curtain sways and the sun edges round.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after Vilhelm Hammershøi's Dust Motes Dancing in the Sunbeams (1900)\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Dust=1..4, Draft=-1..1\n//\n// Knob 1: Sun. The hour: at 0 a high late-morning sun throws a steep, pale gold shaft; turned up, the sun sinks, the shaft leans further over and turns amber.\n// Knob 2: Speed. How fast the air, the curtain and the sun move: at 2 a mote wanders about a LED a second, the curtain swings every five seconds and the foot of the shaft creeps a few LEDs along the floor in ten.\n// Knob 3: Dust. How much dust hangs in the room, from about 350 motes at 1 to 1300 at 4; the more dust, the brighter the haze of the shaft itself.\n// Knob 4: Draft. Near still air at 0.06; turned either way, a draught carries the dust that way and the curtain swings harder, blown back to open the window wide at -1 and across most of it at 1, so the shaft narrows to a blade.\n// Buttons: K1 tap sends someone walking across the room: a dark figure that cuts a shadow out of the shaft as it passes, with dust puffing up from the boards round its feet into the light.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXM = 1300;\nconst PUFF = 160;\n// The window: its panes, the mullions, and the floor line.\nconst WX0 = 6;\nconst WX1 = 20;\nconst WY0 = 5;\nconst WY1 = 25;\nconst CX = (WX0 + WX1) / 2;\nconst CY = (WY0 + WY1) / 2;\nconst FY = 112;\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction spawn(P, i, x, y) {\n  P.x[i] = x;\n  P.y[i] = y;\n  P.vx[i] = 0;\n  P.vy[i] = 0;\n  // Each mote turns at its own rate; a flat one flashes as it faces the sun.\n  P.ph[i] = Math.random() * Math.PI * 2;\n  P.spin[i] = 1.5 + Math.random() * 4;\n  P.size[i] = 0.35 + Math.random() * 0.65;\n  P.life[i] = -1;\n}\n\nexport function setup(params) {\n  const P = params;\n  const M = MAXM + PUFF;\n  for (const k of [\"x\", \"y\", \"vx\", \"vy\", \"ph\", \"spin\", \"size\", \"life\"]) P[k] = new Float32Array(M);\n  for (let i = 0; i \u003c MAXM; i++) spawn(P, i, Math.random() * W, Math.random() * FY);\n  for (let i = MAXM; i \u003c M; i++) P.life[i] = 0;\n  P.buf = new Float32Array(N * 3);\n  P.t = 0;\n  P.started = false;\n  P.stir = 0;\n  P.walk = -1;\n  P.wx = -20;\n  P.wdir = 1;\n  P.stride = 0;\n}\n\n// The slow air of the room: three broad eddies drifting, as a stream function\n// so the air neither piles up nor empties anywhere.\nfunction air(P, x, y, out) {\n  const t = P.t;\n  const a1 = 0.09 * x + 0.05 * y + 0.21 * t;\n  const a2 = -0.06 * x + 0.08 * y - 0.17 * t + 2;\n  const a3 = 0.13 * x - 0.11 * y + 0.13 * t + 4;\n  // psi = 14 sin(a1) + 12 sin(a2) + 6 sin(a3)\n  const c1 = 14 * Math.cos(a1);\n  const c2 = 12 * Math.cos(a2);\n  const c3 = 6 * Math.cos(a3) * (1 + P.stir * 3);\n  out[0] = (c1 * 0.05 + c2 * 0.08 - c3 * 0.11) * 0.75;\n  out[1] = -(c1 * 0.09 - c2 * 0.06 + c3 * 0.13) * 0.75;\n}\n\n// Someone crossing the room after a K1 tap: whether their body covers the\n// point. A head, shoulders narrowing to the hips, and two striding legs.\nfunction body(P, x, y) {\n  const dx = x - P.wx;\n  if (P.walk \u003c 0 || dx \u003c -6 || dx > 6 || y \u003c FY - 48 || y > FY) return 0;\n  const hy = FY - 44;\n  if (y \u003c hy + 3) return dx * dx + (y - hy) * (y - hy) \u003c 10 ? 1 : 0;\n  if (y \u003c FY - 39) return Math.abs(dx) \u003c 1.4 ? 1 : 0;\n  if (y \u003c FY - 20) return Math.abs(dx) \u003c 4.3 - 0.05 * (y - FY + 39) ? 1 : 0;\n  const sw = 3 * Math.sin(P.stride) * ((y - FY + 20) / 20);\n  return Math.abs(dx - 1.5 - sw) \u003c 1.3 || Math.abs(dx + 1.5 + sw) \u003c 1.3 ? 1 : 0;\n}\n\n// The shaft at a point: 0 outside, about 1 at its heart. Lateral w runs across\n// it, s along it from the window.\nfunction shaft(P, x, y) {\n  const rx = x - CX;\n  const ry = y - CY;\n  const s = rx * P.dx + ry * P.dy;\n  if (s \u003c 0) return 0;\n  const w = rx * P.dy - ry * P.dx;\n  const e = 1.2 + s * 0.035;\n  let v = smooth(P.wL - e, P.wL + e, w) * (1 - smooth(P.wR - e, P.wR + e, w));\n  if (v \u003c= 0) return 0;\n  // The mullion's shadow runs down the middle as a darker line.\n  const m = (w - P.wM) / (0.8 + s * 0.02);\n  v *= 1 - 0.45 * Math.exp(-m * m);\n  // Someone standing in the light throws a shadow down the shaft behind them.\n  if (P.walk >= 0)\n    for (const o of [-3.5, 0, 3.5]) {\n      const xs = P.wx + o;\n      if (x \u003c= xs) continue;\n      if (body(P, xs, y - ((x - xs) * P.dy) / P.dx)) return 0;\n    }\n  return v * smooth(-2, 8, s);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const sun = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  P.dust = clamp(k[2], 1, 4);\n  const want = Math.round(350 * Math.pow(P.dust, 0.95));\n  const draft = clamp(k[3], -1, 1);\n  P.sun = sun;\n  P.want = Math.min(MAXM, want);\n  if (!P.started) {\n    P.started = true;\n    P.t = 4 + 14 * speed;\n  }\n  const step = dt * speed;\n  P.t += step;\n  const t = P.t;\n\n  // The sun: lower in the sky as Sun turns up, and wandering a little as it\n  // goes round, so the foot of the shaft creeps across the floor.\n  const a = 0.26 + 0.26 * sun + 0.06 * Math.sin(t * 0.16) + 0.03 * Math.sin(t * 0.43 + 1);\n  P.dx = Math.sin(a);\n  P.dy = Math.cos(a);\n  // The curtain hangs at the right of the window and swings in the air, more\n  // with a draught; what it covers casts no light.\n  const swing = 0.7 + 0.5 * Math.abs(draft);\n  P.curtain = clamp(4 + swing * (3.2 * Math.sin(t * 1.25) + 1.6 * Math.sin(t * 2.1 + 1)) + 5 * draft, 0, 12);\n  const xr = WX1 - P.curtain;\n  P.wR = (xr - CX) * P.dy - (WY0 - CY) * P.dx;\n  P.wL = (WX0 - CX) * P.dy - (WY1 - CY) * P.dx;\n  P.wM = -0.2 * (WY1 - WY0) * P.dx;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.walk = 0;\n    P.wdir = Math.random() \u003c 0.5 ? -1 : 1;\n  }\n  if (P.walk >= 0) {\n    // Someone walks across the boards at 18 LEDs a second, and every step\n    // kicks dust up from round their feet.\n    P.walk += dt;\n    P.wx = P.wdir > 0 ? -8 + 18 * P.walk : W + 8 - 18 * P.walk;\n    P.stride = P.walk * 8;\n    if (P.wx \u003c -9 || P.wx > W + 9) P.walk = -1;\n    else if (P.wx > 0 && P.wx \u003c W) {\n      let n = Math.round(60 * dt + Math.random() * 0.5);\n      for (let i = MAXM; i \u003c MAXM + PUFF && n > 0; i++) {\n        if (P.life[i] > 0) continue;\n        spawn(P, i, P.wx + (Math.random() - 0.5) * 8, FY - Math.random() * 3);\n        P.vx[i] = P.wdir * Math.random() * 8 + (Math.random() - 0.5) * 6;\n        P.vy[i] = -5 - Math.random() * 12;\n        P.life[i] = 8 + Math.random() * 6;\n        n--;\n      }\n      P.stir = 1;\n    }\n  }\n  P.stir = Math.max(0, P.stir - dt * 0.25);\n\n  const v = [0, 0];\n  const wind = draft * 5;\n  for (let i = 0; i \u003c MAXM + PUFF; i++) {\n    const puff = i >= MAXM;\n    if (puff && P.life[i] \u003c= 0) continue;\n    if (!puff && i >= P.want) continue;\n    air(P, P.x[i], P.y[i], v);\n    // Warm air in the sun rises, and the dust in it with it.\n    const lift = -1.2 * shaft(P, P.x[i], P.y[i]);\n    if (puff) {\n      // A kicked-up mote slows in the air and joins the drift.\n      const drag = Math.exp(-dt * 1.6);\n      P.vx[i] *= drag;\n      P.vy[i] = P.vy[i] * drag + dt * 1.5;\n      P.life[i] -= dt;\n    }\n    // The walker's wake drags the air along behind them.\n    const wake = P.walk >= 0 && P.y[i] > FY - 50 ? P.wdir * 7 * Math.exp(-((P.x[i] - P.wx) ** 2) / 40) : 0;\n    P.x[i] += (v[0] + wind + (Math.random() - 0.5) * 1.5) * step + (P.vx[i] + wake) * dt;\n    P.y[i] += (v[1] + lift + 0.25 + (Math.random() - 0.5) * 1.5) * step + P.vy[i] * dt;\n    P.ph[i] += P.spin[i] * step;\n    if (P.x[i] \u003c -2) P.x[i] += W + 4;\n    else if (P.x[i] > W + 2) P.x[i] -= W + 4;\n    if (P.y[i] \u003c -2) P.y[i] += FY + 2;\n    else if (P.y[i] > FY) {\n      if (puff) P.life[i] = 0;\n      else P.y[i] -= FY + 2;\n    }\n  }\n}\n\nfunction add(buf, x, y, r, g, b) {\n  const x0 = Math.floor(x);\n  const y0 = Math.floor(y);\n  const fx = x - x0;\n  const fy = y - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= FY) continue;\n      const wgt = (i ? fx : 1 - fx) * (j ? fy : 1 - fy);\n      const q = (py * W + px) * 3;\n      buf[q] += r * wgt;\n      buf[q + 1] += g * wgt;\n      buf[q + 2] += b * wgt;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const buf = P.buf;\n  const sun = P.sun;\n  // Sunlight from pale gold to amber, and the shaft's haze a little denser\n  // as the sun gets low.\n  const lc = [255, 228 - 62 * sun, 172 - 100 * sun];\n  const haze = (30 + 26 * P.dust) * (1 + 0.2 * sun);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      let r;\n      let g;\n      let b;\n      if (y >= FY) {\n        // Floorboards, seen low: their joins come closer toward the back.\n        const d = y - FY;\n        const seam = d === 0 || d === 2 || d === 5 || d === 9 || d === 14;\n        const lit = shaft(P, x + 0.5, y + 0.5);\n        const pane = d === 7 ? 0.55 : 1;\n        const base = seam ? 0.35 : 1;\n        r = 26 * base + lit * pane * base * lc[0] * 0.78;\n        g = 16 * base + lit * pane * base * lc[1] * 0.62;\n        b = 10 * base + lit * pane * base * lc[2] * 0.45;\n      } else {\n        // The wall, dark, warmed a little by light bouncing off the floor\n        // under the shaft.\n        const foot = CX + (FY - CY) * (P.dx / P.dy);\n        const bounce = 18 * Math.exp(-((x - foot) ** 2) / 300 - ((FY - y) ** 2) / 500);\n        const fall = 1 - 0.4 * clamp((y - WY1) / 90, 0, 1);\n        const s = shaft(P, x + 0.5, y + 0.5) * haze * fall;\n        r = 13 + bounce + s * lc[0] / 255;\n        g = 11 + bounce * 0.75 + s * lc[1] / 255;\n        b = 15 + bounce * 0.5 + s * lc[2] / 255;\n        if (y === FY - 1) {\n          r = 20;\n          g = 13;\n          b = 9;\n        }\n      }\n      buf[q] = r;\n      buf[q + 1] = g;\n      buf[q + 2] = b;\n    }\n  // The window: bright panes behind a cross of mullions, the curtain over its\n  // right side glowing where the sun comes through the cloth.\n  const cut = WX1 - P.curtain;\n  for (let y = WY0 - 1; y \u003c= WY1; y++)\n    for (let x = WX0 - 1; x \u003c= WX1; x++) {\n      const q = (y * W + x) * 3;\n      const frame = x === WX0 - 1 || x === WX1 || y === WY0 - 1 || y === WY1;\n      const mull = x === Math.floor(CX) || y === Math.floor(CY);\n      let r;\n      let g;\n      let b;\n      if (frame || mull) {\n        r = 44;\n        g = 32;\n        b = 26;\n      } else {\n        const glare = Math.exp(-((x - CX + 3) ** 2 + (y - CY + 4) ** 2) / 40);\n        r = 210 + 45 * glare;\n        g = 222 + 30 * glare - 30 * sun;\n        b = 228 + 20 * glare - 70 * sun;\n      }\n      if (x + 0.5 > cut + 0.6 * Math.sin(y * 0.7 + P.t * 2) && !frame) {\n        const fold = 0.75 + 0.25 * Math.sin(x * 1.9 + Math.sin(y * 0.3));\n        r = 150 * fold;\n        g = (86 - 20 * sun) * fold;\n        b = 46 * fold;\n      }\n      buf[q] = r;\n      buf[q + 1] = g;\n      buf[q + 2] = b;\n    }\n  // The motes: each shows only in the light, brightest near the window, and\n  // flashes as it turns.\n  for (let i = 0; i \u003c MAXM + PUFF; i++) {\n    if (i >= MAXM ? P.life[i] \u003c= 0 : i >= P.want) continue;\n    const x = P.x[i];\n    const y = P.y[i];\n    const s = shaft(P, x, y);\n    if (s \u003c 0.02) continue;\n    const near = 1.4 - 0.7 * clamp((y - WY1) / 80, 0, 1);\n    const turn = Math.cos(P.ph[i]);\n    const glint = 0.45 + 1.6 * Math.pow(turn * turn, 6);\n    const fade = i >= MAXM ? clamp(P.life[i] / 3, 0, 1) : 1;\n    const v = s * near * glint * P.size[i] * fade * 1.3;\n    add(buf, x - 0.5, y - 0.5, lc[0] * v, lc[1] * v, lc[2] * v);\n  }\n  // The walker is a dark shape against the lit haze, with a thin warm rim on\n  // the side the light comes from.\n  if (P.walk >= 0)\n    for (let y = FY - 48; y \u003c= FY; y++)\n      for (let x = Math.max(0, Math.floor(P.wx - 6)); x \u003c= Math.min(W - 1, P.wx + 6); x++) {\n        if (!body(P, x + 0.5, y + 0.5)) continue;\n        const q = (y * W + x) * 3;\n        const rim = body(P, x - 0.5, y - 0.5) ? 0 : 0.35 * shaft(P, x - 0.5, y - 0.5);\n        buf[q] = 5 + lc[0] * rim;\n        buf[q + 1] = 4 + lc[1] * rim;\n        buf[q + 2] = 5 + lc[2] * rim;\n      }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[q]), knee(buf[q + 1]), knee(buf[q + 2]));\n    }\n}\n\n// Where motes pile up the light rolls off instead of clipping flat.\nfunction knee(c) {\n  if (c \u003c 170) return c;\n  return 170 + 85 * (1 - Math.exp(-(c - 170) / 85));\n}\n","layer":{"id":"layer-dust-motes","type":"code","name":"dust-motes","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dust Motes\n// Family:  particle\n// Idea:    A shaft of sunlight slants from a high window across a dark room to the floorboards, and the dust drifting on the slow air shows only where it crosses the shaft, glinting as each mote turns, while the curtain sways and the sun edges round.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after Vilhelm Hammershøi's Dust Motes Dancing in the Sunbeams (1900)\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Dust=1..4, Draft=-1..1\n//\n// Knob 1: Sun. The hour: at 0 a high late-morning sun throws a steep, pale gold shaft; turned up, the sun sinks, the shaft leans further over and turns amber.\n// Knob 2: Speed. How fast the air, the curtain and the sun move: at 2 a mote wanders about a LED a second, the curtain swings every five seconds and the foot of the shaft creeps a few LEDs along the floor in ten.\n// Knob 3: Dust. How much dust hangs in the room, from about 350 motes at 1 to 1300 at 4; the more dust, the brighter the haze of the shaft itself.\n// Knob 4: Draft. Near still air at 0.06; turned either way, a draught carries the dust that way and the curtain swings harder, blown back to open the window wide at -1 and across most of it at 1, so the shaft narrows to a blade.\n// Buttons: K1 tap sends someone walking across the room: a dark figure that cuts a shadow out of the shaft as it passes, with dust puffing up from the boards round its feet into the light.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXM = 1300;\nconst PUFF = 160;\n// The window: its panes, the mullions, and the floor line.\nconst WX0 = 6;\nconst WX1 = 20;\nconst WY0 = 5;\nconst WY1 = 25;\nconst CX = (WX0 + WX1) / 2;\nconst CY = (WY0 + WY1) / 2;\nconst FY = 112;\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction spawn(P, i, x, y) {\n  P.x[i] = x;\n  P.y[i] = y;\n  P.vx[i] = 0;\n  P.vy[i] = 0;\n  // Each mote turns at its own rate; a flat one flashes as it faces the sun.\n  P.ph[i] = Math.random() * Math.PI * 2;\n  P.spin[i] = 1.5 + Math.random() * 4;\n  P.size[i] = 0.35 + Math.random() * 0.65;\n  P.life[i] = -1;\n}\n\nexport function setup(params) {\n  const P = params;\n  const M = MAXM + PUFF;\n  for (const k of [\"x\", \"y\", \"vx\", \"vy\", \"ph\", \"spin\", \"size\", \"life\"]) P[k] = new Float32Array(M);\n  for (let i = 0; i \u003c MAXM; i++) spawn(P, i, Math.random() * W, Math.random() * FY);\n  for (let i = MAXM; i \u003c M; i++) P.life[i] = 0;\n  P.buf = new Float32Array(N * 3);\n  P.t = 0;\n  P.started = false;\n  P.stir = 0;\n  P.walk = -1;\n  P.wx = -20;\n  P.wdir = 1;\n  P.stride = 0;\n}\n\n// The slow air of the room: three broad eddies drifting, as a stream function\n// so the air neither piles up nor empties anywhere.\nfunction air(P, x, y, out) {\n  const t = P.t;\n  const a1 = 0.09 * x + 0.05 * y + 0.21 * t;\n  const a2 = -0.06 * x + 0.08 * y - 0.17 * t + 2;\n  const a3 = 0.13 * x - 0.11 * y + 0.13 * t + 4;\n  // psi = 14 sin(a1) + 12 sin(a2) + 6 sin(a3)\n  const c1 = 14 * Math.cos(a1);\n  const c2 = 12 * Math.cos(a2);\n  const c3 = 6 * Math.cos(a3) * (1 + P.stir * 3);\n  out[0] = (c1 * 0.05 + c2 * 0.08 - c3 * 0.11) * 0.75;\n  out[1] = -(c1 * 0.09 - c2 * 0.06 + c3 * 0.13) * 0.75;\n}\n\n// Someone crossing the room after a K1 tap: whether their body covers the\n// point. A head, shoulders narrowing to the hips, and two striding legs.\nfunction body(P, x, y) {\n  const dx = x - P.wx;\n  if (P.walk \u003c 0 || dx \u003c -6 || dx > 6 || y \u003c FY - 48 || y > FY) return 0;\n  const hy = FY - 44;\n  if (y \u003c hy + 3) return dx * dx + (y - hy) * (y - hy) \u003c 10 ? 1 : 0;\n  if (y \u003c FY - 39) return Math.abs(dx) \u003c 1.4 ? 1 : 0;\n  if (y \u003c FY - 20) return Math.abs(dx) \u003c 4.3 - 0.05 * (y - FY + 39) ? 1 : 0;\n  const sw = 3 * Math.sin(P.stride) * ((y - FY + 20) / 20);\n  return Math.abs(dx - 1.5 - sw) \u003c 1.3 || Math.abs(dx + 1.5 + sw) \u003c 1.3 ? 1 : 0;\n}\n\n// The shaft at a point: 0 outside, about 1 at its heart. Lateral w runs across\n// it, s along it from the window.\nfunction shaft(P, x, y) {\n  const rx = x - CX;\n  const ry = y - CY;\n  const s = rx * P.dx + ry * P.dy;\n  if (s \u003c 0) return 0;\n  const w = rx * P.dy - ry * P.dx;\n  const e = 1.2 + s * 0.035;\n  let v = smooth(P.wL - e, P.wL + e, w) * (1 - smooth(P.wR - e, P.wR + e, w));\n  if (v \u003c= 0) return 0;\n  // The mullion's shadow runs down the middle as a darker line.\n  const m = (w - P.wM) / (0.8 + s * 0.02);\n  v *= 1 - 0.45 * Math.exp(-m * m);\n  // Someone standing in the light throws a shadow down the shaft behind them.\n  if (P.walk >= 0)\n    for (const o of [-3.5, 0, 3.5]) {\n      const xs = P.wx + o;\n      if (x \u003c= xs) continue;\n      if (body(P, xs, y - ((x - xs) * P.dy) / P.dx)) return 0;\n    }\n  return v * smooth(-2, 8, s);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const sun = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  P.dust = clamp(k[2], 1, 4);\n  const want = Math.round(350 * Math.pow(P.dust, 0.95));\n  const draft = clamp(k[3], -1, 1);\n  P.sun = sun;\n  P.want = Math.min(MAXM, want);\n  if (!P.started) {\n    P.started = true;\n    P.t = 4 + 14 * speed;\n  }\n  const step = dt * speed;\n  P.t += step;\n  const t = P.t;\n\n  // The sun: lower in the sky as Sun turns up, and wandering a little as it\n  // goes round, so the foot of the shaft creeps across the floor.\n  const a = 0.26 + 0.26 * sun + 0.06 * Math.sin(t * 0.16) + 0.03 * Math.sin(t * 0.43 + 1);\n  P.dx = Math.sin(a);\n  P.dy = Math.cos(a);\n  // The curtain hangs at the right of the window and swings in the air, more\n  // with a draught; what it covers casts no light.\n  const swing = 0.7 + 0.5 * Math.abs(draft);\n  P.curtain = clamp(4 + swing * (3.2 * Math.sin(t * 1.25) + 1.6 * Math.sin(t * 2.1 + 1)) + 5 * draft, 0, 12);\n  const xr = WX1 - P.curtain;\n  P.wR = (xr - CX) * P.dy - (WY0 - CY) * P.dx;\n  P.wL = (WX0 - CX) * P.dy - (WY1 - CY) * P.dx;\n  P.wM = -0.2 * (WY1 - WY0) * P.dx;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.walk = 0;\n    P.wdir = Math.random() \u003c 0.5 ? -1 : 1;\n  }\n  if (P.walk >= 0) {\n    // Someone walks across the boards at 18 LEDs a second, and every step\n    // kicks dust up from round their feet.\n    P.walk += dt;\n    P.wx = P.wdir > 0 ? -8 + 18 * P.walk : W + 8 - 18 * P.walk;\n    P.stride = P.walk * 8;\n    if (P.wx \u003c -9 || P.wx > W + 9) P.walk = -1;\n    else if (P.wx > 0 && P.wx \u003c W) {\n      let n = Math.round(60 * dt + Math.random() * 0.5);\n      for (let i = MAXM; i \u003c MAXM + PUFF && n > 0; i++) {\n        if (P.life[i] > 0) continue;\n        spawn(P, i, P.wx + (Math.random() - 0.5) * 8, FY - Math.random() * 3);\n        P.vx[i] = P.wdir * Math.random() * 8 + (Math.random() - 0.5) * 6;\n        P.vy[i] = -5 - Math.random() * 12;\n        P.life[i] = 8 + Math.random() * 6;\n        n--;\n      }\n      P.stir = 1;\n    }\n  }\n  P.stir = Math.max(0, P.stir - dt * 0.25);\n\n  const v = [0, 0];\n  const wind = draft * 5;\n  for (let i = 0; i \u003c MAXM + PUFF; i++) {\n    const puff = i >= MAXM;\n    if (puff && P.life[i] \u003c= 0) continue;\n    if (!puff && i >= P.want) continue;\n    air(P, P.x[i], P.y[i], v);\n    // Warm air in the sun rises, and the dust in it with it.\n    const lift = -1.2 * shaft(P, P.x[i], P.y[i]);\n    if (puff) {\n      // A kicked-up mote slows in the air and joins the drift.\n      const drag = Math.exp(-dt * 1.6);\n      P.vx[i] *= drag;\n      P.vy[i] = P.vy[i] * drag + dt * 1.5;\n      P.life[i] -= dt;\n    }\n    // The walker's wake drags the air along behind them.\n    const wake = P.walk >= 0 && P.y[i] > FY - 50 ? P.wdir * 7 * Math.exp(-((P.x[i] - P.wx) ** 2) / 40) : 0;\n    P.x[i] += (v[0] + wind + (Math.random() - 0.5) * 1.5) * step + (P.vx[i] + wake) * dt;\n    P.y[i] += (v[1] + lift + 0.25 + (Math.random() - 0.5) * 1.5) * step + P.vy[i] * dt;\n    P.ph[i] += P.spin[i] * step;\n    if (P.x[i] \u003c -2) P.x[i] += W + 4;\n    else if (P.x[i] > W + 2) P.x[i] -= W + 4;\n    if (P.y[i] \u003c -2) P.y[i] += FY + 2;\n    else if (P.y[i] > FY) {\n      if (puff) P.life[i] = 0;\n      else P.y[i] -= FY + 2;\n    }\n  }\n}\n\nfunction add(buf, x, y, r, g, b) {\n  const x0 = Math.floor(x);\n  const y0 = Math.floor(y);\n  const fx = x - x0;\n  const fy = y - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= FY) continue;\n      const wgt = (i ? fx : 1 - fx) * (j ? fy : 1 - fy);\n      const q = (py * W + px) * 3;\n      buf[q] += r * wgt;\n      buf[q + 1] += g * wgt;\n      buf[q + 2] += b * wgt;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const buf = P.buf;\n  const sun = P.sun;\n  // Sunlight from pale gold to amber, and the shaft's haze a little denser\n  // as the sun gets low.\n  const lc = [255, 228 - 62 * sun, 172 - 100 * sun];\n  const haze = (30 + 26 * P.dust) * (1 + 0.2 * sun);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      let r;\n      let g;\n      let b;\n      if (y >= FY) {\n        // Floorboards, seen low: their joins come closer toward the back.\n        const d = y - FY;\n        const seam = d === 0 || d === 2 || d === 5 || d === 9 || d === 14;\n        const lit = shaft(P, x + 0.5, y + 0.5);\n        const pane = d === 7 ? 0.55 : 1;\n        const base = seam ? 0.35 : 1;\n        r = 26 * base + lit * pane * base * lc[0] * 0.78;\n        g = 16 * base + lit * pane * base * lc[1] * 0.62;\n        b = 10 * base + lit * pane * base * lc[2] * 0.45;\n      } else {\n        // The wall, dark, warmed a little by light bouncing off the floor\n        // under the shaft.\n        const foot = CX + (FY - CY) * (P.dx / P.dy);\n        const bounce = 18 * Math.exp(-((x - foot) ** 2) / 300 - ((FY - y) ** 2) / 500);\n        const fall = 1 - 0.4 * clamp((y - WY1) / 90, 0, 1);\n        const s = shaft(P, x + 0.5, y + 0.5) * haze * fall;\n        r = 13 + bounce + s * lc[0] / 255;\n        g = 11 + bounce * 0.75 + s * lc[1] / 255;\n        b = 15 + bounce * 0.5 + s * lc[2] / 255;\n        if (y === FY - 1) {\n          r = 20;\n          g = 13;\n          b = 9;\n        }\n      }\n      buf[q] = r;\n      buf[q + 1] = g;\n      buf[q + 2] = b;\n    }\n  // The window: bright panes behind a cross of mullions, the curtain over its\n  // right side glowing where the sun comes through the cloth.\n  const cut = WX1 - P.curtain;\n  for (let y = WY0 - 1; y \u003c= WY1; y++)\n    for (let x = WX0 - 1; x \u003c= WX1; x++) {\n      const q = (y * W + x) * 3;\n      const frame = x === WX0 - 1 || x === WX1 || y === WY0 - 1 || y === WY1;\n      const mull = x === Math.floor(CX) || y === Math.floor(CY);\n      let r;\n      let g;\n      let b;\n      if (frame || mull) {\n        r = 44;\n        g = 32;\n        b = 26;\n      } else {\n        const glare = Math.exp(-((x - CX + 3) ** 2 + (y - CY + 4) ** 2) / 40);\n        r = 210 + 45 * glare;\n        g = 222 + 30 * glare - 30 * sun;\n        b = 228 + 20 * glare - 70 * sun;\n      }\n      if (x + 0.5 > cut + 0.6 * Math.sin(y * 0.7 + P.t * 2) && !frame) {\n        const fold = 0.75 + 0.25 * Math.sin(x * 1.9 + Math.sin(y * 0.3));\n        r = 150 * fold;\n        g = (86 - 20 * sun) * fold;\n        b = 46 * fold;\n      }\n      buf[q] = r;\n      buf[q + 1] = g;\n      buf[q + 2] = b;\n    }\n  // The motes: each shows only in the light, brightest near the window, and\n  // flashes as it turns.\n  for (let i = 0; i \u003c MAXM + PUFF; i++) {\n    if (i >= MAXM ? P.life[i] \u003c= 0 : i >= P.want) continue;\n    const x = P.x[i];\n    const y = P.y[i];\n    const s = shaft(P, x, y);\n    if (s \u003c 0.02) continue;\n    const near = 1.4 - 0.7 * clamp((y - WY1) / 80, 0, 1);\n    const turn = Math.cos(P.ph[i]);\n    const glint = 0.45 + 1.6 * Math.pow(turn * turn, 6);\n    const fade = i >= MAXM ? clamp(P.life[i] / 3, 0, 1) : 1;\n    const v = s * near * glint * P.size[i] * fade * 1.3;\n    add(buf, x - 0.5, y - 0.5, lc[0] * v, lc[1] * v, lc[2] * v);\n  }\n  // The walker is a dark shape against the lit haze, with a thin warm rim on\n  // the side the light comes from.\n  if (P.walk >= 0)\n    for (let y = FY - 48; y \u003c= FY; y++)\n      for (let x = Math.max(0, Math.floor(P.wx - 6)); x \u003c= Math.min(W - 1, P.wx + 6); x++) {\n        if (!body(P, x + 0.5, y + 0.5)) continue;\n        const q = (y * W + x) * 3;\n        const rim = body(P, x - 0.5, y - 0.5) ? 0 : 0.35 * shaft(P, x - 0.5, y - 0.5);\n        buf[q] = 5 + lc[0] * rim;\n        buf[q + 1] = 4 + lc[1] * rim;\n        buf[q + 2] = 5 + lc[2] * rim;\n      }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[q]), knee(buf[q + 1]), knee(buf[q + 2]));\n    }\n}\n\n// Where motes pile up the light rolls off instead of clipping flat.\nfunction knee(c) {\n  if (c \u003c 170) return c;\n  return 170 + 85 * (1 - Math.exp(-(c - 170) / 85));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sun=0..1, Speed=0.2..3, Dust=1..4, Draft=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sun","min":0,"max":1,"about":"The hour: at 0 a high late-morning sun throws a steep, pale gold shaft; turned up, the sun sinks, the shaft leans further over and turns amber."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the air, the curtain and the sun move: at 2 a mote wanders about a LED a second, the curtain swings every five seconds and the foot of the shaft creeps a few LEDs along the floor in ten."},{"name":"Dust","min":1,"max":4,"about":"How much dust hangs in the room, from about 350 motes at 1 to 1300 at 4; the more dust, the brighter the haze of the shaft itself."},{"name":"Draft","min":-1,"max":1,"about":"Near still air at 0.06; turned either way, a draught carries the dust that way and the curtain swings harder, blown back to open the window wide at -1 and across most of it at 1, so the shaft narrows to a blade."}],"start":[0,2,1,0.06],"measures":{"motion":0.0301,"detail":0.0213,"edges":0.2348,"complexity":0.703,"coverage":0.3211,"colour":0.0688,"drift":0.0337},"knobResponse":[0.0562,0.0401,0.0354,0.0362]},{"slug":"elephant-toothpaste","title":"Elephant Toothpaste","family":"chemistry","round":23,"note":"보라색 장갑을 낀 손이 실험대 위 눈금실린더에 아이오딘화 칼륨을 부으면, 유리 안쪽에 그어 둔 식용 색소 줄무늬를 두른 거품 기둥이 입구에서 솟아 패널 꼭대기까지 올라요. 기둥은 한쪽으로 꺾여 실린더 옆을 타고 흘러내려 김 나는 더미로 쌓이고, 더미가 굳어 바래면 손이 닦아 내고 새 실린더를 내려놓아요.","idea":"A gloved hand tips potassium iodide into a tall graduated cylinder of peroxide and dish soap striped inside with food colouring, and the fat column of striped foam that shoots out of its mouth climbs to the top of the panel before it folds over and slumps steaming into a heap on the lab bench.","buttons":"K1 tap pours the catalyst now, or once the foam has finished, wipes the bench and sets down a fresh cylinder.","code":"// ===== Patternflow pattern =====\n// Title:   Elephant Toothpaste\n// Family:  chemistry\n// Idea:    A gloved hand tips potassium iodide into a tall graduated cylinder of peroxide and dish soap striped inside with food colouring, and the fat column of striped foam that shoots out of its mouth climbs to the top of the panel before it folds over and slumps steaming into a heap on the lab bench.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the elephant toothpaste demonstration of the school chemistry lab\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dye=0..1, Speed=0.2..3, Stripes=1..4, Strength=0..1\n//\n// Knob 1: Dye. The food colours striped down the glass, all turned round the colour wheel together. Blue and yellow at 0 become orange and blue at 0.5 and come back round at 1.\n// Knob 2: Speed. How fast the demonstration runs: at 2 the foam leaves the mouth a second after the catalyst goes in and a round from fresh cylinder to wiped bench takes 18.6 s; at 0.2 it all runs ten times slower.\n// Knob 3: Stripes. How many dye colours run down the glass and so through the foam: one blue against white foam at 1, up to four colours at 4.\n// Knob 4: Strength. How much stronger than the lab-grade 30% peroxide the bottle is: at 0 the column takes half a second to reach the top and stands about 25 LEDs wide, at 1 it gets there in a sixth of a second at 37 wide and leaves a taller heap.\n// Buttons: K1 tap pours the catalyst now, or once the foam has finished, wipes the bench and sets down a fresh cylinder.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The cylinder's mouth and the bench top, in rows, and the liquid's depth below the mouth.\nconst MY = 52;\nconst BENCH = 114;\nconst LIQ = 28;\n// The round at Speed 2, in seconds from the moment a fresh cylinder comes down.\nconst T_DOWN = 0.9;\nconst T_OUT = 1.4;\nconst T_IN = 2.2;\nconst T_POUR = 2.45;\nconst T_DRY = 3.05;\nconst T_BACK = 3.5;\nconst T_FROTH = 2.7;\nconst T_ERUPT = 3.4;\nconst T_STOP = 8.4;\nconst T_FOLD = 10;\nconst T_SLUMP = 12;\nconst T_WIPE = 16;\nconst T_LIFT = 17.6;\nconst T_END = 18.6;\n// The study opens with the hand on its way in with the beaker.\nconst OPEN = 1.6;\nconst { min, max, floor, ceil, round, sin, cos, exp, sqrt, abs, asin, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ss = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// The dye hues before the Dye knob turns them: blue, yellow, pink, green.\nconst HUES = [0.62, 0.15, 0.93, 0.38];\nconst WHITE = [255, 250, 240];\n// The light comes from the upper left and a little in front.\nconst LX = -0.48;\nconst LY = -0.56;\nconst LZ = 0.67;\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * (v - v * s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const S = { bub: F(N), stn: F(N), bg: F(N * 3), R: F(N), G: F(N), B: F(N) };\n  Object.assign(S, { q: F(N), nx: F(N), ny: F(N), u: F(N), s: F(N), tx: F(N), hs: F(W), len: [], c: OPEN, t: 0 });\n  // Bubbles: a few cells about 4 LEDs across with darker walls, and finer\n  // grain over them, on a tile that wraps both ways to slide with the foam.\n  const px = [];\n  const py = [];\n  for (let k = 0; k \u003c 512; k++) {\n    px.push((k & 15) * 4 + 4 * hash(k * 2));\n    py.push((k >> 4) * 4 + 4 * hash(k * 2 + 1));\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let f1 = 99;\n      let f2 = 99;\n      let best = 0;\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++) {\n          const k = (((y >> 2) + j + 32) % 32) * 16 + (((x >> 2) + i + 16) % 16);\n          let dx = abs(x + 0.5 - px[k]);\n          let dy = abs(y + 0.5 - py[k]);\n          dx = min(dx, 64 - dx);\n          dy = min(dy, 128 - dy);\n          const d = sqrt(dx * dx + dy * dy);\n          if (d \u003c f1) {\n            f2 = f1;\n            f1 = d;\n            best = k;\n          } else if (d \u003c f2) f2 = d;\n        }\n      S.bub[y * W + x] = 0.74 + 0.2 * min(1, (f2 - f1) / 1.3) + 0.08 * hash(best + 777) + 0.1 * hash(y * W + x + 5000);\n      // Steam: a smooth field that also wraps.\n      const a = (2 * PI * x) / 64;\n      const b = (2 * PI * y) / 128;\n      const v = sin(a + 2 * b + 1.3) + 0.7 * sin(-2 * a + 3 * b + 4.1) + 0.5 * sin(3 * a + 5 * b + 2.2) + 0.35 * sin(5 * a - 7 * b + 5.7);\n      S.stn[y * W + x] = 0.5 + v / 5.1;\n    }\n  // The dark lab: a tiled wall the panel barely shows over a bench whose\n  // black top is lit along its front edge, with a wooden cupboard under it.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r;\n      let g;\n      let b;\n      if (y \u003c BENCH) {\n        const v = (x % 8 === 0 || y % 8 === 7 ? 6 : 11 + 3 * hash(((y >> 3) \u003c\u003c 3) + (x >> 3))) * (0.7 + 0.4 * exp(-(((x - 32) / 30) ** 2)) * (y / BENCH));\n        r = v * 0.8;\n        g = v * 0.95;\n        b = v * 1.3;\n      } else if (y \u003c BENCH + 3) {\n        const v = y === BENCH + 2 ? 2.1 : 1 + 0.08 * (y - BENCH);\n        r = 40 * v;\n        g = 43 * v;\n        b = 48 * v;\n      } else {\n        const door = x === 31 || x === 32 || y === 126 || y === 127;\n        const knob = (x === 28 || x === 35) && y > 119 && y \u003c 122;\n        const v = door ? 0.5 : knob ? 2.4 : 1 - 0.02 * (y - 117);\n        r = 44 * v;\n        g = 31 * v;\n        b = 21 * v;\n      }\n      S.bg[(y * W + x) * 3] = r;\n      S.bg[(y * W + x) * 3 + 1] = g;\n      S.bg[(y * W + x) * 3 + 2] = b;\n    }\n  params.S = S;\n  fresh(S);\n}\n\n// A fresh cylinder brings new drips of dye and a new heap. The side the\n// column will fall to is picked here too.\nfunction fresh(S) {\n  const rnd = Math.random;\n  for (let k = 0; k \u003c 10; k++) S.len[k] = LIQ + 2 - floor(rnd() * 13);\n  S.side = rnd() \u003c 0.5 ? -1 : 1;\n  S.ph = [rnd() * 6.3, rnd() * 6.3, rnd() * 6.3];\n  for (let x = 0; x \u003c W; x++) {\n    const d = (x - 32) / 27;\n    const h = exp(-d * d * 1.6) * (0.78 + 0.1 * sin(x * 0.45 + S.ph[0]) + 0.07 * sin(x * 1.1 + S.ph[1]));\n    S.hs[x] = max(0, h + 0.22 * exp(-(((x - 22.5) / 5) ** 2)) + 0.22 * exp(-(((x - 41.5) / 5) ** 2)));\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.S) setup(params);\n  const S = params.S;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  S.dye = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3) / 2;\n  S.n = cl(round(k[2]), 1, 4);\n  S.st = cl(k[3], 0, 1);\n  S.bands = 2 * S.n + 2;\n  S.pal = HUES.map((h) => hsv((h + S.dye) % 1, 0.88, 1));\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (S.c \u003c T_IN) S.c = T_IN;\n    else if (S.c >= T_SLUMP && S.c \u003c T_WIPE) S.c = T_WIPE;\n  }\n  S.c += dt * rate;\n  S.t += dt * rate;\n  if (S.c >= T_END) {\n    S.c -= T_END;\n    fresh(S);\n  }\n}\n\n// One LED of foam, its bubbles lit by the lamp on the rounded surface and\n// coloured by the dye band it falls in. b is the band coordinate, s how far\n// the foam has moved.\nfunction foam(S, i, nx, ny, nz, b, s, tx, dim, a, sat) {\n  const tex = S.bub[((s | 0) & 127) * 64 + ((tx | 0) & 63)];\n  const lit = max(0, LX * nx + LY * ny + LZ * nz);\n  const sh = (0.16 + 1.1 * lit + 0.25 * lit ** 8) * tex * dim;\n  b += 0.3 * (tex - 0.88);\n  const m = cl((cos(2 * PI * b) - 0.05) * 2.5, 0, 1) * sat;\n  const n = S.n;\n  const c = S.pal[(((floor(b + 0.5) % n) + n) % n)];\n  const o = 1 - a;\n  S.R[i] = S.R[i] * o + (WHITE[0] + (c[0] - WHITE[0]) * m) * sh * a;\n  S.G[i] = S.G[i] * o + (WHITE[1] + (c[1] - WHITE[1]) * m) * sh * a;\n  S.B[i] = S.B[i] * o + (WHITE[2] + (c[2] - WHITE[2]) * m) * sh * a;\n}\n\n// A disc of a foam tube. Where discs overlap, the LED keeps the one it sits\n// deepest in, so a row of them makes a soft round-ended tube.\nfunction stamp(S, cx, cy, tx, ty, w, s0, asp = 1) {\n  const { q, nx, ny, u, s } = S;\n  const iw = 1 / w;\n  const y1 = min(H - 1, ceil(cy + w / asp));\n  const x1 = min(W - 1, ceil(cx + w));\n  for (let y = max(0, floor(cy - w / asp)); y \u003c= y1; y++) {\n    const dy = (y - cy) * iw * asp;\n    for (let x = max(0, floor(cx - w)); x \u003c= x1; x++) {\n      const dx = (x - cx) * iw;\n      const d = dx * dx + dy * dy;\n      const i = y * W + x;\n      if (d \u003c 1 && d \u003c q[i]) {\n        q[i] = d;\n        nx[i] = dx;\n        ny[i] = dy;\n        u[i] = -dx * ty + dy * tx;\n        s[i] = s0 - (dx * tx + dy * ty) * w * 0.8;\n        S.tx[i] = u[i] * w;\n      }\n    }\n  }\n}\n\nfunction cylinder(S, oy, top, M, dim, xs) {\n  const { R, G, B, pal, n, len } = S;\n  for (let ly = -1; ly \u003c 62; ly++) {\n    const y = MY + ly + oy;\n    if (y \u003c 0 || y >= H) continue;\n    for (let x = 16; x \u003c= 48; x++) {\n      const i = y * W + x;\n      let r = -1;\n      let g = 0;\n      let b = 0;\n      if (ly \u003c= 0) {\n        if ((ly === 0 && x >= 23 && x \u003c= 41) || (ly \u003c 0 && x >= 21 && x \u003c= 24)) [r, g, b] = [120, 136, 150];\n      } else if (ly \u003c 55) {\n        if (x === 24 || x === 40) {\n          const v = x === 24 ? 1 : 0.7;\n          [r, g, b] = [58 * v, 74 * v, 90 * v];\n        } else if (x > 24 && x \u003c 40) {\n          if (ly >= top) {\n            // Foam that has filled the glass, seen through it.\n            const u = (x - 32) / 7.6;\n            foam(S, i, u, 0, sqrt(1 - u * u), (asin(u) / (2 * PI)) * S.bands + 0.022 * (M + ly), M + ly, x, 0.72 * dim, 1, 1);\n            [r, g, b] = [R[i], G[i], B[i]];\n          } else if (ly >= LIQ) {\n            const v = ly === LIQ ? 2.4 : 1 - (ly - LIQ) * 0.012;\n            [r, g, b] = [25 * v, 38 * v, 46 * v];\n            // The dye that has run down into the liquid spreads in it.\n            for (let k = 0; k \u003c S.bands; k++) {\n              if (len[k] \u003c LIQ) continue;\n              const sp = 0.8 + (ly - LIQ) * 0.18;\n              const e = 0.4 * exp(-(((x - xs[k]) / sp) ** 2) - (ly - LIQ) / 10);\n              const c = pal[k % n];\n              r += c[0] * e;\n              g += c[1] * e;\n              b += c[2] * e;\n            }\n          } else [r, g, b] = [15, 20, 26];\n          if (ly \u003c top && ly >= 2)\n            for (let k = 0; k \u003c S.bands; k++) {\n              if (ly > len[k] || abs(x - xs[k]) > (ly >= len[k] - 1 ? 1.1 : 0.7)) continue;\n              const c = pal[k % n];\n              const v = xs.front[k] ? 0.85 : 0.35;\n              [r, g, b] = [c[0] * v, c[1] * v, c[2] * v];\n            }\n          // The graduations, and a glint down the near side of the glass.\n          const tick = ly >= 6 && ly \u003c= 50 && ly % 4 === 2 && x >= (ly % 16 === 2 ? 26 : 27) && x \u003c= (ly % 16 === 2 ? 31 : 29);\n          const glint = x === 26 ? 22 : 0;\n          r += (tick ? 60 : 0) + glint;\n          g += (tick ? 62 : 0) + glint;\n          b += (tick ? 64 : 0) + glint;\n        }\n      } else if (ly \u003c 57) {\n        if (x >= 24 && x \u003c= 40) [r, g, b] = [70, 86, 100];\n      } else if (abs(x - 32) \u003c= 11 + (ly - 57) * 1.1) {\n        const v = ly === 57 ? 1.5 : 1 - (ly - 58) * 0.08;\n        [r, g, b] = [34 * v, 54 * v, 82 * v];\n      }\n      if (r >= 0) {\n        R[i] = r;\n        G[i] = g;\n        B[i] = b;\n      }\n    }\n  }\n}\n\nconst GLOVE = [116, 82, 230];\n// A gloved hand in its lab-coat sleeve. Kind 1 holds the catalyst beaker and\n// kind 2 presses a paper towel to the bench. Kind 3 grips the cylinder.\nfunction hand(S, kind, hx, hy, a, pour) {\n  const { R, G, B } = S;\n  const ca = cos(a);\n  const sa = sin(a);\n  const wx = hx + ca * 10 - sa * 0.5;\n  const wy = hy + sa * 10 + ca * 0.5;\n  const slope = kind === 2 ? -0.45 : -0.12;\n  // The beaker's liquid stays level as it tips; pour runs 0 to 1 as it empties.\n  const lipx = hx + ca * -5.6 - sa * -6.6;\n  const lipy = hy + sa * -5.6 + ca * -6.6;\n  const surf = hy - 1 + (lipy + 0.5 + pour * 7 - hy + 1) * ss(-0.1, -0.9, a);\n  for (let y = max(0, floor(min(hy, wy) - 14)); y \u003c= min(H - 1, ceil(max(hy, wy) + 14)); y++)\n    for (let x = max(0, floor(hx - 13)); x \u003c W; x++) {\n      const i = y * W + x;\n      const dx = x - hx;\n      const dy = y - hy;\n      const lx = ca * dx + sa * dy;\n      const ly = -sa * dx + ca * dy;\n      let col = null;\n      let v = 1;\n      if (x >= wx - 1) {\n        const t = (y - wy - (x - wx) * slope) / (x \u003c wx + 7 ? 4.3 : 5.8);\n        if (abs(t) \u003c 1) {\n          v = 0.4 + 0.6 * (1 - t * t) - 0.15 * t;\n          col = x \u003c wx + 7 ? GLOVE : x \u003c wx + 8 ? [120, 120, 116] : [175, 175, 168];\n        }\n      }\n      if (kind === 1 && abs(lx) \u003c= 5.6 && abs(ly) \u003c= 6.6) {\n        v = 1;\n        if (ly \u003c -5.6) col = [125, 140, 155];\n        else if (abs(lx) > 4.6 || ly > 5.6) col = [70, 90, 105];\n        else if (y > surf) col = [190, 150, 60];\n        else col = [R[i] * 0.7 + 12, G[i] * 0.7 + 14, B[i] * 0.7 + 16];\n      } else if (kind === 1 && lx >= -7 && lx \u003c -5.6 && ly >= -7.2 && ly \u003c -5.6) col = [125, 140, 155];\n      if (kind === 2) {\n        const e = ((lx + 0.5) / 9.5) ** 2 + ((ly - 1.5) / 3) ** 2;\n        if (e \u003c 1) {\n          col = [190, 194, 190];\n          v = (0.55 + 0.45 * S.bub[(y & 127) * 64 + ((x * 2) & 63)]) * (0.7 + 0.3 * (1 - e));\n        }\n        const p = ((lx - 2.5) / 7.5) ** 2 + ((ly + 2.6) / 3.3) ** 2;\n        if (p \u003c 1) {\n          col = GLOVE;\n          v = 0.5 + 0.5 * sqrt(1 - p) - 0.12 * ly;\n        }\n      } else {\n        const p = ((lx - 6.5) / 4.6) ** 2 + ((ly - 0.4) / 6.2) ** 2;\n        if (p \u003c 1) {\n          col = GLOVE;\n          v = 0.4 + 0.5 * sqrt(1 - p) - 0.04 * ly;\n        }\n        // Four curled fingers across the front, the thumb over the top.\n        for (let j = 0; j \u003c 4; j++) {\n          const fy = ly + 4.4 - j * 2.9;\n          const fx = lx \u003c -0.5 ? lx + 0.5 : lx > 6 ? lx - 6 : 0;\n          const d = fx * fx + fy * fy;\n          if (d \u003c 1.8) {\n            col = GLOVE;\n            v = 0.5 + 0.5 * sqrt(1 - d / 1.8) - 0.03 * ly;\n          }\n        }\n        const tx = cl((lx - 2.5) / 5.5, 0, 1);\n        const d = (lx - 2.5 - 5.5 * tx) ** 2 + (ly + 6.8 - 1.6 * tx) ** 2;\n        if (d \u003c 2.3) {\n          col = GLOVE;\n          v = 0.65 + 0.35 * sqrt(1 - d / 2.3);\n        }\n      }\n      if (col) {\n        R[i] = col[0] * v;\n        G[i] = col[1] * v;\n        B[i] = col[2] * v;\n      }\n    }\n  // The catalyst falling from the lip into the mouth.\n  if (kind === 1 && pour > 0.02 && pour \u003c 0.98)\n    for (let y = max(0, round(lipy)); y \u003c MY + 2; y++) {\n      const x0 = round(lipx - 0.5 + 0.4 * sin(y * 0.9 + S.t * 30));\n      for (let x = x0; x \u003c= x0 + (pour \u003c 0.7 ? 1 : 0); x++) {\n        const i = y * W + x;\n        R[i] = 200;\n        G[i] = 160;\n        B[i] = 70;\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.S;\n  if (!S || !S.pal) return;\n  const { R, G, B, bg, q, nx, ny, u, s, hs } = S;\n  for (let i = 0; i \u003c N; i++) {\n    R[i] = bg[i * 3];\n    G[i] = bg[i * 3 + 1];\n    B[i] = bg[i * 3 + 2];\n  }\n  const c = S.c;\n  const st = S.st;\n  // The cylinder comes down at the start of a round and is lifted off at its end.\n  let oy = 0;\n  if (c \u003c T_DOWN) oy = -140 * (1 - ss(0, T_DOWN, c));\n  else if (c > T_LIFT + 0.35) oy = -140 * ss(T_LIFT + 0.35, T_END, c);\n  oy = round(oy);\n\n  // The column rises fast and keeps pouring out while the peroxide lasts.\n  // Then it folds over to one side and sinks back into the glass.\n  const tau = c - T_ERUPT;\n  const Tr = 1.6 - 0.9 * st;\n  const x01 = cl(tau / Tr, 0, 1);\n  const f = ss(T_STOP, T_FOLD, c);\n  const sl = ss(T_FOLD - 0.8, T_SLUMP, c);\n  const flow = tau > 0 ? (20 + 30 * st) * 3 * (1 - exp(-min(tau, T_STOP - T_ERUPT) / 3)) + 4 * max(0, c - T_STOP) : 0;\n  let L = tau > 0 ? (66 + 40 * st) * (1 - (1 - x01) ** 2) : 0;\n  const M = tau > 0 ? L + flow : (ss(T_FROTH, T_ERUPT, c) - 1) * LIQ;\n  L = tau > 0 ? 2 + (L - 2) * (1 - sl) : 0;\n  // How far the foam inside the glass has risen above the liquid.\n  const top = c \u003c T_FROTH ? 99 : LIQ * (1 - ss(T_FROTH, T_ERUPT, c));\n  // Once it is down, the foam stiffens and dulls.\n  const se = ss(T_SLUMP, T_WIPE, c);\n  const dim = 1 - 0.45 * se;\n\n  // Where the dye streaks sit round the inside of the glass.\n  const xs = [];\n  xs.front = [];\n  for (let k = 0; k \u003c S.bands; k++) {\n    const th = ((k + 0.5) / S.bands) * 2 * PI + 0.3;\n    xs.push(32 + 6.8 * sin(th));\n    xs.front.push(cos(th) > 0);\n  }\n  if (oy > -80) cylinder(S, oy, top, M, dim, xs);\n\n  q.fill(2);\n  if (tau > 0) {\n    const wm = 12.5 + 6 * st;\n    const l0 = 14 + 20 * (1 - f);\n    let px = 32;\n    let py = MY - 3 + oy;\n    for (let l = 0; l \u003c= L + 0.01; l += 1.5) {\n      const a = S.side * 2.8 * f * ss(l0, l0 + 26, l);\n      const w = (8.2 + (wm - 8.2) * (1 - exp(-l / 14))) * (1 + 0.35 * sl);\n      const sway = 1.3 * sin(l * 0.08 - S.t * 1.9) * min(1, l / 25) * (1 - f);\n      stamp(S, px + sway, py, sin(a), -cos(a), w, M - 55 * log(1 + l / 55), 1 + 0.7 * sl);\n      px += 1.5 * sin(a);\n      py -= 1.5 * cos(a);\n    }\n  }\n  // Foam running down the outside of the glass to the bench, first and\n  // fattest on the side the column fell to, swelling as it nears the heap.\n  for (let sd = -1; sd \u003c= 1; sd += 2) {\n    const near = sd === S.side;\n    const dr = ss(T_STOP + (near ? 0.3 : 0.9), T_SLUMP - (near ? 0.8 : 0.2), c);\n    for (let l = 0; dr > 0 && l \u003c= 60 * dr; l += 1.5) {\n      const x = 32 + sd * (8.5 + 3 * ss(0, 12, l) + 1.1 * sin(l * 0.17 + S.ph[0] * sd));\n      const w = (3.6 + 1.3 * sin(l * 0.23 + S.ph[1] + sd) + 3.4 * ss(4, 60, l)) * (near ? 1.15 : 0.95);\n      stamp(S, x, MY - 1 + l + oy, 0, 1, w, 18 * (c - T_STOP) - l);\n    }\n  }\n  const bands = S.bands;\n  for (let i = 0; i \u003c N; i++) {\n    const d = q[i];\n    if (d >= 1) continue;\n    const a = cl((1 - sqrt(d)) * 5, 0, 1);\n    foam(S, i, nx[i], ny[i], sqrt(1 - d), (asin(cl(u[i], -1, 1)) / (2 * PI)) * bands + 0.022 * s[i], s[i], S.tx[i] + 32, dim, a, 1);\n  }\n\n  // The heap on the bench, coiled foam with the dye folded through it, until\n  // the towel sweeps it off from the right.\n  const wx = 72 - 86 * ss(T_WIPE, T_LIFT, c);\n  const A = (30 + 12 * st) * ss(T_STOP + 1, T_SLUMP + 0.5, c) * (1 - 0.18 * se);\n  if (A > 0.3 && c \u003c T_LIFT)\n    for (let x = 0; x \u003c W && x \u003c wx - 7; x++) {\n      const h = A * hs[x];\n      if (h \u003c 0.4) continue;\n      const g = A * (hs[min(W - 1, x + 1)] - hs[max(0, x - 1)]) * 0.5;\n      const ytop = BENCH - h;\n      for (let y = max(0, floor(ytop)); y \u003c BENCH; y++) {\n        const dd = y + 0.5 - ytop;\n        const e = exp(-max(0, dd) / 4);\n        const coil = sin((y + 1.5 * sin(x * 0.3 + S.ph[2])) * 0.95);\n        let hx = -g * e + 0.25 * sin(x * 0.7 + y * 0.4);\n        let hy = -e + 0.4 * coil * (1 - e);\n        let hz = 0.45 + (1 - e);\n        const k = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n        hx *= k;\n        hy *= k;\n        hz *= k;\n        const b = (y + 2.5 * sin(x * 0.19 + S.ph[0]) + 1.5 * sin(x * 0.47 + S.ph[1])) * 0.15 + (x - 32) * 0.03;\n        foam(S, y * W + x, hx, hy, hz, b, y * 2 + 40, x * 2, dim * (0.62 + 0.38 * ss(0, 3, BENCH - 1 - y)), cl(dd + 0.5, 0, 1), 1 - 0.35 * se);\n      }\n    }\n\n  // Steam off the hot heap.\n  const stA = ss(T_STOP + 0.8, T_SLUMP - 1, c) * (1 - ss(T_SLUMP + 0.5, T_WIPE, c));\n  if (stA > 0.01) {\n    const crown = BENCH - A * 0.9;\n    const rise = S.t * 13;\n    for (let y = max(0, floor(crown - 70)); y \u003c BENCH; y++) {\n      const v = crown - y;\n      const env = ss(-8, 4, v) * exp(-max(0, v) / 26) * stA;\n      if (env \u003c 0.01) continue;\n      const row = ((y + rise) | 0) & 127;\n      const sw = 4 * sin(y * 0.09 + S.t);\n      for (let x = 0; x \u003c W; x++) {\n        const n = S.stn[row * 64 + ((x + sw) & 63)];\n        const add = 280 * env * exp(-(((x - 32) / 21) ** 2)) * max(0, n - 0.4);\n        const i = y * W + x;\n        R[i] += add * 0.85;\n        G[i] += add * 0.9;\n        B[i] += add;\n      }\n    }\n  }\n\n  // The hands.\n  if (c \u003c T_OUT) hand(S, 3, 40.5 + 46 * ss(T_DOWN, T_OUT, c), MY + 9 + oy, 0, 0);\n  else if (c \u003c T_BACK) {\n    const back = ss(T_DRY, T_BACK, c);\n    const hx = 41 + 44 * (1 - ss(T_OUT, T_IN, c)) + 46 * back;\n    const a = -1.25 * ss(T_IN, T_POUR, c) * (1 - 0.75 * back);\n    hand(S, 1, hx, 41 - 4 * back, a, ss(T_POUR, T_DRY, c));\n  } else if (c >= T_WIPE && c \u003c T_LIFT) hand(S, 2, wx, BENCH - 4, 0, 0);\n  else if (c >= T_LIFT) hand(S, 3, 40.5 + 44 * (1 - ss(T_LIFT, T_LIFT + 0.35, c)), MY + 9 + oy, 0, 0);\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      display.setPixel(x, y, min(255, R[i]), min(255, G[i]), min(255, B[i]));\n    }\n}\n","layer":{"id":"layer-elephant-toothpaste","type":"code","name":"elephant-toothpaste","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Elephant Toothpaste\n// Family:  chemistry\n// Idea:    A gloved hand tips potassium iodide into a tall graduated cylinder of peroxide and dish soap striped inside with food colouring, and the fat column of striped foam that shoots out of its mouth climbs to the top of the panel before it folds over and slumps steaming into a heap on the lab bench.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the elephant toothpaste demonstration of the school chemistry lab\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dye=0..1, Speed=0.2..3, Stripes=1..4, Strength=0..1\n//\n// Knob 1: Dye. The food colours striped down the glass, all turned round the colour wheel together. Blue and yellow at 0 become orange and blue at 0.5 and come back round at 1.\n// Knob 2: Speed. How fast the demonstration runs: at 2 the foam leaves the mouth a second after the catalyst goes in and a round from fresh cylinder to wiped bench takes 18.6 s; at 0.2 it all runs ten times slower.\n// Knob 3: Stripes. How many dye colours run down the glass and so through the foam: one blue against white foam at 1, up to four colours at 4.\n// Knob 4: Strength. How much stronger than the lab-grade 30% peroxide the bottle is: at 0 the column takes half a second to reach the top and stands about 25 LEDs wide, at 1 it gets there in a sixth of a second at 37 wide and leaves a taller heap.\n// Buttons: K1 tap pours the catalyst now, or once the foam has finished, wipes the bench and sets down a fresh cylinder.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The cylinder's mouth and the bench top, in rows, and the liquid's depth below the mouth.\nconst MY = 52;\nconst BENCH = 114;\nconst LIQ = 28;\n// The round at Speed 2, in seconds from the moment a fresh cylinder comes down.\nconst T_DOWN = 0.9;\nconst T_OUT = 1.4;\nconst T_IN = 2.2;\nconst T_POUR = 2.45;\nconst T_DRY = 3.05;\nconst T_BACK = 3.5;\nconst T_FROTH = 2.7;\nconst T_ERUPT = 3.4;\nconst T_STOP = 8.4;\nconst T_FOLD = 10;\nconst T_SLUMP = 12;\nconst T_WIPE = 16;\nconst T_LIFT = 17.6;\nconst T_END = 18.6;\n// The study opens with the hand on its way in with the beaker.\nconst OPEN = 1.6;\nconst { min, max, floor, ceil, round, sin, cos, exp, sqrt, abs, asin, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ss = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// The dye hues before the Dye knob turns them: blue, yellow, pink, green.\nconst HUES = [0.62, 0.15, 0.93, 0.38];\nconst WHITE = [255, 250, 240];\n// The light comes from the upper left and a little in front.\nconst LX = -0.48;\nconst LY = -0.56;\nconst LZ = 0.67;\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * (v - v * s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const S = { bub: F(N), stn: F(N), bg: F(N * 3), R: F(N), G: F(N), B: F(N) };\n  Object.assign(S, { q: F(N), nx: F(N), ny: F(N), u: F(N), s: F(N), tx: F(N), hs: F(W), len: [], c: OPEN, t: 0 });\n  // Bubbles: a few cells about 4 LEDs across with darker walls, and finer\n  // grain over them, on a tile that wraps both ways to slide with the foam.\n  const px = [];\n  const py = [];\n  for (let k = 0; k \u003c 512; k++) {\n    px.push((k & 15) * 4 + 4 * hash(k * 2));\n    py.push((k >> 4) * 4 + 4 * hash(k * 2 + 1));\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let f1 = 99;\n      let f2 = 99;\n      let best = 0;\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++) {\n          const k = (((y >> 2) + j + 32) % 32) * 16 + (((x >> 2) + i + 16) % 16);\n          let dx = abs(x + 0.5 - px[k]);\n          let dy = abs(y + 0.5 - py[k]);\n          dx = min(dx, 64 - dx);\n          dy = min(dy, 128 - dy);\n          const d = sqrt(dx * dx + dy * dy);\n          if (d \u003c f1) {\n            f2 = f1;\n            f1 = d;\n            best = k;\n          } else if (d \u003c f2) f2 = d;\n        }\n      S.bub[y * W + x] = 0.74 + 0.2 * min(1, (f2 - f1) / 1.3) + 0.08 * hash(best + 777) + 0.1 * hash(y * W + x + 5000);\n      // Steam: a smooth field that also wraps.\n      const a = (2 * PI * x) / 64;\n      const b = (2 * PI * y) / 128;\n      const v = sin(a + 2 * b + 1.3) + 0.7 * sin(-2 * a + 3 * b + 4.1) + 0.5 * sin(3 * a + 5 * b + 2.2) + 0.35 * sin(5 * a - 7 * b + 5.7);\n      S.stn[y * W + x] = 0.5 + v / 5.1;\n    }\n  // The dark lab: a tiled wall the panel barely shows over a bench whose\n  // black top is lit along its front edge, with a wooden cupboard under it.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r;\n      let g;\n      let b;\n      if (y \u003c BENCH) {\n        const v = (x % 8 === 0 || y % 8 === 7 ? 6 : 11 + 3 * hash(((y >> 3) \u003c\u003c 3) + (x >> 3))) * (0.7 + 0.4 * exp(-(((x - 32) / 30) ** 2)) * (y / BENCH));\n        r = v * 0.8;\n        g = v * 0.95;\n        b = v * 1.3;\n      } else if (y \u003c BENCH + 3) {\n        const v = y === BENCH + 2 ? 2.1 : 1 + 0.08 * (y - BENCH);\n        r = 40 * v;\n        g = 43 * v;\n        b = 48 * v;\n      } else {\n        const door = x === 31 || x === 32 || y === 126 || y === 127;\n        const knob = (x === 28 || x === 35) && y > 119 && y \u003c 122;\n        const v = door ? 0.5 : knob ? 2.4 : 1 - 0.02 * (y - 117);\n        r = 44 * v;\n        g = 31 * v;\n        b = 21 * v;\n      }\n      S.bg[(y * W + x) * 3] = r;\n      S.bg[(y * W + x) * 3 + 1] = g;\n      S.bg[(y * W + x) * 3 + 2] = b;\n    }\n  params.S = S;\n  fresh(S);\n}\n\n// A fresh cylinder brings new drips of dye and a new heap. The side the\n// column will fall to is picked here too.\nfunction fresh(S) {\n  const rnd = Math.random;\n  for (let k = 0; k \u003c 10; k++) S.len[k] = LIQ + 2 - floor(rnd() * 13);\n  S.side = rnd() \u003c 0.5 ? -1 : 1;\n  S.ph = [rnd() * 6.3, rnd() * 6.3, rnd() * 6.3];\n  for (let x = 0; x \u003c W; x++) {\n    const d = (x - 32) / 27;\n    const h = exp(-d * d * 1.6) * (0.78 + 0.1 * sin(x * 0.45 + S.ph[0]) + 0.07 * sin(x * 1.1 + S.ph[1]));\n    S.hs[x] = max(0, h + 0.22 * exp(-(((x - 22.5) / 5) ** 2)) + 0.22 * exp(-(((x - 41.5) / 5) ** 2)));\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.S) setup(params);\n  const S = params.S;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  S.dye = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3) / 2;\n  S.n = cl(round(k[2]), 1, 4);\n  S.st = cl(k[3], 0, 1);\n  S.bands = 2 * S.n + 2;\n  S.pal = HUES.map((h) => hsv((h + S.dye) % 1, 0.88, 1));\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (S.c \u003c T_IN) S.c = T_IN;\n    else if (S.c >= T_SLUMP && S.c \u003c T_WIPE) S.c = T_WIPE;\n  }\n  S.c += dt * rate;\n  S.t += dt * rate;\n  if (S.c >= T_END) {\n    S.c -= T_END;\n    fresh(S);\n  }\n}\n\n// One LED of foam, its bubbles lit by the lamp on the rounded surface and\n// coloured by the dye band it falls in. b is the band coordinate, s how far\n// the foam has moved.\nfunction foam(S, i, nx, ny, nz, b, s, tx, dim, a, sat) {\n  const tex = S.bub[((s | 0) & 127) * 64 + ((tx | 0) & 63)];\n  const lit = max(0, LX * nx + LY * ny + LZ * nz);\n  const sh = (0.16 + 1.1 * lit + 0.25 * lit ** 8) * tex * dim;\n  b += 0.3 * (tex - 0.88);\n  const m = cl((cos(2 * PI * b) - 0.05) * 2.5, 0, 1) * sat;\n  const n = S.n;\n  const c = S.pal[(((floor(b + 0.5) % n) + n) % n)];\n  const o = 1 - a;\n  S.R[i] = S.R[i] * o + (WHITE[0] + (c[0] - WHITE[0]) * m) * sh * a;\n  S.G[i] = S.G[i] * o + (WHITE[1] + (c[1] - WHITE[1]) * m) * sh * a;\n  S.B[i] = S.B[i] * o + (WHITE[2] + (c[2] - WHITE[2]) * m) * sh * a;\n}\n\n// A disc of a foam tube. Where discs overlap, the LED keeps the one it sits\n// deepest in, so a row of them makes a soft round-ended tube.\nfunction stamp(S, cx, cy, tx, ty, w, s0, asp = 1) {\n  const { q, nx, ny, u, s } = S;\n  const iw = 1 / w;\n  const y1 = min(H - 1, ceil(cy + w / asp));\n  const x1 = min(W - 1, ceil(cx + w));\n  for (let y = max(0, floor(cy - w / asp)); y \u003c= y1; y++) {\n    const dy = (y - cy) * iw * asp;\n    for (let x = max(0, floor(cx - w)); x \u003c= x1; x++) {\n      const dx = (x - cx) * iw;\n      const d = dx * dx + dy * dy;\n      const i = y * W + x;\n      if (d \u003c 1 && d \u003c q[i]) {\n        q[i] = d;\n        nx[i] = dx;\n        ny[i] = dy;\n        u[i] = -dx * ty + dy * tx;\n        s[i] = s0 - (dx * tx + dy * ty) * w * 0.8;\n        S.tx[i] = u[i] * w;\n      }\n    }\n  }\n}\n\nfunction cylinder(S, oy, top, M, dim, xs) {\n  const { R, G, B, pal, n, len } = S;\n  for (let ly = -1; ly \u003c 62; ly++) {\n    const y = MY + ly + oy;\n    if (y \u003c 0 || y >= H) continue;\n    for (let x = 16; x \u003c= 48; x++) {\n      const i = y * W + x;\n      let r = -1;\n      let g = 0;\n      let b = 0;\n      if (ly \u003c= 0) {\n        if ((ly === 0 && x >= 23 && x \u003c= 41) || (ly \u003c 0 && x >= 21 && x \u003c= 24)) [r, g, b] = [120, 136, 150];\n      } else if (ly \u003c 55) {\n        if (x === 24 || x === 40) {\n          const v = x === 24 ? 1 : 0.7;\n          [r, g, b] = [58 * v, 74 * v, 90 * v];\n        } else if (x > 24 && x \u003c 40) {\n          if (ly >= top) {\n            // Foam that has filled the glass, seen through it.\n            const u = (x - 32) / 7.6;\n            foam(S, i, u, 0, sqrt(1 - u * u), (asin(u) / (2 * PI)) * S.bands + 0.022 * (M + ly), M + ly, x, 0.72 * dim, 1, 1);\n            [r, g, b] = [R[i], G[i], B[i]];\n          } else if (ly >= LIQ) {\n            const v = ly === LIQ ? 2.4 : 1 - (ly - LIQ) * 0.012;\n            [r, g, b] = [25 * v, 38 * v, 46 * v];\n            // The dye that has run down into the liquid spreads in it.\n            for (let k = 0; k \u003c S.bands; k++) {\n              if (len[k] \u003c LIQ) continue;\n              const sp = 0.8 + (ly - LIQ) * 0.18;\n              const e = 0.4 * exp(-(((x - xs[k]) / sp) ** 2) - (ly - LIQ) / 10);\n              const c = pal[k % n];\n              r += c[0] * e;\n              g += c[1] * e;\n              b += c[2] * e;\n            }\n          } else [r, g, b] = [15, 20, 26];\n          if (ly \u003c top && ly >= 2)\n            for (let k = 0; k \u003c S.bands; k++) {\n              if (ly > len[k] || abs(x - xs[k]) > (ly >= len[k] - 1 ? 1.1 : 0.7)) continue;\n              const c = pal[k % n];\n              const v = xs.front[k] ? 0.85 : 0.35;\n              [r, g, b] = [c[0] * v, c[1] * v, c[2] * v];\n            }\n          // The graduations, and a glint down the near side of the glass.\n          const tick = ly >= 6 && ly \u003c= 50 && ly % 4 === 2 && x >= (ly % 16 === 2 ? 26 : 27) && x \u003c= (ly % 16 === 2 ? 31 : 29);\n          const glint = x === 26 ? 22 : 0;\n          r += (tick ? 60 : 0) + glint;\n          g += (tick ? 62 : 0) + glint;\n          b += (tick ? 64 : 0) + glint;\n        }\n      } else if (ly \u003c 57) {\n        if (x >= 24 && x \u003c= 40) [r, g, b] = [70, 86, 100];\n      } else if (abs(x - 32) \u003c= 11 + (ly - 57) * 1.1) {\n        const v = ly === 57 ? 1.5 : 1 - (ly - 58) * 0.08;\n        [r, g, b] = [34 * v, 54 * v, 82 * v];\n      }\n      if (r >= 0) {\n        R[i] = r;\n        G[i] = g;\n        B[i] = b;\n      }\n    }\n  }\n}\n\nconst GLOVE = [116, 82, 230];\n// A gloved hand in its lab-coat sleeve. Kind 1 holds the catalyst beaker and\n// kind 2 presses a paper towel to the bench. Kind 3 grips the cylinder.\nfunction hand(S, kind, hx, hy, a, pour) {\n  const { R, G, B } = S;\n  const ca = cos(a);\n  const sa = sin(a);\n  const wx = hx + ca * 10 - sa * 0.5;\n  const wy = hy + sa * 10 + ca * 0.5;\n  const slope = kind === 2 ? -0.45 : -0.12;\n  // The beaker's liquid stays level as it tips; pour runs 0 to 1 as it empties.\n  const lipx = hx + ca * -5.6 - sa * -6.6;\n  const lipy = hy + sa * -5.6 + ca * -6.6;\n  const surf = hy - 1 + (lipy + 0.5 + pour * 7 - hy + 1) * ss(-0.1, -0.9, a);\n  for (let y = max(0, floor(min(hy, wy) - 14)); y \u003c= min(H - 1, ceil(max(hy, wy) + 14)); y++)\n    for (let x = max(0, floor(hx - 13)); x \u003c W; x++) {\n      const i = y * W + x;\n      const dx = x - hx;\n      const dy = y - hy;\n      const lx = ca * dx + sa * dy;\n      const ly = -sa * dx + ca * dy;\n      let col = null;\n      let v = 1;\n      if (x >= wx - 1) {\n        const t = (y - wy - (x - wx) * slope) / (x \u003c wx + 7 ? 4.3 : 5.8);\n        if (abs(t) \u003c 1) {\n          v = 0.4 + 0.6 * (1 - t * t) - 0.15 * t;\n          col = x \u003c wx + 7 ? GLOVE : x \u003c wx + 8 ? [120, 120, 116] : [175, 175, 168];\n        }\n      }\n      if (kind === 1 && abs(lx) \u003c= 5.6 && abs(ly) \u003c= 6.6) {\n        v = 1;\n        if (ly \u003c -5.6) col = [125, 140, 155];\n        else if (abs(lx) > 4.6 || ly > 5.6) col = [70, 90, 105];\n        else if (y > surf) col = [190, 150, 60];\n        else col = [R[i] * 0.7 + 12, G[i] * 0.7 + 14, B[i] * 0.7 + 16];\n      } else if (kind === 1 && lx >= -7 && lx \u003c -5.6 && ly >= -7.2 && ly \u003c -5.6) col = [125, 140, 155];\n      if (kind === 2) {\n        const e = ((lx + 0.5) / 9.5) ** 2 + ((ly - 1.5) / 3) ** 2;\n        if (e \u003c 1) {\n          col = [190, 194, 190];\n          v = (0.55 + 0.45 * S.bub[(y & 127) * 64 + ((x * 2) & 63)]) * (0.7 + 0.3 * (1 - e));\n        }\n        const p = ((lx - 2.5) / 7.5) ** 2 + ((ly + 2.6) / 3.3) ** 2;\n        if (p \u003c 1) {\n          col = GLOVE;\n          v = 0.5 + 0.5 * sqrt(1 - p) - 0.12 * ly;\n        }\n      } else {\n        const p = ((lx - 6.5) / 4.6) ** 2 + ((ly - 0.4) / 6.2) ** 2;\n        if (p \u003c 1) {\n          col = GLOVE;\n          v = 0.4 + 0.5 * sqrt(1 - p) - 0.04 * ly;\n        }\n        // Four curled fingers across the front, the thumb over the top.\n        for (let j = 0; j \u003c 4; j++) {\n          const fy = ly + 4.4 - j * 2.9;\n          const fx = lx \u003c -0.5 ? lx + 0.5 : lx > 6 ? lx - 6 : 0;\n          const d = fx * fx + fy * fy;\n          if (d \u003c 1.8) {\n            col = GLOVE;\n            v = 0.5 + 0.5 * sqrt(1 - d / 1.8) - 0.03 * ly;\n          }\n        }\n        const tx = cl((lx - 2.5) / 5.5, 0, 1);\n        const d = (lx - 2.5 - 5.5 * tx) ** 2 + (ly + 6.8 - 1.6 * tx) ** 2;\n        if (d \u003c 2.3) {\n          col = GLOVE;\n          v = 0.65 + 0.35 * sqrt(1 - d / 2.3);\n        }\n      }\n      if (col) {\n        R[i] = col[0] * v;\n        G[i] = col[1] * v;\n        B[i] = col[2] * v;\n      }\n    }\n  // The catalyst falling from the lip into the mouth.\n  if (kind === 1 && pour > 0.02 && pour \u003c 0.98)\n    for (let y = max(0, round(lipy)); y \u003c MY + 2; y++) {\n      const x0 = round(lipx - 0.5 + 0.4 * sin(y * 0.9 + S.t * 30));\n      for (let x = x0; x \u003c= x0 + (pour \u003c 0.7 ? 1 : 0); x++) {\n        const i = y * W + x;\n        R[i] = 200;\n        G[i] = 160;\n        B[i] = 70;\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.S;\n  if (!S || !S.pal) return;\n  const { R, G, B, bg, q, nx, ny, u, s, hs } = S;\n  for (let i = 0; i \u003c N; i++) {\n    R[i] = bg[i * 3];\n    G[i] = bg[i * 3 + 1];\n    B[i] = bg[i * 3 + 2];\n  }\n  const c = S.c;\n  const st = S.st;\n  // The cylinder comes down at the start of a round and is lifted off at its end.\n  let oy = 0;\n  if (c \u003c T_DOWN) oy = -140 * (1 - ss(0, T_DOWN, c));\n  else if (c > T_LIFT + 0.35) oy = -140 * ss(T_LIFT + 0.35, T_END, c);\n  oy = round(oy);\n\n  // The column rises fast and keeps pouring out while the peroxide lasts.\n  // Then it folds over to one side and sinks back into the glass.\n  const tau = c - T_ERUPT;\n  const Tr = 1.6 - 0.9 * st;\n  const x01 = cl(tau / Tr, 0, 1);\n  const f = ss(T_STOP, T_FOLD, c);\n  const sl = ss(T_FOLD - 0.8, T_SLUMP, c);\n  const flow = tau > 0 ? (20 + 30 * st) * 3 * (1 - exp(-min(tau, T_STOP - T_ERUPT) / 3)) + 4 * max(0, c - T_STOP) : 0;\n  let L = tau > 0 ? (66 + 40 * st) * (1 - (1 - x01) ** 2) : 0;\n  const M = tau > 0 ? L + flow : (ss(T_FROTH, T_ERUPT, c) - 1) * LIQ;\n  L = tau > 0 ? 2 + (L - 2) * (1 - sl) : 0;\n  // How far the foam inside the glass has risen above the liquid.\n  const top = c \u003c T_FROTH ? 99 : LIQ * (1 - ss(T_FROTH, T_ERUPT, c));\n  // Once it is down, the foam stiffens and dulls.\n  const se = ss(T_SLUMP, T_WIPE, c);\n  const dim = 1 - 0.45 * se;\n\n  // Where the dye streaks sit round the inside of the glass.\n  const xs = [];\n  xs.front = [];\n  for (let k = 0; k \u003c S.bands; k++) {\n    const th = ((k + 0.5) / S.bands) * 2 * PI + 0.3;\n    xs.push(32 + 6.8 * sin(th));\n    xs.front.push(cos(th) > 0);\n  }\n  if (oy > -80) cylinder(S, oy, top, M, dim, xs);\n\n  q.fill(2);\n  if (tau > 0) {\n    const wm = 12.5 + 6 * st;\n    const l0 = 14 + 20 * (1 - f);\n    let px = 32;\n    let py = MY - 3 + oy;\n    for (let l = 0; l \u003c= L + 0.01; l += 1.5) {\n      const a = S.side * 2.8 * f * ss(l0, l0 + 26, l);\n      const w = (8.2 + (wm - 8.2) * (1 - exp(-l / 14))) * (1 + 0.35 * sl);\n      const sway = 1.3 * sin(l * 0.08 - S.t * 1.9) * min(1, l / 25) * (1 - f);\n      stamp(S, px + sway, py, sin(a), -cos(a), w, M - 55 * log(1 + l / 55), 1 + 0.7 * sl);\n      px += 1.5 * sin(a);\n      py -= 1.5 * cos(a);\n    }\n  }\n  // Foam running down the outside of the glass to the bench, first and\n  // fattest on the side the column fell to, swelling as it nears the heap.\n  for (let sd = -1; sd \u003c= 1; sd += 2) {\n    const near = sd === S.side;\n    const dr = ss(T_STOP + (near ? 0.3 : 0.9), T_SLUMP - (near ? 0.8 : 0.2), c);\n    for (let l = 0; dr > 0 && l \u003c= 60 * dr; l += 1.5) {\n      const x = 32 + sd * (8.5 + 3 * ss(0, 12, l) + 1.1 * sin(l * 0.17 + S.ph[0] * sd));\n      const w = (3.6 + 1.3 * sin(l * 0.23 + S.ph[1] + sd) + 3.4 * ss(4, 60, l)) * (near ? 1.15 : 0.95);\n      stamp(S, x, MY - 1 + l + oy, 0, 1, w, 18 * (c - T_STOP) - l);\n    }\n  }\n  const bands = S.bands;\n  for (let i = 0; i \u003c N; i++) {\n    const d = q[i];\n    if (d >= 1) continue;\n    const a = cl((1 - sqrt(d)) * 5, 0, 1);\n    foam(S, i, nx[i], ny[i], sqrt(1 - d), (asin(cl(u[i], -1, 1)) / (2 * PI)) * bands + 0.022 * s[i], s[i], S.tx[i] + 32, dim, a, 1);\n  }\n\n  // The heap on the bench, coiled foam with the dye folded through it, until\n  // the towel sweeps it off from the right.\n  const wx = 72 - 86 * ss(T_WIPE, T_LIFT, c);\n  const A = (30 + 12 * st) * ss(T_STOP + 1, T_SLUMP + 0.5, c) * (1 - 0.18 * se);\n  if (A > 0.3 && c \u003c T_LIFT)\n    for (let x = 0; x \u003c W && x \u003c wx - 7; x++) {\n      const h = A * hs[x];\n      if (h \u003c 0.4) continue;\n      const g = A * (hs[min(W - 1, x + 1)] - hs[max(0, x - 1)]) * 0.5;\n      const ytop = BENCH - h;\n      for (let y = max(0, floor(ytop)); y \u003c BENCH; y++) {\n        const dd = y + 0.5 - ytop;\n        const e = exp(-max(0, dd) / 4);\n        const coil = sin((y + 1.5 * sin(x * 0.3 + S.ph[2])) * 0.95);\n        let hx = -g * e + 0.25 * sin(x * 0.7 + y * 0.4);\n        let hy = -e + 0.4 * coil * (1 - e);\n        let hz = 0.45 + (1 - e);\n        const k = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n        hx *= k;\n        hy *= k;\n        hz *= k;\n        const b = (y + 2.5 * sin(x * 0.19 + S.ph[0]) + 1.5 * sin(x * 0.47 + S.ph[1])) * 0.15 + (x - 32) * 0.03;\n        foam(S, y * W + x, hx, hy, hz, b, y * 2 + 40, x * 2, dim * (0.62 + 0.38 * ss(0, 3, BENCH - 1 - y)), cl(dd + 0.5, 0, 1), 1 - 0.35 * se);\n      }\n    }\n\n  // Steam off the hot heap.\n  const stA = ss(T_STOP + 0.8, T_SLUMP - 1, c) * (1 - ss(T_SLUMP + 0.5, T_WIPE, c));\n  if (stA > 0.01) {\n    const crown = BENCH - A * 0.9;\n    const rise = S.t * 13;\n    for (let y = max(0, floor(crown - 70)); y \u003c BENCH; y++) {\n      const v = crown - y;\n      const env = ss(-8, 4, v) * exp(-max(0, v) / 26) * stA;\n      if (env \u003c 0.01) continue;\n      const row = ((y + rise) | 0) & 127;\n      const sw = 4 * sin(y * 0.09 + S.t);\n      for (let x = 0; x \u003c W; x++) {\n        const n = S.stn[row * 64 + ((x + sw) & 63)];\n        const add = 280 * env * exp(-(((x - 32) / 21) ** 2)) * max(0, n - 0.4);\n        const i = y * W + x;\n        R[i] += add * 0.85;\n        G[i] += add * 0.9;\n        B[i] += add;\n      }\n    }\n  }\n\n  // The hands.\n  if (c \u003c T_OUT) hand(S, 3, 40.5 + 46 * ss(T_DOWN, T_OUT, c), MY + 9 + oy, 0, 0);\n  else if (c \u003c T_BACK) {\n    const back = ss(T_DRY, T_BACK, c);\n    const hx = 41 + 44 * (1 - ss(T_OUT, T_IN, c)) + 46 * back;\n    const a = -1.25 * ss(T_IN, T_POUR, c) * (1 - 0.75 * back);\n    hand(S, 1, hx, 41 - 4 * back, a, ss(T_POUR, T_DRY, c));\n  } else if (c >= T_WIPE && c \u003c T_LIFT) hand(S, 2, wx, BENCH - 4, 0, 0);\n  else if (c >= T_LIFT) hand(S, 3, 40.5 + 44 * (1 - ss(T_LIFT, T_LIFT + 0.35, c)), MY + 9 + oy, 0, 0);\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      display.setPixel(x, y, min(255, R[i]), min(255, G[i]), min(255, B[i]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dye=0..1, Speed=0.2..3, Stripes=1..4, Strength=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dye","min":0,"max":1,"about":"The food colours striped down the glass, all turned round the colour wheel together. Blue and yellow at 0 become orange and blue at 0.5 and come back round at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the demonstration runs: at 2 the foam leaves the mouth a second after the catalyst goes in and a round from fresh cylinder to wiped bench takes 18.6 s; at 0.2 it all runs ten times slower."},{"name":"Stripes","min":1,"max":4,"about":"How many dye colours run down the glass and so through the foam: one blue against white foam at 1, up to four colours at 4."},{"name":"Strength","min":0,"max":1,"about":"How much stronger than the lab-grade 30% peroxide the bottle is: at 0 the column takes half a second to reach the top and stands about 25 LEDs wide, at 1 it gets there in a sixth of a second at 37 wide and leaves a taller heap."}],"start":[0,2,1,0.06],"measures":{"motion":0.1815,"detail":0.029,"edges":0.1765,"complexity":0.9251,"coverage":0.367,"colour":0.1801,"drift":0.102},"knobResponse":[0.0441,0.1137,0.0453,0.0773]},{"slug":"euclid-pulse","title":"Euclid Pulse","family":"rhythm","round":1,"note":"유클리드 리듬 셋이 고리 셋에서 함께 돌아요. 바깥 두 고리의 박은 고리 밖 제 조각을 따라 빛으로 퍼져서 세운 패널의 위아래 끝까지 닿아요. 처음은 E(3,8) 이에요.","idea":"Spread a few beats as evenly as they will go over a ring of steps and a good many of the world's drum patterns fall out, so the panel plays three of them at once.","buttons":"K3 tap turns the outer rhythm one step later.","code":"// ===== Patternflow pattern =====\n// Title:   Euclid Pulse\n// Family:  rhythm\n// Idea:    Spread a few beats as evenly as they will go over a ring of steps and a good many of the world's drum patterns fall out, so the panel plays three of them at once.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=80..180, Pulses=3..13, Steps=8..16\n//\n// Knob 1: Hue. Turns the three rings around the colour wheel together.\n// Knob 2: Tempo. Beats per minute; the hand goes round once every four beats.\n// Knob 3: Pulses. Hits on the outer ring; the middle ring takes about half as many.\n// Knob 4: Steps. Steps on the outer ring; the middle ring has three for every four of them. Each outer step owns a slice of the panel and a hit fires a beam down it, so more steps make narrower beams.\n// Buttons: K3 tap turns the outer rhythm one step later.\n\nconst W = 64;\nconst H = 128;\nconst CX = 31.5;\nconst CY = 63.5;\nconst MAX_STEPS = 32;\nconst RIPPLES = 24;\n\n// Ring bands in LEDs from the centre: outer, middle, inner. The outer ring\n// stops three LEDs short of the panel's sides so a ripple can be seen leaving it.\nconst R_IN = [23, 15.5, 8.5];\nconst R_OUT = [28.5, 20, 12];\n// Beams start just outside the outer ring. The far corners are 71 LEDs out.\nconst BEAM_FROM = R_OUT[0] + 1.5;\n// A hit rings out as four arcs, one every 0.09 s, each a little dimmer,\n// running out at 64 LEDs a second: five or six LEDs apart.\nconst ARCS = 4;\nconst ARC_GAP = 0.09;\nconst ARC_SPEED = 64;\nconst BEND = 0.75;\n// The outer ring's beams and the middle ring's, which are a little dimmer so\n// the outer rhythm leads.\nconst FLASH = [0.4, 0.3];\nconst GLOW = [0.34, 0.24];\nconst ARC_POWER = [1, 0.7];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// k hits over n steps, as evenly as they go. This is the same necklace\n// Bjorklund's algorithm builds, read off with a modulo instead of recursion.\nfunction euclid(p, ring, k, n, rot) {\n  p.n[ring] = n;\n  for (let s = 0; s \u003c n; s++) {\n    const t = (s - rot + n * 4) % n;\n    p.hits[ring * MAX_STEPS + s] = (t * k) % n \u003c k ? 1 : 0;\n  }\n}\n\n// How brightly a ring's slice s lights a point r LEDs out, with the share of\n// it that is white left in p.white. A hit rings out as a burst of arcs, and\n// the slice fills in behind the first: a flash that settles to a glow and\n// dims through the next three beats. A rest on the outer ring sends one dim\n// arc, so the panel ticks out every step as the hand reaches it.\nfunction beam(p, ring, s, r) {\n  const at = ring * MAX_STEPS + s;\n  const since = p.beam[at];\n  const age = since / p.life;\n  let v = 0;\n  p.white = 0;\n  if (ring === 0 && !p.hits[at] && p.pass[s] \u003c 1) {\n    const front = BEAM_FROM + ARC_SPEED * p.pass[s];\n    const d = Math.abs(r - front);\n    if (d \u003c 1.4) v = 0.45 * (1 - d / 1.4) * Math.max(0.25, 1 - (front - BEAM_FROM) / 60);\n  }\n  if (age \u003c 1) {\n    if (r \u003c BEAM_FROM + ARC_SPEED * since) v = Math.max(v, FLASH[ring] * Math.exp(-6 * since) + GLOW[ring] * Math.pow(1 - age, 1.3));\n    for (let k = 0; k \u003c ARCS; k++) {\n      const front = BEAM_FROM + ARC_SPEED * (since - k * ARC_GAP);\n      const d = Math.abs(r - front);\n      if (front \u003c BEAM_FROM - 1 || d > 1.4) continue;\n      const arc = ARC_POWER[ring] * (1 - d / 1.4) * Math.pow(0.78, k) * Math.max(0.25, 1 - (front - BEAM_FROM) / 60);\n      if (arc > v) {\n        v = arc;\n        p.white = k === 0 ? arc * 0.45 : 0;\n      }\n    }\n  }\n  return v;\n}\n\n// A ripple leaves the outer edge as an arc facing the step that fired; wide 0\n// sends it all the way round.\nfunction spawn(p, ring, strength, angle, wide) {\n  let slot = 0;\n  for (let i = 0; i \u003c RIPPLES; i++) {\n    if (p.rAge[i] >= 1) {\n      slot = i;\n      break;\n    }\n    if (p.rAge[i] > p.rAge[slot]) slot = i;\n  }\n  p.rAge[slot] = 0;\n  p.rRing[slot] = ring;\n  p.rPower[slot] = strength;\n  p.rAngle[slot] = angle;\n  p.rWide[slot] = wide;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.beats = 0;\n  p.rot = 0;\n  p.n = new Int32Array(3);\n  p.hits = new Uint8Array(3 * MAX_STEPS);\n  p.env = new Float32Array(3 * MAX_STEPS);\n  p.last = new Int32Array([-1, -1, -1]);\n  p.down = 0;\n  // Seconds since each step of the outer two rings last hit, and since the\n  // hand last reached each outer step.\n  p.beam = new Float32Array(2 * MAX_STEPS).fill(99);\n  p.pass = new Float32Array(MAX_STEPS).fill(99);\n  p.white = 0;\n  p.rAge = new Float32Array(RIPPLES).fill(1);\n  p.rRing = new Uint8Array(RIPPLES);\n  p.rPower = new Float32Array(RIPPLES);\n  p.rAngle = new Float32Array(RIPPLES);\n  p.rAim = new Float32Array(RIPPLES);\n  p.rWide = new Float32Array(RIPPLES);\n  p.dist = new Float32Array(W * H);\n  p.turn = new Float32Array(W * H);\n  p.slice = new Float32Array(W * H);\n  p.across = new Float32Array(W * H);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const dx = x - CX;\n      const dy = y - CY;\n      const r = Math.hypot(dx, dy);\n      p.dist[i] = r;\n      // 0 at twelve o'clock, growing clockwise.\n      let a = Math.atan2(dx, -dy) / 6.2832;\n      if (a \u003c 0) a += 1;\n      p.turn[i] = a;\n      // Outside the rings the slices bend toward twelve and six as they go\n      // out, the way the arcs do: a slice that leaves at three o'clock would\n      // reach the side of the panel in three LEDs. The bend squeezes the turn\n      // around the sides and stretches it above and below, so every slice\n      // keeps a share of the open space. across turns a fraction of a slice\n      // into LEDs at this radius.\n      const u = Math.max(0, Math.min(1, (r - BEAM_FROM) / 24));\n      const bend = BEND * u * u * (3 - 2 * u);\n      const w = a + (bend * Math.sin(12.566 * a)) / 12.566;\n      p.slice[i] = w - Math.floor(w);\n      p.across[i] = (6.2832 * r) / (1 + bend * Math.cos(12.566 * a));\n    }\n  }\n  p.col = [\n    [0, 0, 0],\n    [0, 0, 0],\n    [0, 0, 0],\n  ];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 80, 3, 8];\n  p.hue = k[0];\n  p.bpm = k[1];\n  if (input.btnPressed && input.btnPressed[2]) p.rot++;\n  const pulses = Math.round(k[2]);\n  const steps = Math.max(Math.round(k[3]), pulses + 1);\n  const mid = Math.max(3, Math.round(steps * 0.75));\n  euclid(p, 0, pulses, steps, p.rot % steps);\n  euclid(p, 1, Math.min(mid - 1, Math.round(pulses * 0.5) + 1), mid, 1);\n  euclid(p, 2, 4, 4, 0);\n\n  p.beats += (dt * p.bpm) / 60;\n  const bar = p.beats / 4;\n  p.hand = bar - Math.floor(bar);\n  const fade = Math.exp(-dt * 5.5);\n  for (let i = 0; i \u003c 3 * MAX_STEPS; i++) p.env[i] *= fade;\n  p.down *= Math.exp(-dt * 4);\n  // A slice glows for three beats after its hit, so the beams of a bar are\n  // still there, fading, as the next one leaves.\n  p.life = 180 / p.bpm;\n  for (let i = 0; i \u003c 2 * MAX_STEPS; i++) p.beam[i] = Math.min(99, p.beam[i] + dt);\n  for (let s = 0; s \u003c MAX_STEPS; s++) p.pass[s] = Math.min(99, p.pass[s] + dt);\n  for (let ring = 0; ring \u003c 3; ring++) {\n    const n = p.n[ring];\n    const step = Math.floor(p.hand * n);\n    if (step !== p.last[ring]) {\n      p.last[ring] = step;\n      if (ring === 0) p.pass[step] = 0;\n      if (p.hits[ring * MAX_STEPS + step]) {\n        p.env[ring * MAX_STEPS + step] = 1;\n        if (ring \u003c 2) p.beam[ring * MAX_STEPS + step] = 0;\n        else if (step === 0) {\n          p.down = 1;\n          spawn(p, 2, 0.8, 0, 0);\n        } else spawn(p, 2, 0.6, (step + 0.5) / n, 0.2);\n      }\n    }\n  }\n  for (let i = 0; i \u003c RIPPLES; i++) {\n    p.rAge[i] = Math.min(1, p.rAge[i] + dt / 1.4);\n    // The panel stands, so the open space is above and below the rings. An\n    // arc leaves facing its step and bends toward the nearer of the two as it\n    // goes; one sent straight sideways would be off the panel at once.\n    const a = p.rAngle[i];\n    const to = a \u003c 0.25 ? a * 0.4 : a \u003c 0.5 ? 0.5 - (0.5 - a) * 0.4 : a \u003c 0.75 ? 0.5 + (a - 0.5) * 0.4 : 1 - (1 - a) * 0.4;\n    p.rAim[i] = a + (to - a) * Math.min(1, p.rAge[i] * 2.5);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  // Hue 0 opens on an azure outer ring, a pink middle and a gold centre.\n  hsv(p.hue + 0.55, 0.85, 1, p.col[0]);\n  hsv(p.hue + 0.88, 0.7, 1, p.col[1]);\n  hsv(p.hue + 0.15, 0.7, 1, p.col[2]);\n  const hand = p.hand;\n  const hx = Math.sin(hand * 6.2832);\n  const hy = -Math.cos(hand * 6.2832);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const r = p.dist[i];\n      const a = p.turn[i];\n      let R = 0;\n      let G = 0;\n      let B = 0;\n      let ring = -1;\n      for (let j = 0; j \u003c 3; j++) if (r >= R_IN[j] - 0.5 && r \u003c= R_OUT[j] + 0.5) ring = j;\n      if (ring >= 0) {\n        const n = p.n[ring];\n        const pos = a * n;\n        const s = Math.floor(pos);\n        const local = pos - s;\n        // A gap of about one LED between neighbouring steps.\n        const gap = (0.6 * n) / (6.2832 * r);\n        const edge = Math.min(r - R_IN[ring], R_OUT[ring] - r) + 0.5;\n        if (local > gap && local \u003c 1 - gap) {\n          const hit = p.hits[ring * MAX_STEPS + s];\n          const env = p.env[ring * MAX_STEPS + s];\n          const here = s === Math.floor(hand * n);\n          const soft = Math.max(0, Math.min(1, edge));\n          let v;\n          let white = 0;\n          if (hit) {\n            v = Math.max(0.5 + 0.5 * env, here ? 0.7 : 0) * soft;\n            white = env * env * 0.55;\n          } else {\n            // A rest is a dim cell, so the steps can be counted between hits.\n            v = (here ? 0.4 : 0.12) * soft;\n          }\n          const c = p.col[ring];\n          R = (c[0] * (1 - white) + 255 * white) * v;\n          G = (c[1] * (1 - white) + 255 * white) * v;\n          B = (c[2] * (1 - white) + 255 * white) * v;\n        }\n      } else if (r \u003c 5) {\n        const v = 0.18 + 0.82 * p.down;\n        const c = p.col[2];\n        R = c[0] * v + (255 - c[0]) * v * p.down;\n        G = c[1] * v + (255 - c[1]) * v * p.down;\n        B = c[2] * v + (255 - c[2]) * v * p.down;\n      } else if (r > R_OUT[0] + 1) {\n        // Outside the rings each step of the outer two owns a slice of the\n        // panel, the middle ring's three for every four of the outer's, and\n        // a hit sends a beam out along its slice. Where beams of the two\n        // overlap their colours add.\n        for (let j = 0; j \u003c 2; j++) {\n          const n = p.n[j];\n          const pos = p.slice[i] * n;\n          const s = Math.floor(pos);\n          // A slice with nothing in it is dark.\n          if (p.beam[j * MAX_STEPS + s] >= p.life && (j > 0 || p.pass[s] >= 1)) continue;\n          const local = pos - s;\n          // LEDs to the nearer side of the slice, with a dark LED between slices.\n          const soft = Math.max(0, Math.min(1, (Math.min(local, 1 - local) * p.across[i]) / n - 0.6));\n          if (soft \u003c= 0) continue;\n          const v = beam(p, j, s, r) * soft;\n          if (v \u003c= 0) continue;\n          const white = p.white;\n          const c = p.col[j];\n          R += (c[0] * (1 - white) + 255 * white) * v;\n          G += (c[1] * (1 - white) + 255 * white) * v;\n          B += (c[2] * (1 - white) + 255 * white) * v;\n        }\n        for (let q = 0; q \u003c RIPPLES; q++) {\n          const age = p.rAge[q];\n          if (age >= 1) continue;\n          const front = R_OUT[0] + 1 + age * 62;\n          const d = Math.abs(r - front);\n          if (d > 2.2) continue;\n          let v = p.rPower[q] * (1 - age) * Math.sqrt(1 - age) * (1 - d / 2.2);\n          const wide = p.rWide[q];\n          if (wide > 0) {\n            let da = Math.abs(a - p.rAim[q]);\n            if (da > 0.5) da = 1 - da;\n            const span = wide * (0.8 + age * 1.4);\n            if (da > span) continue;\n            v *= 1 - (da / span) * (da / span);\n          }\n          const c = p.col[p.rRing[q]];\n          R += c[0] * v;\n          G += c[1] * v;\n          B += c[2] * v;\n        }\n      }\n      // The hand: a thin spoke through the rings.\n      if (r > 5 && r \u003c R_OUT[0] + 0.5) {\n        const dx = x - CX;\n        const dy = y - CY;\n        const along = dx * hx + dy * hy;\n        const v = along > 0 ? 1 - Math.abs(dx * hy - dy * hx) / 0.9 : 0;\n        if (v > 0) {\n          R = Math.max(R, 170 * v);\n          G = Math.max(G, 170 * v);\n          B = Math.max(B, 170 * v);\n        }\n      }\n      display.setPixel(x, y, Math.min(255, R), Math.min(255, G), Math.min(255, B));\n    }\n  }\n}\n","layer":{"id":"layer-euclid-pulse","type":"code","name":"euclid-pulse","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Euclid Pulse\n// Family:  rhythm\n// Idea:    Spread a few beats as evenly as they will go over a ring of steps and a good many of the world's drum patterns fall out, so the panel plays three of them at once.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=80..180, Pulses=3..13, Steps=8..16\n//\n// Knob 1: Hue. Turns the three rings around the colour wheel together.\n// Knob 2: Tempo. Beats per minute; the hand goes round once every four beats.\n// Knob 3: Pulses. Hits on the outer ring; the middle ring takes about half as many.\n// Knob 4: Steps. Steps on the outer ring; the middle ring has three for every four of them. Each outer step owns a slice of the panel and a hit fires a beam down it, so more steps make narrower beams.\n// Buttons: K3 tap turns the outer rhythm one step later.\n\nconst W = 64;\nconst H = 128;\nconst CX = 31.5;\nconst CY = 63.5;\nconst MAX_STEPS = 32;\nconst RIPPLES = 24;\n\n// Ring bands in LEDs from the centre: outer, middle, inner. The outer ring\n// stops three LEDs short of the panel's sides so a ripple can be seen leaving it.\nconst R_IN = [23, 15.5, 8.5];\nconst R_OUT = [28.5, 20, 12];\n// Beams start just outside the outer ring. The far corners are 71 LEDs out.\nconst BEAM_FROM = R_OUT[0] + 1.5;\n// A hit rings out as four arcs, one every 0.09 s, each a little dimmer,\n// running out at 64 LEDs a second: five or six LEDs apart.\nconst ARCS = 4;\nconst ARC_GAP = 0.09;\nconst ARC_SPEED = 64;\nconst BEND = 0.75;\n// The outer ring's beams and the middle ring's, which are a little dimmer so\n// the outer rhythm leads.\nconst FLASH = [0.4, 0.3];\nconst GLOW = [0.34, 0.24];\nconst ARC_POWER = [1, 0.7];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// k hits over n steps, as evenly as they go. This is the same necklace\n// Bjorklund's algorithm builds, read off with a modulo instead of recursion.\nfunction euclid(p, ring, k, n, rot) {\n  p.n[ring] = n;\n  for (let s = 0; s \u003c n; s++) {\n    const t = (s - rot + n * 4) % n;\n    p.hits[ring * MAX_STEPS + s] = (t * k) % n \u003c k ? 1 : 0;\n  }\n}\n\n// How brightly a ring's slice s lights a point r LEDs out, with the share of\n// it that is white left in p.white. A hit rings out as a burst of arcs, and\n// the slice fills in behind the first: a flash that settles to a glow and\n// dims through the next three beats. A rest on the outer ring sends one dim\n// arc, so the panel ticks out every step as the hand reaches it.\nfunction beam(p, ring, s, r) {\n  const at = ring * MAX_STEPS + s;\n  const since = p.beam[at];\n  const age = since / p.life;\n  let v = 0;\n  p.white = 0;\n  if (ring === 0 && !p.hits[at] && p.pass[s] \u003c 1) {\n    const front = BEAM_FROM + ARC_SPEED * p.pass[s];\n    const d = Math.abs(r - front);\n    if (d \u003c 1.4) v = 0.45 * (1 - d / 1.4) * Math.max(0.25, 1 - (front - BEAM_FROM) / 60);\n  }\n  if (age \u003c 1) {\n    if (r \u003c BEAM_FROM + ARC_SPEED * since) v = Math.max(v, FLASH[ring] * Math.exp(-6 * since) + GLOW[ring] * Math.pow(1 - age, 1.3));\n    for (let k = 0; k \u003c ARCS; k++) {\n      const front = BEAM_FROM + ARC_SPEED * (since - k * ARC_GAP);\n      const d = Math.abs(r - front);\n      if (front \u003c BEAM_FROM - 1 || d > 1.4) continue;\n      const arc = ARC_POWER[ring] * (1 - d / 1.4) * Math.pow(0.78, k) * Math.max(0.25, 1 - (front - BEAM_FROM) / 60);\n      if (arc > v) {\n        v = arc;\n        p.white = k === 0 ? arc * 0.45 : 0;\n      }\n    }\n  }\n  return v;\n}\n\n// A ripple leaves the outer edge as an arc facing the step that fired; wide 0\n// sends it all the way round.\nfunction spawn(p, ring, strength, angle, wide) {\n  let slot = 0;\n  for (let i = 0; i \u003c RIPPLES; i++) {\n    if (p.rAge[i] >= 1) {\n      slot = i;\n      break;\n    }\n    if (p.rAge[i] > p.rAge[slot]) slot = i;\n  }\n  p.rAge[slot] = 0;\n  p.rRing[slot] = ring;\n  p.rPower[slot] = strength;\n  p.rAngle[slot] = angle;\n  p.rWide[slot] = wide;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.beats = 0;\n  p.rot = 0;\n  p.n = new Int32Array(3);\n  p.hits = new Uint8Array(3 * MAX_STEPS);\n  p.env = new Float32Array(3 * MAX_STEPS);\n  p.last = new Int32Array([-1, -1, -1]);\n  p.down = 0;\n  // Seconds since each step of the outer two rings last hit, and since the\n  // hand last reached each outer step.\n  p.beam = new Float32Array(2 * MAX_STEPS).fill(99);\n  p.pass = new Float32Array(MAX_STEPS).fill(99);\n  p.white = 0;\n  p.rAge = new Float32Array(RIPPLES).fill(1);\n  p.rRing = new Uint8Array(RIPPLES);\n  p.rPower = new Float32Array(RIPPLES);\n  p.rAngle = new Float32Array(RIPPLES);\n  p.rAim = new Float32Array(RIPPLES);\n  p.rWide = new Float32Array(RIPPLES);\n  p.dist = new Float32Array(W * H);\n  p.turn = new Float32Array(W * H);\n  p.slice = new Float32Array(W * H);\n  p.across = new Float32Array(W * H);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const dx = x - CX;\n      const dy = y - CY;\n      const r = Math.hypot(dx, dy);\n      p.dist[i] = r;\n      // 0 at twelve o'clock, growing clockwise.\n      let a = Math.atan2(dx, -dy) / 6.2832;\n      if (a \u003c 0) a += 1;\n      p.turn[i] = a;\n      // Outside the rings the slices bend toward twelve and six as they go\n      // out, the way the arcs do: a slice that leaves at three o'clock would\n      // reach the side of the panel in three LEDs. The bend squeezes the turn\n      // around the sides and stretches it above and below, so every slice\n      // keeps a share of the open space. across turns a fraction of a slice\n      // into LEDs at this radius.\n      const u = Math.max(0, Math.min(1, (r - BEAM_FROM) / 24));\n      const bend = BEND * u * u * (3 - 2 * u);\n      const w = a + (bend * Math.sin(12.566 * a)) / 12.566;\n      p.slice[i] = w - Math.floor(w);\n      p.across[i] = (6.2832 * r) / (1 + bend * Math.cos(12.566 * a));\n    }\n  }\n  p.col = [\n    [0, 0, 0],\n    [0, 0, 0],\n    [0, 0, 0],\n  ];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 80, 3, 8];\n  p.hue = k[0];\n  p.bpm = k[1];\n  if (input.btnPressed && input.btnPressed[2]) p.rot++;\n  const pulses = Math.round(k[2]);\n  const steps = Math.max(Math.round(k[3]), pulses + 1);\n  const mid = Math.max(3, Math.round(steps * 0.75));\n  euclid(p, 0, pulses, steps, p.rot % steps);\n  euclid(p, 1, Math.min(mid - 1, Math.round(pulses * 0.5) + 1), mid, 1);\n  euclid(p, 2, 4, 4, 0);\n\n  p.beats += (dt * p.bpm) / 60;\n  const bar = p.beats / 4;\n  p.hand = bar - Math.floor(bar);\n  const fade = Math.exp(-dt * 5.5);\n  for (let i = 0; i \u003c 3 * MAX_STEPS; i++) p.env[i] *= fade;\n  p.down *= Math.exp(-dt * 4);\n  // A slice glows for three beats after its hit, so the beams of a bar are\n  // still there, fading, as the next one leaves.\n  p.life = 180 / p.bpm;\n  for (let i = 0; i \u003c 2 * MAX_STEPS; i++) p.beam[i] = Math.min(99, p.beam[i] + dt);\n  for (let s = 0; s \u003c MAX_STEPS; s++) p.pass[s] = Math.min(99, p.pass[s] + dt);\n  for (let ring = 0; ring \u003c 3; ring++) {\n    const n = p.n[ring];\n    const step = Math.floor(p.hand * n);\n    if (step !== p.last[ring]) {\n      p.last[ring] = step;\n      if (ring === 0) p.pass[step] = 0;\n      if (p.hits[ring * MAX_STEPS + step]) {\n        p.env[ring * MAX_STEPS + step] = 1;\n        if (ring \u003c 2) p.beam[ring * MAX_STEPS + step] = 0;\n        else if (step === 0) {\n          p.down = 1;\n          spawn(p, 2, 0.8, 0, 0);\n        } else spawn(p, 2, 0.6, (step + 0.5) / n, 0.2);\n      }\n    }\n  }\n  for (let i = 0; i \u003c RIPPLES; i++) {\n    p.rAge[i] = Math.min(1, p.rAge[i] + dt / 1.4);\n    // The panel stands, so the open space is above and below the rings. An\n    // arc leaves facing its step and bends toward the nearer of the two as it\n    // goes; one sent straight sideways would be off the panel at once.\n    const a = p.rAngle[i];\n    const to = a \u003c 0.25 ? a * 0.4 : a \u003c 0.5 ? 0.5 - (0.5 - a) * 0.4 : a \u003c 0.75 ? 0.5 + (a - 0.5) * 0.4 : 1 - (1 - a) * 0.4;\n    p.rAim[i] = a + (to - a) * Math.min(1, p.rAge[i] * 2.5);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  // Hue 0 opens on an azure outer ring, a pink middle and a gold centre.\n  hsv(p.hue + 0.55, 0.85, 1, p.col[0]);\n  hsv(p.hue + 0.88, 0.7, 1, p.col[1]);\n  hsv(p.hue + 0.15, 0.7, 1, p.col[2]);\n  const hand = p.hand;\n  const hx = Math.sin(hand * 6.2832);\n  const hy = -Math.cos(hand * 6.2832);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const r = p.dist[i];\n      const a = p.turn[i];\n      let R = 0;\n      let G = 0;\n      let B = 0;\n      let ring = -1;\n      for (let j = 0; j \u003c 3; j++) if (r >= R_IN[j] - 0.5 && r \u003c= R_OUT[j] + 0.5) ring = j;\n      if (ring >= 0) {\n        const n = p.n[ring];\n        const pos = a * n;\n        const s = Math.floor(pos);\n        const local = pos - s;\n        // A gap of about one LED between neighbouring steps.\n        const gap = (0.6 * n) / (6.2832 * r);\n        const edge = Math.min(r - R_IN[ring], R_OUT[ring] - r) + 0.5;\n        if (local > gap && local \u003c 1 - gap) {\n          const hit = p.hits[ring * MAX_STEPS + s];\n          const env = p.env[ring * MAX_STEPS + s];\n          const here = s === Math.floor(hand * n);\n          const soft = Math.max(0, Math.min(1, edge));\n          let v;\n          let white = 0;\n          if (hit) {\n            v = Math.max(0.5 + 0.5 * env, here ? 0.7 : 0) * soft;\n            white = env * env * 0.55;\n          } else {\n            // A rest is a dim cell, so the steps can be counted between hits.\n            v = (here ? 0.4 : 0.12) * soft;\n          }\n          const c = p.col[ring];\n          R = (c[0] * (1 - white) + 255 * white) * v;\n          G = (c[1] * (1 - white) + 255 * white) * v;\n          B = (c[2] * (1 - white) + 255 * white) * v;\n        }\n      } else if (r \u003c 5) {\n        const v = 0.18 + 0.82 * p.down;\n        const c = p.col[2];\n        R = c[0] * v + (255 - c[0]) * v * p.down;\n        G = c[1] * v + (255 - c[1]) * v * p.down;\n        B = c[2] * v + (255 - c[2]) * v * p.down;\n      } else if (r > R_OUT[0] + 1) {\n        // Outside the rings each step of the outer two owns a slice of the\n        // panel, the middle ring's three for every four of the outer's, and\n        // a hit sends a beam out along its slice. Where beams of the two\n        // overlap their colours add.\n        for (let j = 0; j \u003c 2; j++) {\n          const n = p.n[j];\n          const pos = p.slice[i] * n;\n          const s = Math.floor(pos);\n          // A slice with nothing in it is dark.\n          if (p.beam[j * MAX_STEPS + s] >= p.life && (j > 0 || p.pass[s] >= 1)) continue;\n          const local = pos - s;\n          // LEDs to the nearer side of the slice, with a dark LED between slices.\n          const soft = Math.max(0, Math.min(1, (Math.min(local, 1 - local) * p.across[i]) / n - 0.6));\n          if (soft \u003c= 0) continue;\n          const v = beam(p, j, s, r) * soft;\n          if (v \u003c= 0) continue;\n          const white = p.white;\n          const c = p.col[j];\n          R += (c[0] * (1 - white) + 255 * white) * v;\n          G += (c[1] * (1 - white) + 255 * white) * v;\n          B += (c[2] * (1 - white) + 255 * white) * v;\n        }\n        for (let q = 0; q \u003c RIPPLES; q++) {\n          const age = p.rAge[q];\n          if (age >= 1) continue;\n          const front = R_OUT[0] + 1 + age * 62;\n          const d = Math.abs(r - front);\n          if (d > 2.2) continue;\n          let v = p.rPower[q] * (1 - age) * Math.sqrt(1 - age) * (1 - d / 2.2);\n          const wide = p.rWide[q];\n          if (wide > 0) {\n            let da = Math.abs(a - p.rAim[q]);\n            if (da > 0.5) da = 1 - da;\n            const span = wide * (0.8 + age * 1.4);\n            if (da > span) continue;\n            v *= 1 - (da / span) * (da / span);\n          }\n          const c = p.col[p.rRing[q]];\n          R += c[0] * v;\n          G += c[1] * v;\n          B += c[2] * v;\n        }\n      }\n      // The hand: a thin spoke through the rings.\n      if (r > 5 && r \u003c R_OUT[0] + 0.5) {\n        const dx = x - CX;\n        const dy = y - CY;\n        const along = dx * hx + dy * hy;\n        const v = along > 0 ? 1 - Math.abs(dx * hy - dy * hx) / 0.9 : 0;\n        if (v > 0) {\n          R = Math.max(R, 170 * v);\n          G = Math.max(G, 170 * v);\n          B = Math.max(B, 170 * v);\n        }\n      }\n      display.setPixel(x, y, Math.min(255, R), Math.min(255, G), Math.min(255, B));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Tempo=80..180, Pulses=3..13, Steps=8..16","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three rings around the colour wheel together."},{"name":"Tempo","min":80,"max":180,"about":"Beats per minute; the hand goes round once every four beats."},{"name":"Pulses","min":3,"max":13,"about":"Hits on the outer ring; the middle ring takes about half as many."},{"name":"Steps","min":8,"max":16,"about":"Steps on the outer ring; the middle ring has three for every four of them. Each outer step owns a slice of the panel and a hit fires a beam down it, so more steps make narrower beams."}],"start":[0,80,3,8],"measures":{"motion":0.5845,"detail":0.0325,"edges":0.366,"complexity":0.4817,"coverage":0.4069,"colour":0.1498,"drift":0.1272},"knobResponse":[0.0702,0.0945,0.0699,0.0495]},{"slug":"fiddlehead","title":"Fiddlehead","family":"growth","round":21,"note":"봄 숲 바닥의 타임랩스예요. 털 덮인 고사리 순이 지난해 낙엽을 뚫고 올라와 아래부터 풀리며 패널 꼭대기에서 휘는 잎이 되고, 그사이 늙은 잎은 누렇게 시들어 쓰러지고 숲 지붕 틈으로 든 빛살이 그 위를 미끄러져요.","idea":"A spring time-lapse on a woodland floor: furred fern croziers push up through last year's leaves and unroll from the bottom up into tall arching fronds, each side leaflet uncurling from its own little spiral, while old fronds brown and fall back and light through the canopy slides over them.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Fiddlehead\n// Family:  growth\n// Idea:    A spring time-lapse on a woodland floor: furred fern croziers push up through last year's leaves and unroll from the bottom up into tall arching fronds, each side leaflet uncurling from its own little spiral, while old fronds brown and fall back and light through the canopy slides over them.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after time-lapse films of ostrich fern croziers unrolling in spring\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Fern=0..3, Speed=0.2..3, Fronds=6..18, Breeze=-1..1\n//\n// Knob 1: Fern. Ostrich fern at 0, a shuttlecock of bright green round last year's brown fertile fronds; cinnamon fern at 1 with white-woolly croziers; bracken at 2, broad blades tipped flat on tall stalks; autumn fern at 3, whose new fronds come up copper-red and green as they age.\n// Knob 2: Speed. How fast the time-lapse runs: at 2 a crozier takes about thirteen seconds to unroll and a frond lives about half a minute; at 0.2 it creeps.\n// Knob 3: Fronds. How many fronds there are, six in one crown at 6, then a crown either side, then two more crowns further back in the shade at 18.\n// Knob 4: Breeze. Near still at 0.06; turned either way the fronds lean and sway that way and the sunflecks from the canopy slide across faster.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Each fern: young leaf, grown leaf, rachis, crozier, fur, fertile frond (rgb), then the\n// share of stalk below the blade, pinna length, where the blade is widest, lean, arch,\n// coil tightness, fur, how far a crown spreads, fertile frond height, pinna angle, and\n// how slowly the young colour greens.\nconst FERNS = [\n  [160, 226, 70, 44, 150, 48, 104, 164, 60, 104, 178, 58, 196, 140, 84, 92, 58, 36, 0.2, 0.13, 0.62, 0.3, 1.5, 0.15, 0.5, 4, 30, 1.05, 0.5],\n  [184, 220, 100, 92, 178, 58, 150, 176, 96, 140, 150, 110, 236, 226, 210, 200, 106, 40, 0.3, 0.12, 0.45, 0.17, 0.9, 0.17, 1, 2.5, 40, 1.15, 0.5],\n  [130, 184, 80, 44, 124, 70, 128, 156, 84, 90, 122, 60, 190, 178, 156, 0, 0, 0, 0.46, 0.2, 0.04, 0.08, 1.6, 0.11, 0.7, 9, 0, 1.2, 0.5],\n  [238, 108, 50, 66, 140, 54, 164, 96, 54, 130, 62, 34, 64, 40, 28, 0, 0, 0, 0.26, 0.15, 0.3, 0.28, 1.15, 0.15, 0.8, 2, 0, 1.0, 1.4],\n];\n// A frond's life in world seconds at Speed 2: coming up, unrolling, standing, falling, gone.\nconst [EM, UN, HO, FA, GP] = [2, 13, 7, 4, 1];\nconst CYC = EM + UN + HO + FA + GP;\n// Crowns as x and depth, and which crown each slot belongs to in the order Fronds adds them.\nconst CROWN = [[32, 1], [10, 0.93], [54, 0.93], [21, 0.72], [43, 0.72]];\nconst SLOT = [0, 0, 0, 0, 0, 0, 1, 2, 1, 2, 1, 2, 3, 4, 3, 4, 3, 4];\n// Which way each slot leans: the side crowns lean in over the middle, mostly.\nconst LEAN = [-1, 1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, -1, 1, 1, -1, -1, 1];\n// Where in its life each frond is at 2 s: the front crown has one of each, the others are\n// mostly up, so turning Fronds at the start shows.\nconst OPEN = [0.02, 0.146, 0.267, 0.41, 0.59, 0.7, 0.62, 0.45, 0.7, 0.3, 0.76, 0.52, 0.65, 0.4, 0.58, 0.3, 0.72, 0.5];\nconst SEN = [[204, 176, 64], [132, 74, 36]];\nconst HAZE = [34, 52, 44];\nconst MAXS = 340;\n// A snail on the litter, facing right: shell light and dark, body, eye stalks.\nconst SNAIL = [\"..sss.....\", \".sSSSs.t.t\", \".sSsSs..bB\", \".sSssBBBBB\", \"bBBBBBBBBb\"];\nconst SNC = { S: [176, 128, 70], s: [96, 62, 34], B: [150, 140, 118], b: [110, 100, 86], t: [70, 62, 54] };\nconst RX = new Float32Array(MAXS), RY = new Float32Array(MAXS), RT = new Float32Array(MAXS), RW = new Float32Array(MAXS);\n\nfunction build(P) {\n  const { bg, gnd } = P;\n  for (let x = 0; x \u003c W; x++) gnd[x] = 110 + 3 * vn(x * 0.11, 5.5) + 1.6 * vn(x * 0.37, 2.2);\n  // The wood behind: dark under the canopy, hazier and warmer near the floor.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, v = cl(y / 112, 0, 1) ** 1.6, f = vn(x * 0.09, y * 0.06) * 0.6 + vn(x * 0.27, y * 0.19) * 0.4;\n    const k = 0.72 + 0.55 * f;\n    bg.set([mix(20, 44, v) * k, mix(40, 54, v) * k, mix(38, 38, v) * k], p * 3);\n  }\n  // Beech trunks, smooth and grey, lit from the right; the far ones go into the haze.\n  for (const [tx, tw, z] of [[3, 8, 1], [47, 4.5, 0.62], [60, 3, 0.45]])\n    for (let y = 0; y \u003c 116; y++)\n      for (let x = floor(tx - tw / 2); x \u003c= tx + tw / 2; x++) {\n        if (x \u003c 0 || x >= W || y > gnd[x] + 1) continue;\n        const n = (x - tx) / (tw / 2), l = (0.55 + 0.4 * n) * (0.85 + 0.25 * vn(x * 0.8, y * 0.05)) * (y > gnd[x] - 8 ? 0.8 : 1);\n        const moss = y > gnd[x] - 6 - 4 * vn(x, 9) ? 1 : 0, o = (y * W + x) * 3;\n        const c = moss ? [52, 92, 34] : [84, 86, 78];\n        for (let i = 0; i \u003c 3; i++) bg[o + i] = mix(bg[o + i], mix(c[i] * l, HAZE[i], 1 - z), 0.9);\n      }\n  // The canopy overhead, with holes the shafts come through.\n  for (let p = 0; p \u003c 18 * W; p++) {\n    const x = p & 63, y = p >> 6, h = sm((vn(x / 4, y / 3 + 50) * 0.7 + vn(x / 1.7, y / 1.4 + 70) * 0.3 - 0.52) * 5), a = (1 - h) * sm((17 - y - 7 * vn(x / 5, 3.3)) / 4), k = 0.6 + 0.7 * vn(x / 1.6, y / 1.3);\n    P.hole[p] = h * (1 - y / 18);\n    for (let i = 0; i \u003c 3; i++) bg[p * 3 + i] = mix(bg[p * 3 + i], [16, 34, 20][i] * k, a);\n  }\n  // Last year's leaves: beech copper, oak brown, pale skeletons and dark wet ones.\n  const LC = [[124, 76, 40], [98, 62, 34], [140, 110, 74], [66, 44, 30], [96, 84, 70], [130, 90, 48]];\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, d = y - gnd[x];\n    if (d >= 0) bg.set([44 - d * 0.6, 28 - d * 0.4, 18 - d * 0.2], p * 3);\n  }\n  const leaf = (cx, cy, a, rx, ry, c, put) => {\n    const ca = cos(a), sa = sin(a), t = 0.8 + rnd() * 0.35;\n    for (let y = floor(cy - rx); y \u003c= cy + rx; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const dx = x - cx, dy = y - cy, u = (dx * ca + dy * sa) / rx, v = (-dx * sa + dy * ca) / ry, r = u * u + v * v * (1 + 0.6 * u);\n        if (r > 1 || x \u003c 0 || x >= W || y >= H) continue;\n        const k = t * (abs(v) \u003c 0.22 && abs(u) \u003c 0.85 ? 0.7 : r > 0.65 ? 0.78 : 1) * (1 + 0.15 * u);\n        put(x, y, c[0] * k, c[1] * k, c[2] * k);\n      }\n  };\n  const putBg = (x, y, r, g, b) => y >= gnd[x] - 1 && bg.set([r, g, b], (y * W + x) * 3);\n  for (let n = 0; n \u003c 170; n++) {\n    const cx = rnd() * 68 - 2, top = gnd[cl(round(cx), 0, W - 1)];\n    leaf(cx, top + rnd() * (H - top + 2) - 0.5, rnd() * PI, 2 + rnd() * 1.8, 1.1 + rnd() * 0.8, LC[floor(rnd() * 6)], putBg);\n  }\n  // Moss cushions and twigs.\n  for (let n = 0; n \u003c 7; n++) {\n    const cx = rnd() * 64, cy = gnd[floor(cx)] + 2 + rnd() * 12, r = 1.5 + rnd() * 2.5;\n    for (let y = floor(cy - r); y \u003c= cy + r; y++)\n      for (let x = floor(cx - r); x \u003c= cx + r; x++)\n        if (x >= 0 && x \u003c W && y \u003c H && hypot(x - cx, (y - cy) * 1.4) \u003c r && hash(x, y) \u003c 0.85) {\n          const k = 0.7 + 0.5 * hash(y, x);\n          bg.set([50 * k, 104 * k, 36 * k], (y * W + x) * 3);\n        }\n  }\n  for (let n = 0; n \u003c 7; n++) {\n    let x = rnd() * 64, y = gnd[floor(x)] + 1 + rnd() * 14;\n    const a = (rnd() - 0.5) * 0.8, dir = rnd() \u003c 0.5 ? -1 : 1;\n    for (let i = 0, len = 6 + rnd() * 12; i \u003c len; i++, x += dir * cos(a), y += sin(a)) {\n      const xi = round(x), yi = round(y);\n      if (xi >= 0 && xi \u003c W && yi \u003c H) bg.set([62, 46, 36], (yi * W + xi) * 3);\n    }\n  }\n  // Last year's fronds, flattened and rusty on top of the leaves.\n  for (const [sx, dir, len] of [[6, 1, 24], [58, -1, 20], [36, -1, 16]]) {\n    for (let i = 0; i \u003c len; i++) {\n      const x = sx + dir * i, y = round(gnd[cl(x, 0, W - 1)] + 2 + i * 0.12);\n      if (x \u003c 0 || x >= W) continue;\n      bg.set([96, 58, 32], (y * W + x) * 3);\n      if (i % 2 && i \u003c len - 2) for (const s of [-1, 1]) for (let j = 1; j \u003c 4 - i / len * 2; j++) {\n        const px = x + dir * j * 0.6, py = y + s * j;\n        if (px >= 0 && px \u003c W && py \u003c H) bg.set([124, 72, 36], (round(py) * W + round(px)) * 3);\n      }\n    }\n  }\n  // Leaves in front of the crowns, laid over the stalks where they come out.\n  const fa = P.fa, fc = P.fc;\n  for (let n = 0; n \u003c 26; n++) {\n    const cx = CROWN[n % 5][0] + (rnd() - 0.5) * 16, top = gnd[cl(round(cx), 0, W - 1)];\n    leaf(cx, top + 1 + rnd() * 2.5, (rnd() - 0.5) * 0.9, 2 + rnd() * 1.5, 1 + rnd() * 0.6, LC[floor(rnd() * 6)], (x, y, r, g, b) => {\n      fa[y * W + x] = 1;\n      fc.set([r, g, b], (y * W + x) * 3);\n    });\n  }\n  // Canopy gaps: the shafts one way, the dapple in them the other.\n  for (let n = 0; n \u003c 12; n++) {\n    const c = n * 21.3 + rnd() * 12, w = 2.5 + rnd() * 5, a = 0.5 + rnd() * 0.5;\n    for (let i = 0; i \u003c 256; i++) P.gap[i] = min(1, P.gap[i] + a * Math.exp(-(((((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n  for (let i = 0; i \u003c 128 * 64; i++) P.dap[i] = sm((vn((i & 127) / 7, (i >> 7) / 5) * 0.7 + vn((i & 127) / 3, (i >> 7) / 2.5 + 30) * 0.3 - 0.3) * 2.2);\n  P.anem = [[15, 6], [18, 8], [21, 5], [45, 5], [48, 7], [58, 6]].map(([x, h]) => [x, h, rnd() * 7]);\n  P.mote = Array.from({ length: 16 }, () => [rnd() * 64, rnd() * 110, rnd() * 7]);\n}\n\nlet BUF;\nfunction px(x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\n// A soft dot over four LEDs, so a curve moving a fraction of an LED still moves.\nfunction dot(x, y, r, g, b, a) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n  if (xi \u003c 0 || xi > W - 2 || yi \u003c 0 || yi > H - 2) {\n    px(xi, yi, r, g, b, a * (1 - fx) * (1 - fy));\n    px(xi + 1, yi, r, g, b, a * fx * (1 - fy));\n    px(xi, yi + 1, r, g, b, a * (1 - fx) * fy);\n    return px(xi + 1, yi + 1, r, g, b, a * fx * fy);\n  }\n  const B = BUF;\n  for (let k = 0, o = (yi * W + xi) * 3; k \u003c 4; k++) {\n    const w = a * (k & 1 ? fx : 1 - fx) * (k & 2 ? fy : 1 - fy), q = o + (k & 1 ? 3 : 0) + (k & 2 ? W * 3 : 0);\n    if (w > 0.02) (B[q] += (r - B[q]) * w), (B[q + 1] += (g - B[q + 1]) * w), (B[q + 2] += (b - B[q + 2]) * w);\n  }\n}\nfunction disc(x, y, rad, r, g, b, a) {\n  if (rad \u003c 0.75) return dot(x, y, r, g, b, a);\n  for (let yy = floor(y - rad); yy \u003c= y + rad + 1; yy++)\n    for (let xx = floor(x - rad); xx \u003c= x + rad + 1; xx++) {\n      const d2 = (xx - x) ** 2 + (yy - y) ** 2;\n      if (d2 \u003c (rad + 0.5) ** 2) px(xx, yy, r, g, b, a * min(1, rad + 0.5 - sqrt(d2)));\n    }\n}\n\n// Where a slot is in its life now, and the frond's shape from that.\nfunction frondAt(P, S) {\n  const sp = P.sp, T = P.t + S.off, c = floor(T / S.cyc), a = ((T - c * S.cyc) / S.cyc) * CYC;\n  if (a >= EM + UN + HO + FA) return null;\n  const h = (m) => hash(S.j * 13 + m, c + 977), cx = CROWN[S.c][0], dep = S.z;\n  const Lf = (dep > 0.86 ? 104 : 86) * (0.84 + 0.26 * h(1)), x = cx + (h(2) - 0.5) * 2 * sp[25];\n  const stipe = 5 + Lf * 0.05, C0 = Lf * 0.5;\n  let U, C, g = 1, fall = 0, sen = 0, fade = 1;\n  if (a \u003c EM) {\n    const e = a / EM;\n    [g, U, C] = [0, stipe * e, C0 * (0.4 + 0.6 * e)];\n  } else if (a \u003c EM + UN) {\n    g = (a - EM) / UN;\n    [U, C] = [stipe + (Lf - stipe) * g ** 1.25, C0 * (1 - g) ** 0.8];\n  } else {\n    [U, C] = [Lf, 0];\n    const ph = (a - EM - UN - HO) / FA;\n    // It yellows and browns where it stands, then folds down onto the litter and fades into it.\n    if (ph > 0) [fall, sen, fade] = [sm((ph - 0.3) / 0.55), sm(ph * 2), 1 - sm((ph - 0.7) / 0.3)];\n  }\n  const lean = sp[21] * (0.55 + 0.8 * h(3)) * (S.c ? 1.2 : 1);\n  const wind = P.wind * 1.1 + (0.16 + 0.3 * abs(P.wind)) * sin(P.t * 1.3 + S.ph) + 0.1 * sin(P.t * 0.37 + S.c);\n  return {\n    x, y: P.gnd[cl(round(x), 0, W - 1)] + 0.5, o: S.o, th0: S.o * (lean + 1.5 * fall), L: U + C, f: U, Lf, dep, g, fall, sen, fade, wind,\n    k: sp[23] * (0.9 + 0.2 * h(4)), arch: sp[22] * (0.7 + 0.5 * h(5)) * sm(g * 1.3 - 0.1) * (1 + 0.6 * fall),\n    hp: a \u003c EM + UN ? 0 : min(1, (a - EM - UN) / HO), seed: S.j * 31 + c, hv: h(6) * 2 - 1,\n  };\n}\n\n// A frond's colours are c * ta + tb: browning as it dies, darker and hazier further back.\nfunction tint(F) {\n  const s = F.sen, k = 0.48 + 0.52 * F.dep, z = (1 - F.dep) * 0.5;\n  F.ta = (s \u003c 0.5 ? 1 - s * 2 : 0) * k * (1 - z);\n  F.tb = HAZE.map((hz, i) => (s \u003c 0.5 ? s * 2 * SEN[0][i] : mix(SEN[0][i], SEN[1][i], s * 2 - 1)) * k * (1 - z) + hz * z);\n}\n\n// One pinna: straight for the share that has opened, then its own little spiral.\nfunction pinna(x, y, th, len, q, sd, r, g, b, a, lobe) {\n  const st = 0.75, open = len * q, n = ceil(len / st);\n  for (let j = 1; j \u003c= n; j++) {\n    const s = j * st, w = s > open ? sm((s - open) / 1.5) : 0;\n    th -= sd * (w / (0.2 * (len - s) + 0.5) + 0.03) * st;\n    x += sin(th) * st;\n    y -= cos(th) * st;\n    px(round(x), round(y), r, g, b, a);\n    // Pinnules: a lobe either side in turn, gone towards the tip.\n    if (j & 1 && w \u003c 0.5 && s \u003c len * lobe) {\n      const e = j & 2 ? sd : -sd;\n      px(round(x - e * cos(th)), round(y - e * sin(th)), r * 0.8, g * 0.85, b * 0.8, a * 0.55);\n    }\n  }\n}\n\nfunction frond(P, F, vis) {\n  const sp = P.sp, ds = 0.5, n = min(MAXS - 1, ceil(F.L / ds)), sig = -F.o, a0 = F.fade * vis;\n  tint(F);\n  const { ta, tb } = F, fr = sp[12] * ta + tb[0], fg = sp[13] * ta + tb[1], fb = sp[14] * ta + tb[2];\n  let x = F.x, y = F.y, th = F.th0;\n  // The rachis: a log spiral above the unrolling front, whose curl relaxes to an arch below it.\n  for (let i = 0; i \u003c= n; i++) {\n    const s = i * ds, u = s / F.L, w = s > F.f ? sm((s - F.f) / 5) : 0;\n    (RX[i] = x), (RY[i] = y), (RT[i] = th), (RW[i] = w);\n    th += ((w * sig) / (F.k * (F.L - s) + 0.7) + (1 - w) * ((F.o * F.arch * 5 * u * u * u * u) / F.L + (F.wind * 2 * u * cos(th)) / F.L)) * ds;\n    x += sin(th) * ds;\n    y -= cos(th) * ds;\n    const gy = P.gnd[cl(round(x), 0, W - 1)] + 1;\n    if (y > gy) y = gy;\n  }\n  // Pinnae, the ones nearest the coil still curled.\n  const sb = F.L * sp[18], np = max(4, round((F.Lf * (1 - sp[18])) / 3.8)), Pm = sp[19] * F.Lf, D = 0.24 * F.Lf, al = sp[27], lobe = 0.75;\n  for (let i = 0; i \u003c np; i++) {\n    const u = (i + 0.5) / np, s = sb + (F.L - sb) * u;\n    if (s > F.f - 0.5) break;\n    const q = cl((F.f - s) / D, 0, 1), ii = round(s / ds), bu = sp[20];\n    const shape = u \u003c bu ? 0.1 + 0.9 * sin(((PI / 2) * u) / bu) : 0.06 + 0.94 * cos(((PI / 2) * (u - bu)) / (1 - bu)) ** 0.7;\n    const len = Pm * shape * (0.55 + 0.45 * q) * (1 - 0.3 * F.fall), m = cl(((F.f - s) / F.Lf) * 0.8 + (F.hp * 1.2) / sp[28], 0, 1);\n    // No two fronds quite the same green: some yellower, some bluer.\n    const r = mix(sp[0], sp[3], m) * ta * (1 + 0.22 * F.hv) + tb[0], g = mix(sp[1], sp[4], m) * ta + tb[1], b = mix(sp[2], sp[5], m) * ta * (1 - 0.3 * F.hv) + tb[2];\n    for (let sd = -1; sd \u003c 2; sd += 2) pinna(RX[ii], RY[ii], RT[ii] + sd * al * (0.45 + 0.55 * q), len, q, sd, r, g, b, a0, lobe);\n  }\n  // Rachis over them, swelling into the furred coil.\n  const rw = 0.45 + 0.35 * F.dep;\n  for (let i = 0; i \u003c= n; i++) {\n    const s = i * ds, u = s / F.L, w = RW[i], base = sm(1 - s / 10);\n    // The stalk is thin enough to draw every other step; the coil needs them all.\n    if (i & 1 && w === 0 && s \u003c F.f - 6) continue;\n    const rad = mix(rw * (1 - 0.6 * u), cl(0.17 * (F.k * (F.L - s) + 0.7), 0.5, 1.25), w);\n    const r = mix(mix(sp[6], sp[9], w), 96, base) * ta + tb[0], g = mix(mix(sp[7], sp[10], w), 70, base) * ta + tb[1], b = mix(mix(sp[8], sp[11], w), 40, base) * ta + tb[2];\n    disc(RX[i], RY[i], rad, r, g, b, a0);\n    // The scroll catches the light on its upper side.\n    if (w > 0.5 && i & 1) dot(RX[i] - rad * 0.35, RY[i] - rad * 0.5, r * 1.35 + 20, g * 1.3 + 16, b * 1.2 + 6, a0 * 0.45);\n    const ti = round((F.L - s) / ds);\n    if ((w > 0.1 || s > F.f - 6) && F.g \u003c 1 && hash(ti, F.seed) \u003c sp[24] * 0.9) {\n      const fo = -sig * (rad + 0.5 + hash(ti + 7, F.seed) * 0.9);\n      dot(RX[i] + cos(RT[i]) * fo, RY[i] + sin(RT[i]) * fo, fr, fg, fb, a0 * 0.85);\n    }\n  }\n}\n\n// Last year's fertile fronds stand stiff in the middle of a crown.\nfunction fertile(P, cx, dep) {\n  const sp = P.sp, hh = sp[26] * dep;\n  if (hh \u003c 3) return;\n  for (let m = 0; m \u003c 2; m++) {\n    let x = cx + (m ? 1.2 : -1), y = P.gnd[round(cx)] + 1, th = (m ? 0.1 : -0.12) + P.wind * 0.04;\n    const k = 0.5 + 0.5 * dep, hm = hh * (m ? 1 : 0.82);\n    for (let s = 0; s \u003c hm; s += 0.6) {\n      x += sin(th) * 0.6;\n      y -= cos(th) * 0.6;\n      dot(x, y, sp[15] * k * 0.7, sp[16] * k * 0.7, sp[17] * k * 0.7, 0.9);\n      if (s > hm * 0.3 && floor(s / 1.2) & 1) {\n        const lw = 0.7 + 1.4 * (1 - s / hm);\n        for (const sd of [-1, 1]) dot(x + sd * lw, y + 0.4, sp[15] * k, sp[16] * k, sp[17] * k, 0.85);\n      }\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { bg: new Float32Array(N * 3), buf: new Float32Array(N * 3), fa: new Uint8Array(N), fc: new Float32Array(N * 3), gnd: new Float32Array(W), gap: new Float32Array(256), dap: new Float32Array(128 * 64), hole: new Float32Array(18 * W), vis: new Float32Array(18), t: 0, off: 0, doff: 0, kf: -1, sn: 40, sp: FERNS[0] });\n  build(P);\n  P.slots = SLOT.map((c, j) => {\n    const cyc = CYC * (0.92 + 0.16 * rnd());\n    return { j, c, o: LEAN[j], cyc, off: OPEN[j] * cyc - 8, ph: rnd() * 7, z: CROWN[c][1] - rnd() * 0.14 };\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06], d0 = cl(dt, 0, 0.1);\n  const kf = cl(k[0], 0, 3), rate = cl(k[1], 0.2, 3) / 2, n = round(cl(k[2], 6, 18)), wind = cl(k[3], -1, 1);\n  if (kf !== P.kf) {\n    // Each fern holds over most of its stretch of the knob and turns into the next near the middle.\n    const i = min(2, floor(kf)), f = sm((kf - i) * 2.5 - 0.75);\n    P.sp = FERNS[i].map((v, c) => mix(v, FERNS[i + 1][c], f));\n    P.kf = kf;\n  }\n  // The world clock starts further in the faster the time-lapse runs.\n  if (!P.t) {\n    P.t = 6 * rate;\n    for (let j = 0; j \u003c n; j++) P.vis[j] = 1;\n  }\n  const d = d0 * rate;\n  P.t += d;\n  P.wind = wind;\n  // The sun crosses and the canopy sways: the shafts slide, the dapple shivers.\n  P.off += d * (2.2 + 9 * abs(wind)) * (wind \u003c -0.05 ? -1 : 1);\n  P.doff = P.t * (1 + 6 * abs(wind)) * (wind \u003c -0.05 ? 1 : -1) + 2 * sin(P.t * 1.7);\n  for (let j = 0; j \u003c 18; j++) P.vis[j] = cl(P.vis[j] + (j \u003c n ? 2 : -2) * d0, 0, 1);\n  P.sn += d * 1.4 * (wind \u003c -0.05 ? -1 : 1);\n  if (P.sn > 70) P.sn = -12;\n  if (P.sn \u003c -12) P.sn = 70;\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, gnd, fa, fc } = P;\n  BUF = buf;\n  buf.set(P.bg);\n  const on = [0, 0, 0, 0, 0];\n  for (const S of P.slots) if (P.vis[S.j] > 0) on[S.c] = 1;\n  for (let c = 4; c >= 0; c--) if (on[c]) fertile(P, CROWN[c][0], CROWN[c][1]);\n  // Open fronds first, so the croziers coming up in the middle of a crown stay in sight.\n  const fr = [];\n  for (const S of P.slots) {\n    const F = P.vis[S.j] > 0 && frondAt(P, S);\n    if (F) (F.vis = P.vis[S.j]), (F.key = S.z + (F.g \u003c 1) * 0.3 - F.fall * 0.2), fr.push(F);\n  }\n  for (const F of fr.sort((a, b) => a.key - b.key)) frond(P, F, F.vis);\n  for (let p = 100 * W, o = p * 3; p \u003c N; p++, o += 3) if (fa[p]) (buf[o] = fc[o]), (buf[o + 1] = fc[o + 1]), (buf[o + 2] = fc[o + 2]);\n  // Wood anemones nodding in the breeze.\n  for (const [ax, ah, ph] of P.anem) {\n    const sw = P.wind * 1.6 + 0.5 * sin(P.t * 1.6 + ph);\n    let x = ax, y = round(gnd[ax]) + 1;\n    for (let j = 0; j \u003c ah; j++) {\n      (x += (sw * j) / ah / ah), y--, px(round(x), y, 70, 110, 44, 1);\n      // The ruff of three cut leaves halfway up the stalk.\n      if (j === 2) for (const dx of [-2, -1, 1, 2]) px(round(x) + dx, y + (abs(dx) > 1), 58, 112, 40, 0.9);\n    }\n    const fx = round(x + sw * 0.4), fy = y - 1;\n    for (const [dx, dy, l] of [[0, 0, 1], [-1, 0, 0.9], [1, 0, 0.9], [0, -1, 0.85], [-1, -1, 0.5], [1, -1, 0.5], [0, 1, 0.6]]) px(fx + dx, fy + dy, 236 * l, 236 * l, 226 * l, 1);\n    px(fx, fy, 240, 210, 70, 1);\n  }\n  // The snail, quick in the time-lapse.\n  const sx = round(P.sn), sy = round(gnd[cl(sx + 4, 0, W - 1)]) - 4, f = P.wind \u003c -0.05 ? -1 : 1;\n  SNAIL.forEach((row, r) => {\n    for (let c = 0; c \u003c 10; c++) {\n      const col = SNC[row[c]];\n      if (col) px(f > 0 ? sx + c : sx + 9 - c, sy + r, col[0], col[1], col[2], 1);\n    }\n  });\n  // Motes in the shafts.\n  for (const [mx, my, ph] of P.mote) {\n    const x = (((mx + P.t * 0.7 + 3 * sin(P.t * 0.3 + ph)) % 64) + 64) % 64, y = (my + 110 - ((P.t * 1.1 + ph * 9) % 110)) % 110;\n    const l = P.gap[floor(x + y * 0.42 - P.off) & 255];\n    if (l > 0.3) dot(x, y, 255, 236, 180, l * 0.6);\n  }\n  show(display, P);\n}\n\n// To the panel, under the light that gets through the canopy.\nfunction show(display, { buf, gap, dap, off, doff, hole }) {\n  const o0 = floor(doff);\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    const hz = 0.5 * (1 - y / 150), dr = ((y >> 1) & 63) * 128;\n    for (let x = 0; x \u003c W; x++, p++) {\n      const u = x + y * 0.42 - off, ui = floor(u), f = u - ui, s = gap[ui & 255] * (1 - f) + gap[(ui + 1) & 255] * f;\n      const l = s * (0.4 + 0.6 * dap[dr + ((x + o0) & 127)]), m = 0.78 + 0.75 * l, o = p * 3, sky = y \u003c 18 ? hole[p] * (0.25 + s) * 150 : 0;\n      const r = buf[o] * m * (1 + 0.08 * l) + 34 * s * hz + sky, g = buf[o + 1] * m + 30 * s * hz + sky * 1.08, b = buf[o + 2] * m * (1 - 0.1 * l) + 16 * s * hz + sky * 0.9;\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n  }\n}\n","layer":{"id":"layer-fiddlehead","type":"code","name":"fiddlehead","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Fiddlehead\n// Family:  growth\n// Idea:    A spring time-lapse on a woodland floor: furred fern croziers push up through last year's leaves and unroll from the bottom up into tall arching fronds, each side leaflet uncurling from its own little spiral, while old fronds brown and fall back and light through the canopy slides over them.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after time-lapse films of ostrich fern croziers unrolling in spring\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Fern=0..3, Speed=0.2..3, Fronds=6..18, Breeze=-1..1\n//\n// Knob 1: Fern. Ostrich fern at 0, a shuttlecock of bright green round last year's brown fertile fronds; cinnamon fern at 1 with white-woolly croziers; bracken at 2, broad blades tipped flat on tall stalks; autumn fern at 3, whose new fronds come up copper-red and green as they age.\n// Knob 2: Speed. How fast the time-lapse runs: at 2 a crozier takes about thirteen seconds to unroll and a frond lives about half a minute; at 0.2 it creeps.\n// Knob 3: Fronds. How many fronds there are, six in one crown at 6, then a crown either side, then two more crowns further back in the shade at 18.\n// Knob 4: Breeze. Near still at 0.06; turned either way the fronds lean and sway that way and the sunflecks from the canopy slide across faster.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Each fern: young leaf, grown leaf, rachis, crozier, fur, fertile frond (rgb), then the\n// share of stalk below the blade, pinna length, where the blade is widest, lean, arch,\n// coil tightness, fur, how far a crown spreads, fertile frond height, pinna angle, and\n// how slowly the young colour greens.\nconst FERNS = [\n  [160, 226, 70, 44, 150, 48, 104, 164, 60, 104, 178, 58, 196, 140, 84, 92, 58, 36, 0.2, 0.13, 0.62, 0.3, 1.5, 0.15, 0.5, 4, 30, 1.05, 0.5],\n  [184, 220, 100, 92, 178, 58, 150, 176, 96, 140, 150, 110, 236, 226, 210, 200, 106, 40, 0.3, 0.12, 0.45, 0.17, 0.9, 0.17, 1, 2.5, 40, 1.15, 0.5],\n  [130, 184, 80, 44, 124, 70, 128, 156, 84, 90, 122, 60, 190, 178, 156, 0, 0, 0, 0.46, 0.2, 0.04, 0.08, 1.6, 0.11, 0.7, 9, 0, 1.2, 0.5],\n  [238, 108, 50, 66, 140, 54, 164, 96, 54, 130, 62, 34, 64, 40, 28, 0, 0, 0, 0.26, 0.15, 0.3, 0.28, 1.15, 0.15, 0.8, 2, 0, 1.0, 1.4],\n];\n// A frond's life in world seconds at Speed 2: coming up, unrolling, standing, falling, gone.\nconst [EM, UN, HO, FA, GP] = [2, 13, 7, 4, 1];\nconst CYC = EM + UN + HO + FA + GP;\n// Crowns as x and depth, and which crown each slot belongs to in the order Fronds adds them.\nconst CROWN = [[32, 1], [10, 0.93], [54, 0.93], [21, 0.72], [43, 0.72]];\nconst SLOT = [0, 0, 0, 0, 0, 0, 1, 2, 1, 2, 1, 2, 3, 4, 3, 4, 3, 4];\n// Which way each slot leans: the side crowns lean in over the middle, mostly.\nconst LEAN = [-1, 1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, -1, 1, 1, -1, -1, 1];\n// Where in its life each frond is at 2 s: the front crown has one of each, the others are\n// mostly up, so turning Fronds at the start shows.\nconst OPEN = [0.02, 0.146, 0.267, 0.41, 0.59, 0.7, 0.62, 0.45, 0.7, 0.3, 0.76, 0.52, 0.65, 0.4, 0.58, 0.3, 0.72, 0.5];\nconst SEN = [[204, 176, 64], [132, 74, 36]];\nconst HAZE = [34, 52, 44];\nconst MAXS = 340;\n// A snail on the litter, facing right: shell light and dark, body, eye stalks.\nconst SNAIL = [\"..sss.....\", \".sSSSs.t.t\", \".sSsSs..bB\", \".sSssBBBBB\", \"bBBBBBBBBb\"];\nconst SNC = { S: [176, 128, 70], s: [96, 62, 34], B: [150, 140, 118], b: [110, 100, 86], t: [70, 62, 54] };\nconst RX = new Float32Array(MAXS), RY = new Float32Array(MAXS), RT = new Float32Array(MAXS), RW = new Float32Array(MAXS);\n\nfunction build(P) {\n  const { bg, gnd } = P;\n  for (let x = 0; x \u003c W; x++) gnd[x] = 110 + 3 * vn(x * 0.11, 5.5) + 1.6 * vn(x * 0.37, 2.2);\n  // The wood behind: dark under the canopy, hazier and warmer near the floor.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, v = cl(y / 112, 0, 1) ** 1.6, f = vn(x * 0.09, y * 0.06) * 0.6 + vn(x * 0.27, y * 0.19) * 0.4;\n    const k = 0.72 + 0.55 * f;\n    bg.set([mix(20, 44, v) * k, mix(40, 54, v) * k, mix(38, 38, v) * k], p * 3);\n  }\n  // Beech trunks, smooth and grey, lit from the right; the far ones go into the haze.\n  for (const [tx, tw, z] of [[3, 8, 1], [47, 4.5, 0.62], [60, 3, 0.45]])\n    for (let y = 0; y \u003c 116; y++)\n      for (let x = floor(tx - tw / 2); x \u003c= tx + tw / 2; x++) {\n        if (x \u003c 0 || x >= W || y > gnd[x] + 1) continue;\n        const n = (x - tx) / (tw / 2), l = (0.55 + 0.4 * n) * (0.85 + 0.25 * vn(x * 0.8, y * 0.05)) * (y > gnd[x] - 8 ? 0.8 : 1);\n        const moss = y > gnd[x] - 6 - 4 * vn(x, 9) ? 1 : 0, o = (y * W + x) * 3;\n        const c = moss ? [52, 92, 34] : [84, 86, 78];\n        for (let i = 0; i \u003c 3; i++) bg[o + i] = mix(bg[o + i], mix(c[i] * l, HAZE[i], 1 - z), 0.9);\n      }\n  // The canopy overhead, with holes the shafts come through.\n  for (let p = 0; p \u003c 18 * W; p++) {\n    const x = p & 63, y = p >> 6, h = sm((vn(x / 4, y / 3 + 50) * 0.7 + vn(x / 1.7, y / 1.4 + 70) * 0.3 - 0.52) * 5), a = (1 - h) * sm((17 - y - 7 * vn(x / 5, 3.3)) / 4), k = 0.6 + 0.7 * vn(x / 1.6, y / 1.3);\n    P.hole[p] = h * (1 - y / 18);\n    for (let i = 0; i \u003c 3; i++) bg[p * 3 + i] = mix(bg[p * 3 + i], [16, 34, 20][i] * k, a);\n  }\n  // Last year's leaves: beech copper, oak brown, pale skeletons and dark wet ones.\n  const LC = [[124, 76, 40], [98, 62, 34], [140, 110, 74], [66, 44, 30], [96, 84, 70], [130, 90, 48]];\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, d = y - gnd[x];\n    if (d >= 0) bg.set([44 - d * 0.6, 28 - d * 0.4, 18 - d * 0.2], p * 3);\n  }\n  const leaf = (cx, cy, a, rx, ry, c, put) => {\n    const ca = cos(a), sa = sin(a), t = 0.8 + rnd() * 0.35;\n    for (let y = floor(cy - rx); y \u003c= cy + rx; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const dx = x - cx, dy = y - cy, u = (dx * ca + dy * sa) / rx, v = (-dx * sa + dy * ca) / ry, r = u * u + v * v * (1 + 0.6 * u);\n        if (r > 1 || x \u003c 0 || x >= W || y >= H) continue;\n        const k = t * (abs(v) \u003c 0.22 && abs(u) \u003c 0.85 ? 0.7 : r > 0.65 ? 0.78 : 1) * (1 + 0.15 * u);\n        put(x, y, c[0] * k, c[1] * k, c[2] * k);\n      }\n  };\n  const putBg = (x, y, r, g, b) => y >= gnd[x] - 1 && bg.set([r, g, b], (y * W + x) * 3);\n  for (let n = 0; n \u003c 170; n++) {\n    const cx = rnd() * 68 - 2, top = gnd[cl(round(cx), 0, W - 1)];\n    leaf(cx, top + rnd() * (H - top + 2) - 0.5, rnd() * PI, 2 + rnd() * 1.8, 1.1 + rnd() * 0.8, LC[floor(rnd() * 6)], putBg);\n  }\n  // Moss cushions and twigs.\n  for (let n = 0; n \u003c 7; n++) {\n    const cx = rnd() * 64, cy = gnd[floor(cx)] + 2 + rnd() * 12, r = 1.5 + rnd() * 2.5;\n    for (let y = floor(cy - r); y \u003c= cy + r; y++)\n      for (let x = floor(cx - r); x \u003c= cx + r; x++)\n        if (x >= 0 && x \u003c W && y \u003c H && hypot(x - cx, (y - cy) * 1.4) \u003c r && hash(x, y) \u003c 0.85) {\n          const k = 0.7 + 0.5 * hash(y, x);\n          bg.set([50 * k, 104 * k, 36 * k], (y * W + x) * 3);\n        }\n  }\n  for (let n = 0; n \u003c 7; n++) {\n    let x = rnd() * 64, y = gnd[floor(x)] + 1 + rnd() * 14;\n    const a = (rnd() - 0.5) * 0.8, dir = rnd() \u003c 0.5 ? -1 : 1;\n    for (let i = 0, len = 6 + rnd() * 12; i \u003c len; i++, x += dir * cos(a), y += sin(a)) {\n      const xi = round(x), yi = round(y);\n      if (xi >= 0 && xi \u003c W && yi \u003c H) bg.set([62, 46, 36], (yi * W + xi) * 3);\n    }\n  }\n  // Last year's fronds, flattened and rusty on top of the leaves.\n  for (const [sx, dir, len] of [[6, 1, 24], [58, -1, 20], [36, -1, 16]]) {\n    for (let i = 0; i \u003c len; i++) {\n      const x = sx + dir * i, y = round(gnd[cl(x, 0, W - 1)] + 2 + i * 0.12);\n      if (x \u003c 0 || x >= W) continue;\n      bg.set([96, 58, 32], (y * W + x) * 3);\n      if (i % 2 && i \u003c len - 2) for (const s of [-1, 1]) for (let j = 1; j \u003c 4 - i / len * 2; j++) {\n        const px = x + dir * j * 0.6, py = y + s * j;\n        if (px >= 0 && px \u003c W && py \u003c H) bg.set([124, 72, 36], (round(py) * W + round(px)) * 3);\n      }\n    }\n  }\n  // Leaves in front of the crowns, laid over the stalks where they come out.\n  const fa = P.fa, fc = P.fc;\n  for (let n = 0; n \u003c 26; n++) {\n    const cx = CROWN[n % 5][0] + (rnd() - 0.5) * 16, top = gnd[cl(round(cx), 0, W - 1)];\n    leaf(cx, top + 1 + rnd() * 2.5, (rnd() - 0.5) * 0.9, 2 + rnd() * 1.5, 1 + rnd() * 0.6, LC[floor(rnd() * 6)], (x, y, r, g, b) => {\n      fa[y * W + x] = 1;\n      fc.set([r, g, b], (y * W + x) * 3);\n    });\n  }\n  // Canopy gaps: the shafts one way, the dapple in them the other.\n  for (let n = 0; n \u003c 12; n++) {\n    const c = n * 21.3 + rnd() * 12, w = 2.5 + rnd() * 5, a = 0.5 + rnd() * 0.5;\n    for (let i = 0; i \u003c 256; i++) P.gap[i] = min(1, P.gap[i] + a * Math.exp(-(((((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n  for (let i = 0; i \u003c 128 * 64; i++) P.dap[i] = sm((vn((i & 127) / 7, (i >> 7) / 5) * 0.7 + vn((i & 127) / 3, (i >> 7) / 2.5 + 30) * 0.3 - 0.3) * 2.2);\n  P.anem = [[15, 6], [18, 8], [21, 5], [45, 5], [48, 7], [58, 6]].map(([x, h]) => [x, h, rnd() * 7]);\n  P.mote = Array.from({ length: 16 }, () => [rnd() * 64, rnd() * 110, rnd() * 7]);\n}\n\nlet BUF;\nfunction px(x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\n// A soft dot over four LEDs, so a curve moving a fraction of an LED still moves.\nfunction dot(x, y, r, g, b, a) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n  if (xi \u003c 0 || xi > W - 2 || yi \u003c 0 || yi > H - 2) {\n    px(xi, yi, r, g, b, a * (1 - fx) * (1 - fy));\n    px(xi + 1, yi, r, g, b, a * fx * (1 - fy));\n    px(xi, yi + 1, r, g, b, a * (1 - fx) * fy);\n    return px(xi + 1, yi + 1, r, g, b, a * fx * fy);\n  }\n  const B = BUF;\n  for (let k = 0, o = (yi * W + xi) * 3; k \u003c 4; k++) {\n    const w = a * (k & 1 ? fx : 1 - fx) * (k & 2 ? fy : 1 - fy), q = o + (k & 1 ? 3 : 0) + (k & 2 ? W * 3 : 0);\n    if (w > 0.02) (B[q] += (r - B[q]) * w), (B[q + 1] += (g - B[q + 1]) * w), (B[q + 2] += (b - B[q + 2]) * w);\n  }\n}\nfunction disc(x, y, rad, r, g, b, a) {\n  if (rad \u003c 0.75) return dot(x, y, r, g, b, a);\n  for (let yy = floor(y - rad); yy \u003c= y + rad + 1; yy++)\n    for (let xx = floor(x - rad); xx \u003c= x + rad + 1; xx++) {\n      const d2 = (xx - x) ** 2 + (yy - y) ** 2;\n      if (d2 \u003c (rad + 0.5) ** 2) px(xx, yy, r, g, b, a * min(1, rad + 0.5 - sqrt(d2)));\n    }\n}\n\n// Where a slot is in its life now, and the frond's shape from that.\nfunction frondAt(P, S) {\n  const sp = P.sp, T = P.t + S.off, c = floor(T / S.cyc), a = ((T - c * S.cyc) / S.cyc) * CYC;\n  if (a >= EM + UN + HO + FA) return null;\n  const h = (m) => hash(S.j * 13 + m, c + 977), cx = CROWN[S.c][0], dep = S.z;\n  const Lf = (dep > 0.86 ? 104 : 86) * (0.84 + 0.26 * h(1)), x = cx + (h(2) - 0.5) * 2 * sp[25];\n  const stipe = 5 + Lf * 0.05, C0 = Lf * 0.5;\n  let U, C, g = 1, fall = 0, sen = 0, fade = 1;\n  if (a \u003c EM) {\n    const e = a / EM;\n    [g, U, C] = [0, stipe * e, C0 * (0.4 + 0.6 * e)];\n  } else if (a \u003c EM + UN) {\n    g = (a - EM) / UN;\n    [U, C] = [stipe + (Lf - stipe) * g ** 1.25, C0 * (1 - g) ** 0.8];\n  } else {\n    [U, C] = [Lf, 0];\n    const ph = (a - EM - UN - HO) / FA;\n    // It yellows and browns where it stands, then folds down onto the litter and fades into it.\n    if (ph > 0) [fall, sen, fade] = [sm((ph - 0.3) / 0.55), sm(ph * 2), 1 - sm((ph - 0.7) / 0.3)];\n  }\n  const lean = sp[21] * (0.55 + 0.8 * h(3)) * (S.c ? 1.2 : 1);\n  const wind = P.wind * 1.1 + (0.16 + 0.3 * abs(P.wind)) * sin(P.t * 1.3 + S.ph) + 0.1 * sin(P.t * 0.37 + S.c);\n  return {\n    x, y: P.gnd[cl(round(x), 0, W - 1)] + 0.5, o: S.o, th0: S.o * (lean + 1.5 * fall), L: U + C, f: U, Lf, dep, g, fall, sen, fade, wind,\n    k: sp[23] * (0.9 + 0.2 * h(4)), arch: sp[22] * (0.7 + 0.5 * h(5)) * sm(g * 1.3 - 0.1) * (1 + 0.6 * fall),\n    hp: a \u003c EM + UN ? 0 : min(1, (a - EM - UN) / HO), seed: S.j * 31 + c, hv: h(6) * 2 - 1,\n  };\n}\n\n// A frond's colours are c * ta + tb: browning as it dies, darker and hazier further back.\nfunction tint(F) {\n  const s = F.sen, k = 0.48 + 0.52 * F.dep, z = (1 - F.dep) * 0.5;\n  F.ta = (s \u003c 0.5 ? 1 - s * 2 : 0) * k * (1 - z);\n  F.tb = HAZE.map((hz, i) => (s \u003c 0.5 ? s * 2 * SEN[0][i] : mix(SEN[0][i], SEN[1][i], s * 2 - 1)) * k * (1 - z) + hz * z);\n}\n\n// One pinna: straight for the share that has opened, then its own little spiral.\nfunction pinna(x, y, th, len, q, sd, r, g, b, a, lobe) {\n  const st = 0.75, open = len * q, n = ceil(len / st);\n  for (let j = 1; j \u003c= n; j++) {\n    const s = j * st, w = s > open ? sm((s - open) / 1.5) : 0;\n    th -= sd * (w / (0.2 * (len - s) + 0.5) + 0.03) * st;\n    x += sin(th) * st;\n    y -= cos(th) * st;\n    px(round(x), round(y), r, g, b, a);\n    // Pinnules: a lobe either side in turn, gone towards the tip.\n    if (j & 1 && w \u003c 0.5 && s \u003c len * lobe) {\n      const e = j & 2 ? sd : -sd;\n      px(round(x - e * cos(th)), round(y - e * sin(th)), r * 0.8, g * 0.85, b * 0.8, a * 0.55);\n    }\n  }\n}\n\nfunction frond(P, F, vis) {\n  const sp = P.sp, ds = 0.5, n = min(MAXS - 1, ceil(F.L / ds)), sig = -F.o, a0 = F.fade * vis;\n  tint(F);\n  const { ta, tb } = F, fr = sp[12] * ta + tb[0], fg = sp[13] * ta + tb[1], fb = sp[14] * ta + tb[2];\n  let x = F.x, y = F.y, th = F.th0;\n  // The rachis: a log spiral above the unrolling front, whose curl relaxes to an arch below it.\n  for (let i = 0; i \u003c= n; i++) {\n    const s = i * ds, u = s / F.L, w = s > F.f ? sm((s - F.f) / 5) : 0;\n    (RX[i] = x), (RY[i] = y), (RT[i] = th), (RW[i] = w);\n    th += ((w * sig) / (F.k * (F.L - s) + 0.7) + (1 - w) * ((F.o * F.arch * 5 * u * u * u * u) / F.L + (F.wind * 2 * u * cos(th)) / F.L)) * ds;\n    x += sin(th) * ds;\n    y -= cos(th) * ds;\n    const gy = P.gnd[cl(round(x), 0, W - 1)] + 1;\n    if (y > gy) y = gy;\n  }\n  // Pinnae, the ones nearest the coil still curled.\n  const sb = F.L * sp[18], np = max(4, round((F.Lf * (1 - sp[18])) / 3.8)), Pm = sp[19] * F.Lf, D = 0.24 * F.Lf, al = sp[27], lobe = 0.75;\n  for (let i = 0; i \u003c np; i++) {\n    const u = (i + 0.5) / np, s = sb + (F.L - sb) * u;\n    if (s > F.f - 0.5) break;\n    const q = cl((F.f - s) / D, 0, 1), ii = round(s / ds), bu = sp[20];\n    const shape = u \u003c bu ? 0.1 + 0.9 * sin(((PI / 2) * u) / bu) : 0.06 + 0.94 * cos(((PI / 2) * (u - bu)) / (1 - bu)) ** 0.7;\n    const len = Pm * shape * (0.55 + 0.45 * q) * (1 - 0.3 * F.fall), m = cl(((F.f - s) / F.Lf) * 0.8 + (F.hp * 1.2) / sp[28], 0, 1);\n    // No two fronds quite the same green: some yellower, some bluer.\n    const r = mix(sp[0], sp[3], m) * ta * (1 + 0.22 * F.hv) + tb[0], g = mix(sp[1], sp[4], m) * ta + tb[1], b = mix(sp[2], sp[5], m) * ta * (1 - 0.3 * F.hv) + tb[2];\n    for (let sd = -1; sd \u003c 2; sd += 2) pinna(RX[ii], RY[ii], RT[ii] + sd * al * (0.45 + 0.55 * q), len, q, sd, r, g, b, a0, lobe);\n  }\n  // Rachis over them, swelling into the furred coil.\n  const rw = 0.45 + 0.35 * F.dep;\n  for (let i = 0; i \u003c= n; i++) {\n    const s = i * ds, u = s / F.L, w = RW[i], base = sm(1 - s / 10);\n    // The stalk is thin enough to draw every other step; the coil needs them all.\n    if (i & 1 && w === 0 && s \u003c F.f - 6) continue;\n    const rad = mix(rw * (1 - 0.6 * u), cl(0.17 * (F.k * (F.L - s) + 0.7), 0.5, 1.25), w);\n    const r = mix(mix(sp[6], sp[9], w), 96, base) * ta + tb[0], g = mix(mix(sp[7], sp[10], w), 70, base) * ta + tb[1], b = mix(mix(sp[8], sp[11], w), 40, base) * ta + tb[2];\n    disc(RX[i], RY[i], rad, r, g, b, a0);\n    // The scroll catches the light on its upper side.\n    if (w > 0.5 && i & 1) dot(RX[i] - rad * 0.35, RY[i] - rad * 0.5, r * 1.35 + 20, g * 1.3 + 16, b * 1.2 + 6, a0 * 0.45);\n    const ti = round((F.L - s) / ds);\n    if ((w > 0.1 || s > F.f - 6) && F.g \u003c 1 && hash(ti, F.seed) \u003c sp[24] * 0.9) {\n      const fo = -sig * (rad + 0.5 + hash(ti + 7, F.seed) * 0.9);\n      dot(RX[i] + cos(RT[i]) * fo, RY[i] + sin(RT[i]) * fo, fr, fg, fb, a0 * 0.85);\n    }\n  }\n}\n\n// Last year's fertile fronds stand stiff in the middle of a crown.\nfunction fertile(P, cx, dep) {\n  const sp = P.sp, hh = sp[26] * dep;\n  if (hh \u003c 3) return;\n  for (let m = 0; m \u003c 2; m++) {\n    let x = cx + (m ? 1.2 : -1), y = P.gnd[round(cx)] + 1, th = (m ? 0.1 : -0.12) + P.wind * 0.04;\n    const k = 0.5 + 0.5 * dep, hm = hh * (m ? 1 : 0.82);\n    for (let s = 0; s \u003c hm; s += 0.6) {\n      x += sin(th) * 0.6;\n      y -= cos(th) * 0.6;\n      dot(x, y, sp[15] * k * 0.7, sp[16] * k * 0.7, sp[17] * k * 0.7, 0.9);\n      if (s > hm * 0.3 && floor(s / 1.2) & 1) {\n        const lw = 0.7 + 1.4 * (1 - s / hm);\n        for (const sd of [-1, 1]) dot(x + sd * lw, y + 0.4, sp[15] * k, sp[16] * k, sp[17] * k, 0.85);\n      }\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { bg: new Float32Array(N * 3), buf: new Float32Array(N * 3), fa: new Uint8Array(N), fc: new Float32Array(N * 3), gnd: new Float32Array(W), gap: new Float32Array(256), dap: new Float32Array(128 * 64), hole: new Float32Array(18 * W), vis: new Float32Array(18), t: 0, off: 0, doff: 0, kf: -1, sn: 40, sp: FERNS[0] });\n  build(P);\n  P.slots = SLOT.map((c, j) => {\n    const cyc = CYC * (0.92 + 0.16 * rnd());\n    return { j, c, o: LEAN[j], cyc, off: OPEN[j] * cyc - 8, ph: rnd() * 7, z: CROWN[c][1] - rnd() * 0.14 };\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06], d0 = cl(dt, 0, 0.1);\n  const kf = cl(k[0], 0, 3), rate = cl(k[1], 0.2, 3) / 2, n = round(cl(k[2], 6, 18)), wind = cl(k[3], -1, 1);\n  if (kf !== P.kf) {\n    // Each fern holds over most of its stretch of the knob and turns into the next near the middle.\n    const i = min(2, floor(kf)), f = sm((kf - i) * 2.5 - 0.75);\n    P.sp = FERNS[i].map((v, c) => mix(v, FERNS[i + 1][c], f));\n    P.kf = kf;\n  }\n  // The world clock starts further in the faster the time-lapse runs.\n  if (!P.t) {\n    P.t = 6 * rate;\n    for (let j = 0; j \u003c n; j++) P.vis[j] = 1;\n  }\n  const d = d0 * rate;\n  P.t += d;\n  P.wind = wind;\n  // The sun crosses and the canopy sways: the shafts slide, the dapple shivers.\n  P.off += d * (2.2 + 9 * abs(wind)) * (wind \u003c -0.05 ? -1 : 1);\n  P.doff = P.t * (1 + 6 * abs(wind)) * (wind \u003c -0.05 ? 1 : -1) + 2 * sin(P.t * 1.7);\n  for (let j = 0; j \u003c 18; j++) P.vis[j] = cl(P.vis[j] + (j \u003c n ? 2 : -2) * d0, 0, 1);\n  P.sn += d * 1.4 * (wind \u003c -0.05 ? -1 : 1);\n  if (P.sn > 70) P.sn = -12;\n  if (P.sn \u003c -12) P.sn = 70;\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, gnd, fa, fc } = P;\n  BUF = buf;\n  buf.set(P.bg);\n  const on = [0, 0, 0, 0, 0];\n  for (const S of P.slots) if (P.vis[S.j] > 0) on[S.c] = 1;\n  for (let c = 4; c >= 0; c--) if (on[c]) fertile(P, CROWN[c][0], CROWN[c][1]);\n  // Open fronds first, so the croziers coming up in the middle of a crown stay in sight.\n  const fr = [];\n  for (const S of P.slots) {\n    const F = P.vis[S.j] > 0 && frondAt(P, S);\n    if (F) (F.vis = P.vis[S.j]), (F.key = S.z + (F.g \u003c 1) * 0.3 - F.fall * 0.2), fr.push(F);\n  }\n  for (const F of fr.sort((a, b) => a.key - b.key)) frond(P, F, F.vis);\n  for (let p = 100 * W, o = p * 3; p \u003c N; p++, o += 3) if (fa[p]) (buf[o] = fc[o]), (buf[o + 1] = fc[o + 1]), (buf[o + 2] = fc[o + 2]);\n  // Wood anemones nodding in the breeze.\n  for (const [ax, ah, ph] of P.anem) {\n    const sw = P.wind * 1.6 + 0.5 * sin(P.t * 1.6 + ph);\n    let x = ax, y = round(gnd[ax]) + 1;\n    for (let j = 0; j \u003c ah; j++) {\n      (x += (sw * j) / ah / ah), y--, px(round(x), y, 70, 110, 44, 1);\n      // The ruff of three cut leaves halfway up the stalk.\n      if (j === 2) for (const dx of [-2, -1, 1, 2]) px(round(x) + dx, y + (abs(dx) > 1), 58, 112, 40, 0.9);\n    }\n    const fx = round(x + sw * 0.4), fy = y - 1;\n    for (const [dx, dy, l] of [[0, 0, 1], [-1, 0, 0.9], [1, 0, 0.9], [0, -1, 0.85], [-1, -1, 0.5], [1, -1, 0.5], [0, 1, 0.6]]) px(fx + dx, fy + dy, 236 * l, 236 * l, 226 * l, 1);\n    px(fx, fy, 240, 210, 70, 1);\n  }\n  // The snail, quick in the time-lapse.\n  const sx = round(P.sn), sy = round(gnd[cl(sx + 4, 0, W - 1)]) - 4, f = P.wind \u003c -0.05 ? -1 : 1;\n  SNAIL.forEach((row, r) => {\n    for (let c = 0; c \u003c 10; c++) {\n      const col = SNC[row[c]];\n      if (col) px(f > 0 ? sx + c : sx + 9 - c, sy + r, col[0], col[1], col[2], 1);\n    }\n  });\n  // Motes in the shafts.\n  for (const [mx, my, ph] of P.mote) {\n    const x = (((mx + P.t * 0.7 + 3 * sin(P.t * 0.3 + ph)) % 64) + 64) % 64, y = (my + 110 - ((P.t * 1.1 + ph * 9) % 110)) % 110;\n    const l = P.gap[floor(x + y * 0.42 - P.off) & 255];\n    if (l > 0.3) dot(x, y, 255, 236, 180, l * 0.6);\n  }\n  show(display, P);\n}\n\n// To the panel, under the light that gets through the canopy.\nfunction show(display, { buf, gap, dap, off, doff, hole }) {\n  const o0 = floor(doff);\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    const hz = 0.5 * (1 - y / 150), dr = ((y >> 1) & 63) * 128;\n    for (let x = 0; x \u003c W; x++, p++) {\n      const u = x + y * 0.42 - off, ui = floor(u), f = u - ui, s = gap[ui & 255] * (1 - f) + gap[(ui + 1) & 255] * f;\n      const l = s * (0.4 + 0.6 * dap[dr + ((x + o0) & 127)]), m = 0.78 + 0.75 * l, o = p * 3, sky = y \u003c 18 ? hole[p] * (0.25 + s) * 150 : 0;\n      const r = buf[o] * m * (1 + 0.08 * l) + 34 * s * hz + sky, g = buf[o + 1] * m + 30 * s * hz + sky * 1.08, b = buf[o + 2] * m * (1 - 0.1 * l) + 16 * s * hz + sky * 0.9;\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Fern=0..3, Speed=0.2..3, Fronds=6..18, Breeze=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Fern","min":0,"max":3,"about":"Ostrich fern at 0, a shuttlecock of bright green round last year's brown fertile fronds; cinnamon fern at 1 with white-woolly croziers; bracken at 2, broad blades tipped flat on tall stalks; autumn fern at 3, whose new fronds come up copper-red and green as they age."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the time-lapse runs: at 2 a crozier takes about thirteen seconds to unroll and a frond lives about half a minute; at 0.2 it creeps."},{"name":"Fronds","min":6,"max":18,"about":"How many fronds there are, six in one crown at 6, then a crown either side, then two more crowns further back in the shade at 18."},{"name":"Breeze","min":-1,"max":1,"about":"Near still at 0.06; turned either way the fronds lean and sway that way and the sunflecks from the canopy slide across faster."}],"start":[0,2,6,0.06],"measures":{"motion":0.2772,"detail":0.0937,"edges":0.4428,"complexity":2.2973,"coverage":0.9858,"colour":0.1938,"drift":0.0784},"knobResponse":[0.0694,0.0969,0.0478,0.0882]},{"slug":"final-approach","title":"Final Approach","family":"flight","round":23,"note":"밤에 내려앉는 여객기 조종석에서 앞을 봐요. 활주로 등과 진입등이 도시 불빛이 깔린 지평선 아래로 모이고, 래빗 섬광등이 1초에 두 번 활주로 쪽으로 달려가요. 왼쪽 PAPI 가 흰 둘 빨강 둘을 보이다가, 플레어와 접지 뒤에는 중심선 등이 발밑으로 쏟아져 지나가요. K1 을 누르면 복행해요.","idea":"From an airliner cockpit on a night landing, the runway and its approach lights converge high on the panel under a town glowing on the horizon, then stream toward the windscreen and under it with the rabbit racing ahead and the PAPI showing two white over two red, through the flare and the rollout, before the next approach begins far out.","buttons":"K1 tap goes around: the nose comes up and the lights drop away below, then the airliner banks off and comes round for a new approach.","code":"// ===== Patternflow pattern =====\n// Title:   Final Approach\n// Family:  flight\n// Idea:    From an airliner cockpit on a night landing, the runway and its approach lights converge high on the panel under a town glowing on the horizon, then stream toward the windscreen and under it with the rabbit racing ahead and the PAPI showing two white over two red, through the flare and the rollout, before the next approach begins far out.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the ALSF-2 approach lighting system\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Glow=0..1, Speed=0.2..3, Weather=0..3, Crosswind=-1..1\n//\n// Knob 1: Glow. The colour of the town's glow on the clouds and of the sodium lamps on the horizon: sodium amber at 0, turning through green and blue to violet and back to amber at 1.\n// Knob 2: Speed. How fast the airliner flies: at 2 an approach from far out to the end of the rollout takes about 18 s and the rabbit runs twice a second; at 0.2 everything runs ten times slower.\n// Knob 3: Weather. A clear night with broken cloud at 0, haze where every light blooms at 1, rain on the windscreen with the wiper going at 2, and fog at 3 where the approach lights come out of the murk late.\n// Knob 4: Crosswind. The airliner crabs into the wind from the left or the right, so the runway sits off to one side until it swings straight ahead at the flare.\n// Buttons: K1 tap goes around: the nose comes up and the lights drop away below, then the airliner banks off and comes round for a new approach.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, sin, cos, exp, sqrt, pow, floor, ceil, round, atan, log, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst rnd = () => Math.random();\n\n// The camera: focal length in LEDs, the screen centre, the eye height on the\n// runway in metres, and the horizon row on the approach.\nconst F = 150;\nconst CX = 31.5;\nconst CY = 64;\nconst HG = 8;\nconst Y0 = 32;\n// A 3 degree glide path comes down to eye height HG 320 m past the\n// threshold. The flare starts 8 m above that, and touchdown is where it ends.\nconst SLOPE = 0.0524;\nconst AIM = 320;\nconst PF = AIM - 8 / SLOPE;\nconst LF = 11 / SLOPE;\nconst TD = PF + LF * log(11 / 3);\n// Cloud base above the ground, and where a new approach starts.\nconst HC = 520;\nconst FAR = -2300;\n// The PAPI units from the runway outward, in degrees.\nconst PT = [3.5, 3.17, 2.83, 2.5];\n\nfunction eyeH(P) {\n  if (P \u003c PF) return HG + (AIM - P) * SLOPE;\n  if (P \u003c TD) return HG + 11 * exp(-(P - PF) / LF) - 3;\n  return HG;\n}\n\n// Kinds of light: steady, the sequenced flashers, the PAPI, city lamps that\n// take the glow colour, red obstruction lights and the airport beacon.\nconst [STEADY, SEQ, PAPI, CITY, OBS, BEAC] = [0, 1, 2, 3, 4, 5];\nconst WHITE = [1, 0.9, 0.74];\nconst COOL = [0.86, 0.92, 1];\nconst RED = [1, 0.1, 0.04];\nconst GREEN = [0.1, 1, 0.42];\nconst AMBER = [1, 0.7, 0.16];\nconst BLUE = [0.2, 0.32, 1];\n\n// Weather presets the knob runs between: visibility in metres, bloom, blur\n// radius, cloud cover, glow, rain, fog, and light scattered in the air.\nconst WX = [\n  [30000, 0.35, 1, 0.5, 1.0, 0, 0, 0],\n  [5000, 1.0, 2, 0.6, 1.25, 0, 0.22, 0.07],\n  [3000, 0.75, 2, 0.85, 1.35, 1, 0.15, 0.1],\n  [420, 1.5, 3, 1, 1.05, 0, 1, 0.2],\n];\n\n// A fixed tileable value noise, for clouds and grass.\nconst TN = 128;\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nlet TX = null;\nlet TC = null;\nfunction makeTex(oct) {\n  const t = new Float32Array(TN * TN);\n  let amp = 0.5;\n  for (let o = 0; o \u003c oct; o++) {\n    const g = 4 \u003c\u003c o;\n    const c = TN / g;\n    for (let y = 0; y \u003c TN; y++)\n      for (let x = 0; x \u003c TN; x++) {\n        const gx = x / c;\n        const gy = y / c;\n        const x0 = floor(gx);\n        const y0 = floor(gy);\n        let fx = gx - x0;\n        let fy = gy - y0;\n        fx = fx * fx * (3 - 2 * fx);\n        fy = fy * fy * (3 - 2 * fy);\n        const hv = (a, b) => hash(((a % g) * 131 + (b % g)) * 7 + o * 9973);\n        const top = hv(x0, y0) + (hv(x0 + 1, y0) - hv(x0, y0)) * fx;\n        const bot = hv(x0, y0 + 1) + (hv(x0 + 1, y0 + 1) - hv(x0, y0 + 1)) * fx;\n        t[y * TN + x] += amp * (top + (bot - top) * fy);\n      }\n    amp *= 0.5;\n  }\n  let lo = 9;\n  let hi = -9;\n  for (let i = 0; i \u003c t.length; i++) {\n    lo = min(lo, t[i]);\n    hi = max(hi, t[i]);\n  }\n  for (let i = 0; i \u003c t.length; i++) t[i] = (t[i] - lo) / (hi - lo);\n  return t;\n}\nfunction tex(u, v, A = TX) {\n  const x = u * TN;\n  const y = v * TN;\n  const x0 = floor(x);\n  const y0 = floor(y);\n  const fx = x - x0;\n  const fy = y - y0;\n  const a = (x0 & 127) + (y0 & 127) * TN;\n  const b = ((x0 + 1) & 127) + (y0 & 127) * TN;\n  const c = (x0 & 127) + ((y0 + 1) & 127) * TN;\n  const d = ((x0 + 1) & 127) + ((y0 + 1) & 127) * TN;\n  const top = A[a] + (A[b] - A[a]) * fx;\n  return top + (A[c] + (A[d] - A[c]) * fx - top) * fy;\n}\n\n// Every light on the field and in the town. Positions are in metres, with z\n// running along the runway from the threshold.\nfunction build() {\n  const L = [];\n  const add = (x, y, z, k, i, c, n = 0) => L.push([x, y, z, k, i, c[0], c[1], c[2], n]);\n  const both = (fn) => {\n    fn(-1);\n    fn(1);\n  };\n  // ALSF-2: a barrette every 30 m out to 720 m, red side rows on the inner\n  // 300 m, flashers on the outer part, crossbars at 300 m and 150 m.\n  for (let k = 1; k \u003c= 24; k++) {\n    const z = -30 * k;\n    for (let j = -2; j \u003c= 2; j++) add(j * 1.05, 0.6, z, STEADY, 1, WHITE);\n    if (k \u003c= 10) both((sg) => { for (let j = 0; j \u003c 3; j++) add(sg * (11 + j * 1.05), 0.6, z, STEADY, 0.75, RED); });\n    if (k >= 11) add(0, 1.4, z, SEQ, 1, COOL, 24 - k);\n  }\n  both((sg) => { for (let j = 3; j \u003c= 15; j += 1.5) add(sg * j, 0.6, -300, STEADY, 1, WHITE); });\n  both((sg) => { for (let j = 3; j \u003c= 7.5; j += 1.5) add(sg * j, 0.6, -150, STEADY, 1, WHITE); });\n  // The green threshold bar and its wing bars.\n  for (let x = -25; x \u003c= 25.01; x += 1.5) add(x, 0.3, 0, STEADY, 1, GREEN);\n  both((sg) => { for (let j = 26.5; j \u003c= 38; j += 1.5) add(sg * j, 0.3, 0, STEADY, 1, GREEN); });\n  // Runway edge lights turn yellow on the last 600 m. A red bar ends it.\n  for (let z = 0; z \u003c= 3000; z += 60) both((sg) => add(sg * 23.5, 0.4, z, STEADY, 0.85, z > 2400 ? AMBER : WHITE));\n  for (let x = -21; x \u003c= 21; x += 3) add(x, 0.3, 3000, STEADY, 0.8, RED);\n  // Centreline every 15 m, red and white near the far end; touchdown zone bars.\n  for (let z = 7.5; z \u003c 3000; z += 15) {\n    const red = z > 2700 || (z > 2100 && round((z - 7.5) / 15) % 2 === 1);\n    add(0.6, 0.05, z, STEADY, 0.7, red ? RED : COOL);\n  }\n  for (let z = 30; z \u003c= 900; z += 30) both((sg) => { for (let j = 0; j \u003c 3; j++) add(sg * (9.8 + j * 1.5), 0.05, z, STEADY, 0.55, COOL); });\n  for (let j = 0; j \u003c 4; j++) add(-(38.5 + 9 * j), 0.9, AIM, PAPI, 1.6, WHITE, j);\n  // A parallel taxiway on the right with blue edges and green lead-offs.\n  for (let z = -60; z \u003c= 3000; z += 50) both((sg) => add(190 + sg * 11, 0.3, z, STEADY, 0.4, BLUE));\n  for (const z0 of [500, 1300, 2100, 2800]) for (let t = 0; t \u003c= 1; t += 1 / 12) add(26 + 160 * t, 0.1, z0 + 120 * t * t, STEADY, 0.35, GREEN);\n  // The apron floodlights beyond it, and the beacon on the tower.\n  for (let j = 0; j \u003c 12; j++) add(330 + 260 * rnd(), 25, 900 + 1500 * rnd(), CITY, 1.3, WHITE, rnd() \u003c 0.3 ? 0.8 : 0.1);\n  add(300, 35, 1400, BEAC, 1.4, WHITE);\n  // The town: lamps along streets on a 140 m grid that thin out between\n  // districts and climb the hills behind.\n  let n = 0;\n  while (n \u003c 1150) {\n    const z = 3300 + 17000 * pow(rnd(), 1.4);\n    let x = (rnd() * 2 - 1) * 0.45 * z;\n    let zz = z;\n    if (rnd() \u003c 0.55) x = round(x / 140) * 140 + (rnd() - 0.5) * 6;\n    else zz = round(z / 140) * 140 + (rnd() - 0.5) * 6;\n    if (tex(x / 9000 + 0.2, zz / 9000) \u003c 0.35 + 0.25 * rnd()) continue;\n    const hill = max(0, (zz - 7000) / 13000) * 300 * (0.5 + tex(x / 4000, zz / 4000 + 0.5));\n    const white = rnd() \u003c 0.28;\n    add(x, hill + 5 + (rnd() \u003c 0.08 ? rnd() * 90 : 0), zz, CITY, 0.55 + 0.6 * rnd(), WHITE, white ? 0.75 : 0.05);\n    n++;\n  }\n  // Masts and towers in the town with red lights stacked up them.\n  for (let j = 0; j \u003c 7; j++) {\n    const z = 4500 + 9000 * rnd();\n    const x = (rnd() * 2 - 1) * 0.3 * z;\n    const ht = 120 + 220 * rnd();\n    const ph = rnd() * 6;\n    for (let q = 1; q \u003c= 3; q++) add(x, (ht * q) / 3, z, OBS, 1.1, RED, ph);\n  }\n  const A = (j) => Float32Array.from(L, (e) => e[j]);\n  return { lx: A(0), ly: A(1), lz: A(2), lk: A(3), li: A(4), lr: A(5), lg: A(6), lb: A(7), ln: A(8), n: L.length };\n}\n\nfunction cam(s) {\n  return { P: s.P, h: s.h, yh: s.yh, psi: s.psi, roll: s.roll, X: s.Xp };\n}\n\nfunction approach(s, P0) {\n  s.mode = 0;\n  s.P = P0;\n  s.h = eyeH(P0);\n  s.down = false;\n  s.rt = 0;\n  s.age = 0;\n  s.turn = 0;\n  s.fresh = true;\n}\n\nexport function setup(params) {\n  if (!TX) {\n    TX = makeTex(4);\n    TC = makeTex(2);\n  }\n  const F3 = () => new Float32Array(N * 3);\n  params.s = { lt: build(), lb: F3(), bl: F3(), tmp: F3(), o: F3(), tq: 0, drops: [], tw: 0, wa: 0.35, drift: 0 };\n  const s = params.s;\n  // The landing lights are fixed to the airframe, so their pool on the\n  // ground and their glow in the air stay put on the screen.\n  s.bm = new Float32Array(N);\n  s.bs = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const bx = (p % W) - CX;\n    const y = (p / W) | 0;\n    const by = (y - 76) / (y \u003c 76 ? 14 : 36);\n    s.bm[p] = exp(-((bx / 22) ** 2) - by * by);\n    s.bs[p] = exp(-((bx / 26) ** 2) - ((y - 82) / 46) ** 2);\n  }\n  // Open about a kilometre out, so the first look is the approach lights.\n  approach(s, -1000);\n  s.age = 1;\n  s.yh = Y0;\n  s.psi = 0;\n  s.roll = 0;\n  s.Xp = 0;\n  s.v = 150;\n  s.fade = 1;\n  s.c = cam(s);\n  s.pc = s.c;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const s = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  const d = (dt * clamp(k[1], 0.2, 3)) / 2;\n  s.tq += d;\n  s.age += d;\n  const tq = s.tq;\n  // Glow colour: hue rotated from sodium amber.\n  const hue = (0.085 + clamp(k[0], 0, 1)) % 1;\n  s.gc = [0, 0, 0].map((_, c) => {\n    const q = ([5, 3, 1][c] + hue * 6) % 6;\n    return 1 - 0.82 * max(0, min(q, 4 - q, 1));\n  });\n  // Weather, blended between the neighbouring presets.\n  const w = clamp(k[2], 0, 3);\n  const i0 = min(2, floor(w));\n  const f = w - i0;\n  const A = WX[i0];\n  const B = WX[i0 + 1];\n  const lerp = (j) => A[j] + (B[j] - A[j]) * f;\n  s.vis = exp(log(A[0]) + (log(B[0]) - log(A[0])) * f);\n  [s.bloom, s.br, s.cover, s.glowK, s.rain, s.fog, s.scat] = [1, 2, 3, 4, 5, 6, 7].map(lerp);\n  s.br = round(s.br);\n  s.drift += d * 0.02;\n  const cw = clamp(k[3], -1, 1);\n\n  s.pc = s.c;\n  if (input.btnPressed && input.btnPressed[0] && s.mode === 0) {\n    s.mode = 1;\n    s.g = 0;\n    s.gh = s.h;\n    s.gp = s.yh - Y0;\n  }\n  // Turbulence: a little bob and roll in the air, a rumble on the ground.\n  const air = min(1, (s.h - HG) / 25);\n  const bob = air * (0.7 * sin(tq * 1.7) + 0.4 * sin(tq * 4.1 + 1)) + (1 - air) * 0.25 * sin(tq * 31) * (s.v / 150);\n  if (s.mode === 0) {\n    if (!s.down) {\n      s.v = s.P \u003c 0 ? 150 - 0.08 * s.P : 150 - 0.05 * s.P;\n      s.P += s.v * d;\n      if (s.P >= TD) s.down = true;\n      s.h = eyeH(s.P) + (s.P \u003c PF ? 1.6 * sin(tq * 0.43) * min(1, (PF - s.P) / 500) : 0);\n    } else {\n      s.rt += d;\n      s.v = max(16, s.v - 26 * d);\n      s.P += s.v * d;\n      s.h = HG;\n    }\n    // The nose comes up in the flare and down after touchdown.\n    const flare = sstep(PF - 40, TD, s.P);\n    s.yh = Y0 + 5 * flare - 7 * sstep(0, 0.9, s.rt) + bob;\n    s.psi = cw * 0.17 * (1 - sstep(PF - 120, TD - 30, s.P));\n    s.roll = air * (0.022 * sin(tq * 1.1 + 0.5) + cw * 0.02);\n    s.Xp = 2 * sin(tq * 0.31) * air;\n    s.fade = sstep(0, 0.7, s.age) * (1 - sstep(4.3, 5, s.rt));\n    if (s.rt >= 5) approach(s, FAR);\n  } else {\n    // Go around: pitch up and climb, then bank away and come round again.\n    const g = (s.g += d);\n    s.v = min(190, s.v + 12 * d);\n    s.P += s.v * d * cos(s.turn);\n    s.h += 36 * sstep(0.2, 1.3, g) * d;\n    s.yh = Y0 + s.gp + (34 - s.gp) * sstep(0, 1.5, g) + bob;\n    s.roll = -0.45 * sstep(1.8, 2.9, g);\n    s.turn += 0.32 * sstep(1.8, 2.9, g) * d;\n    s.psi += 0.32 * sstep(1.8, 2.9, g) * d;\n    s.fade = 1 - sstep(3.1, 3.9, g);\n    if (g >= 3.9) approach(s, FAR);\n  }\n  s.c = cam(s);\n  if (s.fresh) {\n    s.pc = s.c;\n    s.fresh = false;\n  }\n\n  // Rain on the windscreen, and the wiper that clears it.\n  if (s.rain > 0.3) {\n    const nd = d * 34 * s.rain;\n    for (let j = 0; j \u003c 4; j++) if (rnd() \u003c nd / 4 && s.drops.length \u003c 70) s.drops.push({ x: rnd() * W, y: rnd() * H, r: 0.55 + 0.6 * rnd() });\n    s.tw += d;\n    const wa = -0.12 - 0.8 * (0.5 - 0.5 * cos((2 * PI * s.tw) / 1.5));\n    const lo = min(wa, s.wa);\n    const hi = max(wa, s.wa);\n    s.drops = s.drops.filter((q) => {\n      const a = atan((q.x - 58) / (150 - q.y));\n      return a \u003c lo - 0.03 || a > hi + 0.03;\n    });\n    s.wa = wa;\n  } else {\n    s.wa = 0.35;\n    if (s.drops.length) s.drops.length = 0;\n  }\n}\n\n// Additive light: a sharpened bilinear dot for far lights, a round blob for\n// near ones.\nfunction dot(B, x, y, r, g, b) {\n  const x0 = floor(x);\n  const y0 = floor(y);\n  let fx = x - x0;\n  let fy = y - y0;\n  fx = (fx * fx) / (fx * fx + (1 - fx) * (1 - fx));\n  fy = (fy * fy) / (fy * fy + (1 - fy) * (1 - fy));\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = x0 + (j & 1);\n    const yy = y0 + (j >> 1);\n    if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n    const wgt = (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy);\n    const i = (yy * W + xx) * 3;\n    B[i] += r * wgt;\n    B[i + 1] += g * wgt;\n    B[i + 2] += b * wgt;\n  }\n}\nfunction blob(B, x, y, r, g, b, sg) {\n  const R = min(4, ceil(sg * 2.2));\n  const kk = -1 / (2 * sg * sg);\n  const xa = max(0, ceil(x - R));\n  const xb = min(W - 1, floor(x + R));\n  for (let yy = max(0, ceil(y - R)); yy \u003c= min(H - 1, floor(y + R)); yy++)\n    for (let xx = xa; xx \u003c= xb; xx++) {\n      const wgt = exp(((xx - x) ** 2 + (yy - y) ** 2) * kk);\n      const i = (yy * W + xx) * 3;\n      B[i] += r * wgt;\n      B[i + 1] += g * wgt;\n      B[i + 2] += b * wgt;\n    }\n}\n\nfunction lights(s, B) {\n  const c = s.c;\n  const p = s.pc;\n  const T = s.lt;\n  const sn = sin(c.psi);\n  const cs = cos(c.psi);\n  const sr = sin(c.roll);\n  const cr = cos(c.roll);\n  const psn = sin(p.psi);\n  const pcs = cos(p.psi);\n  const psr = sin(p.roll);\n  const pcr = cos(p.roll);\n  const ext = 3 / s.vis;\n  const gc = s.gc;\n  const tq = s.tq;\n  // The rabbit runs from the outermost flasher to the 300 m bar twice a second.\n  const seq = (tq * 2) % 1;\n  const papiA = (atan((c.h - HG) / max(1, AIM - c.P)) * 180) / PI;\n  const beac = (tq * 0.5) % 1;\n  for (let i = 0; i \u003c T.n; i++) {\n    const dx = T.lx[i] - c.X;\n    const dz = T.lz[i] - c.P;\n    const zc = dx * sn + dz * cs;\n    if (zc \u003c 3) continue;\n    const xc = dx * cs - dz * sn;\n    const ox = (F * xc) / zc;\n    const oy = c.yh - CY + (F * (c.h - T.ly[i])) / zc;\n    const X = CX + ox * cr - oy * sr;\n    const Y = CY + ox * sr + oy * cr;\n    if (X \u003c -5 || X > W + 4 || Y \u003c -5 || Y > H + 4) continue;\n    let a = T.li[i] * min(1.8, pow(600 / zc, 0.62)) * exp(-zc * ext);\n    let r = T.lr[i];\n    let g = T.lg[i];\n    let b = T.lb[i];\n    const k = T.lk[i];\n    const m = T.ln[i];\n    let sg = 0.4 + min(1.7, 40 / zc);\n    if (k === SEQ) {\n      let age = seq - m / 14;\n      if (age \u003c 0) age += 1;\n      const e = exp(-age * 13);\n      a *= 4.5 * e;\n      sg += 1.1 * e;\n    } else if (k === PAPI) {\n      const wa = sstep(-0.07, 0.07, papiA - PT[m]);\n      g = 0.1 + 0.83 * wa;\n      b = 0.04 + 0.72 * wa;\n    } else if (k === CITY) {\n      r = gc[0] + (1 - gc[0]) * m;\n      g = gc[1] + (0.92 - gc[1]) * m;\n      b = gc[2] + (0.8 - gc[2]) * m;\n    } else if (k === OBS) a *= sstep(-0.25, 0.25, sin(tq * 3.3 + m));\n    else if (k === BEAC) {\n      const e = exp(-(((beac % 0.5) / 0.05) ** 2));\n      a *= 2 * e;\n      if (beac \u003c 0.5) [r, g, b] = GREEN;\n    }\n    a *= s.fade * 255;\n    if (a \u003c 3) continue;\n    // A light that crossed the screen fast since the last frame leaves a\n    // fading streak behind it.\n    if (zc \u003c 500) {\n      const pdx = T.lx[i] - p.X;\n      const pdz = T.lz[i] - p.P;\n      const pz = pdx * psn + pdz * pcs;\n      if (pz > 3) {\n        const qx = (F * (pdx * pcs - pdz * psn)) / pz;\n        const qy = p.yh - CY + (F * (p.h - T.ly[i])) / pz;\n        const PX = CX + qx * pcr - qy * psr;\n        const PY = CY + qx * psr + qy * pcr;\n        const ddx = X - PX;\n        const ddy = Y - PY;\n        const len = sqrt(ddx * ddx + ddy * ddy);\n        if (len > 1.5) {\n          const n = min(28, ceil(len));\n          const q = a * max(0.3, 1.4 / len);\n          for (let j = 1; j \u003c n; j++) {\n            const t = j / n;\n            dot(B, PX + ddx * t, PY + ddy * t, q * r * t, q * g * t, q * b * t);\n          }\n        }\n      }\n    }\n    if (sg \u003c 0.75) dot(B, X, Y, a * r, a * g, a * b);\n    else blob(B, X, Y, a * r, a * g, a * b, sg);\n    // On a wet runway each light lays a streak toward the windscreen.\n    if (s.rain > 0.05 && T.ly[i] \u003c 1.5 && T.lz[i] > -760) {\n      const ls = min(10, round(s.rain * (2 + 0.12 * (Y - c.yh))));\n      for (let j = 1; j \u003c= ls; j++) {\n        const q = a * 0.3 * s.rain * (1 - j / (ls + 1));\n        dot(B, X, Y + j, q * r, q * g, q * b);\n      }\n    }\n  }\n}\n\n// Box blur, horizontal then vertical, for the bloom.\nfunction blur(src, dst, tmp, r) {\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const o = y * W * 3 + ch;\n      let acc = 0;\n      for (let x = -r; x \u003c= r; x++) acc += src[o + clamp(x, 0, W - 1) * 3];\n      for (let x = 0; x \u003c W; x++) {\n        tmp[o + x * 3] = acc * inv;\n        acc += src[o + min(W - 1, x + r + 1) * 3] - src[o + max(0, x - r) * 3];\n      }\n    }\n  for (let x = 0; x \u003c W; x++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const o = x * 3 + ch;\n      let acc = 0;\n      for (let y = -r; y \u003c= r; y++) acc += tmp[o + clamp(y, 0, H - 1) * W * 3];\n      for (let y = 0; y \u003c H; y++) {\n        dst[o + y * W * 3] = acc * inv;\n        acc += tmp[o + min(H - 1, y + r + 1) * W * 3] - tmp[o + max(0, y - r) * W * 3];\n      }\n    }\n}\n\n// Albedo of the ground: asphalt and its paint on the runway, grass around it.\nconst TDZ = [150, 450, 600, 750, 900];\nfunction surface(X, Z) {\n  const ax = abs(X);\n  if (Z >= 0 && Z \u003c= 3000 && ax \u003c 23) {\n    let al = 0.17 + 0.05 * tex(X / 9, Z / 40);\n    if (ax > 21.9) al = 0.62;\n    else if (Z > 6 && Z \u003c 36 && ax > 3 && (ax - 3) % 3.6 \u003c 1.8) al = 0.75;\n    else if (ax \u003c 0.45 && Z > 60 && (Z - 60) % 60 \u003c 36) al = 0.4;\n    else if (Z > 300 && Z \u003c 360 && ax > 6 && ax \u003c 15) al = 0.72;\n    else if (ax > 6 && ax \u003c 15 && (ax - 6) % 3 \u003c 1.5) for (const z0 of TDZ) if (Z > z0 && Z \u003c z0 + 22) al = 0.7;\n    // Rubber from a million touchdowns darkens the middle of the zone.\n    al *= 1 - (0.45 - 0.4 * tex(X / 5, Z / 25)) * sstep(260, 340, Z) * sstep(1050, 950, Z) * sstep(14, 10, ax);\n    return al;\n  }\n  return 0.04 + 0.07 * tex(X / 6, Z / 6);\n}\n\nexport function draw(display, params) {\n  const s = params.s;\n  if (!s || !s.gc) return;\n  const L = s.lb;\n  const BL = s.bl;\n  const O = s.o;\n  L.fill(0);\n  lights(s, L);\n  blur(L, BL, s.tmp, s.br);\n  blur(BL, BL, s.tmp, s.br);\n\n  const c = s.c;\n  const gc = s.gc;\n  const sn = sin(c.psi);\n  const cs = cos(c.psi);\n  const sr = sin(c.roll);\n  const cr = cos(c.roll);\n  const ext = 3 / s.vis;\n  const land = 2 * s.fade;\n  const gk = s.glowK;\n  const fog = s.fog;\n  // The colour the murk takes: lit by the town, and by the airport in fog.\n  const fl = (0.05 + 0.07 * fog) * (1 + 0.6 * fog);\n  const fw = 0.16 * fog;\n  const fogC = [gc[0] * fl + fw, gc[1] * fl + fw * 1.04, gc[2] * fl + fw * 1.1];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const ax = x - CX;\n      const ay = y - CY;\n      const xr = ax * cr + ay * sr;\n      const v = CY - ax * sr + ay * cr - c.yh;\n      // The town glows brighter in some directions than others.\n      const hd = xr / F + c.psi;\n      const dir = 0.55 + 0.8 * tex(hd * 0.8 + 0.3, 0.71);\n      let R = 0;\n      let G = 0;\n      let Bc = 0;\n      const wg = sstep(-1, 1, v);\n      if (wg \u003c 1) {\n        // Sky: a dark blue zenith over the glow of the town, and the broken\n        // cloud deck lit from below.\n        const u = max(0, -v);\n        let gl = gk * dir * (0.3 * exp(-u / 6) * (1 - fog) + 0.13 * exp(-u / 30));\n        if (u > 0.3 && s.cover > 0) {\n          const zz = (F * (HC - c.h)) / u;\n          const xx = (xr * zz) / F;\n          // Far cloud melts into the glow instead of shimmering.\n          let n = tex((xx * cs + zz * sn + c.X) / 5000, (-xx * sn + zz * cs + c.P) / 5000 + s.drift, TC);\n          n = 0.5 + (n - 0.5) * exp(-zz / 9000);\n          gl += sstep(1 - s.cover, 1.3 - s.cover, n) * sstep(0.3, 5, u) * (0.15 + 0.3 * exp(-u / 22)) * dir * gk;\n        }\n        let sR = 0.03 + gc[0] * gl;\n        let sG = 0.045 + gc[1] * gl;\n        let sB = 0.13 + gc[2] * gl;\n        // In fog the sky is the murk, darker going up.\n        const fu = fog * (0.75 + 0.25 * exp(-u / 20));\n        sR += (fogC[0] * fu - sR) * fog;\n        sG += (fogC[1] * fu - sG) * fog;\n        sB += (fogC[2] * fu - sB) * fog;\n        R += sR * (1 - wg);\n        G += sG * (1 - wg);\n        Bc += sB * (1 - wg);\n      }\n      if (wg > 0) {\n        const vv = max(0.05, v);\n        const zc = (F * c.h) / vv;\n        const xc = (xr * zc) / F;\n        const dd = sqrt(zc * zc + xc * xc + c.h * c.h);\n        const Tr = exp(-dd * ext);\n        const E = land * s.bm[y * W + x] * min(1, pow(45 / dd, 1.3)) * Tr;\n        let gR = 0;\n        if (E > 0.008) gR = E * surface(xc * cs + zc * sn + c.X, -xc * sn + zc * cs + c.P);\n        // The glow of the town runs a little way below the horizon.\n        const band = gk * dir * 0.32 * exp(-vv / 2.2) * (1 - fog);\n        R += (gR + gc[0] * band + fogC[0] * (1 - Tr)) * wg;\n        G += (gR * 0.93 + gc[1] * band + fogC[1] * (1 - Tr)) * wg;\n        Bc += (gR * 0.8 + gc[2] * band + fogC[2] * (1 - Tr)) * wg;\n      }\n      // The landing light beams seen in the air.\n      const sc = s.scat * land * s.bs[y * W + x];\n      const i = (y * W + x) * 3;\n      const fd = s.fade * 255;\n      O[i] = (R + sc) * fd + L[i] + BL[i] * s.bloom;\n      O[i + 1] = (G + sc * 0.95) * fd + L[i + 1] + BL[i + 1] * s.bloom;\n      O[i + 2] = (Bc + sc * 0.85) * fd + L[i + 2] + BL[i + 2] * s.bloom;\n    }\n\n  // Drops on the windscreen pick up the lights behind them.\n  for (const q of s.drops) {\n    const j = (clamp(round(q.y + 3), 0, H - 1) * W + clamp(round(q.x), 0, W - 1)) * 3;\n    const e = 1.4 * s.fade;\n    blob(O, q.x, q.y, 14 * e + BL[j] * e, 16 * e + BL[j + 1] * e, 20 * e + BL[j + 2] * e, q.r);\n  }\n  // The wiper blade, dark against the glow.\n  if (s.rain > 0.3) {\n    const dx = sin(s.wa);\n    const dy = -cos(s.wa);\n    for (let t = 30; t \u003c 175; t += 0.7) {\n      const x = round(58 + dx * t);\n      const y = round(150 + dy * t);\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      for (let e = 0; e \u003c 2; e++) {\n        const i = (y * W + min(W - 1, x + e)) * 3;\n        O[i] *= 0.12;\n        O[i + 1] *= 0.12;\n        O[i + 2] *= 0.12;\n      }\n    }\n  }\n  // A soft shoulder, with a little of an overbright channel spilling into the\n  // others so bright lights burn toward white.\n  const sh = (v) => (v \u003c 190 ? v : 255 - 65 * exp(-(v - 190) / 65));\n  for (let i = 0, p = 0; p \u003c N; p++, i += 3) {\n    let r = O[i];\n    let g = O[i + 1];\n    let b = O[i + 2];\n    const m = max(r, g, b);\n    if (m > 255) {\n      const sp = (m - 255) * 0.22;\n      r += sp;\n      g += sp;\n      b += sp;\n    }\n    display.setPixel(p % W, (p / W) | 0, sh(r), sh(g), sh(b));\n  }\n}\n","layer":{"id":"layer-final-approach","type":"code","name":"final-approach","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Final Approach\n// Family:  flight\n// Idea:    From an airliner cockpit on a night landing, the runway and its approach lights converge high on the panel under a town glowing on the horizon, then stream toward the windscreen and under it with the rabbit racing ahead and the PAPI showing two white over two red, through the flare and the rollout, before the next approach begins far out.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the ALSF-2 approach lighting system\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Glow=0..1, Speed=0.2..3, Weather=0..3, Crosswind=-1..1\n//\n// Knob 1: Glow. The colour of the town's glow on the clouds and of the sodium lamps on the horizon: sodium amber at 0, turning through green and blue to violet and back to amber at 1.\n// Knob 2: Speed. How fast the airliner flies: at 2 an approach from far out to the end of the rollout takes about 18 s and the rabbit runs twice a second; at 0.2 everything runs ten times slower.\n// Knob 3: Weather. A clear night with broken cloud at 0, haze where every light blooms at 1, rain on the windscreen with the wiper going at 2, and fog at 3 where the approach lights come out of the murk late.\n// Knob 4: Crosswind. The airliner crabs into the wind from the left or the right, so the runway sits off to one side until it swings straight ahead at the flare.\n// Buttons: K1 tap goes around: the nose comes up and the lights drop away below, then the airliner banks off and comes round for a new approach.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, sin, cos, exp, sqrt, pow, floor, ceil, round, atan, log, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst rnd = () => Math.random();\n\n// The camera: focal length in LEDs, the screen centre, the eye height on the\n// runway in metres, and the horizon row on the approach.\nconst F = 150;\nconst CX = 31.5;\nconst CY = 64;\nconst HG = 8;\nconst Y0 = 32;\n// A 3 degree glide path comes down to eye height HG 320 m past the\n// threshold. The flare starts 8 m above that, and touchdown is where it ends.\nconst SLOPE = 0.0524;\nconst AIM = 320;\nconst PF = AIM - 8 / SLOPE;\nconst LF = 11 / SLOPE;\nconst TD = PF + LF * log(11 / 3);\n// Cloud base above the ground, and where a new approach starts.\nconst HC = 520;\nconst FAR = -2300;\n// The PAPI units from the runway outward, in degrees.\nconst PT = [3.5, 3.17, 2.83, 2.5];\n\nfunction eyeH(P) {\n  if (P \u003c PF) return HG + (AIM - P) * SLOPE;\n  if (P \u003c TD) return HG + 11 * exp(-(P - PF) / LF) - 3;\n  return HG;\n}\n\n// Kinds of light: steady, the sequenced flashers, the PAPI, city lamps that\n// take the glow colour, red obstruction lights and the airport beacon.\nconst [STEADY, SEQ, PAPI, CITY, OBS, BEAC] = [0, 1, 2, 3, 4, 5];\nconst WHITE = [1, 0.9, 0.74];\nconst COOL = [0.86, 0.92, 1];\nconst RED = [1, 0.1, 0.04];\nconst GREEN = [0.1, 1, 0.42];\nconst AMBER = [1, 0.7, 0.16];\nconst BLUE = [0.2, 0.32, 1];\n\n// Weather presets the knob runs between: visibility in metres, bloom, blur\n// radius, cloud cover, glow, rain, fog, and light scattered in the air.\nconst WX = [\n  [30000, 0.35, 1, 0.5, 1.0, 0, 0, 0],\n  [5000, 1.0, 2, 0.6, 1.25, 0, 0.22, 0.07],\n  [3000, 0.75, 2, 0.85, 1.35, 1, 0.15, 0.1],\n  [420, 1.5, 3, 1, 1.05, 0, 1, 0.2],\n];\n\n// A fixed tileable value noise, for clouds and grass.\nconst TN = 128;\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nlet TX = null;\nlet TC = null;\nfunction makeTex(oct) {\n  const t = new Float32Array(TN * TN);\n  let amp = 0.5;\n  for (let o = 0; o \u003c oct; o++) {\n    const g = 4 \u003c\u003c o;\n    const c = TN / g;\n    for (let y = 0; y \u003c TN; y++)\n      for (let x = 0; x \u003c TN; x++) {\n        const gx = x / c;\n        const gy = y / c;\n        const x0 = floor(gx);\n        const y0 = floor(gy);\n        let fx = gx - x0;\n        let fy = gy - y0;\n        fx = fx * fx * (3 - 2 * fx);\n        fy = fy * fy * (3 - 2 * fy);\n        const hv = (a, b) => hash(((a % g) * 131 + (b % g)) * 7 + o * 9973);\n        const top = hv(x0, y0) + (hv(x0 + 1, y0) - hv(x0, y0)) * fx;\n        const bot = hv(x0, y0 + 1) + (hv(x0 + 1, y0 + 1) - hv(x0, y0 + 1)) * fx;\n        t[y * TN + x] += amp * (top + (bot - top) * fy);\n      }\n    amp *= 0.5;\n  }\n  let lo = 9;\n  let hi = -9;\n  for (let i = 0; i \u003c t.length; i++) {\n    lo = min(lo, t[i]);\n    hi = max(hi, t[i]);\n  }\n  for (let i = 0; i \u003c t.length; i++) t[i] = (t[i] - lo) / (hi - lo);\n  return t;\n}\nfunction tex(u, v, A = TX) {\n  const x = u * TN;\n  const y = v * TN;\n  const x0 = floor(x);\n  const y0 = floor(y);\n  const fx = x - x0;\n  const fy = y - y0;\n  const a = (x0 & 127) + (y0 & 127) * TN;\n  const b = ((x0 + 1) & 127) + (y0 & 127) * TN;\n  const c = (x0 & 127) + ((y0 + 1) & 127) * TN;\n  const d = ((x0 + 1) & 127) + ((y0 + 1) & 127) * TN;\n  const top = A[a] + (A[b] - A[a]) * fx;\n  return top + (A[c] + (A[d] - A[c]) * fx - top) * fy;\n}\n\n// Every light on the field and in the town. Positions are in metres, with z\n// running along the runway from the threshold.\nfunction build() {\n  const L = [];\n  const add = (x, y, z, k, i, c, n = 0) => L.push([x, y, z, k, i, c[0], c[1], c[2], n]);\n  const both = (fn) => {\n    fn(-1);\n    fn(1);\n  };\n  // ALSF-2: a barrette every 30 m out to 720 m, red side rows on the inner\n  // 300 m, flashers on the outer part, crossbars at 300 m and 150 m.\n  for (let k = 1; k \u003c= 24; k++) {\n    const z = -30 * k;\n    for (let j = -2; j \u003c= 2; j++) add(j * 1.05, 0.6, z, STEADY, 1, WHITE);\n    if (k \u003c= 10) both((sg) => { for (let j = 0; j \u003c 3; j++) add(sg * (11 + j * 1.05), 0.6, z, STEADY, 0.75, RED); });\n    if (k >= 11) add(0, 1.4, z, SEQ, 1, COOL, 24 - k);\n  }\n  both((sg) => { for (let j = 3; j \u003c= 15; j += 1.5) add(sg * j, 0.6, -300, STEADY, 1, WHITE); });\n  both((sg) => { for (let j = 3; j \u003c= 7.5; j += 1.5) add(sg * j, 0.6, -150, STEADY, 1, WHITE); });\n  // The green threshold bar and its wing bars.\n  for (let x = -25; x \u003c= 25.01; x += 1.5) add(x, 0.3, 0, STEADY, 1, GREEN);\n  both((sg) => { for (let j = 26.5; j \u003c= 38; j += 1.5) add(sg * j, 0.3, 0, STEADY, 1, GREEN); });\n  // Runway edge lights turn yellow on the last 600 m. A red bar ends it.\n  for (let z = 0; z \u003c= 3000; z += 60) both((sg) => add(sg * 23.5, 0.4, z, STEADY, 0.85, z > 2400 ? AMBER : WHITE));\n  for (let x = -21; x \u003c= 21; x += 3) add(x, 0.3, 3000, STEADY, 0.8, RED);\n  // Centreline every 15 m, red and white near the far end; touchdown zone bars.\n  for (let z = 7.5; z \u003c 3000; z += 15) {\n    const red = z > 2700 || (z > 2100 && round((z - 7.5) / 15) % 2 === 1);\n    add(0.6, 0.05, z, STEADY, 0.7, red ? RED : COOL);\n  }\n  for (let z = 30; z \u003c= 900; z += 30) both((sg) => { for (let j = 0; j \u003c 3; j++) add(sg * (9.8 + j * 1.5), 0.05, z, STEADY, 0.55, COOL); });\n  for (let j = 0; j \u003c 4; j++) add(-(38.5 + 9 * j), 0.9, AIM, PAPI, 1.6, WHITE, j);\n  // A parallel taxiway on the right with blue edges and green lead-offs.\n  for (let z = -60; z \u003c= 3000; z += 50) both((sg) => add(190 + sg * 11, 0.3, z, STEADY, 0.4, BLUE));\n  for (const z0 of [500, 1300, 2100, 2800]) for (let t = 0; t \u003c= 1; t += 1 / 12) add(26 + 160 * t, 0.1, z0 + 120 * t * t, STEADY, 0.35, GREEN);\n  // The apron floodlights beyond it, and the beacon on the tower.\n  for (let j = 0; j \u003c 12; j++) add(330 + 260 * rnd(), 25, 900 + 1500 * rnd(), CITY, 1.3, WHITE, rnd() \u003c 0.3 ? 0.8 : 0.1);\n  add(300, 35, 1400, BEAC, 1.4, WHITE);\n  // The town: lamps along streets on a 140 m grid that thin out between\n  // districts and climb the hills behind.\n  let n = 0;\n  while (n \u003c 1150) {\n    const z = 3300 + 17000 * pow(rnd(), 1.4);\n    let x = (rnd() * 2 - 1) * 0.45 * z;\n    let zz = z;\n    if (rnd() \u003c 0.55) x = round(x / 140) * 140 + (rnd() - 0.5) * 6;\n    else zz = round(z / 140) * 140 + (rnd() - 0.5) * 6;\n    if (tex(x / 9000 + 0.2, zz / 9000) \u003c 0.35 + 0.25 * rnd()) continue;\n    const hill = max(0, (zz - 7000) / 13000) * 300 * (0.5 + tex(x / 4000, zz / 4000 + 0.5));\n    const white = rnd() \u003c 0.28;\n    add(x, hill + 5 + (rnd() \u003c 0.08 ? rnd() * 90 : 0), zz, CITY, 0.55 + 0.6 * rnd(), WHITE, white ? 0.75 : 0.05);\n    n++;\n  }\n  // Masts and towers in the town with red lights stacked up them.\n  for (let j = 0; j \u003c 7; j++) {\n    const z = 4500 + 9000 * rnd();\n    const x = (rnd() * 2 - 1) * 0.3 * z;\n    const ht = 120 + 220 * rnd();\n    const ph = rnd() * 6;\n    for (let q = 1; q \u003c= 3; q++) add(x, (ht * q) / 3, z, OBS, 1.1, RED, ph);\n  }\n  const A = (j) => Float32Array.from(L, (e) => e[j]);\n  return { lx: A(0), ly: A(1), lz: A(2), lk: A(3), li: A(4), lr: A(5), lg: A(6), lb: A(7), ln: A(8), n: L.length };\n}\n\nfunction cam(s) {\n  return { P: s.P, h: s.h, yh: s.yh, psi: s.psi, roll: s.roll, X: s.Xp };\n}\n\nfunction approach(s, P0) {\n  s.mode = 0;\n  s.P = P0;\n  s.h = eyeH(P0);\n  s.down = false;\n  s.rt = 0;\n  s.age = 0;\n  s.turn = 0;\n  s.fresh = true;\n}\n\nexport function setup(params) {\n  if (!TX) {\n    TX = makeTex(4);\n    TC = makeTex(2);\n  }\n  const F3 = () => new Float32Array(N * 3);\n  params.s = { lt: build(), lb: F3(), bl: F3(), tmp: F3(), o: F3(), tq: 0, drops: [], tw: 0, wa: 0.35, drift: 0 };\n  const s = params.s;\n  // The landing lights are fixed to the airframe, so their pool on the\n  // ground and their glow in the air stay put on the screen.\n  s.bm = new Float32Array(N);\n  s.bs = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const bx = (p % W) - CX;\n    const y = (p / W) | 0;\n    const by = (y - 76) / (y \u003c 76 ? 14 : 36);\n    s.bm[p] = exp(-((bx / 22) ** 2) - by * by);\n    s.bs[p] = exp(-((bx / 26) ** 2) - ((y - 82) / 46) ** 2);\n  }\n  // Open about a kilometre out, so the first look is the approach lights.\n  approach(s, -1000);\n  s.age = 1;\n  s.yh = Y0;\n  s.psi = 0;\n  s.roll = 0;\n  s.Xp = 0;\n  s.v = 150;\n  s.fade = 1;\n  s.c = cam(s);\n  s.pc = s.c;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const s = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  const d = (dt * clamp(k[1], 0.2, 3)) / 2;\n  s.tq += d;\n  s.age += d;\n  const tq = s.tq;\n  // Glow colour: hue rotated from sodium amber.\n  const hue = (0.085 + clamp(k[0], 0, 1)) % 1;\n  s.gc = [0, 0, 0].map((_, c) => {\n    const q = ([5, 3, 1][c] + hue * 6) % 6;\n    return 1 - 0.82 * max(0, min(q, 4 - q, 1));\n  });\n  // Weather, blended between the neighbouring presets.\n  const w = clamp(k[2], 0, 3);\n  const i0 = min(2, floor(w));\n  const f = w - i0;\n  const A = WX[i0];\n  const B = WX[i0 + 1];\n  const lerp = (j) => A[j] + (B[j] - A[j]) * f;\n  s.vis = exp(log(A[0]) + (log(B[0]) - log(A[0])) * f);\n  [s.bloom, s.br, s.cover, s.glowK, s.rain, s.fog, s.scat] = [1, 2, 3, 4, 5, 6, 7].map(lerp);\n  s.br = round(s.br);\n  s.drift += d * 0.02;\n  const cw = clamp(k[3], -1, 1);\n\n  s.pc = s.c;\n  if (input.btnPressed && input.btnPressed[0] && s.mode === 0) {\n    s.mode = 1;\n    s.g = 0;\n    s.gh = s.h;\n    s.gp = s.yh - Y0;\n  }\n  // Turbulence: a little bob and roll in the air, a rumble on the ground.\n  const air = min(1, (s.h - HG) / 25);\n  const bob = air * (0.7 * sin(tq * 1.7) + 0.4 * sin(tq * 4.1 + 1)) + (1 - air) * 0.25 * sin(tq * 31) * (s.v / 150);\n  if (s.mode === 0) {\n    if (!s.down) {\n      s.v = s.P \u003c 0 ? 150 - 0.08 * s.P : 150 - 0.05 * s.P;\n      s.P += s.v * d;\n      if (s.P >= TD) s.down = true;\n      s.h = eyeH(s.P) + (s.P \u003c PF ? 1.6 * sin(tq * 0.43) * min(1, (PF - s.P) / 500) : 0);\n    } else {\n      s.rt += d;\n      s.v = max(16, s.v - 26 * d);\n      s.P += s.v * d;\n      s.h = HG;\n    }\n    // The nose comes up in the flare and down after touchdown.\n    const flare = sstep(PF - 40, TD, s.P);\n    s.yh = Y0 + 5 * flare - 7 * sstep(0, 0.9, s.rt) + bob;\n    s.psi = cw * 0.17 * (1 - sstep(PF - 120, TD - 30, s.P));\n    s.roll = air * (0.022 * sin(tq * 1.1 + 0.5) + cw * 0.02);\n    s.Xp = 2 * sin(tq * 0.31) * air;\n    s.fade = sstep(0, 0.7, s.age) * (1 - sstep(4.3, 5, s.rt));\n    if (s.rt >= 5) approach(s, FAR);\n  } else {\n    // Go around: pitch up and climb, then bank away and come round again.\n    const g = (s.g += d);\n    s.v = min(190, s.v + 12 * d);\n    s.P += s.v * d * cos(s.turn);\n    s.h += 36 * sstep(0.2, 1.3, g) * d;\n    s.yh = Y0 + s.gp + (34 - s.gp) * sstep(0, 1.5, g) + bob;\n    s.roll = -0.45 * sstep(1.8, 2.9, g);\n    s.turn += 0.32 * sstep(1.8, 2.9, g) * d;\n    s.psi += 0.32 * sstep(1.8, 2.9, g) * d;\n    s.fade = 1 - sstep(3.1, 3.9, g);\n    if (g >= 3.9) approach(s, FAR);\n  }\n  s.c = cam(s);\n  if (s.fresh) {\n    s.pc = s.c;\n    s.fresh = false;\n  }\n\n  // Rain on the windscreen, and the wiper that clears it.\n  if (s.rain > 0.3) {\n    const nd = d * 34 * s.rain;\n    for (let j = 0; j \u003c 4; j++) if (rnd() \u003c nd / 4 && s.drops.length \u003c 70) s.drops.push({ x: rnd() * W, y: rnd() * H, r: 0.55 + 0.6 * rnd() });\n    s.tw += d;\n    const wa = -0.12 - 0.8 * (0.5 - 0.5 * cos((2 * PI * s.tw) / 1.5));\n    const lo = min(wa, s.wa);\n    const hi = max(wa, s.wa);\n    s.drops = s.drops.filter((q) => {\n      const a = atan((q.x - 58) / (150 - q.y));\n      return a \u003c lo - 0.03 || a > hi + 0.03;\n    });\n    s.wa = wa;\n  } else {\n    s.wa = 0.35;\n    if (s.drops.length) s.drops.length = 0;\n  }\n}\n\n// Additive light: a sharpened bilinear dot for far lights, a round blob for\n// near ones.\nfunction dot(B, x, y, r, g, b) {\n  const x0 = floor(x);\n  const y0 = floor(y);\n  let fx = x - x0;\n  let fy = y - y0;\n  fx = (fx * fx) / (fx * fx + (1 - fx) * (1 - fx));\n  fy = (fy * fy) / (fy * fy + (1 - fy) * (1 - fy));\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = x0 + (j & 1);\n    const yy = y0 + (j >> 1);\n    if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n    const wgt = (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy);\n    const i = (yy * W + xx) * 3;\n    B[i] += r * wgt;\n    B[i + 1] += g * wgt;\n    B[i + 2] += b * wgt;\n  }\n}\nfunction blob(B, x, y, r, g, b, sg) {\n  const R = min(4, ceil(sg * 2.2));\n  const kk = -1 / (2 * sg * sg);\n  const xa = max(0, ceil(x - R));\n  const xb = min(W - 1, floor(x + R));\n  for (let yy = max(0, ceil(y - R)); yy \u003c= min(H - 1, floor(y + R)); yy++)\n    for (let xx = xa; xx \u003c= xb; xx++) {\n      const wgt = exp(((xx - x) ** 2 + (yy - y) ** 2) * kk);\n      const i = (yy * W + xx) * 3;\n      B[i] += r * wgt;\n      B[i + 1] += g * wgt;\n      B[i + 2] += b * wgt;\n    }\n}\n\nfunction lights(s, B) {\n  const c = s.c;\n  const p = s.pc;\n  const T = s.lt;\n  const sn = sin(c.psi);\n  const cs = cos(c.psi);\n  const sr = sin(c.roll);\n  const cr = cos(c.roll);\n  const psn = sin(p.psi);\n  const pcs = cos(p.psi);\n  const psr = sin(p.roll);\n  const pcr = cos(p.roll);\n  const ext = 3 / s.vis;\n  const gc = s.gc;\n  const tq = s.tq;\n  // The rabbit runs from the outermost flasher to the 300 m bar twice a second.\n  const seq = (tq * 2) % 1;\n  const papiA = (atan((c.h - HG) / max(1, AIM - c.P)) * 180) / PI;\n  const beac = (tq * 0.5) % 1;\n  for (let i = 0; i \u003c T.n; i++) {\n    const dx = T.lx[i] - c.X;\n    const dz = T.lz[i] - c.P;\n    const zc = dx * sn + dz * cs;\n    if (zc \u003c 3) continue;\n    const xc = dx * cs - dz * sn;\n    const ox = (F * xc) / zc;\n    const oy = c.yh - CY + (F * (c.h - T.ly[i])) / zc;\n    const X = CX + ox * cr - oy * sr;\n    const Y = CY + ox * sr + oy * cr;\n    if (X \u003c -5 || X > W + 4 || Y \u003c -5 || Y > H + 4) continue;\n    let a = T.li[i] * min(1.8, pow(600 / zc, 0.62)) * exp(-zc * ext);\n    let r = T.lr[i];\n    let g = T.lg[i];\n    let b = T.lb[i];\n    const k = T.lk[i];\n    const m = T.ln[i];\n    let sg = 0.4 + min(1.7, 40 / zc);\n    if (k === SEQ) {\n      let age = seq - m / 14;\n      if (age \u003c 0) age += 1;\n      const e = exp(-age * 13);\n      a *= 4.5 * e;\n      sg += 1.1 * e;\n    } else if (k === PAPI) {\n      const wa = sstep(-0.07, 0.07, papiA - PT[m]);\n      g = 0.1 + 0.83 * wa;\n      b = 0.04 + 0.72 * wa;\n    } else if (k === CITY) {\n      r = gc[0] + (1 - gc[0]) * m;\n      g = gc[1] + (0.92 - gc[1]) * m;\n      b = gc[2] + (0.8 - gc[2]) * m;\n    } else if (k === OBS) a *= sstep(-0.25, 0.25, sin(tq * 3.3 + m));\n    else if (k === BEAC) {\n      const e = exp(-(((beac % 0.5) / 0.05) ** 2));\n      a *= 2 * e;\n      if (beac \u003c 0.5) [r, g, b] = GREEN;\n    }\n    a *= s.fade * 255;\n    if (a \u003c 3) continue;\n    // A light that crossed the screen fast since the last frame leaves a\n    // fading streak behind it.\n    if (zc \u003c 500) {\n      const pdx = T.lx[i] - p.X;\n      const pdz = T.lz[i] - p.P;\n      const pz = pdx * psn + pdz * pcs;\n      if (pz > 3) {\n        const qx = (F * (pdx * pcs - pdz * psn)) / pz;\n        const qy = p.yh - CY + (F * (p.h - T.ly[i])) / pz;\n        const PX = CX + qx * pcr - qy * psr;\n        const PY = CY + qx * psr + qy * pcr;\n        const ddx = X - PX;\n        const ddy = Y - PY;\n        const len = sqrt(ddx * ddx + ddy * ddy);\n        if (len > 1.5) {\n          const n = min(28, ceil(len));\n          const q = a * max(0.3, 1.4 / len);\n          for (let j = 1; j \u003c n; j++) {\n            const t = j / n;\n            dot(B, PX + ddx * t, PY + ddy * t, q * r * t, q * g * t, q * b * t);\n          }\n        }\n      }\n    }\n    if (sg \u003c 0.75) dot(B, X, Y, a * r, a * g, a * b);\n    else blob(B, X, Y, a * r, a * g, a * b, sg);\n    // On a wet runway each light lays a streak toward the windscreen.\n    if (s.rain > 0.05 && T.ly[i] \u003c 1.5 && T.lz[i] > -760) {\n      const ls = min(10, round(s.rain * (2 + 0.12 * (Y - c.yh))));\n      for (let j = 1; j \u003c= ls; j++) {\n        const q = a * 0.3 * s.rain * (1 - j / (ls + 1));\n        dot(B, X, Y + j, q * r, q * g, q * b);\n      }\n    }\n  }\n}\n\n// Box blur, horizontal then vertical, for the bloom.\nfunction blur(src, dst, tmp, r) {\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const o = y * W * 3 + ch;\n      let acc = 0;\n      for (let x = -r; x \u003c= r; x++) acc += src[o + clamp(x, 0, W - 1) * 3];\n      for (let x = 0; x \u003c W; x++) {\n        tmp[o + x * 3] = acc * inv;\n        acc += src[o + min(W - 1, x + r + 1) * 3] - src[o + max(0, x - r) * 3];\n      }\n    }\n  for (let x = 0; x \u003c W; x++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const o = x * 3 + ch;\n      let acc = 0;\n      for (let y = -r; y \u003c= r; y++) acc += tmp[o + clamp(y, 0, H - 1) * W * 3];\n      for (let y = 0; y \u003c H; y++) {\n        dst[o + y * W * 3] = acc * inv;\n        acc += tmp[o + min(H - 1, y + r + 1) * W * 3] - tmp[o + max(0, y - r) * W * 3];\n      }\n    }\n}\n\n// Albedo of the ground: asphalt and its paint on the runway, grass around it.\nconst TDZ = [150, 450, 600, 750, 900];\nfunction surface(X, Z) {\n  const ax = abs(X);\n  if (Z >= 0 && Z \u003c= 3000 && ax \u003c 23) {\n    let al = 0.17 + 0.05 * tex(X / 9, Z / 40);\n    if (ax > 21.9) al = 0.62;\n    else if (Z > 6 && Z \u003c 36 && ax > 3 && (ax - 3) % 3.6 \u003c 1.8) al = 0.75;\n    else if (ax \u003c 0.45 && Z > 60 && (Z - 60) % 60 \u003c 36) al = 0.4;\n    else if (Z > 300 && Z \u003c 360 && ax > 6 && ax \u003c 15) al = 0.72;\n    else if (ax > 6 && ax \u003c 15 && (ax - 6) % 3 \u003c 1.5) for (const z0 of TDZ) if (Z > z0 && Z \u003c z0 + 22) al = 0.7;\n    // Rubber from a million touchdowns darkens the middle of the zone.\n    al *= 1 - (0.45 - 0.4 * tex(X / 5, Z / 25)) * sstep(260, 340, Z) * sstep(1050, 950, Z) * sstep(14, 10, ax);\n    return al;\n  }\n  return 0.04 + 0.07 * tex(X / 6, Z / 6);\n}\n\nexport function draw(display, params) {\n  const s = params.s;\n  if (!s || !s.gc) return;\n  const L = s.lb;\n  const BL = s.bl;\n  const O = s.o;\n  L.fill(0);\n  lights(s, L);\n  blur(L, BL, s.tmp, s.br);\n  blur(BL, BL, s.tmp, s.br);\n\n  const c = s.c;\n  const gc = s.gc;\n  const sn = sin(c.psi);\n  const cs = cos(c.psi);\n  const sr = sin(c.roll);\n  const cr = cos(c.roll);\n  const ext = 3 / s.vis;\n  const land = 2 * s.fade;\n  const gk = s.glowK;\n  const fog = s.fog;\n  // The colour the murk takes: lit by the town, and by the airport in fog.\n  const fl = (0.05 + 0.07 * fog) * (1 + 0.6 * fog);\n  const fw = 0.16 * fog;\n  const fogC = [gc[0] * fl + fw, gc[1] * fl + fw * 1.04, gc[2] * fl + fw * 1.1];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const ax = x - CX;\n      const ay = y - CY;\n      const xr = ax * cr + ay * sr;\n      const v = CY - ax * sr + ay * cr - c.yh;\n      // The town glows brighter in some directions than others.\n      const hd = xr / F + c.psi;\n      const dir = 0.55 + 0.8 * tex(hd * 0.8 + 0.3, 0.71);\n      let R = 0;\n      let G = 0;\n      let Bc = 0;\n      const wg = sstep(-1, 1, v);\n      if (wg \u003c 1) {\n        // Sky: a dark blue zenith over the glow of the town, and the broken\n        // cloud deck lit from below.\n        const u = max(0, -v);\n        let gl = gk * dir * (0.3 * exp(-u / 6) * (1 - fog) + 0.13 * exp(-u / 30));\n        if (u > 0.3 && s.cover > 0) {\n          const zz = (F * (HC - c.h)) / u;\n          const xx = (xr * zz) / F;\n          // Far cloud melts into the glow instead of shimmering.\n          let n = tex((xx * cs + zz * sn + c.X) / 5000, (-xx * sn + zz * cs + c.P) / 5000 + s.drift, TC);\n          n = 0.5 + (n - 0.5) * exp(-zz / 9000);\n          gl += sstep(1 - s.cover, 1.3 - s.cover, n) * sstep(0.3, 5, u) * (0.15 + 0.3 * exp(-u / 22)) * dir * gk;\n        }\n        let sR = 0.03 + gc[0] * gl;\n        let sG = 0.045 + gc[1] * gl;\n        let sB = 0.13 + gc[2] * gl;\n        // In fog the sky is the murk, darker going up.\n        const fu = fog * (0.75 + 0.25 * exp(-u / 20));\n        sR += (fogC[0] * fu - sR) * fog;\n        sG += (fogC[1] * fu - sG) * fog;\n        sB += (fogC[2] * fu - sB) * fog;\n        R += sR * (1 - wg);\n        G += sG * (1 - wg);\n        Bc += sB * (1 - wg);\n      }\n      if (wg > 0) {\n        const vv = max(0.05, v);\n        const zc = (F * c.h) / vv;\n        const xc = (xr * zc) / F;\n        const dd = sqrt(zc * zc + xc * xc + c.h * c.h);\n        const Tr = exp(-dd * ext);\n        const E = land * s.bm[y * W + x] * min(1, pow(45 / dd, 1.3)) * Tr;\n        let gR = 0;\n        if (E > 0.008) gR = E * surface(xc * cs + zc * sn + c.X, -xc * sn + zc * cs + c.P);\n        // The glow of the town runs a little way below the horizon.\n        const band = gk * dir * 0.32 * exp(-vv / 2.2) * (1 - fog);\n        R += (gR + gc[0] * band + fogC[0] * (1 - Tr)) * wg;\n        G += (gR * 0.93 + gc[1] * band + fogC[1] * (1 - Tr)) * wg;\n        Bc += (gR * 0.8 + gc[2] * band + fogC[2] * (1 - Tr)) * wg;\n      }\n      // The landing light beams seen in the air.\n      const sc = s.scat * land * s.bs[y * W + x];\n      const i = (y * W + x) * 3;\n      const fd = s.fade * 255;\n      O[i] = (R + sc) * fd + L[i] + BL[i] * s.bloom;\n      O[i + 1] = (G + sc * 0.95) * fd + L[i + 1] + BL[i + 1] * s.bloom;\n      O[i + 2] = (Bc + sc * 0.85) * fd + L[i + 2] + BL[i + 2] * s.bloom;\n    }\n\n  // Drops on the windscreen pick up the lights behind them.\n  for (const q of s.drops) {\n    const j = (clamp(round(q.y + 3), 0, H - 1) * W + clamp(round(q.x), 0, W - 1)) * 3;\n    const e = 1.4 * s.fade;\n    blob(O, q.x, q.y, 14 * e + BL[j] * e, 16 * e + BL[j + 1] * e, 20 * e + BL[j + 2] * e, q.r);\n  }\n  // The wiper blade, dark against the glow.\n  if (s.rain > 0.3) {\n    const dx = sin(s.wa);\n    const dy = -cos(s.wa);\n    for (let t = 30; t \u003c 175; t += 0.7) {\n      const x = round(58 + dx * t);\n      const y = round(150 + dy * t);\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      for (let e = 0; e \u003c 2; e++) {\n        const i = (y * W + min(W - 1, x + e)) * 3;\n        O[i] *= 0.12;\n        O[i + 1] *= 0.12;\n        O[i + 2] *= 0.12;\n      }\n    }\n  }\n  // A soft shoulder, with a little of an overbright channel spilling into the\n  // others so bright lights burn toward white.\n  const sh = (v) => (v \u003c 190 ? v : 255 - 65 * exp(-(v - 190) / 65));\n  for (let i = 0, p = 0; p \u003c N; p++, i += 3) {\n    let r = O[i];\n    let g = O[i + 1];\n    let b = O[i + 2];\n    const m = max(r, g, b);\n    if (m > 255) {\n      const sp = (m - 255) * 0.22;\n      r += sp;\n      g += sp;\n      b += sp;\n    }\n    display.setPixel(p % W, (p / W) | 0, sh(r), sh(g), sh(b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Glow=0..1, Speed=0.2..3, Weather=0..3, Crosswind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Glow","min":0,"max":1,"about":"The colour of the town's glow on the clouds and of the sodium lamps on the horizon: sodium amber at 0, turning through green and blue to violet and back to amber at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the airliner flies: at 2 an approach from far out to the end of the rollout takes about 18 s and the rabbit runs twice a second; at 0.2 everything runs ten times slower."},{"name":"Weather","min":0,"max":3,"about":"A clear night with broken cloud at 0, haze where every light blooms at 1, rain on the windscreen with the wiper going at 2, and fog at 3 where the approach lights come out of the murk late."},{"name":"Crosswind","min":-1,"max":1,"about":"The airliner crabs into the wind from the left or the right, so the runway sits off to one side until it swings straight ahead at the flare."}],"start":[0,2,0,0.06],"measures":{"motion":1.2895,"detail":0.0365,"edges":0.3949,"complexity":1.2312,"coverage":0.4908,"colour":0.0984,"drift":0.1085},"knobResponse":[0.0373,0.0632,0.3041,0.0884]},{"slug":"fire","title":"Fire","family":"sim","round":1,"note":"데모신의 불이에요. 바닥의 열이 올라가며 식고, K1 을 돌리면 나무 불에서 가스 불, 붕소 불까지 색이 바뀌어요.","idea":"The demoscene fire: heat poured in along the bottom rises a row at a time, each LED the average of the ones below it less a little cooling, and the cooling itself rides up with the flames.","buttons":"K1 tap drops a log on, and the fire flares and throws sparks.","code":"// ===== Patternflow pattern =====\n// Title:   Fire\n// Family:  sim\n// Idea:    The demoscene fire: heat poured in along the bottom rises a row at a time, each LED the average of the ones below it less a little cooling, and the cooling itself rides up with the flames.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Height=0.6..4, Wind=-1..1, Crackle=0..1\n//\n// Knob 1: Colour. What is burning: wood, then potassium lilac, gas blue, copper teal and boron green.\n// Knob 2: Height. How far the flames climb before they cool, from low licks along the bottom to a wall that leaves the top.\n// Knob 3: Wind. At 0 the flames stand up; either way they lean and the gusts come with it.\n// Knob 4: Crackle. Rougher air in the flames, pops of heat in the bed, and sparks thrown up out of them, from the odd one to a shower.\n// Buttons: K1 tap drops a log on, and the fire flares and throws sparks.\n\nconst W = 64;\nconst H = 128;\n// Two rows below the panel hold the fuel.\nconst BH = H + 2;\nconst STEPS = 60;\nconst E = 160;\nconst POPS = 6;\n\n// Heat to colour: the same nine heats for every palette, one palette per thing burning.\nconst HEATS = [0, 0.08, 0.18, 0.3, 0.42, 0.55, 0.7, 0.84, 1];\nconst PALETTES = [\n  [0x000000, 0x000000, 0x3a0400, 0xa01000, 0xe83a00, 0xff7a00, 0xffb41c, 0xffe070, 0xfff6d0],\n  [0x000000, 0x000000, 0x26003a, 0x6410a0, 0xa830e0, 0xd868ff, 0xf0a0ff, 0xffd0ff, 0xfff2ff],\n  [0x000000, 0x000000, 0x00083a, 0x001ca0, 0x0848ff, 0x2888ff, 0x60c0ff, 0xa8e8ff, 0xf0fcff],\n  [0x000000, 0x000000, 0x002428, 0x006070, 0x00a0a8, 0x10d8c8, 0x60f8e0, 0xb0fff0, 0xf2fffc],\n  [0x000000, 0x000000, 0x002a06, 0x00701a, 0x08b030, 0x40e840, 0x98ff60, 0xd0ffa0, 0xf6fff0],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth value noise over x and time.\nfunction noise(x, t) {\n  const ix = Math.floor(x);\n  const it = Math.floor(t);\n  const fx = x - ix;\n  const ft = t - it;\n  const ux = fx * fx * (3 - 2 * fx);\n  const ut = ft * ft * (3 - 2 * ft);\n  const a = hash(ix, it) * (1 - ux) + hash(ix + 1, it) * ux;\n  const b = hash(ix, it + 1) * (1 - ux) + hash(ix + 1, it + 1) * ux;\n  return a * (1 - ut) + b * ut;\n}\n\nfunction buildPalette(colours) {\n  const lut = new Float32Array(256 * 3);\n  let s = 0;\n  for (let i = 0; i \u003c 256; i++) {\n    const v = i / 255;\n    while (s \u003c HEATS.length - 2 && v > HEATS[s + 1]) s++;\n    const c0 = colours[s];\n    const c1 = colours[s + 1];\n    const f = Math.max(0, Math.min(1, (v - HEATS[s]) / (HEATS[s + 1] - HEATS[s])));\n    lut[i * 3] = ((c0 >> 16) & 255) * (1 - f) + ((c1 >> 16) & 255) * f;\n    lut[i * 3 + 1] = ((c0 >> 8) & 255) * (1 - f) + ((c1 >> 8) & 255) * f;\n    lut[i * 3 + 2] = (c0 & 255) * (1 - f) + (c1 & 255) * f;\n  }\n  return lut;\n}\n\nexport function setup(params) {\n  params.heat = new Float32Array(W * BH);\n  params.next = new Float32Array(W * BH);\n  params.cool = new Float32Array(W * BH);\n  params.luts = PALETTES.map(buildPalette);\n  params.lut = new Float32Array(256 * 3);\n  params.lutKey = -1;\n  params.ex = new Float32Array(E);\n  params.ey = new Float32Array(E);\n  params.evx = new Float32Array(E);\n  params.evy = new Float32Array(E);\n  params.eage = new Float32Array(E);\n  params.elife = new Float32Array(E);\n  params.enext = 0;\n  params.n = 0;\n  params.acc = 0;\n  params.spark = 0;\n  params.flare = 0;\n  params.t = 0;\n  params.shift = new Float32Array(BH);\n  params.popX = new Float32Array(POPS);\n  params.popS = new Float32Array(POPS);\n  params.popClock = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.started = false;\n}\n\nfunction throwEmber(params, wind, x) {\n  const i = params.enext;\n  params.enext = (i + 1) % E;\n  params.ex[i] = x + (Math.random() - 0.5) * 8;\n  params.ey[i] = H - 6 - Math.random() * 20;\n  params.evx[i] = wind * 26 + (Math.random() - 0.5) * 14;\n  // Thrown hard enough to clear the flames, which now stand about ninety rows.\n  params.evy[i] = -(40 + Math.random() * 55);\n  params.eage[i] = 0;\n  params.elife[i] = 1 + Math.random() * 1.6;\n}\n\nfunction step(params, height, wind, crackle) {\n  const heat = params.heat;\n  const next = params.next;\n  const cool = params.cool;\n  const n = ++params.n;\n  const T = n / STEPS;\n\n  // A new row of cooling enters at the bottom; the rows above it moved up one with the flames.\n  const row = ((BH - 1 + n) % BH) * W;\n  for (let x = 0; x \u003c W; x++) {\n    const c = noise(x * 0.16, T * 3.5) * 0.6 + noise(x * 0.42 + 40, T * 8) * 0.4;\n    cool[row + x] = c * c * c * 3.2 + 0.08;\n  }\n\n  // Fuel along the bottom: a slow swell of hot and less hot places, and a fast flicker on top.\n  const flare = 1 + params.flare * 0.2;\n  for (let x = 0; x \u003c W; x++) {\n    const bed = 0.72 + 0.28 * noise(x * 0.07, T * 0.3 + 9);\n    const flick = 0.82 + 0.18 * noise(x * 0.35, T * 9);\n    let pop = 0;\n    for (let j = 0; j \u003c POPS; j++) {\n      if (params.popS[j] \u003c 0.02) continue;\n      const d = x - params.popX[j];\n      pop += params.popS[j] * Math.exp(-d * d * 0.03);\n    }\n    const f = Math.min(1, 0.95 * bed * flick * flare + pop * 0.4);\n    heat[(BH - 1) * W + x] = f;\n    heat[(BH - 2) * W + x] = f;\n  }\n\n  // Wind leans the flames, more at the top than at the base, and gusts with its strength.\n  const gust = wind * (0.65 + 0.7 * noise(T * 0.6, 3.3));\n  const shift = params.shift;\n  for (let y = 0; y \u003c BH - 2; y++) {\n    const up = 1 - y / BH;\n    // Turbulence: a sideways shove that changes smoothly from row to row, so the tongues writhe without tearing.\n    const slow = (noise(y * 0.13, T * 3.1) - 0.5) * 1.3 * (0.9 + crackle * 0.6);\n    const fast = (noise(y * 0.37 + 17, T * 7.3) - 0.5) * 0.7 * (0.9 + crackle * 2.4);\n    shift[y] = gust * (0.25 + 0.6 * up) + slow + fast;\n  }\n\n  // Half the loss a row of the 64-row panel had, so the flames climb twice as many rows.\n  const lose = 1.7 / (12 + height * 32);\n  for (let y = 0; y \u003c BH - 2; y++) {\n    const below = (y + 1) * W;\n    const below2 = (y + 2) * W;\n    const crow = ((y + n) % BH) * W;\n    const sx = shift[y];\n    const i0 = Math.floor(sx);\n    const f = sx - i0;\n    for (let x = 0; x \u003c W; x++) {\n      // Sample the row below, moved sideways by the wind, with a soft three-tap blur.\n      const b = x - i0;\n      const am = heat[below + ((b - 1 + W * 4) % W)];\n      const a0 = heat[below + ((b + W * 4) % W)];\n      const a1 = heat[below + ((b + 1 + W * 4) % W)];\n      const ap = heat[below + ((b - 2 + W * 4) % W)];\n      const l = am * (1 - f) + ap * f;\n      const c = a0 * (1 - f) + am * f;\n      const r = a1 * (1 - f) + a0 * f;\n      const d = heat[below2 + ((b + W * 4) % W)] * (1 - f) + heat[below2 + ((b - 1 + W * 4) % W)] * f;\n      const v = (l + 6 * c + r) * 0.09375 + d * 0.25 - cool[crow + x] * lose;\n      next[y * W + x] = v > 0 ? v : 0;\n    }\n  }\n  for (let i = 0; i \u003c (BH - 2) * W; i++) heat[i] = next[i];\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  const height = Math.max(0.1, k[1]);\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const crackle = Math.max(0, Math.min(1, k[3]));\n\n  // Colour: five palettes in a row, each held for a while before it blends into the next.\n  const pos = Math.max(0, Math.min(1, k[0])) * (PALETTES.length - 1);\n  if (pos !== params.lutKey) {\n    params.lutKey = pos;\n    const a = Math.min(PALETTES.length - 2, Math.floor(pos));\n    const u = pos - a;\n    const g = Math.max(0, Math.min(1, (u - 0.2) / 0.6));\n    const m = g * g * (3 - 2 * g);\n    const la = params.luts[a];\n    const lb = params.luts[a + 1];\n    for (let i = 0; i \u003c la.length; i++) params.lut[i] = la[i] * (1 - m) + lb[i] * m;\n  }\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.flare = 1;\n    for (let j = 0; j \u003c 30; j++) throwEmber(params, wind, Math.random() * W);\n  }\n  params.flare = Math.max(0, params.flare - dt * 0.6);\n\n  params.acc += dt * STEPS;\n  let steps = Math.floor(params.acc);\n  params.acc -= steps;\n  if (steps > 6) steps = 6;\n  // A pop: a knot in the wood bursts, a hot spot flares in the bed and spits a handful of sparks.\n  params.popClock += dt * crackle * crackle * 4;\n  for (let j = 0; j \u003c POPS; j++) params.popS[j] *= Math.exp(-dt * 4);\n  while (params.popClock >= 1) {\n    params.popClock -= 1;\n    let j = 0;\n    for (let m = 1; m \u003c POPS; m++) if (params.popS[m] \u003c params.popS[j]) j = m;\n    params.popX[j] = 6 + Math.random() * (W - 12);\n    params.popS[j] = 1;\n    const n = 4 + Math.floor(Math.random() * 8);\n    for (let m = 0; m \u003c n; m++) throwEmber(params, wind, params.popX[j]);\n  }\n  // The first frame finds the fire already burning rather than a cold grate.\n  if (!params.started) {\n    params.started = true;\n    steps = 150;\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, height + params.flare * 1.2, wind, crackle);\n\n  params.spark += dt * (crackle * crackle * 40 + crackle * 6);\n  while (params.spark >= 1) {\n    params.spark -= 1;\n    throwEmber(params, wind, Math.random() * W);\n  }\n  const t = params.t;\n  for (let i = 0; i \u003c E; i++) {\n    if (params.eage[i] >= params.elife[i]) continue;\n    params.eage[i] += dt;\n    // Sparks ride the hot air: they wander, slow as they cool, and drift with the wind.\n    params.evx[i] += ((Math.sin(t * 7 + i * 1.7) * 30) + (wind * 26 - params.evx[i]) * 1.2) * dt;\n    params.evy[i] += (-params.evy[i] * 0.6 - 6) * dt;\n    params.ex[i] += params.evx[i] * dt;\n    params.ey[i] += params.evy[i] * dt;\n    if (params.ey[i] \u003c -2) params.eage[i] = params.elife[i];\n  }\n}\n\nexport function draw(display, params, time) {\n  const heat = params.heat;\n  const lut = params.lut;\n  const buf = params.buf;\n  for (let i = 0; i \u003c W * H; i++) {\n    let v = heat[i];\n    if (v > 1) v = 1;\n    const c = Math.floor(v * 255) * 3;\n    buf[i * 3] = lut[c];\n    buf[i * 3 + 1] = lut[c + 1];\n    buf[i * 3 + 2] = lut[c + 2];\n  }\n  for (let i = 0; i \u003c E; i++) {\n    if (params.eage[i] >= params.elife[i]) continue;\n    const life = 1 - params.eage[i] / params.elife[i];\n    // An ember is drawn with the palette as it cools: white-hot, then its own colour, then out.\n    const c = Math.floor((0.35 + 0.65 * life) * 255) * 3;\n    const ex = params.ex[i];\n    const ey = params.ey[i];\n    const x0 = Math.floor(ex - 0.5);\n    const y0 = Math.floor(ey - 0.5);\n    for (let yy = y0; yy \u003c= y0 + 1; yy++) {\n      if (yy \u003c 0 || yy >= H) continue;\n      const wy = 1 - Math.abs(yy + 0.5 - ey);\n      for (let xx = x0; xx \u003c= x0 + 1; xx++) {\n        if (xx \u003c 0 || xx >= W) continue;\n        const w = wy * (1 - Math.abs(xx + 0.5 - ex)) * Math.min(1, life * 3);\n        if (w \u003c= 0) continue;\n        const o = (yy * W + xx) * 3;\n        buf[o] = Math.min(255, buf[o] + lut[c] * w);\n        buf[o + 1] = Math.min(255, buf[o + 1] + lut[c + 1] * w);\n        buf[o + 2] = Math.min(255, buf[o + 2] + lut[c + 2] * w);\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, buf[o], buf[o + 1], buf[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-fire","type":"code","name":"fire","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Fire\n// Family:  sim\n// Idea:    The demoscene fire: heat poured in along the bottom rises a row at a time, each LED the average of the ones below it less a little cooling, and the cooling itself rides up with the flames.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Height=0.6..4, Wind=-1..1, Crackle=0..1\n//\n// Knob 1: Colour. What is burning: wood, then potassium lilac, gas blue, copper teal and boron green.\n// Knob 2: Height. How far the flames climb before they cool, from low licks along the bottom to a wall that leaves the top.\n// Knob 3: Wind. At 0 the flames stand up; either way they lean and the gusts come with it.\n// Knob 4: Crackle. Rougher air in the flames, pops of heat in the bed, and sparks thrown up out of them, from the odd one to a shower.\n// Buttons: K1 tap drops a log on, and the fire flares and throws sparks.\n\nconst W = 64;\nconst H = 128;\n// Two rows below the panel hold the fuel.\nconst BH = H + 2;\nconst STEPS = 60;\nconst E = 160;\nconst POPS = 6;\n\n// Heat to colour: the same nine heats for every palette, one palette per thing burning.\nconst HEATS = [0, 0.08, 0.18, 0.3, 0.42, 0.55, 0.7, 0.84, 1];\nconst PALETTES = [\n  [0x000000, 0x000000, 0x3a0400, 0xa01000, 0xe83a00, 0xff7a00, 0xffb41c, 0xffe070, 0xfff6d0],\n  [0x000000, 0x000000, 0x26003a, 0x6410a0, 0xa830e0, 0xd868ff, 0xf0a0ff, 0xffd0ff, 0xfff2ff],\n  [0x000000, 0x000000, 0x00083a, 0x001ca0, 0x0848ff, 0x2888ff, 0x60c0ff, 0xa8e8ff, 0xf0fcff],\n  [0x000000, 0x000000, 0x002428, 0x006070, 0x00a0a8, 0x10d8c8, 0x60f8e0, 0xb0fff0, 0xf2fffc],\n  [0x000000, 0x000000, 0x002a06, 0x00701a, 0x08b030, 0x40e840, 0x98ff60, 0xd0ffa0, 0xf6fff0],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth value noise over x and time.\nfunction noise(x, t) {\n  const ix = Math.floor(x);\n  const it = Math.floor(t);\n  const fx = x - ix;\n  const ft = t - it;\n  const ux = fx * fx * (3 - 2 * fx);\n  const ut = ft * ft * (3 - 2 * ft);\n  const a = hash(ix, it) * (1 - ux) + hash(ix + 1, it) * ux;\n  const b = hash(ix, it + 1) * (1 - ux) + hash(ix + 1, it + 1) * ux;\n  return a * (1 - ut) + b * ut;\n}\n\nfunction buildPalette(colours) {\n  const lut = new Float32Array(256 * 3);\n  let s = 0;\n  for (let i = 0; i \u003c 256; i++) {\n    const v = i / 255;\n    while (s \u003c HEATS.length - 2 && v > HEATS[s + 1]) s++;\n    const c0 = colours[s];\n    const c1 = colours[s + 1];\n    const f = Math.max(0, Math.min(1, (v - HEATS[s]) / (HEATS[s + 1] - HEATS[s])));\n    lut[i * 3] = ((c0 >> 16) & 255) * (1 - f) + ((c1 >> 16) & 255) * f;\n    lut[i * 3 + 1] = ((c0 >> 8) & 255) * (1 - f) + ((c1 >> 8) & 255) * f;\n    lut[i * 3 + 2] = (c0 & 255) * (1 - f) + (c1 & 255) * f;\n  }\n  return lut;\n}\n\nexport function setup(params) {\n  params.heat = new Float32Array(W * BH);\n  params.next = new Float32Array(W * BH);\n  params.cool = new Float32Array(W * BH);\n  params.luts = PALETTES.map(buildPalette);\n  params.lut = new Float32Array(256 * 3);\n  params.lutKey = -1;\n  params.ex = new Float32Array(E);\n  params.ey = new Float32Array(E);\n  params.evx = new Float32Array(E);\n  params.evy = new Float32Array(E);\n  params.eage = new Float32Array(E);\n  params.elife = new Float32Array(E);\n  params.enext = 0;\n  params.n = 0;\n  params.acc = 0;\n  params.spark = 0;\n  params.flare = 0;\n  params.t = 0;\n  params.shift = new Float32Array(BH);\n  params.popX = new Float32Array(POPS);\n  params.popS = new Float32Array(POPS);\n  params.popClock = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.started = false;\n}\n\nfunction throwEmber(params, wind, x) {\n  const i = params.enext;\n  params.enext = (i + 1) % E;\n  params.ex[i] = x + (Math.random() - 0.5) * 8;\n  params.ey[i] = H - 6 - Math.random() * 20;\n  params.evx[i] = wind * 26 + (Math.random() - 0.5) * 14;\n  // Thrown hard enough to clear the flames, which now stand about ninety rows.\n  params.evy[i] = -(40 + Math.random() * 55);\n  params.eage[i] = 0;\n  params.elife[i] = 1 + Math.random() * 1.6;\n}\n\nfunction step(params, height, wind, crackle) {\n  const heat = params.heat;\n  const next = params.next;\n  const cool = params.cool;\n  const n = ++params.n;\n  const T = n / STEPS;\n\n  // A new row of cooling enters at the bottom; the rows above it moved up one with the flames.\n  const row = ((BH - 1 + n) % BH) * W;\n  for (let x = 0; x \u003c W; x++) {\n    const c = noise(x * 0.16, T * 3.5) * 0.6 + noise(x * 0.42 + 40, T * 8) * 0.4;\n    cool[row + x] = c * c * c * 3.2 + 0.08;\n  }\n\n  // Fuel along the bottom: a slow swell of hot and less hot places, and a fast flicker on top.\n  const flare = 1 + params.flare * 0.2;\n  for (let x = 0; x \u003c W; x++) {\n    const bed = 0.72 + 0.28 * noise(x * 0.07, T * 0.3 + 9);\n    const flick = 0.82 + 0.18 * noise(x * 0.35, T * 9);\n    let pop = 0;\n    for (let j = 0; j \u003c POPS; j++) {\n      if (params.popS[j] \u003c 0.02) continue;\n      const d = x - params.popX[j];\n      pop += params.popS[j] * Math.exp(-d * d * 0.03);\n    }\n    const f = Math.min(1, 0.95 * bed * flick * flare + pop * 0.4);\n    heat[(BH - 1) * W + x] = f;\n    heat[(BH - 2) * W + x] = f;\n  }\n\n  // Wind leans the flames, more at the top than at the base, and gusts with its strength.\n  const gust = wind * (0.65 + 0.7 * noise(T * 0.6, 3.3));\n  const shift = params.shift;\n  for (let y = 0; y \u003c BH - 2; y++) {\n    const up = 1 - y / BH;\n    // Turbulence: a sideways shove that changes smoothly from row to row, so the tongues writhe without tearing.\n    const slow = (noise(y * 0.13, T * 3.1) - 0.5) * 1.3 * (0.9 + crackle * 0.6);\n    const fast = (noise(y * 0.37 + 17, T * 7.3) - 0.5) * 0.7 * (0.9 + crackle * 2.4);\n    shift[y] = gust * (0.25 + 0.6 * up) + slow + fast;\n  }\n\n  // Half the loss a row of the 64-row panel had, so the flames climb twice as many rows.\n  const lose = 1.7 / (12 + height * 32);\n  for (let y = 0; y \u003c BH - 2; y++) {\n    const below = (y + 1) * W;\n    const below2 = (y + 2) * W;\n    const crow = ((y + n) % BH) * W;\n    const sx = shift[y];\n    const i0 = Math.floor(sx);\n    const f = sx - i0;\n    for (let x = 0; x \u003c W; x++) {\n      // Sample the row below, moved sideways by the wind, with a soft three-tap blur.\n      const b = x - i0;\n      const am = heat[below + ((b - 1 + W * 4) % W)];\n      const a0 = heat[below + ((b + W * 4) % W)];\n      const a1 = heat[below + ((b + 1 + W * 4) % W)];\n      const ap = heat[below + ((b - 2 + W * 4) % W)];\n      const l = am * (1 - f) + ap * f;\n      const c = a0 * (1 - f) + am * f;\n      const r = a1 * (1 - f) + a0 * f;\n      const d = heat[below2 + ((b + W * 4) % W)] * (1 - f) + heat[below2 + ((b - 1 + W * 4) % W)] * f;\n      const v = (l + 6 * c + r) * 0.09375 + d * 0.25 - cool[crow + x] * lose;\n      next[y * W + x] = v > 0 ? v : 0;\n    }\n  }\n  for (let i = 0; i \u003c (BH - 2) * W; i++) heat[i] = next[i];\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  const height = Math.max(0.1, k[1]);\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const crackle = Math.max(0, Math.min(1, k[3]));\n\n  // Colour: five palettes in a row, each held for a while before it blends into the next.\n  const pos = Math.max(0, Math.min(1, k[0])) * (PALETTES.length - 1);\n  if (pos !== params.lutKey) {\n    params.lutKey = pos;\n    const a = Math.min(PALETTES.length - 2, Math.floor(pos));\n    const u = pos - a;\n    const g = Math.max(0, Math.min(1, (u - 0.2) / 0.6));\n    const m = g * g * (3 - 2 * g);\n    const la = params.luts[a];\n    const lb = params.luts[a + 1];\n    for (let i = 0; i \u003c la.length; i++) params.lut[i] = la[i] * (1 - m) + lb[i] * m;\n  }\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.flare = 1;\n    for (let j = 0; j \u003c 30; j++) throwEmber(params, wind, Math.random() * W);\n  }\n  params.flare = Math.max(0, params.flare - dt * 0.6);\n\n  params.acc += dt * STEPS;\n  let steps = Math.floor(params.acc);\n  params.acc -= steps;\n  if (steps > 6) steps = 6;\n  // A pop: a knot in the wood bursts, a hot spot flares in the bed and spits a handful of sparks.\n  params.popClock += dt * crackle * crackle * 4;\n  for (let j = 0; j \u003c POPS; j++) params.popS[j] *= Math.exp(-dt * 4);\n  while (params.popClock >= 1) {\n    params.popClock -= 1;\n    let j = 0;\n    for (let m = 1; m \u003c POPS; m++) if (params.popS[m] \u003c params.popS[j]) j = m;\n    params.popX[j] = 6 + Math.random() * (W - 12);\n    params.popS[j] = 1;\n    const n = 4 + Math.floor(Math.random() * 8);\n    for (let m = 0; m \u003c n; m++) throwEmber(params, wind, params.popX[j]);\n  }\n  // The first frame finds the fire already burning rather than a cold grate.\n  if (!params.started) {\n    params.started = true;\n    steps = 150;\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, height + params.flare * 1.2, wind, crackle);\n\n  params.spark += dt * (crackle * crackle * 40 + crackle * 6);\n  while (params.spark >= 1) {\n    params.spark -= 1;\n    throwEmber(params, wind, Math.random() * W);\n  }\n  const t = params.t;\n  for (let i = 0; i \u003c E; i++) {\n    if (params.eage[i] >= params.elife[i]) continue;\n    params.eage[i] += dt;\n    // Sparks ride the hot air: they wander, slow as they cool, and drift with the wind.\n    params.evx[i] += ((Math.sin(t * 7 + i * 1.7) * 30) + (wind * 26 - params.evx[i]) * 1.2) * dt;\n    params.evy[i] += (-params.evy[i] * 0.6 - 6) * dt;\n    params.ex[i] += params.evx[i] * dt;\n    params.ey[i] += params.evy[i] * dt;\n    if (params.ey[i] \u003c -2) params.eage[i] = params.elife[i];\n  }\n}\n\nexport function draw(display, params, time) {\n  const heat = params.heat;\n  const lut = params.lut;\n  const buf = params.buf;\n  for (let i = 0; i \u003c W * H; i++) {\n    let v = heat[i];\n    if (v > 1) v = 1;\n    const c = Math.floor(v * 255) * 3;\n    buf[i * 3] = lut[c];\n    buf[i * 3 + 1] = lut[c + 1];\n    buf[i * 3 + 2] = lut[c + 2];\n  }\n  for (let i = 0; i \u003c E; i++) {\n    if (params.eage[i] >= params.elife[i]) continue;\n    const life = 1 - params.eage[i] / params.elife[i];\n    // An ember is drawn with the palette as it cools: white-hot, then its own colour, then out.\n    const c = Math.floor((0.35 + 0.65 * life) * 255) * 3;\n    const ex = params.ex[i];\n    const ey = params.ey[i];\n    const x0 = Math.floor(ex - 0.5);\n    const y0 = Math.floor(ey - 0.5);\n    for (let yy = y0; yy \u003c= y0 + 1; yy++) {\n      if (yy \u003c 0 || yy >= H) continue;\n      const wy = 1 - Math.abs(yy + 0.5 - ey);\n      for (let xx = x0; xx \u003c= x0 + 1; xx++) {\n        if (xx \u003c 0 || xx >= W) continue;\n        const w = wy * (1 - Math.abs(xx + 0.5 - ex)) * Math.min(1, life * 3);\n        if (w \u003c= 0) continue;\n        const o = (yy * W + xx) * 3;\n        buf[o] = Math.min(255, buf[o] + lut[c] * w);\n        buf[o + 1] = Math.min(255, buf[o + 1] + lut[c + 1] * w);\n        buf[o + 2] = Math.min(255, buf[o + 2] + lut[c + 2] * w);\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, buf[o], buf[o + 1], buf[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Colour=0..1, Height=0.6..4, Wind=-1..1, Crackle=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Colour","min":0,"max":1,"about":"What is burning: wood, then potassium lilac, gas blue, copper teal and boron green."},{"name":"Height","min":0.6,"max":4,"about":"How far the flames climb before they cool, from low licks along the bottom to a wall that leaves the top."},{"name":"Wind","min":-1,"max":1,"about":"At 0 the flames stand up; either way they lean and the gusts come with it."},{"name":"Crackle","min":0,"max":1,"about":"Rougher air in the flames, pops of heat in the bed, and sparks thrown up out of them, from the odd one to a shower."}],"start":[0,2,0,0.06],"measures":{"motion":0.9647,"detail":0.0218,"edges":0.1201,"complexity":0.8283,"coverage":0.5059,"colour":0.4964,"drift":0.2161},"knobResponse":[0.3207,0.2786,0.0846,0.0537]},{"slug":"fireflies","title":"Fireflies","family":"insect","round":16,"note":"풀밭 위 반딧불이 200마리가 따로 깜박이다가 서로의 깜박임을 보고 박자를 맞춰, 한꺼번에 깜박이는 무리와 어두운 쉼이 번갈아 와요. K4 가 결합의 세기이고, K1 을 누르면 손전등이 지나가며 박자를 흩어요.","idea":"Synchronous fireflies over a meadow under the trees flash out of step at first, then pull each other into bursts of flashes in unison with dark pauses between, because each one's clock jumps ahead when it sees a neighbour flash.","buttons":"K1 tap sweeps a bare flashlight across the meadow from left to right; every firefly in the beam goes dark and loses its place in both its clocks, and the sync has to form again.","code":"// ===== Patternflow pattern =====\n// Title:   Fireflies\n// Family:  insect\n// Idea:    Synchronous fireflies over a meadow under the trees flash out of step at first, then pull each other into bursts of flashes in unison with dark pauses between, because each one's clock jumps ahead when it sees a neighbour flash.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Mirollo and Strogatz's pulse-coupled oscillators (1990), after the synchronous firefly Photinus carolinus at Elkmont in the Great Smoky Mountains\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Moon=0..1, Pace=0.5..4, Fireflies=200..480, Coupling=0..0.25\n//\n// Knob 1: Moon. At 0 a moonless night; turned up, a moon climbs out of the far trees into a gap in the leaves, the sky and the grass go silver, and fewer fireflies fly, down to one in four at full moon.\n// Knob 2: Pace. At 2 the flashes in a burst come half a second apart, as Photinus carolinus flashes, and a burst comes round every 5.5 s; at 0.5 the flashes are two seconds apart, at 4 a quarter second, and the fireflies fly faster with it.\n// Knob 3: Fireflies. How many are out, from 200 to 480; half of them are farther than 5.5 m and show as sparks along the forest edge.\n// Knob 4: Coupling. How far a clock jumps for each flash it sees: at 0 every firefly keeps its own time and the meadow twinkles for ever; at 0.06 the flashes fall into step within a few seconds and the first dark pauses open; at 0.25 the swarm locks in its first burst.\n// Buttons: K1 tap sweeps a bare flashlight across the meadow from left to right; every firefly in the beam goes dark and loses its place in both its clocks, and the sync has to form again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXF = 480;\n// The camera: eye 1.5 m above the meadow, the horizon on row 74, 56 LEDs to one unit of tan.\nconst EYE = 1.5;\nconst HOR = 74;\nconst FOC = 56;\nconst NEAR = 1.4;\nconst FAR = 22;\n// What stands in the way, by distance: tall grass at our feet, a tulip poplar 6 m off whose\n// crown hangs over the top of the panel, a thinner trunk at 10 m and the far forest edge.\nconst GRASS_D = 2.2;\nconst TREE_D = 6;\nconst TREE2_D = 10;\nconst EDGE_D = 30;\nconst SKY_D = 1e6;\n\n// Two clocks in each firefly. The flash clock beats every half second; the burst clock comes\n// round every 5.5 s and opens a burst of four to six flashes on the next beats. Photinus\n// carolinus flashes five to eight times and then waits six to nine seconds; the panel keeps\n// the half second and shortens the wait, so a burst comes round inside a few seconds.\nconst GAP = 0.5;\nconst CYCLE = 5.5;\n// Mirollo and Strogatz's state curve x = ln(1 + (e^b - 1) phase) / b. It is concave, so a seen\n// flash moves a clock that is far from firing a little and one about to fire a lot, and the\n// ones pushed over the top fire together with the flash that pushed them.\nconst BEND = 3;\nconst EB = Math.exp(BEND) - 1;\n// For the first quarter of a beat after its own flash a firefly does not respond, and for the\n// first 55% of its burst cycle its burst clock does not either. Without the first, a crowd\n// flashing over two frames shoves every clock round again and the beat runs away.\nconst REST = 0.25;\nconst OPEN = 0.55;\n// How hard the coupling knob pulls each clock, for the share of neighbours seen flashing.\n// The burst clock only hears first flashes, the flash that ends somebody's dark.\nconst KF = 3;\nconst KB = 16;\n\n// Who sees whom: the panel in 8 x 8 LED cells, and a flash seen from a cell d cells away\n// counts e^(-d / 2.2), so a firefly sees about 20 LEDs round it well and nothing more than 40\n// rows away.\nconst CS = 8;\nconst GX = W / CS;\nconst GY = H / CS;\nconst SIGHT = 2.2;\n// Seconds the swarm runs before the first frame.\nconst PRE = 3;\n\n// The flash: up in 30 ms, held for 150 ms while it sags a little, then out in a fast fade,\n// gone a third of a second after it began. A firefly's lantern blinks rather than swells.\nconst RISE = 0.03;\nconst HOLD = 0.18;\nconst FADE = 0.05;\nconst LIGHT_END = 0.32;\n\n// Glows by distance: nearer than 2.6 m, 5 m, 10 m, and beyond. Each is a lantern, one LED\n// and a little cross round it, in a halo whose sigma (in LEDs) grows as it comes closer; the\n// farthest are the lantern alone.\nconst HALO_SIG = [1, 1.2, 1.8, 2.6];\nconst HALO = [0, 0.45, 0.5, 0.55];\nconst CORE = [0.75, 0.5, 0.5, 0.5];\nconst CROSS = [0.19, 0.12, 0.15, 0.2];\nconst REACH = [1, 3, 5, 7];\n\n// The females wait low in the grass and answer a burst with one dimmer flash in the dark after it.\nconst FEM = 14;\nconst REPLY = 0.6;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction fwd(phase) {\n  return Math.log(1 + EB * phase) / BEND;\n}\n\nfunction inv(x) {\n  return (Math.exp(BEND * x) - 1) / EB;\n}\n\nfunction envelope(age) {\n  if (age \u003c RISE) return age / RISE;\n  if (age \u003c HOLD) return 1 - (0.15 * (age - RISE)) / (HOLD - RISE);\n  return 0.85 * Math.exp(-(age - HOLD) / FADE);\n}\n\nfunction q4(v) {\n  const q = Math.round(v / 4) * 4;\n  return q > 255 ? 255 : q;\n}\n\nfunction sizeOf(d) {\n  return d \u003c 2.6 ? 3 : d \u003c 5 ? 2 : d \u003c 10 ? 1 : 0;\n}\n\n// Sprites: dx, dy and weight for each glow size.\nfunction makeSprites() {\n  const out = [];\n  for (let c = 0; c \u003c 4; c++) {\n    const s = [];\n    const r = REACH[c];\n    const k = 1 / (2 * HALO_SIG[c] * HALO_SIG[c]);\n    for (let dy = -r; dy \u003c= r; dy++)\n      for (let dx = -r; dx \u003c= r; dx++) {\n        const ring = Math.abs(dx) + Math.abs(dy);\n        const w = HALO[c] * Math.exp(-(dx * dx + dy * dy) * k) + (ring === 0 ? CORE[c] : ring === 1 ? CROSS[c] : 0);\n        if (w > 0.02) s.push(dx, dy, w);\n      }\n    out.push(s);\n  }\n  return out;\n}\n\n// Smooth value noise on a line and on the plane, 0..1.\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction noise2(x, y, seed) {\n  const i = Math.floor(x);\n  const j = Math.floor(y);\n  const u = smooth(0, 1, x - i);\n  const v = smooth(0, 1, y - j);\n  const a = hash(i + 131 * j, seed);\n  const b = hash(i + 1 + 131 * j, seed);\n  const c = hash(i + 131 * (j + 1), seed);\n  const d = hash(i + 1 + 131 * (j + 1), seed);\n  return (a * (1 - u) + b * u) * (1 - v) + (c * (1 - u) + d * u) * v;\n}\n\n// What each LED shows before any firefly: the scene drawn once as a map of parts.\nconst SKY = 0;\nconst MEADOW = 1;\nconst EDGE = 2;\nconst TRUNK2 = 3;\nconst TRUNK = 4;\nconst TRUNK_LIT = 5;\nconst CROWN = 6;\nconst BLADE = 7;\nconst TIP = 8;\nconst DEPTH = [SKY_D, SKY_D, EDGE_D, TREE2_D, TREE_D, TREE_D, TREE_D, GRASS_D, GRASS_D];\n// How much of the flashlight each part sends back: the haze of the sky, the far trees, bark.\nconst SURF = [0.15, 0.5, 0.3, 0.7, 0.9, 0.9, 0.5, 1, 1];\n\nfunction drawScene(P) {\n  const mask = P.mask;\n  // The far forest edge 30 m off: a row of crowns, most of them the round heads of tulip\n  // poplar and one in three the drooping point of a hemlock.\n  const top = new Float32Array(W).fill(HOR - 6);\n  for (let k = -1; k \u003c 13; k++) {\n    const cx = k * 5.5 + 4 * hash(k + 9, 12);\n    const w = 3 + 4 * hash(k + 9, 13);\n    const h = 5 + 11 * hash(k + 9, 14);\n    const hemlock = hash(k + 9, 15) \u003c 0.33;\n    for (let x = 0; x \u003c W; x++) {\n      const u = Math.abs(x - cx) / w;\n      if (u >= 1) continue;\n      const lift = hemlock ? h * 1.2 * (1 - u) ** 1.3 : h * Math.sqrt(1 - u * u);\n      top[x] = Math.min(top[x], HOR - 6 - lift);\n    }\n  }\n  const footA = HOR + (FOC * EYE) / TREE_D;\n  const footB = HOR + (FOC * EYE) / TREE2_D;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let m = y \u003c HOR ? SKY : MEADOW;\n      if (y \u003c= HOR && y >= top[x] + noise1(x * 0.7, 16) * 1.5) m = EDGE;\n      if (x >= 50 && x \u003c= 52 && y \u003c= footB) m = TRUNK2;\n      // The near trunk, 7 LEDs wide at the foot and 5 under the crown; a moon catches its right side.\n      const taper = 1 - y / footA;\n      if (x >= 3 + taper && x \u003c= 9 - taper && y \u003c= footA) m = x >= 8 - taper ? TRUNK_LIT : TRUNK;\n      // A limb leaves the trunk at row 50 and climbs into the leaves.\n      const t = clamp((x - 8) / 17, 0, 1);\n      const ly = 50 - 22 * t;\n      if (x >= 8 && x \u003c= 25 && Math.abs(y - ly - 2 * t * (1 - t)) \u003c 1.1 - 0.4 * t) m = TRUNK;\n      // The crown's lower edge hangs in lobes, high on the right where a window of sky opens for\n      // the moon; inside it the leaves part here and there.\n      const edge = 31 + 10 * (noise1(x / 7, 31) - 0.5) + 5 * (noise1(x / 2.7, 32) - 0.5) - 19 * smooth(27, 42, x) * (1 - smooth(57, 66, x));\n      if (y \u003c edge && !(y > 3 && y \u003c edge - 3 && noise2(x / 4.5, y / 3.5, 33) > 0.76)) m = CROWN;\n      mask[y * W + x] = m;\n    }\n  // Tall grass at our feet: blades leaning and bending, and seed heads on a few.\n  for (let k = 0; k \u003c 52; k++) {\n    const x0 = hash(k, 51) * W;\n    const tall = 9 + 20 * hash(k, 52) ** 1.5;\n    const lean = (hash(k, 53) - 0.5) * 0.5;\n    const bend = (hash(k, 54) - 0.5) * 0.02;\n    const head = hash(k, 55) \u003c 0.3;\n    for (let j = 0; j \u003c tall; j++) {\n      const x = Math.round(x0 + lean * j + bend * j * j);\n      const y = 127 - j;\n      if (x \u003c 0 || x >= W) continue;\n      const tip = j > tall - 3;\n      mask[y * W + x] = tip ? TIP : BLADE;\n      if (head && tip && x + 1 \u003c W) mask[y * W + x + 1] = TIP;\n    }\n  }\n}\n\nfunction bake(P, moon) {\n  const { bg, occ, surf, mask } = P;\n  const m = moon;\n  // The moon climbs from behind the far trees into the window in the leaves.\n  const mx = 46;\n  const my = HOR - 8 - 44 * smooth(0, 1, m);\n  const lv = smooth(0, 0.3, m);\n  for (let y = 0; y \u003c H; y++) {\n    const up = y / HOR;\n    const far = 1 - (y - HOR) / (H - HOR);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const part = mask[p];\n      let r;\n      let g;\n      let b;\n      if (part === SKY) {\n        // Deep blue overhead, paler down at the trees.\n        const lift = 0.55 + 0.45 * up;\n        r = 4 + 6 * up + 24 * m * lift;\n        g = 8 + 10 * up + 34 * m * lift;\n        b = 22 + 20 * up + 48 * m * lift;\n        if (m > 0) {\n          const dd = Math.sqrt((x - mx) ** 2 + (y - my) ** 2);\n          const disc = 1 - smooth(2.4, 3.4, dd);\n          const glow = Math.exp(-dd / 8) * 0.5;\n          r += lv * (disc * 210 + glow * 40);\n          g += lv * (disc * 208 + glow * 46);\n          b += lv * (disc * 186 + glow * 54);\n        }\n      } else if (part === MEADOW) {\n        // A faint sheen of sky on the far grass, darker at our feet.\n        r = 2 + 3 * far + 16 * m * (0.5 + 0.5 * far);\n        g = 4 + 4 * far + 24 * m * (0.5 + 0.5 * far);\n        b = 4 + 5 * far + 22 * m * (0.5 + 0.5 * far);\n      } else if (part === EDGE) {\n        r = 2 + 6 * m;\n        g = 4 + 10 * m;\n        b = 8 + 13 * m;\n      } else if (part === TRUNK2) {\n        r = 2 + 9 * m;\n        g = 3 + 10 * m;\n        b = 5 + 12 * m;\n      } else if (part === TRUNK || part === TRUNK_LIT) {\n        const lit = part === TRUNK_LIT ? 1 : 0.35;\n        r = 1 + 14 * m * lit;\n        g = 2 + 15 * m * lit;\n        b = 3 + 16 * m * lit;\n      } else if (part === CROWN) {\n        r = 1 + 6 * m;\n        g = 2 + 9 * m;\n        b = 4 + 10 * m;\n      } else {\n        // Grass: under a moon the tips catch the light.\n        const tip = part === TIP ? 1 : 0.5;\n        r = 1 + 12 * m * tip;\n        g = 2 + 18 * m * tip;\n        b = 2 + 14 * m * tip;\n      }\n      bg[p * 3] = r;\n      bg[p * 3 + 1] = g;\n      bg[p * 3 + 2] = b;\n      occ[p] = DEPTH[part];\n      surf[p] = part === MEADOW ? 0.35 + 0.65 * (1 - far) : SURF[part];\n    }\n  }\n  // Stars between the leaves and the far trees, fainter as the moon comes up.\n  for (let i = 0; i \u003c 30; i++) {\n    const x = Math.floor(hash(i * 7 + 3, 21) * W);\n    const y = Math.floor(2 + hash(i * 5 + 1, 22) * 62);\n    const p = y * W + x;\n    if (mask[p] !== SKY) continue;\n    const v = (34 + 56 * hash(i, 23)) * (1 - 0.65 * m);\n    bg[p * 3] += v * 0.85;\n    bg[p * 3 + 1] += v * 0.9;\n    bg[p * 3 + 2] += v;\n  }\n  P.baked = moon;\n}\n\nfunction burstLength() {\n  return 4 + Math.floor(Math.random() * 3);\n}\n\nfunction spawn(P, i) {\n  // Distance log-uniform from 1.4 to 22 m: as many between 2 and 4 m as between 10 and 20.\n  const d = NEAR * Math.pow(FAR / NEAR, Math.random());\n  P.d[i] = d;\n  P.X[i] = (Math.random() - 0.5) * (W / FOC) * d * 1.2;\n  // Three in ten keep low over the grass, most fly a metre to three metres up, and one in\n  // seven is up in the leaves.\n  const u = Math.random();\n  P.h[i] = u \u003c 0.3 ? 0.15 + Math.random() * 0.65 : u \u003c 0.86 ? 0.8 + Math.random() * 2.4 : 3.2 + Math.random() * 4.5;\n  const a = Math.random() * Math.PI * 2;\n  P.vx[i] = Math.cos(a) * 0.3;\n  P.vh[i] = (Math.random() - 0.5) * 0.1;\n  P.vd[i] = Math.sin(a) * 0.3;\n  // Each clock runs a little fast or slow: the beat within 3%, the burst within 5%.\n  P.tr[i] = (1 + (Math.random() - 0.5) * 0.06) / GAP;\n  P.pr[i] = (1 + (Math.random() - 0.5) * 0.1) / CYCLE;\n  P.th[i] = Math.random();\n  P.ps[i] = Math.random();\n  P.nf[i] = burstLength();\n  P.left[i] = Math.max(0, P.nf[i] - Math.floor((P.ps[i] * CYCLE) / GAP));\n  P.age[i] = 9;\n  P.hold[i] = 0;\n  P.shy[i] = Math.random();\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const key of [\"X\", \"h\", \"d\", \"vx\", \"vh\", \"vd\", \"tr\", \"pr\", \"th\", \"ps\", \"age\", \"hold\", \"shy\"]) P[key] = new Float32Array(MAXF);\n  P.nf = new Uint8Array(MAXF);\n  P.left = new Uint8Array(MAXF);\n  P.last = new Uint8Array(MAXF);\n  P.sx = new Int16Array(MAXF);\n  P.sy = new Int16Array(MAXF);\n  P.cell = new Int16Array(MAXF);\n  // Flashes and first flashes that began last frame, and fireflies flying, per cell; and the\n  // same three as each cell sees them through the sight kernel.\n  const G = GX * GY;\n  for (const key of [\"pa\", \"pf\", \"pc\", \"na\", \"nf2\", \"nc\", \"sa\", \"sf\", \"sc\"]) P[key] = new Float32Array(G);\n  P.kern = new Float32Array(G);\n  for (let y = 0; y \u003c GY; y++) for (let x = 0; x \u003c GX; x++) P.kern[y * GX + x] = Math.exp(-Math.sqrt(x * x + y * y) / SIGHT);\n  P.bg = new Float32Array(N * 3);\n  P.mask = new Uint8Array(N);\n  drawScene(P);\n  P.occ = new Float32Array(N);\n  P.surf = new Float32Array(N);\n  P.lum = new Float32Array(N);\n  P.ang = new Float32Array(N);\n  P.sprites = makeSprites();\n  // The flashlight is held at our chest, below the bottom of the panel.\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) P.ang[y * W + x] = Math.atan2(x - 32, 170 - y);\n  for (let i = 0; i \u003c MAXF; i++) spawn(P, i);\n  // The females sit still, low in the grass, 1.6 to 4 m away.\n  P.fx = new Int16Array(FEM);\n  P.fy = new Int16Array(FEM);\n  P.fd = new Float32Array(FEM);\n  P.fmem = new Float32Array(FEM);\n  P.fwait = new Float32Array(FEM);\n  P.fage = new Float32Array(FEM).fill(9);\n  for (let j = 0; j \u003c FEM; j++) {\n    const d = 1.6 + 2.4 * hash(j, 41);\n    P.fd[j] = d;\n    P.fx[j] = Math.round(4 + 56 * hash(j, 42));\n    P.fy[j] = Math.round(HOR + (FOC * (EYE - 0.15 - 0.3 * hash(j, 43))) / d);\n  }\n  Object.assign(P, { count: 200, moon: 0, baked: -1, torch: -1, beam: 0, beamOn: 0, started: false });\n}\n\nfunction flash(P, i, first) {\n  P.age[i] = 0;\n  P.na[P.cell[i]] += 1;\n  if (first) P.nf2[P.cell[i]] += 1;\n  P.last[i] = first ? 3 : 1;\n}\n\n// Spread the last frame's flashes and the crowd through the sight kernel, from each cell\n// that holds any to every cell within five rows of cells.\nfunction look(P) {\n  const { pa, pf, pc, sa, sf, sc, kern } = P;\n  sa.fill(0);\n  sf.fill(0);\n  sc.fill(0);\n  for (let s = 0; s \u003c GX * GY; s++) {\n    const a = pa[s];\n    const f = pf[s];\n    const c = pc[s];\n    if (a === 0 && c === 0) continue;\n    const sx = s % GX;\n    const sy = (s / GX) | 0;\n    for (let ty = Math.max(0, sy - 5); ty \u003c= Math.min(GY - 1, sy + 5); ty++) {\n      const row = Math.abs(ty - sy) * GX;\n      for (let tx = 0; tx \u003c GX; tx++) {\n        const k = kern[row + Math.abs(tx - sx)];\n        const t = ty * GX + tx;\n        sa[t] += a * k;\n        sf[t] += f * k;\n        sc[t] += c * k;\n      }\n    }\n  }\n}\n\nfunction advance(P, step, pace, count, eps, moon) {\n  // Last frame's flashes become what is seen this frame.\n  for (const [a, b] of [\n    [\"pa\", \"na\"],\n    [\"pf\", \"nf2\"],\n    [\"pc\", \"nc\"],\n  ]) {\n    const t = P[a];\n    P[a] = P[b];\n    P[b] = t;\n    P[b].fill(0);\n  }\n  look(P);\n  const { sa, sf, sc } = P;\n  // Fewer fly under a bright moon.\n  const shyLine = 0.75 * moon;\n\n  for (let i = 0; i \u003c count; i++) {\n    const out = P.shy[i] \u003c shyLine;\n    if (P.age[i] \u003c 9) P.age[i] += step;\n    const c = P.cell[i];\n    let seeA = 0;\n    let seeF = 0;\n    if (!out && P.hold[i] \u003c= 0) {\n      // What counts is the share of the neighbours seen flashing, so a thick swarm does not\n      // shove every clock round at once. A firefly does not see its own flash.\n      const crowd = Math.max(3, sc[c] - 1);\n      seeA = (sa[c] - (P.last[i] & 1)) / crowd;\n      seeF = (sf[c] - (P.last[i] >> 1)) / crowd;\n    }\n    P.last[i] = 0;\n    if (P.hold[i] > 0) P.hold[i] -= step;\n\n    let p = P.ps[i] + step * P.pr[i];\n    if (p > OPEN && seeF > 0 && eps > 0) {\n      const q = (p - OPEN) / (1 - OPEN);\n      const x = fwd(Math.min(1, q)) + eps * KB * seeF;\n      p = x >= 1 ? 1 : OPEN + (1 - OPEN) * inv(x);\n    }\n    if (p >= 1) {\n      p = 0;\n      P.nf[i] = burstLength();\n      P.left[i] = P.nf[i];\n    }\n    P.ps[i] = p;\n\n    let t = P.th[i] + step * P.tr[i];\n    if (t > REST && seeA > 0 && eps > 0) {\n      const u = (t - REST) / (1 - REST);\n      const x = fwd(Math.min(1, u)) + eps * KF * seeA;\n      t = x >= 1 ? 1 : REST + (1 - REST) * inv(x);\n    }\n    if (t >= 1) {\n      t = 0;\n      if (P.left[i] > 0) {\n        const first = P.left[i] === P.nf[i];\n        P.left[i]--;\n        if (!out && P.hold[i] \u003c= 0) flash(P, i, first);\n      }\n    }\n    P.th[i] = t;\n\n    // Flight: a slow wander, about a third of a metre a second, turning gently.\n    const fly = step * (0.6 + 0.4 * Math.min(2, pace / 2));\n    P.vx[i] += (Math.random() - 0.5) * 0.4 * fly;\n    P.vd[i] += (Math.random() - 0.5) * 0.4 * fly;\n    P.vh[i] += (Math.random() - 0.5) * 0.2 * fly - P.vh[i] * 0.5 * fly;\n    const sp = Math.sqrt(P.vx[i] * P.vx[i] + P.vd[i] * P.vd[i]);\n    if (sp > 0.45) {\n      P.vx[i] *= 0.45 / sp;\n      P.vd[i] *= 0.45 / sp;\n    }\n    let d = P.d[i] + P.vd[i] * fly;\n    if (d \u003c NEAR || d > FAR) {\n      P.vd[i] = -P.vd[i];\n      d = clamp(d, NEAR, FAR);\n    }\n    P.d[i] = d;\n    let X = P.X[i] + P.vx[i] * fly;\n    const half = (0.6 * W * d) / FOC;\n    if (X > half) X -= 2 * half;\n    else if (X \u003c -half) X += 2 * half;\n    P.X[i] = X;\n    let h = P.h[i] + P.vh[i] * fly;\n    if (h \u003c 0.2 || h > 8) {\n      P.vh[i] = -P.vh[i];\n      h = clamp(h, 0.2, 8);\n    }\n    P.h[i] = h;\n    const sx = Math.round(W / 2 + (FOC * X) / d);\n    const sy = Math.round(HOR + (FOC * (EYE - h)) / d);\n    P.sx[i] = sx;\n    P.sy[i] = sy;\n    P.cell[i] = clamp(sy >> 3, 0, GY - 1) * GX + clamp(sx >> 3, 0, GX - 1);\n    if (!out) P.nc[P.cell[i]] += 1;\n\n    // The flashlight: a firefly in the beam goes dark and loses its place in both clocks. At\n    // Elkmont the park asks for red cellophane over the lens and the beam kept on the ground.\n    // This one is bare.\n    if (P.beamOn > 0.3 && sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H) {\n      const a = P.ang[sy * W + sx];\n      if (Math.abs(a - P.beam) \u003c 0.14) {\n        P.th[i] = Math.random();\n        P.ps[i] = Math.random() * OPEN;\n        P.left[i] = 0;\n        P.hold[i] = 0.8;\n        if (P.age[i] \u003c LIGHT_END) P.age[i] = LIGHT_END;\n      }\n    }\n  }\n\n  // The females: each listens to the flashes round her and, once they stop, answers.\n  for (let j = 0; j \u003c FEM; j++) {\n    if (P.fage[j] \u003c 9) P.fage[j] += step;\n    const c = clamp(P.fy[j] >> 3, 0, GY - 1) * GX + clamp(P.fx[j] >> 3, 0, GX - 1);\n    const heard = sa[c] / Math.max(3, sc[c]);\n    if (heard > 0.04) {\n      P.fmem[j] = Math.min(1, P.fmem[j] + heard);\n      P.fwait[j] = REPLY * (0.8 + 0.4 * hash(j, 44));\n    } else if (P.fmem[j] > 0.25) {\n      P.fwait[j] -= step;\n      if (P.fwait[j] \u003c= 0) {\n        P.fage[j] = 0;\n        P.fmem[j] = 0;\n      }\n    } else P.fmem[j] = Math.max(0, P.fmem[j] - step * 0.2);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 200, 0.06];\n  dt = Math.min(dt, 0.1);\n  const moon = clamp(k[0], 0, 1);\n  const pace = Math.max(0.1, k[1]);\n  const step = (dt * pace) / 2;\n  const count = clamp(Math.round(k[2]), 0, MAXF);\n  const eps = Math.max(0, k[3]);\n  P.count = count;\n  P.moon = moon;\n  if (Math.abs(P.baked - moon) > 0.004) bake(P, moon);\n\n  if (input.btnPressed && input.btnPressed[0]) P.torch = 0;\n  if (P.torch >= 0) {\n    P.torch += dt;\n    const u = P.torch / 2.4;\n    P.beam = -0.9 + 1.8 * smooth(0, 1, u);\n    P.beamOn = smooth(0, 0.06, u) * (1 - smooth(0.92, 1, u));\n    if (u >= 1) {\n      P.torch = -1;\n      P.beamOn = 0;\n    }\n  }\n\n  if (!P.started) {\n    // The night is under way when the panel opens: the swarm has had three seconds to start\n    // finding its beat.\n    P.started = true;\n    for (let i = 0; i \u003c PRE * 30; i++) advance(P, (pace / 2) / 30, pace, count, eps, moon);\n  }\n  advance(P, step, pace, count, eps, moon);\n}\n\nfunction splat(P, sx, sy, d, e) {\n  const lum = P.lum;\n  const occ = P.occ;\n  const spr = P.sprites[sizeOf(d)];\n  for (let j = 0; j \u003c spr.length; j += 3) {\n    const x = sx + spr[j];\n    const y = sy + spr[j + 1];\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = y * W + x;\n    if (occ[p] \u003c d) continue;\n    lum[p] += e * spr[j + 2];\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  P.lum.fill(0);\n  const shyLine = 0.75 * P.moon;\n  for (let i = 0; i \u003c P.count; i++) {\n    const age = P.age[i];\n    if (age >= LIGHT_END || P.shy[i] \u003c shyLine) continue;\n    splat(P, P.sx[i], P.sy[i], P.d[i], envelope(age));\n  }\n  // A female's answer is dimmer and slower to fade.\n  for (let j = 0; j \u003c FEM; j++) {\n    const age = P.fage[j] * 0.6;\n    if (age >= LIGHT_END) continue;\n    splat(P, P.fx[j], P.fy[j], P.fd[j], envelope(age) * 0.5);\n  }\n  const { bg, surf, lum, ang } = P;\n  const beamOn = P.beamOn;\n  const beam = P.beam;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = bg[p * 3];\n      let g = bg[p * 3 + 1];\n      let b = bg[p * 3 + 2];\n      const v = lum[p];\n      if (v > 0.004) {\n        // 560 nm is a yellow green; past full the core runs pale.\n        const t = v \u003c 1 ? v : 1;\n        const hot = v > 0.8 ? Math.min(1, (v - 0.8) / 0.7) : 0;\n        r += 182 * t + 50 * hot;\n        g += 255 * t;\n        b += 12 * t + 110 * hot;\n      }\n      if (beamOn > 0) {\n        const da = ang[p] - beam;\n        const I = beamOn * Math.exp(-(da * da) / 0.016) * surf[p] * (0.5 + (0.5 * y) / H);\n        r += 150 * I;\n        g += 138 * I;\n        b += 112 * I;\n      }\n      // Every channel in steps of 4: on the panel 64 steps look the same as 256, and the dark\n      // gradients stop being noise.\n      display.setPixel(x, y, q4(r), q4(g), q4(b));\n    }\n}\n","layer":{"id":"layer-fireflies","type":"code","name":"fireflies","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Fireflies\n// Family:  insect\n// Idea:    Synchronous fireflies over a meadow under the trees flash out of step at first, then pull each other into bursts of flashes in unison with dark pauses between, because each one's clock jumps ahead when it sees a neighbour flash.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Mirollo and Strogatz's pulse-coupled oscillators (1990), after the synchronous firefly Photinus carolinus at Elkmont in the Great Smoky Mountains\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Moon=0..1, Pace=0.5..4, Fireflies=200..480, Coupling=0..0.25\n//\n// Knob 1: Moon. At 0 a moonless night; turned up, a moon climbs out of the far trees into a gap in the leaves, the sky and the grass go silver, and fewer fireflies fly, down to one in four at full moon.\n// Knob 2: Pace. At 2 the flashes in a burst come half a second apart, as Photinus carolinus flashes, and a burst comes round every 5.5 s; at 0.5 the flashes are two seconds apart, at 4 a quarter second, and the fireflies fly faster with it.\n// Knob 3: Fireflies. How many are out, from 200 to 480; half of them are farther than 5.5 m and show as sparks along the forest edge.\n// Knob 4: Coupling. How far a clock jumps for each flash it sees: at 0 every firefly keeps its own time and the meadow twinkles for ever; at 0.06 the flashes fall into step within a few seconds and the first dark pauses open; at 0.25 the swarm locks in its first burst.\n// Buttons: K1 tap sweeps a bare flashlight across the meadow from left to right; every firefly in the beam goes dark and loses its place in both its clocks, and the sync has to form again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXF = 480;\n// The camera: eye 1.5 m above the meadow, the horizon on row 74, 56 LEDs to one unit of tan.\nconst EYE = 1.5;\nconst HOR = 74;\nconst FOC = 56;\nconst NEAR = 1.4;\nconst FAR = 22;\n// What stands in the way, by distance: tall grass at our feet, a tulip poplar 6 m off whose\n// crown hangs over the top of the panel, a thinner trunk at 10 m and the far forest edge.\nconst GRASS_D = 2.2;\nconst TREE_D = 6;\nconst TREE2_D = 10;\nconst EDGE_D = 30;\nconst SKY_D = 1e6;\n\n// Two clocks in each firefly. The flash clock beats every half second; the burst clock comes\n// round every 5.5 s and opens a burst of four to six flashes on the next beats. Photinus\n// carolinus flashes five to eight times and then waits six to nine seconds; the panel keeps\n// the half second and shortens the wait, so a burst comes round inside a few seconds.\nconst GAP = 0.5;\nconst CYCLE = 5.5;\n// Mirollo and Strogatz's state curve x = ln(1 + (e^b - 1) phase) / b. It is concave, so a seen\n// flash moves a clock that is far from firing a little and one about to fire a lot, and the\n// ones pushed over the top fire together with the flash that pushed them.\nconst BEND = 3;\nconst EB = Math.exp(BEND) - 1;\n// For the first quarter of a beat after its own flash a firefly does not respond, and for the\n// first 55% of its burst cycle its burst clock does not either. Without the first, a crowd\n// flashing over two frames shoves every clock round again and the beat runs away.\nconst REST = 0.25;\nconst OPEN = 0.55;\n// How hard the coupling knob pulls each clock, for the share of neighbours seen flashing.\n// The burst clock only hears first flashes, the flash that ends somebody's dark.\nconst KF = 3;\nconst KB = 16;\n\n// Who sees whom: the panel in 8 x 8 LED cells, and a flash seen from a cell d cells away\n// counts e^(-d / 2.2), so a firefly sees about 20 LEDs round it well and nothing more than 40\n// rows away.\nconst CS = 8;\nconst GX = W / CS;\nconst GY = H / CS;\nconst SIGHT = 2.2;\n// Seconds the swarm runs before the first frame.\nconst PRE = 3;\n\n// The flash: up in 30 ms, held for 150 ms while it sags a little, then out in a fast fade,\n// gone a third of a second after it began. A firefly's lantern blinks rather than swells.\nconst RISE = 0.03;\nconst HOLD = 0.18;\nconst FADE = 0.05;\nconst LIGHT_END = 0.32;\n\n// Glows by distance: nearer than 2.6 m, 5 m, 10 m, and beyond. Each is a lantern, one LED\n// and a little cross round it, in a halo whose sigma (in LEDs) grows as it comes closer; the\n// farthest are the lantern alone.\nconst HALO_SIG = [1, 1.2, 1.8, 2.6];\nconst HALO = [0, 0.45, 0.5, 0.55];\nconst CORE = [0.75, 0.5, 0.5, 0.5];\nconst CROSS = [0.19, 0.12, 0.15, 0.2];\nconst REACH = [1, 3, 5, 7];\n\n// The females wait low in the grass and answer a burst with one dimmer flash in the dark after it.\nconst FEM = 14;\nconst REPLY = 0.6;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction fwd(phase) {\n  return Math.log(1 + EB * phase) / BEND;\n}\n\nfunction inv(x) {\n  return (Math.exp(BEND * x) - 1) / EB;\n}\n\nfunction envelope(age) {\n  if (age \u003c RISE) return age / RISE;\n  if (age \u003c HOLD) return 1 - (0.15 * (age - RISE)) / (HOLD - RISE);\n  return 0.85 * Math.exp(-(age - HOLD) / FADE);\n}\n\nfunction q4(v) {\n  const q = Math.round(v / 4) * 4;\n  return q > 255 ? 255 : q;\n}\n\nfunction sizeOf(d) {\n  return d \u003c 2.6 ? 3 : d \u003c 5 ? 2 : d \u003c 10 ? 1 : 0;\n}\n\n// Sprites: dx, dy and weight for each glow size.\nfunction makeSprites() {\n  const out = [];\n  for (let c = 0; c \u003c 4; c++) {\n    const s = [];\n    const r = REACH[c];\n    const k = 1 / (2 * HALO_SIG[c] * HALO_SIG[c]);\n    for (let dy = -r; dy \u003c= r; dy++)\n      for (let dx = -r; dx \u003c= r; dx++) {\n        const ring = Math.abs(dx) + Math.abs(dy);\n        const w = HALO[c] * Math.exp(-(dx * dx + dy * dy) * k) + (ring === 0 ? CORE[c] : ring === 1 ? CROSS[c] : 0);\n        if (w > 0.02) s.push(dx, dy, w);\n      }\n    out.push(s);\n  }\n  return out;\n}\n\n// Smooth value noise on a line and on the plane, 0..1.\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction noise2(x, y, seed) {\n  const i = Math.floor(x);\n  const j = Math.floor(y);\n  const u = smooth(0, 1, x - i);\n  const v = smooth(0, 1, y - j);\n  const a = hash(i + 131 * j, seed);\n  const b = hash(i + 1 + 131 * j, seed);\n  const c = hash(i + 131 * (j + 1), seed);\n  const d = hash(i + 1 + 131 * (j + 1), seed);\n  return (a * (1 - u) + b * u) * (1 - v) + (c * (1 - u) + d * u) * v;\n}\n\n// What each LED shows before any firefly: the scene drawn once as a map of parts.\nconst SKY = 0;\nconst MEADOW = 1;\nconst EDGE = 2;\nconst TRUNK2 = 3;\nconst TRUNK = 4;\nconst TRUNK_LIT = 5;\nconst CROWN = 6;\nconst BLADE = 7;\nconst TIP = 8;\nconst DEPTH = [SKY_D, SKY_D, EDGE_D, TREE2_D, TREE_D, TREE_D, TREE_D, GRASS_D, GRASS_D];\n// How much of the flashlight each part sends back: the haze of the sky, the far trees, bark.\nconst SURF = [0.15, 0.5, 0.3, 0.7, 0.9, 0.9, 0.5, 1, 1];\n\nfunction drawScene(P) {\n  const mask = P.mask;\n  // The far forest edge 30 m off: a row of crowns, most of them the round heads of tulip\n  // poplar and one in three the drooping point of a hemlock.\n  const top = new Float32Array(W).fill(HOR - 6);\n  for (let k = -1; k \u003c 13; k++) {\n    const cx = k * 5.5 + 4 * hash(k + 9, 12);\n    const w = 3 + 4 * hash(k + 9, 13);\n    const h = 5 + 11 * hash(k + 9, 14);\n    const hemlock = hash(k + 9, 15) \u003c 0.33;\n    for (let x = 0; x \u003c W; x++) {\n      const u = Math.abs(x - cx) / w;\n      if (u >= 1) continue;\n      const lift = hemlock ? h * 1.2 * (1 - u) ** 1.3 : h * Math.sqrt(1 - u * u);\n      top[x] = Math.min(top[x], HOR - 6 - lift);\n    }\n  }\n  const footA = HOR + (FOC * EYE) / TREE_D;\n  const footB = HOR + (FOC * EYE) / TREE2_D;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let m = y \u003c HOR ? SKY : MEADOW;\n      if (y \u003c= HOR && y >= top[x] + noise1(x * 0.7, 16) * 1.5) m = EDGE;\n      if (x >= 50 && x \u003c= 52 && y \u003c= footB) m = TRUNK2;\n      // The near trunk, 7 LEDs wide at the foot and 5 under the crown; a moon catches its right side.\n      const taper = 1 - y / footA;\n      if (x >= 3 + taper && x \u003c= 9 - taper && y \u003c= footA) m = x >= 8 - taper ? TRUNK_LIT : TRUNK;\n      // A limb leaves the trunk at row 50 and climbs into the leaves.\n      const t = clamp((x - 8) / 17, 0, 1);\n      const ly = 50 - 22 * t;\n      if (x >= 8 && x \u003c= 25 && Math.abs(y - ly - 2 * t * (1 - t)) \u003c 1.1 - 0.4 * t) m = TRUNK;\n      // The crown's lower edge hangs in lobes, high on the right where a window of sky opens for\n      // the moon; inside it the leaves part here and there.\n      const edge = 31 + 10 * (noise1(x / 7, 31) - 0.5) + 5 * (noise1(x / 2.7, 32) - 0.5) - 19 * smooth(27, 42, x) * (1 - smooth(57, 66, x));\n      if (y \u003c edge && !(y > 3 && y \u003c edge - 3 && noise2(x / 4.5, y / 3.5, 33) > 0.76)) m = CROWN;\n      mask[y * W + x] = m;\n    }\n  // Tall grass at our feet: blades leaning and bending, and seed heads on a few.\n  for (let k = 0; k \u003c 52; k++) {\n    const x0 = hash(k, 51) * W;\n    const tall = 9 + 20 * hash(k, 52) ** 1.5;\n    const lean = (hash(k, 53) - 0.5) * 0.5;\n    const bend = (hash(k, 54) - 0.5) * 0.02;\n    const head = hash(k, 55) \u003c 0.3;\n    for (let j = 0; j \u003c tall; j++) {\n      const x = Math.round(x0 + lean * j + bend * j * j);\n      const y = 127 - j;\n      if (x \u003c 0 || x >= W) continue;\n      const tip = j > tall - 3;\n      mask[y * W + x] = tip ? TIP : BLADE;\n      if (head && tip && x + 1 \u003c W) mask[y * W + x + 1] = TIP;\n    }\n  }\n}\n\nfunction bake(P, moon) {\n  const { bg, occ, surf, mask } = P;\n  const m = moon;\n  // The moon climbs from behind the far trees into the window in the leaves.\n  const mx = 46;\n  const my = HOR - 8 - 44 * smooth(0, 1, m);\n  const lv = smooth(0, 0.3, m);\n  for (let y = 0; y \u003c H; y++) {\n    const up = y / HOR;\n    const far = 1 - (y - HOR) / (H - HOR);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const part = mask[p];\n      let r;\n      let g;\n      let b;\n      if (part === SKY) {\n        // Deep blue overhead, paler down at the trees.\n        const lift = 0.55 + 0.45 * up;\n        r = 4 + 6 * up + 24 * m * lift;\n        g = 8 + 10 * up + 34 * m * lift;\n        b = 22 + 20 * up + 48 * m * lift;\n        if (m > 0) {\n          const dd = Math.sqrt((x - mx) ** 2 + (y - my) ** 2);\n          const disc = 1 - smooth(2.4, 3.4, dd);\n          const glow = Math.exp(-dd / 8) * 0.5;\n          r += lv * (disc * 210 + glow * 40);\n          g += lv * (disc * 208 + glow * 46);\n          b += lv * (disc * 186 + glow * 54);\n        }\n      } else if (part === MEADOW) {\n        // A faint sheen of sky on the far grass, darker at our feet.\n        r = 2 + 3 * far + 16 * m * (0.5 + 0.5 * far);\n        g = 4 + 4 * far + 24 * m * (0.5 + 0.5 * far);\n        b = 4 + 5 * far + 22 * m * (0.5 + 0.5 * far);\n      } else if (part === EDGE) {\n        r = 2 + 6 * m;\n        g = 4 + 10 * m;\n        b = 8 + 13 * m;\n      } else if (part === TRUNK2) {\n        r = 2 + 9 * m;\n        g = 3 + 10 * m;\n        b = 5 + 12 * m;\n      } else if (part === TRUNK || part === TRUNK_LIT) {\n        const lit = part === TRUNK_LIT ? 1 : 0.35;\n        r = 1 + 14 * m * lit;\n        g = 2 + 15 * m * lit;\n        b = 3 + 16 * m * lit;\n      } else if (part === CROWN) {\n        r = 1 + 6 * m;\n        g = 2 + 9 * m;\n        b = 4 + 10 * m;\n      } else {\n        // Grass: under a moon the tips catch the light.\n        const tip = part === TIP ? 1 : 0.5;\n        r = 1 + 12 * m * tip;\n        g = 2 + 18 * m * tip;\n        b = 2 + 14 * m * tip;\n      }\n      bg[p * 3] = r;\n      bg[p * 3 + 1] = g;\n      bg[p * 3 + 2] = b;\n      occ[p] = DEPTH[part];\n      surf[p] = part === MEADOW ? 0.35 + 0.65 * (1 - far) : SURF[part];\n    }\n  }\n  // Stars between the leaves and the far trees, fainter as the moon comes up.\n  for (let i = 0; i \u003c 30; i++) {\n    const x = Math.floor(hash(i * 7 + 3, 21) * W);\n    const y = Math.floor(2 + hash(i * 5 + 1, 22) * 62);\n    const p = y * W + x;\n    if (mask[p] !== SKY) continue;\n    const v = (34 + 56 * hash(i, 23)) * (1 - 0.65 * m);\n    bg[p * 3] += v * 0.85;\n    bg[p * 3 + 1] += v * 0.9;\n    bg[p * 3 + 2] += v;\n  }\n  P.baked = moon;\n}\n\nfunction burstLength() {\n  return 4 + Math.floor(Math.random() * 3);\n}\n\nfunction spawn(P, i) {\n  // Distance log-uniform from 1.4 to 22 m: as many between 2 and 4 m as between 10 and 20.\n  const d = NEAR * Math.pow(FAR / NEAR, Math.random());\n  P.d[i] = d;\n  P.X[i] = (Math.random() - 0.5) * (W / FOC) * d * 1.2;\n  // Three in ten keep low over the grass, most fly a metre to three metres up, and one in\n  // seven is up in the leaves.\n  const u = Math.random();\n  P.h[i] = u \u003c 0.3 ? 0.15 + Math.random() * 0.65 : u \u003c 0.86 ? 0.8 + Math.random() * 2.4 : 3.2 + Math.random() * 4.5;\n  const a = Math.random() * Math.PI * 2;\n  P.vx[i] = Math.cos(a) * 0.3;\n  P.vh[i] = (Math.random() - 0.5) * 0.1;\n  P.vd[i] = Math.sin(a) * 0.3;\n  // Each clock runs a little fast or slow: the beat within 3%, the burst within 5%.\n  P.tr[i] = (1 + (Math.random() - 0.5) * 0.06) / GAP;\n  P.pr[i] = (1 + (Math.random() - 0.5) * 0.1) / CYCLE;\n  P.th[i] = Math.random();\n  P.ps[i] = Math.random();\n  P.nf[i] = burstLength();\n  P.left[i] = Math.max(0, P.nf[i] - Math.floor((P.ps[i] * CYCLE) / GAP));\n  P.age[i] = 9;\n  P.hold[i] = 0;\n  P.shy[i] = Math.random();\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const key of [\"X\", \"h\", \"d\", \"vx\", \"vh\", \"vd\", \"tr\", \"pr\", \"th\", \"ps\", \"age\", \"hold\", \"shy\"]) P[key] = new Float32Array(MAXF);\n  P.nf = new Uint8Array(MAXF);\n  P.left = new Uint8Array(MAXF);\n  P.last = new Uint8Array(MAXF);\n  P.sx = new Int16Array(MAXF);\n  P.sy = new Int16Array(MAXF);\n  P.cell = new Int16Array(MAXF);\n  // Flashes and first flashes that began last frame, and fireflies flying, per cell; and the\n  // same three as each cell sees them through the sight kernel.\n  const G = GX * GY;\n  for (const key of [\"pa\", \"pf\", \"pc\", \"na\", \"nf2\", \"nc\", \"sa\", \"sf\", \"sc\"]) P[key] = new Float32Array(G);\n  P.kern = new Float32Array(G);\n  for (let y = 0; y \u003c GY; y++) for (let x = 0; x \u003c GX; x++) P.kern[y * GX + x] = Math.exp(-Math.sqrt(x * x + y * y) / SIGHT);\n  P.bg = new Float32Array(N * 3);\n  P.mask = new Uint8Array(N);\n  drawScene(P);\n  P.occ = new Float32Array(N);\n  P.surf = new Float32Array(N);\n  P.lum = new Float32Array(N);\n  P.ang = new Float32Array(N);\n  P.sprites = makeSprites();\n  // The flashlight is held at our chest, below the bottom of the panel.\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) P.ang[y * W + x] = Math.atan2(x - 32, 170 - y);\n  for (let i = 0; i \u003c MAXF; i++) spawn(P, i);\n  // The females sit still, low in the grass, 1.6 to 4 m away.\n  P.fx = new Int16Array(FEM);\n  P.fy = new Int16Array(FEM);\n  P.fd = new Float32Array(FEM);\n  P.fmem = new Float32Array(FEM);\n  P.fwait = new Float32Array(FEM);\n  P.fage = new Float32Array(FEM).fill(9);\n  for (let j = 0; j \u003c FEM; j++) {\n    const d = 1.6 + 2.4 * hash(j, 41);\n    P.fd[j] = d;\n    P.fx[j] = Math.round(4 + 56 * hash(j, 42));\n    P.fy[j] = Math.round(HOR + (FOC * (EYE - 0.15 - 0.3 * hash(j, 43))) / d);\n  }\n  Object.assign(P, { count: 200, moon: 0, baked: -1, torch: -1, beam: 0, beamOn: 0, started: false });\n}\n\nfunction flash(P, i, first) {\n  P.age[i] = 0;\n  P.na[P.cell[i]] += 1;\n  if (first) P.nf2[P.cell[i]] += 1;\n  P.last[i] = first ? 3 : 1;\n}\n\n// Spread the last frame's flashes and the crowd through the sight kernel, from each cell\n// that holds any to every cell within five rows of cells.\nfunction look(P) {\n  const { pa, pf, pc, sa, sf, sc, kern } = P;\n  sa.fill(0);\n  sf.fill(0);\n  sc.fill(0);\n  for (let s = 0; s \u003c GX * GY; s++) {\n    const a = pa[s];\n    const f = pf[s];\n    const c = pc[s];\n    if (a === 0 && c === 0) continue;\n    const sx = s % GX;\n    const sy = (s / GX) | 0;\n    for (let ty = Math.max(0, sy - 5); ty \u003c= Math.min(GY - 1, sy + 5); ty++) {\n      const row = Math.abs(ty - sy) * GX;\n      for (let tx = 0; tx \u003c GX; tx++) {\n        const k = kern[row + Math.abs(tx - sx)];\n        const t = ty * GX + tx;\n        sa[t] += a * k;\n        sf[t] += f * k;\n        sc[t] += c * k;\n      }\n    }\n  }\n}\n\nfunction advance(P, step, pace, count, eps, moon) {\n  // Last frame's flashes become what is seen this frame.\n  for (const [a, b] of [\n    [\"pa\", \"na\"],\n    [\"pf\", \"nf2\"],\n    [\"pc\", \"nc\"],\n  ]) {\n    const t = P[a];\n    P[a] = P[b];\n    P[b] = t;\n    P[b].fill(0);\n  }\n  look(P);\n  const { sa, sf, sc } = P;\n  // Fewer fly under a bright moon.\n  const shyLine = 0.75 * moon;\n\n  for (let i = 0; i \u003c count; i++) {\n    const out = P.shy[i] \u003c shyLine;\n    if (P.age[i] \u003c 9) P.age[i] += step;\n    const c = P.cell[i];\n    let seeA = 0;\n    let seeF = 0;\n    if (!out && P.hold[i] \u003c= 0) {\n      // What counts is the share of the neighbours seen flashing, so a thick swarm does not\n      // shove every clock round at once. A firefly does not see its own flash.\n      const crowd = Math.max(3, sc[c] - 1);\n      seeA = (sa[c] - (P.last[i] & 1)) / crowd;\n      seeF = (sf[c] - (P.last[i] >> 1)) / crowd;\n    }\n    P.last[i] = 0;\n    if (P.hold[i] > 0) P.hold[i] -= step;\n\n    let p = P.ps[i] + step * P.pr[i];\n    if (p > OPEN && seeF > 0 && eps > 0) {\n      const q = (p - OPEN) / (1 - OPEN);\n      const x = fwd(Math.min(1, q)) + eps * KB * seeF;\n      p = x >= 1 ? 1 : OPEN + (1 - OPEN) * inv(x);\n    }\n    if (p >= 1) {\n      p = 0;\n      P.nf[i] = burstLength();\n      P.left[i] = P.nf[i];\n    }\n    P.ps[i] = p;\n\n    let t = P.th[i] + step * P.tr[i];\n    if (t > REST && seeA > 0 && eps > 0) {\n      const u = (t - REST) / (1 - REST);\n      const x = fwd(Math.min(1, u)) + eps * KF * seeA;\n      t = x >= 1 ? 1 : REST + (1 - REST) * inv(x);\n    }\n    if (t >= 1) {\n      t = 0;\n      if (P.left[i] > 0) {\n        const first = P.left[i] === P.nf[i];\n        P.left[i]--;\n        if (!out && P.hold[i] \u003c= 0) flash(P, i, first);\n      }\n    }\n    P.th[i] = t;\n\n    // Flight: a slow wander, about a third of a metre a second, turning gently.\n    const fly = step * (0.6 + 0.4 * Math.min(2, pace / 2));\n    P.vx[i] += (Math.random() - 0.5) * 0.4 * fly;\n    P.vd[i] += (Math.random() - 0.5) * 0.4 * fly;\n    P.vh[i] += (Math.random() - 0.5) * 0.2 * fly - P.vh[i] * 0.5 * fly;\n    const sp = Math.sqrt(P.vx[i] * P.vx[i] + P.vd[i] * P.vd[i]);\n    if (sp > 0.45) {\n      P.vx[i] *= 0.45 / sp;\n      P.vd[i] *= 0.45 / sp;\n    }\n    let d = P.d[i] + P.vd[i] * fly;\n    if (d \u003c NEAR || d > FAR) {\n      P.vd[i] = -P.vd[i];\n      d = clamp(d, NEAR, FAR);\n    }\n    P.d[i] = d;\n    let X = P.X[i] + P.vx[i] * fly;\n    const half = (0.6 * W * d) / FOC;\n    if (X > half) X -= 2 * half;\n    else if (X \u003c -half) X += 2 * half;\n    P.X[i] = X;\n    let h = P.h[i] + P.vh[i] * fly;\n    if (h \u003c 0.2 || h > 8) {\n      P.vh[i] = -P.vh[i];\n      h = clamp(h, 0.2, 8);\n    }\n    P.h[i] = h;\n    const sx = Math.round(W / 2 + (FOC * X) / d);\n    const sy = Math.round(HOR + (FOC * (EYE - h)) / d);\n    P.sx[i] = sx;\n    P.sy[i] = sy;\n    P.cell[i] = clamp(sy >> 3, 0, GY - 1) * GX + clamp(sx >> 3, 0, GX - 1);\n    if (!out) P.nc[P.cell[i]] += 1;\n\n    // The flashlight: a firefly in the beam goes dark and loses its place in both clocks. At\n    // Elkmont the park asks for red cellophane over the lens and the beam kept on the ground.\n    // This one is bare.\n    if (P.beamOn > 0.3 && sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H) {\n      const a = P.ang[sy * W + sx];\n      if (Math.abs(a - P.beam) \u003c 0.14) {\n        P.th[i] = Math.random();\n        P.ps[i] = Math.random() * OPEN;\n        P.left[i] = 0;\n        P.hold[i] = 0.8;\n        if (P.age[i] \u003c LIGHT_END) P.age[i] = LIGHT_END;\n      }\n    }\n  }\n\n  // The females: each listens to the flashes round her and, once they stop, answers.\n  for (let j = 0; j \u003c FEM; j++) {\n    if (P.fage[j] \u003c 9) P.fage[j] += step;\n    const c = clamp(P.fy[j] >> 3, 0, GY - 1) * GX + clamp(P.fx[j] >> 3, 0, GX - 1);\n    const heard = sa[c] / Math.max(3, sc[c]);\n    if (heard > 0.04) {\n      P.fmem[j] = Math.min(1, P.fmem[j] + heard);\n      P.fwait[j] = REPLY * (0.8 + 0.4 * hash(j, 44));\n    } else if (P.fmem[j] > 0.25) {\n      P.fwait[j] -= step;\n      if (P.fwait[j] \u003c= 0) {\n        P.fage[j] = 0;\n        P.fmem[j] = 0;\n      }\n    } else P.fmem[j] = Math.max(0, P.fmem[j] - step * 0.2);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 200, 0.06];\n  dt = Math.min(dt, 0.1);\n  const moon = clamp(k[0], 0, 1);\n  const pace = Math.max(0.1, k[1]);\n  const step = (dt * pace) / 2;\n  const count = clamp(Math.round(k[2]), 0, MAXF);\n  const eps = Math.max(0, k[3]);\n  P.count = count;\n  P.moon = moon;\n  if (Math.abs(P.baked - moon) > 0.004) bake(P, moon);\n\n  if (input.btnPressed && input.btnPressed[0]) P.torch = 0;\n  if (P.torch >= 0) {\n    P.torch += dt;\n    const u = P.torch / 2.4;\n    P.beam = -0.9 + 1.8 * smooth(0, 1, u);\n    P.beamOn = smooth(0, 0.06, u) * (1 - smooth(0.92, 1, u));\n    if (u >= 1) {\n      P.torch = -1;\n      P.beamOn = 0;\n    }\n  }\n\n  if (!P.started) {\n    // The night is under way when the panel opens: the swarm has had three seconds to start\n    // finding its beat.\n    P.started = true;\n    for (let i = 0; i \u003c PRE * 30; i++) advance(P, (pace / 2) / 30, pace, count, eps, moon);\n  }\n  advance(P, step, pace, count, eps, moon);\n}\n\nfunction splat(P, sx, sy, d, e) {\n  const lum = P.lum;\n  const occ = P.occ;\n  const spr = P.sprites[sizeOf(d)];\n  for (let j = 0; j \u003c spr.length; j += 3) {\n    const x = sx + spr[j];\n    const y = sy + spr[j + 1];\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = y * W + x;\n    if (occ[p] \u003c d) continue;\n    lum[p] += e * spr[j + 2];\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  P.lum.fill(0);\n  const shyLine = 0.75 * P.moon;\n  for (let i = 0; i \u003c P.count; i++) {\n    const age = P.age[i];\n    if (age >= LIGHT_END || P.shy[i] \u003c shyLine) continue;\n    splat(P, P.sx[i], P.sy[i], P.d[i], envelope(age));\n  }\n  // A female's answer is dimmer and slower to fade.\n  for (let j = 0; j \u003c FEM; j++) {\n    const age = P.fage[j] * 0.6;\n    if (age >= LIGHT_END) continue;\n    splat(P, P.fx[j], P.fy[j], P.fd[j], envelope(age) * 0.5);\n  }\n  const { bg, surf, lum, ang } = P;\n  const beamOn = P.beamOn;\n  const beam = P.beam;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = bg[p * 3];\n      let g = bg[p * 3 + 1];\n      let b = bg[p * 3 + 2];\n      const v = lum[p];\n      if (v > 0.004) {\n        // 560 nm is a yellow green; past full the core runs pale.\n        const t = v \u003c 1 ? v : 1;\n        const hot = v > 0.8 ? Math.min(1, (v - 0.8) / 0.7) : 0;\n        r += 182 * t + 50 * hot;\n        g += 255 * t;\n        b += 12 * t + 110 * hot;\n      }\n      if (beamOn > 0) {\n        const da = ang[p] - beam;\n        const I = beamOn * Math.exp(-(da * da) / 0.016) * surf[p] * (0.5 + (0.5 * y) / H);\n        r += 150 * I;\n        g += 138 * I;\n        b += 112 * I;\n      }\n      // Every channel in steps of 4: on the panel 64 steps look the same as 256, and the dark\n      // gradients stop being noise.\n      display.setPixel(x, y, q4(r), q4(g), q4(b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Moon=0..1, Pace=0.5..4, Fireflies=200..480, Coupling=0..0.25","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Moon","min":0,"max":1,"about":"At 0 a moonless night; turned up, a moon climbs out of the far trees into a gap in the leaves, the sky and the grass go silver, and fewer fireflies fly, down to one in four at full moon."},{"name":"Pace","min":0.5,"max":4,"about":"At 2 the flashes in a burst come half a second apart, as Photinus carolinus flashes, and a burst comes round every 5.5 s; at 0.5 the flashes are two seconds apart, at 4 a quarter second, and the fireflies fly faster with it."},{"name":"Fireflies","min":200,"max":480,"about":"How many are out, from 200 to 480; half of them are farther than 5.5 m and show as sparks along the forest edge."},{"name":"Coupling","min":0,"max":0.25,"about":"How far a clock jumps for each flash it sees: at 0 every firefly keeps its own time and the meadow twinkles for ever; at 0.06 the flashes fall into step within a few seconds and the first dark pauses open; at 0.25 the swarm locks in its first burst."}],"start":[0,2,200,0.06],"measures":{"motion":0.3823,"detail":0.021,"edges":0.1814,"complexity":0.404,"coverage":0.3382,"colour":0.0994,"drift":0.0945},"knobResponse":[0.0808,0.0516,0.0623,0.0425]},{"slug":"flame-test","title":"Flame Test","family":"chemistry","round":22,"note":"분젠 버너의 파란 불꽃에 손이 니크롬 고리를 넣으면 불꽃이 그 염의 색으로 터져요. 구리는 청록, 나트륨은 짙은 노랑으로 타고 알갱이가 튀다가 파랗게 돌아오면, 고리를 염산에 씻어 이름표 붙은 다음 시계접시로 가요.","idea":"On a dark lab bench a hand dips a nichrome wire loop into a row of labelled watch glasses and holds each salt in the pale blue flame of a Bunsen burner, which bursts into the element's colour, sputters with grains of salt and fades back to blue before the loop is cleaned in acid and goes for the next.","buttons":"K1 tap sends the loop to the next salt now.","code":"// ===== Patternflow pattern =====\n// Title:   Flame Test\n// Family:  chemistry\n// Idea:    On a dark lab bench a hand dips a nichrome wire loop into a row of labelled watch glasses and holds each salt in the pale blue flame of a Bunsen burner, which bursts into the element's colour, sputters with grains of salt and fades back to blue before the loop is cleaned in acid and goes for the next.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the flame test of the school chemistry lab\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Salt=0..8, Speed=0.2..3, Room=0..1, Air=-1..1\n//\n// Knob 1: Salt. Which watch glass the loop goes to next: at 0 it works along the row from copper (blue-green) through sodium (yellow-orange), lithium (crimson), barium (apple green), potassium (lilac), calcium (brick red), boric acid (green) and strontium (red); 1 to 8 keeps to one glass, copper at 1 to strontium at 8.\n// Knob 2: Speed. How fast the hand works and the flame moves: at 2 a salt burns about 4.5 s and the next one goes into the flame 12 s after it; at 0.2 the hand works ten times slower and the flame slows to a lazy flicker.\n// Knob 3: Room. The lab lights, on at 0 and off at 1, where only the flame lights the tiles, the bench and the hand.\n// Knob 4: Air. The burner's collar: shut at -1 for a tall, wavering yellow flame that hides the salt's colour, half open near 0 for the quiet blue flame of the test, wide open at 1 for a short roaring flame with a sharp inner cone.\n// Buttons: K1 tap sends the loop to the next salt now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The burner's axis, the first row of flame above its barrel, the bench top.\nconst FX = 21;\nconst MOUTH = 79;\nconst BENCH = 94;\nconst { min, max, floor, ceil, round, sin, cos, exp, abs, sqrt, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => a.map((v, i) => mix(v, b[i], t));\n\n// The row of watch glasses, left to right: symbol, flame colour, the salt's\n// own colour, how long its colour lasts in the flame (s), how strong it is.\nconst WHITE = [0.92, 0.91, 0.87];\nconst SALTS = [\n  [\"Cu\", [0, 240, 185], [0.35, 0.75, 0.7], 2, 1],\n  [\"Na\", [255, 175, 10], WHITE, 3.5, 1.25],\n  [\"Li\", [255, 10, 85], WHITE, 2, 1],\n  [\"Ba\", [170, 255, 35], WHITE, 2, 0.95],\n  [\"K\", [190, 100, 255], WHITE, 1.3, 0.8],\n  [\"Ca\", [255, 85, 10], WHITE, 2.2, 1],\n  [\"B\", [35, 255, 60], WHITE, 1.8, 1],\n  [\"Sr\", [255, 5, 25], WHITE, 2.2, 1.1],\n];\n// A heap of salt in a watch glass: x offset, row, shade.\nconst HEAP = [[0, 107, 1], [-1, 108, 0.95], [0, 108, 1], [1, 108, 0.8], [-2, 109, 0.85], [-1, 109, 0.9], [0, 109, 0.85], [1, 109, 0.75], [2, 109, 0.65]];\n// 3x5 letters for the labels.\nconst FONT = {\n  C: \"011/100/100/100/011\",\n  u: \"000/000/101/101/011\",\n  N: \"110/101/101/101/101\",\n  a: \"000/011/101/101/011\",\n  L: \"100/100/100/100/111\",\n  i: \"1/0/1/1/1\",\n  B: \"110/101/110/101/110\",\n  K: \"101/101/110/101/101\",\n  S: \"011/100/010/001/110\",\n  r: \"000/000/101/110/100\",\n  H: \"101/101/111/101/101\",\n  l: \"1/1/1/1/1\",\n};\n\n// The hand's round: in the flame with a salt, to the acid, dipped, back,\n// in the flame to burn the loop clean, to the next glass, dipped, back.\nconst DUR = [4.5, 1.1, 0.8, 1, 1.4, 1.2, 0.7, 1];\n// Where the loop goes, and the holder's angle there.\nconst FP = [FX + 4, 62, 0.45];\nconst AT = [51, 75, 1.22];\nconst AD = [51, 90, 1.22];\nconst ST = (i) => [4 + 8 * i, 100, 0.52];\nconst SD = (i) => [4 + 8 * i, 108, 0.52];\n\n// Smooth value noise, wrapping both ways.\nfunction noise(w, h, cell, oct) {\n  const out = new Float32Array(w * h);\n  let amp = 1;\n  let tot = 0;\n  for (let o = 0; o \u003c oct; o++, cell /= 2, amp *= 0.55) {\n    const gw = w / cell;\n    const gh = h / cell;\n    const g = Float32Array.from({ length: gw * gh }, rnd);\n    const at = (i, j) => g[(j % gh) * gw + (i % gw)];\n    for (let y = 0; y \u003c h; y++) {\n      const j = floor(y / cell);\n      const ty = sm(0, 1, y / cell - j);\n      for (let x = 0; x \u003c w; x++) {\n        const i = floor(x / cell);\n        const tx = sm(0, 1, x / cell - i);\n        const a = at(i, j) + (at(i + 1, j) - at(i, j)) * tx;\n        const b = at(i, j + 1) + (at(i + 1, j + 1) - at(i, j + 1)) * tx;\n        out[y * w + x] += amp * (a + (b - a) * ty);\n      }\n    }\n    tot += amp;\n  }\n  return out.map((v) => v / tot);\n}\n\n// Bilinear lookup in the 64x128 noise tile.\nfunction nz(T, x, y) {\n  const xi = floor(x);\n  const yi = floor(y);\n  const fx = x - xi;\n  const r0 = (yi & 127) * 64;\n  const r1 = ((yi + 1) & 127) * 64;\n  const a = T[r0 + (xi & 63)];\n  const b = T[r0 + ((xi + 1) & 63)];\n  const c = T[r1 + (xi & 63)];\n  const d = T[r1 + ((xi + 1) & 63)];\n  return a + (b - a) * fx + (c - a + (a - b - c + d) * fx) * (y - yi);\n}\n\n// Everything that stands still, as albedo: the tiled wall and its periodic\n// table, the gas tap and hose, the burner, the acid, the glasses, the labels.\nfunction build(P) {\n  const { alb, spec, G, benchM } = P;\n  const put = (x, y, c, s) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    alb.set(c, p * 3);\n    benchM[p] = 0;\n    if (s !== undefined) spec[p] = s;\n  };\n  const at = (x, y) => alb.slice((y * W + x) * 3, (y * W + x) * 3 + 3);\n  const text = (str, cx, top, ink) => {\n    const gl = [...str].map((c) => FONT[c].split(\"/\"));\n    let x0 = cx - (gl.reduce((s, g) => s + g[0].length + 1, -1) >> 1);\n    for (const g of gl) {\n      for (let j = 0; j \u003c 5; j++) for (let i = 0; i \u003c g[j].length; i++) if (g[j][i] === \"1\") put(x0 + i, top + j, ink);\n      x0 += g[0].length + 1;\n    }\n  };\n  const shade = Float32Array.from({ length: 256 }, rnd);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let v;\n      if (y \u003c BENCH - 1) {\n        const gx = (x + 5) % 11;\n        const gy = (y + 7) % 11;\n        v = gx === 10 || gy === 10 ? 0.36 : 0.45 + 0.05 * shade[(((x + 5) / 11) | 0) * 19 + (((y + 7) / 11) | 0) * 7 & 255] + 0.05 * (1 - (gx + gy) / 18) + (gx === 0 || gy === 0 ? 0.03 : 0);\n        put(x, y, [v, v * 1.01, v * 1.03]);\n      } else if (y === BENCH - 1) put(x, y, [0.06, 0.06, 0.07]);\n      else if (y === BENCH) put(x, y, [0.3, 0.3, 0.32], 0.3);\n      else if (y \u003c 125) {\n        v = 0.17 + 0.014 * rnd();\n        put(x, y, [v, v, v * 1.08]);\n        benchM[y * W + x] = 1;\n      } else put(x, y, y === 125 ? [0.42, 0.42, 0.44] : [0.1, 0.1, 0.11], y === 125 ? 0.4 : 0);\n      // The flame lights the room like a lamp along its height.\n      const dx = x - FX;\n      const dy = y \u003c 22 ? 22 - y : y > 78 ? y - 78 : 0;\n      G[y * W + x] = 1 / (1 + (dx * dx + dy * dy) / 480);\n    }\n  // A periodic table pinned to the tiles.\n  for (let y = 3; y \u003c= 27; y++) for (let x = 39; x \u003c= 62; x++) put(x, y, [0.85, 0.84, 0.78]);\n  for (let x = 42; x \u003c= 59; x++) put(x, 5, [0.2, 0.2, 0.28]);\n  const cell = (c, y, f) =>\n    put(42 + c, y, f ? [0.55, 0.85, 0.8] : c === 0 ? (y === 8 ? [0.7, 0.7, 0.75] : [0.95, 0.35, 0.35]) : c === 1 ? [0.98, 0.62, 0.3] : c \u003c 12 ? [0.95, 0.85, 0.35] : c \u003c 17 ? (c - 12 > (y - 8) / 2 - 1 ? [0.45, 0.8, 0.5] : [0.45, 0.65, 0.95]) : [0.7, 0.5, 0.95]);\n  for (let n = 1; n \u003c= 7; n++) for (let c = 0; c \u003c 18; c++) if (n > 3 || (n === 1 ? c === 0 || c === 17 : c \u003c 2 || c > 11)) cell(c, 6 + 2 * n, false);\n  for (let c = 3; c \u003c 17; c++) cell(c, 23, true), cell(c, 25, true);\n  // The heatproof mat the burner stands on.\n  for (let y = 96; y \u003c= 104; y++)\n    for (let x = 7 - ((y - 96) >> 1); x \u003c= 35 + ((y - 96) >> 1); x++) {\n      const v = y === 104 ? 0.22 : y === 96 ? 0.42 : 0.5 + 0.04 * rnd();\n      put(x, y, [v, v * 0.97, v * 0.92]);\n    }\n  // The gas tap on the wall, its lever, and the orange rubber hose to the burner.\n  for (let y = 82; y \u003c= 91; y++) for (let x = 0; x \u003c= 3; x++) put(x, y, [0.4, 0.4, 0.42], x === 0 ? 0.3 : 0);\n  for (let y = 86; y \u003c= 89; y++) for (let x = 1; x \u003c= 6; x++) put(x, y, y === 86 ? [0.9, 0.72, 0.2] : [0.62, 0.48, 0.2], y === 86 ? 0.5 : 0);\n  for (let x = 7; x \u003c= 9; x++) put(x, 88, [0.72, 0.56, 0.24]);\n  for (let j = 0; j \u003c 4; j++) put(4 + (j >> 1), 85 - j, [0.12, 0.12, 0.13]);\n  for (let k = 0; k \u003c= 80; k++) {\n    const t = k / 80;\n    const u = 1 - t;\n    const bx = round(u * u * u * 9 + 3 * u * u * t * 17 + 3 * u * t * t * 2 + t * t * t * 10);\n    const by = round(u * u * u * 88 + 3 * u * u * t * 94 + 3 * u * t * t * 106 + t * t * t * 101);\n    put(bx, by, [0.88, 0.38, 0.14], 0.25);\n    put(bx, by + 1, [0.6, 0.24, 0.08]);\n  }\n  // The burner: a heavy base, the gas inlet, the chrome barrel and its collar.\n  const BW = [5, 6, 7, 7, 7];\n  for (let j = 0; j \u003c 5; j++)\n    for (let x = FX - BW[j]; x \u003c= FX + BW[j]; x++) {\n      const v = j === 0 ? 0.42 : j === 4 ? 0.1 : 0.22 - 0.03 * j;\n      put(x, 99 + j, [v, v, v * 1.15], j === 0 ? 0.5 : 0);\n    }\n  for (let x = FX - 7; x \u003c= FX + 8; x++) put(x, 104, at(x, 104).map((v) => v * 0.55));\n  for (let x = FX - 11; x \u003c FX - 7; x++) put(x, 100, [0.78, 0.62, 0.3], 0.4), put(x, 101, [0.5, 0.38, 0.18]);\n  const BC = [0.28, 0.75, 0.56, 0.38, 0.2];\n  for (let y = 80; y \u003c= 98; y++)\n    for (let i = 0; i \u003c 5; i++) {\n      const v = BC[i] + (y === 80 ? 0.15 : 0);\n      put(FX - 2 + i, y, [v, v, v * 1.06], i === 1 ? 0.6 : 0);\n    }\n  const CC = [0.25, 0.5, 0.8, 0.64, 0.46, 0.3, 0.18];\n  for (let y = 89; y \u003c= 95; y++)\n    for (let i = 0; i \u003c 7; i++) {\n      const v = CC[i] * (y === 89 || y === 95 ? 0.75 : 1);\n      put(FX - 3 + i, y, [v, v * 0.8, v * 0.42], i === 2 ? 0.5 : 0);\n    }\n  // A beaker of dilute hydrochloric acid to clean the loop in.\n  for (let y = 75; y \u003c= 101; y++)\n    for (let x = 43; x \u003c= 58; x++) {\n      if (x === 43 && y > 76) continue;\n      if (y === 75 || y === 101 || x === 44 || x === 58 || x === 43) {\n        put(x, y, [0.5, 0.55, 0.6], x === 44 || y === 75 ? 0.8 : 0.4);\n        continue;\n      }\n      let c = at(x, y).map((v, i) => v * [0.9, 0.94, 0.98][i]);\n      if (y >= 85) c = c.map((v, i) => v * [0.62, 0.68, 0.7][i] + [0.08, 0.11, 0.14][i]);\n      put(x, y, c, y === 85 ? 0.6 : x === 45 ? 0.3 : 0);\n    }\n  P.front = [];\n  for (let y = 93; y \u003c= 99; y++) for (let x = 46; x \u003c= 56; x++) put(x, y, [0.88, 0.86, 0.78]), P.front.push(y * W + x);\n  text(\"HCl\", 51, 94, [0.07, 0.07, 0.1]);\n  // The watch glasses, each with its heap of salt, and the tape with their names.\n  for (let i = 0; i \u003c 8; i++) {\n    const c = 4 + 8 * i;\n    for (let x = c - 3; x \u003c= c + 3; x++) put(x, 112, at(x, 112).map((v) => v * 0.6));\n    for (let dy = -2; dy \u003c= 1; dy++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const e = (dx / 3.7) ** 2 + ((dy + 0.5) / 2.1) ** 2;\n        if (e \u003c 1) put(c + dx, 110 + dy, e > 0.45 ? [0.5, 0.56, 0.6] : at(c + dx, 110 + dy).map((v) => v * 1.3 + 0.07), e > 0.45 && dy \u003c 0 ? 0.9 : 0.3);\n      }\n    const k = SALTS[i][2];\n    for (const [dx, y, s] of HEAP) put(c + dx, y, k.map((v) => v * s));\n  }\n  for (let y = 115; y \u003c= 121; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const v = y === 115 || y === 121 ? 0.62 : 0.82;\n      if (x % 8) put(x, y, [v, v * 0.97, v * 0.82]);\n    }\n  for (let i = 0; i \u003c 8; i++) text(SALTS[i][0], 4 + 8 * i, 116, [0.06, 0.06, 0.09]);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), spec: F(N), G: F(N), buf: F(N * 3), benchM: new Uint8Array(N), NT: noise(64, 128, 16, 3) });\n  build(P);\n  Object.assign(P, { started: false, t: 0, tf: 0, ph: 0, pt: 0, cur: 0, salt: 0, pick: 0, ks: 0, kd: 0, kc: SALTS[0][1], heat: 0, bead: 0, sput: 0, flare: 0, sp: [], hot: [], sAcc: 0, bAcc: 0, air: 0.5, room: 0, from: FP, pos: FP, m: 1 });\n}\n\n// Kind 0 is a grain carried up the flame in the salt's colour, kind 1 a grain\n// spat out of the loop that glows as it falls, kind 2 a bubble in the acid.\nfunction spark(P, k) {\n  if (P.sp.length >= 160) return;\n  P.sp.push({\n    k,\n    x: P.pos[0] + (rnd() - 0.5) * 2.5,\n    y: P.pos[1] + (rnd() - 0.5) * 2,\n    vx: (rnd() - 0.5) * [14, 60, 2][k],\n    vy: -[25 + 45 * rnd(), 10 + 35 * rnd(), 7 + 6 * rnd()][k],\n    a: 0,\n    l: [0.25 + 0.55 * rnd(), 0.4 + 0.6 * rnd(), 2][k],\n    c: P.kc.map((v) => v * 0.6 + 100),\n  });\n}\n\nfunction enter(P) {\n  const ph = P.ph;\n  P.from = P.pos;\n  if (ph === 5) P.cur = P.pick ? P.pick - 1 : (P.cur + 1) % 8;\n  if (ph === 7) P.bead = 1;\n  if (ph === 0) {\n    P.salt = P.cur;\n    P.kc = SALTS[P.cur][1];\n    for (let i = 0; i \u003c 16; i++) spark(P, i & 1);\n  }\n  // Even a clean loop shows a flash of sodium from the acid and the fingers.\n  if (ph === 4) P.kc = SALTS[1][1];\n}\n\nfunction step(P, h) {\n  P.t += h;\n  P.pt += h;\n  while (P.pt >= DUR[P.ph]) {\n    P.pt -= DUR[P.ph];\n    P.ph = (P.ph + 1) % 8;\n    enter(P);\n  }\n  const ph = P.ph;\n  const s = P.pt / DUR[ph];\n  const e = sm(0, 1, s);\n  const dip = sm(0, 0.35, s) * sm(1, 0.62, s);\n  let pos;\n  if (ph === 0 || ph === 4) pos = [FP[0] + 0.5 * sin(P.t * 1.3), FP[1] + 0.5 * sin(P.t * 1.9 + 1), FP[2]];\n  else if (ph === 2 || ph === 6) {\n    pos = ph === 2 ? mix3(AT, AD, dip) : mix3(ST(P.cur), SD(P.cur), dip);\n    pos[0] += sin(s * 19) * 0.7 * dip;\n  } else {\n    pos = mix3(P.from, ph === 1 ? AT : ph === 5 ? ST(P.cur) : FP, e);\n    pos[1] -= 5 * sin(PI * e);\n  }\n  P.pos = pos;\n  const inF = ph === 0 || ph === 4;\n  const wet = ph === 2 && dip > 0.6;\n  P.heat += ((inF ? 1 : 0) - P.heat) * (1 - exp(-h / (inF ? 0.35 : wet ? 0.07 : 0.9)));\n  if (ph === 0) P.bead = max(0, 1 - P.pt / 0.9);\n\n  // The salt's colour: a burst as the loop goes in, a while at full, then a fade.\n  const S = SALTS[P.salt];\n  let tgt = 0;\n  P.sput = 0;\n  if (ph === 0) {\n    tgt = S[4] * (P.pt \u003c 1.3 ? sm(0, 0.18, P.pt) : exp(-(P.pt - 1.3) / S[3]));\n    P.sput = S[4] * (exp(-P.pt / 0.9) + 0.3 * exp(-P.pt / 2.5));\n  } else if (ph === 4) {\n    tgt = 0.85 * sm(0, 0.15, P.pt) * exp(-P.pt / 0.5);\n    P.sput = 0.5 * exp(-P.pt / 0.35);\n  }\n  P.ks += (tgt - P.ks) * (1 - exp(-h / (tgt > P.ks ? 0.06 : 0.22)));\n  P.flare *= exp(-h / 0.15);\n  P.kd = P.ks * (0.78 + 0.3 * nz(P.NT, P.t * 9, 40.5)) + P.flare;\n  // Grains crackle off the loop, now and then a whole crust at once.\n  if (P.sput > 0.02) {\n    P.sAcc += 40 * P.sput * h;\n    for (; P.sAcc >= 1; P.sAcc--) spark(P, rnd() \u003c 0.7 ? 0 : 1);\n    if (rnd() \u003c 3 * P.sput * h) {\n      P.flare += 0.3 * P.ks;\n      for (let i = 0; i \u003c 8; i++) spark(P, i % 3 ? 0 : 1);\n    }\n  }\n  if (wet) for (P.bAcc += 22 * h; P.bAcc >= 1; P.bAcc--) spark(P, 2);\n  P.sp = P.sp.filter((p) => {\n    p.a += h;\n    if (p.k === 0) {\n      p.vy -= 30 * h;\n      p.vx *= exp(-2 * h);\n    } else if (p.k === 1) p.vy += 90 * h;\n    p.x += p.vx * h;\n    p.y += p.vy * h;\n    return p.a \u003c p.l && !(p.k === 2 && p.y \u003c 85.5) && p.x >= 0 && p.x \u003c= 63 && p.y >= 0 && p.y \u003c= 124;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  P.pick = cl(round(k[0]), 0, 8);\n  P.m = cl(k[1], 0.2, 3) / 2;\n  const room = cl(k[2], 0, 1);\n  const air = (cl(k[3], -1, 1) + 1) / 2;\n  if (!P.started) {\n    P.started = true;\n    P.air = air;\n    P.room = room;\n    P.cur = P.pick ? P.pick - 1 : 0;\n    enter(P);\n    // Open a moment after the first salt went into the flame.\n    for (let i = 0; i \u003c 8; i++) step(P, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.ph \u003c 5) {\n    P.ph = 5;\n    P.pt = 0;\n    enter(P);\n  }\n  P.air += (air - P.air) * (1 - exp(-dt / 0.25));\n  P.room += (room - P.room) * (1 - exp(-dt / 0.12));\n  P.tf += dt * (0.3 + 0.7 * P.m);\n  step(P, dt * P.m);\n}\n\n// The holder: the wire loop, the nichrome wire, the aluminium handle, the\n// hand round it and the white sleeve of a lab coat. The loop and the first\n// few LEDs of wire are kept to glow when hot.\nfunction holder(P, light) {\n  const [lx, ly, th] = P.pos;\n  const ux = cos(th);\n  const uy = -sin(th);\n  P.hot = [];\n  for (let y = max(0, floor(ly + 100 * uy - 7)); y \u003c= min(H - 1, ceil(ly + 7)); y++)\n    for (let x = max(0, floor(lx - 3)); x \u003c W; x++) {\n      const dx = x - lx;\n      const dy = y - ly;\n      const s = dx * ux + dy * uy;\n      const q = dx * uy - dy * ux;\n      if (s \u003c -2.5 || abs(q) > 6.2) continue;\n      let c = null;\n      const hand = ((s - 31) / 4.3) ** 2 + ((q + 0.3) / 3.7) ** 2;\n      if (((s - 27.5) / 2.6) ** 2 + ((q - 2.5) / 1.3) ** 2 \u003c 1) c = [1, 0.78, 0.64];\n      else if (hand \u003c 1) {\n        // Curled fingers under the handle, the knuckles above it.\n        const k = 0.84 + 0.07 * q - (q \u003c -0.8 && abs(((s - 29.5) % 2) - 1) \u003c 0.45 ? 0.22 : 0);\n        c = [k, 0.72 * k, 0.58 * k];\n      } else if (s > 34 && s \u003c 37.5 && abs(q + 0.5) \u003c 3) c = [0.88, 0.62, 0.5];\n      else if (s >= 37 && abs(q + 0.6) \u003c 5.4) {\n        const k = (s \u003c 39 ? 0.74 : 0.9) + 0.03 * q;\n        c = [0.88 * k, 0.89 * k, 0.92 * k];\n      } else if (s >= 9 && s \u003c 30 && q > -1 && q \u003c 0.6) c = q > -0.2 ? [0.66, 0.68, 0.74] : [0.36, 0.37, 0.42];\n      else if ((s >= 1 && s \u003c 9 && abs(q) \u003c 0.6) || (s \u003c 1.8 && abs(hypot(dx, dy) - 1.25) \u003c 0.55)) {\n        c = [0.55, 0.55, 0.52];\n        if (s \u003c 5) P.hot.push(y * W + x, 1 - max(0, s) / 6);\n      }\n      if (c) light(y * W + x, c);\n    }\n}\n\nfunction flame(P) {\n  const { buf, NT, kd, kc } = P;\n  const a = P.air;\n  const t = P.tf;\n  const k1 = min(1, kd);\n  const Yf = sm(0.5, 0.06, a);\n  const Rf = sm(0.6, 1, a);\n  const Cf = sm(0.12, 0.6, a);\n  const bl = sm(0.06, 0.5, a);\n  const fl = 1 + (0.06 * sin(t * 7.3) + 0.05 * sin(t * 12.9 + 1)) * (1 + Yf);\n  const Hf = mix(mix(76, 58, bl), 47, Rf) * (1 + 0.2 * k1) * fl;\n  const Wm = mix(8.5, 6.4, bl) - Rf + 1.6 * k1;\n  const Hi = mix(7, 15, sm(0.15, 1, a));\n  const A = mix(5, 2, bl) * (1 - 0.6 * Rf);\n  const ws = mix(4.5, 6.5, a) + 7 * Rf;\n  const vs = mix(30, 46, a) + 40 * Rf;\n  const tn = mix(0.75, 0.5, a);\n  const [lx, ly] = P.pos;\n  const inF = P.heat > 0.5;\n  const salt = 1 - 0.8 * Yf;\n  for (let y = max(0, floor(MOUTH - Hf * 1.3)); y \u003c= MOUTH; y++) {\n    const hg = MOUTH + 1 - y;\n    const v = hg / Hf;\n    const cx = FX + A * v ** 1.4 * sin(0.11 * hg - ws * t) + 0.45 * A * v * sin(0.23 * hg - 1.7 * ws * t + 2);\n    const hw = max(0.7, (2.6 + (Wm - 2.6) * sm(0, 0.3, v)) * sqrt(max(0, 1.05 - v)));\n    const yw = Yf * sm(2, 9, hg);\n    const ri = 2.5 * max(0, 1 - hg / Hi) ** 0.8 + 0.25;\n    const cxi = FX + 0.35 * sin(t * 9 + hg * 0.3) * (1 - Rf);\n    const above = sm(ly + 5, ly - 2, y);\n    for (let x = max(0, floor(cx - hw * 1.7 - 3)); x \u003c= min(W - 1, ceil(cx + hw * 1.7 + 3)); x++) {\n      const n = nz(NT, x * 1.1 + 7, y * 0.55 + t * vs * 0.55);\n      const d2 = abs(x - cx) / hw + (n - 0.5) * tn * (0.25 + v);\n      const O = sm(1.12, 0.55, d2) * sm(1, 0.72, v + (n - 0.5) * 0.45 * v);\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      // The outer flame: pale blue, or yellow with soot when the collar is shut.\n      if (O > 0.002) {\n        const ob = O * (0.62 + 0.38 * (1 - v)) * (0.85 + 0.25 * n) * (0.8 + 0.25 * Rf);\n        const core = sm(0.85, 0.2, d2) * (1 - 0.5 * v);\n        const lum = O * (0.75 + 0.35 * n);\n        r = mix(58 * ob, 255 * lum, yw);\n        g = mix(98 * ob, lum * (95 + 150 * core - 60 * v), yw);\n        b = mix(225 * ob, O * (10 + 120 * core * core), yw);\n      }\n      // The inner cone, brightest along its surface.\n      if (hg \u003c Hi + 1) {\n        const di = abs(x - cxi);\n        const C = sm(ri + 0.75, ri - 0.35, di) * Cf * (0.92 + 0.08 * sin(t * 61 + hg));\n        if (C > 0) {\n          const rim = sm(ri - 1.3, ri - 0.3, di);\n          r += (60 + 100 * rim) * C;\n          g += (140 + 100 * rim) * C;\n          b += 255 * C;\n        }\n      }\n      // The salt's colour rises from the loop and fills the flame above it in tongues.\n      let ps = 0;\n      if (kd > 0.01) {\n        const n2 = nz(NT, x * 1.6 + 31, y * 0.8 + t * vs * 0.9 + 53);\n        ps = kd * salt * (O * above * (0.4 + 0.95 * n2) + (inF ? 0.9 * exp(-((x - lx) ** 2 + (y - ly) ** 2) / 10) : 0));\n        const q = max(0, 1 - 1.4 * ps);\n        r = r * q + kc[0] * ps;\n        g = g * q + kc[1] * ps;\n        b = b * q + kc[2] * ps;\n      }\n      if (r + g + b \u003c 1) continue;\n      const o = (y * W + x) * 3;\n      const dim = 1 - 0.4 * min(1, O + 0.5 * ps);\n      buf[o] = buf[o] * dim + r;\n      buf[o + 1] = buf[o + 1] * dim + g;\n      buf[o + 2] = buf[o + 2] * dim + b;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const { buf, alb, spec, G, benchM, kc } = P;\n  const a = P.air;\n  const Yf = sm(0.5, 0.06, a);\n  const k1 = min(1.3, P.kd) * (1 - 0.8 * Yf);\n  const fl = 0.9 + 0.1 * nz(P.NT, P.tf * 11, 70.5) + 0.12 * Yf * sin(P.tf * 9);\n  // The flame's own colour, which lights the room.\n  const FC = [0, 1, 2].map((i) => (mix([58, 98, 225][i] * 0.85, [255, 165, 40][i], Yf) * (1 - 0.8 * min(1, k1)) + kc[i] * k1) * fl);\n  const [gr, gg, gb] = FC.map((v) => v * (0.52 + 0.3 * Yf));\n  const A = 150 * (1 - P.room) ** 1.3 + 1.5;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const g = G[p];\n    const s = spec[p];\n    buf[o] = alb[o] * (A + gr * g) + s * (0.3 * A + 1.4 * gr * g);\n    buf[o + 1] = alb[o + 1] * (A + gg * g) + s * (0.3 * A + 1.4 * gg * g);\n    buf[o + 2] = alb[o + 2] * (A * 0.95 + gb * g) + s * (0.3 * A + 1.4 * gb * g);\n  }\n  const add = (p, c, f) => {\n    for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] += c[i] * f;\n  };\n  // The glossy bench: the ceiling lights along its back and the flame under the burner.\n  for (let x = 0; x \u003c W; x++) for (const [y, k] of [[96, 0.22], [97, 0.12]]) if (benchM[y * W + x]) add(y * W + x, [A, A, A], k);\n  const sway = 1.5 * sin(P.tf * 4.1);\n  for (let y = 105; y \u003c= 124; y++) {\n    const w = 2 + (y - 105) * 0.22;\n    const k = 0.34 * exp(-(y - 105) / 7);\n    for (let x = max(0, floor(FX - 3 * w)); x \u003c= min(W - 1, ceil(FX + 3 * w)); x++)\n      if (benchM[y * W + x]) add(y * W + x, FC, k * exp(-(((x - FX - (sway * (y - 105)) / 20) / w) ** 2)));\n  }\n  const light = (p, c) => {\n    const g = G[p];\n    buf[p * 3] = c[0] * (A + gr * g);\n    buf[p * 3 + 1] = c[1] * (A + gg * g);\n    buf[p * 3 + 2] = c[2] * (A * 0.95 + gb * g);\n  };\n  // The air hole in the collar opens as the collar turns.\n  const hole = round(4 * a);\n  for (let y = 91; y \u003c= 93; y++) for (let x = FX - (hole >> 1); x \u003c FX - (hole >> 1) + hole; x++) light(y * W + x, [0.03, 0.03, 0.03]);\n  for (const p of P.sp) if (p.k === 2) light(round(p.y) * W + round(p.x), [0.7, 0.75, 0.8]);\n  holder(P, light);\n  // The label on the beaker hides the loop behind it.\n  if (P.ph >= 1 && P.ph \u003c= 3) for (const p of P.front) light(p, alb.subarray(p * 3, p * 3 + 3));\n  flame(P);\n  for (const p of P.sp) {\n    const f = 1 - p.a / p.l;\n    if (p.k \u003c 2) add(round(p.y) * W + round(p.x), p.k ? [255 * sqrt(f), 210 * f * f, 120 * f * f * f] : p.c, p.k ? 1 : f);\n  }\n  // The loop glows red hot in the flame; the salt on it shows until it melts.\n  const ht = P.heat;\n  if (ht > 0.02) for (let i = 0; i \u003c P.hot.length; i += 2) add(P.hot[i], [255, 70 + 90 * ht, 25 * ht], ht * P.hot[i + 1]);\n  if (P.bead > 0.05) {\n    const c = SALTS[P.cur][2];\n    const p = round(P.pos[1]) * W + round(P.pos[0]);\n    for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = mix(buf[p * 3 + i], c[i] * (A + 60) + [180, 140, 90][i] * ht, P.bead);\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-flame-test","type":"code","name":"flame-test","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flame Test\n// Family:  chemistry\n// Idea:    On a dark lab bench a hand dips a nichrome wire loop into a row of labelled watch glasses and holds each salt in the pale blue flame of a Bunsen burner, which bursts into the element's colour, sputters with grains of salt and fades back to blue before the loop is cleaned in acid and goes for the next.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the flame test of the school chemistry lab\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Salt=0..8, Speed=0.2..3, Room=0..1, Air=-1..1\n//\n// Knob 1: Salt. Which watch glass the loop goes to next: at 0 it works along the row from copper (blue-green) through sodium (yellow-orange), lithium (crimson), barium (apple green), potassium (lilac), calcium (brick red), boric acid (green) and strontium (red); 1 to 8 keeps to one glass, copper at 1 to strontium at 8.\n// Knob 2: Speed. How fast the hand works and the flame moves: at 2 a salt burns about 4.5 s and the next one goes into the flame 12 s after it; at 0.2 the hand works ten times slower and the flame slows to a lazy flicker.\n// Knob 3: Room. The lab lights, on at 0 and off at 1, where only the flame lights the tiles, the bench and the hand.\n// Knob 4: Air. The burner's collar: shut at -1 for a tall, wavering yellow flame that hides the salt's colour, half open near 0 for the quiet blue flame of the test, wide open at 1 for a short roaring flame with a sharp inner cone.\n// Buttons: K1 tap sends the loop to the next salt now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The burner's axis, the first row of flame above its barrel, the bench top.\nconst FX = 21;\nconst MOUTH = 79;\nconst BENCH = 94;\nconst { min, max, floor, ceil, round, sin, cos, exp, abs, sqrt, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => a.map((v, i) => mix(v, b[i], t));\n\n// The row of watch glasses, left to right: symbol, flame colour, the salt's\n// own colour, how long its colour lasts in the flame (s), how strong it is.\nconst WHITE = [0.92, 0.91, 0.87];\nconst SALTS = [\n  [\"Cu\", [0, 240, 185], [0.35, 0.75, 0.7], 2, 1],\n  [\"Na\", [255, 175, 10], WHITE, 3.5, 1.25],\n  [\"Li\", [255, 10, 85], WHITE, 2, 1],\n  [\"Ba\", [170, 255, 35], WHITE, 2, 0.95],\n  [\"K\", [190, 100, 255], WHITE, 1.3, 0.8],\n  [\"Ca\", [255, 85, 10], WHITE, 2.2, 1],\n  [\"B\", [35, 255, 60], WHITE, 1.8, 1],\n  [\"Sr\", [255, 5, 25], WHITE, 2.2, 1.1],\n];\n// A heap of salt in a watch glass: x offset, row, shade.\nconst HEAP = [[0, 107, 1], [-1, 108, 0.95], [0, 108, 1], [1, 108, 0.8], [-2, 109, 0.85], [-1, 109, 0.9], [0, 109, 0.85], [1, 109, 0.75], [2, 109, 0.65]];\n// 3x5 letters for the labels.\nconst FONT = {\n  C: \"011/100/100/100/011\",\n  u: \"000/000/101/101/011\",\n  N: \"110/101/101/101/101\",\n  a: \"000/011/101/101/011\",\n  L: \"100/100/100/100/111\",\n  i: \"1/0/1/1/1\",\n  B: \"110/101/110/101/110\",\n  K: \"101/101/110/101/101\",\n  S: \"011/100/010/001/110\",\n  r: \"000/000/101/110/100\",\n  H: \"101/101/111/101/101\",\n  l: \"1/1/1/1/1\",\n};\n\n// The hand's round: in the flame with a salt, to the acid, dipped, back,\n// in the flame to burn the loop clean, to the next glass, dipped, back.\nconst DUR = [4.5, 1.1, 0.8, 1, 1.4, 1.2, 0.7, 1];\n// Where the loop goes, and the holder's angle there.\nconst FP = [FX + 4, 62, 0.45];\nconst AT = [51, 75, 1.22];\nconst AD = [51, 90, 1.22];\nconst ST = (i) => [4 + 8 * i, 100, 0.52];\nconst SD = (i) => [4 + 8 * i, 108, 0.52];\n\n// Smooth value noise, wrapping both ways.\nfunction noise(w, h, cell, oct) {\n  const out = new Float32Array(w * h);\n  let amp = 1;\n  let tot = 0;\n  for (let o = 0; o \u003c oct; o++, cell /= 2, amp *= 0.55) {\n    const gw = w / cell;\n    const gh = h / cell;\n    const g = Float32Array.from({ length: gw * gh }, rnd);\n    const at = (i, j) => g[(j % gh) * gw + (i % gw)];\n    for (let y = 0; y \u003c h; y++) {\n      const j = floor(y / cell);\n      const ty = sm(0, 1, y / cell - j);\n      for (let x = 0; x \u003c w; x++) {\n        const i = floor(x / cell);\n        const tx = sm(0, 1, x / cell - i);\n        const a = at(i, j) + (at(i + 1, j) - at(i, j)) * tx;\n        const b = at(i, j + 1) + (at(i + 1, j + 1) - at(i, j + 1)) * tx;\n        out[y * w + x] += amp * (a + (b - a) * ty);\n      }\n    }\n    tot += amp;\n  }\n  return out.map((v) => v / tot);\n}\n\n// Bilinear lookup in the 64x128 noise tile.\nfunction nz(T, x, y) {\n  const xi = floor(x);\n  const yi = floor(y);\n  const fx = x - xi;\n  const r0 = (yi & 127) * 64;\n  const r1 = ((yi + 1) & 127) * 64;\n  const a = T[r0 + (xi & 63)];\n  const b = T[r0 + ((xi + 1) & 63)];\n  const c = T[r1 + (xi & 63)];\n  const d = T[r1 + ((xi + 1) & 63)];\n  return a + (b - a) * fx + (c - a + (a - b - c + d) * fx) * (y - yi);\n}\n\n// Everything that stands still, as albedo: the tiled wall and its periodic\n// table, the gas tap and hose, the burner, the acid, the glasses, the labels.\nfunction build(P) {\n  const { alb, spec, G, benchM } = P;\n  const put = (x, y, c, s) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    alb.set(c, p * 3);\n    benchM[p] = 0;\n    if (s !== undefined) spec[p] = s;\n  };\n  const at = (x, y) => alb.slice((y * W + x) * 3, (y * W + x) * 3 + 3);\n  const text = (str, cx, top, ink) => {\n    const gl = [...str].map((c) => FONT[c].split(\"/\"));\n    let x0 = cx - (gl.reduce((s, g) => s + g[0].length + 1, -1) >> 1);\n    for (const g of gl) {\n      for (let j = 0; j \u003c 5; j++) for (let i = 0; i \u003c g[j].length; i++) if (g[j][i] === \"1\") put(x0 + i, top + j, ink);\n      x0 += g[0].length + 1;\n    }\n  };\n  const shade = Float32Array.from({ length: 256 }, rnd);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let v;\n      if (y \u003c BENCH - 1) {\n        const gx = (x + 5) % 11;\n        const gy = (y + 7) % 11;\n        v = gx === 10 || gy === 10 ? 0.36 : 0.45 + 0.05 * shade[(((x + 5) / 11) | 0) * 19 + (((y + 7) / 11) | 0) * 7 & 255] + 0.05 * (1 - (gx + gy) / 18) + (gx === 0 || gy === 0 ? 0.03 : 0);\n        put(x, y, [v, v * 1.01, v * 1.03]);\n      } else if (y === BENCH - 1) put(x, y, [0.06, 0.06, 0.07]);\n      else if (y === BENCH) put(x, y, [0.3, 0.3, 0.32], 0.3);\n      else if (y \u003c 125) {\n        v = 0.17 + 0.014 * rnd();\n        put(x, y, [v, v, v * 1.08]);\n        benchM[y * W + x] = 1;\n      } else put(x, y, y === 125 ? [0.42, 0.42, 0.44] : [0.1, 0.1, 0.11], y === 125 ? 0.4 : 0);\n      // The flame lights the room like a lamp along its height.\n      const dx = x - FX;\n      const dy = y \u003c 22 ? 22 - y : y > 78 ? y - 78 : 0;\n      G[y * W + x] = 1 / (1 + (dx * dx + dy * dy) / 480);\n    }\n  // A periodic table pinned to the tiles.\n  for (let y = 3; y \u003c= 27; y++) for (let x = 39; x \u003c= 62; x++) put(x, y, [0.85, 0.84, 0.78]);\n  for (let x = 42; x \u003c= 59; x++) put(x, 5, [0.2, 0.2, 0.28]);\n  const cell = (c, y, f) =>\n    put(42 + c, y, f ? [0.55, 0.85, 0.8] : c === 0 ? (y === 8 ? [0.7, 0.7, 0.75] : [0.95, 0.35, 0.35]) : c === 1 ? [0.98, 0.62, 0.3] : c \u003c 12 ? [0.95, 0.85, 0.35] : c \u003c 17 ? (c - 12 > (y - 8) / 2 - 1 ? [0.45, 0.8, 0.5] : [0.45, 0.65, 0.95]) : [0.7, 0.5, 0.95]);\n  for (let n = 1; n \u003c= 7; n++) for (let c = 0; c \u003c 18; c++) if (n > 3 || (n === 1 ? c === 0 || c === 17 : c \u003c 2 || c > 11)) cell(c, 6 + 2 * n, false);\n  for (let c = 3; c \u003c 17; c++) cell(c, 23, true), cell(c, 25, true);\n  // The heatproof mat the burner stands on.\n  for (let y = 96; y \u003c= 104; y++)\n    for (let x = 7 - ((y - 96) >> 1); x \u003c= 35 + ((y - 96) >> 1); x++) {\n      const v = y === 104 ? 0.22 : y === 96 ? 0.42 : 0.5 + 0.04 * rnd();\n      put(x, y, [v, v * 0.97, v * 0.92]);\n    }\n  // The gas tap on the wall, its lever, and the orange rubber hose to the burner.\n  for (let y = 82; y \u003c= 91; y++) for (let x = 0; x \u003c= 3; x++) put(x, y, [0.4, 0.4, 0.42], x === 0 ? 0.3 : 0);\n  for (let y = 86; y \u003c= 89; y++) for (let x = 1; x \u003c= 6; x++) put(x, y, y === 86 ? [0.9, 0.72, 0.2] : [0.62, 0.48, 0.2], y === 86 ? 0.5 : 0);\n  for (let x = 7; x \u003c= 9; x++) put(x, 88, [0.72, 0.56, 0.24]);\n  for (let j = 0; j \u003c 4; j++) put(4 + (j >> 1), 85 - j, [0.12, 0.12, 0.13]);\n  for (let k = 0; k \u003c= 80; k++) {\n    const t = k / 80;\n    const u = 1 - t;\n    const bx = round(u * u * u * 9 + 3 * u * u * t * 17 + 3 * u * t * t * 2 + t * t * t * 10);\n    const by = round(u * u * u * 88 + 3 * u * u * t * 94 + 3 * u * t * t * 106 + t * t * t * 101);\n    put(bx, by, [0.88, 0.38, 0.14], 0.25);\n    put(bx, by + 1, [0.6, 0.24, 0.08]);\n  }\n  // The burner: a heavy base, the gas inlet, the chrome barrel and its collar.\n  const BW = [5, 6, 7, 7, 7];\n  for (let j = 0; j \u003c 5; j++)\n    for (let x = FX - BW[j]; x \u003c= FX + BW[j]; x++) {\n      const v = j === 0 ? 0.42 : j === 4 ? 0.1 : 0.22 - 0.03 * j;\n      put(x, 99 + j, [v, v, v * 1.15], j === 0 ? 0.5 : 0);\n    }\n  for (let x = FX - 7; x \u003c= FX + 8; x++) put(x, 104, at(x, 104).map((v) => v * 0.55));\n  for (let x = FX - 11; x \u003c FX - 7; x++) put(x, 100, [0.78, 0.62, 0.3], 0.4), put(x, 101, [0.5, 0.38, 0.18]);\n  const BC = [0.28, 0.75, 0.56, 0.38, 0.2];\n  for (let y = 80; y \u003c= 98; y++)\n    for (let i = 0; i \u003c 5; i++) {\n      const v = BC[i] + (y === 80 ? 0.15 : 0);\n      put(FX - 2 + i, y, [v, v, v * 1.06], i === 1 ? 0.6 : 0);\n    }\n  const CC = [0.25, 0.5, 0.8, 0.64, 0.46, 0.3, 0.18];\n  for (let y = 89; y \u003c= 95; y++)\n    for (let i = 0; i \u003c 7; i++) {\n      const v = CC[i] * (y === 89 || y === 95 ? 0.75 : 1);\n      put(FX - 3 + i, y, [v, v * 0.8, v * 0.42], i === 2 ? 0.5 : 0);\n    }\n  // A beaker of dilute hydrochloric acid to clean the loop in.\n  for (let y = 75; y \u003c= 101; y++)\n    for (let x = 43; x \u003c= 58; x++) {\n      if (x === 43 && y > 76) continue;\n      if (y === 75 || y === 101 || x === 44 || x === 58 || x === 43) {\n        put(x, y, [0.5, 0.55, 0.6], x === 44 || y === 75 ? 0.8 : 0.4);\n        continue;\n      }\n      let c = at(x, y).map((v, i) => v * [0.9, 0.94, 0.98][i]);\n      if (y >= 85) c = c.map((v, i) => v * [0.62, 0.68, 0.7][i] + [0.08, 0.11, 0.14][i]);\n      put(x, y, c, y === 85 ? 0.6 : x === 45 ? 0.3 : 0);\n    }\n  P.front = [];\n  for (let y = 93; y \u003c= 99; y++) for (let x = 46; x \u003c= 56; x++) put(x, y, [0.88, 0.86, 0.78]), P.front.push(y * W + x);\n  text(\"HCl\", 51, 94, [0.07, 0.07, 0.1]);\n  // The watch glasses, each with its heap of salt, and the tape with their names.\n  for (let i = 0; i \u003c 8; i++) {\n    const c = 4 + 8 * i;\n    for (let x = c - 3; x \u003c= c + 3; x++) put(x, 112, at(x, 112).map((v) => v * 0.6));\n    for (let dy = -2; dy \u003c= 1; dy++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const e = (dx / 3.7) ** 2 + ((dy + 0.5) / 2.1) ** 2;\n        if (e \u003c 1) put(c + dx, 110 + dy, e > 0.45 ? [0.5, 0.56, 0.6] : at(c + dx, 110 + dy).map((v) => v * 1.3 + 0.07), e > 0.45 && dy \u003c 0 ? 0.9 : 0.3);\n      }\n    const k = SALTS[i][2];\n    for (const [dx, y, s] of HEAP) put(c + dx, y, k.map((v) => v * s));\n  }\n  for (let y = 115; y \u003c= 121; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const v = y === 115 || y === 121 ? 0.62 : 0.82;\n      if (x % 8) put(x, y, [v, v * 0.97, v * 0.82]);\n    }\n  for (let i = 0; i \u003c 8; i++) text(SALTS[i][0], 4 + 8 * i, 116, [0.06, 0.06, 0.09]);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), spec: F(N), G: F(N), buf: F(N * 3), benchM: new Uint8Array(N), NT: noise(64, 128, 16, 3) });\n  build(P);\n  Object.assign(P, { started: false, t: 0, tf: 0, ph: 0, pt: 0, cur: 0, salt: 0, pick: 0, ks: 0, kd: 0, kc: SALTS[0][1], heat: 0, bead: 0, sput: 0, flare: 0, sp: [], hot: [], sAcc: 0, bAcc: 0, air: 0.5, room: 0, from: FP, pos: FP, m: 1 });\n}\n\n// Kind 0 is a grain carried up the flame in the salt's colour, kind 1 a grain\n// spat out of the loop that glows as it falls, kind 2 a bubble in the acid.\nfunction spark(P, k) {\n  if (P.sp.length >= 160) return;\n  P.sp.push({\n    k,\n    x: P.pos[0] + (rnd() - 0.5) * 2.5,\n    y: P.pos[1] + (rnd() - 0.5) * 2,\n    vx: (rnd() - 0.5) * [14, 60, 2][k],\n    vy: -[25 + 45 * rnd(), 10 + 35 * rnd(), 7 + 6 * rnd()][k],\n    a: 0,\n    l: [0.25 + 0.55 * rnd(), 0.4 + 0.6 * rnd(), 2][k],\n    c: P.kc.map((v) => v * 0.6 + 100),\n  });\n}\n\nfunction enter(P) {\n  const ph = P.ph;\n  P.from = P.pos;\n  if (ph === 5) P.cur = P.pick ? P.pick - 1 : (P.cur + 1) % 8;\n  if (ph === 7) P.bead = 1;\n  if (ph === 0) {\n    P.salt = P.cur;\n    P.kc = SALTS[P.cur][1];\n    for (let i = 0; i \u003c 16; i++) spark(P, i & 1);\n  }\n  // Even a clean loop shows a flash of sodium from the acid and the fingers.\n  if (ph === 4) P.kc = SALTS[1][1];\n}\n\nfunction step(P, h) {\n  P.t += h;\n  P.pt += h;\n  while (P.pt >= DUR[P.ph]) {\n    P.pt -= DUR[P.ph];\n    P.ph = (P.ph + 1) % 8;\n    enter(P);\n  }\n  const ph = P.ph;\n  const s = P.pt / DUR[ph];\n  const e = sm(0, 1, s);\n  const dip = sm(0, 0.35, s) * sm(1, 0.62, s);\n  let pos;\n  if (ph === 0 || ph === 4) pos = [FP[0] + 0.5 * sin(P.t * 1.3), FP[1] + 0.5 * sin(P.t * 1.9 + 1), FP[2]];\n  else if (ph === 2 || ph === 6) {\n    pos = ph === 2 ? mix3(AT, AD, dip) : mix3(ST(P.cur), SD(P.cur), dip);\n    pos[0] += sin(s * 19) * 0.7 * dip;\n  } else {\n    pos = mix3(P.from, ph === 1 ? AT : ph === 5 ? ST(P.cur) : FP, e);\n    pos[1] -= 5 * sin(PI * e);\n  }\n  P.pos = pos;\n  const inF = ph === 0 || ph === 4;\n  const wet = ph === 2 && dip > 0.6;\n  P.heat += ((inF ? 1 : 0) - P.heat) * (1 - exp(-h / (inF ? 0.35 : wet ? 0.07 : 0.9)));\n  if (ph === 0) P.bead = max(0, 1 - P.pt / 0.9);\n\n  // The salt's colour: a burst as the loop goes in, a while at full, then a fade.\n  const S = SALTS[P.salt];\n  let tgt = 0;\n  P.sput = 0;\n  if (ph === 0) {\n    tgt = S[4] * (P.pt \u003c 1.3 ? sm(0, 0.18, P.pt) : exp(-(P.pt - 1.3) / S[3]));\n    P.sput = S[4] * (exp(-P.pt / 0.9) + 0.3 * exp(-P.pt / 2.5));\n  } else if (ph === 4) {\n    tgt = 0.85 * sm(0, 0.15, P.pt) * exp(-P.pt / 0.5);\n    P.sput = 0.5 * exp(-P.pt / 0.35);\n  }\n  P.ks += (tgt - P.ks) * (1 - exp(-h / (tgt > P.ks ? 0.06 : 0.22)));\n  P.flare *= exp(-h / 0.15);\n  P.kd = P.ks * (0.78 + 0.3 * nz(P.NT, P.t * 9, 40.5)) + P.flare;\n  // Grains crackle off the loop, now and then a whole crust at once.\n  if (P.sput > 0.02) {\n    P.sAcc += 40 * P.sput * h;\n    for (; P.sAcc >= 1; P.sAcc--) spark(P, rnd() \u003c 0.7 ? 0 : 1);\n    if (rnd() \u003c 3 * P.sput * h) {\n      P.flare += 0.3 * P.ks;\n      for (let i = 0; i \u003c 8; i++) spark(P, i % 3 ? 0 : 1);\n    }\n  }\n  if (wet) for (P.bAcc += 22 * h; P.bAcc >= 1; P.bAcc--) spark(P, 2);\n  P.sp = P.sp.filter((p) => {\n    p.a += h;\n    if (p.k === 0) {\n      p.vy -= 30 * h;\n      p.vx *= exp(-2 * h);\n    } else if (p.k === 1) p.vy += 90 * h;\n    p.x += p.vx * h;\n    p.y += p.vy * h;\n    return p.a \u003c p.l && !(p.k === 2 && p.y \u003c 85.5) && p.x >= 0 && p.x \u003c= 63 && p.y >= 0 && p.y \u003c= 124;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  P.pick = cl(round(k[0]), 0, 8);\n  P.m = cl(k[1], 0.2, 3) / 2;\n  const room = cl(k[2], 0, 1);\n  const air = (cl(k[3], -1, 1) + 1) / 2;\n  if (!P.started) {\n    P.started = true;\n    P.air = air;\n    P.room = room;\n    P.cur = P.pick ? P.pick - 1 : 0;\n    enter(P);\n    // Open a moment after the first salt went into the flame.\n    for (let i = 0; i \u003c 8; i++) step(P, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.ph \u003c 5) {\n    P.ph = 5;\n    P.pt = 0;\n    enter(P);\n  }\n  P.air += (air - P.air) * (1 - exp(-dt / 0.25));\n  P.room += (room - P.room) * (1 - exp(-dt / 0.12));\n  P.tf += dt * (0.3 + 0.7 * P.m);\n  step(P, dt * P.m);\n}\n\n// The holder: the wire loop, the nichrome wire, the aluminium handle, the\n// hand round it and the white sleeve of a lab coat. The loop and the first\n// few LEDs of wire are kept to glow when hot.\nfunction holder(P, light) {\n  const [lx, ly, th] = P.pos;\n  const ux = cos(th);\n  const uy = -sin(th);\n  P.hot = [];\n  for (let y = max(0, floor(ly + 100 * uy - 7)); y \u003c= min(H - 1, ceil(ly + 7)); y++)\n    for (let x = max(0, floor(lx - 3)); x \u003c W; x++) {\n      const dx = x - lx;\n      const dy = y - ly;\n      const s = dx * ux + dy * uy;\n      const q = dx * uy - dy * ux;\n      if (s \u003c -2.5 || abs(q) > 6.2) continue;\n      let c = null;\n      const hand = ((s - 31) / 4.3) ** 2 + ((q + 0.3) / 3.7) ** 2;\n      if (((s - 27.5) / 2.6) ** 2 + ((q - 2.5) / 1.3) ** 2 \u003c 1) c = [1, 0.78, 0.64];\n      else if (hand \u003c 1) {\n        // Curled fingers under the handle, the knuckles above it.\n        const k = 0.84 + 0.07 * q - (q \u003c -0.8 && abs(((s - 29.5) % 2) - 1) \u003c 0.45 ? 0.22 : 0);\n        c = [k, 0.72 * k, 0.58 * k];\n      } else if (s > 34 && s \u003c 37.5 && abs(q + 0.5) \u003c 3) c = [0.88, 0.62, 0.5];\n      else if (s >= 37 && abs(q + 0.6) \u003c 5.4) {\n        const k = (s \u003c 39 ? 0.74 : 0.9) + 0.03 * q;\n        c = [0.88 * k, 0.89 * k, 0.92 * k];\n      } else if (s >= 9 && s \u003c 30 && q > -1 && q \u003c 0.6) c = q > -0.2 ? [0.66, 0.68, 0.74] : [0.36, 0.37, 0.42];\n      else if ((s >= 1 && s \u003c 9 && abs(q) \u003c 0.6) || (s \u003c 1.8 && abs(hypot(dx, dy) - 1.25) \u003c 0.55)) {\n        c = [0.55, 0.55, 0.52];\n        if (s \u003c 5) P.hot.push(y * W + x, 1 - max(0, s) / 6);\n      }\n      if (c) light(y * W + x, c);\n    }\n}\n\nfunction flame(P) {\n  const { buf, NT, kd, kc } = P;\n  const a = P.air;\n  const t = P.tf;\n  const k1 = min(1, kd);\n  const Yf = sm(0.5, 0.06, a);\n  const Rf = sm(0.6, 1, a);\n  const Cf = sm(0.12, 0.6, a);\n  const bl = sm(0.06, 0.5, a);\n  const fl = 1 + (0.06 * sin(t * 7.3) + 0.05 * sin(t * 12.9 + 1)) * (1 + Yf);\n  const Hf = mix(mix(76, 58, bl), 47, Rf) * (1 + 0.2 * k1) * fl;\n  const Wm = mix(8.5, 6.4, bl) - Rf + 1.6 * k1;\n  const Hi = mix(7, 15, sm(0.15, 1, a));\n  const A = mix(5, 2, bl) * (1 - 0.6 * Rf);\n  const ws = mix(4.5, 6.5, a) + 7 * Rf;\n  const vs = mix(30, 46, a) + 40 * Rf;\n  const tn = mix(0.75, 0.5, a);\n  const [lx, ly] = P.pos;\n  const inF = P.heat > 0.5;\n  const salt = 1 - 0.8 * Yf;\n  for (let y = max(0, floor(MOUTH - Hf * 1.3)); y \u003c= MOUTH; y++) {\n    const hg = MOUTH + 1 - y;\n    const v = hg / Hf;\n    const cx = FX + A * v ** 1.4 * sin(0.11 * hg - ws * t) + 0.45 * A * v * sin(0.23 * hg - 1.7 * ws * t + 2);\n    const hw = max(0.7, (2.6 + (Wm - 2.6) * sm(0, 0.3, v)) * sqrt(max(0, 1.05 - v)));\n    const yw = Yf * sm(2, 9, hg);\n    const ri = 2.5 * max(0, 1 - hg / Hi) ** 0.8 + 0.25;\n    const cxi = FX + 0.35 * sin(t * 9 + hg * 0.3) * (1 - Rf);\n    const above = sm(ly + 5, ly - 2, y);\n    for (let x = max(0, floor(cx - hw * 1.7 - 3)); x \u003c= min(W - 1, ceil(cx + hw * 1.7 + 3)); x++) {\n      const n = nz(NT, x * 1.1 + 7, y * 0.55 + t * vs * 0.55);\n      const d2 = abs(x - cx) / hw + (n - 0.5) * tn * (0.25 + v);\n      const O = sm(1.12, 0.55, d2) * sm(1, 0.72, v + (n - 0.5) * 0.45 * v);\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      // The outer flame: pale blue, or yellow with soot when the collar is shut.\n      if (O > 0.002) {\n        const ob = O * (0.62 + 0.38 * (1 - v)) * (0.85 + 0.25 * n) * (0.8 + 0.25 * Rf);\n        const core = sm(0.85, 0.2, d2) * (1 - 0.5 * v);\n        const lum = O * (0.75 + 0.35 * n);\n        r = mix(58 * ob, 255 * lum, yw);\n        g = mix(98 * ob, lum * (95 + 150 * core - 60 * v), yw);\n        b = mix(225 * ob, O * (10 + 120 * core * core), yw);\n      }\n      // The inner cone, brightest along its surface.\n      if (hg \u003c Hi + 1) {\n        const di = abs(x - cxi);\n        const C = sm(ri + 0.75, ri - 0.35, di) * Cf * (0.92 + 0.08 * sin(t * 61 + hg));\n        if (C > 0) {\n          const rim = sm(ri - 1.3, ri - 0.3, di);\n          r += (60 + 100 * rim) * C;\n          g += (140 + 100 * rim) * C;\n          b += 255 * C;\n        }\n      }\n      // The salt's colour rises from the loop and fills the flame above it in tongues.\n      let ps = 0;\n      if (kd > 0.01) {\n        const n2 = nz(NT, x * 1.6 + 31, y * 0.8 + t * vs * 0.9 + 53);\n        ps = kd * salt * (O * above * (0.4 + 0.95 * n2) + (inF ? 0.9 * exp(-((x - lx) ** 2 + (y - ly) ** 2) / 10) : 0));\n        const q = max(0, 1 - 1.4 * ps);\n        r = r * q + kc[0] * ps;\n        g = g * q + kc[1] * ps;\n        b = b * q + kc[2] * ps;\n      }\n      if (r + g + b \u003c 1) continue;\n      const o = (y * W + x) * 3;\n      const dim = 1 - 0.4 * min(1, O + 0.5 * ps);\n      buf[o] = buf[o] * dim + r;\n      buf[o + 1] = buf[o + 1] * dim + g;\n      buf[o + 2] = buf[o + 2] * dim + b;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const { buf, alb, spec, G, benchM, kc } = P;\n  const a = P.air;\n  const Yf = sm(0.5, 0.06, a);\n  const k1 = min(1.3, P.kd) * (1 - 0.8 * Yf);\n  const fl = 0.9 + 0.1 * nz(P.NT, P.tf * 11, 70.5) + 0.12 * Yf * sin(P.tf * 9);\n  // The flame's own colour, which lights the room.\n  const FC = [0, 1, 2].map((i) => (mix([58, 98, 225][i] * 0.85, [255, 165, 40][i], Yf) * (1 - 0.8 * min(1, k1)) + kc[i] * k1) * fl);\n  const [gr, gg, gb] = FC.map((v) => v * (0.52 + 0.3 * Yf));\n  const A = 150 * (1 - P.room) ** 1.3 + 1.5;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const g = G[p];\n    const s = spec[p];\n    buf[o] = alb[o] * (A + gr * g) + s * (0.3 * A + 1.4 * gr * g);\n    buf[o + 1] = alb[o + 1] * (A + gg * g) + s * (0.3 * A + 1.4 * gg * g);\n    buf[o + 2] = alb[o + 2] * (A * 0.95 + gb * g) + s * (0.3 * A + 1.4 * gb * g);\n  }\n  const add = (p, c, f) => {\n    for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] += c[i] * f;\n  };\n  // The glossy bench: the ceiling lights along its back and the flame under the burner.\n  for (let x = 0; x \u003c W; x++) for (const [y, k] of [[96, 0.22], [97, 0.12]]) if (benchM[y * W + x]) add(y * W + x, [A, A, A], k);\n  const sway = 1.5 * sin(P.tf * 4.1);\n  for (let y = 105; y \u003c= 124; y++) {\n    const w = 2 + (y - 105) * 0.22;\n    const k = 0.34 * exp(-(y - 105) / 7);\n    for (let x = max(0, floor(FX - 3 * w)); x \u003c= min(W - 1, ceil(FX + 3 * w)); x++)\n      if (benchM[y * W + x]) add(y * W + x, FC, k * exp(-(((x - FX - (sway * (y - 105)) / 20) / w) ** 2)));\n  }\n  const light = (p, c) => {\n    const g = G[p];\n    buf[p * 3] = c[0] * (A + gr * g);\n    buf[p * 3 + 1] = c[1] * (A + gg * g);\n    buf[p * 3 + 2] = c[2] * (A * 0.95 + gb * g);\n  };\n  // The air hole in the collar opens as the collar turns.\n  const hole = round(4 * a);\n  for (let y = 91; y \u003c= 93; y++) for (let x = FX - (hole >> 1); x \u003c FX - (hole >> 1) + hole; x++) light(y * W + x, [0.03, 0.03, 0.03]);\n  for (const p of P.sp) if (p.k === 2) light(round(p.y) * W + round(p.x), [0.7, 0.75, 0.8]);\n  holder(P, light);\n  // The label on the beaker hides the loop behind it.\n  if (P.ph >= 1 && P.ph \u003c= 3) for (const p of P.front) light(p, alb.subarray(p * 3, p * 3 + 3));\n  flame(P);\n  for (const p of P.sp) {\n    const f = 1 - p.a / p.l;\n    if (p.k \u003c 2) add(round(p.y) * W + round(p.x), p.k ? [255 * sqrt(f), 210 * f * f, 120 * f * f * f] : p.c, p.k ? 1 : f);\n  }\n  // The loop glows red hot in the flame; the salt on it shows until it melts.\n  const ht = P.heat;\n  if (ht > 0.02) for (let i = 0; i \u003c P.hot.length; i += 2) add(P.hot[i], [255, 70 + 90 * ht, 25 * ht], ht * P.hot[i + 1]);\n  if (P.bead > 0.05) {\n    const c = SALTS[P.cur][2];\n    const p = round(P.pos[1]) * W + round(P.pos[0]);\n    for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = mix(buf[p * 3 + i], c[i] * (A + 60) + [180, 140, 90][i] * ht, P.bead);\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Salt=0..8, Speed=0.2..3, Room=0..1, Air=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Salt","min":0,"max":8,"about":"Which watch glass the loop goes to next: at 0 it works along the row from copper (blue-green) through sodium (yellow-orange), lithium (crimson), barium (apple green), potassium (lilac), calcium (brick red), boric acid (green) and strontium (red); 1 to 8 keeps to one glass, copper at 1 to strontium at 8."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the hand works and the flame moves: at 2 a salt burns about 4.5 s and the next one goes into the flame 12 s after it; at 0.2 the hand works ten times slower and the flame slows to a lazy flicker."},{"name":"Room","min":0,"max":1,"about":"The lab lights, on at 0 and off at 1, where only the flame lights the tiles, the bench and the hand."},{"name":"Air","min":-1,"max":1,"about":"The burner's collar: shut at -1 for a tall, wavering yellow flame that hides the salt's colour, half open near 0 for the quiet blue flame of the test, wide open at 1 for a short roaring flame with a sharp inner cone."}],"start":[0,2,0,0.06],"measures":{"motion":0.0593,"detail":0.0588,"edges":0.4458,"complexity":1.5027,"coverage":0.9519,"colour":0.1298,"drift":0.0434},"knobResponse":[0.0735,0.0457,0.2666,0.1163]},{"slug":"flip-clock","title":"Flip Clock","family":"time","round":2,"note":"세워 둔 넘김 시계예요. 위에 시, 아래에 분 카드가 있고, 바뀔 때마다 옛 카드의 윗장이 앞으로 넘어가 그 뒷면이 새 카드의 아랫장으로 내려앉아요.","idea":"A split-flap clock stood on end, hours above minutes: at each change the top half of the old card falls forward, and its back lands as the bottom half of the new one.","buttons":"K1 tap sets the clock back to 09:58, and the flaps spin round to get there.","code":"// ===== Patternflow pattern =====\n// Title:   Flip Clock\n// Family:  time\n// Idea:    A split-flap clock stood on end, hours above minutes: at each change the top half of the old card falls forward, and its back lands as the bottom half of the new one.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Rate=0..3, Seconds=0..1, Light=0..1\n//\n// Knob 1: Colour. The colour of the digits; the dark cards take a little of it.\n// Knob 2: Rate. From real time at 0 to a minute every second at 3, a minute every four seconds where it starts.\n// Knob 3: Seconds. Turn it up and a seconds card joins below, growing until all three are one size.\n// Knob 4: Light. How hard the light falls on the cards, from flat to a deep shadow under each falling flap.\n// Buttons: K1 tap sets the clock back to 09:58, and the flaps spin round to get there.\n\nconst START = 9 * 3600 + 59 * 60 + 20;\n// Like a real flap clock, the hours are one wheel of 24 cards and the minutes\n// and seconds wheels of 60, each card printed with both digits.\nconst SIZE = [24, 60, 60];\nconst MAX_DW = 24;\nconst MAX_DH = 42;\n\n// Each digit is a few strokes in a box one wide and one tall, y downward.\n// Arcs are cut into short straight pieces when the masks are baked.\nconst FONT = [\n  [[\"l\", 0, 0.3, 0, 0.7], [\"a\", 0.5, 0.7, 0.5, 0.3, 180, 0], [\"l\", 1, 0.7, 1, 0.3], [\"a\", 0.5, 0.3, 0.5, 0.3, 0, -180]],\n  [[\"l\", 0.58, 0, 0.58, 1], [\"l\", 0.58, 0, 0.2, 0.22]],\n  [[\"a\", 0.5, 0.28, 0.5, 0.28, 190, 385], [\"l\", 0.953, 0.398, 0, 1], [\"l\", 0, 1, 1, 1]],\n  [[\"a\", 0.5, 0.25, 0.47, 0.25, 205, 450], [\"a\", 0.5, 0.74, 0.5, 0.26, 270, 520]],\n  [[\"l\", 0.72, 1, 0.72, 0], [\"l\", 0.72, 0, 0, 0.7], [\"l\", 0, 0.7, 1, 0.7]],\n  [[\"l\", 0.95, 0, 0.12, 0], [\"l\", 0.12, 0, 0.07, 0.47], [\"a\", 0.5, 0.68, 0.5, 0.32, 215, 510]],\n  [[\"a\", 0.5, 0.7, 0.5, 0.3, 0, 360], [\"a\", 0.95, 0.7, 0.95, 0.68, 180, 250]],\n  [[\"l\", 0, 0, 1, 0], [\"l\", 1, 0, 0.32, 1]],\n  [[\"a\", 0.5, 0.24, 0.42, 0.24, 0, 360], [\"a\", 0.5, 0.73, 0.5, 0.27, 0, 360]],\n  [[\"a\", 0.5, 0.3, 0.5, 0.3, 0, 360], [\"a\", 0.05, 0.3, 0.95, 0.68, 0, 70]],\n];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction strokes() {\n  const all = [];\n  for (let d = 0; d \u003c 10; d++) {\n    const segs = [];\n    for (const s of FONT[d]) {\n      if (s[0] === \"l\") {\n        segs.push(s[1], s[2], s[3], s[4]);\n        continue;\n      }\n      const [, cx, cy, rx, ry, a0, a1] = s;\n      const pieces = Math.max(3, Math.round(Math.abs(a1 - a0) / 20));\n      for (let i = 0; i \u003c pieces; i++) {\n        const b0 = ((a0 + ((a1 - a0) * i) / pieces) * Math.PI) / 180;\n        const b1 = ((a0 + ((a1 - a0) * (i + 1)) / pieces) * Math.PI) / 180;\n        segs.push(cx + rx * Math.cos(b0), cy + ry * Math.sin(b0), cx + rx * Math.cos(b1), cy + ry * Math.sin(b1));\n      }\n    }\n    all.push(new Float32Array(segs));\n  }\n  return all;\n}\n\n// Bake the ten digits at one size into coverage masks, one byte an LED, with\n// a one-LED soft edge. This runs only when a card changes size.\nfunction bake(p, m, dh) {\n  const dw = Math.round(dh * 0.56);\n  const sw = Math.max(2.2, dh * 0.135);\n  m.dh = dh;\n  m.dw = dw;\n  const half = sw / 2;\n  const sx = dw - sw;\n  const sy = dh - sw;\n  for (let d = 0; d \u003c 10; d++) {\n    const segs = p.strokes[d];\n    for (let j = 0; j \u003c dh; j++) {\n      for (let i = 0; i \u003c dw; i++) {\n        const x = i + 0.5;\n        const y = j + 0.5;\n        let best = 1e9;\n        for (let s = 0; s \u003c segs.length; s += 4) {\n          const ax = half + segs[s] * sx;\n          const ay = half + segs[s + 1] * sy;\n          const bx = half + segs[s + 2] * sx - ax;\n          const by = half + segs[s + 3] * sy - ay;\n          const px = x - ax;\n          const py = y - ay;\n          const len = bx * bx + by * by;\n          let t = len > 0 ? (px * bx + py * by) / len : 0;\n          t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n          const dx = px - bx * t;\n          const dy = py - by * t;\n          const dd = dx * dx + dy * dy;\n          if (dd \u003c best) best = dd;\n        }\n        const c = half + 0.5 - Math.sqrt(best);\n        m.mask[(d * MAX_DH + j) * MAX_DW + i] = Math.round(Math.max(0, Math.min(1, c)) * 255);\n      }\n    }\n  }\n}\n\n// Bilinear read of a baked digit at box position (x, y), so a squashed flap stays smooth.\nfunction sample(m, d, x, y) {\n  const u = x - 0.5;\n  const v = y - 0.5;\n  const i = Math.floor(u);\n  const j = Math.floor(v);\n  if (i \u003c -1 || j \u003c -1 || i >= m.dw || j >= m.dh) return 0;\n  const fu = u - i;\n  const fv = v - j;\n  const base = d * MAX_DH;\n  const mask = m.mask;\n  const a = i >= 0 && j >= 0 ? mask[(base + j) * MAX_DW + i] : 0;\n  const b = i + 1 \u003c m.dw && j >= 0 ? mask[(base + j) * MAX_DW + i + 1] : 0;\n  const c = i >= 0 && j + 1 \u003c m.dh ? mask[(base + j + 1) * MAX_DW + i] : 0;\n  const e = i + 1 \u003c m.dw && j + 1 \u003c m.dh ? mask[(base + j + 1) * MAX_DW + i + 1] : 0;\n  return ((a * (1 - fu) + b * fu) * (1 - fv) + (c * (1 - fu) + e * fu) * fv) / 255;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.strokes = strokes();\n  // One set of masks for the hours and minutes cards, one for the seconds card.\n  p.masks = [\n    { dh: 0, dw: 0, mask: new Uint8Array(10 * MAX_DH * MAX_DW) },\n    { dh: 0, dw: 0, mask: new Uint8Array(10 * MAX_DH * MAX_DW) },\n  ];\n  p.clock = START;\n  p.target = new Int32Array(3);\n  p.shown = new Int32Array([9, 59, 20]);\n  p.prev = new Int32Array([9, 59, 20]);\n  p.prog = new Float32Array([1, 1, 1]);\n  p.dur = new Float32Array([0.34, 0.34, 0.34]);\n  p.rect = new Int32Array(12);\n  p.card = [0, 0, 0];\n  p.face = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // At 0 the digits are a pale blue rather than red.\n  p.hue = k[0] + 0.6;\n  p.light = 0.3 + 0.7 * k[3];\n  p.secs = k[2];\n  if (input.btnPressed && input.btnPressed[0]) p.clock = 9 * 3600 + 58 * 60;\n  p.clock += dt * Math.pow(60, k[1] / 3);\n  const t = Math.floor(p.clock) % 86400;\n  p.target[0] = Math.floor(t / 3600);\n  p.target[1] = Math.floor(t / 60) % 60;\n  p.target[2] = t % 60;\n  for (let u = 0; u \u003c 3; u++) {\n    if (p.prog[u] \u003c 1) p.prog[u] = Math.min(1, p.prog[u] + dt / p.dur[u]);\n    if (p.prog[u] >= 1 && p.shown[u] !== p.target[u]) {\n      // A wheel can only step to its next card, so a clock run fast spins\n      // its flaps to catch up the way a real one does.\n      const n = SIZE[u];\n      p.prev[u] = p.shown[u];\n      p.shown[u] = (p.shown[u] + 1) % n;\n      const behind = (p.target[u] - p.prev[u] + n) % n;\n      p.dur[u] = 0.34 / Math.min(5, behind);\n      p.prog[u] = 0;\n    }\n  }\n}\n\nfunction setRect(r, u, x, y, w, h) {\n  r[u * 4] = x;\n  r[u * 4 + 1] = y;\n  r[u * 4 + 2] = w;\n  r[u * 4 + 3] = h;\n}\n\nfunction layout(p) {\n  const r = p.rect;\n  if (p.secs \u003c= 0.12) {\n    // Hours and minutes, one big card each.\n    setRect(r, 0, 3, 5, 58, 55);\n    setRect(r, 1, 3, 68, 58, 55);\n    return 2;\n  }\n  // The seconds card grows from small to the size of the other two.\n  const u = Math.min(1, (p.secs - 0.12) / 0.88);\n  const hs = 2 * Math.round(12 + 6 * u) + 1;\n  let ch = Math.floor((128 - hs - 12) / 2);\n  if (ch % 2 === 0) ch--;\n  const top = Math.floor((128 - 2 * ch - hs - 8) / 2);\n  const sw = Math.min(58, 2 * Math.round(hs * 0.8));\n  setRect(r, 0, 3, top, 58, ch);\n  setRect(r, 1, 3, top + ch + 4, 58, ch);\n  setRect(r, 2, (64 - sw) / 2, top + 2 * ch + 8, sw, hs);\n  return 3;\n}\n\nfunction drawCard(display, p, u) {\n  const x0 = p.rect[u * 4];\n  const y0 = p.rect[u * 4 + 1];\n  const cw = p.rect[u * 4 + 2];\n  const ch = p.rect[u * 4 + 3];\n  const L = p.light;\n  const m = p.masks[u === 2 ? 1 : 0];\n  const dh = Math.min(MAX_DH, Math.round(ch * 0.72));\n  if (m.dh !== dh) bake(p, m, dh);\n  const dw = m.dw;\n  const gap = Math.max(2, Math.round(cw * 0.08));\n  const lx = Math.round(cw / 2 - gap / 2 - dw);\n  const rx = Math.round(cw / 2 + gap / 2);\n  const oy = Math.round((ch - dh) / 2);\n  const value = p.shown[u];\n  const old = p.prev[u];\n  const prog = p.prog[u];\n  const flipping = prog \u003c 1;\n\n  const hh = (ch - 1) / 2;\n  const hinge = hh + 0.5;\n  const theta = prog * Math.PI;\n  const cos = Math.cos(theta);\n  const sin = Math.sin(theta);\n  const reach = hh * Math.abs(cos);\n  const first = flipping && prog \u003c 0.5;\n  const second = flipping && prog >= 0.5;\n  const mid = cw / 2;\n  const card = p.card;\n  const face = p.face;\n\n  for (let y = 0; y \u003c ch; y++) {\n    const ry = y + 0.5;\n    const upper = ry \u003c hh;\n    const lower = ry > hh + 1;\n    if (!upper && !lower) continue;\n    // Which surface is seen on this row, where on its card it comes from, and how it is lit.\n    let sy = ry;\n    let shown = value;\n    let shade = 1;\n    let flap = false;\n    let f = 0;\n    if (first && upper && hinge - ry \u003c= reach) {\n      f = (hinge - ry) / reach;\n      sy = hinge - f * hh;\n      shown = old;\n      shade = 1 - 0.8 * L * sin;\n      flap = true;\n    } else if (second && lower && ry - hinge \u003c= reach) {\n      f = (ry - hinge) / reach;\n      sy = hinge + f * hh;\n      shade = 1 - 0.8 * L * sin;\n      flap = true;\n    } else if (lower && flipping) {\n      // The old bottom half stays until the flap lands on it, in its shadow.\n      shown = old;\n      if (second) {\n        const below = ry - hinge - reach;\n        if (below \u003c 7) shade *= 1 - 0.6 * L * (1 - below / 7) * (1 - 0.6 * Math.abs(cos));\n      }\n    }\n    const ty = Math.floor(sy);\n    const roundTop = ty === 0 || ty === hh + 1;\n    const roundBottom = ty === ch - 1 || ty === hh - 1;\n    // Light from above: each card darkens toward its foot, the top edge\n    // catches the light and the row under the split sits in shadow.\n    shade *= 1 + L * (0.1 - 0.45 * (sy / ch));\n    if (ty === 0) shade *= 1 + 0.5 * L;\n    else if (ty === hh + 1) shade *= 1 - 0.5 * L;\n    const tens = Math.floor(shown / 10);\n    const ones = shown % 10;\n    // The falling flap's free edge swings toward you, so it looks a little wider.\n    const widen = flap ? 1 + 0.12 * sin * f : 1;\n    const pad = flap ? 2 : 0;\n    for (let x = -pad; x \u003c cw + pad; x++) {\n      const sx = mid + (x + 0.5 - mid) / widen;\n      if (sx \u003c 0 || sx >= cw) continue;\n      const tx = Math.floor(sx);\n      // Each half card has its corners cut.\n      if ((tx === 0 || tx === cw - 1) && (roundTop || roundBottom)) continue;\n      const a = sx \u003c mid ? sample(m, tens, sx - lx, sy - oy) : sample(m, ones, sx - rx, sy - oy);\n      const r = (card[0] + (face[0] - card[0]) * a) * shade;\n      const g = (card[1] + (face[1] - card[1]) * a) * shade;\n      const b = (card[2] + (face[2] - card[2]) * a) * shade;\n      display.setPixel(x0 + x, y0 + y, r, g, b);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  hsv(p.hue, 0.3, 0.19, p.card);\n  hsv(p.hue, 0.4, 1, p.face);\n  const cards = layout(p);\n  for (let u = 0; u \u003c cards; u++) drawCard(display, p, u);\n}\n","layer":{"id":"layer-flip-clock","type":"code","name":"flip-clock","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flip Clock\n// Family:  time\n// Idea:    A split-flap clock stood on end, hours above minutes: at each change the top half of the old card falls forward, and its back lands as the bottom half of the new one.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Rate=0..3, Seconds=0..1, Light=0..1\n//\n// Knob 1: Colour. The colour of the digits; the dark cards take a little of it.\n// Knob 2: Rate. From real time at 0 to a minute every second at 3, a minute every four seconds where it starts.\n// Knob 3: Seconds. Turn it up and a seconds card joins below, growing until all three are one size.\n// Knob 4: Light. How hard the light falls on the cards, from flat to a deep shadow under each falling flap.\n// Buttons: K1 tap sets the clock back to 09:58, and the flaps spin round to get there.\n\nconst START = 9 * 3600 + 59 * 60 + 20;\n// Like a real flap clock, the hours are one wheel of 24 cards and the minutes\n// and seconds wheels of 60, each card printed with both digits.\nconst SIZE = [24, 60, 60];\nconst MAX_DW = 24;\nconst MAX_DH = 42;\n\n// Each digit is a few strokes in a box one wide and one tall, y downward.\n// Arcs are cut into short straight pieces when the masks are baked.\nconst FONT = [\n  [[\"l\", 0, 0.3, 0, 0.7], [\"a\", 0.5, 0.7, 0.5, 0.3, 180, 0], [\"l\", 1, 0.7, 1, 0.3], [\"a\", 0.5, 0.3, 0.5, 0.3, 0, -180]],\n  [[\"l\", 0.58, 0, 0.58, 1], [\"l\", 0.58, 0, 0.2, 0.22]],\n  [[\"a\", 0.5, 0.28, 0.5, 0.28, 190, 385], [\"l\", 0.953, 0.398, 0, 1], [\"l\", 0, 1, 1, 1]],\n  [[\"a\", 0.5, 0.25, 0.47, 0.25, 205, 450], [\"a\", 0.5, 0.74, 0.5, 0.26, 270, 520]],\n  [[\"l\", 0.72, 1, 0.72, 0], [\"l\", 0.72, 0, 0, 0.7], [\"l\", 0, 0.7, 1, 0.7]],\n  [[\"l\", 0.95, 0, 0.12, 0], [\"l\", 0.12, 0, 0.07, 0.47], [\"a\", 0.5, 0.68, 0.5, 0.32, 215, 510]],\n  [[\"a\", 0.5, 0.7, 0.5, 0.3, 0, 360], [\"a\", 0.95, 0.7, 0.95, 0.68, 180, 250]],\n  [[\"l\", 0, 0, 1, 0], [\"l\", 1, 0, 0.32, 1]],\n  [[\"a\", 0.5, 0.24, 0.42, 0.24, 0, 360], [\"a\", 0.5, 0.73, 0.5, 0.27, 0, 360]],\n  [[\"a\", 0.5, 0.3, 0.5, 0.3, 0, 360], [\"a\", 0.05, 0.3, 0.95, 0.68, 0, 70]],\n];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction strokes() {\n  const all = [];\n  for (let d = 0; d \u003c 10; d++) {\n    const segs = [];\n    for (const s of FONT[d]) {\n      if (s[0] === \"l\") {\n        segs.push(s[1], s[2], s[3], s[4]);\n        continue;\n      }\n      const [, cx, cy, rx, ry, a0, a1] = s;\n      const pieces = Math.max(3, Math.round(Math.abs(a1 - a0) / 20));\n      for (let i = 0; i \u003c pieces; i++) {\n        const b0 = ((a0 + ((a1 - a0) * i) / pieces) * Math.PI) / 180;\n        const b1 = ((a0 + ((a1 - a0) * (i + 1)) / pieces) * Math.PI) / 180;\n        segs.push(cx + rx * Math.cos(b0), cy + ry * Math.sin(b0), cx + rx * Math.cos(b1), cy + ry * Math.sin(b1));\n      }\n    }\n    all.push(new Float32Array(segs));\n  }\n  return all;\n}\n\n// Bake the ten digits at one size into coverage masks, one byte an LED, with\n// a one-LED soft edge. This runs only when a card changes size.\nfunction bake(p, m, dh) {\n  const dw = Math.round(dh * 0.56);\n  const sw = Math.max(2.2, dh * 0.135);\n  m.dh = dh;\n  m.dw = dw;\n  const half = sw / 2;\n  const sx = dw - sw;\n  const sy = dh - sw;\n  for (let d = 0; d \u003c 10; d++) {\n    const segs = p.strokes[d];\n    for (let j = 0; j \u003c dh; j++) {\n      for (let i = 0; i \u003c dw; i++) {\n        const x = i + 0.5;\n        const y = j + 0.5;\n        let best = 1e9;\n        for (let s = 0; s \u003c segs.length; s += 4) {\n          const ax = half + segs[s] * sx;\n          const ay = half + segs[s + 1] * sy;\n          const bx = half + segs[s + 2] * sx - ax;\n          const by = half + segs[s + 3] * sy - ay;\n          const px = x - ax;\n          const py = y - ay;\n          const len = bx * bx + by * by;\n          let t = len > 0 ? (px * bx + py * by) / len : 0;\n          t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n          const dx = px - bx * t;\n          const dy = py - by * t;\n          const dd = dx * dx + dy * dy;\n          if (dd \u003c best) best = dd;\n        }\n        const c = half + 0.5 - Math.sqrt(best);\n        m.mask[(d * MAX_DH + j) * MAX_DW + i] = Math.round(Math.max(0, Math.min(1, c)) * 255);\n      }\n    }\n  }\n}\n\n// Bilinear read of a baked digit at box position (x, y), so a squashed flap stays smooth.\nfunction sample(m, d, x, y) {\n  const u = x - 0.5;\n  const v = y - 0.5;\n  const i = Math.floor(u);\n  const j = Math.floor(v);\n  if (i \u003c -1 || j \u003c -1 || i >= m.dw || j >= m.dh) return 0;\n  const fu = u - i;\n  const fv = v - j;\n  const base = d * MAX_DH;\n  const mask = m.mask;\n  const a = i >= 0 && j >= 0 ? mask[(base + j) * MAX_DW + i] : 0;\n  const b = i + 1 \u003c m.dw && j >= 0 ? mask[(base + j) * MAX_DW + i + 1] : 0;\n  const c = i >= 0 && j + 1 \u003c m.dh ? mask[(base + j + 1) * MAX_DW + i] : 0;\n  const e = i + 1 \u003c m.dw && j + 1 \u003c m.dh ? mask[(base + j + 1) * MAX_DW + i + 1] : 0;\n  return ((a * (1 - fu) + b * fu) * (1 - fv) + (c * (1 - fu) + e * fu) * fv) / 255;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.strokes = strokes();\n  // One set of masks for the hours and minutes cards, one for the seconds card.\n  p.masks = [\n    { dh: 0, dw: 0, mask: new Uint8Array(10 * MAX_DH * MAX_DW) },\n    { dh: 0, dw: 0, mask: new Uint8Array(10 * MAX_DH * MAX_DW) },\n  ];\n  p.clock = START;\n  p.target = new Int32Array(3);\n  p.shown = new Int32Array([9, 59, 20]);\n  p.prev = new Int32Array([9, 59, 20]);\n  p.prog = new Float32Array([1, 1, 1]);\n  p.dur = new Float32Array([0.34, 0.34, 0.34]);\n  p.rect = new Int32Array(12);\n  p.card = [0, 0, 0];\n  p.face = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // At 0 the digits are a pale blue rather than red.\n  p.hue = k[0] + 0.6;\n  p.light = 0.3 + 0.7 * k[3];\n  p.secs = k[2];\n  if (input.btnPressed && input.btnPressed[0]) p.clock = 9 * 3600 + 58 * 60;\n  p.clock += dt * Math.pow(60, k[1] / 3);\n  const t = Math.floor(p.clock) % 86400;\n  p.target[0] = Math.floor(t / 3600);\n  p.target[1] = Math.floor(t / 60) % 60;\n  p.target[2] = t % 60;\n  for (let u = 0; u \u003c 3; u++) {\n    if (p.prog[u] \u003c 1) p.prog[u] = Math.min(1, p.prog[u] + dt / p.dur[u]);\n    if (p.prog[u] >= 1 && p.shown[u] !== p.target[u]) {\n      // A wheel can only step to its next card, so a clock run fast spins\n      // its flaps to catch up the way a real one does.\n      const n = SIZE[u];\n      p.prev[u] = p.shown[u];\n      p.shown[u] = (p.shown[u] + 1) % n;\n      const behind = (p.target[u] - p.prev[u] + n) % n;\n      p.dur[u] = 0.34 / Math.min(5, behind);\n      p.prog[u] = 0;\n    }\n  }\n}\n\nfunction setRect(r, u, x, y, w, h) {\n  r[u * 4] = x;\n  r[u * 4 + 1] = y;\n  r[u * 4 + 2] = w;\n  r[u * 4 + 3] = h;\n}\n\nfunction layout(p) {\n  const r = p.rect;\n  if (p.secs \u003c= 0.12) {\n    // Hours and minutes, one big card each.\n    setRect(r, 0, 3, 5, 58, 55);\n    setRect(r, 1, 3, 68, 58, 55);\n    return 2;\n  }\n  // The seconds card grows from small to the size of the other two.\n  const u = Math.min(1, (p.secs - 0.12) / 0.88);\n  const hs = 2 * Math.round(12 + 6 * u) + 1;\n  let ch = Math.floor((128 - hs - 12) / 2);\n  if (ch % 2 === 0) ch--;\n  const top = Math.floor((128 - 2 * ch - hs - 8) / 2);\n  const sw = Math.min(58, 2 * Math.round(hs * 0.8));\n  setRect(r, 0, 3, top, 58, ch);\n  setRect(r, 1, 3, top + ch + 4, 58, ch);\n  setRect(r, 2, (64 - sw) / 2, top + 2 * ch + 8, sw, hs);\n  return 3;\n}\n\nfunction drawCard(display, p, u) {\n  const x0 = p.rect[u * 4];\n  const y0 = p.rect[u * 4 + 1];\n  const cw = p.rect[u * 4 + 2];\n  const ch = p.rect[u * 4 + 3];\n  const L = p.light;\n  const m = p.masks[u === 2 ? 1 : 0];\n  const dh = Math.min(MAX_DH, Math.round(ch * 0.72));\n  if (m.dh !== dh) bake(p, m, dh);\n  const dw = m.dw;\n  const gap = Math.max(2, Math.round(cw * 0.08));\n  const lx = Math.round(cw / 2 - gap / 2 - dw);\n  const rx = Math.round(cw / 2 + gap / 2);\n  const oy = Math.round((ch - dh) / 2);\n  const value = p.shown[u];\n  const old = p.prev[u];\n  const prog = p.prog[u];\n  const flipping = prog \u003c 1;\n\n  const hh = (ch - 1) / 2;\n  const hinge = hh + 0.5;\n  const theta = prog * Math.PI;\n  const cos = Math.cos(theta);\n  const sin = Math.sin(theta);\n  const reach = hh * Math.abs(cos);\n  const first = flipping && prog \u003c 0.5;\n  const second = flipping && prog >= 0.5;\n  const mid = cw / 2;\n  const card = p.card;\n  const face = p.face;\n\n  for (let y = 0; y \u003c ch; y++) {\n    const ry = y + 0.5;\n    const upper = ry \u003c hh;\n    const lower = ry > hh + 1;\n    if (!upper && !lower) continue;\n    // Which surface is seen on this row, where on its card it comes from, and how it is lit.\n    let sy = ry;\n    let shown = value;\n    let shade = 1;\n    let flap = false;\n    let f = 0;\n    if (first && upper && hinge - ry \u003c= reach) {\n      f = (hinge - ry) / reach;\n      sy = hinge - f * hh;\n      shown = old;\n      shade = 1 - 0.8 * L * sin;\n      flap = true;\n    } else if (second && lower && ry - hinge \u003c= reach) {\n      f = (ry - hinge) / reach;\n      sy = hinge + f * hh;\n      shade = 1 - 0.8 * L * sin;\n      flap = true;\n    } else if (lower && flipping) {\n      // The old bottom half stays until the flap lands on it, in its shadow.\n      shown = old;\n      if (second) {\n        const below = ry - hinge - reach;\n        if (below \u003c 7) shade *= 1 - 0.6 * L * (1 - below / 7) * (1 - 0.6 * Math.abs(cos));\n      }\n    }\n    const ty = Math.floor(sy);\n    const roundTop = ty === 0 || ty === hh + 1;\n    const roundBottom = ty === ch - 1 || ty === hh - 1;\n    // Light from above: each card darkens toward its foot, the top edge\n    // catches the light and the row under the split sits in shadow.\n    shade *= 1 + L * (0.1 - 0.45 * (sy / ch));\n    if (ty === 0) shade *= 1 + 0.5 * L;\n    else if (ty === hh + 1) shade *= 1 - 0.5 * L;\n    const tens = Math.floor(shown / 10);\n    const ones = shown % 10;\n    // The falling flap's free edge swings toward you, so it looks a little wider.\n    const widen = flap ? 1 + 0.12 * sin * f : 1;\n    const pad = flap ? 2 : 0;\n    for (let x = -pad; x \u003c cw + pad; x++) {\n      const sx = mid + (x + 0.5 - mid) / widen;\n      if (sx \u003c 0 || sx >= cw) continue;\n      const tx = Math.floor(sx);\n      // Each half card has its corners cut.\n      if ((tx === 0 || tx === cw - 1) && (roundTop || roundBottom)) continue;\n      const a = sx \u003c mid ? sample(m, tens, sx - lx, sy - oy) : sample(m, ones, sx - rx, sy - oy);\n      const r = (card[0] + (face[0] - card[0]) * a) * shade;\n      const g = (card[1] + (face[1] - card[1]) * a) * shade;\n      const b = (card[2] + (face[2] - card[2]) * a) * shade;\n      display.setPixel(x0 + x, y0 + y, r, g, b);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  hsv(p.hue, 0.3, 0.19, p.card);\n  hsv(p.hue, 0.4, 1, p.face);\n  const cards = layout(p);\n  for (let u = 0; u \u003c cards; u++) drawCard(display, p, u);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Colour=0..1, Rate=0..3, Seconds=0..1, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Colour","min":0,"max":1,"about":"The colour of the digits; the dark cards take a little of it."},{"name":"Rate","min":0,"max":3,"about":"From real time at 0 to a minute every second at 3, a minute every four seconds where it starts."},{"name":"Seconds","min":0,"max":1,"about":"Turn it up and a seconds card joins below, growing until all three are one size."},{"name":"Light","min":0,"max":1,"about":"How hard the light falls on the cards, from flat to a deep shadow under each falling flap."}],"start":[0,2,0,0.06],"measures":{"motion":0.0975,"detail":0.0443,"edges":0.7774,"complexity":0.213,"coverage":0.7633,"colour":0.1458,"drift":0.128},"knobResponse":[0.0983,0.1045,0.1894,0.032]},{"slug":"flipdot","title":"Flipdot","family":"type","round":22,"note":"버스 앞에 다는 형광 노랑 플립 디스크 행선판을 세워 놓았어요. 위 칸에 노선 번호, 아래 칸에 행선지가 7줄 점 글꼴로 서고, 쪽이 바뀔 때마다 디스크가 한 줄씩 넘어가며 판 전체를 노랗게 뒤집었다가 반전된 경유지 쪽을 써요. 넘어가는 동안의 디스크는 가는 모서리로 보여요.","idea":"A bus destination sign of fluorescent flip discs stands on end, the route number in its own box above the destination, and between pages a wave of discs flips the whole board yellow and back, each disc showing a thin edge as it turns.","buttons":"K1 tap ends the page now and the next wave starts.","code":"// ===== Patternflow pattern =====\n// Title:   Flipdot\n// Family:  type\n// Idea:    A bus destination sign of fluorescent flip discs stands on end, the route number in its own box above the destination, and between pages a wave of discs flips the whole board yellow and back, each disc showing a thin edge as it turns.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the electromagnetic flip-disc destination signs on buses and trams from the 1970s on\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Disc=0..1, Speed=0.2..3, Route=0..3, Wipe=0..3\n//\n// Knob 1: Disc. The colour painted on the bright side of the discs: fluorescent yellow at 0, then lime green, white, amber and red at 1.\n// Knob 2: Speed. How fast the sign runs its pages and its waves: at 2 the destination holds three seconds, the stops a little over two, and a wave crosses the board in under a second.\n// Knob 3: Route. Which bus the sign is set for, each with its own number, destination and stops: the 17 to Pier Head, the 7 to Dock Yard, the N9 night bus and the X3 express to Sea Wall.\n// Knob 4: Wipe. How the controller drives the discs between pages: column by column at 0, a diagonal at 1, a scatter of single discs at 2, row by row at 3.\n// Buttons: K1 tap ends the page now and the next wave starts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The board: 20 discs across and 40 down on a 3 LED pitch, each disc 2 by 2\n// LEDs with one dark LED between. The top box holds 16 rows for the route\n// number; a housing bar; then 24 rows for the destination.\nconst COLS = 20;\nconst R1 = 16;\nconst R2 = 24;\nconst ROWS = R1 + R2;\nconst ND = COLS * ROWS;\nconst discX = (c) => 3 + 3 * c;\nconst discY = (r) => (r \u003c R1 ? 2 + 3 * r : 55 + 3 * (r - R1));\n\n// One disc's turn, in sign seconds. The first quarter shows the old face, the\n// second a thin edge of it on the top row, the third a thin edge of the new\n// face on the bottom row, the last the new face.\nconst FD = 0.14;\nconst FIRST = 2.15;\nconst HOLD = 3.0;\nconst HOLD_INV = 2.2;\nconst WAVE = [0.8, 1.05, 0.9, 1.0];\n\n// A condensed 7 row dot face. Each glyph is its rows left to right, top to\n// bottom; the width is the length over 7. Most letters are 4 discs wide, the\n// I and the 1 are 3, M T V W X Y are 5.\nconst FONT = {\n  A: \".##.#..##..######..##..##..#\", B: \"###.#..##..####.#..##..####.\", C: \".##.#..##...#...#...#..#.##.\",\n  D: \"###.#..##..##..##..##..####.\", E: \"#####...#...###.#...#...####\", F: \"#####...#...###.#...#...#...\",\n  G: \".##.#..##...#.###..##..#.###\", H: \"#..##..##..######..##..##..#\", I: \"###.#..#..#..#..#.###\",\n  J: \"...#...#...#...##..##..#.##.\", K: \"#..##..##.#.##..#.#.#..##..#\", L: \"#...#...#...#...#...#...####\",\n  M: \"#...###.###.#.##.#.##...##...##...#\", N: \"#..###.###.##.###.###..##..#\", O: \".##.#..##..##..##..##..#.##.\",\n  P: \"###.#..##..####.#...#...#...\", R: \"###.#..##..####.#.#.#..##..#\", S: \".##.#..##....##....##..#.##.\",\n  T: \"#####..#....#....#....#....#....#..\", U: \"#..##..##..##..##..##..#.##.\", V: \"#...##...##...#.#.#..#.#..#.#...#..\",\n  W: \"#...##...##...##.#.##.#.###.###...#\", X: \"#...##...#.#.#...#...#.#.#...##...#\", Y: \"#...##...#.#.#...#....#....#....#..\",\n  Z: \"####...#..#...#..#..#...####\",\n  0: \".##.#..##.###..###.##..#.##.\", 1: \".#.##..#..#..#..#.###\", 2: \".##.#..#...#..#..#..#...####\",\n  3: \".##.#..#...#.##....##..#.##.\", 4: \"..#..##.#.#.#.#.####..#...#.\", 5: \"#####...###....#...##..#.##.\",\n  6: \".##.#...#...###.#..##..#.##.\", 7: \"####...#..#...#..#...#...#..\", 8: \".##.#..##..#.##.#..##..#.##.\",\n  9: \".##.#..##..#.###...#...#.##.\", \"-\": \".........###.........\", \":\": \"..#..#.\", \".\": \"......#\",\n};\n\n// Each route runs four pages: the destination, a page of stops shown\n// inverse, the destination again, and a second inverse page.\nconst ROUTES = [\n  { no: \"17\", pages: [[\"PIER\", \"HEAD\"], [\"VIA\", \"OLD\", \"MILL\"], [\"PIER\", \"HEAD\"], [\"VIA\", \"FISH\", \"DOCK\"]] },\n  { no: \"7\", pages: [[\"DOCK\", \"YARD\"], [\"VIA\", \"FAIR\", \"LANE\"], [\"DOCK\", \"YARD\"], [\"VIA\", \"ROPE\", \"WALK\"]] },\n  { no: \"N9\", pages: [[\"ZOO\", \"GATE\"], [\"LAST\", \"BUS\", \"0115\"], [\"ZOO\", \"GATE\"], [\"VIA\", \"ELM\", \"PARK\"]] },\n  { no: \"X3\", pages: [[\"SEA\", \"WALL\"], [\"VIA\", \"HIGH\", \"ST\"], [\"SEA\", \"WALL\"], [\"VIA\", \"LIDO\"]] },\n];\n\n// Disc paint, from the yellow most of these signs carried to the red a few did.\nconst PAINT = [\n  [255, 226, 20],\n  [110, 255, 40],\n  [236, 240, 226],\n  [255, 150, 12],\n  [255, 58, 34],\n];\nconst BLACK = [13, 13, 12];\nconst GAP = [3, 3, 4];\n\nconst textWidth = (s, k) => {\n  let w = 0;\n  for (const ch of s) w += (ch === \" \" ? 2 : FONT[ch].length / 7) * k + k;\n  return max(0, w - k);\n};\n\n// Sets the discs of one line of text, k times size, its top left at disc\n// (c0, r0).\nfunction stamp(bits, s, c0, r0, k) {\n  let c = c0;\n  for (const ch of s) {\n    if (ch === \" \") {\n      c += 3 * k;\n      continue;\n    }\n    const g = FONT[ch];\n    const gw = g.length / 7;\n    for (let y = 0; y \u003c 7; y++)\n      for (let x = 0; x \u003c gw; x++) {\n        if (g[y * gw + x] !== \"#\") continue;\n        for (let a = 0; a \u003c k; a++)\n          for (let b = 0; b \u003c k; b++) {\n            const cc = c + x * k + b;\n            const rr = r0 + y * k + a;\n            if (cc >= 0 && cc \u003c COLS && rr >= 0 && rr \u003c ROWS) bits[rr * COLS + cc] = 1;\n          }\n      }\n    c += (gw + 1) * k;\n  }\n}\n\n// A page as the discs it wants yellow. Odd pages are inverse: yellow ground,\n// black letters, the route box with them.\nfunction pageBits(route, n) {\n  const R = ROUTES[route];\n  const lines = R.pages[n % R.pages.length];\n  const bits = new Uint8Array(ND);\n  stamp(bits, R.no, floor((COLS - textWidth(R.no, 2)) / 2), 1, 2);\n  const h = lines.length * 8 - 1;\n  const top = R1 + floor((R2 - h) / 2);\n  lines.forEach((s, j) => stamp(bits, s, floor((COLS - textWidth(s, 1) + 1) / 2), top + j * 8, 1));\n  if (n & 1) for (let i = 0; i \u003c ND; i++) bits[i] ^= 1;\n  return bits;\n}\n\nconst ALL = [new Uint8Array(ND), new Uint8Array(ND).fill(1)];\n\nfunction palette(P, u) {\n  P.hue = u;\n  const t = u * 4;\n  const j = min(3, floor(t));\n  const f = t - j;\n  for (let c = 0; c \u003c 3; c++) P.col[c] = PAINT[j][c] + (PAINT[j + 1][c] - PAINT[j][c]) * f;\n}\n\n// The housing: a grey bezel round the edge, the dark backplate the discs sit\n// on, and the bar between the two boxes with its four screws.\nfunction housing(P) {\n  const b = P.base;\n  for (let p = 0; p \u003c N; p++) [b[p * 3], b[p * 3 + 1], b[p * 3 + 2]] = GAP;\n  const put = (x, y, v, t) => {\n    const o = (y * W + x) * 3;\n    b[o] = v;\n    b[o + 1] = v;\n    b[o + 2] = v + t;\n  };\n  for (let x = 0; x \u003c W; x++) {\n    put(x, 0, 40, 4);\n    put(x, H - 1, 34, 4);\n    put(x, 50, 40, 4);\n    for (let y = 51; y \u003c 53; y++) put(x, y, 26, 3);\n    put(x, 53, 32, 3);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    put(0, y, 38, 4);\n    put(W - 1, y, 34, 4);\n  }\n  for (const sx of [5, 57]) for (let y = 51; y \u003c 53; y++) for (let x = sx; x \u003c sx + 2; x++) put(x, y, x === sx && y === 51 ? 86 : 58, 2);\n}\n\nfunction init(P, route) {\n  P.route = route;\n  P.base = new Float32Array(N * 3);\n  P.out = new Float32Array(N * 3);\n  P.col = [0, 0, 0];\n  P.fa = new Uint8Array(ND);\n  P.fb = new Uint8Array(ND);\n  P.ts = new Float32Array(ND).fill(-9);\n  // How bright each disc's paint still is, and how much light falls on its\n  // row from the strip under the top of each box.\n  P.lit = new Float32Array(ND);\n  P.dim = new Float32Array(ND);\n  P.q = new Int32Array(ND);\n  for (let i = 0; i \u003c ND; i++) {\n    const r = floor(i / COLS);\n    const c = i % COLS;\n    const shade = r \u003c R1 ? 1 - 0.04 * (r / (R1 - 1)) : 1 - 0.06 * ((r - R1) / (R2 - 1));\n    P.lit[i] = (0.96 + 0.04 * rnd()) * shade;\n    P.dim[i] = 0.85 + 0.3 * rnd();\n    P.q[i] = discY(r) * W + discX(c);\n  }\n  // One disc jammed on its edge, and a few loose ones that flutter as the bus\n  // idles.\n  P.stuck = (R1 + 2 + floor(rnd() * (R2 - 4))) * COLS + 1 + floor(rnd() * (COLS - 2));\n  P.loose = [0, 1, 2, 3].map(() => floor(rnd() * ND));\n  P.fli = -1;\n  P.flt = 0;\n  housing(P);\n  P.st = 0;\n  P.pg = 0;\n  const bits = pageBits(route, 0);\n  P.fa.set(bits);\n  P.fb.set(bits);\n  P.k = 0;\n  P.kt = 0;\n  P.kd = FIRST;\n}\n\nconst face = (P, i) => (P.st >= P.ts[i] ? P.fb[i] : P.fa[i]);\n\n// Starts a wave towards the target at sign time t0. Discs already showing\n// the right face do not move; two random ones in each wave are sticky and\n// turn late.\nfunction wave(P, target, t0, dir) {\n  const mode = P.mode;\n  const wd = WAVE[mode];\n  const sticky = [floor(rnd() * ND), floor(rnd() * ND)];\n  P.fli = -1;\n  for (let i = 0; i \u003c ND; i++) {\n    const cur = face(P, i);\n    const tgt = target[i];\n    P.fa[i] = cur;\n    P.fb[i] = tgt;\n    if (cur === tgt) {\n      P.ts[i] = -9;\n      continue;\n    }\n    const r = floor(i / COLS);\n    const c = dir > 0 ? i % COLS : COLS - 1 - (i % COLS);\n    const rr = dir > 0 ? r : ROWS - 1 - r;\n    let u;\n    if (mode === 0) u = c / (COLS - 1) + r * 0.0012;\n    else if (mode === 1) u = (c + rr) / (COLS + ROWS - 2);\n    else if (mode === 2) u = rnd();\n    else u = rr / (ROWS - 1) + c * 0.0015;\n    P.ts[i] = t0 + u * wd + (i === sticky[0] || i === sticky[1] ? 0.12 + 0.15 * rnd() : 0);\n  }\n  return wd + FD + 0.03;\n}\n\n// The sign's cycle: page, fill to yellow, hold, inverse page, clear to\n// black, hold, next page.\nfunction enter(P, k, t0) {\n  P.k = k;\n  P.kt = t0;\n  if (k === 0) P.kd = HOLD;\n  else if (k === 1) P.kd = wave(P, ALL[1], t0, 1);\n  else if (k === 2) P.kd = 0.4;\n  else if (k === 3) P.kd = wave(P, pageBits(P.route, ++P.pg), t0, 1);\n  else if (k === 4) P.kd = HOLD_INV;\n  else if (k === 5) P.kd = wave(P, ALL[0], t0, -1);\n  else if (k === 6) P.kd = 0.25;\n  else P.kd = wave(P, pageBits(P.route, ++P.pg), t0, -1);\n}\n\nexport function setup(params) {\n  params.base = null;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  const hue = cl(k[0], 0, 1);\n  const sp = cl(k[1], 0.2, 3) / 2;\n  const route = cl(round(k[2]), 0, 3);\n  P.mode = cl(round(k[3]), 0, 3);\n  if (!P.base) init(P, route);\n  else if (route !== P.route) {\n    P.route = route;\n    P.pg = -1;\n    enter(P, 7, P.st);\n  }\n  if (hue !== P.hue) palette(P, hue);\n  P.st += dt * sp;\n  const hold = P.k % 2 === 0;\n  if (input.btnPressed && input.btnPressed[0] && hold) P.kd = P.st - P.kt;\n  while (P.st - P.kt >= P.kd) enter(P, (P.k + 1) % 8, P.kt + P.kd);\n  if (P.fli >= 0 && P.st - P.flt > 3 * FD) P.fli = -1;\n  if (P.k % 2 === 0 && P.fli \u003c 0 && rnd() \u003c dt * sp * 1.1) {\n    P.fli = P.loose[floor(rnd() * P.loose.length)];\n    P.flt = P.st;\n  }\n}\n\n// Paints one disc part way through a turn from face a to face b.\nfunction paint(P, i, a, b, p) {\n  const o = P.out;\n  const q = P.q[i];\n  let f = p \u003c 0.5 ? a : b;\n  let rows = 3;\n  let s = 1;\n  if (p >= 0.25 && p \u003c 0.5) [rows, s] = [1, 0.6];\n  else if (p >= 0.5 && p \u003c 0.75) [rows, s] = [2, 0.6];\n  if (i === P.stuck) [f, rows, s] = [1, 1, 0.5];\n  const c = P.col;\n  const L = P.lit[i] * s;\n  const D = P.dim[i] * s;\n  const cr = f ? c[0] * L : BLACK[0] * D;\n  const cg = f ? c[1] * L : BLACK[1] * D;\n  const cb = f ? c[2] * L : BLACK[2] * D;\n  for (let y = 0; y \u003c 2; y++) {\n    if (!(rows & (1 \u003c\u003c y))) continue;\n    for (let x = 0; x \u003c 2; x++) {\n      const j = (q + y * W + x) * 3;\n      // The face is not quite flat: its top left catches a little more of\n      // the light than its bottom right.\n      const g = 1.03 - 0.03 * (x + y);\n      o[j] = cr * g;\n      o[j + 1] = cg * g;\n      o[j + 2] = cb * g;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.base) return;\n  const o = P.out;\n  o.set(P.base);\n  const st = P.st;\n  for (let i = 0; i \u003c ND; i++) {\n    const a = P.fa[i];\n    const b = P.fb[i];\n    let p = a === b ? 1 : (st - P.ts[i]) / FD;\n    if (i === P.fli) {\n      const e = (st - P.flt) / FD;\n      const cur = face(P, i);\n      if (e \u003c 1) paint(P, i, cur, 1 - cur, e);\n      else if (e \u003c 2) paint(P, i, 1 - cur, 1 - cur, 1);\n      else paint(P, i, 1 - cur, cur, e - 2);\n      continue;\n    }\n    paint(P, i, a, b, p \u003c 0 ? 0 : p > 1 ? 1 : p);\n  }\n  for (let y = 0, j = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, j += 3) display.setPixel(x, y, min(255, o[j]) | 0, min(255, o[j + 1]) | 0, min(255, o[j + 2]) | 0);\n}\n","layer":{"id":"layer-flipdot","type":"code","name":"flipdot","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flipdot\n// Family:  type\n// Idea:    A bus destination sign of fluorescent flip discs stands on end, the route number in its own box above the destination, and between pages a wave of discs flips the whole board yellow and back, each disc showing a thin edge as it turns.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the electromagnetic flip-disc destination signs on buses and trams from the 1970s on\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Disc=0..1, Speed=0.2..3, Route=0..3, Wipe=0..3\n//\n// Knob 1: Disc. The colour painted on the bright side of the discs: fluorescent yellow at 0, then lime green, white, amber and red at 1.\n// Knob 2: Speed. How fast the sign runs its pages and its waves: at 2 the destination holds three seconds, the stops a little over two, and a wave crosses the board in under a second.\n// Knob 3: Route. Which bus the sign is set for, each with its own number, destination and stops: the 17 to Pier Head, the 7 to Dock Yard, the N9 night bus and the X3 express to Sea Wall.\n// Knob 4: Wipe. How the controller drives the discs between pages: column by column at 0, a diagonal at 1, a scatter of single discs at 2, row by row at 3.\n// Buttons: K1 tap ends the page now and the next wave starts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The board: 20 discs across and 40 down on a 3 LED pitch, each disc 2 by 2\n// LEDs with one dark LED between. The top box holds 16 rows for the route\n// number; a housing bar; then 24 rows for the destination.\nconst COLS = 20;\nconst R1 = 16;\nconst R2 = 24;\nconst ROWS = R1 + R2;\nconst ND = COLS * ROWS;\nconst discX = (c) => 3 + 3 * c;\nconst discY = (r) => (r \u003c R1 ? 2 + 3 * r : 55 + 3 * (r - R1));\n\n// One disc's turn, in sign seconds. The first quarter shows the old face, the\n// second a thin edge of it on the top row, the third a thin edge of the new\n// face on the bottom row, the last the new face.\nconst FD = 0.14;\nconst FIRST = 2.15;\nconst HOLD = 3.0;\nconst HOLD_INV = 2.2;\nconst WAVE = [0.8, 1.05, 0.9, 1.0];\n\n// A condensed 7 row dot face. Each glyph is its rows left to right, top to\n// bottom; the width is the length over 7. Most letters are 4 discs wide, the\n// I and the 1 are 3, M T V W X Y are 5.\nconst FONT = {\n  A: \".##.#..##..######..##..##..#\", B: \"###.#..##..####.#..##..####.\", C: \".##.#..##...#...#...#..#.##.\",\n  D: \"###.#..##..##..##..##..####.\", E: \"#####...#...###.#...#...####\", F: \"#####...#...###.#...#...#...\",\n  G: \".##.#..##...#.###..##..#.###\", H: \"#..##..##..######..##..##..#\", I: \"###.#..#..#..#..#.###\",\n  J: \"...#...#...#...##..##..#.##.\", K: \"#..##..##.#.##..#.#.#..##..#\", L: \"#...#...#...#...#...#...####\",\n  M: \"#...###.###.#.##.#.##...##...##...#\", N: \"#..###.###.##.###.###..##..#\", O: \".##.#..##..##..##..##..#.##.\",\n  P: \"###.#..##..####.#...#...#...\", R: \"###.#..##..####.#.#.#..##..#\", S: \".##.#..##....##....##..#.##.\",\n  T: \"#####..#....#....#....#....#....#..\", U: \"#..##..##..##..##..##..#.##.\", V: \"#...##...##...#.#.#..#.#..#.#...#..\",\n  W: \"#...##...##...##.#.##.#.###.###...#\", X: \"#...##...#.#.#...#...#.#.#...##...#\", Y: \"#...##...#.#.#...#....#....#....#..\",\n  Z: \"####...#..#...#..#..#...####\",\n  0: \".##.#..##.###..###.##..#.##.\", 1: \".#.##..#..#..#..#.###\", 2: \".##.#..#...#..#..#..#...####\",\n  3: \".##.#..#...#.##....##..#.##.\", 4: \"..#..##.#.#.#.#.####..#...#.\", 5: \"#####...###....#...##..#.##.\",\n  6: \".##.#...#...###.#..##..#.##.\", 7: \"####...#..#...#..#...#...#..\", 8: \".##.#..##..#.##.#..##..#.##.\",\n  9: \".##.#..##..#.###...#...#.##.\", \"-\": \".........###.........\", \":\": \"..#..#.\", \".\": \"......#\",\n};\n\n// Each route runs four pages: the destination, a page of stops shown\n// inverse, the destination again, and a second inverse page.\nconst ROUTES = [\n  { no: \"17\", pages: [[\"PIER\", \"HEAD\"], [\"VIA\", \"OLD\", \"MILL\"], [\"PIER\", \"HEAD\"], [\"VIA\", \"FISH\", \"DOCK\"]] },\n  { no: \"7\", pages: [[\"DOCK\", \"YARD\"], [\"VIA\", \"FAIR\", \"LANE\"], [\"DOCK\", \"YARD\"], [\"VIA\", \"ROPE\", \"WALK\"]] },\n  { no: \"N9\", pages: [[\"ZOO\", \"GATE\"], [\"LAST\", \"BUS\", \"0115\"], [\"ZOO\", \"GATE\"], [\"VIA\", \"ELM\", \"PARK\"]] },\n  { no: \"X3\", pages: [[\"SEA\", \"WALL\"], [\"VIA\", \"HIGH\", \"ST\"], [\"SEA\", \"WALL\"], [\"VIA\", \"LIDO\"]] },\n];\n\n// Disc paint, from the yellow most of these signs carried to the red a few did.\nconst PAINT = [\n  [255, 226, 20],\n  [110, 255, 40],\n  [236, 240, 226],\n  [255, 150, 12],\n  [255, 58, 34],\n];\nconst BLACK = [13, 13, 12];\nconst GAP = [3, 3, 4];\n\nconst textWidth = (s, k) => {\n  let w = 0;\n  for (const ch of s) w += (ch === \" \" ? 2 : FONT[ch].length / 7) * k + k;\n  return max(0, w - k);\n};\n\n// Sets the discs of one line of text, k times size, its top left at disc\n// (c0, r0).\nfunction stamp(bits, s, c0, r0, k) {\n  let c = c0;\n  for (const ch of s) {\n    if (ch === \" \") {\n      c += 3 * k;\n      continue;\n    }\n    const g = FONT[ch];\n    const gw = g.length / 7;\n    for (let y = 0; y \u003c 7; y++)\n      for (let x = 0; x \u003c gw; x++) {\n        if (g[y * gw + x] !== \"#\") continue;\n        for (let a = 0; a \u003c k; a++)\n          for (let b = 0; b \u003c k; b++) {\n            const cc = c + x * k + b;\n            const rr = r0 + y * k + a;\n            if (cc >= 0 && cc \u003c COLS && rr >= 0 && rr \u003c ROWS) bits[rr * COLS + cc] = 1;\n          }\n      }\n    c += (gw + 1) * k;\n  }\n}\n\n// A page as the discs it wants yellow. Odd pages are inverse: yellow ground,\n// black letters, the route box with them.\nfunction pageBits(route, n) {\n  const R = ROUTES[route];\n  const lines = R.pages[n % R.pages.length];\n  const bits = new Uint8Array(ND);\n  stamp(bits, R.no, floor((COLS - textWidth(R.no, 2)) / 2), 1, 2);\n  const h = lines.length * 8 - 1;\n  const top = R1 + floor((R2 - h) / 2);\n  lines.forEach((s, j) => stamp(bits, s, floor((COLS - textWidth(s, 1) + 1) / 2), top + j * 8, 1));\n  if (n & 1) for (let i = 0; i \u003c ND; i++) bits[i] ^= 1;\n  return bits;\n}\n\nconst ALL = [new Uint8Array(ND), new Uint8Array(ND).fill(1)];\n\nfunction palette(P, u) {\n  P.hue = u;\n  const t = u * 4;\n  const j = min(3, floor(t));\n  const f = t - j;\n  for (let c = 0; c \u003c 3; c++) P.col[c] = PAINT[j][c] + (PAINT[j + 1][c] - PAINT[j][c]) * f;\n}\n\n// The housing: a grey bezel round the edge, the dark backplate the discs sit\n// on, and the bar between the two boxes with its four screws.\nfunction housing(P) {\n  const b = P.base;\n  for (let p = 0; p \u003c N; p++) [b[p * 3], b[p * 3 + 1], b[p * 3 + 2]] = GAP;\n  const put = (x, y, v, t) => {\n    const o = (y * W + x) * 3;\n    b[o] = v;\n    b[o + 1] = v;\n    b[o + 2] = v + t;\n  };\n  for (let x = 0; x \u003c W; x++) {\n    put(x, 0, 40, 4);\n    put(x, H - 1, 34, 4);\n    put(x, 50, 40, 4);\n    for (let y = 51; y \u003c 53; y++) put(x, y, 26, 3);\n    put(x, 53, 32, 3);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    put(0, y, 38, 4);\n    put(W - 1, y, 34, 4);\n  }\n  for (const sx of [5, 57]) for (let y = 51; y \u003c 53; y++) for (let x = sx; x \u003c sx + 2; x++) put(x, y, x === sx && y === 51 ? 86 : 58, 2);\n}\n\nfunction init(P, route) {\n  P.route = route;\n  P.base = new Float32Array(N * 3);\n  P.out = new Float32Array(N * 3);\n  P.col = [0, 0, 0];\n  P.fa = new Uint8Array(ND);\n  P.fb = new Uint8Array(ND);\n  P.ts = new Float32Array(ND).fill(-9);\n  // How bright each disc's paint still is, and how much light falls on its\n  // row from the strip under the top of each box.\n  P.lit = new Float32Array(ND);\n  P.dim = new Float32Array(ND);\n  P.q = new Int32Array(ND);\n  for (let i = 0; i \u003c ND; i++) {\n    const r = floor(i / COLS);\n    const c = i % COLS;\n    const shade = r \u003c R1 ? 1 - 0.04 * (r / (R1 - 1)) : 1 - 0.06 * ((r - R1) / (R2 - 1));\n    P.lit[i] = (0.96 + 0.04 * rnd()) * shade;\n    P.dim[i] = 0.85 + 0.3 * rnd();\n    P.q[i] = discY(r) * W + discX(c);\n  }\n  // One disc jammed on its edge, and a few loose ones that flutter as the bus\n  // idles.\n  P.stuck = (R1 + 2 + floor(rnd() * (R2 - 4))) * COLS + 1 + floor(rnd() * (COLS - 2));\n  P.loose = [0, 1, 2, 3].map(() => floor(rnd() * ND));\n  P.fli = -1;\n  P.flt = 0;\n  housing(P);\n  P.st = 0;\n  P.pg = 0;\n  const bits = pageBits(route, 0);\n  P.fa.set(bits);\n  P.fb.set(bits);\n  P.k = 0;\n  P.kt = 0;\n  P.kd = FIRST;\n}\n\nconst face = (P, i) => (P.st >= P.ts[i] ? P.fb[i] : P.fa[i]);\n\n// Starts a wave towards the target at sign time t0. Discs already showing\n// the right face do not move; two random ones in each wave are sticky and\n// turn late.\nfunction wave(P, target, t0, dir) {\n  const mode = P.mode;\n  const wd = WAVE[mode];\n  const sticky = [floor(rnd() * ND), floor(rnd() * ND)];\n  P.fli = -1;\n  for (let i = 0; i \u003c ND; i++) {\n    const cur = face(P, i);\n    const tgt = target[i];\n    P.fa[i] = cur;\n    P.fb[i] = tgt;\n    if (cur === tgt) {\n      P.ts[i] = -9;\n      continue;\n    }\n    const r = floor(i / COLS);\n    const c = dir > 0 ? i % COLS : COLS - 1 - (i % COLS);\n    const rr = dir > 0 ? r : ROWS - 1 - r;\n    let u;\n    if (mode === 0) u = c / (COLS - 1) + r * 0.0012;\n    else if (mode === 1) u = (c + rr) / (COLS + ROWS - 2);\n    else if (mode === 2) u = rnd();\n    else u = rr / (ROWS - 1) + c * 0.0015;\n    P.ts[i] = t0 + u * wd + (i === sticky[0] || i === sticky[1] ? 0.12 + 0.15 * rnd() : 0);\n  }\n  return wd + FD + 0.03;\n}\n\n// The sign's cycle: page, fill to yellow, hold, inverse page, clear to\n// black, hold, next page.\nfunction enter(P, k, t0) {\n  P.k = k;\n  P.kt = t0;\n  if (k === 0) P.kd = HOLD;\n  else if (k === 1) P.kd = wave(P, ALL[1], t0, 1);\n  else if (k === 2) P.kd = 0.4;\n  else if (k === 3) P.kd = wave(P, pageBits(P.route, ++P.pg), t0, 1);\n  else if (k === 4) P.kd = HOLD_INV;\n  else if (k === 5) P.kd = wave(P, ALL[0], t0, -1);\n  else if (k === 6) P.kd = 0.25;\n  else P.kd = wave(P, pageBits(P.route, ++P.pg), t0, -1);\n}\n\nexport function setup(params) {\n  params.base = null;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  const hue = cl(k[0], 0, 1);\n  const sp = cl(k[1], 0.2, 3) / 2;\n  const route = cl(round(k[2]), 0, 3);\n  P.mode = cl(round(k[3]), 0, 3);\n  if (!P.base) init(P, route);\n  else if (route !== P.route) {\n    P.route = route;\n    P.pg = -1;\n    enter(P, 7, P.st);\n  }\n  if (hue !== P.hue) palette(P, hue);\n  P.st += dt * sp;\n  const hold = P.k % 2 === 0;\n  if (input.btnPressed && input.btnPressed[0] && hold) P.kd = P.st - P.kt;\n  while (P.st - P.kt >= P.kd) enter(P, (P.k + 1) % 8, P.kt + P.kd);\n  if (P.fli >= 0 && P.st - P.flt > 3 * FD) P.fli = -1;\n  if (P.k % 2 === 0 && P.fli \u003c 0 && rnd() \u003c dt * sp * 1.1) {\n    P.fli = P.loose[floor(rnd() * P.loose.length)];\n    P.flt = P.st;\n  }\n}\n\n// Paints one disc part way through a turn from face a to face b.\nfunction paint(P, i, a, b, p) {\n  const o = P.out;\n  const q = P.q[i];\n  let f = p \u003c 0.5 ? a : b;\n  let rows = 3;\n  let s = 1;\n  if (p >= 0.25 && p \u003c 0.5) [rows, s] = [1, 0.6];\n  else if (p >= 0.5 && p \u003c 0.75) [rows, s] = [2, 0.6];\n  if (i === P.stuck) [f, rows, s] = [1, 1, 0.5];\n  const c = P.col;\n  const L = P.lit[i] * s;\n  const D = P.dim[i] * s;\n  const cr = f ? c[0] * L : BLACK[0] * D;\n  const cg = f ? c[1] * L : BLACK[1] * D;\n  const cb = f ? c[2] * L : BLACK[2] * D;\n  for (let y = 0; y \u003c 2; y++) {\n    if (!(rows & (1 \u003c\u003c y))) continue;\n    for (let x = 0; x \u003c 2; x++) {\n      const j = (q + y * W + x) * 3;\n      // The face is not quite flat: its top left catches a little more of\n      // the light than its bottom right.\n      const g = 1.03 - 0.03 * (x + y);\n      o[j] = cr * g;\n      o[j + 1] = cg * g;\n      o[j + 2] = cb * g;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.base) return;\n  const o = P.out;\n  o.set(P.base);\n  const st = P.st;\n  for (let i = 0; i \u003c ND; i++) {\n    const a = P.fa[i];\n    const b = P.fb[i];\n    let p = a === b ? 1 : (st - P.ts[i]) / FD;\n    if (i === P.fli) {\n      const e = (st - P.flt) / FD;\n      const cur = face(P, i);\n      if (e \u003c 1) paint(P, i, cur, 1 - cur, e);\n      else if (e \u003c 2) paint(P, i, 1 - cur, 1 - cur, 1);\n      else paint(P, i, 1 - cur, cur, e - 2);\n      continue;\n    }\n    paint(P, i, a, b, p \u003c 0 ? 0 : p > 1 ? 1 : p);\n  }\n  for (let y = 0, j = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, j += 3) display.setPixel(x, y, min(255, o[j]) | 0, min(255, o[j + 1]) | 0, min(255, o[j + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Disc=0..1, Speed=0.2..3, Route=0..3, Wipe=0..3","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Disc","min":0,"max":1,"about":"The colour painted on the bright side of the discs: fluorescent yellow at 0, then lime green, white, amber and red at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sign runs its pages and its waves: at 2 the destination holds three seconds, the stops a little over two, and a wave crosses the board in under a second."},{"name":"Route","min":0,"max":3,"about":"Which bus the sign is set for, each with its own number, destination and stops: the 17 to Pier Head, the 7 to Dock Yard, the N9 night bus and the X3 express to Sea Wall."},{"name":"Wipe","min":0,"max":3,"about":"How the controller drives the discs between pages: column by column at 0, a diagonal at 1, a scatter of single discs at 2, row by row at 3."}],"start":[0,2,0,0.06],"measures":{"motion":0.1111,"detail":0.2452,"edges":0.47,"complexity":0.3774,"coverage":0.3252,"colour":0.3924,"drift":0.2652},"knobResponse":[0.0968,0.1699,0.0516,0.048]},{"slug":"flock","title":"Flock","family":"particle","round":1,"note":"새 90마리가 가까운 이웃만 보고 날아요. 보이지 않는 매가 무리를 쫓아 자꾸 갈라놓아요.","idea":"Ninety birds each follow three rules about their nearest neighbours, and the shape the whole flock makes is one nobody is steering.","buttons":"K1 tap sends the unseen hawk diving into the flock.","code":"// ===== Patternflow pattern =====\n// Title:   Flock\n// Family:  particle\n// Idea:    Ninety birds each follow three rules about their nearest neighbours, and the shape the whole flock makes is one nobody is steering.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..4, Scatter=-1..1, Trail=0.3..2.5\n//\n// Knob 1: Hue. Turns the flock's colours around the wheel; birds flying up and down sit either side of it.\n// Knob 2: Speed. How fast the birds fly, and so how long their streaks are.\n// Knob 3: Scatter. Below 0 the birds pack into tight schools, above 0 they lose interest in each other and drift apart like gnats.\n// Knob 4: Trail. How long a streak lasts; long trails leave the flock's recent path woven across the panel.\n// Buttons: K1 tap sends the unseen hawk diving into the flock.\n\nconst W = 64;\nconst H = 128;\nconst N = 90;\nconst V0 = 16;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nfunction wrapX(x) {\n  return x \u003c 0 ? x + W : x >= W ? x - W : x;\n}\n\nfunction wrapY(y) {\n  return y \u003c 0 ? y + H : y >= H ? y - H : y;\n}\n\n// A soft round dot, brightest at its centre and wrapped round the edges,\n// kept as the brighter of what is there and what it brings.\nfunction splat(buf, x, y, c) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      const dx = xx - x;\n      const w = 1 - (dx * dx + dy * dy) / 1.44;\n      if (w \u003c= 0) continue;\n      const i = (((yy + H) % H) * W + ((xx + W) % W)) * 3;\n      const r = c[0] * w;\n      const g = c[1] * w;\n      const b = c[2] * w;\n      if (r > buf[i]) buf[i] = r;\n      if (g > buf[i + 1]) buf[i + 1] = g;\n      if (b > buf[i + 2]) buf[i + 2] = b;\n    }\n  }\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(N);\n  params.y = new Float32Array(N);\n  params.vx = new Float32Array(N);\n  params.vy = new Float32Array(N);\n  params.lx = new Float32Array(N);\n  params.ly = new Float32Array(N);\n  params.wander = new Float32Array(N);\n  params.pace = new Float32Array(N);\n  params.tone = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) {\n    // Three loose groups heading different ways, so the first seconds already show them meeting.\n    const g = i % 3;\n    const a = g * 2.1 + (Math.random() - 0.5) * 0.8;\n    params.x[i] = (g * 21 + 6 + Math.random() * 18) % W;\n    params.y[i] = 14 + g * 38 + Math.random() * 26;\n    params.vx[i] = Math.cos(a) * V0;\n    params.vy[i] = Math.sin(a) * V0;\n    params.lx[i] = params.x[i];\n    params.ly[i] = params.y[i];\n    params.pace[i] = 0.85 + Math.random() * 0.3;\n    params.tone[i] = Math.random() - 0.5;\n  }\n  params.hx = W / 2;\n  params.hy = -20;\n  params.hvx = 0;\n  params.hvy = V0;\n  params.prey = 0;\n  params.preyTime = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.hue = 0;\n}\n\nfunction step(params, dt, u) {\n  const { x, y, vx, vy, wander, pace } = params;\n  const R = 13 - 6 * u;\n  const R2 = R * R;\n  const S = 3.5 + 3.5 * u;\n  const S2 = S * S;\n  const kA = 2.6 - 2.3 * u;\n  const kC = 1.1 - 1.1 * u;\n  const kS = 26 + 110 * u;\n  const kW = 0.5 + 3.5 * u;\n\n  // The hawk chases one bird for a few seconds, then picks another.\n  params.preyTime -= dt;\n  if (params.preyTime \u003c= 0) {\n    params.prey = Math.floor(Math.random() * N);\n    params.preyTime = 3 + Math.random() * 4;\n  }\n  let tx = x[params.prey] - params.hx;\n  let ty = y[params.prey] - params.hy;\n  if (tx > W / 2) tx -= W;\n  if (tx \u003c -W / 2) tx += W;\n  if (ty > H / 2) ty -= H;\n  if (ty \u003c -H / 2) ty += H;\n  const td = Math.hypot(tx, ty) + 0.001;\n  params.hvx += ((tx / td) * V0 * 1.15 - params.hvx) * Math.min(1, dt * 1.5);\n  params.hvy += ((ty / td) * V0 * 1.15 - params.hvy) * Math.min(1, dt * 1.5);\n  params.hx = wrapX(params.hx + params.hvx * dt);\n  params.hy = wrapY(params.hy + params.hvy * dt);\n  const hx = params.hx;\n  const hy = params.hy;\n\n  for (let i = 0; i \u003c N; i++) {\n    const xi = x[i];\n    const yi = y[i];\n    let n = 0;\n    let cx = 0;\n    let cy = 0;\n    let ax = 0;\n    let ay = 0;\n    let sx = 0;\n    let sy = 0;\n    for (let j = 0; j \u003c N; j++) {\n      if (j === i) continue;\n      let dx = x[j] - xi;\n      let dy = y[j] - yi;\n      if (dx > W / 2) dx -= W;\n      else if (dx \u003c -W / 2) dx += W;\n      if (dy > H / 2) dy -= H;\n      else if (dy \u003c -H / 2) dy += H;\n      const d2 = dx * dx + dy * dy;\n      if (d2 > R2) continue;\n      n++;\n      cx += dx;\n      cy += dy;\n      ax += vx[j];\n      ay += vy[j];\n      if (d2 \u003c S2) {\n        sx -= dx / (d2 + 0.4);\n        sy -= dy / (d2 + 0.4);\n      }\n    }\n    let fx = sx * kS;\n    let fy = sy * kS;\n    if (n > 0) {\n      fx += (ax / n - vx[i]) * kA + (cx / n) * kC;\n      fy += (ay / n - vy[i]) * kA + (cy / n) * kC;\n    }\n    let ex = xi - hx;\n    let ey = yi - hy;\n    if (ex > W / 2) ex -= W;\n    else if (ex \u003c -W / 2) ex += W;\n    if (ey > H / 2) ey -= H;\n    else if (ey \u003c -H / 2) ey += H;\n    const ed = Math.hypot(ex, ey) + 0.001;\n    if (ed \u003c 15) {\n      const push = (1 - ed / 15) * 90;\n      fx += (ex / ed) * push;\n      fy += (ey / ed) * push;\n    }\n    // Each bird's own wavering: a slow random turn left or right.\n    wander[i] = wander[i] * Math.exp(-dt * 1.5) + (Math.random() - 0.5) * Math.sqrt(dt) * 2.4;\n    const sp = Math.hypot(vx[i], vy[i]) + 0.001;\n    fx += (-vy[i] / sp) * wander[i] * V0 * kW;\n    fy += (vx[i] / sp) * wander[i] * V0 * kW;\n\n    let nvx = vx[i] + fx * dt;\n    let nvy = vy[i] + fy * dt;\n    const ns = Math.hypot(nvx, nvy) + 0.001;\n    const target = V0 * pace[i];\n    const s = ns + (target - ns) * Math.min(1, dt * 2.5);\n    nvx = (nvx / ns) * s;\n    nvy = (nvy / ns) * s;\n    vx[i] = nvx;\n    vy[i] = nvy;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    x[i] = wrapX(x[i] + vx[i] * dt);\n    y[i] = wrapY(y[i] + vy[i] * dt);\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.3];\n  params.hue = k[0];\n  const speed = k[1];\n  const u = (Math.max(-1, Math.min(1, k[2])) + 1) / 2;\n  // Slow birds keep a longer streak, so they still read as flying.\n  const trail = Math.max(0.05, k[3]) * Math.sqrt(2 / Math.max(0.1, speed));\n  dt = Math.min(dt, 0.1);\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Drop the hawk just behind a bird, already flying at it.\n    const b = Math.floor(Math.random() * N);\n    params.prey = b;\n    params.preyTime = 4;\n    params.hx = wrapX(params.x[b] - params.vx[b] * 0.5);\n    params.hy = wrapY(params.y[b] - params.vy[b] * 0.5);\n    params.hvx = params.vx[b] * 1.6;\n    params.hvy = params.vy[b] * 1.6;\n  }\n\n  // Speed is the simulation's own clock, so the flock keeps its shape and only hurries.\n  const simDt = dt * speed;\n  const steps = Math.max(1, Math.ceil(simDt / 0.035));\n  for (let i = 0; i \u003c N; i++) {\n    params.lx[i] = params.x[i];\n    params.ly[i] = params.y[i];\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, simDt / steps, u);\n\n  const buf = params.buf;\n  // Mostly a slow exponential fade, with a little taken off as well so old paths reach black.\n  const fade = Math.exp(-dt / trail);\n  const off = dt * 12;\n  for (let i = 0; i \u003c buf.length; i++) {\n    const v = buf[i] * fade - off;\n    buf[i] = v > 0 ? v : 0;\n  }\n\n  const col = params.col;\n  for (let i = 0; i \u003c N; i++) {\n    const vx = params.vx[i];\n    const vy = params.vy[i];\n    const sp = Math.hypot(vx, vy) + 0.001;\n    // Birds climbing and birds diving lean to either side of the chosen hue.\n    hsvInto(col, params.hue + (vy / sp) * 0.09 + params.tone[i] * 0.04, 0.88, 0.82);\n    const x0 = params.lx[i];\n    const y0 = params.ly[i];\n    const x1 = params.x[i];\n    const y1 = params.y[i];\n    const dx = x1 - x0;\n    const dy = y1 - y0;\n    if (Math.abs(dx) > W / 2 || Math.abs(dy) > H / 2) {\n      splat(buf, x1, y1, col);\n      continue;\n    }\n    const n = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.5));\n    for (let s = 1; s \u003c= n; s++) splat(buf, x0 + (dx * s) / n, y0 + (dy * s) / n, col);\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y * W + x) * 3;\n      display.setPixel(x, y, buf[i], buf[i + 1], buf[i + 2]);\n    }\n  }\n  // Heads: a paler, brighter LED where each bird is now.\n  const col = params.col;\n  for (let i = 0; i \u003c N; i++) {\n    const vy = params.vy[i];\n    const sp = Math.hypot(params.vx[i], vy) + 0.001;\n    hsvInto(col, params.hue + (vy / sp) * 0.09 + params.tone[i] * 0.04, 0.35, 1);\n    const px = Math.round(params.x[i]) % W;\n    const py = Math.round(params.y[i]) % H;\n    const j = (py * W + px) * 3;\n    display.setPixel(px, py, Math.max(buf[j], col[0]), Math.max(buf[j + 1], col[1]), Math.max(buf[j + 2], col[2]));\n  }\n}\n","layer":{"id":"layer-flock","type":"code","name":"flock","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flock\n// Family:  particle\n// Idea:    Ninety birds each follow three rules about their nearest neighbours, and the shape the whole flock makes is one nobody is steering.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..4, Scatter=-1..1, Trail=0.3..2.5\n//\n// Knob 1: Hue. Turns the flock's colours around the wheel; birds flying up and down sit either side of it.\n// Knob 2: Speed. How fast the birds fly, and so how long their streaks are.\n// Knob 3: Scatter. Below 0 the birds pack into tight schools, above 0 they lose interest in each other and drift apart like gnats.\n// Knob 4: Trail. How long a streak lasts; long trails leave the flock's recent path woven across the panel.\n// Buttons: K1 tap sends the unseen hawk diving into the flock.\n\nconst W = 64;\nconst H = 128;\nconst N = 90;\nconst V0 = 16;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nfunction wrapX(x) {\n  return x \u003c 0 ? x + W : x >= W ? x - W : x;\n}\n\nfunction wrapY(y) {\n  return y \u003c 0 ? y + H : y >= H ? y - H : y;\n}\n\n// A soft round dot, brightest at its centre and wrapped round the edges,\n// kept as the brighter of what is there and what it brings.\nfunction splat(buf, x, y, c) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      const dx = xx - x;\n      const w = 1 - (dx * dx + dy * dy) / 1.44;\n      if (w \u003c= 0) continue;\n      const i = (((yy + H) % H) * W + ((xx + W) % W)) * 3;\n      const r = c[0] * w;\n      const g = c[1] * w;\n      const b = c[2] * w;\n      if (r > buf[i]) buf[i] = r;\n      if (g > buf[i + 1]) buf[i + 1] = g;\n      if (b > buf[i + 2]) buf[i + 2] = b;\n    }\n  }\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(N);\n  params.y = new Float32Array(N);\n  params.vx = new Float32Array(N);\n  params.vy = new Float32Array(N);\n  params.lx = new Float32Array(N);\n  params.ly = new Float32Array(N);\n  params.wander = new Float32Array(N);\n  params.pace = new Float32Array(N);\n  params.tone = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) {\n    // Three loose groups heading different ways, so the first seconds already show them meeting.\n    const g = i % 3;\n    const a = g * 2.1 + (Math.random() - 0.5) * 0.8;\n    params.x[i] = (g * 21 + 6 + Math.random() * 18) % W;\n    params.y[i] = 14 + g * 38 + Math.random() * 26;\n    params.vx[i] = Math.cos(a) * V0;\n    params.vy[i] = Math.sin(a) * V0;\n    params.lx[i] = params.x[i];\n    params.ly[i] = params.y[i];\n    params.pace[i] = 0.85 + Math.random() * 0.3;\n    params.tone[i] = Math.random() - 0.5;\n  }\n  params.hx = W / 2;\n  params.hy = -20;\n  params.hvx = 0;\n  params.hvy = V0;\n  params.prey = 0;\n  params.preyTime = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.hue = 0;\n}\n\nfunction step(params, dt, u) {\n  const { x, y, vx, vy, wander, pace } = params;\n  const R = 13 - 6 * u;\n  const R2 = R * R;\n  const S = 3.5 + 3.5 * u;\n  const S2 = S * S;\n  const kA = 2.6 - 2.3 * u;\n  const kC = 1.1 - 1.1 * u;\n  const kS = 26 + 110 * u;\n  const kW = 0.5 + 3.5 * u;\n\n  // The hawk chases one bird for a few seconds, then picks another.\n  params.preyTime -= dt;\n  if (params.preyTime \u003c= 0) {\n    params.prey = Math.floor(Math.random() * N);\n    params.preyTime = 3 + Math.random() * 4;\n  }\n  let tx = x[params.prey] - params.hx;\n  let ty = y[params.prey] - params.hy;\n  if (tx > W / 2) tx -= W;\n  if (tx \u003c -W / 2) tx += W;\n  if (ty > H / 2) ty -= H;\n  if (ty \u003c -H / 2) ty += H;\n  const td = Math.hypot(tx, ty) + 0.001;\n  params.hvx += ((tx / td) * V0 * 1.15 - params.hvx) * Math.min(1, dt * 1.5);\n  params.hvy += ((ty / td) * V0 * 1.15 - params.hvy) * Math.min(1, dt * 1.5);\n  params.hx = wrapX(params.hx + params.hvx * dt);\n  params.hy = wrapY(params.hy + params.hvy * dt);\n  const hx = params.hx;\n  const hy = params.hy;\n\n  for (let i = 0; i \u003c N; i++) {\n    const xi = x[i];\n    const yi = y[i];\n    let n = 0;\n    let cx = 0;\n    let cy = 0;\n    let ax = 0;\n    let ay = 0;\n    let sx = 0;\n    let sy = 0;\n    for (let j = 0; j \u003c N; j++) {\n      if (j === i) continue;\n      let dx = x[j] - xi;\n      let dy = y[j] - yi;\n      if (dx > W / 2) dx -= W;\n      else if (dx \u003c -W / 2) dx += W;\n      if (dy > H / 2) dy -= H;\n      else if (dy \u003c -H / 2) dy += H;\n      const d2 = dx * dx + dy * dy;\n      if (d2 > R2) continue;\n      n++;\n      cx += dx;\n      cy += dy;\n      ax += vx[j];\n      ay += vy[j];\n      if (d2 \u003c S2) {\n        sx -= dx / (d2 + 0.4);\n        sy -= dy / (d2 + 0.4);\n      }\n    }\n    let fx = sx * kS;\n    let fy = sy * kS;\n    if (n > 0) {\n      fx += (ax / n - vx[i]) * kA + (cx / n) * kC;\n      fy += (ay / n - vy[i]) * kA + (cy / n) * kC;\n    }\n    let ex = xi - hx;\n    let ey = yi - hy;\n    if (ex > W / 2) ex -= W;\n    else if (ex \u003c -W / 2) ex += W;\n    if (ey > H / 2) ey -= H;\n    else if (ey \u003c -H / 2) ey += H;\n    const ed = Math.hypot(ex, ey) + 0.001;\n    if (ed \u003c 15) {\n      const push = (1 - ed / 15) * 90;\n      fx += (ex / ed) * push;\n      fy += (ey / ed) * push;\n    }\n    // Each bird's own wavering: a slow random turn left or right.\n    wander[i] = wander[i] * Math.exp(-dt * 1.5) + (Math.random() - 0.5) * Math.sqrt(dt) * 2.4;\n    const sp = Math.hypot(vx[i], vy[i]) + 0.001;\n    fx += (-vy[i] / sp) * wander[i] * V0 * kW;\n    fy += (vx[i] / sp) * wander[i] * V0 * kW;\n\n    let nvx = vx[i] + fx * dt;\n    let nvy = vy[i] + fy * dt;\n    const ns = Math.hypot(nvx, nvy) + 0.001;\n    const target = V0 * pace[i];\n    const s = ns + (target - ns) * Math.min(1, dt * 2.5);\n    nvx = (nvx / ns) * s;\n    nvy = (nvy / ns) * s;\n    vx[i] = nvx;\n    vy[i] = nvy;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    x[i] = wrapX(x[i] + vx[i] * dt);\n    y[i] = wrapY(y[i] + vy[i] * dt);\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.3];\n  params.hue = k[0];\n  const speed = k[1];\n  const u = (Math.max(-1, Math.min(1, k[2])) + 1) / 2;\n  // Slow birds keep a longer streak, so they still read as flying.\n  const trail = Math.max(0.05, k[3]) * Math.sqrt(2 / Math.max(0.1, speed));\n  dt = Math.min(dt, 0.1);\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Drop the hawk just behind a bird, already flying at it.\n    const b = Math.floor(Math.random() * N);\n    params.prey = b;\n    params.preyTime = 4;\n    params.hx = wrapX(params.x[b] - params.vx[b] * 0.5);\n    params.hy = wrapY(params.y[b] - params.vy[b] * 0.5);\n    params.hvx = params.vx[b] * 1.6;\n    params.hvy = params.vy[b] * 1.6;\n  }\n\n  // Speed is the simulation's own clock, so the flock keeps its shape and only hurries.\n  const simDt = dt * speed;\n  const steps = Math.max(1, Math.ceil(simDt / 0.035));\n  for (let i = 0; i \u003c N; i++) {\n    params.lx[i] = params.x[i];\n    params.ly[i] = params.y[i];\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, simDt / steps, u);\n\n  const buf = params.buf;\n  // Mostly a slow exponential fade, with a little taken off as well so old paths reach black.\n  const fade = Math.exp(-dt / trail);\n  const off = dt * 12;\n  for (let i = 0; i \u003c buf.length; i++) {\n    const v = buf[i] * fade - off;\n    buf[i] = v > 0 ? v : 0;\n  }\n\n  const col = params.col;\n  for (let i = 0; i \u003c N; i++) {\n    const vx = params.vx[i];\n    const vy = params.vy[i];\n    const sp = Math.hypot(vx, vy) + 0.001;\n    // Birds climbing and birds diving lean to either side of the chosen hue.\n    hsvInto(col, params.hue + (vy / sp) * 0.09 + params.tone[i] * 0.04, 0.88, 0.82);\n    const x0 = params.lx[i];\n    const y0 = params.ly[i];\n    const x1 = params.x[i];\n    const y1 = params.y[i];\n    const dx = x1 - x0;\n    const dy = y1 - y0;\n    if (Math.abs(dx) > W / 2 || Math.abs(dy) > H / 2) {\n      splat(buf, x1, y1, col);\n      continue;\n    }\n    const n = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.5));\n    for (let s = 1; s \u003c= n; s++) splat(buf, x0 + (dx * s) / n, y0 + (dy * s) / n, col);\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y * W + x) * 3;\n      display.setPixel(x, y, buf[i], buf[i + 1], buf[i + 2]);\n    }\n  }\n  // Heads: a paler, brighter LED where each bird is now.\n  const col = params.col;\n  for (let i = 0; i \u003c N; i++) {\n    const vy = params.vy[i];\n    const sp = Math.hypot(params.vx[i], vy) + 0.001;\n    hsvInto(col, params.hue + (vy / sp) * 0.09 + params.tone[i] * 0.04, 0.35, 1);\n    const px = Math.round(params.x[i]) % W;\n    const py = Math.round(params.y[i]) % H;\n    const j = (py * W + px) * 3;\n    display.setPixel(px, py, Math.max(buf[j], col[0]), Math.max(buf[j + 1], col[1]), Math.max(buf[j + 2], col[2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.5..4, Scatter=-1..1, Trail=0.3..2.5","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the flock's colours around the wheel; birds flying up and down sit either side of it."},{"name":"Speed","min":0.5,"max":4,"about":"How fast the birds fly, and so how long their streaks are."},{"name":"Scatter","min":-1,"max":1,"about":"Below 0 the birds pack into tight schools, above 0 they lose interest in each other and drift apart like gnats."},{"name":"Trail","min":0.3,"max":2.5,"about":"How long a streak lasts; long trails leave the flock's recent path woven across the panel."}],"start":[0,2,0,0.3],"measures":{"motion":0.7954,"detail":0.0794,"edges":0.4039,"complexity":1.2562,"coverage":0.2957,"colour":0.1808,"drift":0.1151},"knobResponse":[0.0754,0.1076,0.0932,0.1053]},{"slug":"foxfire","title":"Foxfire","family":"fungi","round":19,"note":"밤 숲 바닥 단면에서 뽕나무버섯 균사가 그루터기와 통나무, 흙 속을 기어가며 갈라지고 실을 따라 연둣빛 펄스가 흘러요. 버섯 무리가 돋았다 시들며 숨 쉬듯 빛나고 포자가 위로 떠올라요. K1 을 누르면 피어 있는 갓이 한꺼번에 포자를 뿜어요.","idea":"A night forest floor in cross-section, a broken stump and a rotting log on the leaf litter over the soil, where glowing honey fungus threads creep and branch through wood and earth with pulses of light running out along them, while clusters of little glowing mushrooms come up, breathe their light and shed spores that drift up into the dark.","buttons":"K1 tap shakes the floor: every cap that is up lets go a puff of spores at once.","code":"// ===== Patternflow pattern =====\n// Title:   Foxfire\n// Family:  fungi\n// Idea:    A night forest floor in cross-section, a broken stump and a rotting log on the leaf litter over the soil, where glowing honey fungus threads creep and branch through wood and earth with pulses of light running out along them, while clusters of little glowing mushrooms come up, breathe their light and shed spores that drift up into the dark.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the foxfire of Armillaria-rotted wood and the glowing caps of Mycena chlorophos and Panellus stipticus\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Glow=0..1, Speed=0.2..3, Spores=0..1, Damp=0..1\n//\n// Knob 1: Glow. The colour of the light, from the yellow-green of foxfire at 0 through a clear green to a cold blue-green at 1.\n// Knob 2: Speed. How fast the floor lives: at 2 a thread tip creeps about three LEDs a second, a pulse runs seven LEDs a second and a mushroom cluster comes and goes in about forty seconds; at 0.2 all of it runs ten times slower.\n// Knob 3: Spores. How hard the caps shed: at 0 a few motes rise from each cluster; turned up, the spores thicken into a lit haze that climbs past the stump into the top of the panel.\n// Knob 4: Damp. How wet the wood is; wet foxfire glows harder, so turning it up brightens the threads and the caps and lights more of the rotten wood round them.\n// Buttons: K1 tap shakes the floor: every cap that is up lets go a puff of spores at once.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n\n// What each LED of the floor is made of. Threads grow in wood, roots, litter\n// and soil, never in the air, the stones or the bark.\nconst AIR = 0;\nconst BARK = 1;\nconst WOOD = 2;\nconst LITTER = 3;\nconst SOIL = 4;\nconst STONE = 5;\nconst ROOT = 6;\nconst GROWS = [0, 0, 1, 1, 1, 0, 1];\n\n// The ground line, the stump's middle column, and the log lying beside it\n// from its broken end at LOGX out past the right edge.\nconst GROUND = 64;\nconst SX = 12;\nconst LOGX = 27;\nconst LOGY = 51;\nconst LOGR = 10.5;\n\n// Thread tips alive at once, LEDs each one creeps per second of floor time,\n// the chance per step that a tip forks, and how long a thread lives before\n// it rots away, in seconds of floor time (plus up to LIFE_J more).\nconst TIPS = 26;\nconst CREEP = 3;\nconst FORK = 0.08;\nconst LIFE = 16;\nconst LIFE_J = 8;\n// A pulse every WAVE LEDs along a thread, running at RUN LEDs a second.\nconst WAVE = 26;\nconst RUN = 7;\n// Seconds of floor time grown before the panel opens.\nconst PRE = 26;\nconst PRE_DT = 1 / 15;\n// Where fresh threads start: the stump, the log and the soil.\nconst ORIGINS = [\n  [12, 68], [9, 46], [14, 26], [11, 12], [12, 36], [34, 50], [46, 54], [58, 48], [30, 86], [50, 100], [42, 120], [10, 110],\n];\n\nconst MAXS = 900;\n// The spore haze is kept on a grid of 4 x 4 LED cells.\nconst HW = 17;\nconst HH = 33;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\n// The spores draw from their own sequence, so how many there are never\n// changes the way the threads grow.\nfunction sporeRandom(P) {\n  P.seed = (P.seed + 0x6d2b79f5) | 0;\n  let t = P.seed;\n  t = Math.imul(t ^ (t >>> 15), t | 1);\n  t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y, s) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const u = x - xi;\n  const v = y - yi;\n  const fu = u * u * (3 - 2 * u);\n  const fv = v * v * (3 - 2 * v);\n  const k = xi + s * 7919;\n  const a = hash(k, yi);\n  const b = hash(k + 1, yi);\n  const c = hash(k, yi + 1);\n  return a + (b - a) * fu + (c - a) * fv + (a - b - c + hash(k + 1, yi + 1)) * fu * fv;\n}\n\nfunction groundY(x) {\n  return GROUND - 0.5 + 1.5 * Math.sin(x * 0.17 + 0.5) + Math.sin(x * 0.41);\n}\n\n// The stump's half width at a row, flaring into its roots at the foot, and\n// the row its broken top reaches at a column.\nfunction stumpHalf(y) {\n  return 7 + 5 * smooth(GROUND - 16, GROUND + 6, y) ** 2;\n}\n\nfunction stumpTop(x) {\n  return 5 + 6 * Math.abs(Math.sin(x * 0.75 + 0.4)) + 3 * hash(x, 77) + 4 * smooth(4, 0, Math.abs(x - SX) - 4);\n}\n\nfunction logCentre(x) {\n  return LOGY + 0.05 * (x - LOGX);\n}\n\n// The glow colours Glow runs through: foxfire yellow-green, green, sea\n// green, a cold blue.\nconst HUES = [\n  [150, 255, 40],\n  [50, 255, 100],\n  [20, 235, 200],\n  [30, 150, 255],\n];\n\nfunction hueOf(k, out) {\n  const u = clamp(k, 0, 1) * (HUES.length - 1);\n  const i = Math.min(HUES.length - 2, Math.floor(u));\n  const f = u - i;\n  for (let c = 0; c \u003c 3; c++) out[c] = (HUES[i][c] * (1 - f) + HUES[i + 1][c] * f) / 255;\n}\n\n// Paints the floor once: what each LED is, its colour in the dark (kept under\n// 24) and how rotten it is there.\nfunction build(P) {\n  const { kind, base, rot } = P;\n  const put = (p, k, r, g, b) => {\n    kind[p] = k;\n    base[p * 3] = r;\n    base[p * 3 + 1] = g;\n    base[p * 3 + 2] = b;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gy = groundY(x);\n      if (y \u003c gy) {\n        // Night air under the trees, with two far trunks a shade lighter.\n        const h = y / gy;\n        const trunk = smooth(1.5, 0, Math.abs(x - 41 - 2 * Math.sin(y * 0.03)) - 2.5) + smooth(1.5, 0, Math.abs(x - 58) - 1.5);\n        const n = noise(x * 0.5, y * 0.12, 1);\n        put(p, AIR, 2 + 2 * h + 4 * trunk * n, 3 + 3 * h + 4 * trunk * n, 8 + 2 * h + 3 * trunk);\n      } else if (y \u003c gy + 8) {\n        // Leaf litter between the leaves.\n        const v = 0.5 + 0.4 * noise(x * 0.6, y * 0.6, 17);\n        put(p, LITTER, 12 * v, 8 * v, 4 * v);\n      } else {\n        // Soil: dark, mottled, darker with depth.\n        const m = 0.55 + 0.6 * noise(x * 0.35, y * 0.35, 2) - (0.3 * (y - gy)) / 64;\n        put(p, SOIL, 15 * m, 10 * m, 6 * m);\n      }\n    }\n  // Stones in the soil, lit on top.\n  for (const [cx, cy, rx, ry] of [[37, 84, 5, 3], [53, 101, 6, 4], [20, 104, 4, 3], [61, 77, 3, 2.5], [5, 84, 3, 2], [33, 118, 5, 3.5], [58, 122, 4, 3]]) {\n    for (let y = Math.floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const e = ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2;\n        if (e > 1) continue;\n        const top = 1 - (y - cy + ry) / (2 * ry);\n        const v = 8 + 9 * top * top;\n        put(y * W + x, STONE, v, v, v + 2);\n      }\n  }\n  // Roots from the foot of the stump down into the soil.\n  for (const [x0, a0, len, w0] of [[4, 2.2, 40, 2.4], [10, 1.75, 52, 2.6], [17, 1.25, 50, 2.4], [22, 0.6, 36, 1.8], [1, 2.6, 22, 1.6]]) {\n    let x = x0;\n    let y = GROUND + 4;\n    let a = a0;\n    for (let s = 0; s \u003c len; s++) {\n      a += 0.12 * Math.sin(s * 0.35 + x0);\n      x += Math.cos(a);\n      y += Math.sin(a) * 0.9 + 0.15;\n      const r = w0 * (1 - s / (len + 6));\n      for (let j = Math.floor(y - r); j \u003c= y + r; j++)\n        for (let i = Math.floor(x - r); i \u003c= x + r; i++) {\n          if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || (i - x) ** 2 + (j - y) ** 2 > r * r) continue;\n          const q = j * W + i;\n          if (kind[q] !== SOIL) continue;\n          const v = 0.8 + 0.3 * noise(i * 0.8, j * 0.3, 4);\n          put(q, ROOT, 18 * v, 11 * v, 7 * v);\n          // Stretches of root sheathed in fungus glow faintly.\n          rot[q] = 0.75 * noise(s * 0.15, x0, 25);\n        }\n    }\n  }\n  // The log, lying with its broken end to the left: bark top and bottom, the\n  // rotten wood bared along its middle, the end face showing its rings.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = LOGX - 5; x \u003c W; x++) {\n      const p = y * W + x;\n      const v = (y - logCentre(x)) / LOGR;\n      if (Math.abs(v) > 1) continue;\n      const face = ((x - LOGX) / 4) ** 2 + v * v;\n      if (x \u003c LOGX && face > 1) continue;\n      const round = Math.sqrt(1 - v * v);\n      if (face \u003c= 1) {\n        // End face: rings round the heart, the heart rotted soft.\n        const ring = Math.sqrt(face) * 6;\n        const line = Math.abs(ring - Math.round(ring)) \u003c 0.18 ? 0.6 : 1;\n        const s = (0.7 + 0.3 * noise(x * 0.9, y * 0.5, 5)) * line;\n        put(p, WOOD, 20 * s, 15 * s, 9 * s);\n        rot[p] = (0.75 + 0.25 * (1 - Math.sqrt(face))) * (line \u003c 1 ? 0.5 : 1);\n        continue;\n      }\n      const n = noise(x * 0.18, y * 0.5, 6);\n      const barkEdge = 0.58 + 0.3 * n;\n      if (Math.abs(v) > barkEdge) {\n        // Bark in long ridges along the log, moss on its top.\n        const ridge = 0.6 + 0.4 * Math.abs(Math.sin(y * 1.7 + 2 * noise(x * 0.25, y, 7)));\n        const s = ridge * (0.45 + 0.55 * round);\n        const moss = v \u003c 0 ? smooth(0.5, 0.8, noise(x * 0.3, y * 0.6, 8)) * smooth(-0.6, -0.95, v) : 0;\n        put(p, BARK, (14 - 8 * moss) * s, (10 + 6 * moss) * s, (7 - 3 * moss) * s);\n      } else {\n        // Bared wood with its grain along the log and a few cracks across it.\n        const grain = 0.75 + 0.25 * Math.sin(y * 2.3 + 3 * noise(x * 0.1, y * 0.3, 9));\n        const crack = smooth(0.08, 0, Math.abs(noise(x * 0.22, 3, 10) - 0.5)) * 0.6;\n        const s = grain * (1 - crack) * (0.55 + 0.45 * round);\n        put(p, WOOD, 21 * s, 16 * s, 9 * s);\n        rot[p] = smooth(0.35, 0.75, noise(x * 0.22, y * 0.35, 11)) * (1 - crack);\n      }\n    }\n  // The stump: bark down both sides and in patches, the rest bared and rotten.\n  for (let y = 0; y \u003c H; y++) {\n    const half = stumpHalf(y);\n    for (let x = 0; x \u003c W; x++) {\n      const dx = Math.abs(x - SX);\n      if (dx > half || y \u003c stumpTop(x) || y > groundY(x) + 1) continue;\n      const p = y * W + x;\n      const edge = half - dx;\n      const round = Math.sqrt(1 - (dx / (half + 0.5)) ** 2);\n      const patch = noise(x * 0.3, y * 0.09, 12);\n      if (edge \u003c 1.6 + 1.2 * noise(1, y * 0.2, 13) || patch > 0.8) {\n        const fissure = 0.55 + 0.45 * Math.abs(Math.sin(x * 1.9 + 2 * noise(x, y * 0.15, 14)));\n        const s = fissure * (0.5 + 0.5 * round);\n        put(p, BARK, 15 * s, 10 * s, 7 * s);\n      } else {\n        const grain = 0.75 + 0.25 * Math.sin(x * 2.1 + 3 * noise(x * 0.4, y * 0.08, 15));\n        const s = grain * (0.55 + 0.45 * round);\n        put(p, WOOD, 20 * s, 15 * s, 9 * s);\n        rot[p] = smooth(0.28, 0.68, noise(x * 0.32, y * 0.11, 16)) * (0.8 + 0.2 * smooth(20, 10, y));\n      }\n    }\n  }\n  // Fallen leaves over the soil and round the foot of the log and the stump,\n  // oak brown, beech copper, a few still olive.\n  const LEAVES = [[19, 10, 4], [15, 12, 4], [21, 13, 6], [11, 8, 4], [17, 9, 3], [13, 13, 6]];\n  for (let i = 0; i \u003c 170; i++) {\n    const x0 = hash(i, 19) * W;\n    const gy = groundY(x0);\n    const y0 = gy - 1 + hash(i, 20) * 9;\n    const a = hash(i, 21) * 3.14;\n    const rx = 1.6 + 1.6 * hash(i, 22);\n    const ry = 0.7 + 0.6 * hash(i, 23);\n    const col = LEAVES[Math.floor(hash(i, 24) * LEAVES.length)];\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    for (let y = Math.floor(y0 - rx); y \u003c= y0 + rx; y++)\n      for (let x = Math.floor(x0 - rx); x \u003c= x0 + rx; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || y \u003c groundY(x) - 1.5) continue;\n        const u = ((x - x0) * ca + (y - y0) * sa) / rx;\n        const w = (-(x - x0) * sa + (y - y0) * ca) / ry;\n        if (u * u + w * w > 1) continue;\n        const s = (Math.abs(w) \u003c 0.3 ? 0.7 : 1) * (0.8 + 0.2 * hash(x, y));\n        put(y * W + x, LITTER, col[0] * s, col[1] * s, col[2] * s);\n        // One leaf in five is grown through and glows, the way leaf litter\n        // full of Mycena does.\n        rot[y * W + x] = hash(i, 26) \u003c 0.2 ? 0.55 + 0.3 * hash(i, 27) : 0;\n      }\n  }\n  // Every LED of the dark gets its own grain, channel by channel, and nothing\n  // in the dark goes over 23.\n  for (let p = 0; p \u003c N; p++) {\n    let m = 0;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = Math.max(0, base[p * 3 + c] + 7 * (hash(p, 30 + c) - 0.5));\n      base[p * 3 + c] = v;\n      if (v > m) m = v;\n    }\n    if (m > 23) for (let c = 0; c \u003c 3; c++) base[p * 3 + c] *= 23 / m;\n  }\n}\n\n// Mushroom clusters: Mycena standing up on stems, or Panellus shelves on the\n// side of the wood (side -1 or 1). Each comes up, glows and goes.\nfunction makeSites() {\n  const sites = [];\n  const up = (x, y, n, tall) => sites.push({ x, y, side: 0, n, tall });\n  const shelf = (x, y, side, n) => sites.push({ x, y, side, n, tall: 0 });\n  up(11, Math.ceil(stumpTop(11)), 6, 7);\n  up(5, Math.ceil(stumpTop(5)), 3, 4);\n  shelf(SX + 8, 28, 1, 3);\n  shelf(SX - 8, 42, -1, 3);\n  up(39, Math.floor(logCentre(39) - LOGR * 0.92), 5, 6);\n  up(55, Math.floor(logCentre(55) - LOGR * 0.92), 4, 5);\n  shelf(LOGX - 5, 49, -1, 2);\n  up(31, Math.floor(groundY(31)), 3, 3);\n  up(47, Math.floor(groundY(47)) + 1, 3, 3);\n  up(61, Math.floor(groundY(61)), 2, 3);\n  for (let i = 0; i \u003c sites.length; i++) {\n    const s = sites[i];\n    s.period = 34 + 14 * hash(i, 40);\n    s.offset = s.period * hash(i, 41);\n    s.beat = 3.2 + 2.4 * hash(i, 42);\n    s.phase = 6.28 * hash(i, 43);\n    s.caps = [];\n    for (let j = 0; j \u003c s.n; j++) {\n      if (s.side === 0) {\n        // Neighbours stand at different heights, so their caps do not run\n        // together into one plate.\n        const bx = (j - (s.n - 1) / 2) * 2.2 + 0.6 * (hash(i * 9 + j, 44) - 0.5);\n        const h = s.tall * (j % 2 ? 0.5 : 1) * (0.8 + 0.2 * hash(i * 9 + j, 45));\n        s.caps.push({ bx, h, lean: bx * 0.1 + 0.2 * (hash(i * 9 + j, 46) - 0.5), r: j % 2 || hash(i * 9 + j, 47) \u003c 0.5 ? 1 : 2 });\n      } else {\n        s.caps.push({ by: j * 4 - (s.n - 1) * 2, r: 3 + Math.round(2 * hash(i * 9 + j, 48)) });\n      }\n    }\n    s.life = 0;\n    s.glow = 0;\n  }\n  return sites;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.kind = new Uint8Array(N);\n  P.base = new Float32Array(N * 3);\n  P.rot = new Float32Array(N);\n  build(P);\n  P.occ = new Uint8Array(N);\n  P.dist = new Float32Array(N);\n  P.born = new Float32Array(N);\n  P.dies = new Float32Array(N);\n  P.tips = [];\n  P.sites = makeSites();\n  // Each stem stands on whatever is under it.\n  for (const s of P.sites)\n    for (const c of s.caps) {\n      if (s.side !== 0) continue;\n      const x = Math.round(s.x + c.bx);\n      let y = s.y - 8;\n      while (y \u003c s.y + 4 && (x \u003c 0 || x >= W || P.kind[(y + 1) * W + x] === AIR)) y++;\n      c.foot = y;\n    }\n  P.spores = [];\n  P.seed = Math.floor(Math.random() * 4294967296) | 0;\n  P.haze = new Float32Array(HW * HH);\n  P.G = new Float32Array(N);\n  P.col = new Float32Array(3);\n  Object.assign(P, { T: 0, sweep: 0, owed: 0, started: false, damp: 0.06, spore: 0, hue: -1 });\n}\n\nfunction addTip(P, x, y, a, d) {\n  if (P.tips.length \u003c TIPS * 2) P.tips.push({ x, y, a, d, acc: Math.random(), rate: CREEP * (0.6 + 0.8 * Math.random()), len: 0, last: -1 });\n}\n\n// A new tip, most often forking off a living thread, sometimes from an origin.\nfunction sprout(P) {\n  if (Math.random() \u003c 0.55) {\n    for (let k = 0; k \u003c 40; k++) {\n      const p = Math.floor(Math.random() * N);\n      if (P.occ[p] && P.dies[p] - P.T > 6) {\n        addTip(P, p % W, (p / W) | 0, Math.random() * 6.283, P.dist[p]);\n        return;\n      }\n    }\n  }\n  const o = ORIGINS[Math.floor(Math.random() * ORIGINS.length)];\n  addTip(P, o[0] + 2 * (Math.random() - 0.5), o[1] + 2 * (Math.random() - 0.5), Math.random() * 6.283, 0);\n}\n\n// One LED of creep for a tip. Returns false when the tip stops.\nfunction creep(P, t) {\n  const { kind, occ } = P;\n  let a = t.a + 0.5 * (Math.random() - 0.5);\n  // In the log the threads follow the grain along it; in the stump, up and\n  // down it.\n  if (kind[Math.round(t.y) * W + Math.round(t.x)] === WOOD) {\n    if (t.x > LOGX - 5 && t.y > LOGY - 14 && t.y \u003c GROUND) a += 0.12 * Math.sin(-2 * a);\n    else if (t.x \u003c SX + 12) a += 0.12 * Math.sin(2 * (Math.PI / 2 - a));\n  }\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const nx = t.x + Math.cos(a);\n    const ny = t.y + Math.sin(a);\n    const ix = Math.round(nx);\n    const iy = Math.round(ny);\n    if (ix >= 0 && ix \u003c W && iy >= 0 && iy \u003c H && GROWS[kind[iy * W + ix]]) {\n      const p = iy * W + ix;\n      t.x = nx;\n      t.y = ny;\n      t.a = a;\n      if (p === t.last) return true;\n      // Two threads that meet fuse, and the one arriving stops.\n      if (occ[p] && P.dies[p] - P.T > 2 && Math.random() \u003c 0.6) return false;\n      t.last = p;\n      occ[p] = 1;\n      P.dist[p] = ++t.d;\n      P.born[p] = P.T;\n      // Threads in the soil and the litter rot sooner than those in the wood.\n      P.dies[p] = P.T + (LIFE + LIFE_J * Math.random()) * (kind[p] === WOOD ? 1 : 0.6);\n      if (Math.random() \u003c (kind[p] === SOIL ? FORK * 0.5 : FORK)) addTip(P, nx, ny, a + (Math.random() \u003c 0.5 ? -1 : 1) * (0.6 + 0.6 * Math.random()), t.d);\n      return ++t.len \u003c 70;\n    }\n    a += (Math.random() \u003c 0.5 ? -1 : 1) * (0.9 + 1.2 * Math.random());\n  }\n  return false;\n}\n\n// Spores leave the caps of the clusters that are up.\nfunction shed(P, count) {\n  const up = P.sites.filter((s) => s.life > 0.6);\n  for (let n = 0; n \u003c count && up.length && P.spores.length \u003c MAXS; n++) {\n    const s = up[Math.floor(sporeRandom(P) * up.length)];\n    const c = s.caps[Math.floor(sporeRandom(P) * s.caps.length)];\n    const side = s.side === 0;\n    P.spores.push({\n      x: side ? s.x + c.bx + c.lean * c.h + (sporeRandom(P) - 0.5) * 2 * c.r : s.x + s.side * c.r * sporeRandom(P),\n      y: side ? c.foot - c.h - 1 : s.y + c.by + 1,\n      v: 1.6 + 2.6 * sporeRandom(P),\n      age: 0,\n      life: 9 + 9 * sporeRandom(P),\n      ph: 6.28 * sporeRandom(P),\n      w: 0,\n    });\n  }\n}\n\nfunction world(P, wdt, spores) {\n  P.T += wdt;\n  const T = P.T;\n  // Threads creep.\n  while (P.tips.length \u003c TIPS) sprout(P);\n  P.tips = P.tips.filter((t) => {\n    for (t.acc += wdt * t.rate; t.acc >= 1; t.acc--) if (!creep(P, t)) return false;\n    return true;\n  });\n  // Old threads rot away, a few times a second.\n  P.sweep += wdt;\n  if (P.sweep > 0.2) {\n    P.sweep = 0;\n    const { occ, dies } = P;\n    for (let p = 0; p \u003c N; p++) if (occ[p] && dies[p] \u003c T) occ[p] = 0;\n  }\n  // Each cluster's life: up over the first eighth, glowing, then withering.\n  for (const s of P.sites) {\n    const u = ((T + s.offset) % s.period) / s.period;\n    s.life = u \u003c 0.12 ? smooth(0, 0.12, u) : u \u003c 0.74 ? 1 : 1 - smooth(0.74, 0.88, u);\n    s.glow = s.life * (0.62 + 0.38 * Math.sin((T * 6.283) / s.beat + s.phase));\n  }\n  // Spores rise, sway and fade.\n  P.owed += wdt * (6 + 75 * spores);\n  const n = Math.floor(P.owed);\n  P.owed -= n;\n  shed(P, n);\n  P.spores = P.spores.filter((m) => {\n    m.age += wdt;\n    m.y -= m.v * wdt;\n    m.x += wdt * (1.1 * Math.sin(T * 0.5 + m.ph) + 0.3 * Math.sin(m.y * 0.1));\n    m.w = Math.min(1, m.age / 1.5) * clamp((m.life - m.age) / 3, 0, 1);\n    return m.age \u003c m.life && m.y > -2 && m.x > -2 && m.x \u003c W + 1;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const speed = clamp(k[1], 0.1, 4) / 2;\n  const spores = clamp(k[2], 0, 1);\n  P.damp = clamp(k[3], 0, 1);\n  P.spore = spores;\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    hueOf(k[0], P.col);\n  }\n  if (!P.started) {\n    P.started = true;\n    for (let t = 0; t \u003c PRE; t += PRE_DT) world(P, PRE_DT, spores);\n  }\n  if (input.btnPressed && input.btnPressed[0]) shed(P, 160);\n  world(P, dt * speed, spores);\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.G) return;\n  const { G, kind, rot, occ, dist, born, dies, base, haze } = P;\n  const T = P.T;\n  const damp = P.damp;\n  const gain = 0.8 + 0.7 * damp;\n  // Rotten wood glows where it is wet enough, breathing slowly.\n  const edge = 0.45 - 0.3 * damp;\n  for (let p = 0; p \u003c N; p++) {\n    const r = rot[p];\n    if (r \u003c= edge) {\n      G[p] = 0;\n      continue;\n    }\n    const x = p % W;\n    const y = (p / W) | 0;\n    const breath = 0.55 + 0.45 * Math.sin(x * 0.16 - T * 0.6 + 0.8 * Math.sin(y * 0.07 + T * 0.3));\n    G[p] = 0.5 * smooth(edge, edge + 0.45, r) * breath;\n  }\n  // The threads: dim along their length, a pulse running out along each, and\n  // the growing tip bright.\n  const kw = 6.283 / WAVE;\n  const om = kw * RUN;\n  for (let p = 0; p \u003c N; p++) {\n    if (!occ[p]) continue;\n    const age = T - born[p];\n    const left = dies[p] - T;\n    const fade = Math.min(1, age / 0.5) * clamp(left / 4, 0, 1);\n    let c = 0.5 + 0.5 * Math.cos(dist[p] * kw - T * om);\n    c = c * c * c;\n    const soil = kind[p] === SOIL || kind[p] === LITTER ? 0.8 : 1;\n    G[p] += fade * soil * (0.2 + 0.55 * c) + (age \u003c 1 ? 0.5 * (1 - age) : 0);\n  }\n  for (const t of P.tips) G[Math.round(t.y) * W + Math.round(t.x)] += 0.55;\n  // The spore haze: each spore counts into the grid, which is spread back\n  // over the LEDs smoothly.\n  haze.fill(0);\n  for (const m of P.spores) {\n    const fx = m.x / 4;\n    const fy = m.y / 4;\n    const ix = Math.floor(fx);\n    const iy = Math.floor(fy);\n    if (ix \u003c 0 || iy \u003c 0 || ix >= HW - 1 || iy >= HH - 1) continue;\n    const u = fx - ix;\n    const v = fy - iy;\n    const w = m.w;\n    const q = iy * HW + ix;\n    haze[q] += w * (1 - u) * (1 - v);\n    haze[q + 1] += w * u * (1 - v);\n    haze[q + HW] += w * (1 - u) * v;\n    haze[q + HW + 1] += w * u * v;\n  }\n  const hk = 0.045 + 0.035 * P.spore;\n  for (let y = 0; y \u003c H; y++) {\n    const fy = y / 4;\n    const iy = Math.min(HH - 2, Math.floor(fy));\n    const v = fy - iy;\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / 4;\n      const ix = Math.min(HW - 2, Math.floor(fx));\n      const u = fx - ix;\n      const q = iy * HW + ix;\n      const d = (haze[q] * (1 - u) + haze[q + 1] * u) * (1 - v) + (haze[q + HW] * (1 - u) + haze[q + HW + 1] * u) * v;\n      if (d > 0) G[y * W + x] += hk * Math.min(d, 5);\n    }\n  }\n  // Each spore itself, a mote caught in the glow.\n  for (const m of P.spores) {\n    const x = Math.round(m.x);\n    const y = Math.round(m.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) G[y * W + x] += 0.3 * m.w * (0.6 + 0.4 * Math.sin(T * 3 + m.ph * 5));\n  }\n  // The clusters: a soft halo on the wood round them, then stems and caps.\n  for (const s of P.sites) {\n    if (s.life \u003c= 0) continue;\n    const g = s.glow;\n    const cy = s.side === 0 ? s.y - s.tall * 0.6 : s.y;\n    const cx = s.x + s.side * 2;\n    for (let y = Math.max(0, Math.floor(cy - 9)); y \u003c= Math.min(H - 1, cy + 9); y++)\n      for (let x = Math.max(0, Math.floor(cx - 9)); x \u003c= Math.min(W - 1, cx + 9); x++) {\n        const d2 = (x - cx) ** 2 + (y - cy) ** 2;\n        if (d2 \u003c 81) G[y * W + x] += 0.2 * g * (1 - d2 / 81) ** 2;\n      }\n    for (const c of s.caps) {\n      if (s.side === 0) {\n        const h = c.h * s.life;\n        for (let j = 0; j \u003c= h; j++) {\n          const x = Math.round(s.x + c.bx + c.lean * j);\n          const y = c.foot - j;\n          if (x >= 0 && x \u003c W && y >= 0) G[y * W + x] += 0.32 * g;\n        }\n        const tx = s.x + c.bx + c.lean * h;\n        const ty = c.foot - Math.round(h) - 1;\n        const r = c.r * (0.4 + 0.6 * s.life);\n        // A Mycena cap is a little bell: one LED at the top, wider at the rim.\n        for (let row = 0; row \u003c= c.r; row++) {\n          const half = row === c.r ? r + 0.4 : (r * row) / c.r;\n          const y = ty - c.r + row;\n          if (y \u003c 0 || y >= H) continue;\n          for (let x = Math.round(tx - half); x \u003c= Math.round(tx + half); x++)\n            if (x >= 0 && x \u003c W) G[y * W + x] += g * (row === c.r ? 1.15 : 0.85);\n        }\n      } else {\n        // A Panellus shelf: a thin bracket out of the wood, its top dim and\n        // the gills under it bright, the rim bent down.\n        const r = Math.round(c.r * (0.4 + 0.6 * s.life));\n        const y0 = Math.round(s.y + c.by);\n        for (let i = 0; i \u003c= r; i++) {\n          const x = Math.round(s.x + s.side * i);\n          if (x \u003c 0 || x >= W) continue;\n          if (i \u003c r - 1 && y0 > 0) G[(y0 - 1) * W + x] += 0.45 * g;\n          if (y0 >= 0 && y0 \u003c H) G[y0 * W + x] += 0.75 * g;\n          if (i > 0 && i \u003c r && y0 + 1 \u003c H) G[(y0 + 1) * W + x] += 1.25 * g;\n        }\n      }\n    }\n  }\n  // Light the floor: the dark as it was painted, plus the glow in the Glow\n  // colour, running toward white where it is brightest.\n  const C = P.col;\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    const g = G[p] * gain;\n    let r = base[q];\n    let gg = base[q + 1];\n    let b = base[q + 2];\n    if (g > 0) {\n      const v = g * 255;\n      const w = g > 0.7 ? (g - 0.7) * 170 : 0;\n      r += v * C[0] + w;\n      gg += v * C[1] + w;\n      b += v * C[2] + w;\n    }\n    display.setPixel(p % W, (p / W) | 0, byte(r), byte(gg), byte(b));\n  }\n}\n","layer":{"id":"layer-foxfire","type":"code","name":"foxfire","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Foxfire\n// Family:  fungi\n// Idea:    A night forest floor in cross-section, a broken stump and a rotting log on the leaf litter over the soil, where glowing honey fungus threads creep and branch through wood and earth with pulses of light running out along them, while clusters of little glowing mushrooms come up, breathe their light and shed spores that drift up into the dark.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the foxfire of Armillaria-rotted wood and the glowing caps of Mycena chlorophos and Panellus stipticus\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Glow=0..1, Speed=0.2..3, Spores=0..1, Damp=0..1\n//\n// Knob 1: Glow. The colour of the light, from the yellow-green of foxfire at 0 through a clear green to a cold blue-green at 1.\n// Knob 2: Speed. How fast the floor lives: at 2 a thread tip creeps about three LEDs a second, a pulse runs seven LEDs a second and a mushroom cluster comes and goes in about forty seconds; at 0.2 all of it runs ten times slower.\n// Knob 3: Spores. How hard the caps shed: at 0 a few motes rise from each cluster; turned up, the spores thicken into a lit haze that climbs past the stump into the top of the panel.\n// Knob 4: Damp. How wet the wood is; wet foxfire glows harder, so turning it up brightens the threads and the caps and lights more of the rotten wood round them.\n// Buttons: K1 tap shakes the floor: every cap that is up lets go a puff of spores at once.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n\n// What each LED of the floor is made of. Threads grow in wood, roots, litter\n// and soil, never in the air, the stones or the bark.\nconst AIR = 0;\nconst BARK = 1;\nconst WOOD = 2;\nconst LITTER = 3;\nconst SOIL = 4;\nconst STONE = 5;\nconst ROOT = 6;\nconst GROWS = [0, 0, 1, 1, 1, 0, 1];\n\n// The ground line, the stump's middle column, and the log lying beside it\n// from its broken end at LOGX out past the right edge.\nconst GROUND = 64;\nconst SX = 12;\nconst LOGX = 27;\nconst LOGY = 51;\nconst LOGR = 10.5;\n\n// Thread tips alive at once, LEDs each one creeps per second of floor time,\n// the chance per step that a tip forks, and how long a thread lives before\n// it rots away, in seconds of floor time (plus up to LIFE_J more).\nconst TIPS = 26;\nconst CREEP = 3;\nconst FORK = 0.08;\nconst LIFE = 16;\nconst LIFE_J = 8;\n// A pulse every WAVE LEDs along a thread, running at RUN LEDs a second.\nconst WAVE = 26;\nconst RUN = 7;\n// Seconds of floor time grown before the panel opens.\nconst PRE = 26;\nconst PRE_DT = 1 / 15;\n// Where fresh threads start: the stump, the log and the soil.\nconst ORIGINS = [\n  [12, 68], [9, 46], [14, 26], [11, 12], [12, 36], [34, 50], [46, 54], [58, 48], [30, 86], [50, 100], [42, 120], [10, 110],\n];\n\nconst MAXS = 900;\n// The spore haze is kept on a grid of 4 x 4 LED cells.\nconst HW = 17;\nconst HH = 33;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\n// The spores draw from their own sequence, so how many there are never\n// changes the way the threads grow.\nfunction sporeRandom(P) {\n  P.seed = (P.seed + 0x6d2b79f5) | 0;\n  let t = P.seed;\n  t = Math.imul(t ^ (t >>> 15), t | 1);\n  t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y, s) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const u = x - xi;\n  const v = y - yi;\n  const fu = u * u * (3 - 2 * u);\n  const fv = v * v * (3 - 2 * v);\n  const k = xi + s * 7919;\n  const a = hash(k, yi);\n  const b = hash(k + 1, yi);\n  const c = hash(k, yi + 1);\n  return a + (b - a) * fu + (c - a) * fv + (a - b - c + hash(k + 1, yi + 1)) * fu * fv;\n}\n\nfunction groundY(x) {\n  return GROUND - 0.5 + 1.5 * Math.sin(x * 0.17 + 0.5) + Math.sin(x * 0.41);\n}\n\n// The stump's half width at a row, flaring into its roots at the foot, and\n// the row its broken top reaches at a column.\nfunction stumpHalf(y) {\n  return 7 + 5 * smooth(GROUND - 16, GROUND + 6, y) ** 2;\n}\n\nfunction stumpTop(x) {\n  return 5 + 6 * Math.abs(Math.sin(x * 0.75 + 0.4)) + 3 * hash(x, 77) + 4 * smooth(4, 0, Math.abs(x - SX) - 4);\n}\n\nfunction logCentre(x) {\n  return LOGY + 0.05 * (x - LOGX);\n}\n\n// The glow colours Glow runs through: foxfire yellow-green, green, sea\n// green, a cold blue.\nconst HUES = [\n  [150, 255, 40],\n  [50, 255, 100],\n  [20, 235, 200],\n  [30, 150, 255],\n];\n\nfunction hueOf(k, out) {\n  const u = clamp(k, 0, 1) * (HUES.length - 1);\n  const i = Math.min(HUES.length - 2, Math.floor(u));\n  const f = u - i;\n  for (let c = 0; c \u003c 3; c++) out[c] = (HUES[i][c] * (1 - f) + HUES[i + 1][c] * f) / 255;\n}\n\n// Paints the floor once: what each LED is, its colour in the dark (kept under\n// 24) and how rotten it is there.\nfunction build(P) {\n  const { kind, base, rot } = P;\n  const put = (p, k, r, g, b) => {\n    kind[p] = k;\n    base[p * 3] = r;\n    base[p * 3 + 1] = g;\n    base[p * 3 + 2] = b;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gy = groundY(x);\n      if (y \u003c gy) {\n        // Night air under the trees, with two far trunks a shade lighter.\n        const h = y / gy;\n        const trunk = smooth(1.5, 0, Math.abs(x - 41 - 2 * Math.sin(y * 0.03)) - 2.5) + smooth(1.5, 0, Math.abs(x - 58) - 1.5);\n        const n = noise(x * 0.5, y * 0.12, 1);\n        put(p, AIR, 2 + 2 * h + 4 * trunk * n, 3 + 3 * h + 4 * trunk * n, 8 + 2 * h + 3 * trunk);\n      } else if (y \u003c gy + 8) {\n        // Leaf litter between the leaves.\n        const v = 0.5 + 0.4 * noise(x * 0.6, y * 0.6, 17);\n        put(p, LITTER, 12 * v, 8 * v, 4 * v);\n      } else {\n        // Soil: dark, mottled, darker with depth.\n        const m = 0.55 + 0.6 * noise(x * 0.35, y * 0.35, 2) - (0.3 * (y - gy)) / 64;\n        put(p, SOIL, 15 * m, 10 * m, 6 * m);\n      }\n    }\n  // Stones in the soil, lit on top.\n  for (const [cx, cy, rx, ry] of [[37, 84, 5, 3], [53, 101, 6, 4], [20, 104, 4, 3], [61, 77, 3, 2.5], [5, 84, 3, 2], [33, 118, 5, 3.5], [58, 122, 4, 3]]) {\n    for (let y = Math.floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const e = ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2;\n        if (e > 1) continue;\n        const top = 1 - (y - cy + ry) / (2 * ry);\n        const v = 8 + 9 * top * top;\n        put(y * W + x, STONE, v, v, v + 2);\n      }\n  }\n  // Roots from the foot of the stump down into the soil.\n  for (const [x0, a0, len, w0] of [[4, 2.2, 40, 2.4], [10, 1.75, 52, 2.6], [17, 1.25, 50, 2.4], [22, 0.6, 36, 1.8], [1, 2.6, 22, 1.6]]) {\n    let x = x0;\n    let y = GROUND + 4;\n    let a = a0;\n    for (let s = 0; s \u003c len; s++) {\n      a += 0.12 * Math.sin(s * 0.35 + x0);\n      x += Math.cos(a);\n      y += Math.sin(a) * 0.9 + 0.15;\n      const r = w0 * (1 - s / (len + 6));\n      for (let j = Math.floor(y - r); j \u003c= y + r; j++)\n        for (let i = Math.floor(x - r); i \u003c= x + r; i++) {\n          if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || (i - x) ** 2 + (j - y) ** 2 > r * r) continue;\n          const q = j * W + i;\n          if (kind[q] !== SOIL) continue;\n          const v = 0.8 + 0.3 * noise(i * 0.8, j * 0.3, 4);\n          put(q, ROOT, 18 * v, 11 * v, 7 * v);\n          // Stretches of root sheathed in fungus glow faintly.\n          rot[q] = 0.75 * noise(s * 0.15, x0, 25);\n        }\n    }\n  }\n  // The log, lying with its broken end to the left: bark top and bottom, the\n  // rotten wood bared along its middle, the end face showing its rings.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = LOGX - 5; x \u003c W; x++) {\n      const p = y * W + x;\n      const v = (y - logCentre(x)) / LOGR;\n      if (Math.abs(v) > 1) continue;\n      const face = ((x - LOGX) / 4) ** 2 + v * v;\n      if (x \u003c LOGX && face > 1) continue;\n      const round = Math.sqrt(1 - v * v);\n      if (face \u003c= 1) {\n        // End face: rings round the heart, the heart rotted soft.\n        const ring = Math.sqrt(face) * 6;\n        const line = Math.abs(ring - Math.round(ring)) \u003c 0.18 ? 0.6 : 1;\n        const s = (0.7 + 0.3 * noise(x * 0.9, y * 0.5, 5)) * line;\n        put(p, WOOD, 20 * s, 15 * s, 9 * s);\n        rot[p] = (0.75 + 0.25 * (1 - Math.sqrt(face))) * (line \u003c 1 ? 0.5 : 1);\n        continue;\n      }\n      const n = noise(x * 0.18, y * 0.5, 6);\n      const barkEdge = 0.58 + 0.3 * n;\n      if (Math.abs(v) > barkEdge) {\n        // Bark in long ridges along the log, moss on its top.\n        const ridge = 0.6 + 0.4 * Math.abs(Math.sin(y * 1.7 + 2 * noise(x * 0.25, y, 7)));\n        const s = ridge * (0.45 + 0.55 * round);\n        const moss = v \u003c 0 ? smooth(0.5, 0.8, noise(x * 0.3, y * 0.6, 8)) * smooth(-0.6, -0.95, v) : 0;\n        put(p, BARK, (14 - 8 * moss) * s, (10 + 6 * moss) * s, (7 - 3 * moss) * s);\n      } else {\n        // Bared wood with its grain along the log and a few cracks across it.\n        const grain = 0.75 + 0.25 * Math.sin(y * 2.3 + 3 * noise(x * 0.1, y * 0.3, 9));\n        const crack = smooth(0.08, 0, Math.abs(noise(x * 0.22, 3, 10) - 0.5)) * 0.6;\n        const s = grain * (1 - crack) * (0.55 + 0.45 * round);\n        put(p, WOOD, 21 * s, 16 * s, 9 * s);\n        rot[p] = smooth(0.35, 0.75, noise(x * 0.22, y * 0.35, 11)) * (1 - crack);\n      }\n    }\n  // The stump: bark down both sides and in patches, the rest bared and rotten.\n  for (let y = 0; y \u003c H; y++) {\n    const half = stumpHalf(y);\n    for (let x = 0; x \u003c W; x++) {\n      const dx = Math.abs(x - SX);\n      if (dx > half || y \u003c stumpTop(x) || y > groundY(x) + 1) continue;\n      const p = y * W + x;\n      const edge = half - dx;\n      const round = Math.sqrt(1 - (dx / (half + 0.5)) ** 2);\n      const patch = noise(x * 0.3, y * 0.09, 12);\n      if (edge \u003c 1.6 + 1.2 * noise(1, y * 0.2, 13) || patch > 0.8) {\n        const fissure = 0.55 + 0.45 * Math.abs(Math.sin(x * 1.9 + 2 * noise(x, y * 0.15, 14)));\n        const s = fissure * (0.5 + 0.5 * round);\n        put(p, BARK, 15 * s, 10 * s, 7 * s);\n      } else {\n        const grain = 0.75 + 0.25 * Math.sin(x * 2.1 + 3 * noise(x * 0.4, y * 0.08, 15));\n        const s = grain * (0.55 + 0.45 * round);\n        put(p, WOOD, 20 * s, 15 * s, 9 * s);\n        rot[p] = smooth(0.28, 0.68, noise(x * 0.32, y * 0.11, 16)) * (0.8 + 0.2 * smooth(20, 10, y));\n      }\n    }\n  }\n  // Fallen leaves over the soil and round the foot of the log and the stump,\n  // oak brown, beech copper, a few still olive.\n  const LEAVES = [[19, 10, 4], [15, 12, 4], [21, 13, 6], [11, 8, 4], [17, 9, 3], [13, 13, 6]];\n  for (let i = 0; i \u003c 170; i++) {\n    const x0 = hash(i, 19) * W;\n    const gy = groundY(x0);\n    const y0 = gy - 1 + hash(i, 20) * 9;\n    const a = hash(i, 21) * 3.14;\n    const rx = 1.6 + 1.6 * hash(i, 22);\n    const ry = 0.7 + 0.6 * hash(i, 23);\n    const col = LEAVES[Math.floor(hash(i, 24) * LEAVES.length)];\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    for (let y = Math.floor(y0 - rx); y \u003c= y0 + rx; y++)\n      for (let x = Math.floor(x0 - rx); x \u003c= x0 + rx; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || y \u003c groundY(x) - 1.5) continue;\n        const u = ((x - x0) * ca + (y - y0) * sa) / rx;\n        const w = (-(x - x0) * sa + (y - y0) * ca) / ry;\n        if (u * u + w * w > 1) continue;\n        const s = (Math.abs(w) \u003c 0.3 ? 0.7 : 1) * (0.8 + 0.2 * hash(x, y));\n        put(y * W + x, LITTER, col[0] * s, col[1] * s, col[2] * s);\n        // One leaf in five is grown through and glows, the way leaf litter\n        // full of Mycena does.\n        rot[y * W + x] = hash(i, 26) \u003c 0.2 ? 0.55 + 0.3 * hash(i, 27) : 0;\n      }\n  }\n  // Every LED of the dark gets its own grain, channel by channel, and nothing\n  // in the dark goes over 23.\n  for (let p = 0; p \u003c N; p++) {\n    let m = 0;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = Math.max(0, base[p * 3 + c] + 7 * (hash(p, 30 + c) - 0.5));\n      base[p * 3 + c] = v;\n      if (v > m) m = v;\n    }\n    if (m > 23) for (let c = 0; c \u003c 3; c++) base[p * 3 + c] *= 23 / m;\n  }\n}\n\n// Mushroom clusters: Mycena standing up on stems, or Panellus shelves on the\n// side of the wood (side -1 or 1). Each comes up, glows and goes.\nfunction makeSites() {\n  const sites = [];\n  const up = (x, y, n, tall) => sites.push({ x, y, side: 0, n, tall });\n  const shelf = (x, y, side, n) => sites.push({ x, y, side, n, tall: 0 });\n  up(11, Math.ceil(stumpTop(11)), 6, 7);\n  up(5, Math.ceil(stumpTop(5)), 3, 4);\n  shelf(SX + 8, 28, 1, 3);\n  shelf(SX - 8, 42, -1, 3);\n  up(39, Math.floor(logCentre(39) - LOGR * 0.92), 5, 6);\n  up(55, Math.floor(logCentre(55) - LOGR * 0.92), 4, 5);\n  shelf(LOGX - 5, 49, -1, 2);\n  up(31, Math.floor(groundY(31)), 3, 3);\n  up(47, Math.floor(groundY(47)) + 1, 3, 3);\n  up(61, Math.floor(groundY(61)), 2, 3);\n  for (let i = 0; i \u003c sites.length; i++) {\n    const s = sites[i];\n    s.period = 34 + 14 * hash(i, 40);\n    s.offset = s.period * hash(i, 41);\n    s.beat = 3.2 + 2.4 * hash(i, 42);\n    s.phase = 6.28 * hash(i, 43);\n    s.caps = [];\n    for (let j = 0; j \u003c s.n; j++) {\n      if (s.side === 0) {\n        // Neighbours stand at different heights, so their caps do not run\n        // together into one plate.\n        const bx = (j - (s.n - 1) / 2) * 2.2 + 0.6 * (hash(i * 9 + j, 44) - 0.5);\n        const h = s.tall * (j % 2 ? 0.5 : 1) * (0.8 + 0.2 * hash(i * 9 + j, 45));\n        s.caps.push({ bx, h, lean: bx * 0.1 + 0.2 * (hash(i * 9 + j, 46) - 0.5), r: j % 2 || hash(i * 9 + j, 47) \u003c 0.5 ? 1 : 2 });\n      } else {\n        s.caps.push({ by: j * 4 - (s.n - 1) * 2, r: 3 + Math.round(2 * hash(i * 9 + j, 48)) });\n      }\n    }\n    s.life = 0;\n    s.glow = 0;\n  }\n  return sites;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.kind = new Uint8Array(N);\n  P.base = new Float32Array(N * 3);\n  P.rot = new Float32Array(N);\n  build(P);\n  P.occ = new Uint8Array(N);\n  P.dist = new Float32Array(N);\n  P.born = new Float32Array(N);\n  P.dies = new Float32Array(N);\n  P.tips = [];\n  P.sites = makeSites();\n  // Each stem stands on whatever is under it.\n  for (const s of P.sites)\n    for (const c of s.caps) {\n      if (s.side !== 0) continue;\n      const x = Math.round(s.x + c.bx);\n      let y = s.y - 8;\n      while (y \u003c s.y + 4 && (x \u003c 0 || x >= W || P.kind[(y + 1) * W + x] === AIR)) y++;\n      c.foot = y;\n    }\n  P.spores = [];\n  P.seed = Math.floor(Math.random() * 4294967296) | 0;\n  P.haze = new Float32Array(HW * HH);\n  P.G = new Float32Array(N);\n  P.col = new Float32Array(3);\n  Object.assign(P, { T: 0, sweep: 0, owed: 0, started: false, damp: 0.06, spore: 0, hue: -1 });\n}\n\nfunction addTip(P, x, y, a, d) {\n  if (P.tips.length \u003c TIPS * 2) P.tips.push({ x, y, a, d, acc: Math.random(), rate: CREEP * (0.6 + 0.8 * Math.random()), len: 0, last: -1 });\n}\n\n// A new tip, most often forking off a living thread, sometimes from an origin.\nfunction sprout(P) {\n  if (Math.random() \u003c 0.55) {\n    for (let k = 0; k \u003c 40; k++) {\n      const p = Math.floor(Math.random() * N);\n      if (P.occ[p] && P.dies[p] - P.T > 6) {\n        addTip(P, p % W, (p / W) | 0, Math.random() * 6.283, P.dist[p]);\n        return;\n      }\n    }\n  }\n  const o = ORIGINS[Math.floor(Math.random() * ORIGINS.length)];\n  addTip(P, o[0] + 2 * (Math.random() - 0.5), o[1] + 2 * (Math.random() - 0.5), Math.random() * 6.283, 0);\n}\n\n// One LED of creep for a tip. Returns false when the tip stops.\nfunction creep(P, t) {\n  const { kind, occ } = P;\n  let a = t.a + 0.5 * (Math.random() - 0.5);\n  // In the log the threads follow the grain along it; in the stump, up and\n  // down it.\n  if (kind[Math.round(t.y) * W + Math.round(t.x)] === WOOD) {\n    if (t.x > LOGX - 5 && t.y > LOGY - 14 && t.y \u003c GROUND) a += 0.12 * Math.sin(-2 * a);\n    else if (t.x \u003c SX + 12) a += 0.12 * Math.sin(2 * (Math.PI / 2 - a));\n  }\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const nx = t.x + Math.cos(a);\n    const ny = t.y + Math.sin(a);\n    const ix = Math.round(nx);\n    const iy = Math.round(ny);\n    if (ix >= 0 && ix \u003c W && iy >= 0 && iy \u003c H && GROWS[kind[iy * W + ix]]) {\n      const p = iy * W + ix;\n      t.x = nx;\n      t.y = ny;\n      t.a = a;\n      if (p === t.last) return true;\n      // Two threads that meet fuse, and the one arriving stops.\n      if (occ[p] && P.dies[p] - P.T > 2 && Math.random() \u003c 0.6) return false;\n      t.last = p;\n      occ[p] = 1;\n      P.dist[p] = ++t.d;\n      P.born[p] = P.T;\n      // Threads in the soil and the litter rot sooner than those in the wood.\n      P.dies[p] = P.T + (LIFE + LIFE_J * Math.random()) * (kind[p] === WOOD ? 1 : 0.6);\n      if (Math.random() \u003c (kind[p] === SOIL ? FORK * 0.5 : FORK)) addTip(P, nx, ny, a + (Math.random() \u003c 0.5 ? -1 : 1) * (0.6 + 0.6 * Math.random()), t.d);\n      return ++t.len \u003c 70;\n    }\n    a += (Math.random() \u003c 0.5 ? -1 : 1) * (0.9 + 1.2 * Math.random());\n  }\n  return false;\n}\n\n// Spores leave the caps of the clusters that are up.\nfunction shed(P, count) {\n  const up = P.sites.filter((s) => s.life > 0.6);\n  for (let n = 0; n \u003c count && up.length && P.spores.length \u003c MAXS; n++) {\n    const s = up[Math.floor(sporeRandom(P) * up.length)];\n    const c = s.caps[Math.floor(sporeRandom(P) * s.caps.length)];\n    const side = s.side === 0;\n    P.spores.push({\n      x: side ? s.x + c.bx + c.lean * c.h + (sporeRandom(P) - 0.5) * 2 * c.r : s.x + s.side * c.r * sporeRandom(P),\n      y: side ? c.foot - c.h - 1 : s.y + c.by + 1,\n      v: 1.6 + 2.6 * sporeRandom(P),\n      age: 0,\n      life: 9 + 9 * sporeRandom(P),\n      ph: 6.28 * sporeRandom(P),\n      w: 0,\n    });\n  }\n}\n\nfunction world(P, wdt, spores) {\n  P.T += wdt;\n  const T = P.T;\n  // Threads creep.\n  while (P.tips.length \u003c TIPS) sprout(P);\n  P.tips = P.tips.filter((t) => {\n    for (t.acc += wdt * t.rate; t.acc >= 1; t.acc--) if (!creep(P, t)) return false;\n    return true;\n  });\n  // Old threads rot away, a few times a second.\n  P.sweep += wdt;\n  if (P.sweep > 0.2) {\n    P.sweep = 0;\n    const { occ, dies } = P;\n    for (let p = 0; p \u003c N; p++) if (occ[p] && dies[p] \u003c T) occ[p] = 0;\n  }\n  // Each cluster's life: up over the first eighth, glowing, then withering.\n  for (const s of P.sites) {\n    const u = ((T + s.offset) % s.period) / s.period;\n    s.life = u \u003c 0.12 ? smooth(0, 0.12, u) : u \u003c 0.74 ? 1 : 1 - smooth(0.74, 0.88, u);\n    s.glow = s.life * (0.62 + 0.38 * Math.sin((T * 6.283) / s.beat + s.phase));\n  }\n  // Spores rise, sway and fade.\n  P.owed += wdt * (6 + 75 * spores);\n  const n = Math.floor(P.owed);\n  P.owed -= n;\n  shed(P, n);\n  P.spores = P.spores.filter((m) => {\n    m.age += wdt;\n    m.y -= m.v * wdt;\n    m.x += wdt * (1.1 * Math.sin(T * 0.5 + m.ph) + 0.3 * Math.sin(m.y * 0.1));\n    m.w = Math.min(1, m.age / 1.5) * clamp((m.life - m.age) / 3, 0, 1);\n    return m.age \u003c m.life && m.y > -2 && m.x > -2 && m.x \u003c W + 1;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const speed = clamp(k[1], 0.1, 4) / 2;\n  const spores = clamp(k[2], 0, 1);\n  P.damp = clamp(k[3], 0, 1);\n  P.spore = spores;\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    hueOf(k[0], P.col);\n  }\n  if (!P.started) {\n    P.started = true;\n    for (let t = 0; t \u003c PRE; t += PRE_DT) world(P, PRE_DT, spores);\n  }\n  if (input.btnPressed && input.btnPressed[0]) shed(P, 160);\n  world(P, dt * speed, spores);\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.G) return;\n  const { G, kind, rot, occ, dist, born, dies, base, haze } = P;\n  const T = P.T;\n  const damp = P.damp;\n  const gain = 0.8 + 0.7 * damp;\n  // Rotten wood glows where it is wet enough, breathing slowly.\n  const edge = 0.45 - 0.3 * damp;\n  for (let p = 0; p \u003c N; p++) {\n    const r = rot[p];\n    if (r \u003c= edge) {\n      G[p] = 0;\n      continue;\n    }\n    const x = p % W;\n    const y = (p / W) | 0;\n    const breath = 0.55 + 0.45 * Math.sin(x * 0.16 - T * 0.6 + 0.8 * Math.sin(y * 0.07 + T * 0.3));\n    G[p] = 0.5 * smooth(edge, edge + 0.45, r) * breath;\n  }\n  // The threads: dim along their length, a pulse running out along each, and\n  // the growing tip bright.\n  const kw = 6.283 / WAVE;\n  const om = kw * RUN;\n  for (let p = 0; p \u003c N; p++) {\n    if (!occ[p]) continue;\n    const age = T - born[p];\n    const left = dies[p] - T;\n    const fade = Math.min(1, age / 0.5) * clamp(left / 4, 0, 1);\n    let c = 0.5 + 0.5 * Math.cos(dist[p] * kw - T * om);\n    c = c * c * c;\n    const soil = kind[p] === SOIL || kind[p] === LITTER ? 0.8 : 1;\n    G[p] += fade * soil * (0.2 + 0.55 * c) + (age \u003c 1 ? 0.5 * (1 - age) : 0);\n  }\n  for (const t of P.tips) G[Math.round(t.y) * W + Math.round(t.x)] += 0.55;\n  // The spore haze: each spore counts into the grid, which is spread back\n  // over the LEDs smoothly.\n  haze.fill(0);\n  for (const m of P.spores) {\n    const fx = m.x / 4;\n    const fy = m.y / 4;\n    const ix = Math.floor(fx);\n    const iy = Math.floor(fy);\n    if (ix \u003c 0 || iy \u003c 0 || ix >= HW - 1 || iy >= HH - 1) continue;\n    const u = fx - ix;\n    const v = fy - iy;\n    const w = m.w;\n    const q = iy * HW + ix;\n    haze[q] += w * (1 - u) * (1 - v);\n    haze[q + 1] += w * u * (1 - v);\n    haze[q + HW] += w * (1 - u) * v;\n    haze[q + HW + 1] += w * u * v;\n  }\n  const hk = 0.045 + 0.035 * P.spore;\n  for (let y = 0; y \u003c H; y++) {\n    const fy = y / 4;\n    const iy = Math.min(HH - 2, Math.floor(fy));\n    const v = fy - iy;\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / 4;\n      const ix = Math.min(HW - 2, Math.floor(fx));\n      const u = fx - ix;\n      const q = iy * HW + ix;\n      const d = (haze[q] * (1 - u) + haze[q + 1] * u) * (1 - v) + (haze[q + HW] * (1 - u) + haze[q + HW + 1] * u) * v;\n      if (d > 0) G[y * W + x] += hk * Math.min(d, 5);\n    }\n  }\n  // Each spore itself, a mote caught in the glow.\n  for (const m of P.spores) {\n    const x = Math.round(m.x);\n    const y = Math.round(m.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) G[y * W + x] += 0.3 * m.w * (0.6 + 0.4 * Math.sin(T * 3 + m.ph * 5));\n  }\n  // The clusters: a soft halo on the wood round them, then stems and caps.\n  for (const s of P.sites) {\n    if (s.life \u003c= 0) continue;\n    const g = s.glow;\n    const cy = s.side === 0 ? s.y - s.tall * 0.6 : s.y;\n    const cx = s.x + s.side * 2;\n    for (let y = Math.max(0, Math.floor(cy - 9)); y \u003c= Math.min(H - 1, cy + 9); y++)\n      for (let x = Math.max(0, Math.floor(cx - 9)); x \u003c= Math.min(W - 1, cx + 9); x++) {\n        const d2 = (x - cx) ** 2 + (y - cy) ** 2;\n        if (d2 \u003c 81) G[y * W + x] += 0.2 * g * (1 - d2 / 81) ** 2;\n      }\n    for (const c of s.caps) {\n      if (s.side === 0) {\n        const h = c.h * s.life;\n        for (let j = 0; j \u003c= h; j++) {\n          const x = Math.round(s.x + c.bx + c.lean * j);\n          const y = c.foot - j;\n          if (x >= 0 && x \u003c W && y >= 0) G[y * W + x] += 0.32 * g;\n        }\n        const tx = s.x + c.bx + c.lean * h;\n        const ty = c.foot - Math.round(h) - 1;\n        const r = c.r * (0.4 + 0.6 * s.life);\n        // A Mycena cap is a little bell: one LED at the top, wider at the rim.\n        for (let row = 0; row \u003c= c.r; row++) {\n          const half = row === c.r ? r + 0.4 : (r * row) / c.r;\n          const y = ty - c.r + row;\n          if (y \u003c 0 || y >= H) continue;\n          for (let x = Math.round(tx - half); x \u003c= Math.round(tx + half); x++)\n            if (x >= 0 && x \u003c W) G[y * W + x] += g * (row === c.r ? 1.15 : 0.85);\n        }\n      } else {\n        // A Panellus shelf: a thin bracket out of the wood, its top dim and\n        // the gills under it bright, the rim bent down.\n        const r = Math.round(c.r * (0.4 + 0.6 * s.life));\n        const y0 = Math.round(s.y + c.by);\n        for (let i = 0; i \u003c= r; i++) {\n          const x = Math.round(s.x + s.side * i);\n          if (x \u003c 0 || x >= W) continue;\n          if (i \u003c r - 1 && y0 > 0) G[(y0 - 1) * W + x] += 0.45 * g;\n          if (y0 >= 0 && y0 \u003c H) G[y0 * W + x] += 0.75 * g;\n          if (i > 0 && i \u003c r && y0 + 1 \u003c H) G[(y0 + 1) * W + x] += 1.25 * g;\n        }\n      }\n    }\n  }\n  // Light the floor: the dark as it was painted, plus the glow in the Glow\n  // colour, running toward white where it is brightest.\n  const C = P.col;\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    const g = G[p] * gain;\n    let r = base[q];\n    let gg = base[q + 1];\n    let b = base[q + 2];\n    if (g > 0) {\n      const v = g * 255;\n      const w = g > 0.7 ? (g - 0.7) * 170 : 0;\n      r += v * C[0] + w;\n      gg += v * C[1] + w;\n      b += v * C[2] + w;\n    }\n    display.setPixel(p % W, (p / W) | 0, byte(r), byte(gg), byte(b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Glow=0..1, Speed=0.2..3, Spores=0..1, Damp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Glow","min":0,"max":1,"about":"The colour of the light, from the yellow-green of foxfire at 0 through a clear green to a cold blue-green at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the floor lives: at 2 a thread tip creeps about three LEDs a second, a pulse runs seven LEDs a second and a mushroom cluster comes and goes in about forty seconds; at 0.2 all of it runs ten times slower."},{"name":"Spores","min":0,"max":1,"about":"How hard the caps shed: at 0 a few motes rise from each cluster; turned up, the spores thicken into a lit haze that climbs past the stump into the top of the panel."},{"name":"Damp","min":0,"max":1,"about":"How wet the wood is; wet foxfire glows harder, so turning it up brightens the threads and the caps and lights more of the rotten wood round them."}],"start":[0,2,0,0.06],"measures":{"motion":0.0552,"detail":0.062,"edges":0.4422,"complexity":2.0011,"coverage":0.1963,"colour":0.1249,"drift":0.0326},"knobResponse":[0.0328,0.0383,0.0467,0.0368]},{"slug":"frost","title":"Frost","family":"fractal","round":17,"note":"밤 유리창에 서리 고사리가 아래 틀과 창틀에서 자라 들어와요. 가지는 대각선으로 곧게 뻗어 깃털처럼 곁가지를 내며 반짝이고, 유리 너머로 가로등과 눈발이 흐리게 비치다가 방이 데워지면 가운데부터 녹아 다시 자라요. K1 을 누르면 입김이 가운데를 닦아요.","idea":"Frost ferns grow across a dark window pane at night from the sill and the frame, feathery and glittering, while a street lamp and falling snow glow dimly through the glass; then the room warms, the middle of the pane thaws, and the cold draws the ferns in again.","buttons":"K1 tap breathes on the glass: a round patch in the middle clears, wet for a moment, and the ferns grow back into it from its rim.","code":"// ===== Patternflow pattern =====\n// Title:   Frost\n// Family:  fractal\n// Idea:    Frost ferns grow across a dark window pane at night from the sill and the frame, feathery and glittering, while a street lamp and falling snow glow dimly through the glass; then the room warms, the middle of the pane thaws, and the cold draws the ferns in again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: diffusion-limited aggregation (Witten and Sander, 1981), after fern frost on a single-glazed window\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Rime=0..1, Glitter=0..1\n//\n// Knob 1: Lamp. The street light behind the glass, from a sodium lamp's amber through warm and cold white to a mercury lamp's blue-green and a pink shop sign; the snow clouds, the street and the frost near the lamp take its colour.\n// Knob 2: Speed. How fast the frost grows: at 2 about forty crystals freeze each second and the pane is frosted over 17 seconds after the panel opens; at 0.2 the ferns have only begun.\n// Knob 3: Rime. How readily vapour sticks where it touches the frost: at 0 every touch counts and the ferns grow thin and feathery; turned up, most touches bounce off and wander deeper in, and the frost packs into a dense white crust along the frame.\n// Knob 4: Glitter. How hard the crystal faces flash as they turn to the light, from a matte frost to every fern sparkling.\n// Buttons: K1 tap breathes on the glass: a round patch in the middle clears, wet for a moment, and the ferns grow back into it from its rim.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The distance to the nearest frost, in LEDs (the larger of the two axis\n// steps), is kept for every LED up to this far. A walker that far out can\n// jump that far in one go without passing any frost.\nconst CAP = 9;\n// A walker starts only where the frost is at least this far off. When none\n// can, the pane is full.\nconst LAUNCH = 4;\n// Hits an LED next to the frost takes before it freezes. One is Witten and\n// Sander's rule, and its ferns wander like lichen; three average out the\n// walkers' noise, the way Nittmann and Stanley grew snowflakes in 1986, and\n// the ferns run straight along the diagonals with side branches like a feather.\nconst HITS = 3;\n// Crystals frozen each second at Speed 1.\nconst RATE = 21;\n// Seconds of growth the pane has had when the panel opens.\nconst PRE = 15;\n// Walker steps a frame may spend; a walker left over carries on next frame.\nconst BUDGET = 9000;\n// The street lamp's head, seen through the glass in the middle of the pane,\n// where the frost reaches last.\nconst LX = 34;\nconst LY = 44;\n// The lamps K1 runs through: sodium amber, warm white, cold white, mercury\n// blue-green, a pink sign.\nconst LAMPS = [\n  [255, 140, 24],\n  [255, 196, 120],\n  [150, 190, 255],\n  [100, 255, 210],\n  [255, 60, 190],\n];\n// The ice: a cold blue-white.\nconst ICE = [105, 165, 255];\nconst FLAKES = 46;\n// Lit windows in the houses across the road.\nconst WINDOWS = [\n  [10, 86],\n  [53, 90],\n];\n// The glass's own grain: each LED of the street seen through it is off by up\n// to half this, channel by channel.\nconst GRAIN = 9;\n\n// Seconds the full pane holds before the room warms, the seconds the thaw\n// takes, and how far it reaches: 0 is the middle of the pane, 1 the middle\n// of each side.\nconst HOLD_S = 4;\nconst MELT_S = 6;\nconst THAW = 0.85;\n\nconst GROW = 0;\nconst HOLD = 1;\nconst MELT = 2;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction lampColour(k, out) {\n  const u = clamp(k, 0, 1) * (LAMPS.length - 1);\n  const i = Math.min(LAMPS.length - 2, Math.floor(u));\n  const f = u - i;\n  for (let c = 0; c \u003c 3; c++) out[c] = (LAMPS[i][c] * (1 - f) + LAMPS[i + 1][c] * f) / 255;\n}\n\n// Freeze one LED: mark it and pull the distance field in round it.\nfunction freeze(P, p) {\n  const { frost, dist } = P;\n  frost[p] = 1;\n  P.born[p] = P.clock;\n  const x0 = p % W;\n  const y0 = (p / W) | 0;\n  const ya = Math.max(0, y0 - CAP);\n  const yb = Math.min(H - 1, y0 + CAP);\n  const xa = Math.max(0, x0 - CAP);\n  const xb = Math.min(W - 1, x0 + CAP);\n  for (let y = ya; y \u003c= yb; y++) {\n    const dy = y > y0 ? y - y0 : y0 - y;\n    const row = y * W;\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x > x0 ? x - x0 : x0 - x;\n      const d = dx > dy ? dx : dy;\n      if (d \u003c dist[row + x]) dist[row + x] = d;\n    }\n  }\n}\n\n// The whole distance field again, after frost melts: two passes over the pane.\nfunction measureDistance(P) {\n  const { frost, dist } = P;\n  for (let p = 0; p \u003c N; p++) dist[p] = frost[p] ? 0 : CAP;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let d = dist[p];\n      if (d === 0) continue;\n      if (x > 0) d = Math.min(d, dist[p - 1] + 1);\n      if (y > 0) {\n        d = Math.min(d, dist[p - W] + 1);\n        if (x > 0) d = Math.min(d, dist[p - W - 1] + 1);\n        if (x \u003c W - 1) d = Math.min(d, dist[p - W + 1] + 1);\n      }\n      dist[p] = d;\n    }\n  for (let y = H - 1; y >= 0; y--)\n    for (let x = W - 1; x >= 0; x--) {\n      const p = y * W + x;\n      let d = dist[p];\n      if (d === 0) continue;\n      if (x \u003c W - 1) d = Math.min(d, dist[p + 1] + 1);\n      if (y \u003c H - 1) {\n        d = Math.min(d, dist[p + W] + 1);\n        if (x > 0) d = Math.min(d, dist[p + W - 1] + 1);\n        if (x \u003c W - 1) d = Math.min(d, dist[p + W + 1] + 1);\n      }\n      dist[p] = d;\n    }\n}\n\n// The frame is cold first: the sill along the bottom freezes all along, the\n// sides here and there below row 36, the top in a few places.\nfunction seed(P) {\n  P.frost.fill(0);\n  P.hits.fill(0);\n  P.dist.fill(CAP);\n  for (let x = 0; x \u003c W; x++) freeze(P, (H - 1) * W + x);\n  for (let y = H - 2; y > 36; y -= 3 + Math.floor(Math.random() * 6)) freeze(P, y * W);\n  for (let y = H - 2; y > 36; y -= 3 + Math.floor(Math.random() * 6)) freeze(P, y * W + W - 1);\n  for (let x = 2; x \u003c W - 2; x += 9 + Math.floor(Math.random() * 14)) freeze(P, x);\n  P.walking = false;\n}\n\n// A walker starts anywhere on the glass at least LAUNCH from the frost.\nfunction launch(P) {\n  const dist = P.dist;\n  for (let tries = 0; tries \u003c 200; tries++) {\n    const x = Math.floor(Math.random() * W);\n    const y = Math.floor(Math.random() * H);\n    if (dist[y * W + x] >= LAUNCH) {\n      P.wx = x;\n      P.wy = y;\n      P.walking = true;\n      return true;\n    }\n  }\n  return false;\n}\n\n// Vapour as random walkers, one at a time, until `want` crystals have frozen\n// or the step budget runs out. Returns false when no walker can start: the\n// pane is full.\nfunction walk(P, want, stick, budget) {\n  const dist = P.dist;\n  const frost = P.frost;\n  let made = 0;\n  let x = P.wx;\n  let y = P.wy;\n  while (made \u003c want && budget > 0) {\n    if (!P.walking) {\n      if (!launch(P)) return false;\n      x = P.wx;\n      y = P.wy;\n    }\n    budget--;\n    const p = y * W + x;\n    const d = dist[p];\n    if (d === 1 && Math.random() \u003c stick) {\n      if (++P.hits[p] >= HITS) {\n        freeze(P, p);\n        made++;\n      }\n      P.walking = false;\n      continue;\n    }\n    if (d >= 3) {\n      // Far from the frost: land anywhere on the square ring d - 1 out, which\n      // the walk would have to cross anyway.\n      const r = d - 1;\n      const s = Math.floor(Math.random() * 8 * r);\n      const side = (s / (2 * r)) | 0;\n      const o = (s % (2 * r)) - r;\n      if (side === 0) {\n        x += o;\n        y -= r;\n      } else if (side === 1) {\n        x += r;\n        y += o;\n      } else if (side === 2) {\n        x -= o;\n        y += r;\n      } else {\n        x -= r;\n        y -= o;\n      }\n    } else {\n      const s = Math.floor(Math.random() * 4);\n      let nx = x + (s === 0 ? 1 : s === 1 ? -1 : 0);\n      let ny = y + (s === 2 ? 1 : s === 3 ? -1 : 0);\n      if (nx \u003c 0) nx = 1;\n      if (nx >= W) nx = W - 2;\n      if (ny \u003c 0) ny = 1;\n      if (ny >= H) ny = H - 2;\n      if (!frost[ny * W + nx]) {\n        x = nx;\n        y = ny;\n      }\n    }\n    if (x \u003c 0) x = -x;\n    if (x >= W) x = 2 * (W - 1) - x;\n    if (y \u003c 0) y = -y;\n    if (y >= H) y = 2 * (H - 1) - y;\n    x = clamp(x, 0, W - 1);\n    y = clamp(y, 0, H - 1);\n  }\n  P.wx = x;\n  P.wy = y;\n  return true;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frost = new Uint8Array(N);\n  P.hits = new Uint8Array(N);\n  P.dist = new Uint8Array(N);\n  P.born = new Float32Array(N);\n  P.thaw = new Float32Array(N);\n  P.bg = new Float32Array(N * 3);\n  P.base = new Float32Array(N * 3);\n  // Each LED of the pane has its own crystal face: how much light it sends\n  // back, a tint per channel, and a time when it flashes.\n  P.facet = new Float32Array(N);\n  P.tint = new Float32Array(N * 3);\n  P.spin = new Float32Array(N);\n  P.phase = new Float32Array(N);\n  P.grain = new Float32Array(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    P.facet[p] = hash(p, 1);\n    for (let c = 0; c \u003c 3; c++) {\n      P.tint[p * 3 + c] = 0.86 + 0.28 * hash(p, 2 + c);\n      P.grain[p * 3 + c] = hash(p, 5 + c) - 0.5;\n    }\n    P.spin[p] = 2 + 7 * hash(p, 8);\n    P.phase[p] = 6.283 * hash(p, 9);\n  }\n  // What the lamp does at each LED: how much of it the ice scatters back, how\n  // far the film between the ferns spreads it, and the lamp's own head.\n  P.lit = new Float32Array(N);\n  P.haze = new Float32Array(N);\n  P.core = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const d2 = ((p % W) - LX) ** 2 + (((p / W) | 0) - LY) ** 2;\n    P.lit[p] = Math.exp(-d2 / 1500);\n    P.haze[p] = Math.exp(-d2 / 4500);\n    P.core[p] = 235 * Math.exp(-d2 / 5);\n  }\n  P.fx = new Float32Array(FLAKES);\n  P.fy = new Float32Array(FLAKES);\n  P.fz = new Float32Array(FLAKES);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    P.fx[i] = Math.random() * W;\n    P.fy[i] = Math.random() * H;\n    P.fz[i] = 0.4 + 0.6 * Math.random();\n  }\n  P.lamp = new Float32Array(3);\n  Object.assign(P, { clock: 0, owed: 0, phaseOf: GROW, timer: 0, wx: 0, wy: 0, walking: false, started: false, baked: -1 });\n  seed(P);\n}\n\nfunction startMelt(P) {\n  P.phaseOf = MELT;\n  P.timer = 0;\n  // The room warms the middle of the pane first: the frost melts from there\n  // out toward the frame, and the corners and the sill keep theirs.\n  const { frost, thaw } = P;\n  for (let p = 0; p \u003c N; p++) {\n    if (!frost[p]) continue;\n    const x = (p % W) - 32;\n    const y = ((p / W) | 0) - 58;\n    thaw[p] = Math.sqrt((x / 32) ** 2 + (y / 66) ** 2) + 0.2 * hash(p, 11);\n  }\n}\n\nfunction step(P, dt, speed, stick) {\n  P.clock += dt;\n  if (P.phaseOf === GROW) {\n    P.owed += RATE * speed * (1 + 1.5 * P.rime) * dt;\n    const want = Math.floor(P.owed);\n    P.owed -= want;\n    if (want > 0 && !walk(P, want, stick, BUDGET)) {\n      P.phaseOf = HOLD;\n      P.timer = 0;\n    }\n  } else if (P.phaseOf === HOLD) {\n    P.timer += dt;\n    if (P.timer > HOLD_S) startMelt(P);\n  } else {\n    P.timer += dt;\n    const front = THAW * smooth(0, MELT_S, P.timer);\n    const { frost, thaw } = P;\n    let changed = false;\n    for (let p = 0; p \u003c N; p++)\n      if (frost[p] && thaw[p] \u003c front) {\n        frost[p] = 0;\n        P.born[p] = P.clock;\n        changed = true;\n      }\n    if (changed) measureDistance(P);\n    if (P.timer > MELT_S + 0.5) {\n      // The cold comes back and the ferns grow in again from what is left.\n      P.phaseOf = GROW;\n      P.hits.fill(0);\n      P.walking = false;\n    }\n  }\n}\n\nfunction breathe(P) {\n  // A warm breath on the middle of the pane: a ragged round patch clears.\n  const { frost } = P;\n  const cx = 32;\n  const cy = 60;\n  for (let p = 0; p \u003c N; p++) {\n    if (!frost[p]) continue;\n    const x = p % W;\n    const y = (p / W) | 0;\n    const r = Math.sqrt((x - cx) ** 2 + ((y - cy) * 0.8) ** 2);\n    if (r \u003c 22 + 4 * hash(p, 12)) {\n      frost[p] = 0;\n      P.born[p] = P.clock;\n    }\n  }\n  measureDistance(P);\n  P.walking = false;\n  if (P.phaseOf !== GROW) P.phaseOf = GROW;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const speed = clamp(k[1], 0.1, 4);\n  const rime = clamp(k[2], 0, 1);\n  P.rime = rime;\n  // The chance a walker that touches the frost freezes there.\n  const stick = 1 - 0.95 * Math.sqrt(rime);\n  P.glitter = clamp(k[3], 0, 1);\n  if (Math.abs(P.baked - k[0]) > 0.002) {\n    lampColour(k[0], P.lamp);\n    bake(P, k[0]);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The pane has been freezing for fifteen seconds of Speed when the panel\n    // opens, so the knobs have already shaped the frost.\n    const n = Math.round(PRE * RATE * speed * (1 + 1.5 * rime));\n    walk(P, n, stick, 1e9);\n    P.clock = 0;\n    for (let p = 0; p \u003c N; p++) P.born[p] = -9;\n  }\n  if (input.btnPressed && input.btnPressed[0]) breathe(P);\n  step(P, dt, speed, stick);\n  // Snow outside, falling past the lamp.\n  for (let i = 0; i \u003c FLAKES; i++) {\n    P.fy[i] += dt * (5 + 9 * P.fz[i]);\n    P.fx[i] += dt * (1.2 * Math.sin(P.clock * 0.7 + i) + 0.8);\n    if (P.fy[i] > H + 3) {\n      P.fy[i] = -3;\n      P.fx[i] = Math.random() * W;\n    }\n    if (P.fx[i] > W + 3) P.fx[i] -= W + 6;\n  }\n}\n\n// The street behind the glass, out of focus: snow clouds, the roofs across\n// the road with two windows lit, the lamp's glow and its pool on the snow.\n// It is drawn again only when the lamp changes.\nfunction bake(P, key) {\n  const base = P.base;\n  const L = P.lamp;\n  const grain = P.grain;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const roofY = 74 + 3 * Math.sin(x * 0.13 + 1) - 10 * smooth(8, 12, x) * (1 - smooth(22, 26, x)) - 6 * smooth(44, 47, x);\n      const dx = x - LX;\n      const dy = y - LY;\n      const d2 = dx * dx + dy * dy;\n      let r;\n      let g;\n      let b;\n      if (y \u003c roofY) {\n        // Snow clouds hang low and give back the street lights: navy\n        // overhead, the lamp's own colour down at the roofs.\n        const h = smooth(0, roofY, y);\n        const glow = 4 + 15 * h * h;\n        r = 3 * (1 - h) + glow * L[0];\n        g = 5 * (1 - h) + glow * L[1];\n        b = 15 * (1 - h) + glow * L[2];\n        // Snow lies along the roof edges.\n        const lip = Math.exp(-((y - roofY + 1.5) ** 2) / 2);\n        r += 8 * lip;\n        g += 9 * lip;\n        b += 11 * lip;\n      } else if (y \u003c 102) {\n        // The houses opposite, dark, with two windows lit by the rooms inside.\n        let win = 0;\n        for (const [wx, wy] of WINDOWS) {\n          const u = (x - wx) / 3.2;\n          const v = (y - wy) / 4;\n          win += Math.exp(-(u * u + v * v) * 2);\n        }\n        r = 3 + 4 * L[0] + 17 * win;\n        g = 3 + 4 * L[1] + 12 * win;\n        b = 5 + 4 * L[2] + 5 * win;\n      } else {\n        // Snow on the street, in a pool of light under the lamp.\n        const pool = Math.exp(-(dx * dx) / 260 - ((y - 114) ** 2) / 180);\n        r = 3 + (9 + 12 * pool) * L[0];\n        g = 4 + (9 + 12 * pool) * L[1];\n        b = 6 + (9 + 12 * pool) * L[2];\n      }\n      // The lamp's glow through the glass.\n      const glow = 16 / (1 + d2 / 50);\n      r += glow * L[0];\n      g += glow * L[1];\n      b += glow * L[2];\n      // Its pole, dark against the glow.\n      if (x >= LX - 1 && x \u003c= LX && y > LY + 2 && y \u003c 106) {\n        r *= 0.45;\n        g *= 0.45;\n        b *= 0.45;\n      }\n      base[p * 3] = r + GRAIN * grain[p * 3];\n      base[p * 3 + 1] = g + GRAIN * grain[p * 3 + 1];\n      base[p * 3 + 2] = b + GRAIN * grain[p * 3 + 2];\n    }\n  P.baked = key;\n}\n\n// Flakes falling past the window, soft and dim, brighter as they pass the lamp.\nfunction paintSnow(P) {\n  const bg = P.bg;\n  const L = P.lamp;\n  bg.set(P.base);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    const fx = P.fx[i];\n    const fy = P.fy[i];\n    const near = Math.exp(-((fx - LX) ** 2 + (fy - LY) ** 2) / 500);\n    const v = (4 + 10 * near) * P.fz[i];\n    const xa = Math.max(0, Math.floor(fx - 2));\n    const xb = Math.min(W - 1, Math.ceil(fx + 2));\n    const ya = Math.max(0, Math.floor(fy - 2));\n    const yb = Math.min(H - 1, Math.ceil(fy + 2));\n    for (let y = ya; y \u003c= yb; y++)\n      for (let x = xa; x \u003c= xb; x++) {\n        const w = v * Math.exp(-((x - fx) ** 2 + (y - fy) ** 2) / 1.6);\n        const q = (y * W + x) * 3;\n        bg[q] += w * (0.7 + 0.3 * L[0]);\n        bg[q + 1] += w * (0.7 + 0.3 * L[1]);\n        bg[q + 2] += w * (0.8 + 0.2 * L[2]);\n      }\n  }\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.bg) return;\n  paintSnow(P);\n  const { bg, frost, dist, facet, tint, born, spin, phase, lamp, lit, haze, core } = P;\n  const t = P.clock;\n  const gl = P.glitter;\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    let r = bg[q];\n    let g = bg[q + 1];\n    let b = bg[q + 2];\n    // The street stays under 24 everywhere but the lamp itself.\n    const m = r > g ? (r > b ? r : b) : g > b ? g : b;\n    if (m > 22) {\n      r *= 22 / m;\n      g *= 22 / m;\n      b *= 22 / m;\n    }\n    const f = facet[p];\n    const d = dist[p];\n    let sparkle = 1;\n    if (d \u003c= 1 && gl > 0) {\n      // Glitter: each face turns to the light and away again on its own beat.\n      const s = Math.sin(t * spin[p] + phase[p]);\n      sparkle = 1 - 0.6 * gl + (s > 0 ? 2.4 * gl * s * s * s : 0);\n    }\n    if (frost[p]) {\n      // A crystal just frozen flashes, then settles.\n      const age = t - born[p];\n      const v = (0.45 + 0.5 * f) * (age \u003c 0.5 ? 1.7 - 1.4 * age : 1) * sparkle;\n      // The brightest faces run white; near the lamp the ice is its colour.\n      const w = 90 * f * f * f * f * v;\n      const a = 280 * lit[p] * v;\n      r = (ICE[0] * v + a * lamp[0] + w) * tint[q];\n      g = (ICE[1] * v + a * lamp[1] + w) * tint[q + 1];\n      b = (ICE[2] * v + a * lamp[2] + w) * tint[q + 2];\n    } else {\n      // The lamp's head, where no frost hides it.\n      const c0 = core[p];\n      if (c0 > 0.5) {\n        r += c0 * lamp[0];\n        g += c0 * lamp[1];\n        b += c0 * lamp[2];\n      }\n      // Where frost has just melted the glass is wet for a moment.\n      const wet = t - born[p];\n      if (wet >= 0 && wet \u003c 1.5) {\n        const e = (1 - wet / 1.5) * (0.3 + f);\n        r += 30 * e;\n        g += 44 * e;\n        b += 60 * e;\n      }\n      if (d \u003c= 2) {\n        // A film of hoar frost round the ferns, lit one step out and kept\n        // under 24 the next. It scatters the lamp's light farther than the\n        // ferns do.\n        const near = d === 1;\n        const film = (near ? 0.17 * sparkle : 0.06) * (0.6 + 0.8 * f);\n        const hz = haze[p];\n        const c = 1 - 0.6 * hz;\n        const keep = near ? 0.5 : 0.7;\n        r = keep * r + (ICE[0] * c + 300 * hz * lamp[0]) * film;\n        g = keep * g + (ICE[1] * c + 300 * hz * lamp[1]) * film;\n        b = keep * b + (ICE[2] * c + 300 * hz * lamp[2]) * film;\n        if (!near) {\n          const n = r > g ? (r > b ? r : b) : g > b ? g : b;\n          if (n > 23) {\n            r *= 23 / n;\n            g *= 23 / n;\n            b *= 23 / n;\n          }\n        }\n      }\n    }\n    display.setPixel(p % W, (p / W) | 0, byte(r), byte(g), byte(b));\n  }\n}\n","layer":{"id":"layer-frost","type":"code","name":"frost","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Frost\n// Family:  fractal\n// Idea:    Frost ferns grow across a dark window pane at night from the sill and the frame, feathery and glittering, while a street lamp and falling snow glow dimly through the glass; then the room warms, the middle of the pane thaws, and the cold draws the ferns in again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: diffusion-limited aggregation (Witten and Sander, 1981), after fern frost on a single-glazed window\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Rime=0..1, Glitter=0..1\n//\n// Knob 1: Lamp. The street light behind the glass, from a sodium lamp's amber through warm and cold white to a mercury lamp's blue-green and a pink shop sign; the snow clouds, the street and the frost near the lamp take its colour.\n// Knob 2: Speed. How fast the frost grows: at 2 about forty crystals freeze each second and the pane is frosted over 17 seconds after the panel opens; at 0.2 the ferns have only begun.\n// Knob 3: Rime. How readily vapour sticks where it touches the frost: at 0 every touch counts and the ferns grow thin and feathery; turned up, most touches bounce off and wander deeper in, and the frost packs into a dense white crust along the frame.\n// Knob 4: Glitter. How hard the crystal faces flash as they turn to the light, from a matte frost to every fern sparkling.\n// Buttons: K1 tap breathes on the glass: a round patch in the middle clears, wet for a moment, and the ferns grow back into it from its rim.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The distance to the nearest frost, in LEDs (the larger of the two axis\n// steps), is kept for every LED up to this far. A walker that far out can\n// jump that far in one go without passing any frost.\nconst CAP = 9;\n// A walker starts only where the frost is at least this far off. When none\n// can, the pane is full.\nconst LAUNCH = 4;\n// Hits an LED next to the frost takes before it freezes. One is Witten and\n// Sander's rule, and its ferns wander like lichen; three average out the\n// walkers' noise, the way Nittmann and Stanley grew snowflakes in 1986, and\n// the ferns run straight along the diagonals with side branches like a feather.\nconst HITS = 3;\n// Crystals frozen each second at Speed 1.\nconst RATE = 21;\n// Seconds of growth the pane has had when the panel opens.\nconst PRE = 15;\n// Walker steps a frame may spend; a walker left over carries on next frame.\nconst BUDGET = 9000;\n// The street lamp's head, seen through the glass in the middle of the pane,\n// where the frost reaches last.\nconst LX = 34;\nconst LY = 44;\n// The lamps K1 runs through: sodium amber, warm white, cold white, mercury\n// blue-green, a pink sign.\nconst LAMPS = [\n  [255, 140, 24],\n  [255, 196, 120],\n  [150, 190, 255],\n  [100, 255, 210],\n  [255, 60, 190],\n];\n// The ice: a cold blue-white.\nconst ICE = [105, 165, 255];\nconst FLAKES = 46;\n// Lit windows in the houses across the road.\nconst WINDOWS = [\n  [10, 86],\n  [53, 90],\n];\n// The glass's own grain: each LED of the street seen through it is off by up\n// to half this, channel by channel.\nconst GRAIN = 9;\n\n// Seconds the full pane holds before the room warms, the seconds the thaw\n// takes, and how far it reaches: 0 is the middle of the pane, 1 the middle\n// of each side.\nconst HOLD_S = 4;\nconst MELT_S = 6;\nconst THAW = 0.85;\n\nconst GROW = 0;\nconst HOLD = 1;\nconst MELT = 2;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction lampColour(k, out) {\n  const u = clamp(k, 0, 1) * (LAMPS.length - 1);\n  const i = Math.min(LAMPS.length - 2, Math.floor(u));\n  const f = u - i;\n  for (let c = 0; c \u003c 3; c++) out[c] = (LAMPS[i][c] * (1 - f) + LAMPS[i + 1][c] * f) / 255;\n}\n\n// Freeze one LED: mark it and pull the distance field in round it.\nfunction freeze(P, p) {\n  const { frost, dist } = P;\n  frost[p] = 1;\n  P.born[p] = P.clock;\n  const x0 = p % W;\n  const y0 = (p / W) | 0;\n  const ya = Math.max(0, y0 - CAP);\n  const yb = Math.min(H - 1, y0 + CAP);\n  const xa = Math.max(0, x0 - CAP);\n  const xb = Math.min(W - 1, x0 + CAP);\n  for (let y = ya; y \u003c= yb; y++) {\n    const dy = y > y0 ? y - y0 : y0 - y;\n    const row = y * W;\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x > x0 ? x - x0 : x0 - x;\n      const d = dx > dy ? dx : dy;\n      if (d \u003c dist[row + x]) dist[row + x] = d;\n    }\n  }\n}\n\n// The whole distance field again, after frost melts: two passes over the pane.\nfunction measureDistance(P) {\n  const { frost, dist } = P;\n  for (let p = 0; p \u003c N; p++) dist[p] = frost[p] ? 0 : CAP;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let d = dist[p];\n      if (d === 0) continue;\n      if (x > 0) d = Math.min(d, dist[p - 1] + 1);\n      if (y > 0) {\n        d = Math.min(d, dist[p - W] + 1);\n        if (x > 0) d = Math.min(d, dist[p - W - 1] + 1);\n        if (x \u003c W - 1) d = Math.min(d, dist[p - W + 1] + 1);\n      }\n      dist[p] = d;\n    }\n  for (let y = H - 1; y >= 0; y--)\n    for (let x = W - 1; x >= 0; x--) {\n      const p = y * W + x;\n      let d = dist[p];\n      if (d === 0) continue;\n      if (x \u003c W - 1) d = Math.min(d, dist[p + 1] + 1);\n      if (y \u003c H - 1) {\n        d = Math.min(d, dist[p + W] + 1);\n        if (x > 0) d = Math.min(d, dist[p + W - 1] + 1);\n        if (x \u003c W - 1) d = Math.min(d, dist[p + W + 1] + 1);\n      }\n      dist[p] = d;\n    }\n}\n\n// The frame is cold first: the sill along the bottom freezes all along, the\n// sides here and there below row 36, the top in a few places.\nfunction seed(P) {\n  P.frost.fill(0);\n  P.hits.fill(0);\n  P.dist.fill(CAP);\n  for (let x = 0; x \u003c W; x++) freeze(P, (H - 1) * W + x);\n  for (let y = H - 2; y > 36; y -= 3 + Math.floor(Math.random() * 6)) freeze(P, y * W);\n  for (let y = H - 2; y > 36; y -= 3 + Math.floor(Math.random() * 6)) freeze(P, y * W + W - 1);\n  for (let x = 2; x \u003c W - 2; x += 9 + Math.floor(Math.random() * 14)) freeze(P, x);\n  P.walking = false;\n}\n\n// A walker starts anywhere on the glass at least LAUNCH from the frost.\nfunction launch(P) {\n  const dist = P.dist;\n  for (let tries = 0; tries \u003c 200; tries++) {\n    const x = Math.floor(Math.random() * W);\n    const y = Math.floor(Math.random() * H);\n    if (dist[y * W + x] >= LAUNCH) {\n      P.wx = x;\n      P.wy = y;\n      P.walking = true;\n      return true;\n    }\n  }\n  return false;\n}\n\n// Vapour as random walkers, one at a time, until `want` crystals have frozen\n// or the step budget runs out. Returns false when no walker can start: the\n// pane is full.\nfunction walk(P, want, stick, budget) {\n  const dist = P.dist;\n  const frost = P.frost;\n  let made = 0;\n  let x = P.wx;\n  let y = P.wy;\n  while (made \u003c want && budget > 0) {\n    if (!P.walking) {\n      if (!launch(P)) return false;\n      x = P.wx;\n      y = P.wy;\n    }\n    budget--;\n    const p = y * W + x;\n    const d = dist[p];\n    if (d === 1 && Math.random() \u003c stick) {\n      if (++P.hits[p] >= HITS) {\n        freeze(P, p);\n        made++;\n      }\n      P.walking = false;\n      continue;\n    }\n    if (d >= 3) {\n      // Far from the frost: land anywhere on the square ring d - 1 out, which\n      // the walk would have to cross anyway.\n      const r = d - 1;\n      const s = Math.floor(Math.random() * 8 * r);\n      const side = (s / (2 * r)) | 0;\n      const o = (s % (2 * r)) - r;\n      if (side === 0) {\n        x += o;\n        y -= r;\n      } else if (side === 1) {\n        x += r;\n        y += o;\n      } else if (side === 2) {\n        x -= o;\n        y += r;\n      } else {\n        x -= r;\n        y -= o;\n      }\n    } else {\n      const s = Math.floor(Math.random() * 4);\n      let nx = x + (s === 0 ? 1 : s === 1 ? -1 : 0);\n      let ny = y + (s === 2 ? 1 : s === 3 ? -1 : 0);\n      if (nx \u003c 0) nx = 1;\n      if (nx >= W) nx = W - 2;\n      if (ny \u003c 0) ny = 1;\n      if (ny >= H) ny = H - 2;\n      if (!frost[ny * W + nx]) {\n        x = nx;\n        y = ny;\n      }\n    }\n    if (x \u003c 0) x = -x;\n    if (x >= W) x = 2 * (W - 1) - x;\n    if (y \u003c 0) y = -y;\n    if (y >= H) y = 2 * (H - 1) - y;\n    x = clamp(x, 0, W - 1);\n    y = clamp(y, 0, H - 1);\n  }\n  P.wx = x;\n  P.wy = y;\n  return true;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frost = new Uint8Array(N);\n  P.hits = new Uint8Array(N);\n  P.dist = new Uint8Array(N);\n  P.born = new Float32Array(N);\n  P.thaw = new Float32Array(N);\n  P.bg = new Float32Array(N * 3);\n  P.base = new Float32Array(N * 3);\n  // Each LED of the pane has its own crystal face: how much light it sends\n  // back, a tint per channel, and a time when it flashes.\n  P.facet = new Float32Array(N);\n  P.tint = new Float32Array(N * 3);\n  P.spin = new Float32Array(N);\n  P.phase = new Float32Array(N);\n  P.grain = new Float32Array(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    P.facet[p] = hash(p, 1);\n    for (let c = 0; c \u003c 3; c++) {\n      P.tint[p * 3 + c] = 0.86 + 0.28 * hash(p, 2 + c);\n      P.grain[p * 3 + c] = hash(p, 5 + c) - 0.5;\n    }\n    P.spin[p] = 2 + 7 * hash(p, 8);\n    P.phase[p] = 6.283 * hash(p, 9);\n  }\n  // What the lamp does at each LED: how much of it the ice scatters back, how\n  // far the film between the ferns spreads it, and the lamp's own head.\n  P.lit = new Float32Array(N);\n  P.haze = new Float32Array(N);\n  P.core = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const d2 = ((p % W) - LX) ** 2 + (((p / W) | 0) - LY) ** 2;\n    P.lit[p] = Math.exp(-d2 / 1500);\n    P.haze[p] = Math.exp(-d2 / 4500);\n    P.core[p] = 235 * Math.exp(-d2 / 5);\n  }\n  P.fx = new Float32Array(FLAKES);\n  P.fy = new Float32Array(FLAKES);\n  P.fz = new Float32Array(FLAKES);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    P.fx[i] = Math.random() * W;\n    P.fy[i] = Math.random() * H;\n    P.fz[i] = 0.4 + 0.6 * Math.random();\n  }\n  P.lamp = new Float32Array(3);\n  Object.assign(P, { clock: 0, owed: 0, phaseOf: GROW, timer: 0, wx: 0, wy: 0, walking: false, started: false, baked: -1 });\n  seed(P);\n}\n\nfunction startMelt(P) {\n  P.phaseOf = MELT;\n  P.timer = 0;\n  // The room warms the middle of the pane first: the frost melts from there\n  // out toward the frame, and the corners and the sill keep theirs.\n  const { frost, thaw } = P;\n  for (let p = 0; p \u003c N; p++) {\n    if (!frost[p]) continue;\n    const x = (p % W) - 32;\n    const y = ((p / W) | 0) - 58;\n    thaw[p] = Math.sqrt((x / 32) ** 2 + (y / 66) ** 2) + 0.2 * hash(p, 11);\n  }\n}\n\nfunction step(P, dt, speed, stick) {\n  P.clock += dt;\n  if (P.phaseOf === GROW) {\n    P.owed += RATE * speed * (1 + 1.5 * P.rime) * dt;\n    const want = Math.floor(P.owed);\n    P.owed -= want;\n    if (want > 0 && !walk(P, want, stick, BUDGET)) {\n      P.phaseOf = HOLD;\n      P.timer = 0;\n    }\n  } else if (P.phaseOf === HOLD) {\n    P.timer += dt;\n    if (P.timer > HOLD_S) startMelt(P);\n  } else {\n    P.timer += dt;\n    const front = THAW * smooth(0, MELT_S, P.timer);\n    const { frost, thaw } = P;\n    let changed = false;\n    for (let p = 0; p \u003c N; p++)\n      if (frost[p] && thaw[p] \u003c front) {\n        frost[p] = 0;\n        P.born[p] = P.clock;\n        changed = true;\n      }\n    if (changed) measureDistance(P);\n    if (P.timer > MELT_S + 0.5) {\n      // The cold comes back and the ferns grow in again from what is left.\n      P.phaseOf = GROW;\n      P.hits.fill(0);\n      P.walking = false;\n    }\n  }\n}\n\nfunction breathe(P) {\n  // A warm breath on the middle of the pane: a ragged round patch clears.\n  const { frost } = P;\n  const cx = 32;\n  const cy = 60;\n  for (let p = 0; p \u003c N; p++) {\n    if (!frost[p]) continue;\n    const x = p % W;\n    const y = (p / W) | 0;\n    const r = Math.sqrt((x - cx) ** 2 + ((y - cy) * 0.8) ** 2);\n    if (r \u003c 22 + 4 * hash(p, 12)) {\n      frost[p] = 0;\n      P.born[p] = P.clock;\n    }\n  }\n  measureDistance(P);\n  P.walking = false;\n  if (P.phaseOf !== GROW) P.phaseOf = GROW;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const speed = clamp(k[1], 0.1, 4);\n  const rime = clamp(k[2], 0, 1);\n  P.rime = rime;\n  // The chance a walker that touches the frost freezes there.\n  const stick = 1 - 0.95 * Math.sqrt(rime);\n  P.glitter = clamp(k[3], 0, 1);\n  if (Math.abs(P.baked - k[0]) > 0.002) {\n    lampColour(k[0], P.lamp);\n    bake(P, k[0]);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The pane has been freezing for fifteen seconds of Speed when the panel\n    // opens, so the knobs have already shaped the frost.\n    const n = Math.round(PRE * RATE * speed * (1 + 1.5 * rime));\n    walk(P, n, stick, 1e9);\n    P.clock = 0;\n    for (let p = 0; p \u003c N; p++) P.born[p] = -9;\n  }\n  if (input.btnPressed && input.btnPressed[0]) breathe(P);\n  step(P, dt, speed, stick);\n  // Snow outside, falling past the lamp.\n  for (let i = 0; i \u003c FLAKES; i++) {\n    P.fy[i] += dt * (5 + 9 * P.fz[i]);\n    P.fx[i] += dt * (1.2 * Math.sin(P.clock * 0.7 + i) + 0.8);\n    if (P.fy[i] > H + 3) {\n      P.fy[i] = -3;\n      P.fx[i] = Math.random() * W;\n    }\n    if (P.fx[i] > W + 3) P.fx[i] -= W + 6;\n  }\n}\n\n// The street behind the glass, out of focus: snow clouds, the roofs across\n// the road with two windows lit, the lamp's glow and its pool on the snow.\n// It is drawn again only when the lamp changes.\nfunction bake(P, key) {\n  const base = P.base;\n  const L = P.lamp;\n  const grain = P.grain;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const roofY = 74 + 3 * Math.sin(x * 0.13 + 1) - 10 * smooth(8, 12, x) * (1 - smooth(22, 26, x)) - 6 * smooth(44, 47, x);\n      const dx = x - LX;\n      const dy = y - LY;\n      const d2 = dx * dx + dy * dy;\n      let r;\n      let g;\n      let b;\n      if (y \u003c roofY) {\n        // Snow clouds hang low and give back the street lights: navy\n        // overhead, the lamp's own colour down at the roofs.\n        const h = smooth(0, roofY, y);\n        const glow = 4 + 15 * h * h;\n        r = 3 * (1 - h) + glow * L[0];\n        g = 5 * (1 - h) + glow * L[1];\n        b = 15 * (1 - h) + glow * L[2];\n        // Snow lies along the roof edges.\n        const lip = Math.exp(-((y - roofY + 1.5) ** 2) / 2);\n        r += 8 * lip;\n        g += 9 * lip;\n        b += 11 * lip;\n      } else if (y \u003c 102) {\n        // The houses opposite, dark, with two windows lit by the rooms inside.\n        let win = 0;\n        for (const [wx, wy] of WINDOWS) {\n          const u = (x - wx) / 3.2;\n          const v = (y - wy) / 4;\n          win += Math.exp(-(u * u + v * v) * 2);\n        }\n        r = 3 + 4 * L[0] + 17 * win;\n        g = 3 + 4 * L[1] + 12 * win;\n        b = 5 + 4 * L[2] + 5 * win;\n      } else {\n        // Snow on the street, in a pool of light under the lamp.\n        const pool = Math.exp(-(dx * dx) / 260 - ((y - 114) ** 2) / 180);\n        r = 3 + (9 + 12 * pool) * L[0];\n        g = 4 + (9 + 12 * pool) * L[1];\n        b = 6 + (9 + 12 * pool) * L[2];\n      }\n      // The lamp's glow through the glass.\n      const glow = 16 / (1 + d2 / 50);\n      r += glow * L[0];\n      g += glow * L[1];\n      b += glow * L[2];\n      // Its pole, dark against the glow.\n      if (x >= LX - 1 && x \u003c= LX && y > LY + 2 && y \u003c 106) {\n        r *= 0.45;\n        g *= 0.45;\n        b *= 0.45;\n      }\n      base[p * 3] = r + GRAIN * grain[p * 3];\n      base[p * 3 + 1] = g + GRAIN * grain[p * 3 + 1];\n      base[p * 3 + 2] = b + GRAIN * grain[p * 3 + 2];\n    }\n  P.baked = key;\n}\n\n// Flakes falling past the window, soft and dim, brighter as they pass the lamp.\nfunction paintSnow(P) {\n  const bg = P.bg;\n  const L = P.lamp;\n  bg.set(P.base);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    const fx = P.fx[i];\n    const fy = P.fy[i];\n    const near = Math.exp(-((fx - LX) ** 2 + (fy - LY) ** 2) / 500);\n    const v = (4 + 10 * near) * P.fz[i];\n    const xa = Math.max(0, Math.floor(fx - 2));\n    const xb = Math.min(W - 1, Math.ceil(fx + 2));\n    const ya = Math.max(0, Math.floor(fy - 2));\n    const yb = Math.min(H - 1, Math.ceil(fy + 2));\n    for (let y = ya; y \u003c= yb; y++)\n      for (let x = xa; x \u003c= xb; x++) {\n        const w = v * Math.exp(-((x - fx) ** 2 + (y - fy) ** 2) / 1.6);\n        const q = (y * W + x) * 3;\n        bg[q] += w * (0.7 + 0.3 * L[0]);\n        bg[q + 1] += w * (0.7 + 0.3 * L[1]);\n        bg[q + 2] += w * (0.8 + 0.2 * L[2]);\n      }\n  }\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.bg) return;\n  paintSnow(P);\n  const { bg, frost, dist, facet, tint, born, spin, phase, lamp, lit, haze, core } = P;\n  const t = P.clock;\n  const gl = P.glitter;\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    let r = bg[q];\n    let g = bg[q + 1];\n    let b = bg[q + 2];\n    // The street stays under 24 everywhere but the lamp itself.\n    const m = r > g ? (r > b ? r : b) : g > b ? g : b;\n    if (m > 22) {\n      r *= 22 / m;\n      g *= 22 / m;\n      b *= 22 / m;\n    }\n    const f = facet[p];\n    const d = dist[p];\n    let sparkle = 1;\n    if (d \u003c= 1 && gl > 0) {\n      // Glitter: each face turns to the light and away again on its own beat.\n      const s = Math.sin(t * spin[p] + phase[p]);\n      sparkle = 1 - 0.6 * gl + (s > 0 ? 2.4 * gl * s * s * s : 0);\n    }\n    if (frost[p]) {\n      // A crystal just frozen flashes, then settles.\n      const age = t - born[p];\n      const v = (0.45 + 0.5 * f) * (age \u003c 0.5 ? 1.7 - 1.4 * age : 1) * sparkle;\n      // The brightest faces run white; near the lamp the ice is its colour.\n      const w = 90 * f * f * f * f * v;\n      const a = 280 * lit[p] * v;\n      r = (ICE[0] * v + a * lamp[0] + w) * tint[q];\n      g = (ICE[1] * v + a * lamp[1] + w) * tint[q + 1];\n      b = (ICE[2] * v + a * lamp[2] + w) * tint[q + 2];\n    } else {\n      // The lamp's head, where no frost hides it.\n      const c0 = core[p];\n      if (c0 > 0.5) {\n        r += c0 * lamp[0];\n        g += c0 * lamp[1];\n        b += c0 * lamp[2];\n      }\n      // Where frost has just melted the glass is wet for a moment.\n      const wet = t - born[p];\n      if (wet >= 0 && wet \u003c 1.5) {\n        const e = (1 - wet / 1.5) * (0.3 + f);\n        r += 30 * e;\n        g += 44 * e;\n        b += 60 * e;\n      }\n      if (d \u003c= 2) {\n        // A film of hoar frost round the ferns, lit one step out and kept\n        // under 24 the next. It scatters the lamp's light farther than the\n        // ferns do.\n        const near = d === 1;\n        const film = (near ? 0.17 * sparkle : 0.06) * (0.6 + 0.8 * f);\n        const hz = haze[p];\n        const c = 1 - 0.6 * hz;\n        const keep = near ? 0.5 : 0.7;\n        r = keep * r + (ICE[0] * c + 300 * hz * lamp[0]) * film;\n        g = keep * g + (ICE[1] * c + 300 * hz * lamp[1]) * film;\n        b = keep * b + (ICE[2] * c + 300 * hz * lamp[2]) * film;\n        if (!near) {\n          const n = r > g ? (r > b ? r : b) : g > b ? g : b;\n          if (n > 23) {\n            r *= 23 / n;\n            g *= 23 / n;\n            b *= 23 / n;\n          }\n        }\n      }\n    }\n    display.setPixel(p % W, (p / W) | 0, byte(r), byte(g), byte(b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Speed=0.2..3, Rime=0..1, Glitter=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"The street light behind the glass, from a sodium lamp's amber through warm and cold white to a mercury lamp's blue-green and a pink shop sign; the snow clouds, the street and the frost near the lamp take its colour."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the frost grows: at 2 about forty crystals freeze each second and the pane is frosted over 17 seconds after the panel opens; at 0.2 the ferns have only begun."},{"name":"Rime","min":0,"max":1,"about":"How readily vapour sticks where it touches the frost: at 0 every touch counts and the ferns grow thin and feathery; turned up, most touches bounce off and wander deeper in, and the frost packs into a dense white crust along the frame."},{"name":"Glitter","min":0,"max":1,"about":"How hard the crystal faces flash as they turn to the light, from a matte frost to every fern sparkling."}],"start":[0,2,0,0.06],"measures":{"motion":0.0377,"detail":0.1373,"edges":0.4636,"complexity":2.383,"coverage":0.4303,"colour":0.1004,"drift":0.0382},"knobResponse":[0.0509,0.1276,0.1564,0.0602]},{"slug":"galilean-moons","title":"Galilean Moons","family":"celestial","round":22,"note":"목성의 네 위성을 관측 도표로 그려요. 위쪽 접안렌즈에서는 줄무늬 목성이 돌고 이오의 그림자가 원반을 지나가며, 아래 도표에서는 위성마다 제 사인 곡선을 그리며 날짜가 위로 올라와요.","idea":"Jupiter's four big moons as an observer's chart: the eyepiece at the top shows the belted planet turning, its moons in a line and their shadows crossing the disc, and below it each moon traces its own sine round Jupiter's band, ten rows a day, as the days to come scroll up to the eyepiece.","buttons":"K1 tap jumps ahead to the next shadow transit, an hour before the shadow touches Jupiter's limb.","code":"// ===== Patternflow pattern =====\n// Title:   Galilean Moons\n// Family:  celestial\n// Idea:    Jupiter's four big moons as an observer's chart: the eyepiece at the top shows the belted planet turning, its moons in a line and their shadows crossing the disc, and below it each moon traces its own sine round Jupiter's band, ten rows a day, as the days to come scroll up to the eyepiece.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the Jupiter's-moons chart Sky & Telescope prints each month, computed with Jean Meeus's low-accuracy theory of the four satellites\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Sky=0..1, Speed=0.5..24, Power=0..1, Seeing=0..1\n//\n// Knob 1: Sky. The light the chart is read by: a night chart in navy at 0, red-light observing mode at the middle, the printed paper chart at 1.\n// Knob 2: Speed. Hours of Jupiter's time a second: at 2 the Great Red Spot comes round every 5 seconds and the chart climbs a row every 1.2 seconds; 0.5 to 24, a day a second.\n// Knob 3: Power. The eyepiece's magnification, which also sets the chart's scale: at 0 the field holds Callisto's whole orbit; turned up, Callisto, then Ganymede, then Europa run off the sides at elongation until only Io's orbit fits.\n// Knob 4: Seeing. Turbulence in the air over the telescope: steady near 0, and toward 1 the disc wobbles, boils and blurs into a glow until the belts are gone.\n// Buttons: K1 tap jumps ahead to the next shadow transit, an hour before the shadow touches Jupiter's limb.\n\nconst W = 64;\nconst H = 128;\nconst { sin, cos, asin, atan2, sqrt, floor, round, min, max, abs, exp, pow, PI } = Math;\nconst RAD = PI / 180;\nconst CX = 31.5;\n// The eyepiece fills rows 0 to 37: the close-up round row 16 and the\n// low-power line on row 35. The chart starts at row 38 with row 35 as now.\nconst EY = 16;\nconst LY = 35;\nconst C0 = 38;\nconst EYE = C0;\n// 2026 October 23, 18:00 UT, three months before the February 2027\n// opposition, when Earth crosses Jupiter's equator and the moons pass right\n// over each other; the panel opens at the first shadow transit after it.\nconst JD0 = 2461337.25;\n// The Great Red Spot's System II longitude, about where it drifts to by late 2026.\nconst GRS = 78;\n// Meeus: each moon's longitude at J2000 and daily motion in degrees, its\n// radius in Jupiter radii.\nconst U0 = [163.8069, 358.414, 5.7176, 224.8092];\nconst UN = [203.4058646, 101.2916335, 50.234518, 21.48798];\nconst RM = [0.0255, 0.0219, 0.0368, 0.0337];\n// Dot and shadow radii in the close-up, in LEDs. Io is 0.7 LEDs across at\n// the lowest power, so the moons are drawn two and a half times too big.\nconst DOT = [0.85, 0.75, 1.15, 1.05];\n// Io yellow-orange, Europa white, Ganymede grey-brown, Callisto grey-blue,\n// as they look in the eyepiece, and the albedo they show against the disc.\nconst EYEC = [\n  [255, 196, 84],\n  [240, 242, 248],\n  [206, 178, 146],\n  [128, 150, 200],\n];\nconst ALB = [1, 1, 0.78, 0.62];\n// Chart palettes: night, red light, paper. bg0/bg1 alternate by day.\nconst PAL = [\n  {\n    bg0: [8, 14, 40], bg1: [16, 28, 72], band: [196, 170, 128], shadow: [26, 18, 20], label: [104, 124, 178],\n    moon: [[255, 170, 40], [236, 240, 250], [190, 156, 118], [118, 146, 210]],\n  },\n  {\n    bg0: [14, 0, 0], bg1: [42, 2, 0], band: [128, 12, 4], shadow: [4, 0, 0], label: [120, 8, 0],\n    moon: [[230, 44, 10], [255, 96, 66], [176, 26, 8], [128, 14, 4]],\n  },\n  {\n    bg0: [232, 224, 204], bg1: [212, 204, 184], band: [190, 162, 118], shadow: [36, 26, 20], label: [112, 100, 88],\n    moon: [[222, 100, 8], [28, 32, 52], [126, 80, 42], [34, 76, 152]],\n  },\n];\n// 3x5 digits for the day labels.\nconst DIG = [0x7b6f, 0x2c97, 0x73e7, 0x73cf, 0x5bc9, 0x79cf, 0x79ef, 0x7249, 0x7bef, 0x7bcf];\n\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, x) => {\n  const t = cl((x - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\n// Signed difference of two angles in degrees, -180..180.\nconst wrap = (a) => a - 360 * floor((a + 180) / 360);\n\n// Jupiter seen from Earth at Julian date jd: distance, phase angle, the\n// declinations of the Earth and the Sun over its equator, the shadow's\n// direction and the System I and II central meridians (Meeus, chapter 44).\nfunction sky(jd, S) {\n  const d = jd - 2451545;\n  const V = (172.74 + 0.00111588 * d) * RAD;\n  const M = (357.529 + 0.9856003 * d) * RAD;\n  const N = (20.02 + 0.0830853 * d + 0.329 * sin(V)) * RAD;\n  const J = (66.115 + 0.9025179 * d - 0.329 * sin(V)) * RAD;\n  const A = (1.915 * sin(M) + 0.02 * sin(2 * M)) * RAD;\n  const B = (5.555 * sin(N) + 0.168 * sin(2 * N)) * RAD;\n  const K = J + A - B;\n  const R = 1.00014 - 0.01671 * cos(M) - 0.00014 * cos(2 * M);\n  const r = 5.20872 - 0.25208 * cos(N) - 0.00611 * cos(2 * N);\n  const dist = sqrt(r * r + R * R - 2 * r * R * cos(K));\n  const psi = asin((R / dist) * sin(K));\n  const lam = (34.35 + 0.083091 * d + 0.329 * sin(V)) * RAD + B;\n  S.Ds = 3.12 * RAD * sin(lam + 42.8 * RAD);\n  S.De = S.Ds - 2.22 * RAD * sin(psi) * cos(lam + 22 * RAD) - 1.3 * RAD * ((r - dist) / dist) * sin(lam - 100.5 * RAD);\n  S.lt = dist / 173;\n  S.ph = psi - B;\n  // The shadow points away from the Sun: west (right) before opposition.\n  S.sx = -sin(psi);\n  S.sz = cos(psi);\n  const t = d - S.lt;\n  S.w1 = 210.98 + 877.8169088 * t + S.ph / RAD;\n  S.w2 = 187.23 + 870.1869088 * t + S.ph / RAD;\n}\n\nfunction makeMoons() {\n  const F = () => new Float64Array(4);\n  return { X: F(), Y: F(), Z: F(), vis: F(), sx: F(), sy: F(), son: F(), u: F() };\n}\n\n// The four moons at jd using the slow terms in S. X is west (right) and Y\n// north in Jupiter radii, Z away from Earth. vis is how much of the moon is\n// neither behind Jupiter nor in its shadow; son is how much of its shadow\n// lies on the side of the disc we see, at (sx, sy).\nfunction moons(jd, S, Mo) {\n  const t = jd - 2451545 - S.lt;\n  const u = Mo.u;\n  for (let i = 0; i \u003c 4; i++) u[i] = (U0[i] + UN[i] * t) * RAD + S.ph;\n  const G = (331.18 + 50.310482 * t) * RAD;\n  const Hh = (87.45 + 21.569231 * t) * RAD;\n  const a = u[0], b = u[1], c = u[2];\n  u[0] += 0.473 * RAD * sin(2 * (a - b));\n  u[1] += 1.065 * RAD * sin(2 * (b - c));\n  u[2] += 0.165 * RAD * sin(G);\n  u[3] += 0.843 * RAD * sin(Hh);\n  const rr0 = 5.9057 - 0.0244 * cos(2 * (a - b));\n  const rr1 = 9.3966 - 0.0882 * cos(2 * (b - c));\n  const rr2 = 14.9883 - 0.0216 * cos(G);\n  const rr3 = 26.3627 - 0.1939 * cos(Hh);\n  const sDe = sin(S.De);\n  for (let i = 0; i \u003c 4; i++) {\n    const r = i === 0 ? rr0 : i === 1 ? rr1 : i === 2 ? rr2 : rr3;\n    const X = r * sin(u[i]);\n    const Z = -r * cos(u[i]);\n    const Y = Z * sDe;\n    Mo.X[i] = X;\n    Mo.Y[i] = Y;\n    Mo.Z[i] = Z;\n    let vis = 1;\n    if (Z > 0) vis = sm(1 - RM[i], 1 + RM[i], sqrt(X * X + (Y / 0.935) ** 2));\n    const al = X * S.sx + Z * S.sz;\n    if (al > 0) {\n      const pe = X * S.sz - Z * S.sx;\n      const v = (al * S.Ds) / 0.935;\n      const w = RM[i] + al * 0.0012;\n      vis *= sm(1 - w, 1 + w, sqrt(pe * pe + v * v));\n    }\n    Mo.vis[i] = vis;\n    Mo.son[i] = 0;\n    if (Z \u003c 0) {\n      const cc = X * X + Z * Z - 1;\n      const disc = al * al - cc;\n      if (disc > 0) {\n        const tt = -al - sqrt(disc);\n        const zh = Z + tt * S.sz;\n        if (tt > 0 && zh \u003c 0) {\n          const xh = X + tt * S.sx;\n          const yh = Y - tt * S.Ds;\n          Mo.sx[i] = xh;\n          Mo.sy[i] = yh;\n          Mo.son[i] = 1 - sm(0.93, 1, sqrt(xh * xh + (yh / 0.935) ** 2));\n        }\n      }\n    }\n  }\n}\n\n// Day of the month of the civil day that starts at jd (Meeus, chapter 7).\nfunction dayOf(jd) {\n  const Z = floor(jd + 0.5);\n  const al = floor((Z - 1867216.25) / 36524.25);\n  const A = Z + 1 + al - floor(al / 4);\n  const B = A + 1524;\n  const C = floor((B - 122.1) / 365.25);\n  const D = floor(365.25 * C);\n  const E = floor((B - D) / 30.6001);\n  return B - D - floor(30.6001 * E);\n}\n\n// Cloud colours at planetographic latitude lat (degrees) and System I and II\n// longitudes L1, L2 (degrees, west). Writes albedo 0..1 into o.\nfunction cloud(lat, L1, L2, o) {\n  const al = abs(lat);\n  let r = 0.94, g = 0.89, b = 0.77;\n  const put = (cr, cg, cb, a) => {\n    r += (cr - r) * a;\n    g += (cg - g) * a;\n    b += (cb - b) * a;\n  };\n  const l1 = L1 * RAD, l2 = L2 * RAD;\n  // Polar hoods.\n  put(0.6, 0.57, 0.54, 0.85 * sm(28, 58, al));\n  // North Equatorial Belt, festoons trailing from its south edge.\n  const ns = 6.8 + 1.1 * sin(6 * l1 + 1) + 0.6 * sin(13 * l1);\n  const nn = 17.5 + 1.2 * sin(2 * l2 + 0.4) + 0.7 * sin(5 * l2 + 2);\n  let a = sm(ns - 1, ns + 1, lat) * (1 - sm(nn - 1, nn + 1, lat));\n  put(0.6, 0.37, 0.23, 0.88 * a);\n  // Festoons: dark plumes, unevenly spaced, slanting down into the EZ.\n  const fe = sin(10 * l1 + 0.12 * lat + 0.9 * sin(3 * l1 + 2));\n  put(0.4, 0.43, 0.54, 0.7 * sm(0.5, 0.9, fe) * sm(1.5 + 2.5 * sin(7 * l1) ** 2, 6.5, lat) * (1 - sm(6.5, 8, lat)));\n  // Barges: dark red ovals in the NEB's north half.\n  for (const bl of [40, 165, 290]) {\n    const e = (wrap(L2 - bl) / 5) ** 2 + ((lat - 15) / 1.8) ** 2;\n    put(0.42, 0.2, 0.14, 0.9 * (1 - sm(0.5, 1.1, e)));\n  }\n  // The Great Red Spot and the hollow it presses into the SEB.\n  const eg = (wrap(L2 - GRS) / 8) ** 2 + ((lat + 22.5) / 5) ** 2;\n  // South Equatorial Belt, paler down its middle.\n  const ss = -19.5 + 0.9 * sin(3 * l2 + 2) + 0.5 * sin(8 * l2);\n  const sn = -7.5 + 0.8 * sin(4 * l2) + 0.5 * sin(11 * l1 + 1);\n  a = sm(ss - 1, ss + 1, lat) * (1 - sm(sn - 1, sn + 1, lat));\n  a *= 1 - 0.4 * exp(-(((lat + 13.5) / 2.6) ** 2)) * (0.6 + 0.4 * sin(5 * l2 + 1));\n  a *= sm(1.1, 2.4, eg);\n  put(0.66, 0.44, 0.28, 0.8 * a);\n  put(0.88, 0.45, 0.31, 1 - sm(0.6, 1, eg));\n  // Temperate belts, white ovals in the south one.\n  const st = -29 + 0.8 * sin(3 * l2 + 4);\n  put(0.7, 0.55, 0.41, 0.62 * sm(st - 2.5, st - 1, lat) * (1 - sm(st + 1, st + 2.5, lat)));\n  for (const wl of [100, 215, 335]) {\n    const e = (wrap(L2 - wl) / 4.5) ** 2 + ((lat + 33) / 2.4) ** 2;\n    put(1, 0.99, 0.95, 0.85 * (1 - sm(0.4, 1, e)));\n  }\n  const nt = 26 + 0.9 * sin(4 * l2 + 1);\n  put(0.68, 0.51, 0.37, 0.6 * sm(nt - 2.5, nt - 1, lat) * (1 - sm(nt + 1, nt + 2.5, lat)));\n  put(0.72, 0.62, 0.52, 0.4 * exp(-(((al - 37) / 1.6) ** 2)));\n  o[0] = r;\n  o[1] = g;\n  o[2] = b;\n}\n\n// A soft dot of colour c and strength a added into buffer f (stride W).\nfunction dot(f, rows, x, y, rad, c, a) {\n  const x0 = max(0, floor(x - rad - 1)), x1 = min(W - 1, floor(x + rad + 1));\n  const y0 = max(0, floor(y - rad - 1)), y1 = min(rows - 1, floor(y + rad + 1));\n  for (let j = y0; j \u003c= y1; j++)\n    for (let i = x0; i \u003c= x1; i++) {\n      const k = cl(rad + 0.5 - sqrt((i - x) ** 2 + (j - y) ** 2), 0, 1) * a;\n      if (k \u003c= 0) continue;\n      const o = (j * W + i) * 3;\n      f[o] += (c[0] - f[o]) * k;\n      f[o + 1] += (c[1] - f[o + 1]) * k;\n      f[o + 2] += (c[2] - f[o + 2]) * k;\n    }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.S = {};\n  P.Mo = makeMoons();\n  P.eye = new Float32Array(W * C0 * 3);\n  P.tmp = new Float32Array(W * EYE * 3);\n  P.row = new Float32Array(W * 3);\n  P.al = new Float32Array(W * 4);\n  P.sh = new Float32Array(W);\n  P.xp = new Float64Array(4);\n  P.vp = new Float64Array(4);\n  P.cs = new Float32Array(3);\n  P.clock = 0;\n  Object.assign(P, { skyk: 0, speed: 2, power: 0, seeing: 0.06 });\n  // Open five hours before the first shadow touches the limb, which at the\n  // opening speed brings it on at 2.5 seconds.\n  P.jd = nextShadow(JD0) - 5 / 24;\n}\n\n// The next time after jd that a moon's shadow reaches the disc.\nfunction nextShadow(jd) {\n  const S = {}, Mo = makeMoons();\n  let was = 0;\n  for (let k = 0; k \u003c 2000; k++) {\n    const t = jd + k * 0.01;\n    if (k % 10 === 0) sky(t, S);\n    moons(t, S, Mo);\n    let on = 0;\n    for (let i = 0; i \u003c 4; i++) if (Mo.son[i] > 0.5) on |= 1 \u003c\u003c i;\n    if (k > 0 && on & ~was) return t;\n    was = on;\n  }\n  return jd;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.skyk = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.5, 24);\n  P.power = cl(k[2], 0, 1);\n  P.seeing = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.jd = nextShadow(P.jd + 0.02) - 1 / 24;\n  P.jd += (dt * P.speed) / 24;\n  P.clock += dt;\n}\n\n// The close-up eyepiece: Jupiter at Rc LEDs a radius, with seeing.\nfunction eyepiece(P, S, Mo, Rc) {\n  const f = P.eye;\n  const see = P.seeing;\n  const tm = P.clock;\n  const cs = P.cs;\n  // Image motion: the whole disc wanders, and each row ripples on its own.\n  const gx = see * (2.6 * sin(tm * 3.1) * sin(tm * 1.27 + 1) + 1.3 * sin(tm * 7.3 + 2));\n  const gy = see * (1.5 * sin(tm * 2.3 + 4) * sin(tm * 0.9) + 0.8 * sin(tm * 6.1 + 1));\n  const Rp = Rc * 0.935;\n  const cy = EY + gy;\n  const w1 = S.w1, w2 = S.w2;\n  for (let y = 0; y \u003c EYE; y++) {\n    const rip = see * 1.3 * sin(y * 0.9 + tm * 11) * sin(y * 0.37 - tm * 5.3 + 1.3);\n    const cx = CX + gx + rip;\n    const ny = (y - cy) / Rp;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      const nx = (x - cx) / Rc;\n      const q = nx * nx + ny * ny;\n      const rho = sqrt(q);\n      // Glare round the disc: the seeing disc's wings.\n      const out = max(0, rho - 1) * Rc;\n      const halo = (4 + 110 * see) / pow(1 + (out / (2 + 10 * see)) ** 2, 1.5) * (rho > 1 ? 1 : 0);\n      f[o] = 3 + halo * 0.95;\n      f[o + 1] = 4 + halo * 0.9;\n      f[o + 2] = 8 + halo * 0.8;\n      if (rho >= 1 + 1 / Rc) continue;\n      const edge = cl((1 - rho) * Rc + 0.6, 0, 1);\n      const mu = sqrt(max(0, 1 - min(q, 1)));\n      const lat = -asin(cl(ny, -1, 1)) / RAD;\n      const lon = atan2(nx, mu) / RAD;\n      cloud(lat, w1 - lon, w2 - lon, cs);\n      let lum = 255 * (0.18 + 0.82 * pow(mu, 0.55));\n      // The phase: a thin shade on the limb away from the Sun.\n      lum *= 1 - 0.35 * sm(0.75, 1, nx * (S.sx > 0 ? 1 : -1)) * abs(S.sx) * 5;\n      for (let i = 0; i \u003c 4; i++) {\n        if (Mo.son[i] \u003c= 0) continue;\n        const dx = (x - cx - Mo.sx[i] * Rc), dy = (y - cy + Mo.sy[i] * Rc);\n        lum *= 1 - 0.9 * Mo.son[i] * cl(DOT[i] + 0.55 - sqrt(dx * dx + dy * dy), 0, 1);\n      }\n      f[o] += (cs[0] * lum - f[o]) * edge;\n      f[o + 1] += (cs[1] * lum - f[o + 1]) * edge;\n      f[o + 2] += (cs[2] * lum - f[o + 2]) * edge;\n    }\n  }\n  // Moons in the field, in front of the disc or beside it.\n  for (let i = 0; i \u003c 4; i++) {\n    const x = CX + gx + Mo.X[i] * Rc, y = cy - Mo.Y[i] * Rc;\n    if (x \u003c -3 || x > W + 3 || Mo.vis[i] \u003c= 0.01) continue;\n    const onDisc = Mo.Z[i] \u003c 0 && Mo.X[i] ** 2 + (Mo.Y[i] / 0.935) ** 2 \u003c 1;\n    const tw = 1 + see * 0.35 * sin(tm * (17 + i * 3) + i);\n    const c = EYEC[i].map((v) => v * (onDisc ? ALB[i] : 1) * min(1.1, tw));\n    dot(f, EYE, x, y, DOT[i] * (1 + see * 0.6), c, Mo.vis[i]);\n  }\n  // Seeing blurs the image: a separable Gaussian.\n  const sg = 0.2 + 1.7 * see;\n  if (sg > 0.35) {\n    const rad = min(5, Math.ceil(sg * 2.5));\n    const ker = [];\n    let ks = 0;\n    for (let i = -rad; i \u003c= rad; i++) ks += ker[i + rad] = exp(-(i * i) / (2 * sg * sg));\n    const t = P.tmp;\n    for (let y = 0; y \u003c EYE; y++)\n      for (let x = 0; x \u003c W; x++)\n        for (let c = 0; c \u003c 3; c++) {\n          let s = 0;\n          for (let i = -rad; i \u003c= rad; i++) s += ker[i + rad] * f[(y * W + cl(x + i, 0, W - 1)) * 3 + c];\n          t[(y * W + x) * 3 + c] = s / ks;\n        }\n    for (let y = 0; y \u003c EYE; y++)\n      for (let x = 0; x \u003c W; x++)\n        for (let c = 0; c \u003c 3; c++) {\n          let s = 0;\n          for (let i = -rad; i \u003c= rad; i++) s += ker[i + rad] * t[(cl(y + i, 0, EYE - 1) * W + x) * 3 + c];\n          f[(y * W + x) * 3 + c] = s / ks;\n        }\n  }\n}\n\n// The low-power line under the close-up: Jupiter and its moons at the chart's scale.\nfunction line(P, Mo, Rj, Rc) {\n  const f = P.eye;\n  // Two faint lines from under the close-up down to the planet it magnifies.\n  for (const s of [-1, 1]) {\n    const xa = CX + s * Rc * 0.45, ya = EY + Rc * 0.935 + 1;\n    const xb = CX + s * (Rj + 0.8), yb = LY - 1.5;\n    const n = max(2, round(yb - ya));\n    for (let k = 0; k \u003c= n; k++) {\n      const x = round(mix(xa, xb, k / n)), y = round(mix(ya, yb, k / n));\n      const o = (y * W + x) * 3;\n      if (y \u003c C0 && x >= 0 && x \u003c W) for (let c = 0; c \u003c 3; c++) f[o + c] = max(f[o + c], [34, 40, 62][c]);\n    }\n  }\n  const hj = min(Rj * 0.935, 2.2);\n  for (let y = LY - 3; y \u003c= LY + 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const nx = (x - CX) / Rj, ny = (y - LY) / hj;\n      const rho = sqrt(nx * nx + ny * ny);\n      const k = cl((1 - rho) * max(1.2, Rj) + 0.7, 0, 1);\n      if (k \u003c= 0) continue;\n      const lum = 0.55 + 0.45 * sqrt(max(0, 1 - rho * rho));\n      const o = (y * W + x) * 3;\n      f[o] += (236 * lum - f[o]) * k;\n      f[o + 1] += (220 * lum - f[o + 1]) * k;\n      f[o + 2] += (186 * lum - f[o + 2]) * k;\n    }\n  for (let i = 0; i \u003c 4; i++) {\n    if (Mo.vis[i] \u003c= 0.01) continue;\n    dot(f, C0, CX + Mo.X[i] * Rj, LY - Mo.Y[i] * Rj, 0.7, EYEC[i], Mo.vis[i]);\n  }\n}\n\nfunction blend(k1) {\n  const s = k1 * 2;\n  const i = min(1, floor(s)), t = sm(0, 1, s - i);\n  const a = PAL[i], b = PAL[i + 1];\n  const m = (u, v) => u.map((x, j) => mix(x, v[j], t));\n  const o = {};\n  for (const key of [\"bg0\", \"bg1\", \"band\", \"shadow\", \"label\"]) o[key] = m(a[key], b[key]);\n  o.moon = a.moon.map((c, j) => m(c, b.moon[j]));\n  return o;\n}\n\n// The chart: ten rows a day at the lowest power, now at row LY, the day\n// numbers down the left edge under the line each day starts on.\nfunction chart(P, display, pal, Rj) {\n  const rpd = 10 * pow(Rj / 1.15, 0.6);\n  const S = P.S2 || (P.S2 = {});\n  const Mo = P.Mo2 || (P.Mo2 = makeMoons());\n  const { row, al, sh } = P;\n  const hw = 0.55;\n  const marks = new Set();\n  for (let d = floor(P.jd + (C0 - 6 - LY) / rpd - 0.5) + 1.5; d \u003c P.jd + (H - LY) / rpd; d++) {\n    const n = dayOf(d + 0.01), yb = round(LY + (d - P.jd) * rpd);\n    const s = n \u003c 10 ? [n] : [floor(n / 10), n % 10];\n    s.forEach((dg, j) => {\n      for (let b = 0; b \u003c 15; b++) if ((DIG[dg] >> (14 - b)) & 1) marks.add((yb + 1 + floor(b / 3)) * W + 1 + j * 4 + (b % 3));\n    });\n  }\n  for (let y = C0; y \u003c H; y++) {\n    const tc = P.jd + (y - LY) / rpd;\n    const ta = tc - 0.5 / rpd, tb = tc + 0.5 / rpd;\n    // Alternate days light and dark, split where a day starts inside the row.\n    const da = floor(ta - 0.5);\n    let odd = da & 1;\n    const nb = da + 1.5;\n    if (nb \u003c tb) {\n      const fr = (tb - nb) * rpd;\n      odd = odd * (1 - fr) + (1 - (da & 1)) * fr;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const lab = marks.has(y * W + x);\n      for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = lab ? pal.label[c] : mix(pal.bg0[c], pal.bg1[c], odd);\n    }\n    // Jupiter's band, rounded off by its limb.\n    for (let x = floor(CX - Rj - 1); x \u003c= CX + Rj + 1; x++) {\n      const k = cl(min(x + 0.5, CX + Rj) - max(x - 0.5, CX - Rj), 0, 1);\n      if (k \u003c= 0) continue;\n      const dx = (x - CX) / Rj;\n      const lum = 0.62 + 0.38 * sqrt(max(0, 1 - dx * dx));\n      for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.band[c] * lum, k);\n    }\n    sky(tc, S);\n    al.fill(0);\n    sh.fill(0);\n    const xp = P.xp, vp = P.vp;\n    for (let s = 0; s \u003c= 4; s++) {\n      moons(ta + (s / 4) * (tb - ta), S, Mo);\n      for (let i = 0; i \u003c 4; i++) {\n        const x = CX + Mo.X[i] * Rj, v = Mo.vis[i];\n        if (Mo.son[i] > 0) {\n          const xs = CX + Mo.sx[i] * Rj;\n          for (let xx = max(0, floor(xs - 1)); xx \u003c= min(W - 1, xs + 1); xx++)\n            sh[xx] = max(sh[xx], Mo.son[i] * cl(1 - abs(xx - xs) * 0.8, 0, 1));\n        }\n        if (s > 0) {\n          const lo = min(x, xp[i]) - hw, hi = max(x, xp[i]) + hw, vv = min(v, vp[i]);\n          if (vv > 0.02 && hi > -1 && lo \u003c W)\n            for (let xx = max(0, floor(lo)); xx \u003c= min(W - 1, floor(hi + 1)); xx++) {\n              const k = cl(min(xx + 0.5, hi) - max(xx - 0.5, lo), 0, 1) * vv;\n              if (k > al[xx * 4 + i]) al[xx * 4 + i] = k;\n            }\n        }\n        xp[i] = x;\n        vp[i] = v;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      if (sh[x] > 0) for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.shadow[c], sh[x] * 0.9);\n      for (let i = 3; i >= 0; i--) {\n        const k = al[x * 4 + i];\n        if (k > 0) for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.moon[i][c], k);\n      }\n      display.setPixel(x, y, min(255, row[x * 3]), min(255, row[x * 3 + 1]), min(255, row[x * 3 + 2]));\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.eye) setup(P);\n  const S = P.S, Mo = P.Mo;\n  sky(P.jd, S);\n  moons(P.jd, S, Mo);\n  const p = P.power;\n  const Rj = 1.15 * pow(5.1 / 1.15, p);\n  const Rc = 14 + 2.5 * p;\n  eyepiece(P, S, Mo, Rc);\n  line(P, Mo, Rj, Rc);\n  // Red light turns the eyepiece's colours to shades of red.\n  const red = sm(0, 1, 1 - abs(P.skyk * 2 - 1));\n  const f = P.eye;\n  for (let i = 0, o = 0; i \u003c W * C0; i++, o += 3) {\n    let r = f[o], g = f[o + 1], b = f[o + 2];\n    if (red > 0) {\n      const l = 0.5 * r + 0.4 * g + 0.1 * b;\n      r = mix(r, l, red);\n      g = mix(g, l * 0.06, red);\n      b = mix(b, 0, red);\n    }\n    display.setPixel(i % W, (i / W) | 0, min(255, r), min(255, g), min(255, b));\n  }\n  const pal = blend(P.skyk);\n  chart(P, display, pal, Rj);\n}\n","layer":{"id":"layer-galilean-moons","type":"code","name":"galilean-moons","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Galilean Moons\n// Family:  celestial\n// Idea:    Jupiter's four big moons as an observer's chart: the eyepiece at the top shows the belted planet turning, its moons in a line and their shadows crossing the disc, and below it each moon traces its own sine round Jupiter's band, ten rows a day, as the days to come scroll up to the eyepiece.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the Jupiter's-moons chart Sky & Telescope prints each month, computed with Jean Meeus's low-accuracy theory of the four satellites\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Sky=0..1, Speed=0.5..24, Power=0..1, Seeing=0..1\n//\n// Knob 1: Sky. The light the chart is read by: a night chart in navy at 0, red-light observing mode at the middle, the printed paper chart at 1.\n// Knob 2: Speed. Hours of Jupiter's time a second: at 2 the Great Red Spot comes round every 5 seconds and the chart climbs a row every 1.2 seconds; 0.5 to 24, a day a second.\n// Knob 3: Power. The eyepiece's magnification, which also sets the chart's scale: at 0 the field holds Callisto's whole orbit; turned up, Callisto, then Ganymede, then Europa run off the sides at elongation until only Io's orbit fits.\n// Knob 4: Seeing. Turbulence in the air over the telescope: steady near 0, and toward 1 the disc wobbles, boils and blurs into a glow until the belts are gone.\n// Buttons: K1 tap jumps ahead to the next shadow transit, an hour before the shadow touches Jupiter's limb.\n\nconst W = 64;\nconst H = 128;\nconst { sin, cos, asin, atan2, sqrt, floor, round, min, max, abs, exp, pow, PI } = Math;\nconst RAD = PI / 180;\nconst CX = 31.5;\n// The eyepiece fills rows 0 to 37: the close-up round row 16 and the\n// low-power line on row 35. The chart starts at row 38 with row 35 as now.\nconst EY = 16;\nconst LY = 35;\nconst C0 = 38;\nconst EYE = C0;\n// 2026 October 23, 18:00 UT, three months before the February 2027\n// opposition, when Earth crosses Jupiter's equator and the moons pass right\n// over each other; the panel opens at the first shadow transit after it.\nconst JD0 = 2461337.25;\n// The Great Red Spot's System II longitude, about where it drifts to by late 2026.\nconst GRS = 78;\n// Meeus: each moon's longitude at J2000 and daily motion in degrees, its\n// radius in Jupiter radii.\nconst U0 = [163.8069, 358.414, 5.7176, 224.8092];\nconst UN = [203.4058646, 101.2916335, 50.234518, 21.48798];\nconst RM = [0.0255, 0.0219, 0.0368, 0.0337];\n// Dot and shadow radii in the close-up, in LEDs. Io is 0.7 LEDs across at\n// the lowest power, so the moons are drawn two and a half times too big.\nconst DOT = [0.85, 0.75, 1.15, 1.05];\n// Io yellow-orange, Europa white, Ganymede grey-brown, Callisto grey-blue,\n// as they look in the eyepiece, and the albedo they show against the disc.\nconst EYEC = [\n  [255, 196, 84],\n  [240, 242, 248],\n  [206, 178, 146],\n  [128, 150, 200],\n];\nconst ALB = [1, 1, 0.78, 0.62];\n// Chart palettes: night, red light, paper. bg0/bg1 alternate by day.\nconst PAL = [\n  {\n    bg0: [8, 14, 40], bg1: [16, 28, 72], band: [196, 170, 128], shadow: [26, 18, 20], label: [104, 124, 178],\n    moon: [[255, 170, 40], [236, 240, 250], [190, 156, 118], [118, 146, 210]],\n  },\n  {\n    bg0: [14, 0, 0], bg1: [42, 2, 0], band: [128, 12, 4], shadow: [4, 0, 0], label: [120, 8, 0],\n    moon: [[230, 44, 10], [255, 96, 66], [176, 26, 8], [128, 14, 4]],\n  },\n  {\n    bg0: [232, 224, 204], bg1: [212, 204, 184], band: [190, 162, 118], shadow: [36, 26, 20], label: [112, 100, 88],\n    moon: [[222, 100, 8], [28, 32, 52], [126, 80, 42], [34, 76, 152]],\n  },\n];\n// 3x5 digits for the day labels.\nconst DIG = [0x7b6f, 0x2c97, 0x73e7, 0x73cf, 0x5bc9, 0x79cf, 0x79ef, 0x7249, 0x7bef, 0x7bcf];\n\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, x) => {\n  const t = cl((x - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\n// Signed difference of two angles in degrees, -180..180.\nconst wrap = (a) => a - 360 * floor((a + 180) / 360);\n\n// Jupiter seen from Earth at Julian date jd: distance, phase angle, the\n// declinations of the Earth and the Sun over its equator, the shadow's\n// direction and the System I and II central meridians (Meeus, chapter 44).\nfunction sky(jd, S) {\n  const d = jd - 2451545;\n  const V = (172.74 + 0.00111588 * d) * RAD;\n  const M = (357.529 + 0.9856003 * d) * RAD;\n  const N = (20.02 + 0.0830853 * d + 0.329 * sin(V)) * RAD;\n  const J = (66.115 + 0.9025179 * d - 0.329 * sin(V)) * RAD;\n  const A = (1.915 * sin(M) + 0.02 * sin(2 * M)) * RAD;\n  const B = (5.555 * sin(N) + 0.168 * sin(2 * N)) * RAD;\n  const K = J + A - B;\n  const R = 1.00014 - 0.01671 * cos(M) - 0.00014 * cos(2 * M);\n  const r = 5.20872 - 0.25208 * cos(N) - 0.00611 * cos(2 * N);\n  const dist = sqrt(r * r + R * R - 2 * r * R * cos(K));\n  const psi = asin((R / dist) * sin(K));\n  const lam = (34.35 + 0.083091 * d + 0.329 * sin(V)) * RAD + B;\n  S.Ds = 3.12 * RAD * sin(lam + 42.8 * RAD);\n  S.De = S.Ds - 2.22 * RAD * sin(psi) * cos(lam + 22 * RAD) - 1.3 * RAD * ((r - dist) / dist) * sin(lam - 100.5 * RAD);\n  S.lt = dist / 173;\n  S.ph = psi - B;\n  // The shadow points away from the Sun: west (right) before opposition.\n  S.sx = -sin(psi);\n  S.sz = cos(psi);\n  const t = d - S.lt;\n  S.w1 = 210.98 + 877.8169088 * t + S.ph / RAD;\n  S.w2 = 187.23 + 870.1869088 * t + S.ph / RAD;\n}\n\nfunction makeMoons() {\n  const F = () => new Float64Array(4);\n  return { X: F(), Y: F(), Z: F(), vis: F(), sx: F(), sy: F(), son: F(), u: F() };\n}\n\n// The four moons at jd using the slow terms in S. X is west (right) and Y\n// north in Jupiter radii, Z away from Earth. vis is how much of the moon is\n// neither behind Jupiter nor in its shadow; son is how much of its shadow\n// lies on the side of the disc we see, at (sx, sy).\nfunction moons(jd, S, Mo) {\n  const t = jd - 2451545 - S.lt;\n  const u = Mo.u;\n  for (let i = 0; i \u003c 4; i++) u[i] = (U0[i] + UN[i] * t) * RAD + S.ph;\n  const G = (331.18 + 50.310482 * t) * RAD;\n  const Hh = (87.45 + 21.569231 * t) * RAD;\n  const a = u[0], b = u[1], c = u[2];\n  u[0] += 0.473 * RAD * sin(2 * (a - b));\n  u[1] += 1.065 * RAD * sin(2 * (b - c));\n  u[2] += 0.165 * RAD * sin(G);\n  u[3] += 0.843 * RAD * sin(Hh);\n  const rr0 = 5.9057 - 0.0244 * cos(2 * (a - b));\n  const rr1 = 9.3966 - 0.0882 * cos(2 * (b - c));\n  const rr2 = 14.9883 - 0.0216 * cos(G);\n  const rr3 = 26.3627 - 0.1939 * cos(Hh);\n  const sDe = sin(S.De);\n  for (let i = 0; i \u003c 4; i++) {\n    const r = i === 0 ? rr0 : i === 1 ? rr1 : i === 2 ? rr2 : rr3;\n    const X = r * sin(u[i]);\n    const Z = -r * cos(u[i]);\n    const Y = Z * sDe;\n    Mo.X[i] = X;\n    Mo.Y[i] = Y;\n    Mo.Z[i] = Z;\n    let vis = 1;\n    if (Z > 0) vis = sm(1 - RM[i], 1 + RM[i], sqrt(X * X + (Y / 0.935) ** 2));\n    const al = X * S.sx + Z * S.sz;\n    if (al > 0) {\n      const pe = X * S.sz - Z * S.sx;\n      const v = (al * S.Ds) / 0.935;\n      const w = RM[i] + al * 0.0012;\n      vis *= sm(1 - w, 1 + w, sqrt(pe * pe + v * v));\n    }\n    Mo.vis[i] = vis;\n    Mo.son[i] = 0;\n    if (Z \u003c 0) {\n      const cc = X * X + Z * Z - 1;\n      const disc = al * al - cc;\n      if (disc > 0) {\n        const tt = -al - sqrt(disc);\n        const zh = Z + tt * S.sz;\n        if (tt > 0 && zh \u003c 0) {\n          const xh = X + tt * S.sx;\n          const yh = Y - tt * S.Ds;\n          Mo.sx[i] = xh;\n          Mo.sy[i] = yh;\n          Mo.son[i] = 1 - sm(0.93, 1, sqrt(xh * xh + (yh / 0.935) ** 2));\n        }\n      }\n    }\n  }\n}\n\n// Day of the month of the civil day that starts at jd (Meeus, chapter 7).\nfunction dayOf(jd) {\n  const Z = floor(jd + 0.5);\n  const al = floor((Z - 1867216.25) / 36524.25);\n  const A = Z + 1 + al - floor(al / 4);\n  const B = A + 1524;\n  const C = floor((B - 122.1) / 365.25);\n  const D = floor(365.25 * C);\n  const E = floor((B - D) / 30.6001);\n  return B - D - floor(30.6001 * E);\n}\n\n// Cloud colours at planetographic latitude lat (degrees) and System I and II\n// longitudes L1, L2 (degrees, west). Writes albedo 0..1 into o.\nfunction cloud(lat, L1, L2, o) {\n  const al = abs(lat);\n  let r = 0.94, g = 0.89, b = 0.77;\n  const put = (cr, cg, cb, a) => {\n    r += (cr - r) * a;\n    g += (cg - g) * a;\n    b += (cb - b) * a;\n  };\n  const l1 = L1 * RAD, l2 = L2 * RAD;\n  // Polar hoods.\n  put(0.6, 0.57, 0.54, 0.85 * sm(28, 58, al));\n  // North Equatorial Belt, festoons trailing from its south edge.\n  const ns = 6.8 + 1.1 * sin(6 * l1 + 1) + 0.6 * sin(13 * l1);\n  const nn = 17.5 + 1.2 * sin(2 * l2 + 0.4) + 0.7 * sin(5 * l2 + 2);\n  let a = sm(ns - 1, ns + 1, lat) * (1 - sm(nn - 1, nn + 1, lat));\n  put(0.6, 0.37, 0.23, 0.88 * a);\n  // Festoons: dark plumes, unevenly spaced, slanting down into the EZ.\n  const fe = sin(10 * l1 + 0.12 * lat + 0.9 * sin(3 * l1 + 2));\n  put(0.4, 0.43, 0.54, 0.7 * sm(0.5, 0.9, fe) * sm(1.5 + 2.5 * sin(7 * l1) ** 2, 6.5, lat) * (1 - sm(6.5, 8, lat)));\n  // Barges: dark red ovals in the NEB's north half.\n  for (const bl of [40, 165, 290]) {\n    const e = (wrap(L2 - bl) / 5) ** 2 + ((lat - 15) / 1.8) ** 2;\n    put(0.42, 0.2, 0.14, 0.9 * (1 - sm(0.5, 1.1, e)));\n  }\n  // The Great Red Spot and the hollow it presses into the SEB.\n  const eg = (wrap(L2 - GRS) / 8) ** 2 + ((lat + 22.5) / 5) ** 2;\n  // South Equatorial Belt, paler down its middle.\n  const ss = -19.5 + 0.9 * sin(3 * l2 + 2) + 0.5 * sin(8 * l2);\n  const sn = -7.5 + 0.8 * sin(4 * l2) + 0.5 * sin(11 * l1 + 1);\n  a = sm(ss - 1, ss + 1, lat) * (1 - sm(sn - 1, sn + 1, lat));\n  a *= 1 - 0.4 * exp(-(((lat + 13.5) / 2.6) ** 2)) * (0.6 + 0.4 * sin(5 * l2 + 1));\n  a *= sm(1.1, 2.4, eg);\n  put(0.66, 0.44, 0.28, 0.8 * a);\n  put(0.88, 0.45, 0.31, 1 - sm(0.6, 1, eg));\n  // Temperate belts, white ovals in the south one.\n  const st = -29 + 0.8 * sin(3 * l2 + 4);\n  put(0.7, 0.55, 0.41, 0.62 * sm(st - 2.5, st - 1, lat) * (1 - sm(st + 1, st + 2.5, lat)));\n  for (const wl of [100, 215, 335]) {\n    const e = (wrap(L2 - wl) / 4.5) ** 2 + ((lat + 33) / 2.4) ** 2;\n    put(1, 0.99, 0.95, 0.85 * (1 - sm(0.4, 1, e)));\n  }\n  const nt = 26 + 0.9 * sin(4 * l2 + 1);\n  put(0.68, 0.51, 0.37, 0.6 * sm(nt - 2.5, nt - 1, lat) * (1 - sm(nt + 1, nt + 2.5, lat)));\n  put(0.72, 0.62, 0.52, 0.4 * exp(-(((al - 37) / 1.6) ** 2)));\n  o[0] = r;\n  o[1] = g;\n  o[2] = b;\n}\n\n// A soft dot of colour c and strength a added into buffer f (stride W).\nfunction dot(f, rows, x, y, rad, c, a) {\n  const x0 = max(0, floor(x - rad - 1)), x1 = min(W - 1, floor(x + rad + 1));\n  const y0 = max(0, floor(y - rad - 1)), y1 = min(rows - 1, floor(y + rad + 1));\n  for (let j = y0; j \u003c= y1; j++)\n    for (let i = x0; i \u003c= x1; i++) {\n      const k = cl(rad + 0.5 - sqrt((i - x) ** 2 + (j - y) ** 2), 0, 1) * a;\n      if (k \u003c= 0) continue;\n      const o = (j * W + i) * 3;\n      f[o] += (c[0] - f[o]) * k;\n      f[o + 1] += (c[1] - f[o + 1]) * k;\n      f[o + 2] += (c[2] - f[o + 2]) * k;\n    }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.S = {};\n  P.Mo = makeMoons();\n  P.eye = new Float32Array(W * C0 * 3);\n  P.tmp = new Float32Array(W * EYE * 3);\n  P.row = new Float32Array(W * 3);\n  P.al = new Float32Array(W * 4);\n  P.sh = new Float32Array(W);\n  P.xp = new Float64Array(4);\n  P.vp = new Float64Array(4);\n  P.cs = new Float32Array(3);\n  P.clock = 0;\n  Object.assign(P, { skyk: 0, speed: 2, power: 0, seeing: 0.06 });\n  // Open five hours before the first shadow touches the limb, which at the\n  // opening speed brings it on at 2.5 seconds.\n  P.jd = nextShadow(JD0) - 5 / 24;\n}\n\n// The next time after jd that a moon's shadow reaches the disc.\nfunction nextShadow(jd) {\n  const S = {}, Mo = makeMoons();\n  let was = 0;\n  for (let k = 0; k \u003c 2000; k++) {\n    const t = jd + k * 0.01;\n    if (k % 10 === 0) sky(t, S);\n    moons(t, S, Mo);\n    let on = 0;\n    for (let i = 0; i \u003c 4; i++) if (Mo.son[i] > 0.5) on |= 1 \u003c\u003c i;\n    if (k > 0 && on & ~was) return t;\n    was = on;\n  }\n  return jd;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.skyk = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.5, 24);\n  P.power = cl(k[2], 0, 1);\n  P.seeing = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.jd = nextShadow(P.jd + 0.02) - 1 / 24;\n  P.jd += (dt * P.speed) / 24;\n  P.clock += dt;\n}\n\n// The close-up eyepiece: Jupiter at Rc LEDs a radius, with seeing.\nfunction eyepiece(P, S, Mo, Rc) {\n  const f = P.eye;\n  const see = P.seeing;\n  const tm = P.clock;\n  const cs = P.cs;\n  // Image motion: the whole disc wanders, and each row ripples on its own.\n  const gx = see * (2.6 * sin(tm * 3.1) * sin(tm * 1.27 + 1) + 1.3 * sin(tm * 7.3 + 2));\n  const gy = see * (1.5 * sin(tm * 2.3 + 4) * sin(tm * 0.9) + 0.8 * sin(tm * 6.1 + 1));\n  const Rp = Rc * 0.935;\n  const cy = EY + gy;\n  const w1 = S.w1, w2 = S.w2;\n  for (let y = 0; y \u003c EYE; y++) {\n    const rip = see * 1.3 * sin(y * 0.9 + tm * 11) * sin(y * 0.37 - tm * 5.3 + 1.3);\n    const cx = CX + gx + rip;\n    const ny = (y - cy) / Rp;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      const nx = (x - cx) / Rc;\n      const q = nx * nx + ny * ny;\n      const rho = sqrt(q);\n      // Glare round the disc: the seeing disc's wings.\n      const out = max(0, rho - 1) * Rc;\n      const halo = (4 + 110 * see) / pow(1 + (out / (2 + 10 * see)) ** 2, 1.5) * (rho > 1 ? 1 : 0);\n      f[o] = 3 + halo * 0.95;\n      f[o + 1] = 4 + halo * 0.9;\n      f[o + 2] = 8 + halo * 0.8;\n      if (rho >= 1 + 1 / Rc) continue;\n      const edge = cl((1 - rho) * Rc + 0.6, 0, 1);\n      const mu = sqrt(max(0, 1 - min(q, 1)));\n      const lat = -asin(cl(ny, -1, 1)) / RAD;\n      const lon = atan2(nx, mu) / RAD;\n      cloud(lat, w1 - lon, w2 - lon, cs);\n      let lum = 255 * (0.18 + 0.82 * pow(mu, 0.55));\n      // The phase: a thin shade on the limb away from the Sun.\n      lum *= 1 - 0.35 * sm(0.75, 1, nx * (S.sx > 0 ? 1 : -1)) * abs(S.sx) * 5;\n      for (let i = 0; i \u003c 4; i++) {\n        if (Mo.son[i] \u003c= 0) continue;\n        const dx = (x - cx - Mo.sx[i] * Rc), dy = (y - cy + Mo.sy[i] * Rc);\n        lum *= 1 - 0.9 * Mo.son[i] * cl(DOT[i] + 0.55 - sqrt(dx * dx + dy * dy), 0, 1);\n      }\n      f[o] += (cs[0] * lum - f[o]) * edge;\n      f[o + 1] += (cs[1] * lum - f[o + 1]) * edge;\n      f[o + 2] += (cs[2] * lum - f[o + 2]) * edge;\n    }\n  }\n  // Moons in the field, in front of the disc or beside it.\n  for (let i = 0; i \u003c 4; i++) {\n    const x = CX + gx + Mo.X[i] * Rc, y = cy - Mo.Y[i] * Rc;\n    if (x \u003c -3 || x > W + 3 || Mo.vis[i] \u003c= 0.01) continue;\n    const onDisc = Mo.Z[i] \u003c 0 && Mo.X[i] ** 2 + (Mo.Y[i] / 0.935) ** 2 \u003c 1;\n    const tw = 1 + see * 0.35 * sin(tm * (17 + i * 3) + i);\n    const c = EYEC[i].map((v) => v * (onDisc ? ALB[i] : 1) * min(1.1, tw));\n    dot(f, EYE, x, y, DOT[i] * (1 + see * 0.6), c, Mo.vis[i]);\n  }\n  // Seeing blurs the image: a separable Gaussian.\n  const sg = 0.2 + 1.7 * see;\n  if (sg > 0.35) {\n    const rad = min(5, Math.ceil(sg * 2.5));\n    const ker = [];\n    let ks = 0;\n    for (let i = -rad; i \u003c= rad; i++) ks += ker[i + rad] = exp(-(i * i) / (2 * sg * sg));\n    const t = P.tmp;\n    for (let y = 0; y \u003c EYE; y++)\n      for (let x = 0; x \u003c W; x++)\n        for (let c = 0; c \u003c 3; c++) {\n          let s = 0;\n          for (let i = -rad; i \u003c= rad; i++) s += ker[i + rad] * f[(y * W + cl(x + i, 0, W - 1)) * 3 + c];\n          t[(y * W + x) * 3 + c] = s / ks;\n        }\n    for (let y = 0; y \u003c EYE; y++)\n      for (let x = 0; x \u003c W; x++)\n        for (let c = 0; c \u003c 3; c++) {\n          let s = 0;\n          for (let i = -rad; i \u003c= rad; i++) s += ker[i + rad] * t[(cl(y + i, 0, EYE - 1) * W + x) * 3 + c];\n          f[(y * W + x) * 3 + c] = s / ks;\n        }\n  }\n}\n\n// The low-power line under the close-up: Jupiter and its moons at the chart's scale.\nfunction line(P, Mo, Rj, Rc) {\n  const f = P.eye;\n  // Two faint lines from under the close-up down to the planet it magnifies.\n  for (const s of [-1, 1]) {\n    const xa = CX + s * Rc * 0.45, ya = EY + Rc * 0.935 + 1;\n    const xb = CX + s * (Rj + 0.8), yb = LY - 1.5;\n    const n = max(2, round(yb - ya));\n    for (let k = 0; k \u003c= n; k++) {\n      const x = round(mix(xa, xb, k / n)), y = round(mix(ya, yb, k / n));\n      const o = (y * W + x) * 3;\n      if (y \u003c C0 && x >= 0 && x \u003c W) for (let c = 0; c \u003c 3; c++) f[o + c] = max(f[o + c], [34, 40, 62][c]);\n    }\n  }\n  const hj = min(Rj * 0.935, 2.2);\n  for (let y = LY - 3; y \u003c= LY + 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const nx = (x - CX) / Rj, ny = (y - LY) / hj;\n      const rho = sqrt(nx * nx + ny * ny);\n      const k = cl((1 - rho) * max(1.2, Rj) + 0.7, 0, 1);\n      if (k \u003c= 0) continue;\n      const lum = 0.55 + 0.45 * sqrt(max(0, 1 - rho * rho));\n      const o = (y * W + x) * 3;\n      f[o] += (236 * lum - f[o]) * k;\n      f[o + 1] += (220 * lum - f[o + 1]) * k;\n      f[o + 2] += (186 * lum - f[o + 2]) * k;\n    }\n  for (let i = 0; i \u003c 4; i++) {\n    if (Mo.vis[i] \u003c= 0.01) continue;\n    dot(f, C0, CX + Mo.X[i] * Rj, LY - Mo.Y[i] * Rj, 0.7, EYEC[i], Mo.vis[i]);\n  }\n}\n\nfunction blend(k1) {\n  const s = k1 * 2;\n  const i = min(1, floor(s)), t = sm(0, 1, s - i);\n  const a = PAL[i], b = PAL[i + 1];\n  const m = (u, v) => u.map((x, j) => mix(x, v[j], t));\n  const o = {};\n  for (const key of [\"bg0\", \"bg1\", \"band\", \"shadow\", \"label\"]) o[key] = m(a[key], b[key]);\n  o.moon = a.moon.map((c, j) => m(c, b.moon[j]));\n  return o;\n}\n\n// The chart: ten rows a day at the lowest power, now at row LY, the day\n// numbers down the left edge under the line each day starts on.\nfunction chart(P, display, pal, Rj) {\n  const rpd = 10 * pow(Rj / 1.15, 0.6);\n  const S = P.S2 || (P.S2 = {});\n  const Mo = P.Mo2 || (P.Mo2 = makeMoons());\n  const { row, al, sh } = P;\n  const hw = 0.55;\n  const marks = new Set();\n  for (let d = floor(P.jd + (C0 - 6 - LY) / rpd - 0.5) + 1.5; d \u003c P.jd + (H - LY) / rpd; d++) {\n    const n = dayOf(d + 0.01), yb = round(LY + (d - P.jd) * rpd);\n    const s = n \u003c 10 ? [n] : [floor(n / 10), n % 10];\n    s.forEach((dg, j) => {\n      for (let b = 0; b \u003c 15; b++) if ((DIG[dg] >> (14 - b)) & 1) marks.add((yb + 1 + floor(b / 3)) * W + 1 + j * 4 + (b % 3));\n    });\n  }\n  for (let y = C0; y \u003c H; y++) {\n    const tc = P.jd + (y - LY) / rpd;\n    const ta = tc - 0.5 / rpd, tb = tc + 0.5 / rpd;\n    // Alternate days light and dark, split where a day starts inside the row.\n    const da = floor(ta - 0.5);\n    let odd = da & 1;\n    const nb = da + 1.5;\n    if (nb \u003c tb) {\n      const fr = (tb - nb) * rpd;\n      odd = odd * (1 - fr) + (1 - (da & 1)) * fr;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const lab = marks.has(y * W + x);\n      for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = lab ? pal.label[c] : mix(pal.bg0[c], pal.bg1[c], odd);\n    }\n    // Jupiter's band, rounded off by its limb.\n    for (let x = floor(CX - Rj - 1); x \u003c= CX + Rj + 1; x++) {\n      const k = cl(min(x + 0.5, CX + Rj) - max(x - 0.5, CX - Rj), 0, 1);\n      if (k \u003c= 0) continue;\n      const dx = (x - CX) / Rj;\n      const lum = 0.62 + 0.38 * sqrt(max(0, 1 - dx * dx));\n      for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.band[c] * lum, k);\n    }\n    sky(tc, S);\n    al.fill(0);\n    sh.fill(0);\n    const xp = P.xp, vp = P.vp;\n    for (let s = 0; s \u003c= 4; s++) {\n      moons(ta + (s / 4) * (tb - ta), S, Mo);\n      for (let i = 0; i \u003c 4; i++) {\n        const x = CX + Mo.X[i] * Rj, v = Mo.vis[i];\n        if (Mo.son[i] > 0) {\n          const xs = CX + Mo.sx[i] * Rj;\n          for (let xx = max(0, floor(xs - 1)); xx \u003c= min(W - 1, xs + 1); xx++)\n            sh[xx] = max(sh[xx], Mo.son[i] * cl(1 - abs(xx - xs) * 0.8, 0, 1));\n        }\n        if (s > 0) {\n          const lo = min(x, xp[i]) - hw, hi = max(x, xp[i]) + hw, vv = min(v, vp[i]);\n          if (vv > 0.02 && hi > -1 && lo \u003c W)\n            for (let xx = max(0, floor(lo)); xx \u003c= min(W - 1, floor(hi + 1)); xx++) {\n              const k = cl(min(xx + 0.5, hi) - max(xx - 0.5, lo), 0, 1) * vv;\n              if (k > al[xx * 4 + i]) al[xx * 4 + i] = k;\n            }\n        }\n        xp[i] = x;\n        vp[i] = v;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      if (sh[x] > 0) for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.shadow[c], sh[x] * 0.9);\n      for (let i = 3; i >= 0; i--) {\n        const k = al[x * 4 + i];\n        if (k > 0) for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.moon[i][c], k);\n      }\n      display.setPixel(x, y, min(255, row[x * 3]), min(255, row[x * 3 + 1]), min(255, row[x * 3 + 2]));\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.eye) setup(P);\n  const S = P.S, Mo = P.Mo;\n  sky(P.jd, S);\n  moons(P.jd, S, Mo);\n  const p = P.power;\n  const Rj = 1.15 * pow(5.1 / 1.15, p);\n  const Rc = 14 + 2.5 * p;\n  eyepiece(P, S, Mo, Rc);\n  line(P, Mo, Rj, Rc);\n  // Red light turns the eyepiece's colours to shades of red.\n  const red = sm(0, 1, 1 - abs(P.skyk * 2 - 1));\n  const f = P.eye;\n  for (let i = 0, o = 0; i \u003c W * C0; i++, o += 3) {\n    let r = f[o], g = f[o + 1], b = f[o + 2];\n    if (red > 0) {\n      const l = 0.5 * r + 0.4 * g + 0.1 * b;\n      r = mix(r, l, red);\n      g = mix(g, l * 0.06, red);\n      b = mix(b, 0, red);\n    }\n    display.setPixel(i % W, (i / W) | 0, min(255, r), min(255, g), min(255, b));\n  }\n  const pal = blend(P.skyk);\n  chart(P, display, pal, Rj);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sky=0..1, Speed=0.5..24, Power=0..1, Seeing=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sky","min":0,"max":1,"about":"The light the chart is read by: a night chart in navy at 0, red-light observing mode at the middle, the printed paper chart at 1."},{"name":"Speed","min":0.5,"max":24,"about":"Hours of Jupiter's time a second: at 2 the Great Red Spot comes round every 5 seconds and the chart climbs a row every 1.2 seconds; 0.5 to 24, a day a second."},{"name":"Power","min":0,"max":1,"about":"The eyepiece's magnification, which also sets the chart's scale: at 0 the field holds Callisto's whole orbit; turned up, Callisto, then Ganymede, then Europa run off the sides at elongation until only Io's orbit fits."},{"name":"Seeing","min":0,"max":1,"about":"Turbulence in the air over the telescope: steady near 0, and toward 1 the disc wobbles, boils and blurs into a glow until the belts are gone."}],"start":[0,2,0,0.06],"measures":{"motion":0.0779,"detail":0.0747,"edges":0.5632,"complexity":0.743,"coverage":0.7778,"colour":0.1926,"drift":0.0306},"knobResponse":[0.5122,0.1178,0.1493,0.0539]},{"slug":"galton","title":"Galton Board","family":"data","round":2,"note":"깔때기에서 떨어진 공이 못마다 동전 던지듯 왼쪽이나 오른쪽으로 튀어 칸에 쌓이고, 종 모양이 서요. 칸 색은 가운데에서 표준편차 몇 개만큼 떨어졌는지를 보여 줘요.","idea":"Balls pour from a hopper through a triangle of pegs, each peg a coin toss, and the bins under it fill into a bell curve coloured by how many standard deviations each bin sits from the middle.","buttons":"K1 tap opens the floor, the bins drain and the hopper fills again.","code":"// ===== Patternflow pattern =====\n// Title:   Galton Board\n// Family:  data\n// Idea:    Balls pour from a hopper through a triangle of pegs, each peg a coin toss, and the bins under it fill into a bell curve coloured by how many standard deviations each bin sits from the middle.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rate=30..240, Bias=-0.3..0.3, Rows=8..15\n//\n// Knob 1: Hue. Turns the pile round the wheel; the middle, the one-sigma band and the tails keep their steps apart.\n// Knob 2: Rate. Balls let through the neck each second, from a trickle to a pour.\n// Knob 3: Bias. The chance of bouncing right at a peg, from 0.2 to 0.8; at 0 it is a fair coin and the curve stands straight.\n// Knob 4: Rows. Rows of pegs, which is also coins tossed per ball; more rows make more, narrower bins.\n// Buttons: K1 tap opens the floor, the bins drain and the hopper fills again.\n\nconst W = 64;\nconst H = 128;\nconst NECK = 11;\nconst PEG_TOP = 17;\nconst BOTTOM = H - 1;\nconst MAXB = 400;\nconst MAXP = 136;\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// The hopper's walls: a funnel from the top corners down to a two-LED neck.\nfunction wallLeft(y) {\n  return Math.round(1 + (29 * y) / NECK);\n}\n\nfunction layout(params, rows) {\n  params.rows = rows;\n  // Bins and pegs share one spacing, as wide as the panel allows for this many bins.\n  const dx = Math.floor(65 / (rows + 1));\n  const span = (rows + 1) * dx - 1;\n  const x0 = Math.floor((W - span) / 2);\n  const mid = x0 + span / 2;\n  const dy = dx * 0.866;\n  params.dx = dx;\n  params.iw = dx - 1;\n  params.x0 = x0;\n  params.mid = mid;\n  params.dy = dy;\n  params.trow = 0.11 * Math.sqrt(dy / 3.46);\n  for (let r = 0; r \u003c rows; r++) {\n    for (let j = 0; j \u003c= r; j++) {\n      const n = (r * (r + 1)) / 2 + j;\n      params.pegX[n] = Math.floor(mid + (j - r / 2) * dx);\n      params.pegY[n] = Math.round(PEG_TOP + r * dy);\n      params.glow[n] = 0;\n    }\n  }\n  params.pegs = (rows * (rows + 1)) / 2;\n  // The last row of pegs sits on top of the dividers.\n  params.binTop = params.pegY[params.pegs - 1];\n  params.binRows = BOTTOM - params.binTop;\n  const col = params.colBin;\n  for (let x = 0; x \u003c W; x++) {\n    const rel = x - x0;\n    if (rel === -1 || rel === span) col[x] = -2;\n    else if (rel \u003c 0 || rel > span) col[x] = -1;\n    else if ((rel + 1) % dx === 0) col[x] = -2;\n    else col[x] = Math.floor(rel / dx);\n  }\n}\n\nfunction pmf(n, j, p) {\n  let c = 1;\n  for (let i = 0; i \u003c j; i++) c = (c * (n - i)) / (i + 1);\n  return c * Math.pow(p, j) * Math.pow(1 - p, n - j);\n}\n\n// Bands and the curve the pile is heading for, from the bias as it stands.\nfunction theory(params) {\n  const n = params.rows;\n  const p = params.p;\n  const sd = Math.sqrt(n * p * (1 - p));\n  let top = 0;\n  for (let j = 0; j \u003c= n; j++) {\n    const m = pmf(n, j, p);\n    params.expect[j] = m;\n    if (m > top) top = m;\n    const z = Math.abs(j - n * p) / sd;\n    params.band[j] = z \u003c= 1 ? 0 : z \u003c= 2 ? 1 : 2;\n  }\n  params.top = top;\n}\n\nfunction fill(params) {\n  theory(params);\n  // Enough balls that the tallest bin should end a little under the brim.\n  params.total = Math.round((0.9 * params.iw * params.binRows) / params.top);\n  params.hopper = params.total;\n  params.count.fill(0);\n  params.pile.fill(0);\n}\n\nfunction place(params, j, xp) {\n  const iw = params.iw;\n  const level = Math.floor(params.count[j] / iw);\n  if (level >= params.binRows) return false;\n  const y = BOTTOM - level;\n  const left = params.x0 + j * params.dx;\n  let c = Math.max(left, Math.min(left + iw - 1, Math.floor(xp)));\n  // The nearest free place in the row the bin is filling.\n  for (let d = 0; d \u003c iw * 2; d++) {\n    const cc = c + (d & 1 ? -((d + 1) >> 1) : d >> 1);\n    if (cc \u003c left || cc >= left + iw) continue;\n    if (params.pile[y * W + cc] === 0) {\n      c = cc;\n      break;\n    }\n  }\n  params.pile[y * W + c] = 140 + Math.floor(Math.random() * 115);\n  params.count[j]++;\n  if (params.count[j] >= iw * params.binRows) params.full = true;\n  return true;\n}\n\nfunction release(params) {\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (params.mode[i] !== 0) continue;\n    params.mode[i] = 1;\n    params.bt[i] = 0;\n    params.row[i] = 0;\n    params.bj[i] = 0;\n    params.bx[i] = params.mid;\n    params.by[i] = NECK;\n    params.hopper--;\n    return;\n  }\n}\n\nfunction toss(params, i) {\n  params.nj[i] = params.bj[i] + (Math.random() \u003c params.p ? 1 : 0);\n  params.glow[(params.row[i] * (params.row[i] + 1)) / 2 + params.bj[i]] += 1;\n}\n\nfunction moveBalls(params, dt) {\n  const T = params.trow;\n  const dy = params.dy;\n  for (let i = 0; i \u003c MAXB; i++) {\n    const m = params.mode[i];\n    if (m === 0) continue;\n    if (m === 1) {\n      // Out of the neck and onto the top peg.\n      params.bt[i] += dt / 0.14;\n      const t = Math.min(1, params.bt[i]);\n      params.bx[i] = params.mid;\n      params.by[i] = NECK + (params.pegY[0] - 1 - NECK) * t * t;\n      if (params.bt[i] >= 1) {\n        params.bt[i] -= 1;\n        params.mode[i] = 2;\n        toss(params, i);\n      }\n    } else if (m === 2) {\n      params.bt[i] += dt / T;\n      const r = params.row[i];\n      const a = (r * (r + 1)) / 2 + params.bj[i];\n      if (r === params.rows - 1) {\n        // Off the last peg and into a bin.\n        params.mode[i] = params.drain >= 0 ? 4 : 3;\n        params.vy[i] = -dy * 2;\n        params.bt[i] = 0;\n        params.tx[i] = params.x0 + params.nj[i] * params.dx + Math.random() * params.iw;\n        params.bj[i] = params.nj[i];\n        continue;\n      }\n      const b = ((r + 1) * (r + 2)) / 2 + params.nj[i];\n      const t = Math.min(1, params.bt[i]);\n      params.bx[i] = params.pegX[a] + 0.5 + (params.pegX[b] - params.pegX[a]) * t;\n      // A little hop off the peg, then falling.\n      params.by[i] = params.pegY[a] - 1 + (params.pegY[b] - params.pegY[a]) * t * t - dy * 0.35 * 4 * t * (1 - t);\n      if (params.bt[i] >= 1) {\n        params.bt[i] -= 1;\n        params.row[i] = r + 1;\n        params.bj[i] = params.nj[i];\n        toss(params, i);\n      }\n    } else {\n      params.vy[i] = Math.min(70, params.vy[i] + 400 * dt);\n      params.by[i] += params.vy[i] * dt;\n      params.bt[i] += dt;\n      if (m === 3) {\n        params.bx[i] += (params.tx[i] - params.bx[i]) * Math.min(1, dt * 12);\n        const j = params.bj[i];\n        const land = BOTTOM - Math.floor(params.count[j] / params.iw);\n        if (params.drain >= 0) params.mode[i] = 4;\n        else if (params.by[i] >= land) {\n          params.mode[i] = 0;\n          if (!place(params, j, params.bx[i])) params.full = true;\n        }\n      } else if (params.by[i] > H + 2) params.mode[i] = 0;\n    }\n  }\n}\n\nexport function setup(params) {\n  params.pegX = new Int16Array(MAXP);\n  params.pegY = new Int16Array(MAXP);\n  params.glow = new Float32Array(MAXP);\n  params.colBin = new Int8Array(W);\n  params.count = new Int16Array(17);\n  params.expect = new Float32Array(17);\n  params.band = new Uint8Array(17);\n  params.pile = new Uint8Array(W * H);\n  params.mode = new Uint8Array(MAXB);\n  params.bx = new Float32Array(MAXB);\n  params.by = new Float32Array(MAXB);\n  params.bt = new Float32Array(MAXB);\n  params.vy = new Float32Array(MAXB);\n  params.tx = new Float32Array(MAXB);\n  params.row = new Int8Array(MAXB);\n  params.bj = new Int8Array(MAXB);\n  params.nj = new Int8Array(MAXB);\n  params.fb = new Float32Array(W * H * 3);\n  params.colours = new Float32Array(4 * 3);\n  params.hueKey = -1;\n  params.grain = new Uint8Array(W * (NECK + 1));\n  for (let i = 0; i \u003c params.grain.length; i++) params.grain[i] = 120 + Math.floor(Math.random() * 135);\n  let cap = 0;\n  for (let y = 0; y \u003c= NECK; y++) cap += 63 - 2 * wallLeft(y);\n  params.hopCap = cap;\n  params.rows = 0;\n  params.p = 0.5;\n  params.acc = 0;\n  params.drain = -1;\n  params.hold = 0;\n  params.refill = 1;\n  params.refillFrom = 1;\n  params.full = false;\n  params.fresh = true;\n}\n\nfunction startDrain(params) {\n  if (params.drain >= 0) return;\n  params.drain = 0;\n  // Whatever is left in the hopper stays there and is topped up after.\n  params.refillFrom = params.hopper / params.total;\n  for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] === 3) params.mode[i] = 4;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 30, 0, 8];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  const rate = Math.max(1, k[1]);\n  params.p = 0.5 + Math.max(-0.3, Math.min(0.3, k[2]));\n  const rows = Math.max(1, Math.min(15, Math.round(k[3])));\n\n  if (params.fresh) {\n    params.fresh = false;\n    layout(params, rows);\n    fill(params);\n    // Start partway through a fill: over half the balls already sorted, and\n    // two and a half seconds of the stream run so the board is busy.\n    const n = Math.floor(params.total * 0.55);\n    for (let b = 0; b \u003c n; b++) {\n      let j = 0;\n      for (let r = 0; r \u003c rows; r++) if (Math.random() \u003c params.p) j++;\n      place(params, j, params.x0 + j * params.dx + Math.random() * params.iw);\n    }\n    params.hopper -= n;\n    for (let s = 0; s \u003c 75; s++) {\n      params.acc += rate / 30;\n      while (params.acc >= 1) {\n        params.acc -= 1;\n        release(params);\n      }\n      moveBalls(params, 1 / 30);\n    }\n  }\n\n  if (rows !== params.rows || (input.btnPressed && input.btnPressed[0])) {\n    if (params.drain \u003c 0) startDrain(params);\n    params.nextRows = rows;\n  }\n  theory(params);\n\n  if (params.drain >= 0) {\n    params.drain += dt;\n    // The floor is open: the pile falls out under gravity.\n    if (0.5 * 300 * params.drain * params.drain > H) {\n      params.drain = -1;\n      if (params.nextRows && params.nextRows !== params.rows) {\n        // Balls still on the old pegs have nowhere to go on the new board.\n        for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] !== 0) params.mode[i] = 4;\n        layout(params, params.nextRows);\n      }\n      fill(params);\n      params.full = false;\n      params.hold = 0;\n      params.refill = 0;\n    }\n  } else if (params.refill \u003c 1) {\n    params.refill = Math.min(1, params.refill + dt / 0.8);\n  } else {\n    let flying = 0;\n    for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] >= 1 && params.mode[i] \u003c= 3) flying++;\n    if (params.full || (params.hopper \u003c= 0 && flying === 0)) {\n      // Hold the finished curve a moment before the floor opens.\n      params.hold += dt;\n      if (params.hold > 2.5) startDrain(params);\n    } else if (!params.full) {\n      params.acc += rate * dt;\n      while (params.acc >= 1 && params.hopper > 0) {\n        params.acc -= 1;\n        release(params);\n      }\n      if (params.hopper \u003c= 0) params.acc = 0;\n    }\n  }\n\n  moveBalls(params, dt);\n  const fade = Math.exp(-dt * 5);\n  for (let n = 0; n \u003c params.pegs; n++) params.glow[n] *= fade;\n}\n\nfunction add(fb, x, y, r, g, b) {\n  const i = (y * W + x) * 3;\n  fb[i] += r;\n  fb[i + 1] += g;\n  fb[i + 2] += b;\n}\n\nexport function draw(display, params, time) {\n  const fb = params.fb;\n  const col = params.colours;\n  if (params.hueKey !== params.hue) {\n    params.hueKey = params.hue;\n    // K1 at 0 opens on mint, with the tails stepping towards blue.\n    const h = params.hue + 0.42;\n    const cs = [hsv(h, 0.62, 1), hsv(h + 0.09, 0.8, 0.9), hsv(h + 0.19, 0.9, 0.82), hsv(h + 0.05, 0.2, 1)];\n    for (let c = 0; c \u003c 4; c++) {\n      col[c * 3] = cs[c][0];\n      col[c * 3 + 1] = cs[c][1];\n      col[c * 3 + 2] = cs[c][2];\n    }\n  }\n  fb.fill(0);\n\n  // The hopper, filled from the neck up with what is left to drop.\n  const from = params.refillFrom;\n  const left = params.drain >= 0 ? from : params.refill \u003c 1 ? from + (1 - from) * params.refill : params.hopper / params.total;\n  let cells = Math.round(params.hopCap * Math.max(0, left));\n  for (let y = NECK; y >= 0; y--) {\n    const wl = wallLeft(y);\n    const wr = W - 1 - wl;\n    add(fb, wl, y, 46, 48, 58);\n    add(fb, wr, y, 46, 48, 58);\n    const width = wr - wl - 1;\n    // A part-filled row fills from the walls in, the dip a draining funnel makes.\n    for (let n = 0; n \u003c width && cells > 0; n++, cells--) {\n      const x = n & 1 ? wr - 1 - (n >> 1) : wl + 1 + (n >> 1);\n      const s = params.grain[y * W + x] / 255;\n      add(fb, x, y, col[0] * s * 0.7, col[1] * s * 0.7, col[2] * s * 0.7);\n    }\n  }\n\n  // Pegs glow for a moment each time a ball strikes them.\n  for (let n = 0; n \u003c params.pegs; n++) {\n    const v = 0.42 + 0.58 * (1 - Math.exp(-params.glow[n] * 0.5));\n    add(fb, params.pegX[n], params.pegY[n], col[9] * v, col[10] * v, col[11] * v);\n  }\n\n  const colBin = params.colBin;\n  for (let x = 0; x \u003c W; x++) {\n    if (colBin[x] !== -2) continue;\n    for (let y = params.binTop + 1; y \u003c H; y++) add(fb, x, y, 40, 42, 52);\n  }\n\n  // The pile, falling away while the floor is open.\n  const drop = params.drain >= 0 ? Math.floor(0.5 * 300 * params.drain * params.drain) : 0;\n  const pile = params.pile;\n  for (let y = BOTTOM; y > params.binTop; y--) {\n    const to = y + drop;\n    if (to > BOTTOM) continue;\n    for (let x = 0; x \u003c W; x++) {\n      const s = pile[y * W + x];\n      if (s === 0) continue;\n      const c = params.band[colBin[x]] * 3;\n      const v = s / 255;\n      add(fb, x, to, col[c] * v, col[c + 1] * v, col[c + 2] * v);\n    }\n  }\n\n  // Where theory says each bin will stand when the hopper is empty.\n  if (params.drain \u003c 0) {\n    for (let j = 0; j \u003c= params.rows; j++) {\n      const tall = (params.total * params.expect[j]) / params.iw;\n      if (tall \u003c 1) continue;\n      const y = BOTTOM - Math.floor(tall);\n      if (y \u003c= params.binTop) continue;\n      const c = params.band[j] * 3;\n      const x0 = params.x0 + j * params.dx;\n      for (let x = x0; x \u003c x0 + params.iw; x++) {\n        if (pile[y * W + x] !== 0) continue;\n        add(fb, x, y, col[c] * 0.22, col[c + 1] * 0.22, col[c + 2] * 0.22);\n      }\n    }\n  }\n\n  // Balls in flight, each spread over its four nearest LEDs so it glides.\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (params.mode[i] === 0) continue;\n    const fx = params.bx[i] - 0.5;\n    const fy = params.by[i] - 0.5;\n    const ix = Math.floor(fx);\n    const iy = Math.floor(fy);\n    const ax = fx - ix;\n    const ay = fy - iy;\n    for (let q = 0; q \u003c 4; q++) {\n      const x = ix + (q & 1);\n      const y = iy + (q >> 1);\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const w = (q & 1 ? ax : 1 - ax) * (q >> 1 ? ay : 1 - ay);\n      add(fb, x, y, col[9] * w, col[10] * w, col[11] * w);\n    }\n  }\n\n  for (let p = 0, i = 0; p \u003c W * H; p++, i += 3) {\n    const r = fb[i];\n    const g = fb[i + 1];\n    const b = fb[i + 2];\n    display.setPixel(p % W, (p / W) | 0, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","layer":{"id":"layer-galton","type":"code","name":"galton","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Galton Board\n// Family:  data\n// Idea:    Balls pour from a hopper through a triangle of pegs, each peg a coin toss, and the bins under it fill into a bell curve coloured by how many standard deviations each bin sits from the middle.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rate=30..240, Bias=-0.3..0.3, Rows=8..15\n//\n// Knob 1: Hue. Turns the pile round the wheel; the middle, the one-sigma band and the tails keep their steps apart.\n// Knob 2: Rate. Balls let through the neck each second, from a trickle to a pour.\n// Knob 3: Bias. The chance of bouncing right at a peg, from 0.2 to 0.8; at 0 it is a fair coin and the curve stands straight.\n// Knob 4: Rows. Rows of pegs, which is also coins tossed per ball; more rows make more, narrower bins.\n// Buttons: K1 tap opens the floor, the bins drain and the hopper fills again.\n\nconst W = 64;\nconst H = 128;\nconst NECK = 11;\nconst PEG_TOP = 17;\nconst BOTTOM = H - 1;\nconst MAXB = 400;\nconst MAXP = 136;\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// The hopper's walls: a funnel from the top corners down to a two-LED neck.\nfunction wallLeft(y) {\n  return Math.round(1 + (29 * y) / NECK);\n}\n\nfunction layout(params, rows) {\n  params.rows = rows;\n  // Bins and pegs share one spacing, as wide as the panel allows for this many bins.\n  const dx = Math.floor(65 / (rows + 1));\n  const span = (rows + 1) * dx - 1;\n  const x0 = Math.floor((W - span) / 2);\n  const mid = x0 + span / 2;\n  const dy = dx * 0.866;\n  params.dx = dx;\n  params.iw = dx - 1;\n  params.x0 = x0;\n  params.mid = mid;\n  params.dy = dy;\n  params.trow = 0.11 * Math.sqrt(dy / 3.46);\n  for (let r = 0; r \u003c rows; r++) {\n    for (let j = 0; j \u003c= r; j++) {\n      const n = (r * (r + 1)) / 2 + j;\n      params.pegX[n] = Math.floor(mid + (j - r / 2) * dx);\n      params.pegY[n] = Math.round(PEG_TOP + r * dy);\n      params.glow[n] = 0;\n    }\n  }\n  params.pegs = (rows * (rows + 1)) / 2;\n  // The last row of pegs sits on top of the dividers.\n  params.binTop = params.pegY[params.pegs - 1];\n  params.binRows = BOTTOM - params.binTop;\n  const col = params.colBin;\n  for (let x = 0; x \u003c W; x++) {\n    const rel = x - x0;\n    if (rel === -1 || rel === span) col[x] = -2;\n    else if (rel \u003c 0 || rel > span) col[x] = -1;\n    else if ((rel + 1) % dx === 0) col[x] = -2;\n    else col[x] = Math.floor(rel / dx);\n  }\n}\n\nfunction pmf(n, j, p) {\n  let c = 1;\n  for (let i = 0; i \u003c j; i++) c = (c * (n - i)) / (i + 1);\n  return c * Math.pow(p, j) * Math.pow(1 - p, n - j);\n}\n\n// Bands and the curve the pile is heading for, from the bias as it stands.\nfunction theory(params) {\n  const n = params.rows;\n  const p = params.p;\n  const sd = Math.sqrt(n * p * (1 - p));\n  let top = 0;\n  for (let j = 0; j \u003c= n; j++) {\n    const m = pmf(n, j, p);\n    params.expect[j] = m;\n    if (m > top) top = m;\n    const z = Math.abs(j - n * p) / sd;\n    params.band[j] = z \u003c= 1 ? 0 : z \u003c= 2 ? 1 : 2;\n  }\n  params.top = top;\n}\n\nfunction fill(params) {\n  theory(params);\n  // Enough balls that the tallest bin should end a little under the brim.\n  params.total = Math.round((0.9 * params.iw * params.binRows) / params.top);\n  params.hopper = params.total;\n  params.count.fill(0);\n  params.pile.fill(0);\n}\n\nfunction place(params, j, xp) {\n  const iw = params.iw;\n  const level = Math.floor(params.count[j] / iw);\n  if (level >= params.binRows) return false;\n  const y = BOTTOM - level;\n  const left = params.x0 + j * params.dx;\n  let c = Math.max(left, Math.min(left + iw - 1, Math.floor(xp)));\n  // The nearest free place in the row the bin is filling.\n  for (let d = 0; d \u003c iw * 2; d++) {\n    const cc = c + (d & 1 ? -((d + 1) >> 1) : d >> 1);\n    if (cc \u003c left || cc >= left + iw) continue;\n    if (params.pile[y * W + cc] === 0) {\n      c = cc;\n      break;\n    }\n  }\n  params.pile[y * W + c] = 140 + Math.floor(Math.random() * 115);\n  params.count[j]++;\n  if (params.count[j] >= iw * params.binRows) params.full = true;\n  return true;\n}\n\nfunction release(params) {\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (params.mode[i] !== 0) continue;\n    params.mode[i] = 1;\n    params.bt[i] = 0;\n    params.row[i] = 0;\n    params.bj[i] = 0;\n    params.bx[i] = params.mid;\n    params.by[i] = NECK;\n    params.hopper--;\n    return;\n  }\n}\n\nfunction toss(params, i) {\n  params.nj[i] = params.bj[i] + (Math.random() \u003c params.p ? 1 : 0);\n  params.glow[(params.row[i] * (params.row[i] + 1)) / 2 + params.bj[i]] += 1;\n}\n\nfunction moveBalls(params, dt) {\n  const T = params.trow;\n  const dy = params.dy;\n  for (let i = 0; i \u003c MAXB; i++) {\n    const m = params.mode[i];\n    if (m === 0) continue;\n    if (m === 1) {\n      // Out of the neck and onto the top peg.\n      params.bt[i] += dt / 0.14;\n      const t = Math.min(1, params.bt[i]);\n      params.bx[i] = params.mid;\n      params.by[i] = NECK + (params.pegY[0] - 1 - NECK) * t * t;\n      if (params.bt[i] >= 1) {\n        params.bt[i] -= 1;\n        params.mode[i] = 2;\n        toss(params, i);\n      }\n    } else if (m === 2) {\n      params.bt[i] += dt / T;\n      const r = params.row[i];\n      const a = (r * (r + 1)) / 2 + params.bj[i];\n      if (r === params.rows - 1) {\n        // Off the last peg and into a bin.\n        params.mode[i] = params.drain >= 0 ? 4 : 3;\n        params.vy[i] = -dy * 2;\n        params.bt[i] = 0;\n        params.tx[i] = params.x0 + params.nj[i] * params.dx + Math.random() * params.iw;\n        params.bj[i] = params.nj[i];\n        continue;\n      }\n      const b = ((r + 1) * (r + 2)) / 2 + params.nj[i];\n      const t = Math.min(1, params.bt[i]);\n      params.bx[i] = params.pegX[a] + 0.5 + (params.pegX[b] - params.pegX[a]) * t;\n      // A little hop off the peg, then falling.\n      params.by[i] = params.pegY[a] - 1 + (params.pegY[b] - params.pegY[a]) * t * t - dy * 0.35 * 4 * t * (1 - t);\n      if (params.bt[i] >= 1) {\n        params.bt[i] -= 1;\n        params.row[i] = r + 1;\n        params.bj[i] = params.nj[i];\n        toss(params, i);\n      }\n    } else {\n      params.vy[i] = Math.min(70, params.vy[i] + 400 * dt);\n      params.by[i] += params.vy[i] * dt;\n      params.bt[i] += dt;\n      if (m === 3) {\n        params.bx[i] += (params.tx[i] - params.bx[i]) * Math.min(1, dt * 12);\n        const j = params.bj[i];\n        const land = BOTTOM - Math.floor(params.count[j] / params.iw);\n        if (params.drain >= 0) params.mode[i] = 4;\n        else if (params.by[i] >= land) {\n          params.mode[i] = 0;\n          if (!place(params, j, params.bx[i])) params.full = true;\n        }\n      } else if (params.by[i] > H + 2) params.mode[i] = 0;\n    }\n  }\n}\n\nexport function setup(params) {\n  params.pegX = new Int16Array(MAXP);\n  params.pegY = new Int16Array(MAXP);\n  params.glow = new Float32Array(MAXP);\n  params.colBin = new Int8Array(W);\n  params.count = new Int16Array(17);\n  params.expect = new Float32Array(17);\n  params.band = new Uint8Array(17);\n  params.pile = new Uint8Array(W * H);\n  params.mode = new Uint8Array(MAXB);\n  params.bx = new Float32Array(MAXB);\n  params.by = new Float32Array(MAXB);\n  params.bt = new Float32Array(MAXB);\n  params.vy = new Float32Array(MAXB);\n  params.tx = new Float32Array(MAXB);\n  params.row = new Int8Array(MAXB);\n  params.bj = new Int8Array(MAXB);\n  params.nj = new Int8Array(MAXB);\n  params.fb = new Float32Array(W * H * 3);\n  params.colours = new Float32Array(4 * 3);\n  params.hueKey = -1;\n  params.grain = new Uint8Array(W * (NECK + 1));\n  for (let i = 0; i \u003c params.grain.length; i++) params.grain[i] = 120 + Math.floor(Math.random() * 135);\n  let cap = 0;\n  for (let y = 0; y \u003c= NECK; y++) cap += 63 - 2 * wallLeft(y);\n  params.hopCap = cap;\n  params.rows = 0;\n  params.p = 0.5;\n  params.acc = 0;\n  params.drain = -1;\n  params.hold = 0;\n  params.refill = 1;\n  params.refillFrom = 1;\n  params.full = false;\n  params.fresh = true;\n}\n\nfunction startDrain(params) {\n  if (params.drain >= 0) return;\n  params.drain = 0;\n  // Whatever is left in the hopper stays there and is topped up after.\n  params.refillFrom = params.hopper / params.total;\n  for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] === 3) params.mode[i] = 4;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 30, 0, 8];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  const rate = Math.max(1, k[1]);\n  params.p = 0.5 + Math.max(-0.3, Math.min(0.3, k[2]));\n  const rows = Math.max(1, Math.min(15, Math.round(k[3])));\n\n  if (params.fresh) {\n    params.fresh = false;\n    layout(params, rows);\n    fill(params);\n    // Start partway through a fill: over half the balls already sorted, and\n    // two and a half seconds of the stream run so the board is busy.\n    const n = Math.floor(params.total * 0.55);\n    for (let b = 0; b \u003c n; b++) {\n      let j = 0;\n      for (let r = 0; r \u003c rows; r++) if (Math.random() \u003c params.p) j++;\n      place(params, j, params.x0 + j * params.dx + Math.random() * params.iw);\n    }\n    params.hopper -= n;\n    for (let s = 0; s \u003c 75; s++) {\n      params.acc += rate / 30;\n      while (params.acc >= 1) {\n        params.acc -= 1;\n        release(params);\n      }\n      moveBalls(params, 1 / 30);\n    }\n  }\n\n  if (rows !== params.rows || (input.btnPressed && input.btnPressed[0])) {\n    if (params.drain \u003c 0) startDrain(params);\n    params.nextRows = rows;\n  }\n  theory(params);\n\n  if (params.drain >= 0) {\n    params.drain += dt;\n    // The floor is open: the pile falls out under gravity.\n    if (0.5 * 300 * params.drain * params.drain > H) {\n      params.drain = -1;\n      if (params.nextRows && params.nextRows !== params.rows) {\n        // Balls still on the old pegs have nowhere to go on the new board.\n        for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] !== 0) params.mode[i] = 4;\n        layout(params, params.nextRows);\n      }\n      fill(params);\n      params.full = false;\n      params.hold = 0;\n      params.refill = 0;\n    }\n  } else if (params.refill \u003c 1) {\n    params.refill = Math.min(1, params.refill + dt / 0.8);\n  } else {\n    let flying = 0;\n    for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] >= 1 && params.mode[i] \u003c= 3) flying++;\n    if (params.full || (params.hopper \u003c= 0 && flying === 0)) {\n      // Hold the finished curve a moment before the floor opens.\n      params.hold += dt;\n      if (params.hold > 2.5) startDrain(params);\n    } else if (!params.full) {\n      params.acc += rate * dt;\n      while (params.acc >= 1 && params.hopper > 0) {\n        params.acc -= 1;\n        release(params);\n      }\n      if (params.hopper \u003c= 0) params.acc = 0;\n    }\n  }\n\n  moveBalls(params, dt);\n  const fade = Math.exp(-dt * 5);\n  for (let n = 0; n \u003c params.pegs; n++) params.glow[n] *= fade;\n}\n\nfunction add(fb, x, y, r, g, b) {\n  const i = (y * W + x) * 3;\n  fb[i] += r;\n  fb[i + 1] += g;\n  fb[i + 2] += b;\n}\n\nexport function draw(display, params, time) {\n  const fb = params.fb;\n  const col = params.colours;\n  if (params.hueKey !== params.hue) {\n    params.hueKey = params.hue;\n    // K1 at 0 opens on mint, with the tails stepping towards blue.\n    const h = params.hue + 0.42;\n    const cs = [hsv(h, 0.62, 1), hsv(h + 0.09, 0.8, 0.9), hsv(h + 0.19, 0.9, 0.82), hsv(h + 0.05, 0.2, 1)];\n    for (let c = 0; c \u003c 4; c++) {\n      col[c * 3] = cs[c][0];\n      col[c * 3 + 1] = cs[c][1];\n      col[c * 3 + 2] = cs[c][2];\n    }\n  }\n  fb.fill(0);\n\n  // The hopper, filled from the neck up with what is left to drop.\n  const from = params.refillFrom;\n  const left = params.drain >= 0 ? from : params.refill \u003c 1 ? from + (1 - from) * params.refill : params.hopper / params.total;\n  let cells = Math.round(params.hopCap * Math.max(0, left));\n  for (let y = NECK; y >= 0; y--) {\n    const wl = wallLeft(y);\n    const wr = W - 1 - wl;\n    add(fb, wl, y, 46, 48, 58);\n    add(fb, wr, y, 46, 48, 58);\n    const width = wr - wl - 1;\n    // A part-filled row fills from the walls in, the dip a draining funnel makes.\n    for (let n = 0; n \u003c width && cells > 0; n++, cells--) {\n      const x = n & 1 ? wr - 1 - (n >> 1) : wl + 1 + (n >> 1);\n      const s = params.grain[y * W + x] / 255;\n      add(fb, x, y, col[0] * s * 0.7, col[1] * s * 0.7, col[2] * s * 0.7);\n    }\n  }\n\n  // Pegs glow for a moment each time a ball strikes them.\n  for (let n = 0; n \u003c params.pegs; n++) {\n    const v = 0.42 + 0.58 * (1 - Math.exp(-params.glow[n] * 0.5));\n    add(fb, params.pegX[n], params.pegY[n], col[9] * v, col[10] * v, col[11] * v);\n  }\n\n  const colBin = params.colBin;\n  for (let x = 0; x \u003c W; x++) {\n    if (colBin[x] !== -2) continue;\n    for (let y = params.binTop + 1; y \u003c H; y++) add(fb, x, y, 40, 42, 52);\n  }\n\n  // The pile, falling away while the floor is open.\n  const drop = params.drain >= 0 ? Math.floor(0.5 * 300 * params.drain * params.drain) : 0;\n  const pile = params.pile;\n  for (let y = BOTTOM; y > params.binTop; y--) {\n    const to = y + drop;\n    if (to > BOTTOM) continue;\n    for (let x = 0; x \u003c W; x++) {\n      const s = pile[y * W + x];\n      if (s === 0) continue;\n      const c = params.band[colBin[x]] * 3;\n      const v = s / 255;\n      add(fb, x, to, col[c] * v, col[c + 1] * v, col[c + 2] * v);\n    }\n  }\n\n  // Where theory says each bin will stand when the hopper is empty.\n  if (params.drain \u003c 0) {\n    for (let j = 0; j \u003c= params.rows; j++) {\n      const tall = (params.total * params.expect[j]) / params.iw;\n      if (tall \u003c 1) continue;\n      const y = BOTTOM - Math.floor(tall);\n      if (y \u003c= params.binTop) continue;\n      const c = params.band[j] * 3;\n      const x0 = params.x0 + j * params.dx;\n      for (let x = x0; x \u003c x0 + params.iw; x++) {\n        if (pile[y * W + x] !== 0) continue;\n        add(fb, x, y, col[c] * 0.22, col[c + 1] * 0.22, col[c + 2] * 0.22);\n      }\n    }\n  }\n\n  // Balls in flight, each spread over its four nearest LEDs so it glides.\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (params.mode[i] === 0) continue;\n    const fx = params.bx[i] - 0.5;\n    const fy = params.by[i] - 0.5;\n    const ix = Math.floor(fx);\n    const iy = Math.floor(fy);\n    const ax = fx - ix;\n    const ay = fy - iy;\n    for (let q = 0; q \u003c 4; q++) {\n      const x = ix + (q & 1);\n      const y = iy + (q >> 1);\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const w = (q & 1 ? ax : 1 - ax) * (q >> 1 ? ay : 1 - ay);\n      add(fb, x, y, col[9] * w, col[10] * w, col[11] * w);\n    }\n  }\n\n  for (let p = 0, i = 0; p \u003c W * H; p++, i += 3) {\n    const r = fb[i];\n    const g = fb[i + 1];\n    const b = fb[i + 2];\n    display.setPixel(p % W, (p / W) | 0, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Rate=30..240, Bias=-0.3..0.3, Rows=8..15","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the pile round the wheel; the middle, the one-sigma band and the tails keep their steps apart."},{"name":"Rate","min":30,"max":240,"about":"Balls let through the neck each second, from a trickle to a pour."},{"name":"Bias","min":-0.3,"max":0.3,"about":"The chance of bouncing right at a peg, from 0.2 to 0.8; at 0 it is a fair coin and the curve stands straight."},{"name":"Rows","min":8,"max":15,"about":"Rows of pegs, which is also coins tossed per ball; more rows make more, narrower bins."}],"start":[0,30,0,8],"measures":{"motion":0.2909,"detail":0.0577,"edges":0.7232,"complexity":0.5234,"coverage":0.2361,"colour":0.1843,"drift":0.0246},"knobResponse":[0.0536,0.0477,0.0979,0.0715]},{"slug":"gear-train","title":"Gear Train","family":"machine","round":8,"note":"패널 발치의 크랭크가 색 톱니바퀴를 돌려요. 바퀴마다 아래 바퀴와 톱니를 맞물려 꼭대기까지 이어지고, 작은 바퀴일수록 빨리 돌아요. K4 를 올리면 모든 바퀴가 톱니 하나씩 딸깍 걸려 나가요.","idea":"A crank at the foot of the panel turns a train of coloured gears that climbs to the top, every gear meshing tooth for tooth with the one below.","buttons":"K1 tap reverses the crank; the train slows, stops and runs the other way.","code":"// ===== Patternflow pattern =====\n// Title:   Gear Train\n// Family:  machine\n// Idea:    A crank at the foot of the panel turns a train of coloured gears that climbs to the top, every gear meshing tooth for tooth with the one below.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the snap-together plastic gear sets children build on a pegboard\n// Round:   8\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Gears=4..9, Tick=0..1\n//\n// Knob 1: Hue. Turns the colour of every gear together, starting from a blue drive gear under yellow, green and violet.\n// Knob 2: Speed. How fast the crank turns: at the bottom of the range the drive gear creeps a tooth every few seconds, at the top it passes three teeth a second.\n// Knob 3: Gears. How many gears the train has; fewer gears are bigger, so the train always reaches from the crank to the top of the panel.\n// Knob 4: Tick. Smooth turning at 0; turned up, the crank moves a tooth at a time and every gear jumps and settles together, like a ratchet.\n// Buttons: K1 tap reverses the crank; the train slows, stops and runs the other way.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The module: half a tooth pitch on the pitch circle per tooth, in LEDs.\n// Every gear of the set has it, so any two of them mesh.\nconst MOD = 1.7;\nconst ADD = MOD;\nconst DED = 1.2 * MOD;\n// How sharply a tooth's flank turns into its tip and root: a trapezoid tooth.\nconst FLANK = 1.7;\nconst MAX = 9;\n// A big-small rhythm up the train, scaled to fill the panel's height.\nconst TEETH = [30, 15, 25, 13, 27, 14, 22, 12, 24];\n// The set's colours, bottom to top: the drive gear is blue.\nconst HUES = [0.6, 0.14, 0.34, 0.78, 0.07, 0.5, 0.92, 0.22, 0.68];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Lay out n gears scaled by s, each one leaning off the gear below by the\n// angle the plan gives it: the drive gear at the foot, every next gear\n// meshing with the one below. Null when a gear runs too far off the panel's\n// sides or into any gear but its neighbours.\nfunction place(n, s, plan) {\n  const g = [];\n  for (let i = 0; i \u003c n; i++) {\n    const z = Math.max(10, Math.round(TEETH[i] * s));\n    const rp = (MOD * z) / 2;\n    g.push({ z, rp, ro: rp + ADD, x: 0, y: 0, alpha: 0 });\n  }\n  g[0].x = g[0].ro * 0.55 + (W - g[0].ro * 1.1) * plan[0];\n  for (let i = 1; i \u003c n; i++) {\n    const a = g[i - 1];\n    const b = g[i];\n    const d = a.rp + b.rp;\n    b.x = a.x + d * Math.sin(plan[i]);\n    b.y = a.y - d * Math.cos(plan[i]);\n    if (b.x \u003c b.ro * 0.45 || b.x > W - b.ro * 0.45 || b.y + b.ro > g[0].y + g[0].ro) return null;\n    for (let j = 0; j \u003c i - 1; j++) {\n      const c = g[j];\n      if (Math.hypot(b.x - c.x, b.y - c.y) \u003c b.ro + c.ro + 1.5) return null;\n    }\n    b.alpha = Math.atan2(b.y - a.y, b.x - a.x);\n  }\n  return g;\n}\n\nfunction span(g) {\n  let top = Infinity;\n  for (const q of g) top = Math.min(top, q.y - q.ro);\n  return g[0].y + g[0].ro - top;\n}\n\nfunction layout(P, n) {\n  // Try a few hundred plans and keep the one whose gears can be biggest while\n  // the train still fits between the foot of the panel and its top. Links\n  // mostly lean to alternate sides and lean between 20 and 75 degrees.\n  let best = null;\n  let bestS = 0.3;\n  const plan = [0];\n  for (let c = 0; c \u003c 240; c++) {\n    plan[0] = hash(n, c * 16);\n    let side = hash(n, c * 16 + 1) \u003c 0.5 ? -1 : 1;\n    for (let i = 1; i \u003c n; i++) {\n      if (hash(c, i * 7 + n) \u003c 0.75) side = -side;\n      plan[i] = side * (0.35 + 0.95 * hash(c * 31 + n, i));\n    }\n    for (let s = 2.4; s > bestS + 0.01; s -= 0.02) {\n      const g = place(n, s, plan);\n      if (g && span(g) \u003c= 132) {\n        bestS = s;\n        best = g;\n        break;\n      }\n    }\n  }\n  if (!best) {\n    for (let i = 0; i \u003c n; i++) plan[i] = i ? (i % 2 ? -0.35 : 0.35) : 0.5;\n    best = place(n, 0.3, plan);\n  }\n  const shift = 64 + span(best) / 2 - (best[0].y + best[0].ro);\n  for (const q of best) q.y += shift;\n  P.gears = best;\n  P.n = n;\n\n  // The pegboard: brown hardboard with a hole every four LEDs, and under each\n  // gear a soft shadow cast down and to the right.\n  const board = P.board;\n  const base = [0, 0, 0];\n  hsvInto(base, 0, 0.075, 0.55, 0.21);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const hx = (x % 4) - 1.5;\n      const hy = (y % 4) - 1.5;\n      const hole = clamp01(1.25 - Math.hypot(hx, hy));\n      let shade = 1 - 0.72 * hole;\n      for (const q of best) {\n        const d = Math.hypot(x - q.x - 1.5, y - q.y - 2.5);\n        shade *= 1 - 0.55 * clamp01((q.rp + 1.5 - d) / 1.5);\n      }\n      const p = y * W + x;\n      board[p * 3] = base[0] * shade;\n      board[p * 3 + 1] = base[1] * shade;\n      board[p * 3 + 2] = base[2] * shade;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.board = new Float32Array(N * 3);\n  P.frame = new Float32Array(N * 3);\n  P.col = new Float32Array(3);\n  P.theta = new Float32Array(MAX);\n  P.u = 0;\n  P.vel = 2;\n  P.dir = 1;\n  P.speed = 2;\n  P.tick = 0.06;\n  P.hue = 0;\n  layout(P, 4);\n}\n\n// The snap of one ratchet step: quick, a little past, and back.\nfunction snap(f) {\n  const t = Math.min(1, f / 0.28) - 1;\n  return 1 + 2.70158 * t * t * t + 1.70158 * t * t;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.speed = Math.max(0.2, Math.min(3, k[1]));\n  const n = Math.max(4, Math.min(MAX, Math.round(k[2])));\n  P.tick = clamp01(k[3]);\n  if (n !== P.n) layout(P, n);\n\n  if (input.btnPressed && input.btnPressed[0]) P.dir = -P.dir;\n  // The crank speeds up or comes round to the other way in about half a second.\n  const target = P.dir * P.speed;\n  P.vel += (target - P.vel) * Math.min(1, dt * 5);\n  P.u += P.vel * dt;\n\n  // The drive gear's angle, a tooth at a time as Tick turns up.\n  const g = P.gears;\n  const whole = Math.floor(P.u);\n  const stepped = whole + snap(P.u - whole);\n  const teeth = P.u * (1 - P.tick) + stepped * P.tick;\n  P.theta[0] = (teeth * 2 * Math.PI) / g[0].z;\n  // Each gear takes its angle from the one below: where their pitch circles\n  // touch, a tooth of one sits in a gap of the other.\n  for (let i = 1; i \u003c g.length; i++) {\n    const a = g[i - 1];\n    const b = g[i];\n    P.theta[i] = b.alpha + Math.PI - (Math.PI - a.z * (b.alpha - P.theta[i - 1])) / b.z;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const out = P.frame;\n  out.set(P.board);\n  const col = P.col;\n  const g = P.gears;\n\n  for (let i = 0; i \u003c g.length; i++) {\n    const q = g[i];\n    const th = P.theta[i];\n    const z = q.z;\n    const rp = q.rp;\n    const ro = q.ro;\n    const root = rp - DED;\n    const groove = root - 1.6;\n    const hub = Math.max(2.6, rp * 0.26);\n    const holes = rp >= 18 ? 6 : rp >= 13 ? 5 : rp >= 9 ? 3 : 0;\n    const ringR = (hub + groove) / 2;\n    const holeR = holes ? Math.min(0.3 * (groove - hub), ringR * Math.sin(Math.PI / holes) * 0.55) : 0;\n    const step = holes ? (2 * Math.PI) / holes : 1;\n    hsvInto(col, 0, HUES[i] + P.hue, 0.82, 0.93);\n    const crank = i === 0;\n    const ct = Math.cos(th + step / 2);\n    const st = Math.sin(th + step / 2);\n    const arm = ringR + 1;\n\n    const x0 = Math.max(0, Math.floor(q.x - ro - 1));\n    const x1 = Math.min(W - 1, Math.ceil(q.x + ro + 1));\n    const y0 = Math.max(0, Math.floor(q.y - ro - 1));\n    const y1 = Math.min(H - 1, Math.ceil(q.y + ro + 1));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = y - q.y;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x - q.x;\n        const r = Math.sqrt(dx * dx + dy * dy);\n        if (r > ro + 1) continue;\n        // The tooth outline: radius as a trapezoid wave around the rim. Inside\n        // the roots the face is whole, so the angle is only worked out near\n        // the teeth and on the ring of holes.\n        const nearTeeth = r > root - 3;\n        const nearHoles = holes > 0 && Math.abs(r - ringR) \u003c holeR + 1;\n        const beta = nearTeeth || nearHoles ? Math.atan2(dy, dx) : 0;\n        let dist = 4;\n        if (nearTeeth) {\n          const phi = z * (beta - th);\n          const c = Math.cos(phi);\n          const f = Math.max(-1, Math.min(1, FLANK * c));\n          const depth = f > 0 ? ADD : DED;\n          dist = rp + depth * f - r;\n          // On a flank the outline runs at a slant, so the distance to it is\n          // shorter than the radial gap; far from the outline that no longer holds.\n          if (Math.abs(FLANK * c) \u003c 1) {\n            const slope = (depth * FLANK * Math.sin(phi) * z) / r;\n            dist /= Math.sqrt(1 + slope * slope * clamp01(1.5 - Math.abs(dist) / 2));\n          }\n        }\n        let cover = clamp01(dist + 0.5);\n        if (cover \u003c= 0) continue;\n\n        // The crank handle on the drive gear: an arm out from the hub between\n        // two holes, and a cream knob at its end. It stands on the gear's face.\n        let handle = 0;\n        let knob = 0;\n        if (crank) {\n          const along = dx * ct + dy * st;\n          const across = -dx * st + dy * ct;\n          const armC = along > 0 && along \u003c arm ? clamp01(1.9 - Math.abs(across)) : 0;\n          const kx = along - arm;\n          knob = clamp01(3.6 - Math.sqrt(kx * kx + across * across));\n          handle = Math.max(armC, knob);\n        }\n\n        // Lightening holes, turning with the gear: the board shows through.\n        if (nearHoles) {\n          const k = Math.round((beta - th) / step);\n          const a = th + k * step;\n          const ex = dx - ringR * Math.cos(a);\n          const ey = dy - ringR * Math.sin(a);\n          cover *= 1 - clamp01(holeR - Math.sqrt(ex * ex + ey * ey) + 0.5);\n          cover = Math.max(cover, handle);\n          if (cover \u003c= 0) continue;\n        }\n\n        // Light from the top left, a groove inside the teeth, a raised hub.\n        // The outline catches the light on its top left and falls into shade\n        // on its bottom right, so the teeth stand up off the face.\n        const face = -(dx * 0.6 + dy * 0.8) / Math.max(1, r);\n        const rim = clamp01(1 - dist / 1.6);\n        let v = 1;\n        v *= 1 - 0.16 * clamp01(1 - Math.abs(r - groove) * 1.1);\n        if (r \u003c hub + 0.5) v *= 1.08 - 0.22 * clamp01(1 - Math.abs(r - hub) * 1.2);\n        if (face \u003c 0) v *= 1 + 0.32 * rim * face;\n        let R = col[0] * v;\n        let G = col[1] * v;\n        let B = col[2] * v;\n        if (face > 0) {\n          const w = 0.4 * rim * face;\n          R += (255 - R) * w;\n          G += (255 - G) * w;\n          B += (255 - B) * w;\n        }\n        // The axle peg in the middle, steel grey and still.\n        const peg = clamp01(1.9 - r);\n        if (peg > 0) {\n          R += (190 - R) * peg;\n          G += (192 - G) * peg;\n          B += (200 - B) * peg;\n        }\n        if (handle > 0) {\n          const lit = knob >= handle ? 1 : 0.8;\n          R += (245 * lit - R) * handle;\n          G += (232 * lit - G) * handle;\n          B += (205 * lit - B) * handle;\n        }\n        const p = (y * W + x) * 3;\n        out[p] += (R - out[p]) * cover;\n        out[p + 1] += (G - out[p + 1]) * cover;\n        out[p + 2] += (B - out[p + 2]) * cover;\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n  }\n}\n","layer":{"id":"layer-gear-train","type":"code","name":"gear-train","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gear Train\n// Family:  machine\n// Idea:    A crank at the foot of the panel turns a train of coloured gears that climbs to the top, every gear meshing tooth for tooth with the one below.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the snap-together plastic gear sets children build on a pegboard\n// Round:   8\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Gears=4..9, Tick=0..1\n//\n// Knob 1: Hue. Turns the colour of every gear together, starting from a blue drive gear under yellow, green and violet.\n// Knob 2: Speed. How fast the crank turns: at the bottom of the range the drive gear creeps a tooth every few seconds, at the top it passes three teeth a second.\n// Knob 3: Gears. How many gears the train has; fewer gears are bigger, so the train always reaches from the crank to the top of the panel.\n// Knob 4: Tick. Smooth turning at 0; turned up, the crank moves a tooth at a time and every gear jumps and settles together, like a ratchet.\n// Buttons: K1 tap reverses the crank; the train slows, stops and runs the other way.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The module: half a tooth pitch on the pitch circle per tooth, in LEDs.\n// Every gear of the set has it, so any two of them mesh.\nconst MOD = 1.7;\nconst ADD = MOD;\nconst DED = 1.2 * MOD;\n// How sharply a tooth's flank turns into its tip and root: a trapezoid tooth.\nconst FLANK = 1.7;\nconst MAX = 9;\n// A big-small rhythm up the train, scaled to fill the panel's height.\nconst TEETH = [30, 15, 25, 13, 27, 14, 22, 12, 24];\n// The set's colours, bottom to top: the drive gear is blue.\nconst HUES = [0.6, 0.14, 0.34, 0.78, 0.07, 0.5, 0.92, 0.22, 0.68];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Lay out n gears scaled by s, each one leaning off the gear below by the\n// angle the plan gives it: the drive gear at the foot, every next gear\n// meshing with the one below. Null when a gear runs too far off the panel's\n// sides or into any gear but its neighbours.\nfunction place(n, s, plan) {\n  const g = [];\n  for (let i = 0; i \u003c n; i++) {\n    const z = Math.max(10, Math.round(TEETH[i] * s));\n    const rp = (MOD * z) / 2;\n    g.push({ z, rp, ro: rp + ADD, x: 0, y: 0, alpha: 0 });\n  }\n  g[0].x = g[0].ro * 0.55 + (W - g[0].ro * 1.1) * plan[0];\n  for (let i = 1; i \u003c n; i++) {\n    const a = g[i - 1];\n    const b = g[i];\n    const d = a.rp + b.rp;\n    b.x = a.x + d * Math.sin(plan[i]);\n    b.y = a.y - d * Math.cos(plan[i]);\n    if (b.x \u003c b.ro * 0.45 || b.x > W - b.ro * 0.45 || b.y + b.ro > g[0].y + g[0].ro) return null;\n    for (let j = 0; j \u003c i - 1; j++) {\n      const c = g[j];\n      if (Math.hypot(b.x - c.x, b.y - c.y) \u003c b.ro + c.ro + 1.5) return null;\n    }\n    b.alpha = Math.atan2(b.y - a.y, b.x - a.x);\n  }\n  return g;\n}\n\nfunction span(g) {\n  let top = Infinity;\n  for (const q of g) top = Math.min(top, q.y - q.ro);\n  return g[0].y + g[0].ro - top;\n}\n\nfunction layout(P, n) {\n  // Try a few hundred plans and keep the one whose gears can be biggest while\n  // the train still fits between the foot of the panel and its top. Links\n  // mostly lean to alternate sides and lean between 20 and 75 degrees.\n  let best = null;\n  let bestS = 0.3;\n  const plan = [0];\n  for (let c = 0; c \u003c 240; c++) {\n    plan[0] = hash(n, c * 16);\n    let side = hash(n, c * 16 + 1) \u003c 0.5 ? -1 : 1;\n    for (let i = 1; i \u003c n; i++) {\n      if (hash(c, i * 7 + n) \u003c 0.75) side = -side;\n      plan[i] = side * (0.35 + 0.95 * hash(c * 31 + n, i));\n    }\n    for (let s = 2.4; s > bestS + 0.01; s -= 0.02) {\n      const g = place(n, s, plan);\n      if (g && span(g) \u003c= 132) {\n        bestS = s;\n        best = g;\n        break;\n      }\n    }\n  }\n  if (!best) {\n    for (let i = 0; i \u003c n; i++) plan[i] = i ? (i % 2 ? -0.35 : 0.35) : 0.5;\n    best = place(n, 0.3, plan);\n  }\n  const shift = 64 + span(best) / 2 - (best[0].y + best[0].ro);\n  for (const q of best) q.y += shift;\n  P.gears = best;\n  P.n = n;\n\n  // The pegboard: brown hardboard with a hole every four LEDs, and under each\n  // gear a soft shadow cast down and to the right.\n  const board = P.board;\n  const base = [0, 0, 0];\n  hsvInto(base, 0, 0.075, 0.55, 0.21);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const hx = (x % 4) - 1.5;\n      const hy = (y % 4) - 1.5;\n      const hole = clamp01(1.25 - Math.hypot(hx, hy));\n      let shade = 1 - 0.72 * hole;\n      for (const q of best) {\n        const d = Math.hypot(x - q.x - 1.5, y - q.y - 2.5);\n        shade *= 1 - 0.55 * clamp01((q.rp + 1.5 - d) / 1.5);\n      }\n      const p = y * W + x;\n      board[p * 3] = base[0] * shade;\n      board[p * 3 + 1] = base[1] * shade;\n      board[p * 3 + 2] = base[2] * shade;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.board = new Float32Array(N * 3);\n  P.frame = new Float32Array(N * 3);\n  P.col = new Float32Array(3);\n  P.theta = new Float32Array(MAX);\n  P.u = 0;\n  P.vel = 2;\n  P.dir = 1;\n  P.speed = 2;\n  P.tick = 0.06;\n  P.hue = 0;\n  layout(P, 4);\n}\n\n// The snap of one ratchet step: quick, a little past, and back.\nfunction snap(f) {\n  const t = Math.min(1, f / 0.28) - 1;\n  return 1 + 2.70158 * t * t * t + 1.70158 * t * t;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.speed = Math.max(0.2, Math.min(3, k[1]));\n  const n = Math.max(4, Math.min(MAX, Math.round(k[2])));\n  P.tick = clamp01(k[3]);\n  if (n !== P.n) layout(P, n);\n\n  if (input.btnPressed && input.btnPressed[0]) P.dir = -P.dir;\n  // The crank speeds up or comes round to the other way in about half a second.\n  const target = P.dir * P.speed;\n  P.vel += (target - P.vel) * Math.min(1, dt * 5);\n  P.u += P.vel * dt;\n\n  // The drive gear's angle, a tooth at a time as Tick turns up.\n  const g = P.gears;\n  const whole = Math.floor(P.u);\n  const stepped = whole + snap(P.u - whole);\n  const teeth = P.u * (1 - P.tick) + stepped * P.tick;\n  P.theta[0] = (teeth * 2 * Math.PI) / g[0].z;\n  // Each gear takes its angle from the one below: where their pitch circles\n  // touch, a tooth of one sits in a gap of the other.\n  for (let i = 1; i \u003c g.length; i++) {\n    const a = g[i - 1];\n    const b = g[i];\n    P.theta[i] = b.alpha + Math.PI - (Math.PI - a.z * (b.alpha - P.theta[i - 1])) / b.z;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const out = P.frame;\n  out.set(P.board);\n  const col = P.col;\n  const g = P.gears;\n\n  for (let i = 0; i \u003c g.length; i++) {\n    const q = g[i];\n    const th = P.theta[i];\n    const z = q.z;\n    const rp = q.rp;\n    const ro = q.ro;\n    const root = rp - DED;\n    const groove = root - 1.6;\n    const hub = Math.max(2.6, rp * 0.26);\n    const holes = rp >= 18 ? 6 : rp >= 13 ? 5 : rp >= 9 ? 3 : 0;\n    const ringR = (hub + groove) / 2;\n    const holeR = holes ? Math.min(0.3 * (groove - hub), ringR * Math.sin(Math.PI / holes) * 0.55) : 0;\n    const step = holes ? (2 * Math.PI) / holes : 1;\n    hsvInto(col, 0, HUES[i] + P.hue, 0.82, 0.93);\n    const crank = i === 0;\n    const ct = Math.cos(th + step / 2);\n    const st = Math.sin(th + step / 2);\n    const arm = ringR + 1;\n\n    const x0 = Math.max(0, Math.floor(q.x - ro - 1));\n    const x1 = Math.min(W - 1, Math.ceil(q.x + ro + 1));\n    const y0 = Math.max(0, Math.floor(q.y - ro - 1));\n    const y1 = Math.min(H - 1, Math.ceil(q.y + ro + 1));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = y - q.y;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x - q.x;\n        const r = Math.sqrt(dx * dx + dy * dy);\n        if (r > ro + 1) continue;\n        // The tooth outline: radius as a trapezoid wave around the rim. Inside\n        // the roots the face is whole, so the angle is only worked out near\n        // the teeth and on the ring of holes.\n        const nearTeeth = r > root - 3;\n        const nearHoles = holes > 0 && Math.abs(r - ringR) \u003c holeR + 1;\n        const beta = nearTeeth || nearHoles ? Math.atan2(dy, dx) : 0;\n        let dist = 4;\n        if (nearTeeth) {\n          const phi = z * (beta - th);\n          const c = Math.cos(phi);\n          const f = Math.max(-1, Math.min(1, FLANK * c));\n          const depth = f > 0 ? ADD : DED;\n          dist = rp + depth * f - r;\n          // On a flank the outline runs at a slant, so the distance to it is\n          // shorter than the radial gap; far from the outline that no longer holds.\n          if (Math.abs(FLANK * c) \u003c 1) {\n            const slope = (depth * FLANK * Math.sin(phi) * z) / r;\n            dist /= Math.sqrt(1 + slope * slope * clamp01(1.5 - Math.abs(dist) / 2));\n          }\n        }\n        let cover = clamp01(dist + 0.5);\n        if (cover \u003c= 0) continue;\n\n        // The crank handle on the drive gear: an arm out from the hub between\n        // two holes, and a cream knob at its end. It stands on the gear's face.\n        let handle = 0;\n        let knob = 0;\n        if (crank) {\n          const along = dx * ct + dy * st;\n          const across = -dx * st + dy * ct;\n          const armC = along > 0 && along \u003c arm ? clamp01(1.9 - Math.abs(across)) : 0;\n          const kx = along - arm;\n          knob = clamp01(3.6 - Math.sqrt(kx * kx + across * across));\n          handle = Math.max(armC, knob);\n        }\n\n        // Lightening holes, turning with the gear: the board shows through.\n        if (nearHoles) {\n          const k = Math.round((beta - th) / step);\n          const a = th + k * step;\n          const ex = dx - ringR * Math.cos(a);\n          const ey = dy - ringR * Math.sin(a);\n          cover *= 1 - clamp01(holeR - Math.sqrt(ex * ex + ey * ey) + 0.5);\n          cover = Math.max(cover, handle);\n          if (cover \u003c= 0) continue;\n        }\n\n        // Light from the top left, a groove inside the teeth, a raised hub.\n        // The outline catches the light on its top left and falls into shade\n        // on its bottom right, so the teeth stand up off the face.\n        const face = -(dx * 0.6 + dy * 0.8) / Math.max(1, r);\n        const rim = clamp01(1 - dist / 1.6);\n        let v = 1;\n        v *= 1 - 0.16 * clamp01(1 - Math.abs(r - groove) * 1.1);\n        if (r \u003c hub + 0.5) v *= 1.08 - 0.22 * clamp01(1 - Math.abs(r - hub) * 1.2);\n        if (face \u003c 0) v *= 1 + 0.32 * rim * face;\n        let R = col[0] * v;\n        let G = col[1] * v;\n        let B = col[2] * v;\n        if (face > 0) {\n          const w = 0.4 * rim * face;\n          R += (255 - R) * w;\n          G += (255 - G) * w;\n          B += (255 - B) * w;\n        }\n        // The axle peg in the middle, steel grey and still.\n        const peg = clamp01(1.9 - r);\n        if (peg > 0) {\n          R += (190 - R) * peg;\n          G += (192 - G) * peg;\n          B += (200 - B) * peg;\n        }\n        if (handle > 0) {\n          const lit = knob >= handle ? 1 : 0.8;\n          R += (245 * lit - R) * handle;\n          G += (232 * lit - G) * handle;\n          B += (205 * lit - B) * handle;\n        }\n        const p = (y * W + x) * 3;\n        out[p] += (R - out[p]) * cover;\n        out[p + 1] += (G - out[p + 1]) * cover;\n        out[p + 2] += (B - out[p + 2]) * cover;\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Gears=4..9, Tick=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colour of every gear together, starting from a blue drive gear under yellow, green and violet."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the crank turns: at the bottom of the range the drive gear creeps a tooth every few seconds, at the top it passes three teeth a second."},{"name":"Gears","min":4,"max":9,"about":"How many gears the train has; fewer gears are bigger, so the train always reaches from the crank to the top of the panel."},{"name":"Tick","min":0,"max":1,"about":"Smooth turning at 0; turned up, the crank moves a tooth at a time and every gear jumps and settles together, like a ratchet."}],"start":[0,2,4,0.06],"measures":{"motion":0.8362,"detail":0.0922,"edges":0.4218,"complexity":1.1517,"coverage":0.8876,"colour":0.5762,"drift":0.1048},"knobResponse":[0.3786,0.1249,0.2931,0.0655]},{"slug":"giraffe","title":"Giraffe","family":"mammal","round":23,"note":"우산 아카시아의 납작한 수관 밑에서 그물무늬기린이 보라색 혀로 잔가지를 감아 잎을 훑고, 소등쪼기새가 목을 타고 뛰어다녀요. 가끔 앞다리를 A 자로 벌리고 목을 내려 웅덩이 물을 마시면 물에 동그란 물결이 퍼져요. K3 을 돌리면 무늬가 마사이기린이나 로스차일드기린의 것으로 바뀌고, 끝에는 흰 기린이 서요.","idea":"Under the flat crown of an umbrella thorn a reticulated giraffe strips a twig with its long dark tongue, and every so often it splays its front legs and bends down to drink at the waterhole.","buttons":"K1 tap sends the giraffe down to drink now.","code":"// ===== Patternflow pattern =====\n// Title:   Giraffe\n// Family:  mammal\n// Idea:    Under the flat crown of an umbrella thorn a reticulated giraffe strips a twig with its long dark tongue, and every so often it splays its front legs and bends down to drink at the waterhole.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the browse line giraffes cut under the umbrella thorn acacia (Vachellia tortilis)\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Coat=0..3, Wind=0..1\n//\n// Knob 1: Sun. The hour, from a high white sun at 0 to a red sun setting between the giraffe's legs at 1. Round each hour the sun sinks a little and climbs back once a minute.\n// Knob 2: Speed. At 2 a lick takes about three seconds; the giraffe first goes down to drink after three, then every half minute or when its twig is bare.\n// Knob 3: Coat. Reticulated with thin white lines, Masai with jagged leaf patches, Rothschild with broad buff lines and white stockings, or pale leucistic, each on its own ground: red earth, gold grass, green grass, pale sand.\n// Knob 4: Wind. Grass and crown lean and shake with it, and dust blows over the plain until the far herd goes hazy.\n// Buttons: K1 tap sends the giraffe down to drink now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Horizon and waterhole; the crown is kept wider than the panel to rock.\nconst [HOR, PCX, PCY, PRX, PRY] = [94, 50, 113.5, 14, 4.8];\nconst [CW, CH, CO] = [80, 26, 8];\nconst { min, max, floor, round, sin, cos, sqrt, exp, PI } = Math;\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst smin = (a, b, k, h = cl(0.5 + (0.5 * (b - a)) / k, 0, 1)) => b + (a - b) * h - k * h * (1 - h);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The light from afternoon to dusk, one row per hour.\nconst SKY = [\n  [74, 134, 216, 186, 210, 226, 255, 250, 228, 1, 0.98, 0.92, 1],\n  [62, 114, 206, 236, 208, 164, 255, 238, 180, 1.04, 0.92, 0.78, 0.97],\n  [56, 78, 170, 255, 170, 94, 255, 198, 100, 1.08, 0.8, 0.6, 0.88],\n  [40, 38, 108, 248, 108, 72, 255, 132, 60, 1, 0.64, 0.52, 0.74],\n];\n// Each coat: patch, line, mane, and the ground it stands on.\nconst COATS = [\n  { p: [150, 54, 22], l: [250, 240, 214], m: [92, 42, 22], land: [204, 142, 92] },\n  { p: [108, 50, 26], l: [226, 184, 122], m: [80, 42, 24], land: [214, 182, 98] },\n  { p: [180, 98, 44], l: [236, 212, 164], m: [112, 62, 32], land: [160, 176, 86] },\n  { p: [224, 204, 172], l: [252, 248, 238], m: [200, 168, 132], land: [224, 210, 166] },\n];\n// The pale of the lower legs.\nconst STOCK = [244, 234, 212];\nconst [BODY, NECK, HEAD, LEGN, LEGF, MANE, OSS, TIP, EAR, TAIL, TUFT, HOOF, MUZ] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];\n\n// The coat as a 128 x 128 wrapping texture: 1 inside a patch, 0 on a line.\nfunction buildCoat(P, kind) {\n  const S = 6.4, G = 20;\n  for (let y = 0; y \u003c 128; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      let qx = x + 0.5, qy = y + 0.5, f1 = 99, f2 = 99, id = 0, ax = 0, ay = 0, v;\n      if (kind === 1) (qx += 3 * (vn(x * 0.3, y * 0.3) - 0.5)), (qy += 3 * (vn(x * 0.3 + 9, y * 0.3) - 0.5));\n      const cx = floor(qx / S), cy = floor(qy / S);\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++) {\n          const gx = (cx + i + G) % G, gy = (cy + j + G) % G, fx = (cx + i + 0.15 + 0.7 * hash(gx, gy)) * S, fy = (cy + j + 0.15 + 0.7 * hash(gx + 50, gy)) * S;\n          const d = hyp(qx - fx, qy - fy);\n          if (d \u003c f1) (f2 = f1), (f1 = d), (id = gx * 31 + gy), (ax = qx - fx), (ay = qy - fy);\n          else if (d \u003c f2) f2 = d;\n        }\n      const e = f2 - f1;\n      if (kind === 0) v = sm(0.7, 1.4, e);\n      else if (kind === 1) {\n        // Masai patches are cut into leaves and stars.\n        const thr = 1.9 + sin(Math.atan2(ay, ax) * 5 + id) + 0.6 * vn(x * 0.7, y * 0.7);\n        v = sm(thr - 0.5, thr + 0.5, e);\n      } else v = kind === 2 ? sm(1.3, 2.6, e) : sm(1, 2.2, e) * 0.9;\n      P.tex[y * 128 + x] = v;\n      P.tsh[y * 128 + x] = 0.84 + 0.3 * hash(id, 7);\n    }\n  P.coat = kind;\n}\n\n// A thick line into the wood layer.\nfunction stroke(A, pts, r0, r1, val) {\n  for (let j = 0; j + 2 \u003c pts.length; j += 2) {\n    const [ax, ay, bx, by] = pts.slice(j, j + 4), n = 2 * hyp(bx - ax, by - ay);\n    for (let s = 0; s \u003c= n; s++) {\n      const t = s / n, x = mix(ax, bx, t), y = mix(ay, by, t), r = mix(r0, r1, (j + 2 * t) / (pts.length - 2));\n      for (let yy = floor(y - r); yy \u003c= y + r; yy++)\n        for (let xx = floor(x - r); xx \u003c= x + r; xx++)\n          if (hyp(xx + 0.5 - x, yy + 0.5 - y) \u003c= r && xx >= 0 && xx \u003c W) A[yy * W + xx] = max(A[yy * W + xx], val * (1.1 - (0.35 * (xx + 0.5 - x)) / r));\n    }\n  }\n}\n\nfunction build(P) {\n  // The crown: flat layers of leaves over a flat browse line, with a hollow\n  // eaten up into it where the giraffe reaches.\n  for (let x = 0; x \u003c CW; x++) {\n    const X = x - CO, top = 3 + 0.0028 * (X - 28) ** 2 + 2.2 * vn(X * 0.18, 1.5);\n    const bot = 19.5 + 1.6 * vn(X * 0.3, 4.5) + 0.0016 * (X - 28) ** 2 - 6.5 * exp(-(((X - 53.5) / 4.2) ** 2));\n    for (let y = 0; y \u003c CH; y++) {\n      const i = y * CW + x, f = (y - top) / (bot - top), n = vn(X * 0.16, y * 0.42) * 0.6 + vn(X * 0.5, y * 0.6) * 0.4;\n      if (f \u003c 0 || f > 1) continue;\n      const k = n + 0.125 + 0.125 * sin(y * 0.9 + 2.4 * vn(X * 0.08, 2)) - 0.3 * sm(0.75, 1, f) - 0.35 * sm(0.18, 0, f);\n      if (k > 0.34) (P.cA[i] = 1), (P.cL[i] = (1.15 - 0.6 * f) * (0.75 + 0.5 * n) * (0.85 + 0.3 * hash(X + 300, y)));\n      else if (k > 0.2 && f > 0.12) P.cA[i] = 1;\n    }\n  }\n  // The trunk, and crooked branches fanning up to the crown.\n  stroke(P.wood, [58.5, 104, 57.5, 86, 59, 66, 57.5, 50], 2.2, 1.7, 1);\n  for (const b of [[57.5, 50, 53, 41, 48, 37, 41, 29, 31, 22, 24, 19], [57.5, 52, 55, 42, 51, 33, 50, 25, 46, 19], [58, 50, 61, 40, 61, 31, 65, 21], [58, 60, 54, 55, 46, 50]]) stroke(P.wood, b, 1.5, 0.8, 0.85);\n  // The ground, and dust that wraps every 128 columns.\n  for (let i = HOR * W; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    P.gnd[i] = mix(vn(x * 0.12, y * 0.9), vn(x * 0.6, y * 0.18), (y - HOR) / (H - HOR)) * 0.7 + 0.3 * hash(x, y + 700);\n  }\n  for (let i = 0; i \u003c 128 * 58; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => vn(X * 0.07, y * 0.16) * 0.7 + vn(X * 0.19, y * 0.3 + 5) * 0.3;\n    P.haze[i] = mix(f(x), f(x + 128), x / 128);\n  }\n  P.hill = Array.from({ length: W }, (_, x) => HOR - 2 - 2.5 * vn(x * 0.07, 3) - 1.5 * vn(x * 0.2, 7));\n  // Dry grass, none standing in the water.\n  P.blades = [];\n  while (P.blades.length \u003c 230) {\n    const y = HOR + 5 + (H - HOR - 4) * sqrt(rnd()), x = rnd() * 66 - 1;\n    if (((x - PCX) / (PRX + 1.5)) ** 2 + ((y - PCY) / (PRY + 2)) ** 2 > 1) P.blades.push([x, y, 1.5 + (y - HOR) * 0.2 * (0.6 + 0.8 * rnd()), rnd() * 7, 0.7 + 0.6 * rnd()]);\n  }\n  P.herd = Array.from({ length: 7 }, (_, i) => [i * 9.5 + rnd() * 5, HOR + 0.5 + rnd() * 2.2, 0.35 + rnd() * 0.3, rnd() * 7]);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.g = {\n    f: F(N * 3), z: new Int8Array(N), p: new Uint8Array(N), u: F(N), v: F(N), tex: F(16384), tsh: F(16384), gnd: F(N), wood: F(N), cA: F(CW * CH), cL: F(CW * CH),\n    haze: F(128 * 58), row: F(HOR * 3), bg: F(N * 3), coat: -1, t: 0, dk: 0, dt: 0, next: 3.4, legN: 0, legF: 0, nk: 0, tc: 0.6, tp: 2.8, tw: 0, twv: 0, tl: 9,\n    ear: 1, flick: 0, swish: 0, sw: 3, ox: 0.55, oxT: 1, hop: 1, fall: [], rip: [], ripT: 0,\n  };\n  build(params.g);\n}\n\nexport function update(dt, input, params) {\n  if (!params.g) setup(params);\n  const P = params.g, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2), coat = cl(round(k[2]), 0, 3), w = (P.wind = cl(k[3], 0, 1));\n  if (coat !== P.coat) buildCoat(P, coat);\n  const t = (P.t += d), sunK = cl(k[0], 0, 1);\n  // The sun sinks and climbs back a little round the hour the knob sets.\n  P.h = sunK + (1 - sunK) * 0.3 * (0.5 - 0.5 * cos((2 * PI * t) / 60));\n\n  // Down to drink: the front legs go out one by one, then the neck comes down.\n  if (input.btnPressed && input.btnPressed[0] && P.dk === 0) P.next = 0;\n  const T = (P.dt += d);\n  if (P.dk === 0) {\n    if ((P.next -= d) \u003c= 0 || (P.tl \u003c= 0 && P.tc > 1.6)) (P.dk = 1), (P.dt = 0);\n  } else if (P.dk === 1) {\n    [P.legN, P.legF, P.nk] = [sm(0, 0.7, T), sm(0.45, 1.15, T), sm(0.8, 2.6, T)];\n    if (T >= 2.6) (P.dk = 2), (P.dt = 0);\n  } else if (P.dk === 2) {\n    // Sips: the head dips and lifts, and rings spread on the water.\n    P.nk = 1 - 0.035 * (0.5 - 0.5 * cos(T * 4.4));\n    if ((P.ripT -= d) \u003c= 0) (P.ripT = 0.7 + rnd() * 0.4), P.rip.push([P.mx, P.my + 1, 0, 1]);\n    if (T >= 3.4) (P.dk = 3), (P.dt = 0);\n  } else {\n    // Up again fast, the head first, then the legs gathered in.\n    [P.nk, P.legN, P.legF] = [1 - sm(0, 1, T), 1 - sm(0.9, 1.6, T), 1 - sm(0.6, 1.3, T)];\n    if (T >= 1.8) (P.dk = 0), (P.next = 26 + rnd() * 12), (P.tl = 9), (P.tc = 1.3);\n  }\n\n  // The tongue curls round the twig to strip it. Then the jaw chews.\n  const browsing = P.dk === 0 && P.nk \u003c 0.01;\n  if ((P.tc += d) > P.tp) (P.tc = 0), (P.tp = 2.4 + rnd() * 1.3), (P.pulled = false);\n  const c = P.tc, live = browsing && P.tl > 0;\n  P.ext = live ? (c \u003c 0.45 ? sm(0, 0.45, c) : c \u003c 1 ? 1 : 1 - sm(1, 1.3, c)) : 0;\n  P.twv += (60 * ((live && c > 0.5 && c \u003c 1 ? 3 * sm(0.5, 0.85, c) : 0) - P.tw) - 5 * P.twv) * d;\n  P.tw += P.twv * d;\n  if (live && c > 0.85 && !P.pulled) {\n    P.pulled = true;\n    P.tl--;\n    for (let n = 0; n \u003c 2; n++) P.fall.push([53.5 + rnd() * 2, 18, (rnd() - 0.5) * 4, 2 + rnd() * 3, rnd() * 7]);\n  }\n  P.chew = browsing && c > 1.3 ? 0.5 + 0.5 * sin(c * 19) : 0;\n\n  // Ear and tail keep the flies off, and the oxpecker hops along the neck.\n  if ((P.ear -= d) \u003c= 0) (P.ear = 1.5 + rnd() * 3), (P.flick = 1);\n  P.flick = max(0, P.flick - d * 3.5);\n  if ((P.sw -= d) \u003c= 0) (P.sw = 2.5 + rnd() * 4), (P.swish = 1);\n  P.swish = max(0, P.swish - d * 0.9);\n  P.tail = 0.12 * sin(t * 1.1) + 0.5 * P.swish * sin(t * 9);\n  if ((P.oxT -= d) \u003c= 0) (P.oxT = 0.7 + rnd() * 1.8), (P.ox0 = P.ox), (P.ox1 = cl(P.ox + (rnd() \u003c 0.5 ? -1 : 1) * (0.05 + rnd() * 0.1), 0.3, 0.78)), (P.hop = 0);\n  if (P.hop \u003c 1) (P.hop = min(1, P.hop + d * 4)), (P.ox = mix(P.ox0, P.ox1, P.hop));\n\n  // Falling leaves and rings on the pool.\n  P.fall = P.fall.filter((q) => ((q[4] += d), (q[0] += (q[2] + 3 * sin(q[4] * 3) + 8 * w) * d), (q[1] += q[3] * d), q[1] \u003c 124));\n  P.rip = P.rip.filter((q) => ((q[2] += d * 5), (q[3] -= d * 0.45), q[3] > 0));\n  // The far herd walks on.\n  for (const a of P.herd) if ((a[0] -= a[2] * d) \u003c -4) a[0] += 72;\n}\n\n// One LED of the giraffe, unless something nearer is there.\nfunction put(P, x, y, z, part, u, v) {\n  const i = y * W + x;\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && z >= P.z[i]) (P.z[i] = z), (P.p[i] = part), (P.u[i] = u), (P.v[i] = v);\n}\n\n// A limb through joints, each a point and a radius. Each LED keeps how far\n// along it lies (u) and across (v, plus on the mane side); the tip LEDs take\n// another part.\nfunction limb(P, J, z, part, mane = 0, tipPart = 0, tipLen = 0) {\n  let total = 0, s0 = 0;\n  for (let j = 3; j \u003c J.length; j += 3) total += hyp(J[j] - J[j - 3], J[j + 1] - J[j - 2]);\n  for (let j = 0; j + 3 \u003c J.length; j += 3) {\n    const [ax, ay, ra, bx, by, rb] = J.slice(j, j + 6), len = hyp(bx - ax, by - ay) || 1e-6, dx = (bx - ax) / len, dy = (by - ay) / len, pad = max(ra, rb) + mane + 1;\n    for (let y = floor(min(ay, by) - pad); y \u003c= max(ay, by) + pad; y++)\n      for (let x = floor(min(ax, bx) - pad); x \u003c= max(ax, bx) + pad; x++) {\n        const px = x + 0.5 - ax, py = y + 0.5 - ay, tt = cl(px * dx + py * dy, 0, len), dist = hyp(px - dx * tt, py - dy * tt);\n        const side = px * dy - py * dx, r = ra + ((rb - ra) * tt) / len, s = s0 + tt;\n        if (dist \u003c= r) put(P, x, y, z, tipLen && s > total - tipLen ? tipPart : part, s, side >= 0 ? dist / r : -dist / r);\n        else if (mane && side > 0 && dist \u003c= r + mane && s > 3 && s \u003c total - 1) put(P, x, y, z, MANE, s, 1);\n      }\n    s0 += len;\n  }\n}\n\n// Two bones from hip to hoof, bending the way dir says.\nfunction ik(ax, ay, bx, by, a, b, dir) {\n  const dx = bx - ax, dy = by - ay, d0 = hyp(dx, dy), d = min(d0, a + b - 0.01), x = (a * a - b * b + d * d) / (2 * d), h = sqrt(max(0, a * a - x * x));\n  return [ax + (dx / d0) * x - (dy / d0) * h * dir, ay + (dy / d0) * x + (dx / d0) * h * dir];\n}\n\n// Keys for the neck and head as they swing from the leaves to the water.\nconst NK = [\n  [39.5, 44, 42, 28, -0.52],\n  [50, 40, 58, 58, 1.2],\n  [49, 80, 55, 99.5, 1.66],\n];\n\nfunction giraffe(P) {\n  P.z.fill(-1);\n  const lean = max(P.legN, P.legF), ca = cos(0.22 * lean), sa = sin(0.22 * lean), drop = 3 * lean;\n  // Body space to the panel, tilted on the hip.\n  const T = (x, y) => [12 + (x - 12) * ca - (y - 72) * sa, 72 + (x - 12) * sa + (y - 72) * ca + drop];\n  // The legs go behind the body, the far pair darker. To drink the near\n  // front leg goes back and the far one forward.\n  for (const [sx, sy, hx, hy, dir, part, z] of [\n    [31, 78, 33 + 12 * P.legF, 119.5, -1, LEGF, 1],\n    [16, 75, 16, 119.5, 1, LEGF, 1],\n    [35, 78, 37 - 14 * P.legN, 121.5, -1, LEGN, 2],\n    [12, 75, 11, 121.5, 1, LEGN, 2],\n  ]) {\n    const [ax, ay] = T(sx, sy), [kx, ky] = ik(ax, ay, hx, hy, 22, 22.5, dir);\n    limb(P, [ax, ay, dir \u003c 0 ? 3.2 : 4, kx, ky, dir \u003c 0 ? 1.6 : 1.8, hx, hy, 1.3], z, part, 0, HOOF, 2.2);\n  }\n  // The body, low at the rump and high at the shoulder.\n  for (let y = 48; y \u003c 96; y++)\n    for (let x = 0; x \u003c 50; x++) {\n      const qx = x + 0.5 - 12, qy = y + 0.5 - 72 - drop, bx = 12 + qx * ca + qy * sa, by = 72 - qx * sa + qy * ca;\n      const a = (hyp((bx - 13) / 8.5, (by - 72) / 8.5) - 1) * 8.5, b = (hyp((bx - 24) / 12.5, (by - 73.5) / 9.5) - 1) * 9.5, c = (hyp((bx - 34) / 8.5, (by - 67.5) / 13.5) - 1) * 8.5;\n      if (smin(smin(a, b, 5), c, 5) \u003c= 0) put(P, x, y, 3, BODY, bx, by);\n    }\n  // The tail hangs from the rump and swishes.\n  const tj = T(5.5, 65);\n  tj.push(0.6);\n  for (let j = 1, x = tj[0], y = tj[1], a; j \u003c= 4; j++) (a = PI / 2 + 0.1 + P.tail * j * 0.45), tj.push((x += 6.5 * cos(a)), (y += 6.5 * sin(a)), j === 4 ? 1.7 : 0.6);\n  limb(P, tj, 4, TAIL, 0, TUFT, 4.5);\n\n  // The neck, a curve from the withers to the poll, and its mane.\n  const e = sm(0, 1, P.nk) * 2, i = min(1, floor(e)), K = NK[i].map((v, c) => mix(v, NK[i + 1][c], e - i));\n  const bob = P.dk === 0 ? 1 - P.nk : 0, pull = P.tw * 0.25, [sx, sy] = T(36, 61), qx = K[2] + bob * 0.5 * sin(P.t * 0.9), qy = K[3] + bob * (0.4 * sin(P.t * 1.3) - pull);\n  const J = (P.neck = []);\n  for (let n = 0, t; n \u003c= 12; n++) (t = n / 12), J.push((1 - t) ** 2 * sx + 2 * t * (1 - t) * K[0] + t * t * qx, (1 - t) ** 2 * sy + 2 * t * (1 - t) * K[1] + t * t * qy, mix(5.4, 2.8, t));\n  limb(P, J, 2, NECK, 1.2);\n  // The head, its cheek working as it chews.\n  const ph = K[4] - pull * 0.05, fx = cos(ph), fy = sin(ph), nx = fy, ny = -fx, ch = P.chew;\n  const mx = (P.mx = qx + 10.5 * fx), my = (P.my = qy + 10.5 * fy);\n  limb(P, [qx - fx, qy - fy, 2.4, qx + 3 * fx - 0.4 * nx, qy + 3 * fy - 0.4 * ny, 3.1 + 0.35 * ch, mx, my, 1.6 + 0.3 * ch], 7, HEAD, 0, MUZ, 2.6);\n  // Ossicones, and the ear flicking at a fly.\n  for (const [o, z] of [[0.3, 7], [2.1, 6]]) {\n    const bx = qx + o * fx + 2 * nx, by = qy + o * fy + 2 * ny;\n    limb(P, [bx, by, 1, bx + 3.2 * (nx - 0.25 * fx), by + 3.2 * (ny - 0.25 * fy), 0.9], z, OSS, 0, TIP, 1.3);\n  }\n  const fa = 0.35 - 0.9 * P.flick * sin(P.flick * 9), bx = qx - 0.6 * fx + 1.3 * nx, by = qy - 0.6 * fy + 1.3 * ny;\n  limb(P, [bx, by, 1, bx + 3.6 * (-fx * cos(fa) + nx * sin(fa)), by + 3.6 * (-fy * cos(fa) + ny * sin(fa)), 0.5], 8, EAR);\n  P.eye = [qx + 2.8 * fx + 0.9 * nx - 0.5, qy + 2.8 * fy + 0.9 * ny - 0.5];\n}\n\n// A colour into the frame, mixed over what is there by a.\nlet F;\nfunction set(x, y, col, a = 1, k = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) F[o + c] = mix(F[o + c], col[c] * k, a);\n}\n\n// Everything behind the tree.\nfunction back(P, L, tint, land) {\n  const h = P.h, t = P.t, row = P.row, key = round(h * 900) * 4 + P.coat;\n  // Sky and plain are kept until the hour moves.\n  if (key !== P.bgKey) {\n    const B = P.bg, hill = [104, 104, 136].map((v) => v * (0.55 + 0.45 * L[12])), sx = 21 + 6 * h, sy = 30 + 66 * h, sr = 3.2 + 2 * h, g1 = 10 + 30 * h, g2 = 8 + 12 * h;\n    P.bgKey = key;\n    for (let y = 0; y \u003c HOR; y++) for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = mix(L[c], L[3 + c], (y / HOR) ** 1.5);\n    for (let i = 0; i \u003c N; i++) {\n      const x = i & 63, y = i >> 6, o = i * 3;\n      if (y \u003c HOR) {\n        const d = hyp(x + 0.5 - sx, (y + 0.5 - sy) * 1.05), gl = d \u003c sr ? 1 : d > 48 ? 0 : 0.4 * exp(-((d - sr) * (d - sr)) / g1) + 0.16 * exp(-d / g2), hm = y >= P.hill[x] ? 0.5 : 0;\n        for (let c = 0, v; c \u003c 3; c++) (v = row[y * 3 + c]), (B[o + c] = mix(v + (L[6 + c] - v * 0.4) * gl, hill[c], hm));\n      } else {\n        const q = 1 - (y - HOR) / (H - HOR), n = 0.78 + 0.34 * P.gnd[i];\n        for (let c = 0; c \u003c 3; c++) B[o + c] = mix(land[c] * n, L[3 + c], 0.5 * q * q);\n      }\n    }\n  }\n  F.set(P.bg);\n  // The far herd walking along the horizon.\n  const hc = [74, 58, 50].map((v, c) => v * tint[c]);\n  for (const [x, y, , p] of P.herd) {\n    const s = (t * 4 + p) % 2 \u003c 1 ? 0 : 1;\n    set(x, y, hc), set(x + 1, y, hc), set(x + 2, y - 1, hc), set(x + s, y + 1, hc, 0.7), set(x + 2 - s, y + 1, hc, 0.7);\n  }\n  // The giraffe's shadow stretches away from the sun.\n  const shx = 24 + 22 * h, shr = 17 + 12 * h;\n  for (let y = 118; y \u003c 126; y++)\n    for (let x = 0, e; x \u003c W; x++) if ((e = ((x - shx) / shr) ** 2 + ((y - 122) / 2.6) ** 2) \u003c 1) for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] *= 0.58 + 0.3 * e;\n  // The waterhole holds the sky, and sipping sends rings across it.\n  for (let y = floor(PCY - PRY); y \u003c= PCY + PRY; y++)\n    for (let x = floor(PCX - PRX); x \u003c W; x++) {\n      const e = ((x + 0.5 - PCX) / PRX) ** 2 + ((y + 0.5 - PCY) / PRY) ** 2, o = (y * W + x) * 3, ry = cl(round(HOR - 6 - (y - PCY + PRY) * 4), 0, HOR - 1);\n      if (e >= 1) continue;\n      let k = 0.1 * sin(x * 0.8 + t * 2.6 + y * 1.7) * (0.4 + P.wind);\n      for (const [cx, cy, rr, a] of P.rip) k += 0.5 * a * exp(-((hyp(x + 0.5 - cx, (y + 0.5 - cy) * 2.6) - rr) ** 2) / 0.7);\n      for (let c = 0; c \u003c 3; c++) F[o + c] = e > 0.72 ? F[o + c] * 0.5 : row[ry * 3 + c] * (0.76 + k) + 6 * c;\n    }\n}\n\n// The tree, its crown rocking on the wind.\nfunction tree(P, tint) {\n  const t = P.t, w = P.wind, wood = [92, 72, 58].map((v, c) => v * tint[c]), lit = (P.leaf = [116, 152, 58].map((v, c) => v * tint[c])), dark = [14, 23, 10];\n  for (let i = 0; i \u003c N; i++) if (P.wood[i] > 0) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = wood[c] * P.wood[i];\n  const rock = (0.35 + 2.4 * w) * sin(t * (0.9 + w)) + 0.9 * w * sin(t * 2.3 + 1), fa = 0.08 + 0.3 * w, fw = 3 + 5 * w;\n  for (let y = 0; y \u003c CH; y++)\n    for (let x = 0, sh = rock * (0.6 + (0.4 * (CH - y)) / CH); x \u003c W; x++) {\n      const X = round(x + CO - sh), j = y * CW + X;\n      if (X \u003c 0 || X >= CW || !P.cA[j]) continue;\n      const v = cl(P.cL[j] * (1 + fa * sin(t * fw + hash(X, y) * 40)) - 0.12, 0, 1.3);\n      for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] = dark[c] + (lit[c] - dark[c]) * v;\n    }\n  const tx = (P.tx = 54 - 0.5 * P.tw), ty = (P.ty = 18.5 + 0.9 * P.tw);\n  for (let s = 0; s \u003c= 8; s++) {\n    const u = s / 8, x = mix(57.5, tx, u) + 0.6 * sin(u * 3), y = mix(12, ty, u);\n    set(x, y, wood);\n    if (s >= 2 && (s - 2) * 1.5 \u003c P.tl) set(x + (s & 1 ? 1 : -1), y, lit, 1, 1.35);\n  }\n}\n\n// The giraffe's colours, the coat looked up by where on the body each LED lies.\nfunction coat(P, C, tint) {\n  const col = [0, 0, 0], { tex, tsh } = P;\n  for (let i = 0; i \u003c N; i++) {\n    if (P.z[i] \u003c 0) continue;\n    const part = P.p[i], u = P.u[i], v = P.v[i];\n    let k = 1 - 0.22 * v * v;\n    if (part === MANE) for (let c = 0; c \u003c 3; c++) col[c] = C.m[c] * (0.8 + 0.25 * (round(u) & 1));\n    else if (part === TIP || part === TUFT || part === HOOF) col.splice(0, 3, ...(part === HOOF ? [70, 54, 44] : [52, 36, 28]));\n    else if (part === TAIL) for (let c = 0; c \u003c 3; c++) col[c] = C.m[c] * 1.3;\n    else if (part === MUZ || part === OSS || part === EAR) for (let c = 0; c \u003c 3; c++) col[c] = mix(C.l[c], C.p[c], part === MUZ ? 0.5 : 0.35) * (part === MUZ ? 0.78 : 1);\n    else {\n      let tx, ty, pale = 0;\n      if (part === BODY) (tx = u * 1.05 + 3), (ty = v * 1.05), (k = 1.08 - 0.3 * sm(64, 84, v));\n      else if (part === NECK) (tx = v * 6.2 + 77), (ty = u * 1.05 + 5);\n      else if (part === HEAD) (tx = u * 1.6 + 40), (ty = v * 4 + 100), (pale = 0.15);\n      else (tx = v * 3 + 100), (ty = u * (1 + u * 0.02) + 60), (pale = sm(18, 34, u) * (P.coat === 2 ? 1 : 0.55));\n      const ti = ((floor(ty) & 127) \u003c\u003c 7) | (floor(tx) & 127), pv = tex[ti] * (1 - pale), s = tsh[ti];\n      for (let c = 0; c \u003c 3; c++) col[c] = mix(mix(C.l[c], STOCK[c], pale), C.p[c] * s, pv);\n    }\n    if (part === LEGF) k *= 0.66;\n    for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = col[c] * k * tint[c];\n  }\n  set(P.eye[0], P.eye[1], [24, 18, 14]);\n}\n\n// Dry grass rooted between rows y0 and y1, leaning and shaking on the wind.\nfunction grass(P, tint, y0, y1) {\n  const w = P.wind, gc = [226, 196, 116].map((v, c) => v * tint[c]), lw = 0.3 + 6 * w, gf = 1.6 + 2.5 * w;\n  for (const [bx, by, bh, ph, kk] of P.blades) {\n    if (by \u003c y0 || by >= y1) continue;\n    const lean = (lw * (0.7 + 0.3 * sin(P.t * gf + bx * 0.22 + ph * 0.3)) * bh) / 8, n = Math.ceil(bh);\n    for (let s = 0, u; s \u003c= n; s++) (u = s / n), set(bx + lean * u * u, by - u * bh, gc, 0.85, kk * (0.65 + 0.4 * u));\n  }\n}\n\n// What is in front of the giraffe.\nfunction front(P, tint, land) {\n  const t = P.t, w = P.wind;\n  if (P.ext > 0) {\n    // Dark and long, out to the twig and curled round it.\n    const n = 14 * P.ext, tg = [70, 44, 116], tx = P.tx - 0.4, ty = P.ty - 1.2;\n    for (let s = 0; s \u003c= n; s++) {\n      const u = s / 14, a = u / 0.75;\n      if (u \u003c 0.75) set(mix(P.mx, tx, a), mix(P.my, ty, a) - sin(a * PI) * 1.2, tg);\n      else set(tx + 1.4 * sin((u - 0.75) * 12), ty + 0.84 * (1 - cos((u - 0.75) * 12)), tg);\n    }\n  }\n  // The oxpecker on the back of the neck.\n  const J = P.neck, s = P.ox * 12, n = min(11, floor(s)), f = s - n, j = n * 3, lift = 1.8 + mix(J[j + 2], J[j + 5], f) + sin(P.hop * PI) * 1.5;\n  const dx = J[j + 3] - J[j], dy = J[j + 4] - J[j + 1], dl = hyp(dx, dy) || 1, ax = dx / dl, ay = dy / dl;\n  const bx = mix(J[j], J[j + 3], f) + ay * lift, by = mix(J[j + 1], J[j + 4], f) - ax * lift, br = [80, 62, 48].map((v, c) => v * tint[c]);\n  set(bx, by, br), set(bx - ax, by - ay, br), set(bx - 2 * ax, by - 2 * ay, br, 1, 0.8);\n  set(bx - ax - ay * 0.9, by - ay + ax * 0.9, [196, 170, 120]), set(bx + ax, by + ay, [240, 40, 28]);\n  grass(P, tint, 117, H);\n  // Dust on the wind: a veil low in the sky and drifts over the plain.\n  const dc = land.map((v) => v * 1.15), sh = floor(t * (6 + 30 * w));\n  for (let y = 36; y \u003c H; y++) {\n    const ka = (0.1 + w) * 0.7 * sm(70, 112, y), kv = w * 0.3 * sm(36, 96, y);\n    for (let x = 0, a; x \u003c W; x++) if ((a = kv + (y \u003c 70 ? 0 : ka * cl(P.haze[(y - 70) * 128 + ((x - sh) & 127)] * 1.5 - 0.4, 0, 1))) > 0.01) set(x, y, dc, a);\n  }\n  for (const [x, y] of P.fall) set(x, y, P.leaf);\n}\n\nexport function draw(display, params) {\n  const P = params.g;\n  if (!P || P.coat \u003c 0) return;\n  F = P.f;\n  const C = COATS[P.coat], hh = cl(P.h, 0, 1) * 3, i0 = min(2, floor(hh)), L = SKY[i0].map((v, c) => mix(v, SKY[i0 + 1][c], hh - i0));\n  const tint = [9, 10, 11].map((c) => L[c] * L[12]), land = C.land.map((v, c) => v * tint[c]);\n  back(P, L, tint, land);\n  tree(P, tint);\n  grass(P, tint, 0, 117);\n  giraffe(P);\n  coat(P, C, tint);\n  front(P, tint, land);\n  // Whole numbers out, which the engine passes without boxing.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-giraffe","type":"code","name":"giraffe","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Giraffe\n// Family:  mammal\n// Idea:    Under the flat crown of an umbrella thorn a reticulated giraffe strips a twig with its long dark tongue, and every so often it splays its front legs and bends down to drink at the waterhole.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the browse line giraffes cut under the umbrella thorn acacia (Vachellia tortilis)\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Coat=0..3, Wind=0..1\n//\n// Knob 1: Sun. The hour, from a high white sun at 0 to a red sun setting between the giraffe's legs at 1. Round each hour the sun sinks a little and climbs back once a minute.\n// Knob 2: Speed. At 2 a lick takes about three seconds; the giraffe first goes down to drink after three, then every half minute or when its twig is bare.\n// Knob 3: Coat. Reticulated with thin white lines, Masai with jagged leaf patches, Rothschild with broad buff lines and white stockings, or pale leucistic, each on its own ground: red earth, gold grass, green grass, pale sand.\n// Knob 4: Wind. Grass and crown lean and shake with it, and dust blows over the plain until the far herd goes hazy.\n// Buttons: K1 tap sends the giraffe down to drink now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Horizon and waterhole; the crown is kept wider than the panel to rock.\nconst [HOR, PCX, PCY, PRX, PRY] = [94, 50, 113.5, 14, 4.8];\nconst [CW, CH, CO] = [80, 26, 8];\nconst { min, max, floor, round, sin, cos, sqrt, exp, PI } = Math;\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst smin = (a, b, k, h = cl(0.5 + (0.5 * (b - a)) / k, 0, 1)) => b + (a - b) * h - k * h * (1 - h);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The light from afternoon to dusk, one row per hour.\nconst SKY = [\n  [74, 134, 216, 186, 210, 226, 255, 250, 228, 1, 0.98, 0.92, 1],\n  [62, 114, 206, 236, 208, 164, 255, 238, 180, 1.04, 0.92, 0.78, 0.97],\n  [56, 78, 170, 255, 170, 94, 255, 198, 100, 1.08, 0.8, 0.6, 0.88],\n  [40, 38, 108, 248, 108, 72, 255, 132, 60, 1, 0.64, 0.52, 0.74],\n];\n// Each coat: patch, line, mane, and the ground it stands on.\nconst COATS = [\n  { p: [150, 54, 22], l: [250, 240, 214], m: [92, 42, 22], land: [204, 142, 92] },\n  { p: [108, 50, 26], l: [226, 184, 122], m: [80, 42, 24], land: [214, 182, 98] },\n  { p: [180, 98, 44], l: [236, 212, 164], m: [112, 62, 32], land: [160, 176, 86] },\n  { p: [224, 204, 172], l: [252, 248, 238], m: [200, 168, 132], land: [224, 210, 166] },\n];\n// The pale of the lower legs.\nconst STOCK = [244, 234, 212];\nconst [BODY, NECK, HEAD, LEGN, LEGF, MANE, OSS, TIP, EAR, TAIL, TUFT, HOOF, MUZ] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];\n\n// The coat as a 128 x 128 wrapping texture: 1 inside a patch, 0 on a line.\nfunction buildCoat(P, kind) {\n  const S = 6.4, G = 20;\n  for (let y = 0; y \u003c 128; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      let qx = x + 0.5, qy = y + 0.5, f1 = 99, f2 = 99, id = 0, ax = 0, ay = 0, v;\n      if (kind === 1) (qx += 3 * (vn(x * 0.3, y * 0.3) - 0.5)), (qy += 3 * (vn(x * 0.3 + 9, y * 0.3) - 0.5));\n      const cx = floor(qx / S), cy = floor(qy / S);\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++) {\n          const gx = (cx + i + G) % G, gy = (cy + j + G) % G, fx = (cx + i + 0.15 + 0.7 * hash(gx, gy)) * S, fy = (cy + j + 0.15 + 0.7 * hash(gx + 50, gy)) * S;\n          const d = hyp(qx - fx, qy - fy);\n          if (d \u003c f1) (f2 = f1), (f1 = d), (id = gx * 31 + gy), (ax = qx - fx), (ay = qy - fy);\n          else if (d \u003c f2) f2 = d;\n        }\n      const e = f2 - f1;\n      if (kind === 0) v = sm(0.7, 1.4, e);\n      else if (kind === 1) {\n        // Masai patches are cut into leaves and stars.\n        const thr = 1.9 + sin(Math.atan2(ay, ax) * 5 + id) + 0.6 * vn(x * 0.7, y * 0.7);\n        v = sm(thr - 0.5, thr + 0.5, e);\n      } else v = kind === 2 ? sm(1.3, 2.6, e) : sm(1, 2.2, e) * 0.9;\n      P.tex[y * 128 + x] = v;\n      P.tsh[y * 128 + x] = 0.84 + 0.3 * hash(id, 7);\n    }\n  P.coat = kind;\n}\n\n// A thick line into the wood layer.\nfunction stroke(A, pts, r0, r1, val) {\n  for (let j = 0; j + 2 \u003c pts.length; j += 2) {\n    const [ax, ay, bx, by] = pts.slice(j, j + 4), n = 2 * hyp(bx - ax, by - ay);\n    for (let s = 0; s \u003c= n; s++) {\n      const t = s / n, x = mix(ax, bx, t), y = mix(ay, by, t), r = mix(r0, r1, (j + 2 * t) / (pts.length - 2));\n      for (let yy = floor(y - r); yy \u003c= y + r; yy++)\n        for (let xx = floor(x - r); xx \u003c= x + r; xx++)\n          if (hyp(xx + 0.5 - x, yy + 0.5 - y) \u003c= r && xx >= 0 && xx \u003c W) A[yy * W + xx] = max(A[yy * W + xx], val * (1.1 - (0.35 * (xx + 0.5 - x)) / r));\n    }\n  }\n}\n\nfunction build(P) {\n  // The crown: flat layers of leaves over a flat browse line, with a hollow\n  // eaten up into it where the giraffe reaches.\n  for (let x = 0; x \u003c CW; x++) {\n    const X = x - CO, top = 3 + 0.0028 * (X - 28) ** 2 + 2.2 * vn(X * 0.18, 1.5);\n    const bot = 19.5 + 1.6 * vn(X * 0.3, 4.5) + 0.0016 * (X - 28) ** 2 - 6.5 * exp(-(((X - 53.5) / 4.2) ** 2));\n    for (let y = 0; y \u003c CH; y++) {\n      const i = y * CW + x, f = (y - top) / (bot - top), n = vn(X * 0.16, y * 0.42) * 0.6 + vn(X * 0.5, y * 0.6) * 0.4;\n      if (f \u003c 0 || f > 1) continue;\n      const k = n + 0.125 + 0.125 * sin(y * 0.9 + 2.4 * vn(X * 0.08, 2)) - 0.3 * sm(0.75, 1, f) - 0.35 * sm(0.18, 0, f);\n      if (k > 0.34) (P.cA[i] = 1), (P.cL[i] = (1.15 - 0.6 * f) * (0.75 + 0.5 * n) * (0.85 + 0.3 * hash(X + 300, y)));\n      else if (k > 0.2 && f > 0.12) P.cA[i] = 1;\n    }\n  }\n  // The trunk, and crooked branches fanning up to the crown.\n  stroke(P.wood, [58.5, 104, 57.5, 86, 59, 66, 57.5, 50], 2.2, 1.7, 1);\n  for (const b of [[57.5, 50, 53, 41, 48, 37, 41, 29, 31, 22, 24, 19], [57.5, 52, 55, 42, 51, 33, 50, 25, 46, 19], [58, 50, 61, 40, 61, 31, 65, 21], [58, 60, 54, 55, 46, 50]]) stroke(P.wood, b, 1.5, 0.8, 0.85);\n  // The ground, and dust that wraps every 128 columns.\n  for (let i = HOR * W; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    P.gnd[i] = mix(vn(x * 0.12, y * 0.9), vn(x * 0.6, y * 0.18), (y - HOR) / (H - HOR)) * 0.7 + 0.3 * hash(x, y + 700);\n  }\n  for (let i = 0; i \u003c 128 * 58; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => vn(X * 0.07, y * 0.16) * 0.7 + vn(X * 0.19, y * 0.3 + 5) * 0.3;\n    P.haze[i] = mix(f(x), f(x + 128), x / 128);\n  }\n  P.hill = Array.from({ length: W }, (_, x) => HOR - 2 - 2.5 * vn(x * 0.07, 3) - 1.5 * vn(x * 0.2, 7));\n  // Dry grass, none standing in the water.\n  P.blades = [];\n  while (P.blades.length \u003c 230) {\n    const y = HOR + 5 + (H - HOR - 4) * sqrt(rnd()), x = rnd() * 66 - 1;\n    if (((x - PCX) / (PRX + 1.5)) ** 2 + ((y - PCY) / (PRY + 2)) ** 2 > 1) P.blades.push([x, y, 1.5 + (y - HOR) * 0.2 * (0.6 + 0.8 * rnd()), rnd() * 7, 0.7 + 0.6 * rnd()]);\n  }\n  P.herd = Array.from({ length: 7 }, (_, i) => [i * 9.5 + rnd() * 5, HOR + 0.5 + rnd() * 2.2, 0.35 + rnd() * 0.3, rnd() * 7]);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.g = {\n    f: F(N * 3), z: new Int8Array(N), p: new Uint8Array(N), u: F(N), v: F(N), tex: F(16384), tsh: F(16384), gnd: F(N), wood: F(N), cA: F(CW * CH), cL: F(CW * CH),\n    haze: F(128 * 58), row: F(HOR * 3), bg: F(N * 3), coat: -1, t: 0, dk: 0, dt: 0, next: 3.4, legN: 0, legF: 0, nk: 0, tc: 0.6, tp: 2.8, tw: 0, twv: 0, tl: 9,\n    ear: 1, flick: 0, swish: 0, sw: 3, ox: 0.55, oxT: 1, hop: 1, fall: [], rip: [], ripT: 0,\n  };\n  build(params.g);\n}\n\nexport function update(dt, input, params) {\n  if (!params.g) setup(params);\n  const P = params.g, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2), coat = cl(round(k[2]), 0, 3), w = (P.wind = cl(k[3], 0, 1));\n  if (coat !== P.coat) buildCoat(P, coat);\n  const t = (P.t += d), sunK = cl(k[0], 0, 1);\n  // The sun sinks and climbs back a little round the hour the knob sets.\n  P.h = sunK + (1 - sunK) * 0.3 * (0.5 - 0.5 * cos((2 * PI * t) / 60));\n\n  // Down to drink: the front legs go out one by one, then the neck comes down.\n  if (input.btnPressed && input.btnPressed[0] && P.dk === 0) P.next = 0;\n  const T = (P.dt += d);\n  if (P.dk === 0) {\n    if ((P.next -= d) \u003c= 0 || (P.tl \u003c= 0 && P.tc > 1.6)) (P.dk = 1), (P.dt = 0);\n  } else if (P.dk === 1) {\n    [P.legN, P.legF, P.nk] = [sm(0, 0.7, T), sm(0.45, 1.15, T), sm(0.8, 2.6, T)];\n    if (T >= 2.6) (P.dk = 2), (P.dt = 0);\n  } else if (P.dk === 2) {\n    // Sips: the head dips and lifts, and rings spread on the water.\n    P.nk = 1 - 0.035 * (0.5 - 0.5 * cos(T * 4.4));\n    if ((P.ripT -= d) \u003c= 0) (P.ripT = 0.7 + rnd() * 0.4), P.rip.push([P.mx, P.my + 1, 0, 1]);\n    if (T >= 3.4) (P.dk = 3), (P.dt = 0);\n  } else {\n    // Up again fast, the head first, then the legs gathered in.\n    [P.nk, P.legN, P.legF] = [1 - sm(0, 1, T), 1 - sm(0.9, 1.6, T), 1 - sm(0.6, 1.3, T)];\n    if (T >= 1.8) (P.dk = 0), (P.next = 26 + rnd() * 12), (P.tl = 9), (P.tc = 1.3);\n  }\n\n  // The tongue curls round the twig to strip it. Then the jaw chews.\n  const browsing = P.dk === 0 && P.nk \u003c 0.01;\n  if ((P.tc += d) > P.tp) (P.tc = 0), (P.tp = 2.4 + rnd() * 1.3), (P.pulled = false);\n  const c = P.tc, live = browsing && P.tl > 0;\n  P.ext = live ? (c \u003c 0.45 ? sm(0, 0.45, c) : c \u003c 1 ? 1 : 1 - sm(1, 1.3, c)) : 0;\n  P.twv += (60 * ((live && c > 0.5 && c \u003c 1 ? 3 * sm(0.5, 0.85, c) : 0) - P.tw) - 5 * P.twv) * d;\n  P.tw += P.twv * d;\n  if (live && c > 0.85 && !P.pulled) {\n    P.pulled = true;\n    P.tl--;\n    for (let n = 0; n \u003c 2; n++) P.fall.push([53.5 + rnd() * 2, 18, (rnd() - 0.5) * 4, 2 + rnd() * 3, rnd() * 7]);\n  }\n  P.chew = browsing && c > 1.3 ? 0.5 + 0.5 * sin(c * 19) : 0;\n\n  // Ear and tail keep the flies off, and the oxpecker hops along the neck.\n  if ((P.ear -= d) \u003c= 0) (P.ear = 1.5 + rnd() * 3), (P.flick = 1);\n  P.flick = max(0, P.flick - d * 3.5);\n  if ((P.sw -= d) \u003c= 0) (P.sw = 2.5 + rnd() * 4), (P.swish = 1);\n  P.swish = max(0, P.swish - d * 0.9);\n  P.tail = 0.12 * sin(t * 1.1) + 0.5 * P.swish * sin(t * 9);\n  if ((P.oxT -= d) \u003c= 0) (P.oxT = 0.7 + rnd() * 1.8), (P.ox0 = P.ox), (P.ox1 = cl(P.ox + (rnd() \u003c 0.5 ? -1 : 1) * (0.05 + rnd() * 0.1), 0.3, 0.78)), (P.hop = 0);\n  if (P.hop \u003c 1) (P.hop = min(1, P.hop + d * 4)), (P.ox = mix(P.ox0, P.ox1, P.hop));\n\n  // Falling leaves and rings on the pool.\n  P.fall = P.fall.filter((q) => ((q[4] += d), (q[0] += (q[2] + 3 * sin(q[4] * 3) + 8 * w) * d), (q[1] += q[3] * d), q[1] \u003c 124));\n  P.rip = P.rip.filter((q) => ((q[2] += d * 5), (q[3] -= d * 0.45), q[3] > 0));\n  // The far herd walks on.\n  for (const a of P.herd) if ((a[0] -= a[2] * d) \u003c -4) a[0] += 72;\n}\n\n// One LED of the giraffe, unless something nearer is there.\nfunction put(P, x, y, z, part, u, v) {\n  const i = y * W + x;\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && z >= P.z[i]) (P.z[i] = z), (P.p[i] = part), (P.u[i] = u), (P.v[i] = v);\n}\n\n// A limb through joints, each a point and a radius. Each LED keeps how far\n// along it lies (u) and across (v, plus on the mane side); the tip LEDs take\n// another part.\nfunction limb(P, J, z, part, mane = 0, tipPart = 0, tipLen = 0) {\n  let total = 0, s0 = 0;\n  for (let j = 3; j \u003c J.length; j += 3) total += hyp(J[j] - J[j - 3], J[j + 1] - J[j - 2]);\n  for (let j = 0; j + 3 \u003c J.length; j += 3) {\n    const [ax, ay, ra, bx, by, rb] = J.slice(j, j + 6), len = hyp(bx - ax, by - ay) || 1e-6, dx = (bx - ax) / len, dy = (by - ay) / len, pad = max(ra, rb) + mane + 1;\n    for (let y = floor(min(ay, by) - pad); y \u003c= max(ay, by) + pad; y++)\n      for (let x = floor(min(ax, bx) - pad); x \u003c= max(ax, bx) + pad; x++) {\n        const px = x + 0.5 - ax, py = y + 0.5 - ay, tt = cl(px * dx + py * dy, 0, len), dist = hyp(px - dx * tt, py - dy * tt);\n        const side = px * dy - py * dx, r = ra + ((rb - ra) * tt) / len, s = s0 + tt;\n        if (dist \u003c= r) put(P, x, y, z, tipLen && s > total - tipLen ? tipPart : part, s, side >= 0 ? dist / r : -dist / r);\n        else if (mane && side > 0 && dist \u003c= r + mane && s > 3 && s \u003c total - 1) put(P, x, y, z, MANE, s, 1);\n      }\n    s0 += len;\n  }\n}\n\n// Two bones from hip to hoof, bending the way dir says.\nfunction ik(ax, ay, bx, by, a, b, dir) {\n  const dx = bx - ax, dy = by - ay, d0 = hyp(dx, dy), d = min(d0, a + b - 0.01), x = (a * a - b * b + d * d) / (2 * d), h = sqrt(max(0, a * a - x * x));\n  return [ax + (dx / d0) * x - (dy / d0) * h * dir, ay + (dy / d0) * x + (dx / d0) * h * dir];\n}\n\n// Keys for the neck and head as they swing from the leaves to the water.\nconst NK = [\n  [39.5, 44, 42, 28, -0.52],\n  [50, 40, 58, 58, 1.2],\n  [49, 80, 55, 99.5, 1.66],\n];\n\nfunction giraffe(P) {\n  P.z.fill(-1);\n  const lean = max(P.legN, P.legF), ca = cos(0.22 * lean), sa = sin(0.22 * lean), drop = 3 * lean;\n  // Body space to the panel, tilted on the hip.\n  const T = (x, y) => [12 + (x - 12) * ca - (y - 72) * sa, 72 + (x - 12) * sa + (y - 72) * ca + drop];\n  // The legs go behind the body, the far pair darker. To drink the near\n  // front leg goes back and the far one forward.\n  for (const [sx, sy, hx, hy, dir, part, z] of [\n    [31, 78, 33 + 12 * P.legF, 119.5, -1, LEGF, 1],\n    [16, 75, 16, 119.5, 1, LEGF, 1],\n    [35, 78, 37 - 14 * P.legN, 121.5, -1, LEGN, 2],\n    [12, 75, 11, 121.5, 1, LEGN, 2],\n  ]) {\n    const [ax, ay] = T(sx, sy), [kx, ky] = ik(ax, ay, hx, hy, 22, 22.5, dir);\n    limb(P, [ax, ay, dir \u003c 0 ? 3.2 : 4, kx, ky, dir \u003c 0 ? 1.6 : 1.8, hx, hy, 1.3], z, part, 0, HOOF, 2.2);\n  }\n  // The body, low at the rump and high at the shoulder.\n  for (let y = 48; y \u003c 96; y++)\n    for (let x = 0; x \u003c 50; x++) {\n      const qx = x + 0.5 - 12, qy = y + 0.5 - 72 - drop, bx = 12 + qx * ca + qy * sa, by = 72 - qx * sa + qy * ca;\n      const a = (hyp((bx - 13) / 8.5, (by - 72) / 8.5) - 1) * 8.5, b = (hyp((bx - 24) / 12.5, (by - 73.5) / 9.5) - 1) * 9.5, c = (hyp((bx - 34) / 8.5, (by - 67.5) / 13.5) - 1) * 8.5;\n      if (smin(smin(a, b, 5), c, 5) \u003c= 0) put(P, x, y, 3, BODY, bx, by);\n    }\n  // The tail hangs from the rump and swishes.\n  const tj = T(5.5, 65);\n  tj.push(0.6);\n  for (let j = 1, x = tj[0], y = tj[1], a; j \u003c= 4; j++) (a = PI / 2 + 0.1 + P.tail * j * 0.45), tj.push((x += 6.5 * cos(a)), (y += 6.5 * sin(a)), j === 4 ? 1.7 : 0.6);\n  limb(P, tj, 4, TAIL, 0, TUFT, 4.5);\n\n  // The neck, a curve from the withers to the poll, and its mane.\n  const e = sm(0, 1, P.nk) * 2, i = min(1, floor(e)), K = NK[i].map((v, c) => mix(v, NK[i + 1][c], e - i));\n  const bob = P.dk === 0 ? 1 - P.nk : 0, pull = P.tw * 0.25, [sx, sy] = T(36, 61), qx = K[2] + bob * 0.5 * sin(P.t * 0.9), qy = K[3] + bob * (0.4 * sin(P.t * 1.3) - pull);\n  const J = (P.neck = []);\n  for (let n = 0, t; n \u003c= 12; n++) (t = n / 12), J.push((1 - t) ** 2 * sx + 2 * t * (1 - t) * K[0] + t * t * qx, (1 - t) ** 2 * sy + 2 * t * (1 - t) * K[1] + t * t * qy, mix(5.4, 2.8, t));\n  limb(P, J, 2, NECK, 1.2);\n  // The head, its cheek working as it chews.\n  const ph = K[4] - pull * 0.05, fx = cos(ph), fy = sin(ph), nx = fy, ny = -fx, ch = P.chew;\n  const mx = (P.mx = qx + 10.5 * fx), my = (P.my = qy + 10.5 * fy);\n  limb(P, [qx - fx, qy - fy, 2.4, qx + 3 * fx - 0.4 * nx, qy + 3 * fy - 0.4 * ny, 3.1 + 0.35 * ch, mx, my, 1.6 + 0.3 * ch], 7, HEAD, 0, MUZ, 2.6);\n  // Ossicones, and the ear flicking at a fly.\n  for (const [o, z] of [[0.3, 7], [2.1, 6]]) {\n    const bx = qx + o * fx + 2 * nx, by = qy + o * fy + 2 * ny;\n    limb(P, [bx, by, 1, bx + 3.2 * (nx - 0.25 * fx), by + 3.2 * (ny - 0.25 * fy), 0.9], z, OSS, 0, TIP, 1.3);\n  }\n  const fa = 0.35 - 0.9 * P.flick * sin(P.flick * 9), bx = qx - 0.6 * fx + 1.3 * nx, by = qy - 0.6 * fy + 1.3 * ny;\n  limb(P, [bx, by, 1, bx + 3.6 * (-fx * cos(fa) + nx * sin(fa)), by + 3.6 * (-fy * cos(fa) + ny * sin(fa)), 0.5], 8, EAR);\n  P.eye = [qx + 2.8 * fx + 0.9 * nx - 0.5, qy + 2.8 * fy + 0.9 * ny - 0.5];\n}\n\n// A colour into the frame, mixed over what is there by a.\nlet F;\nfunction set(x, y, col, a = 1, k = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) F[o + c] = mix(F[o + c], col[c] * k, a);\n}\n\n// Everything behind the tree.\nfunction back(P, L, tint, land) {\n  const h = P.h, t = P.t, row = P.row, key = round(h * 900) * 4 + P.coat;\n  // Sky and plain are kept until the hour moves.\n  if (key !== P.bgKey) {\n    const B = P.bg, hill = [104, 104, 136].map((v) => v * (0.55 + 0.45 * L[12])), sx = 21 + 6 * h, sy = 30 + 66 * h, sr = 3.2 + 2 * h, g1 = 10 + 30 * h, g2 = 8 + 12 * h;\n    P.bgKey = key;\n    for (let y = 0; y \u003c HOR; y++) for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = mix(L[c], L[3 + c], (y / HOR) ** 1.5);\n    for (let i = 0; i \u003c N; i++) {\n      const x = i & 63, y = i >> 6, o = i * 3;\n      if (y \u003c HOR) {\n        const d = hyp(x + 0.5 - sx, (y + 0.5 - sy) * 1.05), gl = d \u003c sr ? 1 : d > 48 ? 0 : 0.4 * exp(-((d - sr) * (d - sr)) / g1) + 0.16 * exp(-d / g2), hm = y >= P.hill[x] ? 0.5 : 0;\n        for (let c = 0, v; c \u003c 3; c++) (v = row[y * 3 + c]), (B[o + c] = mix(v + (L[6 + c] - v * 0.4) * gl, hill[c], hm));\n      } else {\n        const q = 1 - (y - HOR) / (H - HOR), n = 0.78 + 0.34 * P.gnd[i];\n        for (let c = 0; c \u003c 3; c++) B[o + c] = mix(land[c] * n, L[3 + c], 0.5 * q * q);\n      }\n    }\n  }\n  F.set(P.bg);\n  // The far herd walking along the horizon.\n  const hc = [74, 58, 50].map((v, c) => v * tint[c]);\n  for (const [x, y, , p] of P.herd) {\n    const s = (t * 4 + p) % 2 \u003c 1 ? 0 : 1;\n    set(x, y, hc), set(x + 1, y, hc), set(x + 2, y - 1, hc), set(x + s, y + 1, hc, 0.7), set(x + 2 - s, y + 1, hc, 0.7);\n  }\n  // The giraffe's shadow stretches away from the sun.\n  const shx = 24 + 22 * h, shr = 17 + 12 * h;\n  for (let y = 118; y \u003c 126; y++)\n    for (let x = 0, e; x \u003c W; x++) if ((e = ((x - shx) / shr) ** 2 + ((y - 122) / 2.6) ** 2) \u003c 1) for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] *= 0.58 + 0.3 * e;\n  // The waterhole holds the sky, and sipping sends rings across it.\n  for (let y = floor(PCY - PRY); y \u003c= PCY + PRY; y++)\n    for (let x = floor(PCX - PRX); x \u003c W; x++) {\n      const e = ((x + 0.5 - PCX) / PRX) ** 2 + ((y + 0.5 - PCY) / PRY) ** 2, o = (y * W + x) * 3, ry = cl(round(HOR - 6 - (y - PCY + PRY) * 4), 0, HOR - 1);\n      if (e >= 1) continue;\n      let k = 0.1 * sin(x * 0.8 + t * 2.6 + y * 1.7) * (0.4 + P.wind);\n      for (const [cx, cy, rr, a] of P.rip) k += 0.5 * a * exp(-((hyp(x + 0.5 - cx, (y + 0.5 - cy) * 2.6) - rr) ** 2) / 0.7);\n      for (let c = 0; c \u003c 3; c++) F[o + c] = e > 0.72 ? F[o + c] * 0.5 : row[ry * 3 + c] * (0.76 + k) + 6 * c;\n    }\n}\n\n// The tree, its crown rocking on the wind.\nfunction tree(P, tint) {\n  const t = P.t, w = P.wind, wood = [92, 72, 58].map((v, c) => v * tint[c]), lit = (P.leaf = [116, 152, 58].map((v, c) => v * tint[c])), dark = [14, 23, 10];\n  for (let i = 0; i \u003c N; i++) if (P.wood[i] > 0) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = wood[c] * P.wood[i];\n  const rock = (0.35 + 2.4 * w) * sin(t * (0.9 + w)) + 0.9 * w * sin(t * 2.3 + 1), fa = 0.08 + 0.3 * w, fw = 3 + 5 * w;\n  for (let y = 0; y \u003c CH; y++)\n    for (let x = 0, sh = rock * (0.6 + (0.4 * (CH - y)) / CH); x \u003c W; x++) {\n      const X = round(x + CO - sh), j = y * CW + X;\n      if (X \u003c 0 || X >= CW || !P.cA[j]) continue;\n      const v = cl(P.cL[j] * (1 + fa * sin(t * fw + hash(X, y) * 40)) - 0.12, 0, 1.3);\n      for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] = dark[c] + (lit[c] - dark[c]) * v;\n    }\n  const tx = (P.tx = 54 - 0.5 * P.tw), ty = (P.ty = 18.5 + 0.9 * P.tw);\n  for (let s = 0; s \u003c= 8; s++) {\n    const u = s / 8, x = mix(57.5, tx, u) + 0.6 * sin(u * 3), y = mix(12, ty, u);\n    set(x, y, wood);\n    if (s >= 2 && (s - 2) * 1.5 \u003c P.tl) set(x + (s & 1 ? 1 : -1), y, lit, 1, 1.35);\n  }\n}\n\n// The giraffe's colours, the coat looked up by where on the body each LED lies.\nfunction coat(P, C, tint) {\n  const col = [0, 0, 0], { tex, tsh } = P;\n  for (let i = 0; i \u003c N; i++) {\n    if (P.z[i] \u003c 0) continue;\n    const part = P.p[i], u = P.u[i], v = P.v[i];\n    let k = 1 - 0.22 * v * v;\n    if (part === MANE) for (let c = 0; c \u003c 3; c++) col[c] = C.m[c] * (0.8 + 0.25 * (round(u) & 1));\n    else if (part === TIP || part === TUFT || part === HOOF) col.splice(0, 3, ...(part === HOOF ? [70, 54, 44] : [52, 36, 28]));\n    else if (part === TAIL) for (let c = 0; c \u003c 3; c++) col[c] = C.m[c] * 1.3;\n    else if (part === MUZ || part === OSS || part === EAR) for (let c = 0; c \u003c 3; c++) col[c] = mix(C.l[c], C.p[c], part === MUZ ? 0.5 : 0.35) * (part === MUZ ? 0.78 : 1);\n    else {\n      let tx, ty, pale = 0;\n      if (part === BODY) (tx = u * 1.05 + 3), (ty = v * 1.05), (k = 1.08 - 0.3 * sm(64, 84, v));\n      else if (part === NECK) (tx = v * 6.2 + 77), (ty = u * 1.05 + 5);\n      else if (part === HEAD) (tx = u * 1.6 + 40), (ty = v * 4 + 100), (pale = 0.15);\n      else (tx = v * 3 + 100), (ty = u * (1 + u * 0.02) + 60), (pale = sm(18, 34, u) * (P.coat === 2 ? 1 : 0.55));\n      const ti = ((floor(ty) & 127) \u003c\u003c 7) | (floor(tx) & 127), pv = tex[ti] * (1 - pale), s = tsh[ti];\n      for (let c = 0; c \u003c 3; c++) col[c] = mix(mix(C.l[c], STOCK[c], pale), C.p[c] * s, pv);\n    }\n    if (part === LEGF) k *= 0.66;\n    for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = col[c] * k * tint[c];\n  }\n  set(P.eye[0], P.eye[1], [24, 18, 14]);\n}\n\n// Dry grass rooted between rows y0 and y1, leaning and shaking on the wind.\nfunction grass(P, tint, y0, y1) {\n  const w = P.wind, gc = [226, 196, 116].map((v, c) => v * tint[c]), lw = 0.3 + 6 * w, gf = 1.6 + 2.5 * w;\n  for (const [bx, by, bh, ph, kk] of P.blades) {\n    if (by \u003c y0 || by >= y1) continue;\n    const lean = (lw * (0.7 + 0.3 * sin(P.t * gf + bx * 0.22 + ph * 0.3)) * bh) / 8, n = Math.ceil(bh);\n    for (let s = 0, u; s \u003c= n; s++) (u = s / n), set(bx + lean * u * u, by - u * bh, gc, 0.85, kk * (0.65 + 0.4 * u));\n  }\n}\n\n// What is in front of the giraffe.\nfunction front(P, tint, land) {\n  const t = P.t, w = P.wind;\n  if (P.ext > 0) {\n    // Dark and long, out to the twig and curled round it.\n    const n = 14 * P.ext, tg = [70, 44, 116], tx = P.tx - 0.4, ty = P.ty - 1.2;\n    for (let s = 0; s \u003c= n; s++) {\n      const u = s / 14, a = u / 0.75;\n      if (u \u003c 0.75) set(mix(P.mx, tx, a), mix(P.my, ty, a) - sin(a * PI) * 1.2, tg);\n      else set(tx + 1.4 * sin((u - 0.75) * 12), ty + 0.84 * (1 - cos((u - 0.75) * 12)), tg);\n    }\n  }\n  // The oxpecker on the back of the neck.\n  const J = P.neck, s = P.ox * 12, n = min(11, floor(s)), f = s - n, j = n * 3, lift = 1.8 + mix(J[j + 2], J[j + 5], f) + sin(P.hop * PI) * 1.5;\n  const dx = J[j + 3] - J[j], dy = J[j + 4] - J[j + 1], dl = hyp(dx, dy) || 1, ax = dx / dl, ay = dy / dl;\n  const bx = mix(J[j], J[j + 3], f) + ay * lift, by = mix(J[j + 1], J[j + 4], f) - ax * lift, br = [80, 62, 48].map((v, c) => v * tint[c]);\n  set(bx, by, br), set(bx - ax, by - ay, br), set(bx - 2 * ax, by - 2 * ay, br, 1, 0.8);\n  set(bx - ax - ay * 0.9, by - ay + ax * 0.9, [196, 170, 120]), set(bx + ax, by + ay, [240, 40, 28]);\n  grass(P, tint, 117, H);\n  // Dust on the wind: a veil low in the sky and drifts over the plain.\n  const dc = land.map((v) => v * 1.15), sh = floor(t * (6 + 30 * w));\n  for (let y = 36; y \u003c H; y++) {\n    const ka = (0.1 + w) * 0.7 * sm(70, 112, y), kv = w * 0.3 * sm(36, 96, y);\n    for (let x = 0, a; x \u003c W; x++) if ((a = kv + (y \u003c 70 ? 0 : ka * cl(P.haze[(y - 70) * 128 + ((x - sh) & 127)] * 1.5 - 0.4, 0, 1))) > 0.01) set(x, y, dc, a);\n  }\n  for (const [x, y] of P.fall) set(x, y, P.leaf);\n}\n\nexport function draw(display, params) {\n  const P = params.g;\n  if (!P || P.coat \u003c 0) return;\n  F = P.f;\n  const C = COATS[P.coat], hh = cl(P.h, 0, 1) * 3, i0 = min(2, floor(hh)), L = SKY[i0].map((v, c) => mix(v, SKY[i0 + 1][c], hh - i0));\n  const tint = [9, 10, 11].map((c) => L[c] * L[12]), land = C.land.map((v, c) => v * tint[c]);\n  back(P, L, tint, land);\n  tree(P, tint);\n  grass(P, tint, 0, 117);\n  giraffe(P);\n  coat(P, C, tint);\n  front(P, tint, land);\n  // Whole numbers out, which the engine passes without boxing.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sun=0..1, Speed=0.2..3, Coat=0..3, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sun","min":0,"max":1,"about":"The hour, from a high white sun at 0 to a red sun setting between the giraffe's legs at 1. Round each hour the sun sinks a little and climbs back once a minute."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a lick takes about three seconds; the giraffe first goes down to drink after three, then every half minute or when its twig is bare."},{"name":"Coat","min":0,"max":3,"about":"Reticulated with thin white lines, Masai with jagged leaf patches, Rothschild with broad buff lines and white stockings, or pale leucistic, each on its own ground: red earth, gold grass, green grass, pale sand."},{"name":"Wind","min":0,"max":1,"about":"Grass and crown lean and shake with it, and dust blows over the plain until the far herd goes hazy."}],"start":[0,2,0,0.06],"measures":{"motion":0.123,"detail":0.074,"edges":0.4044,"complexity":1.9181,"coverage":0.9853,"colour":0.3367,"drift":0.0426},"knobResponse":[0.2454,0.0494,0.078,0.0609]},{"slug":"glyph-rain","title":"Glyph Rain","family":"type","round":1,"note":"3×5 글자가 줄마다 떨어지며 바뀌어요. 비가 지나간 글자는 옛 단말기의 초록 형광처럼 몇 초 남아 흐려져서, 아무 말도 하지 않는 글이 화면을 채워요.","idea":"Every column keeps writing characters downward and forgets them as it goes, so the panel is full of text that never says anything.","buttons":"K4 tap switches between small glyphs and double-size ones.","code":"// ===== Patternflow pattern =====\n// Title:   Glyph Rain\n// Family:  type\n// Idea:    Every column keeps writing characters downward and forgets them as it goes, so the panel is full of text that never says anything.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Fall=0.3..6, Density=0..1, Mutate=0..1\n//\n// Knob 1: Hue. Turns the rain around the colour wheel from phosphor green; the heads stay close to white.\n// Knob 2: Fall. How fast the columns fall, each at its own pace around this one.\n// Knob 3: Density. How many columns run and how long their tails hang, up to a full wall of text.\n// Knob 4: Mutate. How often a glyph already written turns into another; turned all the way, the whole wall boils.\n// Buttons: K4 tap switches between small glyphs and double-size ones.\n\nconst W = 64;\nconst H = 128;\n// Small glyphs sit on a 4x6 pitch: 16 columns of 22 rows.\nconst COLS = Math.floor(W / 4);\nconst ROWS = Math.ceil(H / 6);\n\n// 3x5 glyphs, one octal digit per row from the top, 4 is the left column.\nconst FONT = [\n  0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717,\n  0o25755, 0o74647, 0o74644, 0o55755, 0o55655, 0o44447, 0o57755, 0o65644, 0o65655, 0o72222,\n  0o55557, 0o55255, 0o55222, 0o71247, 0o02720, 0o00700, 0o07070, 0o05250, 0o11244, 0o12421,\n  0o42124, 0o57575, 0o02020, 0o34216, 0o61243, 0o27272,\n];\n\n// Hue 0 is the green of an old terminal's phosphor rather than red.\nconst GREEN = 0.33;\n// Where a tail ends, and where the glyphs it leaves behind start to fade from.\nconst EMBER = 0.38;\n// Below this a fading glyph is gone: the panel shows next to nothing under 20/255.\nconst GONE = 0.09;\n// Levels are drawn in steps, so a fading glyph changes a few times on its way out\n// instead of on every frame.\nconst STEPS = 20;\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction rand(p) {\n  let s = p.seed;\n  s ^= s \u003c\u003c 13;\n  s >>>= 0;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  s >>>= 0;\n  p.seed = s;\n  return s / 4294967296;\n}\n\nfunction spawn(p, c, scatter) {\n  p.len[c] = 4 + rand(p) * (p.rows + 2) * (0.75 + 0.85 * p.density);\n  p.rate[c] = 0.55 + rand(p) * 0.9;\n  // The gap before the next drop is counted in cells, so it holds at any speed.\n  const gap = rand(p) * p.rows * 0.9 * (1 - p.density);\n  p.head[c] = scatter ? rand(p) * (p.rows + p.len[c]) : -gap;\n  p.wait[c] = 0;\n}\n\nfunction layout(p) {\n  p.pw = 4 * p.scale;\n  p.ph = 6 * p.scale;\n  p.cols = Math.floor(W / p.pw);\n  p.rows = Math.ceil(H / p.ph);\n  for (let c = 0; c \u003c p.cols; c++) {\n    // Golden-ratio steps: whatever share of columns runs is spread evenly.\n    const r = c * 0.618034 + 0.31;\n    p.rank[c] = r - Math.floor(r);\n    p.flick[c] = 0;\n    spawn(p, c, true);\n  }\n  for (let i = 0; i \u003c p.glyph.length; i++) {\n    p.glyph[i] = Math.floor(rand(p) * FONT.length);\n    p.flash[i] = 0;\n    p.glow[i] = 0;\n  }\n  p.started = false;\n}\n\nexport function setup(params) {\n  params.seed = 0x2545f491;\n  params.scale = 1;\n  params.density = 0;\n  params.glyph = new Uint8Array(COLS * ROWS);\n  params.flash = new Float32Array(COLS * ROWS);\n  params.glow = new Float32Array(COLS * ROWS);\n  params.head = new Float32Array(COLS);\n  params.len = new Float32Array(COLS);\n  params.rate = new Float32Array(COLS);\n  params.wait = new Float32Array(COLS);\n  params.rank = new Float32Array(COLS);\n  params.flick = new Float32Array(COLS);\n  params.fb = new Uint8Array(W * H * 3);\n  params.c = [0, 0, 0];\n  layout(params);\n}\n\nfunction step(p, dt) {\n  const share = 0.7 + 0.3 * p.density;\n  const move = p.fall * 5 * dt;\n  for (let c = 0; c \u003c p.cols; c++) {\n    if (p.wait[c] > 0) {\n      p.wait[c] -= dt;\n      if (p.wait[c] \u003c= 0 && p.rank[c] \u003c share) spawn(p, c, false);\n      else if (p.wait[c] \u003c= 0) p.wait[c] = 0.3;\n      continue;\n    }\n    const before = Math.floor(p.head[c]);\n    p.head[c] += move * p.rate[c];\n    const after = Math.floor(p.head[c]);\n    // The head writes a fresh glyph into each cell it enters, even the ones a\n    // fast drop crosses inside one frame.\n    for (let r = Math.max(0, before + 1); r \u003c= Math.min(after, p.rows - 1); r++) p.glyph[r * p.cols + c] = Math.floor(rand(p) * FONT.length);\n    // And it cannot make up its mind about the cell it is in.\n    p.flick[c] -= dt;\n    if (p.flick[c] \u003c= 0) {\n      p.flick[c] = 0.07;\n      if (after >= 0 && after \u003c p.rows) p.glyph[after * p.cols + c] = Math.floor(rand(p) * FONT.length);\n    }\n    if (p.head[c] - p.len[c] > p.rows) {\n      if (p.rank[c] \u003c share) spawn(p, c, false);\n      else p.wait[c] = 0.3;\n    }\n  }\n  // What a tail leaves behind fades the way a phosphor does, slower the\n  // longer the tails hang.\n  const fade = Math.exp(-dt / (1.8 + 3 * p.density));\n  const chance = (0.4 + 12 * p.mutate * p.mutate) * dt;\n  for (let r = 0; r \u003c p.rows; r++) {\n    for (let c = 0; c \u003c p.cols; c++) {\n      const i = r * p.cols + c;\n      p.flash[i] *= Math.exp(-dt * 7);\n      const d = p.head[c] - r;\n      const tail = p.wait[c] \u003c= 0 && d >= 1 && d \u003c= p.len[c];\n      if (tail) p.glow[i] = EMBER;\n      else if (p.glow[i] > 0) {\n        p.glow[i] *= fade;\n        if (p.glow[i] \u003c GONE) p.glow[i] = 0;\n      }\n      if (!tail && p.glow[i] === 0) continue;\n      if (rand(p) \u003c chance) {\n        p.glyph[i] = Math.floor(rand(p) * FONT.length);\n        p.flash[i] = 1;\n      }\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.hue = k[0];\n  p.fall = k[1];\n  p.density = k[2];\n  p.mutate = k[3];\n  if (input.btnPressed && input.btnPressed[3]) {\n    p.scale = 3 - p.scale;\n    layout(p);\n  }\n  if (!p.started) {\n    p.started = true;\n    // Rain that has been falling a while: the wall behind it is already written.\n    for (let i = 0; i \u003c 90; i++) step(p, 1 / 30);\n  }\n  step(p, dt);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const fb = p.fb;\n  fb.fill(0);\n  const c3 = p.c;\n  const sc = p.scale;\n  const hue = p.hue + GREEN;\n  for (let c = 0; c \u003c p.cols; c++) {\n    const live = p.wait[c] \u003c= 0;\n    const head = p.head[c];\n    const len = p.len[c];\n    for (let r = 0; r \u003c p.rows; r++) {\n      const d = head - r;\n      const i = r * p.cols + c;\n      if (live && d >= 0 && d \u003c 1) {\n        // The head: near white with a little of the hue in it.\n        hsv(hue + 0.04, 0.3, 1, c3);\n      } else {\n        let v;\n        let t;\n        if (live && d >= 1 && d \u003c= len) {\n          // A tail steps down a glyph at a time behind its head.\n          t = Math.floor(d) / len;\n          v = EMBER + (1 - EMBER) * Math.pow(1 - t, 1.25);\n        } else if (p.glow[i] > 0) {\n          t = 1;\n          v = p.glow[i];\n        } else continue;\n        v = Math.min(1, v + p.flash[i] * 0.35);\n        v = Math.round(v * STEPS) / STEPS;\n        hsv(hue + 0.06 - 0.08 * t, 0.8 + 0.2 * t, v, c3);\n      }\n      const R = c3[0];\n      const G = c3[1];\n      const B = c3[2];\n      const bits = FONT[p.glyph[i]];\n      const x0 = c * p.pw;\n      const y0 = r * p.ph;\n      for (let gy = 0; gy \u003c 5; gy++) {\n        const row = (bits >> ((4 - gy) * 3)) & 7;\n        if (!row) continue;\n        for (let gx = 0; gx \u003c 3; gx++) {\n          if (!(row & (4 >> gx))) continue;\n          for (let sy = 0; sy \u003c sc; sy++) {\n            const y = y0 + gy * sc + sy;\n            if (y >= H) continue;\n            for (let sx = 0; sx \u003c sc; sx++) {\n              const o = (y * W + x0 + gx * sc + sx) * 3;\n              fb[o] = R;\n              fb[o + 1] = G;\n              fb[o + 2] = B;\n            }\n          }\n        }\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, fb[o], fb[o + 1], fb[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-glyph-rain","type":"code","name":"glyph-rain","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Glyph Rain\n// Family:  type\n// Idea:    Every column keeps writing characters downward and forgets them as it goes, so the panel is full of text that never says anything.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Fall=0.3..6, Density=0..1, Mutate=0..1\n//\n// Knob 1: Hue. Turns the rain around the colour wheel from phosphor green; the heads stay close to white.\n// Knob 2: Fall. How fast the columns fall, each at its own pace around this one.\n// Knob 3: Density. How many columns run and how long their tails hang, up to a full wall of text.\n// Knob 4: Mutate. How often a glyph already written turns into another; turned all the way, the whole wall boils.\n// Buttons: K4 tap switches between small glyphs and double-size ones.\n\nconst W = 64;\nconst H = 128;\n// Small glyphs sit on a 4x6 pitch: 16 columns of 22 rows.\nconst COLS = Math.floor(W / 4);\nconst ROWS = Math.ceil(H / 6);\n\n// 3x5 glyphs, one octal digit per row from the top, 4 is the left column.\nconst FONT = [\n  0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717,\n  0o25755, 0o74647, 0o74644, 0o55755, 0o55655, 0o44447, 0o57755, 0o65644, 0o65655, 0o72222,\n  0o55557, 0o55255, 0o55222, 0o71247, 0o02720, 0o00700, 0o07070, 0o05250, 0o11244, 0o12421,\n  0o42124, 0o57575, 0o02020, 0o34216, 0o61243, 0o27272,\n];\n\n// Hue 0 is the green of an old terminal's phosphor rather than red.\nconst GREEN = 0.33;\n// Where a tail ends, and where the glyphs it leaves behind start to fade from.\nconst EMBER = 0.38;\n// Below this a fading glyph is gone: the panel shows next to nothing under 20/255.\nconst GONE = 0.09;\n// Levels are drawn in steps, so a fading glyph changes a few times on its way out\n// instead of on every frame.\nconst STEPS = 20;\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction rand(p) {\n  let s = p.seed;\n  s ^= s \u003c\u003c 13;\n  s >>>= 0;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  s >>>= 0;\n  p.seed = s;\n  return s / 4294967296;\n}\n\nfunction spawn(p, c, scatter) {\n  p.len[c] = 4 + rand(p) * (p.rows + 2) * (0.75 + 0.85 * p.density);\n  p.rate[c] = 0.55 + rand(p) * 0.9;\n  // The gap before the next drop is counted in cells, so it holds at any speed.\n  const gap = rand(p) * p.rows * 0.9 * (1 - p.density);\n  p.head[c] = scatter ? rand(p) * (p.rows + p.len[c]) : -gap;\n  p.wait[c] = 0;\n}\n\nfunction layout(p) {\n  p.pw = 4 * p.scale;\n  p.ph = 6 * p.scale;\n  p.cols = Math.floor(W / p.pw);\n  p.rows = Math.ceil(H / p.ph);\n  for (let c = 0; c \u003c p.cols; c++) {\n    // Golden-ratio steps: whatever share of columns runs is spread evenly.\n    const r = c * 0.618034 + 0.31;\n    p.rank[c] = r - Math.floor(r);\n    p.flick[c] = 0;\n    spawn(p, c, true);\n  }\n  for (let i = 0; i \u003c p.glyph.length; i++) {\n    p.glyph[i] = Math.floor(rand(p) * FONT.length);\n    p.flash[i] = 0;\n    p.glow[i] = 0;\n  }\n  p.started = false;\n}\n\nexport function setup(params) {\n  params.seed = 0x2545f491;\n  params.scale = 1;\n  params.density = 0;\n  params.glyph = new Uint8Array(COLS * ROWS);\n  params.flash = new Float32Array(COLS * ROWS);\n  params.glow = new Float32Array(COLS * ROWS);\n  params.head = new Float32Array(COLS);\n  params.len = new Float32Array(COLS);\n  params.rate = new Float32Array(COLS);\n  params.wait = new Float32Array(COLS);\n  params.rank = new Float32Array(COLS);\n  params.flick = new Float32Array(COLS);\n  params.fb = new Uint8Array(W * H * 3);\n  params.c = [0, 0, 0];\n  layout(params);\n}\n\nfunction step(p, dt) {\n  const share = 0.7 + 0.3 * p.density;\n  const move = p.fall * 5 * dt;\n  for (let c = 0; c \u003c p.cols; c++) {\n    if (p.wait[c] > 0) {\n      p.wait[c] -= dt;\n      if (p.wait[c] \u003c= 0 && p.rank[c] \u003c share) spawn(p, c, false);\n      else if (p.wait[c] \u003c= 0) p.wait[c] = 0.3;\n      continue;\n    }\n    const before = Math.floor(p.head[c]);\n    p.head[c] += move * p.rate[c];\n    const after = Math.floor(p.head[c]);\n    // The head writes a fresh glyph into each cell it enters, even the ones a\n    // fast drop crosses inside one frame.\n    for (let r = Math.max(0, before + 1); r \u003c= Math.min(after, p.rows - 1); r++) p.glyph[r * p.cols + c] = Math.floor(rand(p) * FONT.length);\n    // And it cannot make up its mind about the cell it is in.\n    p.flick[c] -= dt;\n    if (p.flick[c] \u003c= 0) {\n      p.flick[c] = 0.07;\n      if (after >= 0 && after \u003c p.rows) p.glyph[after * p.cols + c] = Math.floor(rand(p) * FONT.length);\n    }\n    if (p.head[c] - p.len[c] > p.rows) {\n      if (p.rank[c] \u003c share) spawn(p, c, false);\n      else p.wait[c] = 0.3;\n    }\n  }\n  // What a tail leaves behind fades the way a phosphor does, slower the\n  // longer the tails hang.\n  const fade = Math.exp(-dt / (1.8 + 3 * p.density));\n  const chance = (0.4 + 12 * p.mutate * p.mutate) * dt;\n  for (let r = 0; r \u003c p.rows; r++) {\n    for (let c = 0; c \u003c p.cols; c++) {\n      const i = r * p.cols + c;\n      p.flash[i] *= Math.exp(-dt * 7);\n      const d = p.head[c] - r;\n      const tail = p.wait[c] \u003c= 0 && d >= 1 && d \u003c= p.len[c];\n      if (tail) p.glow[i] = EMBER;\n      else if (p.glow[i] > 0) {\n        p.glow[i] *= fade;\n        if (p.glow[i] \u003c GONE) p.glow[i] = 0;\n      }\n      if (!tail && p.glow[i] === 0) continue;\n      if (rand(p) \u003c chance) {\n        p.glyph[i] = Math.floor(rand(p) * FONT.length);\n        p.flash[i] = 1;\n      }\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.hue = k[0];\n  p.fall = k[1];\n  p.density = k[2];\n  p.mutate = k[3];\n  if (input.btnPressed && input.btnPressed[3]) {\n    p.scale = 3 - p.scale;\n    layout(p);\n  }\n  if (!p.started) {\n    p.started = true;\n    // Rain that has been falling a while: the wall behind it is already written.\n    for (let i = 0; i \u003c 90; i++) step(p, 1 / 30);\n  }\n  step(p, dt);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const fb = p.fb;\n  fb.fill(0);\n  const c3 = p.c;\n  const sc = p.scale;\n  const hue = p.hue + GREEN;\n  for (let c = 0; c \u003c p.cols; c++) {\n    const live = p.wait[c] \u003c= 0;\n    const head = p.head[c];\n    const len = p.len[c];\n    for (let r = 0; r \u003c p.rows; r++) {\n      const d = head - r;\n      const i = r * p.cols + c;\n      if (live && d >= 0 && d \u003c 1) {\n        // The head: near white with a little of the hue in it.\n        hsv(hue + 0.04, 0.3, 1, c3);\n      } else {\n        let v;\n        let t;\n        if (live && d >= 1 && d \u003c= len) {\n          // A tail steps down a glyph at a time behind its head.\n          t = Math.floor(d) / len;\n          v = EMBER + (1 - EMBER) * Math.pow(1 - t, 1.25);\n        } else if (p.glow[i] > 0) {\n          t = 1;\n          v = p.glow[i];\n        } else continue;\n        v = Math.min(1, v + p.flash[i] * 0.35);\n        v = Math.round(v * STEPS) / STEPS;\n        hsv(hue + 0.06 - 0.08 * t, 0.8 + 0.2 * t, v, c3);\n      }\n      const R = c3[0];\n      const G = c3[1];\n      const B = c3[2];\n      const bits = FONT[p.glyph[i]];\n      const x0 = c * p.pw;\n      const y0 = r * p.ph;\n      for (let gy = 0; gy \u003c 5; gy++) {\n        const row = (bits >> ((4 - gy) * 3)) & 7;\n        if (!row) continue;\n        for (let gx = 0; gx \u003c 3; gx++) {\n          if (!(row & (4 >> gx))) continue;\n          for (let sy = 0; sy \u003c sc; sy++) {\n            const y = y0 + gy * sc + sy;\n            if (y >= H) continue;\n            for (let sx = 0; sx \u003c sc; sx++) {\n              const o = (y * W + x0 + gx * sc + sx) * 3;\n              fb[o] = R;\n              fb[o + 1] = G;\n              fb[o + 2] = B;\n            }\n          }\n        }\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, fb[o], fb[o + 1], fb[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Fall=0.3..6, Density=0..1, Mutate=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the rain around the colour wheel from phosphor green; the heads stay close to white."},{"name":"Fall","min":0.3,"max":6,"about":"How fast the columns fall, each at its own pace around this one."},{"name":"Density","min":0,"max":1,"about":"How many columns run and how long their tails hang, up to a full wall of text."},{"name":"Mutate","min":0,"max":1,"about":"How often a glyph already written turns into another; turned all the way, the whole wall boils."}],"start":[0,2,0,0.06],"measures":{"motion":0.2257,"detail":0.0998,"edges":0.7469,"complexity":0.2343,"coverage":0.2152,"colour":0.1998,"drift":0.0956},"knobResponse":[0.0655,0.0718,0.1045,0.0664]},{"slug":"guilloche","title":"Guilloché","family":"line","round":16,"note":"장미 기관으로 깎은 은판의 보리알 띠와 물결 띠가 패널 높이의 타원으로 서고, 등불이 돌면 그 쪽을 향한 홈만 금빛으로 번쩍여요. K1 을 누르면 칼끝이 귀퉁이에서 가운데로 들어오며 판을 새 무늬로 다시 깎아요.","idea":"An engine-turned silver plate stands the height of the panel, an oval of rose-engine bands inside straight-line corners, and as a lamp circles it each groove flashes or goes dark by the way it was cut.","buttons":"K1 tap re-cuts the plate with the next set of patterns, the cutter working in from the corners to the centre.","code":"// ===== Patternflow pattern =====\n// Title:   Guilloché\n// Family:  line\n// Idea:    An engine-turned silver plate stands the height of the panel, an oval of rose-engine bands inside straight-line corners, and as a lamp circles it each groove flashes or goes dark by the way it was cut.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: guilloché, the rose engine and the straight-line engine, as on Breguet dials and banknotes\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Metal=0..1, Light=0..4, Lobes=12..36, Phasing=0..0.5\n//\n// Knob 1: Metal. Silver at 0, then champagne, yellow gold and rose gold at the far end.\n// Knob 2: Light. How fast the lamp travels round the plate: once in ten seconds at 2, in five at 4; at 0 it stands still and only the rosettes drift.\n// Knob 3: Lobes. Bosses on the rosette cam, 12 to 36: the waves, the barleycorn grains, the basketweave cells and the corner waves all grow finer.\n// Knob 4: Phasing. How far the rosette is turned between one cut and the next, in lobes: 0 nests the waves, a little twists them into flames, 0.5 trades waves for barleycorn.\n// Buttons: K1 tap re-cuts the plate with the next set of patterns, the cutter working in from the corners to the centre.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\nconst CY = 63.5;\nconst TAU = Math.PI * 2;\n// The oval chuck. The cutter at radius R traces an ellipse with semi-axes\n// R - E across and R + E up, so the axes always differ by 2E: cuts made at an\n// even pitch stay evenly spaced all the way round, which scaled ellipses\n// would not. At R = 48 the oval is 64 by 128 and meets the panel's sides; at\n// R = E it closes to a slot 64 LEDs tall down the middle.\nconst E = 16;\nconst RIM = 48;\n// One cut every two LEDs: a groove and a gap.\nconst PITCH = 2;\n// How much of an LED's width blurs a groove's edge. A whole LED gave every\n// slanting groove a soft grey edge and the bands went to mud; at 0.15 the\n// grooves stay crisp, and one that runs between two LEDs still lights both.\nconst SHARP = 0.15;\n\nconst TS = 2048;\nconst SIN = new Float32Array(TS);\nfor (let i = 0; i \u003c TS; i++) SIN[i] = Math.sin((i / TS) * TAU);\nfunction sinT(u) {\n  return SIN[((u - Math.floor(u)) * TS) & (TS - 1)];\n}\nfunction cosT(u) {\n  return sinT(u + 0.25);\n}\n\n// What lies under an LED.\nconst POLISH = 0;\nconst CUT = 1;\nconst BOSS = 2;\n\n// The patterns a band can carry.\nconst FLAT = 0; // a polished ring between bands\nconst WAVE = 1; // vagues: cuts rocked by the rosette, each turned on by the phasing\nconst BARLEY = 2; // grain d'orge: every other cut turned half a lobe, so neighbours cross\nconst RAYS = 3; // a sunburst of straight cuts out from the centre\nconst BASKET = 4; // panier: round and radial cuts taking turns in cells\nconst CLOUS = 5; // clous de Paris: a field of little pyramids\n\n// The plates K1 steps through. Zones from the centre out, each a pattern\n// and the radius it runs to; the corners outside the oval are the\n// straight-line engine's: how far the rosette rocks its cuts, how many waves\n// it puts in 512 / lobes LEDs, and the turn between one cut and the next.\nconst PLATES = [\n  {\n    zones: [CLOUS, 21.5, FLAT, 22.5, BARLEY, 34.5, FLAT, 35.5, WAVE, 47.5, FLAT, 49],\n    corner: { amp: 1.8, waves: 2, step: 0.1 },\n  },\n  {\n    zones: [RAYS, 21.5, FLAT, 22.5, BASKET, 34.5, FLAT, 35.5, BARLEY, 47.5, FLAT, 49],\n    corner: { amp: 1.6, waves: 2, step: 0.5 },\n  },\n  {\n    zones: [BASKET, 21.5, FLAT, 22.5, WAVE, 34.5, FLAT, 35.5, RAYS, 47.5, FLAT, 49],\n    corner: { amp: 2.5, waves: 2, step: 0.25 },\n  },\n];\n\nfunction chuckR(X, Y) {\n  const ax = Math.abs(X);\n  const ay = Math.abs(Y);\n  let lo = E + ax;\n  let hi = E + ax + ay + 1;\n  for (let i = 0; i \u003c 30; i++) {\n    const m = 0.5 * (lo + hi);\n    const a = m - E;\n    const b = m + E;\n    if ((ax * ax) / (a * a) + (ay * ay) / (b * b) > 1) lo = m;\n    else hi = m;\n  }\n  return 0.5 * (lo + hi);\n}\n\n// The angle round the oval in turns, stretched so a lobe of the cam is about\n// as long at the sides as at the ends.\nfunction chuckT(X, Y, R) {\n  const a = R - E;\n  const b = R + E;\n  const t = Math.atan2(Y / b, X / a);\n  const k = (b * b - a * a) / (b * b + a * a);\n  return (t + 0.25 * k * Math.sin(2 * t)) / TAU;\n}\n\nfunction wrapTurn(d) {\n  return d - Math.round(d);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.R = new Float32Array(N);\n  P.T = new Float32Array(N);\n  P.rx = new Float32Array(N);\n  P.ry = new Float32Array(N);\n  P.tx = new Float32Array(N);\n  P.ty = new Float32Array(N);\n  const h = 0.01;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const X = x - CX;\n      const Y = y - CY;\n      const R = chuckR(X, Y);\n      P.R[p] = R;\n      P.T[p] = chuckT(X, Y, R);\n      const Rxp = chuckR(X + h, Y);\n      const Rxm = chuckR(X - h, Y);\n      const Ryp = chuckR(X, Y + h);\n      const Rym = chuckR(X, Y - h);\n      P.rx[p] = (Rxp - Rxm) / (2 * h);\n      P.ry[p] = (Ryp - Rym) / (2 * h);\n      P.tx[p] = wrapTurn(chuckT(X + h, Y, Rxp) - chuckT(X - h, Y, Rxm)) / (2 * h);\n      P.ty[p] = wrapTurn(chuckT(X, Y + h, Ryp) - chuckT(X, Y - h, Rym)) / (2 * h);\n    }\n  }\n  P.plate = 0;\n  P.old = 0;\n  P.front = -1;\n  P.metal = 0;\n  P.speed = 2;\n  P.lobes = 12;\n  P.phasing = 0.06;\n  P.lampA = 2.2;\n  P.drift = 0;\n  P.t = 0;\n  P.frame = 0;\n  // The surface under each LED, worked out a third of the rows a frame: the\n  // rosettes drift about a LED a second, so a row is never more than a\n  // fourteenth of a LED behind.\n  P.kind = new Uint8Array(N);\n  P.gx = new Float32Array(N);\n  P.gy = new Float32Array(N);\n  P.cov = new Float32Array(N);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 12, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.metal = Math.max(0, Math.min(1, k[0]));\n  P.speed = Math.max(0, Math.min(4, k[1]));\n  P.lobes = Math.round(Math.max(12, Math.min(36, k[2])));\n  P.phasing = Math.max(0, Math.min(0.5, k[3]));\n  P.t += dt;\n  P.lampA += dt * 0.32 * P.speed;\n  P.drift += dt * 0.05;\n  if (input.btnPressed && input.btnPressed[0] && P.front \u003c 0) {\n    P.old = P.plate;\n    P.plate = (P.plate + 1) % PLATES.length;\n    P.front = 78;\n  }\n  if (P.front >= 0) {\n    P.front -= dt * 20;\n    if (P.front \u003c 14) P.front = -1;\n  }\n}\n\n// The surface under one LED: its kind, the direction across the groove\n// there (GX, GY, a unit vector in the plate), and how much of the LED the\n// groove covers (COV).\nlet KIND = POLISH;\nlet GX = 0;\nlet GY = 0;\nlet COV = 0;\n\nfunction polish() {\n  KIND = POLISH;\n  GX = 0;\n  GY = 0;\n  COV = 0;\n}\n\n// The share of an LED's footprint [d - hw, d + hw] that a groove one LED\n// wide centred at c covers.\nfunction overlap(d, hw, c) {\n  const lo = Math.max(d - hw, c - 0.5);\n  const hi = Math.min(d + hw, c + 0.5);\n  return hi > lo ? (hi - lo) / (2 * hw) : 0;\n}\n\n// d is the LED's distance from the nearest cut's centre line, along the\n// direction (gx, gy) / g across it.\nfunction cut(d, gx, gy, g, pitch) {\n  KIND = CUT;\n  GX = gx / g;\n  GY = gy / g;\n  const hw = SHARP * (Math.abs(GX) + Math.abs(GY));\n  COV = Math.min(1, overlap(d, hw, 0) + overlap(d, hw, d > 0 ? pitch : -pitch));\n}\n\n// Rose-engine cuts round the oval: cut k sits at r0 + PITCH (k + 1/2) and the\n// cam rocks it in and out by amp, n lobes a turn, turned on by step lobes\n// for each cut and by rot for the whole band.\nfunction rose(P, p, r0, r1, n, amp, step, rot) {\n  const R = P.R[p];\n  const T = P.T[p];\n  const cuts = Math.max(1, Math.floor((r1 - r0) / PITCH));\n  const kc = (R - r0) / PITCH - 0.5;\n  const reach = amp / PITCH + 1;\n  const k0 = Math.max(0, Math.floor(kc - reach));\n  const k1 = Math.min(cuts - 1, Math.ceil(kc + reach));\n  const rx = P.rx[p];\n  const ry = P.ry[p];\n  const tx = P.tx[p] * TAU * n * amp;\n  const ty = P.ty[p] * TAU * n * amp;\n  let best = 1e9;\n  let bx = 0;\n  let by = 0;\n  let bg = 1;\n  let bd = 0;\n  // The nearest cut, compared by squared distance d^2 / |grad|^2.\n  for (let c = k0; c \u003c= k1; c++) {\n    const u = n * T + step * c + rot;\n    const d = R - (r0 + PITCH * (c + 0.5)) - amp * sinT(u);\n    const w = cosT(u);\n    const gx = rx - w * tx;\n    const gy = ry - w * ty;\n    const g2 = gx * gx + gy * gy + 1e-9;\n    const q = (d * d) / g2;\n    if (q \u003c best) {\n      best = q;\n      bx = gx;\n      by = gy;\n      bg = g2;\n      bd = d;\n    }\n  }\n  const g = Math.sqrt(bg);\n  cut(bd / g, bx, by, g, PITCH);\n}\n\n// Sunburst: straight cuts out from the centre, count of them set so they\n// are a pitch apart at the band's middle, twisted by the phasing.\nfunction rays(P, p, r0, r1, phasing) {\n  const R = P.R[p];\n  const mid = 0.5 * (r0 + r1);\n  const around = Math.PI * (3 * 2 * mid - Math.sqrt((3 * (mid - E) + mid + E) * (mid - E + 3 * (mid + E))));\n  const m = Math.round(around / PITCH);\n  const tw = phasing * 0.6;\n  const q = m * P.T[p] + tw * (R - r0);\n  const gx = m * P.tx[p] + tw * P.rx[p];\n  const gy = m * P.ty[p] + tw * P.ry[p];\n  const g = Math.sqrt(gx * gx + gy * gy) + 1e-6;\n  cut((q - Math.round(q)) / g, gx, gy, g, PITCH);\n}\n\n// Basketweave: cells two cuts deep, round cuts and radial cuts taking turns\n// like the over and under of a weave.\nfunction basket(P, p, r0, r1, lobes) {\n  const R = P.R[p];\n  const T = P.T[p];\n  const cellR = 2 * PITCH;\n  const i = Math.floor((R - r0) / cellR);\n  const cells = lobes * 2;\n  const j = Math.floor((T + 1) * cells);\n  if ((i + j) & 1) {\n    const m = (cells * 2.5) | 0;\n    const q = m * T;\n    const gx = m * P.tx[p];\n    const gy = m * P.ty[p];\n    const g = Math.sqrt(gx * gx + gy * gy) + 1e-6;\n    cut((q - Math.round(q)) / g, gx, gy, g, PITCH);\n  } else {\n    const q = (R - r0) / PITCH - 0.5;\n    const g = Math.sqrt(P.rx[p] * P.rx[p] + P.ry[p] * P.ry[p]) + 1e-6;\n    cut(((q - Math.round(q)) * PITCH) / g, P.rx[p], P.ry[p], g, PITCH);\n  }\n}\n\n// Clous de Paris: two sets of straight cuts crossing at right angles, set\n// diagonal on the plate, leave a field of little square pyramids. Each face\n// of a pyramid leans towards the cut beside it.\nfunction clous(x, y, size) {\n  const X = x - CX;\n  const Y = y - CY;\n  const q1 = (X + Y) / (size * Math.SQRT2);\n  const q2 = (X - Y) / (size * Math.SQRT2);\n  const d1 = (q1 - Math.round(q1)) * size;\n  const d2 = (q2 - Math.round(q2)) * size;\n  const one = Math.abs(d1) \u003c Math.abs(d2);\n  const d = one ? d1 : d2;\n  cut(d, 1, one ? 1 : -1, Math.SQRT2, size);\n  KIND = BOSS;\n  // The face leans down towards the cut it slopes into.\n  if (d > 0) {\n    GX = -GX;\n    GY = -GY;\n  }\n}\n\n// The straight-line engine fills the corners: the work slides past the\n// cutter instead of turning, so the cuts run straight across the plate,\n// rocked up and down by the same rosette.\nfunction straight(x, y, c, lobes, phasing, rot) {\n  const X = x - CX;\n  const Y = y - CY;\n  const f = (c.waves * lobes) / 512;\n  const slope = c.amp * TAU * f;\n  const kc = Math.round(Y / PITCH);\n  const reach = Math.ceil(c.amp / PITCH) + 1;\n  let best = 1e9;\n  let bd = 0;\n  let bx = 0;\n  let bg = 1;\n  for (let k = kc - reach; k \u003c= kc + reach; k++) {\n    const u = f * X + (c.step + phasing) * k + rot;\n    const d = Y - PITCH * k - c.amp * sinT(u);\n    const gx = -slope * cosT(u);\n    const g2 = gx * gx + 1;\n    const q = (d * d) / g2;\n    if (q \u003c best) {\n      best = q;\n      bd = d;\n      bx = gx;\n      bg = g2;\n    }\n  }\n  const g = Math.sqrt(bg);\n  cut(bd / g, bx, 1, g, PITCH);\n}\n\nfunction surface(P, p, x, y, plate) {\n  const R = P.R[p];\n  if (R > RIM + 1) return straight(x, y, plate.corner, P.lobes, P.phasing, P.drift);\n  const zones = plate.zones;\n  let r0 = 0;\n  for (let i = 0; i \u003c zones.length; i += 2) {\n    const r1 = zones[i + 1];\n    if (R \u003c r1 || i === zones.length - 2) {\n      const kind = zones[i];\n      // Neighbouring bands drift opposite ways.\n      const rot = i & 4 ? -P.drift : P.drift;\n      if (kind === WAVE) return rose(P, p, r0, r1, P.lobes, 3, P.phasing, rot);\n      if (kind === BARLEY) return rose(P, p, r0, r1, P.lobes, 2.2, 0.5 + P.phasing, rot);\n      if (kind === RAYS) return rays(P, p, r0, r1, P.phasing);\n      if (kind === BASKET) return basket(P, p, r0, r1, P.lobes);\n      if (kind === CLOUS) return clous(x, y, 4);\n      return polish();\n    }\n    r0 = r1;\n  }\n}\n\nconst METALS = [\n  [0.97, 0.98, 1.0],\n  [1.0, 0.93, 0.78],\n  [1.0, 0.8, 0.42],\n  [1.0, 0.68, 0.56],\n];\n\n// The land between grooves, a groove in shadow, and how much more a groove\n// gives back when it faces the lamp.\nconst LAND = 0.64;\nconst GROOVE = 0.12;\nconst GLINT = 1.3;\n\n// The cutter's point, white hot where it bites, as it runs round the front.\nfunction drawCutter(display, P) {\n  const f = P.front;\n  if (f \u003c E + 1) return;\n  const a = P.t * TAU * 2;\n  const cx = CX + (f - E) * Math.cos(a);\n  const cy = CY + (f + E) * Math.sin(a);\n  for (let j = -1; j \u003c= 1; j++) {\n    for (let i = -1; i \u003c= 1; i++) {\n      const x = Math.round(cx) + i;\n      const y = Math.round(cy) + j;\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const v = i === 0 && j === 0 ? 255 : 200;\n      display.setPixel(x, y, v, v, i === 0 && j === 0 ? 240 : 150);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const mu = P.metal * (METALS.length - 1);\n  const mi = Math.min(METALS.length - 2, Math.floor(mu));\n  const mf = mu - mi;\n  const mr = METALS[mi][0] + (METALS[mi + 1][0] - METALS[mi][0]) * mf;\n  const mg = METALS[mi][1] + (METALS[mi + 1][1] - METALS[mi][1]) * mf;\n  const mb = METALS[mi][2] + (METALS[mi + 1][2] - METALS[mi][2]) * mf;\n  // The lamp circles the plate on a tall ellipse, 46 LEDs out from the\n  // middle at the sides and 72 at the ends, just off the panel.\n  const LX = CX + 46 * Math.cos(P.lampA);\n  const LY = CY + 72 * Math.sin(P.lampA);\n  const cur = PLATES[P.plate];\n  const old = PLATES[P.old];\n  const front = P.front;\n  const all = P.frame === 0;\n  const third = P.frame % 3;\n  P.frame++;\n  for (let y = all ? 0 : third; y \u003c H; y += all ? 1 : 3) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      surface(P, p, x, y, front >= 0 && P.R[p] \u003c front ? old : cur);\n      P.kind[p] = KIND;\n      P.gx[p] = GX;\n      P.gy[p] = GY;\n      P.cov[p] = COV;\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const dx = LX - x;\n      const dy = LY - y;\n      const dd = dx * dx + dy * dy;\n      const id = 1 / Math.sqrt(dd + 1);\n      const fall = 1 / (1 + dd * 0.00016);\n      const kind = P.kind[p];\n      const cov = P.cov[p];\n      // Two lights: the cool room, and the warm lamp.\n      let room;\n      let lamp;\n      if (kind === CUT) {\n        // A groove throws the lamp back when it runs across the lamp's\n        // direction: the streak every engine-turned dial has, running from\n        // the lamp over the cuts that face it.\n        let a = (P.gx[p] * dx + P.gy[p] * dy) * id;\n        a *= a;\n        const g8 = a * a * a * a;\n        // The window above lights the land between grooves that run across\n        // the plate a little more than the land between grooves that run up it.\n        const gy = P.gy[p];\n        room = LAND * (0.86 + 0.28 * gy * gy) * (1 - cov) + GROOVE * cov;\n        lamp = fall * (0.5 * a * (1 - cov) + GLINT * g8 * cov);\n      } else if (kind === BOSS) {\n        const a = (P.gx[p] * dx + P.gy[p] * dy) * id;\n        const lit = a > 0 ? a * a : 0;\n        room = (0.55 - 0.2 * P.gy[p]) * (1 - cov) + GROOVE * cov;\n        lamp = fall * 0.8 * lit * (1 - cov);\n      } else {\n        // Polished: bright where it shows the window, brighter by the lamp.\n        room = 0.8;\n        lamp = 0.5 / (1 + dd * 0.0005);\n      }\n      let r = (room * 0.83 + lamp) * mr;\n      let g = (room * 0.91 + lamp * 0.85) * mg;\n      let b = (room * 1.0 + lamp * 0.6) * mb;\n      if (front >= 0) {\n        // Just behind the cutter the metal is fresh and bright, and it dulls\n        // over the next four LEDs.\n        const e = P.R[p] - front;\n        if (e > -0.6 && e \u003c 4) {\n          const glow = e \u003c 0.6 ? 0.9 : 0.45 * (1 - (e - 0.6) / 3.4);\n          r += glow;\n          g += glow * 0.94;\n          b += glow * 0.82;\n        }\n      }\n      display.setPixel(x, y, Math.min(255, r * 255), Math.min(255, g * 255), Math.min(255, b * 255));\n    }\n  }\n  if (front >= 0) drawCutter(display, P);\n}\n","layer":{"id":"layer-guilloche","type":"code","name":"guilloche","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Guilloché\n// Family:  line\n// Idea:    An engine-turned silver plate stands the height of the panel, an oval of rose-engine bands inside straight-line corners, and as a lamp circles it each groove flashes or goes dark by the way it was cut.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: guilloché, the rose engine and the straight-line engine, as on Breguet dials and banknotes\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Metal=0..1, Light=0..4, Lobes=12..36, Phasing=0..0.5\n//\n// Knob 1: Metal. Silver at 0, then champagne, yellow gold and rose gold at the far end.\n// Knob 2: Light. How fast the lamp travels round the plate: once in ten seconds at 2, in five at 4; at 0 it stands still and only the rosettes drift.\n// Knob 3: Lobes. Bosses on the rosette cam, 12 to 36: the waves, the barleycorn grains, the basketweave cells and the corner waves all grow finer.\n// Knob 4: Phasing. How far the rosette is turned between one cut and the next, in lobes: 0 nests the waves, a little twists them into flames, 0.5 trades waves for barleycorn.\n// Buttons: K1 tap re-cuts the plate with the next set of patterns, the cutter working in from the corners to the centre.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\nconst CY = 63.5;\nconst TAU = Math.PI * 2;\n// The oval chuck. The cutter at radius R traces an ellipse with semi-axes\n// R - E across and R + E up, so the axes always differ by 2E: cuts made at an\n// even pitch stay evenly spaced all the way round, which scaled ellipses\n// would not. At R = 48 the oval is 64 by 128 and meets the panel's sides; at\n// R = E it closes to a slot 64 LEDs tall down the middle.\nconst E = 16;\nconst RIM = 48;\n// One cut every two LEDs: a groove and a gap.\nconst PITCH = 2;\n// How much of an LED's width blurs a groove's edge. A whole LED gave every\n// slanting groove a soft grey edge and the bands went to mud; at 0.15 the\n// grooves stay crisp, and one that runs between two LEDs still lights both.\nconst SHARP = 0.15;\n\nconst TS = 2048;\nconst SIN = new Float32Array(TS);\nfor (let i = 0; i \u003c TS; i++) SIN[i] = Math.sin((i / TS) * TAU);\nfunction sinT(u) {\n  return SIN[((u - Math.floor(u)) * TS) & (TS - 1)];\n}\nfunction cosT(u) {\n  return sinT(u + 0.25);\n}\n\n// What lies under an LED.\nconst POLISH = 0;\nconst CUT = 1;\nconst BOSS = 2;\n\n// The patterns a band can carry.\nconst FLAT = 0; // a polished ring between bands\nconst WAVE = 1; // vagues: cuts rocked by the rosette, each turned on by the phasing\nconst BARLEY = 2; // grain d'orge: every other cut turned half a lobe, so neighbours cross\nconst RAYS = 3; // a sunburst of straight cuts out from the centre\nconst BASKET = 4; // panier: round and radial cuts taking turns in cells\nconst CLOUS = 5; // clous de Paris: a field of little pyramids\n\n// The plates K1 steps through. Zones from the centre out, each a pattern\n// and the radius it runs to; the corners outside the oval are the\n// straight-line engine's: how far the rosette rocks its cuts, how many waves\n// it puts in 512 / lobes LEDs, and the turn between one cut and the next.\nconst PLATES = [\n  {\n    zones: [CLOUS, 21.5, FLAT, 22.5, BARLEY, 34.5, FLAT, 35.5, WAVE, 47.5, FLAT, 49],\n    corner: { amp: 1.8, waves: 2, step: 0.1 },\n  },\n  {\n    zones: [RAYS, 21.5, FLAT, 22.5, BASKET, 34.5, FLAT, 35.5, BARLEY, 47.5, FLAT, 49],\n    corner: { amp: 1.6, waves: 2, step: 0.5 },\n  },\n  {\n    zones: [BASKET, 21.5, FLAT, 22.5, WAVE, 34.5, FLAT, 35.5, RAYS, 47.5, FLAT, 49],\n    corner: { amp: 2.5, waves: 2, step: 0.25 },\n  },\n];\n\nfunction chuckR(X, Y) {\n  const ax = Math.abs(X);\n  const ay = Math.abs(Y);\n  let lo = E + ax;\n  let hi = E + ax + ay + 1;\n  for (let i = 0; i \u003c 30; i++) {\n    const m = 0.5 * (lo + hi);\n    const a = m - E;\n    const b = m + E;\n    if ((ax * ax) / (a * a) + (ay * ay) / (b * b) > 1) lo = m;\n    else hi = m;\n  }\n  return 0.5 * (lo + hi);\n}\n\n// The angle round the oval in turns, stretched so a lobe of the cam is about\n// as long at the sides as at the ends.\nfunction chuckT(X, Y, R) {\n  const a = R - E;\n  const b = R + E;\n  const t = Math.atan2(Y / b, X / a);\n  const k = (b * b - a * a) / (b * b + a * a);\n  return (t + 0.25 * k * Math.sin(2 * t)) / TAU;\n}\n\nfunction wrapTurn(d) {\n  return d - Math.round(d);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.R = new Float32Array(N);\n  P.T = new Float32Array(N);\n  P.rx = new Float32Array(N);\n  P.ry = new Float32Array(N);\n  P.tx = new Float32Array(N);\n  P.ty = new Float32Array(N);\n  const h = 0.01;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const X = x - CX;\n      const Y = y - CY;\n      const R = chuckR(X, Y);\n      P.R[p] = R;\n      P.T[p] = chuckT(X, Y, R);\n      const Rxp = chuckR(X + h, Y);\n      const Rxm = chuckR(X - h, Y);\n      const Ryp = chuckR(X, Y + h);\n      const Rym = chuckR(X, Y - h);\n      P.rx[p] = (Rxp - Rxm) / (2 * h);\n      P.ry[p] = (Ryp - Rym) / (2 * h);\n      P.tx[p] = wrapTurn(chuckT(X + h, Y, Rxp) - chuckT(X - h, Y, Rxm)) / (2 * h);\n      P.ty[p] = wrapTurn(chuckT(X, Y + h, Ryp) - chuckT(X, Y - h, Rym)) / (2 * h);\n    }\n  }\n  P.plate = 0;\n  P.old = 0;\n  P.front = -1;\n  P.metal = 0;\n  P.speed = 2;\n  P.lobes = 12;\n  P.phasing = 0.06;\n  P.lampA = 2.2;\n  P.drift = 0;\n  P.t = 0;\n  P.frame = 0;\n  // The surface under each LED, worked out a third of the rows a frame: the\n  // rosettes drift about a LED a second, so a row is never more than a\n  // fourteenth of a LED behind.\n  P.kind = new Uint8Array(N);\n  P.gx = new Float32Array(N);\n  P.gy = new Float32Array(N);\n  P.cov = new Float32Array(N);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 12, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.metal = Math.max(0, Math.min(1, k[0]));\n  P.speed = Math.max(0, Math.min(4, k[1]));\n  P.lobes = Math.round(Math.max(12, Math.min(36, k[2])));\n  P.phasing = Math.max(0, Math.min(0.5, k[3]));\n  P.t += dt;\n  P.lampA += dt * 0.32 * P.speed;\n  P.drift += dt * 0.05;\n  if (input.btnPressed && input.btnPressed[0] && P.front \u003c 0) {\n    P.old = P.plate;\n    P.plate = (P.plate + 1) % PLATES.length;\n    P.front = 78;\n  }\n  if (P.front >= 0) {\n    P.front -= dt * 20;\n    if (P.front \u003c 14) P.front = -1;\n  }\n}\n\n// The surface under one LED: its kind, the direction across the groove\n// there (GX, GY, a unit vector in the plate), and how much of the LED the\n// groove covers (COV).\nlet KIND = POLISH;\nlet GX = 0;\nlet GY = 0;\nlet COV = 0;\n\nfunction polish() {\n  KIND = POLISH;\n  GX = 0;\n  GY = 0;\n  COV = 0;\n}\n\n// The share of an LED's footprint [d - hw, d + hw] that a groove one LED\n// wide centred at c covers.\nfunction overlap(d, hw, c) {\n  const lo = Math.max(d - hw, c - 0.5);\n  const hi = Math.min(d + hw, c + 0.5);\n  return hi > lo ? (hi - lo) / (2 * hw) : 0;\n}\n\n// d is the LED's distance from the nearest cut's centre line, along the\n// direction (gx, gy) / g across it.\nfunction cut(d, gx, gy, g, pitch) {\n  KIND = CUT;\n  GX = gx / g;\n  GY = gy / g;\n  const hw = SHARP * (Math.abs(GX) + Math.abs(GY));\n  COV = Math.min(1, overlap(d, hw, 0) + overlap(d, hw, d > 0 ? pitch : -pitch));\n}\n\n// Rose-engine cuts round the oval: cut k sits at r0 + PITCH (k + 1/2) and the\n// cam rocks it in and out by amp, n lobes a turn, turned on by step lobes\n// for each cut and by rot for the whole band.\nfunction rose(P, p, r0, r1, n, amp, step, rot) {\n  const R = P.R[p];\n  const T = P.T[p];\n  const cuts = Math.max(1, Math.floor((r1 - r0) / PITCH));\n  const kc = (R - r0) / PITCH - 0.5;\n  const reach = amp / PITCH + 1;\n  const k0 = Math.max(0, Math.floor(kc - reach));\n  const k1 = Math.min(cuts - 1, Math.ceil(kc + reach));\n  const rx = P.rx[p];\n  const ry = P.ry[p];\n  const tx = P.tx[p] * TAU * n * amp;\n  const ty = P.ty[p] * TAU * n * amp;\n  let best = 1e9;\n  let bx = 0;\n  let by = 0;\n  let bg = 1;\n  let bd = 0;\n  // The nearest cut, compared by squared distance d^2 / |grad|^2.\n  for (let c = k0; c \u003c= k1; c++) {\n    const u = n * T + step * c + rot;\n    const d = R - (r0 + PITCH * (c + 0.5)) - amp * sinT(u);\n    const w = cosT(u);\n    const gx = rx - w * tx;\n    const gy = ry - w * ty;\n    const g2 = gx * gx + gy * gy + 1e-9;\n    const q = (d * d) / g2;\n    if (q \u003c best) {\n      best = q;\n      bx = gx;\n      by = gy;\n      bg = g2;\n      bd = d;\n    }\n  }\n  const g = Math.sqrt(bg);\n  cut(bd / g, bx, by, g, PITCH);\n}\n\n// Sunburst: straight cuts out from the centre, count of them set so they\n// are a pitch apart at the band's middle, twisted by the phasing.\nfunction rays(P, p, r0, r1, phasing) {\n  const R = P.R[p];\n  const mid = 0.5 * (r0 + r1);\n  const around = Math.PI * (3 * 2 * mid - Math.sqrt((3 * (mid - E) + mid + E) * (mid - E + 3 * (mid + E))));\n  const m = Math.round(around / PITCH);\n  const tw = phasing * 0.6;\n  const q = m * P.T[p] + tw * (R - r0);\n  const gx = m * P.tx[p] + tw * P.rx[p];\n  const gy = m * P.ty[p] + tw * P.ry[p];\n  const g = Math.sqrt(gx * gx + gy * gy) + 1e-6;\n  cut((q - Math.round(q)) / g, gx, gy, g, PITCH);\n}\n\n// Basketweave: cells two cuts deep, round cuts and radial cuts taking turns\n// like the over and under of a weave.\nfunction basket(P, p, r0, r1, lobes) {\n  const R = P.R[p];\n  const T = P.T[p];\n  const cellR = 2 * PITCH;\n  const i = Math.floor((R - r0) / cellR);\n  const cells = lobes * 2;\n  const j = Math.floor((T + 1) * cells);\n  if ((i + j) & 1) {\n    const m = (cells * 2.5) | 0;\n    const q = m * T;\n    const gx = m * P.tx[p];\n    const gy = m * P.ty[p];\n    const g = Math.sqrt(gx * gx + gy * gy) + 1e-6;\n    cut((q - Math.round(q)) / g, gx, gy, g, PITCH);\n  } else {\n    const q = (R - r0) / PITCH - 0.5;\n    const g = Math.sqrt(P.rx[p] * P.rx[p] + P.ry[p] * P.ry[p]) + 1e-6;\n    cut(((q - Math.round(q)) * PITCH) / g, P.rx[p], P.ry[p], g, PITCH);\n  }\n}\n\n// Clous de Paris: two sets of straight cuts crossing at right angles, set\n// diagonal on the plate, leave a field of little square pyramids. Each face\n// of a pyramid leans towards the cut beside it.\nfunction clous(x, y, size) {\n  const X = x - CX;\n  const Y = y - CY;\n  const q1 = (X + Y) / (size * Math.SQRT2);\n  const q2 = (X - Y) / (size * Math.SQRT2);\n  const d1 = (q1 - Math.round(q1)) * size;\n  const d2 = (q2 - Math.round(q2)) * size;\n  const one = Math.abs(d1) \u003c Math.abs(d2);\n  const d = one ? d1 : d2;\n  cut(d, 1, one ? 1 : -1, Math.SQRT2, size);\n  KIND = BOSS;\n  // The face leans down towards the cut it slopes into.\n  if (d > 0) {\n    GX = -GX;\n    GY = -GY;\n  }\n}\n\n// The straight-line engine fills the corners: the work slides past the\n// cutter instead of turning, so the cuts run straight across the plate,\n// rocked up and down by the same rosette.\nfunction straight(x, y, c, lobes, phasing, rot) {\n  const X = x - CX;\n  const Y = y - CY;\n  const f = (c.waves * lobes) / 512;\n  const slope = c.amp * TAU * f;\n  const kc = Math.round(Y / PITCH);\n  const reach = Math.ceil(c.amp / PITCH) + 1;\n  let best = 1e9;\n  let bd = 0;\n  let bx = 0;\n  let bg = 1;\n  for (let k = kc - reach; k \u003c= kc + reach; k++) {\n    const u = f * X + (c.step + phasing) * k + rot;\n    const d = Y - PITCH * k - c.amp * sinT(u);\n    const gx = -slope * cosT(u);\n    const g2 = gx * gx + 1;\n    const q = (d * d) / g2;\n    if (q \u003c best) {\n      best = q;\n      bd = d;\n      bx = gx;\n      bg = g2;\n    }\n  }\n  const g = Math.sqrt(bg);\n  cut(bd / g, bx, 1, g, PITCH);\n}\n\nfunction surface(P, p, x, y, plate) {\n  const R = P.R[p];\n  if (R > RIM + 1) return straight(x, y, plate.corner, P.lobes, P.phasing, P.drift);\n  const zones = plate.zones;\n  let r0 = 0;\n  for (let i = 0; i \u003c zones.length; i += 2) {\n    const r1 = zones[i + 1];\n    if (R \u003c r1 || i === zones.length - 2) {\n      const kind = zones[i];\n      // Neighbouring bands drift opposite ways.\n      const rot = i & 4 ? -P.drift : P.drift;\n      if (kind === WAVE) return rose(P, p, r0, r1, P.lobes, 3, P.phasing, rot);\n      if (kind === BARLEY) return rose(P, p, r0, r1, P.lobes, 2.2, 0.5 + P.phasing, rot);\n      if (kind === RAYS) return rays(P, p, r0, r1, P.phasing);\n      if (kind === BASKET) return basket(P, p, r0, r1, P.lobes);\n      if (kind === CLOUS) return clous(x, y, 4);\n      return polish();\n    }\n    r0 = r1;\n  }\n}\n\nconst METALS = [\n  [0.97, 0.98, 1.0],\n  [1.0, 0.93, 0.78],\n  [1.0, 0.8, 0.42],\n  [1.0, 0.68, 0.56],\n];\n\n// The land between grooves, a groove in shadow, and how much more a groove\n// gives back when it faces the lamp.\nconst LAND = 0.64;\nconst GROOVE = 0.12;\nconst GLINT = 1.3;\n\n// The cutter's point, white hot where it bites, as it runs round the front.\nfunction drawCutter(display, P) {\n  const f = P.front;\n  if (f \u003c E + 1) return;\n  const a = P.t * TAU * 2;\n  const cx = CX + (f - E) * Math.cos(a);\n  const cy = CY + (f + E) * Math.sin(a);\n  for (let j = -1; j \u003c= 1; j++) {\n    for (let i = -1; i \u003c= 1; i++) {\n      const x = Math.round(cx) + i;\n      const y = Math.round(cy) + j;\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const v = i === 0 && j === 0 ? 255 : 200;\n      display.setPixel(x, y, v, v, i === 0 && j === 0 ? 240 : 150);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const mu = P.metal * (METALS.length - 1);\n  const mi = Math.min(METALS.length - 2, Math.floor(mu));\n  const mf = mu - mi;\n  const mr = METALS[mi][0] + (METALS[mi + 1][0] - METALS[mi][0]) * mf;\n  const mg = METALS[mi][1] + (METALS[mi + 1][1] - METALS[mi][1]) * mf;\n  const mb = METALS[mi][2] + (METALS[mi + 1][2] - METALS[mi][2]) * mf;\n  // The lamp circles the plate on a tall ellipse, 46 LEDs out from the\n  // middle at the sides and 72 at the ends, just off the panel.\n  const LX = CX + 46 * Math.cos(P.lampA);\n  const LY = CY + 72 * Math.sin(P.lampA);\n  const cur = PLATES[P.plate];\n  const old = PLATES[P.old];\n  const front = P.front;\n  const all = P.frame === 0;\n  const third = P.frame % 3;\n  P.frame++;\n  for (let y = all ? 0 : third; y \u003c H; y += all ? 1 : 3) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      surface(P, p, x, y, front >= 0 && P.R[p] \u003c front ? old : cur);\n      P.kind[p] = KIND;\n      P.gx[p] = GX;\n      P.gy[p] = GY;\n      P.cov[p] = COV;\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const dx = LX - x;\n      const dy = LY - y;\n      const dd = dx * dx + dy * dy;\n      const id = 1 / Math.sqrt(dd + 1);\n      const fall = 1 / (1 + dd * 0.00016);\n      const kind = P.kind[p];\n      const cov = P.cov[p];\n      // Two lights: the cool room, and the warm lamp.\n      let room;\n      let lamp;\n      if (kind === CUT) {\n        // A groove throws the lamp back when it runs across the lamp's\n        // direction: the streak every engine-turned dial has, running from\n        // the lamp over the cuts that face it.\n        let a = (P.gx[p] * dx + P.gy[p] * dy) * id;\n        a *= a;\n        const g8 = a * a * a * a;\n        // The window above lights the land between grooves that run across\n        // the plate a little more than the land between grooves that run up it.\n        const gy = P.gy[p];\n        room = LAND * (0.86 + 0.28 * gy * gy) * (1 - cov) + GROOVE * cov;\n        lamp = fall * (0.5 * a * (1 - cov) + GLINT * g8 * cov);\n      } else if (kind === BOSS) {\n        const a = (P.gx[p] * dx + P.gy[p] * dy) * id;\n        const lit = a > 0 ? a * a : 0;\n        room = (0.55 - 0.2 * P.gy[p]) * (1 - cov) + GROOVE * cov;\n        lamp = fall * 0.8 * lit * (1 - cov);\n      } else {\n        // Polished: bright where it shows the window, brighter by the lamp.\n        room = 0.8;\n        lamp = 0.5 / (1 + dd * 0.0005);\n      }\n      let r = (room * 0.83 + lamp) * mr;\n      let g = (room * 0.91 + lamp * 0.85) * mg;\n      let b = (room * 1.0 + lamp * 0.6) * mb;\n      if (front >= 0) {\n        // Just behind the cutter the metal is fresh and bright, and it dulls\n        // over the next four LEDs.\n        const e = P.R[p] - front;\n        if (e > -0.6 && e \u003c 4) {\n          const glow = e \u003c 0.6 ? 0.9 : 0.45 * (1 - (e - 0.6) / 3.4);\n          r += glow;\n          g += glow * 0.94;\n          b += glow * 0.82;\n        }\n      }\n      display.setPixel(x, y, Math.min(255, r * 255), Math.min(255, g * 255), Math.min(255, b * 255));\n    }\n  }\n  if (front >= 0) drawCutter(display, P);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Metal=0..1, Light=0..4, Lobes=12..36, Phasing=0..0.5","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Metal","min":0,"max":1,"about":"Silver at 0, then champagne, yellow gold and rose gold at the far end."},{"name":"Light","min":0,"max":4,"about":"How fast the lamp travels round the plate: once in ten seconds at 2, in five at 4; at 0 it stands still and only the rosettes drift."},{"name":"Lobes","min":12,"max":36,"about":"Bosses on the rosette cam, 12 to 36: the waves, the barleycorn grains, the basketweave cells and the corner waves all grow finer."},{"name":"Phasing","min":0,"max":0.5,"about":"How far the rosette is turned between one cut and the next, in lobes: 0 nests the waves, a little twists them into flames, 0.5 trades waves for barleycorn."}],"start":[0,2,12,0.06],"measures":{"motion":0.3271,"detail":0.2382,"edges":0.6848,"complexity":2.494,"coverage":1,"colour":0.0828,"drift":0.1447},"knobResponse":[0.1324,0.1841,0.2378,0.2082]},{"slug":"halftone","title":"Halftone","family":"print","round":2,"note":"떠도는 등불 넷이 비추는 저녁 하늘을 잉크마다 각도가 다른 망점으로 찍어요. 점은 농도만큼 자라고 줄며, K1 이 CMY, 리소, 벤데이, 신문 잉크를 골라요.","idea":"A soft picture of drifting lights is printed the way a press prints a photograph, one screen of hard dots per ink, each screen at its own angle, so the dots grow and shrink with the tone and the inks lock into rosettes.","buttons":"K1 tap knocks the plates out of register, and they settle back.","code":"// ===== Patternflow pattern =====\n// Title:   Halftone\n// Family:  print\n// Idea:    A soft picture of drifting lights is printed the way a press prints a photograph, one screen of hard dots per ink, each screen at its own angle, so the dots grow and shrink with the tone and the inks lock into rosettes.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Inks=0..3, Speed=0.1..5, Screen=8..13, Turn=0..30\n//\n// Knob 1: Inks. The ink set, in four steps: process cyan, magenta and yellow; riso blue and pink; Ben-Day blue, red and yellow; black on newsprint.\n// Knob 2: Speed. How fast the lights drift under the screens.\n// Knob 3: Screen. How many dots fit across the 64 LEDs, from 8 fat poster dots to 13 fine ones.\n// Knob 4: Turn. Turns the screens off the printer's rosette towards one shared angle, until at 30 every ink lands dot on dot.\n// Buttons: K1 tap knocks the plates out of register, and they settle back.\n\nconst W = 64;\nconst H = 128;\n\n// Each set is a paper colour and its inks. An ink is its colour, the part of\n// the picture it prints (0 cyan, 1 magenta, 2 yellow, 3 grey, 4 everything\n// warm, so riso pink carries the sun too) and its screen angle in degrees\n// away from 45, the angle the eye notices least. Paper stays well under\n// full white, since it covers most of the panel.\nconst SETS = [\n  {\n    paper: [200, 192, 172],\n    inks: [\n      [[0, 158, 224], 0, -30],\n      [[236, 0, 140], 1, 30],\n      [[255, 226, 0], 2, 45],\n    ],\n  },\n  {\n    paper: [200, 192, 172],\n    inks: [\n      [[0, 120, 191], 0, -30],\n      [[255, 72, 176], 4, 30],\n    ],\n  },\n  {\n    paper: [204, 196, 176],\n    inks: [\n      [[20, 70, 200], 0, -30],\n      [[226, 30, 38], 1, 30],\n      [[255, 214, 0], 2, 45],\n    ],\n  },\n  {\n    paper: [184, 182, 168],\n    inks: [[[20, 20, 24], 3, 0]],\n  },\n];\n\n// The picture is a dusk sky: bare paper at the top, a magenta glow low\n// down where the cyan of the deep sky comes up to meet it, so two screens\n// share that band and have to agree. Four lamps wander over it on their own\n// loops. Radius in LEDs; how much cyan, magenta and yellow each asks for;\n// the middle and reach of its loop down the panel, as shares of the height.\n// The last one is plain light, where the dots shrink away to bare paper.\nconst LAMPS = [\n  [26, 0.0, 0.2, 0.8, 0.26, 0.16],\n  [22, 0.0, 0.8, 0.1, 0.2, 0.15],\n  [18, 0.75, 0.8, 0.1, 0.82, 0.1],\n  [22, 0.0, 0.0, 0.0, 0.68, 0.22],\n];\n\nexport function setup(params) {\n  const p = params;\n  p.tone = new Float32Array(W * H * 5);\n  p.lx = new Float32Array(LAMPS.length);\n  p.ly = new Float32Array(LAMPS.length);\n  p.t = 0;\n  p.slip = 0;\n  p.slipX = new Float32Array(3);\n  p.slipY = new Float32Array(3);\n  p.wave = new Float32Array(W);\n  p.cosA = new Float32Array(3);\n  p.sinA = new Float32Array(3);\n  p.u = new Float32Array(3);\n  p.v = new Float32Array(3);\n  p.ink = new Float32Array(9);\n  p.chan = new Uint8Array(3);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  p.set = SETS[Math.max(0, Math.min(SETS.length - 1, Math.round(k[0])))];\n  p.t += dt * k[1] * 0.5;\n  p.pitch = W / k[2];\n  p.turn = Math.max(0, Math.min(1, k[3] / 30));\n  if (input.btnPressed && input.btnPressed[0]) {\n    p.slip = 1;\n    for (let i = 0; i \u003c 3; i++) {\n      // Each plate slides its own way, six LEDs at the moment of the tap.\n      const a = Math.random() * Math.PI * 2;\n      p.slipX[i] = Math.cos(a);\n      p.slipY[i] = Math.sin(a);\n    }\n  }\n  p.slip = Math.max(0, p.slip - dt * 0.4);\n\n  const t = p.t;\n  for (let i = 0; i \u003c LAMPS.length; i++) {\n    const o = i * 2.1;\n    p.lx[i] = W / 2 + Math.sin(t * (0.37 + i * 0.11) + o) * W * 0.38;\n    p.ly[i] = H * LAMPS[i][4] + Math.sin(t * (0.23 + i * 0.07) + o * 1.7) * H * LAMPS[i][5];\n  }\n  // The bands sway a little, so the sky's dots breathe too.\n  const lift = 0.05 * Math.sin(t * 0.31);\n  for (let x = 0; x \u003c W; x++) p.wave[x] = 0.07 * Math.sin(x * 0.07 + t * 0.8) + lift;\n  const tone = p.tone;\n  for (let y = 0; y \u003c H; y++) {\n    const g = (y + 0.5) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const sway = g + p.wave[x];\n      const e = Math.max(0, Math.min(1, (sway - 0.3) / 0.7));\n      const glow = 1 - ((sway - 0.55) * (sway - 0.55)) / 0.04;\n      let c = 0.88 * e * e * (3 - 2 * e);\n      let m = glow > 0 ? 0.45 * glow * glow : 0;\n      let yl = 0;\n      for (let i = 0; i \u003c LAMPS.length; i++) {\n        const dx = x - p.lx[i];\n        const dy = y - p.ly[i];\n        const R = LAMPS[i][0];\n        const q = 1 - (dx * dx + dy * dy) / (R * R);\n        if (q \u003c= 0) continue;\n        const w = q * q;\n        c += (LAMPS[i][1] - c) * w;\n        m += (LAMPS[i][2] - m) * w;\n        yl += (LAMPS[i][3] - yl) * w;\n      }\n      const o = (y * W + x) * 5;\n      tone[o] = c;\n      tone[o + 1] = m;\n      tone[o + 2] = yl;\n      tone[o + 3] = Math.min(1, 0.55 * c + 0.55 * m + 0.35 * yl);\n      tone[o + 4] = Math.min(1, m + 0.6 * yl);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const set = p.set;\n  const inks = set.inks;\n  const n = inks.length;\n  const pitch = p.pitch;\n  const tone = p.tone;\n  const turn = p.turn;\n  // Turned all the way, every screen lands on 30 degrees, dot on dot.\n  for (let i = 0; i \u003c n; i++) {\n    const a = ((45 + inks[i][2] * (1 - turn) - 15 * turn) * Math.PI) / 180;\n    p.cosA[i] = Math.cos(a) / pitch;\n    p.sinA[i] = Math.sin(a) / pitch;\n  }\n  const slip = p.slip * p.slip * 6;\n  const s2 = pitch * pitch;\n  const cosA = p.cosA;\n  const sinA = p.sinA;\n  const ink = p.ink;\n  const chan = p.chan;\n  const U = p.u;\n  const V = p.v;\n  for (let i = 0; i \u003c n; i++) {\n    ink[i * 3] = inks[i][0][0] / 255;\n    ink[i * 3 + 1] = inks[i][0][1] / 255;\n    ink[i * 3 + 2] = inks[i][0][2] / 255;\n    chan[i] = inks[i][1];\n  }\n  const pr = set.paper[0];\n  const pg = set.paper[1];\n  const pb = set.paper[2];\n  for (let y = 0; y \u003c H; y++) {\n    // Each screen's grid position at the start of the row; it then steps by\n    // the same amount per LED.\n    for (let i = 0; i \u003c n; i++) {\n      const px = 0.5 - W / 2 + p.slipX[i] * slip;\n      const py = y + 0.5 - H / 2 + p.slipY[i] * slip;\n      U[i] = px * cosA[i] + py * sinA[i];\n      V[i] = py * cosA[i] - px * sinA[i];\n    }\n    for (let x = 0; x \u003c W; x++) {\n      let r = pr;\n      let g = pg;\n      let b = pb;\n      for (let i = 0; i \u003c n; i++) {\n        const ca = cosA[i];\n        const sa = sinA[i];\n        // In the screen's own grid each dot sits on a whole number.\n        const u = U[i];\n        const v = V[i];\n        U[i] = u + ca;\n        V[i] = v - sa;\n        const cu = Math.floor(u + 0.5);\n        const cv = Math.floor(v + 0.5);\n        const fu = u - cu;\n        const fv = v - cv;\n        // Back out to the panel to read the picture at the dot's centre, so\n        // every dot is round whatever the picture does across it.\n        let sx = Math.floor((cu * ca - cv * sa) * s2 + W / 2);\n        let sy = Math.floor((cu * sa + cv * ca) * s2 + H / 2);\n        sx = sx \u003c 0 ? 0 : sx >= W ? W - 1 : sx;\n        sy = sy \u003c 0 ? 0 : sy >= H ? H - 1 : sy;\n        let c = tone[(sy * W + sx) * 5 + chan[i]];\n        // A highlight dot under about two LEDs across drops out, as fine dots\n        // do on press; a single lit LED would only read as grit.\n        if (c * s2 \u003c 3.8) continue;\n        if (c > 1) c = 1;\n        // Dot area follows the tone; past where dots touch, the corners fill in.\n        const r2 = c \u003c 0.785 ? c / Math.PI : 0.25 + (c - 0.785) * 1.163;\n        if (fu * fu + fv * fv \u003c r2) {\n          r *= ink[i * 3];\n          g *= ink[i * 3 + 1];\n          b *= ink[i * 3 + 2];\n        }\n      }\n      display.setPixel(x, y, r, g, b);\n    }\n  }\n}\n","layer":{"id":"layer-halftone","type":"code","name":"halftone","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Halftone\n// Family:  print\n// Idea:    A soft picture of drifting lights is printed the way a press prints a photograph, one screen of hard dots per ink, each screen at its own angle, so the dots grow and shrink with the tone and the inks lock into rosettes.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Inks=0..3, Speed=0.1..5, Screen=8..13, Turn=0..30\n//\n// Knob 1: Inks. The ink set, in four steps: process cyan, magenta and yellow; riso blue and pink; Ben-Day blue, red and yellow; black on newsprint.\n// Knob 2: Speed. How fast the lights drift under the screens.\n// Knob 3: Screen. How many dots fit across the 64 LEDs, from 8 fat poster dots to 13 fine ones.\n// Knob 4: Turn. Turns the screens off the printer's rosette towards one shared angle, until at 30 every ink lands dot on dot.\n// Buttons: K1 tap knocks the plates out of register, and they settle back.\n\nconst W = 64;\nconst H = 128;\n\n// Each set is a paper colour and its inks. An ink is its colour, the part of\n// the picture it prints (0 cyan, 1 magenta, 2 yellow, 3 grey, 4 everything\n// warm, so riso pink carries the sun too) and its screen angle in degrees\n// away from 45, the angle the eye notices least. Paper stays well under\n// full white, since it covers most of the panel.\nconst SETS = [\n  {\n    paper: [200, 192, 172],\n    inks: [\n      [[0, 158, 224], 0, -30],\n      [[236, 0, 140], 1, 30],\n      [[255, 226, 0], 2, 45],\n    ],\n  },\n  {\n    paper: [200, 192, 172],\n    inks: [\n      [[0, 120, 191], 0, -30],\n      [[255, 72, 176], 4, 30],\n    ],\n  },\n  {\n    paper: [204, 196, 176],\n    inks: [\n      [[20, 70, 200], 0, -30],\n      [[226, 30, 38], 1, 30],\n      [[255, 214, 0], 2, 45],\n    ],\n  },\n  {\n    paper: [184, 182, 168],\n    inks: [[[20, 20, 24], 3, 0]],\n  },\n];\n\n// The picture is a dusk sky: bare paper at the top, a magenta glow low\n// down where the cyan of the deep sky comes up to meet it, so two screens\n// share that band and have to agree. Four lamps wander over it on their own\n// loops. Radius in LEDs; how much cyan, magenta and yellow each asks for;\n// the middle and reach of its loop down the panel, as shares of the height.\n// The last one is plain light, where the dots shrink away to bare paper.\nconst LAMPS = [\n  [26, 0.0, 0.2, 0.8, 0.26, 0.16],\n  [22, 0.0, 0.8, 0.1, 0.2, 0.15],\n  [18, 0.75, 0.8, 0.1, 0.82, 0.1],\n  [22, 0.0, 0.0, 0.0, 0.68, 0.22],\n];\n\nexport function setup(params) {\n  const p = params;\n  p.tone = new Float32Array(W * H * 5);\n  p.lx = new Float32Array(LAMPS.length);\n  p.ly = new Float32Array(LAMPS.length);\n  p.t = 0;\n  p.slip = 0;\n  p.slipX = new Float32Array(3);\n  p.slipY = new Float32Array(3);\n  p.wave = new Float32Array(W);\n  p.cosA = new Float32Array(3);\n  p.sinA = new Float32Array(3);\n  p.u = new Float32Array(3);\n  p.v = new Float32Array(3);\n  p.ink = new Float32Array(9);\n  p.chan = new Uint8Array(3);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  p.set = SETS[Math.max(0, Math.min(SETS.length - 1, Math.round(k[0])))];\n  p.t += dt * k[1] * 0.5;\n  p.pitch = W / k[2];\n  p.turn = Math.max(0, Math.min(1, k[3] / 30));\n  if (input.btnPressed && input.btnPressed[0]) {\n    p.slip = 1;\n    for (let i = 0; i \u003c 3; i++) {\n      // Each plate slides its own way, six LEDs at the moment of the tap.\n      const a = Math.random() * Math.PI * 2;\n      p.slipX[i] = Math.cos(a);\n      p.slipY[i] = Math.sin(a);\n    }\n  }\n  p.slip = Math.max(0, p.slip - dt * 0.4);\n\n  const t = p.t;\n  for (let i = 0; i \u003c LAMPS.length; i++) {\n    const o = i * 2.1;\n    p.lx[i] = W / 2 + Math.sin(t * (0.37 + i * 0.11) + o) * W * 0.38;\n    p.ly[i] = H * LAMPS[i][4] + Math.sin(t * (0.23 + i * 0.07) + o * 1.7) * H * LAMPS[i][5];\n  }\n  // The bands sway a little, so the sky's dots breathe too.\n  const lift = 0.05 * Math.sin(t * 0.31);\n  for (let x = 0; x \u003c W; x++) p.wave[x] = 0.07 * Math.sin(x * 0.07 + t * 0.8) + lift;\n  const tone = p.tone;\n  for (let y = 0; y \u003c H; y++) {\n    const g = (y + 0.5) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const sway = g + p.wave[x];\n      const e = Math.max(0, Math.min(1, (sway - 0.3) / 0.7));\n      const glow = 1 - ((sway - 0.55) * (sway - 0.55)) / 0.04;\n      let c = 0.88 * e * e * (3 - 2 * e);\n      let m = glow > 0 ? 0.45 * glow * glow : 0;\n      let yl = 0;\n      for (let i = 0; i \u003c LAMPS.length; i++) {\n        const dx = x - p.lx[i];\n        const dy = y - p.ly[i];\n        const R = LAMPS[i][0];\n        const q = 1 - (dx * dx + dy * dy) / (R * R);\n        if (q \u003c= 0) continue;\n        const w = q * q;\n        c += (LAMPS[i][1] - c) * w;\n        m += (LAMPS[i][2] - m) * w;\n        yl += (LAMPS[i][3] - yl) * w;\n      }\n      const o = (y * W + x) * 5;\n      tone[o] = c;\n      tone[o + 1] = m;\n      tone[o + 2] = yl;\n      tone[o + 3] = Math.min(1, 0.55 * c + 0.55 * m + 0.35 * yl);\n      tone[o + 4] = Math.min(1, m + 0.6 * yl);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const set = p.set;\n  const inks = set.inks;\n  const n = inks.length;\n  const pitch = p.pitch;\n  const tone = p.tone;\n  const turn = p.turn;\n  // Turned all the way, every screen lands on 30 degrees, dot on dot.\n  for (let i = 0; i \u003c n; i++) {\n    const a = ((45 + inks[i][2] * (1 - turn) - 15 * turn) * Math.PI) / 180;\n    p.cosA[i] = Math.cos(a) / pitch;\n    p.sinA[i] = Math.sin(a) / pitch;\n  }\n  const slip = p.slip * p.slip * 6;\n  const s2 = pitch * pitch;\n  const cosA = p.cosA;\n  const sinA = p.sinA;\n  const ink = p.ink;\n  const chan = p.chan;\n  const U = p.u;\n  const V = p.v;\n  for (let i = 0; i \u003c n; i++) {\n    ink[i * 3] = inks[i][0][0] / 255;\n    ink[i * 3 + 1] = inks[i][0][1] / 255;\n    ink[i * 3 + 2] = inks[i][0][2] / 255;\n    chan[i] = inks[i][1];\n  }\n  const pr = set.paper[0];\n  const pg = set.paper[1];\n  const pb = set.paper[2];\n  for (let y = 0; y \u003c H; y++) {\n    // Each screen's grid position at the start of the row; it then steps by\n    // the same amount per LED.\n    for (let i = 0; i \u003c n; i++) {\n      const px = 0.5 - W / 2 + p.slipX[i] * slip;\n      const py = y + 0.5 - H / 2 + p.slipY[i] * slip;\n      U[i] = px * cosA[i] + py * sinA[i];\n      V[i] = py * cosA[i] - px * sinA[i];\n    }\n    for (let x = 0; x \u003c W; x++) {\n      let r = pr;\n      let g = pg;\n      let b = pb;\n      for (let i = 0; i \u003c n; i++) {\n        const ca = cosA[i];\n        const sa = sinA[i];\n        // In the screen's own grid each dot sits on a whole number.\n        const u = U[i];\n        const v = V[i];\n        U[i] = u + ca;\n        V[i] = v - sa;\n        const cu = Math.floor(u + 0.5);\n        const cv = Math.floor(v + 0.5);\n        const fu = u - cu;\n        const fv = v - cv;\n        // Back out to the panel to read the picture at the dot's centre, so\n        // every dot is round whatever the picture does across it.\n        let sx = Math.floor((cu * ca - cv * sa) * s2 + W / 2);\n        let sy = Math.floor((cu * sa + cv * ca) * s2 + H / 2);\n        sx = sx \u003c 0 ? 0 : sx >= W ? W - 1 : sx;\n        sy = sy \u003c 0 ? 0 : sy >= H ? H - 1 : sy;\n        let c = tone[(sy * W + sx) * 5 + chan[i]];\n        // A highlight dot under about two LEDs across drops out, as fine dots\n        // do on press; a single lit LED would only read as grit.\n        if (c * s2 \u003c 3.8) continue;\n        if (c > 1) c = 1;\n        // Dot area follows the tone; past where dots touch, the corners fill in.\n        const r2 = c \u003c 0.785 ? c / Math.PI : 0.25 + (c - 0.785) * 1.163;\n        if (fu * fu + fv * fv \u003c r2) {\n          r *= ink[i * 3];\n          g *= ink[i * 3 + 1];\n          b *= ink[i * 3 + 2];\n        }\n      }\n      display.setPixel(x, y, r, g, b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Inks=0..3, Speed=0.1..5, Screen=8..13, Turn=0..30","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Inks","min":0,"max":3,"about":"The ink set, in four steps: process cyan, magenta and yellow; riso blue and pink; Ben-Day blue, red and yellow; black on newsprint."},{"name":"Speed","min":0.1,"max":5,"about":"How fast the lights drift under the screens."},{"name":"Screen","min":8,"max":13,"about":"How many dots fit across the 64 LEDs, from 8 fat poster dots to 13 fine ones."},{"name":"Turn","min":0,"max":30,"about":"Turns the screens off the printer's rosette towards one shared angle, until at 30 every ink lands dot on dot."}],"start":[0,2,8,0.06],"measures":{"motion":0.0294,"detail":0.0277,"edges":0.6406,"complexity":0.1753,"coverage":0.9983,"colour":0.4355,"drift":0.0403},"knobResponse":[0.2427,0.1303,0.1431,0.1473]},{"slug":"hanging-scroll","title":"Hanging Scroll","family":"paper","round":23,"note":"어두운 도코노마 벽의 못에 족자가 걸리고, 아래 굴대가 내려가며 비단 표구 속 상아빛 종이에 그린 먹 산수를 한 줄씩 드러내요. 안개 낀 봉우리 아래 소나무와 폭포, 초가와 쪽배가 있고 붉은 낙관이 찍혀 있어요. 외풍에 조금 흔들리다 아래부터 말려 올라가면 바람 맞는 대나무가 내려오고, 달 아래 홍매와 파도 위 학이 뒤를 이어요.","idea":"A hanging scroll in a dim alcove lets its weighted roller down from the upper rod to show an ink painting on ivory paper in silk borders row by row, hangs swaying in a draft, then rolls up from the bottom so the next painting can come down.","buttons":"K1 tap rolls the scroll up now and unrolls the next painting.","code":"// ===== Patternflow pattern =====\n// Title:   Hanging Scroll\n// Family:  paper\n// Idea:    A hanging scroll in a dim alcove lets its weighted roller down from the upper rod to show an ink painting on ivory paper in silk borders row by row, hangs swaying in a draft, then rolls up from the bottom so the next painting can come down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after Japanese kakemono hanging scrolls and Song dynasty ink landscapes\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Painting=0..3, Ink=0..1\n//\n// Knob 1: Lamp. The light on the scroll: a warm candle low on the left turns the paper ivory at 0, and towards 1 it gives way to cool moonlight from a window on the right.\n// Knob 2: Speed. How fast the scroll moves: at 2 the roller takes under three seconds to come down, a painting hangs for seven and the draft swings it about once in two and a half.\n// Knob 3: Painting. Which painting unrolls next: misty mountains with a waterfall at 0, bamboo in wind at 1, a plum branch under the moon at 2, cranes over waves at 3. Turning it rolls the scroll up and lets that one down.\n// Knob 4: Ink. How wet the ink was: crisp dry-brush lines with broken edges at 0, washes that bled out into the paper and strokes feathered at their edges at 1.\n// Buttons: K1 tap rolls the scroll up now and unrolls the next painting.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The scroll hangs from a nail at row 3. Its upper rod fills rows 15 and 16,\n// and the mounting runs 96 rows down from row 17 to the roller, 44 columns\n// wide from column 10. The painting sits inside the mounting, 36 by 74.\nconst [NAIL, TOP, LEN, MX, MW] = [3, 17, 96, 10, 44];\nconst [PX, PY, PW, PH] = [4, 14, 36, 74];\nconst PN = PW * PH;\n// At Speed 2, in seconds: unroll, hang, roll up, rest rolled.\nconst [TU, TS, TR, TZ] = [2.6, 7, 2, 0.5];\nconst [PAPER, SILK, GOLD, BACK] = [[0.95, 0.91, 0.8], [0.2, 0.31, 0.3], [0.8, 0.61, 0.27], [0.6, 0.58, 0.5]];\nconst [WOOD, BONE, BRASS, CORD] = [[0.4, 0.27, 0.16], [0.86, 0.8, 0.64], [0.85, 0.66, 0.32], [0.5, 0.3, 0.45]];\n// Seal vermilion, plum blossom and the red sun.\nconst PIG = [[0.82, 0.14, 0.1], [0.9, 0.3, 0.42], [0.93, 0.3, 0.12]];\nconst CANDLE = [1, 0.9, 0.72];\nconst MOON = [0.56, 0.67, 0.92];\nconst { min, max, floor, ceil, round, sqrt, sin, cos, exp, abs, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\n// A fixed hash and a value noise made from it, so a painting comes out the\n// same every time it unrolls.\nconst hash = (a, b) => {\n  let h = Math.imul((a | 0) * 374761393 + (b | 0) * 668265263, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nconst vn = (x, y) => {\n  const i = floor(x);\n  const j = floor(y);\n  const [u, v] = [sm(0, 1, x - i), sm(0, 1, y - j)];\n  const [a, b, c] = [hash(i, j), hash(i + 1, j), hash(i, j + 1)];\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(i + 1, j + 1)) * u * v;\n};\n\n// The painting being made: wash and stroke densities, pigment cover and which\n// pigment. RID is a ridge row per column for fill(), ROC how solid it is there.\nlet Wm, Sm, Am, Pg;\nlet rs = 1;\nconst rnd = () => (rs = (rs * 16807) % 2147483647) / 2147483647;\nconst RID = new Float32Array(PW);\nconst ROC = new Float32Array(PW);\n\n// A brush stroke through points [x, y, half width, ...]. dry parts the hairs\n// into streaks along the stroke, more of them toward its end.\nfunction brush(p, dens, dry = 0) {\n  const n = p.length / 3 - 1;\n  for (let k = 0; k \u003c n; k++) {\n    const [ax, ay, aw, bx, by, bw] = p.slice(k * 3, k * 3 + 6);\n    const dx = bx - ax;\n    const dy = by - ay;\n    const L2 = dx * dx + dy * dy || 1e-6;\n    const L = sqrt(L2);\n    const m = max(aw, bw) + 1;\n    for (let y = max(0, floor(min(ay, by) - m)); y \u003c= min(PH - 1, floor(max(ay, by) + m)); y++)\n      for (let x = max(0, floor(min(ax, bx) - m)); x \u003c= min(PW - 1, floor(max(ax, bx) + m)); x++) {\n        const qx = x + 0.5 - ax;\n        const qy = y + 0.5 - ay;\n        const t = cl((qx * dx + qy * dy) / L2, 0, 1);\n        let a = cl(aw + (bw - aw) * t + 0.5 - hypot(qx - dx * t, qy - dy * t), 0, 1);\n        if (a \u003c= 0) continue;\n        if (dry) {\n          const g = (dry * (k + t)) / n;\n          const c = (qx * dy - qy * dx) / L;\n          a *= 0.15 + 0.85 * sm(g - 0.1, g + 0.1, 0.55 * hash(floor(c * 1.8) + 99, floor(t * L * 0.5) + k * 31) + 0.45 * vn(x * 0.9, y * 0.9));\n        }\n        const i = y * PW + x;\n        // A negative density leaves the paper bare instead.\n        if (dens \u003c 0) Wm[i] *= 1 + dens * a;\n        else Sm[i] = max(Sm[i], a * dens);\n      }\n  }\n}\n\n// A round patch of pigment, which leaves no wash under it.\nfunction disc(cx, cy, r, pg, a0 = 0.92) {\n  for (let y = max(0, floor(cy - r - 1)); y \u003c min(PH, cy + r + 1); y++)\n    for (let x = max(0, floor(cx - r - 1)); x \u003c min(PW, cx + r + 1); x++) {\n      const a = cl(r + 0.5 - hypot(x + 0.5 - cx, y + 0.5 - cy), 0, 1);\n      const i = y * PW + x;\n      if (a > Am[i]) {\n        Am[i] = a * a0;\n        Pg[i] = pg;\n      }\n      Wm[i] *= 1 - a;\n    }\n}\n\n// Fill below the ridge in RID: the wash is darkest at the ridge and fades down\n// into mist, and it covers what was painted behind. edge inks the ridge line\n// and cun the short texture strokes under it.\nfunction fill(dens, fade, edge, cun, sd) {\n  for (let x = 0; x \u003c PW; x++) {\n    const r = RID[x];\n    const oc = ROC[x];\n    for (let y = max(0, floor(r)); y \u003c PH; y++) {\n      // The row the ridge crosses is covered only in part.\n      const cv = cl(y + 1 - r, 0, 1) * oc;\n      const d = max(0, y + 0.5 - r);\n      const i = y * PW + x;\n      const o = 0.92 * cl(d / 2 + 0.3, 0, 1) * cv;\n      Wm[i] = min(1, Wm[i] * (1 - o) + dens * exp(-d / fade) * (0.7 + 0.6 * vn(x * 0.5 + sd, y * 0.2)) * cv);\n      Sm[i] *= 1 - o;\n      if (d \u003c 1.5) Sm[i] = max(Sm[i], edge * (1 - d / 1.7) * (0.35 + 0.65 * vn(x * 1.3 + sd, y * 0.5)) * cv);\n      const c = vn(x * 1.2 + sd, y * 0.3);\n      if (c > 0.64) Sm[i] = max(Sm[i], cun * (c - 0.6) * 2.6 * exp(-d / (fade * 0.8)) * oc);\n    }\n  }\n}\n\nfunction mtn(cx, base, hw, ht, dens, fade, edge, cun, sd) {\n  for (let x = 0; x \u003c PW; x++) {\n    const u = abs(x + 0.5 - cx) / hw;\n    RID[x] = u \u003c 1 ? base - ht * (1 - u ** 1.6) * (0.62 + 0.45 * vn(x * 0.28 + sd, sd) + 0.3 * vn(x * 0.8, sd + 5)) : PH;\n    ROC[x] = sm(1, 0.75, u);\n  }\n  fill(dens, fade, edge, cun, sd);\n}\n\n// A pine clinging to a ridge: a crooked trunk and flat layers of needles.\nfunction pine(x, y, h, d) {\n  brush([x, y, 0.45, x + 0.5, y - h * 0.5, 0.35, x - 0.2, y - h, 0.3], d);\n  for (let k = 0; k \u003c 3; k++) {\n    const yy = y - h * (0.42 + 0.26 * k);\n    const w = h * (0.55 - 0.13 * k);\n    brush([x - w, yy + 0.4, 0.45, x + 0.2, yy - 0.3, 0.75, x + w, yy + 0.2, 0.4], d);\n  }\n}\n\n// A column of characters, each a few short strokes in a square cell, and the\n// red seal under it.\nfunction calli(x, y, n) {\n  for (let c = 0; c \u003c n; c++) {\n    const cy = y + c * 4.6;\n    for (let k = 3 + floor(rnd() * 3); k > 0; k--) {\n      const t = rnd() * 4;\n      const a = x + rnd() * 2.6;\n      const b = cy + rnd() * 3;\n      brush(t \u003c 1.6 ? [a - 0.3, b, 0.4, min(x + 3.2, a + 2), b + 0.2, 0.35] : t \u003c 3 ? [a, b - 0.4, 0.4, a + 0.2, min(cy + 3.6, b + 2.2), 0.3] : [a, b, 0.55, a + 0.7, b + 0.7, 0.3], 0.92);\n    }\n  }\n  const sy = floor(y + n * 4.6 + 0.6);\n  const sx = floor(x + 0.2);\n  for (let j = 0; j \u003c 3; j++)\n    for (let i = 0; i \u003c 3; i++) {\n      const k = (sy + j) * PW + sx + i;\n      // Carved lines let the paper show through the red.\n      Am[k] = (i + j) % 2 && hash(sx + i, sy + j) \u003c 0.6 ? 0.45 : 0.95;\n      Pg[k] = 0;\n    }\n}\n\nfunction landscape() {\n  // The far peak towers over the left, a lower one stands behind on the right.\n  mtn(13, 42, 15, 34, 0.32, 10, 0.45, 0.3, 3);\n  mtn(29, 40, 9, 12, 0.26, 7, 0.35, 0.25, 11);\n  mtn(24, 56, 16, 18, 0.5, 8, 0.85, 0.6, 23);\n  for (const x of [15, 18, 21, 31, 34]) pine(x, RID[x] + 1.5, 4 + (x % 3), 0.9);\n  // A waterfall drops from a cleft in the middle ridge into the mist.\n  for (let y = floor(RID[28] + 3); y \u003c 58; y++)\n    for (let x = 25; x \u003c 31; x++) {\n      const i = y * PW + x;\n      const c = abs(x + 0.5 - 28 - 0.4 * sin(y * 0.45));\n      const f = sm(58, 50, y);\n      if (c \u003c 0.9) {\n        Wm[i] *= 1 - 0.9 * f;\n        Sm[i] *= 1 - f;\n      } else if (c \u003c 2.4) Sm[i] = max(Sm[i], (0.75 * f * (2.4 - c)) / 1.5);\n    }\n  mtn(30, 63, 9, 3, 0.3, 2.5, 0.5, 0, 51);\n  // The near bank, with a hut under two pines.\n  mtn(5, 70, 17, 16, 0.72, 6, 1, 0.85, 37);\n  pine(3, RID[3] + 2, 7, 0.95);\n  pine(8, RID[8] + 2, 6, 0.95);\n  const hy = round(RID[15] + 4);\n  for (let j = -4; j \u003c= 1; j++)\n    for (let i = 11; i \u003c= 18; i++) {\n      Wm[(hy + j) * PW + i] *= 0.1;\n      Sm[(hy + j) * PW + i] = 0;\n    }\n  brush([10.5, hy - 2.2, 0.55, 14.5, hy - 4.6, 0.7, 18.5, hy - 2.2, 0.55], 0.97);\n  brush([12, hy - 2, 0.3, 12, hy + 0.6, 0.3], 0.7);\n  brush([17, hy - 2, 0.3, 17, hy + 0.6, 0.3], 0.7);\n  brush([14.5, hy - 1, 0.45, 14.5, hy + 0.6, 0.45], 0.85);\n  // Still water, a boat with its fisherman and his rod.\n  brush([19, 66.5, 0.25, 23, 66.5, 0.2], 0.3);\n  brush([28, 71.5, 0.25, 34, 71.5, 0.2], 0.28);\n  brush([20, 72.5, 0.2, 24, 72.5, 0.2], 0.25);\n  brush([22.5, 68, 0.35, 25, 69, 0.6, 28, 68.9, 0.6, 29.5, 67.7, 0.35], 0.92);\n  brush([26.5, 68, 0.55, 26.6, 66.4, 0.5], 0.9);\n  brush([27, 66.8, 0.25, 31, 63.5, 0.2], 0.6);\n  calli(31.6, 1.5, 4);\n}\n\nfunction bamboo() {\n  // Three stalks lean in the wind, the far one pale.\n  for (const [x0, x1, y1, w, d] of [[6, 11, -2, 1.1, 0.32], [14, 20, -2, 1.7, 0.9], [25, 29, 10, 1.3, 0.72]]) {\n    const n = round((75 - y1) / 10.5);\n    for (let k = 0; k \u003c n; k++) {\n      const ax = mix(x0, x1, k / n);\n      const ay = mix(75, y1, k / n);\n      const bx = mix(x0, x1, (k + 1) / n);\n      const by = mix(75, y1, (k + 1) / n);\n      brush([ax, ay - 0.8, w, bx, by + 0.8, w * 0.9], d, 0.45);\n      brush([bx - w - 0.5, by + 0.2, 0.45, bx + w + 0.5, by - 0.4, 0.45], min(1, d * 1.1));\n    }\n  }\n  // Leaves stream off the twigs to the right.\n  for (const [x, y, n, d, s] of [\n    [12, 8, 4, 0.35, 0.9], [9, 40, 4, 0.35, 0.9], [21, 12, 5, 0.92, 1.2], [20, 34, 5, 0.9, 1.15],\n    [19, 56, 4, 0.85, 1.05], [29, 24, 5, 0.75, 1], [28, 46, 3, 0.75, 0.95],\n  ]) {\n    brush([x - 3.5, y + 2.5, 0.35, x, y, 0.25], d);\n    for (let j = 0; j \u003c n; j++) {\n      const a = 0.35 + (j / (n - 1) - 0.5) * 1.3 + (rnd() - 0.5) * 0.3;\n      const L = (8 + rnd() * 4) * s;\n      const w = (1 + rnd() * 0.3) * s;\n      brush([x, y, 0.25, x + cos(a) * L * 0.3, y + sin(a) * L * 0.3, w, x + cos(a + 0.12) * L, y + sin(a + 0.12) * L, 0.05], d);\n    }\n  }\n  calli(31.4, 42, 5);\n}\n\nfunction plum() {\n  // The sky washed grey round a full moon left bare.\n  for (let y = 0; y \u003c 50; y++)\n    for (let x = 0; x \u003c PW; x++)\n      Wm[y * PW + x] = 0.28 * sm(8, 9.6, hypot(x + 0.5 - 23, y + 0.5 - 17)) * sm(50, 18, y) * (0.75 + 0.5 * vn(x * 0.2, y * 0.15));\n  // An old branch in dry brush, straight young shoots off it, and red blossom.\n  brush([-1, 75, 3, 5, 63, 2.5, 3, 51, 2.1, 10, 41, 1.7, 8, 31, 1.3, 15, 21, 1, 13, 12, 0.6], 0.93, 0.9);\n  brush([5, 61, 1.3, 13, 56, 1, 21, 51, 0.75, 29, 42, 0.45], 0.88, 0.8);\n  for (const t of [[10, 41, 12, 28], [15, 21, 22, 8], [13, 12, 14, 4], [21, 51, 24, 41], [29, 42, 33, 33], [8, 31, 3, 23], [13, 56, 16, 48], [24, 47, 31, 47]])\n    brush([t[0], t[1], 0.45, t[2], t[3], 0.25], 0.85);\n  for (const [x, y, r] of [\n    [12, 30, 1.5], [12.5, 26, 1.3], [17, 16, 1.4], [20, 11, 1.5], [21.5, 7.5, 1.2], [14, 6, 1.3],\n    [22, 44, 1.5], [24, 40.5, 1.2], [31, 37, 1.4], [32.5, 33, 1.2], [5, 25, 1.4], [3, 21.5, 1.2],\n    [15.5, 50, 1.4], [27.5, 47, 1.3], [9, 37.5, 1.5], [17.5, 54, 1.3], [6, 57, 1.6], [11, 16.5, 1.1],\n  ]) {\n    disc(x, y, r, 1);\n    Sm[floor(y) * PW + floor(x)] = 0.6;\n  }\n  calli(31.4, 50, 4);\n}\n\n// A red-crowned crane flying left, wings raised (up 1) or lowered (up -1).\nfunction crane(cx, cy, s, up) {\n  const u = up * s;\n  // The far wing and the near wing are left bare in the grey sky, each with\n  // black flight feathers along its trailing edge.\n  for (const [fx, d] of [[-2.5, -0.55], [4.5, -0.95]]) {\n    const w = [cx, cy - 0.3 * u, 1.9 * s, cx + (fx * 0.4 + 0.6) * s, cy - 5 * u, 1.4 * s, cx + fx * s, cy - 9.5 * u, 0.7 * s];\n    brush(w, d);\n    brush(w.map((v, k) => (k % 3 === 0 ? v + 1.6 * s : k % 3 === 2 ? 0.3 * s : v)), 0.9);\n  }\n  brush([cx - 3 * s, cy, 1.3 * s, cx + 3 * s, cy + 0.3 * s, 1.1 * s], -0.95);\n  // The black neck, a grey bill, the black tail and the trailing legs.\n  brush([cx - 2.6 * s, cy - 0.2 * s, 0.55 * s, cx - 7.8 * s, cy - 1.4 * s, 0.45 * s], 0.95);\n  brush([cx - 8.3 * s, cy - 1.4 * s, 0.3, cx - 10.5 * s, cy - 1 * s, 0.2], 0.5);\n  brush([cx + 2.5 * s, cy - 0.2 * s, 0.8 * s, cx + 4.3 * s, cy + 0.5 * s, 0.4 * s], 0.9);\n  brush([cx + 3 * s, cy + 0.9 * s, 0.3, cx + 9.5 * s, cy + 1.9 * s, 0.25], 0.6);\n  disc(cx - 8 * s, cy - 2 * s, 0.6, 0);\n}\n\nfunction cranes() {\n  for (let y = 0; y \u003c PH; y++) for (let x = 0; x \u003c PW; x++) Wm[y * PW + x] = (0.5 + 0.25 * sm(62, 0, y)) * (0.8 + 0.4 * vn(x * 0.13 + 4, y * 0.09));\n  disc(27, 10, 4.4, 2);\n  crane(19, 30, 1.3, 1);\n  crane(23, 47, 0.95, -1);\n  crane(8, 41, 0.5, 1);\n  // Rows of waves, each crest inked and its trough left pale.\n  for (let b = 0; b \u003c 4; b++) {\n    const y0 = 56 + b * 5.4;\n    const amp = 1.4 + b * 0.8;\n    const f = 0.5 - b * 0.07;\n    for (let x = 0; x \u003c PW; x++) {\n      RID[x] = y0 - amp * (0.5 + 0.5 * sin(x * f + b * 2.1)) ** 3;\n      ROC[x] = 1;\n    }\n    fill(0.42, 2.6, 0.9, 0, b * 13);\n    // A curl of foam breaks off each crest.\n    for (let x0 = (PI / 2 - b * 2.1 + 2 * PI * 3) / f; x0 > -2; x0 -= (2 * PI) / f) {\n      const py = y0 - amp;\n      brush([x0 + 1, py + 0.6, 0.35, x0, py - 0.6, 0.4, x0 - 1.6, py - 0.3, 0.3, x0 - 2.2, py + 0.8, 0.2], 0.85);\n    }\n  }\n  calli(1.6, 2, 4);\n}\n\nconst PAINT = [landscape, bamboo, plum, cranes];\n\n// Each painting is kept twice: as painted with a dry brush, and as it would\n// be had the ink been wet, its washes spread and its strokes bled.\nfunction blur(src, r) {\n  let a = src;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const b = new Float32Array(PN);\n    const c = new Float32Array(PN);\n    for (let y = 0; y \u003c PH; y++)\n      for (let x = 0; x \u003c PW; x++) {\n        let s = 0;\n        for (let k = -r; k \u003c= r; k++) s += a[y * PW + cl(x + k, 0, PW - 1)];\n        b[y * PW + x] = s / (2 * r + 1);\n      }\n    for (let y = 0; y \u003c PH; y++)\n      for (let x = 0; x \u003c PW; x++) {\n        let s = 0;\n        for (let k = -r; k \u003c= r; k++) s += b[cl(y + k, 0, PH - 1) * PW + x];\n        c[y * PW + x] = s / (2 * r + 1);\n      }\n    a = c;\n  }\n  return a;\n}\n\nfunction paint(n) {\n  Wm = new Float32Array(PN);\n  Sm = new Float32Array(PN);\n  Am = new Float32Array(PN);\n  Pg = new Uint8Array(PN);\n  rs = 11 + n * 7;\n  PAINT[n]();\n  const wb = blur(Wm, 2);\n  const sb = blur(Sm, 1);\n  const hb = blur(sb, 2);\n  const wh = blur(wb, 3);\n  const d0 = new Float32Array(PN);\n  const d1 = new Float32Array(PN);\n  for (let i = 0; i \u003c PN; i++) {\n    // A dry wash catches only the raised fibres of the paper, in streaks.\n    const x = i % PW;\n    const y = (i / PW) | 0;\n    d0[i] = 1 - (1 - Wm[i] * (0.5 + 0.45 * vn(x * 0.25, y * 0.6))) * (1 - Sm[i]);\n    d1[i] = 1 - exp(-1.7 * (wb[i] + 0.5 * wh[i]) - 1.5 * (sb[i] + 0.6 * hb[i]));\n  }\n  return [d0, d1, Am, Pg];\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = { F: [F(N), F(N), F(N)], A: [F(N), F(N), F(N)], S: [F(MW * LEN), F(MW * LEN), F(MW * LEN)], L: [F(W), F(W), F(W)] });\n  Object.assign(P, { cache: [], base: -1, st: 0, tm: 0, u: 0, u0: 0, hold: 2.2, T: 0, rt: 0, kick: -99, th: 0, bow: 0, tw: 0, built: -1, wetD: -1, lamp: 0, wet: 0.06 });\n  // The alcove: an earth wall, a wooden post at the left, and the raised floor\n  // with its lacquered front edge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let c = [0.085, 0.07, 0.055];\n      let f = 0.8 + 0.4 * vn(x * 0.25, y * 0.12) + 0.08 * (hash(x, y) - 0.5);\n      if (x \u003c 3) {\n        c = [0.22, 0.15, 0.09];\n        f = (x === 2 ? 0.55 : 1) * (0.85 + 0.3 * vn(x * 2, y * 0.05));\n      } else if (y === 120) f = 0.35;\n      else if (y > 120 && y \u003c 125) {\n        c = [0.2, 0.14, 0.085];\n        f = 0.8 + 0.25 * vn(x * 0.06, y * 2) + (y - 121) * 0.06;\n      } else if (y >= 125) {\n        c = [0.1, 0.075, 0.06];\n        f = y === 125 ? 3.2 : 0.6;\n      }\n      for (let k = 0; k \u003c 3; k++) P.A[k][y * W + x] = c[k] * f;\n    }\n  // The mounting: silk with a small woven figure, gold brocade strips above\n  // and below the painting, and the two hanging strips from the rod.\n  for (let y = 0; y \u003c LEN; y++)\n    for (let x = 0; x \u003c MW; x++) {\n      let c = SILK;\n      let f = (0.92 + 0.08 * ((x + y) & 1)) * ((x % 4 === 1 && y % 4 === 1) || (x % 4 === 3 && y % 4 === 3) ? 1.3 : 1);\n      if (x >= PX && x \u003c PX + PW && (y === PY - 2 || y === PY - 1 || y === PY + PH || y === PY + PH + 1)) {\n        c = GOLD;\n        f = (x + 2 * y) % 3 ? 0.88 : 1.15;\n      }\n      if (x === PX - 1 || x === PX + PW) f *= 0.8;\n      const fu = x % 23 > 8 && x % 23 \u003c 12;\n      if (fu && y \u003c= 10) {\n        c = GOLD;\n        f = (x % 23 === 10 ? 1 : 0.8) * (y % 3 ? 0.92 : 1.12);\n      } else if (fu && y === 11 && x % 23 !== 10) {\n        c = PAPER;\n        f = 0.75;\n      } else if (x % 23 === 12 && y \u003c= 11) f *= 0.55;\n      if (y === 0) f *= 0.65;\n      for (let k = 0; k \u003c 3; k++) P.S[k][y * MW + x] = c[k] * f;\n    }\n}\n\nfunction roll(P) {\n  if (P.st \u003c 2) Object.assign(P, { st: 2, tm: 0, u0: P.u });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.lamp = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3) / 2;\n  const base = cl(round(k[2]), 0, 3);\n  P.wet = cl(k[3], 0, 1);\n  if (P.base \u003c 0) {\n    P.base = P.cur = base;\n    P.nx = (base + 1) % 4;\n  }\n  if (base !== P.base) {\n    P.base = P.nx = base;\n    roll(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) roll(P);\n  const st = dt * rate;\n  P.T += st;\n  P.rt += dt;\n  P.tm += st;\n  if (P.st === 0) {\n    P.u = sm(0, 1, P.tm / TU);\n    if (P.tm >= TU) Object.assign(P, { st: 1, tm: 0, kick: P.T });\n  } else if (P.st === 1) {\n    if (P.tm >= P.hold) roll(P);\n  } else if (P.st === 2) {\n    P.u = P.u0 * (1 - sm(0, 1, P.tm / (TR * max(0.25, P.u0))));\n    if (P.u \u003c= 0) Object.assign(P, { u: 0, st: 3, tm: 0 });\n  } else if (P.tm >= TZ) {\n    // Rolled up, the scroll is swapped for the next one, which comes down.\n    Object.assign(P, { cur: P.nx, nx: (P.nx + 1) % 4, st: 0, tm: 0, hold: TS });\n  }\n  // The swing: a kick when the roller comes to rest, then the draft.\n  const w = (2 * PI) / 2.4;\n  const tk = P.T - P.kick;\n  const kick = tk > 0 ? 1.7 * exp(-tk / 2.2) * sin(w * tk) : 0;\n  const T = P.T;\n  P.th = (kick + 0.55 * (0.6 + 0.4 * sin(0.29 * w * T)) * sin(w * T + 0.6 * sin(0.13 * w * T))) / 110;\n  P.bow = 0.45 * sin(0.71 * w * T + 1.3) + 0.3 * kick;\n  P.tw = sin(0.57 * w * T + 0.4);\n}\n\nfunction compose(P) {\n  const c = P.cache[P.cur] || (P.cache[P.cur] = paint(P.cur));\n  const wet = P.wet;\n  for (let y = 0; y \u003c PH; y++)\n    for (let x = 0; x \u003c PW; x++) {\n      const i = y * PW + x;\n      const D = c[0][i] + (c[1][i] - c[0][i]) * wet;\n      const f = (1 - 0.9 * D) * (0.965 + 0.05 * hash(x + 7, y + 3));\n      const a = c[2][i];\n      const p = PIG[c[3][i]];\n      for (let k = 0; k \u003c 3; k++) P.S[k][(PY + y) * MW + PX + x] = PAPER[k] * f * (1 - a) + p[k] * a;\n    }\n  P.built = P.cur;\n  P.wetD = wet;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.base \u003c 0) return;\n  if (P.built !== P.cur || abs(P.wetD - P.wet) > 0.004) compose(P);\n  const [FR, FG, FB] = P.F;\n  const [AR, AG, AB] = P.A;\n  const [SR, SG, SB] = P.S;\n  const [LR, LG, LB] = P.L;\n  const lamp = P.lamp;\n  const fl = 1 + (1 - lamp) * 0.035 * (sin(P.rt * 9.3) * 0.6 + sin(P.rt * 14.1 + 1) * 0.4);\n  // The light on each column: the candle from the left, the moon from the right.\n  for (let x = 0; x \u003c W; x++) {\n    const gc = (1.08 - (0.42 * x) / 63) * fl;\n    const gm = 0.66 + (0.4 * x) / 63;\n    for (let k = 0; k \u003c 3; k++) P.L[k][x] = mix(CANDLE[k] * gc, MOON[k] * gm, lamp);\n  }\n  const vy = (y) => 0.8 + 0.2 * min(1, y / 60);\n  const yR = TOP + P.u * LEN;\n  const dia = sqrt(16 + 26 * (1 - P.u));\n  const yc = yR + dia / 2;\n  const { th, bow } = P;\n  const side = 1 - 2 * lamp;\n\n  // The wall, with the scroll's soft shadow thrown away from the light.\n  const sx0 = MX + th * 60 + 3 * side;\n  for (let y = 0; y \u003c H; y++) {\n    const v = vy(y);\n    const sy = y > 15 && y \u003c yc + dia / 2 + 1.5 ? 0.55 : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const s = (1 - sy * cl(min(x + 0.5 - sx0, sx0 + MW - x - 0.5) * 0.6 + 0.5, 0, 1)) * v;\n      FR[i] = AR[i] * LR[x] * s;\n      FG[i] = AG[i] * LG[x] * s;\n      FB[i] = AB[i] * LB[x] * s;\n    }\n  }\n\n  // The hanging part, each row shifted by the swing and the bow of the paper.\n  // The paper turned toward the light is brighter, and the rows curling onto\n  // the roller darker.\n  const glow = 1 + 0.06 * P.tw * side;\n  for (let y = TOP; y \u003c yR; y++) {\n    const cov = min(1, yR - y);\n    const ty = y - TOP;\n    const bw = bow * sin(PI * cl((y + 0.5 - TOP) / (yR - TOP), 0, 1));\n    const dx = th * (y + 0.5 - NAIL) + bw;\n    const v = vy(y) * glow * (0.62 + 0.38 * cl((yR - y - 0.5) / 1.6, 0, 1)) * cov;\n    for (let x = MX - 3; x \u003c MX + MW + 3; x++) {\n      const fx = x - MX - dx;\n      const i0 = floor(fx);\n      const f = fx - i0;\n      const w0 = i0 >= 0 && i0 \u003c MW ? 1 - f : 0;\n      const w1 = i0 >= -1 && i0 \u003c MW - 1 ? f : 0;\n      const a = (w0 + w1) * cov;\n      if (a \u003c= 0) continue;\n      const t = ty * MW + i0;\n      const r = (w0 ? SR[t] * w0 : 0) + (w1 ? SR[t + 1] * w1 : 0);\n      const g = (w0 ? SG[t] * w0 : 0) + (w1 ? SG[t + 1] * w1 : 0);\n      const b = (w0 ? SB[t] * w0 : 0) + (w1 ? SB[t + 1] * w1 : 0);\n      const s = v * (1 + (0.12 * bw * side * (31.5 - x)) / 22);\n      const i = y * W + x;\n      FR[i] = FR[i] * (1 - a) + r * LR[x] * s;\n      FG[i] = FG[i] * (1 - a) + g * LG[x] * s;\n      FB[i] = FB[i] * (1 - a) + b * LB[x] * s;\n    }\n  }\n\n  const put = (x, y, c, f, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const i = y * W + x;\n    const s = f * vy(y) * a;\n    FR[i] = FR[i] * (1 - a) + c[0] * LR[x] * s;\n    FG[i] = FG[i] * (1 - a) + c[1] * LG[x] * s;\n    FB[i] = FB[i] * (1 - a) + c[2] * LB[x] * s;\n  };\n  // The nail, the cord to two rings on the rod, and the rod.\n  for (let y = 4; y \u003c 15; y++)\n    for (const ex of [20.5, 43.5]) {\n      const x = mix(31.5, ex, (y - 4) / 10.5) - 0.5;\n      const x0 = floor(x);\n      put(x0, y, CORD, 1, 1 - (x - x0));\n      put(x0 + 1, y, CORD, 1, x - x0);\n    }\n  for (const [x, y, f] of [[31, 2, 1.25], [32, 2, 0.8], [31, 3, 0.8], [32, 3, 0.55], [20, 14, 1.1], [43, 14, 1.1]]) put(x, y, BRASS, f);\n  for (let x = MX - 1; x \u003c= MX + MW; x++) {\n    const e = x \u003c MX || x >= MX + MW ? 0.75 : 1;\n    put(x, 15, WOOD, 1.3 * e);\n    put(x, 16, WOOD, 0.7 * e);\n  }\n\n  // The roller and the rolled scroll on it, turning as it goes, with a knob\n  // of bone at each end standing proud of the roll.\n  const dxr = th * (yc - NAIL);\n  const rolled = 1 - P.u;\n  const ang = (rolled * LEN) / (dia / 2);\n  const seam = cos(ang) > 0.2 && rolled > 0.02 ? sin(ang) : 9;\n  const rc = [0, 1, 2].map((k) => mix(SILK[k], BACK[k], sm(0, 0.3, rolled)));\n  for (let y = floor(yc - 3.6); y \u003c= yc + 3.6; y++) {\n    const yy = y + 0.5 - yc;\n    const v = yy / (dia / 2);\n    const vk = yy / 3.4;\n    for (let x = MX - 5; x \u003c MX + MW + 5; x++) {\n      const px = x + 0.5 - dxr;\n      const kx = px \u003c MX ? MX - px : px - MX - MW;\n      if (kx \u003c 0) {\n        const a = cl(dia / 2 - abs(yy) + 0.5, 0, 1) * cl(0.5 - kx, 0, 1);\n        if (a \u003c= 0) continue;\n        const n = sqrt(max(0, 1 - v * v));\n        put(x, y, rc, (0.25 + 0.75 * n * (0.8 - 0.35 * v)) * (abs(v - seam) \u003c 0.3 ? 0.6 : 1), a);\n      } else if (kx \u003c 4.6) {\n        const e = 3.4 * sqrt(max(0, 1 - (kx / 4.4) ** 4));\n        const a = cl(e - abs(yy) + 0.5, 0, 1);\n        if (a \u003c= 0) continue;\n        const n = sqrt(max(0, 1 - vk * vk));\n        const hi = 0.45 * exp(-((vk + 0.45) ** 2) / 0.05);\n        put(x, y, BONE, (0.3 + 0.75 * n * (0.85 - 0.3 * vk) + hi) * (kx \u003c 0.8 ? 0.55 : 1), a);\n      }\n    }\n  }\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, FR[i] * 255), min(255, FG[i] * 255), min(255, FB[i] * 255));\n}\n","layer":{"id":"layer-hanging-scroll","type":"code","name":"hanging-scroll","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hanging Scroll\n// Family:  paper\n// Idea:    A hanging scroll in a dim alcove lets its weighted roller down from the upper rod to show an ink painting on ivory paper in silk borders row by row, hangs swaying in a draft, then rolls up from the bottom so the next painting can come down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after Japanese kakemono hanging scrolls and Song dynasty ink landscapes\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Painting=0..3, Ink=0..1\n//\n// Knob 1: Lamp. The light on the scroll: a warm candle low on the left turns the paper ivory at 0, and towards 1 it gives way to cool moonlight from a window on the right.\n// Knob 2: Speed. How fast the scroll moves: at 2 the roller takes under three seconds to come down, a painting hangs for seven and the draft swings it about once in two and a half.\n// Knob 3: Painting. Which painting unrolls next: misty mountains with a waterfall at 0, bamboo in wind at 1, a plum branch under the moon at 2, cranes over waves at 3. Turning it rolls the scroll up and lets that one down.\n// Knob 4: Ink. How wet the ink was: crisp dry-brush lines with broken edges at 0, washes that bled out into the paper and strokes feathered at their edges at 1.\n// Buttons: K1 tap rolls the scroll up now and unrolls the next painting.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The scroll hangs from a nail at row 3. Its upper rod fills rows 15 and 16,\n// and the mounting runs 96 rows down from row 17 to the roller, 44 columns\n// wide from column 10. The painting sits inside the mounting, 36 by 74.\nconst [NAIL, TOP, LEN, MX, MW] = [3, 17, 96, 10, 44];\nconst [PX, PY, PW, PH] = [4, 14, 36, 74];\nconst PN = PW * PH;\n// At Speed 2, in seconds: unroll, hang, roll up, rest rolled.\nconst [TU, TS, TR, TZ] = [2.6, 7, 2, 0.5];\nconst [PAPER, SILK, GOLD, BACK] = [[0.95, 0.91, 0.8], [0.2, 0.31, 0.3], [0.8, 0.61, 0.27], [0.6, 0.58, 0.5]];\nconst [WOOD, BONE, BRASS, CORD] = [[0.4, 0.27, 0.16], [0.86, 0.8, 0.64], [0.85, 0.66, 0.32], [0.5, 0.3, 0.45]];\n// Seal vermilion, plum blossom and the red sun.\nconst PIG = [[0.82, 0.14, 0.1], [0.9, 0.3, 0.42], [0.93, 0.3, 0.12]];\nconst CANDLE = [1, 0.9, 0.72];\nconst MOON = [0.56, 0.67, 0.92];\nconst { min, max, floor, ceil, round, sqrt, sin, cos, exp, abs, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\n// A fixed hash and a value noise made from it, so a painting comes out the\n// same every time it unrolls.\nconst hash = (a, b) => {\n  let h = Math.imul((a | 0) * 374761393 + (b | 0) * 668265263, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nconst vn = (x, y) => {\n  const i = floor(x);\n  const j = floor(y);\n  const [u, v] = [sm(0, 1, x - i), sm(0, 1, y - j)];\n  const [a, b, c] = [hash(i, j), hash(i + 1, j), hash(i, j + 1)];\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(i + 1, j + 1)) * u * v;\n};\n\n// The painting being made: wash and stroke densities, pigment cover and which\n// pigment. RID is a ridge row per column for fill(), ROC how solid it is there.\nlet Wm, Sm, Am, Pg;\nlet rs = 1;\nconst rnd = () => (rs = (rs * 16807) % 2147483647) / 2147483647;\nconst RID = new Float32Array(PW);\nconst ROC = new Float32Array(PW);\n\n// A brush stroke through points [x, y, half width, ...]. dry parts the hairs\n// into streaks along the stroke, more of them toward its end.\nfunction brush(p, dens, dry = 0) {\n  const n = p.length / 3 - 1;\n  for (let k = 0; k \u003c n; k++) {\n    const [ax, ay, aw, bx, by, bw] = p.slice(k * 3, k * 3 + 6);\n    const dx = bx - ax;\n    const dy = by - ay;\n    const L2 = dx * dx + dy * dy || 1e-6;\n    const L = sqrt(L2);\n    const m = max(aw, bw) + 1;\n    for (let y = max(0, floor(min(ay, by) - m)); y \u003c= min(PH - 1, floor(max(ay, by) + m)); y++)\n      for (let x = max(0, floor(min(ax, bx) - m)); x \u003c= min(PW - 1, floor(max(ax, bx) + m)); x++) {\n        const qx = x + 0.5 - ax;\n        const qy = y + 0.5 - ay;\n        const t = cl((qx * dx + qy * dy) / L2, 0, 1);\n        let a = cl(aw + (bw - aw) * t + 0.5 - hypot(qx - dx * t, qy - dy * t), 0, 1);\n        if (a \u003c= 0) continue;\n        if (dry) {\n          const g = (dry * (k + t)) / n;\n          const c = (qx * dy - qy * dx) / L;\n          a *= 0.15 + 0.85 * sm(g - 0.1, g + 0.1, 0.55 * hash(floor(c * 1.8) + 99, floor(t * L * 0.5) + k * 31) + 0.45 * vn(x * 0.9, y * 0.9));\n        }\n        const i = y * PW + x;\n        // A negative density leaves the paper bare instead.\n        if (dens \u003c 0) Wm[i] *= 1 + dens * a;\n        else Sm[i] = max(Sm[i], a * dens);\n      }\n  }\n}\n\n// A round patch of pigment, which leaves no wash under it.\nfunction disc(cx, cy, r, pg, a0 = 0.92) {\n  for (let y = max(0, floor(cy - r - 1)); y \u003c min(PH, cy + r + 1); y++)\n    for (let x = max(0, floor(cx - r - 1)); x \u003c min(PW, cx + r + 1); x++) {\n      const a = cl(r + 0.5 - hypot(x + 0.5 - cx, y + 0.5 - cy), 0, 1);\n      const i = y * PW + x;\n      if (a > Am[i]) {\n        Am[i] = a * a0;\n        Pg[i] = pg;\n      }\n      Wm[i] *= 1 - a;\n    }\n}\n\n// Fill below the ridge in RID: the wash is darkest at the ridge and fades down\n// into mist, and it covers what was painted behind. edge inks the ridge line\n// and cun the short texture strokes under it.\nfunction fill(dens, fade, edge, cun, sd) {\n  for (let x = 0; x \u003c PW; x++) {\n    const r = RID[x];\n    const oc = ROC[x];\n    for (let y = max(0, floor(r)); y \u003c PH; y++) {\n      // The row the ridge crosses is covered only in part.\n      const cv = cl(y + 1 - r, 0, 1) * oc;\n      const d = max(0, y + 0.5 - r);\n      const i = y * PW + x;\n      const o = 0.92 * cl(d / 2 + 0.3, 0, 1) * cv;\n      Wm[i] = min(1, Wm[i] * (1 - o) + dens * exp(-d / fade) * (0.7 + 0.6 * vn(x * 0.5 + sd, y * 0.2)) * cv);\n      Sm[i] *= 1 - o;\n      if (d \u003c 1.5) Sm[i] = max(Sm[i], edge * (1 - d / 1.7) * (0.35 + 0.65 * vn(x * 1.3 + sd, y * 0.5)) * cv);\n      const c = vn(x * 1.2 + sd, y * 0.3);\n      if (c > 0.64) Sm[i] = max(Sm[i], cun * (c - 0.6) * 2.6 * exp(-d / (fade * 0.8)) * oc);\n    }\n  }\n}\n\nfunction mtn(cx, base, hw, ht, dens, fade, edge, cun, sd) {\n  for (let x = 0; x \u003c PW; x++) {\n    const u = abs(x + 0.5 - cx) / hw;\n    RID[x] = u \u003c 1 ? base - ht * (1 - u ** 1.6) * (0.62 + 0.45 * vn(x * 0.28 + sd, sd) + 0.3 * vn(x * 0.8, sd + 5)) : PH;\n    ROC[x] = sm(1, 0.75, u);\n  }\n  fill(dens, fade, edge, cun, sd);\n}\n\n// A pine clinging to a ridge: a crooked trunk and flat layers of needles.\nfunction pine(x, y, h, d) {\n  brush([x, y, 0.45, x + 0.5, y - h * 0.5, 0.35, x - 0.2, y - h, 0.3], d);\n  for (let k = 0; k \u003c 3; k++) {\n    const yy = y - h * (0.42 + 0.26 * k);\n    const w = h * (0.55 - 0.13 * k);\n    brush([x - w, yy + 0.4, 0.45, x + 0.2, yy - 0.3, 0.75, x + w, yy + 0.2, 0.4], d);\n  }\n}\n\n// A column of characters, each a few short strokes in a square cell, and the\n// red seal under it.\nfunction calli(x, y, n) {\n  for (let c = 0; c \u003c n; c++) {\n    const cy = y + c * 4.6;\n    for (let k = 3 + floor(rnd() * 3); k > 0; k--) {\n      const t = rnd() * 4;\n      const a = x + rnd() * 2.6;\n      const b = cy + rnd() * 3;\n      brush(t \u003c 1.6 ? [a - 0.3, b, 0.4, min(x + 3.2, a + 2), b + 0.2, 0.35] : t \u003c 3 ? [a, b - 0.4, 0.4, a + 0.2, min(cy + 3.6, b + 2.2), 0.3] : [a, b, 0.55, a + 0.7, b + 0.7, 0.3], 0.92);\n    }\n  }\n  const sy = floor(y + n * 4.6 + 0.6);\n  const sx = floor(x + 0.2);\n  for (let j = 0; j \u003c 3; j++)\n    for (let i = 0; i \u003c 3; i++) {\n      const k = (sy + j) * PW + sx + i;\n      // Carved lines let the paper show through the red.\n      Am[k] = (i + j) % 2 && hash(sx + i, sy + j) \u003c 0.6 ? 0.45 : 0.95;\n      Pg[k] = 0;\n    }\n}\n\nfunction landscape() {\n  // The far peak towers over the left, a lower one stands behind on the right.\n  mtn(13, 42, 15, 34, 0.32, 10, 0.45, 0.3, 3);\n  mtn(29, 40, 9, 12, 0.26, 7, 0.35, 0.25, 11);\n  mtn(24, 56, 16, 18, 0.5, 8, 0.85, 0.6, 23);\n  for (const x of [15, 18, 21, 31, 34]) pine(x, RID[x] + 1.5, 4 + (x % 3), 0.9);\n  // A waterfall drops from a cleft in the middle ridge into the mist.\n  for (let y = floor(RID[28] + 3); y \u003c 58; y++)\n    for (let x = 25; x \u003c 31; x++) {\n      const i = y * PW + x;\n      const c = abs(x + 0.5 - 28 - 0.4 * sin(y * 0.45));\n      const f = sm(58, 50, y);\n      if (c \u003c 0.9) {\n        Wm[i] *= 1 - 0.9 * f;\n        Sm[i] *= 1 - f;\n      } else if (c \u003c 2.4) Sm[i] = max(Sm[i], (0.75 * f * (2.4 - c)) / 1.5);\n    }\n  mtn(30, 63, 9, 3, 0.3, 2.5, 0.5, 0, 51);\n  // The near bank, with a hut under two pines.\n  mtn(5, 70, 17, 16, 0.72, 6, 1, 0.85, 37);\n  pine(3, RID[3] + 2, 7, 0.95);\n  pine(8, RID[8] + 2, 6, 0.95);\n  const hy = round(RID[15] + 4);\n  for (let j = -4; j \u003c= 1; j++)\n    for (let i = 11; i \u003c= 18; i++) {\n      Wm[(hy + j) * PW + i] *= 0.1;\n      Sm[(hy + j) * PW + i] = 0;\n    }\n  brush([10.5, hy - 2.2, 0.55, 14.5, hy - 4.6, 0.7, 18.5, hy - 2.2, 0.55], 0.97);\n  brush([12, hy - 2, 0.3, 12, hy + 0.6, 0.3], 0.7);\n  brush([17, hy - 2, 0.3, 17, hy + 0.6, 0.3], 0.7);\n  brush([14.5, hy - 1, 0.45, 14.5, hy + 0.6, 0.45], 0.85);\n  // Still water, a boat with its fisherman and his rod.\n  brush([19, 66.5, 0.25, 23, 66.5, 0.2], 0.3);\n  brush([28, 71.5, 0.25, 34, 71.5, 0.2], 0.28);\n  brush([20, 72.5, 0.2, 24, 72.5, 0.2], 0.25);\n  brush([22.5, 68, 0.35, 25, 69, 0.6, 28, 68.9, 0.6, 29.5, 67.7, 0.35], 0.92);\n  brush([26.5, 68, 0.55, 26.6, 66.4, 0.5], 0.9);\n  brush([27, 66.8, 0.25, 31, 63.5, 0.2], 0.6);\n  calli(31.6, 1.5, 4);\n}\n\nfunction bamboo() {\n  // Three stalks lean in the wind, the far one pale.\n  for (const [x0, x1, y1, w, d] of [[6, 11, -2, 1.1, 0.32], [14, 20, -2, 1.7, 0.9], [25, 29, 10, 1.3, 0.72]]) {\n    const n = round((75 - y1) / 10.5);\n    for (let k = 0; k \u003c n; k++) {\n      const ax = mix(x0, x1, k / n);\n      const ay = mix(75, y1, k / n);\n      const bx = mix(x0, x1, (k + 1) / n);\n      const by = mix(75, y1, (k + 1) / n);\n      brush([ax, ay - 0.8, w, bx, by + 0.8, w * 0.9], d, 0.45);\n      brush([bx - w - 0.5, by + 0.2, 0.45, bx + w + 0.5, by - 0.4, 0.45], min(1, d * 1.1));\n    }\n  }\n  // Leaves stream off the twigs to the right.\n  for (const [x, y, n, d, s] of [\n    [12, 8, 4, 0.35, 0.9], [9, 40, 4, 0.35, 0.9], [21, 12, 5, 0.92, 1.2], [20, 34, 5, 0.9, 1.15],\n    [19, 56, 4, 0.85, 1.05], [29, 24, 5, 0.75, 1], [28, 46, 3, 0.75, 0.95],\n  ]) {\n    brush([x - 3.5, y + 2.5, 0.35, x, y, 0.25], d);\n    for (let j = 0; j \u003c n; j++) {\n      const a = 0.35 + (j / (n - 1) - 0.5) * 1.3 + (rnd() - 0.5) * 0.3;\n      const L = (8 + rnd() * 4) * s;\n      const w = (1 + rnd() * 0.3) * s;\n      brush([x, y, 0.25, x + cos(a) * L * 0.3, y + sin(a) * L * 0.3, w, x + cos(a + 0.12) * L, y + sin(a + 0.12) * L, 0.05], d);\n    }\n  }\n  calli(31.4, 42, 5);\n}\n\nfunction plum() {\n  // The sky washed grey round a full moon left bare.\n  for (let y = 0; y \u003c 50; y++)\n    for (let x = 0; x \u003c PW; x++)\n      Wm[y * PW + x] = 0.28 * sm(8, 9.6, hypot(x + 0.5 - 23, y + 0.5 - 17)) * sm(50, 18, y) * (0.75 + 0.5 * vn(x * 0.2, y * 0.15));\n  // An old branch in dry brush, straight young shoots off it, and red blossom.\n  brush([-1, 75, 3, 5, 63, 2.5, 3, 51, 2.1, 10, 41, 1.7, 8, 31, 1.3, 15, 21, 1, 13, 12, 0.6], 0.93, 0.9);\n  brush([5, 61, 1.3, 13, 56, 1, 21, 51, 0.75, 29, 42, 0.45], 0.88, 0.8);\n  for (const t of [[10, 41, 12, 28], [15, 21, 22, 8], [13, 12, 14, 4], [21, 51, 24, 41], [29, 42, 33, 33], [8, 31, 3, 23], [13, 56, 16, 48], [24, 47, 31, 47]])\n    brush([t[0], t[1], 0.45, t[2], t[3], 0.25], 0.85);\n  for (const [x, y, r] of [\n    [12, 30, 1.5], [12.5, 26, 1.3], [17, 16, 1.4], [20, 11, 1.5], [21.5, 7.5, 1.2], [14, 6, 1.3],\n    [22, 44, 1.5], [24, 40.5, 1.2], [31, 37, 1.4], [32.5, 33, 1.2], [5, 25, 1.4], [3, 21.5, 1.2],\n    [15.5, 50, 1.4], [27.5, 47, 1.3], [9, 37.5, 1.5], [17.5, 54, 1.3], [6, 57, 1.6], [11, 16.5, 1.1],\n  ]) {\n    disc(x, y, r, 1);\n    Sm[floor(y) * PW + floor(x)] = 0.6;\n  }\n  calli(31.4, 50, 4);\n}\n\n// A red-crowned crane flying left, wings raised (up 1) or lowered (up -1).\nfunction crane(cx, cy, s, up) {\n  const u = up * s;\n  // The far wing and the near wing are left bare in the grey sky, each with\n  // black flight feathers along its trailing edge.\n  for (const [fx, d] of [[-2.5, -0.55], [4.5, -0.95]]) {\n    const w = [cx, cy - 0.3 * u, 1.9 * s, cx + (fx * 0.4 + 0.6) * s, cy - 5 * u, 1.4 * s, cx + fx * s, cy - 9.5 * u, 0.7 * s];\n    brush(w, d);\n    brush(w.map((v, k) => (k % 3 === 0 ? v + 1.6 * s : k % 3 === 2 ? 0.3 * s : v)), 0.9);\n  }\n  brush([cx - 3 * s, cy, 1.3 * s, cx + 3 * s, cy + 0.3 * s, 1.1 * s], -0.95);\n  // The black neck, a grey bill, the black tail and the trailing legs.\n  brush([cx - 2.6 * s, cy - 0.2 * s, 0.55 * s, cx - 7.8 * s, cy - 1.4 * s, 0.45 * s], 0.95);\n  brush([cx - 8.3 * s, cy - 1.4 * s, 0.3, cx - 10.5 * s, cy - 1 * s, 0.2], 0.5);\n  brush([cx + 2.5 * s, cy - 0.2 * s, 0.8 * s, cx + 4.3 * s, cy + 0.5 * s, 0.4 * s], 0.9);\n  brush([cx + 3 * s, cy + 0.9 * s, 0.3, cx + 9.5 * s, cy + 1.9 * s, 0.25], 0.6);\n  disc(cx - 8 * s, cy - 2 * s, 0.6, 0);\n}\n\nfunction cranes() {\n  for (let y = 0; y \u003c PH; y++) for (let x = 0; x \u003c PW; x++) Wm[y * PW + x] = (0.5 + 0.25 * sm(62, 0, y)) * (0.8 + 0.4 * vn(x * 0.13 + 4, y * 0.09));\n  disc(27, 10, 4.4, 2);\n  crane(19, 30, 1.3, 1);\n  crane(23, 47, 0.95, -1);\n  crane(8, 41, 0.5, 1);\n  // Rows of waves, each crest inked and its trough left pale.\n  for (let b = 0; b \u003c 4; b++) {\n    const y0 = 56 + b * 5.4;\n    const amp = 1.4 + b * 0.8;\n    const f = 0.5 - b * 0.07;\n    for (let x = 0; x \u003c PW; x++) {\n      RID[x] = y0 - amp * (0.5 + 0.5 * sin(x * f + b * 2.1)) ** 3;\n      ROC[x] = 1;\n    }\n    fill(0.42, 2.6, 0.9, 0, b * 13);\n    // A curl of foam breaks off each crest.\n    for (let x0 = (PI / 2 - b * 2.1 + 2 * PI * 3) / f; x0 > -2; x0 -= (2 * PI) / f) {\n      const py = y0 - amp;\n      brush([x0 + 1, py + 0.6, 0.35, x0, py - 0.6, 0.4, x0 - 1.6, py - 0.3, 0.3, x0 - 2.2, py + 0.8, 0.2], 0.85);\n    }\n  }\n  calli(1.6, 2, 4);\n}\n\nconst PAINT = [landscape, bamboo, plum, cranes];\n\n// Each painting is kept twice: as painted with a dry brush, and as it would\n// be had the ink been wet, its washes spread and its strokes bled.\nfunction blur(src, r) {\n  let a = src;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const b = new Float32Array(PN);\n    const c = new Float32Array(PN);\n    for (let y = 0; y \u003c PH; y++)\n      for (let x = 0; x \u003c PW; x++) {\n        let s = 0;\n        for (let k = -r; k \u003c= r; k++) s += a[y * PW + cl(x + k, 0, PW - 1)];\n        b[y * PW + x] = s / (2 * r + 1);\n      }\n    for (let y = 0; y \u003c PH; y++)\n      for (let x = 0; x \u003c PW; x++) {\n        let s = 0;\n        for (let k = -r; k \u003c= r; k++) s += b[cl(y + k, 0, PH - 1) * PW + x];\n        c[y * PW + x] = s / (2 * r + 1);\n      }\n    a = c;\n  }\n  return a;\n}\n\nfunction paint(n) {\n  Wm = new Float32Array(PN);\n  Sm = new Float32Array(PN);\n  Am = new Float32Array(PN);\n  Pg = new Uint8Array(PN);\n  rs = 11 + n * 7;\n  PAINT[n]();\n  const wb = blur(Wm, 2);\n  const sb = blur(Sm, 1);\n  const hb = blur(sb, 2);\n  const wh = blur(wb, 3);\n  const d0 = new Float32Array(PN);\n  const d1 = new Float32Array(PN);\n  for (let i = 0; i \u003c PN; i++) {\n    // A dry wash catches only the raised fibres of the paper, in streaks.\n    const x = i % PW;\n    const y = (i / PW) | 0;\n    d0[i] = 1 - (1 - Wm[i] * (0.5 + 0.45 * vn(x * 0.25, y * 0.6))) * (1 - Sm[i]);\n    d1[i] = 1 - exp(-1.7 * (wb[i] + 0.5 * wh[i]) - 1.5 * (sb[i] + 0.6 * hb[i]));\n  }\n  return [d0, d1, Am, Pg];\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = { F: [F(N), F(N), F(N)], A: [F(N), F(N), F(N)], S: [F(MW * LEN), F(MW * LEN), F(MW * LEN)], L: [F(W), F(W), F(W)] });\n  Object.assign(P, { cache: [], base: -1, st: 0, tm: 0, u: 0, u0: 0, hold: 2.2, T: 0, rt: 0, kick: -99, th: 0, bow: 0, tw: 0, built: -1, wetD: -1, lamp: 0, wet: 0.06 });\n  // The alcove: an earth wall, a wooden post at the left, and the raised floor\n  // with its lacquered front edge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let c = [0.085, 0.07, 0.055];\n      let f = 0.8 + 0.4 * vn(x * 0.25, y * 0.12) + 0.08 * (hash(x, y) - 0.5);\n      if (x \u003c 3) {\n        c = [0.22, 0.15, 0.09];\n        f = (x === 2 ? 0.55 : 1) * (0.85 + 0.3 * vn(x * 2, y * 0.05));\n      } else if (y === 120) f = 0.35;\n      else if (y > 120 && y \u003c 125) {\n        c = [0.2, 0.14, 0.085];\n        f = 0.8 + 0.25 * vn(x * 0.06, y * 2) + (y - 121) * 0.06;\n      } else if (y >= 125) {\n        c = [0.1, 0.075, 0.06];\n        f = y === 125 ? 3.2 : 0.6;\n      }\n      for (let k = 0; k \u003c 3; k++) P.A[k][y * W + x] = c[k] * f;\n    }\n  // The mounting: silk with a small woven figure, gold brocade strips above\n  // and below the painting, and the two hanging strips from the rod.\n  for (let y = 0; y \u003c LEN; y++)\n    for (let x = 0; x \u003c MW; x++) {\n      let c = SILK;\n      let f = (0.92 + 0.08 * ((x + y) & 1)) * ((x % 4 === 1 && y % 4 === 1) || (x % 4 === 3 && y % 4 === 3) ? 1.3 : 1);\n      if (x >= PX && x \u003c PX + PW && (y === PY - 2 || y === PY - 1 || y === PY + PH || y === PY + PH + 1)) {\n        c = GOLD;\n        f = (x + 2 * y) % 3 ? 0.88 : 1.15;\n      }\n      if (x === PX - 1 || x === PX + PW) f *= 0.8;\n      const fu = x % 23 > 8 && x % 23 \u003c 12;\n      if (fu && y \u003c= 10) {\n        c = GOLD;\n        f = (x % 23 === 10 ? 1 : 0.8) * (y % 3 ? 0.92 : 1.12);\n      } else if (fu && y === 11 && x % 23 !== 10) {\n        c = PAPER;\n        f = 0.75;\n      } else if (x % 23 === 12 && y \u003c= 11) f *= 0.55;\n      if (y === 0) f *= 0.65;\n      for (let k = 0; k \u003c 3; k++) P.S[k][y * MW + x] = c[k] * f;\n    }\n}\n\nfunction roll(P) {\n  if (P.st \u003c 2) Object.assign(P, { st: 2, tm: 0, u0: P.u });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.lamp = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3) / 2;\n  const base = cl(round(k[2]), 0, 3);\n  P.wet = cl(k[3], 0, 1);\n  if (P.base \u003c 0) {\n    P.base = P.cur = base;\n    P.nx = (base + 1) % 4;\n  }\n  if (base !== P.base) {\n    P.base = P.nx = base;\n    roll(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) roll(P);\n  const st = dt * rate;\n  P.T += st;\n  P.rt += dt;\n  P.tm += st;\n  if (P.st === 0) {\n    P.u = sm(0, 1, P.tm / TU);\n    if (P.tm >= TU) Object.assign(P, { st: 1, tm: 0, kick: P.T });\n  } else if (P.st === 1) {\n    if (P.tm >= P.hold) roll(P);\n  } else if (P.st === 2) {\n    P.u = P.u0 * (1 - sm(0, 1, P.tm / (TR * max(0.25, P.u0))));\n    if (P.u \u003c= 0) Object.assign(P, { u: 0, st: 3, tm: 0 });\n  } else if (P.tm >= TZ) {\n    // Rolled up, the scroll is swapped for the next one, which comes down.\n    Object.assign(P, { cur: P.nx, nx: (P.nx + 1) % 4, st: 0, tm: 0, hold: TS });\n  }\n  // The swing: a kick when the roller comes to rest, then the draft.\n  const w = (2 * PI) / 2.4;\n  const tk = P.T - P.kick;\n  const kick = tk > 0 ? 1.7 * exp(-tk / 2.2) * sin(w * tk) : 0;\n  const T = P.T;\n  P.th = (kick + 0.55 * (0.6 + 0.4 * sin(0.29 * w * T)) * sin(w * T + 0.6 * sin(0.13 * w * T))) / 110;\n  P.bow = 0.45 * sin(0.71 * w * T + 1.3) + 0.3 * kick;\n  P.tw = sin(0.57 * w * T + 0.4);\n}\n\nfunction compose(P) {\n  const c = P.cache[P.cur] || (P.cache[P.cur] = paint(P.cur));\n  const wet = P.wet;\n  for (let y = 0; y \u003c PH; y++)\n    for (let x = 0; x \u003c PW; x++) {\n      const i = y * PW + x;\n      const D = c[0][i] + (c[1][i] - c[0][i]) * wet;\n      const f = (1 - 0.9 * D) * (0.965 + 0.05 * hash(x + 7, y + 3));\n      const a = c[2][i];\n      const p = PIG[c[3][i]];\n      for (let k = 0; k \u003c 3; k++) P.S[k][(PY + y) * MW + PX + x] = PAPER[k] * f * (1 - a) + p[k] * a;\n    }\n  P.built = P.cur;\n  P.wetD = wet;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.base \u003c 0) return;\n  if (P.built !== P.cur || abs(P.wetD - P.wet) > 0.004) compose(P);\n  const [FR, FG, FB] = P.F;\n  const [AR, AG, AB] = P.A;\n  const [SR, SG, SB] = P.S;\n  const [LR, LG, LB] = P.L;\n  const lamp = P.lamp;\n  const fl = 1 + (1 - lamp) * 0.035 * (sin(P.rt * 9.3) * 0.6 + sin(P.rt * 14.1 + 1) * 0.4);\n  // The light on each column: the candle from the left, the moon from the right.\n  for (let x = 0; x \u003c W; x++) {\n    const gc = (1.08 - (0.42 * x) / 63) * fl;\n    const gm = 0.66 + (0.4 * x) / 63;\n    for (let k = 0; k \u003c 3; k++) P.L[k][x] = mix(CANDLE[k] * gc, MOON[k] * gm, lamp);\n  }\n  const vy = (y) => 0.8 + 0.2 * min(1, y / 60);\n  const yR = TOP + P.u * LEN;\n  const dia = sqrt(16 + 26 * (1 - P.u));\n  const yc = yR + dia / 2;\n  const { th, bow } = P;\n  const side = 1 - 2 * lamp;\n\n  // The wall, with the scroll's soft shadow thrown away from the light.\n  const sx0 = MX + th * 60 + 3 * side;\n  for (let y = 0; y \u003c H; y++) {\n    const v = vy(y);\n    const sy = y > 15 && y \u003c yc + dia / 2 + 1.5 ? 0.55 : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const s = (1 - sy * cl(min(x + 0.5 - sx0, sx0 + MW - x - 0.5) * 0.6 + 0.5, 0, 1)) * v;\n      FR[i] = AR[i] * LR[x] * s;\n      FG[i] = AG[i] * LG[x] * s;\n      FB[i] = AB[i] * LB[x] * s;\n    }\n  }\n\n  // The hanging part, each row shifted by the swing and the bow of the paper.\n  // The paper turned toward the light is brighter, and the rows curling onto\n  // the roller darker.\n  const glow = 1 + 0.06 * P.tw * side;\n  for (let y = TOP; y \u003c yR; y++) {\n    const cov = min(1, yR - y);\n    const ty = y - TOP;\n    const bw = bow * sin(PI * cl((y + 0.5 - TOP) / (yR - TOP), 0, 1));\n    const dx = th * (y + 0.5 - NAIL) + bw;\n    const v = vy(y) * glow * (0.62 + 0.38 * cl((yR - y - 0.5) / 1.6, 0, 1)) * cov;\n    for (let x = MX - 3; x \u003c MX + MW + 3; x++) {\n      const fx = x - MX - dx;\n      const i0 = floor(fx);\n      const f = fx - i0;\n      const w0 = i0 >= 0 && i0 \u003c MW ? 1 - f : 0;\n      const w1 = i0 >= -1 && i0 \u003c MW - 1 ? f : 0;\n      const a = (w0 + w1) * cov;\n      if (a \u003c= 0) continue;\n      const t = ty * MW + i0;\n      const r = (w0 ? SR[t] * w0 : 0) + (w1 ? SR[t + 1] * w1 : 0);\n      const g = (w0 ? SG[t] * w0 : 0) + (w1 ? SG[t + 1] * w1 : 0);\n      const b = (w0 ? SB[t] * w0 : 0) + (w1 ? SB[t + 1] * w1 : 0);\n      const s = v * (1 + (0.12 * bw * side * (31.5 - x)) / 22);\n      const i = y * W + x;\n      FR[i] = FR[i] * (1 - a) + r * LR[x] * s;\n      FG[i] = FG[i] * (1 - a) + g * LG[x] * s;\n      FB[i] = FB[i] * (1 - a) + b * LB[x] * s;\n    }\n  }\n\n  const put = (x, y, c, f, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const i = y * W + x;\n    const s = f * vy(y) * a;\n    FR[i] = FR[i] * (1 - a) + c[0] * LR[x] * s;\n    FG[i] = FG[i] * (1 - a) + c[1] * LG[x] * s;\n    FB[i] = FB[i] * (1 - a) + c[2] * LB[x] * s;\n  };\n  // The nail, the cord to two rings on the rod, and the rod.\n  for (let y = 4; y \u003c 15; y++)\n    for (const ex of [20.5, 43.5]) {\n      const x = mix(31.5, ex, (y - 4) / 10.5) - 0.5;\n      const x0 = floor(x);\n      put(x0, y, CORD, 1, 1 - (x - x0));\n      put(x0 + 1, y, CORD, 1, x - x0);\n    }\n  for (const [x, y, f] of [[31, 2, 1.25], [32, 2, 0.8], [31, 3, 0.8], [32, 3, 0.55], [20, 14, 1.1], [43, 14, 1.1]]) put(x, y, BRASS, f);\n  for (let x = MX - 1; x \u003c= MX + MW; x++) {\n    const e = x \u003c MX || x >= MX + MW ? 0.75 : 1;\n    put(x, 15, WOOD, 1.3 * e);\n    put(x, 16, WOOD, 0.7 * e);\n  }\n\n  // The roller and the rolled scroll on it, turning as it goes, with a knob\n  // of bone at each end standing proud of the roll.\n  const dxr = th * (yc - NAIL);\n  const rolled = 1 - P.u;\n  const ang = (rolled * LEN) / (dia / 2);\n  const seam = cos(ang) > 0.2 && rolled > 0.02 ? sin(ang) : 9;\n  const rc = [0, 1, 2].map((k) => mix(SILK[k], BACK[k], sm(0, 0.3, rolled)));\n  for (let y = floor(yc - 3.6); y \u003c= yc + 3.6; y++) {\n    const yy = y + 0.5 - yc;\n    const v = yy / (dia / 2);\n    const vk = yy / 3.4;\n    for (let x = MX - 5; x \u003c MX + MW + 5; x++) {\n      const px = x + 0.5 - dxr;\n      const kx = px \u003c MX ? MX - px : px - MX - MW;\n      if (kx \u003c 0) {\n        const a = cl(dia / 2 - abs(yy) + 0.5, 0, 1) * cl(0.5 - kx, 0, 1);\n        if (a \u003c= 0) continue;\n        const n = sqrt(max(0, 1 - v * v));\n        put(x, y, rc, (0.25 + 0.75 * n * (0.8 - 0.35 * v)) * (abs(v - seam) \u003c 0.3 ? 0.6 : 1), a);\n      } else if (kx \u003c 4.6) {\n        const e = 3.4 * sqrt(max(0, 1 - (kx / 4.4) ** 4));\n        const a = cl(e - abs(yy) + 0.5, 0, 1);\n        if (a \u003c= 0) continue;\n        const n = sqrt(max(0, 1 - vk * vk));\n        const hi = 0.45 * exp(-((vk + 0.45) ** 2) / 0.05);\n        put(x, y, BONE, (0.3 + 0.75 * n * (0.85 - 0.3 * vk) + hi) * (kx \u003c 0.8 ? 0.55 : 1), a);\n      }\n    }\n  }\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, FR[i] * 255), min(255, FG[i] * 255), min(255, FB[i] * 255));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Speed=0.2..3, Painting=0..3, Ink=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"The light on the scroll: a warm candle low on the left turns the paper ivory at 0, and towards 1 it gives way to cool moonlight from a window on the right."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the scroll moves: at 2 the roller takes under three seconds to come down, a painting hangs for seven and the draft swings it about once in two and a half."},{"name":"Painting","min":0,"max":3,"about":"Which painting unrolls next: misty mountains with a waterfall at 0, bamboo in wind at 1, a plum branch under the moon at 2, cranes over waves at 3. Turning it rolls the scroll up and lets that one down."},{"name":"Ink","min":0,"max":1,"about":"How wet the ink was: crisp dry-brush lines with broken edges at 0, washes that bled out into the paper and strokes feathered at their edges at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.177,"detail":0.0295,"edges":0.2326,"complexity":1.3758,"coverage":0.4677,"colour":0.1211,"drift":0.2049},"knobResponse":[0.0845,0.2,0.0646,0.0324]},{"slug":"harmonograph","title":"Harmonograph","family":"line","round":1,"note":"단순한 비에서 조금씩 어긋난 진자 셋이 닫히지 않는 그림을 그리고, 멎어 가며 가운데로 감겨 들어가요.","idea":"Pendulums swinging at almost a simple ratio draw a figure that never quite closes, and as they run down it winds itself into the centre.","buttons":"K1 tap gives the pendulums a fresh push.","code":"// ===== Patternflow pattern =====\n// Title:   Harmonograph\n// Family:  line\n// Idea:    Pendulums swinging at almost a simple ratio draw a figure that never quite closes, and as they run down it winds itself into the centre.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.25..4, Ratio=0..7, Damping=0.02..0.4\n//\n// Knob 1: Hue. The colour of the fresh line; older line turns a little round the wheel as it fades.\n// Knob 2: Speed. How fast the pen travels; a slow pen's line lasts longer.\n// Knob 3: Ratio. Walks the pendulums through 1:2, 2:3, 3:4, 3:5, 1:3, 2:5, 1:4 and 4:5; between two steps the pair drifts further out of tune.\n// Knob 4: Damping. How quickly the swing dies away; low keeps one figure turning for two minutes, high spirals in within seconds.\n// Buttons: K1 tap gives the pendulums a fresh push.\n\nconst W = 64;\nconst H = 128;\nconst RATIOS = [1, 2, 2, 3, 3, 4, 3, 5, 1, 3, 2, 5, 1, 4, 4, 5];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\n// The phosphor: bright fresh line in the chosen hue, fading and turning as it ages.\nfunction buildLut(params, hue) {\n  const lut = params.lut;\n  for (let i = 0; i \u003c 256; i++) {\n    const v = i / 255;\n    hsvInto(lut, i * 3, hue - (1 - v) * 0.14, 0.92 - 0.12 * v * v, Math.pow(v, 1.15));\n  }\n  params.lutHue = hue;\n}\n\nfunction push(params) {\n  params.s = 0;\n  params.amp = 0.88 + Math.random() * 0.12;\n  params.p1 = Math.random() * Math.PI * 2;\n  params.p2 = Math.random() * Math.PI * 2;\n  params.p3 = Math.random() * Math.PI * 2;\n  params.turn = 0.12 + Math.random() * 0.16;\n  params.sign = Math.random() \u003c 0.5 ? -1 : 1;\n}\n\nexport function setup(params) {\n  params.buf = new Float32Array(W * H);\n  params.lut = new Float32Array(256 * 3);\n  params.lutHue = -1;\n  params.pen = new Float32Array(2);\n  params.head = new Float32Array(3);\n  params.hue = 0;\n  params.warm = false;\n  push(params);\n}\n\n// Where the pen is after s seconds of swing.\nfunction penAt(params, s, out) {\n  const w = params.w;\n  const d = Math.exp(-params.damp * s) * params.amp;\n  const a = params.fa * w;\n  const b = params.fb * w;\n  const r = a * (1 + params.detune * params.sign);\n  const t = params.turn;\n  // Lateral pendulums along y and x, x a little out of tune with y, and a rotary one\n  // turning the paper at nearly y's rate. The slower pendulum swings along the tall\n  // side, so 1:2 stands up as an eight instead of lying down.\n  const xb = b * (1 - params.detune * 0.5 * params.sign);\n  out[0] = W / 2 - 0.5 + 29.5 * d * ((1 - t) * Math.sin(xb * s + params.p2) + t * Math.cos(r * s + params.p3));\n  out[1] = H / 2 - 0.5 + 60 * d * ((1 - t) * Math.sin(a * s + params.p1) + t * Math.sin(r * s + params.p3));\n}\n\n// A faint wide haze under the line, so it glows rather than sits on the black.\nfunction haze(buf, x, y, v) {\n  const x0 = Math.ceil(x - 2.4);\n  const y0 = Math.ceil(y - 2.4);\n  for (let yy = y0; yy \u003c= y0 + 4; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 4; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = (1 - (dx * dx + dy * dy) / 5.76) * v;\n      const i = yy * W + xx;\n      if (w > buf[i]) buf[i] = w;\n    }\n  }\n}\n\nfunction splat(buf, x, y, v) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = (1 - (dx * dx + dy * dy) / 1.44) * v;\n      const i = yy * W + xx;\n      if (w > buf[i]) buf[i] = w;\n    }\n  }\n}\n\n// Draws the pen's path from swing time s0 to s1. With tau, older stretches come out\n// dimmer, the same as if they had been fading on the panel since the pen passed.\nfunction trace(params, s0, s1, tau) {\n  const buf = params.buf;\n  const pen = params.pen;\n  const n = Math.max(2, Math.ceil((s1 - s0) * 24 * Math.max(params.fa, params.fb) * params.w));\n  penAt(params, s0, pen);\n  let px = pen[0];\n  let py = pen[1];\n  for (let i = 1; i \u003c= n; i++) {\n    const s = s0 + ((s1 - s0) * i) / n;\n    penAt(params, s, pen);\n    const v = tau > 0 ? Math.exp(-(s1 - s) / tau) : 1;\n    const dx = pen[0] - px;\n    const dy = pen[1] - py;\n    const m = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.5));\n    for (let j = 1; j \u003c= m; j++) {\n      const x = px + (dx * j) / m;\n      const y = py + (dy * j) / m;\n      if (j % 2 === 0 || j === m) haze(buf, x, y, 0.18 * v);\n      splat(buf, x, y, v);\n    }\n    px = pen[0];\n    py = pen[1];\n  }\n  params.x = px;\n  params.y = py;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const speed = Math.max(0.05, k[1]);\n  const pick = Math.max(0, Math.min(7, k[2]));\n  const step = Math.round(pick);\n  params.fa = RATIOS[step * 2];\n  params.fb = RATIOS[step * 2 + 1];\n  // On a step the pair is a hair out of tune; halfway to the next it is much further out.\n  params.detune = 0.012 + Math.abs(pick - step) * 0.05;\n  params.damp = k[3] * 0.6;\n  // The faster pendulum swings once a second whatever the ratio, so a busy figure takes longer to draw.\n  params.w = (Math.PI * 2) / Math.max(params.fa, params.fb);\n  dt = Math.min(dt, 0.1);\n  if (params.lutHue !== params.hue) buildLut(params, params.hue);\n  if (input.btnPressed && input.btnPressed[0]) push(params);\n\n  // A slow pen keeps its line longer, so it still lays down a whole figure.\n  const tau = 6 * Math.sqrt(2 / speed);\n  // Speed 2 runs the swing in real time.\n  const sd = (dt * speed) / 2;\n  if (!params.warm) {\n    // Open mid-swing, with the last six seconds of it already on the panel.\n    params.warm = true;\n    trace(params, 0, 6, (tau * speed) / 2);\n    params.s = 6;\n    return;\n  }\n  const buf = params.buf;\n  const fade = Math.exp(-dt / tau);\n  for (let i = 0; i \u003c buf.length; i++) buf[i] *= fade;\n  trace(params, params.s, params.s + sd, 0);\n  params.s += sd;\n  // When the swing has run down to a small knot, push again.\n  if (Math.exp(-params.damp * params.s) * params.amp \u003c 0.2) push(params);\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const v = buf[y * W + x];\n      const i = Math.min(255, Math.floor(v * 255)) * 3;\n      display.setPixel(x, y, lut[i], lut[i + 1], lut[i + 2]);\n    }\n  }\n  // The pen itself, a little paler than its line.\n  const head = params.head;\n  hsvInto(head, 0, params.hue, 0.3, 1);\n  const hx = Math.round(params.x);\n  const hy = Math.round(params.y);\n  if (hx >= 0 && hx \u003c W && hy >= 0 && hy \u003c H) display.setPixel(hx, hy, head[0], head[1], head[2]);\n}\n","layer":{"id":"layer-harmonograph","type":"code","name":"harmonograph","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Harmonograph\n// Family:  line\n// Idea:    Pendulums swinging at almost a simple ratio draw a figure that never quite closes, and as they run down it winds itself into the centre.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.25..4, Ratio=0..7, Damping=0.02..0.4\n//\n// Knob 1: Hue. The colour of the fresh line; older line turns a little round the wheel as it fades.\n// Knob 2: Speed. How fast the pen travels; a slow pen's line lasts longer.\n// Knob 3: Ratio. Walks the pendulums through 1:2, 2:3, 3:4, 3:5, 1:3, 2:5, 1:4 and 4:5; between two steps the pair drifts further out of tune.\n// Knob 4: Damping. How quickly the swing dies away; low keeps one figure turning for two minutes, high spirals in within seconds.\n// Buttons: K1 tap gives the pendulums a fresh push.\n\nconst W = 64;\nconst H = 128;\nconst RATIOS = [1, 2, 2, 3, 3, 4, 3, 5, 1, 3, 2, 5, 1, 4, 4, 5];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\n// The phosphor: bright fresh line in the chosen hue, fading and turning as it ages.\nfunction buildLut(params, hue) {\n  const lut = params.lut;\n  for (let i = 0; i \u003c 256; i++) {\n    const v = i / 255;\n    hsvInto(lut, i * 3, hue - (1 - v) * 0.14, 0.92 - 0.12 * v * v, Math.pow(v, 1.15));\n  }\n  params.lutHue = hue;\n}\n\nfunction push(params) {\n  params.s = 0;\n  params.amp = 0.88 + Math.random() * 0.12;\n  params.p1 = Math.random() * Math.PI * 2;\n  params.p2 = Math.random() * Math.PI * 2;\n  params.p3 = Math.random() * Math.PI * 2;\n  params.turn = 0.12 + Math.random() * 0.16;\n  params.sign = Math.random() \u003c 0.5 ? -1 : 1;\n}\n\nexport function setup(params) {\n  params.buf = new Float32Array(W * H);\n  params.lut = new Float32Array(256 * 3);\n  params.lutHue = -1;\n  params.pen = new Float32Array(2);\n  params.head = new Float32Array(3);\n  params.hue = 0;\n  params.warm = false;\n  push(params);\n}\n\n// Where the pen is after s seconds of swing.\nfunction penAt(params, s, out) {\n  const w = params.w;\n  const d = Math.exp(-params.damp * s) * params.amp;\n  const a = params.fa * w;\n  const b = params.fb * w;\n  const r = a * (1 + params.detune * params.sign);\n  const t = params.turn;\n  // Lateral pendulums along y and x, x a little out of tune with y, and a rotary one\n  // turning the paper at nearly y's rate. The slower pendulum swings along the tall\n  // side, so 1:2 stands up as an eight instead of lying down.\n  const xb = b * (1 - params.detune * 0.5 * params.sign);\n  out[0] = W / 2 - 0.5 + 29.5 * d * ((1 - t) * Math.sin(xb * s + params.p2) + t * Math.cos(r * s + params.p3));\n  out[1] = H / 2 - 0.5 + 60 * d * ((1 - t) * Math.sin(a * s + params.p1) + t * Math.sin(r * s + params.p3));\n}\n\n// A faint wide haze under the line, so it glows rather than sits on the black.\nfunction haze(buf, x, y, v) {\n  const x0 = Math.ceil(x - 2.4);\n  const y0 = Math.ceil(y - 2.4);\n  for (let yy = y0; yy \u003c= y0 + 4; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 4; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = (1 - (dx * dx + dy * dy) / 5.76) * v;\n      const i = yy * W + xx;\n      if (w > buf[i]) buf[i] = w;\n    }\n  }\n}\n\nfunction splat(buf, x, y, v) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = (1 - (dx * dx + dy * dy) / 1.44) * v;\n      const i = yy * W + xx;\n      if (w > buf[i]) buf[i] = w;\n    }\n  }\n}\n\n// Draws the pen's path from swing time s0 to s1. With tau, older stretches come out\n// dimmer, the same as if they had been fading on the panel since the pen passed.\nfunction trace(params, s0, s1, tau) {\n  const buf = params.buf;\n  const pen = params.pen;\n  const n = Math.max(2, Math.ceil((s1 - s0) * 24 * Math.max(params.fa, params.fb) * params.w));\n  penAt(params, s0, pen);\n  let px = pen[0];\n  let py = pen[1];\n  for (let i = 1; i \u003c= n; i++) {\n    const s = s0 + ((s1 - s0) * i) / n;\n    penAt(params, s, pen);\n    const v = tau > 0 ? Math.exp(-(s1 - s) / tau) : 1;\n    const dx = pen[0] - px;\n    const dy = pen[1] - py;\n    const m = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.5));\n    for (let j = 1; j \u003c= m; j++) {\n      const x = px + (dx * j) / m;\n      const y = py + (dy * j) / m;\n      if (j % 2 === 0 || j === m) haze(buf, x, y, 0.18 * v);\n      splat(buf, x, y, v);\n    }\n    px = pen[0];\n    py = pen[1];\n  }\n  params.x = px;\n  params.y = py;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const speed = Math.max(0.05, k[1]);\n  const pick = Math.max(0, Math.min(7, k[2]));\n  const step = Math.round(pick);\n  params.fa = RATIOS[step * 2];\n  params.fb = RATIOS[step * 2 + 1];\n  // On a step the pair is a hair out of tune; halfway to the next it is much further out.\n  params.detune = 0.012 + Math.abs(pick - step) * 0.05;\n  params.damp = k[3] * 0.6;\n  // The faster pendulum swings once a second whatever the ratio, so a busy figure takes longer to draw.\n  params.w = (Math.PI * 2) / Math.max(params.fa, params.fb);\n  dt = Math.min(dt, 0.1);\n  if (params.lutHue !== params.hue) buildLut(params, params.hue);\n  if (input.btnPressed && input.btnPressed[0]) push(params);\n\n  // A slow pen keeps its line longer, so it still lays down a whole figure.\n  const tau = 6 * Math.sqrt(2 / speed);\n  // Speed 2 runs the swing in real time.\n  const sd = (dt * speed) / 2;\n  if (!params.warm) {\n    // Open mid-swing, with the last six seconds of it already on the panel.\n    params.warm = true;\n    trace(params, 0, 6, (tau * speed) / 2);\n    params.s = 6;\n    return;\n  }\n  const buf = params.buf;\n  const fade = Math.exp(-dt / tau);\n  for (let i = 0; i \u003c buf.length; i++) buf[i] *= fade;\n  trace(params, params.s, params.s + sd, 0);\n  params.s += sd;\n  // When the swing has run down to a small knot, push again.\n  if (Math.exp(-params.damp * params.s) * params.amp \u003c 0.2) push(params);\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const v = buf[y * W + x];\n      const i = Math.min(255, Math.floor(v * 255)) * 3;\n      display.setPixel(x, y, lut[i], lut[i + 1], lut[i + 2]);\n    }\n  }\n  // The pen itself, a little paler than its line.\n  const head = params.head;\n  hsvInto(head, 0, params.hue, 0.3, 1);\n  const hx = Math.round(params.x);\n  const hy = Math.round(params.y);\n  if (hx >= 0 && hx \u003c W && hy >= 0 && hy \u003c H) display.setPixel(hx, hy, head[0], head[1], head[2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.25..4, Ratio=0..7, Damping=0.02..0.4","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the fresh line; older line turns a little round the wheel as it fades."},{"name":"Speed","min":0.25,"max":4,"about":"How fast the pen travels; a slow pen's line lasts longer."},{"name":"Ratio","min":0,"max":7,"about":"Walks the pendulums through 1:2, 2:3, 3:4, 3:5, 1:3, 2:5, 1:4 and 4:5; between two steps the pair drifts further out of tune."},{"name":"Damping","min":0.02,"max":0.4,"about":"How quickly the swing dies away; low keeps one figure turning for two minutes, high spirals in within seconds."}],"start":[0,2,0,0.06],"measures":{"motion":0.0325,"detail":0.0469,"edges":0.3334,"complexity":0.8432,"coverage":0.2444,"colour":0.1802,"drift":0.053},"knobResponse":[0.0712,0.0419,0.0758,0.0561]},{"slug":"harp","title":"Harp","family":"music","round":16,"note":"무대에 선 페달 하프가 패널 높이를 다 채우고, 보이지 않는 하프 주자가 뜯은 줄이 렌즈 꼴로 번졌다가 잦아들어요. K3 은 펼친화음, 굴린 화음, 하모닉스, 글리산도 가운데 하나를 고르고, K1 을 누르면 29줄을 다 훑는 글리산도가 올라갔다 내려와요.","idea":"A concert pedal harp stands the full height of the panel, and each string an unseen harpist plucks blurs into the lens of its vibration and rings away, the bass widest and longest.","buttons":"K1 tap is a glissando up all 29 strings and back down. K2 tap changes key a fifth up: a pedal drops a notch and the discs on that note's strings turn.","code":"// ===== Patternflow pattern =====\n// Title:   Harp\n// Family:  music\n// Idea:    A concert pedal harp stands the full height of the panel, and each string an unseen harpist plucks blurs into the lens of its vibration and rings away, the bass widest and longest.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the double-action pedal harp (Sebastien Erard, 1810) and the envelope of a plucked string\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Tempo=0.5..3.5, Figure=0..3, Damp=0..1\n//\n// Knob 1: Light. The colour of the stage light on the backdrop and in the ringing strings, starting from a deep blue behind the gilt harp.\n// Knob 2: Tempo. Beats a second: 2 is 120 to the minute, 0.5 is 30 and 3.5 is 210.\n// Knob 3: Figure. What the harpist plays: 0 broken chords rising across the strings with a rolled chord and a glissando at each cadence, 1 rolled chords in both hands, 2 a tune in harmonics, each string ringing in two halves around a still middle, 3 pedal glissandi up and down every bar over the bass.\n// Knob 4: Damp. At the start the strings ring freely, the bass for three seconds; turned up, the left hand stops the bass at each change of chord, and at 1 the palm stops every note as soon as it sounds.\n// Buttons: K1 tap is a glissando up all 29 strings and back down. K2 tap changes key a fifth up: a pedal drops a notch and the discs on that note's strings turn.\n\nconst W = 64;\nconst H = 128;\n// 29 strings from C2 to C6, one LED wide with one LED between them: string i\n// stands in column 5 + 2i. A concert harp has 47, from C1 to G7; the panel\n// holds four octaves and a C.\nconst NS = 29;\nconst SX0 = 5;\n// The underside and the top of the neck, as points the curve passes through.\n// It rises a little off the column, sags over the tenor strings and climbs\n// again to the shoulder: the harmonic curve.\nconst NECK_UNDER = [[0, 12.5], [4, 12.5], [8, 12], [14, 13], [22, 16.5], [30, 20.5], [38, 23.5], [45, 24.5], [51, 23.5], [56, 20.5], [60, 16.5], [63, 14], [67, 13]];\nconst NECK_TOP = [[0, 4], [4, 4], [8, 4], [14, 5.5], [22, 9.5], [30, 14], [38, 17.5], [45, 18.5], [51, 17.5], [56, 14], [59, 11], [61.5, 9.5], [64, 9.5], [67, 11]];\n// The soundboard is straight, from the foot of C2 to the foot of C6.\nconst SB_X0 = 5;\nconst SB_Y0 = 116;\nconst SB_X1 = 61;\nconst SB_Y1 = 27;\n// The base: its top, its bottom, and its back end.\nconst BASE_TOP = 116;\nconst BASE_BOT = 124;\nconst BASE_X1 = 26;\n// The seven pedals in their slots, as the harpist's feet meet them: D C B on\n// the left, E F G A on the right. Up is flat, the middle notch natural, down sharp.\nconst PEDAL_NOTE = [1, 0, 6, 2, 3, 4, 5];\nconst PEDAL_X = [4, 7, 10, 15, 18, 21, 24];\n// Keys a fifth apart add a sharp in this order and take a flat in the other.\nconst SHARPS = [3, 0, 4, 1, 5, 2, 6];\n// Four bars to a phrase, as chords on scale degrees counted from 0. In minor\n// the seventh is raised, so V is major and III and VII are left out.\nconst PROG_MAJOR = [[0, 5, 3, 4], [0, 3, 4, 4], [0, 5, 1, 4], [0, 2, 3, 4], [3, 4, 0, 4], [0, 4, 5, 4]];\nconst PROG_MINOR = [[0, 5, 3, 4], [0, 3, 4, 4], [0, 3, 5, 4], [5, 3, 4, 4]];\n// Broken-chord shapes, as steps up the chord's strings from the bass root,\n// and the beat each note takes: rising eighths, a rise and fall in triplets,\n// and a rocking figure that leaves the bass and swings in the treble.\nconst ARPS = [[[0, 2, 3, 4, 5, 6, 7, 8], 0.5], [[0, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6], 1 / 3], [[0, 4, 6, 7, 9, 7, 6, 4], 0.5]];\n// The tune in harmonics: rhythms for a bar, in beats.\nconst TUNES = [[2, 1, 1], [1, 1, 2], [1, 1, 1, 1], [3, 1], [2, 2]];\n// How much of a string's light the LED either side of it catches.\nconst GLOW = 0.3;\n// Brass for the discs and pedals, and the flash of a disc as it turns.\nconst BRASS = [205, 160, 70];\nconst GLINT = [50, 80, 120];\n// A string at rest, as a share of its full colour; the edges of a ringing\n// string's blur against its flash; and the stage-lit halo round it.\nconst IDLE = 0.38;\nconst EDGE = 1.05;\nconst HALO = 0.3;\n\nfunction hsvInto(out, h, s, v) {\n  for (let c = 0; c \u003c 3; c++) {\n    const k = (5 - 2 * c + 6 * (h - Math.floor(h))) % 6;\n    out[c] = 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\n// A Catmull-Rom curve through the points, read off at every column.\nfunction catmull(a, b, c, d, t) {\n  return 0.5 * (2 * b + (c - a) * t + (2 * a - 5 * b + 4 * c - d) * t * t + (3 * b - a - 3 * c + d) * t * t * t);\n}\n\nfunction curve(pts) {\n  const out = new Float32Array(W);\n  let px = pts[0][0];\n  let py = pts[0][1];\n  for (let k = 0; k \u003c pts.length - 1; k++) {\n    const p = [pts[Math.max(0, k - 1)], pts[k], pts[k + 1], pts[Math.min(pts.length - 1, k + 2)]];\n    for (let s = 1; s \u003c= 32; s++) {\n      const x = catmull(p[0][0], p[1][0], p[2][0], p[3][0], s / 32);\n      const y = catmull(p[0][1], p[1][1], p[2][1], p[3][1], s / 32);\n      for (let c = Math.max(0, Math.ceil(px)); c \u003c= Math.floor(x) && c \u003c W; c++) out[c] = py + ((y - py) * (c - px)) / (x - px);\n      px = x;\n      py = y;\n    }\n  }\n  return out;\n}\n\nfunction boardY(x) {\n  return SB_Y0 + ((x - SB_X0) * (SB_Y1 - SB_Y0)) / (SB_X1 - SB_X0);\n}\n\n// Paints one LED of the frame over what is there, with coverage a.\nfunction paint(P, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  if (a > 1) a = 1;\n  const p = y * W + x;\n  const o = p * 3;\n  const fr = P.frame;\n  fr[o] = r * a + fr[o] * (1 - a);\n  fr[o + 1] = g * a + fr[o + 1] * (1 - a);\n  fr[o + 2] = b * a + fr[o + 2] * (1 - a);\n  P.alpha[p] = a + P.alpha[p] * (1 - a);\n}\n\nfunction gilt(P, x, y, f, a) {\n  paint(P, x, y, 225 * f, 172 * f, 70 * f, a);\n}\n\n// The crown on top of the column, carved and gilded, from the finial down\n// through the abacus, a pair of volutes and hanging leaves to the collar: 3 is\n// a highlight, 2 gold, 1 shadow gold, 0 a deep cut, blank is open.\nconst CROWN = [\"  121  \", \"  232  \", \" 12321 \", \"1233332\", \"0111110\", \"2302032\", \"1233321\", \"0122210\", \" 12321 \", \" 01210 \", \" 1221  \"];\n\nfunction buildFrame(P) {\n  const under = P.under;\n  const top = P.top;\n  // The soundbox, seen from the side: its flank tapers from 18 LEDs deep at\n  // the base to 3 at the shoulder, and the back is built of staves, whose\n  // seams show as lines that close in towards the top.\n  const len = Math.hypot(SB_X0 - SB_X1, SB_Y0 - SB_Y1);\n  const ux = (SB_X0 - SB_X1) / len;\n  const uy = (SB_Y0 - SB_Y1) / len;\n  for (let y = 0; y \u003c BASE_TOP; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const vx = x + 0.5 - SB_X1;\n      const vy = y + 0.5 - SB_Y1;\n      // s runs down the soundboard from the shoulder, d out from it into the box.\n      const s = (vx * ux + vy * uy) / len;\n      const d = vx * uy - vy * ux;\n      if (s \u003c -0.15 || d \u003c -1) continue;\n      const D = 3 + 15 * s;\n      const a = clamp01(d + 0.6) * clamp01(D - d + 0.5);\n      if (a \u003c= 0) continue;\n      const q = clamp01((d - 1) / Math.max(1, D - 1));\n      let f = 0.92 - 0.55 * q * q;\n      for (const seam of [0.42, 0.68, 0.87]) f *= 1 - 0.4 * Math.exp(-3 * ((q - seam) * D) ** 2);\n      // Maple, its grain running along the box.\n      f *= 0.93 + 0.07 * Math.sin(s * 140 + q * 7);\n      // The soundboard's edge, pale spruce, along the strings' feet.\n      const e = clamp01(1.7 - d);\n      paint(P, x, y, 165 * f + (228 - 165 * f) * e, 102 * f + (184 - 102 * f) * e, 48 * f + (96 - 48 * f) * e, a);\n    }\n  // The neck: a gilt rim along the top, dark wood with the tuning pins, and\n  // the brass plates of the action along the bottom.\n  for (let x = 3; x \u003c W; x++) {\n    const t = top[x];\n    const u = under[x];\n    for (let y = Math.floor(t); y \u003c= Math.ceil(u); y++) {\n      const a = clamp01(y + 1 - t) * clamp01(u - y);\n      if (a \u003c= 0) continue;\n      const v = (y + 0.5 - t) / (u - t);\n      if (v \u003c 0.2) gilt(P, x, y, 0.95, a);\n      else if (u - y \u003c 2.2) paint(P, x, y, ...BRASS.map((c) => c * (u - y \u003c 1.2 ? 0.54 : 0.72)), a);\n      else paint(P, x, y, 92 * (1 - 0.35 * v), 52 * (1 - 0.35 * v), 24 * (1 - 0.35 * v), a);\n    }\n    // A tuning pin above every string.\n    if (x >= SX0 && (x - SX0) % 2 === 0 && x \u003c= SX0 + 2 * (NS - 1)) paint(P, x, Math.round(u - 3.6), 150, 150, 162, 1);\n  }\n  // The shoulder, where the neck sits on the top of the soundbox.\n  for (let x = 62; x \u003c W; x++)\n    for (let y = Math.floor(under[x]); y \u003c Math.ceil(boardY(x)) + 1; y++) {\n      const f = 0.75 - 0.012 * (y - under[x]);\n      paint(P, x, y, 150 * f, 92 * f, 42 * f, 1);\n    }\n  // A gilt scroll curling on the shoulder.\n  const SCROLL = [[60, 10, 0.7], [61, 9, 1.1], [62, 9, 1.15], [63, 10, 0.95], [63, 11, 0.7], [62, 12, 0.6], [61, 11, 0.45], [62, 11, 1.05]];\n  for (const [x, y, f] of SCROLL) gilt(P, x, y, f, 1);\n  // The column, gilt and round: lit from the front, so the second LED takes\n  // the highlight. Carved leaves hang under the crown and over the foot.\n  const SHADE = [0.55, 1.05, 0.78, 0.42];\n  for (let y = 9; y \u003c BASE_TOP; y++) {\n    let wide = 0;\n    let carve = 0;\n    if (y >= 10 && y \u003c 24) {\n      const ly = (y - 10) % 5;\n      carve = ly \u003c 3 ? 1 : 0;\n      wide = ly === 2 ? 1 : 0;\n    } else if (y === 24 || y === 25 || y === 101 || y === 102) wide = 1;\n    else if (y >= 103 && y \u003c 113) {\n      const ly = (y - 103) % 5;\n      carve = ly > 1 ? 1 : 0;\n      wide = ly === 3 ? 1 : 0;\n    } else if (y >= 113) wide = 2;\n    for (let x = 0; x \u003c 4 + wide; x++) {\n      let f = x \u003c 4 ? SHADE[x] : 0.5;\n      if (carve && x > 0) f *= (x + y) % 2 === 0 ? 1.12 : 0.72;\n      if (y === 24 || y === 101) f *= 1.15;\n      gilt(P, x, y, f, 1);\n    }\n  }\n  for (let y = 0; y \u003c CROWN.length; y++)\n    for (let x = 0; x \u003c CROWN[y].length; x++) {\n      const c = CROWN[y][x];\n      if (c === \" \") continue;\n      gilt(P, x, y, c === \"3\" ? 1.15 : c === \"2\" ? 0.88 : c === \"1\" ? 0.6 : 0.3, 1);\n    }\n  // The base: gilt mouldings above and below dark wood, the pedal slots, and four feet.\n  for (let x = 0; x \u003c= BASE_X1; x++)\n    for (let y = BASE_TOP; y \u003c= BASE_BOT; y++) {\n      if (y > BASE_TOP && y \u003c BASE_BOT) paint(P, x, y, 70, 40, 18, 1);\n      else gilt(P, x, y, y === BASE_TOP ? 0.95 : 0.6, 1);\n    }\n  for (let k = 0; k \u003c 7; k++) for (let y = BASE_TOP + 2; y \u003c= BASE_BOT - 2; y++) paint(P, PEDAL_X[k], y, 16, 10, 6, 1);\n  for (let y = BASE_BOT + 1; y \u003c H - 1; y++)\n    for (let x = 0; x \u003c= BASE_X1; x++) if (x \u003c= 3 || x >= BASE_X1 - 4) gilt(P, x, y, 0.62 - 0.2 * (y - BASE_BOT - 1), 1);\n}\n\nfunction buildStrings(P) {\n  const under = P.under;\n  for (const k of [\"sx\", \"sTop\", \"sBot\", \"disc1\", \"disc2\", \"lenN\", \"tauN\"]) P[k] = new Float32Array(NS);\n  P.col = new Float32Array(NS * 3);\n  let L0 = 0;\n  for (let i = 0; i \u003c NS; i++) {\n    const x = SX0 + 2 * i;\n    P.sx[i] = x;\n    // From the bridge pin under the neck down into the soundboard.\n    P.sTop[i] = under[x] + 0.3;\n    P.sBot[i] = boardY(x);\n    const L = P.sBot[i] - P.sTop[i];\n    if (i === 0) L0 = L;\n    P.lenN[i] = L / L0;\n    // Each disc grips the string a semitone shorter: the natural disc\n    // 1 - 2^(-1/12) of its length below the bridge pin, the sharp 1 - 2^(-1/6).\n    P.disc1[i] = P.sTop[i] + 0.0561 * L;\n    P.disc2[i] = P.sTop[i] + 0.1091 * L;\n    // How long a free string rings, in seconds.\n    P.tauN[i] = 0.42 + 0.85 * P.lenN[i];\n    // Every C red, every F dark blue, the rest gut. The five lowest are\n    // wound wire, bronze, keeping a tint of their colour.\n    const n = i % 7;\n    const c = n === 0 ? [240, 48, 38] : n === 3 ? [38, 62, 215] : [235, 205, 155];\n    const m = i >= 5 ? 0 : n === 0 || n === 3 ? 0.45 : 0.75;\n    const WIRE = [200, 150, 98];\n    for (let k = 0; k \u003c 3; k++) P.col[i * 3 + k] = c[k] + (WIRE[k] - c[k]) * m;\n  }\n}\n\n// Sets the pedals for a key, counted in fifths from C major; the discs of a\n// pedal that moves flash as they turn.\nfunction setKey(P, key, minor) {\n  P.key = key;\n  P.minor = minor;\n  const major = (((4 * key) % 7) + 7) % 7;\n  P.tonic = minor ? (major + 5) % 7 : major;\n  const acc = [0, 0, 0, 0, 0, 0, 0];\n  if (key > 0) for (let k = 0; k \u003c key; k++) acc[SHARPS[k]] = 1;\n  else for (let k = 0; k \u003c -key; k++) acc[SHARPS[6 - k]] = -1;\n  // Harmonic minor raises the seventh: the note under the minor tonic.\n  if (minor) acc[(major + 4) % 7] += 1;\n  for (let n = 0; n \u003c 7; n++)\n    if (acc[n] !== P.pedal[n]) {\n      P.pedal[n] = acc[n];\n      P.discGlint[n] = 1;\n    }\n}\n\nfunction ev(P, at, i, f, kind) {\n  if (i \u003c 0 || i >= NS) return;\n  P.events.push({ at, i, f, kind });\n}\n\nfunction roll(P, at, list, span, f) {\n  for (let k = 0; k \u003c list.length; k++) ev(P, at + (span * k) / Math.max(1, list.length - 1), list[k], f, 0);\n}\n\nfunction gliss(P, at, from, to, span, f) {\n  const n = Math.abs(to - from);\n  const dir = to > from ? 1 : -1;\n  for (let k = 0; k \u003c= n; k++) ev(P, at + (span * k) / Math.max(1, n), from + dir * k, f, 0);\n}\n\nfunction newPhrase(P) {\n  if (P.prog) {\n    const r = Math.random();\n    if (r \u003c 0.2 && P.key \u003c 4) setKey(P, P.key + 1, P.minor);\n    else if (r \u003c 0.35 && P.key > -3) setKey(P, P.key - 1, P.minor);\n    else if (r \u003c 0.55) setKey(P, P.key, !P.minor);\n  }\n  P.prog = pick(P.minor ? PROG_MINOR : PROG_MAJOR);\n  P.style = Math.floor(Math.random() * ARPS.length);\n  P.tune = pick(TUNES);\n  P.phraseBar = 0;\n}\n\n// One bar of music, written from beat `at`.\nfunction compose(P, at, fig) {\n  if (!P.prog || P.phraseBar >= 4) newPhrase(P);\n  const b = P.phraseBar;\n  const r = (P.tonic + P.prog[b]) % 7;\n  const T = [];\n  for (let i = 0; i \u003c NS; i++) if ((i - r + 7) % 7 % 2 === 0 && (i - r + 7) % 7 \u003c 6) T.push(i);\n  const k0 = T.indexOf(r);\n  const tone = (k) => T[Math.min(T.length - 1, k0 + k)];\n  const cad = b === 3;\n  // The left hand damps the bass strings that are not in the new chord.\n  const stop = clamp01((P.damp - 0.12) / 0.4);\n  if (stop > 0)\n    for (let i = 0; i \u003c 14; i++)\n      if (T.indexOf(i) \u003c 0) {\n        P.amp[i] *= 1 - 0.85 * stop;\n        P.glow[i] *= 1 - 0.85 * stop;\n      }\n  if (fig === 0) {\n    if (cad) {\n      roll(P, at, [r, r + 4, r + 7, tone(5), tone(6), tone(7), tone(8)], 0.3, 0.85);\n      gliss(P, at + 2, 3, NS - 1, 1.5, 0.36);\n    } else {\n      const [steps, beat] = ARPS[P.style];\n      for (let n = 0; n \u003c steps.length; n++) ev(P, at + n * beat, tone(steps[n]), n === 0 ? 0.9 : 0.62, 0);\n      // The left hand doubles the root an octave up and takes the fifth on the third beat.\n      ev(P, at + 0.04, r + 7, 0.55, 0);\n      ev(P, at + 2, r + 4, 0.6, 0);\n    }\n  } else if (fig === 1) {\n    roll(P, at, [r, r + 4, r + 7], 0.15, 0.85);\n    roll(P, at + 0.1, [tone(5), tone(6), tone(7), tone(8)], 0.18, 0.7);\n    if (cad) gliss(P, at + 2, NS - 1, 3, 1.5, 0.36);\n    else {\n      roll(P, at + 2, [tone(4), tone(5), tone(6), tone(7)], 0.15, 0.55);\n      roll(P, at + 3, [tone(6), tone(7), tone(8)], 0.12, 0.5);\n    }\n  } else if (fig === 2) {\n    // The left hand breaks the chord under the tune: root, fifth, octave, fifth.\n    ev(P, at, r, 0.7, 0);\n    ev(P, at + 1, r + 4, 0.5, 0);\n    ev(P, at + 2, r + 7, 0.5, 0);\n    ev(P, at + 3, r + 4, 0.45, 0);\n    // Harmonics sound best in the middle of the harp, so the tune keeps to\n    // strings 9 to 22, starting each bar on the chord tone nearest the last note.\n    let p = -99;\n    for (const c of T) if (c >= 9 && c \u003c= 22 && Math.abs(c - P.mel) \u003c Math.abs(p - P.mel)) p = c;\n    const rhythm = cad ? [4] : P.tune;\n    let t = 0;\n    for (let k = 0; k \u003c rhythm.length; k++) {\n      if (k > 0) {\n        const step = Math.random() \u003c 0.7 ? (Math.random() \u003c 0.5 ? -1 : 1) : Math.random() \u003c 0.5 ? -2 : 2;\n        p += step;\n        if (p \u003c 9 || p > 22) p -= 2 * step;\n      }\n      ev(P, at + t, p, 0.95, 1);\n      t += rhythm[k];\n    }\n    P.mel = p;\n  } else {\n    ev(P, at, r, 0.9, 0);\n    ev(P, at + 0.04, r + 7, 0.6, 0);\n    gliss(P, at + 0.25, r + 2, NS - 1, 1.75, 0.4);\n    gliss(P, at + 2, NS - 1, r + 5, 2, 0.34);\n  }\n  P.phraseBar++;\n}\n\nfunction pluck(P, i, f, kind) {\n  const a0 = f * (1.3 + 3.4 * P.lenN[i]) * (kind ? 0.7 : 1);\n  P.amp[i] = Math.max(P.amp[i] * 0.4, a0);\n  P.age[i] = 0;\n  P.mode[i] = kind ? 2 : 1;\n  // Harpists play near the middle of the string; a harmonic is the upper half\n  // plucked while the palm touches the middle.\n  P.pp[i] = kind ? 0.25 : 0.42 + 0.16 * Math.random();\n  P.glow[i] = Math.min(1.2, Math.max(P.glow[i], f));\n  // The same note an octave and two octaves down rings in sympathy, on the\n  // partial that matches: the octave below in two halves, the next in four.\n  for (let m = 2; m \u003c= 4; m *= 2) {\n    const j = i - (m === 2 ? 7 : 14);\n    if (j \u003c 0) break;\n    const s = (0.45 * f * (1.3 + 3.4 * P.lenN[j])) / Math.sqrt(m);\n    if (P.amp[j] \u003c s) {\n      P.amp[j] = s;\n      P.mode[j] = m;\n      P.age[j] = 1;\n      P.glow[j] = Math.max(P.glow[j], 0.25 * f);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.under = curve(NECK_UNDER);\n  params.top = curve(NECK_TOP);\n  for (const k of [\"frame\", \"bg\", \"buf\"]) params[k] = new Float32Array(W * H * 3);\n  params.alpha = new Float32Array(W * H);\n  buildFrame(params);\n  buildStrings(params);\n  params.cw = new Float32Array(32);\n  params.tint = new Float32Array(3);\n  params.lightAt = -1;\n  for (const k of [\"amp\", \"age\", \"pp\", \"mode\", \"glow\"]) params[k] = new Float32Array(NS);\n  for (const k of [\"pedal\", \"pedalPos\", \"discGlint\"]) params[k] = new Float32Array(7);\n  params.events = [];\n  params.beat = 0;\n  params.nextBar = 0;\n  params.prog = null;\n  params.mel = 16;\n  params.light = 0;\n  setKey(params, 0, false);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.light = k[0];\n  P.tempo = Math.max(0.1, k[1]);\n  const fig = Math.max(0, Math.min(3, Math.round(k[2])));\n  P.damp = clamp01(k[3]);\n  P.beat += dt * P.tempo;\n  if (input.btnPressed && input.btnPressed[0]) {\n    const span = 0.9 * P.tempo;\n    gliss(P, P.beat, 0, NS - 1, span, 0.6);\n    gliss(P, P.beat + span + 0.1 * P.tempo, NS - 2, 0, span, 0.5);\n  }\n  if (input.btnPressed && input.btnPressed[1]) setKey(P, P.key >= 4 ? -3 : P.key + 1, P.minor);\n  while (P.nextBar \u003c= P.beat) {\n    compose(P, P.nextBar, fig);\n    P.nextBar += 4;\n  }\n  const evs = P.events;\n  for (let e = evs.length - 1; e >= 0; e--)\n    if (evs[e].at \u003c= P.beat) {\n      const v = evs.splice(e, 1)[0];\n      pluck(P, v.i, v.f, v.kind);\n    }\n  const free = (1 - P.damp) ** 1.5;\n  for (let i = 0; i \u003c NS; i++) {\n    const tau = 0.07 + P.tauN[i] * free;\n    P.amp[i] *= Math.exp(-dt / tau);\n    P.glow[i] *= Math.exp(-dt / (tau * 1.5));\n    P.age[i] += dt;\n  }\n  for (let n = 0; n \u003c 7; n++) {\n    P.discGlint[n] *= Math.exp(-dt / 0.35);\n    P.pedalPos[n] += (P.pedal[n] - P.pedalPos[n]) * Math.min(1, dt * 9);\n  }\n}\n\n// The stage light's hue along the knob: deep blue, violet, magenta and red,\n// then quickly past amber and yellow, which read as brown and olive this dim,\n// to green and teal and back to blue.\nconst GEL = [[0, 0.62], [0.15, 0.76], [0.3, 0.88], [0.46, 0.99], [0.58, 1.3], [0.8, 1.48], [1, 1.62]];\n\nfunction gel(k) {\n  for (let i = 1; i \u003c GEL.length; i++)\n    if (k \u003c= GEL[i][0]) return GEL[i - 1][1] + ((GEL[i][1] - GEL[i - 1][1]) * (k - GEL[i - 1][0])) / (GEL[i][0] - GEL[i - 1][0]);\n  return GEL[GEL.length - 1][1];\n}\n\nfunction backdrop(P) {\n  const bg = P.bg;\n  const tint = P.tint;\n  hsvInto(tint, gel(P.light), 0.78, 1);\n  // A cyclorama lit from the floor and dark at the top, and the stage floor\n  // with a warm pool from the follow spot.\n  const WARM = [255, 222, 175];\n  for (let y = 0; y \u003c H; y++) {\n    const v = clamp01((y - 8) / 118);\n    const lv = y >= H - 2 ? 0.1 : 0.03 + 0.37 * v * v;\n    for (let x = 0; x \u003c W; x++) {\n      const pool = y >= H - 2 ? 0.22 * Math.exp(-((x - 22) * (x - 22)) / 500) : 0;\n      for (let c = 0; c \u003c 3; c++) bg[(y * W + x) * 3 + c] = tint[c] * lv + WARM[c] * pool;\n    }\n  }\n  P.lightAt = P.light;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.lightAt !== P.light) backdrop(P);\n  const buf = P.buf;\n  buf.set(P.bg);\n  const PI = Math.PI;\n  const tint = P.tint;\n  const cw = P.cw;\n  for (let i = 0; i \u003c NS; i++) {\n    const x = P.sx[i];\n    const ci = i * 3;\n    const B = IDLE + 0.7 * P.glow[i];\n    const top = P.sTop[i];\n    const yB = P.sBot[i];\n    const acc = P.pedal[i % 7];\n    const yA = acc \u003c 0 ? top : acc === 0 ? P.disc1[i] : P.disc2[i];\n    const a = P.amp[i];\n    const span = yB - yA;\n    const p = P.pp[i];\n    const kink = Math.exp(-P.age[i] / 0.12);\n    const mode = P.mode[i];\n    for (let y = Math.floor(top); y \u003c Math.ceil(yB); y++) {\n      const cv = Math.min(y + 1, yB) - Math.max(y, top);\n      if (cv \u003c= 0) continue;\n      let L = B * cv;\n      // The wound strings glint along their winding.\n      if (i \u003c 5 && y % 2 === 1) L *= 0.85;\n      const u = (y + 0.5 - yA) / span;\n      let wp = 0;\n      let wn = 0;\n      if (a > 0.05 && u > 0 && u \u003c 1) {\n        if (mode > 1) wp = wn = a * Math.abs(Math.sin(mode * PI * u));\n        else {\n          const sn = Math.sin(PI * u);\n          // Just after the pluck the string is two straight pieces with a corner\n          // where the finger left it, and half a period later the same shape\n          // turned over; the corners round off as the high partials die.\n          const t1 = u \u003c p ? u / p : (1 - u) / (1 - p);\n          const t2 = u \u003c 1 - p ? u / (1 - p) : (1 - u) / p;\n          wp = a * (sn + (t1 - sn) * kink);\n          wn = a * (sn + (t2 - sn) * kink);\n        }\n      }\n      const h = 0.5 * (wp + wn);\n      const c0 = 0.5 * (wp - wn);\n      if (h \u003c 0.04) {\n        addLight(buf, x, y, P.col, ci, L);\n        continue;\n      }\n      // A string swinging from side to side spends most of its time near the\n      // ends of its swing, so the blur is brightest at its two edges. Each LED\n      // takes the share of the swing it holds, squared against the edge's, so\n      // the lens draws as two bright curves with the neighbours seen between.\n      const lo = Math.floor(c0 - h + 0.5);\n      const hi = Math.floor(c0 + h + 0.5);\n      let Fp = 0;\n      let top1 = 0;\n      for (let dx = lo; dx \u003c= hi; dx++) {\n        const z = (dx + 0.5 - c0) / h;\n        const Fz = z >= 1 ? 1 : z \u003c= -1 ? 0 : 0.5 + Math.asin(z) / PI;\n        const cov = Fz - Fp;\n        Fp = Fz;\n        cw[dx - lo] = cov;\n        if (cov > top1) top1 = cov;\n      }\n      L *= EDGE / (top1 * top1);\n      for (let dx = lo; dx \u003c= hi; dx++) {\n        const cov = cw[dx - lo];\n        if (cov > 0) addLight(buf, x + dx, y, P.col, ci, L * cov * cov);\n      }\n      // The ringing string lights the air around it faintly in the stage light.\n      const hl = HALO * P.glow[i] * Math.min(1, h);\n      if (hl > 0.004) {\n        const reach = h + 2.5;\n        const h0 = Math.ceil(c0 - reach);\n        const h1 = Math.floor(c0 + reach);\n        for (let dx = h0; dx \u003c= h1; dx++) {\n          const xx = x + dx;\n          if (xx \u003c 0 || xx >= W) continue;\n          const w = hl * (1 - Math.abs(dx - c0) / (reach + 0.5));\n          for (let c = 0; c \u003c 3; c++) buf[(y * W + xx) * 3 + c] += tint[c] * w;\n        }\n      }\n    }\n  }\n  // The frame goes over the strings.\n  const fr = P.frame;\n  const al = P.alpha;\n  for (let p = 0; p \u003c W * H; p++) if (al[p] > 0) for (let o = p * 3; o \u003c p * 3 + 3; o++) buf[o] = fr[o] + buf[o] * (1 - al[p]);\n  // The discs under the neck: brass, bright where they grip the string, and\n  // flashing as they turn when the pedal for their note moves.\n  for (let i = 0; i \u003c NS; i++) {\n    const n = i % 7;\n    const x = P.sx[i];\n    const gl = P.discGlint[n];\n    for (let k = 0; k \u003c 2; k++) {\n      const y = Math.round(k === 0 ? P.disc1[i] : P.disc2[i]);\n      if (y \u003c= P.under[x] + 0.5) continue;\n      const f = P.pedal[n] >= k ? 1 : 0.55;\n      const o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = BRASS[c] * f + GLINT[c] * gl;\n    }\n  }\n  // The pedals in their notches.\n  for (let k = 0; k \u003c 7; k++) {\n    const n = PEDAL_NOTE[k];\n    const yy = BASE_TOP + 4 + 2 * P.pedalPos[n];\n    const y0 = Math.floor(yy);\n    const fy = yy - y0;\n    const gl = 1.05 + 0.4 * P.discGlint[n];\n    for (let x = PEDAL_X[k]; x \u003c= PEDAL_X[k] + 1; x++)\n      for (let j = 0; j \u003c 2; j++) {\n        const w = j === 0 ? 1 - fy : fy;\n        const o = ((y0 + j) * W + x) * 3;\n        for (let c = 0; c \u003c 3; c++) buf[o + c] += (BRASS[c] * gl - buf[o + c]) * w;\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[o]), knee(buf[o + 1]), knee(buf[o + 2]));\n    }\n}\n\n// Light past 170 rolls off towards 255, so strings ringing together keep their\n// edges instead of clipping into one white patch.\nfunction knee(v) {\n  return v \u003c 170 ? v : 255 - 85 * Math.exp(-(v - 170) / 85);\n}\n\n// A string's light on one LED, and GLOW of it on the LED either side.\nfunction addLight(buf, x, y, col, ci, L) {\n  for (let d = -1; d \u003c= 1; d++) {\n    if (x + d \u003c 0 || x + d >= W) continue;\n    const s = d === 0 ? L : L * GLOW;\n    for (let c = 0; c \u003c 3; c++) buf[(y * W + x + d) * 3 + c] += col[ci + c] * s;\n  }\n}\n","layer":{"id":"layer-harp","type":"code","name":"harp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Harp\n// Family:  music\n// Idea:    A concert pedal harp stands the full height of the panel, and each string an unseen harpist plucks blurs into the lens of its vibration and rings away, the bass widest and longest.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the double-action pedal harp (Sebastien Erard, 1810) and the envelope of a plucked string\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Tempo=0.5..3.5, Figure=0..3, Damp=0..1\n//\n// Knob 1: Light. The colour of the stage light on the backdrop and in the ringing strings, starting from a deep blue behind the gilt harp.\n// Knob 2: Tempo. Beats a second: 2 is 120 to the minute, 0.5 is 30 and 3.5 is 210.\n// Knob 3: Figure. What the harpist plays: 0 broken chords rising across the strings with a rolled chord and a glissando at each cadence, 1 rolled chords in both hands, 2 a tune in harmonics, each string ringing in two halves around a still middle, 3 pedal glissandi up and down every bar over the bass.\n// Knob 4: Damp. At the start the strings ring freely, the bass for three seconds; turned up, the left hand stops the bass at each change of chord, and at 1 the palm stops every note as soon as it sounds.\n// Buttons: K1 tap is a glissando up all 29 strings and back down. K2 tap changes key a fifth up: a pedal drops a notch and the discs on that note's strings turn.\n\nconst W = 64;\nconst H = 128;\n// 29 strings from C2 to C6, one LED wide with one LED between them: string i\n// stands in column 5 + 2i. A concert harp has 47, from C1 to G7; the panel\n// holds four octaves and a C.\nconst NS = 29;\nconst SX0 = 5;\n// The underside and the top of the neck, as points the curve passes through.\n// It rises a little off the column, sags over the tenor strings and climbs\n// again to the shoulder: the harmonic curve.\nconst NECK_UNDER = [[0, 12.5], [4, 12.5], [8, 12], [14, 13], [22, 16.5], [30, 20.5], [38, 23.5], [45, 24.5], [51, 23.5], [56, 20.5], [60, 16.5], [63, 14], [67, 13]];\nconst NECK_TOP = [[0, 4], [4, 4], [8, 4], [14, 5.5], [22, 9.5], [30, 14], [38, 17.5], [45, 18.5], [51, 17.5], [56, 14], [59, 11], [61.5, 9.5], [64, 9.5], [67, 11]];\n// The soundboard is straight, from the foot of C2 to the foot of C6.\nconst SB_X0 = 5;\nconst SB_Y0 = 116;\nconst SB_X1 = 61;\nconst SB_Y1 = 27;\n// The base: its top, its bottom, and its back end.\nconst BASE_TOP = 116;\nconst BASE_BOT = 124;\nconst BASE_X1 = 26;\n// The seven pedals in their slots, as the harpist's feet meet them: D C B on\n// the left, E F G A on the right. Up is flat, the middle notch natural, down sharp.\nconst PEDAL_NOTE = [1, 0, 6, 2, 3, 4, 5];\nconst PEDAL_X = [4, 7, 10, 15, 18, 21, 24];\n// Keys a fifth apart add a sharp in this order and take a flat in the other.\nconst SHARPS = [3, 0, 4, 1, 5, 2, 6];\n// Four bars to a phrase, as chords on scale degrees counted from 0. In minor\n// the seventh is raised, so V is major and III and VII are left out.\nconst PROG_MAJOR = [[0, 5, 3, 4], [0, 3, 4, 4], [0, 5, 1, 4], [0, 2, 3, 4], [3, 4, 0, 4], [0, 4, 5, 4]];\nconst PROG_MINOR = [[0, 5, 3, 4], [0, 3, 4, 4], [0, 3, 5, 4], [5, 3, 4, 4]];\n// Broken-chord shapes, as steps up the chord's strings from the bass root,\n// and the beat each note takes: rising eighths, a rise and fall in triplets,\n// and a rocking figure that leaves the bass and swings in the treble.\nconst ARPS = [[[0, 2, 3, 4, 5, 6, 7, 8], 0.5], [[0, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6], 1 / 3], [[0, 4, 6, 7, 9, 7, 6, 4], 0.5]];\n// The tune in harmonics: rhythms for a bar, in beats.\nconst TUNES = [[2, 1, 1], [1, 1, 2], [1, 1, 1, 1], [3, 1], [2, 2]];\n// How much of a string's light the LED either side of it catches.\nconst GLOW = 0.3;\n// Brass for the discs and pedals, and the flash of a disc as it turns.\nconst BRASS = [205, 160, 70];\nconst GLINT = [50, 80, 120];\n// A string at rest, as a share of its full colour; the edges of a ringing\n// string's blur against its flash; and the stage-lit halo round it.\nconst IDLE = 0.38;\nconst EDGE = 1.05;\nconst HALO = 0.3;\n\nfunction hsvInto(out, h, s, v) {\n  for (let c = 0; c \u003c 3; c++) {\n    const k = (5 - 2 * c + 6 * (h - Math.floor(h))) % 6;\n    out[c] = 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\n// A Catmull-Rom curve through the points, read off at every column.\nfunction catmull(a, b, c, d, t) {\n  return 0.5 * (2 * b + (c - a) * t + (2 * a - 5 * b + 4 * c - d) * t * t + (3 * b - a - 3 * c + d) * t * t * t);\n}\n\nfunction curve(pts) {\n  const out = new Float32Array(W);\n  let px = pts[0][0];\n  let py = pts[0][1];\n  for (let k = 0; k \u003c pts.length - 1; k++) {\n    const p = [pts[Math.max(0, k - 1)], pts[k], pts[k + 1], pts[Math.min(pts.length - 1, k + 2)]];\n    for (let s = 1; s \u003c= 32; s++) {\n      const x = catmull(p[0][0], p[1][0], p[2][0], p[3][0], s / 32);\n      const y = catmull(p[0][1], p[1][1], p[2][1], p[3][1], s / 32);\n      for (let c = Math.max(0, Math.ceil(px)); c \u003c= Math.floor(x) && c \u003c W; c++) out[c] = py + ((y - py) * (c - px)) / (x - px);\n      px = x;\n      py = y;\n    }\n  }\n  return out;\n}\n\nfunction boardY(x) {\n  return SB_Y0 + ((x - SB_X0) * (SB_Y1 - SB_Y0)) / (SB_X1 - SB_X0);\n}\n\n// Paints one LED of the frame over what is there, with coverage a.\nfunction paint(P, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  if (a > 1) a = 1;\n  const p = y * W + x;\n  const o = p * 3;\n  const fr = P.frame;\n  fr[o] = r * a + fr[o] * (1 - a);\n  fr[o + 1] = g * a + fr[o + 1] * (1 - a);\n  fr[o + 2] = b * a + fr[o + 2] * (1 - a);\n  P.alpha[p] = a + P.alpha[p] * (1 - a);\n}\n\nfunction gilt(P, x, y, f, a) {\n  paint(P, x, y, 225 * f, 172 * f, 70 * f, a);\n}\n\n// The crown on top of the column, carved and gilded, from the finial down\n// through the abacus, a pair of volutes and hanging leaves to the collar: 3 is\n// a highlight, 2 gold, 1 shadow gold, 0 a deep cut, blank is open.\nconst CROWN = [\"  121  \", \"  232  \", \" 12321 \", \"1233332\", \"0111110\", \"2302032\", \"1233321\", \"0122210\", \" 12321 \", \" 01210 \", \" 1221  \"];\n\nfunction buildFrame(P) {\n  const under = P.under;\n  const top = P.top;\n  // The soundbox, seen from the side: its flank tapers from 18 LEDs deep at\n  // the base to 3 at the shoulder, and the back is built of staves, whose\n  // seams show as lines that close in towards the top.\n  const len = Math.hypot(SB_X0 - SB_X1, SB_Y0 - SB_Y1);\n  const ux = (SB_X0 - SB_X1) / len;\n  const uy = (SB_Y0 - SB_Y1) / len;\n  for (let y = 0; y \u003c BASE_TOP; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const vx = x + 0.5 - SB_X1;\n      const vy = y + 0.5 - SB_Y1;\n      // s runs down the soundboard from the shoulder, d out from it into the box.\n      const s = (vx * ux + vy * uy) / len;\n      const d = vx * uy - vy * ux;\n      if (s \u003c -0.15 || d \u003c -1) continue;\n      const D = 3 + 15 * s;\n      const a = clamp01(d + 0.6) * clamp01(D - d + 0.5);\n      if (a \u003c= 0) continue;\n      const q = clamp01((d - 1) / Math.max(1, D - 1));\n      let f = 0.92 - 0.55 * q * q;\n      for (const seam of [0.42, 0.68, 0.87]) f *= 1 - 0.4 * Math.exp(-3 * ((q - seam) * D) ** 2);\n      // Maple, its grain running along the box.\n      f *= 0.93 + 0.07 * Math.sin(s * 140 + q * 7);\n      // The soundboard's edge, pale spruce, along the strings' feet.\n      const e = clamp01(1.7 - d);\n      paint(P, x, y, 165 * f + (228 - 165 * f) * e, 102 * f + (184 - 102 * f) * e, 48 * f + (96 - 48 * f) * e, a);\n    }\n  // The neck: a gilt rim along the top, dark wood with the tuning pins, and\n  // the brass plates of the action along the bottom.\n  for (let x = 3; x \u003c W; x++) {\n    const t = top[x];\n    const u = under[x];\n    for (let y = Math.floor(t); y \u003c= Math.ceil(u); y++) {\n      const a = clamp01(y + 1 - t) * clamp01(u - y);\n      if (a \u003c= 0) continue;\n      const v = (y + 0.5 - t) / (u - t);\n      if (v \u003c 0.2) gilt(P, x, y, 0.95, a);\n      else if (u - y \u003c 2.2) paint(P, x, y, ...BRASS.map((c) => c * (u - y \u003c 1.2 ? 0.54 : 0.72)), a);\n      else paint(P, x, y, 92 * (1 - 0.35 * v), 52 * (1 - 0.35 * v), 24 * (1 - 0.35 * v), a);\n    }\n    // A tuning pin above every string.\n    if (x >= SX0 && (x - SX0) % 2 === 0 && x \u003c= SX0 + 2 * (NS - 1)) paint(P, x, Math.round(u - 3.6), 150, 150, 162, 1);\n  }\n  // The shoulder, where the neck sits on the top of the soundbox.\n  for (let x = 62; x \u003c W; x++)\n    for (let y = Math.floor(under[x]); y \u003c Math.ceil(boardY(x)) + 1; y++) {\n      const f = 0.75 - 0.012 * (y - under[x]);\n      paint(P, x, y, 150 * f, 92 * f, 42 * f, 1);\n    }\n  // A gilt scroll curling on the shoulder.\n  const SCROLL = [[60, 10, 0.7], [61, 9, 1.1], [62, 9, 1.15], [63, 10, 0.95], [63, 11, 0.7], [62, 12, 0.6], [61, 11, 0.45], [62, 11, 1.05]];\n  for (const [x, y, f] of SCROLL) gilt(P, x, y, f, 1);\n  // The column, gilt and round: lit from the front, so the second LED takes\n  // the highlight. Carved leaves hang under the crown and over the foot.\n  const SHADE = [0.55, 1.05, 0.78, 0.42];\n  for (let y = 9; y \u003c BASE_TOP; y++) {\n    let wide = 0;\n    let carve = 0;\n    if (y >= 10 && y \u003c 24) {\n      const ly = (y - 10) % 5;\n      carve = ly \u003c 3 ? 1 : 0;\n      wide = ly === 2 ? 1 : 0;\n    } else if (y === 24 || y === 25 || y === 101 || y === 102) wide = 1;\n    else if (y >= 103 && y \u003c 113) {\n      const ly = (y - 103) % 5;\n      carve = ly > 1 ? 1 : 0;\n      wide = ly === 3 ? 1 : 0;\n    } else if (y >= 113) wide = 2;\n    for (let x = 0; x \u003c 4 + wide; x++) {\n      let f = x \u003c 4 ? SHADE[x] : 0.5;\n      if (carve && x > 0) f *= (x + y) % 2 === 0 ? 1.12 : 0.72;\n      if (y === 24 || y === 101) f *= 1.15;\n      gilt(P, x, y, f, 1);\n    }\n  }\n  for (let y = 0; y \u003c CROWN.length; y++)\n    for (let x = 0; x \u003c CROWN[y].length; x++) {\n      const c = CROWN[y][x];\n      if (c === \" \") continue;\n      gilt(P, x, y, c === \"3\" ? 1.15 : c === \"2\" ? 0.88 : c === \"1\" ? 0.6 : 0.3, 1);\n    }\n  // The base: gilt mouldings above and below dark wood, the pedal slots, and four feet.\n  for (let x = 0; x \u003c= BASE_X1; x++)\n    for (let y = BASE_TOP; y \u003c= BASE_BOT; y++) {\n      if (y > BASE_TOP && y \u003c BASE_BOT) paint(P, x, y, 70, 40, 18, 1);\n      else gilt(P, x, y, y === BASE_TOP ? 0.95 : 0.6, 1);\n    }\n  for (let k = 0; k \u003c 7; k++) for (let y = BASE_TOP + 2; y \u003c= BASE_BOT - 2; y++) paint(P, PEDAL_X[k], y, 16, 10, 6, 1);\n  for (let y = BASE_BOT + 1; y \u003c H - 1; y++)\n    for (let x = 0; x \u003c= BASE_X1; x++) if (x \u003c= 3 || x >= BASE_X1 - 4) gilt(P, x, y, 0.62 - 0.2 * (y - BASE_BOT - 1), 1);\n}\n\nfunction buildStrings(P) {\n  const under = P.under;\n  for (const k of [\"sx\", \"sTop\", \"sBot\", \"disc1\", \"disc2\", \"lenN\", \"tauN\"]) P[k] = new Float32Array(NS);\n  P.col = new Float32Array(NS * 3);\n  let L0 = 0;\n  for (let i = 0; i \u003c NS; i++) {\n    const x = SX0 + 2 * i;\n    P.sx[i] = x;\n    // From the bridge pin under the neck down into the soundboard.\n    P.sTop[i] = under[x] + 0.3;\n    P.sBot[i] = boardY(x);\n    const L = P.sBot[i] - P.sTop[i];\n    if (i === 0) L0 = L;\n    P.lenN[i] = L / L0;\n    // Each disc grips the string a semitone shorter: the natural disc\n    // 1 - 2^(-1/12) of its length below the bridge pin, the sharp 1 - 2^(-1/6).\n    P.disc1[i] = P.sTop[i] + 0.0561 * L;\n    P.disc2[i] = P.sTop[i] + 0.1091 * L;\n    // How long a free string rings, in seconds.\n    P.tauN[i] = 0.42 + 0.85 * P.lenN[i];\n    // Every C red, every F dark blue, the rest gut. The five lowest are\n    // wound wire, bronze, keeping a tint of their colour.\n    const n = i % 7;\n    const c = n === 0 ? [240, 48, 38] : n === 3 ? [38, 62, 215] : [235, 205, 155];\n    const m = i >= 5 ? 0 : n === 0 || n === 3 ? 0.45 : 0.75;\n    const WIRE = [200, 150, 98];\n    for (let k = 0; k \u003c 3; k++) P.col[i * 3 + k] = c[k] + (WIRE[k] - c[k]) * m;\n  }\n}\n\n// Sets the pedals for a key, counted in fifths from C major; the discs of a\n// pedal that moves flash as they turn.\nfunction setKey(P, key, minor) {\n  P.key = key;\n  P.minor = minor;\n  const major = (((4 * key) % 7) + 7) % 7;\n  P.tonic = minor ? (major + 5) % 7 : major;\n  const acc = [0, 0, 0, 0, 0, 0, 0];\n  if (key > 0) for (let k = 0; k \u003c key; k++) acc[SHARPS[k]] = 1;\n  else for (let k = 0; k \u003c -key; k++) acc[SHARPS[6 - k]] = -1;\n  // Harmonic minor raises the seventh: the note under the minor tonic.\n  if (minor) acc[(major + 4) % 7] += 1;\n  for (let n = 0; n \u003c 7; n++)\n    if (acc[n] !== P.pedal[n]) {\n      P.pedal[n] = acc[n];\n      P.discGlint[n] = 1;\n    }\n}\n\nfunction ev(P, at, i, f, kind) {\n  if (i \u003c 0 || i >= NS) return;\n  P.events.push({ at, i, f, kind });\n}\n\nfunction roll(P, at, list, span, f) {\n  for (let k = 0; k \u003c list.length; k++) ev(P, at + (span * k) / Math.max(1, list.length - 1), list[k], f, 0);\n}\n\nfunction gliss(P, at, from, to, span, f) {\n  const n = Math.abs(to - from);\n  const dir = to > from ? 1 : -1;\n  for (let k = 0; k \u003c= n; k++) ev(P, at + (span * k) / Math.max(1, n), from + dir * k, f, 0);\n}\n\nfunction newPhrase(P) {\n  if (P.prog) {\n    const r = Math.random();\n    if (r \u003c 0.2 && P.key \u003c 4) setKey(P, P.key + 1, P.minor);\n    else if (r \u003c 0.35 && P.key > -3) setKey(P, P.key - 1, P.minor);\n    else if (r \u003c 0.55) setKey(P, P.key, !P.minor);\n  }\n  P.prog = pick(P.minor ? PROG_MINOR : PROG_MAJOR);\n  P.style = Math.floor(Math.random() * ARPS.length);\n  P.tune = pick(TUNES);\n  P.phraseBar = 0;\n}\n\n// One bar of music, written from beat `at`.\nfunction compose(P, at, fig) {\n  if (!P.prog || P.phraseBar >= 4) newPhrase(P);\n  const b = P.phraseBar;\n  const r = (P.tonic + P.prog[b]) % 7;\n  const T = [];\n  for (let i = 0; i \u003c NS; i++) if ((i - r + 7) % 7 % 2 === 0 && (i - r + 7) % 7 \u003c 6) T.push(i);\n  const k0 = T.indexOf(r);\n  const tone = (k) => T[Math.min(T.length - 1, k0 + k)];\n  const cad = b === 3;\n  // The left hand damps the bass strings that are not in the new chord.\n  const stop = clamp01((P.damp - 0.12) / 0.4);\n  if (stop > 0)\n    for (let i = 0; i \u003c 14; i++)\n      if (T.indexOf(i) \u003c 0) {\n        P.amp[i] *= 1 - 0.85 * stop;\n        P.glow[i] *= 1 - 0.85 * stop;\n      }\n  if (fig === 0) {\n    if (cad) {\n      roll(P, at, [r, r + 4, r + 7, tone(5), tone(6), tone(7), tone(8)], 0.3, 0.85);\n      gliss(P, at + 2, 3, NS - 1, 1.5, 0.36);\n    } else {\n      const [steps, beat] = ARPS[P.style];\n      for (let n = 0; n \u003c steps.length; n++) ev(P, at + n * beat, tone(steps[n]), n === 0 ? 0.9 : 0.62, 0);\n      // The left hand doubles the root an octave up and takes the fifth on the third beat.\n      ev(P, at + 0.04, r + 7, 0.55, 0);\n      ev(P, at + 2, r + 4, 0.6, 0);\n    }\n  } else if (fig === 1) {\n    roll(P, at, [r, r + 4, r + 7], 0.15, 0.85);\n    roll(P, at + 0.1, [tone(5), tone(6), tone(7), tone(8)], 0.18, 0.7);\n    if (cad) gliss(P, at + 2, NS - 1, 3, 1.5, 0.36);\n    else {\n      roll(P, at + 2, [tone(4), tone(5), tone(6), tone(7)], 0.15, 0.55);\n      roll(P, at + 3, [tone(6), tone(7), tone(8)], 0.12, 0.5);\n    }\n  } else if (fig === 2) {\n    // The left hand breaks the chord under the tune: root, fifth, octave, fifth.\n    ev(P, at, r, 0.7, 0);\n    ev(P, at + 1, r + 4, 0.5, 0);\n    ev(P, at + 2, r + 7, 0.5, 0);\n    ev(P, at + 3, r + 4, 0.45, 0);\n    // Harmonics sound best in the middle of the harp, so the tune keeps to\n    // strings 9 to 22, starting each bar on the chord tone nearest the last note.\n    let p = -99;\n    for (const c of T) if (c >= 9 && c \u003c= 22 && Math.abs(c - P.mel) \u003c Math.abs(p - P.mel)) p = c;\n    const rhythm = cad ? [4] : P.tune;\n    let t = 0;\n    for (let k = 0; k \u003c rhythm.length; k++) {\n      if (k > 0) {\n        const step = Math.random() \u003c 0.7 ? (Math.random() \u003c 0.5 ? -1 : 1) : Math.random() \u003c 0.5 ? -2 : 2;\n        p += step;\n        if (p \u003c 9 || p > 22) p -= 2 * step;\n      }\n      ev(P, at + t, p, 0.95, 1);\n      t += rhythm[k];\n    }\n    P.mel = p;\n  } else {\n    ev(P, at, r, 0.9, 0);\n    ev(P, at + 0.04, r + 7, 0.6, 0);\n    gliss(P, at + 0.25, r + 2, NS - 1, 1.75, 0.4);\n    gliss(P, at + 2, NS - 1, r + 5, 2, 0.34);\n  }\n  P.phraseBar++;\n}\n\nfunction pluck(P, i, f, kind) {\n  const a0 = f * (1.3 + 3.4 * P.lenN[i]) * (kind ? 0.7 : 1);\n  P.amp[i] = Math.max(P.amp[i] * 0.4, a0);\n  P.age[i] = 0;\n  P.mode[i] = kind ? 2 : 1;\n  // Harpists play near the middle of the string; a harmonic is the upper half\n  // plucked while the palm touches the middle.\n  P.pp[i] = kind ? 0.25 : 0.42 + 0.16 * Math.random();\n  P.glow[i] = Math.min(1.2, Math.max(P.glow[i], f));\n  // The same note an octave and two octaves down rings in sympathy, on the\n  // partial that matches: the octave below in two halves, the next in four.\n  for (let m = 2; m \u003c= 4; m *= 2) {\n    const j = i - (m === 2 ? 7 : 14);\n    if (j \u003c 0) break;\n    const s = (0.45 * f * (1.3 + 3.4 * P.lenN[j])) / Math.sqrt(m);\n    if (P.amp[j] \u003c s) {\n      P.amp[j] = s;\n      P.mode[j] = m;\n      P.age[j] = 1;\n      P.glow[j] = Math.max(P.glow[j], 0.25 * f);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.under = curve(NECK_UNDER);\n  params.top = curve(NECK_TOP);\n  for (const k of [\"frame\", \"bg\", \"buf\"]) params[k] = new Float32Array(W * H * 3);\n  params.alpha = new Float32Array(W * H);\n  buildFrame(params);\n  buildStrings(params);\n  params.cw = new Float32Array(32);\n  params.tint = new Float32Array(3);\n  params.lightAt = -1;\n  for (const k of [\"amp\", \"age\", \"pp\", \"mode\", \"glow\"]) params[k] = new Float32Array(NS);\n  for (const k of [\"pedal\", \"pedalPos\", \"discGlint\"]) params[k] = new Float32Array(7);\n  params.events = [];\n  params.beat = 0;\n  params.nextBar = 0;\n  params.prog = null;\n  params.mel = 16;\n  params.light = 0;\n  setKey(params, 0, false);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.light = k[0];\n  P.tempo = Math.max(0.1, k[1]);\n  const fig = Math.max(0, Math.min(3, Math.round(k[2])));\n  P.damp = clamp01(k[3]);\n  P.beat += dt * P.tempo;\n  if (input.btnPressed && input.btnPressed[0]) {\n    const span = 0.9 * P.tempo;\n    gliss(P, P.beat, 0, NS - 1, span, 0.6);\n    gliss(P, P.beat + span + 0.1 * P.tempo, NS - 2, 0, span, 0.5);\n  }\n  if (input.btnPressed && input.btnPressed[1]) setKey(P, P.key >= 4 ? -3 : P.key + 1, P.minor);\n  while (P.nextBar \u003c= P.beat) {\n    compose(P, P.nextBar, fig);\n    P.nextBar += 4;\n  }\n  const evs = P.events;\n  for (let e = evs.length - 1; e >= 0; e--)\n    if (evs[e].at \u003c= P.beat) {\n      const v = evs.splice(e, 1)[0];\n      pluck(P, v.i, v.f, v.kind);\n    }\n  const free = (1 - P.damp) ** 1.5;\n  for (let i = 0; i \u003c NS; i++) {\n    const tau = 0.07 + P.tauN[i] * free;\n    P.amp[i] *= Math.exp(-dt / tau);\n    P.glow[i] *= Math.exp(-dt / (tau * 1.5));\n    P.age[i] += dt;\n  }\n  for (let n = 0; n \u003c 7; n++) {\n    P.discGlint[n] *= Math.exp(-dt / 0.35);\n    P.pedalPos[n] += (P.pedal[n] - P.pedalPos[n]) * Math.min(1, dt * 9);\n  }\n}\n\n// The stage light's hue along the knob: deep blue, violet, magenta and red,\n// then quickly past amber and yellow, which read as brown and olive this dim,\n// to green and teal and back to blue.\nconst GEL = [[0, 0.62], [0.15, 0.76], [0.3, 0.88], [0.46, 0.99], [0.58, 1.3], [0.8, 1.48], [1, 1.62]];\n\nfunction gel(k) {\n  for (let i = 1; i \u003c GEL.length; i++)\n    if (k \u003c= GEL[i][0]) return GEL[i - 1][1] + ((GEL[i][1] - GEL[i - 1][1]) * (k - GEL[i - 1][0])) / (GEL[i][0] - GEL[i - 1][0]);\n  return GEL[GEL.length - 1][1];\n}\n\nfunction backdrop(P) {\n  const bg = P.bg;\n  const tint = P.tint;\n  hsvInto(tint, gel(P.light), 0.78, 1);\n  // A cyclorama lit from the floor and dark at the top, and the stage floor\n  // with a warm pool from the follow spot.\n  const WARM = [255, 222, 175];\n  for (let y = 0; y \u003c H; y++) {\n    const v = clamp01((y - 8) / 118);\n    const lv = y >= H - 2 ? 0.1 : 0.03 + 0.37 * v * v;\n    for (let x = 0; x \u003c W; x++) {\n      const pool = y >= H - 2 ? 0.22 * Math.exp(-((x - 22) * (x - 22)) / 500) : 0;\n      for (let c = 0; c \u003c 3; c++) bg[(y * W + x) * 3 + c] = tint[c] * lv + WARM[c] * pool;\n    }\n  }\n  P.lightAt = P.light;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.lightAt !== P.light) backdrop(P);\n  const buf = P.buf;\n  buf.set(P.bg);\n  const PI = Math.PI;\n  const tint = P.tint;\n  const cw = P.cw;\n  for (let i = 0; i \u003c NS; i++) {\n    const x = P.sx[i];\n    const ci = i * 3;\n    const B = IDLE + 0.7 * P.glow[i];\n    const top = P.sTop[i];\n    const yB = P.sBot[i];\n    const acc = P.pedal[i % 7];\n    const yA = acc \u003c 0 ? top : acc === 0 ? P.disc1[i] : P.disc2[i];\n    const a = P.amp[i];\n    const span = yB - yA;\n    const p = P.pp[i];\n    const kink = Math.exp(-P.age[i] / 0.12);\n    const mode = P.mode[i];\n    for (let y = Math.floor(top); y \u003c Math.ceil(yB); y++) {\n      const cv = Math.min(y + 1, yB) - Math.max(y, top);\n      if (cv \u003c= 0) continue;\n      let L = B * cv;\n      // The wound strings glint along their winding.\n      if (i \u003c 5 && y % 2 === 1) L *= 0.85;\n      const u = (y + 0.5 - yA) / span;\n      let wp = 0;\n      let wn = 0;\n      if (a > 0.05 && u > 0 && u \u003c 1) {\n        if (mode > 1) wp = wn = a * Math.abs(Math.sin(mode * PI * u));\n        else {\n          const sn = Math.sin(PI * u);\n          // Just after the pluck the string is two straight pieces with a corner\n          // where the finger left it, and half a period later the same shape\n          // turned over; the corners round off as the high partials die.\n          const t1 = u \u003c p ? u / p : (1 - u) / (1 - p);\n          const t2 = u \u003c 1 - p ? u / (1 - p) : (1 - u) / p;\n          wp = a * (sn + (t1 - sn) * kink);\n          wn = a * (sn + (t2 - sn) * kink);\n        }\n      }\n      const h = 0.5 * (wp + wn);\n      const c0 = 0.5 * (wp - wn);\n      if (h \u003c 0.04) {\n        addLight(buf, x, y, P.col, ci, L);\n        continue;\n      }\n      // A string swinging from side to side spends most of its time near the\n      // ends of its swing, so the blur is brightest at its two edges. Each LED\n      // takes the share of the swing it holds, squared against the edge's, so\n      // the lens draws as two bright curves with the neighbours seen between.\n      const lo = Math.floor(c0 - h + 0.5);\n      const hi = Math.floor(c0 + h + 0.5);\n      let Fp = 0;\n      let top1 = 0;\n      for (let dx = lo; dx \u003c= hi; dx++) {\n        const z = (dx + 0.5 - c0) / h;\n        const Fz = z >= 1 ? 1 : z \u003c= -1 ? 0 : 0.5 + Math.asin(z) / PI;\n        const cov = Fz - Fp;\n        Fp = Fz;\n        cw[dx - lo] = cov;\n        if (cov > top1) top1 = cov;\n      }\n      L *= EDGE / (top1 * top1);\n      for (let dx = lo; dx \u003c= hi; dx++) {\n        const cov = cw[dx - lo];\n        if (cov > 0) addLight(buf, x + dx, y, P.col, ci, L * cov * cov);\n      }\n      // The ringing string lights the air around it faintly in the stage light.\n      const hl = HALO * P.glow[i] * Math.min(1, h);\n      if (hl > 0.004) {\n        const reach = h + 2.5;\n        const h0 = Math.ceil(c0 - reach);\n        const h1 = Math.floor(c0 + reach);\n        for (let dx = h0; dx \u003c= h1; dx++) {\n          const xx = x + dx;\n          if (xx \u003c 0 || xx >= W) continue;\n          const w = hl * (1 - Math.abs(dx - c0) / (reach + 0.5));\n          for (let c = 0; c \u003c 3; c++) buf[(y * W + xx) * 3 + c] += tint[c] * w;\n        }\n      }\n    }\n  }\n  // The frame goes over the strings.\n  const fr = P.frame;\n  const al = P.alpha;\n  for (let p = 0; p \u003c W * H; p++) if (al[p] > 0) for (let o = p * 3; o \u003c p * 3 + 3; o++) buf[o] = fr[o] + buf[o] * (1 - al[p]);\n  // The discs under the neck: brass, bright where they grip the string, and\n  // flashing as they turn when the pedal for their note moves.\n  for (let i = 0; i \u003c NS; i++) {\n    const n = i % 7;\n    const x = P.sx[i];\n    const gl = P.discGlint[n];\n    for (let k = 0; k \u003c 2; k++) {\n      const y = Math.round(k === 0 ? P.disc1[i] : P.disc2[i]);\n      if (y \u003c= P.under[x] + 0.5) continue;\n      const f = P.pedal[n] >= k ? 1 : 0.55;\n      const o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = BRASS[c] * f + GLINT[c] * gl;\n    }\n  }\n  // The pedals in their notches.\n  for (let k = 0; k \u003c 7; k++) {\n    const n = PEDAL_NOTE[k];\n    const yy = BASE_TOP + 4 + 2 * P.pedalPos[n];\n    const y0 = Math.floor(yy);\n    const fy = yy - y0;\n    const gl = 1.05 + 0.4 * P.discGlint[n];\n    for (let x = PEDAL_X[k]; x \u003c= PEDAL_X[k] + 1; x++)\n      for (let j = 0; j \u003c 2; j++) {\n        const w = j === 0 ? 1 - fy : fy;\n        const o = ((y0 + j) * W + x) * 3;\n        for (let c = 0; c \u003c 3; c++) buf[o + c] += (BRASS[c] * gl - buf[o + c]) * w;\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[o]), knee(buf[o + 1]), knee(buf[o + 2]));\n    }\n}\n\n// Light past 170 rolls off towards 255, so strings ringing together keep their\n// edges instead of clipping into one white patch.\nfunction knee(v) {\n  return v \u003c 170 ? v : 255 - 85 * Math.exp(-(v - 170) / 85);\n}\n\n// A string's light on one LED, and GLOW of it on the LED either side.\nfunction addLight(buf, x, y, col, ci, L) {\n  for (let d = -1; d \u003c= 1; d++) {\n    if (x + d \u003c 0 || x + d >= W) continue;\n    const s = d === 0 ? L : L * GLOW;\n    for (let c = 0; c \u003c 3; c++) buf[(y * W + x + d) * 3 + c] += col[ci + c] * s;\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Tempo=0.5..3.5, Figure=0..3, Damp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The colour of the stage light on the backdrop and in the ringing strings, starting from a deep blue behind the gilt harp."},{"name":"Tempo","min":0.5,"max":3.5,"about":"Beats a second: 2 is 120 to the minute, 0.5 is 30 and 3.5 is 210."},{"name":"Figure","min":0,"max":3,"about":"What the harpist plays: 0 broken chords rising across the strings with a rolled chord and a glissando at each cadence, 1 rolled chords in both hands, 2 a tune in harmonics, each string ringing in two halves around a still middle, 3 pedal glissandi up and down every bar over the bass."},{"name":"Damp","min":0,"max":1,"about":"At the start the strings ring freely, the bass for three seconds; turned up, the left hand stops the bass at each change of chord, and at 1 the palm stops every note as soon as it sounds."}],"start":[0,2,0,0.06],"measures":{"motion":0.151,"detail":0.0758,"edges":0.4257,"complexity":1.512,"coverage":0.8852,"colour":0.2261,"drift":0.0747},"knobResponse":[0.0708,0.0671,0.0617,0.0595]},{"slug":"helter-skelter","title":"Helter Skelter","family":"fair","round":19,"note":"밤 장터의 헬터 스켈터가 128줄을 다 써요. 사람들이 탑 안 계단을 올라 작은 창에 비치고, 꼭대기에서 매트에 앉아 전구 체이스와 함께 탑을 돌아 미끄러져 내려온 뒤 매트를 들고 아래 문으로 돌아가요.","idea":"A helter skelter stands the height of the panel at a night fair, its striped tower under a pointed roof and a flag, and riders climb the stair inside past its little windows, come out of the door at the top, sit on their coir mats and slide down the spiral round and behind the tower and round again under a chase of festoon bulbs, shoot off the run-out at the foot and carry their mats back to the door.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Helter Skelter\n// Family:  fair\n// Idea:    A helter skelter stands the height of the panel at a night fair, its striped tower under a pointed roof and a flag, and riders climb the stair inside past its little windows, come out of the door at the top, sit on their coir mats and slide down the spiral round and behind the tower and round again under a chase of festoon bulbs, shoot off the run-out at the foot and carry their mats back to the door.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the helter skelters of British fairgrounds and seaside piers\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Bulbs=0..1, Speed=0.2..3, Turns=3..6, Stripes=-1..1\n//\n// Knob 1: Bulbs. Turns the festoon bulbs round the colour wheel, and with them the light they throw on the tower, the slide and the sky, starting from warm gold.\n// Knob 2: Speed. How fast the night runs: at 2 a rider takes 8 s to come down three turns, a lit stretch of the chase passes each bulb about once a second, and every 8 s all the bulbs come on together for a second and a half; at 0.2 it is ten times slower.\n// Knob 3: Turns. How many times the slide wraps round the tower, 3 to 6; more turns make a tighter spiral, a longer ride and a longer climb inside.\n// Knob 4: Stripes. The tower's painted stripes: straight up and down near 0, twisting into a barber's pole one way or the other, up to three turns from foot to roof at either end, with the roof's segments twisting after them.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 32;\n// The tower's radius, the slide's outer edge and where the riders sit, in LEDs.\nconst RT = 9;\nconst RO = 20;\nconst RM = 15;\n// How far below the middle of a ring its front edge sits: the panel looks down a little.\nconst TILT = 0.2;\n// The roof's apex, its eaves and their radius; the slide leaves the top door on row 33\n// at the front and comes round to the front on its last turn on row 104; the ground.\nconst YR = 9;\nconst YE = 25;\nconst RR = 13;\nconst YTOP = 33;\nconst YBOT = 104;\nconst YG = 121;\nconst SKY = -1e9;\n// How fast a rider goes round once moving, in radians a second.\nconst OMEGA = 2.5;\nconst STRING = -100;\n\nconst RED = [184, 26, 38];\nconst CREAM = [250, 240, 214];\nconst WOOD = [190, 120, 56];\nconst WALL = [40, 84, 196];\nconst WALL2 = [24, 56, 150];\nconst TRIM = [230, 230, 236];\nconst FLAG = [250, 206, 40];\n// The night's own light on the paint, without the bulbs.\nconst AMB = [0.16, 0.18, 0.3];\nconst SHIRTS = [[200, 40, 60], [40, 110, 210], [240, 240, 240], [50, 170, 80], [240, 170, 30], [150, 70, 200], [30, 190, 190]];\nconst SKINS = [[226, 172, 132], [160, 104, 70], [240, 196, 160], [110, 70, 46]];\nconst HAIRS = [[40, 26, 18], [120, 70, 30], [220, 180, 90], [20, 18, 20], [160, 50, 30]];\nconst MAT = [130, 86, 40];\nconst JEANS = [40, 60, 120];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function setup(params) {\n  const P = params;\n  P.t = 0;\n  P.turns = 0;\n  P.twist = 99;\n  P.alb = new Float32Array(N * 3);\n  P.z = new Float32Array(N);\n  P.lm = new Float32Array(N);\n  P.ph = new Float32Array(N);\n  P.lo = new Float32Array(N);\n  P.kind = new Uint8Array(N);\n  P.win = new Int8Array(N);\n  P.sky = new Float32Array(N * 3);\n  P.halo = new Float32Array(N);\n  P.out = new Float32Array(N * 3);\n  P.pos = new Float32Array(5);\n  // A deep blue night, paler and warmer low down where the fair lights the haze.\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / (H - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      P.sky[o] = 3 + 14 * v * v + 30 * Math.max(0, v - 0.75) ** 2 * 16;\n      P.sky[o + 1] = 4 + 12 * v * v;\n      P.sky[o + 2] = 18 + 30 * v;\n      // The bulbs' glow on the air round the ride.\n      P.halo[y * W + x] = Math.exp(-(((x - CX) / 20) ** 2)) * Math.min(1, Math.max(0, (y - 4) / 30)) * (y \u003c YG ? 1 : 0);\n    }\n  }\n  for (let i = 0; i \u003c 40; i++) {\n    const x = Math.floor(Math.random() * W);\n    const y = Math.floor(Math.random() * 70);\n    const o = (y * W + x) * 3;\n    const b = 30 + Math.random() * 50;\n    P.sky[o] += b;\n    P.sky[o + 1] += b;\n    P.sky[o + 2] += b * 1.1;\n  }\n  // Seven riders, each a seventh of the round behind the one before.\n  P.riders = [];\n  const pick = (a) => a[Math.floor(Math.random() * a.length)];\n  for (let i = 0; i \u003c 7; i++) P.riders.push({ shirt: pick(SHIRTS), skin: pick(SKINS), hair: pick(HAIRS), arms: Math.random() \u003c 0.5, lag: i / 7 + Math.random() * 0.04 });\n}\n\n// Paints one LED of the ride if it is nearer than what is there: its paint c dimmed\n// by f, the bulb light l that reaches it, its place ph on the chase (-1 for none) and\n// how far the light there falls between the chase's lit stretches, lo.\nfunction plot(P, x, y, z, c, l, ph, f, lo = 0.3, kind = 0) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const p = y * W + x;\n  if (z \u003c= P.z[p]) return;\n  P.z[p] = z;\n  P.alb[p * 3] = c[0] * f;\n  P.alb[p * 3 + 1] = c[1] * f;\n  P.alb[p * 3 + 2] = c[2] * f;\n  P.lm[p] = l;\n  P.ph[p] = ph;\n  P.lo[p] = lo;\n  P.kind[p] = kind;\n  P.win[p] = 0;\n}\n\n// The tower's and the roof's paint at an LED: the colour, and how much it is shaded\n// to the sides. The stripes twist with the Stripes knob.\nfunction tower(x, y, twist) {\n  const th = Math.asin(clamp((x - CX) / (RT + 0.5), -1, 1));\n  const turn = th / (Math.PI * 2) + (twist * 3 * (YG - y)) / (YG - YE);\n  return [Math.floor(turn * 12 + 100) & 1 ? CREAM : RED, 0.4 + 0.6 * Math.cos(th)];\n}\n\nfunction roof(x, y, yb, twist) {\n  const r = Math.min(RR, (RR * (y - YR + 0.5)) / (YE - YR)) + 0.5;\n  const th = Math.asin(clamp((x - CX) / r, -1, 1));\n  const c = y > yb - 1 ? TRIM : Math.floor((th / (Math.PI * 2) + 1 + twist * (1 - (y - YR) / (YE - YR))) * 16) & 1 ? CREAM : RED;\n  return [c, 0.35 + 0.65 * Math.cos(th)];\n}\n\nfunction eave(x) {\n  return YE + RR * TILT * Math.cos(Math.asin(clamp((x - CX) / (RR + 0.5), -1, 1)));\n}\n\n// Paints the tower and the roof again for a new twist, leaving the rest as it is.\nfunction repaint(P, twist) {\n  P.twist = twist;\n  for (let p = 0; p \u003c N; p++) {\n    const kind = P.kind[p];\n    if (!kind || P.win[p]) continue;\n    const x = p % W;\n    const y = (p / W) | 0;\n    const [c, f] = kind === 1 ? tower(x, y, twist) : roof(x, y, eave(x), twist);\n    P.alb[p * 3] = c[0] * f;\n    P.alb[p * 3 + 1] = c[1] * f;\n    P.alb[p * 3 + 2] = c[2] * f;\n  }\n}\n\n// The ride for a number of turns and a twist of the stripes: the paint, how near\n// each LED is, how much bulb light reaches it, and where on the slide it is.\nfunction build(P, turns, twist) {\n  P.turns = turns;\n  P.twist = twist;\n  P.kind.fill(0);\n  P.z.fill(SKY);\n  P.alb.fill(0);\n  P.lm.fill(0);\n  P.ph.fill(-1);\n  P.win.fill(0);\n  const T = turns * Math.PI * 2;\n  P.pitch = (YBOT - YTOP) / turns;\n  // The ground, lit round the foot of the tower.\n  for (let y = YG; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) plot(P, x, y, -60, [44, 52, 30], 0.12 + 0.55 * Math.exp(-(((x - CX) / 18) ** 2)), -1, 1);\n  // Festoon strings from the top of the roof out to the ground on both sides.\n  P.strings = [];\n  for (const [ex, ey] of [[-2, 100], [65, 100], [4, 124], [60, 124]]) {\n    const n = Math.ceil(Math.hypot(ex - CX, ey - YR));\n    for (let i = 0; i \u003c= n; i++) {\n      const u = i / n;\n      const x = CX + (ex - CX) * u;\n      const y = YR + 2 + (ey - YR - 2) * u + 6 * u * (1 - u);\n      plot(P, x, y, STRING, [10, 8, 8], 0, -1, 1);\n      if (i % 4 === 2) P.strings.push([Math.round(x), Math.round(y + 1), i]);\n    }\n  }\n  // The tower, which takes the chase from the turn of the slide at its height.\n  for (let y = YE; y \u003c YG; y++)\n    for (let x = CX - RT; x \u003c= CX + RT; x++) {\n      const th = Math.asin(clamp((x - CX) / (RT + 0.5), -1, 1));\n      const [c, f] = tower(x, y, twist);\n      plot(P, x, y, RT * Math.cos(th), c, 1, th + (2 * Math.PI * (y - YTOP)) / P.pitch, f, 0.55, 1);\n    }\n  // The roof, a cone of red and cream segments with a pale trim along the eaves.\n  for (let x = CX - RR; x \u003c= CX + RR; x++) {\n    const yb = eave(x);\n    for (let y = YR; y \u003c= yb; y++) {\n      if (Math.abs(x - CX) > Math.min(RR, (RR * (y - YR + 0.5)) / (YE - YR)) + 0.5) continue;\n      const [c, f] = roof(x, y, yb, twist);\n      plot(P, x, y, 50, c, 0.6, -1, f, 0.3, 2);\n    }\n  }\n  // The slide: a wooden trough round the tower with a blue outer wall and a white\n  // rail on it, from the top door down to the front again on the last turn.\n  for (let f = 0; f \u003c= T; f += 0.02) {\n    const h = YTOP + (YBOT - YTOP) * (f / T);\n    const s = Math.sin(f);\n    const c = Math.cos(f);\n    for (let r = RT; r \u003c= RO; r += 0.5) {\n      const shade = 0.55 + 0.45 * Math.max(0, c * 0.6 + 0.4);\n      plot(P, CX + r * s, h + r * TILT * c, r * c, WOOD, 0.95, f, shade);\n      plot(P, CX + r * s, h + r * TILT * c + 1, r * c - 0.05, WOOD, 0.95, f, shade * 0.55);\n    }\n    const panel = Math.floor((f * RO) / 6) & 1 ? WALL : WALL2;\n    for (let d = 0; d \u003c 4; d++) plot(P, CX + RO * s, h + RO * TILT * c - d + 1, RO * c + 0.1, d === 3 ? TRIM : panel, 0.95, f, c \u003c 0 ? 0.6 : 1);\n  }\n  // The run-out: straight off to the right and down onto the landing.\n  const r0 = YBOT + RM * TILT;\n  for (let u = 0; u \u003c= 1; u += 0.01) {\n    const x = CX + 24 * u;\n    const y = YBOT + (YG - 3 - r0) * u * u;\n    for (let r = RT; r \u003c= RO; r += 0.5) plot(P, x, y + r * TILT, r + 20, WOOD, 0.95, T + u, 1);\n    for (let d = 0; d \u003c 3; d++) plot(P, x, y + RO * TILT - d + 1, RO + 20.5, d === 2 ? TRIM : WALL, 0.95, T + u, 1);\n  }\n  // A pile of mats to land on.\n  for (let y = YG - 4; y \u003c YG; y++) for (let x = 56; x \u003c W; x++) plot(P, x, y, 40, (y + (x >> 1)) & 1 ? MAT : [100, 66, 30], 0.8, -1, 1);\n  // Doors at the top and the foot and little windows on the stair between the turns,\n  // lit from inside. Window k is marked k + 1, the doors 100 and 101.\n  const mark = (x0, x1, y0, y1, id) => {\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const p = y * W + x;\n        // Doors are arched; nothing in front of the tower is cut.\n        if ((id > 99 && y === y0 && (x === x0 || x === x1)) || P.z[p] > RT + 0.1) continue;\n        P.win[p] = id;\n        P.alb[p * 3] = P.alb[p * 3 + 1] = P.alb[p * 3 + 2] = 0;\n      }\n  };\n  mark(CX - 2, CX + 2, YTOP - 7, YTOP - 1, 100);\n  mark(25, 29, YG - 9, YG - 1, 101);\n  for (let k = 0; k \u003c turns; k++) {\n    const wy = Math.round(YTOP + (k + 0.5) * P.pitch + 2);\n    if (wy \u003c= YBOT) mark(CX - 1, CX + 1, wy - 2, wy + 1, k + 1);\n  }\n  // Bulbs along the slide's rail, a little more than 3 LEDs apart.\n  P.bulbs = [];\n  for (let f = 0.1; f \u003c= T; f += 3.2 / RO) P.bulbs.push(f);\n}\n\n// Where a rider is at time u of their round, written into o: x, y, depth, a pose\n// (0 sitting, 1 walking, 2 inside) and which way they face.\nfunction where(P, u, o) {\n  const T = P.turns * Math.PI * 2;\n  const climb = 1 + 1.6 * P.turns;\n  const slide = T / OMEGA + 0.4;\n  const parts = [2.6, climb, 0.7, slide, 1, 0.5];\n  let k = 0;\n  while (k \u003c parts.length - 1 && u > parts[k]) u -= parts[k++];\n  if (k === 0) {\n    // Walking back from the landing to the door at the foot, mat under the arm.\n    const f = clamp(u / parts[0], 0, 1);\n    o[0] = 57 - 30 * f;\n    o[1] = YG + 4;\n    o[2] = 100;\n    o[3] = 1;\n    o[4] = -1;\n  } else if (k === 1) {\n    // Up the stair inside, round and round, to the door at the top.\n    const f = u / climb;\n    o[0] = CX;\n    o[1] = YG - 3 - f * (YG - 3 - YTOP + 2);\n    o[2] = -100;\n    o[3] = 2;\n    o[4] = Math.cos(f * P.turns * Math.PI * 2);\n  } else if (k === 2) {\n    // Out of the top door and down onto the mat.\n    o[0] = CX + 2 * (u / parts[2]);\n    o[1] = YTOP + RM * TILT - 1 + (u / parts[2]);\n    o[2] = RM + 0.5;\n    o[3] = 0;\n    o[4] = 1;\n  } else if (k === 3) {\n    // Down the slide: away from the door slowly, then at the slide's own speed.\n    const f = u \u003c 0.8 ? (OMEGA * u * u) / 1.6 : OMEGA * (u - 0.4);\n    const g = Math.min(f, T);\n    o[0] = CX + RM * Math.sin(g);\n    o[1] = YTOP + (YBOT - YTOP) * (g / T) + RM * TILT * Math.cos(g);\n    o[2] = RM * Math.cos(g) + 0.5;\n    o[3] = 0;\n    o[4] = Math.cos(g) >= 0 ? 1 : -1;\n  } else {\n    // Off the end of the run-out onto the mats, and up.\n    const f = k === 4 ? 1 - (1 - u) ** 2 : 1;\n    const y = YBOT + (YG - 3 - (YBOT + RM * TILT)) * f * f + RM * TILT;\n    o[0] = CX + 24 * f + (k === 5 ? 2 : 0);\n    o[1] = k === 5 ? YG - 4 : y;\n    o[2] = k === 5 ? 60 : RM + 20.5;\n    o[3] = 0;\n    o[4] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const turns = Math.round(clamp(k[2], 3, 6));\n  const twist = clamp(k[3], -1, 1);\n  if (turns !== P.turns) build(P, turns, twist);\n  else if (twist !== P.twist) repaint(P, twist);\n  P.t += (dt * speed) / 2;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const t = P.t;\n  const out = P.out;\n  const col = hsv(0.11 + P.hue, 0.6, 1);\n  const col2 = hsv(0.11 + P.hue + 0.5, 0.7, 1);\n  const warm = [1, 0.86, 0.6];\n  // The chase runs down the spiral, three lit stretches to every two turns, and\n  // the slide and the tower brighten under it.\n  const ct = t * 6;\n  // Every 8 s the operator throws every bulb on for a second and a half.\n  const q = t % 8;\n  const all = Math.min(1, Math.max(0, (q - 4.8) / 0.3)) * Math.min(1, Math.max(0, (6.9 - q) / 0.3));\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const z = P.z[p];\n    if (z === SKY) {\n      const h = P.halo[p] * 70;\n      out[o] = P.sky[o] + col[0] * h;\n      out[o + 1] = P.sky[o + 1] + col[1] * h;\n      out[o + 2] = P.sky[o + 2] + col[2] * h;\n      continue;\n    }\n    const ph = P.ph[p];\n    const lo = P.lo[p];\n    const w = P.lm[p] * (ph \u003c 0 ? 0.8 + 0.2 * all : lo + (1 - lo) * Math.max(all, (0.5 + 0.5 * Math.cos(ph * 1.5 - ct)) ** 2));\n    out[o] = P.alb[o] * (AMB[0] + col[0] * w);\n    out[o + 1] = P.alb[o + 1] * (AMB[1] + col[1] * w);\n    out[o + 2] = P.alb[o + 2] * (AMB[2] + col[2] * w);\n  }\n  // The lamp-lit doors and windows of the stair.\n  const flick = 0.85 + 0.15 * Math.sin(t * 9.3) * Math.sin(t * 3.1);\n  for (let p = 0; p \u003c N; p++) {\n    const id = P.win[p];\n    if (!id) continue;\n    const o = p * 3;\n    out[o] = 230 * flick;\n    out[o + 1] = 150 * flick;\n    out[o + 2] = 70 * flick;\n  }\n  const pos = P.pos;\n  const T = P.turns * Math.PI * 2;\n  const round = 2.6 + 1 + 1.6 * P.turns + 0.7 + T / OMEGA + 0.4 + 1 + 0.5;\n  // The riders, back ones first.\n  const list = [];\n  for (const r of P.riders) {\n    where(P, (((t / round + r.lag) % 1) + 1) % 1 * round, pos);\n    list.push([pos[2], r, pos[0], pos[1], pos[3], pos[4]]);\n  }\n  list.sort((a, b) => a[0] - b[0]);\n  for (const [z, r, x, y, pose, dir] of list) {\n    if (pose === 2) inside(P, out, r, y, dir);\n    else if (pose === 1) walker(out, r, x, y, t);\n    else sitter(P, out, r, x, y, z, dir, t);\n  }\n  // Bulbs on the rail, the eaves and the strings.\n  for (let i = 0; i \u003c P.bulbs.length; i++) {\n    const f = P.bulbs[i];\n    const s = Math.sin(f);\n    const c = Math.cos(f);\n    const x = CX + RO * s;\n    const y = YTOP + (YBOT - YTOP) * (f / T) + RO * TILT * c - 2;\n    const lit = 0.25 + 0.75 * Math.max(all, (0.5 + 0.5 * Math.cos(f * 1.5 - ct)) ** 3);\n    bulb(P, out, x, y, RO * c + 0.3, i & 1 ? col : warm, lit);\n  }\n  for (let x = CX - RR + 1, i = 0; x \u003c= CX + RR - 1; x += 3, i++) {\n    bulb(P, out, x, eave(x) + 1, 60, (i + Math.floor(t * 3)) % 2 ? col2 : warm, 0.85);\n  }\n  for (const [x, y, i] of P.strings) bulb(P, out, x, y, STRING + 1, (i >> 2) % 3 === 0 ? col2 : (i >> 2) % 3 === 1 ? col : warm, Math.max(all, 0.55 + 0.35 * Math.sin(t * 2.1 + i)));\n  // The flag on top, a pennant that ripples in the wind.\n  for (let y = 1; y \u003c YR; y++) paint(out, CX, y, [90, 90, 100], 1);\n  for (let i = 0; i \u003c 9; i++) {\n    const half = 1.6 * (1 - i / 9);\n    const wave = Math.sin(i * 0.8 - t * 7) * (i / 9) * 1.4;\n    for (let d = -Math.ceil(half); d \u003c= Math.ceil(half); d++) if (Math.abs(d) \u003c= half + 0.3) paint(out, CX + 1 + i, 2.5 + d + wave, FLAG, 0.9 - 0.04 * i);\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, Math.min(255, out[o]), Math.min(255, out[o + 1]), Math.min(255, out[o + 2]));\n}\n\nfunction paint(out, x, y, c, f) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const o = (y * W + x) * 3;\n  out[o] = c[0] * f;\n  out[o + 1] = c[1] * f;\n  out[o + 2] = c[2] * f;\n}\n\nfunction bulb(P, out, x, y, z, c, L) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  if (z \u003c P.z[y * W + x] - 0.6) return;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const xx = x + dx;\n      const yy = y + dy;\n      if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n      const o = (yy * W + xx) * 3;\n      const k = dx === 0 && dy === 0 ? 255 : dx === 0 || dy === 0 ? 70 : 28;\n      out[o] += c[0] * k * L;\n      out[o + 1] += c[1] * k * L;\n      out[o + 2] += c[2] * k * L;\n    }\n}\n\n// A rider on a mat, sitting up with the legs out in front, only where nothing\n// nearer stands in front.\nfunction sitter(P, out, r, x, y, z, dir, t) {\n  const put = (fx, dy, c) => {\n    const xx = Math.round(x) + fx * dir;\n    const yy = Math.round(y) + dy;\n    if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) return;\n    if (z \u003c P.z[yy * W + xx] - 0.6) return;\n    const o = (yy * W + xx) * 3;\n    out[o] = c[0];\n    out[o + 1] = c[1];\n    out[o + 2] = c[2];\n  };\n  for (let i = -2; i \u003c= 2; i++) put(i, 0, MAT);\n  put(-1, -1, r.shirt);\n  put(0, -1, JEANS);\n  put(1, -1, JEANS);\n  put(2, -1, [235, 235, 240]);\n  for (let dy = -3; dy \u003c= -2; dy++) {\n    put(-1, dy, r.shirt);\n    put(0, dy, r.shirt);\n  }\n  put(-1, -4, r.skin);\n  put(0, -4, r.skin);\n  put(-1, -5, r.hair);\n  put(0, -5, r.hair);\n  // Half of them throw their arms up on the way down.\n  if (r.arms && Math.sin(t * 3 + x * 0.1) > -0.3) for (let dy = -6; dy \u003c= -4; dy++) put(1, dy, r.skin);\n  else put(1, -3, r.skin);\n}\n\n// A rider walking back to the door with a mat under the arm.\nfunction walker(out, r, x, y, t) {\n  const step = Math.floor(t * 8) & 1;\n  const px = Math.round(x);\n  const py = Math.round(y);\n  paint(out, px, py - 6, r.hair, 1);\n  paint(out, px, py - 5, r.skin, 1);\n  for (let d = 4; d >= 2; d--) paint(out, px, py - d, r.shirt, 1);\n  paint(out, px - 1, py - 4, r.shirt, 0.8);\n  paint(out, px, py - 1, JEANS, 1);\n  paint(out, px - step, py, JEANS, 1);\n  paint(out, px + 1 - step, py, JEANS, 0.8);\n  for (let i = 1; i \u003c= 3; i++) paint(out, px + i, py - 3, MAT, 1);\n}\n\n// A rider on the stair inside, seen only as a shadow crossing a window.\nfunction inside(P, out, r, y, facing) {\n  if (facing \u003c -0.2) return;\n  for (let dy = -4; dy \u003c= 0; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const yy = Math.round(y) + dy;\n      const xx = CX + dx;\n      if (yy \u003c 0 || yy >= H) continue;\n      const p = yy * W + xx;\n      const id = P.win[p];\n      if (!id || id === 101) continue;\n      if (dy === -4 && dx !== 0) continue;\n      const o = p * 3;\n      out[o] = r.shirt[0] * 0.25;\n      out[o + 1] = r.shirt[1] * 0.2;\n      out[o + 2] = r.shirt[2] * 0.2;\n    }\n}\n","layer":{"id":"layer-helter-skelter","type":"code","name":"helter-skelter","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Helter Skelter\n// Family:  fair\n// Idea:    A helter skelter stands the height of the panel at a night fair, its striped tower under a pointed roof and a flag, and riders climb the stair inside past its little windows, come out of the door at the top, sit on their coir mats and slide down the spiral round and behind the tower and round again under a chase of festoon bulbs, shoot off the run-out at the foot and carry their mats back to the door.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the helter skelters of British fairgrounds and seaside piers\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Bulbs=0..1, Speed=0.2..3, Turns=3..6, Stripes=-1..1\n//\n// Knob 1: Bulbs. Turns the festoon bulbs round the colour wheel, and with them the light they throw on the tower, the slide and the sky, starting from warm gold.\n// Knob 2: Speed. How fast the night runs: at 2 a rider takes 8 s to come down three turns, a lit stretch of the chase passes each bulb about once a second, and every 8 s all the bulbs come on together for a second and a half; at 0.2 it is ten times slower.\n// Knob 3: Turns. How many times the slide wraps round the tower, 3 to 6; more turns make a tighter spiral, a longer ride and a longer climb inside.\n// Knob 4: Stripes. The tower's painted stripes: straight up and down near 0, twisting into a barber's pole one way or the other, up to three turns from foot to roof at either end, with the roof's segments twisting after them.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 32;\n// The tower's radius, the slide's outer edge and where the riders sit, in LEDs.\nconst RT = 9;\nconst RO = 20;\nconst RM = 15;\n// How far below the middle of a ring its front edge sits: the panel looks down a little.\nconst TILT = 0.2;\n// The roof's apex, its eaves and their radius; the slide leaves the top door on row 33\n// at the front and comes round to the front on its last turn on row 104; the ground.\nconst YR = 9;\nconst YE = 25;\nconst RR = 13;\nconst YTOP = 33;\nconst YBOT = 104;\nconst YG = 121;\nconst SKY = -1e9;\n// How fast a rider goes round once moving, in radians a second.\nconst OMEGA = 2.5;\nconst STRING = -100;\n\nconst RED = [184, 26, 38];\nconst CREAM = [250, 240, 214];\nconst WOOD = [190, 120, 56];\nconst WALL = [40, 84, 196];\nconst WALL2 = [24, 56, 150];\nconst TRIM = [230, 230, 236];\nconst FLAG = [250, 206, 40];\n// The night's own light on the paint, without the bulbs.\nconst AMB = [0.16, 0.18, 0.3];\nconst SHIRTS = [[200, 40, 60], [40, 110, 210], [240, 240, 240], [50, 170, 80], [240, 170, 30], [150, 70, 200], [30, 190, 190]];\nconst SKINS = [[226, 172, 132], [160, 104, 70], [240, 196, 160], [110, 70, 46]];\nconst HAIRS = [[40, 26, 18], [120, 70, 30], [220, 180, 90], [20, 18, 20], [160, 50, 30]];\nconst MAT = [130, 86, 40];\nconst JEANS = [40, 60, 120];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function setup(params) {\n  const P = params;\n  P.t = 0;\n  P.turns = 0;\n  P.twist = 99;\n  P.alb = new Float32Array(N * 3);\n  P.z = new Float32Array(N);\n  P.lm = new Float32Array(N);\n  P.ph = new Float32Array(N);\n  P.lo = new Float32Array(N);\n  P.kind = new Uint8Array(N);\n  P.win = new Int8Array(N);\n  P.sky = new Float32Array(N * 3);\n  P.halo = new Float32Array(N);\n  P.out = new Float32Array(N * 3);\n  P.pos = new Float32Array(5);\n  // A deep blue night, paler and warmer low down where the fair lights the haze.\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / (H - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      P.sky[o] = 3 + 14 * v * v + 30 * Math.max(0, v - 0.75) ** 2 * 16;\n      P.sky[o + 1] = 4 + 12 * v * v;\n      P.sky[o + 2] = 18 + 30 * v;\n      // The bulbs' glow on the air round the ride.\n      P.halo[y * W + x] = Math.exp(-(((x - CX) / 20) ** 2)) * Math.min(1, Math.max(0, (y - 4) / 30)) * (y \u003c YG ? 1 : 0);\n    }\n  }\n  for (let i = 0; i \u003c 40; i++) {\n    const x = Math.floor(Math.random() * W);\n    const y = Math.floor(Math.random() * 70);\n    const o = (y * W + x) * 3;\n    const b = 30 + Math.random() * 50;\n    P.sky[o] += b;\n    P.sky[o + 1] += b;\n    P.sky[o + 2] += b * 1.1;\n  }\n  // Seven riders, each a seventh of the round behind the one before.\n  P.riders = [];\n  const pick = (a) => a[Math.floor(Math.random() * a.length)];\n  for (let i = 0; i \u003c 7; i++) P.riders.push({ shirt: pick(SHIRTS), skin: pick(SKINS), hair: pick(HAIRS), arms: Math.random() \u003c 0.5, lag: i / 7 + Math.random() * 0.04 });\n}\n\n// Paints one LED of the ride if it is nearer than what is there: its paint c dimmed\n// by f, the bulb light l that reaches it, its place ph on the chase (-1 for none) and\n// how far the light there falls between the chase's lit stretches, lo.\nfunction plot(P, x, y, z, c, l, ph, f, lo = 0.3, kind = 0) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const p = y * W + x;\n  if (z \u003c= P.z[p]) return;\n  P.z[p] = z;\n  P.alb[p * 3] = c[0] * f;\n  P.alb[p * 3 + 1] = c[1] * f;\n  P.alb[p * 3 + 2] = c[2] * f;\n  P.lm[p] = l;\n  P.ph[p] = ph;\n  P.lo[p] = lo;\n  P.kind[p] = kind;\n  P.win[p] = 0;\n}\n\n// The tower's and the roof's paint at an LED: the colour, and how much it is shaded\n// to the sides. The stripes twist with the Stripes knob.\nfunction tower(x, y, twist) {\n  const th = Math.asin(clamp((x - CX) / (RT + 0.5), -1, 1));\n  const turn = th / (Math.PI * 2) + (twist * 3 * (YG - y)) / (YG - YE);\n  return [Math.floor(turn * 12 + 100) & 1 ? CREAM : RED, 0.4 + 0.6 * Math.cos(th)];\n}\n\nfunction roof(x, y, yb, twist) {\n  const r = Math.min(RR, (RR * (y - YR + 0.5)) / (YE - YR)) + 0.5;\n  const th = Math.asin(clamp((x - CX) / r, -1, 1));\n  const c = y > yb - 1 ? TRIM : Math.floor((th / (Math.PI * 2) + 1 + twist * (1 - (y - YR) / (YE - YR))) * 16) & 1 ? CREAM : RED;\n  return [c, 0.35 + 0.65 * Math.cos(th)];\n}\n\nfunction eave(x) {\n  return YE + RR * TILT * Math.cos(Math.asin(clamp((x - CX) / (RR + 0.5), -1, 1)));\n}\n\n// Paints the tower and the roof again for a new twist, leaving the rest as it is.\nfunction repaint(P, twist) {\n  P.twist = twist;\n  for (let p = 0; p \u003c N; p++) {\n    const kind = P.kind[p];\n    if (!kind || P.win[p]) continue;\n    const x = p % W;\n    const y = (p / W) | 0;\n    const [c, f] = kind === 1 ? tower(x, y, twist) : roof(x, y, eave(x), twist);\n    P.alb[p * 3] = c[0] * f;\n    P.alb[p * 3 + 1] = c[1] * f;\n    P.alb[p * 3 + 2] = c[2] * f;\n  }\n}\n\n// The ride for a number of turns and a twist of the stripes: the paint, how near\n// each LED is, how much bulb light reaches it, and where on the slide it is.\nfunction build(P, turns, twist) {\n  P.turns = turns;\n  P.twist = twist;\n  P.kind.fill(0);\n  P.z.fill(SKY);\n  P.alb.fill(0);\n  P.lm.fill(0);\n  P.ph.fill(-1);\n  P.win.fill(0);\n  const T = turns * Math.PI * 2;\n  P.pitch = (YBOT - YTOP) / turns;\n  // The ground, lit round the foot of the tower.\n  for (let y = YG; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) plot(P, x, y, -60, [44, 52, 30], 0.12 + 0.55 * Math.exp(-(((x - CX) / 18) ** 2)), -1, 1);\n  // Festoon strings from the top of the roof out to the ground on both sides.\n  P.strings = [];\n  for (const [ex, ey] of [[-2, 100], [65, 100], [4, 124], [60, 124]]) {\n    const n = Math.ceil(Math.hypot(ex - CX, ey - YR));\n    for (let i = 0; i \u003c= n; i++) {\n      const u = i / n;\n      const x = CX + (ex - CX) * u;\n      const y = YR + 2 + (ey - YR - 2) * u + 6 * u * (1 - u);\n      plot(P, x, y, STRING, [10, 8, 8], 0, -1, 1);\n      if (i % 4 === 2) P.strings.push([Math.round(x), Math.round(y + 1), i]);\n    }\n  }\n  // The tower, which takes the chase from the turn of the slide at its height.\n  for (let y = YE; y \u003c YG; y++)\n    for (let x = CX - RT; x \u003c= CX + RT; x++) {\n      const th = Math.asin(clamp((x - CX) / (RT + 0.5), -1, 1));\n      const [c, f] = tower(x, y, twist);\n      plot(P, x, y, RT * Math.cos(th), c, 1, th + (2 * Math.PI * (y - YTOP)) / P.pitch, f, 0.55, 1);\n    }\n  // The roof, a cone of red and cream segments with a pale trim along the eaves.\n  for (let x = CX - RR; x \u003c= CX + RR; x++) {\n    const yb = eave(x);\n    for (let y = YR; y \u003c= yb; y++) {\n      if (Math.abs(x - CX) > Math.min(RR, (RR * (y - YR + 0.5)) / (YE - YR)) + 0.5) continue;\n      const [c, f] = roof(x, y, yb, twist);\n      plot(P, x, y, 50, c, 0.6, -1, f, 0.3, 2);\n    }\n  }\n  // The slide: a wooden trough round the tower with a blue outer wall and a white\n  // rail on it, from the top door down to the front again on the last turn.\n  for (let f = 0; f \u003c= T; f += 0.02) {\n    const h = YTOP + (YBOT - YTOP) * (f / T);\n    const s = Math.sin(f);\n    const c = Math.cos(f);\n    for (let r = RT; r \u003c= RO; r += 0.5) {\n      const shade = 0.55 + 0.45 * Math.max(0, c * 0.6 + 0.4);\n      plot(P, CX + r * s, h + r * TILT * c, r * c, WOOD, 0.95, f, shade);\n      plot(P, CX + r * s, h + r * TILT * c + 1, r * c - 0.05, WOOD, 0.95, f, shade * 0.55);\n    }\n    const panel = Math.floor((f * RO) / 6) & 1 ? WALL : WALL2;\n    for (let d = 0; d \u003c 4; d++) plot(P, CX + RO * s, h + RO * TILT * c - d + 1, RO * c + 0.1, d === 3 ? TRIM : panel, 0.95, f, c \u003c 0 ? 0.6 : 1);\n  }\n  // The run-out: straight off to the right and down onto the landing.\n  const r0 = YBOT + RM * TILT;\n  for (let u = 0; u \u003c= 1; u += 0.01) {\n    const x = CX + 24 * u;\n    const y = YBOT + (YG - 3 - r0) * u * u;\n    for (let r = RT; r \u003c= RO; r += 0.5) plot(P, x, y + r * TILT, r + 20, WOOD, 0.95, T + u, 1);\n    for (let d = 0; d \u003c 3; d++) plot(P, x, y + RO * TILT - d + 1, RO + 20.5, d === 2 ? TRIM : WALL, 0.95, T + u, 1);\n  }\n  // A pile of mats to land on.\n  for (let y = YG - 4; y \u003c YG; y++) for (let x = 56; x \u003c W; x++) plot(P, x, y, 40, (y + (x >> 1)) & 1 ? MAT : [100, 66, 30], 0.8, -1, 1);\n  // Doors at the top and the foot and little windows on the stair between the turns,\n  // lit from inside. Window k is marked k + 1, the doors 100 and 101.\n  const mark = (x0, x1, y0, y1, id) => {\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const p = y * W + x;\n        // Doors are arched; nothing in front of the tower is cut.\n        if ((id > 99 && y === y0 && (x === x0 || x === x1)) || P.z[p] > RT + 0.1) continue;\n        P.win[p] = id;\n        P.alb[p * 3] = P.alb[p * 3 + 1] = P.alb[p * 3 + 2] = 0;\n      }\n  };\n  mark(CX - 2, CX + 2, YTOP - 7, YTOP - 1, 100);\n  mark(25, 29, YG - 9, YG - 1, 101);\n  for (let k = 0; k \u003c turns; k++) {\n    const wy = Math.round(YTOP + (k + 0.5) * P.pitch + 2);\n    if (wy \u003c= YBOT) mark(CX - 1, CX + 1, wy - 2, wy + 1, k + 1);\n  }\n  // Bulbs along the slide's rail, a little more than 3 LEDs apart.\n  P.bulbs = [];\n  for (let f = 0.1; f \u003c= T; f += 3.2 / RO) P.bulbs.push(f);\n}\n\n// Where a rider is at time u of their round, written into o: x, y, depth, a pose\n// (0 sitting, 1 walking, 2 inside) and which way they face.\nfunction where(P, u, o) {\n  const T = P.turns * Math.PI * 2;\n  const climb = 1 + 1.6 * P.turns;\n  const slide = T / OMEGA + 0.4;\n  const parts = [2.6, climb, 0.7, slide, 1, 0.5];\n  let k = 0;\n  while (k \u003c parts.length - 1 && u > parts[k]) u -= parts[k++];\n  if (k === 0) {\n    // Walking back from the landing to the door at the foot, mat under the arm.\n    const f = clamp(u / parts[0], 0, 1);\n    o[0] = 57 - 30 * f;\n    o[1] = YG + 4;\n    o[2] = 100;\n    o[3] = 1;\n    o[4] = -1;\n  } else if (k === 1) {\n    // Up the stair inside, round and round, to the door at the top.\n    const f = u / climb;\n    o[0] = CX;\n    o[1] = YG - 3 - f * (YG - 3 - YTOP + 2);\n    o[2] = -100;\n    o[3] = 2;\n    o[4] = Math.cos(f * P.turns * Math.PI * 2);\n  } else if (k === 2) {\n    // Out of the top door and down onto the mat.\n    o[0] = CX + 2 * (u / parts[2]);\n    o[1] = YTOP + RM * TILT - 1 + (u / parts[2]);\n    o[2] = RM + 0.5;\n    o[3] = 0;\n    o[4] = 1;\n  } else if (k === 3) {\n    // Down the slide: away from the door slowly, then at the slide's own speed.\n    const f = u \u003c 0.8 ? (OMEGA * u * u) / 1.6 : OMEGA * (u - 0.4);\n    const g = Math.min(f, T);\n    o[0] = CX + RM * Math.sin(g);\n    o[1] = YTOP + (YBOT - YTOP) * (g / T) + RM * TILT * Math.cos(g);\n    o[2] = RM * Math.cos(g) + 0.5;\n    o[3] = 0;\n    o[4] = Math.cos(g) >= 0 ? 1 : -1;\n  } else {\n    // Off the end of the run-out onto the mats, and up.\n    const f = k === 4 ? 1 - (1 - u) ** 2 : 1;\n    const y = YBOT + (YG - 3 - (YBOT + RM * TILT)) * f * f + RM * TILT;\n    o[0] = CX + 24 * f + (k === 5 ? 2 : 0);\n    o[1] = k === 5 ? YG - 4 : y;\n    o[2] = k === 5 ? 60 : RM + 20.5;\n    o[3] = 0;\n    o[4] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const turns = Math.round(clamp(k[2], 3, 6));\n  const twist = clamp(k[3], -1, 1);\n  if (turns !== P.turns) build(P, turns, twist);\n  else if (twist !== P.twist) repaint(P, twist);\n  P.t += (dt * speed) / 2;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const t = P.t;\n  const out = P.out;\n  const col = hsv(0.11 + P.hue, 0.6, 1);\n  const col2 = hsv(0.11 + P.hue + 0.5, 0.7, 1);\n  const warm = [1, 0.86, 0.6];\n  // The chase runs down the spiral, three lit stretches to every two turns, and\n  // the slide and the tower brighten under it.\n  const ct = t * 6;\n  // Every 8 s the operator throws every bulb on for a second and a half.\n  const q = t % 8;\n  const all = Math.min(1, Math.max(0, (q - 4.8) / 0.3)) * Math.min(1, Math.max(0, (6.9 - q) / 0.3));\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const z = P.z[p];\n    if (z === SKY) {\n      const h = P.halo[p] * 70;\n      out[o] = P.sky[o] + col[0] * h;\n      out[o + 1] = P.sky[o + 1] + col[1] * h;\n      out[o + 2] = P.sky[o + 2] + col[2] * h;\n      continue;\n    }\n    const ph = P.ph[p];\n    const lo = P.lo[p];\n    const w = P.lm[p] * (ph \u003c 0 ? 0.8 + 0.2 * all : lo + (1 - lo) * Math.max(all, (0.5 + 0.5 * Math.cos(ph * 1.5 - ct)) ** 2));\n    out[o] = P.alb[o] * (AMB[0] + col[0] * w);\n    out[o + 1] = P.alb[o + 1] * (AMB[1] + col[1] * w);\n    out[o + 2] = P.alb[o + 2] * (AMB[2] + col[2] * w);\n  }\n  // The lamp-lit doors and windows of the stair.\n  const flick = 0.85 + 0.15 * Math.sin(t * 9.3) * Math.sin(t * 3.1);\n  for (let p = 0; p \u003c N; p++) {\n    const id = P.win[p];\n    if (!id) continue;\n    const o = p * 3;\n    out[o] = 230 * flick;\n    out[o + 1] = 150 * flick;\n    out[o + 2] = 70 * flick;\n  }\n  const pos = P.pos;\n  const T = P.turns * Math.PI * 2;\n  const round = 2.6 + 1 + 1.6 * P.turns + 0.7 + T / OMEGA + 0.4 + 1 + 0.5;\n  // The riders, back ones first.\n  const list = [];\n  for (const r of P.riders) {\n    where(P, (((t / round + r.lag) % 1) + 1) % 1 * round, pos);\n    list.push([pos[2], r, pos[0], pos[1], pos[3], pos[4]]);\n  }\n  list.sort((a, b) => a[0] - b[0]);\n  for (const [z, r, x, y, pose, dir] of list) {\n    if (pose === 2) inside(P, out, r, y, dir);\n    else if (pose === 1) walker(out, r, x, y, t);\n    else sitter(P, out, r, x, y, z, dir, t);\n  }\n  // Bulbs on the rail, the eaves and the strings.\n  for (let i = 0; i \u003c P.bulbs.length; i++) {\n    const f = P.bulbs[i];\n    const s = Math.sin(f);\n    const c = Math.cos(f);\n    const x = CX + RO * s;\n    const y = YTOP + (YBOT - YTOP) * (f / T) + RO * TILT * c - 2;\n    const lit = 0.25 + 0.75 * Math.max(all, (0.5 + 0.5 * Math.cos(f * 1.5 - ct)) ** 3);\n    bulb(P, out, x, y, RO * c + 0.3, i & 1 ? col : warm, lit);\n  }\n  for (let x = CX - RR + 1, i = 0; x \u003c= CX + RR - 1; x += 3, i++) {\n    bulb(P, out, x, eave(x) + 1, 60, (i + Math.floor(t * 3)) % 2 ? col2 : warm, 0.85);\n  }\n  for (const [x, y, i] of P.strings) bulb(P, out, x, y, STRING + 1, (i >> 2) % 3 === 0 ? col2 : (i >> 2) % 3 === 1 ? col : warm, Math.max(all, 0.55 + 0.35 * Math.sin(t * 2.1 + i)));\n  // The flag on top, a pennant that ripples in the wind.\n  for (let y = 1; y \u003c YR; y++) paint(out, CX, y, [90, 90, 100], 1);\n  for (let i = 0; i \u003c 9; i++) {\n    const half = 1.6 * (1 - i / 9);\n    const wave = Math.sin(i * 0.8 - t * 7) * (i / 9) * 1.4;\n    for (let d = -Math.ceil(half); d \u003c= Math.ceil(half); d++) if (Math.abs(d) \u003c= half + 0.3) paint(out, CX + 1 + i, 2.5 + d + wave, FLAG, 0.9 - 0.04 * i);\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, Math.min(255, out[o]), Math.min(255, out[o + 1]), Math.min(255, out[o + 2]));\n}\n\nfunction paint(out, x, y, c, f) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const o = (y * W + x) * 3;\n  out[o] = c[0] * f;\n  out[o + 1] = c[1] * f;\n  out[o + 2] = c[2] * f;\n}\n\nfunction bulb(P, out, x, y, z, c, L) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  if (z \u003c P.z[y * W + x] - 0.6) return;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const xx = x + dx;\n      const yy = y + dy;\n      if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n      const o = (yy * W + xx) * 3;\n      const k = dx === 0 && dy === 0 ? 255 : dx === 0 || dy === 0 ? 70 : 28;\n      out[o] += c[0] * k * L;\n      out[o + 1] += c[1] * k * L;\n      out[o + 2] += c[2] * k * L;\n    }\n}\n\n// A rider on a mat, sitting up with the legs out in front, only where nothing\n// nearer stands in front.\nfunction sitter(P, out, r, x, y, z, dir, t) {\n  const put = (fx, dy, c) => {\n    const xx = Math.round(x) + fx * dir;\n    const yy = Math.round(y) + dy;\n    if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) return;\n    if (z \u003c P.z[yy * W + xx] - 0.6) return;\n    const o = (yy * W + xx) * 3;\n    out[o] = c[0];\n    out[o + 1] = c[1];\n    out[o + 2] = c[2];\n  };\n  for (let i = -2; i \u003c= 2; i++) put(i, 0, MAT);\n  put(-1, -1, r.shirt);\n  put(0, -1, JEANS);\n  put(1, -1, JEANS);\n  put(2, -1, [235, 235, 240]);\n  for (let dy = -3; dy \u003c= -2; dy++) {\n    put(-1, dy, r.shirt);\n    put(0, dy, r.shirt);\n  }\n  put(-1, -4, r.skin);\n  put(0, -4, r.skin);\n  put(-1, -5, r.hair);\n  put(0, -5, r.hair);\n  // Half of them throw their arms up on the way down.\n  if (r.arms && Math.sin(t * 3 + x * 0.1) > -0.3) for (let dy = -6; dy \u003c= -4; dy++) put(1, dy, r.skin);\n  else put(1, -3, r.skin);\n}\n\n// A rider walking back to the door with a mat under the arm.\nfunction walker(out, r, x, y, t) {\n  const step = Math.floor(t * 8) & 1;\n  const px = Math.round(x);\n  const py = Math.round(y);\n  paint(out, px, py - 6, r.hair, 1);\n  paint(out, px, py - 5, r.skin, 1);\n  for (let d = 4; d >= 2; d--) paint(out, px, py - d, r.shirt, 1);\n  paint(out, px - 1, py - 4, r.shirt, 0.8);\n  paint(out, px, py - 1, JEANS, 1);\n  paint(out, px - step, py, JEANS, 1);\n  paint(out, px + 1 - step, py, JEANS, 0.8);\n  for (let i = 1; i \u003c= 3; i++) paint(out, px + i, py - 3, MAT, 1);\n}\n\n// A rider on the stair inside, seen only as a shadow crossing a window.\nfunction inside(P, out, r, y, facing) {\n  if (facing \u003c -0.2) return;\n  for (let dy = -4; dy \u003c= 0; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const yy = Math.round(y) + dy;\n      const xx = CX + dx;\n      if (yy \u003c 0 || yy >= H) continue;\n      const p = yy * W + xx;\n      const id = P.win[p];\n      if (!id || id === 101) continue;\n      if (dy === -4 && dx !== 0) continue;\n      const o = p * 3;\n      out[o] = r.shirt[0] * 0.25;\n      out[o + 1] = r.shirt[1] * 0.2;\n      out[o + 2] = r.shirt[2] * 0.2;\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Bulbs=0..1, Speed=0.2..3, Turns=3..6, Stripes=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Bulbs","min":0,"max":1,"about":"Turns the festoon bulbs round the colour wheel, and with them the light they throw on the tower, the slide and the sky, starting from warm gold."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the night runs: at 2 a rider takes 8 s to come down three turns, a lit stretch of the chase passes each bulb about once a second, and every 8 s all the bulbs come on together for a second and a half; at 0.2 it is ten times slower."},{"name":"Turns","min":3,"max":6,"about":"How many times the slide wraps round the tower, 3 to 6; more turns make a tighter spiral, a longer ride and a longer climb inside."},{"name":"Stripes","min":-1,"max":1,"about":"The tower's painted stripes: straight up and down near 0, twisting into a barber's pole one way or the other, up to three turns from foot to roof at either end, with the roof's segments twisting after them."}],"start":[0,2,3,0.06],"measures":{"motion":0.1978,"detail":0.0529,"edges":0.4142,"complexity":1.5797,"coverage":0.8591,"colour":0.2542,"drift":0.0688},"knobResponse":[0.0829,0.0365,0.0808,0.0347]},{"slug":"high-dive","title":"High Dive","family":"sport","round":23,"note":"밤의 실내 다이빙장을 옆에서 봐요. 다이버가 콘크리트 타워의 지그재그 계단을 올라 10 m 플랫폼 조명 아래 서고, 1.6초 동안 공중제비를 돌며 떨어져 물에 들어가면 물속에 기포 기둥이 오르고 전광판에 심판 일곱 명의 점수가 떠요. K3 이 앞으로 뛰기부터 세 바퀴 반과 비틀기까지 다이빙을 골라요.","idea":"A diving hall at night seen from the side: divers climb a concrete tower and somersault ten metres in a second and a half into a pool whose rippling light plays over the walls while the scoreboard posts the marks.","buttons":"K1 tap sends the waiting diver off now, or hurries the one on the stairs.","code":"// ===== Patternflow pattern =====\n// Title:   High Dive\n// Family:  sport\n// Idea:    A diving hall at night seen from the side: divers climb a concrete tower and somersault ten metres in a second and a half into a pool whose rippling light plays over the walls while the scoreboard posts the marks.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the 10 m platform event in competition diving\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Pool=0..1, Speed=0.2..3, Dive=0..4, Lights=0..1\n//\n// Knob 1: Pool. The colour of the underwater lights, aqua at 0 and once round the wheel; the pool throws it onto the walls.\n// Knob 2: Speed. Real time at 2, where a dive takes about 1.6 s and a diver starts up the stairs every 6 s; ten times slower at 0.2.\n// Knob 3: Dive. The next dive, from a plain forward dive through forward somersaults of 1.5 up to 3.5 to 2.5 with two twists. Harder ones jump higher and take longer to set up. The scoreboard shows the dive and its difficulty.\n// Knob 4: Lights. From a dim night practice with only the tower lamps on to full competition lights.\n// Buttons: K1 tap sends the waiting diver off now, or hurries the one on the stairs.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The still waterline and the pool floor; the pool's end wall stands under the tower.\nconst WL = 86;\nconst POOL_X = 14;\nconst FLOOR = 123;\n// LEDs per metre, and gravity in LEDs per second squared.\nconst PX = 7;\nconst G = 9.81 * PX;\n// The top row of each platform (10 m, 7.5 m, 5 m, 3 m) and where it ends.\nconst PLAT = [16, 33, 51, 65];\nconst PLAT_END = [26, 21, 23, 19];\n// Where a diver's hip stands at the edge of the 10 m platform.\nconst EDGE = 24;\nconst HIP = 5.4;\nconst INTERVAL = 6;\nconst [CLIMB, WALK, STAND, FLY, UNDER, SWIM] = [0, 1, 2, 3, 4, 5];\n\n// Number, difficulty in tenths, somersaults, position (2 is a tuck, 1 a pike),\n// twists, take-off speed in m/s, seconds the diver stands first.\nconst DIVES = [\n  [\"101A\", 16, 0.5, 0, 0, 1.6, 0.5],\n  [\"103B\", 20, 1.5, 1, 0, 2.4, 1.1],\n  [\"105B\", 30, 2.5, 1, 0, 3.0, 1.6],\n  [\"107C\", 37, 3.5, 2, 0, 3.5, 2.1],\n  [\"5154B\", 36, 2.5, 1, 2, 3.2, 2.5],\n];\nconst SUITS = [[255, 40, 60], [40, 110, 255], [255, 215, 30], [30, 220, 120], [220, 60, 255]];\nconst SKIN = [245, 180, 140];\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F = (n) => new Float32Array(n);\n// A fixed hash, so the window lights and the glints repeat on every run.\nconst hash = (a, b) => ((Math.imul(a * 7919 + b, 2654435761) >>> 8) & 1023) / 1024;\nconst hsv = (h, s, v) => [5, 3, 1].map((n) => v - v * s * max(0, min((n + h * 6) % 6, 4 - ((n + h * 6) % 6), 1)));\n\n// The climb, as feet positions: in along the deck, then up the flights that\n// zigzag across the stairwell to the top of the tower.\nconst PATH = [[-6, 83.5], [11, 83.5], [3, 74], [11, 64.5], [3, 57.5], [11, 50.5], [3, 41.5], [11, 32.5], [3, 24], [11, 15.5]];\nconst SEGL = [];\nlet PLEN = 0;\nfor (let j = 1; j \u003c PATH.length; j++) {\n  SEGL.push(hypot(PATH[j][0] - PATH[j - 1][0], PATH[j][1] - PATH[j - 1][1]));\n  PLEN += SEGL[j - 1];\n}\nfunction along(p, out) {\n  let j = 0;\n  while (j \u003c SEGL.length - 1 && p > SEGL[j]) p -= SEGL[j++];\n  const u = cl(p / SEGL[j], 0, 1);\n  const a = PATH[j];\n  const b = PATH[j + 1];\n  out[0] = a[0] + (b[0] - a[0]) * u; out[1] = a[1] + (b[1] - a[1]) * u;\n  out[2] = b[0] >= a[0] ? 1 : -1; out[3] = j > 0 ? 1 : 0;\n}\n\n// The scoreboard's letters, three wide and five tall, one bit an LED.\nconst FONT = { 0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7249, 8: 0x7bef, 9: 0x7bcf, A: 0x2bed, B: 0x6bae, C: 0x3923, D: 0x6b6e, M: 0x5fed, \".\": 4 };\n\n// The hall, built once: what each LED's surface is made of and how much\n// light the lamps and the pool throw on it.\nfunction build(S) {\n  const [alb, em] = [F(N * 3), F(N * 3)];\n  const [lt, lh, rf, cone, wb, wl] = [F(N), F(N), F(N), F(N), F(N), F(N)];\n  const lamp = (x, y, lx) => exp(-((x - lx) ** 2) / 300 - (y - 1) ** 2 / 5200);\n  const glow = (x, y, s) => exp(-((x - 28) ** 2 + (y - 106) ** 2) / s) + exp(-((x - 52) ** 2 + (y - 106) ** 2) / s);\n  const flights = [];\n  for (let j = 1; j \u003c PATH.length - 1; j++) flights.push([PATH[j], PATH[j + 1]]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // Back wall: painted block in panels, catching the pool's light.\n      let a = x % 8 ? [0.42, 0.44, 0.5] : [0.36, 0.37, 0.42];\n      let r = 1;\n      let plat = -1;\n      for (let p = 0; p \u003c 4; p++) if (y >= PLAT[p] && y \u003c= PLAT[p] + 2 && x \u003c= PLAT_END[p]) plat = p;\n      if (y \u003c= 1) {\n        a = [0.18, 0.18, 0.2]; r = 0;\n      } else if (x >= 33 && y >= 3 && y \u003c= 33) {\n        // The scoreboard.\n        a = x === 33 || x === 63 || y === 3 || y === 33 ? [0.5, 0.5, 0.52] : [0.03, 0.03, 0.035];\n        r = 0;\n      } else if (y >= 9 && y \u003c PLAT[0] && x \u003c= 12 && (x % 6 === 0 || y === 9 || y === 12)) {\n        a = [0.7, 0.74, 0.8]; r = 0.5;\n      } else if (plat >= 0) {\n        const row = y - PLAT[plat];\n        const v = x === PLAT_END[plat] ? 0.75 : row === 0 ? 0.92 : row === 1 ? 0.62 : 0.4;\n        a = [v, v * 0.97, v * 0.92]; r = row === 2 ? 1.6 : 0.8;\n      } else if (x \u003c= 12 && y > PLAT[0] && y \u003c 84) {\n        // The tower: two concrete legs and the stairwell between them.\n        if (x \u003c= 1 || x === 12) {\n          const v = 0.62 - 0.06 * (y % 5 === 0);\n          a = [v, v * 0.97, v * 0.9];\n        } else {\n          a = [0.24, 0.24, 0.26];\n          for (const [p, q] of flights) {\n            const lo = min(p[0], q[0]);\n            const hi = max(p[0], q[0]);\n            if (x \u003c lo - 1 || x > hi + 1) continue;\n            const xs = cl(x, lo, hi);\n            const sl = (q[1] - p[1]) / (q[0] - p[0]);\n            const xq = p[0] + floor((xs - p[0]) / 2 + (q[0] > p[0] ? 0 : 0.99)) * 2;\n            const yf = p[1] + sl * (cl(xq, lo, hi) - p[0]);\n            if (y >= ceil(yf) && y \u003c= ceil(yf) + 1) a = [0.74, 0.72, 0.66];\n            else if (abs(y - p[1] + 5.5 - sl * (xs - p[0])) \u003c 0.5 && x >= lo && x \u003c= hi) a = [0.4, 0.4, 0.42];\n          }\n          r = 0.6;\n        }\n      } else if (y >= 84 && y \u003c= 86 && x \u003c POOL_X) {\n        a = [0.8, 0.8, 0.78]; r = 0.7;\n      } else if (y > 86 && x \u003c POOL_X) {\n        // The ground under the deck, hatched like the cut concrete of a section drawing.\n        a = x === POOL_X - 1 ? [0.6, 0.65, 0.66] : [0.2, 0.2, 0.21];\n        r = 0;\n        if (x \u003c POOL_X - 1 && (x + y) % 4 === 0) em.fill(30, i * 3, i * 3 + 3);\n      } else if (y >= 84) {\n        // The gutter on the far side, and the far wall when a wave dips.\n        a = y \u003c 86 ? [0.78, 0.8, 0.82] : [0.6, 0.66, 0.7];\n        r = 0.6;\n      } else if (x >= 31 && x \u003c= 61 && y >= 39 && y \u003c= 63) {\n        // Tall windows onto the night.\n        if ((x - 31) % 10 === 0 || (y - 39) % 12 === 0) {\n          a = [0.33, 0.34, 0.37]; r = 0.6;\n        } else {\n          a = [0.06, 0.07, 0.09]; r = 0.35;\n          const g = (y - 39) / 24;\n          const c = y > 54 && hash(x, y) \u003c 0.1;\n          em.set([6 + 8 * g + 120 * c, 14 + 14 * g + 90 * c, 38 + 26 * g + 40 * c], i * 3);\n        }\n      }\n      // Light reflected up from the pool fades with height above the water.\n      rf[i] = r * exp(-max(0, WL - y) / 30); alb.set(a, i * 3);\n      lt[i] = lamp(x, y, 6) + lamp(x, y, 22); lh[i] = lamp(x, y, 40) + lamp(x, y, 56) + 0.3;\n      // The platform lamp: a cone of hazy light from the ceiling onto the 10 m platform.\n      if (y >= 3 && y \u003c= PLAT[0]) {\n        const e = y - 2;\n        cone[i] = sm((x - 21 + e * 0.85) / 2) * sm((23 + e * 0.42 - x) / 2) * (1 - 0.45 * (e / 14));\n      }\n      // Underwater: light fading with depth, and the tiled far wall with its two lamps.\n      if (x >= POOL_X && y >= WL - 2) {\n        const d = y - WL;\n        let v = 0.34 + 0.42 * exp(-max(0, d) / 13);\n        if ((x - POOL_X) % 5 === 0 || (y - WL) % 5 === 4) v *= 0.82;\n        if (y >= FLOOR) {\n          // The floor, with the dark lane lines running away from us.\n          v = 0.62 - 0.06 * (y - FLOOR);\n          const dx = x - 21 - floor((x - 21) / 14) * 14 - ((y - FLOOR) * (x - 38)) / 40;\n          if (x >= 21 && abs(dx) \u003c 1.2) v = 0.16;\n        }\n        wb[i] = v;\n        wl[i] = 1.1 * glow(x, y, 3) + 0.22 * glow(x, y, 50);\n      }\n    }\n  Object.assign(S, { alb, lt, lh, rf, em, cone, wb, wl });\n}\n\nfunction newDiver(S, st) {\n  S.num = (S.num % 9) + 1;\n  const suit = SUITS[floor(rnd() * 5) % 5];\n  return { st, p: 0, x: 0, t: 0, num: S.num, suit, wait: rnd() * 0.4, hx: -20, face: 1, q: [0, 0, 0, 0, 0, PI, PI, 0] };\n}\n\nexport function setup(params) {\n  const S = { t: 0, divers: [], drops: [], bubs: [], num: 0, spawn: 0.5, spot: 1, surge: 0.1, foam: -9, foamX: 0, hue: 0.49, dive: 0, lights: 0.06 };\n  Object.assign(S, { h: F(W), hv: F(W), sy: new Int16Array(W), sh: F(W), C: F(N * 3) });\n  params.s = S; build(S);\n  const a = newDiver(S, STAND);\n  a.x = EDGE; a.wait = 0; S.divers.push(a);\n  S.board = { num: a.num, suit: a.suit, sc: null, reveal: -1 };\n}\n\n// Poses are [body angle, hip and knee of each leg, each arm, twist].\nfunction walkPose(q, ph, stair) {\n  const s = sin(ph);\n  const lift = 0.35 * stair;\n  q.splice(0, 8, 0.08 * stair, 0.45 * s + lift * max(0, s), 0.5 * max(0, s) + 0.3 * stair, -0.45 * s + lift * max(0, -s), 0.5 * max(0, -s) + 0.3 * stair, PI - 0.4 * s, PI + 0.4 * s, 0);\n}\n\nfunction flyPose(q, D, u) {\n  const [, , turns, pos, twist] = D;\n  const Th = turns * TAU;\n  let th, arm;\n  let s = 0;\n  let tw = 0;\n  if (turns \u003c 1) {\n    // A plain forward dive: arms out like a swallow, closing overhead for the entry.\n    th = Th * min(1, u / 0.9);\n    arm = 1.5 * sm(u / 0.2) * (1 - sm((u - 0.55) / 0.25));\n  } else {\n    // Fold up, spin fast, open out at about three quarters of the fall and line up.\n    const uo = 0.72;\n    th = u \u003c uo ? (Th - 0.5) * (u / uo) ** 1.15 : Th - 0.5 + 0.5 * sm((u - uo) / (0.92 - uo));\n    s = sm(u / 0.1) * (1 - sm((u - uo + 0.03) / 0.08));\n    if (twist) {\n      tw = twist * TAU * sm((u - 0.05) / 0.33); s *= sm((u - 0.38) / 0.06);\n    }\n    arm = s * (pos === 2 ? 1.9 : 2.5);\n    if (twist) arm = max(arm, PI * 0.9 * sm(u / 0.06) * (1 - sm((u - 0.36) / 0.06)));\n  }\n  const hip = s * (pos === 2 ? 2.3 : 2.75);\n  const knee = pos === 2 ? s * 2.6 : 0;\n  q.splice(0, 8, th, hip, knee, hip, knee, arm, arm, tw);\n}\n\nfunction takeOff(S, d) {\n  const D = DIVES[S.dive];\n  Object.assign(d, { dv: D, st: FLY, t: 0, x0: d.hx, y0: d.hy, vx: D[2] \u003c 1 ? 6 : 7.5, vy: D[5] * PX });\n  // Time until the hands reach the water, with the body straight and head down.\n  d.T = (d.vy + sqrt(d.vy * d.vy + 2 * G * (WL - 8.6 - d.y0))) / G;\n  [S.board.code, S.board.dd] = D;\n}\n\nfunction enter(S, d) {\n  const ex = round(d.hx);\n  for (let j = -2; j \u003c= 2; j++) S.hv[cl(ex + j, POOL_X, W - 1)] += 30 * (1 - abs(j) * 0.25);\n  // A rip throws up only a few drops and drags air down the hole.\n  for (let j = 0; j \u003c 12; j++) S.drops.push({ x: ex + (rnd() - 0.5) * 3, y: WL - 1, vx: (rnd() - 0.5) * 16, vy: -(14 + rnd() * 30) });\n  for (let j = 0; j \u003c 4; j++) S.drops.push({ x: ex + rnd() - 0.5, y: WL - 1, vx: (rnd() - 0.5) * 3, vy: -(30 + rnd() * 14) });\n  for (let j = 0; j \u003c 40; j++) bub(S, ex + (rnd() - 0.5) * 4, WL + 1 + rnd() * 8, 6 + rnd() * 16, 1 + rnd() * 2.2, 0.7 + 0.3 * rnd());\n  S.foam = S.t; S.foamX = ex;\n  Object.assign(d, { st: UNDER, t: 0, xE: d.hx, yE: d.hy, vE: G * d.T - d.vy });\n  S.board.reveal = 0.7;\n}\n\n// Seven judges; the two highest and two lowest drop, the middle three times the difficulty.\nfunction score(S) {\n  const b = S.board;\n  const q = 6.4 + rnd() * 2.7;\n  const sc = [];\n  for (let j = 0; j \u003c 7; j++) sc.push(cl(round(q + (rnd() - 0.5) * 1.8), 3, 9));\n  const order = [0, 1, 2, 3, 4, 5, 6].sort((i, j) => sc[i] - sc[j] || i - j);\n  b.drop = order.slice(0, 2).concat(order.slice(5));\n  const v = (sc[order[2]] + sc[order[3]] + sc[order[4]]) * b.dd;\n  b.total = `${floor(v / 10)}.${v % 10}0`;\n  b.sc = sc;\n}\n\nconst onPlat = (v) => v.st === WALK || v.st === STAND;\nconst bub = (S, x, y, vy, life, b) => S.bubs.push({ x, y, vy, life, b });\n\n// K1: whoever is on the platform goes now; failing that, the climber hurries.\nfunction go(S) {\n  const d = S.divers.find(onPlat) || S.divers.find((v) => v.st === CLIMB);\n  if (d) d.hurry = d.go = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1); S.hue = (0.49 + cl(k[0], 0, 1)) % 1; S.dive = cl(round(k[2]), 0, 4);\n  S.lights = cl(k[3], 0, 1);\n  const st = (dt * cl(k[1], 0.2, 3)) / 2;\n  S.t += st;\n  if (input.btnPressed && input.btnPressed[0]) go(S);\n\n  S.spawn -= st;\n  if (S.spawn \u003c= 0 && S.divers.length \u003c 7) {\n    S.spawn += INTERVAL; S.divers.push(newDiver(S, CLIMB));\n  }\n  const busy = S.divers.some(onPlat);\n  const surf = (x) => WL + S.h[cl(round(x), POOL_X, W - 1)];\n  const flying = S.divers.some((v) => v.st === FLY);\n  let lim = PLEN;\n  const pt = [0, 0, 0, 0];\n  const top = PLAT[0] - 0.5 - HIP;\n  for (const d of S.divers) {\n    const q = d.q;\n    if (d.st === CLIMB) {\n      // Climbers keep a flight apart and wait at the top while the platform is taken.\n      d.p = min(d.p + st * 24 * (d.hurry ? 3 : 1), lim);\n      lim = d.p - 16; along(d.p, pt); d.hx = pt[0]; d.hy = pt[1] - HIP; d.face = pt[2];\n      walkPose(q, d.p * 0.55, pt[3]);\n      if (d.p >= PLEN && !busy) {\n        d.st = WALK; d.x = 11;\n        Object.assign(S.board, { num: d.num, suit: d.suit, sc: null, reveal: -1 });\n      }\n    } else if (d.st === WALK) {\n      d.hx = d.x = min(EDGE, d.x + st * 14 * (d.hurry ? 2.5 : 1));\n      d.hy = top; d.face = 1; walkPose(q, d.x * 0.6, 0);\n      if (d.x >= EDGE) {\n        d.st = STAND; d.t = 0;\n      }\n    } else if (d.st === STAND) {\n      d.t += st;\n      const wait = DIVES[S.dive][6] + d.wait;\n      d.hx = EDGE; d.hy = top; walkPose(q, 0, 0);\n      // Arms come up from the sides over the last moment before take-off.\n      q[5] = q[6] = PI * (1 - (d.go ? 1 : sm((d.t - wait + 0.6) / 0.45)));\n      if (d.go || (d.t >= wait && !flying)) takeOff(S, d);\n    } else if (d.st === FLY) {\n      d.t += st; d.hx = d.x0 + d.vx * d.t; d.hy = d.y0 - d.vy * d.t + 0.5 * G * d.t * d.t;\n      flyPose(q, d.dv, min(1, d.t / d.T));\n      if (d.t >= d.T) enter(S, d);\n    } else if (d.st === UNDER) {\n      d.t += st; q[1] = q[2] = q[3] = q[4] = q[7] = 0;\n      if (d.t \u003c 0.5) {\n        // Straight down the hole it punched, slowing fast and trailing air.\n        d.yD = d.hy = d.yE + d.vE * 0.22 * (1 - exp(-d.t / 0.22));\n        d.hx = d.xE; q[0] = PI; q[5] = q[6] = 0;\n        for (let j = 0; j \u003c st * 260; j++) bub(S, d.hx + (rnd() - 0.5) * 3, WL + 1 + rnd() * (d.hy + 6 - WL), 8 + rnd() * 20, 1.4 + rnd() * 2, 0.5 + rnd() / 2);\n      } else {\n        // Turn up and rise to the surface, drifting away from the tower.\n        const u = cl((d.t - 0.5) / 1.1, 0, 1);\n        d.hy = d.yD + (WL + 0.8 - d.yD) * sm(u); d.hx += st * 5;\n        q[0] = PI - 0.75 * PI * sm(u * 1.5) + 0.25 * PI * sm((u - 0.7) / 0.3);\n        q[5] = q[6] = 0.3 + 2 * sm(u);\n        if (u >= 1) {\n          d.st = SWIM; d.t = 0;\n        }\n      }\n    } else if (d.st === SWIM) {\n      // Front crawl to the far side, the arms wheeling over the surface.\n      d.t += st; d.hx += st * 10;\n      d.hy = surf(d.hx) + 0.8;\n      const kick = 0.25 * sin(d.t * 12);\n      q.splice(0, 8, PI / 2, kick, 0.15, -kick, 0.15, d.t * 5.5, d.t * 5.5 + PI, 0);\n      const fx = cl(round(d.hx - 6), POOL_X, W - 1);\n      S.hv[fx] += st * 22;\n      if (rnd() \u003c st * 4.5) S.drops.push({ x: fx, y: WL - 1, vx: (rnd() - 0.5) * 6, vy: -8 - rnd() * 10 });\n    }\n  }\n  S.divers = S.divers.filter((d) => d.st !== SWIM || d.hx \u003c 74);\n\n  // The platform lamp is up while someone is out on the 10 m platform.\n  S.spot += (+S.divers.some(onPlat) - S.spot) * min(1, st * 2.2);\n  const b = S.board;\n  if (b.reveal > 0 && (b.reveal -= st) \u003c= 0) score(S);\n\n  // The surface: a damped string of water heights, kicked by the sparger\n  // under the landing area and by every entry.\n  const { h, hv } = S;\n  const kicks = round(st * 70 + rnd() * 0.5);\n  for (let j = 0; j \u003c kicks; j++) hv[22 + floor(rnd() * 26)] += (rnd() - 0.5) * 9;\n  for (let s = 0; s \u003c 3; s++) {\n    const q = st / 3;\n    for (let x = POOL_X; x \u003c W; x++) {\n      const l = x > POOL_X ? h[x - 1] : h[x];\n      const r = x \u003c W - 1 ? h[x + 1] : h[x];\n      hv[x] += (160 * (l + r - 2 * h[x]) - 22 * h[x] - 1.6 * hv[x]) * q;\n    }\n    for (let x = POOL_X; x \u003c W; x++) h[x] = cl(h[x] + hv[x] * q, -3, 3);\n  }\n  let e = 0;\n  for (let x = POOL_X; x \u003c W; x++) e += h[x] * h[x];\n  const target = min(1.3, sqrt(e / 40));\n  S.surge += (target - S.surge) * min(1, st * (target > S.surge ? 6 : 0.9));\n\n  // Sparger bubbles from the floor, and the entry bubbles rising.\n  const ns = st * 38 + rnd();\n  for (let j = 1; j \u003c ns; j++) bub(S, 22 + rnd() * 26, FLOOR - 1, 26 + rnd() * 16, 3, 0.28 + 0.2 * rnd());\n  for (const u of S.bubs) {\n    u.y -= u.vy * st; u.vy = min(u.vy + st * 6, 40); u.x += sin(u.y * 0.5 + u.b * 20) * 0.25;\n    u.life -= st;\n  }\n  S.bubs = S.bubs.filter((u) => u.life > 0 && u.y > surf(u.x) + 0.5);\n  for (const p of S.drops) {\n    p.vy += G * st; p.x += p.vx * st; p.y += p.vy * st;\n  }\n  S.drops = S.drops.filter((p) => p.vy \u003c 0 || p.y \u003c surf(p.x));\n}\n\n// One figure, its hip at (hx, hy). q[0] turns it forward as it somersaults:\n// 0 stands upright facing `face`.\nconst PART = new Float32Array(80);\nfunction figure(S, hx, hy, face, q, suit, lf, pc) {\n  const { C, sy } = S;\n  const ct = cos(q[7]);\n  const ux = sin(q[0]) * face;\n  const uy = -cos(q[0]);\n  const fx = cos(q[0]) * face * ct;\n  const fy = sin(q[0]) * ct;\n  const nx = hx + ux * 3.8;\n  const ny = hy + uy * 3.8;\n  let n = 0;\n  const part = (ax, ay, bx, by, r, c) => {\n    PART.set([ax, ay, bx, by, r, c], n);\n    n += 6;\n  };\n  const limb = (x, y, a, l) => [x + l * (ux * cos(a) + fx * sin(a)), y + l * (uy * cos(a) + fy * sin(a))];\n  // The far leg and arm go down first, dimmer, so the near ones cover them.\n  for (let side = 0; side \u003c 2; side++) {\n    const a1 = PI - q[1 + side * 2];\n    const [kx, ky] = limb(hx, hy, a1, 2.7);\n    const [ax, ay] = limb(kx, ky, a1 + q[2 + side * 2], 2.7);\n    const [wx, wy] = limb(nx, ny, q[5 + side], 3.4);\n    const c = side ? 0 : 2;\n    if (side) {\n      part(hx, hy, nx, ny, 0.95, 1);\n      part(hx + ux * 5.1, hy + uy * 5.1, hx + ux * 5.1, hy + uy * 5.1, 1.15, 0);\n    }\n    part(hx, hy, kx, ky, 0.75, c);\n    part(kx, ky, ax, ay, 0.6, c);\n    part(nx, ny, wx, wy, 0.5, c);\n  }\n  // Nothing reaches further than 8 LEDs from the hip.\n  for (let y = max(0, floor(hy - 9)); y \u003c= min(H - 1, hy + 9); y++)\n    for (let x = max(0, floor(hx - 9)); x \u003c= min(W - 1, hx + 9); x++) {\n      const i = (y * W + x) * 3;\n      const px = x + 0.5;\n      const py = y + 0.5;\n      // Seen through the water a body is tinted and softer.\n      const wet = x >= POOL_X && y > sy[x];\n      for (let j = 0; j \u003c n; j += 6) {\n        const ax = PART[j];\n        const ay = PART[j + 1];\n        const dx = PART[j + 2] - ax;\n        const dy = PART[j + 3] - ay;\n        const tt = cl(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1);\n        const a = cl(PART[j + 4] + 0.5 - sqrt((px - ax - dx * tt) ** 2 + (py - ay - dy * tt) ** 2), 0, 1);\n        if (a \u003c= 0) continue;\n        const src = PART[j + 5] === 1 ? suit : SKIN;\n        const m = lf * (PART[j + 5] === 2 ? 0.62 : 1);\n        for (let c = 0; c \u003c 3; c++) {\n          const v = wet ? src[c] * m * 0.45 + pc[c] * 70 : src[c] * m;\n          C[i + c] += (v - C[i + c]) * a;\n        }\n      }\n    }\n}\n\nconst put = (S, i, col) => S.C.set(col, i * 3);\nfunction text(S, s, x, y, col) {\n  for (const ch of s) {\n    for (let j = 0; j \u003c 15; j++) if ((FONT[ch] >> (14 - j)) & 1) put(S, (y + floor(j / 3)) * W + x + (j % 3), col);\n    x += ch === \".\" ? 2 : 4;\n  }\n}\nconst width = (s) => s.length * 4 - 1 - (s.includes(\".\") ? 2 : 0);\n// Lamp light, warm white.\nconst WARM = [1, 0.93, 0.8];\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { C, alb, lt, lh, rf, em, cone, wb, wl, h, sy, sh, spot } = S;\n  const pc = hsv(S.hue, 0.78, 1);\n  const k4 = S.lights;\n  const t = S.t;\n  const amb = 0.06 + 0.2 * k4;\n  const wT = 0.55 + 0.45 * k4 + 0.25 * spot;\n  const wH = 0.1 + 0.9 * k4;\n  // Stirred water throws brighter light on the walls and stronger shafts below.\n  const A = (0.3 + 1.7 * S.surge) * 0.9 * 255;\n  const sw = 0.25 + 0.5 * S.surge;\n  for (let x = 0; x \u003c W; x++) {\n    sy[x] = x >= POOL_X ? round(WL + h[x]) : 999;\n    const c = x > POOL_X && x \u003c W - 1 ? h[x - 1] + h[x + 1] - 2 * h[x] : 0;\n    sh[x] = sin(x * 0.5 + t * 1.1 + 2 * h[x]) * sin(x * 0.19 - t * 0.7) - 2.5 * c;\n  }\n  const foamA = max(0, 1 - (t - S.foam) / 0.8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const j = i * 3;\n      if (y \u003c sy[x]) {\n        // The hall, lit by the lamps and by the pool's rippling light.\n        const light = (amb + wT * lt[i] + wH * lh[i]) * 153 + spot * cone[i] * 120;\n        let cs = 0;\n        if (rf[i] > 0.02) {\n          const xc = cl((x + (WL - y) * 0.3) | 0, POOL_X, W - 1);\n          let q1 = 1 - abs(sin(x * 0.62 + 1.7 * sin(y * 0.29 + t * 0.8) + t * 0.9 + 1.8 * h[xc]));\n          let q2 = 1 - abs(sin(y * 0.5 - x * 0.2 + 1.5 * sin(x * 0.33 - t * 1.05) - t * 0.65));\n          q1 *= q1;\n          q2 *= q2;\n          cs = (q1 * q1 * q1 + q2 * q2 * q2) * rf[i] * A;\n        }\n        const hz = spot * cone[i] * (40 + 30 * (1 - k4));\n        for (let c = 0; c \u003c 3; c++) C[j + c] = alb[j + c] * (light * WARM[c] + pc[c] * cs) + em[j + c] + hz * WARM[c];\n      } else if (y === sy[x]) {\n        // The surface line, glinting where it tilts and where the sparger froths.\n        let gl = 0.55 + 0.45 * k4 + min(1, abs((x \u003c W - 1 ? h[x + 1] : h[x]) - h[x - 1]) * 1.2);\n        if (x >= 22 && x \u003c 48 && hash(x, floor(t * 9)) \u003c 0.18) gl += 0.6;\n        gl += 1.5 * foamA * max(0, 1 - abs(x - S.foamX) / 4);\n        for (let c = 0; c \u003c 3; c++) C[j + c] = (pc[c] * 0.5 + 0.5) * 122 * gl;\n      } else {\n        const d = y - WL;\n        let v = wb[i] * 255;\n        if (d \u003c 34 && y \u003c FLOOR) v *= 1 + sw * sh[cl(round(x - d * 0.45), 0, W - 1)] * exp(-d / 20);\n        const top = k4 * 30 * exp(-max(0, d) / 10);\n        for (let c = 0; c \u003c 3; c++) C[j + c] = pc[c] * v + wl[i] * 255 * (0.5 + 0.5 * pc[c]) + top;\n      }\n    }\n\n  // Bubbles catch the underwater light.\n  for (const u of S.bubs) {\n    const x = round(u.x);\n    const y = round(u.y);\n    if (x \u003c POOL_X || x >= W || y \u003c= sy[x] || y >= H) continue;\n    const v = u.b * min(1, u.life * 1.5) * 170;\n    for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] += v * (0.55 + 0.45 * pc[c]);\n  }\n\n  // The lamps along the ceiling: the two over the tower are on at night.\n  for (const [lx, w] of [[6, wT], [22, wT], [40, wH], [56, wH]])\n    for (let y = 0; y \u003c 5; y++)\n      for (let x = lx - 4; x \u003c= lx + 4; x++) {\n        const core = abs(x - lx) \u003c= 1 && y >= 1 && y \u003c= 2;\n        if (!core && x >= 33 && y >= 3) continue;\n        const v = core ? 120 + 135 * min(1, w) : 90 * min(1, w) * exp(-((x - lx) ** 2 + (y - 1.5) ** 2) / 3);\n        for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] = max(C[(y * W + x) * 3 + c], v * WARM[c]);\n      }\n\n  // The scoreboard shows the dive and its difficulty, then the seven judges' marks.\n  const bd = S.board;\n  const [code, dd] = bd.sc ? [bd.code, bd.dd] : DIVES[S.dive];\n  const amber = [255, 170, 40];\n  const white = [235, 235, 225];\n  text(S, String(bd.num), 35, 6, amber);\n  text(S, code, 62 - width(code), 6, white);\n  for (let j = 0; j \u003c 15; j++) put(S, (13 + floor(j / 3)) * W + 35 + (j % 3), bd.suit);\n  text(S, \"10M\", 40, 13, [150, 150, 150]);\n  const dds = `${floor(dd / 10)}.${dd % 10}`;\n  text(S, dds, 62 - width(dds), 13, amber);\n  if (bd.sc) {\n    for (let j = 0; j \u003c 7; j++) text(S, String(bd.sc[j]), 35 + j * 4, 20, bd.drop.includes(j) ? [80, 80, 80] : amber);\n    text(S, bd.total, 62 - width(bd.total), 27, white);\n  }\n\n  const lf = 0.62 + 0.38 * k4;\n  for (const d of S.divers) {\n    const lit = d.st === WALK || d.st === STAND || (d.st === FLY && d.t \u003c 0.4);\n    figure(S, d.hx, d.hy, d.face, d.q, d.suit, min(1.1, lf + (lit ? 0.35 * spot : 0)), pc);\n  }\n\n  // Spray above the water.\n  for (const p of S.drops) {\n    const x = round(p.x);\n    const y = round(p.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] = max(C[(y * W + x) * 3 + c], 210 + 40 * pc[c]);\n  }\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, C[i * 3]), min(255, C[i * 3 + 1]), min(255, C[i * 3 + 2]));\n}\n","layer":{"id":"layer-high-dive","type":"code","name":"high-dive","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   High Dive\n// Family:  sport\n// Idea:    A diving hall at night seen from the side: divers climb a concrete tower and somersault ten metres in a second and a half into a pool whose rippling light plays over the walls while the scoreboard posts the marks.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the 10 m platform event in competition diving\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Pool=0..1, Speed=0.2..3, Dive=0..4, Lights=0..1\n//\n// Knob 1: Pool. The colour of the underwater lights, aqua at 0 and once round the wheel; the pool throws it onto the walls.\n// Knob 2: Speed. Real time at 2, where a dive takes about 1.6 s and a diver starts up the stairs every 6 s; ten times slower at 0.2.\n// Knob 3: Dive. The next dive, from a plain forward dive through forward somersaults of 1.5 up to 3.5 to 2.5 with two twists. Harder ones jump higher and take longer to set up. The scoreboard shows the dive and its difficulty.\n// Knob 4: Lights. From a dim night practice with only the tower lamps on to full competition lights.\n// Buttons: K1 tap sends the waiting diver off now, or hurries the one on the stairs.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The still waterline and the pool floor; the pool's end wall stands under the tower.\nconst WL = 86;\nconst POOL_X = 14;\nconst FLOOR = 123;\n// LEDs per metre, and gravity in LEDs per second squared.\nconst PX = 7;\nconst G = 9.81 * PX;\n// The top row of each platform (10 m, 7.5 m, 5 m, 3 m) and where it ends.\nconst PLAT = [16, 33, 51, 65];\nconst PLAT_END = [26, 21, 23, 19];\n// Where a diver's hip stands at the edge of the 10 m platform.\nconst EDGE = 24;\nconst HIP = 5.4;\nconst INTERVAL = 6;\nconst [CLIMB, WALK, STAND, FLY, UNDER, SWIM] = [0, 1, 2, 3, 4, 5];\n\n// Number, difficulty in tenths, somersaults, position (2 is a tuck, 1 a pike),\n// twists, take-off speed in m/s, seconds the diver stands first.\nconst DIVES = [\n  [\"101A\", 16, 0.5, 0, 0, 1.6, 0.5],\n  [\"103B\", 20, 1.5, 1, 0, 2.4, 1.1],\n  [\"105B\", 30, 2.5, 1, 0, 3.0, 1.6],\n  [\"107C\", 37, 3.5, 2, 0, 3.5, 2.1],\n  [\"5154B\", 36, 2.5, 1, 2, 3.2, 2.5],\n];\nconst SUITS = [[255, 40, 60], [40, 110, 255], [255, 215, 30], [30, 220, 120], [220, 60, 255]];\nconst SKIN = [245, 180, 140];\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F = (n) => new Float32Array(n);\n// A fixed hash, so the window lights and the glints repeat on every run.\nconst hash = (a, b) => ((Math.imul(a * 7919 + b, 2654435761) >>> 8) & 1023) / 1024;\nconst hsv = (h, s, v) => [5, 3, 1].map((n) => v - v * s * max(0, min((n + h * 6) % 6, 4 - ((n + h * 6) % 6), 1)));\n\n// The climb, as feet positions: in along the deck, then up the flights that\n// zigzag across the stairwell to the top of the tower.\nconst PATH = [[-6, 83.5], [11, 83.5], [3, 74], [11, 64.5], [3, 57.5], [11, 50.5], [3, 41.5], [11, 32.5], [3, 24], [11, 15.5]];\nconst SEGL = [];\nlet PLEN = 0;\nfor (let j = 1; j \u003c PATH.length; j++) {\n  SEGL.push(hypot(PATH[j][0] - PATH[j - 1][0], PATH[j][1] - PATH[j - 1][1]));\n  PLEN += SEGL[j - 1];\n}\nfunction along(p, out) {\n  let j = 0;\n  while (j \u003c SEGL.length - 1 && p > SEGL[j]) p -= SEGL[j++];\n  const u = cl(p / SEGL[j], 0, 1);\n  const a = PATH[j];\n  const b = PATH[j + 1];\n  out[0] = a[0] + (b[0] - a[0]) * u; out[1] = a[1] + (b[1] - a[1]) * u;\n  out[2] = b[0] >= a[0] ? 1 : -1; out[3] = j > 0 ? 1 : 0;\n}\n\n// The scoreboard's letters, three wide and five tall, one bit an LED.\nconst FONT = { 0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7249, 8: 0x7bef, 9: 0x7bcf, A: 0x2bed, B: 0x6bae, C: 0x3923, D: 0x6b6e, M: 0x5fed, \".\": 4 };\n\n// The hall, built once: what each LED's surface is made of and how much\n// light the lamps and the pool throw on it.\nfunction build(S) {\n  const [alb, em] = [F(N * 3), F(N * 3)];\n  const [lt, lh, rf, cone, wb, wl] = [F(N), F(N), F(N), F(N), F(N), F(N)];\n  const lamp = (x, y, lx) => exp(-((x - lx) ** 2) / 300 - (y - 1) ** 2 / 5200);\n  const glow = (x, y, s) => exp(-((x - 28) ** 2 + (y - 106) ** 2) / s) + exp(-((x - 52) ** 2 + (y - 106) ** 2) / s);\n  const flights = [];\n  for (let j = 1; j \u003c PATH.length - 1; j++) flights.push([PATH[j], PATH[j + 1]]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // Back wall: painted block in panels, catching the pool's light.\n      let a = x % 8 ? [0.42, 0.44, 0.5] : [0.36, 0.37, 0.42];\n      let r = 1;\n      let plat = -1;\n      for (let p = 0; p \u003c 4; p++) if (y >= PLAT[p] && y \u003c= PLAT[p] + 2 && x \u003c= PLAT_END[p]) plat = p;\n      if (y \u003c= 1) {\n        a = [0.18, 0.18, 0.2]; r = 0;\n      } else if (x >= 33 && y >= 3 && y \u003c= 33) {\n        // The scoreboard.\n        a = x === 33 || x === 63 || y === 3 || y === 33 ? [0.5, 0.5, 0.52] : [0.03, 0.03, 0.035];\n        r = 0;\n      } else if (y >= 9 && y \u003c PLAT[0] && x \u003c= 12 && (x % 6 === 0 || y === 9 || y === 12)) {\n        a = [0.7, 0.74, 0.8]; r = 0.5;\n      } else if (plat >= 0) {\n        const row = y - PLAT[plat];\n        const v = x === PLAT_END[plat] ? 0.75 : row === 0 ? 0.92 : row === 1 ? 0.62 : 0.4;\n        a = [v, v * 0.97, v * 0.92]; r = row === 2 ? 1.6 : 0.8;\n      } else if (x \u003c= 12 && y > PLAT[0] && y \u003c 84) {\n        // The tower: two concrete legs and the stairwell between them.\n        if (x \u003c= 1 || x === 12) {\n          const v = 0.62 - 0.06 * (y % 5 === 0);\n          a = [v, v * 0.97, v * 0.9];\n        } else {\n          a = [0.24, 0.24, 0.26];\n          for (const [p, q] of flights) {\n            const lo = min(p[0], q[0]);\n            const hi = max(p[0], q[0]);\n            if (x \u003c lo - 1 || x > hi + 1) continue;\n            const xs = cl(x, lo, hi);\n            const sl = (q[1] - p[1]) / (q[0] - p[0]);\n            const xq = p[0] + floor((xs - p[0]) / 2 + (q[0] > p[0] ? 0 : 0.99)) * 2;\n            const yf = p[1] + sl * (cl(xq, lo, hi) - p[0]);\n            if (y >= ceil(yf) && y \u003c= ceil(yf) + 1) a = [0.74, 0.72, 0.66];\n            else if (abs(y - p[1] + 5.5 - sl * (xs - p[0])) \u003c 0.5 && x >= lo && x \u003c= hi) a = [0.4, 0.4, 0.42];\n          }\n          r = 0.6;\n        }\n      } else if (y >= 84 && y \u003c= 86 && x \u003c POOL_X) {\n        a = [0.8, 0.8, 0.78]; r = 0.7;\n      } else if (y > 86 && x \u003c POOL_X) {\n        // The ground under the deck, hatched like the cut concrete of a section drawing.\n        a = x === POOL_X - 1 ? [0.6, 0.65, 0.66] : [0.2, 0.2, 0.21];\n        r = 0;\n        if (x \u003c POOL_X - 1 && (x + y) % 4 === 0) em.fill(30, i * 3, i * 3 + 3);\n      } else if (y >= 84) {\n        // The gutter on the far side, and the far wall when a wave dips.\n        a = y \u003c 86 ? [0.78, 0.8, 0.82] : [0.6, 0.66, 0.7];\n        r = 0.6;\n      } else if (x >= 31 && x \u003c= 61 && y >= 39 && y \u003c= 63) {\n        // Tall windows onto the night.\n        if ((x - 31) % 10 === 0 || (y - 39) % 12 === 0) {\n          a = [0.33, 0.34, 0.37]; r = 0.6;\n        } else {\n          a = [0.06, 0.07, 0.09]; r = 0.35;\n          const g = (y - 39) / 24;\n          const c = y > 54 && hash(x, y) \u003c 0.1;\n          em.set([6 + 8 * g + 120 * c, 14 + 14 * g + 90 * c, 38 + 26 * g + 40 * c], i * 3);\n        }\n      }\n      // Light reflected up from the pool fades with height above the water.\n      rf[i] = r * exp(-max(0, WL - y) / 30); alb.set(a, i * 3);\n      lt[i] = lamp(x, y, 6) + lamp(x, y, 22); lh[i] = lamp(x, y, 40) + lamp(x, y, 56) + 0.3;\n      // The platform lamp: a cone of hazy light from the ceiling onto the 10 m platform.\n      if (y >= 3 && y \u003c= PLAT[0]) {\n        const e = y - 2;\n        cone[i] = sm((x - 21 + e * 0.85) / 2) * sm((23 + e * 0.42 - x) / 2) * (1 - 0.45 * (e / 14));\n      }\n      // Underwater: light fading with depth, and the tiled far wall with its two lamps.\n      if (x >= POOL_X && y >= WL - 2) {\n        const d = y - WL;\n        let v = 0.34 + 0.42 * exp(-max(0, d) / 13);\n        if ((x - POOL_X) % 5 === 0 || (y - WL) % 5 === 4) v *= 0.82;\n        if (y >= FLOOR) {\n          // The floor, with the dark lane lines running away from us.\n          v = 0.62 - 0.06 * (y - FLOOR);\n          const dx = x - 21 - floor((x - 21) / 14) * 14 - ((y - FLOOR) * (x - 38)) / 40;\n          if (x >= 21 && abs(dx) \u003c 1.2) v = 0.16;\n        }\n        wb[i] = v;\n        wl[i] = 1.1 * glow(x, y, 3) + 0.22 * glow(x, y, 50);\n      }\n    }\n  Object.assign(S, { alb, lt, lh, rf, em, cone, wb, wl });\n}\n\nfunction newDiver(S, st) {\n  S.num = (S.num % 9) + 1;\n  const suit = SUITS[floor(rnd() * 5) % 5];\n  return { st, p: 0, x: 0, t: 0, num: S.num, suit, wait: rnd() * 0.4, hx: -20, face: 1, q: [0, 0, 0, 0, 0, PI, PI, 0] };\n}\n\nexport function setup(params) {\n  const S = { t: 0, divers: [], drops: [], bubs: [], num: 0, spawn: 0.5, spot: 1, surge: 0.1, foam: -9, foamX: 0, hue: 0.49, dive: 0, lights: 0.06 };\n  Object.assign(S, { h: F(W), hv: F(W), sy: new Int16Array(W), sh: F(W), C: F(N * 3) });\n  params.s = S; build(S);\n  const a = newDiver(S, STAND);\n  a.x = EDGE; a.wait = 0; S.divers.push(a);\n  S.board = { num: a.num, suit: a.suit, sc: null, reveal: -1 };\n}\n\n// Poses are [body angle, hip and knee of each leg, each arm, twist].\nfunction walkPose(q, ph, stair) {\n  const s = sin(ph);\n  const lift = 0.35 * stair;\n  q.splice(0, 8, 0.08 * stair, 0.45 * s + lift * max(0, s), 0.5 * max(0, s) + 0.3 * stair, -0.45 * s + lift * max(0, -s), 0.5 * max(0, -s) + 0.3 * stair, PI - 0.4 * s, PI + 0.4 * s, 0);\n}\n\nfunction flyPose(q, D, u) {\n  const [, , turns, pos, twist] = D;\n  const Th = turns * TAU;\n  let th, arm;\n  let s = 0;\n  let tw = 0;\n  if (turns \u003c 1) {\n    // A plain forward dive: arms out like a swallow, closing overhead for the entry.\n    th = Th * min(1, u / 0.9);\n    arm = 1.5 * sm(u / 0.2) * (1 - sm((u - 0.55) / 0.25));\n  } else {\n    // Fold up, spin fast, open out at about three quarters of the fall and line up.\n    const uo = 0.72;\n    th = u \u003c uo ? (Th - 0.5) * (u / uo) ** 1.15 : Th - 0.5 + 0.5 * sm((u - uo) / (0.92 - uo));\n    s = sm(u / 0.1) * (1 - sm((u - uo + 0.03) / 0.08));\n    if (twist) {\n      tw = twist * TAU * sm((u - 0.05) / 0.33); s *= sm((u - 0.38) / 0.06);\n    }\n    arm = s * (pos === 2 ? 1.9 : 2.5);\n    if (twist) arm = max(arm, PI * 0.9 * sm(u / 0.06) * (1 - sm((u - 0.36) / 0.06)));\n  }\n  const hip = s * (pos === 2 ? 2.3 : 2.75);\n  const knee = pos === 2 ? s * 2.6 : 0;\n  q.splice(0, 8, th, hip, knee, hip, knee, arm, arm, tw);\n}\n\nfunction takeOff(S, d) {\n  const D = DIVES[S.dive];\n  Object.assign(d, { dv: D, st: FLY, t: 0, x0: d.hx, y0: d.hy, vx: D[2] \u003c 1 ? 6 : 7.5, vy: D[5] * PX });\n  // Time until the hands reach the water, with the body straight and head down.\n  d.T = (d.vy + sqrt(d.vy * d.vy + 2 * G * (WL - 8.6 - d.y0))) / G;\n  [S.board.code, S.board.dd] = D;\n}\n\nfunction enter(S, d) {\n  const ex = round(d.hx);\n  for (let j = -2; j \u003c= 2; j++) S.hv[cl(ex + j, POOL_X, W - 1)] += 30 * (1 - abs(j) * 0.25);\n  // A rip throws up only a few drops and drags air down the hole.\n  for (let j = 0; j \u003c 12; j++) S.drops.push({ x: ex + (rnd() - 0.5) * 3, y: WL - 1, vx: (rnd() - 0.5) * 16, vy: -(14 + rnd() * 30) });\n  for (let j = 0; j \u003c 4; j++) S.drops.push({ x: ex + rnd() - 0.5, y: WL - 1, vx: (rnd() - 0.5) * 3, vy: -(30 + rnd() * 14) });\n  for (let j = 0; j \u003c 40; j++) bub(S, ex + (rnd() - 0.5) * 4, WL + 1 + rnd() * 8, 6 + rnd() * 16, 1 + rnd() * 2.2, 0.7 + 0.3 * rnd());\n  S.foam = S.t; S.foamX = ex;\n  Object.assign(d, { st: UNDER, t: 0, xE: d.hx, yE: d.hy, vE: G * d.T - d.vy });\n  S.board.reveal = 0.7;\n}\n\n// Seven judges; the two highest and two lowest drop, the middle three times the difficulty.\nfunction score(S) {\n  const b = S.board;\n  const q = 6.4 + rnd() * 2.7;\n  const sc = [];\n  for (let j = 0; j \u003c 7; j++) sc.push(cl(round(q + (rnd() - 0.5) * 1.8), 3, 9));\n  const order = [0, 1, 2, 3, 4, 5, 6].sort((i, j) => sc[i] - sc[j] || i - j);\n  b.drop = order.slice(0, 2).concat(order.slice(5));\n  const v = (sc[order[2]] + sc[order[3]] + sc[order[4]]) * b.dd;\n  b.total = `${floor(v / 10)}.${v % 10}0`;\n  b.sc = sc;\n}\n\nconst onPlat = (v) => v.st === WALK || v.st === STAND;\nconst bub = (S, x, y, vy, life, b) => S.bubs.push({ x, y, vy, life, b });\n\n// K1: whoever is on the platform goes now; failing that, the climber hurries.\nfunction go(S) {\n  const d = S.divers.find(onPlat) || S.divers.find((v) => v.st === CLIMB);\n  if (d) d.hurry = d.go = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1); S.hue = (0.49 + cl(k[0], 0, 1)) % 1; S.dive = cl(round(k[2]), 0, 4);\n  S.lights = cl(k[3], 0, 1);\n  const st = (dt * cl(k[1], 0.2, 3)) / 2;\n  S.t += st;\n  if (input.btnPressed && input.btnPressed[0]) go(S);\n\n  S.spawn -= st;\n  if (S.spawn \u003c= 0 && S.divers.length \u003c 7) {\n    S.spawn += INTERVAL; S.divers.push(newDiver(S, CLIMB));\n  }\n  const busy = S.divers.some(onPlat);\n  const surf = (x) => WL + S.h[cl(round(x), POOL_X, W - 1)];\n  const flying = S.divers.some((v) => v.st === FLY);\n  let lim = PLEN;\n  const pt = [0, 0, 0, 0];\n  const top = PLAT[0] - 0.5 - HIP;\n  for (const d of S.divers) {\n    const q = d.q;\n    if (d.st === CLIMB) {\n      // Climbers keep a flight apart and wait at the top while the platform is taken.\n      d.p = min(d.p + st * 24 * (d.hurry ? 3 : 1), lim);\n      lim = d.p - 16; along(d.p, pt); d.hx = pt[0]; d.hy = pt[1] - HIP; d.face = pt[2];\n      walkPose(q, d.p * 0.55, pt[3]);\n      if (d.p >= PLEN && !busy) {\n        d.st = WALK; d.x = 11;\n        Object.assign(S.board, { num: d.num, suit: d.suit, sc: null, reveal: -1 });\n      }\n    } else if (d.st === WALK) {\n      d.hx = d.x = min(EDGE, d.x + st * 14 * (d.hurry ? 2.5 : 1));\n      d.hy = top; d.face = 1; walkPose(q, d.x * 0.6, 0);\n      if (d.x >= EDGE) {\n        d.st = STAND; d.t = 0;\n      }\n    } else if (d.st === STAND) {\n      d.t += st;\n      const wait = DIVES[S.dive][6] + d.wait;\n      d.hx = EDGE; d.hy = top; walkPose(q, 0, 0);\n      // Arms come up from the sides over the last moment before take-off.\n      q[5] = q[6] = PI * (1 - (d.go ? 1 : sm((d.t - wait + 0.6) / 0.45)));\n      if (d.go || (d.t >= wait && !flying)) takeOff(S, d);\n    } else if (d.st === FLY) {\n      d.t += st; d.hx = d.x0 + d.vx * d.t; d.hy = d.y0 - d.vy * d.t + 0.5 * G * d.t * d.t;\n      flyPose(q, d.dv, min(1, d.t / d.T));\n      if (d.t >= d.T) enter(S, d);\n    } else if (d.st === UNDER) {\n      d.t += st; q[1] = q[2] = q[3] = q[4] = q[7] = 0;\n      if (d.t \u003c 0.5) {\n        // Straight down the hole it punched, slowing fast and trailing air.\n        d.yD = d.hy = d.yE + d.vE * 0.22 * (1 - exp(-d.t / 0.22));\n        d.hx = d.xE; q[0] = PI; q[5] = q[6] = 0;\n        for (let j = 0; j \u003c st * 260; j++) bub(S, d.hx + (rnd() - 0.5) * 3, WL + 1 + rnd() * (d.hy + 6 - WL), 8 + rnd() * 20, 1.4 + rnd() * 2, 0.5 + rnd() / 2);\n      } else {\n        // Turn up and rise to the surface, drifting away from the tower.\n        const u = cl((d.t - 0.5) / 1.1, 0, 1);\n        d.hy = d.yD + (WL + 0.8 - d.yD) * sm(u); d.hx += st * 5;\n        q[0] = PI - 0.75 * PI * sm(u * 1.5) + 0.25 * PI * sm((u - 0.7) / 0.3);\n        q[5] = q[6] = 0.3 + 2 * sm(u);\n        if (u >= 1) {\n          d.st = SWIM; d.t = 0;\n        }\n      }\n    } else if (d.st === SWIM) {\n      // Front crawl to the far side, the arms wheeling over the surface.\n      d.t += st; d.hx += st * 10;\n      d.hy = surf(d.hx) + 0.8;\n      const kick = 0.25 * sin(d.t * 12);\n      q.splice(0, 8, PI / 2, kick, 0.15, -kick, 0.15, d.t * 5.5, d.t * 5.5 + PI, 0);\n      const fx = cl(round(d.hx - 6), POOL_X, W - 1);\n      S.hv[fx] += st * 22;\n      if (rnd() \u003c st * 4.5) S.drops.push({ x: fx, y: WL - 1, vx: (rnd() - 0.5) * 6, vy: -8 - rnd() * 10 });\n    }\n  }\n  S.divers = S.divers.filter((d) => d.st !== SWIM || d.hx \u003c 74);\n\n  // The platform lamp is up while someone is out on the 10 m platform.\n  S.spot += (+S.divers.some(onPlat) - S.spot) * min(1, st * 2.2);\n  const b = S.board;\n  if (b.reveal > 0 && (b.reveal -= st) \u003c= 0) score(S);\n\n  // The surface: a damped string of water heights, kicked by the sparger\n  // under the landing area and by every entry.\n  const { h, hv } = S;\n  const kicks = round(st * 70 + rnd() * 0.5);\n  for (let j = 0; j \u003c kicks; j++) hv[22 + floor(rnd() * 26)] += (rnd() - 0.5) * 9;\n  for (let s = 0; s \u003c 3; s++) {\n    const q = st / 3;\n    for (let x = POOL_X; x \u003c W; x++) {\n      const l = x > POOL_X ? h[x - 1] : h[x];\n      const r = x \u003c W - 1 ? h[x + 1] : h[x];\n      hv[x] += (160 * (l + r - 2 * h[x]) - 22 * h[x] - 1.6 * hv[x]) * q;\n    }\n    for (let x = POOL_X; x \u003c W; x++) h[x] = cl(h[x] + hv[x] * q, -3, 3);\n  }\n  let e = 0;\n  for (let x = POOL_X; x \u003c W; x++) e += h[x] * h[x];\n  const target = min(1.3, sqrt(e / 40));\n  S.surge += (target - S.surge) * min(1, st * (target > S.surge ? 6 : 0.9));\n\n  // Sparger bubbles from the floor, and the entry bubbles rising.\n  const ns = st * 38 + rnd();\n  for (let j = 1; j \u003c ns; j++) bub(S, 22 + rnd() * 26, FLOOR - 1, 26 + rnd() * 16, 3, 0.28 + 0.2 * rnd());\n  for (const u of S.bubs) {\n    u.y -= u.vy * st; u.vy = min(u.vy + st * 6, 40); u.x += sin(u.y * 0.5 + u.b * 20) * 0.25;\n    u.life -= st;\n  }\n  S.bubs = S.bubs.filter((u) => u.life > 0 && u.y > surf(u.x) + 0.5);\n  for (const p of S.drops) {\n    p.vy += G * st; p.x += p.vx * st; p.y += p.vy * st;\n  }\n  S.drops = S.drops.filter((p) => p.vy \u003c 0 || p.y \u003c surf(p.x));\n}\n\n// One figure, its hip at (hx, hy). q[0] turns it forward as it somersaults:\n// 0 stands upright facing `face`.\nconst PART = new Float32Array(80);\nfunction figure(S, hx, hy, face, q, suit, lf, pc) {\n  const { C, sy } = S;\n  const ct = cos(q[7]);\n  const ux = sin(q[0]) * face;\n  const uy = -cos(q[0]);\n  const fx = cos(q[0]) * face * ct;\n  const fy = sin(q[0]) * ct;\n  const nx = hx + ux * 3.8;\n  const ny = hy + uy * 3.8;\n  let n = 0;\n  const part = (ax, ay, bx, by, r, c) => {\n    PART.set([ax, ay, bx, by, r, c], n);\n    n += 6;\n  };\n  const limb = (x, y, a, l) => [x + l * (ux * cos(a) + fx * sin(a)), y + l * (uy * cos(a) + fy * sin(a))];\n  // The far leg and arm go down first, dimmer, so the near ones cover them.\n  for (let side = 0; side \u003c 2; side++) {\n    const a1 = PI - q[1 + side * 2];\n    const [kx, ky] = limb(hx, hy, a1, 2.7);\n    const [ax, ay] = limb(kx, ky, a1 + q[2 + side * 2], 2.7);\n    const [wx, wy] = limb(nx, ny, q[5 + side], 3.4);\n    const c = side ? 0 : 2;\n    if (side) {\n      part(hx, hy, nx, ny, 0.95, 1);\n      part(hx + ux * 5.1, hy + uy * 5.1, hx + ux * 5.1, hy + uy * 5.1, 1.15, 0);\n    }\n    part(hx, hy, kx, ky, 0.75, c);\n    part(kx, ky, ax, ay, 0.6, c);\n    part(nx, ny, wx, wy, 0.5, c);\n  }\n  // Nothing reaches further than 8 LEDs from the hip.\n  for (let y = max(0, floor(hy - 9)); y \u003c= min(H - 1, hy + 9); y++)\n    for (let x = max(0, floor(hx - 9)); x \u003c= min(W - 1, hx + 9); x++) {\n      const i = (y * W + x) * 3;\n      const px = x + 0.5;\n      const py = y + 0.5;\n      // Seen through the water a body is tinted and softer.\n      const wet = x >= POOL_X && y > sy[x];\n      for (let j = 0; j \u003c n; j += 6) {\n        const ax = PART[j];\n        const ay = PART[j + 1];\n        const dx = PART[j + 2] - ax;\n        const dy = PART[j + 3] - ay;\n        const tt = cl(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1);\n        const a = cl(PART[j + 4] + 0.5 - sqrt((px - ax - dx * tt) ** 2 + (py - ay - dy * tt) ** 2), 0, 1);\n        if (a \u003c= 0) continue;\n        const src = PART[j + 5] === 1 ? suit : SKIN;\n        const m = lf * (PART[j + 5] === 2 ? 0.62 : 1);\n        for (let c = 0; c \u003c 3; c++) {\n          const v = wet ? src[c] * m * 0.45 + pc[c] * 70 : src[c] * m;\n          C[i + c] += (v - C[i + c]) * a;\n        }\n      }\n    }\n}\n\nconst put = (S, i, col) => S.C.set(col, i * 3);\nfunction text(S, s, x, y, col) {\n  for (const ch of s) {\n    for (let j = 0; j \u003c 15; j++) if ((FONT[ch] >> (14 - j)) & 1) put(S, (y + floor(j / 3)) * W + x + (j % 3), col);\n    x += ch === \".\" ? 2 : 4;\n  }\n}\nconst width = (s) => s.length * 4 - 1 - (s.includes(\".\") ? 2 : 0);\n// Lamp light, warm white.\nconst WARM = [1, 0.93, 0.8];\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { C, alb, lt, lh, rf, em, cone, wb, wl, h, sy, sh, spot } = S;\n  const pc = hsv(S.hue, 0.78, 1);\n  const k4 = S.lights;\n  const t = S.t;\n  const amb = 0.06 + 0.2 * k4;\n  const wT = 0.55 + 0.45 * k4 + 0.25 * spot;\n  const wH = 0.1 + 0.9 * k4;\n  // Stirred water throws brighter light on the walls and stronger shafts below.\n  const A = (0.3 + 1.7 * S.surge) * 0.9 * 255;\n  const sw = 0.25 + 0.5 * S.surge;\n  for (let x = 0; x \u003c W; x++) {\n    sy[x] = x >= POOL_X ? round(WL + h[x]) : 999;\n    const c = x > POOL_X && x \u003c W - 1 ? h[x - 1] + h[x + 1] - 2 * h[x] : 0;\n    sh[x] = sin(x * 0.5 + t * 1.1 + 2 * h[x]) * sin(x * 0.19 - t * 0.7) - 2.5 * c;\n  }\n  const foamA = max(0, 1 - (t - S.foam) / 0.8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const j = i * 3;\n      if (y \u003c sy[x]) {\n        // The hall, lit by the lamps and by the pool's rippling light.\n        const light = (amb + wT * lt[i] + wH * lh[i]) * 153 + spot * cone[i] * 120;\n        let cs = 0;\n        if (rf[i] > 0.02) {\n          const xc = cl((x + (WL - y) * 0.3) | 0, POOL_X, W - 1);\n          let q1 = 1 - abs(sin(x * 0.62 + 1.7 * sin(y * 0.29 + t * 0.8) + t * 0.9 + 1.8 * h[xc]));\n          let q2 = 1 - abs(sin(y * 0.5 - x * 0.2 + 1.5 * sin(x * 0.33 - t * 1.05) - t * 0.65));\n          q1 *= q1;\n          q2 *= q2;\n          cs = (q1 * q1 * q1 + q2 * q2 * q2) * rf[i] * A;\n        }\n        const hz = spot * cone[i] * (40 + 30 * (1 - k4));\n        for (let c = 0; c \u003c 3; c++) C[j + c] = alb[j + c] * (light * WARM[c] + pc[c] * cs) + em[j + c] + hz * WARM[c];\n      } else if (y === sy[x]) {\n        // The surface line, glinting where it tilts and where the sparger froths.\n        let gl = 0.55 + 0.45 * k4 + min(1, abs((x \u003c W - 1 ? h[x + 1] : h[x]) - h[x - 1]) * 1.2);\n        if (x >= 22 && x \u003c 48 && hash(x, floor(t * 9)) \u003c 0.18) gl += 0.6;\n        gl += 1.5 * foamA * max(0, 1 - abs(x - S.foamX) / 4);\n        for (let c = 0; c \u003c 3; c++) C[j + c] = (pc[c] * 0.5 + 0.5) * 122 * gl;\n      } else {\n        const d = y - WL;\n        let v = wb[i] * 255;\n        if (d \u003c 34 && y \u003c FLOOR) v *= 1 + sw * sh[cl(round(x - d * 0.45), 0, W - 1)] * exp(-d / 20);\n        const top = k4 * 30 * exp(-max(0, d) / 10);\n        for (let c = 0; c \u003c 3; c++) C[j + c] = pc[c] * v + wl[i] * 255 * (0.5 + 0.5 * pc[c]) + top;\n      }\n    }\n\n  // Bubbles catch the underwater light.\n  for (const u of S.bubs) {\n    const x = round(u.x);\n    const y = round(u.y);\n    if (x \u003c POOL_X || x >= W || y \u003c= sy[x] || y >= H) continue;\n    const v = u.b * min(1, u.life * 1.5) * 170;\n    for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] += v * (0.55 + 0.45 * pc[c]);\n  }\n\n  // The lamps along the ceiling: the two over the tower are on at night.\n  for (const [lx, w] of [[6, wT], [22, wT], [40, wH], [56, wH]])\n    for (let y = 0; y \u003c 5; y++)\n      for (let x = lx - 4; x \u003c= lx + 4; x++) {\n        const core = abs(x - lx) \u003c= 1 && y >= 1 && y \u003c= 2;\n        if (!core && x >= 33 && y >= 3) continue;\n        const v = core ? 120 + 135 * min(1, w) : 90 * min(1, w) * exp(-((x - lx) ** 2 + (y - 1.5) ** 2) / 3);\n        for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] = max(C[(y * W + x) * 3 + c], v * WARM[c]);\n      }\n\n  // The scoreboard shows the dive and its difficulty, then the seven judges' marks.\n  const bd = S.board;\n  const [code, dd] = bd.sc ? [bd.code, bd.dd] : DIVES[S.dive];\n  const amber = [255, 170, 40];\n  const white = [235, 235, 225];\n  text(S, String(bd.num), 35, 6, amber);\n  text(S, code, 62 - width(code), 6, white);\n  for (let j = 0; j \u003c 15; j++) put(S, (13 + floor(j / 3)) * W + 35 + (j % 3), bd.suit);\n  text(S, \"10M\", 40, 13, [150, 150, 150]);\n  const dds = `${floor(dd / 10)}.${dd % 10}`;\n  text(S, dds, 62 - width(dds), 13, amber);\n  if (bd.sc) {\n    for (let j = 0; j \u003c 7; j++) text(S, String(bd.sc[j]), 35 + j * 4, 20, bd.drop.includes(j) ? [80, 80, 80] : amber);\n    text(S, bd.total, 62 - width(bd.total), 27, white);\n  }\n\n  const lf = 0.62 + 0.38 * k4;\n  for (const d of S.divers) {\n    const lit = d.st === WALK || d.st === STAND || (d.st === FLY && d.t \u003c 0.4);\n    figure(S, d.hx, d.hy, d.face, d.q, d.suit, min(1.1, lf + (lit ? 0.35 * spot : 0)), pc);\n  }\n\n  // Spray above the water.\n  for (const p of S.drops) {\n    const x = round(p.x);\n    const y = round(p.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] = max(C[(y * W + x) * 3 + c], 210 + 40 * pc[c]);\n  }\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, C[i * 3]), min(255, C[i * 3 + 1]), min(255, C[i * 3 + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Pool=0..1, Speed=0.2..3, Dive=0..4, Lights=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Pool","min":0,"max":1,"about":"The colour of the underwater lights, aqua at 0 and once round the wheel; the pool throws it onto the walls."},{"name":"Speed","min":0.2,"max":3,"about":"Real time at 2, where a dive takes about 1.6 s and a diver starts up the stairs every 6 s; ten times slower at 0.2."},{"name":"Dive","min":0,"max":4,"about":"The next dive, from a plain forward dive through forward somersaults of 1.5 up to 3.5 to 2.5 with two twists. Harder ones jump higher and take longer to set up. The scoreboard shows the dive and its difficulty."},{"name":"Lights","min":0,"max":1,"about":"From a dim night practice with only the tower lamps on to full competition lights."}],"start":[0,2,0,0.06],"measures":{"motion":0.3915,"detail":0.0721,"edges":0.2796,"complexity":1.8967,"coverage":0.7436,"colour":0.2296,"drift":0.0344},"knobResponse":[0.0986,0.0554,0.0399,0.1523]},{"slug":"high-striker","title":"High Striker","family":"fair","round":20,"note":"밤 장터의 하이 스트라이커가 128줄을 다 써요. 줄 선 사람들이 차례로 망치를 내리치면 퍽이 실제 중력으로 레일을 오르며 눈금을 켜다가 떨어지고, 세게 친 판이나 K1 을 누른 판에는 꼭대기 놋쇠 종이 울려 전구가 깜박이고 하늘이 밝아져요.","idea":"A high striker stands the full height of a night fair: players from a queue take turns swinging a mallet onto the pad, the puck flies up the rail under real gravity lighting the scale it passes and falls back, and a hit hard enough rings the brass bell at the top, so the tower's bulbs flash and the sky lights up.","buttons":"K1 tap makes the next swing a big one that rings the bell, at once if the player is already lifting the mallet.","code":"// ===== Patternflow pattern =====\n// Title:   High Striker\n// Family:  fair\n// Idea:    A high striker stands the full height of a night fair: players from a queue take turns swinging a mallet onto the pad, the puck flies up the rail under real gravity lighting the scale it passes and falls back, and a hit hard enough rings the brass bell at the top, so the tower's bulbs flash and the sky lights up.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the strength-tester towers of fairgrounds and seaside piers\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Bulbs=0..1, Speed=0.2..3, Strength=60..130, Gravity=-1..1\n//\n// Knob 1: Bulbs. Turns the bulbs up both edges of the tower round the colour wheel, with the light they throw on the striped posts and the night round the tower, starting from gold.\n// Knob 2: Speed. How fast the fair runs: at 2 everything moves in real time, a full flight to the bell takes 1.26 s each way; at 0.2 it is ten times slower, at 3 half as fast again.\n// Knob 3: Strength. How hard the players hit on average, as the share of the run to the bell an average swing sends the puck: 60% at the minimum, where an average grown-up just lights FAIR, to 130%, where nearly every grown-up rings the bell. Children hit softer and the strongman harder.\n// Knob 4: Gravity. The pull on the puck, from 0.57 g at -1 through Earth's at the middle to 1.74 g at 1: the same swing sends it higher and slower, or lower and quicker.\n// Buttons: K1 tap makes the next swing a big one that rings the bell, at once if the player is already lifting the mallet.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, round, floor, sin, cos, exp, sqrt, atan2, hypot, asin } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n\n// The tower. Striped posts on columns 34..36 and 49..51 hold a crossbar on rows\n// 2..4, and the bell hangs from it with its mouth on row 13. The board between\n// the posts carries the rail on columns 42 and 43 with the scale either side.\nconst PL = 34;\nconst PR = 49;\nconst CX = 42.5;\nconst LIP = 13;\n// The puck's top row when it rests on the lever, and how far it climbs to the bell.\nconst REST = 106;\nconst RUN = REST - LIP - 1;\nconst NSEG = 22;\nconst BULBS = 26;\nconst GROUND = 117;\n// The player swings from column 11 onto the rubber of the pad, columns 20..27.\nconst SPOT = 11;\nconst PADX = 24;\nconst PADY = 110;\n// One row is 8.5 cm: a player of 20 rows stands 1.7 m, the run to the bell is 7.8 m.\nconst ROW = 0.085;\nconst G0 = 9.81 / ROW;\nconst [WALK, LIFT, AIM, SWING, WATCH, LOWER] = [0, 1, 2, 3, 4, 5];\nconst DUR = [0, 0.8, 0.35, 0.16, 0, 0.45];\n// The mallet held up behind the head, 120 degrees above the horizontal.\nconst A_BACK = -2.1;\n// Words beside the scale in a 3x5 font, one number a row, and the segment each sits at.\nconst FONT = { B: [6, 5, 6, 5, 6], Y: [5, 5, 2, 2, 2], E: [7, 4, 6, 4, 7], A: [2, 5, 7, 5, 5], F: [7, 4, 6, 4, 4], I: [7, 2, 2, 2, 7], R: [6, 5, 6, 5, 5], G: [3, 4, 5, 5, 3], O: [2, 5, 5, 5, 2], D: [6, 5, 5, 5, 6], H: [5, 5, 7, 5, 5] };\nconst WORDS = [[\"BABY\", 9], [\"FAIR\", 13], [\"GOOD\", 17], [\"HERO\", 21]];\nconst SHIRTS = [[60, 110, 210], [210, 60, 70], [235, 205, 70], [60, 175, 110], [175, 80, 195], [235, 135, 50], [225, 225, 230], [50, 165, 185]];\nconst SKINS = [[225, 172, 132], [165, 112, 76], [240, 200, 166], [125, 84, 58]];\nconst HAIRS = [[34, 22, 16], [96, 58, 26], [205, 165, 84], [18, 18, 24], [150, 150, 156]];\nconst PANTS = [[44, 58, 120], [56, 56, 66], [96, 74, 52], [34, 34, 46]];\nconst GLOW = [[1, 0, 0.34], [-1, 0, 0.34], [0, 1, 0.34], [0, -1, 0.34], [1, 1, 0.14], [-1, 1, 0.14], [1, -1, 0.14], [-1, -1, 0.14], [2, 0, 0.06], [-2, 0, 0.06], [0, 2, 0.06], [0, -2, 0.06]];\nconst FESTOON = [[255, 90, 70], [255, 205, 90], [90, 210, 120], [100, 150, 255]];\nconst FLAGS = [[190, 40, 52], [225, 185, 60], [50, 110, 205], [60, 165, 95], [230, 228, 218]];\n\nfunction hsv(h, s, v) {\n  h -= floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nconst segTop = (i) => REST - 4 * i;\nconst segH = (i) => 4 * i + 2;\nconst bulbY = (i) => 7 + 4 * i;\n\n// Three kinds of player: a child (0), a grown-up (1) and a strongman in a singlet\n// (2), each with the share of the average swing they put into the mallet.\nfunction newPlayer(x, kind = rnd() \u003c 0.2 ? 0 : rnd() \u003c 0.75 ? 1 : 2) {\n  const pick = (a) => a[floor(rnd() * a.length)];\n  const h = [15, 20, 23][kind] + floor(rnd() * (kind === 1 ? 4 : 2));\n  const p = [0.55, 0.8, 1.75][kind] + rnd() * [0.2, 0.4, 0.3][kind];\n  return { x, h, kind, shirt: pick(SHIRTS), skin: pick(SKINS), hair: pick(HAIRS), pants: pick(PANTS), p, walk: rnd() * 6, moving: false };\n}\n\n// The fair behind the game, painted once: sky, stalls, ground and the tower's wood.\nfunction paint(P) {\n  const S = P.bg;\n  const set = (x, y, c, k = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const o = (y * W + x) * 3;\n    S[o] = c[0] * k;\n    S[o + 1] = c[1] * k;\n    S[o + 2] = c[2] * k;\n  };\n  const box = (x0, y0, x1, y1, c, k) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) set(x, y, c, k);\n  };\n  for (let y = 0; y \u003c H; y++) {\n    const u = clamp(y / 114, 0, 1);\n    for (let x = 0; x \u003c W; x++) set(x, y, [3 + 32 * u ** 2.4 + rnd() * 2, 3 + 12 * u ** 2.2, 13 + 30 * u ** 1.6 + rnd() * 2]);\n  }\n  for (let n = 0; n \u003c 30; n++) {\n    const x = floor(rnd() * W);\n    const y = floor(rnd() * 62);\n    if (x \u003c 31 || x > 54) set(x, y, [60, 60, 76], 0.4 + rnd() * 0.6);\n  }\n  for (let y = 28; y \u003c= 36; y++)\n    for (let x = 1; x \u003c= 10; x++) {\n      const d = hypot(x - 5, y - 32);\n      if (d \u003c 3.6 && hypot(x - 6.6, y - 31) > 3) set(x, y, [205, 205, 176], d > 2.8 ? 0.6 : 1);\n    }\n  // Two stalls: a prize booth behind the queue and a hot-dog stand behind the crowd.\n  // Their lit windows sit over the heads, so the people stand against dark boards.\n  for (const [x0, x1, awn, win] of [[0, 15, [30, 125, 135], [104, 116, 138]], [55, 63, [125, 50, 155], [150, 104, 46]]]) {\n    box(x0, 82, x1, 116, [26, 18, 18]);\n    for (let x = x0 + 2; x \u003c x1; x += 4) box(x, 93, x, 116, [20, 14, 14]);\n    box(x0 + 1, 83, x1 - 1, 90, win);\n    box(x0 + 1, 91, x1 - 1, 92, [110, 60, 32]);\n    for (let x = x0; x \u003c= x1; x++) for (let y = 77; y \u003c= 81; y++) set(x, y, floor((x - x0) / 3) % 2 ? [215, 205, 175] : awn, y === 77 ? 0.7 : 1);\n    for (let x = x0; x \u003c= x1; x += 2) set(x, 82, floor((x - x0) / 3) % 2 ? [215, 205, 175] : awn, 0.8);\n  }\n  for (const [x, c] of [[3, [205, 95, 150]], [7, [90, 150, 225]], [11, [235, 205, 85]]]) box(x - 1, 85, x + 1, 87, c, 0.85);\n  box(57, 86, 61, 87, [200, 120, 70]);\n  box(0, GROUND, 63, H - 1, [30, 22, 18]);\n  box(0, GROUND, 63, GROUND, [46, 34, 26]);\n  for (let n = 0; n \u003c 160; n++) set(floor(rnd() * W), GROUND + 1 + floor(rnd() * 10), [44, 32, 24], 0.7 + rnd() * 0.5);\n  // The posts, striped like a barber's pole and rounded by shade.\n  for (let y = 2; y \u003c= 109; y++)\n    for (let c = 0; c \u003c 3; c++) {\n      const sh = [0.68, 1, 0.82][c];\n      set(PL + c, y, floor((y + 40 - c * 1.5) / 4) % 2 ? [225, 205, 165] : [180, 26, 36], sh);\n      set(PR + c, y, floor((y + 40 - (2 - c) * 1.5) / 4) % 2 ? [225, 205, 165] : [180, 26, 36], sh);\n    }\n  box(PL + 3, 5, PR - 1, 109, [14, 16, 42]);\n  box(PL + 3, 5, PL + 3, 109, [28, 30, 64]);\n  box(PR - 1, 5, PR - 1, 109, [28, 30, 64]);\n  box(33, 2, 52, 4, [150, 24, 30]);\n  box(33, 2, 52, 2, [205, 155, 64]);\n  box(33, 4, 52, 4, [120, 86, 36]);\n  for (const x of [34, 50]) box(x, 0, x + 1, 1, [215, 170, 70]);\n  // The rail with its stop under the bell.\n  for (let y = 14; y \u003c= 109; y++) {\n    set(42, y, [130, 134, 150]);\n    set(43, y, [70, 74, 90]);\n  }\n  box(40, 14, 45, 14, [90, 92, 104]);\n  // The base and its lever out to the pad.\n  box(30, 110, 55, 116, [100, 22, 28]);\n  box(30, 110, 55, 110, [195, 145, 62]);\n  box(30, 116, 55, 116, [50, 12, 16]);\n  for (let x = 32; x \u003c= 53; x += 3) set(x, 113, [195, 145, 62], 0.8);\n  box(28, 112, 30, 113, [70, 70, 78]);\n  box(19, 111, 28, 116, [44, 44, 52]);\n  box(19, 111, 28, 111, [80, 80, 92]);\n  // The light of the bulbs over the sky, the posts and the ground, and the wide\n  // flash of a ring round the bell.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const d = min(abs(x - 33), abs(x - 52));\n      const v = smooth((y - 1) / 8) * smooth((118 - y) / 10);\n      let g = v * (0.26 * exp(-(d * d) / 30) + 0.08 * exp(-d / 14));\n      if (y >= GROUND - 6) {\n        const dx = (x - CX) / 20;\n        g += 0.14 * exp(-dx * dx) * exp(-abs(y - GROUND) / 6);\n      }\n      P.glowM[p] = g;\n      P.flashM[p] = 0.55 * exp(-hypot(x - CX, (y - 10) * 0.8) / 24) + 0.07;\n    }\n}\n\n// Where the active player's shoulder is, and the mallet's reach and angles from it.\nfunction grip(P, A) {\n  const sx = round(A.x) + 0.5;\n  const sy = GROUND - A.h + 5;\n  const tx = PADX - sx;\n  const ty = PADY - 2 - sy;\n  P.mS = [sx, sy];\n  P.mL = hypot(tx, ty);\n  P.aHit = atan2(ty, tx);\n  P.aRest = asin(clamp((GROUND - 2 - sy) / P.mL, -1, 1));\n}\n\n// The swing lands: the pad gives, and the puck leaves the lever at the speed\n// the swing gave it. Gravity alone decides how high that is.\nfunction strike(P) {\n  const A = P.q[0];\n  const f = P.big ? 1.35 * (P.g / G0) : (P.str / 100) * A.p * (0.9 + 0.2 * rnd());\n  P.big = false;\n  Object.assign(P, { vel: sqrt(2 * G0 * f * RUN), hgt: 0, fly: true, peak: 0, lit: 0, padDip: 1, hitT: 0, restT: 0 });\n}\n\nfunction ring(P, v) {\n  P.ringT = 0;\n  P.ringA = clamp(0.65 + v / 150, 0.65, 1);\n  for (let n = 0; n \u003c 26; n++) {\n    const a = rnd() * 6.283;\n    const s = 22 + rnd() * 40;\n    P.sparks.push([CX + cos(a) * 3, 10 + sin(a) * 2, cos(a) * s, sin(a) * s * 0.8 - 12, 0.8 + rnd() * 0.7]);\n  }\n}\n\nfunction puck(P, h) {\n  if (!P.fly) {\n    P.restT += h;\n    if (P.restT > 1.4) P.lit = max(0, P.lit - 26 * h);\n    return;\n  }\n  const g = P.g;\n  const h0 = P.hgt;\n  const v0 = P.vel;\n  let y = h0 + v0 * h - 0.5 * g * h * h;\n  P.vel = v0 - g * h;\n  if (y >= RUN) {\n    const hit = sqrt(max(0, v0 * v0 - 2 * g * (RUN - h0)));\n    y = RUN;\n    P.vel = -0.3 * hit;\n    ring(P, hit);\n  }\n  if (y \u003c= 0 && P.vel \u003c 0) {\n    y = 0;\n    if (P.vel \u003c -40) P.vel *= -0.24;\n    else Object.assign(P, { vel: 0, fly: false, restT: 0 });\n  }\n  P.hgt = y;\n  P.peak = max(P.peak, y);\n  let n = 0;\n  while (n \u003c NSEG && segH(n) \u003c= P.peak) n++;\n  P.lit = max(P.lit, n);\n}\n\nfunction walkTo(F, target, v, h) {\n  const d = target - F.x;\n  F.moving = abs(d) > 0.05;\n  if (!F.moving) return true;\n  F.x += clamp(d, -v * h, v * h);\n  F.walk += h * 10;\n  return false;\n}\n\nfunction tick(P, h) {\n  P.t += h;\n  P.pt += h;\n  P.chase += h * 5;\n  P.aPrev = P.a;\n  const A = P.q[0];\n  const ph = P.ph;\n  if (ph === WALK) {\n    if (walkTo(A, SPOT, 16, h)) {\n      grip(P, A);\n      P.a = P.aPrev = P.aRest;\n      Object.assign(P, { ph: LIFT, pt: 0 });\n    }\n  } else if (ph === LIFT) P.a = P.aRest + (A_BACK - P.aRest) * smooth(P.pt / DUR[LIFT]);\n  else if (ph === AIM) P.a = A_BACK + 0.05 * sin(P.pt * 18);\n  else if (ph === SWING) {\n    const u = min(1, P.pt / DUR[SWING]);\n    P.a = A_BACK + (P.aHit - A_BACK) * u * u;\n    if (u >= 1) {\n      strike(P);\n      Object.assign(P, { ph: WATCH, pt: 0 });\n    }\n  } else if (ph === WATCH) {\n    P.a = P.aHit - 0.22 * max(0, sin(min(P.pt, 0.3) * 10.5)) * exp(-P.pt * 4);\n    if (!P.fly && P.restT > 0.45) Object.assign(P, { ph: LOWER, pt: 0 });\n  } else if (ph === LOWER) {\n    P.a = P.aHit + (P.aRest - P.aHit) * smooth(P.pt / DUR[LOWER]);\n    if (P.pt >= DUR[LOWER]) {\n      P.leavers.push(P.q.shift());\n      P.q.push(newPlayer(P.q[P.q.length - 1].x - 7 - rnd() * 3));\n      Object.assign(P, { ph: WALK, pt: 0 });\n    }\n  }\n  if ((ph === LIFT || ph === AIM) && P.pt >= DUR[ph]) Object.assign(P, { ph: ph + 1, pt: 0 });\n  for (let i = 1; i \u003c P.q.length; i++) walkTo(P.q[i], min(P.q[i - 1].x - 7, SPOT - 7 * i), 16, h);\n  for (const F of P.leavers) walkTo(F, 99, 16, h);\n  P.leavers = P.leavers.filter((F) => F.x \u003c 72);\n  puck(P, h);\n  P.ringT += h;\n  P.hitT += h;\n  P.padDip = max(0, P.padDip - h * 8);\n  for (const s of P.sparks) {\n    s[2] *= 1 - 1.2 * h;\n    s[3] += 60 * h;\n    s[0] += s[2] * h;\n    s[1] += s[3] * h;\n    s[4] -= h;\n  }\n  P.sparks = P.sparks.filter((s) => s[4] > 0);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), bg: F(N * 3), glowM: F(N), flashM: F(N), bl: F(BULBS + 6) });\n  paint(P);\n  // The queue opens with a grown-up at the pad, a strongman behind and then a child.\n  P.q = [1, 2, 0, undefined].map((kind, i) => newPlayer(SPOT - 7 * i, kind));\n  P.crowd = [newPlayer(57, 1), newPlayer(62, 1)];\n  P.segCol = Array.from({ length: NSEG }, (_, i) => hsv(0.36 - (0.37 * i) / (NSEG - 1), 0.85, 1));\n  Object.assign(P, { t: 0, ph: LIFT, pt: 0.2, hgt: 0, vel: 0, fly: false, peak: 0, lit: 0, restT: 9, ringT: 9, ringA: 0 });\n  Object.assign(P, { padDip: 0, hitT: 9, big: false, chase: 0, leavers: [], sparks: [], speed: 1, str: 60, g: G0, col: [255, 196, 71], prevY: REST });\n  grip(P, P.q[0]);\n  P.a = P.aPrev = P.aRest + (A_BACK - P.aRest) * smooth(0.2 / DUR[LIFT]);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 60, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.col = hsv(0.115 + clamp(k[0], 0, 1), 0.72, 1);\n  P.speed = clamp(k[1], 0.2, 3) / 2;\n  P.str = clamp(k[2], 60, 130);\n  P.g = G0 * 2 ** (0.8 * clamp(k[3], -1, 1));\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.big = true;\n    if (P.ph === LIFT || P.ph === AIM) Object.assign(P, { ph: SWING, pt: 0 });\n  }\n  P.prevY = REST - P.hgt;\n  const h = dt * P.speed;\n  const steps = Math.ceil(h / 0.02);\n  for (let i = 0; i \u003c steps; i++) tick(P, h / steps);\n}\n\nfunction put(P, x, y, c, k = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  P.buf[o] = c[0] * k;\n  P.buf[o + 1] = c[1] * k;\n  P.buf[o + 2] = c[2] * k;\n}\n\nfunction add(P, x, y, c, k) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  P.buf[o] += c[0] * k;\n  P.buf[o + 1] += c[1] * k;\n  P.buf[o + 2] += c[2] * k;\n}\n\nfunction base(P, gl, fl) {\n  const { buf, bg, glowM, flashM, col } = P;\n  const [r, g, b] = col;\n  const fr = (r + 255) * 0.5 * fl;\n  const fg = (g + 255) * 0.5 * fl;\n  const fb = (b + 255) * 0.5 * fl;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const k = glowM[p] * gl;\n    const f = flashM[p];\n    buf[o] = bg[o] + r * k + fr * f;\n    buf[o + 1] = bg[o + 1] + g * k + fg * f;\n    buf[o + 2] = bg[o + 2] + b * k + fb * f;\n  }\n}\n\nfunction scale(P) {\n  const ring = P.ringT \u003c 1.4 && floor(P.ringT * 8) % 2 === 0;\n  const top = P.fly || P.lit \u003c 1 ? -1 : floor(P.lit - 0.001);\n  const blink = floor(P.t * 6) % 2 === 0;\n  for (let i = 0; i \u003c NSEG; i++) {\n    const c = P.segCol[i];\n    const on = ring || i \u003c P.lit - 0.5;\n    const k = on ? (i === top && blink ? 0.45 : 1) : 0.17;\n    for (let r = 0; r \u003c 3; r++)\n      for (let x = 38; x \u003c= 47; x++) if (x \u003c 42 || x > 43) put(P, x, segTop(i) + r, c, k * (r === 2 ? 0.72 : 1) * (x === 38 || x === 47 ? 0.8 : 1));\n  }\n  for (const [w, i] of WORDS) {\n    const on = ring || i \u003c P.lit - 0.5;\n    const c = on ? P.segCol[i].map((v) => v * 0.7 + 76) : [62, 50, 40];\n    for (let n = 0; n \u003c 4; n++)\n      for (let y = 0; y \u003c 5; y++) for (let x = 0; x \u003c 3; x++) if ((FONT[w[n]][y] >> (2 - x)) & 1) put(P, 14 + n * 4 + x, segTop(i) - 1 + y, c);\n  }\n}\n\nfunction drawPuck(P) {\n  const y = REST - P.hgt;\n  const y0 = P.prevY;\n  if (abs(y - y0) > 1.5) {\n    const n = abs(y - y0);\n    for (let s = 1; s \u003c n; s++) {\n      const k = 0.7 * (1 - s / n);\n      const yy = y + Math.sign(y0 - y) * s + 1;\n      add(P, 42, yy, [150, 170, 255], k);\n      add(P, 43, yy, [150, 170, 255], k);\n    }\n  }\n  const yi = round(y);\n  for (let x = 41; x \u003c= 44; x++) {\n    const e = x === 41 || x === 44 ? 0.8 : 1;\n    put(P, x, yi, [250, 250, 255], e);\n    put(P, x, yi + 1, [205, 212, 230], e);\n    put(P, x, yi + 2, [110, 116, 136], e);\n  }\n}\n\nfunction bell(P) {\n  const s = P.ringT \u003c 1.6 ? round(sin(P.ringT * 42) * 1.3 * exp(-P.ringT * 2.2)) : 0;\n  const fl = P.ringT \u003c 1 ? exp(-P.ringT * 4) * P.ringA : 0;\n  const HW = [1.5, 3, 4, 4.5, 5, 5.5, 5.5, 6];\n  put(P, CX - 0.5, 5, [60, 60, 70]);\n  put(P, CX + 0.5, 5, [60, 60, 70]);\n  for (let r = 0; r \u003c 8; r++) {\n    const y = 6 + r;\n    const hw = HW[r];\n    for (let x = floor(CX - hw); x \u003c CX + hw; x++) {\n      const u = (x + 0.5 - CX) / hw;\n      let k = 0.55 + 0.45 * clamp(1 - abs(u + 0.35) * 1.3, 0, 1);\n      if (r === 7) k = 0.85 - 0.25 * u;\n      const c = [222 * k + 255 * fl, 168 * k + 240 * fl, 70 * k + 200 * fl];\n      put(P, x + s, y, c);\n    }\n  }\n}\n\nfunction bulbs(P) {\n  const L = P.bl;\n  const ch = floor(P.chase);\n  const ringing = P.ringT \u003c 1.8;\n  let sum = 0;\n  for (let i = 0; i \u003c BULBS + 6; i++) {\n    let v;\n    if (i \u003c BULBS) {\n      const up = BULBS - 1 - i;\n      v = (up + 999 - ch) % 3 === 0 ? 0.9 : 0.2;\n      if (REST + 1 - bulbY(i) \u003c= 4 * P.lit) v = 1;\n    } else v = (i + ch) % 2 ? 1 : 0.35;\n    if (ringing) v = floor(P.ringT * 9) % 2 ? 0.25 : 1;\n    L[i] = v;\n    sum += v;\n  }\n  return sum / (BULBS + 6);\n}\n\nfunction drawBulbs(P) {\n  const c = P.col;\n  const core = c.map((v) => v * 0.6 + 102);\n  const at = (x, y, v) => {\n    put(P, x, y, core, 0.25 + 0.75 * v);\n    for (const [dx, dy, w] of GLOW) add(P, x + dx, y + dy, c, w * v);\n  };\n  for (let i = 0; i \u003c BULBS; i++) {\n    at(33, bulbY(i), P.bl[i]);\n    at(52, bulbY(i), P.bl[i]);\n  }\n  for (let i = 0; i \u003c 6; i++) at(35 + 3 * i, 3, P.bl[BULBS + i]);\n  // Festoons along the stall awnings.\n  for (let x = 0; x \u003c= 63; x += 3) {\n    if (x > 15 && x \u003c 55) continue;\n    const tw = 0.75 + 0.25 * sin(P.t * 3 + x);\n    put(P, x, 76, FESTOON[(x / 3) % 4], tw);\n  }\n}\n\n// Bunting from the crossbar down to the stalls, swaying in the night air.\nfunction bunting(P) {\n  for (const [x0, y0, x1, y1, sag] of [[0, 15, 33, 3, 5], [52, 3, 63, 17, 3]]) {\n    const s = sag + 0.9 * sin(P.t * 1.1 + x0);\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      const y = round(y0 + (y1 - y0) * u + s * 4 * u * (1 - u));\n      put(P, x, y, [44, 40, 46]);\n      const n = x - x0 - 2;\n      if (n % 5 || x === x0 || x === x1) continue;\n      const c = FLAGS[(n / 5) % 5];\n      const k = 0.55 + 0.25 * sin(P.t * 2.3 + x);\n      for (let r = 1; r \u003c= 3; r++) for (let dx = -1; dx \u003c= 1; dx++) if (abs(dx) \u003c= 2 - r + (r === 1)) put(P, x + dx, y + r, c, k * (dx \u003c 0 ? 0.8 : 1));\n    }\n  }\n}\n\n// A person facing right (or left), feet on the ground row, lit from the tower's side.\nfunction person(P, F, left, dim, held, cheer) {\n  const cx = round(F.x);\n  const top = GROUND - F.h;\n  const col = (dx) => (left ? cx - 1 - dx : cx + dx);\n  const T = [F.shirt, F.pants, F.skin, F.hair].map((c) => [c.map((v) => v * dim * 0.78), c.map((v) => v * dim * 1.05)]);\n  const tone = (n, x) => T[n][x > cx - 1 ? 1 : 0];\n  const arm = F.kind === 2 ? F.skin : F.shirt;\n  const torso = round(F.h * 0.36);\n  const legTop = top + 4 + torso;\n  const sw = F.moving ? sin(F.walk) : 0;\n  for (let y = legTop; y \u003c GROUND; y++) {\n    const off = round(((sw * 1.6 * (y - legTop)) / (GROUND - legTop)) * (left ? -1 : 1));\n    for (let dx = -2; dx \u003c= 1; dx++) {\n      const x = col(dx) + (dx \u003c 0 ? -off : off);\n      put(P, x, y, y === GROUND - 1 ? [30, 26, 24] : tone(1, x), dx === -1 || dx === 1 ? 0.85 : 1);\n    }\n  }\n  if (!F.moving) put(P, col(2), GROUND - 1, [30, 26, 24]);\n  for (let y = top + 4; y \u003c legTop; y++) for (let dx = -2; dx \u003c= (F.kind === 2 ? 2 : 1); dx++) put(P, col(dx), y, tone(0, col(dx)));\n  for (let y = top; y \u003c top + 4; y++)\n    for (let dx = -1; dx \u003c= 1; dx++) put(P, col(dx), y, tone(y === top || (dx === -1 && y === top + 1) ? 3 : 2, col(dx)));\n  if (held) return;\n  if (cheer) {\n    for (let y = top - 2; y \u003c top + 5; y++) {\n      put(P, col(2), y, y \u003c top ? F.skin : arm, dim);\n      put(P, col(-3), y, y \u003c top ? F.skin : arm, dim * 0.8);\n    }\n    return;\n  }\n  const hx = col(0) + round(sw * 1.2) * (left ? -1 : 1);\n  for (let y = top + 5; y \u003c legTop + 1; y++) put(P, y \u003c legTop - 1 ? col(0) : hx, y, y === legTop ? F.skin : arm, dim * 0.85);\n}\n\nfunction mallet(P) {\n  const [sx, sy] = P.mS;\n  const L = P.mL;\n  const head = (a, k) => {\n    const dx = cos(a);\n    const dy = sin(a);\n    for (let u = -1.5; u \u003c= 1.5; u += 0.5)\n      for (let v = -2.5; v \u003c= 2.5; v += 0.5) {\n        const c = abs(v) > 1.7 ? [170, 170, 184] : u \u003c -0.7 ? [150, 96, 46] : [210, 146, 76];\n        put(P, sx + dx * (L + u) - dy * v - 0.5, sy + dy * (L + u) + dx * v - 0.5, c, k);\n      }\n  };\n  if (P.ph === SWING || (P.ph === WATCH && P.pt \u003c 0.05)) for (let n = 1; n \u003c= 3; n++) head(P.a + (P.aPrev - P.a) * (n / 3), 0.32);\n  const dx = cos(P.a);\n  const dy = sin(P.a);\n  for (let t = 4; t \u003c= L - 1.5; t += 0.5) put(P, sx + dx * t - 0.5, sy + dy * t - 0.5, [196, 150, 92]);\n  head(P.a, 1);\n  const A = P.q[0];\n  if (P.ph === WALK) return;\n  for (let t = 0; t \u003c= 6; t += 0.5) put(P, sx + dx * t - 0.5, sy + dy * t - 0.5, t > 4.5 || A.kind === 2 ? A.skin : A.shirt, t > 4.5 ? 1 : 0.9);\n}\n\nfunction arcs(P) {\n  if (P.ringT > 1.4) return;\n  const c = P.col.map((v) => v * 0.5 + 128);\n  for (let n = 0; n \u003c 2; n++) {\n    const r = 8 + (P.ringT - 0.28 * n) * 34;\n    if (r \u003c 8) continue;\n    const k = P.ringA * clamp(1 - (r - 8) / 44, 0, 1);\n    for (let a = -0.9; a \u003c= 0.9; a += 0.6 / r) {\n      add(P, CX - 0.5 - r * cos(a), 9 + r * sin(a) * 0.9, c, k);\n      add(P, CX - 0.5 + r * cos(a), 9 + r * sin(a) * 0.9, c, k);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const gl = bulbs(P);\n  const fl = P.ringT \u003c 2.5 ? P.ringA * exp(-P.ringT * 2.2) : 0;\n  base(P, 0.25 + 0.75 * gl, fl);\n  bunting(P);\n  scale(P);\n  drawPuck(P);\n  bell(P);\n  drawBulbs(P);\n  // The pad's rubber, pressed down a row by the blow.\n  const dip = P.padDip > 0.3 ? 1 : 0;\n  for (let x = 20; x \u003c= 27; x++) {\n    put(P, x, PADY + dip, [150, 34, 34]);\n    put(P, x, PADY + 1, [96, 22, 24]);\n  }\n  if (P.hitT \u003c 0.12) for (const [dx, dy] of [[0, 0], [1, 0], [-1, 0], [0, -1], [2, -1], [-2, -1]]) put(P, PADX + dx - 0.5, PADY - 1 + dy, [255, 250, 230]);\n  const cheer = P.ringT \u003c 1.6;\n  P.crowd.forEach((F, i) => person(P, F, true, 0.62, false, cheer && floor(P.ringT * 6 + i) % 2 === 0));\n  for (let i = P.q.length - 1; i >= 1; i--) person(P, P.q[i], false, 0.78, false, false);\n  const A = P.q[0];\n  person(P, A, false, 1, P.ph !== WALK, false);\n  mallet(P);\n  for (const F of P.leavers) person(P, F, false, 0.95, false, false);\n  arcs(P);\n  const sc = P.col.map((v) => v * 0.45 + 140);\n  for (const [x, y, , , life] of P.sparks) {\n    const k = min(1, life * 1.2);\n    put(P, x, y, sc, k);\n    if (life > 0.9) for (const [dx, dy, w] of GLOW.slice(0, 4)) add(P, x + dx, y + dy, sc, w * k);\n  }\n  flush(display, P.buf);\n}\n\nfunction flush(display, buf) {\n  for (let y = 0, o = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-high-striker","type":"code","name":"high-striker","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   High Striker\n// Family:  fair\n// Idea:    A high striker stands the full height of a night fair: players from a queue take turns swinging a mallet onto the pad, the puck flies up the rail under real gravity lighting the scale it passes and falls back, and a hit hard enough rings the brass bell at the top, so the tower's bulbs flash and the sky lights up.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the strength-tester towers of fairgrounds and seaside piers\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Bulbs=0..1, Speed=0.2..3, Strength=60..130, Gravity=-1..1\n//\n// Knob 1: Bulbs. Turns the bulbs up both edges of the tower round the colour wheel, with the light they throw on the striped posts and the night round the tower, starting from gold.\n// Knob 2: Speed. How fast the fair runs: at 2 everything moves in real time, a full flight to the bell takes 1.26 s each way; at 0.2 it is ten times slower, at 3 half as fast again.\n// Knob 3: Strength. How hard the players hit on average, as the share of the run to the bell an average swing sends the puck: 60% at the minimum, where an average grown-up just lights FAIR, to 130%, where nearly every grown-up rings the bell. Children hit softer and the strongman harder.\n// Knob 4: Gravity. The pull on the puck, from 0.57 g at -1 through Earth's at the middle to 1.74 g at 1: the same swing sends it higher and slower, or lower and quicker.\n// Buttons: K1 tap makes the next swing a big one that rings the bell, at once if the player is already lifting the mallet.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, round, floor, sin, cos, exp, sqrt, atan2, hypot, asin } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n\n// The tower. Striped posts on columns 34..36 and 49..51 hold a crossbar on rows\n// 2..4, and the bell hangs from it with its mouth on row 13. The board between\n// the posts carries the rail on columns 42 and 43 with the scale either side.\nconst PL = 34;\nconst PR = 49;\nconst CX = 42.5;\nconst LIP = 13;\n// The puck's top row when it rests on the lever, and how far it climbs to the bell.\nconst REST = 106;\nconst RUN = REST - LIP - 1;\nconst NSEG = 22;\nconst BULBS = 26;\nconst GROUND = 117;\n// The player swings from column 11 onto the rubber of the pad, columns 20..27.\nconst SPOT = 11;\nconst PADX = 24;\nconst PADY = 110;\n// One row is 8.5 cm: a player of 20 rows stands 1.7 m, the run to the bell is 7.8 m.\nconst ROW = 0.085;\nconst G0 = 9.81 / ROW;\nconst [WALK, LIFT, AIM, SWING, WATCH, LOWER] = [0, 1, 2, 3, 4, 5];\nconst DUR = [0, 0.8, 0.35, 0.16, 0, 0.45];\n// The mallet held up behind the head, 120 degrees above the horizontal.\nconst A_BACK = -2.1;\n// Words beside the scale in a 3x5 font, one number a row, and the segment each sits at.\nconst FONT = { B: [6, 5, 6, 5, 6], Y: [5, 5, 2, 2, 2], E: [7, 4, 6, 4, 7], A: [2, 5, 7, 5, 5], F: [7, 4, 6, 4, 4], I: [7, 2, 2, 2, 7], R: [6, 5, 6, 5, 5], G: [3, 4, 5, 5, 3], O: [2, 5, 5, 5, 2], D: [6, 5, 5, 5, 6], H: [5, 5, 7, 5, 5] };\nconst WORDS = [[\"BABY\", 9], [\"FAIR\", 13], [\"GOOD\", 17], [\"HERO\", 21]];\nconst SHIRTS = [[60, 110, 210], [210, 60, 70], [235, 205, 70], [60, 175, 110], [175, 80, 195], [235, 135, 50], [225, 225, 230], [50, 165, 185]];\nconst SKINS = [[225, 172, 132], [165, 112, 76], [240, 200, 166], [125, 84, 58]];\nconst HAIRS = [[34, 22, 16], [96, 58, 26], [205, 165, 84], [18, 18, 24], [150, 150, 156]];\nconst PANTS = [[44, 58, 120], [56, 56, 66], [96, 74, 52], [34, 34, 46]];\nconst GLOW = [[1, 0, 0.34], [-1, 0, 0.34], [0, 1, 0.34], [0, -1, 0.34], [1, 1, 0.14], [-1, 1, 0.14], [1, -1, 0.14], [-1, -1, 0.14], [2, 0, 0.06], [-2, 0, 0.06], [0, 2, 0.06], [0, -2, 0.06]];\nconst FESTOON = [[255, 90, 70], [255, 205, 90], [90, 210, 120], [100, 150, 255]];\nconst FLAGS = [[190, 40, 52], [225, 185, 60], [50, 110, 205], [60, 165, 95], [230, 228, 218]];\n\nfunction hsv(h, s, v) {\n  h -= floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nconst segTop = (i) => REST - 4 * i;\nconst segH = (i) => 4 * i + 2;\nconst bulbY = (i) => 7 + 4 * i;\n\n// Three kinds of player: a child (0), a grown-up (1) and a strongman in a singlet\n// (2), each with the share of the average swing they put into the mallet.\nfunction newPlayer(x, kind = rnd() \u003c 0.2 ? 0 : rnd() \u003c 0.75 ? 1 : 2) {\n  const pick = (a) => a[floor(rnd() * a.length)];\n  const h = [15, 20, 23][kind] + floor(rnd() * (kind === 1 ? 4 : 2));\n  const p = [0.55, 0.8, 1.75][kind] + rnd() * [0.2, 0.4, 0.3][kind];\n  return { x, h, kind, shirt: pick(SHIRTS), skin: pick(SKINS), hair: pick(HAIRS), pants: pick(PANTS), p, walk: rnd() * 6, moving: false };\n}\n\n// The fair behind the game, painted once: sky, stalls, ground and the tower's wood.\nfunction paint(P) {\n  const S = P.bg;\n  const set = (x, y, c, k = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const o = (y * W + x) * 3;\n    S[o] = c[0] * k;\n    S[o + 1] = c[1] * k;\n    S[o + 2] = c[2] * k;\n  };\n  const box = (x0, y0, x1, y1, c, k) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) set(x, y, c, k);\n  };\n  for (let y = 0; y \u003c H; y++) {\n    const u = clamp(y / 114, 0, 1);\n    for (let x = 0; x \u003c W; x++) set(x, y, [3 + 32 * u ** 2.4 + rnd() * 2, 3 + 12 * u ** 2.2, 13 + 30 * u ** 1.6 + rnd() * 2]);\n  }\n  for (let n = 0; n \u003c 30; n++) {\n    const x = floor(rnd() * W);\n    const y = floor(rnd() * 62);\n    if (x \u003c 31 || x > 54) set(x, y, [60, 60, 76], 0.4 + rnd() * 0.6);\n  }\n  for (let y = 28; y \u003c= 36; y++)\n    for (let x = 1; x \u003c= 10; x++) {\n      const d = hypot(x - 5, y - 32);\n      if (d \u003c 3.6 && hypot(x - 6.6, y - 31) > 3) set(x, y, [205, 205, 176], d > 2.8 ? 0.6 : 1);\n    }\n  // Two stalls: a prize booth behind the queue and a hot-dog stand behind the crowd.\n  // Their lit windows sit over the heads, so the people stand against dark boards.\n  for (const [x0, x1, awn, win] of [[0, 15, [30, 125, 135], [104, 116, 138]], [55, 63, [125, 50, 155], [150, 104, 46]]]) {\n    box(x0, 82, x1, 116, [26, 18, 18]);\n    for (let x = x0 + 2; x \u003c x1; x += 4) box(x, 93, x, 116, [20, 14, 14]);\n    box(x0 + 1, 83, x1 - 1, 90, win);\n    box(x0 + 1, 91, x1 - 1, 92, [110, 60, 32]);\n    for (let x = x0; x \u003c= x1; x++) for (let y = 77; y \u003c= 81; y++) set(x, y, floor((x - x0) / 3) % 2 ? [215, 205, 175] : awn, y === 77 ? 0.7 : 1);\n    for (let x = x0; x \u003c= x1; x += 2) set(x, 82, floor((x - x0) / 3) % 2 ? [215, 205, 175] : awn, 0.8);\n  }\n  for (const [x, c] of [[3, [205, 95, 150]], [7, [90, 150, 225]], [11, [235, 205, 85]]]) box(x - 1, 85, x + 1, 87, c, 0.85);\n  box(57, 86, 61, 87, [200, 120, 70]);\n  box(0, GROUND, 63, H - 1, [30, 22, 18]);\n  box(0, GROUND, 63, GROUND, [46, 34, 26]);\n  for (let n = 0; n \u003c 160; n++) set(floor(rnd() * W), GROUND + 1 + floor(rnd() * 10), [44, 32, 24], 0.7 + rnd() * 0.5);\n  // The posts, striped like a barber's pole and rounded by shade.\n  for (let y = 2; y \u003c= 109; y++)\n    for (let c = 0; c \u003c 3; c++) {\n      const sh = [0.68, 1, 0.82][c];\n      set(PL + c, y, floor((y + 40 - c * 1.5) / 4) % 2 ? [225, 205, 165] : [180, 26, 36], sh);\n      set(PR + c, y, floor((y + 40 - (2 - c) * 1.5) / 4) % 2 ? [225, 205, 165] : [180, 26, 36], sh);\n    }\n  box(PL + 3, 5, PR - 1, 109, [14, 16, 42]);\n  box(PL + 3, 5, PL + 3, 109, [28, 30, 64]);\n  box(PR - 1, 5, PR - 1, 109, [28, 30, 64]);\n  box(33, 2, 52, 4, [150, 24, 30]);\n  box(33, 2, 52, 2, [205, 155, 64]);\n  box(33, 4, 52, 4, [120, 86, 36]);\n  for (const x of [34, 50]) box(x, 0, x + 1, 1, [215, 170, 70]);\n  // The rail with its stop under the bell.\n  for (let y = 14; y \u003c= 109; y++) {\n    set(42, y, [130, 134, 150]);\n    set(43, y, [70, 74, 90]);\n  }\n  box(40, 14, 45, 14, [90, 92, 104]);\n  // The base and its lever out to the pad.\n  box(30, 110, 55, 116, [100, 22, 28]);\n  box(30, 110, 55, 110, [195, 145, 62]);\n  box(30, 116, 55, 116, [50, 12, 16]);\n  for (let x = 32; x \u003c= 53; x += 3) set(x, 113, [195, 145, 62], 0.8);\n  box(28, 112, 30, 113, [70, 70, 78]);\n  box(19, 111, 28, 116, [44, 44, 52]);\n  box(19, 111, 28, 111, [80, 80, 92]);\n  // The light of the bulbs over the sky, the posts and the ground, and the wide\n  // flash of a ring round the bell.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const d = min(abs(x - 33), abs(x - 52));\n      const v = smooth((y - 1) / 8) * smooth((118 - y) / 10);\n      let g = v * (0.26 * exp(-(d * d) / 30) + 0.08 * exp(-d / 14));\n      if (y >= GROUND - 6) {\n        const dx = (x - CX) / 20;\n        g += 0.14 * exp(-dx * dx) * exp(-abs(y - GROUND) / 6);\n      }\n      P.glowM[p] = g;\n      P.flashM[p] = 0.55 * exp(-hypot(x - CX, (y - 10) * 0.8) / 24) + 0.07;\n    }\n}\n\n// Where the active player's shoulder is, and the mallet's reach and angles from it.\nfunction grip(P, A) {\n  const sx = round(A.x) + 0.5;\n  const sy = GROUND - A.h + 5;\n  const tx = PADX - sx;\n  const ty = PADY - 2 - sy;\n  P.mS = [sx, sy];\n  P.mL = hypot(tx, ty);\n  P.aHit = atan2(ty, tx);\n  P.aRest = asin(clamp((GROUND - 2 - sy) / P.mL, -1, 1));\n}\n\n// The swing lands: the pad gives, and the puck leaves the lever at the speed\n// the swing gave it. Gravity alone decides how high that is.\nfunction strike(P) {\n  const A = P.q[0];\n  const f = P.big ? 1.35 * (P.g / G0) : (P.str / 100) * A.p * (0.9 + 0.2 * rnd());\n  P.big = false;\n  Object.assign(P, { vel: sqrt(2 * G0 * f * RUN), hgt: 0, fly: true, peak: 0, lit: 0, padDip: 1, hitT: 0, restT: 0 });\n}\n\nfunction ring(P, v) {\n  P.ringT = 0;\n  P.ringA = clamp(0.65 + v / 150, 0.65, 1);\n  for (let n = 0; n \u003c 26; n++) {\n    const a = rnd() * 6.283;\n    const s = 22 + rnd() * 40;\n    P.sparks.push([CX + cos(a) * 3, 10 + sin(a) * 2, cos(a) * s, sin(a) * s * 0.8 - 12, 0.8 + rnd() * 0.7]);\n  }\n}\n\nfunction puck(P, h) {\n  if (!P.fly) {\n    P.restT += h;\n    if (P.restT > 1.4) P.lit = max(0, P.lit - 26 * h);\n    return;\n  }\n  const g = P.g;\n  const h0 = P.hgt;\n  const v0 = P.vel;\n  let y = h0 + v0 * h - 0.5 * g * h * h;\n  P.vel = v0 - g * h;\n  if (y >= RUN) {\n    const hit = sqrt(max(0, v0 * v0 - 2 * g * (RUN - h0)));\n    y = RUN;\n    P.vel = -0.3 * hit;\n    ring(P, hit);\n  }\n  if (y \u003c= 0 && P.vel \u003c 0) {\n    y = 0;\n    if (P.vel \u003c -40) P.vel *= -0.24;\n    else Object.assign(P, { vel: 0, fly: false, restT: 0 });\n  }\n  P.hgt = y;\n  P.peak = max(P.peak, y);\n  let n = 0;\n  while (n \u003c NSEG && segH(n) \u003c= P.peak) n++;\n  P.lit = max(P.lit, n);\n}\n\nfunction walkTo(F, target, v, h) {\n  const d = target - F.x;\n  F.moving = abs(d) > 0.05;\n  if (!F.moving) return true;\n  F.x += clamp(d, -v * h, v * h);\n  F.walk += h * 10;\n  return false;\n}\n\nfunction tick(P, h) {\n  P.t += h;\n  P.pt += h;\n  P.chase += h * 5;\n  P.aPrev = P.a;\n  const A = P.q[0];\n  const ph = P.ph;\n  if (ph === WALK) {\n    if (walkTo(A, SPOT, 16, h)) {\n      grip(P, A);\n      P.a = P.aPrev = P.aRest;\n      Object.assign(P, { ph: LIFT, pt: 0 });\n    }\n  } else if (ph === LIFT) P.a = P.aRest + (A_BACK - P.aRest) * smooth(P.pt / DUR[LIFT]);\n  else if (ph === AIM) P.a = A_BACK + 0.05 * sin(P.pt * 18);\n  else if (ph === SWING) {\n    const u = min(1, P.pt / DUR[SWING]);\n    P.a = A_BACK + (P.aHit - A_BACK) * u * u;\n    if (u >= 1) {\n      strike(P);\n      Object.assign(P, { ph: WATCH, pt: 0 });\n    }\n  } else if (ph === WATCH) {\n    P.a = P.aHit - 0.22 * max(0, sin(min(P.pt, 0.3) * 10.5)) * exp(-P.pt * 4);\n    if (!P.fly && P.restT > 0.45) Object.assign(P, { ph: LOWER, pt: 0 });\n  } else if (ph === LOWER) {\n    P.a = P.aHit + (P.aRest - P.aHit) * smooth(P.pt / DUR[LOWER]);\n    if (P.pt >= DUR[LOWER]) {\n      P.leavers.push(P.q.shift());\n      P.q.push(newPlayer(P.q[P.q.length - 1].x - 7 - rnd() * 3));\n      Object.assign(P, { ph: WALK, pt: 0 });\n    }\n  }\n  if ((ph === LIFT || ph === AIM) && P.pt >= DUR[ph]) Object.assign(P, { ph: ph + 1, pt: 0 });\n  for (let i = 1; i \u003c P.q.length; i++) walkTo(P.q[i], min(P.q[i - 1].x - 7, SPOT - 7 * i), 16, h);\n  for (const F of P.leavers) walkTo(F, 99, 16, h);\n  P.leavers = P.leavers.filter((F) => F.x \u003c 72);\n  puck(P, h);\n  P.ringT += h;\n  P.hitT += h;\n  P.padDip = max(0, P.padDip - h * 8);\n  for (const s of P.sparks) {\n    s[2] *= 1 - 1.2 * h;\n    s[3] += 60 * h;\n    s[0] += s[2] * h;\n    s[1] += s[3] * h;\n    s[4] -= h;\n  }\n  P.sparks = P.sparks.filter((s) => s[4] > 0);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), bg: F(N * 3), glowM: F(N), flashM: F(N), bl: F(BULBS + 6) });\n  paint(P);\n  // The queue opens with a grown-up at the pad, a strongman behind and then a child.\n  P.q = [1, 2, 0, undefined].map((kind, i) => newPlayer(SPOT - 7 * i, kind));\n  P.crowd = [newPlayer(57, 1), newPlayer(62, 1)];\n  P.segCol = Array.from({ length: NSEG }, (_, i) => hsv(0.36 - (0.37 * i) / (NSEG - 1), 0.85, 1));\n  Object.assign(P, { t: 0, ph: LIFT, pt: 0.2, hgt: 0, vel: 0, fly: false, peak: 0, lit: 0, restT: 9, ringT: 9, ringA: 0 });\n  Object.assign(P, { padDip: 0, hitT: 9, big: false, chase: 0, leavers: [], sparks: [], speed: 1, str: 60, g: G0, col: [255, 196, 71], prevY: REST });\n  grip(P, P.q[0]);\n  P.a = P.aPrev = P.aRest + (A_BACK - P.aRest) * smooth(0.2 / DUR[LIFT]);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 60, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.col = hsv(0.115 + clamp(k[0], 0, 1), 0.72, 1);\n  P.speed = clamp(k[1], 0.2, 3) / 2;\n  P.str = clamp(k[2], 60, 130);\n  P.g = G0 * 2 ** (0.8 * clamp(k[3], -1, 1));\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.big = true;\n    if (P.ph === LIFT || P.ph === AIM) Object.assign(P, { ph: SWING, pt: 0 });\n  }\n  P.prevY = REST - P.hgt;\n  const h = dt * P.speed;\n  const steps = Math.ceil(h / 0.02);\n  for (let i = 0; i \u003c steps; i++) tick(P, h / steps);\n}\n\nfunction put(P, x, y, c, k = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  P.buf[o] = c[0] * k;\n  P.buf[o + 1] = c[1] * k;\n  P.buf[o + 2] = c[2] * k;\n}\n\nfunction add(P, x, y, c, k) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  P.buf[o] += c[0] * k;\n  P.buf[o + 1] += c[1] * k;\n  P.buf[o + 2] += c[2] * k;\n}\n\nfunction base(P, gl, fl) {\n  const { buf, bg, glowM, flashM, col } = P;\n  const [r, g, b] = col;\n  const fr = (r + 255) * 0.5 * fl;\n  const fg = (g + 255) * 0.5 * fl;\n  const fb = (b + 255) * 0.5 * fl;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const k = glowM[p] * gl;\n    const f = flashM[p];\n    buf[o] = bg[o] + r * k + fr * f;\n    buf[o + 1] = bg[o + 1] + g * k + fg * f;\n    buf[o + 2] = bg[o + 2] + b * k + fb * f;\n  }\n}\n\nfunction scale(P) {\n  const ring = P.ringT \u003c 1.4 && floor(P.ringT * 8) % 2 === 0;\n  const top = P.fly || P.lit \u003c 1 ? -1 : floor(P.lit - 0.001);\n  const blink = floor(P.t * 6) % 2 === 0;\n  for (let i = 0; i \u003c NSEG; i++) {\n    const c = P.segCol[i];\n    const on = ring || i \u003c P.lit - 0.5;\n    const k = on ? (i === top && blink ? 0.45 : 1) : 0.17;\n    for (let r = 0; r \u003c 3; r++)\n      for (let x = 38; x \u003c= 47; x++) if (x \u003c 42 || x > 43) put(P, x, segTop(i) + r, c, k * (r === 2 ? 0.72 : 1) * (x === 38 || x === 47 ? 0.8 : 1));\n  }\n  for (const [w, i] of WORDS) {\n    const on = ring || i \u003c P.lit - 0.5;\n    const c = on ? P.segCol[i].map((v) => v * 0.7 + 76) : [62, 50, 40];\n    for (let n = 0; n \u003c 4; n++)\n      for (let y = 0; y \u003c 5; y++) for (let x = 0; x \u003c 3; x++) if ((FONT[w[n]][y] >> (2 - x)) & 1) put(P, 14 + n * 4 + x, segTop(i) - 1 + y, c);\n  }\n}\n\nfunction drawPuck(P) {\n  const y = REST - P.hgt;\n  const y0 = P.prevY;\n  if (abs(y - y0) > 1.5) {\n    const n = abs(y - y0);\n    for (let s = 1; s \u003c n; s++) {\n      const k = 0.7 * (1 - s / n);\n      const yy = y + Math.sign(y0 - y) * s + 1;\n      add(P, 42, yy, [150, 170, 255], k);\n      add(P, 43, yy, [150, 170, 255], k);\n    }\n  }\n  const yi = round(y);\n  for (let x = 41; x \u003c= 44; x++) {\n    const e = x === 41 || x === 44 ? 0.8 : 1;\n    put(P, x, yi, [250, 250, 255], e);\n    put(P, x, yi + 1, [205, 212, 230], e);\n    put(P, x, yi + 2, [110, 116, 136], e);\n  }\n}\n\nfunction bell(P) {\n  const s = P.ringT \u003c 1.6 ? round(sin(P.ringT * 42) * 1.3 * exp(-P.ringT * 2.2)) : 0;\n  const fl = P.ringT \u003c 1 ? exp(-P.ringT * 4) * P.ringA : 0;\n  const HW = [1.5, 3, 4, 4.5, 5, 5.5, 5.5, 6];\n  put(P, CX - 0.5, 5, [60, 60, 70]);\n  put(P, CX + 0.5, 5, [60, 60, 70]);\n  for (let r = 0; r \u003c 8; r++) {\n    const y = 6 + r;\n    const hw = HW[r];\n    for (let x = floor(CX - hw); x \u003c CX + hw; x++) {\n      const u = (x + 0.5 - CX) / hw;\n      let k = 0.55 + 0.45 * clamp(1 - abs(u + 0.35) * 1.3, 0, 1);\n      if (r === 7) k = 0.85 - 0.25 * u;\n      const c = [222 * k + 255 * fl, 168 * k + 240 * fl, 70 * k + 200 * fl];\n      put(P, x + s, y, c);\n    }\n  }\n}\n\nfunction bulbs(P) {\n  const L = P.bl;\n  const ch = floor(P.chase);\n  const ringing = P.ringT \u003c 1.8;\n  let sum = 0;\n  for (let i = 0; i \u003c BULBS + 6; i++) {\n    let v;\n    if (i \u003c BULBS) {\n      const up = BULBS - 1 - i;\n      v = (up + 999 - ch) % 3 === 0 ? 0.9 : 0.2;\n      if (REST + 1 - bulbY(i) \u003c= 4 * P.lit) v = 1;\n    } else v = (i + ch) % 2 ? 1 : 0.35;\n    if (ringing) v = floor(P.ringT * 9) % 2 ? 0.25 : 1;\n    L[i] = v;\n    sum += v;\n  }\n  return sum / (BULBS + 6);\n}\n\nfunction drawBulbs(P) {\n  const c = P.col;\n  const core = c.map((v) => v * 0.6 + 102);\n  const at = (x, y, v) => {\n    put(P, x, y, core, 0.25 + 0.75 * v);\n    for (const [dx, dy, w] of GLOW) add(P, x + dx, y + dy, c, w * v);\n  };\n  for (let i = 0; i \u003c BULBS; i++) {\n    at(33, bulbY(i), P.bl[i]);\n    at(52, bulbY(i), P.bl[i]);\n  }\n  for (let i = 0; i \u003c 6; i++) at(35 + 3 * i, 3, P.bl[BULBS + i]);\n  // Festoons along the stall awnings.\n  for (let x = 0; x \u003c= 63; x += 3) {\n    if (x > 15 && x \u003c 55) continue;\n    const tw = 0.75 + 0.25 * sin(P.t * 3 + x);\n    put(P, x, 76, FESTOON[(x / 3) % 4], tw);\n  }\n}\n\n// Bunting from the crossbar down to the stalls, swaying in the night air.\nfunction bunting(P) {\n  for (const [x0, y0, x1, y1, sag] of [[0, 15, 33, 3, 5], [52, 3, 63, 17, 3]]) {\n    const s = sag + 0.9 * sin(P.t * 1.1 + x0);\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      const y = round(y0 + (y1 - y0) * u + s * 4 * u * (1 - u));\n      put(P, x, y, [44, 40, 46]);\n      const n = x - x0 - 2;\n      if (n % 5 || x === x0 || x === x1) continue;\n      const c = FLAGS[(n / 5) % 5];\n      const k = 0.55 + 0.25 * sin(P.t * 2.3 + x);\n      for (let r = 1; r \u003c= 3; r++) for (let dx = -1; dx \u003c= 1; dx++) if (abs(dx) \u003c= 2 - r + (r === 1)) put(P, x + dx, y + r, c, k * (dx \u003c 0 ? 0.8 : 1));\n    }\n  }\n}\n\n// A person facing right (or left), feet on the ground row, lit from the tower's side.\nfunction person(P, F, left, dim, held, cheer) {\n  const cx = round(F.x);\n  const top = GROUND - F.h;\n  const col = (dx) => (left ? cx - 1 - dx : cx + dx);\n  const T = [F.shirt, F.pants, F.skin, F.hair].map((c) => [c.map((v) => v * dim * 0.78), c.map((v) => v * dim * 1.05)]);\n  const tone = (n, x) => T[n][x > cx - 1 ? 1 : 0];\n  const arm = F.kind === 2 ? F.skin : F.shirt;\n  const torso = round(F.h * 0.36);\n  const legTop = top + 4 + torso;\n  const sw = F.moving ? sin(F.walk) : 0;\n  for (let y = legTop; y \u003c GROUND; y++) {\n    const off = round(((sw * 1.6 * (y - legTop)) / (GROUND - legTop)) * (left ? -1 : 1));\n    for (let dx = -2; dx \u003c= 1; dx++) {\n      const x = col(dx) + (dx \u003c 0 ? -off : off);\n      put(P, x, y, y === GROUND - 1 ? [30, 26, 24] : tone(1, x), dx === -1 || dx === 1 ? 0.85 : 1);\n    }\n  }\n  if (!F.moving) put(P, col(2), GROUND - 1, [30, 26, 24]);\n  for (let y = top + 4; y \u003c legTop; y++) for (let dx = -2; dx \u003c= (F.kind === 2 ? 2 : 1); dx++) put(P, col(dx), y, tone(0, col(dx)));\n  for (let y = top; y \u003c top + 4; y++)\n    for (let dx = -1; dx \u003c= 1; dx++) put(P, col(dx), y, tone(y === top || (dx === -1 && y === top + 1) ? 3 : 2, col(dx)));\n  if (held) return;\n  if (cheer) {\n    for (let y = top - 2; y \u003c top + 5; y++) {\n      put(P, col(2), y, y \u003c top ? F.skin : arm, dim);\n      put(P, col(-3), y, y \u003c top ? F.skin : arm, dim * 0.8);\n    }\n    return;\n  }\n  const hx = col(0) + round(sw * 1.2) * (left ? -1 : 1);\n  for (let y = top + 5; y \u003c legTop + 1; y++) put(P, y \u003c legTop - 1 ? col(0) : hx, y, y === legTop ? F.skin : arm, dim * 0.85);\n}\n\nfunction mallet(P) {\n  const [sx, sy] = P.mS;\n  const L = P.mL;\n  const head = (a, k) => {\n    const dx = cos(a);\n    const dy = sin(a);\n    for (let u = -1.5; u \u003c= 1.5; u += 0.5)\n      for (let v = -2.5; v \u003c= 2.5; v += 0.5) {\n        const c = abs(v) > 1.7 ? [170, 170, 184] : u \u003c -0.7 ? [150, 96, 46] : [210, 146, 76];\n        put(P, sx + dx * (L + u) - dy * v - 0.5, sy + dy * (L + u) + dx * v - 0.5, c, k);\n      }\n  };\n  if (P.ph === SWING || (P.ph === WATCH && P.pt \u003c 0.05)) for (let n = 1; n \u003c= 3; n++) head(P.a + (P.aPrev - P.a) * (n / 3), 0.32);\n  const dx = cos(P.a);\n  const dy = sin(P.a);\n  for (let t = 4; t \u003c= L - 1.5; t += 0.5) put(P, sx + dx * t - 0.5, sy + dy * t - 0.5, [196, 150, 92]);\n  head(P.a, 1);\n  const A = P.q[0];\n  if (P.ph === WALK) return;\n  for (let t = 0; t \u003c= 6; t += 0.5) put(P, sx + dx * t - 0.5, sy + dy * t - 0.5, t > 4.5 || A.kind === 2 ? A.skin : A.shirt, t > 4.5 ? 1 : 0.9);\n}\n\nfunction arcs(P) {\n  if (P.ringT > 1.4) return;\n  const c = P.col.map((v) => v * 0.5 + 128);\n  for (let n = 0; n \u003c 2; n++) {\n    const r = 8 + (P.ringT - 0.28 * n) * 34;\n    if (r \u003c 8) continue;\n    const k = P.ringA * clamp(1 - (r - 8) / 44, 0, 1);\n    for (let a = -0.9; a \u003c= 0.9; a += 0.6 / r) {\n      add(P, CX - 0.5 - r * cos(a), 9 + r * sin(a) * 0.9, c, k);\n      add(P, CX - 0.5 + r * cos(a), 9 + r * sin(a) * 0.9, c, k);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const gl = bulbs(P);\n  const fl = P.ringT \u003c 2.5 ? P.ringA * exp(-P.ringT * 2.2) : 0;\n  base(P, 0.25 + 0.75 * gl, fl);\n  bunting(P);\n  scale(P);\n  drawPuck(P);\n  bell(P);\n  drawBulbs(P);\n  // The pad's rubber, pressed down a row by the blow.\n  const dip = P.padDip > 0.3 ? 1 : 0;\n  for (let x = 20; x \u003c= 27; x++) {\n    put(P, x, PADY + dip, [150, 34, 34]);\n    put(P, x, PADY + 1, [96, 22, 24]);\n  }\n  if (P.hitT \u003c 0.12) for (const [dx, dy] of [[0, 0], [1, 0], [-1, 0], [0, -1], [2, -1], [-2, -1]]) put(P, PADX + dx - 0.5, PADY - 1 + dy, [255, 250, 230]);\n  const cheer = P.ringT \u003c 1.6;\n  P.crowd.forEach((F, i) => person(P, F, true, 0.62, false, cheer && floor(P.ringT * 6 + i) % 2 === 0));\n  for (let i = P.q.length - 1; i >= 1; i--) person(P, P.q[i], false, 0.78, false, false);\n  const A = P.q[0];\n  person(P, A, false, 1, P.ph !== WALK, false);\n  mallet(P);\n  for (const F of P.leavers) person(P, F, false, 0.95, false, false);\n  arcs(P);\n  const sc = P.col.map((v) => v * 0.45 + 140);\n  for (const [x, y, , , life] of P.sparks) {\n    const k = min(1, life * 1.2);\n    put(P, x, y, sc, k);\n    if (life > 0.9) for (const [dx, dy, w] of GLOW.slice(0, 4)) add(P, x + dx, y + dy, sc, w * k);\n  }\n  flush(display, P.buf);\n}\n\nfunction flush(display, buf) {\n  for (let y = 0, o = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Bulbs=0..1, Speed=0.2..3, Strength=60..130, Gravity=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Bulbs","min":0,"max":1,"about":"Turns the bulbs up both edges of the tower round the colour wheel, with the light they throw on the striped posts and the night round the tower, starting from gold."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the fair runs: at 2 everything moves in real time, a full flight to the bell takes 1.26 s each way; at 0.2 it is ten times slower, at 3 half as fast again."},{"name":"Strength","min":60,"max":130,"about":"How hard the players hit on average, as the share of the run to the bell an average swing sends the puck: 60% at the minimum, where an average grown-up just lights FAIR, to 130%, where nearly every grown-up rings the bell. Children hit softer and the strongman harder."},{"name":"Gravity","min":-1,"max":1,"about":"The pull on the puck, from 0.57 g at -1 through Earth's at the middle to 1.74 g at 1: the same swing sends it higher and slower, or lower and quicker."}],"start":[0,2,60,0.06],"measures":{"motion":0.2551,"detail":0.0819,"edges":0.4794,"complexity":1.4989,"coverage":0.8211,"colour":0.2622,"drift":0.1521},"knobResponse":[0.0547,0.0439,0.0765,0.0768]},{"slug":"hourglass","title":"Hourglass","family":"time","round":2,"note":"LED 하나가 모래 한 알이에요. 두 LED 목으로 흘러 위 더미는 가운데부터 꺼지고 아래에는 원뿔이 쌓이며, 위가 비면 유리가 반 바퀴 돌아 뒤집혀요.","idea":"One LED is one grain: a falling-sand automaton pours through a two-LED neck, funnels the top heap into a V and builds a cone below, and when the top runs dry the glass turns over.","buttons":"K1 tap turns the glass over now.","code":"// ===== Patternflow pattern =====\n// Title:   Hourglass\n// Family:  time\n// Idea:    One LED is one grain: a falling-sand automaton pours through a two-LED neck, funnels the top heap into a V and builds a cone below, and when the top runs dry the glass turns over.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Sand=0..1, Flow=0.5..4, Glass=0..1, Layers=1..6\n//\n// Knob 1: Sand. The colour of the sand.\n// Knob 2: Flow. How fast the sand runs: a glass takes about half a minute where it starts, two minutes at the bottom of the range.\n// Knob 3: Glass. The shape of the glass: round bulbs, then two straight cones, then two spheres on a thin tube.\n// Knob 4: Layers. Colours each grain by when in the run it passed the neck, so the heap below grows rings of time.\n// Buttons: K1 tap turns the glass over now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The neck sits between rows 63 and 64; the glass reaches 58 rows each way.\nconst MID = 64;\nconst REACH = 58.5;\nconst BULB = 25;\nconst TURN = 1.5;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Half the inside width of the glass at d rows from the neck. Three shapes,\n// blended as the knob turns: round bulbs, straight cones, spheres on a tube.\nfunction profile(d, shape) {\n  const t = Math.max(0, Math.min(1, (d - 2) / (REACH - 2)));\n  const round = Math.pow(Math.sin(t * Math.PI * 0.62), 0.7);\n  const cone = Math.min(1, t * 1.06);\n  const u = (t - 0.58) / 0.46;\n  const sphere = u * u \u003c 1 ? Math.sqrt(1 - u * u) : 0;\n  const f = shape \u003c 0.5 ? round + (cone - round) * shape * 2 : cone + (sphere - cone) * (shape - 0.5) * 2;\n  return 1 + (BULB - 1) * f;\n}\n\nfunction build(p, shape) {\n  const cell = p.cell;\n  for (let y = 0; y \u003c H; y++) {\n    const d = Math.abs(y + 0.5 - MID);\n    p.hw[y] = d \u003c REACH ? profile(d, shape) : 0;\n  }\n  // Grains the new walls land on are taken out and poured back in from the top of their half.\n  let lost = 0;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const inside = Math.abs(x + 0.5 - W / 2) \u003c p.hw[y];\n      if (inside) {\n        if (cell[i] === 1) cell[i] = 0;\n      } else {\n        if (cell[i] >= 2) {\n          p.spill[lost * 3] = cell[i];\n          p.spill[lost * 3 + 1] = p.ord[i];\n          p.spill[lost * 3 + 2] = y \u003c MID ? 0 : 1;\n          lost++;\n        }\n        cell[i] = 1;\n      }\n    }\n  }\n  for (let g = 0; g \u003c lost; g++) {\n    const bottom = p.spill[g * 3 + 2];\n    const y0 = bottom ? MID : 0;\n    let placed = false;\n    for (let y = y0; y \u003c y0 + MID && !placed; y++) {\n      for (let s = 0; s \u003c W && !placed; s++) {\n        const x = s & 1 ? W / 2 + (s >> 1) : W / 2 - 1 - (s >> 1);\n        const i = y * W + x;\n        if (cell[i] === 0) {\n          cell[i] = p.spill[g * 3];\n          p.ord[i] = p.spill[g * 3 + 1];\n          placed = true;\n        }\n      }\n    }\n  }\n  let total = 0;\n  for (let i = 0; i \u003c N; i++) if (cell[i] >= 2) total++;\n  p.total = total;\n  // The outline is drawn on the outside cells that touch the inside.\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let edge = 0;\n      if (cell[i] === 1) {\n        for (let dy = -1; dy \u003c= 1 && !edge; dy++) {\n          for (let dx = -1; dx \u003c= 1; dx++) {\n            const xx = x + dx;\n            const yy = y + dy;\n            if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n            if (cell[yy * W + xx] !== 1) {\n              edge = 1;\n              break;\n            }\n          }\n        }\n      }\n      p.wall[i] = edge;\n    }\n  }\n}\n\nfunction fill(p) {\n  const cell = p.cell;\n  let room = 0;\n  for (let i = 0; i \u003c MID * W; i++) if (cell[i] !== 1) room++;\n  const count = Math.floor(room * 0.62);\n  let placed = 0;\n  let far = 1;\n  for (let y = MID - 1; y >= 0 && placed \u003c count; y--) {\n    for (let s = 0; s \u003c W && placed \u003c count; s++) {\n      const x = s & 1 ? W / 2 + (s >> 1) : W / 2 - 1 - (s >> 1);\n      const i = y * W + x;\n      if (cell[i] !== 0) continue;\n      cell[i] = 2 + Math.floor(Math.random() * 4);\n      far = Math.max(far, Math.hypot(x + 0.5 - W / 2, (MID - y) * 1.6));\n      placed++;\n    }\n  }\n  // The first heap is banded in bowls around the neck, the way a heap that\n  // has just been turned over hangs, rather than in flat rows.\n  for (let y = 0; y \u003c MID; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (cell[i] >= 2) p.ord[i] = Math.min(255, Math.floor((Math.hypot(x + 0.5 - W / 2, (MID - y) * 1.6) / far) * 256));\n    }\n  }\n  p.total = placed;\n  p.passed = 0;\n}\n\n// A grain takes its band as it passes the neck, by how much of the run has\n// gone before it, so the heap below lays down the run as rings of colour.\nfunction through(p) {\n  const band = Math.min(255, Math.floor((p.passed * 256) / Math.max(1, p.total)));\n  p.passed++;\n  return band;\n}\n\n// One step of the automaton, bottom row first so a grain moves once a step.\n// In each row every grain that can drop straight down does so before any\n// grain slides sideways. Otherwise a slide takes the hole first, the side of\n// the top heap drains before its middle, and the heap peaks instead of\n// funnelling into a crater the way real sand does.\nfunction step(p) {\n  const cell = p.cell;\n  const ord = p.ord;\n  const flip = p.steps & 1;\n  let moved = 0;\n  let top = 0;\n  for (let y = H - 2; y >= 0; y--) {\n    const row = y * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = row + x;\n      const c = cell[i];\n      if (c \u003c 2 || cell[i + W] !== 0) continue;\n      cell[i + W] = c;\n      ord[i + W] = y + 1 === MID ? through(p) : ord[i];\n      cell[i] = 0;\n      moved++;\n      if (y + 1 \u003c MID) top++;\n    }\n    for (let s = 0; s \u003c W; s++) {\n      const x = flip ? s : W - 1 - s;\n      const i = row + x;\n      const c = cell[i];\n      if (c \u003c 2) continue;\n      let to = i + W;\n      const left = x > 0 && cell[to - 1] === 0;\n      const right = x \u003c W - 1 && cell[to + 1] === 0;\n      if (left && right) to += Math.random() \u003c 0.5 ? -1 : 1;\n      else if (left) to -= 1;\n      else if (right) to += 1;\n      else if (y \u003c MID && cell[to] === 1) {\n        // Glass is smoother than sand: near the neck the walls are flatter\n        // than the sand would stand, so a grain lying on the glass creeps\n        // toward the neck instead of staying there for good.\n        const inward = x \u003c W / 2 ? 1 : -1;\n        if (cell[i + inward] !== 0) {\n          top++;\n          continue;\n        }\n        to = i + inward;\n      } else {\n        if (y \u003c MID) top++;\n        continue;\n      }\n      cell[to] = c;\n      ord[to] = y + 1 === MID && to >= MID * W ? through(p) : ord[i];\n      cell[i] = 0;\n      moved++;\n      if (to \u003c MID * W) top++;\n    }\n  }\n  p.steps++;\n  p.moved = moved;\n  p.top = top;\n}\n\nfunction spin(p) {\n  p.passed = 0;\n  const cell = p.cell;\n  const ord = p.ord;\n  for (let i = 0, j = N - 1; i \u003c j; i++, j--) {\n    const c = cell[i];\n    cell[i] = cell[j];\n    cell[j] = c;\n    const o = ord[i];\n    ord[i] = ord[j];\n    ord[j] = o;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.cell = new Uint8Array(N);\n  p.ord = new Uint8Array(N);\n  p.wall = new Uint8Array(N);\n  p.hw = new Float32Array(H);\n  p.spill = new Uint8Array(N * 3);\n  p.img = new Float32Array(N * 3);\n  p.lut = new Float32Array(6 * 4 * 3);\n  p.shape = -1;\n  p.ready = false;\n  p.acc = 0;\n  p.steps = 0;\n  p.moved = 0;\n  p.top = 1;\n  p.idle = 0;\n  p.turn = -1;\n  p.total = 1;\n  p.passed = 0;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 1];\n  const shape = Math.round(Math.max(0, Math.min(1, k[2])) * 40) / 40;\n  if (shape !== p.shape) {\n    p.shape = shape;\n    build(p, shape);\n  }\n  if (!p.ready) {\n    p.ready = true;\n    fill(p);\n    // Open a third of the way through a run, with the stream already landing.\n    for (let i = 0; i \u003c 260; i++) step(p);\n  }\n  p.layers = Math.max(1, Math.min(6, Math.round(k[3])));\n  // At 0 the sand is a sea green rather than red.\n  p.hue = k[0] + 0.44;\n\n  if (input.btnPressed && input.btnPressed[0] && p.turn \u003c 0) p.turn = 0;\n  if (p.turn >= 0) {\n    p.turn += dt / TURN;\n    if (p.turn >= 1) {\n      spin(p);\n      p.turn = -1;\n      p.idle = 0;\n      p.acc = 0;\n    }\n    return;\n  }\n  p.acc += dt * 11 * k[1];\n  let n = 0;\n  while (p.acc >= 1 && n \u003c 8) {\n    step(p);\n    p.acc -= 1;\n    n++;\n  }\n  if (p.acc > 1) p.acc = 1;\n  // Once the top is empty and the heap has stopped sliding, wait a moment and turn.\n  if (p.top === 0 && p.moved === 0) {\n    p.idle += dt;\n    if (p.idle > 1.2) p.turn = 0;\n  } else p.idle = 0;\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const cell = p.cell;\n  const ord = p.ord;\n  const wall = p.wall;\n  const img = p.img;\n  const lut = p.lut;\n  const layers = p.layers;\n  for (let b = 0; b \u003c layers; b++) {\n    // Neighbouring bands step a little round the wheel and alternate light and dark.\n    const h = p.hue + b * 0.09;\n    const light = b & 1 ? 0.6 : 1;\n    for (let s = 0; s \u003c 4; s++) hsv(h, 0.5 + s * 0.04, (0.62 + s * 0.11) * light, lut, (b * 4 + s) * 3);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const hw = p.hw[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const o = i * 3;\n      const c = cell[i];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (c >= 2) {\n        const l = ((ord[i] * layers) >> 8) * 12 + (c - 2) * 3;\n        r = lut[l];\n        g = lut[l + 1];\n        b = lut[l + 2];\n      } else if (wall[i]) {\n        r = 74;\n        g = 96;\n        b = 118;\n      } else if (c === 0) {\n        // A faint glint down one side of each bulb, mirrored so it survives the turn.\n        const dx = x + 0.5 - W / 2;\n        const side = y \u003c MID ? -dx : dx;\n        if (hw > 8 && side > hw * 0.55 && side \u003c hw * 0.55 + 1.2) {\n          r = 26;\n          g = 32;\n          b = 40;\n        }\n      } else if (y \u003c 4 || y >= H - 4) {\n        // The two wooden ends, lit on their outer face.\n        const outer = y === 0 || y === H - 1;\n        r = outer ? 150 : 108;\n        g = outer ? 92 : 62;\n        b = outer ? 46 : 28;\n      } else if (x === 1 || x === W - 2) {\n        r = 128;\n        g = 78;\n        b = 38;\n      } else if (x === 2 || x === W - 3) {\n        r = 84;\n        g = 48;\n        b = 22;\n      }\n      img[o] = r;\n      img[o + 1] = g;\n      img[o + 2] = b;\n    }\n  }\n  if (p.turn \u003c 0) {\n    for (let y = 0; y \u003c H; y++) {\n      for (let x = 0; x \u003c W; x++) {\n        const o = (y * W + x) * 3;\n        display.setPixel(x, y, img[o], img[o + 1], img[o + 2]);\n      }\n    }\n    return;\n  }\n  // The turn: the whole glass rotates half a turn about the middle, shrinking\n  // so that lying on its side it still fits across the panel.\n  const u = p.turn;\n  const e = u * u * (3 - 2 * u);\n  const a = e * Math.PI;\n  const ca = Math.cos(a);\n  const sa = Math.sin(a);\n  const fit = Math.min(1, W / (W * Math.abs(ca) + H * Math.abs(sa)), H / (W * Math.abs(sa) + H * Math.abs(ca)));\n  const inv = 1 / fit;\n  const cx = W / 2;\n  const cy = H / 2;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const px = (x + 0.5 - cx) * inv;\n      const py = (y + 0.5 - cy) * inv;\n      const sx = ca * px + sa * py + cx - 0.5;\n      const sy = -sa * px + ca * py + cy - 0.5;\n      const x0 = Math.floor(sx);\n      const y0 = Math.floor(sy);\n      const fx = sx - x0;\n      const fy = sy - y0;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let q = 0; q \u003c 4; q++) {\n        const xx = x0 + (q & 1);\n        const yy = y0 + (q >> 1);\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const w = (q & 1 ? fx : 1 - fx) * (q >> 1 ? fy : 1 - fy);\n        const o = (yy * W + xx) * 3;\n        r += img[o] * w;\n        g += img[o + 1] * w;\n        b += img[o + 2] * w;\n      }\n      display.setPixel(x, y, r, g, b);\n    }\n  }\n}\n","layer":{"id":"layer-hourglass","type":"code","name":"hourglass","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hourglass\n// Family:  time\n// Idea:    One LED is one grain: a falling-sand automaton pours through a two-LED neck, funnels the top heap into a V and builds a cone below, and when the top runs dry the glass turns over.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Sand=0..1, Flow=0.5..4, Glass=0..1, Layers=1..6\n//\n// Knob 1: Sand. The colour of the sand.\n// Knob 2: Flow. How fast the sand runs: a glass takes about half a minute where it starts, two minutes at the bottom of the range.\n// Knob 3: Glass. The shape of the glass: round bulbs, then two straight cones, then two spheres on a thin tube.\n// Knob 4: Layers. Colours each grain by when in the run it passed the neck, so the heap below grows rings of time.\n// Buttons: K1 tap turns the glass over now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The neck sits between rows 63 and 64; the glass reaches 58 rows each way.\nconst MID = 64;\nconst REACH = 58.5;\nconst BULB = 25;\nconst TURN = 1.5;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Half the inside width of the glass at d rows from the neck. Three shapes,\n// blended as the knob turns: round bulbs, straight cones, spheres on a tube.\nfunction profile(d, shape) {\n  const t = Math.max(0, Math.min(1, (d - 2) / (REACH - 2)));\n  const round = Math.pow(Math.sin(t * Math.PI * 0.62), 0.7);\n  const cone = Math.min(1, t * 1.06);\n  const u = (t - 0.58) / 0.46;\n  const sphere = u * u \u003c 1 ? Math.sqrt(1 - u * u) : 0;\n  const f = shape \u003c 0.5 ? round + (cone - round) * shape * 2 : cone + (sphere - cone) * (shape - 0.5) * 2;\n  return 1 + (BULB - 1) * f;\n}\n\nfunction build(p, shape) {\n  const cell = p.cell;\n  for (let y = 0; y \u003c H; y++) {\n    const d = Math.abs(y + 0.5 - MID);\n    p.hw[y] = d \u003c REACH ? profile(d, shape) : 0;\n  }\n  // Grains the new walls land on are taken out and poured back in from the top of their half.\n  let lost = 0;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const inside = Math.abs(x + 0.5 - W / 2) \u003c p.hw[y];\n      if (inside) {\n        if (cell[i] === 1) cell[i] = 0;\n      } else {\n        if (cell[i] >= 2) {\n          p.spill[lost * 3] = cell[i];\n          p.spill[lost * 3 + 1] = p.ord[i];\n          p.spill[lost * 3 + 2] = y \u003c MID ? 0 : 1;\n          lost++;\n        }\n        cell[i] = 1;\n      }\n    }\n  }\n  for (let g = 0; g \u003c lost; g++) {\n    const bottom = p.spill[g * 3 + 2];\n    const y0 = bottom ? MID : 0;\n    let placed = false;\n    for (let y = y0; y \u003c y0 + MID && !placed; y++) {\n      for (let s = 0; s \u003c W && !placed; s++) {\n        const x = s & 1 ? W / 2 + (s >> 1) : W / 2 - 1 - (s >> 1);\n        const i = y * W + x;\n        if (cell[i] === 0) {\n          cell[i] = p.spill[g * 3];\n          p.ord[i] = p.spill[g * 3 + 1];\n          placed = true;\n        }\n      }\n    }\n  }\n  let total = 0;\n  for (let i = 0; i \u003c N; i++) if (cell[i] >= 2) total++;\n  p.total = total;\n  // The outline is drawn on the outside cells that touch the inside.\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let edge = 0;\n      if (cell[i] === 1) {\n        for (let dy = -1; dy \u003c= 1 && !edge; dy++) {\n          for (let dx = -1; dx \u003c= 1; dx++) {\n            const xx = x + dx;\n            const yy = y + dy;\n            if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n            if (cell[yy * W + xx] !== 1) {\n              edge = 1;\n              break;\n            }\n          }\n        }\n      }\n      p.wall[i] = edge;\n    }\n  }\n}\n\nfunction fill(p) {\n  const cell = p.cell;\n  let room = 0;\n  for (let i = 0; i \u003c MID * W; i++) if (cell[i] !== 1) room++;\n  const count = Math.floor(room * 0.62);\n  let placed = 0;\n  let far = 1;\n  for (let y = MID - 1; y >= 0 && placed \u003c count; y--) {\n    for (let s = 0; s \u003c W && placed \u003c count; s++) {\n      const x = s & 1 ? W / 2 + (s >> 1) : W / 2 - 1 - (s >> 1);\n      const i = y * W + x;\n      if (cell[i] !== 0) continue;\n      cell[i] = 2 + Math.floor(Math.random() * 4);\n      far = Math.max(far, Math.hypot(x + 0.5 - W / 2, (MID - y) * 1.6));\n      placed++;\n    }\n  }\n  // The first heap is banded in bowls around the neck, the way a heap that\n  // has just been turned over hangs, rather than in flat rows.\n  for (let y = 0; y \u003c MID; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (cell[i] >= 2) p.ord[i] = Math.min(255, Math.floor((Math.hypot(x + 0.5 - W / 2, (MID - y) * 1.6) / far) * 256));\n    }\n  }\n  p.total = placed;\n  p.passed = 0;\n}\n\n// A grain takes its band as it passes the neck, by how much of the run has\n// gone before it, so the heap below lays down the run as rings of colour.\nfunction through(p) {\n  const band = Math.min(255, Math.floor((p.passed * 256) / Math.max(1, p.total)));\n  p.passed++;\n  return band;\n}\n\n// One step of the automaton, bottom row first so a grain moves once a step.\n// In each row every grain that can drop straight down does so before any\n// grain slides sideways. Otherwise a slide takes the hole first, the side of\n// the top heap drains before its middle, and the heap peaks instead of\n// funnelling into a crater the way real sand does.\nfunction step(p) {\n  const cell = p.cell;\n  const ord = p.ord;\n  const flip = p.steps & 1;\n  let moved = 0;\n  let top = 0;\n  for (let y = H - 2; y >= 0; y--) {\n    const row = y * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = row + x;\n      const c = cell[i];\n      if (c \u003c 2 || cell[i + W] !== 0) continue;\n      cell[i + W] = c;\n      ord[i + W] = y + 1 === MID ? through(p) : ord[i];\n      cell[i] = 0;\n      moved++;\n      if (y + 1 \u003c MID) top++;\n    }\n    for (let s = 0; s \u003c W; s++) {\n      const x = flip ? s : W - 1 - s;\n      const i = row + x;\n      const c = cell[i];\n      if (c \u003c 2) continue;\n      let to = i + W;\n      const left = x > 0 && cell[to - 1] === 0;\n      const right = x \u003c W - 1 && cell[to + 1] === 0;\n      if (left && right) to += Math.random() \u003c 0.5 ? -1 : 1;\n      else if (left) to -= 1;\n      else if (right) to += 1;\n      else if (y \u003c MID && cell[to] === 1) {\n        // Glass is smoother than sand: near the neck the walls are flatter\n        // than the sand would stand, so a grain lying on the glass creeps\n        // toward the neck instead of staying there for good.\n        const inward = x \u003c W / 2 ? 1 : -1;\n        if (cell[i + inward] !== 0) {\n          top++;\n          continue;\n        }\n        to = i + inward;\n      } else {\n        if (y \u003c MID) top++;\n        continue;\n      }\n      cell[to] = c;\n      ord[to] = y + 1 === MID && to >= MID * W ? through(p) : ord[i];\n      cell[i] = 0;\n      moved++;\n      if (to \u003c MID * W) top++;\n    }\n  }\n  p.steps++;\n  p.moved = moved;\n  p.top = top;\n}\n\nfunction spin(p) {\n  p.passed = 0;\n  const cell = p.cell;\n  const ord = p.ord;\n  for (let i = 0, j = N - 1; i \u003c j; i++, j--) {\n    const c = cell[i];\n    cell[i] = cell[j];\n    cell[j] = c;\n    const o = ord[i];\n    ord[i] = ord[j];\n    ord[j] = o;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.cell = new Uint8Array(N);\n  p.ord = new Uint8Array(N);\n  p.wall = new Uint8Array(N);\n  p.hw = new Float32Array(H);\n  p.spill = new Uint8Array(N * 3);\n  p.img = new Float32Array(N * 3);\n  p.lut = new Float32Array(6 * 4 * 3);\n  p.shape = -1;\n  p.ready = false;\n  p.acc = 0;\n  p.steps = 0;\n  p.moved = 0;\n  p.top = 1;\n  p.idle = 0;\n  p.turn = -1;\n  p.total = 1;\n  p.passed = 0;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 1];\n  const shape = Math.round(Math.max(0, Math.min(1, k[2])) * 40) / 40;\n  if (shape !== p.shape) {\n    p.shape = shape;\n    build(p, shape);\n  }\n  if (!p.ready) {\n    p.ready = true;\n    fill(p);\n    // Open a third of the way through a run, with the stream already landing.\n    for (let i = 0; i \u003c 260; i++) step(p);\n  }\n  p.layers = Math.max(1, Math.min(6, Math.round(k[3])));\n  // At 0 the sand is a sea green rather than red.\n  p.hue = k[0] + 0.44;\n\n  if (input.btnPressed && input.btnPressed[0] && p.turn \u003c 0) p.turn = 0;\n  if (p.turn >= 0) {\n    p.turn += dt / TURN;\n    if (p.turn >= 1) {\n      spin(p);\n      p.turn = -1;\n      p.idle = 0;\n      p.acc = 0;\n    }\n    return;\n  }\n  p.acc += dt * 11 * k[1];\n  let n = 0;\n  while (p.acc >= 1 && n \u003c 8) {\n    step(p);\n    p.acc -= 1;\n    n++;\n  }\n  if (p.acc > 1) p.acc = 1;\n  // Once the top is empty and the heap has stopped sliding, wait a moment and turn.\n  if (p.top === 0 && p.moved === 0) {\n    p.idle += dt;\n    if (p.idle > 1.2) p.turn = 0;\n  } else p.idle = 0;\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const cell = p.cell;\n  const ord = p.ord;\n  const wall = p.wall;\n  const img = p.img;\n  const lut = p.lut;\n  const layers = p.layers;\n  for (let b = 0; b \u003c layers; b++) {\n    // Neighbouring bands step a little round the wheel and alternate light and dark.\n    const h = p.hue + b * 0.09;\n    const light = b & 1 ? 0.6 : 1;\n    for (let s = 0; s \u003c 4; s++) hsv(h, 0.5 + s * 0.04, (0.62 + s * 0.11) * light, lut, (b * 4 + s) * 3);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const hw = p.hw[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const o = i * 3;\n      const c = cell[i];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (c >= 2) {\n        const l = ((ord[i] * layers) >> 8) * 12 + (c - 2) * 3;\n        r = lut[l];\n        g = lut[l + 1];\n        b = lut[l + 2];\n      } else if (wall[i]) {\n        r = 74;\n        g = 96;\n        b = 118;\n      } else if (c === 0) {\n        // A faint glint down one side of each bulb, mirrored so it survives the turn.\n        const dx = x + 0.5 - W / 2;\n        const side = y \u003c MID ? -dx : dx;\n        if (hw > 8 && side > hw * 0.55 && side \u003c hw * 0.55 + 1.2) {\n          r = 26;\n          g = 32;\n          b = 40;\n        }\n      } else if (y \u003c 4 || y >= H - 4) {\n        // The two wooden ends, lit on their outer face.\n        const outer = y === 0 || y === H - 1;\n        r = outer ? 150 : 108;\n        g = outer ? 92 : 62;\n        b = outer ? 46 : 28;\n      } else if (x === 1 || x === W - 2) {\n        r = 128;\n        g = 78;\n        b = 38;\n      } else if (x === 2 || x === W - 3) {\n        r = 84;\n        g = 48;\n        b = 22;\n      }\n      img[o] = r;\n      img[o + 1] = g;\n      img[o + 2] = b;\n    }\n  }\n  if (p.turn \u003c 0) {\n    for (let y = 0; y \u003c H; y++) {\n      for (let x = 0; x \u003c W; x++) {\n        const o = (y * W + x) * 3;\n        display.setPixel(x, y, img[o], img[o + 1], img[o + 2]);\n      }\n    }\n    return;\n  }\n  // The turn: the whole glass rotates half a turn about the middle, shrinking\n  // so that lying on its side it still fits across the panel.\n  const u = p.turn;\n  const e = u * u * (3 - 2 * u);\n  const a = e * Math.PI;\n  const ca = Math.cos(a);\n  const sa = Math.sin(a);\n  const fit = Math.min(1, W / (W * Math.abs(ca) + H * Math.abs(sa)), H / (W * Math.abs(sa) + H * Math.abs(ca)));\n  const inv = 1 / fit;\n  const cx = W / 2;\n  const cy = H / 2;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const px = (x + 0.5 - cx) * inv;\n      const py = (y + 0.5 - cy) * inv;\n      const sx = ca * px + sa * py + cx - 0.5;\n      const sy = -sa * px + ca * py + cy - 0.5;\n      const x0 = Math.floor(sx);\n      const y0 = Math.floor(sy);\n      const fx = sx - x0;\n      const fy = sy - y0;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let q = 0; q \u003c 4; q++) {\n        const xx = x0 + (q & 1);\n        const yy = y0 + (q >> 1);\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const w = (q & 1 ? fx : 1 - fx) * (q >> 1 ? fy : 1 - fy);\n        const o = (yy * W + xx) * 3;\n        r += img[o] * w;\n        g += img[o + 1] * w;\n        b += img[o + 2] * w;\n      }\n      display.setPixel(x, y, r, g, b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sand=0..1, Flow=0.5..4, Glass=0..1, Layers=1..6","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sand","min":0,"max":1,"about":"The colour of the sand."},{"name":"Flow","min":0.5,"max":4,"about":"How fast the sand runs: a glass takes about half a minute where it starts, two minutes at the bottom of the range."},{"name":"Glass","min":0,"max":1,"about":"The shape of the glass: round bulbs, then two straight cones, then two spheres on a thin tube."},{"name":"Layers","min":1,"max":6,"about":"Colours each grain by when in the run it passed the neck, so the heap below grows rings of time."}],"start":[0,2,0,1],"measures":{"motion":0.0687,"detail":0.0755,"edges":0.7242,"complexity":0.1856,"coverage":0.3468,"colour":0.2248,"drift":0.051},"knobResponse":[0.0656,0.0293,0.076,0.03]},{"slug":"incense","title":"Incense","family":"noise","round":15,"note":"향 연기가 실처럼 곧게 오르다 몇 줄 위에서 흔들리고, 곧 소용돌이로 흩어져 위로 퍼져요. 돌탑 위 역류 향꽂이에서는 무거운 연기가 돌을 타고 흘러내려 접시에 고여요.","idea":"A backflow cone on a little cairn of stones sends a thin thread of smoke straight up until it snakes, curls and breaks into wisps in a curl-noise draught, while its heavy smoke pours down the stones like water and pools in the dish.","buttons":"K1 tap breathes across the smoke at some height between rows 22 and 62, bending and scrambling the threads there for a second and a half while the embers flare.","code":"// ===== Patternflow pattern =====\n// Title:   Incense\n// Family:  noise\n// Idea:    A backflow cone on a little cairn of stones sends a thin thread of smoke straight up until it snakes, curls and breaks into wisps in a curl-noise draught, while its heavy smoke pours down the stones like water and pools in the dish.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bridson, Hourihan and Nordenstam's curl noise for procedural fluid flow (SIGGRAPH 2007), driving smoke particles\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sticks=1..3, Breeze=-1..1\n//\n// Knob 1: Hue. The colour of the lamp that lights the smoke and the room, starting from a cool grey-blue; thick smoke goes whiter whatever the colour.\n// Knob 2: Speed. How fast the air moves: at 2 the thread leaves the tip at 18 rows a second and breaks up about 17 rows above it; at 0.2 the smoke drifts up ten times slower and holds together for 29 rows; at 3 it breaks up after 10.\n// Knob 3: Sticks. One to three sticks of incense standing in the dish beside the burner, each with a glowing tip and its own thread; each stick past the first warms and stirs the air so every thread breaks up 3.5 rows sooner.\n// Knob 4: Breeze. A cross draught: at 0 the smoke rises straight; turned either way it leans that way, breaks up as much as 9 rows sooner, bends the falling smoke and drags the pool along the dish.\n// Buttons: K1 tap breathes across the smoke at some height between rows 22 and 62, bending and scrambling the threads there for a second and a half while the embers flare.\n\nconst W = 64;\nconst H = 128;\nconst MAXP = 4600;\n// Rows: the dish's rim is DISH, the pooled smoke lies at POOL, the table top is TABLE.\nconst DISH = 114;\nconst POOL = 113.5;\nconst TABLE = 123.5;\n// The cone's glowing tip, and the hole in the top stone where its heavy smoke comes out.\nconst CONE_X = 32;\nconst CONE_Y = 76;\nconst HOLE_X = 32;\nconst HOLE_Y = 91;\n// Sticks in the dish as base x, base y, tip x, tip y. The first stands behind the stones.\nconst STICKS = [\n  [41, 104, 42.5, 66],\n  [11, 116, 12, 92],\n  [53, 116, 51.5, 97],\n];\n// Stones of the burner as left x, right x, top y at the left, top y at the right, bottom y.\nconst STONES = [\n  [21, 52, 109, 104, 113],\n  [19, 47, 96, 99, 105],\n  [25, 39, 84, 84, 95],\n];\n// The heavy smoke slides down the tops of the two lower stones: stone index, from x, to x.\nconst LEDGES = [\n  [1, 24, 47.5],\n  [0, 52, 22],\n];\n// Curl-noise velocity grid: a node every 2 LEDs.\nconst GX = 33;\nconst GY = 65;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(out, h, s, v) {\n  h -= Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n  return out;\n}\n\nfunction smooth(v) {\n  v = v \u003c 0 ? 0 : v > 1 ? 1 : v;\n  return v * v * (3 - 2 * v);\n}\n\nfunction stoneTop(s, x) {\n  const S = STONES[s];\n  return S[2] + ((S[3] - S[2]) * (x - S[0])) / (S[1] - S[0]);\n}\n\nexport function setup(params) {\n  const lat = new Float32Array(256 * 256);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  params.lat = lat;\n  // Particles: position, velocity, age, what they are doing, where they came from, when, and a depth in the stream.\n  params.x = new Float32Array(MAXP);\n  params.y = new Float32Array(MAXP);\n  params.vx = new Float32Array(MAXP);\n  params.vy = new Float32Array(MAXP);\n  params.age = new Float32Array(MAXP);\n  params.kind = new Int8Array(MAXP).fill(-1);\n  params.src = new Int8Array(MAXP);\n  params.emit = new Float32Array(MAXP);\n  params.dep = new Float32Array(MAXP);\n  params.led = new Int8Array(MAXP);\n  // Each rising particle remembers the one its source let go just before it, so the thread is drawn as a line between them.\n  params.prev = new Int32Array(MAXP).fill(-1);\n  params.last = new Int32Array(5).fill(-1);\n  params.next = 0;\n  params.gvx = new Float32Array(GX * GY);\n  params.gvy = new Float32Array(GX * GY);\n  params.psi = new Float32Array(GX * GY);\n  params.dens = new Float32Array(W * H);\n  params.soft = new Float32Array(W * H);\n  params.tmp = new Float32Array(W * H);\n  params.scene = new Float32Array(W * H * 3);\n  // 1 where a stone or the dish stands in front of the sticks.\n  params.front = new Uint8Array(W * H);\n  params.buf = new Float32Array(W * H * 3);\n  params.glow = new Float32Array(W * H);\n  params.debt = new Float32Array(5);\n  params.sx = new Float32Array(4);\n  params.sy = new Float32Array(4);\n  params.sway = new Float32Array(4);\n  params.col = [0, 0, 0];\n  params.t = 0;\n  params.started = false;\n  params.breath = 9;\n  params.by = 40;\n  params.bdir = 1;\n  params.sticks = 0;\n  params.flare = 0;\n  params.hb = 17;\n  bakeScene(params);\n}\n\nfunction bakeScene(params) {\n  const sc = params.scene;\n  const fr = params.front;\n  const c = params.col;\n  const set = (x, y) => sc.set(c, (y * W + x) * 3);\n  // A dark room, a little lighter up to the left where the lamp is; draw() colours it with the lamp.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) params.glow[y * W + x] = 0.012 + 0.1 * (1 - Math.hypot(x + 10, y - 20) / 140);\n  // The table, dark wood with its grain running across.\n  for (let y = TABLE + 0.5; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 0.5 + 0.5 * Math.sin(x * 0.21 + Math.sin(x * 0.05 + y) * 2 + y * 1.7);\n      hsv(c, 0.07, 0.62, y === TABLE + 0.5 ? 0.24 : 0.13 + 0.04 * g);\n      set(x, y);\n      params.glow[y * W + x] = y === TABLE + 0.5 ? 0.16 - (0.1 * x) / W : 0;\n    }\n  // Stones, glazed a dark celadon, lit on their top edges and on the side towards the lamp.\n  STONES.forEach((S, s) => {\n    for (let x = S[0]; x \u003c= S[1]; x++) {\n      const top = Math.round(stoneTop(s, x));\n      const u = (x - S[0]) / (S[1] - S[0]);\n      for (let y = top; y \u003c= S[4]; y++) {\n        // Rounded corners, and sides that bulge a little at the middle like a river stone.\n        const e = Math.min(y - top, S[4] - y);\n        const inset = (e \u003c 2 ? 2 - e : 0) + 1.2 * Math.abs((2 * (y - top)) / (S[4] - top) - 1) ** 2;\n        if (x \u003c S[0] + inset - 0.3 || x > S[1] - inset + 0.3) continue;\n        const edgeL = x \u003c S[0] + inset + 0.7;\n        const edgeR = x > S[1] - inset - 0.7;\n        // Layers in the stone, a few pits, darker towards the foot and away from the lamp.\n        let v = 0.25 - 0.09 * u + 0.025 * Math.sin(y * 1.1 + s * 2 + x * 0.08) + 0.04 * (hash(x, y) - 0.5) - (0.07 * (y - top)) / (S[4] - top + 1);\n        if (hash(x * 5, y * 3 + s) \u003c 0.05) v -= 0.06;\n        if (y === top) v = 0.46 - 0.12 * u;\n        else if (edgeL || y === top + 1) v += 0.06;\n        else if (edgeR || y === S[4]) v -= 0.06;\n        hsv(c, 0.44, 0.32, v);\n        set(x, y);\n        fr[y * W + x] = 1;\n        // The lamp catches the top edges.\n        params.glow[y * W + x] = y === top ? 0.22 - 0.12 * u : 0;\n      }\n    }\n  });\n  // The hole the heavy smoke comes out of, and the cone sitting on the top stone.\n  for (let x = 31; x \u003c= 33; x++) {\n    hsv(c, 0.44, 0.4, x === 32 ? 0.03 : 0.08);\n    set(x, HOLE_Y - 1);\n    set(x, HOLE_Y);\n  }\n  for (let y = CONE_Y + 1; y \u003c 84; y++) {\n    const half = ((y - CONE_Y) * 3.4) / (83 - CONE_Y);\n    for (let x = Math.round(CONE_X - half); x \u003c= Math.round(CONE_X + half); x++) {\n      hsv(c, 0.03, 0.55, 0.36 - (0.12 * (x - CONE_X + half)) / (2 * half + 1));\n      set(x, y);\n      fr[y * W + x] = 1;\n      params.glow[y * W + x] = 0;\n    }\n  }\n  // The dish, a dark iron glaze with a lit rim, standing on a foot.\n  for (let y = DISH; y \u003c= DISH + 8; y++) {\n    const q = (y - DISH) / 7;\n    const half = y > DISH + 7 ? 13 : 26.5 - 7 * q * q;\n    for (let x = Math.ceil(31.5 - half); x \u003c= Math.floor(31.5 + half); x++) {\n      const u = (x - 31.5 + half) / (2 * half);\n      let v = y === DISH ? 0.55 - 0.2 * u : 0.24 - 0.12 * u - 0.06 * q + 0.03 * hash(x, y);\n      if (y === DISH + 1) v += 0.08;\n      hsv(c, 0.05, y === DISH ? 0.35 : 0.6, v);\n      set(x, y);\n      fr[y * W + x] = 1;\n      params.glow[y * W + x] = y === DISH ? 0.2 - 0.12 * u : 0;\n    }\n  }\n}\n\nfunction spawn(params, kind, x, y, vx, vy, src) {\n  const i = params.next;\n  params.next = (i + 1) % MAXP;\n  params.kind[i] = kind;\n  params.x[i] = x;\n  params.y[i] = y;\n  params.vx[i] = vx;\n  params.vy[i] = vy;\n  params.age[i] = 0;\n  params.src[i] = src;\n  params.emit[i] = params.t;\n  params.dep[i] = Math.random();\n  return i;\n}\n\n// The draught: a stream function of two octaves of noise drifting up with the smoke; its curl\n// gives a velocity that swirls without ever piling smoke up or thinning it out.\nfunction stepField(params) {\n  const lat = params.lat;\n  const t = params.t;\n  const psi = params.psi;\n  for (let j = 0; j \u003c GY; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const x = i * 2;\n      const y = j * 2;\n      psi[j * GX + i] = vn(lat, x / 13 + 0.05 * t, (y + 11 * t) / 13) + 0.4 * vn(lat, x / 5.5 - 0.09 * t + 40, (y + 15 * t) / 5.5 + 40);\n    }\n  const gvx = params.gvx;\n  const gvy = params.gvy;\n  for (let j = 0; j \u003c GY; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const jm = j > 0 ? j - 1 : j;\n      const jp = j \u003c GY - 1 ? j + 1 : j;\n      const im = i > 0 ? i - 1 : i;\n      const ip = i \u003c GX - 1 ? i + 1 : i;\n      gvx[j * GX + i] = ((psi[jp * GX + i] - psi[jm * GX + i]) / (2 * (jp - jm))) * 190;\n      gvy[j * GX + i] = (-(psi[j * GX + ip] - psi[j * GX + im]) / (2 * (ip - im))) * 190;\n    }\n}\n\nfunction step(params, dts) {\n  const t = (params.t += dts);\n  stepField(params);\n  const sticks = params.sticks;\n  const breeze = params.breeze;\n  // Sources: the cone, then the sticks the knob has lit. Room air leans each thread gently one way and the other.\n  const srcs = 1 + sticks;\n  const SX = params.sx;\n  const SY = params.sy;\n  const sway = params.sway;\n  for (let s = 0; s \u003c srcs; s++) {\n    SX[s] = s === 0 ? CONE_X : STICKS[s - 1][2];\n    SY[s] = s === 0 ? CONE_Y : STICKS[s - 1][3];\n    sway[s] = 2 * Math.sin(t * 0.43 + s * 2) + 1.2 * Math.sin(t * 0.17 + s);\n    params.debt[s] += 50 * dts;\n    while (params.debt[s] >= 1) {\n      params.debt[s] -= 1;\n      // vx keeps how far this bit of smoke will be pushed aside where the thread starts to snake.\n      const i = spawn(params, 0, SX[s] + (Math.random() - 0.5) * 0.15, SY[s] - 1 - Math.random(), 5 * Math.sin(t * 2.7 + s * 1.9), 0, s);\n      params.prev[i] = params.last[s];\n      params.last[s] = i;\n    }\n  }\n  // Heavy smoke out of the hole in the stone.\n  params.debt[4] += 44 * dts;\n  while (params.debt[4] >= 1) {\n    params.debt[4] -= 1;\n    spawn(params, 1, HOLE_X + (Math.random() - 0.5) * 2, HOLE_Y + 0.5, (Math.random() - 0.5) * 0.8, 2, 4);\n  }\n\n  // How far a thread climbs before it breaks up: less in a faster or crosswise draught.\n  // More sticks warm the air more and stir it, so every thread breaks sooner.\n  const hb = (params.hb = 17 * (1.8 - 0.8 * params.speed) - 9 * Math.abs(breeze) - 3.5 * (sticks - 1));\n  const breath = params.breath;\n  const env = breath \u003c 1.6 ? Math.sin((Math.PI * breath) / 1.6) : 0;\n  const gvx = params.gvx;\n  const gvy = params.gvy;\n  const X = params.x;\n  const Y = params.y;\n  for (let i = 0; i \u003c MAXP; i++) {\n    const kind = params.kind[i];\n    if (kind \u003c 0) continue;\n    const age = (params.age[i] += dts);\n    let x = X[i];\n    let y = Y[i];\n    if (kind === 0) {\n      const s = params.src[i];\n      const h = SY[s] - y;\n      const turb = smooth((h - hb) / 18);\n      // Still air carries the thread straight up, slower as it cools.\n      let ux = breeze * 20 * (0.2 + Math.min(1, h / 45)) + sway[s] * Math.min(1, h / 25);\n      let uy = -18 * (0.4 + 0.6 * Math.exp(-h / 50));\n      // A broken-up plume entrains the air round it and widens as it climbs.\n      ux += (x - SX[s]) * 0.12 * turb;\n      // Just below the break the thread starts to snake: each bit of smoke was pushed aside by the moment it left the tip.\n      if (h > hb - 14) ux += params.vx[i] * smooth((h - hb + 14) / 12) * (1 - 0.6 * turb);\n      if (turb > 0 || env > 0) {\n        const gx = Math.max(0, Math.min(GX - 1.001, x / 2));\n        const gy = Math.max(0, Math.min(GY - 1.001, y / 2));\n        const ix = Math.floor(gx);\n        const iy = Math.floor(gy);\n        const fx = gx - ix;\n        const fy = gy - iy;\n        const o = iy * GX + ix;\n        const a = (1 - fx) * (1 - fy);\n        const b = fx * (1 - fy);\n        const c = (1 - fx) * fy;\n        const d = fx * fy;\n        let amp = turb;\n        if (env > 0) {\n          const e = env * Math.exp(-((y - params.by) * (y - params.by)) / 120);\n          ux += params.bdir * 45 * e;\n          amp += 1.6 * e;\n        }\n        ux += amp * (gvx[o] * a + gvx[o + 1] * b + gvx[o + GX] * c + gvx[o + GX + 1] * d);\n        uy += amp * (gvy[o] * a + gvy[o + 1] * b + gvy[o + GX] * c + gvy[o + GX + 1] * d);\n      }\n      x += ux * dts;\n      y += uy * dts;\n      // Past the break the smoke also spreads in small eddies the field is too coarse to hold.\n      if (turb > 0) {\n        const r = turb * 1.4 * Math.sqrt(dts);\n        x += (Math.random() - 0.5) * r;\n        y += (Math.random() - 0.5) * r;\n      }\n      if (y \u003c -3 || x \u003c -3 || x > W + 2 || age > 9) params.kind[i] = -1;\n    } else if (kind === 1) {\n      // Heavy smoke falls slowly and lands on a stone, in the dish or on the table.\n      let vy = params.vy[i] + 22 * dts;\n      if (vy > 9) vy = 9;\n      params.vy[i] = vy;\n      params.vx[i] += (breeze * 9 - params.vx[i]) * dts;\n      x += params.vx[i] * dts;\n      const ny = y + vy * dts;\n      const dep = params.dep[i];\n      let landed = false;\n      for (let l = 0; l \u003c LEDGES.length && !landed; l++) {\n        const L = LEDGES[l];\n        if (x \u003c Math.min(L[1], L[2]) || x > Math.max(L[1], L[2])) continue;\n        const top = stoneTop(L[0], x) - 0.6 - dep * 1.4;\n        if (y \u003c= top + 0.5 && ny >= top) {\n          params.kind[i] = 2;\n          params.led[i] = l;\n          y = top;\n          landed = true;\n        }\n      }\n      if (!landed) {\n        y = ny;\n        const inDish = x > 6 && x \u003c 57;\n        if (inDish && y >= POOL - dep * 3) {\n          params.kind[i] = 3;\n          // Pooled smoke spreads out over the dish from where it lands; vy keeps the way it drifts.\n          params.vy[i] = (Math.random() \u003c 0.45 ? -1 : 1) * (0.8 + 2.2 * Math.random());\n          params.vx[i] = params.vy[i] * 2;\n          y = POOL - dep * 3;\n        } else if (!inDish && y >= TABLE - dep * 1.5) {\n          params.kind[i] = 4;\n          params.vx[i] = (x \u003c 31.5 ? -1 : 1) * (2 + 2 * Math.random());\n          y = TABLE - dep * 1.5;\n        }\n      }\n    } else if (kind === 2) {\n      // Sliding down the top of a stone to its lower end, then over.\n      const L = LEDGES[params.led[i]];\n      const dir = L[2] > L[1] ? 1 : -1;\n      x += dir * (6 + 3 * params.dep[i]) * dts;\n      y = stoneTop(L[0], x) - 0.6 - params.dep[i] * 1.4;\n      if ((x - L[2]) * dir > 0) {\n        params.kind[i] = 1;\n        params.vx[i] = dir * 3.5;\n        params.vy[i] = 0.5;\n      }\n    } else {\n      // Pooled on the dish or the table: spreading out, wandering, thinning.\n      params.vx[i] += ((Math.random() - 0.5) * 9 + breeze * 9 + (kind === 3 ? params.vy[i] - params.vx[i] : -0.3 * params.vx[i])) * dts;\n      x += params.vx[i] * dts;\n      if (kind === 3) {\n        y = POOL - params.dep[i] * 3 - 0.6 * Math.sin(age * 1.3 + params.dep[i] * 9);\n        if (x \u003c 5.5 || x > 57.5) {\n          params.kind[i] = 1;\n          params.vy[i] = 0.5;\n        } else if (age > 20) params.kind[i] = -1;\n      } else if (age > 13 || x \u003c -2 || x > W + 1) params.kind[i] = -1;\n    }\n    X[i] = x;\n    Y[i] = y;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = 0.58 + k[0];\n  params.speed = Math.max(0.1, k[1] / 2);\n  params.sticks = Math.max(1, Math.min(3, Math.round(k[2])));\n  params.breeze = Math.max(-1, Math.min(1, k[3]));\n  if (!params.started) {\n    params.started = true;\n    // Ten seconds of smoke before the first frame, so the thread is up and the dish has its pool.\n    for (let n = 0; n \u003c 100; n++) step(params, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.breath = 0;\n    params.by = 22 + Math.random() * 40;\n    params.bdir = Math.random() \u003c 0.5 ? -1 : 1;\n  }\n  params.breath += dt;\n  params.flare = params.breath \u003c 2 ? Math.sin((Math.PI * params.breath) / 2) : 0;\n  step(params, dt * params.speed);\n}\n\nfunction splat(dens, x, y, w) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  if (ix \u003c 0 || iy \u003c 0 || ix >= W - 1 || iy >= H - 1) return;\n  const fx = x - ix;\n  const fy = y - iy;\n  const o = iy * W + ix;\n  dens[o] += w * (1 - fx) * (1 - fy);\n  dens[o + 1] += w * fx * (1 - fy);\n  dens[o + W] += w * (1 - fx) * fy;\n  dens[o + W + 1] += w * fx * fy;\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  buf.set(params.scene);\n  const fr = params.front;\n  const c = params.col;\n  // The lamp: its colour on the smoke, and a paler wash of it on the room and the lit edges.\n  const light = hsv([0, 0, 0], params.hue, 0.5, 0.95);\n  const room = hsv([0, 0, 0], params.hue, 0.45, 0.95);\n  const glow = params.glow;\n  for (let p = 0; p \u003c W * H; p++) {\n    const g = glow[p];\n    if (g === 0) continue;\n    buf[p * 3] += room[0] * g;\n    buf[p * 3 + 1] += room[1] * g;\n    buf[p * 3 + 2] += room[2] * g;\n  }\n  // Sticks behind the stones and the dish: bamboo at the foot, the dark coated length, and grey ash over the ember.\n  const embers = [[CONE_X, CONE_Y, 0]];\n  for (let s = 0; s \u003c params.sticks; s++) {\n    const [bx, by, tx, ty] = STICKS[s];\n    for (let y = ty; y \u003c= by; y++) {\n      const x = Math.round(bx + ((tx - bx) * (by - y)) / (by - ty));\n      if (fr[y * W + x]) continue;\n      if (y - ty \u003c 2) hsv(c, 0.08, 0.06, 0.55 - 0.1 * (y - ty));\n      else if (by - y \u003c 9) hsv(c, 0.11, 0.45, 0.5);\n      else hsv(c, 0.02, 0.62, 0.36);\n      buf.set(c, (y * W + x) * 3);\n    }\n    embers.push([tx, ty + 2, s + 1]);\n  }\n\n  // Smoke goes into two layers: the threads as they are, and the broken-up and pooled smoke, which is blurred so it reads as haze, not grains.\n  const dens = params.dens;\n  const soft = params.soft;\n  dens.fill(0);\n  soft.fill(0);\n  const hb = params.hb;\n  // The tip burns at its own pace, so in a slow draught the same smoke crowds into less air and looks thicker.\n  const thick = Math.pow(params.speed, -0.35);\n  for (let i = 0; i \u003c MAXP; i++) {\n    const kind = params.kind[i];\n    if (kind \u003c 0) continue;\n    const age = params.age[i];\n    const x = params.x[i];\n    const y = params.y[i];\n    if (kind === 0) {\n      // Rising smoke thins as it cools. A thread is drawn as a line back to the smoke let go just before it, so a stretched line spreads the same smoke thinner.\n      const s = params.src[i];\n      const w = 0.75 * thick * Math.exp(-age / 9);\n      const ws = w * 0.85 * smooth((params.sy[s] - y - hb) / 18);\n      const wc = w - ws;\n      const both = ws > 0.01 * w && wc > 0.16 * w;\n      const into = wc > ws ? dens : soft;\n      const j = params.prev[i];\n      if (j >= 0 && params.kind[j] === 0 && params.src[j] === s && params.emit[j] \u003c= params.emit[i]) {\n        const dx = params.x[j] - x;\n        const dy = params.y[j] - y;\n        const d = Math.abs(dx) + Math.abs(dy);\n        if (d \u003c 9) {\n          const n = Math.ceil(d / 0.75);\n          for (let k = 0; k \u003c n; k++) {\n            if (both) {\n              splat(dens, x + (dx * k) / n, y + (dy * k) / n, wc / n);\n              splat(soft, x + (dx * k) / n, y + (dy * k) / n, ws / n);\n            } else splat(into, x + (dx * k) / n, y + (dy * k) / n, w / n);\n          }\n          continue;\n        }\n      }\n      splat(into, x, y, w);\n      continue;\n    }\n    // The heavy smoke stays milky until it has lain a while.\n    if (kind === 3 || kind === 4) splat(soft, x, y, 0.35 * thick * Math.min(1, ((kind === 3 ? 20 : 13) - age) / 6));\n    else {\n      splat(dens, x, y, 0.23 * thick);\n      splat(soft, x, y, 0.23 * thick);\n    }\n  }\n  // A 3 x 3 tent blur of the soft layer, across then down.\n  const tmp = params.tmp;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      tmp[p] = 0.5 * soft[p] + 0.25 * ((x > 0 ? soft[p - 1] : 0) + (x \u003c W - 1 ? soft[p + 1] : 0));\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      dens[p] += 0.5 * tmp[p] + 0.25 * ((y > 0 ? tmp[p - W] : 0) + (y \u003c H - 1 ? tmp[p + W] : 0));\n    }\n\n  for (let p = 0; p \u003c W * H; p++) {\n    const d = dens[p];\n    if (d \u003c 0.004) continue;\n    const s = 1 - Math.exp(-d * 2.2);\n    // Thin smoke takes the lamp's colour; where it is thick it scatters more of everything and goes whiter.\n    const wv = s * s * 0.3;\n    const o = p * 3;\n    buf[o] += (light[0] + (245 - light[0]) * wv - buf[o]) * s;\n    buf[o + 1] += (light[1] + (245 - light[1]) * wv - buf[o + 1]) * s;\n    buf[o + 2] += (light[2] + (245 - light[2]) * wv - buf[o + 2]) * s;\n  }\n\n  // Embers breathe, and flare when breathed on; their glow warms the smoke right over them.\n  for (const [ex, ey, s] of embers) {\n    const heat = (0.8 + 0.12 * Math.sin(time * 1.7 + s * 2.3) + 0.08 * Math.sin(time * 4.1 + s)) * (1 + 0.6 * params.flare);\n    const cx = Math.round(ex);\n    const cy = Math.round(ey);\n    for (let dy = -3; dy \u003c= 3; dy++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const x = cx + dx;\n        const y = cy + dy;\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const g = heat * Math.exp(-(dx * dx + dy * dy) / 2.2) * (dx === 0 && dy === 0 ? 1 : 0.5);\n        const o = (y * W + x) * 3;\n        buf[o] += 255 * g;\n        buf[o + 1] += 105 * g;\n        buf[o + 2] += 30 * g;\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","layer":{"id":"layer-incense","type":"code","name":"incense","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Incense\n// Family:  noise\n// Idea:    A backflow cone on a little cairn of stones sends a thin thread of smoke straight up until it snakes, curls and breaks into wisps in a curl-noise draught, while its heavy smoke pours down the stones like water and pools in the dish.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bridson, Hourihan and Nordenstam's curl noise for procedural fluid flow (SIGGRAPH 2007), driving smoke particles\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sticks=1..3, Breeze=-1..1\n//\n// Knob 1: Hue. The colour of the lamp that lights the smoke and the room, starting from a cool grey-blue; thick smoke goes whiter whatever the colour.\n// Knob 2: Speed. How fast the air moves: at 2 the thread leaves the tip at 18 rows a second and breaks up about 17 rows above it; at 0.2 the smoke drifts up ten times slower and holds together for 29 rows; at 3 it breaks up after 10.\n// Knob 3: Sticks. One to three sticks of incense standing in the dish beside the burner, each with a glowing tip and its own thread; each stick past the first warms and stirs the air so every thread breaks up 3.5 rows sooner.\n// Knob 4: Breeze. A cross draught: at 0 the smoke rises straight; turned either way it leans that way, breaks up as much as 9 rows sooner, bends the falling smoke and drags the pool along the dish.\n// Buttons: K1 tap breathes across the smoke at some height between rows 22 and 62, bending and scrambling the threads there for a second and a half while the embers flare.\n\nconst W = 64;\nconst H = 128;\nconst MAXP = 4600;\n// Rows: the dish's rim is DISH, the pooled smoke lies at POOL, the table top is TABLE.\nconst DISH = 114;\nconst POOL = 113.5;\nconst TABLE = 123.5;\n// The cone's glowing tip, and the hole in the top stone where its heavy smoke comes out.\nconst CONE_X = 32;\nconst CONE_Y = 76;\nconst HOLE_X = 32;\nconst HOLE_Y = 91;\n// Sticks in the dish as base x, base y, tip x, tip y. The first stands behind the stones.\nconst STICKS = [\n  [41, 104, 42.5, 66],\n  [11, 116, 12, 92],\n  [53, 116, 51.5, 97],\n];\n// Stones of the burner as left x, right x, top y at the left, top y at the right, bottom y.\nconst STONES = [\n  [21, 52, 109, 104, 113],\n  [19, 47, 96, 99, 105],\n  [25, 39, 84, 84, 95],\n];\n// The heavy smoke slides down the tops of the two lower stones: stone index, from x, to x.\nconst LEDGES = [\n  [1, 24, 47.5],\n  [0, 52, 22],\n];\n// Curl-noise velocity grid: a node every 2 LEDs.\nconst GX = 33;\nconst GY = 65;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(out, h, s, v) {\n  h -= Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n  return out;\n}\n\nfunction smooth(v) {\n  v = v \u003c 0 ? 0 : v > 1 ? 1 : v;\n  return v * v * (3 - 2 * v);\n}\n\nfunction stoneTop(s, x) {\n  const S = STONES[s];\n  return S[2] + ((S[3] - S[2]) * (x - S[0])) / (S[1] - S[0]);\n}\n\nexport function setup(params) {\n  const lat = new Float32Array(256 * 256);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  params.lat = lat;\n  // Particles: position, velocity, age, what they are doing, where they came from, when, and a depth in the stream.\n  params.x = new Float32Array(MAXP);\n  params.y = new Float32Array(MAXP);\n  params.vx = new Float32Array(MAXP);\n  params.vy = new Float32Array(MAXP);\n  params.age = new Float32Array(MAXP);\n  params.kind = new Int8Array(MAXP).fill(-1);\n  params.src = new Int8Array(MAXP);\n  params.emit = new Float32Array(MAXP);\n  params.dep = new Float32Array(MAXP);\n  params.led = new Int8Array(MAXP);\n  // Each rising particle remembers the one its source let go just before it, so the thread is drawn as a line between them.\n  params.prev = new Int32Array(MAXP).fill(-1);\n  params.last = new Int32Array(5).fill(-1);\n  params.next = 0;\n  params.gvx = new Float32Array(GX * GY);\n  params.gvy = new Float32Array(GX * GY);\n  params.psi = new Float32Array(GX * GY);\n  params.dens = new Float32Array(W * H);\n  params.soft = new Float32Array(W * H);\n  params.tmp = new Float32Array(W * H);\n  params.scene = new Float32Array(W * H * 3);\n  // 1 where a stone or the dish stands in front of the sticks.\n  params.front = new Uint8Array(W * H);\n  params.buf = new Float32Array(W * H * 3);\n  params.glow = new Float32Array(W * H);\n  params.debt = new Float32Array(5);\n  params.sx = new Float32Array(4);\n  params.sy = new Float32Array(4);\n  params.sway = new Float32Array(4);\n  params.col = [0, 0, 0];\n  params.t = 0;\n  params.started = false;\n  params.breath = 9;\n  params.by = 40;\n  params.bdir = 1;\n  params.sticks = 0;\n  params.flare = 0;\n  params.hb = 17;\n  bakeScene(params);\n}\n\nfunction bakeScene(params) {\n  const sc = params.scene;\n  const fr = params.front;\n  const c = params.col;\n  const set = (x, y) => sc.set(c, (y * W + x) * 3);\n  // A dark room, a little lighter up to the left where the lamp is; draw() colours it with the lamp.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) params.glow[y * W + x] = 0.012 + 0.1 * (1 - Math.hypot(x + 10, y - 20) / 140);\n  // The table, dark wood with its grain running across.\n  for (let y = TABLE + 0.5; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 0.5 + 0.5 * Math.sin(x * 0.21 + Math.sin(x * 0.05 + y) * 2 + y * 1.7);\n      hsv(c, 0.07, 0.62, y === TABLE + 0.5 ? 0.24 : 0.13 + 0.04 * g);\n      set(x, y);\n      params.glow[y * W + x] = y === TABLE + 0.5 ? 0.16 - (0.1 * x) / W : 0;\n    }\n  // Stones, glazed a dark celadon, lit on their top edges and on the side towards the lamp.\n  STONES.forEach((S, s) => {\n    for (let x = S[0]; x \u003c= S[1]; x++) {\n      const top = Math.round(stoneTop(s, x));\n      const u = (x - S[0]) / (S[1] - S[0]);\n      for (let y = top; y \u003c= S[4]; y++) {\n        // Rounded corners, and sides that bulge a little at the middle like a river stone.\n        const e = Math.min(y - top, S[4] - y);\n        const inset = (e \u003c 2 ? 2 - e : 0) + 1.2 * Math.abs((2 * (y - top)) / (S[4] - top) - 1) ** 2;\n        if (x \u003c S[0] + inset - 0.3 || x > S[1] - inset + 0.3) continue;\n        const edgeL = x \u003c S[0] + inset + 0.7;\n        const edgeR = x > S[1] - inset - 0.7;\n        // Layers in the stone, a few pits, darker towards the foot and away from the lamp.\n        let v = 0.25 - 0.09 * u + 0.025 * Math.sin(y * 1.1 + s * 2 + x * 0.08) + 0.04 * (hash(x, y) - 0.5) - (0.07 * (y - top)) / (S[4] - top + 1);\n        if (hash(x * 5, y * 3 + s) \u003c 0.05) v -= 0.06;\n        if (y === top) v = 0.46 - 0.12 * u;\n        else if (edgeL || y === top + 1) v += 0.06;\n        else if (edgeR || y === S[4]) v -= 0.06;\n        hsv(c, 0.44, 0.32, v);\n        set(x, y);\n        fr[y * W + x] = 1;\n        // The lamp catches the top edges.\n        params.glow[y * W + x] = y === top ? 0.22 - 0.12 * u : 0;\n      }\n    }\n  });\n  // The hole the heavy smoke comes out of, and the cone sitting on the top stone.\n  for (let x = 31; x \u003c= 33; x++) {\n    hsv(c, 0.44, 0.4, x === 32 ? 0.03 : 0.08);\n    set(x, HOLE_Y - 1);\n    set(x, HOLE_Y);\n  }\n  for (let y = CONE_Y + 1; y \u003c 84; y++) {\n    const half = ((y - CONE_Y) * 3.4) / (83 - CONE_Y);\n    for (let x = Math.round(CONE_X - half); x \u003c= Math.round(CONE_X + half); x++) {\n      hsv(c, 0.03, 0.55, 0.36 - (0.12 * (x - CONE_X + half)) / (2 * half + 1));\n      set(x, y);\n      fr[y * W + x] = 1;\n      params.glow[y * W + x] = 0;\n    }\n  }\n  // The dish, a dark iron glaze with a lit rim, standing on a foot.\n  for (let y = DISH; y \u003c= DISH + 8; y++) {\n    const q = (y - DISH) / 7;\n    const half = y > DISH + 7 ? 13 : 26.5 - 7 * q * q;\n    for (let x = Math.ceil(31.5 - half); x \u003c= Math.floor(31.5 + half); x++) {\n      const u = (x - 31.5 + half) / (2 * half);\n      let v = y === DISH ? 0.55 - 0.2 * u : 0.24 - 0.12 * u - 0.06 * q + 0.03 * hash(x, y);\n      if (y === DISH + 1) v += 0.08;\n      hsv(c, 0.05, y === DISH ? 0.35 : 0.6, v);\n      set(x, y);\n      fr[y * W + x] = 1;\n      params.glow[y * W + x] = y === DISH ? 0.2 - 0.12 * u : 0;\n    }\n  }\n}\n\nfunction spawn(params, kind, x, y, vx, vy, src) {\n  const i = params.next;\n  params.next = (i + 1) % MAXP;\n  params.kind[i] = kind;\n  params.x[i] = x;\n  params.y[i] = y;\n  params.vx[i] = vx;\n  params.vy[i] = vy;\n  params.age[i] = 0;\n  params.src[i] = src;\n  params.emit[i] = params.t;\n  params.dep[i] = Math.random();\n  return i;\n}\n\n// The draught: a stream function of two octaves of noise drifting up with the smoke; its curl\n// gives a velocity that swirls without ever piling smoke up or thinning it out.\nfunction stepField(params) {\n  const lat = params.lat;\n  const t = params.t;\n  const psi = params.psi;\n  for (let j = 0; j \u003c GY; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const x = i * 2;\n      const y = j * 2;\n      psi[j * GX + i] = vn(lat, x / 13 + 0.05 * t, (y + 11 * t) / 13) + 0.4 * vn(lat, x / 5.5 - 0.09 * t + 40, (y + 15 * t) / 5.5 + 40);\n    }\n  const gvx = params.gvx;\n  const gvy = params.gvy;\n  for (let j = 0; j \u003c GY; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const jm = j > 0 ? j - 1 : j;\n      const jp = j \u003c GY - 1 ? j + 1 : j;\n      const im = i > 0 ? i - 1 : i;\n      const ip = i \u003c GX - 1 ? i + 1 : i;\n      gvx[j * GX + i] = ((psi[jp * GX + i] - psi[jm * GX + i]) / (2 * (jp - jm))) * 190;\n      gvy[j * GX + i] = (-(psi[j * GX + ip] - psi[j * GX + im]) / (2 * (ip - im))) * 190;\n    }\n}\n\nfunction step(params, dts) {\n  const t = (params.t += dts);\n  stepField(params);\n  const sticks = params.sticks;\n  const breeze = params.breeze;\n  // Sources: the cone, then the sticks the knob has lit. Room air leans each thread gently one way and the other.\n  const srcs = 1 + sticks;\n  const SX = params.sx;\n  const SY = params.sy;\n  const sway = params.sway;\n  for (let s = 0; s \u003c srcs; s++) {\n    SX[s] = s === 0 ? CONE_X : STICKS[s - 1][2];\n    SY[s] = s === 0 ? CONE_Y : STICKS[s - 1][3];\n    sway[s] = 2 * Math.sin(t * 0.43 + s * 2) + 1.2 * Math.sin(t * 0.17 + s);\n    params.debt[s] += 50 * dts;\n    while (params.debt[s] >= 1) {\n      params.debt[s] -= 1;\n      // vx keeps how far this bit of smoke will be pushed aside where the thread starts to snake.\n      const i = spawn(params, 0, SX[s] + (Math.random() - 0.5) * 0.15, SY[s] - 1 - Math.random(), 5 * Math.sin(t * 2.7 + s * 1.9), 0, s);\n      params.prev[i] = params.last[s];\n      params.last[s] = i;\n    }\n  }\n  // Heavy smoke out of the hole in the stone.\n  params.debt[4] += 44 * dts;\n  while (params.debt[4] >= 1) {\n    params.debt[4] -= 1;\n    spawn(params, 1, HOLE_X + (Math.random() - 0.5) * 2, HOLE_Y + 0.5, (Math.random() - 0.5) * 0.8, 2, 4);\n  }\n\n  // How far a thread climbs before it breaks up: less in a faster or crosswise draught.\n  // More sticks warm the air more and stir it, so every thread breaks sooner.\n  const hb = (params.hb = 17 * (1.8 - 0.8 * params.speed) - 9 * Math.abs(breeze) - 3.5 * (sticks - 1));\n  const breath = params.breath;\n  const env = breath \u003c 1.6 ? Math.sin((Math.PI * breath) / 1.6) : 0;\n  const gvx = params.gvx;\n  const gvy = params.gvy;\n  const X = params.x;\n  const Y = params.y;\n  for (let i = 0; i \u003c MAXP; i++) {\n    const kind = params.kind[i];\n    if (kind \u003c 0) continue;\n    const age = (params.age[i] += dts);\n    let x = X[i];\n    let y = Y[i];\n    if (kind === 0) {\n      const s = params.src[i];\n      const h = SY[s] - y;\n      const turb = smooth((h - hb) / 18);\n      // Still air carries the thread straight up, slower as it cools.\n      let ux = breeze * 20 * (0.2 + Math.min(1, h / 45)) + sway[s] * Math.min(1, h / 25);\n      let uy = -18 * (0.4 + 0.6 * Math.exp(-h / 50));\n      // A broken-up plume entrains the air round it and widens as it climbs.\n      ux += (x - SX[s]) * 0.12 * turb;\n      // Just below the break the thread starts to snake: each bit of smoke was pushed aside by the moment it left the tip.\n      if (h > hb - 14) ux += params.vx[i] * smooth((h - hb + 14) / 12) * (1 - 0.6 * turb);\n      if (turb > 0 || env > 0) {\n        const gx = Math.max(0, Math.min(GX - 1.001, x / 2));\n        const gy = Math.max(0, Math.min(GY - 1.001, y / 2));\n        const ix = Math.floor(gx);\n        const iy = Math.floor(gy);\n        const fx = gx - ix;\n        const fy = gy - iy;\n        const o = iy * GX + ix;\n        const a = (1 - fx) * (1 - fy);\n        const b = fx * (1 - fy);\n        const c = (1 - fx) * fy;\n        const d = fx * fy;\n        let amp = turb;\n        if (env > 0) {\n          const e = env * Math.exp(-((y - params.by) * (y - params.by)) / 120);\n          ux += params.bdir * 45 * e;\n          amp += 1.6 * e;\n        }\n        ux += amp * (gvx[o] * a + gvx[o + 1] * b + gvx[o + GX] * c + gvx[o + GX + 1] * d);\n        uy += amp * (gvy[o] * a + gvy[o + 1] * b + gvy[o + GX] * c + gvy[o + GX + 1] * d);\n      }\n      x += ux * dts;\n      y += uy * dts;\n      // Past the break the smoke also spreads in small eddies the field is too coarse to hold.\n      if (turb > 0) {\n        const r = turb * 1.4 * Math.sqrt(dts);\n        x += (Math.random() - 0.5) * r;\n        y += (Math.random() - 0.5) * r;\n      }\n      if (y \u003c -3 || x \u003c -3 || x > W + 2 || age > 9) params.kind[i] = -1;\n    } else if (kind === 1) {\n      // Heavy smoke falls slowly and lands on a stone, in the dish or on the table.\n      let vy = params.vy[i] + 22 * dts;\n      if (vy > 9) vy = 9;\n      params.vy[i] = vy;\n      params.vx[i] += (breeze * 9 - params.vx[i]) * dts;\n      x += params.vx[i] * dts;\n      const ny = y + vy * dts;\n      const dep = params.dep[i];\n      let landed = false;\n      for (let l = 0; l \u003c LEDGES.length && !landed; l++) {\n        const L = LEDGES[l];\n        if (x \u003c Math.min(L[1], L[2]) || x > Math.max(L[1], L[2])) continue;\n        const top = stoneTop(L[0], x) - 0.6 - dep * 1.4;\n        if (y \u003c= top + 0.5 && ny >= top) {\n          params.kind[i] = 2;\n          params.led[i] = l;\n          y = top;\n          landed = true;\n        }\n      }\n      if (!landed) {\n        y = ny;\n        const inDish = x > 6 && x \u003c 57;\n        if (inDish && y >= POOL - dep * 3) {\n          params.kind[i] = 3;\n          // Pooled smoke spreads out over the dish from where it lands; vy keeps the way it drifts.\n          params.vy[i] = (Math.random() \u003c 0.45 ? -1 : 1) * (0.8 + 2.2 * Math.random());\n          params.vx[i] = params.vy[i] * 2;\n          y = POOL - dep * 3;\n        } else if (!inDish && y >= TABLE - dep * 1.5) {\n          params.kind[i] = 4;\n          params.vx[i] = (x \u003c 31.5 ? -1 : 1) * (2 + 2 * Math.random());\n          y = TABLE - dep * 1.5;\n        }\n      }\n    } else if (kind === 2) {\n      // Sliding down the top of a stone to its lower end, then over.\n      const L = LEDGES[params.led[i]];\n      const dir = L[2] > L[1] ? 1 : -1;\n      x += dir * (6 + 3 * params.dep[i]) * dts;\n      y = stoneTop(L[0], x) - 0.6 - params.dep[i] * 1.4;\n      if ((x - L[2]) * dir > 0) {\n        params.kind[i] = 1;\n        params.vx[i] = dir * 3.5;\n        params.vy[i] = 0.5;\n      }\n    } else {\n      // Pooled on the dish or the table: spreading out, wandering, thinning.\n      params.vx[i] += ((Math.random() - 0.5) * 9 + breeze * 9 + (kind === 3 ? params.vy[i] - params.vx[i] : -0.3 * params.vx[i])) * dts;\n      x += params.vx[i] * dts;\n      if (kind === 3) {\n        y = POOL - params.dep[i] * 3 - 0.6 * Math.sin(age * 1.3 + params.dep[i] * 9);\n        if (x \u003c 5.5 || x > 57.5) {\n          params.kind[i] = 1;\n          params.vy[i] = 0.5;\n        } else if (age > 20) params.kind[i] = -1;\n      } else if (age > 13 || x \u003c -2 || x > W + 1) params.kind[i] = -1;\n    }\n    X[i] = x;\n    Y[i] = y;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = 0.58 + k[0];\n  params.speed = Math.max(0.1, k[1] / 2);\n  params.sticks = Math.max(1, Math.min(3, Math.round(k[2])));\n  params.breeze = Math.max(-1, Math.min(1, k[3]));\n  if (!params.started) {\n    params.started = true;\n    // Ten seconds of smoke before the first frame, so the thread is up and the dish has its pool.\n    for (let n = 0; n \u003c 100; n++) step(params, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.breath = 0;\n    params.by = 22 + Math.random() * 40;\n    params.bdir = Math.random() \u003c 0.5 ? -1 : 1;\n  }\n  params.breath += dt;\n  params.flare = params.breath \u003c 2 ? Math.sin((Math.PI * params.breath) / 2) : 0;\n  step(params, dt * params.speed);\n}\n\nfunction splat(dens, x, y, w) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  if (ix \u003c 0 || iy \u003c 0 || ix >= W - 1 || iy >= H - 1) return;\n  const fx = x - ix;\n  const fy = y - iy;\n  const o = iy * W + ix;\n  dens[o] += w * (1 - fx) * (1 - fy);\n  dens[o + 1] += w * fx * (1 - fy);\n  dens[o + W] += w * (1 - fx) * fy;\n  dens[o + W + 1] += w * fx * fy;\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  buf.set(params.scene);\n  const fr = params.front;\n  const c = params.col;\n  // The lamp: its colour on the smoke, and a paler wash of it on the room and the lit edges.\n  const light = hsv([0, 0, 0], params.hue, 0.5, 0.95);\n  const room = hsv([0, 0, 0], params.hue, 0.45, 0.95);\n  const glow = params.glow;\n  for (let p = 0; p \u003c W * H; p++) {\n    const g = glow[p];\n    if (g === 0) continue;\n    buf[p * 3] += room[0] * g;\n    buf[p * 3 + 1] += room[1] * g;\n    buf[p * 3 + 2] += room[2] * g;\n  }\n  // Sticks behind the stones and the dish: bamboo at the foot, the dark coated length, and grey ash over the ember.\n  const embers = [[CONE_X, CONE_Y, 0]];\n  for (let s = 0; s \u003c params.sticks; s++) {\n    const [bx, by, tx, ty] = STICKS[s];\n    for (let y = ty; y \u003c= by; y++) {\n      const x = Math.round(bx + ((tx - bx) * (by - y)) / (by - ty));\n      if (fr[y * W + x]) continue;\n      if (y - ty \u003c 2) hsv(c, 0.08, 0.06, 0.55 - 0.1 * (y - ty));\n      else if (by - y \u003c 9) hsv(c, 0.11, 0.45, 0.5);\n      else hsv(c, 0.02, 0.62, 0.36);\n      buf.set(c, (y * W + x) * 3);\n    }\n    embers.push([tx, ty + 2, s + 1]);\n  }\n\n  // Smoke goes into two layers: the threads as they are, and the broken-up and pooled smoke, which is blurred so it reads as haze, not grains.\n  const dens = params.dens;\n  const soft = params.soft;\n  dens.fill(0);\n  soft.fill(0);\n  const hb = params.hb;\n  // The tip burns at its own pace, so in a slow draught the same smoke crowds into less air and looks thicker.\n  const thick = Math.pow(params.speed, -0.35);\n  for (let i = 0; i \u003c MAXP; i++) {\n    const kind = params.kind[i];\n    if (kind \u003c 0) continue;\n    const age = params.age[i];\n    const x = params.x[i];\n    const y = params.y[i];\n    if (kind === 0) {\n      // Rising smoke thins as it cools. A thread is drawn as a line back to the smoke let go just before it, so a stretched line spreads the same smoke thinner.\n      const s = params.src[i];\n      const w = 0.75 * thick * Math.exp(-age / 9);\n      const ws = w * 0.85 * smooth((params.sy[s] - y - hb) / 18);\n      const wc = w - ws;\n      const both = ws > 0.01 * w && wc > 0.16 * w;\n      const into = wc > ws ? dens : soft;\n      const j = params.prev[i];\n      if (j >= 0 && params.kind[j] === 0 && params.src[j] === s && params.emit[j] \u003c= params.emit[i]) {\n        const dx = params.x[j] - x;\n        const dy = params.y[j] - y;\n        const d = Math.abs(dx) + Math.abs(dy);\n        if (d \u003c 9) {\n          const n = Math.ceil(d / 0.75);\n          for (let k = 0; k \u003c n; k++) {\n            if (both) {\n              splat(dens, x + (dx * k) / n, y + (dy * k) / n, wc / n);\n              splat(soft, x + (dx * k) / n, y + (dy * k) / n, ws / n);\n            } else splat(into, x + (dx * k) / n, y + (dy * k) / n, w / n);\n          }\n          continue;\n        }\n      }\n      splat(into, x, y, w);\n      continue;\n    }\n    // The heavy smoke stays milky until it has lain a while.\n    if (kind === 3 || kind === 4) splat(soft, x, y, 0.35 * thick * Math.min(1, ((kind === 3 ? 20 : 13) - age) / 6));\n    else {\n      splat(dens, x, y, 0.23 * thick);\n      splat(soft, x, y, 0.23 * thick);\n    }\n  }\n  // A 3 x 3 tent blur of the soft layer, across then down.\n  const tmp = params.tmp;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      tmp[p] = 0.5 * soft[p] + 0.25 * ((x > 0 ? soft[p - 1] : 0) + (x \u003c W - 1 ? soft[p + 1] : 0));\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      dens[p] += 0.5 * tmp[p] + 0.25 * ((y > 0 ? tmp[p - W] : 0) + (y \u003c H - 1 ? tmp[p + W] : 0));\n    }\n\n  for (let p = 0; p \u003c W * H; p++) {\n    const d = dens[p];\n    if (d \u003c 0.004) continue;\n    const s = 1 - Math.exp(-d * 2.2);\n    // Thin smoke takes the lamp's colour; where it is thick it scatters more of everything and goes whiter.\n    const wv = s * s * 0.3;\n    const o = p * 3;\n    buf[o] += (light[0] + (245 - light[0]) * wv - buf[o]) * s;\n    buf[o + 1] += (light[1] + (245 - light[1]) * wv - buf[o + 1]) * s;\n    buf[o + 2] += (light[2] + (245 - light[2]) * wv - buf[o + 2]) * s;\n  }\n\n  // Embers breathe, and flare when breathed on; their glow warms the smoke right over them.\n  for (const [ex, ey, s] of embers) {\n    const heat = (0.8 + 0.12 * Math.sin(time * 1.7 + s * 2.3) + 0.08 * Math.sin(time * 4.1 + s)) * (1 + 0.6 * params.flare);\n    const cx = Math.round(ex);\n    const cy = Math.round(ey);\n    for (let dy = -3; dy \u003c= 3; dy++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const x = cx + dx;\n        const y = cy + dy;\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const g = heat * Math.exp(-(dx * dx + dy * dy) / 2.2) * (dx === 0 && dy === 0 ? 1 : 0.5);\n        const o = (y * W + x) * 3;\n        buf[o] += 255 * g;\n        buf[o + 1] += 105 * g;\n        buf[o + 2] += 30 * g;\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Sticks=1..3, Breeze=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the lamp that lights the smoke and the room, starting from a cool grey-blue; thick smoke goes whiter whatever the colour."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the air moves: at 2 the thread leaves the tip at 18 rows a second and breaks up about 17 rows above it; at 0.2 the smoke drifts up ten times slower and holds together for 29 rows; at 3 it breaks up after 10."},{"name":"Sticks","min":1,"max":3,"about":"One to three sticks of incense standing in the dish beside the burner, each with a glowing tip and its own thread; each stick past the first warms and stirs the air so every thread breaks up 3.5 rows sooner."},{"name":"Breeze","min":-1,"max":1,"about":"A cross draught: at 0 the smoke rises straight; turned either way it leans that way, breaks up as much as 9 rows sooner, bends the falling smoke and drags the pool along the dish."}],"start":[0,2,1,0.06],"measures":{"motion":0.2464,"detail":0.0379,"edges":0.3304,"complexity":1.0761,"coverage":0.3311,"colour":0.0945,"drift":0.0442},"knobResponse":[0.0522,0.0616,0.0686,0.0518]},{"slug":"ivy","title":"Ivy","family":"growth","round":15,"note":"돌담을 타고 담쟁이가 꼭대기까지 올라요. 바람이 잎을 뒤집어 옅은 뒷면이 물결치고, 가을이면 잎이 노랑에서 진홍으로 물들어 떨어져요. 겨울에는 맨 줄기에 검푸른 열매가 남아요.","idea":"Boston ivy climbs a stone wall from the ground to the top of the panel, branching and reaching out tendrils; every year its leaves turn from green through yellow to red, fall down the wall and come back in spring.","buttons":"K1 tap cuts the oldest stem at the ground: its leaves go brown and drop, the dead wood fades in 5 seconds, and a new shoot starts climbing in its place, or in spring if it is autumn or winter.","code":"// ===== Patternflow pattern =====\n// Title:   Ivy\n// Family:  growth\n// Idea:    Boston ivy climbs a stone wall from the ground to the top of the panel, branching and reaching out tendrils; every year its leaves turn from green through yellow to red, fall down the wall and come back in spring.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 13\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Vines=2..6, Wind=-1..1\n//\n// Knob 1: Hue. The leaf colour, starting from green; autumn always turns the leaves a third of the way back round the colour wheel, so green goes through yellow to red.\n// Knob 2: Speed. How fast the year turns: at 2 a year is 60 seconds and a new stem climbs the 120 rows of wall in about 16; at 3 a year is 40 seconds, at 0.2 ten minutes. The gusts come and go faster with it.\n// Knob 3: Vines. How many stems come out of the ground, 2 to 6; turning it up starts new shoots at the foot of the wall, turning it down cuts stems so they wither.\n// Knob 4: Wind. Near 0 a breath of air now and then turns a few leaves silver side up; turned either way the gusts come more often from that side, sweep the wall faster and, past halfway, tear leaves off and blow them away.\n// Buttons: K1 tap cuts the oldest stem at the ground: its leaves go brown and drop, the dead wood fades in 5 seconds, and a new shoot starts climbing in its place, or in spring if it is autumn or winter.\n\nconst W = 64;\nconst H = 128;\n// The wall is rows 0 to 119, thirty courses of stone four LEDs high; the bed is the eight rows under it.\nconst GROUND = 120;\nconst GR = H - GROUND;\n// One year in world seconds. Speed 2 runs the world at twice that, so a year is 60 seconds.\nconst YEAR = 120;\n// Shoots grow until GROW_END of the year, leaves start to turn at TURN and are all down by BARE.\nconst GROW_END = 0.55;\nconst TURN = 0.56;\nconst BARE = 0.86;\nconst MAXS = 500;\nconst MAXL = 1800;\nconst MAXF = 260;\nconst MAXB = 90;\nconst MAXR = 6;\n// A coarse grid of 4 x 4 cells counts stems and leaves, so new growth heads for bare wall.\nconst GW = 16;\nconst GH = 30;\n// The first update grows the vine for this long, so the panel opens in its third spring with the wall covered.\nconst PRE = YEAR * 2.22;\n\n// Leaf sprites as dx, dy pairs: a bud, a small leaf, a half-grown one, a full one. shade() lights them from the upper left.\nconst LEAF = [\n  [0, 0],\n  [0, -1, -1, 0, 0, 0, 1, 0, 0, 1],\n  [0, -1, 1, -1, -1, 0, 0, 0, 1, 0, 2, 0, -1, 1, 0, 1, 1, 1, 2, 1, 0, 2, 1, 2],\n  [-1, -2, 0, -2, 1, -2, -2, -1, -1, -1, 0, -1, 1, -1, 2, -1, -2, 0, -1, 0, 0, 0, 1, 0, 2, 0, -1, 1, 0, 1, 1, 1, 0, 2],\n];\n// A falling leaf seen face on, tipped one way, edge on, tipped the other way.\nconst FALLS = [\n  [-1, 0, 0, 0, 1, 0, 0, -1],\n  [-1, -1, 0, 0, 1, 1],\n  [0, -1, 0, 0],\n  [1, -1, 0, 0, -1, 1],\n];\n// A tendril curling off the stem to the right; the left mirrors it.\nconst CURL = [[1, -1], [2, -1], [3, -2], [3, -3], [2, -3]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// From hue a towards hue b the short way round.\nfunction hueTo(a, b, t) {\n  return a + (b + Math.round(a - b) - a) * t;\n}\n\nfunction hsv(out, h, s, v) {\n  h = (h - Math.floor(h)) * 6;\n  for (let i = 0; i \u003c 3; i++) {\n    const k = (5 - 2 * i + h) % 6;\n    out[i] = 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n  return out;\n}\n\nexport function setup(params) {\n  Object.assign(params, { shoots: [], leaves: [], falls: [], berries: [], queue: [], gusts: [], roots: [], pal: [] });\n  for (let r = 0; r \u003c MAXR; r++) params.roots.push({ use: false, wait: false, x: 32, born: 0, dead: -1 });\n  // Fallen leaves in the bed: colour, the year they fell and how much is left of them.\n  params.gC = new Float32Array(GR * W * 3);\n  params.gY = new Int16Array(GR * W).fill(-1);\n  params.gA = new Float32Array(GR * W);\n  params.occ = new Float32Array(GW * GH);\n  params.wall = new Float32Array(W * H * 3);\n  params.buf = new Float32Array(W * H * 3);\n  for (let k = 0; k \u003c= 16; k++) params.pal.push([0, 0, 0]);\n  Object.assign(params, { col: [0, 0, 0], ts: 0, rt: 0, p: 0, year: 0, started: false, nextGust: 0.6, windDir: 1, hue: 0.29, wind: 0.06, want: 2 });\n  bakeWall(params);\n}\n\nfunction bakeWall(P) {\n  const c = P.col;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= GROUND) {\n        // A bed of dark earth with a few pale pebbles; the foot of the wall casts a line of shadow.\n        const n = hash(x * 3 + 1, y * 7 + 2);\n        if (n \u003c 0.05 && y > GROUND) hsv(c, 0.08, 0.12, 0.27 + 0.08 * hash(x, y));\n        else hsv(c, 0.065, 0.5, (y === GROUND ? 0.08 : 0.12) + 0.05 * n);\n      } else {\n        const course = y >> 2;\n        const row = y & 3;\n        // Stones five to ten LEDs long, each course laid from its own offset.\n        let x0 = -Math.floor(hash(course, 77) * 9);\n        let len = 0;\n        let id = 0;\n        for (;;) {\n          len = 5 + Math.floor(hash(course * 31 + id, 5) * 6);\n          if (x \u003c x0 + len) break;\n          x0 += len;\n          id++;\n        }\n        const col = x - x0;\n        if (row === 3 || col === len - 1) hsv(c, 0.6, 0.12, 0.065);\n        else {\n          const h2 = hash(course * 17 + id, 23);\n          let v = 0.135 + 0.05 * hash(course * 131 + id, 9) + 0.012 * (hash(x, y) - 0.5);\n          v += row === 0 ? 0.018 : row === 2 ? -0.012 : 0;\n          if (col === 0) v += 0.01;\n          // Lighter towards the top, where the sky reaches the wall.\n          hsv(c, 0.58 + 0.07 * (h2 - 0.5), 0.14 + 0.1 * h2, v * (1.12 - (0.24 * y) / GROUND));\n        }\n      }\n      P.wall.set(c, (y * W + x) * 3);\n    }\n}\n\nfunction crowd(P, x, y) {\n  if (x \u003c 1 || x > W - 2 || y \u003c 1 || y > GROUND - 2) return 14;\n  const cx = Math.floor(x / 4);\n  const cy = Math.floor(y / 4);\n  const o = P.occ;\n  const i = cy * GW + cx;\n  return o[i] + 0.3 * ((cx > 0 ? o[i - 1] : 0) + (cx \u003c GW - 1 ? o[i + 1] : 0) + (cy > 0 ? o[i - GW] : 0) + (cy \u003c GH - 1 ? o[i + GW] : 0));\n}\n\nfunction mark(P, x, y, amt) {\n  const cx = Math.floor(x / 4);\n  const cy = Math.floor(y / 4);\n  if (cx >= 0 && cx \u003c GW && cy >= 0 && cy \u003c GH) P.occ[cy * GW + cx] += amt;\n}\n\nfunction newShoot(P, root, gen, x, y, ang, bias, budget) {\n  if (P.shoots.length >= MAXS) return null;\n  const s = { root, gen, x: [x], y: [y], t: [P.ts], node0: 0, budget, grow: true, top: false, ang, bias, acc: 0, rand: Math.random(), side: Math.random() \u003c 0.5 ? -1 : 1 };\n  P.shoots.push(s);\n  return s;\n}\n\nfunction addLeaf(P, s, x, y) {\n  if (x \u003c 0.5 || x > W - 1.5 || y \u003c 1 || y > GROUND - 3 || P.leaves.length >= MAXL) return;\n  // Whole branches turn together, so autumn comes in patches.\n  const turn = TURN + 0.07 * s.rand + 0.06 * Math.random();\n  const size = s.gen === 0 ? 3 : s.gen === 1 && Math.random() \u003c 0.6 ? 3 : 2;\n  P.leaves.push({ x, y, t: P.ts, root: s.root, size, gone: -1, r1: Math.random(), r2: Math.random(), r3: Math.random(), sus: Math.random(), flip: 0, turn, drop: turn + 0.06 + 0.09 * Math.random() });\n  mark(P, x, y, 0.8);\n}\n\nfunction branch(P, s, x, y, a, gen, budget) {\n  const cA = crowd(P, x + Math.sin(a + 1.1) * 5, y - Math.cos(a + 1.1) * 5);\n  const cB = crowd(P, x + Math.sin(a - 1.1) * 5, y - Math.cos(a - 1.1) * 5);\n  if (Math.min(cA, cB) > 7) return;\n  const side = cA \u003c cB ? 1 : -1;\n  const c = newShoot(P, s.root, gen + 1, x, y, a + side * (0.9 + Math.random() * 0.4), side * (0.35 + Math.random() * 0.35), budget);\n  if (c) c.node0 = 1;\n}\n\nfunction addPoint(P, s) {\n  const n = s.x.length;\n  const x = s.x[n - 1];\n  const y = s.y[n - 1];\n  const gen = s.gen;\n  if (s.budget \u003c= 0) {\n    s.grow = false;\n    return;\n  }\n  let a = s.ang + (Math.random() - 0.5) * 0.55;\n  // A main stem keeps to its own lane up the wall; side shoots set off sideways and curve up as they go.\n  const lane = gen === 0 && !s.top ? clamp((P.roots[s.root].x - x) * 0.04, -0.5, 0.5) : 0;\n  a += (s.bias + lane - a) * (gen === 0 ? 0.15 : 0.1);\n  if (gen > 0 && !s.top) s.bias *= 0.98;\n  // Of three headings, the one into the barest wall, with a little chance.\n  let best = a;\n  let bestScore = 1e9;\n  for (let c = -1; c \u003c= 1; c++) {\n    const ca = a + c * 0.45;\n    const score = crowd(P, x + Math.sin(ca) * 4, y - Math.cos(ca) * 4) * 0.3 + Math.abs(c) * 0.3 + Math.random() * 0.35;\n    if (score \u003c bestScore) [bestScore, best] = [score, ca];\n  }\n  a = clamp(best, -2, 2);\n  if (y - Math.cos(a) \u003c 1.5 && !s.top) {\n    // At the top of the wall a shoot turns and runs along the coping for a little way.\n    s.top = true;\n    const side = (x \u003c W / 2) === Math.random() \u003c 0.7 ? 1 : -1;\n    s.bias = side * 1.5;\n    a = side * 1.3;\n    s.budget = Math.min(s.budget, 8 + Math.random() * 12);\n  }\n  const nx = x + Math.sin(a);\n  const ny = y - Math.cos(a);\n  if (ny \u003c 0.5 || nx \u003c 0.5 || nx > W - 1.5 || ny > GROUND - 1.5) {\n    s.grow = false;\n    return;\n  }\n  s.ang = a;\n  s.budget--;\n  s.x.push(nx);\n  s.y.push(ny);\n  s.t.push(P.ts);\n  mark(P, nx, ny, 1);\n  if ((s.node0 + n) % 3 === 0) {\n    s.side = -s.side;\n    addLeaf(P, s, nx - Math.cos(a) * s.side * 2.2, ny - Math.sin(a) * s.side * 2.2 - 0.7);\n  }\n  // Low on the wall a main stem is bushier.\n  if (gen \u003c 2 && Math.random() \u003c (gen === 0 ? (ny > 70 ? 0.12 : 0.07) : 0.035)) branch(P, s, nx, ny, a, gen, gen === 0 ? 18 + Math.random() * 34 : 6 + Math.random() * 12);\n  if (gen > 0 && Math.random() \u003c 0.025 && P.berries.length \u003c MAXB) P.berries.push({ x: nx, y: ny, root: s.root, r: Math.random(), t: P.ts });\n}\n\n// Where a new stem comes out of the ground: as far from the others as the bed allows.\nfunction freeSpot(P, r) {\n  let best = 32;\n  let bestD = -1;\n  for (let x = 5; x \u003c= 58; x++) {\n    const d = Math.min(99, ...P.roots.map((q, i) => (i !== r && q.use ? Math.abs(q.x - x) : 99))) + Math.random() * 2;\n    if (d > bestD) [bestD, best] = [d, x];\n  }\n  return best;\n}\n\nfunction cut(P, r) {\n  const R = P.roots[r];\n  if (R.use && !R.wait && R.dead \u003c 0) R.dead = P.rt;\n}\n\n// Cut the oldest living stem, if it has lived at least this many years.\nfunction cutOldest(P, years) {\n  let old = -1;\n  P.roots.forEach((R, r) => {\n    if (R.use && !R.wait && R.dead \u003c 0 && P.year - Math.floor(R.born / YEAR) >= years && (old \u003c 0 || R.born \u003c P.roots[old].born)) old = r;\n  });\n  if (old >= 0) cut(P, old);\n}\n\n// The dead wood has faded: clear it away and let a new stem come up there, if the Vines knob still wants one.\nfunction freeRoot(P, r) {\n  const R = P.roots[r];\n  P.shoots = P.shoots.filter((s) => s.root !== r);\n  P.leaves = P.leaves.filter((l) => l.root !== r);\n  P.berries = P.berries.filter((b) => b.root !== r);\n  P.queue = P.queue.filter((q) => q.s.root !== r);\n  R.dead = -1;\n  if (r \u003c P.want) {\n    R.wait = true;\n    R.x = clamp(R.x + (Math.random() - 0.5) * 8, 5, 58);\n  } else R.use = false;\n  P.occ.fill(0);\n  for (const s of P.shoots) for (let i = 0; i \u003c s.x.length; i++) mark(P, s.x[i], s.y[i], 1);\n  for (const l of P.leaves) mark(P, l.x, l.y, 0.8);\n}\n\n// Each spring the old wood puts out new side shoots, spread through the growing season.\nfunction springSchedule(P) {\n  P.roots.forEach((R, r) => {\n    if (!R.use || R.wait || R.dead >= 0) return;\n    const cand = P.shoots.filter((s) => s.root === r && s.gen \u003c 2 && s.x.length > 4);\n    if (!cand.length) return;\n    const count = 8 + Math.floor(Math.random() * 5);\n    for (let k = 0; k \u003c count && P.queue.length \u003c 64; k++) {\n      const s = cand[Math.floor(Math.random() * cand.length)];\n      P.queue.push({ s, i: 1 + Math.floor(Math.random() * (s.x.length - 2)), at: P.year * YEAR + YEAR * (0.06 + 0.34 * Math.random()) });\n    }\n  });\n}\n\n// The world clock: seasons, growth and the year's events, in world seconds.\nfunction stepWorld(P, dts, pre) {\n  const prevP = P.p;\n  const ts = (P.ts += dts);\n  const Y = Math.floor(ts / YEAR);\n  const p = (P.p = ts / YEAR - Y);\n  if (Y !== P.year) {\n    P.year = Y;\n    springSchedule(P);\n  }\n  // In the pre-run last autumn's leaves land in the bed, so the panel opens with them rotting there.\n  if (pre && prevP \u003c BARE && p >= BARE)\n    for (const l of P.leaves) if (Math.random() \u003c 0.5) stamp(P, l.x + (Math.random() - 0.5) * 14, GROUND + 1 + Math.random() * (GR - 1.5), leafColour(P, l, 1, l.drop));\n  // Early in winter a stem three years old is cut back, and a new one comes up in spring.\n  if (!pre && prevP \u003c BARE + 0.03 && p >= BARE + 0.03) cutOldest(P, 3);\n  P.roots.forEach((R, r) => {\n    if (R.use && R.wait && R.dead \u003c 0 && p \u003c 0.42) {\n      R.wait = false;\n      R.born = ts;\n      newShoot(P, r, 0, R.x + (Math.random() - 0.5) * 2, GROUND - 1.6, (Math.random() - 0.5) * 0.4, 0, 9999);\n    }\n  });\n\n  const f = p \u003c 0.45 ? 1 : p \u003c GROW_END ? (GROW_END - p) / (GROW_END - 0.45) : 0;\n  if (f \u003c= 0) return;\n  P.queue = P.queue.filter((q) => {\n    if (ts \u003c q.at) return true;\n    const s = q.s;\n    const i = Math.min(q.i, s.x.length - 1);\n    if (P.roots[s.root].dead \u003c 0) branch(P, s, s.x[i], s.y[i], 0, Math.min(1, s.gen), 12 + Math.random() * 26);\n    return false;\n  });\n  const shoots = P.shoots;\n  for (let k = 0; k \u003c shoots.length; k++) {\n    const s = shoots[k];\n    if (!s.grow || P.roots[s.root].dead >= 0) continue;\n    s.acc += (s.gen === 0 ? 4 : 3) * f * dts;\n    while (s.acc >= 1 && s.grow) {\n      s.acc -= 1;\n      addPoint(P, s);\n    }\n  }\n}\n\nfunction openAt(P, l, Y) {\n  if (l.t >= Y * YEAR) return l.t + 1.5;\n  // Old wood comes into leaf low down first.\n  return Y * YEAR + YEAR * (0.015 + 0.06 * l.r1 + 0.04 * (1 - l.y / H));\n}\n\n// A leaf's colour at year phase p: young lime, deep green, the autumn turn, withering, and the pale underside a gust shows.\nfunction leafColour(P, l, m, p) {\n  const lift = 0.86 + 0.28 * l.r1;\n  let h = P.hue - 0.055 + 0.065 * m + (l.r2 - 0.5) * 0.04;\n  let s = 0.7 + 0.18 * m;\n  let v = (0.82 - 0.28 * m) * lift;\n  const c = clamp((p - l.turn) / 0.09, 0, 1);\n  if (c > 0) {\n    h -= (0.31 + (l.r3 > 0.7 ? 0.035 : 0)) * c;\n    s += (0.93 - s) * c;\n    v = (0.54 + 0.36 * Math.sin(Math.PI * c) + 0.1 * c) * lift;\n  }\n  const dead = P.roots[l.root].dead;\n  if (dead >= 0) {\n    const w = clamp((P.rt - dead) / 1.2, 0, 1);\n    h = hueTo(h, 0.075, w);\n    s += (0.6 - s) * w;\n    v += (0.34 - v) * w;\n  }\n  const f = l.flip;\n  if (f > 0) {\n    h -= 0.02 * f;\n    s *= 1 - 0.62 * f;\n    v += (0.95 - v) * 0.55 * f;\n  }\n  return hsv(P.col, h, s, Math.min(1, v));\n}\n\nfunction stamp(P, x, y, c) {\n  const cx = Math.round(x);\n  const cy = Math.floor(y) - GROUND;\n  const sp = FALLS[0];\n  for (let k = 0; k \u003c sp.length; k += 2) {\n    const px = cx + sp[k];\n    const py = cy + sp[k + 1];\n    if (px \u003c 0 || px >= W || py \u003c 0 || py >= GR) continue;\n    const g = py * W + px;\n    for (let j = 0; j \u003c 3; j++) P.gC[g * 3 + j] = c[j] * 0.8 * shade(sp[k], sp[k + 1]);\n    P.gY[g] = P.year;\n    P.gA[g] = 1;\n  }\n}\n\nfunction dropLeaf(P, l, fall) {\n  l.gone = P.year;\n  if (!fall || P.falls.length >= MAXF) return;\n  const flip = l.flip;\n  l.flip = 0;\n  const c = leafColour(P, l, clamp((P.ts - openAt(P, l, P.year)) / (YEAR * 0.1), 0, 1), P.p);\n  l.flip = flip;\n  const s = Math.random() \u003c 0.5 ? -1 : 1;\n  P.falls.push({ x: l.x, y: l.y, vy: 1 + Math.random() * 2, ph: Math.random() * 6.283, spin: s * (3 + Math.random() * 4), term: 8 + Math.random() * 7, land: GROUND + 1 + Math.random() * (GR - 1.5), c: c.slice() });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = 0.29 + k[0];\n  const speed = clamp(k[1], 0.05, 3);\n  const n = clamp(Math.round(k[2]), 2, MAXR);\n  P.wind = clamp(k[3], -1, 1);\n  if (!P.started) {\n    P.started = true;\n    P.want = n;\n    for (let r = 0; r \u003c n; r++) Object.assign(P.roots[r], { use: true, wait: r \u003c n - 1, x: clamp(((r + 0.5) * W) / n + (Math.random() - 0.5) * 6, 5, 58) });\n    // The youngest stem comes up in the third spring, so the panel opens with it climbing.\n    const late = P.roots[n - 1];\n    while (P.ts \u003c PRE) {\n      if (P.ts >= YEAR * 2.1 && !late.born) late.wait = true;\n      stepWorld(P, 0.1, true);\n    }\n  }\n  P.rt += dt;\n  // Follow the Vines knob: new stems where there are too few, cut ones where there are too many.\n  P.want = n;\n  P.roots.forEach((R, r) => {\n    if (r \u003c n && !R.use) Object.assign(R, { use: true, dead: -1, wait: true, x: freeSpot(P, r) });\n    else if (r >= n && R.use && R.dead \u003c 0) {\n      if (R.wait) R.use = R.wait = false;\n      else cut(P, r);\n    }\n  });\n  if (input.btnPressed && input.btnPressed[0]) cutOldest(P, -9);\n  stepWorld(P, dt * speed, false);\n  P.roots.forEach((R, r) => {\n    if (R.dead >= 0 && P.rt - R.dead > 5.2) freeRoot(P, r);\n  });\n  stepGusts(P, dt, speed / 2);\n  stepLeaves(P, dt);\n  stepFalling(P, dt);\n  // Last year's leaves rot away in the bed through the spring.\n  for (let g = 0; g \u003c GR * W; g++) {\n    if (P.gY[g] \u003c 0 || P.gY[g] >= P.year) continue;\n    P.gA[g] = 1 - clamp((P.p - 0.03 - 0.3 * hash(g, 3)) / 0.012, 0, 1);\n    if (P.gA[g] \u003c= 0) P.gY[g] = -1;\n  }\n}\n\n// Gusts run in the panel's own time, but a faster world brings them more often and sends them across quicker.\nfunction stepGusts(P, dt, quick) {\n  const aw = Math.abs(P.wind);\n  P.nextGust -= dt;\n  if (P.nextGust \u003c= 0) {\n    P.nextGust = ((3.2 - 2.4 * aw) * (0.6 + 0.8 * Math.random())) / quick;\n    if (P.gusts.length \u003c 6) {\n      const dir = aw > 0.12 ? Math.sign(P.wind) : Math.random() \u003c 0.5 ? -1 : 1;\n      const w = 5 + 7 * aw + 3 * Math.random();\n      P.gusts.push({ dir, w, s: Math.min(1, 0.5 + 0.5 * aw + 0.15 * Math.random()), v: (26 + 40 * aw + 10 * Math.random()) * quick, x: dir > 0 ? -2 * w - 8 : W + 2 * w + 8, tilt: (Math.random() - 0.5) * 0.5, seed: Math.random() * 100, row: new Float32Array(H) });\n      P.windDir = dir;\n    }\n  }\n  P.gusts = P.gusts.filter((g) => {\n    g.x += g.dir * g.v * dt;\n    // The front of a gust is a slanted, wavy line across the wall.\n    for (let y = 0; y \u003c H; y++) g.row[y] = g.x + g.tilt * (y - 64) + 4 * Math.sin(y * 0.06 + g.seed);\n    return g.x > -2 * g.w - 50 && g.x \u003c W + 2 * g.w + 50;\n  });\n}\n\n// How hard the gusts press on a point, signed by their direction.\nfunction gustAt(P, x, y) {\n  let push = 0;\n  const yi = clamp(Math.round(y), 0, H - 1);\n  for (const g of P.gusts) {\n    const d = (x - g.row[yi]) / g.w;\n    if (d > -1 && d \u003c 1) push += g.dir * g.s * (1 - d * d);\n  }\n  return push;\n}\n\nfunction stepLeaves(P, dt) {\n  const Y = P.year;\n  const p = P.p;\n  const aw = Math.abs(P.wind);\n  for (const l of P.leaves) {\n    if (l.gone === Y) continue;\n    const dead = P.roots[l.root].dead;\n    const open = P.ts > openAt(P, l, Y);\n    if (dead >= 0) {\n      if (P.rt - dead > 0.8 + 2.6 * l.r3) dropLeaf(P, l, open && p \u003c l.drop);\n      continue;\n    }\n    if (p >= l.drop) {\n      dropLeaf(P, l, p - l.drop \u003c 0.03);\n      continue;\n    }\n    if (!open) continue;\n    // A gust lifts the leaves it passes over and shows their pale undersides; stiffer leaves need a stronger gust.\n    let t = 0;\n    const yi = clamp(Math.round(l.y), 0, H - 1);\n    for (const g of P.gusts) {\n      const d = (l.x - g.row[yi]) / g.w;\n      if (d > -1 && d \u003c 1) t = Math.max(t, (1 - d * d) * clamp((g.s - l.sus * 0.8) * 3, 0, 1));\n    }\n    l.flip += (t - l.flip) * Math.min(1, dt * (t > l.flip ? 12 : 3));\n    if (aw > 0.45 && l.flip > 0.55 && Math.random() \u003c dt * (aw - 0.45) * 0.12 * (1 + 30 * clamp((p - l.turn) / 0.09, 0, 1))) dropLeaf(P, l, true);\n  }\n}\n\nfunction stepFalling(P, dt) {\n  P.falls = P.falls.filter((f) => {\n    f.ph += f.spin * dt;\n    f.vy += (f.term - f.vy) * Math.min(1, dt * 1.5);\n    f.x += (P.wind * 18 + gustAt(P, f.x, f.y) * 22 + Math.sin(f.ph) * 6) * dt;\n    f.y += f.vy * (0.65 + 0.35 * Math.abs(Math.cos(f.ph))) * dt;\n    if (f.x \u003c -3 || f.x > W + 2) return false;\n    if (f.y \u003c f.land) return true;\n    stamp(P, f.x, f.land, f.c);\n    return false;\n  });\n}\n\n// Lighter up and to the left, with a darker midrib down the middle.\nfunction shade(dx, dy) {\n  return 1 - 0.06 * dx - 0.08 * dy - (dx === 0 && dy > -2 ? 0.06 : 0);\n}\n\nfunction put(buf, x, y, c, sh, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] += (c[0] * sh - buf[o]) * a;\n  buf[o + 1] += (c[1] * sh - buf[o + 1]) * a;\n  buf[o + 2] += (c[2] * sh - buf[o + 2]) * a;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  buf.set(P.wall);\n  const ts = P.ts;\n  const Y = P.year;\n  const p = P.p;\n  const hb = P.hue;\n  const col = P.col;\n\n  // Fallen leaves in the bed, browner after the turn of the year.\n  const brown = [70, 38, 18];\n  for (let g = 0; g \u003c GR * W; g++) {\n    if (P.gY[g] \u003c 0) continue;\n    const age = P.gY[g] \u003c Y ? 0.6 : 0;\n    const o = (GROUND * W + g) * 3;\n    for (let k = 0; k \u003c 3; k++) buf[o + k] += (P.gC[g * 3 + k] + (brown[k] - P.gC[g * 3 + k]) * age - buf[o + k]) * P.gA[g];\n  }\n\n  // Stems: green and supple when new, brown wood after a third of a year, thicker low on the old stems.\n  for (let k = 0; k \u003c= 16; k++) hsv(P.pal[k], hueTo(hb - 0.05, 0.04, k / 16), 0.6 - (0.1 * k) / 16, 0.62 - (0.28 * k) / 16);\n  const grey = [72, 64, 58];\n  const c = [0, 0, 0];\n  for (const s of P.shoots) {\n    const dead = P.roots[s.root].dead;\n    const e = dead >= 0 ? P.rt - dead : 0;\n    const fade = clamp(e / 2.5, 0, 1);\n    const alpha = 1 - clamp((e - 2.5) / 2.5, 0, 1);\n    const len = s.x.length;\n    for (let i = 0; i \u003c len; i++) {\n      const x = Math.round(s.x[i]);\n      const y = Math.round(s.y[i]);\n      const age = ts - s.t[i];\n      const pc = P.pal[Math.round(clamp(age / (YEAR * 0.33), 0, 1) * 16)];\n      for (let k = 0; k \u003c 3; k++) c[k] = pc[k] + (grey[k] - pc[k]) * fade;\n      put(buf, x, y, c, 1, alpha);\n      if (s.gen === 0 && age > YEAR * 0.5) {\n        put(buf, x + 1, y, c, 0.7, alpha);\n        if (age > YEAR * 1.1 && y > GROUND - 45) put(buf, x - 1, y, c, 0.85, alpha);\n      }\n      // Young tendrils reach off the stem between the leaves and fade into it as the wood hardens.\n      if (s.gen \u003c 2 && age \u003c YEAR * 0.15 && (s.node0 + i) % 9 === 4) {\n        const ta = clamp((YEAR * 0.15 - age) / (YEAR * 0.05), 0, 1) * alpha;\n        const sd = (s.node0 + i) & 8 ? 1 : -1;\n        hsv(col, hb - 0.08, 0.5, 0.72);\n        CURL.forEach(([dx, dy], q) => put(buf, x + sd * dx, y + dy, col, 1, ta * (1 - q * 0.12)));\n      }\n    }\n    // A growing tip glows pale and feels ahead with a tendril, which circles slowly the way climbing shoots do.\n    if (s.grow && p \u003c GROW_END && dead \u003c 0) {\n      const x = s.x[len - 1];\n      const y = s.y[len - 1];\n      const sn = Math.sin(s.ang);\n      const cs = Math.cos(s.ang);\n      hsv(col, hb - 0.09, 0.45, 0.95);\n      const nut = 1.4 * Math.sin(ts * 0.8 + s.rand * 40);\n      for (let d = 0; d \u003c= 3; d++) {\n        const curl = [0, 0.3, 1, 1.8][d] * nut;\n        put(buf, Math.round(x + sn * d + cs * curl), Math.round(y - cs * d + sn * curl), col, 1, d ? 0.85 - d * 0.15 : 1);\n      }\n    }\n  }\n\n  // Berries: green under the leaves in late summer, blue-black on red stalks once the leaves are down, eaten by spring.\n  for (const b of P.berries) {\n    if (p \u003c 0.42 && !(Y * YEAR > b.t && p \u003c 0.05 + 0.12 * b.r)) continue;\n    const ripe = p \u003c 0.42 ? 1 : clamp((p - 0.42) / 0.25, 0, 1);\n    const x = Math.round(b.x);\n    const y = Math.round(b.y);\n    if (ripe > 0.5) put(buf, x, y - 1, hsv(col, 0.98, 0.7, 0.5), 1, 1);\n    hsv(col, hueTo(hb - 0.03, 0.68, ripe), 0.6 - 0.1 * ripe, 0.5 - 0.06 * ripe);\n    for (let k = 0; k \u003c 8; k += 2) put(buf, x + FALLS[0][k], y - FALLS[0][k + 1], col, shade(FALLS[0][k], 0), 1);\n  }\n\n  // Leaves, unfurling from a bud through two sizes to full.\n  const dir = P.windDir;\n  for (const l of P.leaves) {\n    if (l.gone === Y || p >= l.drop) continue;\n    const tO = openAt(P, l, Y);\n    const u = (ts - tO) / 6;\n    if (u \u003c= 0) continue;\n    const spr = LEAF[u \u003c 0.2 ? 0 : u \u003c 0.45 ? 1 : u \u003c 0.75 ? Math.min(2, l.size) : l.size];\n    const lc = leafColour(P, l, clamp((ts - tO) / (YEAR * 0.1), 0, 1), p);\n    const cx = Math.round(l.x) + (l.flip > 0.6 ? dir : 0);\n    const cy = Math.round(l.y);\n    for (let k = 0; k \u003c spr.length; k += 2) put(buf, cx + spr[k], cy + spr[k + 1], lc, shade(spr[k], spr[k + 1]), 1);\n  }\n\n  // Leaves on their way down, tumbling.\n  for (const f of P.falls) {\n    const ph = f.ph / 6.283;\n    const q = Math.floor((ph - Math.floor(ph)) * 4);\n    const face = (q === 2 ? 0.8 : 1) * (0.85 + 0.3 * Math.abs(Math.cos(f.ph * 0.5)));\n    const x = Math.round(f.x);\n    const y = Math.round(f.y);\n    const sp = FALLS[q];\n    for (let k = 0; k \u003c sp.length; k += 2) put(buf, x + sp[k], y + sp[k + 1], f.c, shade(sp[k], sp[k + 1]) * face, 1);\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","layer":{"id":"layer-ivy","type":"code","name":"ivy","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ivy\n// Family:  growth\n// Idea:    Boston ivy climbs a stone wall from the ground to the top of the panel, branching and reaching out tendrils; every year its leaves turn from green through yellow to red, fall down the wall and come back in spring.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 13\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Vines=2..6, Wind=-1..1\n//\n// Knob 1: Hue. The leaf colour, starting from green; autumn always turns the leaves a third of the way back round the colour wheel, so green goes through yellow to red.\n// Knob 2: Speed. How fast the year turns: at 2 a year is 60 seconds and a new stem climbs the 120 rows of wall in about 16; at 3 a year is 40 seconds, at 0.2 ten minutes. The gusts come and go faster with it.\n// Knob 3: Vines. How many stems come out of the ground, 2 to 6; turning it up starts new shoots at the foot of the wall, turning it down cuts stems so they wither.\n// Knob 4: Wind. Near 0 a breath of air now and then turns a few leaves silver side up; turned either way the gusts come more often from that side, sweep the wall faster and, past halfway, tear leaves off and blow them away.\n// Buttons: K1 tap cuts the oldest stem at the ground: its leaves go brown and drop, the dead wood fades in 5 seconds, and a new shoot starts climbing in its place, or in spring if it is autumn or winter.\n\nconst W = 64;\nconst H = 128;\n// The wall is rows 0 to 119, thirty courses of stone four LEDs high; the bed is the eight rows under it.\nconst GROUND = 120;\nconst GR = H - GROUND;\n// One year in world seconds. Speed 2 runs the world at twice that, so a year is 60 seconds.\nconst YEAR = 120;\n// Shoots grow until GROW_END of the year, leaves start to turn at TURN and are all down by BARE.\nconst GROW_END = 0.55;\nconst TURN = 0.56;\nconst BARE = 0.86;\nconst MAXS = 500;\nconst MAXL = 1800;\nconst MAXF = 260;\nconst MAXB = 90;\nconst MAXR = 6;\n// A coarse grid of 4 x 4 cells counts stems and leaves, so new growth heads for bare wall.\nconst GW = 16;\nconst GH = 30;\n// The first update grows the vine for this long, so the panel opens in its third spring with the wall covered.\nconst PRE = YEAR * 2.22;\n\n// Leaf sprites as dx, dy pairs: a bud, a small leaf, a half-grown one, a full one. shade() lights them from the upper left.\nconst LEAF = [\n  [0, 0],\n  [0, -1, -1, 0, 0, 0, 1, 0, 0, 1],\n  [0, -1, 1, -1, -1, 0, 0, 0, 1, 0, 2, 0, -1, 1, 0, 1, 1, 1, 2, 1, 0, 2, 1, 2],\n  [-1, -2, 0, -2, 1, -2, -2, -1, -1, -1, 0, -1, 1, -1, 2, -1, -2, 0, -1, 0, 0, 0, 1, 0, 2, 0, -1, 1, 0, 1, 1, 1, 0, 2],\n];\n// A falling leaf seen face on, tipped one way, edge on, tipped the other way.\nconst FALLS = [\n  [-1, 0, 0, 0, 1, 0, 0, -1],\n  [-1, -1, 0, 0, 1, 1],\n  [0, -1, 0, 0],\n  [1, -1, 0, 0, -1, 1],\n];\n// A tendril curling off the stem to the right; the left mirrors it.\nconst CURL = [[1, -1], [2, -1], [3, -2], [3, -3], [2, -3]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// From hue a towards hue b the short way round.\nfunction hueTo(a, b, t) {\n  return a + (b + Math.round(a - b) - a) * t;\n}\n\nfunction hsv(out, h, s, v) {\n  h = (h - Math.floor(h)) * 6;\n  for (let i = 0; i \u003c 3; i++) {\n    const k = (5 - 2 * i + h) % 6;\n    out[i] = 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n  return out;\n}\n\nexport function setup(params) {\n  Object.assign(params, { shoots: [], leaves: [], falls: [], berries: [], queue: [], gusts: [], roots: [], pal: [] });\n  for (let r = 0; r \u003c MAXR; r++) params.roots.push({ use: false, wait: false, x: 32, born: 0, dead: -1 });\n  // Fallen leaves in the bed: colour, the year they fell and how much is left of them.\n  params.gC = new Float32Array(GR * W * 3);\n  params.gY = new Int16Array(GR * W).fill(-1);\n  params.gA = new Float32Array(GR * W);\n  params.occ = new Float32Array(GW * GH);\n  params.wall = new Float32Array(W * H * 3);\n  params.buf = new Float32Array(W * H * 3);\n  for (let k = 0; k \u003c= 16; k++) params.pal.push([0, 0, 0]);\n  Object.assign(params, { col: [0, 0, 0], ts: 0, rt: 0, p: 0, year: 0, started: false, nextGust: 0.6, windDir: 1, hue: 0.29, wind: 0.06, want: 2 });\n  bakeWall(params);\n}\n\nfunction bakeWall(P) {\n  const c = P.col;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= GROUND) {\n        // A bed of dark earth with a few pale pebbles; the foot of the wall casts a line of shadow.\n        const n = hash(x * 3 + 1, y * 7 + 2);\n        if (n \u003c 0.05 && y > GROUND) hsv(c, 0.08, 0.12, 0.27 + 0.08 * hash(x, y));\n        else hsv(c, 0.065, 0.5, (y === GROUND ? 0.08 : 0.12) + 0.05 * n);\n      } else {\n        const course = y >> 2;\n        const row = y & 3;\n        // Stones five to ten LEDs long, each course laid from its own offset.\n        let x0 = -Math.floor(hash(course, 77) * 9);\n        let len = 0;\n        let id = 0;\n        for (;;) {\n          len = 5 + Math.floor(hash(course * 31 + id, 5) * 6);\n          if (x \u003c x0 + len) break;\n          x0 += len;\n          id++;\n        }\n        const col = x - x0;\n        if (row === 3 || col === len - 1) hsv(c, 0.6, 0.12, 0.065);\n        else {\n          const h2 = hash(course * 17 + id, 23);\n          let v = 0.135 + 0.05 * hash(course * 131 + id, 9) + 0.012 * (hash(x, y) - 0.5);\n          v += row === 0 ? 0.018 : row === 2 ? -0.012 : 0;\n          if (col === 0) v += 0.01;\n          // Lighter towards the top, where the sky reaches the wall.\n          hsv(c, 0.58 + 0.07 * (h2 - 0.5), 0.14 + 0.1 * h2, v * (1.12 - (0.24 * y) / GROUND));\n        }\n      }\n      P.wall.set(c, (y * W + x) * 3);\n    }\n}\n\nfunction crowd(P, x, y) {\n  if (x \u003c 1 || x > W - 2 || y \u003c 1 || y > GROUND - 2) return 14;\n  const cx = Math.floor(x / 4);\n  const cy = Math.floor(y / 4);\n  const o = P.occ;\n  const i = cy * GW + cx;\n  return o[i] + 0.3 * ((cx > 0 ? o[i - 1] : 0) + (cx \u003c GW - 1 ? o[i + 1] : 0) + (cy > 0 ? o[i - GW] : 0) + (cy \u003c GH - 1 ? o[i + GW] : 0));\n}\n\nfunction mark(P, x, y, amt) {\n  const cx = Math.floor(x / 4);\n  const cy = Math.floor(y / 4);\n  if (cx >= 0 && cx \u003c GW && cy >= 0 && cy \u003c GH) P.occ[cy * GW + cx] += amt;\n}\n\nfunction newShoot(P, root, gen, x, y, ang, bias, budget) {\n  if (P.shoots.length >= MAXS) return null;\n  const s = { root, gen, x: [x], y: [y], t: [P.ts], node0: 0, budget, grow: true, top: false, ang, bias, acc: 0, rand: Math.random(), side: Math.random() \u003c 0.5 ? -1 : 1 };\n  P.shoots.push(s);\n  return s;\n}\n\nfunction addLeaf(P, s, x, y) {\n  if (x \u003c 0.5 || x > W - 1.5 || y \u003c 1 || y > GROUND - 3 || P.leaves.length >= MAXL) return;\n  // Whole branches turn together, so autumn comes in patches.\n  const turn = TURN + 0.07 * s.rand + 0.06 * Math.random();\n  const size = s.gen === 0 ? 3 : s.gen === 1 && Math.random() \u003c 0.6 ? 3 : 2;\n  P.leaves.push({ x, y, t: P.ts, root: s.root, size, gone: -1, r1: Math.random(), r2: Math.random(), r3: Math.random(), sus: Math.random(), flip: 0, turn, drop: turn + 0.06 + 0.09 * Math.random() });\n  mark(P, x, y, 0.8);\n}\n\nfunction branch(P, s, x, y, a, gen, budget) {\n  const cA = crowd(P, x + Math.sin(a + 1.1) * 5, y - Math.cos(a + 1.1) * 5);\n  const cB = crowd(P, x + Math.sin(a - 1.1) * 5, y - Math.cos(a - 1.1) * 5);\n  if (Math.min(cA, cB) > 7) return;\n  const side = cA \u003c cB ? 1 : -1;\n  const c = newShoot(P, s.root, gen + 1, x, y, a + side * (0.9 + Math.random() * 0.4), side * (0.35 + Math.random() * 0.35), budget);\n  if (c) c.node0 = 1;\n}\n\nfunction addPoint(P, s) {\n  const n = s.x.length;\n  const x = s.x[n - 1];\n  const y = s.y[n - 1];\n  const gen = s.gen;\n  if (s.budget \u003c= 0) {\n    s.grow = false;\n    return;\n  }\n  let a = s.ang + (Math.random() - 0.5) * 0.55;\n  // A main stem keeps to its own lane up the wall; side shoots set off sideways and curve up as they go.\n  const lane = gen === 0 && !s.top ? clamp((P.roots[s.root].x - x) * 0.04, -0.5, 0.5) : 0;\n  a += (s.bias + lane - a) * (gen === 0 ? 0.15 : 0.1);\n  if (gen > 0 && !s.top) s.bias *= 0.98;\n  // Of three headings, the one into the barest wall, with a little chance.\n  let best = a;\n  let bestScore = 1e9;\n  for (let c = -1; c \u003c= 1; c++) {\n    const ca = a + c * 0.45;\n    const score = crowd(P, x + Math.sin(ca) * 4, y - Math.cos(ca) * 4) * 0.3 + Math.abs(c) * 0.3 + Math.random() * 0.35;\n    if (score \u003c bestScore) [bestScore, best] = [score, ca];\n  }\n  a = clamp(best, -2, 2);\n  if (y - Math.cos(a) \u003c 1.5 && !s.top) {\n    // At the top of the wall a shoot turns and runs along the coping for a little way.\n    s.top = true;\n    const side = (x \u003c W / 2) === Math.random() \u003c 0.7 ? 1 : -1;\n    s.bias = side * 1.5;\n    a = side * 1.3;\n    s.budget = Math.min(s.budget, 8 + Math.random() * 12);\n  }\n  const nx = x + Math.sin(a);\n  const ny = y - Math.cos(a);\n  if (ny \u003c 0.5 || nx \u003c 0.5 || nx > W - 1.5 || ny > GROUND - 1.5) {\n    s.grow = false;\n    return;\n  }\n  s.ang = a;\n  s.budget--;\n  s.x.push(nx);\n  s.y.push(ny);\n  s.t.push(P.ts);\n  mark(P, nx, ny, 1);\n  if ((s.node0 + n) % 3 === 0) {\n    s.side = -s.side;\n    addLeaf(P, s, nx - Math.cos(a) * s.side * 2.2, ny - Math.sin(a) * s.side * 2.2 - 0.7);\n  }\n  // Low on the wall a main stem is bushier.\n  if (gen \u003c 2 && Math.random() \u003c (gen === 0 ? (ny > 70 ? 0.12 : 0.07) : 0.035)) branch(P, s, nx, ny, a, gen, gen === 0 ? 18 + Math.random() * 34 : 6 + Math.random() * 12);\n  if (gen > 0 && Math.random() \u003c 0.025 && P.berries.length \u003c MAXB) P.berries.push({ x: nx, y: ny, root: s.root, r: Math.random(), t: P.ts });\n}\n\n// Where a new stem comes out of the ground: as far from the others as the bed allows.\nfunction freeSpot(P, r) {\n  let best = 32;\n  let bestD = -1;\n  for (let x = 5; x \u003c= 58; x++) {\n    const d = Math.min(99, ...P.roots.map((q, i) => (i !== r && q.use ? Math.abs(q.x - x) : 99))) + Math.random() * 2;\n    if (d > bestD) [bestD, best] = [d, x];\n  }\n  return best;\n}\n\nfunction cut(P, r) {\n  const R = P.roots[r];\n  if (R.use && !R.wait && R.dead \u003c 0) R.dead = P.rt;\n}\n\n// Cut the oldest living stem, if it has lived at least this many years.\nfunction cutOldest(P, years) {\n  let old = -1;\n  P.roots.forEach((R, r) => {\n    if (R.use && !R.wait && R.dead \u003c 0 && P.year - Math.floor(R.born / YEAR) >= years && (old \u003c 0 || R.born \u003c P.roots[old].born)) old = r;\n  });\n  if (old >= 0) cut(P, old);\n}\n\n// The dead wood has faded: clear it away and let a new stem come up there, if the Vines knob still wants one.\nfunction freeRoot(P, r) {\n  const R = P.roots[r];\n  P.shoots = P.shoots.filter((s) => s.root !== r);\n  P.leaves = P.leaves.filter((l) => l.root !== r);\n  P.berries = P.berries.filter((b) => b.root !== r);\n  P.queue = P.queue.filter((q) => q.s.root !== r);\n  R.dead = -1;\n  if (r \u003c P.want) {\n    R.wait = true;\n    R.x = clamp(R.x + (Math.random() - 0.5) * 8, 5, 58);\n  } else R.use = false;\n  P.occ.fill(0);\n  for (const s of P.shoots) for (let i = 0; i \u003c s.x.length; i++) mark(P, s.x[i], s.y[i], 1);\n  for (const l of P.leaves) mark(P, l.x, l.y, 0.8);\n}\n\n// Each spring the old wood puts out new side shoots, spread through the growing season.\nfunction springSchedule(P) {\n  P.roots.forEach((R, r) => {\n    if (!R.use || R.wait || R.dead >= 0) return;\n    const cand = P.shoots.filter((s) => s.root === r && s.gen \u003c 2 && s.x.length > 4);\n    if (!cand.length) return;\n    const count = 8 + Math.floor(Math.random() * 5);\n    for (let k = 0; k \u003c count && P.queue.length \u003c 64; k++) {\n      const s = cand[Math.floor(Math.random() * cand.length)];\n      P.queue.push({ s, i: 1 + Math.floor(Math.random() * (s.x.length - 2)), at: P.year * YEAR + YEAR * (0.06 + 0.34 * Math.random()) });\n    }\n  });\n}\n\n// The world clock: seasons, growth and the year's events, in world seconds.\nfunction stepWorld(P, dts, pre) {\n  const prevP = P.p;\n  const ts = (P.ts += dts);\n  const Y = Math.floor(ts / YEAR);\n  const p = (P.p = ts / YEAR - Y);\n  if (Y !== P.year) {\n    P.year = Y;\n    springSchedule(P);\n  }\n  // In the pre-run last autumn's leaves land in the bed, so the panel opens with them rotting there.\n  if (pre && prevP \u003c BARE && p >= BARE)\n    for (const l of P.leaves) if (Math.random() \u003c 0.5) stamp(P, l.x + (Math.random() - 0.5) * 14, GROUND + 1 + Math.random() * (GR - 1.5), leafColour(P, l, 1, l.drop));\n  // Early in winter a stem three years old is cut back, and a new one comes up in spring.\n  if (!pre && prevP \u003c BARE + 0.03 && p >= BARE + 0.03) cutOldest(P, 3);\n  P.roots.forEach((R, r) => {\n    if (R.use && R.wait && R.dead \u003c 0 && p \u003c 0.42) {\n      R.wait = false;\n      R.born = ts;\n      newShoot(P, r, 0, R.x + (Math.random() - 0.5) * 2, GROUND - 1.6, (Math.random() - 0.5) * 0.4, 0, 9999);\n    }\n  });\n\n  const f = p \u003c 0.45 ? 1 : p \u003c GROW_END ? (GROW_END - p) / (GROW_END - 0.45) : 0;\n  if (f \u003c= 0) return;\n  P.queue = P.queue.filter((q) => {\n    if (ts \u003c q.at) return true;\n    const s = q.s;\n    const i = Math.min(q.i, s.x.length - 1);\n    if (P.roots[s.root].dead \u003c 0) branch(P, s, s.x[i], s.y[i], 0, Math.min(1, s.gen), 12 + Math.random() * 26);\n    return false;\n  });\n  const shoots = P.shoots;\n  for (let k = 0; k \u003c shoots.length; k++) {\n    const s = shoots[k];\n    if (!s.grow || P.roots[s.root].dead >= 0) continue;\n    s.acc += (s.gen === 0 ? 4 : 3) * f * dts;\n    while (s.acc >= 1 && s.grow) {\n      s.acc -= 1;\n      addPoint(P, s);\n    }\n  }\n}\n\nfunction openAt(P, l, Y) {\n  if (l.t >= Y * YEAR) return l.t + 1.5;\n  // Old wood comes into leaf low down first.\n  return Y * YEAR + YEAR * (0.015 + 0.06 * l.r1 + 0.04 * (1 - l.y / H));\n}\n\n// A leaf's colour at year phase p: young lime, deep green, the autumn turn, withering, and the pale underside a gust shows.\nfunction leafColour(P, l, m, p) {\n  const lift = 0.86 + 0.28 * l.r1;\n  let h = P.hue - 0.055 + 0.065 * m + (l.r2 - 0.5) * 0.04;\n  let s = 0.7 + 0.18 * m;\n  let v = (0.82 - 0.28 * m) * lift;\n  const c = clamp((p - l.turn) / 0.09, 0, 1);\n  if (c > 0) {\n    h -= (0.31 + (l.r3 > 0.7 ? 0.035 : 0)) * c;\n    s += (0.93 - s) * c;\n    v = (0.54 + 0.36 * Math.sin(Math.PI * c) + 0.1 * c) * lift;\n  }\n  const dead = P.roots[l.root].dead;\n  if (dead >= 0) {\n    const w = clamp((P.rt - dead) / 1.2, 0, 1);\n    h = hueTo(h, 0.075, w);\n    s += (0.6 - s) * w;\n    v += (0.34 - v) * w;\n  }\n  const f = l.flip;\n  if (f > 0) {\n    h -= 0.02 * f;\n    s *= 1 - 0.62 * f;\n    v += (0.95 - v) * 0.55 * f;\n  }\n  return hsv(P.col, h, s, Math.min(1, v));\n}\n\nfunction stamp(P, x, y, c) {\n  const cx = Math.round(x);\n  const cy = Math.floor(y) - GROUND;\n  const sp = FALLS[0];\n  for (let k = 0; k \u003c sp.length; k += 2) {\n    const px = cx + sp[k];\n    const py = cy + sp[k + 1];\n    if (px \u003c 0 || px >= W || py \u003c 0 || py >= GR) continue;\n    const g = py * W + px;\n    for (let j = 0; j \u003c 3; j++) P.gC[g * 3 + j] = c[j] * 0.8 * shade(sp[k], sp[k + 1]);\n    P.gY[g] = P.year;\n    P.gA[g] = 1;\n  }\n}\n\nfunction dropLeaf(P, l, fall) {\n  l.gone = P.year;\n  if (!fall || P.falls.length >= MAXF) return;\n  const flip = l.flip;\n  l.flip = 0;\n  const c = leafColour(P, l, clamp((P.ts - openAt(P, l, P.year)) / (YEAR * 0.1), 0, 1), P.p);\n  l.flip = flip;\n  const s = Math.random() \u003c 0.5 ? -1 : 1;\n  P.falls.push({ x: l.x, y: l.y, vy: 1 + Math.random() * 2, ph: Math.random() * 6.283, spin: s * (3 + Math.random() * 4), term: 8 + Math.random() * 7, land: GROUND + 1 + Math.random() * (GR - 1.5), c: c.slice() });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = 0.29 + k[0];\n  const speed = clamp(k[1], 0.05, 3);\n  const n = clamp(Math.round(k[2]), 2, MAXR);\n  P.wind = clamp(k[3], -1, 1);\n  if (!P.started) {\n    P.started = true;\n    P.want = n;\n    for (let r = 0; r \u003c n; r++) Object.assign(P.roots[r], { use: true, wait: r \u003c n - 1, x: clamp(((r + 0.5) * W) / n + (Math.random() - 0.5) * 6, 5, 58) });\n    // The youngest stem comes up in the third spring, so the panel opens with it climbing.\n    const late = P.roots[n - 1];\n    while (P.ts \u003c PRE) {\n      if (P.ts >= YEAR * 2.1 && !late.born) late.wait = true;\n      stepWorld(P, 0.1, true);\n    }\n  }\n  P.rt += dt;\n  // Follow the Vines knob: new stems where there are too few, cut ones where there are too many.\n  P.want = n;\n  P.roots.forEach((R, r) => {\n    if (r \u003c n && !R.use) Object.assign(R, { use: true, dead: -1, wait: true, x: freeSpot(P, r) });\n    else if (r >= n && R.use && R.dead \u003c 0) {\n      if (R.wait) R.use = R.wait = false;\n      else cut(P, r);\n    }\n  });\n  if (input.btnPressed && input.btnPressed[0]) cutOldest(P, -9);\n  stepWorld(P, dt * speed, false);\n  P.roots.forEach((R, r) => {\n    if (R.dead >= 0 && P.rt - R.dead > 5.2) freeRoot(P, r);\n  });\n  stepGusts(P, dt, speed / 2);\n  stepLeaves(P, dt);\n  stepFalling(P, dt);\n  // Last year's leaves rot away in the bed through the spring.\n  for (let g = 0; g \u003c GR * W; g++) {\n    if (P.gY[g] \u003c 0 || P.gY[g] >= P.year) continue;\n    P.gA[g] = 1 - clamp((P.p - 0.03 - 0.3 * hash(g, 3)) / 0.012, 0, 1);\n    if (P.gA[g] \u003c= 0) P.gY[g] = -1;\n  }\n}\n\n// Gusts run in the panel's own time, but a faster world brings them more often and sends them across quicker.\nfunction stepGusts(P, dt, quick) {\n  const aw = Math.abs(P.wind);\n  P.nextGust -= dt;\n  if (P.nextGust \u003c= 0) {\n    P.nextGust = ((3.2 - 2.4 * aw) * (0.6 + 0.8 * Math.random())) / quick;\n    if (P.gusts.length \u003c 6) {\n      const dir = aw > 0.12 ? Math.sign(P.wind) : Math.random() \u003c 0.5 ? -1 : 1;\n      const w = 5 + 7 * aw + 3 * Math.random();\n      P.gusts.push({ dir, w, s: Math.min(1, 0.5 + 0.5 * aw + 0.15 * Math.random()), v: (26 + 40 * aw + 10 * Math.random()) * quick, x: dir > 0 ? -2 * w - 8 : W + 2 * w + 8, tilt: (Math.random() - 0.5) * 0.5, seed: Math.random() * 100, row: new Float32Array(H) });\n      P.windDir = dir;\n    }\n  }\n  P.gusts = P.gusts.filter((g) => {\n    g.x += g.dir * g.v * dt;\n    // The front of a gust is a slanted, wavy line across the wall.\n    for (let y = 0; y \u003c H; y++) g.row[y] = g.x + g.tilt * (y - 64) + 4 * Math.sin(y * 0.06 + g.seed);\n    return g.x > -2 * g.w - 50 && g.x \u003c W + 2 * g.w + 50;\n  });\n}\n\n// How hard the gusts press on a point, signed by their direction.\nfunction gustAt(P, x, y) {\n  let push = 0;\n  const yi = clamp(Math.round(y), 0, H - 1);\n  for (const g of P.gusts) {\n    const d = (x - g.row[yi]) / g.w;\n    if (d > -1 && d \u003c 1) push += g.dir * g.s * (1 - d * d);\n  }\n  return push;\n}\n\nfunction stepLeaves(P, dt) {\n  const Y = P.year;\n  const p = P.p;\n  const aw = Math.abs(P.wind);\n  for (const l of P.leaves) {\n    if (l.gone === Y) continue;\n    const dead = P.roots[l.root].dead;\n    const open = P.ts > openAt(P, l, Y);\n    if (dead >= 0) {\n      if (P.rt - dead > 0.8 + 2.6 * l.r3) dropLeaf(P, l, open && p \u003c l.drop);\n      continue;\n    }\n    if (p >= l.drop) {\n      dropLeaf(P, l, p - l.drop \u003c 0.03);\n      continue;\n    }\n    if (!open) continue;\n    // A gust lifts the leaves it passes over and shows their pale undersides; stiffer leaves need a stronger gust.\n    let t = 0;\n    const yi = clamp(Math.round(l.y), 0, H - 1);\n    for (const g of P.gusts) {\n      const d = (l.x - g.row[yi]) / g.w;\n      if (d > -1 && d \u003c 1) t = Math.max(t, (1 - d * d) * clamp((g.s - l.sus * 0.8) * 3, 0, 1));\n    }\n    l.flip += (t - l.flip) * Math.min(1, dt * (t > l.flip ? 12 : 3));\n    if (aw > 0.45 && l.flip > 0.55 && Math.random() \u003c dt * (aw - 0.45) * 0.12 * (1 + 30 * clamp((p - l.turn) / 0.09, 0, 1))) dropLeaf(P, l, true);\n  }\n}\n\nfunction stepFalling(P, dt) {\n  P.falls = P.falls.filter((f) => {\n    f.ph += f.spin * dt;\n    f.vy += (f.term - f.vy) * Math.min(1, dt * 1.5);\n    f.x += (P.wind * 18 + gustAt(P, f.x, f.y) * 22 + Math.sin(f.ph) * 6) * dt;\n    f.y += f.vy * (0.65 + 0.35 * Math.abs(Math.cos(f.ph))) * dt;\n    if (f.x \u003c -3 || f.x > W + 2) return false;\n    if (f.y \u003c f.land) return true;\n    stamp(P, f.x, f.land, f.c);\n    return false;\n  });\n}\n\n// Lighter up and to the left, with a darker midrib down the middle.\nfunction shade(dx, dy) {\n  return 1 - 0.06 * dx - 0.08 * dy - (dx === 0 && dy > -2 ? 0.06 : 0);\n}\n\nfunction put(buf, x, y, c, sh, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] += (c[0] * sh - buf[o]) * a;\n  buf[o + 1] += (c[1] * sh - buf[o + 1]) * a;\n  buf[o + 2] += (c[2] * sh - buf[o + 2]) * a;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  buf.set(P.wall);\n  const ts = P.ts;\n  const Y = P.year;\n  const p = P.p;\n  const hb = P.hue;\n  const col = P.col;\n\n  // Fallen leaves in the bed, browner after the turn of the year.\n  const brown = [70, 38, 18];\n  for (let g = 0; g \u003c GR * W; g++) {\n    if (P.gY[g] \u003c 0) continue;\n    const age = P.gY[g] \u003c Y ? 0.6 : 0;\n    const o = (GROUND * W + g) * 3;\n    for (let k = 0; k \u003c 3; k++) buf[o + k] += (P.gC[g * 3 + k] + (brown[k] - P.gC[g * 3 + k]) * age - buf[o + k]) * P.gA[g];\n  }\n\n  // Stems: green and supple when new, brown wood after a third of a year, thicker low on the old stems.\n  for (let k = 0; k \u003c= 16; k++) hsv(P.pal[k], hueTo(hb - 0.05, 0.04, k / 16), 0.6 - (0.1 * k) / 16, 0.62 - (0.28 * k) / 16);\n  const grey = [72, 64, 58];\n  const c = [0, 0, 0];\n  for (const s of P.shoots) {\n    const dead = P.roots[s.root].dead;\n    const e = dead >= 0 ? P.rt - dead : 0;\n    const fade = clamp(e / 2.5, 0, 1);\n    const alpha = 1 - clamp((e - 2.5) / 2.5, 0, 1);\n    const len = s.x.length;\n    for (let i = 0; i \u003c len; i++) {\n      const x = Math.round(s.x[i]);\n      const y = Math.round(s.y[i]);\n      const age = ts - s.t[i];\n      const pc = P.pal[Math.round(clamp(age / (YEAR * 0.33), 0, 1) * 16)];\n      for (let k = 0; k \u003c 3; k++) c[k] = pc[k] + (grey[k] - pc[k]) * fade;\n      put(buf, x, y, c, 1, alpha);\n      if (s.gen === 0 && age > YEAR * 0.5) {\n        put(buf, x + 1, y, c, 0.7, alpha);\n        if (age > YEAR * 1.1 && y > GROUND - 45) put(buf, x - 1, y, c, 0.85, alpha);\n      }\n      // Young tendrils reach off the stem between the leaves and fade into it as the wood hardens.\n      if (s.gen \u003c 2 && age \u003c YEAR * 0.15 && (s.node0 + i) % 9 === 4) {\n        const ta = clamp((YEAR * 0.15 - age) / (YEAR * 0.05), 0, 1) * alpha;\n        const sd = (s.node0 + i) & 8 ? 1 : -1;\n        hsv(col, hb - 0.08, 0.5, 0.72);\n        CURL.forEach(([dx, dy], q) => put(buf, x + sd * dx, y + dy, col, 1, ta * (1 - q * 0.12)));\n      }\n    }\n    // A growing tip glows pale and feels ahead with a tendril, which circles slowly the way climbing shoots do.\n    if (s.grow && p \u003c GROW_END && dead \u003c 0) {\n      const x = s.x[len - 1];\n      const y = s.y[len - 1];\n      const sn = Math.sin(s.ang);\n      const cs = Math.cos(s.ang);\n      hsv(col, hb - 0.09, 0.45, 0.95);\n      const nut = 1.4 * Math.sin(ts * 0.8 + s.rand * 40);\n      for (let d = 0; d \u003c= 3; d++) {\n        const curl = [0, 0.3, 1, 1.8][d] * nut;\n        put(buf, Math.round(x + sn * d + cs * curl), Math.round(y - cs * d + sn * curl), col, 1, d ? 0.85 - d * 0.15 : 1);\n      }\n    }\n  }\n\n  // Berries: green under the leaves in late summer, blue-black on red stalks once the leaves are down, eaten by spring.\n  for (const b of P.berries) {\n    if (p \u003c 0.42 && !(Y * YEAR > b.t && p \u003c 0.05 + 0.12 * b.r)) continue;\n    const ripe = p \u003c 0.42 ? 1 : clamp((p - 0.42) / 0.25, 0, 1);\n    const x = Math.round(b.x);\n    const y = Math.round(b.y);\n    if (ripe > 0.5) put(buf, x, y - 1, hsv(col, 0.98, 0.7, 0.5), 1, 1);\n    hsv(col, hueTo(hb - 0.03, 0.68, ripe), 0.6 - 0.1 * ripe, 0.5 - 0.06 * ripe);\n    for (let k = 0; k \u003c 8; k += 2) put(buf, x + FALLS[0][k], y - FALLS[0][k + 1], col, shade(FALLS[0][k], 0), 1);\n  }\n\n  // Leaves, unfurling from a bud through two sizes to full.\n  const dir = P.windDir;\n  for (const l of P.leaves) {\n    if (l.gone === Y || p >= l.drop) continue;\n    const tO = openAt(P, l, Y);\n    const u = (ts - tO) / 6;\n    if (u \u003c= 0) continue;\n    const spr = LEAF[u \u003c 0.2 ? 0 : u \u003c 0.45 ? 1 : u \u003c 0.75 ? Math.min(2, l.size) : l.size];\n    const lc = leafColour(P, l, clamp((ts - tO) / (YEAR * 0.1), 0, 1), p);\n    const cx = Math.round(l.x) + (l.flip > 0.6 ? dir : 0);\n    const cy = Math.round(l.y);\n    for (let k = 0; k \u003c spr.length; k += 2) put(buf, cx + spr[k], cy + spr[k + 1], lc, shade(spr[k], spr[k + 1]), 1);\n  }\n\n  // Leaves on their way down, tumbling.\n  for (const f of P.falls) {\n    const ph = f.ph / 6.283;\n    const q = Math.floor((ph - Math.floor(ph)) * 4);\n    const face = (q === 2 ? 0.8 : 1) * (0.85 + 0.3 * Math.abs(Math.cos(f.ph * 0.5)));\n    const x = Math.round(f.x);\n    const y = Math.round(f.y);\n    const sp = FALLS[q];\n    for (let k = 0; k \u003c sp.length; k += 2) put(buf, x + sp[k], y + sp[k + 1], f.c, shade(sp[k], sp[k + 1]) * face, 1);\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Vines=2..6, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The leaf colour, starting from green; autumn always turns the leaves a third of the way back round the colour wheel, so green goes through yellow to red."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the year turns: at 2 a year is 60 seconds and a new stem climbs the 120 rows of wall in about 16; at 3 a year is 40 seconds, at 0.2 ten minutes. The gusts come and go faster with it."},{"name":"Vines","min":2,"max":6,"about":"How many stems come out of the ground, 2 to 6; turning it up starts new shoots at the foot of the wall, turning it down cuts stems so they wither."},{"name":"Wind","min":-1,"max":1,"about":"Near 0 a breath of air now and then turns a few leaves silver side up; turned either way the gusts come more often from that side, sweep the wall faster and, past halfway, tear leaves off and blow them away."}],"start":[0,2,2,0.06],"measures":{"motion":0.0893,"detail":0.1136,"edges":0.3366,"complexity":2.0732,"coverage":0.8558,"colour":0.304,"drift":0.0713},"knobResponse":[0.1737,0.0489,0.1412,0.1012]},{"slug":"jacobs-ladder","title":"Jacob's Ladder","family":"light","round":6,"note":"두 막대가 가장 가까운 목에서 보랏빛 아크가 튀어, 벌어지는 V 를 타고 막대 끝까지 올라가 끊어져요. 위의 아크가 끝에 닿기 전에 목에서 다음 아크가 튀고, K4 를 올리면 지나간 아크가 사다리 가로대로 쌓여요.","idea":"An arc strikes where two rods stand closest, rides its own hot air up the widening V until it is too long to hold, and breaks at the tips while the next one strikes below.","buttons":"K1 tap strikes a new arc now.","code":"// ===== Patternflow pattern =====\n// Title:   Jacob's Ladder\n// Family:  light\n// Idea:    An arc strikes where two rods stand closest, rides its own hot air up the widening V until it is too long to hold, and breaks at the tips while the next one strikes below.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Jacob's ladder, the climbing-arc spark gap of high-voltage demonstrations\n// Round:   6\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Power=0.3..3, Spread=0..1, Exposure=0..1\n//\n// Knob 1: Hue. The colour of the gas the arc burns in, starting from the violet of an arc in air.\n// Knob 2: Power. How hard the transformer drives the arc: weak, it climbs slowly and breaks partway up; strong, it races to the tips, writhes, throws sparks and strikes again before the last one is gone.\n// Knob 3: Spread. How far apart the rod tips stand, from a narrow V to horns that flare out to the edges of the panel. In a wide V the arc stretches sooner, so the next one strikes sooner and a weak arc breaks lower down.\n// Knob 4: Exposure. How long the panel keeps each arc after it has moved on, like a camera left open; turned up, the arcs it leaves stack into the rungs of a ladder.\n// Buttons: K1 tap strikes a new arc now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 32;\n// Rows, top down: the rod tips, the throat where the rods come closest and\n// every arc strikes, the tops of the two insulators, the lid of the box.\nconst TIP = 8;\nconst THROAT = 94;\nconst POST = 104;\nconst BOX = 116;\n// Half the gap between the rods at the throat and where they leave the posts.\nconst THROAT_GAP = 2.2;\nconst POST_GAP = 9.5;\nconst ARCS = 3;\nconst PTS = 72;\nconst EMBERS = 48;\n// The arc throbs at this rate. A camera left open keeps the bright moments\n// and loses the dim ones, so the long exposure lays the arc down in rungs.\nconst HUM = 10;\n// The arc lights the air around it. That wide glow is worked out on a grid\n// of 4 LED cells and spread across the cells between.\nconst CELL = 4;\nconst GW = W / CELL + 1;\nconst GH = H / CELL + 1;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash2(i, j) {\n  let h = Math.imul(i, 374761393) + Math.imul(j, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth value noise, -1..1.\nfunction noise2(x, y) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash2(xi, yi);\n  const b = hash2(xi + 1, yi);\n  const c = hash2(xi, yi + 1);\n  const d = hash2(xi + 1, yi + 1);\n  return (a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v) * 2 - 1;\n}\n\n// Half the gap between the rods at row y, read from the table build() fills.\nfunction gapAt(P, y) {\n  if (y \u003c= TIP) return P.gap[TIP];\n  if (y >= POST) return POST_GAP;\n  const i = Math.floor(y);\n  const f = y - i;\n  return P.gap[i] + (P.gap[i + 1] - P.gap[i]) * f;\n}\n\n// The rods, the posts and the box, drawn once for a spread. Above the throat\n// the rods open from a straight V to horns: the wider the spread, the longer\n// they stay close before they flare.\nfunction build(P, spread) {\n  P.spread = spread;\n  const top = 15 + 16 * spread;\n  const bend = 1.1 + 0.6 * spread;\n  for (let y = 0; y \u003c= H; y++) {\n    if (y \u003c= THROAT) {\n      const u = Math.min(1, (THROAT - y) / (THROAT - TIP));\n      P.gap[y] = THROAT_GAP + (top - THROAT_GAP) * Math.pow(u, bend);\n    } else {\n      const t = Math.min(1, (y - THROAT) / (POST - THROAT));\n      P.gap[y] = THROAT_GAP + (POST_GAP - THROAT_GAP) * t * t;\n    }\n  }\n  const rod = P.rod;\n  rod.fill(0);\n  // Each rod is stamped every quarter row, so a pixel keeps how close the\n  // rod's centre line passed it: a one-LED wire, shared between two LEDs\n  // where it runs between them.\n  for (let y = TIP; y \u003c= POST; y += 0.25) {\n    const g = gapAt(P, y);\n    for (let side = -1; side \u003c= 1; side += 2) {\n      const x = CX + side * g;\n      const x0 = Math.floor(x) - 1;\n      const y0 = Math.floor(y) - 1;\n      for (let py = y0; py \u003c= y0 + 2; py++) {\n        if (py \u003c 0 || py >= H) continue;\n        for (let px = x0; px \u003c= x0 + 2; px++) {\n          if (px \u003c 0 || px >= W) continue;\n          const d = Math.hypot(px + 0.5 - x, py + 0.5 - y);\n          const c = Math.min(1, Math.max(0, 1.05 - d));\n          const i = py * W + px;\n          if (c > rod[i]) rod[i] = c;\n        }\n      }\n    }\n  }\n  // A round knob on each tip.\n  for (let side = -1; side \u003c= 1; side += 2) {\n    const x = CX + side * P.gap[TIP];\n    for (let py = TIP - 3; py \u003c= TIP + 1; py++) {\n      for (let px = Math.floor(x) - 2; px \u003c= Math.floor(x) + 2; px++) {\n        if (px \u003c 0 || px >= W) continue;\n        const d = Math.hypot(px + 0.5 - x, py + 0.5 - (TIP - 0.6));\n        const c = Math.min(1, Math.max(0, 1.7 - d));\n        const i = py * W + px;\n        if (c > rod[i]) rod[i] = c;\n      }\n    }\n  }\n\n  const st = P.stat;\n  st.fill(0);\n  for (let i = 0; i \u003c N; i++) {\n    const c = rod[i];\n    if (c \u003c= 0) continue;\n    const x = i % W;\n    // Steel, a touch lighter on the face toward the middle.\n    const face = x \u003c CX ? 1.08 : 0.94;\n    st[i * 3] = 98 * c * face;\n    st[i * 3 + 1] = 102 * c * face;\n    st[i * 3 + 2] = 116 * c * face;\n  }\n  // Two glazed posts with sheds, lit from the left.\n  for (let y = POST; y \u003c BOX; y++) {\n    const wide = (y - POST) % 3 !== 2;\n    const half = wide ? 3 : 2;\n    for (let side = -1; side \u003c= 1; side += 2) {\n      const cx = CX + side * POST_GAP;\n      for (let x = Math.floor(cx - half); x \u003c Math.ceil(cx + half); x++) {\n        const u = (x + 0.5 - (cx - half)) / (2 * half);\n        const shade = (wide ? 1 : 0.68) * (1.15 - 0.6 * u);\n        const o = (y * W + x) * 3;\n        st[o] = 176 * shade;\n        st[o + 1] = 166 * shade;\n        st[o + 2] = 148 * shade;\n      }\n    }\n  }\n  // The transformer box: a light lid, a dark body with vent slots.\n  for (let y = BOX; y \u003c H; y++) {\n    for (let x = 3; x \u003c W - 3; x++) {\n      if (y === BOX && (x === 3 || x === W - 4)) continue;\n      const o = (y * W + x) * 3;\n      let r = 54;\n      let g = 52;\n      let b = 60;\n      if (y === BOX) {\n        r = 104;\n        g = 102;\n        b = 112;\n      } else if (y === BOX + 1) {\n        r = 70;\n        g = 68;\n        b = 76;\n      } else if (y >= BOX + 4 && y \u003c= BOX + 9 && (y - BOX) % 2 === 0 && x >= 16 && x \u003c W - 16) {\n        r = 18;\n        g = 18;\n        b = 21;\n      }\n      st[o] = r;\n      st[o + 1] = g;\n      st[o + 2] = b;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.gap = new Float32Array(H + 1);\n  P.rod = new Float32Array(N);\n  P.stat = new Float32Array(N * 3);\n  P.spread = -1;\n  P.alive = new Uint8Array(ARCS);\n  P.age = new Float32Array(ARCS);\n  P.root = new Float32Array(ARCS);\n  P.life = new Float32Array(ARCS);\n  P.seed = new Float32Array(ARCS);\n  P.turb = new Float32Array(ARCS);\n  P.len = new Float32Array(ARCS);\n  P.ends = new Float32Array(ARCS * 4);\n  P.px = new Float32Array(ARCS * PTS);\n  P.py = new Float32Array(ARCS * PTS);\n  P.pn = new Uint8Array(ARCS);\n  P.ex = new Float32Array(EMBERS);\n  P.ey = new Float32Array(EMBERS);\n  P.evx = new Float32Array(EMBERS);\n  P.evy = new Float32Array(EMBERS);\n  P.elife = new Float32Array(EMBERS);\n  P.emax = new Float32Array(EMBERS);\n  P.ebounce = new Uint8Array(EMBERS);\n  P.core = new Float32Array(N);\n  P.glow = new Float32Array(N);\n  P.trail = new Float32Array(N);\n  P.warm = new Float32Array(N);\n  P.dist = new Float32Array(N).fill(1e9);\n  P.air = new Float32Array(GW * GH);\n  P.airTrail = new Float32Array(GW * GH);\n  P.out = new Float32Array(N * 3);\n  P.col = new Float32Array(12);\n  P.t = 0;\n  P.dt = 1 / 30;\n  P.flash = 0;\n  P.cool = 0;\n  P.power = 2;\n  P.hue = 0;\n  P.exposure = 0.06;\n}\n\nfunction strike(P) {\n  let a = -1;\n  for (let i = 0; i \u003c ARCS; i++) if (P.alive[i] === 0) a = i;\n  if (a \u003c 0) {\n    // Every slot is busy: the oldest arc gives way.\n    a = 0;\n    for (let i = 1; i \u003c ARCS; i++) if (P.age[i] > P.age[a]) a = i;\n  }\n  P.alive[a] = 1;\n  P.age[a] = 0;\n  P.root[a] = THROAT - 0.3 + (Math.random() - 0.5) * 1.2;\n  P.life[a] = 1;\n  P.seed[a] = Math.floor(Math.random() * 997);\n  P.turb[a] = 0;\n  P.len[a] = 0;\n  P.flash = 1;\n  P.cool = 0;\n}\n\n// The arc's points for this frame: a chord between the two roots, bowed up\n// in the middle, where hot air rises fastest, and bent by turbulence that\n// grows with the arc's length. The roots sit on the inner face of each rod.\nfunction shape(P, a) {\n  const age = P.age[a];\n  const live = P.alive[a] === 1;\n  const seed = P.seed[a];\n  const yl = P.root[a] + 0.9 * noise2(age * 2.7, seed);\n  const yr = P.root[a] + 0.9 * noise2(age * 2.7, seed + 17);\n  const xl = CX - gapAt(P, yl) + 0.7;\n  const xr = CX + gapAt(P, yr) - 0.7;\n  P.ends[a * 4] = xl;\n  P.ends[a * 4 + 1] = yl;\n  P.ends[a * 4 + 2] = xr;\n  P.ends[a * 4 + 3] = yr;\n  const dx = xr - xl;\n  const dy = yr - yl;\n  const chord = Math.max(0.5, Math.hypot(dx, dy));\n  const tx = dx / chord;\n  const ty = dy / chord;\n  // The normal that points up the panel.\n  const nx = ty;\n  const ny = -tx;\n  const power = P.power;\n  let bow = chord * (0.1 + 0.05 * power) * (1 - Math.exp(-age / 0.3));\n  if (!live) bow += (1 - P.life[a]) * 4;\n  const amp = (0.4 + 0.09 * chord) * (0.6 + 0.25 * power);\n  const turb = P.turb[a];\n  const jit = 0.25 * (0.5 + 0.3 * power);\n  const n = Math.max(6, Math.min(PTS, Math.round(chord / 1.1) + 4));\n  P.pn[a] = n;\n  const o = a * PTS;\n  let len = 0;\n  let lx = 0;\n  let ly = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const s = i / (n - 1);\n    const e = Math.sin(Math.PI * s);\n    const bx = xl + dx * s;\n    const by = yl + dy * s;\n    const lift = bow * 4 * s * (1 - s);\n    const bend =\n      amp *\n      Math.pow(e, 0.7) *\n      (noise2(s * 2.6, turb + seed * 7.3) + 0.45 * noise2(s * 6.1 + 9, turb * 1.7 + seed) + 0.2 * noise2(s * 13 + 21, turb * 3.1 + seed));\n    const slide = 0.4 * amp * e * noise2(s * 2 + 40, turb * 0.8 + seed * 3.1);\n    const j = (Math.random() - 0.5) * 2 * jit * e;\n    let x = bx + nx * (lift + bend + j) + tx * slide;\n    const y = by + ny * (lift + bend + j) + ty * slide;\n    if (live) {\n      const g = gapAt(P, y) - 0.5;\n      if (x \u003c CX - g) x = CX - g;\n      else if (x > CX + g) x = CX + g;\n    }\n    P.px[o + i] = x;\n    P.py[o + i] = y;\n    if (i > 0) len += Math.hypot(x - lx, y - ly);\n    lx = x;\n    ly = y;\n  }\n  P.len[a] = len;\n}\n\nfunction throwEmber(P, x, y, side) {\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] > 0) continue;\n    P.ex[i] = x;\n    P.ey[i] = y;\n    P.evx[i] = side * (5 + 18 * Math.random());\n    P.evy[i] = -(8 + 26 * Math.random());\n    P.emax[i] = 0.7 + 0.9 * Math.random();\n    P.elife[i] = P.emax[i];\n    P.ebounce[i] = 0;\n    return;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.hue = k[0];\n  const power = Math.max(0.3, Math.min(3, k[1]));\n  P.power = power;\n  const spread = Math.max(0, Math.min(1, k[2]));\n  P.exposure = Math.max(0, Math.min(1, k[3]));\n  if (Math.abs(spread - P.spread) > 1e-4) build(P, spread);\n\n  P.t += dt;\n  P.dt = dt;\n  P.cool += dt;\n  P.flash *= Math.exp(-dt / 0.07);\n\n  const vmax = 25 + 32 * power;\n  const reach = 20 + 15 * power;\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] === 0) continue;\n    P.age[a] += dt;\n    const v = vmax * (0.25 + 0.75 * (1 - Math.exp(-P.age[a] / 0.22)));\n    if (P.alive[a] === 1) {\n      P.root[a] -= v * dt;\n      P.turb[a] += dt * (1.2 + 0.5 * power);\n    } else {\n      // Broken: what is left of the arc floats up off the tips and goes out.\n      P.root[a] -= v * 0.6 * dt;\n      P.turb[a] += dt * 0.8;\n      P.life[a] -= dt / 0.16;\n      if (P.life[a] \u003c= 0) {\n        P.alive[a] = 0;\n        continue;\n      }\n    }\n    shape(P, a);\n    if (P.alive[a] === 1 && (P.root[a] \u003c= TIP + 1 || P.len[a] > reach)) P.alive[a] = 2;\n  }\n\n  // The next arc strikes once the throat is clear for long enough. The\n  // throat also breaks down again while the last arc is still climbing: when\n  // that arc is high, which comes sooner the harder it is pushed, or when it\n  // has stretched long, which comes sooner in a wide V.\n  let live = 0;\n  let youngest = -1;\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] !== 1) continue;\n    live++;\n    if (youngest \u003c 0 || P.age[a] \u003c P.age[youngest]) youngest = a;\n  }\n  const rest = 0.05 + 0.25 / power;\n  const again = 0.95 - 0.25 * ((power - 0.3) / 2.7);\n  if (live === 0) {\n    if (P.cool > rest) strike(P);\n  } else if (live \u003c (power > 2.2 ? 3 : 2) && P.cool > 0.1) {\n    const climbed = (THROAT - P.root[youngest]) / (THROAT - TIP);\n    if (climbed > again || P.len[youngest] > 0.75 * reach) strike(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) strike(P);\n\n  // Hot metal leaves the roots as sparks, thrown off the rod and falling.\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] !== 1) continue;\n    const rate = 0.4 * power * power;\n    if (Math.random() \u003c rate * dt) throwEmber(P, P.ends[a * 4], P.ends[a * 4 + 1], -1);\n    if (Math.random() \u003c rate * dt) throwEmber(P, P.ends[a * 4 + 2], P.ends[a * 4 + 3], 1);\n  }\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] \u003c= 0) continue;\n    P.elife[i] -= dt;\n    P.evy[i] += 70 * dt;\n    P.ex[i] += P.evx[i] * dt;\n    P.ey[i] += P.evy[i] * dt;\n    if (P.ey[i] >= BOX - 0.5 && P.ex[i] > 3 && P.ex[i] \u003c W - 3) {\n      if (P.ebounce[i]) P.elife[i] = 0;\n      else {\n        P.ey[i] = BOX - 0.5;\n        P.evy[i] *= -0.3;\n        P.evx[i] *= 0.5;\n        P.ebounce[i] = 1;\n      }\n    }\n    if (P.ex[i] \u003c 0 || P.ex[i] >= W || P.ey[i] >= H) P.elife[i] = 0;\n  }\n}\n\n// Closest distance squared from every pixel near the segment, kept per pixel.\nfunction stampSegment(P, x0, y0, x1, y1, R, box) {\n  const dist = P.dist;\n  const minX = Math.max(0, Math.floor(Math.min(x0, x1) - R));\n  const maxX = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + R));\n  const minY = Math.max(0, Math.floor(Math.min(y0, y1) - R));\n  const maxY = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + R));\n  if (minX > maxX || minY > maxY) return;\n  if (minX \u003c box[0]) box[0] = minX;\n  if (maxX > box[1]) box[1] = maxX;\n  if (minY \u003c box[2]) box[2] = minY;\n  if (maxY > box[3]) box[3] = maxY;\n  const sx = x1 - x0;\n  const sy = y1 - y0;\n  const ll = sx * sx + sy * sy || 1e-6;\n  for (let py = minY; py \u003c= maxY; py++) {\n    const cy = py + 0.5 - y0;\n    for (let px = minX; px \u003c= maxX; px++) {\n      const cx = px + 0.5 - x0;\n      let u = (cx * sx + cy * sy) / ll;\n      if (u \u003c 0) u = 0;\n      else if (u > 1) u = 1;\n      const ex = cx - u * sx;\n      const ey = cy - u * sy;\n      const d = ex * ex + ey * ey;\n      const i = py * W + px;\n      if (d \u003c dist[i]) dist[i] = d;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const core = P.core;\n  const glow = P.glow;\n  const warm = P.warm;\n  const trail = P.trail;\n  const dist = P.dist;\n  const power = P.power;\n  const air = P.air;\n  core.fill(0);\n  glow.fill(0);\n  warm.fill(0);\n  air.fill(0);\n\n  // The hum: one beat bright, the rest of the cycle dimmer.\n  const beat = Math.pow(Math.abs(Math.sin(Math.PI * HUM * P.t)), 6);\n  const box = [W, -1, H, -1];\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] === 0) continue;\n    const live = P.alive[a] === 1;\n    const age = P.age[a];\n    const life = P.life[a];\n    let b = (0.62 + 0.13 * power) * (0.84 + 0.16 * Math.random()) * (0.82 + 0.18 * beat);\n    if (age \u003c 0.1) b *= 1 + 1.3 * (1 - age / 0.1);\n    if (!live) b *= life * life;\n    const lambda = 2.6 + 0.6 * power + (live ? 0 : (1 - life) * 3);\n    const sigma = (0.55 + 0.2 * power) * (live ? 1 : life * life + 0.05);\n    const R = Math.ceil(lambda * 3.4);\n    box[0] = W;\n    box[1] = -1;\n    box[2] = H;\n    box[3] = -1;\n    const o = a * PTS;\n    const n = P.pn[a];\n    for (let i = 0; i + 1 \u003c n; i++) stampSegment(P, P.px[o + i], P.py[o + i], P.px[o + i + 1], P.py[o + i + 1], R, box);\n    // The air: each grid point's distance to the nearest segment.\n    const reachAir = 7 + 1.5 * power;\n    for (let gy = 0; gy \u003c GH; gy++) {\n      const y = gy * CELL;\n      for (let gx = 0; gx \u003c GW; gx++) {\n        const x = gx * CELL;\n        let best = 1e9;\n        for (let i = 0; i + 1 \u003c n; i++) {\n          const x0 = P.px[o + i];\n          const y0 = P.py[o + i];\n          const sx = P.px[o + i + 1] - x0;\n          const sy = P.py[o + i + 1] - y0;\n          const cx = x - x0;\n          const cy = y - y0;\n          let u = (cx * sx + cy * sy) / (sx * sx + sy * sy || 1e-6);\n          if (u \u003c 0) u = 0;\n          else if (u > 1) u = 1;\n          const ex = cx - u * sx;\n          const ey = cy - u * sy;\n          const d = ex * ex + ey * ey;\n          if (d \u003c best) best = d;\n        }\n        // Near the arc the air glows; further off, the room is only tinted.\n        const d = Math.sqrt(best);\n        air[gy * GW + gx] += b * (0.3 * Math.exp(-d / reachAir) + 0.07 * Math.exp(-d / 26));\n      }\n    }\n    if (box[1] \u003c box[0]) continue;\n    const rr = R * R;\n    for (let py = box[2]; py \u003c= box[3]; py++) {\n      for (let px = box[0]; px \u003c= box[1]; px++) {\n        const i = py * W + px;\n        const d = dist[i];\n        if (d >= 1e8) continue;\n        dist[i] = 1e9;\n        if (d > rr) continue;\n        const c = d \u003c 8 * sigma ? b * Math.exp(-d / sigma) : 0;\n        const g = b * 0.7 * Math.exp(-Math.sqrt(d) / lambda);\n        if (c > core[i]) core[i] = c;\n        if (g > glow[i]) glow[i] = g;\n      }\n    }\n    if (!live) continue;\n    // The roots burn white on the rod.\n    for (let e = 0; e \u003c 2; e++) {\n      const x = P.ends[a * 4 + e * 2];\n      const y = P.ends[a * 4 + e * 2 + 1];\n      for (let py = Math.floor(y) - 3; py \u003c= Math.floor(y) + 3; py++) {\n        if (py \u003c 0 || py >= H) continue;\n        for (let px = Math.floor(x) - 3; px \u003c= Math.floor(x) + 3; px++) {\n          if (px \u003c 0 || px >= W) continue;\n          const dx = px + 0.5 - x;\n          const dy = py + 0.5 - y;\n          const w = b * 1.1 * Math.exp(-(dx * dx + dy * dy) / 1.4);\n          const i = py * W + px;\n          if (w > warm[i]) warm[i] = w;\n        }\n      }\n    }\n  }\n\n  // The trail: a camera left open keeps the bright beats and lets the rest go.\n  const tau = 0.035 * Math.exp(4.6 * P.exposure);\n  const keep = Math.exp(-P.dt / tau);\n  const lay = 0.2 + 0.8 * beat;\n  for (let i = 0; i \u003c N; i++) {\n    const v = Math.max(core[i] * 0.7, glow[i] * 1.3) * lay;\n    const t = trail[i] * keep;\n    trail[i] = v > t ? v : t;\n  }\n  // The glowing air is kept the same way, as a haze through the V.\n  const airTrail = P.airTrail;\n  for (let q = 0; q \u003c GW * GH; q++) {\n    const t = airTrail[q] * keep;\n    airTrail[q] = air[q] > t ? air[q] : t;\n    const h = airTrail[q] * 0.8;\n    if (h > air[q]) air[q] = h;\n  }\n\n  const col = P.col;\n  const hue = P.hue + 0.74;\n  hsv(hue, 0.78, 1, col, 0);\n  hsv(hue, 0.22, 1, col, 3);\n  hsv(hue + 0.02, 0.6, 0.9, col, 6);\n  const amb = 0.62 + 0.3 * P.flash;\n  // Steel and glaze take on the colour of the light that falls on them.\n  const tr = 0.45 + 0.55 * (col[0] / 255);\n  const tg = 0.45 + 0.55 * (col[1] / 255);\n  const tb = 0.45 + 0.55 * (col[2] / 255);\n  const st = P.stat;\n  const out = P.out;\n  for (let y = 0; y \u003c H; y++) {\n    const fy = (y + 0.5) / CELL;\n    const gy = Math.min(GH - 2, Math.floor(fy));\n    const vy = fy - gy;\n    for (let x = 0; x \u003c W; x++) {\n      const fx = (x + 0.5) / CELL;\n      const gx = Math.min(GW - 2, Math.floor(fx));\n      const vx = fx - gx;\n      const q = gy * GW + gx;\n      const top = air[q] + (air[q + 1] - air[q]) * vx;\n      const bottom = air[q + GW] + (air[q + GW + 1] - air[q + GW]) * vx;\n      const ai = top + (bottom - top) * vy;\n      const i = y * W + x;\n      const o = i * 3;\n      const g = Math.max(glow[i], trail[i] * 0.85);\n      const c = core[i];\n      const w = warm[i];\n      const lit = 1.6 * g + 2.2 * ai + 1.2 * w;\n      out[o] = st[o] * (amb + lit * tr) + c * col[3] + glow[i] * col[0] + (g - glow[i]) * col[6] + ai * col[0] + w * 255;\n      out[o + 1] = st[o + 1] * (amb + lit * tg) + c * col[4] + glow[i] * col[1] + (g - glow[i]) * col[7] + ai * col[1] + w * 196;\n      out[o + 2] = st[o + 2] * (amb + lit * tb) + c * col[5] + glow[i] * col[2] + (g - glow[i]) * col[8] + ai * col[2] + w * 130;\n    }\n  }\n  // The pilot lamp on the box, and the sparks: white-hot, cooling to red.\n  for (let py = BOX + 4; py \u003c= BOX + 5; py++) {\n    for (let px = 7; px \u003c= 8; px++) {\n      const o = (py * W + px) * 3;\n      out[o] = 236;\n      out[o + 1] = 120 + 40 * P.flash;\n      out[o + 2] = 36;\n    }\n  }\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] \u003c= 0) continue;\n    const u = P.elife[i] / P.emax[i];\n    const px = Math.floor(P.ex[i]);\n    const py = Math.floor(P.ey[i]);\n    if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n    const o = (py * W + px) * 3;\n    const v = 0.35 + 0.65 * u;\n    out[o] += 255 * v;\n    out[o + 1] += (60 + 170 * u * u) * v;\n    out[o + 2] += 90 * u * u * u * v;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[o]), Math.min(255, out[o + 1]), Math.min(255, out[o + 2]));\n    }\n  }\n}\n","layer":{"id":"layer-jacobs-ladder","type":"code","name":"jacobs-ladder","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Jacob's Ladder\n// Family:  light\n// Idea:    An arc strikes where two rods stand closest, rides its own hot air up the widening V until it is too long to hold, and breaks at the tips while the next one strikes below.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Jacob's ladder, the climbing-arc spark gap of high-voltage demonstrations\n// Round:   6\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Power=0.3..3, Spread=0..1, Exposure=0..1\n//\n// Knob 1: Hue. The colour of the gas the arc burns in, starting from the violet of an arc in air.\n// Knob 2: Power. How hard the transformer drives the arc: weak, it climbs slowly and breaks partway up; strong, it races to the tips, writhes, throws sparks and strikes again before the last one is gone.\n// Knob 3: Spread. How far apart the rod tips stand, from a narrow V to horns that flare out to the edges of the panel. In a wide V the arc stretches sooner, so the next one strikes sooner and a weak arc breaks lower down.\n// Knob 4: Exposure. How long the panel keeps each arc after it has moved on, like a camera left open; turned up, the arcs it leaves stack into the rungs of a ladder.\n// Buttons: K1 tap strikes a new arc now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 32;\n// Rows, top down: the rod tips, the throat where the rods come closest and\n// every arc strikes, the tops of the two insulators, the lid of the box.\nconst TIP = 8;\nconst THROAT = 94;\nconst POST = 104;\nconst BOX = 116;\n// Half the gap between the rods at the throat and where they leave the posts.\nconst THROAT_GAP = 2.2;\nconst POST_GAP = 9.5;\nconst ARCS = 3;\nconst PTS = 72;\nconst EMBERS = 48;\n// The arc throbs at this rate. A camera left open keeps the bright moments\n// and loses the dim ones, so the long exposure lays the arc down in rungs.\nconst HUM = 10;\n// The arc lights the air around it. That wide glow is worked out on a grid\n// of 4 LED cells and spread across the cells between.\nconst CELL = 4;\nconst GW = W / CELL + 1;\nconst GH = H / CELL + 1;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash2(i, j) {\n  let h = Math.imul(i, 374761393) + Math.imul(j, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth value noise, -1..1.\nfunction noise2(x, y) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash2(xi, yi);\n  const b = hash2(xi + 1, yi);\n  const c = hash2(xi, yi + 1);\n  const d = hash2(xi + 1, yi + 1);\n  return (a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v) * 2 - 1;\n}\n\n// Half the gap between the rods at row y, read from the table build() fills.\nfunction gapAt(P, y) {\n  if (y \u003c= TIP) return P.gap[TIP];\n  if (y >= POST) return POST_GAP;\n  const i = Math.floor(y);\n  const f = y - i;\n  return P.gap[i] + (P.gap[i + 1] - P.gap[i]) * f;\n}\n\n// The rods, the posts and the box, drawn once for a spread. Above the throat\n// the rods open from a straight V to horns: the wider the spread, the longer\n// they stay close before they flare.\nfunction build(P, spread) {\n  P.spread = spread;\n  const top = 15 + 16 * spread;\n  const bend = 1.1 + 0.6 * spread;\n  for (let y = 0; y \u003c= H; y++) {\n    if (y \u003c= THROAT) {\n      const u = Math.min(1, (THROAT - y) / (THROAT - TIP));\n      P.gap[y] = THROAT_GAP + (top - THROAT_GAP) * Math.pow(u, bend);\n    } else {\n      const t = Math.min(1, (y - THROAT) / (POST - THROAT));\n      P.gap[y] = THROAT_GAP + (POST_GAP - THROAT_GAP) * t * t;\n    }\n  }\n  const rod = P.rod;\n  rod.fill(0);\n  // Each rod is stamped every quarter row, so a pixel keeps how close the\n  // rod's centre line passed it: a one-LED wire, shared between two LEDs\n  // where it runs between them.\n  for (let y = TIP; y \u003c= POST; y += 0.25) {\n    const g = gapAt(P, y);\n    for (let side = -1; side \u003c= 1; side += 2) {\n      const x = CX + side * g;\n      const x0 = Math.floor(x) - 1;\n      const y0 = Math.floor(y) - 1;\n      for (let py = y0; py \u003c= y0 + 2; py++) {\n        if (py \u003c 0 || py >= H) continue;\n        for (let px = x0; px \u003c= x0 + 2; px++) {\n          if (px \u003c 0 || px >= W) continue;\n          const d = Math.hypot(px + 0.5 - x, py + 0.5 - y);\n          const c = Math.min(1, Math.max(0, 1.05 - d));\n          const i = py * W + px;\n          if (c > rod[i]) rod[i] = c;\n        }\n      }\n    }\n  }\n  // A round knob on each tip.\n  for (let side = -1; side \u003c= 1; side += 2) {\n    const x = CX + side * P.gap[TIP];\n    for (let py = TIP - 3; py \u003c= TIP + 1; py++) {\n      for (let px = Math.floor(x) - 2; px \u003c= Math.floor(x) + 2; px++) {\n        if (px \u003c 0 || px >= W) continue;\n        const d = Math.hypot(px + 0.5 - x, py + 0.5 - (TIP - 0.6));\n        const c = Math.min(1, Math.max(0, 1.7 - d));\n        const i = py * W + px;\n        if (c > rod[i]) rod[i] = c;\n      }\n    }\n  }\n\n  const st = P.stat;\n  st.fill(0);\n  for (let i = 0; i \u003c N; i++) {\n    const c = rod[i];\n    if (c \u003c= 0) continue;\n    const x = i % W;\n    // Steel, a touch lighter on the face toward the middle.\n    const face = x \u003c CX ? 1.08 : 0.94;\n    st[i * 3] = 98 * c * face;\n    st[i * 3 + 1] = 102 * c * face;\n    st[i * 3 + 2] = 116 * c * face;\n  }\n  // Two glazed posts with sheds, lit from the left.\n  for (let y = POST; y \u003c BOX; y++) {\n    const wide = (y - POST) % 3 !== 2;\n    const half = wide ? 3 : 2;\n    for (let side = -1; side \u003c= 1; side += 2) {\n      const cx = CX + side * POST_GAP;\n      for (let x = Math.floor(cx - half); x \u003c Math.ceil(cx + half); x++) {\n        const u = (x + 0.5 - (cx - half)) / (2 * half);\n        const shade = (wide ? 1 : 0.68) * (1.15 - 0.6 * u);\n        const o = (y * W + x) * 3;\n        st[o] = 176 * shade;\n        st[o + 1] = 166 * shade;\n        st[o + 2] = 148 * shade;\n      }\n    }\n  }\n  // The transformer box: a light lid, a dark body with vent slots.\n  for (let y = BOX; y \u003c H; y++) {\n    for (let x = 3; x \u003c W - 3; x++) {\n      if (y === BOX && (x === 3 || x === W - 4)) continue;\n      const o = (y * W + x) * 3;\n      let r = 54;\n      let g = 52;\n      let b = 60;\n      if (y === BOX) {\n        r = 104;\n        g = 102;\n        b = 112;\n      } else if (y === BOX + 1) {\n        r = 70;\n        g = 68;\n        b = 76;\n      } else if (y >= BOX + 4 && y \u003c= BOX + 9 && (y - BOX) % 2 === 0 && x >= 16 && x \u003c W - 16) {\n        r = 18;\n        g = 18;\n        b = 21;\n      }\n      st[o] = r;\n      st[o + 1] = g;\n      st[o + 2] = b;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.gap = new Float32Array(H + 1);\n  P.rod = new Float32Array(N);\n  P.stat = new Float32Array(N * 3);\n  P.spread = -1;\n  P.alive = new Uint8Array(ARCS);\n  P.age = new Float32Array(ARCS);\n  P.root = new Float32Array(ARCS);\n  P.life = new Float32Array(ARCS);\n  P.seed = new Float32Array(ARCS);\n  P.turb = new Float32Array(ARCS);\n  P.len = new Float32Array(ARCS);\n  P.ends = new Float32Array(ARCS * 4);\n  P.px = new Float32Array(ARCS * PTS);\n  P.py = new Float32Array(ARCS * PTS);\n  P.pn = new Uint8Array(ARCS);\n  P.ex = new Float32Array(EMBERS);\n  P.ey = new Float32Array(EMBERS);\n  P.evx = new Float32Array(EMBERS);\n  P.evy = new Float32Array(EMBERS);\n  P.elife = new Float32Array(EMBERS);\n  P.emax = new Float32Array(EMBERS);\n  P.ebounce = new Uint8Array(EMBERS);\n  P.core = new Float32Array(N);\n  P.glow = new Float32Array(N);\n  P.trail = new Float32Array(N);\n  P.warm = new Float32Array(N);\n  P.dist = new Float32Array(N).fill(1e9);\n  P.air = new Float32Array(GW * GH);\n  P.airTrail = new Float32Array(GW * GH);\n  P.out = new Float32Array(N * 3);\n  P.col = new Float32Array(12);\n  P.t = 0;\n  P.dt = 1 / 30;\n  P.flash = 0;\n  P.cool = 0;\n  P.power = 2;\n  P.hue = 0;\n  P.exposure = 0.06;\n}\n\nfunction strike(P) {\n  let a = -1;\n  for (let i = 0; i \u003c ARCS; i++) if (P.alive[i] === 0) a = i;\n  if (a \u003c 0) {\n    // Every slot is busy: the oldest arc gives way.\n    a = 0;\n    for (let i = 1; i \u003c ARCS; i++) if (P.age[i] > P.age[a]) a = i;\n  }\n  P.alive[a] = 1;\n  P.age[a] = 0;\n  P.root[a] = THROAT - 0.3 + (Math.random() - 0.5) * 1.2;\n  P.life[a] = 1;\n  P.seed[a] = Math.floor(Math.random() * 997);\n  P.turb[a] = 0;\n  P.len[a] = 0;\n  P.flash = 1;\n  P.cool = 0;\n}\n\n// The arc's points for this frame: a chord between the two roots, bowed up\n// in the middle, where hot air rises fastest, and bent by turbulence that\n// grows with the arc's length. The roots sit on the inner face of each rod.\nfunction shape(P, a) {\n  const age = P.age[a];\n  const live = P.alive[a] === 1;\n  const seed = P.seed[a];\n  const yl = P.root[a] + 0.9 * noise2(age * 2.7, seed);\n  const yr = P.root[a] + 0.9 * noise2(age * 2.7, seed + 17);\n  const xl = CX - gapAt(P, yl) + 0.7;\n  const xr = CX + gapAt(P, yr) - 0.7;\n  P.ends[a * 4] = xl;\n  P.ends[a * 4 + 1] = yl;\n  P.ends[a * 4 + 2] = xr;\n  P.ends[a * 4 + 3] = yr;\n  const dx = xr - xl;\n  const dy = yr - yl;\n  const chord = Math.max(0.5, Math.hypot(dx, dy));\n  const tx = dx / chord;\n  const ty = dy / chord;\n  // The normal that points up the panel.\n  const nx = ty;\n  const ny = -tx;\n  const power = P.power;\n  let bow = chord * (0.1 + 0.05 * power) * (1 - Math.exp(-age / 0.3));\n  if (!live) bow += (1 - P.life[a]) * 4;\n  const amp = (0.4 + 0.09 * chord) * (0.6 + 0.25 * power);\n  const turb = P.turb[a];\n  const jit = 0.25 * (0.5 + 0.3 * power);\n  const n = Math.max(6, Math.min(PTS, Math.round(chord / 1.1) + 4));\n  P.pn[a] = n;\n  const o = a * PTS;\n  let len = 0;\n  let lx = 0;\n  let ly = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const s = i / (n - 1);\n    const e = Math.sin(Math.PI * s);\n    const bx = xl + dx * s;\n    const by = yl + dy * s;\n    const lift = bow * 4 * s * (1 - s);\n    const bend =\n      amp *\n      Math.pow(e, 0.7) *\n      (noise2(s * 2.6, turb + seed * 7.3) + 0.45 * noise2(s * 6.1 + 9, turb * 1.7 + seed) + 0.2 * noise2(s * 13 + 21, turb * 3.1 + seed));\n    const slide = 0.4 * amp * e * noise2(s * 2 + 40, turb * 0.8 + seed * 3.1);\n    const j = (Math.random() - 0.5) * 2 * jit * e;\n    let x = bx + nx * (lift + bend + j) + tx * slide;\n    const y = by + ny * (lift + bend + j) + ty * slide;\n    if (live) {\n      const g = gapAt(P, y) - 0.5;\n      if (x \u003c CX - g) x = CX - g;\n      else if (x > CX + g) x = CX + g;\n    }\n    P.px[o + i] = x;\n    P.py[o + i] = y;\n    if (i > 0) len += Math.hypot(x - lx, y - ly);\n    lx = x;\n    ly = y;\n  }\n  P.len[a] = len;\n}\n\nfunction throwEmber(P, x, y, side) {\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] > 0) continue;\n    P.ex[i] = x;\n    P.ey[i] = y;\n    P.evx[i] = side * (5 + 18 * Math.random());\n    P.evy[i] = -(8 + 26 * Math.random());\n    P.emax[i] = 0.7 + 0.9 * Math.random();\n    P.elife[i] = P.emax[i];\n    P.ebounce[i] = 0;\n    return;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.hue = k[0];\n  const power = Math.max(0.3, Math.min(3, k[1]));\n  P.power = power;\n  const spread = Math.max(0, Math.min(1, k[2]));\n  P.exposure = Math.max(0, Math.min(1, k[3]));\n  if (Math.abs(spread - P.spread) > 1e-4) build(P, spread);\n\n  P.t += dt;\n  P.dt = dt;\n  P.cool += dt;\n  P.flash *= Math.exp(-dt / 0.07);\n\n  const vmax = 25 + 32 * power;\n  const reach = 20 + 15 * power;\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] === 0) continue;\n    P.age[a] += dt;\n    const v = vmax * (0.25 + 0.75 * (1 - Math.exp(-P.age[a] / 0.22)));\n    if (P.alive[a] === 1) {\n      P.root[a] -= v * dt;\n      P.turb[a] += dt * (1.2 + 0.5 * power);\n    } else {\n      // Broken: what is left of the arc floats up off the tips and goes out.\n      P.root[a] -= v * 0.6 * dt;\n      P.turb[a] += dt * 0.8;\n      P.life[a] -= dt / 0.16;\n      if (P.life[a] \u003c= 0) {\n        P.alive[a] = 0;\n        continue;\n      }\n    }\n    shape(P, a);\n    if (P.alive[a] === 1 && (P.root[a] \u003c= TIP + 1 || P.len[a] > reach)) P.alive[a] = 2;\n  }\n\n  // The next arc strikes once the throat is clear for long enough. The\n  // throat also breaks down again while the last arc is still climbing: when\n  // that arc is high, which comes sooner the harder it is pushed, or when it\n  // has stretched long, which comes sooner in a wide V.\n  let live = 0;\n  let youngest = -1;\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] !== 1) continue;\n    live++;\n    if (youngest \u003c 0 || P.age[a] \u003c P.age[youngest]) youngest = a;\n  }\n  const rest = 0.05 + 0.25 / power;\n  const again = 0.95 - 0.25 * ((power - 0.3) / 2.7);\n  if (live === 0) {\n    if (P.cool > rest) strike(P);\n  } else if (live \u003c (power > 2.2 ? 3 : 2) && P.cool > 0.1) {\n    const climbed = (THROAT - P.root[youngest]) / (THROAT - TIP);\n    if (climbed > again || P.len[youngest] > 0.75 * reach) strike(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) strike(P);\n\n  // Hot metal leaves the roots as sparks, thrown off the rod and falling.\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] !== 1) continue;\n    const rate = 0.4 * power * power;\n    if (Math.random() \u003c rate * dt) throwEmber(P, P.ends[a * 4], P.ends[a * 4 + 1], -1);\n    if (Math.random() \u003c rate * dt) throwEmber(P, P.ends[a * 4 + 2], P.ends[a * 4 + 3], 1);\n  }\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] \u003c= 0) continue;\n    P.elife[i] -= dt;\n    P.evy[i] += 70 * dt;\n    P.ex[i] += P.evx[i] * dt;\n    P.ey[i] += P.evy[i] * dt;\n    if (P.ey[i] >= BOX - 0.5 && P.ex[i] > 3 && P.ex[i] \u003c W - 3) {\n      if (P.ebounce[i]) P.elife[i] = 0;\n      else {\n        P.ey[i] = BOX - 0.5;\n        P.evy[i] *= -0.3;\n        P.evx[i] *= 0.5;\n        P.ebounce[i] = 1;\n      }\n    }\n    if (P.ex[i] \u003c 0 || P.ex[i] >= W || P.ey[i] >= H) P.elife[i] = 0;\n  }\n}\n\n// Closest distance squared from every pixel near the segment, kept per pixel.\nfunction stampSegment(P, x0, y0, x1, y1, R, box) {\n  const dist = P.dist;\n  const minX = Math.max(0, Math.floor(Math.min(x0, x1) - R));\n  const maxX = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + R));\n  const minY = Math.max(0, Math.floor(Math.min(y0, y1) - R));\n  const maxY = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + R));\n  if (minX > maxX || minY > maxY) return;\n  if (minX \u003c box[0]) box[0] = minX;\n  if (maxX > box[1]) box[1] = maxX;\n  if (minY \u003c box[2]) box[2] = minY;\n  if (maxY > box[3]) box[3] = maxY;\n  const sx = x1 - x0;\n  const sy = y1 - y0;\n  const ll = sx * sx + sy * sy || 1e-6;\n  for (let py = minY; py \u003c= maxY; py++) {\n    const cy = py + 0.5 - y0;\n    for (let px = minX; px \u003c= maxX; px++) {\n      const cx = px + 0.5 - x0;\n      let u = (cx * sx + cy * sy) / ll;\n      if (u \u003c 0) u = 0;\n      else if (u > 1) u = 1;\n      const ex = cx - u * sx;\n      const ey = cy - u * sy;\n      const d = ex * ex + ey * ey;\n      const i = py * W + px;\n      if (d \u003c dist[i]) dist[i] = d;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const core = P.core;\n  const glow = P.glow;\n  const warm = P.warm;\n  const trail = P.trail;\n  const dist = P.dist;\n  const power = P.power;\n  const air = P.air;\n  core.fill(0);\n  glow.fill(0);\n  warm.fill(0);\n  air.fill(0);\n\n  // The hum: one beat bright, the rest of the cycle dimmer.\n  const beat = Math.pow(Math.abs(Math.sin(Math.PI * HUM * P.t)), 6);\n  const box = [W, -1, H, -1];\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] === 0) continue;\n    const live = P.alive[a] === 1;\n    const age = P.age[a];\n    const life = P.life[a];\n    let b = (0.62 + 0.13 * power) * (0.84 + 0.16 * Math.random()) * (0.82 + 0.18 * beat);\n    if (age \u003c 0.1) b *= 1 + 1.3 * (1 - age / 0.1);\n    if (!live) b *= life * life;\n    const lambda = 2.6 + 0.6 * power + (live ? 0 : (1 - life) * 3);\n    const sigma = (0.55 + 0.2 * power) * (live ? 1 : life * life + 0.05);\n    const R = Math.ceil(lambda * 3.4);\n    box[0] = W;\n    box[1] = -1;\n    box[2] = H;\n    box[3] = -1;\n    const o = a * PTS;\n    const n = P.pn[a];\n    for (let i = 0; i + 1 \u003c n; i++) stampSegment(P, P.px[o + i], P.py[o + i], P.px[o + i + 1], P.py[o + i + 1], R, box);\n    // The air: each grid point's distance to the nearest segment.\n    const reachAir = 7 + 1.5 * power;\n    for (let gy = 0; gy \u003c GH; gy++) {\n      const y = gy * CELL;\n      for (let gx = 0; gx \u003c GW; gx++) {\n        const x = gx * CELL;\n        let best = 1e9;\n        for (let i = 0; i + 1 \u003c n; i++) {\n          const x0 = P.px[o + i];\n          const y0 = P.py[o + i];\n          const sx = P.px[o + i + 1] - x0;\n          const sy = P.py[o + i + 1] - y0;\n          const cx = x - x0;\n          const cy = y - y0;\n          let u = (cx * sx + cy * sy) / (sx * sx + sy * sy || 1e-6);\n          if (u \u003c 0) u = 0;\n          else if (u > 1) u = 1;\n          const ex = cx - u * sx;\n          const ey = cy - u * sy;\n          const d = ex * ex + ey * ey;\n          if (d \u003c best) best = d;\n        }\n        // Near the arc the air glows; further off, the room is only tinted.\n        const d = Math.sqrt(best);\n        air[gy * GW + gx] += b * (0.3 * Math.exp(-d / reachAir) + 0.07 * Math.exp(-d / 26));\n      }\n    }\n    if (box[1] \u003c box[0]) continue;\n    const rr = R * R;\n    for (let py = box[2]; py \u003c= box[3]; py++) {\n      for (let px = box[0]; px \u003c= box[1]; px++) {\n        const i = py * W + px;\n        const d = dist[i];\n        if (d >= 1e8) continue;\n        dist[i] = 1e9;\n        if (d > rr) continue;\n        const c = d \u003c 8 * sigma ? b * Math.exp(-d / sigma) : 0;\n        const g = b * 0.7 * Math.exp(-Math.sqrt(d) / lambda);\n        if (c > core[i]) core[i] = c;\n        if (g > glow[i]) glow[i] = g;\n      }\n    }\n    if (!live) continue;\n    // The roots burn white on the rod.\n    for (let e = 0; e \u003c 2; e++) {\n      const x = P.ends[a * 4 + e * 2];\n      const y = P.ends[a * 4 + e * 2 + 1];\n      for (let py = Math.floor(y) - 3; py \u003c= Math.floor(y) + 3; py++) {\n        if (py \u003c 0 || py >= H) continue;\n        for (let px = Math.floor(x) - 3; px \u003c= Math.floor(x) + 3; px++) {\n          if (px \u003c 0 || px >= W) continue;\n          const dx = px + 0.5 - x;\n          const dy = py + 0.5 - y;\n          const w = b * 1.1 * Math.exp(-(dx * dx + dy * dy) / 1.4);\n          const i = py * W + px;\n          if (w > warm[i]) warm[i] = w;\n        }\n      }\n    }\n  }\n\n  // The trail: a camera left open keeps the bright beats and lets the rest go.\n  const tau = 0.035 * Math.exp(4.6 * P.exposure);\n  const keep = Math.exp(-P.dt / tau);\n  const lay = 0.2 + 0.8 * beat;\n  for (let i = 0; i \u003c N; i++) {\n    const v = Math.max(core[i] * 0.7, glow[i] * 1.3) * lay;\n    const t = trail[i] * keep;\n    trail[i] = v > t ? v : t;\n  }\n  // The glowing air is kept the same way, as a haze through the V.\n  const airTrail = P.airTrail;\n  for (let q = 0; q \u003c GW * GH; q++) {\n    const t = airTrail[q] * keep;\n    airTrail[q] = air[q] > t ? air[q] : t;\n    const h = airTrail[q] * 0.8;\n    if (h > air[q]) air[q] = h;\n  }\n\n  const col = P.col;\n  const hue = P.hue + 0.74;\n  hsv(hue, 0.78, 1, col, 0);\n  hsv(hue, 0.22, 1, col, 3);\n  hsv(hue + 0.02, 0.6, 0.9, col, 6);\n  const amb = 0.62 + 0.3 * P.flash;\n  // Steel and glaze take on the colour of the light that falls on them.\n  const tr = 0.45 + 0.55 * (col[0] / 255);\n  const tg = 0.45 + 0.55 * (col[1] / 255);\n  const tb = 0.45 + 0.55 * (col[2] / 255);\n  const st = P.stat;\n  const out = P.out;\n  for (let y = 0; y \u003c H; y++) {\n    const fy = (y + 0.5) / CELL;\n    const gy = Math.min(GH - 2, Math.floor(fy));\n    const vy = fy - gy;\n    for (let x = 0; x \u003c W; x++) {\n      const fx = (x + 0.5) / CELL;\n      const gx = Math.min(GW - 2, Math.floor(fx));\n      const vx = fx - gx;\n      const q = gy * GW + gx;\n      const top = air[q] + (air[q + 1] - air[q]) * vx;\n      const bottom = air[q + GW] + (air[q + GW + 1] - air[q + GW]) * vx;\n      const ai = top + (bottom - top) * vy;\n      const i = y * W + x;\n      const o = i * 3;\n      const g = Math.max(glow[i], trail[i] * 0.85);\n      const c = core[i];\n      const w = warm[i];\n      const lit = 1.6 * g + 2.2 * ai + 1.2 * w;\n      out[o] = st[o] * (amb + lit * tr) + c * col[3] + glow[i] * col[0] + (g - glow[i]) * col[6] + ai * col[0] + w * 255;\n      out[o + 1] = st[o + 1] * (amb + lit * tg) + c * col[4] + glow[i] * col[1] + (g - glow[i]) * col[7] + ai * col[1] + w * 196;\n      out[o + 2] = st[o + 2] * (amb + lit * tb) + c * col[5] + glow[i] * col[2] + (g - glow[i]) * col[8] + ai * col[2] + w * 130;\n    }\n  }\n  // The pilot lamp on the box, and the sparks: white-hot, cooling to red.\n  for (let py = BOX + 4; py \u003c= BOX + 5; py++) {\n    for (let px = 7; px \u003c= 8; px++) {\n      const o = (py * W + px) * 3;\n      out[o] = 236;\n      out[o + 1] = 120 + 40 * P.flash;\n      out[o + 2] = 36;\n    }\n  }\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] \u003c= 0) continue;\n    const u = P.elife[i] / P.emax[i];\n    const px = Math.floor(P.ex[i]);\n    const py = Math.floor(P.ey[i]);\n    if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n    const o = (py * W + px) * 3;\n    const v = 0.35 + 0.65 * u;\n    out[o] += 255 * v;\n    out[o + 1] += (60 + 170 * u * u) * v;\n    out[o + 2] += 90 * u * u * u * v;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[o]), Math.min(255, out[o + 1]), Math.min(255, out[o + 2]));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Power=0.3..3, Spread=0..1, Exposure=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the gas the arc burns in, starting from the violet of an arc in air."},{"name":"Power","min":0.3,"max":3,"about":"How hard the transformer drives the arc: weak, it climbs slowly and breaks partway up; strong, it races to the tips, writhes, throws sparks and strikes again before the last one is gone."},{"name":"Spread","min":0,"max":1,"about":"How far apart the rod tips stand, from a narrow V to horns that flare out to the edges of the panel. In a wide V the arc stretches sooner, so the next one strikes sooner and a weak arc breaks lower down."},{"name":"Exposure","min":0,"max":1,"about":"How long the panel keeps each arc after it has moved on, like a camera left open; turned up, the arcs it leaves stack into the rungs of a ladder."}],"start":[0,2,0,0.06],"measures":{"motion":0.8103,"detail":0.0208,"edges":0.2771,"complexity":0.702,"coverage":0.2778,"colour":0.0843,"drift":0.105},"knobResponse":[0.0479,0.0767,0.0696,0.0781]},{"slug":"jacquard","title":"Jacquard Loom","family":"textile","round":4,"note":"구멍 뚫린 카드가 한 장씩 내려와 날실을 들어 올리면 북이 씨실을 끌고 지나가고, 바디가 그 씨실을 쳐 넣어요. 아래로 짜여 내려가는 천에 카드 구멍이 적어 둔 다이아몬드가 서요.","idea":"A punched-card loom weaving down the panel: each card lifts its warp ends, the shuttle flies the weft through the shed, the reed beats it in, and the cloth below carries the figure the holes spelled.","buttons":"K1 tap turns the deck over, so the next picks weave the back of the cloth, figure and ground traded.","code":"// ===== Patternflow pattern =====\n// Title:   Jacquard Loom\n// Family:  textile\n// Idea:    A punched-card loom weaving down the panel: each card lifts its warp ends, the shuttle flies the weft through the shed, the reed beats it in, and the cloth below carries the figure the holes spelled.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Joseph Marie Jacquard's punched-card loom (1804)\n// Round:   4\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..5, Card=1..4, Stripes=0..1\n//\n// Knob 1: Hue. Turns every thread's colour together, starting from an indigo warp over a weft that runs gold, orange, rose, violet, turquoise and green.\n// Knob 2: Speed. Picks a second, from half a pick, where the shuttle drifts across, to five, where it is a streak.\n// Knob 3: Card. The deck laced on the loom: nested diamonds, eight-pointed stars, chevrons, then a houndstooth that no card draws, only a twill over four ends and four picks of each of two colours. The cards change at once; the cloth changes from the fell down.\n// Knob 4: Stripes. How often the shuttle changes colour: broad bands every ten picks at the bottom of the range, a new colour every pick at the top. The houndstooth keeps its four indigo and four cream picks.\n// Buttons: K1 tap turns the deck over, so the next picks weave the back of the cloth, figure and ground traded.\n\nconst W = 64;\nconst H = 128;\n// Thirty-two warp ends, two LEDs each. A pick of weft is two rows.\nconst ENDS = 32;\n// Five punched cards of four rows above the griffe bar.\nconst CARD = 4;\nconst CARDS = 5;\nconst BAR = CARD * CARDS;\n// The heddle eyes: a lifted end's eye rides RISE rows above a lowered one's.\nconst EYE = 30;\nconst RISE = 3;\n// The reed rests at REED and beats each pick down against the fell.\nconst REED = 34;\nconst FELL = 48;\n// Picks kept: the cloth shows 41 of them, the cards one more.\nconst KEEP = 44;\n// The weft's colours go up the row and back, so bands grade into each other.\nconst SEQ = [0, 1, 2, 3, 4, 5, 4, 3, 2, 1];\nconst INDIGO = 6;\nconst CREAM = 7;\n\n// Times within one pick, 0..1: the cards drop and the shed opens, the\n// shuttle flies, the reed beats, the cloth is taken up.\nconst SHED = 0.12;\nconst FLOWN = 0.55;\nconst BEAT = 0.75;\nconst BACK = 0.95;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Where the figure is, on the pattern's grid of ends and picks.\nfunction figure(design, w, j) {\n  if (design === 0) {\n    // Nested diamonds, four ends to a ring, one diamond the width of the cloth.\n    const x = Math.abs(w - 15.5);\n    const y = Math.abs((j % 32) - 15.5);\n    return Math.floor((x + y) / 4) % 2 === 0;\n  }\n  if (design === 1) {\n    // An eight-pointed star the width of the cloth, a square and a diamond\n    // laid on each other, with a diamond cut from its middle.\n    const dx = Math.abs(w - 15.5);\n    const dy = Math.abs((j % 32) - 15.5);\n    return ((Math.max(dx, dy) \u003c 8 || dx + dy \u003c 14) && dx + dy > 4) || dx + dy > 25;\n  }\n  // Chevrons six picks deep.\n  const tx = w % 16;\n  const z = tx \u003c 8 ? tx : 15 - tx;\n  return (j + z) % 12 \u003c 6;\n}\n\n// Is end w over the weft on pick j? The figure is a warp-faced satin and\n// the ground a weft-faced one, each tied down once in eight.\nfunction liftOf(design, flip, w, j) {\n  let up;\n  if (design === 3) up = (w + j) % 4 \u003c 2;\n  else if (figure(design, w, j)) up = (j + 3 * w) % 8 !== 0;\n  else up = (j + 5 * w) % 8 === 0;\n  return flip ? !up : up;\n}\n\n// Houndstooth is four ends and four picks of each colour, and only reads\n// when the light warp and the light weft are the same cream.\nfunction warpOf(design, w) {\n  if (design === 3) return Math.floor(w / 4) % 2 === 0 ? INDIGO : CREAM;\n  // Cream selvedges.\n  return w === 0 || w === ENDS - 1 ? CREAM : INDIGO;\n}\n\nfunction weftOf(design, j, band) {\n  if (design === 3) return Math.floor(j / 4) % 2 === 0 ? INDIGO : CREAM;\n  return SEQ[Math.floor(j / band) % SEQ.length];\n}\n\nexport function setup(params) {\n  params.lift = new Uint8Array(KEEP * ENDS);\n  params.weft = new Uint8Array(KEEP);\n  params.deck = new Uint8Array(KEEP);\n  params.pal = new Float32Array(8 * 3);\n  params.pick = 0;\n  params.phase = 0;\n  params.started = false;\n  params.flip = false;\n  params.design = 0;\n  params.band = 9;\n  params.speed = 2;\n  params.hue = 0;\n}\n\n// The card for pick q comes to the needles: its holes become the shed.\nfunction startPick(params, q) {\n  const slot = q % KEEP;\n  for (let w = 0; w \u003c ENDS; w++) params.lift[slot * ENDS + w] = liftOf(params.design, params.flip, w, q) ? 1 : 0;\n  params.weft[slot] = weftOf(params.design, q, params.band);\n  params.deck[slot] = params.design;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.speed = Math.max(0.1, k[1]);\n  params.design = Math.max(0, Math.min(3, Math.round(k[2]) - 1));\n  params.band = Math.max(1, Math.round(1 + 9 * (1 - Math.max(0, Math.min(1, k[3])))));\n  if (!params.started) {\n    params.started = true;\n    // A loom that has been weaving a while: the cloth already reaches the floor.\n    for (let q = 0; q \u003c= KEEP; q++) startPick(params, q);\n    params.pick = KEEP;\n    params.phase = 0.3;\n  }\n  if (input.btnPressed && input.btnPressed[0]) params.flip = !params.flip;\n  params.phase += dt * params.speed;\n  while (params.phase >= 1) {\n    params.phase -= 1;\n    params.pick++;\n    startPick(params, params.pick);\n  }\n}\n\n// Is end w up on pick q, for a pick the loom has read or is about to?\nfunction cardLift(params, q, w) {\n  if (q \u003c= params.pick) return params.lift[(q % KEEP) * ENDS + w] === 1;\n  return liftOf(params.design, params.flip, w, q);\n}\n\nexport function draw(display, params, time) {\n  const pal = params.pal;\n  const hue = params.hue;\n  // The weft's gold, orange, rose, violet, turquoise and green, then the warp's indigo and cream.\n  hsvInto(pal, 0, hue + 0.12, 0.95, 1);\n  hsvInto(pal, 3, hue + 0.06, 0.95, 1);\n  hsvInto(pal, 6, hue + 0.96, 0.85, 1);\n  hsvInto(pal, 9, hue + 0.8, 0.75, 1);\n  hsvInto(pal, 12, hue + 0.48, 0.95, 1);\n  hsvInto(pal, 15, hue + 0.3, 0.9, 0.95);\n  // The warp is lit brighter and paler where the hue turns it yellow, since dim yellow reads as olive.\n  const warm = Math.pow(0.5 + 0.5 * Math.cos(2 * Math.PI * (hue + 0.63 - 0.14)), 3);\n  hsvInto(pal, 18, hue + 0.63, 0.9 - 0.2 * warm, 0.8 + 0.2 * warm);\n  hsvInto(pal, 21, hue + 0.11, 0.16, 0.95);\n\n  const lift = params.lift;\n  const weft = params.weft;\n  const deck = params.deck;\n  const pick = params.pick;\n  const phase = params.phase;\n  const set = (x, y, r, g, b) => display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n\n  // The punched cards, dropping one card a pick onto the needles.\n  const drop = Math.round(smooth(0, SHED, phase) * CARD);\n  for (let y = 0; y \u003c BAR; y++) for (let x = 0; x \u003c W; x++) set(x, y, 10, 9, 8);\n  for (let c = -1; c \u003c= CARDS; c++) {\n    const q = pick + c;\n    const top = BAR - CARD * (c + 1) - (CARD - drop);\n    for (let r = 0; r \u003c CARD; r++) {\n      const y = top + r;\n      if (y \u003c 0 || y >= BAR) continue;\n      for (let x = 0; x \u003c W; x++) {\n        if (r === 3) {\n          // The lacing between cards.\n          if (x === 4 || x === 59) set(x, y, 120, 100, 70);\n          continue;\n        }\n        const shade = r === 0 ? 0.8 : 1;\n        if (r > 0 && x % 2 === 0 && cardLift(params, q, x >> 1)) set(x, y, 12, 10, 8);\n        else set(x, y, 228 * shade, 204 * shade, 156 * shade);\n      }\n    }\n  }\n  // The griffe bar the hooks hang from.\n  for (let x = 0; x \u003c W; x++) {\n    set(x, BAR, 150, 152, 162);\n    set(x, BAR + 1, 64, 66, 76);\n  }\n\n  // The shed: cords down to the heddle eyes, then each end on to the fell.\n  const shedPick = phase \u003c SHED ? pick - 1 : pick;\n  const shedSlot = (shedPick % KEEP) * ENDS;\n  const woven = phase >= BEAT ? pick : pick - 1;\n  const take = phase >= BEAT ? (phase \u003c 0.82 ? 0 : phase \u003c 0.88 ? 1 : 2) : 2;\n  const clothTop = FELL - 2 + take;\n  for (let y = BAR + 2; y \u003c clothTop; y++) for (let x = 0; x \u003c W; x++) set(x, y, 8, 8, 10);\n  for (let w = 0; w \u003c ENDS; w++) {\n    const up = lift[shedSlot + w] === 1;\n    const eye = up ? EYE - RISE : EYE;\n    const c = warpOf(deck[shedPick % KEEP], w) * 3;\n    const x = 2 * w;\n    for (let y = BAR + 2; y \u003c clothTop; y++) {\n      if (y \u003c eye) {\n        const v = up ? 92 : 52;\n        set(x, y, v, v, v + 6);\n      } else if (y === eye) set(x, y, 214, 214, 224);\n      else {\n        const v = up ? 1 : 0.5;\n        set(x, y, pal[c] * v, pal[c + 1] * v, pal[c + 2] * v);\n      }\n    }\n  }\n\n  // The reed swings in after the shuttle and back.\n  let swing = 0;\n  if (phase >= FLOWN && phase \u003c BEAT) {\n    const u = (phase - FLOWN) / (BEAT - FLOWN);\n    swing = u * u;\n  } else if (phase >= BEAT && phase \u003c BACK) swing = 1 - smooth(BEAT, BACK, phase);\n  const reedY = Math.round(REED + (FELL - 4 - REED) * swing);\n  const pickY = phase \u003c BEAT ? reedY + 2 : FELL - 2;\n\n  // The weft the shuttle has laid so far, under every lifted end.\n  if (phase >= SHED && phase \u003c BEAT) {\n    const dir = pick % 2 === 0 ? 1 : -1;\n    const u = smooth(SHED, FLOWN, phase);\n    const sx = dir > 0 ? -6 + 76 * u : 69 - 76 * u;\n    const from = dir > 0 ? 0 : Math.max(0, Math.round(sx));\n    const to = dir > 0 ? Math.min(W - 1, Math.round(sx)) : W - 1;\n    const wc = weft[pick % KEEP] * 3;\n    for (let x = from; x \u003c= to; x++) {\n      if (x % 2 === 0 && lift[(pick % KEEP) * ENDS + (x >> 1)] === 1) continue;\n      for (let dy = 0; dy \u003c 2; dy++) {\n        const v = dy === 0 ? 1 : 0.7;\n        set(x, pickY + dy, pal[wc] * v, pal[wc + 1] * v, pal[wc + 2] * v);\n      }\n    }\n    if (phase \u003c FLOWN) {\n      // The shuttle: a wooden boat with steel tips, the pirn showing in its middle.\n      const cx = Math.round(sx);\n      for (let dx = -4; dx \u003c= 4; dx++) {\n        const x = cx + dx;\n        if (x \u003c 0 || x >= W) continue;\n        const ax = Math.abs(dx);\n        if (ax \u003c= 3) set(x, pickY - 1, 205, 142, 74);\n        if (ax === 4) set(x, pickY, 200, 200, 212);\n        else if (ax \u003c= 1) set(x, pickY, pal[wc], pal[wc + 1], pal[wc + 2]);\n        else set(x, pickY, 176, 116, 58);\n        if (ax \u003c= 3) set(x, pickY + 1, 120, 76, 38);\n      }\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    set(x, reedY, 196, 146, 84);\n    const d = x % 2 === 1 ? 176 : 70;\n    set(x, reedY + 1, d, d, d + 10);\n  }\n\n  // The cloth, newest pick at the fell. Each float is lit on one side and\n  // dips where it goes under its neighbour.\n  for (let y = clothTop; y \u003c H; y++) {\n    const age = (y - clothTop) >> 1;\n    const dy = (y - clothTop) & 1;\n    const p = woven - age;\n    const slot = (p % KEEP) * ENDS;\n    const above = p \u003c woven ? ((p + 1) % KEEP) * ENDS : -1;\n    const below = ((p - 1 + KEEP) % KEEP) * ENDS;\n    const wc = weft[p % KEEP] * 3;\n    const d = deck[p % KEEP];\n    for (let x = 0; x \u003c W; x++) {\n      const w = x >> 1;\n      const dx = x & 1;\n      let v;\n      let c;\n      if (lift[slot + w] === 1) {\n        c = warpOf(d, w) * 3;\n        v = dx === 0 ? 1 : 0.72;\n        const next = dy === 0 ? above : below;\n        if (next >= 0 && lift[next + w] === 0) v *= 0.78;\n      } else {\n        c = wc;\n        v = dy === 0 ? 1 : 0.7;\n        const n = dx === 0 ? w - 1 : w + 1;\n        if (n >= 0 && n \u003c ENDS && lift[slot + n] === 1) v *= 0.78;\n      }\n      set(x, y, pal[c] * v, pal[c + 1] * v, pal[c + 2] * v);\n    }\n  }\n}\n","layer":{"id":"layer-jacquard","type":"code","name":"jacquard","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Jacquard Loom\n// Family:  textile\n// Idea:    A punched-card loom weaving down the panel: each card lifts its warp ends, the shuttle flies the weft through the shed, the reed beats it in, and the cloth below carries the figure the holes spelled.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Joseph Marie Jacquard's punched-card loom (1804)\n// Round:   4\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..5, Card=1..4, Stripes=0..1\n//\n// Knob 1: Hue. Turns every thread's colour together, starting from an indigo warp over a weft that runs gold, orange, rose, violet, turquoise and green.\n// Knob 2: Speed. Picks a second, from half a pick, where the shuttle drifts across, to five, where it is a streak.\n// Knob 3: Card. The deck laced on the loom: nested diamonds, eight-pointed stars, chevrons, then a houndstooth that no card draws, only a twill over four ends and four picks of each of two colours. The cards change at once; the cloth changes from the fell down.\n// Knob 4: Stripes. How often the shuttle changes colour: broad bands every ten picks at the bottom of the range, a new colour every pick at the top. The houndstooth keeps its four indigo and four cream picks.\n// Buttons: K1 tap turns the deck over, so the next picks weave the back of the cloth, figure and ground traded.\n\nconst W = 64;\nconst H = 128;\n// Thirty-two warp ends, two LEDs each. A pick of weft is two rows.\nconst ENDS = 32;\n// Five punched cards of four rows above the griffe bar.\nconst CARD = 4;\nconst CARDS = 5;\nconst BAR = CARD * CARDS;\n// The heddle eyes: a lifted end's eye rides RISE rows above a lowered one's.\nconst EYE = 30;\nconst RISE = 3;\n// The reed rests at REED and beats each pick down against the fell.\nconst REED = 34;\nconst FELL = 48;\n// Picks kept: the cloth shows 41 of them, the cards one more.\nconst KEEP = 44;\n// The weft's colours go up the row and back, so bands grade into each other.\nconst SEQ = [0, 1, 2, 3, 4, 5, 4, 3, 2, 1];\nconst INDIGO = 6;\nconst CREAM = 7;\n\n// Times within one pick, 0..1: the cards drop and the shed opens, the\n// shuttle flies, the reed beats, the cloth is taken up.\nconst SHED = 0.12;\nconst FLOWN = 0.55;\nconst BEAT = 0.75;\nconst BACK = 0.95;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Where the figure is, on the pattern's grid of ends and picks.\nfunction figure(design, w, j) {\n  if (design === 0) {\n    // Nested diamonds, four ends to a ring, one diamond the width of the cloth.\n    const x = Math.abs(w - 15.5);\n    const y = Math.abs((j % 32) - 15.5);\n    return Math.floor((x + y) / 4) % 2 === 0;\n  }\n  if (design === 1) {\n    // An eight-pointed star the width of the cloth, a square and a diamond\n    // laid on each other, with a diamond cut from its middle.\n    const dx = Math.abs(w - 15.5);\n    const dy = Math.abs((j % 32) - 15.5);\n    return ((Math.max(dx, dy) \u003c 8 || dx + dy \u003c 14) && dx + dy > 4) || dx + dy > 25;\n  }\n  // Chevrons six picks deep.\n  const tx = w % 16;\n  const z = tx \u003c 8 ? tx : 15 - tx;\n  return (j + z) % 12 \u003c 6;\n}\n\n// Is end w over the weft on pick j? The figure is a warp-faced satin and\n// the ground a weft-faced one, each tied down once in eight.\nfunction liftOf(design, flip, w, j) {\n  let up;\n  if (design === 3) up = (w + j) % 4 \u003c 2;\n  else if (figure(design, w, j)) up = (j + 3 * w) % 8 !== 0;\n  else up = (j + 5 * w) % 8 === 0;\n  return flip ? !up : up;\n}\n\n// Houndstooth is four ends and four picks of each colour, and only reads\n// when the light warp and the light weft are the same cream.\nfunction warpOf(design, w) {\n  if (design === 3) return Math.floor(w / 4) % 2 === 0 ? INDIGO : CREAM;\n  // Cream selvedges.\n  return w === 0 || w === ENDS - 1 ? CREAM : INDIGO;\n}\n\nfunction weftOf(design, j, band) {\n  if (design === 3) return Math.floor(j / 4) % 2 === 0 ? INDIGO : CREAM;\n  return SEQ[Math.floor(j / band) % SEQ.length];\n}\n\nexport function setup(params) {\n  params.lift = new Uint8Array(KEEP * ENDS);\n  params.weft = new Uint8Array(KEEP);\n  params.deck = new Uint8Array(KEEP);\n  params.pal = new Float32Array(8 * 3);\n  params.pick = 0;\n  params.phase = 0;\n  params.started = false;\n  params.flip = false;\n  params.design = 0;\n  params.band = 9;\n  params.speed = 2;\n  params.hue = 0;\n}\n\n// The card for pick q comes to the needles: its holes become the shed.\nfunction startPick(params, q) {\n  const slot = q % KEEP;\n  for (let w = 0; w \u003c ENDS; w++) params.lift[slot * ENDS + w] = liftOf(params.design, params.flip, w, q) ? 1 : 0;\n  params.weft[slot] = weftOf(params.design, q, params.band);\n  params.deck[slot] = params.design;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.speed = Math.max(0.1, k[1]);\n  params.design = Math.max(0, Math.min(3, Math.round(k[2]) - 1));\n  params.band = Math.max(1, Math.round(1 + 9 * (1 - Math.max(0, Math.min(1, k[3])))));\n  if (!params.started) {\n    params.started = true;\n    // A loom that has been weaving a while: the cloth already reaches the floor.\n    for (let q = 0; q \u003c= KEEP; q++) startPick(params, q);\n    params.pick = KEEP;\n    params.phase = 0.3;\n  }\n  if (input.btnPressed && input.btnPressed[0]) params.flip = !params.flip;\n  params.phase += dt * params.speed;\n  while (params.phase >= 1) {\n    params.phase -= 1;\n    params.pick++;\n    startPick(params, params.pick);\n  }\n}\n\n// Is end w up on pick q, for a pick the loom has read or is about to?\nfunction cardLift(params, q, w) {\n  if (q \u003c= params.pick) return params.lift[(q % KEEP) * ENDS + w] === 1;\n  return liftOf(params.design, params.flip, w, q);\n}\n\nexport function draw(display, params, time) {\n  const pal = params.pal;\n  const hue = params.hue;\n  // The weft's gold, orange, rose, violet, turquoise and green, then the warp's indigo and cream.\n  hsvInto(pal, 0, hue + 0.12, 0.95, 1);\n  hsvInto(pal, 3, hue + 0.06, 0.95, 1);\n  hsvInto(pal, 6, hue + 0.96, 0.85, 1);\n  hsvInto(pal, 9, hue + 0.8, 0.75, 1);\n  hsvInto(pal, 12, hue + 0.48, 0.95, 1);\n  hsvInto(pal, 15, hue + 0.3, 0.9, 0.95);\n  // The warp is lit brighter and paler where the hue turns it yellow, since dim yellow reads as olive.\n  const warm = Math.pow(0.5 + 0.5 * Math.cos(2 * Math.PI * (hue + 0.63 - 0.14)), 3);\n  hsvInto(pal, 18, hue + 0.63, 0.9 - 0.2 * warm, 0.8 + 0.2 * warm);\n  hsvInto(pal, 21, hue + 0.11, 0.16, 0.95);\n\n  const lift = params.lift;\n  const weft = params.weft;\n  const deck = params.deck;\n  const pick = params.pick;\n  const phase = params.phase;\n  const set = (x, y, r, g, b) => display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n\n  // The punched cards, dropping one card a pick onto the needles.\n  const drop = Math.round(smooth(0, SHED, phase) * CARD);\n  for (let y = 0; y \u003c BAR; y++) for (let x = 0; x \u003c W; x++) set(x, y, 10, 9, 8);\n  for (let c = -1; c \u003c= CARDS; c++) {\n    const q = pick + c;\n    const top = BAR - CARD * (c + 1) - (CARD - drop);\n    for (let r = 0; r \u003c CARD; r++) {\n      const y = top + r;\n      if (y \u003c 0 || y >= BAR) continue;\n      for (let x = 0; x \u003c W; x++) {\n        if (r === 3) {\n          // The lacing between cards.\n          if (x === 4 || x === 59) set(x, y, 120, 100, 70);\n          continue;\n        }\n        const shade = r === 0 ? 0.8 : 1;\n        if (r > 0 && x % 2 === 0 && cardLift(params, q, x >> 1)) set(x, y, 12, 10, 8);\n        else set(x, y, 228 * shade, 204 * shade, 156 * shade);\n      }\n    }\n  }\n  // The griffe bar the hooks hang from.\n  for (let x = 0; x \u003c W; x++) {\n    set(x, BAR, 150, 152, 162);\n    set(x, BAR + 1, 64, 66, 76);\n  }\n\n  // The shed: cords down to the heddle eyes, then each end on to the fell.\n  const shedPick = phase \u003c SHED ? pick - 1 : pick;\n  const shedSlot = (shedPick % KEEP) * ENDS;\n  const woven = phase >= BEAT ? pick : pick - 1;\n  const take = phase >= BEAT ? (phase \u003c 0.82 ? 0 : phase \u003c 0.88 ? 1 : 2) : 2;\n  const clothTop = FELL - 2 + take;\n  for (let y = BAR + 2; y \u003c clothTop; y++) for (let x = 0; x \u003c W; x++) set(x, y, 8, 8, 10);\n  for (let w = 0; w \u003c ENDS; w++) {\n    const up = lift[shedSlot + w] === 1;\n    const eye = up ? EYE - RISE : EYE;\n    const c = warpOf(deck[shedPick % KEEP], w) * 3;\n    const x = 2 * w;\n    for (let y = BAR + 2; y \u003c clothTop; y++) {\n      if (y \u003c eye) {\n        const v = up ? 92 : 52;\n        set(x, y, v, v, v + 6);\n      } else if (y === eye) set(x, y, 214, 214, 224);\n      else {\n        const v = up ? 1 : 0.5;\n        set(x, y, pal[c] * v, pal[c + 1] * v, pal[c + 2] * v);\n      }\n    }\n  }\n\n  // The reed swings in after the shuttle and back.\n  let swing = 0;\n  if (phase >= FLOWN && phase \u003c BEAT) {\n    const u = (phase - FLOWN) / (BEAT - FLOWN);\n    swing = u * u;\n  } else if (phase >= BEAT && phase \u003c BACK) swing = 1 - smooth(BEAT, BACK, phase);\n  const reedY = Math.round(REED + (FELL - 4 - REED) * swing);\n  const pickY = phase \u003c BEAT ? reedY + 2 : FELL - 2;\n\n  // The weft the shuttle has laid so far, under every lifted end.\n  if (phase >= SHED && phase \u003c BEAT) {\n    const dir = pick % 2 === 0 ? 1 : -1;\n    const u = smooth(SHED, FLOWN, phase);\n    const sx = dir > 0 ? -6 + 76 * u : 69 - 76 * u;\n    const from = dir > 0 ? 0 : Math.max(0, Math.round(sx));\n    const to = dir > 0 ? Math.min(W - 1, Math.round(sx)) : W - 1;\n    const wc = weft[pick % KEEP] * 3;\n    for (let x = from; x \u003c= to; x++) {\n      if (x % 2 === 0 && lift[(pick % KEEP) * ENDS + (x >> 1)] === 1) continue;\n      for (let dy = 0; dy \u003c 2; dy++) {\n        const v = dy === 0 ? 1 : 0.7;\n        set(x, pickY + dy, pal[wc] * v, pal[wc + 1] * v, pal[wc + 2] * v);\n      }\n    }\n    if (phase \u003c FLOWN) {\n      // The shuttle: a wooden boat with steel tips, the pirn showing in its middle.\n      const cx = Math.round(sx);\n      for (let dx = -4; dx \u003c= 4; dx++) {\n        const x = cx + dx;\n        if (x \u003c 0 || x >= W) continue;\n        const ax = Math.abs(dx);\n        if (ax \u003c= 3) set(x, pickY - 1, 205, 142, 74);\n        if (ax === 4) set(x, pickY, 200, 200, 212);\n        else if (ax \u003c= 1) set(x, pickY, pal[wc], pal[wc + 1], pal[wc + 2]);\n        else set(x, pickY, 176, 116, 58);\n        if (ax \u003c= 3) set(x, pickY + 1, 120, 76, 38);\n      }\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    set(x, reedY, 196, 146, 84);\n    const d = x % 2 === 1 ? 176 : 70;\n    set(x, reedY + 1, d, d, d + 10);\n  }\n\n  // The cloth, newest pick at the fell. Each float is lit on one side and\n  // dips where it goes under its neighbour.\n  for (let y = clothTop; y \u003c H; y++) {\n    const age = (y - clothTop) >> 1;\n    const dy = (y - clothTop) & 1;\n    const p = woven - age;\n    const slot = (p % KEEP) * ENDS;\n    const above = p \u003c woven ? ((p + 1) % KEEP) * ENDS : -1;\n    const below = ((p - 1 + KEEP) % KEEP) * ENDS;\n    const wc = weft[p % KEEP] * 3;\n    const d = deck[p % KEEP];\n    for (let x = 0; x \u003c W; x++) {\n      const w = x >> 1;\n      const dx = x & 1;\n      let v;\n      let c;\n      if (lift[slot + w] === 1) {\n        c = warpOf(d, w) * 3;\n        v = dx === 0 ? 1 : 0.72;\n        const next = dy === 0 ? above : below;\n        if (next >= 0 && lift[next + w] === 0) v *= 0.78;\n      } else {\n        c = wc;\n        v = dy === 0 ? 1 : 0.7;\n        const n = dx === 0 ? w - 1 : w + 1;\n        if (n >= 0 && n \u003c ENDS && lift[slot + n] === 1) v *= 0.78;\n      }\n      set(x, y, pal[c] * v, pal[c + 1] * v, pal[c + 2] * v);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.5..5, Card=1..4, Stripes=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every thread's colour together, starting from an indigo warp over a weft that runs gold, orange, rose, violet, turquoise and green."},{"name":"Speed","min":0.5,"max":5,"about":"Picks a second, from half a pick, where the shuttle drifts across, to five, where it is a streak."},{"name":"Card","min":1,"max":4,"about":"The deck laced on the loom: nested diamonds, eight-pointed stars, chevrons, then a houndstooth that no card draws, only a twill over four ends and four picks of each of two colours. The cards change at once; the cloth changes from the fell down."},{"name":"Stripes","min":0,"max":1,"about":"How often the shuttle changes colour: broad bands every ten picks at the bottom of the range, a new colour every pick at the top. The houndstooth keeps its four indigo and four cream picks."}],"start":[0,2,1,0.06],"measures":{"motion":1.0063,"detail":0.2005,"edges":0.8201,"complexity":0.1835,"coverage":0.8529,"colour":0.5431,"drift":0.0411},"knobResponse":[0.3764,0.209,0.2197,0.1447]},{"slug":"jelly","title":"Jelly","family":"physics","round":2,"note":"젤리마다 질량 18개를 용수철과 안쪽 압력으로 묶은 고리예요. 키 큰 병에 떨어져 눌린 채 쌓여 출렁이다가, 하나씩 통 튀어 올라 다른 젤리 위로 굴러떨어져요.","idea":"Each jelly is a ring of eighteen masses held by springs and the pressure of what is inside, so dropped into the tall jar they squash, stack, wobble and roll off one another.","buttons":"K1 tap shakes the jar.","code":"// ===== Patternflow pattern =====\n// Title:   Jelly\n// Family:  physics\n// Idea:    Each jelly is a ring of eighteen masses held by springs and the pressure of what is inside, so dropped into the tall jar they squash, stack, wobble and roll off one another.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Gravity=-1..3, Softness=0..1, Count=4..12\n//\n// Knob 1: Hue. Turns the whole bag of sweets round the colour wheel; each jelly sits a golden step round from the last, so no two match.\n// Knob 2: Gravity. Heavy at 3, a slow float at 0, and below 0 the jar is upside down and they pile against the lid.\n// Knob 3: Softness. Firm gums at 0 that bounce and roll; at 1 water balloons that slump over each other.\n// Knob 4: Count. How many are in the jar; new ones fall in one after another, and every jelly shrinks to share the room.\n// Buttons: K1 tap shakes the jar.\n\nconst W = 64;\nconst H = 128;\nconst B = 12;\nconst M = 18;\nconst STEP = 1 / 90;\nconst ITER = 3;\n// The jellies together take about a third of the jar, whatever their number.\nconst FILL = 0.5;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.px = new Float32Array(B * M);\n  params.py = new Float32Array(B * M);\n  params.ox = new Float32Array(B * M);\n  params.oy = new Float32Array(B * M);\n  params.r = new Float32Array(B);\n  params.size = new Float32Array(B);\n  params.on = new Uint8Array(B);\n  params.inside = new Uint8Array(B);\n  params.cx = new Float32Array(B);\n  params.cy = new Float32Array(B);\n  params.x0 = new Float32Array(B);\n  params.x1 = new Float32Array(B);\n  params.y0 = new Float32Array(B);\n  params.y1 = new Float32Array(B);\n  params.col = new Float32Array(B * 3);\n  params.rim = new Float32Array(B * 3);\n  params.id = new Uint8Array(W * H);\n  params.dist = new Float32Array(W * H);\n  params.cross = new Float32Array(M + 2);\n  params.ringX = new Float32Array(M);\n  params.ringY = new Float32Array(M);\n  for (let k = 0; k \u003c M; k++) {\n    params.ringX[k] = Math.cos((k / M) * Math.PI * 2);\n    params.ringY[k] = Math.sin((k / M) * Math.PI * 2);\n  }\n  for (let b = 0; b \u003c B; b++) params.size[b] = 0.82 + Math.random() * 0.36;\n  params.count = 0;\n  params.hop = 0.6;\n  params.acc = 0;\n  params.t = 0;\n  params.warm = false;\n}\n\nfunction radiusFor(params, b, count) {\n  let sum = 0;\n  for (let i = 0; i \u003c count; i++) sum += params.size[i] * params.size[i];\n  return Math.sqrt((FILL * W * H) / (Math.PI * sum)) * params.size[b];\n}\n\nfunction place(params, b, x, y, r, vx, vy) {\n  for (let k = 0; k \u003c M; k++) {\n    const a = (k / M) * Math.PI * 2;\n    const i = b * M + k;\n    params.px[i] = x + Math.cos(a) * r;\n    params.py[i] = y + Math.sin(a) * r;\n    params.ox[i] = params.px[i] - vx * STEP;\n    params.oy[i] = params.py[i] - vy * STEP;\n  }\n  params.r[b] = r;\n  params.on[b] = 1;\n}\n\nfunction setCount(params, count, g, warm) {\n  let queue = 0;\n  for (let b = 0; b \u003c B; b++) {\n    if (b \u003c count && !params.on[b]) {\n      const r = radiusFor(params, b, count);\n      if (warm) {\n        // At the start they are already in the jar, in a loose stack to settle from.\n        const col = b % 2;\n        const row = Math.floor(b / 2);\n        place(params, b, 18 + col * 28 + (Math.random() - 0.5) * 4, H - 16 - row * 26, r * 0.9, 0, 0);\n        params.inside[b] = 1;\n      } else {\n        // A new one comes in from the side gravity points away from, already moving in.\n        // Several at once queue up outside the jar, so they drop in one after another.\n        const down = g >= 0;\n        const wait = r + 2 + queue * (2 * r + 6);\n        queue++;\n        place(params, b, r + 2 + Math.random() * (W - 2 * r - 4), down ? -wait : H + wait, r, 0, down ? 90 : -90);\n        params.inside[b] = 0;\n      }\n    }\n  }\n  params.count = count;\n}\n\nfunction nudge(params, b, vx, vy, spin) {\n  const cx = params.cx[b];\n  const cy = params.cy[b];\n  for (let k = 0; k \u003c M; k++) {\n    const i = b * M + k;\n    const dx = params.px[i] - cx;\n    const dy = params.py[i] - cy;\n    params.ox[i] -= (vx - dy * spin) * STEP;\n    params.oy[i] -= (vy + dx * spin) * STEP;\n  }\n}\n\nfunction centres(params) {\n  const { px, py } = params;\n  for (let b = 0; b \u003c B; b++) {\n    if (!params.on[b]) continue;\n    let sx = 0;\n    let sy = 0;\n    let x0 = 1e9;\n    let x1 = -1e9;\n    let y0 = 1e9;\n    let y1 = -1e9;\n    for (let k = 0; k \u003c M; k++) {\n      const i = b * M + k;\n      sx += px[i];\n      sy += py[i];\n      if (px[i] \u003c x0) x0 = px[i];\n      if (px[i] > x1) x1 = px[i];\n      if (py[i] \u003c y0) y0 = py[i];\n      if (py[i] > y1) y1 = py[i];\n    }\n    params.cx[b] = sx / M;\n    params.cy[b] = sy / M;\n    params.x0[b] = x0;\n    params.x1[b] = x1;\n    params.y0[b] = y0;\n    params.y1[b] = y1;\n  }\n}\n\n// A mass that has slipped inside another jelly goes back out through the nearest\n// edge, and that edge gives way by the same amount. Without this a mass caught\n// inside stays there, far from every mass that could push it.\nfunction pushOut(params, i, b) {\n  const { px, py } = params;\n  const x = px[i];\n  const y = py[i];\n  if (x \u003c params.x0[b] || x > params.x1[b] || y \u003c params.y0[b] || y > params.y1[b]) return;\n  const o = b * M;\n  let inside = false;\n  for (let k = 0, m = M - 1; k \u003c M; m = k++) {\n    const yk = py[o + k];\n    const ym = py[o + m];\n    if (yk > y !== ym > y && x \u003c ((px[o + m] - px[o + k]) * (y - yk)) / (ym - yk) + px[o + k]) inside = !inside;\n  }\n  if (!inside) return;\n  let best = 1e9;\n  let bj = 0;\n  let bt = 0;\n  for (let k = 0; k \u003c M; k++) {\n    const j = o + k;\n    const n = o + ((k + 1) % M);\n    const ex = px[n] - px[j];\n    const ey = py[n] - py[j];\n    let t = ((x - px[j]) * ex + (y - py[j]) * ey) / (ex * ex + ey * ey + 1e-6);\n    t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n    const dx = px[j] + ex * t - x;\n    const dy = py[j] + ey * t - y;\n    const d = dx * dx + dy * dy;\n    if (d \u003c best) {\n      best = d;\n      bj = k;\n      bt = t;\n    }\n  }\n  const j = o + bj;\n  const n = o + ((bj + 1) % M);\n  const dx = px[j] + (px[n] - px[j]) * bt - x;\n  const dy = py[j] + (py[n] - py[j]) * bt - y;\n  px[i] += dx * 0.6;\n  py[i] += dy * 0.6;\n  px[j] -= dx * 0.4 * (1 - bt);\n  py[j] -= dy * 0.4 * (1 - bt);\n  px[n] -= dx * 0.4 * bt;\n  py[n] -= dy * 0.4 * bt;\n}\n\nfunction step(params, gx, gy, soft) {\n  const { px, py, ox, oy, r, on, inside } = params;\n  const dt2 = STEP * STEP;\n  const count = params.count;\n  for (let b = 0; b \u003c B; b++) {\n    if (!on[b]) continue;\n    // Sizes ease to their share of the room; a jelly no longer counted shrinks away.\n    const target = b \u003c count ? radiusFor(params, b, count) : 0;\n    r[b] += (target - r[b]) * 0.02;\n    if (b >= count && r[b] \u003c 1.2) {\n      on[b] = 0;\n      continue;\n    }\n    for (let k = 0; k \u003c M; k++) {\n      const i = b * M + k;\n      const vx = (px[i] - ox[i]) * 0.997;\n      const vy = (py[i] - oy[i]) * 0.997;\n      ox[i] = px[i];\n      oy[i] = py[i];\n      px[i] += vx + gx * dt2;\n      py[i] += vy + gy * dt2;\n    }\n  }\n\n  const kEdge = 0.9 - soft * 0.55;\n  const kSkip = 0.3 - soft * 0.27;\n  const kArea = 0.6 - soft * 0.35;\n  const kShape = 0.05 - soft * 0.042;\n  for (let it = 0; it \u003c ITER; it++) {\n    for (let b = 0; b \u003c B; b++) {\n      if (!on[b]) continue;\n      const o = b * M;\n      const R = r[b];\n      const edge = 2 * R * Math.sin(Math.PI / M);\n      const skip = 2 * R * Math.sin((2 * Math.PI) / M);\n      for (let k = 0; k \u003c M; k++) {\n        for (let s = 1; s \u003c= 2; s++) {\n          const i = o + k;\n          const j = o + ((k + s) % M);\n          const dx = px[j] - px[i];\n          const dy = py[j] - py[i];\n          const d = Math.sqrt(dx * dx + dy * dy) + 1e-6;\n          const f = ((d - (s === 1 ? edge : skip)) / d) * 0.5 * (s === 1 ? kEdge : kSkip);\n          px[i] += dx * f;\n          py[i] += dy * f;\n          px[j] -= dx * f;\n          py[j] -= dy * f;\n        }\n      }\n      // Pressure: push every mass out along the ring's normal until the area is back.\n      let area = 0;\n      let grad = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const j = o + ((k + 1) % M);\n        area += px[i] * py[j] - px[j] * py[i];\n        const n = o + ((k + 1) % M);\n        const p = o + ((k + M - 1) % M);\n        const gxk = 0.5 * (py[n] - py[p]);\n        const gyk = 0.5 * (px[p] - px[n]);\n        grad += gxk * gxk + gyk * gyk;\n      }\n      area *= 0.5;\n      const lambda = ((Math.PI * R * R - area) / (grad + 1e-6)) * kArea;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const n = o + ((k + 1) % M);\n        const p = o + ((k + M - 1) % M);\n        // The neighbours' positions have moved by a hair this pass; close enough for pressure.\n        px[i] += 0.5 * (py[n] - py[p]) * lambda;\n        py[i] += 0.5 * (px[p] - px[n]) * lambda;\n      }\n      // Shape matching: a weak pull back towards a circle turned the way the ring has\n      // turned. It lets a jelly squash but never tie itself in a knot.\n      let cx = 0;\n      let cy = 0;\n      for (let k = 0; k \u003c M; k++) {\n        cx += px[o + k];\n        cy += py[o + k];\n      }\n      cx /= M;\n      cy /= M;\n      let dot = 0;\n      let crs = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const qx = params.ringX[k];\n        const qy = params.ringY[k];\n        const dx = px[o + k] - cx;\n        const dy = py[o + k] - cy;\n        dot += qx * dx + qy * dy;\n        crs += qx * dy - qy * dx;\n      }\n      const m = Math.sqrt(dot * dot + crs * crs) + 1e-6;\n      const cs = (dot / m) * R;\n      const sn = (crs / m) * R;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const qx = params.ringX[k];\n        const qy = params.ringY[k];\n        px[i] += (cx + cs * qx - sn * qy - px[i]) * kShape;\n        py[i] += (cy + sn * qx + cs * qy - py[i]) * kShape;\n      }\n    }\n\n    centres(params);\n    // Jelly against jelly: masses of two rings keep a hair apart, and grip a little.\n    const reach = 1.4;\n    for (let a = 0; a \u003c B; a++) {\n      if (!on[a]) continue;\n      for (let b = a + 1; b \u003c B; b++) {\n        if (!on[b]) continue;\n        if (params.x0[a] - reach > params.x1[b] || params.x0[b] - reach > params.x1[a]) continue;\n        if (params.y0[a] - reach > params.y1[b] || params.y0[b] - reach > params.y1[a]) continue;\n        const r2 = reach * reach;\n        for (let k = 0; k \u003c M; k++) {\n          const i = a * M + k;\n          for (let m = 0; m \u003c M; m++) {\n            const j = b * M + m;\n            const dx = px[j] - px[i];\n            const dy = py[j] - py[i];\n            const d2 = dx * dx + dy * dy;\n            if (d2 >= r2) continue;\n            const d = Math.sqrt(d2) + 1e-6;\n            const f = ((reach - d) / d) * 0.5;\n            px[i] -= dx * f;\n            py[i] -= dy * f;\n            px[j] += dx * f;\n            py[j] += dy * f;\n            // A little grip where they touch, so a stack holds and a top one rolls off.\n            const fx = ((px[i] - ox[i]) - (px[j] - ox[j])) * 0.08;\n            const fy = ((py[i] - oy[i]) - (py[j] - oy[j])) * 0.08;\n            ox[i] += fx;\n            oy[i] += fy;\n            ox[j] -= fx;\n            oy[j] -= fy;\n          }\n        }\n      }\n    }\n\n    for (let a = 0; a \u003c B; a++) {\n      if (!on[a]) continue;\n      for (let b = 0; b \u003c B; b++) {\n        if (b === a || !on[b]) continue;\n        if (params.x0[a] > params.x1[b] || params.x0[b] > params.x1[a]) continue;\n        if (params.y0[a] > params.y1[b] || params.y0[b] > params.y1[a]) continue;\n        for (let k = 0; k \u003c M; k++) pushOut(params, a * M + k, b);\n      }\n    }\n\n    for (let b = 0; b \u003c B; b++) {\n      if (!on[b]) continue;\n      if (!inside[b]) {\n        if (params.y0[b] > 0.5 && params.y1[b] \u003c H - 0.5) inside[b] = 1;\n      }\n      for (let k = 0; k \u003c M; k++) {\n        const i = b * M + k;\n        if (px[i] \u003c 0.5) {\n          px[i] = 0.5;\n          oy[i] += (py[i] - oy[i]) * 0.3;\n        } else if (px[i] > W - 0.5) {\n          px[i] = W - 0.5;\n          oy[i] += (py[i] - oy[i]) * 0.3;\n        }\n        if (!inside[b]) continue;\n        if (py[i] > H - 0.5) {\n          py[i] = H - 0.5;\n          ox[i] += (px[i] - ox[i]) * 0.3;\n        } else if (py[i] \u003c 0.5) {\n          py[i] = 0.5;\n          ox[i] += (px[i] - ox[i]) * 0.3;\n        }\n      }\n    }\n  }\n}\n\nfunction simulate(params, dt, k, shake) {\n  const gravity = k[1];\n  const soft = Math.max(0, Math.min(1, k[2]));\n  const count = Math.max(4, Math.min(B, Math.round(k[3])));\n  // The jar rocks a little in the hand, so the pile keeps sliding and settling.\n  const tilt = Math.sin(params.t * 0.45) * 0.16;\n  const g = gravity * 150;\n  const gx = Math.sin(tilt) * g;\n  const gy = Math.cos(tilt) * g;\n  if (count !== params.count) setCount(params, count, g, false);\n  centres(params);\n\n  params.hop -= dt;\n  if (params.hop \u003c= 0 || shake) {\n    // One of them gives a hop, or with a shake all of them are thrown.\n    params.hop = 0.9 + Math.random() * 1.4;\n    const up = g > 25 ? -1 : g \u003c -25 ? 1 : Math.random() \u003c 0.5 ? -1 : 1;\n    const pick = Math.floor(Math.random() * params.count);\n    for (let b = 0; b \u003c B; b++) {\n      if (!params.on[b] || !params.inside[b]) continue;\n      if (!shake && b !== pick) continue;\n      const lift = shake ? 230 + Math.random() * 170 : 160 + Math.random() * 110;\n      nudge(params, b, (Math.random() - 0.5) * (shake ? 280 : 90), up * lift, (Math.random() - 0.5) * 6);\n    }\n  }\n\n  params.acc += dt;\n  let n = 0;\n  while (params.acc >= STEP && n \u003c 9) {\n    params.acc -= STEP;\n    params.t += STEP;\n    step(params, gx, gy, soft);\n    n++;\n  }\n  if (n === 9) params.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 4];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0] + 0.3;\n  if (!params.warm) {\n    params.warm = true;\n    setCount(params, Math.max(4, Math.min(B, Math.round(k[3]))), k[1], true);\n    for (let s = 0; s \u003c 90; s++) simulate(params, STEP, k, false);\n  }\n  simulate(params, dt, k, input.btnPressed && input.btnPressed[0]);\n}\n\nexport function draw(display, params, time) {\n  const { px, py, id, dist, cross, col, rim } = params;\n  id.fill(0);\n  centres(params);\n  for (let b = 0; b \u003c B; b++) {\n    if (!params.on[b]) continue;\n    // Neighbours a golden step apart round the wheel never land on the same colour.\n    const h = params.hue + b * 0.381966;\n    hsvInto(col, b * 3, h, 0.78, 1);\n    hsvInto(rim, b * 3, h + 0.03, 0.35, 1);\n    const o = b * M;\n    const yA = Math.max(0, Math.floor(params.y0[b]));\n    const yB = Math.min(H - 1, Math.ceil(params.y1[b]));\n    for (let y = yA; y \u003c= yB; y++) {\n      const sy = y + 0.5;\n      let n = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const j = o + ((k + 1) % M);\n        const ya = py[i];\n        const yb = py[j];\n        if (ya \u003c= sy === yb \u003c= sy) continue;\n        const x = px[i] + ((sy - ya) * (px[j] - px[i])) / (yb - ya);\n        let m = n++;\n        while (m > 0 && cross[m - 1] > x) {\n          cross[m] = cross[m - 1];\n          m--;\n        }\n        cross[m] = x;\n      }\n      for (let c = 0; c + 1 \u003c n; c += 2) {\n        const xa = Math.max(0, Math.ceil(cross[c] - 0.5));\n        const xb = Math.min(W - 1, Math.floor(cross[c + 1] - 0.5));\n        for (let x = xa; x \u003c= xb; x++) id[y * W + x] = b + 1;\n      }\n    }\n  }\n\n  // How far each lit LED is from the edge of its own jelly, by a two-pass chamfer.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const v = id[o];\n      if (!v) continue;\n      const edge = x === 0 || x === W - 1 || y === 0 || y === H - 1 || id[o - 1] !== v || id[o + 1] !== v || id[o - W] !== v || id[o + W] !== v;\n      dist[o] = edge ? 0 : 99;\n    }\n  for (let y = 1; y \u003c H; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const o = y * W + x;\n      if (!id[o]) continue;\n      let d = dist[o];\n      if (dist[o - 1] + 1 \u003c d) d = dist[o - 1] + 1;\n      if (dist[o - W] + 1 \u003c d) d = dist[o - W] + 1;\n      if (dist[o - W - 1] + 1.41 \u003c d) d = dist[o - W - 1] + 1.41;\n      if (dist[o - W + 1] + 1.41 \u003c d) d = dist[o - W + 1] + 1.41;\n      dist[o] = d;\n    }\n  for (let y = H - 2; y >= 0; y--)\n    for (let x = W - 2; x >= 1; x--) {\n      const o = y * W + x;\n      if (!id[o]) continue;\n      let d = dist[o];\n      if (dist[o + 1] + 1 \u003c d) d = dist[o + 1] + 1;\n      if (dist[o + W] + 1 \u003c d) d = dist[o + W] + 1;\n      if (dist[o + W + 1] + 1.41 \u003c d) d = dist[o + W + 1] + 1.41;\n      if (dist[o + W - 1] + 1.41 \u003c d) d = dist[o + W - 1] + 1.41;\n      dist[o] = d;\n    }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const v = id[o];\n      if (!v) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const b = v - 1;\n      const c = b * 3;\n      const d = dist[o];\n      if (d \u003c 0.5) {\n        // A dark seam where two jellies touch keeps each one whole.\n        display.setPixel(x, y, col[c] * 0.22, col[c + 1] * 0.22, col[c + 2] * 0.22);\n        continue;\n      }\n      if (d \u003c 1.5) {\n        display.setPixel(x, y, rim[c] * 0.9, rim[c + 1] * 0.9, rim[c + 2] * 0.9);\n        continue;\n      }\n      const R = params.r[b];\n      const ex = (params.x1[b] - params.x0[b]) * 0.5 + 0.5;\n      const ey = (params.y1[b] - params.y0[b]) * 0.5 + 0.5;\n      // A dome: thin near the rim, full in the middle.\n      const u = Math.min(1, (d - 1) / (0.5 * R));\n      const dome = Math.sqrt(1 - (1 - u) * (1 - u));\n      let lv = 0.64 + 0.28 * dome;\n      // Light through the jelly gathers low and to the right, opposite the shine.\n      const gx = (x + 0.5 - params.cx[b] - ex * 0.25) / (ex * 0.6);\n      const gy = (y + 0.5 - params.cy[b] - ey * 0.3) / (ey * 0.55);\n      const glow = 1 - gx * gx - gy * gy;\n      if (glow > 0) lv += glow * 0.25;\n      let r = col[c] * lv;\n      let g = col[c + 1] * lv;\n      let bl = col[c + 2] * lv;\n      const sx = (x + 0.5 - params.cx[b] + ex * 0.4) / (ex * 0.28);\n      const sy = (y + 0.5 - params.cy[b] + ey * 0.45) / (ey * 0.2);\n      const shine = 1 - sx * sx - sy * sy;\n      if (shine > 0) {\n        const s = Math.min(1, shine * 1.8) * 0.85;\n        r += (235 - r) * s;\n        g += (235 - g) * s;\n        bl += (235 - bl) * s;\n      }\n      display.setPixel(x, y, Math.min(235, r), Math.min(235, g), Math.min(235, bl));\n    }\n}\n","layer":{"id":"layer-jelly","type":"code","name":"jelly","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Jelly\n// Family:  physics\n// Idea:    Each jelly is a ring of eighteen masses held by springs and the pressure of what is inside, so dropped into the tall jar they squash, stack, wobble and roll off one another.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Gravity=-1..3, Softness=0..1, Count=4..12\n//\n// Knob 1: Hue. Turns the whole bag of sweets round the colour wheel; each jelly sits a golden step round from the last, so no two match.\n// Knob 2: Gravity. Heavy at 3, a slow float at 0, and below 0 the jar is upside down and they pile against the lid.\n// Knob 3: Softness. Firm gums at 0 that bounce and roll; at 1 water balloons that slump over each other.\n// Knob 4: Count. How many are in the jar; new ones fall in one after another, and every jelly shrinks to share the room.\n// Buttons: K1 tap shakes the jar.\n\nconst W = 64;\nconst H = 128;\nconst B = 12;\nconst M = 18;\nconst STEP = 1 / 90;\nconst ITER = 3;\n// The jellies together take about a third of the jar, whatever their number.\nconst FILL = 0.5;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.px = new Float32Array(B * M);\n  params.py = new Float32Array(B * M);\n  params.ox = new Float32Array(B * M);\n  params.oy = new Float32Array(B * M);\n  params.r = new Float32Array(B);\n  params.size = new Float32Array(B);\n  params.on = new Uint8Array(B);\n  params.inside = new Uint8Array(B);\n  params.cx = new Float32Array(B);\n  params.cy = new Float32Array(B);\n  params.x0 = new Float32Array(B);\n  params.x1 = new Float32Array(B);\n  params.y0 = new Float32Array(B);\n  params.y1 = new Float32Array(B);\n  params.col = new Float32Array(B * 3);\n  params.rim = new Float32Array(B * 3);\n  params.id = new Uint8Array(W * H);\n  params.dist = new Float32Array(W * H);\n  params.cross = new Float32Array(M + 2);\n  params.ringX = new Float32Array(M);\n  params.ringY = new Float32Array(M);\n  for (let k = 0; k \u003c M; k++) {\n    params.ringX[k] = Math.cos((k / M) * Math.PI * 2);\n    params.ringY[k] = Math.sin((k / M) * Math.PI * 2);\n  }\n  for (let b = 0; b \u003c B; b++) params.size[b] = 0.82 + Math.random() * 0.36;\n  params.count = 0;\n  params.hop = 0.6;\n  params.acc = 0;\n  params.t = 0;\n  params.warm = false;\n}\n\nfunction radiusFor(params, b, count) {\n  let sum = 0;\n  for (let i = 0; i \u003c count; i++) sum += params.size[i] * params.size[i];\n  return Math.sqrt((FILL * W * H) / (Math.PI * sum)) * params.size[b];\n}\n\nfunction place(params, b, x, y, r, vx, vy) {\n  for (let k = 0; k \u003c M; k++) {\n    const a = (k / M) * Math.PI * 2;\n    const i = b * M + k;\n    params.px[i] = x + Math.cos(a) * r;\n    params.py[i] = y + Math.sin(a) * r;\n    params.ox[i] = params.px[i] - vx * STEP;\n    params.oy[i] = params.py[i] - vy * STEP;\n  }\n  params.r[b] = r;\n  params.on[b] = 1;\n}\n\nfunction setCount(params, count, g, warm) {\n  let queue = 0;\n  for (let b = 0; b \u003c B; b++) {\n    if (b \u003c count && !params.on[b]) {\n      const r = radiusFor(params, b, count);\n      if (warm) {\n        // At the start they are already in the jar, in a loose stack to settle from.\n        const col = b % 2;\n        const row = Math.floor(b / 2);\n        place(params, b, 18 + col * 28 + (Math.random() - 0.5) * 4, H - 16 - row * 26, r * 0.9, 0, 0);\n        params.inside[b] = 1;\n      } else {\n        // A new one comes in from the side gravity points away from, already moving in.\n        // Several at once queue up outside the jar, so they drop in one after another.\n        const down = g >= 0;\n        const wait = r + 2 + queue * (2 * r + 6);\n        queue++;\n        place(params, b, r + 2 + Math.random() * (W - 2 * r - 4), down ? -wait : H + wait, r, 0, down ? 90 : -90);\n        params.inside[b] = 0;\n      }\n    }\n  }\n  params.count = count;\n}\n\nfunction nudge(params, b, vx, vy, spin) {\n  const cx = params.cx[b];\n  const cy = params.cy[b];\n  for (let k = 0; k \u003c M; k++) {\n    const i = b * M + k;\n    const dx = params.px[i] - cx;\n    const dy = params.py[i] - cy;\n    params.ox[i] -= (vx - dy * spin) * STEP;\n    params.oy[i] -= (vy + dx * spin) * STEP;\n  }\n}\n\nfunction centres(params) {\n  const { px, py } = params;\n  for (let b = 0; b \u003c B; b++) {\n    if (!params.on[b]) continue;\n    let sx = 0;\n    let sy = 0;\n    let x0 = 1e9;\n    let x1 = -1e9;\n    let y0 = 1e9;\n    let y1 = -1e9;\n    for (let k = 0; k \u003c M; k++) {\n      const i = b * M + k;\n      sx += px[i];\n      sy += py[i];\n      if (px[i] \u003c x0) x0 = px[i];\n      if (px[i] > x1) x1 = px[i];\n      if (py[i] \u003c y0) y0 = py[i];\n      if (py[i] > y1) y1 = py[i];\n    }\n    params.cx[b] = sx / M;\n    params.cy[b] = sy / M;\n    params.x0[b] = x0;\n    params.x1[b] = x1;\n    params.y0[b] = y0;\n    params.y1[b] = y1;\n  }\n}\n\n// A mass that has slipped inside another jelly goes back out through the nearest\n// edge, and that edge gives way by the same amount. Without this a mass caught\n// inside stays there, far from every mass that could push it.\nfunction pushOut(params, i, b) {\n  const { px, py } = params;\n  const x = px[i];\n  const y = py[i];\n  if (x \u003c params.x0[b] || x > params.x1[b] || y \u003c params.y0[b] || y > params.y1[b]) return;\n  const o = b * M;\n  let inside = false;\n  for (let k = 0, m = M - 1; k \u003c M; m = k++) {\n    const yk = py[o + k];\n    const ym = py[o + m];\n    if (yk > y !== ym > y && x \u003c ((px[o + m] - px[o + k]) * (y - yk)) / (ym - yk) + px[o + k]) inside = !inside;\n  }\n  if (!inside) return;\n  let best = 1e9;\n  let bj = 0;\n  let bt = 0;\n  for (let k = 0; k \u003c M; k++) {\n    const j = o + k;\n    const n = o + ((k + 1) % M);\n    const ex = px[n] - px[j];\n    const ey = py[n] - py[j];\n    let t = ((x - px[j]) * ex + (y - py[j]) * ey) / (ex * ex + ey * ey + 1e-6);\n    t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n    const dx = px[j] + ex * t - x;\n    const dy = py[j] + ey * t - y;\n    const d = dx * dx + dy * dy;\n    if (d \u003c best) {\n      best = d;\n      bj = k;\n      bt = t;\n    }\n  }\n  const j = o + bj;\n  const n = o + ((bj + 1) % M);\n  const dx = px[j] + (px[n] - px[j]) * bt - x;\n  const dy = py[j] + (py[n] - py[j]) * bt - y;\n  px[i] += dx * 0.6;\n  py[i] += dy * 0.6;\n  px[j] -= dx * 0.4 * (1 - bt);\n  py[j] -= dy * 0.4 * (1 - bt);\n  px[n] -= dx * 0.4 * bt;\n  py[n] -= dy * 0.4 * bt;\n}\n\nfunction step(params, gx, gy, soft) {\n  const { px, py, ox, oy, r, on, inside } = params;\n  const dt2 = STEP * STEP;\n  const count = params.count;\n  for (let b = 0; b \u003c B; b++) {\n    if (!on[b]) continue;\n    // Sizes ease to their share of the room; a jelly no longer counted shrinks away.\n    const target = b \u003c count ? radiusFor(params, b, count) : 0;\n    r[b] += (target - r[b]) * 0.02;\n    if (b >= count && r[b] \u003c 1.2) {\n      on[b] = 0;\n      continue;\n    }\n    for (let k = 0; k \u003c M; k++) {\n      const i = b * M + k;\n      const vx = (px[i] - ox[i]) * 0.997;\n      const vy = (py[i] - oy[i]) * 0.997;\n      ox[i] = px[i];\n      oy[i] = py[i];\n      px[i] += vx + gx * dt2;\n      py[i] += vy + gy * dt2;\n    }\n  }\n\n  const kEdge = 0.9 - soft * 0.55;\n  const kSkip = 0.3 - soft * 0.27;\n  const kArea = 0.6 - soft * 0.35;\n  const kShape = 0.05 - soft * 0.042;\n  for (let it = 0; it \u003c ITER; it++) {\n    for (let b = 0; b \u003c B; b++) {\n      if (!on[b]) continue;\n      const o = b * M;\n      const R = r[b];\n      const edge = 2 * R * Math.sin(Math.PI / M);\n      const skip = 2 * R * Math.sin((2 * Math.PI) / M);\n      for (let k = 0; k \u003c M; k++) {\n        for (let s = 1; s \u003c= 2; s++) {\n          const i = o + k;\n          const j = o + ((k + s) % M);\n          const dx = px[j] - px[i];\n          const dy = py[j] - py[i];\n          const d = Math.sqrt(dx * dx + dy * dy) + 1e-6;\n          const f = ((d - (s === 1 ? edge : skip)) / d) * 0.5 * (s === 1 ? kEdge : kSkip);\n          px[i] += dx * f;\n          py[i] += dy * f;\n          px[j] -= dx * f;\n          py[j] -= dy * f;\n        }\n      }\n      // Pressure: push every mass out along the ring's normal until the area is back.\n      let area = 0;\n      let grad = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const j = o + ((k + 1) % M);\n        area += px[i] * py[j] - px[j] * py[i];\n        const n = o + ((k + 1) % M);\n        const p = o + ((k + M - 1) % M);\n        const gxk = 0.5 * (py[n] - py[p]);\n        const gyk = 0.5 * (px[p] - px[n]);\n        grad += gxk * gxk + gyk * gyk;\n      }\n      area *= 0.5;\n      const lambda = ((Math.PI * R * R - area) / (grad + 1e-6)) * kArea;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const n = o + ((k + 1) % M);\n        const p = o + ((k + M - 1) % M);\n        // The neighbours' positions have moved by a hair this pass; close enough for pressure.\n        px[i] += 0.5 * (py[n] - py[p]) * lambda;\n        py[i] += 0.5 * (px[p] - px[n]) * lambda;\n      }\n      // Shape matching: a weak pull back towards a circle turned the way the ring has\n      // turned. It lets a jelly squash but never tie itself in a knot.\n      let cx = 0;\n      let cy = 0;\n      for (let k = 0; k \u003c M; k++) {\n        cx += px[o + k];\n        cy += py[o + k];\n      }\n      cx /= M;\n      cy /= M;\n      let dot = 0;\n      let crs = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const qx = params.ringX[k];\n        const qy = params.ringY[k];\n        const dx = px[o + k] - cx;\n        const dy = py[o + k] - cy;\n        dot += qx * dx + qy * dy;\n        crs += qx * dy - qy * dx;\n      }\n      const m = Math.sqrt(dot * dot + crs * crs) + 1e-6;\n      const cs = (dot / m) * R;\n      const sn = (crs / m) * R;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const qx = params.ringX[k];\n        const qy = params.ringY[k];\n        px[i] += (cx + cs * qx - sn * qy - px[i]) * kShape;\n        py[i] += (cy + sn * qx + cs * qy - py[i]) * kShape;\n      }\n    }\n\n    centres(params);\n    // Jelly against jelly: masses of two rings keep a hair apart, and grip a little.\n    const reach = 1.4;\n    for (let a = 0; a \u003c B; a++) {\n      if (!on[a]) continue;\n      for (let b = a + 1; b \u003c B; b++) {\n        if (!on[b]) continue;\n        if (params.x0[a] - reach > params.x1[b] || params.x0[b] - reach > params.x1[a]) continue;\n        if (params.y0[a] - reach > params.y1[b] || params.y0[b] - reach > params.y1[a]) continue;\n        const r2 = reach * reach;\n        for (let k = 0; k \u003c M; k++) {\n          const i = a * M + k;\n          for (let m = 0; m \u003c M; m++) {\n            const j = b * M + m;\n            const dx = px[j] - px[i];\n            const dy = py[j] - py[i];\n            const d2 = dx * dx + dy * dy;\n            if (d2 >= r2) continue;\n            const d = Math.sqrt(d2) + 1e-6;\n            const f = ((reach - d) / d) * 0.5;\n            px[i] -= dx * f;\n            py[i] -= dy * f;\n            px[j] += dx * f;\n            py[j] += dy * f;\n            // A little grip where they touch, so a stack holds and a top one rolls off.\n            const fx = ((px[i] - ox[i]) - (px[j] - ox[j])) * 0.08;\n            const fy = ((py[i] - oy[i]) - (py[j] - oy[j])) * 0.08;\n            ox[i] += fx;\n            oy[i] += fy;\n            ox[j] -= fx;\n            oy[j] -= fy;\n          }\n        }\n      }\n    }\n\n    for (let a = 0; a \u003c B; a++) {\n      if (!on[a]) continue;\n      for (let b = 0; b \u003c B; b++) {\n        if (b === a || !on[b]) continue;\n        if (params.x0[a] > params.x1[b] || params.x0[b] > params.x1[a]) continue;\n        if (params.y0[a] > params.y1[b] || params.y0[b] > params.y1[a]) continue;\n        for (let k = 0; k \u003c M; k++) pushOut(params, a * M + k, b);\n      }\n    }\n\n    for (let b = 0; b \u003c B; b++) {\n      if (!on[b]) continue;\n      if (!inside[b]) {\n        if (params.y0[b] > 0.5 && params.y1[b] \u003c H - 0.5) inside[b] = 1;\n      }\n      for (let k = 0; k \u003c M; k++) {\n        const i = b * M + k;\n        if (px[i] \u003c 0.5) {\n          px[i] = 0.5;\n          oy[i] += (py[i] - oy[i]) * 0.3;\n        } else if (px[i] > W - 0.5) {\n          px[i] = W - 0.5;\n          oy[i] += (py[i] - oy[i]) * 0.3;\n        }\n        if (!inside[b]) continue;\n        if (py[i] > H - 0.5) {\n          py[i] = H - 0.5;\n          ox[i] += (px[i] - ox[i]) * 0.3;\n        } else if (py[i] \u003c 0.5) {\n          py[i] = 0.5;\n          ox[i] += (px[i] - ox[i]) * 0.3;\n        }\n      }\n    }\n  }\n}\n\nfunction simulate(params, dt, k, shake) {\n  const gravity = k[1];\n  const soft = Math.max(0, Math.min(1, k[2]));\n  const count = Math.max(4, Math.min(B, Math.round(k[3])));\n  // The jar rocks a little in the hand, so the pile keeps sliding and settling.\n  const tilt = Math.sin(params.t * 0.45) * 0.16;\n  const g = gravity * 150;\n  const gx = Math.sin(tilt) * g;\n  const gy = Math.cos(tilt) * g;\n  if (count !== params.count) setCount(params, count, g, false);\n  centres(params);\n\n  params.hop -= dt;\n  if (params.hop \u003c= 0 || shake) {\n    // One of them gives a hop, or with a shake all of them are thrown.\n    params.hop = 0.9 + Math.random() * 1.4;\n    const up = g > 25 ? -1 : g \u003c -25 ? 1 : Math.random() \u003c 0.5 ? -1 : 1;\n    const pick = Math.floor(Math.random() * params.count);\n    for (let b = 0; b \u003c B; b++) {\n      if (!params.on[b] || !params.inside[b]) continue;\n      if (!shake && b !== pick) continue;\n      const lift = shake ? 230 + Math.random() * 170 : 160 + Math.random() * 110;\n      nudge(params, b, (Math.random() - 0.5) * (shake ? 280 : 90), up * lift, (Math.random() - 0.5) * 6);\n    }\n  }\n\n  params.acc += dt;\n  let n = 0;\n  while (params.acc >= STEP && n \u003c 9) {\n    params.acc -= STEP;\n    params.t += STEP;\n    step(params, gx, gy, soft);\n    n++;\n  }\n  if (n === 9) params.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 4];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0] + 0.3;\n  if (!params.warm) {\n    params.warm = true;\n    setCount(params, Math.max(4, Math.min(B, Math.round(k[3]))), k[1], true);\n    for (let s = 0; s \u003c 90; s++) simulate(params, STEP, k, false);\n  }\n  simulate(params, dt, k, input.btnPressed && input.btnPressed[0]);\n}\n\nexport function draw(display, params, time) {\n  const { px, py, id, dist, cross, col, rim } = params;\n  id.fill(0);\n  centres(params);\n  for (let b = 0; b \u003c B; b++) {\n    if (!params.on[b]) continue;\n    // Neighbours a golden step apart round the wheel never land on the same colour.\n    const h = params.hue + b * 0.381966;\n    hsvInto(col, b * 3, h, 0.78, 1);\n    hsvInto(rim, b * 3, h + 0.03, 0.35, 1);\n    const o = b * M;\n    const yA = Math.max(0, Math.floor(params.y0[b]));\n    const yB = Math.min(H - 1, Math.ceil(params.y1[b]));\n    for (let y = yA; y \u003c= yB; y++) {\n      const sy = y + 0.5;\n      let n = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const j = o + ((k + 1) % M);\n        const ya = py[i];\n        const yb = py[j];\n        if (ya \u003c= sy === yb \u003c= sy) continue;\n        const x = px[i] + ((sy - ya) * (px[j] - px[i])) / (yb - ya);\n        let m = n++;\n        while (m > 0 && cross[m - 1] > x) {\n          cross[m] = cross[m - 1];\n          m--;\n        }\n        cross[m] = x;\n      }\n      for (let c = 0; c + 1 \u003c n; c += 2) {\n        const xa = Math.max(0, Math.ceil(cross[c] - 0.5));\n        const xb = Math.min(W - 1, Math.floor(cross[c + 1] - 0.5));\n        for (let x = xa; x \u003c= xb; x++) id[y * W + x] = b + 1;\n      }\n    }\n  }\n\n  // How far each lit LED is from the edge of its own jelly, by a two-pass chamfer.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const v = id[o];\n      if (!v) continue;\n      const edge = x === 0 || x === W - 1 || y === 0 || y === H - 1 || id[o - 1] !== v || id[o + 1] !== v || id[o - W] !== v || id[o + W] !== v;\n      dist[o] = edge ? 0 : 99;\n    }\n  for (let y = 1; y \u003c H; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const o = y * W + x;\n      if (!id[o]) continue;\n      let d = dist[o];\n      if (dist[o - 1] + 1 \u003c d) d = dist[o - 1] + 1;\n      if (dist[o - W] + 1 \u003c d) d = dist[o - W] + 1;\n      if (dist[o - W - 1] + 1.41 \u003c d) d = dist[o - W - 1] + 1.41;\n      if (dist[o - W + 1] + 1.41 \u003c d) d = dist[o - W + 1] + 1.41;\n      dist[o] = d;\n    }\n  for (let y = H - 2; y >= 0; y--)\n    for (let x = W - 2; x >= 1; x--) {\n      const o = y * W + x;\n      if (!id[o]) continue;\n      let d = dist[o];\n      if (dist[o + 1] + 1 \u003c d) d = dist[o + 1] + 1;\n      if (dist[o + W] + 1 \u003c d) d = dist[o + W] + 1;\n      if (dist[o + W + 1] + 1.41 \u003c d) d = dist[o + W + 1] + 1.41;\n      if (dist[o + W - 1] + 1.41 \u003c d) d = dist[o + W - 1] + 1.41;\n      dist[o] = d;\n    }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const v = id[o];\n      if (!v) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const b = v - 1;\n      const c = b * 3;\n      const d = dist[o];\n      if (d \u003c 0.5) {\n        // A dark seam where two jellies touch keeps each one whole.\n        display.setPixel(x, y, col[c] * 0.22, col[c + 1] * 0.22, col[c + 2] * 0.22);\n        continue;\n      }\n      if (d \u003c 1.5) {\n        display.setPixel(x, y, rim[c] * 0.9, rim[c + 1] * 0.9, rim[c + 2] * 0.9);\n        continue;\n      }\n      const R = params.r[b];\n      const ex = (params.x1[b] - params.x0[b]) * 0.5 + 0.5;\n      const ey = (params.y1[b] - params.y0[b]) * 0.5 + 0.5;\n      // A dome: thin near the rim, full in the middle.\n      const u = Math.min(1, (d - 1) / (0.5 * R));\n      const dome = Math.sqrt(1 - (1 - u) * (1 - u));\n      let lv = 0.64 + 0.28 * dome;\n      // Light through the jelly gathers low and to the right, opposite the shine.\n      const gx = (x + 0.5 - params.cx[b] - ex * 0.25) / (ex * 0.6);\n      const gy = (y + 0.5 - params.cy[b] - ey * 0.3) / (ey * 0.55);\n      const glow = 1 - gx * gx - gy * gy;\n      if (glow > 0) lv += glow * 0.25;\n      let r = col[c] * lv;\n      let g = col[c + 1] * lv;\n      let bl = col[c + 2] * lv;\n      const sx = (x + 0.5 - params.cx[b] + ex * 0.4) / (ex * 0.28);\n      const sy = (y + 0.5 - params.cy[b] + ey * 0.45) / (ey * 0.2);\n      const shine = 1 - sx * sx - sy * sy;\n      if (shine > 0) {\n        const s = Math.min(1, shine * 1.8) * 0.85;\n        r += (235 - r) * s;\n        g += (235 - g) * s;\n        bl += (235 - bl) * s;\n      }\n      display.setPixel(x, y, Math.min(235, r), Math.min(235, g), Math.min(235, bl));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Gravity=-1..3, Softness=0..1, Count=4..12","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole bag of sweets round the colour wheel; each jelly sits a golden step round from the last, so no two match."},{"name":"Gravity","min":-1,"max":3,"about":"Heavy at 3, a slow float at 0, and below 0 the jar is upside down and they pile against the lid."},{"name":"Softness","min":0,"max":1,"about":"Firm gums at 0 that bounce and roll; at 1 water balloons that slump over each other."},{"name":"Count","min":4,"max":12,"about":"How many are in the jar; new ones fall in one after another, and every jelly shrinks to share the room."}],"start":[0,2,0,4],"measures":{"motion":0.4127,"detail":0.0345,"edges":0.4341,"complexity":0.5229,"coverage":0.4923,"colour":0.4252,"drift":0.1653},"knobResponse":[0.2349,0.3804,0.1184,0.2314]},{"slug":"kaleidoscope","title":"Kaleidoscope","family":"geometry","round":1,"note":"움직이는 선 세 벌이 유리 한 조각을 자르고 거울이 그 조각을 꽃으로 접어요. 조각 사이에 1 LED 검은 납선이 있어요.","idea":"Three sets of moving lines cut one wedge of glass into shards, and mirrors fold that wedge round the centre until it reads as a flower.","buttons":"K1 tap reverses the turn.","code":"// ===== Patternflow pattern =====\n// Title:   Kaleidoscope\n// Family:  geometry\n// Idea:    Three sets of moving lines cut one wedge of glass into shards, and mirrors fold that wedge round the centre until it reads as a flower.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.1..4, Segments=6..16, Twist=-1..1\n//\n// Knob 1: Hue. Turns the glass colours around the colour wheel.\n// Knob 2: Speed. How fast the shards slide and the mirrors turn.\n// Knob 3: Segments. How many mirrored wedges, in whole numbers; 6 is a snowflake, 16 a fine rosette.\n// Knob 4: Twist. Bends the wedges into a spiral, one way below 0 and the other way above.\n// Buttons: K1 tap reverses the turn.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// Hue offset, saturation and brightness of each kind of glass. A brightness\n// of 0 is dark glass, which leaves the gaps that let the symmetry read.\nconst GLASS = [\n  [0.0, 0.9, 1.0],\n  [0.0, 0.95, 0.5],\n  [0.07, 0.85, 0.9],\n  [-0.07, 0.9, 0.75],\n  [0.5, 0.75, 0.85],\n  [0.03, 0.35, 1.0],\n  [-0.15, 0.85, 0.85],\n  [0.0, 0.0, 0.0],\n  [0.0, 0.0, 0.0],\n  [0.0, 0.0, 0.0],\n];\n\n// Angle and spacing in LEDs of the three line families, in the folded wedge.\nconst LINES = [\n  [0.35, 11, 1.0],\n  [1.45, 13, -0.8],\n  [2.5, 9, 0.55],\n];\n\nexport function setup(params) {\n  const w = 64;\n  const h = 128;\n  params.radius = new Float32Array(w * h);\n  params.angle = new Float32Array(w * h);\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const dx = x - 31.5;\n      const dy = y - 63.5;\n      params.radius[y * w + x] = Math.hypot(dx, dy);\n      params.angle[y * w + x] = Math.atan2(dy, dx);\n    }\n  }\n  params.palette = new Float32Array(GLASS.length * 3);\n  params.turn = 0;\n  params.slide = 0;\n  params.dir = 1;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  params.hue = k[0];\n  params.speed = k[1];\n  params.segments = Math.max(2, Math.round(k[2]));\n  params.twist = k[3];\n  if (input.btnPressed && input.btnPressed[0]) params.dir = -params.dir;\n  params.turn += dt * params.speed * 0.1 * params.dir;\n  params.slide += dt * params.speed * 1.4;\n  for (let i = 0; i \u003c GLASS.length; i++) {\n    const c = hsv(params.hue + GLASS[i][0], GLASS[i][1], GLASS[i][2]);\n    params.palette[i * 3] = c[0];\n    params.palette[i * 3 + 1] = c[1];\n    params.palette[i * 3 + 2] = c[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const wedge = (Math.PI * 2) / params.segments;\n  const half = wedge / 2;\n  const twist = params.twist * 0.032;\n  const pal = params.palette;\n  const c0 = Math.cos(LINES[0][0]), s0 = Math.sin(LINES[0][0]);\n  const c1 = Math.cos(LINES[1][0]), s1 = Math.sin(LINES[1][0]);\n  const c2 = Math.cos(LINES[2][0]), s2 = Math.sin(LINES[2][0]);\n  const o0 = params.slide * LINES[0][2];\n  const o1 = params.slide * LINES[1][2];\n  const o2 = params.slide * LINES[2][2];\n  const g0 = LINES[0][1], g1 = LINES[1][1], g2 = LINES[2][1];\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const p = y * w + x;\n      const r = params.radius[p];\n      let a = params.angle[p] + params.turn + twist * r;\n      a -= Math.floor(a / wedge) * wedge;\n      if (a > half) a = wedge - a;\n      const u = r * Math.cos(a);\n      const v = r * Math.sin(a);\n      const q0 = (u * c0 + v * s0 + o0) / g0;\n      const q1 = (u * c1 + v * s1 + o1) / g1;\n      const q2 = (u * c2 + v * s2 + o2) / g2;\n      const i0 = Math.floor(q0), i1 = Math.floor(q1), i2 = Math.floor(q2);\n      // Distance in LEDs to the nearest line of lead between shards.\n      const e0 = Math.min(q0 - i0, i0 + 1 - q0) * g0;\n      const e1 = Math.min(q1 - i1, i1 + 1 - q1) * g1;\n      const e2 = Math.min(q2 - i2, i2 + 1 - q2) * g2;\n      const e = Math.min(e0, e1, e2);\n      if (e \u003c 0.45) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      let n = Math.imul(i0, 73856093) ^ Math.imul(i1, 19349663) ^ Math.imul(i2, 83492791);\n      n = Math.imul(n ^ (n >>> 13), 1274126177);\n      n = (n ^ (n >>> 16)) >>> 0;\n      const kind = n % GLASS.length;\n      if (GLASS[kind][2] === 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      // Each shard is brightest in its middle, like light through a bevel.\n      let lift = 0.5 + 0.5 * Math.min(1, (e - 0.45) / 3.5);\n      if (e \u003c 1.3) lift *= (e - 0.45) / 0.85;\n      display.setPixel(x, y, pal[kind * 3] * lift, pal[kind * 3 + 1] * lift, pal[kind * 3 + 2] * lift);\n    }\n  }\n}\n","layer":{"id":"layer-kaleidoscope","type":"code","name":"kaleidoscope","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kaleidoscope\n// Family:  geometry\n// Idea:    Three sets of moving lines cut one wedge of glass into shards, and mirrors fold that wedge round the centre until it reads as a flower.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.1..4, Segments=6..16, Twist=-1..1\n//\n// Knob 1: Hue. Turns the glass colours around the colour wheel.\n// Knob 2: Speed. How fast the shards slide and the mirrors turn.\n// Knob 3: Segments. How many mirrored wedges, in whole numbers; 6 is a snowflake, 16 a fine rosette.\n// Knob 4: Twist. Bends the wedges into a spiral, one way below 0 and the other way above.\n// Buttons: K1 tap reverses the turn.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// Hue offset, saturation and brightness of each kind of glass. A brightness\n// of 0 is dark glass, which leaves the gaps that let the symmetry read.\nconst GLASS = [\n  [0.0, 0.9, 1.0],\n  [0.0, 0.95, 0.5],\n  [0.07, 0.85, 0.9],\n  [-0.07, 0.9, 0.75],\n  [0.5, 0.75, 0.85],\n  [0.03, 0.35, 1.0],\n  [-0.15, 0.85, 0.85],\n  [0.0, 0.0, 0.0],\n  [0.0, 0.0, 0.0],\n  [0.0, 0.0, 0.0],\n];\n\n// Angle and spacing in LEDs of the three line families, in the folded wedge.\nconst LINES = [\n  [0.35, 11, 1.0],\n  [1.45, 13, -0.8],\n  [2.5, 9, 0.55],\n];\n\nexport function setup(params) {\n  const w = 64;\n  const h = 128;\n  params.radius = new Float32Array(w * h);\n  params.angle = new Float32Array(w * h);\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const dx = x - 31.5;\n      const dy = y - 63.5;\n      params.radius[y * w + x] = Math.hypot(dx, dy);\n      params.angle[y * w + x] = Math.atan2(dy, dx);\n    }\n  }\n  params.palette = new Float32Array(GLASS.length * 3);\n  params.turn = 0;\n  params.slide = 0;\n  params.dir = 1;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  params.hue = k[0];\n  params.speed = k[1];\n  params.segments = Math.max(2, Math.round(k[2]));\n  params.twist = k[3];\n  if (input.btnPressed && input.btnPressed[0]) params.dir = -params.dir;\n  params.turn += dt * params.speed * 0.1 * params.dir;\n  params.slide += dt * params.speed * 1.4;\n  for (let i = 0; i \u003c GLASS.length; i++) {\n    const c = hsv(params.hue + GLASS[i][0], GLASS[i][1], GLASS[i][2]);\n    params.palette[i * 3] = c[0];\n    params.palette[i * 3 + 1] = c[1];\n    params.palette[i * 3 + 2] = c[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const wedge = (Math.PI * 2) / params.segments;\n  const half = wedge / 2;\n  const twist = params.twist * 0.032;\n  const pal = params.palette;\n  const c0 = Math.cos(LINES[0][0]), s0 = Math.sin(LINES[0][0]);\n  const c1 = Math.cos(LINES[1][0]), s1 = Math.sin(LINES[1][0]);\n  const c2 = Math.cos(LINES[2][0]), s2 = Math.sin(LINES[2][0]);\n  const o0 = params.slide * LINES[0][2];\n  const o1 = params.slide * LINES[1][2];\n  const o2 = params.slide * LINES[2][2];\n  const g0 = LINES[0][1], g1 = LINES[1][1], g2 = LINES[2][1];\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const p = y * w + x;\n      const r = params.radius[p];\n      let a = params.angle[p] + params.turn + twist * r;\n      a -= Math.floor(a / wedge) * wedge;\n      if (a > half) a = wedge - a;\n      const u = r * Math.cos(a);\n      const v = r * Math.sin(a);\n      const q0 = (u * c0 + v * s0 + o0) / g0;\n      const q1 = (u * c1 + v * s1 + o1) / g1;\n      const q2 = (u * c2 + v * s2 + o2) / g2;\n      const i0 = Math.floor(q0), i1 = Math.floor(q1), i2 = Math.floor(q2);\n      // Distance in LEDs to the nearest line of lead between shards.\n      const e0 = Math.min(q0 - i0, i0 + 1 - q0) * g0;\n      const e1 = Math.min(q1 - i1, i1 + 1 - q1) * g1;\n      const e2 = Math.min(q2 - i2, i2 + 1 - q2) * g2;\n      const e = Math.min(e0, e1, e2);\n      if (e \u003c 0.45) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      let n = Math.imul(i0, 73856093) ^ Math.imul(i1, 19349663) ^ Math.imul(i2, 83492791);\n      n = Math.imul(n ^ (n >>> 13), 1274126177);\n      n = (n ^ (n >>> 16)) >>> 0;\n      const kind = n % GLASS.length;\n      if (GLASS[kind][2] === 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      // Each shard is brightest in its middle, like light through a bevel.\n      let lift = 0.5 + 0.5 * Math.min(1, (e - 0.45) / 3.5);\n      if (e \u003c 1.3) lift *= (e - 0.45) / 0.85;\n      display.setPixel(x, y, pal[kind * 3] * lift, pal[kind * 3 + 1] * lift, pal[kind * 3 + 2] * lift);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.1..4, Segments=6..16, Twist=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the glass colours around the colour wheel."},{"name":"Speed","min":0.1,"max":4,"about":"How fast the shards slide and the mirrors turn."},{"name":"Segments","min":6,"max":16,"about":"How many mirrored wedges, in whole numbers; 6 is a snowflake, 16 a fine rosette."},{"name":"Twist","min":-1,"max":1,"about":"Bends the wedges into a spiral, one way below 0 and the other way above."}],"start":[0,2,6,0.06],"measures":{"motion":0.9384,"detail":0.1125,"edges":0.4099,"complexity":1.6131,"coverage":0.5499,"colour":0.359,"drift":0.2217},"knobResponse":[0.1659,0.2298,0.1535,0.1426]},{"slug":"kettle","title":"Kettle","family":"kitchen","round":20,"note":"밤 부엌 조리대의 유리 전기 주전자가 128줄을 다 써요. 받침의 파란 LED 고리가 물을 밑에서 밝히는 동안 열판의 잔 기포가 떠올랐다 꺼지는 철을 지나 큰 기포가 들끓고, 김이 주둥이에서 패널 꼭대기까지 오르다가 스위치가 딸깍 꺼져요. K1 을 누르면 바로 켜거나 꺼요.","idea":"A glass electric kettle on a dark kitchen counter at night heats under the blue light of its LED ring, from bubbles clinging to the element through the hiss to a rolling boil, its steam fogging the glass and rising from the spout to the top of the panel, until the switch clicks off, the light goes out and someone switches it on again.","buttons":"K1 tap switches the kettle on or off now.","code":"// ===== Patternflow pattern =====\n// Title:   Kettle\n// Family:  kitchen\n// Idea:    A glass electric kettle on a dark kitchen counter at night heats under the blue light of its LED ring, from bubbles clinging to the element through the hiss to a rolling boil, its steam fogging the glass and rising from the spout to the top of the panel, until the switch clicks off, the light goes out and someone switches it on again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the stages of water coming to the boil in a glass kettle\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Fill=1..1.7, Cold=0..1\n//\n// Knob 1: Light. The colour of the LED ring in the base and of everything it lights: blue at 0, then teal, green and violet, to a warm amber at 1.\n// Knob 2: Speed. How fast the water heats and everything moves: at 2 the kettle comes to the boil, boils 3.5 s, clicks off and is switched on again 5 s later, about 15 s a round; at 0.2 it all runs ten times slower.\n// Knob 3: Fill. How much water is in the kettle, from one litre to the 1.7 L MAX line on the gauge; a full kettle takes about twice as long to come to the boil.\n// Knob 4: Cold. How cold the kitchen is: in a warm one the steam thins out on its way up; in a cold one it billows to the ceiling, the glass above the water fogs over and drops run down it.\n// Buttons: K1 tap switches the kettle on or off now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The body's middle column, the first glass row under the rim band, and the\n// last row of water, which lies on the element plate.\nconst CX = 31;\nconst TOP = 37;\nconst BOT = 100;\n// Steam is kept at half resolution.\nconst SW = 32;\nconst SH = 64;\nconst MAXB = 280;\nconst MAXP = 190;\nconst MAXS = 60;\nconst NSITE = 18;\nconst ND = 150;\nconst NC = 46;\n// LED colours from blue through teal, green and violet to amber.\nconst LEDS = [[40, 110, 255], [0, 205, 225], [40, 235, 100], [160, 70, 255], [255, 160, 60]];\nconst { min, max, round, floor, sin, exp, abs, hypot } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Inner half-width of the glass, a little wider at the foot.\nconst HW = Float32Array.from({ length: H }, (_, y) => 14 + (3 * (clamp(y, TOP, BOT) - TOP)) / (BOT - TOP));\nconst wallL = (y) => CX - round(HW[clamp(y, 0, H - 1)]);\nconst wallR = (y) => CX + round(HW[clamp(y, 0, H - 1)]);\nconst EX12 = Float32Array.from({ length: 128 }, (_, i) => exp(-i / 12));\nconst EDGE = Float32Array.from({ length: 64 }, (_, i) => exp(-(i - 1) / 1.6));\nconst EX6 = Float32Array.from({ length: 128 }, (_, i) => exp(-i / 6));\n// The 3x5 letters of MAX on the gauge.\nconst MAXT = [\"101111101\", \"111101101\", \"101111010\", \"101101101\", \"101101101\"];\n// The lid, row by row from its knob: half-widths.\nconst LID = [2, 2, 8, 10, 11, 12, 13, 13];\n\n// Smooth value noise, wrapping both ways.\nfunction noise(w, h, cell, oct) {\n  const out = new Float32Array(w * h);\n  let amp = 1;\n  let tot = 0;\n  for (let o = 0; o \u003c oct; o++, cell /= 2, amp *= 0.5) {\n    const gw = w / cell;\n    const gh = h / cell;\n    const g = Float32Array.from({ length: gw * gh }, rnd);\n    const at = (i, j) => g[(j % gh) * gw + (i % gw)];\n    for (let y = 0; y \u003c h; y++) {\n      const j = floor(y / cell);\n      const ty = smooth(0, 1, y / cell - j);\n      for (let x = 0; x \u003c w; x++) {\n        const i = floor(x / cell);\n        const tx = smooth(0, 1, x / cell - i);\n        const a = at(i, j) + (at(i + 1, j) - at(i, j)) * tx;\n        const b = at(i, j + 1) + (at(i + 1, j + 1) - at(i, j + 1)) * tx;\n        out[y * w + x] += amp * (a + (b - a) * ty);\n      }\n    }\n    tot += amp;\n  }\n  for (let i = 0; i \u003c out.length; i++) out[i] /= tot;\n  return out;\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), S: F(SW * SH), wipe: F(N), tile: F(N), grain: F(N), sh: F(W), sv: F(W), led: F(3), sr: new Int16Array(W) });\n  for (const k of [\"bx\", \"by\", \"br\", \"bv\", \"bp\", \"be\", \"bm\"]) P[k] = F(MAXB);\n  P.pArr = [\"px\", \"py\", \"pvx\", \"pvy\", \"pr\", \"pa\", \"pg\", \"pl\"].map((k) => (P[k] = F(MAXP)));\n  for (const k of [\"dx\", \"dy\", \"dvx\", \"dvy\"]) P[k] = F(MAXS);\n  // Subway tiles behind the counter, each a little different.\n  const shade = Float32Array.from({ length: 512 }, () => 0.85 + 0.2 * rnd());\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const band = y >> 2;\n      const u = x + (band & 1) * 4;\n      const grout = (y & 3) === 3 || (u & 7) === 7;\n      P.tile[y * W + x] = grout ? 0.5 : shade[(band * 9 + (u >> 3)) & 511] * ((y & 3) === 0 ? 1.1 : 1);\n      P.grain[y * W + x] = (rnd() - 0.5) * 9;\n    }\n  // Blotchy condensation, and the wisps the steam carries.\n  P.fogTex = noise(W, H, 16, 2).map((v) => 0.3 + 1.7 * v * v);\n  P.wisp = noise(SW, SH, 8, 3);\n  P.siteX = Float32Array.from({ length: NSITE }, (_, i) => 17 + ((i + 0.2 + 0.6 * rnd()) * 29) / NSITE);\n  P.siteW = Float32Array.from({ length: NSITE }, () => 0.5 + rnd());\n  P.acc = F(NSITE);\n  // Drops of condensation on the inside of the glass, each with the fog it needs.\n  P.qx = new Int8Array(ND);\n  P.qy = new Int16Array(ND);\n  P.qt = F(ND);\n  for (let i = 0; i \u003c ND; i++) {\n    const y = TOP + 1 + floor(rnd() * 60);\n    P.qy[i] = y;\n    P.qx[i] = wallL(y) + 1 + floor(rnd() * (wallR(y) - wallL(y) - 1));\n    P.qt[i] = 0.12 + 0.85 * rnd();\n  }\n  // Tiny bubbles that cling to the plate and the foot of the glass.\n  P.cx = new Int8Array(NC);\n  P.cy = new Int16Array(NC);\n  P.ct = F(NC);\n  for (let i = 0; i \u003c NC; i++) {\n    const side = i \u003c 30 ? 0 : i & 1 ? -1 : 1;\n    const y = side ? 72 + floor(rnd() * 28) : BOT - (rnd() \u003c 0.3 ? 1 : 0);\n    P.cy[i] = y;\n    P.cx[i] = side \u003c 0 ? wallL(y) + 1 : side > 0 ? wallR(y) - 1 : 16 + floor(rnd() * 31);\n    P.ct[i] = rnd() * 0.85;\n  }\n  P.runners = [];\n  Object.assign(P, { started: false, t: 0, on: true, T: 0.27, Pw: 1, I: 1, hold: 0, off: 0, F: 0, nb: 0, np: 0, ns: 0, eAcc: 0, lAcc: 0, cold: 0.06, m: 1, surf0: 69, fill: 1, hue: 0 });\n}\n\nfunction toggle(P, on) {\n  P.on = on;\n  P.hold = 0;\n  P.off = 0;\n}\n\nfunction release(P, s, reach) {\n  if (P.nb >= MAXB) return;\n  const i = P.nb++;\n  const depth = BOT - P.surf0;\n  P.bx[i] = P.siteX[s] + (rnd() - 0.5) * 1.5;\n  P.by[i] = BOT;\n  P.br[i] = 0.5 + 0.35 * rnd() + 0.5 * P.boilF;\n  P.bv[i] = -3;\n  P.bp[i] = rnd() * 6.3;\n  P.bm[i] = 0.55 + 0.6 * rnd();\n  // Below the boil a bubble collapses on its way up, higher as the water heats.\n  P.be[i] = rnd() \u003c reach * reach ? -99 : BOT - depth * reach * (0.3 + 0.65 * rnd());\n}\n\nfunction puff(P, x, y, vx, vy, r, a) {\n  if (P.np >= MAXP) return;\n  const i = P.np++;\n  const v = [x, y, vx, vy, r, a * (0.45 + 1.4 * P.cold), 0, (3.4 + 3.6 * P.cold) * (0.8 + 0.4 * rnd())];\n  for (let n = 0; n \u003c 8; n++) P.pArr[n][i] = v[n];\n}\n\nfunction burst(P, c, r) {\n  P.sv[c] -= 5 + 9 * r;\n  if (r > 1.1 && P.ns \u003c MAXS && rnd() \u003c 0.6) {\n    const i = P.ns++;\n    P.dx[i] = c;\n    P.dy[i] = P.surf0 + P.sh[c] - 1;\n    P.dvx[i] = (rnd() - 0.5) * 12;\n    P.dvy[i] = -(14 + 22 * rnd()) * (0.5 + r / 3);\n  }\n}\n\nfunction step(P, h) {\n  P.t += h;\n  if (P.on) {\n    // A full kettle takes longer to come to the boil.\n    P.T = min(1, P.T + (0.11 * h) / P.fill ** 1.3);\n    if (P.T >= 1 && (P.hold += h) >= 3.5) toggle(P, false);\n  } else {\n    P.T = 0.15 + (P.T - 0.15) * exp(-h / 3.5);\n    if ((P.off += h) >= 5) toggle(P, true);\n  }\n  const on = P.on ? 1 : 0;\n  P.Pw += (on - P.Pw) * (1 - exp(-h / (on ? 0.4 : 0.6)));\n  P.I += (on - P.I) * (1 - exp(-h / (on ? 0.12 : 0.25)));\n  const T = P.T;\n  P.hissF = smooth(0.45, 0.7, T);\n  P.boilF = smooth(0.8, 1, T);\n  P.cling = smooth(0.22, 0.5, T);\n  const reach = smooth(0.5, 0.95, T);\n  const steam = smooth(0.5, 1, T) * (0.2 + 0.8 * P.Pw);\n  const fogT = smooth(0.45, 0.95, T) * (0.3 + 0.7 * P.cold);\n  P.F += (fogT - P.F) * (1 - exp(-h / (fogT > P.F ? 1 : 7)));\n\n  // Bubbles: released from the sites on the plate, rising, wobbling, and\n  // either collapsing in cooler water or bursting at the surface.\n  const rate = P.Pw * (1.3 * P.hissF * (1 - 0.6 * P.boilF) + 1.1 * P.boilF);\n  for (let s = 0; s \u003c NSITE; s++) {\n    P.acc[s] += rate * P.siteW[s] * h;\n    for (; P.acc[s] >= 1; P.acc[s]--) release(P, s, reach);\n  }\n  const { bx, by, br, bv, bp, be, bm, sh, sv } = P;\n  for (let i = 0; i \u003c P.nb; ) {\n    bv[i] += (-(9 + 9 * br[i]) - bv[i]) * (1 - exp(-2 * h));\n    by[i] += bv[i] * h;\n    bp[i] += (6 + 3 * br[i]) * h;\n    bx[i] = clamp(bx[i] + sin(bp[i]) * 4 * h * br[i], wallL(by[i] | 0) + 1.5, wallR(by[i] | 0) - 1.5);\n    let dead = false;\n    if (by[i] \u003c be[i] + 3) {\n      br[i] -= 2.5 * h;\n      dead = br[i] \u003c 0.3;\n    } else if (P.boilF > 0.2) br[i] = min(P.bm[i] * (1 + 2.2 * P.boilF), br[i] + 2 * P.boilF * h);\n    const c = round(bx[i]);\n    if (!dead && by[i] - br[i] * 0.5 \u003c= P.surf0 + sh[c]) {\n      burst(P, c, br[i]);\n      dead = true;\n    }\n    if (dead) {\n      const j = --P.nb;\n      for (const A of [bx, by, br, bv, bp, be, bm]) A[i] = A[j];\n    } else i++;\n  }\n\n  // The surface: a damped string, kicked by bursts and by the churn of the boil.\n  const L = wallL(P.surf0 | 0) + 1;\n  const R = wallR(P.surf0 | 0) - 1;\n  const n = Math.ceil(h * 60);\n  for (let k = 0; k \u003c n; k++) {\n    const d = h / n;\n    for (let x = L; x \u003c= R; x++) {\n      const a = 300 * (sh[max(L, x - 1)] + sh[min(R, x + 1)] - 2 * sh[x]) - 40 * sh[x] - 5 * sv[x];\n      sv[x] += a * d;\n    }\n    for (let x = L; x \u003c= R; x++) sh[x] = clamp(sh[x] + sv[x] * d, -4, 3);\n  }\n  if (rnd() \u003c 14 * P.boilF * P.Pw * h) sv[L + floor(rnd() * (R - L + 1))] += (rnd() - 0.65) * 50 * P.boilF;\n  for (let i = 0; i \u003c P.ns; ) {\n    P.dvy[i] += 150 * h;\n    P.dx[i] = clamp(P.dx[i] + P.dvx[i] * h, L, R);\n    P.dy[i] += P.dvy[i] * h;\n    if (P.dvy[i] > 0 && P.dy[i] > P.surf0 + sh[round(P.dx[i])]) {\n      const j = --P.ns;\n      for (const A of [P.dx, P.dy, P.dvx, P.dvy]) A[i] = A[j];\n    } else i++;\n  }\n\n  // Steam out of the spout, in puffs at the boil, and round the lid.\n  P.eAcc += 36 * steam * (1 + P.boilF * P.Pw * (1.2 * max(0, sin(P.t * 5.5)) - 0.35)) * h;\n  for (; P.eAcc >= 1; P.eAcc--) puff(P, 9 + rnd() * 2, 33.5, -1 - 2 * rnd(), -8 - 6 * rnd(), 1.6, 0.8 + 0.5 * rnd());\n  P.lAcc += 7 * steam * P.boilF * h;\n  for (; P.lAcc >= 1; P.lAcc--) puff(P, 21 + rnd() * 20, 29, (rnd() - 0.5) * 3, -4 - 4 * rnd(), 1.8, 0.45 + 0.3 * rnd());\n  const { px, py, pvx, pvy, pr, pg, pl } = P;\n  const ry = 1 - exp(-h);\n  const rx = 1 - exp(-h / 0.8);\n  const grow = 3.6 + 2 * P.cold;\n  for (let i = 0; i \u003c P.np; ) {\n    pg[i] += h;\n    const wind = 8 + 3 * sin(0.07 * py[i] + 0.4 * P.t) + 2 * sin(0.17 * P.t + 1.3);\n    pvy[i] += (-12 - pvy[i]) * ry;\n    pvx[i] += (wind - pvx[i]) * rx + (rnd() - 0.5) * 24 * h;\n    px[i] += pvx[i] * h;\n    py[i] += pvy[i] * h;\n    pr[i] += grow * h;\n    if (pg[i] > pl[i] || py[i] + pr[i] \u003c -2 || px[i] > W + 12) {\n      const j = --P.np;\n      for (const A of P.pArr) A[i] = A[j];\n    } else i++;\n  }\n\n  // Drops that grow heavy run down through the fog and wipe a clear line.\n  const { wipe, runners } = P;\n  const keep = exp(-h / 6);\n  for (let y = TOP; y \u003c= BOT; y++) for (let x = 14; x \u003c= 48; x++) wipe[y * W + x] *= keep;\n  if (P.F > 0.4 && runners.length \u003c 6 && rnd() \u003c (P.F - 0.4) * (0.6 + 1.6 * P.cold) * h) {\n    const y = TOP + 1 + rnd() * 8;\n    runners.push([wallL(y | 0) + 2 + rnd() * (wallR(y | 0) - wallL(y | 0) - 4), y, 4 + 6 * rnd(), rnd() * 6]);\n  }\n  P.runners = runners.filter((r) => {\n    r[3] += h * 3;\n    r[1] += r[2] * h * (0.25 + 0.75 * max(0, sin(r[3])));\n    const p = (r[1] | 0) * W + (r[0] | 0);\n    wipe[p] = 1;\n    return r[1] \u003c P.surf0 + sh[r[0] | 0] - 1;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.m = clamp(k[1], 0.2, 3) / 2;\n  P.fill = clamp(k[2], 1, 1.7);\n  P.surf0 = 101 - (P.fill / 1.7) * 55;\n  P.cold = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Open in the hiss, three seconds after the bubbles began to cling.\n    for (let i = 0; i \u003c 30; i++) step(P, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) toggle(P, !P.on);\n  step(P, dt * P.m);\n}\n\nfunction add(P, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) P.buf[o + i] += c[i] * v;\n}\n\n// Bubbles lighten the water, so where they crowd it turns pale, not white.\nfunction lift(P, x, y, c, v) {\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) P.buf[o + i] = max(P.buf[o + i], P.buf[o + i] * 0.5 + c[i] * v);\n}\n\nfunction put(P, o, r, g, b) {\n  P.buf[o] = r;\n  P.buf[o + 1] = g;\n  P.buf[o + 2] = b;\n}\n\n// The tiled wall, lit by the kettle; the counter top with its pool of light\n// and the ring's reflection; the counter's edge and the cupboard below.\nfunction room(P) {\n  const { led, tile } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const yy = clamp(y, P.surf0, 106);\n    const dy = y - yy;\n    const hw = HW[yy | 0];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const ex = (x - CX) / 17;\n      let g;\n      let a = tile[p];\n      let b = a * 4;\n      if (y \u003c 117) {\n        const dx = max(0, abs(x - CX) - hw);\n        g = (a * 100) / (1 + (dx * dx + dy * dy) / 70);\n      } else if (y \u003c 124) {\n        g = 150 * exp(-ex * ex - ((y - 117) / 4) ** 2) + (y === 118 && x >= 14 && x \u003c= 48 ? (x % 3 === 1 ? 70 : 49) : 0);\n        b = 7 + P.grain[p];\n        a = 1;\n      } else {\n        g = (y === 124 ? 60 : 12) * exp(-ex * ex * 0.6);\n        b = y === 124 ? 28 : 6;\n        a = 0.75;\n      }\n      g *= P.I;\n      put(P, p * 3, b + g * led[0], b + a + g * led[1], b + 4 * a + g * led[2]);\n    }\n  }\n}\n\n// The glass: its walls, the water, the fog and drops above it, the spout.\nfunction glass(P) {\n  const { buf, led, sh, sr, fogTex, wipe } = P;\n  const I = P.I;\n  const F = P.F;\n  const t = P.t;\n  const hot = smooth(0.3, 1, P.T);\n  const milk = 0.35 * P.boilF * P.Pw;\n  const shim = 0.06 + 0.16 * hot;\n  const wc = [0, 1, 2].map((i) => 210 * (led[i] * (1 - milk) + milk));\n  const fc = [0, 1, 2].map((i) => 255 * (0.5 * led[i] + 0.5) * (0.12 + 0.75 * I));\n  for (let x = 0; x \u003c W; x++) sr[x] = round(P.surf0 + sh[x]);\n  const glass = (o, v, a) => put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 6 + 255 * v * led[2]);\n  const fog = (o, p, y, s) => {\n    const f = F * fogTex[p] * (0.55 + 1.1 * EX12[min(127, s - y)] + 0.4 * EX6[max(0, y - TOP)]) * (1 - wipe[p]);\n    for (let i = 0; i \u003c 3; i++) buf[o + i] = buf[o + i] * 0.7 + f * fc[i];\n  };\n  for (let y = TOP; y \u003c= BOT; y++) {\n    const l = wallL(y);\n    const r = wallR(y);\n    const lw = I * (0.32 + 0.68 * exp((y - BOT) / 30)) * (1 + 0.3 * milk);\n    const row = ((y + floor(t * 9)) & 127) * W;\n    for (let x = l; x \u003c= r; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const s = sr[x];\n      if (x === l || x === r) {\n        if (x === l && y \u003c= 46) glass(o, (y & 1 ? 0.1 : 0.04) + 0.12 * I, y & 1 ? 40 : 18);\n        else glass(o, y >= s ? 0.25 * I + 0.85 * lw : 0.07 * I + 0.25 * F * I, 26);\n      } else if (y >= s) {\n        let v = lw * (1 + shim * (fogTex[row + x] - 0.8) + 0.3 * EDGE[min(x - l, r - x)]);\n        if (y === s) v = v * 1.35 + 0.18 * I;\n        put(P, o, 4 + v * wc[0], 6 + v * wc[1], 10 + v * wc[2]);\n      } else fog(o, p, y, s);\n    }\n  }\n  // The spout: a glass lip leaning out to the left, the filter where the wall was.\n  for (let y = 34; y \u003c= 46; y++) {\n    const xs = round(9 + ((y - 34) * 8) / 12);\n    for (let x = xs; x \u003c 17; x++) {\n      const o = (y * W + x) * 3;\n      if (x === xs || y === 34) glass(o, 0.05 + 0.1 * I + 0.15 * F * I, 30);\n      else fog(o, y * W + x, y, round(P.surf0));\n    }\n  }\n}\n\n// What changes only with the light, the water level and the switch: the rim\n// band, the lid and its knob, the plate, the LED ring and the base.\nfunction shell(P) {\n  const { led } = P;\n  const I = P.I;\n  const glass = (o, v, a) => put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 6 + 255 * v * led[2]);\n  for (let y = 35; y \u003c= 36; y++)\n    for (let x = 17; x \u003c= 45; x++) {\n      const v = (y === 35 ? 0.8 : 0.5) + (x === 22 || x === 23 ? 0.6 : 0);\n      put(P, (y * W + x) * 3, 30 * v + 70 * I * v * led[0], 31 * v + 70 * I * v * led[1], 36 * v + 70 * I * v * led[2]);\n    }\n  for (let j = 0; j \u003c LID.length; j++) {\n    const y = 27 + j;\n    for (let x = CX - LID[j]; x \u003c= CX + LID[j]; x++) {\n      const edge = j === 0 || (j === 2 && abs(x - CX) > 2) || (j > 2 && abs(x - CX) > LID[j - 1]);\n      let v = j === 7 ? 6 : 13 + (x \u003c CX ? 4 : 0);\n      if (edge) v += x \u003c CX ? 30 : 18;\n      put(P, (y * W + x) * 3, v, v, v + 3);\n    }\n  }\n  // The element plate, the LED ring under the glass, the base and its stand.\n  for (let y = 101; y \u003c= 116; y++) {\n    const x0 = y \u003c= 105 ? 14 : y \u003c= 111 ? 13 : y === 112 || y === 116 ? 11 : 10;\n    for (let x = x0; x \u003c= 2 * CX - x0; x++) {\n      const o = (y * W + x) * 3;\n      if (y \u003c= 103) {\n        if (x === 14 || x === 48) glass(o, 0.2 + 0.7 * I, 26);\n        else {\n          const v = [0.5, 0.3, 0.45][y - 101] * I;\n          const a = [40, 26, 13][y - 101];\n          put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n        }\n      } else if (y \u003c= 105) {\n        const v = I * (y === 104 ? (x % 3 === 1 ? 1 : 0.72) : 0.42);\n        const a = 16 * (1 - I);\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 255 * v * led[2]);\n      } else if (y \u003c= 111) {\n        const c = 0.45 + 0.55 * exp(-(((x - 24) / 12) ** 2));\n        const v = 0.3 * I * exp(-(y - 106) / 1.5);\n        const a = 34 * c * (1 - (y - 106) * 0.06);\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n      } else {\n        const v = y === 112 ? 0.4 * I * exp(-(((x - CX) / 18) ** 2)) : 0.03 * I;\n        const a = y === 112 ? 30 : 14;\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n      }\n    }\n  }\n}\n\n// Signed distance to a rounded rectangle.\nfunction box(x, y, x0, y0, x1, y1, r) {\n  const qx = abs(x - (x0 + x1) / 2) - (x1 - x0) / 2 + r;\n  const qy = abs(y - (y0 + y1) / 2) - (y1 - y0) / 2 + r;\n  return hypot(max(qx, 0), max(qy, 0)) + min(max(qx, qy), 0) - r;\n}\n\n// The black handle, its inner face lit by the glass, and the switch at its foot.\nfunction handle(P) {\n  const { led } = P;\n  const I = P.I;\n  for (let y = 37; y \u003c= 105; y++) {\n    const lw = I * (0.25 + 0.75 * exp((y - BOT) / 24));\n    for (let x = wallR(y) + 1; x \u003c= 59; x++) {\n      const out = box(x, y, 38, 37, 58, 105, 8);\n      const inn = box(x, y, 38, 45, 52.5, 96, 5);\n      if (out > 0 || inn \u003c 0) continue;\n      let a = 11 + (x === 55 && y > 46 && y \u003c 95 ? 9 : 0);\n      if (out > -1.2) a += y \u003c 50 || x \u003c 50 ? 26 : 14;\n      const v = inn \u003c 1.4 && x > 50 ? 0.3 * lw : inn \u003c 1.4 && y > 95 ? 0.18 * lw : 0;\n      put(P, (y * W + x) * 3, a + 255 * v * led[0], a + 255 * v * led[1], a + 3 + 255 * v * led[2]);\n    }\n  }\n  // The rocker tips as it clicks; its light shows the kettle is on.\n  const o = P.on ? 0 : 1;\n  for (let y = 99; y \u003c= 102; y++)\n    for (let x = 53; x \u003c= 56; x++) {\n      const lit = y === 101 + o && (x === 54 || x === 55);\n      const v = lit ? 0.4 + 0.6 * I : 0;\n      const a = lit ? 20 : y === 99 + o ? 58 : 34;\n      put(P, (y * W + x) * 3, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n    }\n}\n\n// Level marks printed on the glass: every quarter litre from 0.5, and MAX at 1.7.\nfunction gauge(P) {\n  const { led, sr } = P;\n  const I = P.I;\n  const ink = (x, y) => {\n    const wet = y >= sr[x];\n    const v = wet ? 30 + 150 * I * (0.25 + 0.75 * exp((y - BOT) / 24)) : 34 + 50 * I;\n    const o = (y * W + x) * 3;\n    for (let i = 0; i \u003c 3; i++) P.buf[o + i] = v * (0.7 + 0.3 * led[i]);\n  };\n  for (const L of [0.5, 0.75, 1, 1.25, 1.5, 1.7]) {\n    const y = round(101 - (L / 1.7) * 55);\n    const len = L === 1.7 ? 5 : L % 0.5 ? 2 : 4;\n    for (let i = 0; i \u003c len; i++) ink(wallL(y) + 2 + i, y);\n  }\n  for (let j = 0; j \u003c 5; j++) for (let i = 0; i \u003c 9; i++) if (MAXT[j][i] === \"1\") ink(25 + i + (i > 2) + (i > 5), 44 + j);\n}\n\nfunction bubbles(P) {\n  const { led, sr, bx, by, br } = P;\n  const I = P.I;\n  const k = 0.3 + 0.7 * I;\n  const bc = [0, 1, 2].map((i) => (0.45 * led[i] + 0.55) * k);\n  const wet = (x, y) => x >= 0 && x \u003c W && y >= sr[x] && y \u003c= BOT;\n  for (let i = 0; i \u003c NC; i++) {\n    const v = P.cling - P.ct[i];\n    if (v > 0 && wet(P.cx[i], P.cy[i])) add(P, P.cx[i], P.cy[i], bc, min(1, v * 4) * 150 * (0.8 + 0.2 * sin(P.t * 9 + i)));\n  }\n  for (let i = 0; i \u003c P.nb; i++) {\n    const r = br[i];\n    if (r \u003c 0.9) {\n      if (wet(round(bx[i]), round(by[i]))) lift(P, round(bx[i]), round(by[i]), bc, 150);\n      continue;\n    }\n    for (let y = floor(by[i] - r); y \u003c= Math.ceil(by[i] + r); y++)\n      for (let x = floor(bx[i] - r); x \u003c= Math.ceil(bx[i] + r); x++) {\n        const d = hypot(x - bx[i], y - by[i]);\n        if (d > r + 0.5 || !wet(x, y)) continue;\n        const e = abs(d - r);\n        if (e \u003c 0.7) lift(P, x, y, bc, 150);\n        else if (d \u003c 0.8 && x \u003c bx[i]) lift(P, x, y, bc, 120);\n      }\n  }\n  for (let i = 0; i \u003c P.ns; i++) if (P.dy[i] >= TOP) add(P, round(P.dx[i]), round(P.dy[i]), bc, 140);\n  // Drops of condensation, and the ones running down.\n  const fc = [0, 1, 2].map((i) => 0.6 * led[i] + 0.4);\n  for (let i = 0; i \u003c ND; i++) {\n    const x = P.qx[i];\n    const y = P.qy[i];\n    const v = P.F - P.qt[i];\n    if (v > 0 && y \u003c sr[x] - 1) add(P, x, y, fc, min(1, v * 2.5) * (25 + 120 * I) * (1 - P.wipe[y * W + x]));\n  }\n  for (const [x, y] of P.runners) add(P, x | 0, y | 0, fc, 40 + 150 * I);\n}\n\n// Steam: puffs splatted at half resolution, broken into wisps, lit from below\n// by the glass and faintly by the night.\nfunction steam(P) {\n  const { S, wisp, px, py, pr, pa, pg, pl, led, buf } = P;\n  S.fill(0);\n  for (let i = 0; i \u003c P.np; i++) {\n    const a = pa[i] * min(1, pg[i] / 0.3) * (1 - pg[i] / pl[i]) ** 1.6;\n    const cx = px[i] / 2;\n    const cy = py[i] / 2;\n    const r = pr[i] / 2;\n    const r2 = r * r;\n    for (let y = max(0, floor(cy - r)); y \u003c= min(SH - 1, Math.ceil(cy + r)); y++)\n      for (let x = max(0, floor(cx - r)); x \u003c= min(SW - 1, Math.ceil(cx + r)); x++) {\n        const d = ((x - cx) ** 2 + (y - cy) ** 2) / r2;\n        if (d \u003c 1) S[y * SW + x] += a * (1 - d) * (1 - d);\n      }\n  }\n  const off = P.t * 2.2;\n  const j0 = floor(off);\n  const f = off - j0;\n  for (let y = 0; y \u003c 26; y++)\n    for (let x = 0; x \u003c SW; x++) {\n      const a = wisp[((y + j0) % SH) * SW + x];\n      const b = wisp[((y + j0 + 1) % SH) * SW + x];\n      S[y * SW + x] *= 0.4 + 1.3 * (a + (b - a) * f);\n    }\n  const I = P.I;\n  const sc = [0, 1, 2].map((i) => 0.55 * led[i] + 0.45 * [0.9, 0.95, 1][i]);\n  for (let y = 0; y \u003c 50; y++) {\n    const light = 30 + I * 170 * (0.45 + 0.55 * exp(-max(0, 36 - y) / 30));\n    const hy = clamp(y / 2 - 0.25, 0, SH - 1.001);\n    const y0 = floor(hy);\n    const fy = hy - y0;\n    for (let x = 0; x \u003c W; x++) {\n      const hx = clamp(x / 2 - 0.25, 0, SW - 1.001);\n      const x0 = floor(hx);\n      const fx = hx - x0;\n      const q = y0 * SW + x0;\n      const top = S[q] + (S[q + 1] - S[q]) * fx;\n      const bot = S[q + SW] + (S[q + SW + 1] - S[q + SW]) * fx;\n      const v = top + (bot - top) * fy;\n      if (v \u003c 0.003) continue;\n      const s = (1 - exp(-1.4 * v)) * light;\n      const o = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[o + i] += s * sc[i];\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, led } = P;\n  const f = P.hue * 4;\n  const li = min(3, floor(f));\n  for (let c = 0; c \u003c 3; c++) led[c] = (LEDS[li][c] + (LEDS[li + 1][c] - LEDS[li][c]) * (f - li)) / 255;\n  // The room, the lid, the base and the handle are drawn into a layer of their\n  // own and kept until the light, the water level or the switch changes.\n  const key = `${round(P.I * 60)} ${P.hue} ${P.surf0} ${P.on}`;\n  if (key !== P.key) {\n    P.key = key;\n    P.stat = P.stat || new Float32Array(N * 3);\n    P.buf = P.stat;\n    room(P);\n    shell(P);\n    handle(P);\n    P.buf = buf;\n  }\n  buf.set(P.stat);\n  glass(P);\n  gauge(P);\n  bubbles(P);\n  steam(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-kettle","type":"code","name":"kettle","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kettle\n// Family:  kitchen\n// Idea:    A glass electric kettle on a dark kitchen counter at night heats under the blue light of its LED ring, from bubbles clinging to the element through the hiss to a rolling boil, its steam fogging the glass and rising from the spout to the top of the panel, until the switch clicks off, the light goes out and someone switches it on again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the stages of water coming to the boil in a glass kettle\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Fill=1..1.7, Cold=0..1\n//\n// Knob 1: Light. The colour of the LED ring in the base and of everything it lights: blue at 0, then teal, green and violet, to a warm amber at 1.\n// Knob 2: Speed. How fast the water heats and everything moves: at 2 the kettle comes to the boil, boils 3.5 s, clicks off and is switched on again 5 s later, about 15 s a round; at 0.2 it all runs ten times slower.\n// Knob 3: Fill. How much water is in the kettle, from one litre to the 1.7 L MAX line on the gauge; a full kettle takes about twice as long to come to the boil.\n// Knob 4: Cold. How cold the kitchen is: in a warm one the steam thins out on its way up; in a cold one it billows to the ceiling, the glass above the water fogs over and drops run down it.\n// Buttons: K1 tap switches the kettle on or off now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The body's middle column, the first glass row under the rim band, and the\n// last row of water, which lies on the element plate.\nconst CX = 31;\nconst TOP = 37;\nconst BOT = 100;\n// Steam is kept at half resolution.\nconst SW = 32;\nconst SH = 64;\nconst MAXB = 280;\nconst MAXP = 190;\nconst MAXS = 60;\nconst NSITE = 18;\nconst ND = 150;\nconst NC = 46;\n// LED colours from blue through teal, green and violet to amber.\nconst LEDS = [[40, 110, 255], [0, 205, 225], [40, 235, 100], [160, 70, 255], [255, 160, 60]];\nconst { min, max, round, floor, sin, exp, abs, hypot } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Inner half-width of the glass, a little wider at the foot.\nconst HW = Float32Array.from({ length: H }, (_, y) => 14 + (3 * (clamp(y, TOP, BOT) - TOP)) / (BOT - TOP));\nconst wallL = (y) => CX - round(HW[clamp(y, 0, H - 1)]);\nconst wallR = (y) => CX + round(HW[clamp(y, 0, H - 1)]);\nconst EX12 = Float32Array.from({ length: 128 }, (_, i) => exp(-i / 12));\nconst EDGE = Float32Array.from({ length: 64 }, (_, i) => exp(-(i - 1) / 1.6));\nconst EX6 = Float32Array.from({ length: 128 }, (_, i) => exp(-i / 6));\n// The 3x5 letters of MAX on the gauge.\nconst MAXT = [\"101111101\", \"111101101\", \"101111010\", \"101101101\", \"101101101\"];\n// The lid, row by row from its knob: half-widths.\nconst LID = [2, 2, 8, 10, 11, 12, 13, 13];\n\n// Smooth value noise, wrapping both ways.\nfunction noise(w, h, cell, oct) {\n  const out = new Float32Array(w * h);\n  let amp = 1;\n  let tot = 0;\n  for (let o = 0; o \u003c oct; o++, cell /= 2, amp *= 0.5) {\n    const gw = w / cell;\n    const gh = h / cell;\n    const g = Float32Array.from({ length: gw * gh }, rnd);\n    const at = (i, j) => g[(j % gh) * gw + (i % gw)];\n    for (let y = 0; y \u003c h; y++) {\n      const j = floor(y / cell);\n      const ty = smooth(0, 1, y / cell - j);\n      for (let x = 0; x \u003c w; x++) {\n        const i = floor(x / cell);\n        const tx = smooth(0, 1, x / cell - i);\n        const a = at(i, j) + (at(i + 1, j) - at(i, j)) * tx;\n        const b = at(i, j + 1) + (at(i + 1, j + 1) - at(i, j + 1)) * tx;\n        out[y * w + x] += amp * (a + (b - a) * ty);\n      }\n    }\n    tot += amp;\n  }\n  for (let i = 0; i \u003c out.length; i++) out[i] /= tot;\n  return out;\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), S: F(SW * SH), wipe: F(N), tile: F(N), grain: F(N), sh: F(W), sv: F(W), led: F(3), sr: new Int16Array(W) });\n  for (const k of [\"bx\", \"by\", \"br\", \"bv\", \"bp\", \"be\", \"bm\"]) P[k] = F(MAXB);\n  P.pArr = [\"px\", \"py\", \"pvx\", \"pvy\", \"pr\", \"pa\", \"pg\", \"pl\"].map((k) => (P[k] = F(MAXP)));\n  for (const k of [\"dx\", \"dy\", \"dvx\", \"dvy\"]) P[k] = F(MAXS);\n  // Subway tiles behind the counter, each a little different.\n  const shade = Float32Array.from({ length: 512 }, () => 0.85 + 0.2 * rnd());\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const band = y >> 2;\n      const u = x + (band & 1) * 4;\n      const grout = (y & 3) === 3 || (u & 7) === 7;\n      P.tile[y * W + x] = grout ? 0.5 : shade[(band * 9 + (u >> 3)) & 511] * ((y & 3) === 0 ? 1.1 : 1);\n      P.grain[y * W + x] = (rnd() - 0.5) * 9;\n    }\n  // Blotchy condensation, and the wisps the steam carries.\n  P.fogTex = noise(W, H, 16, 2).map((v) => 0.3 + 1.7 * v * v);\n  P.wisp = noise(SW, SH, 8, 3);\n  P.siteX = Float32Array.from({ length: NSITE }, (_, i) => 17 + ((i + 0.2 + 0.6 * rnd()) * 29) / NSITE);\n  P.siteW = Float32Array.from({ length: NSITE }, () => 0.5 + rnd());\n  P.acc = F(NSITE);\n  // Drops of condensation on the inside of the glass, each with the fog it needs.\n  P.qx = new Int8Array(ND);\n  P.qy = new Int16Array(ND);\n  P.qt = F(ND);\n  for (let i = 0; i \u003c ND; i++) {\n    const y = TOP + 1 + floor(rnd() * 60);\n    P.qy[i] = y;\n    P.qx[i] = wallL(y) + 1 + floor(rnd() * (wallR(y) - wallL(y) - 1));\n    P.qt[i] = 0.12 + 0.85 * rnd();\n  }\n  // Tiny bubbles that cling to the plate and the foot of the glass.\n  P.cx = new Int8Array(NC);\n  P.cy = new Int16Array(NC);\n  P.ct = F(NC);\n  for (let i = 0; i \u003c NC; i++) {\n    const side = i \u003c 30 ? 0 : i & 1 ? -1 : 1;\n    const y = side ? 72 + floor(rnd() * 28) : BOT - (rnd() \u003c 0.3 ? 1 : 0);\n    P.cy[i] = y;\n    P.cx[i] = side \u003c 0 ? wallL(y) + 1 : side > 0 ? wallR(y) - 1 : 16 + floor(rnd() * 31);\n    P.ct[i] = rnd() * 0.85;\n  }\n  P.runners = [];\n  Object.assign(P, { started: false, t: 0, on: true, T: 0.27, Pw: 1, I: 1, hold: 0, off: 0, F: 0, nb: 0, np: 0, ns: 0, eAcc: 0, lAcc: 0, cold: 0.06, m: 1, surf0: 69, fill: 1, hue: 0 });\n}\n\nfunction toggle(P, on) {\n  P.on = on;\n  P.hold = 0;\n  P.off = 0;\n}\n\nfunction release(P, s, reach) {\n  if (P.nb >= MAXB) return;\n  const i = P.nb++;\n  const depth = BOT - P.surf0;\n  P.bx[i] = P.siteX[s] + (rnd() - 0.5) * 1.5;\n  P.by[i] = BOT;\n  P.br[i] = 0.5 + 0.35 * rnd() + 0.5 * P.boilF;\n  P.bv[i] = -3;\n  P.bp[i] = rnd() * 6.3;\n  P.bm[i] = 0.55 + 0.6 * rnd();\n  // Below the boil a bubble collapses on its way up, higher as the water heats.\n  P.be[i] = rnd() \u003c reach * reach ? -99 : BOT - depth * reach * (0.3 + 0.65 * rnd());\n}\n\nfunction puff(P, x, y, vx, vy, r, a) {\n  if (P.np >= MAXP) return;\n  const i = P.np++;\n  const v = [x, y, vx, vy, r, a * (0.45 + 1.4 * P.cold), 0, (3.4 + 3.6 * P.cold) * (0.8 + 0.4 * rnd())];\n  for (let n = 0; n \u003c 8; n++) P.pArr[n][i] = v[n];\n}\n\nfunction burst(P, c, r) {\n  P.sv[c] -= 5 + 9 * r;\n  if (r > 1.1 && P.ns \u003c MAXS && rnd() \u003c 0.6) {\n    const i = P.ns++;\n    P.dx[i] = c;\n    P.dy[i] = P.surf0 + P.sh[c] - 1;\n    P.dvx[i] = (rnd() - 0.5) * 12;\n    P.dvy[i] = -(14 + 22 * rnd()) * (0.5 + r / 3);\n  }\n}\n\nfunction step(P, h) {\n  P.t += h;\n  if (P.on) {\n    // A full kettle takes longer to come to the boil.\n    P.T = min(1, P.T + (0.11 * h) / P.fill ** 1.3);\n    if (P.T >= 1 && (P.hold += h) >= 3.5) toggle(P, false);\n  } else {\n    P.T = 0.15 + (P.T - 0.15) * exp(-h / 3.5);\n    if ((P.off += h) >= 5) toggle(P, true);\n  }\n  const on = P.on ? 1 : 0;\n  P.Pw += (on - P.Pw) * (1 - exp(-h / (on ? 0.4 : 0.6)));\n  P.I += (on - P.I) * (1 - exp(-h / (on ? 0.12 : 0.25)));\n  const T = P.T;\n  P.hissF = smooth(0.45, 0.7, T);\n  P.boilF = smooth(0.8, 1, T);\n  P.cling = smooth(0.22, 0.5, T);\n  const reach = smooth(0.5, 0.95, T);\n  const steam = smooth(0.5, 1, T) * (0.2 + 0.8 * P.Pw);\n  const fogT = smooth(0.45, 0.95, T) * (0.3 + 0.7 * P.cold);\n  P.F += (fogT - P.F) * (1 - exp(-h / (fogT > P.F ? 1 : 7)));\n\n  // Bubbles: released from the sites on the plate, rising, wobbling, and\n  // either collapsing in cooler water or bursting at the surface.\n  const rate = P.Pw * (1.3 * P.hissF * (1 - 0.6 * P.boilF) + 1.1 * P.boilF);\n  for (let s = 0; s \u003c NSITE; s++) {\n    P.acc[s] += rate * P.siteW[s] * h;\n    for (; P.acc[s] >= 1; P.acc[s]--) release(P, s, reach);\n  }\n  const { bx, by, br, bv, bp, be, bm, sh, sv } = P;\n  for (let i = 0; i \u003c P.nb; ) {\n    bv[i] += (-(9 + 9 * br[i]) - bv[i]) * (1 - exp(-2 * h));\n    by[i] += bv[i] * h;\n    bp[i] += (6 + 3 * br[i]) * h;\n    bx[i] = clamp(bx[i] + sin(bp[i]) * 4 * h * br[i], wallL(by[i] | 0) + 1.5, wallR(by[i] | 0) - 1.5);\n    let dead = false;\n    if (by[i] \u003c be[i] + 3) {\n      br[i] -= 2.5 * h;\n      dead = br[i] \u003c 0.3;\n    } else if (P.boilF > 0.2) br[i] = min(P.bm[i] * (1 + 2.2 * P.boilF), br[i] + 2 * P.boilF * h);\n    const c = round(bx[i]);\n    if (!dead && by[i] - br[i] * 0.5 \u003c= P.surf0 + sh[c]) {\n      burst(P, c, br[i]);\n      dead = true;\n    }\n    if (dead) {\n      const j = --P.nb;\n      for (const A of [bx, by, br, bv, bp, be, bm]) A[i] = A[j];\n    } else i++;\n  }\n\n  // The surface: a damped string, kicked by bursts and by the churn of the boil.\n  const L = wallL(P.surf0 | 0) + 1;\n  const R = wallR(P.surf0 | 0) - 1;\n  const n = Math.ceil(h * 60);\n  for (let k = 0; k \u003c n; k++) {\n    const d = h / n;\n    for (let x = L; x \u003c= R; x++) {\n      const a = 300 * (sh[max(L, x - 1)] + sh[min(R, x + 1)] - 2 * sh[x]) - 40 * sh[x] - 5 * sv[x];\n      sv[x] += a * d;\n    }\n    for (let x = L; x \u003c= R; x++) sh[x] = clamp(sh[x] + sv[x] * d, -4, 3);\n  }\n  if (rnd() \u003c 14 * P.boilF * P.Pw * h) sv[L + floor(rnd() * (R - L + 1))] += (rnd() - 0.65) * 50 * P.boilF;\n  for (let i = 0; i \u003c P.ns; ) {\n    P.dvy[i] += 150 * h;\n    P.dx[i] = clamp(P.dx[i] + P.dvx[i] * h, L, R);\n    P.dy[i] += P.dvy[i] * h;\n    if (P.dvy[i] > 0 && P.dy[i] > P.surf0 + sh[round(P.dx[i])]) {\n      const j = --P.ns;\n      for (const A of [P.dx, P.dy, P.dvx, P.dvy]) A[i] = A[j];\n    } else i++;\n  }\n\n  // Steam out of the spout, in puffs at the boil, and round the lid.\n  P.eAcc += 36 * steam * (1 + P.boilF * P.Pw * (1.2 * max(0, sin(P.t * 5.5)) - 0.35)) * h;\n  for (; P.eAcc >= 1; P.eAcc--) puff(P, 9 + rnd() * 2, 33.5, -1 - 2 * rnd(), -8 - 6 * rnd(), 1.6, 0.8 + 0.5 * rnd());\n  P.lAcc += 7 * steam * P.boilF * h;\n  for (; P.lAcc >= 1; P.lAcc--) puff(P, 21 + rnd() * 20, 29, (rnd() - 0.5) * 3, -4 - 4 * rnd(), 1.8, 0.45 + 0.3 * rnd());\n  const { px, py, pvx, pvy, pr, pg, pl } = P;\n  const ry = 1 - exp(-h);\n  const rx = 1 - exp(-h / 0.8);\n  const grow = 3.6 + 2 * P.cold;\n  for (let i = 0; i \u003c P.np; ) {\n    pg[i] += h;\n    const wind = 8 + 3 * sin(0.07 * py[i] + 0.4 * P.t) + 2 * sin(0.17 * P.t + 1.3);\n    pvy[i] += (-12 - pvy[i]) * ry;\n    pvx[i] += (wind - pvx[i]) * rx + (rnd() - 0.5) * 24 * h;\n    px[i] += pvx[i] * h;\n    py[i] += pvy[i] * h;\n    pr[i] += grow * h;\n    if (pg[i] > pl[i] || py[i] + pr[i] \u003c -2 || px[i] > W + 12) {\n      const j = --P.np;\n      for (const A of P.pArr) A[i] = A[j];\n    } else i++;\n  }\n\n  // Drops that grow heavy run down through the fog and wipe a clear line.\n  const { wipe, runners } = P;\n  const keep = exp(-h / 6);\n  for (let y = TOP; y \u003c= BOT; y++) for (let x = 14; x \u003c= 48; x++) wipe[y * W + x] *= keep;\n  if (P.F > 0.4 && runners.length \u003c 6 && rnd() \u003c (P.F - 0.4) * (0.6 + 1.6 * P.cold) * h) {\n    const y = TOP + 1 + rnd() * 8;\n    runners.push([wallL(y | 0) + 2 + rnd() * (wallR(y | 0) - wallL(y | 0) - 4), y, 4 + 6 * rnd(), rnd() * 6]);\n  }\n  P.runners = runners.filter((r) => {\n    r[3] += h * 3;\n    r[1] += r[2] * h * (0.25 + 0.75 * max(0, sin(r[3])));\n    const p = (r[1] | 0) * W + (r[0] | 0);\n    wipe[p] = 1;\n    return r[1] \u003c P.surf0 + sh[r[0] | 0] - 1;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.m = clamp(k[1], 0.2, 3) / 2;\n  P.fill = clamp(k[2], 1, 1.7);\n  P.surf0 = 101 - (P.fill / 1.7) * 55;\n  P.cold = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Open in the hiss, three seconds after the bubbles began to cling.\n    for (let i = 0; i \u003c 30; i++) step(P, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) toggle(P, !P.on);\n  step(P, dt * P.m);\n}\n\nfunction add(P, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) P.buf[o + i] += c[i] * v;\n}\n\n// Bubbles lighten the water, so where they crowd it turns pale, not white.\nfunction lift(P, x, y, c, v) {\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) P.buf[o + i] = max(P.buf[o + i], P.buf[o + i] * 0.5 + c[i] * v);\n}\n\nfunction put(P, o, r, g, b) {\n  P.buf[o] = r;\n  P.buf[o + 1] = g;\n  P.buf[o + 2] = b;\n}\n\n// The tiled wall, lit by the kettle; the counter top with its pool of light\n// and the ring's reflection; the counter's edge and the cupboard below.\nfunction room(P) {\n  const { led, tile } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const yy = clamp(y, P.surf0, 106);\n    const dy = y - yy;\n    const hw = HW[yy | 0];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const ex = (x - CX) / 17;\n      let g;\n      let a = tile[p];\n      let b = a * 4;\n      if (y \u003c 117) {\n        const dx = max(0, abs(x - CX) - hw);\n        g = (a * 100) / (1 + (dx * dx + dy * dy) / 70);\n      } else if (y \u003c 124) {\n        g = 150 * exp(-ex * ex - ((y - 117) / 4) ** 2) + (y === 118 && x >= 14 && x \u003c= 48 ? (x % 3 === 1 ? 70 : 49) : 0);\n        b = 7 + P.grain[p];\n        a = 1;\n      } else {\n        g = (y === 124 ? 60 : 12) * exp(-ex * ex * 0.6);\n        b = y === 124 ? 28 : 6;\n        a = 0.75;\n      }\n      g *= P.I;\n      put(P, p * 3, b + g * led[0], b + a + g * led[1], b + 4 * a + g * led[2]);\n    }\n  }\n}\n\n// The glass: its walls, the water, the fog and drops above it, the spout.\nfunction glass(P) {\n  const { buf, led, sh, sr, fogTex, wipe } = P;\n  const I = P.I;\n  const F = P.F;\n  const t = P.t;\n  const hot = smooth(0.3, 1, P.T);\n  const milk = 0.35 * P.boilF * P.Pw;\n  const shim = 0.06 + 0.16 * hot;\n  const wc = [0, 1, 2].map((i) => 210 * (led[i] * (1 - milk) + milk));\n  const fc = [0, 1, 2].map((i) => 255 * (0.5 * led[i] + 0.5) * (0.12 + 0.75 * I));\n  for (let x = 0; x \u003c W; x++) sr[x] = round(P.surf0 + sh[x]);\n  const glass = (o, v, a) => put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 6 + 255 * v * led[2]);\n  const fog = (o, p, y, s) => {\n    const f = F * fogTex[p] * (0.55 + 1.1 * EX12[min(127, s - y)] + 0.4 * EX6[max(0, y - TOP)]) * (1 - wipe[p]);\n    for (let i = 0; i \u003c 3; i++) buf[o + i] = buf[o + i] * 0.7 + f * fc[i];\n  };\n  for (let y = TOP; y \u003c= BOT; y++) {\n    const l = wallL(y);\n    const r = wallR(y);\n    const lw = I * (0.32 + 0.68 * exp((y - BOT) / 30)) * (1 + 0.3 * milk);\n    const row = ((y + floor(t * 9)) & 127) * W;\n    for (let x = l; x \u003c= r; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const s = sr[x];\n      if (x === l || x === r) {\n        if (x === l && y \u003c= 46) glass(o, (y & 1 ? 0.1 : 0.04) + 0.12 * I, y & 1 ? 40 : 18);\n        else glass(o, y >= s ? 0.25 * I + 0.85 * lw : 0.07 * I + 0.25 * F * I, 26);\n      } else if (y >= s) {\n        let v = lw * (1 + shim * (fogTex[row + x] - 0.8) + 0.3 * EDGE[min(x - l, r - x)]);\n        if (y === s) v = v * 1.35 + 0.18 * I;\n        put(P, o, 4 + v * wc[0], 6 + v * wc[1], 10 + v * wc[2]);\n      } else fog(o, p, y, s);\n    }\n  }\n  // The spout: a glass lip leaning out to the left, the filter where the wall was.\n  for (let y = 34; y \u003c= 46; y++) {\n    const xs = round(9 + ((y - 34) * 8) / 12);\n    for (let x = xs; x \u003c 17; x++) {\n      const o = (y * W + x) * 3;\n      if (x === xs || y === 34) glass(o, 0.05 + 0.1 * I + 0.15 * F * I, 30);\n      else fog(o, y * W + x, y, round(P.surf0));\n    }\n  }\n}\n\n// What changes only with the light, the water level and the switch: the rim\n// band, the lid and its knob, the plate, the LED ring and the base.\nfunction shell(P) {\n  const { led } = P;\n  const I = P.I;\n  const glass = (o, v, a) => put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 6 + 255 * v * led[2]);\n  for (let y = 35; y \u003c= 36; y++)\n    for (let x = 17; x \u003c= 45; x++) {\n      const v = (y === 35 ? 0.8 : 0.5) + (x === 22 || x === 23 ? 0.6 : 0);\n      put(P, (y * W + x) * 3, 30 * v + 70 * I * v * led[0], 31 * v + 70 * I * v * led[1], 36 * v + 70 * I * v * led[2]);\n    }\n  for (let j = 0; j \u003c LID.length; j++) {\n    const y = 27 + j;\n    for (let x = CX - LID[j]; x \u003c= CX + LID[j]; x++) {\n      const edge = j === 0 || (j === 2 && abs(x - CX) > 2) || (j > 2 && abs(x - CX) > LID[j - 1]);\n      let v = j === 7 ? 6 : 13 + (x \u003c CX ? 4 : 0);\n      if (edge) v += x \u003c CX ? 30 : 18;\n      put(P, (y * W + x) * 3, v, v, v + 3);\n    }\n  }\n  // The element plate, the LED ring under the glass, the base and its stand.\n  for (let y = 101; y \u003c= 116; y++) {\n    const x0 = y \u003c= 105 ? 14 : y \u003c= 111 ? 13 : y === 112 || y === 116 ? 11 : 10;\n    for (let x = x0; x \u003c= 2 * CX - x0; x++) {\n      const o = (y * W + x) * 3;\n      if (y \u003c= 103) {\n        if (x === 14 || x === 48) glass(o, 0.2 + 0.7 * I, 26);\n        else {\n          const v = [0.5, 0.3, 0.45][y - 101] * I;\n          const a = [40, 26, 13][y - 101];\n          put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n        }\n      } else if (y \u003c= 105) {\n        const v = I * (y === 104 ? (x % 3 === 1 ? 1 : 0.72) : 0.42);\n        const a = 16 * (1 - I);\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 255 * v * led[2]);\n      } else if (y \u003c= 111) {\n        const c = 0.45 + 0.55 * exp(-(((x - 24) / 12) ** 2));\n        const v = 0.3 * I * exp(-(y - 106) / 1.5);\n        const a = 34 * c * (1 - (y - 106) * 0.06);\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n      } else {\n        const v = y === 112 ? 0.4 * I * exp(-(((x - CX) / 18) ** 2)) : 0.03 * I;\n        const a = y === 112 ? 30 : 14;\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n      }\n    }\n  }\n}\n\n// Signed distance to a rounded rectangle.\nfunction box(x, y, x0, y0, x1, y1, r) {\n  const qx = abs(x - (x0 + x1) / 2) - (x1 - x0) / 2 + r;\n  const qy = abs(y - (y0 + y1) / 2) - (y1 - y0) / 2 + r;\n  return hypot(max(qx, 0), max(qy, 0)) + min(max(qx, qy), 0) - r;\n}\n\n// The black handle, its inner face lit by the glass, and the switch at its foot.\nfunction handle(P) {\n  const { led } = P;\n  const I = P.I;\n  for (let y = 37; y \u003c= 105; y++) {\n    const lw = I * (0.25 + 0.75 * exp((y - BOT) / 24));\n    for (let x = wallR(y) + 1; x \u003c= 59; x++) {\n      const out = box(x, y, 38, 37, 58, 105, 8);\n      const inn = box(x, y, 38, 45, 52.5, 96, 5);\n      if (out > 0 || inn \u003c 0) continue;\n      let a = 11 + (x === 55 && y > 46 && y \u003c 95 ? 9 : 0);\n      if (out > -1.2) a += y \u003c 50 || x \u003c 50 ? 26 : 14;\n      const v = inn \u003c 1.4 && x > 50 ? 0.3 * lw : inn \u003c 1.4 && y > 95 ? 0.18 * lw : 0;\n      put(P, (y * W + x) * 3, a + 255 * v * led[0], a + 255 * v * led[1], a + 3 + 255 * v * led[2]);\n    }\n  }\n  // The rocker tips as it clicks; its light shows the kettle is on.\n  const o = P.on ? 0 : 1;\n  for (let y = 99; y \u003c= 102; y++)\n    for (let x = 53; x \u003c= 56; x++) {\n      const lit = y === 101 + o && (x === 54 || x === 55);\n      const v = lit ? 0.4 + 0.6 * I : 0;\n      const a = lit ? 20 : y === 99 + o ? 58 : 34;\n      put(P, (y * W + x) * 3, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n    }\n}\n\n// Level marks printed on the glass: every quarter litre from 0.5, and MAX at 1.7.\nfunction gauge(P) {\n  const { led, sr } = P;\n  const I = P.I;\n  const ink = (x, y) => {\n    const wet = y >= sr[x];\n    const v = wet ? 30 + 150 * I * (0.25 + 0.75 * exp((y - BOT) / 24)) : 34 + 50 * I;\n    const o = (y * W + x) * 3;\n    for (let i = 0; i \u003c 3; i++) P.buf[o + i] = v * (0.7 + 0.3 * led[i]);\n  };\n  for (const L of [0.5, 0.75, 1, 1.25, 1.5, 1.7]) {\n    const y = round(101 - (L / 1.7) * 55);\n    const len = L === 1.7 ? 5 : L % 0.5 ? 2 : 4;\n    for (let i = 0; i \u003c len; i++) ink(wallL(y) + 2 + i, y);\n  }\n  for (let j = 0; j \u003c 5; j++) for (let i = 0; i \u003c 9; i++) if (MAXT[j][i] === \"1\") ink(25 + i + (i > 2) + (i > 5), 44 + j);\n}\n\nfunction bubbles(P) {\n  const { led, sr, bx, by, br } = P;\n  const I = P.I;\n  const k = 0.3 + 0.7 * I;\n  const bc = [0, 1, 2].map((i) => (0.45 * led[i] + 0.55) * k);\n  const wet = (x, y) => x >= 0 && x \u003c W && y >= sr[x] && y \u003c= BOT;\n  for (let i = 0; i \u003c NC; i++) {\n    const v = P.cling - P.ct[i];\n    if (v > 0 && wet(P.cx[i], P.cy[i])) add(P, P.cx[i], P.cy[i], bc, min(1, v * 4) * 150 * (0.8 + 0.2 * sin(P.t * 9 + i)));\n  }\n  for (let i = 0; i \u003c P.nb; i++) {\n    const r = br[i];\n    if (r \u003c 0.9) {\n      if (wet(round(bx[i]), round(by[i]))) lift(P, round(bx[i]), round(by[i]), bc, 150);\n      continue;\n    }\n    for (let y = floor(by[i] - r); y \u003c= Math.ceil(by[i] + r); y++)\n      for (let x = floor(bx[i] - r); x \u003c= Math.ceil(bx[i] + r); x++) {\n        const d = hypot(x - bx[i], y - by[i]);\n        if (d > r + 0.5 || !wet(x, y)) continue;\n        const e = abs(d - r);\n        if (e \u003c 0.7) lift(P, x, y, bc, 150);\n        else if (d \u003c 0.8 && x \u003c bx[i]) lift(P, x, y, bc, 120);\n      }\n  }\n  for (let i = 0; i \u003c P.ns; i++) if (P.dy[i] >= TOP) add(P, round(P.dx[i]), round(P.dy[i]), bc, 140);\n  // Drops of condensation, and the ones running down.\n  const fc = [0, 1, 2].map((i) => 0.6 * led[i] + 0.4);\n  for (let i = 0; i \u003c ND; i++) {\n    const x = P.qx[i];\n    const y = P.qy[i];\n    const v = P.F - P.qt[i];\n    if (v > 0 && y \u003c sr[x] - 1) add(P, x, y, fc, min(1, v * 2.5) * (25 + 120 * I) * (1 - P.wipe[y * W + x]));\n  }\n  for (const [x, y] of P.runners) add(P, x | 0, y | 0, fc, 40 + 150 * I);\n}\n\n// Steam: puffs splatted at half resolution, broken into wisps, lit from below\n// by the glass and faintly by the night.\nfunction steam(P) {\n  const { S, wisp, px, py, pr, pa, pg, pl, led, buf } = P;\n  S.fill(0);\n  for (let i = 0; i \u003c P.np; i++) {\n    const a = pa[i] * min(1, pg[i] / 0.3) * (1 - pg[i] / pl[i]) ** 1.6;\n    const cx = px[i] / 2;\n    const cy = py[i] / 2;\n    const r = pr[i] / 2;\n    const r2 = r * r;\n    for (let y = max(0, floor(cy - r)); y \u003c= min(SH - 1, Math.ceil(cy + r)); y++)\n      for (let x = max(0, floor(cx - r)); x \u003c= min(SW - 1, Math.ceil(cx + r)); x++) {\n        const d = ((x - cx) ** 2 + (y - cy) ** 2) / r2;\n        if (d \u003c 1) S[y * SW + x] += a * (1 - d) * (1 - d);\n      }\n  }\n  const off = P.t * 2.2;\n  const j0 = floor(off);\n  const f = off - j0;\n  for (let y = 0; y \u003c 26; y++)\n    for (let x = 0; x \u003c SW; x++) {\n      const a = wisp[((y + j0) % SH) * SW + x];\n      const b = wisp[((y + j0 + 1) % SH) * SW + x];\n      S[y * SW + x] *= 0.4 + 1.3 * (a + (b - a) * f);\n    }\n  const I = P.I;\n  const sc = [0, 1, 2].map((i) => 0.55 * led[i] + 0.45 * [0.9, 0.95, 1][i]);\n  for (let y = 0; y \u003c 50; y++) {\n    const light = 30 + I * 170 * (0.45 + 0.55 * exp(-max(0, 36 - y) / 30));\n    const hy = clamp(y / 2 - 0.25, 0, SH - 1.001);\n    const y0 = floor(hy);\n    const fy = hy - y0;\n    for (let x = 0; x \u003c W; x++) {\n      const hx = clamp(x / 2 - 0.25, 0, SW - 1.001);\n      const x0 = floor(hx);\n      const fx = hx - x0;\n      const q = y0 * SW + x0;\n      const top = S[q] + (S[q + 1] - S[q]) * fx;\n      const bot = S[q + SW] + (S[q + SW + 1] - S[q + SW]) * fx;\n      const v = top + (bot - top) * fy;\n      if (v \u003c 0.003) continue;\n      const s = (1 - exp(-1.4 * v)) * light;\n      const o = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[o + i] += s * sc[i];\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, led } = P;\n  const f = P.hue * 4;\n  const li = min(3, floor(f));\n  for (let c = 0; c \u003c 3; c++) led[c] = (LEDS[li][c] + (LEDS[li + 1][c] - LEDS[li][c]) * (f - li)) / 255;\n  // The room, the lid, the base and the handle are drawn into a layer of their\n  // own and kept until the light, the water level or the switch changes.\n  const key = `${round(P.I * 60)} ${P.hue} ${P.surf0} ${P.on}`;\n  if (key !== P.key) {\n    P.key = key;\n    P.stat = P.stat || new Float32Array(N * 3);\n    P.buf = P.stat;\n    room(P);\n    shell(P);\n    handle(P);\n    P.buf = buf;\n  }\n  buf.set(P.stat);\n  glass(P);\n  gauge(P);\n  bubbles(P);\n  steam(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Fill=1..1.7, Cold=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The colour of the LED ring in the base and of everything it lights: blue at 0, then teal, green and violet, to a warm amber at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the water heats and everything moves: at 2 the kettle comes to the boil, boils 3.5 s, clicks off and is switched on again 5 s later, about 15 s a round; at 0.2 it all runs ten times slower."},{"name":"Fill","min":1,"max":1.7,"about":"How much water is in the kettle, from one litre to the 1.7 L MAX line on the gauge; a full kettle takes about twice as long to come to the boil."},{"name":"Cold","min":0,"max":1,"about":"How cold the kitchen is: in a warm one the steam thins out on its way up; in a cold one it billows to the ceiling, the glass above the water fogs over and drops run down it."}],"start":[0,2,1,0.06],"measures":{"motion":0.2843,"detail":0.0449,"edges":0.2669,"complexity":1.5413,"coverage":0.6281,"colour":0.1671,"drift":0.1681},"knobResponse":[0.1034,0.0699,0.0403,0.056]},{"slug":"kingfisher","title":"Kingfisher","family":"bird","round":20,"note":"강둑 단면이 오리나무 가지부터 강바닥 자갈까지 128줄을 다 써요. 물총새가 가지에서 머리를 까딱이며 물을 보다가 곧장 내리꽂혀 물보라와 거품 줄을 남기고, 피라미를 물고 올라와 가지에 두드린 뒤 삼켜요. K1 을 누르면 바로 뛰어들어요.","idea":"A river bank cut from the alder overhead to the pebbles on the bed: a kingfisher watches from a branch, drops straight in with a splash and a trail of bubbles, comes up with a minnow, beats it on the branch and swallows it.","buttons":"K1 tap sends the kingfisher down now, or as soon as it is back on the branch.","code":"// ===== Patternflow pattern =====\n// Title:   Kingfisher\n// Family:  bird\n// Idea:    A river bank cut from the alder overhead to the pebbles on the bed: a kingfisher watches from a branch, drops straight in with a splash and a trail of bubbles, comes up with a minnow, beats it on the branch and swallows it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after split-level river photographs of the common kingfisher (Alcedo atthis)\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Fish=6..60, Current=-1..1\n//\n// Knob 1: Hour. Early morning at 0 with the sun low in the east; noon sends the light shafts straight down, the afternoon goes gold, dusk goes pink.\n// Knob 2: Speed. How fast the river, the wind, the clouds and the bird go: at 2 it dives within two seconds, then every ten to fifteen.\n// Knob 3: Fish. How rich the river runs: six minnows and eight strands of water-crowfoot at 6, a shoal of sixty in a thick weed bed under reeds and yellow flag at 60. More fish, and the bird goes sooner.\n// Knob 4: Current. Near still at 0.06; turned either way the river runs that way, the weed streams out, the minnows face upstream and the alder stirs. Run hard, it goes the colour of tea.\n// Buttons: K1 tap sends the kingfisher down now, or as soon as it is back on the branch.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Waterline, top of the far bank, the bird's feet on the branch.\nconst [SURF, BANK, PX, PY] = [84, 47, 37, 33];\nconst { min, max, floor, round, sin, cos, abs, sqrt, pow, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every `per` cells.\nfunction vn(x, y, per = 4096) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = ((xi % per) + per) % per, x1 = (x0 + 1) % per, a = hash(x0, yi), b = hash(x1, yi), c = hash(x0, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, yi + 1)) * su * sv;\n}\n\n// The bird facing right: C cobalt, T turquoise back, O orange, W white, K bill, R feet.\n// A pose: rows, anchor, bill tip, and how a fish in the bill lies.\nconst COL = { C: [24, 92, 214], T: [40, 214, 238], O: [252, 112, 24], o: [200, 78, 20], W: [238, 240, 228], K: [20, 18, 26], R: [236, 72, 58] };\nconst pose = (s, ax, ay, tx, ty, fo) => ({ rows: s.split(\" \"), ax, ay, tx, ty, fo });\nconst BODY = \" .CCWW TCCOO TCCOO .CCOo .CC.R .C\";\nconst LEVEL = pose(\"..CCC .CCCCKKKK .WOOOK\" + BODY, 4, 7, 8, 1, \"v\");\nconst DOWN = pose(\"..CCC .CCCCK .WOOOKK .CCWW.KK\" + BODY.slice(6), 4, 7, 7, 3, \"v\");\nconst UP = pose(\"......K .....K ..CCK .CCCC .WOOO\" + BODY, 4, 9, 6, 0, \"d\");\nconst WIND = { ...UP, fo: \"h\" };\nconst SLAM = pose(\". .CCC TCCCC TCWOOC .CCOOWK .CCOo.K .CC.R.K .C\", 4, 6, 6, 6, \"h\");\nconst D45 = pose(\"CT .CTT .OCCT ..OCCC ...WOCK ......K .......K\", 5, 4, 7, 6, \"h\");\nconst DV = pose(\".C .CT OCT OCT OCT WOC .KC .K .K\", 1, 5, 1, 8, \"h\");\nconst RV = pose(\".K .K .KC WOC OCT OCT OCT .CT .C\", 1, 3, 1, 0, \"h\");\nconst FA = pose(\"....CC .....CC CTTTTTCCC .COOOOWOCKKK\", 5, 2, 11, 3, \"v\");\nconst FB = pose(\". . CTTTTCCCC .COOCCWOCKKK ....CC .....C\", 5, 2, 11, 3, \"v\");\n// Morning to dusk: sky overhead, sky low, light, sun.\nconst HOURS = [[96, 150, 214, 214, 218, 196, 1, 0.97, 0.9, 0.85], [54, 122, 228, 158, 198, 236, 1, 1, 1, 1], [66, 118, 204, 226, 204, 150, 1.06, 0.97, 0.84, 0.92], [70, 82, 158, 248, 156, 92, 1.12, 0.84, 0.7, 0.7], [36, 38, 94, 212, 100, 104, 0.9, 0.72, 0.82, 0.45]];\nconst [PERCH, LEAN, DIVE, UNDER, RISE, FLY, BEAT, SWALLOW] = [0, 1, 2, 3, 4, 5, 6, 7];\nconst DUR = [0, 0.35, 0.62, 0.5, 0.74, 1.5, 2.1, 1.3];\nconst TUFT = [[1, 0, 0.95], [2, -1, 0.8], [2, 1, 0.5], [3, -1, 0.4], [1, -1, 0.7]];\n\nfunction build(P) {\n  const { alb, mat } = P, crown = [], bed = (P.bed = []), lv = [];\n  const set = (x, y, m, r, g, b) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  const clump = (x, y) => vn(x * 0.2, y * 0.22) * 0.65 + vn(x * 0.55, y * 0.5) * 0.35;\n  for (let x = 0; x \u003c W; x++) (crown[x] = 11 + 8 * vn(x * 0.1, 3.3) + 4 * vn(x * 0.33, 8.1)), (bed[x] = 115.5 + 2.5 * sin(x * 0.11 + 0.7) + 3 * vn(x * 0.25, 11.5));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, g = hash(x + 900, y) - 0.5, c = y - crown[x], wet = cl((y - SURF + 7) / 6, 0, 1);\n    const n = c >= 0 && y \u003c= BANK && clump(x, y), k = n && (0.62 + 0.55 * n + 0.9 * (clump(x - 1.5, y - 1.5) - n)) * (1 - (0.42 * c) / (BANK - crown[x] + 1)) + 0.08 * g + (c \u003c 1.5 ? 0.35 : 0);\n    const e = (0.78 + 0.36 * (vn(2.5, y * 0.32) * 0.7 + vn(x * 0.06, y * 0.3) * 0.3) + 0.12 * g) * (1 - 0.38 * wet), q = 0.8 + 0.3 * vn(x * 0.7, y * 0.7) + 0.2 * g;\n    if (c \u003c 0) set(x, y, 0, 0, 0, 0);\n    else if (y \u003c= BANK) set(x, y, 2, 58 * k, 96 * k, 58 * k + 6);\n    else if (y \u003c SURF) set(x, y, 4, 138 * e, (100 + 14 * wet) * e, (64 + 6 * wet) * e);\n    else set(x, y, y \u003c bed[x] ? 5 : 6, 150 * q, 134 * q, 98 * q);\n  }\n  const ST = [[196, 172, 130], [150, 146, 136], [214, 182, 120], [128, 110, 90], [226, 198, 146]];\n  for (let n = 0; n \u003c 80; n++) {\n    const cx = rnd() * 66 - 1, cy = bed[cl(round(cx), 0, W - 1)] + 1 + rnd() * 9, rx = 1.3 + rnd() * 2.4, ry = 0.9 + rnd() * 1.4, c = ST[floor(rnd() * 5)], t = 0.85 + rnd() * 0.3;\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const dx = (x + 0.5 - cx) / rx, dy = (y + 0.5 - cy) / ry, r = dx * dx + dy * dy, k = t * (r > 0.6 ? 0.62 : 1) * (1 + 0.28 * cl(-dx - dy, -1, 1));\n        if (r \u003c= 1 && y \u003c H && y >= bed[x]) set(x, y, 6, c[0] * k, c[1] * k, c[2] * k);\n      }\n  }\n  // Grass, roots, and the kingfisher's burrow.\n  for (let x = 0; x \u003c W; x++) for (let y = BANK - floor(rnd() * 3.6), k; y \u003c= BANK + 1; y++) (k = 0.75 + rnd() * 0.5), set(x, y, 3, 74 * k, 124 * k, 46 * k);\n  for (let n = 0; n \u003c 6; n++) for (let x = 8 + rnd() * 30, i = 0, len = 5 + rnd() * 12; i \u003c len; i++) set(round((x += (rnd() - 0.5) * 1.2)), BANK + 2 + i, 4, 66, 50, 38);\n  for (let y = 53; y \u003c 64; y++)\n    for (let x = 16; x \u003c 29; x++) {\n      const dx = (x - 22) / 3.1, dy = (y - 57.5) / 2.6, r = dx * dx + dy * dy, q = r * r;\n      if (r \u003c 1) set(x, y, 4, 12 + 40 * q, 9 + 28 * q, 7 + 18 * q);\n      else if (r \u003c 1.5 && dy > 0.4) set(x, y, 4, 172, 132, 92);\n    }\n  for (let y = 0; y \u003c= BANK + 1; y++)\n    for (let x = 0, w = 4 + max(0, y - 30) * 0.14, k; x \u003c w; x++) (k = (0.72 + 0.4 * vn(x * 0.9, y * 0.13)) * (x \u003c 1 ? 1.25 : x > w - 1.5 ? 0.7 : 1)), set(x, y, 1, 104 * k, 98 * k, 88 * k);\n  for (let x = 3; x \u003c= 55; x++) {\n    const th = 3.2 - (2.4 * (x - 4)) / 51, n = max(1, round(th)), top = round(35.6 - 0.06 * (x - 4) + 0.0009 * (x - 4) ** 2 - th / 2);\n    for (let i = 0, k; i \u003c n; i++) (k = i ? (i === n - 1 ? 0.6 : 0.9) : 1.35), set(x, top + i, 1, 106 * k, 96 * k, 84 * k);\n  }\n  for (const tw of [[20, 34, 24, 29, 27, 26], [30, 35, 33, 38, 35, 41], [46, 35, 49, 38, 51, 42], [54, 35, 58, 34, 61, 37]])\n    for (let s = 0; s \u003c 4; s += 2) for (let i = 0; i \u003c= 8; i++) set(round(mix(tw[s], tw[s + 2], i / 8)), round(mix(tw[s + 1], tw[s + 3], i / 8)), 1, 92, 82, 72);\n  // Alder leaves, none in front of the bird.\n  for (const [cx, cy, r, n, shade] of [[3, 2, 12, 110, 1], [15, 0, 11, 80, 1], [27, 1, 8, 50, 1], [36, -1, 6, 22, 1], [7, 14, 7, 40, 1], [24, 26, 4, 18], [13, 26, 3, 10], [35, 42, 3, 10], [50, 42, 4, 18], [60, 36, 3, 12], [49, 30, 3, 8]]) {\n    for (let y = floor(cy - r); shade && y \u003c= cy + r; y++)\n      for (let x = floor(cx - r), d; x \u003c= cx + r; x++) if ((d = hypot(x - cx, (y - cy) * 1.3) / r) \u003c 0.85 && vn(x * 0.45, y * 0.45 + 40) > 0.3 + d * 0.3) set(x, y, 1, 34, 58, 30);\n    for (let i = 0; i \u003c n; i++) {\n      const a = rnd() * PI * 2, rr = r * sqrt(rnd()), x = round(cx + cos(a) * rr), y = round(cy + sin(a) * rr * 0.75);\n      if (x \u003c 31 || x > 46 || y \u003c 21 || y > 33) lv.push(x, y, floor(rnd() * 4), 0.75 + rnd() * 0.5, rnd() * 7, rnd() * 7, cy > 20 ? 1 : 0);\n    }\n  }\n  P.leaves = lv;\n  // More weed, reeds and starwort as the river gets richer.\n  P.weed = [6, 17, 28, 40, 50, 59, 12, 23, 45, 34, 55, 2, 20, 42, 62, 31, 9, 48, 26, 14, 37, 53, 4, 57].map((x) => [x, 16 + rnd() * 26, rnd() * 7, 0.8 + rnd() * 0.4]);\n  P.reeds = Array.from({ length: 32 }, (_, i) => [(i * 23.7 + rnd() * 6) % 64, 7 + rnd() * 10, rnd() * 7, i % 6 === 3]);\n  P.tuft = bed.map((_, x) => [vn(x * 0.3, 50.5), 1 + floor(rnd() * 3)]);\n  const tex = (h, f) => Float32Array.from({ length: 128 * h }, (_, i) => f(i & 127, i >> 7));\n  P.cloud = tex(24, (x, y) => sm((vn(x / 14, y / 5, 128 / 14) * 0.65 + vn(x / 6, y / 3 + 9, 128 / 6) * 0.35 - 0.48) * 3.2) * (1 - y / 30));\n  P.shad = tex(1, (i) => sm(1 - abs(i - 34) / 30) + 0.7 * sm(1 - abs(i - 96) / 18));\n  const S = (P.shaft = new Float32Array(256));\n  for (let n = 0; n \u003c 9; n++) {\n    const c = rnd() * 256, w = 6 + rnd() * 18, a = 0.4 + rnd() * 0.6;\n    for (let i = 0; i \u003c 256; i++) S[i] = min(1, S[i] + a * Math.exp(-((abs(((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n}\n\n// Light for the hour. A river in spate is the colour of tea.\nfunction paint(P, h) {\n  const f = h * 4, i = min(3, floor(f)), B = HOURS[i + 1], q = HOURS[i].map((v, c) => mix(v, B[c], f - i)), { alb, mat, bg } = P;\n  const sun = (P.sun = q[9]), top = q.slice(0, 3), low = (P.low = q.slice(3, 6)), tint = (P.tint = q.slice(6, 9).map((v) => v * sun)), s = (P.silt = 0.6 * P.cur * P.cur);\n  P.sunDir = -0.9 + 1.8 * h;\n  const M = (a, b) => a.map((v, c) => mix(v, b[c], s)), WT = M([88, 128, 94], [112, 98, 52]), WD = M([30, 58, 44], [50, 40, 24]), fl = M([0.74, 0.88, 0.72], [0.62, 0.6, 0.4]);\n  for (let p = 0; p \u003c N; p++) {\n    const y = p >> 6, m = mat[p], ts = pow(cl(y / 24, 0, 1), 1.3), d = cl((y - SURF - 1) / (H - SURF - 2), 0, 1);\n    for (let c = 0, o = p * 3, a; c \u003c 3; c++)\n      (a = alb[o + c] * tint[c]),\n        (bg[o + c] =\n          m === 0 ? mix(top[c], low[c], ts)\n          : m === 2 ? mix(a, low[c] * 0.5, 0.16)\n          : m === 5 ? mix(WT[c], WD[c], pow(d, 0.8)) * tint[c] + low[c] * 0.08 * (1 - d)\n          : m === 6 ? mix(a * fl[c] * (0.95 - 0.25 * d), WD[c] * tint[c], s * 0.8)\n          : a);\n  }\n}\n\nfunction stepFish(P, d) {\n  const t = P.t, cx = 32 + 15 * sin(t * 0.13 + 0.4) + 6 * sin(t * 0.31), cy = 103 + 5 * sin(t * 0.21 + 1.3);\n  for (const F of P.fish) {\n    // The one it has picked drifts into the line of the dive.\n    const held = P.bs && P.bs \u003c= UNDER && F === P.prey && P.hit;\n    if (held) F.vx += (P.tx - F.x) * 2 * d;\n    if (F.s > 0) F.s -= d;\n    else if (!held) {\n      F.vx += ((cx + F.ox + 4 * sin(t * 0.7 + F.ph) - F.x) * 0.9 - F.vx * 1.1) * d + (rnd() - 0.5) * 30 * d;\n      F.vy += ((cy + F.oy + 2 * sin(t * 0.9 + F.ph * 1.3) - F.y) * 0.9 - F.vy * 1.4) * d + (rnd() - 0.5) * 16 * d;\n      if (rnd() \u003c d * 0.45) F.g = 0.25;\n    }\n    const lim = F.s > 0 ? 36 : held ? 8 : 14, sp = hypot(F.vx, F.vy);\n    if (sp > lim) (F.vx *= lim / sp), (F.vy *= lim / sp);\n    F.x += F.vx * d;\n    F.y = cl(F.y + F.vy * d, SURF + 5, P.bed[cl(round(F.x), 0, W - 1)] - 3);\n    const f = abs(P.cur) > 0.12 && F.s \u003c= 0 ? (P.cur > 0 ? -1 : 1) : abs(F.vx) > 2 ? Math.sign(F.vx) : F.f;\n    if (f !== F.f) (F.f = f), (F.g = 0.3);\n    F.g -= d;\n  }\n}\n\n// Drops, rings, foam; the dive scatters all but its minnow.\nfunction splash(P, x, n, up) {\n  for (let i = 0; i \u003c n; i++) P.dr.push([x + (rnd() - 0.5) * 4, SURF - 1, (rnd() - 0.5) * (i % 7 ? 46 : 4), -(18 + rnd() * up) * (i % 7 ? 1 : 1.5)]);\n  P.ri.push([x, 0, 1], [x, 0, 0.6, 1]);\n  for (const F of n \u003c 30 ? [] : P.fish) {\n    const dx = F.x - x, dy = F.y - SURF, r = hypot(dx, dy) + 1;\n    if (r > 27 || (F === P.prey && P.hit)) continue;\n    [F.s, F.g] = [0.7 + rnd() * 0.6, 0.3];\n    F.vx += (dx / r) * 34;\n    F.vy += (dy / r) * 20 + 6;\n  }\n}\n\nfunction stepBird(P, d) {\n  let k, u = (P.bt += d) / (DUR[P.bs] || 1);\n  const go = (s) => ((P.bs = s), (P.bt = 0));\n  const bub = (p, x, y) => rnd() \u003c p && P.bu.push([P.bx + (rnd() - 0.5) * x, P.by + y, 14 + rnd() * 14, rnd() * 7]);\n  switch (P.bs) {\n    case PERCH:\n      if ((P.look -= d) \u003c= 0) {\n        P.pose = rnd() \u003c 0.55 ? LEVEL : DOWN;\n        P.look = 0.4 + rnd() * 1.2;\n      }\n      if (P.bt >= P.wait * (1 - 0.45 * P.rich) || P.go) {\n        // A minnow below the branch. One dive in four misses, never the first.\n        let best = null, sc = 1e9;\n        for (const F of P.fish) {\n          const s = abs(F.x - PX - 10) + 0.5 * abs(F.y - 100);\n          if (F.x >= PX - 6 && F.x \u003c= 60 && s \u003c sc) [sc, best] = [s, F];\n        }\n        Object.assign(P, { go: false, prey: best, tx: best ? cl(best.x + best.vx * 0.6, PX - 2, 53) : PX + 10, hit: !!best && (!P.dives++ || rnd() \u003c 0.75) });\n        go(LEAN);\n      }\n      break;\n    case LEAN:\n      [P.pose, P.bx, P.by, P.face] = [D45, PX + 2, PY - 4 + u, 1];\n      if (u >= 1) go(DIVE);\n      break;\n    case DIVE:\n      P.face = P.tx >= PX ? 1 : -1;\n      P.bx = mix(PX + 2, P.tx, pow(u, 0.8));\n      P.by = mix(PY - 3, SURF - 2, pow(u, 1.8));\n      P.pose = u \u003c 0.22 ? D45 : DV;\n      if (u >= 1) {\n        splash(P, (P.x0 = P.bx), 30, 50);\n        for (let i = 0; i \u003c 14; i++) bub(1, 5, 3 + rnd() * 5);\n        go(UNDER);\n      }\n      break;\n    case UNDER: {\n      const q = P.hit && P.fish.includes(P.prey) ? P.prey : null, e = 1 - (1 - u) * (1 - u);\n      P.bx = mix(P.x0, q ? q.x : P.x0, e);\n      P.by = mix(SURF - 2, q ? q.y - 2 : 99, e);\n      P.pose = DV;\n      bub(0.8, 3, -3);\n      if (u >= 1) {\n        if (q) P.fish.splice(P.fish.indexOf(q), 1);\n        [P.fl, P.prey, P.y0] = [q ? 4 : 0, null, P.by];\n        go(RISE);\n      }\n      break;\n    }\n    case RISE: {\n      const w = cl((u - 0.43) / 0.57, 0, 1);\n      P.pose = u \u003c 0.22 ? DV : RV;\n      if (!w) P.bx += sin(P.bt * 60) * 9 * d;\n      P.by = mix(P.y0, SURF - 2, w * w);\n      bub(w ? 0.7 : 0.5, 3, w ? 4 : -2);\n      if (u >= 1) splash(P, (P.x0 = P.bx), 16, 32), go(FLY);\n      break;\n    }\n    case FLY:\n      P.face = PX >= P.x0 ? 1 : -1;\n      P.bx = mix(P.x0, PX, sm(u));\n      P.by = mix(SURF - 4, PY - 3, 1 - (1 - u) * (1 - u)) - 7 * sin(PI * u);\n      P.pose = floor(P.bt / 0.07) & 1 ? FB : FA;\n      if (u \u003c 0.25 && rnd() \u003c 0.5) P.dr.push([P.bx + (rnd() - 0.5) * 6, P.by + 2, (rnd() - 0.5) * 10, rnd() * 10]);\n      if (u >= 1 && !P.fl) for (let i = 0; i \u003c 10; i++) P.dr.push([PX + (rnd() - 0.5) * 6, PY - 4 - rnd() * 4, (rnd() - 0.5) * 30, -rnd() * 20]);\n      if (u >= 1) (k = P.fl), perch(P), k && ((P.fl = k), go(BEAT));\n      break;\n    case BEAT: {\n      // Four whacks on the branch.\n      k = floor(P.bt / 0.42);\n      const slam = P.bt % 0.42 > 0.24 && k \u003c 4;\n      P.pose = k > 3 ? LEVEL : slam ? SLAM : WIND;\n      if (slam && !P.slam) (P.shake = 1), P.dr.push([PX + 7, PY - 1, 8 + rnd() * 10, -10 - rnd() * 14]);\n      P.slam = slam;\n      if (u >= 1) go(SWALLOW);\n      break;\n    }\n    case SWALLOW:\n      P.pose = u \u003c 0.85 ? UP : LEVEL;\n      P.fl = u \u003c 0.3 ? 3 : u \u003c 0.55 ? 2 : u \u003c 0.8 ? 1 : 0;\n      if (u >= 1) perch(P);\n  }\n}\n\nfunction perch(P) {\n  Object.assign(P, { bs: PERCH, bt: 0, bx: PX, by: PY, face: 1, pose: LEVEL, look: 0.4, fl: 0, wait: P.queued ? 0.3 : 3.5 + rnd() * 4, queued: false });\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), h: -1, t: 0, dives: 0, fish: [], dr: [], bu: [], ri: [], shake: 0 });\n  build(P);\n  perch(P);\n  P.wait = 1.3;\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06], h = cl(k[0], 0, 1), cur = cl(k[3], -1, 1);\n  const rich = (P.rich = cl((k[2] - 6) / 54, 0, 1)), want = round(cl(k[2], 6, 60)), d = cl(dt, 0, 0.1) * (P.rate = cl(k[1], 0.2, 3) / 2);\n  if (abs(h - P.h) > 0.0005 || abs(cur - P.cur) > 0.01) (P.h = h), (P.cur = cur), paint(P, h);\n  [P.nweed, P.wlen, P.every] = [8 + round(rich * 16), 0.62 + 0.55 * rich, rich > 0.5 ? 2 : 3];\n  for (let e = P.t > 0; P.fish.length \u003c want; )\n    P.fish.push({ x: e ? (cur >= 0 ? -3 : 66) : 6 + rnd() * 52, y: e ? 100 + rnd() * 8 : 94 + rnd() * 18, vx: 0, vy: 0, ox: (rnd() - 0.5) * 30, oy: (rnd() - 0.5) * 12, ph: rnd() * 7, f: rnd() \u003c 0.5 ? 1 : -1, s: 0, g: 0 });\n  P.fish.length = want;\n  // The river's clock starts further in the faster it runs.\n  if (!P.t) P.t = 6 * P.rate;\n  if (input.btnPressed?.[0]) P[P.bs === PERCH ? \"go\" : \"queued\"] = true;\n  P.t += d;\n  stepFish(P, d);\n  stepBird(P, d);\n  P.dr = P.dr.filter((p) => ((p[3] += 150 * d), (p[0] += p[2] * d), (p[1] += p[3] * d), !(p[1] > SURF && p[3] > 0)));\n  P.bu = P.bu.filter((b) => ((b[1] -= b[2] * d), (b[0] += (sin(b[3] + b[1] * 0.6) * 3 + cur * 8) * d), b[1] > SURF + 1));\n  P.ri = P.ri.filter((r) => ((r[1] += 13 * d), (r[0] += cur * 10 * d), (r[2] -= (r[3] ? 1 : 0.42) * d) > 0));\n  P.shake = max(0, P.shake - d * 3);\n}\n\nlet BUF;\nfunction Ao(o, r, g, b, a = 1) {\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nconst A = (x, y, r, g, b, a) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && Ao((y * W + x) * 3, r, g, b, a);\n\nfunction drawBird(P) {\n  const S = P.pose, face = P.face, ox = round(P.bx), oy = round(P.by), L = 0.45 + 0.6 * P.sun, fk = 0.5 + 0.5 * P.sun;\n  const fl = P.bs && P.bs \u003c= FLY ? 1.2 : 0.8 + 0.3 * max(0, sin(P.t * 2.3));\n  S.rows.forEach((row, r) => {\n    for (let c = 0; c \u003c row.length; c++) {\n      const col = COL[row[c]], x = ox + (c - S.ax) * face, y = oy + r - S.ay, k = L * (row[c] === \"T\" ? fl : 1), w = y > SURF;\n      if (col) A(x, y, col[0] * k * (w ? 0.66 : 1), col[1] * k * (w ? 0.88 : 1), col[2] * k * (w ? 0.8 : 1));\n    }\n  });\n  const [sx, sy, dx, dy] = { v: [-1, -1, 0, 1], h: [-1, 1, 1, 0], d: [1, -1, 1, -1] }[S.fo], tx = ox + (S.tx - S.ax) * face, ty = oy + S.ty - S.ay;\n  for (let i = 0; i \u003c P.fl; i++) {\n    const x = tx + (sx + i * dx) * face, y = ty + sy + i * dy, k = fk * (y > SURF ? 0.8 : 1), b = i === (dy > 0 ? 3 : dy ? P.fl - 1 : 0);\n    A(x, y, (b ? 90 : 210) * k, (b ? 110 : 216) * k, (b ? 84 : 204) * k);\n    // Swallowed head first: the tail end sticks out.\n    if (dy \u003c 0) A(x - face, y, 90 * k, 110 * k, 84 * k);\n  }\n}\n\nfunction leaves({ leaves: L, t, tint, sun, shake }, wind) {\n  for (let i = 0; i \u003c L.length; i += 7) {\n    const x = L[i] + round(sin(t * (1.1 + wind) + L[i + 5]) * wind * (L[i + 6] ? 1 + shake * 2 : 0.7)), y = L[i + 1], q = max(0, sin(t * (2 + 3 * wind) + L[i + 4])) ** 6;\n    const k = L[i + 3] * (0.9 + 0.7 * q), r = 60 * k * tint[0], g = 112 * k * tint[1], b = 50 * k * tint[2] + 30 * q * sun;\n    A(x, y, r, g, b);\n    if (L[i + 2] & 1) A(x + 1, y, r * 0.85, g * 0.85, b * 0.85);\n    if (L[i + 2] > 1) A(x, y + 1, r * 0.8, g * 0.8, b * 0.8);\n  }\n}\n\n// Light shafts, and caustics on the bed.\nfunction shafts({ buf, mat, tint, sun, cur, t, sunDir, silt, shaft: S }) {\n  const sl = sunDir * 2.2, so = t * (1.2 + 5 * cur) * 4, shine = sun * (1.15 - abs(sunDir) * 0.45) * (1 - silt) * 46, [tr, tg, tb] = [tint[0] * 0.85, tint[1], tint[2] * 0.7];\n  for (let y = SURF + 1; y \u003c H; y++) {\n    const dy = y - SURF, fade = pow(1 - dy / (H - SURF + 6), 1.4) * shine, b0 = so + dy * sl, b1 = 97 - t * 10.4 + dy * sl * 0.5, ph = t * 1.7 + 2 * sin(y * 0.45 - t * 0.9);\n    for (let x = 0, p = y * W, o = p * 3; x \u003c W; x++, p++, o += 3) {\n      let a = S[(b0 + x * 4) & 255] * (0.55 + 0.45 * S[(b1 + x * 2) & 255]) * fade;\n      const c = mat[p] === 6 ? sin(x * 0.8 + ph) + sin(x * 0.37 - y * 0.5 - t * 1.2) : 0;\n      if (c > 1.1) a += (c - 1.1) * 40 * sun;\n      if (a > 0.5) (buf[o] += a * tr), (buf[o + 1] += a * tg), (buf[o + 2] += a * tb);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, mat, tint, low, sun, cur, t, rich, bed } = P, wind = 0.35 + 0.65 * abs(cur), wl = 0.55 + 0.45 * sun;\n  const At = (x, y, r, g, b) => A(x, y, r * tint[0], g * tint[1], b * tint[2]);\n  BUF = buf;\n  buf.set(P.bg);\n  const off = t * (0.8 + 3.2 * wind), CT = P.cloud, wo = floor(t * wind * 5);\n  const cc = low.map((v) => mix(v, 250, 0.6) * (0.55 + 0.45 * sun));\n  for (let p = 0, m, r, x0, f; p \u003c (BANK + 1) * W; p++)\n    if (!(m = mat[p])) (x0 = floor((f = (p & 63) - off))), (f -= x0), (r = (p >> 6) * 128), Ao(p * 3, cc[0], cc[1], cc[2], (CT[r + (x0 & 127)] * (1 - f) + CT[r + ((x0 + 1) & 127)] * f) * 0.85);\n    else if (m === 2) for (let c = 0, s = 0.92 + 0.22 * CT[((p >> 6) % 24) * 128 + (((p & 63) + wo) & 127)]; c \u003c 3; c++) buf[p * 3 + c] *= s;\n  for (let i = 0, n = 3 + round(rich * 29); i \u003c n; i++) {\n    const [rx, r0, ph, iris] = P.reeds[i], rh = r0 * (0.6 + 0.9 * rich), lean = sin(t * (1.2 + wind) + ph) * wind * 1.4 + wind * 0.8;\n    for (let j = 0, f, x, k; j \u003c rh; j++) {\n      (f = j / rh), (x = round(rx + lean * f * f)), (k = 0.75 + 0.5 * f);\n      At(x, SURF - 1 - j, 92 * k, 146 * k, 52 * k);\n    }\n    const x = round(rx + lean * 0.5), y = round(SURF - rh * 0.75);\n    if (iris) At(x, y, 250, 214, 40), At(x - 1, y + 1, 230, 180, 30);\n  }\n  shafts(P);\n  for (let x = 0, ro = t * (0.8 + 7 * cur); x \u003c W; x++) {\n    const r = sin(x * 0.9 + ro + 2 * sin(x * 0.23 - t * 1.1)), gl = r > 0.6 ? (r - 0.6) * 1.5 : 0, o = (SURF * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) buf[o + c] = mix(low[c] * 0.85, 255, gl) * (0.5 + 0.5 * sun);\n  }\n  // Rings and foam.\n  for (const [cx, r, a, foam] of P.ri)\n    if (foam) for (let x = round(cx) - 3; x \u003c= round(cx) + 3; x++) for (let y = SURF - 1; y \u003c= SURF + 2; y++) A(x, y, 240, 245, 245, a * 1.4 * (1 - abs(x - cx) / 4));\n    else\n      for (let x = floor(cx - r), ry = max(0.6, r * 0.11), k = a * (0.6 + 0.4 * sun), e; r > 0 && x \u003c= cx + r; x++) {\n        e = ry * sqrt(max(0, 1 - ((x + 0.5 - cx) / r) ** 2));\n        A(x, round(SURF - e), 235, 240, 240, k * 0.8);\n        A(x, round(SURF + e) + 1, 210, 230, 225, k * 0.5);\n      }\n  P.tuft.forEach(([n, h], x) => {\n    const hh = h + round(rich * 4), sw = round(sin(t * 1.6 + x * 0.5) * 0.6 + cur);\n    for (let j = -2, k; n \u003c 0.22 + 0.66 * rich && j \u003c hh; j++) (k = (j \u003c 0 ? 0.6 : 0.75 + (0.35 * j) / hh) * wl), A(x + (j > 1) * sw, round(bed[x]) - j, 36 * k, 96 * k, 30 * k);\n  });\n  // Water-crowfoot; a stem that reaches the top trails and flowers.\n  for (let n = 0; n \u003c P.nweed; n++) {\n    const [wx, len0, ph, tone] = P.weed[n], len = len0 * P.wlen, lean = (((n * 5) % 7) - 3) * 0.06, dir = cur > 0.05 ? 1 : cur \u003c -0.05 || lean \u003c 0 ? -1 : 1;\n    let x = wx + 0.5, y = bed[wx] + 1, top = false;\n    for (let s = 0; s \u003c len; s++) {\n      const f = s / len, ang = lean + cur * 1.3 * pow(f, 0.6) + sin(t * 1.3 + ph + s * 0.16) * (0.14 + 0.24 * f) * (0.5 + abs(cur));\n      if (y > SURF + 2.5) (x += sin(ang)), (y -= cos(ang));\n      else (top = true), (x += dir * (0.8 + 0.2 * sin(t * 2 + s)));\n      const k = tone * (0.8 + 0.25 * sin(s * 1.3 + ph)) * wl, xi = round(x - 0.5), yi = round(y), sd = (s + n) % 2 ? 1 : -1;\n      A(xi, yi, 14 * k, 54 * k, 12 * k);\n      if (s % P.every !== 1 || s \u003c 2) A(xi + 1, yi, 84 * k, 170 * k, 62 * k, 0.8);\n      else if (top) {\n        A(xi, yi + 1, 104 * k, 196 * k, 74 * k, 0.9);\n        A(xi + dir, yi + 2, 84 * k, 164 * k, 60 * k, 0.6);\n        if (s % 4 === 1) A(xi, SURF, 244, 244, 232, 0.95), A(xi + 1, SURF, 236, 210, 80, 0.9);\n      } else for (const [ex, ey, a] of TUFT) A(xi + ex * sd, yi + ey, 104 * k, 196 * k, 76 * k, a);\n    }\n  }\n  const fk = (0.4 + 0.6 * sun) * (1 - 0.4 * P.silt);\n  for (const F of P.fish) {\n    const x = round(F.x), y = round(F.y), f = F.f, g = F.g > 0;\n    for (let j = 0, s; j \u003c 4; j++) {\n      s = (j === 2 ? 0.62 : 1) * (g ? 1.3 : 1) * fk;\n      A(x - f * j, y, (g ? 150 : 46) * fk, (g ? 162 : 64) * fk, (g ? 146 : 44) * fk);\n      A(x - f * j, y + 1, min(255, 196 * s), min(255, 204 * s), min(255, 186 * s));\n    }\n    A(x - f * 4, y + (floor(t * 7 + F.ph) & 1), 60 * fk, 78 * fk, 56 * fk);\n  }\n  for (const [x, y] of P.bu) A(round(x), round(y), 200, 232, 228, 0.7);\n  leaves(P, wind);\n  drawBird(P);\n  for (const [x, y] of P.dr) A(round(x), round(y), 225, 240, 245, 0.9);\n  show(display, P, 0.34 * cl((sun - 0.4) / 0.5, 0, 1), 1024 - (floor(off * 1.3) & 127));\n}\n\n// To the panel, under a passing cloud's shadow.\nfunction show(display, { buf, mat, shad: sh }, amp, so3) {\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, xs = so3 - round(y * 0.45); x \u003c W; x++, p++) {\n      const o = p * 3, s = mat[p] ? 1 - amp * sh[(x + xs) & 127] : 1, r = buf[o] * s, g = buf[o + 1] * s, b = buf[o + 2] * s;\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n}\n","layer":{"id":"layer-kingfisher","type":"code","name":"kingfisher","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kingfisher\n// Family:  bird\n// Idea:    A river bank cut from the alder overhead to the pebbles on the bed: a kingfisher watches from a branch, drops straight in with a splash and a trail of bubbles, comes up with a minnow, beats it on the branch and swallows it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after split-level river photographs of the common kingfisher (Alcedo atthis)\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Fish=6..60, Current=-1..1\n//\n// Knob 1: Hour. Early morning at 0 with the sun low in the east; noon sends the light shafts straight down, the afternoon goes gold, dusk goes pink.\n// Knob 2: Speed. How fast the river, the wind, the clouds and the bird go: at 2 it dives within two seconds, then every ten to fifteen.\n// Knob 3: Fish. How rich the river runs: six minnows and eight strands of water-crowfoot at 6, a shoal of sixty in a thick weed bed under reeds and yellow flag at 60. More fish, and the bird goes sooner.\n// Knob 4: Current. Near still at 0.06; turned either way the river runs that way, the weed streams out, the minnows face upstream and the alder stirs. Run hard, it goes the colour of tea.\n// Buttons: K1 tap sends the kingfisher down now, or as soon as it is back on the branch.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Waterline, top of the far bank, the bird's feet on the branch.\nconst [SURF, BANK, PX, PY] = [84, 47, 37, 33];\nconst { min, max, floor, round, sin, cos, abs, sqrt, pow, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every `per` cells.\nfunction vn(x, y, per = 4096) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = ((xi % per) + per) % per, x1 = (x0 + 1) % per, a = hash(x0, yi), b = hash(x1, yi), c = hash(x0, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, yi + 1)) * su * sv;\n}\n\n// The bird facing right: C cobalt, T turquoise back, O orange, W white, K bill, R feet.\n// A pose: rows, anchor, bill tip, and how a fish in the bill lies.\nconst COL = { C: [24, 92, 214], T: [40, 214, 238], O: [252, 112, 24], o: [200, 78, 20], W: [238, 240, 228], K: [20, 18, 26], R: [236, 72, 58] };\nconst pose = (s, ax, ay, tx, ty, fo) => ({ rows: s.split(\" \"), ax, ay, tx, ty, fo });\nconst BODY = \" .CCWW TCCOO TCCOO .CCOo .CC.R .C\";\nconst LEVEL = pose(\"..CCC .CCCCKKKK .WOOOK\" + BODY, 4, 7, 8, 1, \"v\");\nconst DOWN = pose(\"..CCC .CCCCK .WOOOKK .CCWW.KK\" + BODY.slice(6), 4, 7, 7, 3, \"v\");\nconst UP = pose(\"......K .....K ..CCK .CCCC .WOOO\" + BODY, 4, 9, 6, 0, \"d\");\nconst WIND = { ...UP, fo: \"h\" };\nconst SLAM = pose(\". .CCC TCCCC TCWOOC .CCOOWK .CCOo.K .CC.R.K .C\", 4, 6, 6, 6, \"h\");\nconst D45 = pose(\"CT .CTT .OCCT ..OCCC ...WOCK ......K .......K\", 5, 4, 7, 6, \"h\");\nconst DV = pose(\".C .CT OCT OCT OCT WOC .KC .K .K\", 1, 5, 1, 8, \"h\");\nconst RV = pose(\".K .K .KC WOC OCT OCT OCT .CT .C\", 1, 3, 1, 0, \"h\");\nconst FA = pose(\"....CC .....CC CTTTTTCCC .COOOOWOCKKK\", 5, 2, 11, 3, \"v\");\nconst FB = pose(\". . CTTTTCCCC .COOCCWOCKKK ....CC .....C\", 5, 2, 11, 3, \"v\");\n// Morning to dusk: sky overhead, sky low, light, sun.\nconst HOURS = [[96, 150, 214, 214, 218, 196, 1, 0.97, 0.9, 0.85], [54, 122, 228, 158, 198, 236, 1, 1, 1, 1], [66, 118, 204, 226, 204, 150, 1.06, 0.97, 0.84, 0.92], [70, 82, 158, 248, 156, 92, 1.12, 0.84, 0.7, 0.7], [36, 38, 94, 212, 100, 104, 0.9, 0.72, 0.82, 0.45]];\nconst [PERCH, LEAN, DIVE, UNDER, RISE, FLY, BEAT, SWALLOW] = [0, 1, 2, 3, 4, 5, 6, 7];\nconst DUR = [0, 0.35, 0.62, 0.5, 0.74, 1.5, 2.1, 1.3];\nconst TUFT = [[1, 0, 0.95], [2, -1, 0.8], [2, 1, 0.5], [3, -1, 0.4], [1, -1, 0.7]];\n\nfunction build(P) {\n  const { alb, mat } = P, crown = [], bed = (P.bed = []), lv = [];\n  const set = (x, y, m, r, g, b) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  const clump = (x, y) => vn(x * 0.2, y * 0.22) * 0.65 + vn(x * 0.55, y * 0.5) * 0.35;\n  for (let x = 0; x \u003c W; x++) (crown[x] = 11 + 8 * vn(x * 0.1, 3.3) + 4 * vn(x * 0.33, 8.1)), (bed[x] = 115.5 + 2.5 * sin(x * 0.11 + 0.7) + 3 * vn(x * 0.25, 11.5));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, g = hash(x + 900, y) - 0.5, c = y - crown[x], wet = cl((y - SURF + 7) / 6, 0, 1);\n    const n = c >= 0 && y \u003c= BANK && clump(x, y), k = n && (0.62 + 0.55 * n + 0.9 * (clump(x - 1.5, y - 1.5) - n)) * (1 - (0.42 * c) / (BANK - crown[x] + 1)) + 0.08 * g + (c \u003c 1.5 ? 0.35 : 0);\n    const e = (0.78 + 0.36 * (vn(2.5, y * 0.32) * 0.7 + vn(x * 0.06, y * 0.3) * 0.3) + 0.12 * g) * (1 - 0.38 * wet), q = 0.8 + 0.3 * vn(x * 0.7, y * 0.7) + 0.2 * g;\n    if (c \u003c 0) set(x, y, 0, 0, 0, 0);\n    else if (y \u003c= BANK) set(x, y, 2, 58 * k, 96 * k, 58 * k + 6);\n    else if (y \u003c SURF) set(x, y, 4, 138 * e, (100 + 14 * wet) * e, (64 + 6 * wet) * e);\n    else set(x, y, y \u003c bed[x] ? 5 : 6, 150 * q, 134 * q, 98 * q);\n  }\n  const ST = [[196, 172, 130], [150, 146, 136], [214, 182, 120], [128, 110, 90], [226, 198, 146]];\n  for (let n = 0; n \u003c 80; n++) {\n    const cx = rnd() * 66 - 1, cy = bed[cl(round(cx), 0, W - 1)] + 1 + rnd() * 9, rx = 1.3 + rnd() * 2.4, ry = 0.9 + rnd() * 1.4, c = ST[floor(rnd() * 5)], t = 0.85 + rnd() * 0.3;\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const dx = (x + 0.5 - cx) / rx, dy = (y + 0.5 - cy) / ry, r = dx * dx + dy * dy, k = t * (r > 0.6 ? 0.62 : 1) * (1 + 0.28 * cl(-dx - dy, -1, 1));\n        if (r \u003c= 1 && y \u003c H && y >= bed[x]) set(x, y, 6, c[0] * k, c[1] * k, c[2] * k);\n      }\n  }\n  // Grass, roots, and the kingfisher's burrow.\n  for (let x = 0; x \u003c W; x++) for (let y = BANK - floor(rnd() * 3.6), k; y \u003c= BANK + 1; y++) (k = 0.75 + rnd() * 0.5), set(x, y, 3, 74 * k, 124 * k, 46 * k);\n  for (let n = 0; n \u003c 6; n++) for (let x = 8 + rnd() * 30, i = 0, len = 5 + rnd() * 12; i \u003c len; i++) set(round((x += (rnd() - 0.5) * 1.2)), BANK + 2 + i, 4, 66, 50, 38);\n  for (let y = 53; y \u003c 64; y++)\n    for (let x = 16; x \u003c 29; x++) {\n      const dx = (x - 22) / 3.1, dy = (y - 57.5) / 2.6, r = dx * dx + dy * dy, q = r * r;\n      if (r \u003c 1) set(x, y, 4, 12 + 40 * q, 9 + 28 * q, 7 + 18 * q);\n      else if (r \u003c 1.5 && dy > 0.4) set(x, y, 4, 172, 132, 92);\n    }\n  for (let y = 0; y \u003c= BANK + 1; y++)\n    for (let x = 0, w = 4 + max(0, y - 30) * 0.14, k; x \u003c w; x++) (k = (0.72 + 0.4 * vn(x * 0.9, y * 0.13)) * (x \u003c 1 ? 1.25 : x > w - 1.5 ? 0.7 : 1)), set(x, y, 1, 104 * k, 98 * k, 88 * k);\n  for (let x = 3; x \u003c= 55; x++) {\n    const th = 3.2 - (2.4 * (x - 4)) / 51, n = max(1, round(th)), top = round(35.6 - 0.06 * (x - 4) + 0.0009 * (x - 4) ** 2 - th / 2);\n    for (let i = 0, k; i \u003c n; i++) (k = i ? (i === n - 1 ? 0.6 : 0.9) : 1.35), set(x, top + i, 1, 106 * k, 96 * k, 84 * k);\n  }\n  for (const tw of [[20, 34, 24, 29, 27, 26], [30, 35, 33, 38, 35, 41], [46, 35, 49, 38, 51, 42], [54, 35, 58, 34, 61, 37]])\n    for (let s = 0; s \u003c 4; s += 2) for (let i = 0; i \u003c= 8; i++) set(round(mix(tw[s], tw[s + 2], i / 8)), round(mix(tw[s + 1], tw[s + 3], i / 8)), 1, 92, 82, 72);\n  // Alder leaves, none in front of the bird.\n  for (const [cx, cy, r, n, shade] of [[3, 2, 12, 110, 1], [15, 0, 11, 80, 1], [27, 1, 8, 50, 1], [36, -1, 6, 22, 1], [7, 14, 7, 40, 1], [24, 26, 4, 18], [13, 26, 3, 10], [35, 42, 3, 10], [50, 42, 4, 18], [60, 36, 3, 12], [49, 30, 3, 8]]) {\n    for (let y = floor(cy - r); shade && y \u003c= cy + r; y++)\n      for (let x = floor(cx - r), d; x \u003c= cx + r; x++) if ((d = hypot(x - cx, (y - cy) * 1.3) / r) \u003c 0.85 && vn(x * 0.45, y * 0.45 + 40) > 0.3 + d * 0.3) set(x, y, 1, 34, 58, 30);\n    for (let i = 0; i \u003c n; i++) {\n      const a = rnd() * PI * 2, rr = r * sqrt(rnd()), x = round(cx + cos(a) * rr), y = round(cy + sin(a) * rr * 0.75);\n      if (x \u003c 31 || x > 46 || y \u003c 21 || y > 33) lv.push(x, y, floor(rnd() * 4), 0.75 + rnd() * 0.5, rnd() * 7, rnd() * 7, cy > 20 ? 1 : 0);\n    }\n  }\n  P.leaves = lv;\n  // More weed, reeds and starwort as the river gets richer.\n  P.weed = [6, 17, 28, 40, 50, 59, 12, 23, 45, 34, 55, 2, 20, 42, 62, 31, 9, 48, 26, 14, 37, 53, 4, 57].map((x) => [x, 16 + rnd() * 26, rnd() * 7, 0.8 + rnd() * 0.4]);\n  P.reeds = Array.from({ length: 32 }, (_, i) => [(i * 23.7 + rnd() * 6) % 64, 7 + rnd() * 10, rnd() * 7, i % 6 === 3]);\n  P.tuft = bed.map((_, x) => [vn(x * 0.3, 50.5), 1 + floor(rnd() * 3)]);\n  const tex = (h, f) => Float32Array.from({ length: 128 * h }, (_, i) => f(i & 127, i >> 7));\n  P.cloud = tex(24, (x, y) => sm((vn(x / 14, y / 5, 128 / 14) * 0.65 + vn(x / 6, y / 3 + 9, 128 / 6) * 0.35 - 0.48) * 3.2) * (1 - y / 30));\n  P.shad = tex(1, (i) => sm(1 - abs(i - 34) / 30) + 0.7 * sm(1 - abs(i - 96) / 18));\n  const S = (P.shaft = new Float32Array(256));\n  for (let n = 0; n \u003c 9; n++) {\n    const c = rnd() * 256, w = 6 + rnd() * 18, a = 0.4 + rnd() * 0.6;\n    for (let i = 0; i \u003c 256; i++) S[i] = min(1, S[i] + a * Math.exp(-((abs(((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n}\n\n// Light for the hour. A river in spate is the colour of tea.\nfunction paint(P, h) {\n  const f = h * 4, i = min(3, floor(f)), B = HOURS[i + 1], q = HOURS[i].map((v, c) => mix(v, B[c], f - i)), { alb, mat, bg } = P;\n  const sun = (P.sun = q[9]), top = q.slice(0, 3), low = (P.low = q.slice(3, 6)), tint = (P.tint = q.slice(6, 9).map((v) => v * sun)), s = (P.silt = 0.6 * P.cur * P.cur);\n  P.sunDir = -0.9 + 1.8 * h;\n  const M = (a, b) => a.map((v, c) => mix(v, b[c], s)), WT = M([88, 128, 94], [112, 98, 52]), WD = M([30, 58, 44], [50, 40, 24]), fl = M([0.74, 0.88, 0.72], [0.62, 0.6, 0.4]);\n  for (let p = 0; p \u003c N; p++) {\n    const y = p >> 6, m = mat[p], ts = pow(cl(y / 24, 0, 1), 1.3), d = cl((y - SURF - 1) / (H - SURF - 2), 0, 1);\n    for (let c = 0, o = p * 3, a; c \u003c 3; c++)\n      (a = alb[o + c] * tint[c]),\n        (bg[o + c] =\n          m === 0 ? mix(top[c], low[c], ts)\n          : m === 2 ? mix(a, low[c] * 0.5, 0.16)\n          : m === 5 ? mix(WT[c], WD[c], pow(d, 0.8)) * tint[c] + low[c] * 0.08 * (1 - d)\n          : m === 6 ? mix(a * fl[c] * (0.95 - 0.25 * d), WD[c] * tint[c], s * 0.8)\n          : a);\n  }\n}\n\nfunction stepFish(P, d) {\n  const t = P.t, cx = 32 + 15 * sin(t * 0.13 + 0.4) + 6 * sin(t * 0.31), cy = 103 + 5 * sin(t * 0.21 + 1.3);\n  for (const F of P.fish) {\n    // The one it has picked drifts into the line of the dive.\n    const held = P.bs && P.bs \u003c= UNDER && F === P.prey && P.hit;\n    if (held) F.vx += (P.tx - F.x) * 2 * d;\n    if (F.s > 0) F.s -= d;\n    else if (!held) {\n      F.vx += ((cx + F.ox + 4 * sin(t * 0.7 + F.ph) - F.x) * 0.9 - F.vx * 1.1) * d + (rnd() - 0.5) * 30 * d;\n      F.vy += ((cy + F.oy + 2 * sin(t * 0.9 + F.ph * 1.3) - F.y) * 0.9 - F.vy * 1.4) * d + (rnd() - 0.5) * 16 * d;\n      if (rnd() \u003c d * 0.45) F.g = 0.25;\n    }\n    const lim = F.s > 0 ? 36 : held ? 8 : 14, sp = hypot(F.vx, F.vy);\n    if (sp > lim) (F.vx *= lim / sp), (F.vy *= lim / sp);\n    F.x += F.vx * d;\n    F.y = cl(F.y + F.vy * d, SURF + 5, P.bed[cl(round(F.x), 0, W - 1)] - 3);\n    const f = abs(P.cur) > 0.12 && F.s \u003c= 0 ? (P.cur > 0 ? -1 : 1) : abs(F.vx) > 2 ? Math.sign(F.vx) : F.f;\n    if (f !== F.f) (F.f = f), (F.g = 0.3);\n    F.g -= d;\n  }\n}\n\n// Drops, rings, foam; the dive scatters all but its minnow.\nfunction splash(P, x, n, up) {\n  for (let i = 0; i \u003c n; i++) P.dr.push([x + (rnd() - 0.5) * 4, SURF - 1, (rnd() - 0.5) * (i % 7 ? 46 : 4), -(18 + rnd() * up) * (i % 7 ? 1 : 1.5)]);\n  P.ri.push([x, 0, 1], [x, 0, 0.6, 1]);\n  for (const F of n \u003c 30 ? [] : P.fish) {\n    const dx = F.x - x, dy = F.y - SURF, r = hypot(dx, dy) + 1;\n    if (r > 27 || (F === P.prey && P.hit)) continue;\n    [F.s, F.g] = [0.7 + rnd() * 0.6, 0.3];\n    F.vx += (dx / r) * 34;\n    F.vy += (dy / r) * 20 + 6;\n  }\n}\n\nfunction stepBird(P, d) {\n  let k, u = (P.bt += d) / (DUR[P.bs] || 1);\n  const go = (s) => ((P.bs = s), (P.bt = 0));\n  const bub = (p, x, y) => rnd() \u003c p && P.bu.push([P.bx + (rnd() - 0.5) * x, P.by + y, 14 + rnd() * 14, rnd() * 7]);\n  switch (P.bs) {\n    case PERCH:\n      if ((P.look -= d) \u003c= 0) {\n        P.pose = rnd() \u003c 0.55 ? LEVEL : DOWN;\n        P.look = 0.4 + rnd() * 1.2;\n      }\n      if (P.bt >= P.wait * (1 - 0.45 * P.rich) || P.go) {\n        // A minnow below the branch. One dive in four misses, never the first.\n        let best = null, sc = 1e9;\n        for (const F of P.fish) {\n          const s = abs(F.x - PX - 10) + 0.5 * abs(F.y - 100);\n          if (F.x >= PX - 6 && F.x \u003c= 60 && s \u003c sc) [sc, best] = [s, F];\n        }\n        Object.assign(P, { go: false, prey: best, tx: best ? cl(best.x + best.vx * 0.6, PX - 2, 53) : PX + 10, hit: !!best && (!P.dives++ || rnd() \u003c 0.75) });\n        go(LEAN);\n      }\n      break;\n    case LEAN:\n      [P.pose, P.bx, P.by, P.face] = [D45, PX + 2, PY - 4 + u, 1];\n      if (u >= 1) go(DIVE);\n      break;\n    case DIVE:\n      P.face = P.tx >= PX ? 1 : -1;\n      P.bx = mix(PX + 2, P.tx, pow(u, 0.8));\n      P.by = mix(PY - 3, SURF - 2, pow(u, 1.8));\n      P.pose = u \u003c 0.22 ? D45 : DV;\n      if (u >= 1) {\n        splash(P, (P.x0 = P.bx), 30, 50);\n        for (let i = 0; i \u003c 14; i++) bub(1, 5, 3 + rnd() * 5);\n        go(UNDER);\n      }\n      break;\n    case UNDER: {\n      const q = P.hit && P.fish.includes(P.prey) ? P.prey : null, e = 1 - (1 - u) * (1 - u);\n      P.bx = mix(P.x0, q ? q.x : P.x0, e);\n      P.by = mix(SURF - 2, q ? q.y - 2 : 99, e);\n      P.pose = DV;\n      bub(0.8, 3, -3);\n      if (u >= 1) {\n        if (q) P.fish.splice(P.fish.indexOf(q), 1);\n        [P.fl, P.prey, P.y0] = [q ? 4 : 0, null, P.by];\n        go(RISE);\n      }\n      break;\n    }\n    case RISE: {\n      const w = cl((u - 0.43) / 0.57, 0, 1);\n      P.pose = u \u003c 0.22 ? DV : RV;\n      if (!w) P.bx += sin(P.bt * 60) * 9 * d;\n      P.by = mix(P.y0, SURF - 2, w * w);\n      bub(w ? 0.7 : 0.5, 3, w ? 4 : -2);\n      if (u >= 1) splash(P, (P.x0 = P.bx), 16, 32), go(FLY);\n      break;\n    }\n    case FLY:\n      P.face = PX >= P.x0 ? 1 : -1;\n      P.bx = mix(P.x0, PX, sm(u));\n      P.by = mix(SURF - 4, PY - 3, 1 - (1 - u) * (1 - u)) - 7 * sin(PI * u);\n      P.pose = floor(P.bt / 0.07) & 1 ? FB : FA;\n      if (u \u003c 0.25 && rnd() \u003c 0.5) P.dr.push([P.bx + (rnd() - 0.5) * 6, P.by + 2, (rnd() - 0.5) * 10, rnd() * 10]);\n      if (u >= 1 && !P.fl) for (let i = 0; i \u003c 10; i++) P.dr.push([PX + (rnd() - 0.5) * 6, PY - 4 - rnd() * 4, (rnd() - 0.5) * 30, -rnd() * 20]);\n      if (u >= 1) (k = P.fl), perch(P), k && ((P.fl = k), go(BEAT));\n      break;\n    case BEAT: {\n      // Four whacks on the branch.\n      k = floor(P.bt / 0.42);\n      const slam = P.bt % 0.42 > 0.24 && k \u003c 4;\n      P.pose = k > 3 ? LEVEL : slam ? SLAM : WIND;\n      if (slam && !P.slam) (P.shake = 1), P.dr.push([PX + 7, PY - 1, 8 + rnd() * 10, -10 - rnd() * 14]);\n      P.slam = slam;\n      if (u >= 1) go(SWALLOW);\n      break;\n    }\n    case SWALLOW:\n      P.pose = u \u003c 0.85 ? UP : LEVEL;\n      P.fl = u \u003c 0.3 ? 3 : u \u003c 0.55 ? 2 : u \u003c 0.8 ? 1 : 0;\n      if (u >= 1) perch(P);\n  }\n}\n\nfunction perch(P) {\n  Object.assign(P, { bs: PERCH, bt: 0, bx: PX, by: PY, face: 1, pose: LEVEL, look: 0.4, fl: 0, wait: P.queued ? 0.3 : 3.5 + rnd() * 4, queued: false });\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), h: -1, t: 0, dives: 0, fish: [], dr: [], bu: [], ri: [], shake: 0 });\n  build(P);\n  perch(P);\n  P.wait = 1.3;\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06], h = cl(k[0], 0, 1), cur = cl(k[3], -1, 1);\n  const rich = (P.rich = cl((k[2] - 6) / 54, 0, 1)), want = round(cl(k[2], 6, 60)), d = cl(dt, 0, 0.1) * (P.rate = cl(k[1], 0.2, 3) / 2);\n  if (abs(h - P.h) > 0.0005 || abs(cur - P.cur) > 0.01) (P.h = h), (P.cur = cur), paint(P, h);\n  [P.nweed, P.wlen, P.every] = [8 + round(rich * 16), 0.62 + 0.55 * rich, rich > 0.5 ? 2 : 3];\n  for (let e = P.t > 0; P.fish.length \u003c want; )\n    P.fish.push({ x: e ? (cur >= 0 ? -3 : 66) : 6 + rnd() * 52, y: e ? 100 + rnd() * 8 : 94 + rnd() * 18, vx: 0, vy: 0, ox: (rnd() - 0.5) * 30, oy: (rnd() - 0.5) * 12, ph: rnd() * 7, f: rnd() \u003c 0.5 ? 1 : -1, s: 0, g: 0 });\n  P.fish.length = want;\n  // The river's clock starts further in the faster it runs.\n  if (!P.t) P.t = 6 * P.rate;\n  if (input.btnPressed?.[0]) P[P.bs === PERCH ? \"go\" : \"queued\"] = true;\n  P.t += d;\n  stepFish(P, d);\n  stepBird(P, d);\n  P.dr = P.dr.filter((p) => ((p[3] += 150 * d), (p[0] += p[2] * d), (p[1] += p[3] * d), !(p[1] > SURF && p[3] > 0)));\n  P.bu = P.bu.filter((b) => ((b[1] -= b[2] * d), (b[0] += (sin(b[3] + b[1] * 0.6) * 3 + cur * 8) * d), b[1] > SURF + 1));\n  P.ri = P.ri.filter((r) => ((r[1] += 13 * d), (r[0] += cur * 10 * d), (r[2] -= (r[3] ? 1 : 0.42) * d) > 0));\n  P.shake = max(0, P.shake - d * 3);\n}\n\nlet BUF;\nfunction Ao(o, r, g, b, a = 1) {\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nconst A = (x, y, r, g, b, a) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && Ao((y * W + x) * 3, r, g, b, a);\n\nfunction drawBird(P) {\n  const S = P.pose, face = P.face, ox = round(P.bx), oy = round(P.by), L = 0.45 + 0.6 * P.sun, fk = 0.5 + 0.5 * P.sun;\n  const fl = P.bs && P.bs \u003c= FLY ? 1.2 : 0.8 + 0.3 * max(0, sin(P.t * 2.3));\n  S.rows.forEach((row, r) => {\n    for (let c = 0; c \u003c row.length; c++) {\n      const col = COL[row[c]], x = ox + (c - S.ax) * face, y = oy + r - S.ay, k = L * (row[c] === \"T\" ? fl : 1), w = y > SURF;\n      if (col) A(x, y, col[0] * k * (w ? 0.66 : 1), col[1] * k * (w ? 0.88 : 1), col[2] * k * (w ? 0.8 : 1));\n    }\n  });\n  const [sx, sy, dx, dy] = { v: [-1, -1, 0, 1], h: [-1, 1, 1, 0], d: [1, -1, 1, -1] }[S.fo], tx = ox + (S.tx - S.ax) * face, ty = oy + S.ty - S.ay;\n  for (let i = 0; i \u003c P.fl; i++) {\n    const x = tx + (sx + i * dx) * face, y = ty + sy + i * dy, k = fk * (y > SURF ? 0.8 : 1), b = i === (dy > 0 ? 3 : dy ? P.fl - 1 : 0);\n    A(x, y, (b ? 90 : 210) * k, (b ? 110 : 216) * k, (b ? 84 : 204) * k);\n    // Swallowed head first: the tail end sticks out.\n    if (dy \u003c 0) A(x - face, y, 90 * k, 110 * k, 84 * k);\n  }\n}\n\nfunction leaves({ leaves: L, t, tint, sun, shake }, wind) {\n  for (let i = 0; i \u003c L.length; i += 7) {\n    const x = L[i] + round(sin(t * (1.1 + wind) + L[i + 5]) * wind * (L[i + 6] ? 1 + shake * 2 : 0.7)), y = L[i + 1], q = max(0, sin(t * (2 + 3 * wind) + L[i + 4])) ** 6;\n    const k = L[i + 3] * (0.9 + 0.7 * q), r = 60 * k * tint[0], g = 112 * k * tint[1], b = 50 * k * tint[2] + 30 * q * sun;\n    A(x, y, r, g, b);\n    if (L[i + 2] & 1) A(x + 1, y, r * 0.85, g * 0.85, b * 0.85);\n    if (L[i + 2] > 1) A(x, y + 1, r * 0.8, g * 0.8, b * 0.8);\n  }\n}\n\n// Light shafts, and caustics on the bed.\nfunction shafts({ buf, mat, tint, sun, cur, t, sunDir, silt, shaft: S }) {\n  const sl = sunDir * 2.2, so = t * (1.2 + 5 * cur) * 4, shine = sun * (1.15 - abs(sunDir) * 0.45) * (1 - silt) * 46, [tr, tg, tb] = [tint[0] * 0.85, tint[1], tint[2] * 0.7];\n  for (let y = SURF + 1; y \u003c H; y++) {\n    const dy = y - SURF, fade = pow(1 - dy / (H - SURF + 6), 1.4) * shine, b0 = so + dy * sl, b1 = 97 - t * 10.4 + dy * sl * 0.5, ph = t * 1.7 + 2 * sin(y * 0.45 - t * 0.9);\n    for (let x = 0, p = y * W, o = p * 3; x \u003c W; x++, p++, o += 3) {\n      let a = S[(b0 + x * 4) & 255] * (0.55 + 0.45 * S[(b1 + x * 2) & 255]) * fade;\n      const c = mat[p] === 6 ? sin(x * 0.8 + ph) + sin(x * 0.37 - y * 0.5 - t * 1.2) : 0;\n      if (c > 1.1) a += (c - 1.1) * 40 * sun;\n      if (a > 0.5) (buf[o] += a * tr), (buf[o + 1] += a * tg), (buf[o + 2] += a * tb);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, mat, tint, low, sun, cur, t, rich, bed } = P, wind = 0.35 + 0.65 * abs(cur), wl = 0.55 + 0.45 * sun;\n  const At = (x, y, r, g, b) => A(x, y, r * tint[0], g * tint[1], b * tint[2]);\n  BUF = buf;\n  buf.set(P.bg);\n  const off = t * (0.8 + 3.2 * wind), CT = P.cloud, wo = floor(t * wind * 5);\n  const cc = low.map((v) => mix(v, 250, 0.6) * (0.55 + 0.45 * sun));\n  for (let p = 0, m, r, x0, f; p \u003c (BANK + 1) * W; p++)\n    if (!(m = mat[p])) (x0 = floor((f = (p & 63) - off))), (f -= x0), (r = (p >> 6) * 128), Ao(p * 3, cc[0], cc[1], cc[2], (CT[r + (x0 & 127)] * (1 - f) + CT[r + ((x0 + 1) & 127)] * f) * 0.85);\n    else if (m === 2) for (let c = 0, s = 0.92 + 0.22 * CT[((p >> 6) % 24) * 128 + (((p & 63) + wo) & 127)]; c \u003c 3; c++) buf[p * 3 + c] *= s;\n  for (let i = 0, n = 3 + round(rich * 29); i \u003c n; i++) {\n    const [rx, r0, ph, iris] = P.reeds[i], rh = r0 * (0.6 + 0.9 * rich), lean = sin(t * (1.2 + wind) + ph) * wind * 1.4 + wind * 0.8;\n    for (let j = 0, f, x, k; j \u003c rh; j++) {\n      (f = j / rh), (x = round(rx + lean * f * f)), (k = 0.75 + 0.5 * f);\n      At(x, SURF - 1 - j, 92 * k, 146 * k, 52 * k);\n    }\n    const x = round(rx + lean * 0.5), y = round(SURF - rh * 0.75);\n    if (iris) At(x, y, 250, 214, 40), At(x - 1, y + 1, 230, 180, 30);\n  }\n  shafts(P);\n  for (let x = 0, ro = t * (0.8 + 7 * cur); x \u003c W; x++) {\n    const r = sin(x * 0.9 + ro + 2 * sin(x * 0.23 - t * 1.1)), gl = r > 0.6 ? (r - 0.6) * 1.5 : 0, o = (SURF * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) buf[o + c] = mix(low[c] * 0.85, 255, gl) * (0.5 + 0.5 * sun);\n  }\n  // Rings and foam.\n  for (const [cx, r, a, foam] of P.ri)\n    if (foam) for (let x = round(cx) - 3; x \u003c= round(cx) + 3; x++) for (let y = SURF - 1; y \u003c= SURF + 2; y++) A(x, y, 240, 245, 245, a * 1.4 * (1 - abs(x - cx) / 4));\n    else\n      for (let x = floor(cx - r), ry = max(0.6, r * 0.11), k = a * (0.6 + 0.4 * sun), e; r > 0 && x \u003c= cx + r; x++) {\n        e = ry * sqrt(max(0, 1 - ((x + 0.5 - cx) / r) ** 2));\n        A(x, round(SURF - e), 235, 240, 240, k * 0.8);\n        A(x, round(SURF + e) + 1, 210, 230, 225, k * 0.5);\n      }\n  P.tuft.forEach(([n, h], x) => {\n    const hh = h + round(rich * 4), sw = round(sin(t * 1.6 + x * 0.5) * 0.6 + cur);\n    for (let j = -2, k; n \u003c 0.22 + 0.66 * rich && j \u003c hh; j++) (k = (j \u003c 0 ? 0.6 : 0.75 + (0.35 * j) / hh) * wl), A(x + (j > 1) * sw, round(bed[x]) - j, 36 * k, 96 * k, 30 * k);\n  });\n  // Water-crowfoot; a stem that reaches the top trails and flowers.\n  for (let n = 0; n \u003c P.nweed; n++) {\n    const [wx, len0, ph, tone] = P.weed[n], len = len0 * P.wlen, lean = (((n * 5) % 7) - 3) * 0.06, dir = cur > 0.05 ? 1 : cur \u003c -0.05 || lean \u003c 0 ? -1 : 1;\n    let x = wx + 0.5, y = bed[wx] + 1, top = false;\n    for (let s = 0; s \u003c len; s++) {\n      const f = s / len, ang = lean + cur * 1.3 * pow(f, 0.6) + sin(t * 1.3 + ph + s * 0.16) * (0.14 + 0.24 * f) * (0.5 + abs(cur));\n      if (y > SURF + 2.5) (x += sin(ang)), (y -= cos(ang));\n      else (top = true), (x += dir * (0.8 + 0.2 * sin(t * 2 + s)));\n      const k = tone * (0.8 + 0.25 * sin(s * 1.3 + ph)) * wl, xi = round(x - 0.5), yi = round(y), sd = (s + n) % 2 ? 1 : -1;\n      A(xi, yi, 14 * k, 54 * k, 12 * k);\n      if (s % P.every !== 1 || s \u003c 2) A(xi + 1, yi, 84 * k, 170 * k, 62 * k, 0.8);\n      else if (top) {\n        A(xi, yi + 1, 104 * k, 196 * k, 74 * k, 0.9);\n        A(xi + dir, yi + 2, 84 * k, 164 * k, 60 * k, 0.6);\n        if (s % 4 === 1) A(xi, SURF, 244, 244, 232, 0.95), A(xi + 1, SURF, 236, 210, 80, 0.9);\n      } else for (const [ex, ey, a] of TUFT) A(xi + ex * sd, yi + ey, 104 * k, 196 * k, 76 * k, a);\n    }\n  }\n  const fk = (0.4 + 0.6 * sun) * (1 - 0.4 * P.silt);\n  for (const F of P.fish) {\n    const x = round(F.x), y = round(F.y), f = F.f, g = F.g > 0;\n    for (let j = 0, s; j \u003c 4; j++) {\n      s = (j === 2 ? 0.62 : 1) * (g ? 1.3 : 1) * fk;\n      A(x - f * j, y, (g ? 150 : 46) * fk, (g ? 162 : 64) * fk, (g ? 146 : 44) * fk);\n      A(x - f * j, y + 1, min(255, 196 * s), min(255, 204 * s), min(255, 186 * s));\n    }\n    A(x - f * 4, y + (floor(t * 7 + F.ph) & 1), 60 * fk, 78 * fk, 56 * fk);\n  }\n  for (const [x, y] of P.bu) A(round(x), round(y), 200, 232, 228, 0.7);\n  leaves(P, wind);\n  drawBird(P);\n  for (const [x, y] of P.dr) A(round(x), round(y), 225, 240, 245, 0.9);\n  show(display, P, 0.34 * cl((sun - 0.4) / 0.5, 0, 1), 1024 - (floor(off * 1.3) & 127));\n}\n\n// To the panel, under a passing cloud's shadow.\nfunction show(display, { buf, mat, shad: sh }, amp, so3) {\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, xs = so3 - round(y * 0.45); x \u003c W; x++, p++) {\n      const o = p * 3, s = mat[p] ? 1 - amp * sh[(x + xs) & 127] : 1, r = buf[o] * s, g = buf[o + 1] * s, b = buf[o + 2] * s;\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=0..1, Speed=0.2..3, Fish=6..60, Current=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":0,"max":1,"about":"Early morning at 0 with the sun low in the east; noon sends the light shafts straight down, the afternoon goes gold, dusk goes pink."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the river, the wind, the clouds and the bird go: at 2 it dives within two seconds, then every ten to fifteen."},{"name":"Fish","min":6,"max":60,"about":"How rich the river runs: six minnows and eight strands of water-crowfoot at 6, a shoal of sixty in a thick weed bed under reeds and yellow flag at 60. More fish, and the bird goes sooner."},{"name":"Current","min":-1,"max":1,"about":"Near still at 0.06; turned either way the river runs that way, the weed streams out, the minnows face upstream and the alder stirs. Run hard, it goes the colour of tea."}],"start":[0,2,6,0.06],"measures":{"motion":0.0867,"detail":0.0496,"edges":0.2577,"complexity":2.0204,"coverage":0.9952,"colour":0.1732,"drift":0.0377},"knobResponse":[0.186,0.0476,0.0402,0.0555]},{"slug":"lap-pool","title":"Lap Pool","family":"sport","round":21,"note":"야외 25 m 수영장을 바로 위에서 내려다본 그림이 128줄을 다 써요. 색 수모를 쓴 사람들이 레인마다 제 속도로 오가다 벽에서 플립 턴을 하고, 뒤로 퍼지는 V자 물결이 빨강·하양·파랑 레인 로프를 흔들어요. 타일 바닥에는 햇빛이 만든 물결 그물이 흘러요.","idea":"A 25 m outdoor pool seen from straight above: swimmers in coloured caps swim lengths at their own paces, kick up white water, rock the lane ropes with their V wakes and flip-turn at the walls over a floor netted with sun caustics.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Lap Pool\n// Family:  sport\n// Idea:    A 25 m outdoor pool seen from straight above: swimmers in coloured caps swim lengths at their own paces, kick up white water, rock the lane ropes with their V wakes and flip-turn at the walls over a floor netted with sun caustics.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after overhead drone photographs of outdoor lap pools\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Stroke=0..3, Speed=0.2..3, Swimmers=4..15, Sun=-1..1\n//\n// Knob 1: Stroke. What everyone swims: freestyle at 0, backstroke at 1, breaststroke at 2 with its frog kick and glide, butterfly at 3 with both arms swung across the lane. Breaststroke and butterfly churn the water and break up the caustic net.\n// Knob 2: Speed. How fast the swimmers and the water go: at 2 a freestyle length takes 10 to 14 s, breaststroke nearer 20.\n// Knob 3: Swimmers. Four swimmers in four of the five lanes at 4; past five they share lanes and swim in circles, three a lane at 15.\n// Knob 4: Sun. Near noon at 0.06, with a bright caustic net and short shadows. Towards -1 the morning sun comes low from the east, towards 1 the evening sun from the west: gold light, a faint stretched net, long shadows across the lanes.\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, pow, asin, tan, PI } = Math;\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst fr = (x) => x - floor(x);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nconst [W, H, N] = [64, 128, 8192];\n// Pixel centres on whole numbers. Water: rows 8..119 (25 m), columns 2..61, five lanes of 12.\nconst [Y0, Y1] = [8, 119];\nconst LANE = (k) => 7.5 + 12 * k;\nconst ROPE = (k) => 13.5 + 12 * k;\n// Backstroke flags 5 m out from each wall.\nconst FLAGS = [Y0 + 22, Y1 - 22];\n// Body centre VC rows behind the crown; swimmers drawn SZ times life size.\nconst [VC, SZ] = [4.5, 1.3];\nconst HV = VC * SZ;\nconst [SWIM, TURN, GLIDE] = [0, 1, 2];\n// Per stroke: pace (rows/s at Speed 2), arm cycles/s, wake, kick spray/s, churn.\nconst STROKE = [[9.2, 1.15, 0.5, 22, 0.2], [8, 1, 0.45, 26, 0.15], [5.8, 0.95, 0.9, 0, 0.7], [8.6, 1.05, 1.25, 0, 1]];\nconst CAPS = [[252, 212, 20], [232, 36, 48], [242, 242, 236], [34, 34, 40], [36, 204, 92], [255, 122, 18], [255, 84, 170], [28, 104, 238], [182, 188, 198], [150, 64, 226]];\nconst SKIN = [[238, 192, 160], [214, 160, 118], [176, 116, 78], [122, 78, 52], [248, 206, 178]];\nconst SUIT = [[22, 26, 70], [18, 18, 22], [184, 22, 44], [0, 112, 132], [96, 32, 124], [34, 64, 168]];\n// Lanes fill from the middle, so four swimmers leave lane 4 free.\nconst ORDER = [2, 0, 4, 1, 3];\n// Light through 2 m of water, and the blue it scatters back.\nconst TW = [0.36, 0.72, 0.82];\nconst SC = [2, 18, 30];\n\nfunction build(P) {\n  const { alb, mat, blk } = P;\n  const set = (x, y, m, r, g, b) => ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, g = hash(x, y) - 0.5, e = min(y - Y0, Y1 - y);\n    if (e >= 0 && x >= 2 && x \u003c= 61) {\n      // White tiles on a 4 LED grid; lane lines end in a T 2 m from the wall.\n      const t = (1 + (hash(x >> 2, (y - Y0) >> 2) - 0.5) * 0.07 + g * 0.04) * ((x - 2) % 4 && (y - Y0) % 4 ? 1 : 0.88);\n      const dc = abs(x - LANE(floor((x - 1.5) / 12)));\n      if (e > 8 && (dc \u003c 1 || (dc \u003c 3 && e \u003c 11))) set(x, y, 3, 0.1 * t, 0.14 * t, 0.38 * t);\n      else set(x, y, 3, 0.84 * t, 0.92 * t, 0.95 * t);\n    } else if (e === -1 && x >= 2 && x \u003c= 61) set(x, y, 2, 0.12, 0.28 + g * 0.04, 0.58);\n    else if (e >= -3 && x >= 1 && x \u003c= 62) {\n      // The overflow gutter's grate: white bars over dark water.\n      const bar = (e \u003c -1 ? x : y) % 2 === 0;\n      set(x, y, 1, bar ? 0.86 : 0.04, bar ? 0.88 : 0.17, bar ? 0.89 : 0.23);\n    } else {\n      // Stone paving, darker where the splashes land.\n      const side = x === 0 || x === 63, j = side ? y % 8 === 0 : x % 8 === 0 || e === -8;\n      const k = (0.92 + 0.16 * hash(side ? x : x >> 3, side ? y >> 3 : y > 64) + g * 0.07) * (j ? 0.84 : 1) * (e === -4 || side ? 0.88 - 0.1 * hash(x, y + 7) : 1);\n      set(x, y, 0, 0.8 * k, 0.75 * k, 0.66 * k);\n    }\n  }\n  const box = (x0, y0, w, h, c, rd) => {\n    for (let y = y0; y \u003c y0 + h; y++)\n      for (let x = x0; x \u003c x0 + w; x++) if (!rd || (x > x0 && x \u003c x0 + w - 1) || (y > y0 && y \u003c y0 + h - 1)) (blk[y * W + x] = 1), set(x, y, 0, ...c);\n  };\n  // Starting blocks: kick plate, blue grip, white rim.\n  for (let k = 0, x; k \u003c 5; k++) (x = round(LANE(k) - 2.5)), box(x, 1, 6, 5, [0.9, 0.91, 0.92]), box(x, 1, 6, 1, [0.5, 0.53, 0.57]), box(x + 1, 2, 4, 3, [0.12, 0.28, 0.72]);\n  // Kickboards, bottles, a towel and flip-flops on the far deck.\n  box(3, 123, 5, 4, [0.96, 0.76, 0.12], 1);\n  box(5, 124, 5, 4, [0.16, 0.42, 0.92], 1);\n  for (const [x, c] of [[11, [0.3, 0.62, 0.95]], [35, [0.92, 0.2, 0.22]], [47, [0.3, 0.82, 0.42]]]) box(x, 124, 2, 2, c), set(x, 124, 0, 0.95, 0.95, 0.95);\n  for (let y = 123; y \u003c 127; y++) box(50, y, 7, 1, y & 1 ? [0.95, 0.94, 0.88] : [0.1, 0.62, 0.62]);\n  for (const x of [41, 43]) box(x, 124, 1, 3, [0.96, 0.4, 0.62]);\n}\n\n// Sun height and bearing: shadows, light colour, the stretch of the caustic net.\nfunction paint(P, s) {\n  const q = pow(abs(s), 1.3), a = ((25 + 100 * s) * PI) / 180, e = ((52 - 36 * abs(s)) * PI) / 180, za = PI / 2 - e;\n  const L = 11 * tan(asin(sin(za) / 1.33)), ux = sin(a), uy = -cos(a), F = L + 8 * tan(za), I = 1 - 0.18 * q, warm = s \u003c 0 ? [1, 0.86, 0.66] : [1, 0.76, 0.56];\n  Object.assign(P, { sx: ux * L, sy: uy * L, fx: ux * F, fy: uy * F, str: 0.8 * sin(e) ** 2 + 0.25, glint: (1 - abs(s)) ** 2 * 150 });\n  P.lc = [1, 0.98, 0.93].map((v, c) => mix(v, warm[c], q) * I);\n  // Low sun leaves the floor to the sky's light.\n  P.amb = [0.1, 0.15, 0.2].map((v, c) => v + q * [0.06, 0.12, 0.18][c]);\n  // The caustic net, squeezed along the sun's bearing when it is low.\n  const st = 1 - 1 / (1 + 1.4 * (1 - sin(e))), { wv, CS, CC, alb, mat, blk, bg, SB, lc, amb } = P;\n  wv.forEach(([an, l], i) => {\n    const kx = (cos(an) * 2 * PI) / l, ky = (sin(an) * 2 * PI) / l, kd = (kx * ux + ky * uy) * st;\n    P.ky[i] = ky - kd * uy;\n    for (let x = 0; x \u003c W; x++) (CS[i * W + x] = sin((kx - kd * ux) * x)), (CC[i * W + x] = cos((kx - kd * ux) * x));\n  });\n  // Shadows: the blocks' on the deck; the walls', ropes' and flags' on the floor.\n  const bx = ux * 2 * tan(za), by = uy * 2 * tan(za);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6;\n    if (mat[p] === 3) {\n      const wx = x - P.sx, wy = y - P.sy;\n      let sh = 1 - sm(min(wx - 1.5, 61.5 - wx, wy - Y0 + 0.5, Y1 + 0.5 - wy) + 0.5);\n      for (let k = 0; k \u003c 4; k++) sh += 0.6 * cl(1.3 - abs(wx - ROPE(k)), 0, 1);\n      for (const f of FLAGS) sh += 0.35 * cl(1 - abs(y - P.fy - f), 0, 1) * (floor(x - P.fx) % 3 ? 1 : 0.4);\n      SB[p] = min(1, sh);\n    } else {\n      const sx = round(x - bx), sy = round(y - by), shade = !blk[p] && sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H && blk[sy * W + sx] ? 0.5 : 1;\n      for (let c = 0; c \u003c 3; c++) bg[p * 3 + c] = alb[p * 3 + c] * (amb[c] * 0.7 + lc[c] * 0.74 * shade) * 255;\n    }\n  }\n}\n\n// Swimmers are capsules in body coordinates: u across (+ right), v back from the crown.\nlet nc = 0;\nconst CP = new Float32Array(20 * 8);\nconst cap = (u0, v0, u1, v1, r, c, sub) => CP.set([u0, v0, u1, v1, r, c, sub], nc++ * 8);\n// An arm from the shoulder to the hand, the elbow bent out to its side.\nfunction arm(sg, [hu, hv, bend, sub, hr = 0.5], deep) {\n  const su = sg * 1.8, dx = hu - su, dv = hv - 2.5, l = hyp(dx, dv) || 1, f = (dv * sg \u003c 0 ? -bend : bend) / l, eu = (su + hu) / 2 + dv * f, ev = (2.5 + hv) / 2 - dx * f;\n  cap(su, 2.5, eu, ev, 0.55, 1, max(sub, deep));\n  cap(eu, ev, hu, hv, hr, 1, max(sub, deep));\n}\n\n// Hand [u, v, elbow bend, how far under, hand size] for each stroke and phase.\nfunction hand(s, sg, ph) {\n  const th = fr(ph + (sg > 0 || s > 1 ? 0 : 0.5)), p = th * 2 - 1, q = th * 2 * PI;\n  if (s === 0) return th \u003c 0.5 ? [sg * (0.5 + 0.7 * sin(q)), -2.4 + 8.2 * sm(th * 2), 0.5, 0.5] : [sg * (1.6 + 2.3 * sin(p * PI)), 5.8 - 8.2 * sm(p), 1.3, 0];\n  // Backstroke's straight arm passes the vertical: from above, a bright hand.\n  if (s === 1) return th \u003c 0.5 ? [sg * 2.1, 2.5 + 4.8 * cos(q), 0, 0, 0.5 + 0.4 * sin(q)] : [sg * (1.3 + 2.6 * sin(p * PI)), -2.3 + 8.8 * sm(p), 1.2, 0.5];\n  if (s === 2) {\n    if (th \u003c 0.22) return [sg * (0.4 + 2.8 * sm(th / 0.22)), -3.4 + 7.3 * th, 0.9, 0.4];\n    if (th \u003c 0.38) return [sg * mix(3.2, 0.7, sm((th - 0.22) / 0.16)), mix(-1.8, 1.4, (th - 0.22) / 0.16), 1, 0.32];\n    if (th \u003c 0.52) return [sg * mix(0.7, 0.4, (th - 0.38) / 0.14), mix(1.4, -3.4, sm((th - 0.38) / 0.14)), 0.6, 0.4];\n    return [sg * 0.4, -3.4, 0.3, 0.45];\n  }\n  if (th \u003c 0.5) return [sg * (1.6 - 0.9 * sin(q)), mix(-2.6, 6, sm(th * 2)), 0.6, 0.5];\n  return th \u003c 0.8 ? [sg * (1.8 + 3.8 * sin(((th - 0.5) / 0.3) * PI)), mix(6, -2.6, sm((th - 0.5) / 0.3)), 0.4, 0] : [sg * 1.6, -2.6, 0.4, 0.32];\n}\n\n// This frame's capsules; returns how far the body is curled up.\nfunction pose(S, s) {\n  nc = 0;\n  const { ph, z, st } = S, t = S.t / S.tt;\n  let sc = 1, up = 0, hs, feet = null;\n  if (st === SWIM) (hs = [hand(s, 1, ph), hand(s, -1, ph)]), (up = s === 2 ? sm(1 - abs(ph - 0.36) / 0.16) : s === 3 ? sm(1 - abs(ph - 0.47) / 0.14) : 0);\n  else if (st === GLIDE) hs = [[0.3, -4.1, 0.2, z], [-0.3, -4.1, 0.2, z]];\n  else {\n    sc = t \u003c 0.5 ? 1 - 0.55 * sm(t / 0.35) : 0.45 + 0.55 * sm(t * 2 - 1);\n    hs = t >= 0.5 ? [[0.3, -3.6, 0.2, 0.7], [-0.3, -3.6, 0.2, 0.7]] : S.open ? [[1, -3.4, 0.4, 0], [-1, -3.4, 0.4, 0]] : [[1.6, 6, 0.3, 0.5], [-1.6, 6, 0.3, 0.5]];\n    up = S.open && t \u003c 0.6 ? 1 : 0;\n    // In a flip the legs come over the top.\n    if (!S.open && t > 0.25 && t \u003c 0.62) feet = 9.6 * cos((PI * (t - 0.25)) / 0.37);\n  }\n  const deep = st === TURN ? 0.4 : z, under = (i) => hs[i][3] > 0.3;\n  for (let i = 0; i \u003c 2; i++) if (under(i)) arm(1 - 2 * i, hs[i], deep);\n  for (const sg of [1, -1]) {\n    // The frog kick draws the heels up and whips them round and together.\n    const r = st || s - 2 ? 0 : cl(1 - abs(ph - 0.52) / 0.14, 0, 1), w = ph > 0.52 ? 8.8 * r * (1 - r) : 0;\n    let fu = sg * (0.5 + 1.2 * r + w), fv = 9.4 - 2.2 * r + (s \u003c 2 ? 0.3 * sin(S.kp + (sg > 0 ? 0 : PI)) : 0), ku = sg * (0.6 + 1.6 * r), kv = 7.9 - 0.6 * r;\n    if (st === SWIM && s === 3) fv = 9.4 + 0.5 * sin(ph * 4 * PI);\n    if (st === GLIDE) fv = 9.5 + 0.4 * sin(S.t * 16);\n    if (feet !== null) [ku, kv, fu, fv] = [sg * 0.6, VC + feet * 0.45, sg * 0.5, VC + feet];\n    cap(sg * 0.6, 6.3, ku, kv, 0.62, 1, max(0.42, deep));\n    cap(ku, kv, fu, fv, 0.5, 1, feet !== null ? 0.6 * abs(feet / 9.6) : max(0.42, deep));\n  }\n  // Hips, back, shoulders (the one over a recovering arm rides higher), head.\n  cap(0, 5.2, 0, 6.3, 1.15, 2, max(s === 3 && st === SWIM ? 0.3 + 0.25 * sin(ph * 4 * PI) : 0.35, deep));\n  cap(0, 2.8, 0, 5, 1.35, S.sb ? 2 : 1, max(0.25 - 0.2 * up, deep));\n  for (let i = 0; i \u003c 2; i++) cap(0, 2.4, 1.8 - 3.6 * i, 2.5, 0.75, 1, max(under(i) ? 0.3 : 0.05, deep) * (1 - 0.6 * up));\n  const h = (st === TURN && !S.open ? 0.6 * sm(t / 0.3) : 0.05 * (1 - up)) + deep * 0.6;\n  if (s === 1 && st !== GLIDE) {\n    // Face up: cap, face, goggles.\n    cap(0, 0.55, 0, 0.9, 0.95, 0, h);\n    cap(0, 1.45, 0, 1.45, 0.75, 1, h);\n    cap(-0.45, 1.2, 0.45, 1.2, 0.28, 3, h);\n  } else cap(0, 0.7, 0, 1.3, 0.95 + 0.15 * up, 0, h);\n  for (let i = 0; i \u003c 2; i++) if (!under(i)) arm(1 - 2 * i, hs[i], deep * 0.6);\n  return sc;\n}\n\n// Screen position of a body point.\nconst sxy = (S, sc, u, v) => [S.x - S.d * u * SZ * (1.3 - 0.3 * sc), S.y - S.d * (v - VC) * sc * SZ];\n\n// White water: n flecks round a point. Kinds: foam, spray, kick.\nfunction foam(P, [x, y], n, spread, life, size, kind, vel) {\n  for (let i = 0, a, r, l; i \u003c n; i++) (a = rnd() * 2 * PI), (r = spread * sqrt(rnd())), (l = life * (0.6 + 0.6 * rnd())), P.fo.push([x + cos(a) * r, y + sin(a) * r, cos(a) * vel * rnd(), sin(a) * vel * rnd(), l, l, size * (0.7 + 0.6 * rnd()), kind]);\n}\nconst ring = (P, S, [x, y], amp) => P.ri.push([x, y, 0, amp, S.k, rnd() * 7]);\nconst fade = (r, amp) => amp * max(0, 1 - r / 10);\n\nfunction newSwimmer(P, i, fresh) {\n  const k = ORDER[i % 5], d = rnd() \u003c 0.5 ? 1 : -1;\n  const S = { k, d, x: LANE(k) + rnd() - 0.5, o: (rnd() - 0.5) * 1.2, f: 0.8 + rnd() * 0.36, ph: rnd(), kp: rnd() * 7, st: SWIM, t: 0, tt: 1, z: 0, v: 0, ring: rnd() * 0.12, cap: CAPS[P.caps[i % 10]], skin: SKIN[floor(rnd() * 5)], suit: SUIT[floor(rnd() * 6)], sb: rnd() \u003c 0.5 };\n  // At the start they are spread along their lanes; later ones push off a wall.\n  if (fresh) S.y = Y0 + 16 + fr(0.29 * floor(i / 5) + rnd() * 0.85) * (Y1 - Y0 - 32);\n  else Object.assign(S, { y: (d > 0 ? Y0 - 0.5 : Y1 + 0.5) + d * 5.6 * SZ, st: GLIDE, z: 0.85 });\n  return S;\n}\n\nfunction stepSwimmer(P, S, d, s) {\n  const [pace0, hz, wamp, kf] = STROKE[s], pace = pace0 * S.f, wall = S.d > 0 ? Y1 + 0.5 : Y0 - 0.5;\n  const head = () => sxy(S, 1, 0, 0.6), feet = () => sxy(S, 1, 0, 9.8);\n  S.t += d;\n  S.x += cl(LANE(S.k) + (P.cnt[S.k] > 1 ? -S.d * 2.4 : S.o) - S.x, -4 * d, 4 * d);\n  S.kp += d * (s \u003c 2 ? 17 : 6);\n  let v = 0;\n  if (S.st === SWIM) {\n    const p0 = S.ph, ph = (S.ph += hz * (0.55 + 0.45 * S.f) * d), crossed = (at) => floor(p0 - at) !== floor(ph - at);\n    // Breaststroke and butterfly surge after each kick.\n    v = pace * (s === 2 ? 0.6 + 1.82 * exp(-4.5 * fr(ph - 0.6)) : s === 3 ? 0.7 + exp(-3 * fr(2 * ph - 0.1)) : 1 + 0.06 * sin(ph * 4 * PI));\n    // Keep behind a slower swimmer going the same way.\n    for (const O of P.sw) if (O.k === S.k && O.d === S.d && !O.st && (O.y - S.y) * S.d > 0 && (O.y - S.y) * S.d \u003c 13) v = min(v, O.v);\n    // Splash where a hand goes in; butterfly throws spray.\n    for (const sg of [1, -1]) {\n      const at = [sg > 0 ? 0 : 0.5, sg > 0 ? 0.5 : 0, -1, 0.8][s];\n      if (at >= 0 && crossed(at)) {\n        const h = hand(s, sg, at + 0.001), xy = sxy(S, 1, h[0], h[1]);\n        foam(P, xy, s === 3 ? 6 : 3, s === 3 ? 1.6 : 0.8, 0.6, s === 3 ? 0.85 : 0.75, 0, s === 3 ? 5 : 2);\n        if (s === 3) foam(P, xy, 4, 0.5, 0.35, 0.8, 1, 9);\n      }\n    }\n    if (kf && rnd() \u003c kf * d * 1.5) {\n      const [x, y] = feet();\n      foam(P, [x + (rnd() - 0.5) * 2.2, y + S.d * rnd() * 1.5], 1, 0.4, 0.5, 0.75, 2, 0);\n    }\n    if ((s === 2 && crossed(0.6)) || (s === 3 && (crossed(0.08) || crossed(0.58)))) foam(P, feet(), 5, 2, 0.7, 0.85, 0, 3);\n    // Each stroke sends out a pulse, so the arms of the V come in dashes.\n    if ((S.ring -= d) \u003c= 0) (S.ring = 0.2), ring(P, S, head(), wamp * (0.35 + 1.3 * (s \u003c 2 ? cos(2 * PI * ph) ** 2 : sm(1 - abs(fr(ph) - (s === 2 ? 0.45 : 0.78)) / 0.22))));\n    // At the wall: a flip turn, or a two-hand touch for breaststroke and butterfly.\n    if ((wall - S.y) * S.d - HV \u003c (s > 1 ? 1.2 : 2.3)) Object.assign(S, { st: TURN, t: 0, y0: S.y, w: wall, yb: wall - S.d * 3 * SZ, open: s > 1, tt: s > 1 ? 1.15 : 0.9, flip: 0 });\n    else S.y += S.d * v * d;\n  } else if (S.st === TURN) {\n    const t = S.t / S.tt;\n    if (t >= 0.5 && !S.flip) {\n      S.flip = true;\n      S.d = -S.d;\n      const xy = sxy(S, 0.45, 0, VC + 3);\n      foam(P, xy, S.open ? 5 : 9, 2.4, 0.9, 0.95, 0, 4);\n      if (!S.open) foam(P, xy, 5, 1, 0.35, 0.8, 1, 8);\n      ring(P, S, xy, 1.1);\n    }\n    S.y = t \u003c 0.5 ? mix(S.y0, S.yb, sm(t * 2)) : mix(S.yb, S.w + S.d * 5.6 * SZ, sm(t * 2 - 1));\n    if (t >= 1) Object.assign(S, { st: GLIDE, t: 0, z: 0.85 });\n  } else {\n    // Underwater off the wall, rising as it slows, then a breakout.\n    const t = S.t / 1.05;\n    v = pace * (1.75 - 0.85 * t);\n    S.z = 0.85 - 0.75 * sm(t);\n    S.y += S.d * v * d;\n    if ((S.ring -= d) \u003c= 0) (S.ring = 0.2), ring(P, S, head(), 0.45 * (1 - S.z));\n    if (t >= 1) {\n      foam(P, head(), s === 3 ? 7 : 5, 1.8, 0.7, 0.85, 0, 3);\n      ring(P, S, head(), 0.9);\n      Object.assign(S, { st: SWIM, t: 0, z: 0, ph: s === 2 ? 0.1 : 0 });\n    }\n  }\n  S.v = v;\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), blk: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), SB: F(N), SS: F(N), FL: F(N), SF: F(N), acc: F(W) });\n  Object.assign(P, { CS: F(7 * W), CC: F(7 * W), RS: F(7 * H), RC: F(7 * H), ky: F(7), chop: -1, rock: F(4 * H), sun: 9, t: 0, sw: [], fo: [], ri: [], cnt: [0, 0, 0, 0, 0] });\n  // Five long swells make the caustic net; two short ripples are the swimmers' chop.\n  P.wv = Array.from({ length: 7 }, (_, i) => {\n    const l = i \u003c 5 ? 9 + rnd() * 6 : 5 + rnd() * 1.5;\n    return [(i * PI) / 5 + (rnd() - 0.5) * 0.4 + (i > 4) * 0.3, l, ((i \u003c 5 ? 1.6 + rnd() * 1.4 : 3 + rnd()) * 2 * PI) / l, rnd() * 7];\n  });\n  // Bright caps first.\n  P.caps = [0, 1, 5, 4, 6, 7].sort(() => rnd() - 0.5).concat([2, 9, 8, 3]);\n  build(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], { rock } = P;\n  const s = (P.s = cl(round(k[0]), 0, 3)), sun = cl(k[3], -1, 1), n = round(cl(k[2], 4, 15)), d = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  if (abs(sun - P.sun) > 0.002) (P.sun = sun), paint(P, sun);\n  // Butterfly and breaststroke churn the pool; more swimmers churn it more.\n  const chop = STROKE[s][4] * (0.7 + (0.3 * (n - 4)) / 11), fresh = !P.t;\n  P.chop = fresh ? chop : P.chop + (chop - P.chop) * min(1, d * 1.5);\n  while (P.sw.length \u003c n) P.sw.push(newSwimmer(P, P.sw.length, fresh));\n  P.sw.length = n;\n  P.cnt.fill(0);\n  for (const S of P.sw) P.cnt[S.k]++;\n  P.t += d;\n  for (const S of P.sw) stepSwimmer(P, S, d, s);\n  // Wakes spread at 3 rows a second, slower than the swimmers, so their rings\n  // pile up into a V. Where one meets a rope, the floats rock.\n  for (let i = 0; i \u003c 4 * H; i++) rock[i] *= exp(-1.8 * d);\n  P.ri = P.ri.filter((R) => {\n    const r = (R[2] += 3 * d), f = fade(r, R[3]);\n    for (const j of [R[4] - 1, R[4]]) {\n      const dx = abs(ROPE(j) - R[0]), dy = sqrt(r * r - dx * dx);\n      if (j >= 0 && j \u003c 4 && r > dx) for (const y of [round(R[1] - dy), round(R[1] + dy)]) if (y >= 0 && y \u003c H) rock[j * H + y] = max(rock[j * H + y], f);\n    }\n    return r \u003c 10;\n  });\n  const dk = exp(-4 * d);\n  P.fo = P.fo.filter((f) => ((f[0] += f[2] * d), (f[1] += f[3] * d), (f[2] *= dk), (f[3] *= dk), (f[4] -= d) > 0));\n}\n\nlet BUF;\nfunction blend(p, r, g, b, a) {\n  const o = p * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nfunction splat(B, x, y, v) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi, p = yi * W + xi;\n  if (xi \u003c 2 || xi > 60 || yi \u003c Y0 || yi >= Y1) return;\n  B[p] += v * (1 - fx) * (1 - fy);\n  B[p + 1] += v * fx * (1 - fy);\n  B[p + W] += v * (1 - fx) * fy;\n  B[p + W + 1] += v * fx * fy;\n}\n\n// One capsule on screen: into the colour buffer, or as a soft shadow into SS.\nfunction stamp(P, x0, y0, x1, y1, r, col, sub, shadow) {\n  const dx = x1 - x0, dy = y1 - y0, ll = dx * dx + dy * dy || 1e-6, e = shadow ? r + 1.4 : r + 0.6, { lc, amb, SS } = P, op = 1 - 0.3 * sub;\n  const c = [0, 1, 2].map((i, v) => ((v = col[i] * (lc[i] * 0.86 + amb[i] * 0.45)), mix(v, v * TW[i] * 1.15 + SC[i], sub)));\n  for (let y = max(0, floor(min(y0, y1) - e)), yb = min(H - 1, ceil(max(y0, y1) + e)); y \u003c= yb; y++)\n    for (let x = max(2, floor(min(x0, x1) - e)), xb = min(61, ceil(max(x0, x1) + e)); x \u003c= xb; x++) {\n      const px = x - x0, py = y - y0, t = cl((px * dx + py * dy) / ll, 0, 1), dd = hyp(px - t * dx, py - t * dy), p = y * W + x;\n      if (shadow) SS[p] = max(SS[p], cl((r + 1 - dd) / 1.8, 0, 1) * 0.85);\n      else if (r + 0.5 > dd) blend(p, c[0], c[1], c[2], min(1, r + 0.5 - dd) * op);\n    }\n}\n\nfunction swimmers(P, shadow) {\n  for (const S of P.sw) {\n    const sc = pose(S, P.s), cols = [S.cap, S.skin, S.suit, [20, 40, 90]], off = shadow ? 1 - 0.6 * S.z : 0;\n    // White water pushed up round the head and shoulders.\n    if (shadow && S.z \u003c 0.5)\n      for (let i = 0; i \u003c= 10; i++) {\n        const a = (i - 5) * 0.38, [x, y] = sxy(S, sc, sin(a) * 2.6, 1.6 - cos(a) * 2.4);\n        splat(P.SF, x, y, (0.9 - 0.08 * abs(i - 5)) * (1 - 2 * S.z) * (S.st === TURN ? 1.6 : 1));\n      }\n    for (let i = 0, o = 0; i \u003c nc; i++, o += 8) {\n      const [x0, y0] = sxy(S, sc, CP[o], CP[o + 1]), [x1, y1] = sxy(S, sc, CP[o + 2], CP[o + 3]);\n      stamp(P, x0 + P.sx * off, y0 + P.sy * off, x1 + P.sx * off, y1 + P.sy * off, CP[o + 4] * SZ, cols[CP[o + 5]], CP[o + 6], shadow);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, alb, mat, bg, SB, SS, FL, SF, CS, CC, RS, RC, lc, amb, str, acc, sx, sy, glint } = P;\n  BUF = buf;\n  for (const B of [SS, FL, SF]) B.fill(0);\n  swimmers(P, true);\n  // Wake rings: crest and trough on the surface, focused light on the floor.\n  for (const [cx, cy, r, amp, k, sd] of P.ri) {\n    const f = fade(r, amp), n = f > 0.03 ? max(6, ceil(r * 4.2)) : 0;\n    for (let i = 0; i \u003c n; i++) {\n      const a = (i / n) * 2 * PI, ca = cos(a), sa = sin(a), x = cx + ca * r, y = cy + sa * r, w = f * (abs(x - LANE(k)) > 6.2 ? 0.2 : 1) * (0.6 + 0.4 * sin(a * 3 + sd));\n      splat(SF, x, y, w * 3);\n      splat(SF, x - ca, y - sa, -w * 1.6);\n      splat(FL, x + sx, y + sy, w * 0.9);\n      splat(FL, x + sx - 1.5 * ca, y + sy - 1.5 * sa, -w * 0.6);\n    }\n  }\n  for (let i = 0; i \u003c 7; i++) {\n    const [, , om, ps] = P.wv[i], ky = P.ky[i], a = i \u003c 5 ? 0.21 : 0.3 * P.chop;\n    for (let y = 0, q; y \u003c H; y++) (q = ky * y - om * P.t + ps), (RS[i * H + y] = a * sin(q)), (RC[i * H + y] = a * cos(q));\n  }\n  // The floor: tiles under the caustic net, the shadows, and the wakes' light.\n  const [A0, A1, A2] = amb.map((v, c) => v * TW[c] * 255), [L0, L1, L2] = lc.map((v, c) => v * TW[c] * 255);\n  for (let y = Y0; y \u003c= Y1; y++) {\n    acc.fill(0);\n    for (let i = 0; i \u003c 7; i++) for (let x = 2, rc = RC[i * H + y], rs = RS[i * H + y]; x \u003c 62; x++) acc[x] += CS[i * W + x] * rc + CC[i * W + x] * rs;\n    for (let x = 2, p = y * W + 2; x \u003c 62; x++, p++) {\n      const s = abs(acc[x]) * 7, c = s \u003c 1 ? (1 - s) * (1 - s) : 0, li = max(0, 0.62 + str * c + FL[p]) * (1 - 0.85 * min(1, SB[p] + SS[p])), sf = SF[p], gl = sf > 0.45 ? (sf - 0.45) * glint : 0;\n      const o = p * 3;\n      buf[o] = alb[o] * (A0 + L0 * li) + 2 + sf * 40 + gl;\n      buf[o + 1] = alb[o + 1] * (A1 + L1 * li) + 18 + sf * 62 + gl;\n      buf[o + 2] = alb[o + 2] * (A2 + L2 * li) + 30 + sf * 66 + gl;\n    }\n  }\n  // Deck; water moving in the gutters.\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3)\n    if (mat[p] !== 3) {\n      const q = mat[p] === 1 && alb[o] \u003c 0.5 ? 0.75 + 0.5 * sin(P.t * 3 + (p & 63) * 0.9 + (p >> 6) * 0.7) : 1;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = bg[o + c] * q;\n    }\n  ropes(P);\n  swimmers(P, false);\n  for (const [x, y, , , life, l0, size, kind] of P.fo) {\n    const f = life / l0, r = size * (0.55 + 0.45 * f), a = [0.8, 0.95, 0.6][kind] * pow(f, 0.7);\n    for (let yy = max(Y0 - 1, floor(y - r)); yy \u003c= min(Y1 + 1, y + r); yy++)\n      for (let xx = max(2, floor(x - r)); xx \u003c= min(61, x + r); xx++) {\n        const q = cl(r + 0.5 - hyp(xx - x, yy - y), 0, 1) * a;\n        if (q > 0.02) blend(yy * W + xx, 236 * lc[0] + 20, 244 * lc[1] + 10, 248 * lc[2] + 6, q);\n      }\n  }\n  flags(P);\n  for (let y = 0, o = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n}\n\n// Lane ropes: red floats 5 m from each end, blue and white between; a wake rocks them.\nconst FLOAT = [[222, 38, 40], [236, 236, 232], [28, 72, 206]];\nfunction ropes({ rock, t, lc, amb }) {\n  const k3 = lc.map((v, c) => v * 0.9 + amb[c] * 0.4);\n  for (let j = 0; j \u003c 4; j++)\n    for (let i = 0; i \u003c 56; i++) {\n      const y = Y0 + 2 * i, rk = min(1.2, max(rock[j * H + y], rock[j * H + y + 1])), c = FLOAT[i \u003c 11 || i > 44 ? 0 : (i >> 1) & 1 ? 1 : 2], on = rk > 0.12;\n      const sh = on ? round(sin(t * 11 + i * 1.3) * min(1, rk) * 0.9) : 0, hi = on ? floor(t * 7 * rk + i * 0.5) & 3 : 0;\n      for (let q = 0, k; q \u003c 4; q++) (k = (q === hi ? 1.28 : q === 3 - hi ? 0.62 : 0.92) * (1 + 0.15 * rk)), blend((y + (q >> 1)) * W + ROPE(j) - 0.5 + (q & 1) + sh, c[0] * k * k3[0], c[1] * k * k3[1], c[2] * k * k3[2], 1);\n    }\n}\n\n// Backstroke flags strung across between posts on the side decks.\nconst FLAGC = [[228, 40, 44], [240, 240, 236], [30, 80, 220], [250, 206, 30]];\nfunction flags({ lc }) {\n  for (const f of FLAGS) for (let x = 0, c; x \u003c W; x++) (c = x % 3 > 1 ? [70, 70, 74] : FLAGC[floor(x / 3) & 3].map((v, i) => v * lc[i])), blend(f * W + x, ...c, 0.95);\n}\n","layer":{"id":"layer-lap-pool","type":"code","name":"lap-pool","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lap Pool\n// Family:  sport\n// Idea:    A 25 m outdoor pool seen from straight above: swimmers in coloured caps swim lengths at their own paces, kick up white water, rock the lane ropes with their V wakes and flip-turn at the walls over a floor netted with sun caustics.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after overhead drone photographs of outdoor lap pools\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Stroke=0..3, Speed=0.2..3, Swimmers=4..15, Sun=-1..1\n//\n// Knob 1: Stroke. What everyone swims: freestyle at 0, backstroke at 1, breaststroke at 2 with its frog kick and glide, butterfly at 3 with both arms swung across the lane. Breaststroke and butterfly churn the water and break up the caustic net.\n// Knob 2: Speed. How fast the swimmers and the water go: at 2 a freestyle length takes 10 to 14 s, breaststroke nearer 20.\n// Knob 3: Swimmers. Four swimmers in four of the five lanes at 4; past five they share lanes and swim in circles, three a lane at 15.\n// Knob 4: Sun. Near noon at 0.06, with a bright caustic net and short shadows. Towards -1 the morning sun comes low from the east, towards 1 the evening sun from the west: gold light, a faint stretched net, long shadows across the lanes.\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, pow, asin, tan, PI } = Math;\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst fr = (x) => x - floor(x);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nconst [W, H, N] = [64, 128, 8192];\n// Pixel centres on whole numbers. Water: rows 8..119 (25 m), columns 2..61, five lanes of 12.\nconst [Y0, Y1] = [8, 119];\nconst LANE = (k) => 7.5 + 12 * k;\nconst ROPE = (k) => 13.5 + 12 * k;\n// Backstroke flags 5 m out from each wall.\nconst FLAGS = [Y0 + 22, Y1 - 22];\n// Body centre VC rows behind the crown; swimmers drawn SZ times life size.\nconst [VC, SZ] = [4.5, 1.3];\nconst HV = VC * SZ;\nconst [SWIM, TURN, GLIDE] = [0, 1, 2];\n// Per stroke: pace (rows/s at Speed 2), arm cycles/s, wake, kick spray/s, churn.\nconst STROKE = [[9.2, 1.15, 0.5, 22, 0.2], [8, 1, 0.45, 26, 0.15], [5.8, 0.95, 0.9, 0, 0.7], [8.6, 1.05, 1.25, 0, 1]];\nconst CAPS = [[252, 212, 20], [232, 36, 48], [242, 242, 236], [34, 34, 40], [36, 204, 92], [255, 122, 18], [255, 84, 170], [28, 104, 238], [182, 188, 198], [150, 64, 226]];\nconst SKIN = [[238, 192, 160], [214, 160, 118], [176, 116, 78], [122, 78, 52], [248, 206, 178]];\nconst SUIT = [[22, 26, 70], [18, 18, 22], [184, 22, 44], [0, 112, 132], [96, 32, 124], [34, 64, 168]];\n// Lanes fill from the middle, so four swimmers leave lane 4 free.\nconst ORDER = [2, 0, 4, 1, 3];\n// Light through 2 m of water, and the blue it scatters back.\nconst TW = [0.36, 0.72, 0.82];\nconst SC = [2, 18, 30];\n\nfunction build(P) {\n  const { alb, mat, blk } = P;\n  const set = (x, y, m, r, g, b) => ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, g = hash(x, y) - 0.5, e = min(y - Y0, Y1 - y);\n    if (e >= 0 && x >= 2 && x \u003c= 61) {\n      // White tiles on a 4 LED grid; lane lines end in a T 2 m from the wall.\n      const t = (1 + (hash(x >> 2, (y - Y0) >> 2) - 0.5) * 0.07 + g * 0.04) * ((x - 2) % 4 && (y - Y0) % 4 ? 1 : 0.88);\n      const dc = abs(x - LANE(floor((x - 1.5) / 12)));\n      if (e > 8 && (dc \u003c 1 || (dc \u003c 3 && e \u003c 11))) set(x, y, 3, 0.1 * t, 0.14 * t, 0.38 * t);\n      else set(x, y, 3, 0.84 * t, 0.92 * t, 0.95 * t);\n    } else if (e === -1 && x >= 2 && x \u003c= 61) set(x, y, 2, 0.12, 0.28 + g * 0.04, 0.58);\n    else if (e >= -3 && x >= 1 && x \u003c= 62) {\n      // The overflow gutter's grate: white bars over dark water.\n      const bar = (e \u003c -1 ? x : y) % 2 === 0;\n      set(x, y, 1, bar ? 0.86 : 0.04, bar ? 0.88 : 0.17, bar ? 0.89 : 0.23);\n    } else {\n      // Stone paving, darker where the splashes land.\n      const side = x === 0 || x === 63, j = side ? y % 8 === 0 : x % 8 === 0 || e === -8;\n      const k = (0.92 + 0.16 * hash(side ? x : x >> 3, side ? y >> 3 : y > 64) + g * 0.07) * (j ? 0.84 : 1) * (e === -4 || side ? 0.88 - 0.1 * hash(x, y + 7) : 1);\n      set(x, y, 0, 0.8 * k, 0.75 * k, 0.66 * k);\n    }\n  }\n  const box = (x0, y0, w, h, c, rd) => {\n    for (let y = y0; y \u003c y0 + h; y++)\n      for (let x = x0; x \u003c x0 + w; x++) if (!rd || (x > x0 && x \u003c x0 + w - 1) || (y > y0 && y \u003c y0 + h - 1)) (blk[y * W + x] = 1), set(x, y, 0, ...c);\n  };\n  // Starting blocks: kick plate, blue grip, white rim.\n  for (let k = 0, x; k \u003c 5; k++) (x = round(LANE(k) - 2.5)), box(x, 1, 6, 5, [0.9, 0.91, 0.92]), box(x, 1, 6, 1, [0.5, 0.53, 0.57]), box(x + 1, 2, 4, 3, [0.12, 0.28, 0.72]);\n  // Kickboards, bottles, a towel and flip-flops on the far deck.\n  box(3, 123, 5, 4, [0.96, 0.76, 0.12], 1);\n  box(5, 124, 5, 4, [0.16, 0.42, 0.92], 1);\n  for (const [x, c] of [[11, [0.3, 0.62, 0.95]], [35, [0.92, 0.2, 0.22]], [47, [0.3, 0.82, 0.42]]]) box(x, 124, 2, 2, c), set(x, 124, 0, 0.95, 0.95, 0.95);\n  for (let y = 123; y \u003c 127; y++) box(50, y, 7, 1, y & 1 ? [0.95, 0.94, 0.88] : [0.1, 0.62, 0.62]);\n  for (const x of [41, 43]) box(x, 124, 1, 3, [0.96, 0.4, 0.62]);\n}\n\n// Sun height and bearing: shadows, light colour, the stretch of the caustic net.\nfunction paint(P, s) {\n  const q = pow(abs(s), 1.3), a = ((25 + 100 * s) * PI) / 180, e = ((52 - 36 * abs(s)) * PI) / 180, za = PI / 2 - e;\n  const L = 11 * tan(asin(sin(za) / 1.33)), ux = sin(a), uy = -cos(a), F = L + 8 * tan(za), I = 1 - 0.18 * q, warm = s \u003c 0 ? [1, 0.86, 0.66] : [1, 0.76, 0.56];\n  Object.assign(P, { sx: ux * L, sy: uy * L, fx: ux * F, fy: uy * F, str: 0.8 * sin(e) ** 2 + 0.25, glint: (1 - abs(s)) ** 2 * 150 });\n  P.lc = [1, 0.98, 0.93].map((v, c) => mix(v, warm[c], q) * I);\n  // Low sun leaves the floor to the sky's light.\n  P.amb = [0.1, 0.15, 0.2].map((v, c) => v + q * [0.06, 0.12, 0.18][c]);\n  // The caustic net, squeezed along the sun's bearing when it is low.\n  const st = 1 - 1 / (1 + 1.4 * (1 - sin(e))), { wv, CS, CC, alb, mat, blk, bg, SB, lc, amb } = P;\n  wv.forEach(([an, l], i) => {\n    const kx = (cos(an) * 2 * PI) / l, ky = (sin(an) * 2 * PI) / l, kd = (kx * ux + ky * uy) * st;\n    P.ky[i] = ky - kd * uy;\n    for (let x = 0; x \u003c W; x++) (CS[i * W + x] = sin((kx - kd * ux) * x)), (CC[i * W + x] = cos((kx - kd * ux) * x));\n  });\n  // Shadows: the blocks' on the deck; the walls', ropes' and flags' on the floor.\n  const bx = ux * 2 * tan(za), by = uy * 2 * tan(za);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6;\n    if (mat[p] === 3) {\n      const wx = x - P.sx, wy = y - P.sy;\n      let sh = 1 - sm(min(wx - 1.5, 61.5 - wx, wy - Y0 + 0.5, Y1 + 0.5 - wy) + 0.5);\n      for (let k = 0; k \u003c 4; k++) sh += 0.6 * cl(1.3 - abs(wx - ROPE(k)), 0, 1);\n      for (const f of FLAGS) sh += 0.35 * cl(1 - abs(y - P.fy - f), 0, 1) * (floor(x - P.fx) % 3 ? 1 : 0.4);\n      SB[p] = min(1, sh);\n    } else {\n      const sx = round(x - bx), sy = round(y - by), shade = !blk[p] && sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H && blk[sy * W + sx] ? 0.5 : 1;\n      for (let c = 0; c \u003c 3; c++) bg[p * 3 + c] = alb[p * 3 + c] * (amb[c] * 0.7 + lc[c] * 0.74 * shade) * 255;\n    }\n  }\n}\n\n// Swimmers are capsules in body coordinates: u across (+ right), v back from the crown.\nlet nc = 0;\nconst CP = new Float32Array(20 * 8);\nconst cap = (u0, v0, u1, v1, r, c, sub) => CP.set([u0, v0, u1, v1, r, c, sub], nc++ * 8);\n// An arm from the shoulder to the hand, the elbow bent out to its side.\nfunction arm(sg, [hu, hv, bend, sub, hr = 0.5], deep) {\n  const su = sg * 1.8, dx = hu - su, dv = hv - 2.5, l = hyp(dx, dv) || 1, f = (dv * sg \u003c 0 ? -bend : bend) / l, eu = (su + hu) / 2 + dv * f, ev = (2.5 + hv) / 2 - dx * f;\n  cap(su, 2.5, eu, ev, 0.55, 1, max(sub, deep));\n  cap(eu, ev, hu, hv, hr, 1, max(sub, deep));\n}\n\n// Hand [u, v, elbow bend, how far under, hand size] for each stroke and phase.\nfunction hand(s, sg, ph) {\n  const th = fr(ph + (sg > 0 || s > 1 ? 0 : 0.5)), p = th * 2 - 1, q = th * 2 * PI;\n  if (s === 0) return th \u003c 0.5 ? [sg * (0.5 + 0.7 * sin(q)), -2.4 + 8.2 * sm(th * 2), 0.5, 0.5] : [sg * (1.6 + 2.3 * sin(p * PI)), 5.8 - 8.2 * sm(p), 1.3, 0];\n  // Backstroke's straight arm passes the vertical: from above, a bright hand.\n  if (s === 1) return th \u003c 0.5 ? [sg * 2.1, 2.5 + 4.8 * cos(q), 0, 0, 0.5 + 0.4 * sin(q)] : [sg * (1.3 + 2.6 * sin(p * PI)), -2.3 + 8.8 * sm(p), 1.2, 0.5];\n  if (s === 2) {\n    if (th \u003c 0.22) return [sg * (0.4 + 2.8 * sm(th / 0.22)), -3.4 + 7.3 * th, 0.9, 0.4];\n    if (th \u003c 0.38) return [sg * mix(3.2, 0.7, sm((th - 0.22) / 0.16)), mix(-1.8, 1.4, (th - 0.22) / 0.16), 1, 0.32];\n    if (th \u003c 0.52) return [sg * mix(0.7, 0.4, (th - 0.38) / 0.14), mix(1.4, -3.4, sm((th - 0.38) / 0.14)), 0.6, 0.4];\n    return [sg * 0.4, -3.4, 0.3, 0.45];\n  }\n  if (th \u003c 0.5) return [sg * (1.6 - 0.9 * sin(q)), mix(-2.6, 6, sm(th * 2)), 0.6, 0.5];\n  return th \u003c 0.8 ? [sg * (1.8 + 3.8 * sin(((th - 0.5) / 0.3) * PI)), mix(6, -2.6, sm((th - 0.5) / 0.3)), 0.4, 0] : [sg * 1.6, -2.6, 0.4, 0.32];\n}\n\n// This frame's capsules; returns how far the body is curled up.\nfunction pose(S, s) {\n  nc = 0;\n  const { ph, z, st } = S, t = S.t / S.tt;\n  let sc = 1, up = 0, hs, feet = null;\n  if (st === SWIM) (hs = [hand(s, 1, ph), hand(s, -1, ph)]), (up = s === 2 ? sm(1 - abs(ph - 0.36) / 0.16) : s === 3 ? sm(1 - abs(ph - 0.47) / 0.14) : 0);\n  else if (st === GLIDE) hs = [[0.3, -4.1, 0.2, z], [-0.3, -4.1, 0.2, z]];\n  else {\n    sc = t \u003c 0.5 ? 1 - 0.55 * sm(t / 0.35) : 0.45 + 0.55 * sm(t * 2 - 1);\n    hs = t >= 0.5 ? [[0.3, -3.6, 0.2, 0.7], [-0.3, -3.6, 0.2, 0.7]] : S.open ? [[1, -3.4, 0.4, 0], [-1, -3.4, 0.4, 0]] : [[1.6, 6, 0.3, 0.5], [-1.6, 6, 0.3, 0.5]];\n    up = S.open && t \u003c 0.6 ? 1 : 0;\n    // In a flip the legs come over the top.\n    if (!S.open && t > 0.25 && t \u003c 0.62) feet = 9.6 * cos((PI * (t - 0.25)) / 0.37);\n  }\n  const deep = st === TURN ? 0.4 : z, under = (i) => hs[i][3] > 0.3;\n  for (let i = 0; i \u003c 2; i++) if (under(i)) arm(1 - 2 * i, hs[i], deep);\n  for (const sg of [1, -1]) {\n    // The frog kick draws the heels up and whips them round and together.\n    const r = st || s - 2 ? 0 : cl(1 - abs(ph - 0.52) / 0.14, 0, 1), w = ph > 0.52 ? 8.8 * r * (1 - r) : 0;\n    let fu = sg * (0.5 + 1.2 * r + w), fv = 9.4 - 2.2 * r + (s \u003c 2 ? 0.3 * sin(S.kp + (sg > 0 ? 0 : PI)) : 0), ku = sg * (0.6 + 1.6 * r), kv = 7.9 - 0.6 * r;\n    if (st === SWIM && s === 3) fv = 9.4 + 0.5 * sin(ph * 4 * PI);\n    if (st === GLIDE) fv = 9.5 + 0.4 * sin(S.t * 16);\n    if (feet !== null) [ku, kv, fu, fv] = [sg * 0.6, VC + feet * 0.45, sg * 0.5, VC + feet];\n    cap(sg * 0.6, 6.3, ku, kv, 0.62, 1, max(0.42, deep));\n    cap(ku, kv, fu, fv, 0.5, 1, feet !== null ? 0.6 * abs(feet / 9.6) : max(0.42, deep));\n  }\n  // Hips, back, shoulders (the one over a recovering arm rides higher), head.\n  cap(0, 5.2, 0, 6.3, 1.15, 2, max(s === 3 && st === SWIM ? 0.3 + 0.25 * sin(ph * 4 * PI) : 0.35, deep));\n  cap(0, 2.8, 0, 5, 1.35, S.sb ? 2 : 1, max(0.25 - 0.2 * up, deep));\n  for (let i = 0; i \u003c 2; i++) cap(0, 2.4, 1.8 - 3.6 * i, 2.5, 0.75, 1, max(under(i) ? 0.3 : 0.05, deep) * (1 - 0.6 * up));\n  const h = (st === TURN && !S.open ? 0.6 * sm(t / 0.3) : 0.05 * (1 - up)) + deep * 0.6;\n  if (s === 1 && st !== GLIDE) {\n    // Face up: cap, face, goggles.\n    cap(0, 0.55, 0, 0.9, 0.95, 0, h);\n    cap(0, 1.45, 0, 1.45, 0.75, 1, h);\n    cap(-0.45, 1.2, 0.45, 1.2, 0.28, 3, h);\n  } else cap(0, 0.7, 0, 1.3, 0.95 + 0.15 * up, 0, h);\n  for (let i = 0; i \u003c 2; i++) if (!under(i)) arm(1 - 2 * i, hs[i], deep * 0.6);\n  return sc;\n}\n\n// Screen position of a body point.\nconst sxy = (S, sc, u, v) => [S.x - S.d * u * SZ * (1.3 - 0.3 * sc), S.y - S.d * (v - VC) * sc * SZ];\n\n// White water: n flecks round a point. Kinds: foam, spray, kick.\nfunction foam(P, [x, y], n, spread, life, size, kind, vel) {\n  for (let i = 0, a, r, l; i \u003c n; i++) (a = rnd() * 2 * PI), (r = spread * sqrt(rnd())), (l = life * (0.6 + 0.6 * rnd())), P.fo.push([x + cos(a) * r, y + sin(a) * r, cos(a) * vel * rnd(), sin(a) * vel * rnd(), l, l, size * (0.7 + 0.6 * rnd()), kind]);\n}\nconst ring = (P, S, [x, y], amp) => P.ri.push([x, y, 0, amp, S.k, rnd() * 7]);\nconst fade = (r, amp) => amp * max(0, 1 - r / 10);\n\nfunction newSwimmer(P, i, fresh) {\n  const k = ORDER[i % 5], d = rnd() \u003c 0.5 ? 1 : -1;\n  const S = { k, d, x: LANE(k) + rnd() - 0.5, o: (rnd() - 0.5) * 1.2, f: 0.8 + rnd() * 0.36, ph: rnd(), kp: rnd() * 7, st: SWIM, t: 0, tt: 1, z: 0, v: 0, ring: rnd() * 0.12, cap: CAPS[P.caps[i % 10]], skin: SKIN[floor(rnd() * 5)], suit: SUIT[floor(rnd() * 6)], sb: rnd() \u003c 0.5 };\n  // At the start they are spread along their lanes; later ones push off a wall.\n  if (fresh) S.y = Y0 + 16 + fr(0.29 * floor(i / 5) + rnd() * 0.85) * (Y1 - Y0 - 32);\n  else Object.assign(S, { y: (d > 0 ? Y0 - 0.5 : Y1 + 0.5) + d * 5.6 * SZ, st: GLIDE, z: 0.85 });\n  return S;\n}\n\nfunction stepSwimmer(P, S, d, s) {\n  const [pace0, hz, wamp, kf] = STROKE[s], pace = pace0 * S.f, wall = S.d > 0 ? Y1 + 0.5 : Y0 - 0.5;\n  const head = () => sxy(S, 1, 0, 0.6), feet = () => sxy(S, 1, 0, 9.8);\n  S.t += d;\n  S.x += cl(LANE(S.k) + (P.cnt[S.k] > 1 ? -S.d * 2.4 : S.o) - S.x, -4 * d, 4 * d);\n  S.kp += d * (s \u003c 2 ? 17 : 6);\n  let v = 0;\n  if (S.st === SWIM) {\n    const p0 = S.ph, ph = (S.ph += hz * (0.55 + 0.45 * S.f) * d), crossed = (at) => floor(p0 - at) !== floor(ph - at);\n    // Breaststroke and butterfly surge after each kick.\n    v = pace * (s === 2 ? 0.6 + 1.82 * exp(-4.5 * fr(ph - 0.6)) : s === 3 ? 0.7 + exp(-3 * fr(2 * ph - 0.1)) : 1 + 0.06 * sin(ph * 4 * PI));\n    // Keep behind a slower swimmer going the same way.\n    for (const O of P.sw) if (O.k === S.k && O.d === S.d && !O.st && (O.y - S.y) * S.d > 0 && (O.y - S.y) * S.d \u003c 13) v = min(v, O.v);\n    // Splash where a hand goes in; butterfly throws spray.\n    for (const sg of [1, -1]) {\n      const at = [sg > 0 ? 0 : 0.5, sg > 0 ? 0.5 : 0, -1, 0.8][s];\n      if (at >= 0 && crossed(at)) {\n        const h = hand(s, sg, at + 0.001), xy = sxy(S, 1, h[0], h[1]);\n        foam(P, xy, s === 3 ? 6 : 3, s === 3 ? 1.6 : 0.8, 0.6, s === 3 ? 0.85 : 0.75, 0, s === 3 ? 5 : 2);\n        if (s === 3) foam(P, xy, 4, 0.5, 0.35, 0.8, 1, 9);\n      }\n    }\n    if (kf && rnd() \u003c kf * d * 1.5) {\n      const [x, y] = feet();\n      foam(P, [x + (rnd() - 0.5) * 2.2, y + S.d * rnd() * 1.5], 1, 0.4, 0.5, 0.75, 2, 0);\n    }\n    if ((s === 2 && crossed(0.6)) || (s === 3 && (crossed(0.08) || crossed(0.58)))) foam(P, feet(), 5, 2, 0.7, 0.85, 0, 3);\n    // Each stroke sends out a pulse, so the arms of the V come in dashes.\n    if ((S.ring -= d) \u003c= 0) (S.ring = 0.2), ring(P, S, head(), wamp * (0.35 + 1.3 * (s \u003c 2 ? cos(2 * PI * ph) ** 2 : sm(1 - abs(fr(ph) - (s === 2 ? 0.45 : 0.78)) / 0.22))));\n    // At the wall: a flip turn, or a two-hand touch for breaststroke and butterfly.\n    if ((wall - S.y) * S.d - HV \u003c (s > 1 ? 1.2 : 2.3)) Object.assign(S, { st: TURN, t: 0, y0: S.y, w: wall, yb: wall - S.d * 3 * SZ, open: s > 1, tt: s > 1 ? 1.15 : 0.9, flip: 0 });\n    else S.y += S.d * v * d;\n  } else if (S.st === TURN) {\n    const t = S.t / S.tt;\n    if (t >= 0.5 && !S.flip) {\n      S.flip = true;\n      S.d = -S.d;\n      const xy = sxy(S, 0.45, 0, VC + 3);\n      foam(P, xy, S.open ? 5 : 9, 2.4, 0.9, 0.95, 0, 4);\n      if (!S.open) foam(P, xy, 5, 1, 0.35, 0.8, 1, 8);\n      ring(P, S, xy, 1.1);\n    }\n    S.y = t \u003c 0.5 ? mix(S.y0, S.yb, sm(t * 2)) : mix(S.yb, S.w + S.d * 5.6 * SZ, sm(t * 2 - 1));\n    if (t >= 1) Object.assign(S, { st: GLIDE, t: 0, z: 0.85 });\n  } else {\n    // Underwater off the wall, rising as it slows, then a breakout.\n    const t = S.t / 1.05;\n    v = pace * (1.75 - 0.85 * t);\n    S.z = 0.85 - 0.75 * sm(t);\n    S.y += S.d * v * d;\n    if ((S.ring -= d) \u003c= 0) (S.ring = 0.2), ring(P, S, head(), 0.45 * (1 - S.z));\n    if (t >= 1) {\n      foam(P, head(), s === 3 ? 7 : 5, 1.8, 0.7, 0.85, 0, 3);\n      ring(P, S, head(), 0.9);\n      Object.assign(S, { st: SWIM, t: 0, z: 0, ph: s === 2 ? 0.1 : 0 });\n    }\n  }\n  S.v = v;\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), blk: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), SB: F(N), SS: F(N), FL: F(N), SF: F(N), acc: F(W) });\n  Object.assign(P, { CS: F(7 * W), CC: F(7 * W), RS: F(7 * H), RC: F(7 * H), ky: F(7), chop: -1, rock: F(4 * H), sun: 9, t: 0, sw: [], fo: [], ri: [], cnt: [0, 0, 0, 0, 0] });\n  // Five long swells make the caustic net; two short ripples are the swimmers' chop.\n  P.wv = Array.from({ length: 7 }, (_, i) => {\n    const l = i \u003c 5 ? 9 + rnd() * 6 : 5 + rnd() * 1.5;\n    return [(i * PI) / 5 + (rnd() - 0.5) * 0.4 + (i > 4) * 0.3, l, ((i \u003c 5 ? 1.6 + rnd() * 1.4 : 3 + rnd()) * 2 * PI) / l, rnd() * 7];\n  });\n  // Bright caps first.\n  P.caps = [0, 1, 5, 4, 6, 7].sort(() => rnd() - 0.5).concat([2, 9, 8, 3]);\n  build(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], { rock } = P;\n  const s = (P.s = cl(round(k[0]), 0, 3)), sun = cl(k[3], -1, 1), n = round(cl(k[2], 4, 15)), d = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  if (abs(sun - P.sun) > 0.002) (P.sun = sun), paint(P, sun);\n  // Butterfly and breaststroke churn the pool; more swimmers churn it more.\n  const chop = STROKE[s][4] * (0.7 + (0.3 * (n - 4)) / 11), fresh = !P.t;\n  P.chop = fresh ? chop : P.chop + (chop - P.chop) * min(1, d * 1.5);\n  while (P.sw.length \u003c n) P.sw.push(newSwimmer(P, P.sw.length, fresh));\n  P.sw.length = n;\n  P.cnt.fill(0);\n  for (const S of P.sw) P.cnt[S.k]++;\n  P.t += d;\n  for (const S of P.sw) stepSwimmer(P, S, d, s);\n  // Wakes spread at 3 rows a second, slower than the swimmers, so their rings\n  // pile up into a V. Where one meets a rope, the floats rock.\n  for (let i = 0; i \u003c 4 * H; i++) rock[i] *= exp(-1.8 * d);\n  P.ri = P.ri.filter((R) => {\n    const r = (R[2] += 3 * d), f = fade(r, R[3]);\n    for (const j of [R[4] - 1, R[4]]) {\n      const dx = abs(ROPE(j) - R[0]), dy = sqrt(r * r - dx * dx);\n      if (j >= 0 && j \u003c 4 && r > dx) for (const y of [round(R[1] - dy), round(R[1] + dy)]) if (y >= 0 && y \u003c H) rock[j * H + y] = max(rock[j * H + y], f);\n    }\n    return r \u003c 10;\n  });\n  const dk = exp(-4 * d);\n  P.fo = P.fo.filter((f) => ((f[0] += f[2] * d), (f[1] += f[3] * d), (f[2] *= dk), (f[3] *= dk), (f[4] -= d) > 0));\n}\n\nlet BUF;\nfunction blend(p, r, g, b, a) {\n  const o = p * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nfunction splat(B, x, y, v) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi, p = yi * W + xi;\n  if (xi \u003c 2 || xi > 60 || yi \u003c Y0 || yi >= Y1) return;\n  B[p] += v * (1 - fx) * (1 - fy);\n  B[p + 1] += v * fx * (1 - fy);\n  B[p + W] += v * (1 - fx) * fy;\n  B[p + W + 1] += v * fx * fy;\n}\n\n// One capsule on screen: into the colour buffer, or as a soft shadow into SS.\nfunction stamp(P, x0, y0, x1, y1, r, col, sub, shadow) {\n  const dx = x1 - x0, dy = y1 - y0, ll = dx * dx + dy * dy || 1e-6, e = shadow ? r + 1.4 : r + 0.6, { lc, amb, SS } = P, op = 1 - 0.3 * sub;\n  const c = [0, 1, 2].map((i, v) => ((v = col[i] * (lc[i] * 0.86 + amb[i] * 0.45)), mix(v, v * TW[i] * 1.15 + SC[i], sub)));\n  for (let y = max(0, floor(min(y0, y1) - e)), yb = min(H - 1, ceil(max(y0, y1) + e)); y \u003c= yb; y++)\n    for (let x = max(2, floor(min(x0, x1) - e)), xb = min(61, ceil(max(x0, x1) + e)); x \u003c= xb; x++) {\n      const px = x - x0, py = y - y0, t = cl((px * dx + py * dy) / ll, 0, 1), dd = hyp(px - t * dx, py - t * dy), p = y * W + x;\n      if (shadow) SS[p] = max(SS[p], cl((r + 1 - dd) / 1.8, 0, 1) * 0.85);\n      else if (r + 0.5 > dd) blend(p, c[0], c[1], c[2], min(1, r + 0.5 - dd) * op);\n    }\n}\n\nfunction swimmers(P, shadow) {\n  for (const S of P.sw) {\n    const sc = pose(S, P.s), cols = [S.cap, S.skin, S.suit, [20, 40, 90]], off = shadow ? 1 - 0.6 * S.z : 0;\n    // White water pushed up round the head and shoulders.\n    if (shadow && S.z \u003c 0.5)\n      for (let i = 0; i \u003c= 10; i++) {\n        const a = (i - 5) * 0.38, [x, y] = sxy(S, sc, sin(a) * 2.6, 1.6 - cos(a) * 2.4);\n        splat(P.SF, x, y, (0.9 - 0.08 * abs(i - 5)) * (1 - 2 * S.z) * (S.st === TURN ? 1.6 : 1));\n      }\n    for (let i = 0, o = 0; i \u003c nc; i++, o += 8) {\n      const [x0, y0] = sxy(S, sc, CP[o], CP[o + 1]), [x1, y1] = sxy(S, sc, CP[o + 2], CP[o + 3]);\n      stamp(P, x0 + P.sx * off, y0 + P.sy * off, x1 + P.sx * off, y1 + P.sy * off, CP[o + 4] * SZ, cols[CP[o + 5]], CP[o + 6], shadow);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, alb, mat, bg, SB, SS, FL, SF, CS, CC, RS, RC, lc, amb, str, acc, sx, sy, glint } = P;\n  BUF = buf;\n  for (const B of [SS, FL, SF]) B.fill(0);\n  swimmers(P, true);\n  // Wake rings: crest and trough on the surface, focused light on the floor.\n  for (const [cx, cy, r, amp, k, sd] of P.ri) {\n    const f = fade(r, amp), n = f > 0.03 ? max(6, ceil(r * 4.2)) : 0;\n    for (let i = 0; i \u003c n; i++) {\n      const a = (i / n) * 2 * PI, ca = cos(a), sa = sin(a), x = cx + ca * r, y = cy + sa * r, w = f * (abs(x - LANE(k)) > 6.2 ? 0.2 : 1) * (0.6 + 0.4 * sin(a * 3 + sd));\n      splat(SF, x, y, w * 3);\n      splat(SF, x - ca, y - sa, -w * 1.6);\n      splat(FL, x + sx, y + sy, w * 0.9);\n      splat(FL, x + sx - 1.5 * ca, y + sy - 1.5 * sa, -w * 0.6);\n    }\n  }\n  for (let i = 0; i \u003c 7; i++) {\n    const [, , om, ps] = P.wv[i], ky = P.ky[i], a = i \u003c 5 ? 0.21 : 0.3 * P.chop;\n    for (let y = 0, q; y \u003c H; y++) (q = ky * y - om * P.t + ps), (RS[i * H + y] = a * sin(q)), (RC[i * H + y] = a * cos(q));\n  }\n  // The floor: tiles under the caustic net, the shadows, and the wakes' light.\n  const [A0, A1, A2] = amb.map((v, c) => v * TW[c] * 255), [L0, L1, L2] = lc.map((v, c) => v * TW[c] * 255);\n  for (let y = Y0; y \u003c= Y1; y++) {\n    acc.fill(0);\n    for (let i = 0; i \u003c 7; i++) for (let x = 2, rc = RC[i * H + y], rs = RS[i * H + y]; x \u003c 62; x++) acc[x] += CS[i * W + x] * rc + CC[i * W + x] * rs;\n    for (let x = 2, p = y * W + 2; x \u003c 62; x++, p++) {\n      const s = abs(acc[x]) * 7, c = s \u003c 1 ? (1 - s) * (1 - s) : 0, li = max(0, 0.62 + str * c + FL[p]) * (1 - 0.85 * min(1, SB[p] + SS[p])), sf = SF[p], gl = sf > 0.45 ? (sf - 0.45) * glint : 0;\n      const o = p * 3;\n      buf[o] = alb[o] * (A0 + L0 * li) + 2 + sf * 40 + gl;\n      buf[o + 1] = alb[o + 1] * (A1 + L1 * li) + 18 + sf * 62 + gl;\n      buf[o + 2] = alb[o + 2] * (A2 + L2 * li) + 30 + sf * 66 + gl;\n    }\n  }\n  // Deck; water moving in the gutters.\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3)\n    if (mat[p] !== 3) {\n      const q = mat[p] === 1 && alb[o] \u003c 0.5 ? 0.75 + 0.5 * sin(P.t * 3 + (p & 63) * 0.9 + (p >> 6) * 0.7) : 1;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = bg[o + c] * q;\n    }\n  ropes(P);\n  swimmers(P, false);\n  for (const [x, y, , , life, l0, size, kind] of P.fo) {\n    const f = life / l0, r = size * (0.55 + 0.45 * f), a = [0.8, 0.95, 0.6][kind] * pow(f, 0.7);\n    for (let yy = max(Y0 - 1, floor(y - r)); yy \u003c= min(Y1 + 1, y + r); yy++)\n      for (let xx = max(2, floor(x - r)); xx \u003c= min(61, x + r); xx++) {\n        const q = cl(r + 0.5 - hyp(xx - x, yy - y), 0, 1) * a;\n        if (q > 0.02) blend(yy * W + xx, 236 * lc[0] + 20, 244 * lc[1] + 10, 248 * lc[2] + 6, q);\n      }\n  }\n  flags(P);\n  for (let y = 0, o = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n}\n\n// Lane ropes: red floats 5 m from each end, blue and white between; a wake rocks them.\nconst FLOAT = [[222, 38, 40], [236, 236, 232], [28, 72, 206]];\nfunction ropes({ rock, t, lc, amb }) {\n  const k3 = lc.map((v, c) => v * 0.9 + amb[c] * 0.4);\n  for (let j = 0; j \u003c 4; j++)\n    for (let i = 0; i \u003c 56; i++) {\n      const y = Y0 + 2 * i, rk = min(1.2, max(rock[j * H + y], rock[j * H + y + 1])), c = FLOAT[i \u003c 11 || i > 44 ? 0 : (i >> 1) & 1 ? 1 : 2], on = rk > 0.12;\n      const sh = on ? round(sin(t * 11 + i * 1.3) * min(1, rk) * 0.9) : 0, hi = on ? floor(t * 7 * rk + i * 0.5) & 3 : 0;\n      for (let q = 0, k; q \u003c 4; q++) (k = (q === hi ? 1.28 : q === 3 - hi ? 0.62 : 0.92) * (1 + 0.15 * rk)), blend((y + (q >> 1)) * W + ROPE(j) - 0.5 + (q & 1) + sh, c[0] * k * k3[0], c[1] * k * k3[1], c[2] * k * k3[2], 1);\n    }\n}\n\n// Backstroke flags strung across between posts on the side decks.\nconst FLAGC = [[228, 40, 44], [240, 240, 236], [30, 80, 220], [250, 206, 30]];\nfunction flags({ lc }) {\n  for (const f of FLAGS) for (let x = 0, c; x \u003c W; x++) (c = x % 3 > 1 ? [70, 70, 74] : FLAGC[floor(x / 3) & 3].map((v, i) => v * lc[i])), blend(f * W + x, ...c, 0.95);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Stroke=0..3, Speed=0.2..3, Swimmers=4..15, Sun=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Stroke","min":0,"max":3,"about":"What everyone swims: freestyle at 0, backstroke at 1, breaststroke at 2 with its frog kick and glide, butterfly at 3 with both arms swung across the lane. Breaststroke and butterfly churn the water and break up the caustic net."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the swimmers and the water go: at 2 a freestyle length takes 10 to 14 s, breaststroke nearer 20."},{"name":"Swimmers","min":4,"max":15,"about":"Four swimmers in four of the five lanes at 4; past five they share lanes and swim in circles, three a lane at 15."},{"name":"Sun","min":-1,"max":1,"about":"Near noon at 0.06, with a bright caustic net and short shadows. Towards -1 the morning sun comes low from the east, towards 1 the evening sun from the west: gold light, a faint stretched net, long shadows across the lanes."}],"start":[0,2,4,0.06],"measures":{"motion":0.3073,"detail":0.1425,"edges":0.4977,"complexity":2.1556,"coverage":0.9906,"colour":0.3817,"drift":0.0257},"knobResponse":[0.044,0.0596,0.0629,0.1105]},{"slug":"lava-lamp","title":"Lava Lamp","family":"sim","round":3,"note":"전구 위 웅덩이에서 데워진 왁스가 목을 늘이며 떨어져 나와 방울로 떠오르고, 위에서 식으면 다시 가라앉아요. 파란 물속에서 식은 왁스는 주황, 뜨거운 왁스는 노랑이에요.","idea":"A tall lava lamp: wax warms in the pool over the bulb, pulls up on a neck, rises as a drop, cools against the glass at the top and sinks back, glowing soft against coloured liquid.","buttons":"K1 tap flares the bulb, and the lowest drop heats through and lets go.","code":"// ===== Patternflow pattern =====\n// Title:   Lava Lamp\n// Family:  sim\n// Idea:    A tall lava lamp: wax warms in the pool over the bulb, pulls up on a neck, rises as a drop, cools against the glass at the top and sinks back, glowing soft against coloured liquid.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Edward Craven Walker's Astro lamp (1963), drawn as metaballs\n// Round:   3\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Heat=0.3..3, Wax=4..10, Stretch=0..1\n//\n// Knob 1: Hue. Turns the liquid and the wax together, starting from blue liquid and wax that runs from orange when cool to yellow when hot.\n// Knob 2: Heat. How hot the bulb runs: the wax barely stirs at the bottom of the range and circulates in a few seconds at the top.\n// Knob 3: Wax. How many drops are loose in the lamp; drops past the count sink into the pool and melt into it.\n// Knob 4: Stretch. At 0 the wax travels as round drops; turned up, moving wax pulls out into teardrops and long necks, and the pool reaches up after it.\n// Buttons: K1 tap flares the bulb, and the lowest drop heats through and lets go.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 10;\n// A drop is wax where its field passes EDGE. The field of an isolated drop\n// reaches EDGE at 0.644 of its kernel radius, so the kernel is 1.55 times the\n// drop's radius.\nconst EDGE = 0.22;\nconst KERNEL = 1.55;\n// The pool's surface row. Drops that reach the top rest under the glass at CAP.\nconst POOL = 114;\nconst CAP = 2;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(MAX);\n  params.y = new Float32Array(MAX);\n  params.vx = new Float32Array(MAX);\n  params.vy = new Float32Array(MAX);\n  params.r = new Float32Array(MAX);\n  params.temp = new Float32Array(MAX);\n  params.size = new Float32Array(MAX);\n  // How slowly each drop gives up its heat to the liquid on the way, in seconds.\n  params.hold = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) {\n    params.r[i] = 7 + Math.random() * 7;\n    params.hold[i] = 9 + Math.random() * 20;\n    params.x[i] = 10 + Math.random() * (W - 20);\n    params.y[i] = 20 + Math.random() * 90;\n    params.temp[i] = Math.random();\n    params.size[i] = i \u003c 4 ? 1 : 0;\n  }\n  params.surfB = new Float32Array(W);\n  params.liquid = new Float32Array(H * 3);\n  params.side = new Float32Array(W);\n  params.lut = new Float32Array(65 * 3);\n  params.t = 0;\n  params.flare = 0;\n  params.started = false;\n  params.heat = 2;\n  params.stretch = 0;\n  params.count = 4;\n}\n\nfunction step(params, dt) {\n  const heat = params.heat;\n  const stretch = params.stretch;\n  const t = (params.t += dt);\n  params.flare = Math.max(0, params.flare - dt * 0.6);\n  // Rising wax is faster the hotter the lamp runs, never quick.\n  const V = 11 * Math.pow(heat, 0.7);\n  const relax = Math.min(1, dt / 0.6);\n  const n = params.count;\n  for (let i = 0; i \u003c MAX; i++) {\n    // Drops past the count shrink away into the pool; new ones grow out of it.\n    const target = i \u003c n ? 1 : 0;\n    const s = params.size[i];\n    params.size[i] = s + (target - s) * Math.min(1, dt * 0.5);\n    if (s \u003c 0.02 && target === 0) {\n      params.size[i] = 0;\n      params.y[i] = H + 4;\n      continue;\n    }\n    if (s \u003c 0.05 && target === 1 && params.y[i] \u003c POOL) {\n      // A drop that comes back starts warm in the pool.\n      params.y[i] = H - 4;\n      params.temp[i] = 0.5;\n    }\n    const r = params.r[i] * (0.4 + 0.6 * s);\n    const y = params.y[i];\n    let T = params.temp[i];\n    // Only the bulb heats, through the pool; the liquid is cooler than melted wax\n    // all the way up, and coolest under the glass at the top.\n    const bottom = smooth(POOL - 8, POOL + 6, y + r * 0.6);\n    const top = smooth(CAP + 24, CAP + 4, y - r * 0.6);\n    const ambient = 0.2 + 0.15 * (y / H);\n    T += dt * heat * (bottom * (1.05 - T) * (0.6 + params.flare * 2) - top * (T + 0.05) * 0.35);\n    T -= (dt * (T - ambient)) / params.hold[i];\n    params.temp[i] = Math.max(0, Math.min(1, T));\n\n    // Bigger drops push harder; a drop's speed follows its warmth.\n    const vyTarget = -Math.tanh((params.temp[i] - 0.5) * 4) * V * (0.6 + r / 22);\n    params.vy[i] += (vyTarget - params.vy[i]) * relax;\n    const rising = params.vy[i] \u003c 0;\n    const wander = (noise1(t * 0.12 + i * 7.3, i) - 0.5) * 6;\n    // Warm wax drifts in over the bulb, cool wax slides out along the glass.\n    const lane = rising ? (W / 2 - params.x[i]) * 0.05 : (params.x[i] \u003c W / 2 ? -1 : 1) * 1.2;\n    let push = 0;\n    for (let j = 0; j \u003c MAX; j++) {\n      if (j === i || params.size[j] \u003c 0.05) continue;\n      const dx = params.x[i] - params.x[j];\n      const dy = params.y[i] - params.y[j];\n      const reach = (params.r[i] + params.r[j]) * 0.65;\n      const d2 = dx * dx + dy * dy;\n      if (d2 \u003c reach * reach && d2 > 1e-4) push += (dx / Math.sqrt(d2)) * (1 - Math.sqrt(d2) / reach) * 3;\n    }\n    params.vx[i] += (wander + lane + push - params.vx[i]) * relax;\n    params.x[i] += params.vx[i] * dt;\n    params.y[i] += params.vy[i] * dt;\n    const m = r * 0.7;\n    if (params.x[i] \u003c m) {\n      params.x[i] = m;\n      params.vx[i] = Math.abs(params.vx[i]) * 0.3;\n    } else if (params.x[i] > W - m) {\n      params.x[i] = W - m;\n      params.vx[i] = -Math.abs(params.vx[i]) * 0.3;\n    }\n    // Wax that reaches the top rests against the glass until it cools; wax in the pool sinks half into it.\n    const ceiling = CAP + r * 0.45;\n    const floor = POOL + r * 0.55;\n    if (params.y[i] \u003c ceiling) {\n      params.y[i] = ceiling;\n      params.vy[i] = Math.max(0, params.vy[i]);\n    } else if (params.y[i] > floor) {\n      params.y[i] = floor;\n      params.vy[i] = Math.min(0, params.vy[i]);\n    }\n  }\n  // The pool breathes slowly.\n  for (let x = 0; x \u003c W; x++)\n    params.surfB[x] = POOL + 2.2 * Math.sin(x * 0.11 + t * 0.35) + 1.4 * Math.sin(x * 0.27 - t * 0.6 + 1) - stretch * 2;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.heat = Math.max(0.1, k[1]);\n  params.count = Math.max(1, Math.min(MAX, Math.round(k[2])));\n  params.stretch = Math.max(0, Math.min(1, k[3]));\n  if (!params.started) {\n    params.started = true;\n    for (let i = 0; i \u003c MAX; i++) params.size[i] = i \u003c params.count ? 1 : 0;\n    // A lamp that has been on for a while: the wax is already moving.\n    for (let i = 0; i \u003c 600; i++) step(params, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.flare = 1;\n    let best = -1;\n    for (let i = 0; i \u003c params.count; i++) if (best \u003c 0 || params.y[i] > params.y[best]) best = i;\n    if (best >= 0) {\n      params.temp[best] = 1;\n      params.vy[best] = -12;\n    }\n  }\n  step(params, dt);\n}\n\nexport function draw(display, params, time) {\n  const hue = params.hue;\n  const stretch = params.stretch;\n  const flare = params.flare;\n  const liquid = params.liquid;\n  const lut = params.lut;\n  const side = params.side;\n  // The liquid glows brightest just over the bulb, bluer there and more violet at the top.\n  // Yellow liquid is lit brighter and paler, since dim yellow reads as olive.\n  for (let y = 0; y \u003c H; y++) {\n    const d = y / (H - 1);\n    const lh = hue + 0.74 - 0.1 * d;\n    const warm = Math.pow(0.5 + 0.5 * Math.cos(2 * Math.PI * (lh - 0.14)), 3);\n    const v = (0.5 + 0.38 * Math.pow(d, 1.6)) * (1 + 0.45 * warm) + flare * 0.12 * d;\n    hsvInto(liquid, y * 3, lh, 0.9 - 0.2 * warm, Math.min(1, v));\n  }\n  // The glass is round, so the liquid dims a little towards its sides.\n  for (let x = 0; x \u003c W; x++) {\n    const u = (x - (W - 1) / 2) / (W / 2);\n    side[x] = 1 - 0.16 * u * u;\n  }\n  // Wax colour by warmth: orange when cool, yellow when hot. It stays bright, since dim orange reads as brown.\n  for (let i = 0; i \u003c= 64; i++) {\n    const T = i / 64;\n    hsvInto(lut, i * 3, hue + 0.055 + 0.08 * T, 0.95 - 0.25 * T * T, 1);\n  }\n\n  const n = MAX;\n  const bx = params.x;\n  const by = params.y;\n  const vy = params.vy;\n  const temp = params.temp;\n  // Each drop's kernel, drawn out into a teardrop along the way it moves and\n  // flattened on top where it rests against the glass.\n  const R = new Float32Array(n);\n  const lead = new Float32Array(n);\n  const tail = new Float32Array(n);\n  const wide = new Float32Array(n);\n  const up = new Int8Array(n);\n  for (let i = 0; i \u003c n; i++) {\n    const s = params.size[i];\n    if (s \u003c 0.02) {\n      R[i] = 0;\n      continue;\n    }\n    const r = params.r[i] * (0.4 + 0.6 * s) * (0.94 + 0.12 * temp[i]);\n    R[i] = r * KERNEL;\n    const speed = Math.min(1, Math.abs(vy[i]) / 14);\n    const rest = smooth(CAP + r * 0.45 + 5, CAP + r * 0.45, by[i]);\n    lead[i] = (1 + 0.15 * speed) * (1 - 0.3 * rest);\n    tail[i] = 1 + 0.4 * speed + stretch * (0.4 + 1.4 * speed);\n    wide[i] = (1 + 0.2 * rest) / Math.sqrt((lead[i] + tail[i]) / 2);\n    up[i] = vy[i] \u003c 0 || rest > 0.5 ? 1 : 0;\n  }\n  const reach = 3.5 + 8 * stretch;\n  const surfB = params.surfB;\n\n  for (let y = 0; y \u003c H; y++) {\n    const lr = liquid[y * 3];\n    const lg = liquid[y * 3 + 1];\n    const lb = liquid[y * 3 + 2];\n    for (let x = 0; x \u003c W; x++) {\n      // The pool is a wall of wax whose field fades over a few LEDs above it,\n      // so a drop leaving it pulls up a neck.\n      const fb = EDGE * Math.exp(Math.min(3, (y - surfB[x]) / reach));\n      let F = fb;\n      let FT = fb;\n      for (let i = 0; i \u003c n; i++) {\n        const Ri = R[i];\n        if (Ri === 0) continue;\n        const dx = (x - bx[i]) / wide[i];\n        if (dx > Ri || dx \u003c -Ri) continue;\n        let dy = y - by[i];\n        // Rising wax trails below; sinking wax trails above.\n        dy /= (dy > 0) === (up[i] === 1) ? tail[i] : lead[i];\n        if (dy > Ri || dy \u003c -Ri) continue;\n        const u = (dx * dx + dy * dy) / (Ri * Ri);\n        if (u >= 1) continue;\n        const f = (1 - u) * (1 - u) * (1 - u);\n        F += f;\n        FT += f * temp[i];\n      }\n      // A ramp of a few LEDs around EDGE: the wax shades into the liquid instead of cutting it.\n      const m = smooth(EDGE - 0.1, EDGE + 0.14, F);\n      const T = F > 1e-6 ? Math.min(1, FT / F) : 0;\n      const li = Math.round(T * 64) * 3;\n      // Deep wax glows brighter than its rim.\n      const core = 0.88 + 0.12 * smooth(EDGE, EDGE + 0.8, F);\n      // Liquid close to wax catches its glow.\n      const glow = side[x] * (1 + 0.3 * smooth(0, EDGE, F)) * (1 - m);\n      const r = lr * glow + lut[li] * core * m;\n      const g = lg * glow + lut[li + 1] * core * m;\n      const b = lb * glow + lut[li + 2] * core * m;\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n}\n","layer":{"id":"layer-lava-lamp","type":"code","name":"lava-lamp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lava Lamp\n// Family:  sim\n// Idea:    A tall lava lamp: wax warms in the pool over the bulb, pulls up on a neck, rises as a drop, cools against the glass at the top and sinks back, glowing soft against coloured liquid.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Edward Craven Walker's Astro lamp (1963), drawn as metaballs\n// Round:   3\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Heat=0.3..3, Wax=4..10, Stretch=0..1\n//\n// Knob 1: Hue. Turns the liquid and the wax together, starting from blue liquid and wax that runs from orange when cool to yellow when hot.\n// Knob 2: Heat. How hot the bulb runs: the wax barely stirs at the bottom of the range and circulates in a few seconds at the top.\n// Knob 3: Wax. How many drops are loose in the lamp; drops past the count sink into the pool and melt into it.\n// Knob 4: Stretch. At 0 the wax travels as round drops; turned up, moving wax pulls out into teardrops and long necks, and the pool reaches up after it.\n// Buttons: K1 tap flares the bulb, and the lowest drop heats through and lets go.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 10;\n// A drop is wax where its field passes EDGE. The field of an isolated drop\n// reaches EDGE at 0.644 of its kernel radius, so the kernel is 1.55 times the\n// drop's radius.\nconst EDGE = 0.22;\nconst KERNEL = 1.55;\n// The pool's surface row. Drops that reach the top rest under the glass at CAP.\nconst POOL = 114;\nconst CAP = 2;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(MAX);\n  params.y = new Float32Array(MAX);\n  params.vx = new Float32Array(MAX);\n  params.vy = new Float32Array(MAX);\n  params.r = new Float32Array(MAX);\n  params.temp = new Float32Array(MAX);\n  params.size = new Float32Array(MAX);\n  // How slowly each drop gives up its heat to the liquid on the way, in seconds.\n  params.hold = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) {\n    params.r[i] = 7 + Math.random() * 7;\n    params.hold[i] = 9 + Math.random() * 20;\n    params.x[i] = 10 + Math.random() * (W - 20);\n    params.y[i] = 20 + Math.random() * 90;\n    params.temp[i] = Math.random();\n    params.size[i] = i \u003c 4 ? 1 : 0;\n  }\n  params.surfB = new Float32Array(W);\n  params.liquid = new Float32Array(H * 3);\n  params.side = new Float32Array(W);\n  params.lut = new Float32Array(65 * 3);\n  params.t = 0;\n  params.flare = 0;\n  params.started = false;\n  params.heat = 2;\n  params.stretch = 0;\n  params.count = 4;\n}\n\nfunction step(params, dt) {\n  const heat = params.heat;\n  const stretch = params.stretch;\n  const t = (params.t += dt);\n  params.flare = Math.max(0, params.flare - dt * 0.6);\n  // Rising wax is faster the hotter the lamp runs, never quick.\n  const V = 11 * Math.pow(heat, 0.7);\n  const relax = Math.min(1, dt / 0.6);\n  const n = params.count;\n  for (let i = 0; i \u003c MAX; i++) {\n    // Drops past the count shrink away into the pool; new ones grow out of it.\n    const target = i \u003c n ? 1 : 0;\n    const s = params.size[i];\n    params.size[i] = s + (target - s) * Math.min(1, dt * 0.5);\n    if (s \u003c 0.02 && target === 0) {\n      params.size[i] = 0;\n      params.y[i] = H + 4;\n      continue;\n    }\n    if (s \u003c 0.05 && target === 1 && params.y[i] \u003c POOL) {\n      // A drop that comes back starts warm in the pool.\n      params.y[i] = H - 4;\n      params.temp[i] = 0.5;\n    }\n    const r = params.r[i] * (0.4 + 0.6 * s);\n    const y = params.y[i];\n    let T = params.temp[i];\n    // Only the bulb heats, through the pool; the liquid is cooler than melted wax\n    // all the way up, and coolest under the glass at the top.\n    const bottom = smooth(POOL - 8, POOL + 6, y + r * 0.6);\n    const top = smooth(CAP + 24, CAP + 4, y - r * 0.6);\n    const ambient = 0.2 + 0.15 * (y / H);\n    T += dt * heat * (bottom * (1.05 - T) * (0.6 + params.flare * 2) - top * (T + 0.05) * 0.35);\n    T -= (dt * (T - ambient)) / params.hold[i];\n    params.temp[i] = Math.max(0, Math.min(1, T));\n\n    // Bigger drops push harder; a drop's speed follows its warmth.\n    const vyTarget = -Math.tanh((params.temp[i] - 0.5) * 4) * V * (0.6 + r / 22);\n    params.vy[i] += (vyTarget - params.vy[i]) * relax;\n    const rising = params.vy[i] \u003c 0;\n    const wander = (noise1(t * 0.12 + i * 7.3, i) - 0.5) * 6;\n    // Warm wax drifts in over the bulb, cool wax slides out along the glass.\n    const lane = rising ? (W / 2 - params.x[i]) * 0.05 : (params.x[i] \u003c W / 2 ? -1 : 1) * 1.2;\n    let push = 0;\n    for (let j = 0; j \u003c MAX; j++) {\n      if (j === i || params.size[j] \u003c 0.05) continue;\n      const dx = params.x[i] - params.x[j];\n      const dy = params.y[i] - params.y[j];\n      const reach = (params.r[i] + params.r[j]) * 0.65;\n      const d2 = dx * dx + dy * dy;\n      if (d2 \u003c reach * reach && d2 > 1e-4) push += (dx / Math.sqrt(d2)) * (1 - Math.sqrt(d2) / reach) * 3;\n    }\n    params.vx[i] += (wander + lane + push - params.vx[i]) * relax;\n    params.x[i] += params.vx[i] * dt;\n    params.y[i] += params.vy[i] * dt;\n    const m = r * 0.7;\n    if (params.x[i] \u003c m) {\n      params.x[i] = m;\n      params.vx[i] = Math.abs(params.vx[i]) * 0.3;\n    } else if (params.x[i] > W - m) {\n      params.x[i] = W - m;\n      params.vx[i] = -Math.abs(params.vx[i]) * 0.3;\n    }\n    // Wax that reaches the top rests against the glass until it cools; wax in the pool sinks half into it.\n    const ceiling = CAP + r * 0.45;\n    const floor = POOL + r * 0.55;\n    if (params.y[i] \u003c ceiling) {\n      params.y[i] = ceiling;\n      params.vy[i] = Math.max(0, params.vy[i]);\n    } else if (params.y[i] > floor) {\n      params.y[i] = floor;\n      params.vy[i] = Math.min(0, params.vy[i]);\n    }\n  }\n  // The pool breathes slowly.\n  for (let x = 0; x \u003c W; x++)\n    params.surfB[x] = POOL + 2.2 * Math.sin(x * 0.11 + t * 0.35) + 1.4 * Math.sin(x * 0.27 - t * 0.6 + 1) - stretch * 2;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.heat = Math.max(0.1, k[1]);\n  params.count = Math.max(1, Math.min(MAX, Math.round(k[2])));\n  params.stretch = Math.max(0, Math.min(1, k[3]));\n  if (!params.started) {\n    params.started = true;\n    for (let i = 0; i \u003c MAX; i++) params.size[i] = i \u003c params.count ? 1 : 0;\n    // A lamp that has been on for a while: the wax is already moving.\n    for (let i = 0; i \u003c 600; i++) step(params, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.flare = 1;\n    let best = -1;\n    for (let i = 0; i \u003c params.count; i++) if (best \u003c 0 || params.y[i] > params.y[best]) best = i;\n    if (best >= 0) {\n      params.temp[best] = 1;\n      params.vy[best] = -12;\n    }\n  }\n  step(params, dt);\n}\n\nexport function draw(display, params, time) {\n  const hue = params.hue;\n  const stretch = params.stretch;\n  const flare = params.flare;\n  const liquid = params.liquid;\n  const lut = params.lut;\n  const side = params.side;\n  // The liquid glows brightest just over the bulb, bluer there and more violet at the top.\n  // Yellow liquid is lit brighter and paler, since dim yellow reads as olive.\n  for (let y = 0; y \u003c H; y++) {\n    const d = y / (H - 1);\n    const lh = hue + 0.74 - 0.1 * d;\n    const warm = Math.pow(0.5 + 0.5 * Math.cos(2 * Math.PI * (lh - 0.14)), 3);\n    const v = (0.5 + 0.38 * Math.pow(d, 1.6)) * (1 + 0.45 * warm) + flare * 0.12 * d;\n    hsvInto(liquid, y * 3, lh, 0.9 - 0.2 * warm, Math.min(1, v));\n  }\n  // The glass is round, so the liquid dims a little towards its sides.\n  for (let x = 0; x \u003c W; x++) {\n    const u = (x - (W - 1) / 2) / (W / 2);\n    side[x] = 1 - 0.16 * u * u;\n  }\n  // Wax colour by warmth: orange when cool, yellow when hot. It stays bright, since dim orange reads as brown.\n  for (let i = 0; i \u003c= 64; i++) {\n    const T = i / 64;\n    hsvInto(lut, i * 3, hue + 0.055 + 0.08 * T, 0.95 - 0.25 * T * T, 1);\n  }\n\n  const n = MAX;\n  const bx = params.x;\n  const by = params.y;\n  const vy = params.vy;\n  const temp = params.temp;\n  // Each drop's kernel, drawn out into a teardrop along the way it moves and\n  // flattened on top where it rests against the glass.\n  const R = new Float32Array(n);\n  const lead = new Float32Array(n);\n  const tail = new Float32Array(n);\n  const wide = new Float32Array(n);\n  const up = new Int8Array(n);\n  for (let i = 0; i \u003c n; i++) {\n    const s = params.size[i];\n    if (s \u003c 0.02) {\n      R[i] = 0;\n      continue;\n    }\n    const r = params.r[i] * (0.4 + 0.6 * s) * (0.94 + 0.12 * temp[i]);\n    R[i] = r * KERNEL;\n    const speed = Math.min(1, Math.abs(vy[i]) / 14);\n    const rest = smooth(CAP + r * 0.45 + 5, CAP + r * 0.45, by[i]);\n    lead[i] = (1 + 0.15 * speed) * (1 - 0.3 * rest);\n    tail[i] = 1 + 0.4 * speed + stretch * (0.4 + 1.4 * speed);\n    wide[i] = (1 + 0.2 * rest) / Math.sqrt((lead[i] + tail[i]) / 2);\n    up[i] = vy[i] \u003c 0 || rest > 0.5 ? 1 : 0;\n  }\n  const reach = 3.5 + 8 * stretch;\n  const surfB = params.surfB;\n\n  for (let y = 0; y \u003c H; y++) {\n    const lr = liquid[y * 3];\n    const lg = liquid[y * 3 + 1];\n    const lb = liquid[y * 3 + 2];\n    for (let x = 0; x \u003c W; x++) {\n      // The pool is a wall of wax whose field fades over a few LEDs above it,\n      // so a drop leaving it pulls up a neck.\n      const fb = EDGE * Math.exp(Math.min(3, (y - surfB[x]) / reach));\n      let F = fb;\n      let FT = fb;\n      for (let i = 0; i \u003c n; i++) {\n        const Ri = R[i];\n        if (Ri === 0) continue;\n        const dx = (x - bx[i]) / wide[i];\n        if (dx > Ri || dx \u003c -Ri) continue;\n        let dy = y - by[i];\n        // Rising wax trails below; sinking wax trails above.\n        dy /= (dy > 0) === (up[i] === 1) ? tail[i] : lead[i];\n        if (dy > Ri || dy \u003c -Ri) continue;\n        const u = (dx * dx + dy * dy) / (Ri * Ri);\n        if (u >= 1) continue;\n        const f = (1 - u) * (1 - u) * (1 - u);\n        F += f;\n        FT += f * temp[i];\n      }\n      // A ramp of a few LEDs around EDGE: the wax shades into the liquid instead of cutting it.\n      const m = smooth(EDGE - 0.1, EDGE + 0.14, F);\n      const T = F > 1e-6 ? Math.min(1, FT / F) : 0;\n      const li = Math.round(T * 64) * 3;\n      // Deep wax glows brighter than its rim.\n      const core = 0.88 + 0.12 * smooth(EDGE, EDGE + 0.8, F);\n      // Liquid close to wax catches its glow.\n      const glow = side[x] * (1 + 0.3 * smooth(0, EDGE, F)) * (1 - m);\n      const r = lr * glow + lut[li] * core * m;\n      const g = lg * glow + lut[li + 1] * core * m;\n      const b = lb * glow + lut[li + 2] * core * m;\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Heat=0.3..3, Wax=4..10, Stretch=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the liquid and the wax together, starting from blue liquid and wax that runs from orange when cool to yellow when hot."},{"name":"Heat","min":0.3,"max":3,"about":"How hot the bulb runs: the wax barely stirs at the bottom of the range and circulates in a few seconds at the top."},{"name":"Wax","min":4,"max":10,"about":"How many drops are loose in the lamp; drops past the count sink into the pool and melt into it."},{"name":"Stretch","min":0,"max":1,"about":"At 0 the wax travels as round drops; turned up, moving wax pulls out into teardrops and long necks, and the pool reaches up after it."}],"start":[0,2,4,0.06],"measures":{"motion":0.1138,"detail":0.0147,"edges":0.1844,"complexity":1.5488,"coverage":1,"colour":0.5657,"drift":0.068},"knobResponse":[0.5599,0.1621,0.1504,0.0519]},{"slug":"life","title":"Life","family":"automata","round":1,"note":"같은 여덟 이웃에 법칙이 여섯이에요. 세포가 나이만큼 색을 입어서 법칙마다 무엇이 남는지 보여요.","idea":"The same eight neighbours run under six different laws, and each cell wears its age, so a law shows itself in what lasts and what flickers.","buttons":"K1 tap sweeps a fresh soup down the whole panel.","code":"// ===== Patternflow pattern =====\n// Title:   Life\n// Family:  automata\n// Idea:    The same eight neighbours run under six different laws, and each cell wears its age, so a law shows itself in what lasts and what flickers.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Rule=0..5, Ghosts=0..1\n//\n// Knob 1: Hue. Turns the whole palette, newborn to old to ghost, around the colour wheel.\n// Knob 2: Speed. Generations per second, from one to about 24.\n// Knob 3: Rule. 0 Conway B3/S23, 1 HighLife B36/S23, 2 2x2 B36/S125, 3 Day and Night B3678/S34678, 4 Anneal B4678/S35678, 5 Maze B3/S12345.\n// Knob 4: Ghosts. How long a dead cell glows on, from a short smear to long exposure.\n// Buttons: K1 tap sweeps a fresh soup down the whole panel.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Birth and survival as bit masks over the neighbour count, the density of\n// the soup each rule starts from, and the density a reseed drops in. The rules\n// that grow walls get a sparse drop, so a reseed clears ground to regrow.\nconst RULES = [\n  [1 \u003c\u003c 3, (1 \u003c\u003c 2) | (1 \u003c\u003c 3), 0.33, 0.33],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6), (1 \u003c\u003c 2) | (1 \u003c\u003c 3), 0.33, 0.33],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6), (1 \u003c\u003c 1) | (1 \u003c\u003c 2) | (1 \u003c\u003c 5), 0.3, 0.3],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), (1 \u003c\u003c 3) | (1 \u003c\u003c 4) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), 0.5, 0.5],\n  [(1 \u003c\u003c 4) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), (1 \u003c\u003c 3) | (1 \u003c\u003c 5) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), 0.5, 0.5],\n  [1 \u003c\u003c 3, (1 \u003c\u003c 1) | (1 \u003c\u003c 2) | (1 \u003c\u003c 3) | (1 \u003c\u003c 4) | (1 \u003c\u003c 5), 0.12, 0.05],\n];\n// Colours by age on a log scale: the first few generations change the colour\n// fast, and a still region keeps deepening for about twenty seconds.\nconst AGES = 48;\nconst GHOST_CUT = 0.07;\nconst BLOCKS = 32;\n\nfunction rand(params) {\n  let s = params.rng | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.rng = s;\n  return (s >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.cells = new Uint8Array(N);\n  params.next = new Uint8Array(N);\n  params.age = new Uint16Array(N);\n  params.ghost = new Float32Array(N);\n  params.ageCol = new Float32Array(AGES * 3);\n  params.ageIndex = new Uint8Array(1024);\n  for (let a = 0; a \u003c 1024; a++) params.ageIndex[a] = Math.min(AGES - 1, Math.floor(Math.log2(1 + a) * 5.2));\n  params.blocks = new Float32Array(BLOCKS);\n  params.now = new Float32Array(BLOCKS);\n  params.still = 0;\n  params.gen = 0;\n  params.ghostCol = [0, 0, 0];\n  params.rng = (Math.random() * 4294967295) | 1;\n  params.seeded = false;\n  params.acc = 0;\n  params.calm = 1;\n  params.cooldown = 0;\n  // The reseed under way: 0 none, 1 a growing drop, 2 a sweep across the panel.\n  params.wipe = 0;\n  params.wipeT = 0;\n  params.wipeDone = 0;\n}\n\n// Kill or seed one cell as a wipe passes it; what dies there leaves a ghost.\nfunction reseedCell(params, p, density) {\n  if (params.cells[p]) params.ghost[p] = 0.5;\n  const alive = rand(params) \u003c density ? 1 : 0;\n  params.cells[p] = alive;\n  params.age[p] = 0;\n}\n\nfunction startWipe(params, kind) {\n  params.wipe = kind;\n  params.wipeT = 0;\n  params.wipeDone = 0;\n  params.wipeX = Math.floor(rand(params) * W);\n  params.wipeY = Math.floor(rand(params) * H);\n  params.wipeR = 16 + rand(params) * 12;\n  params.cooldown = 64;\n  params.still = 0;\n}\n\nfunction runWipe(params, dt, density) {\n  if (params.wipe === 2) density = params.soup;\n  params.wipeT += dt;\n  if (params.wipe === 1) {\n    // A disc of fresh soup grows from one point, edge first.\n    const r = Math.min(1, params.wipeT / 0.8) * params.wipeR;\n    const r0 = params.wipeDone;\n    const reach = Math.ceil(r);\n    for (let dy = -reach; dy \u003c= reach; dy++) {\n      for (let dx = -reach; dx \u003c= reach; dx++) {\n        const d = Math.hypot(dx, dy);\n        if (d \u003c r0 || d >= r) continue;\n        const x = (params.wipeX + dx + W) % W;\n        const y = (params.wipeY + dy + H) % H;\n        reseedCell(params, y * W + x, density * (1 - 0.5 * (d / params.wipeR)));\n      }\n    }\n    params.wipeDone = r;\n    if (params.wipeT >= 0.8) params.wipe = 0;\n  } else {\n    // A front of fresh soup comes down the whole panel from the top.\n    const to = Math.min(H, Math.floor((params.wipeT / 1.2) * H));\n    for (let y = params.wipeDone; y \u003c to; y++) {\n      for (let x = 0; x \u003c W; x++) reseedCell(params, y * W + x, density);\n    }\n    params.wipeDone = to;\n    if (to >= H) params.wipe = 0;\n  }\n}\n\nfunction step(params, rule) {\n  const cells = params.cells;\n  const next = params.next;\n  const age = params.age;\n  const birth = rule[0];\n  const survive = rule[1];\n  let changed = 0;\n  let population = 0;\n  for (let y = 0; y \u003c H; y++) {\n    const up = ((y + H - 1) % H) * W;\n    const row = y * W;\n    const down = ((y + 1) % H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const l = (x + W - 1) % W;\n      const r = (x + 1) % W;\n      const n =\n        cells[up + l] + cells[up + x] + cells[up + r] +\n        cells[row + l] + cells[row + r] +\n        cells[down + l] + cells[down + x] + cells[down + r];\n      const p = row + x;\n      const was = cells[p];\n      const now = ((was ? survive : birth) >> n) & 1;\n      next[p] = now;\n      if (now) {\n        age[p] = was ? Math.min(age[p] + 1, 65535) : 0;\n        population++;\n      } else if (was) params.ghost[p] = 0.5;\n      if (now !== was) changed++;\n    }\n  }\n  params.cells = next;\n  params.next = cells;\n  params.calm = params.calm * 0.9 + 0.1 * (changed / N);\n  params.gen++;\n  // Every sixteen generations, measure how far the layout has moved from the\n  // last one that counted as new; flicker along an edge never adds up to that.\n  if (params.gen % 16 === 0) {\n    let moved = 0;\n    for (let b = 0; b \u003c BLOCKS; b++) {\n      const bx = (b % 4) * 16;\n      const by = Math.floor(b / 4) * 16;\n      let sum = 0;\n      for (let y = by; y \u003c by + 16; y++) for (let x = bx; x \u003c bx + 16; x++) sum += next[y * W + x];\n      params.now[b] = sum / 256;\n      moved += Math.abs(params.now[b] - params.blocks[b]);\n    }\n    // Measured against the population, so a sparse field and a crowded one\n    // are held to the same standard.\n    if (moved / BLOCKS / (population / N + 0.02) > 0.12) {\n      params.blocks.set(params.now);\n      params.still = 0;\n    } else params.still++;\n  }\n  if (params.cooldown > 0) params.cooldown--;\n  if (params.wipe) return;\n  if (population \u003c N * 0.004) startWipe(params, 2);\n  else if ((params.calm \u003c 0.006 || params.still >= 4) && params.cooldown === 0) startWipe(params, 1);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const rate = 1 + 5.5 * k[1];\n  const ruleIndex = Math.max(0, Math.min(RULES.length - 1, Math.round(k[2])));\n  const rule = RULES[ruleIndex];\n  params.trail = 0.25 + 3 * Math.pow(k[3], 1.5);\n\n  if (!params.seeded) {\n    for (let p = 0; p \u003c N; p++) params.cells[p] = rand(params) \u003c rule[2] ? 1 : 0;\n    // Run the soup past its first boil, so even the slowest speed opens on shapes.\n    for (let i = 0; i \u003c 24; i++) step(params, rule);\n    params.ghost.fill(0);\n    params.seeded = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startWipe(params, 2);\n  params.soup = rule[2];\n  if (params.wipe) runWipe(params, dt, rule[3]);\n\n  params.acc += dt * rate;\n  let steps = 0;\n  while (params.acc >= 1 && steps \u003c 4) {\n    step(params, rule);\n    params.acc -= 1;\n    steps++;\n  }\n  if (params.acc > 1) params.acc = 1;\n\n  const fade = Math.exp(-dt / params.trail);\n  const ghost = params.ghost;\n  for (let p = 0; p \u003c N; p++) if (ghost[p] > 0) ghost[p] = ghost[p] > GHOST_CUT ? ghost[p] * fade : 0;\n\n  // Newborn cells are pale and hot, the young ones the full hue, and the old\n  // ones sink to a deeper, darker colour; ghosts sit further round the wheel.\n  for (let a = 0; a \u003c AGES; a++) {\n    const young = Math.min(1, a / 8);\n    const old = Math.max(0, (a - 8) / (AGES - 9));\n    const c = hsv(params.hue + 0.1 * (1 - young) - 0.2 * old, 0.55 + 0.35 * young, 1 - 0.55 * old);\n    params.ageCol[a * 3] = c[0];\n    params.ageCol[a * 3 + 1] = c[1];\n    params.ageCol[a * 3 + 2] = c[2];\n  }\n  params.ghostCol = hsv(params.hue + 0.62, 0.85, 1);\n}\n\nexport function draw(display, params, time) {\n  const cells = params.cells;\n  const age = params.age;\n  const ghost = params.ghost;\n  const col = params.ageCol;\n  const g = params.ghostCol;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (cells[p]) {\n        const a = params.ageIndex[Math.min(age[p], 1023)] * 3;\n        display.setPixel(x, y, col[a], col[a + 1], col[a + 2]);\n      } else if (ghost[p] > GHOST_CUT) {\n        const v = ghost[p];\n        display.setPixel(x, y, g[0] * v, g[1] * v, g[2] * v);\n      } else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","layer":{"id":"layer-life","type":"code","name":"life","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Life\n// Family:  automata\n// Idea:    The same eight neighbours run under six different laws, and each cell wears its age, so a law shows itself in what lasts and what flickers.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Rule=0..5, Ghosts=0..1\n//\n// Knob 1: Hue. Turns the whole palette, newborn to old to ghost, around the colour wheel.\n// Knob 2: Speed. Generations per second, from one to about 24.\n// Knob 3: Rule. 0 Conway B3/S23, 1 HighLife B36/S23, 2 2x2 B36/S125, 3 Day and Night B3678/S34678, 4 Anneal B4678/S35678, 5 Maze B3/S12345.\n// Knob 4: Ghosts. How long a dead cell glows on, from a short smear to long exposure.\n// Buttons: K1 tap sweeps a fresh soup down the whole panel.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Birth and survival as bit masks over the neighbour count, the density of\n// the soup each rule starts from, and the density a reseed drops in. The rules\n// that grow walls get a sparse drop, so a reseed clears ground to regrow.\nconst RULES = [\n  [1 \u003c\u003c 3, (1 \u003c\u003c 2) | (1 \u003c\u003c 3), 0.33, 0.33],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6), (1 \u003c\u003c 2) | (1 \u003c\u003c 3), 0.33, 0.33],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6), (1 \u003c\u003c 1) | (1 \u003c\u003c 2) | (1 \u003c\u003c 5), 0.3, 0.3],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), (1 \u003c\u003c 3) | (1 \u003c\u003c 4) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), 0.5, 0.5],\n  [(1 \u003c\u003c 4) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), (1 \u003c\u003c 3) | (1 \u003c\u003c 5) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), 0.5, 0.5],\n  [1 \u003c\u003c 3, (1 \u003c\u003c 1) | (1 \u003c\u003c 2) | (1 \u003c\u003c 3) | (1 \u003c\u003c 4) | (1 \u003c\u003c 5), 0.12, 0.05],\n];\n// Colours by age on a log scale: the first few generations change the colour\n// fast, and a still region keeps deepening for about twenty seconds.\nconst AGES = 48;\nconst GHOST_CUT = 0.07;\nconst BLOCKS = 32;\n\nfunction rand(params) {\n  let s = params.rng | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.rng = s;\n  return (s >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.cells = new Uint8Array(N);\n  params.next = new Uint8Array(N);\n  params.age = new Uint16Array(N);\n  params.ghost = new Float32Array(N);\n  params.ageCol = new Float32Array(AGES * 3);\n  params.ageIndex = new Uint8Array(1024);\n  for (let a = 0; a \u003c 1024; a++) params.ageIndex[a] = Math.min(AGES - 1, Math.floor(Math.log2(1 + a) * 5.2));\n  params.blocks = new Float32Array(BLOCKS);\n  params.now = new Float32Array(BLOCKS);\n  params.still = 0;\n  params.gen = 0;\n  params.ghostCol = [0, 0, 0];\n  params.rng = (Math.random() * 4294967295) | 1;\n  params.seeded = false;\n  params.acc = 0;\n  params.calm = 1;\n  params.cooldown = 0;\n  // The reseed under way: 0 none, 1 a growing drop, 2 a sweep across the panel.\n  params.wipe = 0;\n  params.wipeT = 0;\n  params.wipeDone = 0;\n}\n\n// Kill or seed one cell as a wipe passes it; what dies there leaves a ghost.\nfunction reseedCell(params, p, density) {\n  if (params.cells[p]) params.ghost[p] = 0.5;\n  const alive = rand(params) \u003c density ? 1 : 0;\n  params.cells[p] = alive;\n  params.age[p] = 0;\n}\n\nfunction startWipe(params, kind) {\n  params.wipe = kind;\n  params.wipeT = 0;\n  params.wipeDone = 0;\n  params.wipeX = Math.floor(rand(params) * W);\n  params.wipeY = Math.floor(rand(params) * H);\n  params.wipeR = 16 + rand(params) * 12;\n  params.cooldown = 64;\n  params.still = 0;\n}\n\nfunction runWipe(params, dt, density) {\n  if (params.wipe === 2) density = params.soup;\n  params.wipeT += dt;\n  if (params.wipe === 1) {\n    // A disc of fresh soup grows from one point, edge first.\n    const r = Math.min(1, params.wipeT / 0.8) * params.wipeR;\n    const r0 = params.wipeDone;\n    const reach = Math.ceil(r);\n    for (let dy = -reach; dy \u003c= reach; dy++) {\n      for (let dx = -reach; dx \u003c= reach; dx++) {\n        const d = Math.hypot(dx, dy);\n        if (d \u003c r0 || d >= r) continue;\n        const x = (params.wipeX + dx + W) % W;\n        const y = (params.wipeY + dy + H) % H;\n        reseedCell(params, y * W + x, density * (1 - 0.5 * (d / params.wipeR)));\n      }\n    }\n    params.wipeDone = r;\n    if (params.wipeT >= 0.8) params.wipe = 0;\n  } else {\n    // A front of fresh soup comes down the whole panel from the top.\n    const to = Math.min(H, Math.floor((params.wipeT / 1.2) * H));\n    for (let y = params.wipeDone; y \u003c to; y++) {\n      for (let x = 0; x \u003c W; x++) reseedCell(params, y * W + x, density);\n    }\n    params.wipeDone = to;\n    if (to >= H) params.wipe = 0;\n  }\n}\n\nfunction step(params, rule) {\n  const cells = params.cells;\n  const next = params.next;\n  const age = params.age;\n  const birth = rule[0];\n  const survive = rule[1];\n  let changed = 0;\n  let population = 0;\n  for (let y = 0; y \u003c H; y++) {\n    const up = ((y + H - 1) % H) * W;\n    const row = y * W;\n    const down = ((y + 1) % H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const l = (x + W - 1) % W;\n      const r = (x + 1) % W;\n      const n =\n        cells[up + l] + cells[up + x] + cells[up + r] +\n        cells[row + l] + cells[row + r] +\n        cells[down + l] + cells[down + x] + cells[down + r];\n      const p = row + x;\n      const was = cells[p];\n      const now = ((was ? survive : birth) >> n) & 1;\n      next[p] = now;\n      if (now) {\n        age[p] = was ? Math.min(age[p] + 1, 65535) : 0;\n        population++;\n      } else if (was) params.ghost[p] = 0.5;\n      if (now !== was) changed++;\n    }\n  }\n  params.cells = next;\n  params.next = cells;\n  params.calm = params.calm * 0.9 + 0.1 * (changed / N);\n  params.gen++;\n  // Every sixteen generations, measure how far the layout has moved from the\n  // last one that counted as new; flicker along an edge never adds up to that.\n  if (params.gen % 16 === 0) {\n    let moved = 0;\n    for (let b = 0; b \u003c BLOCKS; b++) {\n      const bx = (b % 4) * 16;\n      const by = Math.floor(b / 4) * 16;\n      let sum = 0;\n      for (let y = by; y \u003c by + 16; y++) for (let x = bx; x \u003c bx + 16; x++) sum += next[y * W + x];\n      params.now[b] = sum / 256;\n      moved += Math.abs(params.now[b] - params.blocks[b]);\n    }\n    // Measured against the population, so a sparse field and a crowded one\n    // are held to the same standard.\n    if (moved / BLOCKS / (population / N + 0.02) > 0.12) {\n      params.blocks.set(params.now);\n      params.still = 0;\n    } else params.still++;\n  }\n  if (params.cooldown > 0) params.cooldown--;\n  if (params.wipe) return;\n  if (population \u003c N * 0.004) startWipe(params, 2);\n  else if ((params.calm \u003c 0.006 || params.still >= 4) && params.cooldown === 0) startWipe(params, 1);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const rate = 1 + 5.5 * k[1];\n  const ruleIndex = Math.max(0, Math.min(RULES.length - 1, Math.round(k[2])));\n  const rule = RULES[ruleIndex];\n  params.trail = 0.25 + 3 * Math.pow(k[3], 1.5);\n\n  if (!params.seeded) {\n    for (let p = 0; p \u003c N; p++) params.cells[p] = rand(params) \u003c rule[2] ? 1 : 0;\n    // Run the soup past its first boil, so even the slowest speed opens on shapes.\n    for (let i = 0; i \u003c 24; i++) step(params, rule);\n    params.ghost.fill(0);\n    params.seeded = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startWipe(params, 2);\n  params.soup = rule[2];\n  if (params.wipe) runWipe(params, dt, rule[3]);\n\n  params.acc += dt * rate;\n  let steps = 0;\n  while (params.acc >= 1 && steps \u003c 4) {\n    step(params, rule);\n    params.acc -= 1;\n    steps++;\n  }\n  if (params.acc > 1) params.acc = 1;\n\n  const fade = Math.exp(-dt / params.trail);\n  const ghost = params.ghost;\n  for (let p = 0; p \u003c N; p++) if (ghost[p] > 0) ghost[p] = ghost[p] > GHOST_CUT ? ghost[p] * fade : 0;\n\n  // Newborn cells are pale and hot, the young ones the full hue, and the old\n  // ones sink to a deeper, darker colour; ghosts sit further round the wheel.\n  for (let a = 0; a \u003c AGES; a++) {\n    const young = Math.min(1, a / 8);\n    const old = Math.max(0, (a - 8) / (AGES - 9));\n    const c = hsv(params.hue + 0.1 * (1 - young) - 0.2 * old, 0.55 + 0.35 * young, 1 - 0.55 * old);\n    params.ageCol[a * 3] = c[0];\n    params.ageCol[a * 3 + 1] = c[1];\n    params.ageCol[a * 3 + 2] = c[2];\n  }\n  params.ghostCol = hsv(params.hue + 0.62, 0.85, 1);\n}\n\nexport function draw(display, params, time) {\n  const cells = params.cells;\n  const age = params.age;\n  const ghost = params.ghost;\n  const col = params.ageCol;\n  const g = params.ghostCol;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (cells[p]) {\n        const a = params.ageIndex[Math.min(age[p], 1023)] * 3;\n        display.setPixel(x, y, col[a], col[a + 1], col[a + 2]);\n      } else if (ghost[p] > GHOST_CUT) {\n        const v = ghost[p];\n        display.setPixel(x, y, g[0] * v, g[1] * v, g[2] * v);\n      } else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0..4, Rule=0..5, Ghosts=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole palette, newborn to old to ghost, around the colour wheel."},{"name":"Speed","min":0,"max":4,"about":"Generations per second, from one to about 24."},{"name":"Rule","min":0,"max":5,"about":"0 Conway B3/S23, 1 HighLife B36/S23, 2 2x2 B36/S125, 3 Day and Night B3678/S34678, 4 Anneal B4678/S35678, 5 Maze B3/S12345."},{"name":"Ghosts","min":0,"max":1,"about":"How long a dead cell glows on, from a short smear to long exposure."}],"start":[0,2,0,0.06],"measures":{"motion":0.6935,"detail":0.1138,"edges":0.7121,"complexity":0.3343,"coverage":0.2193,"colour":0.2429,"drift":0.1393},"knobResponse":[0.1027,0.1531,0.303,0.0806]},{"slug":"liftoff","title":"Liftoff","family":"flight","round":22,"note":"새벽 물 건너 발사대에서 로켓이 하얀 산소 김을 흘리며 서 있다가 김구름 속에 불을 붙이고 솟아올라요. 카메라가 따라 고개를 들면 하늘이 파랑에서 별 뜬 검정으로 바뀌고, Max-Q 와 단 분리를 지나 밝은 점이 되면 새 로켓이 발사대에 서요.","idea":"A rocket vents on its pad across the water, lights up in rolling steam and climbs while the camera tilts after it from blue sky into black and stars, through Max-Q and staging, until it is a bright dot and the next rocket stands on the pad.","buttons":"K1 tap skips the countdown to ignition, or after liftoff rolls out the next rocket.","code":"// ===== Patternflow pattern =====\n// Title:   Liftoff\n// Family:  flight\n// Idea:    A rocket vents on its pad across the water, lights up in rolling steam and climbs while the camera tilts after it from blue sky into black and stars, through Max-Q and staging, until it is a bright dot and the next rocket stands on the pad.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after long-lens tracking shots of launches filmed across the water from the press site\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Rocket=0..3, Speed=0.2..3, Stages=1..3, Time=0..1\n//\n// Knob 1: Rocket. A white moon rocket by its tower at 0, a chequered V-2 at 1, a grey-green cluster whose boosters fall away in a cross at 2, a sounding rocket on a rail at 3.\n// Knob 2: Speed. At 2 the countdown, the flight and the next rocket take 35 s; at 0.2 ten times longer.\n// Knob 3: Stages. 1 to 3 stages. A taller stack gets a taller tower and more steam, and each extra stage drops away on the climb.\n// Knob 4: Time. Dawn at 0, then day, dusk and a floodlit night with searchlights. At dawn and dusk the high plume catches the sun.\n// Buttons: K1 tap skips the countdown to ignition, or after liftoff rolls out the next rocket.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Shoreline row with the camera level, pad column, deck height.\nconst GY = 112;\nconst X0 = 36;\nconst DECK = 4;\nconst MAXP = 900;\n// A puff: x, height, vx, vz, radius, growth, age, life, opacity, heat,\n// whiteness, drag, sprite.\nconst PF = 13;\nconst SP = 24;\nconst { min, max, abs, sin, cos, exp, sqrt, floor, round, ceil, atan2, hypot } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ss = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Dawn, day, dusk, night: four sky colours, ambient, sun colour; sun on the\n// rocket, on the high plume, floodlights, stars, sun column, height, radius.\nconst PAL = [\n  [255, 150, 90, 200, 135, 150, 80, 105, 190, 22, 36, 110, 80, 88, 125, 255, 175, 120, 0.3, 1, 0.75, 0.15, 56, 0, 3.5],\n  [200, 222, 245, 140, 190, 240, 55, 135, 230, 15, 55, 165, 175, 185, 200, 255, 250, 235, 1, 0, 0, 0, 12, 190, 3.5],\n  [255, 115, 55, 185, 85, 115, 70, 55, 140, 18, 18, 70, 95, 72, 100, 255, 135, 75, 0.35, 1, 0.6, 0.3, 8, 3, 4],\n  [22, 34, 62, 14, 22, 50, 7, 12, 34, 3, 5, 16, 30, 34, 55, 0, 0, 0, 0, 0.1, 1, 1, 30, -40, 0],\n];\n// Kerosene, hydrogen, solid: flame core, middle, edge, glow; trail\n// whiteness and thickness.\nconst FUEL = [\n  [[255, 246, 215], [255, 196, 80], [235, 105, 30], [255, 140, 55], 0.62, 0.75],\n  [[235, 240, 255], [170, 180, 255], [120, 110, 230], [130, 150, 255], 0.95, 0.22],\n  [[255, 252, 240], [255, 225, 150], [250, 160, 70], [255, 190, 120], 0.95, 0.95],\n];\nconst ACC = [1, 1.15, 1.05, 1.7];\nconst LEAN = [0, 0, 0, 0.12];\nconst STEAM = [1, 0.55, 0.9, 0.35];\nconst IGN = [-2, -1.6, -2.2, -0.12];\n// White, black, engine bells, bare metal, grey-green, orange.\nconst PAINT = [[0.9, 0.9, 0.88], [0.08, 0.08, 0.08], [0.24, 0.21, 0.2], [0.66, 0.69, 0.74], [0.62, 0.67, 0.58], [0.95, 0.42, 0.12]];\n// 3x5 letters: 0-9, T, minus, plus.\nconst FONT = [31599, 11415, 29671, 29647, 23497, 31183, 31215, 29330, 31727, 31695, 29842, 448, 1488];\nconst BEAMS = [[3, 0.32], [62, -0.3], [22, 0.06]].map(([b, a]) => [b, sin(a), cos(a)]);\nconst BOOST = [[-1.4, 0, 1.9, 1.4, 2, 0], [0, 1, 2.1, 2.05, 1, 0], [1, 13, 2.05, 1.1, 10, 0], [13, 18, 1.1, 0, 10, 0]];\n\n// Stages from the bottom: length, segments [u0, u1, half widths, paint],\n// bell [length, half widths], nozzle, fuel, fins [u0, u1, span, paint].\nfunction build(sty, n) {\n  const S = (len, segs, bell, wn, fuel, fins = []) => ({ len, segs, bell, wn, fuel, fins });\n  const a = 20 + (3 - n) * 2.5, b = n > 1 ? 26 : 29;\n  const st = [\n    [S(a, [[0, a, 4.5, 4.5, 6]], [2.5, 4.4, 3.4], 4.3, 0, [[0, 5, 2.4, 1]]), S(13, [[0, 1, 4.5, 4.5, 1], [1, 13, 4.5, 4.5, 0]], [1.5, 3, 2.2], 3, 1), S(10, [[0, 3, 4.5, 3.3, 0], [3, 10, 3.3, 3.3, 7]], [1.2, 1.8, 1.2], 1.6, 1)],\n    [S(b, [[0, 20, 3.2, 3.4, 8], [20, b, 3.4, n > 1 ? 1.4 : 0, 8]], [1.5, 2.4, 1.8], 2.2, 0, [[0, 7, 3.4, 8]]), S(12, [[0, 12, 1.4, 1.4, 0]], [0.8, 1.1, 0.8], 1, 2, [[0, 3, 1.7, 1]]), S(8, [[0, 8, 1.1, 1.1, 9]], [0.7, 0.9, 0.6], 0.8, 2, [[0, 2.5, 1.2, 5]])],\n    [S(28, [[0, 26, 2.2, 2.8, 10], [26, 28, 2.8, 2.5, 10]], [1.5, 2.2, 1.6], 2.2, 0), S(10, [[0, 2, 2.4, 2.4, 11], [2, 10, 2.6, 2.6, 10]], [1.2, 1.8, 1.2], 1.6, 0), S(4, [[0, 4, 2.6, 2.6, 3]], [0.8, 1.2, 0.8], 1, 1)],\n    [S(15, [[0, 15, 1.7, 1.7, 9]], [1, 1.4, 1.1], 1.4, 2, [[0, 4.5, 2.6, 5]]), S(12, [[0, 1.5, 1.7, 1.3, 1], [1.5, 12, 1.3, 1.3, 9]], [0.8, 1.1, 0.8], 1.1, 2, [[1.5, 4, 1.7, 5]]), S(9, [[0, 9, 1.1, 1.1, 9]], [0.6, 0.9, 0.6], 0.8, 2, [[0, 2.5, 1.2, 5]])],\n  ][sty].slice(0, n);\n  const last = st[n - 1], top = last.segs.at(-1)[3];\n  last.nose = sty === 0 ? [[0, 4, top, 2.6, 3], [4, 7, 2.6, 0.7, 0], [7, 11, 0.45, 0.45, 5], [11, 13, 0.9, 0.9, 5], [13, 14, 0.9, 0.1, 5]] : sty === 2 ? [[0, 5, 3.2, 3.2, 0], [5, 9, 3.2, 1.4, 0], [9, 10, 1.4, 0.5, 0], [10, 14, 0.4, 0.4, 5], [14, 16, 0.8, 0.8, 5], [16, 17, 0.8, 0, 5]] : top > 0 ? [[0, sty === 3 ? 6 : 4, top, 0, 0]] : [];\n  let u = 0;\n  for (const s of st) [s.u, u] = [u, u + s.len];\n  return { st, n, L: u + (last.nose.length && last.nose.at(-1)[1]), sep: st.slice(1).map((_, i) => (sty === 2 ? 11.5 + i * 4.5 : 9.5 + i * 5)), boost: sty === 2 };\n}\n\n// Stages a..b-1 end to end from 0, with stage a's bell below.\nfunction stack(V, a, b) {\n  const segs = [], fins = [], u0 = V.st[a].u, bl = V.st[a].bell;\n  segs.push([-bl[0], 0, bl[1], bl[2], 2, 0]);\n  for (let i = a; i \u003c b; i++) {\n    const s = V.st[i], o = s.u - u0, t = o + s.len;\n    for (const g of s.segs) segs.push([g[0] + o, g[1] + o, g[2], g[3], g[4], o]);\n    for (const f of s.fins) fins.push([f[0] + o, f[1] + o, f[2], f[3], o]);\n    if (s.nose) for (const g of s.nose) segs.push([g[0] + t, g[1] + t, g[2], g[3], g[4], t]);\n  }\n  return { segs, fins };\n}\n\nconst vehicle = (P) => P.vc[P.style * 4 + P.n] || (P.vc[P.style * 4 + P.n] = build(P.style, P.n));\n\n// The stack's foot at flight time T, and its engines.\nfunction fly(P, V, T) {\n  const sty = P.style, t = max(0, T), g = ACC[sty], E = g * 512 * (1 - exp((-t * t) / 128));\n  let ai = 0, f = ss(IGN[sty], IGN[sty] + 0.6, T);\n  for (const ts of V.sep) {\n    if (T >= ts) ai++;\n    f *= 1 - ss(ts - 0.3, ts, T) + ss(ts + 0.7, ts + 1.1, T);\n  }\n  const bo = V.boost && T \u003c 7.5, S = V.st[ai], wn = bo ? 6.2 : S.wn;\n  return { E, ai, f, wn, s: 1 / (1 + 0.001 * g * t * t * t), a: LEAN[sty] + 0.2 * ss(3, 16, t), x: X0 + 6 * ss(3, 20, t) + (sty === 3 ? 0.12 * min(E, 70) : 0), e: DECK + V.st[0].bell[0] + E, Lf: wn * (S.fuel === 2 ? 4.2 : 3.2) * (1 + E / 260) * f, k: 0.12 + min(0.9, E / 500) * (S.fuel === 1 ? 1.4 : 1), fuel: bo ? 0 : S.fuel };\n}\n\n// The camera's tilt in rows keeps the nose near the top, then lets the\n// shrinking rocket climb.\nfunction camera(V, T, F) {\n  const d = F.E - (GY - DECK - V.st[0].bell[0] - V.L * F.s - 15 + 9 * ss(12, 23, T)), h = max(14 - abs(d), 0) / 14;\n  return max(0, d) + h * h * 3.5;\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), G: F(N), D: F(N * 5), pa: F(MAXP * PF), spD: F(4 * SP * SP), spS: F(4 * SP * SP), vc: {}, started: false, T: -4.3, np: 0, clk: 0, pt: null });\n  // Lumpy puffs lit from above.\n  for (let q = 0; q \u003c 4 * SP * SP; q++) {\n    const k = floor(q / (SP * SP)), dx = (((q % SP) + 0.5) / SP) * 2 - 1, dy = (((floor(q / SP) % SP) + 0.5) / SP) * 2 - 1;\n    const d = hypot(dx, dy), an = atan2(dy, dx), edge = 0.8 + 0.1 * sin(5 * an + k * 1.7) + 0.07 * sin(9 * an + k * 2.9) + 0.04 * sin(13 * an + k);\n    P.spD[q] = ss(edge, edge - 0.45, d) * (0.78 + 0.22 * sin(dx * 7 + k) * sin(dy * 6 + k * 2));\n    P.spS[q] = clamp(0.55 - 0.55 * dy + 0.12 * dx + (d > edge - 0.2 && dy \u003c 0 ? 0.25 : 0), 0, 1);\n  }\n  P.stars = Array.from({ length: 240 }, () => [floor(rnd() * W), 30 + rnd() * 620, 0.25 + 0.75 * rnd() ** 3]);\n  P.shore = Array.from({ length: W }, (_, x) => 3 + 1.2 * sin(x * 0.7) * sin(x * 0.23 + 1) + (x % 11 \u003c 3 ? 1.8 : 0) + (x > 52 ? 1.2 : 0));\n}\n\nfunction newRocket(P, T) {\n  [P.T, P.np, P.pt] = [T, 0, null];\n}\n\nfunction emit(P, ...v) {\n  if (P.np \u003c MAXP) P.pa.set([...v.slice(0, 6), 0, ...v.slice(6), floor(rnd() * 4)], P.np++ * PF);\n}\n\nfunction times(n, fn) {\n  for (let c = n; c > 0 && (c >= 1 || rnd() \u003c c); c--) fn();\n}\n\nfunction step(P, h) {\n  P.T += h;\n  if (P.T > 25) return newRocket(P, -10);\n  const T = P.T, V = vehicle(P), sty = P.style, F = fly(P, V, T), C = camera(V, T, F), s = F.s, sa = sin(F.a), ca = cos(F.a);\n  // Before ignition liquid oxygen boils off and falls down the tanks.\n  if (T \u003c IGN[sty] + 0.4 && sty !== 3)\n    for (const S of V.st)\n      times(S.fuel === 2 ? 0 : h * 34, () => {\n        const sd = rnd() \u003c 0.6 ? 1 : -1;\n        emit(P, F.x + sd * (S.segs.at(-1)[3] - 0.3), F.e + S.u + S.len * (0.35 + 0.6 * rnd()), sd * (0.8 + 2.5 * rnd()), -3 - 5 * rnd(), 0.6, 1.5, 1.4 + rnd(), 0.2, 0, 0.95, 0.4);\n      });\n  if (F.f > 0.02) {\n    const uN = V.st[F.ai].u - V.st[F.ai].bell[0], tl = F.Lf * s * 0.85, tx = F.x + sa * (uN * s - tl), tz = F.e + ca * (uN * s - tl), fu = FUEL[F.fuel];\n    // Steam rolls out of the trench both ways and up round the rocket.\n    if (tz \u003c 24 && F.E \u003c 40)\n      times(55 * STEAM[sty] * (0.25 + 0.35 * P.n) * F.f * (1 - F.E / 40) * h, () => {\n        const sd = rnd() \u003c 0.5 ? -1 : 1;\n        if (rnd() \u003c 0.72) emit(P, X0 + sd * (8 + 2 * rnd()), 1 + rnd() * 2, sd * (18 + 34 * rnd()) * (0.6 + 0.4 * F.f), 3 + 9 * rnd(), 2.2, 3.6 + 2 * rnd(), 16, 0.5, 0.7, 0.95, 0.55);\n        else emit(P, X0 + sd * rnd() * 7, DECK + rnd() * 3, sd * 4 * rnd(), 10 + 16 * rnd(), 2, 2.8, 12, 0.45, 0.9, 0.95, 0.9);\n      });\n    // The trail, laid along the path since the last step.\n    if (T > 0 && tz > DECK + 6) {\n      const [px, pz] = P.pt || [tx, tz], r0 = max(0.6, F.wn * s * 1.05), hi = P.tw * ss(140, 300, tz);\n      const cnt = min(14, ceil(max(hypot(tx - px, tz - pz) / max(0.6, r0 * 0.6), h * 24)));\n      for (let j = 1; j \u003c= cnt; j++) emit(P, px + ((tx - px) * j) / cnt + (rnd() - 0.5) * r0, pz + ((tz - pz) * j) / cnt, (rnd() - 0.5) * 2 * s, -1.5 * s, r0, (1.1 + 1.8 * hi) * sqrt(s + 0.08) * 2, 30, fu[5] * (0.75 + 0.25 * rnd()) * (1 - 0.4 * hi), 1, fu[4], 0.05);\n      P.pt = [tx, tz];\n    }\n  } else P.pt = null;\n  // Puffs spread, rise and thin, and go once below the panel.\n  const pa = P.pa;\n  for (let i = 0; i \u003c P.np; i++) {\n    const o = i * PF, dr = exp(-pa[o + 11] * h);\n    pa[o + 6] += h;\n    pa[o + 2] *= dr;\n    pa[o + 3] = pa[o + 3] * dr + (pa[o + 11] > 0.3 ? 2 * h : 0);\n    pa[o] += (pa[o + 2] + 1.2 + pa[o + 1] * 0.012) * h;\n    pa[o + 1] += pa[o + 3] * h;\n    if (pa[o + 6] > pa[o + 7] || GY + C - pa[o + 1] - pa[o + 4] - pa[o + 5] * sqrt(pa[o + 6]) > 130 || abs(pa[o] - 32) > 62) {\n      pa.copyWithin(o, --P.np * PF, P.np * PF + PF);\n      i--;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.style = clamp(round(k[0]), 0, 3);\n  P.n = clamp(round(k[2]), 1, 3);\n  P.tod = clamp(k[3], 0, 1);\n  // The hour's colours; the sun lingers low at dawn and dusk.\n  const f = P.tod * 3, i = min(2, floor(f)), q = f - i, A = PAL[i], B = PAL[i + 1];\n  P.pal = A.map((v, j) => v + (B[j] - v) * q);\n  P.se = A[23] + (B[23] - A[23]) * (i === 0 ? q * q : i === 1 ? 1 - (1 - q) ** 2 : q);\n  [P.sunI, P.tw, P.lights, P.night] = [P.pal[18], P.pal[19], P.pal[20], ss(0.67, 1, P.tod)];\n  if (!P.started) {\n    P.started = true;\n    // Open 2.3 s before liftoff, with the tanks already venting.\n    for (let j = 0; j \u003c 20; j++) step(P, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.T \u003c IGN[P.style] - 0.3) P.T = IGN[P.style] - 0.3;\n    else if (P.T > 2) newRocket(P, -3);\n  }\n  P.clk += dt;\n  step(P, (dt * clamp(k[1], 0.2, 3)) / 2);\n}\n\n// Lights a surface facing vn across a cylinder, laid over the LED.\nfunction shade(P, p, vn, fl, r, g, b, a) {\n  const c = P.pal, o = p * 3, buf = P.buf, sn = P.sunK * max(0, 0.25 + 0.75 * vn * P.side), am = 1 - 0.28 * vn * vn, fr = 235 * fl * (1 - 0.35 * vn * vn);\n  [r, g, b].forEach((k, j) => (buf[o + j] += (k * (c[12 + j] * am + c[15 + j] * sn + fr + P.G[p] * P.gc[j]) - buf[o + j]) * a));\n}\n\n// Patterned paints: moon rocket stages 1 and 3, V-2 quarters, bands,\n// grey-green, truss.\nfunction albedo(c, u, vn) {\n  if (c === 6) c = (u > 0.5 && u \u003c 7 && vn > -0.1 && vn \u003c 0.5) || (u > 15.5 && u \u003c 17) ? 1 : 0;\n  else if (c === 7) c = u > 5 && u \u003c 8.5 && vn > 0.05 ? 1 : 0;\n  else if (c === 8) c = (floor(u / 6.5) + (vn > 0)) & 1;\n  else if (c === 9) c = u % 7 \u003c 1.4 ? 5 : 0;\n  else if (c > 9) c = c === 10 ? 4 : (floor(u * 1.5) + floor((vn + 1) * 2.5)) & 1 ? 1 : 3;\n  return PAINT[c];\n}\n\n// One body from its foot at (b.x, b.y), leaning b.ang, at scale b.sc.\nfunction body(P, b) {\n  const sa = sin(b.ang), ca = cos(b.ang), sc = b.sc, fl = b.flame, buf = P.buf;\n  let u0 = 0, u1 = 0, hm = 0;\n  for (const g of b.segs) [u0, u1, hm] = [min(u0, g[0]), max(u1, g[1]), max(hm, g[2], g[3])];\n  hm += b.fins.length ? 3.5 : 0;\n  const fu = u0;\n  if (fl) [u0, hm] = [u0 - fl.Lf * 3.2, max(hm + 5, fl.wn + (fl.k + 0.12) * fl.Lf * 3.2 + 1)];\n  const m = (u0 + u1) / 2, cx = b.x + m * sa * sc, cy = b.y - m * ca * sc, R = hypot((u1 - u0) / 2, hm) * sc + 2;\n  const fc = fl && FUEL[fl.fuel], flood = P.lights * 0.9 * exp(-b.E / 45);\n  for (let y = max(0, floor(cy - R)); y \u003c= min(H - 1, ceil(cy + R)); y++)\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const dx = x + 0.5 - b.x, dy = b.y - (y + 0.5), p = y * W + x;\n      const u = (dx * sa + dy * ca) / sc, v = (dx * ca - dy * sa) / sc, av = abs(v);\n      let seg = null;\n      for (const g of b.segs) if (u >= g[0] && u \u003c g[1]) seg = g;\n      if (seg) {\n        const hw = seg[2] + ((seg[3] - seg[2]) * (u - seg[0])) / (seg[1] - seg[0]);\n        let cov = clamp((hw - av) * sc + 0.5, 0, 1), vn = clamp(v / max(0.3, hw), -1, 1), c = seg[4], uu = u - seg[5];\n        if (cov \u003c= 0)\n          for (const f of b.fins)\n            if (u >= f[0] && u \u003c f[1]) {\n              const cf = clamp((hw + f[2] * (1 - (u - f[0]) / (f[1] - f[0])) - av) * sc + 0.5, 0, 1);\n              if (cf > cov) [cov, vn, c, uu] = [cf, v > 0 ? 0.6 : -0.6, f[3], u - f[4]];\n            }\n        const A = albedo(c, uu, vn), hc = hw + 0.6 + (b.uq + 0.5 - u) * 0.6;\n        if (cov > 0) shade(P, p, vn, flood, A[0], A[1], A[2], cov * b.al);\n        // Max-Q: a collar of condensation round the body.\n        else if (b.q > 0 && u > b.uq - 7 && u \u003c b.uq + 0.5 && av \u003c hc) shade(P, p, v / hc, 0.4, 1, 1, 1, b.q * 0.95 * ss(0, 1.2, b.uq + 0.5 - u) * (1 - (av / hc) ** 3) * (0.75 + 0.25 * sin(u * 3 + P.clk * 40)));\n        continue;\n      }\n      // The flame, clipped where it meets the deck.\n      if (!fl || u >= fu || GY + P.Ci - y - 0.5 \u003c DECK + 0.5) continue;\n      const ue = fu - u, q = av / (fl.wn * 0.85 + (fl.k + 0.12) * ue);\n      if (q >= 1.2) continue;\n      const I = (exp(-ue / fl.Lf) * max(0, 1 - q * q) * (fl.fuel === 0 && b.E \u003c 140 ? 0.8 + 0.3 * cos((ue * 2.4) / fl.wn) : 1) * fl.f) / (1 + fl.k * 1.2);\n      const core = exp(-ue / (fl.Lf * 0.35)) * max(0, 1 - q * 1.7) * fl.f;\n      const tt = min(1, I * 0.9 + core) * 2, br = min(1.2, I * 1.7 + core), A = fc[tt \u003c 1 ? 2 : 1], B = fc[tt \u003c 1 ? 1 : 0], w = tt \u003c 1 ? tt : tt - 1;\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += (A[j] + (B[j] - A[j]) * w) * br;\n    }\n}\n\n// The cluster's boosters; at 7.5 s the side ones pivot out and fall.\nfunction boosters(P, V, T, F, sides) {\n  const dt = T - 7.5, sep = dt > 0, S0 = sep ? fly(P, V, 7.5) : F;\n  if (dt > 5) return;\n  const drop = sep ? ((fly(P, V, 7.55).E - S0.E) / 0.05) * 1.1 * (1 - exp(-dt / 1.1)) : 0;\n  for (const sd of sides) {\n    const off = sd * 3.7 * S0.s;\n    body(P, { segs: BOOST, fins: [], x: S0.x + cos(S0.a) * off + (sep ? sd * 2 * dt : 0), y: GY + P.Ci - S0.e - drop + sin(S0.a) * off, ang: S0.a + sd * (sep ? 0.35 + 0.9 * dt : -0.05), sc: S0.s / (1 + (sep ? 0.06 * dt : 0)), al: 1 - ss(3, 5, max(0, dt)), E: sep ? 300 : F.E });\n  }\n}\n\nfunction sky(P) {\n  const c = P.pal, buf = P.buf, Ci = P.Ci, sx = c[22], se = P.se, sr = c[24], sunA = 1 - P.night, sk = [0, 0, 0], bi = P.lights * (0.25 + 0.75 * P.night) * 55;\n  for (let y = 0; y \u003c H; y++) {\n    const a = GY + Ci - y - 6, e = a + 6, gl = sunA * 0.55 * exp(-abs(e - se) / 26);\n    const [A, B, q] = a \u003c 22 ? [0, 3, max(0, a) / 22] : a \u003c 100 ? [3, 6, (a - 22) / 78] : a \u003c 240 ? [6, 9, (a - 100) / 140] : [9, -1, min(1, (a - 240) / 180)];\n    for (let j = 0; j \u003c 3; j++) sk[j] = c[A + j] + ((B \u003c 0 ? 0 : c[B + j]) - c[A + j]) * q;\n    // The sun's glow and disc, and searchlights from the pad.\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, dx = x + 0.5 - sx, g = gl * exp(-(dx * dx) / 420), disc = sr > 0 ? sunA * clamp(sr - hypot(dx, e - se) + 0.5, 0, 1) : 0;\n      let v = 0;\n      if (bi > 1 && e > 0)\n        for (const [bx, sn, cs] of BEAMS) {\n          const d = x + 0.5 - bx, al = d * sn + e * cs, pp = d * cs - e * sn, w = 1.2 + al * 0.035;\n          v += (bi * exp(-(pp * pp) / (w * w))) / (1 + al / 160);\n        }\n      for (let j = 0; j \u003c 3; j++) buf[o + j] = sk[j] + c[15 + j] * g + (c[15 + j] * 0.8 + 50) * disc + v * [0.75, 0.82, 1][j];\n    }\n  }\n  // Stars come out as the sky darkens.\n  P.stars.forEach(([x, e, m], i) => {\n    const y = GY + Ci - floor(e), v = m * (c[21] + (1 - c[21]) * ss(250, 420, e)) * (0.8 + 0.2 * sin(P.clk * 3 + i)) * 235, o = (y * W + x) * 3;\n    if (y >= 0 && y \u003c H) for (let j = 0; j \u003c 3; j++) buf[o + j] += v * (j > 1 ? 1 : 0.9);\n  });\n}\n\n// A lit beam between two points, in rows above the shoreline.\nfunction line(P, x0, e0, x1, e1, w, r, g, b, fl) {\n  const Ci = P.Ci, dx = x1 - x0, de = e1 - e0, l2 = dx * dx + de * de || 1;\n  for (let y = max(0, floor(GY + Ci - max(e0, e1) - w)); y \u003c= min(H - 1, ceil(GY + Ci - min(e0, e1) + w)); y++)\n    for (let x = max(0, floor(min(x0, x1) - w)); x \u003c= min(W - 1, ceil(max(x0, x1) + w)); x++) {\n      const px = x + 0.5 - x0, pe = GY + Ci - y - 0.5 - e0, t = clamp((px * dx + pe * de) / l2, 0, 1), a = clamp(w * 0.5 - hypot(px - dx * t, pe - de * t) + 0.5, 0, 1);\n      if (a > 0) shade(P, y * W + x, 0, fl, r, g, b, a);\n    }\n}\n\n// Shore, pad, the moon rocket's tower and arms, the sounding rocket's rail.\nfunction pad(P, V, T) {\n  const Ci = P.Ci, sty = P.style, tl = P.lights * 0.5, th = DECK + V.L + 6, tx0 = X0 - 19, tx1 = X0 - 10, buf = P.buf;\n  for (let y = max(0, GY + Ci - 90); y \u003c= min(H - 1, GY + Ci); y++) {\n    const e = GY + Ci - y;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, k = e === 4 ? 0.62 : 0.45, q = 0.2 + ((x * 7 + e * 3) % 5) * 0.012, i = x - tx0, j = e % 9;\n      if (e \u003c= 4 && abs(x + 0.5 - X0) \u003c 11 - e * 1.2) shade(P, p, (x + 0.5 - X0) / 14, tl, k, k, k, 1);\n      else if (e \u003c= P.shore[x]) shade(P, p, 0, 0, q * 0.9, q, q * 0.8, 1);\n      else if (e \u003c= 6) for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] = P.pal[j] * 0.55 + buf[p * 3 + j] * 0.2;\n      // The tower: an X-braced lattice with a hammerhead crane on top.\n      if (sty || e \u003c= 0) continue;\n      if ((i >= 0 && x \u003c= tx1 && e \u003c= th && (i === 0 || i === 9 || j === 0 || i === j || i === 9 - j)) || (e >= th && e \u003c= th + 1 && i >= -2 && x \u003c= X0 + 2) || (e > th + 1 && e \u003c= th + 3 && i >= 2 && i \u003c= 5)) shade(P, p, i / 9 - 0.5, tl, 0.52, 0.54, 0.6, 1);\n      if (e === th + 4 && (i === 3 || x === X0 + 2) && sin(P.clk * 5) > 0) buf.set([255, 40, 30], p * 3);\n    }\n  }\n  // Swing arms to the stage joints and the capsule; the crew arm leaves first.\n  if (sty === 0)\n    V.st.map((s) => s.u + s.len - 1.5).concat([V.L - 11]).forEach((u, i, lv) => {\n      const t0 = i === lv.length - 1 ? -6 : 0.1 + i * 0.25, reach = (X0 - 4.3 - tx1) * (1 - ss(t0, t0 + 1.4, T));\n      if (reach > 0.3) line(P, tx1 + 0.5, DECK + 2.5 + u, tx1 + 0.5 + reach, DECK + 2.5 + u, 1.8, 0.5, 0.52, 0.58, tl);\n    });\n  if (sty === 3) line(P, X0 - 2.2, DECK, X0 - 2.2 + sin(LEAN[3]) * V.L * 0.8, DECK + cos(LEAN[3]) * V.L * 0.8, 1.8, 0.55, 0.55, 0.6, tl);\n}\n\n// Puffs add density, shading, heat, sunlight and whiteness; then the smoke\n// is lit.\nfunction smoke(P) {\n  const { D, spD, spS, buf, G, gc, pa, Ci, pal: c } = P;\n  D.fill(0);\n  for (let i = 0; i \u003c P.np; i++) {\n    const o = i * PF, ag = pa[o + 6], r = max(0.9, min(16, pa[o + 4] + pa[o + 5] * sqrt(ag))), cx = pa[o], cy = GY + Ci - pa[o + 1], life = pa[o + 7];\n    const a = (pa[o + 8] * min(1, ag * 12) * (1 - ss(life * 0.4, life, ag)) * 2) / (1 + r * 0.08);\n    const L = [0, pa[o + 9] * exp(-ag / 0.3), min(1, P.sunI + P.tw * ss(140, 300, pa[o + 1])), pa[o + 10]], k = pa[o + 12] * SP * SP;\n    for (let y = max(0, ceil(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r - 0.5)); y++)\n      for (let x = max(0, ceil(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r - 0.5)); x++) {\n        const sx = floor(((x + 0.5 - cx) / r) * 0.5 * SP + SP / 2), sy = floor(((y + 0.5 - cy) / r) * 0.5 * SP + SP / 2), q = k + sy * SP + sx, d = spD[q] * a;\n        if (sx \u003c 0 || sx >= SP || sy \u003c 0 || sy >= SP || d \u003c= 0.001) continue;\n        const p = (y * W + x) * 5;\n        D[p] += d;\n        D[p + 1] += d * spS[q];\n        for (let j = 1; j \u003c 4; j++) D[p + j + 1] += d * L[j];\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const d = D[p * 5];\n    if (d \u003c 0.004) continue;\n    const sh = D[p * 5 + 1] / d, he = min(1.4, D[p * 5 + 2] / d), sn = (D[p * 5 + 3] / d) * (0.3 + 0.8 * sh) * (0.6 + 0.4 * P.sunI), ab = D[p * 5 + 4] / d;\n    const al = 1 - exp(-1.7 * d), am = 0.5 + 0.55 * sh, fl = P.lights * 75 * exp(-max(0, GY + Ci - ((p / W) | 0)) / 60), g = G[p] * 1.25;\n    for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += (ab * (c[12 + j] * am + c[15 + j] * sn + fl + g * gc[j]) + he * gc[j] * 0.9 - buf[p * 3 + j]) * al;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, V = vehicle(P), T = P.T, buf = P.buf, c = P.pal, G = P.G;\n  const F = fly(P, V, T), Ci = (P.Ci = round(camera(V, T, F))), s = F.s, sa = sin(F.a), ca = cos(F.a), fu = FUEL[F.fuel];\n  P.side = clamp((c[22] - X0) / 25, -1, 1);\n  P.sunK = P.sunI + P.tw * 0.7 * ss(60, 260, F.E);\n  // The engines' glow.\n  const uo = V.st[F.ai].u, uN = uo - V.st[F.ai].bell[0], nx = F.x + sa * uN * s, ny = GY + Ci - F.e - ca * uN * s, gx = nx - sa * F.Lf * s * 0.4, gy = ny + ca * F.Lf * s * 0.4;\n  const flick = 0.85 + 0.15 * sin(P.clk * 31) * sin(P.clk * 17.3 + 1), near = 1 - ss(10, 60, F.E);\n  const gr = ((6 + 8 * F.wn * s) * (1 + 1.6 * near)) ** 2, gi = F.f * flick * (F.fuel === 1 ? 0.35 : 1) * (0.55 + 0.6 * near) * (F.ai ? 1 : 0.5 + 0.25 * P.n) * (0.7 + 0.5 * P.night);\n  P.gc = fu[3];\n  for (let p = 0; p \u003c N; p++) G[p] = gi > 0.01 ? (gi * gr) / (gr + ((p % W) + 0.5 - gx) ** 2 + (((p / W) | 0) + 0.5 - gy) ** 2) : 0;\n  sky(P);\n  pad(P, V, T);\n  // Spent stages fall behind and tumble.\n  V.sep.forEach((ts, i) => {\n    const dt = T - ts, S0 = fly(P, V, ts), u = V.st[i].u * S0.s;\n    if (dt > 0 && dt \u003c 5) body(P, { ...stack(V, i, i + 1), x: S0.x + sin(S0.a) * u + 2 * dt, y: GY + Ci - S0.e - cos(S0.a) * u - ((fly(P, V, ts + 0.05).E - S0.E) / 0.05) * 1.1 * (1 - exp(-dt / 1.1)), ang: S0.a + 0.45 * dt, sc: S0.s / (1 + 0.06 * dt), al: 1 - ss(3, 5, dt), E: 300 });\n  });\n  if (V.boost) boosters(P, V, T, F, [-1, 1]);\n  // The rocket from its lowest burning stage up.\n  body(P, { ...stack(V, F.ai, V.n), x: F.x + sa * uo * s, y: GY + Ci - F.e - ca * uo * s, ang: F.a, sc: s, al: 1, E: F.E, q: ss(6.2, 6.7, T) * (1 - ss(7.6, 8.3, T)), uq: (V.L - uo) * 0.5, flame: { wn: F.wn, Lf: max(0.01, F.Lf * flick), k: F.k, f: F.f, fuel: F.fuel } });\n  if (V.boost) boosters(P, V, T, F, [0]);\n  // Far off, the flame is a bright point.\n  if (s * F.wn \u003c 1.4 && F.f > 0.05)\n    for (let p = 0; p \u003c N; p++) {\n      const a = 1.1 * F.f * exp(-(((p % W) + 0.5 - nx) ** 2 + (((p / W) | 0) + 0.5 - ny) ** 2) / (0.9 + 0.5 * s * F.wn) ** 2);\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += fu[1][j] * a;\n    }\n  smoke(P);\n  // The water in front mirrors everything above the shoreline.\n  for (let y = max(0, GY + Ci); y \u003c H; y++) {\n    const sy = clamp(2 * (GY + Ci) - 1 - y, 0, H - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, so = (sy * W + x) * 3, rp = 0.5 + 0.1 * sin(y * 2.1 + x * 0.3 - P.clk * 3);\n      for (let k = 0; k \u003c 3; k++) buf[o + k] = buf[so + k] * rp + c[k] * 0.12 + G[y * W + x] * P.gc[k] * 0.25;\n    }\n  }\n  // The clock.\n  const tc = T \u003c 0 ? ceil(-T) : floor(T);\n  [10, T \u003c 0 ? 11 : 12, floor(tc / 10) % 10, tc % 10].forEach((ch, i) => {\n    for (let r = 0; r \u003c 15; r++) if ((FONT[ch] >> (14 - r)) & 1) buf.set([255, 196, 70], ((2 + floor(r / 3)) * W + 2 + i * 4 + (r % 3)) * 3);\n  });\n  const fade = ss(-10, -9.3, T) * (1 - ss(23.8, 25, T));\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o] * fade), min(255, buf[o + 1] * fade), min(255, buf[o + 2] * fade));\n}\n","layer":{"id":"layer-liftoff","type":"code","name":"liftoff","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Liftoff\n// Family:  flight\n// Idea:    A rocket vents on its pad across the water, lights up in rolling steam and climbs while the camera tilts after it from blue sky into black and stars, through Max-Q and staging, until it is a bright dot and the next rocket stands on the pad.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after long-lens tracking shots of launches filmed across the water from the press site\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Rocket=0..3, Speed=0.2..3, Stages=1..3, Time=0..1\n//\n// Knob 1: Rocket. A white moon rocket by its tower at 0, a chequered V-2 at 1, a grey-green cluster whose boosters fall away in a cross at 2, a sounding rocket on a rail at 3.\n// Knob 2: Speed. At 2 the countdown, the flight and the next rocket take 35 s; at 0.2 ten times longer.\n// Knob 3: Stages. 1 to 3 stages. A taller stack gets a taller tower and more steam, and each extra stage drops away on the climb.\n// Knob 4: Time. Dawn at 0, then day, dusk and a floodlit night with searchlights. At dawn and dusk the high plume catches the sun.\n// Buttons: K1 tap skips the countdown to ignition, or after liftoff rolls out the next rocket.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Shoreline row with the camera level, pad column, deck height.\nconst GY = 112;\nconst X0 = 36;\nconst DECK = 4;\nconst MAXP = 900;\n// A puff: x, height, vx, vz, radius, growth, age, life, opacity, heat,\n// whiteness, drag, sprite.\nconst PF = 13;\nconst SP = 24;\nconst { min, max, abs, sin, cos, exp, sqrt, floor, round, ceil, atan2, hypot } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ss = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Dawn, day, dusk, night: four sky colours, ambient, sun colour; sun on the\n// rocket, on the high plume, floodlights, stars, sun column, height, radius.\nconst PAL = [\n  [255, 150, 90, 200, 135, 150, 80, 105, 190, 22, 36, 110, 80, 88, 125, 255, 175, 120, 0.3, 1, 0.75, 0.15, 56, 0, 3.5],\n  [200, 222, 245, 140, 190, 240, 55, 135, 230, 15, 55, 165, 175, 185, 200, 255, 250, 235, 1, 0, 0, 0, 12, 190, 3.5],\n  [255, 115, 55, 185, 85, 115, 70, 55, 140, 18, 18, 70, 95, 72, 100, 255, 135, 75, 0.35, 1, 0.6, 0.3, 8, 3, 4],\n  [22, 34, 62, 14, 22, 50, 7, 12, 34, 3, 5, 16, 30, 34, 55, 0, 0, 0, 0, 0.1, 1, 1, 30, -40, 0],\n];\n// Kerosene, hydrogen, solid: flame core, middle, edge, glow; trail\n// whiteness and thickness.\nconst FUEL = [\n  [[255, 246, 215], [255, 196, 80], [235, 105, 30], [255, 140, 55], 0.62, 0.75],\n  [[235, 240, 255], [170, 180, 255], [120, 110, 230], [130, 150, 255], 0.95, 0.22],\n  [[255, 252, 240], [255, 225, 150], [250, 160, 70], [255, 190, 120], 0.95, 0.95],\n];\nconst ACC = [1, 1.15, 1.05, 1.7];\nconst LEAN = [0, 0, 0, 0.12];\nconst STEAM = [1, 0.55, 0.9, 0.35];\nconst IGN = [-2, -1.6, -2.2, -0.12];\n// White, black, engine bells, bare metal, grey-green, orange.\nconst PAINT = [[0.9, 0.9, 0.88], [0.08, 0.08, 0.08], [0.24, 0.21, 0.2], [0.66, 0.69, 0.74], [0.62, 0.67, 0.58], [0.95, 0.42, 0.12]];\n// 3x5 letters: 0-9, T, minus, plus.\nconst FONT = [31599, 11415, 29671, 29647, 23497, 31183, 31215, 29330, 31727, 31695, 29842, 448, 1488];\nconst BEAMS = [[3, 0.32], [62, -0.3], [22, 0.06]].map(([b, a]) => [b, sin(a), cos(a)]);\nconst BOOST = [[-1.4, 0, 1.9, 1.4, 2, 0], [0, 1, 2.1, 2.05, 1, 0], [1, 13, 2.05, 1.1, 10, 0], [13, 18, 1.1, 0, 10, 0]];\n\n// Stages from the bottom: length, segments [u0, u1, half widths, paint],\n// bell [length, half widths], nozzle, fuel, fins [u0, u1, span, paint].\nfunction build(sty, n) {\n  const S = (len, segs, bell, wn, fuel, fins = []) => ({ len, segs, bell, wn, fuel, fins });\n  const a = 20 + (3 - n) * 2.5, b = n > 1 ? 26 : 29;\n  const st = [\n    [S(a, [[0, a, 4.5, 4.5, 6]], [2.5, 4.4, 3.4], 4.3, 0, [[0, 5, 2.4, 1]]), S(13, [[0, 1, 4.5, 4.5, 1], [1, 13, 4.5, 4.5, 0]], [1.5, 3, 2.2], 3, 1), S(10, [[0, 3, 4.5, 3.3, 0], [3, 10, 3.3, 3.3, 7]], [1.2, 1.8, 1.2], 1.6, 1)],\n    [S(b, [[0, 20, 3.2, 3.4, 8], [20, b, 3.4, n > 1 ? 1.4 : 0, 8]], [1.5, 2.4, 1.8], 2.2, 0, [[0, 7, 3.4, 8]]), S(12, [[0, 12, 1.4, 1.4, 0]], [0.8, 1.1, 0.8], 1, 2, [[0, 3, 1.7, 1]]), S(8, [[0, 8, 1.1, 1.1, 9]], [0.7, 0.9, 0.6], 0.8, 2, [[0, 2.5, 1.2, 5]])],\n    [S(28, [[0, 26, 2.2, 2.8, 10], [26, 28, 2.8, 2.5, 10]], [1.5, 2.2, 1.6], 2.2, 0), S(10, [[0, 2, 2.4, 2.4, 11], [2, 10, 2.6, 2.6, 10]], [1.2, 1.8, 1.2], 1.6, 0), S(4, [[0, 4, 2.6, 2.6, 3]], [0.8, 1.2, 0.8], 1, 1)],\n    [S(15, [[0, 15, 1.7, 1.7, 9]], [1, 1.4, 1.1], 1.4, 2, [[0, 4.5, 2.6, 5]]), S(12, [[0, 1.5, 1.7, 1.3, 1], [1.5, 12, 1.3, 1.3, 9]], [0.8, 1.1, 0.8], 1.1, 2, [[1.5, 4, 1.7, 5]]), S(9, [[0, 9, 1.1, 1.1, 9]], [0.6, 0.9, 0.6], 0.8, 2, [[0, 2.5, 1.2, 5]])],\n  ][sty].slice(0, n);\n  const last = st[n - 1], top = last.segs.at(-1)[3];\n  last.nose = sty === 0 ? [[0, 4, top, 2.6, 3], [4, 7, 2.6, 0.7, 0], [7, 11, 0.45, 0.45, 5], [11, 13, 0.9, 0.9, 5], [13, 14, 0.9, 0.1, 5]] : sty === 2 ? [[0, 5, 3.2, 3.2, 0], [5, 9, 3.2, 1.4, 0], [9, 10, 1.4, 0.5, 0], [10, 14, 0.4, 0.4, 5], [14, 16, 0.8, 0.8, 5], [16, 17, 0.8, 0, 5]] : top > 0 ? [[0, sty === 3 ? 6 : 4, top, 0, 0]] : [];\n  let u = 0;\n  for (const s of st) [s.u, u] = [u, u + s.len];\n  return { st, n, L: u + (last.nose.length && last.nose.at(-1)[1]), sep: st.slice(1).map((_, i) => (sty === 2 ? 11.5 + i * 4.5 : 9.5 + i * 5)), boost: sty === 2 };\n}\n\n// Stages a..b-1 end to end from 0, with stage a's bell below.\nfunction stack(V, a, b) {\n  const segs = [], fins = [], u0 = V.st[a].u, bl = V.st[a].bell;\n  segs.push([-bl[0], 0, bl[1], bl[2], 2, 0]);\n  for (let i = a; i \u003c b; i++) {\n    const s = V.st[i], o = s.u - u0, t = o + s.len;\n    for (const g of s.segs) segs.push([g[0] + o, g[1] + o, g[2], g[3], g[4], o]);\n    for (const f of s.fins) fins.push([f[0] + o, f[1] + o, f[2], f[3], o]);\n    if (s.nose) for (const g of s.nose) segs.push([g[0] + t, g[1] + t, g[2], g[3], g[4], t]);\n  }\n  return { segs, fins };\n}\n\nconst vehicle = (P) => P.vc[P.style * 4 + P.n] || (P.vc[P.style * 4 + P.n] = build(P.style, P.n));\n\n// The stack's foot at flight time T, and its engines.\nfunction fly(P, V, T) {\n  const sty = P.style, t = max(0, T), g = ACC[sty], E = g * 512 * (1 - exp((-t * t) / 128));\n  let ai = 0, f = ss(IGN[sty], IGN[sty] + 0.6, T);\n  for (const ts of V.sep) {\n    if (T >= ts) ai++;\n    f *= 1 - ss(ts - 0.3, ts, T) + ss(ts + 0.7, ts + 1.1, T);\n  }\n  const bo = V.boost && T \u003c 7.5, S = V.st[ai], wn = bo ? 6.2 : S.wn;\n  return { E, ai, f, wn, s: 1 / (1 + 0.001 * g * t * t * t), a: LEAN[sty] + 0.2 * ss(3, 16, t), x: X0 + 6 * ss(3, 20, t) + (sty === 3 ? 0.12 * min(E, 70) : 0), e: DECK + V.st[0].bell[0] + E, Lf: wn * (S.fuel === 2 ? 4.2 : 3.2) * (1 + E / 260) * f, k: 0.12 + min(0.9, E / 500) * (S.fuel === 1 ? 1.4 : 1), fuel: bo ? 0 : S.fuel };\n}\n\n// The camera's tilt in rows keeps the nose near the top, then lets the\n// shrinking rocket climb.\nfunction camera(V, T, F) {\n  const d = F.E - (GY - DECK - V.st[0].bell[0] - V.L * F.s - 15 + 9 * ss(12, 23, T)), h = max(14 - abs(d), 0) / 14;\n  return max(0, d) + h * h * 3.5;\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), G: F(N), D: F(N * 5), pa: F(MAXP * PF), spD: F(4 * SP * SP), spS: F(4 * SP * SP), vc: {}, started: false, T: -4.3, np: 0, clk: 0, pt: null });\n  // Lumpy puffs lit from above.\n  for (let q = 0; q \u003c 4 * SP * SP; q++) {\n    const k = floor(q / (SP * SP)), dx = (((q % SP) + 0.5) / SP) * 2 - 1, dy = (((floor(q / SP) % SP) + 0.5) / SP) * 2 - 1;\n    const d = hypot(dx, dy), an = atan2(dy, dx), edge = 0.8 + 0.1 * sin(5 * an + k * 1.7) + 0.07 * sin(9 * an + k * 2.9) + 0.04 * sin(13 * an + k);\n    P.spD[q] = ss(edge, edge - 0.45, d) * (0.78 + 0.22 * sin(dx * 7 + k) * sin(dy * 6 + k * 2));\n    P.spS[q] = clamp(0.55 - 0.55 * dy + 0.12 * dx + (d > edge - 0.2 && dy \u003c 0 ? 0.25 : 0), 0, 1);\n  }\n  P.stars = Array.from({ length: 240 }, () => [floor(rnd() * W), 30 + rnd() * 620, 0.25 + 0.75 * rnd() ** 3]);\n  P.shore = Array.from({ length: W }, (_, x) => 3 + 1.2 * sin(x * 0.7) * sin(x * 0.23 + 1) + (x % 11 \u003c 3 ? 1.8 : 0) + (x > 52 ? 1.2 : 0));\n}\n\nfunction newRocket(P, T) {\n  [P.T, P.np, P.pt] = [T, 0, null];\n}\n\nfunction emit(P, ...v) {\n  if (P.np \u003c MAXP) P.pa.set([...v.slice(0, 6), 0, ...v.slice(6), floor(rnd() * 4)], P.np++ * PF);\n}\n\nfunction times(n, fn) {\n  for (let c = n; c > 0 && (c >= 1 || rnd() \u003c c); c--) fn();\n}\n\nfunction step(P, h) {\n  P.T += h;\n  if (P.T > 25) return newRocket(P, -10);\n  const T = P.T, V = vehicle(P), sty = P.style, F = fly(P, V, T), C = camera(V, T, F), s = F.s, sa = sin(F.a), ca = cos(F.a);\n  // Before ignition liquid oxygen boils off and falls down the tanks.\n  if (T \u003c IGN[sty] + 0.4 && sty !== 3)\n    for (const S of V.st)\n      times(S.fuel === 2 ? 0 : h * 34, () => {\n        const sd = rnd() \u003c 0.6 ? 1 : -1;\n        emit(P, F.x + sd * (S.segs.at(-1)[3] - 0.3), F.e + S.u + S.len * (0.35 + 0.6 * rnd()), sd * (0.8 + 2.5 * rnd()), -3 - 5 * rnd(), 0.6, 1.5, 1.4 + rnd(), 0.2, 0, 0.95, 0.4);\n      });\n  if (F.f > 0.02) {\n    const uN = V.st[F.ai].u - V.st[F.ai].bell[0], tl = F.Lf * s * 0.85, tx = F.x + sa * (uN * s - tl), tz = F.e + ca * (uN * s - tl), fu = FUEL[F.fuel];\n    // Steam rolls out of the trench both ways and up round the rocket.\n    if (tz \u003c 24 && F.E \u003c 40)\n      times(55 * STEAM[sty] * (0.25 + 0.35 * P.n) * F.f * (1 - F.E / 40) * h, () => {\n        const sd = rnd() \u003c 0.5 ? -1 : 1;\n        if (rnd() \u003c 0.72) emit(P, X0 + sd * (8 + 2 * rnd()), 1 + rnd() * 2, sd * (18 + 34 * rnd()) * (0.6 + 0.4 * F.f), 3 + 9 * rnd(), 2.2, 3.6 + 2 * rnd(), 16, 0.5, 0.7, 0.95, 0.55);\n        else emit(P, X0 + sd * rnd() * 7, DECK + rnd() * 3, sd * 4 * rnd(), 10 + 16 * rnd(), 2, 2.8, 12, 0.45, 0.9, 0.95, 0.9);\n      });\n    // The trail, laid along the path since the last step.\n    if (T > 0 && tz > DECK + 6) {\n      const [px, pz] = P.pt || [tx, tz], r0 = max(0.6, F.wn * s * 1.05), hi = P.tw * ss(140, 300, tz);\n      const cnt = min(14, ceil(max(hypot(tx - px, tz - pz) / max(0.6, r0 * 0.6), h * 24)));\n      for (let j = 1; j \u003c= cnt; j++) emit(P, px + ((tx - px) * j) / cnt + (rnd() - 0.5) * r0, pz + ((tz - pz) * j) / cnt, (rnd() - 0.5) * 2 * s, -1.5 * s, r0, (1.1 + 1.8 * hi) * sqrt(s + 0.08) * 2, 30, fu[5] * (0.75 + 0.25 * rnd()) * (1 - 0.4 * hi), 1, fu[4], 0.05);\n      P.pt = [tx, tz];\n    }\n  } else P.pt = null;\n  // Puffs spread, rise and thin, and go once below the panel.\n  const pa = P.pa;\n  for (let i = 0; i \u003c P.np; i++) {\n    const o = i * PF, dr = exp(-pa[o + 11] * h);\n    pa[o + 6] += h;\n    pa[o + 2] *= dr;\n    pa[o + 3] = pa[o + 3] * dr + (pa[o + 11] > 0.3 ? 2 * h : 0);\n    pa[o] += (pa[o + 2] + 1.2 + pa[o + 1] * 0.012) * h;\n    pa[o + 1] += pa[o + 3] * h;\n    if (pa[o + 6] > pa[o + 7] || GY + C - pa[o + 1] - pa[o + 4] - pa[o + 5] * sqrt(pa[o + 6]) > 130 || abs(pa[o] - 32) > 62) {\n      pa.copyWithin(o, --P.np * PF, P.np * PF + PF);\n      i--;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.style = clamp(round(k[0]), 0, 3);\n  P.n = clamp(round(k[2]), 1, 3);\n  P.tod = clamp(k[3], 0, 1);\n  // The hour's colours; the sun lingers low at dawn and dusk.\n  const f = P.tod * 3, i = min(2, floor(f)), q = f - i, A = PAL[i], B = PAL[i + 1];\n  P.pal = A.map((v, j) => v + (B[j] - v) * q);\n  P.se = A[23] + (B[23] - A[23]) * (i === 0 ? q * q : i === 1 ? 1 - (1 - q) ** 2 : q);\n  [P.sunI, P.tw, P.lights, P.night] = [P.pal[18], P.pal[19], P.pal[20], ss(0.67, 1, P.tod)];\n  if (!P.started) {\n    P.started = true;\n    // Open 2.3 s before liftoff, with the tanks already venting.\n    for (let j = 0; j \u003c 20; j++) step(P, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.T \u003c IGN[P.style] - 0.3) P.T = IGN[P.style] - 0.3;\n    else if (P.T > 2) newRocket(P, -3);\n  }\n  P.clk += dt;\n  step(P, (dt * clamp(k[1], 0.2, 3)) / 2);\n}\n\n// Lights a surface facing vn across a cylinder, laid over the LED.\nfunction shade(P, p, vn, fl, r, g, b, a) {\n  const c = P.pal, o = p * 3, buf = P.buf, sn = P.sunK * max(0, 0.25 + 0.75 * vn * P.side), am = 1 - 0.28 * vn * vn, fr = 235 * fl * (1 - 0.35 * vn * vn);\n  [r, g, b].forEach((k, j) => (buf[o + j] += (k * (c[12 + j] * am + c[15 + j] * sn + fr + P.G[p] * P.gc[j]) - buf[o + j]) * a));\n}\n\n// Patterned paints: moon rocket stages 1 and 3, V-2 quarters, bands,\n// grey-green, truss.\nfunction albedo(c, u, vn) {\n  if (c === 6) c = (u > 0.5 && u \u003c 7 && vn > -0.1 && vn \u003c 0.5) || (u > 15.5 && u \u003c 17) ? 1 : 0;\n  else if (c === 7) c = u > 5 && u \u003c 8.5 && vn > 0.05 ? 1 : 0;\n  else if (c === 8) c = (floor(u / 6.5) + (vn > 0)) & 1;\n  else if (c === 9) c = u % 7 \u003c 1.4 ? 5 : 0;\n  else if (c > 9) c = c === 10 ? 4 : (floor(u * 1.5) + floor((vn + 1) * 2.5)) & 1 ? 1 : 3;\n  return PAINT[c];\n}\n\n// One body from its foot at (b.x, b.y), leaning b.ang, at scale b.sc.\nfunction body(P, b) {\n  const sa = sin(b.ang), ca = cos(b.ang), sc = b.sc, fl = b.flame, buf = P.buf;\n  let u0 = 0, u1 = 0, hm = 0;\n  for (const g of b.segs) [u0, u1, hm] = [min(u0, g[0]), max(u1, g[1]), max(hm, g[2], g[3])];\n  hm += b.fins.length ? 3.5 : 0;\n  const fu = u0;\n  if (fl) [u0, hm] = [u0 - fl.Lf * 3.2, max(hm + 5, fl.wn + (fl.k + 0.12) * fl.Lf * 3.2 + 1)];\n  const m = (u0 + u1) / 2, cx = b.x + m * sa * sc, cy = b.y - m * ca * sc, R = hypot((u1 - u0) / 2, hm) * sc + 2;\n  const fc = fl && FUEL[fl.fuel], flood = P.lights * 0.9 * exp(-b.E / 45);\n  for (let y = max(0, floor(cy - R)); y \u003c= min(H - 1, ceil(cy + R)); y++)\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const dx = x + 0.5 - b.x, dy = b.y - (y + 0.5), p = y * W + x;\n      const u = (dx * sa + dy * ca) / sc, v = (dx * ca - dy * sa) / sc, av = abs(v);\n      let seg = null;\n      for (const g of b.segs) if (u >= g[0] && u \u003c g[1]) seg = g;\n      if (seg) {\n        const hw = seg[2] + ((seg[3] - seg[2]) * (u - seg[0])) / (seg[1] - seg[0]);\n        let cov = clamp((hw - av) * sc + 0.5, 0, 1), vn = clamp(v / max(0.3, hw), -1, 1), c = seg[4], uu = u - seg[5];\n        if (cov \u003c= 0)\n          for (const f of b.fins)\n            if (u >= f[0] && u \u003c f[1]) {\n              const cf = clamp((hw + f[2] * (1 - (u - f[0]) / (f[1] - f[0])) - av) * sc + 0.5, 0, 1);\n              if (cf > cov) [cov, vn, c, uu] = [cf, v > 0 ? 0.6 : -0.6, f[3], u - f[4]];\n            }\n        const A = albedo(c, uu, vn), hc = hw + 0.6 + (b.uq + 0.5 - u) * 0.6;\n        if (cov > 0) shade(P, p, vn, flood, A[0], A[1], A[2], cov * b.al);\n        // Max-Q: a collar of condensation round the body.\n        else if (b.q > 0 && u > b.uq - 7 && u \u003c b.uq + 0.5 && av \u003c hc) shade(P, p, v / hc, 0.4, 1, 1, 1, b.q * 0.95 * ss(0, 1.2, b.uq + 0.5 - u) * (1 - (av / hc) ** 3) * (0.75 + 0.25 * sin(u * 3 + P.clk * 40)));\n        continue;\n      }\n      // The flame, clipped where it meets the deck.\n      if (!fl || u >= fu || GY + P.Ci - y - 0.5 \u003c DECK + 0.5) continue;\n      const ue = fu - u, q = av / (fl.wn * 0.85 + (fl.k + 0.12) * ue);\n      if (q >= 1.2) continue;\n      const I = (exp(-ue / fl.Lf) * max(0, 1 - q * q) * (fl.fuel === 0 && b.E \u003c 140 ? 0.8 + 0.3 * cos((ue * 2.4) / fl.wn) : 1) * fl.f) / (1 + fl.k * 1.2);\n      const core = exp(-ue / (fl.Lf * 0.35)) * max(0, 1 - q * 1.7) * fl.f;\n      const tt = min(1, I * 0.9 + core) * 2, br = min(1.2, I * 1.7 + core), A = fc[tt \u003c 1 ? 2 : 1], B = fc[tt \u003c 1 ? 1 : 0], w = tt \u003c 1 ? tt : tt - 1;\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += (A[j] + (B[j] - A[j]) * w) * br;\n    }\n}\n\n// The cluster's boosters; at 7.5 s the side ones pivot out and fall.\nfunction boosters(P, V, T, F, sides) {\n  const dt = T - 7.5, sep = dt > 0, S0 = sep ? fly(P, V, 7.5) : F;\n  if (dt > 5) return;\n  const drop = sep ? ((fly(P, V, 7.55).E - S0.E) / 0.05) * 1.1 * (1 - exp(-dt / 1.1)) : 0;\n  for (const sd of sides) {\n    const off = sd * 3.7 * S0.s;\n    body(P, { segs: BOOST, fins: [], x: S0.x + cos(S0.a) * off + (sep ? sd * 2 * dt : 0), y: GY + P.Ci - S0.e - drop + sin(S0.a) * off, ang: S0.a + sd * (sep ? 0.35 + 0.9 * dt : -0.05), sc: S0.s / (1 + (sep ? 0.06 * dt : 0)), al: 1 - ss(3, 5, max(0, dt)), E: sep ? 300 : F.E });\n  }\n}\n\nfunction sky(P) {\n  const c = P.pal, buf = P.buf, Ci = P.Ci, sx = c[22], se = P.se, sr = c[24], sunA = 1 - P.night, sk = [0, 0, 0], bi = P.lights * (0.25 + 0.75 * P.night) * 55;\n  for (let y = 0; y \u003c H; y++) {\n    const a = GY + Ci - y - 6, e = a + 6, gl = sunA * 0.55 * exp(-abs(e - se) / 26);\n    const [A, B, q] = a \u003c 22 ? [0, 3, max(0, a) / 22] : a \u003c 100 ? [3, 6, (a - 22) / 78] : a \u003c 240 ? [6, 9, (a - 100) / 140] : [9, -1, min(1, (a - 240) / 180)];\n    for (let j = 0; j \u003c 3; j++) sk[j] = c[A + j] + ((B \u003c 0 ? 0 : c[B + j]) - c[A + j]) * q;\n    // The sun's glow and disc, and searchlights from the pad.\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, dx = x + 0.5 - sx, g = gl * exp(-(dx * dx) / 420), disc = sr > 0 ? sunA * clamp(sr - hypot(dx, e - se) + 0.5, 0, 1) : 0;\n      let v = 0;\n      if (bi > 1 && e > 0)\n        for (const [bx, sn, cs] of BEAMS) {\n          const d = x + 0.5 - bx, al = d * sn + e * cs, pp = d * cs - e * sn, w = 1.2 + al * 0.035;\n          v += (bi * exp(-(pp * pp) / (w * w))) / (1 + al / 160);\n        }\n      for (let j = 0; j \u003c 3; j++) buf[o + j] = sk[j] + c[15 + j] * g + (c[15 + j] * 0.8 + 50) * disc + v * [0.75, 0.82, 1][j];\n    }\n  }\n  // Stars come out as the sky darkens.\n  P.stars.forEach(([x, e, m], i) => {\n    const y = GY + Ci - floor(e), v = m * (c[21] + (1 - c[21]) * ss(250, 420, e)) * (0.8 + 0.2 * sin(P.clk * 3 + i)) * 235, o = (y * W + x) * 3;\n    if (y >= 0 && y \u003c H) for (let j = 0; j \u003c 3; j++) buf[o + j] += v * (j > 1 ? 1 : 0.9);\n  });\n}\n\n// A lit beam between two points, in rows above the shoreline.\nfunction line(P, x0, e0, x1, e1, w, r, g, b, fl) {\n  const Ci = P.Ci, dx = x1 - x0, de = e1 - e0, l2 = dx * dx + de * de || 1;\n  for (let y = max(0, floor(GY + Ci - max(e0, e1) - w)); y \u003c= min(H - 1, ceil(GY + Ci - min(e0, e1) + w)); y++)\n    for (let x = max(0, floor(min(x0, x1) - w)); x \u003c= min(W - 1, ceil(max(x0, x1) + w)); x++) {\n      const px = x + 0.5 - x0, pe = GY + Ci - y - 0.5 - e0, t = clamp((px * dx + pe * de) / l2, 0, 1), a = clamp(w * 0.5 - hypot(px - dx * t, pe - de * t) + 0.5, 0, 1);\n      if (a > 0) shade(P, y * W + x, 0, fl, r, g, b, a);\n    }\n}\n\n// Shore, pad, the moon rocket's tower and arms, the sounding rocket's rail.\nfunction pad(P, V, T) {\n  const Ci = P.Ci, sty = P.style, tl = P.lights * 0.5, th = DECK + V.L + 6, tx0 = X0 - 19, tx1 = X0 - 10, buf = P.buf;\n  for (let y = max(0, GY + Ci - 90); y \u003c= min(H - 1, GY + Ci); y++) {\n    const e = GY + Ci - y;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, k = e === 4 ? 0.62 : 0.45, q = 0.2 + ((x * 7 + e * 3) % 5) * 0.012, i = x - tx0, j = e % 9;\n      if (e \u003c= 4 && abs(x + 0.5 - X0) \u003c 11 - e * 1.2) shade(P, p, (x + 0.5 - X0) / 14, tl, k, k, k, 1);\n      else if (e \u003c= P.shore[x]) shade(P, p, 0, 0, q * 0.9, q, q * 0.8, 1);\n      else if (e \u003c= 6) for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] = P.pal[j] * 0.55 + buf[p * 3 + j] * 0.2;\n      // The tower: an X-braced lattice with a hammerhead crane on top.\n      if (sty || e \u003c= 0) continue;\n      if ((i >= 0 && x \u003c= tx1 && e \u003c= th && (i === 0 || i === 9 || j === 0 || i === j || i === 9 - j)) || (e >= th && e \u003c= th + 1 && i >= -2 && x \u003c= X0 + 2) || (e > th + 1 && e \u003c= th + 3 && i >= 2 && i \u003c= 5)) shade(P, p, i / 9 - 0.5, tl, 0.52, 0.54, 0.6, 1);\n      if (e === th + 4 && (i === 3 || x === X0 + 2) && sin(P.clk * 5) > 0) buf.set([255, 40, 30], p * 3);\n    }\n  }\n  // Swing arms to the stage joints and the capsule; the crew arm leaves first.\n  if (sty === 0)\n    V.st.map((s) => s.u + s.len - 1.5).concat([V.L - 11]).forEach((u, i, lv) => {\n      const t0 = i === lv.length - 1 ? -6 : 0.1 + i * 0.25, reach = (X0 - 4.3 - tx1) * (1 - ss(t0, t0 + 1.4, T));\n      if (reach > 0.3) line(P, tx1 + 0.5, DECK + 2.5 + u, tx1 + 0.5 + reach, DECK + 2.5 + u, 1.8, 0.5, 0.52, 0.58, tl);\n    });\n  if (sty === 3) line(P, X0 - 2.2, DECK, X0 - 2.2 + sin(LEAN[3]) * V.L * 0.8, DECK + cos(LEAN[3]) * V.L * 0.8, 1.8, 0.55, 0.55, 0.6, tl);\n}\n\n// Puffs add density, shading, heat, sunlight and whiteness; then the smoke\n// is lit.\nfunction smoke(P) {\n  const { D, spD, spS, buf, G, gc, pa, Ci, pal: c } = P;\n  D.fill(0);\n  for (let i = 0; i \u003c P.np; i++) {\n    const o = i * PF, ag = pa[o + 6], r = max(0.9, min(16, pa[o + 4] + pa[o + 5] * sqrt(ag))), cx = pa[o], cy = GY + Ci - pa[o + 1], life = pa[o + 7];\n    const a = (pa[o + 8] * min(1, ag * 12) * (1 - ss(life * 0.4, life, ag)) * 2) / (1 + r * 0.08);\n    const L = [0, pa[o + 9] * exp(-ag / 0.3), min(1, P.sunI + P.tw * ss(140, 300, pa[o + 1])), pa[o + 10]], k = pa[o + 12] * SP * SP;\n    for (let y = max(0, ceil(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r - 0.5)); y++)\n      for (let x = max(0, ceil(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r - 0.5)); x++) {\n        const sx = floor(((x + 0.5 - cx) / r) * 0.5 * SP + SP / 2), sy = floor(((y + 0.5 - cy) / r) * 0.5 * SP + SP / 2), q = k + sy * SP + sx, d = spD[q] * a;\n        if (sx \u003c 0 || sx >= SP || sy \u003c 0 || sy >= SP || d \u003c= 0.001) continue;\n        const p = (y * W + x) * 5;\n        D[p] += d;\n        D[p + 1] += d * spS[q];\n        for (let j = 1; j \u003c 4; j++) D[p + j + 1] += d * L[j];\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const d = D[p * 5];\n    if (d \u003c 0.004) continue;\n    const sh = D[p * 5 + 1] / d, he = min(1.4, D[p * 5 + 2] / d), sn = (D[p * 5 + 3] / d) * (0.3 + 0.8 * sh) * (0.6 + 0.4 * P.sunI), ab = D[p * 5 + 4] / d;\n    const al = 1 - exp(-1.7 * d), am = 0.5 + 0.55 * sh, fl = P.lights * 75 * exp(-max(0, GY + Ci - ((p / W) | 0)) / 60), g = G[p] * 1.25;\n    for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += (ab * (c[12 + j] * am + c[15 + j] * sn + fl + g * gc[j]) + he * gc[j] * 0.9 - buf[p * 3 + j]) * al;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, V = vehicle(P), T = P.T, buf = P.buf, c = P.pal, G = P.G;\n  const F = fly(P, V, T), Ci = (P.Ci = round(camera(V, T, F))), s = F.s, sa = sin(F.a), ca = cos(F.a), fu = FUEL[F.fuel];\n  P.side = clamp((c[22] - X0) / 25, -1, 1);\n  P.sunK = P.sunI + P.tw * 0.7 * ss(60, 260, F.E);\n  // The engines' glow.\n  const uo = V.st[F.ai].u, uN = uo - V.st[F.ai].bell[0], nx = F.x + sa * uN * s, ny = GY + Ci - F.e - ca * uN * s, gx = nx - sa * F.Lf * s * 0.4, gy = ny + ca * F.Lf * s * 0.4;\n  const flick = 0.85 + 0.15 * sin(P.clk * 31) * sin(P.clk * 17.3 + 1), near = 1 - ss(10, 60, F.E);\n  const gr = ((6 + 8 * F.wn * s) * (1 + 1.6 * near)) ** 2, gi = F.f * flick * (F.fuel === 1 ? 0.35 : 1) * (0.55 + 0.6 * near) * (F.ai ? 1 : 0.5 + 0.25 * P.n) * (0.7 + 0.5 * P.night);\n  P.gc = fu[3];\n  for (let p = 0; p \u003c N; p++) G[p] = gi > 0.01 ? (gi * gr) / (gr + ((p % W) + 0.5 - gx) ** 2 + (((p / W) | 0) + 0.5 - gy) ** 2) : 0;\n  sky(P);\n  pad(P, V, T);\n  // Spent stages fall behind and tumble.\n  V.sep.forEach((ts, i) => {\n    const dt = T - ts, S0 = fly(P, V, ts), u = V.st[i].u * S0.s;\n    if (dt > 0 && dt \u003c 5) body(P, { ...stack(V, i, i + 1), x: S0.x + sin(S0.a) * u + 2 * dt, y: GY + Ci - S0.e - cos(S0.a) * u - ((fly(P, V, ts + 0.05).E - S0.E) / 0.05) * 1.1 * (1 - exp(-dt / 1.1)), ang: S0.a + 0.45 * dt, sc: S0.s / (1 + 0.06 * dt), al: 1 - ss(3, 5, dt), E: 300 });\n  });\n  if (V.boost) boosters(P, V, T, F, [-1, 1]);\n  // The rocket from its lowest burning stage up.\n  body(P, { ...stack(V, F.ai, V.n), x: F.x + sa * uo * s, y: GY + Ci - F.e - ca * uo * s, ang: F.a, sc: s, al: 1, E: F.E, q: ss(6.2, 6.7, T) * (1 - ss(7.6, 8.3, T)), uq: (V.L - uo) * 0.5, flame: { wn: F.wn, Lf: max(0.01, F.Lf * flick), k: F.k, f: F.f, fuel: F.fuel } });\n  if (V.boost) boosters(P, V, T, F, [0]);\n  // Far off, the flame is a bright point.\n  if (s * F.wn \u003c 1.4 && F.f > 0.05)\n    for (let p = 0; p \u003c N; p++) {\n      const a = 1.1 * F.f * exp(-(((p % W) + 0.5 - nx) ** 2 + (((p / W) | 0) + 0.5 - ny) ** 2) / (0.9 + 0.5 * s * F.wn) ** 2);\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += fu[1][j] * a;\n    }\n  smoke(P);\n  // The water in front mirrors everything above the shoreline.\n  for (let y = max(0, GY + Ci); y \u003c H; y++) {\n    const sy = clamp(2 * (GY + Ci) - 1 - y, 0, H - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, so = (sy * W + x) * 3, rp = 0.5 + 0.1 * sin(y * 2.1 + x * 0.3 - P.clk * 3);\n      for (let k = 0; k \u003c 3; k++) buf[o + k] = buf[so + k] * rp + c[k] * 0.12 + G[y * W + x] * P.gc[k] * 0.25;\n    }\n  }\n  // The clock.\n  const tc = T \u003c 0 ? ceil(-T) : floor(T);\n  [10, T \u003c 0 ? 11 : 12, floor(tc / 10) % 10, tc % 10].forEach((ch, i) => {\n    for (let r = 0; r \u003c 15; r++) if ((FONT[ch] >> (14 - r)) & 1) buf.set([255, 196, 70], ((2 + floor(r / 3)) * W + 2 + i * 4 + (r % 3)) * 3);\n  });\n  const fade = ss(-10, -9.3, T) * (1 - ss(23.8, 25, T));\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o] * fade), min(255, buf[o + 1] * fade), min(255, buf[o + 2] * fade));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Rocket=0..3, Speed=0.2..3, Stages=1..3, Time=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Rocket","min":0,"max":3,"about":"A white moon rocket by its tower at 0, a chequered V-2 at 1, a grey-green cluster whose boosters fall away in a cross at 2, a sounding rocket on a rail at 3."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the countdown, the flight and the next rocket take 35 s; at 0.2 ten times longer."},{"name":"Stages","min":1,"max":3,"about":"1 to 3 stages. A taller stack gets a taller tower and more steam, and each extra stage drops away on the climb."},{"name":"Time","min":0,"max":1,"about":"Dawn at 0, then day, dusk and a floodlit night with searchlights. At dawn and dusk the high plume catches the sun."}],"start":[0,2,1,0.06],"measures":{"motion":0.3231,"detail":0.0267,"edges":0.3728,"complexity":1.8839,"coverage":0.9986,"colour":0.2838,"drift":0.1066},"knobResponse":[0.0489,0.062,0.0431,0.4667]},{"slug":"longcase-clock","title":"Longcase Clock","family":"time","round":18,"note":"촛불 켠 밤 방에 128줄을 다 쓰는 괘종시계가 서 있어요. 줄의 유리문 안에서 황동 추가 1초에 한 번씩 흔들리고 무게추가 내려가며, 다이얼 아치의 달 원판이 돌고, 정시마다 꼭대기 종이 번쩍이며 울려요. K3 을 돌리면 촛불이 시계 왼쪽에서 앞을 지나 오른쪽으로 옮겨 가고, 벽에 진 그림자가 반대쪽으로 넘어가요.","idea":"A grandfather clock stands the full height of a dark room by candlelight, its brass bob beating seconds behind the trunk glass, its weights sinking on their cables, the moon disc turning in the arch of the dial, and on the hour it strikes and the candle flame jumps.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Longcase Clock\n// Family:  time\n// Idea:    A grandfather clock stands the full height of a dark room by candlelight, its brass bob beating seconds behind the trunk glass, its weights sinking on their cables, the moon disc turning in the arch of the dial, and on the hour it strikes and the candle flame jumps.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the eight-day longcase clocks of 18th-century England, with an arched brass dial and a painted moon disc\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Wood=0..1, Speed=0..3, Candle=0..1, Lamp=0..1\n//\n// Knob 1: Wood. The case, from honey oak at 0 through walnut and red mahogany to ebonised black at 1.\n// Knob 2: Speed. How fast the clock's time runs: real time at 0, a minute a second at 2 so the hands move and it strikes the hour once a minute, and at 3 a day goes by in under a second, the weights sink, the moon turns and daylight comes and goes in the window.\n// Knob 3: Candle. Where the candle stands: off the left edge at 0, in front of the clock at 0.5, off the right edge at 1, and the case's shadow on the wall swings round to the other side.\n// Knob 4: Lamp. The light in the room, from the flickering candle at 0 to steady blue moonlight through a window on the upper right at 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Woods at full light: oak, walnut, mahogany, ebonised.\nconst WOODS = [\n  [200, 142, 74],\n  [128, 84, 50],\n  [158, 60, 34],\n  [44, 36, 34],\n];\n// Materials and what each is at full light. Wood takes the Wood knob.\nconst WALL = 0;\nconst FLOOR = 1;\nconst WOOD = 2;\nconst BRASS = 3;\nconst SILVER = 4;\nconst INSIDE = 5;\nconst DARK = 6;\nconst SKIRT = 7;\nconst FRET = 8;\nconst BELL = 9;\nconst COL = [\n  [70, 60, 52],\n  [120, 84, 52],\n  null,\n  [235, 184, 92],\n  [236, 236, 230],\n  null,\n  [14, 12, 12],\n  [46, 36, 30],\n  [8, 6, 6],\n  [235, 184, 92],\n];\n// The dial: centre, the arch and its moon disc, the seconds dial.\nconst DX = 32;\nconst DY = 37;\nconst AY = 24;\nconst AR = 12.5;\nconst SY = 31;\n// Pendulum: pivot behind the dial, the bob's rest point and its arc; the\n// top of the trunk glass.\nconst PIV = 44;\nconst BOB = 92;\nconst ARC = 4.5;\nconst DT = 58;\nconst CANDLE = [1, 0.74, 0.46];\nconst MOONC = [0.42, 0.55, 1];\nconst SUN = [1, 0.9, 0.7];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction hyp(a, b) {\n  return Math.sqrt(a * a + b * b);\n}\n\nfunction hash(x, y) {\n  const s = Math.sin(x * 127.1 + y * 311.7) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.mat = new Uint8Array(N);\n  P.tone = new Float32Array(N);\n  P.spec = new Float32Array(N);\n  P.lamp = new Float32Array(N);\n  P.win = new Float32Array(N);\n  P.sheen = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.pal = new Float32Array(COL.length * 3);\n  P.light = new Float32Array(12);\n  P.hcol = new Float32Array(3);\n  P.rod = new Float32Array(3);\n  P.cab = new Float32Array(3);\n  P.pul = new Float32Array(3);\n  const { mat, tone, spec } = P;\n  const set = (x, y, m, t, s) => {\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const p = y * W + x;\n    mat[p] = m;\n    tone[p] = t;\n    spec[p] = s || 0;\n  };\n  // Wood grain: vertical streaks that wander, or along a moulding.\n  const grain = (x, y, along) => {\n    const a = along ? y : x;\n    const b = along ? x : y;\n    return 0.8 + 0.12 * Math.sin(a * 2.3 + 2.6 * Math.sin(b * 0.09 + a * 0.4)) + 0.1 * hash(a, Math.floor(b / 9));\n  };\n  const box = (x0, y0, x1, y1, m, f) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) set(x, y, m, f ? f(x, y) : 1);\n  };\n  const woodV = (x, y) => grain(x, y, false);\n  // A moulding: rows lit from above, the left end catching the light.\n  const mould = (x0, y0, x1, y1) =>\n    box(x0, y0, x1, y1, WOOD, (x, y) => grain(x, y, true) * (1.15 - (0.5 * (y - y0)) / (y1 - y0 + 1)) * (x === x0 ? 1.25 : x === x1 ? 0.6 : 1));\n  // The room: papered wall with a faint stripe, dado rail, skirting, boards.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= 118) set(x, y, FLOOR, (0.75 + 0.2 * hash(Math.floor((x - 32) / (3 + (y - 118) * 0.25)), 1)) * (Math.abs(((x - 32) / (1 + (y - 118) * 0.08)) % 7) \u003c 0.6 ? 0.5 : 1));\n      else if (y >= 112) set(x, y, SKIRT, y === 112 ? 1.4 : 1);\n      else if (y >= 76 && y \u003c= 78) set(x, y, SKIRT, y === 76 ? 1.5 : 0.8);\n      else set(x, y, WALL, (x % 6 \u003c 3 ? 1 : 0.82) * (y > 78 ? 0.8 : 1) * (0.92 + 0.08 * hash(x, y)));\n    }\n  // Pediment: a broken arch with rosettes and two brass finials, and in\n  // its open middle the bell the hours are struck on.\n  for (let x = 14; x \u003c= 50; x++) {\n    const d = Math.abs(x - DX);\n    const top = d \u003c 7 ? 9 : Math.round(3 + 6 * ((d - 7) / 11) ** 1.6);\n    for (let y = top; y \u003c= 10; y++) set(x, y, WOOD, grain(x, y, true) * (y === top ? 1.35 : 0.95));\n  }\n  for (const [fx, fy] of [[15, 3], [49, 3]]) {\n    box(fx - 1, fy + 2, fx + 1, 10, WOOD, woodV);\n    for (let y = fy - 2; y \u003c= fy + 1; y++)\n      for (let x = fx - 2; x \u003c= fx + 2; x++) {\n        const r = hyp(x - fx, y - fy);\n        if (r \u003c= 1.8) set(x, y, BRASS, 0.7 + 0.3 * (fx - x), 1 - r / 1.8);\n      }\n    set(fx, fy - 2, BRASS, 0.8, 0.5);\n    set(fx, fy - 3, BRASS, 0.6, 0.3);\n  }\n  for (const rx of [24, 40]) set(rx, 4, BRASS, 1, 0.8);\n  for (let y = 2; y \u003c= 8; y++)\n    for (let x = 27; x \u003c= 37; x++) {\n      const e = ((x - DX) / 4.6) ** 2 + ((y - 7.6) / 5.2) ** 2;\n      if (e \u003c= 1 && y \u003c= 7.6) set(x, y, BELL, 0.55 + 0.6 * clamp((DX + 1 - x) / 4, 0, 1), y === 7 ? 0.9 : 0.35 * (1 - e));\n    }\n  set(DX, 1, BELL, 0.8, 0.4);\n  for (const x of [DX - 1, DX, DX + 1]) set(x, 8, DARK, 1);\n  // Hood: the frame, brass-capped pillars, the fretted spandrels.\n  mould(12, 10, 52, 12);\n  box(13, 13, 51, 52, WOOD, woodV);\n  for (const cx of [14, 50])\n    for (let y = 13; y \u003c= 52; y++)\n      for (let x = cx - 1; x \u003c= cx + 1; x++) {\n        const cap = y \u003c= 15 || y >= 50;\n        set(x, y, cap ? BRASS : WOOD, (cap ? 1 : grain(x, y, false)) * (1.1 - 0.3 * (x - cx + 1)), cap ? 0.8 - 0.3 * (x - cx + 1) : 0);\n      }\n  for (let y = 13; y \u003c= AY; y++)\n    for (let x = 17; x \u003c= 47; x++)\n      if (hyp(x - DX, y - AY) > AR + 1.5 && (hash(Math.floor(x / 2), Math.floor(y / 2)) > 0.55 || (x + y) % 4 === 0)) set(x, y, FRET, 1);\n  mould(12, 53, 52, 56);\n  // Dial: brass plate in the arch and the square, gilt scrolls in the\n  // corners, a silvered chapter ring, the seconds dial and winding holes.\n  for (let y = 11; y \u003c= 50; y++)\n    for (let x = 18; x \u003c= 46; x++) {\n      const ra = hyp(x - DX, y - AY);\n      if (y \u003c AY && ra > AR + 1) continue;\n      const r = hyp(x - DX, y - DY);\n      if (y \u003c AY && ra > AR) set(x, y, BRASS, 1.1, 0.6);\n      else if (y \u003c AY) set(x, y, DARK, 1);\n      else if (r >= 9.6 && r \u003c= 13.2) {\n        const a = Math.atan2(y - DY, x - DX) / (Math.PI / 6);\n        const tick = Math.abs(a - Math.round(a)) \u003c 0.14 && r > 10.2 && r \u003c 12.6;\n        set(x, y, tick ? DARK : SILVER, r > 12.7 || r \u003c 10 ? 0.7 : 1);\n      } else if (r > 13.2) {\n        const g = Math.sin(x * 1.4 + Math.sin(y * 0.9) * 2) * Math.sin(y * 1.4 + Math.sin(x * 0.9) * 2);\n        set(x, y, BRASS, g > 0.15 ? 1.15 : 0.5, g > 0.5 ? 0.6 : 0.1);\n      } else {\n        const rs = hyp(x - DX, y - SY);\n        if (rs \u003c= 3.6 && rs >= 2.4) set(x, y, SILVER, 0.9);\n        else set(x, y, BRASS, 0.6 + 0.06 * hash(x, y), 0.05);\n      }\n    }\n  for (const wx of [27, 37]) set(wx, DY + 5, DARK, 1);\n  // Trunk: carcass, pilasters, the arched glass door and its escutcheon.\n  box(18, 57, 46, 101, WOOD, woodV);\n  for (const px of [18, 19, 45, 46]) for (let y = 57; y \u003c= 101; y++) set(px, y, WOOD, grain(px, y, false) * (px === 18 ? 1.3 : px === 46 ? 0.55 : 0.85));\n  for (let y = 58; y \u003c= 101; y++)\n    for (let x = 21; x \u003c= 43; x++) {\n      const glass = x >= 23 && x \u003c= 41 && y \u003c= 99 && (y >= 69 || hyp(x - DX, y - 69) \u003c= 9.5);\n      if (glass) set(x, y, INSIDE, grain(x, y, false) * (0.85 + 0.15 * Math.cos((x - DX) * 0.2)));\n      else if (y >= 69 || hyp(x - DX, y - 69) \u003c= 11.5) set(x, y, WOOD, grain(x, y, false) * (x \u003c DX ? 1.15 : 0.85));\n    }\n  set(42, 82, BRASS, 1, 1);\n  set(42, 83, DARK, 1);\n  // Base: a moulding, the plinth with a figured panel, skirt and feet.\n  mould(15, 102, 49, 105);\n  box(16, 106, 48, 120, WOOD, woodV);\n  for (let y = 109; y \u003c= 117; y++)\n    for (let x = 20; x \u003c= 44; x++) {\n      const f = Math.sin(hyp(x - DX, (y - 113) * 2.2) * 1.3 + hash(x >> 1, y >> 1) * 1.5);\n      set(x, y, WOOD, x === 20 || y === 109 ? 1.3 : x === 44 || y === 117 ? 0.55 : 0.95 + 0.18 * f);\n    }\n  mould(14, 121, 50, 123);\n  for (const fx of [14, 45]) box(fx, 124, fx + 5, 126, WOOD, (x, y) => grain(x, y, true) * (y === 124 ? 1.2 : 0.8));\n  // The window: a patch from the upper right, crossed by its glazing bars.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p - x) / W;\n    const u = x + 0.7 * y;\n    const v = y - 0.45 * x;\n    let mo = clamp((u - 58) / 4, 0, 1) * clamp((116 - u) / 4, 0, 1) * clamp((v + 2) / 4, 0, 1) * clamp((104 - v) / 4, 0, 1);\n    if (Math.abs(u - 77) \u003c 1.2 || Math.abs(u - 97) \u003c 1.2 || Math.abs(v - 50) \u003c 1.2) mo *= 0.25;\n    P.win[p] = (0.12 + mo) * (mat[p] === INSIDE ? 0.5 : 1);\n  }\n  P.candleAt = null;\n  P.started = false;\n  P.t = 0;\n  P.flare = 0;\n  P.blows = 0;\n  P.nextBlow = 0;\n  P.day = 0;\n}\n\n// Candlelight on every LED from a candle at table height, 30 LEDs in front\n// of the clock, at column cx; the case throws its shadow on the wall on the\n// far side, and the flame shows as a streak in both panes of glass.\nfunction light(P, cx) {\n  const { mat } = P;\n  const off = clamp((5 * (32 - cx)) / 66, -6, 6);\n  // Scaled so the nearest edge of the case gets the same light wherever\n  // the candle stands.\n  const near = 1.6 * (1 + (Math.max(0, Math.abs(cx - DX) - 18) ** 2 + 900) / 2600);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p - x) / W;\n    let l = 1 / (1 + ((x - cx) ** 2 + (y - 74) ** 2 + 900) / 2600);\n    const m = mat[p];\n    if (m === WALL || m === SKIRT || m === FLOOR) {\n      const sx = Math.round(x - off);\n      const sm = sx >= 0 && sx \u003c W ? mat[p + sx - x] : WALL;\n      if ((x > 46 || x \u003c 18) && sm !== WALL && sm !== SKIRT && sm !== FLOOR) l *= 0.3;\n    }\n    if (m === INSIDE) l *= 0.45;\n    P.lamp[p] = l * near;\n    const glass = m === INSIDE || (y >= 14 && y \u003c= 50 && x >= 18 && x \u003c= 46 && (m === BRASS || m === SILVER || m === DARK));\n    P.sheen[p] = glass ? Math.exp(-((x - 0.35 * y - (y \u003c 57 ? 13 : -3) + (cx + 34) * 0.15) ** 2) / 3) * 0.16 : 0;\n  }\n}\n\n// Clock seconds per real second for the Speed knob.\nfunction rate(k) {\n  return k \u003c= 2 ? 60 ** (k / 2) : 60 * (100000 / 60) ** (k - 2);\n}\n\nfunction advance(P, dt, speed) {\n  const r = rate(speed);\n  const hourBefore = Math.floor(P.clock / 3600);\n  P.clock += dt * r;\n  P.t += dt;\n  // Eight days of fall on the weights; wound again at the bottom.\n  P.fall += (dt * r) / (8 * 86400);\n  if (P.fall > 1) P.fall -= 1;\n  // The strike is held off while the hands are spun round fast.\n  if (Math.floor(P.clock / 3600) !== hourBefore && P.blows === 0 && r \u003c 3000) {\n    P.blows = Math.floor(P.clock / 3600) % 12 || 12;\n    P.nextBlow = P.t;\n  }\n  if (P.blows > 0 && P.t >= P.nextBlow) {\n    P.blows--;\n    P.flare = 1;\n    P.nextBlow = P.t + 1.5;\n  }\n  P.flare *= Math.exp(-dt / 0.45);\n  // Daylight in the window, eased so days that fly by read as a glow.\n  const h = (P.clock / 3600) % 24;\n  const sun = clamp((h - 5.5) / 2, 0, 1) * clamp((19.5 - h) / 2, 0, 1);\n  P.day += (sun - P.day) * (1 - Math.exp(-dt / 0.8));\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.wood = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  P.rate = rate(speed);\n  const cx = Math.round((-34 + 132 * clamp(k[2], 0, 1)) * 2) / 2;\n  if (cx !== P.candleAt) {\n    P.candleAt = cx;\n    light(P, cx);\n  }\n  P.lampK = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Eight and a half minutes to ten at night, twelve days into the\n    // moon's month, weights half down; then six seconds at the knob's pace,\n    // so at Speed 2 it strikes ten from 2.5 s on.\n    P.clock = 21 * 3600 + 51.5 * 60;\n    P.age = 12.4;\n    P.fall = 0.45;\n    for (let i = 0; i \u003c 180; i++) advance(P, 1 / 30, speed);\n    P.t = 0;\n    P.nextBlow = 0;\n  }\n  advance(P, dt, speed);\n}\n\nfunction woodColour(w) {\n  const f = w * 3;\n  const i = Math.min(2, Math.floor(f));\n  const u = f - i;\n  return WOODS[i].map((c, j) => c + (WOODS[i + 1][j] - c) * u);\n}\n\n// A line of width w from (x0, y0) to (x1, y1), blended over the buffer.\nfunction stroke(buf, x0, y0, x1, y1, w, c, a) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const L2 = dx * dx + dy * dy || 1;\n  const ya = Math.max(0, Math.floor(Math.min(y0, y1) - w - 1));\n  const yb = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + w + 1));\n  const xa = Math.max(0, Math.floor(Math.min(x0, x1) - w - 1));\n  const xb = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + w + 1));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const u = clamp(((x - x0) * dx + (y - y0) * dy) / L2, 0, 1);\n      const ex = x - x0 - u * dx;\n      const ey = y - y0 - u * dy;\n      const al = clamp(w + 0.5 - Math.sqrt(ex * ex + ey * ey), 0, 1) * a;\n      if (al \u003c= 0) continue;\n      const p = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[p + i] += (c[i] - buf[p + i]) * al;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const t = P.t;\n  const lk = P.lampK;\n  // The candle breathes and flickers in a draught, and jumps at each blow.\n  const fl = (1 + (1 - lk) * (0.1 * Math.sin(0.62 * t + 0.4) + 0.05 * Math.sin(1.9 * t + 1.1) + 0.03 * Math.sin(5.3 * t + 2) + 0.02 * Math.sin(13.1 * t))) * (1 + 0.22 * P.flare);\n  const L = P.light;\n  // The window: moonlight at night, brighter near the full moon, and\n  // daylight when the clock is run on into the day.\n  const lunar = ((P.age + P.clock / 86400) % 29.53) / 29.53;\n  const full = 0.25 + 0.75 * (0.5 - 0.5 * Math.cos(2 * Math.PI * lunar));\n  for (let i = 0; i \u003c 3; i++) {\n    L[i] = 0.05 + (0.2 - 0.025 * i) * P.day;\n    L[3 + i] = CANDLE[i] * (1 - lk) * fl;\n    L[6 + i] = MOONC[i] * lk * 1.5 * full * (1 - P.day) + SUN[i] * 2.2 * P.day;\n    L[9 + i] = L[i] + L[3 + i] * 0.55 + L[6 + i] * 0.5;\n  }\n  const wood = woodColour(P.wood);\n  for (let m = 0; m \u003c COL.length; m++)\n    for (let i = 0; i \u003c 3; i++) P.pal[m * 3 + i] = m === WOOD ? wood[i] : m === INSIDE ? wood[i] * 0.45 + 6 : COL[m][i];\n  shadeAll(P, buf, L);\n  if (P.flare > 0.02) fret(P, buf);\n  moonDisc(P, buf, L, lunar);\n  hands(P, buf, L);\n  hammer(P, buf, L);\n  pendulum(P, buf, L, t);\n  weights(P, buf, L);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n}\n\n// Every LED lit by the room: ambient, candle and window.\nfunction shadeAll(P, buf, L) {\n  const { mat, tone, spec, lamp, win, sheen, pal } = P;\n  const a0 = L[0];\n  const a1 = L[1];\n  const a2 = L[2];\n  const l0 = L[3];\n  const l1 = L[4];\n  const l2 = L[5];\n  const m0 = L[6];\n  const m1 = L[7];\n  const m2 = L[8];\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const q = mat[p] * 3;\n    const tn = tone[p];\n    const la = lamp[p];\n    const mo = win[p];\n    const s = spec[p] * 255;\n    const g = (s * 0.5 + sheen[p] * 255) * la;\n    const sm = s * 0.3 * mo;\n    buf[o] = pal[q] * tn * (a0 + l0 * la + m0 * mo) + g * l0 + sm * m0;\n    buf[o + 1] = pal[q + 1] * tn * (a1 + l1 * la + m1 * mo) + g * l1 + sm * m1;\n    buf[o + 2] = pal[q + 2] * tn * (a2 + l2 * la + m2 * mo) + g * l2 + sm * m2;\n  }\n}\n\n// At each blow the bell flashes and rings, and the fret round the dial\n// arch catches it.\nfunction fret(P, buf) {\n  const f = P.flare;\n  for (let p = 0; p \u003c 30 * W; p++) {\n    const m = P.mat[p];\n    if (m !== FRET && m !== BELL) continue;\n    const h = m === BELL ? f * (0.6 + 0.4 * Math.sin(P.t * 50 + (p % W))) : f * 0.5 * hash(p, 3);\n    buf[p * 3] += 255 * h;\n    buf[p * 3 + 1] += 205 * h;\n    buf[p * 3 + 2] += 120 * h;\n  }\n  for (let y = 0; y \u003c= 14; y++)\n    for (let x = 20; x \u003c= 44; x++) {\n      const h = 70 * f * Math.exp(-((x - DX) ** 2 + (y - 5) ** 2) / 28);\n      const o = (y * W + x) * 3;\n      buf[o] += h;\n      buf[o + 1] += h * 0.8;\n      buf[o + 2] += h * 0.5;\n    }\n}\n\n// The hammer: an arm up through the moulding to the right of the bell,\n// lifted back before each blow and let fall on it.\nfunction hammer(P, buf, L) {\n  const wait = P.blows > 0 ? P.nextBlow - P.t : 9;\n  const lift = clamp((0.5 - wait) / 0.5, 0, 1) ** 2 * 0.7;\n  const a = -0.45 - lift;\n  const hx = 38 + 6 * Math.sin(a);\n  const hy = 12 - 6 * Math.cos(a);\n  const col = P.hcol;\n  stroke(buf, 38, 12, hx, hy, 0.35, col, 1);\n  stroke(buf, hx - 0.6, hy - 0.4, hx + 0.6, hy + 0.4, 0.9, col, 1);\n}\n\n// The moon disc in the arch, turning once in two lunations, its moon\n// hidden and shown by the two painted humps.\nfunction moonDisc(P, buf, L, lunar) {\n  const phi = Math.PI * (lunar * 2 - 1);\n  const ca = Math.cos(phi);\n  const sa = Math.sin(phi);\n  const d0 = L[0] + L[3] * 0.7 + L[6] * 0.5 + 0.12;\n  const d1 = L[1] + L[4] * 0.7 + L[7] * 0.5 + 0.12;\n  const d2 = L[2] + L[5] * 0.7 + L[8] * 0.5 + 0.12;\n  for (let y = AY - 13; y \u003c AY; y++)\n    for (let x = DX - 13; x \u003c= DX + 13; x++) {\n      const p = y * W + x;\n      if (P.mat[p] !== DARK || hyp(x - DX, y - AY) > AR) continue;\n      let r;\n      let g;\n      let b;\n      const hx = x \u003c DX ? DX - 6.5 : DX + 6.5;\n      if (hyp(x - hx, y - AY) \u003c 6.3) {\n        const land = hyp(x - hx - 1, y - AY + 2) \u003c 3.5;\n        r = land ? 110 : 50;\n        g = land ? 160 : 100;\n        b = land ? 90 : 170;\n      } else {\n        const u = (x - DX) * ca + (y - AY) * sa;\n        const v = (y - AY) * ca - (x - DX) * sa;\n        const dm = Math.min(hyp(u, v + 7.5), hyp(u, v - 7.5));\n        if (dm \u003c 4.3) (r = 245), (g = 232), (b = 190);\n        else if (dm \u003c 5) (r = 200), (g = 170), (b = 110);\n        else if (hash(Math.round(u * 1.3) + 40, Math.round(v * 1.3) + 40) > 0.93) (r = 250), (g = 210), (b = 110);\n        else (r = 28), (g = 46), (b = 120);\n      }\n      buf[p * 3] = r * d0;\n      buf[p * 3 + 1] = g * d1;\n      buf[p * 3 + 2] = b * d2;\n    }\n}\n\n// Hands: blued steel. A hand swept faster than the eye fades to a blur.\nfunction hands(P, buf, L) {\n  const T = P.clock;\n  const r = P.rate;\n  const col = P.hcol;\n  for (let i = 0; i \u003c 3; i++) col[i] = 12 + 30 * L[3 + i] + 20 * L[6 + i] + (i === 2 ? 10 : 0);\n  const hand = (turns, len, w, tail, perFrame) => {\n    const a = turns * 2 * Math.PI;\n    const sx = Math.sin(a);\n    const cy = -Math.cos(a);\n    stroke(buf, DX - sx * tail, DY - cy * tail, DX + sx * len, DY + cy * len, w, col, clamp(1.6 - perFrame / 20, 0.15, 1));\n  };\n  hand(T / 43200, 7.5, 1.2, 2, r / 3600);\n  hand(T / 3600, 12, 0.75, 3, r / 300);\n  const sec = r \u003c 2 ? Math.floor(T) : T;\n  const sa = (sec / 60) * 2 * Math.PI;\n  stroke(buf, DX, SY, DX + 3.2 * Math.sin(sa), SY - 3.2 * Math.cos(sa), 0.3, col, clamp(1.6 - r / 15, 0.2, 1));\n}\n\n// The bob's shadow on the backboard, the rod and the brass bob, beating\n// seconds whatever the clock's own speed.\nfunction pendulum(P, buf, L, t) {\n  const th = Math.asin(ARC / (BOB - PIV)) * Math.sin(Math.PI * t);\n  const bx = DX + (BOB - PIV) * Math.sin(th);\n  const by = PIV + (BOB - PIV) * Math.cos(th);\n  for (let y = Math.floor(by - 5); y \u003c= by + 8; y++)\n    for (let x = Math.floor(bx - 3); x \u003c= bx + 10; x++) {\n      const p = y * W + x;\n      if (P.mat[p] !== INSIDE) continue;\n      const sh = 0.45 + 0.55 * clamp((hyp(x - bx - 3.5, y - by - 1.5) - 3) / 3, 0, 1);\n      buf[p * 3] *= sh;\n      buf[p * 3 + 1] *= sh;\n      buf[p * 3 + 2] *= sh;\n    }\n  const rod = P.rod;\n  for (let i = 0; i \u003c 3; i++) rod[i] = [200, 150, 80][i] * L[9 + i];\n  stroke(buf, DX, DT, bx, by, 0.45, rod, 1);\n  for (let y = Math.floor(by - 6); y \u003c= by + 6; y++)\n    for (let x = Math.floor(bx - 6); x \u003c= bx + 6; x++) {\n      const d = hyp(x - bx, (y - by) * 1.05);\n      if (d > 5.2) continue;\n      const a = clamp(5.2 - d, 0, 1);\n      const shade = 0.75 + 0.3 * ((bx - x) / 5) + 0.15 * ((by - y) / 5);\n      const hl = 255 * Math.exp(-((x - bx + 1.6) ** 2 + (y - by + 1.6) ** 2) / 2.2);\n      const p = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) {\n        const c = COL[BRASS][i] * shade * (L[9 + i] + 0.15) + hl * (L[3 + i] * 0.8 + L[6 + i] * 0.4);\n        buf[p + i] += (c - buf[p + i]) * a;\n      }\n    }\n}\n\n// Going weight on the right, striking weight on the left, each under a\n// pulley on a doubled cable; the striking train runs down a little faster.\nfunction weights(P, buf, L) {\n  const cab = P.cab;\n  for (let i = 0; i \u003c 3; i++) cab[i] = [110, 100, 90][i] * L[9 + i] + 8;\n  const pul = P.pul;\n  for (let i = 0; i \u003c 3; i++) pul[i] = [150, 120, 70][i] * L[9 + i];\n  for (let w = 0; w \u003c 2; w++) {\n    const wx = w ? 38 : 26;\n    const wy = 64 + 26 * (w ? P.fall : (P.fall * 1.06) % 1);\n    stroke(buf, wx - 1.5, DT, wx - 1.5, wy - 2, 0.2, cab, 0.8);\n    stroke(buf, wx + 1.5, DT, wx + 1.5, wy - 2, 0.2, cab, 0.8);\n    stroke(buf, wx - 1.5, wy - 2.5, wx + 1.5, wy - 2.5, 0.6, pul, 1);\n    for (let y = Math.round(wy); y \u003c= wy + 12; y++)\n      for (let x = wx - 2; x \u003c= wx + 2; x++) {\n        const p = (y * W + x) * 3;\n        const cyl = Math.cos(((x - wx + 0.6) / 3) * 1.4);\n        for (let i = 0; i \u003c 3; i++) buf[p + i] = COL[BRASS][i] * (0.35 + 0.75 * cyl) * (L[9 + i] + 0.1) + 96 * cyl ** 8 * L[3 + i];\n      }\n  }\n}\n","layer":{"id":"layer-longcase-clock","type":"code","name":"longcase-clock","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Longcase Clock\n// Family:  time\n// Idea:    A grandfather clock stands the full height of a dark room by candlelight, its brass bob beating seconds behind the trunk glass, its weights sinking on their cables, the moon disc turning in the arch of the dial, and on the hour it strikes and the candle flame jumps.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the eight-day longcase clocks of 18th-century England, with an arched brass dial and a painted moon disc\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Wood=0..1, Speed=0..3, Candle=0..1, Lamp=0..1\n//\n// Knob 1: Wood. The case, from honey oak at 0 through walnut and red mahogany to ebonised black at 1.\n// Knob 2: Speed. How fast the clock's time runs: real time at 0, a minute a second at 2 so the hands move and it strikes the hour once a minute, and at 3 a day goes by in under a second, the weights sink, the moon turns and daylight comes and goes in the window.\n// Knob 3: Candle. Where the candle stands: off the left edge at 0, in front of the clock at 0.5, off the right edge at 1, and the case's shadow on the wall swings round to the other side.\n// Knob 4: Lamp. The light in the room, from the flickering candle at 0 to steady blue moonlight through a window on the upper right at 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Woods at full light: oak, walnut, mahogany, ebonised.\nconst WOODS = [\n  [200, 142, 74],\n  [128, 84, 50],\n  [158, 60, 34],\n  [44, 36, 34],\n];\n// Materials and what each is at full light. Wood takes the Wood knob.\nconst WALL = 0;\nconst FLOOR = 1;\nconst WOOD = 2;\nconst BRASS = 3;\nconst SILVER = 4;\nconst INSIDE = 5;\nconst DARK = 6;\nconst SKIRT = 7;\nconst FRET = 8;\nconst BELL = 9;\nconst COL = [\n  [70, 60, 52],\n  [120, 84, 52],\n  null,\n  [235, 184, 92],\n  [236, 236, 230],\n  null,\n  [14, 12, 12],\n  [46, 36, 30],\n  [8, 6, 6],\n  [235, 184, 92],\n];\n// The dial: centre, the arch and its moon disc, the seconds dial.\nconst DX = 32;\nconst DY = 37;\nconst AY = 24;\nconst AR = 12.5;\nconst SY = 31;\n// Pendulum: pivot behind the dial, the bob's rest point and its arc; the\n// top of the trunk glass.\nconst PIV = 44;\nconst BOB = 92;\nconst ARC = 4.5;\nconst DT = 58;\nconst CANDLE = [1, 0.74, 0.46];\nconst MOONC = [0.42, 0.55, 1];\nconst SUN = [1, 0.9, 0.7];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction hyp(a, b) {\n  return Math.sqrt(a * a + b * b);\n}\n\nfunction hash(x, y) {\n  const s = Math.sin(x * 127.1 + y * 311.7) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.mat = new Uint8Array(N);\n  P.tone = new Float32Array(N);\n  P.spec = new Float32Array(N);\n  P.lamp = new Float32Array(N);\n  P.win = new Float32Array(N);\n  P.sheen = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.pal = new Float32Array(COL.length * 3);\n  P.light = new Float32Array(12);\n  P.hcol = new Float32Array(3);\n  P.rod = new Float32Array(3);\n  P.cab = new Float32Array(3);\n  P.pul = new Float32Array(3);\n  const { mat, tone, spec } = P;\n  const set = (x, y, m, t, s) => {\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const p = y * W + x;\n    mat[p] = m;\n    tone[p] = t;\n    spec[p] = s || 0;\n  };\n  // Wood grain: vertical streaks that wander, or along a moulding.\n  const grain = (x, y, along) => {\n    const a = along ? y : x;\n    const b = along ? x : y;\n    return 0.8 + 0.12 * Math.sin(a * 2.3 + 2.6 * Math.sin(b * 0.09 + a * 0.4)) + 0.1 * hash(a, Math.floor(b / 9));\n  };\n  const box = (x0, y0, x1, y1, m, f) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) set(x, y, m, f ? f(x, y) : 1);\n  };\n  const woodV = (x, y) => grain(x, y, false);\n  // A moulding: rows lit from above, the left end catching the light.\n  const mould = (x0, y0, x1, y1) =>\n    box(x0, y0, x1, y1, WOOD, (x, y) => grain(x, y, true) * (1.15 - (0.5 * (y - y0)) / (y1 - y0 + 1)) * (x === x0 ? 1.25 : x === x1 ? 0.6 : 1));\n  // The room: papered wall with a faint stripe, dado rail, skirting, boards.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= 118) set(x, y, FLOOR, (0.75 + 0.2 * hash(Math.floor((x - 32) / (3 + (y - 118) * 0.25)), 1)) * (Math.abs(((x - 32) / (1 + (y - 118) * 0.08)) % 7) \u003c 0.6 ? 0.5 : 1));\n      else if (y >= 112) set(x, y, SKIRT, y === 112 ? 1.4 : 1);\n      else if (y >= 76 && y \u003c= 78) set(x, y, SKIRT, y === 76 ? 1.5 : 0.8);\n      else set(x, y, WALL, (x % 6 \u003c 3 ? 1 : 0.82) * (y > 78 ? 0.8 : 1) * (0.92 + 0.08 * hash(x, y)));\n    }\n  // Pediment: a broken arch with rosettes and two brass finials, and in\n  // its open middle the bell the hours are struck on.\n  for (let x = 14; x \u003c= 50; x++) {\n    const d = Math.abs(x - DX);\n    const top = d \u003c 7 ? 9 : Math.round(3 + 6 * ((d - 7) / 11) ** 1.6);\n    for (let y = top; y \u003c= 10; y++) set(x, y, WOOD, grain(x, y, true) * (y === top ? 1.35 : 0.95));\n  }\n  for (const [fx, fy] of [[15, 3], [49, 3]]) {\n    box(fx - 1, fy + 2, fx + 1, 10, WOOD, woodV);\n    for (let y = fy - 2; y \u003c= fy + 1; y++)\n      for (let x = fx - 2; x \u003c= fx + 2; x++) {\n        const r = hyp(x - fx, y - fy);\n        if (r \u003c= 1.8) set(x, y, BRASS, 0.7 + 0.3 * (fx - x), 1 - r / 1.8);\n      }\n    set(fx, fy - 2, BRASS, 0.8, 0.5);\n    set(fx, fy - 3, BRASS, 0.6, 0.3);\n  }\n  for (const rx of [24, 40]) set(rx, 4, BRASS, 1, 0.8);\n  for (let y = 2; y \u003c= 8; y++)\n    for (let x = 27; x \u003c= 37; x++) {\n      const e = ((x - DX) / 4.6) ** 2 + ((y - 7.6) / 5.2) ** 2;\n      if (e \u003c= 1 && y \u003c= 7.6) set(x, y, BELL, 0.55 + 0.6 * clamp((DX + 1 - x) / 4, 0, 1), y === 7 ? 0.9 : 0.35 * (1 - e));\n    }\n  set(DX, 1, BELL, 0.8, 0.4);\n  for (const x of [DX - 1, DX, DX + 1]) set(x, 8, DARK, 1);\n  // Hood: the frame, brass-capped pillars, the fretted spandrels.\n  mould(12, 10, 52, 12);\n  box(13, 13, 51, 52, WOOD, woodV);\n  for (const cx of [14, 50])\n    for (let y = 13; y \u003c= 52; y++)\n      for (let x = cx - 1; x \u003c= cx + 1; x++) {\n        const cap = y \u003c= 15 || y >= 50;\n        set(x, y, cap ? BRASS : WOOD, (cap ? 1 : grain(x, y, false)) * (1.1 - 0.3 * (x - cx + 1)), cap ? 0.8 - 0.3 * (x - cx + 1) : 0);\n      }\n  for (let y = 13; y \u003c= AY; y++)\n    for (let x = 17; x \u003c= 47; x++)\n      if (hyp(x - DX, y - AY) > AR + 1.5 && (hash(Math.floor(x / 2), Math.floor(y / 2)) > 0.55 || (x + y) % 4 === 0)) set(x, y, FRET, 1);\n  mould(12, 53, 52, 56);\n  // Dial: brass plate in the arch and the square, gilt scrolls in the\n  // corners, a silvered chapter ring, the seconds dial and winding holes.\n  for (let y = 11; y \u003c= 50; y++)\n    for (let x = 18; x \u003c= 46; x++) {\n      const ra = hyp(x - DX, y - AY);\n      if (y \u003c AY && ra > AR + 1) continue;\n      const r = hyp(x - DX, y - DY);\n      if (y \u003c AY && ra > AR) set(x, y, BRASS, 1.1, 0.6);\n      else if (y \u003c AY) set(x, y, DARK, 1);\n      else if (r >= 9.6 && r \u003c= 13.2) {\n        const a = Math.atan2(y - DY, x - DX) / (Math.PI / 6);\n        const tick = Math.abs(a - Math.round(a)) \u003c 0.14 && r > 10.2 && r \u003c 12.6;\n        set(x, y, tick ? DARK : SILVER, r > 12.7 || r \u003c 10 ? 0.7 : 1);\n      } else if (r > 13.2) {\n        const g = Math.sin(x * 1.4 + Math.sin(y * 0.9) * 2) * Math.sin(y * 1.4 + Math.sin(x * 0.9) * 2);\n        set(x, y, BRASS, g > 0.15 ? 1.15 : 0.5, g > 0.5 ? 0.6 : 0.1);\n      } else {\n        const rs = hyp(x - DX, y - SY);\n        if (rs \u003c= 3.6 && rs >= 2.4) set(x, y, SILVER, 0.9);\n        else set(x, y, BRASS, 0.6 + 0.06 * hash(x, y), 0.05);\n      }\n    }\n  for (const wx of [27, 37]) set(wx, DY + 5, DARK, 1);\n  // Trunk: carcass, pilasters, the arched glass door and its escutcheon.\n  box(18, 57, 46, 101, WOOD, woodV);\n  for (const px of [18, 19, 45, 46]) for (let y = 57; y \u003c= 101; y++) set(px, y, WOOD, grain(px, y, false) * (px === 18 ? 1.3 : px === 46 ? 0.55 : 0.85));\n  for (let y = 58; y \u003c= 101; y++)\n    for (let x = 21; x \u003c= 43; x++) {\n      const glass = x >= 23 && x \u003c= 41 && y \u003c= 99 && (y >= 69 || hyp(x - DX, y - 69) \u003c= 9.5);\n      if (glass) set(x, y, INSIDE, grain(x, y, false) * (0.85 + 0.15 * Math.cos((x - DX) * 0.2)));\n      else if (y >= 69 || hyp(x - DX, y - 69) \u003c= 11.5) set(x, y, WOOD, grain(x, y, false) * (x \u003c DX ? 1.15 : 0.85));\n    }\n  set(42, 82, BRASS, 1, 1);\n  set(42, 83, DARK, 1);\n  // Base: a moulding, the plinth with a figured panel, skirt and feet.\n  mould(15, 102, 49, 105);\n  box(16, 106, 48, 120, WOOD, woodV);\n  for (let y = 109; y \u003c= 117; y++)\n    for (let x = 20; x \u003c= 44; x++) {\n      const f = Math.sin(hyp(x - DX, (y - 113) * 2.2) * 1.3 + hash(x >> 1, y >> 1) * 1.5);\n      set(x, y, WOOD, x === 20 || y === 109 ? 1.3 : x === 44 || y === 117 ? 0.55 : 0.95 + 0.18 * f);\n    }\n  mould(14, 121, 50, 123);\n  for (const fx of [14, 45]) box(fx, 124, fx + 5, 126, WOOD, (x, y) => grain(x, y, true) * (y === 124 ? 1.2 : 0.8));\n  // The window: a patch from the upper right, crossed by its glazing bars.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p - x) / W;\n    const u = x + 0.7 * y;\n    const v = y - 0.45 * x;\n    let mo = clamp((u - 58) / 4, 0, 1) * clamp((116 - u) / 4, 0, 1) * clamp((v + 2) / 4, 0, 1) * clamp((104 - v) / 4, 0, 1);\n    if (Math.abs(u - 77) \u003c 1.2 || Math.abs(u - 97) \u003c 1.2 || Math.abs(v - 50) \u003c 1.2) mo *= 0.25;\n    P.win[p] = (0.12 + mo) * (mat[p] === INSIDE ? 0.5 : 1);\n  }\n  P.candleAt = null;\n  P.started = false;\n  P.t = 0;\n  P.flare = 0;\n  P.blows = 0;\n  P.nextBlow = 0;\n  P.day = 0;\n}\n\n// Candlelight on every LED from a candle at table height, 30 LEDs in front\n// of the clock, at column cx; the case throws its shadow on the wall on the\n// far side, and the flame shows as a streak in both panes of glass.\nfunction light(P, cx) {\n  const { mat } = P;\n  const off = clamp((5 * (32 - cx)) / 66, -6, 6);\n  // Scaled so the nearest edge of the case gets the same light wherever\n  // the candle stands.\n  const near = 1.6 * (1 + (Math.max(0, Math.abs(cx - DX) - 18) ** 2 + 900) / 2600);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p - x) / W;\n    let l = 1 / (1 + ((x - cx) ** 2 + (y - 74) ** 2 + 900) / 2600);\n    const m = mat[p];\n    if (m === WALL || m === SKIRT || m === FLOOR) {\n      const sx = Math.round(x - off);\n      const sm = sx >= 0 && sx \u003c W ? mat[p + sx - x] : WALL;\n      if ((x > 46 || x \u003c 18) && sm !== WALL && sm !== SKIRT && sm !== FLOOR) l *= 0.3;\n    }\n    if (m === INSIDE) l *= 0.45;\n    P.lamp[p] = l * near;\n    const glass = m === INSIDE || (y >= 14 && y \u003c= 50 && x >= 18 && x \u003c= 46 && (m === BRASS || m === SILVER || m === DARK));\n    P.sheen[p] = glass ? Math.exp(-((x - 0.35 * y - (y \u003c 57 ? 13 : -3) + (cx + 34) * 0.15) ** 2) / 3) * 0.16 : 0;\n  }\n}\n\n// Clock seconds per real second for the Speed knob.\nfunction rate(k) {\n  return k \u003c= 2 ? 60 ** (k / 2) : 60 * (100000 / 60) ** (k - 2);\n}\n\nfunction advance(P, dt, speed) {\n  const r = rate(speed);\n  const hourBefore = Math.floor(P.clock / 3600);\n  P.clock += dt * r;\n  P.t += dt;\n  // Eight days of fall on the weights; wound again at the bottom.\n  P.fall += (dt * r) / (8 * 86400);\n  if (P.fall > 1) P.fall -= 1;\n  // The strike is held off while the hands are spun round fast.\n  if (Math.floor(P.clock / 3600) !== hourBefore && P.blows === 0 && r \u003c 3000) {\n    P.blows = Math.floor(P.clock / 3600) % 12 || 12;\n    P.nextBlow = P.t;\n  }\n  if (P.blows > 0 && P.t >= P.nextBlow) {\n    P.blows--;\n    P.flare = 1;\n    P.nextBlow = P.t + 1.5;\n  }\n  P.flare *= Math.exp(-dt / 0.45);\n  // Daylight in the window, eased so days that fly by read as a glow.\n  const h = (P.clock / 3600) % 24;\n  const sun = clamp((h - 5.5) / 2, 0, 1) * clamp((19.5 - h) / 2, 0, 1);\n  P.day += (sun - P.day) * (1 - Math.exp(-dt / 0.8));\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.wood = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  P.rate = rate(speed);\n  const cx = Math.round((-34 + 132 * clamp(k[2], 0, 1)) * 2) / 2;\n  if (cx !== P.candleAt) {\n    P.candleAt = cx;\n    light(P, cx);\n  }\n  P.lampK = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Eight and a half minutes to ten at night, twelve days into the\n    // moon's month, weights half down; then six seconds at the knob's pace,\n    // so at Speed 2 it strikes ten from 2.5 s on.\n    P.clock = 21 * 3600 + 51.5 * 60;\n    P.age = 12.4;\n    P.fall = 0.45;\n    for (let i = 0; i \u003c 180; i++) advance(P, 1 / 30, speed);\n    P.t = 0;\n    P.nextBlow = 0;\n  }\n  advance(P, dt, speed);\n}\n\nfunction woodColour(w) {\n  const f = w * 3;\n  const i = Math.min(2, Math.floor(f));\n  const u = f - i;\n  return WOODS[i].map((c, j) => c + (WOODS[i + 1][j] - c) * u);\n}\n\n// A line of width w from (x0, y0) to (x1, y1), blended over the buffer.\nfunction stroke(buf, x0, y0, x1, y1, w, c, a) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const L2 = dx * dx + dy * dy || 1;\n  const ya = Math.max(0, Math.floor(Math.min(y0, y1) - w - 1));\n  const yb = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + w + 1));\n  const xa = Math.max(0, Math.floor(Math.min(x0, x1) - w - 1));\n  const xb = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + w + 1));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const u = clamp(((x - x0) * dx + (y - y0) * dy) / L2, 0, 1);\n      const ex = x - x0 - u * dx;\n      const ey = y - y0 - u * dy;\n      const al = clamp(w + 0.5 - Math.sqrt(ex * ex + ey * ey), 0, 1) * a;\n      if (al \u003c= 0) continue;\n      const p = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[p + i] += (c[i] - buf[p + i]) * al;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const t = P.t;\n  const lk = P.lampK;\n  // The candle breathes and flickers in a draught, and jumps at each blow.\n  const fl = (1 + (1 - lk) * (0.1 * Math.sin(0.62 * t + 0.4) + 0.05 * Math.sin(1.9 * t + 1.1) + 0.03 * Math.sin(5.3 * t + 2) + 0.02 * Math.sin(13.1 * t))) * (1 + 0.22 * P.flare);\n  const L = P.light;\n  // The window: moonlight at night, brighter near the full moon, and\n  // daylight when the clock is run on into the day.\n  const lunar = ((P.age + P.clock / 86400) % 29.53) / 29.53;\n  const full = 0.25 + 0.75 * (0.5 - 0.5 * Math.cos(2 * Math.PI * lunar));\n  for (let i = 0; i \u003c 3; i++) {\n    L[i] = 0.05 + (0.2 - 0.025 * i) * P.day;\n    L[3 + i] = CANDLE[i] * (1 - lk) * fl;\n    L[6 + i] = MOONC[i] * lk * 1.5 * full * (1 - P.day) + SUN[i] * 2.2 * P.day;\n    L[9 + i] = L[i] + L[3 + i] * 0.55 + L[6 + i] * 0.5;\n  }\n  const wood = woodColour(P.wood);\n  for (let m = 0; m \u003c COL.length; m++)\n    for (let i = 0; i \u003c 3; i++) P.pal[m * 3 + i] = m === WOOD ? wood[i] : m === INSIDE ? wood[i] * 0.45 + 6 : COL[m][i];\n  shadeAll(P, buf, L);\n  if (P.flare > 0.02) fret(P, buf);\n  moonDisc(P, buf, L, lunar);\n  hands(P, buf, L);\n  hammer(P, buf, L);\n  pendulum(P, buf, L, t);\n  weights(P, buf, L);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n}\n\n// Every LED lit by the room: ambient, candle and window.\nfunction shadeAll(P, buf, L) {\n  const { mat, tone, spec, lamp, win, sheen, pal } = P;\n  const a0 = L[0];\n  const a1 = L[1];\n  const a2 = L[2];\n  const l0 = L[3];\n  const l1 = L[4];\n  const l2 = L[5];\n  const m0 = L[6];\n  const m1 = L[7];\n  const m2 = L[8];\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const q = mat[p] * 3;\n    const tn = tone[p];\n    const la = lamp[p];\n    const mo = win[p];\n    const s = spec[p] * 255;\n    const g = (s * 0.5 + sheen[p] * 255) * la;\n    const sm = s * 0.3 * mo;\n    buf[o] = pal[q] * tn * (a0 + l0 * la + m0 * mo) + g * l0 + sm * m0;\n    buf[o + 1] = pal[q + 1] * tn * (a1 + l1 * la + m1 * mo) + g * l1 + sm * m1;\n    buf[o + 2] = pal[q + 2] * tn * (a2 + l2 * la + m2 * mo) + g * l2 + sm * m2;\n  }\n}\n\n// At each blow the bell flashes and rings, and the fret round the dial\n// arch catches it.\nfunction fret(P, buf) {\n  const f = P.flare;\n  for (let p = 0; p \u003c 30 * W; p++) {\n    const m = P.mat[p];\n    if (m !== FRET && m !== BELL) continue;\n    const h = m === BELL ? f * (0.6 + 0.4 * Math.sin(P.t * 50 + (p % W))) : f * 0.5 * hash(p, 3);\n    buf[p * 3] += 255 * h;\n    buf[p * 3 + 1] += 205 * h;\n    buf[p * 3 + 2] += 120 * h;\n  }\n  for (let y = 0; y \u003c= 14; y++)\n    for (let x = 20; x \u003c= 44; x++) {\n      const h = 70 * f * Math.exp(-((x - DX) ** 2 + (y - 5) ** 2) / 28);\n      const o = (y * W + x) * 3;\n      buf[o] += h;\n      buf[o + 1] += h * 0.8;\n      buf[o + 2] += h * 0.5;\n    }\n}\n\n// The hammer: an arm up through the moulding to the right of the bell,\n// lifted back before each blow and let fall on it.\nfunction hammer(P, buf, L) {\n  const wait = P.blows > 0 ? P.nextBlow - P.t : 9;\n  const lift = clamp((0.5 - wait) / 0.5, 0, 1) ** 2 * 0.7;\n  const a = -0.45 - lift;\n  const hx = 38 + 6 * Math.sin(a);\n  const hy = 12 - 6 * Math.cos(a);\n  const col = P.hcol;\n  stroke(buf, 38, 12, hx, hy, 0.35, col, 1);\n  stroke(buf, hx - 0.6, hy - 0.4, hx + 0.6, hy + 0.4, 0.9, col, 1);\n}\n\n// The moon disc in the arch, turning once in two lunations, its moon\n// hidden and shown by the two painted humps.\nfunction moonDisc(P, buf, L, lunar) {\n  const phi = Math.PI * (lunar * 2 - 1);\n  const ca = Math.cos(phi);\n  const sa = Math.sin(phi);\n  const d0 = L[0] + L[3] * 0.7 + L[6] * 0.5 + 0.12;\n  const d1 = L[1] + L[4] * 0.7 + L[7] * 0.5 + 0.12;\n  const d2 = L[2] + L[5] * 0.7 + L[8] * 0.5 + 0.12;\n  for (let y = AY - 13; y \u003c AY; y++)\n    for (let x = DX - 13; x \u003c= DX + 13; x++) {\n      const p = y * W + x;\n      if (P.mat[p] !== DARK || hyp(x - DX, y - AY) > AR) continue;\n      let r;\n      let g;\n      let b;\n      const hx = x \u003c DX ? DX - 6.5 : DX + 6.5;\n      if (hyp(x - hx, y - AY) \u003c 6.3) {\n        const land = hyp(x - hx - 1, y - AY + 2) \u003c 3.5;\n        r = land ? 110 : 50;\n        g = land ? 160 : 100;\n        b = land ? 90 : 170;\n      } else {\n        const u = (x - DX) * ca + (y - AY) * sa;\n        const v = (y - AY) * ca - (x - DX) * sa;\n        const dm = Math.min(hyp(u, v + 7.5), hyp(u, v - 7.5));\n        if (dm \u003c 4.3) (r = 245), (g = 232), (b = 190);\n        else if (dm \u003c 5) (r = 200), (g = 170), (b = 110);\n        else if (hash(Math.round(u * 1.3) + 40, Math.round(v * 1.3) + 40) > 0.93) (r = 250), (g = 210), (b = 110);\n        else (r = 28), (g = 46), (b = 120);\n      }\n      buf[p * 3] = r * d0;\n      buf[p * 3 + 1] = g * d1;\n      buf[p * 3 + 2] = b * d2;\n    }\n}\n\n// Hands: blued steel. A hand swept faster than the eye fades to a blur.\nfunction hands(P, buf, L) {\n  const T = P.clock;\n  const r = P.rate;\n  const col = P.hcol;\n  for (let i = 0; i \u003c 3; i++) col[i] = 12 + 30 * L[3 + i] + 20 * L[6 + i] + (i === 2 ? 10 : 0);\n  const hand = (turns, len, w, tail, perFrame) => {\n    const a = turns * 2 * Math.PI;\n    const sx = Math.sin(a);\n    const cy = -Math.cos(a);\n    stroke(buf, DX - sx * tail, DY - cy * tail, DX + sx * len, DY + cy * len, w, col, clamp(1.6 - perFrame / 20, 0.15, 1));\n  };\n  hand(T / 43200, 7.5, 1.2, 2, r / 3600);\n  hand(T / 3600, 12, 0.75, 3, r / 300);\n  const sec = r \u003c 2 ? Math.floor(T) : T;\n  const sa = (sec / 60) * 2 * Math.PI;\n  stroke(buf, DX, SY, DX + 3.2 * Math.sin(sa), SY - 3.2 * Math.cos(sa), 0.3, col, clamp(1.6 - r / 15, 0.2, 1));\n}\n\n// The bob's shadow on the backboard, the rod and the brass bob, beating\n// seconds whatever the clock's own speed.\nfunction pendulum(P, buf, L, t) {\n  const th = Math.asin(ARC / (BOB - PIV)) * Math.sin(Math.PI * t);\n  const bx = DX + (BOB - PIV) * Math.sin(th);\n  const by = PIV + (BOB - PIV) * Math.cos(th);\n  for (let y = Math.floor(by - 5); y \u003c= by + 8; y++)\n    for (let x = Math.floor(bx - 3); x \u003c= bx + 10; x++) {\n      const p = y * W + x;\n      if (P.mat[p] !== INSIDE) continue;\n      const sh = 0.45 + 0.55 * clamp((hyp(x - bx - 3.5, y - by - 1.5) - 3) / 3, 0, 1);\n      buf[p * 3] *= sh;\n      buf[p * 3 + 1] *= sh;\n      buf[p * 3 + 2] *= sh;\n    }\n  const rod = P.rod;\n  for (let i = 0; i \u003c 3; i++) rod[i] = [200, 150, 80][i] * L[9 + i];\n  stroke(buf, DX, DT, bx, by, 0.45, rod, 1);\n  for (let y = Math.floor(by - 6); y \u003c= by + 6; y++)\n    for (let x = Math.floor(bx - 6); x \u003c= bx + 6; x++) {\n      const d = hyp(x - bx, (y - by) * 1.05);\n      if (d > 5.2) continue;\n      const a = clamp(5.2 - d, 0, 1);\n      const shade = 0.75 + 0.3 * ((bx - x) / 5) + 0.15 * ((by - y) / 5);\n      const hl = 255 * Math.exp(-((x - bx + 1.6) ** 2 + (y - by + 1.6) ** 2) / 2.2);\n      const p = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) {\n        const c = COL[BRASS][i] * shade * (L[9 + i] + 0.15) + hl * (L[3 + i] * 0.8 + L[6 + i] * 0.4);\n        buf[p + i] += (c - buf[p + i]) * a;\n      }\n    }\n}\n\n// Going weight on the right, striking weight on the left, each under a\n// pulley on a doubled cable; the striking train runs down a little faster.\nfunction weights(P, buf, L) {\n  const cab = P.cab;\n  for (let i = 0; i \u003c 3; i++) cab[i] = [110, 100, 90][i] * L[9 + i] + 8;\n  const pul = P.pul;\n  for (let i = 0; i \u003c 3; i++) pul[i] = [150, 120, 70][i] * L[9 + i];\n  for (let w = 0; w \u003c 2; w++) {\n    const wx = w ? 38 : 26;\n    const wy = 64 + 26 * (w ? P.fall : (P.fall * 1.06) % 1);\n    stroke(buf, wx - 1.5, DT, wx - 1.5, wy - 2, 0.2, cab, 0.8);\n    stroke(buf, wx + 1.5, DT, wx + 1.5, wy - 2, 0.2, cab, 0.8);\n    stroke(buf, wx - 1.5, wy - 2.5, wx + 1.5, wy - 2.5, 0.6, pul, 1);\n    for (let y = Math.round(wy); y \u003c= wy + 12; y++)\n      for (let x = wx - 2; x \u003c= wx + 2; x++) {\n        const p = (y * W + x) * 3;\n        const cyl = Math.cos(((x - wx + 0.6) / 3) * 1.4);\n        for (let i = 0; i \u003c 3; i++) buf[p + i] = COL[BRASS][i] * (0.35 + 0.75 * cyl) * (L[9 + i] + 0.1) + 96 * cyl ** 8 * L[3 + i];\n      }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Wood=0..1, Speed=0..3, Candle=0..1, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Wood","min":0,"max":1,"about":"The case, from honey oak at 0 through walnut and red mahogany to ebonised black at 1."},{"name":"Speed","min":0,"max":3,"about":"How fast the clock's time runs: real time at 0, a minute a second at 2 so the hands move and it strikes the hour once a minute, and at 3 a day goes by in under a second, the weights sink, the moon turns and daylight comes and goes in the window."},{"name":"Candle","min":0,"max":1,"about":"Where the candle stands: off the left edge at 0, in front of the clock at 0.5, off the right edge at 1, and the case's shadow on the wall swings round to the other side."},{"name":"Lamp","min":0,"max":1,"about":"The light in the room, from the flickering candle at 0 to steady blue moonlight through a window on the upper right at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.144,"detail":0.0765,"edges":0.4175,"complexity":2.1824,"coverage":0.9202,"colour":0.2877,"drift":0.0825},"knobResponse":[0.0907,0.1391,0.1097,0.2042]},{"slug":"lunation","title":"Lunation","family":"celestial","round":16,"note":"망원 렌즈로 본 한 달을 빠르게 돌려요. 패널 너비만 한 달이 지구조에 비친 초승달에서 보름달로 차오르며 달의 바다와 크레이터를 드러내고, 하늘도 같이 밝아져요. K1 을 누르면 다음 보름에 개기월식이 들어 달이 구릿빛이 돼요.","idea":"One synodic month sped up through a long lens: a Moon as wide as the panel grows from a crescent in earthshine to full, the terminator uncovering maria and craters as the sky over a far ridge brightens with it.","buttons":"K1 tap books a total lunar eclipse for the next full Moon: the month holds still while the Earth's shadow crosses, its umbra edged in turquoise, the Moon copper red, the stars back.","code":"// ===== Patternflow pattern =====\n// Title:   Lunation\n// Family:  celestial\n// Idea:    One synodic month sped up through a long lens: a Moon as wide as the panel grows from a crescent in earthshine to full, the terminator uncovering maria and craters as the sky over a far ridge brightens with it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: lunar phase time-lapses, one lunation of 29.53 days photographed night after night through a telephoto lens\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Latitude=-90..90, Days=0.5..4, Zoom=0..1, Exposure=-2..2\n//\n// Knob 1: Latitude. Where the camera stands, which turns the Moon's face against the horizon: at the equator, where it opens, the crescent lies on its back like a boat; at the North Pole north is up and it is lit from the right; at the South Pole the face hangs upside down.\n// Knob 2: Days. Days of the month a second: at 2 the crescent of day 2.6 is full six seconds later and a lunation takes 15 seconds; 0.5 to 4.\n// Knob 3: Zoom. The lens: at 0 the disc is 60 LEDs across, the panel's width; turned up it magnifies 2.5 times until maria, craters and the terminator fill the frame.\n// Knob 4: Exposure. Stops either side of a full-Moon exposure: two down, earthshine and faint stars go black; two up, the dark side shows its maria and the lit Moon burns out white.\n// Buttons: K1 tap books a total lunar eclipse for the next full Moon: the month holds still while the Earth's shadow crosses, its umbra edged in turquoise, the Moon copper red, the stars back.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst DEG = Math.PI / 180;\nconst TAU = Math.PI * 2;\n// The Moon's centre and radius at the widest field: 58 km a LED.\nconst CX = 32;\nconst CY = 56;\nconst R0 = 30;\n// The face: a 128x128 orthographic map of the near side, north up, 27 km a\n// texel, about a texel a LED at the closest zoom.\nconst TEX = 128;\nconst SYNODIC = 29.530589;\n// The Lab opens 1.43 days before new moon, so at 2 days a second the window\n// the study measures, 2 to 8 s, is day 2.57 to 14.57 and ends 0.1 s short of\n// full, while every LED is still only brightening.\nconst DAY0 = -1.43;\n// Sun elevation over which ground past the terminator goes from black to\n// fully lit: 12.6 degrees, six LEDs at the disc's centre.\nconst W0 = 0.22;\n// Earthshine at a seventh of full sunlight, as an exposure made for it shows\n// it, blue from the Earth's oceans; then sunlight on highland and on mare.\nconst ES = 0.15;\nconst ES_COL = [0.66, 0.78, 1.0];\nconst HI_COL = [1.0, 0.965, 0.885];\nconst MA_COL = [0.93, 0.95, 1.0];\n// Samples round the limb that light the aureole, and the Gaussian, 3 samples\n// wide, that spreads each over its neighbours.\nconst LIMB = 64;\nconst SPREAD = [];\nfor (let k = -6; k \u003c= 6; k++) SPREAD.push(Math.exp(-(k * k) / 18));\nconst SPREAD_SUM = SPREAD.reduce((a, b) => a + b, 0);\n// Eclipse: umbra and penumbra in Moon radii, the path's offset from the\n// shadow's axis, the seconds it takes.\nconst UMBRA = 2.65;\nconst PENUMBRA = 4.6;\nconst GAMMA = -0.42;\nconst ECL_T = 12;\n\n// Maria as caps on the sphere: latitude, longitude (east, toward Crisium, is\n// right), angular radius in degrees, how much darker than highland.\nconst MARIA = [\n  // Imbrium; Serenitatis, paler than its neighbours; Tranquillitatis\n  [33, -16, 17, 0.4], [40, -28, 9, 0.38], [24, -3, 7.5, 0.36], [28, 17.5, 10.5, 0.31],\n  [8, 26, 10, 0.46], [12, 35, 7, 0.46], [1, 38, 7, 0.45], [-1, 44, 5, 0.42],\n  // Crisium, Fecunditatis, Nectaris, Nubium, Humorum, Cognitum\n  [17, 59.1, 8.5, 0.47], [-4, 51, 8.5, 0.39], [-13, 49, 7, 0.37], [-15.2, 35.5, 5.5, 0.38],\n  [-20, -16, 10, 0.35], [-15, -8, 5, 0.3], [-24.4, -38.6, 6.6, 0.42], [-10, -22, 7, 0.35],\n  // Insularum round Copernicus, Vaporum, Sinus Aestuum, Sinus Medii\n  [8, -28, 9, 0.38], [14, 4, 5, 0.35], [11, -8, 6, 0.32], [2, 2, 4.5, 0.24],\n  // Oceanus Procellarum, north to south\n  [42, -50, 10, 0.38], [30, -55, 13, 0.42], [17, -58, 13, 0.44], [24, -42, 8, 0.41],\n  [12, -45, 10, 0.41], [4, -56, 12, 0.42], [-5, -50, 10, 0.38], [-12, -42, 7, 0.34],\n  // Frigoris, a ragged band across the north\n  [58, -45, 4.5, 0.3], [55, -35, 5.2, 0.33], [57.5, -24, 4, 0.32], [55.5, -13, 4.4, 0.33],\n  [57, -2, 3.8, 0.3], [55, 9, 4.6, 0.32], [56.5, 20, 4, 0.3], [54, 31, 4.4, 0.29], [52, 40, 3.2, 0.26],\n  // Lacus Somniorum; Smythii, Marginis and Australe on the east limb\n  [37, 31, 5, 0.24], [-2, 86, 4.5, 0.34], [13, 86, 3.8, 0.3], [-40, 86, 6, 0.24],\n];\n// Mountain rings of the big basins: centre, radius in degrees, height. Where\n// a ring stands on highland it is the Apennines, the Caucasus, the Alps.\nconst RINGS = [[32.8, -15.6, 19.5, 0.022], [28, 17.5, 11.8, 0.014], [17, 59.1, 9.6, 0.012], [-15.2, 35.5, 8, 0.01], [-24.4, -38.6, 7.6, 0.008]];\n// Named craters: latitude, longitude, km across, kind (0 plain, 1 young and\n// rayed, 2 dark floor, 3 flooded flat floor).\nconst CRATERS = [\n  // Tycho, Copernicus, Kepler, Aristarchus, Proclus, Menelaus\n  [-43.3, -11.2, 85, 1], [9.6, -20.1, 93, 1], [8.1, -38, 32, 1], [23.7, -47.4, 40, 1], [16.2, 46.8, 28, 1], [16.3, 16, 27, 1],\n  // Plato, Grimaldi, Endymion, Clavius, Ptolemaeus, Alphonsus, Arzachel, Theophilus\n  [51.6, -9.4, 101, 2], [-5.2, -68.6, 173, 2], [53.9, 57, 123, 2], [-58.4, -14.4, 231, 0], [-9.3, -1.9, 153, 3], [-13.4, -2.8, 119, 0], [-18.2, -1.9, 97, 0], [-11.4, 26.4, 100, 0],\n  // Langrenus, Petavius, Vendelinus, Archimedes, Eratosthenes, Maginus, Longomontanus, Schickard\n  [-8.9, 61.1, 132, 0], [-25.1, 60.4, 177, 0], [-16.3, 61.6, 147, 3], [29.7, -4, 83, 3], [14.5, -11.3, 58, 0], [-50, -6.2, 194, 0], [-49.6, -21.7, 145, 0], [-44.3, -54.6, 206, 2],\n  // Gassendi, Posidonius, Atlas, Albategnius, Hipparchus, Stofler, Janssen, Deslandres, Aristoteles, Bailly\n  [-17.6, -40.1, 110, 3], [31.8, 29.9, 95, 3], [46.7, 44.4, 87, 0], [-11.2, 4.1, 129, 0], [-5.1, 5.2, 138, 3], [-41.1, 6, 126, 0], [-44.9, 41.5, 199, 0], [-32.5, -5.2, 234, 3], [50.2, 17.4, 87, 0], [-66.5, -69.1, 303, 0],\n];\n// Ray systems of the first six: rays, e-folding length in radians, strength.\nconst RAYS = [[18, 0.34, 0.15], [12, 0.14, 0.14], [9, 0.08, 0.12], [7, 0.06, 0.14], [6, 0.09, 0.1], [5, 0.05, 0.08]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise on a 64x64 lattice; a seed shifts it so uses do not line up.\nconst LATTICE = new Float32Array(4096);\nfor (let i = 0; i \u003c 4096; i++) LATTICE[i] = hash(i, 977);\n\nfunction noise(x, y, s) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const ux = (x - ix) * (x - ix) * (3 - 2 * (x - ix));\n  const uy = (y - iy) * (y - iy) * (3 - 2 * (y - iy));\n  const i0 = (ix + s * 17) & 63;\n  const i1 = (i0 + 1) & 63;\n  const j0 = ((iy + s * 29) & 63) \u003c\u003c 6;\n  const j1 = (j0 + 64) & 4095;\n  const a = LATTICE[j0 + i0];\n  const b = LATTICE[j0 + i1];\n  const c = LATTICE[j1 + i0];\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + LATTICE[j1 + i1]) * ux * uy;\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp01((v - a) / (b - a));\n  return t * t * (3 - 2 * t);\n}\n\n// A unit vector on the near side: x right (east), y north, z toward Earth.\nfunction dir(lat, lon) {\n  const cb = Math.cos(lat * DEG);\n  return [cb * Math.sin(lon * DEG), Math.sin(lat * DEG), cb * Math.cos(lon * DEG)];\n}\n\n// Calls fn for each texel within angle `reach` of c.\nfunction box(c, reach, fn) {\n  const span = Math.ceil((Math.min(2, reach) * TEX) / 2) + 1;\n  const ci = Math.floor(((c[0] + 1) / 2) * TEX);\n  const cj = Math.floor(((1 - c[1]) / 2) * TEX);\n  for (let j = Math.max(0, cj - span); j \u003c= Math.min(TEX - 1, cj + span); j++)\n    for (let i = Math.max(0, ci - span); i \u003c= Math.min(TEX - 1, ci + span); i++) fn(j * TEX + i);\n}\n\nfunction angle(F, t, c) {\n  return Math.acos(Math.min(1, F.px[t] * c[0] + F.py[t] * c[1] + F.pz[t] * c[2]));\n}\n\n// A texel's place on the sphere, its highland albedo and roughness, and a\n// noise-pushed place to look the maria up from, so every shore wobbles 100\n// to 200 km. Texels outside the disc copy the limb.\nfunction texelInit(F, t, u, v) {\n  const rr = u * u + v * v;\n  const k = rr > 0.9995 ? Math.sqrt(0.9995 / rr) : 1;\n  const x = (u *= k);\n  const y = -(v *= k);\n  const z = Math.sqrt(Math.max(0, 1 - u * u - v * v));\n  F.px[t] = x;\n  F.py[t] = y;\n  F.pz[t] = z;\n  // Albedo wanders a tenth over a few hundred km, the south, sprayed by\n  // Tycho, is brighter, and a texel-sized grain keeps the zoom from smoothing.\n  F.alb[t] = 0.88 + 0.1 * noise(u * 5 + 3, v * 5 + 5, 1) + 0.08 * noise(u * 14, v * 14, 2) + 0.05 * v + 0.06 * noise(u * 47, v * 47, 12);\n  F.hgt[t] = 0.004 * (noise(u * 40, v * 40, 3) - 0.5);\n  const wx = x + 0.07 * (noise(x * 5 + 1, y * 5, 7) - 0.5) + 0.025 * (noise(x * 19, y * 19, 4) - 0.5);\n  const wy = y + 0.07 * (noise(x * 5, y * 5 + 4, 10) - 0.5) + 0.025 * (noise(x * 19 + 7, y * 19, 11) - 0.5);\n  const l = Math.sqrt(wx * wx + wy * wy + z * z);\n  F.wx[t] = wx / l;\n  F.wy[t] = wy / l;\n  F.wz[t] = z / l;\n}\n\n// Lava is flat and low, and darker by the mare's depth, unevenly.\nfunction lava(F, t, m) {\n  F.mare[t] = m;\n  F.alb[t] *= 1 - m * (0.8 + 0.3 * noise(F.px[t] * 9, F.py[t] * 9, 5) + 0.12 * noise(F.px[t] * 30, F.py[t] * 30, 8));\n  F.hgt[t] -= 0.03 * m;\n}\n\n// A crater: bowl, rim, a central peak if big, and albedo: fresh ones bright,\n// Plato's kind dark-floored.\nfunction crater(F, la, lo, km, kind, seed) {\n  const c = dir(la, lo);\n  const rho = km / 2 / 1737;\n  const depth = rho * (kind === 3 ? 0.06 : kind === 1 ? 0.24 : 0.16 + 0.06 * hash(seed, 1));\n  const peak = km > 70 && kind !== 3 ? depth * 0.5 : 0;\n  const flat = kind === 3 || km > 150 ? 6 : 2;\n  const rimA = 0.04 * hash(seed, 3) - 0.01;\n  box(c, rho * 1.8, (t) => {\n    const r = angle(F, t, c) / rho;\n    if (r > 1.8) return;\n    let h = depth * 0.35 * Math.exp(-(((r - 1) / 0.22) ** 2));\n    if (r \u003c 1) h -= depth * (1 - r ** flat);\n    if (peak) h += peak * Math.exp(-((r / 0.16) ** 2));\n    F.hgt[t] += h;\n    if (kind === 1 && r \u003c 1.5) F.alb[t] += 0.3 * (1 - smooth(0.9, 1.5, r));\n    else if (kind === 0) F.alb[t] += rimA * Math.exp(-(((r - 1) / 0.25) ** 2)) - (r \u003c 0.8 ? 0.03 : 0);\n    if (kind === 2 && r \u003c 1) F.alb[t] *= 0.62 + 0.38 * smooth(0.75, 1, r);\n  });\n}\n\n// A rayed crater's light at a texel. Rays start past the dark collar of\n// fresh ejecta, broad and faint, not spokes; only the two either side of\n// the texel's bearing can reach it.\nfunction rayLight(F, t, ci, c, rho, count, len) {\n  const d = angle(F, t, c);\n  if (d > Math.min(Math.PI, len * 4) || d \u003c 1.2 * rho) return 0;\n  const x = F.px[t] - c[0];\n  const y = F.py[t] - c[1];\n  const z = F.pz[t] - c[2];\n  const e = Math.hypot(c[0], c[2]);\n  const th = Math.atan2(y * e - (c[1] * (x * c[0] + z * c[2])) / e, (x * c[2] - z * c[0]) / e);\n  const k0 = Math.floor(((th \u003c 0 ? th + TAU : th) / TAU) * count);\n  const across = Math.sin(d) / (0.012 + 0.03 * d);\n  let sum = 0;\n  for (let kk = k0 - 1; kk \u003c= k0 + 1; kk++) {\n    const k = (kk + count) % count;\n    const id = ci * 31 + k;\n    let dt = th - ((k + 0.8 * hash(id, 21)) / count) * TAU;\n    dt -= Math.round(dt / TAU) * TAU;\n    const lateral = Math.abs(dt) * across;\n    if (lateral \u003c 3) sum += (0.4 + 0.8 * hash(id, 23)) * Math.exp(-lateral * lateral - d / (len * (0.45 + 1.1 * hash(id, 22))));\n  }\n  return Math.min(1, sum) * smooth(1.6 * rho, 4 * rho, d);\n}\n\n// The face map: albedo, how much mare, and the slope the Sun sees.\nfunction buildFace(P) {\n  const T = TEX * TEX;\n  const F = {};\n  for (const key of [\"px\", \"py\", \"pz\", \"alb\", \"hgt\", \"wx\", \"wy\", \"wz\", \"mare\", \"field\", \"dark\"]) F[key] = new Float32Array(T);\n  for (let j = 0; j \u003c TEX; j++) for (let i = 0; i \u003c TEX; i++) texelInit(F, j * TEX + i, ((i + 0.5) / TEX) * 2 - 1, ((j + 0.5) / TEX) * 2 - 1);\n  // Maria: caps add up as a steep field, so only neighbours that touch join,\n  // with a rounded neck, as Serenitatis runs into Tranquillitatis.\n  for (const [la, lo, rad, dark] of MARIA) {\n    const c = dir(la, lo);\n    const rho = rad * DEG;\n    const near = Math.cos(1.6 * rho);\n    box(c, 1.6 * rho + 0.06, (t) => {\n      const cd = F.wx[t] * c[0] + F.wy[t] * c[1] + F.wz[t] * c[2];\n      if (cd \u003c near) return;\n      const d = Math.acos(Math.min(1, cd)) / rho;\n      const w = Math.exp(-3 * d * d);\n      F.field[t] += w;\n      F.dark[t] += w * dark;\n    });\n  }\n  for (let t = 0; t \u003c T; t++) if (F.field[t] > 0.02) lava(F, t, smooth(0.035, 0.12, F.field[t]) * (F.dark[t] / F.field[t]));\n  // Basin rings: a band of peaks a tenth of the radius wide, only on highland.\n  for (const [la, lo, rad, tall] of RINGS) {\n    const c = dir(la, lo);\n    const rho = rad * DEG;\n    box(c, 1.35 * rho, (t) => {\n      const d = angle(F, t, c) / rho;\n      if (d \u003c 0.75 || d > 1.35) return;\n      const peaks = 0.4 + noise(F.px[t] * 70, F.py[t] * 70, 6) * 1.2;\n      F.hgt[t] += tall * Math.exp(-(((d - 1.04) / 0.12) ** 2)) * peaks * (1 - clamp01(F.mare[t] / 0.3));\n    });\n  }\n  CRATERS.forEach(([la, lo, km, kind], n) => crater(F, la, lo, km, kind, n));\n  // 420 random craters, 40 to 180 km, saturate the highlands, not the maria.\n  for (let n = 0; n \u003c 420; n++) {\n    const z = hash(n, 11);\n    const a = hash(n, 12) * TAU;\n    const x = Math.sqrt(1 - z * z) * Math.cos(a);\n    const y = Math.sqrt(1 - z * z) * Math.sin(a);\n    const t = Math.min(TEX - 1, Math.floor(((1 - y) / 2) * TEX)) * TEX + Math.min(TEX - 1, Math.floor(((x + 1) / 2) * TEX));\n    if (F.mare[t] > 0.15 && hash(n, 13) > 0.2) continue;\n    crater(F, Math.asin(y) / DEG, Math.atan2(x, z) / DEG, 40 * Math.pow(4.5, Math.pow(hash(n, 14), 1.7)), 0, 1000 + n);\n  }\n  RAYS.forEach(([count, len, power], ci) => {\n    const c = dir(CRATERS[ci][0], CRATERS[ci][1]);\n    const rho = CRATERS[ci][2] / 2 / 1737;\n    box(c, len * 4, (t) => {\n      const d = angle(F, t, c);\n      F.alb[t] += power * rayLight(F, t, ci, c, rho, count, len) + (d > 1.2 * rho ? 0.1 * Math.exp(-(((d - 1.6 * rho) / (1.6 * rho)) ** 2)) : 0);\n    });\n  });\n  // Slope along the Sun's path, positive toward a Sun rising on the right.\n  const slope = new Float32Array(T);\n  for (let t = 1; t \u003c T - 1; t++) {\n    if (t % TEX === 0 || t % TEX === TEX - 1) continue;\n    const cosl = F.pz[t] / Math.sqrt(F.px[t] * F.px[t] + F.pz[t] * F.pz[t] + 1e-9);\n    const s = (-(F.hgt[t + 1] - F.hgt[t - 1]) / (4 / TEX)) * cosl;\n    slope[t] = s > 0.28 ? 0.28 : s \u003c -0.28 ? -0.28 : s;\n  }\n  for (let t = 0; t \u003c T; t++) F.alb[t] = Math.min(1.15, Math.max(0.3, F.alb[t]));\n  P.alb = F.alb;\n  P.slope = slope;\n  P.mare = F.mare;\n}\n\nfunction sample(arr, u, v) {\n  const fx = Math.min(TEX - 1.0001, Math.max(0, ((u + 1) / 2) * TEX - 0.5));\n  const fy = Math.min(TEX - 1.0001, Math.max(0, ((v + 1) / 2) * TEX - 0.5));\n  const t = (fy | 0) * TEX + (fx | 0);\n  const tx = fx - (fx | 0);\n  const a = arr[t] + (arr[t + 1] - arr[t]) * tx;\n  const b = arr[t + TEX] + (arr[t + TEX + 1] - arr[t + TEX]) * tx;\n  return a + (b - a) * (fy - (fy | 0));\n}\n\n// The far ridge's top, in scene rows, with spruce on it, each a one-LED\n// spire over a body three LEDs wide.\nfunction ridge(x, trees) {\n  let y = 113 + 2.6 * Math.sin(x * 0.08 - 0.9) + 1.2 * Math.sin(x * 0.23 + 1.7);\n  const cell = Math.floor(x / 4.3);\n  for (let k = cell - 2; trees && k \u003c= cell + 2; k++) {\n    const tx = (k + 0.2 + 0.6 * hash(k, 32)) * 4.3;\n    const dx = Math.abs(x - tx);\n    if (hash(k, 31) \u003c 0.5 && dx \u003c 1.9) y = Math.min(y, ridge(tx, false) - (4 + 6 * hash(k, 33)) * (1 - dx / 1.9) ** 1.4);\n  }\n  return y;\n}\n\n// Per-LED geometry for a latitude and zoom: where on the face it looks, its\n// sky, its star.\nfunction buildView(P, lat, zoom) {\n  const m = 1 + 1.5 * zoom;\n  const R = R0 * m;\n  const th = (90 - lat) * DEG;\n  const ct = Math.cos(th);\n  const st = Math.sin(th);\n  const top = [];\n  for (let x = 0; x \u003c W; x++) top.push(ridge(CX + (x + 0.5 - CX) / m, true));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const o = p * 3;\n    const dx = x + 0.5 - CX;\n    const dy = ((p / W) | 0) + 0.5 - CY;\n    const dist = Math.sqrt(dx * dx + dy * dy);\n    const sy = CY + dy / m;\n    // The sky without a Moon and what a full one adds, and the glow: a tight\n    // aureole lit by the limb beside it, so a crescent wears a crescent of\n    // glow, and a wide one lit by the whole.\n    const ty = clamp01(sy / 112);\n    const dd = Math.max(0, dist - R) / m;\n    const wide = 27 * Math.exp(-dd / 13);\n    P.night[o] = 1 + 3 * ty * ty;\n    P.night[o + 1] = 2 + 6 * ty * ty;\n    P.night[o + 2] = 7 + 14 * ty;\n    P.lift[o] = 5 + 7.5 * ty + wide * 0.78;\n    P.lift[o + 1] = 11.5 + 13 * ty + wide * 0.85;\n    P.lift[o + 2] = 28 + 20 * ty + wide;\n    P.near[p] = 62 * Math.exp(-dd / 3.5);\n    const turn = Math.atan2(dy, dx) / TAU;\n    P.bin[p] = (turn - Math.floor(turn)) * LIMB;\n    P.ground[p] = sy > top[x] ? 1 : 0;\n    const a = clamp01(R - dist + 0.5);\n    P.alpha[p] = a;\n    if (a \u003c= 0) continue;\n    const shrink = Math.min(1, Math.sqrt(0.996 / ((dist * dist) / (R * R))));\n    const qx = (dx / R) * shrink;\n    const qy = (dy / R) * shrink;\n    const u = qx * ct + qy * st;\n    const v = -qx * st + qy * ct;\n    P.fu[p] = u;\n    P.fv[p] = v;\n    P.alb[p] = sample(P.face.alb, u, v);\n    P.slp[p] = sample(P.face.slope, u, v);\n    P.mar[p] = sample(P.face.mare, u, v);\n    P.lam[p] = Math.atan2(u, Math.sqrt(Math.max(0, 1 - u * u - v * v)));\n    P.cb[p] = Math.sqrt(Math.max(0, 1 - v * v));\n  }\n  for (let j = 0; j \u003c LIMB; j++) {\n    const qx = 0.94 * Math.cos((j / LIMB) * TAU);\n    const qy = 0.94 * Math.sin((j / LIMB) * TAU);\n    const u = qx * ct + qy * st;\n    const v = -qx * st + qy * ct;\n    P.limbU[j] = u;\n    P.limbV[j] = v;\n    P.limbLam[j] = Math.atan2(u, Math.sqrt(Math.max(0, 1 - u * u - v * v)));\n    P.limbCb[j] = Math.sqrt(1 - v * v);\n  }\n  // Stars turn with the face and stay one LED at any zoom.\n  P.star.fill(0);\n  const cs = Math.cos(th - Math.PI / 2);\n  const ss = Math.sin(th - Math.PI / 2);\n  for (const s of P.stars) {\n    const x = Math.floor(CX + (s[0] * cs - s[1] * ss) * m);\n    const y = Math.floor(CY + (s[0] * ss + s[1] * cs) * m);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = y * W + x;\n    if (P.alpha[p] > 0 || P.ground[p]) continue;\n    for (let c = 0; c \u003c 3; c++) P.star[p * 3 + c] = Math.max(P.star[p * 3 + c], s[2] * s[3 + c]);\n  }\n  P.viewLat = lat;\n  P.viewZoom = zoom;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.face = {};\n  buildFace(P.face);\n  for (const key of [\"night\", \"lift\", \"star\"]) P[key] = new Float32Array(N * 3);\n  for (const key of [\"alpha\", \"fu\", \"fv\", \"alb\", \"slp\", \"mar\", \"lam\", \"cb\", \"near\", \"bin\"]) P[key] = new Float32Array(N);\n  for (const key of [\"limbU\", \"limbV\", \"limbLam\", \"limbCb\", \"limbRaw\", \"limb\"]) P[key] = new Float32Array(LIMB);\n  P.ground = new Uint8Array(N);\n  // Stars, most at the limit of the eye, a few bright, some warm.\n  P.stars = [];\n  for (let n = 0; n \u003c 420; n++) {\n    const r = 112 * Math.sqrt(hash(n, 41));\n    const a = hash(n, 42) * TAU;\n    const mag = hash(n, 43);\n    const warm = hash(n, 44);\n    const col = warm \u003c 0.2 ? [1, 0.82, 0.62] : warm > 0.8 ? [0.78, 0.88, 1] : [0.95, 0.95, 1];\n    P.stars.push([r * Math.cos(a), r * Math.sin(a), 30 + 46 * mag * mag + (mag > 0.93 ? (120 * (mag - 0.93)) / 0.07 : 0), ...col]);\n  }\n  P.day = DAY0;\n  P.pending = false;\n  P.eclipse = -1;\n  P.viewLat = 1e9;\n  P.E = 0;\n  P.shadowU = 0;\n  P.gain = 1;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  if (!P.face) setup(P);\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const lat = Math.max(-90, Math.min(90, k[0]));\n  const zoom = clamp01(k[2]);\n  if (input.btnPressed && input.btnPressed[0] && P.eclipse \u003c 0) P.pending = true;\n  if (Math.abs(lat - P.viewLat) > 0.05 || Math.abs(zoom - P.viewZoom) > 0.0005) buildView(P, lat, zoom);\n  P.gain = Math.pow(2, Math.max(-2, Math.min(2, k[3])));\n  if (P.eclipse >= 0) {\n    P.eclipse += dt;\n    if (P.eclipse >= ECL_T) {\n      P.eclipse = -1;\n      P.pending = false;\n    }\n  } else {\n    const before = Math.floor(P.day / SYNODIC + 0.5);\n    P.day += Math.max(0.5, Math.min(4, k[1])) * dt;\n    const after = Math.floor(P.day / SYNODIC + 0.5);\n    // A booked eclipse stops the clock at full Moon, half a month in.\n    if (P.pending && after > before) {\n      P.day = (after - 0.5) * SYNODIC;\n      P.eclipse = 0;\n    }\n  }\n  const f = P.day / SYNODIC;\n  P.E = (f - Math.floor(f)) * TAU;\n  // The shadow crosses east to west, slowest over totality.\n  const q = (2 * Math.max(0, P.eclipse)) / ECL_T - 1;\n  P.shadowU = 5.7 * (0.6 * q + 0.4 * q * q * q);\n}\n\n// Sunlight reaching a point in the Earth's shadow, per channel: penumbra\n// greys it, the umbra leaves the copper of every sunset on Earth, and the\n// ozone layer edges the umbra in turquoise.\nfunction shadowInto(out, r) {\n  if (r > UMBRA + 0.06) {\n    const p = r >= PENUMBRA ? 0 : Math.pow((PENUMBRA - r) / (PENUMBRA - UMBRA), 1.6);\n    out[0] = 1 - 0.8 * p;\n    out[1] = 1 - 0.83 * p;\n    out[2] = 1 - 0.86 * p;\n    return;\n  }\n  const deep = 0.16 + 0.2 * (r / UMBRA) ** 2;\n  const edge = smooth(UMBRA - 0.12, UMBRA + 0.06, r);\n  const fringe = Math.exp(-(((r - UMBRA + 0.1) / 0.09) ** 2));\n  out[0] = deep + edge * 0.2;\n  out[1] = deep * 0.3 + edge * 0.17 + fringe * 0.06;\n  out[2] = deep * 0.1 + edge * 0.14 + fringe * 0.07;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.face) return;\n  const E = P.E;\n  // Sunrise terminator at longitude 90 - E, sunset at 270 - E, held at the\n  // right limb until full, so on the way to full nothing ever darkens.\n  const lt = Math.PI / 2 - E;\n  const ls = Math.PI * 1.5 - Math.max(E, Math.PI);\n  // Lit fraction, and surface brightness, steep in the last day before full:\n  // the opposition surge.\n  const kf = (1 - Math.cos(E)) / 2;\n  const g = 0.6 + 0.3 * Math.pow(kf, 0.9) + 0.1 * Math.exp(-Math.abs(E - Math.PI) / 0.12);\n  let moonlight = kf * g;\n  const ecl = P.eclipse >= 0;\n  const sh = [1, 1, 1];\n  const shade = (u, v) => {\n    shadowInto(sh, Math.hypot(u - P.shadowU, v - GAMMA));\n    return sh[0] * 0.3 + sh[1] * 0.6 + sh[2] * 0.1;\n  };\n  // The aureole's light by limb sample, spread 17 degrees either way; each\n  // only brightens on the way to full, so the glow does too. In an eclipse\n  // the sky dims with the shadow's mean round the limb.\n  let dim = 0;\n  for (let j = 0; j \u003c LIMB; j++) {\n    const cb = P.limbCb[j];\n    const lam = P.limbLam[j];\n    const t = clamp01((Math.min((lam - lt) * cb, (ls - lam) * cb + 0.05) + 0.01) / W0);\n    const f = ecl ? shade(P.limbU[j], P.limbV[j]) : 1;\n    dim += f / LIMB;\n    P.limbRaw[j] = (ES + (g - ES) * t * (2 - t)) * f;\n  }\n  moonlight *= dim;\n  for (let j = 0; j \u003c LIMB; j++) {\n    let sum = 0;\n    for (let k = -6; k \u003c= 6; k++) sum += SPREAD[k + 6] * P.limbRaw[(j + k + LIMB) % LIMB];\n    P.limb[j] = sum / SPREAD_SUM;\n  }\n  const gain = P.gain;\n  const esR = ES * ES_COL[0];\n  const esG = ES * ES_COL[1];\n  const esB = ES * ES_COL[2];\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    let r = P.night[o] + moonlight * P.lift[o];\n    let gg = P.night[o + 1] + moonlight * P.lift[o + 1];\n    let b = P.night[o + 2] + moonlight * P.lift[o + 2];\n    const near = P.near[p];\n    if (near > 0.3) {\n      const j = P.bin[p] | 0;\n      const glow = near * (P.limb[j] + (P.limb[(j + 1) % LIMB] - P.limb[j]) * (P.bin[p] - j));\n      r += glow * 0.78;\n      gg += glow * 0.85;\n      b += glow;\n    }\n    if (P.star[o + 2] > 0) {\n      r = Math.max(r, P.star[o]);\n      gg = Math.max(gg, P.star[o + 1]);\n      b = Math.max(b, P.star[o + 2]);\n    }\n    if (P.ground[p]) {\n      r = 1;\n      gg = 1.5;\n      b = 3;\n    } else if (P.alpha[p] > 0) {\n      // Earthshine, and sunlight by the Sun's height over the ground, slope\n      // included, so walls facing dawn light first and peaks shine past it.\n      const a = P.alpha[p];\n      const cb = P.cb[p];\n      const lam = P.lam[p];\n      const s = P.slp[p];\n      const t = clamp01((Math.min((lam - lt) * cb + s, (ls - lam) * cb - s + 0.05) + 0.01) / W0);\n      const F = t * (2 - t);\n      const al = P.alb[p] * 255;\n      const ma = P.mar[p] > 0.4 ? g : g * 2.5 * P.mar[p];\n      let sr = g * HI_COL[0] + (MA_COL[0] - HI_COL[0]) * ma;\n      let sg = g * HI_COL[1] + (MA_COL[1] - HI_COL[1]) * ma;\n      let sb = g * HI_COL[2] + (MA_COL[2] - HI_COL[2]) * ma;\n      if (ecl) {\n        shadowInto(sh, Math.hypot(P.fu[p] - P.shadowU, P.fv[p] - GAMMA));\n        sr *= sh[0];\n        sg *= sh[1];\n        sb *= sh[2];\n      }\n      r += (al * (esR + (sr - esR) * F) - r) * a;\n      gg += (al * (esG + (sg - esG) * F) - gg) * a;\n      b += (al * (esB + (sb - esB) * F) - b) * a;\n    }\n    r *= gain;\n    gg *= gain;\n    b *= gain;\n    display.setPixel(p % W, (p / W) | 0, r > 255 ? 255 : r, gg > 255 ? 255 : gg, b > 255 ? 255 : b);\n  }\n}\n","layer":{"id":"layer-lunation","type":"code","name":"lunation","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lunation\n// Family:  celestial\n// Idea:    One synodic month sped up through a long lens: a Moon as wide as the panel grows from a crescent in earthshine to full, the terminator uncovering maria and craters as the sky over a far ridge brightens with it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: lunar phase time-lapses, one lunation of 29.53 days photographed night after night through a telephoto lens\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Latitude=-90..90, Days=0.5..4, Zoom=0..1, Exposure=-2..2\n//\n// Knob 1: Latitude. Where the camera stands, which turns the Moon's face against the horizon: at the equator, where it opens, the crescent lies on its back like a boat; at the North Pole north is up and it is lit from the right; at the South Pole the face hangs upside down.\n// Knob 2: Days. Days of the month a second: at 2 the crescent of day 2.6 is full six seconds later and a lunation takes 15 seconds; 0.5 to 4.\n// Knob 3: Zoom. The lens: at 0 the disc is 60 LEDs across, the panel's width; turned up it magnifies 2.5 times until maria, craters and the terminator fill the frame.\n// Knob 4: Exposure. Stops either side of a full-Moon exposure: two down, earthshine and faint stars go black; two up, the dark side shows its maria and the lit Moon burns out white.\n// Buttons: K1 tap books a total lunar eclipse for the next full Moon: the month holds still while the Earth's shadow crosses, its umbra edged in turquoise, the Moon copper red, the stars back.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst DEG = Math.PI / 180;\nconst TAU = Math.PI * 2;\n// The Moon's centre and radius at the widest field: 58 km a LED.\nconst CX = 32;\nconst CY = 56;\nconst R0 = 30;\n// The face: a 128x128 orthographic map of the near side, north up, 27 km a\n// texel, about a texel a LED at the closest zoom.\nconst TEX = 128;\nconst SYNODIC = 29.530589;\n// The Lab opens 1.43 days before new moon, so at 2 days a second the window\n// the study measures, 2 to 8 s, is day 2.57 to 14.57 and ends 0.1 s short of\n// full, while every LED is still only brightening.\nconst DAY0 = -1.43;\n// Sun elevation over which ground past the terminator goes from black to\n// fully lit: 12.6 degrees, six LEDs at the disc's centre.\nconst W0 = 0.22;\n// Earthshine at a seventh of full sunlight, as an exposure made for it shows\n// it, blue from the Earth's oceans; then sunlight on highland and on mare.\nconst ES = 0.15;\nconst ES_COL = [0.66, 0.78, 1.0];\nconst HI_COL = [1.0, 0.965, 0.885];\nconst MA_COL = [0.93, 0.95, 1.0];\n// Samples round the limb that light the aureole, and the Gaussian, 3 samples\n// wide, that spreads each over its neighbours.\nconst LIMB = 64;\nconst SPREAD = [];\nfor (let k = -6; k \u003c= 6; k++) SPREAD.push(Math.exp(-(k * k) / 18));\nconst SPREAD_SUM = SPREAD.reduce((a, b) => a + b, 0);\n// Eclipse: umbra and penumbra in Moon radii, the path's offset from the\n// shadow's axis, the seconds it takes.\nconst UMBRA = 2.65;\nconst PENUMBRA = 4.6;\nconst GAMMA = -0.42;\nconst ECL_T = 12;\n\n// Maria as caps on the sphere: latitude, longitude (east, toward Crisium, is\n// right), angular radius in degrees, how much darker than highland.\nconst MARIA = [\n  // Imbrium; Serenitatis, paler than its neighbours; Tranquillitatis\n  [33, -16, 17, 0.4], [40, -28, 9, 0.38], [24, -3, 7.5, 0.36], [28, 17.5, 10.5, 0.31],\n  [8, 26, 10, 0.46], [12, 35, 7, 0.46], [1, 38, 7, 0.45], [-1, 44, 5, 0.42],\n  // Crisium, Fecunditatis, Nectaris, Nubium, Humorum, Cognitum\n  [17, 59.1, 8.5, 0.47], [-4, 51, 8.5, 0.39], [-13, 49, 7, 0.37], [-15.2, 35.5, 5.5, 0.38],\n  [-20, -16, 10, 0.35], [-15, -8, 5, 0.3], [-24.4, -38.6, 6.6, 0.42], [-10, -22, 7, 0.35],\n  // Insularum round Copernicus, Vaporum, Sinus Aestuum, Sinus Medii\n  [8, -28, 9, 0.38], [14, 4, 5, 0.35], [11, -8, 6, 0.32], [2, 2, 4.5, 0.24],\n  // Oceanus Procellarum, north to south\n  [42, -50, 10, 0.38], [30, -55, 13, 0.42], [17, -58, 13, 0.44], [24, -42, 8, 0.41],\n  [12, -45, 10, 0.41], [4, -56, 12, 0.42], [-5, -50, 10, 0.38], [-12, -42, 7, 0.34],\n  // Frigoris, a ragged band across the north\n  [58, -45, 4.5, 0.3], [55, -35, 5.2, 0.33], [57.5, -24, 4, 0.32], [55.5, -13, 4.4, 0.33],\n  [57, -2, 3.8, 0.3], [55, 9, 4.6, 0.32], [56.5, 20, 4, 0.3], [54, 31, 4.4, 0.29], [52, 40, 3.2, 0.26],\n  // Lacus Somniorum; Smythii, Marginis and Australe on the east limb\n  [37, 31, 5, 0.24], [-2, 86, 4.5, 0.34], [13, 86, 3.8, 0.3], [-40, 86, 6, 0.24],\n];\n// Mountain rings of the big basins: centre, radius in degrees, height. Where\n// a ring stands on highland it is the Apennines, the Caucasus, the Alps.\nconst RINGS = [[32.8, -15.6, 19.5, 0.022], [28, 17.5, 11.8, 0.014], [17, 59.1, 9.6, 0.012], [-15.2, 35.5, 8, 0.01], [-24.4, -38.6, 7.6, 0.008]];\n// Named craters: latitude, longitude, km across, kind (0 plain, 1 young and\n// rayed, 2 dark floor, 3 flooded flat floor).\nconst CRATERS = [\n  // Tycho, Copernicus, Kepler, Aristarchus, Proclus, Menelaus\n  [-43.3, -11.2, 85, 1], [9.6, -20.1, 93, 1], [8.1, -38, 32, 1], [23.7, -47.4, 40, 1], [16.2, 46.8, 28, 1], [16.3, 16, 27, 1],\n  // Plato, Grimaldi, Endymion, Clavius, Ptolemaeus, Alphonsus, Arzachel, Theophilus\n  [51.6, -9.4, 101, 2], [-5.2, -68.6, 173, 2], [53.9, 57, 123, 2], [-58.4, -14.4, 231, 0], [-9.3, -1.9, 153, 3], [-13.4, -2.8, 119, 0], [-18.2, -1.9, 97, 0], [-11.4, 26.4, 100, 0],\n  // Langrenus, Petavius, Vendelinus, Archimedes, Eratosthenes, Maginus, Longomontanus, Schickard\n  [-8.9, 61.1, 132, 0], [-25.1, 60.4, 177, 0], [-16.3, 61.6, 147, 3], [29.7, -4, 83, 3], [14.5, -11.3, 58, 0], [-50, -6.2, 194, 0], [-49.6, -21.7, 145, 0], [-44.3, -54.6, 206, 2],\n  // Gassendi, Posidonius, Atlas, Albategnius, Hipparchus, Stofler, Janssen, Deslandres, Aristoteles, Bailly\n  [-17.6, -40.1, 110, 3], [31.8, 29.9, 95, 3], [46.7, 44.4, 87, 0], [-11.2, 4.1, 129, 0], [-5.1, 5.2, 138, 3], [-41.1, 6, 126, 0], [-44.9, 41.5, 199, 0], [-32.5, -5.2, 234, 3], [50.2, 17.4, 87, 0], [-66.5, -69.1, 303, 0],\n];\n// Ray systems of the first six: rays, e-folding length in radians, strength.\nconst RAYS = [[18, 0.34, 0.15], [12, 0.14, 0.14], [9, 0.08, 0.12], [7, 0.06, 0.14], [6, 0.09, 0.1], [5, 0.05, 0.08]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise on a 64x64 lattice; a seed shifts it so uses do not line up.\nconst LATTICE = new Float32Array(4096);\nfor (let i = 0; i \u003c 4096; i++) LATTICE[i] = hash(i, 977);\n\nfunction noise(x, y, s) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const ux = (x - ix) * (x - ix) * (3 - 2 * (x - ix));\n  const uy = (y - iy) * (y - iy) * (3 - 2 * (y - iy));\n  const i0 = (ix + s * 17) & 63;\n  const i1 = (i0 + 1) & 63;\n  const j0 = ((iy + s * 29) & 63) \u003c\u003c 6;\n  const j1 = (j0 + 64) & 4095;\n  const a = LATTICE[j0 + i0];\n  const b = LATTICE[j0 + i1];\n  const c = LATTICE[j1 + i0];\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + LATTICE[j1 + i1]) * ux * uy;\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp01((v - a) / (b - a));\n  return t * t * (3 - 2 * t);\n}\n\n// A unit vector on the near side: x right (east), y north, z toward Earth.\nfunction dir(lat, lon) {\n  const cb = Math.cos(lat * DEG);\n  return [cb * Math.sin(lon * DEG), Math.sin(lat * DEG), cb * Math.cos(lon * DEG)];\n}\n\n// Calls fn for each texel within angle `reach` of c.\nfunction box(c, reach, fn) {\n  const span = Math.ceil((Math.min(2, reach) * TEX) / 2) + 1;\n  const ci = Math.floor(((c[0] + 1) / 2) * TEX);\n  const cj = Math.floor(((1 - c[1]) / 2) * TEX);\n  for (let j = Math.max(0, cj - span); j \u003c= Math.min(TEX - 1, cj + span); j++)\n    for (let i = Math.max(0, ci - span); i \u003c= Math.min(TEX - 1, ci + span); i++) fn(j * TEX + i);\n}\n\nfunction angle(F, t, c) {\n  return Math.acos(Math.min(1, F.px[t] * c[0] + F.py[t] * c[1] + F.pz[t] * c[2]));\n}\n\n// A texel's place on the sphere, its highland albedo and roughness, and a\n// noise-pushed place to look the maria up from, so every shore wobbles 100\n// to 200 km. Texels outside the disc copy the limb.\nfunction texelInit(F, t, u, v) {\n  const rr = u * u + v * v;\n  const k = rr > 0.9995 ? Math.sqrt(0.9995 / rr) : 1;\n  const x = (u *= k);\n  const y = -(v *= k);\n  const z = Math.sqrt(Math.max(0, 1 - u * u - v * v));\n  F.px[t] = x;\n  F.py[t] = y;\n  F.pz[t] = z;\n  // Albedo wanders a tenth over a few hundred km, the south, sprayed by\n  // Tycho, is brighter, and a texel-sized grain keeps the zoom from smoothing.\n  F.alb[t] = 0.88 + 0.1 * noise(u * 5 + 3, v * 5 + 5, 1) + 0.08 * noise(u * 14, v * 14, 2) + 0.05 * v + 0.06 * noise(u * 47, v * 47, 12);\n  F.hgt[t] = 0.004 * (noise(u * 40, v * 40, 3) - 0.5);\n  const wx = x + 0.07 * (noise(x * 5 + 1, y * 5, 7) - 0.5) + 0.025 * (noise(x * 19, y * 19, 4) - 0.5);\n  const wy = y + 0.07 * (noise(x * 5, y * 5 + 4, 10) - 0.5) + 0.025 * (noise(x * 19 + 7, y * 19, 11) - 0.5);\n  const l = Math.sqrt(wx * wx + wy * wy + z * z);\n  F.wx[t] = wx / l;\n  F.wy[t] = wy / l;\n  F.wz[t] = z / l;\n}\n\n// Lava is flat and low, and darker by the mare's depth, unevenly.\nfunction lava(F, t, m) {\n  F.mare[t] = m;\n  F.alb[t] *= 1 - m * (0.8 + 0.3 * noise(F.px[t] * 9, F.py[t] * 9, 5) + 0.12 * noise(F.px[t] * 30, F.py[t] * 30, 8));\n  F.hgt[t] -= 0.03 * m;\n}\n\n// A crater: bowl, rim, a central peak if big, and albedo: fresh ones bright,\n// Plato's kind dark-floored.\nfunction crater(F, la, lo, km, kind, seed) {\n  const c = dir(la, lo);\n  const rho = km / 2 / 1737;\n  const depth = rho * (kind === 3 ? 0.06 : kind === 1 ? 0.24 : 0.16 + 0.06 * hash(seed, 1));\n  const peak = km > 70 && kind !== 3 ? depth * 0.5 : 0;\n  const flat = kind === 3 || km > 150 ? 6 : 2;\n  const rimA = 0.04 * hash(seed, 3) - 0.01;\n  box(c, rho * 1.8, (t) => {\n    const r = angle(F, t, c) / rho;\n    if (r > 1.8) return;\n    let h = depth * 0.35 * Math.exp(-(((r - 1) / 0.22) ** 2));\n    if (r \u003c 1) h -= depth * (1 - r ** flat);\n    if (peak) h += peak * Math.exp(-((r / 0.16) ** 2));\n    F.hgt[t] += h;\n    if (kind === 1 && r \u003c 1.5) F.alb[t] += 0.3 * (1 - smooth(0.9, 1.5, r));\n    else if (kind === 0) F.alb[t] += rimA * Math.exp(-(((r - 1) / 0.25) ** 2)) - (r \u003c 0.8 ? 0.03 : 0);\n    if (kind === 2 && r \u003c 1) F.alb[t] *= 0.62 + 0.38 * smooth(0.75, 1, r);\n  });\n}\n\n// A rayed crater's light at a texel. Rays start past the dark collar of\n// fresh ejecta, broad and faint, not spokes; only the two either side of\n// the texel's bearing can reach it.\nfunction rayLight(F, t, ci, c, rho, count, len) {\n  const d = angle(F, t, c);\n  if (d > Math.min(Math.PI, len * 4) || d \u003c 1.2 * rho) return 0;\n  const x = F.px[t] - c[0];\n  const y = F.py[t] - c[1];\n  const z = F.pz[t] - c[2];\n  const e = Math.hypot(c[0], c[2]);\n  const th = Math.atan2(y * e - (c[1] * (x * c[0] + z * c[2])) / e, (x * c[2] - z * c[0]) / e);\n  const k0 = Math.floor(((th \u003c 0 ? th + TAU : th) / TAU) * count);\n  const across = Math.sin(d) / (0.012 + 0.03 * d);\n  let sum = 0;\n  for (let kk = k0 - 1; kk \u003c= k0 + 1; kk++) {\n    const k = (kk + count) % count;\n    const id = ci * 31 + k;\n    let dt = th - ((k + 0.8 * hash(id, 21)) / count) * TAU;\n    dt -= Math.round(dt / TAU) * TAU;\n    const lateral = Math.abs(dt) * across;\n    if (lateral \u003c 3) sum += (0.4 + 0.8 * hash(id, 23)) * Math.exp(-lateral * lateral - d / (len * (0.45 + 1.1 * hash(id, 22))));\n  }\n  return Math.min(1, sum) * smooth(1.6 * rho, 4 * rho, d);\n}\n\n// The face map: albedo, how much mare, and the slope the Sun sees.\nfunction buildFace(P) {\n  const T = TEX * TEX;\n  const F = {};\n  for (const key of [\"px\", \"py\", \"pz\", \"alb\", \"hgt\", \"wx\", \"wy\", \"wz\", \"mare\", \"field\", \"dark\"]) F[key] = new Float32Array(T);\n  for (let j = 0; j \u003c TEX; j++) for (let i = 0; i \u003c TEX; i++) texelInit(F, j * TEX + i, ((i + 0.5) / TEX) * 2 - 1, ((j + 0.5) / TEX) * 2 - 1);\n  // Maria: caps add up as a steep field, so only neighbours that touch join,\n  // with a rounded neck, as Serenitatis runs into Tranquillitatis.\n  for (const [la, lo, rad, dark] of MARIA) {\n    const c = dir(la, lo);\n    const rho = rad * DEG;\n    const near = Math.cos(1.6 * rho);\n    box(c, 1.6 * rho + 0.06, (t) => {\n      const cd = F.wx[t] * c[0] + F.wy[t] * c[1] + F.wz[t] * c[2];\n      if (cd \u003c near) return;\n      const d = Math.acos(Math.min(1, cd)) / rho;\n      const w = Math.exp(-3 * d * d);\n      F.field[t] += w;\n      F.dark[t] += w * dark;\n    });\n  }\n  for (let t = 0; t \u003c T; t++) if (F.field[t] > 0.02) lava(F, t, smooth(0.035, 0.12, F.field[t]) * (F.dark[t] / F.field[t]));\n  // Basin rings: a band of peaks a tenth of the radius wide, only on highland.\n  for (const [la, lo, rad, tall] of RINGS) {\n    const c = dir(la, lo);\n    const rho = rad * DEG;\n    box(c, 1.35 * rho, (t) => {\n      const d = angle(F, t, c) / rho;\n      if (d \u003c 0.75 || d > 1.35) return;\n      const peaks = 0.4 + noise(F.px[t] * 70, F.py[t] * 70, 6) * 1.2;\n      F.hgt[t] += tall * Math.exp(-(((d - 1.04) / 0.12) ** 2)) * peaks * (1 - clamp01(F.mare[t] / 0.3));\n    });\n  }\n  CRATERS.forEach(([la, lo, km, kind], n) => crater(F, la, lo, km, kind, n));\n  // 420 random craters, 40 to 180 km, saturate the highlands, not the maria.\n  for (let n = 0; n \u003c 420; n++) {\n    const z = hash(n, 11);\n    const a = hash(n, 12) * TAU;\n    const x = Math.sqrt(1 - z * z) * Math.cos(a);\n    const y = Math.sqrt(1 - z * z) * Math.sin(a);\n    const t = Math.min(TEX - 1, Math.floor(((1 - y) / 2) * TEX)) * TEX + Math.min(TEX - 1, Math.floor(((x + 1) / 2) * TEX));\n    if (F.mare[t] > 0.15 && hash(n, 13) > 0.2) continue;\n    crater(F, Math.asin(y) / DEG, Math.atan2(x, z) / DEG, 40 * Math.pow(4.5, Math.pow(hash(n, 14), 1.7)), 0, 1000 + n);\n  }\n  RAYS.forEach(([count, len, power], ci) => {\n    const c = dir(CRATERS[ci][0], CRATERS[ci][1]);\n    const rho = CRATERS[ci][2] / 2 / 1737;\n    box(c, len * 4, (t) => {\n      const d = angle(F, t, c);\n      F.alb[t] += power * rayLight(F, t, ci, c, rho, count, len) + (d > 1.2 * rho ? 0.1 * Math.exp(-(((d - 1.6 * rho) / (1.6 * rho)) ** 2)) : 0);\n    });\n  });\n  // Slope along the Sun's path, positive toward a Sun rising on the right.\n  const slope = new Float32Array(T);\n  for (let t = 1; t \u003c T - 1; t++) {\n    if (t % TEX === 0 || t % TEX === TEX - 1) continue;\n    const cosl = F.pz[t] / Math.sqrt(F.px[t] * F.px[t] + F.pz[t] * F.pz[t] + 1e-9);\n    const s = (-(F.hgt[t + 1] - F.hgt[t - 1]) / (4 / TEX)) * cosl;\n    slope[t] = s > 0.28 ? 0.28 : s \u003c -0.28 ? -0.28 : s;\n  }\n  for (let t = 0; t \u003c T; t++) F.alb[t] = Math.min(1.15, Math.max(0.3, F.alb[t]));\n  P.alb = F.alb;\n  P.slope = slope;\n  P.mare = F.mare;\n}\n\nfunction sample(arr, u, v) {\n  const fx = Math.min(TEX - 1.0001, Math.max(0, ((u + 1) / 2) * TEX - 0.5));\n  const fy = Math.min(TEX - 1.0001, Math.max(0, ((v + 1) / 2) * TEX - 0.5));\n  const t = (fy | 0) * TEX + (fx | 0);\n  const tx = fx - (fx | 0);\n  const a = arr[t] + (arr[t + 1] - arr[t]) * tx;\n  const b = arr[t + TEX] + (arr[t + TEX + 1] - arr[t + TEX]) * tx;\n  return a + (b - a) * (fy - (fy | 0));\n}\n\n// The far ridge's top, in scene rows, with spruce on it, each a one-LED\n// spire over a body three LEDs wide.\nfunction ridge(x, trees) {\n  let y = 113 + 2.6 * Math.sin(x * 0.08 - 0.9) + 1.2 * Math.sin(x * 0.23 + 1.7);\n  const cell = Math.floor(x / 4.3);\n  for (let k = cell - 2; trees && k \u003c= cell + 2; k++) {\n    const tx = (k + 0.2 + 0.6 * hash(k, 32)) * 4.3;\n    const dx = Math.abs(x - tx);\n    if (hash(k, 31) \u003c 0.5 && dx \u003c 1.9) y = Math.min(y, ridge(tx, false) - (4 + 6 * hash(k, 33)) * (1 - dx / 1.9) ** 1.4);\n  }\n  return y;\n}\n\n// Per-LED geometry for a latitude and zoom: where on the face it looks, its\n// sky, its star.\nfunction buildView(P, lat, zoom) {\n  const m = 1 + 1.5 * zoom;\n  const R = R0 * m;\n  const th = (90 - lat) * DEG;\n  const ct = Math.cos(th);\n  const st = Math.sin(th);\n  const top = [];\n  for (let x = 0; x \u003c W; x++) top.push(ridge(CX + (x + 0.5 - CX) / m, true));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const o = p * 3;\n    const dx = x + 0.5 - CX;\n    const dy = ((p / W) | 0) + 0.5 - CY;\n    const dist = Math.sqrt(dx * dx + dy * dy);\n    const sy = CY + dy / m;\n    // The sky without a Moon and what a full one adds, and the glow: a tight\n    // aureole lit by the limb beside it, so a crescent wears a crescent of\n    // glow, and a wide one lit by the whole.\n    const ty = clamp01(sy / 112);\n    const dd = Math.max(0, dist - R) / m;\n    const wide = 27 * Math.exp(-dd / 13);\n    P.night[o] = 1 + 3 * ty * ty;\n    P.night[o + 1] = 2 + 6 * ty * ty;\n    P.night[o + 2] = 7 + 14 * ty;\n    P.lift[o] = 5 + 7.5 * ty + wide * 0.78;\n    P.lift[o + 1] = 11.5 + 13 * ty + wide * 0.85;\n    P.lift[o + 2] = 28 + 20 * ty + wide;\n    P.near[p] = 62 * Math.exp(-dd / 3.5);\n    const turn = Math.atan2(dy, dx) / TAU;\n    P.bin[p] = (turn - Math.floor(turn)) * LIMB;\n    P.ground[p] = sy > top[x] ? 1 : 0;\n    const a = clamp01(R - dist + 0.5);\n    P.alpha[p] = a;\n    if (a \u003c= 0) continue;\n    const shrink = Math.min(1, Math.sqrt(0.996 / ((dist * dist) / (R * R))));\n    const qx = (dx / R) * shrink;\n    const qy = (dy / R) * shrink;\n    const u = qx * ct + qy * st;\n    const v = -qx * st + qy * ct;\n    P.fu[p] = u;\n    P.fv[p] = v;\n    P.alb[p] = sample(P.face.alb, u, v);\n    P.slp[p] = sample(P.face.slope, u, v);\n    P.mar[p] = sample(P.face.mare, u, v);\n    P.lam[p] = Math.atan2(u, Math.sqrt(Math.max(0, 1 - u * u - v * v)));\n    P.cb[p] = Math.sqrt(Math.max(0, 1 - v * v));\n  }\n  for (let j = 0; j \u003c LIMB; j++) {\n    const qx = 0.94 * Math.cos((j / LIMB) * TAU);\n    const qy = 0.94 * Math.sin((j / LIMB) * TAU);\n    const u = qx * ct + qy * st;\n    const v = -qx * st + qy * ct;\n    P.limbU[j] = u;\n    P.limbV[j] = v;\n    P.limbLam[j] = Math.atan2(u, Math.sqrt(Math.max(0, 1 - u * u - v * v)));\n    P.limbCb[j] = Math.sqrt(1 - v * v);\n  }\n  // Stars turn with the face and stay one LED at any zoom.\n  P.star.fill(0);\n  const cs = Math.cos(th - Math.PI / 2);\n  const ss = Math.sin(th - Math.PI / 2);\n  for (const s of P.stars) {\n    const x = Math.floor(CX + (s[0] * cs - s[1] * ss) * m);\n    const y = Math.floor(CY + (s[0] * ss + s[1] * cs) * m);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = y * W + x;\n    if (P.alpha[p] > 0 || P.ground[p]) continue;\n    for (let c = 0; c \u003c 3; c++) P.star[p * 3 + c] = Math.max(P.star[p * 3 + c], s[2] * s[3 + c]);\n  }\n  P.viewLat = lat;\n  P.viewZoom = zoom;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.face = {};\n  buildFace(P.face);\n  for (const key of [\"night\", \"lift\", \"star\"]) P[key] = new Float32Array(N * 3);\n  for (const key of [\"alpha\", \"fu\", \"fv\", \"alb\", \"slp\", \"mar\", \"lam\", \"cb\", \"near\", \"bin\"]) P[key] = new Float32Array(N);\n  for (const key of [\"limbU\", \"limbV\", \"limbLam\", \"limbCb\", \"limbRaw\", \"limb\"]) P[key] = new Float32Array(LIMB);\n  P.ground = new Uint8Array(N);\n  // Stars, most at the limit of the eye, a few bright, some warm.\n  P.stars = [];\n  for (let n = 0; n \u003c 420; n++) {\n    const r = 112 * Math.sqrt(hash(n, 41));\n    const a = hash(n, 42) * TAU;\n    const mag = hash(n, 43);\n    const warm = hash(n, 44);\n    const col = warm \u003c 0.2 ? [1, 0.82, 0.62] : warm > 0.8 ? [0.78, 0.88, 1] : [0.95, 0.95, 1];\n    P.stars.push([r * Math.cos(a), r * Math.sin(a), 30 + 46 * mag * mag + (mag > 0.93 ? (120 * (mag - 0.93)) / 0.07 : 0), ...col]);\n  }\n  P.day = DAY0;\n  P.pending = false;\n  P.eclipse = -1;\n  P.viewLat = 1e9;\n  P.E = 0;\n  P.shadowU = 0;\n  P.gain = 1;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  if (!P.face) setup(P);\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const lat = Math.max(-90, Math.min(90, k[0]));\n  const zoom = clamp01(k[2]);\n  if (input.btnPressed && input.btnPressed[0] && P.eclipse \u003c 0) P.pending = true;\n  if (Math.abs(lat - P.viewLat) > 0.05 || Math.abs(zoom - P.viewZoom) > 0.0005) buildView(P, lat, zoom);\n  P.gain = Math.pow(2, Math.max(-2, Math.min(2, k[3])));\n  if (P.eclipse >= 0) {\n    P.eclipse += dt;\n    if (P.eclipse >= ECL_T) {\n      P.eclipse = -1;\n      P.pending = false;\n    }\n  } else {\n    const before = Math.floor(P.day / SYNODIC + 0.5);\n    P.day += Math.max(0.5, Math.min(4, k[1])) * dt;\n    const after = Math.floor(P.day / SYNODIC + 0.5);\n    // A booked eclipse stops the clock at full Moon, half a month in.\n    if (P.pending && after > before) {\n      P.day = (after - 0.5) * SYNODIC;\n      P.eclipse = 0;\n    }\n  }\n  const f = P.day / SYNODIC;\n  P.E = (f - Math.floor(f)) * TAU;\n  // The shadow crosses east to west, slowest over totality.\n  const q = (2 * Math.max(0, P.eclipse)) / ECL_T - 1;\n  P.shadowU = 5.7 * (0.6 * q + 0.4 * q * q * q);\n}\n\n// Sunlight reaching a point in the Earth's shadow, per channel: penumbra\n// greys it, the umbra leaves the copper of every sunset on Earth, and the\n// ozone layer edges the umbra in turquoise.\nfunction shadowInto(out, r) {\n  if (r > UMBRA + 0.06) {\n    const p = r >= PENUMBRA ? 0 : Math.pow((PENUMBRA - r) / (PENUMBRA - UMBRA), 1.6);\n    out[0] = 1 - 0.8 * p;\n    out[1] = 1 - 0.83 * p;\n    out[2] = 1 - 0.86 * p;\n    return;\n  }\n  const deep = 0.16 + 0.2 * (r / UMBRA) ** 2;\n  const edge = smooth(UMBRA - 0.12, UMBRA + 0.06, r);\n  const fringe = Math.exp(-(((r - UMBRA + 0.1) / 0.09) ** 2));\n  out[0] = deep + edge * 0.2;\n  out[1] = deep * 0.3 + edge * 0.17 + fringe * 0.06;\n  out[2] = deep * 0.1 + edge * 0.14 + fringe * 0.07;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.face) return;\n  const E = P.E;\n  // Sunrise terminator at longitude 90 - E, sunset at 270 - E, held at the\n  // right limb until full, so on the way to full nothing ever darkens.\n  const lt = Math.PI / 2 - E;\n  const ls = Math.PI * 1.5 - Math.max(E, Math.PI);\n  // Lit fraction, and surface brightness, steep in the last day before full:\n  // the opposition surge.\n  const kf = (1 - Math.cos(E)) / 2;\n  const g = 0.6 + 0.3 * Math.pow(kf, 0.9) + 0.1 * Math.exp(-Math.abs(E - Math.PI) / 0.12);\n  let moonlight = kf * g;\n  const ecl = P.eclipse >= 0;\n  const sh = [1, 1, 1];\n  const shade = (u, v) => {\n    shadowInto(sh, Math.hypot(u - P.shadowU, v - GAMMA));\n    return sh[0] * 0.3 + sh[1] * 0.6 + sh[2] * 0.1;\n  };\n  // The aureole's light by limb sample, spread 17 degrees either way; each\n  // only brightens on the way to full, so the glow does too. In an eclipse\n  // the sky dims with the shadow's mean round the limb.\n  let dim = 0;\n  for (let j = 0; j \u003c LIMB; j++) {\n    const cb = P.limbCb[j];\n    const lam = P.limbLam[j];\n    const t = clamp01((Math.min((lam - lt) * cb, (ls - lam) * cb + 0.05) + 0.01) / W0);\n    const f = ecl ? shade(P.limbU[j], P.limbV[j]) : 1;\n    dim += f / LIMB;\n    P.limbRaw[j] = (ES + (g - ES) * t * (2 - t)) * f;\n  }\n  moonlight *= dim;\n  for (let j = 0; j \u003c LIMB; j++) {\n    let sum = 0;\n    for (let k = -6; k \u003c= 6; k++) sum += SPREAD[k + 6] * P.limbRaw[(j + k + LIMB) % LIMB];\n    P.limb[j] = sum / SPREAD_SUM;\n  }\n  const gain = P.gain;\n  const esR = ES * ES_COL[0];\n  const esG = ES * ES_COL[1];\n  const esB = ES * ES_COL[2];\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    let r = P.night[o] + moonlight * P.lift[o];\n    let gg = P.night[o + 1] + moonlight * P.lift[o + 1];\n    let b = P.night[o + 2] + moonlight * P.lift[o + 2];\n    const near = P.near[p];\n    if (near > 0.3) {\n      const j = P.bin[p] | 0;\n      const glow = near * (P.limb[j] + (P.limb[(j + 1) % LIMB] - P.limb[j]) * (P.bin[p] - j));\n      r += glow * 0.78;\n      gg += glow * 0.85;\n      b += glow;\n    }\n    if (P.star[o + 2] > 0) {\n      r = Math.max(r, P.star[o]);\n      gg = Math.max(gg, P.star[o + 1]);\n      b = Math.max(b, P.star[o + 2]);\n    }\n    if (P.ground[p]) {\n      r = 1;\n      gg = 1.5;\n      b = 3;\n    } else if (P.alpha[p] > 0) {\n      // Earthshine, and sunlight by the Sun's height over the ground, slope\n      // included, so walls facing dawn light first and peaks shine past it.\n      const a = P.alpha[p];\n      const cb = P.cb[p];\n      const lam = P.lam[p];\n      const s = P.slp[p];\n      const t = clamp01((Math.min((lam - lt) * cb + s, (ls - lam) * cb - s + 0.05) + 0.01) / W0);\n      const F = t * (2 - t);\n      const al = P.alb[p] * 255;\n      const ma = P.mar[p] > 0.4 ? g : g * 2.5 * P.mar[p];\n      let sr = g * HI_COL[0] + (MA_COL[0] - HI_COL[0]) * ma;\n      let sg = g * HI_COL[1] + (MA_COL[1] - HI_COL[1]) * ma;\n      let sb = g * HI_COL[2] + (MA_COL[2] - HI_COL[2]) * ma;\n      if (ecl) {\n        shadowInto(sh, Math.hypot(P.fu[p] - P.shadowU, P.fv[p] - GAMMA));\n        sr *= sh[0];\n        sg *= sh[1];\n        sb *= sh[2];\n      }\n      r += (al * (esR + (sr - esR) * F) - r) * a;\n      gg += (al * (esG + (sg - esG) * F) - gg) * a;\n      b += (al * (esB + (sb - esB) * F) - b) * a;\n    }\n    r *= gain;\n    gg *= gain;\n    b *= gain;\n    display.setPixel(p % W, (p / W) | 0, r > 255 ? 255 : r, gg > 255 ? 255 : gg, b > 255 ? 255 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Latitude=-90..90, Days=0.5..4, Zoom=0..1, Exposure=-2..2","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Latitude","min":-90,"max":90,"about":"Where the camera stands, which turns the Moon's face against the horizon: at the equator, where it opens, the crescent lies on its back like a boat; at the North Pole north is up and it is lit from the right; at the South Pole the face hangs upside down."},{"name":"Days","min":0.5,"max":4,"about":"Days of the month a second: at 2 the crescent of day 2.6 is full six seconds later and a lunation takes 15 seconds; 0.5 to 4."},{"name":"Zoom","min":0,"max":1,"about":"The lens: at 0 the disc is 60 LEDs across, the panel's width; turned up it magnifies 2.5 times until maria, craters and the terminator fill the frame."},{"name":"Exposure","min":-2,"max":2,"about":"Stops either side of a full-Moon exposure: two down, earthshine and faint stars go black; two up, the dark side shows its maria and the lit Moon burns out white."}],"start":[0,2,0,0.06],"measures":{"motion":0.058,"detail":0.023,"edges":0.2973,"complexity":1.178,"coverage":0.7526,"colour":0.083,"drift":0.3482},"knobResponse":[0.0549,0.1588,0.1276,0.2614]},{"slug":"mandelbrot","title":"Mandel Dive","family":"fractal","round":2,"note":"망델브로 집합 전체가 서 있다가 가장자리의 한 점으로 끝없이 떨어져 들어가요. 처음 자리는 안테나 위의 미니 망델브로라서, 다 들어가면 처음과 같은 그림으로 녹아들어 다시 떨어져요.","idea":"The whole Mandelbrot set stands on the panel and the view falls toward one point of its edge, colour bands flowing out of the black, until the dive fades back into the whole set and falls again.","buttons":"K1 tap starts the next dive now.","code":"// ===== Patternflow pattern =====\n// Title:   Mandel Dive\n// Family:  fractal\n// Idea:    The whole Mandelbrot set stands on the panel and the view falls toward one point of its edge, colour bands flowing out of the black, until the dive fades back into the whole set and falls again.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.25..4, Spot=0..3, Bands=1..3.5\n//\n// Knob 1: Hue. Turns the colour bands around the wheel.\n// Knob 2: Speed. How fast the view falls, from one doubling every eight seconds to two a second.\n// Knob 3: Spot. Where the dive goes: a mini-brot that is the whole set again, seahorse valley, elephant valley or a spiral.\n// Knob 4: Bands. How tightly the colour bands are packed, from slow washes to fine contour rings.\n// Buttons: K1 tap starts the next dive now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Width across the panel at the start of a dive: the whole set, antenna up.\nconst W0 = 2.9;\nconst C0R = -0.68;\nconst C0I = 0;\n// Doublings the old and the new dive overlap while one fades into the other.\nconst FADE = 1.6;\n\n// The period-9 mini-brot on the antenna is the whole set shrunk by\n// MINI_SIZE about the point below, so a dive toward that point ends on the\n// picture it started from.\nconst MINI_NUCLEUS = -1.78586564641067;\nconst MINI_SIZE = 3.465e-4;\n// Target re and im, doublings deep, spin in radians per doubling, how fast\n// the target drifts to the middle of the panel (0 keeps it where it starts),\n// and a turn made over the first doublings. Seahorse valley is a crack\n// between two black discs; turned upright it runs down the tall panel\n// instead of across it.\nconst SPOTS = [\n  [MINI_NUCLEUS / (1 - MINI_SIZE), 0, Math.log2(1 / MINI_SIZE), 0, 0, 0],\n  [-0.743643887037151, 0.13182590420533, 14.6, 0.1, 0.14, Math.PI / 2],\n  [0.3157737473855642, 0.0372087816115407, 17.5, -0.09, 0.12, 0],\n  [-0.761574, -0.0847596, 11.8, 0.14, 0.14, -Math.PI / 2],\n];\n\n// The LEDs iterated afresh on each of four frames, as x and y parity. The\n// other three in four are carried over from where the last frame had them.\nconst PHASE_X = [0, 1, 1, 0];\nconst PHASE_Y = [0, 1, 0, 1];\n\nfunction dive() {\n  return {\n    spot: 0,\n    zeta: 0,\n    boost: 1.3,\n    dark: 0.3,\n    mu: new Float32Array(N),\n    last: new Float32Array(N),\n    // Frames since each LED's value was iterated.\n    age: new Uint8Array(N),\n    lastAge: new Uint8Array(N),\n    // The view of the last frame: target, scaled cos and sin, target's place on the panel.\n    view: new Float64Array(6),\n    fresh: true,\n  };\n}\n\nexport function setup(params) {\n  params.a = dive();\n  params.b = dive();\n  params.fading = false;\n  params.started = false;\n  params.frame = 0;\n  params.rgb = new Float32Array(N * 3);\n  params.lut = new Float32Array(512 * 3);\n  params.lutHue = -1;\n  params.phase = 0;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Two bands of the palette: dark troughs between crests of neighbouring hues.\nfunction buildLut(params, hue) {\n  const lut = params.lut;\n  for (let i = 0; i \u003c 512; i++) {\n    const a = (i / 256) * Math.PI;\n    const band = 0.5 + 0.5 * Math.cos(a * 2);\n    const h = hue + 0.17 * Math.sin(a) + 0.05 * band;\n    hsv(h, 0.92 - 0.45 * band * band * band, 0.2 + 0.72 * Math.pow(band, 1.3), lut, i * 3);\n  }\n  params.lutHue = hue;\n}\n\n// Doublings to fall this frame. The way into a valley passes doublings that\n// are mostly the black body of the set, so the fall hurries while the panel is dark.\nfunction fall(d, dt, rate) {\n  d.boost += (1 + 12 * d.dark * d.dark * d.dark - d.boost) * Math.min(1, dt * 3);\n  return dt * rate * d.boost;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 1];\n  // K1 at 0 opens on cyan rather than the red most of the study opens on.\n  const hue = k[0] + 0.53;\n  if (hue !== params.lutHue) buildLut(params, hue);\n  params.bands = k[3];\n  const spot = Math.max(0, Math.min(3, Math.round(k[2])));\n  if (!params.started) {\n    params.a.spot = spot;\n    params.started = true;\n  }\n  const rate = k[1] * 0.5;\n  const a = params.a;\n  const b = params.b;\n  // While one dive fades into the next they fall together, so the mini-brot\n  // and the whole set it gives way to stay the same size.\n  const step = params.fading ? fall(b, dt, rate) : fall(a, dt, rate);\n  a.zeta += step;\n  if (params.fading) b.zeta += step;\n  params.phase += dt * (0.3 + rate * 0.3);\n\n  const kick = input.btnPressed && input.btnPressed[0];\n  if (!params.fading && (a.zeta >= SPOTS[a.spot][2] || kick || spot !== a.spot)) {\n    params.fading = true;\n    b.spot = spot;\n    b.zeta = 0;\n    b.boost = 1.3;\n    b.dark = 0.3;\n    b.fresh = true;\n  }\n  if (params.fading && b.zeta >= FADE) {\n    params.a = b;\n    params.b = a;\n    params.fading = false;\n  }\n}\n\n// log2 of the smooth escape count at one point, or -1 inside the set.\nfunction escape(cr, ci, maxit) {\n  // The main cardioid and the period-2 disc are inside without iterating.\n  const xr = cr - 0.25;\n  const q = xr * xr + ci * ci;\n  if (q * (q + xr) \u003c= 0.25 * ci * ci || (cr + 1) * (cr + 1) + ci * ci \u003c= 0.0625) return -1;\n  let zr = 0;\n  let zi = 0;\n  let zr2 = 0;\n  let zi2 = 0;\n  let n = 0;\n  let sr = 0;\n  let si = 0;\n  let span = 8;\n  let count = 0;\n  while (n \u003c maxit) {\n    zi = 2 * zr * zi + ci;\n    zr = zr2 - zi2 + cr;\n    zr2 = zr * zr;\n    zi2 = zi * zi;\n    n++;\n    if (zr2 + zi2 > 1024) return Math.log2(n + 2 - Math.log2(0.5 * Math.log2(zr2 + zi2)));\n    // An orbit that comes back to where it was is caught in a cycle: inside.\n    const dr = zr - sr;\n    const di = zi - si;\n    if (dr * dr + di * di \u003c 1e-20) return -1;\n    if (++count === span) {\n      count = 0;\n      span += span;\n      sr = zr;\n      si = zi;\n    }\n  }\n  return -1;\n}\n\n// One view of the set into the dive's `mu`. A quarter of the LEDs are\n// iterated each frame; the rest look up where they were on the last frame,\n// which the fall has only moved by a fraction of an LED.\nfunction render(d, frame) {\n  const s = SPOTS[d.spot];\n  const tr = s[0];\n  const ti = s[1];\n  const zeta = d.zeta;\n  const px = (W0 / W) * Math.pow(2, -zeta);\n  const turn = Math.min(1, zeta / 4);\n  const ang = s[3] * zeta + s[5] * turn * turn * (3 - 2 * turn);\n  const ca = Math.cos(ang) * px;\n  const sa = Math.sin(ang) * px;\n  // Where the target sits on the panel, in LEDs from the middle; real runs down the panel.\n  const drift = Math.pow(2, -s[4] * zeta);\n  const ty = ((tr - C0R) / (W0 / W)) * drift;\n  const tx = ((ti - C0I) / (W0 / W)) * drift;\n  const maxit = Math.min(560, 110 + Math.floor(zeta * 24));\n\n  const swap = d.last;\n  d.last = d.mu;\n  d.mu = swap;\n  const swapAge = d.lastAge;\n  d.lastAge = d.age;\n  d.age = swapAge;\n  const mu = d.mu;\n  const last = d.last;\n  const age = d.age;\n  const lastAge = d.lastAge;\n  const v = d.view;\n  const lca = v[2];\n  const lsa = v[3];\n  const lk = 1 / (lca * lca + lsa * lsa);\n  const fresh = d.fresh;\n  const fx = PHASE_X[frame & 3];\n  const fy = PHASE_Y[frame & 3];\n  let dark = 0;\n  let counted = 0;\n  for (let y = 0; y \u003c H; y++) {\n    const oy = y + 0.5 - H / 2 - ty;\n    for (let x = 0; x \u003c W; x++) {\n      const ox = x + 0.5 - W / 2 - tx;\n      const cr = tr + oy * ca - ox * sa;\n      const ci = ti + oy * sa + ox * ca;\n      const p = y * W + x;\n      if (!fresh && ((x & 1) !== fx || (y & 1) !== fy)) {\n        const dr = cr - v[0];\n        const di = ci - v[1];\n        const ly = Math.round((dr * lca + di * lsa) * lk + v[5] + H / 2 - 0.5);\n        const lx = Math.round((di * lca - dr * lsa) * lk + v[4] + W / 2 - 0.5);\n        // A value is carried at most three frames, or it would smear\n        // outward along the fall.\n        const q = ly * W + lx;\n        if (lx >= 0 && lx \u003c W && ly >= 0 && ly \u003c H && lastAge[q] \u003c 3) {\n          mu[p] = last[q];\n          age[p] = lastAge[q] + 1;\n          continue;\n        }\n      }\n      const m = escape(cr, ci, maxit);\n      mu[p] = m;\n      age[p] = 0;\n      counted++;\n      if (m \u003c 0) dark++;\n    }\n  }\n  v[0] = tr;\n  v[1] = ti;\n  v[2] = ca;\n  v[3] = sa;\n  v[4] = tx;\n  v[5] = ty;\n  d.fresh = false;\n  d.dark = dark / counted;\n}\n\n// Colour bands from the escape count, dimmed wherever the count changes\n// faster than a band or so per LED: on 64 by 128 LEDs the lace at the edge\n// of the set would otherwise be confetti.\nfunction shade(params, mu, weight, first) {\n  const rgb = params.rgb;\n  const lut = params.lut;\n  const dens = params.bands;\n  const phase = params.phase;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const l = mu[p];\n      let f = 0;\n      let i = 0;\n      if (l >= 0) {\n        const a = mu[x > 0 ? p - 1 : p];\n        const b = mu[x \u003c W - 1 ? p + 1 : p];\n        const c = mu[y > 0 ? p - W : p];\n        const d = mu[y \u003c H - 1 ? p + W : p];\n        if (a >= 0 && b >= 0 && c >= 0 && d >= 0) {\n          const g = Math.max(Math.abs(b - a), Math.abs(d - c)) * dens;\n          const r = g / 0.5;\n          f = weight / (1 + r * r);\n          // Adding the phase moves the bands outward, the way the fall does.\n          let s = (l * dens + phase) * 0.5;\n          s -= Math.floor(s);\n          i = Math.floor(s * 512) * 3;\n        }\n      }\n      const o = p * 3;\n      if (first) {\n        rgb[o] = lut[i] * f;\n        rgb[o + 1] = lut[i + 1] * f;\n        rgb[o + 2] = lut[i + 2] * f;\n      } else {\n        rgb[o] += lut[i] * f;\n        rgb[o + 1] += lut[i + 1] * f;\n        rgb[o + 2] += lut[i + 2] * f;\n      }\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const rgb = params.rgb;\n  const frame = params.frame++;\n  render(params.a, frame);\n  if (!params.fading) {\n    shade(params, params.a.mu, 1, true);\n  } else {\n    const m0 = Math.min(1, params.b.zeta / FADE);\n    const m = m0 * m0 * (3 - 2 * m0);\n    shade(params, params.a.mu, 1 - m, true);\n    render(params.b, frame);\n    shade(params, params.b.mu, m, false);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[p], rgb[p + 1], rgb[p + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-mandelbrot","type":"code","name":"mandelbrot","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Mandel Dive\n// Family:  fractal\n// Idea:    The whole Mandelbrot set stands on the panel and the view falls toward one point of its edge, colour bands flowing out of the black, until the dive fades back into the whole set and falls again.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.25..4, Spot=0..3, Bands=1..3.5\n//\n// Knob 1: Hue. Turns the colour bands around the wheel.\n// Knob 2: Speed. How fast the view falls, from one doubling every eight seconds to two a second.\n// Knob 3: Spot. Where the dive goes: a mini-brot that is the whole set again, seahorse valley, elephant valley or a spiral.\n// Knob 4: Bands. How tightly the colour bands are packed, from slow washes to fine contour rings.\n// Buttons: K1 tap starts the next dive now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Width across the panel at the start of a dive: the whole set, antenna up.\nconst W0 = 2.9;\nconst C0R = -0.68;\nconst C0I = 0;\n// Doublings the old and the new dive overlap while one fades into the other.\nconst FADE = 1.6;\n\n// The period-9 mini-brot on the antenna is the whole set shrunk by\n// MINI_SIZE about the point below, so a dive toward that point ends on the\n// picture it started from.\nconst MINI_NUCLEUS = -1.78586564641067;\nconst MINI_SIZE = 3.465e-4;\n// Target re and im, doublings deep, spin in radians per doubling, how fast\n// the target drifts to the middle of the panel (0 keeps it where it starts),\n// and a turn made over the first doublings. Seahorse valley is a crack\n// between two black discs; turned upright it runs down the tall panel\n// instead of across it.\nconst SPOTS = [\n  [MINI_NUCLEUS / (1 - MINI_SIZE), 0, Math.log2(1 / MINI_SIZE), 0, 0, 0],\n  [-0.743643887037151, 0.13182590420533, 14.6, 0.1, 0.14, Math.PI / 2],\n  [0.3157737473855642, 0.0372087816115407, 17.5, -0.09, 0.12, 0],\n  [-0.761574, -0.0847596, 11.8, 0.14, 0.14, -Math.PI / 2],\n];\n\n// The LEDs iterated afresh on each of four frames, as x and y parity. The\n// other three in four are carried over from where the last frame had them.\nconst PHASE_X = [0, 1, 1, 0];\nconst PHASE_Y = [0, 1, 0, 1];\n\nfunction dive() {\n  return {\n    spot: 0,\n    zeta: 0,\n    boost: 1.3,\n    dark: 0.3,\n    mu: new Float32Array(N),\n    last: new Float32Array(N),\n    // Frames since each LED's value was iterated.\n    age: new Uint8Array(N),\n    lastAge: new Uint8Array(N),\n    // The view of the last frame: target, scaled cos and sin, target's place on the panel.\n    view: new Float64Array(6),\n    fresh: true,\n  };\n}\n\nexport function setup(params) {\n  params.a = dive();\n  params.b = dive();\n  params.fading = false;\n  params.started = false;\n  params.frame = 0;\n  params.rgb = new Float32Array(N * 3);\n  params.lut = new Float32Array(512 * 3);\n  params.lutHue = -1;\n  params.phase = 0;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Two bands of the palette: dark troughs between crests of neighbouring hues.\nfunction buildLut(params, hue) {\n  const lut = params.lut;\n  for (let i = 0; i \u003c 512; i++) {\n    const a = (i / 256) * Math.PI;\n    const band = 0.5 + 0.5 * Math.cos(a * 2);\n    const h = hue + 0.17 * Math.sin(a) + 0.05 * band;\n    hsv(h, 0.92 - 0.45 * band * band * band, 0.2 + 0.72 * Math.pow(band, 1.3), lut, i * 3);\n  }\n  params.lutHue = hue;\n}\n\n// Doublings to fall this frame. The way into a valley passes doublings that\n// are mostly the black body of the set, so the fall hurries while the panel is dark.\nfunction fall(d, dt, rate) {\n  d.boost += (1 + 12 * d.dark * d.dark * d.dark - d.boost) * Math.min(1, dt * 3);\n  return dt * rate * d.boost;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 1];\n  // K1 at 0 opens on cyan rather than the red most of the study opens on.\n  const hue = k[0] + 0.53;\n  if (hue !== params.lutHue) buildLut(params, hue);\n  params.bands = k[3];\n  const spot = Math.max(0, Math.min(3, Math.round(k[2])));\n  if (!params.started) {\n    params.a.spot = spot;\n    params.started = true;\n  }\n  const rate = k[1] * 0.5;\n  const a = params.a;\n  const b = params.b;\n  // While one dive fades into the next they fall together, so the mini-brot\n  // and the whole set it gives way to stay the same size.\n  const step = params.fading ? fall(b, dt, rate) : fall(a, dt, rate);\n  a.zeta += step;\n  if (params.fading) b.zeta += step;\n  params.phase += dt * (0.3 + rate * 0.3);\n\n  const kick = input.btnPressed && input.btnPressed[0];\n  if (!params.fading && (a.zeta >= SPOTS[a.spot][2] || kick || spot !== a.spot)) {\n    params.fading = true;\n    b.spot = spot;\n    b.zeta = 0;\n    b.boost = 1.3;\n    b.dark = 0.3;\n    b.fresh = true;\n  }\n  if (params.fading && b.zeta >= FADE) {\n    params.a = b;\n    params.b = a;\n    params.fading = false;\n  }\n}\n\n// log2 of the smooth escape count at one point, or -1 inside the set.\nfunction escape(cr, ci, maxit) {\n  // The main cardioid and the period-2 disc are inside without iterating.\n  const xr = cr - 0.25;\n  const q = xr * xr + ci * ci;\n  if (q * (q + xr) \u003c= 0.25 * ci * ci || (cr + 1) * (cr + 1) + ci * ci \u003c= 0.0625) return -1;\n  let zr = 0;\n  let zi = 0;\n  let zr2 = 0;\n  let zi2 = 0;\n  let n = 0;\n  let sr = 0;\n  let si = 0;\n  let span = 8;\n  let count = 0;\n  while (n \u003c maxit) {\n    zi = 2 * zr * zi + ci;\n    zr = zr2 - zi2 + cr;\n    zr2 = zr * zr;\n    zi2 = zi * zi;\n    n++;\n    if (zr2 + zi2 > 1024) return Math.log2(n + 2 - Math.log2(0.5 * Math.log2(zr2 + zi2)));\n    // An orbit that comes back to where it was is caught in a cycle: inside.\n    const dr = zr - sr;\n    const di = zi - si;\n    if (dr * dr + di * di \u003c 1e-20) return -1;\n    if (++count === span) {\n      count = 0;\n      span += span;\n      sr = zr;\n      si = zi;\n    }\n  }\n  return -1;\n}\n\n// One view of the set into the dive's `mu`. A quarter of the LEDs are\n// iterated each frame; the rest look up where they were on the last frame,\n// which the fall has only moved by a fraction of an LED.\nfunction render(d, frame) {\n  const s = SPOTS[d.spot];\n  const tr = s[0];\n  const ti = s[1];\n  const zeta = d.zeta;\n  const px = (W0 / W) * Math.pow(2, -zeta);\n  const turn = Math.min(1, zeta / 4);\n  const ang = s[3] * zeta + s[5] * turn * turn * (3 - 2 * turn);\n  const ca = Math.cos(ang) * px;\n  const sa = Math.sin(ang) * px;\n  // Where the target sits on the panel, in LEDs from the middle; real runs down the panel.\n  const drift = Math.pow(2, -s[4] * zeta);\n  const ty = ((tr - C0R) / (W0 / W)) * drift;\n  const tx = ((ti - C0I) / (W0 / W)) * drift;\n  const maxit = Math.min(560, 110 + Math.floor(zeta * 24));\n\n  const swap = d.last;\n  d.last = d.mu;\n  d.mu = swap;\n  const swapAge = d.lastAge;\n  d.lastAge = d.age;\n  d.age = swapAge;\n  const mu = d.mu;\n  const last = d.last;\n  const age = d.age;\n  const lastAge = d.lastAge;\n  const v = d.view;\n  const lca = v[2];\n  const lsa = v[3];\n  const lk = 1 / (lca * lca + lsa * lsa);\n  const fresh = d.fresh;\n  const fx = PHASE_X[frame & 3];\n  const fy = PHASE_Y[frame & 3];\n  let dark = 0;\n  let counted = 0;\n  for (let y = 0; y \u003c H; y++) {\n    const oy = y + 0.5 - H / 2 - ty;\n    for (let x = 0; x \u003c W; x++) {\n      const ox = x + 0.5 - W / 2 - tx;\n      const cr = tr + oy * ca - ox * sa;\n      const ci = ti + oy * sa + ox * ca;\n      const p = y * W + x;\n      if (!fresh && ((x & 1) !== fx || (y & 1) !== fy)) {\n        const dr = cr - v[0];\n        const di = ci - v[1];\n        const ly = Math.round((dr * lca + di * lsa) * lk + v[5] + H / 2 - 0.5);\n        const lx = Math.round((di * lca - dr * lsa) * lk + v[4] + W / 2 - 0.5);\n        // A value is carried at most three frames, or it would smear\n        // outward along the fall.\n        const q = ly * W + lx;\n        if (lx >= 0 && lx \u003c W && ly >= 0 && ly \u003c H && lastAge[q] \u003c 3) {\n          mu[p] = last[q];\n          age[p] = lastAge[q] + 1;\n          continue;\n        }\n      }\n      const m = escape(cr, ci, maxit);\n      mu[p] = m;\n      age[p] = 0;\n      counted++;\n      if (m \u003c 0) dark++;\n    }\n  }\n  v[0] = tr;\n  v[1] = ti;\n  v[2] = ca;\n  v[3] = sa;\n  v[4] = tx;\n  v[5] = ty;\n  d.fresh = false;\n  d.dark = dark / counted;\n}\n\n// Colour bands from the escape count, dimmed wherever the count changes\n// faster than a band or so per LED: on 64 by 128 LEDs the lace at the edge\n// of the set would otherwise be confetti.\nfunction shade(params, mu, weight, first) {\n  const rgb = params.rgb;\n  const lut = params.lut;\n  const dens = params.bands;\n  const phase = params.phase;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const l = mu[p];\n      let f = 0;\n      let i = 0;\n      if (l >= 0) {\n        const a = mu[x > 0 ? p - 1 : p];\n        const b = mu[x \u003c W - 1 ? p + 1 : p];\n        const c = mu[y > 0 ? p - W : p];\n        const d = mu[y \u003c H - 1 ? p + W : p];\n        if (a >= 0 && b >= 0 && c >= 0 && d >= 0) {\n          const g = Math.max(Math.abs(b - a), Math.abs(d - c)) * dens;\n          const r = g / 0.5;\n          f = weight / (1 + r * r);\n          // Adding the phase moves the bands outward, the way the fall does.\n          let s = (l * dens + phase) * 0.5;\n          s -= Math.floor(s);\n          i = Math.floor(s * 512) * 3;\n        }\n      }\n      const o = p * 3;\n      if (first) {\n        rgb[o] = lut[i] * f;\n        rgb[o + 1] = lut[i + 1] * f;\n        rgb[o + 2] = lut[i + 2] * f;\n      } else {\n        rgb[o] += lut[i] * f;\n        rgb[o + 1] += lut[i + 1] * f;\n        rgb[o + 2] += lut[i + 2] * f;\n      }\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const rgb = params.rgb;\n  const frame = params.frame++;\n  render(params.a, frame);\n  if (!params.fading) {\n    shade(params, params.a.mu, 1, true);\n  } else {\n    const m0 = Math.min(1, params.b.zeta / FADE);\n    const m = m0 * m0 * (3 - 2 * m0);\n    shade(params, params.a.mu, 1 - m, true);\n    render(params.b, frame);\n    shade(params, params.b.mu, m, false);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[p], rgb[p + 1], rgb[p + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.25..4, Spot=0..3, Bands=1..3.5","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colour bands around the wheel."},{"name":"Speed","min":0.25,"max":4,"about":"How fast the view falls, from one doubling every eight seconds to two a second."},{"name":"Spot","min":0,"max":3,"about":"Where the dive goes: a mini-brot that is the whole set again, seahorse valley, elephant valley or a spiral."},{"name":"Bands","min":1,"max":3.5,"about":"How tightly the colour bands are packed, from slow washes to fine contour rings."}],"start":[0,2,0,1],"measures":{"motion":1.8353,"detail":0.0554,"edges":0.2209,"complexity":1.9032,"coverage":0.846,"colour":0.2924,"drift":0.4001},"knobResponse":[0.262,0.2907,0.2828,0.2216]},{"slug":"marble-run","title":"Marble Run","family":"toy","round":17,"note":"패널 높이의 구슬 굴리기 장난감이에요. 고양이눈 유리구슬이 깔때기를 돌고 지그재그 레일 셋과 나선, 실로폰을 지나 내려오면 옆의 나사 리프트가 다시 꼭대기로 올리고, 구슬이 지나는 플라스틱 조각에는 불이 들어와요. K1 을 누르면 구슬 여섯 개를 깔때기에 쏟아요.","idea":"Glass marbles roll down a marble run as tall as the panel, round a funnel, along three zigzag tracks, down a spiral and over a row of chimes, while an Archimedes screw at the side carries them back up, and each piece of clear coloured plastic lights up while a marble runs on it.","buttons":"K1 tap tips a handful of six marbles into the funnel from above; they run one lap and leave at the foot of the screw.","code":"// ===== Patternflow pattern =====\n// Title:   Marble Run\n// Family:  toy\n// Idea:    Glass marbles roll down a marble run as tall as the panel, round a funnel, along three zigzag tracks, down a spiral and over a row of chimes, while an Archimedes screw at the side carries them back up, and each piece of clear coloured plastic lights up while a marble runs on it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after the zigzag marble runs, funnels and screw lifts of the toy shop\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Paint=0..1, Speed=0.2..3, Marbles=6..28, Tilt=0..1\n//\n// Knob 1: Paint. Turns the plastic parts and the marbles' swirls round the colour wheel together, starting from a blue funnel over green, yellow and red tracks.\n// Knob 2: Speed. How fast the film runs: at 2 a marble takes about 30 s round the loop, 6 s of it up the screw; at 0.2 it drifts down in slow motion, at 3 it runs half as fast again.\n// Knob 3: Marbles. How many marbles are in the run, from 6 to 28; the screw lets them on at an even spacing, so they stay spread round the loop.\n// Knob 4: Tilt. How steep the three zigzag tracks, the chimes and the trough hang, from a drop of 2 LEDs along each track to 8, and so how fast the marbles run down them.\n// Buttons: K1 tap tips a handful of six marbles into the funnel from above; they run one lap and leave at the foot of the screw.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Marble radius and the film's gravity, in LEDs and seconds. A rolling ball\n// takes five sevenths of the pull along a slope.\nconst RM = 3.4;\nconst G = 420;\nconst ROLL = 5 / 7;\nconst DRAG = 0.6;\n// The two wooden posts of the stand (x 0..1 and 52..53) and the top of each\n// zigzag track's high end, 16 rows apart so a marble clears the track above.\nconst POST = 52;\nconst TRACK_Y = [34, 50, 66];\n// The funnel: centre, rim and throat rows, rim and throat radius, and how\n// round its rim looks from just above.\nconst FUN = { cx: 26, rim: 12, throat: 25, R: 20, r0: 2.5, e: 3 };\n// The spiral: centre, radius, top, rows per turn, turns, how round.\nconst HEL = { cx: 27, R: 21.5, y0: 80, pitch: 9, turns: 2, e: 2.5 };\n// The screw lift: centre column, top and bottom rows, rows per turn, where a\n// marble gets on and where it gets off.\nconst SCR = { cx: 58, top: 2, bot: 123, pitch: 10, inlet: 119.6, out: 6.3 };\n// Marble modes.\nconst RAIL = 0;\nconst FALL = 1;\nconst FUNNEL = 2;\nconst LIFT = 3;\n// Paths, by index: the chute from the screw, three tracks, the spiral, the\n// chimes and the trough back to the screw. Index 7 is the funnel's light.\nconst CHUTE = 0;\nconst HELIX = 4;\nconst CHIMES = 5;\nconst TROUGH = 6;\nconst BARS = 8;\nconst WOOD = [190, 138, 82];\n// Hues of the plastic at Paint 0: chute, the three tracks, spiral, funnel;\n// and of the marbles' swirls.\nconst HUE = [0.62, 0.36, 0.14, 0.97, 0.47, 0, 0, 0.56];\nconst SWIRL = [0.6, 0.0, 0.33, 0.13, 0.8, 0.5];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// A path of marble centres, sampled every half LED of its length in space:\n// screen x and y, depth z (1 nearest), and true height h for the slope.\nfunction sample(fn, steps) {\n  const X = [];\n  const Y = [];\n  const Z = [];\n  const Hh = [];\n  let last = null;\n  let acc = 0.5;\n  for (let i = 0; i \u003c= steps; i++) {\n    const q = fn(i / steps);\n    if (last) acc += Math.hypot(q[0] - last[0], q[3] - last[3], q[4] - last[4]);\n    last = q;\n    if (acc >= 0.5 || i === steps) {\n      acc = 0;\n      X.push(q[0]);\n      Y.push(q[1]);\n      Z.push(q[2]);\n      Hh.push(q[3]);\n    }\n  }\n  return { X, Y, Z, Hh, n: X.length, L: (X.length - 1) * 0.5 };\n}\n\n// A straight rail whose top runs from (x0, y0) to (x1, y1); the marble rides\n// RM + 0.5 above it.\nfunction rail(x0, y0, x1, y1) {\n  const p = sample((t) => [x0 + (x1 - x0) * t, y0 + (y1 - y0) * t - RM - 0.5, 0, y0 + (y1 - y0) * t, 0], 400);\n  return Object.assign(p, { x0, y0, x1, y1 });\n}\n\n// Position, depth, slope and sideways run of a path at length u.\nfunction at(p, u) {\n  const i = clamp(u * 2, 0, p.n - 1.001);\n  const i0 = Math.floor(i);\n  const f = i - i0;\n  const g = (A) => A[i0] + (A[i0 + 1] - A[i0]) * f;\n  return [g(p.X), g(p.Y), g(p.Z), (p.Hh[i0 + 1] - p.Hh[i0]) * 2, (p.X[i0 + 1] - p.X[i0]) * 2];\n}\n\n// The tracks, chimes and trough hang by the tilt; the rest is built once.\nfunction buildPaths(P) {\n  const d = 2 + 6 * P.tilt;\n  if (!P.paths) {\n    const { cx, R, y0, pitch, turns, e } = HEL;\n    const helix = sample((t) => {\n      const a = t * turns * 2 * Math.PI;\n      const h = y0 + t * turns * pitch;\n      return [cx + R * Math.cos(a), h + e * Math.sin(a), Math.sin(a), h, R * Math.sin(a)];\n    }, 3000);\n    P.paths = [rail(57, 10, 47, 15), 0, 0, 0, helix];\n  }\n  P.paths[CHIMES] = rail(48, 104, 6, 107 + 4 * P.tilt);\n  P.paths[TROUGH] = rail(6, 120 - 4 * P.tilt, 57, 123);\n  for (let k = 0; k \u003c 3; k++) {\n    const y = TRACK_Y[k];\n    P.paths[k + 1] = k % 2 ? rail(51, y, 10, y + d) : rail(2, y, 44, y + d);\n  }\n  // Marbles on a track keep their place along it when the tilt changes.\n  for (const m of P.marbles) if (m.mode === RAIL) m.u = Math.min(m.u, P.paths[m.p].L);\n}\n\nfunction newMarble(hue) {\n  return { mode: RAIL, p: TROUGH, u: 0, v: 6, roll: hue * 2.3, hue, x: 0, y: 0, z: 0, extra: false };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.tilt = 0.06;\n  P.paint = 0;\n  P.marbles = [];\n  P.paths = null;\n  buildPaths(P);\n  for (const k of [\"base\", \"buf\"]) P[k] = new Float32Array(N * 3);\n  for (const k of [\"baseZ\", \"zb\", \"mask\", \"tmp\"]) P[k] = new Float32Array(N);\n  P.ring = new Float32Array(BARS);\n  P.light = new Float32Array(8);\n  Object.assign(P, { screw: 0, slot: 0, t: 0, lastPick: -99, lastAdd: -99, builtAt: \"\", started: false, hueNext: 0 });\n}\n\n// Leaves a rail at its far end: into the funnel, off the end of a track, the\n// spiral or the chimes and down, or into the queue at the screw.\nfunction leave(P, m) {\n  const p = P.paths[m.p];\n  if (m.p === CHUTE) return Object.assign(m, { mode: FUNNEL, r: FUN.R, ph: 0 });\n  if (m.p === TROUGH) return Object.assign(m, { u: p.L, v: 0 });\n  const q = at(p, p.L);\n  const right = q[4] > 0;\n  let lo = right ? 44 : 2 + RM;\n  let hi = right ? POST - RM - 0.3 : 10;\n  if (m.p === HELIX) [lo, hi] = [45.5, 49.5];\n  if (m.p === CHIMES) [lo, hi] = [2 + RM, 8];\n  fall(m, q[0], q[1], m.v * q[4] * 0.6, m.v * q[3] * 0.5, m.p + 1, lo, hi);\n}\n\nfunction fall(m, x, y, vx, vy, target, lo, hi) {\n  Object.assign(m, { mode: FALL, x, y, vx, vy, tp: target, lo, hi });\n}\n\nfunction stepMarble(P, m, dt) {\n  if (m.mode === RAIL) {\n    const p = P.paths[m.p];\n    const q = at(p, m.u);\n    m.v = Math.max(3, m.v + (G * ROLL * q[3] - DRAG * m.v) * dt);\n    m.u += m.v * dt;\n    m.roll += (m.v * dt * (q[4] || 0.3)) / RM;\n    if (m.u >= p.L) leave(P, m);\n  } else if (m.mode === FALL) {\n    m.vy += G * dt;\n    m.x += m.vx * dt;\n    m.y += m.vy * dt;\n    if (m.tp \u003c 0) {\n      // A tipped marble lands in the funnel bowl where it hits it.\n      const r = Math.abs(m.x - FUN.cx);\n      if (m.y >= FUN.rim - 2 + (FUN.R - r) * 0.3) Object.assign(m, { mode: FUNNEL, r: clamp(r, 4, FUN.R), ph: m.x > FUN.cx ? 0.3 : Math.PI + 0.3 });\n      return;\n    }\n    if (m.x > m.hi) {\n      m.x = m.hi;\n      m.vx = -0.35 * Math.abs(m.vx);\n    }\n    if (m.x \u003c m.lo) {\n      m.x = m.lo;\n      m.vx = 0.35 * Math.abs(m.vx);\n    }\n    // It lands where it meets the rail it drops onto, or at the spiral's top.\n    const p = P.paths[m.tp];\n    const u = p.x0 === undefined ? 0 : clamp((m.x - p.x0) / (p.x1 - p.x0), 0, 1) * p.L;\n    if (m.y >= at(p, u)[1]) Object.assign(m, { mode: RAIL, p: m.tp, u, v: 3 + 0.08 * m.vy });\n  } else if (m.mode === FUNNEL) {\n    // Round and round the funnel, faster as it closes in on the throat.\n    const w = 1.3 * (FUN.R / m.r) ** 1.5;\n    m.ph += w * dt;\n    m.roll += (w * m.r * dt) / RM;\n    m.r -= (1.5 + 5 * (1 - m.r / FUN.R)) * dt;\n    if (m.r \u003c= FUN.r0) fall(m, FUN.cx, FUN.throat, 0, 15, 1, FUN.cx - 0.5, FUN.cx + 0.5);\n  } else if (P.screw - m.s0 >= SCR.inlet - SCR.out) Object.assign(m, { mode: RAIL, p: CHUTE, u: 0, v: 6 });\n}\n\n// Where each marble shows, from its mode.\nfunction place(P, m) {\n  if (m.mode === RAIL) {\n    const q = at(P.paths[m.p], m.u);\n    m.x = q[0];\n    m.y = q[1];\n    m.z = q[2] + 0.1;\n  } else if (m.mode === FALL) m.z = 0.1;\n  else if (m.mode === FUNNEL) {\n    const s = Math.sin(m.ph);\n    m.x = FUN.cx + m.r * Math.cos(m.ph);\n    m.y = FUN.rim + ((FUN.R - m.r) / (FUN.R - FUN.r0)) * (FUN.throat - FUN.rim) + FUN.e * (m.r / FUN.R) * s - 2.2;\n    m.z = 2 * s;\n  } else {\n    m.x = SCR.cx;\n    m.y = SCR.inlet - (P.screw - m.s0);\n    m.z = 0;\n  }\n}\n\nfunction step(P, dt, count) {\n  P.t += dt;\n  // The screw turns twice a second at Speed 2 and each turn brings a slot past\n  // the inlet; a gate lets marbles on 30 / Marbles seconds apart, so they\n  // spread evenly round the lap of about 30 s.\n  P.screw += 2 * SCR.pitch * dt;\n  const slot = Math.floor(P.screw / SCR.pitch);\n  const ms = P.marbles;\n  const extra = ms.filter((m) => !m.extra).length - count;\n  let head = null;\n  for (const m of ms) if (m.mode === RAIL && m.p === TROUGH && m.u >= P.paths[TROUGH].L - 0.6) head = m;\n  if (head && (head.extra || extra > 0)) ms.splice(ms.indexOf(head), 1);\n  else if (slot > P.slot && head && P.t - P.lastPick >= clamp(30 / count, 0.5, 5)) {\n    Object.assign(head, { mode: LIFT, s0: slot * SCR.pitch });\n    P.lastPick = P.t;\n  }\n  P.slot = slot;\n  // A new marble rolls in at the far end of the trough while the run is short.\n  if (extra \u003c 0 && P.t - P.lastAdd > 0.4 && !ms.some((m) => m.mode === RAIL && m.p === TROUGH && m.u \u003c 2 * RM + 1)) {\n    ms.push(newMarble(P.hueNext++));\n    P.lastAdd = P.t;\n  }\n  for (const m of ms) stepMarble(P, m, dt);\n  // Marbles on one rail keep a marble's width apart, the one behind waiting.\n  const busy = new Uint8Array(8);\n  for (let k = 0; k \u003c P.paths.length; k++) {\n    const on = ms.filter((m) => m.mode === RAIL && m.p === k).sort((a, b) => b.u - a.u);\n    busy[k] = on.length;\n    for (let i = 1; i \u003c on.length; i++)\n      if (on[i].u > on[i - 1].u - 2 * RM) {\n        on[i].u = on[i - 1].u - 2 * RM;\n        on[i].v = Math.min(on[i].v, on[i - 1].v);\n      }\n  }\n  // A plastic piece lights while marbles are on it, brighter for each up to\n  // three, and fades in 0.7 s after.\n  busy[7] = ms.filter((m) => m.mode === FUNNEL).length;\n  for (let k = 0; k \u003c 8; k++) {\n    const to = busy[k] ? 0.5 + 0.25 * Math.min(3, busy[k]) : 0;\n    P.light[k] = P.light[k] \u003c to ? Math.min(to, P.light[k] + dt * 6) : to + (P.light[k] - to) * Math.exp(-dt / 0.7);\n  }\n  // A chime rings as a marble rolls over the middle of its bar.\n  for (let b = 0; b \u003c BARS; b++) P.ring[b] *= Math.exp(-dt / 0.45);\n  const len = P.paths[CHIMES].L;\n  for (const m of ms) {\n    const u0 = m.uLast === undefined ? -1 : m.uLast;\n    m.uLast = undefined;\n    if (m.mode === RAIL && m.p === CHIMES) {\n      for (let b = 0; b \u003c BARS; b++) if (u0 \u003c ((b + 0.5) / BARS) * len && m.u >= ((b + 0.5) / BARS) * len) P.ring[b] = 1;\n      m.uLast = m.u;\n    }\n    place(P, m);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.paint = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  const count = Math.round(clamp(k[2], 1, 28));\n  const tilt = clamp(k[3], 0, 1);\n  if (Math.abs(tilt - P.tilt) > 0.002) {\n    P.tilt = tilt;\n    buildPaths(P);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The run has been going for a lap when the panel opens, so the marbles\n    // are spread round it, and for three more seconds at the knob's speed.\n    for (let i = 0; i \u003c 840; i++) step(P, i \u003c 750 ? 1 / 30 : speed / 60, count);\n  }\n  if (input.btnPressed && input.btnPressed[0])\n    for (let i = 0; i \u003c 6; i++) {\n      const m = newMarble(P.hueNext++);\n      m.extra = true;\n      const x = FUN.cx + (Math.random() - 0.5) * 30;\n      fall(m, x, -4 - 7 * i, 0, 0, -1, x, x);\n      P.marbles.push(m);\n    }\n  step(P, (dt * speed) / 2, count);\n}\n\n// The still parts: wall, stand, tracks, funnel, spiral, chimes, trough and\n// base, with the depth each LED stands at; and for each lit piece its LEDs\n// and the glow it throws on the wall.\nfunction paintStill(P) {\n  const B = P.base;\n  const Z = P.baseZ;\n  const h0 = P.paint;\n  for (let p = 0; p \u003c N; p++) {\n    const v = 7 + (7 * Math.floor(p / W)) / H;\n    B[p * 3] = v * 0.8;\n    B[p * 3 + 1] = v * 0.85;\n    B[p * 3 + 2] = v * 1.3;\n  }\n  Z.fill(-9);\n  P.lit = [];\n  let mine = null;\n  const dot = (x, y, c, z) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const p = y * W + x;\n    if (z \u003c Z[p]) return;\n    B[p * 3] = c[0];\n    B[p * 3 + 1] = c[1];\n    B[p * 3 + 2] = c[2];\n    Z[p] = z;\n    if (mine) mine.add(p);\n  };\n  const shade = (c, f) => c.map((v) => v * f);\n  // The base board and the two posts, with their grain.\n  for (let y = 124; y \u003c H; y++) for (let x = 0; x \u003c W; x++) dot(x, y, shade(WOOD, y === 124 ? 1.05 : 0.8 - 0.06 * (y - 125) + 0.05 * Math.sin(x * 0.7 + y)), 0);\n  for (let y = 30; y \u003c 124; y++) for (const x of [0, 1, POST, POST + 1]) dot(x, y, shade(WOOD, (x % 2 ? 0.62 : 0.85) * (0.92 + 0.08 * Math.sin(y * 0.9 + x))), -0.5);\n  for (let y = HEL.y0 - 6; y \u003c 124; y++) for (let x = HEL.cx - 2; x \u003c= HEL.cx + 2; x++) dot(x, y, shade(WOOD, 0.95 - 0.12 * Math.abs(x - HEL.cx)), 0);\n  const col = HUE.map((h) => hsv(h0 + h, 0.6, 0.85));\n  // Each lit piece remembers its LEDs.\n  const piece = (k, draw) => {\n    mine = new Set();\n    draw(col[k]);\n    P.lit[k] = [...mine];\n    mine = null;\n  };\n  // Rails: a bright top edge over a darker side; the spiral's far half is\n  // dimmer and passes behind the dowel.\n  for (let k = 0; k \u003c= HELIX; k++)\n    piece(k, (c) => {\n      const p = P.paths[k];\n      for (let i = 0; i \u003c p.n; i++) {\n        const z = p.Z[i];\n        const f = z > 0 ? 0.6 + 0.4 * z : z \u003c 0 ? 0.4 + 0.15 * z : 1;\n        dot(p.X[i], p.Y[i] + RM + 0.5, shade(c, f), z);\n        dot(p.X[i], p.Y[i] + RM + 1.5, shade(c, f * 0.55), z);\n      }\n    });\n  for (let k = 0; k \u003c 3; k++) dot(k % 2 ? POST - 1 : 2, TRACK_Y[k] + 2, shade(WOOD, 0.5), 0.2);\n  // The funnel: a cone of tinted plastic seen from the side, its rim an\n  // ellipse whose near half stands in front of the marbles.\n  const { cx, rim, throat, R, r0, e } = FUN;\n  piece(7, (c) => {\n    for (let y = rim; y \u003c= throat; y++) {\n      const r = R + ((r0 - R) * (y - rim)) / (throat - rim);\n      for (let x = Math.ceil(cx - r); x \u003c= Math.floor(cx + r); x++) dot(x, y, shade(c, 0.22 + 0.25 * Math.abs((x - cx) / r) ** 3), -3);\n      dot(cx - r, y, shade(c, 0.8), 3);\n      dot(cx + r, y, shade(c, 0.8), 3);\n    }\n    for (let y = throat; y \u003c= throat + 3; y++) for (const x of [cx - 3, cx + 3]) dot(x, y, shade(c, 0.7), 3);\n    for (let a = 0; a \u003c 6.283; a += 0.02) {\n      const s = Math.sin(a);\n      dot(cx + R * Math.cos(a), rim + e * s, shade(c, s > 0 ? 1 : 0.55), s > 0 ? 3 : -3);\n    }\n  });\n  // The chimes: eight bars of a toy xylophone on a dark frame.\n  const cp = P.paths[CHIMES];\n  for (let b = 0; b \u003c BARS; b++) {\n    const c = hsv(h0 + b / BARS, 0.55, 0.95);\n    for (let i = 0; i \u003c 4.6; i += 0.5) {\n      const q = at(cp, ((b + 0.08) / BARS) * cp.L + i);\n      dot(q[0], q[1] + RM + 0.5, c, 0);\n      dot(q[0], q[1] + RM + 1.5, shade(c, 0.6), 0);\n    }\n  }\n  for (let i = 0; i \u003c cp.n; i++) dot(cp.X[i], cp.Y[i] + RM + 2.5, [40, 34, 30], 0);\n  const tp = P.paths[TROUGH];\n  for (let i = 0; i \u003c tp.n; i++) {\n    dot(tp.X[i], tp.Y[i] + RM + 0.5, shade(WOOD, 0.95), 0);\n    dot(tp.X[i], tp.Y[i] + RM + 1.5, shade(WOOD, 0.55), 0);\n  }\n  // The glow of each lit piece: its LEDs blurred over the wall round it,\n  // worked out again only for the tracks, and only when they move.\n  P.litCol = col;\n  P.builtAt = P.paint + \":\" + P.tilt;\n  if (!P.glow) P.glow = [];\n  for (const k of [0, 1, 2, 3, 4, 7]) {\n    if (P.glow[k] && (P.glowAt === P.tilt || k === 0 || k > 3)) continue;\n    const M = P.mask;\n    M.fill(0);\n    for (const p of P.lit[k]) M[p] = 1;\n    // Two box blurs of 7 LEDs along rows and columns, by running sums.\n    for (let pass = 0; pass \u003c 4; pass++) {\n      const by = pass % 2;\n      const src = by ? P.tmp : M;\n      const dst = by ? M : P.tmp;\n      const len = by ? H : W;\n      const st = by ? W : 1;\n      for (let line = 0; line \u003c (by ? W : H); line++) {\n        const o = by ? line : line * W;\n        let acc = 0;\n        for (let i = 0; i \u003c= 3; i++) acc += src[o + i * st];\n        for (let i = 0; i \u003c len; i++) {\n          dst[o + i * st] = acc / 7;\n          if (i + 4 \u003c len) acc += src[o + (i + 4) * st];\n          if (i >= 3) acc -= src[o + (i - 3) * st];\n        }\n      }\n    }\n    const g = [];\n    for (let p = 0; p \u003c N; p++) if (M[p] > 0.02) g.push(p, M[p]);\n    P.glow[k] = g;\n  }\n  P.glowAt = P.tilt;\n}\n\n// A glass marble: a clear body tinted by its swirl, the swirl turning as the\n// marble rolls, a darker rim and a fixed highlight up to the left.\nfunction marble(P, m) {\n  const buf = P.buf;\n  const zb = P.zb;\n  const col = hsv(P.paint + SWIRL[m.hue % 6] + 0.07 * Math.floor(m.hue / 6), 0.8, 1);\n  const dim = m.mode === FUNNEL && m.z \u003c 0 ? 0.55 : 1;\n  const c = Math.cos(m.roll);\n  const s = Math.sin(m.roll);\n  for (let dy = -4; dy \u003c= 4; dy++)\n    for (let dx = -4; dx \u003c= 4; dx++) {\n      const x = Math.round(m.x) + dx;\n      const y = Math.round(m.y) + dy;\n      if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) continue;\n      const u = (x - m.x) / RM;\n      const v = (y - m.y) / RM;\n      const d = Math.hypot(u, v);\n      const a = clamp((1 - d) * RM + 0.5, 0, 1);\n      const p = y * W + x;\n      if (a \u003c= 0 || m.z \u003c zb[p]) continue;\n      const zz = Math.sqrt(Math.max(0, 1 - d * d));\n      const ru = u * c + v * s;\n      const rv = v * c - u * s;\n      // A cat's eye: four twisted blades of colour in clear glass, which\n      // catches the light round its edge.\n      const sw = Math.abs(Math.sin(2 * Math.atan2(rv, ru) + 2.5 * Math.hypot(ru, rv)));\n      const vane = sw \u003c 0.5 ? 1 - sw / 0.5 : 0;\n      const hl = Math.exp(-((u + 0.38) ** 2 + (v + 0.42) ** 2) / 0.05);\n      const rim = 80 * (1 - zz) ** 2;\n      for (let i = 0; i \u003c 3; i++) {\n        const L = 40 + col[i] * (0.3 + vane * (0.65 + 0.35 * zz)) + rim + 255 * hl;\n        buf[p * 3 + i] = buf[p * 3 + i] * (1 - a) + L * dim * a;\n      }\n      if (a > 0.5) zb[p] = m.z;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.builtAt !== P.paint + \":\" + P.tilt) paintStill(P);\n  const buf = P.buf;\n  const zb = P.zb;\n  buf.set(P.base);\n  zb.set(P.baseZ);\n  // Lit pieces brighten and throw their colour on the wall round them.\n  for (const k of [0, 1, 2, 3, 4, 7]) {\n    const L = P.light[k];\n    if (L \u003c 0.01) continue;\n    const c = P.litCol[k];\n    for (const p of P.lit[k]) for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] += (c[i] * 0.5 + 40) * L;\n    const g = P.glow[k];\n    for (let j = 0; j \u003c g.length; j += 2) for (let i = 0; i \u003c 3; i++) buf[g[j] * 3 + i] += c[i] * g[j + 1] * L * 0.45;\n  }\n  // The screw: a clear tube, a shaft, and a painted thread whose near half\n  // passes in front of the marbles it carries.\n  const tc = hsv(P.paint + 0.08, 0.6, 0.95);\n  for (let y = SCR.top; y \u003c= SCR.bot; y++)\n    for (let x = SCR.cx - 4; x \u003c= SCR.cx + 4; x++) {\n      const p = y * W + x;\n      const u = (x - SCR.cx) / 3.6;\n      let c;\n      let z = -1;\n      if (Math.abs(u) > 1) c = [62, 74, 86];\n      else {\n        const th = Math.asin(u) / (2 * Math.PI);\n        const q = (y + P.screw - SCR.inlet) / SCR.pitch + 0.5;\n        const fr = q - th - Math.floor(q - th);\n        const bk = q + th - 0.5 - Math.floor(q + th - 0.5);\n        if (fr \u003c 0.24) {\n          c = tc.map((v) => v * (0.45 + 0.5 * Math.sqrt(1 - u * u)));\n          z = 1;\n        } else if (bk \u003c 0.24) c = tc.map((v) => v * 0.26);\n        else c = Math.abs(x - SCR.cx) \u003c= 1 ? [66, 62, 56] : [14, 17, 24];\n      }\n      buf.set(c, p * 3);\n      zb[p] = z;\n    }\n  for (const m of P.marbles) marble(P, m);\n  // A ringing bar flashes and lights the air over it.\n  const cp = P.paths[CHIMES];\n  for (let b = 0; b \u003c BARS; b++) {\n    const r = P.ring[b];\n    if (r \u003c 0.02) continue;\n    const col = hsv(P.paint + b / BARS, 0.4, 1);\n    const q = at(cp, ((b + 0.5) / BARS) * cp.L);\n    for (let dy = -6; dy \u003c= 3; dy++)\n      for (let dx = -6; dx \u003c= 6; dx++) {\n        const x = Math.round(q[0]) + dx;\n        const y = Math.round(q[1] + RM + 1) + dy;\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const w = r * Math.max(0, 1 - Math.hypot(dx / 6.5, dy / 5)) * (0.6 + 0.4 * Math.sin(P.t * 40 + b));\n        for (let i = 0; i \u003c 3; i++) buf[(y * W + x) * 3 + i] += col[i] * w * 0.8;\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-marble-run","type":"code","name":"marble-run","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Marble Run\n// Family:  toy\n// Idea:    Glass marbles roll down a marble run as tall as the panel, round a funnel, along three zigzag tracks, down a spiral and over a row of chimes, while an Archimedes screw at the side carries them back up, and each piece of clear coloured plastic lights up while a marble runs on it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after the zigzag marble runs, funnels and screw lifts of the toy shop\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Paint=0..1, Speed=0.2..3, Marbles=6..28, Tilt=0..1\n//\n// Knob 1: Paint. Turns the plastic parts and the marbles' swirls round the colour wheel together, starting from a blue funnel over green, yellow and red tracks.\n// Knob 2: Speed. How fast the film runs: at 2 a marble takes about 30 s round the loop, 6 s of it up the screw; at 0.2 it drifts down in slow motion, at 3 it runs half as fast again.\n// Knob 3: Marbles. How many marbles are in the run, from 6 to 28; the screw lets them on at an even spacing, so they stay spread round the loop.\n// Knob 4: Tilt. How steep the three zigzag tracks, the chimes and the trough hang, from a drop of 2 LEDs along each track to 8, and so how fast the marbles run down them.\n// Buttons: K1 tap tips a handful of six marbles into the funnel from above; they run one lap and leave at the foot of the screw.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Marble radius and the film's gravity, in LEDs and seconds. A rolling ball\n// takes five sevenths of the pull along a slope.\nconst RM = 3.4;\nconst G = 420;\nconst ROLL = 5 / 7;\nconst DRAG = 0.6;\n// The two wooden posts of the stand (x 0..1 and 52..53) and the top of each\n// zigzag track's high end, 16 rows apart so a marble clears the track above.\nconst POST = 52;\nconst TRACK_Y = [34, 50, 66];\n// The funnel: centre, rim and throat rows, rim and throat radius, and how\n// round its rim looks from just above.\nconst FUN = { cx: 26, rim: 12, throat: 25, R: 20, r0: 2.5, e: 3 };\n// The spiral: centre, radius, top, rows per turn, turns, how round.\nconst HEL = { cx: 27, R: 21.5, y0: 80, pitch: 9, turns: 2, e: 2.5 };\n// The screw lift: centre column, top and bottom rows, rows per turn, where a\n// marble gets on and where it gets off.\nconst SCR = { cx: 58, top: 2, bot: 123, pitch: 10, inlet: 119.6, out: 6.3 };\n// Marble modes.\nconst RAIL = 0;\nconst FALL = 1;\nconst FUNNEL = 2;\nconst LIFT = 3;\n// Paths, by index: the chute from the screw, three tracks, the spiral, the\n// chimes and the trough back to the screw. Index 7 is the funnel's light.\nconst CHUTE = 0;\nconst HELIX = 4;\nconst CHIMES = 5;\nconst TROUGH = 6;\nconst BARS = 8;\nconst WOOD = [190, 138, 82];\n// Hues of the plastic at Paint 0: chute, the three tracks, spiral, funnel;\n// and of the marbles' swirls.\nconst HUE = [0.62, 0.36, 0.14, 0.97, 0.47, 0, 0, 0.56];\nconst SWIRL = [0.6, 0.0, 0.33, 0.13, 0.8, 0.5];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// A path of marble centres, sampled every half LED of its length in space:\n// screen x and y, depth z (1 nearest), and true height h for the slope.\nfunction sample(fn, steps) {\n  const X = [];\n  const Y = [];\n  const Z = [];\n  const Hh = [];\n  let last = null;\n  let acc = 0.5;\n  for (let i = 0; i \u003c= steps; i++) {\n    const q = fn(i / steps);\n    if (last) acc += Math.hypot(q[0] - last[0], q[3] - last[3], q[4] - last[4]);\n    last = q;\n    if (acc >= 0.5 || i === steps) {\n      acc = 0;\n      X.push(q[0]);\n      Y.push(q[1]);\n      Z.push(q[2]);\n      Hh.push(q[3]);\n    }\n  }\n  return { X, Y, Z, Hh, n: X.length, L: (X.length - 1) * 0.5 };\n}\n\n// A straight rail whose top runs from (x0, y0) to (x1, y1); the marble rides\n// RM + 0.5 above it.\nfunction rail(x0, y0, x1, y1) {\n  const p = sample((t) => [x0 + (x1 - x0) * t, y0 + (y1 - y0) * t - RM - 0.5, 0, y0 + (y1 - y0) * t, 0], 400);\n  return Object.assign(p, { x0, y0, x1, y1 });\n}\n\n// Position, depth, slope and sideways run of a path at length u.\nfunction at(p, u) {\n  const i = clamp(u * 2, 0, p.n - 1.001);\n  const i0 = Math.floor(i);\n  const f = i - i0;\n  const g = (A) => A[i0] + (A[i0 + 1] - A[i0]) * f;\n  return [g(p.X), g(p.Y), g(p.Z), (p.Hh[i0 + 1] - p.Hh[i0]) * 2, (p.X[i0 + 1] - p.X[i0]) * 2];\n}\n\n// The tracks, chimes and trough hang by the tilt; the rest is built once.\nfunction buildPaths(P) {\n  const d = 2 + 6 * P.tilt;\n  if (!P.paths) {\n    const { cx, R, y0, pitch, turns, e } = HEL;\n    const helix = sample((t) => {\n      const a = t * turns * 2 * Math.PI;\n      const h = y0 + t * turns * pitch;\n      return [cx + R * Math.cos(a), h + e * Math.sin(a), Math.sin(a), h, R * Math.sin(a)];\n    }, 3000);\n    P.paths = [rail(57, 10, 47, 15), 0, 0, 0, helix];\n  }\n  P.paths[CHIMES] = rail(48, 104, 6, 107 + 4 * P.tilt);\n  P.paths[TROUGH] = rail(6, 120 - 4 * P.tilt, 57, 123);\n  for (let k = 0; k \u003c 3; k++) {\n    const y = TRACK_Y[k];\n    P.paths[k + 1] = k % 2 ? rail(51, y, 10, y + d) : rail(2, y, 44, y + d);\n  }\n  // Marbles on a track keep their place along it when the tilt changes.\n  for (const m of P.marbles) if (m.mode === RAIL) m.u = Math.min(m.u, P.paths[m.p].L);\n}\n\nfunction newMarble(hue) {\n  return { mode: RAIL, p: TROUGH, u: 0, v: 6, roll: hue * 2.3, hue, x: 0, y: 0, z: 0, extra: false };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.tilt = 0.06;\n  P.paint = 0;\n  P.marbles = [];\n  P.paths = null;\n  buildPaths(P);\n  for (const k of [\"base\", \"buf\"]) P[k] = new Float32Array(N * 3);\n  for (const k of [\"baseZ\", \"zb\", \"mask\", \"tmp\"]) P[k] = new Float32Array(N);\n  P.ring = new Float32Array(BARS);\n  P.light = new Float32Array(8);\n  Object.assign(P, { screw: 0, slot: 0, t: 0, lastPick: -99, lastAdd: -99, builtAt: \"\", started: false, hueNext: 0 });\n}\n\n// Leaves a rail at its far end: into the funnel, off the end of a track, the\n// spiral or the chimes and down, or into the queue at the screw.\nfunction leave(P, m) {\n  const p = P.paths[m.p];\n  if (m.p === CHUTE) return Object.assign(m, { mode: FUNNEL, r: FUN.R, ph: 0 });\n  if (m.p === TROUGH) return Object.assign(m, { u: p.L, v: 0 });\n  const q = at(p, p.L);\n  const right = q[4] > 0;\n  let lo = right ? 44 : 2 + RM;\n  let hi = right ? POST - RM - 0.3 : 10;\n  if (m.p === HELIX) [lo, hi] = [45.5, 49.5];\n  if (m.p === CHIMES) [lo, hi] = [2 + RM, 8];\n  fall(m, q[0], q[1], m.v * q[4] * 0.6, m.v * q[3] * 0.5, m.p + 1, lo, hi);\n}\n\nfunction fall(m, x, y, vx, vy, target, lo, hi) {\n  Object.assign(m, { mode: FALL, x, y, vx, vy, tp: target, lo, hi });\n}\n\nfunction stepMarble(P, m, dt) {\n  if (m.mode === RAIL) {\n    const p = P.paths[m.p];\n    const q = at(p, m.u);\n    m.v = Math.max(3, m.v + (G * ROLL * q[3] - DRAG * m.v) * dt);\n    m.u += m.v * dt;\n    m.roll += (m.v * dt * (q[4] || 0.3)) / RM;\n    if (m.u >= p.L) leave(P, m);\n  } else if (m.mode === FALL) {\n    m.vy += G * dt;\n    m.x += m.vx * dt;\n    m.y += m.vy * dt;\n    if (m.tp \u003c 0) {\n      // A tipped marble lands in the funnel bowl where it hits it.\n      const r = Math.abs(m.x - FUN.cx);\n      if (m.y >= FUN.rim - 2 + (FUN.R - r) * 0.3) Object.assign(m, { mode: FUNNEL, r: clamp(r, 4, FUN.R), ph: m.x > FUN.cx ? 0.3 : Math.PI + 0.3 });\n      return;\n    }\n    if (m.x > m.hi) {\n      m.x = m.hi;\n      m.vx = -0.35 * Math.abs(m.vx);\n    }\n    if (m.x \u003c m.lo) {\n      m.x = m.lo;\n      m.vx = 0.35 * Math.abs(m.vx);\n    }\n    // It lands where it meets the rail it drops onto, or at the spiral's top.\n    const p = P.paths[m.tp];\n    const u = p.x0 === undefined ? 0 : clamp((m.x - p.x0) / (p.x1 - p.x0), 0, 1) * p.L;\n    if (m.y >= at(p, u)[1]) Object.assign(m, { mode: RAIL, p: m.tp, u, v: 3 + 0.08 * m.vy });\n  } else if (m.mode === FUNNEL) {\n    // Round and round the funnel, faster as it closes in on the throat.\n    const w = 1.3 * (FUN.R / m.r) ** 1.5;\n    m.ph += w * dt;\n    m.roll += (w * m.r * dt) / RM;\n    m.r -= (1.5 + 5 * (1 - m.r / FUN.R)) * dt;\n    if (m.r \u003c= FUN.r0) fall(m, FUN.cx, FUN.throat, 0, 15, 1, FUN.cx - 0.5, FUN.cx + 0.5);\n  } else if (P.screw - m.s0 >= SCR.inlet - SCR.out) Object.assign(m, { mode: RAIL, p: CHUTE, u: 0, v: 6 });\n}\n\n// Where each marble shows, from its mode.\nfunction place(P, m) {\n  if (m.mode === RAIL) {\n    const q = at(P.paths[m.p], m.u);\n    m.x = q[0];\n    m.y = q[1];\n    m.z = q[2] + 0.1;\n  } else if (m.mode === FALL) m.z = 0.1;\n  else if (m.mode === FUNNEL) {\n    const s = Math.sin(m.ph);\n    m.x = FUN.cx + m.r * Math.cos(m.ph);\n    m.y = FUN.rim + ((FUN.R - m.r) / (FUN.R - FUN.r0)) * (FUN.throat - FUN.rim) + FUN.e * (m.r / FUN.R) * s - 2.2;\n    m.z = 2 * s;\n  } else {\n    m.x = SCR.cx;\n    m.y = SCR.inlet - (P.screw - m.s0);\n    m.z = 0;\n  }\n}\n\nfunction step(P, dt, count) {\n  P.t += dt;\n  // The screw turns twice a second at Speed 2 and each turn brings a slot past\n  // the inlet; a gate lets marbles on 30 / Marbles seconds apart, so they\n  // spread evenly round the lap of about 30 s.\n  P.screw += 2 * SCR.pitch * dt;\n  const slot = Math.floor(P.screw / SCR.pitch);\n  const ms = P.marbles;\n  const extra = ms.filter((m) => !m.extra).length - count;\n  let head = null;\n  for (const m of ms) if (m.mode === RAIL && m.p === TROUGH && m.u >= P.paths[TROUGH].L - 0.6) head = m;\n  if (head && (head.extra || extra > 0)) ms.splice(ms.indexOf(head), 1);\n  else if (slot > P.slot && head && P.t - P.lastPick >= clamp(30 / count, 0.5, 5)) {\n    Object.assign(head, { mode: LIFT, s0: slot * SCR.pitch });\n    P.lastPick = P.t;\n  }\n  P.slot = slot;\n  // A new marble rolls in at the far end of the trough while the run is short.\n  if (extra \u003c 0 && P.t - P.lastAdd > 0.4 && !ms.some((m) => m.mode === RAIL && m.p === TROUGH && m.u \u003c 2 * RM + 1)) {\n    ms.push(newMarble(P.hueNext++));\n    P.lastAdd = P.t;\n  }\n  for (const m of ms) stepMarble(P, m, dt);\n  // Marbles on one rail keep a marble's width apart, the one behind waiting.\n  const busy = new Uint8Array(8);\n  for (let k = 0; k \u003c P.paths.length; k++) {\n    const on = ms.filter((m) => m.mode === RAIL && m.p === k).sort((a, b) => b.u - a.u);\n    busy[k] = on.length;\n    for (let i = 1; i \u003c on.length; i++)\n      if (on[i].u > on[i - 1].u - 2 * RM) {\n        on[i].u = on[i - 1].u - 2 * RM;\n        on[i].v = Math.min(on[i].v, on[i - 1].v);\n      }\n  }\n  // A plastic piece lights while marbles are on it, brighter for each up to\n  // three, and fades in 0.7 s after.\n  busy[7] = ms.filter((m) => m.mode === FUNNEL).length;\n  for (let k = 0; k \u003c 8; k++) {\n    const to = busy[k] ? 0.5 + 0.25 * Math.min(3, busy[k]) : 0;\n    P.light[k] = P.light[k] \u003c to ? Math.min(to, P.light[k] + dt * 6) : to + (P.light[k] - to) * Math.exp(-dt / 0.7);\n  }\n  // A chime rings as a marble rolls over the middle of its bar.\n  for (let b = 0; b \u003c BARS; b++) P.ring[b] *= Math.exp(-dt / 0.45);\n  const len = P.paths[CHIMES].L;\n  for (const m of ms) {\n    const u0 = m.uLast === undefined ? -1 : m.uLast;\n    m.uLast = undefined;\n    if (m.mode === RAIL && m.p === CHIMES) {\n      for (let b = 0; b \u003c BARS; b++) if (u0 \u003c ((b + 0.5) / BARS) * len && m.u >= ((b + 0.5) / BARS) * len) P.ring[b] = 1;\n      m.uLast = m.u;\n    }\n    place(P, m);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.paint = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  const count = Math.round(clamp(k[2], 1, 28));\n  const tilt = clamp(k[3], 0, 1);\n  if (Math.abs(tilt - P.tilt) > 0.002) {\n    P.tilt = tilt;\n    buildPaths(P);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The run has been going for a lap when the panel opens, so the marbles\n    // are spread round it, and for three more seconds at the knob's speed.\n    for (let i = 0; i \u003c 840; i++) step(P, i \u003c 750 ? 1 / 30 : speed / 60, count);\n  }\n  if (input.btnPressed && input.btnPressed[0])\n    for (let i = 0; i \u003c 6; i++) {\n      const m = newMarble(P.hueNext++);\n      m.extra = true;\n      const x = FUN.cx + (Math.random() - 0.5) * 30;\n      fall(m, x, -4 - 7 * i, 0, 0, -1, x, x);\n      P.marbles.push(m);\n    }\n  step(P, (dt * speed) / 2, count);\n}\n\n// The still parts: wall, stand, tracks, funnel, spiral, chimes, trough and\n// base, with the depth each LED stands at; and for each lit piece its LEDs\n// and the glow it throws on the wall.\nfunction paintStill(P) {\n  const B = P.base;\n  const Z = P.baseZ;\n  const h0 = P.paint;\n  for (let p = 0; p \u003c N; p++) {\n    const v = 7 + (7 * Math.floor(p / W)) / H;\n    B[p * 3] = v * 0.8;\n    B[p * 3 + 1] = v * 0.85;\n    B[p * 3 + 2] = v * 1.3;\n  }\n  Z.fill(-9);\n  P.lit = [];\n  let mine = null;\n  const dot = (x, y, c, z) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const p = y * W + x;\n    if (z \u003c Z[p]) return;\n    B[p * 3] = c[0];\n    B[p * 3 + 1] = c[1];\n    B[p * 3 + 2] = c[2];\n    Z[p] = z;\n    if (mine) mine.add(p);\n  };\n  const shade = (c, f) => c.map((v) => v * f);\n  // The base board and the two posts, with their grain.\n  for (let y = 124; y \u003c H; y++) for (let x = 0; x \u003c W; x++) dot(x, y, shade(WOOD, y === 124 ? 1.05 : 0.8 - 0.06 * (y - 125) + 0.05 * Math.sin(x * 0.7 + y)), 0);\n  for (let y = 30; y \u003c 124; y++) for (const x of [0, 1, POST, POST + 1]) dot(x, y, shade(WOOD, (x % 2 ? 0.62 : 0.85) * (0.92 + 0.08 * Math.sin(y * 0.9 + x))), -0.5);\n  for (let y = HEL.y0 - 6; y \u003c 124; y++) for (let x = HEL.cx - 2; x \u003c= HEL.cx + 2; x++) dot(x, y, shade(WOOD, 0.95 - 0.12 * Math.abs(x - HEL.cx)), 0);\n  const col = HUE.map((h) => hsv(h0 + h, 0.6, 0.85));\n  // Each lit piece remembers its LEDs.\n  const piece = (k, draw) => {\n    mine = new Set();\n    draw(col[k]);\n    P.lit[k] = [...mine];\n    mine = null;\n  };\n  // Rails: a bright top edge over a darker side; the spiral's far half is\n  // dimmer and passes behind the dowel.\n  for (let k = 0; k \u003c= HELIX; k++)\n    piece(k, (c) => {\n      const p = P.paths[k];\n      for (let i = 0; i \u003c p.n; i++) {\n        const z = p.Z[i];\n        const f = z > 0 ? 0.6 + 0.4 * z : z \u003c 0 ? 0.4 + 0.15 * z : 1;\n        dot(p.X[i], p.Y[i] + RM + 0.5, shade(c, f), z);\n        dot(p.X[i], p.Y[i] + RM + 1.5, shade(c, f * 0.55), z);\n      }\n    });\n  for (let k = 0; k \u003c 3; k++) dot(k % 2 ? POST - 1 : 2, TRACK_Y[k] + 2, shade(WOOD, 0.5), 0.2);\n  // The funnel: a cone of tinted plastic seen from the side, its rim an\n  // ellipse whose near half stands in front of the marbles.\n  const { cx, rim, throat, R, r0, e } = FUN;\n  piece(7, (c) => {\n    for (let y = rim; y \u003c= throat; y++) {\n      const r = R + ((r0 - R) * (y - rim)) / (throat - rim);\n      for (let x = Math.ceil(cx - r); x \u003c= Math.floor(cx + r); x++) dot(x, y, shade(c, 0.22 + 0.25 * Math.abs((x - cx) / r) ** 3), -3);\n      dot(cx - r, y, shade(c, 0.8), 3);\n      dot(cx + r, y, shade(c, 0.8), 3);\n    }\n    for (let y = throat; y \u003c= throat + 3; y++) for (const x of [cx - 3, cx + 3]) dot(x, y, shade(c, 0.7), 3);\n    for (let a = 0; a \u003c 6.283; a += 0.02) {\n      const s = Math.sin(a);\n      dot(cx + R * Math.cos(a), rim + e * s, shade(c, s > 0 ? 1 : 0.55), s > 0 ? 3 : -3);\n    }\n  });\n  // The chimes: eight bars of a toy xylophone on a dark frame.\n  const cp = P.paths[CHIMES];\n  for (let b = 0; b \u003c BARS; b++) {\n    const c = hsv(h0 + b / BARS, 0.55, 0.95);\n    for (let i = 0; i \u003c 4.6; i += 0.5) {\n      const q = at(cp, ((b + 0.08) / BARS) * cp.L + i);\n      dot(q[0], q[1] + RM + 0.5, c, 0);\n      dot(q[0], q[1] + RM + 1.5, shade(c, 0.6), 0);\n    }\n  }\n  for (let i = 0; i \u003c cp.n; i++) dot(cp.X[i], cp.Y[i] + RM + 2.5, [40, 34, 30], 0);\n  const tp = P.paths[TROUGH];\n  for (let i = 0; i \u003c tp.n; i++) {\n    dot(tp.X[i], tp.Y[i] + RM + 0.5, shade(WOOD, 0.95), 0);\n    dot(tp.X[i], tp.Y[i] + RM + 1.5, shade(WOOD, 0.55), 0);\n  }\n  // The glow of each lit piece: its LEDs blurred over the wall round it,\n  // worked out again only for the tracks, and only when they move.\n  P.litCol = col;\n  P.builtAt = P.paint + \":\" + P.tilt;\n  if (!P.glow) P.glow = [];\n  for (const k of [0, 1, 2, 3, 4, 7]) {\n    if (P.glow[k] && (P.glowAt === P.tilt || k === 0 || k > 3)) continue;\n    const M = P.mask;\n    M.fill(0);\n    for (const p of P.lit[k]) M[p] = 1;\n    // Two box blurs of 7 LEDs along rows and columns, by running sums.\n    for (let pass = 0; pass \u003c 4; pass++) {\n      const by = pass % 2;\n      const src = by ? P.tmp : M;\n      const dst = by ? M : P.tmp;\n      const len = by ? H : W;\n      const st = by ? W : 1;\n      for (let line = 0; line \u003c (by ? W : H); line++) {\n        const o = by ? line : line * W;\n        let acc = 0;\n        for (let i = 0; i \u003c= 3; i++) acc += src[o + i * st];\n        for (let i = 0; i \u003c len; i++) {\n          dst[o + i * st] = acc / 7;\n          if (i + 4 \u003c len) acc += src[o + (i + 4) * st];\n          if (i >= 3) acc -= src[o + (i - 3) * st];\n        }\n      }\n    }\n    const g = [];\n    for (let p = 0; p \u003c N; p++) if (M[p] > 0.02) g.push(p, M[p]);\n    P.glow[k] = g;\n  }\n  P.glowAt = P.tilt;\n}\n\n// A glass marble: a clear body tinted by its swirl, the swirl turning as the\n// marble rolls, a darker rim and a fixed highlight up to the left.\nfunction marble(P, m) {\n  const buf = P.buf;\n  const zb = P.zb;\n  const col = hsv(P.paint + SWIRL[m.hue % 6] + 0.07 * Math.floor(m.hue / 6), 0.8, 1);\n  const dim = m.mode === FUNNEL && m.z \u003c 0 ? 0.55 : 1;\n  const c = Math.cos(m.roll);\n  const s = Math.sin(m.roll);\n  for (let dy = -4; dy \u003c= 4; dy++)\n    for (let dx = -4; dx \u003c= 4; dx++) {\n      const x = Math.round(m.x) + dx;\n      const y = Math.round(m.y) + dy;\n      if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) continue;\n      const u = (x - m.x) / RM;\n      const v = (y - m.y) / RM;\n      const d = Math.hypot(u, v);\n      const a = clamp((1 - d) * RM + 0.5, 0, 1);\n      const p = y * W + x;\n      if (a \u003c= 0 || m.z \u003c zb[p]) continue;\n      const zz = Math.sqrt(Math.max(0, 1 - d * d));\n      const ru = u * c + v * s;\n      const rv = v * c - u * s;\n      // A cat's eye: four twisted blades of colour in clear glass, which\n      // catches the light round its edge.\n      const sw = Math.abs(Math.sin(2 * Math.atan2(rv, ru) + 2.5 * Math.hypot(ru, rv)));\n      const vane = sw \u003c 0.5 ? 1 - sw / 0.5 : 0;\n      const hl = Math.exp(-((u + 0.38) ** 2 + (v + 0.42) ** 2) / 0.05);\n      const rim = 80 * (1 - zz) ** 2;\n      for (let i = 0; i \u003c 3; i++) {\n        const L = 40 + col[i] * (0.3 + vane * (0.65 + 0.35 * zz)) + rim + 255 * hl;\n        buf[p * 3 + i] = buf[p * 3 + i] * (1 - a) + L * dim * a;\n      }\n      if (a > 0.5) zb[p] = m.z;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.builtAt !== P.paint + \":\" + P.tilt) paintStill(P);\n  const buf = P.buf;\n  const zb = P.zb;\n  buf.set(P.base);\n  zb.set(P.baseZ);\n  // Lit pieces brighten and throw their colour on the wall round them.\n  for (const k of [0, 1, 2, 3, 4, 7]) {\n    const L = P.light[k];\n    if (L \u003c 0.01) continue;\n    const c = P.litCol[k];\n    for (const p of P.lit[k]) for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] += (c[i] * 0.5 + 40) * L;\n    const g = P.glow[k];\n    for (let j = 0; j \u003c g.length; j += 2) for (let i = 0; i \u003c 3; i++) buf[g[j] * 3 + i] += c[i] * g[j + 1] * L * 0.45;\n  }\n  // The screw: a clear tube, a shaft, and a painted thread whose near half\n  // passes in front of the marbles it carries.\n  const tc = hsv(P.paint + 0.08, 0.6, 0.95);\n  for (let y = SCR.top; y \u003c= SCR.bot; y++)\n    for (let x = SCR.cx - 4; x \u003c= SCR.cx + 4; x++) {\n      const p = y * W + x;\n      const u = (x - SCR.cx) / 3.6;\n      let c;\n      let z = -1;\n      if (Math.abs(u) > 1) c = [62, 74, 86];\n      else {\n        const th = Math.asin(u) / (2 * Math.PI);\n        const q = (y + P.screw - SCR.inlet) / SCR.pitch + 0.5;\n        const fr = q - th - Math.floor(q - th);\n        const bk = q + th - 0.5 - Math.floor(q + th - 0.5);\n        if (fr \u003c 0.24) {\n          c = tc.map((v) => v * (0.45 + 0.5 * Math.sqrt(1 - u * u)));\n          z = 1;\n        } else if (bk \u003c 0.24) c = tc.map((v) => v * 0.26);\n        else c = Math.abs(x - SCR.cx) \u003c= 1 ? [66, 62, 56] : [14, 17, 24];\n      }\n      buf.set(c, p * 3);\n      zb[p] = z;\n    }\n  for (const m of P.marbles) marble(P, m);\n  // A ringing bar flashes and lights the air over it.\n  const cp = P.paths[CHIMES];\n  for (let b = 0; b \u003c BARS; b++) {\n    const r = P.ring[b];\n    if (r \u003c 0.02) continue;\n    const col = hsv(P.paint + b / BARS, 0.4, 1);\n    const q = at(cp, ((b + 0.5) / BARS) * cp.L);\n    for (let dy = -6; dy \u003c= 3; dy++)\n      for (let dx = -6; dx \u003c= 6; dx++) {\n        const x = Math.round(q[0]) + dx;\n        const y = Math.round(q[1] + RM + 1) + dy;\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const w = r * Math.max(0, 1 - Math.hypot(dx / 6.5, dy / 5)) * (0.6 + 0.4 * Math.sin(P.t * 40 + b));\n        for (let i = 0; i \u003c 3; i++) buf[(y * W + x) * 3 + i] += col[i] * w * 0.8;\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Paint=0..1, Speed=0.2..3, Marbles=6..28, Tilt=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Paint","min":0,"max":1,"about":"Turns the plastic parts and the marbles' swirls round the colour wheel together, starting from a blue funnel over green, yellow and red tracks."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the film runs: at 2 a marble takes about 30 s round the loop, 6 s of it up the screw; at 0.2 it drifts down in slow motion, at 3 it runs half as fast again."},{"name":"Marbles","min":6,"max":28,"about":"How many marbles are in the run, from 6 to 28; the screw lets them on at an even spacing, so they stay spread round the loop."},{"name":"Tilt","min":0,"max":1,"about":"How steep the three zigzag tracks, the chimes and the trough hang, from a drop of 2 LEDs along each track to 8, and so how fast the marbles run down them."}],"start":[0,2,6,0.06],"measures":{"motion":0.4936,"detail":0.087,"edges":0.6482,"complexity":0.8353,"coverage":0.464,"colour":0.2101,"drift":0.042},"knobResponse":[0.0707,0.0515,0.0698,0.0736]},{"slug":"marbling","title":"Marbling","family":"print","round":15,"note":"물 위에 떨어진 잉크 방울이 과녁처럼 번지고, 빗이 지나가면 깃털과 갈매기 무늬로 끌려가요. 종이를 들어 올리면 물이 비고 다음 판에 다시 방울이 떨어져요.","idea":"Drops of ink land on a dark bath and spread into rings, a comb is drawn across them one way and back the other and then down through them, dragging the rings into chevrons and feathers, then the paper is lifted and the bath starts again.","buttons":"K1 tap lifts the paper now, whatever is on the bath, and the next bath starts.","code":"// ===== Patternflow pattern =====\n// Title:   Marbling\n// Family:  print\n// Idea:    Drops of ink land on a dark bath and spread into rings, a comb is drawn across them one way and back the other and then down through them, dragging the rings into chevrons and feathers, then the paper is lifted and the bath starts again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Aubrey Jaffer's mathematical marbling, after Turkish ebru and Japanese suminagashi\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=3..8, Comb=0..1\n//\n// Knob 1: Hue. Turns the four inks round the colour wheel together, opening on ultramarine, turquoise, gold and rose.\n// Knob 2: Speed. How fast the marbler works: one bath, drops to lift, takes 116 s at the bottom of the range, 11.6 s where it opens and 7.7 s at the top.\n// Knob 3: Drops. How many places the inks are dropped, from 3 bullseyes about 50 LEDs across to 8 about 30 across; turning it lifts the print and the next bath has the new count.\n// Knob 4: Comb. How close the comb's teeth stand, from 3 teeth 43 LEDs apart that drag the rings most of the panel's width to 16 teeth 8 LEDs apart that crimp them; the comb drawn down afterwards goes from 3 teeth to 10.\n// Buttons: K1 tap lifts the paper now, whatever is on the bath, and the next bath starts.\n\nconst W = 64;\nconst H = 128;\nconst GW = W + 1;\nconst MAXSITES = 8;\n// Five drops land on each site: ink, clear water, ink, clear water, ink.\nconst DROPS = 5;\n// The drops of all the sites add up to this share of the panel's area.\nconst FILL = 0.8;\n// A clear drop's radius against an ink drop's: the dark rings between inks.\nconst CLEAR = 0.8;\n// How far a site stands off the panel's middle, in LEDs: OFF and up to 4 more.\nconst OFF = 5;\n// The bath's programme in bath seconds. Speed 2 runs 0.9 of them a second.\nconst RATE = 0.45;\nconst DROPS_END = 2.6;\nconst SPREAD = 0.5;\nconst ACROSS = 3.0;\nconst BACK = 4.8;\nconst PASS = 1.6;\nconst DOWN = 6.6;\nconst DOWN_LEN = 1.4;\nconst LIFT = 9.0;\nconst LIFT_LEN = 1.0;\nconst REST = 0.4;\n// The first frame finds the last site's drops landing.\nconst START = 1.6;\n// How far a coarse comb drags the ink sideways at a tooth, in LEDs, and how\n// far its pull reaches between teeth, as a share of the gap between them.\nconst ACROSS_PULL = 60;\nconst REACH = 0.75;\n// The sideways pull of the comb, in LEDs, as a function of height, and the\n// downward pull as a function of column: tables at a quarter LED, reaching\n// 64 LEDs past the panel, since the bath goes on beyond it.\nconst TQ = 4;\nconst TY0 = -64;\nconst TY = (H + 128) * TQ;\nconst TX0 = -64;\nconst TX = (W + 128) * TQ;\n// Ink hue and saturation, ultramarine, turquoise, gold, rose, before Hue turns them.\nconst INKS = [\n  [0.63, 1],\n  [0.48, 0.95],\n  [0.12, 1],\n  [0.94, 0.9],\n];\nconst NI = INKS.length;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction ease(a, len, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / len));\n  return t * t * (3 - 2 * t);\n}\n\n// Distance from d to the nearest tooth of a comb whose teeth stand at\n// phase, phase + pitch, phase + 2 pitch and so on.\nfunction toothDistance(d, phase, pitch) {\n  d -= phase;\n  d -= Math.floor(d / pitch) * pitch;\n  return d \u003c pitch - d ? d : pitch - d;\n}\n\n// A fresh bath. Each site is a spot where five drops land one after another.\n// The sites stand one above the other near the middle of their bands, every\n// other one 5 to 9 LEDs left of the panel's middle and the rest as far right,\n// and land in a shuffled order. All sites take the same size of drop.\nfunction newBath(P) {\n  P.tau = 0;\n  P.lift = -1;\n  const sites = P.sites;\n  const order = [];\n  for (let i = 0; i \u003c sites; i++) order.push(i);\n  for (let i = sites - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    const t = order[i];\n    order[i] = order[j];\n    order[j] = t;\n  }\n  const each = (DROPS_END - 0.1) / sites;\n  const R = Math.sqrt((FILL * W * H) / (sites * (DROPS - 0.5) * Math.PI));\n  let ink = Math.floor(Math.random() * NI);\n  const flip = Math.random() \u003c 0.5 ? 1 : -1;\n  for (let s = 0; s \u003c sites; s++) {\n    const band = order[s];\n    P.cx[s] = W / 2 + (band % 2 === 0 ? flip : -flip) * (OFF + Math.random() * 4);\n    P.cy[s] = ((band + 0.35 + Math.random() * 0.3) * H) / sites;\n    for (let d = 0; d \u003c DROPS; d++) {\n      const o = s * DROPS + d;\n      // Ink and clear water take turns, ink first and last, so the rings\n      // come out ink, dark, ink round an ink centre. The inks come round in\n      // turn, so every bath carries all four.\n      const clear = d % 2 === 1;\n      P.ink[o] = clear ? -1 : ink++ % NI;\n      P.rad[o] = R * (clear ? CLEAR : 1);\n      P.t0[o] = 0.1 + s * each + (d * each * 0.8) / DROPS;\n    }\n  }\n  // The first pass is drawn towards the side the even bands stand on (the\n  // top and bottom sites at Drops 3), so it drags the odd ones across the\n  // middle and folds the even ones back off the edge. Left to a coin, some\n  // baths came out of the first pass looking much as they went in.\n  P.dir = flip;\n}\n\nexport function setup(params) {\n  params.cx = new Float64Array(MAXSITES);\n  params.cy = new Float64Array(MAXSITES);\n  params.ink = new Int8Array(MAXSITES * DROPS);\n  params.rad = new Float64Array(MAXSITES * DROPS);\n  params.t0 = new Float64Array(MAXSITES * DROPS);\n  params.r2 = new Float64Array(MAXSITES * DROPS);\n  params.rowShift = new Float64Array(TY + 1);\n  params.colShift = new Float64Array(TX + 1);\n  params.tau = 0;\n  params.lift = -1;\n  params.dir = 1;\n  params.sites = 3;\n  params.live = 0;\n  params.hue = 0;\n  params.started = false;\n  params.idx = new Int8Array(GW * (H + 1));\n  params.px = new Float64Array(GW);\n  params.py = new Float64Array(GW);\n  params.hit = new Int8Array(GW);\n  params.rgb = new Float32Array(NI * 3);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  const P = params;\n  P.hue = k[0];\n  const comb = Math.max(0, Math.min(1, k[3]));\n  const sites = Math.max(3, Math.min(MAXSITES, Math.round(k[2])));\n  const step = dt * Math.max(0.05, k[1]) * RATE;\n  if (!P.started) {\n    P.started = true;\n    P.sites = sites;\n    newBath(P);\n    P.tau = START;\n  }\n  // The paper goes down on the bath and comes up with the print; then the\n  // bath is skimmed and the next drops fall. A tap, or a new Drops count,\n  // lifts whatever is on the bath now.\n  const tap = input.btnPressed && input.btnPressed[0];\n  if (P.lift \u003c 0 && (P.tau >= LIFT || tap || sites !== P.sites)) P.lift = 0;\n  if (P.lift >= 0) {\n    P.lift += step;\n    if (P.lift >= LIFT_LEN + REST) {\n      P.sites = sites;\n      newBath(P);\n    }\n  } else P.tau += step;\n  const tau = P.tau;\n\n  // Every drop's radius squared as it stands now. A drop spreads fast and\n  // slows as it meets the bath.\n  let live = 0;\n  for (let o = 0; o \u003c P.sites * DROPS; o++) {\n    const u = Math.max(0, Math.min(1, (tau - P.t0[o]) / SPREAD));\n    const r = P.rad[o] * (1 - (1 - u) * (1 - u) * (1 - u));\n    P.r2[o] = r * r;\n    if (u > 0) live = Math.floor(o / DROPS) + 1;\n  }\n  P.live = live;\n\n  // The comb is drawn across, then back the other way with its teeth\n  // between the first pass's, then a finer comb is drawn down. A tooth drags\n  // the bath along with it, less the further from the tooth: Jaffer's tine\n  // line, a pull of size * lam / (d + lam) at distance d.\n  const teeth = 3 + Math.round(comb * 13);\n  const pitch = H / teeth;\n  const lam = 2 + pitch * REACH;\n  // A fine comb drags the ink less far than a coarse one.\n  const pull = ACROSS_PULL * Math.min(1, pitch / 30);\n  const a1 = pull * ease(ACROSS, PASS, tau) * P.dir;\n  const a2 = -pull * ease(BACK, PASS, tau) * P.dir;\n  const rows = P.rowShift;\n  for (let i = 0; i \u003c= TY; i++) {\n    const y = TY0 + i / TQ;\n    let sh = 0;\n    if (a1 !== 0) sh += (a1 * lam) / (toothDistance(y, pitch * 0.5, pitch) + lam);\n    if (a2 !== 0) sh += (a2 * lam) / (toothDistance(y, 0, pitch) + lam);\n    rows[i] = sh;\n  }\n  const down = 3 + Math.round(comb * 7);\n  const dpitch = W / down;\n  const a3 = 14 * Math.min(1, dpitch / 16) * ease(DOWN, DOWN_LEN, tau);\n  const cols = P.colShift;\n  for (let i = 0; i \u003c= TX; i++) cols[i] = a3 === 0 ? 0 : (a3 * 2.5) / (toothDistance(TX0 + i / TQ, dpitch * 0.5, dpitch) + 2.5);\n}\n\nfunction lookup(table, v, v0, n) {\n  let f = (v - v0) * TQ;\n  if (f \u003c= 0) return table[0];\n  if (f >= n) return table[n];\n  const i = Math.floor(f);\n  f -= i;\n  return table[i] + (table[i + 1] - table[i]) * f;\n}\n\n// Finds whose ink lies under each corner of LEDs along the row at height y:\n// follows each point backwards through the comb strokes and then every site,\n// newest first, and writes 0..3 into hit, or -1 for the dark bath. The whole\n// row goes through one site before the next, so the processor can work on\n// many points while each waits on its square root.\nfunction inkRow(P, y) {\n  const cx = P.cx;\n  const cy = P.cy;\n  const r2 = P.r2;\n  const inks = P.ink;\n  const px = P.px;\n  const py = P.py;\n  const hit = P.hit;\n  const rows = P.rowShift;\n  const cols = P.colShift;\n  for (let j = 0; j \u003c GW; j++) {\n    const yy = y - lookup(cols, j, TX0, TX);\n    let x = j - lookup(rows, yy, TY0, TY);\n    // The bath past the panel's sides mirrors the panel, so a comb pulls\n    // ink in from beyond the edge.\n    x -= Math.floor(x / (2 * W)) * 2 * W;\n    px[j] = x \u003c W ? x : 2 * W - x;\n    py[j] = yy;\n    hit[j] = -2;\n  }\n  for (let s = P.live - 1; s >= 0; s--) {\n    const ox = cx[s];\n    const oy = cy[s];\n    const base = s * DROPS;\n    for (let j = 0; j \u003c GW; j++) {\n      if (hit[j] !== -2) continue;\n      const dx = px[j] - ox;\n      const dy = py[j] - oy;\n      const d2 = dx * dx + dy * dy;\n      // Drops on one spot push straight outward, so their areas add up: a\n      // point is in the newest drop, or in the ring of the one before, and so\n      // on, and past them all it comes in by their total area.\n      let rest = d2;\n      let o = base + DROPS - 1;\n      for (; o >= base; o--) {\n        if (rest \u003c r2[o]) break;\n        rest -= r2[o];\n      }\n      if (o >= base) hit[j] = inks[o];\n      else if (rest \u003c d2) {\n        const f = Math.sqrt(rest / d2);\n        px[j] = ox + dx * f;\n        py[j] = oy + dy * f;\n      }\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const idx = P.idx;\n  const rgb = P.rgb;\n  const hit = P.hit;\n  for (let i = 0; i \u003c NI; i++) hsvInto(rgb, i * 3, INKS[i][0] + P.hue, INKS[i][1], 1);\n  // The bath is sampled at the LEDs' corners, and each LED shows the mean of\n  // its four corners: one sample an LED, and edges come out soft by a step.\n  for (let y = 0; y \u003c= H; y++) {\n    inkRow(P, y);\n    for (let j = 0; j \u003c GW; j++) idx[y * GW + j] = hit[j] === -2 ? -1 : hit[j];\n  }\n  for (let y = 0; y \u003c H; y++) {\n    // The paper peels off from the top and takes the print with it.\n    const fade = P.lift \u003c 0 ? 1 : 1 - ease((y / H) * 0.4, 0.6, P.lift);\n    if (fade \u003c= 0) continue;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * GW + x;\n      const a = idx[p];\n      const b2 = idx[p + 1];\n      const c = idx[p + GW];\n      const d = idx[p + GW + 1];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (a === b2 && a === c && a === d) {\n        if (a \u003c 0) continue;\n        r = rgb[a * 3];\n        g = rgb[a * 3 + 1];\n        b = rgb[a * 3 + 2];\n      } else {\n        for (let n = 0; n \u003c 4; n++) {\n          const e = n === 0 ? a : n === 1 ? b2 : n === 2 ? c : d;\n          if (e \u003c 0) continue;\n          r += rgb[e * 3] * 0.25;\n          g += rgb[e * 3 + 1] * 0.25;\n          b += rgb[e * 3 + 2] * 0.25;\n        }\n      }\n      display.setPixel(x, y, r * fade, g * fade, b * fade);\n    }\n  }\n}\n","layer":{"id":"layer-marbling","type":"code","name":"marbling","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Marbling\n// Family:  print\n// Idea:    Drops of ink land on a dark bath and spread into rings, a comb is drawn across them one way and back the other and then down through them, dragging the rings into chevrons and feathers, then the paper is lifted and the bath starts again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Aubrey Jaffer's mathematical marbling, after Turkish ebru and Japanese suminagashi\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=3..8, Comb=0..1\n//\n// Knob 1: Hue. Turns the four inks round the colour wheel together, opening on ultramarine, turquoise, gold and rose.\n// Knob 2: Speed. How fast the marbler works: one bath, drops to lift, takes 116 s at the bottom of the range, 11.6 s where it opens and 7.7 s at the top.\n// Knob 3: Drops. How many places the inks are dropped, from 3 bullseyes about 50 LEDs across to 8 about 30 across; turning it lifts the print and the next bath has the new count.\n// Knob 4: Comb. How close the comb's teeth stand, from 3 teeth 43 LEDs apart that drag the rings most of the panel's width to 16 teeth 8 LEDs apart that crimp them; the comb drawn down afterwards goes from 3 teeth to 10.\n// Buttons: K1 tap lifts the paper now, whatever is on the bath, and the next bath starts.\n\nconst W = 64;\nconst H = 128;\nconst GW = W + 1;\nconst MAXSITES = 8;\n// Five drops land on each site: ink, clear water, ink, clear water, ink.\nconst DROPS = 5;\n// The drops of all the sites add up to this share of the panel's area.\nconst FILL = 0.8;\n// A clear drop's radius against an ink drop's: the dark rings between inks.\nconst CLEAR = 0.8;\n// How far a site stands off the panel's middle, in LEDs: OFF and up to 4 more.\nconst OFF = 5;\n// The bath's programme in bath seconds. Speed 2 runs 0.9 of them a second.\nconst RATE = 0.45;\nconst DROPS_END = 2.6;\nconst SPREAD = 0.5;\nconst ACROSS = 3.0;\nconst BACK = 4.8;\nconst PASS = 1.6;\nconst DOWN = 6.6;\nconst DOWN_LEN = 1.4;\nconst LIFT = 9.0;\nconst LIFT_LEN = 1.0;\nconst REST = 0.4;\n// The first frame finds the last site's drops landing.\nconst START = 1.6;\n// How far a coarse comb drags the ink sideways at a tooth, in LEDs, and how\n// far its pull reaches between teeth, as a share of the gap between them.\nconst ACROSS_PULL = 60;\nconst REACH = 0.75;\n// The sideways pull of the comb, in LEDs, as a function of height, and the\n// downward pull as a function of column: tables at a quarter LED, reaching\n// 64 LEDs past the panel, since the bath goes on beyond it.\nconst TQ = 4;\nconst TY0 = -64;\nconst TY = (H + 128) * TQ;\nconst TX0 = -64;\nconst TX = (W + 128) * TQ;\n// Ink hue and saturation, ultramarine, turquoise, gold, rose, before Hue turns them.\nconst INKS = [\n  [0.63, 1],\n  [0.48, 0.95],\n  [0.12, 1],\n  [0.94, 0.9],\n];\nconst NI = INKS.length;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction ease(a, len, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / len));\n  return t * t * (3 - 2 * t);\n}\n\n// Distance from d to the nearest tooth of a comb whose teeth stand at\n// phase, phase + pitch, phase + 2 pitch and so on.\nfunction toothDistance(d, phase, pitch) {\n  d -= phase;\n  d -= Math.floor(d / pitch) * pitch;\n  return d \u003c pitch - d ? d : pitch - d;\n}\n\n// A fresh bath. Each site is a spot where five drops land one after another.\n// The sites stand one above the other near the middle of their bands, every\n// other one 5 to 9 LEDs left of the panel's middle and the rest as far right,\n// and land in a shuffled order. All sites take the same size of drop.\nfunction newBath(P) {\n  P.tau = 0;\n  P.lift = -1;\n  const sites = P.sites;\n  const order = [];\n  for (let i = 0; i \u003c sites; i++) order.push(i);\n  for (let i = sites - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    const t = order[i];\n    order[i] = order[j];\n    order[j] = t;\n  }\n  const each = (DROPS_END - 0.1) / sites;\n  const R = Math.sqrt((FILL * W * H) / (sites * (DROPS - 0.5) * Math.PI));\n  let ink = Math.floor(Math.random() * NI);\n  const flip = Math.random() \u003c 0.5 ? 1 : -1;\n  for (let s = 0; s \u003c sites; s++) {\n    const band = order[s];\n    P.cx[s] = W / 2 + (band % 2 === 0 ? flip : -flip) * (OFF + Math.random() * 4);\n    P.cy[s] = ((band + 0.35 + Math.random() * 0.3) * H) / sites;\n    for (let d = 0; d \u003c DROPS; d++) {\n      const o = s * DROPS + d;\n      // Ink and clear water take turns, ink first and last, so the rings\n      // come out ink, dark, ink round an ink centre. The inks come round in\n      // turn, so every bath carries all four.\n      const clear = d % 2 === 1;\n      P.ink[o] = clear ? -1 : ink++ % NI;\n      P.rad[o] = R * (clear ? CLEAR : 1);\n      P.t0[o] = 0.1 + s * each + (d * each * 0.8) / DROPS;\n    }\n  }\n  // The first pass is drawn towards the side the even bands stand on (the\n  // top and bottom sites at Drops 3), so it drags the odd ones across the\n  // middle and folds the even ones back off the edge. Left to a coin, some\n  // baths came out of the first pass looking much as they went in.\n  P.dir = flip;\n}\n\nexport function setup(params) {\n  params.cx = new Float64Array(MAXSITES);\n  params.cy = new Float64Array(MAXSITES);\n  params.ink = new Int8Array(MAXSITES * DROPS);\n  params.rad = new Float64Array(MAXSITES * DROPS);\n  params.t0 = new Float64Array(MAXSITES * DROPS);\n  params.r2 = new Float64Array(MAXSITES * DROPS);\n  params.rowShift = new Float64Array(TY + 1);\n  params.colShift = new Float64Array(TX + 1);\n  params.tau = 0;\n  params.lift = -1;\n  params.dir = 1;\n  params.sites = 3;\n  params.live = 0;\n  params.hue = 0;\n  params.started = false;\n  params.idx = new Int8Array(GW * (H + 1));\n  params.px = new Float64Array(GW);\n  params.py = new Float64Array(GW);\n  params.hit = new Int8Array(GW);\n  params.rgb = new Float32Array(NI * 3);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  const P = params;\n  P.hue = k[0];\n  const comb = Math.max(0, Math.min(1, k[3]));\n  const sites = Math.max(3, Math.min(MAXSITES, Math.round(k[2])));\n  const step = dt * Math.max(0.05, k[1]) * RATE;\n  if (!P.started) {\n    P.started = true;\n    P.sites = sites;\n    newBath(P);\n    P.tau = START;\n  }\n  // The paper goes down on the bath and comes up with the print; then the\n  // bath is skimmed and the next drops fall. A tap, or a new Drops count,\n  // lifts whatever is on the bath now.\n  const tap = input.btnPressed && input.btnPressed[0];\n  if (P.lift \u003c 0 && (P.tau >= LIFT || tap || sites !== P.sites)) P.lift = 0;\n  if (P.lift >= 0) {\n    P.lift += step;\n    if (P.lift >= LIFT_LEN + REST) {\n      P.sites = sites;\n      newBath(P);\n    }\n  } else P.tau += step;\n  const tau = P.tau;\n\n  // Every drop's radius squared as it stands now. A drop spreads fast and\n  // slows as it meets the bath.\n  let live = 0;\n  for (let o = 0; o \u003c P.sites * DROPS; o++) {\n    const u = Math.max(0, Math.min(1, (tau - P.t0[o]) / SPREAD));\n    const r = P.rad[o] * (1 - (1 - u) * (1 - u) * (1 - u));\n    P.r2[o] = r * r;\n    if (u > 0) live = Math.floor(o / DROPS) + 1;\n  }\n  P.live = live;\n\n  // The comb is drawn across, then back the other way with its teeth\n  // between the first pass's, then a finer comb is drawn down. A tooth drags\n  // the bath along with it, less the further from the tooth: Jaffer's tine\n  // line, a pull of size * lam / (d + lam) at distance d.\n  const teeth = 3 + Math.round(comb * 13);\n  const pitch = H / teeth;\n  const lam = 2 + pitch * REACH;\n  // A fine comb drags the ink less far than a coarse one.\n  const pull = ACROSS_PULL * Math.min(1, pitch / 30);\n  const a1 = pull * ease(ACROSS, PASS, tau) * P.dir;\n  const a2 = -pull * ease(BACK, PASS, tau) * P.dir;\n  const rows = P.rowShift;\n  for (let i = 0; i \u003c= TY; i++) {\n    const y = TY0 + i / TQ;\n    let sh = 0;\n    if (a1 !== 0) sh += (a1 * lam) / (toothDistance(y, pitch * 0.5, pitch) + lam);\n    if (a2 !== 0) sh += (a2 * lam) / (toothDistance(y, 0, pitch) + lam);\n    rows[i] = sh;\n  }\n  const down = 3 + Math.round(comb * 7);\n  const dpitch = W / down;\n  const a3 = 14 * Math.min(1, dpitch / 16) * ease(DOWN, DOWN_LEN, tau);\n  const cols = P.colShift;\n  for (let i = 0; i \u003c= TX; i++) cols[i] = a3 === 0 ? 0 : (a3 * 2.5) / (toothDistance(TX0 + i / TQ, dpitch * 0.5, dpitch) + 2.5);\n}\n\nfunction lookup(table, v, v0, n) {\n  let f = (v - v0) * TQ;\n  if (f \u003c= 0) return table[0];\n  if (f >= n) return table[n];\n  const i = Math.floor(f);\n  f -= i;\n  return table[i] + (table[i + 1] - table[i]) * f;\n}\n\n// Finds whose ink lies under each corner of LEDs along the row at height y:\n// follows each point backwards through the comb strokes and then every site,\n// newest first, and writes 0..3 into hit, or -1 for the dark bath. The whole\n// row goes through one site before the next, so the processor can work on\n// many points while each waits on its square root.\nfunction inkRow(P, y) {\n  const cx = P.cx;\n  const cy = P.cy;\n  const r2 = P.r2;\n  const inks = P.ink;\n  const px = P.px;\n  const py = P.py;\n  const hit = P.hit;\n  const rows = P.rowShift;\n  const cols = P.colShift;\n  for (let j = 0; j \u003c GW; j++) {\n    const yy = y - lookup(cols, j, TX0, TX);\n    let x = j - lookup(rows, yy, TY0, TY);\n    // The bath past the panel's sides mirrors the panel, so a comb pulls\n    // ink in from beyond the edge.\n    x -= Math.floor(x / (2 * W)) * 2 * W;\n    px[j] = x \u003c W ? x : 2 * W - x;\n    py[j] = yy;\n    hit[j] = -2;\n  }\n  for (let s = P.live - 1; s >= 0; s--) {\n    const ox = cx[s];\n    const oy = cy[s];\n    const base = s * DROPS;\n    for (let j = 0; j \u003c GW; j++) {\n      if (hit[j] !== -2) continue;\n      const dx = px[j] - ox;\n      const dy = py[j] - oy;\n      const d2 = dx * dx + dy * dy;\n      // Drops on one spot push straight outward, so their areas add up: a\n      // point is in the newest drop, or in the ring of the one before, and so\n      // on, and past them all it comes in by their total area.\n      let rest = d2;\n      let o = base + DROPS - 1;\n      for (; o >= base; o--) {\n        if (rest \u003c r2[o]) break;\n        rest -= r2[o];\n      }\n      if (o >= base) hit[j] = inks[o];\n      else if (rest \u003c d2) {\n        const f = Math.sqrt(rest / d2);\n        px[j] = ox + dx * f;\n        py[j] = oy + dy * f;\n      }\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const idx = P.idx;\n  const rgb = P.rgb;\n  const hit = P.hit;\n  for (let i = 0; i \u003c NI; i++) hsvInto(rgb, i * 3, INKS[i][0] + P.hue, INKS[i][1], 1);\n  // The bath is sampled at the LEDs' corners, and each LED shows the mean of\n  // its four corners: one sample an LED, and edges come out soft by a step.\n  for (let y = 0; y \u003c= H; y++) {\n    inkRow(P, y);\n    for (let j = 0; j \u003c GW; j++) idx[y * GW + j] = hit[j] === -2 ? -1 : hit[j];\n  }\n  for (let y = 0; y \u003c H; y++) {\n    // The paper peels off from the top and takes the print with it.\n    const fade = P.lift \u003c 0 ? 1 : 1 - ease((y / H) * 0.4, 0.6, P.lift);\n    if (fade \u003c= 0) continue;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * GW + x;\n      const a = idx[p];\n      const b2 = idx[p + 1];\n      const c = idx[p + GW];\n      const d = idx[p + GW + 1];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (a === b2 && a === c && a === d) {\n        if (a \u003c 0) continue;\n        r = rgb[a * 3];\n        g = rgb[a * 3 + 1];\n        b = rgb[a * 3 + 2];\n      } else {\n        for (let n = 0; n \u003c 4; n++) {\n          const e = n === 0 ? a : n === 1 ? b2 : n === 2 ? c : d;\n          if (e \u003c 0) continue;\n          r += rgb[e * 3] * 0.25;\n          g += rgb[e * 3 + 1] * 0.25;\n          b += rgb[e * 3 + 2] * 0.25;\n        }\n      }\n      display.setPixel(x, y, r * fade, g * fade, b * fade);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Drops=3..8, Comb=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the four inks round the colour wheel together, opening on ultramarine, turquoise, gold and rose."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the marbler works: one bath, drops to lift, takes 116 s at the bottom of the range, 11.6 s where it opens and 7.7 s at the top."},{"name":"Drops","min":3,"max":8,"about":"How many places the inks are dropped, from 3 bullseyes about 50 LEDs across to 8 about 30 across; turning it lifts the print and the next bath has the new count."},{"name":"Comb","min":0,"max":1,"about":"How close the comb's teeth stand, from 3 teeth 43 LEDs apart that drag the rings most of the panel's width to 16 teeth 8 LEDs apart that crimp them; the comb drawn down afterwards goes from 3 teeth to 10."}],"start":[0,2,3,0.06],"measures":{"motion":1.6459,"detail":0.1305,"edges":0.9605,"complexity":0.2799,"coverage":0.6371,"colour":0.5767,"drift":0.3773},"knobResponse":[0.3451,0.3454,0.3519,0.2984]},{"slug":"maze","title":"Maze","family":"algo","round":2,"note":"미로를 한 칸씩 파고 나면 입구에서 너비 우선 물결이 퍼져 복도마다 거리만큼 색을 입혀요. 가장 짧은 길이 밝게 그어지고, 미로가 부서진 자리에 다음 미로가 파여요.","idea":"A maze is carved cell by cell, a breadth-first flood from the way in colours every corridor by its distance, the shortest way out is traced bright, and the maze crumbles for the next one.","buttons":"K1 tap crumbles the maze and carves a new one.","code":"// ===== Patternflow pattern =====\n// Title:   Maze\n// Family:  algo\n// Idea:    A maze is carved cell by cell, a breadth-first flood from the way in colours every corridor by its distance, the shortest way out is traced bright, and the maze crumbles for the next one.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Cell=2..4, Carver=0..3\n//\n// Knob 1: Hue. Turns the flood, which runs from gold at the way in through red to violet at the far ends, and the carver's lit cells with it.\n// Knob 2: Speed. Carving, flood and trace together, from about 50 carving steps a second to about 1100.\n// Knob 3: Cell. Corridor width in LEDs: 2 gives a maze of 21 by 42 cells, 4 one of 12 by 25.\n// Knob 4: Carver. 0 recursive backtracker with its stack lit, 1 Prim's with its frontier lit, 2 Kruskal's with each joined patch its own shade, 3 sidewinder row by row.\n// Buttons: K1 tap crumbles the maze and carves a new one.\n\nconst W = 64;\nconst H = 128;\nconst MAXC = 900;\n\nconst CARVE = 0;\nconst FLOOD = 1;\nconst TRACE = 2;\nconst HOLD = 3;\nconst CRUMBLE = 4;\n\nconst BACKTRACK = 0;\nconst PRIM = 1;\nconst KRUSKAL = 2;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = 255 * (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v);\n  out[o + 1] = 255 * (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p);\n  out[o + 2] = 255 * (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q);\n}\n\nexport function setup(params) {\n  const P = params;\n  // Every LED says what it shows: a cell, the wall a passage can open in\n  // (N + 2a to the right of cell a, N + 2a + 1 below it), or -1 for a wall\n  // that never opens.\n  P.map = new Int16Array(W * H);\n  P.openR = new Uint8Array(MAXC);\n  P.openD = new Uint8Array(MAXC);\n  P.inMaze = new Uint8Array(MAXC);\n  P.seq = new Int16Array(MAXC);\n  P.mark = new Uint8Array(MAXC);\n  P.stack = new Int16Array(MAXC);\n  P.front = new Int16Array(MAXC);\n  P.parent = new Int16Array(MAXC);\n  P.size = new Int16Array(MAXC);\n  P.edges = new Int16Array(MAXC * 2);\n  P.dist = new Int16Array(MAXC);\n  P.from = new Int16Array(MAXC);\n  P.queue = new Int16Array(MAXC);\n  P.onPath = new Uint8Array(MAXC);\n  P.thr = new Float32Array(MAXC);\n  P.rgb = new Float32Array(MAXC * 3);\n  P.nb = new Int16Array(4);\n  P.floodLut = new Float32Array(64 * 3);\n  P.patchLut = new Float32Array(16 * 3);\n  P.pal = new Float32Array(4 * 3);\n  P.cell = 0;\n  P.carver = 0;\n  P.hueKey = -1;\n  P.phase = CARVE;\n  P.t = 0;\n  P.acc = 0;\n}\n\nfunction build(P, c) {\n  const pitch = c + 1;\n  const cols = Math.floor((W - 1) / pitch);\n  const rows = Math.floor((H - 1) / pitch);\n  const N = cols * rows;\n  P.cols = cols;\n  P.rows = rows;\n  P.N = N;\n  P.cell = c;\n  P.ox = (W - (cols * pitch + 1)) >> 1;\n  P.oy = (H - (rows * pitch + 1)) >> 1;\n  P.map.fill(-1);\n  for (let cy = 0; cy \u003c rows; cy++) {\n    for (let cx = 0; cx \u003c cols; cx++) {\n      const a = cy * cols + cx;\n      const x0 = P.ox + cx * pitch + 1;\n      const y0 = P.oy + cy * pitch + 1;\n      for (let y = 0; y \u003c c; y++) {\n        for (let x = 0; x \u003c c; x++) P.map[(y0 + y) * W + x0 + x] = a;\n        if (cx \u003c cols - 1) P.map[(y0 + y) * W + x0 + c] = N + a * 2;\n      }\n      if (cy \u003c rows - 1) for (let x = 0; x \u003c c; x++) P.map[(y0 + c) * W + x0 + x] = N + a * 2 + 1;\n    }\n  }\n  P.inX = -1;\n  P.outX = -1;\n}\n\n// The way in is a gap in the top edge above one cell, the way out one in the\n// bottom edge; the LEDs of the gap belong to the cell beside them.\nfunction doors(P, value) {\n  const c = P.cell;\n  const pitch = c + 1;\n  const top = P.oy * W;\n  const bottom = (P.oy + P.rows * pitch) * W;\n  for (let x = 0; x \u003c c; x++) {\n    if (P.inX >= 0) P.map[top + P.ox + P.inX * pitch + 1 + x] = value ? P.start : -1;\n    if (P.outX >= 0) P.map[bottom + P.ox + P.outX * pitch + 1 + x] = value ? P.goal : -1;\n  }\n}\n\nfunction open(P, a, b) {\n  if (b === a + 1) P.openR[a] = 1;\n  else if (b === a - 1) P.openR[b] = 1;\n  else if (b > a) P.openD[a] = 1;\n  else P.openD[b] = 1;\n}\n\n// The neighbours of a with inMaze equal to want go into P.nb.\nfunction neighbours(P, a, want) {\n  const cols = P.cols;\n  const x = a % cols;\n  let n = 0;\n  if (x > 0 && P.inMaze[a - 1] === want) P.nb[n++] = a - 1;\n  if (x \u003c cols - 1 && P.inMaze[a + 1] === want) P.nb[n++] = a + 1;\n  if (a >= cols && P.inMaze[a - cols] === want) P.nb[n++] = a - cols;\n  if (a + cols \u003c P.N && P.inMaze[a + cols] === want) P.nb[n++] = a + cols;\n  return n;\n}\n\nfunction join(P, a) {\n  P.inMaze[a] = 1;\n  P.seq[a] = ++P.seqN;\n}\n\nfunction find(P, a) {\n  const parent = P.parent;\n  while (parent[a] !== a) {\n    parent[a] = parent[parent[a]];\n    a = parent[a];\n  }\n  return a;\n}\n\nfunction addFront(P, a) {\n  const n = neighbours(P, a, 0);\n  for (let i = 0; i \u003c n; i++) {\n    const b = P.nb[i];\n    if (!P.mark[b]) {\n      P.mark[b] = 1;\n      P.front[P.fN++] = b;\n    }\n  }\n}\n\nfunction newMaze(P, carver) {\n  const N = P.N;\n  doors(P, false);\n  P.openR.fill(0);\n  P.openD.fill(0);\n  P.inMaze.fill(0);\n  P.mark.fill(0);\n  P.onPath.fill(0);\n  P.seq.fill(-1);\n  P.seqN = 0;\n  P.carver = carver;\n  P.inX = Math.floor(Math.random() * P.cols);\n  P.outX = Math.floor(Math.random() * P.cols);\n  P.start = P.inX;\n  P.goal = (P.rows - 1) * P.cols + P.outX;\n  doors(P, true);\n  P.phase = CARVE;\n  P.solved = false;\n  P.acc = 0;\n  P.t = 0;\n  if (carver === BACKTRACK) {\n    join(P, P.start);\n    P.stack[0] = P.start;\n    P.sp = 1;\n    P.mark[P.start] = 1;\n    P.total = 2 * N;\n  } else if (carver === PRIM) {\n    join(P, P.start);\n    P.fN = 0;\n    addFront(P, P.start);\n    P.total = N;\n  } else if (carver === KRUSKAL) {\n    let e = 0;\n    for (let a = 0; a \u003c N; a++) {\n      P.parent[a] = a;\n      P.size[a] = 1;\n      if (a % P.cols \u003c P.cols - 1) P.edges[e++] = a * 2;\n      if (a + P.cols \u003c N) P.edges[e++] = a * 2 + 1;\n    }\n    for (let i = e - 1; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.edges[i];\n      P.edges[i] = P.edges[j];\n      P.edges[j] = t;\n    }\n    P.eN = e;\n    P.eAt = 0;\n    P.total = N;\n  } else {\n    P.sx = 0;\n    P.sy = 0;\n    P.run = 0;\n    P.total = N;\n  }\n}\n\n// One step of the carver; false once the maze is whole.\nfunction carve(P) {\n  const cols = P.cols;\n  if (P.carver === BACKTRACK) {\n    if (P.sp === 0) return false;\n    const a = P.stack[P.sp - 1];\n    const n = neighbours(P, a, 0);\n    if (n > 0) {\n      const b = P.nb[Math.floor(Math.random() * n)];\n      open(P, a, b);\n      join(P, b);\n      P.mark[b] = 1;\n      P.stack[P.sp++] = b;\n    } else {\n      P.mark[a] = 0;\n      P.sp--;\n    }\n    return true;\n  }\n  if (P.carver === PRIM) {\n    if (P.fN === 0) return false;\n    const i = Math.floor(Math.random() * P.fN);\n    const a = P.front[i];\n    P.front[i] = P.front[--P.fN];\n    P.mark[a] = 0;\n    const n = neighbours(P, a, 1);\n    open(P, a, P.nb[Math.floor(Math.random() * n)]);\n    join(P, a);\n    addFront(P, a);\n    return true;\n  }\n  if (P.carver === KRUSKAL) {\n    while (P.eAt \u003c P.eN) {\n      const e = P.edges[P.eAt++];\n      const a = e >> 1;\n      const b = e & 1 ? a + cols : a + 1;\n      let ra = find(P, a);\n      let rb = find(P, b);\n      if (ra === rb) continue;\n      // The bigger patch keeps its root, and with it its shade.\n      if (P.size[ra] \u003c P.size[rb]) {\n        const t = ra;\n        ra = rb;\n        rb = t;\n      }\n      P.parent[rb] = ra;\n      P.size[ra] += P.size[rb];\n      open(P, a, b);\n      if (!P.inMaze[a]) join(P, a);\n      if (!P.inMaze[b]) join(P, b);\n      return true;\n    }\n    return false;\n  }\n  // Sidewinder: each row runs east and, where a run ends, one cell of it\n  // opens north. The top row is one long corridor.\n  if (P.sy >= P.rows) return false;\n  const a = P.sy * cols + P.sx;\n  join(P, a);\n  if (P.sy === 0) {\n    if (P.sx \u003c cols - 1) P.openR[a] = 1;\n  } else if (P.sx === cols - 1 || Math.random() \u003c 0.5) {\n    const r = P.run + Math.floor(Math.random() * (P.sx - P.run + 1));\n    P.openD[(P.sy - 1) * cols + r] = 1;\n    P.run = P.sx + 1;\n  } else P.openR[a] = 1;\n  P.sx++;\n  if (P.sx >= cols) {\n    P.sx = 0;\n    P.sy++;\n    P.run = 0;\n  }\n  return true;\n}\n\n// The whole breadth-first search is done at once; the flood on screen only\n// reveals it a layer at a time.\nfunction solve(P) {\n  const N = P.N;\n  const cols = P.cols;\n  P.dist.fill(-1, 0, N);\n  P.dist[P.start] = 0;\n  P.queue[0] = P.start;\n  let qh = 0;\n  let qt = 1;\n  let far = 0;\n  while (qh \u003c qt) {\n    const a = P.queue[qh++];\n    const d = P.dist[a] + 1;\n    const x = a % cols;\n    for (let k = 0; k \u003c 4; k++) {\n      let b = -1;\n      if (k === 0 && x > 0 && P.openR[a - 1]) b = a - 1;\n      else if (k === 1 && x \u003c cols - 1 && P.openR[a]) b = a + 1;\n      else if (k === 2 && a >= cols && P.openD[a - cols]) b = a - cols;\n      else if (k === 3 && a + cols \u003c N && P.openD[a]) b = a + cols;\n      if (b >= 0 && P.dist[b] \u003c 0) {\n        P.dist[b] = d;\n        P.from[b] = a;\n        P.queue[qt++] = b;\n        if (d > far) far = d;\n      }\n    }\n  }\n  P.far = far;\n  for (let a = P.goal; a !== P.start; a = P.from[a]) P.onPath[a] = 1;\n  P.onPath[P.start] = 1;\n  // The crumble takes the side corridors first, in no order, and the path last.\n  for (let a = 0; a \u003c N; a++) P.thr[a] = P.onPath[a] ? 0.72 + 0.12 * Math.random() : Math.random() * 0.7;\n  P.phase = FLOOD;\n  P.solved = true;\n  P.front0 = -2;\n  P.trace = -1e9;\n  P.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  const cell = Math.max(2, Math.min(4, Math.round(k[2])));\n  const carver = Math.max(0, Math.min(3, Math.round(k[3])));\n  const pace = Math.pow(2, 1.1 * k[1]);\n\n  if (cell !== P.cell) {\n    build(P, cell);\n    newMaze(P, carver);\n    // Open on a maze already under way rather than a dark panel.\n    for (let i = Math.floor(P.total * 0.4); i > 0; i--) carve(P);\n  } else if (carver !== P.carver && P.phase === CARVE) {\n    newMaze(P, carver);\n    for (let i = Math.floor(P.total * 0.25); i > 0; i--) carve(P);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== CRUMBLE) {\n    // A maze still being carved has no path yet, so it all crumbles in no order.\n    if (!P.solved) for (let a = 0; a \u003c P.N; a++) P.thr[a] = Math.random() * 0.85;\n    P.phase = CRUMBLE;\n    P.t = 0;\n  }\n\n  if (P.phase === CARVE) {\n    // Bigger cells are fewer, so they carve slower in step and a maze takes\n    // about as long whatever its size.\n    P.acc += dt * 50 * pace * (P.N / 882);\n    let n = 0;\n    while (P.acc >= 1 && n \u003c 400) {\n      P.acc -= 1;\n      n++;\n      if (!carve(P)) {\n        solve(P);\n        break;\n      }\n    }\n    if (P.acc > 1) P.acc = 1;\n  } else if (P.phase === FLOOD) {\n    P.front0 += dt * 26 * pace * Math.sqrt(P.N / 882);\n    if (P.front0 > P.far + 6) {\n      P.front0 = P.far + 6;\n      P.phase = TRACE;\n      P.trace = -2;\n    }\n  } else if (P.phase === TRACE) {\n    P.trace += dt * 40 * pace * Math.sqrt(P.N / 882);\n    if (P.trace > P.dist[P.goal] + 4) {\n      P.phase = HOLD;\n      P.t = 0;\n    }\n  } else if (P.phase === HOLD) {\n    P.t += dt;\n    if (P.t > 1.4) {\n      P.phase = CRUMBLE;\n      P.t = 0;\n    }\n  } else {\n    P.t += dt * Math.min(2, 0.7 + 0.3 * pace);\n    if (P.t > 1.1) newMaze(P, carver);\n  }\n\n  const hue = k[0] + 0.14;\n  if (hue !== P.hueKey) {\n    P.hueKey = hue;\n    // The flood runs backwards round the wheel from the way in, gold through\n    // red to violet, and stays bright: a dim orange would read as brown.\n    for (let i = 0; i \u003c 64; i++) hsvInto(P.floodLut, i * 3, hue - 0.42 * (i / 63), 0.8, 0.85);\n    // The bare maze is slate whatever the hue, and Kruskal's patches are\n    // shades of it, from teal to violet.\n    for (let i = 0; i \u003c 16; i++) hsvInto(P.patchLut, i * 3, 0.5 + 0.32 * (((i * 7) % 16) / 15), 0.5, 0.5 + 0.2 * (i / 15));\n    hsvInto(P.pal, 0, 0.6, 0.3, 0.42);\n    hsvInto(P.pal, 3, hue, 0.8, 0.85);\n    hsvInto(P.pal, 6, hue + 0.4, 0.35, 1);\n  }\n  colourCells(P);\n}\n\nfunction mixWhite(out, o, g) {\n  out[o] += (228 - out[o]) * g;\n  out[o + 1] += (228 - out[o + 1]) * g;\n  out[o + 2] += (228 - out[o + 2]) * g;\n}\n\nfunction colourCells(P) {\n  const N = P.N;\n  const rgb = P.rgb;\n  const pal = P.pal;\n  const carving = !P.solved;\n  // A tap mid-flood or mid-trace crumbles what is shown at that moment.\n  const shown = P.front0;\n  const lit = P.trace;\n  const back = 1 - 0.4 * Math.max(0, Math.min(1, (P.trace + 2) / 30));\n  for (let a = 0; a \u003c N; a++) {\n    const o = a * 3;\n    if (carving && !P.inMaze[a]) {\n      // Prim's frontier waits dim in the accent colour.\n      const f = P.carver === PRIM && P.mark[a] ? 0.7 : 0;\n      rgb[o] = pal[3] * f;\n      rgb[o + 1] = pal[4] * f;\n      rgb[o + 2] = pal[5] * f;\n    } else if (carving) {\n      if (P.carver === KRUSKAL) {\n        const s = (Math.imul(find(P, a) + 1, 2654435761) >>> 28) * 3;\n        rgb[o] = P.patchLut[s];\n        rgb[o + 1] = P.patchLut[s + 1];\n        rgb[o + 2] = P.patchLut[s + 2];\n      } else {\n        // The backtracker's stack, and the sidewinder's open run, in the accent.\n        let c = 0;\n        if (P.carver === BACKTRACK && P.mark[a]) c = 3;\n        else if (P.carver === 3 && a >= P.sy * P.cols + P.run && a \u003c P.sy * P.cols + P.sx) c = 3;\n        rgb[o] = pal[c];\n        rgb[o + 1] = pal[c + 1];\n        rgb[o + 2] = pal[c + 2];\n      }\n      // The cell the carver stands on is white: the backtracker's head even\n      // as it backs up, for the others the cells carved in the last six steps.\n      if (P.carver === BACKTRACK) {\n        if (P.sp > 0 && a === P.stack[P.sp - 1]) mixWhite(rgb, o, 1);\n      } else {\n        const age = P.seqN - P.seq[a];\n        if (age \u003c 6) mixWhite(rgb, o, 1 - age / 6);\n      }\n    } else {\n      const d = P.dist[a];\n      if (d \u003c 0 || d > shown) {\n        rgb[o] = pal[0];\n        rgb[o + 1] = pal[1];\n        rgb[o + 2] = pal[2];\n      } else {\n        const s = Math.min(63, Math.floor((d * 63) / Math.max(1, P.far))) * 3;\n        rgb[o] = P.floodLut[s];\n        rgb[o + 1] = P.floodLut[s + 1];\n        rgb[o + 2] = P.floodLut[s + 2];\n        // The newest layers of the flood are its white front.\n        if (shown - d \u003c 5) mixWhite(rgb, o, 1 - (shown - d) / 5);\n      }\n      if (P.onPath[a] && d \u003c= lit) {\n        rgb[o] = pal[6];\n        rgb[o + 1] = pal[7];\n        rgb[o + 2] = pal[8];\n        if (lit - d \u003c 4) mixWhite(rgb, o, 1 - (lit - d) / 4);\n      } else if (back \u003c 1) {\n        // The rest of the maze steps back while the path is drawn.\n        rgb[o] *= back;\n        rgb[o + 1] *= back;\n        rgb[o + 2] *= back;\n      }\n    }\n    if (P.phase === CRUMBLE) {\n      const f = Math.max(0, Math.min(1, 1 - (P.t - P.thr[a]) / 0.16));\n      rgb[o] *= f;\n      rgb[o + 1] *= f;\n      rgb[o + 2] *= f;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const N = P.N;\n  const rgb = P.rgb;\n  const map = P.map;\n  const carving = !P.solved;\n  const cols = P.cols;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const v = map[y * W + x];\n      if (v \u003c 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      let c = v;\n      if (v >= N) {\n        const e = v - N;\n        const a = e >> 1;\n        if (!(e & 1 ? P.openD[a] : P.openR[a])) {\n          display.setPixel(x, y, 0, 0, 0);\n          continue;\n        }\n        const b = e & 1 ? a + cols : a + 1;\n        // A passage shows whichever of its two cells came later: carved\n        // later while carving, reached later by the flood after.\n        if (carving) c = P.seq[a] > P.seq[b] ? a : b;\n        else c = P.dist[a] > P.dist[b] ? a : b;\n      }\n      display.setPixel(x, y, rgb[c * 3], rgb[c * 3 + 1], rgb[c * 3 + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-maze","type":"code","name":"maze","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Maze\n// Family:  algo\n// Idea:    A maze is carved cell by cell, a breadth-first flood from the way in colours every corridor by its distance, the shortest way out is traced bright, and the maze crumbles for the next one.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Cell=2..4, Carver=0..3\n//\n// Knob 1: Hue. Turns the flood, which runs from gold at the way in through red to violet at the far ends, and the carver's lit cells with it.\n// Knob 2: Speed. Carving, flood and trace together, from about 50 carving steps a second to about 1100.\n// Knob 3: Cell. Corridor width in LEDs: 2 gives a maze of 21 by 42 cells, 4 one of 12 by 25.\n// Knob 4: Carver. 0 recursive backtracker with its stack lit, 1 Prim's with its frontier lit, 2 Kruskal's with each joined patch its own shade, 3 sidewinder row by row.\n// Buttons: K1 tap crumbles the maze and carves a new one.\n\nconst W = 64;\nconst H = 128;\nconst MAXC = 900;\n\nconst CARVE = 0;\nconst FLOOD = 1;\nconst TRACE = 2;\nconst HOLD = 3;\nconst CRUMBLE = 4;\n\nconst BACKTRACK = 0;\nconst PRIM = 1;\nconst KRUSKAL = 2;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = 255 * (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v);\n  out[o + 1] = 255 * (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p);\n  out[o + 2] = 255 * (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q);\n}\n\nexport function setup(params) {\n  const P = params;\n  // Every LED says what it shows: a cell, the wall a passage can open in\n  // (N + 2a to the right of cell a, N + 2a + 1 below it), or -1 for a wall\n  // that never opens.\n  P.map = new Int16Array(W * H);\n  P.openR = new Uint8Array(MAXC);\n  P.openD = new Uint8Array(MAXC);\n  P.inMaze = new Uint8Array(MAXC);\n  P.seq = new Int16Array(MAXC);\n  P.mark = new Uint8Array(MAXC);\n  P.stack = new Int16Array(MAXC);\n  P.front = new Int16Array(MAXC);\n  P.parent = new Int16Array(MAXC);\n  P.size = new Int16Array(MAXC);\n  P.edges = new Int16Array(MAXC * 2);\n  P.dist = new Int16Array(MAXC);\n  P.from = new Int16Array(MAXC);\n  P.queue = new Int16Array(MAXC);\n  P.onPath = new Uint8Array(MAXC);\n  P.thr = new Float32Array(MAXC);\n  P.rgb = new Float32Array(MAXC * 3);\n  P.nb = new Int16Array(4);\n  P.floodLut = new Float32Array(64 * 3);\n  P.patchLut = new Float32Array(16 * 3);\n  P.pal = new Float32Array(4 * 3);\n  P.cell = 0;\n  P.carver = 0;\n  P.hueKey = -1;\n  P.phase = CARVE;\n  P.t = 0;\n  P.acc = 0;\n}\n\nfunction build(P, c) {\n  const pitch = c + 1;\n  const cols = Math.floor((W - 1) / pitch);\n  const rows = Math.floor((H - 1) / pitch);\n  const N = cols * rows;\n  P.cols = cols;\n  P.rows = rows;\n  P.N = N;\n  P.cell = c;\n  P.ox = (W - (cols * pitch + 1)) >> 1;\n  P.oy = (H - (rows * pitch + 1)) >> 1;\n  P.map.fill(-1);\n  for (let cy = 0; cy \u003c rows; cy++) {\n    for (let cx = 0; cx \u003c cols; cx++) {\n      const a = cy * cols + cx;\n      const x0 = P.ox + cx * pitch + 1;\n      const y0 = P.oy + cy * pitch + 1;\n      for (let y = 0; y \u003c c; y++) {\n        for (let x = 0; x \u003c c; x++) P.map[(y0 + y) * W + x0 + x] = a;\n        if (cx \u003c cols - 1) P.map[(y0 + y) * W + x0 + c] = N + a * 2;\n      }\n      if (cy \u003c rows - 1) for (let x = 0; x \u003c c; x++) P.map[(y0 + c) * W + x0 + x] = N + a * 2 + 1;\n    }\n  }\n  P.inX = -1;\n  P.outX = -1;\n}\n\n// The way in is a gap in the top edge above one cell, the way out one in the\n// bottom edge; the LEDs of the gap belong to the cell beside them.\nfunction doors(P, value) {\n  const c = P.cell;\n  const pitch = c + 1;\n  const top = P.oy * W;\n  const bottom = (P.oy + P.rows * pitch) * W;\n  for (let x = 0; x \u003c c; x++) {\n    if (P.inX >= 0) P.map[top + P.ox + P.inX * pitch + 1 + x] = value ? P.start : -1;\n    if (P.outX >= 0) P.map[bottom + P.ox + P.outX * pitch + 1 + x] = value ? P.goal : -1;\n  }\n}\n\nfunction open(P, a, b) {\n  if (b === a + 1) P.openR[a] = 1;\n  else if (b === a - 1) P.openR[b] = 1;\n  else if (b > a) P.openD[a] = 1;\n  else P.openD[b] = 1;\n}\n\n// The neighbours of a with inMaze equal to want go into P.nb.\nfunction neighbours(P, a, want) {\n  const cols = P.cols;\n  const x = a % cols;\n  let n = 0;\n  if (x > 0 && P.inMaze[a - 1] === want) P.nb[n++] = a - 1;\n  if (x \u003c cols - 1 && P.inMaze[a + 1] === want) P.nb[n++] = a + 1;\n  if (a >= cols && P.inMaze[a - cols] === want) P.nb[n++] = a - cols;\n  if (a + cols \u003c P.N && P.inMaze[a + cols] === want) P.nb[n++] = a + cols;\n  return n;\n}\n\nfunction join(P, a) {\n  P.inMaze[a] = 1;\n  P.seq[a] = ++P.seqN;\n}\n\nfunction find(P, a) {\n  const parent = P.parent;\n  while (parent[a] !== a) {\n    parent[a] = parent[parent[a]];\n    a = parent[a];\n  }\n  return a;\n}\n\nfunction addFront(P, a) {\n  const n = neighbours(P, a, 0);\n  for (let i = 0; i \u003c n; i++) {\n    const b = P.nb[i];\n    if (!P.mark[b]) {\n      P.mark[b] = 1;\n      P.front[P.fN++] = b;\n    }\n  }\n}\n\nfunction newMaze(P, carver) {\n  const N = P.N;\n  doors(P, false);\n  P.openR.fill(0);\n  P.openD.fill(0);\n  P.inMaze.fill(0);\n  P.mark.fill(0);\n  P.onPath.fill(0);\n  P.seq.fill(-1);\n  P.seqN = 0;\n  P.carver = carver;\n  P.inX = Math.floor(Math.random() * P.cols);\n  P.outX = Math.floor(Math.random() * P.cols);\n  P.start = P.inX;\n  P.goal = (P.rows - 1) * P.cols + P.outX;\n  doors(P, true);\n  P.phase = CARVE;\n  P.solved = false;\n  P.acc = 0;\n  P.t = 0;\n  if (carver === BACKTRACK) {\n    join(P, P.start);\n    P.stack[0] = P.start;\n    P.sp = 1;\n    P.mark[P.start] = 1;\n    P.total = 2 * N;\n  } else if (carver === PRIM) {\n    join(P, P.start);\n    P.fN = 0;\n    addFront(P, P.start);\n    P.total = N;\n  } else if (carver === KRUSKAL) {\n    let e = 0;\n    for (let a = 0; a \u003c N; a++) {\n      P.parent[a] = a;\n      P.size[a] = 1;\n      if (a % P.cols \u003c P.cols - 1) P.edges[e++] = a * 2;\n      if (a + P.cols \u003c N) P.edges[e++] = a * 2 + 1;\n    }\n    for (let i = e - 1; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.edges[i];\n      P.edges[i] = P.edges[j];\n      P.edges[j] = t;\n    }\n    P.eN = e;\n    P.eAt = 0;\n    P.total = N;\n  } else {\n    P.sx = 0;\n    P.sy = 0;\n    P.run = 0;\n    P.total = N;\n  }\n}\n\n// One step of the carver; false once the maze is whole.\nfunction carve(P) {\n  const cols = P.cols;\n  if (P.carver === BACKTRACK) {\n    if (P.sp === 0) return false;\n    const a = P.stack[P.sp - 1];\n    const n = neighbours(P, a, 0);\n    if (n > 0) {\n      const b = P.nb[Math.floor(Math.random() * n)];\n      open(P, a, b);\n      join(P, b);\n      P.mark[b] = 1;\n      P.stack[P.sp++] = b;\n    } else {\n      P.mark[a] = 0;\n      P.sp--;\n    }\n    return true;\n  }\n  if (P.carver === PRIM) {\n    if (P.fN === 0) return false;\n    const i = Math.floor(Math.random() * P.fN);\n    const a = P.front[i];\n    P.front[i] = P.front[--P.fN];\n    P.mark[a] = 0;\n    const n = neighbours(P, a, 1);\n    open(P, a, P.nb[Math.floor(Math.random() * n)]);\n    join(P, a);\n    addFront(P, a);\n    return true;\n  }\n  if (P.carver === KRUSKAL) {\n    while (P.eAt \u003c P.eN) {\n      const e = P.edges[P.eAt++];\n      const a = e >> 1;\n      const b = e & 1 ? a + cols : a + 1;\n      let ra = find(P, a);\n      let rb = find(P, b);\n      if (ra === rb) continue;\n      // The bigger patch keeps its root, and with it its shade.\n      if (P.size[ra] \u003c P.size[rb]) {\n        const t = ra;\n        ra = rb;\n        rb = t;\n      }\n      P.parent[rb] = ra;\n      P.size[ra] += P.size[rb];\n      open(P, a, b);\n      if (!P.inMaze[a]) join(P, a);\n      if (!P.inMaze[b]) join(P, b);\n      return true;\n    }\n    return false;\n  }\n  // Sidewinder: each row runs east and, where a run ends, one cell of it\n  // opens north. The top row is one long corridor.\n  if (P.sy >= P.rows) return false;\n  const a = P.sy * cols + P.sx;\n  join(P, a);\n  if (P.sy === 0) {\n    if (P.sx \u003c cols - 1) P.openR[a] = 1;\n  } else if (P.sx === cols - 1 || Math.random() \u003c 0.5) {\n    const r = P.run + Math.floor(Math.random() * (P.sx - P.run + 1));\n    P.openD[(P.sy - 1) * cols + r] = 1;\n    P.run = P.sx + 1;\n  } else P.openR[a] = 1;\n  P.sx++;\n  if (P.sx >= cols) {\n    P.sx = 0;\n    P.sy++;\n    P.run = 0;\n  }\n  return true;\n}\n\n// The whole breadth-first search is done at once; the flood on screen only\n// reveals it a layer at a time.\nfunction solve(P) {\n  const N = P.N;\n  const cols = P.cols;\n  P.dist.fill(-1, 0, N);\n  P.dist[P.start] = 0;\n  P.queue[0] = P.start;\n  let qh = 0;\n  let qt = 1;\n  let far = 0;\n  while (qh \u003c qt) {\n    const a = P.queue[qh++];\n    const d = P.dist[a] + 1;\n    const x = a % cols;\n    for (let k = 0; k \u003c 4; k++) {\n      let b = -1;\n      if (k === 0 && x > 0 && P.openR[a - 1]) b = a - 1;\n      else if (k === 1 && x \u003c cols - 1 && P.openR[a]) b = a + 1;\n      else if (k === 2 && a >= cols && P.openD[a - cols]) b = a - cols;\n      else if (k === 3 && a + cols \u003c N && P.openD[a]) b = a + cols;\n      if (b >= 0 && P.dist[b] \u003c 0) {\n        P.dist[b] = d;\n        P.from[b] = a;\n        P.queue[qt++] = b;\n        if (d > far) far = d;\n      }\n    }\n  }\n  P.far = far;\n  for (let a = P.goal; a !== P.start; a = P.from[a]) P.onPath[a] = 1;\n  P.onPath[P.start] = 1;\n  // The crumble takes the side corridors first, in no order, and the path last.\n  for (let a = 0; a \u003c N; a++) P.thr[a] = P.onPath[a] ? 0.72 + 0.12 * Math.random() : Math.random() * 0.7;\n  P.phase = FLOOD;\n  P.solved = true;\n  P.front0 = -2;\n  P.trace = -1e9;\n  P.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  const cell = Math.max(2, Math.min(4, Math.round(k[2])));\n  const carver = Math.max(0, Math.min(3, Math.round(k[3])));\n  const pace = Math.pow(2, 1.1 * k[1]);\n\n  if (cell !== P.cell) {\n    build(P, cell);\n    newMaze(P, carver);\n    // Open on a maze already under way rather than a dark panel.\n    for (let i = Math.floor(P.total * 0.4); i > 0; i--) carve(P);\n  } else if (carver !== P.carver && P.phase === CARVE) {\n    newMaze(P, carver);\n    for (let i = Math.floor(P.total * 0.25); i > 0; i--) carve(P);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== CRUMBLE) {\n    // A maze still being carved has no path yet, so it all crumbles in no order.\n    if (!P.solved) for (let a = 0; a \u003c P.N; a++) P.thr[a] = Math.random() * 0.85;\n    P.phase = CRUMBLE;\n    P.t = 0;\n  }\n\n  if (P.phase === CARVE) {\n    // Bigger cells are fewer, so they carve slower in step and a maze takes\n    // about as long whatever its size.\n    P.acc += dt * 50 * pace * (P.N / 882);\n    let n = 0;\n    while (P.acc >= 1 && n \u003c 400) {\n      P.acc -= 1;\n      n++;\n      if (!carve(P)) {\n        solve(P);\n        break;\n      }\n    }\n    if (P.acc > 1) P.acc = 1;\n  } else if (P.phase === FLOOD) {\n    P.front0 += dt * 26 * pace * Math.sqrt(P.N / 882);\n    if (P.front0 > P.far + 6) {\n      P.front0 = P.far + 6;\n      P.phase = TRACE;\n      P.trace = -2;\n    }\n  } else if (P.phase === TRACE) {\n    P.trace += dt * 40 * pace * Math.sqrt(P.N / 882);\n    if (P.trace > P.dist[P.goal] + 4) {\n      P.phase = HOLD;\n      P.t = 0;\n    }\n  } else if (P.phase === HOLD) {\n    P.t += dt;\n    if (P.t > 1.4) {\n      P.phase = CRUMBLE;\n      P.t = 0;\n    }\n  } else {\n    P.t += dt * Math.min(2, 0.7 + 0.3 * pace);\n    if (P.t > 1.1) newMaze(P, carver);\n  }\n\n  const hue = k[0] + 0.14;\n  if (hue !== P.hueKey) {\n    P.hueKey = hue;\n    // The flood runs backwards round the wheel from the way in, gold through\n    // red to violet, and stays bright: a dim orange would read as brown.\n    for (let i = 0; i \u003c 64; i++) hsvInto(P.floodLut, i * 3, hue - 0.42 * (i / 63), 0.8, 0.85);\n    // The bare maze is slate whatever the hue, and Kruskal's patches are\n    // shades of it, from teal to violet.\n    for (let i = 0; i \u003c 16; i++) hsvInto(P.patchLut, i * 3, 0.5 + 0.32 * (((i * 7) % 16) / 15), 0.5, 0.5 + 0.2 * (i / 15));\n    hsvInto(P.pal, 0, 0.6, 0.3, 0.42);\n    hsvInto(P.pal, 3, hue, 0.8, 0.85);\n    hsvInto(P.pal, 6, hue + 0.4, 0.35, 1);\n  }\n  colourCells(P);\n}\n\nfunction mixWhite(out, o, g) {\n  out[o] += (228 - out[o]) * g;\n  out[o + 1] += (228 - out[o + 1]) * g;\n  out[o + 2] += (228 - out[o + 2]) * g;\n}\n\nfunction colourCells(P) {\n  const N = P.N;\n  const rgb = P.rgb;\n  const pal = P.pal;\n  const carving = !P.solved;\n  // A tap mid-flood or mid-trace crumbles what is shown at that moment.\n  const shown = P.front0;\n  const lit = P.trace;\n  const back = 1 - 0.4 * Math.max(0, Math.min(1, (P.trace + 2) / 30));\n  for (let a = 0; a \u003c N; a++) {\n    const o = a * 3;\n    if (carving && !P.inMaze[a]) {\n      // Prim's frontier waits dim in the accent colour.\n      const f = P.carver === PRIM && P.mark[a] ? 0.7 : 0;\n      rgb[o] = pal[3] * f;\n      rgb[o + 1] = pal[4] * f;\n      rgb[o + 2] = pal[5] * f;\n    } else if (carving) {\n      if (P.carver === KRUSKAL) {\n        const s = (Math.imul(find(P, a) + 1, 2654435761) >>> 28) * 3;\n        rgb[o] = P.patchLut[s];\n        rgb[o + 1] = P.patchLut[s + 1];\n        rgb[o + 2] = P.patchLut[s + 2];\n      } else {\n        // The backtracker's stack, and the sidewinder's open run, in the accent.\n        let c = 0;\n        if (P.carver === BACKTRACK && P.mark[a]) c = 3;\n        else if (P.carver === 3 && a >= P.sy * P.cols + P.run && a \u003c P.sy * P.cols + P.sx) c = 3;\n        rgb[o] = pal[c];\n        rgb[o + 1] = pal[c + 1];\n        rgb[o + 2] = pal[c + 2];\n      }\n      // The cell the carver stands on is white: the backtracker's head even\n      // as it backs up, for the others the cells carved in the last six steps.\n      if (P.carver === BACKTRACK) {\n        if (P.sp > 0 && a === P.stack[P.sp - 1]) mixWhite(rgb, o, 1);\n      } else {\n        const age = P.seqN - P.seq[a];\n        if (age \u003c 6) mixWhite(rgb, o, 1 - age / 6);\n      }\n    } else {\n      const d = P.dist[a];\n      if (d \u003c 0 || d > shown) {\n        rgb[o] = pal[0];\n        rgb[o + 1] = pal[1];\n        rgb[o + 2] = pal[2];\n      } else {\n        const s = Math.min(63, Math.floor((d * 63) / Math.max(1, P.far))) * 3;\n        rgb[o] = P.floodLut[s];\n        rgb[o + 1] = P.floodLut[s + 1];\n        rgb[o + 2] = P.floodLut[s + 2];\n        // The newest layers of the flood are its white front.\n        if (shown - d \u003c 5) mixWhite(rgb, o, 1 - (shown - d) / 5);\n      }\n      if (P.onPath[a] && d \u003c= lit) {\n        rgb[o] = pal[6];\n        rgb[o + 1] = pal[7];\n        rgb[o + 2] = pal[8];\n        if (lit - d \u003c 4) mixWhite(rgb, o, 1 - (lit - d) / 4);\n      } else if (back \u003c 1) {\n        // The rest of the maze steps back while the path is drawn.\n        rgb[o] *= back;\n        rgb[o + 1] *= back;\n        rgb[o + 2] *= back;\n      }\n    }\n    if (P.phase === CRUMBLE) {\n      const f = Math.max(0, Math.min(1, 1 - (P.t - P.thr[a]) / 0.16));\n      rgb[o] *= f;\n      rgb[o + 1] *= f;\n      rgb[o + 2] *= f;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const N = P.N;\n  const rgb = P.rgb;\n  const map = P.map;\n  const carving = !P.solved;\n  const cols = P.cols;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const v = map[y * W + x];\n      if (v \u003c 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      let c = v;\n      if (v >= N) {\n        const e = v - N;\n        const a = e >> 1;\n        if (!(e & 1 ? P.openD[a] : P.openR[a])) {\n          display.setPixel(x, y, 0, 0, 0);\n          continue;\n        }\n        const b = e & 1 ? a + cols : a + 1;\n        // A passage shows whichever of its two cells came later: carved\n        // later while carving, reached later by the flood after.\n        if (carving) c = P.seq[a] > P.seq[b] ? a : b;\n        else c = P.dist[a] > P.dist[b] ? a : b;\n      }\n      display.setPixel(x, y, rgb[c * 3], rgb[c * 3 + 1], rgb[c * 3 + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0..4, Cell=2..4, Carver=0..3","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the flood, which runs from gold at the way in through red to violet at the far ends, and the carver's lit cells with it."},{"name":"Speed","min":0,"max":4,"about":"Carving, flood and trace together, from about 50 carving steps a second to about 1100."},{"name":"Cell","min":2,"max":4,"about":"Corridor width in LEDs: 2 gives a maze of 21 by 42 cells, 4 one of 12 by 25."},{"name":"Carver","min":0,"max":3,"about":"0 recursive backtracker with its stack lit, 1 Prim's with its frontier lit, 2 Kruskal's with each joined patch its own shade, 3 sidewinder row by row."}],"start":[0,2,2,0.06],"measures":{"motion":0.0785,"detail":0.1747,"edges":0.9998,"complexity":0.1404,"coverage":0.6288,"colour":0.2889,"drift":0.1789},"knobResponse":[0.1257,0.2208,0.2744,0.1999]},{"slug":"metro-map","title":"Metro Map","family":"city","round":15,"note":"해리 벡 식 지하철 노선도예요. 색 노선 넷이 45도로 꺾이며 위아래로 달리고, 갈아타는 역은 흰 고리예요. 흰 열차가 역마다 섰다 떠나고 끝에서 되돌아가요. K1 을 누르면 급행이 지나가요.","idea":"A schematic subway map in the Harry Beck manner, drawn for the tall panel, with trains running its lines, stopping at every station and turning back at the ends.","buttons":"K1 tap sends an express down one line, three times the speed of the others, end to end without stopping and lighting the line behind it; each tap takes the next line.","code":"// ===== Patternflow pattern =====\n// Title:   Metro Map\n// Family:  city\n// Idea:    A schematic subway map in the Harry Beck manner, drawn for the tall panel, with trains running its lines, stopping at every station and turning back at the ends.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Harry Beck's 1933 diagram of the London Underground, and the schematic maps drawn after it\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lines=4..7, Rush=0..1\n//\n// Knob 1: Hue. Turns the whole line palette round the colour wheel together; the river stays blue.\n// Knob 2: Speed. How fast the trains run: at 2 they reach 14 LEDs a second between stations and stand 0.7 s at each, at the bottom they creep at 1.4 and stand 7 s, at the top they reach 21.\n// Knob 3: Lines. How many lines are open: four at the bottom (two trunks, the line that shares both their corridors, and the circle), then the cross line through the middle, an upper and a lower one. A line that opens turns the crossings it makes into interchanges.\n// Knob 4: Rush. The service: from three trains on each line, spread evenly round its timetable, to eight; a train that joins fades in at its place and the rest close up over a couple of seconds.\n// Buttons: K1 tap sends an express down one line, three times the speed of the others, end to end without stopping and lighting the line behind it; each tap takes the next line.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXL = 7;\nconst MAXT = 8;\n\n// The network, as corners on the lattice. A line at (x, y) lights the LEDs\n// x..x+1 and y..y+1, so every run is two LEDs wide and a 45 degree run three\n// LEDs to a row. The last point equal to the first makes a loop.\nconst NET = [\n  // West trunk.\n  { hue: 0.0, side: -1, pts: [[8, 3], [8, 28], [20, 40], [20, 98], [10, 108], [10, 123]] },\n  // East trunk.\n  { hue: 0.6, side: 1, pts: [[52, 3], [52, 20], [42, 30], [42, 94], [52, 104], [52, 123]] },\n  // Down the middle: it shares the east trunk's corridor at the top and the\n  // west trunk's at the bottom.\n  { hue: 0.14, side: 1, pts: [[49, 3], [49, 19], [31, 37], [31, 70], [23, 78], [23, 99], [13, 109], [13, 123]] },\n  // The circle.\n  { hue: 0.78, side: 1, pts: [[16, 46], [46, 46], [52, 52], [52, 80], [46, 86], [16, 86], [10, 80], [10, 52], [16, 46]] },\n  // Across the middle.\n  { hue: 0.33, side: 1, pts: [[2, 64], [60, 64]] },\n  // Upper cross line.\n  { hue: 0.5, side: 1, pts: [[2, 14], [24, 14], [30, 8], [60, 8]] },\n  // Lower cross line.\n  { hue: 0.07, side: 1, pts: [[2, 120], [22, 120], [30, 112], [60, 112]] },\n];\n\n// The river, five LEDs wide, under everything.\nconst RIVER = [[-4, 92], [26, 92], [32, 98], [46, 98], [52, 92], [70, 92]];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p;\n  out[o + 1] = k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p;\n  out[o + 2] = k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p;\n}\n\n// Corners to lattice points one step apart, with the distance run so far.\nfunction expand(pts) {\n  const xs = [];\n  const ys = [];\n  const ss = [];\n  let s = 0;\n  for (let i = 0; i \u003c pts.length - 1; i++) {\n    const [x0, y0] = pts[i];\n    const [x1, y1] = pts[i + 1];\n    const sx = Math.sign(x1 - x0);\n    const sy = Math.sign(y1 - y0);\n    const n = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0));\n    const step = sx && sy ? Math.SQRT2 : 1;\n    for (let k = i === 0 ? 0 : 1; k \u003c= n; k++) {\n      if (k > 0) s += step;\n      xs.push(x0 + sx * k);\n      ys.push(y0 + sy * k);\n      ss.push(s);\n    }\n  }\n  return { xs, ys, ss, loop: pts[0][0] === pts[pts.length - 1][0] && pts[0][1] === pts[pts.length - 1][1] };\n}\n\nfunction setLit(mask, x, y, v) {\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) mask[y * W + x] = v;\n}\n\n// Everything that depends on how many lines are open: which LEDs each line\n// lights, where the interchanges are, where each line stops.\nfunction build(P, count) {\n  P.count = count;\n  const owner = P.owner;\n  owner.fill(0);\n  const lines = P.lines;\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const x = L.xs[k];\n      const y = L.ys[k];\n      setLit(owner, x, y, l + 1);\n      setLit(owner, x + 1, y, l + 1);\n      setLit(owner, x, y + 1, l + 1);\n      setLit(owner, x + 1, y + 1, l + 1);\n    }\n  }\n  // Crossings: lattice points two open lines share.\n  const at = new Map();\n  const hits = [];\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const key = L.ys[k] * 100 + L.xs[k];\n      const other = at.get(key);\n      if (other !== undefined && other !== l) hits.push([L.xs[k] + 1, L.ys[k] + 1]);\n      else at.set(key, l);\n    }\n  }\n  // Crossings closer than six LEDs share one interchange, drawn round both.\n  const inter = [];\n  for (const [x, y] of hits) {\n    let joined = false;\n    for (const I of inter) {\n      if (Math.max(Math.abs(I.ax - x), Math.abs(I.ay - y), Math.abs(I.bx - x), Math.abs(I.by - y)) \u003c= 6) {\n        if (x \u003c I.ax || (x === I.ax && y \u003c I.ay)) {\n          I.ax = x;\n          I.ay = y;\n        } else if (x > I.bx || (x === I.bx && y > I.by)) {\n          I.bx = x;\n          I.by = y;\n        }\n        joined = true;\n        break;\n      }\n    }\n    if (!joined) inter.push({ ax: x, ay: y, bx: x, by: y });\n  }\n  P.inter = inter;\n  // Stops: the interchanges a line passes through, its ends, and ordinary\n  // stations between them about every 13 LEDs, kept off the corners.\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    const n = L.xs.length;\n    const anchors = [];\n    for (let i = 0; i \u003c inter.length; i++) {\n      const I = inter[i];\n      let best = -1;\n      let bd = 3;\n      for (let k = 0; k \u003c n; k++) {\n        const d = Math.max(Math.abs(L.xs[k] + 1 - (I.ax + I.bx) / 2), Math.abs(L.ys[k] + 1 - (I.ay + I.by) / 2));\n        if (d \u003c bd) {\n          bd = d;\n          best = k;\n        }\n      }\n      if (best >= 0) anchors.push({ k: best, inter: true, at: i });\n    }\n    if (!L.loop) {\n      anchors.push({ k: 0, inter: false, end: true });\n      anchors.push({ k: n - 1, inter: false, end: true });\n    }\n    anchors.sort((a, b) => a.k - b.k);\n    const stops = [];\n    for (let i = 0; i \u003c anchors.length; i++) {\n      stops.push(anchors[i]);\n      const a = anchors[i];\n      const b = i + 1 \u003c anchors.length ? anchors[i + 1] : L.loop ? { k: anchors[0].k + n - 1 } : null;\n      if (!b) break;\n      const sa = L.ss[a.k];\n      const sb = b.k \u003c n ? L.ss[b.k] : L.ss[n - 1] + L.ss[b.k - (n - 1)];\n      const gap = sb - sa;\n      const m = Math.round(gap / 13) - 1;\n      for (let j = 1; j \u003c= m; j++) {\n        let target = sa + (gap * j) / (m + 1);\n        if (target > L.ss[n - 1]) target -= L.ss[n - 1];\n        let kk = 0;\n        while (kk \u003c n - 1 && L.ss[kk] \u003c target) kk++;\n        // A station sits on a straight run, off the corners: a tick on a\n        // 45 degree run touches its line only at a corner and reads as a\n        // stray LED. Failing that within seven steps, there is no station.\n        let found = -1;\n        for (let d = 0; d \u003c= 7 && found \u003c 0; d++)\n          for (const c of [kk + d, kk - d])\n            if (found \u003c 0 && c > 0 && c \u003c n - 1 && plain(L, c) && Math.abs(L.ss[c] - L.ss[a.k]) > 5 && Math.abs(L.ss[c] - sb) > 5) found = c;\n        if (found >= 0) stops.push({ k: found, inter: false });\n      }\n    }\n    stops.sort((a, b) => a.k - b.k);\n    L.stops = stops.filter((s, i) => i === 0 || s.k !== stops[i - 1].k);\n    timetable(L);\n  }\n  // Station ticks and the bars at the ends, in LEDs, once every line is laid.\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (const st of L.stops) {\n      st.px = [];\n      if (st.inter) continue;\n      if (st.end) {\n        endBar(L, st, owner);\n        continue;\n      }\n      let px = tick(L, st.k, L.side, owner);\n      if (!px) px = tick(L, st.k, -L.side, owner);\n      if (px) st.px = px;\n    }\n  }\n}\n\n// The step a line takes at lattice point k.\nfunction heading(L, k) {\n  const n = L.xs.length;\n  const a = k \u003c n - 1 ? k : k - 1;\n  return [L.xs[a + 1] - L.xs[a], L.ys[a + 1] - L.ys[a]];\n}\n\nfunction free(owner, list) {\n  for (const [x, y] of list) if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || owner[y * W + x]) return false;\n  return true;\n}\n\n// A station tick: two LEDs standing out from the line square to it, on the\n// given side, or null when something else is already there.\nfunction tick(L, k, side, owner) {\n  const [dx, dy] = heading(L, k);\n  const x = L.xs[k];\n  const y = L.ys[k];\n  const nx = -dy * side;\n  const ny = dx * side;\n  let list;\n  if (dx === 0) list = nx > 0 ? [[x + 2, y], [x + 3, y]] : [[x - 1, y], [x - 2, y]];\n  else if (dy === 0) list = ny > 0 ? [[x, y + 2], [x, y + 3]] : [[x, y - 1], [x, y - 2]];\n  else if (dx === dy) list = nx > 0 ? [[x + 2, y - 1], [x + 3, y - 2]] : [[x - 1, y + 2], [x - 2, y + 3]];\n  else list = nx \u003c 0 ? [[x - 1, y - 1], [x - 2, y - 2]] : [[x + 2, y + 2], [x + 3, y + 3]];\n  // Keep a dark LED between the tick and any other line.\n  const halo = list.concat(list.map(([a, b]) => [a + Math.sign(nx), b + Math.sign(ny)]));\n  if (!free(owner, list) || !halo.every(([a, b]) => a \u003c 0 || a >= W || b \u003c 0 || b >= H || !owner[b * W + a] || owner[b * W + a] === owner[L.ys[k] * W + L.xs[k]])) return null;\n  return list.map(([a, b]) => b * W + a);\n}\n\n// The bar across a line's end, six LEDs wide.\nfunction endBar(L, st, owner) {\n  const [dx, dy] = heading(L, st.k);\n  const x = L.xs[st.k];\n  const y = L.ys[st.k];\n  const list = [];\n  for (let i = -2; i \u003c= 3; i++) {\n    if (dx === 0) list.push([x + i, st.k === 0 ? y : y + 1]);\n    else list.push([st.k === 0 ? x : x + 1, y + i]);\n  }\n  st.px = list.filter(([a, b]) => a >= 0 && a \u003c W && b >= 0 && b \u003c H && !owner[b * W + a]).map(([a, b]) => b * W + a);\n}\n\n// A point on a straight up-and-down or level run, two steps from any corner.\nfunction plain(L, k) {\n  const [dx, dy] = heading(L, k);\n  return (dx === 0 || dy === 0) && !isCorner(L, k);\n}\n\nfunction isCorner(L, k) {\n  const n = L.xs.length;\n  if (k \u003c= 0 || k >= n - 1) return false;\n  const ax = L.xs[k] - L.xs[k - 1];\n  const ay = L.ys[k] - L.ys[k - 1];\n  const bx = L.xs[k + 1] - L.xs[k];\n  const by = L.ys[k + 1] - L.ys[k];\n  if (ax !== bx || ay !== by) return true;\n  if (k >= 2 && (L.xs[k - 1] - L.xs[k - 2] !== ax || L.ys[k - 1] - L.ys[k - 2] !== ay)) return true;\n  if (k \u003c= n - 3 && (L.xs[k + 2] - L.xs[k + 1] !== bx || L.ys[k + 2] - L.ys[k + 1] !== by)) return true;\n  return false;\n}\n\n// Trains between two stops a distance d apart: they pull away at ACC LEDs a\n// second squared up to TOP LEDs a second and brake the same way, all in the\n// line's own clock, which Speed winds.\nconst ACC = 5;\nconst TOP = 7;\nconst DWELL = 1.4;\nconst TURN = 3;\n\nfunction runTime(d) {\n  const ramp = TOP / ACC;\n  if (d >= TOP * ramp) return d / TOP + ramp;\n  return 2 * Math.sqrt(d / ACC);\n}\n\nfunction runPos(d, t) {\n  const ramp = TOP / ACC;\n  if (d >= TOP * ramp) {\n    const T = d / TOP + ramp;\n    if (t \u003c ramp) return 0.5 * ACC * t * t;\n    if (t > T - ramp) {\n      const u = T - t;\n      return d - 0.5 * ACC * u * u;\n    }\n    return 0.5 * ACC * ramp * ramp + TOP * (t - ramp);\n  }\n  const T = 2 * Math.sqrt(d / ACC);\n  if (t \u003c T / 2) return 0.5 * ACC * t * t;\n  const u = T - t;\n  return d - 0.5 * ACC * u * u;\n}\n\n// A line's timetable: a list of legs, each a dwell at a stop or a run to the\n// next, covering one round trip (or one lap of a loop).\nfunction timetable(L) {\n  const legs = [];\n  const total = L.ss[L.xs.length - 1];\n  const s = L.stops.map((st) => L.ss[st.k]);\n  let t = 0;\n  const push = (kind, from, to, dur, stop) => {\n    legs.push({ kind, from, to, t0: t, dur, stop });\n    t += dur;\n  };\n  if (L.loop) {\n    for (let i = 0; i \u003c s.length; i++) {\n      const a = s[i];\n      const b = i + 1 \u003c s.length ? s[i + 1] : s[0] + total;\n      push(\"dwell\", a, a, DWELL, i);\n      push(\"run\", a, b, runTime(b - a));\n    }\n  } else {\n    for (let i = 0; i \u003c s.length - 1; i++) {\n      push(\"dwell\", s[i], s[i], i === 0 ? TURN : DWELL, i);\n      push(\"run\", s[i], s[i + 1], runTime(s[i + 1] - s[i]));\n    }\n    for (let i = s.length - 1; i > 0; i--) {\n      push(\"dwell\", s[i], s[i], i === s.length - 1 ? TURN : DWELL, i);\n      push(\"run\", s[i], s[i - 1], runTime(s[i] - s[i - 1]));\n    }\n  }\n  L.legs = legs;\n  L.period = t;\n  L.total = total;\n}\n\n// Where a train is at time t into its line's cycle: distance along the line,\n// and whether it stands at a stop.\nfunction trainAt(L, t, out) {\n  t = ((t % L.period) + L.period) % L.period;\n  const legs = L.legs;\n  let lo = 0;\n  let hi = legs.length - 1;\n  while (lo \u003c hi) {\n    const mid = (lo + hi + 1) >> 1;\n    if (legs[mid].t0 \u003c= t) lo = mid;\n    else hi = mid - 1;\n  }\n  const g = legs[lo];\n  if (g.kind === \"dwell\") {\n    out.s = g.from;\n    out.dir = 0;\n    out.stop = g.stop;\n  } else {\n    const d = Math.abs(g.to - g.from);\n    const p = runPos(d, t - g.t0);\n    out.s = g.to > g.from ? g.from + p : g.from - p;\n    out.dir = g.to > g.from ? 1 : -1;\n    out.stop = -1;\n  }\n  if (L.loop && out.s >= L.total) out.s -= L.total;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.lines = NET.map((L) => {\n    const e = expand(L.pts);\n    return { hue: L.hue, side: L.side, xs: e.xs, ys: e.ys, ss: e.ss, loop: e.loop };\n  });\n  P.owner = new Uint8Array(N);\n  P.river = new Uint8Array(N);\n  const r = expand(RIVER);\n  for (let k = 0; k \u003c r.xs.length; k++)\n    for (let dy = -2; dy \u003c= 2; dy++) for (let dx = -2; dx \u003c= 2; dx++) setLit(P.river, r.xs[k] + dx, r.ys[k] + dy, 1);\n  P.train = new Float32Array(N);\n  P.mark = new Uint8Array(N);\n  P.glow = new Float32Array(N);\n  P.col = new Float32Array(MAXL * 3);\n  P.clock = 0;\n  P.count = 0;\n  // Each line's trains: where each stands in the timetable, as a share of\n  // the line's cycle, and how far it has faded in.\n  P.off = new Float32Array(MAXL * MAXT);\n  P.vis = new Float32Array(MAXL * MAXT);\n  for (let l = 0; l \u003c MAXL; l++)\n    for (let i = 0; i \u003c 3; i++) {\n      P.off[l * MAXT + i] = i / 3;\n      P.vis[l * MAXT + i] = 1;\n    }\n  P.hue = 0;\n  P.express = null;\n  P.pick = 0;\n  P.where = { s: 0, dir: 0, stop: -1 };\n  build(P, 4);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const count = Math.max(4, Math.min(MAXL, Math.round(k[2])));\n  if (count !== P.count) build(P, count);\n  // Rush: three to eight trains a line. A train that joins fades in at its\n  // place in the timetable, one that leaves fades out, and the others close\n  // up over a couple of seconds instead of jumping.\n  const n = Math.round(3 + Math.max(0, Math.min(1, k[3])) * 5);\n  for (let l = 0; l \u003c MAXL; l++)\n    for (let i = 0; i \u003c MAXT; i++) {\n      const j = l * MAXT + i;\n      const target = i \u003c n ? i / n : P.off[j];\n      if (P.vis[j] \u003c= 0) P.off[j] = target;\n      else P.off[j] += (target - P.off[j]) * Math.min(1, dt * 1.2);\n      P.vis[j] = Math.max(0, Math.min(1, P.vis[j] + (i \u003c n ? dt : -dt) * 3));\n    }\n  P.clock += dt * Math.max(0.05, k[1]);\n  if (input.btnPressed && input.btnPressed[0]) {\n    let l = P.pick++ % P.count;\n    if (P.lines[l].loop) l = (l + 1) % P.count;\n    P.express = { line: l, s: 0, dir: P.pick % 2 ? 1 : -1 };\n    if (P.express.dir \u003c 0) P.express.s = P.lines[l].total;\n  }\n  if (P.express) {\n    const E = P.express;\n    E.s += E.dir * dt * Math.max(0.05, k[1]) * TOP * 3.2;\n    if (E.s \u003c -40 || E.s > P.lines[E.line].total + 40) P.express = null;\n  }\n}\n\n// Light a train from distance a to b along a line: each lattice point takes\n// how much of it lies inside, so a train glides from LED to LED.\nfunction paintTrain(P, L, a, b, w) {\n  const tr = P.train;\n  const n = L.xs.length;\n  for (let k = 0; k \u003c n; k++) {\n    const s = L.ss[k];\n    if (s \u003c a - 1 || s > b + 1) continue;\n    const c = Math.max(0, Math.min(1, s - a + 0.5)) * Math.max(0, Math.min(1, b - s + 0.5)) * w;\n    if (c \u003c= 0) continue;\n    const x = L.xs[k];\n    const y = L.ys[k];\n    // A train is four LEDs wide, a lit carriage standing proud of its\n    // two-LED line, a little dimmer at its sides.\n    for (let j = 0; j \u003c 16; j++) {\n      const ox = (j & 3) - 1;\n      const oy = (j >> 2) - 1;\n      const xx = x + ox;\n      const yy = y + oy;\n      if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n      const v = ox \u003c 0 || ox > 1 || oy \u003c 0 || oy > 1 ? c * 0.7 : c;\n      const p = yy * W + xx;\n      if (tr[p] \u003c v) tr[p] = v;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const col = P.col;\n  for (let l = 0; l \u003c MAXL; l++) hsvInto(col, l * 3, P.lines[l].hue + P.hue + 0.02, 0.92, 1);\n  const tr = P.train;\n  tr.fill(0);\n  const where = P.where;\n  const TL = 6;\n  for (let l = 0; l \u003c P.count; l++) {\n    const L = P.lines[l];\n    for (const st of L.stops) st.lit = 0;\n    if (l === 0) for (const I of P.inter) I.lit = 0;\n    for (let i = 0; i \u003c MAXT; i++) {\n      const vis = P.vis[l * MAXT + i];\n      if (vis \u003c= 0) continue;\n      trainAt(L, P.clock + (P.off[l * MAXT + i] + l * 0.41) * L.period, where);\n      if (where.stop >= 0 && vis > 0.5) {\n        const st = L.stops[where.stop];\n        st.lit = 1;\n        if (st.inter) P.inter[st.at].lit = 1;\n      }\n      paintTrain(P, L, where.s - TL / 2, where.s + TL / 2, vis);\n      if (L.loop && where.s + TL / 2 > L.total) paintTrain(P, L, where.s - TL / 2 - L.total, where.s + TL / 2 - L.total, vis);\n    }\n  }\n  if (P.express) {\n    const E = P.express;\n    const L = P.lines[E.line];\n    paintTrain(P, L, E.s - 9 * (E.dir > 0 ? 1 : 0), E.s + 9 * (E.dir > 0 ? 0 : 1), 1);\n    // Behind it the line stays lit for 30 LEDs, fading as it goes.\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const back = (E.s - L.ss[k]) * E.dir - 9;\n      if (back \u003c 0 || back > 30) continue;\n      const v = 0.8 * (1 - back / 30) ** 2;\n      for (let j = 0; j \u003c 4; j++) {\n        const xx = L.xs[k] + (j & 1);\n        const yy = L.ys[k] + (j >> 1);\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const p = yy * W + xx;\n        if (tr[p] \u003c v) tr[p] = v;\n      }\n    }\n  }\n\n  // Ticks and end bars take their line's colour, and light up while a train\n  // stands at their station.\n  const mark = P.mark;\n  const glow = P.glow;\n  mark.fill(0);\n  for (let l = 0; l \u003c P.count; l++)\n    for (const st of P.lines[l].stops)\n      for (const p of st.px) {\n        mark[p] = l + 1;\n        glow[p] = st.lit || 0;\n      }\n  const owner = P.owner;\n  const river = P.river;\n  const LINE = 0.75;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = owner[p];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (o) {\n        const c = (o - 1) * 3;\n        r = col[c] * LINE;\n        g = col[c + 1] * LINE;\n        b = col[c + 2] * LINE;\n      } else if (mark[p]) {\n        const c = (mark[p] - 1) * 3;\n        const t = glow[p];\n        r = col[c] * LINE * (1 - t) + t;\n        g = col[c + 1] * LINE * (1 - t) + t;\n        b = col[c + 2] * LINE * (1 - t) + t;\n      } else if (river[p]) {\n        r = 0.03;\n        g = 0.11;\n        b = 0.3;\n      }\n      const t = tr[p];\n      if (t > 0) {\n        r += (1 - r) * t;\n        g += (1 - g) * t;\n        b += (1 - b) * t;\n      }\n      display.setPixel(x, y, r * 255, g * 255, b * 255);\n    }\n  }\n\n  // Interchanges: a white ring round each crossing, or round a pair of\n  // crossings close together, dark inside until a train stands there.\n  for (const I of P.inter) {\n    const inside = I.lit ? 255 : 0;\n    const x0 = Math.floor(Math.min(I.ax, I.bx) - 4);\n    const x1 = Math.ceil(Math.max(I.ax, I.bx) + 4);\n    const y0 = Math.floor(Math.min(I.ay, I.by) - 4);\n    const y1 = Math.ceil(Math.max(I.ay, I.by) + 4);\n    const dx = I.bx - I.ax;\n    const dy = I.by - I.ay;\n    const len2 = dx * dx + dy * dy;\n    for (let y = y0; y \u003c= y1; y++) {\n      for (let x = x0; x \u003c= x1; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const px = x + 0.5 - I.ax;\n        const py = y + 0.5 - I.ay;\n        const t = len2 > 0 ? Math.max(0, Math.min(1, (px * dx + py * dy) / len2)) : 0;\n        const d = Math.hypot(px - t * dx, py - t * dy);\n        if (d \u003c 1.9) display.setPixel(x, y, inside, inside, inside);\n        else if (d \u003c 3.0) display.setPixel(x, y, 235, 235, 235);\n      }\n    }\n  }\n}\n","layer":{"id":"layer-metro-map","type":"code","name":"metro-map","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Metro Map\n// Family:  city\n// Idea:    A schematic subway map in the Harry Beck manner, drawn for the tall panel, with trains running its lines, stopping at every station and turning back at the ends.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Harry Beck's 1933 diagram of the London Underground, and the schematic maps drawn after it\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lines=4..7, Rush=0..1\n//\n// Knob 1: Hue. Turns the whole line palette round the colour wheel together; the river stays blue.\n// Knob 2: Speed. How fast the trains run: at 2 they reach 14 LEDs a second between stations and stand 0.7 s at each, at the bottom they creep at 1.4 and stand 7 s, at the top they reach 21.\n// Knob 3: Lines. How many lines are open: four at the bottom (two trunks, the line that shares both their corridors, and the circle), then the cross line through the middle, an upper and a lower one. A line that opens turns the crossings it makes into interchanges.\n// Knob 4: Rush. The service: from three trains on each line, spread evenly round its timetable, to eight; a train that joins fades in at its place and the rest close up over a couple of seconds.\n// Buttons: K1 tap sends an express down one line, three times the speed of the others, end to end without stopping and lighting the line behind it; each tap takes the next line.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXL = 7;\nconst MAXT = 8;\n\n// The network, as corners on the lattice. A line at (x, y) lights the LEDs\n// x..x+1 and y..y+1, so every run is two LEDs wide and a 45 degree run three\n// LEDs to a row. The last point equal to the first makes a loop.\nconst NET = [\n  // West trunk.\n  { hue: 0.0, side: -1, pts: [[8, 3], [8, 28], [20, 40], [20, 98], [10, 108], [10, 123]] },\n  // East trunk.\n  { hue: 0.6, side: 1, pts: [[52, 3], [52, 20], [42, 30], [42, 94], [52, 104], [52, 123]] },\n  // Down the middle: it shares the east trunk's corridor at the top and the\n  // west trunk's at the bottom.\n  { hue: 0.14, side: 1, pts: [[49, 3], [49, 19], [31, 37], [31, 70], [23, 78], [23, 99], [13, 109], [13, 123]] },\n  // The circle.\n  { hue: 0.78, side: 1, pts: [[16, 46], [46, 46], [52, 52], [52, 80], [46, 86], [16, 86], [10, 80], [10, 52], [16, 46]] },\n  // Across the middle.\n  { hue: 0.33, side: 1, pts: [[2, 64], [60, 64]] },\n  // Upper cross line.\n  { hue: 0.5, side: 1, pts: [[2, 14], [24, 14], [30, 8], [60, 8]] },\n  // Lower cross line.\n  { hue: 0.07, side: 1, pts: [[2, 120], [22, 120], [30, 112], [60, 112]] },\n];\n\n// The river, five LEDs wide, under everything.\nconst RIVER = [[-4, 92], [26, 92], [32, 98], [46, 98], [52, 92], [70, 92]];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p;\n  out[o + 1] = k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p;\n  out[o + 2] = k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p;\n}\n\n// Corners to lattice points one step apart, with the distance run so far.\nfunction expand(pts) {\n  const xs = [];\n  const ys = [];\n  const ss = [];\n  let s = 0;\n  for (let i = 0; i \u003c pts.length - 1; i++) {\n    const [x0, y0] = pts[i];\n    const [x1, y1] = pts[i + 1];\n    const sx = Math.sign(x1 - x0);\n    const sy = Math.sign(y1 - y0);\n    const n = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0));\n    const step = sx && sy ? Math.SQRT2 : 1;\n    for (let k = i === 0 ? 0 : 1; k \u003c= n; k++) {\n      if (k > 0) s += step;\n      xs.push(x0 + sx * k);\n      ys.push(y0 + sy * k);\n      ss.push(s);\n    }\n  }\n  return { xs, ys, ss, loop: pts[0][0] === pts[pts.length - 1][0] && pts[0][1] === pts[pts.length - 1][1] };\n}\n\nfunction setLit(mask, x, y, v) {\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) mask[y * W + x] = v;\n}\n\n// Everything that depends on how many lines are open: which LEDs each line\n// lights, where the interchanges are, where each line stops.\nfunction build(P, count) {\n  P.count = count;\n  const owner = P.owner;\n  owner.fill(0);\n  const lines = P.lines;\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const x = L.xs[k];\n      const y = L.ys[k];\n      setLit(owner, x, y, l + 1);\n      setLit(owner, x + 1, y, l + 1);\n      setLit(owner, x, y + 1, l + 1);\n      setLit(owner, x + 1, y + 1, l + 1);\n    }\n  }\n  // Crossings: lattice points two open lines share.\n  const at = new Map();\n  const hits = [];\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const key = L.ys[k] * 100 + L.xs[k];\n      const other = at.get(key);\n      if (other !== undefined && other !== l) hits.push([L.xs[k] + 1, L.ys[k] + 1]);\n      else at.set(key, l);\n    }\n  }\n  // Crossings closer than six LEDs share one interchange, drawn round both.\n  const inter = [];\n  for (const [x, y] of hits) {\n    let joined = false;\n    for (const I of inter) {\n      if (Math.max(Math.abs(I.ax - x), Math.abs(I.ay - y), Math.abs(I.bx - x), Math.abs(I.by - y)) \u003c= 6) {\n        if (x \u003c I.ax || (x === I.ax && y \u003c I.ay)) {\n          I.ax = x;\n          I.ay = y;\n        } else if (x > I.bx || (x === I.bx && y > I.by)) {\n          I.bx = x;\n          I.by = y;\n        }\n        joined = true;\n        break;\n      }\n    }\n    if (!joined) inter.push({ ax: x, ay: y, bx: x, by: y });\n  }\n  P.inter = inter;\n  // Stops: the interchanges a line passes through, its ends, and ordinary\n  // stations between them about every 13 LEDs, kept off the corners.\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    const n = L.xs.length;\n    const anchors = [];\n    for (let i = 0; i \u003c inter.length; i++) {\n      const I = inter[i];\n      let best = -1;\n      let bd = 3;\n      for (let k = 0; k \u003c n; k++) {\n        const d = Math.max(Math.abs(L.xs[k] + 1 - (I.ax + I.bx) / 2), Math.abs(L.ys[k] + 1 - (I.ay + I.by) / 2));\n        if (d \u003c bd) {\n          bd = d;\n          best = k;\n        }\n      }\n      if (best >= 0) anchors.push({ k: best, inter: true, at: i });\n    }\n    if (!L.loop) {\n      anchors.push({ k: 0, inter: false, end: true });\n      anchors.push({ k: n - 1, inter: false, end: true });\n    }\n    anchors.sort((a, b) => a.k - b.k);\n    const stops = [];\n    for (let i = 0; i \u003c anchors.length; i++) {\n      stops.push(anchors[i]);\n      const a = anchors[i];\n      const b = i + 1 \u003c anchors.length ? anchors[i + 1] : L.loop ? { k: anchors[0].k + n - 1 } : null;\n      if (!b) break;\n      const sa = L.ss[a.k];\n      const sb = b.k \u003c n ? L.ss[b.k] : L.ss[n - 1] + L.ss[b.k - (n - 1)];\n      const gap = sb - sa;\n      const m = Math.round(gap / 13) - 1;\n      for (let j = 1; j \u003c= m; j++) {\n        let target = sa + (gap * j) / (m + 1);\n        if (target > L.ss[n - 1]) target -= L.ss[n - 1];\n        let kk = 0;\n        while (kk \u003c n - 1 && L.ss[kk] \u003c target) kk++;\n        // A station sits on a straight run, off the corners: a tick on a\n        // 45 degree run touches its line only at a corner and reads as a\n        // stray LED. Failing that within seven steps, there is no station.\n        let found = -1;\n        for (let d = 0; d \u003c= 7 && found \u003c 0; d++)\n          for (const c of [kk + d, kk - d])\n            if (found \u003c 0 && c > 0 && c \u003c n - 1 && plain(L, c) && Math.abs(L.ss[c] - L.ss[a.k]) > 5 && Math.abs(L.ss[c] - sb) > 5) found = c;\n        if (found >= 0) stops.push({ k: found, inter: false });\n      }\n    }\n    stops.sort((a, b) => a.k - b.k);\n    L.stops = stops.filter((s, i) => i === 0 || s.k !== stops[i - 1].k);\n    timetable(L);\n  }\n  // Station ticks and the bars at the ends, in LEDs, once every line is laid.\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (const st of L.stops) {\n      st.px = [];\n      if (st.inter) continue;\n      if (st.end) {\n        endBar(L, st, owner);\n        continue;\n      }\n      let px = tick(L, st.k, L.side, owner);\n      if (!px) px = tick(L, st.k, -L.side, owner);\n      if (px) st.px = px;\n    }\n  }\n}\n\n// The step a line takes at lattice point k.\nfunction heading(L, k) {\n  const n = L.xs.length;\n  const a = k \u003c n - 1 ? k : k - 1;\n  return [L.xs[a + 1] - L.xs[a], L.ys[a + 1] - L.ys[a]];\n}\n\nfunction free(owner, list) {\n  for (const [x, y] of list) if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || owner[y * W + x]) return false;\n  return true;\n}\n\n// A station tick: two LEDs standing out from the line square to it, on the\n// given side, or null when something else is already there.\nfunction tick(L, k, side, owner) {\n  const [dx, dy] = heading(L, k);\n  const x = L.xs[k];\n  const y = L.ys[k];\n  const nx = -dy * side;\n  const ny = dx * side;\n  let list;\n  if (dx === 0) list = nx > 0 ? [[x + 2, y], [x + 3, y]] : [[x - 1, y], [x - 2, y]];\n  else if (dy === 0) list = ny > 0 ? [[x, y + 2], [x, y + 3]] : [[x, y - 1], [x, y - 2]];\n  else if (dx === dy) list = nx > 0 ? [[x + 2, y - 1], [x + 3, y - 2]] : [[x - 1, y + 2], [x - 2, y + 3]];\n  else list = nx \u003c 0 ? [[x - 1, y - 1], [x - 2, y - 2]] : [[x + 2, y + 2], [x + 3, y + 3]];\n  // Keep a dark LED between the tick and any other line.\n  const halo = list.concat(list.map(([a, b]) => [a + Math.sign(nx), b + Math.sign(ny)]));\n  if (!free(owner, list) || !halo.every(([a, b]) => a \u003c 0 || a >= W || b \u003c 0 || b >= H || !owner[b * W + a] || owner[b * W + a] === owner[L.ys[k] * W + L.xs[k]])) return null;\n  return list.map(([a, b]) => b * W + a);\n}\n\n// The bar across a line's end, six LEDs wide.\nfunction endBar(L, st, owner) {\n  const [dx, dy] = heading(L, st.k);\n  const x = L.xs[st.k];\n  const y = L.ys[st.k];\n  const list = [];\n  for (let i = -2; i \u003c= 3; i++) {\n    if (dx === 0) list.push([x + i, st.k === 0 ? y : y + 1]);\n    else list.push([st.k === 0 ? x : x + 1, y + i]);\n  }\n  st.px = list.filter(([a, b]) => a >= 0 && a \u003c W && b >= 0 && b \u003c H && !owner[b * W + a]).map(([a, b]) => b * W + a);\n}\n\n// A point on a straight up-and-down or level run, two steps from any corner.\nfunction plain(L, k) {\n  const [dx, dy] = heading(L, k);\n  return (dx === 0 || dy === 0) && !isCorner(L, k);\n}\n\nfunction isCorner(L, k) {\n  const n = L.xs.length;\n  if (k \u003c= 0 || k >= n - 1) return false;\n  const ax = L.xs[k] - L.xs[k - 1];\n  const ay = L.ys[k] - L.ys[k - 1];\n  const bx = L.xs[k + 1] - L.xs[k];\n  const by = L.ys[k + 1] - L.ys[k];\n  if (ax !== bx || ay !== by) return true;\n  if (k >= 2 && (L.xs[k - 1] - L.xs[k - 2] !== ax || L.ys[k - 1] - L.ys[k - 2] !== ay)) return true;\n  if (k \u003c= n - 3 && (L.xs[k + 2] - L.xs[k + 1] !== bx || L.ys[k + 2] - L.ys[k + 1] !== by)) return true;\n  return false;\n}\n\n// Trains between two stops a distance d apart: they pull away at ACC LEDs a\n// second squared up to TOP LEDs a second and brake the same way, all in the\n// line's own clock, which Speed winds.\nconst ACC = 5;\nconst TOP = 7;\nconst DWELL = 1.4;\nconst TURN = 3;\n\nfunction runTime(d) {\n  const ramp = TOP / ACC;\n  if (d >= TOP * ramp) return d / TOP + ramp;\n  return 2 * Math.sqrt(d / ACC);\n}\n\nfunction runPos(d, t) {\n  const ramp = TOP / ACC;\n  if (d >= TOP * ramp) {\n    const T = d / TOP + ramp;\n    if (t \u003c ramp) return 0.5 * ACC * t * t;\n    if (t > T - ramp) {\n      const u = T - t;\n      return d - 0.5 * ACC * u * u;\n    }\n    return 0.5 * ACC * ramp * ramp + TOP * (t - ramp);\n  }\n  const T = 2 * Math.sqrt(d / ACC);\n  if (t \u003c T / 2) return 0.5 * ACC * t * t;\n  const u = T - t;\n  return d - 0.5 * ACC * u * u;\n}\n\n// A line's timetable: a list of legs, each a dwell at a stop or a run to the\n// next, covering one round trip (or one lap of a loop).\nfunction timetable(L) {\n  const legs = [];\n  const total = L.ss[L.xs.length - 1];\n  const s = L.stops.map((st) => L.ss[st.k]);\n  let t = 0;\n  const push = (kind, from, to, dur, stop) => {\n    legs.push({ kind, from, to, t0: t, dur, stop });\n    t += dur;\n  };\n  if (L.loop) {\n    for (let i = 0; i \u003c s.length; i++) {\n      const a = s[i];\n      const b = i + 1 \u003c s.length ? s[i + 1] : s[0] + total;\n      push(\"dwell\", a, a, DWELL, i);\n      push(\"run\", a, b, runTime(b - a));\n    }\n  } else {\n    for (let i = 0; i \u003c s.length - 1; i++) {\n      push(\"dwell\", s[i], s[i], i === 0 ? TURN : DWELL, i);\n      push(\"run\", s[i], s[i + 1], runTime(s[i + 1] - s[i]));\n    }\n    for (let i = s.length - 1; i > 0; i--) {\n      push(\"dwell\", s[i], s[i], i === s.length - 1 ? TURN : DWELL, i);\n      push(\"run\", s[i], s[i - 1], runTime(s[i] - s[i - 1]));\n    }\n  }\n  L.legs = legs;\n  L.period = t;\n  L.total = total;\n}\n\n// Where a train is at time t into its line's cycle: distance along the line,\n// and whether it stands at a stop.\nfunction trainAt(L, t, out) {\n  t = ((t % L.period) + L.period) % L.period;\n  const legs = L.legs;\n  let lo = 0;\n  let hi = legs.length - 1;\n  while (lo \u003c hi) {\n    const mid = (lo + hi + 1) >> 1;\n    if (legs[mid].t0 \u003c= t) lo = mid;\n    else hi = mid - 1;\n  }\n  const g = legs[lo];\n  if (g.kind === \"dwell\") {\n    out.s = g.from;\n    out.dir = 0;\n    out.stop = g.stop;\n  } else {\n    const d = Math.abs(g.to - g.from);\n    const p = runPos(d, t - g.t0);\n    out.s = g.to > g.from ? g.from + p : g.from - p;\n    out.dir = g.to > g.from ? 1 : -1;\n    out.stop = -1;\n  }\n  if (L.loop && out.s >= L.total) out.s -= L.total;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.lines = NET.map((L) => {\n    const e = expand(L.pts);\n    return { hue: L.hue, side: L.side, xs: e.xs, ys: e.ys, ss: e.ss, loop: e.loop };\n  });\n  P.owner = new Uint8Array(N);\n  P.river = new Uint8Array(N);\n  const r = expand(RIVER);\n  for (let k = 0; k \u003c r.xs.length; k++)\n    for (let dy = -2; dy \u003c= 2; dy++) for (let dx = -2; dx \u003c= 2; dx++) setLit(P.river, r.xs[k] + dx, r.ys[k] + dy, 1);\n  P.train = new Float32Array(N);\n  P.mark = new Uint8Array(N);\n  P.glow = new Float32Array(N);\n  P.col = new Float32Array(MAXL * 3);\n  P.clock = 0;\n  P.count = 0;\n  // Each line's trains: where each stands in the timetable, as a share of\n  // the line's cycle, and how far it has faded in.\n  P.off = new Float32Array(MAXL * MAXT);\n  P.vis = new Float32Array(MAXL * MAXT);\n  for (let l = 0; l \u003c MAXL; l++)\n    for (let i = 0; i \u003c 3; i++) {\n      P.off[l * MAXT + i] = i / 3;\n      P.vis[l * MAXT + i] = 1;\n    }\n  P.hue = 0;\n  P.express = null;\n  P.pick = 0;\n  P.where = { s: 0, dir: 0, stop: -1 };\n  build(P, 4);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const count = Math.max(4, Math.min(MAXL, Math.round(k[2])));\n  if (count !== P.count) build(P, count);\n  // Rush: three to eight trains a line. A train that joins fades in at its\n  // place in the timetable, one that leaves fades out, and the others close\n  // up over a couple of seconds instead of jumping.\n  const n = Math.round(3 + Math.max(0, Math.min(1, k[3])) * 5);\n  for (let l = 0; l \u003c MAXL; l++)\n    for (let i = 0; i \u003c MAXT; i++) {\n      const j = l * MAXT + i;\n      const target = i \u003c n ? i / n : P.off[j];\n      if (P.vis[j] \u003c= 0) P.off[j] = target;\n      else P.off[j] += (target - P.off[j]) * Math.min(1, dt * 1.2);\n      P.vis[j] = Math.max(0, Math.min(1, P.vis[j] + (i \u003c n ? dt : -dt) * 3));\n    }\n  P.clock += dt * Math.max(0.05, k[1]);\n  if (input.btnPressed && input.btnPressed[0]) {\n    let l = P.pick++ % P.count;\n    if (P.lines[l].loop) l = (l + 1) % P.count;\n    P.express = { line: l, s: 0, dir: P.pick % 2 ? 1 : -1 };\n    if (P.express.dir \u003c 0) P.express.s = P.lines[l].total;\n  }\n  if (P.express) {\n    const E = P.express;\n    E.s += E.dir * dt * Math.max(0.05, k[1]) * TOP * 3.2;\n    if (E.s \u003c -40 || E.s > P.lines[E.line].total + 40) P.express = null;\n  }\n}\n\n// Light a train from distance a to b along a line: each lattice point takes\n// how much of it lies inside, so a train glides from LED to LED.\nfunction paintTrain(P, L, a, b, w) {\n  const tr = P.train;\n  const n = L.xs.length;\n  for (let k = 0; k \u003c n; k++) {\n    const s = L.ss[k];\n    if (s \u003c a - 1 || s > b + 1) continue;\n    const c = Math.max(0, Math.min(1, s - a + 0.5)) * Math.max(0, Math.min(1, b - s + 0.5)) * w;\n    if (c \u003c= 0) continue;\n    const x = L.xs[k];\n    const y = L.ys[k];\n    // A train is four LEDs wide, a lit carriage standing proud of its\n    // two-LED line, a little dimmer at its sides.\n    for (let j = 0; j \u003c 16; j++) {\n      const ox = (j & 3) - 1;\n      const oy = (j >> 2) - 1;\n      const xx = x + ox;\n      const yy = y + oy;\n      if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n      const v = ox \u003c 0 || ox > 1 || oy \u003c 0 || oy > 1 ? c * 0.7 : c;\n      const p = yy * W + xx;\n      if (tr[p] \u003c v) tr[p] = v;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const col = P.col;\n  for (let l = 0; l \u003c MAXL; l++) hsvInto(col, l * 3, P.lines[l].hue + P.hue + 0.02, 0.92, 1);\n  const tr = P.train;\n  tr.fill(0);\n  const where = P.where;\n  const TL = 6;\n  for (let l = 0; l \u003c P.count; l++) {\n    const L = P.lines[l];\n    for (const st of L.stops) st.lit = 0;\n    if (l === 0) for (const I of P.inter) I.lit = 0;\n    for (let i = 0; i \u003c MAXT; i++) {\n      const vis = P.vis[l * MAXT + i];\n      if (vis \u003c= 0) continue;\n      trainAt(L, P.clock + (P.off[l * MAXT + i] + l * 0.41) * L.period, where);\n      if (where.stop >= 0 && vis > 0.5) {\n        const st = L.stops[where.stop];\n        st.lit = 1;\n        if (st.inter) P.inter[st.at].lit = 1;\n      }\n      paintTrain(P, L, where.s - TL / 2, where.s + TL / 2, vis);\n      if (L.loop && where.s + TL / 2 > L.total) paintTrain(P, L, where.s - TL / 2 - L.total, where.s + TL / 2 - L.total, vis);\n    }\n  }\n  if (P.express) {\n    const E = P.express;\n    const L = P.lines[E.line];\n    paintTrain(P, L, E.s - 9 * (E.dir > 0 ? 1 : 0), E.s + 9 * (E.dir > 0 ? 0 : 1), 1);\n    // Behind it the line stays lit for 30 LEDs, fading as it goes.\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const back = (E.s - L.ss[k]) * E.dir - 9;\n      if (back \u003c 0 || back > 30) continue;\n      const v = 0.8 * (1 - back / 30) ** 2;\n      for (let j = 0; j \u003c 4; j++) {\n        const xx = L.xs[k] + (j & 1);\n        const yy = L.ys[k] + (j >> 1);\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const p = yy * W + xx;\n        if (tr[p] \u003c v) tr[p] = v;\n      }\n    }\n  }\n\n  // Ticks and end bars take their line's colour, and light up while a train\n  // stands at their station.\n  const mark = P.mark;\n  const glow = P.glow;\n  mark.fill(0);\n  for (let l = 0; l \u003c P.count; l++)\n    for (const st of P.lines[l].stops)\n      for (const p of st.px) {\n        mark[p] = l + 1;\n        glow[p] = st.lit || 0;\n      }\n  const owner = P.owner;\n  const river = P.river;\n  const LINE = 0.75;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = owner[p];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (o) {\n        const c = (o - 1) * 3;\n        r = col[c] * LINE;\n        g = col[c + 1] * LINE;\n        b = col[c + 2] * LINE;\n      } else if (mark[p]) {\n        const c = (mark[p] - 1) * 3;\n        const t = glow[p];\n        r = col[c] * LINE * (1 - t) + t;\n        g = col[c + 1] * LINE * (1 - t) + t;\n        b = col[c + 2] * LINE * (1 - t) + t;\n      } else if (river[p]) {\n        r = 0.03;\n        g = 0.11;\n        b = 0.3;\n      }\n      const t = tr[p];\n      if (t > 0) {\n        r += (1 - r) * t;\n        g += (1 - g) * t;\n        b += (1 - b) * t;\n      }\n      display.setPixel(x, y, r * 255, g * 255, b * 255);\n    }\n  }\n\n  // Interchanges: a white ring round each crossing, or round a pair of\n  // crossings close together, dark inside until a train stands there.\n  for (const I of P.inter) {\n    const inside = I.lit ? 255 : 0;\n    const x0 = Math.floor(Math.min(I.ax, I.bx) - 4);\n    const x1 = Math.ceil(Math.max(I.ax, I.bx) + 4);\n    const y0 = Math.floor(Math.min(I.ay, I.by) - 4);\n    const y1 = Math.ceil(Math.max(I.ay, I.by) + 4);\n    const dx = I.bx - I.ax;\n    const dy = I.by - I.ay;\n    const len2 = dx * dx + dy * dy;\n    for (let y = y0; y \u003c= y1; y++) {\n      for (let x = x0; x \u003c= x1; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const px = x + 0.5 - I.ax;\n        const py = y + 0.5 - I.ay;\n        const t = len2 > 0 ? Math.max(0, Math.min(1, (px * dx + py * dy) / len2)) : 0;\n        const d = Math.hypot(px - t * dx, py - t * dy);\n        if (d \u003c 1.9) display.setPixel(x, y, inside, inside, inside);\n        else if (d \u003c 3.0) display.setPixel(x, y, 235, 235, 235);\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Lines=4..7, Rush=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole line palette round the colour wheel together; the river stays blue."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the trains run: at 2 they reach 14 LEDs a second between stations and stand 0.7 s at each, at the bottom they creep at 1.4 and stand 7 s, at the top they reach 21."},{"name":"Lines","min":4,"max":7,"about":"How many lines are open: four at the bottom (two trunks, the line that shares both their corridors, and the circle), then the cross line through the middle, an upper and a lower one. A line that opens turns the crossings it makes into interchanges."},{"name":"Rush","min":0,"max":1,"about":"The service: from three trains on each line, spread evenly round its timetable, to eight; a train that joins fades in at its place and the rest close up over a couple of seconds."}],"start":[0,2,4,0.06],"measures":{"motion":0.0316,"detail":0.0683,"edges":0.914,"complexity":0.1388,"coverage":0.2043,"colour":0.2301,"drift":0.035},"knobResponse":[0.0664,0.0514,0.0687,0.0629]},{"slug":"millefiori","title":"Millefiori","family":"glass","round":20,"note":"무라노 밀레피오리 접시 위로 시야가 천천히 미끄러지며, 1 LED 고리와 꽃잎으로 된 유리 막대 조각 수백 개가 어두운 유리에 촘촘히 박혀 지나가요. K1 을 누르면 새로 뽑은 막대로 만든 접시가 오른쪽에서 밀려 들어와요.","idea":"The view drifts slowly across a Murano millefiori plate, hundreds of cane slices packed tight in dark glass, each a tiny rosette, star or flower of 1-LED rings and petals in cobalt, canary, emerald, ruby and turquoise, while a lamp wanders over the polished surface and every domed slice catches it as a white glint.","buttons":"K1 tap pulls a fresh set of canes, and the new plate slides in from the right over the old one in under a second.","code":"// ===== Patternflow pattern =====\n// Title:   Millefiori\n// Family:  glass\n// Idea:    The view drifts slowly across a Murano millefiori plate, hundreds of cane slices packed tight in dark glass, each a tiny rosette, star or flower of 1-LED rings and petals in cobalt, canary, emerald, ruby and turquoise, while a lamp wanders over the polished surface and every domed slice catches it as a white glint.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Venetian millefiori (murrine) glass from the workshops of Murano, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..4, Speed=0.2..3, Canes=6..12, Light=0..1\n//\n// Knob 1: Palette. The glass the canes are pulled from: classic Murano cobalt, canary, emerald, ruby and turquoise at 0, then ruby and gold, lagoon blues and greens, spring pinks and lemons, and violet and cyan night glass at 4.\n// Knob 2: Speed. How fast the plate slides under the view and the lamp moves: at 2 the plate drifts about two and a half LEDs a second sideways and one down, and the lamp crosses the panel in about twelve seconds.\n// Knob 3: Canes. How wide the slices are: at 6 most are 5 to 7 LEDs across, with 3-LED chips in the gaps and a few 11-LED feature canes; at 12 they run up to 15 LEDs and the feature canes to 23, each showing more rings and longer petals.\n// Knob 4: Light. How close the lamp hangs: near 0 it is far off and lights the plate almost evenly, each slice carrying a faint glint; turned up it comes down close, throws a bright pool with hard white glints, and the rest of the plate falls dim.\n// Buttons: K1 tap pulls a fresh set of canes, and the new plate slides in from the right over the old one in under a second.\n\nconst W = 64;\nconst H = 128;\n// The plate is a torus larger than the panel, so the view can drift forever.\nconst WW = 256;\nconst WH = 256;\nconst WN = WW * WH;\nconst MAXC = 6000;\nconst RINGS = 12;\n// The glassmaker pulls this many canes and cuts every slice from one of them.\nconst D = 14;\nconst TAU = Math.PI * 2;\n\n// Five sets of glass. Slots 0..5 go round the colour wheel so slot i and\n// slot i+3 sit opposite each other; slot 6 is the milk-white centre glass and\n// slot 7 the dark ground the slices are set in. Codes 8..15 are the same\n// glass pulled thin and dark.\nconst SETS = [\n  // Murano: ruby, canary, emerald, turquoise, cobalt, amethyst.\n  [[215, 10, 45], [255, 205, 0], [0, 185, 70], [0, 195, 200], [25, 60, 255], [150, 40, 225], [236, 232, 220], [5, 8, 40]],\n  // Ruby and gold.\n  [[225, 0, 35], [255, 175, 0], [255, 95, 0], [0, 165, 115], [25, 35, 190], [255, 60, 130], [255, 236, 170], [34, 4, 8]],\n  // Lagoon.\n  [[255, 90, 60], [160, 230, 0], [0, 200, 120], [0, 225, 225], [30, 110, 255], [70, 30, 230], [220, 245, 240], [0, 16, 30]],\n  // Spring.\n  [[255, 70, 150], [250, 235, 30], [60, 210, 40], [0, 200, 255], [120, 90, 255], [255, 140, 70], [255, 240, 245], [20, 10, 30]],\n  // Night.\n  [[230, 0, 190], [255, 90, 0], [150, 255, 0], [0, 230, 255], [20, 50, 255], [120, 20, 255], [230, 220, 255], [8, 0, 22]],\n];\n// The main glass of the fourteen canes: cobalt and the greens lead, canary\n// and amethyst follow, and ruby comes in mostly as a partner.\nconst MAINS = [4, 4, 4, 3, 3, 2, 2, 2, 1, 1, 5, 5, 0, 3];\nconst TYPES = [0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 4];\n// Most canes pair their main glass with the opposite one; five have a\n// milk-white eye and the rest a canary one.\nconst PARTS = [3, 3, 3, 3, 3, 3, 3, 3, 3, 1, 2, 4, 5, 2];\nconst ACCS = [6, 6, 6, 6, 6, 1, 1, 1, 1, 1, 1, 1, 1, 1];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wrap = (d, m) => (d > m / 2 ? d - m : d \u003c -m / 2 ? d + m : d);\nconst shuffle = (a) => {\n  const o = a.slice();\n  for (let i = o.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    const t = o[i];\n    o[i] = o[j];\n    o[j] = t;\n  }\n  return o;\n};\n\nexport function setup(params) {\n  const P = params;\n  P.cx = new Int16Array(MAXC);\n  P.cy = new Int16Array(MAXC);\n  P.cr = new Float32Array(MAXC);\n  P.cd = new Uint16Array(MAXC);\n  P.tone = new Float32Array(MAXC);\n  // Each slice's glint this frame: when worked out, where, how bright.\n  P.gs = new Int32Array(MAXC).fill(-1);\n  P.gx = new Float32Array(MAXC);\n  P.gy = new Float32Array(MAXC);\n  P.gn = new Float32Array(MAXC);\n  P.frame = 0;\n  // The cane library, per cane and ring count and ring: glass A and B, petal\n  // count, phase and duty.\n  const L = D * RINGS * RINGS;\n  P.ra = new Uint8Array(L);\n  P.rb = new Uint8Array(L);\n  P.rn = new Uint8Array(L);\n  P.rp = new Float32Array(L);\n  P.rd = new Float32Array(L);\n  P.reg = new Uint8Array(256);\n  // Per plate LED: which slice, which ring, the angle round its centre.\n  P.cid = new Int16Array(WN);\n  P.ring = new Uint8Array(WN);\n  P.ang = new Float32Array(WN);\n  P.s1 = new Float32Array(WN);\n  P.s2 = new Float32Array(WN);\n  P.pal = new Float32Array(16 * 3);\n  P.size = -1;\n  // The last frame, held while a new plate slides in over it.\n  P.prev = new Float32Array(W * H * 3);\n  P.wipe = -1;\n  P.t = 0;\n  P.ox = Math.random() * WW;\n  P.oy = Math.random() * WH;\n  P.lph = Math.random() * TAU;\n}\n\n// Pull the canes: each is one design built up ring by ring, the same in every\n// slice cut from it, whatever its width.\nfunction canes(P) {\n  const mains = shuffle(MAINS);\n  const types = shuffle(TYPES);\n  const parts = shuffle(PARTS);\n  const accs = shuffle(ACCS);\n  for (let d = 0; d \u003c D; d++) {\n    const m = mains[d];\n    const p = (m + parts[d]) % 6;\n    const acc = accs[d];\n    const half = Math.random() \u003c 0.5 ? 0.5 : 0;\n    const type = types[d];\n    const pS = Math.random() \u003c 0.4 ? 4 : 8;\n    const pL = [5, 6, 8, 8, 10, 12][Math.floor(Math.random() * 6)];\n    for (let K = 1; K \u003c RINGS; K++) realise(P, d, K, type, m, p, acc, half, K \u003c= 3 ? pS : pL);\n  }\n  for (let i = 0; i \u003c 256; i++) P.reg[i] = Math.floor(Math.random() * D);\n}\n\n// One cane's rings from the centre out. Petals point straight up or sit half\n// a petal over, so a slice is mirror-true and never turns into a pinwheel on\n// the LED grid.\nfunction realise(P, d, K, type, m, p, acc, half, petals) {\n  const o = (d * RINGS + K) * RINGS;\n  const set = (k, a, b, nn, ph, du) => {\n    P.ra[o + k] = a;\n    P.rb[o + k] = b;\n    P.rn[o + k] = nn;\n    P.rp[o + k] = ph;\n    P.rd[o + k] = du;\n  };\n  const dm = m + 8;\n  const dp = p + 8;\n  for (let k = 0; k \u003c= K; k++) {\n    const out = k / K;\n    // The innermost rings have 8 and 12 LEDs, too few to carry an odd count.\n    const pn = k === 1 ? (petals >= 8 ? 8 : 4) : k === 2 ? (petals === 4 ? 4 : petals \u003c= 6 ? 6 : 8) : petals;\n    if (k === 0) set(0, type === 3 ? m : acc, 0, 0, 0, 1);\n    else if (type === 0) {\n      // Bullseye: bright rings parted by dark ones, cased in the partner.\n      const seq = [dm, acc, dp, m, dm, p];\n      set(k, k === K ? p : seq[(k - 1) % seq.length], 0, 0, 0, 1);\n    } else if (type === 1) {\n      // Flower: white or partner petals on a dark disc of the main glass,\n      // cased in it.\n      if (k === K) set(k, m, 0, 0, 0, 1);\n      else set(k, k === 1 && K > 3 ? p : acc === 6 ? 6 : p, dm, pn, half, 0.55);\n    } else if (type === 2) {\n      // Star: points of the main glass taper out into the dark partner.\n      if (k === K) set(k, p, 0, 0, 0, 1);\n      else set(k, m, dp, pn, half, 0.85 - 0.55 * out);\n    } else if (type === 3) {\n      // Cog: rings round the eye and a toothed rim.\n      if (k === K) set(k, m, dm, Math.max(8, 4 * K), 0, 0.5);\n      else set(k, k % 2 ? dp : k % 4 === 2 ? acc : m, 0, 0, 0, 1);\n    } else {\n      // Rosetta: chevron layers of white and colour, each turned half a\n      // point from the one inside it.\n      set(k, k % 2 ? m : 6, k % 2 ? dp : dm, pn, half + k * 0.5, 0.5);\n    }\n  }\n}\n\n// Lay out the slices: a few big feature canes first, then ever smaller ones\n// thrown into the gaps until the plate is full, as a glassmaker packs a\n// mould. Slices from one cane tend to be set together in patches.\nfunction plate(P, size) {\n  const r0 = size / 2;\n  // Buckets at least as wide as two of the biggest radii together, so a new\n  // slice only has to look at its own bucket and the eight round it.\n  const gw = Math.max(3, Math.floor(WW / Math.ceil(r0 * 3.8 + 1)));\n  const gh = gw;\n  const CAP = 40;\n  const gc = new Int32Array(gw * gh);\n  const gi = new Int16Array(gw * gh * CAP);\n  let n = 0;\n  const fits = (x, y, r) => {\n    const gx = Math.floor((x * gw) / WW);\n    const gy = Math.floor((y * gh) / WH);\n    for (let j = -1; j \u003c= 1; j++)\n      for (let i = -1; i \u003c= 1; i++) {\n        const cell = ((gy + j + gh) % gh) * gw + ((gx + i + gw) % gw);\n        for (let t = 0; t \u003c gc[cell]; t++) {\n          const c = gi[cell * CAP + t];\n          const dx = wrap(x - P.cx[c], WW);\n          const dy = wrap(y - P.cy[c], WH);\n          const m = r + P.cr[c] - 0.4;\n          if (dx * dx + dy * dy \u003c m * m) return false;\n        }\n      }\n    return gc[Math.floor((y * gh) / WH) * gw + Math.floor((x * gw) / WW)] \u003c CAP;\n  };\n  const tries = Math.round((WN / (r0 * r0)) * 7);\n  for (let a = 0; a \u003c tries && n \u003c MAXC; a++) {\n    const big = a \u003c tries * 0.02 && Math.random() \u003c 0.35;\n    const u = a / tries;\n    const r = big ? r0 * (1.6 + Math.random() * 0.3) : (1.2 * r0 - (1.2 * r0 - 1.9) * Math.sqrt(u)) * (0.94 + Math.random() * 0.12);\n    const x = Math.floor(Math.random() * WW);\n    const y = Math.floor(Math.random() * WH);\n    if (!fits(x, y, r)) continue;\n    const R = Math.max(1.6, r);\n    const K = Math.min(Math.floor(R + 0.25), RINGS - 1);\n    P.cx[n] = x;\n    P.cy[n] = y;\n    P.cr[n] = R;\n    const d = !big && Math.random() \u003c 0.7 ? P.reg[(y >> 4) * 16 + (x >> 4)] : Math.floor(Math.random() * D);\n    P.cd[n] = d * RINGS + K;\n    P.tone[n] = 0.82 + Math.random() * 0.18;\n    const cell = Math.floor((y * gh) / WH) * gw + Math.floor((x * gw) / WW);\n    gi[cell * CAP + gc[cell]++] = n;\n    n++;\n  }\n  // Each LED goes to the slice whose rim it is closest to (d - r), so\n  // touching slices meet where their circles touch; past the rim, and on the\n  // seam between two slices, is the dark ground.\n  P.s1.fill(1e9);\n  P.s2.fill(1e9);\n  P.cid.fill(-1);\n  for (let c = 0; c \u003c n; c++) {\n    const R = P.cr[c];\n    const m = Math.ceil(R + 1);\n    const K = P.cd[c] % RINGS;\n    for (let dy = -m; dy \u003c= m; dy++)\n      for (let dx = -m; dx \u003c= m; dx++) {\n        const d = Math.sqrt(dx * dx + dy * dy);\n        const s = d - R;\n        if (s > 0.5) continue;\n        const q = ((P.cy[c] + dy) & (WH - 1)) * WW + ((P.cx[c] + dx) & (WW - 1));\n        if (s \u003c P.s1[q]) {\n          P.s2[q] = P.s1[q];\n          P.s1[q] = s;\n          P.cid[q] = c;\n          P.ring[q] = Math.min(Math.round(d), K);\n          // Angle from straight up, in turns.\n          P.ang[q] = Math.atan2(dx, -dy) / TAU;\n        } else if (s \u003c P.s2[q]) P.s2[q] = s;\n      }\n  }\n  for (let q = 0; q \u003c WN; q++) if (P.cid[q] \u003c 0 || P.s2[q] - P.s1[q] \u003c 1) P.ring[q] = 255;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const size = clamp(k[2], 6, 12);\n  P.light = clamp(k[3], 0, 1);\n  P.palk = clamp(k[0], 0, 4);\n  const fresh = input.btnPressed && input.btnPressed[0];\n  if (fresh && P.size > 0) P.wipe = 0;\n  else if (P.wipe >= 0) P.wipe = P.wipe + dt * 1.4 > 1 ? -1 : P.wipe + dt * 1.4;\n  if (fresh || P.size \u003c 0) canes(P);\n  if (fresh || P.size \u003c 0 || Math.abs(size - P.size) > 0.24) {\n    P.size = size;\n    plate(P, size);\n  }\n  P.t += dt * speed;\n  P.ox += dt * speed * 2.4;\n  P.oy += dt * speed * 0.9;\n  if (P.ox >= WW) P.ox -= WW;\n  if (P.oy >= WH) P.oy -= WH;\n  // The lamp wanders over the plate on a slow figure.\n  const t = P.t + P.lph * 10;\n  P.lx = 32 + 27 * Math.sin(t * 0.26 + P.lph);\n  P.ly = 64 + 52 * Math.sin(t * 0.15);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.size \u003c 0) return;\n  // The glass of the moment, between two neighbouring sets.\n  const i0 = Math.min(3, Math.floor(P.palk));\n  let f = P.palk - i0;\n  f = clamp((f - 0.3) / 0.4, 0, 1);\n  f = f * f * (3 - 2 * f);\n  const pal = P.pal;\n  for (let s = 0; s \u003c 8; s++) {\n    for (let ch = 0; ch \u003c 3; ch++) pal[s * 3 + ch] = SETS[i0][s][ch] * (1 - f) + SETS[i0 + 1][s][ch] * f;\n    // The same glass pulled dark. Dark yellow and orange read as brown on\n    // the panel, so they darken to a deep ruby, and lime to a bottle green.\n    const r = pal[s * 3];\n    const g = pal[s * 3 + 1];\n    const b = pal[s * 3 + 2];\n    const o = (s + 8) * 3;\n    if (b > 0.3 * Math.max(r, g) || g \u003c 0.35 * r) {\n      pal[o] = r * 0.18;\n      pal[o + 1] = g * 0.18;\n      pal[o + 2] = b * 0.18;\n    } else if (g > r) {\n      pal[o] = r * 0.03;\n      pal[o + 1] = g * 0.2;\n      pal[o + 2] = g * 0.06;\n    } else {\n      pal[o] = r * 0.21;\n      pal[o + 1] = g * 0.03;\n      pal[o + 2] = r * 0.06;\n    }\n  }\n  const L = P.light;\n  const sig = 70 - 46 * L;\n  const amb = 0.92 - 0.62 * L;\n  const pool = 0.2 + 0.85 * L;\n  const glint = 0.95 + 0.5 * L;\n  // While a new plate slides in, it rides in with its leading edge.\n  const ox = Math.floor(P.ox) - (P.wipe >= 0 ? Math.floor((W + 26) * (1 - P.wipe)) : 0);\n  const oy = Math.floor(P.oy);\n  const lx = P.lx;\n  const ly = P.ly;\n  const k2 = 1 / (2 * sig * sig);\n  P.frame++;\n  for (let y = 0; y \u003c H; y++) {\n    const wy = (y + oy) & (WH - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const wx = (x + ox) & (WW - 1);\n      const q = wy * WW + wx;\n      const c = P.cid[q];\n      const kk = P.ring[q];\n      const ddx = x - lx;\n      const ddy = y - ly;\n      const lit = amb + pool * Math.exp(-(ddx * ddx + ddy * ddy) * k2);\n      let r;\n      let g;\n      let b;\n      if (kk === 255) {\n        r = pal[21] * lit;\n        g = pal[22] * lit;\n        b = pal[23] * lit;\n      } else {\n        const e = P.cd[c] * RINGS + kk;\n        let code = P.ra[e];\n        const nn = P.rn[e];\n        if (nn) {\n          // Distance from the nearest petal's axis, 0 on it and 0.5 between.\n          const u = nn * P.ang[q] + P.rp[e];\n          if (Math.abs(u - Math.round(u)) * 2 >= P.rd[e]) code = P.rb[e];\n        }\n        const tl = lit * P.tone[c];\n        r = pal[code * 3] * tl;\n        g = pal[code * 3 + 1] * tl;\n        b = pal[code * 3 + 2] * tl;\n        // The domed slice throws the lamp back as a small glint on the side\n        // facing it; where, worked out once a frame for each slice in view.\n        if (P.gs[c] !== P.frame) {\n          P.gs[c] = P.frame;\n          const cxs = x + wrap(P.cx[c] - wx, WW);\n          const cys = y + wrap(P.cy[c] - wy, WH);\n          const vx = lx - cxs;\n          const vy = ly - cys;\n          const dl2 = vx * vx + vy * vy;\n          const dl = Math.sqrt(dl2) + 1e-3;\n          const off = (0.45 * P.cr[c] * Math.min(1, dl / 8)) / dl;\n          P.gx[c] = cxs + vx * off;\n          P.gy[c] = cys + vy * off;\n          P.gn[c] = glint * Math.exp(-dl2 * k2 * 1.4);\n        }\n        const hx = P.gx[c] - x;\n        const hy = P.gy[c] - y;\n        const h2 = hx * hx + hy * hy;\n        if (h2 \u003c 3 && P.gn[c] > 0.02) {\n          const gl = P.gn[c] * Math.exp(-h2 / 0.45);\n          r += 250 * gl;\n          g += 246 * gl;\n          b += 232 * gl;\n        }\n      }\n      const o = (y * W + x) * 3;\n      // The edge of the new plate runs right to left, leaning a little.\n      const e = P.wipe >= 0 ? x + y * 0.2 - (W + 26) * (1 - P.wipe) : 1;\n      if (P.wipe >= 0) {\n        if (e \u003c 0) {\n          r = P.prev[o];\n          g = P.prev[o + 1];\n          b = P.prev[o + 2];\n        } else if (e \u003c 1) {\n          r = g = b = 200;\n        }\n      }\n      // What is shown is what the next new plate slides in over; the old\n      // side only shrinks, so it keeps the frame it had when K1 was tapped.\n      if (P.wipe \u003c 0 || e >= 1) {\n        P.prev[o] = r;\n        P.prev[o + 1] = g;\n        P.prev[o + 2] = b;\n      }\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n}\n","layer":{"id":"layer-millefiori","type":"code","name":"millefiori","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Millefiori\n// Family:  glass\n// Idea:    The view drifts slowly across a Murano millefiori plate, hundreds of cane slices packed tight in dark glass, each a tiny rosette, star or flower of 1-LED rings and petals in cobalt, canary, emerald, ruby and turquoise, while a lamp wanders over the polished surface and every domed slice catches it as a white glint.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Venetian millefiori (murrine) glass from the workshops of Murano, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..4, Speed=0.2..3, Canes=6..12, Light=0..1\n//\n// Knob 1: Palette. The glass the canes are pulled from: classic Murano cobalt, canary, emerald, ruby and turquoise at 0, then ruby and gold, lagoon blues and greens, spring pinks and lemons, and violet and cyan night glass at 4.\n// Knob 2: Speed. How fast the plate slides under the view and the lamp moves: at 2 the plate drifts about two and a half LEDs a second sideways and one down, and the lamp crosses the panel in about twelve seconds.\n// Knob 3: Canes. How wide the slices are: at 6 most are 5 to 7 LEDs across, with 3-LED chips in the gaps and a few 11-LED feature canes; at 12 they run up to 15 LEDs and the feature canes to 23, each showing more rings and longer petals.\n// Knob 4: Light. How close the lamp hangs: near 0 it is far off and lights the plate almost evenly, each slice carrying a faint glint; turned up it comes down close, throws a bright pool with hard white glints, and the rest of the plate falls dim.\n// Buttons: K1 tap pulls a fresh set of canes, and the new plate slides in from the right over the old one in under a second.\n\nconst W = 64;\nconst H = 128;\n// The plate is a torus larger than the panel, so the view can drift forever.\nconst WW = 256;\nconst WH = 256;\nconst WN = WW * WH;\nconst MAXC = 6000;\nconst RINGS = 12;\n// The glassmaker pulls this many canes and cuts every slice from one of them.\nconst D = 14;\nconst TAU = Math.PI * 2;\n\n// Five sets of glass. Slots 0..5 go round the colour wheel so slot i and\n// slot i+3 sit opposite each other; slot 6 is the milk-white centre glass and\n// slot 7 the dark ground the slices are set in. Codes 8..15 are the same\n// glass pulled thin and dark.\nconst SETS = [\n  // Murano: ruby, canary, emerald, turquoise, cobalt, amethyst.\n  [[215, 10, 45], [255, 205, 0], [0, 185, 70], [0, 195, 200], [25, 60, 255], [150, 40, 225], [236, 232, 220], [5, 8, 40]],\n  // Ruby and gold.\n  [[225, 0, 35], [255, 175, 0], [255, 95, 0], [0, 165, 115], [25, 35, 190], [255, 60, 130], [255, 236, 170], [34, 4, 8]],\n  // Lagoon.\n  [[255, 90, 60], [160, 230, 0], [0, 200, 120], [0, 225, 225], [30, 110, 255], [70, 30, 230], [220, 245, 240], [0, 16, 30]],\n  // Spring.\n  [[255, 70, 150], [250, 235, 30], [60, 210, 40], [0, 200, 255], [120, 90, 255], [255, 140, 70], [255, 240, 245], [20, 10, 30]],\n  // Night.\n  [[230, 0, 190], [255, 90, 0], [150, 255, 0], [0, 230, 255], [20, 50, 255], [120, 20, 255], [230, 220, 255], [8, 0, 22]],\n];\n// The main glass of the fourteen canes: cobalt and the greens lead, canary\n// and amethyst follow, and ruby comes in mostly as a partner.\nconst MAINS = [4, 4, 4, 3, 3, 2, 2, 2, 1, 1, 5, 5, 0, 3];\nconst TYPES = [0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 4];\n// Most canes pair their main glass with the opposite one; five have a\n// milk-white eye and the rest a canary one.\nconst PARTS = [3, 3, 3, 3, 3, 3, 3, 3, 3, 1, 2, 4, 5, 2];\nconst ACCS = [6, 6, 6, 6, 6, 1, 1, 1, 1, 1, 1, 1, 1, 1];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wrap = (d, m) => (d > m / 2 ? d - m : d \u003c -m / 2 ? d + m : d);\nconst shuffle = (a) => {\n  const o = a.slice();\n  for (let i = o.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    const t = o[i];\n    o[i] = o[j];\n    o[j] = t;\n  }\n  return o;\n};\n\nexport function setup(params) {\n  const P = params;\n  P.cx = new Int16Array(MAXC);\n  P.cy = new Int16Array(MAXC);\n  P.cr = new Float32Array(MAXC);\n  P.cd = new Uint16Array(MAXC);\n  P.tone = new Float32Array(MAXC);\n  // Each slice's glint this frame: when worked out, where, how bright.\n  P.gs = new Int32Array(MAXC).fill(-1);\n  P.gx = new Float32Array(MAXC);\n  P.gy = new Float32Array(MAXC);\n  P.gn = new Float32Array(MAXC);\n  P.frame = 0;\n  // The cane library, per cane and ring count and ring: glass A and B, petal\n  // count, phase and duty.\n  const L = D * RINGS * RINGS;\n  P.ra = new Uint8Array(L);\n  P.rb = new Uint8Array(L);\n  P.rn = new Uint8Array(L);\n  P.rp = new Float32Array(L);\n  P.rd = new Float32Array(L);\n  P.reg = new Uint8Array(256);\n  // Per plate LED: which slice, which ring, the angle round its centre.\n  P.cid = new Int16Array(WN);\n  P.ring = new Uint8Array(WN);\n  P.ang = new Float32Array(WN);\n  P.s1 = new Float32Array(WN);\n  P.s2 = new Float32Array(WN);\n  P.pal = new Float32Array(16 * 3);\n  P.size = -1;\n  // The last frame, held while a new plate slides in over it.\n  P.prev = new Float32Array(W * H * 3);\n  P.wipe = -1;\n  P.t = 0;\n  P.ox = Math.random() * WW;\n  P.oy = Math.random() * WH;\n  P.lph = Math.random() * TAU;\n}\n\n// Pull the canes: each is one design built up ring by ring, the same in every\n// slice cut from it, whatever its width.\nfunction canes(P) {\n  const mains = shuffle(MAINS);\n  const types = shuffle(TYPES);\n  const parts = shuffle(PARTS);\n  const accs = shuffle(ACCS);\n  for (let d = 0; d \u003c D; d++) {\n    const m = mains[d];\n    const p = (m + parts[d]) % 6;\n    const acc = accs[d];\n    const half = Math.random() \u003c 0.5 ? 0.5 : 0;\n    const type = types[d];\n    const pS = Math.random() \u003c 0.4 ? 4 : 8;\n    const pL = [5, 6, 8, 8, 10, 12][Math.floor(Math.random() * 6)];\n    for (let K = 1; K \u003c RINGS; K++) realise(P, d, K, type, m, p, acc, half, K \u003c= 3 ? pS : pL);\n  }\n  for (let i = 0; i \u003c 256; i++) P.reg[i] = Math.floor(Math.random() * D);\n}\n\n// One cane's rings from the centre out. Petals point straight up or sit half\n// a petal over, so a slice is mirror-true and never turns into a pinwheel on\n// the LED grid.\nfunction realise(P, d, K, type, m, p, acc, half, petals) {\n  const o = (d * RINGS + K) * RINGS;\n  const set = (k, a, b, nn, ph, du) => {\n    P.ra[o + k] = a;\n    P.rb[o + k] = b;\n    P.rn[o + k] = nn;\n    P.rp[o + k] = ph;\n    P.rd[o + k] = du;\n  };\n  const dm = m + 8;\n  const dp = p + 8;\n  for (let k = 0; k \u003c= K; k++) {\n    const out = k / K;\n    // The innermost rings have 8 and 12 LEDs, too few to carry an odd count.\n    const pn = k === 1 ? (petals >= 8 ? 8 : 4) : k === 2 ? (petals === 4 ? 4 : petals \u003c= 6 ? 6 : 8) : petals;\n    if (k === 0) set(0, type === 3 ? m : acc, 0, 0, 0, 1);\n    else if (type === 0) {\n      // Bullseye: bright rings parted by dark ones, cased in the partner.\n      const seq = [dm, acc, dp, m, dm, p];\n      set(k, k === K ? p : seq[(k - 1) % seq.length], 0, 0, 0, 1);\n    } else if (type === 1) {\n      // Flower: white or partner petals on a dark disc of the main glass,\n      // cased in it.\n      if (k === K) set(k, m, 0, 0, 0, 1);\n      else set(k, k === 1 && K > 3 ? p : acc === 6 ? 6 : p, dm, pn, half, 0.55);\n    } else if (type === 2) {\n      // Star: points of the main glass taper out into the dark partner.\n      if (k === K) set(k, p, 0, 0, 0, 1);\n      else set(k, m, dp, pn, half, 0.85 - 0.55 * out);\n    } else if (type === 3) {\n      // Cog: rings round the eye and a toothed rim.\n      if (k === K) set(k, m, dm, Math.max(8, 4 * K), 0, 0.5);\n      else set(k, k % 2 ? dp : k % 4 === 2 ? acc : m, 0, 0, 0, 1);\n    } else {\n      // Rosetta: chevron layers of white and colour, each turned half a\n      // point from the one inside it.\n      set(k, k % 2 ? m : 6, k % 2 ? dp : dm, pn, half + k * 0.5, 0.5);\n    }\n  }\n}\n\n// Lay out the slices: a few big feature canes first, then ever smaller ones\n// thrown into the gaps until the plate is full, as a glassmaker packs a\n// mould. Slices from one cane tend to be set together in patches.\nfunction plate(P, size) {\n  const r0 = size / 2;\n  // Buckets at least as wide as two of the biggest radii together, so a new\n  // slice only has to look at its own bucket and the eight round it.\n  const gw = Math.max(3, Math.floor(WW / Math.ceil(r0 * 3.8 + 1)));\n  const gh = gw;\n  const CAP = 40;\n  const gc = new Int32Array(gw * gh);\n  const gi = new Int16Array(gw * gh * CAP);\n  let n = 0;\n  const fits = (x, y, r) => {\n    const gx = Math.floor((x * gw) / WW);\n    const gy = Math.floor((y * gh) / WH);\n    for (let j = -1; j \u003c= 1; j++)\n      for (let i = -1; i \u003c= 1; i++) {\n        const cell = ((gy + j + gh) % gh) * gw + ((gx + i + gw) % gw);\n        for (let t = 0; t \u003c gc[cell]; t++) {\n          const c = gi[cell * CAP + t];\n          const dx = wrap(x - P.cx[c], WW);\n          const dy = wrap(y - P.cy[c], WH);\n          const m = r + P.cr[c] - 0.4;\n          if (dx * dx + dy * dy \u003c m * m) return false;\n        }\n      }\n    return gc[Math.floor((y * gh) / WH) * gw + Math.floor((x * gw) / WW)] \u003c CAP;\n  };\n  const tries = Math.round((WN / (r0 * r0)) * 7);\n  for (let a = 0; a \u003c tries && n \u003c MAXC; a++) {\n    const big = a \u003c tries * 0.02 && Math.random() \u003c 0.35;\n    const u = a / tries;\n    const r = big ? r0 * (1.6 + Math.random() * 0.3) : (1.2 * r0 - (1.2 * r0 - 1.9) * Math.sqrt(u)) * (0.94 + Math.random() * 0.12);\n    const x = Math.floor(Math.random() * WW);\n    const y = Math.floor(Math.random() * WH);\n    if (!fits(x, y, r)) continue;\n    const R = Math.max(1.6, r);\n    const K = Math.min(Math.floor(R + 0.25), RINGS - 1);\n    P.cx[n] = x;\n    P.cy[n] = y;\n    P.cr[n] = R;\n    const d = !big && Math.random() \u003c 0.7 ? P.reg[(y >> 4) * 16 + (x >> 4)] : Math.floor(Math.random() * D);\n    P.cd[n] = d * RINGS + K;\n    P.tone[n] = 0.82 + Math.random() * 0.18;\n    const cell = Math.floor((y * gh) / WH) * gw + Math.floor((x * gw) / WW);\n    gi[cell * CAP + gc[cell]++] = n;\n    n++;\n  }\n  // Each LED goes to the slice whose rim it is closest to (d - r), so\n  // touching slices meet where their circles touch; past the rim, and on the\n  // seam between two slices, is the dark ground.\n  P.s1.fill(1e9);\n  P.s2.fill(1e9);\n  P.cid.fill(-1);\n  for (let c = 0; c \u003c n; c++) {\n    const R = P.cr[c];\n    const m = Math.ceil(R + 1);\n    const K = P.cd[c] % RINGS;\n    for (let dy = -m; dy \u003c= m; dy++)\n      for (let dx = -m; dx \u003c= m; dx++) {\n        const d = Math.sqrt(dx * dx + dy * dy);\n        const s = d - R;\n        if (s > 0.5) continue;\n        const q = ((P.cy[c] + dy) & (WH - 1)) * WW + ((P.cx[c] + dx) & (WW - 1));\n        if (s \u003c P.s1[q]) {\n          P.s2[q] = P.s1[q];\n          P.s1[q] = s;\n          P.cid[q] = c;\n          P.ring[q] = Math.min(Math.round(d), K);\n          // Angle from straight up, in turns.\n          P.ang[q] = Math.atan2(dx, -dy) / TAU;\n        } else if (s \u003c P.s2[q]) P.s2[q] = s;\n      }\n  }\n  for (let q = 0; q \u003c WN; q++) if (P.cid[q] \u003c 0 || P.s2[q] - P.s1[q] \u003c 1) P.ring[q] = 255;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const size = clamp(k[2], 6, 12);\n  P.light = clamp(k[3], 0, 1);\n  P.palk = clamp(k[0], 0, 4);\n  const fresh = input.btnPressed && input.btnPressed[0];\n  if (fresh && P.size > 0) P.wipe = 0;\n  else if (P.wipe >= 0) P.wipe = P.wipe + dt * 1.4 > 1 ? -1 : P.wipe + dt * 1.4;\n  if (fresh || P.size \u003c 0) canes(P);\n  if (fresh || P.size \u003c 0 || Math.abs(size - P.size) > 0.24) {\n    P.size = size;\n    plate(P, size);\n  }\n  P.t += dt * speed;\n  P.ox += dt * speed * 2.4;\n  P.oy += dt * speed * 0.9;\n  if (P.ox >= WW) P.ox -= WW;\n  if (P.oy >= WH) P.oy -= WH;\n  // The lamp wanders over the plate on a slow figure.\n  const t = P.t + P.lph * 10;\n  P.lx = 32 + 27 * Math.sin(t * 0.26 + P.lph);\n  P.ly = 64 + 52 * Math.sin(t * 0.15);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.size \u003c 0) return;\n  // The glass of the moment, between two neighbouring sets.\n  const i0 = Math.min(3, Math.floor(P.palk));\n  let f = P.palk - i0;\n  f = clamp((f - 0.3) / 0.4, 0, 1);\n  f = f * f * (3 - 2 * f);\n  const pal = P.pal;\n  for (let s = 0; s \u003c 8; s++) {\n    for (let ch = 0; ch \u003c 3; ch++) pal[s * 3 + ch] = SETS[i0][s][ch] * (1 - f) + SETS[i0 + 1][s][ch] * f;\n    // The same glass pulled dark. Dark yellow and orange read as brown on\n    // the panel, so they darken to a deep ruby, and lime to a bottle green.\n    const r = pal[s * 3];\n    const g = pal[s * 3 + 1];\n    const b = pal[s * 3 + 2];\n    const o = (s + 8) * 3;\n    if (b > 0.3 * Math.max(r, g) || g \u003c 0.35 * r) {\n      pal[o] = r * 0.18;\n      pal[o + 1] = g * 0.18;\n      pal[o + 2] = b * 0.18;\n    } else if (g > r) {\n      pal[o] = r * 0.03;\n      pal[o + 1] = g * 0.2;\n      pal[o + 2] = g * 0.06;\n    } else {\n      pal[o] = r * 0.21;\n      pal[o + 1] = g * 0.03;\n      pal[o + 2] = r * 0.06;\n    }\n  }\n  const L = P.light;\n  const sig = 70 - 46 * L;\n  const amb = 0.92 - 0.62 * L;\n  const pool = 0.2 + 0.85 * L;\n  const glint = 0.95 + 0.5 * L;\n  // While a new plate slides in, it rides in with its leading edge.\n  const ox = Math.floor(P.ox) - (P.wipe >= 0 ? Math.floor((W + 26) * (1 - P.wipe)) : 0);\n  const oy = Math.floor(P.oy);\n  const lx = P.lx;\n  const ly = P.ly;\n  const k2 = 1 / (2 * sig * sig);\n  P.frame++;\n  for (let y = 0; y \u003c H; y++) {\n    const wy = (y + oy) & (WH - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const wx = (x + ox) & (WW - 1);\n      const q = wy * WW + wx;\n      const c = P.cid[q];\n      const kk = P.ring[q];\n      const ddx = x - lx;\n      const ddy = y - ly;\n      const lit = amb + pool * Math.exp(-(ddx * ddx + ddy * ddy) * k2);\n      let r;\n      let g;\n      let b;\n      if (kk === 255) {\n        r = pal[21] * lit;\n        g = pal[22] * lit;\n        b = pal[23] * lit;\n      } else {\n        const e = P.cd[c] * RINGS + kk;\n        let code = P.ra[e];\n        const nn = P.rn[e];\n        if (nn) {\n          // Distance from the nearest petal's axis, 0 on it and 0.5 between.\n          const u = nn * P.ang[q] + P.rp[e];\n          if (Math.abs(u - Math.round(u)) * 2 >= P.rd[e]) code = P.rb[e];\n        }\n        const tl = lit * P.tone[c];\n        r = pal[code * 3] * tl;\n        g = pal[code * 3 + 1] * tl;\n        b = pal[code * 3 + 2] * tl;\n        // The domed slice throws the lamp back as a small glint on the side\n        // facing it; where, worked out once a frame for each slice in view.\n        if (P.gs[c] !== P.frame) {\n          P.gs[c] = P.frame;\n          const cxs = x + wrap(P.cx[c] - wx, WW);\n          const cys = y + wrap(P.cy[c] - wy, WH);\n          const vx = lx - cxs;\n          const vy = ly - cys;\n          const dl2 = vx * vx + vy * vy;\n          const dl = Math.sqrt(dl2) + 1e-3;\n          const off = (0.45 * P.cr[c] * Math.min(1, dl / 8)) / dl;\n          P.gx[c] = cxs + vx * off;\n          P.gy[c] = cys + vy * off;\n          P.gn[c] = glint * Math.exp(-dl2 * k2 * 1.4);\n        }\n        const hx = P.gx[c] - x;\n        const hy = P.gy[c] - y;\n        const h2 = hx * hx + hy * hy;\n        if (h2 \u003c 3 && P.gn[c] > 0.02) {\n          const gl = P.gn[c] * Math.exp(-h2 / 0.45);\n          r += 250 * gl;\n          g += 246 * gl;\n          b += 232 * gl;\n        }\n      }\n      const o = (y * W + x) * 3;\n      // The edge of the new plate runs right to left, leaning a little.\n      const e = P.wipe >= 0 ? x + y * 0.2 - (W + 26) * (1 - P.wipe) : 1;\n      if (P.wipe >= 0) {\n        if (e \u003c 0) {\n          r = P.prev[o];\n          g = P.prev[o + 1];\n          b = P.prev[o + 2];\n        } else if (e \u003c 1) {\n          r = g = b = 200;\n        }\n      }\n      // What is shown is what the next new plate slides in over; the old\n      // side only shrinks, so it keeps the frame it had when K1 was tapped.\n      if (P.wipe \u003c 0 || e >= 1) {\n        P.prev[o] = r;\n        P.prev[o + 1] = g;\n        P.prev[o + 2] = b;\n      }\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..4, Speed=0.2..3, Canes=6..12, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":4,"about":"The glass the canes are pulled from: classic Murano cobalt, canary, emerald, ruby and turquoise at 0, then ruby and gold, lagoon blues and greens, spring pinks and lemons, and violet and cyan night glass at 4."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the plate slides under the view and the lamp moves: at 2 the plate drifts about two and a half LEDs a second sideways and one down, and the lamp crosses the panel in about twelve seconds."},{"name":"Canes","min":6,"max":12,"about":"How wide the slices are: at 6 most are 5 to 7 LEDs across, with 3-LED chips in the gaps and a few 11-LED feature canes; at 12 they run up to 15 LEDs and the feature canes to 23, each showing more rings and longer petals."},{"name":"Light","min":0,"max":1,"about":"How close the lamp hangs: near 0 it is far off and lights the plate almost evenly, each slice carrying a faint glint; turned up it comes down close, throws a bright pool with hard white glints, and the rest of the plate falls dim."}],"start":[0,2,6,0.06],"measures":{"motion":1.2091,"detail":0.3373,"edges":0.8101,"complexity":1.6267,"coverage":1,"colour":0.5579,"drift":0.0871},"knobResponse":[0.1882,0.3627,0.3509,0.1412]},{"slug":"moire-rings","title":"Moire Rings","family":"wave","round":1,"note":"동심원 두 벌이 서로 지나가고, 어긋나는 자리에 아무도 그리지 않은 무늬가 생겨요.","idea":"Two sets of rings slide past each other, and where they disagree the panel draws a third shape nobody drew.","buttons":"K1 tap swaps which set of rings is drawn bright.","code":"// ===== Patternflow pattern =====\n// Title:   Moire Rings\n// Family:  wave\n// Idea:    Two sets of rings slide past each other, and where they disagree the panel draws a third shape nobody drew.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.1..6, Rings=5..16, Spread=-1..1\n//\n// Knob 1: Hue. Turns the two-colour pair around the colour wheel.\n// Knob 2: Speed. How fast the two centres orbit.\n// Knob 3: Rings. Ring spacing in LEDs; small is a fine moire, large is a few fat bands.\n// Knob 4: Spread. How far apart the two centres travel, and below 0 the second one turns the other way.\n// Buttons: K1 tap swaps which set of rings is drawn bright.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nexport function setup(params) {\n  params.phase = 0;\n  params.swap = false;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  // K1 at 0 opens on cyan rather than the red most of the study opens on.\n  params.hue = k[0] + 0.52;\n  params.speed = k[1];\n  params.spacing = k[2];\n  params.spread = k[3];\n  params.phase += dt * params.speed * 0.35;\n  if (input.btnPressed && input.btnPressed[0]) params.swap = !params.swap;\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const reach = 0.15 + Math.abs(params.spread) * 0.85;\n  // Below 0 the second centre runs the other way round.\n  const dir = params.spread \u003c 0 ? -1 : 1;\n  const ax = w / 2 + Math.cos(params.phase) * w * 0.3 * reach;\n  const ay = h / 2 + Math.sin(params.phase * 1.3) * h * 0.35 * reach;\n  const bx = w / 2 - Math.cos(params.phase * 0.8) * w * 0.3 * reach;\n  const by = h / 2 - Math.sin(params.phase * 1.1) * h * 0.35 * reach * dir;\n  const s = params.spacing;\n  const a = hsv(params.hue, 0.85, 1);\n  const b = hsv(params.hue + 0.5, 0.7, 1);\n  const front = params.swap ? b : a;\n  const back = params.swap ? a : b;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const da = Math.hypot(x - ax, y - ay) / s;\n      const db = Math.hypot(x - bx, y - by) / s;\n      const ra = da - Math.floor(da) \u003c 0.5 ? 1 : 0;\n      const rb = db - Math.floor(db) \u003c 0.5 ? 1 : 0;\n      if (ra && rb) display.setPixel(x, y, front[0], front[1], front[2]);\n      else if (ra !== rb) display.setPixel(x, y, back[0] * 0.18, back[1] * 0.18, back[2] * 0.18);\n      else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","layer":{"id":"layer-moire-rings","type":"code","name":"moire-rings","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Moire Rings\n// Family:  wave\n// Idea:    Two sets of rings slide past each other, and where they disagree the panel draws a third shape nobody drew.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.1..6, Rings=5..16, Spread=-1..1\n//\n// Knob 1: Hue. Turns the two-colour pair around the colour wheel.\n// Knob 2: Speed. How fast the two centres orbit.\n// Knob 3: Rings. Ring spacing in LEDs; small is a fine moire, large is a few fat bands.\n// Knob 4: Spread. How far apart the two centres travel, and below 0 the second one turns the other way.\n// Buttons: K1 tap swaps which set of rings is drawn bright.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nexport function setup(params) {\n  params.phase = 0;\n  params.swap = false;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  // K1 at 0 opens on cyan rather than the red most of the study opens on.\n  params.hue = k[0] + 0.52;\n  params.speed = k[1];\n  params.spacing = k[2];\n  params.spread = k[3];\n  params.phase += dt * params.speed * 0.35;\n  if (input.btnPressed && input.btnPressed[0]) params.swap = !params.swap;\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const reach = 0.15 + Math.abs(params.spread) * 0.85;\n  // Below 0 the second centre runs the other way round.\n  const dir = params.spread \u003c 0 ? -1 : 1;\n  const ax = w / 2 + Math.cos(params.phase) * w * 0.3 * reach;\n  const ay = h / 2 + Math.sin(params.phase * 1.3) * h * 0.35 * reach;\n  const bx = w / 2 - Math.cos(params.phase * 0.8) * w * 0.3 * reach;\n  const by = h / 2 - Math.sin(params.phase * 1.1) * h * 0.35 * reach * dir;\n  const s = params.spacing;\n  const a = hsv(params.hue, 0.85, 1);\n  const b = hsv(params.hue + 0.5, 0.7, 1);\n  const front = params.swap ? b : a;\n  const back = params.swap ? a : b;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const da = Math.hypot(x - ax, y - ay) / s;\n      const db = Math.hypot(x - bx, y - by) / s;\n      const ra = da - Math.floor(da) \u003c 0.5 ? 1 : 0;\n      const rb = db - Math.floor(db) \u003c 0.5 ? 1 : 0;\n      if (ra && rb) display.setPixel(x, y, front[0], front[1], front[2]);\n      else if (ra !== rb) display.setPixel(x, y, back[0] * 0.18, back[1] * 0.18, back[2] * 0.18);\n      else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.1..6, Rings=5..16, Spread=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the two-colour pair around the colour wheel."},{"name":"Speed","min":0.1,"max":6,"about":"How fast the two centres orbit."},{"name":"Rings","min":5,"max":16,"about":"Ring spacing in LEDs; small is a fine moire, large is a few fat bands."},{"name":"Spread","min":-1,"max":1,"about":"How far apart the two centres travel, and below 0 the second one turns the other way."}],"start":[0,2,5,0.06],"measures":{"motion":1.5703,"detail":0.2108,"edges":1,"complexity":0.1822,"coverage":0.7502,"colour":0.4676,"drift":0.1626},"knobResponse":[0.2556,0.2849,0.3431,0.2821]},{"slug":"moth-lamp","title":"Moth Lamp","family":"insect","round":20,"note":"벽돌집 처마 밑 사슬에 매달린 옛 등이 흔들리고, 나방이 어둠에서 나선을 그리며 날아와 등을 돌다가 유리와 불빛 든 벽돌에 날개를 펴고 앉아요. K1 을 누르면 박쥐가 빛 속으로 날아들어 나방 한 마리를 채 가요.","idea":"An old lantern hangs on its chain under the eaves of a brick house on a summer night; moths spiral in out of the dark, circle it, bump the glass, rest on the panes and the lit bricks and flutter off, and now and then a bat takes one.","buttons":"K1 tap sends a bat after a moth; the moths that hear it dive. K2 tap makes the old lamp stutter out and strike again.","code":"// ===== Patternflow pattern =====\n// Title:   Moth Lamp\n// Family:  insect\n// Idea:    An old lantern hangs on its chain under the eaves of a brick house on a summer night; moths spiral in out of the dark, circle it, bump the glass, rest on the panes and the lit bricks and flutter off, and now and then a bat takes one.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after Fabian, Sondhi, Allen, Lin and Lin, Why flying insects gather at artificial light (Nature Communications, 2024)\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Moths=12..120, Breeze=-1..1\n//\n// Knob 1: Lamp. Sodium gold at 0, a warm old bulb, mercury blue-white, a cold LED at 1; the bluer lamps burn brighter, reach further and pull the moths in tighter.\n// Knob 2: Speed. At 2 a moth flies about twenty LEDs a second and rounds the lamp in two or three, and the lantern swings once in two seconds.\n// Knob 3: Moths. Twelve to 120; the damp nights that bring them out also haze the air, so the glow round the lamp grows with them.\n// Knob 4: Breeze. A breath of air at 0.06; either way the lantern leans and swings harder, the moths drift downwind, the clouds run faster and the ivy shivers.\n// Buttons: K1 tap sends a bat after a moth; the moths that hear it dive. K2 tap makes the old lamp stutter out and strike again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The hook, and how far down the chain the bulb burns.\nconst PX = 36;\nconst PY = 22;\nconst BV = 18.5;\n// Rows: the roof, the wall under the gutter, the pavement.\nconst SKY = 13;\nconst EAVE = 18;\nconst GY = 114;\n// The moon.\nconst MX = 52;\nconst MY = 6;\nconst MR = 3.6;\nconst MAXM = 120;\n// Where the lamp's reach gives out on the wall.\nconst E0 = 0.175;\n\n// Sodium gold, an old warm bulb, mercury blue-white, a cold LED.\nconst LAMPS = [[255, 184, 96], [255, 212, 150], [160, 224, 242], [222, 234, 255]];\n// Moths: pale buff, white, straw, tan.\nconst TINTS = [[1, 0.9, 0.72], [1, 1, 0.96], [1, 0.94, 0.6], [0.86, 0.7, 0.5]];\n// Old bricks: red, yellow stocks, a few grey ones, the ghost of limewash.\nconst BRICKS = [[0.74, 0.4, 0.3], [0.78, 0.62, 0.4], [0.5, 0.48, 0.5], [0.85, 0.8, 0.72]];\n// What each LED of the scene is.\nconst [BRICK, MORTAR, LEAF, STONE, GAP, IRON, AIR, ROOF] = [0, 1, 2, 3, 4, 5, 6, 7];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => (v = clamp((v - a) / (b - a), 0, 1)) * v * (3 - 2 * v);\nconst wrap = (a) => a - 6.2832 * Math.round(a / 6.2832);\nconst rnd = () => Math.random();\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const u = (x - xi) ** 2 * (3 - 2 * (x - xi));\n  const v = (y - yi) ** 2 * (3 - 2 * (y - yi));\n  const a = hash(xi, yi);\n  const b = hash(xi + 1, yi);\n  const c = hash(xi, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(xi + 1, yi + 1)) * u * v;\n}\n\nfunction put(buf, q, r, g, b) {\n  buf[q] = r;\n  buf[q + 1] = g;\n  buf[q + 2] = b;\n}\n\nconst dim = (buf, q, k) => put(buf, q, buf[q] * k, buf[q + 1] * k, buf[q + 2] * k);\n\nfunction build(P) {\n  const { kind, alb, dark, leaf } = P;\n  const set = (p, k, r, g, b) => {\n    kind[p] = k;\n    put(alb, p * 3, r, g, b);\n  };\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    if (y \u003c SKY) set(p, AIR, 0, 0, 0);\n    else if (y \u003c EAVE - 1) {\n      // Roof tiles, a ridge every four LEDs.\n      const s = (x + (y % 2) * 2) % 4 === 0 ? 0.12 : 0.28 + 0.06 * hash(x >> 2, y);\n      set(p, ROOF, s * 1.1, s * 0.75, s * 0.65);\n    } else if (y === EAVE - 1) set(p, IRON, 0.6, 0.55, 0.5);\n    else if (y \u003c GY) {\n      // Bricks six LEDs long and two high, each course set over by three.\n      // The joints are worn back deep and stay in shadow.\n      const course = Math.floor(y / 3);\n      const off = course % 2 ? 3 : 0;\n      const col = Math.floor((x + off) / 7);\n      const kb = hash(col, course + 70);\n      const bc = BRICKS[kb \u003c 0.55 ? 0 : kb \u003c 0.78 ? 1 : kb \u003c 0.88 ? 2 : 3];\n      const t = (0.7 + 0.3 * hash(col, course + 50) - (hash(col, course + 90) \u003c 0.12 ? 0.25 : 0)) * (0.7 + 0.6 * hash(p, 3));\n      if (y % 3 === 2 || (x + off) % 7 === 6) set(p, MORTAR, 0.17, 0.16, 0.15);\n      else set(p, BRICK, bc[0] * t, bc[1] * t, bc[2] * t);\n    } else {\n      // Setts, the rows growing toward us.\n      const d = y - GY;\n      const rows = [0, 2, 4, 7, 10, 14];\n      let r = 0;\n      while (r \u003c 4 && d >= rows[r + 1]) r++;\n      const v = (d - rows[r]) / (rows[r + 1] - rows[r]);\n      const sw = 5 + r;\n      const xo = (r % 2) * (sw >> 1);\n      const u = ((x + xo) % sw) / sw;\n      const s = (0.6 + 0.25 * hash(Math.floor((x + xo) / sw), r + 20)) * clamp(1 - 1.4 * ((u - 0.42) ** 2 + (v - 0.35) ** 2), 0.4, 1);\n      if (v > 0.8 || u > 0.84) set(p, GAP, 0.1, 0.1, 0.1);\n      else set(p, STONE, 0.66 * s, 0.64 * s, 0.6 * s);\n    }\n  }\n  // Ivy up the wall toward the lamp, a leaf every third row.\n  for (const [x0, y0, x1, y1, s] of [[59, GY, 50, 34, 0], [56, 76, 44, 50, 1], [61, 56, 63, 30, 2]]) {\n    const len = Math.abs(y1 - y0);\n    for (let i = 0; i \u003c= len; i++) {\n      const y = Math.round(y0 + ((y1 - y0) * i) / len);\n      const x = x0 + ((x1 - x0) * i) / len + 1.6 * Math.sin(i * 0.31 + s);\n      if (Math.round(x) \u003c W) set(y * W + Math.round(x), LEAF, 0.22, 0.3, 0.12);\n      if (i % 3) continue;\n      const lx = x + ((i / 3) % 2 ? 2.2 : -2.2);\n      const id = i * 7 + s * 131;\n      const big = 1.3 + 0.7 * hash(id, 4);\n      const g = 0.75 + 0.25 * hash(id, 5);\n      for (let dy = -2; dy \u003c= 2; dy++)\n        for (let dx = -3; dx \u003c= 3; dx++) {\n          const px = Math.round(lx + dx);\n          const py = y - 1 + dy;\n          if (px \u003c 0 || px >= W || py \u003c EAVE || py >= GY || (dx / big) ** 2 + ((dy + 0.3) / (big * 0.8)) ** 2 > 1) continue;\n          set(py * W + px, LEAF, 0.26 * g, 0.62 * g, 0.2 * g);\n          leaf[py * W + px] = 6.28 * hash(id, 6) + 0.01;\n        }\n    }\n  }\n  // The bracket: arm, brace, scroll, wall plate.\n  const iron = (x, y) => set(y * W + x, IRON, 0.6, 0.55, 0.5);\n  for (const [x0, y0, x1, y1] of [[5, 22, 36, 21], [5, 23, 36, 22], [6, 31, 24, 23]]) {\n    const n = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0));\n    for (let i = 0; i \u003c= n; i++) iron(Math.round(x0 + ((x1 - x0) * i) / n), Math.round(y0 + ((y1 - y0) * i) / n));\n  }\n  for (let a = 0; a \u003c 11; a += 0.15) iron(Math.round(14 + (3.6 - 0.3 * a) * Math.cos(a)), Math.round(26.5 - (3.6 - 0.3 * a) * Math.sin(a)));\n  for (let y = 19; y \u003c 34; y++) for (let x = 3; x \u003c 6; x++) iron(x, y);\n  // The night: blue, the strongest channel, is a smooth glow with a little\n  // grain and the other two scatter under it, never past 24.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const k = kind[p];\n    let sky = 17 + 3.5 * Math.sin(x * 0.07 + y * 0.045) + 2.5 * Math.sin(y * 0.031 - x * 0.05 + 1);\n    if (k === GAP || k === IRON || k === ROOF) sky -= 5;\n    if (k === AIR) sky = 7 + 0.6 * y;\n    const b = clamp(Math.round(sky) + Math.floor(7 * hash(p, 33)) - 3, 1, 24);\n    for (let c = 0; c \u003c 3; c++) P.jit[p * 3 + c] = hash(p, 40 + c) - 0.1;\n    put(dark, p * 3, Math.floor((b + 1) * hash(p, 30) * (k === AIR ? 0.7 : 1)), Math.floor((b + 1) * hash(p, 32) * (k === AIR ? 0.8 : 1)), b);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.leaf = new Float32Array(N);\n  for (const k of [\"alb\", \"dark\", \"buf\", \"jit\"]) P[k] = new Float32Array(N * 3);\n  for (const k of [\"x\", \"y\", \"h\", \"sp\", \"t\", \"ph\", \"fw\", \"al\", \"bias\", \"u\", \"v\", \"wait\"]) P[k] = new Float32Array(MAXM);\n  for (const k of [\"mode\", \"big\", \"tint\"]) P[k] = new Uint8Array(MAXM);\n  P.kind = new Uint8Array(N);\n  P.side = new Int8Array(MAXM);\n  build(P);\n  for (let i = 0; i \u003c MAXM; i++) P.wait[i] = rnd() * 3;\n  Object.assign(P, { T: 0, started: false, om: 0, cloud: 0, flick: -1, lamp: 1, gain: 1, reach: E0, damp: 0, breeze: 0, bat: null, lc: [1, 0.7, 0.4] });\n  P.nextBat = 16 + 10 * rnd();\n  aim(P, 0);\n}\n\n// Where the lantern hangs now: the bulb, and the lantern's own axes.\nfunction aim(P, th) {\n  P.th = th;\n  P.c = Math.cos(th);\n  P.s = Math.sin(th);\n  P.bx = PX + BV * P.s;\n  P.by = PY + BV * P.c;\n}\n\n// A point in the lantern's frame (u across, v down from the hook) on the panel.\nconst lx = (P, u, v) => PX + u * P.c + v * P.s;\nconst ly = (P, u, v) => PY - u * P.s + v * P.c;\n\n// A moth comes in from an edge, or is near the lamp when the night opens.\nfunction arrive(P, i, near) {\n  const { x: X, y: Y, h: A } = P;\n  P.mode[i] = 1;\n  P.side[i] = rnd() \u003c 0.5 ? -1 : 1;\n  P.big[i] = rnd() \u003c 0.25 ? 1 : 0;\n  P.tint[i] = Math.floor(rnd() * 4);\n  P.al[i] = 0.65 + 0.35 * rnd();\n  P.sp[i] = 0.8 + 0.4 * rnd();\n  P.fw[i] = 7 + 5 * rnd();\n  P.bias[i] = 0.15 + 0.35 * rnd();\n  if (near) {\n    const a = rnd() * 6.28;\n    const r = 7 + 22 * rnd();\n    X[i] = P.bx + r * Math.cos(a);\n    Y[i] = P.by + r * Math.sin(a) * 1.2;\n    A[i] = a + P.side[i] * 1.6;\n    return;\n  }\n  const e = rnd();\n  X[i] = e \u003c 0.35 ? -4 : e \u003c 0.7 ? W + 4 : W * rnd();\n  Y[i] = e \u003c 0.7 ? 20 + 90 * rnd() : H + 4;\n  A[i] = Math.atan2(P.by - Y[i], P.bx - X[i]) + (rnd() - 0.5);\n}\n\nfunction land(P, i, mode) {\n  P.mode[i] = mode;\n  P.t[i] = mode === 2 ? 2 + 4 * rnd() : 3 + 9 * rnd();\n  const dx = P.x[i] - PX;\n  const dy = P.y[i] - PY;\n  // On the glass it is kept in the lantern's frame, so it swings with it.\n  if (mode === 2) {\n    P.u[i] = clamp(dx * P.c - dy * P.s, -4, 4);\n    P.v[i] = clamp(dx * P.s + dy * P.c, 15, 22);\n  } else {\n    P.x[i] = Math.round(P.x[i]);\n    P.y[i] = Math.round(P.y[i]);\n  }\n}\n\nfunction takeOff(P, i, away) {\n  if (P.mode[i] === 2) {\n    P.x[i] = lx(P, P.u[i], P.v[i]);\n    P.y[i] = ly(P, P.u[i], P.v[i]);\n  }\n  P.mode[i] = away ? 4 : 1;\n  P.t[i] = away ? 0.6 + 2 * rnd() : 0;\n  P.h[i] = Math.atan2(P.y[i] - P.by, P.x[i] - P.bx) + (rnd() - 0.5) * 1.2;\n}\n\nfunction step(P, dt, want, pull, wind) {\n  const { mode: M, x: X, y: Y, h: A, t: T, ph: F, side: D, wait: Q } = P;\n  const lit = P.lamp > 0.4;\n  let onGlass = 0;\n  for (let i = 0; i \u003c MAXM; i++) if (M[i] === 2) onGlass++;\n  for (let i = 0; i \u003c MAXM; i++) {\n    let m = M[i];\n    if (m === 0) {\n      if (i \u003c want && (Q[i] -= dt) \u003c= 0) arrive(P, i, false);\n      continue;\n    }\n    if (i >= want && m !== 4) {\n      takeOff(P, i, true);\n      T[i] = 99;\n      m = 4;\n    }\n    F[i] += P.fw[i] * dt * 6.28;\n    if (m === 2 || m === 3) {\n      if ((T[i] -= dt) \u003c= 0) takeOff(P, i, rnd() \u003c 0.4);\n      continue;\n    }\n    const dx = P.bx - X[i];\n    const dy = P.by - Y[i];\n    const r = Math.sqrt(dx * dx + dy * dy) + 0.01;\n    let h = A[i];\n    // Each moth keeps its back to the light. Far off that steers it straight\n    // in; near, it holds the lamp abeam and so circles it, spiralling in by\n    // its bias until it bumps the glass.\n    if (m === 1 && lit) h += clamp(wrap(Math.atan2(dy, dx) - D[i] * (1.5708 * smooth(46, 12, r) - P.bias[i] * pull) - h), -5 * dt, 5 * dt);\n    if (m === 4 && (T[i] -= dt) \u003c= 0) M[i] = m = 1;\n    // It jinks, and now and then loops.\n    h += (rnd() - 0.5) * 7 * Math.sqrt(dt);\n    if (rnd() \u003c dt * 0.25) h += D[i] * 2.5;\n    const sp = 20 * P.sp[i] * (0.75 + 0.5 * Math.abs(Math.sin(F[i] * 0.05 + i)));\n    X[i] += Math.cos(h) * sp * dt + wind * dt;\n    Y[i] += Math.sin(h) * sp * dt;\n    A[i] = h;\n    if (lit && m === 1 && r \u003c 6) {\n      // A bump on the glass: it bounces off, or settles on the pane.\n      if (onGlass \u003c 2 && rnd() \u003c 0.2) {\n        land(P, i, 2);\n        onGlass++;\n      } else A[i] = Math.atan2(-dy, -dx) + (rnd() - 0.5) * 2;\n    } else if (lit && m === 1 && r > 9 && r \u003c 26 && Y[i] > EAVE + 1 && rnd() \u003c dt * 0.035) land(P, i, 3);\n    if (X[i] \u003c -8 || X[i] > W + 8 || Y[i] \u003c -8 || Y[i] > H + 8) {\n      M[i] = 0;\n      Q[i] = 0.5 + 3 * rnd();\n    }\n  }\n}\n\n// The flying moth nearest a point; one below the lamp counts `low` nearer.\nfunction prey(P, x, y, low, best) {\n  let q = -1;\n  for (let i = 0; i \u003c MAXM; i++) {\n    const d = P.mode[i] === 1 ? Math.hypot(P.x[i] - x, P.y[i] - y) - (P.y[i] > P.by + 4 ? low : 0) : 1e9;\n    if (d \u003c best) [best, q] = [d, i];\n  }\n  return q;\n}\n\n// The bat comes in low across the lit wall for a moth, one below the lamp first.\nfunction startBat(P) {\n  const x = rnd() \u003c 0.5 ? -8 : W + 8;\n  const y = 60 + 20 * rnd();\n  P.bat = { x, y, h: Math.atan2(P.by + 22 - y, P.bx - x), t: 0, prey: prey(P, P.bx, P.by, 8, 1e9), ph: 0 };\n}\n\nfunction flyBat(P, dt) {\n  const { bat: b, mode: M, x: X, y: Y } = P;\n  b.t += dt;\n  b.ph += dt * 44;\n  // If its moth settles it turns for the nearest one still flying.\n  if (b.prey >= 0 && M[b.prey] !== 1) b.prey = prey(P, b.x, b.y, 0, 30);\n  const q = b.prey;\n  if (q >= 0 && b.t > 0.5) {\n    b.h += clamp(wrap(Math.atan2(Y[q] - b.y, X[q] - b.x) - b.h), -6 * dt, 6 * dt);\n    if (Math.hypot(X[q] - b.x, Y[q] - b.y) \u003c 2.2) {\n      M[q] = 0;\n      P.wait[q] = 2 + 4 * rnd();\n      b.prey = -1;\n    }\n  } else b.h += 0.8 * dt;\n  b.x += Math.cos(b.h) * 45 * dt;\n  b.y += Math.sin(b.h) * 45 * dt;\n  // Moths with ears hear it coming and drop.\n  for (let i = 0; i \u003c MAXM; i++)\n    if (M[i] === 1 && i !== b.prey && Math.hypot(X[i] - b.x, Y[i] - b.y) \u003c 12) {\n      M[i] = 4;\n      P.t[i] = 0.8;\n      P.h[i] = 1.07 + rnd();\n    }\n  if (b.t > 4 || (b.t > 0.4 && (b.x \u003c -12 || b.x > W + 12 || b.y \u003c -12 || b.y > H + 12))) P.bat = null;\n}\n\n// The lantern swings on its chain toward where the wandering air leans it.\nfunction swing(P, dt, breeze) {\n  const t = P.T;\n  const gust = (0.075 + 0.06 * Math.abs(breeze)) * (Math.sin(t * 0.83) + 0.6 * Math.sin(t * 1.37 + 2) + 0.4 * Math.sin(t * 0.29 + 4));\n  P.om += (-9 * (P.th - 0.17 * breeze - gust) - 0.8 * P.om) * dt;\n  aim(P, P.th + P.om * dt);\n  P.cloud += dt * (0.08 + 0.1 * breeze);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 12, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const want = Math.round(clamp(k[2], 12, MAXM));\n  const breeze = (P.breeze = clamp(k[3], -1, 1));\n  // The lamp's colour; the bluer ones burn brighter and reach further.\n  const j = Math.min(2, Math.floor(hue * 3));\n  const f = hue * 3 - j;\n  for (let c = 0; c \u003c 3; c++) P.lc[c] = (LAMPS[j][c] * (1 - f) + LAMPS[j + 1][c] * f) / 255;\n  const blue = smooth(0.25, 0.8, hue);\n  const pull = 0.7 + 0.8 * smooth(0.3, 0.75, hue);\n  P.gain = 1 + 0.35 * blue;\n  P.reach = E0 * (1 - 0.3 * blue);\n  P.damp = (want - 12) / (MAXM - 12);\n  const wind = breeze * 7;\n  const btn = input.btnPressed || [];\n  if (btn[0] && !P.bat) startBat(P);\n  if (btn[1] && P.flick \u003c 0) P.flick = 0;\n  if (!P.started) {\n    // Five seconds of the night run before it opens.\n    P.started = true;\n    for (let i = 0; i \u003c want; i++) {\n      arrive(P, i, rnd() \u003c 0.8);\n      if (rnd() \u003c 0.2) land(P, i, 3);\n    }\n    for (let n = 0; n \u003c 150; n++) {\n      P.T += 1 / 30;\n      swing(P, 1 / 30, breeze);\n      step(P, 1 / 30, want, pull, wind);\n    }\n  }\n  const st = dt * speed;\n  P.T += st;\n  swing(P, st, breeze);\n  // The old lamp wavers; after K2 it stutters out and strikes again.\n  let lamp = 1 + 0.07 * Math.sin(P.T * 1.3) + 0.05 * Math.sin(P.T * 3.1 + 1);\n  if (P.flick >= 0) {\n    const t = (P.flick += dt);\n    lamp *= t \u003c 0.1 ? 0.2 : t \u003c 0.2 ? 1 : t \u003c 0.3 ? 0.1 : t \u003c 0.45 ? 0.7 : t \u003c 1.6 ? 0 : smooth(1.6, 3.4, t);\n    if (t > 3.4) P.flick = -1;\n  }\n  P.lamp = lamp;\n  if (P.T > P.nextBat && !P.bat) {\n    startBat(P);\n    P.nextBat = P.T + 18 + 20 * rnd();\n  }\n  if (P.bat) flyBat(P, st);\n  step(P, st, want, pull, wind);\n}\n\n// Light on the wall at a point, after the eye. A reflector under the cap\n// throws most of it down, the cap shades the wall above, less to the sides,\n// and there is a steep shoulder where the lamp's reach gives out.\nfunction wallLight(P, x, y, G) {\n  const dx = x - P.bx;\n  const dy = y - P.by;\n  const a = dx * P.c - dy * P.s;\n  const b = dx * P.s + dy * P.c;\n  const r2 = a * a + b * b;\n  const cd = b > 0 ? (b * b) / (r2 + 1) : 0;\n  const q = 1 + r2 / 256;\n  const l = (0.06 + 0.94 * cd * cd) / (q * Math.sqrt(q));\n  if (l \u003c= P.reach * P.reach) return 0;\n  const s = Math.sqrt(l * (0.12 + 0.88 * clamp(0.5 + (b + 6 + 0.45 * Math.abs(a)) / (2 + 0.08 * Math.sqrt(r2)), 0, 1))) - P.reach;\n  return s > 0 ? Math.pow(s, 0.7) * G : 0;\n}\n\n// Light on a moth or the iron at r from the bulb.\nconst near = (P, r) => (1.5 * P.lamp) / (1 + (r * r) / 121);\n\nfunction splat(buf, x, y, k, col) {\n  const x0 = Math.floor(x);\n  const y0 = Math.floor(y);\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const w = k * (i ? x - x0 : 1 - x + x0) * (j ? y - y0 : 1 - y + y0);\n      const q = (py * W + px) * 3;\n      put(buf, q, buf[q] + col[0] * w, buf[q + 1] + col[1] * w, buf[q + 2] + col[2] * w);\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const { buf, alb, dark, kind, leaf, lc, lamp, jit } = P;\n  const G = 2.5 * lamp * P.gain;\n  // The lantern's place, in a small object the loops read fast.\n  const L = (P.L = { bx: P.bx, by: P.by, c: P.c, s: P.s, reach: P.reach });\n  // The damp air glows round the glass.\n  const hk = lamp * P.gain * (26 + 60 * P.damp);\n  const hr = 1 / (30 + 140 * P.damp);\n  const gfar = (hk / 1.5 - 1) / hr;\n  // Clouds run past the moon, lit by it.\n  const cloud = (x, y) => smooth(0.45, 0.75, 0.6 * noise(x * 0.06 + P.cloud, y * 0.25 + 3) + 0.4 * noise((x * 0.06 + P.cloud) * 2.3 + 7, (y * 0.25 + 3) * 2.1 + 5));\n  const veil = cloud(MX, MY);\n  // The pool of light on the setts, under the lantern's axis.\n  const pcx = P.bx + ((GY - P.by) * P.s) / P.c;\n  const flut = 0.15 + 0.5 * Math.abs(P.breeze);\n  const T5 = P.T * 5;\n  const [lc0, lc1, lc2] = lc;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const q = p * 3;\n    if (y \u003c SKY) {\n      const dm = (x - MX) ** 2 + (y - MY) ** 2;\n      let s = cloud(x, y) * (8 + 80 / (1 + dm / 70)) + (36 * (1 - 0.6 * veil)) / (1 + dm / 12);\n      if (dm \u003c MR * MR) s += 200 * (1 - 0.75 * veil) * (1 - (0.15 * Math.sqrt(dm)) / MR);\n      put(buf, q, dark[q] + 0.8 * s, dark[q + 1] + 0.86 * s, dark[q + 2] + s);\n      continue;\n    }\n    const k = kind[p];\n    let v;\n    if (y \u003c GY) {\n      v = wallLight(L, x + 0.5, y + 0.5, G);\n      if (k === LEAF) v *= leaf[p] ? 1.5 + flut * Math.sin(T5 + leaf[p]) : 1.5;\n      else if (k === IRON) v = kind[p + W] !== IRON ? 0.45 * near(P, Math.hypot(x - P.bx, y - P.by)) : 0;\n    } else {\n      const ex = (x - pcx) / 13;\n      const ez = (y - GY - 6) / 6;\n      v = lamp * Math.max(0, 0.75 * Math.exp(-ex * ex - ez * ez) - 0.02) * (0.7 + 0.3 * smooth(GY, GY + 4, y));\n    }\n    const d2 = (x + 0.5 - L.bx) ** 2 + (y + 0.5 - L.by) ** 2;\n    const glow = d2 \u003c gfar ? hk / (1 + d2 * hr) - 1.5 : 0;\n    v *= 255;\n    buf[q] = dark[q] + (alb[q] * v + glow) * lc0;\n    buf[q + 1] = dark[q + 1] + (alb[q + 1] * v + glow) * lc1;\n    buf[q + 2] = dark[q + 2] + (alb[q + 2] * v + glow) * lc2;\n  }\n  drawLantern(P);\n  drawMoths(P);\n  if (P.bat) drawBat(P);\n  // The weaker channels scatter up a little, under the strongest.\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    let r = knee(buf[q]);\n    let g = knee(buf[q + 1]);\n    let b = knee(buf[q + 2]);\n    const m = Math.max(r, g, b);\n    const j = Math.min(50, 0.5 * m);\n    if (r \u003c m) r = Math.min(m - 1, r + j * jit[q]);\n    if (g \u003c m) g = Math.min(m - 1, g + j * jit[q + 1]);\n    if (b \u003c m) b = Math.min(m - 1, b + j * jit[q + 2]);\n    display.setPixel(p % W, (p / W) | 0, r, g, b);\n  }\n}\n\n// The lantern in its own frame: chain, knob, cap with its rim lit from inside,\n// glass brightest round the bulb, base and finial.\nfunction drawLantern(P) {\n  const { buf, lc, lamp } = P;\n  for (let y = PY - 1; y \u003c PY + 32; y++)\n    for (let x = PX - 14; x \u003c PX + 14; x++) {\n      const dx = x + 0.5 - PX;\n      const dy = y + 0.5 - PY;\n      const u = dx * P.c - dy * P.s;\n      const v = dx * P.s + dy * P.c;\n      const au = Math.abs(u);\n      const q = (y * W + x) * 3;\n      let e = -1;\n      if (v >= 0 && v \u003c 6 && au \u003c 0.6) e = 6 + near(P, BV - v) * (Math.floor(v) % 2 ? 40 : 18);\n      else if (v >= 6 && v \u003c 8 && au \u003c 1.3) e = 12;\n      else if (v >= 8 && v \u003c 12.5 && au \u003c 1.5 + (v - 8) * 1.25) {\n        const rim = v > 11.5 ? 0.5 * lamp : 0.03;\n        put(buf, q, 18 + 255 * lc[0] * rim, 16 + 255 * lc[1] * rim, 14 + 255 * lc[2] * rim);\n      } else if (v >= 12.5 && v \u003c 24 && au \u003c 6 - (v - 12.5) * 0.15) {\n        if (au > 5.1 - (v - 12.5) * 0.15 || au \u003c 0.45 || v > 22.8) e = 20;\n        else {\n          const gl = Math.exp(-(u * u) / 14 - ((v - BV) * (v - BV)) / 20);\n          const s = lamp * (0.62 + 0.45 * gl);\n          const t = gl * lamp;\n          put(buf, q, 255 * Math.min(1.2, lc[0] * s + 0.25 * t), 255 * Math.min(1.2, lc[1] * s + 0.2 * t), 255 * Math.min(1.2, lc[2] * s + 0.15 * t));\n        }\n      } else if (v >= 24 && v \u003c 25.5 && au \u003c 3.8) e = 16;\n      else if (v >= 25.5 && v \u003c 27.5 && au \u003c 1) e = 13;\n      if (e >= 0) put(buf, q, e, e, e);\n    }\n}\n\nfunction drawMoths(P) {\n  const { buf, lc, mode: M, x: X, y: Y, u: U, v: V, ph: F, big: B } = P;\n  for (let i = 0; i \u003c MAXM; i++) {\n    const m = M[i];\n    if (!m) continue;\n    const x = m === 2 ? lx(P, U[i], V[i]) : X[i];\n    const y = m === 2 ? ly(P, U[i], V[i]) : Y[i];\n    const r = Math.hypot(x - P.bx, y - P.by);\n    const tn = TINTS[P.tint[i]];\n    // In flight it is nearer the bulb than the wall and shines brighter; at\n    // rest it is lit as the wall is.\n    const L = (m === 3 ? 1.25 * wallLight(P.L, x, y, 2.5 * P.lamp * P.gain) : 1.8 * near(P, r)) * P.al[i] * 255;\n    const col = [L * tn[0] * lc[0], L * tn[1] * lc[1], L * tn[2] * lc[2]];\n    if (m === 2 || m === 3) {\n      // At rest: dark on the glass; on the wall lit as the bricks, with a\n      // shadow a step out from the lamp.\n      const xi = Math.round(x);\n      const yi = Math.round(y);\n      const flick = Math.sin(F[i] * 0.3) > 0.97 ? 0.6 : 1;\n      // The wings swept back in a triangle from the head, the body dimmer.\n      const R = 1 + B[i];\n      for (let oy = -R; oy \u003c 2; oy++)\n        for (let ox = -oy - R; ox \u003c= oy + R; ox++) {\n          const px = xi + ox;\n          const py = yi + oy;\n          if ((oy === 1 && !ox) || px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n          const q = (py * W + px) * 3;\n          const a = (ox ? 1 - 0.06 * Math.abs(ox) : 0.72) * flick;\n          if (m === 2) dim(buf, q, ox ? 0.35 : 0.15);\n          else put(buf, q, Math.max(buf[q] * 0.85, col[0] * a), Math.max(buf[q + 1] * 0.85, col[1] * a), Math.max(buf[q + 2] * 0.85, col[2] * a));\n        }\n      const sx = xi + Math.round(((x - P.bx) / (r + 0.01)) * 1.4);\n      const sy = yi + Math.round(((y - P.by) / (r + 0.01)) * 1.4) + 1;\n      if (m === 3 && sx >= 0 && sx \u003c W && sy >= EAVE && sy \u003c GY) dim(buf, (sy * W + sx) * 3, 0.5);\n      continue;\n    }\n    // In flight: the body and two wings beating, fore and hind.\n    const o = Math.abs(Math.sin(F[i]));\n    const nx = -Math.sin(P.h[i]);\n    const ny = Math.cos(P.h[i]);\n    const span = (1.3 + 0.6 * B[i]) * (0.4 + 0.6 * o);\n    const wv = 0.3 + 0.7 * o;\n    splat(buf, x - 0.5, y - 0.5, 0.6, col);\n    for (const sd of [1, -1]) {\n      const ax = x - 0.5 + sd * nx * span;\n      const ay = y - 0.5 + sd * ny * span;\n      splat(buf, ax + ny * 0.4, ay - nx * 0.4, wv, col);\n      splat(buf, ax * 0.6 + (x - 0.5) * 0.4 - ny * 0.5, ay * 0.6 + (y - 0.5) * 0.4 + nx * 0.5, wv * 0.6, col);\n    }\n  }\n}\n\n// The bat: dark, wings beating, the light glowing through them near the lamp.\nfunction drawBat(P) {\n  const { buf, lc } = P;\n  const b = P.bat;\n  const lit = near(P, Math.hypot(b.x - P.bx, b.y - P.by)) * 0.6 * 255;\n  for (let dx = -5; dx \u003c= 5; dx++) {\n    const ad = Math.abs(dx);\n    const lift = Math.sin(b.ph) * (ad - 1) * 0.7;\n    const y1 = ad > 1 ? Math.round(-lift + (ad \u003c 4 ? 1 : 0.4) - (ad % 2 ? 0 : 0.5)) : 1;\n    for (let dy = ad > 1 ? Math.round(-lift - 0.3) : ad === 1 ? -2 : -1; dy \u003c= y1; dy++) {\n      const px = Math.round(b.x + dx);\n      const py = Math.round(b.y + dy);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const q = (py * W + px) * 3;\n      const k = ad > 1 ? lit : lit * 0.3;\n      put(buf, q, buf[q] * 0.1 + k * lc[0] * 0.85, buf[q + 1] * 0.1 + k * lc[1] * 0.42, buf[q + 2] * 0.1 + k * lc[2] * 0.25);\n    }\n  }\n}\n\n// Where the light piles up it rolls off instead of clipping flat.\nconst knee = (c) => (c \u003c 180 ? c : 180 + 75 * (1 - Math.exp(-(c - 180) / 75)));\n","layer":{"id":"layer-moth-lamp","type":"code","name":"moth-lamp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Moth Lamp\n// Family:  insect\n// Idea:    An old lantern hangs on its chain under the eaves of a brick house on a summer night; moths spiral in out of the dark, circle it, bump the glass, rest on the panes and the lit bricks and flutter off, and now and then a bat takes one.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after Fabian, Sondhi, Allen, Lin and Lin, Why flying insects gather at artificial light (Nature Communications, 2024)\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Moths=12..120, Breeze=-1..1\n//\n// Knob 1: Lamp. Sodium gold at 0, a warm old bulb, mercury blue-white, a cold LED at 1; the bluer lamps burn brighter, reach further and pull the moths in tighter.\n// Knob 2: Speed. At 2 a moth flies about twenty LEDs a second and rounds the lamp in two or three, and the lantern swings once in two seconds.\n// Knob 3: Moths. Twelve to 120; the damp nights that bring them out also haze the air, so the glow round the lamp grows with them.\n// Knob 4: Breeze. A breath of air at 0.06; either way the lantern leans and swings harder, the moths drift downwind, the clouds run faster and the ivy shivers.\n// Buttons: K1 tap sends a bat after a moth; the moths that hear it dive. K2 tap makes the old lamp stutter out and strike again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The hook, and how far down the chain the bulb burns.\nconst PX = 36;\nconst PY = 22;\nconst BV = 18.5;\n// Rows: the roof, the wall under the gutter, the pavement.\nconst SKY = 13;\nconst EAVE = 18;\nconst GY = 114;\n// The moon.\nconst MX = 52;\nconst MY = 6;\nconst MR = 3.6;\nconst MAXM = 120;\n// Where the lamp's reach gives out on the wall.\nconst E0 = 0.175;\n\n// Sodium gold, an old warm bulb, mercury blue-white, a cold LED.\nconst LAMPS = [[255, 184, 96], [255, 212, 150], [160, 224, 242], [222, 234, 255]];\n// Moths: pale buff, white, straw, tan.\nconst TINTS = [[1, 0.9, 0.72], [1, 1, 0.96], [1, 0.94, 0.6], [0.86, 0.7, 0.5]];\n// Old bricks: red, yellow stocks, a few grey ones, the ghost of limewash.\nconst BRICKS = [[0.74, 0.4, 0.3], [0.78, 0.62, 0.4], [0.5, 0.48, 0.5], [0.85, 0.8, 0.72]];\n// What each LED of the scene is.\nconst [BRICK, MORTAR, LEAF, STONE, GAP, IRON, AIR, ROOF] = [0, 1, 2, 3, 4, 5, 6, 7];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => (v = clamp((v - a) / (b - a), 0, 1)) * v * (3 - 2 * v);\nconst wrap = (a) => a - 6.2832 * Math.round(a / 6.2832);\nconst rnd = () => Math.random();\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const u = (x - xi) ** 2 * (3 - 2 * (x - xi));\n  const v = (y - yi) ** 2 * (3 - 2 * (y - yi));\n  const a = hash(xi, yi);\n  const b = hash(xi + 1, yi);\n  const c = hash(xi, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(xi + 1, yi + 1)) * u * v;\n}\n\nfunction put(buf, q, r, g, b) {\n  buf[q] = r;\n  buf[q + 1] = g;\n  buf[q + 2] = b;\n}\n\nconst dim = (buf, q, k) => put(buf, q, buf[q] * k, buf[q + 1] * k, buf[q + 2] * k);\n\nfunction build(P) {\n  const { kind, alb, dark, leaf } = P;\n  const set = (p, k, r, g, b) => {\n    kind[p] = k;\n    put(alb, p * 3, r, g, b);\n  };\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    if (y \u003c SKY) set(p, AIR, 0, 0, 0);\n    else if (y \u003c EAVE - 1) {\n      // Roof tiles, a ridge every four LEDs.\n      const s = (x + (y % 2) * 2) % 4 === 0 ? 0.12 : 0.28 + 0.06 * hash(x >> 2, y);\n      set(p, ROOF, s * 1.1, s * 0.75, s * 0.65);\n    } else if (y === EAVE - 1) set(p, IRON, 0.6, 0.55, 0.5);\n    else if (y \u003c GY) {\n      // Bricks six LEDs long and two high, each course set over by three.\n      // The joints are worn back deep and stay in shadow.\n      const course = Math.floor(y / 3);\n      const off = course % 2 ? 3 : 0;\n      const col = Math.floor((x + off) / 7);\n      const kb = hash(col, course + 70);\n      const bc = BRICKS[kb \u003c 0.55 ? 0 : kb \u003c 0.78 ? 1 : kb \u003c 0.88 ? 2 : 3];\n      const t = (0.7 + 0.3 * hash(col, course + 50) - (hash(col, course + 90) \u003c 0.12 ? 0.25 : 0)) * (0.7 + 0.6 * hash(p, 3));\n      if (y % 3 === 2 || (x + off) % 7 === 6) set(p, MORTAR, 0.17, 0.16, 0.15);\n      else set(p, BRICK, bc[0] * t, bc[1] * t, bc[2] * t);\n    } else {\n      // Setts, the rows growing toward us.\n      const d = y - GY;\n      const rows = [0, 2, 4, 7, 10, 14];\n      let r = 0;\n      while (r \u003c 4 && d >= rows[r + 1]) r++;\n      const v = (d - rows[r]) / (rows[r + 1] - rows[r]);\n      const sw = 5 + r;\n      const xo = (r % 2) * (sw >> 1);\n      const u = ((x + xo) % sw) / sw;\n      const s = (0.6 + 0.25 * hash(Math.floor((x + xo) / sw), r + 20)) * clamp(1 - 1.4 * ((u - 0.42) ** 2 + (v - 0.35) ** 2), 0.4, 1);\n      if (v > 0.8 || u > 0.84) set(p, GAP, 0.1, 0.1, 0.1);\n      else set(p, STONE, 0.66 * s, 0.64 * s, 0.6 * s);\n    }\n  }\n  // Ivy up the wall toward the lamp, a leaf every third row.\n  for (const [x0, y0, x1, y1, s] of [[59, GY, 50, 34, 0], [56, 76, 44, 50, 1], [61, 56, 63, 30, 2]]) {\n    const len = Math.abs(y1 - y0);\n    for (let i = 0; i \u003c= len; i++) {\n      const y = Math.round(y0 + ((y1 - y0) * i) / len);\n      const x = x0 + ((x1 - x0) * i) / len + 1.6 * Math.sin(i * 0.31 + s);\n      if (Math.round(x) \u003c W) set(y * W + Math.round(x), LEAF, 0.22, 0.3, 0.12);\n      if (i % 3) continue;\n      const lx = x + ((i / 3) % 2 ? 2.2 : -2.2);\n      const id = i * 7 + s * 131;\n      const big = 1.3 + 0.7 * hash(id, 4);\n      const g = 0.75 + 0.25 * hash(id, 5);\n      for (let dy = -2; dy \u003c= 2; dy++)\n        for (let dx = -3; dx \u003c= 3; dx++) {\n          const px = Math.round(lx + dx);\n          const py = y - 1 + dy;\n          if (px \u003c 0 || px >= W || py \u003c EAVE || py >= GY || (dx / big) ** 2 + ((dy + 0.3) / (big * 0.8)) ** 2 > 1) continue;\n          set(py * W + px, LEAF, 0.26 * g, 0.62 * g, 0.2 * g);\n          leaf[py * W + px] = 6.28 * hash(id, 6) + 0.01;\n        }\n    }\n  }\n  // The bracket: arm, brace, scroll, wall plate.\n  const iron = (x, y) => set(y * W + x, IRON, 0.6, 0.55, 0.5);\n  for (const [x0, y0, x1, y1] of [[5, 22, 36, 21], [5, 23, 36, 22], [6, 31, 24, 23]]) {\n    const n = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0));\n    for (let i = 0; i \u003c= n; i++) iron(Math.round(x0 + ((x1 - x0) * i) / n), Math.round(y0 + ((y1 - y0) * i) / n));\n  }\n  for (let a = 0; a \u003c 11; a += 0.15) iron(Math.round(14 + (3.6 - 0.3 * a) * Math.cos(a)), Math.round(26.5 - (3.6 - 0.3 * a) * Math.sin(a)));\n  for (let y = 19; y \u003c 34; y++) for (let x = 3; x \u003c 6; x++) iron(x, y);\n  // The night: blue, the strongest channel, is a smooth glow with a little\n  // grain and the other two scatter under it, never past 24.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const k = kind[p];\n    let sky = 17 + 3.5 * Math.sin(x * 0.07 + y * 0.045) + 2.5 * Math.sin(y * 0.031 - x * 0.05 + 1);\n    if (k === GAP || k === IRON || k === ROOF) sky -= 5;\n    if (k === AIR) sky = 7 + 0.6 * y;\n    const b = clamp(Math.round(sky) + Math.floor(7 * hash(p, 33)) - 3, 1, 24);\n    for (let c = 0; c \u003c 3; c++) P.jit[p * 3 + c] = hash(p, 40 + c) - 0.1;\n    put(dark, p * 3, Math.floor((b + 1) * hash(p, 30) * (k === AIR ? 0.7 : 1)), Math.floor((b + 1) * hash(p, 32) * (k === AIR ? 0.8 : 1)), b);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.leaf = new Float32Array(N);\n  for (const k of [\"alb\", \"dark\", \"buf\", \"jit\"]) P[k] = new Float32Array(N * 3);\n  for (const k of [\"x\", \"y\", \"h\", \"sp\", \"t\", \"ph\", \"fw\", \"al\", \"bias\", \"u\", \"v\", \"wait\"]) P[k] = new Float32Array(MAXM);\n  for (const k of [\"mode\", \"big\", \"tint\"]) P[k] = new Uint8Array(MAXM);\n  P.kind = new Uint8Array(N);\n  P.side = new Int8Array(MAXM);\n  build(P);\n  for (let i = 0; i \u003c MAXM; i++) P.wait[i] = rnd() * 3;\n  Object.assign(P, { T: 0, started: false, om: 0, cloud: 0, flick: -1, lamp: 1, gain: 1, reach: E0, damp: 0, breeze: 0, bat: null, lc: [1, 0.7, 0.4] });\n  P.nextBat = 16 + 10 * rnd();\n  aim(P, 0);\n}\n\n// Where the lantern hangs now: the bulb, and the lantern's own axes.\nfunction aim(P, th) {\n  P.th = th;\n  P.c = Math.cos(th);\n  P.s = Math.sin(th);\n  P.bx = PX + BV * P.s;\n  P.by = PY + BV * P.c;\n}\n\n// A point in the lantern's frame (u across, v down from the hook) on the panel.\nconst lx = (P, u, v) => PX + u * P.c + v * P.s;\nconst ly = (P, u, v) => PY - u * P.s + v * P.c;\n\n// A moth comes in from an edge, or is near the lamp when the night opens.\nfunction arrive(P, i, near) {\n  const { x: X, y: Y, h: A } = P;\n  P.mode[i] = 1;\n  P.side[i] = rnd() \u003c 0.5 ? -1 : 1;\n  P.big[i] = rnd() \u003c 0.25 ? 1 : 0;\n  P.tint[i] = Math.floor(rnd() * 4);\n  P.al[i] = 0.65 + 0.35 * rnd();\n  P.sp[i] = 0.8 + 0.4 * rnd();\n  P.fw[i] = 7 + 5 * rnd();\n  P.bias[i] = 0.15 + 0.35 * rnd();\n  if (near) {\n    const a = rnd() * 6.28;\n    const r = 7 + 22 * rnd();\n    X[i] = P.bx + r * Math.cos(a);\n    Y[i] = P.by + r * Math.sin(a) * 1.2;\n    A[i] = a + P.side[i] * 1.6;\n    return;\n  }\n  const e = rnd();\n  X[i] = e \u003c 0.35 ? -4 : e \u003c 0.7 ? W + 4 : W * rnd();\n  Y[i] = e \u003c 0.7 ? 20 + 90 * rnd() : H + 4;\n  A[i] = Math.atan2(P.by - Y[i], P.bx - X[i]) + (rnd() - 0.5);\n}\n\nfunction land(P, i, mode) {\n  P.mode[i] = mode;\n  P.t[i] = mode === 2 ? 2 + 4 * rnd() : 3 + 9 * rnd();\n  const dx = P.x[i] - PX;\n  const dy = P.y[i] - PY;\n  // On the glass it is kept in the lantern's frame, so it swings with it.\n  if (mode === 2) {\n    P.u[i] = clamp(dx * P.c - dy * P.s, -4, 4);\n    P.v[i] = clamp(dx * P.s + dy * P.c, 15, 22);\n  } else {\n    P.x[i] = Math.round(P.x[i]);\n    P.y[i] = Math.round(P.y[i]);\n  }\n}\n\nfunction takeOff(P, i, away) {\n  if (P.mode[i] === 2) {\n    P.x[i] = lx(P, P.u[i], P.v[i]);\n    P.y[i] = ly(P, P.u[i], P.v[i]);\n  }\n  P.mode[i] = away ? 4 : 1;\n  P.t[i] = away ? 0.6 + 2 * rnd() : 0;\n  P.h[i] = Math.atan2(P.y[i] - P.by, P.x[i] - P.bx) + (rnd() - 0.5) * 1.2;\n}\n\nfunction step(P, dt, want, pull, wind) {\n  const { mode: M, x: X, y: Y, h: A, t: T, ph: F, side: D, wait: Q } = P;\n  const lit = P.lamp > 0.4;\n  let onGlass = 0;\n  for (let i = 0; i \u003c MAXM; i++) if (M[i] === 2) onGlass++;\n  for (let i = 0; i \u003c MAXM; i++) {\n    let m = M[i];\n    if (m === 0) {\n      if (i \u003c want && (Q[i] -= dt) \u003c= 0) arrive(P, i, false);\n      continue;\n    }\n    if (i >= want && m !== 4) {\n      takeOff(P, i, true);\n      T[i] = 99;\n      m = 4;\n    }\n    F[i] += P.fw[i] * dt * 6.28;\n    if (m === 2 || m === 3) {\n      if ((T[i] -= dt) \u003c= 0) takeOff(P, i, rnd() \u003c 0.4);\n      continue;\n    }\n    const dx = P.bx - X[i];\n    const dy = P.by - Y[i];\n    const r = Math.sqrt(dx * dx + dy * dy) + 0.01;\n    let h = A[i];\n    // Each moth keeps its back to the light. Far off that steers it straight\n    // in; near, it holds the lamp abeam and so circles it, spiralling in by\n    // its bias until it bumps the glass.\n    if (m === 1 && lit) h += clamp(wrap(Math.atan2(dy, dx) - D[i] * (1.5708 * smooth(46, 12, r) - P.bias[i] * pull) - h), -5 * dt, 5 * dt);\n    if (m === 4 && (T[i] -= dt) \u003c= 0) M[i] = m = 1;\n    // It jinks, and now and then loops.\n    h += (rnd() - 0.5) * 7 * Math.sqrt(dt);\n    if (rnd() \u003c dt * 0.25) h += D[i] * 2.5;\n    const sp = 20 * P.sp[i] * (0.75 + 0.5 * Math.abs(Math.sin(F[i] * 0.05 + i)));\n    X[i] += Math.cos(h) * sp * dt + wind * dt;\n    Y[i] += Math.sin(h) * sp * dt;\n    A[i] = h;\n    if (lit && m === 1 && r \u003c 6) {\n      // A bump on the glass: it bounces off, or settles on the pane.\n      if (onGlass \u003c 2 && rnd() \u003c 0.2) {\n        land(P, i, 2);\n        onGlass++;\n      } else A[i] = Math.atan2(-dy, -dx) + (rnd() - 0.5) * 2;\n    } else if (lit && m === 1 && r > 9 && r \u003c 26 && Y[i] > EAVE + 1 && rnd() \u003c dt * 0.035) land(P, i, 3);\n    if (X[i] \u003c -8 || X[i] > W + 8 || Y[i] \u003c -8 || Y[i] > H + 8) {\n      M[i] = 0;\n      Q[i] = 0.5 + 3 * rnd();\n    }\n  }\n}\n\n// The flying moth nearest a point; one below the lamp counts `low` nearer.\nfunction prey(P, x, y, low, best) {\n  let q = -1;\n  for (let i = 0; i \u003c MAXM; i++) {\n    const d = P.mode[i] === 1 ? Math.hypot(P.x[i] - x, P.y[i] - y) - (P.y[i] > P.by + 4 ? low : 0) : 1e9;\n    if (d \u003c best) [best, q] = [d, i];\n  }\n  return q;\n}\n\n// The bat comes in low across the lit wall for a moth, one below the lamp first.\nfunction startBat(P) {\n  const x = rnd() \u003c 0.5 ? -8 : W + 8;\n  const y = 60 + 20 * rnd();\n  P.bat = { x, y, h: Math.atan2(P.by + 22 - y, P.bx - x), t: 0, prey: prey(P, P.bx, P.by, 8, 1e9), ph: 0 };\n}\n\nfunction flyBat(P, dt) {\n  const { bat: b, mode: M, x: X, y: Y } = P;\n  b.t += dt;\n  b.ph += dt * 44;\n  // If its moth settles it turns for the nearest one still flying.\n  if (b.prey >= 0 && M[b.prey] !== 1) b.prey = prey(P, b.x, b.y, 0, 30);\n  const q = b.prey;\n  if (q >= 0 && b.t > 0.5) {\n    b.h += clamp(wrap(Math.atan2(Y[q] - b.y, X[q] - b.x) - b.h), -6 * dt, 6 * dt);\n    if (Math.hypot(X[q] - b.x, Y[q] - b.y) \u003c 2.2) {\n      M[q] = 0;\n      P.wait[q] = 2 + 4 * rnd();\n      b.prey = -1;\n    }\n  } else b.h += 0.8 * dt;\n  b.x += Math.cos(b.h) * 45 * dt;\n  b.y += Math.sin(b.h) * 45 * dt;\n  // Moths with ears hear it coming and drop.\n  for (let i = 0; i \u003c MAXM; i++)\n    if (M[i] === 1 && i !== b.prey && Math.hypot(X[i] - b.x, Y[i] - b.y) \u003c 12) {\n      M[i] = 4;\n      P.t[i] = 0.8;\n      P.h[i] = 1.07 + rnd();\n    }\n  if (b.t > 4 || (b.t > 0.4 && (b.x \u003c -12 || b.x > W + 12 || b.y \u003c -12 || b.y > H + 12))) P.bat = null;\n}\n\n// The lantern swings on its chain toward where the wandering air leans it.\nfunction swing(P, dt, breeze) {\n  const t = P.T;\n  const gust = (0.075 + 0.06 * Math.abs(breeze)) * (Math.sin(t * 0.83) + 0.6 * Math.sin(t * 1.37 + 2) + 0.4 * Math.sin(t * 0.29 + 4));\n  P.om += (-9 * (P.th - 0.17 * breeze - gust) - 0.8 * P.om) * dt;\n  aim(P, P.th + P.om * dt);\n  P.cloud += dt * (0.08 + 0.1 * breeze);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 12, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const want = Math.round(clamp(k[2], 12, MAXM));\n  const breeze = (P.breeze = clamp(k[3], -1, 1));\n  // The lamp's colour; the bluer ones burn brighter and reach further.\n  const j = Math.min(2, Math.floor(hue * 3));\n  const f = hue * 3 - j;\n  for (let c = 0; c \u003c 3; c++) P.lc[c] = (LAMPS[j][c] * (1 - f) + LAMPS[j + 1][c] * f) / 255;\n  const blue = smooth(0.25, 0.8, hue);\n  const pull = 0.7 + 0.8 * smooth(0.3, 0.75, hue);\n  P.gain = 1 + 0.35 * blue;\n  P.reach = E0 * (1 - 0.3 * blue);\n  P.damp = (want - 12) / (MAXM - 12);\n  const wind = breeze * 7;\n  const btn = input.btnPressed || [];\n  if (btn[0] && !P.bat) startBat(P);\n  if (btn[1] && P.flick \u003c 0) P.flick = 0;\n  if (!P.started) {\n    // Five seconds of the night run before it opens.\n    P.started = true;\n    for (let i = 0; i \u003c want; i++) {\n      arrive(P, i, rnd() \u003c 0.8);\n      if (rnd() \u003c 0.2) land(P, i, 3);\n    }\n    for (let n = 0; n \u003c 150; n++) {\n      P.T += 1 / 30;\n      swing(P, 1 / 30, breeze);\n      step(P, 1 / 30, want, pull, wind);\n    }\n  }\n  const st = dt * speed;\n  P.T += st;\n  swing(P, st, breeze);\n  // The old lamp wavers; after K2 it stutters out and strikes again.\n  let lamp = 1 + 0.07 * Math.sin(P.T * 1.3) + 0.05 * Math.sin(P.T * 3.1 + 1);\n  if (P.flick >= 0) {\n    const t = (P.flick += dt);\n    lamp *= t \u003c 0.1 ? 0.2 : t \u003c 0.2 ? 1 : t \u003c 0.3 ? 0.1 : t \u003c 0.45 ? 0.7 : t \u003c 1.6 ? 0 : smooth(1.6, 3.4, t);\n    if (t > 3.4) P.flick = -1;\n  }\n  P.lamp = lamp;\n  if (P.T > P.nextBat && !P.bat) {\n    startBat(P);\n    P.nextBat = P.T + 18 + 20 * rnd();\n  }\n  if (P.bat) flyBat(P, st);\n  step(P, st, want, pull, wind);\n}\n\n// Light on the wall at a point, after the eye. A reflector under the cap\n// throws most of it down, the cap shades the wall above, less to the sides,\n// and there is a steep shoulder where the lamp's reach gives out.\nfunction wallLight(P, x, y, G) {\n  const dx = x - P.bx;\n  const dy = y - P.by;\n  const a = dx * P.c - dy * P.s;\n  const b = dx * P.s + dy * P.c;\n  const r2 = a * a + b * b;\n  const cd = b > 0 ? (b * b) / (r2 + 1) : 0;\n  const q = 1 + r2 / 256;\n  const l = (0.06 + 0.94 * cd * cd) / (q * Math.sqrt(q));\n  if (l \u003c= P.reach * P.reach) return 0;\n  const s = Math.sqrt(l * (0.12 + 0.88 * clamp(0.5 + (b + 6 + 0.45 * Math.abs(a)) / (2 + 0.08 * Math.sqrt(r2)), 0, 1))) - P.reach;\n  return s > 0 ? Math.pow(s, 0.7) * G : 0;\n}\n\n// Light on a moth or the iron at r from the bulb.\nconst near = (P, r) => (1.5 * P.lamp) / (1 + (r * r) / 121);\n\nfunction splat(buf, x, y, k, col) {\n  const x0 = Math.floor(x);\n  const y0 = Math.floor(y);\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const w = k * (i ? x - x0 : 1 - x + x0) * (j ? y - y0 : 1 - y + y0);\n      const q = (py * W + px) * 3;\n      put(buf, q, buf[q] + col[0] * w, buf[q + 1] + col[1] * w, buf[q + 2] + col[2] * w);\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const { buf, alb, dark, kind, leaf, lc, lamp, jit } = P;\n  const G = 2.5 * lamp * P.gain;\n  // The lantern's place, in a small object the loops read fast.\n  const L = (P.L = { bx: P.bx, by: P.by, c: P.c, s: P.s, reach: P.reach });\n  // The damp air glows round the glass.\n  const hk = lamp * P.gain * (26 + 60 * P.damp);\n  const hr = 1 / (30 + 140 * P.damp);\n  const gfar = (hk / 1.5 - 1) / hr;\n  // Clouds run past the moon, lit by it.\n  const cloud = (x, y) => smooth(0.45, 0.75, 0.6 * noise(x * 0.06 + P.cloud, y * 0.25 + 3) + 0.4 * noise((x * 0.06 + P.cloud) * 2.3 + 7, (y * 0.25 + 3) * 2.1 + 5));\n  const veil = cloud(MX, MY);\n  // The pool of light on the setts, under the lantern's axis.\n  const pcx = P.bx + ((GY - P.by) * P.s) / P.c;\n  const flut = 0.15 + 0.5 * Math.abs(P.breeze);\n  const T5 = P.T * 5;\n  const [lc0, lc1, lc2] = lc;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const q = p * 3;\n    if (y \u003c SKY) {\n      const dm = (x - MX) ** 2 + (y - MY) ** 2;\n      let s = cloud(x, y) * (8 + 80 / (1 + dm / 70)) + (36 * (1 - 0.6 * veil)) / (1 + dm / 12);\n      if (dm \u003c MR * MR) s += 200 * (1 - 0.75 * veil) * (1 - (0.15 * Math.sqrt(dm)) / MR);\n      put(buf, q, dark[q] + 0.8 * s, dark[q + 1] + 0.86 * s, dark[q + 2] + s);\n      continue;\n    }\n    const k = kind[p];\n    let v;\n    if (y \u003c GY) {\n      v = wallLight(L, x + 0.5, y + 0.5, G);\n      if (k === LEAF) v *= leaf[p] ? 1.5 + flut * Math.sin(T5 + leaf[p]) : 1.5;\n      else if (k === IRON) v = kind[p + W] !== IRON ? 0.45 * near(P, Math.hypot(x - P.bx, y - P.by)) : 0;\n    } else {\n      const ex = (x - pcx) / 13;\n      const ez = (y - GY - 6) / 6;\n      v = lamp * Math.max(0, 0.75 * Math.exp(-ex * ex - ez * ez) - 0.02) * (0.7 + 0.3 * smooth(GY, GY + 4, y));\n    }\n    const d2 = (x + 0.5 - L.bx) ** 2 + (y + 0.5 - L.by) ** 2;\n    const glow = d2 \u003c gfar ? hk / (1 + d2 * hr) - 1.5 : 0;\n    v *= 255;\n    buf[q] = dark[q] + (alb[q] * v + glow) * lc0;\n    buf[q + 1] = dark[q + 1] + (alb[q + 1] * v + glow) * lc1;\n    buf[q + 2] = dark[q + 2] + (alb[q + 2] * v + glow) * lc2;\n  }\n  drawLantern(P);\n  drawMoths(P);\n  if (P.bat) drawBat(P);\n  // The weaker channels scatter up a little, under the strongest.\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    let r = knee(buf[q]);\n    let g = knee(buf[q + 1]);\n    let b = knee(buf[q + 2]);\n    const m = Math.max(r, g, b);\n    const j = Math.min(50, 0.5 * m);\n    if (r \u003c m) r = Math.min(m - 1, r + j * jit[q]);\n    if (g \u003c m) g = Math.min(m - 1, g + j * jit[q + 1]);\n    if (b \u003c m) b = Math.min(m - 1, b + j * jit[q + 2]);\n    display.setPixel(p % W, (p / W) | 0, r, g, b);\n  }\n}\n\n// The lantern in its own frame: chain, knob, cap with its rim lit from inside,\n// glass brightest round the bulb, base and finial.\nfunction drawLantern(P) {\n  const { buf, lc, lamp } = P;\n  for (let y = PY - 1; y \u003c PY + 32; y++)\n    for (let x = PX - 14; x \u003c PX + 14; x++) {\n      const dx = x + 0.5 - PX;\n      const dy = y + 0.5 - PY;\n      const u = dx * P.c - dy * P.s;\n      const v = dx * P.s + dy * P.c;\n      const au = Math.abs(u);\n      const q = (y * W + x) * 3;\n      let e = -1;\n      if (v >= 0 && v \u003c 6 && au \u003c 0.6) e = 6 + near(P, BV - v) * (Math.floor(v) % 2 ? 40 : 18);\n      else if (v >= 6 && v \u003c 8 && au \u003c 1.3) e = 12;\n      else if (v >= 8 && v \u003c 12.5 && au \u003c 1.5 + (v - 8) * 1.25) {\n        const rim = v > 11.5 ? 0.5 * lamp : 0.03;\n        put(buf, q, 18 + 255 * lc[0] * rim, 16 + 255 * lc[1] * rim, 14 + 255 * lc[2] * rim);\n      } else if (v >= 12.5 && v \u003c 24 && au \u003c 6 - (v - 12.5) * 0.15) {\n        if (au > 5.1 - (v - 12.5) * 0.15 || au \u003c 0.45 || v > 22.8) e = 20;\n        else {\n          const gl = Math.exp(-(u * u) / 14 - ((v - BV) * (v - BV)) / 20);\n          const s = lamp * (0.62 + 0.45 * gl);\n          const t = gl * lamp;\n          put(buf, q, 255 * Math.min(1.2, lc[0] * s + 0.25 * t), 255 * Math.min(1.2, lc[1] * s + 0.2 * t), 255 * Math.min(1.2, lc[2] * s + 0.15 * t));\n        }\n      } else if (v >= 24 && v \u003c 25.5 && au \u003c 3.8) e = 16;\n      else if (v >= 25.5 && v \u003c 27.5 && au \u003c 1) e = 13;\n      if (e >= 0) put(buf, q, e, e, e);\n    }\n}\n\nfunction drawMoths(P) {\n  const { buf, lc, mode: M, x: X, y: Y, u: U, v: V, ph: F, big: B } = P;\n  for (let i = 0; i \u003c MAXM; i++) {\n    const m = M[i];\n    if (!m) continue;\n    const x = m === 2 ? lx(P, U[i], V[i]) : X[i];\n    const y = m === 2 ? ly(P, U[i], V[i]) : Y[i];\n    const r = Math.hypot(x - P.bx, y - P.by);\n    const tn = TINTS[P.tint[i]];\n    // In flight it is nearer the bulb than the wall and shines brighter; at\n    // rest it is lit as the wall is.\n    const L = (m === 3 ? 1.25 * wallLight(P.L, x, y, 2.5 * P.lamp * P.gain) : 1.8 * near(P, r)) * P.al[i] * 255;\n    const col = [L * tn[0] * lc[0], L * tn[1] * lc[1], L * tn[2] * lc[2]];\n    if (m === 2 || m === 3) {\n      // At rest: dark on the glass; on the wall lit as the bricks, with a\n      // shadow a step out from the lamp.\n      const xi = Math.round(x);\n      const yi = Math.round(y);\n      const flick = Math.sin(F[i] * 0.3) > 0.97 ? 0.6 : 1;\n      // The wings swept back in a triangle from the head, the body dimmer.\n      const R = 1 + B[i];\n      for (let oy = -R; oy \u003c 2; oy++)\n        for (let ox = -oy - R; ox \u003c= oy + R; ox++) {\n          const px = xi + ox;\n          const py = yi + oy;\n          if ((oy === 1 && !ox) || px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n          const q = (py * W + px) * 3;\n          const a = (ox ? 1 - 0.06 * Math.abs(ox) : 0.72) * flick;\n          if (m === 2) dim(buf, q, ox ? 0.35 : 0.15);\n          else put(buf, q, Math.max(buf[q] * 0.85, col[0] * a), Math.max(buf[q + 1] * 0.85, col[1] * a), Math.max(buf[q + 2] * 0.85, col[2] * a));\n        }\n      const sx = xi + Math.round(((x - P.bx) / (r + 0.01)) * 1.4);\n      const sy = yi + Math.round(((y - P.by) / (r + 0.01)) * 1.4) + 1;\n      if (m === 3 && sx >= 0 && sx \u003c W && sy >= EAVE && sy \u003c GY) dim(buf, (sy * W + sx) * 3, 0.5);\n      continue;\n    }\n    // In flight: the body and two wings beating, fore and hind.\n    const o = Math.abs(Math.sin(F[i]));\n    const nx = -Math.sin(P.h[i]);\n    const ny = Math.cos(P.h[i]);\n    const span = (1.3 + 0.6 * B[i]) * (0.4 + 0.6 * o);\n    const wv = 0.3 + 0.7 * o;\n    splat(buf, x - 0.5, y - 0.5, 0.6, col);\n    for (const sd of [1, -1]) {\n      const ax = x - 0.5 + sd * nx * span;\n      const ay = y - 0.5 + sd * ny * span;\n      splat(buf, ax + ny * 0.4, ay - nx * 0.4, wv, col);\n      splat(buf, ax * 0.6 + (x - 0.5) * 0.4 - ny * 0.5, ay * 0.6 + (y - 0.5) * 0.4 + nx * 0.5, wv * 0.6, col);\n    }\n  }\n}\n\n// The bat: dark, wings beating, the light glowing through them near the lamp.\nfunction drawBat(P) {\n  const { buf, lc } = P;\n  const b = P.bat;\n  const lit = near(P, Math.hypot(b.x - P.bx, b.y - P.by)) * 0.6 * 255;\n  for (let dx = -5; dx \u003c= 5; dx++) {\n    const ad = Math.abs(dx);\n    const lift = Math.sin(b.ph) * (ad - 1) * 0.7;\n    const y1 = ad > 1 ? Math.round(-lift + (ad \u003c 4 ? 1 : 0.4) - (ad % 2 ? 0 : 0.5)) : 1;\n    for (let dy = ad > 1 ? Math.round(-lift - 0.3) : ad === 1 ? -2 : -1; dy \u003c= y1; dy++) {\n      const px = Math.round(b.x + dx);\n      const py = Math.round(b.y + dy);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const q = (py * W + px) * 3;\n      const k = ad > 1 ? lit : lit * 0.3;\n      put(buf, q, buf[q] * 0.1 + k * lc[0] * 0.85, buf[q + 1] * 0.1 + k * lc[1] * 0.42, buf[q + 2] * 0.1 + k * lc[2] * 0.25);\n    }\n  }\n}\n\n// Where the light piles up it rolls off instead of clipping flat.\nconst knee = (c) => (c \u003c 180 ? c : 180 + 75 * (1 - Math.exp(-(c - 180) / 75)));\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Speed=0.2..3, Moths=12..120, Breeze=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"Sodium gold at 0, a warm old bulb, mercury blue-white, a cold LED at 1; the bluer lamps burn brighter, reach further and pull the moths in tighter."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a moth flies about twenty LEDs a second and rounds the lamp in two or three, and the lantern swings once in two seconds."},{"name":"Moths","min":12,"max":120,"about":"Twelve to 120; the damp nights that bring them out also haze the air, so the glow round the lamp grows with them."},{"name":"Breeze","min":-1,"max":1,"about":"A breath of air at 0.06; either way the lantern leans and swings harder, the moths drift downwind, the clouds run faster and the ivy shivers."}],"start":[0,2,12,0.06],"measures":{"motion":0.1073,"detail":0.0382,"edges":0.2646,"complexity":2.2012,"coverage":0.2737,"colour":0.0944,"drift":0.0456},"knobResponse":[0.0525,0.0467,0.0451,0.0578]},{"slug":"needlepoint","title":"Needlepoint","family":"textile","round":19,"note":"슬레이트 틀의 인쇄 캔버스를 바늘이 오른쪽 위 구석부터 바스켓위브로 한 대각선씩 메워 가요. 앵무새 쿠션이나 검은 바탕의 베를린 장미, 알파벳 샘플러가 다 차면 틀이 굴러 새 캔버스를 감아 와요.","idea":"A needle and wool work a printed canvas in tent stitch on a slate frame, diagonal row after diagonal row from the top right corner, each stitch two lit LEDs across a dark hole, until a parrot cushion, a Berlin rose bouquet or an alphabet sampler is filled in and the frame rolls on a fresh canvas.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Needlepoint\n// Family:  textile\n// Idea:    A needle and wool work a printed canvas in tent stitch on a slate frame, diagonal row after diagonal row from the top right corner, each stitch two lit LEDs across a dark hole, until a parrot cushion, a Berlin rose bouquet or an alphabet sampler is filled in and the frame rolls on a fresh canvas.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after Berlin woolwork, the tent stitch pictures worked from printed charts in the nineteenth century\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Wool=0..1, Speed=0.2..3, Design=0..2, Lamp=0..1\n//\n// Knob 1: Wool. Turns every wool in the box round the dye wheel together, starting from the natural shades: a green parrot on a teal ground.\n// Knob 2: Speed. Stitches a second, 7 at 0.2, 72 at 2 and 108 at 3; at 2 the 1920 stitches of a canvas take 27 seconds.\n// Knob 3: Design. Which canvas is on the frame: the parrot cushion, the rose bouquet on black or the sampler with its alphabet and house; turning it rolls the work on to that canvas, and after it the canvases follow in that order.\n// Knob 4: Lamp. Where the lamp stands, low on the left at 0, overhead at 0.5, low on the right at 1; the side of each stitch that faces it shines and the far side of the hole falls into shadow.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The canvas is 32 stitches across and 60 down, each stitch a 2 by 2 LED cell, between the\n// slate frame's two rollers of 4 rows.\nconst SU = 32;\nconst SV = 60;\nconst NS = SU * SV;\nconst Y0 = 4;\nconst CH = SV * 2;\n// Stitches a second for each unit of Speed, the hold on a finished canvas and the roll on.\nconst RATE = 36;\nconst HOLD = 3.5;\nconst ROLL = 2.4;\nconst STITCH = 0;\nconst HOLDING = 1;\nconst ROLLING = 2;\n// A stitch's two yarn LEDs at full wool; the hole between stitches gets GAP of the wool\n// on the lamp's side and less on the other. Bare canvas threads sit near PRINT of 255,\n// the ground left plain ecru and the motifs printed in a wash of their wool.\nconst GAP = 0.15;\nconst RAKE = 0.1;\nconst SHEEN = 0.18;\nconst PRINT = 34;\n// Grain of the wool: about one fibre in four is JIT levels off in a weaker channel. The\n// strongest channel is left alone, so the grain shows as tint, not as brightness.\nconst JIT = 10;\n\n// The wool box. Index 0 is never used.\nconst WOOL = [\n  [0, 0, 0],\n  [36, 122, 170], // 1 teal ground\n  [134, 28, 46], // 2 maroon\n  [220, 170, 56], // 3 old gold\n  [30, 96, 46], // 4 dark green\n  [70, 160, 56], // 5 green\n  [154, 212, 70], // 6 light green\n  [238, 208, 52], // 7 yellow\n  [222, 54, 40], // 8 scarlet\n  [46, 76, 196], // 9 royal blue\n  [230, 222, 196], // 10 ivory\n  [44, 36, 34], // 11 near black\n  [126, 78, 40], // 12 brown\n  [80, 50, 30], // 13 dark brown\n  [240, 136, 34], // 14 orange\n  [150, 150, 164], // 15 grey\n  [34, 30, 56], // 16 Berlin black\n  [128, 18, 40], // 17 deep crimson\n  [206, 50, 82], // 18 rose\n  [238, 118, 152], // 19 pink\n  [250, 194, 210], // 20 pale pink\n  [244, 222, 120], // 21 pale yellow\n  [146, 92, 196], // 22 lilac\n  [92, 142, 226], // 23 cornflower\n  [222, 204, 156], // 24 cream ground\n  [168, 64, 40], // 25 brick\n];\nconst ECRU = [230, 220, 186];\n// The ground wool of each chart, which the printer leaves off the canvas.\nconst GROUND = [1, 16, 24];\n\n// A 3 by 5 alphabet for the sampler, and the three digits of its year.\nconst FONT = {};\n\"A010101111101101B110101110101110C011100100100011D110101101101110E111100110100111F111100110100100G011100101101011H101101111101101I111010010010111J001001001101010K101101110101101L100100100100111M101111111101101N110101101101101O010101101101010P110101110100100Q010101101110011R110101110101101S011100010001110T111010010010010U101101101101111V101101101101010W101101111111101X101101010101101Y101101010010010Z111001010100111101011001001011181111011111011115111100110001110\"\n  .match(/[A-Z1-9][01]{15}/g)\n  .forEach((g) => (FONT[g[0]] = g.slice(1)));\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction inPoly(x, y, q) {\n  let inside = false;\n  for (let i = 0, j = q.length - 2; i \u003c q.length; j = i, i += 2) {\n    const xi = q[i];\n    const yi = q[i + 1];\n    const xj = q[j];\n    const yj = q[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;\n  }\n  return inside;\n}\n\nfunction segT(x, y, x0, y0, x1, y1) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  return clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n}\n\nfunction segDist(x, y, x0, y0, x1, y1) {\n  const t = segT(x, y, x0, y0, x1, y1);\n  return Math.hypot(x - x0 - t * (x1 - x0), y - y0 - t * (y1 - y0));\n}\n\n// How far in from the edge of the canvas a stitch is: 0 on the outer row.\nconst ring = (u, v) => Math.min(u, SU - 1 - u, v, SV - 1 - v);\n\n// A Berlin rose: shaded from a deep heart to pale outer petals, with curled petal edges.\nfunction rose(put, cx, cy, r, tones) {\n  for (let i = 0; i \u003c 4; i++)\n    put(tones[i], (u, v) => {\n      const d = Math.hypot(u - cx, v - cy) / r;\n      if (d > 1) return false;\n      const a = Math.atan2(v - cy, u - cx);\n      const t = 0.15 + 0.8 * d + 0.22 * Math.sin(5 * a + 7 * d);\n      return Math.min(3, Math.floor(clamp(t, 0, 0.999) * 4)) === i;\n    });\n}\n\n// The three charts, painted stitch by stitch: discs, boxes, polygons, thick lines, leaves.\nconst CHARTS = [\n  // Parrot cushion: a green Amazon parrot with a yellow crown on an orange branch.\n  (D, R, P, L, F, put) => {\n    put(1, () => true);\n    put(2, (u, v) => ring(u, v) === 0 || (ring(u, v) === 1 && (u + v) % 4 === 0));\n    put(3, (u, v) => ring(u, v) === 1 && (u + v) % 4 !== 0);\n    put(10, (u, v) => ring(u, v) === 2 && (u + v) % 4 === 2);\n    // Corner sprigs of cornflowers.\n    for (const [x, y, s] of [[4, 50, 1], [27, 52, -1], [27, 6, -1], [4, 8, 1]]) {\n      F(4, x, y + 4 * Math.sign(y - 30), x + 3 * s, y, 1.6);\n      D(23, x + 3 * s, y, 1.6);\n      D(9, x + 3 * s, y, 0.6);\n    }\n    // The branch and its leaves and fruit.\n    L(12, 2, 41, 30, 36, 1.4);\n    L(13, 2, 42.5, 30, 37.5, 0.6);\n    L(12, 24, 37, 29, 29, 0.9);\n    F(4, 6, 41, 3, 33, 1.7);\n    F(5, 8, 40, 12, 46, 1.6);\n    F(4, 27, 35, 30, 42, 1.6);\n    F(5, 28, 31, 25, 25, 1.5);\n    D(14, 5, 45, 2);\n    D(7, 4.5, 44.5, 0.6);\n    D(14, 22, 41.5, 1.8);\n    D(7, 21.5, 41, 0.6);\n    // The tail, long and green with a red bar and yellow tips.\n    P(5, 12, 36, 18, 36, 19, 55, 12, 55);\n    put(8, (u, v) => v >= 45 && v \u003c= 46 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    put(6, (u, v) => v >= 52 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    put(4, (u, v) => v > 36 && (u === 15 || u === 16) && v \u003c 52 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    // Body, belly and wing with blue flight feathers and a red shoulder.\n    D(5, 15.5, 26, 6, 10.5);\n    D(6, 17.5, 27, 3.4, 7.5);\n    D(4, 12.5, 28, 4.3, 8.5);\n    put(9, (u, v) => ((u - 12.5) / 4.3) ** 2 + ((v - 28) / 8.5) ** 2 \u003c= 1 && v > 31 && (u + v) % 3 !== 0);\n    put(23, (u, v) => ((u - 12.5) / 4.3) ** 2 + ((v - 28) / 8.5) ** 2 \u003c= 1 && v > 31 && (u + v) % 3 === 0);\n    D(8, 11.5, 23, 2, 1.6);\n    // Head, crown, eye and beak.\n    D(5, 17, 15, 5, 4.6);\n    D(7, 17, 12, 4, 2.6);\n    D(6, 18, 17.5, 3, 1.4);\n    D(10, 19, 14, 1.3);\n    D(11, 19.2, 14, 0.5);\n    P(10, 21, 13, 24.5, 14.5, 23.5, 19, 21, 17.5);\n    P(11, 21, 17.5, 23, 18.5, 21.5, 19.5);\n    // Feet round the branch.\n    R(15, 14, 36, 14, 39);\n    R(15, 17, 36, 18, 38);\n  },\n  // Rose bouquet on black: three roses, buds, blue convolvulus and lilac, tied with a gold bow.\n  (D, R, P, L, F, put) => {\n    put(16, () => true);\n    put(4, (u, v) => ring(u, v) === 0);\n    put(3, (u, v) => ring(u, v) === 1 && (u + 2 * v) % 6 === 0);\n    // Stems gathered into the bow.\n    for (const [x, y] of [[15, 30], [10, 40], [23, 40], [6, 22], [26, 20]]) L(4, x, y, 16, 51, 0.6);\n    L(4, 16, 51, 13, 56, 0.6);\n    L(4, 16, 51, 19, 56, 0.6);\n    // Leaves round the flowers.\n    for (const [x0, y0, x1, y1] of [[8, 28, 2, 23], [24, 28, 30, 22], [6, 46, 1, 51], [25, 46, 30, 52], [16, 30, 12, 36], [17, 31, 21, 36], [12, 13, 7, 8], [21, 12, 26, 7], [4, 34, 2, 41], [28, 34, 30, 41]])\n      F(Math.abs(x0 - 16) > 9 ? 4 : 5, x0, y0, x1, y1, 2);\n    // Lilac sprays and convolvulus.\n    for (let i = 0; i \u003c 14; i++) D(22, 4 + (i % 3) * 1.6 + Math.floor(i / 3) * 0.4, 14 + Math.floor(i / 3) * 1.8 - (i % 3) * 0.5, 0.7);\n    for (let i = 0; i \u003c 12; i++) D(22, 26 - (i % 3) * 1.5, 12 + Math.floor(i / 3) * 1.9 + (i % 3) * 0.4, 0.7);\n    for (const [x, y] of [[4, 31], [28, 31], [16, 6]]) {\n      D(23, x, y, 2.2);\n      D(10, x, y, 0.7);\n    }\n    // Buds.\n    for (const [x, y] of [[9, 9], [23, 8], [3, 44], [29, 45]]) {\n      D(18, x, y, 1.2, 1.8);\n      put(5, (u, v) => Math.abs(u - x) \u003c= 1 && v === y + 2);\n    }\n    rose(put, 16, 20, 7.6, [17, 18, 19, 20]);\n    rose(put, 9, 37, 5.6, [3, 7, 21, 10]);\n    rose(put, 23, 37, 5.6, [17, 8, 18, 19]);\n    // The bow.\n    P(3, 16, 51, 10, 48, 10, 54);\n    P(3, 16, 51, 22, 48, 22, 54);\n    D(7, 16, 51, 1.2);\n  },\n  // Sampler on cream: the alphabet, a band of diamonds, a brick house between two trees, the year.\n  (D, R, P, L, F, put) => {\n    put(24, () => true);\n    put(4, (u, v) => ring(u, v) === 0);\n    put(8, (u, v) => ring(u, v) === 1 && (u + v) % 4 === 0);\n    const text = (s, u0, v0, c) => {\n      for (let i = 0; i \u003c s.length; i++) {\n        const g = FONT[s[i]];\n        if (g) put(c, (u, v) => u >= u0 + 4 * i && u \u003c u0 + 4 * i + 3 && v >= v0 && v \u003c v0 + 5 && g[(v - v0) * 3 + (u - u0 - 4 * i)] === \"1\");\n      }\n    };\n    text(\"ABCDEFG\", 2, 4, 9);\n    text(\"HIJKLMN\", 2, 11, 17);\n    text(\"OPQRSTU\", 2, 18, 4);\n    text(\"VWXYZ\", 6, 25, 13);\n    put(3, (u, v) => v >= 31 && v \u003c= 33 && Math.abs((u % 4) - 1.5) + Math.abs(v - 32) \u003c= 1.5 && ring(u, v) > 1);\n    put(4, (u, v) => v === 32 && u % 4 === 3 && ring(u, v) > 1);\n    // House: roof, chimney, walls, door and windows.\n    P(13, 15.5, 36, 24, 42, 7, 42);\n    R(13, 20, 36, 21, 39);\n    R(25, 9, 42, 22, 50);\n    R(11, 15, 46, 16, 50);\n    for (const x of [11, 19]) {\n      R(9, x, 44, x + 1, 45);\n      R(7, x, 47, x + 1, 47);\n    }\n    // Trees and birds.\n    for (const x of [4, 27]) {\n      P(5, x, 37, x + 2.6, 47, x - 2.6, 47);\n      P(4, x, 41, x + 2.6, 47, x - 2.6, 47);\n      R(13, x, 48, x, 50);\n    }\n    for (const [x, y] of [[6, 33], [26, 34]]) {\n      R(9, x, y, x + 1, y);\n      R(9, x - 1, y - 1, x - 1, y - 1);\n      R(9, x + 2, y - 1, x + 2, y - 1);\n    }\n    R(5, 2, 51, 29, 51);\n    text(\"1851\", 8, 53, 17);\n  },\n];\n\n// Paint a chart into one wool index per stitch.\nfunction buildChart(art) {\n  const col = new Uint8Array(NS);\n  const put = (c, f) => {\n    for (let v = 0; v \u003c SV; v++) for (let u = 0; u \u003c SU; u++) if (f(u, v)) col[v * SU + u] = c;\n  };\n  const D = (c, cx, cy, rx, ry) => put(c, (u, v) => ((u - cx) / rx) ** 2 + ((v - cy) / (ry || rx)) ** 2 \u003c= 1);\n  const R = (c, u0, v0, u1, v1) => put(c, (u, v) => u >= u0 && u \u003c= u1 && v >= v0 && v \u003c= v1);\n  const P = (c, ...q) => put(c, (u, v) => inPoly(u, v, q));\n  const L = (c, x0, y0, x1, y1, w) => put(c, (u, v) => segDist(u, v, x0, y0, x1, y1) \u003c= w);\n  // A leaf from its stalk to its tip, w wide at the middle, with a paler midrib.\n  const F = (c, x0, y0, x1, y1, w) => {\n    put(c, (u, v) => {\n      const t = segT(u, v, x0, y0, x1, y1);\n      return segDist(u, v, x0, y0, x1, y1) \u003c= w * 2 * Math.sqrt(t * (1 - t)) + 0.3;\n    });\n    put(c === 4 ? 5 : 6, (u, v) => {\n      const t = segT(u, v, x0, y0, x1, y1);\n      return t > 0.15 && t \u003c 0.8 && segDist(u, v, x0, y0, x1, y1) \u003c 0.5;\n    });\n  };\n  art(D, R, P, L, F, put);\n  return col;\n}\n\n// Basketweave: diagonal rows from the top right corner, down one row and up the next.\nconst ORDER = new Int16Array(NS);\nconst RANK = new Int16Array(NS);\nconst DOWN = new Uint8Array(NS);\n{\n  let n = 0;\n  for (let d = 0; d \u003c= SU - 1 + SV - 1; d++) {\n    const v0 = Math.max(0, d - (SU - 1));\n    const v1 = Math.min(SV - 1, d);\n    for (let i = 0; i \u003c= v1 - v0; i++) {\n      const v = d % 2 === 0 ? v0 + i : v1 - i;\n      const u = SU - 1 - d + v;\n      const s = v * SU + u;\n      ORDER[n] = s;\n      RANK[s] = n++;\n      DOWN[s] = d % 2 === 0 ? 1 : 0;\n    }\n  }\n}\n\nfunction hueTurn(c, turn) {\n  // Rotate a colour round the grey axis, which keeps its level and saturation close.\n  const a = turn * 2 * Math.PI;\n  const cs = Math.cos(a);\n  const sn = Math.sin(a);\n  const k = (1 - cs) / 3;\n  const q = Math.sqrt(1 / 3) * sn;\n  const m0 = cs + k;\n  const m1 = k - q;\n  const m2 = k + q;\n  return [\n    clamp(c[0] * m0 + c[1] * m1 + c[2] * m2, 0, 255),\n    clamp(c[0] * m2 + c[1] * m0 + c[2] * m1, 0, 255),\n    clamp(c[0] * m1 + c[1] * m2 + c[2] * m0, 0, 255),\n  ];\n}\n\nexport function setup(params) {\n  const P = params;\n  P.charts = CHARTS.map(buildChart);\n  P.buf = new Float32Array(N * 3);\n  P.light = new Float32Array(N);\n  P.jit = new Float32Array(N * 3);\n  P.tone = new Float32Array(NS);\n  for (let i = 0; i \u003c N * 3; i++) P.jit[i] = clamp(Math.round(Math.random() + Math.random() - 1), -1, 1);\n  for (let s = 0; s \u003c NS; s++) P.tone[s] = 0.93 + 0.12 * Math.random();\n  P.wool = [];\n  P.print = [];\n  P.woolKey = -1;\n  P.lampKey = -1;\n  P.t = 0;\n  P.started = false;\n}\n\nfunction begin(P, d) {\n  P.design = d;\n  P.k = 0;\n  P.phase = STITCH;\n}\n\nfunction startRoll(P, to) {\n  P.next = to;\n  P.phase = ROLLING;\n  P.rollFrom = P.t;\n}\n\nfunction step(P, dt, speed) {\n  P.t += dt;\n  if (P.phase === STITCH) {\n    P.k = Math.min(NS, P.k + dt * RATE * speed);\n    if (P.k >= NS) {\n      P.phase = HOLDING;\n      P.until = P.t + HOLD;\n    }\n  } else if (P.phase === HOLDING) {\n    if (P.t >= P.until) startRoll(P, (P.design + 1) % CHARTS.length);\n  } else if (P.t - P.rollFrom >= P.rollDur) begin(P, P.next);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const wool = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const pick = Math.round(clamp(k[2], 0, 2));\n  P.lamp = clamp(k[3], 0, 1);\n  P.rollDur = ROLL * Math.sqrt(2 / speed);\n  if (wool !== P.woolKey) {\n    P.woolKey = wool;\n    for (let i = 0; i \u003c WOOL.length; i++) {\n      const c = hueTurn(WOOL[i], wool);\n      P.wool[i] = c;\n      // The printed chart is a pale wash of the wool over the ecru canvas.\n      const m = [0, 1, 2].map((ch) => 0.7 * c[ch] + 0.3 * ECRU[ch]);\n      const top = Math.max(m[0], m[1], m[2], 1);\n      P.print[i] = m.map((x) => (x / top) * PRINT);\n    }\n    const e = Math.max(...ECRU);\n    P.print[0] = ECRU.map((x) => (x / e) * PRINT * 0.72);\n  }\n  if (!P.started) {\n    P.started = true;\n    P.pick = pick;\n    begin(P, pick);\n    // The canvas has been on the frame a while: over a quarter of it is worked, and seven more\n    // seconds go by at the knob's pace before the panel opens.\n    P.k = 0.28 * NS;\n    for (let i = 0; i \u003c 70; i++) step(P, 0.1, speed);\n  }\n  if (pick !== P.pick) {\n    P.pick = pick;\n    if (P.phase === ROLLING) P.next = pick;\n    else startRoll(P, pick);\n  }\n  step(P, dt, speed);\n}\n\n// Light from the lamp on each LED, and how far it rakes: -1 from the left, 1 from the right.\nfunction lampLight(P) {\n  if (P.lampKey === P.lamp) return;\n  P.lampKey = P.lamp;\n  // The lamp swings on an arc round the frame, from low on the left over the top to low on the right.\n  const a = (P.lamp * 2 - 1) * 1.3;\n  const lx = 32 + 96 * Math.sin(a);\n  const ly = 56 - 104 * Math.cos(a);\n  for (let p = 0; p \u003c N; p++) {\n    const dx = (p % W) - lx;\n    const dy = Math.floor(p / W) - ly;\n    P.light[p] = 0.52 + 0.68 / (1 + (dx * dx + dy * dy) / 8000);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  lampLight(P);\n  const buf = P.buf;\n  const { light, jit, tone, wool, print } = P;\n  const s = P.lamp * 2 - 1;\n  const shineLL = 1 - SHEEN * s;\n  const shineUR = 1 + SHEEN * s;\n  const gapUL = GAP - RAKE * s;\n  const gapLR = GAP + RAKE * s;\n  const rolling = P.phase === ROLLING;\n  const off = rolling ? Math.round(clamp((P.t - P.rollFrom) / P.rollDur, 0, 1) * CH) : 0;\n  const cur = P.charts[P.design];\n  const nxt = rolling ? P.charts[P.next] : cur;\n  const k = P.k;\n  // The rollers: turned wood, the grain running round them as they turn.\n  for (let y = 0; y \u003c H; y++) {\n    if (y >= Y0 && y \u003c Y0 + CH) continue;\n    const ry = y \u003c Y0 ? y : y - Y0 - CH;\n    const sh = [0.5, 0.95, 0.8, 0.45][ry];\n    const turn = y \u003c Y0 ? -off : off;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const g = 0.82 + 0.18 * Math.sin(x * 0.7 + ry * 2.1 + Math.sin((x + turn) * 0.23) * 3);\n      const o = p * 3;\n      buf[o] = 168 * sh * g;\n      buf[o + 1] = 108 * sh * g;\n      buf[o + 2] = 56 * sh * g;\n    }\n  }\n  for (let y = Y0; y \u003c Y0 + CH; y++) {\n    let r = y - Y0 - off;\n    let chart = cur;\n    let done = k;\n    let ground = GROUND[P.design];\n    if (r \u003c 0) {\n      r += CH;\n      chart = nxt;\n      done = 0;\n      ground = GROUND[P.next];\n    }\n    const v = r >> 1;\n    const lower = r & 1;\n    for (let x = 0; x \u003c W; x++) {\n      const u = x >> 1;\n      const right = x & 1;\n      const st = v * SU + u;\n      const c = chart[st];\n      const p = y * W + x;\n      const o = p * 3;\n      const L = light[p];\n      let f;\n      let col;\n      if (RANK[st] \u003c done) {\n        col = wool[c];\n        // Upper right and lower left are the stitch; the other two are the holes beside it.\n        if (right !== lower) f = (right ? shineUR : shineLL) * tone[st] * L;\n        else f = (right ? gapLR : gapUL) * L;\n      } else {\n        col = print[c === ground ? 0 : c];\n        f = right && lower ? 0.12 : Math.sqrt(L);\n      }\n      let r0 = col[0] * f;\n      let g0 = col[1] * f;\n      let b0 = col[2] * f;\n      // Wool grain, in the weaker channels only.\n      const mx = Math.max(r0, g0, b0);\n      const amp = Math.min(1, mx / 60) * JIT;\n      if (r0 !== mx) r0 += jit[o] * amp;\n      if (g0 !== mx) g0 += jit[o + 1] * amp;\n      if (b0 !== mx) b0 += jit[o + 2] * amp;\n      buf[o] = r0;\n      buf[o + 1] = g0;\n      buf[o + 2] = b0;\n    }\n  }\n  if (P.phase === STITCH && k \u003c NS) drawNeedle(P, cur, buf);\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), clamp(buf[o], 0, 255), clamp(buf[o + 1], 0, 255), clamp(buf[o + 2], 0, 255));\n  }\n}\n\nfunction dot(buf, x, y, c) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let ch = 0; ch \u003c 3; ch++) buf[o + ch] = c[ch];\n}\n\n// The needle lies slanting on the bare canvas with its point in the next hole, and the\n// slack wool hangs in a loop from the last stitch down and up to its eye.\nfunction drawNeedle(P, chart, buf) {\n  const n = Math.floor(P.k);\n  const st = ORDER[n];\n  const u = st % SU;\n  const v = (st - u) / SU;\n  const tx = 2 * u;\n  const ty = Y0 + 2 * v + 1;\n  // On a row going down the needle lies nearly upright, on a row going up nearly level,\n  // the way basketweave is worked.\n  const dx = DOWN[st] ? -0.55 : -1;\n  const dy = DOWN[st] ? 1 : 0.55;\n  const ex = tx + dx * 7;\n  const ey = ty + dy * 7;\n  const wc = P.wool[chart[st]];\n  const yarn = [0, 1, 2].map((ch) => Math.min(255, wc[ch] * 1.25 + 24));\n  const prev = n > 0 ? ORDER[n - 1] : st;\n  const pu = prev % SU;\n  const px = 2 * pu + 1;\n  const py = Y0 + 2 * ((prev - pu) / SU);\n  // The loop swings a little as the needle is pulled through.\n  const sway = Math.sin(P.t * 2.3) * 3;\n  const sag = 13 + 2 * Math.sin(P.t * 1.7);\n  const c1x = px + 7 + sway;\n  const c1y = py + sag;\n  const c2x = ex + 1 + sway;\n  const c2y = ey + sag;\n  for (let i = 0; i \u003c= 40; i++) {\n    const t = i / 40;\n    const a = (1 - t) ** 3;\n    const b = 3 * t * (1 - t) ** 2;\n    const c = 3 * t * t * (1 - t);\n    const d = t ** 3;\n    dot(buf, a * px + b * c1x + c * c2x + d * ex, a * py + b * c1y + c * c2y + d * ey, yarn);\n  }\n  // The steel: a bright point, the shaft and the eye.\n  for (let i = 0; i \u003c= 8; i++) {\n    const g = i === 7 ? 0.4 : i === 0 ? 1 : 0.85;\n    dot(buf, tx + dx * i, ty + dy * i, [205 * g, 212 * g, 226 * g]);\n  }\n}\n","layer":{"id":"layer-needlepoint","type":"code","name":"needlepoint","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Needlepoint\n// Family:  textile\n// Idea:    A needle and wool work a printed canvas in tent stitch on a slate frame, diagonal row after diagonal row from the top right corner, each stitch two lit LEDs across a dark hole, until a parrot cushion, a Berlin rose bouquet or an alphabet sampler is filled in and the frame rolls on a fresh canvas.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after Berlin woolwork, the tent stitch pictures worked from printed charts in the nineteenth century\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Wool=0..1, Speed=0.2..3, Design=0..2, Lamp=0..1\n//\n// Knob 1: Wool. Turns every wool in the box round the dye wheel together, starting from the natural shades: a green parrot on a teal ground.\n// Knob 2: Speed. Stitches a second, 7 at 0.2, 72 at 2 and 108 at 3; at 2 the 1920 stitches of a canvas take 27 seconds.\n// Knob 3: Design. Which canvas is on the frame: the parrot cushion, the rose bouquet on black or the sampler with its alphabet and house; turning it rolls the work on to that canvas, and after it the canvases follow in that order.\n// Knob 4: Lamp. Where the lamp stands, low on the left at 0, overhead at 0.5, low on the right at 1; the side of each stitch that faces it shines and the far side of the hole falls into shadow.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The canvas is 32 stitches across and 60 down, each stitch a 2 by 2 LED cell, between the\n// slate frame's two rollers of 4 rows.\nconst SU = 32;\nconst SV = 60;\nconst NS = SU * SV;\nconst Y0 = 4;\nconst CH = SV * 2;\n// Stitches a second for each unit of Speed, the hold on a finished canvas and the roll on.\nconst RATE = 36;\nconst HOLD = 3.5;\nconst ROLL = 2.4;\nconst STITCH = 0;\nconst HOLDING = 1;\nconst ROLLING = 2;\n// A stitch's two yarn LEDs at full wool; the hole between stitches gets GAP of the wool\n// on the lamp's side and less on the other. Bare canvas threads sit near PRINT of 255,\n// the ground left plain ecru and the motifs printed in a wash of their wool.\nconst GAP = 0.15;\nconst RAKE = 0.1;\nconst SHEEN = 0.18;\nconst PRINT = 34;\n// Grain of the wool: about one fibre in four is JIT levels off in a weaker channel. The\n// strongest channel is left alone, so the grain shows as tint, not as brightness.\nconst JIT = 10;\n\n// The wool box. Index 0 is never used.\nconst WOOL = [\n  [0, 0, 0],\n  [36, 122, 170], // 1 teal ground\n  [134, 28, 46], // 2 maroon\n  [220, 170, 56], // 3 old gold\n  [30, 96, 46], // 4 dark green\n  [70, 160, 56], // 5 green\n  [154, 212, 70], // 6 light green\n  [238, 208, 52], // 7 yellow\n  [222, 54, 40], // 8 scarlet\n  [46, 76, 196], // 9 royal blue\n  [230, 222, 196], // 10 ivory\n  [44, 36, 34], // 11 near black\n  [126, 78, 40], // 12 brown\n  [80, 50, 30], // 13 dark brown\n  [240, 136, 34], // 14 orange\n  [150, 150, 164], // 15 grey\n  [34, 30, 56], // 16 Berlin black\n  [128, 18, 40], // 17 deep crimson\n  [206, 50, 82], // 18 rose\n  [238, 118, 152], // 19 pink\n  [250, 194, 210], // 20 pale pink\n  [244, 222, 120], // 21 pale yellow\n  [146, 92, 196], // 22 lilac\n  [92, 142, 226], // 23 cornflower\n  [222, 204, 156], // 24 cream ground\n  [168, 64, 40], // 25 brick\n];\nconst ECRU = [230, 220, 186];\n// The ground wool of each chart, which the printer leaves off the canvas.\nconst GROUND = [1, 16, 24];\n\n// A 3 by 5 alphabet for the sampler, and the three digits of its year.\nconst FONT = {};\n\"A010101111101101B110101110101110C011100100100011D110101101101110E111100110100111F111100110100100G011100101101011H101101111101101I111010010010111J001001001101010K101101110101101L100100100100111M101111111101101N110101101101101O010101101101010P110101110100100Q010101101110011R110101110101101S011100010001110T111010010010010U101101101101111V101101101101010W101101111111101X101101010101101Y101101010010010Z111001010100111101011001001011181111011111011115111100110001110\"\n  .match(/[A-Z1-9][01]{15}/g)\n  .forEach((g) => (FONT[g[0]] = g.slice(1)));\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction inPoly(x, y, q) {\n  let inside = false;\n  for (let i = 0, j = q.length - 2; i \u003c q.length; j = i, i += 2) {\n    const xi = q[i];\n    const yi = q[i + 1];\n    const xj = q[j];\n    const yj = q[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;\n  }\n  return inside;\n}\n\nfunction segT(x, y, x0, y0, x1, y1) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  return clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n}\n\nfunction segDist(x, y, x0, y0, x1, y1) {\n  const t = segT(x, y, x0, y0, x1, y1);\n  return Math.hypot(x - x0 - t * (x1 - x0), y - y0 - t * (y1 - y0));\n}\n\n// How far in from the edge of the canvas a stitch is: 0 on the outer row.\nconst ring = (u, v) => Math.min(u, SU - 1 - u, v, SV - 1 - v);\n\n// A Berlin rose: shaded from a deep heart to pale outer petals, with curled petal edges.\nfunction rose(put, cx, cy, r, tones) {\n  for (let i = 0; i \u003c 4; i++)\n    put(tones[i], (u, v) => {\n      const d = Math.hypot(u - cx, v - cy) / r;\n      if (d > 1) return false;\n      const a = Math.atan2(v - cy, u - cx);\n      const t = 0.15 + 0.8 * d + 0.22 * Math.sin(5 * a + 7 * d);\n      return Math.min(3, Math.floor(clamp(t, 0, 0.999) * 4)) === i;\n    });\n}\n\n// The three charts, painted stitch by stitch: discs, boxes, polygons, thick lines, leaves.\nconst CHARTS = [\n  // Parrot cushion: a green Amazon parrot with a yellow crown on an orange branch.\n  (D, R, P, L, F, put) => {\n    put(1, () => true);\n    put(2, (u, v) => ring(u, v) === 0 || (ring(u, v) === 1 && (u + v) % 4 === 0));\n    put(3, (u, v) => ring(u, v) === 1 && (u + v) % 4 !== 0);\n    put(10, (u, v) => ring(u, v) === 2 && (u + v) % 4 === 2);\n    // Corner sprigs of cornflowers.\n    for (const [x, y, s] of [[4, 50, 1], [27, 52, -1], [27, 6, -1], [4, 8, 1]]) {\n      F(4, x, y + 4 * Math.sign(y - 30), x + 3 * s, y, 1.6);\n      D(23, x + 3 * s, y, 1.6);\n      D(9, x + 3 * s, y, 0.6);\n    }\n    // The branch and its leaves and fruit.\n    L(12, 2, 41, 30, 36, 1.4);\n    L(13, 2, 42.5, 30, 37.5, 0.6);\n    L(12, 24, 37, 29, 29, 0.9);\n    F(4, 6, 41, 3, 33, 1.7);\n    F(5, 8, 40, 12, 46, 1.6);\n    F(4, 27, 35, 30, 42, 1.6);\n    F(5, 28, 31, 25, 25, 1.5);\n    D(14, 5, 45, 2);\n    D(7, 4.5, 44.5, 0.6);\n    D(14, 22, 41.5, 1.8);\n    D(7, 21.5, 41, 0.6);\n    // The tail, long and green with a red bar and yellow tips.\n    P(5, 12, 36, 18, 36, 19, 55, 12, 55);\n    put(8, (u, v) => v >= 45 && v \u003c= 46 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    put(6, (u, v) => v >= 52 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    put(4, (u, v) => v > 36 && (u === 15 || u === 16) && v \u003c 52 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    // Body, belly and wing with blue flight feathers and a red shoulder.\n    D(5, 15.5, 26, 6, 10.5);\n    D(6, 17.5, 27, 3.4, 7.5);\n    D(4, 12.5, 28, 4.3, 8.5);\n    put(9, (u, v) => ((u - 12.5) / 4.3) ** 2 + ((v - 28) / 8.5) ** 2 \u003c= 1 && v > 31 && (u + v) % 3 !== 0);\n    put(23, (u, v) => ((u - 12.5) / 4.3) ** 2 + ((v - 28) / 8.5) ** 2 \u003c= 1 && v > 31 && (u + v) % 3 === 0);\n    D(8, 11.5, 23, 2, 1.6);\n    // Head, crown, eye and beak.\n    D(5, 17, 15, 5, 4.6);\n    D(7, 17, 12, 4, 2.6);\n    D(6, 18, 17.5, 3, 1.4);\n    D(10, 19, 14, 1.3);\n    D(11, 19.2, 14, 0.5);\n    P(10, 21, 13, 24.5, 14.5, 23.5, 19, 21, 17.5);\n    P(11, 21, 17.5, 23, 18.5, 21.5, 19.5);\n    // Feet round the branch.\n    R(15, 14, 36, 14, 39);\n    R(15, 17, 36, 18, 38);\n  },\n  // Rose bouquet on black: three roses, buds, blue convolvulus and lilac, tied with a gold bow.\n  (D, R, P, L, F, put) => {\n    put(16, () => true);\n    put(4, (u, v) => ring(u, v) === 0);\n    put(3, (u, v) => ring(u, v) === 1 && (u + 2 * v) % 6 === 0);\n    // Stems gathered into the bow.\n    for (const [x, y] of [[15, 30], [10, 40], [23, 40], [6, 22], [26, 20]]) L(4, x, y, 16, 51, 0.6);\n    L(4, 16, 51, 13, 56, 0.6);\n    L(4, 16, 51, 19, 56, 0.6);\n    // Leaves round the flowers.\n    for (const [x0, y0, x1, y1] of [[8, 28, 2, 23], [24, 28, 30, 22], [6, 46, 1, 51], [25, 46, 30, 52], [16, 30, 12, 36], [17, 31, 21, 36], [12, 13, 7, 8], [21, 12, 26, 7], [4, 34, 2, 41], [28, 34, 30, 41]])\n      F(Math.abs(x0 - 16) > 9 ? 4 : 5, x0, y0, x1, y1, 2);\n    // Lilac sprays and convolvulus.\n    for (let i = 0; i \u003c 14; i++) D(22, 4 + (i % 3) * 1.6 + Math.floor(i / 3) * 0.4, 14 + Math.floor(i / 3) * 1.8 - (i % 3) * 0.5, 0.7);\n    for (let i = 0; i \u003c 12; i++) D(22, 26 - (i % 3) * 1.5, 12 + Math.floor(i / 3) * 1.9 + (i % 3) * 0.4, 0.7);\n    for (const [x, y] of [[4, 31], [28, 31], [16, 6]]) {\n      D(23, x, y, 2.2);\n      D(10, x, y, 0.7);\n    }\n    // Buds.\n    for (const [x, y] of [[9, 9], [23, 8], [3, 44], [29, 45]]) {\n      D(18, x, y, 1.2, 1.8);\n      put(5, (u, v) => Math.abs(u - x) \u003c= 1 && v === y + 2);\n    }\n    rose(put, 16, 20, 7.6, [17, 18, 19, 20]);\n    rose(put, 9, 37, 5.6, [3, 7, 21, 10]);\n    rose(put, 23, 37, 5.6, [17, 8, 18, 19]);\n    // The bow.\n    P(3, 16, 51, 10, 48, 10, 54);\n    P(3, 16, 51, 22, 48, 22, 54);\n    D(7, 16, 51, 1.2);\n  },\n  // Sampler on cream: the alphabet, a band of diamonds, a brick house between two trees, the year.\n  (D, R, P, L, F, put) => {\n    put(24, () => true);\n    put(4, (u, v) => ring(u, v) === 0);\n    put(8, (u, v) => ring(u, v) === 1 && (u + v) % 4 === 0);\n    const text = (s, u0, v0, c) => {\n      for (let i = 0; i \u003c s.length; i++) {\n        const g = FONT[s[i]];\n        if (g) put(c, (u, v) => u >= u0 + 4 * i && u \u003c u0 + 4 * i + 3 && v >= v0 && v \u003c v0 + 5 && g[(v - v0) * 3 + (u - u0 - 4 * i)] === \"1\");\n      }\n    };\n    text(\"ABCDEFG\", 2, 4, 9);\n    text(\"HIJKLMN\", 2, 11, 17);\n    text(\"OPQRSTU\", 2, 18, 4);\n    text(\"VWXYZ\", 6, 25, 13);\n    put(3, (u, v) => v >= 31 && v \u003c= 33 && Math.abs((u % 4) - 1.5) + Math.abs(v - 32) \u003c= 1.5 && ring(u, v) > 1);\n    put(4, (u, v) => v === 32 && u % 4 === 3 && ring(u, v) > 1);\n    // House: roof, chimney, walls, door and windows.\n    P(13, 15.5, 36, 24, 42, 7, 42);\n    R(13, 20, 36, 21, 39);\n    R(25, 9, 42, 22, 50);\n    R(11, 15, 46, 16, 50);\n    for (const x of [11, 19]) {\n      R(9, x, 44, x + 1, 45);\n      R(7, x, 47, x + 1, 47);\n    }\n    // Trees and birds.\n    for (const x of [4, 27]) {\n      P(5, x, 37, x + 2.6, 47, x - 2.6, 47);\n      P(4, x, 41, x + 2.6, 47, x - 2.6, 47);\n      R(13, x, 48, x, 50);\n    }\n    for (const [x, y] of [[6, 33], [26, 34]]) {\n      R(9, x, y, x + 1, y);\n      R(9, x - 1, y - 1, x - 1, y - 1);\n      R(9, x + 2, y - 1, x + 2, y - 1);\n    }\n    R(5, 2, 51, 29, 51);\n    text(\"1851\", 8, 53, 17);\n  },\n];\n\n// Paint a chart into one wool index per stitch.\nfunction buildChart(art) {\n  const col = new Uint8Array(NS);\n  const put = (c, f) => {\n    for (let v = 0; v \u003c SV; v++) for (let u = 0; u \u003c SU; u++) if (f(u, v)) col[v * SU + u] = c;\n  };\n  const D = (c, cx, cy, rx, ry) => put(c, (u, v) => ((u - cx) / rx) ** 2 + ((v - cy) / (ry || rx)) ** 2 \u003c= 1);\n  const R = (c, u0, v0, u1, v1) => put(c, (u, v) => u >= u0 && u \u003c= u1 && v >= v0 && v \u003c= v1);\n  const P = (c, ...q) => put(c, (u, v) => inPoly(u, v, q));\n  const L = (c, x0, y0, x1, y1, w) => put(c, (u, v) => segDist(u, v, x0, y0, x1, y1) \u003c= w);\n  // A leaf from its stalk to its tip, w wide at the middle, with a paler midrib.\n  const F = (c, x0, y0, x1, y1, w) => {\n    put(c, (u, v) => {\n      const t = segT(u, v, x0, y0, x1, y1);\n      return segDist(u, v, x0, y0, x1, y1) \u003c= w * 2 * Math.sqrt(t * (1 - t)) + 0.3;\n    });\n    put(c === 4 ? 5 : 6, (u, v) => {\n      const t = segT(u, v, x0, y0, x1, y1);\n      return t > 0.15 && t \u003c 0.8 && segDist(u, v, x0, y0, x1, y1) \u003c 0.5;\n    });\n  };\n  art(D, R, P, L, F, put);\n  return col;\n}\n\n// Basketweave: diagonal rows from the top right corner, down one row and up the next.\nconst ORDER = new Int16Array(NS);\nconst RANK = new Int16Array(NS);\nconst DOWN = new Uint8Array(NS);\n{\n  let n = 0;\n  for (let d = 0; d \u003c= SU - 1 + SV - 1; d++) {\n    const v0 = Math.max(0, d - (SU - 1));\n    const v1 = Math.min(SV - 1, d);\n    for (let i = 0; i \u003c= v1 - v0; i++) {\n      const v = d % 2 === 0 ? v0 + i : v1 - i;\n      const u = SU - 1 - d + v;\n      const s = v * SU + u;\n      ORDER[n] = s;\n      RANK[s] = n++;\n      DOWN[s] = d % 2 === 0 ? 1 : 0;\n    }\n  }\n}\n\nfunction hueTurn(c, turn) {\n  // Rotate a colour round the grey axis, which keeps its level and saturation close.\n  const a = turn * 2 * Math.PI;\n  const cs = Math.cos(a);\n  const sn = Math.sin(a);\n  const k = (1 - cs) / 3;\n  const q = Math.sqrt(1 / 3) * sn;\n  const m0 = cs + k;\n  const m1 = k - q;\n  const m2 = k + q;\n  return [\n    clamp(c[0] * m0 + c[1] * m1 + c[2] * m2, 0, 255),\n    clamp(c[0] * m2 + c[1] * m0 + c[2] * m1, 0, 255),\n    clamp(c[0] * m1 + c[1] * m2 + c[2] * m0, 0, 255),\n  ];\n}\n\nexport function setup(params) {\n  const P = params;\n  P.charts = CHARTS.map(buildChart);\n  P.buf = new Float32Array(N * 3);\n  P.light = new Float32Array(N);\n  P.jit = new Float32Array(N * 3);\n  P.tone = new Float32Array(NS);\n  for (let i = 0; i \u003c N * 3; i++) P.jit[i] = clamp(Math.round(Math.random() + Math.random() - 1), -1, 1);\n  for (let s = 0; s \u003c NS; s++) P.tone[s] = 0.93 + 0.12 * Math.random();\n  P.wool = [];\n  P.print = [];\n  P.woolKey = -1;\n  P.lampKey = -1;\n  P.t = 0;\n  P.started = false;\n}\n\nfunction begin(P, d) {\n  P.design = d;\n  P.k = 0;\n  P.phase = STITCH;\n}\n\nfunction startRoll(P, to) {\n  P.next = to;\n  P.phase = ROLLING;\n  P.rollFrom = P.t;\n}\n\nfunction step(P, dt, speed) {\n  P.t += dt;\n  if (P.phase === STITCH) {\n    P.k = Math.min(NS, P.k + dt * RATE * speed);\n    if (P.k >= NS) {\n      P.phase = HOLDING;\n      P.until = P.t + HOLD;\n    }\n  } else if (P.phase === HOLDING) {\n    if (P.t >= P.until) startRoll(P, (P.design + 1) % CHARTS.length);\n  } else if (P.t - P.rollFrom >= P.rollDur) begin(P, P.next);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const wool = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const pick = Math.round(clamp(k[2], 0, 2));\n  P.lamp = clamp(k[3], 0, 1);\n  P.rollDur = ROLL * Math.sqrt(2 / speed);\n  if (wool !== P.woolKey) {\n    P.woolKey = wool;\n    for (let i = 0; i \u003c WOOL.length; i++) {\n      const c = hueTurn(WOOL[i], wool);\n      P.wool[i] = c;\n      // The printed chart is a pale wash of the wool over the ecru canvas.\n      const m = [0, 1, 2].map((ch) => 0.7 * c[ch] + 0.3 * ECRU[ch]);\n      const top = Math.max(m[0], m[1], m[2], 1);\n      P.print[i] = m.map((x) => (x / top) * PRINT);\n    }\n    const e = Math.max(...ECRU);\n    P.print[0] = ECRU.map((x) => (x / e) * PRINT * 0.72);\n  }\n  if (!P.started) {\n    P.started = true;\n    P.pick = pick;\n    begin(P, pick);\n    // The canvas has been on the frame a while: over a quarter of it is worked, and seven more\n    // seconds go by at the knob's pace before the panel opens.\n    P.k = 0.28 * NS;\n    for (let i = 0; i \u003c 70; i++) step(P, 0.1, speed);\n  }\n  if (pick !== P.pick) {\n    P.pick = pick;\n    if (P.phase === ROLLING) P.next = pick;\n    else startRoll(P, pick);\n  }\n  step(P, dt, speed);\n}\n\n// Light from the lamp on each LED, and how far it rakes: -1 from the left, 1 from the right.\nfunction lampLight(P) {\n  if (P.lampKey === P.lamp) return;\n  P.lampKey = P.lamp;\n  // The lamp swings on an arc round the frame, from low on the left over the top to low on the right.\n  const a = (P.lamp * 2 - 1) * 1.3;\n  const lx = 32 + 96 * Math.sin(a);\n  const ly = 56 - 104 * Math.cos(a);\n  for (let p = 0; p \u003c N; p++) {\n    const dx = (p % W) - lx;\n    const dy = Math.floor(p / W) - ly;\n    P.light[p] = 0.52 + 0.68 / (1 + (dx * dx + dy * dy) / 8000);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  lampLight(P);\n  const buf = P.buf;\n  const { light, jit, tone, wool, print } = P;\n  const s = P.lamp * 2 - 1;\n  const shineLL = 1 - SHEEN * s;\n  const shineUR = 1 + SHEEN * s;\n  const gapUL = GAP - RAKE * s;\n  const gapLR = GAP + RAKE * s;\n  const rolling = P.phase === ROLLING;\n  const off = rolling ? Math.round(clamp((P.t - P.rollFrom) / P.rollDur, 0, 1) * CH) : 0;\n  const cur = P.charts[P.design];\n  const nxt = rolling ? P.charts[P.next] : cur;\n  const k = P.k;\n  // The rollers: turned wood, the grain running round them as they turn.\n  for (let y = 0; y \u003c H; y++) {\n    if (y >= Y0 && y \u003c Y0 + CH) continue;\n    const ry = y \u003c Y0 ? y : y - Y0 - CH;\n    const sh = [0.5, 0.95, 0.8, 0.45][ry];\n    const turn = y \u003c Y0 ? -off : off;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const g = 0.82 + 0.18 * Math.sin(x * 0.7 + ry * 2.1 + Math.sin((x + turn) * 0.23) * 3);\n      const o = p * 3;\n      buf[o] = 168 * sh * g;\n      buf[o + 1] = 108 * sh * g;\n      buf[o + 2] = 56 * sh * g;\n    }\n  }\n  for (let y = Y0; y \u003c Y0 + CH; y++) {\n    let r = y - Y0 - off;\n    let chart = cur;\n    let done = k;\n    let ground = GROUND[P.design];\n    if (r \u003c 0) {\n      r += CH;\n      chart = nxt;\n      done = 0;\n      ground = GROUND[P.next];\n    }\n    const v = r >> 1;\n    const lower = r & 1;\n    for (let x = 0; x \u003c W; x++) {\n      const u = x >> 1;\n      const right = x & 1;\n      const st = v * SU + u;\n      const c = chart[st];\n      const p = y * W + x;\n      const o = p * 3;\n      const L = light[p];\n      let f;\n      let col;\n      if (RANK[st] \u003c done) {\n        col = wool[c];\n        // Upper right and lower left are the stitch; the other two are the holes beside it.\n        if (right !== lower) f = (right ? shineUR : shineLL) * tone[st] * L;\n        else f = (right ? gapLR : gapUL) * L;\n      } else {\n        col = print[c === ground ? 0 : c];\n        f = right && lower ? 0.12 : Math.sqrt(L);\n      }\n      let r0 = col[0] * f;\n      let g0 = col[1] * f;\n      let b0 = col[2] * f;\n      // Wool grain, in the weaker channels only.\n      const mx = Math.max(r0, g0, b0);\n      const amp = Math.min(1, mx / 60) * JIT;\n      if (r0 !== mx) r0 += jit[o] * amp;\n      if (g0 !== mx) g0 += jit[o + 1] * amp;\n      if (b0 !== mx) b0 += jit[o + 2] * amp;\n      buf[o] = r0;\n      buf[o + 1] = g0;\n      buf[o + 2] = b0;\n    }\n  }\n  if (P.phase === STITCH && k \u003c NS) drawNeedle(P, cur, buf);\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), clamp(buf[o], 0, 255), clamp(buf[o + 1], 0, 255), clamp(buf[o + 2], 0, 255));\n  }\n}\n\nfunction dot(buf, x, y, c) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let ch = 0; ch \u003c 3; ch++) buf[o + ch] = c[ch];\n}\n\n// The needle lies slanting on the bare canvas with its point in the next hole, and the\n// slack wool hangs in a loop from the last stitch down and up to its eye.\nfunction drawNeedle(P, chart, buf) {\n  const n = Math.floor(P.k);\n  const st = ORDER[n];\n  const u = st % SU;\n  const v = (st - u) / SU;\n  const tx = 2 * u;\n  const ty = Y0 + 2 * v + 1;\n  // On a row going down the needle lies nearly upright, on a row going up nearly level,\n  // the way basketweave is worked.\n  const dx = DOWN[st] ? -0.55 : -1;\n  const dy = DOWN[st] ? 1 : 0.55;\n  const ex = tx + dx * 7;\n  const ey = ty + dy * 7;\n  const wc = P.wool[chart[st]];\n  const yarn = [0, 1, 2].map((ch) => Math.min(255, wc[ch] * 1.25 + 24));\n  const prev = n > 0 ? ORDER[n - 1] : st;\n  const pu = prev % SU;\n  const px = 2 * pu + 1;\n  const py = Y0 + 2 * ((prev - pu) / SU);\n  // The loop swings a little as the needle is pulled through.\n  const sway = Math.sin(P.t * 2.3) * 3;\n  const sag = 13 + 2 * Math.sin(P.t * 1.7);\n  const c1x = px + 7 + sway;\n  const c1y = py + sag;\n  const c2x = ex + 1 + sway;\n  const c2y = ey + sag;\n  for (let i = 0; i \u003c= 40; i++) {\n    const t = i / 40;\n    const a = (1 - t) ** 3;\n    const b = 3 * t * (1 - t) ** 2;\n    const c = 3 * t * t * (1 - t);\n    const d = t ** 3;\n    dot(buf, a * px + b * c1x + c * c2x + d * ex, a * py + b * c1y + c * c2y + d * ey, yarn);\n  }\n  // The steel: a bright point, the shaft and the eye.\n  for (let i = 0; i \u003c= 8; i++) {\n    const g = i === 7 ? 0.4 : i === 0 ? 1 : 0.85;\n    dot(buf, tx + dx * i, ty + dy * i, [205 * g, 212 * g, 226 * g]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Wool=0..1, Speed=0.2..3, Design=0..2, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Wool","min":0,"max":1,"about":"Turns every wool in the box round the dye wheel together, starting from the natural shades: a green parrot on a teal ground."},{"name":"Speed","min":0.2,"max":3,"about":"Stitches a second, 7 at 0.2, 72 at 2 and 108 at 3; at 2 the 1920 stitches of a canvas take 27 seconds."},{"name":"Design","min":0,"max":2,"about":"Which canvas is on the frame: the parrot cushion, the rose bouquet on black or the sampler with its alphabet and house; turning it rolls the work on to that canvas, and after it the canvases follow in that order."},{"name":"Lamp","min":0,"max":1,"about":"Where the lamp stands, low on the left at 0, overhead at 0.5, low on the right at 1; the side of each stitch that faces it shines and the far side of the hole falls into shadow."}],"start":[0,2,0,0.06],"measures":{"motion":0.1581,"detail":0.3325,"edges":0.8053,"complexity":1.8885,"coverage":0.6687,"colour":0.2513,"drift":0.043},"knobResponse":[0.1114,0.0649,0.1048,0.0607]},{"slug":"neon-alley","title":"Neon Alley","family":"city","round":16,"note":"밤 골목의 벽에 유리관을 구부린 네온 그림 간판이 지붕부터 젖은 길까지 걸려서, 관이 하나씩 켜지고 화살표가 달리고 지친 관 하나가 지직거려요. K1 을 누르면 정전이 됐다가 간판이 하나씩 다시 켜지고, K2 를 누르면 간판이 새로 걸려요.","idea":"The wall of a narrow night alley hung from roof to street with neon pictograms in bent glass tube, lighting in sequence, chasing and buzzing over wet asphalt.","buttons":"K1 tap cuts the power; the signs come back one at a time, each tube stuttering as its transformer strikes. K2 tap hangs a new set of signs.","code":"// ===== Patternflow pattern =====\n// Title:   Neon Alley\n// Family:  city\n// Idea:    The wall of a narrow night alley hung from roof to street with neon pictograms in bent glass tube, lighting in sequence, chasing and buzzing over wet asphalt.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 16; the stacked shop signs of Seoul, Hong Kong and Tokyo back streets\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0..4, Wear=0..1, Rain=0..1\n//\n// Knob 1: Hue. Turns every tube round the colour wheel together, so each sign keeps its opposite pair; at 0 the alley burns its own red, green, cyan and magenta.\n// Knob 2: Pace. The tempo of the sign controllers and how many run a show: at 0 every sign holds still, at 2 about half black out and relight tube by tube or double-blink every few seconds, at 4 all of them, with hardly a pause between.\n// Knob 3: Wear. How tired the glass is: at 0 one frame tube buzzes, at 1 nearly half the tubes stutter and sag and three in ten have died dark.\n// Knob 4: Rain. A drizzle that shows only where a sign lights it, puddles that spread on the asphalt and mirror the signs, and haze that widens every glow.\n// Buttons: K1 tap cuts the power; the signs come back one at a time, each tube stuttering as its transformer strikes. K2 tap hangs a new set of signs.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rows from here down are the street.\nconst STREET = 116;\n// In dry air a tube lights the wall up to 3 LEDs out and never above 20/255,\n// so the wall counts as dark: colourfulness wants every lit LED full and\n// saturated.\nconst GLOW = 3;\n// A raindrop still takes a tube's colour 8 LEDs away from it.\nconst REACH = 8;\n// Tube LEDs the wall may carry, 30% of the panel before shows and chases\n// switch part of it off. A frame that would pass it is not hung.\nconst BUDGET = 2450;\nconst D2R = Math.PI / 180;\n\n// Hues in degrees at full saturation and value. Red, green, cyan and magenta\n// carry the most chroma a pixel can (285 on the measure's opponent axes,\n// against about 240 for this yellow and blue), so frames and pictograms take\n// those and yellow and blue stay accents. No tube is white.\nconst [R, Y, G, C, B, M, P] = [0, 54, 120, 180, 230, 300, 330];\n// [frame, pictogram, contrast, accent]: the frame across the wheel from the\n// pictogram it holds.\nconst SCHEMES = [\n  [C, M, G, Y], [M, G, Y, C], [R, C, Y, G], [G, R, C, Y], [M, C, Y, G],\n  [C, R, Y, M], [G, M, C, Y], [R, G, C, B], [P, C, G, Y], [C, M, Y, R],\n];\n\n// The layout keeps its own generator, so every panel opens on the same alley.\nfunction rng(seed) {\n  let a = seed >>> 0;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = Math.imul(a ^ (a >>> 15), a | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\nfunction shuffle(list, rnd) {\n  for (let i = list.length - 1; i > 0; i--) {\n    const j = Math.floor(rnd() * (i + 1));\n    [list[i], list[j]] = [list[j], list[i]];\n  }\n  return list;\n}\n\nfunction arc(cx, cy, rx, ry, a0, a1) {\n  const n = Math.max(3, Math.ceil((Math.abs(a1 - a0) * D2R * Math.max(rx, ry)) / 1.2));\n  const out = [];\n  for (let i = 0; i \u003c= n; i++) {\n    const a = (a0 + ((a1 - a0) * i) / n) * D2R;\n    out.push(cx + rx * Math.cos(a), cy + ry * Math.sin(a));\n  }\n  return out;\n}\n\nconst rrect = (x, y, w, h, c) => [\n  ...arc(x + c, y + c, c, c, 180, 270),\n  ...arc(x + w - c, y + c, c, c, 270, 360),\n  ...arc(x + w - c, y + h - c, c, c, 0, 90),\n  ...arc(x + c, y + h - c, c, c, 90, 180),\n];\n\n// A closed path cut into dashes of 4 LEDs with gaps of 2.5, for marquees.\nfunction dashes(pts) {\n  const out = [];\n  const n = pts.length >> 1;\n  let cur = null;\n  let s = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const ax = pts[2 * i];\n    const ay = pts[2 * i + 1];\n    const dx = pts[(2 * i + 2) % (2 * n)] - ax;\n    const dy = pts[(2 * i + 3) % (2 * n)] - ay;\n    const m = Math.ceil(Math.hypot(dx, dy) * 2);\n    for (let j = 0; j \u003c m; j++, s += Math.hypot(dx, dy) / m)\n      if (s % 6.5 \u003c 4) {\n        if (!cur) out.push((cur = []));\n        cur.push(ax + (dx * j) / m, ay + (dy * j) / m);\n      } else cur = null;\n  }\n  return out;\n}\n\n// The pictograms, each drawn in a box w by h at scale 1. T(group, role,\n// closed, points, radius) bends one tube: the group is what the sign's\n// controller switches, the role picks the colour (0 pictogram, 1 contrast,\n// 2 accent). The radius of 1.05 makes a tube two LEDs thick along the grid\n// lines and three between them. anim(group, t) is whether that group is lit\n// at t seconds of the controller's clock.\nconst ICONS = [\n  {\n    // A heart with an arrow through it: the love motel on the corner.\n    w: 26, h: 21,\n    draw(T) {\n      const pts = [];\n      for (let i = 0; i \u003c 44; i++) {\n        const t = (i / 44) * 2 * Math.PI;\n        const q = Math.sin(t);\n        pts.push(13 + 9.9 * q * q * q, 9 - 0.62 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)));\n      }\n      T(0, 0, 1, pts);\n      T(1, 2, 0, [0.6, 16.8, 0.6, 20.4, 4.2, 20.4], 0.95);\n      T(1, 2, 0, [0.6, 20.4, 6.5, 17.2], 0.95);\n      T(2, 2, 0, [20, 6.8, 25.4, 3.8], 0.95);\n      T(2, 2, 0, [21.8, 2.9, 25.4, 3.8, 24.3, 7.2], 0.95);\n    },\n    // The heart drops out twice a beat, lub and dub; the arrow flies in,\n    // fletching first.\n    anim(g, t) {\n      const c = t % 1.3;\n      if (!g) return c \u003c 0.09 || (c > 0.22 && c \u003c 0.31) ? 0 : 1;\n      return t % 6 > (g === 1 ? 0.3 : 0.6) ? 1 : 0;\n    },\n  },\n  {\n    // A cat's face for the cat cafe, whiskers out past its cheeks.\n    w: 38, h: 23,\n    draw(T) {\n      T(0, 0, 1, [8.2, 14.4, 7.5, 9, 9, 1.8, 15, 6, 23, 6, 29, 1.8, 30.5, 9, ...arc(19, 13, 11, 8, 10, 170)]);\n      T(1, 1, 0, [14, 12.5, 16, 12.5], 1.3);\n      T(1, 1, 0, [22, 12.5, 24, 12.5], 1.3);\n      T(2, 2, 0, [19, 16.6], 1.25);\n      for (const s of [-1, 1]) {\n        T(3, 2, 0, [19 + s * 11.4, 16, 19 + s * 18, 14], 0.9);\n        T(3, 2, 0, [19 + s * 11.4, 18.5, 19 + s * 18, 19.6], 0.9);\n      }\n    },\n    // It blinks every 3.4 s and twitches its whiskers every 5.3 s.\n    anim(g, t) {\n      if (g === 1) return t % 3.4 \u003c 0.15 ? 0 : 1;\n      return g === 3 && t % 5.3 > 5.05 && t % 5.3 \u003c 5.17 ? 0 : 1;\n    },\n  },\n  {\n    // A martini with an olive on a pick: the basement bar.\n    w: 25, h: 30,\n    draw(T) {\n      T(0, 0, 1, [0.5, 3.5, 24.5, 3.5, 12.5, 16]);\n      T(0, 0, 0, [12.5, 16, 12.5, 27.5]);\n      T(0, 0, 0, [6, 28.5, 19, 28.5]);\n      T(1, 1, 1, arc(12.5, 8.8, 1.6, 1.6, 0, 360), 1.1);\n      T(2, 2, 0, [19.5, 0.5, 14, 7.5], 0.9);\n    },\n    // The olive drops in: dark for the first half second of every 4.\n    anim: (g, t) => (g === 1 && t % 4 \u003c 0.5 ? 0 : 1),\n  },\n  {\n    // A noodle bowl with chopsticks and three columns of steam.\n    w: 31, h: 28,\n    draw(T) {\n      T(0, 0, 1, [0.5, 14, 30.5, 14, ...arc(15.5, 14, 15, 9, 0, 180)]);\n      T(0, 0, 0, [10, 26.5, 21, 26.5]);\n      const nd = [];\n      for (let x = 7; x \u003c= 24; x++) nd.push(x, 18.8 + 1.3 * Math.sin(x * 1.1));\n      T(7, 2, 0, nd, 0.9);\n      T(7, 2, 0, [17, 12, 26, 0.8], 0.9);\n      T(7, 2, 0, [21, 12, 30.5, 2.8], 0.9);\n      for (let c = 0; c \u003c 3; c++)\n        for (let k = 0; k \u003c 2; k++) {\n          const s = [];\n          for (let y = 11 - k * 5.5; y >= 5.5 - k * 5.5; y--) s.push(4 + c * 5 + 1.2 * Math.sin(y * 0.9 + c), y);\n          T(1 + c * 2 + k, 1, 0, s, 0.9);\n        }\n    },\n    // Each steam column lights low, then high, then breaks, a third of a\n    // cycle behind its neighbour.\n    anim(g, t) {\n      if (!g || g > 6) return 1;\n      const f = (t * 0.7 + ((g - 1) >> 1) * 0.33) % 1;\n      return (g - 1) & 1 ? (f > 0.25 && f \u003c 0.9 ? 1 : 0) : f \u003c 0.65 ? 1 : 0;\n    },\n  },\n  {\n    // The pharmacy cross: an outline round a solid cross.\n    w: 24, h: 24,\n    draw(T) {\n      T(0, 0, 1, [7.5, 0.5, 16.5, 0.5, 16.5, 7.5, 23.5, 7.5, 23.5, 16.5, 16.5, 16.5, 16.5, 23.5, 7.5, 23.5, 7.5, 16.5, 0.5, 16.5, 0.5, 7.5, 7.5, 7.5]);\n      T(1, 1, 0, [12, 4.5, 12, 19.5], 1.5);\n      T(1, 1, 0, [4.5, 12, 19.5, 12], 1.5);\n    },\n    // The inside alone, the outline alone, then both, every 2.6 s.\n    anim(g, t) {\n      const c = t % 2.6;\n      return g ? (c \u003c 0.35 || c > 0.7 ? 1 : 0) : c \u003c 0.35 ? 0 : 1;\n    },\n  },\n  {\n    // Two beamed quavers and the sound they make: the karaoke rooms upstairs.\n    w: 32, h: 26,\n    draw(T) {\n      T(0, 0, 1, arc(4, 21.5, 2.2, 1.3, 0, 360), 1.15);\n      T(0, 0, 1, arc(16, 18.5, 2.2, 1.3, 0, 360), 1.15);\n      T(0, 0, 0, [6.4, 21, 6.4, 4]);\n      T(0, 0, 0, [18.4, 18, 18.4, 1]);\n      T(0, 0, 0, [6.4, 4, 18.4, 1], 1.5);\n      T(0, 0, 0, [6.4, 8.5, 18.4, 5.5]);\n      for (let k = 0; k \u003c 3; k++) T(1 + k, 1, 0, arc(21, 12, 3.5 + k * 3.2, 3.5 + k * 3.2, -40, 40), 0.95);\n    },\n    // The sound waves light outward and go out together.\n    anim(g, t) {\n      const f = (t * 0.8) % 1;\n      return !g || (f >= (g - 1) * 0.18 && f \u003c 0.86) ? 1 : 0;\n    },\n  },\n  {\n    // A molar with a sparkle: the dentist on the third floor.\n    w: 30, h: 24,\n    draw(T) {\n      T(0, 0, 1, [...arc(6.5, 6, 4.5, 4.5, 180, 300), 11, 4, ...arc(15.5, 6, 4.5, 4.5, 240, 360), 19.5, 12, 17.5, 22.5, 15, 22.5, 13, 15.5, 9, 15.5, 7, 22.5, 4.5, 22.5, 2.5, 12]);\n      T(1, 1, 0, [25.5, 0.8, 25.5, 8.2], 0.9);\n      T(1, 1, 0, [21.8, 4.5, 29.2, 4.5], 0.9);\n    },\n    anim: (g, t) => (g && t % 2.2 > 1.2 ? 0 : 1),\n  },\n  {\n    // An eye with lashes whose iris looks about: the fortune teller.\n    w: 30, h: 22,\n    draw(T) {\n      const up = (x) => 13 - 9 * (1 - ((x - 15) / 14.5) ** 2);\n      const lid = [];\n      for (let i = 0; i \u003c= 20; i++) lid.push(0.5 + i * 1.45, up(0.5 + i * 1.45));\n      for (let i = 19; i > 0; i--) lid.push(0.5 + i * 1.45, 13 + 7 * (1 - ((i * 1.45 - 14.5) / 14.5) ** 2));\n      T(0, 0, 1, lid);\n      T(0, 0, 0, [7.5, up(7.5), 5.6, 2.4], 0.9);\n      T(0, 0, 0, [15, up(15), 15, 0.6], 0.9);\n      T(0, 0, 0, [22.5, up(22.5), 24.4, 2.4], 0.9);\n      for (let k = 0; k \u003c 3; k++) {\n        T(1 + k, 1, 1, arc(11 + 4 * k, 12.6, 3.2, 3.2, 0, 360));\n        T(1 + k, 2, 0, [11 + 4 * k, 12.6], 1);\n      }\n    },\n    // Ahead 2 s, left, ahead, right, ahead; the lids blink every 4.7 s.\n    anim(g, t) {\n      if (!g) return t % 4.7 \u003c 0.12 ? 0 : 1;\n      const c = t % 5;\n      return g === (c \u003c 2 ? 2 : c \u003c 3 ? 1 : c \u003c 3.5 ? 2 : c \u003c 4.5 ? 3 : 2) ? 1 : 0;\n    },\n  },\n  {\n    // Scissors that snip: the hair salon.\n    w: 24, h: 27,\n    draw(T) {\n      T(0, 0, 1, arc(6, 22.5, 3.4, 3.4, 0, 360));\n      T(0, 0, 1, arc(18, 22.5, 3.4, 3.4, 0, 360));\n      T(1, 1, 0, [8.6, 19.8, 19.5, 1], 1);\n      T(1, 1, 0, [15.4, 19.8, 4.5, 1], 1);\n      T(2, 1, 0, [8.6, 19.8, 14, 0.8], 1);\n      T(2, 1, 0, [15.4, 19.8, 10, 0.8], 1);\n    },\n    // Snip, snip, then hold open.\n    anim(g, t) {\n      const c = t % 2.4;\n      return !g || (g === 2) === (c \u003c 0.2 || (c > 0.45 && c \u003c 0.65)) ? 1 : 0;\n    },\n  },\n  {\n    // A beer mug with a head of foam and rising bubbles: the hof downstairs.\n    w: 26, h: 28,\n    draw(T) {\n      T(0, 0, 1, [2.5, 7, 2.5, 26.5, 18.5, 26.5, 18.5, 7]);\n      T(0, 0, 0, arc(18.5, 15.5, 5.5, 5.5, -70, 70));\n      T(1, 1, 0, [...arc(4.5, 5.5, 3.5, 3.5, 150, 320), ...arc(10.5, 4, 3.5, 3.5, 210, 330), ...arc(16.5, 5.5, 3.5, 3.5, 220, 390)]);\n      for (let k = 0; k \u003c 3; k++) T(2 + k, 2, 0, [7 + (k & 1) * 6, 22 - k * 5], 1);\n    },\n    // Bubbles rise from the bottom of the glass, one after another.\n    anim(g, t) {\n      return g \u003c 2 || ((t * 1.2) % 1) * 4 > g - 2 ? 1 : 0;\n    },\n  },\n];\n\n// Puddles on the asphalt: centre column, row below the kerb, half width.\nconst PUDDLES = [[10, 4, 9], [36, 6, 12], [58, 3, 7], [22, 11, 7], [52, 11, 8]];\n\n// Slots [x, y, w, h, kind] on the wall above the street: f a pictogram hung\n// bare, b in a rounded box, r in a ring, w a pictogram led to by chevrons, s an\n// arrow strip in a marquee frame, v a blade sign whose arrow points down the\n// basement stairs. Each layout also comes mirrored.\nconst TEMPLATES = [\n  [[0, 0, 64, 33, \"f\"], [1, 36, 17, 51, \"v\"], [20, 36, 43, 29, \"b\"], [20, 67, 43, 21, \"f\"], [1, 90, 62, 25, \"w\"]],\n  [[1, 1, 30, 31, \"b\"], [33, 1, 30, 31, \"r\"], [0, 35, 64, 33, \"f\"], [1, 71, 43, 26, \"b\"], [46, 71, 17, 44, \"v\"], [1, 100, 43, 15, \"s\"]],\n  [[1, 1, 17, 56, \"v\"], [20, 1, 43, 28, \"b\"], [20, 31, 43, 26, \"f\"], [1, 60, 62, 25, \"w\"], [0, 88, 64, 27, \"f\"]],\n];\n\nfunction stroke(S, id, pts, closed, r) {\n  const n = pts.length >> 1;\n  const R = r + REACH;\n  for (let s = 0; s \u003c (n \u003c 2 ? 1 : closed ? n : n - 1); s++) {\n    const ax = pts[2 * s];\n    const ay = pts[2 * s + 1];\n    const j = n \u003c 2 ? s : (s + 1) % n;\n    const dx = pts[2 * j] - ax;\n    const dy = pts[2 * j + 1] - ay;\n    const L2 = dx * dx + dy * dy;\n    const y1 = Math.min(STREET - 1, Math.ceil(Math.max(ay, ay + dy) + R));\n    const x1 = Math.min(W - 1, Math.ceil(Math.max(ax, ax + dx) + R));\n    for (let y = Math.max(0, Math.floor(Math.min(ay, ay + dy) - R)); y \u003c= y1; y++)\n      for (let x = Math.max(0, Math.floor(Math.min(ax, ax + dx) - R)); x \u003c= x1; x++) {\n        const px = x + 0.5 - ax;\n        const py = y + 0.5 - ay;\n        const u = L2 > 0 ? Math.min(1, Math.max(0, (px * dx + py * dy) / L2)) : 0;\n        const g = Math.hypot(px - u * dx, py - u * dy) - r;\n        const p = y * W + x;\n        if (g \u003c S.gap[p]) {\n          S.gap[p] = g;\n          S.own[p] = id;\n        }\n      }\n  }\n}\n\n// kind 0 follows the pictogram's anim, 1 is chevron k of n in a chase, 2 is\n// steady, 3 is a marquee dash.\nfunction tube(S, sg, hue, kind, k, n, order, r, closed, pts) {\n  S.tubes.push({ s: sg.i, hue, kind, k, n, order });\n  stroke(S, S.tubes.length - 1, pts, closed, r);\n}\n\n// Chevrons pointing dir (1 right, -1 left, 0 down) across a box; the chase\n// runs toward the point.\nfunction chevrons(S, sg, hue, x0, y0, w, h, dir) {\n  const across = dir ? w : h;\n  const d = (dir ? h : w) * 0.36;\n  const step = d + 3.4;\n  const n = Math.max(2, Math.floor((across - d) / step) + 1);\n  const o = (across - d - (n - 1) * step) / 2;\n  for (let k = 0; k \u003c n; k++) {\n    const c = o + k * step;\n    const pts = dir\n      ? [x0 + c + (dir \u003c 0 ? d : 0), y0, x0 + c + (dir \u003c 0 ? 0 : d), y0 + h / 2, x0 + c + (dir \u003c 0 ? d : 0), y0 + h]\n      : [x0, y0 + c, x0 + w / 2, y0 + c + d, x0 + w, y0 + c];\n    tube(S, sg, hue, 1, dir \u003c 0 ? n - 1 - k : k, n, 1 + k, 1.05, 0, pts);\n  }\n}\n\n// Hang a pictogram not hung yet, the bigger it fits the likelier, or the one\n// that fits best if none fits at 0.8; returns its width.\nfunction hang(S, sg, left, bx, by, bw, bh, cap, rnd, align, mw = bw) {\n  let best = -1;\n  let score = -1e9;\n  for (const i of left) {\n    const s = Math.min(cap, mw / ICONS[i].w, bh / ICONS[i].h);\n    const v = s >= 0.8 ? 10 + s + rnd() * 1.5 : s * 4 + rnd();\n    if (v > score) [score, best] = [v, i];\n  }\n  left.splice(left.indexOf(best), 1);\n  const ic = ICONS[best];\n  const s = Math.min(cap, mw / ic.w, bh / ic.h);\n  const x = bx + (align \u003c 0 ? 0 : align > 0 ? bw - ic.w * s : (bw - ic.w * s) / 2);\n  const y = by + (bh - ic.h * s) / 2;\n  sg.icon = best;\n  ic.draw((g, role, closed, pts, r = 1.05) => tube(S, sg, sg.hues[1 + role], 0, g, 0, 1 + sg.count++, s > 1.2 ? r * 1.25 : r, closed, pts.map((v, i) => (i & 1 ? y : x) + v * s)));\n  return ic.w * s;\n}\n\nfunction build(S, seed) {\n  const rnd = rng(seed * 7919 + 13);\n  S.own.fill(-1);\n  S.gap.fill(99);\n  S.tubes = [];\n  S.signs = [];\n  const tpl = TEMPLATES[Math.floor(rnd() * TEMPLATES.length)];\n  const flip = rnd() \u003c 0.5;\n  const left = shuffle([...ICONS.keys()], rnd);\n  const schemes = shuffle([...SCHEMES.keys()], rnd);\n  const frames = [];\n  // Arrow strips point at the blade.\n  let toward = 1;\n  for (const s of tpl) if (s[4] === \"v\") toward = (flip ? W - s[0] - s[2] : s[0]) \u003c W / 2 ? -1 : 1;\n  tpl.forEach(([sx, y, w, h, kind], i) => {\n    const x = flip ? W - sx - w : sx;\n    const hues = SCHEMES[schemes[i]];\n    const r = rnd();\n    const sg = { i, hues, icon: -1, count: 0, prog: r \u003c 0.6 ? 1 : 2, busy: rnd(), hold: 0.6 + rnd() * 0.8, ph: rnd() * 11, ign: 0 };\n    S.signs.push(sg);\n    const frame = (inset, k, hue, c) => frames.push([sg, hue, k, rrect(x + inset, y + inset, w - 2 * inset, h - 2 * inset, c), inset > 2 ? 1 : 0, 2 * (w + h - 4 * inset)]);\n    if (kind === \"v\" || kind === \"s\") {\n      sg.prog = 0;\n      frame(1.5, kind === \"s\" ? 3 : 2, hues[0], 3);\n      if (kind === \"v\") chevrons(S, sg, hues[1], x + 4, y + 6, w - 8, h - 12, 0);\n      else chevrons(S, sg, hues[3], x + 6, y + 4.5, w - 12, h - 9, toward);\n    } else if (kind === \"w\") {\n      const side = rnd() \u003c 0.5 ? -1 : 1;\n      const iw = hang(S, sg, left, x + 6, y + 4.5, w - 12, h - 9, 1.35, rnd, side, w * 0.55);\n      const ch = Math.min(14, h - 12);\n      const a = side > 0 ? x + 6 : x + 9 + iw;\n      chevrons(S, sg, hues[2], a, y + (h - ch) / 2, w - 15 - iw, ch, side);\n      frame(1.5, 2, hues[0], 4);\n    } else {\n      const inset = kind === \"f\" ? 1 : kind === \"r\" ? Math.min(w, h) * 0.15 + 1.5 : 5;\n      hang(S, sg, left, x + inset, y + inset, w - 2 * inset, h - 2 * inset, kind === \"f\" ? 1.6 : 1.35, rnd, 0);\n      if (kind === \"b\") frame(1.5, 2, hues[0], 4);\n      if (kind === \"r\") frames.push([sg, hues[0], 2, arc(x + w / 2, y + h / 2, w / 2 - 1.5, h / 2 - 1.5, 0, 360), 0, 1.6 * (w + h)]);\n    }\n  });\n  // Count what pictograms and arrows already light, then hang the frames in a\n  // shuffled order while the wall has budget for them.\n  let lit = 0;\n  for (let p = 0; p \u003c STREET * W; p++) if (S.gap[p] \u003c= 0) lit++;\n  for (const [sg, hue, k, pts, order, perim] of shuffle(frames, rnd)) {\n    const est = perim * 2.1 * (k === 3 ? 0.62 : 1);\n    if (lit + est > BUDGET) continue;\n    lit += est;\n    if (k === 3) dashes(pts).forEach((d, j) => tube(S, sg, hue, 3, j % 3, 3, order, 1.05, 0, d));\n    else tube(S, sg, hue, 2, 0, 0, order, 1.05, 1, pts);\n  }\n  const nt = S.tubes.length;\n  S.tb = new Float32Array(nt);\n  S.rgb = new Float32Array(nt * 3);\n  S.fm = new Uint8Array(nt);\n  S.ft = new Float32Array(nt);\n  S.fv = new Float32Array(nt).fill(1);\n  // Rank the tubes for wear: low ranks tire first, high ranks die first, and\n  // a long tube is likelier to die. Rank 0, the tube that always buzzes, is\n  // the longest frame.\n  const size = new Float32Array(nt);\n  for (let p = 0; p \u003c STREET * W; p++) if (S.gap[p] \u003c= 0) size[S.own[p]]++;\n  const key = [...size].map((v) => rnd() * Math.sqrt(v));\n  const order = [...Array(nt).keys()].sort((a, b) => key[a] - key[b]);\n  let tired = order[0];\n  for (let i = 0; i \u003c nt; i++) if (S.tubes[i].kind === 2 && size[i] > size[tired]) tired = i;\n  order.splice(order.indexOf(tired), 1);\n  order.unshift(tired);\n  order.forEach((t, rank) => (S.tubes[t].rank = rank));\n}\n\nfunction hsv(h, out, o) {\n  h = (((h % 360) + 360) % 360) / 60;\n  const i = Math.floor(h);\n  const up = 255 * (h - i);\n  const down = 255 - up;\n  out[o] = [255, down, 0, 0, up, 255][i];\n  out[o + 1] = [up, 255, 255, down, 0, 0][i];\n  out[o + 2] = [0, 0, up, 255, 255, down][i];\n}\n\n// The controller over a whole sign: a sequence that blacks the sign out and\n// lights it tube by tube, then holds, or a double blink, then holds. The\n// hold shrinks as Pace rises, and a sign runs its show at all only when the\n// night is busy enough for it; otherwise it stays lit.\nfunction signOn(sg, order, t, show, hold) {\n  if (!sg.prog || sg.busy >= show) return 1;\n  const c = (t + sg.ph) % ((sg.prog === 1 ? 0.6 + sg.count * 0.2 : 0.45) + sg.hold * hold);\n  if (sg.prog === 1) return c >= 0.6 + order * 0.2;\n  return !(c \u003c 0.15 || (c > 0.3 && c \u003c 0.45));\n}\n\nfunction tubeOn(sg, tb, t) {\n  if (tb.kind === 0) return ICONS[sg.icon].anim(tb.k, t + sg.ph);\n  if (tb.kind === 1) return (((t * 1.1 - tb.k / tb.n) % 1) + 1) % 1 \u003c 0.55 ? 1 : 0;\n  if (tb.kind === 3) return (Math.floor(t * 4) + tb.k) % 3 ? 1 : 0;\n  return 1;\n}\n\n// A tired tube: steady stretches, then a buzz of random stutter or a dropout.\n// As wear rises the stretches shorten and the steady glow sinks.\nfunction flicker(S, i, dt, wear) {\n  if ((S.ft[i] -= dt) \u003c= 0) {\n    const steady = S.fm[i] === 0;\n    S.fm[i] = steady ? (Math.random() \u003c 0.7 ? 1 : 2) : 0;\n    S.ft[i] = !steady ? (0.6 + Math.random() * 3) / (0.6 + wear * 3) : S.fm[i] === 1 ? 0.25 + Math.random() * 0.8 : 0.08 + Math.random() * 0.4;\n  }\n  if (S.fm[i] === 1) {\n    if (Math.random() \u003c 0.45) S.fv[i] = Math.random() \u003c 0.5 ? 1 : 0.15 + Math.random() * 0.35;\n    return S.fv[i];\n  }\n  return S.fm[i] === 2 ? 0 : 1 - wear * 0.3;\n}\n\nexport function setup(params) {\n  Object.assign(params, { own: new Int16Array(N), gap: new Float32Array(N), buf: new Uint8ClampedArray(N * 3), tubes: null, t: 0, clk: 0, cut: -1, hue: 0, rain: 0.06, drops: [] });\n  params.seed = 5;\n  for (let i = 0; i \u003c 300; i++) params.drops.push({ x: Math.random() * (W + 12) - 6, y: Math.random() * H, v: 70 + Math.random() * 50, n: 4 + Math.floor(Math.random() * 5) });\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const k = input.knobValues || [];\n  const wear = k[2] ?? 0;\n  S.hue = (k[0] ?? 0) * 360;\n  S.rain = k[3] ?? 0.06;\n  const pr = input.btnPressed || [];\n  if (!S.tubes || pr[1]) {\n    if (S.tubes) S.seed++;\n    build(S, S.seed);\n  }\n  if (pr[0]) {\n    // Power cut: the signs strike again in a shuffled order, half a second apart.\n    S.cut = 0;\n    shuffle(S.signs.map((s, i) => i), Math.random).forEach((si, n) => (S.signs[si].ign = 1.2 + n * 0.5 + Math.random() * 0.2));\n  }\n  S.t += dt;\n  const pace = k[1] ?? 2;\n  const show = pace / 3.6;\n  S.clk += dt * pace;\n  if (S.cut >= 0 && (S.cut += dt) > Math.max(...S.signs.map((s) => s.ign)) + 0.8) S.cut = -1;\n  const T = S.tubes;\n  const nt = T.length;\n  const tired = 1 + Math.floor(wear * 0.45 * nt);\n  const dead = Math.floor(wear * 0.3 * nt);\n  for (let i = 0; i \u003c nt; i++) {\n    const tb = T[i];\n    const sg = S.signs[tb.s];\n    let on = signOn(sg, tb.order, S.clk, show, 12 / Math.max(0.1, pace * pace)) ? tubeOn(sg, tb, S.clk) : 0;\n    if (tb.rank \u003c tired) on *= flicker(S, i, dt, wear);\n    if (tb.rank >= nt - dead) on = 0;\n    if (S.cut >= 0) {\n      // A transformer strikes over 0.7 s, the tube catching more often as it warms.\n      const u = (S.cut - sg.ign) / 0.7;\n      on *= u \u003c 0 ? 0 : u >= 1 || Math.random() \u003c 0.2 + 0.8 * u ? 1 : 0;\n    }\n    S.tb[i] = on;\n    hsv(tb.hue + S.hue, S.rgb, i * 3);\n  }\n  const n = Math.round(S.rain * S.drops.length);\n  for (let i = 0; i \u003c n; i++) {\n    const d = S.drops[i];\n    d.y += d.v * dt;\n    d.x += d.v * dt * 0.1;\n    if (d.y - d.n > H) {\n      d.y = -Math.random() * 20;\n      d.x = Math.random() * (W + 12) - 12;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.tubes) return;\n  const { buf, rgb } = S;\n  buf.fill(0);\n  // Rain hazes the air: the glow reaches further and brightens past the 24/255\n  // the wall otherwise stays under.\n  const haze = Math.max(0, S.rain - 0.1);\n  const reach = GLOW + haze * 3.5;\n  const glow = (20 + haze * 110) / 255;\n  for (let p = 0; p \u003c STREET * W; p++) {\n    const o = S.own[p];\n    const g = S.gap[p];\n    if (o \u003c 0 || g >= reach) continue;\n    const b = S.tb[o];\n    // An unlit tube is still glass: its own colour at 14/255.\n    const f = 1 - g / reach;\n    const lv = g \u003c= 0 ? Math.max(b, 0.055) : glow * f * f * b;\n    for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] = rgb[o * 3 + c] * lv;\n  }\n  // The street mirrors the bottom of the wall, shivering. Asphalt gives back\n  // next to nothing; the puddles, low ellipses in the view, give back half\n  // and spread as the rain comes on.\n  const grow = 0.85 + S.rain;\n  for (let d = 0; d \u003c H - STREET; d++) {\n    const ys = STREET - 1 - d;\n    for (let x = 0; x \u003c W; x++) {\n      let wet = 0;\n      for (const [cx, cd, rx] of PUDDLES) wet = Math.max(wet, (1 - ((x - cx) / (rx * grow)) ** 2 - ((d - cd) / (rx * grow * 0.36)) ** 2) * 3);\n      const lv = (0.04 + 0.56 * Math.min(1, wet)) * (1 - d / 24);\n      const xs = x + Math.round(Math.sin(d * 1.3 + S.t * 3) * (0.6 + S.rain));\n      if (xs \u003c 0 || xs >= W) continue;\n      const q = (ys * W + xs) * 3;\n      const p = ((STREET + d) * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[p + c] = buf[q + c] * lv;\n    }\n  }\n  // Rain shows only where a tube lights it, in that tube's colour.\n  const n = Math.round(S.rain * S.drops.length);\n  for (let i = 0; i \u003c n; i++) {\n    const dr = S.drops[i];\n    for (let j = 0; j \u003c dr.n; j++) {\n      const y = Math.floor(dr.y) - j;\n      const x = Math.floor(dr.x - j * 0.1);\n      if (y \u003c 0 || y >= H || x \u003c 0 || x >= W) continue;\n      const p = y * W + x;\n      const fade = 1 - (j / dr.n) * 0.6;\n      if (y >= STREET) {\n        for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] *= 1.8;\n        continue;\n      }\n      const o = S.own[p];\n      const g = S.gap[p];\n      if (o \u003c 0 || g \u003c= 0) continue;\n      const lv = (0.9 - (0.7 * g) / REACH) * S.tb[o] * fade;\n      for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] = Math.max(buf[p * 3 + c], rgb[o * 3 + c] * lv);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      if (buf[p] | buf[p + 1] | buf[p + 2]) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n    }\n}\n","layer":{"id":"layer-neon-alley","type":"code","name":"neon-alley","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Neon Alley\n// Family:  city\n// Idea:    The wall of a narrow night alley hung from roof to street with neon pictograms in bent glass tube, lighting in sequence, chasing and buzzing over wet asphalt.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 16; the stacked shop signs of Seoul, Hong Kong and Tokyo back streets\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0..4, Wear=0..1, Rain=0..1\n//\n// Knob 1: Hue. Turns every tube round the colour wheel together, so each sign keeps its opposite pair; at 0 the alley burns its own red, green, cyan and magenta.\n// Knob 2: Pace. The tempo of the sign controllers and how many run a show: at 0 every sign holds still, at 2 about half black out and relight tube by tube or double-blink every few seconds, at 4 all of them, with hardly a pause between.\n// Knob 3: Wear. How tired the glass is: at 0 one frame tube buzzes, at 1 nearly half the tubes stutter and sag and three in ten have died dark.\n// Knob 4: Rain. A drizzle that shows only where a sign lights it, puddles that spread on the asphalt and mirror the signs, and haze that widens every glow.\n// Buttons: K1 tap cuts the power; the signs come back one at a time, each tube stuttering as its transformer strikes. K2 tap hangs a new set of signs.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rows from here down are the street.\nconst STREET = 116;\n// In dry air a tube lights the wall up to 3 LEDs out and never above 20/255,\n// so the wall counts as dark: colourfulness wants every lit LED full and\n// saturated.\nconst GLOW = 3;\n// A raindrop still takes a tube's colour 8 LEDs away from it.\nconst REACH = 8;\n// Tube LEDs the wall may carry, 30% of the panel before shows and chases\n// switch part of it off. A frame that would pass it is not hung.\nconst BUDGET = 2450;\nconst D2R = Math.PI / 180;\n\n// Hues in degrees at full saturation and value. Red, green, cyan and magenta\n// carry the most chroma a pixel can (285 on the measure's opponent axes,\n// against about 240 for this yellow and blue), so frames and pictograms take\n// those and yellow and blue stay accents. No tube is white.\nconst [R, Y, G, C, B, M, P] = [0, 54, 120, 180, 230, 300, 330];\n// [frame, pictogram, contrast, accent]: the frame across the wheel from the\n// pictogram it holds.\nconst SCHEMES = [\n  [C, M, G, Y], [M, G, Y, C], [R, C, Y, G], [G, R, C, Y], [M, C, Y, G],\n  [C, R, Y, M], [G, M, C, Y], [R, G, C, B], [P, C, G, Y], [C, M, Y, R],\n];\n\n// The layout keeps its own generator, so every panel opens on the same alley.\nfunction rng(seed) {\n  let a = seed >>> 0;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = Math.imul(a ^ (a >>> 15), a | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\nfunction shuffle(list, rnd) {\n  for (let i = list.length - 1; i > 0; i--) {\n    const j = Math.floor(rnd() * (i + 1));\n    [list[i], list[j]] = [list[j], list[i]];\n  }\n  return list;\n}\n\nfunction arc(cx, cy, rx, ry, a0, a1) {\n  const n = Math.max(3, Math.ceil((Math.abs(a1 - a0) * D2R * Math.max(rx, ry)) / 1.2));\n  const out = [];\n  for (let i = 0; i \u003c= n; i++) {\n    const a = (a0 + ((a1 - a0) * i) / n) * D2R;\n    out.push(cx + rx * Math.cos(a), cy + ry * Math.sin(a));\n  }\n  return out;\n}\n\nconst rrect = (x, y, w, h, c) => [\n  ...arc(x + c, y + c, c, c, 180, 270),\n  ...arc(x + w - c, y + c, c, c, 270, 360),\n  ...arc(x + w - c, y + h - c, c, c, 0, 90),\n  ...arc(x + c, y + h - c, c, c, 90, 180),\n];\n\n// A closed path cut into dashes of 4 LEDs with gaps of 2.5, for marquees.\nfunction dashes(pts) {\n  const out = [];\n  const n = pts.length >> 1;\n  let cur = null;\n  let s = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const ax = pts[2 * i];\n    const ay = pts[2 * i + 1];\n    const dx = pts[(2 * i + 2) % (2 * n)] - ax;\n    const dy = pts[(2 * i + 3) % (2 * n)] - ay;\n    const m = Math.ceil(Math.hypot(dx, dy) * 2);\n    for (let j = 0; j \u003c m; j++, s += Math.hypot(dx, dy) / m)\n      if (s % 6.5 \u003c 4) {\n        if (!cur) out.push((cur = []));\n        cur.push(ax + (dx * j) / m, ay + (dy * j) / m);\n      } else cur = null;\n  }\n  return out;\n}\n\n// The pictograms, each drawn in a box w by h at scale 1. T(group, role,\n// closed, points, radius) bends one tube: the group is what the sign's\n// controller switches, the role picks the colour (0 pictogram, 1 contrast,\n// 2 accent). The radius of 1.05 makes a tube two LEDs thick along the grid\n// lines and three between them. anim(group, t) is whether that group is lit\n// at t seconds of the controller's clock.\nconst ICONS = [\n  {\n    // A heart with an arrow through it: the love motel on the corner.\n    w: 26, h: 21,\n    draw(T) {\n      const pts = [];\n      for (let i = 0; i \u003c 44; i++) {\n        const t = (i / 44) * 2 * Math.PI;\n        const q = Math.sin(t);\n        pts.push(13 + 9.9 * q * q * q, 9 - 0.62 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)));\n      }\n      T(0, 0, 1, pts);\n      T(1, 2, 0, [0.6, 16.8, 0.6, 20.4, 4.2, 20.4], 0.95);\n      T(1, 2, 0, [0.6, 20.4, 6.5, 17.2], 0.95);\n      T(2, 2, 0, [20, 6.8, 25.4, 3.8], 0.95);\n      T(2, 2, 0, [21.8, 2.9, 25.4, 3.8, 24.3, 7.2], 0.95);\n    },\n    // The heart drops out twice a beat, lub and dub; the arrow flies in,\n    // fletching first.\n    anim(g, t) {\n      const c = t % 1.3;\n      if (!g) return c \u003c 0.09 || (c > 0.22 && c \u003c 0.31) ? 0 : 1;\n      return t % 6 > (g === 1 ? 0.3 : 0.6) ? 1 : 0;\n    },\n  },\n  {\n    // A cat's face for the cat cafe, whiskers out past its cheeks.\n    w: 38, h: 23,\n    draw(T) {\n      T(0, 0, 1, [8.2, 14.4, 7.5, 9, 9, 1.8, 15, 6, 23, 6, 29, 1.8, 30.5, 9, ...arc(19, 13, 11, 8, 10, 170)]);\n      T(1, 1, 0, [14, 12.5, 16, 12.5], 1.3);\n      T(1, 1, 0, [22, 12.5, 24, 12.5], 1.3);\n      T(2, 2, 0, [19, 16.6], 1.25);\n      for (const s of [-1, 1]) {\n        T(3, 2, 0, [19 + s * 11.4, 16, 19 + s * 18, 14], 0.9);\n        T(3, 2, 0, [19 + s * 11.4, 18.5, 19 + s * 18, 19.6], 0.9);\n      }\n    },\n    // It blinks every 3.4 s and twitches its whiskers every 5.3 s.\n    anim(g, t) {\n      if (g === 1) return t % 3.4 \u003c 0.15 ? 0 : 1;\n      return g === 3 && t % 5.3 > 5.05 && t % 5.3 \u003c 5.17 ? 0 : 1;\n    },\n  },\n  {\n    // A martini with an olive on a pick: the basement bar.\n    w: 25, h: 30,\n    draw(T) {\n      T(0, 0, 1, [0.5, 3.5, 24.5, 3.5, 12.5, 16]);\n      T(0, 0, 0, [12.5, 16, 12.5, 27.5]);\n      T(0, 0, 0, [6, 28.5, 19, 28.5]);\n      T(1, 1, 1, arc(12.5, 8.8, 1.6, 1.6, 0, 360), 1.1);\n      T(2, 2, 0, [19.5, 0.5, 14, 7.5], 0.9);\n    },\n    // The olive drops in: dark for the first half second of every 4.\n    anim: (g, t) => (g === 1 && t % 4 \u003c 0.5 ? 0 : 1),\n  },\n  {\n    // A noodle bowl with chopsticks and three columns of steam.\n    w: 31, h: 28,\n    draw(T) {\n      T(0, 0, 1, [0.5, 14, 30.5, 14, ...arc(15.5, 14, 15, 9, 0, 180)]);\n      T(0, 0, 0, [10, 26.5, 21, 26.5]);\n      const nd = [];\n      for (let x = 7; x \u003c= 24; x++) nd.push(x, 18.8 + 1.3 * Math.sin(x * 1.1));\n      T(7, 2, 0, nd, 0.9);\n      T(7, 2, 0, [17, 12, 26, 0.8], 0.9);\n      T(7, 2, 0, [21, 12, 30.5, 2.8], 0.9);\n      for (let c = 0; c \u003c 3; c++)\n        for (let k = 0; k \u003c 2; k++) {\n          const s = [];\n          for (let y = 11 - k * 5.5; y >= 5.5 - k * 5.5; y--) s.push(4 + c * 5 + 1.2 * Math.sin(y * 0.9 + c), y);\n          T(1 + c * 2 + k, 1, 0, s, 0.9);\n        }\n    },\n    // Each steam column lights low, then high, then breaks, a third of a\n    // cycle behind its neighbour.\n    anim(g, t) {\n      if (!g || g > 6) return 1;\n      const f = (t * 0.7 + ((g - 1) >> 1) * 0.33) % 1;\n      return (g - 1) & 1 ? (f > 0.25 && f \u003c 0.9 ? 1 : 0) : f \u003c 0.65 ? 1 : 0;\n    },\n  },\n  {\n    // The pharmacy cross: an outline round a solid cross.\n    w: 24, h: 24,\n    draw(T) {\n      T(0, 0, 1, [7.5, 0.5, 16.5, 0.5, 16.5, 7.5, 23.5, 7.5, 23.5, 16.5, 16.5, 16.5, 16.5, 23.5, 7.5, 23.5, 7.5, 16.5, 0.5, 16.5, 0.5, 7.5, 7.5, 7.5]);\n      T(1, 1, 0, [12, 4.5, 12, 19.5], 1.5);\n      T(1, 1, 0, [4.5, 12, 19.5, 12], 1.5);\n    },\n    // The inside alone, the outline alone, then both, every 2.6 s.\n    anim(g, t) {\n      const c = t % 2.6;\n      return g ? (c \u003c 0.35 || c > 0.7 ? 1 : 0) : c \u003c 0.35 ? 0 : 1;\n    },\n  },\n  {\n    // Two beamed quavers and the sound they make: the karaoke rooms upstairs.\n    w: 32, h: 26,\n    draw(T) {\n      T(0, 0, 1, arc(4, 21.5, 2.2, 1.3, 0, 360), 1.15);\n      T(0, 0, 1, arc(16, 18.5, 2.2, 1.3, 0, 360), 1.15);\n      T(0, 0, 0, [6.4, 21, 6.4, 4]);\n      T(0, 0, 0, [18.4, 18, 18.4, 1]);\n      T(0, 0, 0, [6.4, 4, 18.4, 1], 1.5);\n      T(0, 0, 0, [6.4, 8.5, 18.4, 5.5]);\n      for (let k = 0; k \u003c 3; k++) T(1 + k, 1, 0, arc(21, 12, 3.5 + k * 3.2, 3.5 + k * 3.2, -40, 40), 0.95);\n    },\n    // The sound waves light outward and go out together.\n    anim(g, t) {\n      const f = (t * 0.8) % 1;\n      return !g || (f >= (g - 1) * 0.18 && f \u003c 0.86) ? 1 : 0;\n    },\n  },\n  {\n    // A molar with a sparkle: the dentist on the third floor.\n    w: 30, h: 24,\n    draw(T) {\n      T(0, 0, 1, [...arc(6.5, 6, 4.5, 4.5, 180, 300), 11, 4, ...arc(15.5, 6, 4.5, 4.5, 240, 360), 19.5, 12, 17.5, 22.5, 15, 22.5, 13, 15.5, 9, 15.5, 7, 22.5, 4.5, 22.5, 2.5, 12]);\n      T(1, 1, 0, [25.5, 0.8, 25.5, 8.2], 0.9);\n      T(1, 1, 0, [21.8, 4.5, 29.2, 4.5], 0.9);\n    },\n    anim: (g, t) => (g && t % 2.2 > 1.2 ? 0 : 1),\n  },\n  {\n    // An eye with lashes whose iris looks about: the fortune teller.\n    w: 30, h: 22,\n    draw(T) {\n      const up = (x) => 13 - 9 * (1 - ((x - 15) / 14.5) ** 2);\n      const lid = [];\n      for (let i = 0; i \u003c= 20; i++) lid.push(0.5 + i * 1.45, up(0.5 + i * 1.45));\n      for (let i = 19; i > 0; i--) lid.push(0.5 + i * 1.45, 13 + 7 * (1 - ((i * 1.45 - 14.5) / 14.5) ** 2));\n      T(0, 0, 1, lid);\n      T(0, 0, 0, [7.5, up(7.5), 5.6, 2.4], 0.9);\n      T(0, 0, 0, [15, up(15), 15, 0.6], 0.9);\n      T(0, 0, 0, [22.5, up(22.5), 24.4, 2.4], 0.9);\n      for (let k = 0; k \u003c 3; k++) {\n        T(1 + k, 1, 1, arc(11 + 4 * k, 12.6, 3.2, 3.2, 0, 360));\n        T(1 + k, 2, 0, [11 + 4 * k, 12.6], 1);\n      }\n    },\n    // Ahead 2 s, left, ahead, right, ahead; the lids blink every 4.7 s.\n    anim(g, t) {\n      if (!g) return t % 4.7 \u003c 0.12 ? 0 : 1;\n      const c = t % 5;\n      return g === (c \u003c 2 ? 2 : c \u003c 3 ? 1 : c \u003c 3.5 ? 2 : c \u003c 4.5 ? 3 : 2) ? 1 : 0;\n    },\n  },\n  {\n    // Scissors that snip: the hair salon.\n    w: 24, h: 27,\n    draw(T) {\n      T(0, 0, 1, arc(6, 22.5, 3.4, 3.4, 0, 360));\n      T(0, 0, 1, arc(18, 22.5, 3.4, 3.4, 0, 360));\n      T(1, 1, 0, [8.6, 19.8, 19.5, 1], 1);\n      T(1, 1, 0, [15.4, 19.8, 4.5, 1], 1);\n      T(2, 1, 0, [8.6, 19.8, 14, 0.8], 1);\n      T(2, 1, 0, [15.4, 19.8, 10, 0.8], 1);\n    },\n    // Snip, snip, then hold open.\n    anim(g, t) {\n      const c = t % 2.4;\n      return !g || (g === 2) === (c \u003c 0.2 || (c > 0.45 && c \u003c 0.65)) ? 1 : 0;\n    },\n  },\n  {\n    // A beer mug with a head of foam and rising bubbles: the hof downstairs.\n    w: 26, h: 28,\n    draw(T) {\n      T(0, 0, 1, [2.5, 7, 2.5, 26.5, 18.5, 26.5, 18.5, 7]);\n      T(0, 0, 0, arc(18.5, 15.5, 5.5, 5.5, -70, 70));\n      T(1, 1, 0, [...arc(4.5, 5.5, 3.5, 3.5, 150, 320), ...arc(10.5, 4, 3.5, 3.5, 210, 330), ...arc(16.5, 5.5, 3.5, 3.5, 220, 390)]);\n      for (let k = 0; k \u003c 3; k++) T(2 + k, 2, 0, [7 + (k & 1) * 6, 22 - k * 5], 1);\n    },\n    // Bubbles rise from the bottom of the glass, one after another.\n    anim(g, t) {\n      return g \u003c 2 || ((t * 1.2) % 1) * 4 > g - 2 ? 1 : 0;\n    },\n  },\n];\n\n// Puddles on the asphalt: centre column, row below the kerb, half width.\nconst PUDDLES = [[10, 4, 9], [36, 6, 12], [58, 3, 7], [22, 11, 7], [52, 11, 8]];\n\n// Slots [x, y, w, h, kind] on the wall above the street: f a pictogram hung\n// bare, b in a rounded box, r in a ring, w a pictogram led to by chevrons, s an\n// arrow strip in a marquee frame, v a blade sign whose arrow points down the\n// basement stairs. Each layout also comes mirrored.\nconst TEMPLATES = [\n  [[0, 0, 64, 33, \"f\"], [1, 36, 17, 51, \"v\"], [20, 36, 43, 29, \"b\"], [20, 67, 43, 21, \"f\"], [1, 90, 62, 25, \"w\"]],\n  [[1, 1, 30, 31, \"b\"], [33, 1, 30, 31, \"r\"], [0, 35, 64, 33, \"f\"], [1, 71, 43, 26, \"b\"], [46, 71, 17, 44, \"v\"], [1, 100, 43, 15, \"s\"]],\n  [[1, 1, 17, 56, \"v\"], [20, 1, 43, 28, \"b\"], [20, 31, 43, 26, \"f\"], [1, 60, 62, 25, \"w\"], [0, 88, 64, 27, \"f\"]],\n];\n\nfunction stroke(S, id, pts, closed, r) {\n  const n = pts.length >> 1;\n  const R = r + REACH;\n  for (let s = 0; s \u003c (n \u003c 2 ? 1 : closed ? n : n - 1); s++) {\n    const ax = pts[2 * s];\n    const ay = pts[2 * s + 1];\n    const j = n \u003c 2 ? s : (s + 1) % n;\n    const dx = pts[2 * j] - ax;\n    const dy = pts[2 * j + 1] - ay;\n    const L2 = dx * dx + dy * dy;\n    const y1 = Math.min(STREET - 1, Math.ceil(Math.max(ay, ay + dy) + R));\n    const x1 = Math.min(W - 1, Math.ceil(Math.max(ax, ax + dx) + R));\n    for (let y = Math.max(0, Math.floor(Math.min(ay, ay + dy) - R)); y \u003c= y1; y++)\n      for (let x = Math.max(0, Math.floor(Math.min(ax, ax + dx) - R)); x \u003c= x1; x++) {\n        const px = x + 0.5 - ax;\n        const py = y + 0.5 - ay;\n        const u = L2 > 0 ? Math.min(1, Math.max(0, (px * dx + py * dy) / L2)) : 0;\n        const g = Math.hypot(px - u * dx, py - u * dy) - r;\n        const p = y * W + x;\n        if (g \u003c S.gap[p]) {\n          S.gap[p] = g;\n          S.own[p] = id;\n        }\n      }\n  }\n}\n\n// kind 0 follows the pictogram's anim, 1 is chevron k of n in a chase, 2 is\n// steady, 3 is a marquee dash.\nfunction tube(S, sg, hue, kind, k, n, order, r, closed, pts) {\n  S.tubes.push({ s: sg.i, hue, kind, k, n, order });\n  stroke(S, S.tubes.length - 1, pts, closed, r);\n}\n\n// Chevrons pointing dir (1 right, -1 left, 0 down) across a box; the chase\n// runs toward the point.\nfunction chevrons(S, sg, hue, x0, y0, w, h, dir) {\n  const across = dir ? w : h;\n  const d = (dir ? h : w) * 0.36;\n  const step = d + 3.4;\n  const n = Math.max(2, Math.floor((across - d) / step) + 1);\n  const o = (across - d - (n - 1) * step) / 2;\n  for (let k = 0; k \u003c n; k++) {\n    const c = o + k * step;\n    const pts = dir\n      ? [x0 + c + (dir \u003c 0 ? d : 0), y0, x0 + c + (dir \u003c 0 ? 0 : d), y0 + h / 2, x0 + c + (dir \u003c 0 ? d : 0), y0 + h]\n      : [x0, y0 + c, x0 + w / 2, y0 + c + d, x0 + w, y0 + c];\n    tube(S, sg, hue, 1, dir \u003c 0 ? n - 1 - k : k, n, 1 + k, 1.05, 0, pts);\n  }\n}\n\n// Hang a pictogram not hung yet, the bigger it fits the likelier, or the one\n// that fits best if none fits at 0.8; returns its width.\nfunction hang(S, sg, left, bx, by, bw, bh, cap, rnd, align, mw = bw) {\n  let best = -1;\n  let score = -1e9;\n  for (const i of left) {\n    const s = Math.min(cap, mw / ICONS[i].w, bh / ICONS[i].h);\n    const v = s >= 0.8 ? 10 + s + rnd() * 1.5 : s * 4 + rnd();\n    if (v > score) [score, best] = [v, i];\n  }\n  left.splice(left.indexOf(best), 1);\n  const ic = ICONS[best];\n  const s = Math.min(cap, mw / ic.w, bh / ic.h);\n  const x = bx + (align \u003c 0 ? 0 : align > 0 ? bw - ic.w * s : (bw - ic.w * s) / 2);\n  const y = by + (bh - ic.h * s) / 2;\n  sg.icon = best;\n  ic.draw((g, role, closed, pts, r = 1.05) => tube(S, sg, sg.hues[1 + role], 0, g, 0, 1 + sg.count++, s > 1.2 ? r * 1.25 : r, closed, pts.map((v, i) => (i & 1 ? y : x) + v * s)));\n  return ic.w * s;\n}\n\nfunction build(S, seed) {\n  const rnd = rng(seed * 7919 + 13);\n  S.own.fill(-1);\n  S.gap.fill(99);\n  S.tubes = [];\n  S.signs = [];\n  const tpl = TEMPLATES[Math.floor(rnd() * TEMPLATES.length)];\n  const flip = rnd() \u003c 0.5;\n  const left = shuffle([...ICONS.keys()], rnd);\n  const schemes = shuffle([...SCHEMES.keys()], rnd);\n  const frames = [];\n  // Arrow strips point at the blade.\n  let toward = 1;\n  for (const s of tpl) if (s[4] === \"v\") toward = (flip ? W - s[0] - s[2] : s[0]) \u003c W / 2 ? -1 : 1;\n  tpl.forEach(([sx, y, w, h, kind], i) => {\n    const x = flip ? W - sx - w : sx;\n    const hues = SCHEMES[schemes[i]];\n    const r = rnd();\n    const sg = { i, hues, icon: -1, count: 0, prog: r \u003c 0.6 ? 1 : 2, busy: rnd(), hold: 0.6 + rnd() * 0.8, ph: rnd() * 11, ign: 0 };\n    S.signs.push(sg);\n    const frame = (inset, k, hue, c) => frames.push([sg, hue, k, rrect(x + inset, y + inset, w - 2 * inset, h - 2 * inset, c), inset > 2 ? 1 : 0, 2 * (w + h - 4 * inset)]);\n    if (kind === \"v\" || kind === \"s\") {\n      sg.prog = 0;\n      frame(1.5, kind === \"s\" ? 3 : 2, hues[0], 3);\n      if (kind === \"v\") chevrons(S, sg, hues[1], x + 4, y + 6, w - 8, h - 12, 0);\n      else chevrons(S, sg, hues[3], x + 6, y + 4.5, w - 12, h - 9, toward);\n    } else if (kind === \"w\") {\n      const side = rnd() \u003c 0.5 ? -1 : 1;\n      const iw = hang(S, sg, left, x + 6, y + 4.5, w - 12, h - 9, 1.35, rnd, side, w * 0.55);\n      const ch = Math.min(14, h - 12);\n      const a = side > 0 ? x + 6 : x + 9 + iw;\n      chevrons(S, sg, hues[2], a, y + (h - ch) / 2, w - 15 - iw, ch, side);\n      frame(1.5, 2, hues[0], 4);\n    } else {\n      const inset = kind === \"f\" ? 1 : kind === \"r\" ? Math.min(w, h) * 0.15 + 1.5 : 5;\n      hang(S, sg, left, x + inset, y + inset, w - 2 * inset, h - 2 * inset, kind === \"f\" ? 1.6 : 1.35, rnd, 0);\n      if (kind === \"b\") frame(1.5, 2, hues[0], 4);\n      if (kind === \"r\") frames.push([sg, hues[0], 2, arc(x + w / 2, y + h / 2, w / 2 - 1.5, h / 2 - 1.5, 0, 360), 0, 1.6 * (w + h)]);\n    }\n  });\n  // Count what pictograms and arrows already light, then hang the frames in a\n  // shuffled order while the wall has budget for them.\n  let lit = 0;\n  for (let p = 0; p \u003c STREET * W; p++) if (S.gap[p] \u003c= 0) lit++;\n  for (const [sg, hue, k, pts, order, perim] of shuffle(frames, rnd)) {\n    const est = perim * 2.1 * (k === 3 ? 0.62 : 1);\n    if (lit + est > BUDGET) continue;\n    lit += est;\n    if (k === 3) dashes(pts).forEach((d, j) => tube(S, sg, hue, 3, j % 3, 3, order, 1.05, 0, d));\n    else tube(S, sg, hue, 2, 0, 0, order, 1.05, 1, pts);\n  }\n  const nt = S.tubes.length;\n  S.tb = new Float32Array(nt);\n  S.rgb = new Float32Array(nt * 3);\n  S.fm = new Uint8Array(nt);\n  S.ft = new Float32Array(nt);\n  S.fv = new Float32Array(nt).fill(1);\n  // Rank the tubes for wear: low ranks tire first, high ranks die first, and\n  // a long tube is likelier to die. Rank 0, the tube that always buzzes, is\n  // the longest frame.\n  const size = new Float32Array(nt);\n  for (let p = 0; p \u003c STREET * W; p++) if (S.gap[p] \u003c= 0) size[S.own[p]]++;\n  const key = [...size].map((v) => rnd() * Math.sqrt(v));\n  const order = [...Array(nt).keys()].sort((a, b) => key[a] - key[b]);\n  let tired = order[0];\n  for (let i = 0; i \u003c nt; i++) if (S.tubes[i].kind === 2 && size[i] > size[tired]) tired = i;\n  order.splice(order.indexOf(tired), 1);\n  order.unshift(tired);\n  order.forEach((t, rank) => (S.tubes[t].rank = rank));\n}\n\nfunction hsv(h, out, o) {\n  h = (((h % 360) + 360) % 360) / 60;\n  const i = Math.floor(h);\n  const up = 255 * (h - i);\n  const down = 255 - up;\n  out[o] = [255, down, 0, 0, up, 255][i];\n  out[o + 1] = [up, 255, 255, down, 0, 0][i];\n  out[o + 2] = [0, 0, up, 255, 255, down][i];\n}\n\n// The controller over a whole sign: a sequence that blacks the sign out and\n// lights it tube by tube, then holds, or a double blink, then holds. The\n// hold shrinks as Pace rises, and a sign runs its show at all only when the\n// night is busy enough for it; otherwise it stays lit.\nfunction signOn(sg, order, t, show, hold) {\n  if (!sg.prog || sg.busy >= show) return 1;\n  const c = (t + sg.ph) % ((sg.prog === 1 ? 0.6 + sg.count * 0.2 : 0.45) + sg.hold * hold);\n  if (sg.prog === 1) return c >= 0.6 + order * 0.2;\n  return !(c \u003c 0.15 || (c > 0.3 && c \u003c 0.45));\n}\n\nfunction tubeOn(sg, tb, t) {\n  if (tb.kind === 0) return ICONS[sg.icon].anim(tb.k, t + sg.ph);\n  if (tb.kind === 1) return (((t * 1.1 - tb.k / tb.n) % 1) + 1) % 1 \u003c 0.55 ? 1 : 0;\n  if (tb.kind === 3) return (Math.floor(t * 4) + tb.k) % 3 ? 1 : 0;\n  return 1;\n}\n\n// A tired tube: steady stretches, then a buzz of random stutter or a dropout.\n// As wear rises the stretches shorten and the steady glow sinks.\nfunction flicker(S, i, dt, wear) {\n  if ((S.ft[i] -= dt) \u003c= 0) {\n    const steady = S.fm[i] === 0;\n    S.fm[i] = steady ? (Math.random() \u003c 0.7 ? 1 : 2) : 0;\n    S.ft[i] = !steady ? (0.6 + Math.random() * 3) / (0.6 + wear * 3) : S.fm[i] === 1 ? 0.25 + Math.random() * 0.8 : 0.08 + Math.random() * 0.4;\n  }\n  if (S.fm[i] === 1) {\n    if (Math.random() \u003c 0.45) S.fv[i] = Math.random() \u003c 0.5 ? 1 : 0.15 + Math.random() * 0.35;\n    return S.fv[i];\n  }\n  return S.fm[i] === 2 ? 0 : 1 - wear * 0.3;\n}\n\nexport function setup(params) {\n  Object.assign(params, { own: new Int16Array(N), gap: new Float32Array(N), buf: new Uint8ClampedArray(N * 3), tubes: null, t: 0, clk: 0, cut: -1, hue: 0, rain: 0.06, drops: [] });\n  params.seed = 5;\n  for (let i = 0; i \u003c 300; i++) params.drops.push({ x: Math.random() * (W + 12) - 6, y: Math.random() * H, v: 70 + Math.random() * 50, n: 4 + Math.floor(Math.random() * 5) });\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const k = input.knobValues || [];\n  const wear = k[2] ?? 0;\n  S.hue = (k[0] ?? 0) * 360;\n  S.rain = k[3] ?? 0.06;\n  const pr = input.btnPressed || [];\n  if (!S.tubes || pr[1]) {\n    if (S.tubes) S.seed++;\n    build(S, S.seed);\n  }\n  if (pr[0]) {\n    // Power cut: the signs strike again in a shuffled order, half a second apart.\n    S.cut = 0;\n    shuffle(S.signs.map((s, i) => i), Math.random).forEach((si, n) => (S.signs[si].ign = 1.2 + n * 0.5 + Math.random() * 0.2));\n  }\n  S.t += dt;\n  const pace = k[1] ?? 2;\n  const show = pace / 3.6;\n  S.clk += dt * pace;\n  if (S.cut >= 0 && (S.cut += dt) > Math.max(...S.signs.map((s) => s.ign)) + 0.8) S.cut = -1;\n  const T = S.tubes;\n  const nt = T.length;\n  const tired = 1 + Math.floor(wear * 0.45 * nt);\n  const dead = Math.floor(wear * 0.3 * nt);\n  for (let i = 0; i \u003c nt; i++) {\n    const tb = T[i];\n    const sg = S.signs[tb.s];\n    let on = signOn(sg, tb.order, S.clk, show, 12 / Math.max(0.1, pace * pace)) ? tubeOn(sg, tb, S.clk) : 0;\n    if (tb.rank \u003c tired) on *= flicker(S, i, dt, wear);\n    if (tb.rank >= nt - dead) on = 0;\n    if (S.cut >= 0) {\n      // A transformer strikes over 0.7 s, the tube catching more often as it warms.\n      const u = (S.cut - sg.ign) / 0.7;\n      on *= u \u003c 0 ? 0 : u >= 1 || Math.random() \u003c 0.2 + 0.8 * u ? 1 : 0;\n    }\n    S.tb[i] = on;\n    hsv(tb.hue + S.hue, S.rgb, i * 3);\n  }\n  const n = Math.round(S.rain * S.drops.length);\n  for (let i = 0; i \u003c n; i++) {\n    const d = S.drops[i];\n    d.y += d.v * dt;\n    d.x += d.v * dt * 0.1;\n    if (d.y - d.n > H) {\n      d.y = -Math.random() * 20;\n      d.x = Math.random() * (W + 12) - 12;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.tubes) return;\n  const { buf, rgb } = S;\n  buf.fill(0);\n  // Rain hazes the air: the glow reaches further and brightens past the 24/255\n  // the wall otherwise stays under.\n  const haze = Math.max(0, S.rain - 0.1);\n  const reach = GLOW + haze * 3.5;\n  const glow = (20 + haze * 110) / 255;\n  for (let p = 0; p \u003c STREET * W; p++) {\n    const o = S.own[p];\n    const g = S.gap[p];\n    if (o \u003c 0 || g >= reach) continue;\n    const b = S.tb[o];\n    // An unlit tube is still glass: its own colour at 14/255.\n    const f = 1 - g / reach;\n    const lv = g \u003c= 0 ? Math.max(b, 0.055) : glow * f * f * b;\n    for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] = rgb[o * 3 + c] * lv;\n  }\n  // The street mirrors the bottom of the wall, shivering. Asphalt gives back\n  // next to nothing; the puddles, low ellipses in the view, give back half\n  // and spread as the rain comes on.\n  const grow = 0.85 + S.rain;\n  for (let d = 0; d \u003c H - STREET; d++) {\n    const ys = STREET - 1 - d;\n    for (let x = 0; x \u003c W; x++) {\n      let wet = 0;\n      for (const [cx, cd, rx] of PUDDLES) wet = Math.max(wet, (1 - ((x - cx) / (rx * grow)) ** 2 - ((d - cd) / (rx * grow * 0.36)) ** 2) * 3);\n      const lv = (0.04 + 0.56 * Math.min(1, wet)) * (1 - d / 24);\n      const xs = x + Math.round(Math.sin(d * 1.3 + S.t * 3) * (0.6 + S.rain));\n      if (xs \u003c 0 || xs >= W) continue;\n      const q = (ys * W + xs) * 3;\n      const p = ((STREET + d) * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[p + c] = buf[q + c] * lv;\n    }\n  }\n  // Rain shows only where a tube lights it, in that tube's colour.\n  const n = Math.round(S.rain * S.drops.length);\n  for (let i = 0; i \u003c n; i++) {\n    const dr = S.drops[i];\n    for (let j = 0; j \u003c dr.n; j++) {\n      const y = Math.floor(dr.y) - j;\n      const x = Math.floor(dr.x - j * 0.1);\n      if (y \u003c 0 || y >= H || x \u003c 0 || x >= W) continue;\n      const p = y * W + x;\n      const fade = 1 - (j / dr.n) * 0.6;\n      if (y >= STREET) {\n        for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] *= 1.8;\n        continue;\n      }\n      const o = S.own[p];\n      const g = S.gap[p];\n      if (o \u003c 0 || g \u003c= 0) continue;\n      const lv = (0.9 - (0.7 * g) / REACH) * S.tb[o] * fade;\n      for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] = Math.max(buf[p * 3 + c], rgb[o * 3 + c] * lv);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      if (buf[p] | buf[p + 1] | buf[p + 2]) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Pace=0..4, Wear=0..1, Rain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every tube round the colour wheel together, so each sign keeps its opposite pair; at 0 the alley burns its own red, green, cyan and magenta."},{"name":"Pace","min":0,"max":4,"about":"The tempo of the sign controllers and how many run a show: at 0 every sign holds still, at 2 about half black out and relight tube by tube or double-blink every few seconds, at 4 all of them, with hardly a pause between."},{"name":"Wear","min":0,"max":1,"about":"How tired the glass is: at 0 one frame tube buzzes, at 1 nearly half the tubes stutter and sag and three in ten have died dark."},{"name":"Rain","min":0,"max":1,"about":"A drizzle that shows only where a sign lights it, puddles that spread on the asphalt and mirror the signs, and haze that widens every glow."}],"start":[0,2,0,0.06],"measures":{"motion":0.7208,"detail":0.1177,"edges":0.5393,"complexity":0.4294,"coverage":0.2587,"colour":0.5724,"drift":0.1545},"knobResponse":[0.2671,0.0583,0.0882,0.0858]},{"slug":"night-flight","title":"Night Flight","family":"city","round":22,"note":"여객기 창으로 내려다본 밤 도시예요. 1 LED 가로등이 바둑판 길과 대로, 강 위 다리를 따라 레이스처럼 이어지고, 고속도로에는 흰 전조등과 빨간 미등이 흘러요. 도시는 초록 항법등과 흰 섬광등이 달린 날개 끝을 지나 왼쪽 아래로 천천히 미끄러져요.","idea":"A city at night seen straight down from an airliner window: a lace of single-LED street lights traces the grid, the boulevards, a highway full of car lights and the bridges over a dark river, all on the sodium glow of the town, sliding slowly past the wingtip and its blinking lights while wisps of cloud drift under the plane.","buttons":"K3 tap flies over another city.","code":"// ===== Patternflow pattern =====\n// Title:   Night Flight\n// Family:  city\n// Idea:    A city at night seen straight down from an airliner window: a lace of single-LED street lights traces the grid, the boulevards, a highway full of car lights and the bridges over a dark river, all on the sodium glow of the town, sliding slowly past the wingtip and its blinking lights while wisps of cloud drift under the plane.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after night photographs of cities taken from airliner windows\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Lamps=0..1, Speed=0.2..3, Grid=0..1, Haze=0..1\n//\n// Knob 1: Lamps. The street lights: an old sodium city at 0, orange with the odd green mercury lamp; turned up, the lamps are swapped for white LEDs one by one until the whole town is white at 1.\n// Knob 2: Speed. Ground speed: at 2 the city slides about 3.4 LEDs a second toward the lower left, at 0.2 it barely creeps; the cars on the highway keep their own pace on top of it.\n// Knob 3: Grid. Street spacing inside the boulevards: blocks eight or nine LEDs apart at 0, twelve or thirteen at 1, with more house lights inside the wider ones.\n// Knob 4: Haze. Cloud under the plane: a clear night with the odd wisp at the low end, a broken layer lit from below by the town in the middle, and at 1 an overcast the city only glows through.\n// Buttons: K3 tap flies over another city.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Boulevards about every 44 LEDs, rivers about every 380 LEDs along the track.\nconst SB = 44;\nconst RV = 380;\nconst HW = 3.3;\n// The city carpet: every LED leans this far away from its neighbours.\nconst AMP = 18.5;\nconst [RES, DOWN, DIAG, YARD, SUB] = [0, 1, 2, 3, 4];\nconst [STREET, BLVD, WHITE, HOUSE, FLOOD, HWY, PATH] = [1, 2, 3, 4, 5, 6, 7];\nconst { min, max, floor, round, sin, cos, abs, sqrt, exp } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst md = (a, m) => ((a % m) + m) % m;\nconst R2 = 0.70710678;\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nconst h3 = (i, j, k) => hash(i + Math.imul(k, 1013904223), j ^ Math.imul(k, 1664525));\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y);\n  let u = x - xi, v = y - yi;\n  u = u * u * (3 - 2 * u);\n  v = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1), d = hash(xi + 1, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\n// Boulevard lines, jittered a little each.\nconst AX = (S, i) => i * SB + floor(h3(i, 0, S + 101) * 9) - 4;\nconst AY = (S, j) => j * SB + floor(h3(j, 0, S + 202) * 9) - 4;\n\n// River k's centre line across the track (u) and its slope, in LEDs.\nfunction riverAt(S, k, u) {\n  const p1 = u / 19 + h3(k, 7, S) * 6.283;\n  const p2 = u / 7.3 + h3(k, 8, S) * 6.283;\n  const v = k * RV + (h3(k, 9, S) - 0.5) * 50 + 7 * sin(p1) + 2.2 * sin(p2);\n  return [v, (7 / 19) * cos(p1) + (2.2 / 7.3) * cos(p2)];\n}\nfunction riverDist(S, p, q) {\n  const u = p * R2;\n  const v = q * R2;\n  const [vr, dv] = riverAt(S, round(v / RV), u);\n  return abs(v - vr) / sqrt(1 + dv * dv);\n}\n\n// One cell of the city, kept in a window-sized ring buffer by world position.\nfunction gen(P, wx, wy) {\n  const S = P.seed;\n  const p = wx + wy;\n  const q = wx - wy;\n  const plus = (p & 1) === 0;\n  let i = floor(wx / SB);\n  if (wx \u003c AX(S, i)) i--;\n  else if (wx >= AX(S, i + 1)) i++;\n  let j = floor(wy / SB);\n  if (wy \u003c AY(S, j)) j--;\n  else if (wy >= AY(S, j + 1)) j++;\n  const x0 = AX(S, i);\n  const y0 = AY(S, j);\n  const bw = AX(S, i + 1) - x0;\n  const bh = AY(S, j + 1) - y0;\n  const dx = wx - x0;\n  const dy = wy - y0;\n  const ed = cl(min(dx - 1, bw - dx, dy - 1, bh - dy) / 9, 0, 1);\n  const hk = h3(i, j, S + 3);\n  const kind = hk \u003c 0.1 ? DOWN : hk \u003c 0.2 ? DIAG : hk \u003c 0.28 ? YARD : hk \u003c 0.42 ? SUB : RES;\n  const sp = P.sp + (h3(i, j, S + 4) \u003c 0.4 ? 1 : 0);\n  const r = h3(wx, wy, S + 5);\n  const r2 = h3(wy, wx, S + 6);\n  let M = 26 + 10 * vn(wx / 23 + 0.37, wy / 23 + (S & 255));\n  if (kind === DOWN) M += 12 * ed;\n  else if (kind === YARD) M -= 5 * ed;\n  let k = 0;\n  let b = 0;\n  const blvd = dx \u003c 2 || dy \u003c 2;\n  const house = 0.035 + P.grid * 0.05;\n  if (plus) {\n    if (blvd) [k, b] = [BLVD, 1];\n    else if (kind === DOWN) {\n      const s = sp - 1;\n      if ((dx - 1) % s === 0 || (dy - 1) % s === 0) [k, b] = [WHITE, 0.95];\n      else if (r \u003c 0.1) [k, b] = [WHITE, 0.9 + 0.1 * r2];\n    } else if (kind === DIAG) {\n      const D = 2 * sp + 2;\n      if (md(q, D) === 0 || md(p, D) === 0) [k, b] = [STREET, 0.96 + 0.04 * r2];\n      else if (r \u003c house) [k, b] = [HOUSE, 0.94];\n    } else if (kind === YARD) {\n      const s = sp + 3;\n      const lx = (dx - 1) % s;\n      const ly = (dy - 1) % s;\n      const lot = h3(i * 31 + floor((dx - 1) / s), j * 31 + floor((dy - 1) / s), S + 11);\n      if ((lx === 0 || ly === 0) && r > 0.25) [k, b] = [FLOOD, 0.92];\n      else if (lot \u003c 0.4 && lx > 1 && ly > 1 && lx \u003c s - 1 && ly \u003c s - 1 && (wy & 1) === 0) [k, b] = [FLOOD, 0.92 + 0.08 * r2];\n    } else if (kind === SUB) {\n      // Curving suburban streets: contour lines of a slow noise.\n      const u0 = i * 3.1 + 0.5;\n      const v0 = j * 1.7 + 0.5;\n      const lv = floor(vn(wx / 15 + u0, wy / 15 + v0) * 3);\n      if (lv !== floor(vn((wx + 1) / 15 + u0, wy / 15 + v0) * 3) || lv !== floor(vn(wx / 15 + u0, (wy + 1) / 15 + v0) * 3))\n        [k, b] = [STREET, 0.96 + 0.04 * r2];\n      else if (r \u003c house * 1.8) [k, b] = [HOUSE, 0.94];\n    } else {\n      const onX = (dx - 1) % sp === 0 && dx \u003c bw - 2;\n      const onY = (dy - 1) % sp === 0 && dy \u003c bh - 2;\n      if (onX || onY) {\n        if (r > 0.08) [k, b] = [STREET, 0.96 + 0.04 * r2];\n      } else if (r \u003c house) [k, b] = [HOUSE, 0.94];\n    }\n  }\n  // A park over a few blocks, dark, with one lit path across it.\n  if (kind === RES && h3(i, j, S + 7) \u003c 0.45) {\n    const nx = max(1, floor((bw - 3) / sp));\n    const ny = max(1, floor((bh - 3) / sp));\n    const pw = min(nx, 1 + (h3(i, j, S + 8) \u003c 0.6 ? 1 : 0));\n    const ph = min(ny, 2);\n    const px0 = 1 + floor(h3(i, j, S + 9) * (nx - pw + 1)) * sp;\n    const py0 = 1 + floor(h3(i, j, S + 10) * (ny - ph + 1)) * sp;\n    const pd = min(dx - px0, px0 + pw * sp - dx, dy - py0, py0 + ph * sp - dy);\n    if (pd > 0) {\n      if (!blvd) k = 0;\n      M += (21 - M) * cl(pd / 8, 0, 1);\n      if (plus && dx - px0 === dy - py0) [k, b] = [PATH, 0.75];\n    }\n  }\n  // The river, its embankment roads and bridges where the boulevards cross.\n  const d = riverDist(S, p, q);\n  M += (20 - M) * cl((HW + 6 - d) / 9, 0, 1);\n  const wt = cl((HW + 0.6 - d) / 1.6, 0, 1);\n  if (d \u003c HW + 2.8 && !blvd) k = 0;\n  if (plus && d >= HW + 0.9 && d \u003c HW + 2.3) [k, b] = [STREET, 0.92];\n  // The highway corridor: boulevards bridge it, the median carries lamps,\n  // the two carriageways (dp 0 and 4) carry the cars drawn each frame.\n  const dp = p - P.ph;\n  if (dp >= -4 && dp \u003c= 8) {\n    if (!blvd || abs(dp - 2) \u003c= 3) k = 0;\n    M += (21 - M) * cl((7 - abs(dp - 2)) / 7, 0, 1);\n    if ((dp === -2 || dp === 6) && md(q + dp * 2, 8) === 0) [k, b] = [HWY, 1];\n  }\n  const slot = (wx & 63) + md(wy, H) * W;\n  P.KD[slot] = k;\n  P.LB[slot] = b;\n  P.LH[slot] = h3(wx, wy, S + 12);\n  P.MS[slot] = M;\n  P.WT[slot] = wt;\n}\n\nfunction build(P) {\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) gen(P, P.ox + x, P.oy + y);\n}\n\n// One step along the track: the ground moves one LED left and one down.\nfunction step(P) {\n  P.ox += 1;\n  P.oy -= 1;\n  for (let y = 0; y \u003c H; y++) gen(P, P.ox + W - 1, P.oy + y);\n  for (let x = 0; x \u003c W; x++) gen(P, P.ox + x, P.oy);\n}\n\nfunction place(P) {\n  P.seed = floor(rnd() * 4096);\n  let ox = 20000 + floor(rnd() * 4000);\n  let oy = 20000 + floor(rnd() * 4000);\n  // Put a river across the middle of the window.\n  const u = (ox + oy + 96) * R2;\n  const qc = ox - oy - 32;\n  const [vr] = riverAt(P.seed, round((qc * R2) / RV), u);\n  const dl = round((vr / R2 - qc + (rnd() - 0.5) * 30) / 2);\n  ox += dl;\n  oy -= dl;\n  P.ox = ox;\n  P.oy = oy;\n  P.p0 = ox + oy;\n  const ph = P.p0 + 80 + floor(rnd() * 12);\n  P.ph = ph + (ph & 1);\n}\n\n// The wingtip, fixed in the window: a swept wing in from the left edge.\nconst WING = [\n  [-1, 92],\n  [30, 110.5],\n  [31, 113],\n  [27.5, 116.5],\n  [-1, 131],\n];\nfunction inPoly(px, py, poly) {\n  let c = false;\n  for (let a = 0, b = poly.length - 1; a \u003c poly.length; b = a++) {\n    const [xa, ya] = poly[a];\n    const [xb, yb] = poly[b];\n    if (ya > py !== yb > py && px \u003c ((xb - xa) * (py - ya)) / (yb - ya) + xa) c = !c;\n  }\n  return c;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, {\n    KD: new Uint8Array(N),\n    LB: new Float32Array(N),\n    LH: new Float32Array(N),\n    MS: new Float32Array(N),\n    WT: new Float32Array(N),\n    wing: new Float32Array(N),\n    CL: new Float32Array(33 * 65),\n    GA: new Float32Array(N),\n    GB: new Float32Array(N),\n    glowDirty: true,\n    acc: 0,\n    cs: 0,\n    t: 0,\n    sp: 0,\n    built: false,\n  });\n  place(P);\n  // Wing shading: darker toward the root, a faint sheen along the leading edge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (!inPoly(x + 0.5, y + 0.5, WING)) continue;\n      const lead = abs((y + 0.5 - 92) * 31 - (x + 1.5) * 18.5) / 36.1;\n      P.wing[x + y * W] = 26 + 8 * (x / 30) + 40 * cl(1 - lead / 1.6, 0, 1) ** 1.5;\n    }\n  // The lights at the tip sit on cells the carpet pushes up.\n  P.nav = (P.p0 + 29 + 111) & 1 ? [30, 111] : [29, 111];\n  P.strobe = (P.p0 + 27 + 115) & 1 ? [28, 115] : [27, 115];\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  P.k1 = cl(k[0], 0, 1);\n  P.spd = cl(k[1], 0.2, 3);\n  P.grid = cl(k[2], 0, 1);\n  P.haze = cl(k[3], 0, 1);\n  const sp = 8 + round(P.grid * 4);\n  if (input.btnPressed && input.btnPressed[2]) {\n    place(P);\n    P.built = false;\n  }\n  if (!P.built || sp !== P.sp) {\n    P.sp = sp;\n    P.built = true;\n    P.glowDirty = true;\n    build(P);\n  }\n  P.acc += dt * P.spd * 1.2;\n  let n = 0;\n  while (P.acc >= 1) {\n    P.acc -= 1;\n    n++;\n  }\n  if (n > 24) {\n    P.ox += n;\n    P.oy -= n;\n    build(P);\n  } else for (let s = 0; s \u003c n; s++) step(P);\n  // Cloud is nearer than the ground, so it slides past faster.\n  P.cs += dt * P.spd * 1.2 * 1.414 * 1.7;\n  P.t += dt;\n  if (n || P.glowDirty) glow(P);\n  // Cloud cover on a 2-LED lattice.\n  const th = 0.8 - 0.78 * P.haze;\n  const veil = 0.25 * P.haze * P.haze;\n  const thick = 0.45 + 0.4 * P.haze;\n  for (let gy = 0; gy \u003c 65; gy++)\n    for (let gx = 0; gx \u003c 33; gx++) {\n      const x = gx * 2;\n      const y = gy * 2;\n      const a = (y - x) * R2 - P.cs;\n      const bb = (x + y) * R2;\n      const nz = 0.65 * vn(a / 30 + 40, bb / 16 + 5.3 + P.t * 0.02) + 0.35 * vn(a / 11 + 70, bb / 7 + 11 - P.t * 0.03);\n      let dn = cl((nz - th) / 0.28, 0, 1);\n      dn = dn * dn * (3 - 2 * dn);\n      P.CL[gx + gy * 33] = min(0.88, dn * thick + veil);\n    }\n}\n\n// The town's light blurred, for cloud to glow with: two box passes each way.\nfunction glow(P) {\n  P.glowDirty = false;\n  const A = P.GA;\n  const B = P.GB;\n  for (let y = 0; y \u003c H; y++) {\n    const row = md(P.oy + y, H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const slot = ((P.ox + x) & 63) + row;\n      A[x + y * W] = P.KD[slot] ? P.LB[slot] : 0;\n    }\n  }\n  for (let pass = 0; pass \u003c 4; pass++) {\n    const [src, dst] = pass & 1 ? [B, A] : [A, B];\n    const horiz = pass \u003c 2;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        let sum = 0;\n        for (let d = -2; d \u003c= 2; d++) {\n          const u = horiz ? cl(x + d, 0, W - 1) : x;\n          const v = horiz ? y : cl(y + d, 0, H - 1);\n          sum += src[u + v * W];\n        }\n        dst[x + y * W] = sum / 5;\n      }\n  }\n}\n\nconst SOD = [255, 132, 26];\nconst LEDW = [[255, 214, 168], [226, 236, 255]];\nconst MERC = [150, 255, 196];\nconst HOUSEC = [255, 176, 92];\nconst FLOODC = [214, 230, 255];\nconst HEAD = [255, 250, 232];\nconst TAIL = [255, 30, 20];\nconst C = [0, 0, 0];\nconst NB = [0.5, 0.62, 1];\nconst NIGHT = 0.7;\n\n// A lamp's colour into C, from its kind, its dice and the Lamps knob.\nfunction lampColour(kind, h, k1) {\n  const h2 = (h * 7.31) % 1;\n  const h3c = (h * 13.7) % 1;\n  if (kind === STREET || kind === BLVD || kind === HWY || kind === PATH) {\n    const base = kind === BLVD ? 0.3 : kind === PATH ? 0.6 : 0.06;\n    if (h \u003c base + k1 * (1 - base)) {\n      for (let c = 0; c \u003c 3; c++) C[c] = LEDW[0][c] + (LEDW[1][c] - LEDW[0][c]) * h3c;\n    } else if (h2 > 0.94 && kind === STREET) {\n      for (let c = 0; c \u003c 3; c++) C[c] = MERC[c];\n    } else {\n      C[0] = SOD[0];\n      C[1] = SOD[1] + 24 * h3c;\n      C[2] = SOD[2] + 14 * h3c;\n    }\n  } else if (kind === WHITE) {\n    for (let c = 0; c \u003c 3; c++) C[c] = LEDW[0][c] + (LEDW[1][c] - LEDW[0][c]) * h2;\n  } else if (kind === HOUSE) {\n    for (let c = 0; c \u003c 3; c++) C[c] = HOUSEC[c];\n  } else {\n    for (let c = 0; c \u003c 3; c++) C[c] = FLOODC[c];\n  }\n  // Every lamp burns at full strength in its brightest channel.\n  const m = 255 / max(C[0], C[1], C[2]);\n  for (let c = 0; c \u003c 3; c++) C[c] *= m;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.built) return;\n  const t = P.t;\n  const k1 = P.k1;\n  const haze = [1 - 0.18 * k1, 0.64 + 0.24 * k1, 0.36 + 0.64 * k1];\n  const cloudT = [1 - 0.12 * k1, 0.8 + 0.12 * k1, 0.64 + 0.36 * k1];\n  const water = [0.32, 0.5, 1];\n  const wingT = [0.78, 0.84, 1];\n  // Strobe: a double flash every 1.25 s.\n  const ph = t % 1.25;\n  const flash = ph \u003c 0.05 || (ph > 0.15 && ph \u003c 0.2) ? 1 : 0;\n  // Cars: lane A runs with the ground, lane B against it, in cells along the lane.\n  const vA = 0.9 * t;\n  const vB = -0.9 * t;\n  for (let y = 0; y \u003c H; y++) {\n    const wy = P.oy + y;\n    const row = md(wy, H) * W;\n    const gy = y >> 1;\n    const fy = (y & 1) * 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const wx = P.ox + x;\n      const slot = (wx & 63) + row;\n      const plus = ((x + y + P.p0) & 1) === 0;\n      const gx = x >> 1;\n      const fx = (x & 1) * 0.5;\n      const ci = gx + gy * 33;\n      const c0 = P.CL[ci] + (P.CL[ci + 1] - P.CL[ci]) * fx;\n      const c1 = P.CL[ci + 33] + (P.CL[ci + 34] - P.CL[ci + 33]) * fx;\n      const al = c0 + (c1 - c0) * fy;\n      const wg = P.wing[x + y * W];\n      let M;\n      let tr;\n      let tg;\n      let tb;\n      if (wg > 0) {\n        const nd = (x - P.nav[0]) ** 2 + (y - P.nav[1]) ** 2;\n        const sd = (x - P.strobe[0]) ** 2 + (y - P.strobe[1]) ** 2;\n        M = wg + 80 * flash * exp(-sd / 60);\n        const gl = 0.5 * exp(-nd / 10);\n        tr = wingT[0] * (1 - gl);\n        tg = wingT[1];\n        tb = wingT[2] * (1 - gl * 0.6);\n        let v = max(0, M + (plus ? 10 : -10));\n        let r = tr * v;\n        let g = tg * v;\n        let b = tb * v;\n        if (x === P.nav[0] && y === P.nav[1]) [r, g, b] = [40, 255, 90];\n        else if (x === P.strobe[0] && y === P.strobe[1]) {\n          if (flash) [r, g, b] = [255, 255, 255];\n          else [r, g, b] = [70, 74, 86];\n        }\n        display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n        continue;\n      }\n      const wt = P.WT[slot];\n      M = P.MS[slot];\n      // Ground, water and cloud tints mix, and the brightest channel is put\n      // back to 1 so the mix never dims a step.\n      tr = haze[0] + (water[0] - haze[0]) * wt;\n      tg = haze[1] + (water[1] - haze[1]) * wt;\n      tb = haze[2] + (water[2] - haze[2]) * wt;\n      tr += (cloudT[0] - tr) * al;\n      tg += (cloudT[1] - tg) * al;\n      tb += (cloudT[2] - tb) * al;\n      // The cells between the carpet's dots fall toward blue-black.\n      if (!plus) {\n        const nb = NIGHT * (1 - al);\n        tr += (NB[0] - tr) * nb;\n        tg += (NB[1] - tg) * nb;\n        tb += (NB[2] - tb) * nb;\n      }\n      // Cloud lit from below by the town.\n      const Lc = 0.55 * M + 14 + 210 * P.GA[x + y * W] + 24 * al;\n      const G = M + (Lc - M) * al;\n      const v = max(0, G + (plus ? AMP : -AMP)) / max(tr, tg, tb);\n      let r = v * tr;\n      let g = v * tg;\n      let b = v * tb;\n      if (plus) {\n        let kind = P.KD[slot];\n        let lb = P.LB[slot];\n        let col = null;\n        const dp = x + y + P.p0 - P.ph;\n        if (dp === 0 || dp === 4) {\n          // Carriageways: m counts cells along the lane.\n          const m = (x - y + P.ox - P.oy) >> 1;\n          const lane = dp === 0 ? 0 : 1;\n          const slotK = floor(m + (lane ? vB : vA) + 0.5);\n          if (h3(slotK, lane, P.seed + 21) \u003c 0.45) {\n            col = lane ? TAIL : HEAD;\n            lb = 1;\n          }\n        }\n        if (col || kind) {\n          if (!col) {\n            lampColour(kind, P.LH[slot], k1);\n            col = C;\n          }\n          const h = P.LH[slot];\n          const tw = lb * (0.97 + 0.03 * sin(t * (2.5 + 4 * h) + h * 40));\n          const keep = 1 - 0.85 * al;\n          r = col[0] * tw * keep + r * (1 - keep);\n          g = col[1] * tw * keep + g * (1 - keep);\n          b = col[2] * tw * keep + b * (1 - keep);\n        }\n      }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n  }\n}\n","layer":{"id":"layer-night-flight","type":"code","name":"night-flight","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Night Flight\n// Family:  city\n// Idea:    A city at night seen straight down from an airliner window: a lace of single-LED street lights traces the grid, the boulevards, a highway full of car lights and the bridges over a dark river, all on the sodium glow of the town, sliding slowly past the wingtip and its blinking lights while wisps of cloud drift under the plane.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after night photographs of cities taken from airliner windows\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Lamps=0..1, Speed=0.2..3, Grid=0..1, Haze=0..1\n//\n// Knob 1: Lamps. The street lights: an old sodium city at 0, orange with the odd green mercury lamp; turned up, the lamps are swapped for white LEDs one by one until the whole town is white at 1.\n// Knob 2: Speed. Ground speed: at 2 the city slides about 3.4 LEDs a second toward the lower left, at 0.2 it barely creeps; the cars on the highway keep their own pace on top of it.\n// Knob 3: Grid. Street spacing inside the boulevards: blocks eight or nine LEDs apart at 0, twelve or thirteen at 1, with more house lights inside the wider ones.\n// Knob 4: Haze. Cloud under the plane: a clear night with the odd wisp at the low end, a broken layer lit from below by the town in the middle, and at 1 an overcast the city only glows through.\n// Buttons: K3 tap flies over another city.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Boulevards about every 44 LEDs, rivers about every 380 LEDs along the track.\nconst SB = 44;\nconst RV = 380;\nconst HW = 3.3;\n// The city carpet: every LED leans this far away from its neighbours.\nconst AMP = 18.5;\nconst [RES, DOWN, DIAG, YARD, SUB] = [0, 1, 2, 3, 4];\nconst [STREET, BLVD, WHITE, HOUSE, FLOOD, HWY, PATH] = [1, 2, 3, 4, 5, 6, 7];\nconst { min, max, floor, round, sin, cos, abs, sqrt, exp } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst md = (a, m) => ((a % m) + m) % m;\nconst R2 = 0.70710678;\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nconst h3 = (i, j, k) => hash(i + Math.imul(k, 1013904223), j ^ Math.imul(k, 1664525));\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y);\n  let u = x - xi, v = y - yi;\n  u = u * u * (3 - 2 * u);\n  v = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1), d = hash(xi + 1, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\n// Boulevard lines, jittered a little each.\nconst AX = (S, i) => i * SB + floor(h3(i, 0, S + 101) * 9) - 4;\nconst AY = (S, j) => j * SB + floor(h3(j, 0, S + 202) * 9) - 4;\n\n// River k's centre line across the track (u) and its slope, in LEDs.\nfunction riverAt(S, k, u) {\n  const p1 = u / 19 + h3(k, 7, S) * 6.283;\n  const p2 = u / 7.3 + h3(k, 8, S) * 6.283;\n  const v = k * RV + (h3(k, 9, S) - 0.5) * 50 + 7 * sin(p1) + 2.2 * sin(p2);\n  return [v, (7 / 19) * cos(p1) + (2.2 / 7.3) * cos(p2)];\n}\nfunction riverDist(S, p, q) {\n  const u = p * R2;\n  const v = q * R2;\n  const [vr, dv] = riverAt(S, round(v / RV), u);\n  return abs(v - vr) / sqrt(1 + dv * dv);\n}\n\n// One cell of the city, kept in a window-sized ring buffer by world position.\nfunction gen(P, wx, wy) {\n  const S = P.seed;\n  const p = wx + wy;\n  const q = wx - wy;\n  const plus = (p & 1) === 0;\n  let i = floor(wx / SB);\n  if (wx \u003c AX(S, i)) i--;\n  else if (wx >= AX(S, i + 1)) i++;\n  let j = floor(wy / SB);\n  if (wy \u003c AY(S, j)) j--;\n  else if (wy >= AY(S, j + 1)) j++;\n  const x0 = AX(S, i);\n  const y0 = AY(S, j);\n  const bw = AX(S, i + 1) - x0;\n  const bh = AY(S, j + 1) - y0;\n  const dx = wx - x0;\n  const dy = wy - y0;\n  const ed = cl(min(dx - 1, bw - dx, dy - 1, bh - dy) / 9, 0, 1);\n  const hk = h3(i, j, S + 3);\n  const kind = hk \u003c 0.1 ? DOWN : hk \u003c 0.2 ? DIAG : hk \u003c 0.28 ? YARD : hk \u003c 0.42 ? SUB : RES;\n  const sp = P.sp + (h3(i, j, S + 4) \u003c 0.4 ? 1 : 0);\n  const r = h3(wx, wy, S + 5);\n  const r2 = h3(wy, wx, S + 6);\n  let M = 26 + 10 * vn(wx / 23 + 0.37, wy / 23 + (S & 255));\n  if (kind === DOWN) M += 12 * ed;\n  else if (kind === YARD) M -= 5 * ed;\n  let k = 0;\n  let b = 0;\n  const blvd = dx \u003c 2 || dy \u003c 2;\n  const house = 0.035 + P.grid * 0.05;\n  if (plus) {\n    if (blvd) [k, b] = [BLVD, 1];\n    else if (kind === DOWN) {\n      const s = sp - 1;\n      if ((dx - 1) % s === 0 || (dy - 1) % s === 0) [k, b] = [WHITE, 0.95];\n      else if (r \u003c 0.1) [k, b] = [WHITE, 0.9 + 0.1 * r2];\n    } else if (kind === DIAG) {\n      const D = 2 * sp + 2;\n      if (md(q, D) === 0 || md(p, D) === 0) [k, b] = [STREET, 0.96 + 0.04 * r2];\n      else if (r \u003c house) [k, b] = [HOUSE, 0.94];\n    } else if (kind === YARD) {\n      const s = sp + 3;\n      const lx = (dx - 1) % s;\n      const ly = (dy - 1) % s;\n      const lot = h3(i * 31 + floor((dx - 1) / s), j * 31 + floor((dy - 1) / s), S + 11);\n      if ((lx === 0 || ly === 0) && r > 0.25) [k, b] = [FLOOD, 0.92];\n      else if (lot \u003c 0.4 && lx > 1 && ly > 1 && lx \u003c s - 1 && ly \u003c s - 1 && (wy & 1) === 0) [k, b] = [FLOOD, 0.92 + 0.08 * r2];\n    } else if (kind === SUB) {\n      // Curving suburban streets: contour lines of a slow noise.\n      const u0 = i * 3.1 + 0.5;\n      const v0 = j * 1.7 + 0.5;\n      const lv = floor(vn(wx / 15 + u0, wy / 15 + v0) * 3);\n      if (lv !== floor(vn((wx + 1) / 15 + u0, wy / 15 + v0) * 3) || lv !== floor(vn(wx / 15 + u0, (wy + 1) / 15 + v0) * 3))\n        [k, b] = [STREET, 0.96 + 0.04 * r2];\n      else if (r \u003c house * 1.8) [k, b] = [HOUSE, 0.94];\n    } else {\n      const onX = (dx - 1) % sp === 0 && dx \u003c bw - 2;\n      const onY = (dy - 1) % sp === 0 && dy \u003c bh - 2;\n      if (onX || onY) {\n        if (r > 0.08) [k, b] = [STREET, 0.96 + 0.04 * r2];\n      } else if (r \u003c house) [k, b] = [HOUSE, 0.94];\n    }\n  }\n  // A park over a few blocks, dark, with one lit path across it.\n  if (kind === RES && h3(i, j, S + 7) \u003c 0.45) {\n    const nx = max(1, floor((bw - 3) / sp));\n    const ny = max(1, floor((bh - 3) / sp));\n    const pw = min(nx, 1 + (h3(i, j, S + 8) \u003c 0.6 ? 1 : 0));\n    const ph = min(ny, 2);\n    const px0 = 1 + floor(h3(i, j, S + 9) * (nx - pw + 1)) * sp;\n    const py0 = 1 + floor(h3(i, j, S + 10) * (ny - ph + 1)) * sp;\n    const pd = min(dx - px0, px0 + pw * sp - dx, dy - py0, py0 + ph * sp - dy);\n    if (pd > 0) {\n      if (!blvd) k = 0;\n      M += (21 - M) * cl(pd / 8, 0, 1);\n      if (plus && dx - px0 === dy - py0) [k, b] = [PATH, 0.75];\n    }\n  }\n  // The river, its embankment roads and bridges where the boulevards cross.\n  const d = riverDist(S, p, q);\n  M += (20 - M) * cl((HW + 6 - d) / 9, 0, 1);\n  const wt = cl((HW + 0.6 - d) / 1.6, 0, 1);\n  if (d \u003c HW + 2.8 && !blvd) k = 0;\n  if (plus && d >= HW + 0.9 && d \u003c HW + 2.3) [k, b] = [STREET, 0.92];\n  // The highway corridor: boulevards bridge it, the median carries lamps,\n  // the two carriageways (dp 0 and 4) carry the cars drawn each frame.\n  const dp = p - P.ph;\n  if (dp >= -4 && dp \u003c= 8) {\n    if (!blvd || abs(dp - 2) \u003c= 3) k = 0;\n    M += (21 - M) * cl((7 - abs(dp - 2)) / 7, 0, 1);\n    if ((dp === -2 || dp === 6) && md(q + dp * 2, 8) === 0) [k, b] = [HWY, 1];\n  }\n  const slot = (wx & 63) + md(wy, H) * W;\n  P.KD[slot] = k;\n  P.LB[slot] = b;\n  P.LH[slot] = h3(wx, wy, S + 12);\n  P.MS[slot] = M;\n  P.WT[slot] = wt;\n}\n\nfunction build(P) {\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) gen(P, P.ox + x, P.oy + y);\n}\n\n// One step along the track: the ground moves one LED left and one down.\nfunction step(P) {\n  P.ox += 1;\n  P.oy -= 1;\n  for (let y = 0; y \u003c H; y++) gen(P, P.ox + W - 1, P.oy + y);\n  for (let x = 0; x \u003c W; x++) gen(P, P.ox + x, P.oy);\n}\n\nfunction place(P) {\n  P.seed = floor(rnd() * 4096);\n  let ox = 20000 + floor(rnd() * 4000);\n  let oy = 20000 + floor(rnd() * 4000);\n  // Put a river across the middle of the window.\n  const u = (ox + oy + 96) * R2;\n  const qc = ox - oy - 32;\n  const [vr] = riverAt(P.seed, round((qc * R2) / RV), u);\n  const dl = round((vr / R2 - qc + (rnd() - 0.5) * 30) / 2);\n  ox += dl;\n  oy -= dl;\n  P.ox = ox;\n  P.oy = oy;\n  P.p0 = ox + oy;\n  const ph = P.p0 + 80 + floor(rnd() * 12);\n  P.ph = ph + (ph & 1);\n}\n\n// The wingtip, fixed in the window: a swept wing in from the left edge.\nconst WING = [\n  [-1, 92],\n  [30, 110.5],\n  [31, 113],\n  [27.5, 116.5],\n  [-1, 131],\n];\nfunction inPoly(px, py, poly) {\n  let c = false;\n  for (let a = 0, b = poly.length - 1; a \u003c poly.length; b = a++) {\n    const [xa, ya] = poly[a];\n    const [xb, yb] = poly[b];\n    if (ya > py !== yb > py && px \u003c ((xb - xa) * (py - ya)) / (yb - ya) + xa) c = !c;\n  }\n  return c;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, {\n    KD: new Uint8Array(N),\n    LB: new Float32Array(N),\n    LH: new Float32Array(N),\n    MS: new Float32Array(N),\n    WT: new Float32Array(N),\n    wing: new Float32Array(N),\n    CL: new Float32Array(33 * 65),\n    GA: new Float32Array(N),\n    GB: new Float32Array(N),\n    glowDirty: true,\n    acc: 0,\n    cs: 0,\n    t: 0,\n    sp: 0,\n    built: false,\n  });\n  place(P);\n  // Wing shading: darker toward the root, a faint sheen along the leading edge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (!inPoly(x + 0.5, y + 0.5, WING)) continue;\n      const lead = abs((y + 0.5 - 92) * 31 - (x + 1.5) * 18.5) / 36.1;\n      P.wing[x + y * W] = 26 + 8 * (x / 30) + 40 * cl(1 - lead / 1.6, 0, 1) ** 1.5;\n    }\n  // The lights at the tip sit on cells the carpet pushes up.\n  P.nav = (P.p0 + 29 + 111) & 1 ? [30, 111] : [29, 111];\n  P.strobe = (P.p0 + 27 + 115) & 1 ? [28, 115] : [27, 115];\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  P.k1 = cl(k[0], 0, 1);\n  P.spd = cl(k[1], 0.2, 3);\n  P.grid = cl(k[2], 0, 1);\n  P.haze = cl(k[3], 0, 1);\n  const sp = 8 + round(P.grid * 4);\n  if (input.btnPressed && input.btnPressed[2]) {\n    place(P);\n    P.built = false;\n  }\n  if (!P.built || sp !== P.sp) {\n    P.sp = sp;\n    P.built = true;\n    P.glowDirty = true;\n    build(P);\n  }\n  P.acc += dt * P.spd * 1.2;\n  let n = 0;\n  while (P.acc >= 1) {\n    P.acc -= 1;\n    n++;\n  }\n  if (n > 24) {\n    P.ox += n;\n    P.oy -= n;\n    build(P);\n  } else for (let s = 0; s \u003c n; s++) step(P);\n  // Cloud is nearer than the ground, so it slides past faster.\n  P.cs += dt * P.spd * 1.2 * 1.414 * 1.7;\n  P.t += dt;\n  if (n || P.glowDirty) glow(P);\n  // Cloud cover on a 2-LED lattice.\n  const th = 0.8 - 0.78 * P.haze;\n  const veil = 0.25 * P.haze * P.haze;\n  const thick = 0.45 + 0.4 * P.haze;\n  for (let gy = 0; gy \u003c 65; gy++)\n    for (let gx = 0; gx \u003c 33; gx++) {\n      const x = gx * 2;\n      const y = gy * 2;\n      const a = (y - x) * R2 - P.cs;\n      const bb = (x + y) * R2;\n      const nz = 0.65 * vn(a / 30 + 40, bb / 16 + 5.3 + P.t * 0.02) + 0.35 * vn(a / 11 + 70, bb / 7 + 11 - P.t * 0.03);\n      let dn = cl((nz - th) / 0.28, 0, 1);\n      dn = dn * dn * (3 - 2 * dn);\n      P.CL[gx + gy * 33] = min(0.88, dn * thick + veil);\n    }\n}\n\n// The town's light blurred, for cloud to glow with: two box passes each way.\nfunction glow(P) {\n  P.glowDirty = false;\n  const A = P.GA;\n  const B = P.GB;\n  for (let y = 0; y \u003c H; y++) {\n    const row = md(P.oy + y, H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const slot = ((P.ox + x) & 63) + row;\n      A[x + y * W] = P.KD[slot] ? P.LB[slot] : 0;\n    }\n  }\n  for (let pass = 0; pass \u003c 4; pass++) {\n    const [src, dst] = pass & 1 ? [B, A] : [A, B];\n    const horiz = pass \u003c 2;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        let sum = 0;\n        for (let d = -2; d \u003c= 2; d++) {\n          const u = horiz ? cl(x + d, 0, W - 1) : x;\n          const v = horiz ? y : cl(y + d, 0, H - 1);\n          sum += src[u + v * W];\n        }\n        dst[x + y * W] = sum / 5;\n      }\n  }\n}\n\nconst SOD = [255, 132, 26];\nconst LEDW = [[255, 214, 168], [226, 236, 255]];\nconst MERC = [150, 255, 196];\nconst HOUSEC = [255, 176, 92];\nconst FLOODC = [214, 230, 255];\nconst HEAD = [255, 250, 232];\nconst TAIL = [255, 30, 20];\nconst C = [0, 0, 0];\nconst NB = [0.5, 0.62, 1];\nconst NIGHT = 0.7;\n\n// A lamp's colour into C, from its kind, its dice and the Lamps knob.\nfunction lampColour(kind, h, k1) {\n  const h2 = (h * 7.31) % 1;\n  const h3c = (h * 13.7) % 1;\n  if (kind === STREET || kind === BLVD || kind === HWY || kind === PATH) {\n    const base = kind === BLVD ? 0.3 : kind === PATH ? 0.6 : 0.06;\n    if (h \u003c base + k1 * (1 - base)) {\n      for (let c = 0; c \u003c 3; c++) C[c] = LEDW[0][c] + (LEDW[1][c] - LEDW[0][c]) * h3c;\n    } else if (h2 > 0.94 && kind === STREET) {\n      for (let c = 0; c \u003c 3; c++) C[c] = MERC[c];\n    } else {\n      C[0] = SOD[0];\n      C[1] = SOD[1] + 24 * h3c;\n      C[2] = SOD[2] + 14 * h3c;\n    }\n  } else if (kind === WHITE) {\n    for (let c = 0; c \u003c 3; c++) C[c] = LEDW[0][c] + (LEDW[1][c] - LEDW[0][c]) * h2;\n  } else if (kind === HOUSE) {\n    for (let c = 0; c \u003c 3; c++) C[c] = HOUSEC[c];\n  } else {\n    for (let c = 0; c \u003c 3; c++) C[c] = FLOODC[c];\n  }\n  // Every lamp burns at full strength in its brightest channel.\n  const m = 255 / max(C[0], C[1], C[2]);\n  for (let c = 0; c \u003c 3; c++) C[c] *= m;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.built) return;\n  const t = P.t;\n  const k1 = P.k1;\n  const haze = [1 - 0.18 * k1, 0.64 + 0.24 * k1, 0.36 + 0.64 * k1];\n  const cloudT = [1 - 0.12 * k1, 0.8 + 0.12 * k1, 0.64 + 0.36 * k1];\n  const water = [0.32, 0.5, 1];\n  const wingT = [0.78, 0.84, 1];\n  // Strobe: a double flash every 1.25 s.\n  const ph = t % 1.25;\n  const flash = ph \u003c 0.05 || (ph > 0.15 && ph \u003c 0.2) ? 1 : 0;\n  // Cars: lane A runs with the ground, lane B against it, in cells along the lane.\n  const vA = 0.9 * t;\n  const vB = -0.9 * t;\n  for (let y = 0; y \u003c H; y++) {\n    const wy = P.oy + y;\n    const row = md(wy, H) * W;\n    const gy = y >> 1;\n    const fy = (y & 1) * 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const wx = P.ox + x;\n      const slot = (wx & 63) + row;\n      const plus = ((x + y + P.p0) & 1) === 0;\n      const gx = x >> 1;\n      const fx = (x & 1) * 0.5;\n      const ci = gx + gy * 33;\n      const c0 = P.CL[ci] + (P.CL[ci + 1] - P.CL[ci]) * fx;\n      const c1 = P.CL[ci + 33] + (P.CL[ci + 34] - P.CL[ci + 33]) * fx;\n      const al = c0 + (c1 - c0) * fy;\n      const wg = P.wing[x + y * W];\n      let M;\n      let tr;\n      let tg;\n      let tb;\n      if (wg > 0) {\n        const nd = (x - P.nav[0]) ** 2 + (y - P.nav[1]) ** 2;\n        const sd = (x - P.strobe[0]) ** 2 + (y - P.strobe[1]) ** 2;\n        M = wg + 80 * flash * exp(-sd / 60);\n        const gl = 0.5 * exp(-nd / 10);\n        tr = wingT[0] * (1 - gl);\n        tg = wingT[1];\n        tb = wingT[2] * (1 - gl * 0.6);\n        let v = max(0, M + (plus ? 10 : -10));\n        let r = tr * v;\n        let g = tg * v;\n        let b = tb * v;\n        if (x === P.nav[0] && y === P.nav[1]) [r, g, b] = [40, 255, 90];\n        else if (x === P.strobe[0] && y === P.strobe[1]) {\n          if (flash) [r, g, b] = [255, 255, 255];\n          else [r, g, b] = [70, 74, 86];\n        }\n        display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n        continue;\n      }\n      const wt = P.WT[slot];\n      M = P.MS[slot];\n      // Ground, water and cloud tints mix, and the brightest channel is put\n      // back to 1 so the mix never dims a step.\n      tr = haze[0] + (water[0] - haze[0]) * wt;\n      tg = haze[1] + (water[1] - haze[1]) * wt;\n      tb = haze[2] + (water[2] - haze[2]) * wt;\n      tr += (cloudT[0] - tr) * al;\n      tg += (cloudT[1] - tg) * al;\n      tb += (cloudT[2] - tb) * al;\n      // The cells between the carpet's dots fall toward blue-black.\n      if (!plus) {\n        const nb = NIGHT * (1 - al);\n        tr += (NB[0] - tr) * nb;\n        tg += (NB[1] - tg) * nb;\n        tb += (NB[2] - tb) * nb;\n      }\n      // Cloud lit from below by the town.\n      const Lc = 0.55 * M + 14 + 210 * P.GA[x + y * W] + 24 * al;\n      const G = M + (Lc - M) * al;\n      const v = max(0, G + (plus ? AMP : -AMP)) / max(tr, tg, tb);\n      let r = v * tr;\n      let g = v * tg;\n      let b = v * tb;\n      if (plus) {\n        let kind = P.KD[slot];\n        let lb = P.LB[slot];\n        let col = null;\n        const dp = x + y + P.p0 - P.ph;\n        if (dp === 0 || dp === 4) {\n          // Carriageways: m counts cells along the lane.\n          const m = (x - y + P.ox - P.oy) >> 1;\n          const lane = dp === 0 ? 0 : 1;\n          const slotK = floor(m + (lane ? vB : vA) + 0.5);\n          if (h3(slotK, lane, P.seed + 21) \u003c 0.45) {\n            col = lane ? TAIL : HEAD;\n            lb = 1;\n          }\n        }\n        if (col || kind) {\n          if (!col) {\n            lampColour(kind, P.LH[slot], k1);\n            col = C;\n          }\n          const h = P.LH[slot];\n          const tw = lb * (0.97 + 0.03 * sin(t * (2.5 + 4 * h) + h * 40));\n          const keep = 1 - 0.85 * al;\n          r = col[0] * tw * keep + r * (1 - keep);\n          g = col[1] * tw * keep + g * (1 - keep);\n          b = col[2] * tw * keep + b * (1 - keep);\n        }\n      }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamps=0..1, Speed=0.2..3, Grid=0..1, Haze=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamps","min":0,"max":1,"about":"The street lights: an old sodium city at 0, orange with the odd green mercury lamp; turned up, the lamps are swapped for white LEDs one by one until the whole town is white at 1."},{"name":"Speed","min":0.2,"max":3,"about":"Ground speed: at 2 the city slides about 3.4 LEDs a second toward the lower left, at 0.2 it barely creeps; the cars on the highway keep their own pace on top of it."},{"name":"Grid","min":0,"max":1,"about":"Street spacing inside the boulevards: blocks eight or nine LEDs apart at 0, twelve or thirteen at 1, with more house lights inside the wider ones."},{"name":"Haze","min":0,"max":1,"about":"Cloud under the plane: a clear night with the odd wisp at the low end, a broken layer lit from below by the town in the middle, and at 1 an overcast the city only glows through."}],"start":[0,2,0,0.06],"measures":{"motion":0.3475,"detail":0.3276,"edges":0.2578,"complexity":1.0097,"coverage":0.5044,"colour":0.2424,"drift":0.0667},"knobResponse":[0.0508,0.1119,0.0511,0.1477]},{"slug":"nixie","title":"Nixie","family":"circuit","round":21,"note":"회로판 소켓에 선 닉시관 속, 육각 그물 뒤에 겹겹이 선 숫자 철사 가운데 하나가 네온 주황으로 빛나요. 숫자가 돌다가 하나씩 멈추고, Mode 노브를 돌리면 주파수 계수기나 시계가 돼요.","idea":"Nixie tubes stand in their sockets on a circuit board, and in each a stack of wire numerals waits behind a fine hexagonal mesh while one of them glows neon orange: spinning through the stack and settling, counting, keeping time or counting down.","buttons":"K1 tap runs every cathode in turn now.","code":"// ===== Patternflow pattern =====\n// Title:   Nixie\n// Family:  circuit\n// Idea:    Nixie tubes stand in their sockets on a circuit board, and in each a stack of wire numerals waits behind a fine hexagonal mesh while one of them glows neon orange: spinning through the stack and settling, counting, keeping time or counting down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the cold-cathode numeral tubes of the 1950s to 1980s (the Burroughs Nixie, the Soviet IN-14 and IN-18)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Gas=0..1, Speed=0.2..3, Rows=1..3, Mode=0..3\n//\n// Knob 1: Gas. What glows: neon orange at 0, a pink neon-argon mix at a third, the blue-violet of argon and mercury at two thirds, and at 1 a tube behind green-filtered glass.\n// Knob 2: Speed. How fast the display runs: at 2 a spinning tube runs through 16 numerals a second before it slows and stops.\n// Knob 3: Rows. One big tube at 1, two rows of two at 2, three rows of two at 3, each row on its own board. With more than one, one tube is a newer replacement, brighter, with a clean silver getter.\n// Knob 4: Mode. Scramble at 0 (every tube spins and stops on a random number, one after another), a frequency counter at 1, a clock at 2 (one big tube spells the time a numeral at a time), a countdown that ends in the anti-poisoning run through every cathode at 3.\n// Buttons: K1 tap runs every cathode in turn now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Numerals as strokes in a box one wide and one tall, y down: lines and\n// elliptical arcs in degrees, 90 pointing down. The 3 has a flat top and the\n// 5 is the 2 turned over, as in the IN-14.\nconst FONT = [\n  [[\"l\", 0, 0.3, 0, 0.7], [\"l\", 1, 0.3, 1, 0.7], [\"a\", 0.5, 0.3, 0.5, 0.3, 180, 360], [\"a\", 0.5, 0.7, 0.5, 0.3, 0, 180]],\n  [[\"l\", 0.56, 0, 0.56, 1], [\"l\", 0.56, 0, 0.26, 0.16]],\n  [[\"a\", 0.5, 0.27, 0.5, 0.27, 195, 400], [\"l\", 0.883, 0.444, 0, 1], [\"l\", 0, 1, 1, 1]],\n  [[\"l\", 0.04, 0, 0.96, 0], [\"l\", 0.96, 0, 0.4, 0.39], [\"a\", 0.5, 0.68, 0.5, 0.3, 255, 510]],\n  [[\"l\", 0.76, 1, 0.76, 0], [\"l\", 0.76, 0, 0, 0.68], [\"l\", 0, 0.68, 1, 0.68]],\n  [[\"l\", 1, 0, 0, 0], [\"l\", 0, 0, 0.883, 0.556], [\"a\", 0.5, 0.73, 0.5, 0.27, -40, 165]],\n  [[\"a\", 0.5, 0.7, 0.5, 0.3, 0, 360], [\"a\", 0.95, 0.7, 0.95, 0.68, 180, 252]],\n  [[\"l\", 0, 0, 1, 0], [\"l\", 1, 0, 0.32, 1]],\n  [[\"a\", 0.5, 0.24, 0.42, 0.24, 0, 360], [\"a\", 0.5, 0.73, 0.5, 0.27, 0, 360]],\n  [[\"a\", 0.5, 0.3, 0.5, 0.3, 0, 360], [\"a\", 0.05, 0.3, 0.95, 0.68, 0, 72]],\n];\n// The cathodes front to back. A numeral further back sits a little smaller,\n// and the wires in front of it cross its glow.\nconst STACK = [1, 6, 2, 7, 5, 0, 4, 9, 8, 3];\nconst DEPTH = [];\nSTACK.forEach((d, i) => (DEPTH[d] = i));\n// Glass width, glass top and height, pins, socket, numeral box, where the\n// numeral sits down the glass, mesh cell, and a scale for wires and glow.\nconst LAY = [\n  { gw: 54, top: 4, gh: 109, pin: 4, sock: 4, dw: 36, dh: 72, dc: 0.5, hex: 2.4, s: 1 },\n  { gw: 26, top: 3, gh: 50, pin: 3, sock: 2, dw: 17, dh: 34, dc: 0.5, hex: 1.6, s: 0.5 },\n  { gw: 24, top: 2, gh: 32, pin: 2, sock: 2, dw: 14, dh: 23, dc: 0.5, hex: 1.4, s: 0.38 },\n];\n// Each gas: dim edge of the glow, the glow, the hot core.\nconst GAS = [\n  [[120, 22, 2], [255, 96, 18], [255, 214, 150]],\n  [[110, 8, 54], [255, 58, 140], [255, 204, 232]],\n  [[40, 26, 150], [92, 120, 255], [204, 236, 255]],\n  [[18, 92, 10], [104, 240, 40], [214, 255, 170]],\n];\n\nfunction strokes(dg, bx, by, w, h) {\n  const out = [];\n  for (const [k, a, b, c, d, e, f] of FONT[dg]) {\n    if (k === \"l\") {\n      out.push(bx + a * w, by + b * h, bx + c * w, by + d * h);\n      continue;\n    }\n    const n = max(4, ceil((abs(f - e) / 180) * (c * w + d * h) * 0.9));\n    for (let i = 0, px = 0, py = 0; i \u003c= n; i++) {\n      const th = ((e + ((f - e) * i) / n) * PI) / 180, x = bx + (a + c * cos(th)) * w, y = by + (b + d * sin(th)) * h;\n      if (i) out.push(px, py, x, y);\n      [px, py] = [x, y];\n    }\n  }\n  return out;\n}\nfunction segDist(x, y, S) {\n  let best = 1e9;\n  for (let i = 0; i \u003c S.length; i += 4) {\n    const ax = S[i], ay = S[i + 1], dx = S[i + 2] - ax, dy = S[i + 3] - ay, l = dx * dx + dy * dy;\n    const u = l ? cl(((x - ax) * dx + (y - ay) * dy) / l, 0, 1) : 0, ex = x - ax - u * dx, ey = y - ay - u * dy, d = ex * ex + ey * ey;\n    if (d \u003c best) best = d;\n  }\n  return sqrt(best);\n}\n// How much a wire of the hexagonal anode mesh (cells of size a) covers a point.\nfunction hexLine(x, y, a) {\n  const q = (x * 0.57735 - y / 3) / a, r = (y * 2) / 3 / a;\n  let rx = round(q), rz = round(r);\n  const ry = round(-q - r), dx = abs(rx - q), dz = abs(rz - r), dy = abs(ry + q + r);\n  if (dx > dy && dx > dz) rx = -ry - rz;\n  else if (dy \u003c= dz) rz = -rx - ry;\n  const ux = abs(x - a * 1.732 * (rx + rz / 2)), uy = abs(y - a * 1.5 * rz);\n  return cl(1 - (a * 0.866 - max(ux, 0.5 * ux + 0.866 * uy)) / 0.6, 0, 1);\n}\n\nfunction build(P, R) {\n  const L = LAY[R - 1], s = L.s, cols = R > 1 ? 2 : 1, cw = W / cols;\n  const A = (P.amb = new Float32Array(N * 3)), RF = (P.refl = new Float32Array(N)), TR = (P.tr = new Float32Array(N).fill(1));\n  const PL = (P.pool = new Float32Array(N)), TI = (P.tid = new Uint8Array(N)), PZ = (P.pz = new Uint8Array(N)), GL = (P.gl = new Uint8Array(N));\n  const D = (P.D = Array.from({ length: 11 }, () => new Uint8Array(N).fill(255)));\n  const OC = (P.OC = Array.from({ length: 10 }, () => new Uint8Array(N)));\n  const put = (x, y, r, g, b, f) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    A.set([r, g, b], p * 3);\n    RF[p] = f;\n  };\n  const line = (x0, y0, x1, y1, c, f) => {\n    for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0), 1); i \u003c= n; i++) put(round(mix(x0, x1, i / n)), round(mix(y0, y1, i / n)), ...c, f);\n  };\n  // Glow and the light it throws, by distance to the lit wire in eighths.\n  const CO = (P.CO = new Float32Array(256)), SP = (P.SP = new Float32Array(256)), WR = new Float32Array(256);\n  for (let q = 0; q \u003c 256; q++) {\n    const d = q / 8;\n    CO[q] = 1.35 * exp(-((d / (0.55 + 0.35 * s)) ** 2)) + 0.5 * exp(-((d / (1.2 + 0.8 * s)) ** 2)) + 0.22 * exp(-d / (2.5 + 2.5 * s));\n    SP[q] = 0.8 * exp(-d / (1.5 + 3 * s)) + 0.3 * exp(-d / (4 + 12 * s));\n    WR[q] = cl(1.3 - d / (0.45 + 0.35 * s), 0, 1);\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const g = 0.7 + 0.6 * hash(p & 63, p >> 6);\n    put(p & 63, p >> 6, 5 * g, 5 * g, 7 * g, 0.12);\n  }\n  const n = (P.n = R * cols), T = (P.T = []);\n  P.newT = n > 1 ? floor(rnd() * n) : -1;\n  P.oldT = n > 1 ? (P.newT + 1 + floor(rnd() * (n - 1))) % n : 0;\n  P.pois = [0, 9, 3, 8][floor(rnd() * 4)];\n  P.lamps = [];\n  for (let r = 0, i = 0; r \u003c R; r++)\n    for (let c = 0; c \u003c cols; c++, i++) {\n      const y0 = round((r * H) / R), y1 = round(((r + 1) * H) / R), x0 = c * cw, cx = x0 + cw / 2;\n      const top = y0 + L.top, bot = top + L.gh, hw = L.gw / 2, dmh = round(L.gw * 0.3), rb = max(2, round(L.gw * 0.12));\n      const dcy = top + L.gh * L.dc, bx = cx - L.dw / 2, by = dcy - L.dh / 2, m = 1 + 3 * s;\n      const c0 = floor(bx - m), c1 = ceil(bx + L.dw + m + 2 * s), r0 = floor(by - m), r1 = ceil(by + L.dh + m);\n      const nw = i === P.newT ? 1.35 : 1;\n      const half = (y) => {\n        const v = y + 0.5;\n        if (v \u003c top || v > bot) return -1;\n        if (v \u003c top + dmh) return hw * sqrt(max(0, 1 - ((top + dmh - v) / dmh) ** 2));\n        if (v > bot - rb) return hw - rb + sqrt(max(0, rb * rb - (v - bot + rb) ** 2));\n        return hw;\n      };\n      // Each numeral's wire, by distance, in this tube's cell.\n      const S = [];\n      for (let j = 0; j \u003c 10; j++) {\n        const sc = 1 - 0.008 * DEPTH[j];\n        S.push(strokes(j, cx - (L.dw * sc) / 2, dcy - (L.dh * sc) / 2, L.dw * sc, L.dh * sc));\n      }\n      S.push([bx + L.dw * 1.17, by + L.dh * 0.98, bx + L.dw * 1.17, by + L.dh * 0.98]);\n      // In the old tube a numeral the clock seldom shows is poisoned: a patch\n      // of its wire has stopped glowing.\n      const pzx = S[P.pois][0] * 0.5 + S[P.pois][2] * 0.5, pzy = S[P.pois][1] * 0.5 + S[P.pois][3] * 0.5;\n      for (let y = y0; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const p = y * W + x, X = x + 0.5, Y = y + 0.5;\n          TI[p] = i;\n          if (hypot(max(0, bx - X, X - bx - L.dw), max(0, by - Y, Y - by - L.dh)) > 33) continue;\n          for (let j = 0; j \u003c 11; j++) D[j][p] = min(255, round(max(0, segDist(X, Y, S[j]) - (j > 9 ? 0.4 + 0.5 * s : 0)) * 8));\n          if (i === P.oldT) PZ[p] = round(255 * exp(-((hypot(X - pzx, Y - pzy) / (1.4 + 2 * s)) ** 2)));\n        }\n      // Glass, getter, mica, rods, the anode mesh and the cathodes behind it.\n      for (let y = y0; y \u003c y1; y++) {\n        const hy = half(y), hu = half(y - 1), hd = half(y + 1);\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const p = y * W + x, ax = abs(x + 0.5 - cx), e = hy - ax, g = hash(x, y + 300), left = x + 0.5 \u003c cx;\n          if (e \u003c= 0) continue;\n          let col = [4 + 2 * g, 5 + 2 * g, 7 + 2 * g], f = 0.09;\n          if (e \u003c 1.2 || hu - ax \u003c= 0 || hd - ax \u003c= 0) [col, f] = [[24 * nw, 28 * nw, 34 * nw], 0.5];\n          else if (y \u003c top + dmh * 0.8) {\n            // The getter's mirror on the dome: bright and clean in a new tube,\n            // dull brown in an old one.\n            const a = cl(1.15 - (y - top) / (dmh * 0.72) + 0.3 * (g - 0.5), 0, 1), v = nw > 1 ? 40 + 56 * a : 24 + 26 * a;\n            col = (nw > 1 ? [v, v, v * 1.06] : [v * 0.95, v * 0.86, v * 0.72]).map((c, ch) => mix(col[ch], c, a));\n            f = mix(0.09, 0.5, a);\n          } else if (x >= c0 && x \u003c= c1 && y >= r0 && y \u003c= r1) {\n            // Inside the anode: the back plate, the unlit wires, the mesh in front.\n            let w = 0;\n            for (let j = 0; j \u003c 10; j++) w = max(w, WR[D[j][p]] * (1 - 0.05 * DEPTH[j]));\n            const mh = x === c0 || x === c1 ? 1 : hexLine(x + 0.5 - cx, y + 0.5 - dcy, L.hex);\n            col = [mix(6, 25, w) + 6 * mh, mix(6, 25, w) + 6 * mh, mix(7, 29, w) + 7 * mh];\n            f = mix(0.15, 0.34, w) + 0.25 * mh;\n            TR[p] = 1 - 0.42 * mh;\n            for (let k = 0, run = 0; k \u003c 10; k++) {\n              OC[STACK[k]][p] = run;\n              run = max(run, round(WR[D[STACK[k]][p]] * 255));\n            }\n          } else if ((y === r0 - 1 || y === r0 - 2 + (s \u003c 0.6) || y === r1 + 1 || y === r1 + 2 - (s \u003c 0.6)) && e > 1.5) [col, f] = [[(34 + 18 * g) * nw, (34 + 18 * g) * nw, (32 + 16 * g) * nw], 0.62];\n          else if ((x === c0 - 2 || x === c1 + 2) && y > r0 - 3 && y \u003c r1 + 4 * s + 2) [col, f] = [[26, 26, 28], 0.55];\n          // The window behind the camera, on the left of the glass.\n          const u = (y - top) / L.gh, hl = left && e >= 1.2 && e \u003c 3.2 ? (e \u003c 2.2 ? 1 : 0.35) * max(cl(1 - abs(u - 0.5) / 0.3, 0, 1) ** 0.4, cl(1 - abs(u - 0.14) / 0.05, 0, 1)) : 0;\n          if (hl > 0) col = col.map((v, ch) => v + hl * (104 + 12 * ch) * nw);\n          GL[p] = 1;\n          if (!left && e >= 2 && e \u003c 3 && y > top + dmh && y \u003c bot - rb * 2) col = col.map((v, ch) => v + (16 + 4 * ch) * nw);\n          put(x, y, ...col, f);\n        }\n      }\n      // A bright curve on the dome, and the exhaust tip.\n      for (let a = 196; a \u003c 252; a += 1.5) {\n        const v = (60 + 80 * sin(((a - 196) * PI) / 56)) * nw;\n        put(round(cx + (hw - 2.5) * cos((a * PI) / 180) - 0.5), round(top + dmh + (dmh - 2) * sin((a * PI) / 180) - 0.5), v, v * 1.05, v * 1.15, 0.3);\n      }\n      for (let y = top - 1 - round(2 * s); y \u003c top; y++) put(floor(cx) - 1, y, 36, 40, 46, 0.2), put(floor(cx), y, 50, 54, 60, 0.2);\n      // Leads from the bottom mica to the glass press, pins to the socket.\n      const sh = round(2 + 4 * s), np = R === 1 ? 13 : 7, ph = hw * 0.55;\n      for (let k = 0; k \u003c np; k++) {\n        const u = k / (np - 1), xa = round(mix(c0 + 2, c1 - 2, u)), xp = round(cx - ph + 2 * ph * u);\n        line(xa, r1 + 3, xp, bot - sh, [30, 30, 33], 0.6);\n        for (let y = bot; y \u003c bot + L.pin; y++) put(xp, y, 62 + 20 * (y === bot), 64 + 20 * (y === bot), 68 + 20 * (y === bot), 0.5);\n        put(xp, bot + L.pin, 120, 92, 40, 0.4);\n      }\n      for (let y = bot - sh; y \u003c bot; y++) {\n        const hwp = mix(hw * 0.32, hw * 0.48, (y - bot + sh) / sh);\n        for (let x = ceil(cx - hwp); x \u003c cx + hwp; x++) if (half(y) - abs(x + 0.5 - cx) > 1.2) put(x, y, 20 + 14 * (y === bot - sh), 22 + 14 * (y === bot - sh), 25 + 15 * (y === bot - sh), 0.35);\n      }\n      const sy = bot + L.pin, by0 = sy + L.sock;\n      for (let y = sy; y \u003c by0; y++) for (let x = ceil(cx - hw * 0.75); x \u003c cx + hw * 0.75; x++) if (y > sy || !RF[y * W + x] || A[(y * W + x) * 3] \u003c 100) put(x, y, y === sy ? 30 : 13, y === sy ? 30 : 13, y === sy ? 34 : 15, 0.25);\n      for (let k = 0; k \u003c np; k++) put(round(cx - ph + (2 * ph * k) / (np - 1)), sy, 120, 92, 40, 0.4);\n      // The board: green mask, copper under it, gold pads.\n      for (let y = by0; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const g = hash(x + 50, y), edge = y === by0;\n          put(x, y, edge ? 38 : 10 + 4 * g, edge ? 46 : 26 + 6 * g, edge ? 42 : 16 + 4 * g, 0.6);\n        }\n      for (let k = 0; k \u003c np; k += 2) {\n        const xp = round(cx - ph + (2 * ph * k) / (np - 1)), yv = by0 + 2 + (k & 2 ? 1 : 0);\n        line(xp, by0 + 1, xp, y1, [20, 54, 32], 0.6);\n        put(xp, yv, 120, 96, 44, 0.5);\n      }\n      for (let y = top - 4; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const v = exp(-(((x + 0.5 - cx) / (hw * 0.8)) ** 2)) * exp(-max(0, y - bot + 6) / (6 + 10 * s));\n          if (y >= bot - 8) PL[y * W + x] = 0.45 * v;\n        }\n      T.push({ cx, bot, by0, y1, hw });\n      if (R === 1) P.lamps.push([60, 107, 4, 10]);\n      else if (c === 1) P.lamps.push([30, bot - round(9 * s), 4, round(11 * s)]);\n    }\n  if (R === 1) {\n    // An anode resistor and the high-voltage capacitor lie on the big board.\n    for (let x = 1; x \u003c 14; x++) put(x, 124, 70, 72, 76, 0.4);\n    for (let x = 3; x \u003c 12; x++) for (let y = 123; y \u003c 126; y++) put(x, y, ...[[110, 96, 70], [90, 50, 22], [20, 18, 16], [150, 36, 24]][x === 5 ? 1 : x === 7 ? 2 : x === 9 ? 3 : 0].map((v) => v * (y === 123 ? 1.2 : y === 125 ? 0.7 : 1)), 0.4);\n    for (let x = 50; x \u003c 62; x++) for (let y = 122; y \u003c 127; y++) put(x, y, ...(x > 59 ? [78, 80, 86] : x === 52 ? [90, 110, 150] : [26, 44, 110]).map((v) => v * (y === 122 ? 1.3 : y === 126 ? 0.6 : 1)), 0.4);\n  }\n  // The neon indicator lamps: a glass capsule with two electrodes.\n  for (const [lx, ly, lw, lh] of P.lamps) {\n    for (let y = ly; y \u003c ly + lh; y++)\n      for (let x = lx; x \u003c lx + lw; x++) {\n        const rim = x === lx || x === lx + lw - 1 || y === ly;\n        put(x, y, rim ? 30 : 8, rim ? 34 : 9, rim ? 40 : 11, 0.3);\n      }\n    for (let y = ly + 2; y \u003c ly + lh + 3; y++) put(lx + 1, y, 44, 44, 46, 0.4), put(lx + lw - 2, y, 44, 44, 46, 0.4);\n  }\n  P.amb0 = A.slice();\n  for (const k of [\"tg\", \"dsp\", \"pk\", \"fa\", \"fl\", \"dp\", \"s0\", \"s1\", \"b\", \"sp\"]) P[k] = new Array(n).fill(k === \"dsp\" || k === \"pk\" ? -1 : 0);\n}\n\n// The gas: a glow colour for every brightness, and the light it throws.\nfunction ramp(P, gas) {\n  const f = gas * 3, i = min(2, floor(f)), t = f - i;\n  const [h, b, c] = GAS[i].map((col, k) => col.map((v, ch) => mix(v, GAS[i + 1][k][ch], t)));\n  const RA = (P.RA = new Float32Array(768)), st = [0, 0.12, 0.35, 0.8, 1.5, 2.55];\n  const cs = [[0, 0, 0], h.map((v) => v * 0.35), h, b, b.map((v, ch) => mix(v, c[ch], 0.6)), c];\n  for (let j = 0, k = 0; j \u003c 256; j++) {\n    const e = j / 100;\n    while (k \u003c 4 && e > st[k + 1]) k++;\n    const u = (e - st[k]) / (st[k + 1] - st[k]);\n    for (let ch = 0; ch \u003c 3; ch++) RA[j * 3 + ch] = mix(cs[k][ch], cs[k + 1][ch], cl(u, 0, 1));\n  }\n  const lum = (b[0] + b[1] + b[2]) / 3;\n  P.spill = b.map((v) => mix(v, lum, 0.35));\n  // A green-filtered tube is green glass.\n  const gf = cl(gas * 3 - 2, 0, 1), tint = [1 - 0.3 * gf, 1 + 0.5 * gf, 1 - 0.2 * gf];\n  if (P.amb0) for (let p = 0; p \u003c N * 3; p++) P.amb[p] = P.amb0[p] * (P.gl[(p / 3) | 0] ? tint[p % 3] : 1);\n}\n\n// A spin: the tube runs up through the numerals, slowing from 16 to 3 a\n// second, and stops on its target.\nfunction roll(P, i, wait, len) {\n  P.s0[i] = P.t + wait;\n  P.s1[i] = P.t + wait + len;\n}\nfunction spinDigit(P, i) {\n  const T = P.s1[i] - P.s0[i], u = (P.t - P.s0[i]) / T, ph = T * (16 * u - 6.5 * u * u), all = T * 9.5;\n  return (((P.tg[i] + floor(ph) - floor(all)) % 10) + 10) % 10;\n}\nfunction digits(P, v) {\n  for (let i = P.n - 1; i >= 0; i--, v = floor(v / 10)) P.tg[i] = v % 10;\n}\n\nfunction start(P) {\n  Object.assign(P, { next: P.t, gate: P.t, retune: P.t + 4, base: 140000 + rnd() * 800000, key: -1, v: 0, step: P.t, cyc: -9, blank: 0 });\n  P.c0 = P.n === 6 ? 23 * 3600 + 59 * 60 + 53 : P.n === 4 ? 23 * 3600 + 57 * 60 : 9 * 3600 + 58 * 60;\n  P.s1.fill(0);\n}\n\nconst MODES = [\n  // Scramble: the tubes spin, stop one after another, and the number holds.\n  (P) => {\n    if (P.t \u003c P.next) return;\n    const n = P.n;\n    for (let i = 0; i \u003c n; i++) {\n      P.tg[i] = floor(rnd() * 10);\n      roll(P, i, 0.07 * i, n > 1 ? 0.8 + 0.3 * i : 1.5);\n    }\n    P.next = P.t + (n > 1 ? 0.9 + 0.37 * n : 1.5) + 2.6;\n    P.lamp = 0;\n  },\n  // A frequency counter reading an oscillator that drifts as it warms up.\n  (P) => {\n    if (P.t \u003c P.gate) return;\n    P.gate += P.n > 1 ? 0.12 : 0.4;\n    if (P.t > P.retune) [P.base, P.retune, P.blank] = [10000 + rnd() * 980000, P.t + 5 + rnd() * 3, 0.25];\n    digits(P, floor(P.base + 37 * P.t + 4 * sin(P.t * 2.1) + rnd() * 3));\n    P.dp.fill(0);\n    if (P.n > 3) P.dp[P.n - 4] = 1;\n    P.lamp = 1;\n  },\n  // A clock: a big tube spells the time a numeral at a time.\n  (P) => {\n    const n = P.n, C = P.c0 + P.t * (n === 6 ? 2 : n === 4 ? 60 : 10), s = floor(C) % 86400;\n    const hh = floor(s / 3600), mm = floor(s / 60) % 60, ss = s % 60, all = [floor(hh / 10), hh % 10, floor(mm / 10), mm % 10, floor(ss / 10), ss % 10];\n    if (n === 1) {\n      const ph = P.t % 3.6, j = floor(ph / 0.7);\n      P.tg[0] = j \u003c 4 && ph % 0.7 \u003c 0.56 ? all[j] : -1;\n      P.dp[0] = j === 1 ? 1 : 0;\n      P.lamp = j \u003c 4 ? 1 : 0;\n      return;\n    }\n    // A new minute (or hour) runs the slot machine, which also keeps the\n    // cathodes from poisoning.\n    const key = n === 6 ? floor(s / 60) : hh;\n    if (P.key >= 0 && key !== P.key) for (let i = 0; i \u003c n; i++) roll(P, i, 0.05 * i, 0.7 + 0.12 * i);\n    P.key = key;\n    for (let i = 0; i \u003c n; i++) P.tg[i] = all[i];\n    P.lamp = (n === 6 ? C : P.t) % 1 \u003c 0.5 ? 1 : 0;\n  },\n  // A countdown; at zero every cathode runs in turn, then it starts again.\n  (P) => {\n    if (P.t \u003c P.step) return;\n    if (P.v > 0) {\n      digits(P, --P.v);\n      P.step += 0.4;\n      P.lamp = 1;\n    } else if (P.cyc \u003c P.step - 3) {\n      P.cyc = P.t + 0.6;\n      P.step = P.t + 2.6;\n    } else {\n      P.v = P.n === 1 ? 10 : 17;\n      P.step = P.t;\n    }\n  },\n];\n\nexport function setup(params) {\n  Object.assign(params, { t: 0, rt: 0, R: 0, gas: -1, mode: -1, lamp: 0, lv: 0, buf: new Float32Array(N * 3) });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt, 0, 0.1);\n  const rate = cl(k[1], 0.2, 3) / 2, R = cl(round(k[2]), 1, 3), mode = cl(round(k[3]), 0, 3), gas = cl(k[0], 0, 1);\n  if (R !== P.R) [P.R, P.mode, P.gas] = [R, -1, -1, build(P, R)];\n  if (abs(gas - P.gas) > 0.002) ramp(P, (P.gas = gas));\n  if (mode !== P.mode) start(P, (P.mode = mode));\n  P.t += dt * rate;\n  P.rt += dt;\n  if (input.btnPressed && input.btnPressed[0]) P.cyc = P.t;\n  P.lamp *= P.mode & 1 ? 0.6 : 1;\n  MODES[mode](P);\n  P.blank = max(0, P.blank - dt);\n  const cyc = P.t >= P.cyc && P.t \u003c P.cyc + 1.9;\n  for (let i = 0; i \u003c P.n; i++) {\n    let d = P.blank > 0 ? -1 : P.tg[i];\n    if (cyc) d = STACK[9 - ((floor((P.t - P.cyc) * 12) + i) % 10)];\n    else if (P.s1[i] && P.t >= P.s0[i] && P.t \u003c P.s1[i]) d = spinDigit(P, i);\n    else if (P.s1[i] && P.t >= P.s1[i]) [P.s1[i], P.fl[i]] = [0, 1];\n    if (d !== P.dsp[i]) [P.pk[i], P.fa[i], P.dsp[i]] = [P.dsp[i], 1, d];\n    P.fa[i] = max(0, P.fa[i] - dt * 14);\n    P.fl[i] = max(0, P.fl[i] - dt * 2.8);\n    // Neon flickers a little, and now and then an old tube sputters.\n    if ((P.sp[i] -= dt) \u003c= 0 && rnd() \u003c dt * 0.15) P.sp[i] = 0.12 + rnd() * 0.15;\n    const z = P.rt * 1.0 + i * 7.1;\n    P.b[i] = (i === P.newT ? 1.25 : 0.92) * (1 + 0.3 * P.fl[i]) * (0.97 + 0.02 * sin(z * 53) + 0.02 * sin(z * 7.3)) * (P.sp[i] > 0 ? 0.6 + 0.4 * (rnd() \u003c 0.5) : 1);\n  }\n  if (P.mode === 0 && P.s1.every((v) => !v)) P.lamp = 1;\n  P.lv += (P.lamp - P.lv) * min(1, dt * 30);\n}\n\nexport function draw(display, params) {\n  const P = params, { amb, refl, tr, pool, tid, D, OC, CO, SP, RA, buf, pz, spill, oldT, pois } = P;\n  const [sr, sg, sb] = spill, B = P.b, K = P.dsp, PK = P.pk, FA = P.fa, DP = P.dp;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const i = tid[p], b = B[i], k = K[i], pk = PK[i], fa = FA[i];\n    let Lt = 0, e = 0;\n    if (k >= 0) {\n      const q = D[k][p];\n      Lt = (SP[q] + pool[p]) * b;\n      e = CO[q] * b * (1 - OC[k][p] * 0.0022) * (i === oldT && k === pois ? 1 - pz[p] * 0.0035 : 1);\n    }\n    if (fa > 0 && pk >= 0) {\n      const q = D[pk][p];\n      Lt += (SP[q] + pool[p]) * b * fa;\n      e += CO[q] * b * fa;\n    }\n    if (DP[i] && k >= 0) {\n      const q = D[10][p];\n      Lt += SP[q] * b * 0.4;\n      e += CO[q] * b;\n    }\n    const j = min(255, (e * tr[p] * 100) | 0) * 3, f = refl[p] * Lt;\n    buf[o] = amb[o] + f * sr + RA[j];\n    buf[o + 1] = amb[o + 1] + f * sg + RA[j + 1];\n    buf[o + 2] = amb[o + 2] + f * sb + RA[j + 2];\n  }\n  // The indicator lamps glow on their left electrode.\n  const lv = P.lv;\n  if (lv > 0.02)\n    for (const [lx, ly, , lh] of P.lamps)\n      for (let y = ly + 1; y \u003c ly + lh + 2; y++)\n        for (let x = lx - 1; x \u003c= lx + 2; x++) {\n          if (x \u003c 0 || x >= W || y >= H) continue;\n          const o = (y * W + x) * 3, c = x === lx + 1 && y > ly + 1 && y \u003c ly + lh ? 1 : 0.3 * (y \u003c ly + lh);\n          buf[o] += 255 * c * lv;\n          buf[o + 1] += 120 * c * lv;\n          buf[o + 2] += 34 * c * lv;\n        }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n    display.setPixel(p & 63, p >> 6, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","layer":{"id":"layer-nixie","type":"code","name":"nixie","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Nixie\n// Family:  circuit\n// Idea:    Nixie tubes stand in their sockets on a circuit board, and in each a stack of wire numerals waits behind a fine hexagonal mesh while one of them glows neon orange: spinning through the stack and settling, counting, keeping time or counting down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the cold-cathode numeral tubes of the 1950s to 1980s (the Burroughs Nixie, the Soviet IN-14 and IN-18)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Gas=0..1, Speed=0.2..3, Rows=1..3, Mode=0..3\n//\n// Knob 1: Gas. What glows: neon orange at 0, a pink neon-argon mix at a third, the blue-violet of argon and mercury at two thirds, and at 1 a tube behind green-filtered glass.\n// Knob 2: Speed. How fast the display runs: at 2 a spinning tube runs through 16 numerals a second before it slows and stops.\n// Knob 3: Rows. One big tube at 1, two rows of two at 2, three rows of two at 3, each row on its own board. With more than one, one tube is a newer replacement, brighter, with a clean silver getter.\n// Knob 4: Mode. Scramble at 0 (every tube spins and stops on a random number, one after another), a frequency counter at 1, a clock at 2 (one big tube spells the time a numeral at a time), a countdown that ends in the anti-poisoning run through every cathode at 3.\n// Buttons: K1 tap runs every cathode in turn now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Numerals as strokes in a box one wide and one tall, y down: lines and\n// elliptical arcs in degrees, 90 pointing down. The 3 has a flat top and the\n// 5 is the 2 turned over, as in the IN-14.\nconst FONT = [\n  [[\"l\", 0, 0.3, 0, 0.7], [\"l\", 1, 0.3, 1, 0.7], [\"a\", 0.5, 0.3, 0.5, 0.3, 180, 360], [\"a\", 0.5, 0.7, 0.5, 0.3, 0, 180]],\n  [[\"l\", 0.56, 0, 0.56, 1], [\"l\", 0.56, 0, 0.26, 0.16]],\n  [[\"a\", 0.5, 0.27, 0.5, 0.27, 195, 400], [\"l\", 0.883, 0.444, 0, 1], [\"l\", 0, 1, 1, 1]],\n  [[\"l\", 0.04, 0, 0.96, 0], [\"l\", 0.96, 0, 0.4, 0.39], [\"a\", 0.5, 0.68, 0.5, 0.3, 255, 510]],\n  [[\"l\", 0.76, 1, 0.76, 0], [\"l\", 0.76, 0, 0, 0.68], [\"l\", 0, 0.68, 1, 0.68]],\n  [[\"l\", 1, 0, 0, 0], [\"l\", 0, 0, 0.883, 0.556], [\"a\", 0.5, 0.73, 0.5, 0.27, -40, 165]],\n  [[\"a\", 0.5, 0.7, 0.5, 0.3, 0, 360], [\"a\", 0.95, 0.7, 0.95, 0.68, 180, 252]],\n  [[\"l\", 0, 0, 1, 0], [\"l\", 1, 0, 0.32, 1]],\n  [[\"a\", 0.5, 0.24, 0.42, 0.24, 0, 360], [\"a\", 0.5, 0.73, 0.5, 0.27, 0, 360]],\n  [[\"a\", 0.5, 0.3, 0.5, 0.3, 0, 360], [\"a\", 0.05, 0.3, 0.95, 0.68, 0, 72]],\n];\n// The cathodes front to back. A numeral further back sits a little smaller,\n// and the wires in front of it cross its glow.\nconst STACK = [1, 6, 2, 7, 5, 0, 4, 9, 8, 3];\nconst DEPTH = [];\nSTACK.forEach((d, i) => (DEPTH[d] = i));\n// Glass width, glass top and height, pins, socket, numeral box, where the\n// numeral sits down the glass, mesh cell, and a scale for wires and glow.\nconst LAY = [\n  { gw: 54, top: 4, gh: 109, pin: 4, sock: 4, dw: 36, dh: 72, dc: 0.5, hex: 2.4, s: 1 },\n  { gw: 26, top: 3, gh: 50, pin: 3, sock: 2, dw: 17, dh: 34, dc: 0.5, hex: 1.6, s: 0.5 },\n  { gw: 24, top: 2, gh: 32, pin: 2, sock: 2, dw: 14, dh: 23, dc: 0.5, hex: 1.4, s: 0.38 },\n];\n// Each gas: dim edge of the glow, the glow, the hot core.\nconst GAS = [\n  [[120, 22, 2], [255, 96, 18], [255, 214, 150]],\n  [[110, 8, 54], [255, 58, 140], [255, 204, 232]],\n  [[40, 26, 150], [92, 120, 255], [204, 236, 255]],\n  [[18, 92, 10], [104, 240, 40], [214, 255, 170]],\n];\n\nfunction strokes(dg, bx, by, w, h) {\n  const out = [];\n  for (const [k, a, b, c, d, e, f] of FONT[dg]) {\n    if (k === \"l\") {\n      out.push(bx + a * w, by + b * h, bx + c * w, by + d * h);\n      continue;\n    }\n    const n = max(4, ceil((abs(f - e) / 180) * (c * w + d * h) * 0.9));\n    for (let i = 0, px = 0, py = 0; i \u003c= n; i++) {\n      const th = ((e + ((f - e) * i) / n) * PI) / 180, x = bx + (a + c * cos(th)) * w, y = by + (b + d * sin(th)) * h;\n      if (i) out.push(px, py, x, y);\n      [px, py] = [x, y];\n    }\n  }\n  return out;\n}\nfunction segDist(x, y, S) {\n  let best = 1e9;\n  for (let i = 0; i \u003c S.length; i += 4) {\n    const ax = S[i], ay = S[i + 1], dx = S[i + 2] - ax, dy = S[i + 3] - ay, l = dx * dx + dy * dy;\n    const u = l ? cl(((x - ax) * dx + (y - ay) * dy) / l, 0, 1) : 0, ex = x - ax - u * dx, ey = y - ay - u * dy, d = ex * ex + ey * ey;\n    if (d \u003c best) best = d;\n  }\n  return sqrt(best);\n}\n// How much a wire of the hexagonal anode mesh (cells of size a) covers a point.\nfunction hexLine(x, y, a) {\n  const q = (x * 0.57735 - y / 3) / a, r = (y * 2) / 3 / a;\n  let rx = round(q), rz = round(r);\n  const ry = round(-q - r), dx = abs(rx - q), dz = abs(rz - r), dy = abs(ry + q + r);\n  if (dx > dy && dx > dz) rx = -ry - rz;\n  else if (dy \u003c= dz) rz = -rx - ry;\n  const ux = abs(x - a * 1.732 * (rx + rz / 2)), uy = abs(y - a * 1.5 * rz);\n  return cl(1 - (a * 0.866 - max(ux, 0.5 * ux + 0.866 * uy)) / 0.6, 0, 1);\n}\n\nfunction build(P, R) {\n  const L = LAY[R - 1], s = L.s, cols = R > 1 ? 2 : 1, cw = W / cols;\n  const A = (P.amb = new Float32Array(N * 3)), RF = (P.refl = new Float32Array(N)), TR = (P.tr = new Float32Array(N).fill(1));\n  const PL = (P.pool = new Float32Array(N)), TI = (P.tid = new Uint8Array(N)), PZ = (P.pz = new Uint8Array(N)), GL = (P.gl = new Uint8Array(N));\n  const D = (P.D = Array.from({ length: 11 }, () => new Uint8Array(N).fill(255)));\n  const OC = (P.OC = Array.from({ length: 10 }, () => new Uint8Array(N)));\n  const put = (x, y, r, g, b, f) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    A.set([r, g, b], p * 3);\n    RF[p] = f;\n  };\n  const line = (x0, y0, x1, y1, c, f) => {\n    for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0), 1); i \u003c= n; i++) put(round(mix(x0, x1, i / n)), round(mix(y0, y1, i / n)), ...c, f);\n  };\n  // Glow and the light it throws, by distance to the lit wire in eighths.\n  const CO = (P.CO = new Float32Array(256)), SP = (P.SP = new Float32Array(256)), WR = new Float32Array(256);\n  for (let q = 0; q \u003c 256; q++) {\n    const d = q / 8;\n    CO[q] = 1.35 * exp(-((d / (0.55 + 0.35 * s)) ** 2)) + 0.5 * exp(-((d / (1.2 + 0.8 * s)) ** 2)) + 0.22 * exp(-d / (2.5 + 2.5 * s));\n    SP[q] = 0.8 * exp(-d / (1.5 + 3 * s)) + 0.3 * exp(-d / (4 + 12 * s));\n    WR[q] = cl(1.3 - d / (0.45 + 0.35 * s), 0, 1);\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const g = 0.7 + 0.6 * hash(p & 63, p >> 6);\n    put(p & 63, p >> 6, 5 * g, 5 * g, 7 * g, 0.12);\n  }\n  const n = (P.n = R * cols), T = (P.T = []);\n  P.newT = n > 1 ? floor(rnd() * n) : -1;\n  P.oldT = n > 1 ? (P.newT + 1 + floor(rnd() * (n - 1))) % n : 0;\n  P.pois = [0, 9, 3, 8][floor(rnd() * 4)];\n  P.lamps = [];\n  for (let r = 0, i = 0; r \u003c R; r++)\n    for (let c = 0; c \u003c cols; c++, i++) {\n      const y0 = round((r * H) / R), y1 = round(((r + 1) * H) / R), x0 = c * cw, cx = x0 + cw / 2;\n      const top = y0 + L.top, bot = top + L.gh, hw = L.gw / 2, dmh = round(L.gw * 0.3), rb = max(2, round(L.gw * 0.12));\n      const dcy = top + L.gh * L.dc, bx = cx - L.dw / 2, by = dcy - L.dh / 2, m = 1 + 3 * s;\n      const c0 = floor(bx - m), c1 = ceil(bx + L.dw + m + 2 * s), r0 = floor(by - m), r1 = ceil(by + L.dh + m);\n      const nw = i === P.newT ? 1.35 : 1;\n      const half = (y) => {\n        const v = y + 0.5;\n        if (v \u003c top || v > bot) return -1;\n        if (v \u003c top + dmh) return hw * sqrt(max(0, 1 - ((top + dmh - v) / dmh) ** 2));\n        if (v > bot - rb) return hw - rb + sqrt(max(0, rb * rb - (v - bot + rb) ** 2));\n        return hw;\n      };\n      // Each numeral's wire, by distance, in this tube's cell.\n      const S = [];\n      for (let j = 0; j \u003c 10; j++) {\n        const sc = 1 - 0.008 * DEPTH[j];\n        S.push(strokes(j, cx - (L.dw * sc) / 2, dcy - (L.dh * sc) / 2, L.dw * sc, L.dh * sc));\n      }\n      S.push([bx + L.dw * 1.17, by + L.dh * 0.98, bx + L.dw * 1.17, by + L.dh * 0.98]);\n      // In the old tube a numeral the clock seldom shows is poisoned: a patch\n      // of its wire has stopped glowing.\n      const pzx = S[P.pois][0] * 0.5 + S[P.pois][2] * 0.5, pzy = S[P.pois][1] * 0.5 + S[P.pois][3] * 0.5;\n      for (let y = y0; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const p = y * W + x, X = x + 0.5, Y = y + 0.5;\n          TI[p] = i;\n          if (hypot(max(0, bx - X, X - bx - L.dw), max(0, by - Y, Y - by - L.dh)) > 33) continue;\n          for (let j = 0; j \u003c 11; j++) D[j][p] = min(255, round(max(0, segDist(X, Y, S[j]) - (j > 9 ? 0.4 + 0.5 * s : 0)) * 8));\n          if (i === P.oldT) PZ[p] = round(255 * exp(-((hypot(X - pzx, Y - pzy) / (1.4 + 2 * s)) ** 2)));\n        }\n      // Glass, getter, mica, rods, the anode mesh and the cathodes behind it.\n      for (let y = y0; y \u003c y1; y++) {\n        const hy = half(y), hu = half(y - 1), hd = half(y + 1);\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const p = y * W + x, ax = abs(x + 0.5 - cx), e = hy - ax, g = hash(x, y + 300), left = x + 0.5 \u003c cx;\n          if (e \u003c= 0) continue;\n          let col = [4 + 2 * g, 5 + 2 * g, 7 + 2 * g], f = 0.09;\n          if (e \u003c 1.2 || hu - ax \u003c= 0 || hd - ax \u003c= 0) [col, f] = [[24 * nw, 28 * nw, 34 * nw], 0.5];\n          else if (y \u003c top + dmh * 0.8) {\n            // The getter's mirror on the dome: bright and clean in a new tube,\n            // dull brown in an old one.\n            const a = cl(1.15 - (y - top) / (dmh * 0.72) + 0.3 * (g - 0.5), 0, 1), v = nw > 1 ? 40 + 56 * a : 24 + 26 * a;\n            col = (nw > 1 ? [v, v, v * 1.06] : [v * 0.95, v * 0.86, v * 0.72]).map((c, ch) => mix(col[ch], c, a));\n            f = mix(0.09, 0.5, a);\n          } else if (x >= c0 && x \u003c= c1 && y >= r0 && y \u003c= r1) {\n            // Inside the anode: the back plate, the unlit wires, the mesh in front.\n            let w = 0;\n            for (let j = 0; j \u003c 10; j++) w = max(w, WR[D[j][p]] * (1 - 0.05 * DEPTH[j]));\n            const mh = x === c0 || x === c1 ? 1 : hexLine(x + 0.5 - cx, y + 0.5 - dcy, L.hex);\n            col = [mix(6, 25, w) + 6 * mh, mix(6, 25, w) + 6 * mh, mix(7, 29, w) + 7 * mh];\n            f = mix(0.15, 0.34, w) + 0.25 * mh;\n            TR[p] = 1 - 0.42 * mh;\n            for (let k = 0, run = 0; k \u003c 10; k++) {\n              OC[STACK[k]][p] = run;\n              run = max(run, round(WR[D[STACK[k]][p]] * 255));\n            }\n          } else if ((y === r0 - 1 || y === r0 - 2 + (s \u003c 0.6) || y === r1 + 1 || y === r1 + 2 - (s \u003c 0.6)) && e > 1.5) [col, f] = [[(34 + 18 * g) * nw, (34 + 18 * g) * nw, (32 + 16 * g) * nw], 0.62];\n          else if ((x === c0 - 2 || x === c1 + 2) && y > r0 - 3 && y \u003c r1 + 4 * s + 2) [col, f] = [[26, 26, 28], 0.55];\n          // The window behind the camera, on the left of the glass.\n          const u = (y - top) / L.gh, hl = left && e >= 1.2 && e \u003c 3.2 ? (e \u003c 2.2 ? 1 : 0.35) * max(cl(1 - abs(u - 0.5) / 0.3, 0, 1) ** 0.4, cl(1 - abs(u - 0.14) / 0.05, 0, 1)) : 0;\n          if (hl > 0) col = col.map((v, ch) => v + hl * (104 + 12 * ch) * nw);\n          GL[p] = 1;\n          if (!left && e >= 2 && e \u003c 3 && y > top + dmh && y \u003c bot - rb * 2) col = col.map((v, ch) => v + (16 + 4 * ch) * nw);\n          put(x, y, ...col, f);\n        }\n      }\n      // A bright curve on the dome, and the exhaust tip.\n      for (let a = 196; a \u003c 252; a += 1.5) {\n        const v = (60 + 80 * sin(((a - 196) * PI) / 56)) * nw;\n        put(round(cx + (hw - 2.5) * cos((a * PI) / 180) - 0.5), round(top + dmh + (dmh - 2) * sin((a * PI) / 180) - 0.5), v, v * 1.05, v * 1.15, 0.3);\n      }\n      for (let y = top - 1 - round(2 * s); y \u003c top; y++) put(floor(cx) - 1, y, 36, 40, 46, 0.2), put(floor(cx), y, 50, 54, 60, 0.2);\n      // Leads from the bottom mica to the glass press, pins to the socket.\n      const sh = round(2 + 4 * s), np = R === 1 ? 13 : 7, ph = hw * 0.55;\n      for (let k = 0; k \u003c np; k++) {\n        const u = k / (np - 1), xa = round(mix(c0 + 2, c1 - 2, u)), xp = round(cx - ph + 2 * ph * u);\n        line(xa, r1 + 3, xp, bot - sh, [30, 30, 33], 0.6);\n        for (let y = bot; y \u003c bot + L.pin; y++) put(xp, y, 62 + 20 * (y === bot), 64 + 20 * (y === bot), 68 + 20 * (y === bot), 0.5);\n        put(xp, bot + L.pin, 120, 92, 40, 0.4);\n      }\n      for (let y = bot - sh; y \u003c bot; y++) {\n        const hwp = mix(hw * 0.32, hw * 0.48, (y - bot + sh) / sh);\n        for (let x = ceil(cx - hwp); x \u003c cx + hwp; x++) if (half(y) - abs(x + 0.5 - cx) > 1.2) put(x, y, 20 + 14 * (y === bot - sh), 22 + 14 * (y === bot - sh), 25 + 15 * (y === bot - sh), 0.35);\n      }\n      const sy = bot + L.pin, by0 = sy + L.sock;\n      for (let y = sy; y \u003c by0; y++) for (let x = ceil(cx - hw * 0.75); x \u003c cx + hw * 0.75; x++) if (y > sy || !RF[y * W + x] || A[(y * W + x) * 3] \u003c 100) put(x, y, y === sy ? 30 : 13, y === sy ? 30 : 13, y === sy ? 34 : 15, 0.25);\n      for (let k = 0; k \u003c np; k++) put(round(cx - ph + (2 * ph * k) / (np - 1)), sy, 120, 92, 40, 0.4);\n      // The board: green mask, copper under it, gold pads.\n      for (let y = by0; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const g = hash(x + 50, y), edge = y === by0;\n          put(x, y, edge ? 38 : 10 + 4 * g, edge ? 46 : 26 + 6 * g, edge ? 42 : 16 + 4 * g, 0.6);\n        }\n      for (let k = 0; k \u003c np; k += 2) {\n        const xp = round(cx - ph + (2 * ph * k) / (np - 1)), yv = by0 + 2 + (k & 2 ? 1 : 0);\n        line(xp, by0 + 1, xp, y1, [20, 54, 32], 0.6);\n        put(xp, yv, 120, 96, 44, 0.5);\n      }\n      for (let y = top - 4; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const v = exp(-(((x + 0.5 - cx) / (hw * 0.8)) ** 2)) * exp(-max(0, y - bot + 6) / (6 + 10 * s));\n          if (y >= bot - 8) PL[y * W + x] = 0.45 * v;\n        }\n      T.push({ cx, bot, by0, y1, hw });\n      if (R === 1) P.lamps.push([60, 107, 4, 10]);\n      else if (c === 1) P.lamps.push([30, bot - round(9 * s), 4, round(11 * s)]);\n    }\n  if (R === 1) {\n    // An anode resistor and the high-voltage capacitor lie on the big board.\n    for (let x = 1; x \u003c 14; x++) put(x, 124, 70, 72, 76, 0.4);\n    for (let x = 3; x \u003c 12; x++) for (let y = 123; y \u003c 126; y++) put(x, y, ...[[110, 96, 70], [90, 50, 22], [20, 18, 16], [150, 36, 24]][x === 5 ? 1 : x === 7 ? 2 : x === 9 ? 3 : 0].map((v) => v * (y === 123 ? 1.2 : y === 125 ? 0.7 : 1)), 0.4);\n    for (let x = 50; x \u003c 62; x++) for (let y = 122; y \u003c 127; y++) put(x, y, ...(x > 59 ? [78, 80, 86] : x === 52 ? [90, 110, 150] : [26, 44, 110]).map((v) => v * (y === 122 ? 1.3 : y === 126 ? 0.6 : 1)), 0.4);\n  }\n  // The neon indicator lamps: a glass capsule with two electrodes.\n  for (const [lx, ly, lw, lh] of P.lamps) {\n    for (let y = ly; y \u003c ly + lh; y++)\n      for (let x = lx; x \u003c lx + lw; x++) {\n        const rim = x === lx || x === lx + lw - 1 || y === ly;\n        put(x, y, rim ? 30 : 8, rim ? 34 : 9, rim ? 40 : 11, 0.3);\n      }\n    for (let y = ly + 2; y \u003c ly + lh + 3; y++) put(lx + 1, y, 44, 44, 46, 0.4), put(lx + lw - 2, y, 44, 44, 46, 0.4);\n  }\n  P.amb0 = A.slice();\n  for (const k of [\"tg\", \"dsp\", \"pk\", \"fa\", \"fl\", \"dp\", \"s0\", \"s1\", \"b\", \"sp\"]) P[k] = new Array(n).fill(k === \"dsp\" || k === \"pk\" ? -1 : 0);\n}\n\n// The gas: a glow colour for every brightness, and the light it throws.\nfunction ramp(P, gas) {\n  const f = gas * 3, i = min(2, floor(f)), t = f - i;\n  const [h, b, c] = GAS[i].map((col, k) => col.map((v, ch) => mix(v, GAS[i + 1][k][ch], t)));\n  const RA = (P.RA = new Float32Array(768)), st = [0, 0.12, 0.35, 0.8, 1.5, 2.55];\n  const cs = [[0, 0, 0], h.map((v) => v * 0.35), h, b, b.map((v, ch) => mix(v, c[ch], 0.6)), c];\n  for (let j = 0, k = 0; j \u003c 256; j++) {\n    const e = j / 100;\n    while (k \u003c 4 && e > st[k + 1]) k++;\n    const u = (e - st[k]) / (st[k + 1] - st[k]);\n    for (let ch = 0; ch \u003c 3; ch++) RA[j * 3 + ch] = mix(cs[k][ch], cs[k + 1][ch], cl(u, 0, 1));\n  }\n  const lum = (b[0] + b[1] + b[2]) / 3;\n  P.spill = b.map((v) => mix(v, lum, 0.35));\n  // A green-filtered tube is green glass.\n  const gf = cl(gas * 3 - 2, 0, 1), tint = [1 - 0.3 * gf, 1 + 0.5 * gf, 1 - 0.2 * gf];\n  if (P.amb0) for (let p = 0; p \u003c N * 3; p++) P.amb[p] = P.amb0[p] * (P.gl[(p / 3) | 0] ? tint[p % 3] : 1);\n}\n\n// A spin: the tube runs up through the numerals, slowing from 16 to 3 a\n// second, and stops on its target.\nfunction roll(P, i, wait, len) {\n  P.s0[i] = P.t + wait;\n  P.s1[i] = P.t + wait + len;\n}\nfunction spinDigit(P, i) {\n  const T = P.s1[i] - P.s0[i], u = (P.t - P.s0[i]) / T, ph = T * (16 * u - 6.5 * u * u), all = T * 9.5;\n  return (((P.tg[i] + floor(ph) - floor(all)) % 10) + 10) % 10;\n}\nfunction digits(P, v) {\n  for (let i = P.n - 1; i >= 0; i--, v = floor(v / 10)) P.tg[i] = v % 10;\n}\n\nfunction start(P) {\n  Object.assign(P, { next: P.t, gate: P.t, retune: P.t + 4, base: 140000 + rnd() * 800000, key: -1, v: 0, step: P.t, cyc: -9, blank: 0 });\n  P.c0 = P.n === 6 ? 23 * 3600 + 59 * 60 + 53 : P.n === 4 ? 23 * 3600 + 57 * 60 : 9 * 3600 + 58 * 60;\n  P.s1.fill(0);\n}\n\nconst MODES = [\n  // Scramble: the tubes spin, stop one after another, and the number holds.\n  (P) => {\n    if (P.t \u003c P.next) return;\n    const n = P.n;\n    for (let i = 0; i \u003c n; i++) {\n      P.tg[i] = floor(rnd() * 10);\n      roll(P, i, 0.07 * i, n > 1 ? 0.8 + 0.3 * i : 1.5);\n    }\n    P.next = P.t + (n > 1 ? 0.9 + 0.37 * n : 1.5) + 2.6;\n    P.lamp = 0;\n  },\n  // A frequency counter reading an oscillator that drifts as it warms up.\n  (P) => {\n    if (P.t \u003c P.gate) return;\n    P.gate += P.n > 1 ? 0.12 : 0.4;\n    if (P.t > P.retune) [P.base, P.retune, P.blank] = [10000 + rnd() * 980000, P.t + 5 + rnd() * 3, 0.25];\n    digits(P, floor(P.base + 37 * P.t + 4 * sin(P.t * 2.1) + rnd() * 3));\n    P.dp.fill(0);\n    if (P.n > 3) P.dp[P.n - 4] = 1;\n    P.lamp = 1;\n  },\n  // A clock: a big tube spells the time a numeral at a time.\n  (P) => {\n    const n = P.n, C = P.c0 + P.t * (n === 6 ? 2 : n === 4 ? 60 : 10), s = floor(C) % 86400;\n    const hh = floor(s / 3600), mm = floor(s / 60) % 60, ss = s % 60, all = [floor(hh / 10), hh % 10, floor(mm / 10), mm % 10, floor(ss / 10), ss % 10];\n    if (n === 1) {\n      const ph = P.t % 3.6, j = floor(ph / 0.7);\n      P.tg[0] = j \u003c 4 && ph % 0.7 \u003c 0.56 ? all[j] : -1;\n      P.dp[0] = j === 1 ? 1 : 0;\n      P.lamp = j \u003c 4 ? 1 : 0;\n      return;\n    }\n    // A new minute (or hour) runs the slot machine, which also keeps the\n    // cathodes from poisoning.\n    const key = n === 6 ? floor(s / 60) : hh;\n    if (P.key >= 0 && key !== P.key) for (let i = 0; i \u003c n; i++) roll(P, i, 0.05 * i, 0.7 + 0.12 * i);\n    P.key = key;\n    for (let i = 0; i \u003c n; i++) P.tg[i] = all[i];\n    P.lamp = (n === 6 ? C : P.t) % 1 \u003c 0.5 ? 1 : 0;\n  },\n  // A countdown; at zero every cathode runs in turn, then it starts again.\n  (P) => {\n    if (P.t \u003c P.step) return;\n    if (P.v > 0) {\n      digits(P, --P.v);\n      P.step += 0.4;\n      P.lamp = 1;\n    } else if (P.cyc \u003c P.step - 3) {\n      P.cyc = P.t + 0.6;\n      P.step = P.t + 2.6;\n    } else {\n      P.v = P.n === 1 ? 10 : 17;\n      P.step = P.t;\n    }\n  },\n];\n\nexport function setup(params) {\n  Object.assign(params, { t: 0, rt: 0, R: 0, gas: -1, mode: -1, lamp: 0, lv: 0, buf: new Float32Array(N * 3) });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt, 0, 0.1);\n  const rate = cl(k[1], 0.2, 3) / 2, R = cl(round(k[2]), 1, 3), mode = cl(round(k[3]), 0, 3), gas = cl(k[0], 0, 1);\n  if (R !== P.R) [P.R, P.mode, P.gas] = [R, -1, -1, build(P, R)];\n  if (abs(gas - P.gas) > 0.002) ramp(P, (P.gas = gas));\n  if (mode !== P.mode) start(P, (P.mode = mode));\n  P.t += dt * rate;\n  P.rt += dt;\n  if (input.btnPressed && input.btnPressed[0]) P.cyc = P.t;\n  P.lamp *= P.mode & 1 ? 0.6 : 1;\n  MODES[mode](P);\n  P.blank = max(0, P.blank - dt);\n  const cyc = P.t >= P.cyc && P.t \u003c P.cyc + 1.9;\n  for (let i = 0; i \u003c P.n; i++) {\n    let d = P.blank > 0 ? -1 : P.tg[i];\n    if (cyc) d = STACK[9 - ((floor((P.t - P.cyc) * 12) + i) % 10)];\n    else if (P.s1[i] && P.t >= P.s0[i] && P.t \u003c P.s1[i]) d = spinDigit(P, i);\n    else if (P.s1[i] && P.t >= P.s1[i]) [P.s1[i], P.fl[i]] = [0, 1];\n    if (d !== P.dsp[i]) [P.pk[i], P.fa[i], P.dsp[i]] = [P.dsp[i], 1, d];\n    P.fa[i] = max(0, P.fa[i] - dt * 14);\n    P.fl[i] = max(0, P.fl[i] - dt * 2.8);\n    // Neon flickers a little, and now and then an old tube sputters.\n    if ((P.sp[i] -= dt) \u003c= 0 && rnd() \u003c dt * 0.15) P.sp[i] = 0.12 + rnd() * 0.15;\n    const z = P.rt * 1.0 + i * 7.1;\n    P.b[i] = (i === P.newT ? 1.25 : 0.92) * (1 + 0.3 * P.fl[i]) * (0.97 + 0.02 * sin(z * 53) + 0.02 * sin(z * 7.3)) * (P.sp[i] > 0 ? 0.6 + 0.4 * (rnd() \u003c 0.5) : 1);\n  }\n  if (P.mode === 0 && P.s1.every((v) => !v)) P.lamp = 1;\n  P.lv += (P.lamp - P.lv) * min(1, dt * 30);\n}\n\nexport function draw(display, params) {\n  const P = params, { amb, refl, tr, pool, tid, D, OC, CO, SP, RA, buf, pz, spill, oldT, pois } = P;\n  const [sr, sg, sb] = spill, B = P.b, K = P.dsp, PK = P.pk, FA = P.fa, DP = P.dp;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const i = tid[p], b = B[i], k = K[i], pk = PK[i], fa = FA[i];\n    let Lt = 0, e = 0;\n    if (k >= 0) {\n      const q = D[k][p];\n      Lt = (SP[q] + pool[p]) * b;\n      e = CO[q] * b * (1 - OC[k][p] * 0.0022) * (i === oldT && k === pois ? 1 - pz[p] * 0.0035 : 1);\n    }\n    if (fa > 0 && pk >= 0) {\n      const q = D[pk][p];\n      Lt += (SP[q] + pool[p]) * b * fa;\n      e += CO[q] * b * fa;\n    }\n    if (DP[i] && k >= 0) {\n      const q = D[10][p];\n      Lt += SP[q] * b * 0.4;\n      e += CO[q] * b;\n    }\n    const j = min(255, (e * tr[p] * 100) | 0) * 3, f = refl[p] * Lt;\n    buf[o] = amb[o] + f * sr + RA[j];\n    buf[o + 1] = amb[o + 1] + f * sg + RA[j + 1];\n    buf[o + 2] = amb[o + 2] + f * sb + RA[j + 2];\n  }\n  // The indicator lamps glow on their left electrode.\n  const lv = P.lv;\n  if (lv > 0.02)\n    for (const [lx, ly, , lh] of P.lamps)\n      for (let y = ly + 1; y \u003c ly + lh + 2; y++)\n        for (let x = lx - 1; x \u003c= lx + 2; x++) {\n          if (x \u003c 0 || x >= W || y >= H) continue;\n          const o = (y * W + x) * 3, c = x === lx + 1 && y > ly + 1 && y \u003c ly + lh ? 1 : 0.3 * (y \u003c ly + lh);\n          buf[o] += 255 * c * lv;\n          buf[o + 1] += 120 * c * lv;\n          buf[o + 2] += 34 * c * lv;\n        }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n    display.setPixel(p & 63, p >> 6, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Gas=0..1, Speed=0.2..3, Rows=1..3, Mode=0..3","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Gas","min":0,"max":1,"about":"What glows: neon orange at 0, a pink neon-argon mix at a third, the blue-violet of argon and mercury at two thirds, and at 1 a tube behind green-filtered glass."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the display runs: at 2 a spinning tube runs through 16 numerals a second before it slows and stops."},{"name":"Rows","min":1,"max":3,"about":"One big tube at 1, two rows of two at 2, three rows of two at 3, each row on its own board. With more than one, one tube is a newer replacement, brighter, with a clean silver getter."},{"name":"Mode","min":0,"max":3,"about":"Scramble at 0 (every tube spins and stops on a random number, one after another), a frequency counter at 1, a clock at 2 (one big tube spells the time a numeral at a time), a countdown that ends in the anti-poisoning run through every cathode at 3."}],"start":[0,2,1,0.06],"measures":{"motion":0.4696,"detail":0.0533,"edges":0.238,"complexity":1.7971,"coverage":0.5829,"colour":0.1892,"drift":0.1676},"knobResponse":[0.0576,0.0717,0.1676,0.0732]},{"slug":"one-bit","title":"One Bit","family":"pixel","round":17,"note":"달밤 바닷가 벼랑에 선 등대를 두 색과 Bayer 순서 디더링만으로 그린 1비트 화면이에요. 빛줄기가 돌고 구름이 달 앞을 지나고 안개 둑이 바다 위에서 오르내려도 한 프레임에 뒤집히는 픽셀은 열 개 안팎이에요. K1 이 앰버 단말기, 게임보이, 매킨토시, 전자잉크, 플레이데이트의 두 색을 골라요.","idea":"A lighthouse on a cliff over a moonlit sea, drawn on a one-bit screen in two tones with Bayer ordered dithering, where the beam turns, clouds cross the moon and a fog bank breathes on the water so slowly that only a few pixels flip each frame.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   One Bit\n// Family:  pixel\n// Idea:    A lighthouse on a cliff over a moonlit sea, drawn on a one-bit screen in two tones with Bayer ordered dithering, where the beam turns, clouds cross the moon and a fog bank breathes on the water so slowly that only a few pixels flip each frame.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bayer's ordered dither (1973), after the one-bit screens of the early Macintosh and the Playdate\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Time=0.2..3, Fog=0..1, Wind=0..1\n//\n// Knob 1: Palette. The screen's two tones: an amber terminal, a Game Boy's greens, a Macintosh's black and white, e-ink on warm paper, and a Playdate's grey on silver.\n// Knob 2: Time. How fast the night goes by: at 2 the beam turns once in 12 seconds and a cloud takes 40 to 60 seconds to cross; at 0.2 the picture all but stands still.\n// Knob 3: Fog. How much fog lies on the sea: at 0 a low bank breathes along the horizon; turned up, it rolls in and climbs the cliff until only the gallery and the lantern stand clear.\n// Knob 4: Wind. At 0 a still night, four small clouds in a sky full of stars and a calm sea; turned up, nine clouds twice as long race over and hide the moon, whitecaps break between the wavelets and the surf climbs the cliff.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The horizon, and the moon's centre and radius.\nconst HZ = 82;\nconst MX = 16;\nconst MY = 28;\nconst MR = 7;\n// The moon's seas: offset from its centre and squared radius.\nconst MARIA = [-2, -2, 4, 2, -3, 3, 1.5, 1.5, 4, -4.5, 1.5, 3];\n// The lighthouse: tower axis, the rows of its foot and its top, its lamp.\nconst TX = 52;\nconst T_BASE = 68;\nconst T_TOP = 32;\nconst LAMP_Y = 25;\n// One turn of the light at Time 1, in seconds, and where the turn starts:\n// at the opening Time it swings past us and out over the sea in the first\n// seconds.\nconst TURN = 24;\nconst BEAM0 = 3.06;\n// The fog bank breathes, rising and settling again, over this many seconds of Time 1.\nconst BREATH = 48;\nconst MAX_CLOUDS = 9;\n// The screen's two tones, light then dark.\nconst PALETTES = [\n  [\n    [255, 176, 32],\n    [18, 8, 0],\n  ],\n  [\n    [155, 188, 15],\n    [15, 56, 15],\n  ],\n  [\n    [255, 255, 255],\n    [0, 0, 0],\n  ],\n  [\n    [222, 214, 192],\n    [38, 38, 44],\n  ],\n  [\n    [178, 175, 166],\n    [50, 47, 40],\n  ],\n];\n// The only greys the screen draws, as shares of lit pixels: ordered dither\n// at these levels makes clean repeating patterns, as a one-bit artist would\n// pick them from a palette of fills.\nconst G1 = 1 / 16;\nconst G2 = 1 / 8;\nconst G3 = 1 / 4;\nconst G4 = 1 / 2;\n\nconst SKY = 0;\nconst SEA = 1;\nconst CLIFF = 2;\nconst TOWER = 3;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// The 8 x 8 Bayer matrix, as thresholds between 0 and 1, grown from the\n// 2 x 2 one: each step puts four copies side by side, scaled by 4 and offset\n// by 0, 2, 3 and 1.\nfunction bayer() {\n  let m = [0];\n  let n = 1;\n  while (n \u003c 8) {\n    const next = new Array(4 * n * n);\n    for (let y = 0; y \u003c n; y++)\n      for (let x = 0; x \u003c n; x++) {\n        const v = 4 * m[y * n + x];\n        next[y * 2 * n + x] = v;\n        next[y * 2 * n + x + n] = v + 2;\n        next[(y + n) * 2 * n + x] = v + 3;\n        next[(y + n) * 2 * n + x + n] = v + 1;\n      }\n    m = next;\n    n *= 2;\n  }\n  return Float32Array.from(m, (v) => (v + 0.5) / 64);\n}\n\nfunction cliffEdge(y) {\n  // The cliff's seaward face, from the lighthouse's ledge down to the water.\n  const u = (y - T_BASE) / (H - T_BASE);\n  return 42 - 10 * u * u + 1.8 * Math.sin(y * 0.55) + 1.1 * Math.sin(y * 1.7 + 1);\n}\n\nfunction towerHalf(y) {\n  return 4 + (1.5 * (y - T_TOP)) / (T_BASE - T_TOP);\n}\n\n// The still picture, as a grey for each pixel before dithering, and which\n// part of the scene each pixel belongs to.\nfunction drawScene(P) {\n  const { base, region } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let v = 0;\n      let part = SEA;\n      if (y \u003c HZ) {\n        part = SKY;\n        // Black overhead, the sky paling in three bands down to the horizon.\n        v = y >= HZ - 9 ? G3 : y >= HZ - 20 ? G2 : y >= HZ - 36 ? G1 : 0;\n        const dm = Math.sqrt((x - MX) ** 2 + (y - MY) ** 2);\n        if (dm \u003c MR) {\n          // The moon, its seas in half tone: Imbrium and Serenitatis up on\n          // the left and right, Tranquillitatis below, Procellarum down the edge.\n          let mare = false;\n          for (let m = 0; m \u003c MARIA.length; m += 3) if ((x - MX - MARIA[m]) ** 2 + (y - MY - MARIA[m + 1]) ** 2 \u003c MARIA[m + 2]) mare = true;\n          v = mare ? G4 : 1;\n        } else {\n          // A ring of haze round the moon, fading out in four fills.\n          const ring = dm - MR;\n          const halo = ring \u003c 2 ? G4 : ring \u003c 6 ? G3 : ring \u003c 12 ? G2 : ring \u003c 20 ? G1 : 0;\n          if (halo > v) v = halo;\n        }\n      } else if (y \u003c HZ + 5) v = G2;\n      const edge = cliffEdge(y);\n      if (y >= T_BASE && x >= edge) {\n        part = CLIFF;\n        // Black rock, its seaward rim and a few ledges catching the moon, and\n        // turf along the top.\n        // The face is shaded from the rim back into the dark in three fills.\n        const ledge = (y === 86 && x \u003c 50) || (y === 99 && x \u003c 46) || (y === 112 && x \u003c 43);\n        const back = x - edge;\n        v = back \u003c 1 || ledge || y === T_BASE ? 1 : y === T_BASE + 1 ? G4 : back \u003c 7 ? G3 : back \u003c 13 ? G2 : back \u003c 20 ? G1 : 0;\n      }\n      // The tower, lit from the moon on the left and in shadow on the right.\n      const hw = towerHalf(y);\n      if (y >= T_TOP && y \u003c T_BASE && Math.abs(x - TX) \u003c= hw) {\n        part = TOWER;\n        const u = (x - (TX - hw)) / (2 * hw);\n        v = u \u003c 0.45 ? 1 : u \u003c 0.65 ? G4 : u \u003c 0.82 ? G3 : 0;\n        // Two black bands.\n        if ((y >= 39 && y \u003c 44) || (y >= 53 && y \u003c 58)) v = u \u003c 0.3 ? G4 : 0;\n        // A door and two small windows.\n        if ((y >= T_BASE - 6 && Math.abs(x - TX + 1) \u003c= 1) || ((y === 48 || y === 49 || y === 35 || y === 36) && x === TX - 1)) v = 0;\n      }\n      // Gallery and rail, lantern room, roof and the ball on top.\n      if (y >= T_TOP - 3 && y \u003c T_TOP && Math.abs(x - TX) \u003c= 6) {\n        part = TOWER;\n        v = y === T_TOP - 1 || (x & 1) === 0 || Math.abs(x - TX) === 6 ? 1 : 0;\n      }\n      if (y >= LAMP_Y - 4 && y \u003c T_TOP - 3 && Math.abs(x - TX) \u003c= 3) {\n        part = TOWER;\n        v = Math.abs(x - TX) === 3 ? 0 : 1;\n      }\n      if (y >= LAMP_Y - 8 && y \u003c LAMP_Y - 4 && Math.abs(x - TX) \u003c= 4 - (y - LAMP_Y + 8)) {\n        part = TOWER;\n        v = x \u003c= TX ? 1 : G3;\n      }\n      if (y === LAMP_Y - 9 && x === TX) {\n        part = TOWER;\n        v = 1;\n      }\n      base[p] = v;\n      region[p] = part;\n    }\n  // Stars in the dark sky, a few of them twinkling.\n  P.stars = [];\n  for (let i = 0; i \u003c 70; i++) {\n    const x = Math.floor(hash(i, 21) * W);\n    const y = Math.floor(hash(i, 22) * 52);\n    const p = y * W + x;\n    if (region[p] !== SKY || base[p] > 0) continue;\n    P.stars.push(p, hash(i, 23) \u003c 0.4 ? 1 : 0);\n  }\n  // Clouds: each a row of three to five puffs, long and low like the clouds\n  // over a sea at night, on its own height and pace.\n  P.clouds = [];\n  for (let i = 0; i \u003c MAX_CLOUDS; i++) {\n    const puffs = [];\n    const n = 3 + Math.floor(hash(i, 31) * 3);\n    let dx = 0;\n    for (let j = 0; j \u003c n; j++) {\n      const rx = 4 + 5 * hash(i * 7 + j, 32);\n      puffs.push(dx, -2.2 * hash(i * 7 + j, 33) * (j > 0 && j \u003c n - 1 ? 1 : 0.3), rx, 1.6 + 1.6 * hash(i * 7 + j, 34));\n      dx += rx * 1.1;\n    }\n    P.clouds.push({ x: hash(i, 35) * (W + 40), y: 8 + ((i * 23) % 9) * 6 + 3 * hash(i, 36), len: dx, pace: 0.7 + 0.4 * hash(i, 37), puffs });\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.base = new Float32Array(N);\n  P.region = new Uint8Array(N);\n  P.level = new Float32Array(N);\n  P.cloud = new Uint8Array(N);\n  P.bayer = bayer();\n  drawScene(P);\n  Object.assign(P, { t: 0, sail: 0, started: false, palette: 0, fogK: 0, wind: 0.06 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.palette = clamp(Math.floor(k[0] * PALETTES.length), 0, PALETTES.length - 1);\n  const time = clamp(k[1], 0.05, 4);\n  P.fogK = clamp(k[2], 0, 1);\n  P.wind = clamp(k[3], 0, 1);\n  // The clouds sail faster in a wind.\n  const gust = 1 + 1.5 * P.wind;\n  if (!P.started) {\n    // The night is a few seconds on when the screen comes up, as far as Time takes it.\n    P.started = true;\n    P.t = 6 * time;\n    P.sail = 6 * time * gust;\n  }\n  P.t += dt * time;\n  P.sail += dt * time * gust;\n}\n\n// Mark where the clouds are this frame: 1 inside, 2 on a top edge.\nfunction placeClouds(P) {\n  const { cloud } = P;\n  cloud.fill(0);\n  // More clouds, and bigger, as the wind rises, until the deck closes.\n  const count = 4 + Math.round(5 * P.wind);\n  const grow = 1 + 1.2 * P.wind;\n  for (let i = 0; i \u003c count; i++) {\n    const c = P.clouds[i];\n    const span = W + c.len * grow + 16;\n    const x0 = ((((c.x + P.sail * c.pace) % span) + span) % span) - c.len * grow - 8;\n    const pf = c.puffs;\n    for (let j = 0; j \u003c pf.length; j += 4) {\n      const cx = x0 + pf[j] * grow;\n      const cy = c.y + pf[j + 1];\n      const rx = pf[j + 2] * grow;\n      const ry = pf[j + 3] * (1 + 0.8 * P.wind);\n      const ya = Math.max(0, Math.floor(cy - ry));\n      const yb = Math.min(HZ - 1, Math.ceil(cy + ry));\n      for (let y = ya; y \u003c= yb; y++) {\n        const u = (y - cy) / ry;\n        const w = rx * Math.sqrt(Math.max(0, 1 - u * u));\n        const xa = Math.max(0, Math.ceil(cx - w));\n        const xb = Math.min(W - 1, Math.floor(cx + w));\n        for (let x = xa; x \u003c= xb; x++) cloud[y * W + x] = 1;\n      }\n    }\n  }\n  for (let p = W; p \u003c HZ * W; p++) if (cloud[p] && !cloud[p - W]) cloud[p] = 2;\n}\n\n// The grey of every pixel this frame: the still scene, the clouds, the\n// turning beam, the water's glitter and the fog.\nfunction compose(P) {\n  const { base, region, level, cloud } = P;\n  const t = P.t;\n  placeClouds(P);\n  // The fog bank: its lumpy top slides left at half a pixel a second of Time\n  // 1, and the bank rises and settles as it breathes.\n  const breath = Math.sin((t / BREATH) * Math.PI * 2);\n  const fogTop = HZ - 3 - 42 * P.fogK - 4 * breath;\n  const fogLow = HZ + 12 + 30 * P.fogK + 3 * breath;\n  const fx = t * 0.5;\n  // The beam: the light turns once in TURN seconds of Time 1; on screen it\n  // is a fan whose length is the turning light's sideways reach.\n  const a = (t / TURN) * Math.PI * 2 + BEAM0;\n  const side = Math.cos(a);\n  const toward = Math.sin(a);\n  const reach = Math.abs(side) * 70;\n  const dir = side > 0 ? 1 : -1;\n  // The lantern flares as the light swings past us.\n  const flare = toward > 0 ? Math.pow(toward, 16) : 0;\n  for (let x = 0; x \u003c W; x++) {\n    const xs = x + fx;\n    const top = fogTop - 2.5 * (Math.sin(xs * 0.21 + 0.7) + 0.6 * Math.sin(xs * 0.47 + 2.1));\n    const along = (x - TX) * dir;\n    const lit = along > 3 && along \u003c reach;\n    const spread = 1.5 + along * 0.13;\n    const mid = LAMP_Y + along * 0.05;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      const part = region[p];\n      let v = base[p];\n      if (part === SKY) {\n        const c = cloud[p];\n        if (c) {\n          // A cloud near the moon is lit through; its top edge catches the light.\n          const dm = (x - MX) ** 2 + (y - MY) ** 2;\n          v = c === 2 ? (dm \u003c 500 ? 1 : G4) : dm \u003c 120 ? G4 : G3;\n        }\n        // The beam crosses the sky in front of the clouds.\n        if (lit) {\n          const off = Math.abs(y - mid) / spread;\n          if (off \u003c 1) {\n            const fall = along / reach;\n            const g = fall \u003c 0.35 ? G4 : fall \u003c 0.7 ? G3 : G2;\n            const b = off \u003c 0.35 ? (g === G4 ? 0.75 : g * 2) : g;\n            if (b > v) v = b;\n          }\n        }\n      } else if (part === SEA) {\n        // The water in level wavelets on every other row, thicker toward us,\n        // each row sliding slowly the other way from the next. Under the\n        // moon they crowd into a path of light.\n        const depth = (y - HZ) / (H - HZ);\n        const half = 2 + 14 * depth;\n        const g = Math.max(0, 1 - Math.abs(x - MX) / half);\n        const row = y - HZ;\n        const seg = Math.floor((x + 40 + t * (0.5 + 0.6 * hash(y, 5)) * ((row >> 1) & 1 ? 1 : -1)) / (3 + 4 * depth));\n        // In the path of light each wavelet also winks on and off as it catches the moon.\n        const wink = g > 0 ? 0.35 * g * (hash(seg * 3 + y, Math.floor(t * 0.6 + hash(seg, y + 7) * 9)) - 0.5) : 0;\n        const dash = hash(seg, y) - wink;\n        // A wind raises whitecaps between the rows.\n        const chop = P.wind;\n        if (row & 1 ? dash \u003c 0.1 + 0.32 * depth + 0.6 * g * g + 0.3 * chop : (g > 0.4 && dash \u003c 0.5 * g * g) || dash > 1 - 0.3 * chop * depth) v = 1;\n        // Surf at the foot of the cliff, climbing higher in a wind.\n        const foam = cliffEdge(y) - x;\n        if (y > 106 - 22 * chop && foam \u003c 2.5 + 5 * chop && Math.sin(y * 1.3 + t * 0.7) > 0.3 - foam * 0.3) v = 1;\n      }\n      // The lantern flares when the light faces us.\n      if (flare > 0.02) {\n        const d2 = (x - TX) ** 2 + (y - LAMP_Y) ** 2;\n        const f = flare * Math.exp(-d2 / 50);\n        if (f > G2 && f > v) v = f > 0.6 ? 1 : f > 0.3 ? G4 : G3;\n      }\n      // Fog in front of everything from its top down to its foot: half grey\n      // where the moon lights its upper layer, a quarter below, thinning out.\n      if (y >= top && y \u003c fogLow + 6) {\n        const f = y \u003c top + 9 ? G4 : y \u003c fogLow ? G3 : G2;\n        v = v > G4 ? G4 : f > v ? f : v;\n      }\n      level[p] = v;\n    }\n  }\n  // Stars, and the twinkling ones going out for a moment now and then.\n  const stars = P.stars;\n  for (let i = 0; i \u003c stars.length; i += 2) {\n    const p = stars[i];\n    if (level[p] > 0) continue;\n    if (!stars[i + 1] || hash(p, Math.floor(t * 1.3)) > 0.15) level[p] = 1;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.base) return;\n  compose(P);\n  const { level, bayer } = P;\n  const [light, dark] = PALETTES[P.palette];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const on = level[y * W + x] > bayer[((y & 7) \u003c\u003c 3) | (x & 7)];\n      const c = on ? light : dark;\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    }\n}\n","layer":{"id":"layer-one-bit","type":"code","name":"one-bit","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   One Bit\n// Family:  pixel\n// Idea:    A lighthouse on a cliff over a moonlit sea, drawn on a one-bit screen in two tones with Bayer ordered dithering, where the beam turns, clouds cross the moon and a fog bank breathes on the water so slowly that only a few pixels flip each frame.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bayer's ordered dither (1973), after the one-bit screens of the early Macintosh and the Playdate\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Time=0.2..3, Fog=0..1, Wind=0..1\n//\n// Knob 1: Palette. The screen's two tones: an amber terminal, a Game Boy's greens, a Macintosh's black and white, e-ink on warm paper, and a Playdate's grey on silver.\n// Knob 2: Time. How fast the night goes by: at 2 the beam turns once in 12 seconds and a cloud takes 40 to 60 seconds to cross; at 0.2 the picture all but stands still.\n// Knob 3: Fog. How much fog lies on the sea: at 0 a low bank breathes along the horizon; turned up, it rolls in and climbs the cliff until only the gallery and the lantern stand clear.\n// Knob 4: Wind. At 0 a still night, four small clouds in a sky full of stars and a calm sea; turned up, nine clouds twice as long race over and hide the moon, whitecaps break between the wavelets and the surf climbs the cliff.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The horizon, and the moon's centre and radius.\nconst HZ = 82;\nconst MX = 16;\nconst MY = 28;\nconst MR = 7;\n// The moon's seas: offset from its centre and squared radius.\nconst MARIA = [-2, -2, 4, 2, -3, 3, 1.5, 1.5, 4, -4.5, 1.5, 3];\n// The lighthouse: tower axis, the rows of its foot and its top, its lamp.\nconst TX = 52;\nconst T_BASE = 68;\nconst T_TOP = 32;\nconst LAMP_Y = 25;\n// One turn of the light at Time 1, in seconds, and where the turn starts:\n// at the opening Time it swings past us and out over the sea in the first\n// seconds.\nconst TURN = 24;\nconst BEAM0 = 3.06;\n// The fog bank breathes, rising and settling again, over this many seconds of Time 1.\nconst BREATH = 48;\nconst MAX_CLOUDS = 9;\n// The screen's two tones, light then dark.\nconst PALETTES = [\n  [\n    [255, 176, 32],\n    [18, 8, 0],\n  ],\n  [\n    [155, 188, 15],\n    [15, 56, 15],\n  ],\n  [\n    [255, 255, 255],\n    [0, 0, 0],\n  ],\n  [\n    [222, 214, 192],\n    [38, 38, 44],\n  ],\n  [\n    [178, 175, 166],\n    [50, 47, 40],\n  ],\n];\n// The only greys the screen draws, as shares of lit pixels: ordered dither\n// at these levels makes clean repeating patterns, as a one-bit artist would\n// pick them from a palette of fills.\nconst G1 = 1 / 16;\nconst G2 = 1 / 8;\nconst G3 = 1 / 4;\nconst G4 = 1 / 2;\n\nconst SKY = 0;\nconst SEA = 1;\nconst CLIFF = 2;\nconst TOWER = 3;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// The 8 x 8 Bayer matrix, as thresholds between 0 and 1, grown from the\n// 2 x 2 one: each step puts four copies side by side, scaled by 4 and offset\n// by 0, 2, 3 and 1.\nfunction bayer() {\n  let m = [0];\n  let n = 1;\n  while (n \u003c 8) {\n    const next = new Array(4 * n * n);\n    for (let y = 0; y \u003c n; y++)\n      for (let x = 0; x \u003c n; x++) {\n        const v = 4 * m[y * n + x];\n        next[y * 2 * n + x] = v;\n        next[y * 2 * n + x + n] = v + 2;\n        next[(y + n) * 2 * n + x] = v + 3;\n        next[(y + n) * 2 * n + x + n] = v + 1;\n      }\n    m = next;\n    n *= 2;\n  }\n  return Float32Array.from(m, (v) => (v + 0.5) / 64);\n}\n\nfunction cliffEdge(y) {\n  // The cliff's seaward face, from the lighthouse's ledge down to the water.\n  const u = (y - T_BASE) / (H - T_BASE);\n  return 42 - 10 * u * u + 1.8 * Math.sin(y * 0.55) + 1.1 * Math.sin(y * 1.7 + 1);\n}\n\nfunction towerHalf(y) {\n  return 4 + (1.5 * (y - T_TOP)) / (T_BASE - T_TOP);\n}\n\n// The still picture, as a grey for each pixel before dithering, and which\n// part of the scene each pixel belongs to.\nfunction drawScene(P) {\n  const { base, region } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let v = 0;\n      let part = SEA;\n      if (y \u003c HZ) {\n        part = SKY;\n        // Black overhead, the sky paling in three bands down to the horizon.\n        v = y >= HZ - 9 ? G3 : y >= HZ - 20 ? G2 : y >= HZ - 36 ? G1 : 0;\n        const dm = Math.sqrt((x - MX) ** 2 + (y - MY) ** 2);\n        if (dm \u003c MR) {\n          // The moon, its seas in half tone: Imbrium and Serenitatis up on\n          // the left and right, Tranquillitatis below, Procellarum down the edge.\n          let mare = false;\n          for (let m = 0; m \u003c MARIA.length; m += 3) if ((x - MX - MARIA[m]) ** 2 + (y - MY - MARIA[m + 1]) ** 2 \u003c MARIA[m + 2]) mare = true;\n          v = mare ? G4 : 1;\n        } else {\n          // A ring of haze round the moon, fading out in four fills.\n          const ring = dm - MR;\n          const halo = ring \u003c 2 ? G4 : ring \u003c 6 ? G3 : ring \u003c 12 ? G2 : ring \u003c 20 ? G1 : 0;\n          if (halo > v) v = halo;\n        }\n      } else if (y \u003c HZ + 5) v = G2;\n      const edge = cliffEdge(y);\n      if (y >= T_BASE && x >= edge) {\n        part = CLIFF;\n        // Black rock, its seaward rim and a few ledges catching the moon, and\n        // turf along the top.\n        // The face is shaded from the rim back into the dark in three fills.\n        const ledge = (y === 86 && x \u003c 50) || (y === 99 && x \u003c 46) || (y === 112 && x \u003c 43);\n        const back = x - edge;\n        v = back \u003c 1 || ledge || y === T_BASE ? 1 : y === T_BASE + 1 ? G4 : back \u003c 7 ? G3 : back \u003c 13 ? G2 : back \u003c 20 ? G1 : 0;\n      }\n      // The tower, lit from the moon on the left and in shadow on the right.\n      const hw = towerHalf(y);\n      if (y >= T_TOP && y \u003c T_BASE && Math.abs(x - TX) \u003c= hw) {\n        part = TOWER;\n        const u = (x - (TX - hw)) / (2 * hw);\n        v = u \u003c 0.45 ? 1 : u \u003c 0.65 ? G4 : u \u003c 0.82 ? G3 : 0;\n        // Two black bands.\n        if ((y >= 39 && y \u003c 44) || (y >= 53 && y \u003c 58)) v = u \u003c 0.3 ? G4 : 0;\n        // A door and two small windows.\n        if ((y >= T_BASE - 6 && Math.abs(x - TX + 1) \u003c= 1) || ((y === 48 || y === 49 || y === 35 || y === 36) && x === TX - 1)) v = 0;\n      }\n      // Gallery and rail, lantern room, roof and the ball on top.\n      if (y >= T_TOP - 3 && y \u003c T_TOP && Math.abs(x - TX) \u003c= 6) {\n        part = TOWER;\n        v = y === T_TOP - 1 || (x & 1) === 0 || Math.abs(x - TX) === 6 ? 1 : 0;\n      }\n      if (y >= LAMP_Y - 4 && y \u003c T_TOP - 3 && Math.abs(x - TX) \u003c= 3) {\n        part = TOWER;\n        v = Math.abs(x - TX) === 3 ? 0 : 1;\n      }\n      if (y >= LAMP_Y - 8 && y \u003c LAMP_Y - 4 && Math.abs(x - TX) \u003c= 4 - (y - LAMP_Y + 8)) {\n        part = TOWER;\n        v = x \u003c= TX ? 1 : G3;\n      }\n      if (y === LAMP_Y - 9 && x === TX) {\n        part = TOWER;\n        v = 1;\n      }\n      base[p] = v;\n      region[p] = part;\n    }\n  // Stars in the dark sky, a few of them twinkling.\n  P.stars = [];\n  for (let i = 0; i \u003c 70; i++) {\n    const x = Math.floor(hash(i, 21) * W);\n    const y = Math.floor(hash(i, 22) * 52);\n    const p = y * W + x;\n    if (region[p] !== SKY || base[p] > 0) continue;\n    P.stars.push(p, hash(i, 23) \u003c 0.4 ? 1 : 0);\n  }\n  // Clouds: each a row of three to five puffs, long and low like the clouds\n  // over a sea at night, on its own height and pace.\n  P.clouds = [];\n  for (let i = 0; i \u003c MAX_CLOUDS; i++) {\n    const puffs = [];\n    const n = 3 + Math.floor(hash(i, 31) * 3);\n    let dx = 0;\n    for (let j = 0; j \u003c n; j++) {\n      const rx = 4 + 5 * hash(i * 7 + j, 32);\n      puffs.push(dx, -2.2 * hash(i * 7 + j, 33) * (j > 0 && j \u003c n - 1 ? 1 : 0.3), rx, 1.6 + 1.6 * hash(i * 7 + j, 34));\n      dx += rx * 1.1;\n    }\n    P.clouds.push({ x: hash(i, 35) * (W + 40), y: 8 + ((i * 23) % 9) * 6 + 3 * hash(i, 36), len: dx, pace: 0.7 + 0.4 * hash(i, 37), puffs });\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.base = new Float32Array(N);\n  P.region = new Uint8Array(N);\n  P.level = new Float32Array(N);\n  P.cloud = new Uint8Array(N);\n  P.bayer = bayer();\n  drawScene(P);\n  Object.assign(P, { t: 0, sail: 0, started: false, palette: 0, fogK: 0, wind: 0.06 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.palette = clamp(Math.floor(k[0] * PALETTES.length), 0, PALETTES.length - 1);\n  const time = clamp(k[1], 0.05, 4);\n  P.fogK = clamp(k[2], 0, 1);\n  P.wind = clamp(k[3], 0, 1);\n  // The clouds sail faster in a wind.\n  const gust = 1 + 1.5 * P.wind;\n  if (!P.started) {\n    // The night is a few seconds on when the screen comes up, as far as Time takes it.\n    P.started = true;\n    P.t = 6 * time;\n    P.sail = 6 * time * gust;\n  }\n  P.t += dt * time;\n  P.sail += dt * time * gust;\n}\n\n// Mark where the clouds are this frame: 1 inside, 2 on a top edge.\nfunction placeClouds(P) {\n  const { cloud } = P;\n  cloud.fill(0);\n  // More clouds, and bigger, as the wind rises, until the deck closes.\n  const count = 4 + Math.round(5 * P.wind);\n  const grow = 1 + 1.2 * P.wind;\n  for (let i = 0; i \u003c count; i++) {\n    const c = P.clouds[i];\n    const span = W + c.len * grow + 16;\n    const x0 = ((((c.x + P.sail * c.pace) % span) + span) % span) - c.len * grow - 8;\n    const pf = c.puffs;\n    for (let j = 0; j \u003c pf.length; j += 4) {\n      const cx = x0 + pf[j] * grow;\n      const cy = c.y + pf[j + 1];\n      const rx = pf[j + 2] * grow;\n      const ry = pf[j + 3] * (1 + 0.8 * P.wind);\n      const ya = Math.max(0, Math.floor(cy - ry));\n      const yb = Math.min(HZ - 1, Math.ceil(cy + ry));\n      for (let y = ya; y \u003c= yb; y++) {\n        const u = (y - cy) / ry;\n        const w = rx * Math.sqrt(Math.max(0, 1 - u * u));\n        const xa = Math.max(0, Math.ceil(cx - w));\n        const xb = Math.min(W - 1, Math.floor(cx + w));\n        for (let x = xa; x \u003c= xb; x++) cloud[y * W + x] = 1;\n      }\n    }\n  }\n  for (let p = W; p \u003c HZ * W; p++) if (cloud[p] && !cloud[p - W]) cloud[p] = 2;\n}\n\n// The grey of every pixel this frame: the still scene, the clouds, the\n// turning beam, the water's glitter and the fog.\nfunction compose(P) {\n  const { base, region, level, cloud } = P;\n  const t = P.t;\n  placeClouds(P);\n  // The fog bank: its lumpy top slides left at half a pixel a second of Time\n  // 1, and the bank rises and settles as it breathes.\n  const breath = Math.sin((t / BREATH) * Math.PI * 2);\n  const fogTop = HZ - 3 - 42 * P.fogK - 4 * breath;\n  const fogLow = HZ + 12 + 30 * P.fogK + 3 * breath;\n  const fx = t * 0.5;\n  // The beam: the light turns once in TURN seconds of Time 1; on screen it\n  // is a fan whose length is the turning light's sideways reach.\n  const a = (t / TURN) * Math.PI * 2 + BEAM0;\n  const side = Math.cos(a);\n  const toward = Math.sin(a);\n  const reach = Math.abs(side) * 70;\n  const dir = side > 0 ? 1 : -1;\n  // The lantern flares as the light swings past us.\n  const flare = toward > 0 ? Math.pow(toward, 16) : 0;\n  for (let x = 0; x \u003c W; x++) {\n    const xs = x + fx;\n    const top = fogTop - 2.5 * (Math.sin(xs * 0.21 + 0.7) + 0.6 * Math.sin(xs * 0.47 + 2.1));\n    const along = (x - TX) * dir;\n    const lit = along > 3 && along \u003c reach;\n    const spread = 1.5 + along * 0.13;\n    const mid = LAMP_Y + along * 0.05;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      const part = region[p];\n      let v = base[p];\n      if (part === SKY) {\n        const c = cloud[p];\n        if (c) {\n          // A cloud near the moon is lit through; its top edge catches the light.\n          const dm = (x - MX) ** 2 + (y - MY) ** 2;\n          v = c === 2 ? (dm \u003c 500 ? 1 : G4) : dm \u003c 120 ? G4 : G3;\n        }\n        // The beam crosses the sky in front of the clouds.\n        if (lit) {\n          const off = Math.abs(y - mid) / spread;\n          if (off \u003c 1) {\n            const fall = along / reach;\n            const g = fall \u003c 0.35 ? G4 : fall \u003c 0.7 ? G3 : G2;\n            const b = off \u003c 0.35 ? (g === G4 ? 0.75 : g * 2) : g;\n            if (b > v) v = b;\n          }\n        }\n      } else if (part === SEA) {\n        // The water in level wavelets on every other row, thicker toward us,\n        // each row sliding slowly the other way from the next. Under the\n        // moon they crowd into a path of light.\n        const depth = (y - HZ) / (H - HZ);\n        const half = 2 + 14 * depth;\n        const g = Math.max(0, 1 - Math.abs(x - MX) / half);\n        const row = y - HZ;\n        const seg = Math.floor((x + 40 + t * (0.5 + 0.6 * hash(y, 5)) * ((row >> 1) & 1 ? 1 : -1)) / (3 + 4 * depth));\n        // In the path of light each wavelet also winks on and off as it catches the moon.\n        const wink = g > 0 ? 0.35 * g * (hash(seg * 3 + y, Math.floor(t * 0.6 + hash(seg, y + 7) * 9)) - 0.5) : 0;\n        const dash = hash(seg, y) - wink;\n        // A wind raises whitecaps between the rows.\n        const chop = P.wind;\n        if (row & 1 ? dash \u003c 0.1 + 0.32 * depth + 0.6 * g * g + 0.3 * chop : (g > 0.4 && dash \u003c 0.5 * g * g) || dash > 1 - 0.3 * chop * depth) v = 1;\n        // Surf at the foot of the cliff, climbing higher in a wind.\n        const foam = cliffEdge(y) - x;\n        if (y > 106 - 22 * chop && foam \u003c 2.5 + 5 * chop && Math.sin(y * 1.3 + t * 0.7) > 0.3 - foam * 0.3) v = 1;\n      }\n      // The lantern flares when the light faces us.\n      if (flare > 0.02) {\n        const d2 = (x - TX) ** 2 + (y - LAMP_Y) ** 2;\n        const f = flare * Math.exp(-d2 / 50);\n        if (f > G2 && f > v) v = f > 0.6 ? 1 : f > 0.3 ? G4 : G3;\n      }\n      // Fog in front of everything from its top down to its foot: half grey\n      // where the moon lights its upper layer, a quarter below, thinning out.\n      if (y >= top && y \u003c fogLow + 6) {\n        const f = y \u003c top + 9 ? G4 : y \u003c fogLow ? G3 : G2;\n        v = v > G4 ? G4 : f > v ? f : v;\n      }\n      level[p] = v;\n    }\n  }\n  // Stars, and the twinkling ones going out for a moment now and then.\n  const stars = P.stars;\n  for (let i = 0; i \u003c stars.length; i += 2) {\n    const p = stars[i];\n    if (level[p] > 0) continue;\n    if (!stars[i + 1] || hash(p, Math.floor(t * 1.3)) > 0.15) level[p] = 1;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.base) return;\n  compose(P);\n  const { level, bayer } = P;\n  const [light, dark] = PALETTES[P.palette];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const on = level[y * W + x] > bayer[((y & 7) \u003c\u003c 3) | (x & 7)];\n      const c = on ? light : dark;\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..1, Time=0.2..3, Fog=0..1, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":1,"about":"The screen's two tones: an amber terminal, a Game Boy's greens, a Macintosh's black and white, e-ink on warm paper, and a Playdate's grey on silver."},{"name":"Time","min":0.2,"max":3,"about":"How fast the night goes by: at 2 the beam turns once in 12 seconds and a cloud takes 40 to 60 seconds to cross; at 0.2 the picture all but stands still."},{"name":"Fog","min":0,"max":1,"about":"How much fog lies on the sea: at 0 a low bank breathes along the horizon; turned up, it rolls in and climbs the cliff until only the gallery and the lantern stand clear."},{"name":"Wind","min":0,"max":1,"about":"At 0 a still night, four small clouds in a sky full of stars and a calm sea; turned up, nine clouds twice as long race over and hide the moon, whitecaps break between the wavelets and the surf climbs the cliff."}],"start":[0,2,0,0.06],"measures":{"motion":0.0337,"detail":0.3203,"edges":1,"complexity":0.0918,"coverage":0.242,"colour":0.3801,"drift":0.0416},"knobResponse":[0.2143,0.057,0.0812,0.0548]},{"slug":"op-stripes","title":"Op Stripes","family":"wave","round":1,"note":"브리짓 라일리 식의 두 색 가로줄이에요. 밑으로 지나가는 넓은 부풂 둘이 줄 간격을 벌려서 평평한 패널이 부푸는 것처럼 보여요.","idea":"Flat stripes in two colours open wider wherever a slow bulge passes under them, the trick Bridget Riley painted by hand, so a flat panel seems to swell towards you.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Op Stripes\n// Family:  wave\n// Idea:    Flat stripes in two colours open wider wherever a slow bulge passes under them, the trick Bridget Riley painted by hand, so a flat panel seems to swell towards you.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Drift=0.1..6, Stripes=14..26, Swell=0..1\n//\n// Knob 1: Hue. Turns the stripe pair around the colour wheel; the second stripe is a deep colour from across the wheel, and goes black where that would be brown.\n// Knob 2: Drift. How fast the bulges travel under the stripes and the bend rolls along them.\n// Knob 3: Stripes. Stripe pairs from top to bottom where nothing is swelling.\n// Knob 4: Swell. How far the stripes open over a bulge, from a soft swell to a wide flat lens.\n\nconst W = 64;\nconst H = 128;\nconst BULGES = 2;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.gx = new Float32Array(BULGES * W);\n  p.gy = new Float32Array(BULGES * H);\n  p.cx = new Float32Array(BULGES);\n  p.cy = new Float32Array(BULGES);\n  p.u = new Float32Array(H);\n  p.col = new Float32Array(6);\n  // Each bulge has its own pace, size and lane. sy runs along its path down\n  // the panel, sx across it.\n  p.speed = new Float32Array([1, 0.62]);\n  p.sx = new Float32Array([36, 22]);\n  p.sy = new Float32Array([24, 17]);\n  p.bend = new Float32Array(W);\n  // Each phase wraps on its own, so a long run keeps its precision.\n  p.along = new Float32Array([0, 99]);\n  p.lanePhase = new Float32Array([0.4, 3.3]);\n  p.roll = 0;\n  p.hue = -1;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 14, 0.06];\n  p.pairs = k[2];\n  p.depth = 0.5 + 0.42 * k[3];\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    hsv(0.96 + p.hue, 0.72, 1, p.col, 0);\n    // The partner sits across the wheel, deep and dark. A dark orange or\n    // yellow is brown or olive, so over that stretch it sinks to black.\n    let hb = 0.53 + p.hue;\n    hb -= Math.floor(hb);\n    const d = Math.abs(hb - 0.16) / 0.16;\n    const m = d >= 1 ? 1 : d * d * (3 - 2 * d);\n    hsv(hb, 1, 0.36 * m, p.col, 3);\n  }\n  const go = dt * k[1];\n\n  // The stripes lie across the 64 LEDs and stack up the 128, so a bulge has\n  // the long side of the panel to open in. The bulges travel down the panel\n  // and come round again, each drifting from side to side in its own lane.\n  const span = H + 70;\n  for (let i = 0; i \u003c BULGES; i++) {\n    const s = p.speed[i];\n    p.along[i] = (p.along[i] + go * 0.75 * s) % span;\n    p.lanePhase[i] = (p.lanePhase[i] + go * 0.06 * s) % (Math.PI * 2);\n    p.cy[i] = p.along[i] - 35;\n    p.cx[i] = W / 2 + Math.sin(p.lanePhase[i]) * 20;\n    const sx = p.sx[i];\n    const sy = p.sy[i];\n    for (let x = 0; x \u003c W; x++) {\n      const d = (x + 0.5 - p.cx[i]) / sx;\n      p.gx[i * W + x] = Math.exp(-d * d);\n    }\n    for (let y = 0; y \u003c H; y++) {\n      const d = (y + 0.5 - p.cy[i]) / sy;\n      p.gy[i * H + y] = Math.exp(-d * d);\n    }\n  }\n  // Every stripe follows the same slow bend across the panel.\n  p.roll = (p.roll + go * 0.14) % (Math.PI * 2);\n  for (let x = 0; x \u003c W; x++) p.bend[x] = 2.6 * Math.sin(((x + 0.5) / W) * Math.PI * 2 - p.roll);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const u = p.u;\n  const D = p.depth;\n  const period = H / p.pairs;\n  const a = p.col;\n  for (let x = 0; x \u003c W; x++) {\n    // Walk the column adding up stripe phase; over a bulge the phase climbs\n    // slower, so the stripes there are wider. It never runs backwards, so a\n    // stripe never folds over itself.\n    let sum = 0;\n    for (let y = 0; y \u003c H; y++) {\n      let keep = 1;\n      for (let i = 0; i \u003c BULGES; i++) keep *= 1 - p.gx[i * W + x] * p.gy[i * H + y];\n      const rho = 1 - D * (1 - keep);\n      u[y] = sum + rho * 0.5;\n      sum += rho;\n    }\n    // Centre the column so a swelling column opens out both ways.\n    const shift = -sum / 2;\n    for (let y = 0; y \u003c H; y++) {\n      const s = Math.floor(((u[y] + shift + p.bend[x]) * 2) / period);\n      const o = (s & 1) * 3;\n      display.setPixel(x, y, a[o], a[o + 1], a[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-op-stripes","type":"code","name":"op-stripes","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Op Stripes\n// Family:  wave\n// Idea:    Flat stripes in two colours open wider wherever a slow bulge passes under them, the trick Bridget Riley painted by hand, so a flat panel seems to swell towards you.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Drift=0.1..6, Stripes=14..26, Swell=0..1\n//\n// Knob 1: Hue. Turns the stripe pair around the colour wheel; the second stripe is a deep colour from across the wheel, and goes black where that would be brown.\n// Knob 2: Drift. How fast the bulges travel under the stripes and the bend rolls along them.\n// Knob 3: Stripes. Stripe pairs from top to bottom where nothing is swelling.\n// Knob 4: Swell. How far the stripes open over a bulge, from a soft swell to a wide flat lens.\n\nconst W = 64;\nconst H = 128;\nconst BULGES = 2;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.gx = new Float32Array(BULGES * W);\n  p.gy = new Float32Array(BULGES * H);\n  p.cx = new Float32Array(BULGES);\n  p.cy = new Float32Array(BULGES);\n  p.u = new Float32Array(H);\n  p.col = new Float32Array(6);\n  // Each bulge has its own pace, size and lane. sy runs along its path down\n  // the panel, sx across it.\n  p.speed = new Float32Array([1, 0.62]);\n  p.sx = new Float32Array([36, 22]);\n  p.sy = new Float32Array([24, 17]);\n  p.bend = new Float32Array(W);\n  // Each phase wraps on its own, so a long run keeps its precision.\n  p.along = new Float32Array([0, 99]);\n  p.lanePhase = new Float32Array([0.4, 3.3]);\n  p.roll = 0;\n  p.hue = -1;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 14, 0.06];\n  p.pairs = k[2];\n  p.depth = 0.5 + 0.42 * k[3];\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    hsv(0.96 + p.hue, 0.72, 1, p.col, 0);\n    // The partner sits across the wheel, deep and dark. A dark orange or\n    // yellow is brown or olive, so over that stretch it sinks to black.\n    let hb = 0.53 + p.hue;\n    hb -= Math.floor(hb);\n    const d = Math.abs(hb - 0.16) / 0.16;\n    const m = d >= 1 ? 1 : d * d * (3 - 2 * d);\n    hsv(hb, 1, 0.36 * m, p.col, 3);\n  }\n  const go = dt * k[1];\n\n  // The stripes lie across the 64 LEDs and stack up the 128, so a bulge has\n  // the long side of the panel to open in. The bulges travel down the panel\n  // and come round again, each drifting from side to side in its own lane.\n  const span = H + 70;\n  for (let i = 0; i \u003c BULGES; i++) {\n    const s = p.speed[i];\n    p.along[i] = (p.along[i] + go * 0.75 * s) % span;\n    p.lanePhase[i] = (p.lanePhase[i] + go * 0.06 * s) % (Math.PI * 2);\n    p.cy[i] = p.along[i] - 35;\n    p.cx[i] = W / 2 + Math.sin(p.lanePhase[i]) * 20;\n    const sx = p.sx[i];\n    const sy = p.sy[i];\n    for (let x = 0; x \u003c W; x++) {\n      const d = (x + 0.5 - p.cx[i]) / sx;\n      p.gx[i * W + x] = Math.exp(-d * d);\n    }\n    for (let y = 0; y \u003c H; y++) {\n      const d = (y + 0.5 - p.cy[i]) / sy;\n      p.gy[i * H + y] = Math.exp(-d * d);\n    }\n  }\n  // Every stripe follows the same slow bend across the panel.\n  p.roll = (p.roll + go * 0.14) % (Math.PI * 2);\n  for (let x = 0; x \u003c W; x++) p.bend[x] = 2.6 * Math.sin(((x + 0.5) / W) * Math.PI * 2 - p.roll);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const u = p.u;\n  const D = p.depth;\n  const period = H / p.pairs;\n  const a = p.col;\n  for (let x = 0; x \u003c W; x++) {\n    // Walk the column adding up stripe phase; over a bulge the phase climbs\n    // slower, so the stripes there are wider. It never runs backwards, so a\n    // stripe never folds over itself.\n    let sum = 0;\n    for (let y = 0; y \u003c H; y++) {\n      let keep = 1;\n      for (let i = 0; i \u003c BULGES; i++) keep *= 1 - p.gx[i * W + x] * p.gy[i * H + y];\n      const rho = 1 - D * (1 - keep);\n      u[y] = sum + rho * 0.5;\n      sum += rho;\n    }\n    // Centre the column so a swelling column opens out both ways.\n    const shift = -sum / 2;\n    for (let y = 0; y \u003c H; y++) {\n      const s = Math.floor(((u[y] + shift + p.bend[x]) * 2) / period);\n      const o = (s & 1) * 3;\n      display.setPixel(x, y, a[o], a[o + 1], a[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Drift=0.1..6, Stripes=14..26, Swell=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the stripe pair around the colour wheel; the second stripe is a deep colour from across the wheel, and goes black where that would be brown."},{"name":"Drift","min":0.1,"max":6,"about":"How fast the bulges travel under the stripes and the bend rolls along them."},{"name":"Stripes","min":14,"max":26,"about":"Stripe pairs from top to bottom where nothing is swelling."},{"name":"Swell","min":0,"max":1,"about":"How far the stripes open over a bulge, from a soft swell to a wide flat lens."}],"start":[0,2,14,0.06],"measures":{"motion":0.0622,"detail":0.0792,"edges":1,"complexity":0.0654,"coverage":1,"colour":0.6118,"drift":0.0499},"knobResponse":[0.4596,0.1655,0.1894,0.1993]},{"slug":"pancakes","title":"Pancakes","family":"kitchen","round":21,"note":"길든 철판을 위에서 내려다봐요. 국자로 부은 반죽이 퍼지고 기포가 올라와 터지며 구멍을 남기는 동안, 뒤집개가 하나씩 뒤집어 노릇한 면을 보이고 다 익은 것을 숯색 접시에 쌓아요. K1 을 누르면 가장 많이 익은 것부터 바로 뒤집거나 접시로 옮겨요.","idea":"A seasoned griddle seen from above: batter is ladled into rounds, bubbles rise and pop and leave holes as the tops set, a turner flips each one to its fried side and slides the done ones onto a stack on the plate, while butter melts and oil glints on the iron.","buttons":"K1 tap sends the turner to the pancake furthest along, to flip it or serve it now.","code":"// ===== Patternflow pattern =====\n// Title:   Pancakes\n// Family:  kitchen\n// Idea:    A seasoned griddle seen from above: batter is ladled into rounds, bubbles rise and pop and leave holes as the tops set, a turner flips each one to its fried side and slides the done ones onto a stack on the plate, while butter melts and oil glints on the iron.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the flat-top griddles of diner breakfast counters\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Batter=0..1, Speed=0.2..3, Pancakes=6..12, Heat=0..1\n//\n// Knob 1: Batter. Buttermilk at 0, then blueberry, buckwheat and cocoa at 1; the bowl changes at once and the next rounds are poured from it.\n// Knob 2: Speed. How fast the cook works: at 2 a pancake takes about 20 s from the ladle to the plate, and the turner flips or serves one every two seconds.\n// Knob 3: Pancakes. How many rounds are on the iron: six big ones at 6, twelve silver dollars at 12, and still one turner for all of them.\n// Knob 4: Heat. How hot the griddle runs. At the low end the pancakes come out golden; turned up they cook faster, bubble more, fry dark brown and the oil starts to smoke.\n// Buttons: K1 tap sends the turner to the pancake furthest along, to flip it or serve it now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Rows: the iron IR0..IR1, the grease trough, the butcher block from CT.\nconst [IR0, IR1, CT] = [3, 90, 94];\nconst [PX, PY, PR, BX, BY, BR] = [42, 112, 16.5, 7, 114, 12.5];\nconst [EMPTY, POUR, SIDE1, FLIP, SIDE2, SERVE] = [0, 1, 2, 3, 4, 5];\n// Pancakes to a full plate; how long the turner takes to get anywhere.\nconst [FULL, GO] = [7, 0.3];\nconst { min, max, floor, round, ceil, sin, cos, abs, hypot, exp, atan2, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = sm(x - xi), v = sm(y - yi), a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(xi + 1, yi + 1)) * u * v;\n}\n\n// Each batter: the wet top, the set top, the inside a popped bubble shows,\n// and the fried side from pale through golden to dark.\nconst BAT = [\n  [[228, 212, 166], [222, 196, 142], [64, 38, 18], [232, 194, 124], [206, 138, 66], [118, 60, 24]],\n  [[226, 212, 172], [218, 196, 148], [62, 38, 22], [228, 190, 126], [202, 134, 68], [114, 58, 26]],\n  [[196, 170, 142], [182, 152, 120], [52, 34, 24], [188, 148, 108], [150, 98, 58], [84, 46, 28]],\n  [[140, 92, 64], [124, 80, 54], [40, 24, 16], [130, 82, 54], [100, 58, 36], [68, 36, 22]],\n];\n// A blueberry's skin, raw and baked.\nconst BERRY = [[64, 40, 118], [50, 28, 70]];\nconst C = [0, 0, 0];\nfunction fry(bt, b) {\n  b = cl(b, 0, 1);\n  const lo = b \u003c 0.5, a = lo ? bt[3] : bt[4], c = lo ? bt[4] : bt[5], t = lo ? b * 2 : b * 2 - 1;\n  for (let i = 0; i \u003c 3; i++) C[i] = a[i] + (c[i] - a[i]) * t;\n}\n\nlet B;\nconst at = (x, y) => (x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, r, g, b, o = at(x, y)) {\n  if (o >= 0) (B[o] = r), (B[o + 1] = g), (B[o + 2] = b);\n}\nfunction blend(x, y, r, g, b, a, o = at(x, y)) {\n  if (o >= 0) (B[o] += (r - B[o]) * a), (B[o + 1] += (g - B[o + 1]) * a), (B[o + 2] += (b - B[o + 2]) * a);\n}\nfunction dim(x, y, k, o = at(x, y)) {\n  if (o >= 0) (B[o] *= k), (B[o + 1] *= k), (B[o + 2] *= k);\n}\n\n// Marks that should read sharp (holes, flecks, pores, glints) sit on the\n// squares the grain in show() pushes their way: dark ones where x + y is\n// even, bright ones where it is odd. Two such squares never touch side by side.\nfunction build(P) {\n  const bg = P.bg, mk = new Uint8Array(N);\n  const set = (p, r, g, b) => ((bg[p * 3] = r), (bg[p * 3 + 1] = g), (bg[p * 3 + 2] = b));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, odd = (x + y) & 1;\n    let k;\n    P.G[p] = hash(x + 77, y + 5) \u003c 0.5 ? 0.94 : 1.06;\n    if (y \u003c IR0) (k = 0.82 + 0.08 * vn(x * 0.3, y)), set(p, 170 * k, 172 * k, 178 * k);\n    else if (y \u003c= IR1) {\n      // Seasoning in bronze patches, and crumbs of old batter.\n      const s = vn(x * 0.08, y * 0.06) * 0.6 + vn(x * 0.21 + 9, y * 0.19) * 0.4;\n      k = 0.84 + 0.32 * s;\n      if (odd && rnd() \u003c 0.024) set(p, 196, 140, 70), (mk[p] = 1);\n      else set(p, (52 + 10 * s) * k, 44 * k, 39 * k);\n    } else if (y === IR1 + 1) (k = 0.92 + 0.06 * vn(x * 0.5, 1)), set(p, 200 * k, 200 * k, 204 * k);\n    else if (y === IR1 + 2) (k = 0.85 + 0.2 * vn(x * 0.25, 3)), set(p, 96 * k, 64 * k, 26 * k);\n    else if (y \u003c CT) set(p, 180, 180, 186);\n    else {\n      // Oak strips seven LEDs wide, told apart by hue more than by light,\n      // with dark pores along the grain.\n      const s = floor((x + 2) / 7), t = hash(s, 5);\n      const v = vn(x * 0.4 + s * 13, y * 0.09);\n      k = !odd && rnd() \u003c 0.12 ? 0.27 : 1;\n      set(p, (176 + 4 * v) * k, (100 + 26 * t + 20 * v) * k, (56 + 20 * t + 14 * v) * k);\n    }\n  }\n  // The hood lights' reflection, and oil specks catching it.\n  for (let p = IR0 * W; p \u003c= IR1 * W + 63; p++) {\n    const x = p & 63, y = p >> 6;\n    P.sheen[p] = exp(-(((x - 20) / 17) ** 2) - ((y - 30) / 11) ** 2) + 0.8 * exp(-(((x - 44) / 15) ** 2) - ((y - 68) / 12) ** 2);\n  }\n  P.glint = [];\n  for (let p = (IR0 + 1) * W; p \u003c IR1 * W; p++) if (!mk[p] && (p + (p >> 6)) & 1 && rnd() \u003c 0.12) P.glint.push(p, rnd() * 7, 1.5 + rnd() * 3);\n  // A white enamel bowl with a navy rolled rim; its batter follows K1.\n  P.bowl = [];\n  for (let y = BY - 16; y \u003c H; y++)\n    for (let x = 0; x \u003c= BX + 16; x++) {\n      const p = y * W + x, dx = x - BX, dy = y - BY, d = hypot(dx, dy);\n      let k;\n      if (d > BR + 3) continue;\n      if (d > BR) dx + dy > 0 && ((k = 0.9 + 0.033 * (d - BR)), set(p, bg[p * 3] * k, bg[p * 3 + 1] * k, bg[p * 3 + 2] * k));\n      else if (d > BR - 1.6) (k = 0.85 + 0.2 * cos(atan2(dy, dx) + 2.3)), set(p, 26 * k, 38 * k, 88 * k);\n      else P.bowl.push(p, !((x + y) & 1) && hash(x + 3, y) \u003c 0.12 ? -1 : 0.97 - 0.08 * sm((d - BR + 7) / 5));\n    }\n  // Charcoal stoneware: a raised rim that catches the light, the well, cream\n  // flecks in the glaze, and its shadow on the wood (a negative entry).\n  P.plate = [];\n  for (let dy = -20; dy \u003c= 20; dy++)\n    for (let dx = -20; dx \u003c= 20; dx++) {\n      const d = hypot(dx, dy), k = mix(0.86, 0.98 + 0.1 * cos(atan2(dy, dx) + 2.4), cl((d - PR + 6.5) / 4, 0, 1));\n      if (d > PR + 3 || (d > PR && dx + dy \u003c= 0)) continue;\n      if (d > PR) P.plate.push(dx, dy, -0.9 - 0.033 * (d - PR), 0, 0);\n      else if ((dx + dy) & 1 && hash(dx + 40, dy + 40) \u003c 0.1) P.plate.push(dx, dy, 206, 198, 178);\n      else P.plate.push(dx, dy, 66 * k, 72 * k, 86 * k);\n    }\n}\n\nfunction layout(P, n) {\n  const cols = n \u003c= 8 ? 2 : 3, rows = ceil(n / cols), cw = W / cols, ch = (IR1 - IR0 - 1) / rows, R = min(cw, ch) / 2 - 1.6;\n  if (P.carry) P.stack.push(P.carry), (P.carry = null);\n  P.n = n;\n  P.slots = Array.from({ length: n }, (_, i) => {\n    const x = round(((i % cols) + 0.5) * cw + (rnd() - 0.5) * 2), y = round(IR0 + 1 + (floor(i / cols) + 0.5) * ch + (rnd() - 0.5) * 2);\n    return { x, y: y + ((x + y) & 1), R, st: EMPTY, t: rnd(), melt: 0.8 + rnd() * 0.6, p: 0, cake: null };\n  });\n  P.sp.job = P.ld.job = null;\n}\n\n// A fresh round: its wobbly outline, the shine, where bubbles will come up,\n// the flecks the iron leaves on the fried side, berries.\nfunction newCake(P, s) {\n  const R = s.R, h = ceil(R * 1.08) + 1, sz = 2 * h + 1, n = sz * sz, F = () => new Float32Array(n);\n  const k = { bi: P.bi, R, h, sz, b: 0, ox: 0, oy: 0, S1: P.S1 * (0.55 + (0.45 * R) / 12.7), dd: F(), site: F(), mot: F(), hl: F(), spk: new Uint8Array(n) };\n  const [a1, a2, m0, dens] = [rnd() * 7, rnd() * 7, rnd() * 50, 0.6 + 0.25 * P.heat];\n  for (let j = -h, q = 0; j \u003c= h; j++)\n    for (let i = -h; i \u003c= h; i++, q++) {\n      const a = atan2(j, i), d = (k.dd[q] = hypot(i, j) / (R * (1 + 0.035 * sin(3 * a + a1) + 0.025 * sin(5 * a + a2))));\n      k.mot[q] = vn(i * 0.24 + m0, j * 0.24);\n      k.hl[q] = 14 * exp(-((i / R + 0.3) ** 2 + (j / R + 0.38) ** 2) * 7);\n      // Bubbles never touch even at the corners, so they never run into lines.\n      const free = (m) => j === -h || (!m[q - sz - 1] && !m[q - sz + 1]);\n      if ((i + j) & 1) continue;\n      if (P.bi === 1 && rnd() \u003c 0.07) k.spk[q] = 2;\n      else {\n        if (d \u003c 0.97 && rnd() \u003c dens && free(k.site)) k.site[q] = 0.12 + 0.88 * rnd() ** 0.6;\n        if (rnd() \u003c 0.85 * sm((k.mot[q] - 0.36) / 0.36)) k.spk[q] = 1;\n      }\n    }\n  return k;\n}\n\n// One pancake at (cx, cy), raw top or fried side up, squashed to sy as it\n// turns over and spread to rs while poured.\nfunction cake(P, k, cx, cy, sx, sy, fried, p, rs = 1, lit = 1) {\n  if (abs(sy) \u003c 0.05) return;\n  const bt = BAT[k.bi], [wet0, set0, hole] = bt, { h, sz, dd, site, spk, mot, hl, S1 } = k;\n  const ex = h * abs(sx) + 1, ey = h * abs(sy) + 1, setR = 1.02 - 1.1 * p, rim = cl(p * 1.5, 0, 1);\n  fry(bt, k.b);\n  const [fr, fg, fb] = C;\n  for (let y = max(0, floor(cy - ey)); y \u003c= min(H - 1, ceil(cy + ey)); y++)\n    for (let x = max(0, floor(cx - ex)); x \u003c= min(W - 1, ceil(cx + ex)); x++) {\n      const i = round((x - cx) / sx), j = round((y - cy) / sy);\n      if (i \u003c -h || i > h || j \u003c -h || j > h) continue;\n      const q = (j + h) * sz + i + h, d = dd[q] / rs;\n      if (d > 1) continue;\n      let r, g, b;\n      if (!fried) {\n        // Wet batter shines; it sets from the rim in, and the rim shows the\n        // browning underneath.\n        const wet = sm((setR - d) / 0.14 + 0.5), dome = 1.02 - 0.06 * d * d, gl = wet * hl[q], e = sm((d - 0.8) / 0.2) * rim;\n        r = mix(mix(set0[0], wet0[0], wet) * dome + gl, fr, e);\n        g = mix(mix(set0[1], wet0[1], wet) * dome + gl, fg, e);\n        b = mix(mix(set0[2], wet0[2], wet) * dome + gl * 0.8, fb, e);\n        const tb = site[q];\n        if (tb && p > tb) {\n          // A bubble shines for a moment and pops. Where the batter is still\n          // wet the hole closes again; where it has set it stays open.\n          const age = (p - tb) * S1;\n          if (age \u003c 0.3) (r = mix(r, 255, 0.5)), (g = mix(g, 250, 0.5)), (b = mix(b, 236, 0.5));\n          else {\n            const o = d \u003c 1.02 - 1.1 * (tb + 0.3 / S1) ? 1 - cl((age - 0.3) / 0.5, 0, 1) : 1;\n            (r = mix(r, hole[0], o)), (g = mix(g, hole[1], o)), (b = mix(b, hole[2], o));\n          }\n        }\n      } else {\n        // Browner in the middle, mottled, flecked, and pale round the edge.\n        const f = spk[q] === 1, e = sm((d - 0.88) / 0.12), s = f ? 0.45 : 1;\n        fry(bt, k.b * (1.12 - 0.42 * sm((d - 0.5) / 0.5)) * (0.86 + 0.28 * mot[q]) + (f ? 0.55 : 0));\n        r = mix(C[0] * s, set0[0] * 0.9, e);\n        g = mix(C[1] * s, set0[1] * 0.9, e);\n        b = mix(C[2] * s, set0[2] * 0.9, e);\n      }\n      if (spk[q] === 2) [r, g, b] = BERRY[fried];\n      put(x, y, r * lit, g * lit, b * lit);\n    }\n}\n\n// A small offset that keeps a pancake's flecks on the grain's dark squares.\nconst jig = (o = floor(rnd() * 3) - 1) => [o, o ? (rnd() \u003c 0.5 ? -1 : 1) : 0];\n\n// Shadows fade over three LEDs so their edge stays soft under the grain.\nfunction shadow(cx, cy, R, k) {\n  for (let y = floor(cy - R - 2); y \u003c= cy + R + 2; y++)\n    for (let x = floor(cx - R - 2); x \u003c= cx + R + 2; x++) {\n      const e = sm((hypot(x - cx, y - cy) - R + 1.5) / 3);\n      if (e \u003c 1) dim(x, y, k + (1 - k) * e);\n    }\n}\n\nexport function setup(params) {\n  const P = params, F = (n = N) => new Float32Array(n);\n  Object.assign(P, { bg: F(N * 3), buf: F(N * 3), G: F(), sheen: F(), t: 0, n: 0, stack: [], carry: null, pat: -1, pdx: 0, pdy: 0, pst: 0, spat: [], steam: [] });\n  [P.sp, P.ld] = [{ x: 70, y: 140, ph: 0, t: 0, idle: 0 }, { x: 11, y: 110, ph: 3, t: 0 }];\n  build(P);\n}\n\nconst brown = (P) => 0.36 + 0.5 * P.heat;\n\n// Open on a morning under way: some on each side, a stack started, then the\n// cook's clock runs on a while at the knob's speed.\nfunction warm(P) {\n  const S = [...P.slots].sort(() => rnd() - 0.5);\n  S.forEach((s, i) => {\n    const f = (i + 0.5) / S.length;\n    if (f \u003c 0.12) return;\n    s.cake = newCake(P, s);\n    if (f \u003c 0.6) (s.st = SIDE1), (s.t = ((f - 0.12) / 0.48) * s.cake.S1 * 0.95);\n    else (s.st = SIDE2), (s.t = (f - 0.6) * 9), (s.cake.b = brown(P));\n  });\n  for (let i = 0, n = 3 + floor(rnd() * 2); i \u003c n; i++) {\n    const k = newCake(P, { R: P.slots[0].R });\n    [k.b, k.ox, k.oy] = [brown(P), ...jig()];\n    P.stack.push(k);\n  }\n  for (let i = 0, n = round(6 * P.rate * 30); i \u003c n; i++) step(P, 1 / 30);\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06];\n  P.bi = round(cl(k[0], 0, 1) * 3);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  P.heat = cl(k[3], 0, 1);\n  P.S1 = 8 / (0.7 + 0.8 * P.heat);\n  const n = round(cl(k[2], 6, 12));\n  if (n !== P.n) layout(P, n);\n  if (!P.warm) (P.warm = true), warm(P);\n  const go = input.btnPressed?.[0] && P.slots.filter((s) => s.st === SIDE1 || s.st === SIDE2).sort((a, b) => b.p - a.p)[0];\n  if (go) go.rush = true;\n  step(P, cl(dt, 0, 0.1) * P.rate);\n}\n\nconst glide = (o, x, y, u) => ((o.x = mix(o.fx, x, u)), (o.y = mix(o.fy, y, u)));\n\nfunction step(P, d) {\n  const sp = P.sp, ld = P.ld;\n  P.t += d;\n  for (const s of P.slots) {\n    s.t += d;\n    const k = s.cake;\n    if (s.st === SIDE1) (s.p = s.t / k.S1), (k.b = brown(P) * min(1.3, s.p));\n    else if (s.st === SIDE2) s.p = s.t / (k.S1 * 0.62);\n    // Steam off the cooking ones, smoke when the iron runs too hot.\n    const puff = (f, m) => P.steam.push([s.x + (rnd() - 0.5) * s.R * f, s.y + (rnd() - 0.5) * s.R * f, 1, m]);\n    if ((s.st === SIDE2 || (s.st === SIDE1 && s.p > 0.5)) && rnd() \u003c d * 2) puff(1, 0);\n    if (s.st >= SIDE1 && rnd() \u003c d * 8 * max(0, P.heat - 0.5)) puff(2, 1);\n  }\n  // The turner goes to the most overdue pancake first.\n  if (!sp.job) {\n    let best = null, over = 0;\n    for (const s of P.slots) {\n      const o = s.st === SIDE1 || (s.st === SIDE2 && !P.pst && P.pat \u003c 0) ? s.p - 1 + (s.rush ? 99 : 0) : -1;\n      if (o >= over) (best = s), (over = o);\n    }\n    if (best) Object.assign(sp, { job: best, ph: 0, t: 0, fx: sp.x, fy: sp.y, mode: best.st === SIDE1 ? FLIP : SERVE });\n    else if ((sp.idle += d) > 0.6) (sp.x += (70 - sp.x) * min(1, d * 3)), (sp.y += (140 - sp.y) * min(1, d * 3));\n  }\n  const s = sp.job;\n  if (s) {\n    sp.t += d;\n    const y0 = s.y + s.R + 6, y1 = s.y + 0.3 * s.R;\n    if (sp.ph === 0) {\n      glide(sp, s.x, y0, sm(sp.t / GO));\n      if (sp.t >= GO) Object.assign(sp, { ph: 1, t: 0 }), Object.assign(s, { st: sp.mode, t: 0, rush: false, land: false });\n    } else if (sp.mode === FLIP) {\n      // Slide under, lift and turn it over, set it down, pull back.\n      const u = (s.u = sp.t / (0.7 * (s.R / 12.7) ** 0.5));\n      sp.x = s.x;\n      sp.y = u \u003c 0.3 ? mix(y0, y1, sm(u / 0.3)) : u \u003c 0.85 ? y1 - 3 * sin((PI * (u - 0.3)) / 0.55) : mix(y1, y0 + 2, sm((u - 0.85) / 0.15));\n      for (let i = 0, a, r, x, y; u >= 0.85 && !s.land && i \u003c 8; i++) {\n        [a, r] = [rnd() * 2 * PI, s.R + 1 + rnd() * 4];\n        [x, y] = [round(s.x + cos(a) * r), round(s.y + sin(a) * r)];\n        P.spat.push([x + 1 - ((x + y) & 1), y, 1]);\n      }\n      s.land ||= u >= 0.85;\n      if (u >= 1) Object.assign(s, { st: SIDE2, t: 0, p: 0 }), (sp.job = null), (sp.idle = 0);\n    } else {\n      // Slide under, carry it down to the plate, drop it on the stack.\n      const u = sp.t / 1.2;\n      if (u \u003c 0.25) (sp.x = s.x), (sp.y = mix(y0, y1, sm(u / 0.25)));\n      else if (u \u003c 0.85) {\n        if (!P.carry) (P.carry = s.cake), Object.assign(s, { cake: null, st: EMPTY, t: 0, melt: 0.8 + rnd() * 0.6 }), ([P.carry.ox, P.carry.oy] = jig());\n        const w = sm((u - 0.25) / 0.6), k = P.carry;\n        [k.x, k.y, k.lift] = [mix(s.x, PX + k.ox, w), mix(s.y, PY + k.oy, w), sin(PI * w)];\n        [sp.x, sp.y] = [k.x, k.y + 0.3 * s.R - 3 * k.lift];\n      } else {\n        if (P.carry) {\n          P.stack.push(P.carry);\n          P.carry = null;\n          if (P.stack.length >= FULL) P.pat = 0;\n          [sp.fx, sp.fy] = [sp.x, sp.y];\n        }\n        const w = sm((u - 0.85) / 0.15);\n        [sp.x, sp.y] = [sp.fx + 8 * w, sp.fy + 14 * w];\n      }\n      if (u >= 1) (sp.job = null), (sp.idle = 0);\n    }\n  }\n  // The ladle, from the bowl to an empty place, and back to dip again.\n  const next = !ld.job && ld.ph === 3 && P.slots.filter((s) => s.st === EMPTY && s.t > s.melt).sort((a, b) => b.t - a.t)[0];\n  if (next) Object.assign(ld, { job: next, ph: 0, t: 0, fx: ld.x, fy: ld.y });\n  const L = ld.job;\n  ld.t += d;\n  if (ld.ph === 0 && L) {\n    glide(ld, L.x - 2, L.y - 3, sm(ld.t / 0.45));\n    if (ld.t >= 0.45) Object.assign(ld, { ph: 1, t: 0 }), Object.assign(L, { st: POUR, t: 0, rs: 0.05, cake: newCake(P, L) });\n  } else if (ld.ph === 1 && L) {\n    const u = ld.t / (0.9 * (L.R / 12.7));\n    L.rs = 1 - (1 - min(1, u)) ** 2;\n    if (u >= 1) Object.assign(L, { st: SIDE1, t: 0, p: 0 }), Object.assign(ld, { ph: 2, t: 0, fx: ld.x, fy: ld.y });\n  } else if (ld.ph === 2) {\n    glide(ld, 11, 110, sm(ld.t / 0.45));\n    if (ld.t >= 0.7) (ld.ph = 3), (ld.job = null);\n  } else if (!L) Object.assign(ld, { ph: 2, t: 0.45, fx: ld.x, fy: ld.y });\n  // A full plate gets butter, goes out to the right, and a clean one comes up.\n  if (P.pat >= 0 && (P.pat += d) > 3.5 && !P.pst) P.pst = 1;\n  if (P.pst === 1 && (P.pdx += 60 * d) > 60) Object.assign(P, { stack: [], pat: -1, pdx: 0, pdy: 40, pst: 2 });\n  if (P.pst === 2 && (P.pdy -= 40 * d) \u003c= 0) (P.pdy = 0), (P.pst = 0);\n  P.spat = P.spat.filter((q) => (q[2] -= d * 0.6) > 0);\n  P.steam = P.steam.filter((q) => ((q[1] -= (q[3] ? 9 : 6) * d), (q[0] += 2.5 * d), (q[2] -= d * 0.7) > 0));\n}\n\nfunction iron(P) {\n  const { sheen, glint, t, heat } = P;\n  for (let y = IR0, p = IR0 * W; y \u003c= IR1; y++)\n    for (let x = 0, w = (0.85 + 0.15 * sin(y * 0.5 - t * 4)) * 26; x \u003c W; x++, p++) {\n      const s = sheen[p] * w;\n      B[p * 3] += s;\n      B[p * 3 + 1] += s * 0.95;\n      B[p * 3 + 2] += s * 0.86;\n    }\n  for (let i = 0; i \u003c glint.length; i += 3) {\n    const p = glint[i], tw = 0.5 + 0.5 * sin(t * glint[i + 2] * (1 + heat) + glint[i + 1]), v = 205 + 50 * (0.4 + 0.6 * sheen[p]) * tw * tw;\n    put(p & 63, p >> 6, v, v * 0.94, v * 0.8);\n  }\n  // Butter melts where the next one goes and fries round the new ones.\n  for (const s of P.slots) {\n    const m = s.st === EMPTY ? cl(s.t / s.melt, 0, 1) : s.st === POUR ? 1 : s.st === SIDE1 ? 1 - cl(s.t / 3, 0, 1) : 0;\n    if (!m) continue;\n    const pr = s.R * (s.st === EMPTY ? 0.25 + 0.6 * m : 1 + 0.25 * m), f = floor(t * 7);\n    for (let y = floor(s.y - pr); y \u003c= s.y + pr; y++)\n      for (let x = floor(s.x - pr); x \u003c= s.x + pr; x++) {\n        const d = hypot(x - s.x, y - s.y) / pr;\n        if (d > 1) continue;\n        blend(x, y, 196, 152, 60, 0.75);\n        if ((x + y) & 1 && hash(x * 3 + f, y) \u003c 0.28 * (1 - d * 0.5)) put(x, y, 248, 238, 204);\n      }\n    if (s.st === EMPTY)\n      for (let hs = 2.6 * (1 - 0.8 * m), y = round(s.y - hs); y \u003c= s.y + hs; y++) for (let x = round(s.x - hs); x \u003c= s.x + hs; x++) put(x, y, 252, 232, 140);\n  }\n  for (const [x, y, l] of P.spat) put(x, y, 120 + 130 * l, 110 + 120 * l, 90 + 90 * l);\n}\n\nfunction plate(P) {\n  const cx = PX + round(P.pdx), cy = PY + round(P.pdy), T = P.plate, st = P.stack, bt = BAT[P.bi][0], bw = P.bowl;\n  for (let i = 0; i \u003c bw.length; i += 2) {\n    const o = bw[i] * 3, k = bw[i + 1], c = k \u003c 0 && P.bi === 1 ? BERRY[0] : bt, f = k \u003c 0 ? (P.bi === 1 ? 1 : 0.95) : k;\n    [B[o], B[o + 1], B[o + 2]] = [c[0] * f, c[1] * f, c[2] * f];\n  }\n  for (let i = 0; i \u003c T.length; i += 5) T[i + 2] \u003c 0 ? dim(cx + T[i], cy + T[i + 1], -T[i + 2]) : put(cx + T[i], cy + T[i + 1], T[i + 2], T[i + 3], T[i + 4]);\n  if (!st.length) return;\n  shadow(cx + st[0].ox + 1 + 0.4 * st.length, cy + st[0].oy + 1 + 0.4 * st.length, st[0].R, 0.82);\n  st.forEach((k, i) => cake(P, k, cx + k.ox, cy + k.oy, 1, 1, 1, 1, 1, 0.9 ** (st.length - 1 - i)));\n  if (P.pat \u003c 0) return;\n  // The butter pat on top, melting into a glossy pool.\n  const top = st[st.length - 1], bx = cx + top.ox + 1, by = cy + top.oy - 1, m = cl(P.pat / 3, 0, 1), pr = 2 + 4.5 * m, hs = 2.4 * (1 - 0.75 * m);\n  for (let y = floor(by - pr); y \u003c= by + pr; y++)\n    for (let x = floor(bx - pr); x \u003c= bx + pr; x++) {\n      const d = hypot(x - bx, y - by) / pr, e = x - bx >= hs - 1 || y - by >= hs - 1;\n      if (d \u003c 1) blend(x, y, 252, 222, 124, 0.55 * (1 - d * d));\n      if (abs(x - bx) \u003c= hs && abs(y - by) \u003c= hs) put(x, y, e ? 222 : 252, e ? 198 : 238, e ? 112 : 160);\n    }\n}\n\n// The turner: a slotted steel blade, its edge up the panel, and a wooden\n// handle toward the cook's right hand. Its shadow goes down first.\nfunction turner(x, y, blade = 1, grip = 1) {\n  const [x0, y0] = [round(x), round(y)];\n  for (const pt of [(x, y) => dim(x + 2, y + 3, 0.55), put]) {\n    for (let j = -5; blade && j \u003c= 5; j++)\n      for (let i = -4; i \u003c= 4; i++) {\n        const k = j === -4 ? 1.1 : 0.9 + 0.01 * j, ai = abs(i);\n        if (j === -5 && ai === 4) continue;\n        if (ai === 4 || abs(j) === 5 || (j === -4 && ai === 3)) pt(x0 + i, y0 + j, 64, 64, 70);\n        else if (!(i & 1) && ai \u003c 3 && abs(j) \u003c 3) pt(x0 + i, y0 + j, 40, 38, 38);\n        else pt(x0 + i, y0 + j, 200 * k, 202 * k, 208 * k);\n      }\n    for (let s = 0; grip && s \u003c 24; s++) {\n      const x = round(x0 + 0.42 * s), y = y0 + 6 + s, k = s === 9 || s === 17 ? 0 : 0.85 + 0.15 * (s & 1);\n      if (s \u003c 4) pt(x, y, 170, 172, 178);\n      else for (let w = 0, f = k; w \u003c 2; w++, f *= 0.8) k ? pt(x + w, y, 156 * f, 100 * f, 58 * f) : pt(x + w, y, 214, 184, 112);\n    }\n  }\n}\n\n// The ladle, full of batter until it pours, its handle toward the left hand.\nfunction ladle(P, { x, y, ph }) {\n  const [x0, y0, bt, full] = [round(x), round(y), BAT[P.bi][0], ph === 3 || ph === 0];\n  for (const pt of [(x, y) => dim(x + 2, y + 3, 0.55), put]) {\n    for (let j = -4; j \u003c= 4; j++)\n      for (let i = -4; i \u003c= 4; i++) {\n        const d = hypot(i, j), k = 0.8 + 0.2 * cos(atan2(j, i) + 2.3);\n        if (d > 3.7) continue;\n        if (d > 2.6) pt(x0 + i, y0 + j, 206 * k, 208 * k, 212 * k);\n        else if (full) pt(x0 + i, y0 + j, bt[0] * 0.95, bt[1] * 0.95, bt[2] * 0.95);\n        else pt(x0 + i, y0 + j, 110, 110, 116);\n      }\n    for (let s = 4; s \u003c 28; s++) pt(round(x0 - 0.5 * s), round(y0 + 0.86 * s), 184, 186, 192);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.slots) return;\n  B = P.buf;\n  B.set(P.bg);\n  iron(P);\n  plate(P);\n  const sp = P.sp, job = sp.job && sp.ph === 1 ? sp.job : null;\n  for (const s of P.slots) {\n    const k = s.cake;\n    if (!k || s === job) continue;\n    if (s.st === POUR) cake(P, k, s.x, s.y, 1, 1, 0, 0, s.rs);\n    else cake(P, k, s.x, s.y, 1, 1, s.st === SIDE2 ? 1 : 0, s.st === SIDE1 ? s.p : 1);\n  }\n  if (job) {\n    // The blade slides under the pancake, so it goes down before it.\n    turner(sp.x, sp.y, 1, 0);\n    if (job.cake && sp.mode === FLIP) {\n      const u = job.u || 0, v = cl((u - 0.3) / 0.55, 0, 1), l = sin(PI * v), up = u > 0.575;\n      if (l > 0) shadow(job.x + 1 + 2 * l, job.y + 2 + 2 * l, job.R, 1 - 0.4 * l);\n      cake(P, job.cake, job.x, job.y - 4 * l, 1 + 0.12 * l, cos(PI * v) * (1 + 0.12 * l), up ? 1 : 0, up ? 1 : job.p);\n    } else if (job.cake) cake(P, job.cake, job.x, job.y, 1, 1, 1, 1);\n    const k = P.carry;\n    if (k) {\n      shadow(k.x + 1 + 2 * k.lift, k.y + 2 + 3 * k.lift, k.R, 0.6);\n      cake(P, k, round(k.x), round(k.y - 2 * k.lift), 1 + 0.1 * k.lift, 1 + 0.1 * k.lift, 1, 1);\n    }\n    turner(sp.x, sp.y, 0, 1);\n  } else turner(sp.x, sp.y);\n  // Steam is white and thins as it rises; smoke is grey.\n  for (const [x0, y0, l, smoke] of P.steam) {\n    const [r, a, c] = smoke ? [4.5, 0.4 * l * cl((P.heat - 0.5) * 2, 0, 1), 128] : [2.6, 0.14 * l, 240];\n    for (let y = floor(y0 - r); y \u003c= y0 + r; y++)\n      for (let x = floor(x0 - r); x \u003c= x0 + r; x++) {\n        const d = hypot(x - x0, y - y0) / r;\n        if (d \u003c 1) blend(x, y, c, c - 2, c - 4, a * (1 - d));\n      }\n  }\n  ladle(P, P.ld);\n  show(display, B, P.G);\n}\n\n// To the panel through a fine grain: neighbouring LEDs lean opposite ways by\n// up to 18 levels, as the iron, the batter and the wood never lie quite flat.\nfunction show(display, buf, G) {\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const o = p * 3, r = buf[o], g = buf[o + 1], b = buf[o + 2], L = max(r, g, b, 1);\n      const f = 1 + (((x + y) & 1) * 2 - 1) * G[p] * min(17, 0.4 * L) / L;\n      display.setPixel(x, y, min(255, max(0, r * f)), min(255, max(0, g * f)), min(255, max(0, b * f)));\n    }\n}\n","layer":{"id":"layer-pancakes","type":"code","name":"pancakes","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pancakes\n// Family:  kitchen\n// Idea:    A seasoned griddle seen from above: batter is ladled into rounds, bubbles rise and pop and leave holes as the tops set, a turner flips each one to its fried side and slides the done ones onto a stack on the plate, while butter melts and oil glints on the iron.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the flat-top griddles of diner breakfast counters\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Batter=0..1, Speed=0.2..3, Pancakes=6..12, Heat=0..1\n//\n// Knob 1: Batter. Buttermilk at 0, then blueberry, buckwheat and cocoa at 1; the bowl changes at once and the next rounds are poured from it.\n// Knob 2: Speed. How fast the cook works: at 2 a pancake takes about 20 s from the ladle to the plate, and the turner flips or serves one every two seconds.\n// Knob 3: Pancakes. How many rounds are on the iron: six big ones at 6, twelve silver dollars at 12, and still one turner for all of them.\n// Knob 4: Heat. How hot the griddle runs. At the low end the pancakes come out golden; turned up they cook faster, bubble more, fry dark brown and the oil starts to smoke.\n// Buttons: K1 tap sends the turner to the pancake furthest along, to flip it or serve it now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Rows: the iron IR0..IR1, the grease trough, the butcher block from CT.\nconst [IR0, IR1, CT] = [3, 90, 94];\nconst [PX, PY, PR, BX, BY, BR] = [42, 112, 16.5, 7, 114, 12.5];\nconst [EMPTY, POUR, SIDE1, FLIP, SIDE2, SERVE] = [0, 1, 2, 3, 4, 5];\n// Pancakes to a full plate; how long the turner takes to get anywhere.\nconst [FULL, GO] = [7, 0.3];\nconst { min, max, floor, round, ceil, sin, cos, abs, hypot, exp, atan2, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = sm(x - xi), v = sm(y - yi), a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(xi + 1, yi + 1)) * u * v;\n}\n\n// Each batter: the wet top, the set top, the inside a popped bubble shows,\n// and the fried side from pale through golden to dark.\nconst BAT = [\n  [[228, 212, 166], [222, 196, 142], [64, 38, 18], [232, 194, 124], [206, 138, 66], [118, 60, 24]],\n  [[226, 212, 172], [218, 196, 148], [62, 38, 22], [228, 190, 126], [202, 134, 68], [114, 58, 26]],\n  [[196, 170, 142], [182, 152, 120], [52, 34, 24], [188, 148, 108], [150, 98, 58], [84, 46, 28]],\n  [[140, 92, 64], [124, 80, 54], [40, 24, 16], [130, 82, 54], [100, 58, 36], [68, 36, 22]],\n];\n// A blueberry's skin, raw and baked.\nconst BERRY = [[64, 40, 118], [50, 28, 70]];\nconst C = [0, 0, 0];\nfunction fry(bt, b) {\n  b = cl(b, 0, 1);\n  const lo = b \u003c 0.5, a = lo ? bt[3] : bt[4], c = lo ? bt[4] : bt[5], t = lo ? b * 2 : b * 2 - 1;\n  for (let i = 0; i \u003c 3; i++) C[i] = a[i] + (c[i] - a[i]) * t;\n}\n\nlet B;\nconst at = (x, y) => (x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, r, g, b, o = at(x, y)) {\n  if (o >= 0) (B[o] = r), (B[o + 1] = g), (B[o + 2] = b);\n}\nfunction blend(x, y, r, g, b, a, o = at(x, y)) {\n  if (o >= 0) (B[o] += (r - B[o]) * a), (B[o + 1] += (g - B[o + 1]) * a), (B[o + 2] += (b - B[o + 2]) * a);\n}\nfunction dim(x, y, k, o = at(x, y)) {\n  if (o >= 0) (B[o] *= k), (B[o + 1] *= k), (B[o + 2] *= k);\n}\n\n// Marks that should read sharp (holes, flecks, pores, glints) sit on the\n// squares the grain in show() pushes their way: dark ones where x + y is\n// even, bright ones where it is odd. Two such squares never touch side by side.\nfunction build(P) {\n  const bg = P.bg, mk = new Uint8Array(N);\n  const set = (p, r, g, b) => ((bg[p * 3] = r), (bg[p * 3 + 1] = g), (bg[p * 3 + 2] = b));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, odd = (x + y) & 1;\n    let k;\n    P.G[p] = hash(x + 77, y + 5) \u003c 0.5 ? 0.94 : 1.06;\n    if (y \u003c IR0) (k = 0.82 + 0.08 * vn(x * 0.3, y)), set(p, 170 * k, 172 * k, 178 * k);\n    else if (y \u003c= IR1) {\n      // Seasoning in bronze patches, and crumbs of old batter.\n      const s = vn(x * 0.08, y * 0.06) * 0.6 + vn(x * 0.21 + 9, y * 0.19) * 0.4;\n      k = 0.84 + 0.32 * s;\n      if (odd && rnd() \u003c 0.024) set(p, 196, 140, 70), (mk[p] = 1);\n      else set(p, (52 + 10 * s) * k, 44 * k, 39 * k);\n    } else if (y === IR1 + 1) (k = 0.92 + 0.06 * vn(x * 0.5, 1)), set(p, 200 * k, 200 * k, 204 * k);\n    else if (y === IR1 + 2) (k = 0.85 + 0.2 * vn(x * 0.25, 3)), set(p, 96 * k, 64 * k, 26 * k);\n    else if (y \u003c CT) set(p, 180, 180, 186);\n    else {\n      // Oak strips seven LEDs wide, told apart by hue more than by light,\n      // with dark pores along the grain.\n      const s = floor((x + 2) / 7), t = hash(s, 5);\n      const v = vn(x * 0.4 + s * 13, y * 0.09);\n      k = !odd && rnd() \u003c 0.12 ? 0.27 : 1;\n      set(p, (176 + 4 * v) * k, (100 + 26 * t + 20 * v) * k, (56 + 20 * t + 14 * v) * k);\n    }\n  }\n  // The hood lights' reflection, and oil specks catching it.\n  for (let p = IR0 * W; p \u003c= IR1 * W + 63; p++) {\n    const x = p & 63, y = p >> 6;\n    P.sheen[p] = exp(-(((x - 20) / 17) ** 2) - ((y - 30) / 11) ** 2) + 0.8 * exp(-(((x - 44) / 15) ** 2) - ((y - 68) / 12) ** 2);\n  }\n  P.glint = [];\n  for (let p = (IR0 + 1) * W; p \u003c IR1 * W; p++) if (!mk[p] && (p + (p >> 6)) & 1 && rnd() \u003c 0.12) P.glint.push(p, rnd() * 7, 1.5 + rnd() * 3);\n  // A white enamel bowl with a navy rolled rim; its batter follows K1.\n  P.bowl = [];\n  for (let y = BY - 16; y \u003c H; y++)\n    for (let x = 0; x \u003c= BX + 16; x++) {\n      const p = y * W + x, dx = x - BX, dy = y - BY, d = hypot(dx, dy);\n      let k;\n      if (d > BR + 3) continue;\n      if (d > BR) dx + dy > 0 && ((k = 0.9 + 0.033 * (d - BR)), set(p, bg[p * 3] * k, bg[p * 3 + 1] * k, bg[p * 3 + 2] * k));\n      else if (d > BR - 1.6) (k = 0.85 + 0.2 * cos(atan2(dy, dx) + 2.3)), set(p, 26 * k, 38 * k, 88 * k);\n      else P.bowl.push(p, !((x + y) & 1) && hash(x + 3, y) \u003c 0.12 ? -1 : 0.97 - 0.08 * sm((d - BR + 7) / 5));\n    }\n  // Charcoal stoneware: a raised rim that catches the light, the well, cream\n  // flecks in the glaze, and its shadow on the wood (a negative entry).\n  P.plate = [];\n  for (let dy = -20; dy \u003c= 20; dy++)\n    for (let dx = -20; dx \u003c= 20; dx++) {\n      const d = hypot(dx, dy), k = mix(0.86, 0.98 + 0.1 * cos(atan2(dy, dx) + 2.4), cl((d - PR + 6.5) / 4, 0, 1));\n      if (d > PR + 3 || (d > PR && dx + dy \u003c= 0)) continue;\n      if (d > PR) P.plate.push(dx, dy, -0.9 - 0.033 * (d - PR), 0, 0);\n      else if ((dx + dy) & 1 && hash(dx + 40, dy + 40) \u003c 0.1) P.plate.push(dx, dy, 206, 198, 178);\n      else P.plate.push(dx, dy, 66 * k, 72 * k, 86 * k);\n    }\n}\n\nfunction layout(P, n) {\n  const cols = n \u003c= 8 ? 2 : 3, rows = ceil(n / cols), cw = W / cols, ch = (IR1 - IR0 - 1) / rows, R = min(cw, ch) / 2 - 1.6;\n  if (P.carry) P.stack.push(P.carry), (P.carry = null);\n  P.n = n;\n  P.slots = Array.from({ length: n }, (_, i) => {\n    const x = round(((i % cols) + 0.5) * cw + (rnd() - 0.5) * 2), y = round(IR0 + 1 + (floor(i / cols) + 0.5) * ch + (rnd() - 0.5) * 2);\n    return { x, y: y + ((x + y) & 1), R, st: EMPTY, t: rnd(), melt: 0.8 + rnd() * 0.6, p: 0, cake: null };\n  });\n  P.sp.job = P.ld.job = null;\n}\n\n// A fresh round: its wobbly outline, the shine, where bubbles will come up,\n// the flecks the iron leaves on the fried side, berries.\nfunction newCake(P, s) {\n  const R = s.R, h = ceil(R * 1.08) + 1, sz = 2 * h + 1, n = sz * sz, F = () => new Float32Array(n);\n  const k = { bi: P.bi, R, h, sz, b: 0, ox: 0, oy: 0, S1: P.S1 * (0.55 + (0.45 * R) / 12.7), dd: F(), site: F(), mot: F(), hl: F(), spk: new Uint8Array(n) };\n  const [a1, a2, m0, dens] = [rnd() * 7, rnd() * 7, rnd() * 50, 0.6 + 0.25 * P.heat];\n  for (let j = -h, q = 0; j \u003c= h; j++)\n    for (let i = -h; i \u003c= h; i++, q++) {\n      const a = atan2(j, i), d = (k.dd[q] = hypot(i, j) / (R * (1 + 0.035 * sin(3 * a + a1) + 0.025 * sin(5 * a + a2))));\n      k.mot[q] = vn(i * 0.24 + m0, j * 0.24);\n      k.hl[q] = 14 * exp(-((i / R + 0.3) ** 2 + (j / R + 0.38) ** 2) * 7);\n      // Bubbles never touch even at the corners, so they never run into lines.\n      const free = (m) => j === -h || (!m[q - sz - 1] && !m[q - sz + 1]);\n      if ((i + j) & 1) continue;\n      if (P.bi === 1 && rnd() \u003c 0.07) k.spk[q] = 2;\n      else {\n        if (d \u003c 0.97 && rnd() \u003c dens && free(k.site)) k.site[q] = 0.12 + 0.88 * rnd() ** 0.6;\n        if (rnd() \u003c 0.85 * sm((k.mot[q] - 0.36) / 0.36)) k.spk[q] = 1;\n      }\n    }\n  return k;\n}\n\n// One pancake at (cx, cy), raw top or fried side up, squashed to sy as it\n// turns over and spread to rs while poured.\nfunction cake(P, k, cx, cy, sx, sy, fried, p, rs = 1, lit = 1) {\n  if (abs(sy) \u003c 0.05) return;\n  const bt = BAT[k.bi], [wet0, set0, hole] = bt, { h, sz, dd, site, spk, mot, hl, S1 } = k;\n  const ex = h * abs(sx) + 1, ey = h * abs(sy) + 1, setR = 1.02 - 1.1 * p, rim = cl(p * 1.5, 0, 1);\n  fry(bt, k.b);\n  const [fr, fg, fb] = C;\n  for (let y = max(0, floor(cy - ey)); y \u003c= min(H - 1, ceil(cy + ey)); y++)\n    for (let x = max(0, floor(cx - ex)); x \u003c= min(W - 1, ceil(cx + ex)); x++) {\n      const i = round((x - cx) / sx), j = round((y - cy) / sy);\n      if (i \u003c -h || i > h || j \u003c -h || j > h) continue;\n      const q = (j + h) * sz + i + h, d = dd[q] / rs;\n      if (d > 1) continue;\n      let r, g, b;\n      if (!fried) {\n        // Wet batter shines; it sets from the rim in, and the rim shows the\n        // browning underneath.\n        const wet = sm((setR - d) / 0.14 + 0.5), dome = 1.02 - 0.06 * d * d, gl = wet * hl[q], e = sm((d - 0.8) / 0.2) * rim;\n        r = mix(mix(set0[0], wet0[0], wet) * dome + gl, fr, e);\n        g = mix(mix(set0[1], wet0[1], wet) * dome + gl, fg, e);\n        b = mix(mix(set0[2], wet0[2], wet) * dome + gl * 0.8, fb, e);\n        const tb = site[q];\n        if (tb && p > tb) {\n          // A bubble shines for a moment and pops. Where the batter is still\n          // wet the hole closes again; where it has set it stays open.\n          const age = (p - tb) * S1;\n          if (age \u003c 0.3) (r = mix(r, 255, 0.5)), (g = mix(g, 250, 0.5)), (b = mix(b, 236, 0.5));\n          else {\n            const o = d \u003c 1.02 - 1.1 * (tb + 0.3 / S1) ? 1 - cl((age - 0.3) / 0.5, 0, 1) : 1;\n            (r = mix(r, hole[0], o)), (g = mix(g, hole[1], o)), (b = mix(b, hole[2], o));\n          }\n        }\n      } else {\n        // Browner in the middle, mottled, flecked, and pale round the edge.\n        const f = spk[q] === 1, e = sm((d - 0.88) / 0.12), s = f ? 0.45 : 1;\n        fry(bt, k.b * (1.12 - 0.42 * sm((d - 0.5) / 0.5)) * (0.86 + 0.28 * mot[q]) + (f ? 0.55 : 0));\n        r = mix(C[0] * s, set0[0] * 0.9, e);\n        g = mix(C[1] * s, set0[1] * 0.9, e);\n        b = mix(C[2] * s, set0[2] * 0.9, e);\n      }\n      if (spk[q] === 2) [r, g, b] = BERRY[fried];\n      put(x, y, r * lit, g * lit, b * lit);\n    }\n}\n\n// A small offset that keeps a pancake's flecks on the grain's dark squares.\nconst jig = (o = floor(rnd() * 3) - 1) => [o, o ? (rnd() \u003c 0.5 ? -1 : 1) : 0];\n\n// Shadows fade over three LEDs so their edge stays soft under the grain.\nfunction shadow(cx, cy, R, k) {\n  for (let y = floor(cy - R - 2); y \u003c= cy + R + 2; y++)\n    for (let x = floor(cx - R - 2); x \u003c= cx + R + 2; x++) {\n      const e = sm((hypot(x - cx, y - cy) - R + 1.5) / 3);\n      if (e \u003c 1) dim(x, y, k + (1 - k) * e);\n    }\n}\n\nexport function setup(params) {\n  const P = params, F = (n = N) => new Float32Array(n);\n  Object.assign(P, { bg: F(N * 3), buf: F(N * 3), G: F(), sheen: F(), t: 0, n: 0, stack: [], carry: null, pat: -1, pdx: 0, pdy: 0, pst: 0, spat: [], steam: [] });\n  [P.sp, P.ld] = [{ x: 70, y: 140, ph: 0, t: 0, idle: 0 }, { x: 11, y: 110, ph: 3, t: 0 }];\n  build(P);\n}\n\nconst brown = (P) => 0.36 + 0.5 * P.heat;\n\n// Open on a morning under way: some on each side, a stack started, then the\n// cook's clock runs on a while at the knob's speed.\nfunction warm(P) {\n  const S = [...P.slots].sort(() => rnd() - 0.5);\n  S.forEach((s, i) => {\n    const f = (i + 0.5) / S.length;\n    if (f \u003c 0.12) return;\n    s.cake = newCake(P, s);\n    if (f \u003c 0.6) (s.st = SIDE1), (s.t = ((f - 0.12) / 0.48) * s.cake.S1 * 0.95);\n    else (s.st = SIDE2), (s.t = (f - 0.6) * 9), (s.cake.b = brown(P));\n  });\n  for (let i = 0, n = 3 + floor(rnd() * 2); i \u003c n; i++) {\n    const k = newCake(P, { R: P.slots[0].R });\n    [k.b, k.ox, k.oy] = [brown(P), ...jig()];\n    P.stack.push(k);\n  }\n  for (let i = 0, n = round(6 * P.rate * 30); i \u003c n; i++) step(P, 1 / 30);\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06];\n  P.bi = round(cl(k[0], 0, 1) * 3);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  P.heat = cl(k[3], 0, 1);\n  P.S1 = 8 / (0.7 + 0.8 * P.heat);\n  const n = round(cl(k[2], 6, 12));\n  if (n !== P.n) layout(P, n);\n  if (!P.warm) (P.warm = true), warm(P);\n  const go = input.btnPressed?.[0] && P.slots.filter((s) => s.st === SIDE1 || s.st === SIDE2).sort((a, b) => b.p - a.p)[0];\n  if (go) go.rush = true;\n  step(P, cl(dt, 0, 0.1) * P.rate);\n}\n\nconst glide = (o, x, y, u) => ((o.x = mix(o.fx, x, u)), (o.y = mix(o.fy, y, u)));\n\nfunction step(P, d) {\n  const sp = P.sp, ld = P.ld;\n  P.t += d;\n  for (const s of P.slots) {\n    s.t += d;\n    const k = s.cake;\n    if (s.st === SIDE1) (s.p = s.t / k.S1), (k.b = brown(P) * min(1.3, s.p));\n    else if (s.st === SIDE2) s.p = s.t / (k.S1 * 0.62);\n    // Steam off the cooking ones, smoke when the iron runs too hot.\n    const puff = (f, m) => P.steam.push([s.x + (rnd() - 0.5) * s.R * f, s.y + (rnd() - 0.5) * s.R * f, 1, m]);\n    if ((s.st === SIDE2 || (s.st === SIDE1 && s.p > 0.5)) && rnd() \u003c d * 2) puff(1, 0);\n    if (s.st >= SIDE1 && rnd() \u003c d * 8 * max(0, P.heat - 0.5)) puff(2, 1);\n  }\n  // The turner goes to the most overdue pancake first.\n  if (!sp.job) {\n    let best = null, over = 0;\n    for (const s of P.slots) {\n      const o = s.st === SIDE1 || (s.st === SIDE2 && !P.pst && P.pat \u003c 0) ? s.p - 1 + (s.rush ? 99 : 0) : -1;\n      if (o >= over) (best = s), (over = o);\n    }\n    if (best) Object.assign(sp, { job: best, ph: 0, t: 0, fx: sp.x, fy: sp.y, mode: best.st === SIDE1 ? FLIP : SERVE });\n    else if ((sp.idle += d) > 0.6) (sp.x += (70 - sp.x) * min(1, d * 3)), (sp.y += (140 - sp.y) * min(1, d * 3));\n  }\n  const s = sp.job;\n  if (s) {\n    sp.t += d;\n    const y0 = s.y + s.R + 6, y1 = s.y + 0.3 * s.R;\n    if (sp.ph === 0) {\n      glide(sp, s.x, y0, sm(sp.t / GO));\n      if (sp.t >= GO) Object.assign(sp, { ph: 1, t: 0 }), Object.assign(s, { st: sp.mode, t: 0, rush: false, land: false });\n    } else if (sp.mode === FLIP) {\n      // Slide under, lift and turn it over, set it down, pull back.\n      const u = (s.u = sp.t / (0.7 * (s.R / 12.7) ** 0.5));\n      sp.x = s.x;\n      sp.y = u \u003c 0.3 ? mix(y0, y1, sm(u / 0.3)) : u \u003c 0.85 ? y1 - 3 * sin((PI * (u - 0.3)) / 0.55) : mix(y1, y0 + 2, sm((u - 0.85) / 0.15));\n      for (let i = 0, a, r, x, y; u >= 0.85 && !s.land && i \u003c 8; i++) {\n        [a, r] = [rnd() * 2 * PI, s.R + 1 + rnd() * 4];\n        [x, y] = [round(s.x + cos(a) * r), round(s.y + sin(a) * r)];\n        P.spat.push([x + 1 - ((x + y) & 1), y, 1]);\n      }\n      s.land ||= u >= 0.85;\n      if (u >= 1) Object.assign(s, { st: SIDE2, t: 0, p: 0 }), (sp.job = null), (sp.idle = 0);\n    } else {\n      // Slide under, carry it down to the plate, drop it on the stack.\n      const u = sp.t / 1.2;\n      if (u \u003c 0.25) (sp.x = s.x), (sp.y = mix(y0, y1, sm(u / 0.25)));\n      else if (u \u003c 0.85) {\n        if (!P.carry) (P.carry = s.cake), Object.assign(s, { cake: null, st: EMPTY, t: 0, melt: 0.8 + rnd() * 0.6 }), ([P.carry.ox, P.carry.oy] = jig());\n        const w = sm((u - 0.25) / 0.6), k = P.carry;\n        [k.x, k.y, k.lift] = [mix(s.x, PX + k.ox, w), mix(s.y, PY + k.oy, w), sin(PI * w)];\n        [sp.x, sp.y] = [k.x, k.y + 0.3 * s.R - 3 * k.lift];\n      } else {\n        if (P.carry) {\n          P.stack.push(P.carry);\n          P.carry = null;\n          if (P.stack.length >= FULL) P.pat = 0;\n          [sp.fx, sp.fy] = [sp.x, sp.y];\n        }\n        const w = sm((u - 0.85) / 0.15);\n        [sp.x, sp.y] = [sp.fx + 8 * w, sp.fy + 14 * w];\n      }\n      if (u >= 1) (sp.job = null), (sp.idle = 0);\n    }\n  }\n  // The ladle, from the bowl to an empty place, and back to dip again.\n  const next = !ld.job && ld.ph === 3 && P.slots.filter((s) => s.st === EMPTY && s.t > s.melt).sort((a, b) => b.t - a.t)[0];\n  if (next) Object.assign(ld, { job: next, ph: 0, t: 0, fx: ld.x, fy: ld.y });\n  const L = ld.job;\n  ld.t += d;\n  if (ld.ph === 0 && L) {\n    glide(ld, L.x - 2, L.y - 3, sm(ld.t / 0.45));\n    if (ld.t >= 0.45) Object.assign(ld, { ph: 1, t: 0 }), Object.assign(L, { st: POUR, t: 0, rs: 0.05, cake: newCake(P, L) });\n  } else if (ld.ph === 1 && L) {\n    const u = ld.t / (0.9 * (L.R / 12.7));\n    L.rs = 1 - (1 - min(1, u)) ** 2;\n    if (u >= 1) Object.assign(L, { st: SIDE1, t: 0, p: 0 }), Object.assign(ld, { ph: 2, t: 0, fx: ld.x, fy: ld.y });\n  } else if (ld.ph === 2) {\n    glide(ld, 11, 110, sm(ld.t / 0.45));\n    if (ld.t >= 0.7) (ld.ph = 3), (ld.job = null);\n  } else if (!L) Object.assign(ld, { ph: 2, t: 0.45, fx: ld.x, fy: ld.y });\n  // A full plate gets butter, goes out to the right, and a clean one comes up.\n  if (P.pat >= 0 && (P.pat += d) > 3.5 && !P.pst) P.pst = 1;\n  if (P.pst === 1 && (P.pdx += 60 * d) > 60) Object.assign(P, { stack: [], pat: -1, pdx: 0, pdy: 40, pst: 2 });\n  if (P.pst === 2 && (P.pdy -= 40 * d) \u003c= 0) (P.pdy = 0), (P.pst = 0);\n  P.spat = P.spat.filter((q) => (q[2] -= d * 0.6) > 0);\n  P.steam = P.steam.filter((q) => ((q[1] -= (q[3] ? 9 : 6) * d), (q[0] += 2.5 * d), (q[2] -= d * 0.7) > 0));\n}\n\nfunction iron(P) {\n  const { sheen, glint, t, heat } = P;\n  for (let y = IR0, p = IR0 * W; y \u003c= IR1; y++)\n    for (let x = 0, w = (0.85 + 0.15 * sin(y * 0.5 - t * 4)) * 26; x \u003c W; x++, p++) {\n      const s = sheen[p] * w;\n      B[p * 3] += s;\n      B[p * 3 + 1] += s * 0.95;\n      B[p * 3 + 2] += s * 0.86;\n    }\n  for (let i = 0; i \u003c glint.length; i += 3) {\n    const p = glint[i], tw = 0.5 + 0.5 * sin(t * glint[i + 2] * (1 + heat) + glint[i + 1]), v = 205 + 50 * (0.4 + 0.6 * sheen[p]) * tw * tw;\n    put(p & 63, p >> 6, v, v * 0.94, v * 0.8);\n  }\n  // Butter melts where the next one goes and fries round the new ones.\n  for (const s of P.slots) {\n    const m = s.st === EMPTY ? cl(s.t / s.melt, 0, 1) : s.st === POUR ? 1 : s.st === SIDE1 ? 1 - cl(s.t / 3, 0, 1) : 0;\n    if (!m) continue;\n    const pr = s.R * (s.st === EMPTY ? 0.25 + 0.6 * m : 1 + 0.25 * m), f = floor(t * 7);\n    for (let y = floor(s.y - pr); y \u003c= s.y + pr; y++)\n      for (let x = floor(s.x - pr); x \u003c= s.x + pr; x++) {\n        const d = hypot(x - s.x, y - s.y) / pr;\n        if (d > 1) continue;\n        blend(x, y, 196, 152, 60, 0.75);\n        if ((x + y) & 1 && hash(x * 3 + f, y) \u003c 0.28 * (1 - d * 0.5)) put(x, y, 248, 238, 204);\n      }\n    if (s.st === EMPTY)\n      for (let hs = 2.6 * (1 - 0.8 * m), y = round(s.y - hs); y \u003c= s.y + hs; y++) for (let x = round(s.x - hs); x \u003c= s.x + hs; x++) put(x, y, 252, 232, 140);\n  }\n  for (const [x, y, l] of P.spat) put(x, y, 120 + 130 * l, 110 + 120 * l, 90 + 90 * l);\n}\n\nfunction plate(P) {\n  const cx = PX + round(P.pdx), cy = PY + round(P.pdy), T = P.plate, st = P.stack, bt = BAT[P.bi][0], bw = P.bowl;\n  for (let i = 0; i \u003c bw.length; i += 2) {\n    const o = bw[i] * 3, k = bw[i + 1], c = k \u003c 0 && P.bi === 1 ? BERRY[0] : bt, f = k \u003c 0 ? (P.bi === 1 ? 1 : 0.95) : k;\n    [B[o], B[o + 1], B[o + 2]] = [c[0] * f, c[1] * f, c[2] * f];\n  }\n  for (let i = 0; i \u003c T.length; i += 5) T[i + 2] \u003c 0 ? dim(cx + T[i], cy + T[i + 1], -T[i + 2]) : put(cx + T[i], cy + T[i + 1], T[i + 2], T[i + 3], T[i + 4]);\n  if (!st.length) return;\n  shadow(cx + st[0].ox + 1 + 0.4 * st.length, cy + st[0].oy + 1 + 0.4 * st.length, st[0].R, 0.82);\n  st.forEach((k, i) => cake(P, k, cx + k.ox, cy + k.oy, 1, 1, 1, 1, 1, 0.9 ** (st.length - 1 - i)));\n  if (P.pat \u003c 0) return;\n  // The butter pat on top, melting into a glossy pool.\n  const top = st[st.length - 1], bx = cx + top.ox + 1, by = cy + top.oy - 1, m = cl(P.pat / 3, 0, 1), pr = 2 + 4.5 * m, hs = 2.4 * (1 - 0.75 * m);\n  for (let y = floor(by - pr); y \u003c= by + pr; y++)\n    for (let x = floor(bx - pr); x \u003c= bx + pr; x++) {\n      const d = hypot(x - bx, y - by) / pr, e = x - bx >= hs - 1 || y - by >= hs - 1;\n      if (d \u003c 1) blend(x, y, 252, 222, 124, 0.55 * (1 - d * d));\n      if (abs(x - bx) \u003c= hs && abs(y - by) \u003c= hs) put(x, y, e ? 222 : 252, e ? 198 : 238, e ? 112 : 160);\n    }\n}\n\n// The turner: a slotted steel blade, its edge up the panel, and a wooden\n// handle toward the cook's right hand. Its shadow goes down first.\nfunction turner(x, y, blade = 1, grip = 1) {\n  const [x0, y0] = [round(x), round(y)];\n  for (const pt of [(x, y) => dim(x + 2, y + 3, 0.55), put]) {\n    for (let j = -5; blade && j \u003c= 5; j++)\n      for (let i = -4; i \u003c= 4; i++) {\n        const k = j === -4 ? 1.1 : 0.9 + 0.01 * j, ai = abs(i);\n        if (j === -5 && ai === 4) continue;\n        if (ai === 4 || abs(j) === 5 || (j === -4 && ai === 3)) pt(x0 + i, y0 + j, 64, 64, 70);\n        else if (!(i & 1) && ai \u003c 3 && abs(j) \u003c 3) pt(x0 + i, y0 + j, 40, 38, 38);\n        else pt(x0 + i, y0 + j, 200 * k, 202 * k, 208 * k);\n      }\n    for (let s = 0; grip && s \u003c 24; s++) {\n      const x = round(x0 + 0.42 * s), y = y0 + 6 + s, k = s === 9 || s === 17 ? 0 : 0.85 + 0.15 * (s & 1);\n      if (s \u003c 4) pt(x, y, 170, 172, 178);\n      else for (let w = 0, f = k; w \u003c 2; w++, f *= 0.8) k ? pt(x + w, y, 156 * f, 100 * f, 58 * f) : pt(x + w, y, 214, 184, 112);\n    }\n  }\n}\n\n// The ladle, full of batter until it pours, its handle toward the left hand.\nfunction ladle(P, { x, y, ph }) {\n  const [x0, y0, bt, full] = [round(x), round(y), BAT[P.bi][0], ph === 3 || ph === 0];\n  for (const pt of [(x, y) => dim(x + 2, y + 3, 0.55), put]) {\n    for (let j = -4; j \u003c= 4; j++)\n      for (let i = -4; i \u003c= 4; i++) {\n        const d = hypot(i, j), k = 0.8 + 0.2 * cos(atan2(j, i) + 2.3);\n        if (d > 3.7) continue;\n        if (d > 2.6) pt(x0 + i, y0 + j, 206 * k, 208 * k, 212 * k);\n        else if (full) pt(x0 + i, y0 + j, bt[0] * 0.95, bt[1] * 0.95, bt[2] * 0.95);\n        else pt(x0 + i, y0 + j, 110, 110, 116);\n      }\n    for (let s = 4; s \u003c 28; s++) pt(round(x0 - 0.5 * s), round(y0 + 0.86 * s), 184, 186, 192);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.slots) return;\n  B = P.buf;\n  B.set(P.bg);\n  iron(P);\n  plate(P);\n  const sp = P.sp, job = sp.job && sp.ph === 1 ? sp.job : null;\n  for (const s of P.slots) {\n    const k = s.cake;\n    if (!k || s === job) continue;\n    if (s.st === POUR) cake(P, k, s.x, s.y, 1, 1, 0, 0, s.rs);\n    else cake(P, k, s.x, s.y, 1, 1, s.st === SIDE2 ? 1 : 0, s.st === SIDE1 ? s.p : 1);\n  }\n  if (job) {\n    // The blade slides under the pancake, so it goes down before it.\n    turner(sp.x, sp.y, 1, 0);\n    if (job.cake && sp.mode === FLIP) {\n      const u = job.u || 0, v = cl((u - 0.3) / 0.55, 0, 1), l = sin(PI * v), up = u > 0.575;\n      if (l > 0) shadow(job.x + 1 + 2 * l, job.y + 2 + 2 * l, job.R, 1 - 0.4 * l);\n      cake(P, job.cake, job.x, job.y - 4 * l, 1 + 0.12 * l, cos(PI * v) * (1 + 0.12 * l), up ? 1 : 0, up ? 1 : job.p);\n    } else if (job.cake) cake(P, job.cake, job.x, job.y, 1, 1, 1, 1);\n    const k = P.carry;\n    if (k) {\n      shadow(k.x + 1 + 2 * k.lift, k.y + 2 + 3 * k.lift, k.R, 0.6);\n      cake(P, k, round(k.x), round(k.y - 2 * k.lift), 1 + 0.1 * k.lift, 1 + 0.1 * k.lift, 1, 1);\n    }\n    turner(sp.x, sp.y, 0, 1);\n  } else turner(sp.x, sp.y);\n  // Steam is white and thins as it rises; smoke is grey.\n  for (const [x0, y0, l, smoke] of P.steam) {\n    const [r, a, c] = smoke ? [4.5, 0.4 * l * cl((P.heat - 0.5) * 2, 0, 1), 128] : [2.6, 0.14 * l, 240];\n    for (let y = floor(y0 - r); y \u003c= y0 + r; y++)\n      for (let x = floor(x0 - r); x \u003c= x0 + r; x++) {\n        const d = hypot(x - x0, y - y0) / r;\n        if (d \u003c 1) blend(x, y, c, c - 2, c - 4, a * (1 - d));\n      }\n  }\n  ladle(P, P.ld);\n  show(display, B, P.G);\n}\n\n// To the panel through a fine grain: neighbouring LEDs lean opposite ways by\n// up to 18 levels, as the iron, the batter and the wood never lie quite flat.\nfunction show(display, buf, G) {\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const o = p * 3, r = buf[o], g = buf[o + 1], b = buf[o + 2], L = max(r, g, b, 1);\n      const f = 1 + (((x + y) & 1) * 2 - 1) * G[p] * min(17, 0.4 * L) / L;\n      display.setPixel(x, y, min(255, max(0, r * f)), min(255, max(0, g * f)), min(255, max(0, b * f)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Batter=0..1, Speed=0.2..3, Pancakes=6..12, Heat=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Batter","min":0,"max":1,"about":"Buttermilk at 0, then blueberry, buckwheat and cocoa at 1; the bowl changes at once and the next rounds are poured from it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the cook works: at 2 a pancake takes about 20 s from the ladle to the plate, and the turner flips or serves one every two seconds."},{"name":"Pancakes","min":6,"max":12,"about":"How many rounds are on the iron: six big ones at 6, twelve silver dollars at 12, and still one turner for all of them."},{"name":"Heat","min":0,"max":1,"about":"How hot the griddle runs. At the low end the pancakes come out golden; turned up they cook faster, bubble more, fry dark brown and the oil starts to smoke."}],"start":[0,2,6,0.06],"measures":{"motion":0.2802,"detail":0.2275,"edges":0.2381,"complexity":2.2758,"coverage":0.9979,"colour":0.2408,"drift":0.1011},"knobResponse":[0.1406,0.1266,0.1876,0.1386]},{"slug":"paternoster","title":"Paternoster","family":"machine","round":19,"note":"옛 사무실 건물의 파테르노스터를 기계실에서 피트까지 잘라 보여요. 나무 칸들이 오른쪽으로 오르고 왼쪽으로 내려오며 꼭대기와 바닥의 사슬 바퀴를 넘어가고, 층마다 사람이 지나가는 칸에 올라타고 내려요.","idea":"A paternoster lift in an old office building, cut open from the machine room to the pit: open wooden cabins climb the right shaft and sink down the left on one endless chain, cross over the chain wheels at the top and the bottom, and office workers step in and out as the cabins pass their floor.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Paternoster\n// Family:  machine\n// Idea:    A paternoster lift in an old office building, cut open from the machine room to the pit: open wooden cabins climb the right shaft and sink down the left on one endless chain, cross over the chain wheels at the top and the bottom, and office workers step in and out as the cabins pass their floor.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the paternoster lifts of European office buildings, cabins on a chain that never stops\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Floors=3..6, Busy=0..1\n//\n// Knob 1: Light. The building's lamps, from warm bulbs hanging in each corridor and cabin at 0 to cold fluorescent tubes at 1, with the colour of every wall, cabin and coat under them.\n// Knob 2: Speed. How fast the building runs: at 2 the chain moves 0.35 m/s, as a real paternoster does, and a cabin passes each floor every ten seconds; at 0.2 ten times slower, at 3 half as fast again.\n// Knob 3: Floors. Three to six floors between the machine room and the pit; more floors make the storeys, the cabins and the people smaller and put more cabins on the chain.\n// Knob 4: Busy. How many people come out of the offices to ride: one every three seconds or so in the whole building at 0, a crowd of five at every opening and two in every cabin at 1. One in eight stays on and rides round over the top or under the bottom.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Two shafts side by side: cabins go up on the right, down on the left. A cabin is 15 LEDs\n// wide on a centre line 9 LEDs from the middle, and the chain wheels have that radius.\nconst XC = 32;\nconst R = 9;\nconst XL = XC - R;\nconst XR = XC + R;\nconst HALF = 7;\n// The walls between the corridors and the shafts, with an opening on each floor.\nconst WALL_L = 14;\nconst WALL_R = 49;\n// A storey is 3.5 m; the chain runs at V m/s at Speed 2 and people walk at WALK m/s.\nconst V = 0.35;\nconst WALK = 0.75;\n// A cabin carries two people. They step in or out within WIN of a storey of the floor level.\nconst SEATS = 2;\nconst WIN = 0.12;\nconst STEP = 0.55;\n// People waiting, riding or walking: at most this many in the building.\nconst MAX = 56;\n// Where the people waiting at an opening stand, from the front of the line, in the left\n// corridor; the right one is its mirror.\nconst SPOTS = [11, 6, 8, 3, 1];\nconst WALKIN = 0;\nconst RIDE = 1;\nconst BOARD = 2;\nconst ALIGHT = 3;\nconst WALKOUT = 4;\n\nconst COATS = [[34, 44, 90], [70, 70, 78], [112, 70, 44], [150, 36, 48], [36, 84, 60], [206, 184, 132], [236, 236, 230], [26, 26, 30], [70, 120, 170]];\nconst LEGS = [[44, 44, 50], [30, 36, 70], [24, 24, 28], [90, 66, 46], [150, 140, 128]];\nconst SKIN = [[226, 176, 140], [170, 116, 84], [120, 80, 56], [240, 196, 164]];\nconst HAIR = [[30, 24, 20], [96, 62, 34], [210, 180, 110], [150, 150, 150], [70, 40, 30]];\nconst HAT = [[60, 44, 34], [36, 36, 40], [110, 100, 84]];\n// Floor numbers painted on the corridor walls, 3 by 5.\nconst DIGIT = [\"010110010010111\", \"111001111100111\", \"111001011001111\", \"101101111001001\", \"111100111001111\", \"111100111101111\"];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction mix(a, b, t) {\n  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\n// The building for a number of floors: storey height S, cabin height CH, floor levels\n// (the row people stand on is one above), and the chain's straight runs and length.\nfunction geometry(F) {\n  const S = Math.floor(107 / (F + 1.44));\n  const CH = Math.round(0.72 * S);\n  const top = Math.floor((126 - F * S - 2 * CH - 2 * R) / 2);\n  const Lt = top + S + R + CH;\n  const L = [];\n  for (let i = 0; i \u003c F; i++) L[i] = Lt + (F - 1 - i) * S;\n  // A cabin's floor runs between fTop, where the whole cabin is up in the machine room,\n  // and fBot, where it is down in the pit.\n  const fTop = Lt - S - 2;\n  const fBot = L[0] + CH;\n  const Ls = fBot - fTop;\n  const len = 2 * Ls + 2 * Math.PI * R;\n  const pitch = Math.max(CH + Math.max(3, Math.round(0.3 * S)), 17);\n  const nc = Math.round(len / pitch);\n  return { F, S, CH, Lt, L, fTop, fBot, Ls, len, nc, pitch: len / nc, hp: Math.max(7, Math.round(0.54 * S)), wp: S >= 19 ? 4 : 3, door: Math.round(0.62 * S) };\n}\n\n// Where the chain puts a cabin s rows along it: centre column, floor row and which run:\n// 0 up the right shaft, 1 over the top wheel, 2 down the left shaft, 3 under the bottom wheel.\nfunction pathAt(G, s, out) {\n  s = ((s % G.len) + G.len) % G.len;\n  const arc = Math.PI * R;\n  if (s \u003c G.Ls) {\n    out.cx = XR;\n    out.f = G.fBot - s;\n    out.seg = 0;\n  } else if ((s -= G.Ls) \u003c arc) {\n    out.cx = XC + R * Math.cos(s / R);\n    out.f = G.fTop - R * Math.sin(s / R);\n    out.seg = 1;\n  } else if ((s -= arc) \u003c G.Ls) {\n    out.cx = XL;\n    out.f = G.fTop + s;\n    out.seg = 2;\n  } else {\n    s -= G.Ls;\n    out.cx = XC - R * Math.cos(s / R);\n    out.f = G.fBot + R * Math.sin(s / R);\n    out.seg = 3;\n  }\n}\n\n// The lamps: warm bulbs at 0, a plain white at 0.5, fluorescent at 1.\nfunction lampColour(k) {\n  return k \u003c 0.5 ? mix([255, 192, 120], [255, 240, 218], k * 2) : mix([255, 240, 218], [206, 232, 255], k * 2 - 1);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.bg = new Float32Array(N * 3);\n  P.kind = new Uint8Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.glow = [new Float32Array(H), new Float32Array(H)];\n  P.cab = [];\n  P.pos = { cx: 0, f: 0, seg: 0 };\n  P.t = 0;\n  P.F = -1;\n  P.lightKey = -1;\n}\n\nfunction build(P, F) {\n  P.F = F;\n  P.G = geometry(F);\n  P.s = 0;\n  P.people = [];\n  P.doors = new Float32Array(F * 2);\n  P.cab = [];\n  for (let c = 0; c \u003c P.G.nc; c++) P.cab.push({ cx: 0, f: 0, seg: 0, n: 0 });\n  P.lightKey = -1;\n}\n\n// Each corridor sends people to the lift: side 0 is the left corridor, which rides down,\n// side 1 the right one, which rides up. Someone with nowhere to go that way, or one in\n// eight of the rest, stays on over the top or under the bottom and gets out the other side.\nfunction spawn(P, i, side) {\n  const G = P.G;\n  const dead = side === 1 ? i === G.F - 1 : i === 0;\n  const over = dead || Math.random() \u003c 0.12;\n  let dest;\n  if (!over) dest = side === 1 ? i + 1 + Math.floor(Math.random() * (G.F - 1 - i)) : Math.floor(Math.random() * i);\n  else dest = Math.floor(Math.random() * G.F);\n  P.doors[i * 2 + side] = P.t + 2;\n  P.people.push({\n    st: WALKIN,\n    fl: i,\n    side,\n    x: side === 0 ? 3 : 60,\n    feet: G.L[i] - 1,\n    dest,\n    exit: over ? 1 - side : side,\n    cab: -1,\n    slot: 0,\n    t0: 0,\n    x0: 0,\n    y0: 0,\n    coat: pick(COATS),\n    legs: Math.random() \u003c 0.25 ? null : pick(LEGS),\n    skin: pick(SKIN),\n    hair: pick(HAIR),\n    hat: Math.random() \u003c 0.3 ? pick(HAT) : null,\n    bag: Math.random() \u003c 0.35,\n    ph: Math.random() * 6,\n  });\n}\n\nfunction waiting(people, i, side) {\n  let n = 0;\n  for (const p of people) if (p.st === WALKIN && p.fl === i && p.side === side) n++;\n  return n;\n}\n\nfunction ease(u) {\n  u = clamp(u, 0, 1);\n  return u * u * (3 - 2 * u);\n}\n\nfunction step(P, dt, busy) {\n  const G = P.G;\n  P.t += dt;\n  P.s += (V / 3.5) * G.S * dt;\n  for (let c = 0; c \u003c G.nc; c++) {\n    pathAt(G, P.s + c * G.pitch, P.pos);\n    const k = P.cab[c];\n    k.cx = P.pos.cx;\n    k.f = P.pos.f;\n    k.seg = P.pos.seg;\n    k.n = 0;\n  }\n  const people = P.people;\n  for (const p of people) if (p.cab >= 0) P.cab[p.cab].n++;\n  // New people come out of the office doors.\n  const rate = 0.06 + 0.9 * busy * busy;\n  // A quiet building has two waiting at an opening at most; a busy one a crowd of five.\n  const cap = 2 + Math.round(3 * busy);\n  for (let i = 0; i \u003c G.F; i++)\n    for (let side = 0; side \u003c 2; side++) {\n      const dead = side === 1 ? i === G.F - 1 : i === 0;\n      if (people.length \u003c MAX && Math.random() \u003c rate * dt * (dead ? 0.15 : 1) && waiting(people, i, side) \u003c cap) spawn(P, i, side);\n    }\n  const walk = (WALK / 3.5) * G.S * dt;\n  const win = WIN * G.S;\n  const queue = {};\n  for (let n = 0; n \u003c people.length; n++) {\n    const p = people[n];\n    if (p.st === WALKIN) {\n      // Line up at the opening behind whoever came first.\n      const key = p.fl * 2 + p.side;\n      const q = queue[key] || 0;\n      queue[key] = q + 1;\n      // Two at the front, the rest a step behind them.\n      const sx = SPOTS[Math.min(q, SPOTS.length - 1)];\n      const spot = p.side === 0 ? sx : W - 1 - sx;\n      p.back = q >= 2 && q \u003c 4;\n      p.feet = G.L[p.fl] - (p.back ? 2 : 1);\n      const d = spot - p.x;\n      p.walking = Math.abs(d) > 0.3;\n      p.x += clamp(d, -walk, walk);\n      // The first two in line can step into the same cabin side by side.\n      if (q \u003c SEATS && !p.walking) {\n        const want = p.side === 1 ? 0 : 2;\n        for (let c = 0; c \u003c G.nc; c++) {\n          const k = P.cab[c];\n          if (k.seg !== want || k.n >= SEATS) continue;\n          // Step in while the cabin floor is coming level, not once it is past.\n          const off = (k.f - G.L[p.fl]) * (want === 0 ? 1 : -1);\n          if (off > win || off \u003c -0.3 * win) continue;\n          const taken = people.some((o) => o.cab === c && o.slot === 0);\n          p.slot = taken ? 1 : 0;\n          p.cab = c;\n          p.st = BOARD;\n          p.t0 = P.t;\n          p.x0 = p.x;\n          p.y0 = p.feet;\n          k.n++;\n          break;\n        }\n      }\n    } else if (p.st === BOARD || p.st === RIDE) {\n      const k = P.cab[p.cab];\n      const sx = k.cx + (p.slot ? 3 : -3);\n      if (p.st === BOARD) {\n        const u = ease((P.t - p.t0) / STEP);\n        p.x = p.x0 + (sx - p.x0) * u;\n        p.feet = p.y0 + (k.f - 1 - p.y0) * u;\n        p.walking = u \u003c 1;\n        if (u >= 1) p.st = RIDE;\n      } else {\n        p.x = sx;\n        p.feet = k.f - 1;\n        p.walking = false;\n        const want = p.exit === 1 ? 0 : 2;\n        if (k.seg === want && Math.abs(k.f - G.L[p.dest]) \u003c 0.6 * win) {\n          p.st = ALIGHT;\n          p.t0 = P.t;\n          p.x0 = p.x;\n          p.y0 = p.feet;\n          p.side = p.exit;\n          p.fl = p.dest;\n          p.cab = -1;\n        }\n      }\n    } else if (p.st === ALIGHT) {\n      const u = ease((P.t - p.t0) / STEP);\n      const ex = p.side === 0 ? WALL_L - 2 : WALL_R + 3;\n      p.x = p.x0 + (ex - p.x0) * u;\n      p.feet = p.y0 + (G.L[p.fl] - 1 - p.y0) * u;\n      p.walking = true;\n      if (u >= 1) p.st = WALKOUT;\n    } else {\n      const door = p.side === 0 ? 3 : 60;\n      p.x += clamp(door - p.x, -walk, walk);\n      p.walking = true;\n      if (Math.abs(door - p.x) \u003c 2) P.doors[p.fl * 2 + p.side] = P.t + 1.5;\n      if (Math.abs(door - p.x) \u003c 0.3) p.gone = true;\n    }\n  }\n  if (people.some((p) => p.gone)) P.people = people.filter((p) => !p.gone);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.light = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const F = Math.round(clamp(k[2], 3, 6));\n  const busy = clamp(k[3], 0, 1);\n  if (F !== P.F) {\n    // A new building: the chain has been running a while and people are about.\n    build(P, F);\n    P.s = Math.random() * P.G.len;\n    for (let i = 0; i \u003c 300; i++) step(P, 0.1, busy);\n    // Then three more seconds at the knob's pace, so Speed shows from the start.\n    for (let i = 0; i \u003c 30; i++) step(P, 0.05 * speed, busy);\n  }\n  step(P, (dt * speed) / 2, busy);\n}\n\n// The building behind the cabins, lit by the lamps: machine room, storeys, slabs, shaft\n// walls with an opening on each floor, the column between the shafts, the pit.\nfunction background(P) {\n  const G = P.G;\n  const lc = lampColour(P.light).map((v) => v / 255);\n  const tube = P.light;\n  const bg = P.bg;\n  const kind = P.kind;\n  const roomFloor = G.Lt - G.S;\n  const pitTop = G.L[0] + 2;\n  for (let y = 0; y \u003c H; y++) {\n    // Which storey this row is in (0 at the bottom), or -1 in a slab, machine room or pit.\n    let st = -1;\n    let slab = false;\n    let level = 0;\n    if (y >= roomFloor && y \u003c pitTop) {\n      const k = Math.floor((G.L[0] + 1 - y) / G.S);\n      const i = clamp(k, 0, G.F - 1);\n      const r = G.L[0] - i * G.S - y;\n      if (r \u003c= 0 && r >= -1) slab = true;\n      else if (y \u003c roomFloor + 2) slab = true;\n      else {\n        st = r > 0 ? i : i - 1;\n        level = G.L[st];\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let c;\n      let k = 0;\n      const shaft = (x > WALL_L && x \u003c 31) || (x > 33 && x \u003c WALL_R);\n      const inShafts = y >= roomFloor && y \u003c pitTop;\n      if (y \u003c roomFloor) {\n        // Machine room: dark walls, a caged bulb on the left.\n        const d = Math.hypot(x - 6, y - 4);\n        const l = 0.5 + 1.6 / (1 + (d * d) / 60);\n        c = [30 * l, 32 * l, 40 * l];\n        if (d \u003c 1.2) c = [255, 214, 150];\n        // The motor on the right, with its drive wheel.\n        if (x >= 52 && x \u003c= 61 && y >= roomFloor - 7 && y \u003c roomFloor) c = y === roomFloor - 7 ? [80, 96, 86] : [52, 70, 62];\n        const my = roomFloor - 11;\n        if (Math.abs(Math.hypot(x - 56.5, y - my) - 2.8) \u003c 0.6) c = [96, 100, 108];\n        // Its belt runs to the axle of the top chain wheel.\n        const wy = G.fTop - (G.CH - 2) / 2;\n        if (x > XC && x \u003c 56 && (Math.abs(y - (my - 2.8 + ((wy - 1.5 - my + 2.8) * (56.5 - x)) / (56.5 - XC))) \u003c 0.5 || Math.abs(y - (my + 2.8 + ((wy + 1.5 - my - 2.8) * (56.5 - x)) / (56.5 - XC))) \u003c 0.5)) c = [62, 56, 52];\n      } else if (y >= pitTop) {\n        // The pit: bare concrete and an iron ladder.\n        const l = 0.75 - 0.3 * ((y - pitTop) / Math.max(1, H - pitTop));\n        c = [44 * l, 44 * l, 50 * l];\n        if ((x === 3 || x === 7) && y \u003c H - 1) c = [70, 60, 50];\n        if (x > 3 && x \u003c 7 && (y - pitTop) % 4 === 2) c = [70, 60, 50];\n      } else if (inShafts && shaft) {\n        // Shaft back wall, brick, lit by the cabins going by.\n        const mortar = y % 3 === 0 || (x + (Math.floor(y / 3) % 2) * 3) % 6 === 0;\n        c = mortar ? [40, 36, 36] : [92, 64, 52];\n        k = x \u003c XC ? 1 : 2;\n      } else if (inShafts && x >= 31 && x \u003c= 33) {\n        // The steel column between the shafts.\n        c = x === 32 ? [70, 78, 96] : [44, 50, 62];\n        if (x === 32 && y % 5 === 0) c = [120, 126, 140];\n      } else if (slab) {\n        c = y === roomFloor || (y > roomFloor && (G.L.includes(y) || y === pitTop - 2)) ? [150, 128, 104] : [96, 94, 92];\n      } else if (x === WALL_L || x === WALL_R) {\n        // The corridor walls by the shafts, open on each floor.\n        const open = st >= 0 && y >= level - G.door;\n        c = open ? [26, 22, 22] : [120, 124, 112];\n      } else {\n        // A corridor: cream wall, a band of green tiles, the office door and the floor's number.\n        const left = x \u003c WALL_L;\n        const cx = left ? 6 : 57;\n        const ty = level - G.S + 2;\n        const h = level - y;\n        const dx = x - cx;\n        const dy = y - ty;\n        const pool = 1 / (1 + (dx * dx + dy * dy) / (40 + 260 * tube));\n        const l = (0.42 + 0.3 * tube) + (0.85 - 0.25 * tube) * pool;\n        if (h \u003c= Math.round(0.36 * G.S)) c = x % 3 === 0 || h % 3 === 0 ? [40, 96, 74] : [64, 142, 108];\n        else c = [228, 214, 184];\n        const door = left ? x >= 0 && x \u003c= 3 : x >= 60;\n        if (door && h \u003c= G.door) c = h > G.door - Math.round(G.door * 0.4) && (left ? x >= 1 && x \u003c= 2 : x >= 61 && x \u003c= 62) ? [255, 228, 170] : [100, 60, 36];\n        // The number, beside the opening at the top of the storey.\n        const nx = left ? 9 : 52;\n        const ny = ty + 2;\n        if (x >= nx && x \u003c nx + 3 && y >= ny && y \u003c ny + 5 && DIGIT[Math.min(st, 5)][(y - ny) * 3 + x - nx] === \"1\") c = [40, 40, 64];\n        c = [c[0] * l, c[1] * l, c[2] * l];\n        // The lamp under the slab: a bulb on its cord, or a tube that grows with the Light knob.\n        const bulb = tube \u003c 0.5;\n        if (y === ty + (bulb ? 1 : 0) && Math.abs(dx) \u003c= 0.6 + 3.4 * tube) c = [255, 255, 255];\n        if (bulb && y === ty && dx === 0) c = [90, 90, 90];\n      }\n      // The corridors are under the building's lamps; the machine room and the pit have their\n      // own bulb, and the shaft walls are lit by the cabins as they pass.\n      const m = k || y \u003c roomFloor || y >= pitTop ? [1, 1, 1] : lc;\n      bg[o] = c[0] * m[0];\n      bg[o + 1] = c[1] * m[1];\n      bg[o + 2] = c[2] * m[2];\n      kind[p] = k;\n    }\n  }\n}\n\nfunction put(buf, x, y, c, m) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = c[0] * m[0];\n  buf[o + 1] = c[1] * m[1];\n  buf[o + 2] = c[2] * m[2];\n}\n\n// One cabin: roof, posts, varnished panelling lit from the lamp under the roof, a brass\n// handrail, the floor with its brass edge.\nfunction cabin(P, buf, k, lc) {\n  const G = P.G;\n  const x0 = Math.round(k.cx) - HALF;\n  const f = Math.round(k.f);\n  const top = f - G.CH + 2;\n  const rail = top + Math.round(G.CH * 0.55);\n  const tube = P.light;\n  for (let y = top; y \u003c= f + 1; y++) {\n    if (y \u003c 0 || y >= H) continue;\n    const dy = y - top - 2;\n    for (let i = 0; i \u003c= 2 * HALF; i++) {\n      const x = x0 + i;\n      let c;\n      let m = lc;\n      // The lamp's light on the panelling: a pool under a bulb, even under a tube.\n      const d2 = (i - HALF) * (i - HALF) + dy * dy * 1.6;\n      const l = (0.42 + 0.3 * tube) + (0.85 - 0.3 * tube) / (1 + d2 / (14 + 60 * tube));\n      if (y === top) c = [44, 30, 24];\n      else if (y === top + 1) c = [74, 48, 32];\n      else if (y === f) c = [200, 154, 72];\n      else if (y === f + 1) c = [40, 32, 28];\n      else if (i === 0 || i === 2 * HALF) c = [134, 86, 48];\n      else if (y === top + 2 && Math.abs(i - HALF) \u003c= 0.6 + 3.4 * tube) {\n        c = [255, 255, 255];\n        m = [1, 1, 1];\n      } else if (i \u003c= 2 || i >= 2 * HALF - 2) c = [96 * l, 58 * l, 34 * l];\n      else if (y === rail) c = [190 * l, 146 * l, 66 * l];\n      else {\n        const seam = (i - 3) % 4 === 3 ? 0.72 : 1;\n        c = [172 * l * seam, 98 * l * seam, 54 * l * seam];\n      }\n      put(buf, x, y, c, m);\n    }\n  }\n}\n\nfunction person(P, buf, p, m) {\n  const G = P.G;\n  const h = G.hp;\n  const x = Math.round(p.x);\n  const feet = Math.round(p.feet);\n  const face = h >= 10 ? 2 : 1;\n  const torso = Math.round((h - 2 - face) * 0.5);\n  const legs = h - 2 - face - torso;\n  const l0 = G.wp === 4 ? -2 : -1;\n  const stride = p.walking && Math.floor(P.t * 5 + p.ph) % 2 === 0;\n  let y = feet;\n  // Shoes and legs, together standing and apart in mid stride; a skirt over stockings.\n  for (let r = 0; r \u003c= legs; r++, y--) {\n    const skirt = !p.legs && r >= legs - 1 && r > 0;\n    const c = r === 0 ? [28, 24, 22] : skirt ? p.coat : p.legs || p.skin;\n    if (skirt) for (let i = l0; i \u003c= 1; i++) put(buf, x + i, y, c, m);\n    else if (stride && r \u003c legs) {\n      put(buf, x + l0, y, c, m);\n      put(buf, x + 1, y, c, m);\n    } else {\n      put(buf, x - 1, y, c, m);\n      put(buf, x, y, c, m);\n    }\n  }\n  for (let r = 0; r \u003c torso; r++, y--) for (let i = l0; i \u003c= 1; i++) put(buf, x + i, y, p.coat, m);\n  if (p.bag) {\n    const bx = p.side === 0 ? x + 2 : x + l0 - 1;\n    put(buf, bx, feet - legs + 1, [120, 72, 36], m);\n    put(buf, bx, feet - legs + 2, [120, 72, 36], m);\n  }\n  for (let r = 0; r \u003c face; r++, y--) {\n    put(buf, x - 1, y, p.skin, m);\n    put(buf, x, y, p.skin, m);\n  }\n  const top = p.hat || p.hair;\n  put(buf, x - 1, y, top, m);\n  put(buf, x, y, top, m);\n  if (p.hat) {\n    put(buf, x - 2, y + 1, p.hat, m);\n    put(buf, x + 1, y + 1, p.hat, m);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const G = P.G;\n  if (P.lightKey !== P.light) {\n    P.lightKey = P.light;\n    background(P);\n  }\n  const lc = lampColour(P.light).map((v) => v / 255);\n  const buf = P.buf;\n  buf.set(P.bg);\n  // Cabin light spills on to the shaft walls above and below each cabin.\n  for (let side = 0; side \u003c 2; side++) {\n    const g = P.glow[side];\n    g.fill(0.32);\n    for (const k of P.cab) {\n      if (k.seg !== (side ? 0 : 2)) continue;\n      const f = Math.round(k.f);\n      const top = f - G.CH + 2;\n      for (let d = 1; d \u003c= 8; d++) {\n        const v = 0.32 + 0.75 * Math.exp(-d / 2.5);\n        if (top - d >= 0) g[top - d] = Math.max(g[top - d], v);\n        if (f + 1 + d \u003c H) g[f + 1 + d] = Math.max(g[f + 1 + d], 0.32 + 0.4 * Math.exp(-d / 2));\n      }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const k = P.kind[p];\n    if (!k) continue;\n    const g = P.glow[k - 1][Math.floor(p / W)];\n    const o = p * 3;\n    buf[o] *= g * lc[0];\n    buf[o + 1] *= g * lc[1];\n    buf[o + 2] *= g * lc[2];\n  }\n  // The chain along the cabins' middle line, links moving with it, and the two wheels.\n  const mid = (G.CH - 2) / 2;\n  const pos = P.pos;\n  for (let s = 0; s \u003c G.len; s += 0.7) {\n    pathAt(G, s, pos);\n    const link = Math.floor((s - P.s) / 2) & 1;\n    const x = Math.round(pos.cx);\n    const y = Math.round(pos.f - mid);\n    put(buf, x, y, link ? [150, 150, 160] : [70, 70, 80], [1, 1, 1]);\n  }\n  for (const [wy, dir] of [[G.fTop - mid, 1], [G.fBot - mid, -1]]) {\n    const a0 = (dir * P.s) / R;\n    for (let sp = 0; sp \u003c 6; sp++) {\n      const a = a0 + (sp * Math.PI) / 3;\n      for (let r = 1; r \u003c R - 1; r += 0.7) put(buf, Math.round(XC + r * Math.cos(a)), Math.round(wy - r * Math.sin(a)), [96, 100, 112], [1, 1, 1]);\n    }\n    for (let a = 0; a \u003c 6.3; a += 0.12) put(buf, Math.round(XC + (R - 1) * Math.cos(a)), Math.round(wy + (R - 1) * Math.sin(a)), [120, 124, 136], [1, 1, 1]);\n    put(buf, XC, Math.round(wy), [190, 190, 200], [1, 1, 1]);\n  }\n  // An office door stands open while someone comes out or goes in, and the office shows.\n  for (let i = 0; i \u003c G.F; i++)\n    for (let side = 0; side \u003c 2; side++) {\n      if (P.doors[i * 2 + side] \u003c= P.t) continue;\n      const L = G.L[i];\n      // Office light spills out across the corridor floor and wall beside the door.\n      for (let y = L - G.door; y \u003c L; y++)\n        for (let j = 5; j \u003c 13; j++) {\n          const o = (y * W + (side === 0 ? j : W - 1 - j)) * 3;\n          const g = 1 + 0.9 * Math.exp(-(j - 5) / 4) * (0.4 + 0.6 * (y - L + G.door) / G.door);\n          buf[o] *= g;\n          buf[o + 1] *= g;\n          buf[o + 2] *= g;\n        }\n      for (let y = L - G.door; y \u003c L; y++)\n        for (let j = 0; j \u003c 5; j++) {\n          const x = side === 0 ? j : W - 1 - j;\n          const c = j === 4 ? [92, 56, 34] : y === L - 1 ? [120, 96, 70] : (y - L) % 4 === 0 && j \u003c 3 ? [150, 120, 80] : [250, 236, 200];\n          put(buf, x, y, c, j === 4 ? lc : [0.95, 0.92, 0.85]);\n        }\n    }\n  for (const k of P.cab) cabin(P, buf, k, lc);\n  // People: in the corridors under the corridor lamps, in the cabins under the cabin lamp.\n  // The second row of a crowd first, a little further from the lamp.\n  for (const back of [true, false])\n    for (const p of P.people) {\n      if (!p.back !== !back) continue;\n      const l = p.st === RIDE || p.st === BOARD ? 1 : back ? 0.74 : 0.92;\n      person(P, buf, p, [lc[0] * l, lc[1] * l, lc[2] * l]);\n    }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), clamp(buf[o], 0, 255), clamp(buf[o + 1], 0, 255), clamp(buf[o + 2], 0, 255));\n  }\n}\n","layer":{"id":"layer-paternoster","type":"code","name":"paternoster","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Paternoster\n// Family:  machine\n// Idea:    A paternoster lift in an old office building, cut open from the machine room to the pit: open wooden cabins climb the right shaft and sink down the left on one endless chain, cross over the chain wheels at the top and the bottom, and office workers step in and out as the cabins pass their floor.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the paternoster lifts of European office buildings, cabins on a chain that never stops\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Floors=3..6, Busy=0..1\n//\n// Knob 1: Light. The building's lamps, from warm bulbs hanging in each corridor and cabin at 0 to cold fluorescent tubes at 1, with the colour of every wall, cabin and coat under them.\n// Knob 2: Speed. How fast the building runs: at 2 the chain moves 0.35 m/s, as a real paternoster does, and a cabin passes each floor every ten seconds; at 0.2 ten times slower, at 3 half as fast again.\n// Knob 3: Floors. Three to six floors between the machine room and the pit; more floors make the storeys, the cabins and the people smaller and put more cabins on the chain.\n// Knob 4: Busy. How many people come out of the offices to ride: one every three seconds or so in the whole building at 0, a crowd of five at every opening and two in every cabin at 1. One in eight stays on and rides round over the top or under the bottom.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Two shafts side by side: cabins go up on the right, down on the left. A cabin is 15 LEDs\n// wide on a centre line 9 LEDs from the middle, and the chain wheels have that radius.\nconst XC = 32;\nconst R = 9;\nconst XL = XC - R;\nconst XR = XC + R;\nconst HALF = 7;\n// The walls between the corridors and the shafts, with an opening on each floor.\nconst WALL_L = 14;\nconst WALL_R = 49;\n// A storey is 3.5 m; the chain runs at V m/s at Speed 2 and people walk at WALK m/s.\nconst V = 0.35;\nconst WALK = 0.75;\n// A cabin carries two people. They step in or out within WIN of a storey of the floor level.\nconst SEATS = 2;\nconst WIN = 0.12;\nconst STEP = 0.55;\n// People waiting, riding or walking: at most this many in the building.\nconst MAX = 56;\n// Where the people waiting at an opening stand, from the front of the line, in the left\n// corridor; the right one is its mirror.\nconst SPOTS = [11, 6, 8, 3, 1];\nconst WALKIN = 0;\nconst RIDE = 1;\nconst BOARD = 2;\nconst ALIGHT = 3;\nconst WALKOUT = 4;\n\nconst COATS = [[34, 44, 90], [70, 70, 78], [112, 70, 44], [150, 36, 48], [36, 84, 60], [206, 184, 132], [236, 236, 230], [26, 26, 30], [70, 120, 170]];\nconst LEGS = [[44, 44, 50], [30, 36, 70], [24, 24, 28], [90, 66, 46], [150, 140, 128]];\nconst SKIN = [[226, 176, 140], [170, 116, 84], [120, 80, 56], [240, 196, 164]];\nconst HAIR = [[30, 24, 20], [96, 62, 34], [210, 180, 110], [150, 150, 150], [70, 40, 30]];\nconst HAT = [[60, 44, 34], [36, 36, 40], [110, 100, 84]];\n// Floor numbers painted on the corridor walls, 3 by 5.\nconst DIGIT = [\"010110010010111\", \"111001111100111\", \"111001011001111\", \"101101111001001\", \"111100111001111\", \"111100111101111\"];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction mix(a, b, t) {\n  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\n// The building for a number of floors: storey height S, cabin height CH, floor levels\n// (the row people stand on is one above), and the chain's straight runs and length.\nfunction geometry(F) {\n  const S = Math.floor(107 / (F + 1.44));\n  const CH = Math.round(0.72 * S);\n  const top = Math.floor((126 - F * S - 2 * CH - 2 * R) / 2);\n  const Lt = top + S + R + CH;\n  const L = [];\n  for (let i = 0; i \u003c F; i++) L[i] = Lt + (F - 1 - i) * S;\n  // A cabin's floor runs between fTop, where the whole cabin is up in the machine room,\n  // and fBot, where it is down in the pit.\n  const fTop = Lt - S - 2;\n  const fBot = L[0] + CH;\n  const Ls = fBot - fTop;\n  const len = 2 * Ls + 2 * Math.PI * R;\n  const pitch = Math.max(CH + Math.max(3, Math.round(0.3 * S)), 17);\n  const nc = Math.round(len / pitch);\n  return { F, S, CH, Lt, L, fTop, fBot, Ls, len, nc, pitch: len / nc, hp: Math.max(7, Math.round(0.54 * S)), wp: S >= 19 ? 4 : 3, door: Math.round(0.62 * S) };\n}\n\n// Where the chain puts a cabin s rows along it: centre column, floor row and which run:\n// 0 up the right shaft, 1 over the top wheel, 2 down the left shaft, 3 under the bottom wheel.\nfunction pathAt(G, s, out) {\n  s = ((s % G.len) + G.len) % G.len;\n  const arc = Math.PI * R;\n  if (s \u003c G.Ls) {\n    out.cx = XR;\n    out.f = G.fBot - s;\n    out.seg = 0;\n  } else if ((s -= G.Ls) \u003c arc) {\n    out.cx = XC + R * Math.cos(s / R);\n    out.f = G.fTop - R * Math.sin(s / R);\n    out.seg = 1;\n  } else if ((s -= arc) \u003c G.Ls) {\n    out.cx = XL;\n    out.f = G.fTop + s;\n    out.seg = 2;\n  } else {\n    s -= G.Ls;\n    out.cx = XC - R * Math.cos(s / R);\n    out.f = G.fBot + R * Math.sin(s / R);\n    out.seg = 3;\n  }\n}\n\n// The lamps: warm bulbs at 0, a plain white at 0.5, fluorescent at 1.\nfunction lampColour(k) {\n  return k \u003c 0.5 ? mix([255, 192, 120], [255, 240, 218], k * 2) : mix([255, 240, 218], [206, 232, 255], k * 2 - 1);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.bg = new Float32Array(N * 3);\n  P.kind = new Uint8Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.glow = [new Float32Array(H), new Float32Array(H)];\n  P.cab = [];\n  P.pos = { cx: 0, f: 0, seg: 0 };\n  P.t = 0;\n  P.F = -1;\n  P.lightKey = -1;\n}\n\nfunction build(P, F) {\n  P.F = F;\n  P.G = geometry(F);\n  P.s = 0;\n  P.people = [];\n  P.doors = new Float32Array(F * 2);\n  P.cab = [];\n  for (let c = 0; c \u003c P.G.nc; c++) P.cab.push({ cx: 0, f: 0, seg: 0, n: 0 });\n  P.lightKey = -1;\n}\n\n// Each corridor sends people to the lift: side 0 is the left corridor, which rides down,\n// side 1 the right one, which rides up. Someone with nowhere to go that way, or one in\n// eight of the rest, stays on over the top or under the bottom and gets out the other side.\nfunction spawn(P, i, side) {\n  const G = P.G;\n  const dead = side === 1 ? i === G.F - 1 : i === 0;\n  const over = dead || Math.random() \u003c 0.12;\n  let dest;\n  if (!over) dest = side === 1 ? i + 1 + Math.floor(Math.random() * (G.F - 1 - i)) : Math.floor(Math.random() * i);\n  else dest = Math.floor(Math.random() * G.F);\n  P.doors[i * 2 + side] = P.t + 2;\n  P.people.push({\n    st: WALKIN,\n    fl: i,\n    side,\n    x: side === 0 ? 3 : 60,\n    feet: G.L[i] - 1,\n    dest,\n    exit: over ? 1 - side : side,\n    cab: -1,\n    slot: 0,\n    t0: 0,\n    x0: 0,\n    y0: 0,\n    coat: pick(COATS),\n    legs: Math.random() \u003c 0.25 ? null : pick(LEGS),\n    skin: pick(SKIN),\n    hair: pick(HAIR),\n    hat: Math.random() \u003c 0.3 ? pick(HAT) : null,\n    bag: Math.random() \u003c 0.35,\n    ph: Math.random() * 6,\n  });\n}\n\nfunction waiting(people, i, side) {\n  let n = 0;\n  for (const p of people) if (p.st === WALKIN && p.fl === i && p.side === side) n++;\n  return n;\n}\n\nfunction ease(u) {\n  u = clamp(u, 0, 1);\n  return u * u * (3 - 2 * u);\n}\n\nfunction step(P, dt, busy) {\n  const G = P.G;\n  P.t += dt;\n  P.s += (V / 3.5) * G.S * dt;\n  for (let c = 0; c \u003c G.nc; c++) {\n    pathAt(G, P.s + c * G.pitch, P.pos);\n    const k = P.cab[c];\n    k.cx = P.pos.cx;\n    k.f = P.pos.f;\n    k.seg = P.pos.seg;\n    k.n = 0;\n  }\n  const people = P.people;\n  for (const p of people) if (p.cab >= 0) P.cab[p.cab].n++;\n  // New people come out of the office doors.\n  const rate = 0.06 + 0.9 * busy * busy;\n  // A quiet building has two waiting at an opening at most; a busy one a crowd of five.\n  const cap = 2 + Math.round(3 * busy);\n  for (let i = 0; i \u003c G.F; i++)\n    for (let side = 0; side \u003c 2; side++) {\n      const dead = side === 1 ? i === G.F - 1 : i === 0;\n      if (people.length \u003c MAX && Math.random() \u003c rate * dt * (dead ? 0.15 : 1) && waiting(people, i, side) \u003c cap) spawn(P, i, side);\n    }\n  const walk = (WALK / 3.5) * G.S * dt;\n  const win = WIN * G.S;\n  const queue = {};\n  for (let n = 0; n \u003c people.length; n++) {\n    const p = people[n];\n    if (p.st === WALKIN) {\n      // Line up at the opening behind whoever came first.\n      const key = p.fl * 2 + p.side;\n      const q = queue[key] || 0;\n      queue[key] = q + 1;\n      // Two at the front, the rest a step behind them.\n      const sx = SPOTS[Math.min(q, SPOTS.length - 1)];\n      const spot = p.side === 0 ? sx : W - 1 - sx;\n      p.back = q >= 2 && q \u003c 4;\n      p.feet = G.L[p.fl] - (p.back ? 2 : 1);\n      const d = spot - p.x;\n      p.walking = Math.abs(d) > 0.3;\n      p.x += clamp(d, -walk, walk);\n      // The first two in line can step into the same cabin side by side.\n      if (q \u003c SEATS && !p.walking) {\n        const want = p.side === 1 ? 0 : 2;\n        for (let c = 0; c \u003c G.nc; c++) {\n          const k = P.cab[c];\n          if (k.seg !== want || k.n >= SEATS) continue;\n          // Step in while the cabin floor is coming level, not once it is past.\n          const off = (k.f - G.L[p.fl]) * (want === 0 ? 1 : -1);\n          if (off > win || off \u003c -0.3 * win) continue;\n          const taken = people.some((o) => o.cab === c && o.slot === 0);\n          p.slot = taken ? 1 : 0;\n          p.cab = c;\n          p.st = BOARD;\n          p.t0 = P.t;\n          p.x0 = p.x;\n          p.y0 = p.feet;\n          k.n++;\n          break;\n        }\n      }\n    } else if (p.st === BOARD || p.st === RIDE) {\n      const k = P.cab[p.cab];\n      const sx = k.cx + (p.slot ? 3 : -3);\n      if (p.st === BOARD) {\n        const u = ease((P.t - p.t0) / STEP);\n        p.x = p.x0 + (sx - p.x0) * u;\n        p.feet = p.y0 + (k.f - 1 - p.y0) * u;\n        p.walking = u \u003c 1;\n        if (u >= 1) p.st = RIDE;\n      } else {\n        p.x = sx;\n        p.feet = k.f - 1;\n        p.walking = false;\n        const want = p.exit === 1 ? 0 : 2;\n        if (k.seg === want && Math.abs(k.f - G.L[p.dest]) \u003c 0.6 * win) {\n          p.st = ALIGHT;\n          p.t0 = P.t;\n          p.x0 = p.x;\n          p.y0 = p.feet;\n          p.side = p.exit;\n          p.fl = p.dest;\n          p.cab = -1;\n        }\n      }\n    } else if (p.st === ALIGHT) {\n      const u = ease((P.t - p.t0) / STEP);\n      const ex = p.side === 0 ? WALL_L - 2 : WALL_R + 3;\n      p.x = p.x0 + (ex - p.x0) * u;\n      p.feet = p.y0 + (G.L[p.fl] - 1 - p.y0) * u;\n      p.walking = true;\n      if (u >= 1) p.st = WALKOUT;\n    } else {\n      const door = p.side === 0 ? 3 : 60;\n      p.x += clamp(door - p.x, -walk, walk);\n      p.walking = true;\n      if (Math.abs(door - p.x) \u003c 2) P.doors[p.fl * 2 + p.side] = P.t + 1.5;\n      if (Math.abs(door - p.x) \u003c 0.3) p.gone = true;\n    }\n  }\n  if (people.some((p) => p.gone)) P.people = people.filter((p) => !p.gone);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.light = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const F = Math.round(clamp(k[2], 3, 6));\n  const busy = clamp(k[3], 0, 1);\n  if (F !== P.F) {\n    // A new building: the chain has been running a while and people are about.\n    build(P, F);\n    P.s = Math.random() * P.G.len;\n    for (let i = 0; i \u003c 300; i++) step(P, 0.1, busy);\n    // Then three more seconds at the knob's pace, so Speed shows from the start.\n    for (let i = 0; i \u003c 30; i++) step(P, 0.05 * speed, busy);\n  }\n  step(P, (dt * speed) / 2, busy);\n}\n\n// The building behind the cabins, lit by the lamps: machine room, storeys, slabs, shaft\n// walls with an opening on each floor, the column between the shafts, the pit.\nfunction background(P) {\n  const G = P.G;\n  const lc = lampColour(P.light).map((v) => v / 255);\n  const tube = P.light;\n  const bg = P.bg;\n  const kind = P.kind;\n  const roomFloor = G.Lt - G.S;\n  const pitTop = G.L[0] + 2;\n  for (let y = 0; y \u003c H; y++) {\n    // Which storey this row is in (0 at the bottom), or -1 in a slab, machine room or pit.\n    let st = -1;\n    let slab = false;\n    let level = 0;\n    if (y >= roomFloor && y \u003c pitTop) {\n      const k = Math.floor((G.L[0] + 1 - y) / G.S);\n      const i = clamp(k, 0, G.F - 1);\n      const r = G.L[0] - i * G.S - y;\n      if (r \u003c= 0 && r >= -1) slab = true;\n      else if (y \u003c roomFloor + 2) slab = true;\n      else {\n        st = r > 0 ? i : i - 1;\n        level = G.L[st];\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let c;\n      let k = 0;\n      const shaft = (x > WALL_L && x \u003c 31) || (x > 33 && x \u003c WALL_R);\n      const inShafts = y >= roomFloor && y \u003c pitTop;\n      if (y \u003c roomFloor) {\n        // Machine room: dark walls, a caged bulb on the left.\n        const d = Math.hypot(x - 6, y - 4);\n        const l = 0.5 + 1.6 / (1 + (d * d) / 60);\n        c = [30 * l, 32 * l, 40 * l];\n        if (d \u003c 1.2) c = [255, 214, 150];\n        // The motor on the right, with its drive wheel.\n        if (x >= 52 && x \u003c= 61 && y >= roomFloor - 7 && y \u003c roomFloor) c = y === roomFloor - 7 ? [80, 96, 86] : [52, 70, 62];\n        const my = roomFloor - 11;\n        if (Math.abs(Math.hypot(x - 56.5, y - my) - 2.8) \u003c 0.6) c = [96, 100, 108];\n        // Its belt runs to the axle of the top chain wheel.\n        const wy = G.fTop - (G.CH - 2) / 2;\n        if (x > XC && x \u003c 56 && (Math.abs(y - (my - 2.8 + ((wy - 1.5 - my + 2.8) * (56.5 - x)) / (56.5 - XC))) \u003c 0.5 || Math.abs(y - (my + 2.8 + ((wy + 1.5 - my - 2.8) * (56.5 - x)) / (56.5 - XC))) \u003c 0.5)) c = [62, 56, 52];\n      } else if (y >= pitTop) {\n        // The pit: bare concrete and an iron ladder.\n        const l = 0.75 - 0.3 * ((y - pitTop) / Math.max(1, H - pitTop));\n        c = [44 * l, 44 * l, 50 * l];\n        if ((x === 3 || x === 7) && y \u003c H - 1) c = [70, 60, 50];\n        if (x > 3 && x \u003c 7 && (y - pitTop) % 4 === 2) c = [70, 60, 50];\n      } else if (inShafts && shaft) {\n        // Shaft back wall, brick, lit by the cabins going by.\n        const mortar = y % 3 === 0 || (x + (Math.floor(y / 3) % 2) * 3) % 6 === 0;\n        c = mortar ? [40, 36, 36] : [92, 64, 52];\n        k = x \u003c XC ? 1 : 2;\n      } else if (inShafts && x >= 31 && x \u003c= 33) {\n        // The steel column between the shafts.\n        c = x === 32 ? [70, 78, 96] : [44, 50, 62];\n        if (x === 32 && y % 5 === 0) c = [120, 126, 140];\n      } else if (slab) {\n        c = y === roomFloor || (y > roomFloor && (G.L.includes(y) || y === pitTop - 2)) ? [150, 128, 104] : [96, 94, 92];\n      } else if (x === WALL_L || x === WALL_R) {\n        // The corridor walls by the shafts, open on each floor.\n        const open = st >= 0 && y >= level - G.door;\n        c = open ? [26, 22, 22] : [120, 124, 112];\n      } else {\n        // A corridor: cream wall, a band of green tiles, the office door and the floor's number.\n        const left = x \u003c WALL_L;\n        const cx = left ? 6 : 57;\n        const ty = level - G.S + 2;\n        const h = level - y;\n        const dx = x - cx;\n        const dy = y - ty;\n        const pool = 1 / (1 + (dx * dx + dy * dy) / (40 + 260 * tube));\n        const l = (0.42 + 0.3 * tube) + (0.85 - 0.25 * tube) * pool;\n        if (h \u003c= Math.round(0.36 * G.S)) c = x % 3 === 0 || h % 3 === 0 ? [40, 96, 74] : [64, 142, 108];\n        else c = [228, 214, 184];\n        const door = left ? x >= 0 && x \u003c= 3 : x >= 60;\n        if (door && h \u003c= G.door) c = h > G.door - Math.round(G.door * 0.4) && (left ? x >= 1 && x \u003c= 2 : x >= 61 && x \u003c= 62) ? [255, 228, 170] : [100, 60, 36];\n        // The number, beside the opening at the top of the storey.\n        const nx = left ? 9 : 52;\n        const ny = ty + 2;\n        if (x >= nx && x \u003c nx + 3 && y >= ny && y \u003c ny + 5 && DIGIT[Math.min(st, 5)][(y - ny) * 3 + x - nx] === \"1\") c = [40, 40, 64];\n        c = [c[0] * l, c[1] * l, c[2] * l];\n        // The lamp under the slab: a bulb on its cord, or a tube that grows with the Light knob.\n        const bulb = tube \u003c 0.5;\n        if (y === ty + (bulb ? 1 : 0) && Math.abs(dx) \u003c= 0.6 + 3.4 * tube) c = [255, 255, 255];\n        if (bulb && y === ty && dx === 0) c = [90, 90, 90];\n      }\n      // The corridors are under the building's lamps; the machine room and the pit have their\n      // own bulb, and the shaft walls are lit by the cabins as they pass.\n      const m = k || y \u003c roomFloor || y >= pitTop ? [1, 1, 1] : lc;\n      bg[o] = c[0] * m[0];\n      bg[o + 1] = c[1] * m[1];\n      bg[o + 2] = c[2] * m[2];\n      kind[p] = k;\n    }\n  }\n}\n\nfunction put(buf, x, y, c, m) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = c[0] * m[0];\n  buf[o + 1] = c[1] * m[1];\n  buf[o + 2] = c[2] * m[2];\n}\n\n// One cabin: roof, posts, varnished panelling lit from the lamp under the roof, a brass\n// handrail, the floor with its brass edge.\nfunction cabin(P, buf, k, lc) {\n  const G = P.G;\n  const x0 = Math.round(k.cx) - HALF;\n  const f = Math.round(k.f);\n  const top = f - G.CH + 2;\n  const rail = top + Math.round(G.CH * 0.55);\n  const tube = P.light;\n  for (let y = top; y \u003c= f + 1; y++) {\n    if (y \u003c 0 || y >= H) continue;\n    const dy = y - top - 2;\n    for (let i = 0; i \u003c= 2 * HALF; i++) {\n      const x = x0 + i;\n      let c;\n      let m = lc;\n      // The lamp's light on the panelling: a pool under a bulb, even under a tube.\n      const d2 = (i - HALF) * (i - HALF) + dy * dy * 1.6;\n      const l = (0.42 + 0.3 * tube) + (0.85 - 0.3 * tube) / (1 + d2 / (14 + 60 * tube));\n      if (y === top) c = [44, 30, 24];\n      else if (y === top + 1) c = [74, 48, 32];\n      else if (y === f) c = [200, 154, 72];\n      else if (y === f + 1) c = [40, 32, 28];\n      else if (i === 0 || i === 2 * HALF) c = [134, 86, 48];\n      else if (y === top + 2 && Math.abs(i - HALF) \u003c= 0.6 + 3.4 * tube) {\n        c = [255, 255, 255];\n        m = [1, 1, 1];\n      } else if (i \u003c= 2 || i >= 2 * HALF - 2) c = [96 * l, 58 * l, 34 * l];\n      else if (y === rail) c = [190 * l, 146 * l, 66 * l];\n      else {\n        const seam = (i - 3) % 4 === 3 ? 0.72 : 1;\n        c = [172 * l * seam, 98 * l * seam, 54 * l * seam];\n      }\n      put(buf, x, y, c, m);\n    }\n  }\n}\n\nfunction person(P, buf, p, m) {\n  const G = P.G;\n  const h = G.hp;\n  const x = Math.round(p.x);\n  const feet = Math.round(p.feet);\n  const face = h >= 10 ? 2 : 1;\n  const torso = Math.round((h - 2 - face) * 0.5);\n  const legs = h - 2 - face - torso;\n  const l0 = G.wp === 4 ? -2 : -1;\n  const stride = p.walking && Math.floor(P.t * 5 + p.ph) % 2 === 0;\n  let y = feet;\n  // Shoes and legs, together standing and apart in mid stride; a skirt over stockings.\n  for (let r = 0; r \u003c= legs; r++, y--) {\n    const skirt = !p.legs && r >= legs - 1 && r > 0;\n    const c = r === 0 ? [28, 24, 22] : skirt ? p.coat : p.legs || p.skin;\n    if (skirt) for (let i = l0; i \u003c= 1; i++) put(buf, x + i, y, c, m);\n    else if (stride && r \u003c legs) {\n      put(buf, x + l0, y, c, m);\n      put(buf, x + 1, y, c, m);\n    } else {\n      put(buf, x - 1, y, c, m);\n      put(buf, x, y, c, m);\n    }\n  }\n  for (let r = 0; r \u003c torso; r++, y--) for (let i = l0; i \u003c= 1; i++) put(buf, x + i, y, p.coat, m);\n  if (p.bag) {\n    const bx = p.side === 0 ? x + 2 : x + l0 - 1;\n    put(buf, bx, feet - legs + 1, [120, 72, 36], m);\n    put(buf, bx, feet - legs + 2, [120, 72, 36], m);\n  }\n  for (let r = 0; r \u003c face; r++, y--) {\n    put(buf, x - 1, y, p.skin, m);\n    put(buf, x, y, p.skin, m);\n  }\n  const top = p.hat || p.hair;\n  put(buf, x - 1, y, top, m);\n  put(buf, x, y, top, m);\n  if (p.hat) {\n    put(buf, x - 2, y + 1, p.hat, m);\n    put(buf, x + 1, y + 1, p.hat, m);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const G = P.G;\n  if (P.lightKey !== P.light) {\n    P.lightKey = P.light;\n    background(P);\n  }\n  const lc = lampColour(P.light).map((v) => v / 255);\n  const buf = P.buf;\n  buf.set(P.bg);\n  // Cabin light spills on to the shaft walls above and below each cabin.\n  for (let side = 0; side \u003c 2; side++) {\n    const g = P.glow[side];\n    g.fill(0.32);\n    for (const k of P.cab) {\n      if (k.seg !== (side ? 0 : 2)) continue;\n      const f = Math.round(k.f);\n      const top = f - G.CH + 2;\n      for (let d = 1; d \u003c= 8; d++) {\n        const v = 0.32 + 0.75 * Math.exp(-d / 2.5);\n        if (top - d >= 0) g[top - d] = Math.max(g[top - d], v);\n        if (f + 1 + d \u003c H) g[f + 1 + d] = Math.max(g[f + 1 + d], 0.32 + 0.4 * Math.exp(-d / 2));\n      }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const k = P.kind[p];\n    if (!k) continue;\n    const g = P.glow[k - 1][Math.floor(p / W)];\n    const o = p * 3;\n    buf[o] *= g * lc[0];\n    buf[o + 1] *= g * lc[1];\n    buf[o + 2] *= g * lc[2];\n  }\n  // The chain along the cabins' middle line, links moving with it, and the two wheels.\n  const mid = (G.CH - 2) / 2;\n  const pos = P.pos;\n  for (let s = 0; s \u003c G.len; s += 0.7) {\n    pathAt(G, s, pos);\n    const link = Math.floor((s - P.s) / 2) & 1;\n    const x = Math.round(pos.cx);\n    const y = Math.round(pos.f - mid);\n    put(buf, x, y, link ? [150, 150, 160] : [70, 70, 80], [1, 1, 1]);\n  }\n  for (const [wy, dir] of [[G.fTop - mid, 1], [G.fBot - mid, -1]]) {\n    const a0 = (dir * P.s) / R;\n    for (let sp = 0; sp \u003c 6; sp++) {\n      const a = a0 + (sp * Math.PI) / 3;\n      for (let r = 1; r \u003c R - 1; r += 0.7) put(buf, Math.round(XC + r * Math.cos(a)), Math.round(wy - r * Math.sin(a)), [96, 100, 112], [1, 1, 1]);\n    }\n    for (let a = 0; a \u003c 6.3; a += 0.12) put(buf, Math.round(XC + (R - 1) * Math.cos(a)), Math.round(wy + (R - 1) * Math.sin(a)), [120, 124, 136], [1, 1, 1]);\n    put(buf, XC, Math.round(wy), [190, 190, 200], [1, 1, 1]);\n  }\n  // An office door stands open while someone comes out or goes in, and the office shows.\n  for (let i = 0; i \u003c G.F; i++)\n    for (let side = 0; side \u003c 2; side++) {\n      if (P.doors[i * 2 + side] \u003c= P.t) continue;\n      const L = G.L[i];\n      // Office light spills out across the corridor floor and wall beside the door.\n      for (let y = L - G.door; y \u003c L; y++)\n        for (let j = 5; j \u003c 13; j++) {\n          const o = (y * W + (side === 0 ? j : W - 1 - j)) * 3;\n          const g = 1 + 0.9 * Math.exp(-(j - 5) / 4) * (0.4 + 0.6 * (y - L + G.door) / G.door);\n          buf[o] *= g;\n          buf[o + 1] *= g;\n          buf[o + 2] *= g;\n        }\n      for (let y = L - G.door; y \u003c L; y++)\n        for (let j = 0; j \u003c 5; j++) {\n          const x = side === 0 ? j : W - 1 - j;\n          const c = j === 4 ? [92, 56, 34] : y === L - 1 ? [120, 96, 70] : (y - L) % 4 === 0 && j \u003c 3 ? [150, 120, 80] : [250, 236, 200];\n          put(buf, x, y, c, j === 4 ? lc : [0.95, 0.92, 0.85]);\n        }\n    }\n  for (const k of P.cab) cabin(P, buf, k, lc);\n  // People: in the corridors under the corridor lamps, in the cabins under the cabin lamp.\n  // The second row of a crowd first, a little further from the lamp.\n  for (const back of [true, false])\n    for (const p of P.people) {\n      if (!p.back !== !back) continue;\n      const l = p.st === RIDE || p.st === BOARD ? 1 : back ? 0.74 : 0.92;\n      person(P, buf, p, [lc[0] * l, lc[1] * l, lc[2] * l]);\n    }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), clamp(buf[o], 0, 255), clamp(buf[o + 1], 0, 255), clamp(buf[o + 2], 0, 255));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Floors=3..6, Busy=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The building's lamps, from warm bulbs hanging in each corridor and cabin at 0 to cold fluorescent tubes at 1, with the colour of every wall, cabin and coat under them."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the building runs: at 2 the chain moves 0.35 m/s, as a real paternoster does, and a cabin passes each floor every ten seconds; at 0.2 ten times slower, at 3 half as fast again."},{"name":"Floors","min":3,"max":6,"about":"Three to six floors between the machine room and the pit; more floors make the storeys, the cabins and the people smaller and put more cabins on the chain."},{"name":"Busy","min":0,"max":1,"about":"How many people come out of the offices to ride: one every three seconds or so in the whole building at 0, a crowd of five at every opening and two in every cabin at 1. One in eight stays on and rides round over the top or under the bottom."}],"start":[0,2,3,0.06],"measures":{"motion":0.1311,"detail":0.0811,"edges":0.4174,"complexity":0.5845,"coverage":0.8893,"colour":0.2319,"drift":0.047},"knobResponse":[0.1087,0.0733,0.147,0.0325]},{"slug":"peg-light","title":"Peg Light","family":"toy","round":18,"note":"1967년 Lite-Brite 처럼 검은 판의 엇갈린 구멍에 색 페그를 하나씩 꽂아 로켓, 돛배, 화분, 물고기, 집, 광대 그림을 채워요. 다 차면 4초 머문 뒤 페그가 위에서부터 쓸려 빠지고 다음 종이가 올라가요. K1 을 누르면 판을 비우고 같은 그림을 처음부터 다시 꽂아요.","idea":"Translucent coloured pegs are pushed one at a time into the holes of a black peg board, following a printed template of a rocket, a sailboat, a flower pot, a fish, a house or a clown, each peg lit by the bulb behind, and when the picture is done it holds, the pegs are pushed out and the next sheet goes on.","buttons":"K1 tap pushes every peg out and starts the same picture again.","code":"// ===== Patternflow pattern =====\n// Title:   Peg Light\n// Family:  toy\n// Idea:    Translucent coloured pegs are pushed one at a time into the holes of a black peg board, following a printed template of a rocket, a sailboat, a flower pot, a fish, a house or a clown, each peg lit by the bulb behind, and when the picture is done it holds, the pegs are pushed out and the next sheet goes on.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after Lite-Brite, the peg board Hasbro brought out in 1967\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Bulb=0..1, Speed=0.2..3, Picture=0..5, Glow=0..1\n//\n// Knob 1: Bulb. The bulb behind the board, from a full warm white at 0 down a dimmer to a low orange glow at 1, where the blue and violet pegs go dark first.\n// Knob 2: Speed. Pegs pushed in per second, 10 at 0.2, 100 at 2 and 150 at 3; the pull-out sweep runs faster with it too.\n// Knob 3: Picture. Which template goes on: rocket, sailboat, flower pot, fish, house or clown; turning it pushes the pegs out and starts that sheet, and after it the sheets follow in that order.\n// Knob 4: Glow. How far each peg's light spills onto the black board round it, from a clean dot at 0 to a soft lit patch at 1.\n// Buttons: K1 tap pushes every peg out and starts the same picture again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The nine peg colours at full strength: red, orange, yellow, green, blue,\n// violet, pink, white (milky) and clear (the bare bulb). Index 0 is no peg.\nconst PEG = [\n  null,\n  [255, 26, 18],\n  [255, 112, 8],\n  [255, 214, 16],\n  [24, 224, 40],\n  [28, 84, 255],\n  [150, 36, 255],\n  [255, 70, 150],\n  [222, 222, 228],\n  [255, 250, 236],\n];\n// A lit peg's brightest channel at the board's centre, and the printed\n// template dot behind an empty hole (under 20 of 255: barely there).\nconst LEVEL = 0.88;\nconst GHOST = 15 / 255;\n// Pegs pushed in per second for each unit of Speed.\nconst RATE = 50;\nconst HOLD = 4;\nconst PULL = 1.8;\nconst SWAP = 0.8;\nconst FILL = 0;\nconst HOLDING = 1;\nconst PULLING = 2;\nconst SWAPPING = 3;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction inPoly(x, y, q) {\n  let inside = false;\n  for (let i = 0, j = q.length - 2; i \u003c q.length; j = i, i += 2) {\n    const xi = q[i];\n    const yi = q[i + 1];\n    const xj = q[j];\n    const yj = q[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;\n  }\n  return inside;\n}\n\nfunction segDist(x, y, x0, y0, x1, y1) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const u = clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return Math.hypot(x - x0 - u * dx, y - y0 - u * dy);\n}\n\n// The six template sheets, painted with discs, boxes, polygons, thick lines\n// and rings in the order a child would fill them. Colour 0 rubs out.\nconst SHEETS = [\n  // Rocket: a moon, a ringed planet, stars, the rocket and its smoke.\n  (D, R, T, L, put) => {\n    const stars = [5, 32, 26, 6, 40, 9, 58, 44, 6, 52, 12, 70, 57, 66, 4, 92, 58, 90, 9, 108, 56, 108, 20, 36, 46, 4, 60, 4, 2, 4, 14, 58, 50, 56, 8, 80, 54, 80];\n    for (let i = 0; i \u003c stars.length; i += 2) D(i % 4 ? 9 : 8, stars[i], stars[i + 1], i % 6 ? 1.5 : 0.6);\n    D(3, 12, 15, 9);\n    D(0, 16, 12, 7.5);\n    D(6, 51, 25, 7.5);\n    put(2, (x, y) => {\n      const e = ((x - 51) / 14) ** 2 + ((y - 25) / 3.4) ** 2;\n      return e > 0.55 && e \u003c 1 && (y >= 25 || ((x - 51) / 7.5) ** 2 + ((y - 25) / 7.5) ** 2 > 1);\n    });\n    T(1, 32, 22, 43, 44, 21, 44);\n    R(8, 21, 44, 43, 92);\n    D(5, 32, 57, 6);\n    D(9, 30, 55, 1.5);\n    D(5, 32, 72, 3.5);\n    R(1, 21, 80, 43, 83);\n    T(1, 21, 70, 21, 94, 9, 103, 9, 86);\n    T(1, 43, 70, 43, 94, 55, 103, 55, 86);\n    R(6, 30, 86, 34, 100);\n    R(2, 25, 93, 39, 97);\n    T(2, 23, 98, 41, 98, 32, 124);\n    T(3, 27, 98, 37, 98, 32, 116);\n    T(9, 30, 98, 34, 98, 32, 108);\n    D(8, 16, 121, 9, 6);\n    D(8, 48, 122, 10, 6);\n    D(9, 4, 126, 7, 4);\n    D(9, 60, 126, 7, 4);\n  },\n  // Sailboat: sun, cloud, gulls, two sails, a red hull and the sea.\n  (D, R, T, L, put) => {\n    D(3, 50, 14, 8.5);\n    for (let a = 0; a \u003c 8; a++) L(3, 50 + 11 * Math.cos(a * 0.785), 14 + 11 * Math.sin(a * 0.785), 50 + 15 * Math.cos(a * 0.785), 14 + 15 * Math.sin(a * 0.785), 0.9);\n    D(8, 14, 16, 10, 4.5);\n    D(8, 20, 12, 7, 4);\n    D(9, 8, 13, 5, 3);\n    for (const [gx, gy] of [[9, 34], [20, 42], [52, 38]]) {\n      L(8, gx - 4, gy - 2, gx, gy, 0.8);\n      L(8, gx, gy, gx + 4, gy - 2, 0.8);\n    }\n    L(2, 31, 20, 31, 90, 1.1);\n    T(1, 32, 17, 32, 25, 42, 21);\n    T(8, 34, 26, 34, 86, 60, 86);\n    put(1, (x, y) => y >= 64 && y \u003c= 69 && inPoly(x, y, [34, 26, 34, 86, 60, 86]));\n    T(7, 28, 32, 28, 86, 4, 86);\n    T(1, 2, 89, 62, 89, 54, 103, 10, 103);\n    R(8, 6, 93, 58, 94);\n    for (let x = 16; x \u003c 50; x += 8) D(3, x, 98, 1.5);\n    put(5, (x, y) => y >= 105 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 \u003c 3.6);\n    put(8, (x, y) => y >= 105 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 >= 3.6 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 \u003c 4.4);\n    put(4, (x, y) => y >= 122);\n  },\n  // Flower pot: three flowers on stems with leaves, a butterfly, the pot.\n  (D, R, T, L, put) => {\n    L(4, 32, 88, 32, 40, 1.3);\n    L(4, 31, 72, 14, 46, 1.2);\n    L(4, 33, 66, 50, 32, 1.2);\n    T(4, 32, 80, 18, 70, 12, 58, 26, 66);\n    T(4, 32, 76, 46, 68, 54, 56, 40, 62);\n    T(4, 32, 60, 22, 54, 18, 44, 28, 50);\n    for (const [cx, cy, r, c] of [[32, 34, 11, 1], [14, 42, 9, 6], [50, 28, 9, 7]]) {\n      for (let a = 0; a \u003c 6; a++) D(c, cx + r * 0.55 * Math.cos(a * 1.047), cy + r * 0.55 * Math.sin(a * 1.047), r * 0.48);\n      D(3, cx, cy, r * 0.36);\n    }\n    T(5, 10, 8, 18, 15, 10, 20);\n    T(5, 26, 8, 18, 15, 26, 20);\n    L(8, 18, 10, 18, 20, 0.7);\n    R(2, 10, 88, 54, 95);\n    T(2, 13, 96, 51, 96, 45, 124, 19, 124);\n    put(7, (x, y) => y >= 104 && y \u003c= 108 && inPoly(x, y, [13, 96, 51, 96, 45, 124, 19, 124]));\n    for (let x = 22; x \u003c= 42; x += 5) D(3, x, 114, 1.5);\n    R(6, 2, 125, 61, 127);\n  },\n  // Fish: a big striped fish, a small one, bubbles, weed and sand.\n  (D, R, T, L, put) => {\n    for (const [bx, by, r] of [[18, 10, 3.5], [10, 20, 2.5], [22, 26, 2], [48, 64, 3], [56, 80, 2.5]]) put(9, (x, y) => Math.abs(Math.hypot(x - bx, y - by) - r) \u003c 0.8);\n    T(2, 50, 58, 63, 42, 63, 74);\n    D(2, 30, 58, 23, 16);\n    T(2, 22, 43, 40, 43, 34, 34);\n    T(2, 26, 72, 38, 72, 30, 80);\n    put(3, (x, y) => ((x - 30) / 23) ** 2 + ((y - 58) / 16) ** 2 \u003c= 1 && (Math.abs(x - 24) \u003c 2.2 || Math.abs(x - 36) \u003c 2.2));\n    D(8, 15, 54, 4.5);\n    D(5, 14, 54, 2.2);\n    L(1, 7, 62, 12, 63, 1);\n    D(6, 44, 22, 9, 5.5);\n    T(6, 52, 22, 60, 15, 60, 29);\n    D(8, 39, 21, 1.5);\n    for (const sx of [8, 20, 46, 58]) L(4, sx, 120, sx + 3 * Math.sin(sx), 92 - (sx % 3) * 6, 1.6);\n    put(4, (x, y) => y > 86 && y \u003c 120 && [8, 20, 46, 58].some((s) => Math.abs(x - s - 2.5 * Math.sin(y * 0.35 + s)) \u003c 1.6));\n    put(3, (x, y) => y >= 118 + 2 * Math.sin(x * 0.3));\n    D(7, 30, 121, 3.5);\n    D(1, 50, 122, 2.5);\n  },\n  // House: sun, cloud, red roof, chimney smoke, yellow walls, a garden.\n  (D, R, T, L, put) => {\n    D(3, 10, 10, 7.5);\n    D(8, 42, 10, 9, 4);\n    D(9, 50, 7, 6, 3.5);\n    R(1, 44, 24, 50, 44);\n    D(8, 47, 19, 3);\n    D(8, 51, 13, 2.5);\n    T(1, 32, 22, 60, 50, 4, 50);\n    R(3, 9, 50, 55, 98);\n    R(2, 27, 74, 37, 98);\n    D(3, 35, 86, 1);\n    for (const wx of [13, 41]) {\n      R(5, wx, 58, wx + 10, 69);\n      L(8, wx + 5, 58, wx + 5, 69, 0.6);\n      L(8, wx, 63.5, wx + 10, 63.5, 0.6);\n      R(7, wx - 1, 70, wx + 11, 72);\n    }\n    D(5, 32, 38, 4);\n    put(4, (x, y) => y >= 99 && y \u003c= 110);\n    T(8, 27, 99, 37, 99, 44, 127, 20, 127);\n    for (const [fx, fy, c] of [[6, 104, 1], [14, 108, 6], [50, 105, 7], [58, 109, 3]]) {\n      L(4, fx, fy, fx, fy + 12, 0.7);\n      D(c, fx, fy, 2.6);\n    }\n    put(4, (x, y) => y >= 120 && (x \u003c 20 || x > 44));\n  },\n  // Clown: hat and pompom, orange hair, white face, nose, smile, bow tie.\n  (D, R, T, L, put) => {\n    T(6, 18, 30, 46, 30, 32, 6);\n    D(3, 32, 6, 4.5);\n    for (const [hx, hy] of [[28, 22], [36, 26], [32, 14]]) D(8, hx, hy, 1.5);\n    for (const s of [-1, 1]) {\n      D(2, 32 + s * 21, 46, 8);\n      D(2, 32 + s * 24, 58, 7);\n      D(2, 32 + s * 20, 68, 6);\n    }\n    D(8, 32, 54, 18, 23);\n    for (const s of [-1, 1]) {\n      D(5, 32 + s * 7, 47, 3.5, 4.5);\n      L(6, 32 + s * 4, 39, 32 + s * 11, 39, 0.8);\n      D(7, 32 + s * 12, 62, 3.5);\n    }\n    D(1, 32, 57, 5);\n    put(1, (x, y) => {\n      const d = Math.hypot(x - 32, y - 60);\n      return d > 7.5 && d \u003c 10.5 && y > 64;\n    });\n    T(5, 32, 86, 12, 78, 12, 96);\n    T(5, 32, 86, 52, 78, 52, 96);\n    D(1, 32, 86, 3.5);\n    for (const [bx, by] of [[18, 82], [17, 91], [46, 82], [47, 91]]) D(3, bx, by, 1.5);\n    put(3, (x, y) => y >= 98 && ((y >> 2) & 1) === 0 && Math.abs(x - 32) \u003c 14 + (y - 98) * 0.5);\n    put(1, (x, y) => y >= 98 && ((y >> 2) & 1) === 1 && Math.abs(x - 32) \u003c 14 + (y - 98) * 0.5);\n  },\n];\n\n// Paint one sheet: each hole's colour, then the order the pegs go in, one\n// colour after another as it first appears, top to bottom with a little\n// wander so the work has a ragged front.\nfunction buildSheet(art) {\n  const col = new Uint8Array(N);\n  const firsts = [];\n  const put = (c, f) => {\n    if (c && !firsts.includes(c)) firsts.push(c);\n    for (let y = 0; y \u003c H; y++) for (let x = y & 1; x \u003c W; x += 2) if (f(x, y)) col[y * W + x] = c;\n  };\n  const D = (c, cx, cy, rx, ry) => put(c, (x, y) => ((x - cx) / rx) ** 2 + ((y - cy) / (ry || rx)) ** 2 \u003c= 1);\n  const R = (c, x0, y0, x1, y1) => put(c, (x, y) => x >= x0 && x \u003c= x1 && y >= y0 && y \u003c= y1);\n  const T = (c, ...q) => put(c, (x, y) => inPoly(x, y, q));\n  const L = (c, x0, y0, x1, y1, w) => put(c, (x, y) => segDist(x, y, x0, y0, x1, y1) \u003c= w);\n  art(D, R, T, L, put);\n  const order = [];\n  for (const c of firsts) {\n    const run = [];\n    for (let p = 0; p \u003c N; p++) if (col[p] === c) run.push([p, Math.floor(p / W) + 7 * Math.random() + (p % W) * 0.04]);\n    run.sort((a, b) => a[1] - b[1]);\n    for (const r of run) order.push(r[0]);\n  }\n  return { col, order: Int32Array.from(order) };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.sheets = SHEETS.map(buildSheet);\n  P.buf = new Float32Array(N * 3);\n  P.born = new Float32Array(N);\n  P.out = new Float32Array(N);\n  P.jit = new Float32Array(N);\n  P.vig = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = Math.floor(p / W);\n    P.jit[p] = Math.random();\n    // One bulb behind the middle of the board: the corners get about 70%.\n    P.vig[p] = 1 - 0.24 * (((x - 31.5) / 40) ** 2 + ((y - 63.5) / 80) ** 2);\n  }\n  P.t = 0;\n  P.started = false;\n}\n\n// Put a sheet on the board with no pegs in it yet.\nfunction begin(P, s) {\n  P.sheet = s;\n  P.k = 0;\n  P.placed = 0;\n  P.born.fill(-1);\n  P.out.fill(1e9);\n  P.phase = SWAPPING;\n  P.until = P.t + SWAP;\n  P.ghostFrom = P.t;\n}\n\nfunction startPull(P, dur) {\n  if (P.phase === PULLING || P.phase === SWAPPING) return;\n  P.phase = PULLING;\n  const { order } = P.sheets[P.sheet];\n  for (let i = 0; i \u003c P.k; i++) {\n    const p = order[i];\n    P.out[p] = P.t + dur * (0.85 * Math.floor(p / W) / H + 0.15 * P.jit[p]);\n  }\n  P.until = P.t + dur + 0.4;\n}\n\nfunction step(P, dt, speed) {\n  P.t += dt;\n  const n = P.sheets[P.sheet].order.length;\n  if (P.phase === FILL) {\n    P.placed += dt * RATE * speed;\n    const { order } = P.sheets[P.sheet];\n    while (P.k \u003c n && P.k \u003c P.placed) P.born[order[P.k++]] = P.t;\n    if (P.k >= n) {\n      P.phase = HOLDING;\n      P.until = P.t + HOLD;\n    }\n  } else if (P.phase === HOLDING) {\n    if (P.t >= P.until) startPull(P, PULL * Math.sqrt(2 / speed));\n  } else if (P.phase === PULLING) {\n    if (P.t >= P.until) {\n      begin(P, P.next >= 0 ? P.next : (P.sheet + 1) % SHEETS.length);\n      P.next = -1;\n    }\n  } else if (P.t >= P.until) {\n    P.phase = FILL;\n    P.placed = P.k;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.bulb = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const pick = Math.round(clamp(k[2], 0, 5));\n  P.glow = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    P.pick = pick;\n    P.next = -1;\n    begin(P, pick);\n    // The child has been at it a while when the panel opens: all but the\n    // last 1200 pegs are in, and five more seconds go by at the knob's pace,\n    // so at Speed 2 the picture is finished seven seconds in.\n    const { order } = P.sheets[pick];\n    P.phase = FILL;\n    P.k = Math.max(0, order.length - 1200);\n    P.placed = P.k;\n    for (let i = 0; i \u003c P.k; i++) P.born[order[i]] = -20;\n    for (let i = 0; i \u003c 150; i++) step(P, 1 / 30, speed);\n  }\n  if (pick !== P.pick) {\n    // A new sheet: a blank one goes straight on, a pegged one is cleared.\n    P.pick = pick;\n    if (P.phase === SWAPPING) begin(P, pick);\n    else {\n      P.next = pick;\n      startPull(P, 0.7);\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0] && (P.phase === FILL || P.phase === HOLDING)) {\n    P.next = P.sheet;\n    startPull(P, 1);\n  }\n  step(P, dt, speed);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  buf.fill(0);\n  const t = P.t;\n  const { col, order } = P.sheets[P.sheet];\n  // The bulb: a warm white at full, redder and dimmer down the dimmer.\n  const b = P.bulb;\n  const dim = 1 - 0.5 * b;\n  const tint = [dim, dim * (0.93 - 0.4 * b), dim * (0.82 - 0.64 * b)];\n  const g1 = 0.22 * P.glow;\n  const g2 = 0.1 * P.glow;\n  const ghost = P.phase === SWAPPING ? clamp((t - P.ghostFrom) / SWAP, 0, 1) : P.phase === PULLING ? 0 : 1;\n  const n = order.length;\n  for (let i = 0; i \u003c n; i++) {\n    const p = order[i];\n    const c = PEG[col[p]];\n    const x = p % W;\n    const y = (p - x) / W;\n    if (i >= P.k) {\n      if (ghost > 0) for (let ch = 0; ch \u003c 3; ch++) buf[p * 3 + ch] += c[ch] * GHOST * ghost;\n      continue;\n    }\n    if (t >= P.out[p]) {\n      // A pushed-out peg drops off the front of the board, no longer lit\n      // from behind.\n      const a = t - P.out[p];\n      const yy = Math.round(y + 130 * a * a);\n      if (a \u003c 0.4 && yy \u003c H) for (let ch = 0; ch \u003c 3; ch++) buf[(yy * W + x) * 3 + ch] += c[ch] * 0.3 * (1 - a / 0.4);\n      continue;\n    }\n    // A peg flares as it seats, then settles; the bulb's heat makes it\n    // shimmer by a couple of percent.\n    const age = t - P.born[p];\n    const env = age \u003c 0.1 ? 0.3 + 9 * age : 1 + 0.22 * Math.exp(-(age - 0.1) / 0.25);\n    const v = LEVEL * P.vig[p] * env * (1 + 0.035 * Math.sin(t * 9 + 40 * P.jit[p]));\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const L = c[ch] * tint[ch] * v;\n      buf[p * 3 + ch] += L;\n      if (g1 > 0) {\n        if (x > 0) buf[(p - 1) * 3 + ch] += L * g1;\n        if (x \u003c W - 1) buf[(p + 1) * 3 + ch] += L * g1;\n        if (y > 0) buf[(p - W) * 3 + ch] += L * g1;\n        if (y \u003c H - 1) buf[(p + W) * 3 + ch] += L * g1;\n        if (x > 0 && y > 0) buf[(p - W - 1) * 3 + ch] += L * g2;\n        if (x \u003c W - 1 && y > 0) buf[(p - W + 1) * 3 + ch] += L * g2;\n        if (x > 0 && y \u003c H - 1) buf[(p + W - 1) * 3 + ch] += L * g2;\n        if (x \u003c W - 1 && y \u003c H - 1) buf[(p + W + 1) * 3 + ch] += L * g2;\n      }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-peg-light","type":"code","name":"peg-light","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Peg Light\n// Family:  toy\n// Idea:    Translucent coloured pegs are pushed one at a time into the holes of a black peg board, following a printed template of a rocket, a sailboat, a flower pot, a fish, a house or a clown, each peg lit by the bulb behind, and when the picture is done it holds, the pegs are pushed out and the next sheet goes on.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after Lite-Brite, the peg board Hasbro brought out in 1967\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Bulb=0..1, Speed=0.2..3, Picture=0..5, Glow=0..1\n//\n// Knob 1: Bulb. The bulb behind the board, from a full warm white at 0 down a dimmer to a low orange glow at 1, where the blue and violet pegs go dark first.\n// Knob 2: Speed. Pegs pushed in per second, 10 at 0.2, 100 at 2 and 150 at 3; the pull-out sweep runs faster with it too.\n// Knob 3: Picture. Which template goes on: rocket, sailboat, flower pot, fish, house or clown; turning it pushes the pegs out and starts that sheet, and after it the sheets follow in that order.\n// Knob 4: Glow. How far each peg's light spills onto the black board round it, from a clean dot at 0 to a soft lit patch at 1.\n// Buttons: K1 tap pushes every peg out and starts the same picture again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The nine peg colours at full strength: red, orange, yellow, green, blue,\n// violet, pink, white (milky) and clear (the bare bulb). Index 0 is no peg.\nconst PEG = [\n  null,\n  [255, 26, 18],\n  [255, 112, 8],\n  [255, 214, 16],\n  [24, 224, 40],\n  [28, 84, 255],\n  [150, 36, 255],\n  [255, 70, 150],\n  [222, 222, 228],\n  [255, 250, 236],\n];\n// A lit peg's brightest channel at the board's centre, and the printed\n// template dot behind an empty hole (under 20 of 255: barely there).\nconst LEVEL = 0.88;\nconst GHOST = 15 / 255;\n// Pegs pushed in per second for each unit of Speed.\nconst RATE = 50;\nconst HOLD = 4;\nconst PULL = 1.8;\nconst SWAP = 0.8;\nconst FILL = 0;\nconst HOLDING = 1;\nconst PULLING = 2;\nconst SWAPPING = 3;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction inPoly(x, y, q) {\n  let inside = false;\n  for (let i = 0, j = q.length - 2; i \u003c q.length; j = i, i += 2) {\n    const xi = q[i];\n    const yi = q[i + 1];\n    const xj = q[j];\n    const yj = q[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;\n  }\n  return inside;\n}\n\nfunction segDist(x, y, x0, y0, x1, y1) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const u = clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return Math.hypot(x - x0 - u * dx, y - y0 - u * dy);\n}\n\n// The six template sheets, painted with discs, boxes, polygons, thick lines\n// and rings in the order a child would fill them. Colour 0 rubs out.\nconst SHEETS = [\n  // Rocket: a moon, a ringed planet, stars, the rocket and its smoke.\n  (D, R, T, L, put) => {\n    const stars = [5, 32, 26, 6, 40, 9, 58, 44, 6, 52, 12, 70, 57, 66, 4, 92, 58, 90, 9, 108, 56, 108, 20, 36, 46, 4, 60, 4, 2, 4, 14, 58, 50, 56, 8, 80, 54, 80];\n    for (let i = 0; i \u003c stars.length; i += 2) D(i % 4 ? 9 : 8, stars[i], stars[i + 1], i % 6 ? 1.5 : 0.6);\n    D(3, 12, 15, 9);\n    D(0, 16, 12, 7.5);\n    D(6, 51, 25, 7.5);\n    put(2, (x, y) => {\n      const e = ((x - 51) / 14) ** 2 + ((y - 25) / 3.4) ** 2;\n      return e > 0.55 && e \u003c 1 && (y >= 25 || ((x - 51) / 7.5) ** 2 + ((y - 25) / 7.5) ** 2 > 1);\n    });\n    T(1, 32, 22, 43, 44, 21, 44);\n    R(8, 21, 44, 43, 92);\n    D(5, 32, 57, 6);\n    D(9, 30, 55, 1.5);\n    D(5, 32, 72, 3.5);\n    R(1, 21, 80, 43, 83);\n    T(1, 21, 70, 21, 94, 9, 103, 9, 86);\n    T(1, 43, 70, 43, 94, 55, 103, 55, 86);\n    R(6, 30, 86, 34, 100);\n    R(2, 25, 93, 39, 97);\n    T(2, 23, 98, 41, 98, 32, 124);\n    T(3, 27, 98, 37, 98, 32, 116);\n    T(9, 30, 98, 34, 98, 32, 108);\n    D(8, 16, 121, 9, 6);\n    D(8, 48, 122, 10, 6);\n    D(9, 4, 126, 7, 4);\n    D(9, 60, 126, 7, 4);\n  },\n  // Sailboat: sun, cloud, gulls, two sails, a red hull and the sea.\n  (D, R, T, L, put) => {\n    D(3, 50, 14, 8.5);\n    for (let a = 0; a \u003c 8; a++) L(3, 50 + 11 * Math.cos(a * 0.785), 14 + 11 * Math.sin(a * 0.785), 50 + 15 * Math.cos(a * 0.785), 14 + 15 * Math.sin(a * 0.785), 0.9);\n    D(8, 14, 16, 10, 4.5);\n    D(8, 20, 12, 7, 4);\n    D(9, 8, 13, 5, 3);\n    for (const [gx, gy] of [[9, 34], [20, 42], [52, 38]]) {\n      L(8, gx - 4, gy - 2, gx, gy, 0.8);\n      L(8, gx, gy, gx + 4, gy - 2, 0.8);\n    }\n    L(2, 31, 20, 31, 90, 1.1);\n    T(1, 32, 17, 32, 25, 42, 21);\n    T(8, 34, 26, 34, 86, 60, 86);\n    put(1, (x, y) => y >= 64 && y \u003c= 69 && inPoly(x, y, [34, 26, 34, 86, 60, 86]));\n    T(7, 28, 32, 28, 86, 4, 86);\n    T(1, 2, 89, 62, 89, 54, 103, 10, 103);\n    R(8, 6, 93, 58, 94);\n    for (let x = 16; x \u003c 50; x += 8) D(3, x, 98, 1.5);\n    put(5, (x, y) => y >= 105 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 \u003c 3.6);\n    put(8, (x, y) => y >= 105 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 >= 3.6 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 \u003c 4.4);\n    put(4, (x, y) => y >= 122);\n  },\n  // Flower pot: three flowers on stems with leaves, a butterfly, the pot.\n  (D, R, T, L, put) => {\n    L(4, 32, 88, 32, 40, 1.3);\n    L(4, 31, 72, 14, 46, 1.2);\n    L(4, 33, 66, 50, 32, 1.2);\n    T(4, 32, 80, 18, 70, 12, 58, 26, 66);\n    T(4, 32, 76, 46, 68, 54, 56, 40, 62);\n    T(4, 32, 60, 22, 54, 18, 44, 28, 50);\n    for (const [cx, cy, r, c] of [[32, 34, 11, 1], [14, 42, 9, 6], [50, 28, 9, 7]]) {\n      for (let a = 0; a \u003c 6; a++) D(c, cx + r * 0.55 * Math.cos(a * 1.047), cy + r * 0.55 * Math.sin(a * 1.047), r * 0.48);\n      D(3, cx, cy, r * 0.36);\n    }\n    T(5, 10, 8, 18, 15, 10, 20);\n    T(5, 26, 8, 18, 15, 26, 20);\n    L(8, 18, 10, 18, 20, 0.7);\n    R(2, 10, 88, 54, 95);\n    T(2, 13, 96, 51, 96, 45, 124, 19, 124);\n    put(7, (x, y) => y >= 104 && y \u003c= 108 && inPoly(x, y, [13, 96, 51, 96, 45, 124, 19, 124]));\n    for (let x = 22; x \u003c= 42; x += 5) D(3, x, 114, 1.5);\n    R(6, 2, 125, 61, 127);\n  },\n  // Fish: a big striped fish, a small one, bubbles, weed and sand.\n  (D, R, T, L, put) => {\n    for (const [bx, by, r] of [[18, 10, 3.5], [10, 20, 2.5], [22, 26, 2], [48, 64, 3], [56, 80, 2.5]]) put(9, (x, y) => Math.abs(Math.hypot(x - bx, y - by) - r) \u003c 0.8);\n    T(2, 50, 58, 63, 42, 63, 74);\n    D(2, 30, 58, 23, 16);\n    T(2, 22, 43, 40, 43, 34, 34);\n    T(2, 26, 72, 38, 72, 30, 80);\n    put(3, (x, y) => ((x - 30) / 23) ** 2 + ((y - 58) / 16) ** 2 \u003c= 1 && (Math.abs(x - 24) \u003c 2.2 || Math.abs(x - 36) \u003c 2.2));\n    D(8, 15, 54, 4.5);\n    D(5, 14, 54, 2.2);\n    L(1, 7, 62, 12, 63, 1);\n    D(6, 44, 22, 9, 5.5);\n    T(6, 52, 22, 60, 15, 60, 29);\n    D(8, 39, 21, 1.5);\n    for (const sx of [8, 20, 46, 58]) L(4, sx, 120, sx + 3 * Math.sin(sx), 92 - (sx % 3) * 6, 1.6);\n    put(4, (x, y) => y > 86 && y \u003c 120 && [8, 20, 46, 58].some((s) => Math.abs(x - s - 2.5 * Math.sin(y * 0.35 + s)) \u003c 1.6));\n    put(3, (x, y) => y >= 118 + 2 * Math.sin(x * 0.3));\n    D(7, 30, 121, 3.5);\n    D(1, 50, 122, 2.5);\n  },\n  // House: sun, cloud, red roof, chimney smoke, yellow walls, a garden.\n  (D, R, T, L, put) => {\n    D(3, 10, 10, 7.5);\n    D(8, 42, 10, 9, 4);\n    D(9, 50, 7, 6, 3.5);\n    R(1, 44, 24, 50, 44);\n    D(8, 47, 19, 3);\n    D(8, 51, 13, 2.5);\n    T(1, 32, 22, 60, 50, 4, 50);\n    R(3, 9, 50, 55, 98);\n    R(2, 27, 74, 37, 98);\n    D(3, 35, 86, 1);\n    for (const wx of [13, 41]) {\n      R(5, wx, 58, wx + 10, 69);\n      L(8, wx + 5, 58, wx + 5, 69, 0.6);\n      L(8, wx, 63.5, wx + 10, 63.5, 0.6);\n      R(7, wx - 1, 70, wx + 11, 72);\n    }\n    D(5, 32, 38, 4);\n    put(4, (x, y) => y >= 99 && y \u003c= 110);\n    T(8, 27, 99, 37, 99, 44, 127, 20, 127);\n    for (const [fx, fy, c] of [[6, 104, 1], [14, 108, 6], [50, 105, 7], [58, 109, 3]]) {\n      L(4, fx, fy, fx, fy + 12, 0.7);\n      D(c, fx, fy, 2.6);\n    }\n    put(4, (x, y) => y >= 120 && (x \u003c 20 || x > 44));\n  },\n  // Clown: hat and pompom, orange hair, white face, nose, smile, bow tie.\n  (D, R, T, L, put) => {\n    T(6, 18, 30, 46, 30, 32, 6);\n    D(3, 32, 6, 4.5);\n    for (const [hx, hy] of [[28, 22], [36, 26], [32, 14]]) D(8, hx, hy, 1.5);\n    for (const s of [-1, 1]) {\n      D(2, 32 + s * 21, 46, 8);\n      D(2, 32 + s * 24, 58, 7);\n      D(2, 32 + s * 20, 68, 6);\n    }\n    D(8, 32, 54, 18, 23);\n    for (const s of [-1, 1]) {\n      D(5, 32 + s * 7, 47, 3.5, 4.5);\n      L(6, 32 + s * 4, 39, 32 + s * 11, 39, 0.8);\n      D(7, 32 + s * 12, 62, 3.5);\n    }\n    D(1, 32, 57, 5);\n    put(1, (x, y) => {\n      const d = Math.hypot(x - 32, y - 60);\n      return d > 7.5 && d \u003c 10.5 && y > 64;\n    });\n    T(5, 32, 86, 12, 78, 12, 96);\n    T(5, 32, 86, 52, 78, 52, 96);\n    D(1, 32, 86, 3.5);\n    for (const [bx, by] of [[18, 82], [17, 91], [46, 82], [47, 91]]) D(3, bx, by, 1.5);\n    put(3, (x, y) => y >= 98 && ((y >> 2) & 1) === 0 && Math.abs(x - 32) \u003c 14 + (y - 98) * 0.5);\n    put(1, (x, y) => y >= 98 && ((y >> 2) & 1) === 1 && Math.abs(x - 32) \u003c 14 + (y - 98) * 0.5);\n  },\n];\n\n// Paint one sheet: each hole's colour, then the order the pegs go in, one\n// colour after another as it first appears, top to bottom with a little\n// wander so the work has a ragged front.\nfunction buildSheet(art) {\n  const col = new Uint8Array(N);\n  const firsts = [];\n  const put = (c, f) => {\n    if (c && !firsts.includes(c)) firsts.push(c);\n    for (let y = 0; y \u003c H; y++) for (let x = y & 1; x \u003c W; x += 2) if (f(x, y)) col[y * W + x] = c;\n  };\n  const D = (c, cx, cy, rx, ry) => put(c, (x, y) => ((x - cx) / rx) ** 2 + ((y - cy) / (ry || rx)) ** 2 \u003c= 1);\n  const R = (c, x0, y0, x1, y1) => put(c, (x, y) => x >= x0 && x \u003c= x1 && y >= y0 && y \u003c= y1);\n  const T = (c, ...q) => put(c, (x, y) => inPoly(x, y, q));\n  const L = (c, x0, y0, x1, y1, w) => put(c, (x, y) => segDist(x, y, x0, y0, x1, y1) \u003c= w);\n  art(D, R, T, L, put);\n  const order = [];\n  for (const c of firsts) {\n    const run = [];\n    for (let p = 0; p \u003c N; p++) if (col[p] === c) run.push([p, Math.floor(p / W) + 7 * Math.random() + (p % W) * 0.04]);\n    run.sort((a, b) => a[1] - b[1]);\n    for (const r of run) order.push(r[0]);\n  }\n  return { col, order: Int32Array.from(order) };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.sheets = SHEETS.map(buildSheet);\n  P.buf = new Float32Array(N * 3);\n  P.born = new Float32Array(N);\n  P.out = new Float32Array(N);\n  P.jit = new Float32Array(N);\n  P.vig = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = Math.floor(p / W);\n    P.jit[p] = Math.random();\n    // One bulb behind the middle of the board: the corners get about 70%.\n    P.vig[p] = 1 - 0.24 * (((x - 31.5) / 40) ** 2 + ((y - 63.5) / 80) ** 2);\n  }\n  P.t = 0;\n  P.started = false;\n}\n\n// Put a sheet on the board with no pegs in it yet.\nfunction begin(P, s) {\n  P.sheet = s;\n  P.k = 0;\n  P.placed = 0;\n  P.born.fill(-1);\n  P.out.fill(1e9);\n  P.phase = SWAPPING;\n  P.until = P.t + SWAP;\n  P.ghostFrom = P.t;\n}\n\nfunction startPull(P, dur) {\n  if (P.phase === PULLING || P.phase === SWAPPING) return;\n  P.phase = PULLING;\n  const { order } = P.sheets[P.sheet];\n  for (let i = 0; i \u003c P.k; i++) {\n    const p = order[i];\n    P.out[p] = P.t + dur * (0.85 * Math.floor(p / W) / H + 0.15 * P.jit[p]);\n  }\n  P.until = P.t + dur + 0.4;\n}\n\nfunction step(P, dt, speed) {\n  P.t += dt;\n  const n = P.sheets[P.sheet].order.length;\n  if (P.phase === FILL) {\n    P.placed += dt * RATE * speed;\n    const { order } = P.sheets[P.sheet];\n    while (P.k \u003c n && P.k \u003c P.placed) P.born[order[P.k++]] = P.t;\n    if (P.k >= n) {\n      P.phase = HOLDING;\n      P.until = P.t + HOLD;\n    }\n  } else if (P.phase === HOLDING) {\n    if (P.t >= P.until) startPull(P, PULL * Math.sqrt(2 / speed));\n  } else if (P.phase === PULLING) {\n    if (P.t >= P.until) {\n      begin(P, P.next >= 0 ? P.next : (P.sheet + 1) % SHEETS.length);\n      P.next = -1;\n    }\n  } else if (P.t >= P.until) {\n    P.phase = FILL;\n    P.placed = P.k;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.bulb = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const pick = Math.round(clamp(k[2], 0, 5));\n  P.glow = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    P.pick = pick;\n    P.next = -1;\n    begin(P, pick);\n    // The child has been at it a while when the panel opens: all but the\n    // last 1200 pegs are in, and five more seconds go by at the knob's pace,\n    // so at Speed 2 the picture is finished seven seconds in.\n    const { order } = P.sheets[pick];\n    P.phase = FILL;\n    P.k = Math.max(0, order.length - 1200);\n    P.placed = P.k;\n    for (let i = 0; i \u003c P.k; i++) P.born[order[i]] = -20;\n    for (let i = 0; i \u003c 150; i++) step(P, 1 / 30, speed);\n  }\n  if (pick !== P.pick) {\n    // A new sheet: a blank one goes straight on, a pegged one is cleared.\n    P.pick = pick;\n    if (P.phase === SWAPPING) begin(P, pick);\n    else {\n      P.next = pick;\n      startPull(P, 0.7);\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0] && (P.phase === FILL || P.phase === HOLDING)) {\n    P.next = P.sheet;\n    startPull(P, 1);\n  }\n  step(P, dt, speed);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  buf.fill(0);\n  const t = P.t;\n  const { col, order } = P.sheets[P.sheet];\n  // The bulb: a warm white at full, redder and dimmer down the dimmer.\n  const b = P.bulb;\n  const dim = 1 - 0.5 * b;\n  const tint = [dim, dim * (0.93 - 0.4 * b), dim * (0.82 - 0.64 * b)];\n  const g1 = 0.22 * P.glow;\n  const g2 = 0.1 * P.glow;\n  const ghost = P.phase === SWAPPING ? clamp((t - P.ghostFrom) / SWAP, 0, 1) : P.phase === PULLING ? 0 : 1;\n  const n = order.length;\n  for (let i = 0; i \u003c n; i++) {\n    const p = order[i];\n    const c = PEG[col[p]];\n    const x = p % W;\n    const y = (p - x) / W;\n    if (i >= P.k) {\n      if (ghost > 0) for (let ch = 0; ch \u003c 3; ch++) buf[p * 3 + ch] += c[ch] * GHOST * ghost;\n      continue;\n    }\n    if (t >= P.out[p]) {\n      // A pushed-out peg drops off the front of the board, no longer lit\n      // from behind.\n      const a = t - P.out[p];\n      const yy = Math.round(y + 130 * a * a);\n      if (a \u003c 0.4 && yy \u003c H) for (let ch = 0; ch \u003c 3; ch++) buf[(yy * W + x) * 3 + ch] += c[ch] * 0.3 * (1 - a / 0.4);\n      continue;\n    }\n    // A peg flares as it seats, then settles; the bulb's heat makes it\n    // shimmer by a couple of percent.\n    const age = t - P.born[p];\n    const env = age \u003c 0.1 ? 0.3 + 9 * age : 1 + 0.22 * Math.exp(-(age - 0.1) / 0.25);\n    const v = LEVEL * P.vig[p] * env * (1 + 0.035 * Math.sin(t * 9 + 40 * P.jit[p]));\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const L = c[ch] * tint[ch] * v;\n      buf[p * 3 + ch] += L;\n      if (g1 > 0) {\n        if (x > 0) buf[(p - 1) * 3 + ch] += L * g1;\n        if (x \u003c W - 1) buf[(p + 1) * 3 + ch] += L * g1;\n        if (y > 0) buf[(p - W) * 3 + ch] += L * g1;\n        if (y \u003c H - 1) buf[(p + W) * 3 + ch] += L * g1;\n        if (x > 0 && y > 0) buf[(p - W - 1) * 3 + ch] += L * g2;\n        if (x \u003c W - 1 && y > 0) buf[(p - W + 1) * 3 + ch] += L * g2;\n        if (x > 0 && y \u003c H - 1) buf[(p + W - 1) * 3 + ch] += L * g2;\n        if (x \u003c W - 1 && y \u003c H - 1) buf[(p + W + 1) * 3 + ch] += L * g2;\n      }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Bulb=0..1, Speed=0.2..3, Picture=0..5, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Bulb","min":0,"max":1,"about":"The bulb behind the board, from a full warm white at 0 down a dimmer to a low orange glow at 1, where the blue and violet pegs go dark first."},{"name":"Speed","min":0.2,"max":3,"about":"Pegs pushed in per second, 10 at 0.2, 100 at 2 and 150 at 3; the pull-out sweep runs faster with it too."},{"name":"Picture","min":0,"max":5,"about":"Which template goes on: rocket, sailboat, flower pot, fish, house or clown; turning it pushes the pegs out and starts that sheet, and after it the sheets follow in that order."},{"name":"Glow","min":0,"max":1,"about":"How far each peg's light spills onto the black board round it, from a clean dot at 0 to a soft lit patch at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.0352,"detail":0.2377,"edges":0.8627,"complexity":0.6614,"coverage":0.1604,"colour":0.2171,"drift":0.0512},"knobResponse":[0.0548,0.0566,0.1395,0.0943]},{"slug":"pin-art","title":"Pin Art","family":"toy","round":22,"note":"핀 아트 장난감을 앞에서 봐요. 엇갈린 격자의 강철 핀 4096개가 패널을 채우고, 뒤에서 펼친 손이 눌러 들어오면 밀려 나온 핀만 비스듬한 등빛을 받아 빛나요. 장난감을 기울이면 핀이 물결치며 평평해지고 열쇠가 다음으로 눌러 들어와요.","idea":"A pin-art desk toy seen from the front fills the panel with four thousand steel pins in a staggered grid, and a spread hand, a key, a seashell, a toy car and a face press in from behind one after another, each relief rising out of the dim pins into a raking lamp until the toy is tilted and the pins slide flat again in a ripple.","buttons":"K1 tap tilts the toy flat now and presses the next object in.","code":"// ===== Patternflow pattern =====\n// Title:   Pin Art\n// Family:  toy\n// Idea:    A pin-art desk toy seen from the front fills the panel with four thousand steel pins in a staggered grid, and a spread hand, a key, a seashell, a toy car and a face press in from behind one after another, each relief rising out of the dim pins into a raking lamp until the toy is tilted and the pins slide flat again in a ripple.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after Ward Fleming's pinscreen desk toy (1985)\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Metal=0..1, Speed=0.2..3, Object=0..4, Light=0..1\n//\n// Knob 1: Metal. The finish of the pins and the colour the lamp gives them: blue steel at 0, turning through violet and pink to brass in the middle, then through green back to blue steel at 1.\n// Knob 2: Speed. How fast things press in, hold and are tilted flat again: at 2 an object takes 3 s to press in and a round is 8 s; at 0.2 it all runs ten times slower.\n// Knob 3: Object. What presses in next: a spread hand, a key, a seashell, a toy car or a face, the rest following in that order. Turning it tilts the toy flat and brings the new one.\n// Knob 4: Light. Where the desk lamp stands, going once round the toy from its left side, upper left at the start. The relief shines on the lamp's side and throws its shadow away from it, and the flat pins are brighter nearer the lamp.\n// Buttons: K1 tap tilts the toy flat now and presses the next object in.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst NOBJ = 5;\n// The round at Speed 2, in seconds: press in, hold, tilt flat, rest.\nconst TP = 3.0;\nconst TH = 3.3;\nconst TW = 1.25;\nconst TR = 0.5;\nconst TC = TP + TH + TW + TR;\nconst { min, max, sqrt, sin, cos, exp, abs, round, hypot, atan2, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// A fixed hash, so the pins are the same uneven pins on every run.\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Distances to shapes, negative inside. seg() leaves how far along the\n// segment the nearest point lies in T.\nlet T = 0;\nfunction seg(px, py, ax, ay, bx, by) {\n  const dx = bx - ax;\n  const dy = by - ay;\n  T = clamp(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy), 0, 1);\n  return hypot(px - ax - dx * T, py - ay - dy * T);\n}\nfunction box(px, py, cx, cy, hx, hy, r) {\n  const qx = abs(px - cx) - hx + r;\n  const qy = abs(py - cy) - hy + r;\n  return hypot(max(qx, 0), max(qy, 0)) + min(max(qx, qy), 0) - r;\n}\nfunction ell(px, py, cx, cy, rx, ry) {\n  return (hypot((px - cx) / rx, (py - cy) / ry) - 1) * min(rx, ry);\n}\nfunction smin(a, b, k) {\n  const h = clamp(0.5 + (0.5 * (b - a)) / k, 0, 1);\n  return b + (a - b) * h - k * h * (1 - h);\n}\n// A soft round bump, near enough a Gaussian, that ends 2 radii out.\nconst bump = (px, py, cx, cy, rx, ry) => {\n  const q = ((px - cx) / rx) ** 2 + ((py - cy) / ry) ** 2;\n  return q \u003c 4 ? (1 - q / 4) ** 3 : 0;\n};\n// A rounded edge: 0 at the outline, 1 once r LEDs inside it.\nconst prof = (d, r) => {\n  const t = clamp(-d / r, 0, 1);\n  return sqrt(t * (2 - t));\n};\n// Pins next to the outline are dragged a little way out with it.\nconst halo = (d) => (d \u003c 5 ? 0.17 * exp(-d / 1.6) : 0);\n\n// Each object is a height above the pins' rest plane, 0..1, at an LED.\n// The fingers: base and tip of each, and the radius.\nconst FING = [\n  [15, 84, 3, 56, 6],\n  [20, 61, 10, 22, 5.8],\n  [30, 58, 29, 9, 6],\n  [39, 59, 47, 15, 5.8],\n  [47, 65, 59, 35, 5.2],\n];\nfunction hand(x, y) {\n  let d = box(x, y, 32, 77, 19, 17, 9);\n  let crease = 0;\n  for (let f = 0; f \u003c 5; f++) {\n    const [ax, ay, bx, by, r] = FING[f];\n    const e = seg(x, y, ax, ay, bx, by) - r;\n    if (e \u003c 0) {\n      const len = hypot(bx - ax, by - ay);\n      const j = f ? [0.4, 0.68] : [0.55, 0.55];\n      crease = max(crease, exp(-(((T - j[0]) * len) ** 2) / 0.8), exp(-(((T - j[1]) * len) ** 2) / 0.8));\n    }\n    d = smin(d, e, 2.5);\n  }\n  d = smin(d, seg(x, y, 32, 92, 32, 150) - 15.5, 8);\n  if (d > 0) return halo(d);\n  let r = 0.5 + 0.38 * prof(d, 8);\n  // The pads below the fingers, the ball of the thumb, and the lines of the palm.\n  r += 0.08 * bump(x, y, 22, 92, 8, 10) + 0.05 * bump(x, y, 34, 66, 14, 4) + 0.05 * bump(x, y, 43, 86, 6, 9);\n  r -= 0.1 * crease;\n  const heart = abs(y - (68 + 0.012 * (x - 30) ** 2 - 0.1 * (x - 30)));\n  const life = abs(hypot(x - 14, y - 92) - 15);\n  if (x > 18 && x \u003c 48 && y \u003c 80) r -= 0.1 * exp(-heart * heart);\n  if (y > 70 && y \u003c 104 && x > 18) r -= 0.1 * exp(-life * life);\n  return clamp(r, 0, 1);\n}\n\nfunction face(x, y) {\n  let d = ell(x, y, 32, 54, 24 - max(0, y - 60) * 0.24, 35);\n  d = smin(d, min(ell(x, y, 7, 56, 3.5, 8), ell(x, y, 57, 56, 3.5, 8)), 1.5);\n  const head = d;\n  d = smin(d, seg(x, y, 32, 88, 32, 140) - 10.5, 4);\n  d = smin(d, ell(x, y, 32, 142, 54, 28), 10);\n  if (d > 0) return halo(d);\n  let r = 0.42 + 0.24 * prof(d, 12);\n  // The neck and shoulders sit back under the jaw.\n  r -= 0.2 * sstep(-2, 2, head);\n  // Hair, combed back in strands from the hairline.\n  const hl = 33 + 0.012 * (x - 32) ** 2;\n  if (y \u003c hl) r += 0.04 * sstep(hl, hl - 3, y) + 0.06 * sin(x * 1.25 + (y - 20) * (x - 32) * 0.012);\n  // Brows, eye sockets and eyes, the nose, cheeks, lips and chin.\n  r += 0.06 * bump(x, y, 32, 36, 16, 9);\n  r += 0.12 * (bump(x, y, 22, 44, 7, 1.8) + bump(x, y, 42, 44, 7, 1.8));\n  r -= 0.3 * (bump(x, y, 22, 51, 6, 3.4) + bump(x, y, 42, 51, 6, 3.4));\n  r += 0.16 * (bump(x, y, 22, 51.5, 3, 1.8) + bump(x, y, 42, 51.5, 3, 1.8));\n  r += 0.3 * bump(x, y, 32, 59, 2.4, 9) + 0.18 * bump(x, y, 32, 67.5, 4.5, 2.6);\n  r -= 0.14 * (bump(x, y, 29, 70, 1.4, 1.1) + bump(x, y, 35, 70, 1.4, 1.1));\n  r += 0.12 * (bump(x, y, 19, 64, 6, 6) + bump(x, y, 45, 64, 6, 6));\n  r += 0.14 * bump(x, y, 32, 76.5, 6.5, 1.5) + 0.16 * bump(x, y, 32, 80.5, 5.5, 1.9) - 0.2 * bump(x, y, 32, 78.5, 7.5, 0.7);\n  r += 0.12 * bump(x, y, 32, 87, 6, 3);\n  return clamp(r, 0, 1);\n}\n\nfunction key(x, y) {\n  const rr = hypot(x - 32, y - 25);\n  let d = max(rr - 21, 9 - rr);\n  d = min(d, box(x, y, 32, 47, 9, 3, 1), box(x, y, 32, 55, 7, 2.5, 1), box(x, y, 32, 83, 4.5, 38, 2));\n  let bit = box(x, y, 44, 107, 8, 11, 1);\n  bit = max(bit, -box(x, y, 51, 101, 2.5, 2, 0), -box(x, y, 51, 111, 2.5, 2.5, 0), -box(x, y, 44, 106, 1.2, 5, 0));\n  d = min(d, bit);\n  if (d > 0) return halo(d);\n  let r = 0.72 + 0.2 * prof(d, 3);\n  // A raised rim round the bow's hole and a groove down the shank.\n  r += 0.08 * exp(-((rr - 12) ** 2) / 2);\n  if (y > 60 && y \u003c 118) r -= 0.12 * exp(-((x - 32) ** 2) / 1.2);\n  return clamp(r, 0, 1);\n}\n\n// A scallop, hinge down: ribs fan out from the hinge to a wavy edge.\nfunction shell(x, y) {\n  const dx = x - 32;\n  const dy = 92 - y;\n  const rho = hypot(dx, dy);\n  const th = atan2(dx, dy);\n  const rib = cos(th * 48);\n  let d = max(rho - 54 * (1 - 0.3 * th * th) - 1.2 * rib, (abs(th) - 0.85) * rho);\n  d = smin(d, box(x, y, 32, 94, 15, 5, 2), 3);\n  if (d > 0) return halo(d);\n  let r = 0.5 + 0.32 * prof(d, 14);\n  r += 0.13 * rib * sstep(5, 22, rho) * (dy > 0) + 0.025 * sin(rho * 1.4);\n  r -= 0.12 * exp(-((y - 89) ** 2) / 1.5) * (abs(dx) \u003c 14);\n  return clamp(r, 0, 1);\n}\n\n// A toy car seen from above, its nose at the top.\nfunction car(x, y) {\n  let body = box(x, y, 32, 65, 14 + min(3, max(0, y - 14) * 0.12), 52, 11);\n  body = smin(body, min(ell(x, y, 18, 36, 5, 12), ell(x, y, 46, 36, 5, 12), ell(x, y, 17, 96, 5, 12), ell(x, y, 47, 96, 5, 12)), 3);\n  const tyre = min(box(x, y, 11, 36, 3, 8, 1.5), box(x, y, 53, 36, 3, 8, 1.5), box(x, y, 10, 96, 3, 8, 1.5), box(x, y, 54, 96, 3, 8, 1.5));\n  const d = min(body, tyre);\n  if (d > 0) return halo(d);\n  if (body > 0) return 0.36 + 0.1 * prof(tyre, 2.5);\n  let r = 0.5 + 0.16 * prof(body, 4);\n  // The cabin: windscreen and rear window sunk between bonnet, roof and boot.\n  const xw = abs(x - 32);\n  const scr = xw \u003c 12 - (58 - y) * 0.25 && y > 45 && y \u003c 58;\n  const rear = xw \u003c 11 && y > 91 && y \u003c 99;\n  const roof = box(x, y, 32, 74.5, 11, 16, 3);\n  r += 0.14 * sstep(1, -1, roof) - 0.2 * (scr || rear);\n  // Bonnet creases, headlights, wing mirrors, the spoiler at the back.\n  r -= 0.14 * (exp(-((x - 23) ** 2) / 0.6) + exp(-((x - 41) ** 2) / 0.6)) * (y > 17 && y \u003c 42);\n  r += 0.16 * (bump(x, y, 22, 16, 3.5, 2.2) + bump(x, y, 42, 16, 3.5, 2.2)) + 0.18 * (bump(x, y, 15, 56, 3, 2) + bump(x, y, 49, 56, 3, 2));\n  r += 0.18 * sstep(1, -1, box(x, y, 32, 112, 16, 2, 1)) - 0.12 * sstep(1, -1, box(x, y, 32, 108, 14, 1, 0.5));\n  return clamp(r, 0, 1);\n}\n\nconst OBJECTS = [hand, key, shell, car, face];\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.pin = { r: F(N), gx: F(N), gy: F(N), ht: F(N), jit: F(N), started: false };\n  const P = params.pin;\n  for (let i = 0; i \u003c N; i++) P.jit[i] = 0.88 + 0.24 * hash(i);\n}\n\n// The object's heights, and their slopes for the lamp.\nfunction load(P, o) {\n  const { r, gx, gy } = P;\n  const fn = OBJECTS[o];\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) r[y * W + x] = fn(x + 0.5, y + 0.5);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      gx[i] = (r[y * W + min(W - 1, x + 1)] - r[y * W + max(0, x - 1)]) / 2;\n      gy[i] = (r[min(H - 1, y + 1) * W + x] - r[max(0, y - 1) * W + x]) / 2;\n    }\n}\n\nfunction tilt(P) {\n  if (P.c \u003c TP + TH) {\n    P.sw = P.s;\n    P.c = TP + TH;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.pin) setup(params);\n  const P = params.pin;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, NOBJ - 1);\n  P.lamp = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    P.base = base;\n    P.count = -1;\n    // Open on the last object of the round, just as the toy is tilted.\n    load(P, (base + NOBJ - 1) % NOBJ);\n    P.c = TP + TH - 0.05;\n    P.s = 1;\n    P.sw = 1;\n  }\n  if (base !== P.base) {\n    P.base = base;\n    P.count = -1;\n    tilt(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) tilt(P);\n  P.c += dt * P.rate;\n  if (P.c >= TC) {\n    P.c -= TC;\n    P.count++;\n    load(P, (P.base + P.count + NOBJ * 8) % NOBJ);\n  }\n  if (P.c \u003c TP) {\n    const u = P.c / TP;\n    P.s = u * (1.3 - 0.3 * u);\n  } else if (P.c \u003c TP + TH) P.s = 1;\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function draw(display, params) {\n  const P = params.pin;\n  if (!P || !P.started) return;\n  const { r, gx, gy, ht, jit } = P;\n  const lift = 1 - P.s;\n  // The tilt: a front runs down the panel, the pins behind it slide back and\n  // rattle a little as they go.\n  const wt = P.c - TP - TH;\n  const wiping = wt >= 0;\n  const yf = -16 + (wt / TW) * 170;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (!wiping) {\n        const h = r[i] - lift;\n        ht[i] = h > 0 ? h : 0;\n        continue;\n      }\n      const dd = yf - y - 5 * sin(x * 0.19 + 1.3) - 3 * sin(x * 0.47);\n      let h = r[i] - (1 - P.sw);\n      h = h > 0 ? h * (1 - sstep(0, 12, dd)) : 0;\n      if (dd > 0) h += 0.16 * max(0, sin(dd * 0.6)) * exp(-dd / 22);\n      ht[i] = h;\n    }\n\n  // The lamp, low and to one side.\n  const ang = PI * (0.87 - 2 * P.lamp);\n  const lx = cos(ang);\n  const ly = -sin(ang);\n  const tint = hsv((0.6 + P.hue) % 1, 0.85, 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const h = ht[i];\n      // Shadow: does a taller pin stand between this one and the lamp?\n      let ex = 0;\n      for (let j = 1; j \u003c= 7; j++) {\n        const sx = round(x + j * 1.5 * lx);\n        const sy = round(y + j * 1.5 * ly);\n        if (sx \u003c 0 || sx >= W || sy \u003c 0 || sy >= H) break;\n        const e = ht[sy * W + sx] - h - j * 0.12;\n        if (e > ex) ex = e;\n      }\n      const shadow = 1 - 0.34 * sstep(0, 0.12, ex);\n      const q = clamp(0.5 + ((x - 31.5) * lx + (y - 63.5) * ly) / 140, 0, 1);\n      let v;\n      let wh;\n      if (((x + y) & 1) === 0) {\n        const flat = 106 * (0.72 + 0.56 * q) * jit[i];\n        const up = sstep(0, 0.1, h);\n        const shade = clamp(1.02 - 4.5 * (gx[i] * lx + gy[i] * ly), 0.5, 1.3);\n        const raised = min(255, 255 * (0.66 + 0.4 * min(1, h)) * shade);\n        v = (flat + (raised - flat) * up) * shadow;\n        wh = 0.3 + 0.4 * clamp((v - 90) / 165, 0, 1);\n      } else {\n        // A gap: dark, unless the pins round it stand out and show their shafts.\n        const n = (ht[i - (x > 0 ? 1 : 0)] + ht[i + (x \u003c W - 1 ? 1 : 0)] + ht[i - (y > 0 ? W : 0)] + ht[i + (y \u003c H - 1 ? W : 0)]) / 4;\n        const shade = clamp(0.92 - 3 * (gx[i] * lx + gy[i] * ly), 0.35, 1.15);\n        v = 175 * sstep(0.02, 0.3, n) * shade * shadow;\n        wh = 0.15;\n      }\n      display.setPixel(x, y, v * (tint[0] + (1 - tint[0]) * wh), v * (tint[1] + (1 - tint[1]) * wh), v * (tint[2] + (1 - tint[2]) * wh));\n    }\n}\n","layer":{"id":"layer-pin-art","type":"code","name":"pin-art","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pin Art\n// Family:  toy\n// Idea:    A pin-art desk toy seen from the front fills the panel with four thousand steel pins in a staggered grid, and a spread hand, a key, a seashell, a toy car and a face press in from behind one after another, each relief rising out of the dim pins into a raking lamp until the toy is tilted and the pins slide flat again in a ripple.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after Ward Fleming's pinscreen desk toy (1985)\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Metal=0..1, Speed=0.2..3, Object=0..4, Light=0..1\n//\n// Knob 1: Metal. The finish of the pins and the colour the lamp gives them: blue steel at 0, turning through violet and pink to brass in the middle, then through green back to blue steel at 1.\n// Knob 2: Speed. How fast things press in, hold and are tilted flat again: at 2 an object takes 3 s to press in and a round is 8 s; at 0.2 it all runs ten times slower.\n// Knob 3: Object. What presses in next: a spread hand, a key, a seashell, a toy car or a face, the rest following in that order. Turning it tilts the toy flat and brings the new one.\n// Knob 4: Light. Where the desk lamp stands, going once round the toy from its left side, upper left at the start. The relief shines on the lamp's side and throws its shadow away from it, and the flat pins are brighter nearer the lamp.\n// Buttons: K1 tap tilts the toy flat now and presses the next object in.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst NOBJ = 5;\n// The round at Speed 2, in seconds: press in, hold, tilt flat, rest.\nconst TP = 3.0;\nconst TH = 3.3;\nconst TW = 1.25;\nconst TR = 0.5;\nconst TC = TP + TH + TW + TR;\nconst { min, max, sqrt, sin, cos, exp, abs, round, hypot, atan2, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// A fixed hash, so the pins are the same uneven pins on every run.\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Distances to shapes, negative inside. seg() leaves how far along the\n// segment the nearest point lies in T.\nlet T = 0;\nfunction seg(px, py, ax, ay, bx, by) {\n  const dx = bx - ax;\n  const dy = by - ay;\n  T = clamp(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy), 0, 1);\n  return hypot(px - ax - dx * T, py - ay - dy * T);\n}\nfunction box(px, py, cx, cy, hx, hy, r) {\n  const qx = abs(px - cx) - hx + r;\n  const qy = abs(py - cy) - hy + r;\n  return hypot(max(qx, 0), max(qy, 0)) + min(max(qx, qy), 0) - r;\n}\nfunction ell(px, py, cx, cy, rx, ry) {\n  return (hypot((px - cx) / rx, (py - cy) / ry) - 1) * min(rx, ry);\n}\nfunction smin(a, b, k) {\n  const h = clamp(0.5 + (0.5 * (b - a)) / k, 0, 1);\n  return b + (a - b) * h - k * h * (1 - h);\n}\n// A soft round bump, near enough a Gaussian, that ends 2 radii out.\nconst bump = (px, py, cx, cy, rx, ry) => {\n  const q = ((px - cx) / rx) ** 2 + ((py - cy) / ry) ** 2;\n  return q \u003c 4 ? (1 - q / 4) ** 3 : 0;\n};\n// A rounded edge: 0 at the outline, 1 once r LEDs inside it.\nconst prof = (d, r) => {\n  const t = clamp(-d / r, 0, 1);\n  return sqrt(t * (2 - t));\n};\n// Pins next to the outline are dragged a little way out with it.\nconst halo = (d) => (d \u003c 5 ? 0.17 * exp(-d / 1.6) : 0);\n\n// Each object is a height above the pins' rest plane, 0..1, at an LED.\n// The fingers: base and tip of each, and the radius.\nconst FING = [\n  [15, 84, 3, 56, 6],\n  [20, 61, 10, 22, 5.8],\n  [30, 58, 29, 9, 6],\n  [39, 59, 47, 15, 5.8],\n  [47, 65, 59, 35, 5.2],\n];\nfunction hand(x, y) {\n  let d = box(x, y, 32, 77, 19, 17, 9);\n  let crease = 0;\n  for (let f = 0; f \u003c 5; f++) {\n    const [ax, ay, bx, by, r] = FING[f];\n    const e = seg(x, y, ax, ay, bx, by) - r;\n    if (e \u003c 0) {\n      const len = hypot(bx - ax, by - ay);\n      const j = f ? [0.4, 0.68] : [0.55, 0.55];\n      crease = max(crease, exp(-(((T - j[0]) * len) ** 2) / 0.8), exp(-(((T - j[1]) * len) ** 2) / 0.8));\n    }\n    d = smin(d, e, 2.5);\n  }\n  d = smin(d, seg(x, y, 32, 92, 32, 150) - 15.5, 8);\n  if (d > 0) return halo(d);\n  let r = 0.5 + 0.38 * prof(d, 8);\n  // The pads below the fingers, the ball of the thumb, and the lines of the palm.\n  r += 0.08 * bump(x, y, 22, 92, 8, 10) + 0.05 * bump(x, y, 34, 66, 14, 4) + 0.05 * bump(x, y, 43, 86, 6, 9);\n  r -= 0.1 * crease;\n  const heart = abs(y - (68 + 0.012 * (x - 30) ** 2 - 0.1 * (x - 30)));\n  const life = abs(hypot(x - 14, y - 92) - 15);\n  if (x > 18 && x \u003c 48 && y \u003c 80) r -= 0.1 * exp(-heart * heart);\n  if (y > 70 && y \u003c 104 && x > 18) r -= 0.1 * exp(-life * life);\n  return clamp(r, 0, 1);\n}\n\nfunction face(x, y) {\n  let d = ell(x, y, 32, 54, 24 - max(0, y - 60) * 0.24, 35);\n  d = smin(d, min(ell(x, y, 7, 56, 3.5, 8), ell(x, y, 57, 56, 3.5, 8)), 1.5);\n  const head = d;\n  d = smin(d, seg(x, y, 32, 88, 32, 140) - 10.5, 4);\n  d = smin(d, ell(x, y, 32, 142, 54, 28), 10);\n  if (d > 0) return halo(d);\n  let r = 0.42 + 0.24 * prof(d, 12);\n  // The neck and shoulders sit back under the jaw.\n  r -= 0.2 * sstep(-2, 2, head);\n  // Hair, combed back in strands from the hairline.\n  const hl = 33 + 0.012 * (x - 32) ** 2;\n  if (y \u003c hl) r += 0.04 * sstep(hl, hl - 3, y) + 0.06 * sin(x * 1.25 + (y - 20) * (x - 32) * 0.012);\n  // Brows, eye sockets and eyes, the nose, cheeks, lips and chin.\n  r += 0.06 * bump(x, y, 32, 36, 16, 9);\n  r += 0.12 * (bump(x, y, 22, 44, 7, 1.8) + bump(x, y, 42, 44, 7, 1.8));\n  r -= 0.3 * (bump(x, y, 22, 51, 6, 3.4) + bump(x, y, 42, 51, 6, 3.4));\n  r += 0.16 * (bump(x, y, 22, 51.5, 3, 1.8) + bump(x, y, 42, 51.5, 3, 1.8));\n  r += 0.3 * bump(x, y, 32, 59, 2.4, 9) + 0.18 * bump(x, y, 32, 67.5, 4.5, 2.6);\n  r -= 0.14 * (bump(x, y, 29, 70, 1.4, 1.1) + bump(x, y, 35, 70, 1.4, 1.1));\n  r += 0.12 * (bump(x, y, 19, 64, 6, 6) + bump(x, y, 45, 64, 6, 6));\n  r += 0.14 * bump(x, y, 32, 76.5, 6.5, 1.5) + 0.16 * bump(x, y, 32, 80.5, 5.5, 1.9) - 0.2 * bump(x, y, 32, 78.5, 7.5, 0.7);\n  r += 0.12 * bump(x, y, 32, 87, 6, 3);\n  return clamp(r, 0, 1);\n}\n\nfunction key(x, y) {\n  const rr = hypot(x - 32, y - 25);\n  let d = max(rr - 21, 9 - rr);\n  d = min(d, box(x, y, 32, 47, 9, 3, 1), box(x, y, 32, 55, 7, 2.5, 1), box(x, y, 32, 83, 4.5, 38, 2));\n  let bit = box(x, y, 44, 107, 8, 11, 1);\n  bit = max(bit, -box(x, y, 51, 101, 2.5, 2, 0), -box(x, y, 51, 111, 2.5, 2.5, 0), -box(x, y, 44, 106, 1.2, 5, 0));\n  d = min(d, bit);\n  if (d > 0) return halo(d);\n  let r = 0.72 + 0.2 * prof(d, 3);\n  // A raised rim round the bow's hole and a groove down the shank.\n  r += 0.08 * exp(-((rr - 12) ** 2) / 2);\n  if (y > 60 && y \u003c 118) r -= 0.12 * exp(-((x - 32) ** 2) / 1.2);\n  return clamp(r, 0, 1);\n}\n\n// A scallop, hinge down: ribs fan out from the hinge to a wavy edge.\nfunction shell(x, y) {\n  const dx = x - 32;\n  const dy = 92 - y;\n  const rho = hypot(dx, dy);\n  const th = atan2(dx, dy);\n  const rib = cos(th * 48);\n  let d = max(rho - 54 * (1 - 0.3 * th * th) - 1.2 * rib, (abs(th) - 0.85) * rho);\n  d = smin(d, box(x, y, 32, 94, 15, 5, 2), 3);\n  if (d > 0) return halo(d);\n  let r = 0.5 + 0.32 * prof(d, 14);\n  r += 0.13 * rib * sstep(5, 22, rho) * (dy > 0) + 0.025 * sin(rho * 1.4);\n  r -= 0.12 * exp(-((y - 89) ** 2) / 1.5) * (abs(dx) \u003c 14);\n  return clamp(r, 0, 1);\n}\n\n// A toy car seen from above, its nose at the top.\nfunction car(x, y) {\n  let body = box(x, y, 32, 65, 14 + min(3, max(0, y - 14) * 0.12), 52, 11);\n  body = smin(body, min(ell(x, y, 18, 36, 5, 12), ell(x, y, 46, 36, 5, 12), ell(x, y, 17, 96, 5, 12), ell(x, y, 47, 96, 5, 12)), 3);\n  const tyre = min(box(x, y, 11, 36, 3, 8, 1.5), box(x, y, 53, 36, 3, 8, 1.5), box(x, y, 10, 96, 3, 8, 1.5), box(x, y, 54, 96, 3, 8, 1.5));\n  const d = min(body, tyre);\n  if (d > 0) return halo(d);\n  if (body > 0) return 0.36 + 0.1 * prof(tyre, 2.5);\n  let r = 0.5 + 0.16 * prof(body, 4);\n  // The cabin: windscreen and rear window sunk between bonnet, roof and boot.\n  const xw = abs(x - 32);\n  const scr = xw \u003c 12 - (58 - y) * 0.25 && y > 45 && y \u003c 58;\n  const rear = xw \u003c 11 && y > 91 && y \u003c 99;\n  const roof = box(x, y, 32, 74.5, 11, 16, 3);\n  r += 0.14 * sstep(1, -1, roof) - 0.2 * (scr || rear);\n  // Bonnet creases, headlights, wing mirrors, the spoiler at the back.\n  r -= 0.14 * (exp(-((x - 23) ** 2) / 0.6) + exp(-((x - 41) ** 2) / 0.6)) * (y > 17 && y \u003c 42);\n  r += 0.16 * (bump(x, y, 22, 16, 3.5, 2.2) + bump(x, y, 42, 16, 3.5, 2.2)) + 0.18 * (bump(x, y, 15, 56, 3, 2) + bump(x, y, 49, 56, 3, 2));\n  r += 0.18 * sstep(1, -1, box(x, y, 32, 112, 16, 2, 1)) - 0.12 * sstep(1, -1, box(x, y, 32, 108, 14, 1, 0.5));\n  return clamp(r, 0, 1);\n}\n\nconst OBJECTS = [hand, key, shell, car, face];\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.pin = { r: F(N), gx: F(N), gy: F(N), ht: F(N), jit: F(N), started: false };\n  const P = params.pin;\n  for (let i = 0; i \u003c N; i++) P.jit[i] = 0.88 + 0.24 * hash(i);\n}\n\n// The object's heights, and their slopes for the lamp.\nfunction load(P, o) {\n  const { r, gx, gy } = P;\n  const fn = OBJECTS[o];\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) r[y * W + x] = fn(x + 0.5, y + 0.5);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      gx[i] = (r[y * W + min(W - 1, x + 1)] - r[y * W + max(0, x - 1)]) / 2;\n      gy[i] = (r[min(H - 1, y + 1) * W + x] - r[max(0, y - 1) * W + x]) / 2;\n    }\n}\n\nfunction tilt(P) {\n  if (P.c \u003c TP + TH) {\n    P.sw = P.s;\n    P.c = TP + TH;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.pin) setup(params);\n  const P = params.pin;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, NOBJ - 1);\n  P.lamp = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    P.base = base;\n    P.count = -1;\n    // Open on the last object of the round, just as the toy is tilted.\n    load(P, (base + NOBJ - 1) % NOBJ);\n    P.c = TP + TH - 0.05;\n    P.s = 1;\n    P.sw = 1;\n  }\n  if (base !== P.base) {\n    P.base = base;\n    P.count = -1;\n    tilt(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) tilt(P);\n  P.c += dt * P.rate;\n  if (P.c >= TC) {\n    P.c -= TC;\n    P.count++;\n    load(P, (P.base + P.count + NOBJ * 8) % NOBJ);\n  }\n  if (P.c \u003c TP) {\n    const u = P.c / TP;\n    P.s = u * (1.3 - 0.3 * u);\n  } else if (P.c \u003c TP + TH) P.s = 1;\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function draw(display, params) {\n  const P = params.pin;\n  if (!P || !P.started) return;\n  const { r, gx, gy, ht, jit } = P;\n  const lift = 1 - P.s;\n  // The tilt: a front runs down the panel, the pins behind it slide back and\n  // rattle a little as they go.\n  const wt = P.c - TP - TH;\n  const wiping = wt >= 0;\n  const yf = -16 + (wt / TW) * 170;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (!wiping) {\n        const h = r[i] - lift;\n        ht[i] = h > 0 ? h : 0;\n        continue;\n      }\n      const dd = yf - y - 5 * sin(x * 0.19 + 1.3) - 3 * sin(x * 0.47);\n      let h = r[i] - (1 - P.sw);\n      h = h > 0 ? h * (1 - sstep(0, 12, dd)) : 0;\n      if (dd > 0) h += 0.16 * max(0, sin(dd * 0.6)) * exp(-dd / 22);\n      ht[i] = h;\n    }\n\n  // The lamp, low and to one side.\n  const ang = PI * (0.87 - 2 * P.lamp);\n  const lx = cos(ang);\n  const ly = -sin(ang);\n  const tint = hsv((0.6 + P.hue) % 1, 0.85, 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const h = ht[i];\n      // Shadow: does a taller pin stand between this one and the lamp?\n      let ex = 0;\n      for (let j = 1; j \u003c= 7; j++) {\n        const sx = round(x + j * 1.5 * lx);\n        const sy = round(y + j * 1.5 * ly);\n        if (sx \u003c 0 || sx >= W || sy \u003c 0 || sy >= H) break;\n        const e = ht[sy * W + sx] - h - j * 0.12;\n        if (e > ex) ex = e;\n      }\n      const shadow = 1 - 0.34 * sstep(0, 0.12, ex);\n      const q = clamp(0.5 + ((x - 31.5) * lx + (y - 63.5) * ly) / 140, 0, 1);\n      let v;\n      let wh;\n      if (((x + y) & 1) === 0) {\n        const flat = 106 * (0.72 + 0.56 * q) * jit[i];\n        const up = sstep(0, 0.1, h);\n        const shade = clamp(1.02 - 4.5 * (gx[i] * lx + gy[i] * ly), 0.5, 1.3);\n        const raised = min(255, 255 * (0.66 + 0.4 * min(1, h)) * shade);\n        v = (flat + (raised - flat) * up) * shadow;\n        wh = 0.3 + 0.4 * clamp((v - 90) / 165, 0, 1);\n      } else {\n        // A gap: dark, unless the pins round it stand out and show their shafts.\n        const n = (ht[i - (x > 0 ? 1 : 0)] + ht[i + (x \u003c W - 1 ? 1 : 0)] + ht[i - (y > 0 ? W : 0)] + ht[i + (y \u003c H - 1 ? W : 0)]) / 4;\n        const shade = clamp(0.92 - 3 * (gx[i] * lx + gy[i] * ly), 0.35, 1.15);\n        v = 175 * sstep(0.02, 0.3, n) * shade * shadow;\n        wh = 0.15;\n      }\n      display.setPixel(x, y, v * (tint[0] + (1 - tint[0]) * wh), v * (tint[1] + (1 - tint[1]) * wh), v * (tint[2] + (1 - tint[2]) * wh));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Metal=0..1, Speed=0.2..3, Object=0..4, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Metal","min":0,"max":1,"about":"The finish of the pins and the colour the lamp gives them: blue steel at 0, turning through violet and pink to brass in the middle, then through green back to blue steel at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast things press in, hold and are tilted flat again: at 2 an object takes 3 s to press in and a round is 8 s; at 0.2 it all runs ten times slower."},{"name":"Object","min":0,"max":4,"about":"What presses in next: a spread hand, a key, a seashell, a toy car or a face, the rest following in that order. Turning it tilts the toy flat and brings the new one."},{"name":"Light","min":0,"max":1,"about":"Where the desk lamp stands, going once round the toy from its left side, upper left at the start. The relief shines on the lamp's side and throws its shadow away from it, and the flat pins are brighter nearer the lamp."}],"start":[0,2,0,0.06],"measures":{"motion":0.0617,"detail":0.3463,"edges":0.9544,"complexity":1.3204,"coverage":0.7864,"colour":0.2041,"drift":0.3573},"knobResponse":[0.1597,0.2367,0.0944,0.0463]},{"slug":"pint","title":"Pint","family":"cells","round":18,"note":"탭이 패널 높이만 한 파인트 잔에 맥주를 따르면, 뿌연 맥주가 바닥부터 맑아지고 기포 줄이 오르는 동안 거품 머리가 밝은 테두리의 다각형 셀로 굵어져요. 누군가 다섯 모금에 나눠 마시며 잔에 레이싱 고리를 남기고, 바닥이 보이면 다시 따라요. K1 은 라거에서 앰버 에일, 레드 에일을 지나 스타우트까지 맥주를 바꾸고, 스타우트는 크림빛 서지가 바닥부터 검게 가라앉아요.","idea":"A tap pours a pint as tall as the panel against a dark bar, the cloudy beer clears from the bottom up under rising chains of bubbles while the foam head coarsens into bright polygonal cells, and someone drinks it down in sips that leave lacing rings on the glass before it is poured again.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Pint\n// Family:  cells\n// Idea:    A tap pours a pint as tall as the panel against a dark bar, the cloudy beer clears from the bottom up under rising chains of bubbles while the foam head coarsens into bright polygonal cells, and someone drinks it down in sips that leave lacing rings on the glass before it is poured again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the pour, the settling surge and the lacing of a pint at the bar\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Beer=0..1, Speed=0.2..3, Fizz=4..20, Head=0..1\n//\n// Knob 1: Beer. What is on tap: a pale lager at 0, an amber ale at 0.35, a red ale at 0.65 and a stout at 1, whose cream-brown surge settles black from the bottom up.\n// Knob 2: Speed. How fast the bar runs: at 2 a pint pours in 6 s, starts to go 5 s later in five sips 5 s apart and is poured again; at 0.2 it all runs ten times slower.\n// Knob 3: Fizz. How many nucleation sites stream bubbles, from 4 to 20, and how thick the haze of fine bubbles is, so how long a lager takes to clear: about 6 s at 4 and 17 s at 20.\n// Knob 4: Head. How tall the foam head stands, from 12 rows to 32, and how fast its small bubbles coarsen into large cells.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\n// The glass: rim row, inside floor row, and the bar top it stands on.\nconst RIM = 14;\nconst FLOOR = 118;\nconst BAR = 124;\n// Bar states.\nconst POUR = 0;\nconst REST = 1;\n// Clear and cloudy body, and head, for lager, amber ale, red ale and stout.\nconst BEERS = [\n  [0, [238, 178, 28], [204, 186, 138], [238, 236, 226]],\n  [0.35, [216, 106, 18], [196, 146, 104], [240, 230, 206]],\n  [0.65, [168, 38, 18], [176, 112, 90], [238, 222, 198]],\n  [1, [20, 10, 6], [152, 114, 82], [224, 198, 152]],\n];\nconst MAXB = 700;\nconst FOAM = 640;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// Inside half-width of the shaker glass at a row: 26 LEDs at the rim, 20 at the floor.\nfunction half(y) {\n  return 26 - (6 * (clamp(y, RIM, FLOOR) - RIM)) / (FLOOR - RIM);\n}\n\nfunction beerAt(b) {\n  let i = 0;\n  while (i \u003c BEERS.length - 2 && BEERS[i + 1][0] \u003c b) i++;\n  const A = BEERS[i];\n  const B = BEERS[i + 1];\n  const f = clamp((b - A[0]) / (B[0] - A[0]), 0, 1);\n  const mix = (k) => A[k].map((v, j) => v + (B[k][j] - v) * f);\n  return { clear: mix(1), cloudy: mix(2), head: mix(3) };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.buf = new Float32Array(N * 3);\n  P.bx = new Float32Array(MAXB);\n  P.by = new Float32Array(MAXB);\n  P.bv = new Float32Array(MAXB);\n  P.nb = 0;\n  P.fx = new Float32Array(FOAM);\n  P.fv = new Float32Array(FOAM);\n  P.fu = new Float32Array(FOAM);\n  P.nf = 0;\n  P.wet = new Float32Array(H);\n  // The bar lights' reflection down the left of the glass and a fainter one\n  // on the right, and where along a row the climbing glint sits.\n  P.hl = new Float32Array(N);\n  P.bump = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) P.bump[x] = 0.8 * Math.sin(x * 0.9 + 1.3);\n  P.glx = new Float32Array(N);\n  for (let y = RIM; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const hw = half(y);\n      const dx = x + 0.5 - CX;\n      P.hl[y * W + x] = 255 * (Math.exp(-(((dx + hw - 3.5) / 1.3) ** 2)) * 0.32 + Math.exp(-(((dx - hw + 2.5) / 0.9) ** 2)) * 0.12) * (0.75 + 0.25 * Math.sin(y * 0.11));\n      P.glx[y * W + x] = 204 * Math.exp(-(((dx + hw - 3.5) / 1.6) ** 2));\n    }\n  // A smooth noise field for the haze and the surge, tiled every 128 rows.\n  P.noise = new Float32Array(N);\n  const g = [];\n  for (let i = 0; i \u003c 17 * 33; i++) g.push(Math.random());\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const gx = x / 4;\n      const gy = y / 4;\n      const i = Math.floor(gx);\n      const j = Math.floor(gy);\n      const u = gx - i;\n      const v = gy - j;\n      const s = (a, b) => g[(b % 32) * 17 + (a % 16)];\n      const su = u * u * (3 - 2 * u);\n      const sv = v * v * (3 - 2 * v);\n      P.noise[y * W + x] = (s(i, j) * (1 - su) + s(i + 1, j) * su) * (1 - sv) + (s(i, j + 1) * (1 - su) + s(i + 1, j + 1) * su) * sv;\n    }\n  Object.assign(P, {\n    T: 0,\n    t: 0,\n    mode: POUR,\n    modeT: 0,\n    level: FLOOR,\n    headH: 0,\n    foamAge: 0,\n    front: FLOOR + 4,\n    sips: 0,\n    sipFrom: 0,\n    sipTo: 0,\n    sipT: -1,\n    laces: [],\n    siteT: new Float32Array(20),\n    streamTop: 11,\n    beer: 0,\n    fizz: 4,\n    head: 0.06,\n    started: false,\n  });\n  freshFoam(P);\n}\n\n// The head made by a pour: small bubbles packed tight, each with a rank that\n// says how soon it pops or is swallowed by its neighbours as the foam coarsens.\nfunction freshFoam(P) {\n  P.nf = 0;\n  P.foamAge = 0;\n  // One bubble in each 1.9 LED square, jittered.\n  for (let j = 0; j \u003c 19; j++)\n    for (let i = 0; i \u003c 29 && P.nf \u003c FOAM; i++) {\n      P.fx[P.nf] = 4.5 + (i + 0.15 + 0.7 * Math.random()) * 1.9;\n      P.fv[P.nf] = (j + 0.15 + 0.7 * Math.random()) * 1.9;\n      P.fu[P.nf] = Math.random();\n      P.nf++;\n    }\n  P.bStart = new Int32Array(16 * 10 + 1);\n  P.bItem = new Int32Array(FOAM);\n  P.bOf = new Int32Array(FOAM);\n}\n\n// The head's full height for the Head knob, and the liquid level of a full pint.\nconst headFull = (P) => 12 + 20 * P.head;\nconst fullLevel = (P) => RIM + 1 + headFull(P);\n\nfunction startPour(P) {\n  P.mode = POUR;\n  P.modeT = 0;\n  P.front = FLOOR + 4;\n  P.sips = 0;\n  freshFoam(P);\n  P.headH = Math.min(P.headH, 3);\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.modeT += h;\n  P.foamAge += h;\n  const stout = clamp((P.beer - 0.6) / 0.4, 0, 1);\n  const full = fullLevel(P);\n  if (P.mode === POUR) {\n    // About 15 rows a second; the falling stream whips up the head.\n    P.level = Math.max(full, P.level - h * 15);\n    P.headH = Math.min(headFull(P) * (P.level > full + 0.5 ? 0.9 : 1), P.headH + h * 5);\n    P.foamAge = 0;\n    P.streamTop = 11;\n    if (P.level \u003c= full) {\n      P.mode = REST;\n      P.modeT = 0;\n      P.nextSip = 4.6;\n    }\n  } else {\n    // The stream's tail falls once the tap closes.\n    P.streamTop += h * (20 + 140 * P.modeT);\n    // Clearing climbs from the floor: quick for lager, a slow surge for stout.\n    P.front -= (h * (11 - 6 * stout) * 1.4) / (0.6 + P.fizz / 10);\n    // The head drains and pops down to about 60% of its height.\n    const target = headFull(P) * (0.6 + 0.4 * Math.exp(-P.foamAge / 14));\n    P.headH += (target - P.headH) * Math.min(1, h * 0.8);\n    if (P.sipT \u003c 0 && P.modeT >= P.nextSip) {\n      if (P.sips >= 5) startPour(P);\n      else {\n        P.sipT = 0;\n        P.sipFrom = P.level;\n        P.sipTo = Math.min(FLOOR - 16, P.level + (FLOOR - full) / 6);\n        P.laces.push({ y: P.level - P.headH, k: Math.random() * 97 });\n        if (P.laces.length > 6) P.laces.shift();\n      }\n    }\n    if (P.sipT >= 0) {\n      P.sipT += h;\n      const f = Math.min(1, P.sipT / 1.2);\n      const old = P.level;\n      P.level = P.sipFrom + (P.sipTo - P.sipFrom) * f * f * (3 - 2 * f);\n      for (let y = Math.max(0, Math.floor(old)); y \u003c P.level && y \u003c H; y++) P.wet[y] = 1;\n      if (f >= 1) {\n        P.sipT = -1;\n        P.sips++;\n        P.nextSip = P.modeT + (P.sips >= 5 ? 3 : 5);\n      }\n    }\n  }\n  if (P.mode === POUR) P.laces.length = Math.min(P.laces.length, P.laces.filter((l) => l.y \u003c P.level - P.headH - 1).length);\n  for (let y = 0; y \u003c H; y++) P.wet[y] *= Math.exp(-h / 5);\n  bubbles(P, h);\n}\n\n// Carbonation: chains of bubbles from nucleation sites on the floor and walls,\n// speeding up and swelling as they rise.\nfunction bubbles(P, h) {\n  const n = Math.round(P.fizz);\n  const every = 0.3 / (0.6 + (0.4 * n) / 4);\n  for (let i = 0; i \u003c n; i++) {\n    P.siteT[i] -= h;\n    if (P.siteT[i] > 0) continue;\n    P.siteT[i] += every * (0.8 + 0.4 * Math.random()) * (1 + 0.5 * ((i * 0.71) % 1));\n    if (P.nb >= MAXB) continue;\n    let x;\n    let y;\n    if (i % 4 === 3) {\n      y = 44 + ((i * 0.37) % 1) * 66;\n      x = CX + (i % 8 === 3 ? -1 : 1) * (half(y) - 1.2);\n    } else {\n      y = FLOOR - 0.5;\n      x = CX + (((i * 0.618 + 0.13) % 1) - 0.5) * 2 * (half(FLOOR) - 3);\n    }\n    if (y \u003c= P.level + 1) continue;\n    P.bx[P.nb] = x;\n    P.by[P.nb] = y;\n    P.bv[P.nb] = 5;\n    P.nb++;\n  }\n  const { bx, by, bv } = P;\n  const top = P.level + 0.5;\n  for (let i = 0; i \u003c P.nb; i++) {\n    const v = Math.min(32, bv[i] + h * 16);\n    bv[i] = v;\n    by[i] -= v * h;\n    if (by[i] > top) continue;\n    // At the surface: the last bubble takes this one's place.\n    P.nb--;\n    bx[i] = bx[P.nb];\n    by[i] = by[P.nb];\n    bv[i] = bv[P.nb];\n    i--;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.beer = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0, 3) / 2;\n  P.fizz = clamp(k[2], 4, 20);\n  P.head = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The pint has been pouring for a few seconds when the panel opens.\n    for (let i = 0; i \u003c 50; i++) step(P, 1 / 30);\n    for (let i = 0; i \u003c 90; i++) step(P, rate / 30);\n  }\n  P.t += dt;\n  step(P, dt * rate);\n}\n\nfunction add(buf, p, r, g, b) {\n  buf[p * 3] += r;\n  buf[p * 3 + 1] += g;\n  buf[p * 3 + 2] += b;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const { clear, cloudy, head } = beerAt(P.beer);\n  const stout = clamp((P.beer - 0.6) / 0.4, 0, 1);\n  const level = P.level;\n  const hH = P.headH;\n  const noise = P.noise;\n  const t = P.T;\n  // Foam coarsening: the mean cell grows from 2 LEDs, so fewer bubbles live.\n  const cell = 2 * Math.pow(1 + P.foamAge * (0.5 + 1.5 * P.head), 0.5);\n  const alive = clamp(4 / (cell * cell), 0.02, 1);\n  const glint = 128 - ((P.t * 16) % 190);\n  // The bubbles still alive in the head, in buckets of 4 by 4 LEDs. The dry\n  // foam at the top coarsens first; the wet foam at the bottom stays fine.\n  const { bStart, bItem, bOf } = P;\n  bStart.fill(0);\n  const topH = 1.1 / Math.max(6, hH);\n  for (let q = 0; q \u003c P.nf; q++) {\n    const k = P.fu[q] * (0.45 + topH * P.fv[q]) \u003c= alive ? Math.min(9, Math.floor(P.fv[q] / 4)) * 16 + Math.min(15, Math.floor(P.fx[q] / 4)) : -1;\n    bOf[q] = k;\n    if (k >= 0) bStart[k + 1]++;\n  }\n  for (let k = 0; k \u003c 160; k++) bStart[k + 1] += bStart[k];\n  const fill = bStart.slice(0, 160);\n  for (let q = 0; q \u003c P.nf; q++) if (bOf[q] >= 0) bItem[fill[bOf[q]]++] = q;\n  // How many buckets out to look for the two nearest.\n  const R = cell \u003c 4.5 ? 1 : cell \u003c 8 ? 2 : 3;\n  const fx = P.fx;\n  const fv = P.fv;\n  const { hl, glx, bump, laces, wet: wetRows } = P;\n  // A cheap generator for the sparkle of fine bubbles, reseeded each frame.\n  let seed = (Math.random() * 4294967296) >>> 0;\n  const sparkle = 0.0012 * P.fizz;\n  const haze = 0.7 + (0.3 * (P.fizz - 4)) / 16;\n  for (let y = 0; y \u003c H; y++) {\n    const hw = half(y);\n    const inGlass = y >= RIM && y \u003c FLOOR;\n    const gy = Math.exp(-(((y - glint) / 4) ** 2));\n    // Row by row: how cloudy the beer is, where the surge texture sits\n    // going down the walls and up the middle, and how deep the row is.\n    const cl = clamp((P.front - y) / 6 + 0.5, 0, 1);\n    const sv = t * (6 + 6 * stout);\n    const rowDown = ((((y - sv) % H) + H) % H | 0) * W;\n    const rowUp = ((((y + sv) % H) + H) % H | 0) * W;\n    const deep = 1 - (0.12 * (y - level)) / (FLOOR - RIM);\n    const amp = (0.12 + 0.3 * stout) * cl;\n    // More fizz, a thicker haze of fine bubbles.\n    const hz = cl * haze;\n    const cr = clear[0] + (cloudy[0] - clear[0]) * hz;\n    const cg = clear[1] + (cloudy[1] - clear[1]) * hz;\n    const cb = clear[2] + (cloudy[2] - clear[2]) * hz;\n    const fine = sparkle * (1 - 0.6 * stout) * 4294967296;\n    const wet = 0.12 * wetRows[y];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const dx = x + 0.5 - CX;\n      let r = 9 + (3 * (H - y)) / H;\n      let g = 7 + (2 * (H - y)) / H;\n      let b = 6;\n      if (y >= BAR) {\n        // The bar top: dark wood with a sheen and the beer's reflection.\n        const wood = 0.8 + 0.2 * Math.sin(x * 0.3 + y * 2.1 + Math.sin(x * 0.07) * 3);\n        r = 52 * wood;\n        g = 31 * wood;\n        b = 18 * wood;\n        if (y === BAR) {\n          r += 40;\n          g += 28;\n          b += 18;\n        }\n        if (Math.abs(dx) \u003c half(FLOOR) && level \u003c FLOOR - 1) {\n          const f = 0.22 * (1 - (y - BAR) / 5);\n          r += clear[0] * f;\n          g += clear[1] * f;\n          b += clear[2] * f;\n        }\n      } else if (y >= FLOOR && Math.abs(dx) \u003c= half(FLOOR) + 1) {\n        // The thick glass foot, lit through by the beer above it.\n        const lit = level \u003c FLOOR - 1 ? 0.5 : 0.12;\n        r = 26 + clear[0] * lit;\n        g = 28 + clear[1] * lit;\n        b = 32 + clear[2] * lit;\n        if (y === BAR - 1 || Math.abs(dx) > half(FLOOR)) {\n          r += 50;\n          g += 52;\n          b += 56;\n        }\n      } else if (inGlass && Math.abs(dx) \u003c= hw) {\n        const e = Math.abs(dx) / hw;\n        const topV = hH + bump[x] * Math.min(1, hH / 4);\n        if (y >= level) {\n          // The beer: cloudy above the clearing front, clear below it, and\n          // a surge in the haze: down along the walls, up the middle.\n          const n = noise[(e > 0.62 ? rowDown : rowUp) + x] - 0.5;\n          const m = (0.84 + 0.16 * (1 - e * e)) * deep * (1 + n * amp);\n          r = cr * m;\n          g = cg * m;\n          b = cb * m;\n          seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0;\n          if (seed \u003c fine) {\n            r += 70;\n            g += 70;\n            b += 60;\n          }\n        } else if (level - y \u003c= topV) {\n          // The head: Voronoi cells round the living bubbles, with bright\n          // Plateau borders between them.\n          const v = level - y;\n          const bi = Math.min(9, Math.floor(v / 4));\n          const bj = x >> 2;\n          let d1 = 1e9;\n          let d2 = 1e9;\n          let a = -1;\n          let c = -1;\n          for (let jj = Math.max(0, bi - R); jj \u003c= Math.min(9, bi + R); jj++)\n            for (let ii = Math.max(0, bj - R); ii \u003c= Math.min(15, bj + R); ii++)\n              for (let qi = bStart[jj * 16 + ii], qe = bStart[jj * 16 + ii + 1]; qi \u003c qe; qi++) {\n                const q = bItem[qi];\n                const ex = fx[q] - x - 0.5;\n                const ev = fv[q] - v;\n                const d = ex * ex + ev * ev;\n                if (d \u003c d1) {\n                  d2 = d1;\n                  c = a;\n                  d1 = d;\n                  a = q;\n                } else if (d \u003c d2) {\n                  d2 = d;\n                  c = q;\n                }\n              }\n          let m = 0.62;\n          if (c >= 0) {\n            const sep = Math.sqrt((fx[a] - fx[c]) ** 2 + (fv[a] - fv[c]) ** 2);\n            const edge = (d2 - d1) / (2 * sep);\n            // A Plateau border, then the film of the cell, darker toward its middle.\n            m = edge \u003c 0.6 ? 1.06 : 0.9 - 0.24 * Math.min(1, (edge - 0.6) / Math.max(1, sep * 0.4));\n          }\n          // Wet foam at the bottom takes the beer's colour; the crown is lit.\n          const wetF = clamp(1 - v / 2.5, 0, 1) * 0.5;\n          const crown = topV - v \u003c 1.2 ? 0.12 : 0;\n          r = (head[0] * (1 - wetF) + clear[0] * wetF) * (m + crown);\n          g = (head[1] * (1 - wetF) + clear[1] * wetF) * (m + crown);\n          b = (head[2] * (1 - wetF) + clear[2] * wetF) * (m + crown);\n        } else {\n          // Empty glass: the bar behind, a film where beer has just run down,\n          // and the lacing rings each sip left.\n          r = 12 + clear[0] * wet;\n          g = 11 + clear[1] * wet;\n          b = 11 + clear[2] * wet;\n          for (const l of laces) {\n            const dy = y - l.y;\n            if (dy \u003c -1 || dy > 5) continue;\n            const hsh = Math.sin(x * 12.9898 + l.k * 78.233 + Math.floor(dy) * 37.7) * 43758.5;\n            const q = hsh - Math.floor(hsh);\n            const lace = dy \u003c 2 ? (q > 0.35 ? 0.55 : 0.2) : q > 0.86 + dy * 0.02 ? 0.4 : 0;\n            r += head[0] * lace;\n            g += head[1] * lace;\n            b += head[2] * lace;\n          }\n        }\n        // The bar lights' reflection runs down the left of the glass, with a\n        // glint that climbs it, and a fainter one on the right.\n        const s = hl[p] + glx[p] * gy;\n        r += s;\n        g += s;\n        b += s;\n      } else if (inGlass && Math.abs(dx) \u003c= hw + 1.2) {\n        // The glass wall seen edge on.\n        r = 40;\n        g = 44;\n        b = 50;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  // Rising bubbles, bright in clear beer and lost in the haze.\n  for (let i = 0; i \u003c P.nb; i++) {\n    const x = Math.round(P.bx[i] - 0.5);\n    const y = Math.round(P.by[i]);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const cl = clamp((P.front - y) / 6 + 0.5, 0, 1);\n    const v = (1 - 0.45 * cl) * (1 - 0.8 * stout) * (0.55 + Math.min(0.45, (FLOOR - y) / 120));\n    const p = y * W + x;\n    add(buf, p, 170 * v, 160 * v, 130 * v);\n    if (x + 1 \u003c W) add(buf, p + 1, 110 * v, 100 * v, 80 * v);\n    if (FLOOR - y > 40 && y + 1 \u003c H) add(buf, p + W, 60 * v, 56 * v, 44 * v);\n  }\n  // The rim, seen from just below: a flat ellipse, its near half brighter.\n  for (let a = 0; a \u003c 6.283; a += 0.03) {\n    const s = Math.sin(a);\n    const x = Math.round(CX - 0.5 + 27 * Math.cos(a));\n    const y = Math.round(RIM - 0.5 + 1.6 * s);\n    if (x \u003c 0 || x >= W) continue;\n    const v = s > 0 ? 90 : 45;\n    const gl = glint \u003c RIM + 6 && glint > RIM - 20 && Math.cos(a) \u003c -0.6 ? 120 : 0;\n    add(buf, y * W + x, v + gl, v + gl, v + 8 + gl);\n  }\n  // The stream from the tap, a little wavering, while the tap is open and as its tail falls.\n  const sTop = P.mode === POUR ? 11 : P.streamTop;\n  const sBot = level - hH;\n  if (sTop \u003c sBot) {\n    const sx = Math.round(CX - 1 + 0.6 * Math.sin(P.t * 7));\n    for (let y = Math.max(11, Math.floor(sTop)); y \u003c sBot && y \u003c FLOOR; y++)\n      for (let i = -1; i \u003c= 2; i++) {\n        const x = sx + i;\n        const core = i === 0 || i === 1;\n        const f = core ? 1 : 0.4;\n        const p = y * W + x;\n        buf[p * 3] = buf[p * 3] * (1 - f) + (clear[0] * 1.05 + 30) * f;\n        buf[p * 3 + 1] = buf[p * 3 + 1] * (1 - f) + (clear[1] * 1.05 + 30) * f;\n        buf[p * 3 + 2] = buf[p * 3 + 2] * (1 - f) + (clear[2] * 1.05 + 26) * f;\n        if (i === 0 && (y + Math.floor(P.t * 30)) % 7 \u003c 2) add(buf, p, 60, 60, 60);\n      }\n  }\n  // The tap from the front: a dark handle carrying a badge in the beer's\n  // colour, the chrome body, and the spout over the rim.\n  const put = (x, y, c0, c1, c2) => {\n    const p = y * W + x;\n    buf[p * 3] = c0;\n    buf[p * 3 + 1] = c1;\n    buf[p * 3 + 2] = c2;\n  };\n  for (let y = 0; y \u003c 5; y++)\n    for (let x = 28; x \u003c= 35; x++) {\n      const edge = x === 28 || x === 35;\n      if (y >= 1 && y \u003c= 3 && !edge && x > 29 && x \u003c 34) put(x, y, clear[0] * 0.9 + 20, clear[1] * 0.9 + 20, clear[2] * 0.9 + 20);\n      else put(x, y, x === 28 ? 96 : edge ? 22 : 52, x === 28 ? 90 : edge ? 20 : 46, x === 28 ? 86 : edge ? 19 : 42);\n    }\n  for (let y = 5; y \u003c 11; y++) {\n    const body = y \u003c= 7;\n    const x0 = body ? 24 : 29;\n    const x1 = body ? 39 : 34;\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      const v = (body ? 70 + 40 * (7 - y) : 60) + 150 * Math.exp(-(((u - 0.32) / 0.14) ** 2)) + (u > 0.85 || u \u003c 0.08 ? -30 : 0);\n      put(x, y, v * 0.92, v * 0.95, v);\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-pint","type":"code","name":"pint","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pint\n// Family:  cells\n// Idea:    A tap pours a pint as tall as the panel against a dark bar, the cloudy beer clears from the bottom up under rising chains of bubbles while the foam head coarsens into bright polygonal cells, and someone drinks it down in sips that leave lacing rings on the glass before it is poured again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the pour, the settling surge and the lacing of a pint at the bar\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Beer=0..1, Speed=0.2..3, Fizz=4..20, Head=0..1\n//\n// Knob 1: Beer. What is on tap: a pale lager at 0, an amber ale at 0.35, a red ale at 0.65 and a stout at 1, whose cream-brown surge settles black from the bottom up.\n// Knob 2: Speed. How fast the bar runs: at 2 a pint pours in 6 s, starts to go 5 s later in five sips 5 s apart and is poured again; at 0.2 it all runs ten times slower.\n// Knob 3: Fizz. How many nucleation sites stream bubbles, from 4 to 20, and how thick the haze of fine bubbles is, so how long a lager takes to clear: about 6 s at 4 and 17 s at 20.\n// Knob 4: Head. How tall the foam head stands, from 12 rows to 32, and how fast its small bubbles coarsen into large cells.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\n// The glass: rim row, inside floor row, and the bar top it stands on.\nconst RIM = 14;\nconst FLOOR = 118;\nconst BAR = 124;\n// Bar states.\nconst POUR = 0;\nconst REST = 1;\n// Clear and cloudy body, and head, for lager, amber ale, red ale and stout.\nconst BEERS = [\n  [0, [238, 178, 28], [204, 186, 138], [238, 236, 226]],\n  [0.35, [216, 106, 18], [196, 146, 104], [240, 230, 206]],\n  [0.65, [168, 38, 18], [176, 112, 90], [238, 222, 198]],\n  [1, [20, 10, 6], [152, 114, 82], [224, 198, 152]],\n];\nconst MAXB = 700;\nconst FOAM = 640;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// Inside half-width of the shaker glass at a row: 26 LEDs at the rim, 20 at the floor.\nfunction half(y) {\n  return 26 - (6 * (clamp(y, RIM, FLOOR) - RIM)) / (FLOOR - RIM);\n}\n\nfunction beerAt(b) {\n  let i = 0;\n  while (i \u003c BEERS.length - 2 && BEERS[i + 1][0] \u003c b) i++;\n  const A = BEERS[i];\n  const B = BEERS[i + 1];\n  const f = clamp((b - A[0]) / (B[0] - A[0]), 0, 1);\n  const mix = (k) => A[k].map((v, j) => v + (B[k][j] - v) * f);\n  return { clear: mix(1), cloudy: mix(2), head: mix(3) };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.buf = new Float32Array(N * 3);\n  P.bx = new Float32Array(MAXB);\n  P.by = new Float32Array(MAXB);\n  P.bv = new Float32Array(MAXB);\n  P.nb = 0;\n  P.fx = new Float32Array(FOAM);\n  P.fv = new Float32Array(FOAM);\n  P.fu = new Float32Array(FOAM);\n  P.nf = 0;\n  P.wet = new Float32Array(H);\n  // The bar lights' reflection down the left of the glass and a fainter one\n  // on the right, and where along a row the climbing glint sits.\n  P.hl = new Float32Array(N);\n  P.bump = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) P.bump[x] = 0.8 * Math.sin(x * 0.9 + 1.3);\n  P.glx = new Float32Array(N);\n  for (let y = RIM; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const hw = half(y);\n      const dx = x + 0.5 - CX;\n      P.hl[y * W + x] = 255 * (Math.exp(-(((dx + hw - 3.5) / 1.3) ** 2)) * 0.32 + Math.exp(-(((dx - hw + 2.5) / 0.9) ** 2)) * 0.12) * (0.75 + 0.25 * Math.sin(y * 0.11));\n      P.glx[y * W + x] = 204 * Math.exp(-(((dx + hw - 3.5) / 1.6) ** 2));\n    }\n  // A smooth noise field for the haze and the surge, tiled every 128 rows.\n  P.noise = new Float32Array(N);\n  const g = [];\n  for (let i = 0; i \u003c 17 * 33; i++) g.push(Math.random());\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const gx = x / 4;\n      const gy = y / 4;\n      const i = Math.floor(gx);\n      const j = Math.floor(gy);\n      const u = gx - i;\n      const v = gy - j;\n      const s = (a, b) => g[(b % 32) * 17 + (a % 16)];\n      const su = u * u * (3 - 2 * u);\n      const sv = v * v * (3 - 2 * v);\n      P.noise[y * W + x] = (s(i, j) * (1 - su) + s(i + 1, j) * su) * (1 - sv) + (s(i, j + 1) * (1 - su) + s(i + 1, j + 1) * su) * sv;\n    }\n  Object.assign(P, {\n    T: 0,\n    t: 0,\n    mode: POUR,\n    modeT: 0,\n    level: FLOOR,\n    headH: 0,\n    foamAge: 0,\n    front: FLOOR + 4,\n    sips: 0,\n    sipFrom: 0,\n    sipTo: 0,\n    sipT: -1,\n    laces: [],\n    siteT: new Float32Array(20),\n    streamTop: 11,\n    beer: 0,\n    fizz: 4,\n    head: 0.06,\n    started: false,\n  });\n  freshFoam(P);\n}\n\n// The head made by a pour: small bubbles packed tight, each with a rank that\n// says how soon it pops or is swallowed by its neighbours as the foam coarsens.\nfunction freshFoam(P) {\n  P.nf = 0;\n  P.foamAge = 0;\n  // One bubble in each 1.9 LED square, jittered.\n  for (let j = 0; j \u003c 19; j++)\n    for (let i = 0; i \u003c 29 && P.nf \u003c FOAM; i++) {\n      P.fx[P.nf] = 4.5 + (i + 0.15 + 0.7 * Math.random()) * 1.9;\n      P.fv[P.nf] = (j + 0.15 + 0.7 * Math.random()) * 1.9;\n      P.fu[P.nf] = Math.random();\n      P.nf++;\n    }\n  P.bStart = new Int32Array(16 * 10 + 1);\n  P.bItem = new Int32Array(FOAM);\n  P.bOf = new Int32Array(FOAM);\n}\n\n// The head's full height for the Head knob, and the liquid level of a full pint.\nconst headFull = (P) => 12 + 20 * P.head;\nconst fullLevel = (P) => RIM + 1 + headFull(P);\n\nfunction startPour(P) {\n  P.mode = POUR;\n  P.modeT = 0;\n  P.front = FLOOR + 4;\n  P.sips = 0;\n  freshFoam(P);\n  P.headH = Math.min(P.headH, 3);\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.modeT += h;\n  P.foamAge += h;\n  const stout = clamp((P.beer - 0.6) / 0.4, 0, 1);\n  const full = fullLevel(P);\n  if (P.mode === POUR) {\n    // About 15 rows a second; the falling stream whips up the head.\n    P.level = Math.max(full, P.level - h * 15);\n    P.headH = Math.min(headFull(P) * (P.level > full + 0.5 ? 0.9 : 1), P.headH + h * 5);\n    P.foamAge = 0;\n    P.streamTop = 11;\n    if (P.level \u003c= full) {\n      P.mode = REST;\n      P.modeT = 0;\n      P.nextSip = 4.6;\n    }\n  } else {\n    // The stream's tail falls once the tap closes.\n    P.streamTop += h * (20 + 140 * P.modeT);\n    // Clearing climbs from the floor: quick for lager, a slow surge for stout.\n    P.front -= (h * (11 - 6 * stout) * 1.4) / (0.6 + P.fizz / 10);\n    // The head drains and pops down to about 60% of its height.\n    const target = headFull(P) * (0.6 + 0.4 * Math.exp(-P.foamAge / 14));\n    P.headH += (target - P.headH) * Math.min(1, h * 0.8);\n    if (P.sipT \u003c 0 && P.modeT >= P.nextSip) {\n      if (P.sips >= 5) startPour(P);\n      else {\n        P.sipT = 0;\n        P.sipFrom = P.level;\n        P.sipTo = Math.min(FLOOR - 16, P.level + (FLOOR - full) / 6);\n        P.laces.push({ y: P.level - P.headH, k: Math.random() * 97 });\n        if (P.laces.length > 6) P.laces.shift();\n      }\n    }\n    if (P.sipT >= 0) {\n      P.sipT += h;\n      const f = Math.min(1, P.sipT / 1.2);\n      const old = P.level;\n      P.level = P.sipFrom + (P.sipTo - P.sipFrom) * f * f * (3 - 2 * f);\n      for (let y = Math.max(0, Math.floor(old)); y \u003c P.level && y \u003c H; y++) P.wet[y] = 1;\n      if (f >= 1) {\n        P.sipT = -1;\n        P.sips++;\n        P.nextSip = P.modeT + (P.sips >= 5 ? 3 : 5);\n      }\n    }\n  }\n  if (P.mode === POUR) P.laces.length = Math.min(P.laces.length, P.laces.filter((l) => l.y \u003c P.level - P.headH - 1).length);\n  for (let y = 0; y \u003c H; y++) P.wet[y] *= Math.exp(-h / 5);\n  bubbles(P, h);\n}\n\n// Carbonation: chains of bubbles from nucleation sites on the floor and walls,\n// speeding up and swelling as they rise.\nfunction bubbles(P, h) {\n  const n = Math.round(P.fizz);\n  const every = 0.3 / (0.6 + (0.4 * n) / 4);\n  for (let i = 0; i \u003c n; i++) {\n    P.siteT[i] -= h;\n    if (P.siteT[i] > 0) continue;\n    P.siteT[i] += every * (0.8 + 0.4 * Math.random()) * (1 + 0.5 * ((i * 0.71) % 1));\n    if (P.nb >= MAXB) continue;\n    let x;\n    let y;\n    if (i % 4 === 3) {\n      y = 44 + ((i * 0.37) % 1) * 66;\n      x = CX + (i % 8 === 3 ? -1 : 1) * (half(y) - 1.2);\n    } else {\n      y = FLOOR - 0.5;\n      x = CX + (((i * 0.618 + 0.13) % 1) - 0.5) * 2 * (half(FLOOR) - 3);\n    }\n    if (y \u003c= P.level + 1) continue;\n    P.bx[P.nb] = x;\n    P.by[P.nb] = y;\n    P.bv[P.nb] = 5;\n    P.nb++;\n  }\n  const { bx, by, bv } = P;\n  const top = P.level + 0.5;\n  for (let i = 0; i \u003c P.nb; i++) {\n    const v = Math.min(32, bv[i] + h * 16);\n    bv[i] = v;\n    by[i] -= v * h;\n    if (by[i] > top) continue;\n    // At the surface: the last bubble takes this one's place.\n    P.nb--;\n    bx[i] = bx[P.nb];\n    by[i] = by[P.nb];\n    bv[i] = bv[P.nb];\n    i--;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.beer = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0, 3) / 2;\n  P.fizz = clamp(k[2], 4, 20);\n  P.head = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The pint has been pouring for a few seconds when the panel opens.\n    for (let i = 0; i \u003c 50; i++) step(P, 1 / 30);\n    for (let i = 0; i \u003c 90; i++) step(P, rate / 30);\n  }\n  P.t += dt;\n  step(P, dt * rate);\n}\n\nfunction add(buf, p, r, g, b) {\n  buf[p * 3] += r;\n  buf[p * 3 + 1] += g;\n  buf[p * 3 + 2] += b;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const { clear, cloudy, head } = beerAt(P.beer);\n  const stout = clamp((P.beer - 0.6) / 0.4, 0, 1);\n  const level = P.level;\n  const hH = P.headH;\n  const noise = P.noise;\n  const t = P.T;\n  // Foam coarsening: the mean cell grows from 2 LEDs, so fewer bubbles live.\n  const cell = 2 * Math.pow(1 + P.foamAge * (0.5 + 1.5 * P.head), 0.5);\n  const alive = clamp(4 / (cell * cell), 0.02, 1);\n  const glint = 128 - ((P.t * 16) % 190);\n  // The bubbles still alive in the head, in buckets of 4 by 4 LEDs. The dry\n  // foam at the top coarsens first; the wet foam at the bottom stays fine.\n  const { bStart, bItem, bOf } = P;\n  bStart.fill(0);\n  const topH = 1.1 / Math.max(6, hH);\n  for (let q = 0; q \u003c P.nf; q++) {\n    const k = P.fu[q] * (0.45 + topH * P.fv[q]) \u003c= alive ? Math.min(9, Math.floor(P.fv[q] / 4)) * 16 + Math.min(15, Math.floor(P.fx[q] / 4)) : -1;\n    bOf[q] = k;\n    if (k >= 0) bStart[k + 1]++;\n  }\n  for (let k = 0; k \u003c 160; k++) bStart[k + 1] += bStart[k];\n  const fill = bStart.slice(0, 160);\n  for (let q = 0; q \u003c P.nf; q++) if (bOf[q] >= 0) bItem[fill[bOf[q]]++] = q;\n  // How many buckets out to look for the two nearest.\n  const R = cell \u003c 4.5 ? 1 : cell \u003c 8 ? 2 : 3;\n  const fx = P.fx;\n  const fv = P.fv;\n  const { hl, glx, bump, laces, wet: wetRows } = P;\n  // A cheap generator for the sparkle of fine bubbles, reseeded each frame.\n  let seed = (Math.random() * 4294967296) >>> 0;\n  const sparkle = 0.0012 * P.fizz;\n  const haze = 0.7 + (0.3 * (P.fizz - 4)) / 16;\n  for (let y = 0; y \u003c H; y++) {\n    const hw = half(y);\n    const inGlass = y >= RIM && y \u003c FLOOR;\n    const gy = Math.exp(-(((y - glint) / 4) ** 2));\n    // Row by row: how cloudy the beer is, where the surge texture sits\n    // going down the walls and up the middle, and how deep the row is.\n    const cl = clamp((P.front - y) / 6 + 0.5, 0, 1);\n    const sv = t * (6 + 6 * stout);\n    const rowDown = ((((y - sv) % H) + H) % H | 0) * W;\n    const rowUp = ((((y + sv) % H) + H) % H | 0) * W;\n    const deep = 1 - (0.12 * (y - level)) / (FLOOR - RIM);\n    const amp = (0.12 + 0.3 * stout) * cl;\n    // More fizz, a thicker haze of fine bubbles.\n    const hz = cl * haze;\n    const cr = clear[0] + (cloudy[0] - clear[0]) * hz;\n    const cg = clear[1] + (cloudy[1] - clear[1]) * hz;\n    const cb = clear[2] + (cloudy[2] - clear[2]) * hz;\n    const fine = sparkle * (1 - 0.6 * stout) * 4294967296;\n    const wet = 0.12 * wetRows[y];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const dx = x + 0.5 - CX;\n      let r = 9 + (3 * (H - y)) / H;\n      let g = 7 + (2 * (H - y)) / H;\n      let b = 6;\n      if (y >= BAR) {\n        // The bar top: dark wood with a sheen and the beer's reflection.\n        const wood = 0.8 + 0.2 * Math.sin(x * 0.3 + y * 2.1 + Math.sin(x * 0.07) * 3);\n        r = 52 * wood;\n        g = 31 * wood;\n        b = 18 * wood;\n        if (y === BAR) {\n          r += 40;\n          g += 28;\n          b += 18;\n        }\n        if (Math.abs(dx) \u003c half(FLOOR) && level \u003c FLOOR - 1) {\n          const f = 0.22 * (1 - (y - BAR) / 5);\n          r += clear[0] * f;\n          g += clear[1] * f;\n          b += clear[2] * f;\n        }\n      } else if (y >= FLOOR && Math.abs(dx) \u003c= half(FLOOR) + 1) {\n        // The thick glass foot, lit through by the beer above it.\n        const lit = level \u003c FLOOR - 1 ? 0.5 : 0.12;\n        r = 26 + clear[0] * lit;\n        g = 28 + clear[1] * lit;\n        b = 32 + clear[2] * lit;\n        if (y === BAR - 1 || Math.abs(dx) > half(FLOOR)) {\n          r += 50;\n          g += 52;\n          b += 56;\n        }\n      } else if (inGlass && Math.abs(dx) \u003c= hw) {\n        const e = Math.abs(dx) / hw;\n        const topV = hH + bump[x] * Math.min(1, hH / 4);\n        if (y >= level) {\n          // The beer: cloudy above the clearing front, clear below it, and\n          // a surge in the haze: down along the walls, up the middle.\n          const n = noise[(e > 0.62 ? rowDown : rowUp) + x] - 0.5;\n          const m = (0.84 + 0.16 * (1 - e * e)) * deep * (1 + n * amp);\n          r = cr * m;\n          g = cg * m;\n          b = cb * m;\n          seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0;\n          if (seed \u003c fine) {\n            r += 70;\n            g += 70;\n            b += 60;\n          }\n        } else if (level - y \u003c= topV) {\n          // The head: Voronoi cells round the living bubbles, with bright\n          // Plateau borders between them.\n          const v = level - y;\n          const bi = Math.min(9, Math.floor(v / 4));\n          const bj = x >> 2;\n          let d1 = 1e9;\n          let d2 = 1e9;\n          let a = -1;\n          let c = -1;\n          for (let jj = Math.max(0, bi - R); jj \u003c= Math.min(9, bi + R); jj++)\n            for (let ii = Math.max(0, bj - R); ii \u003c= Math.min(15, bj + R); ii++)\n              for (let qi = bStart[jj * 16 + ii], qe = bStart[jj * 16 + ii + 1]; qi \u003c qe; qi++) {\n                const q = bItem[qi];\n                const ex = fx[q] - x - 0.5;\n                const ev = fv[q] - v;\n                const d = ex * ex + ev * ev;\n                if (d \u003c d1) {\n                  d2 = d1;\n                  c = a;\n                  d1 = d;\n                  a = q;\n                } else if (d \u003c d2) {\n                  d2 = d;\n                  c = q;\n                }\n              }\n          let m = 0.62;\n          if (c >= 0) {\n            const sep = Math.sqrt((fx[a] - fx[c]) ** 2 + (fv[a] - fv[c]) ** 2);\n            const edge = (d2 - d1) / (2 * sep);\n            // A Plateau border, then the film of the cell, darker toward its middle.\n            m = edge \u003c 0.6 ? 1.06 : 0.9 - 0.24 * Math.min(1, (edge - 0.6) / Math.max(1, sep * 0.4));\n          }\n          // Wet foam at the bottom takes the beer's colour; the crown is lit.\n          const wetF = clamp(1 - v / 2.5, 0, 1) * 0.5;\n          const crown = topV - v \u003c 1.2 ? 0.12 : 0;\n          r = (head[0] * (1 - wetF) + clear[0] * wetF) * (m + crown);\n          g = (head[1] * (1 - wetF) + clear[1] * wetF) * (m + crown);\n          b = (head[2] * (1 - wetF) + clear[2] * wetF) * (m + crown);\n        } else {\n          // Empty glass: the bar behind, a film where beer has just run down,\n          // and the lacing rings each sip left.\n          r = 12 + clear[0] * wet;\n          g = 11 + clear[1] * wet;\n          b = 11 + clear[2] * wet;\n          for (const l of laces) {\n            const dy = y - l.y;\n            if (dy \u003c -1 || dy > 5) continue;\n            const hsh = Math.sin(x * 12.9898 + l.k * 78.233 + Math.floor(dy) * 37.7) * 43758.5;\n            const q = hsh - Math.floor(hsh);\n            const lace = dy \u003c 2 ? (q > 0.35 ? 0.55 : 0.2) : q > 0.86 + dy * 0.02 ? 0.4 : 0;\n            r += head[0] * lace;\n            g += head[1] * lace;\n            b += head[2] * lace;\n          }\n        }\n        // The bar lights' reflection runs down the left of the glass, with a\n        // glint that climbs it, and a fainter one on the right.\n        const s = hl[p] + glx[p] * gy;\n        r += s;\n        g += s;\n        b += s;\n      } else if (inGlass && Math.abs(dx) \u003c= hw + 1.2) {\n        // The glass wall seen edge on.\n        r = 40;\n        g = 44;\n        b = 50;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  // Rising bubbles, bright in clear beer and lost in the haze.\n  for (let i = 0; i \u003c P.nb; i++) {\n    const x = Math.round(P.bx[i] - 0.5);\n    const y = Math.round(P.by[i]);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const cl = clamp((P.front - y) / 6 + 0.5, 0, 1);\n    const v = (1 - 0.45 * cl) * (1 - 0.8 * stout) * (0.55 + Math.min(0.45, (FLOOR - y) / 120));\n    const p = y * W + x;\n    add(buf, p, 170 * v, 160 * v, 130 * v);\n    if (x + 1 \u003c W) add(buf, p + 1, 110 * v, 100 * v, 80 * v);\n    if (FLOOR - y > 40 && y + 1 \u003c H) add(buf, p + W, 60 * v, 56 * v, 44 * v);\n  }\n  // The rim, seen from just below: a flat ellipse, its near half brighter.\n  for (let a = 0; a \u003c 6.283; a += 0.03) {\n    const s = Math.sin(a);\n    const x = Math.round(CX - 0.5 + 27 * Math.cos(a));\n    const y = Math.round(RIM - 0.5 + 1.6 * s);\n    if (x \u003c 0 || x >= W) continue;\n    const v = s > 0 ? 90 : 45;\n    const gl = glint \u003c RIM + 6 && glint > RIM - 20 && Math.cos(a) \u003c -0.6 ? 120 : 0;\n    add(buf, y * W + x, v + gl, v + gl, v + 8 + gl);\n  }\n  // The stream from the tap, a little wavering, while the tap is open and as its tail falls.\n  const sTop = P.mode === POUR ? 11 : P.streamTop;\n  const sBot = level - hH;\n  if (sTop \u003c sBot) {\n    const sx = Math.round(CX - 1 + 0.6 * Math.sin(P.t * 7));\n    for (let y = Math.max(11, Math.floor(sTop)); y \u003c sBot && y \u003c FLOOR; y++)\n      for (let i = -1; i \u003c= 2; i++) {\n        const x = sx + i;\n        const core = i === 0 || i === 1;\n        const f = core ? 1 : 0.4;\n        const p = y * W + x;\n        buf[p * 3] = buf[p * 3] * (1 - f) + (clear[0] * 1.05 + 30) * f;\n        buf[p * 3 + 1] = buf[p * 3 + 1] * (1 - f) + (clear[1] * 1.05 + 30) * f;\n        buf[p * 3 + 2] = buf[p * 3 + 2] * (1 - f) + (clear[2] * 1.05 + 26) * f;\n        if (i === 0 && (y + Math.floor(P.t * 30)) % 7 \u003c 2) add(buf, p, 60, 60, 60);\n      }\n  }\n  // The tap from the front: a dark handle carrying a badge in the beer's\n  // colour, the chrome body, and the spout over the rim.\n  const put = (x, y, c0, c1, c2) => {\n    const p = y * W + x;\n    buf[p * 3] = c0;\n    buf[p * 3 + 1] = c1;\n    buf[p * 3 + 2] = c2;\n  };\n  for (let y = 0; y \u003c 5; y++)\n    for (let x = 28; x \u003c= 35; x++) {\n      const edge = x === 28 || x === 35;\n      if (y >= 1 && y \u003c= 3 && !edge && x > 29 && x \u003c 34) put(x, y, clear[0] * 0.9 + 20, clear[1] * 0.9 + 20, clear[2] * 0.9 + 20);\n      else put(x, y, x === 28 ? 96 : edge ? 22 : 52, x === 28 ? 90 : edge ? 20 : 46, x === 28 ? 86 : edge ? 19 : 42);\n    }\n  for (let y = 5; y \u003c 11; y++) {\n    const body = y \u003c= 7;\n    const x0 = body ? 24 : 29;\n    const x1 = body ? 39 : 34;\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      const v = (body ? 70 + 40 * (7 - y) : 60) + 150 * Math.exp(-(((u - 0.32) / 0.14) ** 2)) + (u > 0.85 || u \u003c 0.08 ? -30 : 0);\n      put(x, y, v * 0.92, v * 0.95, v);\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Beer=0..1, Speed=0.2..3, Fizz=4..20, Head=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Beer","min":0,"max":1,"about":"What is on tap: a pale lager at 0, an amber ale at 0.35, a red ale at 0.65 and a stout at 1, whose cream-brown surge settles black from the bottom up."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the bar runs: at 2 a pint pours in 6 s, starts to go 5 s later in five sips 5 s apart and is poured again; at 0.2 it all runs ten times slower."},{"name":"Fizz","min":4,"max":20,"about":"How many nucleation sites stream bubbles, from 4 to 20, and how thick the haze of fine bubbles is, so how long a lager takes to clear: about 6 s at 4 and 17 s at 20."},{"name":"Head","min":0,"max":1,"about":"How tall the foam head stands, from 12 rows to 32, and how fast its small bubbles coarsen into large cells."}],"start":[0,2,4,0.06],"measures":{"motion":0.1411,"detail":0.0425,"edges":0.5054,"complexity":1.0501,"coverage":0.678,"colour":0.3448,"drift":0.1113},"knobResponse":[0.1725,0.2433,0.0546,0.0641]},{"slug":"plait","title":"Plait","family":"textile","round":15,"note":"세 가닥이 바깥 가닥부터 가운데 위로 넘어가며 땋여 내려가요. 밑으로 들어가는 가닥은 어둡고, 다 땋으면 리본을 묶고 다음 가닥이 내려와요. K3 이 일곱 가닥 납작 땋기까지 가요.","idea":"Coloured strands hang from a clip and are plaited down the panel, the outside strand crossing over to the middle each time, until the plait is tied off with a ribbon and lowered away, and the next clip of loose strands comes down.","buttons":"K1 tap ties the plait off with a ribbon where it has got to, long tails and all; it is lowered away and a new one starts.","code":"// ===== Patternflow pattern =====\n// Title:   Plait\n// Family:  textile\n// Idea:    Coloured strands hang from a clip and are plaited down the panel, the outside strand crossing over to the middle each time, until the plait is tied off with a ribbon and lowered away, and the next clip of loose strands comes down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 13\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Strands=3..7, Tension=0..1\n//\n// Knob 1: Hue. Turns the strands' colours together, starting from teal, blue and magenta.\n// Knob 2: Speed. How fast the hands work: at 2 the plait grows by 1.2 rows of crossings a second, at 3 by nearly two, at 0.2 by one every eight seconds.\n// Knob 3: Strands. 3 is the plait everyone knows; 4 to 7 make a flat braid, each outside strand weaving over and under all the way to the far edge.\n// Knob 4: Tension. At 0 the plait is loose and fat, 54 LEDs across with three strands crossing every 17 rows; at 1 it is pulled tight to 34 LEDs, crossing every 6 or 7.\n// Buttons: K1 tap ties the plait off with a ribbon where it has got to, long tails and all; it is lowered away and a new one starts.\n\nconst W = 64;\nconst H = 128;\nconst MAXN = 7;\n// The clip holds the strands at rows 1..6; the plait starts under it.\nconst CLIP = 7;\n// The plait is tied once its point gets this far down.\nconst TIE_AT = 100;\n// Seconds a tied plait hangs, and the seconds it takes to lower it away.\nconst HANG = 1.6;\nconst LOWER = 1.4;\n// Crossings a second at Speed 1.\nconst RATE = 0.6;\n// A tied plait is pinched to this share of its width at the ribbon.\nconst GATHER = 0.4;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// A strand's lane on a cycle of 2N steps: it walks one lane a step from the\n// left edge to the right, waits a step there, walks back and waits again.\n// Spaced two steps apart, N strands always fill the N lanes, and between two\n// whole steps a strand walking right swaps lanes with one walking left.\nfunction laneAt(q, n) {\n  if (q \u003c= n - 1) return q;\n  if (q \u003c= n) return n - 1;\n  if (q \u003c= 2 * n - 1) return 2 * n - 1 - q;\n  return 0;\n}\n\n// The integral of laneAt, so the lane can be averaged over one step and the\n// strand turns round at the edges instead of folding.\nfunction laneInt(q, n) {\n  const c = 2 * n;\n  const m = n - 1;\n  const total = m * m + m;\n  const k = Math.floor(q / c);\n  const r = q - k * c;\n  let f;\n  if (r \u003c= m) f = (r * r) / 2;\n  else if (r \u003c= n) f = (m * m) / 2 + m * (r - m);\n  else if (r \u003c= 2 * n - 1) f = (m * m) / 2 + m + (2 * n - 1) * (r - n) - (r * r - n * n) / 2;\n  else f = total;\n  return k * total + f;\n}\n\n// Lane, its slope in lanes per step, and depth for strand k at step t.\n// Crossings fall on half steps. At a crossing after an even step the strand\n// walking right is on top, after an odd step the one walking left, so every\n// strand goes over, under, over, and for three strands the outside strand\n// always crosses over the middle one.\nfunction strandAt(k, t, n, out) {\n  const c = 2 * n;\n  const q = 2 * k + t;\n  out[0] = laneInt(q + 0.5, n) - laneInt(q - 0.5, n);\n  const qa = (((q + 0.5) % c) + c) % c;\n  const qb = (((q - 0.5) % c) + c) % c;\n  out[1] = laneAt(qa, n) - laneAt(qb, n);\n  const r = ((q % c) + c) % c;\n  const wave = Math.cos(Math.PI * (t - 0.5));\n  out[2] = r \u003c n - 1 ? wave : r >= n && r \u003c 2 * n - 1 ? -wave : 0;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.phase = 0; // 0 plaiting, 1 tied and hanging, 2 lowered away\n  params.timer = 0;\n  params.tiedT = 0;\n  params.started = false;\n  params.n = 3;\n  params.hue = 0;\n  params.speed = 2;\n  params.tension = 0.06;\n  // Each strand's centre row by row: x, depth, the nudge from a row to the\n  // nearest point (slope / (1 + slope^2)) and radius, radius 0 where the strand\n  // is absent; lo..hi is the span of LEDs it can reach in that row.\n  params.cx = new Float32Array(MAXN * H);\n  params.cz = new Float32Array(MAXN * H);\n  params.cs = new Float32Array(MAXN * H);\n  params.cr = new Float32Array(MAXN * H);\n  params.lo = new Float32Array(MAXN * H);\n  params.hi = new Float32Array(MAXN * H);\n  params.dist = new Float32Array(MAXN);\n  params.surf = new Float32Array(MAXN);\n  params.col = new Float32Array(MAXN * 3 + 3);\n  params.tmp = new Float32Array(3);\n  params.img = new Float32Array(W * H * 3);\n  params.out = new Float32Array(W * H * 3);\n  // The tied plait and the next one, drawn once each while one replaces the other.\n  params.old = new Float32Array(W * H * 3);\n  params.next = new Float32Array(W * H * 3);\n  params.valid = 0;\n  params.cn = -1;\n  params.zbuf = new Float32Array(W * H);\n}\n\n// The plait's shape for the current knobs.\nfunction geometry(params) {\n  const n = params.n;\n  const tension = params.tension;\n  // Half the plait's width, from 27 LEDs loose to 17 tight.\n  const half = 27 - 10 * tension;\n  const lane = (2 * half) / (n - 1 + 1.4);\n  return {\n    n: n,\n    lane: lane,\n    radius: lane * 0.7,\n    step: lane * (1.1 - 0.45 * tension),\n    spread: (W - 4 - 1.4 * lane * 0.7) / (n - 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.speed = Math.max(0.05, k[1]);\n  params.n = Math.max(3, Math.min(MAXN, Math.round(k[2])));\n  params.tension = Math.max(0, Math.min(1, k[3]));\n  const g = geometry(params);\n  if (!params.started) {\n    params.started = true;\n    // Start part way down, so the first frame already shows a plait.\n    params.t = (44 - CLIP) / g.step;\n  }\n  if (input.btnPressed && input.btnPressed[0] && params.phase === 0) {\n    params.phase = 1;\n    params.timer = 0;\n  }\n  if (params.phase === 0) {\n    params.t += dt * params.speed * RATE;\n    if (CLIP + params.t * g.step >= TIE_AT) {\n      params.phase = 1;\n      params.timer = 0;\n    }\n  } else if (params.phase === 1) {\n    params.timer += dt;\n    if (params.timer > HANG) {\n      params.phase = 2;\n      params.timer = 0;\n      params.tiedT = params.t;\n      params.t = 0;\n    }\n  } else {\n    params.timer += dt;\n    if (params.timer > LOWER) {\n      params.phase = 0;\n      params.timer = 0;\n    }\n  }\n}\n\n// Lay out each strand's centre line, row by row, for a plait whose point is at\n// step tp, its clip shifted down by off rows; tied (0..1) is how far the\n// ribbon has pulled its end in.\nfunction layout(params, g, tp, off, tied) {\n  const n = g.n;\n  const mid = W / 2;\n  const tmp = params.tmp;\n  const cx = params.cx;\n  const cz = params.cz;\n  const cs = params.cs;\n  const cr = params.cr;\n  const depth = g.radius * 0.9;\n  const yp = CLIP + tp * g.step;\n  // The tails get shorter as the plait uses up the strands.\n  const prog = Math.min(1, (yp - CLIP) / (TIE_AT - CLIP));\n  const tailEnd = yp + (H - 1 - CLIP) * (1 - prog) + (20 - 4 * tied) * prog;\n  const reach = 26 - 16 * tied;\n  for (let k = 0; k \u003c n; k++) {\n    // Where the strand leaves the plait, which way it is going there, and how\n    // deep it lies: it keeps that depth all the way down, so a strand crossing\n    // over stays over to the hand.\n    strandAt(k, tp, n, tmp);\n    const c0 = tmp[0] - (n - 1) / 2;\n    const pinch = 1 - (1 - GATHER) * tied;\n    const x0 = mid + c0 * g.lane * pinch;\n    const s0 = ((1 - tied) * tmp[1] * g.lane) / g.step;\n    const z0 = tmp[2] * depth + k * 0.01;\n    const x1 = (x0 + c0 * 4) * tied + (mid + c0 * g.spread) * (1 - tied);\n    for (let y = 0; y \u003c H; y++) {\n      const i = k * H + y;\n      const yy = y + 0.5 - off;\n      cr[i] = 0;\n      if (yy \u003c 2) continue;\n      let sl = 0;\n      if (yy \u003c CLIP) {\n        // Under the clip the strands come straight down.\n        strandAt(k, 0, n, tmp);\n        cx[i] = mid + (tmp[0] - (n - 1) / 2) * g.lane;\n        cz[i] = -depth;\n        cr[i] = g.radius;\n      } else if (yy \u003c= yp) {\n        strandAt(k, (yy - CLIP) / g.step, n, tmp);\n        // A tied plait is gathered in to the ribbon over its last 14 rows.\n        const gather = 1 - (1 - GATHER) * tied * smooth(yp - 14, yp, yy);\n        cx[i] = mid + (tmp[0] - (n - 1) / 2) * g.lane * gather;\n        cz[i] = tmp[2] * depth;\n        sl = (tmp[1] * g.lane * gather) / g.step;\n        cr[i] = g.radius;\n      } else if (yy \u003c tailEnd) {\n        // Below the point a loose strand leaves the way it was going and bends\n        // down to the hand holding it; a tied plait's tails splay a little.\n        const u = Math.min(1, (yy - yp) / reach);\n        const u2 = u * u;\n        const u3 = u2 * u;\n        cx[i] = (2 * u3 - 3 * u2 + 1) * x0 + (u3 - 2 * u2 + u) * reach * s0 + (3 * u2 - 2 * u3) * x1;\n        sl = u \u003c 1 ? ((6 * u2 - 6 * u) * x0 + (3 * u2 - 4 * u + 1) * reach * s0 + (6 * u - 6 * u2) * x1) / reach : 0;\n        cz[i] = z0;\n        // A strand thins to its tip over the last eight rows.\n        const tip = Math.min(1, (tailEnd - yy) / 8);\n        cr[i] = g.radius * (1 - 0.25 * tied) * (0.45 + 0.55 * Math.sqrt(tip));\n      }\n      cs[i] = sl / (1 + sl * sl);\n    }\n  }\n  // The span of LEDs each strand can touch in each row: an LED within the\n  // radius of a strand finds its nearest point at most half a radius up or down.\n  const lo = params.lo;\n  const hi = params.hi;\n  const rows = Math.ceil(g.radius / 2 + 2);\n  for (let k = 0; k \u003c n; k++)\n    for (let y = 0; y \u003c H; y++) {\n      let a = 1e9;\n      let b = -1e9;\n      const j1 = Math.min(H - 1, y + rows);\n      for (let j = Math.max(0, y - rows); j \u003c= j1; j++) {\n        const i = k * H + j;\n        if (cr[i] === 0) continue;\n        if (cx[i] - cr[i] \u003c a) a = cx[i] - cr[i];\n        if (cx[i] + cr[i] > b) b = cx[i] + cr[i];\n      }\n      lo[k * H + y] = a - 2.5;\n      hi[k * H + y] = b + 2.5;\n    }\n}\n\n// Render the laid-out strands into img and zbuf from row y0 down. For each LED\n// and strand, step from the LED's row\n// along the strand's slope to the nearest point of its centre line, so where\n// one strand dives under another the edge follows the strand and not the row.\nfunction render(params, g, y0) {\n  const n = g.n;\n  const cx = params.cx;\n  const cz = params.cz;\n  const cs = params.cs;\n  const cr = params.cr;\n  const lo = params.lo;\n  const hi = params.hi;\n  const col = params.col;\n  const img = params.img;\n  const zbuf = params.zbuf;\n  const dist = params.dist;\n  const surf = params.surf;\n  const depth = g.radius * 0.9;\n  const hl = Math.sqrt(0.45 * 0.45 + 0.5 * 0.5 + 1.74 * 1.74);\n  for (let y = y0; y \u003c H; y++) {\n    const py = y + 0.5;\n    let xa = 1e9;\n    let xb = -1e9;\n    for (let k = 0; k \u003c n; k++) {\n      if (lo[k * H + y] \u003c xa) xa = lo[k * H + y];\n      if (hi[k * H + y] > xb) xb = hi[k * H + y];\n    }\n    xa = Math.max(0, Math.floor(xa));\n    xb = Math.min(W - 1, Math.ceil(xb));\n    for (let x = xa; x \u003c= xb; x++) {\n      const p = y * W + x;\n      const px = x + 0.5;\n      let best = -1e9;\n      let bk = -1;\n      let bnx = 0;\n      let bny = 0;\n      let bz = 0;\n      let bcov = 0;\n      for (let k = 0; k \u003c n; k++) {\n        const i0 = k * H + y;\n        dist[k] = 1e9;\n        if (px \u003c lo[i0] || px > hi[i0]) continue;\n        let ys = cr[i0] > 0 ? py + (px - cx[i0]) * cs[i0] : py;\n        if (ys \u003c 0.5) ys = 0.5;\n        else if (ys > H - 1.5) ys = H - 1.5;\n        const ya = Math.floor(ys - 0.5);\n        const f = ys - 0.5 - ya;\n        const ia = k * H + ya;\n        const ra = cr[ia];\n        const rb = cr[ia + 1];\n        let xs;\n        let zs;\n        let rs;\n        if (rb === 0) {\n          if (ra === 0) continue;\n          xs = cx[ia];\n          zs = cz[ia];\n          rs = ra;\n          ys = ya + 0.5;\n        } else if (ra === 0) {\n          xs = cx[ia + 1];\n          zs = cz[ia + 1];\n          rs = rb;\n          ys = ya + 1.5;\n        } else {\n          xs = cx[ia] + (cx[ia + 1] - cx[ia]) * f;\n          zs = cz[ia] + (cz[ia + 1] - cz[ia]) * f;\n          rs = ra + (rb - ra) * f;\n        }\n        const dx = px - xs;\n        const dy = py - ys;\n        const d2 = dx * dx + dy * dy;\n        if (d2 > (rs + 2) * (rs + 2)) continue;\n        const d = Math.sqrt(d2);\n        dist[k] = d - rs;\n        if (d >= rs) {\n          surf[k] = zs;\n          if (d \u003c rs + 0.5 && zs > best) {\n            best = zs;\n            bk = k;\n            bnx = dx / d;\n            bny = dy / d;\n            bz = zs / depth;\n            bcov = rs + 0.5 - d;\n          }\n          continue;\n        }\n        surf[k] = zs + Math.sqrt(rs * rs - d * d);\n        if (surf[k] > best) {\n          best = surf[k];\n          bk = k;\n          bnx = dx / rs;\n          bny = dy / rs;\n          bz = zs / depth;\n          bcov = Math.min(1, rs + 0.5 - d);\n        }\n      }\n      if (bk \u003c 0) continue;\n      // A strand lying over this one darkens the LEDs just outside its edge,\n      // so a strand going under reads as tucked in.\n      let shade = 1;\n      for (let k = 0; k \u003c n; k++) {\n        if (k === bk || dist[k] > 2 || dist[k] \u003c -0.5) continue;\n        if (surf[k] > best - 1) shade = Math.min(shade, 0.12 + 0.88 * smooth(0, 2, dist[k]));\n      }\n      const nn = Math.min(1, bnx * bnx + bny * bny);\n      const nz = Math.sqrt(1 - nn);\n      // Light from the upper left and in front.\n      // The square root flattens the lit middle of a strand and keeps its\n      // fall-off for the rim, so it reads as round without a smear of greys.\n      const diff = Math.sqrt(Math.max(0, -0.45 * bnx - 0.5 * bny + 0.74 * nz));\n      let sp = Math.max(0, (-0.45 * bnx - 0.5 * bny + 1.74 * nz) / hl);\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      // Under, a strand is dimmer; over, it is lit full. The floor stays high\n      // enough that an orange strand going under does not turn brown.\n      const lit = (0.56 + 0.44 * (0.5 + 0.5 * bz)) * shade;\n      const v = lit * (0.14 + 0.86 * diff);\n      const spec = sp * 0.5 * lit * 255;\n      const c = bk * 3;\n      const o = p * 3;\n      img[o] = img[o] * (1 - bcov) + Math.min(255, col[c] * v + spec) * bcov;\n      img[o + 1] = img[o + 1] * (1 - bcov) + Math.min(255, col[c + 1] * v + spec) * bcov;\n      img[o + 2] = img[o + 2] * (1 - bcov) + Math.min(255, col[c + 2] * v + spec) * bcov;\n      zbuf[p] = best;\n    }\n  }\n}\n\n// A ribbon tied in a bow round the plait at row yp, grown to size (0..1):\n// a band round the gathered strands, two loops, a knot and two tails cut in a fork.\nfunction ribbon(img, params, yp, band, size) {\n  if (size \u003c= 0) return;\n  const col = params.col;\n  const c = MAXN * 3;\n  const cx = W / 2;\n  const lw = 12 * size;\n  const lh = 6 * size;\n  const ca = Math.cos(0.42);\n  const sa = Math.sin(0.42);\n  for (let y = Math.max(0, Math.floor(yp - 14)); y \u003c Math.min(H, yp + 20); y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - yp;\n      let v = 0;\n      // The band round the plait.\n      if (Math.abs(py) \u003c 1.8 && Math.abs(px) \u003c band * size) v = 0.85 - 0.12 * Math.max(0, py);\n      // The loops, tilted up and out, with a fold darker along the middle.\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const lx = s * px - lw * 0.55;\n        const ly = py + 2.5 * size;\n        const u = (lx * ca + ly * sa) / lw;\n        const w = (-lx * sa + ly * ca) / lh;\n        const e = (u * u) / 0.3 + w * w;\n        if (e \u003c 1) v = Math.max(v, Math.abs(w) \u003c 0.18 && u > -0.2 ? 0.72 : 1 - 0.18 * e);\n      }\n      // The tails, hanging down and out from the knot, forked at the end.\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const along = py / size;\n        const off = s * px - (1.5 + py * 0.42);\n        if (along > 0 && along \u003c 15 && Math.abs(off) \u003c 2.4 && !(along > 12 && Math.abs(off) \u003c (along - 12) * 0.9)) v = Math.max(v, 0.95 - 0.2 * (along / 15));\n      }\n      // The knot.\n      const kr = px * px + (py + 0.3) * (py + 0.3);\n      if (kr \u003c 10 * size * size) v = Math.max(v, 1);\n      else if (kr \u003c 14 * size * size) v = Math.min(v, 0.75);\n      if (v \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      img[o] = col[c] * v;\n      img[o + 1] = col[c + 1] * v;\n      img[o + 2] = col[c + 2] * v;\n    }\n}\n\n// The clip at the top, a rounded silver bar a little wider than the plait,\n// shifted down by off rows, drawn from row y0 down.\nfunction clip(params, half, off, y0) {\n  const img = params.img;\n  for (let j = 1; j \u003c CLIP; j++) {\n    const y = j + Math.round(off);\n    if (y \u003c y0 || y >= H) continue;\n    const u = (j + 0.5 - (CLIP + 1) / 2) / ((CLIP - 1) / 2);\n    const v = 0.35 + 0.65 * Math.sqrt(Math.max(0, 1 - u * u)) + (Math.abs(u + 0.35) \u003c 0.3 ? 0.25 : 0);\n    for (let x = 0; x \u003c W; x++) {\n      const ex = Math.abs(x + 0.5 - W / 2) - (half + 2);\n      if (ex > 1) continue;\n      const a = Math.max(0, Math.min(1, 1 - ex)) * (j === 1 || j === CLIP - 1 ? 0.75 : 1);\n      const o = (y * W + x) * 3;\n      img[o] = img[o] * (1 - a) + Math.min(255, 215 * v) * a;\n      img[o + 1] = img[o + 1] * (1 - a) + Math.min(255, 220 * v) * a;\n      img[o + 2] = img[o + 2] * (1 - a) + Math.min(255, 232 * v) * a;\n    }\n  }\n}\n\n// Copy src into out moved down by off rows, blending neighbouring rows for the\n// fraction. On top, src covers out where it is lit and lets it through where dark.\nfunction slide(out, src, off, top) {\n  const fo = Math.floor(off);\n  const fr = off - fo;\n  for (let y = 0; y \u003c H; y++) {\n    const ya = y - fo;\n    const yb = ya - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      let cov = 0;\n      if (ya >= 0 && ya \u003c H) {\n        const a = (ya * W + x) * 3;\n        r += src[a] * (1 - fr);\n        g += src[a + 1] * (1 - fr);\n        b += src[a + 2] * (1 - fr);\n        if (src[a] + src[a + 1] + src[a + 2] > 0) cov += 1 - fr;\n      }\n      if (yb >= 0 && yb \u003c H) {\n        const a = (yb * W + x) * 3;\n        r += src[a] * fr;\n        g += src[a + 1] * fr;\n        b += src[a + 2] * fr;\n        if (src[a] + src[a + 1] + src[a + 2] > 0) cov += fr;\n      }\n      if (!top) cov = 1;\n      out[o] = r + out[o] * (1 - cov);\n      out[o + 1] = g + out[o + 1] * (1 - cov);\n      out[o + 2] = b + out[o + 2] * (1 - cov);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const g = geometry(params);\n  const col = params.col;\n  const hue = params.hue + 0.47;\n  const fan = (0.62 * (g.n - 1)) / g.n;\n  for (let k = 0; k \u003c g.n; k++) hsvInto(col, k * 3, hue + (k * 0.62) / g.n, 0.78, 1);\n  // The ribbon takes the colour in the middle of the gap the strands leave on the wheel.\n  hsvInto(col, MAXN * 3, hue + fan + (1 - fan) / 2 - 0.04, 0.68, 1);\n  const half = ((g.n - 1) * g.lane) / 2 + g.radius;\n  // Half the width of the gathered end, where the ribbon's band goes round.\n  const band = ((g.n - 1) * g.lane * GATHER) / 2 + g.radius * 0.9;\n  const img = params.img;\n  const zbuf = params.zbuf;\n  const phase = params.phase;\n  // While the knobs stay put, the plait above its point does not change, so\n  // the rows that were finished last frame are kept and only the rest drawn.\n  const same = params.cn === g.n && params.ct === params.tension && params.ch === params.hue && params.cp === phase;\n  let y0 = same ? params.valid : 0;\n  params.cn = g.n;\n  params.ct = params.tension;\n  params.ch = params.hue;\n  params.cp = phase;\n  let out = img;\n  if (phase === 2) {\n    // The tied plait is lowered out of sight on its clip and the next clip of\n    // loose strands comes down after it. Neither changes shape on the way, so\n    // each is drawn once and slid down a fraction of a row at a time.\n    if (!same) {\n      img.fill(0);\n      zbuf.fill(-1e9);\n      layout(params, g, params.tiedT, 0, 1);\n      render(params, g, 0);\n      clip(params, half, 0, 0);\n      ribbon(img, params, CLIP + params.tiedT * g.step, band, 1);\n      params.old.set(img);\n      img.fill(0);\n      zbuf.fill(-1e9);\n      layout(params, g, 0, 0, 0);\n      render(params, g, 0);\n      clip(params, half, 0, 0);\n      params.next.set(img);\n    }\n    const off = smooth(0, 1, params.timer / LOWER) * (H + 4);\n    out = params.out;\n    slide(out, params.next, off - H - 4, false);\n    slide(out, params.old, off, true);\n    params.valid = 0;\n  } else {\n    img.fill(0, y0 * W * 3);\n    zbuf.fill(-1e9, y0 * W);\n    const yp = CLIP + params.t * g.step;\n    if (y0 \u003c H) {\n      layout(params, g, params.t, 0, phase === 1 ? smooth(0, 0.35, params.timer) : 0);\n      render(params, g, y0);\n      clip(params, half, 0, y0);\n    }\n    // A hanging plait is still; a growing one is settled down to a radius above its point.\n    params.valid = phase === 1 ? (params.timer > 0.4 ? H : Math.floor(yp - 20 - g.radius)) : Math.max(0, Math.floor(yp - g.radius - 4));\n    if (phase === 1) {\n      out = params.out;\n      out.set(img);\n      ribbon(out, params, yp, band, smooth(0, 0.35, params.timer));\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      if (out[o] + out[o + 1] + out[o + 2] \u003c 1) continue;\n      display.setPixel(x, y, out[o], out[o + 1], out[o + 2]);\n    }\n}\n","layer":{"id":"layer-plait","type":"code","name":"plait","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Plait\n// Family:  textile\n// Idea:    Coloured strands hang from a clip and are plaited down the panel, the outside strand crossing over to the middle each time, until the plait is tied off with a ribbon and lowered away, and the next clip of loose strands comes down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 13\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Strands=3..7, Tension=0..1\n//\n// Knob 1: Hue. Turns the strands' colours together, starting from teal, blue and magenta.\n// Knob 2: Speed. How fast the hands work: at 2 the plait grows by 1.2 rows of crossings a second, at 3 by nearly two, at 0.2 by one every eight seconds.\n// Knob 3: Strands. 3 is the plait everyone knows; 4 to 7 make a flat braid, each outside strand weaving over and under all the way to the far edge.\n// Knob 4: Tension. At 0 the plait is loose and fat, 54 LEDs across with three strands crossing every 17 rows; at 1 it is pulled tight to 34 LEDs, crossing every 6 or 7.\n// Buttons: K1 tap ties the plait off with a ribbon where it has got to, long tails and all; it is lowered away and a new one starts.\n\nconst W = 64;\nconst H = 128;\nconst MAXN = 7;\n// The clip holds the strands at rows 1..6; the plait starts under it.\nconst CLIP = 7;\n// The plait is tied once its point gets this far down.\nconst TIE_AT = 100;\n// Seconds a tied plait hangs, and the seconds it takes to lower it away.\nconst HANG = 1.6;\nconst LOWER = 1.4;\n// Crossings a second at Speed 1.\nconst RATE = 0.6;\n// A tied plait is pinched to this share of its width at the ribbon.\nconst GATHER = 0.4;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// A strand's lane on a cycle of 2N steps: it walks one lane a step from the\n// left edge to the right, waits a step there, walks back and waits again.\n// Spaced two steps apart, N strands always fill the N lanes, and between two\n// whole steps a strand walking right swaps lanes with one walking left.\nfunction laneAt(q, n) {\n  if (q \u003c= n - 1) return q;\n  if (q \u003c= n) return n - 1;\n  if (q \u003c= 2 * n - 1) return 2 * n - 1 - q;\n  return 0;\n}\n\n// The integral of laneAt, so the lane can be averaged over one step and the\n// strand turns round at the edges instead of folding.\nfunction laneInt(q, n) {\n  const c = 2 * n;\n  const m = n - 1;\n  const total = m * m + m;\n  const k = Math.floor(q / c);\n  const r = q - k * c;\n  let f;\n  if (r \u003c= m) f = (r * r) / 2;\n  else if (r \u003c= n) f = (m * m) / 2 + m * (r - m);\n  else if (r \u003c= 2 * n - 1) f = (m * m) / 2 + m + (2 * n - 1) * (r - n) - (r * r - n * n) / 2;\n  else f = total;\n  return k * total + f;\n}\n\n// Lane, its slope in lanes per step, and depth for strand k at step t.\n// Crossings fall on half steps. At a crossing after an even step the strand\n// walking right is on top, after an odd step the one walking left, so every\n// strand goes over, under, over, and for three strands the outside strand\n// always crosses over the middle one.\nfunction strandAt(k, t, n, out) {\n  const c = 2 * n;\n  const q = 2 * k + t;\n  out[0] = laneInt(q + 0.5, n) - laneInt(q - 0.5, n);\n  const qa = (((q + 0.5) % c) + c) % c;\n  const qb = (((q - 0.5) % c) + c) % c;\n  out[1] = laneAt(qa, n) - laneAt(qb, n);\n  const r = ((q % c) + c) % c;\n  const wave = Math.cos(Math.PI * (t - 0.5));\n  out[2] = r \u003c n - 1 ? wave : r >= n && r \u003c 2 * n - 1 ? -wave : 0;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.phase = 0; // 0 plaiting, 1 tied and hanging, 2 lowered away\n  params.timer = 0;\n  params.tiedT = 0;\n  params.started = false;\n  params.n = 3;\n  params.hue = 0;\n  params.speed = 2;\n  params.tension = 0.06;\n  // Each strand's centre row by row: x, depth, the nudge from a row to the\n  // nearest point (slope / (1 + slope^2)) and radius, radius 0 where the strand\n  // is absent; lo..hi is the span of LEDs it can reach in that row.\n  params.cx = new Float32Array(MAXN * H);\n  params.cz = new Float32Array(MAXN * H);\n  params.cs = new Float32Array(MAXN * H);\n  params.cr = new Float32Array(MAXN * H);\n  params.lo = new Float32Array(MAXN * H);\n  params.hi = new Float32Array(MAXN * H);\n  params.dist = new Float32Array(MAXN);\n  params.surf = new Float32Array(MAXN);\n  params.col = new Float32Array(MAXN * 3 + 3);\n  params.tmp = new Float32Array(3);\n  params.img = new Float32Array(W * H * 3);\n  params.out = new Float32Array(W * H * 3);\n  // The tied plait and the next one, drawn once each while one replaces the other.\n  params.old = new Float32Array(W * H * 3);\n  params.next = new Float32Array(W * H * 3);\n  params.valid = 0;\n  params.cn = -1;\n  params.zbuf = new Float32Array(W * H);\n}\n\n// The plait's shape for the current knobs.\nfunction geometry(params) {\n  const n = params.n;\n  const tension = params.tension;\n  // Half the plait's width, from 27 LEDs loose to 17 tight.\n  const half = 27 - 10 * tension;\n  const lane = (2 * half) / (n - 1 + 1.4);\n  return {\n    n: n,\n    lane: lane,\n    radius: lane * 0.7,\n    step: lane * (1.1 - 0.45 * tension),\n    spread: (W - 4 - 1.4 * lane * 0.7) / (n - 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.speed = Math.max(0.05, k[1]);\n  params.n = Math.max(3, Math.min(MAXN, Math.round(k[2])));\n  params.tension = Math.max(0, Math.min(1, k[3]));\n  const g = geometry(params);\n  if (!params.started) {\n    params.started = true;\n    // Start part way down, so the first frame already shows a plait.\n    params.t = (44 - CLIP) / g.step;\n  }\n  if (input.btnPressed && input.btnPressed[0] && params.phase === 0) {\n    params.phase = 1;\n    params.timer = 0;\n  }\n  if (params.phase === 0) {\n    params.t += dt * params.speed * RATE;\n    if (CLIP + params.t * g.step >= TIE_AT) {\n      params.phase = 1;\n      params.timer = 0;\n    }\n  } else if (params.phase === 1) {\n    params.timer += dt;\n    if (params.timer > HANG) {\n      params.phase = 2;\n      params.timer = 0;\n      params.tiedT = params.t;\n      params.t = 0;\n    }\n  } else {\n    params.timer += dt;\n    if (params.timer > LOWER) {\n      params.phase = 0;\n      params.timer = 0;\n    }\n  }\n}\n\n// Lay out each strand's centre line, row by row, for a plait whose point is at\n// step tp, its clip shifted down by off rows; tied (0..1) is how far the\n// ribbon has pulled its end in.\nfunction layout(params, g, tp, off, tied) {\n  const n = g.n;\n  const mid = W / 2;\n  const tmp = params.tmp;\n  const cx = params.cx;\n  const cz = params.cz;\n  const cs = params.cs;\n  const cr = params.cr;\n  const depth = g.radius * 0.9;\n  const yp = CLIP + tp * g.step;\n  // The tails get shorter as the plait uses up the strands.\n  const prog = Math.min(1, (yp - CLIP) / (TIE_AT - CLIP));\n  const tailEnd = yp + (H - 1 - CLIP) * (1 - prog) + (20 - 4 * tied) * prog;\n  const reach = 26 - 16 * tied;\n  for (let k = 0; k \u003c n; k++) {\n    // Where the strand leaves the plait, which way it is going there, and how\n    // deep it lies: it keeps that depth all the way down, so a strand crossing\n    // over stays over to the hand.\n    strandAt(k, tp, n, tmp);\n    const c0 = tmp[0] - (n - 1) / 2;\n    const pinch = 1 - (1 - GATHER) * tied;\n    const x0 = mid + c0 * g.lane * pinch;\n    const s0 = ((1 - tied) * tmp[1] * g.lane) / g.step;\n    const z0 = tmp[2] * depth + k * 0.01;\n    const x1 = (x0 + c0 * 4) * tied + (mid + c0 * g.spread) * (1 - tied);\n    for (let y = 0; y \u003c H; y++) {\n      const i = k * H + y;\n      const yy = y + 0.5 - off;\n      cr[i] = 0;\n      if (yy \u003c 2) continue;\n      let sl = 0;\n      if (yy \u003c CLIP) {\n        // Under the clip the strands come straight down.\n        strandAt(k, 0, n, tmp);\n        cx[i] = mid + (tmp[0] - (n - 1) / 2) * g.lane;\n        cz[i] = -depth;\n        cr[i] = g.radius;\n      } else if (yy \u003c= yp) {\n        strandAt(k, (yy - CLIP) / g.step, n, tmp);\n        // A tied plait is gathered in to the ribbon over its last 14 rows.\n        const gather = 1 - (1 - GATHER) * tied * smooth(yp - 14, yp, yy);\n        cx[i] = mid + (tmp[0] - (n - 1) / 2) * g.lane * gather;\n        cz[i] = tmp[2] * depth;\n        sl = (tmp[1] * g.lane * gather) / g.step;\n        cr[i] = g.radius;\n      } else if (yy \u003c tailEnd) {\n        // Below the point a loose strand leaves the way it was going and bends\n        // down to the hand holding it; a tied plait's tails splay a little.\n        const u = Math.min(1, (yy - yp) / reach);\n        const u2 = u * u;\n        const u3 = u2 * u;\n        cx[i] = (2 * u3 - 3 * u2 + 1) * x0 + (u3 - 2 * u2 + u) * reach * s0 + (3 * u2 - 2 * u3) * x1;\n        sl = u \u003c 1 ? ((6 * u2 - 6 * u) * x0 + (3 * u2 - 4 * u + 1) * reach * s0 + (6 * u - 6 * u2) * x1) / reach : 0;\n        cz[i] = z0;\n        // A strand thins to its tip over the last eight rows.\n        const tip = Math.min(1, (tailEnd - yy) / 8);\n        cr[i] = g.radius * (1 - 0.25 * tied) * (0.45 + 0.55 * Math.sqrt(tip));\n      }\n      cs[i] = sl / (1 + sl * sl);\n    }\n  }\n  // The span of LEDs each strand can touch in each row: an LED within the\n  // radius of a strand finds its nearest point at most half a radius up or down.\n  const lo = params.lo;\n  const hi = params.hi;\n  const rows = Math.ceil(g.radius / 2 + 2);\n  for (let k = 0; k \u003c n; k++)\n    for (let y = 0; y \u003c H; y++) {\n      let a = 1e9;\n      let b = -1e9;\n      const j1 = Math.min(H - 1, y + rows);\n      for (let j = Math.max(0, y - rows); j \u003c= j1; j++) {\n        const i = k * H + j;\n        if (cr[i] === 0) continue;\n        if (cx[i] - cr[i] \u003c a) a = cx[i] - cr[i];\n        if (cx[i] + cr[i] > b) b = cx[i] + cr[i];\n      }\n      lo[k * H + y] = a - 2.5;\n      hi[k * H + y] = b + 2.5;\n    }\n}\n\n// Render the laid-out strands into img and zbuf from row y0 down. For each LED\n// and strand, step from the LED's row\n// along the strand's slope to the nearest point of its centre line, so where\n// one strand dives under another the edge follows the strand and not the row.\nfunction render(params, g, y0) {\n  const n = g.n;\n  const cx = params.cx;\n  const cz = params.cz;\n  const cs = params.cs;\n  const cr = params.cr;\n  const lo = params.lo;\n  const hi = params.hi;\n  const col = params.col;\n  const img = params.img;\n  const zbuf = params.zbuf;\n  const dist = params.dist;\n  const surf = params.surf;\n  const depth = g.radius * 0.9;\n  const hl = Math.sqrt(0.45 * 0.45 + 0.5 * 0.5 + 1.74 * 1.74);\n  for (let y = y0; y \u003c H; y++) {\n    const py = y + 0.5;\n    let xa = 1e9;\n    let xb = -1e9;\n    for (let k = 0; k \u003c n; k++) {\n      if (lo[k * H + y] \u003c xa) xa = lo[k * H + y];\n      if (hi[k * H + y] > xb) xb = hi[k * H + y];\n    }\n    xa = Math.max(0, Math.floor(xa));\n    xb = Math.min(W - 1, Math.ceil(xb));\n    for (let x = xa; x \u003c= xb; x++) {\n      const p = y * W + x;\n      const px = x + 0.5;\n      let best = -1e9;\n      let bk = -1;\n      let bnx = 0;\n      let bny = 0;\n      let bz = 0;\n      let bcov = 0;\n      for (let k = 0; k \u003c n; k++) {\n        const i0 = k * H + y;\n        dist[k] = 1e9;\n        if (px \u003c lo[i0] || px > hi[i0]) continue;\n        let ys = cr[i0] > 0 ? py + (px - cx[i0]) * cs[i0] : py;\n        if (ys \u003c 0.5) ys = 0.5;\n        else if (ys > H - 1.5) ys = H - 1.5;\n        const ya = Math.floor(ys - 0.5);\n        const f = ys - 0.5 - ya;\n        const ia = k * H + ya;\n        const ra = cr[ia];\n        const rb = cr[ia + 1];\n        let xs;\n        let zs;\n        let rs;\n        if (rb === 0) {\n          if (ra === 0) continue;\n          xs = cx[ia];\n          zs = cz[ia];\n          rs = ra;\n          ys = ya + 0.5;\n        } else if (ra === 0) {\n          xs = cx[ia + 1];\n          zs = cz[ia + 1];\n          rs = rb;\n          ys = ya + 1.5;\n        } else {\n          xs = cx[ia] + (cx[ia + 1] - cx[ia]) * f;\n          zs = cz[ia] + (cz[ia + 1] - cz[ia]) * f;\n          rs = ra + (rb - ra) * f;\n        }\n        const dx = px - xs;\n        const dy = py - ys;\n        const d2 = dx * dx + dy * dy;\n        if (d2 > (rs + 2) * (rs + 2)) continue;\n        const d = Math.sqrt(d2);\n        dist[k] = d - rs;\n        if (d >= rs) {\n          surf[k] = zs;\n          if (d \u003c rs + 0.5 && zs > best) {\n            best = zs;\n            bk = k;\n            bnx = dx / d;\n            bny = dy / d;\n            bz = zs / depth;\n            bcov = rs + 0.5 - d;\n          }\n          continue;\n        }\n        surf[k] = zs + Math.sqrt(rs * rs - d * d);\n        if (surf[k] > best) {\n          best = surf[k];\n          bk = k;\n          bnx = dx / rs;\n          bny = dy / rs;\n          bz = zs / depth;\n          bcov = Math.min(1, rs + 0.5 - d);\n        }\n      }\n      if (bk \u003c 0) continue;\n      // A strand lying over this one darkens the LEDs just outside its edge,\n      // so a strand going under reads as tucked in.\n      let shade = 1;\n      for (let k = 0; k \u003c n; k++) {\n        if (k === bk || dist[k] > 2 || dist[k] \u003c -0.5) continue;\n        if (surf[k] > best - 1) shade = Math.min(shade, 0.12 + 0.88 * smooth(0, 2, dist[k]));\n      }\n      const nn = Math.min(1, bnx * bnx + bny * bny);\n      const nz = Math.sqrt(1 - nn);\n      // Light from the upper left and in front.\n      // The square root flattens the lit middle of a strand and keeps its\n      // fall-off for the rim, so it reads as round without a smear of greys.\n      const diff = Math.sqrt(Math.max(0, -0.45 * bnx - 0.5 * bny + 0.74 * nz));\n      let sp = Math.max(0, (-0.45 * bnx - 0.5 * bny + 1.74 * nz) / hl);\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      // Under, a strand is dimmer; over, it is lit full. The floor stays high\n      // enough that an orange strand going under does not turn brown.\n      const lit = (0.56 + 0.44 * (0.5 + 0.5 * bz)) * shade;\n      const v = lit * (0.14 + 0.86 * diff);\n      const spec = sp * 0.5 * lit * 255;\n      const c = bk * 3;\n      const o = p * 3;\n      img[o] = img[o] * (1 - bcov) + Math.min(255, col[c] * v + spec) * bcov;\n      img[o + 1] = img[o + 1] * (1 - bcov) + Math.min(255, col[c + 1] * v + spec) * bcov;\n      img[o + 2] = img[o + 2] * (1 - bcov) + Math.min(255, col[c + 2] * v + spec) * bcov;\n      zbuf[p] = best;\n    }\n  }\n}\n\n// A ribbon tied in a bow round the plait at row yp, grown to size (0..1):\n// a band round the gathered strands, two loops, a knot and two tails cut in a fork.\nfunction ribbon(img, params, yp, band, size) {\n  if (size \u003c= 0) return;\n  const col = params.col;\n  const c = MAXN * 3;\n  const cx = W / 2;\n  const lw = 12 * size;\n  const lh = 6 * size;\n  const ca = Math.cos(0.42);\n  const sa = Math.sin(0.42);\n  for (let y = Math.max(0, Math.floor(yp - 14)); y \u003c Math.min(H, yp + 20); y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - yp;\n      let v = 0;\n      // The band round the plait.\n      if (Math.abs(py) \u003c 1.8 && Math.abs(px) \u003c band * size) v = 0.85 - 0.12 * Math.max(0, py);\n      // The loops, tilted up and out, with a fold darker along the middle.\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const lx = s * px - lw * 0.55;\n        const ly = py + 2.5 * size;\n        const u = (lx * ca + ly * sa) / lw;\n        const w = (-lx * sa + ly * ca) / lh;\n        const e = (u * u) / 0.3 + w * w;\n        if (e \u003c 1) v = Math.max(v, Math.abs(w) \u003c 0.18 && u > -0.2 ? 0.72 : 1 - 0.18 * e);\n      }\n      // The tails, hanging down and out from the knot, forked at the end.\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const along = py / size;\n        const off = s * px - (1.5 + py * 0.42);\n        if (along > 0 && along \u003c 15 && Math.abs(off) \u003c 2.4 && !(along > 12 && Math.abs(off) \u003c (along - 12) * 0.9)) v = Math.max(v, 0.95 - 0.2 * (along / 15));\n      }\n      // The knot.\n      const kr = px * px + (py + 0.3) * (py + 0.3);\n      if (kr \u003c 10 * size * size) v = Math.max(v, 1);\n      else if (kr \u003c 14 * size * size) v = Math.min(v, 0.75);\n      if (v \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      img[o] = col[c] * v;\n      img[o + 1] = col[c + 1] * v;\n      img[o + 2] = col[c + 2] * v;\n    }\n}\n\n// The clip at the top, a rounded silver bar a little wider than the plait,\n// shifted down by off rows, drawn from row y0 down.\nfunction clip(params, half, off, y0) {\n  const img = params.img;\n  for (let j = 1; j \u003c CLIP; j++) {\n    const y = j + Math.round(off);\n    if (y \u003c y0 || y >= H) continue;\n    const u = (j + 0.5 - (CLIP + 1) / 2) / ((CLIP - 1) / 2);\n    const v = 0.35 + 0.65 * Math.sqrt(Math.max(0, 1 - u * u)) + (Math.abs(u + 0.35) \u003c 0.3 ? 0.25 : 0);\n    for (let x = 0; x \u003c W; x++) {\n      const ex = Math.abs(x + 0.5 - W / 2) - (half + 2);\n      if (ex > 1) continue;\n      const a = Math.max(0, Math.min(1, 1 - ex)) * (j === 1 || j === CLIP - 1 ? 0.75 : 1);\n      const o = (y * W + x) * 3;\n      img[o] = img[o] * (1 - a) + Math.min(255, 215 * v) * a;\n      img[o + 1] = img[o + 1] * (1 - a) + Math.min(255, 220 * v) * a;\n      img[o + 2] = img[o + 2] * (1 - a) + Math.min(255, 232 * v) * a;\n    }\n  }\n}\n\n// Copy src into out moved down by off rows, blending neighbouring rows for the\n// fraction. On top, src covers out where it is lit and lets it through where dark.\nfunction slide(out, src, off, top) {\n  const fo = Math.floor(off);\n  const fr = off - fo;\n  for (let y = 0; y \u003c H; y++) {\n    const ya = y - fo;\n    const yb = ya - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      let cov = 0;\n      if (ya >= 0 && ya \u003c H) {\n        const a = (ya * W + x) * 3;\n        r += src[a] * (1 - fr);\n        g += src[a + 1] * (1 - fr);\n        b += src[a + 2] * (1 - fr);\n        if (src[a] + src[a + 1] + src[a + 2] > 0) cov += 1 - fr;\n      }\n      if (yb >= 0 && yb \u003c H) {\n        const a = (yb * W + x) * 3;\n        r += src[a] * fr;\n        g += src[a + 1] * fr;\n        b += src[a + 2] * fr;\n        if (src[a] + src[a + 1] + src[a + 2] > 0) cov += fr;\n      }\n      if (!top) cov = 1;\n      out[o] = r + out[o] * (1 - cov);\n      out[o + 1] = g + out[o + 1] * (1 - cov);\n      out[o + 2] = b + out[o + 2] * (1 - cov);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const g = geometry(params);\n  const col = params.col;\n  const hue = params.hue + 0.47;\n  const fan = (0.62 * (g.n - 1)) / g.n;\n  for (let k = 0; k \u003c g.n; k++) hsvInto(col, k * 3, hue + (k * 0.62) / g.n, 0.78, 1);\n  // The ribbon takes the colour in the middle of the gap the strands leave on the wheel.\n  hsvInto(col, MAXN * 3, hue + fan + (1 - fan) / 2 - 0.04, 0.68, 1);\n  const half = ((g.n - 1) * g.lane) / 2 + g.radius;\n  // Half the width of the gathered end, where the ribbon's band goes round.\n  const band = ((g.n - 1) * g.lane * GATHER) / 2 + g.radius * 0.9;\n  const img = params.img;\n  const zbuf = params.zbuf;\n  const phase = params.phase;\n  // While the knobs stay put, the plait above its point does not change, so\n  // the rows that were finished last frame are kept and only the rest drawn.\n  const same = params.cn === g.n && params.ct === params.tension && params.ch === params.hue && params.cp === phase;\n  let y0 = same ? params.valid : 0;\n  params.cn = g.n;\n  params.ct = params.tension;\n  params.ch = params.hue;\n  params.cp = phase;\n  let out = img;\n  if (phase === 2) {\n    // The tied plait is lowered out of sight on its clip and the next clip of\n    // loose strands comes down after it. Neither changes shape on the way, so\n    // each is drawn once and slid down a fraction of a row at a time.\n    if (!same) {\n      img.fill(0);\n      zbuf.fill(-1e9);\n      layout(params, g, params.tiedT, 0, 1);\n      render(params, g, 0);\n      clip(params, half, 0, 0);\n      ribbon(img, params, CLIP + params.tiedT * g.step, band, 1);\n      params.old.set(img);\n      img.fill(0);\n      zbuf.fill(-1e9);\n      layout(params, g, 0, 0, 0);\n      render(params, g, 0);\n      clip(params, half, 0, 0);\n      params.next.set(img);\n    }\n    const off = smooth(0, 1, params.timer / LOWER) * (H + 4);\n    out = params.out;\n    slide(out, params.next, off - H - 4, false);\n    slide(out, params.old, off, true);\n    params.valid = 0;\n  } else {\n    img.fill(0, y0 * W * 3);\n    zbuf.fill(-1e9, y0 * W);\n    const yp = CLIP + params.t * g.step;\n    if (y0 \u003c H) {\n      layout(params, g, params.t, 0, phase === 1 ? smooth(0, 0.35, params.timer) : 0);\n      render(params, g, y0);\n      clip(params, half, 0, y0);\n    }\n    // A hanging plait is still; a growing one is settled down to a radius above its point.\n    params.valid = phase === 1 ? (params.timer > 0.4 ? H : Math.floor(yp - 20 - g.radius)) : Math.max(0, Math.floor(yp - g.radius - 4));\n    if (phase === 1) {\n      out = params.out;\n      out.set(img);\n      ribbon(out, params, yp, band, smooth(0, 0.35, params.timer));\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      if (out[o] + out[o + 1] + out[o + 2] \u003c 1) continue;\n      display.setPixel(x, y, out[o], out[o + 1], out[o + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Strands=3..7, Tension=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the strands' colours together, starting from teal, blue and magenta."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the hands work: at 2 the plait grows by 1.2 rows of crossings a second, at 3 by nearly two, at 0.2 by one every eight seconds."},{"name":"Strands","min":3,"max":7,"about":"3 is the plait everyone knows; 4 to 7 make a flat braid, each outside strand weaving over and under all the way to the far edge."},{"name":"Tension","min":0,"max":1,"about":"At 0 the plait is loose and fat, 54 LEDs across with three strands crossing every 17 rows; at 1 it is pulled tight to 34 LEDs, crossing every 6 or 7."}],"start":[0,2,3,0.06],"measures":{"motion":1.0033,"detail":0.0467,"edges":0.1711,"complexity":1.4043,"coverage":0.7414,"colour":0.4415,"drift":0.2976},"knobResponse":[0.2929,0.2273,0.2358,0.2751]},{"slug":"player-piano","title":"Player Piano","family":"music","round":15,"note":"자동 피아노의 구멍 뚫린 종이 두루마리가 내려와요. 구멍이 트래커 바를 지날 때마다 발치의 건반이 눌려 빛나요. 곡은 패턴이 그 자리에서 지어서, 화음은 가로줄로, 펼친 화음은 사선으로 읽혀요.","idea":"A pianola composing as it plays: a perforated roll comes off its spool and runs down over the tracker bar, and every slot that crosses the bar holds its key down and lights it.","buttons":"K1 tap punches a glissando into the roll as it leaves the spool, and the music after it is in a new key, a fourth higher.","code":"// ===== Patternflow pattern =====\n// Title:   Player Piano\n// Family:  music\n// Idea:    A pianola composing as it plays: a perforated roll comes off its spool and runs down over the tracker bar, and every slot that crosses the bar holds its key down and lights it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the pianola and its punched music rolls (Edwin Votey, 1895)\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=0.5..3.5, Hands=2..5, Pedal=0..1\n//\n// Knob 1: Hue. Turns the colours of the parts together, starting from a gold tune over a blue bass.\n// Knob 2: Tempo. Beats a second: 2 is 120 to the minute and the paper runs 16 LEDs a second; 0.5 is 30 to the minute, 3.5 is 210.\n// Knob 3: Hands. 2 is what one pianist plays: a tune with a second note under its long ones, and a left hand of long bass slots and chords in rows. 3 adds broken chords running up the roll as diagonals, 4 is a duet with the tune and the bass in octaves, and 5 is more than any pianist could play, adding a run of sixteenths across the whole keyboard, up one bar and down the next.\n// Knob 4: Pedal. At 0 each slot stops a little short of its note, a quarter note 2.4 rows short; turned up, the sustain pedal holds the notes on towards the bar line, and at 1 every slot runs to it, so each bar's tune and broken chords stand as staircases and the keys ring on after they rise.\n// Buttons: K1 tap punches a glissando into the roll as it leaves the spool, and the music after it is in a new key, a fourth higher.\n\nconst W = 64;\nconst H = 128;\n// One LED column per semitone: column 0 is E1, middle C is column 32, column 63 is G6.\nconst LOW = 28;\n// Rows of paper per sixteenth note: a beat is 8 rows, a bar of 4/4 is 32.\nconst R = 2;\n// The music roll on its spool, rows 0..6; the paper runs from row 7 down to the bar.\nconst SPOOL = 7;\n// The tracker bar, rows 105..107. A slot sounds while it covers the holes in row 106.\nconst BAR_Y = 105;\nconst READ = 106.5;\n// The keys, rows 109..127; black keys stop at row 119.\nconst KEY_Y = 109;\nconst BLACK_END = 120;\nconst BLACK = [0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0];\n// How much of a slot's light the paper on either side of it catches.\nconst GLOW = 0.35;\n\nconst MAJOR = [0, 2, 4, 5, 7, 9, 11];\nconst MINOR = [0, 2, 3, 5, 7, 8, 10];\n// Four chords to a progression, as scale degrees counted from 0.\nconst PROG_MAJOR = [\n  [0, 4, 5, 3],\n  [0, 5, 3, 4],\n  [1, 4, 0, 0],\n  [0, 3, 4, 0],\n  [5, 3, 0, 4],\n  [0, 2, 3, 4],\n  [0, 3, 1, 4],\n  [3, 4, 2, 5],\n];\nconst PROG_MINOR = [\n  [0, 5, 2, 6],\n  [0, 3, 4, 0],\n  [0, 6, 5, 4],\n  [0, 3, 6, 4],\n];\n// A bar of tune is one of these rhythms, in sixteenths.\nconst MOTIFS = [\n  [4, 4, 4, 4],\n  [6, 2, 4, 4],\n  [4, 2, 2, 4, 4],\n  [8, 4, 4],\n  [2, 2, 4, 2, 2, 4],\n  [3, 3, 2, 4, 4],\n  [6, 2, 6, 2],\n  [2, 2, 2, 2, 8],\n  [4, 4, 2, 2, 2, 2],\n];\nconst ENDINGS = [[4, 4, 8], [8, 8], [12, 4], [16], [6, 2, 8]];\n\n// Parts. A slot carries a mask of the Hands settings that play it: bit 0 is 2 hands, bit 3 is 5.\nconst MELODY = 0;\nconst BASS = 1;\nconst CHORD = 2;\nconst ARP = 3;\nconst GLISS = 4;\nconst ALL = 15;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\nfunction pcOf(p) {\n  return ((p % 12) + 12) % 12;\n}\n\nfunction scaleOf(params) {\n  return params.minor ? MINOR : MAJOR;\n}\n\n// The pitch classes of the triad on a scale degree; a minor key's V takes the raised leading note.\nfunction chordPcs(params, d) {\n  const sc = scaleOf(params);\n  const out = [];\n  for (let i = 0; i \u003c 3; i++) {\n    const deg = d + 2 * i;\n    let pc = sc[deg % 7];\n    if (params.minor && d === 4 && i === 1) pc += 1;\n    out.push((params.tonic + pc) % 12);\n  }\n  return out;\n}\n\nfunction scalePcs(params, chord) {\n  const sc = scaleOf(params);\n  const out = [];\n  for (let i = 0; i \u003c 7; i++) out.push((params.tonic + sc[i]) % 12);\n  // Over a minor key's V the tune uses the raised seventh too.\n  for (let i = 0; i \u003c chord.length; i++) if (out.indexOf(chord[i]) \u003c 0) out[6] = chord[i];\n  return out;\n}\n\nfunction nearestIn(pcs, target, lo, hi) {\n  let best = lo;\n  let bd = 1e9;\n  for (let p = lo; p \u003c= hi; p++) {\n    if (pcs.indexOf(pcOf(p)) \u003c 0) continue;\n    const d = Math.abs(p - target);\n    if (d \u003c bd) {\n      bd = d;\n      best = p;\n    }\n  }\n  return best;\n}\n\nfunction stepIn(pcs, p, n) {\n  const dir = n \u003c 0 ? -1 : 1;\n  for (let k = 0; k \u003c Math.abs(n); k++) {\n    p += dir;\n    while (pcs.indexOf(pcOf(p)) \u003c 0) p += dir;\n  }\n  return p;\n}\n\nfunction nextAbove(pcs, p) {\n  p++;\n  while (pcs.indexOf(pcOf(p)) \u003c 0) p++;\n  return p;\n}\n\nfunction add(params, p, t0, d, hold, part, mask) {\n  if (p \u003c LOW || p >= LOW + W) return;\n  params.slots.push({ p: p, t0: t0, d: d, hold: hold, part: part, mask: mask });\n}\n\nfunction newPhrase(params) {\n  params.prog = pick(params.minor ? PROG_MINOR : PROG_MAJOR);\n  params.rhythmA = pick(MOTIFS);\n  params.rhythmB = pick(ENDINGS);\n  // The motif's shape in scale steps: mostly one way, so a bar reads as a run.\n  const dir = Math.random() \u003c 0.5 ? -1 : 1;\n  params.stepsA = params.rhythmA.map(() => {\n    const r = Math.random();\n    if (r \u003c 0.1) return 0;\n    const n = Math.random() \u003c 0.75 ? 1 : 2;\n    return r \u003c 0.75 ? dir * n : -dir * n;\n  });\n  params.chordStyle = Math.floor(Math.random() * 4);\n  params.arpStyle = Math.floor(Math.random() * 3);\n  params.bassStyle = Math.floor(Math.random() * 2);\n  params.phraseBar = 0;\n}\n\n// One bar of music, written onto the roll from tick t.\nfunction composeBar(params, t) {\n  if (params.phraseBar >= 8 || !params.prog) {\n    if (params.prog && Math.random() \u003c 0.3) {\n      // Now and then the next phrase goes to the relative key.\n      if (params.minor) params.tonic = (params.tonic + 3) % 12;\n      else params.tonic = (params.tonic + 9) % 12;\n      params.minor = !params.minor;\n    }\n    newPhrase(params);\n  }\n  const i = params.phraseBar;\n  const degree = params.prog[i % 4];\n  const pcs = chordPcs(params, degree);\n  const scale = scalePcs(params, pcs);\n  const end = t + 16;\n\n  // The bass: the root in long slots, low in the keyboard, moving as little as it can.\n  const root = nearestIn([pcs[0]], params.bass, 33, 47);\n  params.bass = root;\n  if (params.bassStyle === 0) {\n    add(params, root, t, 16, end, BASS, ALL);\n    add(params, root - 12, t, 16, end, BASS, 12);\n  } else {\n    const fifth = nearestIn([pcs[2]], root + 5, root - 7, root + 9);\n    add(params, root, t, 8, t + 8, BASS, ALL);\n    add(params, fifth, t + 8, 8, end, BASS, ALL);\n    add(params, root - 12, t, 8, t + 8, BASS, 12);\n    add(params, fifth - 12, t + 8, 8, end, BASS, 12);\n  }\n\n  // The left hand's chords: close triads that move to the nearest inversion.\n  let best = null;\n  let bd = 1e9;\n  for (let b = 50; b \u003c= 62; b++) {\n    if (pcs.indexOf(pcOf(b)) \u003c 0) continue;\n    const v1 = nextAbove(pcs, b);\n    const v = [b, v1, nextAbove(pcs, v1)];\n    const prev = params.voicing;\n    const dist = Math.abs(v[0] - prev[0]) + Math.abs(v[1] - prev[1]) + Math.abs(v[2] - prev[2]);\n    if (dist \u003c bd) {\n      bd = dist;\n      best = v;\n    }\n  }\n  params.voicing = best;\n  const hits =\n    params.chordStyle === 0 ? [[0, 16]] : params.chordStyle === 1 ? [[0, 4], [4, 4], [8, 4], [12, 4]] : params.chordStyle === 2 ? [[4, 4], [12, 4]] : [[0, 6], [6, 10]];\n  for (let h = 0; h \u003c hits.length; h++) {\n    const at = t + hits[h][0];\n    for (let k = 0; k \u003c 3; k++) add(params, best[k], at, hits[h][1], end, CHORD, ALL);\n    add(params, best[0] + 12, at, hits[h][1], end, CHORD, 12);\n  }\n\n  // Broken chords in eighths, climbing from the root across two octaves and more.\n  const tones = [nearestIn([pcs[0]], 43, 38, 50)];\n  for (let k = 1; k \u003c 8; k++) tones.push(nextAbove(pcs, tones[k - 1]));\n  const order = params.arpStyle === 0 ? [0, 1, 2, 3, 4, 5, 6, 7] : params.arpStyle === 1 ? [0, 1, 2, 3, 4, 3, 2, 1] : [7, 6, 5, 4, 3, 2, 1, 0];\n  for (let k = 0; k \u003c 8; k++) add(params, tones[order[k]], t + 2 * k, 2, end, ARP, 14);\n  // Five hands: sixteen chord tones in sixteenths, the whole keyboard in a bar,\n  // up on one bar and down on the next.\n  const run = [nearestIn([pcs[0]], 30, 28, 39)];\n  for (let k = 1; k \u003c 16; k++) run.push(nextAbove(pcs, run[k - 1]));\n  const down = params.barCount % 2 === 1;\n  for (let k = 0; k \u003c 16; k++) add(params, run[down ? 15 - k : k], t + k, 2, end, ARP, 8);\n\n  // The tune: the motif on the first three bars of each four, set on the chord,\n  // and a cadence on the fourth.\n  const cadence = i % 4 === 3;\n  const rhythm = cadence ? params.rhythmB : params.rhythmA;\n  // Over a phrase of eight bars the tune climbs an arch of about an octave and comes down.\n  const arch = Math.sin((Math.PI * (i + 0.5)) / 8);\n  const target = 64 + 18 * arch + 4 * Math.sin(params.barCount * 1.7);\n  let p = nearestIn(pcs, target, 62, 86);\n  let at = t;\n  const notes = [];\n  for (let k = 0; k \u003c rhythm.length; k++) {\n    if (k > 0) {\n      if (cadence) {\n        // The cadence settles on a chord tone, a step or two away.\n        p = nearestIn(pcs, stepIn(scale, p, -1), p - 4, p + 2);\n      } else {\n        let q = stepIn(scale, p, params.stepsA[k] || 0);\n        if (q > 86 || q \u003c 62) q = stepIn(scale, p, -(params.stepsA[k] || 0));\n        p = q;\n      }\n    }\n    notes.push([p, at, rhythm[k]]);\n    at += rhythm[k];\n  }\n  for (let k = 0; k \u003c notes.length; k++) {\n    const n = notes[k];\n    add(params, n[0], n[1], n[2], end, MELODY, ALL);\n    add(params, n[0] - 12, n[1], n[2], end, MELODY, 12);\n    // The right hand takes a chord tone under the tune's long notes on the strong beats.\n    if (n[2] >= 4 && (n[1] - t) % 8 === 0) add(params, nearestIn(pcs, n[0] - 6, n[0] - 9, n[0] - 3), n[1], n[2], end, MELODY, ALL);\n  }\n  params.mel = p;\n  params.phraseBar++;\n  params.barCount++;\n}\n\n// A glissando up the scale over two beats, then the new key's dominant held\n// until the bar line, where the music starts again a fourth higher.\nfunction glissando(params, from) {\n  const slots = params.slots;\n  for (let i = slots.length - 1; i >= 0; i--) {\n    const s = slots[i];\n    if (s.t0 >= from) slots.splice(i, 1);\n    else {\n      if (s.t0 + s.d > from) s.d = from - s.t0;\n      if (s.hold > from) s.hold = from;\n    }\n  }\n  params.tonic = (params.tonic + 5) % 12;\n  const scale = [];\n  for (let i = 0; i \u003c 7; i++) scale.push((params.tonic + scaleOf(params)[i]) % 12);\n  const notes = [];\n  for (let p = nearestIn(scale, 34, 30, 40); p \u003c= 88; p = nextAbove(scale, p)) notes.push(p);\n  const span = 8;\n  for (let k = 0; k \u003c notes.length; k++) {\n    const t0 = from + (span * k) / notes.length;\n    add(params, notes[k], t0, 0.9, t0 + 0.9 + 3, GLISS, ALL);\n  }\n  const bar = Math.ceil((from + span + 4) / 16) * 16;\n  const v = chordPcs(params, 4);\n  const top = notes[notes.length - 1];\n  const t1 = from + span;\n  add(params, nearestIn([v[0]], 40, 33, 46), t1, bar - t1, bar, BASS, ALL);\n  for (let k = 0; k \u003c 3; k++) add(params, nearestIn([v[k]], 56 + 4 * k, 50, 70), t1, bar - t1, bar, CHORD, ALL);\n  add(params, nearestIn(v, top - 3, 70, 86), t1, bar - t1, bar, MELODY, ALL);\n  params.composed = bar;\n  params.prog = null;\n}\n\nexport function setup(params) {\n  params.slots = [];\n  params.s = 0;\n  params.composed = 0;\n  params.tonic = 0;\n  params.minor = false;\n  params.prog = null;\n  params.phraseBar = 0;\n  params.barCount = 0;\n  params.mel = 74;\n  params.bass = 40;\n  params.voicing = [55, 60, 64];\n  // How lit each key is, and which part last held it down.\n  params.keyLevel = new Float32Array(W);\n  params.keyPart = new Int8Array(W);\n  params.open = new Int8Array(W);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(5 * 6 + 3);\n  params.hue = 0;\n  params.tempo = 2;\n  params.hands = 2;\n  params.pedal = 0.06;\n}\n\nfunction endOf(s, pedal) {\n  // Without the pedal a slot stops short of its note's length: a quarter note\n  // is cut 2.4 rows short, a whole note 3.\n  const short = s.t0 + s.d - Math.min(1.5, 0.3 * s.d);\n  const held = Math.max(short, s.hold - 0.5);\n  return short + (held - short) * pedal;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.tempo = Math.max(0.1, k[1]);\n  params.hands = Math.max(2, Math.min(5, Math.round(k[2])));\n  params.pedal = Math.max(0, Math.min(1, k[3]));\n  // Four sixteenths to a beat.\n  params.s += dt * params.tempo * 4;\n  const s = params.s;\n  const top = s + (READ - SPOOL) / R;\n  if (input.btnPressed && input.btnPressed[0]) glissando(params, Math.ceil(top / 4) * 4);\n  while (params.composed \u003c top + 8) {\n    composeBar(params, params.composed);\n    params.composed += 16;\n  }\n  // Paper that has gone under the tracker bar is wound away.\n  const slots = params.slots;\n  for (let i = slots.length - 1; i >= 0; i--) if (slots[i].hold \u003c s - 4 && slots[i].t0 + slots[i].d \u003c s - 4) slots.splice(i, 1);\n\n  // Which keys the roll holds down now.\n  const bit = 1 \u003c\u003c (params.hands - 2);\n  const open = params.open;\n  open.fill(-1);\n  for (let i = 0; i \u003c slots.length; i++) {\n    const sl = slots[i];\n    if (!(sl.mask & bit)) continue;\n    if (sl.t0 > s) continue;\n    if (endOf(sl, params.pedal) \u003c= s) continue;\n    const x = sl.p - LOW;\n    if (open[x] \u003c 0 || sl.part \u003c open[x]) open[x] = sl.part;\n  }\n  // A key rings on after it rises, longer with the pedal down.\n  const fade = Math.exp(-dt / (0.12 + 0.9 * params.pedal));\n  for (let x = 0; x \u003c W; x++) {\n    if (open[x] >= 0) {\n      params.keyLevel[x] = 1;\n      params.keyPart[x] = open[x];\n    } else params.keyLevel[x] *= fade;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const s = params.s;\n  const col = params.col;\n  const hue = params.hue;\n  // Each part's colour, pale for the light through the paper and full for a\n  // key it holds down: tune gold, bass blue, chords pink, broken chords green,\n  // and a glissando nearly white.\n  const PART_HUE = [0.12, 0.6, 0.85, 0.42, 0.0];\n  for (let i = 0; i \u003c 5; i++) {\n    hsvInto(col, i * 6, hue + PART_HUE[i], i === GLISS ? 0.1 : 0.55, 1);\n    hsvInto(col, i * 6 + 3, hue + PART_HUE[i], i === GLISS ? 0.15 : 0.9, 1);\n  }\n  // The paper, dim and cool, lit from behind. Its tint swings between teal and\n  // violet with the hue and never reaches the oranges, which read as brown this dim.\n  hsvInto(col, 30, 0.64 + 0.12 * Math.sin(2 * Math.PI * hue), 0.3, 0.16);\n  const pr = col[30];\n  const pg = col[31];\n  const pb = col[32];\n  buf.fill(0);\n  for (let y = 0; y \u003c BAR_Y; y++) {\n    let f = 1;\n    if (y \u003c SPOOL) {\n      // The wound roll: a cylinder, brightest along its middle.\n      const u = (y + 0.5 - SPOOL / 2) / (SPOOL / 2);\n      f = 3 * (1 - 0.7 * u * u);\n    } else {\n      // Printed bar lines every 32 rows.\n      const tick = s + (READ - (y + 0.5)) / R;\n      const ph = tick / 16 - Math.floor(tick / 16);\n      const d = Math.min(ph, 1 - ph) * 16 * R;\n      if (d \u003c 1) f += 0.8 * (1 - d);\n      // The spool's shadow on the paper just below it.\n      if (y === SPOOL) f *= 0.55;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      buf[o] = pr * f;\n      buf[o + 1] = pg * f;\n      buf[o + 2] = pb * f;\n    }\n  }\n  // The slots, light coming through them. The paper beside a slot catches a\n  // little of its light first, so the slots glow instead of standing as wires.\n  const bit = 1 \u003c\u003c (params.hands - 2);\n  const slots = params.slots;\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let i = 0; i \u003c slots.length; i++) {\n      const sl = slots[i];\n      if (!(sl.mask & bit)) continue;\n      const x = sl.p - LOW;\n      const yb = READ - (sl.t0 - s) * R;\n      const yt = READ - (endOf(sl, params.pedal) - s) * R;\n      const y0 = Math.max(SPOOL, Math.floor(yt));\n      const y1 = Math.min(BAR_Y - 1, Math.ceil(yb) - 1);\n      const c = sl.part * 6;\n      for (let y = y0; y \u003c= y1; y++) {\n        const cov = Math.min(y + 1, yb) - Math.max(y, yt);\n        if (cov \u003c= 0) continue;\n        if (pass === 0) {\n          const g = cov * GLOW;\n          for (let n = -1; n \u003c= 1; n += 2) {\n            const xn = x + n;\n            if (xn \u003c 0 || xn >= W) continue;\n            const o = (y * W + xn) * 3;\n            buf[o] += col[c + 3] * g;\n            buf[o + 1] += col[c + 4] * g;\n            buf[o + 2] += col[c + 5] * g;\n          }\n          continue;\n        }\n        const o = (y * W + x) * 3;\n        buf[o] = Math.max(buf[o], buf[o] + (col[c] - buf[o]) * cov);\n        buf[o + 1] = Math.max(buf[o + 1], buf[o + 1] + (col[c + 1] - buf[o + 1]) * cov);\n        buf[o + 2] = Math.max(buf[o + 2], buf[o + 2] + (col[c + 2] - buf[o + 2]) * cov);\n      }\n    }\n  // The music still wound on the spool shows on its face as dark perforations,\n  // foreshortened over the curve, travelling down as the spool turns.\n  const top = s + (READ - SPOOL) / R;\n  const rad = SPOOL / 2;\n  for (let y = 0; y \u003c SPOOL; y++) {\n    const a0 = rad * (Math.PI / 2 - Math.asin(Math.max(-1, Math.min(1, (y + 1 - rad) / rad))));\n    const a1 = rad * (Math.PI / 2 - Math.asin(Math.max(-1, Math.min(1, (y - rad) / rad))));\n    const lo = top + a0 / R;\n    const hi = top + a1 / R;\n    for (let i = 0; i \u003c slots.length; i++) {\n      const sl = slots[i];\n      if (!(sl.mask & bit) || sl.t0 >= hi) continue;\n      const e = endOf(sl, params.pedal);\n      if (e \u003c= lo) continue;\n      const cov = (Math.min(hi, e) - Math.max(lo, sl.t0)) / (hi - lo);\n      const o = (y * W + sl.p - LOW) * 3;\n      const k = 1 - 0.75 * cov;\n      buf[o] *= k;\n      buf[o + 1] *= k;\n      buf[o + 2] *= k;\n    }\n    // Brass flanges hold the roll at both ends.\n    const u = (y + 0.5 - rad) / rad;\n    const fl = 0.55 + 0.45 * (1 - u * u);\n    for (let x = 0; x \u003c W; x += W - 1) {\n      const o = (y * W + x) * 3;\n      buf[o] = 210 * fl;\n      buf[o + 1] = 170 * fl;\n      buf[o + 2] = 80 * fl;\n    }\n  }\n  // The tracker bar: brass with a row of holes.\n  const kp = params.keyPart;\n  for (let x = 0; x \u003c W; x++) {\n    const lv = params.keyLevel[x];\n    const c = kp[x] * 6 + 3;\n    for (let y = BAR_Y; y \u003c BAR_Y + 3; y++) {\n      const o = (y * W + x) * 3;\n      if (y === BAR_Y + 1) {\n        buf[o] = 14 + (col[c] - 14) * lv;\n        buf[o + 1] = 12 + (col[c + 1] - 12) * lv;\n        buf[o + 2] = 10 + (col[c + 2] - 10) * lv;\n      } else {\n        const f = y === BAR_Y ? 1 : 0.6;\n        buf[o] = 210 * f;\n        buf[o + 1] = 170 * f;\n        buf[o + 2] = 80 * f;\n      }\n    }\n    // The keys.\n    const pc = (LOW + x) % 12;\n    const black = BLACK[pc] === 1;\n    for (let y = KEY_Y; y \u003c H; y++) {\n      const o = (y * W + x) * 3;\n      let r;\n      let g;\n      let b;\n      if (black && y \u003c BLACK_END) {\n        r = 8;\n        g = 8;\n        b = 12;\n        if (y === KEY_Y) r = g = b = 30;\n      } else {\n        const front = y === H - 1 ? 0.75 : 1;\n        r = 150 * front;\n        g = 146 * front;\n        b = 134 * front;\n        if (black) {\n          r *= 0.8;\n          g *= 0.8;\n          b *= 0.8;\n        }\n      }\n      // A key that is down lights in its part's colour; a black key's column\n      // below its end belongs to the white keys either side.\n      if (lv > 0.01 && (!black || y \u003c BLACK_END)) {\n        r += (col[c] - r) * lv;\n        g += (col[c + 1] - g) * lv;\n        b += (col[c + 2] - b) * lv;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","layer":{"id":"layer-player-piano","type":"code","name":"player-piano","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Player Piano\n// Family:  music\n// Idea:    A pianola composing as it plays: a perforated roll comes off its spool and runs down over the tracker bar, and every slot that crosses the bar holds its key down and lights it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the pianola and its punched music rolls (Edwin Votey, 1895)\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=0.5..3.5, Hands=2..5, Pedal=0..1\n//\n// Knob 1: Hue. Turns the colours of the parts together, starting from a gold tune over a blue bass.\n// Knob 2: Tempo. Beats a second: 2 is 120 to the minute and the paper runs 16 LEDs a second; 0.5 is 30 to the minute, 3.5 is 210.\n// Knob 3: Hands. 2 is what one pianist plays: a tune with a second note under its long ones, and a left hand of long bass slots and chords in rows. 3 adds broken chords running up the roll as diagonals, 4 is a duet with the tune and the bass in octaves, and 5 is more than any pianist could play, adding a run of sixteenths across the whole keyboard, up one bar and down the next.\n// Knob 4: Pedal. At 0 each slot stops a little short of its note, a quarter note 2.4 rows short; turned up, the sustain pedal holds the notes on towards the bar line, and at 1 every slot runs to it, so each bar's tune and broken chords stand as staircases and the keys ring on after they rise.\n// Buttons: K1 tap punches a glissando into the roll as it leaves the spool, and the music after it is in a new key, a fourth higher.\n\nconst W = 64;\nconst H = 128;\n// One LED column per semitone: column 0 is E1, middle C is column 32, column 63 is G6.\nconst LOW = 28;\n// Rows of paper per sixteenth note: a beat is 8 rows, a bar of 4/4 is 32.\nconst R = 2;\n// The music roll on its spool, rows 0..6; the paper runs from row 7 down to the bar.\nconst SPOOL = 7;\n// The tracker bar, rows 105..107. A slot sounds while it covers the holes in row 106.\nconst BAR_Y = 105;\nconst READ = 106.5;\n// The keys, rows 109..127; black keys stop at row 119.\nconst KEY_Y = 109;\nconst BLACK_END = 120;\nconst BLACK = [0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0];\n// How much of a slot's light the paper on either side of it catches.\nconst GLOW = 0.35;\n\nconst MAJOR = [0, 2, 4, 5, 7, 9, 11];\nconst MINOR = [0, 2, 3, 5, 7, 8, 10];\n// Four chords to a progression, as scale degrees counted from 0.\nconst PROG_MAJOR = [\n  [0, 4, 5, 3],\n  [0, 5, 3, 4],\n  [1, 4, 0, 0],\n  [0, 3, 4, 0],\n  [5, 3, 0, 4],\n  [0, 2, 3, 4],\n  [0, 3, 1, 4],\n  [3, 4, 2, 5],\n];\nconst PROG_MINOR = [\n  [0, 5, 2, 6],\n  [0, 3, 4, 0],\n  [0, 6, 5, 4],\n  [0, 3, 6, 4],\n];\n// A bar of tune is one of these rhythms, in sixteenths.\nconst MOTIFS = [\n  [4, 4, 4, 4],\n  [6, 2, 4, 4],\n  [4, 2, 2, 4, 4],\n  [8, 4, 4],\n  [2, 2, 4, 2, 2, 4],\n  [3, 3, 2, 4, 4],\n  [6, 2, 6, 2],\n  [2, 2, 2, 2, 8],\n  [4, 4, 2, 2, 2, 2],\n];\nconst ENDINGS = [[4, 4, 8], [8, 8], [12, 4], [16], [6, 2, 8]];\n\n// Parts. A slot carries a mask of the Hands settings that play it: bit 0 is 2 hands, bit 3 is 5.\nconst MELODY = 0;\nconst BASS = 1;\nconst CHORD = 2;\nconst ARP = 3;\nconst GLISS = 4;\nconst ALL = 15;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\nfunction pcOf(p) {\n  return ((p % 12) + 12) % 12;\n}\n\nfunction scaleOf(params) {\n  return params.minor ? MINOR : MAJOR;\n}\n\n// The pitch classes of the triad on a scale degree; a minor key's V takes the raised leading note.\nfunction chordPcs(params, d) {\n  const sc = scaleOf(params);\n  const out = [];\n  for (let i = 0; i \u003c 3; i++) {\n    const deg = d + 2 * i;\n    let pc = sc[deg % 7];\n    if (params.minor && d === 4 && i === 1) pc += 1;\n    out.push((params.tonic + pc) % 12);\n  }\n  return out;\n}\n\nfunction scalePcs(params, chord) {\n  const sc = scaleOf(params);\n  const out = [];\n  for (let i = 0; i \u003c 7; i++) out.push((params.tonic + sc[i]) % 12);\n  // Over a minor key's V the tune uses the raised seventh too.\n  for (let i = 0; i \u003c chord.length; i++) if (out.indexOf(chord[i]) \u003c 0) out[6] = chord[i];\n  return out;\n}\n\nfunction nearestIn(pcs, target, lo, hi) {\n  let best = lo;\n  let bd = 1e9;\n  for (let p = lo; p \u003c= hi; p++) {\n    if (pcs.indexOf(pcOf(p)) \u003c 0) continue;\n    const d = Math.abs(p - target);\n    if (d \u003c bd) {\n      bd = d;\n      best = p;\n    }\n  }\n  return best;\n}\n\nfunction stepIn(pcs, p, n) {\n  const dir = n \u003c 0 ? -1 : 1;\n  for (let k = 0; k \u003c Math.abs(n); k++) {\n    p += dir;\n    while (pcs.indexOf(pcOf(p)) \u003c 0) p += dir;\n  }\n  return p;\n}\n\nfunction nextAbove(pcs, p) {\n  p++;\n  while (pcs.indexOf(pcOf(p)) \u003c 0) p++;\n  return p;\n}\n\nfunction add(params, p, t0, d, hold, part, mask) {\n  if (p \u003c LOW || p >= LOW + W) return;\n  params.slots.push({ p: p, t0: t0, d: d, hold: hold, part: part, mask: mask });\n}\n\nfunction newPhrase(params) {\n  params.prog = pick(params.minor ? PROG_MINOR : PROG_MAJOR);\n  params.rhythmA = pick(MOTIFS);\n  params.rhythmB = pick(ENDINGS);\n  // The motif's shape in scale steps: mostly one way, so a bar reads as a run.\n  const dir = Math.random() \u003c 0.5 ? -1 : 1;\n  params.stepsA = params.rhythmA.map(() => {\n    const r = Math.random();\n    if (r \u003c 0.1) return 0;\n    const n = Math.random() \u003c 0.75 ? 1 : 2;\n    return r \u003c 0.75 ? dir * n : -dir * n;\n  });\n  params.chordStyle = Math.floor(Math.random() * 4);\n  params.arpStyle = Math.floor(Math.random() * 3);\n  params.bassStyle = Math.floor(Math.random() * 2);\n  params.phraseBar = 0;\n}\n\n// One bar of music, written onto the roll from tick t.\nfunction composeBar(params, t) {\n  if (params.phraseBar >= 8 || !params.prog) {\n    if (params.prog && Math.random() \u003c 0.3) {\n      // Now and then the next phrase goes to the relative key.\n      if (params.minor) params.tonic = (params.tonic + 3) % 12;\n      else params.tonic = (params.tonic + 9) % 12;\n      params.minor = !params.minor;\n    }\n    newPhrase(params);\n  }\n  const i = params.phraseBar;\n  const degree = params.prog[i % 4];\n  const pcs = chordPcs(params, degree);\n  const scale = scalePcs(params, pcs);\n  const end = t + 16;\n\n  // The bass: the root in long slots, low in the keyboard, moving as little as it can.\n  const root = nearestIn([pcs[0]], params.bass, 33, 47);\n  params.bass = root;\n  if (params.bassStyle === 0) {\n    add(params, root, t, 16, end, BASS, ALL);\n    add(params, root - 12, t, 16, end, BASS, 12);\n  } else {\n    const fifth = nearestIn([pcs[2]], root + 5, root - 7, root + 9);\n    add(params, root, t, 8, t + 8, BASS, ALL);\n    add(params, fifth, t + 8, 8, end, BASS, ALL);\n    add(params, root - 12, t, 8, t + 8, BASS, 12);\n    add(params, fifth - 12, t + 8, 8, end, BASS, 12);\n  }\n\n  // The left hand's chords: close triads that move to the nearest inversion.\n  let best = null;\n  let bd = 1e9;\n  for (let b = 50; b \u003c= 62; b++) {\n    if (pcs.indexOf(pcOf(b)) \u003c 0) continue;\n    const v1 = nextAbove(pcs, b);\n    const v = [b, v1, nextAbove(pcs, v1)];\n    const prev = params.voicing;\n    const dist = Math.abs(v[0] - prev[0]) + Math.abs(v[1] - prev[1]) + Math.abs(v[2] - prev[2]);\n    if (dist \u003c bd) {\n      bd = dist;\n      best = v;\n    }\n  }\n  params.voicing = best;\n  const hits =\n    params.chordStyle === 0 ? [[0, 16]] : params.chordStyle === 1 ? [[0, 4], [4, 4], [8, 4], [12, 4]] : params.chordStyle === 2 ? [[4, 4], [12, 4]] : [[0, 6], [6, 10]];\n  for (let h = 0; h \u003c hits.length; h++) {\n    const at = t + hits[h][0];\n    for (let k = 0; k \u003c 3; k++) add(params, best[k], at, hits[h][1], end, CHORD, ALL);\n    add(params, best[0] + 12, at, hits[h][1], end, CHORD, 12);\n  }\n\n  // Broken chords in eighths, climbing from the root across two octaves and more.\n  const tones = [nearestIn([pcs[0]], 43, 38, 50)];\n  for (let k = 1; k \u003c 8; k++) tones.push(nextAbove(pcs, tones[k - 1]));\n  const order = params.arpStyle === 0 ? [0, 1, 2, 3, 4, 5, 6, 7] : params.arpStyle === 1 ? [0, 1, 2, 3, 4, 3, 2, 1] : [7, 6, 5, 4, 3, 2, 1, 0];\n  for (let k = 0; k \u003c 8; k++) add(params, tones[order[k]], t + 2 * k, 2, end, ARP, 14);\n  // Five hands: sixteen chord tones in sixteenths, the whole keyboard in a bar,\n  // up on one bar and down on the next.\n  const run = [nearestIn([pcs[0]], 30, 28, 39)];\n  for (let k = 1; k \u003c 16; k++) run.push(nextAbove(pcs, run[k - 1]));\n  const down = params.barCount % 2 === 1;\n  for (let k = 0; k \u003c 16; k++) add(params, run[down ? 15 - k : k], t + k, 2, end, ARP, 8);\n\n  // The tune: the motif on the first three bars of each four, set on the chord,\n  // and a cadence on the fourth.\n  const cadence = i % 4 === 3;\n  const rhythm = cadence ? params.rhythmB : params.rhythmA;\n  // Over a phrase of eight bars the tune climbs an arch of about an octave and comes down.\n  const arch = Math.sin((Math.PI * (i + 0.5)) / 8);\n  const target = 64 + 18 * arch + 4 * Math.sin(params.barCount * 1.7);\n  let p = nearestIn(pcs, target, 62, 86);\n  let at = t;\n  const notes = [];\n  for (let k = 0; k \u003c rhythm.length; k++) {\n    if (k > 0) {\n      if (cadence) {\n        // The cadence settles on a chord tone, a step or two away.\n        p = nearestIn(pcs, stepIn(scale, p, -1), p - 4, p + 2);\n      } else {\n        let q = stepIn(scale, p, params.stepsA[k] || 0);\n        if (q > 86 || q \u003c 62) q = stepIn(scale, p, -(params.stepsA[k] || 0));\n        p = q;\n      }\n    }\n    notes.push([p, at, rhythm[k]]);\n    at += rhythm[k];\n  }\n  for (let k = 0; k \u003c notes.length; k++) {\n    const n = notes[k];\n    add(params, n[0], n[1], n[2], end, MELODY, ALL);\n    add(params, n[0] - 12, n[1], n[2], end, MELODY, 12);\n    // The right hand takes a chord tone under the tune's long notes on the strong beats.\n    if (n[2] >= 4 && (n[1] - t) % 8 === 0) add(params, nearestIn(pcs, n[0] - 6, n[0] - 9, n[0] - 3), n[1], n[2], end, MELODY, ALL);\n  }\n  params.mel = p;\n  params.phraseBar++;\n  params.barCount++;\n}\n\n// A glissando up the scale over two beats, then the new key's dominant held\n// until the bar line, where the music starts again a fourth higher.\nfunction glissando(params, from) {\n  const slots = params.slots;\n  for (let i = slots.length - 1; i >= 0; i--) {\n    const s = slots[i];\n    if (s.t0 >= from) slots.splice(i, 1);\n    else {\n      if (s.t0 + s.d > from) s.d = from - s.t0;\n      if (s.hold > from) s.hold = from;\n    }\n  }\n  params.tonic = (params.tonic + 5) % 12;\n  const scale = [];\n  for (let i = 0; i \u003c 7; i++) scale.push((params.tonic + scaleOf(params)[i]) % 12);\n  const notes = [];\n  for (let p = nearestIn(scale, 34, 30, 40); p \u003c= 88; p = nextAbove(scale, p)) notes.push(p);\n  const span = 8;\n  for (let k = 0; k \u003c notes.length; k++) {\n    const t0 = from + (span * k) / notes.length;\n    add(params, notes[k], t0, 0.9, t0 + 0.9 + 3, GLISS, ALL);\n  }\n  const bar = Math.ceil((from + span + 4) / 16) * 16;\n  const v = chordPcs(params, 4);\n  const top = notes[notes.length - 1];\n  const t1 = from + span;\n  add(params, nearestIn([v[0]], 40, 33, 46), t1, bar - t1, bar, BASS, ALL);\n  for (let k = 0; k \u003c 3; k++) add(params, nearestIn([v[k]], 56 + 4 * k, 50, 70), t1, bar - t1, bar, CHORD, ALL);\n  add(params, nearestIn(v, top - 3, 70, 86), t1, bar - t1, bar, MELODY, ALL);\n  params.composed = bar;\n  params.prog = null;\n}\n\nexport function setup(params) {\n  params.slots = [];\n  params.s = 0;\n  params.composed = 0;\n  params.tonic = 0;\n  params.minor = false;\n  params.prog = null;\n  params.phraseBar = 0;\n  params.barCount = 0;\n  params.mel = 74;\n  params.bass = 40;\n  params.voicing = [55, 60, 64];\n  // How lit each key is, and which part last held it down.\n  params.keyLevel = new Float32Array(W);\n  params.keyPart = new Int8Array(W);\n  params.open = new Int8Array(W);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(5 * 6 + 3);\n  params.hue = 0;\n  params.tempo = 2;\n  params.hands = 2;\n  params.pedal = 0.06;\n}\n\nfunction endOf(s, pedal) {\n  // Without the pedal a slot stops short of its note's length: a quarter note\n  // is cut 2.4 rows short, a whole note 3.\n  const short = s.t0 + s.d - Math.min(1.5, 0.3 * s.d);\n  const held = Math.max(short, s.hold - 0.5);\n  return short + (held - short) * pedal;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.tempo = Math.max(0.1, k[1]);\n  params.hands = Math.max(2, Math.min(5, Math.round(k[2])));\n  params.pedal = Math.max(0, Math.min(1, k[3]));\n  // Four sixteenths to a beat.\n  params.s += dt * params.tempo * 4;\n  const s = params.s;\n  const top = s + (READ - SPOOL) / R;\n  if (input.btnPressed && input.btnPressed[0]) glissando(params, Math.ceil(top / 4) * 4);\n  while (params.composed \u003c top + 8) {\n    composeBar(params, params.composed);\n    params.composed += 16;\n  }\n  // Paper that has gone under the tracker bar is wound away.\n  const slots = params.slots;\n  for (let i = slots.length - 1; i >= 0; i--) if (slots[i].hold \u003c s - 4 && slots[i].t0 + slots[i].d \u003c s - 4) slots.splice(i, 1);\n\n  // Which keys the roll holds down now.\n  const bit = 1 \u003c\u003c (params.hands - 2);\n  const open = params.open;\n  open.fill(-1);\n  for (let i = 0; i \u003c slots.length; i++) {\n    const sl = slots[i];\n    if (!(sl.mask & bit)) continue;\n    if (sl.t0 > s) continue;\n    if (endOf(sl, params.pedal) \u003c= s) continue;\n    const x = sl.p - LOW;\n    if (open[x] \u003c 0 || sl.part \u003c open[x]) open[x] = sl.part;\n  }\n  // A key rings on after it rises, longer with the pedal down.\n  const fade = Math.exp(-dt / (0.12 + 0.9 * params.pedal));\n  for (let x = 0; x \u003c W; x++) {\n    if (open[x] >= 0) {\n      params.keyLevel[x] = 1;\n      params.keyPart[x] = open[x];\n    } else params.keyLevel[x] *= fade;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const s = params.s;\n  const col = params.col;\n  const hue = params.hue;\n  // Each part's colour, pale for the light through the paper and full for a\n  // key it holds down: tune gold, bass blue, chords pink, broken chords green,\n  // and a glissando nearly white.\n  const PART_HUE = [0.12, 0.6, 0.85, 0.42, 0.0];\n  for (let i = 0; i \u003c 5; i++) {\n    hsvInto(col, i * 6, hue + PART_HUE[i], i === GLISS ? 0.1 : 0.55, 1);\n    hsvInto(col, i * 6 + 3, hue + PART_HUE[i], i === GLISS ? 0.15 : 0.9, 1);\n  }\n  // The paper, dim and cool, lit from behind. Its tint swings between teal and\n  // violet with the hue and never reaches the oranges, which read as brown this dim.\n  hsvInto(col, 30, 0.64 + 0.12 * Math.sin(2 * Math.PI * hue), 0.3, 0.16);\n  const pr = col[30];\n  const pg = col[31];\n  const pb = col[32];\n  buf.fill(0);\n  for (let y = 0; y \u003c BAR_Y; y++) {\n    let f = 1;\n    if (y \u003c SPOOL) {\n      // The wound roll: a cylinder, brightest along its middle.\n      const u = (y + 0.5 - SPOOL / 2) / (SPOOL / 2);\n      f = 3 * (1 - 0.7 * u * u);\n    } else {\n      // Printed bar lines every 32 rows.\n      const tick = s + (READ - (y + 0.5)) / R;\n      const ph = tick / 16 - Math.floor(tick / 16);\n      const d = Math.min(ph, 1 - ph) * 16 * R;\n      if (d \u003c 1) f += 0.8 * (1 - d);\n      // The spool's shadow on the paper just below it.\n      if (y === SPOOL) f *= 0.55;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      buf[o] = pr * f;\n      buf[o + 1] = pg * f;\n      buf[o + 2] = pb * f;\n    }\n  }\n  // The slots, light coming through them. The paper beside a slot catches a\n  // little of its light first, so the slots glow instead of standing as wires.\n  const bit = 1 \u003c\u003c (params.hands - 2);\n  const slots = params.slots;\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let i = 0; i \u003c slots.length; i++) {\n      const sl = slots[i];\n      if (!(sl.mask & bit)) continue;\n      const x = sl.p - LOW;\n      const yb = READ - (sl.t0 - s) * R;\n      const yt = READ - (endOf(sl, params.pedal) - s) * R;\n      const y0 = Math.max(SPOOL, Math.floor(yt));\n      const y1 = Math.min(BAR_Y - 1, Math.ceil(yb) - 1);\n      const c = sl.part * 6;\n      for (let y = y0; y \u003c= y1; y++) {\n        const cov = Math.min(y + 1, yb) - Math.max(y, yt);\n        if (cov \u003c= 0) continue;\n        if (pass === 0) {\n          const g = cov * GLOW;\n          for (let n = -1; n \u003c= 1; n += 2) {\n            const xn = x + n;\n            if (xn \u003c 0 || xn >= W) continue;\n            const o = (y * W + xn) * 3;\n            buf[o] += col[c + 3] * g;\n            buf[o + 1] += col[c + 4] * g;\n            buf[o + 2] += col[c + 5] * g;\n          }\n          continue;\n        }\n        const o = (y * W + x) * 3;\n        buf[o] = Math.max(buf[o], buf[o] + (col[c] - buf[o]) * cov);\n        buf[o + 1] = Math.max(buf[o + 1], buf[o + 1] + (col[c + 1] - buf[o + 1]) * cov);\n        buf[o + 2] = Math.max(buf[o + 2], buf[o + 2] + (col[c + 2] - buf[o + 2]) * cov);\n      }\n    }\n  // The music still wound on the spool shows on its face as dark perforations,\n  // foreshortened over the curve, travelling down as the spool turns.\n  const top = s + (READ - SPOOL) / R;\n  const rad = SPOOL / 2;\n  for (let y = 0; y \u003c SPOOL; y++) {\n    const a0 = rad * (Math.PI / 2 - Math.asin(Math.max(-1, Math.min(1, (y + 1 - rad) / rad))));\n    const a1 = rad * (Math.PI / 2 - Math.asin(Math.max(-1, Math.min(1, (y - rad) / rad))));\n    const lo = top + a0 / R;\n    const hi = top + a1 / R;\n    for (let i = 0; i \u003c slots.length; i++) {\n      const sl = slots[i];\n      if (!(sl.mask & bit) || sl.t0 >= hi) continue;\n      const e = endOf(sl, params.pedal);\n      if (e \u003c= lo) continue;\n      const cov = (Math.min(hi, e) - Math.max(lo, sl.t0)) / (hi - lo);\n      const o = (y * W + sl.p - LOW) * 3;\n      const k = 1 - 0.75 * cov;\n      buf[o] *= k;\n      buf[o + 1] *= k;\n      buf[o + 2] *= k;\n    }\n    // Brass flanges hold the roll at both ends.\n    const u = (y + 0.5 - rad) / rad;\n    const fl = 0.55 + 0.45 * (1 - u * u);\n    for (let x = 0; x \u003c W; x += W - 1) {\n      const o = (y * W + x) * 3;\n      buf[o] = 210 * fl;\n      buf[o + 1] = 170 * fl;\n      buf[o + 2] = 80 * fl;\n    }\n  }\n  // The tracker bar: brass with a row of holes.\n  const kp = params.keyPart;\n  for (let x = 0; x \u003c W; x++) {\n    const lv = params.keyLevel[x];\n    const c = kp[x] * 6 + 3;\n    for (let y = BAR_Y; y \u003c BAR_Y + 3; y++) {\n      const o = (y * W + x) * 3;\n      if (y === BAR_Y + 1) {\n        buf[o] = 14 + (col[c] - 14) * lv;\n        buf[o + 1] = 12 + (col[c + 1] - 12) * lv;\n        buf[o + 2] = 10 + (col[c + 2] - 10) * lv;\n      } else {\n        const f = y === BAR_Y ? 1 : 0.6;\n        buf[o] = 210 * f;\n        buf[o + 1] = 170 * f;\n        buf[o + 2] = 80 * f;\n      }\n    }\n    // The keys.\n    const pc = (LOW + x) % 12;\n    const black = BLACK[pc] === 1;\n    for (let y = KEY_Y; y \u003c H; y++) {\n      const o = (y * W + x) * 3;\n      let r;\n      let g;\n      let b;\n      if (black && y \u003c BLACK_END) {\n        r = 8;\n        g = 8;\n        b = 12;\n        if (y === KEY_Y) r = g = b = 30;\n      } else {\n        const front = y === H - 1 ? 0.75 : 1;\n        r = 150 * front;\n        g = 146 * front;\n        b = 134 * front;\n        if (black) {\n          r *= 0.8;\n          g *= 0.8;\n          b *= 0.8;\n        }\n      }\n      // A key that is down lights in its part's colour; a black key's column\n      // below its end belongs to the white keys either side.\n      if (lv > 0.01 && (!black || y \u003c BLACK_END)) {\n        r += (col[c] - r) * lv;\n        g += (col[c + 1] - g) * lv;\n        b += (col[c + 2] - b) * lv;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Tempo=0.5..3.5, Hands=2..5, Pedal=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours of the parts together, starting from a gold tune over a blue bass."},{"name":"Tempo","min":0.5,"max":3.5,"about":"Beats a second: 2 is 120 to the minute and the paper runs 16 LEDs a second; 0.5 is 30 to the minute, 3.5 is 210."},{"name":"Hands","min":2,"max":5,"about":"2 is what one pianist plays: a tune with a second note under its long ones, and a left hand of long bass slots and chords in rows. 3 adds broken chords running up the roll as diagonals, 4 is a duet with the tune and the bass in octaves, and 5 is more than any pianist could play, adding a run of sixteenths across the whole keyboard, up one bar and down the next."},{"name":"Pedal","min":0,"max":1,"about":"At 0 each slot stops a little short of its note, a quarter note 2.4 rows short; turned up, the sustain pedal holds the notes on towards the bar line, and at 1 every slot runs to it, so each bar's tune and broken chords stand as staircases and the keys ring on after they rise."}],"start":[0,2,2,0.06],"measures":{"motion":0.3229,"detail":0.0822,"edges":0.6181,"complexity":0.1256,"coverage":0.9461,"colour":0.1765,"drift":0.0751},"knobResponse":[0.0626,0.0796,0.0519,0.0503]},{"slug":"pop-up-book","title":"Pop-up Book","family":"paper","round":21,"note":"탁자에 펼친 팝업북에서 성과 숲, 등대, 도시가 종이 카드 여러 겹으로 일어서고, 그동안 달이 홈을 따라 가고 사슴이 고개를 숙여요. 페이지가 넘어가면 장면이 가운데 접힌 선으로 납작하게 눕고, 넘어오는 페이지에서 다음 장면이 일어나요.","idea":"A pop-up book lies open under a reading lamp: each spread's cut-card scene stands up out of the gutter in layers and its paper parts move, until the page turns over, folds it flat and raises the next.","buttons":"K1 tap turns the page now.","code":"// ===== Patternflow pattern =====\n// Title:   Pop-up Book\n// Family:  paper\n// Idea:    A pop-up book lies open under a reading lamp: each spread's cut-card scene stands up out of the gutter in layers and its paper parts move, until the page turns over, folds it flat and raises the next.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after layered pop-up books, tunnel books and the pull-tab movable books of the nineteenth century\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Spread=0..3, Speed=0.2..3, Layers=4..6, Lamp=0..1\n//\n// Knob 1: Spread. Which spread the book is open at: a castle at dusk at 0, a pine forest with a stag at 1, a lighthouse at night at 2, a city at 3. Turned, the book leafs over to it and reads on from there.\n// Knob 2: Speed. How fast the pages and the paper parts go: at 2 a spread stands seven seconds and a page turns in under three.\n// Knob 3: Layers. How many cards stand: sky, main piece, front strip and a flying piece at 4, hills, a swell with a sailing boat or a far skyline at 5, and at 6 a tunnel-book frame across the front (a rose arch, pine boughs, a sea cave, a theatre curtain).\n// Knob 4: Lamp. Where the light comes from: a warm lamp low on the left at 0, overhead at 0.5, cool daylight from the right at 1. The folds swap their lit and shaded faces and the shadows swing.\n// Buttons: K1 tap turns the page now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The gutter's row, a page's depth (the tallest a card may stand), and how far\n// a unit of depth climbs the panel for a viewer a little above the book.\nconst [G, D, K] = [102, 74, 0.2];\n// Cards 56 wide from column 4, pages 58 from column 3, the table's back edge.\nconst [CW, X0, PW, P0, TB] = [56, 4, 58, 3, 80];\n// A texel on a face turned to the left or to the right.\nconst [LF, RF] = [64, 128];\nconst [STAND, TURN, OPEN] = [0, 1, 2];\n// The order cards rise in: the main piece first, the sky last but for the frame.\nconst ORDER = [4, 0, 1, 3, 2, 5];\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\n\n// Card and paper colours. Lit windows, the beam and a lit gateway glow on their own.\nconst PAL = [[0, 0, 0]], EM = new Uint8Array(64);\nconst [stone, ink, dark, roof, yel, peach, pink, mauve, violet, hill, white, cream, green, greend, wood, warm, blush, skyw, skyl, skyb, mtn, mtnd, snow, fir, firl, firb, trunk, deer, fly, fern, grey, navy, night, sea, sead, teal, red, glow, rock, black, dusk, mag, indigo, sky2, brick, cteal, purple, glass, win, street, paper, text, cloth] = \"dccdb0 ad987c 2a2034 cc3a44 fccc46 fab270 ec7884 ac5492 5c3a8e 40346c f8f6ee faeec4 5aa850 287040 9c6234 f8b860 fadece fadeb0 b0d8f0 76b0e6 7084b8 56689c eef4fa 1c643e 3c8c50 2c6c6c 70462a be7640 dc2828 82c450 9696a0 162058 283a80 245cb2 183c8c 2896a8 d63034 fff0ac 5c5c70 1e1e26 f4885a b0487c 3e347c 48548c a4483c 3a7c7c 70508a 5a6e96 ffd66e 484854 ece0c6 483e3c 8c2430\"\n  .split(\" \")\n  .map((h) => PAL.push([0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16))) - 1);\nEM[win] = EM[glow] = EM[warm] = 1;\n\n// Drawing on a card: x 0..55, y up from the fold at its foot.\nlet T, TH;\nconst put = (x, y, c) => ((x = round(x)), (y = round(y)), x >= 0 && x \u003c CW && y >= 0 && y \u003c TH && (T[y * CW + x] = c));\nconst rect = (x0, y0, x1, y1, c) => {\n  for (let y = round(y0); y \u003c= y1; y++) for (let x = round(x0); x \u003c= x1; x++) put(x, y, c);\n};\nconst rects = (list) => list.forEach((r) => rect(...r));\n// A body narrowing from half width a to b over rows y0..y1, its left half on a\n// face turned left and its right half turned right: towers, tiers, roofs.\nconst cone = (cx, y0, y1, a, b, c) => {\n  for (let y = y0; y \u003c= y1; y++) for (let w = a + ((b - a) * (y - y0)) / max(1, y1 - y0), x = ceil(cx - w - 0.01); x \u003c= cx + w + 0.01; x++) put(x, y, c | (x \u003c cx - 0.3 ? LF : x > cx + 0.3 ? RF : 0));\n};\nconst disc = (cx, cy, r, c) => {\n  for (let y = floor(cy - r); y \u003c= cy + r; y++) for (let x = floor(cx - r); x \u003c= cx + r; x++) if ((x - cx) ** 2 + (y - cy) ** 2 \u003c= r * r) put(x, y, c);\n};\nconst line = (x0, y0, x1, y1, c) => {\n  for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0), 1); i \u003c= n; i++) put(x0 + ((x1 - x0) * i) / n, y0 + ((y1 - y0) * i) / n, c);\n};\n// Ground up to f(x), each slope on the face it turns to.\nconst ridge = (f, c) => {\n  for (let x = 0; x \u003c CW; x++) for (let y = 0, h = f(x), s = f(x + 0.5) - f(x - 0.5); y \u003c= h; y++) put(x, y, c | (s > 0.15 ? LF : s \u003c -0.15 ? RF : 0));\n};\n// The sky card at the back: bands of paper under a scalloped top, with stars.\nconst sky = (bands, stars) => {\n  for (let x = 0; x \u003c CW; x++)\n    for (let y = 0, top = 54 + round(7 * abs(sin(x * 0.2 + 0.6))), i; y \u003c= top; y++) {\n      for (i = 0; i + 1 \u003c bands.length && y + 2 * sin(x * 0.3 + y * 0.07) >= bands[i + 1]; ) i += 2;\n      put(x, y, bands[i]);\n    }\n  for (let n = 0; n \u003c stars; n++) put(2 + rnd() * 52, 36 + rnd() * 16, white);\n};\n// The moon rides a slot cut in the sky card.\nconst slot = () => {\n  for (let s = 0.12; s \u003c 0.88; s += 0.01) put(28 - 21 * cos(PI * s), 30 + 21 * sin(PI * s), mauve);\n};\nconst moon = (P, s = PI * (0.18 + 0.32 * (1 + sin(P.t * 0.3)))) => disc(28 - 21 * cos(s), 30 + 21 * sin(s), 4.3, cream);\nconst cloud = (cx, cy, n, c) => {\n  for (let k = 0; k \u003c n; k++) disc(cx + (k - (n - 1) / 2) * 3.2, cy + (k % 2) * 1.3, 2.4, c);\n};\nconst windows = (x0, x1, y0, y1, dx, dy, lit) => {\n  for (let y = y0; y \u003c= y1; y += dy) for (let x = x0; x \u003c= x1; x += dx) put(x, y, rnd() \u003c lit ? win : black);\n};\nconst pine = (cx, h, w, c) => {\n  rect(cx - 1, 0, cx + 1, 5, trunk);\n  for (let i = 0, s = (h - 6) / 5, y0, ww; i \u003c 5; i++) (y0 = round(4 + i * s)), cone(cx, y0, min(h - 1, round(y0 + s * 1.7)), (ww = w * (1 - i * 0.16)), 0.4, c), cone(cx, y0, y0, ww, ww, firl);\n};\nconst birds = (P, list, c) =>\n  list.forEach(([x0, y, v], i) => {\n    for (let n = 0, w = sin(P.t * 9 + i * 2) > 0 ? 1 : -1, x = x0 + ((P.t * v) % 60); n \u003c 2; n++, x -= 60) for (const [a, b] of [[0, 0], [-1, w > 0], [1, w > 0], [-2, w], [2, w]]) put(x + a, y + b, c);\n  });\nconst waves = (o, top, amp, k, deep, lt) => {\n  for (let x = 0; x \u003c CW; x++)\n    for (let y = 0, u = (x + o) * k, h = top + amp * abs(sin(u)), s = cos(u) * Math.sign(sin(u)); y \u003c= h; y++) put(x, y, (y > h - 1.2 ? white : y > h - 3 ? lt : deep) | (s > 0.2 ? LF : s \u003c -0.2 ? RF : 0));\n};\n// A tunnel-book frame with an arch cut out: c the card, e the rim, f flecks.\n// Pleated, it hangs in folds like a curtain.\nconst frame = (c, e, f, pleat) => {\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const dx = abs(x - 27.5), n = pleat ? 0 : 1.4 * sin(y * 0.9 + x * 2.1) + sin(y * 0.4 - x), w = (y \u003c 40 ? 21 : 21 * sqrt(max(0, 1 - ((y - 40) / 22) ** 2))) + n;\n      if (dx >= w && y \u003c TH - (pleat ? 0 : 3 * abs(sin(x * 0.35)))) put(x, y, (dx \u003c w + 1.3 ? e : f && rnd() \u003c 0.1 ? f : c) | (pleat ? (x % 4 \u003c 2 ? LF : RF) : n > 0.4 ? LF : n \u003c -0.4 ? RF : 0));\n    }\n};\n\n// A castle at dusk: a keep between two towers, turrets on the curtain wall,\n// pennants that flap and a drawbridge that comes down when the tab is pulled.\nconst castle = () => {\n  rect(9, 0, 46, 15, stone);\n  cone(27, 0, 33, 5.5, 5.5, stone);\n  for (let x = 9; x \u003c= 46; x += 4) rect(x, 16, x + 1, 17, stone), x \u003c 32 && x > 20 && rect(x + 1, 34, x + 2, 35, stone);\n  for (const cx of [10, 45]) cone(cx, 0, 25, 3, 3, stone), cone(cx, 26, 34, 4, 0, roof), rect(cx, 13, cx, 15, dark);\n  for (const cx of [18, 36]) cone(cx, 0, 41, 4, 4, stone), cone(cx, 42, 54, 5, 0, roof), rect(cx, 21, cx, 24, dark), rect(cx, 31, cx, 34, dark);\n  // Printed stone courses.\n  for (let p = 0, x, y; p \u003c T.length; p++) if ((T[p] & 63) === stone && ((y = floor(p / CW)) % 5 === 4 || (y % 5 === 1 && ((x = p % CW) + floor(y / 5) * 3) % 7 === 0))) T[p] = (T[p] & 192) | ink;\n  rects([[24, 19, 25, 22, win], [29, 19, 30, 22, win], [25, 0, 29, 7, warm], [26, 8, 28, 8, warm], [26, 0, 26, 7, dark], [28, 0, 28, 7, dark], [26, 11, 28, 16, roof]]);\n  disc(27, 28, 2.3, win);\n  put(27, 28, dark);\n  put(27, 14, yel);\n};\nconst castleDyn = (P) => {\n  for (const cx of [18, 36]) {\n    rect(cx, 55, cx, 61, dark);\n    for (let i = 1, y; i \u003c= 5; i++) put(cx + i, (y = 60 + round(sin(P.t * 7 - i * 0.9) * i * 0.25)), i % 2 ? yel : roof), i \u003c 4 && put(cx + i, y - 1, yel);\n  }\n  const hb = round(8 * cos(P.pull * 1.45));\n  rect(25, 0, 29, hb, wood);\n  for (let y = 1; y \u003c hb; y += 2) rect(25, y, 29, y, trunk);\n  line(24, 9, 25, hb, dark);\n  line(30, 9, 29, hb, dark);\n};\n// A pine forest in the morning; the stag in the clearing grazes when the tab is pulled.\nconst mountains = () => {\n  sky([skyw, 10, skyl, 30, skyb], 0);\n  for (const [px, ph, s, c] of [[31, 50, 1.25, mtn], [10, 39, 1.4, mtnd], [48, 41, 1.3, mtnd]])\n    for (let x = 0; x \u003c CW; x++) for (let y = 0, top = ph - abs(x - px) * s; y \u003c= top; y++) put(x, y, (y > ph - 8 + 2 * sin(x * 1.7) ? snow : c) | (x \u003c px ? LF : x > px ? RF : 0));\n};\nconst sun = (P) => {\n  disc(44, 55, 3.3, yel);\n  for (let k = 0, a; k \u003c 8; k++) (a = P.t * 0.5 + (k * PI) / 4), line(44 + 4.6 * cos(a), 55 + 4.6 * sin(a), 44 + 6.5 * cos(a), 55 + 6.5 * sin(a), yel);\n};\nconst stag = (P) => {\n  const a = mix(2.05, 3.95, P.pull), hx = 24 + 7 * cos(a), hy = 10 + 7 * sin(a), b = a - 1.15;\n  for (const lx of [24, 26, 31, 33]) rect(lx, 0, lx, 5, trunk);\n  rects([[23, 6, 34, 10, deer], [24, 11, 33, 11, deer], [33, 8, 35, 11, white], [hx - 2, hy - 1, hx, hy, deer]]);\n  line(24, 10, hx, hy, deer);\n  line(25, 10, hx + 1, hy, deer);\n  put(hx - 3, hy - 1, dark);\n  put(hx + 1, hy + 1, deer);\n  for (const [l, o] of [[5, 0], [3.5, 0.6], [3, -0.5]]) line(hx, hy + 1, hx + l * cos(b + o), hy + 1 + l * sin(b + o), trunk);\n};\nconst ferns = () => {\n  ridge((x) => 1 + 0.8 * sin(x * 0.9) + (x % 7 === 3 ? 2 : 0), green);\n  for (const [x, h] of [[9, 3], [13, 2], [21, 4]]) rect(x, 0, x, h - 1, white), rect(x - 1, h, x + 1, h + 1, fly), put(x, h + 1, white);\n  for (const cx of [3, 17, 31, 53]) for (let k = -2; k \u003c= 2; k++) line(cx, 0, cx + k * 1.4, 5 - abs(k) * 0.8, fern);\n};\n\n// A lighthouse at night over paper waves; its beam is a card on a wheel,\n// long when it swings left, short when right, a flash when it faces us.\nconst lighthouse = () => {\n  ridge((x) => (x \u003c 17 ? -1 : 12 + 3 * sin(x * 0.5) + 2 * sin(x * 1.3) - max(0, 26 - x) * 1.2), rock);\n  cone(40, 12, 50, 5, 3, white);\n  for (let p = 12 * CW; p \u003c 51 * CW; p++) if ((T[p] & 63) === white && floor(p / CW - 12) % 10 \u003c 5) T[p] = (T[p] & 192) | red;\n  rects([[40, 12, 40, 15, black], [40, 30, 40, 30, black], [40, 41, 40, 41, black], [34, 51, 46, 51, black], [37, 52, 43, 56, win], [39, 52, 39, 56, black], [41, 52, 41, 56, black], [40, 62, 40, 63, black], [25, 10, 31, 15, white], [26, 13, 26, 13, win], [30, 13, 30, 13, win], [28, 10, 28, 12, black]]);\n  for (let x = 34; x \u003c= 46; x += 2) put(x, 52, black);\n  cone(40, 57, 61, 4, 0.5, red);\n  cone(28, 16, 19, 4.5, 0.5, red);\n};\nconst beam = (P) => {\n  const a = P.t * 1.3, s = sin(a), d = s > 0 ? -1 : 1;\n  for (let i = 1; i \u003c= (s > 0 ? 38 : 14) * abs(s); i++) for (let w = 0.5 + i * 0.09, y = round(54 - w); y \u003c= 54 + w; y++) put(40 + d * (3 + i), y, glow);\n  if (cos(a) > 0.6) disc(40, 54, 1 + 6 * (cos(a) - 0.6), glow);\n};\n// A sailing boat rocks on the swell.\nconst boats = (P) => {\n  const b = round(sin(P.t * 1.6));\n  rects([[11, 4 + b, 17, 5 + b, wood], [12, 3 + b, 16, 3 + b, wood], [14, 6 + b, 14, 17 + b, dark], [15, 17 + b, 15, 17 + b, red]]);\n  for (let y = 7; y \u003c= 16; y++) rect(15, y + b, 15 + (16 - y) * 0.6, y + b, white), y > 7 && rect(13 - (16 - y) * 0.35, y + b, 13, y + b, white);\n};\n\n// A city at nightfall: a clock tower whose hands turn on their wheel, a tram\n// in the street and a balloon over the roofs.\nconst city = () => {\n  cone(10, 0, 47, 5, 5, glass), cone(10, 48, 51, 3.5, 3.5, glass), cone(10, 52, 55, 2, 2, glass), cone(38, 0, 45, 4, 4, stone), cone(38, 46, 55, 5, 0, roof), cone(49, 44, 46, 3, 0.5, wood);\n  rects([[10, 56, 10, 63, grey], [16, 0, 23, 31, brick], [15, 32, 24, 32, brick], [24, 0, 32, 23, cteal], [25, 0, 31, 2, white], [38, 56, 38, 58, black], [43, 0, 54, 35, purple], [47, 39, 51, 43, wood], [47, 36, 47, 38, black], [51, 36, 51, 38, black]]);\n  windows(6, 14, 3, 45, 2, 3, 0.45), windows(17, 22, 3, 29, 2, 3, 0.4), windows(25, 31, 3, 21, 3, 3, 0.5), windows(36, 40, 4, 32, 4, 4, 0.5), windows(44, 53, 3, 33, 3, 3, 0.4);\n  disc(38, 39, 3.2, white);\n};\nconst clock = (P) => {\n  for (const [a, l] of [[-P.t * 1.2, 2.6], [1 - P.t * 0.1, 1.7]]) line(38, 39, 38 + l * cos(a), 39 + l * sin(a), black);\n};\nconst tram = (P) => {\n  const x = round(2 + 38 * (0.5 - 0.5 * cos(P.t * 0.45)));\n  rects([[x, 1, x + 13, 6, red], [x, 4, x + 13, 4, paper], [x + 1, 7, x + 12, 7, red], [x + 2, 0, x + 2, 0, black], [x + 11, 0, x + 11, 0, black]]);\n  for (let i = 0; i \u003c 6; i++) put(x + 1 + i * 2, 5, win);\n  line(x + 6, 8, x + 8, 11, black);\n};\nconst balloon = (P) => {\n  const x = 15 + 4 * sin(P.t * 0.2), y = 45 + 1.5 * sin(P.t * 0.9);\n  for (let yy = -4; yy \u003c= 4; yy++) for (let w = sqrt(20 - yy * yy) * (yy \u003c 0 ? 1 + yy * 0.1 : 1), xx = round(x - w); xx \u003c= x + w; xx++) put(xx, y + yy, (floor(xx - x + 9) % 3 ? red : yel) | (xx \u003c x - 1 ? LF : xx > x + 1 ? RF : 0));\n  rect(x - 1, y - 8, x + 1, y - 7, wood);\n  line(x - 2, y - 4, x - 1, y - 6, dark);\n  line(x + 2, y - 4, x + 1, y - 6, dark);\n};\nconst skyline = () => {\n  for (let x = 0, w, h; x \u003c CW; x += w) rect(x, 0, x + (w = 3 + floor(rnd() * 4)) - 1, (h = 12 + floor(rnd() * 20)), sky2), windows(x + 1, x + w - 2, 2, h - 1, 2, 3, 0.25);\n};\n\n// Each spread: the far page's print, the initial's colour, the card backs, and\n// the cards as [depth behind the gutter, height, folds forward, art, moving\n// part]. The first four stand at Layers 4.\nconst SPREADS = [\n  [\n    (x, r) => (r > 1 && r \u003c 8 ? sea : (x * 7 + r * 13) % 41 ? green : yel),\n    roof,\n    mauve,\n    [\n      [68, 64, 1, () => (sky([peach, 13, pink, 25, mauve, 38, violet], 14), slot(), ridge((x) => 5 + 2.5 * sin(x * 0.22 + 1) + 1.6 * sin(x * 0.61), hill)), moon],\n      [14, 62, 0, castle, castleDyn],\n      [4, 12, 0, () => {\n        ridge((x) => (x > 22 && x \u003c 32 ? -1 : 3.5 + 2.4 * abs(sin(x * 0.5 + 0.3))), greend);\n        for (let n = 0, x, y; n \u003c 30; n++) T[(y = floor(rnd() * 5)) * CW + (x = floor(rnd() * CW))] && put(x, y, [yel, pink, white][n % 3]);\n      }],\n      [56, 56, 1, () => (cloud(10, 49, 4, blush), cloud(45, 43, 3, blush), cloud(30, 53, 2, blush)), (P) => birds(P, [[6, 46, 2.6], [30, 51, 3.2], [44, 39, 2.2]], dark)],\n      [40, 30, 1, () => ((h) => (ridge(h, green), [3, 7, 48, 13, 41].forEach((x) => (rect(x, h(x), x, h(x) + 2, trunk), disc(x, h(x) + 3.5, 2, greend)))))((x) => 12 + 9 * sin(x * 0.07 + 0.4) ** 2 + 2 * sin(x * 0.4))],\n      [2, 70, 0, () => frame(greend, green, pink)],\n    ],\n  ],\n  [\n    (x, r) => (abs(x - 22 - 7 * sin(r * 0.09)) \u003c 2 ? ((x + r) % 9 ? skyb : white) : (x * 11 + r * 7) % 23 ? firl : trunk),\n    greend,\n    mtnd,\n    [\n      [68, 64, 1, mountains, sun],\n      [14, 62, 0, () => (rect(0, 0, 55, 1, firl), pine(7, 62, 7, fir), pine(48, 56, 7, fir), pine(40, 30, 4, fir)), stag],\n      [4, 10, 0, ferns],\n      [56, 56, 1, () => (cloud(12, 49, 3, white), cloud(42, 45, 2, white)), (P) => birds(P, [[4, 44, 3], [24, 50, 3.4], [40, 47, 2.8]], dark)],\n      [40, 34, 1, () => ((h) => (ridge(h, green), [2, 7, 12, 17, 22, 27, 32, 37, 42, 47, 52].forEach((x) => cone(x, round(h(x)) - 1, round(h(x)) + 6 + (x % 3) * 2, 2, 0, firb))))((x) => 12 + 6 * sin(x * 0.13 + 1) + 3 * sin(x * 0.4))],\n      [2, 70, 0, () => frame(fir, firl, trunk)],\n    ],\n  ],\n  [\n    (x, r) => (r % 8 === round(3 + 2 * sin(x * 0.7 + r)) ? white : r % 16 \u003c 8 ? sea : sead),\n    red,\n    night,\n    [\n      [68, 64, 1, () => (sky([sead, 7, night, 24, navy], 24), disc(11, 48, 5, cream), disc(13.5, 49.5, 4.4, navy))],\n      [14, 64, 0, lighthouse, beam],\n      [4, 13, 0, null, (P) => waves(3 * sin(P.t * 0.8), 5, 5, 0.27, sead, sea)],\n      [56, 56, 1, () => [...Array(32)].forEach((_, i, a, s = sin(i * 0.3 + 0.6)) => rect(i + 2, 46 + s, i + 2, 47 + s + (i > 6 && i \u003c 26), sky2)), (P) => birds(P, [[10, 40, 4], [36, 48, 3.3]], white)],\n      [40, 22, 1, () => waves(0, 8, 3, 0.35, sea, teal), boats],\n      [2, 70, 0, () => frame(rock, grey, teal)],\n    ],\n  ],\n  [\n    (x, r) => (r \u003c 6 ? grey : abs(r - 34) \u003c 2 && x % 8 \u003c 4 ? yel : street),\n    indigo,\n    indigo,\n    [\n      [68, 64, 1, () => (sky([dusk, 9, mag, 19, indigo, 33, navy], 10), slot()), moon],\n      [14, 64, 0, city, clock],\n      [4, 14, 0, () => (rect(0, 0, 55, 0, black), [5, 28, 50].forEach((x) => rects([[x, 0, x, 9, black], [x - 1, 10, x + 1, 11, win], [x, 12, x, 12, black]]))), tram],\n      [56, 56, 1, () => (cloud(40, 50, 3, sky2), cloud(10, 40, 2, sky2)), balloon],\n      [40, 34, 1, skyline],\n      [2, 70, 0, () => frame(red, yel, 0, 1)],\n    ],\n  ],\n];\n\nconst pageTex = (f) => Uint8Array.from({ length: PW * D }, (_, i) => f(i % PW, floor(i / PW)));\n// The near page: lines of print, a coloured initial, a page number. A line is\n// five units deep so it shows as one row of the panel when the page lies flat.\nfunction nearTex(cap) {\n  return pageTex((x, r, l = floor(r / 10) - 1) =>\n    r > 7 && r \u003c 25 && x > 4 && x \u003c 9 ? cap : (r % 10 > 4 && l >= 0 && l \u003c 5 && x > (l \u003c 2 ? 9 : 4) && x \u003c PW - 5 && sin(x * 1.9 + l * 3) + sin(x * 0.7 + l * 5) > -0.8) || (r > 69 && abs(x - 28.5) \u003c 2) ? text : paper,\n  );\n}\n// The front cover: cloth and a gold-edged label with a red seal and a title.\nconst coverTex = () => pageTex((x, r, a = abs(x - 28.5), b = abs(r - 34)) => (a > 14 || b > 19 ? cloth : a > 13 || b > 18 ? yel : a \u003c 6 && r \u003c 32 && r > 20 ? roof : r % 4 > 1 && r > 37 && a \u003c 9 ? text : paper));\n\nconst build = ([far, cap, back, cards]) => ({\n  far: pageTex(far),\n  near: nearTex(cap),\n  back: PAL[back],\n  cards: cards.map(([zb, h, fwd, art, dyn]) => ((T = new Uint8Array(CW * h)), (TH = h), art && art(), { zb, h, fwd, tex: T, work: dyn ? new Uint8Array(CW * h) : T, dyn })),\n});\n\n// The lamp: where its light comes from, its colour, and the room in its pool.\nfunction paint(P) {\n  const a = (P.lamp - 0.5) * 2.6, wm = 1 - P.lamp, L = [sin(a) * 0.8, 0.55 + 0.2 * cos(a), -0.8], n = Math.hypot(...L), lx = 32 + sin(a) * 34, tx = 32 + sin(a) * 20;\n  P.L = L.map((v) => v / n);\n  P.lc = [mix(0.86, 1.08, wm), mix(0.94, 0.9, wm), mix(1.08, 0.66, wm)];\n  P.sx = P.L[0] \u003c -0.25 ? 1 : P.L[0] > 0.25 ? -1 : 0;\n  for (let p = 0, x, y, c, s; p \u003c N; p++) {\n    (x = p & 63), (y = p >> 6);\n    if (y \u003c TB) (s = (0.55 + 0.85 * exp(-(((x - lx) / 30) ** 2) - ((y - 34) / 46) ** 2)) * ((x + 3) % 8 ? 1 : 0.86) * (y > TB - 3 ? 0.7 : 1)), (c = [46, 40, 62]);\n    else (s = (0.5 + 0.8 * exp(-(((x - tx) / 30) ** 2) - ((y - 104) / 26) ** 2)) * (0.86 + 0.14 * sin(y * 1.9 + 2 * sin(x * 0.11 + y * 0.5)))), (c = [96, 60, 36]);\n    for (let i = 0; i \u003c 3; i++) P.bg[p * 3 + i] = c[i] * s * P.lc[i];\n  }\n}\n\n// A card hinged at (Yb, Zb), w wide from column x0, its height along (dy, dz).\n// From behind it shows bk: a page's other face or a card's plain colour. A\n// page is a card hinged at the spine, darker into the gutter.\nfunction card(P, tex, bk, w, x0, h, Yb, Zb, dy, dz, bias, page) {\n  const { buf, zb, L, lc } = P, f0 = dy + dz * K, s = f0 > 0 ? 1 : -1, f = s * max(abs(f0), 0.03), y0 = G - Yb - Zb * K, side = -P.sx;\n  // Light on the face, and on the faces turned left and right.\n  const m = [-0.7, 0, 0.7].map((nx, j, _, q = j === 1 ? s : 0.7 * s, d = 0.7 * max(0, nx * L[0] + q * dz * L[1] - q * dy * L[2])) => [0.4 + d * lc[0], 0.42 + d * lc[1], 0.48 + d * lc[2]]);\n  for (let y = max(0, floor(f > 0 ? y0 - h * f : y0)), y1 = min(H, ceil(f > 0 ? y0 : y0 - h * f)); y \u003c y1; y++) {\n    const v = (y0 - y - 0.5) / f, ty = floor(v), z = Zb + v * dz - bias, row = ty * w, g = page && v \u003c 8 ? 0.7 + 0.0375 * v : 1;\n    for (let x = 0, tc, p, o, ci, c, k, e; x \u003c w && v >= 0 && v \u003c h; x++) {\n      if (!(tc = tex[row + x]) || z >= zb[(p = y * W + x0 + x)]) continue;\n      (zb[p] = z), (o = p * 3), (ci = s > 0 ? tc & 63 : 0), (c = s > 0 ? PAL[ci] : bk.length > 3 ? PAL[bk[row + x]] : bk), (k = m[s > 0 && tc & LF ? 0 : s > 0 && tc & RF ? 2 : 1]);\n      // The white core of the card shows along a cut edge that faces the light.\n      e = s \u003c 0 ? 0 : ty + 1 >= h || !tex[row + w + x] ? 0.45 : side && (x + side \u003c 0 || x + side >= w || !tex[row + x + side]) ? 0.3 : 0;\n      for (let i = 0; i \u003c 3; i++) buf[o + i] = (c[i] + (248 - c[i]) * e) * (EM[ci] ? 1 : k[i]) * g;\n    }\n  }\n}\n\n// One spread's cards opened by open(j), turned by rho about the spine: 0 on the\n// far page, PI - phi riding the leaf. Flat, a card folded back lies on top.\nfunction scene(P, S, open, rho) {\n  const cr = cos(rho), sr = sin(rho), wob = P.mode === STAND ? P.timer : 9;\n  S.cards.forEach((c, i) => {\n    if (i >= P.layers) return;\n    const lam = ((1 - open(ORDER[i])) * PI) / 2 + 0.16 * sin(wob * 15 - i) * exp(-wob * 4), yc = cos(lam), zc = (c.fwd ? -1 : 1) * sin(lam);\n    if (c.dyn) c.work.set(c.tex), (T = c.work), (TH = c.h), c.dyn(P);\n    card(P, c.work, S.back, CW, X0, c.h, c.zb * sr, c.zb * cr, zc * sr + yc * cr, zc * cr - yc * sr, c.fwd ? 0.3 : 0.6);\n  });\n}\n\nconst stand = (P, stay) => Object.assign(P, { mode: STAND, timer: 0, stay });\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { buf: new Float32Array(N * 3), bg: new Float32Array(N * 3), zb: new Float32Array(N), t: 0, lamp: -1, mode: OPEN, timer: 0, phi: PI, cur: -1, next: 0, ask: 0, layers: 4, pull: 0 });\n  P.sc = SPREADS.map(build);\n  P.cover = coverTex();\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], rate = cl(k[1], 0.2, 3) / 2, d = cl(dt, 0, 0.1) * rate, want = cl(round(k[0]), 0, 3), lamp = cl(k[3], 0, 1);\n  P.layers = cl(round(k[2]), 4, 6);\n  if (abs(lamp - P.lamp) > 0.002) (P.lamp = lamp), paint(P);\n  if (P.cur \u003c 0) P.cur = P.base = want;\n  if (want !== P.base) (P.base = want), (P.ask = 1);\n  if (input.btnPressed?.[0]) P.ask = 2;\n  P.t += d;\n  P.pull = sm(0.5 + 1.3 * sin(P.t * 0.9 - 1));\n  if (P.mode === OPEN) {\n    // The cover swings open toward the viewer, never slower than at Speed 1.2.\n    P.phi = PI * (1 - sm((P.timer += cl(dt, 0, 0.1) * max(rate, 0.6)) / 1.6));\n    if (P.timer >= 1.6) stand(P, 1.7);\n  } else if (P.mode === STAND) {\n    // The knob asks for its own spread, the button for the next.\n    if (P.ask === 1 && P.base === P.cur) P.ask = 0;\n    if ((P.timer += d) >= P.stay || P.ask) Object.assign(P, { mode: TURN, timer: 0, next: P.ask === 1 ? P.base : (P.cur + 1) % 4, ask: 0 });\n  } else if ((P.phi = PI * sm((P.timer += d) / 2.8)) && P.timer >= 2.8) (P.cur = P.next), stand(P, 7);\n}\n\n// One LED of plain card under the lamp, at depth z.\nconst px = (P, p, c, k, z) => ((P.zb[p] = z), PAL[c].forEach((v, i) => (P.buf[p * 3 + i] = v * k * P.lc[i])));\n\nexport function draw(display, params) {\n  const P = params, { buf, phi } = P, A = P.sc[P.cur], deg = (phi * 180) / PI, open = P.mode === OPEN, B = P.mode === TURN ? P.sc[P.next] : null, nr = (B || A).near;\n  buf.set(P.bg);\n  // The table takes shadows, the wall behind does not.\n  P.zb.fill(1e9).fill(500, TB * W);\n  // The cover boards round the pages, and the edges of the page block.\n  for (let x = 2; x \u003c 62; x++) px(P, 86 * W + x, cloth, 0.7, 90), open || [paper, grey, cloth].forEach((c, i) => px(P, (117 + i) * W + x, c, 0.85 - i * 0.1, 90));\n  for (let y = 87; y \u003c (open ? 102 : 120); y++) px(P, y * W + 2, cloth, 0.8, 90), px(P, y * W + 61, cloth, 0.6, 90);\n  card(P, A.far, A.far, PW, P0, D, 0, 0, 0, 1, 0, 1);\n  if (!open) card(P, nr, nr, PW, P0, D, 0, 0, 0, -1, 0, 1);\n  if (P.mode !== STAND) {\n    // The leaf, and its own edge, a line of bare card.\n    const y = floor(G - D * (sin(phi) - K * cos(phi))), z = -D * cos(phi) - 0.6;\n    card(P, B ? B.far : P.cover, A.near, PW, P0, D, 0, 0, sin(phi), -cos(phi), 0, 1);\n    for (let x = P0, p; x \u003c P0 + PW && y >= 0 && y \u003c H; x++) if (z \u003c P.zb[(p = y * W + x)]) px(P, p, open ? cloth : white, 0.9, z);\n  }\n  if (P.mode === STAND || deg \u003c 170) scene(P, A, (j) => (P.mode === STAND ? 1 : 1 - sm((deg - 5 * j) / 80)), 0);\n  if (B && deg > 14) scene(P, B, (j) => sm((deg - 92 - 6 * j) / (80 - 6 * j)), PI - phi);\n  // The pull-tab at the side of the near page.\n  for (let y = 108, e = round(P.pull * 2); y \u003c= 110 && !open; y++) for (let x = 59; x \u003c= 61 + e; x++) px(P, y * W + x, x === 61 + e && y === 109 ? roof : paper, 0.8, -50);\n  // Every card's shadow on what stands behind it, a step away from the lamp.\n  for (let p = 3 * W, z, k, sx = P.sx, zb = P.zb; p \u003c N; p++) if ((z = zb[p]) \u003c 1e8 && (k = zb[p - W - sx] \u003c z - 3 ? 0.58 : zb[p - 2 * W - 2 * sx] \u003c z - 3 ? 0.78 : 1) \u003c 1) for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] *= k;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-pop-up-book","type":"code","name":"pop-up-book","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pop-up Book\n// Family:  paper\n// Idea:    A pop-up book lies open under a reading lamp: each spread's cut-card scene stands up out of the gutter in layers and its paper parts move, until the page turns over, folds it flat and raises the next.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after layered pop-up books, tunnel books and the pull-tab movable books of the nineteenth century\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Spread=0..3, Speed=0.2..3, Layers=4..6, Lamp=0..1\n//\n// Knob 1: Spread. Which spread the book is open at: a castle at dusk at 0, a pine forest with a stag at 1, a lighthouse at night at 2, a city at 3. Turned, the book leafs over to it and reads on from there.\n// Knob 2: Speed. How fast the pages and the paper parts go: at 2 a spread stands seven seconds and a page turns in under three.\n// Knob 3: Layers. How many cards stand: sky, main piece, front strip and a flying piece at 4, hills, a swell with a sailing boat or a far skyline at 5, and at 6 a tunnel-book frame across the front (a rose arch, pine boughs, a sea cave, a theatre curtain).\n// Knob 4: Lamp. Where the light comes from: a warm lamp low on the left at 0, overhead at 0.5, cool daylight from the right at 1. The folds swap their lit and shaded faces and the shadows swing.\n// Buttons: K1 tap turns the page now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The gutter's row, a page's depth (the tallest a card may stand), and how far\n// a unit of depth climbs the panel for a viewer a little above the book.\nconst [G, D, K] = [102, 74, 0.2];\n// Cards 56 wide from column 4, pages 58 from column 3, the table's back edge.\nconst [CW, X0, PW, P0, TB] = [56, 4, 58, 3, 80];\n// A texel on a face turned to the left or to the right.\nconst [LF, RF] = [64, 128];\nconst [STAND, TURN, OPEN] = [0, 1, 2];\n// The order cards rise in: the main piece first, the sky last but for the frame.\nconst ORDER = [4, 0, 1, 3, 2, 5];\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\n\n// Card and paper colours. Lit windows, the beam and a lit gateway glow on their own.\nconst PAL = [[0, 0, 0]], EM = new Uint8Array(64);\nconst [stone, ink, dark, roof, yel, peach, pink, mauve, violet, hill, white, cream, green, greend, wood, warm, blush, skyw, skyl, skyb, mtn, mtnd, snow, fir, firl, firb, trunk, deer, fly, fern, grey, navy, night, sea, sead, teal, red, glow, rock, black, dusk, mag, indigo, sky2, brick, cteal, purple, glass, win, street, paper, text, cloth] = \"dccdb0 ad987c 2a2034 cc3a44 fccc46 fab270 ec7884 ac5492 5c3a8e 40346c f8f6ee faeec4 5aa850 287040 9c6234 f8b860 fadece fadeb0 b0d8f0 76b0e6 7084b8 56689c eef4fa 1c643e 3c8c50 2c6c6c 70462a be7640 dc2828 82c450 9696a0 162058 283a80 245cb2 183c8c 2896a8 d63034 fff0ac 5c5c70 1e1e26 f4885a b0487c 3e347c 48548c a4483c 3a7c7c 70508a 5a6e96 ffd66e 484854 ece0c6 483e3c 8c2430\"\n  .split(\" \")\n  .map((h) => PAL.push([0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16))) - 1);\nEM[win] = EM[glow] = EM[warm] = 1;\n\n// Drawing on a card: x 0..55, y up from the fold at its foot.\nlet T, TH;\nconst put = (x, y, c) => ((x = round(x)), (y = round(y)), x >= 0 && x \u003c CW && y >= 0 && y \u003c TH && (T[y * CW + x] = c));\nconst rect = (x0, y0, x1, y1, c) => {\n  for (let y = round(y0); y \u003c= y1; y++) for (let x = round(x0); x \u003c= x1; x++) put(x, y, c);\n};\nconst rects = (list) => list.forEach((r) => rect(...r));\n// A body narrowing from half width a to b over rows y0..y1, its left half on a\n// face turned left and its right half turned right: towers, tiers, roofs.\nconst cone = (cx, y0, y1, a, b, c) => {\n  for (let y = y0; y \u003c= y1; y++) for (let w = a + ((b - a) * (y - y0)) / max(1, y1 - y0), x = ceil(cx - w - 0.01); x \u003c= cx + w + 0.01; x++) put(x, y, c | (x \u003c cx - 0.3 ? LF : x > cx + 0.3 ? RF : 0));\n};\nconst disc = (cx, cy, r, c) => {\n  for (let y = floor(cy - r); y \u003c= cy + r; y++) for (let x = floor(cx - r); x \u003c= cx + r; x++) if ((x - cx) ** 2 + (y - cy) ** 2 \u003c= r * r) put(x, y, c);\n};\nconst line = (x0, y0, x1, y1, c) => {\n  for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0), 1); i \u003c= n; i++) put(x0 + ((x1 - x0) * i) / n, y0 + ((y1 - y0) * i) / n, c);\n};\n// Ground up to f(x), each slope on the face it turns to.\nconst ridge = (f, c) => {\n  for (let x = 0; x \u003c CW; x++) for (let y = 0, h = f(x), s = f(x + 0.5) - f(x - 0.5); y \u003c= h; y++) put(x, y, c | (s > 0.15 ? LF : s \u003c -0.15 ? RF : 0));\n};\n// The sky card at the back: bands of paper under a scalloped top, with stars.\nconst sky = (bands, stars) => {\n  for (let x = 0; x \u003c CW; x++)\n    for (let y = 0, top = 54 + round(7 * abs(sin(x * 0.2 + 0.6))), i; y \u003c= top; y++) {\n      for (i = 0; i + 1 \u003c bands.length && y + 2 * sin(x * 0.3 + y * 0.07) >= bands[i + 1]; ) i += 2;\n      put(x, y, bands[i]);\n    }\n  for (let n = 0; n \u003c stars; n++) put(2 + rnd() * 52, 36 + rnd() * 16, white);\n};\n// The moon rides a slot cut in the sky card.\nconst slot = () => {\n  for (let s = 0.12; s \u003c 0.88; s += 0.01) put(28 - 21 * cos(PI * s), 30 + 21 * sin(PI * s), mauve);\n};\nconst moon = (P, s = PI * (0.18 + 0.32 * (1 + sin(P.t * 0.3)))) => disc(28 - 21 * cos(s), 30 + 21 * sin(s), 4.3, cream);\nconst cloud = (cx, cy, n, c) => {\n  for (let k = 0; k \u003c n; k++) disc(cx + (k - (n - 1) / 2) * 3.2, cy + (k % 2) * 1.3, 2.4, c);\n};\nconst windows = (x0, x1, y0, y1, dx, dy, lit) => {\n  for (let y = y0; y \u003c= y1; y += dy) for (let x = x0; x \u003c= x1; x += dx) put(x, y, rnd() \u003c lit ? win : black);\n};\nconst pine = (cx, h, w, c) => {\n  rect(cx - 1, 0, cx + 1, 5, trunk);\n  for (let i = 0, s = (h - 6) / 5, y0, ww; i \u003c 5; i++) (y0 = round(4 + i * s)), cone(cx, y0, min(h - 1, round(y0 + s * 1.7)), (ww = w * (1 - i * 0.16)), 0.4, c), cone(cx, y0, y0, ww, ww, firl);\n};\nconst birds = (P, list, c) =>\n  list.forEach(([x0, y, v], i) => {\n    for (let n = 0, w = sin(P.t * 9 + i * 2) > 0 ? 1 : -1, x = x0 + ((P.t * v) % 60); n \u003c 2; n++, x -= 60) for (const [a, b] of [[0, 0], [-1, w > 0], [1, w > 0], [-2, w], [2, w]]) put(x + a, y + b, c);\n  });\nconst waves = (o, top, amp, k, deep, lt) => {\n  for (let x = 0; x \u003c CW; x++)\n    for (let y = 0, u = (x + o) * k, h = top + amp * abs(sin(u)), s = cos(u) * Math.sign(sin(u)); y \u003c= h; y++) put(x, y, (y > h - 1.2 ? white : y > h - 3 ? lt : deep) | (s > 0.2 ? LF : s \u003c -0.2 ? RF : 0));\n};\n// A tunnel-book frame with an arch cut out: c the card, e the rim, f flecks.\n// Pleated, it hangs in folds like a curtain.\nconst frame = (c, e, f, pleat) => {\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const dx = abs(x - 27.5), n = pleat ? 0 : 1.4 * sin(y * 0.9 + x * 2.1) + sin(y * 0.4 - x), w = (y \u003c 40 ? 21 : 21 * sqrt(max(0, 1 - ((y - 40) / 22) ** 2))) + n;\n      if (dx >= w && y \u003c TH - (pleat ? 0 : 3 * abs(sin(x * 0.35)))) put(x, y, (dx \u003c w + 1.3 ? e : f && rnd() \u003c 0.1 ? f : c) | (pleat ? (x % 4 \u003c 2 ? LF : RF) : n > 0.4 ? LF : n \u003c -0.4 ? RF : 0));\n    }\n};\n\n// A castle at dusk: a keep between two towers, turrets on the curtain wall,\n// pennants that flap and a drawbridge that comes down when the tab is pulled.\nconst castle = () => {\n  rect(9, 0, 46, 15, stone);\n  cone(27, 0, 33, 5.5, 5.5, stone);\n  for (let x = 9; x \u003c= 46; x += 4) rect(x, 16, x + 1, 17, stone), x \u003c 32 && x > 20 && rect(x + 1, 34, x + 2, 35, stone);\n  for (const cx of [10, 45]) cone(cx, 0, 25, 3, 3, stone), cone(cx, 26, 34, 4, 0, roof), rect(cx, 13, cx, 15, dark);\n  for (const cx of [18, 36]) cone(cx, 0, 41, 4, 4, stone), cone(cx, 42, 54, 5, 0, roof), rect(cx, 21, cx, 24, dark), rect(cx, 31, cx, 34, dark);\n  // Printed stone courses.\n  for (let p = 0, x, y; p \u003c T.length; p++) if ((T[p] & 63) === stone && ((y = floor(p / CW)) % 5 === 4 || (y % 5 === 1 && ((x = p % CW) + floor(y / 5) * 3) % 7 === 0))) T[p] = (T[p] & 192) | ink;\n  rects([[24, 19, 25, 22, win], [29, 19, 30, 22, win], [25, 0, 29, 7, warm], [26, 8, 28, 8, warm], [26, 0, 26, 7, dark], [28, 0, 28, 7, dark], [26, 11, 28, 16, roof]]);\n  disc(27, 28, 2.3, win);\n  put(27, 28, dark);\n  put(27, 14, yel);\n};\nconst castleDyn = (P) => {\n  for (const cx of [18, 36]) {\n    rect(cx, 55, cx, 61, dark);\n    for (let i = 1, y; i \u003c= 5; i++) put(cx + i, (y = 60 + round(sin(P.t * 7 - i * 0.9) * i * 0.25)), i % 2 ? yel : roof), i \u003c 4 && put(cx + i, y - 1, yel);\n  }\n  const hb = round(8 * cos(P.pull * 1.45));\n  rect(25, 0, 29, hb, wood);\n  for (let y = 1; y \u003c hb; y += 2) rect(25, y, 29, y, trunk);\n  line(24, 9, 25, hb, dark);\n  line(30, 9, 29, hb, dark);\n};\n// A pine forest in the morning; the stag in the clearing grazes when the tab is pulled.\nconst mountains = () => {\n  sky([skyw, 10, skyl, 30, skyb], 0);\n  for (const [px, ph, s, c] of [[31, 50, 1.25, mtn], [10, 39, 1.4, mtnd], [48, 41, 1.3, mtnd]])\n    for (let x = 0; x \u003c CW; x++) for (let y = 0, top = ph - abs(x - px) * s; y \u003c= top; y++) put(x, y, (y > ph - 8 + 2 * sin(x * 1.7) ? snow : c) | (x \u003c px ? LF : x > px ? RF : 0));\n};\nconst sun = (P) => {\n  disc(44, 55, 3.3, yel);\n  for (let k = 0, a; k \u003c 8; k++) (a = P.t * 0.5 + (k * PI) / 4), line(44 + 4.6 * cos(a), 55 + 4.6 * sin(a), 44 + 6.5 * cos(a), 55 + 6.5 * sin(a), yel);\n};\nconst stag = (P) => {\n  const a = mix(2.05, 3.95, P.pull), hx = 24 + 7 * cos(a), hy = 10 + 7 * sin(a), b = a - 1.15;\n  for (const lx of [24, 26, 31, 33]) rect(lx, 0, lx, 5, trunk);\n  rects([[23, 6, 34, 10, deer], [24, 11, 33, 11, deer], [33, 8, 35, 11, white], [hx - 2, hy - 1, hx, hy, deer]]);\n  line(24, 10, hx, hy, deer);\n  line(25, 10, hx + 1, hy, deer);\n  put(hx - 3, hy - 1, dark);\n  put(hx + 1, hy + 1, deer);\n  for (const [l, o] of [[5, 0], [3.5, 0.6], [3, -0.5]]) line(hx, hy + 1, hx + l * cos(b + o), hy + 1 + l * sin(b + o), trunk);\n};\nconst ferns = () => {\n  ridge((x) => 1 + 0.8 * sin(x * 0.9) + (x % 7 === 3 ? 2 : 0), green);\n  for (const [x, h] of [[9, 3], [13, 2], [21, 4]]) rect(x, 0, x, h - 1, white), rect(x - 1, h, x + 1, h + 1, fly), put(x, h + 1, white);\n  for (const cx of [3, 17, 31, 53]) for (let k = -2; k \u003c= 2; k++) line(cx, 0, cx + k * 1.4, 5 - abs(k) * 0.8, fern);\n};\n\n// A lighthouse at night over paper waves; its beam is a card on a wheel,\n// long when it swings left, short when right, a flash when it faces us.\nconst lighthouse = () => {\n  ridge((x) => (x \u003c 17 ? -1 : 12 + 3 * sin(x * 0.5) + 2 * sin(x * 1.3) - max(0, 26 - x) * 1.2), rock);\n  cone(40, 12, 50, 5, 3, white);\n  for (let p = 12 * CW; p \u003c 51 * CW; p++) if ((T[p] & 63) === white && floor(p / CW - 12) % 10 \u003c 5) T[p] = (T[p] & 192) | red;\n  rects([[40, 12, 40, 15, black], [40, 30, 40, 30, black], [40, 41, 40, 41, black], [34, 51, 46, 51, black], [37, 52, 43, 56, win], [39, 52, 39, 56, black], [41, 52, 41, 56, black], [40, 62, 40, 63, black], [25, 10, 31, 15, white], [26, 13, 26, 13, win], [30, 13, 30, 13, win], [28, 10, 28, 12, black]]);\n  for (let x = 34; x \u003c= 46; x += 2) put(x, 52, black);\n  cone(40, 57, 61, 4, 0.5, red);\n  cone(28, 16, 19, 4.5, 0.5, red);\n};\nconst beam = (P) => {\n  const a = P.t * 1.3, s = sin(a), d = s > 0 ? -1 : 1;\n  for (let i = 1; i \u003c= (s > 0 ? 38 : 14) * abs(s); i++) for (let w = 0.5 + i * 0.09, y = round(54 - w); y \u003c= 54 + w; y++) put(40 + d * (3 + i), y, glow);\n  if (cos(a) > 0.6) disc(40, 54, 1 + 6 * (cos(a) - 0.6), glow);\n};\n// A sailing boat rocks on the swell.\nconst boats = (P) => {\n  const b = round(sin(P.t * 1.6));\n  rects([[11, 4 + b, 17, 5 + b, wood], [12, 3 + b, 16, 3 + b, wood], [14, 6 + b, 14, 17 + b, dark], [15, 17 + b, 15, 17 + b, red]]);\n  for (let y = 7; y \u003c= 16; y++) rect(15, y + b, 15 + (16 - y) * 0.6, y + b, white), y > 7 && rect(13 - (16 - y) * 0.35, y + b, 13, y + b, white);\n};\n\n// A city at nightfall: a clock tower whose hands turn on their wheel, a tram\n// in the street and a balloon over the roofs.\nconst city = () => {\n  cone(10, 0, 47, 5, 5, glass), cone(10, 48, 51, 3.5, 3.5, glass), cone(10, 52, 55, 2, 2, glass), cone(38, 0, 45, 4, 4, stone), cone(38, 46, 55, 5, 0, roof), cone(49, 44, 46, 3, 0.5, wood);\n  rects([[10, 56, 10, 63, grey], [16, 0, 23, 31, brick], [15, 32, 24, 32, brick], [24, 0, 32, 23, cteal], [25, 0, 31, 2, white], [38, 56, 38, 58, black], [43, 0, 54, 35, purple], [47, 39, 51, 43, wood], [47, 36, 47, 38, black], [51, 36, 51, 38, black]]);\n  windows(6, 14, 3, 45, 2, 3, 0.45), windows(17, 22, 3, 29, 2, 3, 0.4), windows(25, 31, 3, 21, 3, 3, 0.5), windows(36, 40, 4, 32, 4, 4, 0.5), windows(44, 53, 3, 33, 3, 3, 0.4);\n  disc(38, 39, 3.2, white);\n};\nconst clock = (P) => {\n  for (const [a, l] of [[-P.t * 1.2, 2.6], [1 - P.t * 0.1, 1.7]]) line(38, 39, 38 + l * cos(a), 39 + l * sin(a), black);\n};\nconst tram = (P) => {\n  const x = round(2 + 38 * (0.5 - 0.5 * cos(P.t * 0.45)));\n  rects([[x, 1, x + 13, 6, red], [x, 4, x + 13, 4, paper], [x + 1, 7, x + 12, 7, red], [x + 2, 0, x + 2, 0, black], [x + 11, 0, x + 11, 0, black]]);\n  for (let i = 0; i \u003c 6; i++) put(x + 1 + i * 2, 5, win);\n  line(x + 6, 8, x + 8, 11, black);\n};\nconst balloon = (P) => {\n  const x = 15 + 4 * sin(P.t * 0.2), y = 45 + 1.5 * sin(P.t * 0.9);\n  for (let yy = -4; yy \u003c= 4; yy++) for (let w = sqrt(20 - yy * yy) * (yy \u003c 0 ? 1 + yy * 0.1 : 1), xx = round(x - w); xx \u003c= x + w; xx++) put(xx, y + yy, (floor(xx - x + 9) % 3 ? red : yel) | (xx \u003c x - 1 ? LF : xx > x + 1 ? RF : 0));\n  rect(x - 1, y - 8, x + 1, y - 7, wood);\n  line(x - 2, y - 4, x - 1, y - 6, dark);\n  line(x + 2, y - 4, x + 1, y - 6, dark);\n};\nconst skyline = () => {\n  for (let x = 0, w, h; x \u003c CW; x += w) rect(x, 0, x + (w = 3 + floor(rnd() * 4)) - 1, (h = 12 + floor(rnd() * 20)), sky2), windows(x + 1, x + w - 2, 2, h - 1, 2, 3, 0.25);\n};\n\n// Each spread: the far page's print, the initial's colour, the card backs, and\n// the cards as [depth behind the gutter, height, folds forward, art, moving\n// part]. The first four stand at Layers 4.\nconst SPREADS = [\n  [\n    (x, r) => (r > 1 && r \u003c 8 ? sea : (x * 7 + r * 13) % 41 ? green : yel),\n    roof,\n    mauve,\n    [\n      [68, 64, 1, () => (sky([peach, 13, pink, 25, mauve, 38, violet], 14), slot(), ridge((x) => 5 + 2.5 * sin(x * 0.22 + 1) + 1.6 * sin(x * 0.61), hill)), moon],\n      [14, 62, 0, castle, castleDyn],\n      [4, 12, 0, () => {\n        ridge((x) => (x > 22 && x \u003c 32 ? -1 : 3.5 + 2.4 * abs(sin(x * 0.5 + 0.3))), greend);\n        for (let n = 0, x, y; n \u003c 30; n++) T[(y = floor(rnd() * 5)) * CW + (x = floor(rnd() * CW))] && put(x, y, [yel, pink, white][n % 3]);\n      }],\n      [56, 56, 1, () => (cloud(10, 49, 4, blush), cloud(45, 43, 3, blush), cloud(30, 53, 2, blush)), (P) => birds(P, [[6, 46, 2.6], [30, 51, 3.2], [44, 39, 2.2]], dark)],\n      [40, 30, 1, () => ((h) => (ridge(h, green), [3, 7, 48, 13, 41].forEach((x) => (rect(x, h(x), x, h(x) + 2, trunk), disc(x, h(x) + 3.5, 2, greend)))))((x) => 12 + 9 * sin(x * 0.07 + 0.4) ** 2 + 2 * sin(x * 0.4))],\n      [2, 70, 0, () => frame(greend, green, pink)],\n    ],\n  ],\n  [\n    (x, r) => (abs(x - 22 - 7 * sin(r * 0.09)) \u003c 2 ? ((x + r) % 9 ? skyb : white) : (x * 11 + r * 7) % 23 ? firl : trunk),\n    greend,\n    mtnd,\n    [\n      [68, 64, 1, mountains, sun],\n      [14, 62, 0, () => (rect(0, 0, 55, 1, firl), pine(7, 62, 7, fir), pine(48, 56, 7, fir), pine(40, 30, 4, fir)), stag],\n      [4, 10, 0, ferns],\n      [56, 56, 1, () => (cloud(12, 49, 3, white), cloud(42, 45, 2, white)), (P) => birds(P, [[4, 44, 3], [24, 50, 3.4], [40, 47, 2.8]], dark)],\n      [40, 34, 1, () => ((h) => (ridge(h, green), [2, 7, 12, 17, 22, 27, 32, 37, 42, 47, 52].forEach((x) => cone(x, round(h(x)) - 1, round(h(x)) + 6 + (x % 3) * 2, 2, 0, firb))))((x) => 12 + 6 * sin(x * 0.13 + 1) + 3 * sin(x * 0.4))],\n      [2, 70, 0, () => frame(fir, firl, trunk)],\n    ],\n  ],\n  [\n    (x, r) => (r % 8 === round(3 + 2 * sin(x * 0.7 + r)) ? white : r % 16 \u003c 8 ? sea : sead),\n    red,\n    night,\n    [\n      [68, 64, 1, () => (sky([sead, 7, night, 24, navy], 24), disc(11, 48, 5, cream), disc(13.5, 49.5, 4.4, navy))],\n      [14, 64, 0, lighthouse, beam],\n      [4, 13, 0, null, (P) => waves(3 * sin(P.t * 0.8), 5, 5, 0.27, sead, sea)],\n      [56, 56, 1, () => [...Array(32)].forEach((_, i, a, s = sin(i * 0.3 + 0.6)) => rect(i + 2, 46 + s, i + 2, 47 + s + (i > 6 && i \u003c 26), sky2)), (P) => birds(P, [[10, 40, 4], [36, 48, 3.3]], white)],\n      [40, 22, 1, () => waves(0, 8, 3, 0.35, sea, teal), boats],\n      [2, 70, 0, () => frame(rock, grey, teal)],\n    ],\n  ],\n  [\n    (x, r) => (r \u003c 6 ? grey : abs(r - 34) \u003c 2 && x % 8 \u003c 4 ? yel : street),\n    indigo,\n    indigo,\n    [\n      [68, 64, 1, () => (sky([dusk, 9, mag, 19, indigo, 33, navy], 10), slot()), moon],\n      [14, 64, 0, city, clock],\n      [4, 14, 0, () => (rect(0, 0, 55, 0, black), [5, 28, 50].forEach((x) => rects([[x, 0, x, 9, black], [x - 1, 10, x + 1, 11, win], [x, 12, x, 12, black]]))), tram],\n      [56, 56, 1, () => (cloud(40, 50, 3, sky2), cloud(10, 40, 2, sky2)), balloon],\n      [40, 34, 1, skyline],\n      [2, 70, 0, () => frame(red, yel, 0, 1)],\n    ],\n  ],\n];\n\nconst pageTex = (f) => Uint8Array.from({ length: PW * D }, (_, i) => f(i % PW, floor(i / PW)));\n// The near page: lines of print, a coloured initial, a page number. A line is\n// five units deep so it shows as one row of the panel when the page lies flat.\nfunction nearTex(cap) {\n  return pageTex((x, r, l = floor(r / 10) - 1) =>\n    r > 7 && r \u003c 25 && x > 4 && x \u003c 9 ? cap : (r % 10 > 4 && l >= 0 && l \u003c 5 && x > (l \u003c 2 ? 9 : 4) && x \u003c PW - 5 && sin(x * 1.9 + l * 3) + sin(x * 0.7 + l * 5) > -0.8) || (r > 69 && abs(x - 28.5) \u003c 2) ? text : paper,\n  );\n}\n// The front cover: cloth and a gold-edged label with a red seal and a title.\nconst coverTex = () => pageTex((x, r, a = abs(x - 28.5), b = abs(r - 34)) => (a > 14 || b > 19 ? cloth : a > 13 || b > 18 ? yel : a \u003c 6 && r \u003c 32 && r > 20 ? roof : r % 4 > 1 && r > 37 && a \u003c 9 ? text : paper));\n\nconst build = ([far, cap, back, cards]) => ({\n  far: pageTex(far),\n  near: nearTex(cap),\n  back: PAL[back],\n  cards: cards.map(([zb, h, fwd, art, dyn]) => ((T = new Uint8Array(CW * h)), (TH = h), art && art(), { zb, h, fwd, tex: T, work: dyn ? new Uint8Array(CW * h) : T, dyn })),\n});\n\n// The lamp: where its light comes from, its colour, and the room in its pool.\nfunction paint(P) {\n  const a = (P.lamp - 0.5) * 2.6, wm = 1 - P.lamp, L = [sin(a) * 0.8, 0.55 + 0.2 * cos(a), -0.8], n = Math.hypot(...L), lx = 32 + sin(a) * 34, tx = 32 + sin(a) * 20;\n  P.L = L.map((v) => v / n);\n  P.lc = [mix(0.86, 1.08, wm), mix(0.94, 0.9, wm), mix(1.08, 0.66, wm)];\n  P.sx = P.L[0] \u003c -0.25 ? 1 : P.L[0] > 0.25 ? -1 : 0;\n  for (let p = 0, x, y, c, s; p \u003c N; p++) {\n    (x = p & 63), (y = p >> 6);\n    if (y \u003c TB) (s = (0.55 + 0.85 * exp(-(((x - lx) / 30) ** 2) - ((y - 34) / 46) ** 2)) * ((x + 3) % 8 ? 1 : 0.86) * (y > TB - 3 ? 0.7 : 1)), (c = [46, 40, 62]);\n    else (s = (0.5 + 0.8 * exp(-(((x - tx) / 30) ** 2) - ((y - 104) / 26) ** 2)) * (0.86 + 0.14 * sin(y * 1.9 + 2 * sin(x * 0.11 + y * 0.5)))), (c = [96, 60, 36]);\n    for (let i = 0; i \u003c 3; i++) P.bg[p * 3 + i] = c[i] * s * P.lc[i];\n  }\n}\n\n// A card hinged at (Yb, Zb), w wide from column x0, its height along (dy, dz).\n// From behind it shows bk: a page's other face or a card's plain colour. A\n// page is a card hinged at the spine, darker into the gutter.\nfunction card(P, tex, bk, w, x0, h, Yb, Zb, dy, dz, bias, page) {\n  const { buf, zb, L, lc } = P, f0 = dy + dz * K, s = f0 > 0 ? 1 : -1, f = s * max(abs(f0), 0.03), y0 = G - Yb - Zb * K, side = -P.sx;\n  // Light on the face, and on the faces turned left and right.\n  const m = [-0.7, 0, 0.7].map((nx, j, _, q = j === 1 ? s : 0.7 * s, d = 0.7 * max(0, nx * L[0] + q * dz * L[1] - q * dy * L[2])) => [0.4 + d * lc[0], 0.42 + d * lc[1], 0.48 + d * lc[2]]);\n  for (let y = max(0, floor(f > 0 ? y0 - h * f : y0)), y1 = min(H, ceil(f > 0 ? y0 : y0 - h * f)); y \u003c y1; y++) {\n    const v = (y0 - y - 0.5) / f, ty = floor(v), z = Zb + v * dz - bias, row = ty * w, g = page && v \u003c 8 ? 0.7 + 0.0375 * v : 1;\n    for (let x = 0, tc, p, o, ci, c, k, e; x \u003c w && v >= 0 && v \u003c h; x++) {\n      if (!(tc = tex[row + x]) || z >= zb[(p = y * W + x0 + x)]) continue;\n      (zb[p] = z), (o = p * 3), (ci = s > 0 ? tc & 63 : 0), (c = s > 0 ? PAL[ci] : bk.length > 3 ? PAL[bk[row + x]] : bk), (k = m[s > 0 && tc & LF ? 0 : s > 0 && tc & RF ? 2 : 1]);\n      // The white core of the card shows along a cut edge that faces the light.\n      e = s \u003c 0 ? 0 : ty + 1 >= h || !tex[row + w + x] ? 0.45 : side && (x + side \u003c 0 || x + side >= w || !tex[row + x + side]) ? 0.3 : 0;\n      for (let i = 0; i \u003c 3; i++) buf[o + i] = (c[i] + (248 - c[i]) * e) * (EM[ci] ? 1 : k[i]) * g;\n    }\n  }\n}\n\n// One spread's cards opened by open(j), turned by rho about the spine: 0 on the\n// far page, PI - phi riding the leaf. Flat, a card folded back lies on top.\nfunction scene(P, S, open, rho) {\n  const cr = cos(rho), sr = sin(rho), wob = P.mode === STAND ? P.timer : 9;\n  S.cards.forEach((c, i) => {\n    if (i >= P.layers) return;\n    const lam = ((1 - open(ORDER[i])) * PI) / 2 + 0.16 * sin(wob * 15 - i) * exp(-wob * 4), yc = cos(lam), zc = (c.fwd ? -1 : 1) * sin(lam);\n    if (c.dyn) c.work.set(c.tex), (T = c.work), (TH = c.h), c.dyn(P);\n    card(P, c.work, S.back, CW, X0, c.h, c.zb * sr, c.zb * cr, zc * sr + yc * cr, zc * cr - yc * sr, c.fwd ? 0.3 : 0.6);\n  });\n}\n\nconst stand = (P, stay) => Object.assign(P, { mode: STAND, timer: 0, stay });\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { buf: new Float32Array(N * 3), bg: new Float32Array(N * 3), zb: new Float32Array(N), t: 0, lamp: -1, mode: OPEN, timer: 0, phi: PI, cur: -1, next: 0, ask: 0, layers: 4, pull: 0 });\n  P.sc = SPREADS.map(build);\n  P.cover = coverTex();\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], rate = cl(k[1], 0.2, 3) / 2, d = cl(dt, 0, 0.1) * rate, want = cl(round(k[0]), 0, 3), lamp = cl(k[3], 0, 1);\n  P.layers = cl(round(k[2]), 4, 6);\n  if (abs(lamp - P.lamp) > 0.002) (P.lamp = lamp), paint(P);\n  if (P.cur \u003c 0) P.cur = P.base = want;\n  if (want !== P.base) (P.base = want), (P.ask = 1);\n  if (input.btnPressed?.[0]) P.ask = 2;\n  P.t += d;\n  P.pull = sm(0.5 + 1.3 * sin(P.t * 0.9 - 1));\n  if (P.mode === OPEN) {\n    // The cover swings open toward the viewer, never slower than at Speed 1.2.\n    P.phi = PI * (1 - sm((P.timer += cl(dt, 0, 0.1) * max(rate, 0.6)) / 1.6));\n    if (P.timer >= 1.6) stand(P, 1.7);\n  } else if (P.mode === STAND) {\n    // The knob asks for its own spread, the button for the next.\n    if (P.ask === 1 && P.base === P.cur) P.ask = 0;\n    if ((P.timer += d) >= P.stay || P.ask) Object.assign(P, { mode: TURN, timer: 0, next: P.ask === 1 ? P.base : (P.cur + 1) % 4, ask: 0 });\n  } else if ((P.phi = PI * sm((P.timer += d) / 2.8)) && P.timer >= 2.8) (P.cur = P.next), stand(P, 7);\n}\n\n// One LED of plain card under the lamp, at depth z.\nconst px = (P, p, c, k, z) => ((P.zb[p] = z), PAL[c].forEach((v, i) => (P.buf[p * 3 + i] = v * k * P.lc[i])));\n\nexport function draw(display, params) {\n  const P = params, { buf, phi } = P, A = P.sc[P.cur], deg = (phi * 180) / PI, open = P.mode === OPEN, B = P.mode === TURN ? P.sc[P.next] : null, nr = (B || A).near;\n  buf.set(P.bg);\n  // The table takes shadows, the wall behind does not.\n  P.zb.fill(1e9).fill(500, TB * W);\n  // The cover boards round the pages, and the edges of the page block.\n  for (let x = 2; x \u003c 62; x++) px(P, 86 * W + x, cloth, 0.7, 90), open || [paper, grey, cloth].forEach((c, i) => px(P, (117 + i) * W + x, c, 0.85 - i * 0.1, 90));\n  for (let y = 87; y \u003c (open ? 102 : 120); y++) px(P, y * W + 2, cloth, 0.8, 90), px(P, y * W + 61, cloth, 0.6, 90);\n  card(P, A.far, A.far, PW, P0, D, 0, 0, 0, 1, 0, 1);\n  if (!open) card(P, nr, nr, PW, P0, D, 0, 0, 0, -1, 0, 1);\n  if (P.mode !== STAND) {\n    // The leaf, and its own edge, a line of bare card.\n    const y = floor(G - D * (sin(phi) - K * cos(phi))), z = -D * cos(phi) - 0.6;\n    card(P, B ? B.far : P.cover, A.near, PW, P0, D, 0, 0, sin(phi), -cos(phi), 0, 1);\n    for (let x = P0, p; x \u003c P0 + PW && y >= 0 && y \u003c H; x++) if (z \u003c P.zb[(p = y * W + x)]) px(P, p, open ? cloth : white, 0.9, z);\n  }\n  if (P.mode === STAND || deg \u003c 170) scene(P, A, (j) => (P.mode === STAND ? 1 : 1 - sm((deg - 5 * j) / 80)), 0);\n  if (B && deg > 14) scene(P, B, (j) => sm((deg - 92 - 6 * j) / (80 - 6 * j)), PI - phi);\n  // The pull-tab at the side of the near page.\n  for (let y = 108, e = round(P.pull * 2); y \u003c= 110 && !open; y++) for (let x = 59; x \u003c= 61 + e; x++) px(P, y * W + x, x === 61 + e && y === 109 ? roof : paper, 0.8, -50);\n  // Every card's shadow on what stands behind it, a step away from the lamp.\n  for (let p = 3 * W, z, k, sx = P.sx, zb = P.zb; p \u003c N; p++) if ((z = zb[p]) \u003c 1e8 && (k = zb[p - W - sx] \u003c z - 3 ? 0.58 : zb[p - 2 * W - 2 * sx] \u003c z - 3 ? 0.78 : 1) \u003c 1) for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] *= k;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Spread=0..3, Speed=0.2..3, Layers=4..6, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Spread","min":0,"max":3,"about":"Which spread the book is open at: a castle at dusk at 0, a pine forest with a stag at 1, a lighthouse at night at 2, a city at 3. Turned, the book leafs over to it and reads on from there."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the pages and the paper parts go: at 2 a spread stands seven seconds and a page turns in under three."},{"name":"Layers","min":4,"max":6,"about":"How many cards stand: sky, main piece, front strip and a flying piece at 4, hills, a swell with a sailing boat or a far skyline at 5, and at 6 a tunnel-book frame across the front (a rose arch, pine boughs, a sea cave, a theatre curtain)."},{"name":"Lamp","min":0,"max":1,"about":"Where the light comes from: a warm lamp low on the left at 0, overhead at 0.5, cool daylight from the right at 1. The folds swap their lit and shaded faces and the shadows swing."}],"start":[0,2,4,0.06],"measures":{"motion":0.2969,"detail":0.0558,"edges":0.4541,"complexity":0.5762,"coverage":0.9872,"colour":0.1893,"drift":0.1346},"knobResponse":[0.1392,0.0773,0.0475,0.1266]},{"slug":"popcorn","title":"Popcorn","family":"kitchen","round":19,"note":"영화관 팝콘 수레가 128줄을 다 써요. 케틀에서 낟알이 터져 뛰고 넘쳐 떨어지다가 케틀이 기울어 한 배치를 더미에 쏟고, K1 을 누르면 스쿱이 더미를 떠 가요.","idea":"A cinema popcorn cart fills the panel: kernels pop in a kettle hung under the heat lamp, the puffs jump, pile up past the rim and spill over, the kettle tips its batch onto the heap on the cabinet floor, and a scoop comes for the heap when it stands too high.","buttons":"K1 tap sends the scoop in now.","code":"// ===== Patternflow pattern =====\n// Title:   Popcorn\n// Family:  kitchen\n// Idea:    A cinema popcorn cart fills the panel: kernels pop in a kettle hung under the heat lamp, the puffs jump, pile up past the rim and spill over, the kettle tips its batch onto the heap on the cabinet floor, and a scoop comes for the heap when it stands too high.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the glass-cabinet popcorn carts of cinema lobbies\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Heat=0.2..3, Batch=6..16, Heap=0..1\n//\n// Knob 1: Lamp. The colour of the heat lamp that lights the cabinet, the steel and the corn, from a gold bulb at 0 through amber to the red of an infrared bulb at 1.\n// Knob 2: Heat. How hot the kettle runs, so how fast it goes: at 2 a batch pops, tips and starts again every 12 s; at 0.2 the kernels pop one by one.\n// Knob 3: Batch. The kettle, from a 6 oz kettle 26 LEDs wide to a 16 oz one 44 wide, and with it how many puffs each batch tips onto the heap.\n// Knob 4: Heap. How high the corn may stand before the scoop comes for it, from 22 rows over the deck to 44, about ten rows under the kettle.\n// Buttons: K1 tap sends the scoop in now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the glass. The heap stands on the warming deck, row FLOOR.\nconst XL = 3;\nconst XR = 60;\nconst TOPC = 15;\nconst FLOOR = 103;\n// The heat lamp: two tubes on row 16, one each side of the kettle's motor.\nconst LA = [6, 25, 38, 57];\n// The kettle turns about this point when it tips.\nconst PX = 32;\nconst PY = 36;\nconst MAXH = 640;\nconst MAXF = 360;\nconst NS = 12;\n// Popcorn is light: it falls slower than a ball and drags in the air.\nconst G = 150;\n// How much a puff raises the heap under each of its five columns.\nconst PROF = [1.2, 0.2, 0, 0.2, 1.2];\n// A batch, in batch seconds: pour, heat, pop, settle, tip, empty, back up.\nconst [POUR, HEAT, POP, REST, TIP, EMPTY] = [0, 1, 2, 3, 4, 5];\nconst DUR = [2, 2.5, 12, 1, 2, 2.5, 2];\nconst TIP_MAX = 1.7;\nconst SCOOP_T = 2.6;\n// Lamp colours from gold to the red of an infrared bulb.\nconst LAMP = [[255, 204, 120], [255, 168, 88], [255, 120, 70], [255, 76, 70]];\nconst { min, max, round, floor, sin, cos, abs } = Math;\nconst rnd = () => Math.random();\n// POPCORN in a 4x5 font, one hex digit a row.\nconst SIGN = [\"E9E88\", \"69996\", \"E9E88\", \"78887\", \"69996\", \"E9EA9\", \"9DB99\"];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n\n// Puffs: three or four lobes pressed together, lit from the top left, with a\n// fleck of hull (-1).\nfunction makeSprites(P) {\n  const spr = (P.spr = new Float32Array(NS * 25));\n  for (let s = 0; s \u003c NS; s++) {\n    for (let count = 0; count \u003c 12; ) {\n      count = 0;\n      const lobes = [[0, 0, 1.4 + rnd() * 0.4]];\n      for (let b = 1; b \u003c 3 + (s & 1); b++) {\n        const ang = rnd() * 7;\n        const dist = 0.9 + rnd() * 0.7;\n        lobes.push([cos(ang) * dist, sin(ang) * dist, 0.9 + rnd() * 0.6]);\n      }\n      for (let j = 0; j \u003c 25; j++) {\n        const x = (j % 5) - 2;\n        const y = ((j / 5) | 0) - 2;\n        const d = lobes.map(([cx, cy, r]) => Math.hypot(x - cx, y - cy) - r).sort((p, q) => p - q);\n        let v = 0;\n        if (d[0] \u003c= 0.2) {\n          v = (0.9 + 0.12 * clamp((-x - y) / 3, -1, 1)) * (d[1] \u003c 0.4 && d[0] > -0.6 ? 0.84 : 1);\n          count++;\n        }\n        spr[s * 25 + j] = v;\n      }\n    }\n    for (let j = 24; j >= 10; j--) {\n      if (spr[s * 25 + j] > 0 && (j * 7 + s * 3) % 4 === 0) {\n        spr[s * 25 + j] = -1;\n        break;\n      }\n    }\n  }\n  // The packed body of the heap, under the loose puffs on its surface.\n  P.tex = new Float32Array(N).fill(0.6);\n  for (let n = 0; n \u003c 1700; n++) {\n    const s = floor(rnd() * NS) * 25;\n    const cx = floor(rnd() * (W + 4)) - 4;\n    const cy = 44 + floor(rnd() * 60);\n    const k = 0.86 + rnd() * 0.14;\n    for (let j = 0; j \u003c 25; j++) {\n      const x = cx + (j % 5);\n      if (spr[s + j] !== 0 && x >= 0 && x \u003c W) P.tex[(cy + ((j / 5) | 0)) * W + x] = spr[s + j] \u003c 0 ? -1 : spr[s + j] * k;\n    }\n  }\n}\n\n// The cart round the glass, painted once: marquee, frame, base and wheels.\nfunction paintCart(P) {\n  const S = (P.cart = new Float32Array(N * 3));\n  const box = (x0, y0, x1, y1, c) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) S.set(c, (y * W + x) * 3);\n  };\n  box(0, 0, 63, 11, [84, 8, 12]);\n  box(0, 1, 63, 10, [134, 14, 20]);\n  for (let i = 0; i \u003c 7; i++)\n    for (let y = 0; y \u003c 5; y++)\n      for (let x = 0; x \u003c 4; x++)\n        if ((parseInt(SIGN[i][y], 16) >> (3 - x)) & 1) {\n          box(16 + i * 5 + x, y + 4, 16 + i * 5 + x, y + 4, [60, 4, 8]);\n          box(15 + i * 5 + x, y + 3, 15 + i * 5 + x, y + 3, [255, 236, 176]);\n        }\n  box(0, 12, 63, 106, [150, 18, 24]);\n  box(0, 13, 63, 13, [176, 30, 34]);\n  box(0, 14, 63, 14, [196, 150, 64]);\n  box(0, 106, 63, 106, [196, 150, 64]);\n  for (const [x, c] of [[0, [84, 8, 12]], [1, [176, 30, 34]], [2, [150, 150, 160]]]) {\n    box(x, 15, x, 106, c);\n    box(63 - x, 15, 63 - x, 106, c);\n  }\n  box(0, 107, 63, 118, [124, 14, 20]);\n  box(0, 119, 63, 119, [60, 6, 10]);\n  for (const x of [5, 34]) {\n    box(x, 109, x + 24, 117, [176, 124, 52]);\n    box(x + 1, 110, x + 23, 116, [140, 16, 23]);\n  }\n  box(27, 113, 27, 113, [240, 200, 110]);\n  box(36, 113, 36, 113, [240, 200, 110]);\n  for (const cx of [13, 51]) {\n    box(cx - 3, 120, cx + 3, 120, [70, 70, 76]);\n    for (let y = 120; y \u003c H; y++)\n      for (let x = cx - 5; x \u003c= cx + 5; x++) {\n        const d = Math.hypot(x + 0.5 - cx, y - 123);\n        if (d \u003c 4.4) box(x, y, x, y, d \u003c 1.6 ? [170, 170, 182] : y \u003c 121 ? [78, 78, 87] : [52, 52, 58]);\n      }\n  }\n}\n\nfunction halfW(a, d, v) {\n  const r = (v - (d - 5.5)) / 6;\n  return r \u003c= 0 ? a : a * Math.sqrt(max(0, 1 - r * r));\n}\n\n// The kettle for a batch size, and the places puffs take in it up to a dome.\nfunction resize(P, batch) {\n  P.batch = batch;\n  const a = (P.a = round(12 + 0.9 * (batch - 6)));\n  const d = (P.d = round(13 + 0.6 * (batch - 6)));\n  P.pv = round(d * 0.3);\n  const su = [];\n  const sv = [];\n  let row = 0;\n  const lay = (v, hw) => {\n    for (let u = -hw + (row++ & 1 ? 1.7 : 0); u \u003c= hw + 0.01; u += 3.4) {\n      su.push(u + (rnd() - 0.5) * 0.8);\n      sv.push(v + (rnd() - 0.5) * 0.6);\n    }\n  };\n  for (let v = d - 4.6; v > 1.2; v -= 2.9) lay(v, halfW(a, d, v + 2) - 4);\n  P.C = su.length;\n  const dh = (a - 2) * 0.45;\n  for (let v = -0.6; v > -dh + 0.5; v -= 2.9) lay(v, (a - 3) * Math.sqrt(max(0, 1 - ((-v + 1.5) / dh) ** 2)) - 1);\n  P.D = su.length - P.C;\n  P.su = Float32Array.from(su);\n  P.sv = Float32Array.from(sv);\n  P.ss = Uint8Array.from(su, () => floor(rnd() * NS));\n  // A third again as many pops as the kettle holds: those go over the rim.\n  P.total = P.C + P.D + round(0.35 * P.C);\n  P.KN = round((a - 3) * 1.5);\n  P.ku = Float32Array.from({ length: P.KN }, () => (rnd() * 2 - 1) * (a - 4));\n  P.kv = Float32Array.from({ length: P.KN }, () => d - 4 + rnd() * 1.4);\n  P.landed = min(P.landed, P.C + P.D);\n  P.popped = min(P.popped, P.total);\n}\n\nconst turn = (P) => ((P.cph = cos(P.phi)), (P.sph = sin(P.phi)), P.phi);\n\n// Kettle coordinates (u across, v down from the rim) to the panel, in P.qx, P.qy.\nfunction toScreen(P, u, v) {\n  const w = v - P.pv;\n  P.qx = PX + P.cph * u - P.sph * w;\n  P.qy = PY + P.sph * u + P.cph * w;\n}\n\n// Types: 0 falling to the heap, 1 hopping in the kettle, 4 rolling down the heap.\nfunction spawn(P, type, x, y, vx, vy, g, s) {\n  if (P.nF >= MAXF) return;\n  const v = [type, x, y, vx, vy, g, rnd() * 0.1, s, 0];\n  const i = P.nF++;\n  P.fl.forEach((A, n) => (A[i] = v[n]));\n}\n\n// A kernel bursting: a white star for a tenth of a second.\nfunction flash(P) {\n  if (P.flash.length \u003c 48) P.flash.push([P.qx, P.qy, 0.1]);\n}\n\n// The row a puff dropped at col rests on.\nfunction support(P, col) {\n  const s = P.surf;\n  return min(s[max(XL, col - 1)], s[col], s[min(XR, col + 1)]);\n}\n\n// How far the heap falls away three columns toward dir.\nconst fallAway = (P, col, dir) => P.surf[clamp(col + 3 * dir, XL, XR)] - support(P, col);\n\nfunction place(P, col, s, spr) {\n  if (P.nH >= MAXH) return true;\n  const n = P.nH++;\n  const y = (P.hy[n] = s - 2);\n  P.hx[n] = col;\n  P.hs[n] = spr;\n  for (let c = max(XL, col - 2); c \u003c= min(XR, col + 2); c++) P.surf[c] = min(P.surf[c], y - 2 + PROF[c - col + 2]);\n  return true;\n}\n\n// A puff rolls down any side steeper than a row a column.\nfunction dropInstant(P, x, spr) {\n  for (let n = 0; n \u003c 60; n++) {\n    const l = fallAway(P, x, -1);\n    const r = fallAway(P, x, 1);\n    if (l \u003c= 3 && r \u003c= 3) break;\n    x = clamp(x + (r > l ? 1 : r \u003c l ? -1 : rnd() \u003c 0.5 ? -1 : 1), XL + 2, XR - 2);\n  }\n  place(P, x, support(P, x), spr);\n}\n\nconst rise = (P) => FLOOR - 1 - min(...P.surf.subarray(XL, XR + 1));\n\n// A kernel bursts. Until the kettle is full the puff jumps and lands back on\n// the pile; once it is full every pop throws one over the rim.\nfunction pop(P) {\n  P.popped++;\n  if (P.kernels > 0) P.kernels--;\n  const cap = P.C + P.D;\n  const next = P.landed + P.hopping;\n  const fill = next / cap;\n  if (next \u003c cap && !(fill > 0.55 && rnd() \u003c 0.12)) {\n    toScreen(P, P.su[next], P.sv[next]);\n    flash(P);\n    spawn(P, 1, P.qx, P.qy - 1, (rnd() - 0.5) * 10, -(18 + rnd() * 32), P.qy, P.ss[next]);\n    P.hopping++;\n  } else {\n    const side = rnd() \u003c 0.5 ? -1 : 1;\n    toScreen(P, side * P.a * (0.45 + rnd() * 0.4), min(P.sv[min(next, cap - 1)], 1) - 1.5);\n    flash(P);\n    spawn(P, 0, P.qx, P.qy, side * (12 + rnd() * 14), -(14 + rnd() * 24), 0, floor(rnd() * NS));\n  }\n}\n\nfunction advance(P, h) {\n  P.pt += h;\n  const ph = P.phase;\n  P.rate = 0;\n  if (ph === POUR) {\n    const f = min(1, P.pt / (DUR[POUR] * 0.85));\n    P.kernels = round((P.total + 3) * f);\n    P.oil = f;\n  } else if (ph === POP) {\n    const x = min(1, P.pt / DUR[POP]);\n    P.rate = 6 * x * (1 - x);\n    while (P.popped \u003c floor(P.total * smooth(x))) pop(P);\n    P.oil = 1 - 0.65 * x;\n  } else if (ph === TIP || ph === EMPTY) {\n    P.phi = ph === TIP ? TIP_MAX * smooth(P.pt / DUR[TIP]) : TIP_MAX + 0.07 * sin(P.pt * 25) * (1 - P.pt / DUR[EMPTY]);\n    if (turn(P) > 0.85) {\n      // Empty half a second before the shaking stops, top puff first.\n      const left = (ph === TIP ? DUR[TIP] - P.pt + DUR[EMPTY] : DUR[EMPTY] - P.pt) - 0.5;\n      P.pourAcc += (P.landed * h) / max(h, left);\n      for (; P.pourAcc >= 1 && P.landed > 0; P.pourAcc--) {\n        const i = --P.landed;\n        toScreen(P, P.su[i], P.sv[i]);\n        spawn(P, 0, P.qx, P.qy, P.sph * (8 + rnd() * 12) + 4, -P.cph * (8 + rnd() * 10) + rnd() * 4, 0, P.ss[i]);\n      }\n    }\n  } else if (ph > EMPTY) P.phi = TIP_MAX * (1 - smooth(P.pt / DUR[ph]));\n  if (P.pt >= DUR[ph]) {\n    P.pt -= DUR[ph];\n    P.phase = (ph + 1) % 7;\n    if (P.phase === POUR) Object.assign(P, { popped: 0, landed: 0, hopping: 0, kernels: 0, oil: 0, phi: 0 });\n    if (P.phase === HEAT) P.oil = 1;\n    if (P.phase === TIP) tipNow(P);\n    if (ph === EMPTY) P.landed = 0;\n  }\n}\n\n// Puffs still in the air when it tips fall clear of it.\nfunction tipNow(P) {\n  for (let i = 0; i \u003c P.nF; i++) if (P.ft[i] === 1) P.ft[i] = 0;\n  P.hopping = P.pourAcc = 0;\n}\n\nfunction moveParticles(P, dt) {\n  const { ft, fx, fy, fvx, fvy, fg, fa, fs, fb } = P;\n  const drag = Math.exp(-0.8 * dt);\n  for (let i = 0; i \u003c P.nF; ) {\n    const t = ft[i];\n    let dead = false;\n    // A puff tumbles as it falls or rolls.\n    fa[i] += dt;\n    if (fa[i] > 0.1) [fa[i], fs[i]] = [0, (fs[i] + 1 + floor(rnd() * 3)) % NS];\n    if (t === 4) {\n      const dir = fvx[i] > 0 ? 1 : -1;\n      fx[i] += dir * 26 * dt;\n      const col = clamp(round(fx[i]), XL + 2, XR - 2);\n      const s = support(P, col);\n      fy[i] = s - 2;\n      if (col !== round(fx[i]) || fallAway(P, col, dir) \u003c= 2.5) dead = place(P, col, s, fs[i]);\n    } else {\n      fvy[i] = (fvy[i] + G * dt) * drag;\n      fvx[i] *= drag;\n      fx[i] += fvx[i] * dt;\n      fy[i] += fvy[i] * dt;\n      if (abs(fx[i] - 31.5) > 26.5) [fvx[i], fx[i]] = [-0.5 * fvx[i], clamp(fx[i], XL + 2, XR - 2)];\n      const col = round(fx[i]);\n      const s = support(P, col);\n      if (t === 1) {\n        if (fvy[i] > 0 && fy[i] >= fg[i]) {\n          P.landed = min(P.landed + 1, P.C + P.D);\n          P.hopping = max(0, P.hopping - 1);\n          dead = true;\n        }\n      } else if (fy[i] + 2 >= s) {\n        const l = fallAway(P, col, -1);\n        const r = fallAway(P, col, 1);\n        // A light bounce first.\n        if (fvy[i] > 40 && !fb[i]) [fb[i], fy[i], fvy[i], fvx[i]] = [1, s - 2, fvy[i] * -0.32, fvx[i] + (rnd() - 0.5) * 20];\n        else if (l > 3 || r > 3) [ft[i], fx[i], fvx[i]] = [4, col, r > l ? 1 : r \u003c l ? -1 : rnd() - 0.5];\n        else dead = place(P, col, s, fs[i]);\n      }\n    }\n    if (dead) {\n      const j = --P.nF;\n      for (const A of P.fl) A[i] = A[j];\n    } else i++;\n  }\n  P.flash = P.flash.filter((f) => (f[2] -= dt) > 0);\n}\n\n// The scoop digs in where the heap stands highest, from the nearer side.\nfunction startScoop(P) {\n  let best = XL + 10;\n  for (let c = XL + 10; c \u003c= XR - 10; c++) if (P.surf[c] \u003c P.surf[best]) best = c;\n  if (P.surf[best] > FLOOR - 8) return false;\n  Object.assign(P, { sc: 0, scSide: best >= 32 ? 1 : -1, scX: best, scY: min(FLOOR - 3, P.surf[best] + 8), got: [] });\n  return true;\n}\n\n// It lifts what lies over its blade, and the puffs it undercut fall again.\nfunction capture(P) {\n  const keep = [];\n  for (let i = 0; i \u003c P.nH; i++) {\n    const dx = P.hx[i] - P.scX;\n    const dy = P.hy[i] - P.scY;\n    if (abs(dx) \u003c= 9 && dy \u003c= 1 && dy >= -20 && P.got.length \u003c 60) P.got.push([dx, -2 - max(0, -2 - dy) * 0.45, P.hs[i]]);\n    else keep.push([P.hx[i], P.hy[i], P.hs[i]]);\n  }\n  P.scGot = true;\n  keep.sort((p, q) => q[1] - p[1]);\n  P.surf.fill(FLOOR - 1);\n  P.nH = 0;\n  for (const [x, y, s] of keep) {\n    const top = support(P, x);\n    if (top - 2 - y > 3) spawn(P, 0, x, y, 0, 0, 0, s);\n    else place(P, x, top, s);\n  }\n}\n\nfunction tick(P, dt) {\n  P.t += dt;\n  advance(P, dt * P.heat);\n  turn(P);\n  moveParticles(P, dt);\n  const high = rise(P) - P.target;\n  if (P.sc \u003c 0 && high > 5) P.scNext = min(P.scNext, P.t + 1);\n  if (P.sc \u003c 0 && P.t >= P.scNext && !startScoop(P)) P.scNext = P.t + 2;\n  if (P.sc >= 0) {\n    P.sc += dt;\n    if (!P.scGot && P.sc >= SCOOP_T * 0.36) capture(P);\n    if (P.sc >= SCOOP_T) {\n      P.sc = -1;\n      P.scGot = false;\n      P.scNext = P.t + (high > 0 ? 1 + rnd() * 1.5 : 6 + rnd() * 4);\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), light: F(N).fill(0.8), surf: F(W), hx: F(MAXH), hy: F(MAXH), hs: new Uint8Array(MAXH), lc: F(3), col: F(6) });\n  P.fl = [\"ft\", \"fx\", \"fy\", \"fvx\", \"fvy\", \"fg\", \"fa\", \"fs\", \"fb\"].map((k, i) => (P[k] = i === 0 || i > 6 ? new Uint8Array(MAXF) : F(MAXF)));\n  makeSprites(P);\n  paintCart(P);\n  Object.assign(P, { t: 0, started: false, batch: -1, phase: POP, pt: 0, phi: 0, cph: 1, sph: 0, popped: 0, landed: 0, hopping: 0, kernels: 0 });\n  Object.assign(P, { oil: 1, rate: 0, pourAcc: 0, nH: 0, nF: 0, flash: [], got: [], sc: -1, scGot: false, scNext: 1e9, lamp: 0, heat: 2, target: 23 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = min(max(dt, 0), 0.1);\n  P.lamp = clamp(k[0], 0, 1);\n  P.heat = clamp(k[1], 0.2, 3);\n  P.target = 22 + 22 * clamp(k[3], 0, 1);\n  if (!P.started) {\n    // The heap left by earlier batches, the same for every kettle size.\n    P.surf.fill(FLOOR - 1);\n    for (let i = 0; i \u003c 300 && rise(P) \u003c P.target - 2; i++) {\n      const g = (rnd() + rnd() + rnd() - 1.5) * 2;\n      dropInstant(P, clamp(round(34 + g * 12), XL + 2, XR - 2), floor(rnd() * NS));\n    }\n  }\n  const batch = round(clamp(k[2], 6, 16) * 2) / 2;\n  if (batch !== P.batch) resize(P, batch);\n  if (!P.started) {\n    P.started = true;\n    P.kernels = P.total + 3;\n    // Open 3.5 s into popping, at the kettle's own heat.\n    for (let i = 0; i \u003c 105; i++) tick(P, 1 / 30);\n    P.scNext = P.t + 2;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.sc \u003c 0) startScoop(P);\n  tick(P, dt);\n}\n\nfunction put(P, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  P.buf.set([r, g, b], (y * W + x) * 3);\n}\n\nfunction stamp(P, x, y, s, k) {\n  const xi = round(x) - 2;\n  const yi = round(y) - 2;\n  for (let j = 0; j \u003c 25; j++) {\n    const v = P.spr[s * 25 + j];\n    const px = xi + (j % 5);\n    const py = yi + ((j / 5) | 0);\n    if (v === 0 || px \u003c XL || px > XR || py \u003c 0 || py >= H) continue;\n    const p = py * W + px;\n    const l = (0.95 + 0.25 * P.light[p]) * k * (v \u003c 0 ? 1 : v);\n    const c = v \u003c 0 ? 3 : 0;\n    for (let i = 0; i \u003c 3; i++) P.buf[p * 3 + i] = P.col[c + i] * l;\n  }\n}\n\nfunction line(P, x0, y0, x1, y1, v) {\n  const n = Math.ceil(max(abs(x1 - x0), abs(y1 - y0)) * 1.5) + 1;\n  for (let i = 0; i \u003c= n; i++) {\n    const x = round(x0 + ((x1 - x0) * i) / n);\n    const y = round(y0 + ((y1 - y0) * i) / n);\n    if (x \u003c XL || x > XR || y \u003c TOPC || y > FLOOR + 1) continue;\n    const l = (0.5 + 0.5 * P.light[y * W + x]) * v;\n    put(P, x, y, 210 * l, 212 * l, 222 * l);\n  }\n}\n\n// Inside the glass: the back wall in the lamp's light, shaded by how much of\n// the lamp tubes each LED sees past the kettle's bottom. Then the deck.\nfunction cabinet(P) {\n  const { buf, light, lc } = P;\n  let x1 = 99;\n  let x2 = -99;\n  let yo = 0;\n  for (let c = 0; c \u003c 4; c++) {\n    toScreen(P, c & 1 ? P.a : -P.a, c & 2 ? P.d : -1);\n    x1 = min(x1, P.qx);\n    x2 = max(x2, P.qx);\n    yo = max(yo, P.qy - 1);\n  }\n  for (let y = TOPC; y \u003c FLOOR + 2; y++) {\n    const dl = (y - 16) / 55;\n    const fall = 1 / (1 + dl * dl);\n    const k = y > yo ? (y - 16) / (y - yo) : 0;\n    for (let x = XL; x \u003c= XR; x++) {\n      const p = y * W + x;\n      let w;\n      let l = fall;\n      if (y >= FLOOR) w = (y > FLOOR ? 0.55 : x % 3 ? 0.75 : 0.25) * 0.3;\n      else {\n        if (k > 0) {\n          const xa = x + 0.5 + (x1 - x - 0.5) * k;\n          const xb = x + 0.5 + (x2 - x - 0.5) * k;\n          l *= 1 - (0.6 * (max(0, min(xb, LA[1]) - max(xa, LA[0])) + max(0, min(xb, LA[3]) - max(xa, LA[2])))) / 38;\n        }\n        w = 0.04 + 0.36 * l;\n      }\n      for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = lc[i] * w + (y >= FLOOR ? w * 300 : 5);\n      light[p] = l;\n    }\n  }\n  // Lamp tubes, the kettle's motor, the chase of bulbs round the marquee.\n  for (let x = LA[0]; x \u003c= LA[3]; x++) {\n    if (x > LA[1] && x \u003c LA[2]) continue;\n    put(P, x, 15, 58, 58, 64);\n    put(P, x, 16, lc[0] * 1.1, lc[1] * 1.1, lc[2] * 1.1);\n    for (let i = 0; i \u003c 3; i++) buf[(17 * W + x) * 3 + i] += lc[i] * 0.25;\n  }\n  for (let y = 15; y \u003c= 20; y++)\n    for (let x = 28; x \u003c= 35; x++) {\n      const v = y === 15 ? 0.5 : x === 34 ? 1.2 : 0.85;\n      put(P, x, y, 96 * v, 98 * v, 108 * v);\n    }\n  const chase = floor(P.t * 6);\n  for (let i = 0; i \u003c 32; i++) {\n    const on = ((i \u003c 16 ? i : 47 - i) + chase) % 3;\n    put(P, 2 + 4 * (i & 15), i \u003c 16 ? 1 : 10, on ? 255 : 120, on ? 214 : 60, on ? 120 : 30);\n  }\n}\n\nfunction drawHeap(P) {\n  const { surf, buf, light, tex, col } = P;\n  for (let x = XL; x \u003c= XR; x++) {\n    const top = Math.ceil(surf[x] + 2.5);\n    for (let y = max(top, 44); y \u003c FLOOR; y++) {\n      const p = y * W + x;\n      const v = tex[p];\n      const l = (0.95 + 0.25 * light[p]) * (1 - min(0.36, (y - top) * 0.012)) * (v \u003c 0 ? 1 : v);\n      for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = col[(v \u003c 0 ? 3 : 0) + i] * l;\n    }\n  }\n  for (let i = 0; i \u003c P.nH; i++) stamp(P, P.hx[i], P.hy[i], P.hs[i], 1 - min(0.3, max(0, P.hy[i] - surf[P.hx[i]] - 3) * 0.016));\n}\n\nfunction drawScoop(P) {\n  if (P.sc \u003c 0) return;\n  const u = P.sc / SCOOP_T;\n  const side = P.scSide;\n  // In along the heap with the blade down, a turn to lift, then up and out.\n  const e = u \u003c 0.36 ? (1 - u / 0.36) ** 2 : u > 0.5 ? ((u - 0.5) / 0.5) ** 2 : 0;\n  const x = P.scX + side * 72 * e;\n  const y = P.scY - (u \u003c 0.36 ? 26 * e : 2 + 38 * e);\n  const tilt = side * (-0.22 + 0.52 * smooth((u - 0.36) / 0.14));\n  const cb = cos(tilt);\n  const sb = sin(tilt);\n  const tx = (lx, ly) => x + lx * side * cb - ly * sb;\n  const ty = (lx, ly) => y + lx * side * sb + ly * cb;\n  for (const [dx, dy, s] of P.got) stamp(P, tx(dx * side, dy), ty(dx * side, dy), s, 0.95);\n  const seg = (ax, ay, bx, by, v) => line(P, tx(ax, ay), ty(ax, ay), tx(bx, by), ty(bx, by), v);\n  seg(-9, 0, 9, 0, 1);\n  seg(-9, 1, 9, 1, 0.7);\n  seg(-9, 0, -10, -1.5, 1);\n  seg(9, 0, 9.5, -6, 0.85);\n  seg(9.5, -6, 18, -11, 0.75);\n}\n\nfunction drawKettle(P) {\n  const { light, lc, a, d, pv, cph: c, sph: s } = P;\n  const R = a + d + 3;\n  const steel = (x, y, r, k) => {\n    if (x >= XL && x \u003c= XR && y >= TOPC) put(P, x, y, r * k * (0.7 + lc[0] / 850), r * k * (0.7 + lc[1] / 850), (r + 12) * k * (0.7 + lc[2] / 850));\n  };\n  const oilTop = d - 2 - 2.6 * P.oil;\n  const hot = P.phase === HEAT || P.phase === POP ? 0.55 + 0.15 * P.heat : P.phase === POUR ? 0.4 : 0.25;\n  // The hanger from the motor down to the axle the kettle turns on.\n  for (let y = 21; y \u003c= PY; y++) for (let x = 31; x \u003c 33; x++) steel(x, y, x * 50 - 1480, 1);\n  // The back wall and the oil, then the kernels and puffs, then the steel\n  // over them: walls, rolled rim and the heater band below.\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = max(TOPC, PY - R); y \u003c= min(FLOOR - 1, PY + R); y++) {\n      for (let x = max(XL, PX - R); x \u003c= min(XR, PX + R); x++) {\n        const dx = x + 0.5 - PX;\n        const dy = y + 0.5 - PY;\n        const u = c * dx + s * dy;\n        const v = -s * dx + c * dy + pv;\n        const l = 0.55 + 0.45 * light[y * W + x];\n        const hw = halfW(a, d, v);\n        if (pass === 0) {\n          if (v \u003c 0 || v > d - 2 || abs(u) >= hw - 2) continue;\n          const gl = (0.5 + 0.5 * hot) * (0.85 + 0.15 * sin(u * 0.9 + P.t * 7));\n          if (v > oilTop && P.oil > 0.02) put(P, x, y, 240 * gl, 150 * gl, 30 * gl);\n          else steel(x, y, 44, l);\n        } else if (v >= -1.4 && v \u003c= 0.3 && abs(u) \u003c= a + 0.9) steel(x, y, 170, 1.25 * l);\n        else if (v > 0.3 && v \u003c= d && abs(u) \u003c= hw && (abs(u) >= hw - 2 || v >= d - 2)) steel(x, y, 170, (v >= d - 2 ? 0.7 : u > 0 ? 1 : 0.62) * l);\n        else if (v > d && v \u003c= d + 2.5 && abs(u) \u003c= a * 0.38) {\n          // The heater band glows while the kettle is on.\n          const glow = v > d + 1.5 ? hot : 0;\n          put(P, x, y, 50 * l + 200 * glow, 50 * l + 50 * glow, 56 * l + 10 * glow);\n        }\n      }\n    }\n    if (pass === 1) break;\n    const shown = round(P.KN * min(1, P.kernels / (P.total + 3)));\n    const jig = P.phase === HEAT ? 0.3 + P.pt * 0.2 : P.phase === POP ? 0.8 : 0;\n    for (let i = 0; i \u003c shown; i++) {\n      toScreen(P, P.ku[i] + jig * sin(P.t * 23 + i * 2.1), P.kv[i] + jig * 0.5 * sin(P.t * 19 + i));\n      if (P.qx >= XL + 0.5 && P.qx \u003c XR + 0.5) put(P, round(P.qx - 0.5), round(P.qy - 0.5), 246, 190, 60);\n    }\n    for (let i = 0; i \u003c P.landed; i++) {\n      toScreen(P, P.su[i], P.sv[i]);\n      stamp(P, P.qx - 0.5, P.qy - 0.5, P.ss[i], 1);\n    }\n  }\n  // Lids pushed up by the corn; tipped, they fold flat.\n  const cap = P.C + P.D;\n  let th = clamp((P.landed - P.C * 0.75) / max(1, cap - P.C * 0.75), 0, 1) * 0.85 + 0.08 * P.rate * max(0, sin(P.t * 37));\n  if (P.phase === POUR) th = 0.5;\n  for (let side = -1; side \u003c= 1 && P.phi \u003c 0.3; side += 2)\n    for (let t = 0; t \u003c= a - 1; t += 0.5)\n      for (let e = 0; e \u003c 2; e++) {\n        toScreen(P, side * (t * cos(th) + e * 0.9 * sin(th)), -1.8 + e * 0.9 - t * sin(th));\n        steel(floor(P.qx), floor(P.qy), 198, e ? 0.56 : 1);\n      }\n  // The axle boss.\n  for (let i = 0; i \u003c 4; i++) steel(PX - 1 + (i & 1), PY - 1 + (i >> 1), [100, 200, 64, 120][i], 1);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, lc, col } = P;\n  const f = clamp(P.lamp, 0, 1) * 3;\n  const li = min(2, floor(f));\n  for (let c = 0; c \u003c 3; c++) {\n    lc[c] = LAMP[li][c] + (LAMP[li + 1][c] - LAMP[li][c]) * (f - li);\n    // Corn is cream white with a fleck of hull, in the lamp's light.\n    const tl = 0.6 + (0.4 * lc[c]) / 255;\n    col[c] = [252, 246, 228][c] * tl;\n    col[c + 3] = [214, 160, 84][c] * tl;\n  }\n  buf.set(P.cart);\n  cabinet(P);\n  drawHeap(P);\n  drawScoop(P);\n  drawKettle(P);\n  for (let i = 0; i \u003c P.nF; i++) stamp(P, P.fx[i] - 0.5, P.fy[i] - 0.5, P.fs[i], 1.05);\n  for (const [fx, fy, life] of P.flash)\n    for (let n = 0; n \u003c 5; n++) {\n      const a = n \u003c 4 ? 150 + 1050 * life : 255;\n      put(P, round(fx - 0.5) + ((n & 1) * 2 - 1) * (n \u003c 2), round(fy - 0.5) + ((n & 1) * 2 - 1) * (n === 2 || n === 3), a, a, a * 0.92);\n    }\n  // Two streaks of reflection on the front glass.\n  for (let y = 20; y \u003c 92; y++) for (let i = 0; i \u003c 6; i++) buf[(y * W + round(57 - (y - 20) * 0.38) + (i > 2) * 3) * 3 + (i % 3)] += i > 2 ? 12 : 20;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-popcorn","type":"code","name":"popcorn","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Popcorn\n// Family:  kitchen\n// Idea:    A cinema popcorn cart fills the panel: kernels pop in a kettle hung under the heat lamp, the puffs jump, pile up past the rim and spill over, the kettle tips its batch onto the heap on the cabinet floor, and a scoop comes for the heap when it stands too high.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the glass-cabinet popcorn carts of cinema lobbies\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Heat=0.2..3, Batch=6..16, Heap=0..1\n//\n// Knob 1: Lamp. The colour of the heat lamp that lights the cabinet, the steel and the corn, from a gold bulb at 0 through amber to the red of an infrared bulb at 1.\n// Knob 2: Heat. How hot the kettle runs, so how fast it goes: at 2 a batch pops, tips and starts again every 12 s; at 0.2 the kernels pop one by one.\n// Knob 3: Batch. The kettle, from a 6 oz kettle 26 LEDs wide to a 16 oz one 44 wide, and with it how many puffs each batch tips onto the heap.\n// Knob 4: Heap. How high the corn may stand before the scoop comes for it, from 22 rows over the deck to 44, about ten rows under the kettle.\n// Buttons: K1 tap sends the scoop in now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the glass. The heap stands on the warming deck, row FLOOR.\nconst XL = 3;\nconst XR = 60;\nconst TOPC = 15;\nconst FLOOR = 103;\n// The heat lamp: two tubes on row 16, one each side of the kettle's motor.\nconst LA = [6, 25, 38, 57];\n// The kettle turns about this point when it tips.\nconst PX = 32;\nconst PY = 36;\nconst MAXH = 640;\nconst MAXF = 360;\nconst NS = 12;\n// Popcorn is light: it falls slower than a ball and drags in the air.\nconst G = 150;\n// How much a puff raises the heap under each of its five columns.\nconst PROF = [1.2, 0.2, 0, 0.2, 1.2];\n// A batch, in batch seconds: pour, heat, pop, settle, tip, empty, back up.\nconst [POUR, HEAT, POP, REST, TIP, EMPTY] = [0, 1, 2, 3, 4, 5];\nconst DUR = [2, 2.5, 12, 1, 2, 2.5, 2];\nconst TIP_MAX = 1.7;\nconst SCOOP_T = 2.6;\n// Lamp colours from gold to the red of an infrared bulb.\nconst LAMP = [[255, 204, 120], [255, 168, 88], [255, 120, 70], [255, 76, 70]];\nconst { min, max, round, floor, sin, cos, abs } = Math;\nconst rnd = () => Math.random();\n// POPCORN in a 4x5 font, one hex digit a row.\nconst SIGN = [\"E9E88\", \"69996\", \"E9E88\", \"78887\", \"69996\", \"E9EA9\", \"9DB99\"];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n\n// Puffs: three or four lobes pressed together, lit from the top left, with a\n// fleck of hull (-1).\nfunction makeSprites(P) {\n  const spr = (P.spr = new Float32Array(NS * 25));\n  for (let s = 0; s \u003c NS; s++) {\n    for (let count = 0; count \u003c 12; ) {\n      count = 0;\n      const lobes = [[0, 0, 1.4 + rnd() * 0.4]];\n      for (let b = 1; b \u003c 3 + (s & 1); b++) {\n        const ang = rnd() * 7;\n        const dist = 0.9 + rnd() * 0.7;\n        lobes.push([cos(ang) * dist, sin(ang) * dist, 0.9 + rnd() * 0.6]);\n      }\n      for (let j = 0; j \u003c 25; j++) {\n        const x = (j % 5) - 2;\n        const y = ((j / 5) | 0) - 2;\n        const d = lobes.map(([cx, cy, r]) => Math.hypot(x - cx, y - cy) - r).sort((p, q) => p - q);\n        let v = 0;\n        if (d[0] \u003c= 0.2) {\n          v = (0.9 + 0.12 * clamp((-x - y) / 3, -1, 1)) * (d[1] \u003c 0.4 && d[0] > -0.6 ? 0.84 : 1);\n          count++;\n        }\n        spr[s * 25 + j] = v;\n      }\n    }\n    for (let j = 24; j >= 10; j--) {\n      if (spr[s * 25 + j] > 0 && (j * 7 + s * 3) % 4 === 0) {\n        spr[s * 25 + j] = -1;\n        break;\n      }\n    }\n  }\n  // The packed body of the heap, under the loose puffs on its surface.\n  P.tex = new Float32Array(N).fill(0.6);\n  for (let n = 0; n \u003c 1700; n++) {\n    const s = floor(rnd() * NS) * 25;\n    const cx = floor(rnd() * (W + 4)) - 4;\n    const cy = 44 + floor(rnd() * 60);\n    const k = 0.86 + rnd() * 0.14;\n    for (let j = 0; j \u003c 25; j++) {\n      const x = cx + (j % 5);\n      if (spr[s + j] !== 0 && x >= 0 && x \u003c W) P.tex[(cy + ((j / 5) | 0)) * W + x] = spr[s + j] \u003c 0 ? -1 : spr[s + j] * k;\n    }\n  }\n}\n\n// The cart round the glass, painted once: marquee, frame, base and wheels.\nfunction paintCart(P) {\n  const S = (P.cart = new Float32Array(N * 3));\n  const box = (x0, y0, x1, y1, c) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) S.set(c, (y * W + x) * 3);\n  };\n  box(0, 0, 63, 11, [84, 8, 12]);\n  box(0, 1, 63, 10, [134, 14, 20]);\n  for (let i = 0; i \u003c 7; i++)\n    for (let y = 0; y \u003c 5; y++)\n      for (let x = 0; x \u003c 4; x++)\n        if ((parseInt(SIGN[i][y], 16) >> (3 - x)) & 1) {\n          box(16 + i * 5 + x, y + 4, 16 + i * 5 + x, y + 4, [60, 4, 8]);\n          box(15 + i * 5 + x, y + 3, 15 + i * 5 + x, y + 3, [255, 236, 176]);\n        }\n  box(0, 12, 63, 106, [150, 18, 24]);\n  box(0, 13, 63, 13, [176, 30, 34]);\n  box(0, 14, 63, 14, [196, 150, 64]);\n  box(0, 106, 63, 106, [196, 150, 64]);\n  for (const [x, c] of [[0, [84, 8, 12]], [1, [176, 30, 34]], [2, [150, 150, 160]]]) {\n    box(x, 15, x, 106, c);\n    box(63 - x, 15, 63 - x, 106, c);\n  }\n  box(0, 107, 63, 118, [124, 14, 20]);\n  box(0, 119, 63, 119, [60, 6, 10]);\n  for (const x of [5, 34]) {\n    box(x, 109, x + 24, 117, [176, 124, 52]);\n    box(x + 1, 110, x + 23, 116, [140, 16, 23]);\n  }\n  box(27, 113, 27, 113, [240, 200, 110]);\n  box(36, 113, 36, 113, [240, 200, 110]);\n  for (const cx of [13, 51]) {\n    box(cx - 3, 120, cx + 3, 120, [70, 70, 76]);\n    for (let y = 120; y \u003c H; y++)\n      for (let x = cx - 5; x \u003c= cx + 5; x++) {\n        const d = Math.hypot(x + 0.5 - cx, y - 123);\n        if (d \u003c 4.4) box(x, y, x, y, d \u003c 1.6 ? [170, 170, 182] : y \u003c 121 ? [78, 78, 87] : [52, 52, 58]);\n      }\n  }\n}\n\nfunction halfW(a, d, v) {\n  const r = (v - (d - 5.5)) / 6;\n  return r \u003c= 0 ? a : a * Math.sqrt(max(0, 1 - r * r));\n}\n\n// The kettle for a batch size, and the places puffs take in it up to a dome.\nfunction resize(P, batch) {\n  P.batch = batch;\n  const a = (P.a = round(12 + 0.9 * (batch - 6)));\n  const d = (P.d = round(13 + 0.6 * (batch - 6)));\n  P.pv = round(d * 0.3);\n  const su = [];\n  const sv = [];\n  let row = 0;\n  const lay = (v, hw) => {\n    for (let u = -hw + (row++ & 1 ? 1.7 : 0); u \u003c= hw + 0.01; u += 3.4) {\n      su.push(u + (rnd() - 0.5) * 0.8);\n      sv.push(v + (rnd() - 0.5) * 0.6);\n    }\n  };\n  for (let v = d - 4.6; v > 1.2; v -= 2.9) lay(v, halfW(a, d, v + 2) - 4);\n  P.C = su.length;\n  const dh = (a - 2) * 0.45;\n  for (let v = -0.6; v > -dh + 0.5; v -= 2.9) lay(v, (a - 3) * Math.sqrt(max(0, 1 - ((-v + 1.5) / dh) ** 2)) - 1);\n  P.D = su.length - P.C;\n  P.su = Float32Array.from(su);\n  P.sv = Float32Array.from(sv);\n  P.ss = Uint8Array.from(su, () => floor(rnd() * NS));\n  // A third again as many pops as the kettle holds: those go over the rim.\n  P.total = P.C + P.D + round(0.35 * P.C);\n  P.KN = round((a - 3) * 1.5);\n  P.ku = Float32Array.from({ length: P.KN }, () => (rnd() * 2 - 1) * (a - 4));\n  P.kv = Float32Array.from({ length: P.KN }, () => d - 4 + rnd() * 1.4);\n  P.landed = min(P.landed, P.C + P.D);\n  P.popped = min(P.popped, P.total);\n}\n\nconst turn = (P) => ((P.cph = cos(P.phi)), (P.sph = sin(P.phi)), P.phi);\n\n// Kettle coordinates (u across, v down from the rim) to the panel, in P.qx, P.qy.\nfunction toScreen(P, u, v) {\n  const w = v - P.pv;\n  P.qx = PX + P.cph * u - P.sph * w;\n  P.qy = PY + P.sph * u + P.cph * w;\n}\n\n// Types: 0 falling to the heap, 1 hopping in the kettle, 4 rolling down the heap.\nfunction spawn(P, type, x, y, vx, vy, g, s) {\n  if (P.nF >= MAXF) return;\n  const v = [type, x, y, vx, vy, g, rnd() * 0.1, s, 0];\n  const i = P.nF++;\n  P.fl.forEach((A, n) => (A[i] = v[n]));\n}\n\n// A kernel bursting: a white star for a tenth of a second.\nfunction flash(P) {\n  if (P.flash.length \u003c 48) P.flash.push([P.qx, P.qy, 0.1]);\n}\n\n// The row a puff dropped at col rests on.\nfunction support(P, col) {\n  const s = P.surf;\n  return min(s[max(XL, col - 1)], s[col], s[min(XR, col + 1)]);\n}\n\n// How far the heap falls away three columns toward dir.\nconst fallAway = (P, col, dir) => P.surf[clamp(col + 3 * dir, XL, XR)] - support(P, col);\n\nfunction place(P, col, s, spr) {\n  if (P.nH >= MAXH) return true;\n  const n = P.nH++;\n  const y = (P.hy[n] = s - 2);\n  P.hx[n] = col;\n  P.hs[n] = spr;\n  for (let c = max(XL, col - 2); c \u003c= min(XR, col + 2); c++) P.surf[c] = min(P.surf[c], y - 2 + PROF[c - col + 2]);\n  return true;\n}\n\n// A puff rolls down any side steeper than a row a column.\nfunction dropInstant(P, x, spr) {\n  for (let n = 0; n \u003c 60; n++) {\n    const l = fallAway(P, x, -1);\n    const r = fallAway(P, x, 1);\n    if (l \u003c= 3 && r \u003c= 3) break;\n    x = clamp(x + (r > l ? 1 : r \u003c l ? -1 : rnd() \u003c 0.5 ? -1 : 1), XL + 2, XR - 2);\n  }\n  place(P, x, support(P, x), spr);\n}\n\nconst rise = (P) => FLOOR - 1 - min(...P.surf.subarray(XL, XR + 1));\n\n// A kernel bursts. Until the kettle is full the puff jumps and lands back on\n// the pile; once it is full every pop throws one over the rim.\nfunction pop(P) {\n  P.popped++;\n  if (P.kernels > 0) P.kernels--;\n  const cap = P.C + P.D;\n  const next = P.landed + P.hopping;\n  const fill = next / cap;\n  if (next \u003c cap && !(fill > 0.55 && rnd() \u003c 0.12)) {\n    toScreen(P, P.su[next], P.sv[next]);\n    flash(P);\n    spawn(P, 1, P.qx, P.qy - 1, (rnd() - 0.5) * 10, -(18 + rnd() * 32), P.qy, P.ss[next]);\n    P.hopping++;\n  } else {\n    const side = rnd() \u003c 0.5 ? -1 : 1;\n    toScreen(P, side * P.a * (0.45 + rnd() * 0.4), min(P.sv[min(next, cap - 1)], 1) - 1.5);\n    flash(P);\n    spawn(P, 0, P.qx, P.qy, side * (12 + rnd() * 14), -(14 + rnd() * 24), 0, floor(rnd() * NS));\n  }\n}\n\nfunction advance(P, h) {\n  P.pt += h;\n  const ph = P.phase;\n  P.rate = 0;\n  if (ph === POUR) {\n    const f = min(1, P.pt / (DUR[POUR] * 0.85));\n    P.kernels = round((P.total + 3) * f);\n    P.oil = f;\n  } else if (ph === POP) {\n    const x = min(1, P.pt / DUR[POP]);\n    P.rate = 6 * x * (1 - x);\n    while (P.popped \u003c floor(P.total * smooth(x))) pop(P);\n    P.oil = 1 - 0.65 * x;\n  } else if (ph === TIP || ph === EMPTY) {\n    P.phi = ph === TIP ? TIP_MAX * smooth(P.pt / DUR[TIP]) : TIP_MAX + 0.07 * sin(P.pt * 25) * (1 - P.pt / DUR[EMPTY]);\n    if (turn(P) > 0.85) {\n      // Empty half a second before the shaking stops, top puff first.\n      const left = (ph === TIP ? DUR[TIP] - P.pt + DUR[EMPTY] : DUR[EMPTY] - P.pt) - 0.5;\n      P.pourAcc += (P.landed * h) / max(h, left);\n      for (; P.pourAcc >= 1 && P.landed > 0; P.pourAcc--) {\n        const i = --P.landed;\n        toScreen(P, P.su[i], P.sv[i]);\n        spawn(P, 0, P.qx, P.qy, P.sph * (8 + rnd() * 12) + 4, -P.cph * (8 + rnd() * 10) + rnd() * 4, 0, P.ss[i]);\n      }\n    }\n  } else if (ph > EMPTY) P.phi = TIP_MAX * (1 - smooth(P.pt / DUR[ph]));\n  if (P.pt >= DUR[ph]) {\n    P.pt -= DUR[ph];\n    P.phase = (ph + 1) % 7;\n    if (P.phase === POUR) Object.assign(P, { popped: 0, landed: 0, hopping: 0, kernels: 0, oil: 0, phi: 0 });\n    if (P.phase === HEAT) P.oil = 1;\n    if (P.phase === TIP) tipNow(P);\n    if (ph === EMPTY) P.landed = 0;\n  }\n}\n\n// Puffs still in the air when it tips fall clear of it.\nfunction tipNow(P) {\n  for (let i = 0; i \u003c P.nF; i++) if (P.ft[i] === 1) P.ft[i] = 0;\n  P.hopping = P.pourAcc = 0;\n}\n\nfunction moveParticles(P, dt) {\n  const { ft, fx, fy, fvx, fvy, fg, fa, fs, fb } = P;\n  const drag = Math.exp(-0.8 * dt);\n  for (let i = 0; i \u003c P.nF; ) {\n    const t = ft[i];\n    let dead = false;\n    // A puff tumbles as it falls or rolls.\n    fa[i] += dt;\n    if (fa[i] > 0.1) [fa[i], fs[i]] = [0, (fs[i] + 1 + floor(rnd() * 3)) % NS];\n    if (t === 4) {\n      const dir = fvx[i] > 0 ? 1 : -1;\n      fx[i] += dir * 26 * dt;\n      const col = clamp(round(fx[i]), XL + 2, XR - 2);\n      const s = support(P, col);\n      fy[i] = s - 2;\n      if (col !== round(fx[i]) || fallAway(P, col, dir) \u003c= 2.5) dead = place(P, col, s, fs[i]);\n    } else {\n      fvy[i] = (fvy[i] + G * dt) * drag;\n      fvx[i] *= drag;\n      fx[i] += fvx[i] * dt;\n      fy[i] += fvy[i] * dt;\n      if (abs(fx[i] - 31.5) > 26.5) [fvx[i], fx[i]] = [-0.5 * fvx[i], clamp(fx[i], XL + 2, XR - 2)];\n      const col = round(fx[i]);\n      const s = support(P, col);\n      if (t === 1) {\n        if (fvy[i] > 0 && fy[i] >= fg[i]) {\n          P.landed = min(P.landed + 1, P.C + P.D);\n          P.hopping = max(0, P.hopping - 1);\n          dead = true;\n        }\n      } else if (fy[i] + 2 >= s) {\n        const l = fallAway(P, col, -1);\n        const r = fallAway(P, col, 1);\n        // A light bounce first.\n        if (fvy[i] > 40 && !fb[i]) [fb[i], fy[i], fvy[i], fvx[i]] = [1, s - 2, fvy[i] * -0.32, fvx[i] + (rnd() - 0.5) * 20];\n        else if (l > 3 || r > 3) [ft[i], fx[i], fvx[i]] = [4, col, r > l ? 1 : r \u003c l ? -1 : rnd() - 0.5];\n        else dead = place(P, col, s, fs[i]);\n      }\n    }\n    if (dead) {\n      const j = --P.nF;\n      for (const A of P.fl) A[i] = A[j];\n    } else i++;\n  }\n  P.flash = P.flash.filter((f) => (f[2] -= dt) > 0);\n}\n\n// The scoop digs in where the heap stands highest, from the nearer side.\nfunction startScoop(P) {\n  let best = XL + 10;\n  for (let c = XL + 10; c \u003c= XR - 10; c++) if (P.surf[c] \u003c P.surf[best]) best = c;\n  if (P.surf[best] > FLOOR - 8) return false;\n  Object.assign(P, { sc: 0, scSide: best >= 32 ? 1 : -1, scX: best, scY: min(FLOOR - 3, P.surf[best] + 8), got: [] });\n  return true;\n}\n\n// It lifts what lies over its blade, and the puffs it undercut fall again.\nfunction capture(P) {\n  const keep = [];\n  for (let i = 0; i \u003c P.nH; i++) {\n    const dx = P.hx[i] - P.scX;\n    const dy = P.hy[i] - P.scY;\n    if (abs(dx) \u003c= 9 && dy \u003c= 1 && dy >= -20 && P.got.length \u003c 60) P.got.push([dx, -2 - max(0, -2 - dy) * 0.45, P.hs[i]]);\n    else keep.push([P.hx[i], P.hy[i], P.hs[i]]);\n  }\n  P.scGot = true;\n  keep.sort((p, q) => q[1] - p[1]);\n  P.surf.fill(FLOOR - 1);\n  P.nH = 0;\n  for (const [x, y, s] of keep) {\n    const top = support(P, x);\n    if (top - 2 - y > 3) spawn(P, 0, x, y, 0, 0, 0, s);\n    else place(P, x, top, s);\n  }\n}\n\nfunction tick(P, dt) {\n  P.t += dt;\n  advance(P, dt * P.heat);\n  turn(P);\n  moveParticles(P, dt);\n  const high = rise(P) - P.target;\n  if (P.sc \u003c 0 && high > 5) P.scNext = min(P.scNext, P.t + 1);\n  if (P.sc \u003c 0 && P.t >= P.scNext && !startScoop(P)) P.scNext = P.t + 2;\n  if (P.sc >= 0) {\n    P.sc += dt;\n    if (!P.scGot && P.sc >= SCOOP_T * 0.36) capture(P);\n    if (P.sc >= SCOOP_T) {\n      P.sc = -1;\n      P.scGot = false;\n      P.scNext = P.t + (high > 0 ? 1 + rnd() * 1.5 : 6 + rnd() * 4);\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), light: F(N).fill(0.8), surf: F(W), hx: F(MAXH), hy: F(MAXH), hs: new Uint8Array(MAXH), lc: F(3), col: F(6) });\n  P.fl = [\"ft\", \"fx\", \"fy\", \"fvx\", \"fvy\", \"fg\", \"fa\", \"fs\", \"fb\"].map((k, i) => (P[k] = i === 0 || i > 6 ? new Uint8Array(MAXF) : F(MAXF)));\n  makeSprites(P);\n  paintCart(P);\n  Object.assign(P, { t: 0, started: false, batch: -1, phase: POP, pt: 0, phi: 0, cph: 1, sph: 0, popped: 0, landed: 0, hopping: 0, kernels: 0 });\n  Object.assign(P, { oil: 1, rate: 0, pourAcc: 0, nH: 0, nF: 0, flash: [], got: [], sc: -1, scGot: false, scNext: 1e9, lamp: 0, heat: 2, target: 23 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = min(max(dt, 0), 0.1);\n  P.lamp = clamp(k[0], 0, 1);\n  P.heat = clamp(k[1], 0.2, 3);\n  P.target = 22 + 22 * clamp(k[3], 0, 1);\n  if (!P.started) {\n    // The heap left by earlier batches, the same for every kettle size.\n    P.surf.fill(FLOOR - 1);\n    for (let i = 0; i \u003c 300 && rise(P) \u003c P.target - 2; i++) {\n      const g = (rnd() + rnd() + rnd() - 1.5) * 2;\n      dropInstant(P, clamp(round(34 + g * 12), XL + 2, XR - 2), floor(rnd() * NS));\n    }\n  }\n  const batch = round(clamp(k[2], 6, 16) * 2) / 2;\n  if (batch !== P.batch) resize(P, batch);\n  if (!P.started) {\n    P.started = true;\n    P.kernels = P.total + 3;\n    // Open 3.5 s into popping, at the kettle's own heat.\n    for (let i = 0; i \u003c 105; i++) tick(P, 1 / 30);\n    P.scNext = P.t + 2;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.sc \u003c 0) startScoop(P);\n  tick(P, dt);\n}\n\nfunction put(P, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  P.buf.set([r, g, b], (y * W + x) * 3);\n}\n\nfunction stamp(P, x, y, s, k) {\n  const xi = round(x) - 2;\n  const yi = round(y) - 2;\n  for (let j = 0; j \u003c 25; j++) {\n    const v = P.spr[s * 25 + j];\n    const px = xi + (j % 5);\n    const py = yi + ((j / 5) | 0);\n    if (v === 0 || px \u003c XL || px > XR || py \u003c 0 || py >= H) continue;\n    const p = py * W + px;\n    const l = (0.95 + 0.25 * P.light[p]) * k * (v \u003c 0 ? 1 : v);\n    const c = v \u003c 0 ? 3 : 0;\n    for (let i = 0; i \u003c 3; i++) P.buf[p * 3 + i] = P.col[c + i] * l;\n  }\n}\n\nfunction line(P, x0, y0, x1, y1, v) {\n  const n = Math.ceil(max(abs(x1 - x0), abs(y1 - y0)) * 1.5) + 1;\n  for (let i = 0; i \u003c= n; i++) {\n    const x = round(x0 + ((x1 - x0) * i) / n);\n    const y = round(y0 + ((y1 - y0) * i) / n);\n    if (x \u003c XL || x > XR || y \u003c TOPC || y > FLOOR + 1) continue;\n    const l = (0.5 + 0.5 * P.light[y * W + x]) * v;\n    put(P, x, y, 210 * l, 212 * l, 222 * l);\n  }\n}\n\n// Inside the glass: the back wall in the lamp's light, shaded by how much of\n// the lamp tubes each LED sees past the kettle's bottom. Then the deck.\nfunction cabinet(P) {\n  const { buf, light, lc } = P;\n  let x1 = 99;\n  let x2 = -99;\n  let yo = 0;\n  for (let c = 0; c \u003c 4; c++) {\n    toScreen(P, c & 1 ? P.a : -P.a, c & 2 ? P.d : -1);\n    x1 = min(x1, P.qx);\n    x2 = max(x2, P.qx);\n    yo = max(yo, P.qy - 1);\n  }\n  for (let y = TOPC; y \u003c FLOOR + 2; y++) {\n    const dl = (y - 16) / 55;\n    const fall = 1 / (1 + dl * dl);\n    const k = y > yo ? (y - 16) / (y - yo) : 0;\n    for (let x = XL; x \u003c= XR; x++) {\n      const p = y * W + x;\n      let w;\n      let l = fall;\n      if (y >= FLOOR) w = (y > FLOOR ? 0.55 : x % 3 ? 0.75 : 0.25) * 0.3;\n      else {\n        if (k > 0) {\n          const xa = x + 0.5 + (x1 - x - 0.5) * k;\n          const xb = x + 0.5 + (x2 - x - 0.5) * k;\n          l *= 1 - (0.6 * (max(0, min(xb, LA[1]) - max(xa, LA[0])) + max(0, min(xb, LA[3]) - max(xa, LA[2])))) / 38;\n        }\n        w = 0.04 + 0.36 * l;\n      }\n      for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = lc[i] * w + (y >= FLOOR ? w * 300 : 5);\n      light[p] = l;\n    }\n  }\n  // Lamp tubes, the kettle's motor, the chase of bulbs round the marquee.\n  for (let x = LA[0]; x \u003c= LA[3]; x++) {\n    if (x > LA[1] && x \u003c LA[2]) continue;\n    put(P, x, 15, 58, 58, 64);\n    put(P, x, 16, lc[0] * 1.1, lc[1] * 1.1, lc[2] * 1.1);\n    for (let i = 0; i \u003c 3; i++) buf[(17 * W + x) * 3 + i] += lc[i] * 0.25;\n  }\n  for (let y = 15; y \u003c= 20; y++)\n    for (let x = 28; x \u003c= 35; x++) {\n      const v = y === 15 ? 0.5 : x === 34 ? 1.2 : 0.85;\n      put(P, x, y, 96 * v, 98 * v, 108 * v);\n    }\n  const chase = floor(P.t * 6);\n  for (let i = 0; i \u003c 32; i++) {\n    const on = ((i \u003c 16 ? i : 47 - i) + chase) % 3;\n    put(P, 2 + 4 * (i & 15), i \u003c 16 ? 1 : 10, on ? 255 : 120, on ? 214 : 60, on ? 120 : 30);\n  }\n}\n\nfunction drawHeap(P) {\n  const { surf, buf, light, tex, col } = P;\n  for (let x = XL; x \u003c= XR; x++) {\n    const top = Math.ceil(surf[x] + 2.5);\n    for (let y = max(top, 44); y \u003c FLOOR; y++) {\n      const p = y * W + x;\n      const v = tex[p];\n      const l = (0.95 + 0.25 * light[p]) * (1 - min(0.36, (y - top) * 0.012)) * (v \u003c 0 ? 1 : v);\n      for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = col[(v \u003c 0 ? 3 : 0) + i] * l;\n    }\n  }\n  for (let i = 0; i \u003c P.nH; i++) stamp(P, P.hx[i], P.hy[i], P.hs[i], 1 - min(0.3, max(0, P.hy[i] - surf[P.hx[i]] - 3) * 0.016));\n}\n\nfunction drawScoop(P) {\n  if (P.sc \u003c 0) return;\n  const u = P.sc / SCOOP_T;\n  const side = P.scSide;\n  // In along the heap with the blade down, a turn to lift, then up and out.\n  const e = u \u003c 0.36 ? (1 - u / 0.36) ** 2 : u > 0.5 ? ((u - 0.5) / 0.5) ** 2 : 0;\n  const x = P.scX + side * 72 * e;\n  const y = P.scY - (u \u003c 0.36 ? 26 * e : 2 + 38 * e);\n  const tilt = side * (-0.22 + 0.52 * smooth((u - 0.36) / 0.14));\n  const cb = cos(tilt);\n  const sb = sin(tilt);\n  const tx = (lx, ly) => x + lx * side * cb - ly * sb;\n  const ty = (lx, ly) => y + lx * side * sb + ly * cb;\n  for (const [dx, dy, s] of P.got) stamp(P, tx(dx * side, dy), ty(dx * side, dy), s, 0.95);\n  const seg = (ax, ay, bx, by, v) => line(P, tx(ax, ay), ty(ax, ay), tx(bx, by), ty(bx, by), v);\n  seg(-9, 0, 9, 0, 1);\n  seg(-9, 1, 9, 1, 0.7);\n  seg(-9, 0, -10, -1.5, 1);\n  seg(9, 0, 9.5, -6, 0.85);\n  seg(9.5, -6, 18, -11, 0.75);\n}\n\nfunction drawKettle(P) {\n  const { light, lc, a, d, pv, cph: c, sph: s } = P;\n  const R = a + d + 3;\n  const steel = (x, y, r, k) => {\n    if (x >= XL && x \u003c= XR && y >= TOPC) put(P, x, y, r * k * (0.7 + lc[0] / 850), r * k * (0.7 + lc[1] / 850), (r + 12) * k * (0.7 + lc[2] / 850));\n  };\n  const oilTop = d - 2 - 2.6 * P.oil;\n  const hot = P.phase === HEAT || P.phase === POP ? 0.55 + 0.15 * P.heat : P.phase === POUR ? 0.4 : 0.25;\n  // The hanger from the motor down to the axle the kettle turns on.\n  for (let y = 21; y \u003c= PY; y++) for (let x = 31; x \u003c 33; x++) steel(x, y, x * 50 - 1480, 1);\n  // The back wall and the oil, then the kernels and puffs, then the steel\n  // over them: walls, rolled rim and the heater band below.\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = max(TOPC, PY - R); y \u003c= min(FLOOR - 1, PY + R); y++) {\n      for (let x = max(XL, PX - R); x \u003c= min(XR, PX + R); x++) {\n        const dx = x + 0.5 - PX;\n        const dy = y + 0.5 - PY;\n        const u = c * dx + s * dy;\n        const v = -s * dx + c * dy + pv;\n        const l = 0.55 + 0.45 * light[y * W + x];\n        const hw = halfW(a, d, v);\n        if (pass === 0) {\n          if (v \u003c 0 || v > d - 2 || abs(u) >= hw - 2) continue;\n          const gl = (0.5 + 0.5 * hot) * (0.85 + 0.15 * sin(u * 0.9 + P.t * 7));\n          if (v > oilTop && P.oil > 0.02) put(P, x, y, 240 * gl, 150 * gl, 30 * gl);\n          else steel(x, y, 44, l);\n        } else if (v >= -1.4 && v \u003c= 0.3 && abs(u) \u003c= a + 0.9) steel(x, y, 170, 1.25 * l);\n        else if (v > 0.3 && v \u003c= d && abs(u) \u003c= hw && (abs(u) >= hw - 2 || v >= d - 2)) steel(x, y, 170, (v >= d - 2 ? 0.7 : u > 0 ? 1 : 0.62) * l);\n        else if (v > d && v \u003c= d + 2.5 && abs(u) \u003c= a * 0.38) {\n          // The heater band glows while the kettle is on.\n          const glow = v > d + 1.5 ? hot : 0;\n          put(P, x, y, 50 * l + 200 * glow, 50 * l + 50 * glow, 56 * l + 10 * glow);\n        }\n      }\n    }\n    if (pass === 1) break;\n    const shown = round(P.KN * min(1, P.kernels / (P.total + 3)));\n    const jig = P.phase === HEAT ? 0.3 + P.pt * 0.2 : P.phase === POP ? 0.8 : 0;\n    for (let i = 0; i \u003c shown; i++) {\n      toScreen(P, P.ku[i] + jig * sin(P.t * 23 + i * 2.1), P.kv[i] + jig * 0.5 * sin(P.t * 19 + i));\n      if (P.qx >= XL + 0.5 && P.qx \u003c XR + 0.5) put(P, round(P.qx - 0.5), round(P.qy - 0.5), 246, 190, 60);\n    }\n    for (let i = 0; i \u003c P.landed; i++) {\n      toScreen(P, P.su[i], P.sv[i]);\n      stamp(P, P.qx - 0.5, P.qy - 0.5, P.ss[i], 1);\n    }\n  }\n  // Lids pushed up by the corn; tipped, they fold flat.\n  const cap = P.C + P.D;\n  let th = clamp((P.landed - P.C * 0.75) / max(1, cap - P.C * 0.75), 0, 1) * 0.85 + 0.08 * P.rate * max(0, sin(P.t * 37));\n  if (P.phase === POUR) th = 0.5;\n  for (let side = -1; side \u003c= 1 && P.phi \u003c 0.3; side += 2)\n    for (let t = 0; t \u003c= a - 1; t += 0.5)\n      for (let e = 0; e \u003c 2; e++) {\n        toScreen(P, side * (t * cos(th) + e * 0.9 * sin(th)), -1.8 + e * 0.9 - t * sin(th));\n        steel(floor(P.qx), floor(P.qy), 198, e ? 0.56 : 1);\n      }\n  // The axle boss.\n  for (let i = 0; i \u003c 4; i++) steel(PX - 1 + (i & 1), PY - 1 + (i >> 1), [100, 200, 64, 120][i], 1);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, lc, col } = P;\n  const f = clamp(P.lamp, 0, 1) * 3;\n  const li = min(2, floor(f));\n  for (let c = 0; c \u003c 3; c++) {\n    lc[c] = LAMP[li][c] + (LAMP[li + 1][c] - LAMP[li][c]) * (f - li);\n    // Corn is cream white with a fleck of hull, in the lamp's light.\n    const tl = 0.6 + (0.4 * lc[c]) / 255;\n    col[c] = [252, 246, 228][c] * tl;\n    col[c + 3] = [214, 160, 84][c] * tl;\n  }\n  buf.set(P.cart);\n  cabinet(P);\n  drawHeap(P);\n  drawScoop(P);\n  drawKettle(P);\n  for (let i = 0; i \u003c P.nF; i++) stamp(P, P.fx[i] - 0.5, P.fy[i] - 0.5, P.fs[i], 1.05);\n  for (const [fx, fy, life] of P.flash)\n    for (let n = 0; n \u003c 5; n++) {\n      const a = n \u003c 4 ? 150 + 1050 * life : 255;\n      put(P, round(fx - 0.5) + ((n & 1) * 2 - 1) * (n \u003c 2), round(fy - 0.5) + ((n & 1) * 2 - 1) * (n === 2 || n === 3), a, a, a * 0.92);\n    }\n  // Two streaks of reflection on the front glass.\n  for (let y = 20; y \u003c 92; y++) for (let i = 0; i \u003c 6; i++) buf[(y * W + round(57 - (y - 20) * 0.38) + (i > 2) * 3) * 3 + (i % 3)] += i > 2 ? 12 : 20;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Heat=0.2..3, Batch=6..16, Heap=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"The colour of the heat lamp that lights the cabinet, the steel and the corn, from a gold bulb at 0 through amber to the red of an infrared bulb at 1."},{"name":"Heat","min":0.2,"max":3,"about":"How hot the kettle runs, so how fast it goes: at 2 a batch pops, tips and starts again every 12 s; at 0.2 the kernels pop one by one."},{"name":"Batch","min":6,"max":16,"about":"The kettle, from a 6 oz kettle 26 LEDs wide to a 16 oz one 44 wide, and with it how many puffs each batch tips onto the heap."},{"name":"Heap","min":0,"max":1,"about":"How high the corn may stand before the scoop comes for it, from 22 rows over the deck to 44, about ten rows under the kettle."}],"start":[0,2,6,0.06],"measures":{"motion":0.2278,"detail":0.0649,"edges":0.5093,"complexity":0.7081,"coverage":0.9514,"colour":0.2616,"drift":0.0636},"knobResponse":[0.0358,0.0496,0.0725,0.0766]},{"slug":"proscenium","title":"Proscenium","family":"stage","round":23,"note":"금박 프로시니엄 아래 붉은 벨벳 막이 플라이로 올라가면 달빛 바다나 숲, 밤 도시, 눈 내리는 마을을 그린 배경막이 드러나고, 브리지 조명의 빛줄기가 연무를 갈라요. 발레리나가 팔로 스폿을 받으며 도약해 무대를 건너고, 막이 내리면 막 앞에서 인사해요. 맨 아래에는 실크해트를 쓴 사람이 섞인 앞줄 관객의 뒤통수가 있어요.","idea":"A theatre from the stalls: under a gilded arch the red house curtain rises on a painted backcloth, lamps above cut shafts through the haze, a dancer crosses in a follow spot, and the curtain falls for her bow before the next scene.","buttons":"K1 tap brings the curtain in now, or takes it out again if it is in.","code":"// ===== Patternflow pattern =====\n// Title:   Proscenium\n// Family:  stage\n// Idea:    A theatre from the stalls: under a gilded arch the red house curtain rises on a painted backcloth, lamps above cut shafts through the haze, a dancer crosses in a follow spot, and the curtain falls for her bow before the next scene.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the proscenium stage of a nineteenth-century opera house\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Gel=0..1, Speed=0.2..3, Scene=0..3, Haze=0..1\n//\n// Knob 1: Gel. The colour of the stage wash and the beams: steel blue at 0, turning through violet and rose to amber in the middle, then through green back to blue.\n// Knob 2: Speed. How fast the show runs: at 2 the curtain takes 2.8 s to rise and a whole round of rise, dance, fall and bow is 12 s; at 0.2 it all runs ten times slower.\n// Knob 3: Scene. The backdrop the curtain rises on: a moonlit sea, a forest, a night city or a snowfall, the others following in that order. Turning it brings the curtain in and out again on the new one.\n// Knob 4: Haze. How much haze hangs in the air. At 0 the beams are thin shafts; turned up they swell and the whole stage glows in the gel.\n// Buttons: K1 tap brings the curtain in now, or takes it out again if it is in.\n\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the arch: columns XL..XR, rows from TOP down to the stage lip.\nconst [XL, XR, TOP, TRUSS, SKY, LENS, BACK, CURT, LIP] = [4, 59, 8, 11, 15, 17, 78, 96, 100];\n// The phases of a round, in seconds at Speed 2.\nconst [TRISE, TSHOW, TFALL, TBOW, THOLD] = [2.8, 4, 1.8, 3.2, 0.6];\nconst LAMPS = [10, 19, 27, 36, 44, 53];\nconst AIM = [34, 46, 15, 49, 20, 31];\nconst { min, max, sqrt, sin, cos, exp, abs, round, floor, hypot, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// Smooth value noise, for the forest's leaves and bark.\nfunction vnoise(x, y) {\n  const xi = floor(x), yi = floor(y);\n  const u = x - xi, v = y - yi;\n  const su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const h = (a, b) => hash(a * 157 + b * 7919 + 13);\n  const a = h(xi, yi), b = h(xi + 1, yi), c = h(xi, yi + 1), d = h(xi + 1, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + d) * su * sv;\n}\nconst mix3 = (a, b, t) => a.map((v, j) => v + (b[j] - v) * t);\nfunction put(A, i, c, k = 1) {\n  for (let j = 0; j \u003c 3; j++) A[i * 3 + j] = c[j] * k;\n}\nfunction add(A, i, c, k = 1) {\n  for (let j = 0; j \u003c 3; j++) A[i * 3 + j] += c[j] * k;\n}\nconst gilt = (v) => [min(255, 268 * v), 178 * v + 30 * v ** 4, 58 * v + 70 * v ** 6];\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\n// The painted backcloths. Each writes what the paint reflects (A, 0..1) and\n// what glows on its own from behind the cloth (E, 0..255).\nfunction sea(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  if (py \u003c 56) {\n    put(A, i, mix3([0.1, 0.14, 0.36], [0.36, 0.44, 0.7], ((py - SKY) / 41) ** 1.3));\n    if (y \u003c 48 && hash(i + 77) > 0.982) add(E, i, [1, 1, 1], 60 + 90 * hash(i + 5));\n    const d = hypot(px - 43, py - 31);\n    if (d \u003c 6.3) {\n      put(A, i, [0, 0, 0]);\n      put(E, i, [242, 236, 205], 0.88 + 0.12 * sqrt(1 - (d / 6.3) ** 2) - 0.14 * (vnoise(px * 0.7, py * 0.7) > 0.64));\n    } else add(E, i, [80, 88, 110], exp(-(d - 6.3) / 3.5));\n    // A headland on the left and a ship with its sails up on the horizon.\n    const ship = (abs(px - 26) \u003c 4.2 - (py - 53.5) * 0.9 && py > 53.5) || (abs(px - 26) \u003c 0.5 && py > 44) || (py > 45 && px > 26.5 && px \u003c 26.6 + (py - 45) * 0.55) || (py > 47.5 && px \u003c 25.5 && px > 25.4 - (py - 47.5) * 0.45);\n    if ((px \u003c 15 && py > 43 + 1.2 * (px - 4) + 1.5 * sin(px * 1.1)) || ship) put(A, i, [0.035, 0.05, 0.09]);\n  } else put(A, i, mix3([0.05, 0.12, 0.3], [0.1, 0.2, 0.42], (py - 56) / 22), 1 + 0.2 * sin(py * 1.9 + 1.4 * sin(px * 0.35)));\n}\n\nconst TRUNKS = [[8, 2.2, 0.2], [14, 3.4, 1], [22, 1.7, 0], [30, 2.4, 0.5], [40, 3.8, 1], [47, 1.9, 0], [53, 3, 0.9], [58.5, 2.2, 0.3]];\nfunction forest(x, y, i, A) {\n  const px = x + 0.5, py = y + 0.5;\n  const t = (py - SKY) / (BACK - SKY);\n  let c = mix3([0.18, 0.32, 0.32], [0.5, 0.62, 0.44], t);\n  c = mix3(c, [0.62, 0.68, 0.48], 0.45 * exp(-((px - 32) ** 2) / 90 - ((py - 60) ** 2) / 260));\n  for (const [tx, hw, near] of TRUNKS)\n    if (abs(px - tx - 0.7 * sin(py * 0.07 + tx)) \u003c hw * (0.85 + 0.35 * t)) c = mix3(c, [0.09, 0.07, 0.05].map((v) => v * (0.7 + 0.5 * vnoise(px * 1.4, py * 0.22))), 0.45 + 0.45 * near);\n  const n = vnoise(px * 0.16, py * 0.2) * 0.65 + vnoise(px * 0.45, py * 0.5) * 0.35;\n  if (n - (py - 20) * 0.022 > 0.42) c = mix3([0.05, 0.16, 0.06], [0.2, 0.44, 0.14], vnoise(px * 0.9, py * 0.9));\n  if (py > 67 + 2.5 * sin(px * 0.55) + 1.5 * sin(px * 1.4 + 1)) c = mix3([0.05, 0.16, 0.05], [0.16, 0.36, 0.1], hash(i * 3));\n  put(A, i, c);\n}\n\n// The city's skyline, two rows of blocks, and which LED is which window.\nconst [FARTOP, NEARTOP, NEARL] = [0, 0, 0].map(() => new Int16Array(W));\nconst WIN = new Int16Array(N).fill(-1);\nlet NWIN = 0;\nfor (let x = 0, k = 0; x \u003c W; k++)\n  for (let j = 0, w = 5 + floor(hash(k + 400) * 5), top = 38 + floor(hash(k + 500) * 16); j \u003c w && x \u003c W; j++) FARTOP[x++] = top;\nfor (let x = 0, k = 0; x \u003c W; k++)\n  for (let j = 0, w = 6 + floor(hash(k + 600) * 6), top = 50 + floor(hash(k + 700) * 15); j \u003c w && x \u003c W; j++, x++) {\n    NEARTOP[x] = top;\n    NEARL[x] = x - j;\n  }\nfunction city(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  put(A, i, mix3([0.1, 0.07, 0.24], [0.44, 0.25, 0.42], clamp((py - SKY) / 45, 0, 1) ** 1.2));\n  if (y \u003c 40 && hash(i + 91) > 0.986) add(E, i, [1, 1, 1], 50 + 70 * hash(i));\n  if (hypot(px - 15, py - 28) \u003c 4.4 && hypot(px - 17, py - 26.6) > 3.8) put(E, i, [240, 226, 170]);\n  const tower = (abs(px - 46.5) \u003c 2.2 && py > 31) || (abs(px - 46.5) \u003c 0.6 && py > 25);\n  if (py > FARTOP[x] || tower) put(A, i, [0.14, 0.12, 0.25]);\n  if (tower && py > 33 && x === 46 && y % 3 === 0) put(E, i, [170, 140, 90]);\n  if (py > NEARTOP[x]) {\n    put(A, i, [0.05, 0.045, 0.09]);\n    if ((x - NEARL[x]) % 2 === 1 && (y - NEARTOP[x]) % 3 === 2 && NEARTOP[min(W - 1, x + 1)] === NEARTOP[x]) WIN[i] = NWIN++;\n  }\n}\n\nconst PINES = [[9, 60, 15], [15, 58, 11], [50, 61, 16], [57, 59, 12], [22, 69, 9], [43, 70, 10]];\nfunction snow(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  let c = mix3([0.2, 0.26, 0.44], [0.48, 0.54, 0.68], (py - SKY) / 50);\n  if (y \u003c 44 && hash(i + 33) > 0.988) add(E, i, [1, 1, 1], 40 + 50 * hash(i));\n  if (py > 54 + 5 * sin(px * 0.08 + 0.6) + 2 * sin(px * 0.23)) c = [0.56, 0.62, 0.8];\n  if (py > 65 + 4 * sin(px * 0.11 - 1.1)) c = [0.8, 0.84, 0.96];\n  for (const [tx, base, h] of PINES) {\n    const d = py - (base - h);\n    if (d > 0 && d \u003c h + 2 && abs(px - tx) \u003c (d \u003c h ? (d % 4) * 0.55 + d * 0.22 : 0.7) + 0.3) c = d \u003c h && d % 4 \u003c 0.9 ? [0.85, 0.9, 1] : [0.04, 0.13, 0.09];\n  }\n  // A cottage on the near hill, its roof under snow and one window lit.\n  if (px > 30 && px \u003c 38 && py > 62 && py \u003c 68) c = [0.24, 0.13, 0.08];\n  if (py > 58 && py \u003c= 62 && abs(px - 34) \u003c (py - 57.5) * 1.2) c = [0.88, 0.92, 1];\n  if (px > 35.5 && px \u003c 37 && py > 56.5 && py \u003c 60) c = [0.2, 0.12, 0.1];\n  if (px > 32.5 && px \u003c 34.5 && py > 63.5 && py \u003c 66) put(E, i, [255, 190, 90]);\n  put(A, i, c);\n}\nconst SCENES = [sea, forest, city, snow];\n\n// The front row: heads [x, top, half-width] above red seat backs.\nconst HEADS = [[5, 109, 4.2], [15.5, 106.5, 4.5], [27, 109.5, 4.3], [37.5, 107.5, 4.6], [49, 108.5, 4.4], [59, 106.5, 4.3]];\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const U = (n) => new Uint8Array(n);\n  const S = { base: -1, alb: [], emi: [], arch: U(N), archC: F(N * 3), floorA: F(N), house: F(N * 3), R: F(N), G: F(N), B: F(N), M: U(N), fb: F(W), flakes: [] };\n  const seat = U(N);\n  const edge = new Int16Array(W);\n  params.s = S;\n  for (let x = 0; x \u003c W; x++) {\n    const dx = min(x - XL, XR - x);\n    edge[x] = x \u003c XL || x > XR ? LIP + 2 : TOP + (dx \u003c 9 ? round(9 - sqrt(81 - (9 - dx) ** 2)) : 0);\n    S.fb[x] = ((2 * PI) / 5.4) * (x + 1.3 * sin(x * 0.31));\n  }\n  // The arch's gilt mouldings go by how far an LED is from the opening.\n  const crest = (x, y) => hypot((x + 0.5 - 32) / 5.5, (y + 0.5 - 6.5) / 4.5);\n  for (let y = 0; y \u003c= LIP + 1; y++) for (let x = 0; x \u003c W; x++) if (y \u003c edge[x] || crest(x, y) \u003c 1) S.arch[y * W + x] = 1;\n  for (let y = 0; y \u003c= LIP + 1; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (!S.arch[i]) continue;\n      let d = 99;\n      for (let v = max(0, y - 6); v \u003c= min(LIP + 1, y + 6); v++)\n        for (let u = max(XL, x - 6); u \u003c= min(XR, x + 6); u++) if (!S.arch[v * W + u]) d = min(d, hypot(u - x, v - y));\n      const along = x >= XL && x \u003c= XR ? x : y;\n      let g = 0.52 + 0.22 * sin(along * 0.9) * sin(d * 1.7) + 0.08 * hash(i);\n      if (d \u003c 5.2) g = d \u003c 1.2 ? 1 : d \u003c 2.2 ? 0.36 : d \u003c 3.2 ? (along % 3 ? 0.55 : 1) : d \u003c 4.2 ? 0.72 : 0.34;\n      const q = crest(x, y);\n      put(S.archC, i, gilt(q \u003c 1 ? (q > 0.8 ? 1 : q > 0.62 ? 0.3 : 0.62 + 0.4 * (1 - q) - 0.25 * (abs(x - 31.5) \u003c 1 && y > 4)) : g * (x \u003c XL || x > XR ? 0.8 + 0.28 * (y / LIP) : 0.95)));\n    }\n  for (let s = 0; s \u003c 4; s++) {\n    const A = F(N * 3);\n    const E = F(N * 3);\n    for (let y = SKY; y \u003c BACK; y++) for (let x = XL; x \u003c= XR; x++) SCENES[s](x, y, y * W + x, A, E);\n    S.alb.push(A), S.emi.push(E);\n  }\n  S.won = U(NWIN).map(() => (Math.random() \u003c 0.55 ? 1 : 0));\n  // Floorboards running away from us to the backcloth.\n  for (let y = BACK; y \u003c LIP; y++)\n    for (let x = XL; x \u003c= XR; x++) {\n      const f = ((((x + 0.5 - 32) / (y + 0.5 - 44)) * 5) % 1 + 1) % 1;\n      S.floorA[y * W + x] = (y === BACK ? 0.4 : 1) * (abs(f - 0.5) > 0.42 ? 0.55 : 1) * (0.92 + 0.16 * hash(y * W + x));\n    }\n  // The house: the pit's glow and its music stand lamps behind the heads.\n  for (let y = LIP + 2; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const px = x + 0.5, py = y + 0.5;\n      let c = [255, 140, 60].map((v) => v * (y \u003c 104 ? 0.12 : 0.3 * exp(-(((py - 110) / 7) ** 2))));\n      for (let k = 0; k \u003c 7; k++) {\n        const d = hypot(px - (4 + k * 9.3), (py - 113.5) * 1.6);\n        if (d \u003c 3) c = c.map((v, j) => v + [230, 170, 90][j] * exp(-d * d));\n      }\n      for (const [cx, top, rx] of HEADS) {\n        const ry = rx * 1.25;\n        // One gentleman has kept his top hat on.\n        const hat = cx === 37.5 && ((abs(px - cx) \u003c 3 && py > top - 5 && py \u003c top + 1.5) || (abs(px - cx) \u003c 5.6 && abs(py - top - 1.5) \u003c 0.8));\n        if (hat || hypot((px - cx) / rx, (py - top - ry) / ry) \u003c 1 || (abs(px - cx) \u003c rx * 0.55 && py > top + ry)) {\n          c = [3, 2, 3];\n          seat[i] = 2;\n        }\n      }\n      // Seat backs in red velvet hide the shoulders.\n      const sx = (((px - 0.3) % 10.6) + 10.6) % 10.6;\n      if (y >= 119 && sx > 0.6 && sx \u003c 10 && (y > 120 || (sx > 1.6 && sx \u003c 9))) {\n        c = [255, 30, 36].map((v) => v * (0.1 + 0.32 * exp(-(py - 119) / 2.5)));\n        seat[i] = 1;\n      }\n      put(S.house, i, c);\n    }\n  // The top of each head catches a little of the stage light.\n  for (let i = W; i \u003c N; i++) if (seat[i] === 2 && !seat[i - W]) put(S.house, i, [96, 62, 40]);\n  const rnd = Math.random;\n  for (let k = 0; k \u003c 70; k++) S.flakes.push({ x: XL + rnd() * (XR - XL), y: SKY + rnd() * (LIP - SKY), v: rnd(), p: rnd() * 6 });\n}\n\n// Set the curtain moving from wherever it is.\nfunction move(S, ph, quick) {\n  S.ph = ph;\n  S.o0 = S.o;\n  S.c = 0;\n  S.quick = quick;\n  S.dur = ph ? TFALL * max(0.25, S.o) : TRISE * max(0.25, 1 - S.o);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.gel = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, 3);\n  S.haze = clamp(k[3], 0, 1);\n  if (S.base \u003c 0) {\n    // Open on the curtain just about to go out.\n    Object.assign(S, { base, scene: base, count: 0, o: 0, t: 0, foot: 1 });\n    move(S, 0, false);\n    S.c = -0.6;\n  }\n  if (base !== S.base) {\n    S.base = base;\n    if (S.ph === 3) {\n      S.count = 0;\n      S.scene = base;\n      move(S, 0, false);\n    } else if (S.ph === 2) S.quick = true;\n    else move(S, 2, true);\n  }\n  if (input.btnPressed && input.btnPressed[0]) move(S, S.ph \u003c 2 ? 2 : 0, false);\n  const st = dt * rate;\n  S.t += st;\n  S.c += st;\n  if (S.ph === 0) {\n    S.o = S.o0 + (1 - S.o0) * sstep(0, S.dur, S.c);\n    if (S.c >= S.dur) {\n      S.ph = 1;\n      S.c = 0;\n      S.dir = S.count % 2 ? -1 : 1;\n    }\n  } else if (S.ph === 1) {\n    S.o = 1;\n    if (S.c >= TSHOW) move(S, 2, false);\n  } else if (S.ph === 2) {\n    S.o = S.o0 * (1 - sstep(0, S.dur, S.c));\n    if (S.c >= S.dur) {\n      // The curtain is in: change the cloth behind it while she bows.\n      S.ph = 3;\n      S.c = 0;\n      S.count = S.quick ? 0 : S.count + 1;\n      S.scene = (S.base + S.count) % 4;\n      S.dur = S.quick ? THOLD : TBOW;\n    }\n  } else if (S.c >= S.dur) move(S, 0, false);\n  S.foot += ((S.ph === 1 ? 0.7 : 1) - S.foot) * min(1, dt * 2);\n  // Lit windows come and go, and snow falls from the flies.\n  for (let w = 0; w \u003c S.won.length; w++) if (Math.random() \u003c st * 0.25) S.won[w] ^= 1;\n  for (const f of S.flakes) {\n    f.x += sin(S.t * 1.3 + f.p) * 0.12 * rate;\n    if ((f.y += (5 + 4 * f.v) * st) >= LIP) Object.assign(f, { y: SKY - Math.random() * 6, x: XL + Math.random() * (XR - XL) });\n  }\n}\n\n// The dancer, as a mask: 1 skin, 2 tutu and bodice, 3 tights, 4 hair.\nfunction stamp(M, x, y, r, c) {\n  for (let v = max(0, floor(y - r)); v \u003c= min(H - 1, floor(y + r)); v++)\n    for (let u = max(0, floor(x - r)); u \u003c= min(W - 1, floor(x + r)); u++) if ((u + 0.5 - x) ** 2 + (v + 0.5 - y) ** 2 \u003c= r * r) M[v * W + u] = c;\n}\nfunction limb(M, x0, y0, x1, y1, r, c) {\n  const n = Math.ceil(hypot(x1 - x0, y1 - y0) * 2) + 1;\n  for (let k = 0; k \u003c= n; k++) stamp(M, x0 + ((x1 - x0) * k) / n, y0 + ((y1 - y0) * k) / n, r, c);\n}\nfunction dancer(M, p) {\n  const { hx, hy, s, dir } = p;\n  const ux = dir * sin(p.lean), uy = -cos(p.lean);\n  for (const a of [p.la, p.lb]) limb(M, hx, hy, hx + dir * sin(a) * 9 * s, hy + cos(a) * 9 * s, 0.72, 3);\n  const sx = hx + ux * 6.2 * s * p.tq, sy = hy + uy * 6.2 * s * p.tq;\n  limb(M, hx, hy, sx, sy, 1.05, 2);\n  const ax = sx - ux * 0.6, ay = sy - uy * 0.6;\n  for (const a of [p.aa, p.ab]) limb(M, ax, ay, ax + dir * sin(a) * 6 * s, ay + cos(a) * 6 * s, 0.65, 1);\n  // The tutu: two layers square to her body.\n  const cx = hx + ux * 0.6, cy = hy + uy * 0.6;\n  limb(M, cx + uy * 5 * s, cy - ux * 5 * s, cx - uy * 5 * s, cy + ux * 5 * s, 0.85, 2);\n  limb(M, cx + ux + uy * 3.8 * s, cy + uy - ux * 3.8 * s, cx + ux - uy * 3.8 * s, cy + uy + ux * 3.8 * s, 0.85, 2);\n  const nx = sx + ux * 2.1 * s, ny = sy + uy * 2.1 * s + p.hd;\n  stamp(M, nx, ny, 1.75 * s, 1);\n  stamp(M, nx + ux * 1.4 * s - dir * 0.5, ny + uy * 1.4 * s, 0.95, 4);\n}\n\n// Where the dancer is and how she stands, or null when she is off.\nfunction pose(S) {\n  const T = S.c;\n  if (S.ph === 1) {\n    const u = (T - 0.15) / 3.6;\n    if (u \u003c 0 || u > 1) return null;\n    const dir = S.dir;\n    const lc = ((T - 0.15) / 1.2) % 1;\n    const p = { hx: dir > 0 ? -9 + 82 * u : 73 - 82 * u, s: 1, dir, lean: 0, tq: 1, hd: 0, fy: 91, aa: 1.35, ab: -1.35, la: 0.45, lb: -0.45, cy: 79, r: 11, ox: 6, oy: -3 };\n    p.hy = 91 - 9 * cos(0.45);\n    if (lc \u003c 0.4) {\n      p.la = 0.42 * sin((lc / 0.4) * 2 * PI);\n      p.lb = -p.la;\n      p.hy = 91 - 9 * cos(p.la);\n    } else if (lc \u003c 0.88) {\n      // The grand jete: a split in the air with the front arm raised.\n      const air = sin(PI * ((lc - 0.4) / 0.48));\n      const sp = 1.35 * min(1, air * 1.6);\n      Object.assign(p, { la: sp, lb: -sp * 1.1, hy: 91 - 9 * max(cos(sp), 0.2) - 6 * air, aa: 1.35 + air, ab: -1.35 - 0.5 * air, lean: 0.08 * air });\n    }\n    p.lev = sstep(0.05, 0.4, T) * (1 - sstep(3.45, 3.85, T));\n    // The operator follows her with the spot, a little behind.\n    S.spx = S.spx === undefined || T \u003c 0.2 ? p.hx : S.spx + (p.hx - S.spx) * 0.25;\n    p.cx = S.spx;\n    return p;\n  }\n  if (S.ph === 3 && !S.quick) {\n    // Her bow in front of the curtain, sinking into the reverence and up again.\n    const k = sstep(0.6, 1.3, T) * (1 - sstep(2.1, 2.7, T));\n    const la = 0.14 + 0.3 * k;\n    const hy = 99 - 9.9 * cos(la);\n    return { hx: 31.5, hy, s: 1.1, dir: 1, lean: 0, tq: 1 - 0.5 * k, hd: 2.6 * k, la, lb: -la, aa: 2.5 - 1.9 * k, ab: -2.5 + 1.9 * k, fy: 99, lev: sstep(0, 0.3, T) * (1 - sstep(2.8, 3.15, T)), cx: 31.5, cy: hy - 4, r: 13, ox: 4, oy: 1 };\n  }\n  return null;\n}\n\n// Per row: the beams' light in the air, and their pools on the floor.\nconst [RB, RP, TX, TY, LI] = [W * 3, W * 3, 6, 6, 6].map((n) => new Float32Array(n));\nconst HR = new Int16Array(W);\nconst DCOL = [0, 0, 0, 1, 0.8, 0.68, 1, 0.95, 0.98, 0.95, 0.74, 0.8, 0.42, 0.26, 0.18];\nconst LIPC = gilt(0.42);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.base \u003c 0) return;\n  const { R, G, B, M, arch, archC, fb, house } = S;\n  const gel = hsv((0.58 + S.gel) % 1, 0.75, 1);\n  const [w0, w1, w2] = gel.map((v) => v + (1 - v) * 0.45);\n  const [b0, b1, b2] = gel.map((v) => v + (1 - v) * 0.35);\n  const hz = 0.32 + 0.9 * S.haze;\n  const fog = 4 + 56 * S.haze;\n  const bw = 5.5 + 3 * S.haze;\n  const A = S.alb[S.scene];\n  const E = S.emi[S.scene];\n  const T = S.t;\n  const ft = S.foot;\n  // The lamps on the bridge, each aimed at a spot on the floor that wanders.\n  for (let j = 0; j \u003c 6; j++) {\n    TX[j] = AIM[j] + 7 * sin(T * 0.33 + j * 1.9);\n    TY[j] = 88 + 4 * sin(T * 0.21 + j * 2.7);\n    LI[j] = 0.62 + 0.38 * sin(T * 0.4 + j * 1.3);\n  }\n  const hem = 94 - S.o * 92;\n  for (let x = 0; x \u003c W; x++) HR[x] = round(hem + 0.4 + 0.4 * sin(fb[x]));\n  const p = pose(S);\n  M.fill(0);\n  const lev = p && p.lev > 0.04 ? p.lev : 0;\n  if (lev) dancer(M, p);\n  const DL = 250 * (0.3 + 0.7 * lev);\n\n  for (let y = 0; y \u003c H; y++) {\n    RB.fill(0);\n    RP.fill(0);\n    for (let j = 0; y > LENS && y \u003c LIP && j \u003c 6; j++) {\n      if (y > TY[j] + 1) continue;\n      const lx = LAMPS[j] + 0.5, ly = LENS + 1;\n      const dx = TX[j] - lx, dy = TY[j] - ly;\n      const inv = 1 / (dx * dx + dy * dy);\n      const tt = clamp((y + 0.5 - ly) / dy, 0, 1);\n      const rc = lx + dx * tt;\n      const rb = (1.9 + bw * tt) * 1.25;\n      const kk = 200 * hz * LI[j];\n      // Each beam is a cone in the haze from its lens down to the floor.\n      for (let x = max(XL, floor(rc - rb)); x \u003c= min(XR, rc + rb); x++) {\n        const ex0 = x + 0.5 - lx, ey0 = y + 0.5 - ly;\n        const t = (ex0 * dx + ey0 * dy) * inv;\n        if (t \u003c 0 || t > 1) continue;\n        const ex = ex0 - t * dx, ey = ey0 - t * dy;\n        const wd = 0.9 + bw * t;\n        const q = (ex * ex + ey * ey) / (wd * wd);\n        if (q >= 1) continue;\n        const k = kk * (1 - q) * (1 - q) * (1.25 - 0.55 * t);\n        RB[x * 3] += b0 * k; RB[x * 3 + 1] += b1 * k; RB[x * 3 + 2] += b2 * k;\n      }\n      const qy = (y + 0.5 - TY[j]) / 3;\n      if (y >= BACK && qy * qy \u003c 1)\n        for (let x = max(XL, floor(TX[j] - 7.5)); x \u003c= min(XR, TX[j] + 7.5); x++) {\n          const qx = (x + 0.5 - TX[j]) / 7.5;\n          const q = 1 - qx * qx - qy * qy;\n          if (q \u003c= 0) continue;\n          const k = 220 * LI[j] * q * sqrt(q);\n          RP[x * 3] += b0 * k; RP[x * 3 + 1] += b1 * k; RP[x * 3 + 2] += b2 * k;\n        }\n    }\n    const spotRow = lev && abs(y + 0.5 - p.cy) \u003c p.r + 1.5;\n    const lv = ft * (0.22 + 0.78 * clamp((y - TOP) / (CURT - TOP), 0, 1) ** 1.5) + 0.16;\n    const fl = ft * 70 * clamp((y - BACK) / (LIP - BACK), 0, 1) ** 2;\n\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const hr = HR[x];\n      let r, g, b;\n      if (arch[i]) (r = archC[i * 3]), (g = archC[i * 3 + 1]), (b = archC[i * 3 + 2]);\n      else if (y > LIP + 1) (r = house[i * 3] * ft), (g = house[i * 3 + 1] * ft), (b = house[i * 3 + 2] * ft);\n      else if (y === LIP) {\n        const on = (x - XL) % 4 === 1;\n        r = on ? 255 : 190 * ft; g = (on ? 215 : 120) * ft; b = (on ? 140 : 50) * ft;\n      } else if (y === LIP + 1) [r, g, b] = LIPC;\n      else {\n        if (y \u003c hr + 3 - (x & 1)) {\n          if (y \u003c hr - 2) {\n            // The house curtain in velvet folds, lit from the footlights below.\n            const q = 0.5 + 0.5 * sin(fb[x] + 0.5 * sin((y - hem) * 0.09 + x * 0.6) * (0.4 + sstep(12, 0, hr - y)));\n            const v = 0.16 + 0.84 * q * (0.4 + 0.6 * q);\n            const sh = 26 * v * v * v * v * lv;\n            r = 250 * v * lv + sh + w0 * 18 * v; g = r * 0.05 + sh + w1 * 10 * v; b = r * 0.09 + sh + w2 * 14 * v;\n          } else {\n            // The gold braid, and the fringe that hangs below it.\n            const gv = (y \u003c hr ? ((x + y) & 1 ? 0.95 : 0.62) : x & 1 ? 0.5 - 0.12 * (y - hr) : 0.88 - 0.1 * (y - hr)) * (0.35 + 0.75 * lv);\n            [r, g, b] = gilt(gv);\n          }\n        } else if (y \u003c TRUSS) r = g = b = 3;\n        else if (y \u003c SKY) {\n          const lace = y === TRUSS || y === SKY - 1 || (x + y) % 4 === 0 || (x - y + 64) % 4 === 0;\n          r = g = lace ? 52 : 4;\n          b = lace ? 58 : 5;\n        } else {\n          if (y \u003c BACK) {\n            r = A[i * 3] * w0 * 165 + E[i * 3]; g = A[i * 3 + 1] * w1 * 165 + E[i * 3 + 1]; b = A[i * 3 + 2] * w2 * 165 + E[i * 3 + 2];\n            if (S.scene === 0 && y >= 56) {\n              // The moon's path: short glints on the swell, wider toward us.\n              const gd = abs(x + 0.5 - 43) / (2 + (y - 56) * 0.22);\n              const cell = floor((x + 0.5 * y) / 3) + y * 31;\n              const gl = gd \u003c 1.5 ? hash(cell + floor(T * 3 + hash(cell) * 9) * 4096) - 0.6 - 0.18 * gd * gd : 0;\n              if (gl > 0) { r += gl * 480; g += gl * 480; b += gl * 430; }\n            } else if (S.scene === 2) {\n              const w = WIN[i];\n              if (w >= 0 && S.won[w]) { r += 235; g += 170; b += 80; }\n              if (x === 46 && y === 25 && T % 1.6 \u003c 0.3) r += 255;\n            }\n          } else {\n            // The floor, lit by the wash and the lamps' pools.\n            const fa = S.floorA[i];\n            r = fa * (w0 * 55 + fl + RP[x * 3]); g = fa * 0.88 * (w1 * 55 + fl * 0.7 + RP[x * 3 + 1]); b = fa * 0.76 * (w2 * 55 + fl * 0.35 + RP[x * 3 + 2]);\n          }\n          if (y > LENS) {\n            r += RB[x * 3]; g += RB[x * 3 + 1]; b += RB[x * 3 + 2];\n          } else\n            for (let j = 0; j \u003c 6; j++) {\n              // A lamp hangs from its yoke, the lens shining down.\n              const d = abs(x - LAMPS[j]);\n              if (d > 1 || (y === SKY && d)) continue;\n              if (y \u003c LENS) r = g = b = y === SKY ? 60 : d ? 34 : 70;\n              else {\n                const k = (0.45 + 0.55 * LI[j]) * (d ? 190 : 255);\n                r = b0 * k; g = b1 * k; b = b2 * k;\n              }\n            }\n        }\n        // Haze in the air, lit by the wash.\n        r += fog * w0; g += fog * w1; b += fog * w2;\n        if (spotRow) {\n          // The follow spot: a pool of white light, with her shadow in it.\n          const ddx = x + 0.5 - p.cx, ddy = y + 0.5 - p.cy;\n          const inn = sstep(p.r + 1.5, p.r - 1.5, sqrt(ddx * ddx + ddy * ddy)) * lev;\n          if (inn > 0) {\n            const bx = floor(p.hx + (x + 0.5 - p.hx - p.ox) / 1.2);\n            const by = floor(p.fy + (y + 0.5 - p.fy - p.oy) / 1.2);\n            const shade = bx >= 0 && bx \u003c W && by >= 0 && by \u003c H && M[by * W + bx] && !M[i];\n            const k = shade ? inn * 0.1 : inn;\n            const dk = (1 + 1.1 * k) * (shade ? 0.55 : 1);\n            r = r * dk + 62 * k; g = g * dk + 58 * k; b = b * dk + 52 * k;\n          }\n        }\n        const c = M[i];\n        if (c) { r = DCOL[c * 3] * DL; g = DCOL[c * 3 + 1] * DL; b = DCOL[c * 3 + 2] * DL; }\n      }\n      R[i] = r; G[i] = g; B[i] = b;\n    }\n  }\n\n  // Paper snow falls from the flies in front of the backcloth.\n  for (const f of S.scene === 3 ? S.flakes : []) {\n    const x = floor(f.x), y = floor(f.y), i = y * W + x;\n    if (y >= SKY && y >= HR[x] + 3 && !arch[i]) {\n      R[i] += 190; G[i] += 195; B[i] += 210;\n    }\n  }\n  for (let i = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) display.setPixel(x, y, R[i] > 255 ? 255 : R[i], G[i] > 255 ? 255 : G[i], B[i] > 255 ? 255 : B[i]);\n}\n","layer":{"id":"layer-proscenium","type":"code","name":"proscenium","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Proscenium\n// Family:  stage\n// Idea:    A theatre from the stalls: under a gilded arch the red house curtain rises on a painted backcloth, lamps above cut shafts through the haze, a dancer crosses in a follow spot, and the curtain falls for her bow before the next scene.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the proscenium stage of a nineteenth-century opera house\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Gel=0..1, Speed=0.2..3, Scene=0..3, Haze=0..1\n//\n// Knob 1: Gel. The colour of the stage wash and the beams: steel blue at 0, turning through violet and rose to amber in the middle, then through green back to blue.\n// Knob 2: Speed. How fast the show runs: at 2 the curtain takes 2.8 s to rise and a whole round of rise, dance, fall and bow is 12 s; at 0.2 it all runs ten times slower.\n// Knob 3: Scene. The backdrop the curtain rises on: a moonlit sea, a forest, a night city or a snowfall, the others following in that order. Turning it brings the curtain in and out again on the new one.\n// Knob 4: Haze. How much haze hangs in the air. At 0 the beams are thin shafts; turned up they swell and the whole stage glows in the gel.\n// Buttons: K1 tap brings the curtain in now, or takes it out again if it is in.\n\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the arch: columns XL..XR, rows from TOP down to the stage lip.\nconst [XL, XR, TOP, TRUSS, SKY, LENS, BACK, CURT, LIP] = [4, 59, 8, 11, 15, 17, 78, 96, 100];\n// The phases of a round, in seconds at Speed 2.\nconst [TRISE, TSHOW, TFALL, TBOW, THOLD] = [2.8, 4, 1.8, 3.2, 0.6];\nconst LAMPS = [10, 19, 27, 36, 44, 53];\nconst AIM = [34, 46, 15, 49, 20, 31];\nconst { min, max, sqrt, sin, cos, exp, abs, round, floor, hypot, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// Smooth value noise, for the forest's leaves and bark.\nfunction vnoise(x, y) {\n  const xi = floor(x), yi = floor(y);\n  const u = x - xi, v = y - yi;\n  const su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const h = (a, b) => hash(a * 157 + b * 7919 + 13);\n  const a = h(xi, yi), b = h(xi + 1, yi), c = h(xi, yi + 1), d = h(xi + 1, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + d) * su * sv;\n}\nconst mix3 = (a, b, t) => a.map((v, j) => v + (b[j] - v) * t);\nfunction put(A, i, c, k = 1) {\n  for (let j = 0; j \u003c 3; j++) A[i * 3 + j] = c[j] * k;\n}\nfunction add(A, i, c, k = 1) {\n  for (let j = 0; j \u003c 3; j++) A[i * 3 + j] += c[j] * k;\n}\nconst gilt = (v) => [min(255, 268 * v), 178 * v + 30 * v ** 4, 58 * v + 70 * v ** 6];\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\n// The painted backcloths. Each writes what the paint reflects (A, 0..1) and\n// what glows on its own from behind the cloth (E, 0..255).\nfunction sea(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  if (py \u003c 56) {\n    put(A, i, mix3([0.1, 0.14, 0.36], [0.36, 0.44, 0.7], ((py - SKY) / 41) ** 1.3));\n    if (y \u003c 48 && hash(i + 77) > 0.982) add(E, i, [1, 1, 1], 60 + 90 * hash(i + 5));\n    const d = hypot(px - 43, py - 31);\n    if (d \u003c 6.3) {\n      put(A, i, [0, 0, 0]);\n      put(E, i, [242, 236, 205], 0.88 + 0.12 * sqrt(1 - (d / 6.3) ** 2) - 0.14 * (vnoise(px * 0.7, py * 0.7) > 0.64));\n    } else add(E, i, [80, 88, 110], exp(-(d - 6.3) / 3.5));\n    // A headland on the left and a ship with its sails up on the horizon.\n    const ship = (abs(px - 26) \u003c 4.2 - (py - 53.5) * 0.9 && py > 53.5) || (abs(px - 26) \u003c 0.5 && py > 44) || (py > 45 && px > 26.5 && px \u003c 26.6 + (py - 45) * 0.55) || (py > 47.5 && px \u003c 25.5 && px > 25.4 - (py - 47.5) * 0.45);\n    if ((px \u003c 15 && py > 43 + 1.2 * (px - 4) + 1.5 * sin(px * 1.1)) || ship) put(A, i, [0.035, 0.05, 0.09]);\n  } else put(A, i, mix3([0.05, 0.12, 0.3], [0.1, 0.2, 0.42], (py - 56) / 22), 1 + 0.2 * sin(py * 1.9 + 1.4 * sin(px * 0.35)));\n}\n\nconst TRUNKS = [[8, 2.2, 0.2], [14, 3.4, 1], [22, 1.7, 0], [30, 2.4, 0.5], [40, 3.8, 1], [47, 1.9, 0], [53, 3, 0.9], [58.5, 2.2, 0.3]];\nfunction forest(x, y, i, A) {\n  const px = x + 0.5, py = y + 0.5;\n  const t = (py - SKY) / (BACK - SKY);\n  let c = mix3([0.18, 0.32, 0.32], [0.5, 0.62, 0.44], t);\n  c = mix3(c, [0.62, 0.68, 0.48], 0.45 * exp(-((px - 32) ** 2) / 90 - ((py - 60) ** 2) / 260));\n  for (const [tx, hw, near] of TRUNKS)\n    if (abs(px - tx - 0.7 * sin(py * 0.07 + tx)) \u003c hw * (0.85 + 0.35 * t)) c = mix3(c, [0.09, 0.07, 0.05].map((v) => v * (0.7 + 0.5 * vnoise(px * 1.4, py * 0.22))), 0.45 + 0.45 * near);\n  const n = vnoise(px * 0.16, py * 0.2) * 0.65 + vnoise(px * 0.45, py * 0.5) * 0.35;\n  if (n - (py - 20) * 0.022 > 0.42) c = mix3([0.05, 0.16, 0.06], [0.2, 0.44, 0.14], vnoise(px * 0.9, py * 0.9));\n  if (py > 67 + 2.5 * sin(px * 0.55) + 1.5 * sin(px * 1.4 + 1)) c = mix3([0.05, 0.16, 0.05], [0.16, 0.36, 0.1], hash(i * 3));\n  put(A, i, c);\n}\n\n// The city's skyline, two rows of blocks, and which LED is which window.\nconst [FARTOP, NEARTOP, NEARL] = [0, 0, 0].map(() => new Int16Array(W));\nconst WIN = new Int16Array(N).fill(-1);\nlet NWIN = 0;\nfor (let x = 0, k = 0; x \u003c W; k++)\n  for (let j = 0, w = 5 + floor(hash(k + 400) * 5), top = 38 + floor(hash(k + 500) * 16); j \u003c w && x \u003c W; j++) FARTOP[x++] = top;\nfor (let x = 0, k = 0; x \u003c W; k++)\n  for (let j = 0, w = 6 + floor(hash(k + 600) * 6), top = 50 + floor(hash(k + 700) * 15); j \u003c w && x \u003c W; j++, x++) {\n    NEARTOP[x] = top;\n    NEARL[x] = x - j;\n  }\nfunction city(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  put(A, i, mix3([0.1, 0.07, 0.24], [0.44, 0.25, 0.42], clamp((py - SKY) / 45, 0, 1) ** 1.2));\n  if (y \u003c 40 && hash(i + 91) > 0.986) add(E, i, [1, 1, 1], 50 + 70 * hash(i));\n  if (hypot(px - 15, py - 28) \u003c 4.4 && hypot(px - 17, py - 26.6) > 3.8) put(E, i, [240, 226, 170]);\n  const tower = (abs(px - 46.5) \u003c 2.2 && py > 31) || (abs(px - 46.5) \u003c 0.6 && py > 25);\n  if (py > FARTOP[x] || tower) put(A, i, [0.14, 0.12, 0.25]);\n  if (tower && py > 33 && x === 46 && y % 3 === 0) put(E, i, [170, 140, 90]);\n  if (py > NEARTOP[x]) {\n    put(A, i, [0.05, 0.045, 0.09]);\n    if ((x - NEARL[x]) % 2 === 1 && (y - NEARTOP[x]) % 3 === 2 && NEARTOP[min(W - 1, x + 1)] === NEARTOP[x]) WIN[i] = NWIN++;\n  }\n}\n\nconst PINES = [[9, 60, 15], [15, 58, 11], [50, 61, 16], [57, 59, 12], [22, 69, 9], [43, 70, 10]];\nfunction snow(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  let c = mix3([0.2, 0.26, 0.44], [0.48, 0.54, 0.68], (py - SKY) / 50);\n  if (y \u003c 44 && hash(i + 33) > 0.988) add(E, i, [1, 1, 1], 40 + 50 * hash(i));\n  if (py > 54 + 5 * sin(px * 0.08 + 0.6) + 2 * sin(px * 0.23)) c = [0.56, 0.62, 0.8];\n  if (py > 65 + 4 * sin(px * 0.11 - 1.1)) c = [0.8, 0.84, 0.96];\n  for (const [tx, base, h] of PINES) {\n    const d = py - (base - h);\n    if (d > 0 && d \u003c h + 2 && abs(px - tx) \u003c (d \u003c h ? (d % 4) * 0.55 + d * 0.22 : 0.7) + 0.3) c = d \u003c h && d % 4 \u003c 0.9 ? [0.85, 0.9, 1] : [0.04, 0.13, 0.09];\n  }\n  // A cottage on the near hill, its roof under snow and one window lit.\n  if (px > 30 && px \u003c 38 && py > 62 && py \u003c 68) c = [0.24, 0.13, 0.08];\n  if (py > 58 && py \u003c= 62 && abs(px - 34) \u003c (py - 57.5) * 1.2) c = [0.88, 0.92, 1];\n  if (px > 35.5 && px \u003c 37 && py > 56.5 && py \u003c 60) c = [0.2, 0.12, 0.1];\n  if (px > 32.5 && px \u003c 34.5 && py > 63.5 && py \u003c 66) put(E, i, [255, 190, 90]);\n  put(A, i, c);\n}\nconst SCENES = [sea, forest, city, snow];\n\n// The front row: heads [x, top, half-width] above red seat backs.\nconst HEADS = [[5, 109, 4.2], [15.5, 106.5, 4.5], [27, 109.5, 4.3], [37.5, 107.5, 4.6], [49, 108.5, 4.4], [59, 106.5, 4.3]];\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const U = (n) => new Uint8Array(n);\n  const S = { base: -1, alb: [], emi: [], arch: U(N), archC: F(N * 3), floorA: F(N), house: F(N * 3), R: F(N), G: F(N), B: F(N), M: U(N), fb: F(W), flakes: [] };\n  const seat = U(N);\n  const edge = new Int16Array(W);\n  params.s = S;\n  for (let x = 0; x \u003c W; x++) {\n    const dx = min(x - XL, XR - x);\n    edge[x] = x \u003c XL || x > XR ? LIP + 2 : TOP + (dx \u003c 9 ? round(9 - sqrt(81 - (9 - dx) ** 2)) : 0);\n    S.fb[x] = ((2 * PI) / 5.4) * (x + 1.3 * sin(x * 0.31));\n  }\n  // The arch's gilt mouldings go by how far an LED is from the opening.\n  const crest = (x, y) => hypot((x + 0.5 - 32) / 5.5, (y + 0.5 - 6.5) / 4.5);\n  for (let y = 0; y \u003c= LIP + 1; y++) for (let x = 0; x \u003c W; x++) if (y \u003c edge[x] || crest(x, y) \u003c 1) S.arch[y * W + x] = 1;\n  for (let y = 0; y \u003c= LIP + 1; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (!S.arch[i]) continue;\n      let d = 99;\n      for (let v = max(0, y - 6); v \u003c= min(LIP + 1, y + 6); v++)\n        for (let u = max(XL, x - 6); u \u003c= min(XR, x + 6); u++) if (!S.arch[v * W + u]) d = min(d, hypot(u - x, v - y));\n      const along = x >= XL && x \u003c= XR ? x : y;\n      let g = 0.52 + 0.22 * sin(along * 0.9) * sin(d * 1.7) + 0.08 * hash(i);\n      if (d \u003c 5.2) g = d \u003c 1.2 ? 1 : d \u003c 2.2 ? 0.36 : d \u003c 3.2 ? (along % 3 ? 0.55 : 1) : d \u003c 4.2 ? 0.72 : 0.34;\n      const q = crest(x, y);\n      put(S.archC, i, gilt(q \u003c 1 ? (q > 0.8 ? 1 : q > 0.62 ? 0.3 : 0.62 + 0.4 * (1 - q) - 0.25 * (abs(x - 31.5) \u003c 1 && y > 4)) : g * (x \u003c XL || x > XR ? 0.8 + 0.28 * (y / LIP) : 0.95)));\n    }\n  for (let s = 0; s \u003c 4; s++) {\n    const A = F(N * 3);\n    const E = F(N * 3);\n    for (let y = SKY; y \u003c BACK; y++) for (let x = XL; x \u003c= XR; x++) SCENES[s](x, y, y * W + x, A, E);\n    S.alb.push(A), S.emi.push(E);\n  }\n  S.won = U(NWIN).map(() => (Math.random() \u003c 0.55 ? 1 : 0));\n  // Floorboards running away from us to the backcloth.\n  for (let y = BACK; y \u003c LIP; y++)\n    for (let x = XL; x \u003c= XR; x++) {\n      const f = ((((x + 0.5 - 32) / (y + 0.5 - 44)) * 5) % 1 + 1) % 1;\n      S.floorA[y * W + x] = (y === BACK ? 0.4 : 1) * (abs(f - 0.5) > 0.42 ? 0.55 : 1) * (0.92 + 0.16 * hash(y * W + x));\n    }\n  // The house: the pit's glow and its music stand lamps behind the heads.\n  for (let y = LIP + 2; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const px = x + 0.5, py = y + 0.5;\n      let c = [255, 140, 60].map((v) => v * (y \u003c 104 ? 0.12 : 0.3 * exp(-(((py - 110) / 7) ** 2))));\n      for (let k = 0; k \u003c 7; k++) {\n        const d = hypot(px - (4 + k * 9.3), (py - 113.5) * 1.6);\n        if (d \u003c 3) c = c.map((v, j) => v + [230, 170, 90][j] * exp(-d * d));\n      }\n      for (const [cx, top, rx] of HEADS) {\n        const ry = rx * 1.25;\n        // One gentleman has kept his top hat on.\n        const hat = cx === 37.5 && ((abs(px - cx) \u003c 3 && py > top - 5 && py \u003c top + 1.5) || (abs(px - cx) \u003c 5.6 && abs(py - top - 1.5) \u003c 0.8));\n        if (hat || hypot((px - cx) / rx, (py - top - ry) / ry) \u003c 1 || (abs(px - cx) \u003c rx * 0.55 && py > top + ry)) {\n          c = [3, 2, 3];\n          seat[i] = 2;\n        }\n      }\n      // Seat backs in red velvet hide the shoulders.\n      const sx = (((px - 0.3) % 10.6) + 10.6) % 10.6;\n      if (y >= 119 && sx > 0.6 && sx \u003c 10 && (y > 120 || (sx > 1.6 && sx \u003c 9))) {\n        c = [255, 30, 36].map((v) => v * (0.1 + 0.32 * exp(-(py - 119) / 2.5)));\n        seat[i] = 1;\n      }\n      put(S.house, i, c);\n    }\n  // The top of each head catches a little of the stage light.\n  for (let i = W; i \u003c N; i++) if (seat[i] === 2 && !seat[i - W]) put(S.house, i, [96, 62, 40]);\n  const rnd = Math.random;\n  for (let k = 0; k \u003c 70; k++) S.flakes.push({ x: XL + rnd() * (XR - XL), y: SKY + rnd() * (LIP - SKY), v: rnd(), p: rnd() * 6 });\n}\n\n// Set the curtain moving from wherever it is.\nfunction move(S, ph, quick) {\n  S.ph = ph;\n  S.o0 = S.o;\n  S.c = 0;\n  S.quick = quick;\n  S.dur = ph ? TFALL * max(0.25, S.o) : TRISE * max(0.25, 1 - S.o);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.gel = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, 3);\n  S.haze = clamp(k[3], 0, 1);\n  if (S.base \u003c 0) {\n    // Open on the curtain just about to go out.\n    Object.assign(S, { base, scene: base, count: 0, o: 0, t: 0, foot: 1 });\n    move(S, 0, false);\n    S.c = -0.6;\n  }\n  if (base !== S.base) {\n    S.base = base;\n    if (S.ph === 3) {\n      S.count = 0;\n      S.scene = base;\n      move(S, 0, false);\n    } else if (S.ph === 2) S.quick = true;\n    else move(S, 2, true);\n  }\n  if (input.btnPressed && input.btnPressed[0]) move(S, S.ph \u003c 2 ? 2 : 0, false);\n  const st = dt * rate;\n  S.t += st;\n  S.c += st;\n  if (S.ph === 0) {\n    S.o = S.o0 + (1 - S.o0) * sstep(0, S.dur, S.c);\n    if (S.c >= S.dur) {\n      S.ph = 1;\n      S.c = 0;\n      S.dir = S.count % 2 ? -1 : 1;\n    }\n  } else if (S.ph === 1) {\n    S.o = 1;\n    if (S.c >= TSHOW) move(S, 2, false);\n  } else if (S.ph === 2) {\n    S.o = S.o0 * (1 - sstep(0, S.dur, S.c));\n    if (S.c >= S.dur) {\n      // The curtain is in: change the cloth behind it while she bows.\n      S.ph = 3;\n      S.c = 0;\n      S.count = S.quick ? 0 : S.count + 1;\n      S.scene = (S.base + S.count) % 4;\n      S.dur = S.quick ? THOLD : TBOW;\n    }\n  } else if (S.c >= S.dur) move(S, 0, false);\n  S.foot += ((S.ph === 1 ? 0.7 : 1) - S.foot) * min(1, dt * 2);\n  // Lit windows come and go, and snow falls from the flies.\n  for (let w = 0; w \u003c S.won.length; w++) if (Math.random() \u003c st * 0.25) S.won[w] ^= 1;\n  for (const f of S.flakes) {\n    f.x += sin(S.t * 1.3 + f.p) * 0.12 * rate;\n    if ((f.y += (5 + 4 * f.v) * st) >= LIP) Object.assign(f, { y: SKY - Math.random() * 6, x: XL + Math.random() * (XR - XL) });\n  }\n}\n\n// The dancer, as a mask: 1 skin, 2 tutu and bodice, 3 tights, 4 hair.\nfunction stamp(M, x, y, r, c) {\n  for (let v = max(0, floor(y - r)); v \u003c= min(H - 1, floor(y + r)); v++)\n    for (let u = max(0, floor(x - r)); u \u003c= min(W - 1, floor(x + r)); u++) if ((u + 0.5 - x) ** 2 + (v + 0.5 - y) ** 2 \u003c= r * r) M[v * W + u] = c;\n}\nfunction limb(M, x0, y0, x1, y1, r, c) {\n  const n = Math.ceil(hypot(x1 - x0, y1 - y0) * 2) + 1;\n  for (let k = 0; k \u003c= n; k++) stamp(M, x0 + ((x1 - x0) * k) / n, y0 + ((y1 - y0) * k) / n, r, c);\n}\nfunction dancer(M, p) {\n  const { hx, hy, s, dir } = p;\n  const ux = dir * sin(p.lean), uy = -cos(p.lean);\n  for (const a of [p.la, p.lb]) limb(M, hx, hy, hx + dir * sin(a) * 9 * s, hy + cos(a) * 9 * s, 0.72, 3);\n  const sx = hx + ux * 6.2 * s * p.tq, sy = hy + uy * 6.2 * s * p.tq;\n  limb(M, hx, hy, sx, sy, 1.05, 2);\n  const ax = sx - ux * 0.6, ay = sy - uy * 0.6;\n  for (const a of [p.aa, p.ab]) limb(M, ax, ay, ax + dir * sin(a) * 6 * s, ay + cos(a) * 6 * s, 0.65, 1);\n  // The tutu: two layers square to her body.\n  const cx = hx + ux * 0.6, cy = hy + uy * 0.6;\n  limb(M, cx + uy * 5 * s, cy - ux * 5 * s, cx - uy * 5 * s, cy + ux * 5 * s, 0.85, 2);\n  limb(M, cx + ux + uy * 3.8 * s, cy + uy - ux * 3.8 * s, cx + ux - uy * 3.8 * s, cy + uy + ux * 3.8 * s, 0.85, 2);\n  const nx = sx + ux * 2.1 * s, ny = sy + uy * 2.1 * s + p.hd;\n  stamp(M, nx, ny, 1.75 * s, 1);\n  stamp(M, nx + ux * 1.4 * s - dir * 0.5, ny + uy * 1.4 * s, 0.95, 4);\n}\n\n// Where the dancer is and how she stands, or null when she is off.\nfunction pose(S) {\n  const T = S.c;\n  if (S.ph === 1) {\n    const u = (T - 0.15) / 3.6;\n    if (u \u003c 0 || u > 1) return null;\n    const dir = S.dir;\n    const lc = ((T - 0.15) / 1.2) % 1;\n    const p = { hx: dir > 0 ? -9 + 82 * u : 73 - 82 * u, s: 1, dir, lean: 0, tq: 1, hd: 0, fy: 91, aa: 1.35, ab: -1.35, la: 0.45, lb: -0.45, cy: 79, r: 11, ox: 6, oy: -3 };\n    p.hy = 91 - 9 * cos(0.45);\n    if (lc \u003c 0.4) {\n      p.la = 0.42 * sin((lc / 0.4) * 2 * PI);\n      p.lb = -p.la;\n      p.hy = 91 - 9 * cos(p.la);\n    } else if (lc \u003c 0.88) {\n      // The grand jete: a split in the air with the front arm raised.\n      const air = sin(PI * ((lc - 0.4) / 0.48));\n      const sp = 1.35 * min(1, air * 1.6);\n      Object.assign(p, { la: sp, lb: -sp * 1.1, hy: 91 - 9 * max(cos(sp), 0.2) - 6 * air, aa: 1.35 + air, ab: -1.35 - 0.5 * air, lean: 0.08 * air });\n    }\n    p.lev = sstep(0.05, 0.4, T) * (1 - sstep(3.45, 3.85, T));\n    // The operator follows her with the spot, a little behind.\n    S.spx = S.spx === undefined || T \u003c 0.2 ? p.hx : S.spx + (p.hx - S.spx) * 0.25;\n    p.cx = S.spx;\n    return p;\n  }\n  if (S.ph === 3 && !S.quick) {\n    // Her bow in front of the curtain, sinking into the reverence and up again.\n    const k = sstep(0.6, 1.3, T) * (1 - sstep(2.1, 2.7, T));\n    const la = 0.14 + 0.3 * k;\n    const hy = 99 - 9.9 * cos(la);\n    return { hx: 31.5, hy, s: 1.1, dir: 1, lean: 0, tq: 1 - 0.5 * k, hd: 2.6 * k, la, lb: -la, aa: 2.5 - 1.9 * k, ab: -2.5 + 1.9 * k, fy: 99, lev: sstep(0, 0.3, T) * (1 - sstep(2.8, 3.15, T)), cx: 31.5, cy: hy - 4, r: 13, ox: 4, oy: 1 };\n  }\n  return null;\n}\n\n// Per row: the beams' light in the air, and their pools on the floor.\nconst [RB, RP, TX, TY, LI] = [W * 3, W * 3, 6, 6, 6].map((n) => new Float32Array(n));\nconst HR = new Int16Array(W);\nconst DCOL = [0, 0, 0, 1, 0.8, 0.68, 1, 0.95, 0.98, 0.95, 0.74, 0.8, 0.42, 0.26, 0.18];\nconst LIPC = gilt(0.42);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.base \u003c 0) return;\n  const { R, G, B, M, arch, archC, fb, house } = S;\n  const gel = hsv((0.58 + S.gel) % 1, 0.75, 1);\n  const [w0, w1, w2] = gel.map((v) => v + (1 - v) * 0.45);\n  const [b0, b1, b2] = gel.map((v) => v + (1 - v) * 0.35);\n  const hz = 0.32 + 0.9 * S.haze;\n  const fog = 4 + 56 * S.haze;\n  const bw = 5.5 + 3 * S.haze;\n  const A = S.alb[S.scene];\n  const E = S.emi[S.scene];\n  const T = S.t;\n  const ft = S.foot;\n  // The lamps on the bridge, each aimed at a spot on the floor that wanders.\n  for (let j = 0; j \u003c 6; j++) {\n    TX[j] = AIM[j] + 7 * sin(T * 0.33 + j * 1.9);\n    TY[j] = 88 + 4 * sin(T * 0.21 + j * 2.7);\n    LI[j] = 0.62 + 0.38 * sin(T * 0.4 + j * 1.3);\n  }\n  const hem = 94 - S.o * 92;\n  for (let x = 0; x \u003c W; x++) HR[x] = round(hem + 0.4 + 0.4 * sin(fb[x]));\n  const p = pose(S);\n  M.fill(0);\n  const lev = p && p.lev > 0.04 ? p.lev : 0;\n  if (lev) dancer(M, p);\n  const DL = 250 * (0.3 + 0.7 * lev);\n\n  for (let y = 0; y \u003c H; y++) {\n    RB.fill(0);\n    RP.fill(0);\n    for (let j = 0; y > LENS && y \u003c LIP && j \u003c 6; j++) {\n      if (y > TY[j] + 1) continue;\n      const lx = LAMPS[j] + 0.5, ly = LENS + 1;\n      const dx = TX[j] - lx, dy = TY[j] - ly;\n      const inv = 1 / (dx * dx + dy * dy);\n      const tt = clamp((y + 0.5 - ly) / dy, 0, 1);\n      const rc = lx + dx * tt;\n      const rb = (1.9 + bw * tt) * 1.25;\n      const kk = 200 * hz * LI[j];\n      // Each beam is a cone in the haze from its lens down to the floor.\n      for (let x = max(XL, floor(rc - rb)); x \u003c= min(XR, rc + rb); x++) {\n        const ex0 = x + 0.5 - lx, ey0 = y + 0.5 - ly;\n        const t = (ex0 * dx + ey0 * dy) * inv;\n        if (t \u003c 0 || t > 1) continue;\n        const ex = ex0 - t * dx, ey = ey0 - t * dy;\n        const wd = 0.9 + bw * t;\n        const q = (ex * ex + ey * ey) / (wd * wd);\n        if (q >= 1) continue;\n        const k = kk * (1 - q) * (1 - q) * (1.25 - 0.55 * t);\n        RB[x * 3] += b0 * k; RB[x * 3 + 1] += b1 * k; RB[x * 3 + 2] += b2 * k;\n      }\n      const qy = (y + 0.5 - TY[j]) / 3;\n      if (y >= BACK && qy * qy \u003c 1)\n        for (let x = max(XL, floor(TX[j] - 7.5)); x \u003c= min(XR, TX[j] + 7.5); x++) {\n          const qx = (x + 0.5 - TX[j]) / 7.5;\n          const q = 1 - qx * qx - qy * qy;\n          if (q \u003c= 0) continue;\n          const k = 220 * LI[j] * q * sqrt(q);\n          RP[x * 3] += b0 * k; RP[x * 3 + 1] += b1 * k; RP[x * 3 + 2] += b2 * k;\n        }\n    }\n    const spotRow = lev && abs(y + 0.5 - p.cy) \u003c p.r + 1.5;\n    const lv = ft * (0.22 + 0.78 * clamp((y - TOP) / (CURT - TOP), 0, 1) ** 1.5) + 0.16;\n    const fl = ft * 70 * clamp((y - BACK) / (LIP - BACK), 0, 1) ** 2;\n\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const hr = HR[x];\n      let r, g, b;\n      if (arch[i]) (r = archC[i * 3]), (g = archC[i * 3 + 1]), (b = archC[i * 3 + 2]);\n      else if (y > LIP + 1) (r = house[i * 3] * ft), (g = house[i * 3 + 1] * ft), (b = house[i * 3 + 2] * ft);\n      else if (y === LIP) {\n        const on = (x - XL) % 4 === 1;\n        r = on ? 255 : 190 * ft; g = (on ? 215 : 120) * ft; b = (on ? 140 : 50) * ft;\n      } else if (y === LIP + 1) [r, g, b] = LIPC;\n      else {\n        if (y \u003c hr + 3 - (x & 1)) {\n          if (y \u003c hr - 2) {\n            // The house curtain in velvet folds, lit from the footlights below.\n            const q = 0.5 + 0.5 * sin(fb[x] + 0.5 * sin((y - hem) * 0.09 + x * 0.6) * (0.4 + sstep(12, 0, hr - y)));\n            const v = 0.16 + 0.84 * q * (0.4 + 0.6 * q);\n            const sh = 26 * v * v * v * v * lv;\n            r = 250 * v * lv + sh + w0 * 18 * v; g = r * 0.05 + sh + w1 * 10 * v; b = r * 0.09 + sh + w2 * 14 * v;\n          } else {\n            // The gold braid, and the fringe that hangs below it.\n            const gv = (y \u003c hr ? ((x + y) & 1 ? 0.95 : 0.62) : x & 1 ? 0.5 - 0.12 * (y - hr) : 0.88 - 0.1 * (y - hr)) * (0.35 + 0.75 * lv);\n            [r, g, b] = gilt(gv);\n          }\n        } else if (y \u003c TRUSS) r = g = b = 3;\n        else if (y \u003c SKY) {\n          const lace = y === TRUSS || y === SKY - 1 || (x + y) % 4 === 0 || (x - y + 64) % 4 === 0;\n          r = g = lace ? 52 : 4;\n          b = lace ? 58 : 5;\n        } else {\n          if (y \u003c BACK) {\n            r = A[i * 3] * w0 * 165 + E[i * 3]; g = A[i * 3 + 1] * w1 * 165 + E[i * 3 + 1]; b = A[i * 3 + 2] * w2 * 165 + E[i * 3 + 2];\n            if (S.scene === 0 && y >= 56) {\n              // The moon's path: short glints on the swell, wider toward us.\n              const gd = abs(x + 0.5 - 43) / (2 + (y - 56) * 0.22);\n              const cell = floor((x + 0.5 * y) / 3) + y * 31;\n              const gl = gd \u003c 1.5 ? hash(cell + floor(T * 3 + hash(cell) * 9) * 4096) - 0.6 - 0.18 * gd * gd : 0;\n              if (gl > 0) { r += gl * 480; g += gl * 480; b += gl * 430; }\n            } else if (S.scene === 2) {\n              const w = WIN[i];\n              if (w >= 0 && S.won[w]) { r += 235; g += 170; b += 80; }\n              if (x === 46 && y === 25 && T % 1.6 \u003c 0.3) r += 255;\n            }\n          } else {\n            // The floor, lit by the wash and the lamps' pools.\n            const fa = S.floorA[i];\n            r = fa * (w0 * 55 + fl + RP[x * 3]); g = fa * 0.88 * (w1 * 55 + fl * 0.7 + RP[x * 3 + 1]); b = fa * 0.76 * (w2 * 55 + fl * 0.35 + RP[x * 3 + 2]);\n          }\n          if (y > LENS) {\n            r += RB[x * 3]; g += RB[x * 3 + 1]; b += RB[x * 3 + 2];\n          } else\n            for (let j = 0; j \u003c 6; j++) {\n              // A lamp hangs from its yoke, the lens shining down.\n              const d = abs(x - LAMPS[j]);\n              if (d > 1 || (y === SKY && d)) continue;\n              if (y \u003c LENS) r = g = b = y === SKY ? 60 : d ? 34 : 70;\n              else {\n                const k = (0.45 + 0.55 * LI[j]) * (d ? 190 : 255);\n                r = b0 * k; g = b1 * k; b = b2 * k;\n              }\n            }\n        }\n        // Haze in the air, lit by the wash.\n        r += fog * w0; g += fog * w1; b += fog * w2;\n        if (spotRow) {\n          // The follow spot: a pool of white light, with her shadow in it.\n          const ddx = x + 0.5 - p.cx, ddy = y + 0.5 - p.cy;\n          const inn = sstep(p.r + 1.5, p.r - 1.5, sqrt(ddx * ddx + ddy * ddy)) * lev;\n          if (inn > 0) {\n            const bx = floor(p.hx + (x + 0.5 - p.hx - p.ox) / 1.2);\n            const by = floor(p.fy + (y + 0.5 - p.fy - p.oy) / 1.2);\n            const shade = bx >= 0 && bx \u003c W && by >= 0 && by \u003c H && M[by * W + bx] && !M[i];\n            const k = shade ? inn * 0.1 : inn;\n            const dk = (1 + 1.1 * k) * (shade ? 0.55 : 1);\n            r = r * dk + 62 * k; g = g * dk + 58 * k; b = b * dk + 52 * k;\n          }\n        }\n        const c = M[i];\n        if (c) { r = DCOL[c * 3] * DL; g = DCOL[c * 3 + 1] * DL; b = DCOL[c * 3 + 2] * DL; }\n      }\n      R[i] = r; G[i] = g; B[i] = b;\n    }\n  }\n\n  // Paper snow falls from the flies in front of the backcloth.\n  for (const f of S.scene === 3 ? S.flakes : []) {\n    const x = floor(f.x), y = floor(f.y), i = y * W + x;\n    if (y >= SKY && y >= HR[x] + 3 && !arch[i]) {\n      R[i] += 190; G[i] += 195; B[i] += 210;\n    }\n  }\n  for (let i = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) display.setPixel(x, y, R[i] > 255 ? 255 : R[i], G[i] > 255 ? 255 : G[i], B[i] > 255 ? 255 : B[i]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Gel=0..1, Speed=0.2..3, Scene=0..3, Haze=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Gel","min":0,"max":1,"about":"The colour of the stage wash and the beams: steel blue at 0, turning through violet and rose to amber in the middle, then through green back to blue."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the show runs: at 2 the curtain takes 2.8 s to rise and a whole round of rise, dance, fall and bow is 12 s; at 0.2 it all runs ten times slower."},{"name":"Scene","min":0,"max":3,"about":"The backdrop the curtain rises on: a moonlit sea, a forest, a night city or a snowfall, the others following in that order. Turning it brings the curtain in and out again on the new one."},{"name":"Haze","min":0,"max":1,"about":"How much haze hangs in the air. At 0 the beams are thin shafts; turned up they swell and the whole stage glows in the gel."}],"start":[0,2,0,0.06],"measures":{"motion":0.1444,"detail":0.0876,"edges":0.3879,"complexity":1.7658,"coverage":0.8713,"colour":0.2563,"drift":0.0949},"knobResponse":[0.0636,0.1625,0.077,0.1771]},{"slug":"pulse-bars","title":"Pulse Bars","family":"rhythm","round":1,"note":"음악 없는 하이파이 미터예요. 작은 드럼 머신이 혼자 치고 막대는 그 소리를 듣는 듯 춤춰요.","idea":"A hi-fi meter with no music behind it: a small drum machine plays to itself and the bars dance as if they were hearing it.","buttons":"K1 tap grows the bars from the middle line both ways instead of from the floor.","code":"// ===== Patternflow pattern =====\n// Title:   Pulse Bars\n// Family:  rhythm\n// Idea:    A hi-fi meter with no music behind it: a small drum machine plays to itself and the bars dance as if they were hearing it.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=90..180, Bars=8..32, Decay=0..1\n//\n// Knob 1: Hue. Where the colour starts at the bass end; it climbs a third of the wheel to the treble end.\n// Knob 2: Tempo. Beats per minute of the drum machine, with sixteenth-note hats.\n// Knob 3: Bars. How many bands the meter splits into, from eight fat ones to a comb of LED-wide teeth.\n// Knob 4: Decay. How long each hit rings; low is tight and punchy, high swells and hangs.\n// Buttons: K1 tap grows the bars from the middle line both ways instead of from the floor.\n\nconst W = 64;\nconst H = 128;\nconst MAX_BARS = 32;\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash(n) {\n  let x = (Math.imul(n | 0, 374761393) + 668265263) >>> 0;\n  x = Math.imul(x ^ (x >>> 13), 1274126177) >>> 0;\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction band(f, centre, width) {\n  const d = (f - centre) / width;\n  return Math.exp(-d * d);\n}\n\n// One sixteenth of the drum machine. The bar number seeds small changes,\n// so no two bars play quite the same groove.\nfunction play(p, bar, step) {\n  const seed = bar * 16 + step;\n  let kick = step === 0 ? 1 : 0;\n  if (step === 8 && hash(seed + 101) \u003c 0.85) kick = 1;\n  if ((step === 3 || step === 6 || step === 10 || step === 11 || step === 14) && hash(seed + 202) \u003c 0.22) kick = 0.8;\n  let snare = step === 4 || step === 12 ? 1 : 0;\n  if ((step === 7 || step === 9 || step === 15) && hash(seed + 303) \u003c 0.18) snare = 0.45;\n  if (bar % 4 === 3 && step >= 13 && hash(seed + 404) \u003c 0.7) snare = 0.75;\n  let open = (step === 6 || step === 14) && hash(seed + 505) \u003c 0.3 ? 1 : 0;\n  let hat = open ? 0 : step % 4 === 2 ? 1 : step % 2 === 0 ? 0.75 : hash(seed + 606) \u003c 0.5 ? 0.5 : 0;\n  if (kick) p.env[0] = kick;\n  if (snare) p.env[1] = snare;\n  if (hat) p.env[2] = hat;\n  if (open) p.env[3] = open;\n  // A bass note on every eighth, stepping between a few low bands.\n  if (step % 2 === 0) {\n    p.env[4] = 0.85;\n    p.bassAt = 0.06 + 0.12 * Math.floor(hash(bar * 8 + (step >> 1) + 707) * 4) / 3;\n  }\n  // Every hit gives each band its own small loudness, so the comb is never flat.\n  for (let i = 0; i \u003c MAX_BARS; i++) p.jitter[i] = 0.72 + 0.56 * hash(seed * 64 + i);\n}\n\nexport function setup(params) {\n  const p = params;\n  p.beats = 0;\n  p.step = -1;\n  p.mirror = false;\n  p.env = new Float32Array(5);\n  p.bassAt = 0.1;\n  p.jitter = new Float32Array(MAX_BARS).fill(1);\n  p.level = new Float32Array(MAX_BARS);\n  p.peak = new Float32Array(MAX_BARS);\n  p.hold = new Float32Array(MAX_BARS);\n  p.fall = new Float32Array(MAX_BARS);\n  p.cap = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 90, 8, 0.06];\n  p.hue = k[0];\n  p.bpm = k[1];\n  p.bars = Math.round(k[2]);\n  const decay = k[3];\n  if (input.btnPressed && input.btnPressed[0]) p.mirror = !p.mirror;\n\n  p.beats += (dt * p.bpm) / 60;\n  const sixteenth = Math.floor(p.beats * 4);\n  if (sixteenth !== p.step) {\n    p.step = sixteenth;\n    play(p, Math.floor(sixteenth / 16), sixteenth % 16);\n  }\n  // Time constants in seconds for kick, snare, closed hat, open hat and bass.\n  p.env[0] *= Math.exp(-dt / (0.17 + 0.6 * decay));\n  p.env[1] *= Math.exp(-dt / (0.12 + 0.5 * decay));\n  p.env[2] *= Math.exp(-dt / (0.05 + 0.22 * decay));\n  p.env[3] *= Math.exp(-dt / (0.25 + 0.5 * decay));\n  p.env[4] *= Math.exp(-dt / (0.14 + 0.4 * decay));\n\n  const n = p.bars;\n  const e = p.env;\n  for (let i = 0; i \u003c n; i++) {\n    const f = n > 1 ? i / (n - 1) : 0;\n    // The kick's weight slides down the low bands as it dies, like its pitch.\n    let sum = e[0] * 1.15 * band(f, 0.03 + 0.12 * e[0], 0.17);\n    sum += e[1] * (0.75 * band(f, 0.42, 0.2) + 0.3 * band(f, 0.7, 0.3));\n    sum += e[2] * 0.7 * band(f, 0.86, 0.13);\n    sum += e[3] * 0.75 * band(f, 0.78, 0.2);\n    // A pad under everything that ducks when the kick lands, and the bass note.\n    const duck = 1 - 0.65 * e[0];\n    const pad = 0.2 * (1 - 0.45 * f) * (0.75 + 0.25 * Math.sin(p.beats * 0.785 + f * 6));\n    sum += duck * (pad + e[4] * 0.45 * band(f, p.bassAt, 0.08));\n    sum += 0.03 + 0.04 * hash(p.step * 97 + i);\n    // A tall meter has more room above the bars, so they are driven a little harder.\n    const target = (1 - Math.exp(-sum * p.jitter[i] * 2.1)) * 0.98;\n    const lv = p.level[i];\n    p.level[i] = target > lv ? lv + (target - lv) * Math.min(1, dt * 45) : target;\n    if (p.level[i] >= p.peak[i]) {\n      p.peak[i] = p.level[i];\n      p.hold[i] = 0.25;\n      p.fall[i] = 0;\n    } else if (p.hold[i] > 0) {\n      p.hold[i] -= dt;\n    } else {\n      p.fall[i] += dt * 1.5;\n      p.peak[i] = Math.max(p.level[i], p.peak[i] - p.fall[i] * dt);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const n = p.bars;\n  const gap = n \u003c= 12 ? 2 : 1;\n  const mirror = p.mirror;\n  // Rows from the floor (or from the middle line), in segments of two LEDs and a gap.\n  const reach = mirror ? H / 2 : H;\n  // At 0 the bass end starts in blue.\n  const hue = p.hue + 0.64;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = Math.floor((i * W) / n);\n    const x1 = Math.floor(((i + 1) * W) / n) - gap;\n    const f = n > 1 ? i / (n - 1) : 0;\n    const top = Math.floor(p.level[i] * reach);\n    const peak = Math.floor(p.peak[i] * reach / 3) * 3;\n    for (let lv = 0; lv \u003c reach; lv++) {\n      if (lv % 3 === 2) continue;\n      const lit = lv \u003c top;\n      const isPeak = lv >= peak && lv \u003c peak + 2 && peak > 2;\n      if (!lit && !isPeak) continue;\n      const u = lv / reach;\n      if (isPeak && !lit) {\n        hsv(hue + f * 0.33 + 0.06, 0.35, 1, p.cap);\n      } else {\n        hsv(hue + f * 0.33 + u * 0.08, 0.95 - u * 0.2, 0.45 + 0.55 * u, p.cap);\n      }\n      const c = p.cap;\n      for (let x = x0; x \u003c x1; x++) {\n        if (mirror) {\n          display.setPixel(x, H / 2 - 1 - lv, c[0], c[1], c[2]);\n          display.setPixel(x, H / 2 + lv, c[0], c[1], c[2]);\n        } else {\n          display.setPixel(x, H - 1 - lv, c[0], c[1], c[2]);\n        }\n      }\n    }\n  }\n}\n","layer":{"id":"layer-pulse-bars","type":"code","name":"pulse-bars","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pulse Bars\n// Family:  rhythm\n// Idea:    A hi-fi meter with no music behind it: a small drum machine plays to itself and the bars dance as if they were hearing it.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=90..180, Bars=8..32, Decay=0..1\n//\n// Knob 1: Hue. Where the colour starts at the bass end; it climbs a third of the wheel to the treble end.\n// Knob 2: Tempo. Beats per minute of the drum machine, with sixteenth-note hats.\n// Knob 3: Bars. How many bands the meter splits into, from eight fat ones to a comb of LED-wide teeth.\n// Knob 4: Decay. How long each hit rings; low is tight and punchy, high swells and hangs.\n// Buttons: K1 tap grows the bars from the middle line both ways instead of from the floor.\n\nconst W = 64;\nconst H = 128;\nconst MAX_BARS = 32;\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash(n) {\n  let x = (Math.imul(n | 0, 374761393) + 668265263) >>> 0;\n  x = Math.imul(x ^ (x >>> 13), 1274126177) >>> 0;\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction band(f, centre, width) {\n  const d = (f - centre) / width;\n  return Math.exp(-d * d);\n}\n\n// One sixteenth of the drum machine. The bar number seeds small changes,\n// so no two bars play quite the same groove.\nfunction play(p, bar, step) {\n  const seed = bar * 16 + step;\n  let kick = step === 0 ? 1 : 0;\n  if (step === 8 && hash(seed + 101) \u003c 0.85) kick = 1;\n  if ((step === 3 || step === 6 || step === 10 || step === 11 || step === 14) && hash(seed + 202) \u003c 0.22) kick = 0.8;\n  let snare = step === 4 || step === 12 ? 1 : 0;\n  if ((step === 7 || step === 9 || step === 15) && hash(seed + 303) \u003c 0.18) snare = 0.45;\n  if (bar % 4 === 3 && step >= 13 && hash(seed + 404) \u003c 0.7) snare = 0.75;\n  let open = (step === 6 || step === 14) && hash(seed + 505) \u003c 0.3 ? 1 : 0;\n  let hat = open ? 0 : step % 4 === 2 ? 1 : step % 2 === 0 ? 0.75 : hash(seed + 606) \u003c 0.5 ? 0.5 : 0;\n  if (kick) p.env[0] = kick;\n  if (snare) p.env[1] = snare;\n  if (hat) p.env[2] = hat;\n  if (open) p.env[3] = open;\n  // A bass note on every eighth, stepping between a few low bands.\n  if (step % 2 === 0) {\n    p.env[4] = 0.85;\n    p.bassAt = 0.06 + 0.12 * Math.floor(hash(bar * 8 + (step >> 1) + 707) * 4) / 3;\n  }\n  // Every hit gives each band its own small loudness, so the comb is never flat.\n  for (let i = 0; i \u003c MAX_BARS; i++) p.jitter[i] = 0.72 + 0.56 * hash(seed * 64 + i);\n}\n\nexport function setup(params) {\n  const p = params;\n  p.beats = 0;\n  p.step = -1;\n  p.mirror = false;\n  p.env = new Float32Array(5);\n  p.bassAt = 0.1;\n  p.jitter = new Float32Array(MAX_BARS).fill(1);\n  p.level = new Float32Array(MAX_BARS);\n  p.peak = new Float32Array(MAX_BARS);\n  p.hold = new Float32Array(MAX_BARS);\n  p.fall = new Float32Array(MAX_BARS);\n  p.cap = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 90, 8, 0.06];\n  p.hue = k[0];\n  p.bpm = k[1];\n  p.bars = Math.round(k[2]);\n  const decay = k[3];\n  if (input.btnPressed && input.btnPressed[0]) p.mirror = !p.mirror;\n\n  p.beats += (dt * p.bpm) / 60;\n  const sixteenth = Math.floor(p.beats * 4);\n  if (sixteenth !== p.step) {\n    p.step = sixteenth;\n    play(p, Math.floor(sixteenth / 16), sixteenth % 16);\n  }\n  // Time constants in seconds for kick, snare, closed hat, open hat and bass.\n  p.env[0] *= Math.exp(-dt / (0.17 + 0.6 * decay));\n  p.env[1] *= Math.exp(-dt / (0.12 + 0.5 * decay));\n  p.env[2] *= Math.exp(-dt / (0.05 + 0.22 * decay));\n  p.env[3] *= Math.exp(-dt / (0.25 + 0.5 * decay));\n  p.env[4] *= Math.exp(-dt / (0.14 + 0.4 * decay));\n\n  const n = p.bars;\n  const e = p.env;\n  for (let i = 0; i \u003c n; i++) {\n    const f = n > 1 ? i / (n - 1) : 0;\n    // The kick's weight slides down the low bands as it dies, like its pitch.\n    let sum = e[0] * 1.15 * band(f, 0.03 + 0.12 * e[0], 0.17);\n    sum += e[1] * (0.75 * band(f, 0.42, 0.2) + 0.3 * band(f, 0.7, 0.3));\n    sum += e[2] * 0.7 * band(f, 0.86, 0.13);\n    sum += e[3] * 0.75 * band(f, 0.78, 0.2);\n    // A pad under everything that ducks when the kick lands, and the bass note.\n    const duck = 1 - 0.65 * e[0];\n    const pad = 0.2 * (1 - 0.45 * f) * (0.75 + 0.25 * Math.sin(p.beats * 0.785 + f * 6));\n    sum += duck * (pad + e[4] * 0.45 * band(f, p.bassAt, 0.08));\n    sum += 0.03 + 0.04 * hash(p.step * 97 + i);\n    // A tall meter has more room above the bars, so they are driven a little harder.\n    const target = (1 - Math.exp(-sum * p.jitter[i] * 2.1)) * 0.98;\n    const lv = p.level[i];\n    p.level[i] = target > lv ? lv + (target - lv) * Math.min(1, dt * 45) : target;\n    if (p.level[i] >= p.peak[i]) {\n      p.peak[i] = p.level[i];\n      p.hold[i] = 0.25;\n      p.fall[i] = 0;\n    } else if (p.hold[i] > 0) {\n      p.hold[i] -= dt;\n    } else {\n      p.fall[i] += dt * 1.5;\n      p.peak[i] = Math.max(p.level[i], p.peak[i] - p.fall[i] * dt);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const n = p.bars;\n  const gap = n \u003c= 12 ? 2 : 1;\n  const mirror = p.mirror;\n  // Rows from the floor (or from the middle line), in segments of two LEDs and a gap.\n  const reach = mirror ? H / 2 : H;\n  // At 0 the bass end starts in blue.\n  const hue = p.hue + 0.64;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = Math.floor((i * W) / n);\n    const x1 = Math.floor(((i + 1) * W) / n) - gap;\n    const f = n > 1 ? i / (n - 1) : 0;\n    const top = Math.floor(p.level[i] * reach);\n    const peak = Math.floor(p.peak[i] * reach / 3) * 3;\n    for (let lv = 0; lv \u003c reach; lv++) {\n      if (lv % 3 === 2) continue;\n      const lit = lv \u003c top;\n      const isPeak = lv >= peak && lv \u003c peak + 2 && peak > 2;\n      if (!lit && !isPeak) continue;\n      const u = lv / reach;\n      if (isPeak && !lit) {\n        hsv(hue + f * 0.33 + 0.06, 0.35, 1, p.cap);\n      } else {\n        hsv(hue + f * 0.33 + u * 0.08, 0.95 - u * 0.2, 0.45 + 0.55 * u, p.cap);\n      }\n      const c = p.cap;\n      for (let x = x0; x \u003c x1; x++) {\n        if (mirror) {\n          display.setPixel(x, H / 2 - 1 - lv, c[0], c[1], c[2]);\n          display.setPixel(x, H / 2 + lv, c[0], c[1], c[2]);\n        } else {\n          display.setPixel(x, H - 1 - lv, c[0], c[1], c[2]);\n        }\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Tempo=90..180, Bars=8..32, Decay=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Where the colour starts at the bass end; it climbs a third of the wheel to the treble end."},{"name":"Tempo","min":90,"max":180,"about":"Beats per minute of the drum machine, with sixteenth-note hats."},{"name":"Bars","min":8,"max":32,"about":"How many bands the meter splits into, from eight fat ones to a comb of LED-wide teeth."},{"name":"Decay","min":0,"max":1,"about":"How long each hit rings; low is tight and punchy, high swells and hangs."}],"start":[0,90,8,0.06],"measures":{"motion":0.7885,"detail":0.0861,"edges":0.9999,"complexity":0.1776,"coverage":0.2209,"colour":0.2463,"drift":0.1392},"knobResponse":[0.0897,0.0556,0.0615,0.0607]},{"slug":"rabbit-ears","title":"Rabbit Ears","family":"glitch","round":19,"note":"옛 TV 가 토끼 귀 안테나로 늦은 밤 일기예보를 잡아요. 신호가 흔들리면 진행자와 지도가 색을 잃고 눈 속으로 사라졌다가 블랭킹 띠와 함께 굴러 돌아오고, 오른쪽에는 고스트가 따라붙어요. K1 을 누르면 TV 를 쳐서 그림이 한 바퀴 굴러요.","idea":"An old television in a dark room pulls in a late-night weather forecast through a rabbit-ear antenna, and as the weak signal drifts the presenter and her map fade in and out of the snow, lose their colour, tear sideways and roll through the black blanking bar, with a ghost of the picture a few LEDs to the right.","buttons":"K1 tap slaps the side of the set: the hold slips and the picture rolls round once.","code":"// ===== Patternflow pattern =====\n// Title:   Rabbit Ears\n// Family:  glitch\n// Idea:    An old television in a dark room pulls in a late-night weather forecast through a rabbit-ear antenna, and as the weak signal drifts the presenter and her map fade in and out of the snow, lose their colour, tear sideways and roll through the black blanking bar, with a ghost of the picture a few LEDs to the right.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after analog broadcast reception: receiver noise, the colour killer, lost vertical hold and multipath ghosts\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Signal=0..1, Ghost=0..1\n//\n// Knob 1: Tint. The set's tint control: turns the broadcast's colours round the colour wheel, opening on the forecast's own blue sea and green land.\n// Knob 2: Speed. How fast the signal drifts and the forecast runs; at 2 the station sinks into the snow every 6 to 8 s, with a shallower fade between.\n// Knob 3: Signal. How far the station reaches: at 0 the picture keeps sinking into the snow and the hold slips each time, at 1 it stays with only a dusting of snow.\n// Knob 4: Ghost. The echo off a building across the street: from a faint copy 4 LEDs to the right at 0 to a strong one 19 LEDs over at 1.\n// Buttons: K1 tap slaps the side of the set: the hold slips and the picture rolls round once.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rows of vertical blanking between one picture and the next when the hold slips,\n// and columns of horizontal blanking a torn line wraps through.\nconst VB = 12;\nconst HB = 6;\nconst C = H + VB;\nconst CLOUD_W = 128;\n\n// Colours of the forecast before the tint control turns them.\nconst SEA_DEEP = [4, 14, 56];\nconst SEA_NEAR = [10, 34, 92];\nconst LOW = [28, 86, 32];\nconst HILL = [62, 116, 44];\nconst COAST = [170, 210, 150];\nconst CLOUD = [204, 208, 216];\nconst SUN = [255, 206, 30];\nconst MOON = [232, 230, 186];\nconst DROP = [40, 120, 255];\nconst SKIN = [222, 168, 132];\nconst SHIRT = [228, 228, 232];\nconst BAND = [16, 40, 120];\nconst BAND_TOP = [70, 120, 210];\nconst WHITE = [240, 240, 240];\nconst JACKETS = [[32, 44, 96], [110, 28, 44], [44, 44, 50], [18, 92, 96]];\nconst HAIRS = [[44, 28, 20], [120, 76, 36], [206, 170, 96], [24, 20, 22]];\n\n// A 3 by 5 font, rows from the top, for the clock, the temperatures and the caption.\nconst FONT = {\n  0: \"111101101101111\", 1: \"010110010010111\", 2: \"111001111100111\", 3: \"111001111001111\", 4: \"101101111001001\",\n  5: \"111100111001111\", 6: \"111100111101111\", 7: \"111001001001001\", 8: \"111101111101111\", 9: \"111101111001111\",\n  \":\": \"000010000010000\", T: \"111010010010010\", O: \"010101101101010\", N: \"110101101101101\", I: \"111010010010111\",\n  G: \"111100101101111\", H: \"101101111101101\", M: \"101111111101101\", R: \"110101110101101\", W: \"101101111111101\",\n};\n\nfunction hash2(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise; px is the period in cells along x, or 0 for none.\nfunction vnoise(x, y, s, px) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = px ? ((xi % px) + px) % px : xi;\n  const x1 = px ? (((xi + 1) % px) + px) % px : xi + 1;\n  const a = hash2(x0, yi, s);\n  const b = hash2(x1, yi, s);\n  const c = hash2(x0, yi + 1, s);\n  const d = hash2(x1, yi + 1, s);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.t = 0;\n  P.u = 0;\n  P.frame = 0;\n  P.phi = 0;\n  P.rv = 0;\n  P.slap = -1;\n  P.s = 0.8;\n  P.tint = -1;\n  P.m = new Float32Array(9);\n  P.seed = 1 + Math.floor(Math.random() * 100000);\n  P.rs = (Math.floor(Math.random() * 4294967295) | 1) >>> 0;\n  P.map = new Float32Array(N * 3);\n  P.buf = new Float32Array(N * 3);\n  P.pic = new Float32Array(N * 3);\n  P.snow = new Float32Array(N * 3);\n  P.cloud = new Float32Array(CLOUD_W * H);\n  P.tube = new Uint8Array(N);\n  P.tear = new Int16Array(H);\n  P.jacket = JACKETS[Math.floor(Math.random() * JACKETS.length)];\n  P.hair = HAIRS[Math.floor(Math.random() * HAIRS.length)];\n  P.min = 31 + Math.floor(Math.random() * 25);\n  const s = P.seed;\n  // The land: an island from noise inside a tall oval, hillier inland.\n  const land = new Uint8Array(N);\n  const hill = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const f = 0.5 * vnoise(x / 16, y / 16, s, 0) + 0.3 * vnoise(x / 7, y / 7, s + 1, 0) + 0.2 * vnoise(x / 3.5, y / 3.5, s + 2, 0);\n      const d = Math.sqrt(((x - 38) / 30) ** 2 + ((y - 50) / 60) ** 2);\n      if (d \u003c 0.75 + 0.8 * (f - 0.5)) land[y * W + x] = 1;\n      hill[y * W + x] = vnoise(x / 6, y / 6, s + 3, 0);\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let c;\n      if (land[p]) {\n        const edge = (x > 0 && !land[p - 1]) || (x \u003c W - 1 && !land[p + 1]) || (y > 0 && !land[p - W]) || (y \u003c H - 1 && !land[p + W]);\n        const k = smooth(0.45, 0.8, hill[p]);\n        c = edge ? COAST : [LOW[0] + (HILL[0] - LOW[0]) * k, LOW[1] + (HILL[1] - LOW[1]) * k, LOW[2] + (HILL[2] - LOW[2]) * k];\n      } else {\n        // Shallower water near a coast: count the land within 3 LEDs.\n        let near = 0;\n        for (let dy = -3; dy \u003c= 3; dy += 3) for (let dx = -3; dx \u003c= 3; dx += 3) if (land[clamp(y + dy, 0, H - 1) * W + clamp(x + dx, 0, W - 1)]) near++;\n        const k = Math.min(1, near / 4) * 0.7 + 0.3 * (y / H);\n        c = [SEA_DEEP[0] + (SEA_NEAR[0] - SEA_DEEP[0]) * k, SEA_DEEP[1] + (SEA_NEAR[1] - SEA_DEEP[1]) * k, SEA_DEEP[2] + (SEA_NEAR[2] - SEA_DEEP[2]) * k];\n      }\n      P.map.set(c, p * 3);\n    }\n  // Cloud from the satellite, wrapping every 128 columns so it can keep crossing.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c CLOUD_W; x++) {\n      const c = 0.55 * vnoise(x / 16, y / 16, s + 5, 8) + 0.3 * vnoise(x / 8, y / 8, s + 6, 16) + 0.15 * vnoise(x / 4, y / 4, s + 7, 32);\n      P.cloud[y * CLOUD_W + x] = smooth(0.5, 0.74, c) * 0.75;\n    }\n  // The tube's corners are round.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const cx = Math.max(0, Math.abs(x - 31.5) - 24.5);\n      const cy = Math.max(0, Math.abs(y - 63.5) - 56.5);\n      P.tube[y * W + x] = cx * cx + cy * cy > 49 ? 0 : 1;\n    }\n  // Two forecasts, tonight's and tomorrow's: a symbol and a temperature each.\n  const temp = (lo, hi) => lo + Math.floor(Math.random() * (hi - lo + 1));\n  P.shows = [\n    { name: \"TONIGHT\", spots: [[\"moon\", 44, 18, temp(3, 8)], [\"rain\", 27, 38, temp(5, 9)], [\"cloud\", 47, 58, temp(4, 9)], [\"moon\", 38, 86, temp(2, 7)]] },\n    { name: \"TOMORROW\", spots: [[\"sun\", 42, 20, temp(12, 17)], [\"rain\", 26, 42, temp(9, 13)], [\"sun\", 48, 62, temp(13, 19)], [\"cloud\", 37, 88, temp(11, 15)]] },\n  ];\n  for (let i = 0; i \u003c N * 3; i++) P.snow[i] = Math.random();\n}\n\nfunction put(B, x, y, c, a) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const o = (y * W + x) * 3;\n  if (a === undefined || a >= 1) {\n    B[o] = c[0];\n    B[o + 1] = c[1];\n    B[o + 2] = c[2];\n  } else {\n    B[o] += (c[0] - B[o]) * a;\n    B[o + 1] += (c[1] - B[o + 1]) * a;\n    B[o + 2] += (c[2] - B[o + 2]) * a;\n  }\n}\n\nfunction disc(B, cx, cy, r, c) {\n  for (let y = Math.floor(cy - r); y \u003c= Math.ceil(cy + r); y++)\n    for (let x = Math.floor(cx - r); x \u003c= Math.ceil(cx + r); x++) if ((x - cx) ** 2 + (y - cy) ** 2 \u003c= r * r) put(B, x, y, c);\n}\n\nfunction text(B, str, x, y, c) {\n  for (const ch of str) {\n    const g = FONT[ch];\n    if (g) for (let i = 0; i \u003c 15; i++) if (g[i] === \"1\") put(B, x + (i % 3), y + Math.floor(i / 3), c);\n    x += 4;\n  }\n}\n\nfunction puff(B, x, y) {\n  disc(B, x - 2.5, y + 1, 2.2, [150, 156, 166]);\n  disc(B, x + 2.5, y + 1, 2.2, [150, 156, 166]);\n  disc(B, x, y - 0.5, 2.8, CLOUD);\n  disc(B, x - 2.5, y + 0.5, 1.8, CLOUD);\n  disc(B, x + 2.5, y + 0.5, 1.8, CLOUD);\n}\n\nfunction symbol(B, kind, x, y, deg, u) {\n  if (kind === \"sun\") {\n    for (let k = 0; k \u003c 8; k++) {\n      const a = (k * Math.PI) / 4 + u * 0.4;\n      put(B, x + 5 * Math.cos(a), y + 5 * Math.sin(a), SUN);\n    }\n    disc(B, x, y, 3.2, SUN);\n  } else if (kind === \"moon\") {\n    // A crescent: the disc less a second one up and to the right.\n    for (let j = -4; j \u003c= 4; j++)\n      for (let i = -4; i \u003c= 4; i++) if (i * i + j * j \u003c= 10.5 && (i - 1.8) ** 2 + (j + 1.2) ** 2 > 7.8) put(B, x + i, y + j, MOON);\n  } else {\n    puff(B, x, y);\n    if (kind === \"rain\") for (let k = -1; k \u003c= 1; k++) {\n      const fall = (u * 3 + k * 0.6) % 1;\n      put(B, x + 2 * k, y + 4 + Math.floor(fall * 3), DROP);\n    }\n  }\n  // The temperature in a box beside it: blue when cold, yellow when mild, orange when warm.\n  const box = deg \u003c 7 ? [40, 110, 220] : deg \u003c 14 ? [236, 196, 40] : [240, 128, 30];\n  const ink = deg \u003c 7 ? WHITE : [16, 16, 16];\n  const s = String(deg);\n  const w = s.length * 4 + 1;\n  const bx = x + 5;\n  const by = y - 3;\n  for (let j = 0; j \u003c 7; j++) for (let i = 0; i \u003c w; i++) put(B, bx + i, by + j, box);\n  text(B, s, bx + 1, by + 1, ink);\n}\n\n// The broadcast picture before the set gets at it: the map, its cloud, the symbols,\n// the presenter in front, the caption and the station clock.\nfunction broadcast(P) {\n  const B = P.buf;\n  const u = P.u;\n  B.set(P.map);\n  const ox = u * 3;\n  const o0 = Math.floor(ox);\n  const fo = ox - o0;\n  for (let y = 0; y \u003c H; y++) {\n    const row = y * CLOUD_W;\n    for (let x = 0; x \u003c W; x++) {\n      const i0 = (((x - o0) % CLOUD_W) + CLOUD_W) % CLOUD_W;\n      const i1 = (i0 + CLOUD_W - 1) % CLOUD_W;\n      const a = P.cloud[row + i0] * (1 - fo) + P.cloud[row + i1] * fo;\n      if (a > 0.01) {\n        const o = (y * W + x) * 3;\n        B[o] += (CLOUD[0] - B[o]) * a;\n        B[o + 1] += (CLOUD[1] - B[o + 1]) * a;\n        B[o + 2] += (CLOUD[2] - B[o + 2]) * a;\n      }\n    }\n  }\n  // Tonight's chart for 10 s, then tomorrow's, and round again.\n  const show = P.shows[Math.floor(u / 10) % 2];\n  for (const sp of show.spots) symbol(B, sp[0], sp[1], sp[2], sp[3], u);\n  presenter(P, B, show, u);\n  for (let x = 0; x \u003c W; x++) {\n    put(B, x, 116, BAND_TOP);\n    for (let y = 117; y \u003c H; y++) put(B, x, y, BAND);\n  }\n  text(B, show.name, Math.floor((W - (show.name.length * 4 - 1)) / 2), 119, WHITE);\n  // The station clock in the corner, past midnight.\n  for (let y = 2; y \u003c 10; y++) for (let x = 41; x \u003c 62; x++) {\n    const o = (y * W + x) * 3;\n    B[o] *= 0.35;\n    B[o + 1] *= 0.35;\n    B[o + 2] *= 0.35;\n  }\n  const m = P.min + Math.floor(u / 60);\n  const hh = Math.floor(m / 60) % 24;\n  const mm = m % 60;\n  text(B, `${hh \u003c 10 ? \"0\" : \"\"}${hh}:${mm \u003c 10 ? \"0\" : \"\"}${mm}`, 42, 3, WHITE);\n}\n\nfunction presenter(P, B, show, u) {\n  const sw = 0.8 * Math.sin(u * 0.9);\n  const hx = 12 + sw;\n  const hy = 80;\n  const J = P.jacket;\n  const dark = [J[0] * 0.6, J[1] * 0.6, J[2] * 0.6];\n  // Shoulders down past the caption, widening a little.\n  for (let y = hy + 7; y \u003c H; y++) {\n    const d = y - hy - 7;\n    const half = d \u003c 2 ? 8 + 1.5 * d : 11 + 0.15 * d;\n    for (let x = Math.floor(hx - half); x \u003c= Math.ceil(hx + half); x++) {\n      const v = Math.abs(x - hx) \u003c (hy + 17 - y) * 0.35;\n      const lapel = !v && Math.abs(x - hx) \u003c (hy + 17 - y) * 0.35 + 1.2;\n      put(B, x, y, v ? SHIRT : lapel ? dark : J);\n    }\n  }\n  // The neck and the head, with the hair round the top and sides.\n  for (let y = hy + 4; y \u003c hy + 8; y++) for (let x = Math.round(hx) - 1; x \u003c= Math.round(hx) + 1; x++) put(B, x, y, [SKIN[0] * 0.8, SKIN[1] * 0.8, SKIN[2] * 0.8]);\n  for (let dy = -7; dy \u003c= 6; dy++)\n    for (let dx = -6; dx \u003c= 6; dx++) {\n      const e = (dx / 4.3) ** 2 + (dy / 5.3) ** 2;\n      const hairE = (dx / 5.2) ** 2 + ((dy + 1) / 6.2) ** 2;\n      if (e \u003c 1) put(B, hx + dx, hy + dy, dy \u003c -2.5 + Math.abs(dx) * 0.2 ? P.hair : SKIN);\n      else if (hairE \u003c 1 && dy \u003c 3) put(B, hx + dx, hy + dy, P.hair);\n    }\n  put(B, hx - 2, hy - 1, [40, 30, 30]);\n  put(B, hx + 1, hy - 1, [40, 30, 30]);\n  put(B, hx - 0.5, hy + 2, [170, 90, 90]);\n  // The arm towards the map: she points at each symbol in turn, 2.5 s each, and\n  // after the fourth drops her hand to her side for a beat.\n  const sx = hx + 9;\n  const sy = hy + 10;\n  const k = u / 2.5;\n  const i = Math.floor(k);\n  const f = smooth(0, 0.3, k - i);\n  const spot = (n) => {\n    const j = ((n % 5) + 5) % 5;\n    if (j === 4) return [hx + 10, hy + 26];\n    const sp = show.spots[j];\n    const dx = sp[1] - 3 - sx;\n    const dy = sp[2] - sy;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    const r = Math.min(d, 22);\n    return [sx + (dx / d) * r, sy + (dy / d) * r];\n  };\n  const a = spot(i - 1);\n  const b = spot(i);\n  const hxp = a[0] + (b[0] - a[0]) * f;\n  const hyp = a[1] + (b[1] - a[1]) * f;\n  const mx = (sx + hxp) / 2;\n  const my = (sy + hyp) / 2 + 5;\n  const sleeve = [J[0] * 1.15, J[1] * 1.15, J[2] * 1.15];\n  for (let q = 0; q \u003c= 1; q += 0.05) {\n    disc(B, sx + (mx - sx) * q, sy + (my - sy) * q, 1.7, sleeve);\n    disc(B, mx + (hxp - mx) * q, my + (hyp - my) * q, 1.4, sleeve);\n  }\n  disc(B, hxp, hyp, 1.3, SKIN);\n}\n\n// How deep the station has faded at forecast time u: a deep fade every 6 to 8 s,\n// the first 4.2 s in, and a shallow one between each pair.\nfunction fades(u) {\n  let d = 0;\n  const k0 = Math.floor((u - 4.2) / 7);\n  for (let k = k0 - 1; k \u003c= k0 + 1; k++) {\n    const at = 4.2 + 7 * k + (k > 0 ? (hash2(k, 1, 9) - 0.5) * 1.6 : 0);\n    d += Math.exp(-(((u - at) / 0.75) ** 2));\n    d += (0.3 + 0.15 * hash2(k, 2, 9)) * Math.exp(-(((u - at - 3.5) / 0.45) ** 2));\n  }\n  return d;\n}\n\n// The tint control: a turn round the grey axis.\nfunction tintMatrix(m, hue) {\n  const a = hue * Math.PI * 2;\n  const c = Math.cos(a);\n  const s = Math.sin(a);\n  const q = (1 - c) / 3;\n  const r3 = Math.sqrt(1 / 3) * s;\n  m[0] = c + q;\n  m[1] = q - r3;\n  m[2] = q + r3;\n  m[3] = q + r3;\n  m[4] = c + q;\n  m[5] = q - r3;\n  m[6] = q - r3;\n  m[7] = q + r3;\n  m[8] = c + q;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const speed = clamp(k[1], 0.2, 3);\n  const sig = clamp(k[2], 0, 1);\n  P.ghost = clamp(k[3], 0, 1);\n  if (k[0] !== P.tint) {\n    P.tint = k[0];\n    tintMatrix(P.m, k[0]);\n  }\n  P.t += dt;\n  P.u += (dt * speed) / 2;\n  P.frame++;\n  // The signal wanders a little, flutters as aircraft pass, and fades.\n  const u = P.u;\n  P.s = clamp(0.76 + 0.24 * sig + 0.05 * Math.sin((2 * Math.PI * u) / 3.1) - (1 - 0.75 * sig) * fades(u) + 0.04 * Math.sin(P.t * 11), 0, 1);\n  // When the sync pulses sink into the noise the vertical hold slips and the picture\n  // rolls; once the signal is back it rolls on to the next whole frame and locks there.\n  if (input.btnPressed && input.btnPressed[0]) P.slap = Math.floor(P.phi) + 1;\n  const slipping = P.s \u003c 0.3 || P.slap > P.phi + 0.35;\n  if (slipping) P.rv += (0.9 - P.rv) * Math.min(1, dt * 2.5);\n  else if (P.rv > 0) P.rv = Math.max(0.3, P.rv - dt * 0.6);\n  if (P.rv > 0) {\n    const next = Math.floor(P.phi) + 1;\n    P.phi += P.rv * dt;\n    if (!slipping && P.phi >= next) {\n      P.phi = next;\n      P.rv = 0;\n    }\n  }\n  // Lines lose their place sideways as the signal weakens.\n  const tear = smooth(0.6, 0.15, P.s) * 12;\n  const jit = 0.4 + 1.2 * (1 - P.s);\n  for (let y = 0; y \u003c H; y++) {\n    const band = Math.sin(y * 0.09 + P.t * 1.7) * Math.sin(y * 0.031 - P.t * 0.6);\n    P.tear[y] = Math.round(tear * Math.max(0, band) + (hash2(y, P.frame, 7) - 0.5) * 2 * jit);\n  }\n  broadcast(P);\n  // The tint control, and the colour killer: below a usable signal the set drops\n  // the colour and shows the picture in black and white.\n  const m = P.m;\n  const kill = smooth(0.3, 0.6, P.s);\n  const B = P.buf;\n  const out = P.pic;\n  for (let o = 0; o \u003c N * 3; o += 3) {\n    const r = B[o];\n    const g = B[o + 1];\n    const b = B[o + 2];\n    const grey = (r + g + b) / 3;\n    out[o] = grey + (r * m[0] + g * m[1] + b * m[2] - grey) * kill;\n    out[o + 1] = grey + (r * m[3] + g * m[4] + b * m[5] - grey) * kill;\n    out[o + 2] = grey + (r * m[6] + g * m[7] + b * m[8] - grey) * kill;\n  }\n  // The snow: the set redraws one field of lines a frame, odd then even.\n  // The colour grain goes with the colour: the killer greys the snow too.\n  let rs = P.rs;\n  const S = P.snow;\n  const chroma = 0.06 * kill;\n  for (let y = P.frame & 1; y \u003c H; y += 2)\n    for (let x = 0; x \u003c W; x++) {\n      rs ^= rs \u003c\u003c 13;\n      rs ^= rs >>> 17;\n      rs ^= rs \u003c\u003c 5;\n      const v = rs >>> 0;\n      // Twelve steps of grey, a faint cast of colour on some grains, and now and\n      // then a white spark.\n      let l = Math.floor((((v & 255) + ((v >>> 8) & 255)) / 511) * 12) / 11;\n      if (((v >>> 16) & 255) > 250) l = 1;\n      const o = (y * W + x) * 3;\n      const jr = (((v >>> 24) & 3) - 1) * chroma;\n      const jb = (((v >>> 26) & 3) - 1) * chroma;\n      S[o] = l + jr;\n      S[o + 1] = l;\n      S[o + 2] = l + jb;\n    }\n  P.rs = rs;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const pic = P.pic;\n  const S = P.snow;\n  const s = P.s;\n  // The picture holds on longer than the signal's share says, and the set's gain\n  // turns the snow up bright when there is nothing else to show.\n  const gs = 255 * (1.4 * (1 - s) * (1 - s) + 0.03);\n  const gd = Math.round(4 + 15 * P.ghost);\n  const ga = 0.22 + 0.5 * P.ghost;\n  // The echo shares the set's gain with the direct picture.\n  const gp = Math.pow(s, 0.6) / (1 + ga);\n  const roll = Math.floor(P.phi * C);\n  const data = (P.frame >> 1) * 31;\n  for (let y = 0; y \u003c H; y++) {\n    const sy = (y + roll) % C;\n    const bar = sy >= H;\n    const row = sy * W;\n    const shift = P.tear[y];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (bar) {\n        // Teletext rides in the blanking: two lines of white dashes.\n        const line = sy - H;\n        if ((line === 3 || line === 5) && hash2(x >> 1, data + line, 3) > 0.5) r = g = b = 200;\n      } else {\n        const sx = (((x - shift) % (W + HB)) + W + HB) % (W + HB);\n        if (sx \u003c W) {\n          const o = (row + sx) * 3;\n          r = pic[o];\n          g = pic[o + 1];\n          b = pic[o + 2];\n          const gx = sx - gd;\n          if (gx >= 0) {\n            const q = (row + gx) * 3;\n            r += pic[q] * ga;\n            g += pic[q + 1] * ga;\n            b += pic[q + 2] * ga;\n          }\n        }\n      }\n      const o = p * 3;\n      const v = P.tube[p];\n      r = (r * gp + S[o] * gs) * v;\n      g = (g * gp + S[o + 1] * gs) * v;\n      b = (b * gp + S[o + 2] * gs) * v;\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n  }\n}\n","layer":{"id":"layer-rabbit-ears","type":"code","name":"rabbit-ears","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rabbit Ears\n// Family:  glitch\n// Idea:    An old television in a dark room pulls in a late-night weather forecast through a rabbit-ear antenna, and as the weak signal drifts the presenter and her map fade in and out of the snow, lose their colour, tear sideways and roll through the black blanking bar, with a ghost of the picture a few LEDs to the right.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after analog broadcast reception: receiver noise, the colour killer, lost vertical hold and multipath ghosts\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Signal=0..1, Ghost=0..1\n//\n// Knob 1: Tint. The set's tint control: turns the broadcast's colours round the colour wheel, opening on the forecast's own blue sea and green land.\n// Knob 2: Speed. How fast the signal drifts and the forecast runs; at 2 the station sinks into the snow every 6 to 8 s, with a shallower fade between.\n// Knob 3: Signal. How far the station reaches: at 0 the picture keeps sinking into the snow and the hold slips each time, at 1 it stays with only a dusting of snow.\n// Knob 4: Ghost. The echo off a building across the street: from a faint copy 4 LEDs to the right at 0 to a strong one 19 LEDs over at 1.\n// Buttons: K1 tap slaps the side of the set: the hold slips and the picture rolls round once.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rows of vertical blanking between one picture and the next when the hold slips,\n// and columns of horizontal blanking a torn line wraps through.\nconst VB = 12;\nconst HB = 6;\nconst C = H + VB;\nconst CLOUD_W = 128;\n\n// Colours of the forecast before the tint control turns them.\nconst SEA_DEEP = [4, 14, 56];\nconst SEA_NEAR = [10, 34, 92];\nconst LOW = [28, 86, 32];\nconst HILL = [62, 116, 44];\nconst COAST = [170, 210, 150];\nconst CLOUD = [204, 208, 216];\nconst SUN = [255, 206, 30];\nconst MOON = [232, 230, 186];\nconst DROP = [40, 120, 255];\nconst SKIN = [222, 168, 132];\nconst SHIRT = [228, 228, 232];\nconst BAND = [16, 40, 120];\nconst BAND_TOP = [70, 120, 210];\nconst WHITE = [240, 240, 240];\nconst JACKETS = [[32, 44, 96], [110, 28, 44], [44, 44, 50], [18, 92, 96]];\nconst HAIRS = [[44, 28, 20], [120, 76, 36], [206, 170, 96], [24, 20, 22]];\n\n// A 3 by 5 font, rows from the top, for the clock, the temperatures and the caption.\nconst FONT = {\n  0: \"111101101101111\", 1: \"010110010010111\", 2: \"111001111100111\", 3: \"111001111001111\", 4: \"101101111001001\",\n  5: \"111100111001111\", 6: \"111100111101111\", 7: \"111001001001001\", 8: \"111101111101111\", 9: \"111101111001111\",\n  \":\": \"000010000010000\", T: \"111010010010010\", O: \"010101101101010\", N: \"110101101101101\", I: \"111010010010111\",\n  G: \"111100101101111\", H: \"101101111101101\", M: \"101111111101101\", R: \"110101110101101\", W: \"101101111111101\",\n};\n\nfunction hash2(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise; px is the period in cells along x, or 0 for none.\nfunction vnoise(x, y, s, px) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = px ? ((xi % px) + px) % px : xi;\n  const x1 = px ? (((xi + 1) % px) + px) % px : xi + 1;\n  const a = hash2(x0, yi, s);\n  const b = hash2(x1, yi, s);\n  const c = hash2(x0, yi + 1, s);\n  const d = hash2(x1, yi + 1, s);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.t = 0;\n  P.u = 0;\n  P.frame = 0;\n  P.phi = 0;\n  P.rv = 0;\n  P.slap = -1;\n  P.s = 0.8;\n  P.tint = -1;\n  P.m = new Float32Array(9);\n  P.seed = 1 + Math.floor(Math.random() * 100000);\n  P.rs = (Math.floor(Math.random() * 4294967295) | 1) >>> 0;\n  P.map = new Float32Array(N * 3);\n  P.buf = new Float32Array(N * 3);\n  P.pic = new Float32Array(N * 3);\n  P.snow = new Float32Array(N * 3);\n  P.cloud = new Float32Array(CLOUD_W * H);\n  P.tube = new Uint8Array(N);\n  P.tear = new Int16Array(H);\n  P.jacket = JACKETS[Math.floor(Math.random() * JACKETS.length)];\n  P.hair = HAIRS[Math.floor(Math.random() * HAIRS.length)];\n  P.min = 31 + Math.floor(Math.random() * 25);\n  const s = P.seed;\n  // The land: an island from noise inside a tall oval, hillier inland.\n  const land = new Uint8Array(N);\n  const hill = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const f = 0.5 * vnoise(x / 16, y / 16, s, 0) + 0.3 * vnoise(x / 7, y / 7, s + 1, 0) + 0.2 * vnoise(x / 3.5, y / 3.5, s + 2, 0);\n      const d = Math.sqrt(((x - 38) / 30) ** 2 + ((y - 50) / 60) ** 2);\n      if (d \u003c 0.75 + 0.8 * (f - 0.5)) land[y * W + x] = 1;\n      hill[y * W + x] = vnoise(x / 6, y / 6, s + 3, 0);\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let c;\n      if (land[p]) {\n        const edge = (x > 0 && !land[p - 1]) || (x \u003c W - 1 && !land[p + 1]) || (y > 0 && !land[p - W]) || (y \u003c H - 1 && !land[p + W]);\n        const k = smooth(0.45, 0.8, hill[p]);\n        c = edge ? COAST : [LOW[0] + (HILL[0] - LOW[0]) * k, LOW[1] + (HILL[1] - LOW[1]) * k, LOW[2] + (HILL[2] - LOW[2]) * k];\n      } else {\n        // Shallower water near a coast: count the land within 3 LEDs.\n        let near = 0;\n        for (let dy = -3; dy \u003c= 3; dy += 3) for (let dx = -3; dx \u003c= 3; dx += 3) if (land[clamp(y + dy, 0, H - 1) * W + clamp(x + dx, 0, W - 1)]) near++;\n        const k = Math.min(1, near / 4) * 0.7 + 0.3 * (y / H);\n        c = [SEA_DEEP[0] + (SEA_NEAR[0] - SEA_DEEP[0]) * k, SEA_DEEP[1] + (SEA_NEAR[1] - SEA_DEEP[1]) * k, SEA_DEEP[2] + (SEA_NEAR[2] - SEA_DEEP[2]) * k];\n      }\n      P.map.set(c, p * 3);\n    }\n  // Cloud from the satellite, wrapping every 128 columns so it can keep crossing.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c CLOUD_W; x++) {\n      const c = 0.55 * vnoise(x / 16, y / 16, s + 5, 8) + 0.3 * vnoise(x / 8, y / 8, s + 6, 16) + 0.15 * vnoise(x / 4, y / 4, s + 7, 32);\n      P.cloud[y * CLOUD_W + x] = smooth(0.5, 0.74, c) * 0.75;\n    }\n  // The tube's corners are round.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const cx = Math.max(0, Math.abs(x - 31.5) - 24.5);\n      const cy = Math.max(0, Math.abs(y - 63.5) - 56.5);\n      P.tube[y * W + x] = cx * cx + cy * cy > 49 ? 0 : 1;\n    }\n  // Two forecasts, tonight's and tomorrow's: a symbol and a temperature each.\n  const temp = (lo, hi) => lo + Math.floor(Math.random() * (hi - lo + 1));\n  P.shows = [\n    { name: \"TONIGHT\", spots: [[\"moon\", 44, 18, temp(3, 8)], [\"rain\", 27, 38, temp(5, 9)], [\"cloud\", 47, 58, temp(4, 9)], [\"moon\", 38, 86, temp(2, 7)]] },\n    { name: \"TOMORROW\", spots: [[\"sun\", 42, 20, temp(12, 17)], [\"rain\", 26, 42, temp(9, 13)], [\"sun\", 48, 62, temp(13, 19)], [\"cloud\", 37, 88, temp(11, 15)]] },\n  ];\n  for (let i = 0; i \u003c N * 3; i++) P.snow[i] = Math.random();\n}\n\nfunction put(B, x, y, c, a) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const o = (y * W + x) * 3;\n  if (a === undefined || a >= 1) {\n    B[o] = c[0];\n    B[o + 1] = c[1];\n    B[o + 2] = c[2];\n  } else {\n    B[o] += (c[0] - B[o]) * a;\n    B[o + 1] += (c[1] - B[o + 1]) * a;\n    B[o + 2] += (c[2] - B[o + 2]) * a;\n  }\n}\n\nfunction disc(B, cx, cy, r, c) {\n  for (let y = Math.floor(cy - r); y \u003c= Math.ceil(cy + r); y++)\n    for (let x = Math.floor(cx - r); x \u003c= Math.ceil(cx + r); x++) if ((x - cx) ** 2 + (y - cy) ** 2 \u003c= r * r) put(B, x, y, c);\n}\n\nfunction text(B, str, x, y, c) {\n  for (const ch of str) {\n    const g = FONT[ch];\n    if (g) for (let i = 0; i \u003c 15; i++) if (g[i] === \"1\") put(B, x + (i % 3), y + Math.floor(i / 3), c);\n    x += 4;\n  }\n}\n\nfunction puff(B, x, y) {\n  disc(B, x - 2.5, y + 1, 2.2, [150, 156, 166]);\n  disc(B, x + 2.5, y + 1, 2.2, [150, 156, 166]);\n  disc(B, x, y - 0.5, 2.8, CLOUD);\n  disc(B, x - 2.5, y + 0.5, 1.8, CLOUD);\n  disc(B, x + 2.5, y + 0.5, 1.8, CLOUD);\n}\n\nfunction symbol(B, kind, x, y, deg, u) {\n  if (kind === \"sun\") {\n    for (let k = 0; k \u003c 8; k++) {\n      const a = (k * Math.PI) / 4 + u * 0.4;\n      put(B, x + 5 * Math.cos(a), y + 5 * Math.sin(a), SUN);\n    }\n    disc(B, x, y, 3.2, SUN);\n  } else if (kind === \"moon\") {\n    // A crescent: the disc less a second one up and to the right.\n    for (let j = -4; j \u003c= 4; j++)\n      for (let i = -4; i \u003c= 4; i++) if (i * i + j * j \u003c= 10.5 && (i - 1.8) ** 2 + (j + 1.2) ** 2 > 7.8) put(B, x + i, y + j, MOON);\n  } else {\n    puff(B, x, y);\n    if (kind === \"rain\") for (let k = -1; k \u003c= 1; k++) {\n      const fall = (u * 3 + k * 0.6) % 1;\n      put(B, x + 2 * k, y + 4 + Math.floor(fall * 3), DROP);\n    }\n  }\n  // The temperature in a box beside it: blue when cold, yellow when mild, orange when warm.\n  const box = deg \u003c 7 ? [40, 110, 220] : deg \u003c 14 ? [236, 196, 40] : [240, 128, 30];\n  const ink = deg \u003c 7 ? WHITE : [16, 16, 16];\n  const s = String(deg);\n  const w = s.length * 4 + 1;\n  const bx = x + 5;\n  const by = y - 3;\n  for (let j = 0; j \u003c 7; j++) for (let i = 0; i \u003c w; i++) put(B, bx + i, by + j, box);\n  text(B, s, bx + 1, by + 1, ink);\n}\n\n// The broadcast picture before the set gets at it: the map, its cloud, the symbols,\n// the presenter in front, the caption and the station clock.\nfunction broadcast(P) {\n  const B = P.buf;\n  const u = P.u;\n  B.set(P.map);\n  const ox = u * 3;\n  const o0 = Math.floor(ox);\n  const fo = ox - o0;\n  for (let y = 0; y \u003c H; y++) {\n    const row = y * CLOUD_W;\n    for (let x = 0; x \u003c W; x++) {\n      const i0 = (((x - o0) % CLOUD_W) + CLOUD_W) % CLOUD_W;\n      const i1 = (i0 + CLOUD_W - 1) % CLOUD_W;\n      const a = P.cloud[row + i0] * (1 - fo) + P.cloud[row + i1] * fo;\n      if (a > 0.01) {\n        const o = (y * W + x) * 3;\n        B[o] += (CLOUD[0] - B[o]) * a;\n        B[o + 1] += (CLOUD[1] - B[o + 1]) * a;\n        B[o + 2] += (CLOUD[2] - B[o + 2]) * a;\n      }\n    }\n  }\n  // Tonight's chart for 10 s, then tomorrow's, and round again.\n  const show = P.shows[Math.floor(u / 10) % 2];\n  for (const sp of show.spots) symbol(B, sp[0], sp[1], sp[2], sp[3], u);\n  presenter(P, B, show, u);\n  for (let x = 0; x \u003c W; x++) {\n    put(B, x, 116, BAND_TOP);\n    for (let y = 117; y \u003c H; y++) put(B, x, y, BAND);\n  }\n  text(B, show.name, Math.floor((W - (show.name.length * 4 - 1)) / 2), 119, WHITE);\n  // The station clock in the corner, past midnight.\n  for (let y = 2; y \u003c 10; y++) for (let x = 41; x \u003c 62; x++) {\n    const o = (y * W + x) * 3;\n    B[o] *= 0.35;\n    B[o + 1] *= 0.35;\n    B[o + 2] *= 0.35;\n  }\n  const m = P.min + Math.floor(u / 60);\n  const hh = Math.floor(m / 60) % 24;\n  const mm = m % 60;\n  text(B, `${hh \u003c 10 ? \"0\" : \"\"}${hh}:${mm \u003c 10 ? \"0\" : \"\"}${mm}`, 42, 3, WHITE);\n}\n\nfunction presenter(P, B, show, u) {\n  const sw = 0.8 * Math.sin(u * 0.9);\n  const hx = 12 + sw;\n  const hy = 80;\n  const J = P.jacket;\n  const dark = [J[0] * 0.6, J[1] * 0.6, J[2] * 0.6];\n  // Shoulders down past the caption, widening a little.\n  for (let y = hy + 7; y \u003c H; y++) {\n    const d = y - hy - 7;\n    const half = d \u003c 2 ? 8 + 1.5 * d : 11 + 0.15 * d;\n    for (let x = Math.floor(hx - half); x \u003c= Math.ceil(hx + half); x++) {\n      const v = Math.abs(x - hx) \u003c (hy + 17 - y) * 0.35;\n      const lapel = !v && Math.abs(x - hx) \u003c (hy + 17 - y) * 0.35 + 1.2;\n      put(B, x, y, v ? SHIRT : lapel ? dark : J);\n    }\n  }\n  // The neck and the head, with the hair round the top and sides.\n  for (let y = hy + 4; y \u003c hy + 8; y++) for (let x = Math.round(hx) - 1; x \u003c= Math.round(hx) + 1; x++) put(B, x, y, [SKIN[0] * 0.8, SKIN[1] * 0.8, SKIN[2] * 0.8]);\n  for (let dy = -7; dy \u003c= 6; dy++)\n    for (let dx = -6; dx \u003c= 6; dx++) {\n      const e = (dx / 4.3) ** 2 + (dy / 5.3) ** 2;\n      const hairE = (dx / 5.2) ** 2 + ((dy + 1) / 6.2) ** 2;\n      if (e \u003c 1) put(B, hx + dx, hy + dy, dy \u003c -2.5 + Math.abs(dx) * 0.2 ? P.hair : SKIN);\n      else if (hairE \u003c 1 && dy \u003c 3) put(B, hx + dx, hy + dy, P.hair);\n    }\n  put(B, hx - 2, hy - 1, [40, 30, 30]);\n  put(B, hx + 1, hy - 1, [40, 30, 30]);\n  put(B, hx - 0.5, hy + 2, [170, 90, 90]);\n  // The arm towards the map: she points at each symbol in turn, 2.5 s each, and\n  // after the fourth drops her hand to her side for a beat.\n  const sx = hx + 9;\n  const sy = hy + 10;\n  const k = u / 2.5;\n  const i = Math.floor(k);\n  const f = smooth(0, 0.3, k - i);\n  const spot = (n) => {\n    const j = ((n % 5) + 5) % 5;\n    if (j === 4) return [hx + 10, hy + 26];\n    const sp = show.spots[j];\n    const dx = sp[1] - 3 - sx;\n    const dy = sp[2] - sy;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    const r = Math.min(d, 22);\n    return [sx + (dx / d) * r, sy + (dy / d) * r];\n  };\n  const a = spot(i - 1);\n  const b = spot(i);\n  const hxp = a[0] + (b[0] - a[0]) * f;\n  const hyp = a[1] + (b[1] - a[1]) * f;\n  const mx = (sx + hxp) / 2;\n  const my = (sy + hyp) / 2 + 5;\n  const sleeve = [J[0] * 1.15, J[1] * 1.15, J[2] * 1.15];\n  for (let q = 0; q \u003c= 1; q += 0.05) {\n    disc(B, sx + (mx - sx) * q, sy + (my - sy) * q, 1.7, sleeve);\n    disc(B, mx + (hxp - mx) * q, my + (hyp - my) * q, 1.4, sleeve);\n  }\n  disc(B, hxp, hyp, 1.3, SKIN);\n}\n\n// How deep the station has faded at forecast time u: a deep fade every 6 to 8 s,\n// the first 4.2 s in, and a shallow one between each pair.\nfunction fades(u) {\n  let d = 0;\n  const k0 = Math.floor((u - 4.2) / 7);\n  for (let k = k0 - 1; k \u003c= k0 + 1; k++) {\n    const at = 4.2 + 7 * k + (k > 0 ? (hash2(k, 1, 9) - 0.5) * 1.6 : 0);\n    d += Math.exp(-(((u - at) / 0.75) ** 2));\n    d += (0.3 + 0.15 * hash2(k, 2, 9)) * Math.exp(-(((u - at - 3.5) / 0.45) ** 2));\n  }\n  return d;\n}\n\n// The tint control: a turn round the grey axis.\nfunction tintMatrix(m, hue) {\n  const a = hue * Math.PI * 2;\n  const c = Math.cos(a);\n  const s = Math.sin(a);\n  const q = (1 - c) / 3;\n  const r3 = Math.sqrt(1 / 3) * s;\n  m[0] = c + q;\n  m[1] = q - r3;\n  m[2] = q + r3;\n  m[3] = q + r3;\n  m[4] = c + q;\n  m[5] = q - r3;\n  m[6] = q - r3;\n  m[7] = q + r3;\n  m[8] = c + q;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const speed = clamp(k[1], 0.2, 3);\n  const sig = clamp(k[2], 0, 1);\n  P.ghost = clamp(k[3], 0, 1);\n  if (k[0] !== P.tint) {\n    P.tint = k[0];\n    tintMatrix(P.m, k[0]);\n  }\n  P.t += dt;\n  P.u += (dt * speed) / 2;\n  P.frame++;\n  // The signal wanders a little, flutters as aircraft pass, and fades.\n  const u = P.u;\n  P.s = clamp(0.76 + 0.24 * sig + 0.05 * Math.sin((2 * Math.PI * u) / 3.1) - (1 - 0.75 * sig) * fades(u) + 0.04 * Math.sin(P.t * 11), 0, 1);\n  // When the sync pulses sink into the noise the vertical hold slips and the picture\n  // rolls; once the signal is back it rolls on to the next whole frame and locks there.\n  if (input.btnPressed && input.btnPressed[0]) P.slap = Math.floor(P.phi) + 1;\n  const slipping = P.s \u003c 0.3 || P.slap > P.phi + 0.35;\n  if (slipping) P.rv += (0.9 - P.rv) * Math.min(1, dt * 2.5);\n  else if (P.rv > 0) P.rv = Math.max(0.3, P.rv - dt * 0.6);\n  if (P.rv > 0) {\n    const next = Math.floor(P.phi) + 1;\n    P.phi += P.rv * dt;\n    if (!slipping && P.phi >= next) {\n      P.phi = next;\n      P.rv = 0;\n    }\n  }\n  // Lines lose their place sideways as the signal weakens.\n  const tear = smooth(0.6, 0.15, P.s) * 12;\n  const jit = 0.4 + 1.2 * (1 - P.s);\n  for (let y = 0; y \u003c H; y++) {\n    const band = Math.sin(y * 0.09 + P.t * 1.7) * Math.sin(y * 0.031 - P.t * 0.6);\n    P.tear[y] = Math.round(tear * Math.max(0, band) + (hash2(y, P.frame, 7) - 0.5) * 2 * jit);\n  }\n  broadcast(P);\n  // The tint control, and the colour killer: below a usable signal the set drops\n  // the colour and shows the picture in black and white.\n  const m = P.m;\n  const kill = smooth(0.3, 0.6, P.s);\n  const B = P.buf;\n  const out = P.pic;\n  for (let o = 0; o \u003c N * 3; o += 3) {\n    const r = B[o];\n    const g = B[o + 1];\n    const b = B[o + 2];\n    const grey = (r + g + b) / 3;\n    out[o] = grey + (r * m[0] + g * m[1] + b * m[2] - grey) * kill;\n    out[o + 1] = grey + (r * m[3] + g * m[4] + b * m[5] - grey) * kill;\n    out[o + 2] = grey + (r * m[6] + g * m[7] + b * m[8] - grey) * kill;\n  }\n  // The snow: the set redraws one field of lines a frame, odd then even.\n  // The colour grain goes with the colour: the killer greys the snow too.\n  let rs = P.rs;\n  const S = P.snow;\n  const chroma = 0.06 * kill;\n  for (let y = P.frame & 1; y \u003c H; y += 2)\n    for (let x = 0; x \u003c W; x++) {\n      rs ^= rs \u003c\u003c 13;\n      rs ^= rs >>> 17;\n      rs ^= rs \u003c\u003c 5;\n      const v = rs >>> 0;\n      // Twelve steps of grey, a faint cast of colour on some grains, and now and\n      // then a white spark.\n      let l = Math.floor((((v & 255) + ((v >>> 8) & 255)) / 511) * 12) / 11;\n      if (((v >>> 16) & 255) > 250) l = 1;\n      const o = (y * W + x) * 3;\n      const jr = (((v >>> 24) & 3) - 1) * chroma;\n      const jb = (((v >>> 26) & 3) - 1) * chroma;\n      S[o] = l + jr;\n      S[o + 1] = l;\n      S[o + 2] = l + jb;\n    }\n  P.rs = rs;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const pic = P.pic;\n  const S = P.snow;\n  const s = P.s;\n  // The picture holds on longer than the signal's share says, and the set's gain\n  // turns the snow up bright when there is nothing else to show.\n  const gs = 255 * (1.4 * (1 - s) * (1 - s) + 0.03);\n  const gd = Math.round(4 + 15 * P.ghost);\n  const ga = 0.22 + 0.5 * P.ghost;\n  // The echo shares the set's gain with the direct picture.\n  const gp = Math.pow(s, 0.6) / (1 + ga);\n  const roll = Math.floor(P.phi * C);\n  const data = (P.frame >> 1) * 31;\n  for (let y = 0; y \u003c H; y++) {\n    const sy = (y + roll) % C;\n    const bar = sy >= H;\n    const row = sy * W;\n    const shift = P.tear[y];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (bar) {\n        // Teletext rides in the blanking: two lines of white dashes.\n        const line = sy - H;\n        if ((line === 3 || line === 5) && hash2(x >> 1, data + line, 3) > 0.5) r = g = b = 200;\n      } else {\n        const sx = (((x - shift) % (W + HB)) + W + HB) % (W + HB);\n        if (sx \u003c W) {\n          const o = (row + sx) * 3;\n          r = pic[o];\n          g = pic[o + 1];\n          b = pic[o + 2];\n          const gx = sx - gd;\n          if (gx >= 0) {\n            const q = (row + gx) * 3;\n            r += pic[q] * ga;\n            g += pic[q + 1] * ga;\n            b += pic[q + 2] * ga;\n          }\n        }\n      }\n      const o = p * 3;\n      const v = P.tube[p];\n      r = (r * gp + S[o] * gs) * v;\n      g = (g * gp + S[o + 1] * gs) * v;\n      b = (b * gp + S[o + 2] * gs) * v;\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tint=0..1, Speed=0.2..3, Signal=0..1, Ghost=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tint","min":0,"max":1,"about":"The set's tint control: turns the broadcast's colours round the colour wheel, opening on the forecast's own blue sea and green land."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the signal drifts and the forecast runs; at 2 the station sinks into the snow every 6 to 8 s, with a shallower fade between."},{"name":"Signal","min":0,"max":1,"about":"How far the station reaches: at 0 the picture keeps sinking into the snow and the hold slips each time, at 1 it stays with only a dusting of snow."},{"name":"Ghost","min":0,"max":1,"about":"The echo off a building across the street: from a faint copy 4 LEDs to the right at 0 to a strong one 19 LEDs over at 1."}],"start":[0,2,0,0.06],"measures":{"motion":2.2448,"detail":0.1335,"edges":0.365,"complexity":2.3725,"coverage":0.9855,"colour":0.1077,"drift":0.2857},"knobResponse":[0.1208,0.2747,0.0525,0.0711]},{"slug":"rainstorm","title":"Rainstorm","family":"weather","round":2,"note":"빗줄기가 128줄을 다 떨어져 물웅덩이에 고리를 남기고, 가끔 갈라진 번개가 구름을 찢으며 쏟아지는 비를 한순간 밝혀요.","idea":"Rain falls the whole 128 rows into a puddle that rings where the drops land, and now and then a branching bolt splits the cloud and lights the downpour for a moment.","buttons":"K1 tap strikes lightning now.","code":"// ===== Patternflow pattern =====\n// Title:   Rainstorm\n// Family:  weather\n// Idea:    Rain falls the whole 128 rows into a puddle that rings where the drops land, and now and then a branching bolt splits the cloud and lights the downpour for a moment.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rain=0.2..3, Wind=-1..1, Storm=0..1\n//\n// Knob 1: Hue. The tint of the night, the cloud and the rain, starting from slate blue.\n// Knob 2: Rain. From a drizzle of a few slow drops to a downpour.\n// Knob 3: Wind. At 0 the rain falls straight; either way it slants and gusts, and the cloud runs with it.\n// Knob 4: Storm. How often lightning comes, from one strike in a while to about two a second, and how low and restless the cloud hangs.\n// Buttons: K1 tap strikes lightning now.\n\nconst W = 64;\nconst H = 128;\n// The puddle's far edge. Below it is water, above it the far bank and the air.\nconst WATER = 112;\nconst DROPS = 300;\nconst RIPPLES = 12;\nconst SPLASH = 96;\nconst BOLT = 1600;\n// Cloud texture: wraps every 128 columns, one row per panel row of the deck.\nconst TW = 128;\nconst TH = 56;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, 7) * (1 - u) + hash(i + 1, 7) * u;\n}\n\n// Value noise that wraps in x with the given period.\nfunction lattice(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const a = hash(x0 + seed, iy) * (1 - ux) + hash(x1 + seed, iy) * ux;\n  const b = hash(x0 + seed, iy + 1) * (1 - ux) + hash(x1 + seed, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.dx = new Float32Array(DROPS);\n  params.dy = new Float32Array(DROPS);\n  params.dz = new Float32Array(DROPS);\n  params.dland = new Float32Array(DROPS);\n  params.rx = new Float32Array(RIPPLES);\n  params.ry = new Float32Array(RIPPLES);\n  params.rage = new Float32Array(RIPPLES).fill(9);\n  params.rsize = new Float32Array(RIPPLES);\n  params.sx = new Float32Array(SPLASH);\n  params.sy = new Float32Array(SPLASH);\n  params.svx = new Float32Array(SPLASH);\n  params.svy = new Float32Array(SPLASH);\n  params.sfloor = new Float32Array(SPLASH);\n  params.sage = new Float32Array(SPLASH).fill(9);\n  params.snext = 0;\n  params.bx = new Int16Array(BOLT);\n  params.by = new Int16Array(BOLT);\n  params.bl = new Float32Array(BOLT);\n  params.bn = 0;\n  params.boltX = W / 2;\n  params.boltAge = 9;\n  params.pulseT = new Float32Array(3);\n  params.pulseA = new Float32Array(3);\n  params.sheetAge = 9;\n  params.sheetX = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(12);\n  params.t = 0;\n  params.cloudA = 0;\n  params.cloudB = 0;\n  params.slant = 0;\n  // The first strike comes a couple of seconds in, so the storm shows itself early.\n  params.nextStrike = 2.3 + Math.random() * 0.5;\n  params.started = false;\n  params.strikes = 0;\n\n  // Two octaves of cloud, baked once and read with a moving offset. No finer octave:\n  // fine grain in a dim cloud only reads as noise.\n  params.tex = new Float32Array(TW * TH);\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c TW; x++) {\n      const n =\n        lattice(x / 16, y / 9, TW / 16, 11) * 0.7 +\n        lattice(x / 8, y / 6, TW / 8, 53) * 0.3;\n      params.tex[y * TW + x] = n;\n    }\n\n  // The far bank: a line of trees, two roofs and a few lit windows, all black against the flash.\n  params.bank = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    let top = 106 - Math.round(noise1(x * 0.22 + 3) * 5 + noise1(x * 0.7) * 2);\n    if (x >= 9 && x \u003c= 20) top = Math.min(top, 99);\n    if (x >= 40 && x \u003c= 51) top = Math.min(top, Math.round(101 - Math.max(0, 5 - Math.abs(x - 45.5))));\n    params.bank[x] = top;\n  }\n  params.windows = new Int16Array([12, 102, 16, 102, 12, 106, 43, 105, 48, 105]);\n}\n\nfunction strike(params, ground) {\n  params.bn = 0;\n  const x0 = 10 + Math.random() * (W - 20);\n  params.boltX = x0;\n  const y0 = params.cloudBase - 10 - Math.random() * 6;\n  // Most bolts reach the ground; some die out in the air.\n  const end = ground ? WATER - 1 : 62 + Math.random() * 36;\n  walk(params, x0, y0, end, (Math.random() - 0.5) * 0.5, 1, 0);\n  params.boltAge = 0;\n  params.pulseT[0] = 0;\n  params.pulseA[0] = 1;\n  params.pulseT[1] = 0.07 + Math.random() * 0.06;\n  params.pulseA[1] = 0.55 + Math.random() * 0.3;\n  params.pulseT[2] = 0.2 + Math.random() * 0.12;\n  params.pulseA[2] = Math.random() \u003c 0.6 ? 0.4 + Math.random() * 0.3 : 0;\n}\n\n// A jagged walk downward, forking now and then. Each branch is thinner and gives up sooner.\nfunction walk(params, x, y, end, drift, level, depth) {\n  while (y \u003c end && params.bn \u003c BOLT - 8) {\n    const dy = 1 + Math.random() * 3;\n    let nx = x + drift * dy + (Math.random() - 0.5) * 3.2;\n    if (Math.random() \u003c 0.12) nx += (Math.random() \u003c 0.5 ? -1 : 1) * (2 + Math.random() * 3);\n    const ny = Math.min(end, y + dy);\n    line(params, x, y, nx, ny, level);\n    if (depth \u003c 2 && Math.random() \u003c (depth === 0 ? 0.15 : 0.08)) {\n      const side = Math.random() \u003c 0.5 ? -1 : 1;\n      const reach = ny + (depth === 0 ? 12 + Math.random() * 34 : 5 + Math.random() * 12);\n      walk(params, nx, ny, Math.min(end, reach), side * (0.5 + Math.random() * 0.8), level * 0.55, depth + 1);\n    }\n    x = nx;\n    y = ny;\n  }\n}\n\nfunction line(params, x0, y0, x1, y1, level) {\n  const n = Math.max(1, Math.ceil(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0))));\n  for (let i = 1; i \u003c= n && params.bn \u003c BOLT; i++) {\n    const u = i / n;\n    params.bx[params.bn] = Math.round(x0 + (x1 - x0) * u);\n    params.by[params.bn] = Math.round(y0 + (y1 - y0) * u);\n    params.bl[params.bn] = level;\n    params.bn++;\n  }\n}\n\nfunction spawnDrop(params, i, anywhere) {\n  // Near drops are faster, longer and brighter, and land nearer the bottom of the puddle.\n  const z = Math.random();\n  params.dz[i] = z;\n  params.dland[i] = WATER + 1 + Math.floor(z * 14.9);\n  params.dy[i] = anywhere ? Math.random() * params.dland[i] : 20 - Math.random() * 50;\n  // Drops wrap round the sides, so slanted rain still fills the panel from the top.\n  params.dx[i] = Math.random() * W;\n}\n\nfunction splash(params, x, y, z) {\n  // Only a few rings at a time, mostly from the near drops: more than that and the puddle reads as noise.\n  let r = -1;\n  if (Math.random() \u003c 0.25 + 0.6 * z) {\n    for (let j = 0; j \u003c params.ringLimit; j++) {\n      if (params.rage[j] >= 0.5 + params.rsize[j] * 0.35) {\n        r = j;\n        break;\n      }\n    }\n  }\n  if (r >= 0) {\n    params.rx[r] = x;\n    params.ry[r] = y;\n    params.rage[r] = 0;\n    params.rsize[r] = 0.45 + z * 0.9;\n  }\n  const n = z > 0.7 ? 2 : z > 0.35 ? 1 : 0;\n  for (let k = 0; k \u003c n; k++) {\n    const s = params.snext;\n    params.snext = (s + 1) % SPLASH;\n    params.sx[s] = x;\n    params.sy[s] = y - 1;\n    params.svx[s] = (Math.random() - 0.5) * 22 + params.slant * 8;\n    params.svy[s] = -(14 + Math.random() * 22) * (0.6 + z * 0.6);\n    params.sfloor[s] = y;\n    params.sage[s] = 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  const t = params.t;\n  params.hue = k[0] + 0.6;\n  const rain = Math.max(0.05, k[1]);\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const storm = Math.max(0, Math.min(1, k[3]));\n  params.storm = storm;\n  params.cloudBase = 30 + storm * 12;\n\n  // Gusts swing the slant a little even in still air, and a lot in a gale.\n  const gust = (noise1(t * 0.45) - 0.5) * 2;\n  params.slant = wind * 0.85 + gust * (0.08 + 0.28 * Math.abs(wind));\n  params.cloudA += dt * (1.2 + wind * 7 + gust * 1.5) * (1 + storm);\n  params.cloudB += dt * (0.5 + wind * 4) * (1 + storm * 1.6);\n\n  const active = Math.min(DROPS, Math.round(rain * 72));\n  params.ringLimit = Math.min(RIPPLES, Math.round(3 + rain * 2.5));\n  params.active = active;\n  if (!params.started) {\n    params.started = true;\n    for (let i = 0; i \u003c DROPS; i++) spawnDrop(params, i, true);\n  }\n  const fall = 0.7 + 0.18 * rain;\n  for (let i = 0; i \u003c active; i++) {\n    const z = params.dz[i];\n    const v = (72 + 80 * z) * fall;\n    params.dy[i] += v * dt;\n    let x = params.dx[i] + v * params.slant * dt;\n    if (x \u003c 0) x += W;\n    else if (x >= W) x -= W;\n    params.dx[i] = x;\n    if (params.dy[i] >= params.dland[i]) {\n      splash(params, Math.round(x) % W, params.dland[i], z);\n      spawnDrop(params, i, false);\n    }\n  }\n  for (let r = 0; r \u003c RIPPLES; r++) params.rage[r] += dt;\n  for (let s = 0; s \u003c SPLASH; s++) {\n    if (params.sage[s] > 1) continue;\n    params.sage[s] += dt;\n    params.svy[s] += 260 * dt;\n    params.sx[s] += params.svx[s] * dt;\n    params.sy[s] += params.svy[s] * dt;\n    if (params.sy[s] > params.sfloor[s]) params.sage[s] = 9;\n  }\n\n  // Lightning: more often with Storm, and the odd one stays in the cloud.\n  params.nextStrike -= dt;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if (pressed || params.nextStrike \u003c= 0) {\n    strike(params, pressed || params.strikes === 0 || Math.random() \u003c 0.8);\n    params.strikes++;\n    const mean = 7 * (1 - storm) * (1 - storm) + 0.55;\n    params.nextStrike = mean * (0.4 + Math.random() * 1.2);\n  }\n  params.boltAge += dt;\n  // Sheet lightning flickers inside the cloud between strikes when the storm is up.\n  params.sheetAge += dt;\n  if (storm > 0.3 && params.sheetAge > 0.5 && Math.random() \u003c dt * (storm - 0.3) * 2.5) {\n    params.sheetAge = 0;\n    params.sheetX = Math.random() * W;\n  }\n\n  // The flash: two or three return strokes down the same channel, then an afterglow.\n  let f = 0;\n  const a = params.boltAge;\n  for (let p = 0; p \u003c 3; p++) {\n    const d = a - params.pulseT[p];\n    if (d >= 0) f += params.pulseA[p] * Math.exp(-d / 0.07);\n  }\n  params.flash = Math.min(1.2, f + 0.22 * Math.exp(-a / 0.35));\n  // The channel stays lit between strokes, dimmer, and goes out about half a second on.\n  params.boltOn = a \u003c 0.7 ? Math.min(1, f * 1.4 + 0.6 * Math.exp(-a / 0.22)) : 0;\n  const s = params.sheetAge;\n  params.sheet = s \u003c 0.4 ? Math.exp(-s / 0.08) * (0.6 + 0.4 * Math.sin(s * 60)) * 0.7 : 0;\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const col = params.col;\n  const hue = params.hue;\n  const flash = params.flash;\n  const t = params.t;\n  // col: 0 air, 3 cloud, 6 rain, 9 flash light.\n  hsvInto(col, 0, hue, 0.55, 1);\n  hsvInto(col, 3, hue + 0.02, 0.4, 1);\n  hsvInto(col, 6, hue - 0.02, 0.28, 1);\n  hsvInto(col, 9, hue + 0.08, 0.18, 1);\n  const fr = col[9];\n  const fg = col[10];\n  const fb = col[11];\n\n  // Air: darkest under the cloud, lit by the flash. The town's glow sits low, so the far bank\n  // stands out against it even between flashes.\n  for (let y = 0; y \u003c WATER; y++) {\n    const glow = 0.045 + 0.15 * Math.exp(-Math.max(0, 100 - y) / 9);\n    const lit = flash * (0.18 + 0.2 * (1 - y / WATER));\n    const o0 = y * W * 3;\n    const r = col[0] * glow + fr * lit;\n    const g = col[1] * glow + fg * lit;\n    const b = col[2] * glow + fb * lit;\n    for (let x = 0; x \u003c W; x++) {\n      const o = o0 + x * 3;\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  // The far bank stays black, so the flash shows it as a silhouette.\n  const bank = params.bank;\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = bank[x]; y \u003c WATER; y++) {\n      const o = (y * W + x) * 3;\n      buf[o] = 3;\n      buf[o + 1] = 3;\n      buf[o + 2] = 5;\n    }\n  }\n  const win = params.windows;\n  for (let i = 0; i \u003c win.length; i += 2) {\n    const o = (win[i + 1] * W + win[i]) * 3;\n    buf[o] = 240;\n    buf[o + 1] = 160;\n    buf[o + 2] = 60;\n  }\n  // Water: the sky at the horizon, mirrored and darker, with slow streaks across it.\n  for (let y = WATER; y \u003c H; y++) {\n    const depth = (y - WATER) / (H - WATER);\n    for (let x = 0; x \u003c W; x++) {\n      const streak = 0.88 + 0.12 * Math.sin(x * 0.17 + y * 0.6 + t * 1.3 + Math.sin(y * 0.5 + t) * 2);\n      const v = (0.15 - depth * 0.08) * streak;\n      const lit = flash * (0.32 - depth * 0.14) * streak;\n      const o = (y * W + x) * 3;\n      buf[o] = col[0] * v + fr * lit;\n      buf[o + 1] = col[1] * v + fg * lit;\n      buf[o + 2] = col[2] * v + fb * lit;\n    }\n    // The lit windows break up in the water below them.\n    for (let i = 0; i \u003c win.length; i += 2) {\n      if (y - WATER > 8 || Math.sin(y * 2.1 + t * 6 + i * 1.7) \u003c -0.2) continue;\n      const wx = Math.round(win[i] + Math.sin(y * 0.7 + t * 3 + i) * 0.45);\n      if (wx \u003c 0 || wx >= W) continue;\n      const o = (y * W + wx) * 3;\n      // Kept bright and yellow: a dim orange reflection reads as brown.\n      const k = 0.8 - (y - WATER) * 0.06;\n      buf[o] = Math.max(buf[o], 240 * k);\n      buf[o + 1] = Math.max(buf[o + 1], 170 * k);\n      buf[o + 2] = Math.max(buf[o + 2], 70 * k);\n    }\n  }\n\n  // The cloud deck. The rain is drawn in front of it, as it falls between us and the cloud.\n  const tex = params.tex;\n  const base = params.cloudBase;\n  const storm = params.storm;\n  const ca = params.cloudA;\n  const cb = params.cloudB;\n  const ia = Math.floor(ca);\n  const fa = ca - ia;\n  const ib = Math.floor(cb);\n  const fbx = cb - ib;\n  const bx = params.boltX;\n  const sheet = params.sheet;\n  const sheetX = params.sheetX;\n  const bottom = Math.min(TH - 1, Math.ceil(base + 10));\n  for (let y = 0; y \u003c= bottom; y++) {\n    const rowA = y * TW;\n    const rowB = ((y + 23) % TH) * TW;\n    // Thick at the top and thinning to a ragged hem at the cloud base.\n    const thin = Math.max(0, (y - (base - 16)) / 20);\n    for (let x = 0; x \u003c W; x++) {\n      const xa = ((x + ia) % TW + TW) % TW;\n      const xb = ((x - ib) % TW + TW) % TW;\n      const na = tex[rowA + xa] * (1 - fa) + tex[rowA + ((xa + 1) % TW)] * fa;\n      const nb = tex[rowB + xb] * (1 - fbx) + tex[rowB + ((xb + 1) % TW)] * fbx;\n      const n = na * 0.65 + nb * 0.35;\n      // A long ramp into the cloud, so its hem shades off instead of drawing a line.\n      let d = (n - 0.24 - thin * 0.6) * 2;\n      if (d \u003c= 0) continue;\n      if (d > 1) d = 1;\n      const dxb = (x - bx) / 20;\n      const dxs = (x - sheetX) / 14;\n      const light = flash * (0.35 + 0.65 / (1 + dxb * dxb)) * (0.5 + n) + sheet / (1 + dxs * dxs) * n;\n      const shade = (0.1 + 0.36 * n * n + storm * 0.03) * (1 - thin * 0.4);\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - d) + (col[3] * shade + fr * light * 0.8) * d;\n      buf[o + 1] = buf[o + 1] * (1 - d) + (col[4] * shade + fg * light * 0.8) * d;\n      buf[o + 2] = buf[o + 2] * (1 - d) + (col[5] * shade + fb * light * 0.8) * d;\n    }\n  }\n\n  // Ripples: a flat ellipse for the puddle seen from the side, plotted a column at a time so\n  // it stays a clean ring; the far ones are only two dots moving apart.\n  const rainR = col[6];\n  const rainG = col[7];\n  const rainB = col[8];\n  for (let r = 0; r \u003c RIPPLES; r++) {\n    const age = params.rage[r];\n    const size = params.rsize[r];\n    const life = 0.5 + size * 0.35;\n    if (age >= life) continue;\n    const rad = size * (1 + 4.5 * Math.sqrt(age / life));\n    const ryr = rad * 0.38;\n    const level = (0.3 + 0.32 * size) * (1 + flash * 0.6);\n    const cr = rainR * level;\n    const cg = rainG * level;\n    const cbl = rainB * level;\n    const cx = params.rx[r];\n    const cy = params.ry[r];\n    const x0 = Math.ceil(cx - rad);\n    const x1 = Math.floor(cx + rad);\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - cx) / rad;\n      const e = ryr * Math.sqrt(Math.max(0, 1 - u * u));\n      const flat = ryr \u003c 0.75;\n      // A flat ring shows only its two ends.\n      if (flat && x !== x0 && x !== x1) continue;\n      const xw = ((x % W) + W) % W;\n      const ya = Math.round(cy - e);\n      const yb = Math.round(cy + e);\n      for (let y = ya; y \u003c= yb; y += Math.max(1, yb - ya)) {\n        if (y \u003c WATER || y >= H) continue;\n        const o = (y * W + xw) * 3;\n        buf[o] = Math.max(buf[o], cr);\n        buf[o + 1] = Math.max(buf[o + 1], cg);\n        buf[o + 2] = Math.max(buf[o + 2], cbl);\n      }\n    }\n  }\n\n  // Rain: hard one-LED streaks, as long as a drop falls in a frame.\n  const slant = params.slant;\n  for (let i = 0; i \u003c params.active; i++) {\n    const z = params.dz[i];\n    const hx = params.dx[i];\n    const hy = params.dy[i];\n    const len = 2 + z * 4.5;\n    const level = (0.4 + 0.42 * z) * (1 + flash * 0.9);\n    const steps = Math.ceil(len * Math.max(1, Math.abs(slant)));\n    const sx = (slant * len) / steps;\n    const sy = len / steps;\n    for (let s = 0; s \u003c= steps; s++) {\n      let x = Math.round(hx - sx * s);\n      if (x \u003c 0) x += W;\n      else if (x >= W) x -= W;\n      const y = Math.round(hy - sy * s);\n      if (y \u003c 0 || y >= H) continue;\n      const v = s === 0 ? Math.min(1, level + 0.2) : level;\n      const o = (y * W + x) * 3;\n      buf[o] = Math.max(buf[o], rainR * v);\n      buf[o + 1] = Math.max(buf[o + 1], rainG * v);\n      buf[o + 2] = Math.max(buf[o + 2], rainB * v);\n    }\n  }\n  for (let s = 0; s \u003c SPLASH; s++) {\n    if (params.sage[s] > 1) continue;\n    const x = Math.round(params.sx[s]);\n    const y = Math.round(params.sy[s]);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const v = 0.55 * (1 + flash * 0.5);\n    const o = (y * W + x) * 3;\n    buf[o] = Math.max(buf[o], rainR * v);\n    buf[o + 1] = Math.max(buf[o + 1], rainG * v);\n    buf[o + 2] = Math.max(buf[o + 2], rainB * v);\n  }\n\n  // The bolt itself, crisp, and its broken reflection in the puddle.\n  const on = params.boltOn;\n  if (on > 0.02) {\n    for (let i = 0; i \u003c params.bn; i++) {\n      const x = params.bx[i];\n      const y = params.by[i];\n      const v = Math.min(1, on * (0.45 + 0.55 * params.bl[i]));\n      // White while it strikes, cooling to violet as the channel goes out.\n      const br = 140 + 100 * v;\n      const bgc = 120 + 120 * v;\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) {\n        const o = (y * W + x) * 3;\n        buf[o] = Math.max(buf[o], br * v);\n        buf[o + 1] = Math.max(buf[o + 1], bgc * v);\n        buf[o + 2] = Math.max(buf[o + 2], 255 * v);\n        // The main channel is two LEDs wide, so it reads as the trunk and the forks as twigs.\n        if (params.bl[i] === 1 && x + 1 \u003c W) {\n          const q = o + 3;\n          const m = v * 0.7;\n          buf[q] = Math.max(buf[q], br * m);\n          buf[q + 1] = Math.max(buf[q + 1], bgc * m);\n          buf[q + 2] = Math.max(buf[q + 2], 255 * m);\n        }\n      }\n      const ry = 2 * WATER - 1 - y;\n      if (ry >= WATER && ry \u003c H) {\n        const rx = Math.round(x + Math.sin(ry * 1.1 + t * 9) * 0.9);\n        if (rx >= 0 && rx \u003c W) {\n          const o = (ry * W + rx) * 3;\n          const k = v * 0.45 * (1 - (ry - WATER) / (H - WATER));\n          buf[o] = Math.max(buf[o], br * k);\n          buf[o + 1] = Math.max(buf[o + 1], bgc * k);\n          buf[o + 2] = Math.max(buf[o + 2], 255 * k);\n        }\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n","layer":{"id":"layer-rainstorm","type":"code","name":"rainstorm","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rainstorm\n// Family:  weather\n// Idea:    Rain falls the whole 128 rows into a puddle that rings where the drops land, and now and then a branching bolt splits the cloud and lights the downpour for a moment.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rain=0.2..3, Wind=-1..1, Storm=0..1\n//\n// Knob 1: Hue. The tint of the night, the cloud and the rain, starting from slate blue.\n// Knob 2: Rain. From a drizzle of a few slow drops to a downpour.\n// Knob 3: Wind. At 0 the rain falls straight; either way it slants and gusts, and the cloud runs with it.\n// Knob 4: Storm. How often lightning comes, from one strike in a while to about two a second, and how low and restless the cloud hangs.\n// Buttons: K1 tap strikes lightning now.\n\nconst W = 64;\nconst H = 128;\n// The puddle's far edge. Below it is water, above it the far bank and the air.\nconst WATER = 112;\nconst DROPS = 300;\nconst RIPPLES = 12;\nconst SPLASH = 96;\nconst BOLT = 1600;\n// Cloud texture: wraps every 128 columns, one row per panel row of the deck.\nconst TW = 128;\nconst TH = 56;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, 7) * (1 - u) + hash(i + 1, 7) * u;\n}\n\n// Value noise that wraps in x with the given period.\nfunction lattice(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const a = hash(x0 + seed, iy) * (1 - ux) + hash(x1 + seed, iy) * ux;\n  const b = hash(x0 + seed, iy + 1) * (1 - ux) + hash(x1 + seed, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.dx = new Float32Array(DROPS);\n  params.dy = new Float32Array(DROPS);\n  params.dz = new Float32Array(DROPS);\n  params.dland = new Float32Array(DROPS);\n  params.rx = new Float32Array(RIPPLES);\n  params.ry = new Float32Array(RIPPLES);\n  params.rage = new Float32Array(RIPPLES).fill(9);\n  params.rsize = new Float32Array(RIPPLES);\n  params.sx = new Float32Array(SPLASH);\n  params.sy = new Float32Array(SPLASH);\n  params.svx = new Float32Array(SPLASH);\n  params.svy = new Float32Array(SPLASH);\n  params.sfloor = new Float32Array(SPLASH);\n  params.sage = new Float32Array(SPLASH).fill(9);\n  params.snext = 0;\n  params.bx = new Int16Array(BOLT);\n  params.by = new Int16Array(BOLT);\n  params.bl = new Float32Array(BOLT);\n  params.bn = 0;\n  params.boltX = W / 2;\n  params.boltAge = 9;\n  params.pulseT = new Float32Array(3);\n  params.pulseA = new Float32Array(3);\n  params.sheetAge = 9;\n  params.sheetX = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(12);\n  params.t = 0;\n  params.cloudA = 0;\n  params.cloudB = 0;\n  params.slant = 0;\n  // The first strike comes a couple of seconds in, so the storm shows itself early.\n  params.nextStrike = 2.3 + Math.random() * 0.5;\n  params.started = false;\n  params.strikes = 0;\n\n  // Two octaves of cloud, baked once and read with a moving offset. No finer octave:\n  // fine grain in a dim cloud only reads as noise.\n  params.tex = new Float32Array(TW * TH);\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c TW; x++) {\n      const n =\n        lattice(x / 16, y / 9, TW / 16, 11) * 0.7 +\n        lattice(x / 8, y / 6, TW / 8, 53) * 0.3;\n      params.tex[y * TW + x] = n;\n    }\n\n  // The far bank: a line of trees, two roofs and a few lit windows, all black against the flash.\n  params.bank = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    let top = 106 - Math.round(noise1(x * 0.22 + 3) * 5 + noise1(x * 0.7) * 2);\n    if (x >= 9 && x \u003c= 20) top = Math.min(top, 99);\n    if (x >= 40 && x \u003c= 51) top = Math.min(top, Math.round(101 - Math.max(0, 5 - Math.abs(x - 45.5))));\n    params.bank[x] = top;\n  }\n  params.windows = new Int16Array([12, 102, 16, 102, 12, 106, 43, 105, 48, 105]);\n}\n\nfunction strike(params, ground) {\n  params.bn = 0;\n  const x0 = 10 + Math.random() * (W - 20);\n  params.boltX = x0;\n  const y0 = params.cloudBase - 10 - Math.random() * 6;\n  // Most bolts reach the ground; some die out in the air.\n  const end = ground ? WATER - 1 : 62 + Math.random() * 36;\n  walk(params, x0, y0, end, (Math.random() - 0.5) * 0.5, 1, 0);\n  params.boltAge = 0;\n  params.pulseT[0] = 0;\n  params.pulseA[0] = 1;\n  params.pulseT[1] = 0.07 + Math.random() * 0.06;\n  params.pulseA[1] = 0.55 + Math.random() * 0.3;\n  params.pulseT[2] = 0.2 + Math.random() * 0.12;\n  params.pulseA[2] = Math.random() \u003c 0.6 ? 0.4 + Math.random() * 0.3 : 0;\n}\n\n// A jagged walk downward, forking now and then. Each branch is thinner and gives up sooner.\nfunction walk(params, x, y, end, drift, level, depth) {\n  while (y \u003c end && params.bn \u003c BOLT - 8) {\n    const dy = 1 + Math.random() * 3;\n    let nx = x + drift * dy + (Math.random() - 0.5) * 3.2;\n    if (Math.random() \u003c 0.12) nx += (Math.random() \u003c 0.5 ? -1 : 1) * (2 + Math.random() * 3);\n    const ny = Math.min(end, y + dy);\n    line(params, x, y, nx, ny, level);\n    if (depth \u003c 2 && Math.random() \u003c (depth === 0 ? 0.15 : 0.08)) {\n      const side = Math.random() \u003c 0.5 ? -1 : 1;\n      const reach = ny + (depth === 0 ? 12 + Math.random() * 34 : 5 + Math.random() * 12);\n      walk(params, nx, ny, Math.min(end, reach), side * (0.5 + Math.random() * 0.8), level * 0.55, depth + 1);\n    }\n    x = nx;\n    y = ny;\n  }\n}\n\nfunction line(params, x0, y0, x1, y1, level) {\n  const n = Math.max(1, Math.ceil(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0))));\n  for (let i = 1; i \u003c= n && params.bn \u003c BOLT; i++) {\n    const u = i / n;\n    params.bx[params.bn] = Math.round(x0 + (x1 - x0) * u);\n    params.by[params.bn] = Math.round(y0 + (y1 - y0) * u);\n    params.bl[params.bn] = level;\n    params.bn++;\n  }\n}\n\nfunction spawnDrop(params, i, anywhere) {\n  // Near drops are faster, longer and brighter, and land nearer the bottom of the puddle.\n  const z = Math.random();\n  params.dz[i] = z;\n  params.dland[i] = WATER + 1 + Math.floor(z * 14.9);\n  params.dy[i] = anywhere ? Math.random() * params.dland[i] : 20 - Math.random() * 50;\n  // Drops wrap round the sides, so slanted rain still fills the panel from the top.\n  params.dx[i] = Math.random() * W;\n}\n\nfunction splash(params, x, y, z) {\n  // Only a few rings at a time, mostly from the near drops: more than that and the puddle reads as noise.\n  let r = -1;\n  if (Math.random() \u003c 0.25 + 0.6 * z) {\n    for (let j = 0; j \u003c params.ringLimit; j++) {\n      if (params.rage[j] >= 0.5 + params.rsize[j] * 0.35) {\n        r = j;\n        break;\n      }\n    }\n  }\n  if (r >= 0) {\n    params.rx[r] = x;\n    params.ry[r] = y;\n    params.rage[r] = 0;\n    params.rsize[r] = 0.45 + z * 0.9;\n  }\n  const n = z > 0.7 ? 2 : z > 0.35 ? 1 : 0;\n  for (let k = 0; k \u003c n; k++) {\n    const s = params.snext;\n    params.snext = (s + 1) % SPLASH;\n    params.sx[s] = x;\n    params.sy[s] = y - 1;\n    params.svx[s] = (Math.random() - 0.5) * 22 + params.slant * 8;\n    params.svy[s] = -(14 + Math.random() * 22) * (0.6 + z * 0.6);\n    params.sfloor[s] = y;\n    params.sage[s] = 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  const t = params.t;\n  params.hue = k[0] + 0.6;\n  const rain = Math.max(0.05, k[1]);\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const storm = Math.max(0, Math.min(1, k[3]));\n  params.storm = storm;\n  params.cloudBase = 30 + storm * 12;\n\n  // Gusts swing the slant a little even in still air, and a lot in a gale.\n  const gust = (noise1(t * 0.45) - 0.5) * 2;\n  params.slant = wind * 0.85 + gust * (0.08 + 0.28 * Math.abs(wind));\n  params.cloudA += dt * (1.2 + wind * 7 + gust * 1.5) * (1 + storm);\n  params.cloudB += dt * (0.5 + wind * 4) * (1 + storm * 1.6);\n\n  const active = Math.min(DROPS, Math.round(rain * 72));\n  params.ringLimit = Math.min(RIPPLES, Math.round(3 + rain * 2.5));\n  params.active = active;\n  if (!params.started) {\n    params.started = true;\n    for (let i = 0; i \u003c DROPS; i++) spawnDrop(params, i, true);\n  }\n  const fall = 0.7 + 0.18 * rain;\n  for (let i = 0; i \u003c active; i++) {\n    const z = params.dz[i];\n    const v = (72 + 80 * z) * fall;\n    params.dy[i] += v * dt;\n    let x = params.dx[i] + v * params.slant * dt;\n    if (x \u003c 0) x += W;\n    else if (x >= W) x -= W;\n    params.dx[i] = x;\n    if (params.dy[i] >= params.dland[i]) {\n      splash(params, Math.round(x) % W, params.dland[i], z);\n      spawnDrop(params, i, false);\n    }\n  }\n  for (let r = 0; r \u003c RIPPLES; r++) params.rage[r] += dt;\n  for (let s = 0; s \u003c SPLASH; s++) {\n    if (params.sage[s] > 1) continue;\n    params.sage[s] += dt;\n    params.svy[s] += 260 * dt;\n    params.sx[s] += params.svx[s] * dt;\n    params.sy[s] += params.svy[s] * dt;\n    if (params.sy[s] > params.sfloor[s]) params.sage[s] = 9;\n  }\n\n  // Lightning: more often with Storm, and the odd one stays in the cloud.\n  params.nextStrike -= dt;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if (pressed || params.nextStrike \u003c= 0) {\n    strike(params, pressed || params.strikes === 0 || Math.random() \u003c 0.8);\n    params.strikes++;\n    const mean = 7 * (1 - storm) * (1 - storm) + 0.55;\n    params.nextStrike = mean * (0.4 + Math.random() * 1.2);\n  }\n  params.boltAge += dt;\n  // Sheet lightning flickers inside the cloud between strikes when the storm is up.\n  params.sheetAge += dt;\n  if (storm > 0.3 && params.sheetAge > 0.5 && Math.random() \u003c dt * (storm - 0.3) * 2.5) {\n    params.sheetAge = 0;\n    params.sheetX = Math.random() * W;\n  }\n\n  // The flash: two or three return strokes down the same channel, then an afterglow.\n  let f = 0;\n  const a = params.boltAge;\n  for (let p = 0; p \u003c 3; p++) {\n    const d = a - params.pulseT[p];\n    if (d >= 0) f += params.pulseA[p] * Math.exp(-d / 0.07);\n  }\n  params.flash = Math.min(1.2, f + 0.22 * Math.exp(-a / 0.35));\n  // The channel stays lit between strokes, dimmer, and goes out about half a second on.\n  params.boltOn = a \u003c 0.7 ? Math.min(1, f * 1.4 + 0.6 * Math.exp(-a / 0.22)) : 0;\n  const s = params.sheetAge;\n  params.sheet = s \u003c 0.4 ? Math.exp(-s / 0.08) * (0.6 + 0.4 * Math.sin(s * 60)) * 0.7 : 0;\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const col = params.col;\n  const hue = params.hue;\n  const flash = params.flash;\n  const t = params.t;\n  // col: 0 air, 3 cloud, 6 rain, 9 flash light.\n  hsvInto(col, 0, hue, 0.55, 1);\n  hsvInto(col, 3, hue + 0.02, 0.4, 1);\n  hsvInto(col, 6, hue - 0.02, 0.28, 1);\n  hsvInto(col, 9, hue + 0.08, 0.18, 1);\n  const fr = col[9];\n  const fg = col[10];\n  const fb = col[11];\n\n  // Air: darkest under the cloud, lit by the flash. The town's glow sits low, so the far bank\n  // stands out against it even between flashes.\n  for (let y = 0; y \u003c WATER; y++) {\n    const glow = 0.045 + 0.15 * Math.exp(-Math.max(0, 100 - y) / 9);\n    const lit = flash * (0.18 + 0.2 * (1 - y / WATER));\n    const o0 = y * W * 3;\n    const r = col[0] * glow + fr * lit;\n    const g = col[1] * glow + fg * lit;\n    const b = col[2] * glow + fb * lit;\n    for (let x = 0; x \u003c W; x++) {\n      const o = o0 + x * 3;\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  // The far bank stays black, so the flash shows it as a silhouette.\n  const bank = params.bank;\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = bank[x]; y \u003c WATER; y++) {\n      const o = (y * W + x) * 3;\n      buf[o] = 3;\n      buf[o + 1] = 3;\n      buf[o + 2] = 5;\n    }\n  }\n  const win = params.windows;\n  for (let i = 0; i \u003c win.length; i += 2) {\n    const o = (win[i + 1] * W + win[i]) * 3;\n    buf[o] = 240;\n    buf[o + 1] = 160;\n    buf[o + 2] = 60;\n  }\n  // Water: the sky at the horizon, mirrored and darker, with slow streaks across it.\n  for (let y = WATER; y \u003c H; y++) {\n    const depth = (y - WATER) / (H - WATER);\n    for (let x = 0; x \u003c W; x++) {\n      const streak = 0.88 + 0.12 * Math.sin(x * 0.17 + y * 0.6 + t * 1.3 + Math.sin(y * 0.5 + t) * 2);\n      const v = (0.15 - depth * 0.08) * streak;\n      const lit = flash * (0.32 - depth * 0.14) * streak;\n      const o = (y * W + x) * 3;\n      buf[o] = col[0] * v + fr * lit;\n      buf[o + 1] = col[1] * v + fg * lit;\n      buf[o + 2] = col[2] * v + fb * lit;\n    }\n    // The lit windows break up in the water below them.\n    for (let i = 0; i \u003c win.length; i += 2) {\n      if (y - WATER > 8 || Math.sin(y * 2.1 + t * 6 + i * 1.7) \u003c -0.2) continue;\n      const wx = Math.round(win[i] + Math.sin(y * 0.7 + t * 3 + i) * 0.45);\n      if (wx \u003c 0 || wx >= W) continue;\n      const o = (y * W + wx) * 3;\n      // Kept bright and yellow: a dim orange reflection reads as brown.\n      const k = 0.8 - (y - WATER) * 0.06;\n      buf[o] = Math.max(buf[o], 240 * k);\n      buf[o + 1] = Math.max(buf[o + 1], 170 * k);\n      buf[o + 2] = Math.max(buf[o + 2], 70 * k);\n    }\n  }\n\n  // The cloud deck. The rain is drawn in front of it, as it falls between us and the cloud.\n  const tex = params.tex;\n  const base = params.cloudBase;\n  const storm = params.storm;\n  const ca = params.cloudA;\n  const cb = params.cloudB;\n  const ia = Math.floor(ca);\n  const fa = ca - ia;\n  const ib = Math.floor(cb);\n  const fbx = cb - ib;\n  const bx = params.boltX;\n  const sheet = params.sheet;\n  const sheetX = params.sheetX;\n  const bottom = Math.min(TH - 1, Math.ceil(base + 10));\n  for (let y = 0; y \u003c= bottom; y++) {\n    const rowA = y * TW;\n    const rowB = ((y + 23) % TH) * TW;\n    // Thick at the top and thinning to a ragged hem at the cloud base.\n    const thin = Math.max(0, (y - (base - 16)) / 20);\n    for (let x = 0; x \u003c W; x++) {\n      const xa = ((x + ia) % TW + TW) % TW;\n      const xb = ((x - ib) % TW + TW) % TW;\n      const na = tex[rowA + xa] * (1 - fa) + tex[rowA + ((xa + 1) % TW)] * fa;\n      const nb = tex[rowB + xb] * (1 - fbx) + tex[rowB + ((xb + 1) % TW)] * fbx;\n      const n = na * 0.65 + nb * 0.35;\n      // A long ramp into the cloud, so its hem shades off instead of drawing a line.\n      let d = (n - 0.24 - thin * 0.6) * 2;\n      if (d \u003c= 0) continue;\n      if (d > 1) d = 1;\n      const dxb = (x - bx) / 20;\n      const dxs = (x - sheetX) / 14;\n      const light = flash * (0.35 + 0.65 / (1 + dxb * dxb)) * (0.5 + n) + sheet / (1 + dxs * dxs) * n;\n      const shade = (0.1 + 0.36 * n * n + storm * 0.03) * (1 - thin * 0.4);\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - d) + (col[3] * shade + fr * light * 0.8) * d;\n      buf[o + 1] = buf[o + 1] * (1 - d) + (col[4] * shade + fg * light * 0.8) * d;\n      buf[o + 2] = buf[o + 2] * (1 - d) + (col[5] * shade + fb * light * 0.8) * d;\n    }\n  }\n\n  // Ripples: a flat ellipse for the puddle seen from the side, plotted a column at a time so\n  // it stays a clean ring; the far ones are only two dots moving apart.\n  const rainR = col[6];\n  const rainG = col[7];\n  const rainB = col[8];\n  for (let r = 0; r \u003c RIPPLES; r++) {\n    const age = params.rage[r];\n    const size = params.rsize[r];\n    const life = 0.5 + size * 0.35;\n    if (age >= life) continue;\n    const rad = size * (1 + 4.5 * Math.sqrt(age / life));\n    const ryr = rad * 0.38;\n    const level = (0.3 + 0.32 * size) * (1 + flash * 0.6);\n    const cr = rainR * level;\n    const cg = rainG * level;\n    const cbl = rainB * level;\n    const cx = params.rx[r];\n    const cy = params.ry[r];\n    const x0 = Math.ceil(cx - rad);\n    const x1 = Math.floor(cx + rad);\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - cx) / rad;\n      const e = ryr * Math.sqrt(Math.max(0, 1 - u * u));\n      const flat = ryr \u003c 0.75;\n      // A flat ring shows only its two ends.\n      if (flat && x !== x0 && x !== x1) continue;\n      const xw = ((x % W) + W) % W;\n      const ya = Math.round(cy - e);\n      const yb = Math.round(cy + e);\n      for (let y = ya; y \u003c= yb; y += Math.max(1, yb - ya)) {\n        if (y \u003c WATER || y >= H) continue;\n        const o = (y * W + xw) * 3;\n        buf[o] = Math.max(buf[o], cr);\n        buf[o + 1] = Math.max(buf[o + 1], cg);\n        buf[o + 2] = Math.max(buf[o + 2], cbl);\n      }\n    }\n  }\n\n  // Rain: hard one-LED streaks, as long as a drop falls in a frame.\n  const slant = params.slant;\n  for (let i = 0; i \u003c params.active; i++) {\n    const z = params.dz[i];\n    const hx = params.dx[i];\n    const hy = params.dy[i];\n    const len = 2 + z * 4.5;\n    const level = (0.4 + 0.42 * z) * (1 + flash * 0.9);\n    const steps = Math.ceil(len * Math.max(1, Math.abs(slant)));\n    const sx = (slant * len) / steps;\n    const sy = len / steps;\n    for (let s = 0; s \u003c= steps; s++) {\n      let x = Math.round(hx - sx * s);\n      if (x \u003c 0) x += W;\n      else if (x >= W) x -= W;\n      const y = Math.round(hy - sy * s);\n      if (y \u003c 0 || y >= H) continue;\n      const v = s === 0 ? Math.min(1, level + 0.2) : level;\n      const o = (y * W + x) * 3;\n      buf[o] = Math.max(buf[o], rainR * v);\n      buf[o + 1] = Math.max(buf[o + 1], rainG * v);\n      buf[o + 2] = Math.max(buf[o + 2], rainB * v);\n    }\n  }\n  for (let s = 0; s \u003c SPLASH; s++) {\n    if (params.sage[s] > 1) continue;\n    const x = Math.round(params.sx[s]);\n    const y = Math.round(params.sy[s]);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const v = 0.55 * (1 + flash * 0.5);\n    const o = (y * W + x) * 3;\n    buf[o] = Math.max(buf[o], rainR * v);\n    buf[o + 1] = Math.max(buf[o + 1], rainG * v);\n    buf[o + 2] = Math.max(buf[o + 2], rainB * v);\n  }\n\n  // The bolt itself, crisp, and its broken reflection in the puddle.\n  const on = params.boltOn;\n  if (on > 0.02) {\n    for (let i = 0; i \u003c params.bn; i++) {\n      const x = params.bx[i];\n      const y = params.by[i];\n      const v = Math.min(1, on * (0.45 + 0.55 * params.bl[i]));\n      // White while it strikes, cooling to violet as the channel goes out.\n      const br = 140 + 100 * v;\n      const bgc = 120 + 120 * v;\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) {\n        const o = (y * W + x) * 3;\n        buf[o] = Math.max(buf[o], br * v);\n        buf[o + 1] = Math.max(buf[o + 1], bgc * v);\n        buf[o + 2] = Math.max(buf[o + 2], 255 * v);\n        // The main channel is two LEDs wide, so it reads as the trunk and the forks as twigs.\n        if (params.bl[i] === 1 && x + 1 \u003c W) {\n          const q = o + 3;\n          const m = v * 0.7;\n          buf[q] = Math.max(buf[q], br * m);\n          buf[q + 1] = Math.max(buf[q + 1], bgc * m);\n          buf[q + 2] = Math.max(buf[q + 2], 255 * m);\n        }\n      }\n      const ry = 2 * WATER - 1 - y;\n      if (ry >= WATER && ry \u003c H) {\n        const rx = Math.round(x + Math.sin(ry * 1.1 + t * 9) * 0.9);\n        if (rx >= 0 && rx \u003c W) {\n          const o = (ry * W + rx) * 3;\n          const k = v * 0.45 * (1 - (ry - WATER) / (H - WATER));\n          buf[o] = Math.max(buf[o], br * k);\n          buf[o + 1] = Math.max(buf[o + 1], bgc * k);\n          buf[o + 2] = Math.max(buf[o + 2], 255 * k);\n        }\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Rain=0.2..3, Wind=-1..1, Storm=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the night, the cloud and the rain, starting from slate blue."},{"name":"Rain","min":0.2,"max":3,"about":"From a drizzle of a few slow drops to a downpour."},{"name":"Wind","min":-1,"max":1,"about":"At 0 the rain falls straight; either way it slants and gusts, and the cloud runs with it."},{"name":"Storm","min":0,"max":1,"about":"How often lightning comes, from one strike in a while to about two a second, and how low and restless the cloud hangs."}],"start":[0,2,0,0.06],"measures":{"motion":2.22,"detail":0.0685,"edges":0.8841,"complexity":0.6564,"coverage":0.3785,"colour":0.0656,"drift":0.2647},"knobResponse":[0.0545,0.1279,0.1012,0.1302]},{"slug":"reaction-diffusion","title":"Reaction Diffusion","family":"sim","round":1,"note":"두 물질이 번지고 먹고 먹히며 산호와 미로와 점박이를 길러요. K3 가 종을 바꿔요.","idea":"Two chemicals that only feed and spread grow coral and spots on their own, and one knob decides which.","buttons":"K1 tap reseeds the dish.","code":"// ===== Patternflow pattern =====\n// Title:   Reaction Diffusion\n// Family:  sim\n// Idea:    Two chemicals that only feed and spread grow coral and spots on their own, and one knob decides which.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..4, Species=0..5, Grain=0..1\n//\n// Knob 1: Hue. Turns the culture's colour around the wheel.\n// Knob 2: Speed. How fast the culture grows; at 2 it runs 240 steps a second.\n// Knob 3: Species. Walks the feed and kill rates through coral, maze, holes, spots, mitosis and worms.\n// Knob 4: Grain. Slows the spreading against the reaction, so every species grows finer, from fat tubes to filigree.\n// Buttons: K1 tap reseeds the dish.\n\n// Gray-Scott feed and kill rates, one pair per species, in knob order.\nconst SPECIES = [\n  [0.0545, 0.062],\n  [0.029, 0.057],\n  [0.039, 0.058],\n  [0.03, 0.062],\n  [0.0367, 0.0649],\n  [0.078, 0.061],\n];\n\nconst W = 64;\nconst H = 128;\n\nfunction rand(params) {\n  let s = params.seed | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.seed = s;\n  return (s >>> 0) / 4294967296;\n}\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// Pearson's perturbation, a disc of half-used feed with some catalyst in it.\nfunction dab(params, cx, cy, r, mix) {\n  const a = params.a;\n  const b = params.b;\n  for (let dy = -r; dy \u003c= r; dy++) {\n    for (let dx = -r; dx \u003c= r; dx++) {\n      if (dx * dx + dy * dy > r * r) continue;\n      const i = ((cy + dy + H * 4) % H) * W + ((cx + dx + W * 4) % W);\n      a[i] += (0.5 - a[i]) * mix;\n      b[i] += (0.25 + rand(params) * 0.05 - b[i]) * mix;\n    }\n  }\n}\n\n// Seeds grow with the spreading rate: smaller ones fade in the spot species,\n// and bigger or closer ones starve each other.\nfunction seedSize(params) {\n  return Math.round(6 * Math.sqrt(params.d));\n}\n\nfunction seedDish(params) {\n  params.a.fill(1);\n  params.b.fill(0);\n  // One seed in each cell of a 3 by 6 grid, jittered, so the dish fills evenly.\n  for (let n = 0; n \u003c 18; n++) {\n    const cx = Math.floor(((n % 3) + 0.15 + rand(params) * 0.7) * (W / 3));\n    const cy = Math.floor((Math.floor(n / 3) + 0.15 + rand(params) * 0.7) * (H / 6));\n    dab(params, cx, cy, seedSize(params) + Math.floor(rand(params) * 2), 1);\n  }\n  params.young = 1;\n  params.fresh = false;\n}\n\nfunction step(params, F, K, D) {\n  const tsx = params.tsx;\n  const tcx = params.tcx;\n  const a = params.a;\n  const b = params.b;\n  const na = params.na;\n  const nb = params.nb;\n  for (let y = 0; y \u003c H; y++) {\n    const up = ((y + H - 1) % H) * W;\n    const row = y * W;\n    const down = ((y + 1) % H) * W;\n    const tcy = params.tcy[y];\n    const tsy = params.tsy[y];\n    for (let x = 0; x \u003c W; x++) {\n      const l = x === 0 ? W - 1 : x - 1;\n      const r = x === W - 1 ? 0 : x + 1;\n      const i = row + x;\n      const av = a[i];\n      const bv = b[i];\n      const la =\n        0.2 * (a[up + x] + a[down + x] + a[row + l] + a[row + r]) +\n        0.05 * (a[up + l] + a[up + r] + a[down + l] + a[down + r]) -\n        av;\n      const lb =\n        0.2 * (b[up + x] + b[down + x] + b[row + l] + b[row + r]) +\n        0.05 * (b[up + l] + b[up + r] + b[down + l] + b[down + r]) -\n        bv;\n      const abb = av * bv * bv;\n      // The tide, sin(ax + by + phase), split into a row part and a column part.\n      const fx = F + tsx[x] * tcy + tcx[x] * tsy;\n      na[i] = av + D * la - abb + fx * (1 - av);\n      // Catalyst that has all but gone is set to zero, which keeps the float maths fast.\n      const nv = bv + 0.5 * D * lb + abb - (K + fx) * bv;\n      nb[i] = nv > 1e-5 ? nv : 0;\n    }\n  }\n  params.a = na;\n  params.b = nb;\n  params.na = a;\n  params.nb = b;\n}\n\nexport function setup(params) {\n  params.a = new Float32Array(W * H);\n  params.b = new Float32Array(W * H);\n  params.na = new Float32Array(W * H);\n  params.nb = new Float32Array(W * H);\n  params.lut = new Uint8Array(256 * 3);\n  params.lutHue = -1;\n  params.seed = 0x2545f491;\n  params.pending = 0;\n  params.check = 0;\n  params.drip = 0;\n  params.tsx = new Float32Array(W);\n  params.tcx = new Float32Array(W);\n  params.tsy = new Float32Array(H);\n  params.tcy = new Float32Array(H);\n  params.tideT = 0;\n  params.young = 0;\n  params.d = 1;\n  // The first update seeds the dish, once the knobs are known.\n  params.fresh = true;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const species = Math.max(0, Math.min(SPECIES.length - 1, k[2]));\n  const i = Math.min(SPECIES.length - 2, Math.floor(species));\n  const f = species - i;\n  const F = SPECIES[i][0] + (SPECIES[i + 1][0] - SPECIES[i][0]) * f;\n  const K = SPECIES[i][1] + (SPECIES[i + 1][1] - SPECIES[i][1]) * f;\n\n  params.d = 1 - 0.45 * Math.max(0, Math.min(1, k[3]));\n  if (params.fresh || (input.btnPressed && input.btnPressed[0])) seedDish(params);\n\n  // A fresh dish runs fast for its first second, so the species shows sooner.\n  params.young = Math.max(0, params.young - dt);\n  params.pending += dt * k[1] * 120 * (1 + params.young * 2);\n  let steps = Math.floor(params.pending);\n  params.pending -= steps;\n  if (steps > 32) steps = 32;\n\n  // A slow tide of feed rolls across the dish and turns as it goes, and now\n  // and then a drop of fresh culture lands, so a dish that has settled keeps\n  // changing.\n  params.drip += steps;\n  if (params.drip > 600) {\n    params.drip = 0;\n    dab(params, Math.floor(rand(params) * W), Math.floor(rand(params) * H), seedSize(params), 0.8);\n  }\n  params.tideT += steps / 7200;\n  const turn = params.tideT * 1.3;\n  // About 85 cells from crest to crest, the same whichever way the tide faces.\n  const ax = (Math.cos(turn) * 9.42) / 128;\n  const by = (Math.sin(turn) * 9.42) / 128;\n  const phase = params.tideT * 6.2832;\n  for (let x = 0; x \u003c W; x++) {\n    params.tsx[x] = Math.sin(ax * x);\n    params.tcx[x] = Math.cos(ax * x);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    params.tcy[y] = 0.0035 * Math.cos(by * y + phase);\n    params.tsy[y] = 0.0035 * Math.sin(by * y + phase);\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, F, K, params.d);\n\n  // A dish that died out, or filled one flat colour, starts again.\n  params.check += dt;\n  if (params.check > 0.5) {\n    params.check = 0;\n    let lo = 1;\n    let hi = 0;\n    const b = params.b;\n    for (let j = 0; j \u003c b.length; j += 5) {\n      if (b[j] \u003c lo) lo = b[j];\n      if (b[j] > hi) hi = b[j];\n    }\n    if (hi \u003c 0.04 || hi - lo \u003c 0.04) seedDish(params);\n  }\n}\n\nexport function draw(display, params, time) {\n  if (params.lutHue !== params.hue) {\n    params.lutHue = params.hue;\n    const lut = params.lut;\n    for (let i = 0; i \u003c 256; i++) {\n      const t = i / 255;\n      // A deep rim a step round the wheel, then a bright, paler core.\n      const c = hsv(params.hue + 0.72 - t * 0.22, 1 - t * t * 0.4, Math.min(1, t * 1.8));\n      lut[i * 3] = c[0];\n      lut[i * 3 + 1] = c[1];\n      lut[i * 3 + 2] = c[2];\n    }\n  }\n  const b = params.b;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let v = (b[i] - 0.05) * 2.7;\n      if (v \u003c= 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      if (v > 1) v = 1;\n      // Light from the top left, so each blob reads as a raised bead.\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      let shade = 0.8 + (b[up + l] - b[down + r]) * 5;\n      shade = shade \u003c 0.35 ? 0.35 : shade > 1.25 ? 1.25 : shade;\n      const li = Math.round(v * 255) * 3;\n      display.setPixel(x, y, lut[li] * shade, lut[li + 1] * shade, lut[li + 2] * shade);\n    }\n  }\n}\n","layer":{"id":"layer-reaction-diffusion","type":"code","name":"reaction-diffusion","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Reaction Diffusion\n// Family:  sim\n// Idea:    Two chemicals that only feed and spread grow coral and spots on their own, and one knob decides which.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..4, Species=0..5, Grain=0..1\n//\n// Knob 1: Hue. Turns the culture's colour around the wheel.\n// Knob 2: Speed. How fast the culture grows; at 2 it runs 240 steps a second.\n// Knob 3: Species. Walks the feed and kill rates through coral, maze, holes, spots, mitosis and worms.\n// Knob 4: Grain. Slows the spreading against the reaction, so every species grows finer, from fat tubes to filigree.\n// Buttons: K1 tap reseeds the dish.\n\n// Gray-Scott feed and kill rates, one pair per species, in knob order.\nconst SPECIES = [\n  [0.0545, 0.062],\n  [0.029, 0.057],\n  [0.039, 0.058],\n  [0.03, 0.062],\n  [0.0367, 0.0649],\n  [0.078, 0.061],\n];\n\nconst W = 64;\nconst H = 128;\n\nfunction rand(params) {\n  let s = params.seed | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.seed = s;\n  return (s >>> 0) / 4294967296;\n}\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// Pearson's perturbation, a disc of half-used feed with some catalyst in it.\nfunction dab(params, cx, cy, r, mix) {\n  const a = params.a;\n  const b = params.b;\n  for (let dy = -r; dy \u003c= r; dy++) {\n    for (let dx = -r; dx \u003c= r; dx++) {\n      if (dx * dx + dy * dy > r * r) continue;\n      const i = ((cy + dy + H * 4) % H) * W + ((cx + dx + W * 4) % W);\n      a[i] += (0.5 - a[i]) * mix;\n      b[i] += (0.25 + rand(params) * 0.05 - b[i]) * mix;\n    }\n  }\n}\n\n// Seeds grow with the spreading rate: smaller ones fade in the spot species,\n// and bigger or closer ones starve each other.\nfunction seedSize(params) {\n  return Math.round(6 * Math.sqrt(params.d));\n}\n\nfunction seedDish(params) {\n  params.a.fill(1);\n  params.b.fill(0);\n  // One seed in each cell of a 3 by 6 grid, jittered, so the dish fills evenly.\n  for (let n = 0; n \u003c 18; n++) {\n    const cx = Math.floor(((n % 3) + 0.15 + rand(params) * 0.7) * (W / 3));\n    const cy = Math.floor((Math.floor(n / 3) + 0.15 + rand(params) * 0.7) * (H / 6));\n    dab(params, cx, cy, seedSize(params) + Math.floor(rand(params) * 2), 1);\n  }\n  params.young = 1;\n  params.fresh = false;\n}\n\nfunction step(params, F, K, D) {\n  const tsx = params.tsx;\n  const tcx = params.tcx;\n  const a = params.a;\n  const b = params.b;\n  const na = params.na;\n  const nb = params.nb;\n  for (let y = 0; y \u003c H; y++) {\n    const up = ((y + H - 1) % H) * W;\n    const row = y * W;\n    const down = ((y + 1) % H) * W;\n    const tcy = params.tcy[y];\n    const tsy = params.tsy[y];\n    for (let x = 0; x \u003c W; x++) {\n      const l = x === 0 ? W - 1 : x - 1;\n      const r = x === W - 1 ? 0 : x + 1;\n      const i = row + x;\n      const av = a[i];\n      const bv = b[i];\n      const la =\n        0.2 * (a[up + x] + a[down + x] + a[row + l] + a[row + r]) +\n        0.05 * (a[up + l] + a[up + r] + a[down + l] + a[down + r]) -\n        av;\n      const lb =\n        0.2 * (b[up + x] + b[down + x] + b[row + l] + b[row + r]) +\n        0.05 * (b[up + l] + b[up + r] + b[down + l] + b[down + r]) -\n        bv;\n      const abb = av * bv * bv;\n      // The tide, sin(ax + by + phase), split into a row part and a column part.\n      const fx = F + tsx[x] * tcy + tcx[x] * tsy;\n      na[i] = av + D * la - abb + fx * (1 - av);\n      // Catalyst that has all but gone is set to zero, which keeps the float maths fast.\n      const nv = bv + 0.5 * D * lb + abb - (K + fx) * bv;\n      nb[i] = nv > 1e-5 ? nv : 0;\n    }\n  }\n  params.a = na;\n  params.b = nb;\n  params.na = a;\n  params.nb = b;\n}\n\nexport function setup(params) {\n  params.a = new Float32Array(W * H);\n  params.b = new Float32Array(W * H);\n  params.na = new Float32Array(W * H);\n  params.nb = new Float32Array(W * H);\n  params.lut = new Uint8Array(256 * 3);\n  params.lutHue = -1;\n  params.seed = 0x2545f491;\n  params.pending = 0;\n  params.check = 0;\n  params.drip = 0;\n  params.tsx = new Float32Array(W);\n  params.tcx = new Float32Array(W);\n  params.tsy = new Float32Array(H);\n  params.tcy = new Float32Array(H);\n  params.tideT = 0;\n  params.young = 0;\n  params.d = 1;\n  // The first update seeds the dish, once the knobs are known.\n  params.fresh = true;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const species = Math.max(0, Math.min(SPECIES.length - 1, k[2]));\n  const i = Math.min(SPECIES.length - 2, Math.floor(species));\n  const f = species - i;\n  const F = SPECIES[i][0] + (SPECIES[i + 1][0] - SPECIES[i][0]) * f;\n  const K = SPECIES[i][1] + (SPECIES[i + 1][1] - SPECIES[i][1]) * f;\n\n  params.d = 1 - 0.45 * Math.max(0, Math.min(1, k[3]));\n  if (params.fresh || (input.btnPressed && input.btnPressed[0])) seedDish(params);\n\n  // A fresh dish runs fast for its first second, so the species shows sooner.\n  params.young = Math.max(0, params.young - dt);\n  params.pending += dt * k[1] * 120 * (1 + params.young * 2);\n  let steps = Math.floor(params.pending);\n  params.pending -= steps;\n  if (steps > 32) steps = 32;\n\n  // A slow tide of feed rolls across the dish and turns as it goes, and now\n  // and then a drop of fresh culture lands, so a dish that has settled keeps\n  // changing.\n  params.drip += steps;\n  if (params.drip > 600) {\n    params.drip = 0;\n    dab(params, Math.floor(rand(params) * W), Math.floor(rand(params) * H), seedSize(params), 0.8);\n  }\n  params.tideT += steps / 7200;\n  const turn = params.tideT * 1.3;\n  // About 85 cells from crest to crest, the same whichever way the tide faces.\n  const ax = (Math.cos(turn) * 9.42) / 128;\n  const by = (Math.sin(turn) * 9.42) / 128;\n  const phase = params.tideT * 6.2832;\n  for (let x = 0; x \u003c W; x++) {\n    params.tsx[x] = Math.sin(ax * x);\n    params.tcx[x] = Math.cos(ax * x);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    params.tcy[y] = 0.0035 * Math.cos(by * y + phase);\n    params.tsy[y] = 0.0035 * Math.sin(by * y + phase);\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, F, K, params.d);\n\n  // A dish that died out, or filled one flat colour, starts again.\n  params.check += dt;\n  if (params.check > 0.5) {\n    params.check = 0;\n    let lo = 1;\n    let hi = 0;\n    const b = params.b;\n    for (let j = 0; j \u003c b.length; j += 5) {\n      if (b[j] \u003c lo) lo = b[j];\n      if (b[j] > hi) hi = b[j];\n    }\n    if (hi \u003c 0.04 || hi - lo \u003c 0.04) seedDish(params);\n  }\n}\n\nexport function draw(display, params, time) {\n  if (params.lutHue !== params.hue) {\n    params.lutHue = params.hue;\n    const lut = params.lut;\n    for (let i = 0; i \u003c 256; i++) {\n      const t = i / 255;\n      // A deep rim a step round the wheel, then a bright, paler core.\n      const c = hsv(params.hue + 0.72 - t * 0.22, 1 - t * t * 0.4, Math.min(1, t * 1.8));\n      lut[i * 3] = c[0];\n      lut[i * 3 + 1] = c[1];\n      lut[i * 3 + 2] = c[2];\n    }\n  }\n  const b = params.b;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let v = (b[i] - 0.05) * 2.7;\n      if (v \u003c= 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      if (v > 1) v = 1;\n      // Light from the top left, so each blob reads as a raised bead.\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      let shade = 0.8 + (b[up + l] - b[down + r]) * 5;\n      shade = shade \u003c 0.35 ? 0.35 : shade > 1.25 ? 1.25 : shade;\n      const li = Math.round(v * 255) * 3;\n      display.setPixel(x, y, lut[li] * shade, lut[li + 1] * shade, lut[li + 2] * shade);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.5..4, Species=0..5, Grain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the culture's colour around the wheel."},{"name":"Speed","min":0.5,"max":4,"about":"How fast the culture grows; at 2 it runs 240 steps a second."},{"name":"Species","min":0,"max":5,"about":"Walks the feed and kill rates through coral, maze, holes, spots, mitosis and worms."},{"name":"Grain","min":0,"max":1,"about":"Slows the spreading against the reaction, so every species grows finer, from fat tubes to filigree."}],"start":[0,2,0,0.06],"measures":{"motion":0.0572,"detail":0.0825,"edges":0.3087,"complexity":2.0894,"coverage":0.7212,"colour":0.4058,"drift":0.1337},"knobResponse":[0.314,0.2095,0.2824,0.2879]},{"slug":"ripple-tank","title":"Ripple Tank","family":"sim","round":1,"note":"빗방울이 떨어진 자리마다 고리가 퍼지고 벽에 부딪혀 되돌아와 서로 겹쳐요.","idea":"Rain on a shallow tank, where every drop's ring runs into the walls and into every other ring and the panel shows where they agree.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Ripple Tank\n// Family:  sim\n// Idea:    Rain on a shallow tank, where every drop's ring runs into the walls and into every other ring and the panel shows where they agree.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rain=0.5..6, Damping=0..1, Drop=2.5..6\n//\n// Knob 1: Hue. Turns the crests round the colour wheel; the troughs stay deep blue.\n// Knob 2: Rain. Drops per second.\n// Knob 3: Damping. How long a ring keeps going; low rings on and bounces off the walls, high fades before it gets far.\n// Knob 4: Drop. Size of each drop; small drops throw fine rings, big ones a slow swell.\n\nconst W = 64;\nconst H = 128;\n// Wave speed squared, in cells per step; this stencil blows up above 0.75.\nconst C2 = 0.55;\nconst NU = 0.008;\nconst DEPTH = 2.5;\nconst STEPS_PER_SECOND = 64;\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nfunction rand(params) {\n  let s = params.seed | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.seed = s;\n  return (s >>> 0) / 4294967296;\n}\n\nfunction drop(params, size) {\n  const cx = 4 + rand(params) * (W - 8);\n  const cy = 4 + rand(params) * (H - 8);\n  const r = Math.ceil(size * 3);\n  // Big drops hold more water, so each one falls a little shallower.\n  const depth = DEPTH * 2.5 / size;\n  const u = params.u;\n  const p = params.p;\n  // A dimple with a raised lip round it. The two hold the same water, so a\n  // drop adds no level to the tank and leaves no slow wake behind its ring.\n  for (let y = Math.max(0, Math.floor(cy - r)); y \u003c= Math.min(H - 1, cy + r); y++) {\n    for (let x = Math.max(0, Math.floor(cx - r)); x \u003c= Math.min(W - 1, cx + r); x++) {\n      const dx = (x - cx) / size;\n      const dy = (y - cy) / size;\n      const d2 = dx * dx + dy * dy;\n      if (d2 > 9) continue;\n      const v = depth * (1 - d2) * Math.exp(-d2);\n      u[y * W + x] -= v;\n      p[y * W + x] -= v;\n    }\n  }\n}\n\nfunction step(params, damp) {\n  const u = params.u;\n  const p = params.p;\n  // p is overwritten with the next state, then the two swap.\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const row = y * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      // The walls mirror the cell beside them, so rings bounce back whole.\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      const i = row + x;\n      const c = u[i];\n      const sides = u[up + x] + u[down + x] + u[row + l] + u[row + r];\n      const corners = u[up + l] + u[up + r] + u[down + l] + u[down + r];\n      // The nine-point Laplacian keeps rings round instead of square.\n      const lap = (4 * sides + corners - 20 * c) / 6;\n      // Viscosity: ripples finer than a few cells die first, so the grid's\n      // own chequered wake never builds up.\n      const was = p[i];\n      const blur = sides - (p[up + x] + p[down + x] + p[row + l] + p[row + r]) - 4 * (c - was);\n      p[i] = (2 * c - was + C2 * lap + NU * blur) * damp;\n    }\n  }\n  params.u = p;\n  params.p = u;\n}\n\nexport function setup(params) {\n  params.u = new Float32Array(W * H);\n  params.p = new Float32Array(W * H);\n  params.lut = new Uint8Array(512 * 3);\n  params.lutHue = -1;\n  params.seed = 0x5bd1e995;\n  params.pending = 0;\n  params.next = 0.1;\n  params.clock = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 2.5];\n  params.hue = k[0];\n  const rain = k[1];\n  // Decay per second, from about three seconds of ringing down to a quarter of one.\n  const gamma = 0.33 * Math.pow(12, Math.max(0, Math.min(1, k[2])));\n  const size = k[3];\n\n  params.clock += dt;\n  while (params.clock >= params.next) {\n    drop(params, size);\n    // Irregular, but never a long dry spell.\n    params.next += (0.35 + rand(params) * 1.3) / Math.max(0.1, rain);\n  }\n\n  params.pending += dt * STEPS_PER_SECOND;\n  let steps = Math.floor(params.pending);\n  params.pending -= steps;\n  if (steps > 8) steps = 8;\n  const damp = Math.exp(-gamma / STEPS_PER_SECOND);\n  for (let s = 0; s \u003c steps; s++) step(params, damp);\n}\n\nexport function draw(display, params, time) {\n  // One table for troughs (first half) and crests (second half). Troughs\n  // stay blue at every hue: a dim orange trough would read as brown.\n  if (params.lutHue !== params.hue) {\n    params.lutHue = params.hue;\n    const lut = params.lut;\n    for (let i = 0; i \u003c 512; i++) {\n      const t = Math.abs(i - 255.5) / 255.5;\n      // Rings lose height fast as they spread, so the brightness curve lifts\n      // the low end, and the faintest ripples still sink into the dark.\n      const e = Math.pow(Math.max(0, (t - 0.1) / 0.9), 0.6);\n      const c = i > 255\n        ? hsv(params.hue + 0.52 - t * 0.04, 0.9 - t * t * 0.6, e)\n        : hsv(0.64, 0.95, e * 0.5);\n      lut[i * 3] = c[0];\n      lut[i * 3 + 1] = c[1];\n      lut[i * 3 + 2] = c[2];\n    }\n  }\n  const u = params.u;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      let v = u[y * W + x] * 14;\n      v = v \u003c -1 ? -1 : v > 1 ? 1 : v;\n      const li = Math.round(255.5 + v * 255.5) * 3;\n      display.setPixel(x, y, lut[li], lut[li + 1], lut[li + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-ripple-tank","type":"code","name":"ripple-tank","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ripple Tank\n// Family:  sim\n// Idea:    Rain on a shallow tank, where every drop's ring runs into the walls and into every other ring and the panel shows where they agree.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rain=0.5..6, Damping=0..1, Drop=2.5..6\n//\n// Knob 1: Hue. Turns the crests round the colour wheel; the troughs stay deep blue.\n// Knob 2: Rain. Drops per second.\n// Knob 3: Damping. How long a ring keeps going; low rings on and bounces off the walls, high fades before it gets far.\n// Knob 4: Drop. Size of each drop; small drops throw fine rings, big ones a slow swell.\n\nconst W = 64;\nconst H = 128;\n// Wave speed squared, in cells per step; this stencil blows up above 0.75.\nconst C2 = 0.55;\nconst NU = 0.008;\nconst DEPTH = 2.5;\nconst STEPS_PER_SECOND = 64;\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nfunction rand(params) {\n  let s = params.seed | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.seed = s;\n  return (s >>> 0) / 4294967296;\n}\n\nfunction drop(params, size) {\n  const cx = 4 + rand(params) * (W - 8);\n  const cy = 4 + rand(params) * (H - 8);\n  const r = Math.ceil(size * 3);\n  // Big drops hold more water, so each one falls a little shallower.\n  const depth = DEPTH * 2.5 / size;\n  const u = params.u;\n  const p = params.p;\n  // A dimple with a raised lip round it. The two hold the same water, so a\n  // drop adds no level to the tank and leaves no slow wake behind its ring.\n  for (let y = Math.max(0, Math.floor(cy - r)); y \u003c= Math.min(H - 1, cy + r); y++) {\n    for (let x = Math.max(0, Math.floor(cx - r)); x \u003c= Math.min(W - 1, cx + r); x++) {\n      const dx = (x - cx) / size;\n      const dy = (y - cy) / size;\n      const d2 = dx * dx + dy * dy;\n      if (d2 > 9) continue;\n      const v = depth * (1 - d2) * Math.exp(-d2);\n      u[y * W + x] -= v;\n      p[y * W + x] -= v;\n    }\n  }\n}\n\nfunction step(params, damp) {\n  const u = params.u;\n  const p = params.p;\n  // p is overwritten with the next state, then the two swap.\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const row = y * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      // The walls mirror the cell beside them, so rings bounce back whole.\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      const i = row + x;\n      const c = u[i];\n      const sides = u[up + x] + u[down + x] + u[row + l] + u[row + r];\n      const corners = u[up + l] + u[up + r] + u[down + l] + u[down + r];\n      // The nine-point Laplacian keeps rings round instead of square.\n      const lap = (4 * sides + corners - 20 * c) / 6;\n      // Viscosity: ripples finer than a few cells die first, so the grid's\n      // own chequered wake never builds up.\n      const was = p[i];\n      const blur = sides - (p[up + x] + p[down + x] + p[row + l] + p[row + r]) - 4 * (c - was);\n      p[i] = (2 * c - was + C2 * lap + NU * blur) * damp;\n    }\n  }\n  params.u = p;\n  params.p = u;\n}\n\nexport function setup(params) {\n  params.u = new Float32Array(W * H);\n  params.p = new Float32Array(W * H);\n  params.lut = new Uint8Array(512 * 3);\n  params.lutHue = -1;\n  params.seed = 0x5bd1e995;\n  params.pending = 0;\n  params.next = 0.1;\n  params.clock = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 2.5];\n  params.hue = k[0];\n  const rain = k[1];\n  // Decay per second, from about three seconds of ringing down to a quarter of one.\n  const gamma = 0.33 * Math.pow(12, Math.max(0, Math.min(1, k[2])));\n  const size = k[3];\n\n  params.clock += dt;\n  while (params.clock >= params.next) {\n    drop(params, size);\n    // Irregular, but never a long dry spell.\n    params.next += (0.35 + rand(params) * 1.3) / Math.max(0.1, rain);\n  }\n\n  params.pending += dt * STEPS_PER_SECOND;\n  let steps = Math.floor(params.pending);\n  params.pending -= steps;\n  if (steps > 8) steps = 8;\n  const damp = Math.exp(-gamma / STEPS_PER_SECOND);\n  for (let s = 0; s \u003c steps; s++) step(params, damp);\n}\n\nexport function draw(display, params, time) {\n  // One table for troughs (first half) and crests (second half). Troughs\n  // stay blue at every hue: a dim orange trough would read as brown.\n  if (params.lutHue !== params.hue) {\n    params.lutHue = params.hue;\n    const lut = params.lut;\n    for (let i = 0; i \u003c 512; i++) {\n      const t = Math.abs(i - 255.5) / 255.5;\n      // Rings lose height fast as they spread, so the brightness curve lifts\n      // the low end, and the faintest ripples still sink into the dark.\n      const e = Math.pow(Math.max(0, (t - 0.1) / 0.9), 0.6);\n      const c = i > 255\n        ? hsv(params.hue + 0.52 - t * 0.04, 0.9 - t * t * 0.6, e)\n        : hsv(0.64, 0.95, e * 0.5);\n      lut[i * 3] = c[0];\n      lut[i * 3 + 1] = c[1];\n      lut[i * 3 + 2] = c[2];\n    }\n  }\n  const u = params.u;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      let v = u[y * W + x] * 14;\n      v = v \u003c -1 ? -1 : v > 1 ? 1 : v;\n      const li = Math.round(255.5 + v * 255.5) * 3;\n      display.setPixel(x, y, lut[li], lut[li + 1], lut[li + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Rain=0.5..6, Damping=0..1, Drop=2.5..6","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the crests round the colour wheel; the troughs stay deep blue."},{"name":"Rain","min":0.5,"max":6,"about":"Drops per second."},{"name":"Damping","min":0,"max":1,"about":"How long a ring keeps going; low rings on and bounces off the walls, high fades before it gets far."},{"name":"Drop","min":2.5,"max":6,"about":"Size of each drop; small drops throw fine rings, big ones a slow swell."}],"start":[0,2,0,2.5],"measures":{"motion":4.7512,"detail":0.0907,"edges":0.3794,"complexity":1.2184,"coverage":0.4445,"colour":0.2076,"drift":0.234},"knobResponse":[0.0799,0.2629,0.1082,0.1339]},{"slug":"rule-scroll","title":"Rule Scroll","family":"automata","round":1,"note":"64칸 한 줄이 이웃을 보고 다음 줄을 써 내려가요. 8비트 숫자 하나가 삼각형이 될지 잡음이 될지 정해요.","idea":"A row of 64 cells looks at its neighbours and writes the next row under itself, and one eight-bit number decides whether the rows grow into nested triangles or into noise.","buttons":"K1 tap starts again from a single cell.","code":"// ===== Patternflow pattern =====\n// Title:   Rule Scroll\n// Family:  automata\n// Idea:    A row of 64 cells looks at its neighbours and writes the next row under itself, and one eight-bit number decides whether the rows grow into nested triangles or into noise.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Rule=0..11, Noise=0..1\n//\n// Knob 1: Hue. Turns the colours around the colour wheel; each colour stands for the three cells a cell was born from.\n// Knob 2: Speed. Generations per second, from 3 to 24, one row each.\n// Knob 3: Rule. Walks the rules 30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62 and 126.\n// Knob 4: Noise. Random flips each generation, which show as white sparks and break ordered rules open.\n// Buttons: K1 tap starts again from a single cell.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nconst W = 64;\nconst H = 128;\nconst RULES = [30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62, 126];\n// Hue offset, saturation and brightness for each neighbourhood, left centre\n// right as three bits, then one more for a cell the noise flipped. The two\n// uniform ones, 000 and 111, are a rule's ground and stay dim, so the\n// structure carries the light.\nconst LOOK = [\n  [0.5, 0.85, 0.3],\n  [-0.06, 0.9, 1.0],\n  [0.0, 0.9, 0.75],\n  [-0.03, 0.85, 0.85],\n  [0.06, 0.9, 1.0],\n  [0.5, 0.75, 1.0],\n  [0.03, 0.85, 0.85],\n  [0.0, 0.7, 0.35],\n  [0.0, 0.0, 1.0],\n];\n\nfunction rand(params) {\n  let s = params.rng | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.rng = s;\n  return (s >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.rows = new Uint8Array(W * H);\n  params.cur = new Uint8Array(W);\n  params.nxt = new Uint8Array(W);\n  // The last eight rows, each packed into two 32-bit words.\n  params.histLo = new Int32Array(8);\n  params.histHi = new Int32Array(8);\n  params.histAt = 0;\n  params.palette = new Float32Array(LOOK.length * 3);\n  params.rng = (Math.random() * 4294967295) | 1;\n  params.head = 0;\n  params.acc = 0;\n  params.gen = 0;\n  params.repeats = 0;\n  params.started = false;\n}\n\nfunction restart(params, rule) {\n  params.cur.fill(0);\n  params.cur[W >> 1] = 1;\n  params.rows.fill(0);\n  // Fill the panel before the first frame, so it opens on the whole cone.\n  for (let i = 0; i \u003c H - 1; i++) step(params, rule, 0);\n}\n\nfunction step(params, rule, noise) {\n  const cur = params.cur;\n  const nxt = params.nxt;\n  params.head = (params.head + 1) % H;\n  const row = params.head * W;\n  let lit = 0;\n  for (let x = 0; x \u003c W; x++) {\n    const n = (cur[(x + W - 1) % W] \u003c\u003c 2) | (cur[x] \u003c\u003c 1) | cur[(x + 1) % W];\n    const v = (rule >> n) & 1;\n    nxt[x] = v;\n    params.rows[row + x] = v ? 1 + n : 0;\n    lit += v;\n  }\n  // Noise is the mean number of flips per generation; the fraction is a chance.\n  let flips = Math.floor(noise);\n  if (rand(params) \u003c noise - flips) flips++;\n  for (let f = 0; f \u003c flips; f++) {\n    const x = Math.floor(rand(params) * W);\n    nxt[x] ^= 1;\n    lit += nxt[x] ? 1 : -1;\n    params.rows[row + x] = nxt[x] ? 9 : 0;\n  }\n  // A row that is all one state, or repeats one of the last eight, has\n  // nothing left to show: one flipped cell starts it moving again. On a ring\n  // of 64 rule 54 settles into a lattice of period four after 34 generations\n  // and rule 62 into one of period three; a flip there sets gliders running.\n  let lo = 0;\n  let hi = 0;\n  for (let x = 0; x \u003c 32; x++) {\n    lo |= nxt[x] \u003c\u003c x;\n    hi |= nxt[x + 32] \u003c\u003c x;\n  }\n  let same = false;\n  for (let i = 0; i \u003c 8 && !same; i++) if (params.histLo[i] === lo && params.histHi[i] === hi) same = true;\n  params.histLo[params.histAt] = lo;\n  params.histHi[params.histAt] = hi;\n  params.histAt = (params.histAt + 1) & 7;\n  params.repeats = same ? params.repeats + 1 : 0;\n  if (lit === 0 || lit === W || params.repeats > 24) {\n    const x = Math.floor(rand(params) * W);\n    nxt[x] ^= 1;\n    params.rows[row + x] = nxt[x] ? 9 : 0;\n    params.repeats = 0;\n  }\n  params.cur = nxt;\n  params.nxt = cur;\n  params.gen++;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // K1 at 0 opens on green rather than the red most of the study opens on.\n  params.hue = k[0] + 0.3;\n  const rate = 3 * Math.pow(2, 0.75 * k[1]);\n  const rule = RULES[Math.max(0, Math.min(RULES.length - 1, Math.round(k[2])))];\n  const noise = 5 * k[3] * k[3];\n  if (!params.started || (input.btnPressed && input.btnPressed[0])) {\n    restart(params, rule);\n    params.started = true;\n  }\n  params.acc += dt * rate;\n  let steps = 0;\n  while (params.acc >= 1 && steps \u003c 4) {\n    step(params, rule, noise);\n    params.acc -= 1;\n    steps++;\n  }\n  if (params.acc > 1) params.acc = 1;\n  // The colours drift slowly with the generations, one turn in about 2500.\n  const drift = params.gen * 0.0004;\n  for (let i = 0; i \u003c LOOK.length; i++) {\n    const c = hsv(params.hue + drift + LOOK[i][0], LOOK[i][1], LOOK[i][2]);\n    params.palette[i * 3] = c[0];\n    params.palette[i * 3 + 1] = c[1];\n    params.palette[i * 3 + 2] = c[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const pal = params.palette;\n  for (let y = 0; y \u003c H; y++) {\n    // The newest row is at the bottom; older rows dim a little as they rise.\n    const ring = (params.head - (H - 1 - y) + H * 2) % H;\n    const fade = 0.55 + 0.45 * (y / (H - 1));\n    const row = ring * W;\n    for (let x = 0; x \u003c W; x++) {\n      const v = params.rows[row + x];\n      if (v === 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const c = (v - 1) * 3;\n      display.setPixel(x, y, pal[c] * fade, pal[c + 1] * fade, pal[c + 2] * fade);\n    }\n  }\n}\n","layer":{"id":"layer-rule-scroll","type":"code","name":"rule-scroll","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rule Scroll\n// Family:  automata\n// Idea:    A row of 64 cells looks at its neighbours and writes the next row under itself, and one eight-bit number decides whether the rows grow into nested triangles or into noise.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Rule=0..11, Noise=0..1\n//\n// Knob 1: Hue. Turns the colours around the colour wheel; each colour stands for the three cells a cell was born from.\n// Knob 2: Speed. Generations per second, from 3 to 24, one row each.\n// Knob 3: Rule. Walks the rules 30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62 and 126.\n// Knob 4: Noise. Random flips each generation, which show as white sparks and break ordered rules open.\n// Buttons: K1 tap starts again from a single cell.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nconst W = 64;\nconst H = 128;\nconst RULES = [30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62, 126];\n// Hue offset, saturation and brightness for each neighbourhood, left centre\n// right as three bits, then one more for a cell the noise flipped. The two\n// uniform ones, 000 and 111, are a rule's ground and stay dim, so the\n// structure carries the light.\nconst LOOK = [\n  [0.5, 0.85, 0.3],\n  [-0.06, 0.9, 1.0],\n  [0.0, 0.9, 0.75],\n  [-0.03, 0.85, 0.85],\n  [0.06, 0.9, 1.0],\n  [0.5, 0.75, 1.0],\n  [0.03, 0.85, 0.85],\n  [0.0, 0.7, 0.35],\n  [0.0, 0.0, 1.0],\n];\n\nfunction rand(params) {\n  let s = params.rng | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.rng = s;\n  return (s >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.rows = new Uint8Array(W * H);\n  params.cur = new Uint8Array(W);\n  params.nxt = new Uint8Array(W);\n  // The last eight rows, each packed into two 32-bit words.\n  params.histLo = new Int32Array(8);\n  params.histHi = new Int32Array(8);\n  params.histAt = 0;\n  params.palette = new Float32Array(LOOK.length * 3);\n  params.rng = (Math.random() * 4294967295) | 1;\n  params.head = 0;\n  params.acc = 0;\n  params.gen = 0;\n  params.repeats = 0;\n  params.started = false;\n}\n\nfunction restart(params, rule) {\n  params.cur.fill(0);\n  params.cur[W >> 1] = 1;\n  params.rows.fill(0);\n  // Fill the panel before the first frame, so it opens on the whole cone.\n  for (let i = 0; i \u003c H - 1; i++) step(params, rule, 0);\n}\n\nfunction step(params, rule, noise) {\n  const cur = params.cur;\n  const nxt = params.nxt;\n  params.head = (params.head + 1) % H;\n  const row = params.head * W;\n  let lit = 0;\n  for (let x = 0; x \u003c W; x++) {\n    const n = (cur[(x + W - 1) % W] \u003c\u003c 2) | (cur[x] \u003c\u003c 1) | cur[(x + 1) % W];\n    const v = (rule >> n) & 1;\n    nxt[x] = v;\n    params.rows[row + x] = v ? 1 + n : 0;\n    lit += v;\n  }\n  // Noise is the mean number of flips per generation; the fraction is a chance.\n  let flips = Math.floor(noise);\n  if (rand(params) \u003c noise - flips) flips++;\n  for (let f = 0; f \u003c flips; f++) {\n    const x = Math.floor(rand(params) * W);\n    nxt[x] ^= 1;\n    lit += nxt[x] ? 1 : -1;\n    params.rows[row + x] = nxt[x] ? 9 : 0;\n  }\n  // A row that is all one state, or repeats one of the last eight, has\n  // nothing left to show: one flipped cell starts it moving again. On a ring\n  // of 64 rule 54 settles into a lattice of period four after 34 generations\n  // and rule 62 into one of period three; a flip there sets gliders running.\n  let lo = 0;\n  let hi = 0;\n  for (let x = 0; x \u003c 32; x++) {\n    lo |= nxt[x] \u003c\u003c x;\n    hi |= nxt[x + 32] \u003c\u003c x;\n  }\n  let same = false;\n  for (let i = 0; i \u003c 8 && !same; i++) if (params.histLo[i] === lo && params.histHi[i] === hi) same = true;\n  params.histLo[params.histAt] = lo;\n  params.histHi[params.histAt] = hi;\n  params.histAt = (params.histAt + 1) & 7;\n  params.repeats = same ? params.repeats + 1 : 0;\n  if (lit === 0 || lit === W || params.repeats > 24) {\n    const x = Math.floor(rand(params) * W);\n    nxt[x] ^= 1;\n    params.rows[row + x] = nxt[x] ? 9 : 0;\n    params.repeats = 0;\n  }\n  params.cur = nxt;\n  params.nxt = cur;\n  params.gen++;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // K1 at 0 opens on green rather than the red most of the study opens on.\n  params.hue = k[0] + 0.3;\n  const rate = 3 * Math.pow(2, 0.75 * k[1]);\n  const rule = RULES[Math.max(0, Math.min(RULES.length - 1, Math.round(k[2])))];\n  const noise = 5 * k[3] * k[3];\n  if (!params.started || (input.btnPressed && input.btnPressed[0])) {\n    restart(params, rule);\n    params.started = true;\n  }\n  params.acc += dt * rate;\n  let steps = 0;\n  while (params.acc >= 1 && steps \u003c 4) {\n    step(params, rule, noise);\n    params.acc -= 1;\n    steps++;\n  }\n  if (params.acc > 1) params.acc = 1;\n  // The colours drift slowly with the generations, one turn in about 2500.\n  const drift = params.gen * 0.0004;\n  for (let i = 0; i \u003c LOOK.length; i++) {\n    const c = hsv(params.hue + drift + LOOK[i][0], LOOK[i][1], LOOK[i][2]);\n    params.palette[i * 3] = c[0];\n    params.palette[i * 3 + 1] = c[1];\n    params.palette[i * 3 + 2] = c[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const pal = params.palette;\n  for (let y = 0; y \u003c H; y++) {\n    // The newest row is at the bottom; older rows dim a little as they rise.\n    const ring = (params.head - (H - 1 - y) + H * 2) % H;\n    const fade = 0.55 + 0.45 * (y / (H - 1));\n    const row = ring * W;\n    for (let x = 0; x \u003c W; x++) {\n      const v = params.rows[row + x];\n      if (v === 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const c = (v - 1) * 3;\n      display.setPixel(x, y, pal[c] * fade, pal[c + 1] * fade, pal[c + 2] * fade);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0..4, Rule=0..11, Noise=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours around the colour wheel; each colour stands for the three cells a cell was born from."},{"name":"Speed","min":0,"max":4,"about":"Generations per second, from 3 to 24, one row each."},{"name":"Rule","min":0,"max":11,"about":"Walks the rules 30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62 and 126."},{"name":"Noise","min":0,"max":1,"about":"Random flips each generation, which show as white sparks and break ordered rules open."}],"start":[0,2,0,0.06],"measures":{"motion":3.3184,"detail":0.3747,"edges":0.8011,"complexity":0.6155,"coverage":0.494,"colour":0.4373,"drift":0.0401},"knobResponse":[0.2576,0.1939,0.2319,0.0376]},{"slug":"sandpile","title":"Sandpile","family":"automata","round":21,"note":"한 칸에 모래알이 넷 모이면 이웃 넷에 하나씩 넘기는 쟁반에 모래가 한 줌씩 떨어져요. 사태가 떨어진 자리에서 빛나는 고리로 번지며 네 색 레이스를 다시 쓰고, 쟁반이 다 차면 기울어 모래를 쏟아요.","idea":"Handfuls of sand fall on a tray where any cell holding four grains topples one to each neighbour, each avalanche runs out from the drop point as a bright ring and leaves the four-colour lace of the pile rewritten behind it, and when the pile has filled the tall tray it tips and pours off.","buttons":"K1 tap tips the tray now.","code":"// ===== Patternflow pattern =====\n// Title:   Sandpile\n// Family:  automata\n// Idea:    Handfuls of sand fall on a tray where any cell holding four grains topples one to each neighbour, each avalanche runs out from the drop point as a bright ring and leaves the four-colour lace of the pile rewritten behind it, and when the pile has filled the tall tray it tips and pours off.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the Bak-Tang-Wiesenfeld abelian sandpile (1987)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..4, Speed=0.2..3, Sources=1..5, Scatter=0..1\n//\n// Knob 1: Palette. The four colours of 0, 1, 2 and 3 grains, each a shade deeper by the drop points than out at the rim: dune sand on indigo, glacier, moss, embers, neon.\n// Knob 2: Speed. Grains per second, 300 at 0.2 up to 4500 at 3; at 2 a handful of 1800 lands every 0.6 s and its ring takes half a second to cross the pile.\n// Knob 3: Sources. How many drop points the sand falls on: one in the middle, two stacked, a triangle, a square, a square with a centre.\n// Knob 4: Scatter. How wide each handful spreads as it lands: near 0 every grain hits the drop point and the pile keeps its mirror symmetry; towards 1 the grains land over a patch some forty cells across, the lace grows ragged and stray grains speckle the bare tray.\n// Buttons: K1 tap tips the tray now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sandpile lives on a grid one cell wider all round. The border cells\n// are the sinks: they start so far below zero that no number of grains\n// makes them topple, so grains pushed over the edge are simply gone.\nconst WP = W + 2;\nconst NP = WP * (H + 2);\nconst SINK = -(1 \u003c\u003c 30);\nconst { min, max, floor, round, sqrt, log2, exp, sin, cos, PI } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst at = (x, y) => (y + 1) * WP + x + 1;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Drop points for each Sources setting, as the centre of a 2x2 block of\n// cells, so every plan is mirror symmetric about the middle of the panel.\nconst POINTS = [\n  [[31.5, 63.5]],\n  [[31.5, 40.5], [31.5, 86.5]],\n  [[31.5, 33.5], [16.5, 91.5], [46.5, 91.5]],\n  [[17.5, 38.5], [45.5, 38.5], [17.5, 88.5], [45.5, 88.5]],\n  [[15.5, 33.5], [47.5, 33.5], [31.5, 63.5], [15.5, 93.5], [47.5, 93.5]],\n];\n\n// Each palette: 0, 1, 2 and 3 grains by the drop points, the same out at\n// the rim, the bare tray, and the glow of toppling. The study reads a cell by\n// its brightest channel, and most neighbours in a pile are a 3 beside a 2,\n// so 3 is the bright one and 2 the dark one, and the rim colours keep each\n// level's brightness while the hue drifts.\nconst PALS = [\n  [\n    [[10, 8, 20], [20, 128, 118], [14, 22, 62], [255, 198, 104]],\n    [[12, 8, 22], [54, 96, 150], [36, 16, 60], [255, 234, 200]],\n    [4, 5, 10],\n    [255, 236, 190],\n  ],\n  [\n    [[4, 8, 16], [30, 110, 150], [34, 20, 70], [170, 236, 255]],\n    [[4, 8, 16], [70, 90, 170], [20, 30, 72], [236, 246, 255]],\n    [2, 5, 9],\n    [200, 255, 255],\n  ],\n  [\n    [[6, 10, 4], [130, 112, 20], [14, 46, 26], [170, 255, 90]],\n    [[6, 10, 4], [96, 130, 30], [40, 40, 16], [230, 255, 160]],\n    [3, 5, 2],\n    [240, 255, 200],\n  ],\n  [\n    [[12, 3, 4], [176, 42, 26], [62, 12, 44], [255, 170, 40]],\n    [[12, 3, 6], [190, 30, 70], [40, 10, 60], [255, 214, 120]],\n    [6, 2, 2],\n    [255, 230, 170],\n  ],\n  [\n    [[6, 0, 12], [0, 148, 170], [54, 0, 92], [255, 110, 210]],\n    [[8, 0, 12], [40, 120, 200], [80, 0, 70], [255, 170, 250]],\n    [3, 0, 6],\n    [255, 220, 255],\n  ],\n];\n\nconst [GROW, HOLD, TILT] = [0, 1, 2];\n// A ripple runs out at this many cells a second; the glow trails it by about\n// RING cells.\nconst RIP = 150;\nconst RING = 5;\n\nexport function setup(params) {\n  const P = params;\n  P.z = new Int32Array(NP);\n  P.heat = new Int32Array(NP);\n  // Cells waiting to topple. A cell goes on when it reaches four grains and\n  // comes off when it topples, so it is never on twice.\n  P.st = new Int32Array(NP);\n  P.sp = 0;\n  // Mirror lines: bit 1 sends a cell's right-hand grain back to itself, bit\n  // 2 its downward one.\n  P.mir = new Uint8Array(NP);\n  P.mode = 0;\n  // What the panel shows: the pile before the running ripple and after it,\n  // each cell as its grains plus 4 once sand has reached it.\n  P.reach = new Uint8Array(N);\n  P.cur = new Uint8Array(N);\n  P.tgt = new Uint8Array(N);\n  P.amp = new Float32Array(N);\n  P.dist = new Float32Array(N);\n  P.tone = new Float32Array(N);\n  P.toneKey = \"\";\n  P.col = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) P.col[x] = rnd();\n  P.started = false;\n  P.phase = GROW;\n  P.pt = 0;\n  P.wait = 0;\n  P.full = 0;\n  P.shift = 0;\n  clear(P);\n}\n\nfunction clear(P) {\n  const z = P.z;\n  z.fill(SINK);\n  for (let y = 0; y \u003c H; y++) z.fill(0, at(0, y), at(0, y) + W);\n  P.heat.fill(0);\n  P.sp = 0;\n  P.reach.fill(0);\n  P.cur.fill(0);\n  P.tgt.fill(0);\n  P.rip = -1;\n  P.next = null;\n  P.symX = true;\n  P.symY = true;\n  P.edge = -1;\n}\n\n// Where the drop points sit this cycle: the first cycle uses the plan as it\n// stands, later ones slide it up or down the tray.\nfunction points(P, n) {\n  return POINTS[n - 1].map(([x, y]) => [x, clamp(y + P.shift, 9.5, H - 10.5)]);\n}\n\n// While the pile is mirror symmetric, only the top left quarter (or the left\n// half) is worked out and then unfolded: a cell on a mirror line topples one\n// grain back onto itself. It is the same pile for a quarter of the work.\nfunction setMode(P, m) {\n  if (m === P.mode) return;\n  P.mode = m;\n  P.mir.fill(0);\n  if (m & 1) for (let y = 0; y \u003c H; y++) P.mir[at(W / 2 - 1, y)] |= 1;\n  if (m & 2) for (let x = 0; x \u003c W; x++) P.mir[at(x, H / 2 - 1)] |= 2;\n}\n\nfunction unfold(P) {\n  const { z, heat, mode } = P;\n  if (mode & 1)\n    for (let y = 0; y \u003c H; y++)\n      for (let x = W / 2; x \u003c W; x++) (z[at(x, y)] = z[at(W - 1 - x, y)]), (heat[at(x, y)] = heat[at(W - 1 - x, y)]);\n  if (mode & 2) {\n    for (let y = H / 2; y \u003c H; y++) {\n      z.copyWithin(at(-1, y), at(-1, H - 1 - y), at(-1, H - y));\n      heat.copyWithin(at(-1, y), at(-1, H - 1 - y), at(-1, H - y));\n    }\n  }\n}\n\nfunction add(P, p, g) {\n  const o = P.z[p];\n  P.z[p] = o + g;\n  if (o \u003c 4 && o + g > 3) P.st[P.sp++] = p;\n}\n\n// One handful shared by every drop point: on each point's 2x2 block, or\n// strewn round it with Scatter.\nfunction pour(P, pts, g, spread) {\n  if (spread \u003c= 0) {\n    const share = max(1, floor(g / 4 / pts.length));\n    for (const [cx, cy] of pts)\n      for (let i = 0; i \u003c 4; i++) {\n        const x = floor(cx) + (i & 1);\n        const y = floor(cy) + (i >> 1);\n        if (!((P.mode & 1 && x >= W / 2) || (P.mode & 2 && y >= H / 2))) add(P, at(x, y), share);\n      }\n    return;\n  }\n  for (let i = 0; i \u003c g; i++) {\n    const [cx, cy] = pts[i % pts.length];\n    const a = rnd() * 2 * PI;\n    const d = spread * sqrt(-2 * Math.log(1 - rnd() * 0.999));\n    const x = round(cx + cos(a) * d);\n    const y = round(cy + sin(a) * d);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) add(P, at(x, y), 1);\n  }\n}\n\n// Topple until stable or out of budget. A cell with 4k grains or more\n// topples k times at once. Working from the top of the stack keeps the\n// avalanche local, which is the fastest order on this grid.\nfunction settle(P, cap) {\n  const { z, st, heat, mir } = P;\n  let sp = P.sp;\n  let ops = 0;\n  while (sp > 0 && ops \u003c cap) {\n    const p = st[--sp];\n    const v = z[p];\n    const k = v >> 2;\n    const m = mir[p];\n    z[p] = v & 3;\n    heat[p] += k;\n    ops++;\n    let n, o;\n    o = z[(n = p - 1)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = m & 1 ? p : p + 1)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = p - WP)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = m & 2 ? p : p + WP)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n  }\n  P.sp = sp;\n  if (sp) return false;\n  unfold(P);\n  return true;\n}\n\n// The settled pile as the panel shows it, and how much of the tray it covers.\nfunction snapshot(P, out) {\n  const { z, heat, reach } = P;\n  let n = 0;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, s = at(0, y); x \u003c W; x++, p++, s++) {\n      if (z[s] || heat[s]) reach[p] = 1;\n      out[p] = reach[p] ? 4 + z[s] : 0;\n      n += reach[p];\n    }\n  return n / N;\n}\n\n// Choose the mirror work for the next handful. Every plan is symmetric left\n// to right; Scatter breaks both mirrors until the tray is emptied, and a plan\n// off the middle row breaks the top-bottom one.\nfunction plan(P, spread) {\n  if (spread > 0) P.symX = P.symY = false;\n  if (P.shift || P.n === 3) P.symY = false;\n  setMode(P, (P.symX ? 1 : 0) | (P.symY ? 2 : 0));\n  const pts = points(P, P.n);\n  // How far each cell is from the nearest drop point, for the colours.\n  if (P.toneKey !== P.n + \",\" + P.shift) {\n    P.toneKey = P.n + \",\" + P.shift;\n    for (let p = 0; p \u003c N; p++) {\n      let d = 1e9;\n      for (const [cx, cy] of pts) d = min(d, ((p & 63) - cx) ** 2 + ((p >> 6) - cy) ** 2);\n      P.tone[p] = min(1, sqrt(d) / 64);\n    }\n  }\n  return pts;\n}\n\n// Pour on every drop point together until the pile covers this much of the\n// tray, so the picture opens mid-growth whatever the knobs say.\nfunction prerun(P, cover, spread) {\n  const pts = plan(P, spread);\n  for (let i = 0; i \u003c 200; i++) {\n    pour(P, pts, 1600, spread);\n    settle(P, 1e9);\n    if (snapshot(P, P.cur) >= cover) break;\n  }\n  P.heat.fill(0);\n  P.tgt.set(P.cur);\n}\n\n// A ripple shows the handful that has settled: from the drop points outward,\n// cells take their new value and glow by how often they toppled.\nfunction startRipple(P, pts) {\n  const cov = snapshot(P, P.tgt);\n  const { heat, amp, dist, cur, tgt } = P;\n  let far = 0;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, s = at(0, y); x \u003c W; x++, p++, s++) {\n      // Cells the avalanche rewrote flash, the more the more often they\n      // toppled; sand reaching bare tray flashes brightest.\n      const h = heat[s];\n      amp[p] = tgt[p] !== cur[p] ? min(1, 0.3 + log2(1 + h) / 8 + (cur[p] ? 0 : 0.4)) : h > 0 ? 0.12 : 0;\n      let d = 1e9;\n      for (const [cx, cy] of pts) d = min(d, (x - cx) ** 2 + (y - cy) ** 2);\n      dist[p] = d = sqrt(d);\n      if (h > 0 && d > far) far = d;\n    }\n  heat.fill(0);\n  P.rip = 0;\n  P.ripMax = far + RING * 3;\n  return cov;\n}\n\n// The tray tips with whatever the panel shows on it.\nfunction tip(P) {\n  if (P.rip >= 0) P.cur.set(P.tgt);\n  P.rip = -1;\n  P.phase = TILT;\n  P.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.pal = clamp(round(k[0]), 0, 4);\n  const speed = clamp(k[1], 0.2, 3);\n  P.n = clamp(round(k[2]), 1, 5);\n  const spread = (P.spread = max(0, clamp(k[3], 0, 1) - 0.08) * 14);\n  P.speed = speed;\n  if (!P.started) {\n    P.started = true;\n    prerun(P, 0.74, spread);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== TILT) tip(P);\n\n  if (P.phase === TILT) {\n    P.pt += dt;\n    if (P.pt > 1.4) {\n      clear(P);\n      P.shift = round((rnd() - 0.5) * 40);\n      P.phase = GROW;\n      P.wait = 0;\n    }\n    return;\n  }\n\n  // Work on the next handful while the last one's ripple runs.\n  settle(P, 60000);\n  if (P.rip >= 0) {\n    P.rip += RIP * sqrt(speed / 2) * dt;\n    if (P.rip > P.ripMax) {\n      P.cur.set(P.tgt);\n      P.rip = -1;\n    }\n  }\n  P.wait -= dt;\n  if (P.edge >= 0) P.edge += (dt * speed) / 2;\n  if (P.phase === HOLD) {\n    P.full += dt;\n    if (P.full > 2) tip(P);\n    return;\n  }\n  const every = 0.6 * sqrt(2 / speed);\n  if (P.wait \u003c= 0 && P.sp === 0 && P.rip \u003c 0) {\n    // Full is the whole tray, or ten seconds after the pile first spilled\n    // off the top or bottom: drop points off the middle fill the far end\n    // slowly, since most of their sand runs off the near one.\n    if (P.next) {\n      const cov = startRipple(P, P.next);\n      if (P.edge \u003c 0 && (P.reach.subarray(0, W).includes(1) || P.reach.subarray(N - W).includes(1))) P.edge = 0;\n      if (cov > 0.985 || P.edge > 10) {\n        [P.phase, P.full] = [HOLD, 0];\n        return;\n      }\n    }\n    const pts = plan(P, spread);\n    pour(P, pts, round(1500 * speed * every), spread);\n    P.next = pts;\n    P.wait = every;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const [core, rim, bg, glow] = PALS[P.pal ?? 0];\n  const { cur, tgt, amp, dist, tone } = P;\n  const r = P.rip;\n  // Tipped, the sand slides off the bottom edge, each column at its own\n  // pace and the grains tumbling more the faster it goes.\n  const tilt = P.phase === TILT ? P.pt : 0;\n  const f = (P.f = (P.f | 0) + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let sy = y;\n      if (tilt) {\n        sy = y - floor(70 * tilt * tilt * (0.85 + 0.3 * P.col[x]) + hash(x, y + f * 61) * (1 + 5 * tilt));\n        if (sy \u003c 0) {\n          display.setPixel(x, y, bg[0], bg[1], bg[2]);\n          continue;\n        }\n      }\n      const p = sy * W + x;\n      let c = cur[p];\n      let a = 0;\n      if (r >= 0) {\n        const d = dist[p];\n        if (d \u003c r) {\n          c = tgt[p];\n          if (amp[p] > 0) a = amp[p] * exp(-(r - d) / RING) * 0.75;\n        }\n      }\n      let R = bg[0];\n      let G = bg[1];\n      let B = bg[2];\n      if (c) {\n        const u = core[c - 4];\n        const v = rim[c - 4];\n        const t = tone[p];\n        R = u[0] + (v[0] - u[0]) * t;\n        G = u[1] + (v[1] - u[1]) * t;\n        B = u[2] + (v[2] - u[2]) * t;\n      }\n      display.setPixel(x, y, R + (glow[0] - R) * a, G + (glow[1] - G) * a, B + (glow[2] - B) * a);\n    }\n  // Grains still falling on the drop points glint as they land.\n  if (P.phase !== GROW || !P.next) return;\n  for (const [cx, cy] of P.next)\n    for (let i = 0; i \u003c 1 + P.speed; i++) {\n      const a = rnd() * 2 * PI;\n      const d = 1.2 * rnd() + P.spread * sqrt(-2 * Math.log(1 - rnd() * 0.999));\n      const x = round(cx + cos(a) * d);\n      const y = round(cy + sin(a) * d);\n      const g = 0.5 + 0.5 * rnd();\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) display.setPixel(x, y, glow[0] * g, glow[1] * g, glow[2] * g);\n    }\n}\n","layer":{"id":"layer-sandpile","type":"code","name":"sandpile","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sandpile\n// Family:  automata\n// Idea:    Handfuls of sand fall on a tray where any cell holding four grains topples one to each neighbour, each avalanche runs out from the drop point as a bright ring and leaves the four-colour lace of the pile rewritten behind it, and when the pile has filled the tall tray it tips and pours off.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the Bak-Tang-Wiesenfeld abelian sandpile (1987)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..4, Speed=0.2..3, Sources=1..5, Scatter=0..1\n//\n// Knob 1: Palette. The four colours of 0, 1, 2 and 3 grains, each a shade deeper by the drop points than out at the rim: dune sand on indigo, glacier, moss, embers, neon.\n// Knob 2: Speed. Grains per second, 300 at 0.2 up to 4500 at 3; at 2 a handful of 1800 lands every 0.6 s and its ring takes half a second to cross the pile.\n// Knob 3: Sources. How many drop points the sand falls on: one in the middle, two stacked, a triangle, a square, a square with a centre.\n// Knob 4: Scatter. How wide each handful spreads as it lands: near 0 every grain hits the drop point and the pile keeps its mirror symmetry; towards 1 the grains land over a patch some forty cells across, the lace grows ragged and stray grains speckle the bare tray.\n// Buttons: K1 tap tips the tray now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sandpile lives on a grid one cell wider all round. The border cells\n// are the sinks: they start so far below zero that no number of grains\n// makes them topple, so grains pushed over the edge are simply gone.\nconst WP = W + 2;\nconst NP = WP * (H + 2);\nconst SINK = -(1 \u003c\u003c 30);\nconst { min, max, floor, round, sqrt, log2, exp, sin, cos, PI } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst at = (x, y) => (y + 1) * WP + x + 1;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Drop points for each Sources setting, as the centre of a 2x2 block of\n// cells, so every plan is mirror symmetric about the middle of the panel.\nconst POINTS = [\n  [[31.5, 63.5]],\n  [[31.5, 40.5], [31.5, 86.5]],\n  [[31.5, 33.5], [16.5, 91.5], [46.5, 91.5]],\n  [[17.5, 38.5], [45.5, 38.5], [17.5, 88.5], [45.5, 88.5]],\n  [[15.5, 33.5], [47.5, 33.5], [31.5, 63.5], [15.5, 93.5], [47.5, 93.5]],\n];\n\n// Each palette: 0, 1, 2 and 3 grains by the drop points, the same out at\n// the rim, the bare tray, and the glow of toppling. The study reads a cell by\n// its brightest channel, and most neighbours in a pile are a 3 beside a 2,\n// so 3 is the bright one and 2 the dark one, and the rim colours keep each\n// level's brightness while the hue drifts.\nconst PALS = [\n  [\n    [[10, 8, 20], [20, 128, 118], [14, 22, 62], [255, 198, 104]],\n    [[12, 8, 22], [54, 96, 150], [36, 16, 60], [255, 234, 200]],\n    [4, 5, 10],\n    [255, 236, 190],\n  ],\n  [\n    [[4, 8, 16], [30, 110, 150], [34, 20, 70], [170, 236, 255]],\n    [[4, 8, 16], [70, 90, 170], [20, 30, 72], [236, 246, 255]],\n    [2, 5, 9],\n    [200, 255, 255],\n  ],\n  [\n    [[6, 10, 4], [130, 112, 20], [14, 46, 26], [170, 255, 90]],\n    [[6, 10, 4], [96, 130, 30], [40, 40, 16], [230, 255, 160]],\n    [3, 5, 2],\n    [240, 255, 200],\n  ],\n  [\n    [[12, 3, 4], [176, 42, 26], [62, 12, 44], [255, 170, 40]],\n    [[12, 3, 6], [190, 30, 70], [40, 10, 60], [255, 214, 120]],\n    [6, 2, 2],\n    [255, 230, 170],\n  ],\n  [\n    [[6, 0, 12], [0, 148, 170], [54, 0, 92], [255, 110, 210]],\n    [[8, 0, 12], [40, 120, 200], [80, 0, 70], [255, 170, 250]],\n    [3, 0, 6],\n    [255, 220, 255],\n  ],\n];\n\nconst [GROW, HOLD, TILT] = [0, 1, 2];\n// A ripple runs out at this many cells a second; the glow trails it by about\n// RING cells.\nconst RIP = 150;\nconst RING = 5;\n\nexport function setup(params) {\n  const P = params;\n  P.z = new Int32Array(NP);\n  P.heat = new Int32Array(NP);\n  // Cells waiting to topple. A cell goes on when it reaches four grains and\n  // comes off when it topples, so it is never on twice.\n  P.st = new Int32Array(NP);\n  P.sp = 0;\n  // Mirror lines: bit 1 sends a cell's right-hand grain back to itself, bit\n  // 2 its downward one.\n  P.mir = new Uint8Array(NP);\n  P.mode = 0;\n  // What the panel shows: the pile before the running ripple and after it,\n  // each cell as its grains plus 4 once sand has reached it.\n  P.reach = new Uint8Array(N);\n  P.cur = new Uint8Array(N);\n  P.tgt = new Uint8Array(N);\n  P.amp = new Float32Array(N);\n  P.dist = new Float32Array(N);\n  P.tone = new Float32Array(N);\n  P.toneKey = \"\";\n  P.col = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) P.col[x] = rnd();\n  P.started = false;\n  P.phase = GROW;\n  P.pt = 0;\n  P.wait = 0;\n  P.full = 0;\n  P.shift = 0;\n  clear(P);\n}\n\nfunction clear(P) {\n  const z = P.z;\n  z.fill(SINK);\n  for (let y = 0; y \u003c H; y++) z.fill(0, at(0, y), at(0, y) + W);\n  P.heat.fill(0);\n  P.sp = 0;\n  P.reach.fill(0);\n  P.cur.fill(0);\n  P.tgt.fill(0);\n  P.rip = -1;\n  P.next = null;\n  P.symX = true;\n  P.symY = true;\n  P.edge = -1;\n}\n\n// Where the drop points sit this cycle: the first cycle uses the plan as it\n// stands, later ones slide it up or down the tray.\nfunction points(P, n) {\n  return POINTS[n - 1].map(([x, y]) => [x, clamp(y + P.shift, 9.5, H - 10.5)]);\n}\n\n// While the pile is mirror symmetric, only the top left quarter (or the left\n// half) is worked out and then unfolded: a cell on a mirror line topples one\n// grain back onto itself. It is the same pile for a quarter of the work.\nfunction setMode(P, m) {\n  if (m === P.mode) return;\n  P.mode = m;\n  P.mir.fill(0);\n  if (m & 1) for (let y = 0; y \u003c H; y++) P.mir[at(W / 2 - 1, y)] |= 1;\n  if (m & 2) for (let x = 0; x \u003c W; x++) P.mir[at(x, H / 2 - 1)] |= 2;\n}\n\nfunction unfold(P) {\n  const { z, heat, mode } = P;\n  if (mode & 1)\n    for (let y = 0; y \u003c H; y++)\n      for (let x = W / 2; x \u003c W; x++) (z[at(x, y)] = z[at(W - 1 - x, y)]), (heat[at(x, y)] = heat[at(W - 1 - x, y)]);\n  if (mode & 2) {\n    for (let y = H / 2; y \u003c H; y++) {\n      z.copyWithin(at(-1, y), at(-1, H - 1 - y), at(-1, H - y));\n      heat.copyWithin(at(-1, y), at(-1, H - 1 - y), at(-1, H - y));\n    }\n  }\n}\n\nfunction add(P, p, g) {\n  const o = P.z[p];\n  P.z[p] = o + g;\n  if (o \u003c 4 && o + g > 3) P.st[P.sp++] = p;\n}\n\n// One handful shared by every drop point: on each point's 2x2 block, or\n// strewn round it with Scatter.\nfunction pour(P, pts, g, spread) {\n  if (spread \u003c= 0) {\n    const share = max(1, floor(g / 4 / pts.length));\n    for (const [cx, cy] of pts)\n      for (let i = 0; i \u003c 4; i++) {\n        const x = floor(cx) + (i & 1);\n        const y = floor(cy) + (i >> 1);\n        if (!((P.mode & 1 && x >= W / 2) || (P.mode & 2 && y >= H / 2))) add(P, at(x, y), share);\n      }\n    return;\n  }\n  for (let i = 0; i \u003c g; i++) {\n    const [cx, cy] = pts[i % pts.length];\n    const a = rnd() * 2 * PI;\n    const d = spread * sqrt(-2 * Math.log(1 - rnd() * 0.999));\n    const x = round(cx + cos(a) * d);\n    const y = round(cy + sin(a) * d);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) add(P, at(x, y), 1);\n  }\n}\n\n// Topple until stable or out of budget. A cell with 4k grains or more\n// topples k times at once. Working from the top of the stack keeps the\n// avalanche local, which is the fastest order on this grid.\nfunction settle(P, cap) {\n  const { z, st, heat, mir } = P;\n  let sp = P.sp;\n  let ops = 0;\n  while (sp > 0 && ops \u003c cap) {\n    const p = st[--sp];\n    const v = z[p];\n    const k = v >> 2;\n    const m = mir[p];\n    z[p] = v & 3;\n    heat[p] += k;\n    ops++;\n    let n, o;\n    o = z[(n = p - 1)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = m & 1 ? p : p + 1)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = p - WP)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = m & 2 ? p : p + WP)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n  }\n  P.sp = sp;\n  if (sp) return false;\n  unfold(P);\n  return true;\n}\n\n// The settled pile as the panel shows it, and how much of the tray it covers.\nfunction snapshot(P, out) {\n  const { z, heat, reach } = P;\n  let n = 0;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, s = at(0, y); x \u003c W; x++, p++, s++) {\n      if (z[s] || heat[s]) reach[p] = 1;\n      out[p] = reach[p] ? 4 + z[s] : 0;\n      n += reach[p];\n    }\n  return n / N;\n}\n\n// Choose the mirror work for the next handful. Every plan is symmetric left\n// to right; Scatter breaks both mirrors until the tray is emptied, and a plan\n// off the middle row breaks the top-bottom one.\nfunction plan(P, spread) {\n  if (spread > 0) P.symX = P.symY = false;\n  if (P.shift || P.n === 3) P.symY = false;\n  setMode(P, (P.symX ? 1 : 0) | (P.symY ? 2 : 0));\n  const pts = points(P, P.n);\n  // How far each cell is from the nearest drop point, for the colours.\n  if (P.toneKey !== P.n + \",\" + P.shift) {\n    P.toneKey = P.n + \",\" + P.shift;\n    for (let p = 0; p \u003c N; p++) {\n      let d = 1e9;\n      for (const [cx, cy] of pts) d = min(d, ((p & 63) - cx) ** 2 + ((p >> 6) - cy) ** 2);\n      P.tone[p] = min(1, sqrt(d) / 64);\n    }\n  }\n  return pts;\n}\n\n// Pour on every drop point together until the pile covers this much of the\n// tray, so the picture opens mid-growth whatever the knobs say.\nfunction prerun(P, cover, spread) {\n  const pts = plan(P, spread);\n  for (let i = 0; i \u003c 200; i++) {\n    pour(P, pts, 1600, spread);\n    settle(P, 1e9);\n    if (snapshot(P, P.cur) >= cover) break;\n  }\n  P.heat.fill(0);\n  P.tgt.set(P.cur);\n}\n\n// A ripple shows the handful that has settled: from the drop points outward,\n// cells take their new value and glow by how often they toppled.\nfunction startRipple(P, pts) {\n  const cov = snapshot(P, P.tgt);\n  const { heat, amp, dist, cur, tgt } = P;\n  let far = 0;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, s = at(0, y); x \u003c W; x++, p++, s++) {\n      // Cells the avalanche rewrote flash, the more the more often they\n      // toppled; sand reaching bare tray flashes brightest.\n      const h = heat[s];\n      amp[p] = tgt[p] !== cur[p] ? min(1, 0.3 + log2(1 + h) / 8 + (cur[p] ? 0 : 0.4)) : h > 0 ? 0.12 : 0;\n      let d = 1e9;\n      for (const [cx, cy] of pts) d = min(d, (x - cx) ** 2 + (y - cy) ** 2);\n      dist[p] = d = sqrt(d);\n      if (h > 0 && d > far) far = d;\n    }\n  heat.fill(0);\n  P.rip = 0;\n  P.ripMax = far + RING * 3;\n  return cov;\n}\n\n// The tray tips with whatever the panel shows on it.\nfunction tip(P) {\n  if (P.rip >= 0) P.cur.set(P.tgt);\n  P.rip = -1;\n  P.phase = TILT;\n  P.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.pal = clamp(round(k[0]), 0, 4);\n  const speed = clamp(k[1], 0.2, 3);\n  P.n = clamp(round(k[2]), 1, 5);\n  const spread = (P.spread = max(0, clamp(k[3], 0, 1) - 0.08) * 14);\n  P.speed = speed;\n  if (!P.started) {\n    P.started = true;\n    prerun(P, 0.74, spread);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== TILT) tip(P);\n\n  if (P.phase === TILT) {\n    P.pt += dt;\n    if (P.pt > 1.4) {\n      clear(P);\n      P.shift = round((rnd() - 0.5) * 40);\n      P.phase = GROW;\n      P.wait = 0;\n    }\n    return;\n  }\n\n  // Work on the next handful while the last one's ripple runs.\n  settle(P, 60000);\n  if (P.rip >= 0) {\n    P.rip += RIP * sqrt(speed / 2) * dt;\n    if (P.rip > P.ripMax) {\n      P.cur.set(P.tgt);\n      P.rip = -1;\n    }\n  }\n  P.wait -= dt;\n  if (P.edge >= 0) P.edge += (dt * speed) / 2;\n  if (P.phase === HOLD) {\n    P.full += dt;\n    if (P.full > 2) tip(P);\n    return;\n  }\n  const every = 0.6 * sqrt(2 / speed);\n  if (P.wait \u003c= 0 && P.sp === 0 && P.rip \u003c 0) {\n    // Full is the whole tray, or ten seconds after the pile first spilled\n    // off the top or bottom: drop points off the middle fill the far end\n    // slowly, since most of their sand runs off the near one.\n    if (P.next) {\n      const cov = startRipple(P, P.next);\n      if (P.edge \u003c 0 && (P.reach.subarray(0, W).includes(1) || P.reach.subarray(N - W).includes(1))) P.edge = 0;\n      if (cov > 0.985 || P.edge > 10) {\n        [P.phase, P.full] = [HOLD, 0];\n        return;\n      }\n    }\n    const pts = plan(P, spread);\n    pour(P, pts, round(1500 * speed * every), spread);\n    P.next = pts;\n    P.wait = every;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const [core, rim, bg, glow] = PALS[P.pal ?? 0];\n  const { cur, tgt, amp, dist, tone } = P;\n  const r = P.rip;\n  // Tipped, the sand slides off the bottom edge, each column at its own\n  // pace and the grains tumbling more the faster it goes.\n  const tilt = P.phase === TILT ? P.pt : 0;\n  const f = (P.f = (P.f | 0) + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let sy = y;\n      if (tilt) {\n        sy = y - floor(70 * tilt * tilt * (0.85 + 0.3 * P.col[x]) + hash(x, y + f * 61) * (1 + 5 * tilt));\n        if (sy \u003c 0) {\n          display.setPixel(x, y, bg[0], bg[1], bg[2]);\n          continue;\n        }\n      }\n      const p = sy * W + x;\n      let c = cur[p];\n      let a = 0;\n      if (r >= 0) {\n        const d = dist[p];\n        if (d \u003c r) {\n          c = tgt[p];\n          if (amp[p] > 0) a = amp[p] * exp(-(r - d) / RING) * 0.75;\n        }\n      }\n      let R = bg[0];\n      let G = bg[1];\n      let B = bg[2];\n      if (c) {\n        const u = core[c - 4];\n        const v = rim[c - 4];\n        const t = tone[p];\n        R = u[0] + (v[0] - u[0]) * t;\n        G = u[1] + (v[1] - u[1]) * t;\n        B = u[2] + (v[2] - u[2]) * t;\n      }\n      display.setPixel(x, y, R + (glow[0] - R) * a, G + (glow[1] - G) * a, B + (glow[2] - B) * a);\n    }\n  // Grains still falling on the drop points glint as they land.\n  if (P.phase !== GROW || !P.next) return;\n  for (const [cx, cy] of P.next)\n    for (let i = 0; i \u003c 1 + P.speed; i++) {\n      const a = rnd() * 2 * PI;\n      const d = 1.2 * rnd() + P.spread * sqrt(-2 * Math.log(1 - rnd() * 0.999));\n      const x = round(cx + cos(a) * d);\n      const y = round(cy + sin(a) * d);\n      const g = 0.5 + 0.5 * rnd();\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) display.setPixel(x, y, glow[0] * g, glow[1] * g, glow[2] * g);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..4, Speed=0.2..3, Sources=1..5, Scatter=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":4,"about":"The four colours of 0, 1, 2 and 3 grains, each a shade deeper by the drop points than out at the rim: dune sand on indigo, glacier, moss, embers, neon."},{"name":"Speed","min":0.2,"max":3,"about":"Grains per second, 300 at 0.2 up to 4500 at 3; at 2 a handful of 1800 lands every 0.6 s and its ring takes half a second to cross the pile."},{"name":"Sources","min":1,"max":5,"about":"How many drop points the sand falls on: one in the middle, two stacked, a triangle, a square, a square with a centre."},{"name":"Scatter","min":0,"max":1,"about":"How wide each handful spreads as it lands: near 0 every grain hits the drop point and the pile keeps its mirror symmetry; towards 1 the grains land over a patch some forty cells across, the lace grows ragged and stray grains speckle the bare tray."}],"start":[0,2,1,0.06],"measures":{"motion":0.6394,"detail":0.335,"edges":0.8978,"complexity":0.6311,"coverage":0.8294,"colour":0.2844,"drift":0.1509},"knobResponse":[0.2234,0.3094,0.3442,0.2665]},{"slug":"searchlights","title":"Searchlights","family":"light","round":7,"note":"밤 도시의 지붕 뒤에서 탐조등 세 대가 가장자리가 또렷한 빛기둥을 천천히 휘둘러요. 기둥 둘이 겹친 자리는 하얗게 타고, K1 을 누르면 하늘을 가로지르는 비행기를 모든 기둥이 붙잡았다가 놓아줘요.","idea":"Searchlights behind a night skyline swing slow, hard-edged beams across the sky, and where two beams cross the light runs white.","buttons":"K1 tap sends a plane across the sky; every beam swings onto it, holds it a few seconds and lets it go.","code":"// ===== Patternflow pattern =====\n// Title:   Searchlights\n// Family:  light\n// Idea:    Searchlights behind a night skyline swing slow, hard-edged beams across the sky, and where two beams cross the light runs white.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the searchlights that sweep a city's sky over a premiere or a grand opening\n// Round:   7\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Sweep=0.2..4, Lights=3..7, Haze=0..1\n//\n// Knob 1: Hue. The tint of the lamps, starting from the cold blue-white of a xenon arc.\n// Knob 2: Sweep. How fast the beams patrol the sky: at the bottom of the range they barely drift, at the top each one crosses its arc in about six seconds.\n// Knob 3: Lights. How many searchlights stand behind the skyline; a light that joins strikes up and one that leaves fades out.\n// Knob 4: Haze. How much the air holds the light: clear at 0, each beam cut sharp against the dark; turned up, the beams grow soft halos and the city glows on the low sky.\n// Buttons: K1 tap sends a plane across the sky; every beam swings onto it, holds it a few seconds and lets it go.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 7;\n// The lamps stand at the foot of the panel, behind the buildings. Their slots\n// fill in this order, so three lights are spread across the city and each one\n// added lands between two that are already burning.\nconst SLOTS = [10, 54, 31, 21, 43, 3, 61];\nconst BASE = 126;\n// A beam is the lamp's width at the lamp and opens by this many LEDs per LED\n// it travels: three and a half degrees across, eleven LEDs wide at the top.\nconst LAMP = 1.5;\nconst SPREAD = 0.03;\n// The sweep: a triangle wave with its corners rounded off, so a beam crosses\n// its arc at an even pace and turns at the ends without stopping dead.\nconst ROUND = 0.985;\nconst ROUND_NORM = Math.asin(ROUND);\n// The plane K1 sends, nose first: x along its heading, y down.\nconst PLANE = [2, 0, 1, 0, 0, 0, -1, 0, -2, 0, -3, 0, 0, -1, 0, 1, -1, 2, -3, -1];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// The skyline, the same on every load: blocks of five to twelve LEDs and now\n// and then a tower with a mast. Each block has a grid of one-LED windows, a\n// light of its own (lamplight, paler office light, a bluish tube) and its own\n// share of windows lit.\nconst WINDOW_LIGHT = [\n  [0.09, 0.6],\n  [0.12, 0.35],\n  [0.55, 0.25],\n];\n\nfunction buildCity(P) {\n  const roof = P.roof;\n  roof.fill(H);\n  P.winOn.fill(0);\n  P.winCol.fill(0);\n  const slots = [];\n  const masts = [];\n  let x = 0;\n  let b = 0;\n  while (x \u003c W) {\n    const w = 5 + Math.floor(hash(b, 1) * 8);\n    const tower = b > 0 && hash(b, 2) \u003c 0.22;\n    const top = tower ? 84 + Math.floor(hash(b, 3) * 10) : 100 + Math.floor(hash(b, 3) * 15);\n    const x1 = Math.min(W, x + w);\n    for (let c = x; c \u003c x1; c++) roof[c] = top;\n    if (tower) {\n      const m = x + (w >> 1);\n      if (m \u003c W) {\n        roof[m] = top - 6;\n        masts.push((top - 6) * W + m);\n      }\n    }\n    const [hue, sat] = WINDOW_LIGHT[Math.floor(hash(b, 4) * WINDOW_LIGHT.length)];\n    const lit = 0.3 + 0.45 * hash(b, 5);\n    for (let y = top + 2; y \u003c H; y += 2) {\n      for (let c = x + 1; c \u003c x1 - 1; c += 2) {\n        const p = y * W + c;\n        slots.push(p);\n        hsvInto(P.winCol, p * 3, hue, sat, 0.62 + 0.3 * hash(c, y));\n        if (hash(c * 131 + y, b + 7) \u003c lit) P.winOn[p] = 1;\n      }\n    }\n    x = x1;\n    b++;\n  }\n  P.slots = Int32Array.from(slots);\n  P.masts = Int32Array.from(masts);\n  // Stars: a few dozen, never brighter than a dim window.\n  P.stars.fill(0);\n  for (let i = 0; i \u003c 34; i++) {\n    const sx = Math.floor(hash(i, 11) * W);\n    const sy = Math.floor(hash(i, 12) * 84);\n    P.stars[sy * W + sx] = 0.22 + 0.16 * hash(i, 13);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.roof = new Int16Array(W);\n  P.winOn = new Float32Array(N);\n  P.winCol = new Float32Array(N * 3);\n  P.stars = new Float32Array(N);\n  P.phase = new Float32Array(MAX);\n  P.rate = new Float32Array(MAX);\n  P.amp = new Float32Array(MAX);\n  P.centre = new Float32Array(MAX);\n  P.on = new Float32Array(MAX);\n  P.angle = new Float32Array(MAX);\n  P.light = new Float32Array(N);\n  P.halo = new Float32Array(N);\n  P.col = new Float32Array(6);\n  // Where each lamp's sweep begins: four seconds in, the first three beams\n  // cross over the city, and from two seconds to eight every one of them is\n  // crossing its arc rather than turning at an end.\n  const start = [-0.27, -1.4, 2.85, 2.55, 0.15, -1.1, 2.0];\n  for (let i = 0; i \u003c MAX; i++) {\n    const x = SLOTS[i];\n    P.phase[i] = start[i];\n    P.rate[i] = 0.85 + 0.3 * hash(i, 21);\n    P.amp[i] = 0.32 + 0.08 * hash(i, 22);\n    // Lamps on the left lean right and the other way round, so the beams cross.\n    P.centre[i] = ((32 - x) / 32) * 0.22 + (hash(i, 23) - 0.5) * 0.08;\n    P.on[i] = i \u003c 3 ? 1 : 0;\n  }\n  P.count = 3;\n  P.sweep = 2;\n  P.hue = 0;\n  P.haze = 0.06;\n  // The plane K1 sends: seconds since it was sent, or -1.\n  P.plane = -1;\n  P.px = 0;\n  P.py = 0;\n  P.pvx = 0;\n  P.t = 0;\n  P.flick = 0;\n  buildCity(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.sweep = Math.max(0.2, Math.min(4, k[1]));\n  P.count = Math.max(3, Math.min(MAX, Math.round(k[2])));\n  P.haze = Math.max(0, Math.min(1, k[3]));\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.plane = 0;\n    const fromLeft = Math.random() \u003c 0.5;\n    P.px = fromLeft ? 6 : W - 6;\n    P.py = 16 + Math.random() * 26;\n    P.pvx = (fromLeft ? 1 : -1) * (5 + Math.random() * 3);\n  }\n  if (P.plane >= 0) {\n    P.plane += dt;\n    P.px += P.pvx * dt;\n    if (P.plane > 7) P.plane = -1;\n  }\n  // How hard the beams hold the plane: they swing on over a second, hold it,\n  // and let go over a second and a half.\n  const hold = P.plane >= 0 ? smooth(0, 1.2, P.plane) * (1 - smooth(5, 6.5, P.plane)) : 0;\n\n  // Sweep 2 crosses an arc at about two and a half degrees a second; the\n  // knob's top end is three times that, its bottom end nearly still.\n  const speed = 0.17 * Math.pow(P.sweep / 2, 1.6);\n  for (let i = 0; i \u003c MAX; i++) {\n    const target = i \u003c P.count ? 1 : 0;\n    // A lamp strikes up in half a second and fades out in one.\n    P.on[i] += (target - P.on[i]) * Math.min(1, dt * (target ? 4 : 2.5));\n    P.phase[i] += dt * speed * P.rate[i];\n    const sweep = P.centre[i] + P.amp[i] * (Math.asin(ROUND * Math.sin(P.phase[i])) / ROUND_NORM);\n    const aim = Math.atan2(P.px - SLOTS[i], BASE - P.py);\n    P.angle[i] = sweep + (aim - sweep) * hold;\n  }\n  P.hold = hold;\n\n  // Now and then someone in the city switches a light on or off.\n  P.t += dt;\n  P.flick += dt;\n  if (P.flick > 0.8) {\n    P.flick = 0;\n    const p = P.slots[Math.floor(Math.random() * P.slots.length)];\n    P.winOn[p] = P.winOn[p] > 0 ? 0 : 1;\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const light = P.light;\n  const halo = P.halo;\n  const roof = P.roof;\n  const haze = P.haze;\n  light.fill(0);\n  halo.fill(0);\n\n  // The beams. Each LED takes the share of it the beam covers, rounded to\n  // thirds: a beam glides across the LEDs without a soft ramp at its edge.\n  const reach = 1.5 + 5 * haze;\n  const out = 1 + reach * 4;\n  for (let i = 0; i \u003c MAX; i++) {\n    const on = P.on[i];\n    if (on \u003c 0.01) continue;\n    const a = P.angle[i];\n    const sa = Math.sin(a);\n    const ca = Math.cos(a);\n    const bx = SLOTS[i] + 0.5;\n    for (let y = 0; y \u003c BASE; y++) {\n      const dy = y + 0.5 - BASE;\n      // Where the beam's middle crosses this row, and how wide it is there.\n      const s0 = -dy / ca;\n      if (s0 \u003c= 0) continue;\n      const mid = bx + s0 * sa;\n      const half = (LAMP + s0 * SPREAD) / ca;\n      const x0 = Math.max(0, Math.floor(mid - half - out));\n      const x1 = Math.min(W - 1, Math.ceil(mid + half + out));\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x + 0.5 - bx;\n        const s = dx * sa - dy * ca;\n        if (s \u003c= 0) continue;\n        const q = Math.abs(dx * ca + dy * sa);\n        const h = LAMP + s * SPREAD;\n        // Bright at the lamp, still well lit at the top of the panel.\n        const b = on * (0.8 + 0.2 * Math.exp(-s / 40) - 0.25 * haze * (1 - Math.exp(-s / 60)));\n        const cover = Math.max(0, Math.min(1, h - q + 0.5));\n        const p = y * W + x;\n        if (cover > 0) light[p] += b * (Math.round(cover * 3) / 3);\n        if (q > h - 0.5) halo[p] += b * Math.exp(-(q - h + 0.5) / reach);\n      }\n    }\n  }\n\n  const col = P.col;\n  hsvInto(col, 0, P.hue + 0.58, 0.38, 1);\n  // The city's glow on a hazy night: sodium orange whatever the lamps are.\n  hsvInto(col, 3, 0.08, 0.7, 1);\n  const glowAmp = 0.22 * haze;\n  const haloAmp = 0.32 * haze;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r;\n      let g;\n      let b;\n      if (y >= roof[x]) {\n        // Windows keep their own light whatever the lamps are; the rest of a building is black.\n        const w = P.winOn[p];\n        r = w * P.winCol[p * 3];\n        g = w * P.winCol[p * 3 + 1];\n        b = w * P.winCol[p * 3 + 2];\n      } else {\n        const L = light[p] + haloAmp * halo[p] + P.stars[p];\n        const glow = glowAmp * Math.exp(-(roof[x] - y) / 18);\n        r = L * col[0] + glow * col[3];\n        g = L * col[1] + glow * col[4];\n        b = L * col[2] + glow * col[5];\n      }\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n\n  // The warning lamp on each mast, red whatever the searchlights are.\n  if (P.t % 1.6 \u003c 0.5) {\n    for (let i = 0; i \u003c P.masts.length; i++) {\n      const p = P.masts[i];\n      display.setPixel(p % W, Math.floor(p / W), 230, 30, 20);\n    }\n  }\n\n  // The plane: a dark shape that only shows against the beams, and a strobe\n  // on its tail that blinks once a second.\n  if (P.plane >= 0) {\n    const cx = Math.round(P.px);\n    const cy = Math.round(P.py);\n    const dir = P.pvx > 0 ? 1 : -1;\n    for (let i = 0; i \u003c PLANE.length; i += 2) {\n      const x = cx + dir * PLANE[i];\n      const y = cy + PLANE[i + 1];\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) display.setPixel(x, y, 10, 10, 14);\n    }\n    const tx = cx - 3 * dir;\n    if (P.plane % 1 \u003c 0.12 && tx >= 0 && tx \u003c W && cy - 1 >= 0) display.setPixel(tx, cy - 1, 255, 255, 255);\n  }\n}\n","layer":{"id":"layer-searchlights","type":"code","name":"searchlights","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Searchlights\n// Family:  light\n// Idea:    Searchlights behind a night skyline swing slow, hard-edged beams across the sky, and where two beams cross the light runs white.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the searchlights that sweep a city's sky over a premiere or a grand opening\n// Round:   7\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Sweep=0.2..4, Lights=3..7, Haze=0..1\n//\n// Knob 1: Hue. The tint of the lamps, starting from the cold blue-white of a xenon arc.\n// Knob 2: Sweep. How fast the beams patrol the sky: at the bottom of the range they barely drift, at the top each one crosses its arc in about six seconds.\n// Knob 3: Lights. How many searchlights stand behind the skyline; a light that joins strikes up and one that leaves fades out.\n// Knob 4: Haze. How much the air holds the light: clear at 0, each beam cut sharp against the dark; turned up, the beams grow soft halos and the city glows on the low sky.\n// Buttons: K1 tap sends a plane across the sky; every beam swings onto it, holds it a few seconds and lets it go.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 7;\n// The lamps stand at the foot of the panel, behind the buildings. Their slots\n// fill in this order, so three lights are spread across the city and each one\n// added lands between two that are already burning.\nconst SLOTS = [10, 54, 31, 21, 43, 3, 61];\nconst BASE = 126;\n// A beam is the lamp's width at the lamp and opens by this many LEDs per LED\n// it travels: three and a half degrees across, eleven LEDs wide at the top.\nconst LAMP = 1.5;\nconst SPREAD = 0.03;\n// The sweep: a triangle wave with its corners rounded off, so a beam crosses\n// its arc at an even pace and turns at the ends without stopping dead.\nconst ROUND = 0.985;\nconst ROUND_NORM = Math.asin(ROUND);\n// The plane K1 sends, nose first: x along its heading, y down.\nconst PLANE = [2, 0, 1, 0, 0, 0, -1, 0, -2, 0, -3, 0, 0, -1, 0, 1, -1, 2, -3, -1];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// The skyline, the same on every load: blocks of five to twelve LEDs and now\n// and then a tower with a mast. Each block has a grid of one-LED windows, a\n// light of its own (lamplight, paler office light, a bluish tube) and its own\n// share of windows lit.\nconst WINDOW_LIGHT = [\n  [0.09, 0.6],\n  [0.12, 0.35],\n  [0.55, 0.25],\n];\n\nfunction buildCity(P) {\n  const roof = P.roof;\n  roof.fill(H);\n  P.winOn.fill(0);\n  P.winCol.fill(0);\n  const slots = [];\n  const masts = [];\n  let x = 0;\n  let b = 0;\n  while (x \u003c W) {\n    const w = 5 + Math.floor(hash(b, 1) * 8);\n    const tower = b > 0 && hash(b, 2) \u003c 0.22;\n    const top = tower ? 84 + Math.floor(hash(b, 3) * 10) : 100 + Math.floor(hash(b, 3) * 15);\n    const x1 = Math.min(W, x + w);\n    for (let c = x; c \u003c x1; c++) roof[c] = top;\n    if (tower) {\n      const m = x + (w >> 1);\n      if (m \u003c W) {\n        roof[m] = top - 6;\n        masts.push((top - 6) * W + m);\n      }\n    }\n    const [hue, sat] = WINDOW_LIGHT[Math.floor(hash(b, 4) * WINDOW_LIGHT.length)];\n    const lit = 0.3 + 0.45 * hash(b, 5);\n    for (let y = top + 2; y \u003c H; y += 2) {\n      for (let c = x + 1; c \u003c x1 - 1; c += 2) {\n        const p = y * W + c;\n        slots.push(p);\n        hsvInto(P.winCol, p * 3, hue, sat, 0.62 + 0.3 * hash(c, y));\n        if (hash(c * 131 + y, b + 7) \u003c lit) P.winOn[p] = 1;\n      }\n    }\n    x = x1;\n    b++;\n  }\n  P.slots = Int32Array.from(slots);\n  P.masts = Int32Array.from(masts);\n  // Stars: a few dozen, never brighter than a dim window.\n  P.stars.fill(0);\n  for (let i = 0; i \u003c 34; i++) {\n    const sx = Math.floor(hash(i, 11) * W);\n    const sy = Math.floor(hash(i, 12) * 84);\n    P.stars[sy * W + sx] = 0.22 + 0.16 * hash(i, 13);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.roof = new Int16Array(W);\n  P.winOn = new Float32Array(N);\n  P.winCol = new Float32Array(N * 3);\n  P.stars = new Float32Array(N);\n  P.phase = new Float32Array(MAX);\n  P.rate = new Float32Array(MAX);\n  P.amp = new Float32Array(MAX);\n  P.centre = new Float32Array(MAX);\n  P.on = new Float32Array(MAX);\n  P.angle = new Float32Array(MAX);\n  P.light = new Float32Array(N);\n  P.halo = new Float32Array(N);\n  P.col = new Float32Array(6);\n  // Where each lamp's sweep begins: four seconds in, the first three beams\n  // cross over the city, and from two seconds to eight every one of them is\n  // crossing its arc rather than turning at an end.\n  const start = [-0.27, -1.4, 2.85, 2.55, 0.15, -1.1, 2.0];\n  for (let i = 0; i \u003c MAX; i++) {\n    const x = SLOTS[i];\n    P.phase[i] = start[i];\n    P.rate[i] = 0.85 + 0.3 * hash(i, 21);\n    P.amp[i] = 0.32 + 0.08 * hash(i, 22);\n    // Lamps on the left lean right and the other way round, so the beams cross.\n    P.centre[i] = ((32 - x) / 32) * 0.22 + (hash(i, 23) - 0.5) * 0.08;\n    P.on[i] = i \u003c 3 ? 1 : 0;\n  }\n  P.count = 3;\n  P.sweep = 2;\n  P.hue = 0;\n  P.haze = 0.06;\n  // The plane K1 sends: seconds since it was sent, or -1.\n  P.plane = -1;\n  P.px = 0;\n  P.py = 0;\n  P.pvx = 0;\n  P.t = 0;\n  P.flick = 0;\n  buildCity(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.sweep = Math.max(0.2, Math.min(4, k[1]));\n  P.count = Math.max(3, Math.min(MAX, Math.round(k[2])));\n  P.haze = Math.max(0, Math.min(1, k[3]));\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.plane = 0;\n    const fromLeft = Math.random() \u003c 0.5;\n    P.px = fromLeft ? 6 : W - 6;\n    P.py = 16 + Math.random() * 26;\n    P.pvx = (fromLeft ? 1 : -1) * (5 + Math.random() * 3);\n  }\n  if (P.plane >= 0) {\n    P.plane += dt;\n    P.px += P.pvx * dt;\n    if (P.plane > 7) P.plane = -1;\n  }\n  // How hard the beams hold the plane: they swing on over a second, hold it,\n  // and let go over a second and a half.\n  const hold = P.plane >= 0 ? smooth(0, 1.2, P.plane) * (1 - smooth(5, 6.5, P.plane)) : 0;\n\n  // Sweep 2 crosses an arc at about two and a half degrees a second; the\n  // knob's top end is three times that, its bottom end nearly still.\n  const speed = 0.17 * Math.pow(P.sweep / 2, 1.6);\n  for (let i = 0; i \u003c MAX; i++) {\n    const target = i \u003c P.count ? 1 : 0;\n    // A lamp strikes up in half a second and fades out in one.\n    P.on[i] += (target - P.on[i]) * Math.min(1, dt * (target ? 4 : 2.5));\n    P.phase[i] += dt * speed * P.rate[i];\n    const sweep = P.centre[i] + P.amp[i] * (Math.asin(ROUND * Math.sin(P.phase[i])) / ROUND_NORM);\n    const aim = Math.atan2(P.px - SLOTS[i], BASE - P.py);\n    P.angle[i] = sweep + (aim - sweep) * hold;\n  }\n  P.hold = hold;\n\n  // Now and then someone in the city switches a light on or off.\n  P.t += dt;\n  P.flick += dt;\n  if (P.flick > 0.8) {\n    P.flick = 0;\n    const p = P.slots[Math.floor(Math.random() * P.slots.length)];\n    P.winOn[p] = P.winOn[p] > 0 ? 0 : 1;\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const light = P.light;\n  const halo = P.halo;\n  const roof = P.roof;\n  const haze = P.haze;\n  light.fill(0);\n  halo.fill(0);\n\n  // The beams. Each LED takes the share of it the beam covers, rounded to\n  // thirds: a beam glides across the LEDs without a soft ramp at its edge.\n  const reach = 1.5 + 5 * haze;\n  const out = 1 + reach * 4;\n  for (let i = 0; i \u003c MAX; i++) {\n    const on = P.on[i];\n    if (on \u003c 0.01) continue;\n    const a = P.angle[i];\n    const sa = Math.sin(a);\n    const ca = Math.cos(a);\n    const bx = SLOTS[i] + 0.5;\n    for (let y = 0; y \u003c BASE; y++) {\n      const dy = y + 0.5 - BASE;\n      // Where the beam's middle crosses this row, and how wide it is there.\n      const s0 = -dy / ca;\n      if (s0 \u003c= 0) continue;\n      const mid = bx + s0 * sa;\n      const half = (LAMP + s0 * SPREAD) / ca;\n      const x0 = Math.max(0, Math.floor(mid - half - out));\n      const x1 = Math.min(W - 1, Math.ceil(mid + half + out));\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x + 0.5 - bx;\n        const s = dx * sa - dy * ca;\n        if (s \u003c= 0) continue;\n        const q = Math.abs(dx * ca + dy * sa);\n        const h = LAMP + s * SPREAD;\n        // Bright at the lamp, still well lit at the top of the panel.\n        const b = on * (0.8 + 0.2 * Math.exp(-s / 40) - 0.25 * haze * (1 - Math.exp(-s / 60)));\n        const cover = Math.max(0, Math.min(1, h - q + 0.5));\n        const p = y * W + x;\n        if (cover > 0) light[p] += b * (Math.round(cover * 3) / 3);\n        if (q > h - 0.5) halo[p] += b * Math.exp(-(q - h + 0.5) / reach);\n      }\n    }\n  }\n\n  const col = P.col;\n  hsvInto(col, 0, P.hue + 0.58, 0.38, 1);\n  // The city's glow on a hazy night: sodium orange whatever the lamps are.\n  hsvInto(col, 3, 0.08, 0.7, 1);\n  const glowAmp = 0.22 * haze;\n  const haloAmp = 0.32 * haze;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r;\n      let g;\n      let b;\n      if (y >= roof[x]) {\n        // Windows keep their own light whatever the lamps are; the rest of a building is black.\n        const w = P.winOn[p];\n        r = w * P.winCol[p * 3];\n        g = w * P.winCol[p * 3 + 1];\n        b = w * P.winCol[p * 3 + 2];\n      } else {\n        const L = light[p] + haloAmp * halo[p] + P.stars[p];\n        const glow = glowAmp * Math.exp(-(roof[x] - y) / 18);\n        r = L * col[0] + glow * col[3];\n        g = L * col[1] + glow * col[4];\n        b = L * col[2] + glow * col[5];\n      }\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n\n  // The warning lamp on each mast, red whatever the searchlights are.\n  if (P.t % 1.6 \u003c 0.5) {\n    for (let i = 0; i \u003c P.masts.length; i++) {\n      const p = P.masts[i];\n      display.setPixel(p % W, Math.floor(p / W), 230, 30, 20);\n    }\n  }\n\n  // The plane: a dark shape that only shows against the beams, and a strobe\n  // on its tail that blinks once a second.\n  if (P.plane >= 0) {\n    const cx = Math.round(P.px);\n    const cy = Math.round(P.py);\n    const dir = P.pvx > 0 ? 1 : -1;\n    for (let i = 0; i \u003c PLANE.length; i += 2) {\n      const x = cx + dir * PLANE[i];\n      const y = cy + PLANE[i + 1];\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) display.setPixel(x, y, 10, 10, 14);\n    }\n    const tx = cx - 3 * dir;\n    if (P.plane % 1 \u003c 0.12 && tx >= 0 && tx \u003c W && cy - 1 >= 0) display.setPixel(tx, cy - 1, 255, 255, 255);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Sweep=0.2..4, Lights=3..7, Haze=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the lamps, starting from the cold blue-white of a xenon arc."},{"name":"Sweep","min":0.2,"max":4,"about":"How fast the beams patrol the sky: at the bottom of the range they barely drift, at the top each one crosses its arc in about six seconds."},{"name":"Lights","min":3,"max":7,"about":"How many searchlights stand behind the skyline; a light that joins strikes up and one that leaves fades out."},{"name":"Haze","min":0,"max":1,"about":"How much the air holds the light: clear at 0, each beam cut sharp against the dark; turned up, the beams grow soft halos and the city glows on the low sky."}],"start":[0,2,3,0.06],"measures":{"motion":0.1662,"detail":0.0601,"edges":0.9751,"complexity":0.5201,"coverage":0.2833,"colour":0.1361,"drift":0.3569},"knobResponse":[0.0557,0.2929,0.2085,0.0855]},{"slug":"senbazuru","title":"Senbazuru","family":"paper","round":22,"note":"붉은 옻칠 고리에 실로 꿴 종이학이 줄줄이 매달려 금박 학 아래로 주황에서 초록, 파랑을 지나 보라와 분홍까지 띠를 이루고, 실 끝에는 금 구슬과 비단 술이 달려요. 어두운 절 방에 외풍이 불면 줄이 흔들리고 학이 실을 축으로 돌면서 접힌 면이 하나씩 등불을 받아 번쩍여요. K1 을 누르면 돌풍이 불어 학 하나가 떨어져 나뭇잎처럼 바닥으로 내려앉아요.","idea":"Strings of folded paper cranes hang from a red lacquered ring in a dim temple room, in bands of colour from the ring down to the silk tassels, and a soft draught sways the strands and turns the cranes so their folds catch the lamp one facet at a time.","buttons":"K1 tap sends a gust through the room, which spins the cranes and shakes one loose to glide to the floor.","code":"// ===== Patternflow pattern =====\n// Title:   Senbazuru\n// Family:  paper\n// Idea:    Strings of folded paper cranes hang from a red lacquered ring in a dim temple room, in bands of colour from the ring down to the silk tassels, and a soft draught sways the strands and turns the cranes so their folds catch the lamp one facet at a time.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the senbazuru strings of a thousand origami cranes hung in Japanese temples and at the Children's Peace Monument in Hiroshima\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Breeze=0.2..3, Strands=8..16, Light=0..1\n//\n// Knob 1: Paper. Which colours the cranes are folded from: under a row of gold foil cranes at the ring, the bands run from orange through green and blue to violet and pink at the tassels at 0, and turning it moves every band along the rainbow.\n// Knob 2: Breeze. How hard the draught blows: at 0.2 the strands hang almost still, at 2 they lean and sway and the cranes turn, at 3 they swing wide and spin.\n// Knob 3: Strands. How many strands hang from the ring, from 8 to 16; with more strands the cranes are folded smaller and each strand carries more of them.\n// Knob 4: Light. Where the light comes from: a paper lamp low on the left at night at 0, with the round window blue with moonlight, through dusk to daylight from the upper right at 1. The lit folds and the cranes' shadows on the wall swing with it.\n// Buttons: K1 tap sends a gust through the room, which spins the cranes and shakes one loose to glide to the floor.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The cranes, threads and ring are drawn at twice the resolution and averaged\n// down, so a neck one LED wide still reads.\nconst SW = 128;\nconst SH = 256;\nconst SN = SW * SH;\n// The ring: its centre column, its row, its radius and how far its front\n// hangs below its back. Then the round window behind it and the first row\n// of the floor.\nconst CX = 31.5;\nconst RY = 12;\nconst RR = 22;\nconst RE = 3.6;\nconst WY = 60;\nconst WR = 26;\nconst FLOOR = 121;\nconst MAXS = 16;\nconst { sin, cos, min, max, floor, round, sqrt, exp, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6;\n  const f = h - floor(h);\n  const p = v * (1 - s);\n  const q = v * (1 - s * f);\n  const t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// A folded crane, head forward along -x, up along y, wings out along z. Each\n// face is one flat facet of the paper; the far side mirrors the near one.\nconst PT = {\n  F: [-2.3, 0.3, 0], B: [2.3, 0.3, 0], D: [0, -1.9, 0], S: [0, 0, 1.3],\n  W0: [-2.4, 0.5, 0.3], W1: [2.4, 0.5, 0.3], Wm: [0.3, -0.4, 1.3], Wt: [1.5, 2.4, 4.8],\n  N0: [-1, -1.6, 0.6], N1: [-3.4, 0.9, 0], Nt: [-4.9, 5.4, 0], H0: [-4.1, 5.8, 0.4], Hp: [-6.6, 4.1, 0],\n  T0: [1, -1.6, 0.6], T1: [3.4, 0.9, 0], Tt: [5.3, 5.8, 0],\n};\nconst MESH = Float32Array.from(\n  [1, -1].flatMap((s) =>\n    \"F S D,S B D,W0 Wm Wt,Wm W1 Wt,N0 N1 Nt,Nt H0 Hp,T0 T1 Tt\"\n      .split(\",\")\n      .flatMap((f) => f.split(\" \").flatMap((k) => [PT[k][0], PT[k][1], PT[k][2] * s])),\n  ),\n);\nconst TV = new Float32Array(9);\nconst CE = cos(0.38);\nconst SE = sin(0.38);\nconst GOLD = [1, 0.74, 0.3];\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, {\n    cb: new Float32Array(SN * 3),\n    zb: new Float32Array(SN),\n    bg: new Float32Array(N * 3),\n    rec: new Float32Array(N),\n    grain: Float32Array.from({ length: N }, () => rnd() - 0.5),\n    key: \"\",\n    started: false,\n    ph: 0,\n    psi: 0,\n    vpsi: 0,\n    gust: 0,\n    gx: -30,\n    next: 7,\n    fall: [],\n    paper: 0,\n    B: 2,\n    n: 8,\n    light: 0.06,\n  });\n  P.S = Array.from({ length: MAXS }, () => ({\n    ax: 0, vx: 0, az: 0, vz: 0, tw: 0, vt: 0,\n    p: rnd() * TAU, q: rnd() * TAU, cut: floor(rnd() * 3.6), dir: rnd() \u003c 0.5 ? 0 : PI, hj: (rnd() - 0.5) * 0.05, lost: 0,\n  }));\n}\n\n// Crane size, spacing and count for the strand count.\nfunction layout(n) {\n  const k = 1.45 - 0.04 * n;\n  const dy = 6.6 * k + 1;\n  return { k, dy, nmax: floor((104 - RY - 7) / dy) + 1 };\n}\n\nfunction gust(P, g, loosen) {\n  P.gust = max(P.gust, g);\n  P.gx = -12;\n  P.vpsi += 0.35 * g * (rnd() \u003c 0.5 ? -1 : 1);\n  for (let s = 0; s \u003c MAXS; s++) P.S[s].vt += g * (2 + 3 * rnd()) * (rnd() \u003c 0.5 ? -1 : 1);\n  if (!loosen) return;\n  // The bottom crane of the nearest strand that still has a few slips off.\n  const { nmax, dy } = layout(P.n);\n  let best = -1;\n  let bz = -2;\n  for (let s = 0; s \u003c P.n; s++) {\n    const st = P.S[s];\n    const sa = sin(P.psi + ((s + 0.25) / P.n) * TAU);\n    if (st.lost \u003c 2 && nmax - st.cut - st.lost > 5 && sa > bz) {\n      bz = sa;\n      best = s;\n    }\n  }\n  if (best \u003c 0) return;\n  const st = P.S[best];\n  const i = nmax - st.cut - st.lost - 1;\n  st.lost++;\n  const phi = P.psi + ((best + 0.25) / P.n) * TAU;\n  const u = (7 + i * dy) / 100;\n  const z = RR * sin(phi);\n  const x = CX + (RR * cos(phi) + st.ax * u) * (1 + z * 0.004);\n  P.fall.push({ x, x0: x, y: RY + RE * sin(phi) + 7 + i * dy, z: z + 4, yaw: -phi, t: 0, i, s: best, down: false });\n  if (P.fall.length > 5) P.fall.shift();\n}\n\nfunction step(P, h) {\n  const B = P.B;\n  P.ph += h * (0.35 + 0.65 * sqrt(B / 2));\n  const T = P.ph;\n  if ((P.next -= h) \u003c= 0) {\n    gust(P, 0.35 + 0.3 * rnd(), false);\n    P.next = 6 + 7 * rnd();\n  }\n  P.gust *= exp(-h / 1.8);\n  P.gx += h * 36;\n  const n = P.n;\n  for (let s = 0; s \u003c n; s++) {\n    const st = P.S[s];\n    const phi = P.psi + ((s + 0.25) / n) * TAU;\n    const x = CX + RR * cos(phi);\n    // The draught: a lean to the right that breathes, a flutter that runs\n    // across the bundle, and the gust front passing left to right.\n    const front = 1 / (1 + exp((x - P.gx) / 6));\n    const wind = 3 * B * (0.4 + 0.6 * sin(0.61 * T + st.p) + 0.35 * sin(1.37 * T - 0.06 * x + st.q)) + (3 + 2.5 * B) * P.gust * front;\n    st.vx += h * (5.5 * (wind - st.ax) - 1.1 * st.vx);\n    st.ax += h * st.vx;\n    const wz = 2 * B * sin(0.43 * T + st.q) + 3 * B * P.gust * front * sin(st.p);\n    st.vz += h * (5.5 * (wz - st.az) - 1.1 * st.vz);\n    st.az += h * st.vz;\n    const tq = 0.3 * B * sin(0.53 * T + 2 * st.p);\n    st.vt += h * (3 * (tq - st.tw) - 0.45 * st.vt);\n    st.tw += h * st.vt;\n  }\n  // The whole hanging twists on its one cord.\n  const tr = 0.16 * B * sin(0.23 * T) + 0.06 * B * sin(0.67 * T + 1);\n  P.vpsi += h * (1.4 * (tr - P.psi) - 0.35 * P.vpsi);\n  P.psi += h * P.vpsi;\n  // A loose crane glides down like a leaf, rocking and turning.\n  for (const f of P.fall) {\n    if (f.down) continue;\n    f.t += h;\n    const sw = sin(2.1 * f.t);\n    f.y += h * (8 + 10 * sw * sw);\n    f.x = f.x0 + 7 * sin(2.1 * f.t - 0.3) * min(1, f.t);\n    f.yaw += h * 1.6;\n    f.roll = 0.55 * cos(2.1 * f.t) * min(1, f.t * 2);\n    if (f.y >= FLOOR + 2.6) {\n      f.y = FLOOR + 2.6;\n      f.roll = 0;\n      f.down = true;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.paper = clamp(k[0], 0, 1);\n  P.B = clamp(k[1], 0.2, 3);\n  P.n = clamp(round(k[2]), 8, MAXS);\n  P.light = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    for (let i = 0; i \u003c 60; i++) step(P, 1 / 15);\n  }\n  if (input.btnPressed && input.btnPressed[0]) gust(P, 1, true);\n  for (let i = 0; i \u003c 2; i++) step(P, dt / 2);\n}\n\n// The room: dark wood boards, a round shoji window behind the cranes, the\n// lamp, a polished floor. Kept until the light changes.\nfunction room(P) {\n  const k = P.light;\n  const night = 1 - k;\n  const pap = k \u003c 0.5 ? mix3([0.1, 0.15, 0.38], [0.66, 0.38, 0.4], k * 2) : mix3([0.66, 0.38, 0.4], [0.94, 0.88, 0.74], k * 2 - 1);\n  const { bg, rec, grain } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const g = grain[p];\n      const dx = x - 31.5;\n      const dy = y - WY;\n      const lamp = night * exp(-((x - 7) * (x - 7)) / 700 - ((y - 106) * (y - 106)) / 2500);\n      const lit = 0.3 + 1.4 * lamp + 0.9 * k * (0.4 + (0.6 * x) / 63) * (1.1 - (0.5 * y) / 127);\n      const r = sqrt(dx * dx + dy * dy);\n      // Each LED is wood taking w of the light, plus paper glowing pp, and\n      // the cranes' shadows fall on it rc dark.\n      let w = 0;\n      let pp = 0;\n      let rc = 0.7;\n      if (y \u003c 3) w = y === 2 ? 0.35 : 0.7;\n      else if (y >= FLOOR) {\n        // Boards, and the window seen dimly in the polish.\n        const b = (y - FLOOR) % 3 === 0 ? 0.6 : 1;\n        w = 0.75 * b;\n        pp = exp(-(dx * dx) / 500) * 0.22 * b;\n      } else if (x \u003c 3 || x > 60) w = x === 2 || x === 61 ? 0.8 : 0.53;\n      else if (r \u003c WR) {\n        // Paper between the kumiko bars, brightest where the moon or sun is.\n        const spot = exp(-((dx - 10) * (dx - 10) + (dy + 12) * (dy + 12)) / 500);\n        const bar = (x + 1) % 7 === 0 || (y - WY + 99) % 9 === 0;\n        pp = (0.62 + 0.55 * spot + 0.04 * g) * (bar ? 0.28 : 1);\n        rc = 0.2;\n      } else if (r \u003c WR + 2.2) w = r \u003c WR + 1 ? 0.62 : 0.35;\n      else {\n        const tone = 0.8 + 0.25 * sin(floor((x + 3) / 7) * 12.9898) ** 2 + 0.12 * g;\n        w = 0.55 * tone * ((x + 3) % 7 === 0 ? 0.55 : 1);\n      }\n      w *= lit;\n      let cr = 0.42 * w + pap[0] * pp;\n      let cg = 0.26 * w + pap[1] * pp;\n      let cb = 0.15 * w + pap[2] * pp;\n      // The andon: a paper lamp on short legs in the corner, lit at night.\n      if (x >= 3 && x \u003c= 12 && y >= 98 && y \u003c FLOOR && (y \u003c 117 || x === 4 || x === 11)) {\n        rc = 0;\n        if (y >= 117 || x === 3 || x === 12 || y === 98 || y === 107 || y === 116) {\n          const f = 0.3 * (0.4 + lit);\n          cr = 0.42 * f;\n          cg = 0.26 * f;\n          cb = 0.15 * f;\n        } else {\n          const glow = night * (0.55 + 0.3 * exp(-((x - 7.5) * (x - 7.5)) / 6 - ((y - 106) * (y - 106)) / 40));\n          cr = 0.14 * lit + glow;\n          cg = 0.13 * lit + 0.62 * glow;\n          cb = 0.12 * lit + 0.26 * glow;\n        }\n      }\n      rec[p] = rc;\n      bg[o] = cr * 255;\n      bg[o + 1] = cg * 255;\n      bg[o + 2] = cb * 255;\n    }\n}\n\nfunction lights(P) {\n  const k = P.light;\n  const lx = mix(-0.8, 0.65, k);\n  const ly = mix(0.35, 0.6, k);\n  const lz = mix(0.6, 0.45, k);\n  const l = hypot(lx, ly, lz);\n  P.L = [lx / l, ly / l, lz / l];\n  const hl = hypot(P.L[0], P.L[1], P.L[2] + 1);\n  P.Hv = [P.L[0] / hl, P.L[1] / hl, (P.L[2] + 1) / hl];\n  P.lc = k \u003c 0.5 ? mix3([1, 0.8, 0.56], [1, 0.68, 0.6], k * 2) : mix3([1, 0.68, 0.6], [0.9, 0.95, 1], k * 2 - 1);\n  P.amb = mix3([0.14, 0.16, 0.3], [0.3, 0.29, 0.27], k);\n}\n\nfunction put(P, x, y, z, r, g, b) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= SW || y \u003c 0 || y >= SH) return;\n  const i = y * SW + x;\n  if (z \u003c= P.zb[i]) return;\n  P.zb[i] = z;\n  P.cb[i * 3] = r;\n  P.cb[i * 3 + 1] = g;\n  P.cb[i * 3 + 2] = b;\n}\n\nfunction line(P, x0, y0, z0, x1, y1, z1, c) {\n  const n = max(1, Math.ceil(max(Math.abs(x1 - x0), Math.abs(y1 - y0))));\n  for (let j = 0; j \u003c= n; j++) {\n    const t = j / n;\n    put(P, mix(x0, x1, t), mix(y0, y1, t), mix(z0, z1, t), c[0], c[1], c[2]);\n  }\n}\n\n// A lit sphere: a bead or the knot over the ring.\nfunction bead(P, x, y, z, rad, col, occl) {\n  const { L, Hv, lc, amb } = P;\n  for (let j = floor(y - rad); j \u003c= y + rad; j++)\n    for (let i = floor(x - rad); i \u003c= x + rad; i++) {\n      const nx = (i + 0.5 - x) / rad;\n      const ny = -(j + 0.5 - y) / rad;\n      const q = 1 - nx * nx - ny * ny;\n      if (q \u003c 0) continue;\n      const nz = sqrt(q);\n      const d = max(0, nx * L[0] + ny * L[1] + nz * L[2]);\n      const sp = 0.9 * max(0, nx * Hv[0] + ny * Hv[1] + nz * Hv[2]) ** 10;\n      const f = 255 * occl;\n      put(P, i, j, z + nz * rad * 0.5, f * (col[0] * (amb[0] + 1.2 * d * lc[0]) + sp * lc[0]), f * (col[1] * (amb[1] + 1.2 * d * lc[1]) + sp * lc[1]), f * (col[2] * (amb[2] + 1.2 * d * lc[2]) + sp * lc[2]));\n    }\n}\n\nfunction tri(P, x0, y0, z0, x1, y1, z1, x2, y2, z2, r, g, b) {\n  const A = (x1 - x0) * (y2 - y0) - (x2 - x0) * (y1 - y0);\n  if (A > -0.02 && A \u003c 0.02) return;\n  const ia = 1 / A;\n  const xa = max(0, floor(min(x0, x1, x2)));\n  const xb = min(SW - 1, floor(max(x0, x1, x2)));\n  const ya = max(0, floor(min(y0, y1, y2)));\n  const yb = min(SH - 1, floor(max(y0, y1, y2)));\n  const { zb, cb } = P;\n  for (let y = ya; y \u003c= yb; y++) {\n    const py = y + 0.5;\n    for (let x = xa; x \u003c= xb; x++) {\n      const px = x + 0.5;\n      const w0 = ((x1 - px) * (y2 - py) - (x2 - px) * (y1 - py)) * ia;\n      const w1 = ((x2 - px) * (y0 - py) - (x0 - px) * (y2 - py)) * ia;\n      const w2 = 1 - w0 - w1;\n      if (w0 \u003c 0 || w1 \u003c 0 || w2 \u003c 0) continue;\n      const z = w0 * z0 + w1 * z1 + w2 * z2;\n      const i = y * SW + x;\n      if (z \u003c= zb[i]) continue;\n      zb[i] = z;\n      cb[i * 3] = r;\n      cb[i * 3 + 1] = g;\n      cb[i * 3 + 2] = b;\n    }\n  }\n}\n\n// One crane at screen point (cx, cy) in LEDs, depth cz, size k, turned yaw\n// about its thread and tilted roll in the picture plane. Each facet is lit\n// on its own: the side facing the lamp is bright, a facet that turns to\n// mirror the lamp into the room flashes.\nfunction crane(P, cx, cy, cz, k, yaw, roll, col, occl, gold) {\n  const cw = cos(yaw);\n  const sw = sin(yaw);\n  const cr = cos(roll);\n  const sr = sin(roll);\n  const { L, Hv, lc, amb } = P;\n  const shine = gold ? 1.1 : 0.35;\n  const pw = gold ? 6 : 14;\n  for (let t = 0; t \u003c MESH.length; t += 9) {\n    for (let v = 0; v \u003c 9; v += 3) {\n      const x = MESH[t + v];\n      const y = MESH[t + v + 1];\n      const z = MESH[t + v + 2];\n      const x1 = x * cw + z * sw;\n      const z1 = z * cw - x * sw;\n      const y1 = x1 * sr + y * cr;\n      // Seen from a little above.\n      TV[v] = x1 * cr - y * sr;\n      TV[v + 1] = y1 * CE - z1 * SE;\n      TV[v + 2] = y1 * SE + z1 * CE;\n    }\n    const ax = TV[3] - TV[0];\n    const ay = TV[4] - TV[1];\n    const az = TV[5] - TV[2];\n    const bx = TV[6] - TV[0];\n    const by = TV[7] - TV[1];\n    const bz = TV[8] - TV[2];\n    let nx = ay * bz - az * by;\n    let ny = az * bx - ax * bz;\n    let nz = ax * by - ay * bx;\n    let nl = sqrt(nx * nx + ny * ny + nz * nz);\n    if (nl \u003c 1e-6) continue;\n    // Paper has two sides: light the one that faces us.\n    if (nz \u003c 0) nl = -nl;\n    nx /= nl;\n    ny /= nl;\n    nz /= nl;\n    // Paper lets a little light round the fold, so no facet goes black.\n    const d = max(0, nx * L[0] + ny * L[1] + nz * L[2] + 0.35) / 1.35;\n    const sp = shine * max(0, nx * Hv[0] + ny * Hv[1] + nz * Hv[2]) ** pw;\n    const r = 255 * occl * (col[0] * (amb[0] + 1.15 * d * lc[0]) + sp * lc[0]);\n    const g = 255 * occl * (col[1] * (amb[1] + 1.15 * d * lc[1]) + sp * lc[1]);\n    const b = 255 * occl * (col[2] * (amb[2] + 1.15 * d * lc[2]) + sp * lc[2]);\n    tri(P, 2 * (cx + k * TV[0]), 2 * (cy - k * TV[1]), cz + k * TV[2], 2 * (cx + k * TV[3]), 2 * (cy - k * TV[4]), cz + k * TV[5], 2 * (cx + k * TV[6]), 2 * (cy - k * TV[7]), cz + k * TV[8], r, g, b);\n  }\n}\n\n// The colour of crane i from the top: bands from orange through the\n// rainbow, under a first crane of gold foil on every strand.\nfunction paperOf(P, i, nmax, st) {\n  if (i === 0) return GOLD;\n  const c = hsv(P.paper + 0.12 + (0.76 * (i - 1)) / max(1, nmax - 2) + st.hj, 0.82, 1);\n  return [c[0] * 0.92 + 0.08, c[1] * 0.92 + 0.08, c[2] * 0.92 + 0.08];\n}\n\nfunction hanging(P) {\n  const { nmax, k, dy } = layout(P.n);\n  const n = P.n;\n  const { lc, amb } = P;\n  const thread = [0.86, 0.8, 0.7];\n  const silk = [0.95, 0.2, 0.14];\n  for (let s = 0; s \u003c n; s++) {\n    const st = P.S[s];\n    const phi = P.psi + ((s + 0.25) / n) * TAU;\n    const ca = cos(phi);\n    const sa = sin(phi);\n    const ya = RY + RE * sa;\n    // The inside of the bundle is in shade.\n    const occl = 0.4 + 0.6 * (0.5 + 0.5 * sa);\n    const cnt = nmax - st.cut - st.lost;\n    const tc = thread.map((v, m) => 255 * occl * v * (amb[m] + 0.55 * lc[m]));\n    let px = 2 * (CX + RR * ca * (1 + RR * sa * 0.004));\n    let py = 2 * ya;\n    let pz = RR * sa - 2;\n    const pts = [];\n    for (let i = 0; i \u003c= cnt; i++) {\n      const yy = 7 + i * dy - (i === cnt ? dy * 0.35 : 0);\n      const u = yy / 100;\n      const dx = st.ax * u + 0.7 * P.B * u * sin(2.1 * P.ph - 3.2 * u + st.p);\n      const z = RR * sa + st.az * u;\n      const pp = 1 + z * 0.004;\n      const x = CX + (RR * ca + dx) * pp;\n      const y = ya + yy;\n      line(P, px, py, pz, 2 * x, 2 * y, z - 2 * k, tc);\n      px = 2 * x;\n      py = 2 * y;\n      pz = z - 2 * k;\n      pts.push([x, y, z, pp, u]);\n    }\n    for (let i = 0; i \u003c cnt; i++) {\n      const [x, y, z, pp, u] = pts[i];\n      const slope = (pts[i + 1][0] - x) / dy;\n      const yaw = -phi - PI / 2 + st.dir + st.tw * (0.3 + u) + (0.25 + 0.2 * P.B) * sin(1.3 * P.ph - 0.6 * i + st.q);\n      crane(P, x, y, z, k * pp, yaw, -slope, paperOf(P, i, nmax, st), occl, i === 0);\n    }\n    // A gold bead and a silk tassel that trails the swing.\n    const [x, y, z] = pts[cnt];\n    bead(P, 2 * x, 2 * y, z, 2 * k + 0.2, GOLD, occl);\n    const lag = -0.25 * st.vx;\n    const sc = silk.map((v, m) => 255 * occl * v * (amb[m] + 0.9 * lc[m]));\n    const len = round(15 * k);\n    for (let j = 0; j \u003c len; j++) {\n      const hw = (1.1 + j * 0.13) * k;\n      const xc = 2 * x + lag * j * 0.1;\n      for (let xx = floor(xc - hw); xx \u003c= xc + hw; xx++) {\n        const f = (xx & 1 ? 0.7 : 1) * (j > len - 3 ? 0.75 : 1);\n        put(P, xx, 2 * y + 2 + j, z, sc[0] * f, sc[1] * f, sc[2] * f);\n      }\n    }\n  }\n}\n\nfunction ring(P) {\n  const { L, Hv, lc, amb } = P;\n  for (let a = 0; a \u003c TAU; a += 0.01) {\n    const ca = cos(a);\n    const sa = sin(a);\n    const z = RR * sa;\n    const x = 2 * (CX + RR * ca * (1 + z * 0.004));\n    const y = 2 * (RY + RE * sa);\n    const occl = 0.45 + 0.55 * (0.5 + 0.5 * sa);\n    // Lacquered wood, round in section: lit on top and toward the lamp.\n    for (let q = -2; q \u003c= 1; q++) {\n      const ny = -(q + 0.5) * 0.7;\n      const nl = sqrt(1 + ny * ny);\n      const d = max(0, (ca * L[0] + ny * L[1] + sa * L[2]) / nl);\n      const sp = 0.8 * max(0, (ca * Hv[0] + ny * Hv[1] + sa * Hv[2]) / nl) ** 12;\n      const f = 255 * occl;\n      put(P, x, y + q, z + 1, f * (0.85 * (amb[0] + 1.1 * d * lc[0]) + sp * lc[0]), f * (0.16 * (amb[1] + 1.1 * d * lc[1]) + sp * lc[1]), f * (0.09 * (amb[2] + 1.1 * d * lc[2]) + sp * lc[2]));\n    }\n  }\n  // Four cords up to a knot under the beam.\n  const cc = [0.9, 0.75, 0.4].map((v, m) => 255 * v * (amb[m] + 0.6 * lc[m]));\n  for (let j = 0; j \u003c 4; j++) {\n    const a = P.psi + PI / 4 + (j * PI) / 2;\n    const z = RR * sin(a);\n    line(P, 2 * (CX + RR * cos(a) * (1 + z * 0.004)), 2 * (RY + RE * sin(a)), z, 2 * CX, 10, 0, cc);\n  }\n  line(P, 2 * CX, 0, 0, 2 * CX, 10, 0, cc);\n  bead(P, 2 * CX, 10, 1, 3.2, [0.9, 0.16, 0.12], 1);\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  if (!P.S) return;\n  const key = `${P.light}`;\n  if (key !== P.key) {\n    P.key = key;\n    room(P);\n  }\n  lights(P);\n  P.zb.fill(-1e9);\n  ring(P);\n  hanging(P);\n  const { nmax, k } = layout(P.n);\n  for (const f of P.fall) crane(P, f.x, f.y, f.z, k, f.yaw, f.roll || 0, paperOf(P, f.i, nmax, P.S[f.s]), 1, false);\n  const { zb, cb, bg, rec, L } = P;\n  // The cranes' shadows on the wall, thrown away from the light.\n  const ox = round(clamp((-L[0] / L[2]) * 16, -24, 24));\n  const oy = round(clamp((L[1] / L[2]) * 16, -16, 16));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      let c = 0;\n      for (let q = 0; q \u003c 4; q++) {\n        const i = (2 * y + (q >> 1)) * SW + 2 * x + (q & 1);\n        if (zb[i] > -1e8) {\n          r += cb[i * 3];\n          g += cb[i * 3 + 1];\n          b += cb[i * 3 + 2];\n          c++;\n        }\n      }\n      const o = (y * W + x) * 3;\n      // Thin paper edges count a little more than their share, so a neck\n      // half an LED wide still shows.\n      const a = min(1, c * 0.36);\n      const f = 1 - a;\n      const ic = c ? a / c : 0;\n      const sx = 2 * x - ox;\n      const sy = 2 * y - oy;\n      const sh = f * (sx >= 0 && sx \u003c SW && sy >= 0 && sy \u003c SH && zb[sy * SW + sx] > -1e8 ? 1 - 0.6 * rec[o / 3] : 1);\n      display.setPixel(x, y, min(255, r * ic + sh * bg[o]), min(255, g * ic + sh * bg[o + 1]), min(255, b * ic + sh * bg[o + 2]));\n    }\n}\n","layer":{"id":"layer-senbazuru","type":"code","name":"senbazuru","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Senbazuru\n// Family:  paper\n// Idea:    Strings of folded paper cranes hang from a red lacquered ring in a dim temple room, in bands of colour from the ring down to the silk tassels, and a soft draught sways the strands and turns the cranes so their folds catch the lamp one facet at a time.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the senbazuru strings of a thousand origami cranes hung in Japanese temples and at the Children's Peace Monument in Hiroshima\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Breeze=0.2..3, Strands=8..16, Light=0..1\n//\n// Knob 1: Paper. Which colours the cranes are folded from: under a row of gold foil cranes at the ring, the bands run from orange through green and blue to violet and pink at the tassels at 0, and turning it moves every band along the rainbow.\n// Knob 2: Breeze. How hard the draught blows: at 0.2 the strands hang almost still, at 2 they lean and sway and the cranes turn, at 3 they swing wide and spin.\n// Knob 3: Strands. How many strands hang from the ring, from 8 to 16; with more strands the cranes are folded smaller and each strand carries more of them.\n// Knob 4: Light. Where the light comes from: a paper lamp low on the left at night at 0, with the round window blue with moonlight, through dusk to daylight from the upper right at 1. The lit folds and the cranes' shadows on the wall swing with it.\n// Buttons: K1 tap sends a gust through the room, which spins the cranes and shakes one loose to glide to the floor.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The cranes, threads and ring are drawn at twice the resolution and averaged\n// down, so a neck one LED wide still reads.\nconst SW = 128;\nconst SH = 256;\nconst SN = SW * SH;\n// The ring: its centre column, its row, its radius and how far its front\n// hangs below its back. Then the round window behind it and the first row\n// of the floor.\nconst CX = 31.5;\nconst RY = 12;\nconst RR = 22;\nconst RE = 3.6;\nconst WY = 60;\nconst WR = 26;\nconst FLOOR = 121;\nconst MAXS = 16;\nconst { sin, cos, min, max, floor, round, sqrt, exp, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6;\n  const f = h - floor(h);\n  const p = v * (1 - s);\n  const q = v * (1 - s * f);\n  const t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// A folded crane, head forward along -x, up along y, wings out along z. Each\n// face is one flat facet of the paper; the far side mirrors the near one.\nconst PT = {\n  F: [-2.3, 0.3, 0], B: [2.3, 0.3, 0], D: [0, -1.9, 0], S: [0, 0, 1.3],\n  W0: [-2.4, 0.5, 0.3], W1: [2.4, 0.5, 0.3], Wm: [0.3, -0.4, 1.3], Wt: [1.5, 2.4, 4.8],\n  N0: [-1, -1.6, 0.6], N1: [-3.4, 0.9, 0], Nt: [-4.9, 5.4, 0], H0: [-4.1, 5.8, 0.4], Hp: [-6.6, 4.1, 0],\n  T0: [1, -1.6, 0.6], T1: [3.4, 0.9, 0], Tt: [5.3, 5.8, 0],\n};\nconst MESH = Float32Array.from(\n  [1, -1].flatMap((s) =>\n    \"F S D,S B D,W0 Wm Wt,Wm W1 Wt,N0 N1 Nt,Nt H0 Hp,T0 T1 Tt\"\n      .split(\",\")\n      .flatMap((f) => f.split(\" \").flatMap((k) => [PT[k][0], PT[k][1], PT[k][2] * s])),\n  ),\n);\nconst TV = new Float32Array(9);\nconst CE = cos(0.38);\nconst SE = sin(0.38);\nconst GOLD = [1, 0.74, 0.3];\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, {\n    cb: new Float32Array(SN * 3),\n    zb: new Float32Array(SN),\n    bg: new Float32Array(N * 3),\n    rec: new Float32Array(N),\n    grain: Float32Array.from({ length: N }, () => rnd() - 0.5),\n    key: \"\",\n    started: false,\n    ph: 0,\n    psi: 0,\n    vpsi: 0,\n    gust: 0,\n    gx: -30,\n    next: 7,\n    fall: [],\n    paper: 0,\n    B: 2,\n    n: 8,\n    light: 0.06,\n  });\n  P.S = Array.from({ length: MAXS }, () => ({\n    ax: 0, vx: 0, az: 0, vz: 0, tw: 0, vt: 0,\n    p: rnd() * TAU, q: rnd() * TAU, cut: floor(rnd() * 3.6), dir: rnd() \u003c 0.5 ? 0 : PI, hj: (rnd() - 0.5) * 0.05, lost: 0,\n  }));\n}\n\n// Crane size, spacing and count for the strand count.\nfunction layout(n) {\n  const k = 1.45 - 0.04 * n;\n  const dy = 6.6 * k + 1;\n  return { k, dy, nmax: floor((104 - RY - 7) / dy) + 1 };\n}\n\nfunction gust(P, g, loosen) {\n  P.gust = max(P.gust, g);\n  P.gx = -12;\n  P.vpsi += 0.35 * g * (rnd() \u003c 0.5 ? -1 : 1);\n  for (let s = 0; s \u003c MAXS; s++) P.S[s].vt += g * (2 + 3 * rnd()) * (rnd() \u003c 0.5 ? -1 : 1);\n  if (!loosen) return;\n  // The bottom crane of the nearest strand that still has a few slips off.\n  const { nmax, dy } = layout(P.n);\n  let best = -1;\n  let bz = -2;\n  for (let s = 0; s \u003c P.n; s++) {\n    const st = P.S[s];\n    const sa = sin(P.psi + ((s + 0.25) / P.n) * TAU);\n    if (st.lost \u003c 2 && nmax - st.cut - st.lost > 5 && sa > bz) {\n      bz = sa;\n      best = s;\n    }\n  }\n  if (best \u003c 0) return;\n  const st = P.S[best];\n  const i = nmax - st.cut - st.lost - 1;\n  st.lost++;\n  const phi = P.psi + ((best + 0.25) / P.n) * TAU;\n  const u = (7 + i * dy) / 100;\n  const z = RR * sin(phi);\n  const x = CX + (RR * cos(phi) + st.ax * u) * (1 + z * 0.004);\n  P.fall.push({ x, x0: x, y: RY + RE * sin(phi) + 7 + i * dy, z: z + 4, yaw: -phi, t: 0, i, s: best, down: false });\n  if (P.fall.length > 5) P.fall.shift();\n}\n\nfunction step(P, h) {\n  const B = P.B;\n  P.ph += h * (0.35 + 0.65 * sqrt(B / 2));\n  const T = P.ph;\n  if ((P.next -= h) \u003c= 0) {\n    gust(P, 0.35 + 0.3 * rnd(), false);\n    P.next = 6 + 7 * rnd();\n  }\n  P.gust *= exp(-h / 1.8);\n  P.gx += h * 36;\n  const n = P.n;\n  for (let s = 0; s \u003c n; s++) {\n    const st = P.S[s];\n    const phi = P.psi + ((s + 0.25) / n) * TAU;\n    const x = CX + RR * cos(phi);\n    // The draught: a lean to the right that breathes, a flutter that runs\n    // across the bundle, and the gust front passing left to right.\n    const front = 1 / (1 + exp((x - P.gx) / 6));\n    const wind = 3 * B * (0.4 + 0.6 * sin(0.61 * T + st.p) + 0.35 * sin(1.37 * T - 0.06 * x + st.q)) + (3 + 2.5 * B) * P.gust * front;\n    st.vx += h * (5.5 * (wind - st.ax) - 1.1 * st.vx);\n    st.ax += h * st.vx;\n    const wz = 2 * B * sin(0.43 * T + st.q) + 3 * B * P.gust * front * sin(st.p);\n    st.vz += h * (5.5 * (wz - st.az) - 1.1 * st.vz);\n    st.az += h * st.vz;\n    const tq = 0.3 * B * sin(0.53 * T + 2 * st.p);\n    st.vt += h * (3 * (tq - st.tw) - 0.45 * st.vt);\n    st.tw += h * st.vt;\n  }\n  // The whole hanging twists on its one cord.\n  const tr = 0.16 * B * sin(0.23 * T) + 0.06 * B * sin(0.67 * T + 1);\n  P.vpsi += h * (1.4 * (tr - P.psi) - 0.35 * P.vpsi);\n  P.psi += h * P.vpsi;\n  // A loose crane glides down like a leaf, rocking and turning.\n  for (const f of P.fall) {\n    if (f.down) continue;\n    f.t += h;\n    const sw = sin(2.1 * f.t);\n    f.y += h * (8 + 10 * sw * sw);\n    f.x = f.x0 + 7 * sin(2.1 * f.t - 0.3) * min(1, f.t);\n    f.yaw += h * 1.6;\n    f.roll = 0.55 * cos(2.1 * f.t) * min(1, f.t * 2);\n    if (f.y >= FLOOR + 2.6) {\n      f.y = FLOOR + 2.6;\n      f.roll = 0;\n      f.down = true;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.paper = clamp(k[0], 0, 1);\n  P.B = clamp(k[1], 0.2, 3);\n  P.n = clamp(round(k[2]), 8, MAXS);\n  P.light = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    for (let i = 0; i \u003c 60; i++) step(P, 1 / 15);\n  }\n  if (input.btnPressed && input.btnPressed[0]) gust(P, 1, true);\n  for (let i = 0; i \u003c 2; i++) step(P, dt / 2);\n}\n\n// The room: dark wood boards, a round shoji window behind the cranes, the\n// lamp, a polished floor. Kept until the light changes.\nfunction room(P) {\n  const k = P.light;\n  const night = 1 - k;\n  const pap = k \u003c 0.5 ? mix3([0.1, 0.15, 0.38], [0.66, 0.38, 0.4], k * 2) : mix3([0.66, 0.38, 0.4], [0.94, 0.88, 0.74], k * 2 - 1);\n  const { bg, rec, grain } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const g = grain[p];\n      const dx = x - 31.5;\n      const dy = y - WY;\n      const lamp = night * exp(-((x - 7) * (x - 7)) / 700 - ((y - 106) * (y - 106)) / 2500);\n      const lit = 0.3 + 1.4 * lamp + 0.9 * k * (0.4 + (0.6 * x) / 63) * (1.1 - (0.5 * y) / 127);\n      const r = sqrt(dx * dx + dy * dy);\n      // Each LED is wood taking w of the light, plus paper glowing pp, and\n      // the cranes' shadows fall on it rc dark.\n      let w = 0;\n      let pp = 0;\n      let rc = 0.7;\n      if (y \u003c 3) w = y === 2 ? 0.35 : 0.7;\n      else if (y >= FLOOR) {\n        // Boards, and the window seen dimly in the polish.\n        const b = (y - FLOOR) % 3 === 0 ? 0.6 : 1;\n        w = 0.75 * b;\n        pp = exp(-(dx * dx) / 500) * 0.22 * b;\n      } else if (x \u003c 3 || x > 60) w = x === 2 || x === 61 ? 0.8 : 0.53;\n      else if (r \u003c WR) {\n        // Paper between the kumiko bars, brightest where the moon or sun is.\n        const spot = exp(-((dx - 10) * (dx - 10) + (dy + 12) * (dy + 12)) / 500);\n        const bar = (x + 1) % 7 === 0 || (y - WY + 99) % 9 === 0;\n        pp = (0.62 + 0.55 * spot + 0.04 * g) * (bar ? 0.28 : 1);\n        rc = 0.2;\n      } else if (r \u003c WR + 2.2) w = r \u003c WR + 1 ? 0.62 : 0.35;\n      else {\n        const tone = 0.8 + 0.25 * sin(floor((x + 3) / 7) * 12.9898) ** 2 + 0.12 * g;\n        w = 0.55 * tone * ((x + 3) % 7 === 0 ? 0.55 : 1);\n      }\n      w *= lit;\n      let cr = 0.42 * w + pap[0] * pp;\n      let cg = 0.26 * w + pap[1] * pp;\n      let cb = 0.15 * w + pap[2] * pp;\n      // The andon: a paper lamp on short legs in the corner, lit at night.\n      if (x >= 3 && x \u003c= 12 && y >= 98 && y \u003c FLOOR && (y \u003c 117 || x === 4 || x === 11)) {\n        rc = 0;\n        if (y >= 117 || x === 3 || x === 12 || y === 98 || y === 107 || y === 116) {\n          const f = 0.3 * (0.4 + lit);\n          cr = 0.42 * f;\n          cg = 0.26 * f;\n          cb = 0.15 * f;\n        } else {\n          const glow = night * (0.55 + 0.3 * exp(-((x - 7.5) * (x - 7.5)) / 6 - ((y - 106) * (y - 106)) / 40));\n          cr = 0.14 * lit + glow;\n          cg = 0.13 * lit + 0.62 * glow;\n          cb = 0.12 * lit + 0.26 * glow;\n        }\n      }\n      rec[p] = rc;\n      bg[o] = cr * 255;\n      bg[o + 1] = cg * 255;\n      bg[o + 2] = cb * 255;\n    }\n}\n\nfunction lights(P) {\n  const k = P.light;\n  const lx = mix(-0.8, 0.65, k);\n  const ly = mix(0.35, 0.6, k);\n  const lz = mix(0.6, 0.45, k);\n  const l = hypot(lx, ly, lz);\n  P.L = [lx / l, ly / l, lz / l];\n  const hl = hypot(P.L[0], P.L[1], P.L[2] + 1);\n  P.Hv = [P.L[0] / hl, P.L[1] / hl, (P.L[2] + 1) / hl];\n  P.lc = k \u003c 0.5 ? mix3([1, 0.8, 0.56], [1, 0.68, 0.6], k * 2) : mix3([1, 0.68, 0.6], [0.9, 0.95, 1], k * 2 - 1);\n  P.amb = mix3([0.14, 0.16, 0.3], [0.3, 0.29, 0.27], k);\n}\n\nfunction put(P, x, y, z, r, g, b) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= SW || y \u003c 0 || y >= SH) return;\n  const i = y * SW + x;\n  if (z \u003c= P.zb[i]) return;\n  P.zb[i] = z;\n  P.cb[i * 3] = r;\n  P.cb[i * 3 + 1] = g;\n  P.cb[i * 3 + 2] = b;\n}\n\nfunction line(P, x0, y0, z0, x1, y1, z1, c) {\n  const n = max(1, Math.ceil(max(Math.abs(x1 - x0), Math.abs(y1 - y0))));\n  for (let j = 0; j \u003c= n; j++) {\n    const t = j / n;\n    put(P, mix(x0, x1, t), mix(y0, y1, t), mix(z0, z1, t), c[0], c[1], c[2]);\n  }\n}\n\n// A lit sphere: a bead or the knot over the ring.\nfunction bead(P, x, y, z, rad, col, occl) {\n  const { L, Hv, lc, amb } = P;\n  for (let j = floor(y - rad); j \u003c= y + rad; j++)\n    for (let i = floor(x - rad); i \u003c= x + rad; i++) {\n      const nx = (i + 0.5 - x) / rad;\n      const ny = -(j + 0.5 - y) / rad;\n      const q = 1 - nx * nx - ny * ny;\n      if (q \u003c 0) continue;\n      const nz = sqrt(q);\n      const d = max(0, nx * L[0] + ny * L[1] + nz * L[2]);\n      const sp = 0.9 * max(0, nx * Hv[0] + ny * Hv[1] + nz * Hv[2]) ** 10;\n      const f = 255 * occl;\n      put(P, i, j, z + nz * rad * 0.5, f * (col[0] * (amb[0] + 1.2 * d * lc[0]) + sp * lc[0]), f * (col[1] * (amb[1] + 1.2 * d * lc[1]) + sp * lc[1]), f * (col[2] * (amb[2] + 1.2 * d * lc[2]) + sp * lc[2]));\n    }\n}\n\nfunction tri(P, x0, y0, z0, x1, y1, z1, x2, y2, z2, r, g, b) {\n  const A = (x1 - x0) * (y2 - y0) - (x2 - x0) * (y1 - y0);\n  if (A > -0.02 && A \u003c 0.02) return;\n  const ia = 1 / A;\n  const xa = max(0, floor(min(x0, x1, x2)));\n  const xb = min(SW - 1, floor(max(x0, x1, x2)));\n  const ya = max(0, floor(min(y0, y1, y2)));\n  const yb = min(SH - 1, floor(max(y0, y1, y2)));\n  const { zb, cb } = P;\n  for (let y = ya; y \u003c= yb; y++) {\n    const py = y + 0.5;\n    for (let x = xa; x \u003c= xb; x++) {\n      const px = x + 0.5;\n      const w0 = ((x1 - px) * (y2 - py) - (x2 - px) * (y1 - py)) * ia;\n      const w1 = ((x2 - px) * (y0 - py) - (x0 - px) * (y2 - py)) * ia;\n      const w2 = 1 - w0 - w1;\n      if (w0 \u003c 0 || w1 \u003c 0 || w2 \u003c 0) continue;\n      const z = w0 * z0 + w1 * z1 + w2 * z2;\n      const i = y * SW + x;\n      if (z \u003c= zb[i]) continue;\n      zb[i] = z;\n      cb[i * 3] = r;\n      cb[i * 3 + 1] = g;\n      cb[i * 3 + 2] = b;\n    }\n  }\n}\n\n// One crane at screen point (cx, cy) in LEDs, depth cz, size k, turned yaw\n// about its thread and tilted roll in the picture plane. Each facet is lit\n// on its own: the side facing the lamp is bright, a facet that turns to\n// mirror the lamp into the room flashes.\nfunction crane(P, cx, cy, cz, k, yaw, roll, col, occl, gold) {\n  const cw = cos(yaw);\n  const sw = sin(yaw);\n  const cr = cos(roll);\n  const sr = sin(roll);\n  const { L, Hv, lc, amb } = P;\n  const shine = gold ? 1.1 : 0.35;\n  const pw = gold ? 6 : 14;\n  for (let t = 0; t \u003c MESH.length; t += 9) {\n    for (let v = 0; v \u003c 9; v += 3) {\n      const x = MESH[t + v];\n      const y = MESH[t + v + 1];\n      const z = MESH[t + v + 2];\n      const x1 = x * cw + z * sw;\n      const z1 = z * cw - x * sw;\n      const y1 = x1 * sr + y * cr;\n      // Seen from a little above.\n      TV[v] = x1 * cr - y * sr;\n      TV[v + 1] = y1 * CE - z1 * SE;\n      TV[v + 2] = y1 * SE + z1 * CE;\n    }\n    const ax = TV[3] - TV[0];\n    const ay = TV[4] - TV[1];\n    const az = TV[5] - TV[2];\n    const bx = TV[6] - TV[0];\n    const by = TV[7] - TV[1];\n    const bz = TV[8] - TV[2];\n    let nx = ay * bz - az * by;\n    let ny = az * bx - ax * bz;\n    let nz = ax * by - ay * bx;\n    let nl = sqrt(nx * nx + ny * ny + nz * nz);\n    if (nl \u003c 1e-6) continue;\n    // Paper has two sides: light the one that faces us.\n    if (nz \u003c 0) nl = -nl;\n    nx /= nl;\n    ny /= nl;\n    nz /= nl;\n    // Paper lets a little light round the fold, so no facet goes black.\n    const d = max(0, nx * L[0] + ny * L[1] + nz * L[2] + 0.35) / 1.35;\n    const sp = shine * max(0, nx * Hv[0] + ny * Hv[1] + nz * Hv[2]) ** pw;\n    const r = 255 * occl * (col[0] * (amb[0] + 1.15 * d * lc[0]) + sp * lc[0]);\n    const g = 255 * occl * (col[1] * (amb[1] + 1.15 * d * lc[1]) + sp * lc[1]);\n    const b = 255 * occl * (col[2] * (amb[2] + 1.15 * d * lc[2]) + sp * lc[2]);\n    tri(P, 2 * (cx + k * TV[0]), 2 * (cy - k * TV[1]), cz + k * TV[2], 2 * (cx + k * TV[3]), 2 * (cy - k * TV[4]), cz + k * TV[5], 2 * (cx + k * TV[6]), 2 * (cy - k * TV[7]), cz + k * TV[8], r, g, b);\n  }\n}\n\n// The colour of crane i from the top: bands from orange through the\n// rainbow, under a first crane of gold foil on every strand.\nfunction paperOf(P, i, nmax, st) {\n  if (i === 0) return GOLD;\n  const c = hsv(P.paper + 0.12 + (0.76 * (i - 1)) / max(1, nmax - 2) + st.hj, 0.82, 1);\n  return [c[0] * 0.92 + 0.08, c[1] * 0.92 + 0.08, c[2] * 0.92 + 0.08];\n}\n\nfunction hanging(P) {\n  const { nmax, k, dy } = layout(P.n);\n  const n = P.n;\n  const { lc, amb } = P;\n  const thread = [0.86, 0.8, 0.7];\n  const silk = [0.95, 0.2, 0.14];\n  for (let s = 0; s \u003c n; s++) {\n    const st = P.S[s];\n    const phi = P.psi + ((s + 0.25) / n) * TAU;\n    const ca = cos(phi);\n    const sa = sin(phi);\n    const ya = RY + RE * sa;\n    // The inside of the bundle is in shade.\n    const occl = 0.4 + 0.6 * (0.5 + 0.5 * sa);\n    const cnt = nmax - st.cut - st.lost;\n    const tc = thread.map((v, m) => 255 * occl * v * (amb[m] + 0.55 * lc[m]));\n    let px = 2 * (CX + RR * ca * (1 + RR * sa * 0.004));\n    let py = 2 * ya;\n    let pz = RR * sa - 2;\n    const pts = [];\n    for (let i = 0; i \u003c= cnt; i++) {\n      const yy = 7 + i * dy - (i === cnt ? dy * 0.35 : 0);\n      const u = yy / 100;\n      const dx = st.ax * u + 0.7 * P.B * u * sin(2.1 * P.ph - 3.2 * u + st.p);\n      const z = RR * sa + st.az * u;\n      const pp = 1 + z * 0.004;\n      const x = CX + (RR * ca + dx) * pp;\n      const y = ya + yy;\n      line(P, px, py, pz, 2 * x, 2 * y, z - 2 * k, tc);\n      px = 2 * x;\n      py = 2 * y;\n      pz = z - 2 * k;\n      pts.push([x, y, z, pp, u]);\n    }\n    for (let i = 0; i \u003c cnt; i++) {\n      const [x, y, z, pp, u] = pts[i];\n      const slope = (pts[i + 1][0] - x) / dy;\n      const yaw = -phi - PI / 2 + st.dir + st.tw * (0.3 + u) + (0.25 + 0.2 * P.B) * sin(1.3 * P.ph - 0.6 * i + st.q);\n      crane(P, x, y, z, k * pp, yaw, -slope, paperOf(P, i, nmax, st), occl, i === 0);\n    }\n    // A gold bead and a silk tassel that trails the swing.\n    const [x, y, z] = pts[cnt];\n    bead(P, 2 * x, 2 * y, z, 2 * k + 0.2, GOLD, occl);\n    const lag = -0.25 * st.vx;\n    const sc = silk.map((v, m) => 255 * occl * v * (amb[m] + 0.9 * lc[m]));\n    const len = round(15 * k);\n    for (let j = 0; j \u003c len; j++) {\n      const hw = (1.1 + j * 0.13) * k;\n      const xc = 2 * x + lag * j * 0.1;\n      for (let xx = floor(xc - hw); xx \u003c= xc + hw; xx++) {\n        const f = (xx & 1 ? 0.7 : 1) * (j > len - 3 ? 0.75 : 1);\n        put(P, xx, 2 * y + 2 + j, z, sc[0] * f, sc[1] * f, sc[2] * f);\n      }\n    }\n  }\n}\n\nfunction ring(P) {\n  const { L, Hv, lc, amb } = P;\n  for (let a = 0; a \u003c TAU; a += 0.01) {\n    const ca = cos(a);\n    const sa = sin(a);\n    const z = RR * sa;\n    const x = 2 * (CX + RR * ca * (1 + z * 0.004));\n    const y = 2 * (RY + RE * sa);\n    const occl = 0.45 + 0.55 * (0.5 + 0.5 * sa);\n    // Lacquered wood, round in section: lit on top and toward the lamp.\n    for (let q = -2; q \u003c= 1; q++) {\n      const ny = -(q + 0.5) * 0.7;\n      const nl = sqrt(1 + ny * ny);\n      const d = max(0, (ca * L[0] + ny * L[1] + sa * L[2]) / nl);\n      const sp = 0.8 * max(0, (ca * Hv[0] + ny * Hv[1] + sa * Hv[2]) / nl) ** 12;\n      const f = 255 * occl;\n      put(P, x, y + q, z + 1, f * (0.85 * (amb[0] + 1.1 * d * lc[0]) + sp * lc[0]), f * (0.16 * (amb[1] + 1.1 * d * lc[1]) + sp * lc[1]), f * (0.09 * (amb[2] + 1.1 * d * lc[2]) + sp * lc[2]));\n    }\n  }\n  // Four cords up to a knot under the beam.\n  const cc = [0.9, 0.75, 0.4].map((v, m) => 255 * v * (amb[m] + 0.6 * lc[m]));\n  for (let j = 0; j \u003c 4; j++) {\n    const a = P.psi + PI / 4 + (j * PI) / 2;\n    const z = RR * sin(a);\n    line(P, 2 * (CX + RR * cos(a) * (1 + z * 0.004)), 2 * (RY + RE * sin(a)), z, 2 * CX, 10, 0, cc);\n  }\n  line(P, 2 * CX, 0, 0, 2 * CX, 10, 0, cc);\n  bead(P, 2 * CX, 10, 1, 3.2, [0.9, 0.16, 0.12], 1);\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  if (!P.S) return;\n  const key = `${P.light}`;\n  if (key !== P.key) {\n    P.key = key;\n    room(P);\n  }\n  lights(P);\n  P.zb.fill(-1e9);\n  ring(P);\n  hanging(P);\n  const { nmax, k } = layout(P.n);\n  for (const f of P.fall) crane(P, f.x, f.y, f.z, k, f.yaw, f.roll || 0, paperOf(P, f.i, nmax, P.S[f.s]), 1, false);\n  const { zb, cb, bg, rec, L } = P;\n  // The cranes' shadows on the wall, thrown away from the light.\n  const ox = round(clamp((-L[0] / L[2]) * 16, -24, 24));\n  const oy = round(clamp((L[1] / L[2]) * 16, -16, 16));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      let c = 0;\n      for (let q = 0; q \u003c 4; q++) {\n        const i = (2 * y + (q >> 1)) * SW + 2 * x + (q & 1);\n        if (zb[i] > -1e8) {\n          r += cb[i * 3];\n          g += cb[i * 3 + 1];\n          b += cb[i * 3 + 2];\n          c++;\n        }\n      }\n      const o = (y * W + x) * 3;\n      // Thin paper edges count a little more than their share, so a neck\n      // half an LED wide still shows.\n      const a = min(1, c * 0.36);\n      const f = 1 - a;\n      const ic = c ? a / c : 0;\n      const sx = 2 * x - ox;\n      const sy = 2 * y - oy;\n      const sh = f * (sx >= 0 && sx \u003c SW && sy >= 0 && sy \u003c SH && zb[sy * SW + sx] > -1e8 ? 1 - 0.6 * rec[o / 3] : 1);\n      display.setPixel(x, y, min(255, r * ic + sh * bg[o]), min(255, g * ic + sh * bg[o + 1]), min(255, b * ic + sh * bg[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Paper=0..1, Breeze=0.2..3, Strands=8..16, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Paper","min":0,"max":1,"about":"Which colours the cranes are folded from: under a row of gold foil cranes at the ring, the bands run from orange through green and blue to violet and pink at the tassels at 0, and turning it moves every band along the rainbow."},{"name":"Breeze","min":0.2,"max":3,"about":"How hard the draught blows: at 0.2 the strands hang almost still, at 2 they lean and sway and the cranes turn, at 3 they swing wide and spin."},{"name":"Strands","min":8,"max":16,"about":"How many strands hang from the ring, from 8 to 16; with more strands the cranes are folded smaller and each strand carries more of them."},{"name":"Light","min":0,"max":1,"about":"Where the light comes from: a paper lamp low on the left at night at 0, with the round window blue with moonlight, through dusk to daylight from the upper right at 1. The lit folds and the cranes' shadows on the wall swing with it."}],"start":[0,2,8,0.06],"measures":{"motion":0.5463,"detail":0.1059,"edges":0.4439,"complexity":2.0626,"coverage":0.7211,"colour":0.2483,"drift":0.1023},"knobResponse":[0.0684,0.1034,0.1073,0.1606]},{"slug":"sequins","title":"Sequins","family":"textile","round":23,"note":"뒤집히는 스팽글을 촘촘히 단 쿠션이 패널을 채워요. 은빛 비늘이 엇갈린 줄로 겹쳐 있고, 보이지 않는 손끝이 지나가면 스팽글이 차례로 모서리를 보이며 넘어가 하트, 별, 고양이 얼굴, 번개, 파도를 분홍 면으로 그려요. 손바닥이 위에서 아래로 쓸면 다시 은빛이 돼요.","idea":"A cushion of reversible flip sequins fills the panel under a lamp, silver scales in staggered rows, and an unseen fingertip strokes a heart, a star, a cat's face, a lightning bolt and a wave into it one after another, each sequin it passes turning edge on and over to its coloured side, until a flat palm sweeps the cushion silver again.","buttons":"K1 tap sweeps the palm down the cushion now and the next drawing starts.","code":"// ===== Patternflow pattern =====\n// Title:   Sequins\n// Family:  textile\n// Idea:    A cushion of reversible flip sequins fills the panel under a lamp, silver scales in staggered rows, and an unseen fingertip strokes a heart, a star, a cat's face, a lightning bolt and a wave into it one after another, each sequin it passes turning edge on and over to its coloured side, until a flat palm sweeps the cushion silver again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after reversible flip-sequin fabric\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drawing=0..4, Lamp=0..1\n//\n// Knob 1: Hue. The colour on the back of the sequins: hot pink at 0, then on through red, gold, green and blue to violet, and pink again at 1.\n// Knob 2: Speed. How fast the fingertip draws and the palm sweeps: at 2 a drawing takes about four seconds and a round seven; at 0.2 everything runs ten times slower.\n// Knob 3: Drawing. What the fingertip draws next: a heart, a star, a cat's face, a lightning bolt or a wave, the rest following in that order. Turning it sweeps the cushion silver and starts the new one.\n// Knob 4: Lamp. Where the lamp stands above the cushion, from upper left over the top to upper right: the highlight in every cupped sequin slides the other way, and the bright sheen across the cushion follows the lamp.\n// Buttons: K1 tap sweeps the palm down the cushion now and the next drawing starts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst NDRAW = 5;\nconst { min, max, sqrt, sin, cos, abs, floor, round, hypot, atan2, PI } = Math;\n// Sequins sit 5 LEDs apart in a row and rows 3 LEDs apart, every other row\n// shifted by half a sequin. Each is a disc a little wider than the spacing,\n// so the row above covers the top of the row below.\nconst PX = 5;\nconst PY = 3;\nconst R = 2.8;\nconst NC = floor(W / PX) + 2;\n// The round at Speed 2, in seconds: draw, hold, sweep, rest.\nconst TD = 4.2;\nconst TH = 1.8;\nconst TS = 0.8;\nconst TR = 0.3;\nconst TC = TD + TH + TS + TR;\n// One sequin takes this long to turn over.\nconst FL = 0.16;\n// How far the fingertip reaches, in LEDs.\nconst REACH = 4.2;\n// The shading of one sequin. The part that shows sits low on the disc. The\n// sequins are cupped, so the lamp lights the inside wall away from it, where a\n// tight highlight sits. The rim nearest the lamp falls into shadow.\nconst SHOW = 0.5;\nconst SPOT = 0.45;\nconst SPOT2 = 0.15;\nconst RIM = 0.62;\n// Each sequin is tipped a little its own way and catches more or less lamp.\nconst GLA = 0.35;\nconst GLB = 0.9;\n// The coloured side reflects this share of what the silver side does.\nconst DIM = 0.24;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The sequins, listed bottom row first, so a later one lies over an earlier one.\nconst SX = [];\nconst SY = [];\nconst ROWS = floor(H / PY) + 1;\nfor (let k = ROWS - 1; k >= -1; k--)\n  for (let j = -1; j \u003c NC - 1; j++) {\n    SX.push(j * PX + ((k & 1) ? 0 : PX / 2));\n    SY.push(k * PY + 1.5);\n  }\nconst NS = SX.length;\n\n// The drawings, as shapes in LED coordinates: true inside.\nfunction inPoly(x, y, pts) {\n  let c = false;\n  for (let i = 0, j = pts.length - 2; i \u003c pts.length; j = i, i += 2) {\n    const xi = pts[i];\n    const yi = pts[i + 1];\n    const xj = pts[j];\n    const yj = pts[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) c = !c;\n  }\n  return c;\n}\nfunction heart(x, y) {\n  const X = (x - 32) / 26;\n  const Y = (35 - y) / 26;\n  const a = X * X + Y * Y - 1;\n  return a * a * a - X * X * Y * Y * Y \u003c= 0;\n}\nfunction star(x, y) {\n  const dx = x - 32;\n  const dy = y - 66;\n  const r = hypot(dx, dy);\n  const t = (((atan2(dx, -dy) / (2 * PI)) * 5) % 1 + 1) % 1;\n  const e = abs(t - 0.5) * 2;\n  return r \u003c 13 + 19 * e * e;\n}\nfunction cat(x, y) {\n  const dx = x - 32;\n  const dy = y - 66;\n  const head = (dx / 22) ** 2 + (dy / 19) ** 2 \u003c 1;\n  const ears = inPoly(x, y, [11, 60, 13, 34, 28, 50]) || inPoly(x, y, [53, 60, 51, 34, 36, 50]);\n  const eyes = ((abs(dx) - 8.5) / 4.6) ** 2 + ((dy + 3) / 5.5) ** 2 \u003c 1;\n  const nose = inPoly(x, y, [28.5, 71, 35.5, 71, 32, 76]);\n  // Whiskers reach out past the cheeks, two to a side.\n  const ax = abs(dx);\n  const wh = ax > 21 && (abs(dy - 3 + (ax - 21) * 0.35) \u003c 1.6 || abs(dy - 8 - (ax - 21) * 0.2) \u003c 1.6);\n  return ((head || ears) && !eyes && !nose) || wh;\n}\nconst BOLT = [40, 0, 58, 0, 38, 48, 55, 48, 14, 128, 26, 66, 8, 66];\nconst bolt = (x, y) => inPoly(x, y, BOLT);\n// The sea, with one wave standing up and curling over to the left.\nfunction wave(x, y) {\n  const sea = y > 77 + 2.5 * sin(x * 0.35 + 1);\n  const back = x > 28 && y > 40 + (x - 28) ** 2 / 20;\n  const curl = hypot(x - 29, y - 52) \u003c 14 && hypot(x - 24, y - 60) > 6.5 && y \u003c 64;\n  const face = y > 56 && x > 31 - (y - 58) * 0.9 && x \u003c 36;\n  return sea || back || curl || face;\n}\nconst DRAWINGS = [heart, star, cat, bolt, wave];\n// How the fingertip colours each one in: the angle of its strokes.\nconst STROKE = [0.35, -0.5, 0, 1.25, 0.12];\n\nexport function setup(params) {\n  params.sq = {\n    p: new Float32Array(NS),\n    on: new Uint8Array(NS),\n    tOn: new Float32Array(NS),\n    tOff: new Float32Array(NS),\n    jit: new Float32Array(NS),\n    r: new Float32Array(N),\n    g: new Float32Array(N),\n    b: new Float32Array(N),\n    own: new Int32Array(N),\n    started: false,\n  };\n  const S = params.sq;\n  for (let i = 0; i \u003c NS; i++) S.jit[i] = GLA + GLB * hash(i);\n}\n\n// The fingertip's path: strokes back and forth across the shape at an angle,\n// a little different each time.\nfunction load(S, d) {\n  const fn = DRAWINGS[d];\n  const a = STROKE[d] + (Math.random() - 0.5) * 0.3;\n  const ux = cos(a);\n  const uy = sin(a);\n  const pts = [];\n  let m = 0;\n  for (let s = -76; s \u003c= 76; s += 6, m++) {\n    const segs = [];\n    let t0 = null;\n    for (let t = -76; t \u003c= 77; t++) {\n      const x = 32 - uy * s + ux * t;\n      const y = 64 + ux * s + uy * t;\n      const inside = t \u003c 77 && x >= 0 && x \u003c W && y >= 0 && y \u003c H && fn(x, y);\n      if (inside && t0 === null) t0 = t;\n      if (!inside && t0 !== null) {\n        segs.push(t0, t - 1);\n        t0 = null;\n      }\n    }\n    if (m & 1) segs.reverse();\n    for (const t of segs) pts.push(32 - uy * s + ux * t, 64 + ux * s + uy * t);\n  }\n  // Each sequin in the shape turns when the fingertip first comes within reach.\n  let len = 0;\n  for (let i = 2; i \u003c pts.length; i += 2) len += hypot(pts[i] - pts[i - 2], pts[i + 1] - pts[i - 1]);\n  for (let n = 0; n \u003c NS; n++) {\n    S.tOn[n] = 1e9;\n    const cx = SX[n];\n    const cy = SY[n];\n    if (cx \u003c 0 || cx >= W || cy \u003c 0 || cy >= H || !fn(cx, cy)) continue;\n    let at = 0;\n    let hit = len;\n    for (let i = 0; i + 2 \u003c pts.length; i += 2) {\n      const dx = pts[i + 2] - pts[i];\n      const dy = pts[i + 3] - pts[i + 1];\n      const l = hypot(dx, dy) || 1e-6;\n      const fx = pts[i] - cx;\n      const fy = pts[i + 1] - cy;\n      const bb = (fx * dx + fy * dy) / l;\n      const cc = fx * fx + fy * fy - REACH * REACH;\n      const disc = bb * bb - cc;\n      if (disc >= 0) {\n        const t = cc \u003c= 0 ? 0 : -bb - sqrt(disc);\n        if (t >= 0 && t \u003c= l) {\n          hit = at + t;\n          break;\n        }\n      }\n      at += l;\n    }\n    S.tOn[n] = (0.1 + (hit / len) * 0.86) * TD;\n  }\n  // The palm comes down from the top, its lower edge a little uneven.\n  const lean = Math.random() - 0.5;\n  for (let n = 0; n \u003c NS; n++) S.tOff[n] = clamp((SY[n] + 10 + 5 * sin(SX[n] * 0.09 + lean * 3) + lean * (SX[n] - 32) * 0.3) / (H + 24), 0, 1) * TS * 0.9;\n}\n\nfunction sweep(S) {\n  if (S.c \u003c TD + TH) S.c = TD + TH;\n}\n\nexport function update(dt, input, params) {\n  if (!params.sq) setup(params);\n  const S = params.sq;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.hue = clamp(k[0], 0, 1);\n  S.rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, NDRAW - 1);\n  S.lamp = clamp(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    S.base = base;\n    S.count = -1;\n    // Open on the drawing before, just finished, a little before the palm.\n    load(S, (base + NDRAW - 1) % NDRAW);\n    S.c = TD + TH - 2.4 * S.rate;\n    for (let i = 0; i \u003c NS; i++) {\n      S.on[i] = S.tOn[i] \u003c= S.c ? 1 : 0;\n      S.p[i] = S.on[i];\n    }\n  }\n  if (base !== S.base) {\n    S.base = base;\n    S.count = -1;\n    sweep(S);\n  }\n  if (input.btnPressed && input.btnPressed[0]) sweep(S);\n  S.c += dt * S.rate;\n  if (S.c >= TC) {\n    S.c -= TC;\n    S.count++;\n    load(S, (S.base + S.count + NDRAW * 8) % NDRAW);\n  }\n  const { p, on, tOn, tOff } = S;\n  const c = S.c;\n  const sw = c - TD - TH;\n  for (let i = 0; i \u003c NS; i++) {\n    if (sw \u003c 0) {\n      if (c >= tOn[i]) on[i] = 1;\n    } else if (sw >= tOff[i]) on[i] = 0;\n    const step = (dt * S.rate) / FL;\n    p[i] = on[i] ? min(1, p[i] + step) : max(0, p[i] - step);\n  }\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function draw(display, params) {\n  const S = params.sq;\n  if (!S || !S.started) return;\n  const { p, jit, r, g, b, own } = S;\n  r.fill(0);\n  g.fill(0);\n  b.fill(0);\n  own.fill(-1);\n  // The lamp stands above the cushion, from upper left over to upper right.\n  const ang = PI * (0.78 - 0.56 * S.lamp);\n  const lx = cos(ang);\n  const ly = -sin(ang);\n  const tint = hsv((0.9 + S.hue) % 1, 0.9, 1);\n  for (let n = 0; n \u003c NS; n++) {\n    const cx = SX[n];\n    const cy = SY[n];\n    const cs = cos(PI * p[n]);\n    const back = cs \u003c 0;\n    const sy = max(0.55, R * abs(cs));\n    const edge = abs(cs) \u003c 0.4;\n    const x0 = max(0, Math.ceil(cx - R - 0.5));\n    const x1 = min(W - 1, floor(cx + R - 0.5));\n    const y0 = max(0, Math.ceil(cy - sy - 0.5));\n    const y1 = min(H - 1, floor(cy + sy - 0.5));\n    // The sheen: brighter toward the lamp, falling off to the cushion's sides.\n    const qx = cx - 32 - 34 * lx;\n    const qy = (cy - 64 - 56 * ly) * 0.6;\n    const sh = min(1, 0.76 + 0.3 * Math.exp(-(qx * qx + qy * qy) / 1500)) * (1 - 0.12 * ((cx - 32) / 36) ** 2);\n    const gl = jit[n];\n    // Tipping over, a sequin's face swings through the lamp's reflection.\n    const tip = 1 + 0.5 * sin(PI * p[n]) ** 2;\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const u = (x + 0.5 - cx) / R;\n        const v = (y + 0.5 - cy) / sy;\n        if (u * u + v * v > 1) continue;\n        const i = y * W + x;\n        own[i] = n;\n        if (edge) {\n          // Edge on: a thin line of bare metal.\n          const e = 150 * sh;\n          r[i] = e;\n          g[i] = e;\n          b[i] = e * 1.05;\n          continue;\n        }\n        const sv = (y + 0.5 - cy - SHOW * abs(cs)) / (0.9 * sy);\n        const su = (x + 0.5 - cx) / (0.9 * R);\n        const dot = su * lx + sv * ly;\n        const hx = su + SPOT * lx;\n        const hy = sv + SPOT * ly;\n        const hl = max(0, 1 - (hx * hx + hy * hy) / SPOT2);\n        let val = ((1 - 0.5 * dot) * gl + 0.7 * hl) * tip;\n        if (u * u + v * v > RIM) val *= dot > 0 ? 0.2 : 1.1;\n        if (!back) {\n          const e = 255 * val * sh;\n          r[i] = e * 0.9;\n          g[i] = e * 0.94;\n          b[i] = e;\n        } else {\n          // The coloured side is darker, but its highlight still bites.\n          const e = 255 * val * sh * DIM;\n          const w = 140 * sh * hl * hl * gl;\n          r[i] = e * tint[0] + w * (0.5 + 0.5 * tint[0]);\n          g[i] = e * tint[1] + w * (0.5 + 0.5 * tint[1]);\n          b[i] = e * tint[2] + w * (0.5 + 0.5 * tint[2]);\n        }\n      }\n  }\n  // Shadows: the lamp is above, so a sequin lying over another throws a thin\n  // shadow down from its lower edge onto the one below.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const f = y > 0 && own[i - W] > own[i] ? 0.1 : 1;\n      if (own[i] \u003c 0) {\n        display.setPixel(x, y, 10 * f, 9 * f, 12 * f);\n        continue;\n      }\n      display.setPixel(x, y, min(255, r[i] * f), min(255, g[i] * f), min(255, b[i] * f));\n    }\n}\n","layer":{"id":"layer-sequins","type":"code","name":"sequins","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sequins\n// Family:  textile\n// Idea:    A cushion of reversible flip sequins fills the panel under a lamp, silver scales in staggered rows, and an unseen fingertip strokes a heart, a star, a cat's face, a lightning bolt and a wave into it one after another, each sequin it passes turning edge on and over to its coloured side, until a flat palm sweeps the cushion silver again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after reversible flip-sequin fabric\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drawing=0..4, Lamp=0..1\n//\n// Knob 1: Hue. The colour on the back of the sequins: hot pink at 0, then on through red, gold, green and blue to violet, and pink again at 1.\n// Knob 2: Speed. How fast the fingertip draws and the palm sweeps: at 2 a drawing takes about four seconds and a round seven; at 0.2 everything runs ten times slower.\n// Knob 3: Drawing. What the fingertip draws next: a heart, a star, a cat's face, a lightning bolt or a wave, the rest following in that order. Turning it sweeps the cushion silver and starts the new one.\n// Knob 4: Lamp. Where the lamp stands above the cushion, from upper left over the top to upper right: the highlight in every cupped sequin slides the other way, and the bright sheen across the cushion follows the lamp.\n// Buttons: K1 tap sweeps the palm down the cushion now and the next drawing starts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst NDRAW = 5;\nconst { min, max, sqrt, sin, cos, abs, floor, round, hypot, atan2, PI } = Math;\n// Sequins sit 5 LEDs apart in a row and rows 3 LEDs apart, every other row\n// shifted by half a sequin. Each is a disc a little wider than the spacing,\n// so the row above covers the top of the row below.\nconst PX = 5;\nconst PY = 3;\nconst R = 2.8;\nconst NC = floor(W / PX) + 2;\n// The round at Speed 2, in seconds: draw, hold, sweep, rest.\nconst TD = 4.2;\nconst TH = 1.8;\nconst TS = 0.8;\nconst TR = 0.3;\nconst TC = TD + TH + TS + TR;\n// One sequin takes this long to turn over.\nconst FL = 0.16;\n// How far the fingertip reaches, in LEDs.\nconst REACH = 4.2;\n// The shading of one sequin. The part that shows sits low on the disc. The\n// sequins are cupped, so the lamp lights the inside wall away from it, where a\n// tight highlight sits. The rim nearest the lamp falls into shadow.\nconst SHOW = 0.5;\nconst SPOT = 0.45;\nconst SPOT2 = 0.15;\nconst RIM = 0.62;\n// Each sequin is tipped a little its own way and catches more or less lamp.\nconst GLA = 0.35;\nconst GLB = 0.9;\n// The coloured side reflects this share of what the silver side does.\nconst DIM = 0.24;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The sequins, listed bottom row first, so a later one lies over an earlier one.\nconst SX = [];\nconst SY = [];\nconst ROWS = floor(H / PY) + 1;\nfor (let k = ROWS - 1; k >= -1; k--)\n  for (let j = -1; j \u003c NC - 1; j++) {\n    SX.push(j * PX + ((k & 1) ? 0 : PX / 2));\n    SY.push(k * PY + 1.5);\n  }\nconst NS = SX.length;\n\n// The drawings, as shapes in LED coordinates: true inside.\nfunction inPoly(x, y, pts) {\n  let c = false;\n  for (let i = 0, j = pts.length - 2; i \u003c pts.length; j = i, i += 2) {\n    const xi = pts[i];\n    const yi = pts[i + 1];\n    const xj = pts[j];\n    const yj = pts[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) c = !c;\n  }\n  return c;\n}\nfunction heart(x, y) {\n  const X = (x - 32) / 26;\n  const Y = (35 - y) / 26;\n  const a = X * X + Y * Y - 1;\n  return a * a * a - X * X * Y * Y * Y \u003c= 0;\n}\nfunction star(x, y) {\n  const dx = x - 32;\n  const dy = y - 66;\n  const r = hypot(dx, dy);\n  const t = (((atan2(dx, -dy) / (2 * PI)) * 5) % 1 + 1) % 1;\n  const e = abs(t - 0.5) * 2;\n  return r \u003c 13 + 19 * e * e;\n}\nfunction cat(x, y) {\n  const dx = x - 32;\n  const dy = y - 66;\n  const head = (dx / 22) ** 2 + (dy / 19) ** 2 \u003c 1;\n  const ears = inPoly(x, y, [11, 60, 13, 34, 28, 50]) || inPoly(x, y, [53, 60, 51, 34, 36, 50]);\n  const eyes = ((abs(dx) - 8.5) / 4.6) ** 2 + ((dy + 3) / 5.5) ** 2 \u003c 1;\n  const nose = inPoly(x, y, [28.5, 71, 35.5, 71, 32, 76]);\n  // Whiskers reach out past the cheeks, two to a side.\n  const ax = abs(dx);\n  const wh = ax > 21 && (abs(dy - 3 + (ax - 21) * 0.35) \u003c 1.6 || abs(dy - 8 - (ax - 21) * 0.2) \u003c 1.6);\n  return ((head || ears) && !eyes && !nose) || wh;\n}\nconst BOLT = [40, 0, 58, 0, 38, 48, 55, 48, 14, 128, 26, 66, 8, 66];\nconst bolt = (x, y) => inPoly(x, y, BOLT);\n// The sea, with one wave standing up and curling over to the left.\nfunction wave(x, y) {\n  const sea = y > 77 + 2.5 * sin(x * 0.35 + 1);\n  const back = x > 28 && y > 40 + (x - 28) ** 2 / 20;\n  const curl = hypot(x - 29, y - 52) \u003c 14 && hypot(x - 24, y - 60) > 6.5 && y \u003c 64;\n  const face = y > 56 && x > 31 - (y - 58) * 0.9 && x \u003c 36;\n  return sea || back || curl || face;\n}\nconst DRAWINGS = [heart, star, cat, bolt, wave];\n// How the fingertip colours each one in: the angle of its strokes.\nconst STROKE = [0.35, -0.5, 0, 1.25, 0.12];\n\nexport function setup(params) {\n  params.sq = {\n    p: new Float32Array(NS),\n    on: new Uint8Array(NS),\n    tOn: new Float32Array(NS),\n    tOff: new Float32Array(NS),\n    jit: new Float32Array(NS),\n    r: new Float32Array(N),\n    g: new Float32Array(N),\n    b: new Float32Array(N),\n    own: new Int32Array(N),\n    started: false,\n  };\n  const S = params.sq;\n  for (let i = 0; i \u003c NS; i++) S.jit[i] = GLA + GLB * hash(i);\n}\n\n// The fingertip's path: strokes back and forth across the shape at an angle,\n// a little different each time.\nfunction load(S, d) {\n  const fn = DRAWINGS[d];\n  const a = STROKE[d] + (Math.random() - 0.5) * 0.3;\n  const ux = cos(a);\n  const uy = sin(a);\n  const pts = [];\n  let m = 0;\n  for (let s = -76; s \u003c= 76; s += 6, m++) {\n    const segs = [];\n    let t0 = null;\n    for (let t = -76; t \u003c= 77; t++) {\n      const x = 32 - uy * s + ux * t;\n      const y = 64 + ux * s + uy * t;\n      const inside = t \u003c 77 && x >= 0 && x \u003c W && y >= 0 && y \u003c H && fn(x, y);\n      if (inside && t0 === null) t0 = t;\n      if (!inside && t0 !== null) {\n        segs.push(t0, t - 1);\n        t0 = null;\n      }\n    }\n    if (m & 1) segs.reverse();\n    for (const t of segs) pts.push(32 - uy * s + ux * t, 64 + ux * s + uy * t);\n  }\n  // Each sequin in the shape turns when the fingertip first comes within reach.\n  let len = 0;\n  for (let i = 2; i \u003c pts.length; i += 2) len += hypot(pts[i] - pts[i - 2], pts[i + 1] - pts[i - 1]);\n  for (let n = 0; n \u003c NS; n++) {\n    S.tOn[n] = 1e9;\n    const cx = SX[n];\n    const cy = SY[n];\n    if (cx \u003c 0 || cx >= W || cy \u003c 0 || cy >= H || !fn(cx, cy)) continue;\n    let at = 0;\n    let hit = len;\n    for (let i = 0; i + 2 \u003c pts.length; i += 2) {\n      const dx = pts[i + 2] - pts[i];\n      const dy = pts[i + 3] - pts[i + 1];\n      const l = hypot(dx, dy) || 1e-6;\n      const fx = pts[i] - cx;\n      const fy = pts[i + 1] - cy;\n      const bb = (fx * dx + fy * dy) / l;\n      const cc = fx * fx + fy * fy - REACH * REACH;\n      const disc = bb * bb - cc;\n      if (disc >= 0) {\n        const t = cc \u003c= 0 ? 0 : -bb - sqrt(disc);\n        if (t >= 0 && t \u003c= l) {\n          hit = at + t;\n          break;\n        }\n      }\n      at += l;\n    }\n    S.tOn[n] = (0.1 + (hit / len) * 0.86) * TD;\n  }\n  // The palm comes down from the top, its lower edge a little uneven.\n  const lean = Math.random() - 0.5;\n  for (let n = 0; n \u003c NS; n++) S.tOff[n] = clamp((SY[n] + 10 + 5 * sin(SX[n] * 0.09 + lean * 3) + lean * (SX[n] - 32) * 0.3) / (H + 24), 0, 1) * TS * 0.9;\n}\n\nfunction sweep(S) {\n  if (S.c \u003c TD + TH) S.c = TD + TH;\n}\n\nexport function update(dt, input, params) {\n  if (!params.sq) setup(params);\n  const S = params.sq;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.hue = clamp(k[0], 0, 1);\n  S.rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, NDRAW - 1);\n  S.lamp = clamp(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    S.base = base;\n    S.count = -1;\n    // Open on the drawing before, just finished, a little before the palm.\n    load(S, (base + NDRAW - 1) % NDRAW);\n    S.c = TD + TH - 2.4 * S.rate;\n    for (let i = 0; i \u003c NS; i++) {\n      S.on[i] = S.tOn[i] \u003c= S.c ? 1 : 0;\n      S.p[i] = S.on[i];\n    }\n  }\n  if (base !== S.base) {\n    S.base = base;\n    S.count = -1;\n    sweep(S);\n  }\n  if (input.btnPressed && input.btnPressed[0]) sweep(S);\n  S.c += dt * S.rate;\n  if (S.c >= TC) {\n    S.c -= TC;\n    S.count++;\n    load(S, (S.base + S.count + NDRAW * 8) % NDRAW);\n  }\n  const { p, on, tOn, tOff } = S;\n  const c = S.c;\n  const sw = c - TD - TH;\n  for (let i = 0; i \u003c NS; i++) {\n    if (sw \u003c 0) {\n      if (c >= tOn[i]) on[i] = 1;\n    } else if (sw >= tOff[i]) on[i] = 0;\n    const step = (dt * S.rate) / FL;\n    p[i] = on[i] ? min(1, p[i] + step) : max(0, p[i] - step);\n  }\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function draw(display, params) {\n  const S = params.sq;\n  if (!S || !S.started) return;\n  const { p, jit, r, g, b, own } = S;\n  r.fill(0);\n  g.fill(0);\n  b.fill(0);\n  own.fill(-1);\n  // The lamp stands above the cushion, from upper left over to upper right.\n  const ang = PI * (0.78 - 0.56 * S.lamp);\n  const lx = cos(ang);\n  const ly = -sin(ang);\n  const tint = hsv((0.9 + S.hue) % 1, 0.9, 1);\n  for (let n = 0; n \u003c NS; n++) {\n    const cx = SX[n];\n    const cy = SY[n];\n    const cs = cos(PI * p[n]);\n    const back = cs \u003c 0;\n    const sy = max(0.55, R * abs(cs));\n    const edge = abs(cs) \u003c 0.4;\n    const x0 = max(0, Math.ceil(cx - R - 0.5));\n    const x1 = min(W - 1, floor(cx + R - 0.5));\n    const y0 = max(0, Math.ceil(cy - sy - 0.5));\n    const y1 = min(H - 1, floor(cy + sy - 0.5));\n    // The sheen: brighter toward the lamp, falling off to the cushion's sides.\n    const qx = cx - 32 - 34 * lx;\n    const qy = (cy - 64 - 56 * ly) * 0.6;\n    const sh = min(1, 0.76 + 0.3 * Math.exp(-(qx * qx + qy * qy) / 1500)) * (1 - 0.12 * ((cx - 32) / 36) ** 2);\n    const gl = jit[n];\n    // Tipping over, a sequin's face swings through the lamp's reflection.\n    const tip = 1 + 0.5 * sin(PI * p[n]) ** 2;\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const u = (x + 0.5 - cx) / R;\n        const v = (y + 0.5 - cy) / sy;\n        if (u * u + v * v > 1) continue;\n        const i = y * W + x;\n        own[i] = n;\n        if (edge) {\n          // Edge on: a thin line of bare metal.\n          const e = 150 * sh;\n          r[i] = e;\n          g[i] = e;\n          b[i] = e * 1.05;\n          continue;\n        }\n        const sv = (y + 0.5 - cy - SHOW * abs(cs)) / (0.9 * sy);\n        const su = (x + 0.5 - cx) / (0.9 * R);\n        const dot = su * lx + sv * ly;\n        const hx = su + SPOT * lx;\n        const hy = sv + SPOT * ly;\n        const hl = max(0, 1 - (hx * hx + hy * hy) / SPOT2);\n        let val = ((1 - 0.5 * dot) * gl + 0.7 * hl) * tip;\n        if (u * u + v * v > RIM) val *= dot > 0 ? 0.2 : 1.1;\n        if (!back) {\n          const e = 255 * val * sh;\n          r[i] = e * 0.9;\n          g[i] = e * 0.94;\n          b[i] = e;\n        } else {\n          // The coloured side is darker, but its highlight still bites.\n          const e = 255 * val * sh * DIM;\n          const w = 140 * sh * hl * hl * gl;\n          r[i] = e * tint[0] + w * (0.5 + 0.5 * tint[0]);\n          g[i] = e * tint[1] + w * (0.5 + 0.5 * tint[1]);\n          b[i] = e * tint[2] + w * (0.5 + 0.5 * tint[2]);\n        }\n      }\n  }\n  // Shadows: the lamp is above, so a sequin lying over another throws a thin\n  // shadow down from its lower edge onto the one below.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const f = y > 0 && own[i - W] > own[i] ? 0.1 : 1;\n      if (own[i] \u003c 0) {\n        display.setPixel(x, y, 10 * f, 9 * f, 12 * f);\n        continue;\n      }\n      display.setPixel(x, y, min(255, r[i] * f), min(255, g[i] * f), min(255, b[i] * f));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Drawing=0..4, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour on the back of the sequins: hot pink at 0, then on through red, gold, green and blue to violet, and pink again at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the fingertip draws and the palm sweeps: at 2 a drawing takes about four seconds and a round seven; at 0.2 everything runs ten times slower."},{"name":"Drawing","min":0,"max":4,"about":"What the fingertip draws next: a heart, a star, a cat's face, a lightning bolt or a wave, the rest following in that order. Turning it sweeps the cushion silver and starts the new one."},{"name":"Lamp","min":0,"max":1,"about":"Where the lamp stands above the cushion, from upper left over the top to upper right: the highlight in every cupped sequin slides the other way, and the bright sheen across the cushion follows the lamp."}],"start":[0,2,0,0.06],"measures":{"motion":0.1482,"detail":0.3266,"edges":0.6744,"complexity":1.7886,"coverage":0.647,"colour":0.0886,"drift":0.2495},"knobResponse":[0.0553,0.0492,0.2354,0.1678]},{"slug":"server-rack","title":"Server Rack","family":"circuit","round":18,"note":"앞에서 본 42U 서버 랙이 패널을 채워요. 맨 위 스위치로 들어온 트래픽이 서버를 타고 내려가며 드라이브 불을 켜고, 백업이 스토리지 선반의 드라이브를 차례로 채워요. K4 를 올리면 바닥 타일에서 올라온 푸른 냉기 빛이 아래쪽 앞판을 물들여요.","idea":"A 42U server rack seen from the front fills the panel, and traffic that reaches the switch at the top ripples down through the servers as bursts of drive light while a backup sweeps the storage shelves and the UPS at the bottom shows the load.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Server Rack\n// Family:  circuit\n// Idea:    A 42U server rack seen from the front fills the panel, and traffic that reaches the switch at the top ripples down through the servers as bursts of drive light while a backup sweeps the storage shelves and the UPS at the bottom shows the load.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the processor activity lights on the front of the Apple Xserve\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Load=0..1, Aisle=0..1\n//\n// Knob 1: Hue. The colour of the status lights: green at 0, then blue, violet and orange, green again at 1; a failed drive stays amber.\n// Knob 2: Speed. How fast the rack runs: at 2 the load rises and falls every 12 s, and every 10 s the backup writes all 65 storage drives in 4 s.\n// Knob 3: Load. At 0 each load wave lifts the meters from nearly empty to most of the way up; at 1 the rack is saturated, every meter stays near the top and the drive lights flicker about five times as often.\n// Knob 4: Aisle. Blue light from the perforated floor tiles in front of the rack, from nothing at 0 to a glow that washes the lower faceplates at 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rack units are 3 rows. Equipment sits between the posts, ears on columns 5 and 58.\nconst U = 3;\nconst X0 = 6;\nconst X1 = 57;\n// Top to bottom, unit by unit: what is mounted and how many units it takes.\nconst RACK = [\n  [\"patch\", 1], [\"manager\", 1], [\"switch\", 2], [\"manager\", 1],\n  [\"s1\", 1], [\"s1\", 1], [\"s1\", 1], [\"s1\", 1], [\"blank\", 1],\n  [\"s2\", 2], [\"s2\", 2], [\"s1\", 1], [\"s1\", 1], [\"s2\", 2], [\"blank\", 1],\n  [\"s2\", 2], [\"s1\", 1], [\"s1\", 1], [\"blank\", 1], [\"s2\", 2],\n  [\"head\", 2], [\"shelf\", 2], [\"shelf\", 2], [\"blank\", 1],\n  [\"s2\", 2], [\"kvm\", 1], [\"s1\", 1], [\"blank\", 1], [\"ups\", 3],\n];\n// Patch cord colours: blue, yellow, red, green, white, grey, orange, violet, cyan.\nconst CORDS = [[40, 96, 230], [236, 200, 40], [220, 44, 40], [40, 186, 76], [210, 210, 210], [128, 128, 140], [244, 124, 24], [150, 64, 210], [40, 200, 214]];\nconst AMBER = [255, 138, 0];\nconst BLUE = [60, 120, 255];\n// How much of a busy server's light shows through the holes of its bezel, how bright a\n// written drive's light pipe is, and how much of a lamp spills onto each LED of metal\n// beside it (the corners get 0.4 of that).\nconst BLEED = 0.2;\nconst PIPE = 0.8;\nconst SPILL = 0.25;\nconst SPILL_AT = [-1, 1, -W, W, -W - 1, -W + 1, W - 1, W + 1];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5) * 255, f(3) * 255, f(1) * 255];\n}\n\n// The still rack: faceplates, posts, caddies and cords, and the list of every light on it.\nfunction build(P) {\n  const base = P.base;\n  const wash = P.wash;\n  const put = (x, y, c, refl = 0.5) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    base[p * 3] = c[0];\n    base[p * 3 + 1] = c[1];\n    base[p * 3 + 2] = c[2];\n    wash[p] = refl;\n  };\n  const metal = (x, y, v, refl) => {\n    const g = v + 2 * (hash(x, y, 3) - 0.5);\n    put(x, y, [g, g + 1, g + 3], refl);\n  };\n  const leds = [];\n  const led = (x, y, kind, dev, arg = 0) => leds.push({ p: y * W + x, kind, dev, arg, on: 0, next: 0 });\n  P.devs = [];\n  P.caddies = [];\n  P.holes = [];\n  // The rack frame: side panels, posts with square holes, and the cable channels between.\n  for (let y = 0; y \u003c H; y++) {\n    for (const x of [0, 63]) metal(x, y, 11, 0.3);\n    for (const x of [1, 2, 3, 60, 61, 62]) put(x, y, [5, 5, 6], 0.15);\n    for (const x of [4, 59]) {\n      const hole = (y - 1) % U !== 1 && y > 0 && y \u003c H - 1;\n      if (hole) put(x, y, [3, 3, 4], 0.1);\n      else metal(x, y, 19, 0.9);\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    metal(x, 0, 14, 0.4);\n    metal(x, H - 1, 14, 1.2);\n  }\n  let row = 1;\n  RACK.forEach(([type, units], di) => {\n    const top = row;\n    const h = units * U;\n    row += h;\n    const dev = { type, top, h, load: 0.2, kick: 0, act: 0.2, flash: -1, phase: hash(di, 1, 9) };\n    P.devs.push(dev);\n    const d = P.devs.length - 1;\n    for (let y = top; y \u003c top + h; y++) {\n      metal(5, y, 23, 1);\n      metal(58, y, 23, 1);\n      // Each faceplate catches light on its top edge and has a dark seam under it.\n      const v = type === \"blank\" ? 13 : 16;\n      for (let x = X0; x \u003c= X1; x++) metal(x, y, y === top ? v + 7 : y === top + h - 1 ? v - 5 : v, y === top ? 1 : 0.6);\n    }\n    // Ear screws.\n    for (const x of [5, 58]) {\n      put(x, top + 1, [44, 44, 48], 1);\n      if (h > 3) put(x, top + h - 2, [44, 44, 48], 1);\n    }\n    const vent = (x0, x1, y) => {\n      for (let x = x0; x \u003c= x1; x++) {\n        metal(x, y, (x + y) % 2 ? 9 : 20, 0.5);\n        if ((x + y) % 2 && type[0] === \"s\") P.holes.push(y * W + x, d);\n      }\n    };\n    if (type === \"blank\") {\n      for (let x = X0; x \u003c= X1; x++) metal(x, top, 20, 0.9);\n    } else if (type === \"manager\") {\n      for (let y = top; y \u003c top + h; y++) for (let x = X0; x \u003c= X1; x++) put(x, y, [7, 7, 8], 0.2);\n      for (let x = X0 + 1; x \u003c= X1; x += 4) for (let y = top; y \u003c top + h; y++) put(x, y, y === top ? [24, 24, 27] : [14, 14, 16], 0.4);\n    } else if (type === \"patch\") {\n      for (let i = 0; i \u003c 24; i++) {\n        const x = X0 + 2 * i + Math.floor(i / 6);\n        put(x, top + 1, [4, 4, 5], 0.1);\n        put(x + 1, top + 1, [4, 4, 5], 0.1);\n        put(x, top + 2, [30, 30, 33], 0.6);\n      }\n    } else if (type === \"switch\") {\n      for (let i = 0; i \u003c 24; i++) {\n        const x = X0 + 2 * i + Math.floor(i / 6);\n        for (const [r, side] of [[2, 1], [3, 0]]) {\n          put(x, top + r, [4, 4, 5], 0.1);\n          put(x + 1, top + r, [4, 4, 5], 0.1);\n          led(x, top + (side ? 1 : 4), \"port\", d, i * 2 + side);\n        }\n      }\n      for (let i = 0; i \u003c 4; i++) led(X0 + 40 + 3 * i, top + 5, \"sfp\", d, i);\n      led(X0 + 1, top, \"pwr\", d);\n      led(X0 + 3, top, \"stat\", d);\n    } else if (type === \"s1\" || type === \"s2\") {\n      const m = type === \"s1\" ? [1] : [1, 3];\n      for (let y = top; y \u003c top + h; y++) if (!m.includes(y - top)) vent(14, 37, y);\n      // Load meters of eight two-LED segments, one per processor.\n      for (const r of m) for (let k = 0; k \u003c 16; k++) led(14 + 3 * (k >> 1) + (k & 1), top + r, \"meter\", d, (k >> 1) + 8 * (r > 1));\n      led(9, top + 1, \"pwr\", d);\n      led(11, top + 1, \"stat\", d);\n      led(12, top + h - 2, \"id\", d);\n      if (type === \"s1\") {\n        for (let b = 0; b \u003c 9; b++) {\n          const x = 39 + 2 * b;\n          for (let y = top; y \u003c top + 3; y++) {\n            metal(x, y, 27, 0.8);\n            metal(x + 1, y, 33, 1);\n          }\n          led(x + 1, top, \"act\", d);\n          led(x + 1, top + 2, \"dstat\", d);\n        }\n      } else {\n        for (let b = 0; b \u003c 6; b++) {\n          const x = 39 + 9 * (b % 2);\n          const y0 = top + 2 * Math.floor(b / 2);\n          for (let y = y0; y \u003c y0 + 2; y++)\n            for (let i = 0; i \u003c 8; i++) metal(x + i, y, i === 0 ? 34 : (i + y) % 3 ? 26 : 21, 0.8);\n          led(x + 7, y0, \"act\", d);\n          led(x + 7, y0 + 1, \"dstat\", d);\n        }\n      }\n    } else if (type === \"head\" || type === \"shelf\") {\n      const first = type === \"head\" ? 22 : X0;\n      const count = type === \"head\" ? 17 : 24;\n      if (type === \"head\") {\n        // The controller: a small backlit LCD that shows the array and any rebuild.\n        for (let y = top + 1; y \u003c= top + 2; y++) for (let x = 8; x \u003c= 19; x++) put(x, y, [8, 22, 24], 0.3);\n        P.lcd = { x: 8, y: top + 1 };\n        led(8, top + 4, \"pwr\", d);\n        led(10, top + 4, \"stat\", d);\n        led(12, top + 4, \"cache\", d);\n      } else {\n        led(55, top + 1, \"pwr\", d);\n        led(55, top + 3, \"stat\", d);\n      }\n      for (let c = 0; c \u003c count; c++) {\n        const x = first + 2 * c;\n        for (let y = top; y \u003c top + 5; y++) {\n          metal(x, y, y === top ? 34 : 27, 0.8);\n          metal(x + 1, y, 22, 0.6);\n        }\n        P.caddies.push({ x, top, dev: d });\n        led(x, top + 5, \"cact\", d, P.caddies.length - 1);\n        led(x + 1, top + 5, \"cstat\", d, P.caddies.length - 1);\n      }\n    } else if (type === \"kvm\") {\n      for (let x = 20; x \u003c= 43; x++) metal(x, top + 1, 34, 1);\n      led(10, top + 1, \"pwr\", d);\n    } else if (type === \"ups\") {\n      // The UPS: an LCD with the load and battery bars, three lamps and a wide grille.\n      for (let y = top + 2; y \u003c= top + 6; y++) for (let x = 9; x \u003c= 30; x++) put(x, y, [14, 26, 40], 0.3);\n      for (let k = 0; k \u003c 20; k++) {\n        led(10 + k, top + 3, \"upsload\", d, k);\n        led(10 + k, top + 4, \"upsload\", d, k);\n        led(10 + k, top + 6, \"upsbatt\", d, k);\n      }\n      led(34, top + 3, \"pwr\", d);\n      led(36, top + 3, \"stat\", d);\n      for (let y = top + 1; y \u003c top + h - 1; y++) vent(40, 56, y);\n      for (let x = X0; x \u003c= X1; x++) metal(x, top + h - 1, 22, 1);\n    }\n    // A front network port on each server, fed from a side channel.\n    if (type[0] === \"s\" || type === \"head\") {\n      put(X0, top + 1, [4, 4, 5], 0.1);\n      put(X1, top + 1, [4, 4, 5], 0.1);\n    }\n  });\n  // Patch cords: the switch's upper ports run straight up to the patch panel; the\n  // lower ports drop into the manager, run out to the side channels and down to a server.\n  const sw = P.devs[2];\n  const mg = P.devs[3];\n  const targets = P.devs.map((d, i) => i).filter((i) => P.devs[i].type[0] === \"s\" || P.devs[i].type === \"head\");\n  let left = 0;\n  let right = 0;\n  P.linked = new Uint8Array(48);\n  for (let i = 0; i \u003c 24; i++) {\n    const x = X0 + 2 * i + Math.floor(i / 6);\n    const c = CORDS[(i * 5 + 2) % CORDS.length];\n    const dim = (k) => [c[0] * k, c[1] * k, c[2] * k];\n    if (i % 7 !== 5) {\n      P.linked[i * 2 + 1] = 1;\n      put(x, sw.top + 2, dim(0.5), 0.2);\n      put(x + 1, sw.top + 2, dim(0.38), 0.2);\n      for (let y = 2; y \u003c sw.top + 1; y++) put(x + 1, y, dim(y \u003c 4 ? 0.5 : 0.36), 0.2);\n      put(x, 2, dim(0.5), 0.2);\n    }\n    if (i % 3 === 1) continue;\n    P.linked[i * 2] = 1;\n    put(x, sw.top + 3, dim(0.5), 0.2);\n    put(x + 1, sw.top + 3, dim(0.38), 0.2);\n    const goLeft = x \u003c 32;\n    const n = goLeft ? left++ : right++;\n    const t = targets[(goLeft ? 2 * n : 2 * n + 1) % targets.length];\n    const ty = P.devs[t].top + 1;\n    const lane = mg.top + (n % 3);\n    const cx = goLeft ? 1 + (n % 3) : 62 - (n % 3);\n    for (let y = sw.top + 4; y \u003c= lane; y++) put(x + 1, y, dim(0.4), 0.2);\n    for (let xx = Math.min(x + 1, cx); xx \u003c= Math.max(x + 1, cx); xx++) put(xx, lane, dim(0.34 + 0.06 * (xx % 2)), 0.2);\n    for (let y = lane; y \u003c= ty; y++) put(cx, y, dim(0.3 + 0.08 * ((y >> 2) % 2)), 0.2);\n    for (let xx = Math.min(cx, goLeft ? X0 : X1); xx \u003c= Math.max(cx, goLeft ? X0 : X1); xx++) put(xx, ty, dim(0.42), 0.2);\n  }\n  P.leds = leds;\n  // The floor tiles' light falls off up the rack and catches bright metal most.\n  for (let y = 0; y \u003c H; y++) {\n    const f = Math.exp(-(H - 1 - y) / 38);\n    for (let x = 0; x \u003c W; x++) P.wash[y * W + x] *= f;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.base = new Float32Array(N * 3);\n  P.wash = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  build(P);\n  Object.assign(P, { t: 0, hue: 0, speed: 2, load: 0, cold: 0.06, bursts: [], sweep: -20, reset: -99, fault: -1, rebuild: 0, nextFault: 30, started: false });\n}\n\n// The rack's load: a wave that rises and falls every 24 rack seconds and lags 45 rows a\n// second down the rack, a base set by Load, and the kicks bursts of traffic leave.\nfunction step(P, dt) {\n  const g = dt * P.speed;\n  P.t += g;\n  const L = P.load;\n  if (Math.random() \u003c g * (0.7 + 2.6 * L)) {\n    const b = { t0: P.t, seed: Math.floor(Math.random() * 1e6), s: 0.4 + 0.6 * Math.random() };\n    P.bursts.push(b);\n    // It comes in on the uplinks and out of a handful of ports at once.\n    for (const l of P.leds)\n      if (l.kind === \"sfp\" || (l.kind === \"port\" && hash(l.arg, b.seed, 6) \u003c 0.3)) {\n        l.on = 1;\n        l.next = P.t + P.speed * 0.08;\n      }\n  }\n  for (const b of P.bursts) {\n    const f0 = (P.t - g - b.t0) * 45;\n    const f1 = (P.t - b.t0) * 45;\n    P.devs.forEach((d, i) => {\n      if (d.top > f0 && d.top \u003c= f1 && hash(i, b.seed, 5) \u003c 0.45 + 0.4 * L) {\n        d.kick += b.s;\n        d.flash = P.t;\n      }\n    });\n  }\n  P.bursts = P.bursts.filter((b) => (P.t - b.t0) * 45 \u003c H);\n  // A burst that reaches a server lights its drives together for a moment, so it is seen going down.\n  for (const l of P.leds)\n    if (l.kind === \"act\" && P.devs[l.dev].flash === P.t) {\n      l.on = 1;\n      l.next = P.t + 0.12 + 0.12 * Math.random();\n    }\n  for (const d of P.devs) {\n    const ph = (P.t - P.t0 - d.top / 45) / 24;\n    const wave = 0.5 - 0.5 * Math.cos(2 * Math.PI * ph);\n    d.kick *= Math.exp(-g / 1.6);\n    const target = clamp(0.03 + 0.62 * L + (0.86 - 0.55 * L) * wave + 0.24 * Math.min(1, d.kick) + 0.05 * Math.sin(P.t * 1.3 + d.phase * 9), 0, 1);\n    d.load += (target - d.load) * Math.min(1, g * 2.5);\n    d.act = clamp(0.12 + 0.6 * d.load + 0.5 * d.kick, 0, 1.5);\n  }\n  // The backup walks the storage drives 8 a rack second, then waits 12 rack seconds.\n  P.sweep += g * 8;\n  if (P.sweep > P.caddies.length + 96) {\n    P.sweep = -6;\n    P.reset = P.t;\n  }\n  // Now and then a drive fails: its light goes amber and a rebuild bar crawls for 36 rack seconds.\n  if (P.fault \u003c 0 && P.t > P.nextFault) {\n    P.fault = Math.floor(Math.random() * P.caddies.length);\n    P.rebuild = 0;\n  }\n  if (P.fault >= 0) {\n    P.rebuild += g / 36;\n    if (P.rebuild >= 1) {\n      P.fault = -1;\n      P.nextFault = P.t + 14 + 30 * Math.random();\n    }\n  }\n  for (const l of P.leds) {\n    if (l.kind !== \"act\" && l.kind !== \"cact\" && l.kind !== \"port\" && l.kind !== \"sfp\") continue;\n    if (P.t \u003c l.next) continue;\n    let a = P.devs[l.dev].act;\n    if (l.kind === \"cact\" && Math.abs(l.arg - P.sweep) \u003c 4) a = 2.5;\n    if (l.kind === \"sfp\") a = 0.5 + L;\n    if (l.kind === \"port\") a = P.devs[4 + ((l.arg * 7) % (P.devs.length - 5))].act;\n    l.on = l.on ? 0 : 1;\n    // A lamp stays lit about a tenth of a second whatever the speed, so a fast rack looks busier.\n    l.next = P.t + (l.on ? P.speed * (0.04 + 0.08 * Math.random()) : (-Math.log(1 - Math.random()) * 0.3) / (a + 0.04));\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.load = clamp(k[2], 0, 1);\n  P.cold = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The rack has run for 4 seconds at the knob's speed when the panel opens, with a\n    // rebuild a third done. At Speed 2 the load wave is at its low point and the backup\n    // on its first drive two seconds later; at other speeds they are further on or behind.\n    P.t0 = 12;\n    P.fault = 40;\n    P.rebuild = 0.3;\n    for (let i = 0; i \u003c 80; i++) step(P, 0.05);\n    P.sweep = -6 + 8 * (P.t - 12);\n  }\n  step(P, dt);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const buf = P.buf;\n  const scheme = hsv((0.33 + P.hue) % 1, 0.8, 1);\n  const cold = P.cold;\n  const { base, wash } = P;\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const w = wash[p] * cold;\n    buf[q] = base[q] + 30 * w;\n    buf[q + 1] = base[q + 1] + 90 * w;\n    buf[q + 2] = base[q + 2] + 210 * w;\n  }\n  const light = (p, c, k, sides = 8) => {\n    buf[p * 3] = c[0] * k;\n    buf[p * 3 + 1] = c[1] * k;\n    buf[p * 3 + 2] = c[2] * k;\n    // Light spills onto the faceplate round a lit lamp.\n    for (let j = sides === 2 ? 2 : 0; j \u003c (sides === 2 ? 4 : 8); j++) {\n      const q = p + SPILL_AT[j];\n      if (q \u003c 0 || q >= N) continue;\n      const v = k * (sides === 2 ? 0.4 : j \u003c 4 ? SPILL : SPILL * 0.4);\n      buf[q * 3] += c[0] * v;\n      buf[q * 3 + 1] += c[1] * v;\n      buf[q * 3 + 2] += c[2] * v;\n    }\n  };\n  for (const l of P.leds) {\n    const d = P.devs[l.dev];\n    switch (l.kind) {\n      case \"pwr\":\n        light(l.p, scheme, 0.75);\n        break;\n      case \"stat\":\n        light(l.p, scheme, 0.4);\n        break;\n      case \"id\":\n        if ((P.t + d.phase * 40) % 40 \u003c 3 && Math.floor(P.t * 2) % 2) light(l.p, BLUE, 0.9);\n        break;\n      case \"act\":\n      case \"cact\":\n        if (l.on) light(l.p, scheme, 0.95);\n        break;\n      case \"port\":\n        if (P.linked[l.arg]) light(l.p, scheme, l.on ? 1 : 0.3);\n        break;\n      case \"sfp\":\n        light(l.p, BLUE, l.on ? 1 : 0.4);\n        break;\n      case \"dstat\":\n        light(l.p, scheme, 0.32);\n        break;\n      case \"cstat\":\n        if (l.arg === P.fault) light(l.p, AMBER, P.rebuild \u003c 0.04 && Math.floor(P.t * 4) % 2 ? 0.2 : 1);\n        else light(l.p, scheme, 0.32);\n        break;\n      case \"cache\":\n        light(l.p, AMBER, 0.3 + 0.5 * Math.min(1, d.act));\n        break;\n      case \"meter\": {\n        const k = l.arg % 8;\n        const load = l.arg \u003c 8 ? d.load : d.load * 0.9 + 0.08 * Math.sin(P.t * 0.7 + d.phase * 5);\n        const v = clamp(load * 8 - k, 0, 1);\n        // A meter's light spills up and down only, so its segments stay apart.\n        if (v > 0) light(l.p, k === 7 ? AMBER : scheme, 0.25 + 0.7 * v, 2);\n        break;\n      }\n      case \"upsload\": {\n        let sum = 0;\n        for (const e of P.devs) sum += e.load;\n        const v = clamp((sum / P.devs.length) * 1.3 * 20 - l.arg, 0, 1);\n        if (v > 0) light(l.p, l.arg >= 16 ? AMBER : [200, 230, 255], 0.3 + 0.6 * v);\n        break;\n      }\n      case \"upsbatt\":\n        light(l.p, [60, 220, 90], l.arg \u003c 19 ? 0.7 : 0.25);\n        break;\n    }\n  }\n  // The status lights inside a busy server show through the holes of its bezel.\n  for (let j = 0; j \u003c P.holes.length; j += 2) {\n    const q = P.holes[j] * 3;\n    const v = BLEED * P.devs[P.holes[j + 1]].load;\n    for (let i = 0; i \u003c 3; i++) buf[q + i] += scheme[i] * v;\n  }\n  // Drives the backup is writing glow through their light pipes, and stay lit once written.\n  for (let c = 0; c \u003c P.caddies.length; c++) {\n    // The last pass's lights go out over 3 rack seconds when the next pass starts.\n    const old = 0.6 * Math.max(0, 1 - (P.t - P.reset) / 3);\n    const v = c \u003c P.sweep - 4 ? 0.6 : Math.max(old, 1 - Math.abs(c - P.sweep) / 4);\n    if (v \u003c= 0) continue;\n    const cd = P.caddies[c];\n    for (let y = cd.top; y \u003c cd.top + 5; y++) {\n      const q = (y * W + cd.x + 1) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[q + i] += scheme[i] * PIPE * v;\n    }\n  }\n  // The controller's LCD: one cell per shelf of drives, and the rebuild bar under them.\n  if (P.lcd) {\n    const { x, y } = P.lcd;\n    for (let i = 0; i \u003c 12; i++) {\n      const busy = Math.abs(i * 5.4 - P.sweep) \u003c 6;\n      const q = (y * W + x + i) * 3;\n      buf[q] = busy ? 120 : 40;\n      buf[q + 1] = busy ? 230 : 120;\n      buf[q + 2] = busy ? 220 : 110;\n    }\n    if (P.fault >= 0)\n      for (let i = 0; i \u003c 12; i++) {\n        const v = clamp(P.rebuild * 12 - i, 0, 1);\n        const q = ((y + 1) * W + x + i) * 3;\n        buf[q] = 40 + 200 * v;\n        buf[q + 1] = 60 + 80 * v;\n        buf[q + 2] = 50 - 30 * v;\n      }\n  }\n  const out = (v) => (v \u003c= 0 ? 0 : v >= 255 ? 255 : (v + 0.5) | 0);\n  for (let y = 0, q = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, out(buf[q]), out(buf[q + 1]), out(buf[q + 2]));\n}\n","layer":{"id":"layer-server-rack","type":"code","name":"server-rack","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Server Rack\n// Family:  circuit\n// Idea:    A 42U server rack seen from the front fills the panel, and traffic that reaches the switch at the top ripples down through the servers as bursts of drive light while a backup sweeps the storage shelves and the UPS at the bottom shows the load.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the processor activity lights on the front of the Apple Xserve\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Load=0..1, Aisle=0..1\n//\n// Knob 1: Hue. The colour of the status lights: green at 0, then blue, violet and orange, green again at 1; a failed drive stays amber.\n// Knob 2: Speed. How fast the rack runs: at 2 the load rises and falls every 12 s, and every 10 s the backup writes all 65 storage drives in 4 s.\n// Knob 3: Load. At 0 each load wave lifts the meters from nearly empty to most of the way up; at 1 the rack is saturated, every meter stays near the top and the drive lights flicker about five times as often.\n// Knob 4: Aisle. Blue light from the perforated floor tiles in front of the rack, from nothing at 0 to a glow that washes the lower faceplates at 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rack units are 3 rows. Equipment sits between the posts, ears on columns 5 and 58.\nconst U = 3;\nconst X0 = 6;\nconst X1 = 57;\n// Top to bottom, unit by unit: what is mounted and how many units it takes.\nconst RACK = [\n  [\"patch\", 1], [\"manager\", 1], [\"switch\", 2], [\"manager\", 1],\n  [\"s1\", 1], [\"s1\", 1], [\"s1\", 1], [\"s1\", 1], [\"blank\", 1],\n  [\"s2\", 2], [\"s2\", 2], [\"s1\", 1], [\"s1\", 1], [\"s2\", 2], [\"blank\", 1],\n  [\"s2\", 2], [\"s1\", 1], [\"s1\", 1], [\"blank\", 1], [\"s2\", 2],\n  [\"head\", 2], [\"shelf\", 2], [\"shelf\", 2], [\"blank\", 1],\n  [\"s2\", 2], [\"kvm\", 1], [\"s1\", 1], [\"blank\", 1], [\"ups\", 3],\n];\n// Patch cord colours: blue, yellow, red, green, white, grey, orange, violet, cyan.\nconst CORDS = [[40, 96, 230], [236, 200, 40], [220, 44, 40], [40, 186, 76], [210, 210, 210], [128, 128, 140], [244, 124, 24], [150, 64, 210], [40, 200, 214]];\nconst AMBER = [255, 138, 0];\nconst BLUE = [60, 120, 255];\n// How much of a busy server's light shows through the holes of its bezel, how bright a\n// written drive's light pipe is, and how much of a lamp spills onto each LED of metal\n// beside it (the corners get 0.4 of that).\nconst BLEED = 0.2;\nconst PIPE = 0.8;\nconst SPILL = 0.25;\nconst SPILL_AT = [-1, 1, -W, W, -W - 1, -W + 1, W - 1, W + 1];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5) * 255, f(3) * 255, f(1) * 255];\n}\n\n// The still rack: faceplates, posts, caddies and cords, and the list of every light on it.\nfunction build(P) {\n  const base = P.base;\n  const wash = P.wash;\n  const put = (x, y, c, refl = 0.5) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    base[p * 3] = c[0];\n    base[p * 3 + 1] = c[1];\n    base[p * 3 + 2] = c[2];\n    wash[p] = refl;\n  };\n  const metal = (x, y, v, refl) => {\n    const g = v + 2 * (hash(x, y, 3) - 0.5);\n    put(x, y, [g, g + 1, g + 3], refl);\n  };\n  const leds = [];\n  const led = (x, y, kind, dev, arg = 0) => leds.push({ p: y * W + x, kind, dev, arg, on: 0, next: 0 });\n  P.devs = [];\n  P.caddies = [];\n  P.holes = [];\n  // The rack frame: side panels, posts with square holes, and the cable channels between.\n  for (let y = 0; y \u003c H; y++) {\n    for (const x of [0, 63]) metal(x, y, 11, 0.3);\n    for (const x of [1, 2, 3, 60, 61, 62]) put(x, y, [5, 5, 6], 0.15);\n    for (const x of [4, 59]) {\n      const hole = (y - 1) % U !== 1 && y > 0 && y \u003c H - 1;\n      if (hole) put(x, y, [3, 3, 4], 0.1);\n      else metal(x, y, 19, 0.9);\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    metal(x, 0, 14, 0.4);\n    metal(x, H - 1, 14, 1.2);\n  }\n  let row = 1;\n  RACK.forEach(([type, units], di) => {\n    const top = row;\n    const h = units * U;\n    row += h;\n    const dev = { type, top, h, load: 0.2, kick: 0, act: 0.2, flash: -1, phase: hash(di, 1, 9) };\n    P.devs.push(dev);\n    const d = P.devs.length - 1;\n    for (let y = top; y \u003c top + h; y++) {\n      metal(5, y, 23, 1);\n      metal(58, y, 23, 1);\n      // Each faceplate catches light on its top edge and has a dark seam under it.\n      const v = type === \"blank\" ? 13 : 16;\n      for (let x = X0; x \u003c= X1; x++) metal(x, y, y === top ? v + 7 : y === top + h - 1 ? v - 5 : v, y === top ? 1 : 0.6);\n    }\n    // Ear screws.\n    for (const x of [5, 58]) {\n      put(x, top + 1, [44, 44, 48], 1);\n      if (h > 3) put(x, top + h - 2, [44, 44, 48], 1);\n    }\n    const vent = (x0, x1, y) => {\n      for (let x = x0; x \u003c= x1; x++) {\n        metal(x, y, (x + y) % 2 ? 9 : 20, 0.5);\n        if ((x + y) % 2 && type[0] === \"s\") P.holes.push(y * W + x, d);\n      }\n    };\n    if (type === \"blank\") {\n      for (let x = X0; x \u003c= X1; x++) metal(x, top, 20, 0.9);\n    } else if (type === \"manager\") {\n      for (let y = top; y \u003c top + h; y++) for (let x = X0; x \u003c= X1; x++) put(x, y, [7, 7, 8], 0.2);\n      for (let x = X0 + 1; x \u003c= X1; x += 4) for (let y = top; y \u003c top + h; y++) put(x, y, y === top ? [24, 24, 27] : [14, 14, 16], 0.4);\n    } else if (type === \"patch\") {\n      for (let i = 0; i \u003c 24; i++) {\n        const x = X0 + 2 * i + Math.floor(i / 6);\n        put(x, top + 1, [4, 4, 5], 0.1);\n        put(x + 1, top + 1, [4, 4, 5], 0.1);\n        put(x, top + 2, [30, 30, 33], 0.6);\n      }\n    } else if (type === \"switch\") {\n      for (let i = 0; i \u003c 24; i++) {\n        const x = X0 + 2 * i + Math.floor(i / 6);\n        for (const [r, side] of [[2, 1], [3, 0]]) {\n          put(x, top + r, [4, 4, 5], 0.1);\n          put(x + 1, top + r, [4, 4, 5], 0.1);\n          led(x, top + (side ? 1 : 4), \"port\", d, i * 2 + side);\n        }\n      }\n      for (let i = 0; i \u003c 4; i++) led(X0 + 40 + 3 * i, top + 5, \"sfp\", d, i);\n      led(X0 + 1, top, \"pwr\", d);\n      led(X0 + 3, top, \"stat\", d);\n    } else if (type === \"s1\" || type === \"s2\") {\n      const m = type === \"s1\" ? [1] : [1, 3];\n      for (let y = top; y \u003c top + h; y++) if (!m.includes(y - top)) vent(14, 37, y);\n      // Load meters of eight two-LED segments, one per processor.\n      for (const r of m) for (let k = 0; k \u003c 16; k++) led(14 + 3 * (k >> 1) + (k & 1), top + r, \"meter\", d, (k >> 1) + 8 * (r > 1));\n      led(9, top + 1, \"pwr\", d);\n      led(11, top + 1, \"stat\", d);\n      led(12, top + h - 2, \"id\", d);\n      if (type === \"s1\") {\n        for (let b = 0; b \u003c 9; b++) {\n          const x = 39 + 2 * b;\n          for (let y = top; y \u003c top + 3; y++) {\n            metal(x, y, 27, 0.8);\n            metal(x + 1, y, 33, 1);\n          }\n          led(x + 1, top, \"act\", d);\n          led(x + 1, top + 2, \"dstat\", d);\n        }\n      } else {\n        for (let b = 0; b \u003c 6; b++) {\n          const x = 39 + 9 * (b % 2);\n          const y0 = top + 2 * Math.floor(b / 2);\n          for (let y = y0; y \u003c y0 + 2; y++)\n            for (let i = 0; i \u003c 8; i++) metal(x + i, y, i === 0 ? 34 : (i + y) % 3 ? 26 : 21, 0.8);\n          led(x + 7, y0, \"act\", d);\n          led(x + 7, y0 + 1, \"dstat\", d);\n        }\n      }\n    } else if (type === \"head\" || type === \"shelf\") {\n      const first = type === \"head\" ? 22 : X0;\n      const count = type === \"head\" ? 17 : 24;\n      if (type === \"head\") {\n        // The controller: a small backlit LCD that shows the array and any rebuild.\n        for (let y = top + 1; y \u003c= top + 2; y++) for (let x = 8; x \u003c= 19; x++) put(x, y, [8, 22, 24], 0.3);\n        P.lcd = { x: 8, y: top + 1 };\n        led(8, top + 4, \"pwr\", d);\n        led(10, top + 4, \"stat\", d);\n        led(12, top + 4, \"cache\", d);\n      } else {\n        led(55, top + 1, \"pwr\", d);\n        led(55, top + 3, \"stat\", d);\n      }\n      for (let c = 0; c \u003c count; c++) {\n        const x = first + 2 * c;\n        for (let y = top; y \u003c top + 5; y++) {\n          metal(x, y, y === top ? 34 : 27, 0.8);\n          metal(x + 1, y, 22, 0.6);\n        }\n        P.caddies.push({ x, top, dev: d });\n        led(x, top + 5, \"cact\", d, P.caddies.length - 1);\n        led(x + 1, top + 5, \"cstat\", d, P.caddies.length - 1);\n      }\n    } else if (type === \"kvm\") {\n      for (let x = 20; x \u003c= 43; x++) metal(x, top + 1, 34, 1);\n      led(10, top + 1, \"pwr\", d);\n    } else if (type === \"ups\") {\n      // The UPS: an LCD with the load and battery bars, three lamps and a wide grille.\n      for (let y = top + 2; y \u003c= top + 6; y++) for (let x = 9; x \u003c= 30; x++) put(x, y, [14, 26, 40], 0.3);\n      for (let k = 0; k \u003c 20; k++) {\n        led(10 + k, top + 3, \"upsload\", d, k);\n        led(10 + k, top + 4, \"upsload\", d, k);\n        led(10 + k, top + 6, \"upsbatt\", d, k);\n      }\n      led(34, top + 3, \"pwr\", d);\n      led(36, top + 3, \"stat\", d);\n      for (let y = top + 1; y \u003c top + h - 1; y++) vent(40, 56, y);\n      for (let x = X0; x \u003c= X1; x++) metal(x, top + h - 1, 22, 1);\n    }\n    // A front network port on each server, fed from a side channel.\n    if (type[0] === \"s\" || type === \"head\") {\n      put(X0, top + 1, [4, 4, 5], 0.1);\n      put(X1, top + 1, [4, 4, 5], 0.1);\n    }\n  });\n  // Patch cords: the switch's upper ports run straight up to the patch panel; the\n  // lower ports drop into the manager, run out to the side channels and down to a server.\n  const sw = P.devs[2];\n  const mg = P.devs[3];\n  const targets = P.devs.map((d, i) => i).filter((i) => P.devs[i].type[0] === \"s\" || P.devs[i].type === \"head\");\n  let left = 0;\n  let right = 0;\n  P.linked = new Uint8Array(48);\n  for (let i = 0; i \u003c 24; i++) {\n    const x = X0 + 2 * i + Math.floor(i / 6);\n    const c = CORDS[(i * 5 + 2) % CORDS.length];\n    const dim = (k) => [c[0] * k, c[1] * k, c[2] * k];\n    if (i % 7 !== 5) {\n      P.linked[i * 2 + 1] = 1;\n      put(x, sw.top + 2, dim(0.5), 0.2);\n      put(x + 1, sw.top + 2, dim(0.38), 0.2);\n      for (let y = 2; y \u003c sw.top + 1; y++) put(x + 1, y, dim(y \u003c 4 ? 0.5 : 0.36), 0.2);\n      put(x, 2, dim(0.5), 0.2);\n    }\n    if (i % 3 === 1) continue;\n    P.linked[i * 2] = 1;\n    put(x, sw.top + 3, dim(0.5), 0.2);\n    put(x + 1, sw.top + 3, dim(0.38), 0.2);\n    const goLeft = x \u003c 32;\n    const n = goLeft ? left++ : right++;\n    const t = targets[(goLeft ? 2 * n : 2 * n + 1) % targets.length];\n    const ty = P.devs[t].top + 1;\n    const lane = mg.top + (n % 3);\n    const cx = goLeft ? 1 + (n % 3) : 62 - (n % 3);\n    for (let y = sw.top + 4; y \u003c= lane; y++) put(x + 1, y, dim(0.4), 0.2);\n    for (let xx = Math.min(x + 1, cx); xx \u003c= Math.max(x + 1, cx); xx++) put(xx, lane, dim(0.34 + 0.06 * (xx % 2)), 0.2);\n    for (let y = lane; y \u003c= ty; y++) put(cx, y, dim(0.3 + 0.08 * ((y >> 2) % 2)), 0.2);\n    for (let xx = Math.min(cx, goLeft ? X0 : X1); xx \u003c= Math.max(cx, goLeft ? X0 : X1); xx++) put(xx, ty, dim(0.42), 0.2);\n  }\n  P.leds = leds;\n  // The floor tiles' light falls off up the rack and catches bright metal most.\n  for (let y = 0; y \u003c H; y++) {\n    const f = Math.exp(-(H - 1 - y) / 38);\n    for (let x = 0; x \u003c W; x++) P.wash[y * W + x] *= f;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.base = new Float32Array(N * 3);\n  P.wash = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  build(P);\n  Object.assign(P, { t: 0, hue: 0, speed: 2, load: 0, cold: 0.06, bursts: [], sweep: -20, reset: -99, fault: -1, rebuild: 0, nextFault: 30, started: false });\n}\n\n// The rack's load: a wave that rises and falls every 24 rack seconds and lags 45 rows a\n// second down the rack, a base set by Load, and the kicks bursts of traffic leave.\nfunction step(P, dt) {\n  const g = dt * P.speed;\n  P.t += g;\n  const L = P.load;\n  if (Math.random() \u003c g * (0.7 + 2.6 * L)) {\n    const b = { t0: P.t, seed: Math.floor(Math.random() * 1e6), s: 0.4 + 0.6 * Math.random() };\n    P.bursts.push(b);\n    // It comes in on the uplinks and out of a handful of ports at once.\n    for (const l of P.leds)\n      if (l.kind === \"sfp\" || (l.kind === \"port\" && hash(l.arg, b.seed, 6) \u003c 0.3)) {\n        l.on = 1;\n        l.next = P.t + P.speed * 0.08;\n      }\n  }\n  for (const b of P.bursts) {\n    const f0 = (P.t - g - b.t0) * 45;\n    const f1 = (P.t - b.t0) * 45;\n    P.devs.forEach((d, i) => {\n      if (d.top > f0 && d.top \u003c= f1 && hash(i, b.seed, 5) \u003c 0.45 + 0.4 * L) {\n        d.kick += b.s;\n        d.flash = P.t;\n      }\n    });\n  }\n  P.bursts = P.bursts.filter((b) => (P.t - b.t0) * 45 \u003c H);\n  // A burst that reaches a server lights its drives together for a moment, so it is seen going down.\n  for (const l of P.leds)\n    if (l.kind === \"act\" && P.devs[l.dev].flash === P.t) {\n      l.on = 1;\n      l.next = P.t + 0.12 + 0.12 * Math.random();\n    }\n  for (const d of P.devs) {\n    const ph = (P.t - P.t0 - d.top / 45) / 24;\n    const wave = 0.5 - 0.5 * Math.cos(2 * Math.PI * ph);\n    d.kick *= Math.exp(-g / 1.6);\n    const target = clamp(0.03 + 0.62 * L + (0.86 - 0.55 * L) * wave + 0.24 * Math.min(1, d.kick) + 0.05 * Math.sin(P.t * 1.3 + d.phase * 9), 0, 1);\n    d.load += (target - d.load) * Math.min(1, g * 2.5);\n    d.act = clamp(0.12 + 0.6 * d.load + 0.5 * d.kick, 0, 1.5);\n  }\n  // The backup walks the storage drives 8 a rack second, then waits 12 rack seconds.\n  P.sweep += g * 8;\n  if (P.sweep > P.caddies.length + 96) {\n    P.sweep = -6;\n    P.reset = P.t;\n  }\n  // Now and then a drive fails: its light goes amber and a rebuild bar crawls for 36 rack seconds.\n  if (P.fault \u003c 0 && P.t > P.nextFault) {\n    P.fault = Math.floor(Math.random() * P.caddies.length);\n    P.rebuild = 0;\n  }\n  if (P.fault >= 0) {\n    P.rebuild += g / 36;\n    if (P.rebuild >= 1) {\n      P.fault = -1;\n      P.nextFault = P.t + 14 + 30 * Math.random();\n    }\n  }\n  for (const l of P.leds) {\n    if (l.kind !== \"act\" && l.kind !== \"cact\" && l.kind !== \"port\" && l.kind !== \"sfp\") continue;\n    if (P.t \u003c l.next) continue;\n    let a = P.devs[l.dev].act;\n    if (l.kind === \"cact\" && Math.abs(l.arg - P.sweep) \u003c 4) a = 2.5;\n    if (l.kind === \"sfp\") a = 0.5 + L;\n    if (l.kind === \"port\") a = P.devs[4 + ((l.arg * 7) % (P.devs.length - 5))].act;\n    l.on = l.on ? 0 : 1;\n    // A lamp stays lit about a tenth of a second whatever the speed, so a fast rack looks busier.\n    l.next = P.t + (l.on ? P.speed * (0.04 + 0.08 * Math.random()) : (-Math.log(1 - Math.random()) * 0.3) / (a + 0.04));\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.load = clamp(k[2], 0, 1);\n  P.cold = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The rack has run for 4 seconds at the knob's speed when the panel opens, with a\n    // rebuild a third done. At Speed 2 the load wave is at its low point and the backup\n    // on its first drive two seconds later; at other speeds they are further on or behind.\n    P.t0 = 12;\n    P.fault = 40;\n    P.rebuild = 0.3;\n    for (let i = 0; i \u003c 80; i++) step(P, 0.05);\n    P.sweep = -6 + 8 * (P.t - 12);\n  }\n  step(P, dt);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const buf = P.buf;\n  const scheme = hsv((0.33 + P.hue) % 1, 0.8, 1);\n  const cold = P.cold;\n  const { base, wash } = P;\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const w = wash[p] * cold;\n    buf[q] = base[q] + 30 * w;\n    buf[q + 1] = base[q + 1] + 90 * w;\n    buf[q + 2] = base[q + 2] + 210 * w;\n  }\n  const light = (p, c, k, sides = 8) => {\n    buf[p * 3] = c[0] * k;\n    buf[p * 3 + 1] = c[1] * k;\n    buf[p * 3 + 2] = c[2] * k;\n    // Light spills onto the faceplate round a lit lamp.\n    for (let j = sides === 2 ? 2 : 0; j \u003c (sides === 2 ? 4 : 8); j++) {\n      const q = p + SPILL_AT[j];\n      if (q \u003c 0 || q >= N) continue;\n      const v = k * (sides === 2 ? 0.4 : j \u003c 4 ? SPILL : SPILL * 0.4);\n      buf[q * 3] += c[0] * v;\n      buf[q * 3 + 1] += c[1] * v;\n      buf[q * 3 + 2] += c[2] * v;\n    }\n  };\n  for (const l of P.leds) {\n    const d = P.devs[l.dev];\n    switch (l.kind) {\n      case \"pwr\":\n        light(l.p, scheme, 0.75);\n        break;\n      case \"stat\":\n        light(l.p, scheme, 0.4);\n        break;\n      case \"id\":\n        if ((P.t + d.phase * 40) % 40 \u003c 3 && Math.floor(P.t * 2) % 2) light(l.p, BLUE, 0.9);\n        break;\n      case \"act\":\n      case \"cact\":\n        if (l.on) light(l.p, scheme, 0.95);\n        break;\n      case \"port\":\n        if (P.linked[l.arg]) light(l.p, scheme, l.on ? 1 : 0.3);\n        break;\n      case \"sfp\":\n        light(l.p, BLUE, l.on ? 1 : 0.4);\n        break;\n      case \"dstat\":\n        light(l.p, scheme, 0.32);\n        break;\n      case \"cstat\":\n        if (l.arg === P.fault) light(l.p, AMBER, P.rebuild \u003c 0.04 && Math.floor(P.t * 4) % 2 ? 0.2 : 1);\n        else light(l.p, scheme, 0.32);\n        break;\n      case \"cache\":\n        light(l.p, AMBER, 0.3 + 0.5 * Math.min(1, d.act));\n        break;\n      case \"meter\": {\n        const k = l.arg % 8;\n        const load = l.arg \u003c 8 ? d.load : d.load * 0.9 + 0.08 * Math.sin(P.t * 0.7 + d.phase * 5);\n        const v = clamp(load * 8 - k, 0, 1);\n        // A meter's light spills up and down only, so its segments stay apart.\n        if (v > 0) light(l.p, k === 7 ? AMBER : scheme, 0.25 + 0.7 * v, 2);\n        break;\n      }\n      case \"upsload\": {\n        let sum = 0;\n        for (const e of P.devs) sum += e.load;\n        const v = clamp((sum / P.devs.length) * 1.3 * 20 - l.arg, 0, 1);\n        if (v > 0) light(l.p, l.arg >= 16 ? AMBER : [200, 230, 255], 0.3 + 0.6 * v);\n        break;\n      }\n      case \"upsbatt\":\n        light(l.p, [60, 220, 90], l.arg \u003c 19 ? 0.7 : 0.25);\n        break;\n    }\n  }\n  // The status lights inside a busy server show through the holes of its bezel.\n  for (let j = 0; j \u003c P.holes.length; j += 2) {\n    const q = P.holes[j] * 3;\n    const v = BLEED * P.devs[P.holes[j + 1]].load;\n    for (let i = 0; i \u003c 3; i++) buf[q + i] += scheme[i] * v;\n  }\n  // Drives the backup is writing glow through their light pipes, and stay lit once written.\n  for (let c = 0; c \u003c P.caddies.length; c++) {\n    // The last pass's lights go out over 3 rack seconds when the next pass starts.\n    const old = 0.6 * Math.max(0, 1 - (P.t - P.reset) / 3);\n    const v = c \u003c P.sweep - 4 ? 0.6 : Math.max(old, 1 - Math.abs(c - P.sweep) / 4);\n    if (v \u003c= 0) continue;\n    const cd = P.caddies[c];\n    for (let y = cd.top; y \u003c cd.top + 5; y++) {\n      const q = (y * W + cd.x + 1) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[q + i] += scheme[i] * PIPE * v;\n    }\n  }\n  // The controller's LCD: one cell per shelf of drives, and the rebuild bar under them.\n  if (P.lcd) {\n    const { x, y } = P.lcd;\n    for (let i = 0; i \u003c 12; i++) {\n      const busy = Math.abs(i * 5.4 - P.sweep) \u003c 6;\n      const q = (y * W + x + i) * 3;\n      buf[q] = busy ? 120 : 40;\n      buf[q + 1] = busy ? 230 : 120;\n      buf[q + 2] = busy ? 220 : 110;\n    }\n    if (P.fault >= 0)\n      for (let i = 0; i \u003c 12; i++) {\n        const v = clamp(P.rebuild * 12 - i, 0, 1);\n        const q = ((y + 1) * W + x + i) * 3;\n        buf[q] = 40 + 200 * v;\n        buf[q + 1] = 60 + 80 * v;\n        buf[q + 2] = 50 - 30 * v;\n      }\n  }\n  const out = (v) => (v \u003c= 0 ? 0 : v >= 255 ? 255 : (v + 0.5) | 0);\n  for (let y = 0, q = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, out(buf[q]), out(buf[q + 1]), out(buf[q + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Load=0..1, Aisle=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the status lights: green at 0, then blue, violet and orange, green again at 1; a failed drive stays amber."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the rack runs: at 2 the load rises and falls every 12 s, and every 10 s the backup writes all 65 storage drives in 4 s."},{"name":"Load","min":0,"max":1,"about":"At 0 each load wave lifts the meters from nearly empty to most of the way up; at 1 the rack is saturated, every meter stays near the top and the drive lights flicker about five times as often."},{"name":"Aisle","min":0,"max":1,"about":"Blue light from the perforated floor tiles in front of the rack, from nothing at 0 to a glow that washes the lower faceplates at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.3413,"detail":0.1038,"edges":0.3523,"complexity":1.287,"coverage":0.6285,"colour":0.2245,"drift":0.0981},"knobResponse":[0.0421,0.0369,0.0435,0.0677]},{"slug":"shoreline","title":"Shoreline","family":"ocean","round":17,"note":"드론으로 곧장 내려다본 해변이에요. 비스듬히 밀려온 너울이 모래톱 위에서 하얗게 부서지고 골에서 다시 일어나 기슭에서 한 번 더 부서진 뒤, 레이스 같은 거품 끝을 단 채 모래를 타고 올라갔다 물러나며 젖은 모래의 어두운 윤기를 남겨요.","idea":"A surf beach seen straight down from a drone: swell lines roll in at a slant, steepen and break white over a sandbar, reform in the trough, break again and run up the sand as swash with a lacy foam edge, and every backwash leaves a dark sheen of wet sand that dries.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Shoreline\n// Family:  ocean\n// Idea:    A surf beach seen straight down from a drone: swell lines roll in at a slant, steepen and break white over a sandbar, reform in the trough, break again and run up the sand as swash with a lacy foam edge, and every backwash leaves a dark sheen of wet sand that dries.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after drone photographs of surf beaches; a wave breaks when it is 0.78 of the depth (McCowan, 1894)\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Speed=0.2..3, Height=1..3, Tide=-1..1\n//\n// Knob 1: Water. Tropical turquoise over white sand at 0, Atlantic green-blue in the middle, the grey North Sea over brown sand at 1.\n// Knob 2: Speed. How fast the beach runs: at 2 the eight-second swell lands a wave every four seconds.\n// Knob 3: Height. Wave height in metres: at 1 the bar breaks only the bigger waves of each set, at 3 every wave breaks before the bar and the trough runs white.\n// Knob 4: Tide. At -1 low water nearly bares the bar and pulls the water's edge ten rows out; at 1 high water covers the bar and most waves break only at the shore.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sea bed in metres below mid tide: a shelf deepening to 12 m at the top, a sandbar on\n// row 52 and the water's edge on row 92, where the beach rises 7 cm a row.\nconst SHORE = 92;\nconst BAR = 52;\nconst SLOPE = 0.07;\n// The swell's period in seconds, and its slant: a crest reaches each column 15 ms after the\n// one to its left, a slope of 6 degrees out in deep water and less as it slows near the shore.\nconst PERIOD = 8;\nconst SKEW = 0.015;\n// A wave breaks when it is 0.78 of the depth and stops breaking once it is under 0.45 of it.\nconst GAMMA = 0.78;\nconst REFORM = 0.45;\n// Seconds the foam takes to fade to a third, and wet sand to dry to a third.\nconst FOAM_T = 5;\nconst DRY_T = 7;\n// The swash slows by RUN rows a second every second going up and by 0.75 of that coming back.\nconst RUN = 2.6;\n// Water seen from above in deep and in shallow water, the sand, and the foam: tropical,\n// Atlantic, North Sea.\nconst SEAS = [\n  [[8, 78, 142], [56, 212, 200], [238, 228, 204], [246, 250, 250]],\n  [[12, 52, 92], [44, 142, 142], [214, 188, 146], [240, 244, 244]],\n  [[38, 56, 64], [96, 118, 110], [178, 160, 132], [224, 228, 222]],\n];\n// Two towels: column, row, width, height and their two stripes.\nconst TOWELS = [\n  [9, 113, 4, 7, [40, 90, 200], [236, 236, 230]],\n  [44, 117, 7, 4, [230, 120, 40], [250, 200, 60]],\n];\nconst SKIN = [214, 150, 110];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst q4 = (v) => (v \u003c= 0 ? 0 : v >= 254 ? 255 : ((v + 2) >> 2) \u003c\u003c 2);\nconst mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n\nfunction depth(P, x, y) {\n  const off = Math.max(0, 80 - y);\n  const channel = P.rip[x] * clamp((y - 40) / 10, 0, 1) * clamp((88 - y) / 12, 0, 1);\n  return SLOPE * (SHORE - y) + 0.0009 * off * off - P.bump[x] * Math.exp(-(((y - BAR) / 7) ** 2)) + channel + P.tide;\n}\n\n// For the tide as it stands: the depth under each LED, how deep its water looks and how much\n// sand shows through it, and how long a crest takes from the top row to each row. Waves run\n// at 2.1 rows a second for every square root of a metre of depth, plus a little for their\n// own height, so they slow and bunch up as the water shoals.\nfunction retide(P) {\n  P.ys = SHORE + P.tide / SLOPE;\n  for (let p = 0; p \u003c N; p++) {\n    const d = (P.d[p] = depth(P, p % W, (p / W) | 0));\n    P.q[p] = Math.max(0.05, d) ** 0.25;\n    P.ka[p] = 1 - Math.exp(-Math.max(0, d) / 2.2);\n    P.ke[p] = 0.7 * Math.exp(-Math.max(0, d) / 0.25);\n  }\n  P.tt[0] = 0;\n  for (let y = 0; y \u003c H; y++) {\n    let d = 0;\n    for (let x = 0; x \u003c W; x += 8) d += P.d[y * W + x] / 8;\n    P.tt[y + 1] = P.tt[y] + 1 / (2.1 * Math.sqrt(Math.max(0, d) + 0.6));\n    P.ft[y] = Math.exp(P.tt[y] / FOAM_T);\n  }\n  P.tideAt = P.tide;\n}\n\n// The row a crest has reached at this age.\nfunction crest(P, age) {\n  const tt = P.tt;\n  if (age >= tt[H]) return H;\n  let lo = 0;\n  let hi = H;\n  while (hi - lo > 1) {\n    const m = (lo + hi) >> 1;\n    if (tt[m] \u003c= age) lo = m;\n    else hi = m;\n  }\n  return lo + (age - tt[lo]) / (tt[lo + 1] - tt[lo]);\n}\n\n// A new wave and what it will do in each column on its way in. It shoals by Green's law\n// (height times the fourth root of depth stays the same) and breaks at GAMMA, the harder the\n// further over it is; broken, it loses a twenty-fifth of its height a row, and it reforms in\n// the deeper trough. Per row: its height, and how much foam it makes there.\nfunction spawn(P, t0) {\n  const k = P.count++;\n  // Sets: every seventh wave is the biggest, the ones between smaller.\n  const set = 0.5 + 0.5 * Math.sin((k * 2 * Math.PI) / 7 + P.phase);\n  const h = P.height * (0.45 + 0.65 * set + 0.12 * (Math.random() - 0.5));\n  // Bigger waves make more foam, and it lasts longer.\n  const more = 0.6 + 0.3 * h;\n  // A retired wave's arrays are used again.\n  const old = P.pool.pop();\n  const ht = old ? old.ht : new Float32Array(N);\n  const fs = old ? old.fs : new Float32Array(N);\n  const first = new Int16Array(W).fill(H);\n  for (let x = 0; x \u003c W; x++) {\n    let flux = h * 6 ** 0.25;\n    let s = 0;\n    let hc = h;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      const d = Math.max(0.05, P.d[p]);\n      let v = flux / P.q[p];\n      if (s > 0) {\n        v = Math.min(hc * 0.96, GAMMA * d);\n        s = Math.min(1, s + 0.06);\n        if (v \u003c REFORM * d) (s = 0), (flux = v * P.q[p]);\n      } else if (v > GAMMA * d) {\n        s = clamp((v / (GAMMA * d) - 1) * 4 + 0.3, 0.3, 1);\n        v = GAMMA * d;\n        if (first[x] === H) first[x] = y;\n      }\n      hc = v;\n      ht[p] = v;\n      fs[p] = s * more;\n    }\n  }\n  P.waves.push({ t0, h, ht, fs, first, land: new Uint8Array(W) });\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, count: 0, waves: [], pool: [], tide: 0, tideAt: 99, height: 1, started: false });\n  for (const k of [\"d\", \"q\", \"ka\", \"ke\", \"wet\", \"grain\", \"lace\"]) P[k] = new Float32Array(N);\n  for (const k of [\"S\", \"U\"]) P[k] = new Float32Array(W);\n  for (const k of [\"light\", \"foam\", \"ft\"]) P[k] = new Float32Array(H);\n  P.tt = new Float32Array(H + 1);\n  P.row = new Int32Array(H);\n  P.col = new Float32Array(N * 3);\n  // The bar's crest rises and falls along the beach, and a rip channel cuts through it and\n  // on in to the shore, up to 0.8 m deeper than the trough beside it.\n  const rx = 30 + Math.random() * 24;\n  const ph = Math.random() * 6;\n  for (const k of [\"bump\", \"cusp\", \"rip\"]) P[k] = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    const r = Math.exp(-(((x - rx) / 6) ** 2));\n    P.rip[x] = 0.8 * r;\n    P.bump[x] = 2.4 * (1 + 0.1 * Math.sin(x * 0.11 + ph)) * (1 - 0.55 * r);\n    // Beach cusps: the run-up reaches further every 16 columns.\n    P.cusp[x] = 1 + 0.18 * Math.sin((x * 2 * Math.PI) / 16 + ph);\n  }\n  // Lace: Worley noise with three points in each cell of an 8 LED grid that wraps, the\n  // second-nearest point's distance less the nearest's, so it is 0 along the cell walls\n  // where the bubbles gather.\n  const pts = [];\n  for (let j = 0; j \u003c 16 * 8 * 3; j++) pts.push(Math.random() * 8, Math.random() * 8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let f1 = 99;\n      let f2 = 99;\n      const cx = x >> 3;\n      const cy = y >> 3;\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++)\n          for (let n = 0; n \u003c 3; n++) {\n            const q = ((((cy + j + 16) % 16) * 8 + ((cx + i + 8) % 8)) * 3 + n) * 2;\n            const d = Math.hypot((cx + i) * 8 + pts[q] - x - 0.5, (cy + j) * 8 + pts[q + 1] - y - 0.5);\n            if (d \u003c f1) (f2 = f1), (f1 = d);\n            else if (d \u003c f2) f2 = d;\n          }\n      P.lace[y * W + x] = Math.min(1, (f2 - f1) / 2.2);\n      // A dark grain here and there, and a few pale shell bits.\n      const h = Math.random();\n      P.grain[y * W + x] = h \u003c 0.04 ? -0.18 : h > 0.96 ? 0.07 : 0;\n    }\n  // Someone walking along the beach above the swash.\n  P.walk = Math.random() * W;\n}\n\n// A bore reaching the water's edge runs up the beach: its reach in rows grows with the\n// square root of the wave's height and with the cusps. Meeting the backwash of the one\n// before, it drives that sheet back up.\nfunction launch(P, x, w) {\n  const R = 9 * Math.sqrt(w.h) * P.cusp[x] * (1 + 0.15 * Math.sin(x * 0.3 + w.t0));\n  const u = Math.sqrt(2 * RUN * R);\n  if (P.S[x] > P.ys) P.U[x] = Math.max(P.U[x], u * 0.75);\n  else (P.S[x] = P.ys), (P.U[x] = u);\n}\n\nfunction step(P, dt) {\n  P.t += dt;\n  if (Math.abs(P.tide - P.tideAt) > 0.01) retide(P);\n  const ys = P.ys;\n  while (P.next \u003c= P.t) {\n    spawn(P, P.next);\n    P.next += PERIOD * (0.9 + 0.2 * Math.random());\n  }\n  // A wave is done once its foam has faded behind the water's edge.\n  const done = P.tt[Math.min(H, Math.ceil(ys))] + 4 * FOAM_T;\n  while (P.waves.length && P.t - P.waves[0].t0 >= done) P.pool.push(P.waves.shift());\n  const dry = Math.exp(-dt / DRY_T);\n  for (let x = 0; x \u003c W; x++) {\n    for (const w of P.waves)\n      if (!w.land[x] && crest(P, P.t - w.t0 - SKEW * x) >= ys) {\n        w.land[x] = 1;\n        launch(P, x, w);\n      }\n    if (P.S[x] > ys || P.U[x] > 0) {\n      P.S[x] = Math.min(H + 2, P.S[x] + P.U[x] * dt);\n      P.U[x] -= (P.U[x] > 0 ? RUN : 0.75 * RUN) * dt;\n      if (P.S[x] \u003c= ys) (P.S[x] = ys), (P.U[x] = 0);\n    }\n    for (let y = Math.max(0, Math.floor(ys)); y \u003c H; y++) P.wet[y * W + x] = y \u003c= P.S[x] ? 1 : P.wet[y * W + x] * dry;\n  }\n  P.walk = (P.walk + 0.45 * dt) % (W + 8);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  const s = clamp(k[1], 0.05, 4);\n  P.sea = clamp(k[0], 0, 1);\n  P.height = clamp(k[2], 0.5, 3.5);\n  P.tide = 0.7 * clamp(k[3], -1, 1);\n  if (!P.started) {\n    // The beach has been running for half a minute when the panel opens, with the swell\n    // already in flight and the biggest wave of a set due on the bar 14 beach seconds later.\n    P.started = true;\n    retide(P);\n    P.next = -P.tt[BAR] - 2 * PERIOD;\n    P.phase = Math.PI / 2 - (2 * Math.PI * (44 + 2 * PERIOD)) / (7 * PERIOD);\n    for (let i = 0; i \u003c 30 * 8; i++) step(P, 1 / 8);\n  }\n  step(P, dt * s);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const u = P.sea * 2;\n  const i0 = Math.min(1, Math.floor(u));\n  const [deep, shallow, sand, white] = [0, 1, 2, 3].map((j) => mix(SEAS[i0][j], SEAS[i0 + 1][j], u - i0));\n  // Sand under a few centimetres of water, wet sand, and the swash's thin sheet.\n  const under = mix(sand, deep, 0.25);\n  const damp = sand.map((v, j) => v * 0.68 + deep[j] * 0.06);\n  const film = mix(damp, shallow, 0.5);\n  const { light, foam, lace, col, ys, ka, ke, ft, wet, grain } = P;\n  // The lace drifts slowly in to the beach.\n  const drift = Math.floor(P.t * 0.6);\n  const row = P.row;\n  for (let y = 0; y \u003c H; y++) row[y] = ((((y - drift) % H) + H) % H) * W;\n  for (let x = 0; x \u003c W; x++) {\n    light.fill(0);\n    foam.fill(0);\n    for (const w of P.waves) {\n      // A crest not yet on the panel is still coming in above it.\n      const age = P.t - w.t0 - SKEW * x;\n      const Y = age \u003c 0 ? age / P.tt[1] : crest(P, age);\n      const yc = clamp(Math.floor(Y), 0, Math.min(Math.floor(ys) - 1, H - 1));\n      const s = w.fs[yc * W + x];\n      if (Y \u003c ys) {\n        // The face of the swell: lit behind the crest and in shade in front of it, the shade\n        // narrowing and darkening as the wave steepens.\n        const steep = clamp(w.ht[yc * W + x] / (GAMMA * Math.max(0.1, P.d[yc * W + x])), 0, 1);\n        const L = PERIOD / (P.tt[yc + 1] - P.tt[yc]);\n        const amp = 0.07 + 0.03 * w.h + 0.3 * steep;\n        const back = 0.3 * L;\n        const front = Math.max(1.5, 0.16 * L * (1 - 0.6 * steep));\n        for (let y = Math.max(0, Math.ceil(Y - back)); y \u003c Math.min(H, Y + front); y++) {\n          const v = y \u003c Y ? (Y - y) / back : (y - Y) / front;\n          light[y] += 4 * v * (1 - v) * (y \u003c Y ? amp : -1.3 * amp);\n        }\n        // A breaking crest is a band of white, thicker the harder it breaks, with a ragged\n        // leading edge.\n        if (s > 0) {\n          const sb = Math.min(1, s);\n          const edge = Y + 0.5 + sb * (0.8 + 1.6 * lace[(yc * W + x * 7) % N]);\n          for (let y = Math.max(0, Math.floor(Y - 1 - 2 * sb)); y \u003c= edge && y \u003c H; y++) foam[y] = Math.max(foam[y], 0.25 + 0.75 * s);\n        }\n      }\n      // Behind a broken crest the foam it made fades with the time since it passed.\n      const fade = Math.exp(-age / FOAM_T);\n      for (let y = yc; y >= w.first[x]; y--) {\n        const f = w.fs[y * W + x] * fade * ft[y];\n        if (f > foam[y]) foam[y] = f;\n      }\n    }\n    const S = P.S[x];\n    const back = P.U[x] > 0 ? 1 : 0.55;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      let r;\n      let g;\n      let b;\n      let f = 0;\n      if (y \u003c ys) {\n        // Open water: deep blue fading to the shallow colour over the bar and the beach face,\n        // and the sand showing through in the last few centimetres.\n        const a = ka[p];\n        const e = ke[p];\n        const m = 1 + light[y];\n        r = (shallow[0] + (deep[0] - shallow[0]) * a) * (1 - e) + under[0] * e;\n        g = (shallow[1] + (deep[1] - shallow[1]) * a) * (1 - e) + under[1] * e;\n        b = (shallow[2] + (deep[2] - shallow[2]) * a) * (1 - e) + under[2] * e;\n        r *= m;\n        g *= m;\n        b *= m;\n        f = foam[y];\n      } else if (y \u003c= S) {\n        // The swash: a sheet of water over the sand, its foam thick at the edge and thin in\n        // the backwash.\n        r = film[0];\n        g = film[1];\n        b = film[2];\n        f = (S - y \u003c 1.2 ? 1.1 : Math.exp(-(S - y) / 2.5)) * back;\n      } else {\n        // Sand, darker while it is wet, with the sky's sheen on it just after the water goes.\n        const wv = wet[p];\n        const k = 1 + grain[p];\n        const w3 = wv * wv * wv;\n        const sh = 40 * w3 * w3;\n        r = (sand[0] + (damp[0] - sand[0]) * wv) * k + sh * 0.8;\n        g = (sand[1] + (damp[1] - sand[1]) * wv) * k + sh * 0.9;\n        b = (sand[2] + (damp[2] - sand[2]) * wv) * k + sh;\n      }\n      // Foam: solid where it is fresh, a net of bubbles along the lace's cell walls as it fades.\n      const fv = f > 0 ? clamp((f * 1.3 - lace[row[y] + x]) * 3, 0, 1) * (0.75 + 0.25 * Math.min(1, f)) : 0;\n      col[p * 3] = r + (white[0] - r) * fv;\n      col[p * 3 + 1] = g + (white[1] - g) * fv;\n      col[p * 3 + 2] = b + (white[2] - b) * fv;\n    }\n  }\n  // Things on the dry sand, never in the water.\n  const put = (x, y, c, m) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || x >= W || y >= H || y \u003c ys + 2) return;\n    for (let j = 0; j \u003c 3; j++) col[(y * W + x) * 3 + j] = m ? col[(y * W + x) * 3 + j] * m : c[j];\n  };\n  for (const [tx, ty, tw, th, a, b] of TOWELS)\n    for (let y = 0; y \u003c th; y++) for (let x = 0; x \u003c tw; x++) put(tx + x, ty + y, (tw > th ? x : y) % 2 ? b : a);\n  // Someone on the first towel.\n  for (const [x, y, c] of [[10, 114, SKIN], [10, 115, [200, 60, 60]], [11, 115, [200, 60, 60]], [10, 116, SKIN], [11, 117, SKIN]]) put(x, y, c);\n  // The umbrella from above, eight panels, red and white, its shadow down to the right.\n  for (let y = -4; y \u003c= 4; y++) for (let x = -4; x \u003c= 4; x++) if (Math.hypot(x, y) \u003c= 3.4) put(28 + x, 114 + y, null, 0.62);\n  for (let y = -4; y \u003c= 4; y++)\n    for (let x = -4; x \u003c= 4; x++) {\n      const r = Math.hypot(x, y);\n      const seg = Math.floor(((Math.atan2(y, x) + Math.PI) / (2 * Math.PI)) * 8) % 2;\n      if (r \u003c= 3.4) put(26 + x, 112 + y, r \u003c 0.8 ? [240, 240, 236] : seg ? [228, 54, 46] : [244, 240, 232]);\n    }\n  // The walker, head and shoulders and a short shadow.\n  const wx = P.walk - 4;\n  const wy = Math.min(H - 6, ys + 15);\n  put(wx + 1, wy + 1, null, 0.6);\n  put(wx, wy, [40, 60, 140]);\n  put(wx, wy - 1, SKIN);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, q4(col[p * 3]), q4(col[p * 3 + 1]), q4(col[p * 3 + 2]));\n}\n","layer":{"id":"layer-shoreline","type":"code","name":"shoreline","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Shoreline\n// Family:  ocean\n// Idea:    A surf beach seen straight down from a drone: swell lines roll in at a slant, steepen and break white over a sandbar, reform in the trough, break again and run up the sand as swash with a lacy foam edge, and every backwash leaves a dark sheen of wet sand that dries.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after drone photographs of surf beaches; a wave breaks when it is 0.78 of the depth (McCowan, 1894)\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Speed=0.2..3, Height=1..3, Tide=-1..1\n//\n// Knob 1: Water. Tropical turquoise over white sand at 0, Atlantic green-blue in the middle, the grey North Sea over brown sand at 1.\n// Knob 2: Speed. How fast the beach runs: at 2 the eight-second swell lands a wave every four seconds.\n// Knob 3: Height. Wave height in metres: at 1 the bar breaks only the bigger waves of each set, at 3 every wave breaks before the bar and the trough runs white.\n// Knob 4: Tide. At -1 low water nearly bares the bar and pulls the water's edge ten rows out; at 1 high water covers the bar and most waves break only at the shore.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sea bed in metres below mid tide: a shelf deepening to 12 m at the top, a sandbar on\n// row 52 and the water's edge on row 92, where the beach rises 7 cm a row.\nconst SHORE = 92;\nconst BAR = 52;\nconst SLOPE = 0.07;\n// The swell's period in seconds, and its slant: a crest reaches each column 15 ms after the\n// one to its left, a slope of 6 degrees out in deep water and less as it slows near the shore.\nconst PERIOD = 8;\nconst SKEW = 0.015;\n// A wave breaks when it is 0.78 of the depth and stops breaking once it is under 0.45 of it.\nconst GAMMA = 0.78;\nconst REFORM = 0.45;\n// Seconds the foam takes to fade to a third, and wet sand to dry to a third.\nconst FOAM_T = 5;\nconst DRY_T = 7;\n// The swash slows by RUN rows a second every second going up and by 0.75 of that coming back.\nconst RUN = 2.6;\n// Water seen from above in deep and in shallow water, the sand, and the foam: tropical,\n// Atlantic, North Sea.\nconst SEAS = [\n  [[8, 78, 142], [56, 212, 200], [238, 228, 204], [246, 250, 250]],\n  [[12, 52, 92], [44, 142, 142], [214, 188, 146], [240, 244, 244]],\n  [[38, 56, 64], [96, 118, 110], [178, 160, 132], [224, 228, 222]],\n];\n// Two towels: column, row, width, height and their two stripes.\nconst TOWELS = [\n  [9, 113, 4, 7, [40, 90, 200], [236, 236, 230]],\n  [44, 117, 7, 4, [230, 120, 40], [250, 200, 60]],\n];\nconst SKIN = [214, 150, 110];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst q4 = (v) => (v \u003c= 0 ? 0 : v >= 254 ? 255 : ((v + 2) >> 2) \u003c\u003c 2);\nconst mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n\nfunction depth(P, x, y) {\n  const off = Math.max(0, 80 - y);\n  const channel = P.rip[x] * clamp((y - 40) / 10, 0, 1) * clamp((88 - y) / 12, 0, 1);\n  return SLOPE * (SHORE - y) + 0.0009 * off * off - P.bump[x] * Math.exp(-(((y - BAR) / 7) ** 2)) + channel + P.tide;\n}\n\n// For the tide as it stands: the depth under each LED, how deep its water looks and how much\n// sand shows through it, and how long a crest takes from the top row to each row. Waves run\n// at 2.1 rows a second for every square root of a metre of depth, plus a little for their\n// own height, so they slow and bunch up as the water shoals.\nfunction retide(P) {\n  P.ys = SHORE + P.tide / SLOPE;\n  for (let p = 0; p \u003c N; p++) {\n    const d = (P.d[p] = depth(P, p % W, (p / W) | 0));\n    P.q[p] = Math.max(0.05, d) ** 0.25;\n    P.ka[p] = 1 - Math.exp(-Math.max(0, d) / 2.2);\n    P.ke[p] = 0.7 * Math.exp(-Math.max(0, d) / 0.25);\n  }\n  P.tt[0] = 0;\n  for (let y = 0; y \u003c H; y++) {\n    let d = 0;\n    for (let x = 0; x \u003c W; x += 8) d += P.d[y * W + x] / 8;\n    P.tt[y + 1] = P.tt[y] + 1 / (2.1 * Math.sqrt(Math.max(0, d) + 0.6));\n    P.ft[y] = Math.exp(P.tt[y] / FOAM_T);\n  }\n  P.tideAt = P.tide;\n}\n\n// The row a crest has reached at this age.\nfunction crest(P, age) {\n  const tt = P.tt;\n  if (age >= tt[H]) return H;\n  let lo = 0;\n  let hi = H;\n  while (hi - lo > 1) {\n    const m = (lo + hi) >> 1;\n    if (tt[m] \u003c= age) lo = m;\n    else hi = m;\n  }\n  return lo + (age - tt[lo]) / (tt[lo + 1] - tt[lo]);\n}\n\n// A new wave and what it will do in each column on its way in. It shoals by Green's law\n// (height times the fourth root of depth stays the same) and breaks at GAMMA, the harder the\n// further over it is; broken, it loses a twenty-fifth of its height a row, and it reforms in\n// the deeper trough. Per row: its height, and how much foam it makes there.\nfunction spawn(P, t0) {\n  const k = P.count++;\n  // Sets: every seventh wave is the biggest, the ones between smaller.\n  const set = 0.5 + 0.5 * Math.sin((k * 2 * Math.PI) / 7 + P.phase);\n  const h = P.height * (0.45 + 0.65 * set + 0.12 * (Math.random() - 0.5));\n  // Bigger waves make more foam, and it lasts longer.\n  const more = 0.6 + 0.3 * h;\n  // A retired wave's arrays are used again.\n  const old = P.pool.pop();\n  const ht = old ? old.ht : new Float32Array(N);\n  const fs = old ? old.fs : new Float32Array(N);\n  const first = new Int16Array(W).fill(H);\n  for (let x = 0; x \u003c W; x++) {\n    let flux = h * 6 ** 0.25;\n    let s = 0;\n    let hc = h;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      const d = Math.max(0.05, P.d[p]);\n      let v = flux / P.q[p];\n      if (s > 0) {\n        v = Math.min(hc * 0.96, GAMMA * d);\n        s = Math.min(1, s + 0.06);\n        if (v \u003c REFORM * d) (s = 0), (flux = v * P.q[p]);\n      } else if (v > GAMMA * d) {\n        s = clamp((v / (GAMMA * d) - 1) * 4 + 0.3, 0.3, 1);\n        v = GAMMA * d;\n        if (first[x] === H) first[x] = y;\n      }\n      hc = v;\n      ht[p] = v;\n      fs[p] = s * more;\n    }\n  }\n  P.waves.push({ t0, h, ht, fs, first, land: new Uint8Array(W) });\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, count: 0, waves: [], pool: [], tide: 0, tideAt: 99, height: 1, started: false });\n  for (const k of [\"d\", \"q\", \"ka\", \"ke\", \"wet\", \"grain\", \"lace\"]) P[k] = new Float32Array(N);\n  for (const k of [\"S\", \"U\"]) P[k] = new Float32Array(W);\n  for (const k of [\"light\", \"foam\", \"ft\"]) P[k] = new Float32Array(H);\n  P.tt = new Float32Array(H + 1);\n  P.row = new Int32Array(H);\n  P.col = new Float32Array(N * 3);\n  // The bar's crest rises and falls along the beach, and a rip channel cuts through it and\n  // on in to the shore, up to 0.8 m deeper than the trough beside it.\n  const rx = 30 + Math.random() * 24;\n  const ph = Math.random() * 6;\n  for (const k of [\"bump\", \"cusp\", \"rip\"]) P[k] = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    const r = Math.exp(-(((x - rx) / 6) ** 2));\n    P.rip[x] = 0.8 * r;\n    P.bump[x] = 2.4 * (1 + 0.1 * Math.sin(x * 0.11 + ph)) * (1 - 0.55 * r);\n    // Beach cusps: the run-up reaches further every 16 columns.\n    P.cusp[x] = 1 + 0.18 * Math.sin((x * 2 * Math.PI) / 16 + ph);\n  }\n  // Lace: Worley noise with three points in each cell of an 8 LED grid that wraps, the\n  // second-nearest point's distance less the nearest's, so it is 0 along the cell walls\n  // where the bubbles gather.\n  const pts = [];\n  for (let j = 0; j \u003c 16 * 8 * 3; j++) pts.push(Math.random() * 8, Math.random() * 8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let f1 = 99;\n      let f2 = 99;\n      const cx = x >> 3;\n      const cy = y >> 3;\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++)\n          for (let n = 0; n \u003c 3; n++) {\n            const q = ((((cy + j + 16) % 16) * 8 + ((cx + i + 8) % 8)) * 3 + n) * 2;\n            const d = Math.hypot((cx + i) * 8 + pts[q] - x - 0.5, (cy + j) * 8 + pts[q + 1] - y - 0.5);\n            if (d \u003c f1) (f2 = f1), (f1 = d);\n            else if (d \u003c f2) f2 = d;\n          }\n      P.lace[y * W + x] = Math.min(1, (f2 - f1) / 2.2);\n      // A dark grain here and there, and a few pale shell bits.\n      const h = Math.random();\n      P.grain[y * W + x] = h \u003c 0.04 ? -0.18 : h > 0.96 ? 0.07 : 0;\n    }\n  // Someone walking along the beach above the swash.\n  P.walk = Math.random() * W;\n}\n\n// A bore reaching the water's edge runs up the beach: its reach in rows grows with the\n// square root of the wave's height and with the cusps. Meeting the backwash of the one\n// before, it drives that sheet back up.\nfunction launch(P, x, w) {\n  const R = 9 * Math.sqrt(w.h) * P.cusp[x] * (1 + 0.15 * Math.sin(x * 0.3 + w.t0));\n  const u = Math.sqrt(2 * RUN * R);\n  if (P.S[x] > P.ys) P.U[x] = Math.max(P.U[x], u * 0.75);\n  else (P.S[x] = P.ys), (P.U[x] = u);\n}\n\nfunction step(P, dt) {\n  P.t += dt;\n  if (Math.abs(P.tide - P.tideAt) > 0.01) retide(P);\n  const ys = P.ys;\n  while (P.next \u003c= P.t) {\n    spawn(P, P.next);\n    P.next += PERIOD * (0.9 + 0.2 * Math.random());\n  }\n  // A wave is done once its foam has faded behind the water's edge.\n  const done = P.tt[Math.min(H, Math.ceil(ys))] + 4 * FOAM_T;\n  while (P.waves.length && P.t - P.waves[0].t0 >= done) P.pool.push(P.waves.shift());\n  const dry = Math.exp(-dt / DRY_T);\n  for (let x = 0; x \u003c W; x++) {\n    for (const w of P.waves)\n      if (!w.land[x] && crest(P, P.t - w.t0 - SKEW * x) >= ys) {\n        w.land[x] = 1;\n        launch(P, x, w);\n      }\n    if (P.S[x] > ys || P.U[x] > 0) {\n      P.S[x] = Math.min(H + 2, P.S[x] + P.U[x] * dt);\n      P.U[x] -= (P.U[x] > 0 ? RUN : 0.75 * RUN) * dt;\n      if (P.S[x] \u003c= ys) (P.S[x] = ys), (P.U[x] = 0);\n    }\n    for (let y = Math.max(0, Math.floor(ys)); y \u003c H; y++) P.wet[y * W + x] = y \u003c= P.S[x] ? 1 : P.wet[y * W + x] * dry;\n  }\n  P.walk = (P.walk + 0.45 * dt) % (W + 8);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  const s = clamp(k[1], 0.05, 4);\n  P.sea = clamp(k[0], 0, 1);\n  P.height = clamp(k[2], 0.5, 3.5);\n  P.tide = 0.7 * clamp(k[3], -1, 1);\n  if (!P.started) {\n    // The beach has been running for half a minute when the panel opens, with the swell\n    // already in flight and the biggest wave of a set due on the bar 14 beach seconds later.\n    P.started = true;\n    retide(P);\n    P.next = -P.tt[BAR] - 2 * PERIOD;\n    P.phase = Math.PI / 2 - (2 * Math.PI * (44 + 2 * PERIOD)) / (7 * PERIOD);\n    for (let i = 0; i \u003c 30 * 8; i++) step(P, 1 / 8);\n  }\n  step(P, dt * s);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const u = P.sea * 2;\n  const i0 = Math.min(1, Math.floor(u));\n  const [deep, shallow, sand, white] = [0, 1, 2, 3].map((j) => mix(SEAS[i0][j], SEAS[i0 + 1][j], u - i0));\n  // Sand under a few centimetres of water, wet sand, and the swash's thin sheet.\n  const under = mix(sand, deep, 0.25);\n  const damp = sand.map((v, j) => v * 0.68 + deep[j] * 0.06);\n  const film = mix(damp, shallow, 0.5);\n  const { light, foam, lace, col, ys, ka, ke, ft, wet, grain } = P;\n  // The lace drifts slowly in to the beach.\n  const drift = Math.floor(P.t * 0.6);\n  const row = P.row;\n  for (let y = 0; y \u003c H; y++) row[y] = ((((y - drift) % H) + H) % H) * W;\n  for (let x = 0; x \u003c W; x++) {\n    light.fill(0);\n    foam.fill(0);\n    for (const w of P.waves) {\n      // A crest not yet on the panel is still coming in above it.\n      const age = P.t - w.t0 - SKEW * x;\n      const Y = age \u003c 0 ? age / P.tt[1] : crest(P, age);\n      const yc = clamp(Math.floor(Y), 0, Math.min(Math.floor(ys) - 1, H - 1));\n      const s = w.fs[yc * W + x];\n      if (Y \u003c ys) {\n        // The face of the swell: lit behind the crest and in shade in front of it, the shade\n        // narrowing and darkening as the wave steepens.\n        const steep = clamp(w.ht[yc * W + x] / (GAMMA * Math.max(0.1, P.d[yc * W + x])), 0, 1);\n        const L = PERIOD / (P.tt[yc + 1] - P.tt[yc]);\n        const amp = 0.07 + 0.03 * w.h + 0.3 * steep;\n        const back = 0.3 * L;\n        const front = Math.max(1.5, 0.16 * L * (1 - 0.6 * steep));\n        for (let y = Math.max(0, Math.ceil(Y - back)); y \u003c Math.min(H, Y + front); y++) {\n          const v = y \u003c Y ? (Y - y) / back : (y - Y) / front;\n          light[y] += 4 * v * (1 - v) * (y \u003c Y ? amp : -1.3 * amp);\n        }\n        // A breaking crest is a band of white, thicker the harder it breaks, with a ragged\n        // leading edge.\n        if (s > 0) {\n          const sb = Math.min(1, s);\n          const edge = Y + 0.5 + sb * (0.8 + 1.6 * lace[(yc * W + x * 7) % N]);\n          for (let y = Math.max(0, Math.floor(Y - 1 - 2 * sb)); y \u003c= edge && y \u003c H; y++) foam[y] = Math.max(foam[y], 0.25 + 0.75 * s);\n        }\n      }\n      // Behind a broken crest the foam it made fades with the time since it passed.\n      const fade = Math.exp(-age / FOAM_T);\n      for (let y = yc; y >= w.first[x]; y--) {\n        const f = w.fs[y * W + x] * fade * ft[y];\n        if (f > foam[y]) foam[y] = f;\n      }\n    }\n    const S = P.S[x];\n    const back = P.U[x] > 0 ? 1 : 0.55;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      let r;\n      let g;\n      let b;\n      let f = 0;\n      if (y \u003c ys) {\n        // Open water: deep blue fading to the shallow colour over the bar and the beach face,\n        // and the sand showing through in the last few centimetres.\n        const a = ka[p];\n        const e = ke[p];\n        const m = 1 + light[y];\n        r = (shallow[0] + (deep[0] - shallow[0]) * a) * (1 - e) + under[0] * e;\n        g = (shallow[1] + (deep[1] - shallow[1]) * a) * (1 - e) + under[1] * e;\n        b = (shallow[2] + (deep[2] - shallow[2]) * a) * (1 - e) + under[2] * e;\n        r *= m;\n        g *= m;\n        b *= m;\n        f = foam[y];\n      } else if (y \u003c= S) {\n        // The swash: a sheet of water over the sand, its foam thick at the edge and thin in\n        // the backwash.\n        r = film[0];\n        g = film[1];\n        b = film[2];\n        f = (S - y \u003c 1.2 ? 1.1 : Math.exp(-(S - y) / 2.5)) * back;\n      } else {\n        // Sand, darker while it is wet, with the sky's sheen on it just after the water goes.\n        const wv = wet[p];\n        const k = 1 + grain[p];\n        const w3 = wv * wv * wv;\n        const sh = 40 * w3 * w3;\n        r = (sand[0] + (damp[0] - sand[0]) * wv) * k + sh * 0.8;\n        g = (sand[1] + (damp[1] - sand[1]) * wv) * k + sh * 0.9;\n        b = (sand[2] + (damp[2] - sand[2]) * wv) * k + sh;\n      }\n      // Foam: solid where it is fresh, a net of bubbles along the lace's cell walls as it fades.\n      const fv = f > 0 ? clamp((f * 1.3 - lace[row[y] + x]) * 3, 0, 1) * (0.75 + 0.25 * Math.min(1, f)) : 0;\n      col[p * 3] = r + (white[0] - r) * fv;\n      col[p * 3 + 1] = g + (white[1] - g) * fv;\n      col[p * 3 + 2] = b + (white[2] - b) * fv;\n    }\n  }\n  // Things on the dry sand, never in the water.\n  const put = (x, y, c, m) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || x >= W || y >= H || y \u003c ys + 2) return;\n    for (let j = 0; j \u003c 3; j++) col[(y * W + x) * 3 + j] = m ? col[(y * W + x) * 3 + j] * m : c[j];\n  };\n  for (const [tx, ty, tw, th, a, b] of TOWELS)\n    for (let y = 0; y \u003c th; y++) for (let x = 0; x \u003c tw; x++) put(tx + x, ty + y, (tw > th ? x : y) % 2 ? b : a);\n  // Someone on the first towel.\n  for (const [x, y, c] of [[10, 114, SKIN], [10, 115, [200, 60, 60]], [11, 115, [200, 60, 60]], [10, 116, SKIN], [11, 117, SKIN]]) put(x, y, c);\n  // The umbrella from above, eight panels, red and white, its shadow down to the right.\n  for (let y = -4; y \u003c= 4; y++) for (let x = -4; x \u003c= 4; x++) if (Math.hypot(x, y) \u003c= 3.4) put(28 + x, 114 + y, null, 0.62);\n  for (let y = -4; y \u003c= 4; y++)\n    for (let x = -4; x \u003c= 4; x++) {\n      const r = Math.hypot(x, y);\n      const seg = Math.floor(((Math.atan2(y, x) + Math.PI) / (2 * Math.PI)) * 8) % 2;\n      if (r \u003c= 3.4) put(26 + x, 112 + y, r \u003c 0.8 ? [240, 240, 236] : seg ? [228, 54, 46] : [244, 240, 232]);\n    }\n  // The walker, head and shoulders and a short shadow.\n  const wx = P.walk - 4;\n  const wy = Math.min(H - 6, ys + 15);\n  put(wx + 1, wy + 1, null, 0.6);\n  put(wx, wy, [40, 60, 140]);\n  put(wx, wy - 1, SKIN);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, q4(col[p * 3]), q4(col[p * 3 + 1]), q4(col[p * 3 + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Water=0..1, Speed=0.2..3, Height=1..3, Tide=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Water","min":0,"max":1,"about":"Tropical turquoise over white sand at 0, Atlantic green-blue in the middle, the grey North Sea over brown sand at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the beach runs: at 2 the eight-second swell lands a wave every four seconds."},{"name":"Height","min":1,"max":3,"about":"Wave height in metres: at 1 the bar breaks only the bigger waves of each set, at 3 every wave breaks before the bar and the trough runs white."},{"name":"Tide","min":-1,"max":1,"about":"At -1 low water nearly bares the bar and pulls the water's edge ten rows out; at 1 high water covers the bar and most waves break only at the shore."}],"start":[0,2,1,0.06],"measures":{"motion":0.1312,"detail":0.0226,"edges":0.2179,"complexity":0.5021,"coverage":1,"colour":0.3833,"drift":0.0432},"knobResponse":[0.2028,0.0707,0.0565,0.1108]},{"slug":"skein","title":"Skein","family":"bird","round":23,"note":"해 진 뒤 하늘을 올려다보면 기러기 떼가 V 자로 패널 위쪽, 북쪽으로 날아가요. 지친 선두가 한쪽 줄로 물러나면 다른 기러기가 앞에 서고, 커다란 보름달 앞을 지날 때는 새카만 실루엣이 돼요. 뒤따라온 작은 떼가 꼬리에 붙기도 해요.","idea":"Looking straight up at dusk as a skein of geese flies north over you in a ragged V, its tired leader now and then dropping back so another goose can take the point, and each bird turns black against the big full moon as it crosses.","buttons":"K1 tap startles the skein, and the V breaks into a honking tangle before it pulls itself back into shape.","code":"// ===== Patternflow pattern =====\n// Title:   Skein\n// Family:  bird\n// Idea:    Looking straight up at dusk as a skein of geese flies north over you in a ragged V, its tired leader now and then dropping back so another goose can take the point, and each bird turns black against the big full moon as it crosses.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the V formation of migrating geese\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Geese=7..31, Wind=-1..1\n//\n// Knob 1: Dusk. How late it is: at 0 the golden afterglow fills the top of the sky and the moon is pale, and towards 1 the glow sinks to a dim band and the moon and the stars carry a navy sky.\n// Knob 2: Speed. The pace of everything: at 2 a skein crosses the panel in about ten seconds with its wings beating three times a second, and at 0.2 it all runs ten times slower.\n// Knob 3: Geese. How many birds fly in the skein, from a small V of seven to a long one of thirty one whose arms reach most of the way down the panel. A big skein flies higher, so its birds look smaller.\n// Knob 4: Wind. A crosswind from the side. The geese turn their bodies into it and crab across the sky, and the arm on the downwind side grows longer. The clouds drift with it too.\n// Buttons: K1 tap startles the skein, and the V breaks into a honking tangle before it pulls itself back into shape.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, sin, cos, abs, hypot, exp, floor, round, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Ground speed of a skein at Speed 2, in LEDs a second.\nconst V0 = 12;\n// The radius of the moon.\nconst MR = 11.5;\nconst MS = 27;\n\n// A fixed hash and smooth value noise, for the sky's haze and the clouds.\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x);\n  const iy = floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy, s);\n  const b = hash(ix + 1, iy, s);\n  const c = hash(ix, iy + 1, s);\n  const d = hash(ix + 1, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\nconst fbm = (x, y, s) => 0.5 * noise(x, y, s) + 0.3 * noise(x * 2.1, y * 2.1, s + 7) + 0.2 * noise(x * 4.3, y * 4.3, s + 13);\n\n// Sky colours by how far a spot is from the afterglow, at dusk and at night.\nconst SKY0 = [\n  [0, 255, 206, 120],\n  [0.1, 252, 162, 72],\n  [0.22, 238, 108, 82],\n  [0.34, 164, 74, 122],\n  [0.48, 74, 62, 146],\n  [0.66, 30, 44, 122],\n  [0.82, 14, 26, 84],\n  [0.96, 6, 12, 38],\n  [1.06, 3, 7, 20],\n  [2, 2, 5, 14],\n];\nconst SKY1 = [\n  [0, 84, 62, 96],\n  [0.14, 30, 34, 88],\n  [0.4, 12, 22, 66],\n  [2, 6, 13, 48],\n];\n// The undersides of clouds, lit from below by the sun that has set.\nconst CLOUD0 = [\n  [0, 255, 232, 176],\n  [0.2, 255, 176, 112],\n  [0.4, 252, 124, 128],\n  [0.65, 196, 96, 156],\n  [2, 126, 78, 146],\n];\nconst C3 = [0, 0, 0];\nfunction ramp(P, e, out) {\n  let i = 0;\n  while (i \u003c P.length - 2 && e > P[i + 1][0]) i++;\n  const a = P[i];\n  const b = P[i + 1];\n  const t = clamp((e - a[0]) / (b[0] - a[0]), 0, 1);\n  out[0] = a[1] + (b[1] - a[1]) * t;\n  out[1] = a[2] + (b[2] - a[2]) * t;\n  out[2] = a[3] + (b[3] - a[3]) * t;\n  return out;\n}\n// How far from the afterglow, 0 at the top right corner (north west) to 1 at the bottom left.\nconst glowDist = (x, y) => (y + 0.3 * (63 - x)) / 136;\n\n// A cloud: a soft patch of density, drifting sideways and coming round again.\nfunction newCloud(c, y, x) {\n  c.w = 30 + floor(Math.random() * 16);\n  c.h = 9 + floor(Math.random() * 6);\n  c.y = y;\n  c.x = x;\n  c.m = new Float32Array(c.w * c.h);\n  const s = floor(Math.random() * 9999);\n  for (let j = 0; j \u003c c.h; j++)\n    for (let i = 0; i \u003c c.w; i++) {\n      const dx = (i + 0.5) / c.w - 0.5;\n      const dy = (j + 0.5) / c.h - 0.5;\n      const env = 1 - 4 * dx * dx - 4 * dy * dy;\n      const n = fbm(i * 0.2, j * 0.32, s);\n      c.m[j * c.w + i] = sstep(0.1, 0.55, env * 0.8 + (n - 0.45) * 1.2);\n    }\n  return c;\n}\n\nfunction newBird(S, x, y) {\n  const b = { x, y, vx: 0, vy: -V0, hd: 0, gs: 0, ph: Math.random() * 6.28, j: Math.random() * 99, drop: 0 };\n  S.birds.push(b);\n  return b;\n}\n\n// A skein is a leader and two arms, each an ordered list of birds from the front.\nfunction newSkein(S, n, x, y, fast) {\n  const hd = -0.34 * S.wind;\n  const vx = V0 * fast * sin(hd) + 9 * S.wind;\n  const vy = -V0 * fast * cos(hd);\n  const k = { x, y, hd, vx, vy, L: [], R: [], fast, want: n, rot: 3.2 + Math.random() * 2, side: Math.random() \u003c 0.5 ? -1 : 1, tangle: 0, join: null, flap: Math.random() * 6 };\n  k.lead = newBird(S, x, y);\n  for (let i = 1; i \u003c n; i++) (i & 1 ? k.L : k.R).push(newBird(S, x, y));\n  for (const b of [k.lead, ...k.L, ...k.R]) {\n    b.vx = vx;\n    b.vy = vy;\n  }\n  S.skeins.push(k);\n  place(S, k, true);\n  return k;\n}\n\n// Where each bird of a skein wants to be. With snap the birds are put there.\nfunction place(S, k, snap) {\n  const n = 1 + k.L.length + k.R.length;\n  const t = S.t;\n  // A big skein flies higher, so its birds look smaller and sit closer.\n  k.gs = clamp(1.05 - 0.013 * (n - 7), 0.74, 1.05);\n  const sp = k.gs * (10.2 - 0.07 * (n - 7)) * (1 + 0.04 * sin(t * 0.29 + k.flap));\n  const a0 = max(0.31, 0.64 - 0.02 * (n - 7)) * (1 + 0.07 * sin(t * 0.37 + k.flap));\n  const h = k.hd;\n  const fx = sin(h);\n  const fy = -cos(h);\n  const set = (b, tx, ty) => {\n    // Each bird wanders a little round its slot, so the V is never quite straight.\n    tx += 0.9 * sin(t * 0.7 + b.j) + k.tangle * 13 * sin(t * 1.3 + b.j * 3.1);\n    ty += 1.3 * sin(t * 0.53 + b.j * 1.7) + k.tangle * 11 * sin(t * 1.1 + b.j * 2.3);\n    b.tx = tx;\n    b.ty = ty;\n    if (snap) {\n      b.x = tx;\n      b.y = ty;\n    }\n  };\n  // Startled, the whole skein bunches round its middle.\n  const cx = k.x - fx * 12 * k.tangle;\n  const cy = k.y - fy * 12 * k.tangle;\n  set(k.lead, k.x + (cx - k.x) * k.tangle, k.y + (cy - k.y) * k.tangle);\n  for (const s of [-1, 1]) {\n    const arm = s \u003c 0 ? k.L : k.R;\n    // The downwind arm opens a little wider.\n    const a = a0 * (1 + 0.2 * s * S.wind);\n    const sx = s * sin(a);\n    const bk = cos(a);\n    for (let r = 0; r \u003c arm.length; r++) {\n      const b = arm[r];\n      const d = (r + 1) * sp;\n      // Right of the heading is (-fy, fx); back is (-fx, -fy).\n      let px = k.x + d * (sx * -fy - bk * fx);\n      let py = k.y + d * (sx * fx - bk * fy);\n      // A bird moving back along the arm keeps to its outside.\n      px += s * 4 * b.drop * cos(h);\n      py += s * 4 * b.drop * sin(h);\n      const u = k.tangle;\n      set(b, px + (cx - px) * u, py + (cy - py) * u);\n    }\n  }\n}\n\nfunction spawn(S, first) {\n  const n = S.n;\n  const x0 = 32 - S.wind * 30 + (first ? 0 : (Math.random() - 0.5) * 14);\n  const ext = ((n - 1) / 2) * (8.6 - 0.11 * (n - 7));\n  const y0 = first ? max(50, 110 - ext) : 140;\n  const k = newSkein(S, n, x0, y0, 1);\n  // The second, smaller skein comes on behind, and most times it catches up and joins.\n  const m = max(3, round(n * 0.3));\n  const joins = first || Math.random() \u003c 0.65;\n  const off = joins ? (Math.random() - 0.5) * 10 : (Math.random() \u003c 0.5 ? -1 : 1) * 17;\n  const k2 = newSkein(S, m, x0 + off, max(150, y0 + ext + 40), joins ? 1.6 : 1.04);\n  k2.join = joins ? k : null;\n  k.next = first ? 4.5 : 8 + Math.random() * 3;\n}\n\nexport function setup(params) {\n  const S = {\n    t: 0,\n    birds: [],\n    skeins: [],\n    sky: new Float32Array(N * 3),\n    buf: new Float32Array(N * 3),\n    A: new Float32Array(N),\n    e: new Float32Array(N),\n    haze: new Float32Array(N),\n    dk: -1,\n    moon: new Float32Array(MS * MS),\n    cov: new Float32Array(MS * MS),\n    stars: [],\n    clouds: [],\n    n: 7,\n    wind: 0.06,\n    dusk: 0,\n    started: false,\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      S.e[y * W + x] = glowDist(x, y);\n      S.haze[y * W + x] = 0.94 + 0.12 * fbm(x * 0.06, y * 0.035, 5);\n    }\n  // The moon's face: a full disc, darker seas on it and a darker rim.\n  const seas = [\n    [-3.5, -3.5, 4.6, 3.8],\n    [2.5, -3.2, 2.8, 2.6],\n    [4.2, 1.2, 3.2, 3.4],\n    [-6.2, 1.5, 3, 5.5],\n    [-0.5, 4.5, 3, 1.8],\n  ];\n  for (let j = 0; j \u003c MS; j++)\n    for (let i = 0; i \u003c MS; i++) {\n      const dx = i - 13;\n      const dy = j - 13;\n      const r = hypot(dx, dy);\n      const cov = clamp(MR + 0.5 - r, 0, 1);\n      let sea = 0;\n      for (const [sx, sy, rx, ry] of seas) sea = max(sea, sstep(1.15, 0.2, hypot((dx - sx) / rx, (dy - sy) / ry)));\n      const alb = 1 - 0.15 * sea - 0.12 * (r / MR) ** 2 - 0.05 * noise(i * 0.7, j * 0.7, 3);\n      S.moon[j * MS + i] = alb;\n      S.cov[j * MS + i] = cov;\n    }\n  for (let i = 0; i \u003c 90; i++) S.stars.push({ x: floor(Math.random() * W), y: floor(Math.random() * H), m: Math.random() ** 2.2, p: Math.random() * 6.28 });\n  S.clouds.push(newCloud({}, 30, 4), newCloud({}, 68, 26), newCloud({}, 112, -6));\n  params.s = S;\n}\n\nfunction stepBirds(S, dt) {\n  const ws = S.wind;\n  for (const k of S.skeins) {\n    // The geese head a little into the wind and crab across it.\n    k.hd += (-0.34 * ws - k.hd) * min(1, dt * 1.5);\n    const v = V0 * k.fast;\n    const vx = v * sin(k.hd) + 9 * ws;\n    const vy = -v * cos(k.hd);\n    k.vx = vx;\n    k.vy = vy;\n    k.x += vx * dt;\n    k.y += vy * dt;\n    k.flap += dt * 2 * PI * 2.9 * (1 + 0.7 * k.tangle);\n    if (k.tangle > 0) {\n      k.tangle -= dt * 0.33;\n      if (k.tangle \u003c= 0) {\n        // Reformed, though not always in the same order.\n        k.tangle = 0;\n        const all = [k.lead, ...k.L, ...k.R].sort(() => Math.random() - 0.5);\n        k.lead = all[0];\n        k.L = [];\n        k.R = [];\n        for (let i = 1; i \u003c all.length; i++) (i & 1 ? k.L : k.R).push(all[i]);\n      }\n    }\n    // The leader tires, drops back along one arm, and the next bird up takes the point.\n    k.rot -= dt;\n    if (k.rot \u003c= 0 && !k.tangle) {\n      k.rot = 6 + Math.random() * 3;\n      k.side = -k.side;\n      const arm = k.side \u003c 0 ? k.L : k.R;\n      if (arm.length) {\n        const old = k.lead;\n        k.lead = arm.shift();\n        arm.push(old);\n        old.drop = 1;\n      }\n    }\n    // Keep the arms in the split the wind asks for, one bird at a time.\n    const m = k.L.length + k.R.length;\n    const wantR = round(m * clamp(0.5 + 0.36 * ws, 0.1, 0.9));\n    k.bal = (k.bal || 0) - dt;\n    if (k.bal \u003c= 0 && wantR !== k.R.length && !k.tangle) {\n      k.bal = 0.5;\n      if (wantR > k.R.length && k.L.length) k.R.push(k.L.pop());\n      else if (k.R.length) k.L.push(k.R.pop());\n    }\n    // The second skein joins the tail of the first when it has caught up.\n    if (k.join) {\n      const j = k.join;\n      const tail = [j.lead, ...j.L, ...j.R].reduce((a, b) => (b.y > a.y ? b : a));\n      if (j.gone || k.y \u003c tail.y + 10) {\n        const add = [k.lead, ...k.L, ...k.R];\n        if (!j.gone) {\n          for (const b of add) (j.L.length \u003c= j.R.length ? j.L : j.R).push(b);\n          j.want += add.length;\n          k.L = [];\n          k.R = [];\n          k.lead = null;\n          k.gone = true;\n        }\n        k.join = null;\n      }\n    }\n  }\n  S.skeins = S.skeins.filter((k) => !k.gone);\n  // When a skein is high on the panel, the next one comes in from the bottom.\n  for (const k of S.skeins)\n    if (k.next !== undefined) {\n      k.next -= dt;\n      if (k.next \u003c= 0) {\n        k.next = undefined;\n        spawn(S, false);\n      }\n    }\n  // The Geese knob adds birds to the tail of the newest skein, or lets some fall away.\n  const main = S.skeins.filter((k) => k.join === null && k.fast === 1).pop();\n  if (main) {\n    if (S.lastN !== S.n) main.want = max(3, main.want + S.n - (S.lastN || S.n));\n    S.lastN = S.n;\n    S.adj = (S.adj || 0) - dt;\n    const n = 1 + main.L.length + main.R.length;\n    if (S.adj \u003c= 0 && n !== main.want) {\n      S.adj = 0.15;\n      const arm = main.L.length \u003c= main.R.length ? main.L : main.R;\n      if (n \u003c main.want) {\n        const tail = arm.length ? arm[arm.length - 1] : main.lead;\n        arm.push(newBird(S, tail.x, max(tail.y + 18, 136)));\n      } else {\n        const long = main.L.length > main.R.length ? main.L : main.R;\n        const b = long.pop();\n        b.stray = long === main.L ? -1 : 1;\n      }\n    }\n  }\n  for (const k of S.skeins) place(S, k, false);\n  // Each bird springs towards its slot and matches the skein's speed.\n  for (const k of S.skeins) {\n    const all = [k.lead, ...k.L, ...k.R];\n    for (let r = 0; r \u003c all.length; r++) {\n      const b = all[r];\n      b.sk = k;\n      b.rank = r === 0 ? 0 : (r + 1) >> 1;\n    }\n  }\n  const om = 2.2;\n  for (const b of S.birds) {\n    const k = b.sk;\n    if (b.stray) {\n      // A bird that leaves falls back and peels away to its side.\n      b.vx += (b.stray * 6 + 9 * ws - b.vx) * dt;\n      b.vy += (-V0 * 0.4 - b.vy) * dt;\n      b.hd += (b.stray * 0.4 - b.hd) * dt;\n    } else if (k) {\n      const ex = b.tx - b.x;\n      const ey = b.ty - b.y;\n      const ax = om * om * ex - 2 * om * (b.vx - k.vx);\n      const ay = om * om * ey - 2 * om * (b.vy - k.vy);\n      b.vx += ax * dt;\n      b.vy += ay * dt;\n      // Not faster than a goose can close up.\n      const rx = b.vx - k.vx;\n      const ry = b.vy - k.vy;\n      const rs = hypot(rx, ry);\n      if (rs > 13) {\n        b.vx = k.vx + (rx * 13) / rs;\n        b.vy = k.vy + (ry * 13) / rs;\n      }\n      if (b.drop > 0 && hypot(ex, ey) \u003c 2) b.drop = max(0, b.drop - dt);\n      // Bodies point along the skein's heading, banking a little as they shift.\n      const want = k.hd + clamp(0.03 * rx, -0.4, 0.4) + k.tangle * 0.6 * sin(S.t * 2.3 + b.j);\n      b.hd += (want - b.hd) * min(1, dt * 4);\n      b.gs = b.gs ? b.gs + (k.gs - b.gs) * min(1, dt) : k.gs;\n      // Wings beat out of step down each arm.\n      const tp = k.flap - b.rank * 0.9 + k.tangle * b.j;\n      b.ph += dt * 2 * PI * 2.9 * (1 + 0.7 * k.tangle) + 0.08 * sin(tp - b.ph);\n    }\n    b.x += b.vx * dt;\n    b.y += b.vy * dt;\n    if (b.stray) b.ph += dt * 2 * PI * 2.9;\n    if (b.y \u003c -14 || b.y > 190 || b.x \u003c -50 || b.x > 114) b.out = true;\n  }\n  // A skein whose birds have all flown off the top is gone.\n  for (const k of S.skeins) {\n    const all = [k.lead, ...k.L, ...k.R];\n    if (all.every((b) => b.y \u003c -14)) k.gone = true;\n  }\n  S.skeins = S.skeins.filter((k) => !k.gone);\n  S.birds = S.birds.filter((b) => !(b.out && (b.stray || !b.sk || b.sk.gone)));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.dusk = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2;\n  S.n = clamp(round(k[2]), 7, 31);\n  S.wind = clamp(k[3], -1, 1);\n  if (!S.started) {\n    S.started = true;\n    spawn(S, true);\n  }\n  const d = dt * tempo;\n  S.t += d;\n  if (input.btnPressed && input.btnPressed[0])\n    for (const sk of S.skeins) {\n      sk.tangle = 1;\n      for (const b of [sk.lead, ...sk.L, ...sk.R]) {\n        b.vx += (Math.random() - 0.5) * 30;\n        b.vy += (Math.random() - 0.5) * 24;\n      }\n    }\n  stepBirds(S, d);\n  // Clouds drift with the wind high up and come round again.\n  const cv = (2.3 + 5 * S.wind) * d;\n  for (const c of S.clouds) {\n    c.x += cv;\n    if (c.x > W + 2) newCloud(c, 14 + Math.random() * 100, -c.w - 2 - Math.random() * 10);\n    else if (c.x \u003c -c.w - 14) newCloud(c, 14 + Math.random() * 100, W + 2);\n  }\n  // The moon climbs a little as the night goes on.\n  S.mx = 19 + 4 * S.dusk;\n  S.my = 104 - 22 * S.dusk - 5 * (1 - exp(-S.t / 50));\n}\n\nfunction paintSky(S) {\n  const dk = S.dusk;\n  const w = sstep(0.2, 1, dk);\n  const g = 1 + 1.8 * dk;\n  const c0 = [0, 0, 0];\n  const c1 = [0, 0, 0];\n  for (let i = 0; i \u003c N; i++) {\n    const e = S.e[i];\n    ramp(SKY0, e * g, c0);\n    ramp(SKY1, e, c1);\n    const hz = S.haze[i];\n    S.sky[i * 3] = (c0[0] + (c1[0] - c0[0]) * w) * hz;\n    S.sky[i * 3 + 1] = (c0[1] + (c1[1] - c0[1]) * w) * hz;\n    S.sky[i * 3 + 2] = (c0[2] + (c1[2] - c0[2]) * w) * hz;\n  }\n  S.dk = dk;\n}\n\n// A tapered stroke into the geese's coverage, kept as the larger of what is there.\nfunction stroke(A, ax, ay, bx, by, ra, rb) {\n  const x0 = max(0, floor(min(ax, bx) - 2));\n  const x1 = min(W - 1, Math.ceil(max(ax, bx) + 2));\n  const y0 = max(0, floor(min(ay, by) - 2));\n  const y1 = min(H - 1, Math.ceil(max(ay, by) + 2));\n  const dx = bx - ax;\n  const dy = by - ay;\n  const ll = dx * dx + dy * dy || 1;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const t = clamp(((x - ax) * dx + (y - ay) * dy) / ll, 0, 1);\n      const d = hypot(x - ax - dx * t, y - ay - dy * t);\n      const a = clamp(ra + (rb - ra) * t + 0.5 - d, 0, 1);\n      const i = y * W + x;\n      if (a > A[i]) A[i] = a;\n    }\n}\n\n// A goose seen from below: neck stretched forward, wings beating at its sides.\nfunction goose(A, b) {\n  const x = b.x;\n  const y = b.y;\n  if (x \u003c -9 || x > W + 8 || y \u003c -9 || y > H + 8) return;\n  const fx = sin(b.hd);\n  const fy = -cos(b.hd);\n  const P = (u, v) => [x - fy * u + fx * v, y + fx * u + fy * v];\n  const g = b.gs || 1;\n  const s = sin(b.ph);\n  const up = max(0, cos(b.ph));\n  // Seen from below, a wing raised or lowered is foreshortened, and on the\n  // upstroke it bends at the wrist and sweeps its tip back.\n  const th = 0.9 * s;\n  const span = g * (0.8 + 5.2 * cos(th) * (1 - 0.18 * up));\n  const tipv = g * (-0.7 - 1.7 * up + 0.5 * s);\n  const head = P(0, 5.1 * g);\n  const neck = P(0, 1.6 * g);\n  const chest = P(0, 0.9 * g);\n  const tail = P(0, -3.5 * g);\n  stroke(A, chest[0], chest[1], tail[0], tail[1], 1.25 * g, 0.55 * g);\n  stroke(A, neck[0], neck[1], head[0], head[1], max(0.45, 0.48 * g), max(0.55, 0.7 * g));\n  for (const sd of [-1, 1]) {\n    const sh = P(sd * 0.8 * g, 0.8 * g);\n    const wr = P(sd * (0.8 * g + 0.45 * (span - 0.8 * g)), g * (0.9 - 0.5 * up));\n    const tp = P(sd * span, tipv);\n    stroke(A, sh[0], sh[1], wr[0], wr[1], 1.0 * g, 0.75 * g);\n    stroke(A, wr[0], wr[1], tp[0], tp[1], 0.75 * g, 0.35 * g);\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (abs(S.dk - S.dusk) > 0.002) paintSky(S);\n  const dk = S.dusk;\n  const { sky, buf, A } = S;\n  buf.set(sky);\n  // Stars come out where the sky is dark enough to show them.\n  const night = 150 + 200 * sstep(0.1, 0.9, dk);\n  for (const st of S.stars) {\n    const i = st.y * W + st.x;\n    const L = max(sky[i * 3], sky[i * 3 + 1], sky[i * 3 + 2]);\n    const v = clamp((st.m * night - L) / 60, 0, 1) * (0.75 + 0.25 * sin(S.t * 3.1 + st.p * 7));\n    buf[i * 3] += 200 * v;\n    buf[i * 3 + 1] += 210 * v;\n    buf[i * 3 + 2] += 230 * v;\n  }\n  // The moon, pale in the dusk and bright at night with a ring of glow round it.\n  const mx = S.mx;\n  const my = S.my;\n  const mb = 0.8 + 0.2 * dk;\n  const halo = 0.15 + 0.6 * dk;\n  const mc = [255 * mb, 246 * mb, 222 * mb];\n  for (let y = max(0, floor(my - 34)); y \u003c min(H, my + 34); y++)\n    for (let x = max(0, floor(mx - 34)); x \u003c min(W, mx + 34); x++) {\n      const i = (y * W + x) * 3;\n      const r = hypot(x - mx, y - my);\n      const gl = halo * 60 * exp(-max(0, r - MR) / 7);\n      buf[i] += gl * 0.75;\n      buf[i + 1] += gl * 0.8;\n      buf[i + 2] += gl;\n      const ix = round(x - mx + 13);\n      const iy = round(y - my + 13);\n      if (ix \u003c 0 || iy \u003c 0 || ix >= MS || iy >= MS) continue;\n      const cv = S.cov[iy * MS + ix];\n      if (cv \u003c= 0) continue;\n      const m = S.moon[iy * MS + ix];\n      buf[i] += (mc[0] * m - buf[i]) * cv;\n      buf[i + 1] += (mc[1] * m - buf[i + 1]) * cv;\n      buf[i + 2] += (mc[2] * m - buf[i + 2]) * cv;\n    }\n  // Clouds, their undersides lit from below by the afterglow, or grey by the moon at night.\n  const lw = sstep(0.05, 0.85, dk);\n  const g = 1 + 1.8 * dk;\n  for (const c of S.clouds) {\n    const cx = round(c.x);\n    const cy = round(c.y);\n    for (let j = 0; j \u003c c.h; j++) {\n      const y = cy + j;\n      if (y \u003c 0 || y >= H) continue;\n      for (let i = 0; i \u003c c.w; i++) {\n        const x = cx + i;\n        if (x \u003c 0 || x >= W) continue;\n        const dn = c.m[j * c.w + i];\n        if (dn \u003c= 0) continue;\n        const p = y * W + x;\n        ramp(CLOUD0, S.e[p] * g, C3);\n        const mn = exp(-hypot(x - mx, y - my) / 30);\n        const lr = C3[0] + (40 + 60 * mn - C3[0]) * lw;\n        const lg = C3[1] + (46 + 62 * mn - C3[1]) * lw;\n        const lb = C3[2] + (70 + 70 * mn - C3[2]) * lw;\n        const br = 0.5 + 0.5 * dn;\n        const q = p * 3;\n        const o = 0.9 * dn;\n        buf[q] += (lr * br - buf[q]) * o;\n        buf[q + 1] += (lg * br - buf[q + 1]) * o;\n        buf[q + 2] += (lb * br - buf[q + 2]) * o;\n      }\n    }\n  }\n  // The geese, dark against everything behind them.\n  A.fill(0);\n  for (const b of S.birds) goose(A, b);\n  const gr = 6;\n  const gg = 5;\n  const gb = 10;\n  for (let p = 0; p \u003c N; p++) {\n    const a = A[p];\n    const q = p * 3;\n    let r = buf[q];\n    let gn = buf[q + 1];\n    let bl = buf[q + 2];\n    if (a > 0) {\n      r += (gr - r) * a;\n      gn += (gg - gn) * a;\n      bl += (gb - bl) * a;\n    }\n    display.setPixel(p % W, (p / W) | 0, min(255, r) | 0, min(255, gn) | 0, min(255, bl) | 0);\n  }\n}\n","layer":{"id":"layer-skein","type":"code","name":"skein","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Skein\n// Family:  bird\n// Idea:    Looking straight up at dusk as a skein of geese flies north over you in a ragged V, its tired leader now and then dropping back so another goose can take the point, and each bird turns black against the big full moon as it crosses.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the V formation of migrating geese\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Geese=7..31, Wind=-1..1\n//\n// Knob 1: Dusk. How late it is: at 0 the golden afterglow fills the top of the sky and the moon is pale, and towards 1 the glow sinks to a dim band and the moon and the stars carry a navy sky.\n// Knob 2: Speed. The pace of everything: at 2 a skein crosses the panel in about ten seconds with its wings beating three times a second, and at 0.2 it all runs ten times slower.\n// Knob 3: Geese. How many birds fly in the skein, from a small V of seven to a long one of thirty one whose arms reach most of the way down the panel. A big skein flies higher, so its birds look smaller.\n// Knob 4: Wind. A crosswind from the side. The geese turn their bodies into it and crab across the sky, and the arm on the downwind side grows longer. The clouds drift with it too.\n// Buttons: K1 tap startles the skein, and the V breaks into a honking tangle before it pulls itself back into shape.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, sin, cos, abs, hypot, exp, floor, round, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Ground speed of a skein at Speed 2, in LEDs a second.\nconst V0 = 12;\n// The radius of the moon.\nconst MR = 11.5;\nconst MS = 27;\n\n// A fixed hash and smooth value noise, for the sky's haze and the clouds.\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x);\n  const iy = floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy, s);\n  const b = hash(ix + 1, iy, s);\n  const c = hash(ix, iy + 1, s);\n  const d = hash(ix + 1, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\nconst fbm = (x, y, s) => 0.5 * noise(x, y, s) + 0.3 * noise(x * 2.1, y * 2.1, s + 7) + 0.2 * noise(x * 4.3, y * 4.3, s + 13);\n\n// Sky colours by how far a spot is from the afterglow, at dusk and at night.\nconst SKY0 = [\n  [0, 255, 206, 120],\n  [0.1, 252, 162, 72],\n  [0.22, 238, 108, 82],\n  [0.34, 164, 74, 122],\n  [0.48, 74, 62, 146],\n  [0.66, 30, 44, 122],\n  [0.82, 14, 26, 84],\n  [0.96, 6, 12, 38],\n  [1.06, 3, 7, 20],\n  [2, 2, 5, 14],\n];\nconst SKY1 = [\n  [0, 84, 62, 96],\n  [0.14, 30, 34, 88],\n  [0.4, 12, 22, 66],\n  [2, 6, 13, 48],\n];\n// The undersides of clouds, lit from below by the sun that has set.\nconst CLOUD0 = [\n  [0, 255, 232, 176],\n  [0.2, 255, 176, 112],\n  [0.4, 252, 124, 128],\n  [0.65, 196, 96, 156],\n  [2, 126, 78, 146],\n];\nconst C3 = [0, 0, 0];\nfunction ramp(P, e, out) {\n  let i = 0;\n  while (i \u003c P.length - 2 && e > P[i + 1][0]) i++;\n  const a = P[i];\n  const b = P[i + 1];\n  const t = clamp((e - a[0]) / (b[0] - a[0]), 0, 1);\n  out[0] = a[1] + (b[1] - a[1]) * t;\n  out[1] = a[2] + (b[2] - a[2]) * t;\n  out[2] = a[3] + (b[3] - a[3]) * t;\n  return out;\n}\n// How far from the afterglow, 0 at the top right corner (north west) to 1 at the bottom left.\nconst glowDist = (x, y) => (y + 0.3 * (63 - x)) / 136;\n\n// A cloud: a soft patch of density, drifting sideways and coming round again.\nfunction newCloud(c, y, x) {\n  c.w = 30 + floor(Math.random() * 16);\n  c.h = 9 + floor(Math.random() * 6);\n  c.y = y;\n  c.x = x;\n  c.m = new Float32Array(c.w * c.h);\n  const s = floor(Math.random() * 9999);\n  for (let j = 0; j \u003c c.h; j++)\n    for (let i = 0; i \u003c c.w; i++) {\n      const dx = (i + 0.5) / c.w - 0.5;\n      const dy = (j + 0.5) / c.h - 0.5;\n      const env = 1 - 4 * dx * dx - 4 * dy * dy;\n      const n = fbm(i * 0.2, j * 0.32, s);\n      c.m[j * c.w + i] = sstep(0.1, 0.55, env * 0.8 + (n - 0.45) * 1.2);\n    }\n  return c;\n}\n\nfunction newBird(S, x, y) {\n  const b = { x, y, vx: 0, vy: -V0, hd: 0, gs: 0, ph: Math.random() * 6.28, j: Math.random() * 99, drop: 0 };\n  S.birds.push(b);\n  return b;\n}\n\n// A skein is a leader and two arms, each an ordered list of birds from the front.\nfunction newSkein(S, n, x, y, fast) {\n  const hd = -0.34 * S.wind;\n  const vx = V0 * fast * sin(hd) + 9 * S.wind;\n  const vy = -V0 * fast * cos(hd);\n  const k = { x, y, hd, vx, vy, L: [], R: [], fast, want: n, rot: 3.2 + Math.random() * 2, side: Math.random() \u003c 0.5 ? -1 : 1, tangle: 0, join: null, flap: Math.random() * 6 };\n  k.lead = newBird(S, x, y);\n  for (let i = 1; i \u003c n; i++) (i & 1 ? k.L : k.R).push(newBird(S, x, y));\n  for (const b of [k.lead, ...k.L, ...k.R]) {\n    b.vx = vx;\n    b.vy = vy;\n  }\n  S.skeins.push(k);\n  place(S, k, true);\n  return k;\n}\n\n// Where each bird of a skein wants to be. With snap the birds are put there.\nfunction place(S, k, snap) {\n  const n = 1 + k.L.length + k.R.length;\n  const t = S.t;\n  // A big skein flies higher, so its birds look smaller and sit closer.\n  k.gs = clamp(1.05 - 0.013 * (n - 7), 0.74, 1.05);\n  const sp = k.gs * (10.2 - 0.07 * (n - 7)) * (1 + 0.04 * sin(t * 0.29 + k.flap));\n  const a0 = max(0.31, 0.64 - 0.02 * (n - 7)) * (1 + 0.07 * sin(t * 0.37 + k.flap));\n  const h = k.hd;\n  const fx = sin(h);\n  const fy = -cos(h);\n  const set = (b, tx, ty) => {\n    // Each bird wanders a little round its slot, so the V is never quite straight.\n    tx += 0.9 * sin(t * 0.7 + b.j) + k.tangle * 13 * sin(t * 1.3 + b.j * 3.1);\n    ty += 1.3 * sin(t * 0.53 + b.j * 1.7) + k.tangle * 11 * sin(t * 1.1 + b.j * 2.3);\n    b.tx = tx;\n    b.ty = ty;\n    if (snap) {\n      b.x = tx;\n      b.y = ty;\n    }\n  };\n  // Startled, the whole skein bunches round its middle.\n  const cx = k.x - fx * 12 * k.tangle;\n  const cy = k.y - fy * 12 * k.tangle;\n  set(k.lead, k.x + (cx - k.x) * k.tangle, k.y + (cy - k.y) * k.tangle);\n  for (const s of [-1, 1]) {\n    const arm = s \u003c 0 ? k.L : k.R;\n    // The downwind arm opens a little wider.\n    const a = a0 * (1 + 0.2 * s * S.wind);\n    const sx = s * sin(a);\n    const bk = cos(a);\n    for (let r = 0; r \u003c arm.length; r++) {\n      const b = arm[r];\n      const d = (r + 1) * sp;\n      // Right of the heading is (-fy, fx); back is (-fx, -fy).\n      let px = k.x + d * (sx * -fy - bk * fx);\n      let py = k.y + d * (sx * fx - bk * fy);\n      // A bird moving back along the arm keeps to its outside.\n      px += s * 4 * b.drop * cos(h);\n      py += s * 4 * b.drop * sin(h);\n      const u = k.tangle;\n      set(b, px + (cx - px) * u, py + (cy - py) * u);\n    }\n  }\n}\n\nfunction spawn(S, first) {\n  const n = S.n;\n  const x0 = 32 - S.wind * 30 + (first ? 0 : (Math.random() - 0.5) * 14);\n  const ext = ((n - 1) / 2) * (8.6 - 0.11 * (n - 7));\n  const y0 = first ? max(50, 110 - ext) : 140;\n  const k = newSkein(S, n, x0, y0, 1);\n  // The second, smaller skein comes on behind, and most times it catches up and joins.\n  const m = max(3, round(n * 0.3));\n  const joins = first || Math.random() \u003c 0.65;\n  const off = joins ? (Math.random() - 0.5) * 10 : (Math.random() \u003c 0.5 ? -1 : 1) * 17;\n  const k2 = newSkein(S, m, x0 + off, max(150, y0 + ext + 40), joins ? 1.6 : 1.04);\n  k2.join = joins ? k : null;\n  k.next = first ? 4.5 : 8 + Math.random() * 3;\n}\n\nexport function setup(params) {\n  const S = {\n    t: 0,\n    birds: [],\n    skeins: [],\n    sky: new Float32Array(N * 3),\n    buf: new Float32Array(N * 3),\n    A: new Float32Array(N),\n    e: new Float32Array(N),\n    haze: new Float32Array(N),\n    dk: -1,\n    moon: new Float32Array(MS * MS),\n    cov: new Float32Array(MS * MS),\n    stars: [],\n    clouds: [],\n    n: 7,\n    wind: 0.06,\n    dusk: 0,\n    started: false,\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      S.e[y * W + x] = glowDist(x, y);\n      S.haze[y * W + x] = 0.94 + 0.12 * fbm(x * 0.06, y * 0.035, 5);\n    }\n  // The moon's face: a full disc, darker seas on it and a darker rim.\n  const seas = [\n    [-3.5, -3.5, 4.6, 3.8],\n    [2.5, -3.2, 2.8, 2.6],\n    [4.2, 1.2, 3.2, 3.4],\n    [-6.2, 1.5, 3, 5.5],\n    [-0.5, 4.5, 3, 1.8],\n  ];\n  for (let j = 0; j \u003c MS; j++)\n    for (let i = 0; i \u003c MS; i++) {\n      const dx = i - 13;\n      const dy = j - 13;\n      const r = hypot(dx, dy);\n      const cov = clamp(MR + 0.5 - r, 0, 1);\n      let sea = 0;\n      for (const [sx, sy, rx, ry] of seas) sea = max(sea, sstep(1.15, 0.2, hypot((dx - sx) / rx, (dy - sy) / ry)));\n      const alb = 1 - 0.15 * sea - 0.12 * (r / MR) ** 2 - 0.05 * noise(i * 0.7, j * 0.7, 3);\n      S.moon[j * MS + i] = alb;\n      S.cov[j * MS + i] = cov;\n    }\n  for (let i = 0; i \u003c 90; i++) S.stars.push({ x: floor(Math.random() * W), y: floor(Math.random() * H), m: Math.random() ** 2.2, p: Math.random() * 6.28 });\n  S.clouds.push(newCloud({}, 30, 4), newCloud({}, 68, 26), newCloud({}, 112, -6));\n  params.s = S;\n}\n\nfunction stepBirds(S, dt) {\n  const ws = S.wind;\n  for (const k of S.skeins) {\n    // The geese head a little into the wind and crab across it.\n    k.hd += (-0.34 * ws - k.hd) * min(1, dt * 1.5);\n    const v = V0 * k.fast;\n    const vx = v * sin(k.hd) + 9 * ws;\n    const vy = -v * cos(k.hd);\n    k.vx = vx;\n    k.vy = vy;\n    k.x += vx * dt;\n    k.y += vy * dt;\n    k.flap += dt * 2 * PI * 2.9 * (1 + 0.7 * k.tangle);\n    if (k.tangle > 0) {\n      k.tangle -= dt * 0.33;\n      if (k.tangle \u003c= 0) {\n        // Reformed, though not always in the same order.\n        k.tangle = 0;\n        const all = [k.lead, ...k.L, ...k.R].sort(() => Math.random() - 0.5);\n        k.lead = all[0];\n        k.L = [];\n        k.R = [];\n        for (let i = 1; i \u003c all.length; i++) (i & 1 ? k.L : k.R).push(all[i]);\n      }\n    }\n    // The leader tires, drops back along one arm, and the next bird up takes the point.\n    k.rot -= dt;\n    if (k.rot \u003c= 0 && !k.tangle) {\n      k.rot = 6 + Math.random() * 3;\n      k.side = -k.side;\n      const arm = k.side \u003c 0 ? k.L : k.R;\n      if (arm.length) {\n        const old = k.lead;\n        k.lead = arm.shift();\n        arm.push(old);\n        old.drop = 1;\n      }\n    }\n    // Keep the arms in the split the wind asks for, one bird at a time.\n    const m = k.L.length + k.R.length;\n    const wantR = round(m * clamp(0.5 + 0.36 * ws, 0.1, 0.9));\n    k.bal = (k.bal || 0) - dt;\n    if (k.bal \u003c= 0 && wantR !== k.R.length && !k.tangle) {\n      k.bal = 0.5;\n      if (wantR > k.R.length && k.L.length) k.R.push(k.L.pop());\n      else if (k.R.length) k.L.push(k.R.pop());\n    }\n    // The second skein joins the tail of the first when it has caught up.\n    if (k.join) {\n      const j = k.join;\n      const tail = [j.lead, ...j.L, ...j.R].reduce((a, b) => (b.y > a.y ? b : a));\n      if (j.gone || k.y \u003c tail.y + 10) {\n        const add = [k.lead, ...k.L, ...k.R];\n        if (!j.gone) {\n          for (const b of add) (j.L.length \u003c= j.R.length ? j.L : j.R).push(b);\n          j.want += add.length;\n          k.L = [];\n          k.R = [];\n          k.lead = null;\n          k.gone = true;\n        }\n        k.join = null;\n      }\n    }\n  }\n  S.skeins = S.skeins.filter((k) => !k.gone);\n  // When a skein is high on the panel, the next one comes in from the bottom.\n  for (const k of S.skeins)\n    if (k.next !== undefined) {\n      k.next -= dt;\n      if (k.next \u003c= 0) {\n        k.next = undefined;\n        spawn(S, false);\n      }\n    }\n  // The Geese knob adds birds to the tail of the newest skein, or lets some fall away.\n  const main = S.skeins.filter((k) => k.join === null && k.fast === 1).pop();\n  if (main) {\n    if (S.lastN !== S.n) main.want = max(3, main.want + S.n - (S.lastN || S.n));\n    S.lastN = S.n;\n    S.adj = (S.adj || 0) - dt;\n    const n = 1 + main.L.length + main.R.length;\n    if (S.adj \u003c= 0 && n !== main.want) {\n      S.adj = 0.15;\n      const arm = main.L.length \u003c= main.R.length ? main.L : main.R;\n      if (n \u003c main.want) {\n        const tail = arm.length ? arm[arm.length - 1] : main.lead;\n        arm.push(newBird(S, tail.x, max(tail.y + 18, 136)));\n      } else {\n        const long = main.L.length > main.R.length ? main.L : main.R;\n        const b = long.pop();\n        b.stray = long === main.L ? -1 : 1;\n      }\n    }\n  }\n  for (const k of S.skeins) place(S, k, false);\n  // Each bird springs towards its slot and matches the skein's speed.\n  for (const k of S.skeins) {\n    const all = [k.lead, ...k.L, ...k.R];\n    for (let r = 0; r \u003c all.length; r++) {\n      const b = all[r];\n      b.sk = k;\n      b.rank = r === 0 ? 0 : (r + 1) >> 1;\n    }\n  }\n  const om = 2.2;\n  for (const b of S.birds) {\n    const k = b.sk;\n    if (b.stray) {\n      // A bird that leaves falls back and peels away to its side.\n      b.vx += (b.stray * 6 + 9 * ws - b.vx) * dt;\n      b.vy += (-V0 * 0.4 - b.vy) * dt;\n      b.hd += (b.stray * 0.4 - b.hd) * dt;\n    } else if (k) {\n      const ex = b.tx - b.x;\n      const ey = b.ty - b.y;\n      const ax = om * om * ex - 2 * om * (b.vx - k.vx);\n      const ay = om * om * ey - 2 * om * (b.vy - k.vy);\n      b.vx += ax * dt;\n      b.vy += ay * dt;\n      // Not faster than a goose can close up.\n      const rx = b.vx - k.vx;\n      const ry = b.vy - k.vy;\n      const rs = hypot(rx, ry);\n      if (rs > 13) {\n        b.vx = k.vx + (rx * 13) / rs;\n        b.vy = k.vy + (ry * 13) / rs;\n      }\n      if (b.drop > 0 && hypot(ex, ey) \u003c 2) b.drop = max(0, b.drop - dt);\n      // Bodies point along the skein's heading, banking a little as they shift.\n      const want = k.hd + clamp(0.03 * rx, -0.4, 0.4) + k.tangle * 0.6 * sin(S.t * 2.3 + b.j);\n      b.hd += (want - b.hd) * min(1, dt * 4);\n      b.gs = b.gs ? b.gs + (k.gs - b.gs) * min(1, dt) : k.gs;\n      // Wings beat out of step down each arm.\n      const tp = k.flap - b.rank * 0.9 + k.tangle * b.j;\n      b.ph += dt * 2 * PI * 2.9 * (1 + 0.7 * k.tangle) + 0.08 * sin(tp - b.ph);\n    }\n    b.x += b.vx * dt;\n    b.y += b.vy * dt;\n    if (b.stray) b.ph += dt * 2 * PI * 2.9;\n    if (b.y \u003c -14 || b.y > 190 || b.x \u003c -50 || b.x > 114) b.out = true;\n  }\n  // A skein whose birds have all flown off the top is gone.\n  for (const k of S.skeins) {\n    const all = [k.lead, ...k.L, ...k.R];\n    if (all.every((b) => b.y \u003c -14)) k.gone = true;\n  }\n  S.skeins = S.skeins.filter((k) => !k.gone);\n  S.birds = S.birds.filter((b) => !(b.out && (b.stray || !b.sk || b.sk.gone)));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.dusk = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2;\n  S.n = clamp(round(k[2]), 7, 31);\n  S.wind = clamp(k[3], -1, 1);\n  if (!S.started) {\n    S.started = true;\n    spawn(S, true);\n  }\n  const d = dt * tempo;\n  S.t += d;\n  if (input.btnPressed && input.btnPressed[0])\n    for (const sk of S.skeins) {\n      sk.tangle = 1;\n      for (const b of [sk.lead, ...sk.L, ...sk.R]) {\n        b.vx += (Math.random() - 0.5) * 30;\n        b.vy += (Math.random() - 0.5) * 24;\n      }\n    }\n  stepBirds(S, d);\n  // Clouds drift with the wind high up and come round again.\n  const cv = (2.3 + 5 * S.wind) * d;\n  for (const c of S.clouds) {\n    c.x += cv;\n    if (c.x > W + 2) newCloud(c, 14 + Math.random() * 100, -c.w - 2 - Math.random() * 10);\n    else if (c.x \u003c -c.w - 14) newCloud(c, 14 + Math.random() * 100, W + 2);\n  }\n  // The moon climbs a little as the night goes on.\n  S.mx = 19 + 4 * S.dusk;\n  S.my = 104 - 22 * S.dusk - 5 * (1 - exp(-S.t / 50));\n}\n\nfunction paintSky(S) {\n  const dk = S.dusk;\n  const w = sstep(0.2, 1, dk);\n  const g = 1 + 1.8 * dk;\n  const c0 = [0, 0, 0];\n  const c1 = [0, 0, 0];\n  for (let i = 0; i \u003c N; i++) {\n    const e = S.e[i];\n    ramp(SKY0, e * g, c0);\n    ramp(SKY1, e, c1);\n    const hz = S.haze[i];\n    S.sky[i * 3] = (c0[0] + (c1[0] - c0[0]) * w) * hz;\n    S.sky[i * 3 + 1] = (c0[1] + (c1[1] - c0[1]) * w) * hz;\n    S.sky[i * 3 + 2] = (c0[2] + (c1[2] - c0[2]) * w) * hz;\n  }\n  S.dk = dk;\n}\n\n// A tapered stroke into the geese's coverage, kept as the larger of what is there.\nfunction stroke(A, ax, ay, bx, by, ra, rb) {\n  const x0 = max(0, floor(min(ax, bx) - 2));\n  const x1 = min(W - 1, Math.ceil(max(ax, bx) + 2));\n  const y0 = max(0, floor(min(ay, by) - 2));\n  const y1 = min(H - 1, Math.ceil(max(ay, by) + 2));\n  const dx = bx - ax;\n  const dy = by - ay;\n  const ll = dx * dx + dy * dy || 1;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const t = clamp(((x - ax) * dx + (y - ay) * dy) / ll, 0, 1);\n      const d = hypot(x - ax - dx * t, y - ay - dy * t);\n      const a = clamp(ra + (rb - ra) * t + 0.5 - d, 0, 1);\n      const i = y * W + x;\n      if (a > A[i]) A[i] = a;\n    }\n}\n\n// A goose seen from below: neck stretched forward, wings beating at its sides.\nfunction goose(A, b) {\n  const x = b.x;\n  const y = b.y;\n  if (x \u003c -9 || x > W + 8 || y \u003c -9 || y > H + 8) return;\n  const fx = sin(b.hd);\n  const fy = -cos(b.hd);\n  const P = (u, v) => [x - fy * u + fx * v, y + fx * u + fy * v];\n  const g = b.gs || 1;\n  const s = sin(b.ph);\n  const up = max(0, cos(b.ph));\n  // Seen from below, a wing raised or lowered is foreshortened, and on the\n  // upstroke it bends at the wrist and sweeps its tip back.\n  const th = 0.9 * s;\n  const span = g * (0.8 + 5.2 * cos(th) * (1 - 0.18 * up));\n  const tipv = g * (-0.7 - 1.7 * up + 0.5 * s);\n  const head = P(0, 5.1 * g);\n  const neck = P(0, 1.6 * g);\n  const chest = P(0, 0.9 * g);\n  const tail = P(0, -3.5 * g);\n  stroke(A, chest[0], chest[1], tail[0], tail[1], 1.25 * g, 0.55 * g);\n  stroke(A, neck[0], neck[1], head[0], head[1], max(0.45, 0.48 * g), max(0.55, 0.7 * g));\n  for (const sd of [-1, 1]) {\n    const sh = P(sd * 0.8 * g, 0.8 * g);\n    const wr = P(sd * (0.8 * g + 0.45 * (span - 0.8 * g)), g * (0.9 - 0.5 * up));\n    const tp = P(sd * span, tipv);\n    stroke(A, sh[0], sh[1], wr[0], wr[1], 1.0 * g, 0.75 * g);\n    stroke(A, wr[0], wr[1], tp[0], tp[1], 0.75 * g, 0.35 * g);\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (abs(S.dk - S.dusk) > 0.002) paintSky(S);\n  const dk = S.dusk;\n  const { sky, buf, A } = S;\n  buf.set(sky);\n  // Stars come out where the sky is dark enough to show them.\n  const night = 150 + 200 * sstep(0.1, 0.9, dk);\n  for (const st of S.stars) {\n    const i = st.y * W + st.x;\n    const L = max(sky[i * 3], sky[i * 3 + 1], sky[i * 3 + 2]);\n    const v = clamp((st.m * night - L) / 60, 0, 1) * (0.75 + 0.25 * sin(S.t * 3.1 + st.p * 7));\n    buf[i * 3] += 200 * v;\n    buf[i * 3 + 1] += 210 * v;\n    buf[i * 3 + 2] += 230 * v;\n  }\n  // The moon, pale in the dusk and bright at night with a ring of glow round it.\n  const mx = S.mx;\n  const my = S.my;\n  const mb = 0.8 + 0.2 * dk;\n  const halo = 0.15 + 0.6 * dk;\n  const mc = [255 * mb, 246 * mb, 222 * mb];\n  for (let y = max(0, floor(my - 34)); y \u003c min(H, my + 34); y++)\n    for (let x = max(0, floor(mx - 34)); x \u003c min(W, mx + 34); x++) {\n      const i = (y * W + x) * 3;\n      const r = hypot(x - mx, y - my);\n      const gl = halo * 60 * exp(-max(0, r - MR) / 7);\n      buf[i] += gl * 0.75;\n      buf[i + 1] += gl * 0.8;\n      buf[i + 2] += gl;\n      const ix = round(x - mx + 13);\n      const iy = round(y - my + 13);\n      if (ix \u003c 0 || iy \u003c 0 || ix >= MS || iy >= MS) continue;\n      const cv = S.cov[iy * MS + ix];\n      if (cv \u003c= 0) continue;\n      const m = S.moon[iy * MS + ix];\n      buf[i] += (mc[0] * m - buf[i]) * cv;\n      buf[i + 1] += (mc[1] * m - buf[i + 1]) * cv;\n      buf[i + 2] += (mc[2] * m - buf[i + 2]) * cv;\n    }\n  // Clouds, their undersides lit from below by the afterglow, or grey by the moon at night.\n  const lw = sstep(0.05, 0.85, dk);\n  const g = 1 + 1.8 * dk;\n  for (const c of S.clouds) {\n    const cx = round(c.x);\n    const cy = round(c.y);\n    for (let j = 0; j \u003c c.h; j++) {\n      const y = cy + j;\n      if (y \u003c 0 || y >= H) continue;\n      for (let i = 0; i \u003c c.w; i++) {\n        const x = cx + i;\n        if (x \u003c 0 || x >= W) continue;\n        const dn = c.m[j * c.w + i];\n        if (dn \u003c= 0) continue;\n        const p = y * W + x;\n        ramp(CLOUD0, S.e[p] * g, C3);\n        const mn = exp(-hypot(x - mx, y - my) / 30);\n        const lr = C3[0] + (40 + 60 * mn - C3[0]) * lw;\n        const lg = C3[1] + (46 + 62 * mn - C3[1]) * lw;\n        const lb = C3[2] + (70 + 70 * mn - C3[2]) * lw;\n        const br = 0.5 + 0.5 * dn;\n        const q = p * 3;\n        const o = 0.9 * dn;\n        buf[q] += (lr * br - buf[q]) * o;\n        buf[q + 1] += (lg * br - buf[q + 1]) * o;\n        buf[q + 2] += (lb * br - buf[q + 2]) * o;\n      }\n    }\n  }\n  // The geese, dark against everything behind them.\n  A.fill(0);\n  for (const b of S.birds) goose(A, b);\n  const gr = 6;\n  const gg = 5;\n  const gb = 10;\n  for (let p = 0; p \u003c N; p++) {\n    const a = A[p];\n    const q = p * 3;\n    let r = buf[q];\n    let gn = buf[q + 1];\n    let bl = buf[q + 2];\n    if (a > 0) {\n      r += (gr - r) * a;\n      gn += (gg - gn) * a;\n      bl += (gb - bl) * a;\n    }\n    display.setPixel(p % W, (p / W) | 0, min(255, r) | 0, min(255, gn) | 0, min(255, bl) | 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dusk=0..1, Speed=0.2..3, Geese=7..31, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dusk","min":0,"max":1,"about":"How late it is: at 0 the golden afterglow fills the top of the sky and the moon is pale, and towards 1 the glow sinks to a dim band and the moon and the stars carry a navy sky."},{"name":"Speed","min":0.2,"max":3,"about":"The pace of everything: at 2 a skein crosses the panel in about ten seconds with its wings beating three times a second, and at 0.2 it all runs ten times slower."},{"name":"Geese","min":7,"max":31,"about":"How many birds fly in the skein, from a small V of seven to a long one of thirty one whose arms reach most of the way down the panel. A big skein flies higher, so its birds look smaller."},{"name":"Wind","min":-1,"max":1,"about":"A crosswind from the side. The geese turn their bodies into it and crab across the sky, and the arm on the downwind side grows longer. The clouds drift with it too."}],"start":[0,2,7,0.06],"measures":{"motion":0.2572,"detail":0.0301,"edges":0.4436,"complexity":1.9214,"coverage":0.9745,"colour":0.3836,"drift":0.0616},"knobResponse":[0.2529,0.0352,0.0331,0.0516]},{"slug":"slinky","title":"Slinky","family":"toy","round":21,"note":"슬링키가 패널 높이만큼 지그재그로 꺾인 계단을 한 칸씩 뒤집히며 내려가요. 코일이 활처럼 휘어 아래 칸으로 쏟아지고, 내려앉은 칸마다 계단등이 켜져요.","idea":"A Slinky walks end over end down a zigzag stairwell the height of the panel, its coils pouring through a bow from step to step, springing off the wall at each landing and waking each step light it lands by, until a hand carries it dangling back up to the top.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Slinky\n// Family:  toy\n// Idea:    A Slinky walks end over end down a zigzag stairwell the height of the panel, its coils pouring through a bow from step to step, springing off the wall at each landing and waking each step light it lands by, until a hand carries it dangling back up to the top.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the Slinky, Richard James's steel spring toy of 1945\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Spring=0..1, Speed=0.2..3, Rise=6..12, Lamp=-1..1\n//\n// Knob 1: Spring. Which Slinky comes out of the box: polished steel at 0, then gold plate, the rainbow plastic one that walks lazier, a neon one under a blacklight, and at 1 a glow-in-the-dark one with the lights out.\n// Knob 2: Speed. How fast the film runs: at 2 a step takes under half a second and the walk from top to bottom about seven; at 0.2 it is ten times slower.\n// Knob 3: Rise. How tall each step is, from 6 rows to 12: low steps make three flights and small quick bows, tall ones two flights and long reaches down.\n// Knob 4: Lamp. The daylight in the stairwell: morning at -1, dusk at 0, night at 1, when only the step lights the spring has woken light the stairs and it glints as it passes them.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, abs, floor, round, sin, cos, sqrt, exp, hypot, tan, PI, sign } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst quad = (a, b, c, t) => (1 - t) * (1 - t) * a + 2 * (1 - t) * t * b + t * t * c;\n\n// The stairwell: side walls on columns 0..1 and 62..63, landings 12 wide against\n// them, flights of three 12-wide treads between, the hall floor on row 120.\nconst [T, FLOOR, TH] = [12, 120, 3];\n// The spring: 36 coils 10 LEDs across, 5.4 rows tall when they all sit closed.\nconst [NC, RAD, PITCH, CAP] = [36, 5, 0.15, 4];\nconst HS = NC * PITCH;\nconst [MOVE, BOUNCE, SETTLE, REACH, LIFT, CARRY, LOWER] = [0, 1, 2, 3, 4, 5, 6];\nconst DUR = [0, 0.5, 1.5, 0.8, 0.9, 1.5, 1.5];\n// The step lights' warm light; daylight comes from a window up to the left.\nconst LAMP = [255, 206, 150];\nconst [LX, LY, LZ, HX, HY, HZ] = [-0.5, -0.6, 0.62, -0.278, -0.334, 0.9];\n// The eye is a little above and to one side: a ring's near half shows lower right.\nconst [ZX, ZY, KS] = [0.22, 0.3, 28];\nconst [CS, SN] = [cos, sin].map((f) => Float32Array.from({ length: KS }, (_, j) => f(((j + 0.5) / KS) * 2 * PI)));\nconst kern = (r, s) => Float32Array.from({ length: (2 * r + 1) ** 2 }, (_, i) => exp(-(((i % (2 * r + 1)) - r) ** 2 + (floor(i / (2 * r + 1)) - r) ** 2) / s));\nconst [KSH, KGL] = [kern(3, 3), kern(8, 18)];\nconst RAIN = [[236, 44, 52], [250, 142, 34], [246, 222, 54], [62, 200, 84], [44, 124, 240], [152, 74, 222]];\n// Colour (null: rainbow bands), shine, highlight sharpness, band width, own light,\n// room light, whether the step lights work, and how lazily it walks.\nconst MAT = [\n  [[172, 180, 196], 1, 16, 0, 0, [1, 1, 1], 1, 1],\n  [[232, 174, 62], 1, 9, 0, 0, [1, 0.96, 0.9], 1, 1.06],\n  [null, 0.45, 5, 0.9, 0, [1, 1, 1], 1, 1.22],\n  [[255, 56, 180], 0.3, 5, 0.9, 0.8, [0.34, 0.2, 0.66], 0, 1.22],\n  [[140, 255, 116], 0.15, 5, 0.7, 1, [0.13, 0.16, 0.28], 0, 1.16],\n];\n// The hand as capsules from the pinch: x1, y1, x2, y2, radius, sleeve.\nconst HAND = [[-1.6, -0.8, -4.6, -7.6, 2, 0], [1.3, -1, 4.4, -8.2, 1.8, 0], [6.2, -6.8, 8.4, -12.4, 2.4, 0], [2, -12.4, 2.3, -12.7, 6.6, 0], [4, -16, 8.8, -24, 4.4, 0], [7.4, -23.6, 13.5, -36, 6.2, 1]];\n\n// Built from the floor up, flights turning at each landing. A flight ends in a drop\n// deep enough that the spring can walk off its landing under the flight's end.\nfunction build(P, R) {\n  const [dL, up, fl, lands] = [R + 16, [{ x: 56, y: FLOOR }], [], []];\n  for (let s = 1, base = FLOOR, f = 0; base > 0; f++, s = -s) {\n    const y1 = base - (f ? dL : R) - 2 * R;\n    fl.push([s, y1, y1 + R, y1 + 2 * R]);\n    for (let k = 2; k >= 0; k--) up.push({ x: s > 0 ? 20 + 12 * k : 44 - 12 * k, y: y1 + k * R });\n    base = y1 - R;\n    lands.push([-s, base]);\n    up.push({ x: s > 0 ? 8 : 56, y: base, wall: -s });\n  }\n  const [end, st] = [up[0], up.reverse()];\n  st.forEach((a, i) => (a.id = i));\n  const i0 = st.findIndex((a) => a.y >= 16);\n  const seq = [{ k: LOWER, a: st[i0] }];\n  for (let i = i0; i \u003c st.length - 1; i++) {\n    const [a, b] = [st[i], st[i + 1]];\n    seq.push({ k: MOVE, a, b, s: sign(b.x - a.x), under: !!a.wall });\n    if (b.wall) seq.push({ k: BOUNCE, a: b, s: b.wall });\n  }\n  seq.push({ k: SETTLE, a: end, s: 1 }, { k: REACH, a: end }, { k: LIFT, a: end }, { k: CARRY, a: end, b: st[i0] });\n  Object.assign(P, { R, seq, st, ton: new Float32Array(st.length).fill(-99) });\n  paint(P, R, fl, lands);\n}\n\nfunction paint(P, R, fl, lands) {\n  const { bg, mat } = P;\n  const at = (x, y) => (x \u003c 0 || x >= W || y \u003c 0 || y >= H ? 9 : mat[y * W + x]);\n  const set = (x, y, m, c, k = 1) => {\n    if (at((x = round(x)), (y = round(y))) > 8) return;\n    mat[y * W + x] = m;\n    for (let i = 0; i \u003c 3; i++) bg[(y * W + x) * 3 + i] = c[i] * k;\n  };\n  const lum = (x, y) => 1.16 - 0.0034 * y - 0.003 * x;\n  // Wallpaper: a dusty blue ground, a pale stripe every 8 columns and a lozenge\n  // between; and the edges of the side walls.\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y] = [p & 63, p >> 6];\n    const d = abs((x % 8) - 4) + abs((y % 12) - 6) * 0.7;\n    if (x \u003c 2 || x > 61) set(x, y, 4, [100, 112, 136], lum(x, y) * (x === 1 || x === 62 ? 0.72 : 1));\n    else set(x, y, 0, [48, 62, 96], (x % 8 ? (d \u003c 1.6 ? 1.7 : d \u003c 2.4 ? 0.84 : 1) : 1.7) * lum(x, y) * (0.95 + 0.1 * rnd()));\n  }\n  // A step's side: the tread on top, the board's edge under it, the joint where\n  // the next riser meets it, the dark underside.\n  const block = (x, top, bot, e, edge) => {\n    for (let y = top; y \u003c= bot; y++) {\n      let k = y === top ? (edge ? 1.12 : 1) : (0.88 + 0.1 * sin(y * 1.7 + 2 * sin(x * 0.23)) + 0.05 * rnd()) * (1.08 - y * 0.0025) * (y === top + 1 ? 0.7 : e ? 1 : 0.62);\n      set(x, y, y === top ? 2 : 1, y === top ? [216, 162, 104] : [150, 94, 56], y === bot ? k * 0.55 : k);\n    }\n  };\n  for (const [s, ...ys] of fl) {\n    for (let x = 14, d; x \u003c 50; x++) block(x, ys[floor((d = s > 0 ? x - 14 : 49 - x) / T)], round(ys[0] + TH + (d * R) / T), d % T, d % T === T - 1);\n    // Each nosing overhangs the riser below it by one LED.\n    for (let k = 0, x; k \u003c 3; k++) {\n      if (at((x = s > 0 ? 26 + 12 * k : 37 - 12 * k), ys[k] + 1) === 0) set(x, ys[k] + 1, 0, [20, 30, 34]);\n      set(x, ys[k], 2, [226, 174, 116]);\n    }\n  }\n  for (const [side, y] of lands) {\n    for (let x = side \u003c 0 ? 2 : 50, i = 0; i \u003c 12; x++, i++) block(x, y, y + R + TH, side \u003c 0 ? i : 11 - i, false);\n    if (at(side \u003c 0 ? 14 : 49, y) === 0) set(side \u003c 0 ? 14 : 49, y, 2, [226, 174, 116]);\n  }\n  // Floorboards seen from a little above, the near ones brighter, and the skirting.\n  for (let p = FLOOR * W, x, r; p \u003c N; p++) set((x = p & 63), (r = (p >> 6) - FLOOR) + FLOOR, 3, r ? [176, 122, 74] : [206, 156, 104], (0.78 + 0.04 * r) * (r % 3 === 2 || (x + r * 7) % 23 === 0 ? 0.62 : 0.95 + 0.1 * rnd()));\n  for (let x = 2; x \u003c 62; x++) for (let y = FLOOR - 4; y \u003c FLOOR; y++) if (at(x, y) === 0) set(x, y, 5, [196, 190, 172], (y === FLOOR - 4 ? 1.08 : y === FLOOR - 1 ? 0.66 : 0.94) * lum(x, y));\n  // The stairs' soft shadow from the window, down and right of them.\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y, m] = [p & 63, p >> 6, mat[p]];\n    let n = 0;\n    for (let d = 0; d \u003c 9 && (m === 0 || m === 5); d++) n += at(x - 4 + (d % 3), y - 5 + floor(d / 3)) % 8 > 0 && at(x - 4 + (d % 3), y - 5 + floor(d / 3)) \u003c 3 ? 1 : 0;\n    for (let i = 0; i \u003c 3; i++) bg[p * 3 + i] *= 1 - 0.045 * n;\n  }\n  // A small step light in the wall just above each tread and landing, and a\n  // framed picture on bare wall where the spring never passes.\n  for (const a of P.st) for (let i = -1; i \u003c 1; i++) set(a.x + i, a.y - 3, 5, [70, 72, 80]);\n  const free = (x0, y0) => {\n    for (let n = 0; n \u003c 120; n++) if (at(x0 - 1 + (n % 10), y0 - 1 + floor(n / 10)) !== 0) return false;\n    return P.st.every((a) => abs(a.x - x0 - 4) > 13 || a.y \u003c y0 || a.y - 26 > y0 + 10);\n  };\n  for (let y = 4, pic = 0; y \u003c 110 && !pic; y += 2)\n    for (const x of [4, 52, 28])\n      if (!pic && (pic = free(x, y)))\n        for (let n = 0; n \u003c 80; n++) {\n          const [i, j] = [n & 7, n >> 3];\n          const edge = !i || !j || i === 7 || j === 9;\n          set(x + i, y + j, 5, i === 5 && j === 2 ? [250, 226, 130] : edge ? [196, 150, 64] : j \u003c 5 ? [96, 150, 206] : j \u003c 7 ? [72, 136, 86] : [48, 96, 62], edge && (i === 7 || j === 9) ? 0.7 : 1);\n        }\n}\n\n// Daylight fades from -1 to 1 and turns blue.\nfunction lampLevel(P, k4) {\n  const u = (k4 + 1) / 2;\n  P.amb = [0.98, 1, 1.04].map((t, i) => t * (1.16 - 1.02 * u) * mix(1, [0.6, 0.74, 1][i], u));\n  P.lampAtK = k4;\n}\n\nconst [BZ, LT, FT, PT] = [new Float32Array(8), new Float32Array(17), new Float32Array(33), new Float32Array(4)];\n\nfunction bez(t) {\n  const u = 1 - t;\n  const [a, b, c, d] = [u * u * u, 3 * u * u * t, 3 * u * t * t, t * t * t];\n  for (let i = 0; i \u003c 2; i++) {\n    PT[i] = a * BZ[i] + b * BZ[2 + i] + c * BZ[4 + i] + d * BZ[6 + i];\n    PT[2 + i] = 3 * (u * u * (BZ[2 + i] - BZ[i]) + 2 * u * t * (BZ[4 + i] - BZ[2 + i]) + t * t * (BZ[6 + i] - BZ[4 + i]));\n  }\n}\n\nfunction setCurve(x0, y0, t0x, t0y, x3, y3, t3x, t3y, h0, h3) {\n  BZ.set([x0, y0, x0 + t0x * h0, y0 + t0y * h0, x3 - t3x * h3, y3 - t3y * h3, x3, y3]);\n  let [L, px, py] = [0, x0, y0];\n  for (let i = 1; i \u003c= 16; i++) {\n    bez(i / 16);\n    L += hypot(PT[0] - px, PT[1] - py);\n    [LT[i], px, py] = [L, PT[0], PT[1]];\n  }\n  return L;\n}\n\n// How the coils spread along the curve: a0 keeps the ends open, b leans the spread\n// one way, rip is a pulse running up the bow, c opens the top of a hanging spring.\nfunction setDist(G) {\n  const w = (v) => G.a0 + G.sn * sin(PI * v) ** 1.2 * (1 + G.b * (v - 0.5)) * (1 + G.rip * sin(2 * PI * (1.5 * v + 2 * G.ph))) + G.c * v;\n  let [prev, acc] = [w(0), 0];\n  for (let i = 1; i \u003c= 32; i++) {\n    const cur = w(i / 32);\n    acc += prev + cur;\n    [FT[i], prev] = [acc, cur];\n  }\n  for (let i = 1; i \u003c= 32; i++) FT[i] /= acc;\n}\n\nfunction onCurve(v, L) {\n  const [f, i] = [v * 32, min(31, floor(v * 32))];\n  const s = (FT[i] + (FT[i + 1] - FT[i]) * (f - i)) * L;\n  let j = 0;\n  while (j \u003c 15 && LT[j + 1] \u003c s) j++;\n  bez((j + cl((s - LT[j]) / max(1e-6, LT[j + 1] - LT[j]), 0, 1)) / 16);\n}\n\n// A free end's last coils stay closed and turn together like a lid.\nfunction cap(G, x, y, tx, ty, tail) {\n  const d = CAP * PITCH;\n  if (tail) [G.nA, G.ax, G.ay, G.aux, G.auy] = [CAP, x, y, tx, ty];\n  else [G.nB, G.bx, G.by, G.bux, G.buy] = [CAP, x, y, -tx, -ty];\n  return tail ? [x + tx * d, y + ty * d] : [x - tx * d, y - ty * d];\n}\n\n// One step: the top end tips over onto the step below (p \u003c 0.3), the coils pour\n// over the bow from stack to stack, then the far end lifts and follows (p > 0.74).\nfunction move(P, S, p, G) {\n  const { a, b, s } = S;\n  const [k, dx, hb, p1, p2] = [P.kf, abs(b.x - a.x), S.under ? 0.5 : 1, 0.3, 0.74];\n  G.a0 = p \u003c 0.5 ? mix(0.36, 0.18, p / 0.5) : mix(0.18, 0.12, (p - 0.5) / 0.5);\n  G.b = p \u003c p2 ? mix(0.9, 0.2, p / p2) : mix(0.2, 0, (p - p2) / (1 - p2));\n  [G.bx, G.by] = [b.x, b.y];\n  let C;\n  if (p \u003c p1) {\n    const t = p / p1;\n    const e = t * t * (1.7 - 0.7 * t);\n    const [ex, ey, tx, ty] = [quad(a.x, a.x + s * dx * 0.55, b.x, e), quad(a.y - HS, min(a.y - HS, b.y) - (4 + 4 * k) * hb, b.y, e), s * sin(PI * e), -cos(PI * e)];\n    G.nA = NC - CAP - (0.36 * NC - CAP) * (0.25 * t + 0.75 * e);\n    C = [a.x, a.y - G.nA * PITCH, 0, -1, ...cap(G, ex, ey, tx, ty), tx, ty];\n    if (P.seg === 1 && p \u003c 0.2) [P.hx, P.hy] = [ex, ey];\n  } else if (p \u003c p2) {\n    // The two stacks lean toward each other while the bow pulls on them.\n    const t = (p - p1) / (p2 - p1);\n    const lean = 0.16 * sin(PI * t) * k;\n    [G.nA, G.nB, G.aux, G.auy] = [CAP + (0.64 * NC - CAP) * (1 - t), CAP + (0.66 * NC - CAP) * t, s * sin(lean), -cos(lean)];\n    [G.bux, G.buy] = [-G.aux, G.auy];\n    C = [a.x + G.aux * G.nA * PITCH, a.y + G.auy * G.nA * PITCH, G.aux, G.auy, b.x + G.bux * G.nB * PITCH, b.y + G.buy * G.nB * PITCH, -G.bux, -G.buy];\n    G.rip = 0.45 * sin(PI * t) * exp(-2 * t) * k;\n    G.ph = t;\n  } else {\n    const t = (p - p2) / (1 - p2);\n    const e = t * t * (2 - t);\n    const [fx, fy, tx, ty] = [quad(a.x, a.x + s * dx * 0.35, b.x, e), quad(a.y, min(a.y, b.y - HS) - (3 + 3 * k) * hb, b.y - HS, e), s * sin(PI * e), -cos(PI * e)];\n    G.nB = NC - CAP - (0.34 * NC - CAP) * (1 - e);\n    C = [...cap(G, fx, fy, tx, ty, 1), tx, ty, b.x, b.y - G.nB * PITCH, 0, 1];\n  }\n  const ch = hypot(C[4] - C[0], C[5] - C[1]);\n  const h = (0.45 * ch + 4.5 * k * min(1, ch / 10)) * hb;\n  G.curve = [...C, h, h];\n}\n\n// On a landing the top end swings out, meets the wall and springs back over.\n// On the floor the same swing just rocks and dies away.\nfunction bounce(P, S, u, G) {\n  const [a, phc] = [S.a, PI / 2];\n  let ph = S.k === SETTLE ? 1.3 * phc * exp(-3 * u) * sin(2 * PI * 2.2 * u) * (1 - sm((u - 0.7) / 0.3)) : u \u003c 0.42 ? phc * (u / 0.42) ** 1.7 : u \u003c 0.56 ? phc : phc * (1 - ((u - 0.56) / 0.44) ** 0.85);\n  let w = S.s;\n  if (ph \u003c 0) [ph, w] = [-ph, -w];\n  const sq = S.k === BOUNCE && u > 0.4 && u \u003c 0.6 ? 0.16 * sin((PI * (u - 0.4)) / 0.2) : 0;\n  const La = (((abs((S.s > 0 ? 62 : 2) - a.x) - 1.6) * PI) / 2) * (ph / phc) ** 0.7 * (1 - sq);\n  G.nA = NC - CAP - min(NC * 0.4, La / 1.1);\n  const [x0, y0, r, tx, ty] = [a.x, a.y - G.nA * PITCH, La / max(ph, 1e-3), w * sin(ph), -cos(ph)];\n  const [qx, qy] = [x0 + w * r * (1 - cos(ph)), y0 - r * sin(ph)];\n  const h = ph \u003c 1e-3 ? La / 3 : (4 / 3) * tan(ph / 4) * r;\n  cap(G, qx + tx * CAP * PITCH, qy + ty * CAP * PITCH, tx, ty);\n  G.curve = [x0, y0, 0, -1, qx, qy, tx, ty, h, h];\n  [G.a0, G.sn, G.b] = [0.6, 0.6, -sq * 3];\n}\n\nconst hangLen = (P, m) => m * PITCH + P.lext * (m / NC) ** 2;\n\n// Held by its top coil the spring hangs open at the top and closed at the bottom,\n// each gap carrying the weight of the coils below it.\nfunction hang(P, S, u, G) {\n  let [a, x0, y0, m] = [S.a, S.a.x, 0, NC];\n  if (S.k === CARRY) {\n    [P.hx, P.hy] = carry(P, S, u);\n    [x0, y0] = P.pb;\n    G.nA = 0;\n  } else {\n    m = NC * (S.k === LIFT ? sm(u) : 1 - sm(u));\n    G.nA = NC - m;\n    y0 = a.y - G.nA * PITCH;\n    [P.hx, P.hy] = [x0, y0 - hangLen(P, m)];\n  }\n  [G.sn, G.c, G.a0] = [0, 1, min(50, (m * PITCH) / max(1e-3, 2 * P.lext * (m / NC) ** 2))];\n  const L = max(1e-3, hypot(P.hx - x0, P.hy - y0));\n  G.curve = [x0, y0, (P.hx - x0) / L, (P.hy - y0) / L, P.hx, P.hy, 0, -1, L / 3, L / 3];\n}\n\nfunction carry(P, S, u) {\n  const [e, L] = [sm(u), hangLen(P, NC)];\n  return [mix(S.a.x, S.b.x, e) + 6 * sin(PI * e), mix(FLOOR - L, S.b.y - L, e)];\n}\n\nfunction dur(P, S) {\n  if (S.k === MOVE) return 0.44 * sqrt((S.b.y - S.a.y + 6) / 12) * P.kf;\n  return S.k === BOUNCE ? DUR[1] * P.kf : DUR[S.k];\n}\n\nfunction shape(P) {\n  const [S, G] = [P.seq[P.seg], P.G];\n  const u = cl(P.sp / dur(P, S), 0, 1);\n  Object.assign(P.G, { ax: S.a.x, ay: S.a.y, aux: 0, auy: -1, nA: NC, bx: 0, by: 0, bux: 0, buy: -1, nB: 0, a0: 0.3, sn: 1, b: 0, rip: 0, ph: 0, c: 0, curve: null });\n  P.hx = -99;\n  if (S.k === MOVE) move(P, S, u, G);\n  else if (S.k === BOUNCE || S.k === SETTLE) bounce(P, S, u, G);\n  else if (S.k === REACH) [P.hx, P.hy] = [mix(80, S.a.x, 1 - (1 - u) ** 2), mix(FLOOR - 46, S.a.y - HS, 1 - (1 - u) ** 2)];\n  else hang(P, S, u, G);\n  if (P.ht >= 0 && P.ht \u003c 0.8) [P.hx, P.hy] = [P.rx + 12 * sm(P.ht / 0.8), P.ry - 44 * sm(P.ht / 0.8)];\n  // Every coil: its centre and the way the spring runs through it.\n  const { cx, cy, tx, ty } = P;\n  const nc = NC - G.nA - G.nB;\n  const L = G.curve && nc > 1e-3 ? setCurve(...G.curve) : 0;\n  if (L) setDist(G);\n  for (let q = 0; q \u003c NC; q++) {\n    const u = q + 0.5;\n    if (u \u003c= G.nA || !L) [cx[q], cy[q], tx[q], ty[q]] = [G.ax + G.aux * u * PITCH, G.ay + G.auy * u * PITCH, G.aux, G.auy];\n    else if (u >= NC - G.nB) [cx[q], cy[q], tx[q], ty[q]] = [G.bx + G.bux * (NC - u) * PITCH, G.by + G.buy * (NC - u) * PITCH, -G.bux, -G.buy];\n    else {\n      onCurve((u - G.nA) / nc, L);\n      const d = hypot(PT[2], PT[3]) || 1;\n      [cx[q], cy[q], tx[q], ty[q]] = [PT[0], PT[1], PT[2] / d, PT[3] / d];\n    }\n  }\n}\n\nfunction restart(P) {\n  Object.assign(P, { seg: 0, sp: 0.9, par: 0, ht: -1, pb: [0, 0], pv: [0, 0], clock: 0 });\n  P.ton.fill(-99);\n}\n\nfunction advance(P, h) {\n  P.sp += h;\n  P.clock += h;\n  if (P.ht >= 0) P.ht += h;\n  let S = P.seq[P.seg];\n  if (P.seg === 1 && P.ht \u003c 0 && P.sp >= 0.2 * dur(P, S)) [P.ht, P.rx, P.ry] = [0, P.hx, P.hy];\n  // A step light wakes when the spring lands by it, and stays on for 8 seconds.\n  const b = S.k === MOVE ? S.b : S.k === LOWER ? S.a : null;\n  if (b && P.sp >= 0.3 * dur(P, S) && P.ton[b.id] \u003c P.clock - 9.5) P.ton[b.id] = P.clock;\n  while (P.sp >= dur(P, S)) {\n    P.sp -= dur(P, S);\n    if (S.k === MOVE) P.par ^= 1;\n    S = P.seq[(P.seg = (P.seg + 1) % P.seq.length)];\n    if (S.k === CARRY) [P.pb, P.pv] = [[S.a.x, FLOOR], [0, 0]];\n    if (S.k === LOWER) P.ht = -1;\n  }\n  // Carried, the bottom of the spring hangs back and swings under the hand.\n  if (S.k !== CARRY) return;\n  const u = P.sp / dur(P, S);\n  const [[hx, hy], L, damp] = [carry(P, S, u), hangLen(P, NC), 3.5 + 30 * sm((u - 0.65) / 0.35)];\n  for (let c = 0; c \u003c 2; c++) {\n    P.pv[c] += (48 * ((c ? hy + L : hx) - P.pb[c]) - damp * P.pv[c]) * h;\n    P.pb[c] += P.pv[c] * h;\n  }\n  const [dx, dy, r] = [P.pb[0] - hx, P.pb[1] - hy - L, hypot(P.pb[0] - hx, P.pb[1] - hy - L)];\n  if (r > 0.6 * L) P.pb = [hx + (dx * 0.6 * L) / r, hy + L + (dy * 0.6 * L) / r];\n}\n\nexport function setup(params) {\n  const [P, F] = [params, (n) => new Float32Array(n)];\n  Object.assign(P, { bg: F(N * 3), out: F(N * 3), pl: F(N), mat: new Uint8Array(N), sh: F(N), gl: F(N), fa: F(N * 4), ba: F(N * 4) });\n  Object.assign(P, { hit: new Uint8Array(N), list: new Int32Array(N), nl: 0, cx: F(NC), cy: F(NC), tx: F(NC), ty: F(NC), G: {}, kf: 1, lext: 38, hx: -99, hy: 0, M: material(0) });\n  build(P, 6);\n  lampLevel(P, 0.06);\n  restart(P);\n}\n\nexport function update(dt, input, params) {\n  const [P, k] = [params, input.knobValues || [0, 2, 6, 0.06]];\n  P.M = material(cl(k[0], 0, 1));\n  [P.kf, P.lext] = [P.M.lazy, 38 / P.M.lazy ** 2];\n  const R = round(cl(k[2], 6, 12));\n  if (R !== P.R) build(P, R), restart(P);\n  if (cl(k[3], -1, 1) !== P.lampAtK) lampLevel(P, cl(k[3], -1, 1));\n  const h = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  const n = Math.ceil(h / 0.01);\n  for (let i = 0; i \u003c n; i++) advance(P, h / n);\n}\n\nfunction material(k1) {\n  const i = min(3, floor(k1 * 4));\n  const [t, A, B] = [k1 * 4 - i, MAT[i], MAT[i + 1]];\n  const M = { i, t, shine: mix(A[1], B[1], t), pw: mix(A[2], B[2], t), wide: mix(A[3], B[3], t), emit: mix(A[4], B[4], t), lamps: mix(A[6], B[6], t), lazy: mix(A[7], B[7], t) };\n  M.room = A[5].map((v, c) => mix(v, B[5][c], t));\n  const g = (m) => MAT[m][0] || [230, 200, 190];\n  M.glow = g(i).map((v, c) => mix(v, g(i + 1)[c], t) * M.emit);\n  return M;\n}\n\nfunction colour(M, id) {\n  const pick = (m) => MAT[m][0] || RAIN[floor((id * 6) / NC)];\n  const [a, b] = [pick(M.i), pick(M.i + 1)];\n  return [0, 1, 2].map((c) => mix(a[c], b[c], M.t));\n}\n\nfunction stamp(F, K, r, x, y, w) {\n  const [ix, iy, n] = [round(x), round(y), 2 * r + 1];\n  for (let j = -r; j \u003c= r; j++) {\n    const yy = iy + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    for (let i = -r; i \u003c= r; i++) if (ix + i >= 0 && ix + i \u003c W) F[yy * W + ix + i] += K[(j + r) * n + i + r] * w;\n  }\n}\n\nfunction add(P, A, x, y, c, w) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || w \u003c= 0) return;\n  const p = y * W + x;\n  if (!P.hit[p]) P.list[P.nl++] = p;\n  P.hit[p] = 1;\n  for (let i = 0; i \u003c 3; i++) A[p * 4 + i] += c[i] * w;\n  A[p * 4 + 3] += w;\n}\n\nfunction splat(P, A, x, y, c, w) {\n  const [ix, iy] = [floor((x -= 0.5)), floor((y -= 0.5))];\n  const [fx, fy] = [x - ix, y - iy];\n  for (let n = 0; n \u003c 4; n++) add(P, A, ix + (n & 1), iy + (n >> 1), c, w * (n & 1 ? fx : 1 - fx) * (n >> 1 ? fy : 1 - fy));\n}\n\n// Each coil a thin ring seen nearly side-on: the far half dim inside the\n// spring, the near half lit by the window and the step lights, with a glint.\nfunction rings(P, M) {\n  const { cx, cy, tx, ty, fa, ba } = P;\n  const v = [0, 0, 0];\n  for (let q = 0; q \u003c NC; q++) {\n    const col = colour(M, P.par ? NC - 1 - q : q);\n    const [nx, ny] = [-ty[q], tx[q]];\n    const [nl, nh] = [nx * LX + ny * LY, nx * HX + ny * HY];\n    const lamp = P.pl[cl(round(cy[q]), 0, H - 1) * W + cl(round(cx[q]), 0, W - 1)] * 0.3;\n    const lt = M.room.map((r, i) => r * (P.amb[i] + (lamp * LAMP[i]) / 255));\n    for (let j = 0; j \u003c KS; j++) {\n      const [c, s] = [CS[j], SN[j]];\n      const dif = max(0, c * nl + s * LZ);\n      const spe = M.shine * max(0, c * nh + s * HZ) ** M.pw;\n      const k = s > 0 ? 1 : 0.42;\n      for (let i = 0; i \u003c 3; i++) v[i] = (col[i] * (M.emit + lt[i] * (0.28 + 0.85 * dif)) + 255 * spe * lt[i]) * k;\n      const [x, y, A] = [cx[q] + (nx * c + ZX * s) * RAD, cy[q] + (ny * c + ZY * s) * RAD, s > 0 ? fa : ba];\n      splat(P, A, x, y, v, 1);\n      if (M.wide > 0) splat(P, A, x + tx[q] * 0.7, y + ty[q] * 0.7, v, M.wide);\n    }\n  }\n}\n\n// The room: daylight, the pools of the step lights that are on, the spring's\n// soft shadow, and the light a glowing spring throws round it.\nfunction lighting(P, M) {\n  const { cx, cy, tx, ty, sh, gl, pl, out, bg, mat, amb } = P;\n  sh.fill(0);\n  gl.fill(0);\n  pl.fill(0);\n  for (let q = 0; q \u003c NC; q += 2) {\n    const [nx, ny] = [-ty[q] * RAD * 0.65, tx[q] * RAD * 0.65];\n    for (const f of [-1, 0, 1]) stamp(sh, KSH, 3, cx[q] + 3 + nx * f, cy[q] + 4 + ny * f, 0.3);\n    if (M.emit > 0 && q % 6 === 0) stamp(gl, KGL, 8, cx[q], cy[q], 0.12 * M.emit);\n  }\n  for (const a of P.st) {\n    const d = P.clock - P.ton[a.id];\n    const I = M.lamps * sm(d / 0.3) * (1 - sm((d - 8) / 1.5));\n    if (I \u003c= 0) continue;\n    for (let y = max(0, a.y - 13); y \u003c= min(H - 1, a.y); y++)\n      for (let x = max(0, a.x - 13); x \u003c min(W, a.x + 13); x++) if (mat[y * W + x] % 3 !== 1) pl[y * W + x] += 1.5 * I * exp(-(((x + 0.5 - a.x) / 9) ** 2) - ((y - a.y + 3) / 6) ** 2);\n    for (let i = -1; i \u003c 1; i++) if (a.y > 3 && a.y \u003c H + 2) pl[(a.y - 3) * W + a.x + i] += 6 * I;\n  }\n  const K = [0, 1, 2].map((i) => [M.room[i] * amb[i], (M.room[i] * LAMP[i]) / 300, (M.glow[i] / 255) * 1.3, M.glow[i] * 0.1, M.room[i] * [60, 34, 6][i]]);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const m = mat[p];\n    const s = 1 - min(1, sh[p]) * (m === 0 || m === 5 ? 0.7 : m === 2 || m === 3 ? 0.45 : 0);\n    const [g, l] = [min(1.5, gl[p]), pl[p]];\n    for (let i = 0, k; i \u003c 3; i++) out[o + i] = bg[o + i] * ((k = K[i])[0] * s + k[1] * l + k[2] * g) + k[3] * g + k[4] * l;\n  }\n}\n\nfunction composite(P) {\n  const { out, fa, ba, hit, list } = P;\n  for (let i = 0; i \u003c P.nl; i++) {\n    const [p, q] = [list[i], list[i] * 4];\n    for (const A of [ba, fa]) {\n      const a = A[q + 3];\n      if (a > 0) for (let c = 0, k = min(1, a); c \u003c 3; c++) out[p * 3 + c] = out[p * 3 + c] * (1 - k) + (A[q + c] / a) * k;\n      A[q] = A[q + 1] = A[q + 2] = A[q + 3] = 0;\n    }\n    hit[p] = 0;\n  }\n  P.nl = 0;\n}\n\nfunction capsule(px, py, x1, y1, x2, y2) {\n  const [dx, dy] = [x2 - x1, y2 - y1];\n  const t = cl(((px - x1) * dx + (py - y1) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return hypot(px - x1 - dx * t, py - y1 - dy * t);\n}\n\n// A child's hand pinching the top coil, a striped sleeve running off up and right.\nfunction hand(P, M) {\n  const { out, hx, hy } = P;\n  for (let y = max(0, floor(hy - 44)); y \u003c= min(H - 1, hy + 2); y++)\n    for (let x = max(0, floor(hx - 8)); x \u003c= min(W - 1, hx + 21); x++) {\n      let [ds, dc] = [9, 9];\n      for (const [x1, y1, x2, y2, r, sl] of HAND) {\n        const d = capsule(x + 0.5 - hx, y + 0.5 - hy, x1, y1, x2, y2) - r;\n        if (sl) dc = min(dc, d);\n        else ds = min(ds, d);\n      }\n      let [c, k] = [0, 0];\n      if (ds \u003c 0) [c, k] = [[238, 184, 148], (ds > -0.8 ? 0.68 : 0.86 + 0.18 * cl(-ds / 2.5, 0, 1)) * (1.06 - 0.02 * (x - hx))];\n      else if (dc \u003c 0) [c, k] = [floor((y - hy + (x - hx) * 0.5) / 2) % 2 ? [206, 56, 62] : [232, 222, 206], dc > -0.8 ? 0.62 : 0.92];\n      else continue;\n      for (let i = 0; i \u003c 3; i++) out[(y * W + x) * 3 + i] = c[i] * k * M.room[i] * (0.15 + 0.85 * P.amb[i] + P.pl[y * W + x] * 0.5);\n    }\n}\n\nexport function draw(display, params) {\n  const [P, M] = [params, params.M];\n  shape(P);\n  lighting(P, M);\n  rings(P, M);\n  composite(P);\n  if (P.hx > -20 && P.hx \u003c 90 && P.hy > -2) hand(P, M);\n  const o = P.out;\n  for (let y = 0, i = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, i += 3) display.setPixel(x, y, min(255, o[i]), min(255, o[i + 1]), min(255, o[i + 2]));\n}\n","layer":{"id":"layer-slinky","type":"code","name":"slinky","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Slinky\n// Family:  toy\n// Idea:    A Slinky walks end over end down a zigzag stairwell the height of the panel, its coils pouring through a bow from step to step, springing off the wall at each landing and waking each step light it lands by, until a hand carries it dangling back up to the top.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the Slinky, Richard James's steel spring toy of 1945\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Spring=0..1, Speed=0.2..3, Rise=6..12, Lamp=-1..1\n//\n// Knob 1: Spring. Which Slinky comes out of the box: polished steel at 0, then gold plate, the rainbow plastic one that walks lazier, a neon one under a blacklight, and at 1 a glow-in-the-dark one with the lights out.\n// Knob 2: Speed. How fast the film runs: at 2 a step takes under half a second and the walk from top to bottom about seven; at 0.2 it is ten times slower.\n// Knob 3: Rise. How tall each step is, from 6 rows to 12: low steps make three flights and small quick bows, tall ones two flights and long reaches down.\n// Knob 4: Lamp. The daylight in the stairwell: morning at -1, dusk at 0, night at 1, when only the step lights the spring has woken light the stairs and it glints as it passes them.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, abs, floor, round, sin, cos, sqrt, exp, hypot, tan, PI, sign } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst quad = (a, b, c, t) => (1 - t) * (1 - t) * a + 2 * (1 - t) * t * b + t * t * c;\n\n// The stairwell: side walls on columns 0..1 and 62..63, landings 12 wide against\n// them, flights of three 12-wide treads between, the hall floor on row 120.\nconst [T, FLOOR, TH] = [12, 120, 3];\n// The spring: 36 coils 10 LEDs across, 5.4 rows tall when they all sit closed.\nconst [NC, RAD, PITCH, CAP] = [36, 5, 0.15, 4];\nconst HS = NC * PITCH;\nconst [MOVE, BOUNCE, SETTLE, REACH, LIFT, CARRY, LOWER] = [0, 1, 2, 3, 4, 5, 6];\nconst DUR = [0, 0.5, 1.5, 0.8, 0.9, 1.5, 1.5];\n// The step lights' warm light; daylight comes from a window up to the left.\nconst LAMP = [255, 206, 150];\nconst [LX, LY, LZ, HX, HY, HZ] = [-0.5, -0.6, 0.62, -0.278, -0.334, 0.9];\n// The eye is a little above and to one side: a ring's near half shows lower right.\nconst [ZX, ZY, KS] = [0.22, 0.3, 28];\nconst [CS, SN] = [cos, sin].map((f) => Float32Array.from({ length: KS }, (_, j) => f(((j + 0.5) / KS) * 2 * PI)));\nconst kern = (r, s) => Float32Array.from({ length: (2 * r + 1) ** 2 }, (_, i) => exp(-(((i % (2 * r + 1)) - r) ** 2 + (floor(i / (2 * r + 1)) - r) ** 2) / s));\nconst [KSH, KGL] = [kern(3, 3), kern(8, 18)];\nconst RAIN = [[236, 44, 52], [250, 142, 34], [246, 222, 54], [62, 200, 84], [44, 124, 240], [152, 74, 222]];\n// Colour (null: rainbow bands), shine, highlight sharpness, band width, own light,\n// room light, whether the step lights work, and how lazily it walks.\nconst MAT = [\n  [[172, 180, 196], 1, 16, 0, 0, [1, 1, 1], 1, 1],\n  [[232, 174, 62], 1, 9, 0, 0, [1, 0.96, 0.9], 1, 1.06],\n  [null, 0.45, 5, 0.9, 0, [1, 1, 1], 1, 1.22],\n  [[255, 56, 180], 0.3, 5, 0.9, 0.8, [0.34, 0.2, 0.66], 0, 1.22],\n  [[140, 255, 116], 0.15, 5, 0.7, 1, [0.13, 0.16, 0.28], 0, 1.16],\n];\n// The hand as capsules from the pinch: x1, y1, x2, y2, radius, sleeve.\nconst HAND = [[-1.6, -0.8, -4.6, -7.6, 2, 0], [1.3, -1, 4.4, -8.2, 1.8, 0], [6.2, -6.8, 8.4, -12.4, 2.4, 0], [2, -12.4, 2.3, -12.7, 6.6, 0], [4, -16, 8.8, -24, 4.4, 0], [7.4, -23.6, 13.5, -36, 6.2, 1]];\n\n// Built from the floor up, flights turning at each landing. A flight ends in a drop\n// deep enough that the spring can walk off its landing under the flight's end.\nfunction build(P, R) {\n  const [dL, up, fl, lands] = [R + 16, [{ x: 56, y: FLOOR }], [], []];\n  for (let s = 1, base = FLOOR, f = 0; base > 0; f++, s = -s) {\n    const y1 = base - (f ? dL : R) - 2 * R;\n    fl.push([s, y1, y1 + R, y1 + 2 * R]);\n    for (let k = 2; k >= 0; k--) up.push({ x: s > 0 ? 20 + 12 * k : 44 - 12 * k, y: y1 + k * R });\n    base = y1 - R;\n    lands.push([-s, base]);\n    up.push({ x: s > 0 ? 8 : 56, y: base, wall: -s });\n  }\n  const [end, st] = [up[0], up.reverse()];\n  st.forEach((a, i) => (a.id = i));\n  const i0 = st.findIndex((a) => a.y >= 16);\n  const seq = [{ k: LOWER, a: st[i0] }];\n  for (let i = i0; i \u003c st.length - 1; i++) {\n    const [a, b] = [st[i], st[i + 1]];\n    seq.push({ k: MOVE, a, b, s: sign(b.x - a.x), under: !!a.wall });\n    if (b.wall) seq.push({ k: BOUNCE, a: b, s: b.wall });\n  }\n  seq.push({ k: SETTLE, a: end, s: 1 }, { k: REACH, a: end }, { k: LIFT, a: end }, { k: CARRY, a: end, b: st[i0] });\n  Object.assign(P, { R, seq, st, ton: new Float32Array(st.length).fill(-99) });\n  paint(P, R, fl, lands);\n}\n\nfunction paint(P, R, fl, lands) {\n  const { bg, mat } = P;\n  const at = (x, y) => (x \u003c 0 || x >= W || y \u003c 0 || y >= H ? 9 : mat[y * W + x]);\n  const set = (x, y, m, c, k = 1) => {\n    if (at((x = round(x)), (y = round(y))) > 8) return;\n    mat[y * W + x] = m;\n    for (let i = 0; i \u003c 3; i++) bg[(y * W + x) * 3 + i] = c[i] * k;\n  };\n  const lum = (x, y) => 1.16 - 0.0034 * y - 0.003 * x;\n  // Wallpaper: a dusty blue ground, a pale stripe every 8 columns and a lozenge\n  // between; and the edges of the side walls.\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y] = [p & 63, p >> 6];\n    const d = abs((x % 8) - 4) + abs((y % 12) - 6) * 0.7;\n    if (x \u003c 2 || x > 61) set(x, y, 4, [100, 112, 136], lum(x, y) * (x === 1 || x === 62 ? 0.72 : 1));\n    else set(x, y, 0, [48, 62, 96], (x % 8 ? (d \u003c 1.6 ? 1.7 : d \u003c 2.4 ? 0.84 : 1) : 1.7) * lum(x, y) * (0.95 + 0.1 * rnd()));\n  }\n  // A step's side: the tread on top, the board's edge under it, the joint where\n  // the next riser meets it, the dark underside.\n  const block = (x, top, bot, e, edge) => {\n    for (let y = top; y \u003c= bot; y++) {\n      let k = y === top ? (edge ? 1.12 : 1) : (0.88 + 0.1 * sin(y * 1.7 + 2 * sin(x * 0.23)) + 0.05 * rnd()) * (1.08 - y * 0.0025) * (y === top + 1 ? 0.7 : e ? 1 : 0.62);\n      set(x, y, y === top ? 2 : 1, y === top ? [216, 162, 104] : [150, 94, 56], y === bot ? k * 0.55 : k);\n    }\n  };\n  for (const [s, ...ys] of fl) {\n    for (let x = 14, d; x \u003c 50; x++) block(x, ys[floor((d = s > 0 ? x - 14 : 49 - x) / T)], round(ys[0] + TH + (d * R) / T), d % T, d % T === T - 1);\n    // Each nosing overhangs the riser below it by one LED.\n    for (let k = 0, x; k \u003c 3; k++) {\n      if (at((x = s > 0 ? 26 + 12 * k : 37 - 12 * k), ys[k] + 1) === 0) set(x, ys[k] + 1, 0, [20, 30, 34]);\n      set(x, ys[k], 2, [226, 174, 116]);\n    }\n  }\n  for (const [side, y] of lands) {\n    for (let x = side \u003c 0 ? 2 : 50, i = 0; i \u003c 12; x++, i++) block(x, y, y + R + TH, side \u003c 0 ? i : 11 - i, false);\n    if (at(side \u003c 0 ? 14 : 49, y) === 0) set(side \u003c 0 ? 14 : 49, y, 2, [226, 174, 116]);\n  }\n  // Floorboards seen from a little above, the near ones brighter, and the skirting.\n  for (let p = FLOOR * W, x, r; p \u003c N; p++) set((x = p & 63), (r = (p >> 6) - FLOOR) + FLOOR, 3, r ? [176, 122, 74] : [206, 156, 104], (0.78 + 0.04 * r) * (r % 3 === 2 || (x + r * 7) % 23 === 0 ? 0.62 : 0.95 + 0.1 * rnd()));\n  for (let x = 2; x \u003c 62; x++) for (let y = FLOOR - 4; y \u003c FLOOR; y++) if (at(x, y) === 0) set(x, y, 5, [196, 190, 172], (y === FLOOR - 4 ? 1.08 : y === FLOOR - 1 ? 0.66 : 0.94) * lum(x, y));\n  // The stairs' soft shadow from the window, down and right of them.\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y, m] = [p & 63, p >> 6, mat[p]];\n    let n = 0;\n    for (let d = 0; d \u003c 9 && (m === 0 || m === 5); d++) n += at(x - 4 + (d % 3), y - 5 + floor(d / 3)) % 8 > 0 && at(x - 4 + (d % 3), y - 5 + floor(d / 3)) \u003c 3 ? 1 : 0;\n    for (let i = 0; i \u003c 3; i++) bg[p * 3 + i] *= 1 - 0.045 * n;\n  }\n  // A small step light in the wall just above each tread and landing, and a\n  // framed picture on bare wall where the spring never passes.\n  for (const a of P.st) for (let i = -1; i \u003c 1; i++) set(a.x + i, a.y - 3, 5, [70, 72, 80]);\n  const free = (x0, y0) => {\n    for (let n = 0; n \u003c 120; n++) if (at(x0 - 1 + (n % 10), y0 - 1 + floor(n / 10)) !== 0) return false;\n    return P.st.every((a) => abs(a.x - x0 - 4) > 13 || a.y \u003c y0 || a.y - 26 > y0 + 10);\n  };\n  for (let y = 4, pic = 0; y \u003c 110 && !pic; y += 2)\n    for (const x of [4, 52, 28])\n      if (!pic && (pic = free(x, y)))\n        for (let n = 0; n \u003c 80; n++) {\n          const [i, j] = [n & 7, n >> 3];\n          const edge = !i || !j || i === 7 || j === 9;\n          set(x + i, y + j, 5, i === 5 && j === 2 ? [250, 226, 130] : edge ? [196, 150, 64] : j \u003c 5 ? [96, 150, 206] : j \u003c 7 ? [72, 136, 86] : [48, 96, 62], edge && (i === 7 || j === 9) ? 0.7 : 1);\n        }\n}\n\n// Daylight fades from -1 to 1 and turns blue.\nfunction lampLevel(P, k4) {\n  const u = (k4 + 1) / 2;\n  P.amb = [0.98, 1, 1.04].map((t, i) => t * (1.16 - 1.02 * u) * mix(1, [0.6, 0.74, 1][i], u));\n  P.lampAtK = k4;\n}\n\nconst [BZ, LT, FT, PT] = [new Float32Array(8), new Float32Array(17), new Float32Array(33), new Float32Array(4)];\n\nfunction bez(t) {\n  const u = 1 - t;\n  const [a, b, c, d] = [u * u * u, 3 * u * u * t, 3 * u * t * t, t * t * t];\n  for (let i = 0; i \u003c 2; i++) {\n    PT[i] = a * BZ[i] + b * BZ[2 + i] + c * BZ[4 + i] + d * BZ[6 + i];\n    PT[2 + i] = 3 * (u * u * (BZ[2 + i] - BZ[i]) + 2 * u * t * (BZ[4 + i] - BZ[2 + i]) + t * t * (BZ[6 + i] - BZ[4 + i]));\n  }\n}\n\nfunction setCurve(x0, y0, t0x, t0y, x3, y3, t3x, t3y, h0, h3) {\n  BZ.set([x0, y0, x0 + t0x * h0, y0 + t0y * h0, x3 - t3x * h3, y3 - t3y * h3, x3, y3]);\n  let [L, px, py] = [0, x0, y0];\n  for (let i = 1; i \u003c= 16; i++) {\n    bez(i / 16);\n    L += hypot(PT[0] - px, PT[1] - py);\n    [LT[i], px, py] = [L, PT[0], PT[1]];\n  }\n  return L;\n}\n\n// How the coils spread along the curve: a0 keeps the ends open, b leans the spread\n// one way, rip is a pulse running up the bow, c opens the top of a hanging spring.\nfunction setDist(G) {\n  const w = (v) => G.a0 + G.sn * sin(PI * v) ** 1.2 * (1 + G.b * (v - 0.5)) * (1 + G.rip * sin(2 * PI * (1.5 * v + 2 * G.ph))) + G.c * v;\n  let [prev, acc] = [w(0), 0];\n  for (let i = 1; i \u003c= 32; i++) {\n    const cur = w(i / 32);\n    acc += prev + cur;\n    [FT[i], prev] = [acc, cur];\n  }\n  for (let i = 1; i \u003c= 32; i++) FT[i] /= acc;\n}\n\nfunction onCurve(v, L) {\n  const [f, i] = [v * 32, min(31, floor(v * 32))];\n  const s = (FT[i] + (FT[i + 1] - FT[i]) * (f - i)) * L;\n  let j = 0;\n  while (j \u003c 15 && LT[j + 1] \u003c s) j++;\n  bez((j + cl((s - LT[j]) / max(1e-6, LT[j + 1] - LT[j]), 0, 1)) / 16);\n}\n\n// A free end's last coils stay closed and turn together like a lid.\nfunction cap(G, x, y, tx, ty, tail) {\n  const d = CAP * PITCH;\n  if (tail) [G.nA, G.ax, G.ay, G.aux, G.auy] = [CAP, x, y, tx, ty];\n  else [G.nB, G.bx, G.by, G.bux, G.buy] = [CAP, x, y, -tx, -ty];\n  return tail ? [x + tx * d, y + ty * d] : [x - tx * d, y - ty * d];\n}\n\n// One step: the top end tips over onto the step below (p \u003c 0.3), the coils pour\n// over the bow from stack to stack, then the far end lifts and follows (p > 0.74).\nfunction move(P, S, p, G) {\n  const { a, b, s } = S;\n  const [k, dx, hb, p1, p2] = [P.kf, abs(b.x - a.x), S.under ? 0.5 : 1, 0.3, 0.74];\n  G.a0 = p \u003c 0.5 ? mix(0.36, 0.18, p / 0.5) : mix(0.18, 0.12, (p - 0.5) / 0.5);\n  G.b = p \u003c p2 ? mix(0.9, 0.2, p / p2) : mix(0.2, 0, (p - p2) / (1 - p2));\n  [G.bx, G.by] = [b.x, b.y];\n  let C;\n  if (p \u003c p1) {\n    const t = p / p1;\n    const e = t * t * (1.7 - 0.7 * t);\n    const [ex, ey, tx, ty] = [quad(a.x, a.x + s * dx * 0.55, b.x, e), quad(a.y - HS, min(a.y - HS, b.y) - (4 + 4 * k) * hb, b.y, e), s * sin(PI * e), -cos(PI * e)];\n    G.nA = NC - CAP - (0.36 * NC - CAP) * (0.25 * t + 0.75 * e);\n    C = [a.x, a.y - G.nA * PITCH, 0, -1, ...cap(G, ex, ey, tx, ty), tx, ty];\n    if (P.seg === 1 && p \u003c 0.2) [P.hx, P.hy] = [ex, ey];\n  } else if (p \u003c p2) {\n    // The two stacks lean toward each other while the bow pulls on them.\n    const t = (p - p1) / (p2 - p1);\n    const lean = 0.16 * sin(PI * t) * k;\n    [G.nA, G.nB, G.aux, G.auy] = [CAP + (0.64 * NC - CAP) * (1 - t), CAP + (0.66 * NC - CAP) * t, s * sin(lean), -cos(lean)];\n    [G.bux, G.buy] = [-G.aux, G.auy];\n    C = [a.x + G.aux * G.nA * PITCH, a.y + G.auy * G.nA * PITCH, G.aux, G.auy, b.x + G.bux * G.nB * PITCH, b.y + G.buy * G.nB * PITCH, -G.bux, -G.buy];\n    G.rip = 0.45 * sin(PI * t) * exp(-2 * t) * k;\n    G.ph = t;\n  } else {\n    const t = (p - p2) / (1 - p2);\n    const e = t * t * (2 - t);\n    const [fx, fy, tx, ty] = [quad(a.x, a.x + s * dx * 0.35, b.x, e), quad(a.y, min(a.y, b.y - HS) - (3 + 3 * k) * hb, b.y - HS, e), s * sin(PI * e), -cos(PI * e)];\n    G.nB = NC - CAP - (0.34 * NC - CAP) * (1 - e);\n    C = [...cap(G, fx, fy, tx, ty, 1), tx, ty, b.x, b.y - G.nB * PITCH, 0, 1];\n  }\n  const ch = hypot(C[4] - C[0], C[5] - C[1]);\n  const h = (0.45 * ch + 4.5 * k * min(1, ch / 10)) * hb;\n  G.curve = [...C, h, h];\n}\n\n// On a landing the top end swings out, meets the wall and springs back over.\n// On the floor the same swing just rocks and dies away.\nfunction bounce(P, S, u, G) {\n  const [a, phc] = [S.a, PI / 2];\n  let ph = S.k === SETTLE ? 1.3 * phc * exp(-3 * u) * sin(2 * PI * 2.2 * u) * (1 - sm((u - 0.7) / 0.3)) : u \u003c 0.42 ? phc * (u / 0.42) ** 1.7 : u \u003c 0.56 ? phc : phc * (1 - ((u - 0.56) / 0.44) ** 0.85);\n  let w = S.s;\n  if (ph \u003c 0) [ph, w] = [-ph, -w];\n  const sq = S.k === BOUNCE && u > 0.4 && u \u003c 0.6 ? 0.16 * sin((PI * (u - 0.4)) / 0.2) : 0;\n  const La = (((abs((S.s > 0 ? 62 : 2) - a.x) - 1.6) * PI) / 2) * (ph / phc) ** 0.7 * (1 - sq);\n  G.nA = NC - CAP - min(NC * 0.4, La / 1.1);\n  const [x0, y0, r, tx, ty] = [a.x, a.y - G.nA * PITCH, La / max(ph, 1e-3), w * sin(ph), -cos(ph)];\n  const [qx, qy] = [x0 + w * r * (1 - cos(ph)), y0 - r * sin(ph)];\n  const h = ph \u003c 1e-3 ? La / 3 : (4 / 3) * tan(ph / 4) * r;\n  cap(G, qx + tx * CAP * PITCH, qy + ty * CAP * PITCH, tx, ty);\n  G.curve = [x0, y0, 0, -1, qx, qy, tx, ty, h, h];\n  [G.a0, G.sn, G.b] = [0.6, 0.6, -sq * 3];\n}\n\nconst hangLen = (P, m) => m * PITCH + P.lext * (m / NC) ** 2;\n\n// Held by its top coil the spring hangs open at the top and closed at the bottom,\n// each gap carrying the weight of the coils below it.\nfunction hang(P, S, u, G) {\n  let [a, x0, y0, m] = [S.a, S.a.x, 0, NC];\n  if (S.k === CARRY) {\n    [P.hx, P.hy] = carry(P, S, u);\n    [x0, y0] = P.pb;\n    G.nA = 0;\n  } else {\n    m = NC * (S.k === LIFT ? sm(u) : 1 - sm(u));\n    G.nA = NC - m;\n    y0 = a.y - G.nA * PITCH;\n    [P.hx, P.hy] = [x0, y0 - hangLen(P, m)];\n  }\n  [G.sn, G.c, G.a0] = [0, 1, min(50, (m * PITCH) / max(1e-3, 2 * P.lext * (m / NC) ** 2))];\n  const L = max(1e-3, hypot(P.hx - x0, P.hy - y0));\n  G.curve = [x0, y0, (P.hx - x0) / L, (P.hy - y0) / L, P.hx, P.hy, 0, -1, L / 3, L / 3];\n}\n\nfunction carry(P, S, u) {\n  const [e, L] = [sm(u), hangLen(P, NC)];\n  return [mix(S.a.x, S.b.x, e) + 6 * sin(PI * e), mix(FLOOR - L, S.b.y - L, e)];\n}\n\nfunction dur(P, S) {\n  if (S.k === MOVE) return 0.44 * sqrt((S.b.y - S.a.y + 6) / 12) * P.kf;\n  return S.k === BOUNCE ? DUR[1] * P.kf : DUR[S.k];\n}\n\nfunction shape(P) {\n  const [S, G] = [P.seq[P.seg], P.G];\n  const u = cl(P.sp / dur(P, S), 0, 1);\n  Object.assign(P.G, { ax: S.a.x, ay: S.a.y, aux: 0, auy: -1, nA: NC, bx: 0, by: 0, bux: 0, buy: -1, nB: 0, a0: 0.3, sn: 1, b: 0, rip: 0, ph: 0, c: 0, curve: null });\n  P.hx = -99;\n  if (S.k === MOVE) move(P, S, u, G);\n  else if (S.k === BOUNCE || S.k === SETTLE) bounce(P, S, u, G);\n  else if (S.k === REACH) [P.hx, P.hy] = [mix(80, S.a.x, 1 - (1 - u) ** 2), mix(FLOOR - 46, S.a.y - HS, 1 - (1 - u) ** 2)];\n  else hang(P, S, u, G);\n  if (P.ht >= 0 && P.ht \u003c 0.8) [P.hx, P.hy] = [P.rx + 12 * sm(P.ht / 0.8), P.ry - 44 * sm(P.ht / 0.8)];\n  // Every coil: its centre and the way the spring runs through it.\n  const { cx, cy, tx, ty } = P;\n  const nc = NC - G.nA - G.nB;\n  const L = G.curve && nc > 1e-3 ? setCurve(...G.curve) : 0;\n  if (L) setDist(G);\n  for (let q = 0; q \u003c NC; q++) {\n    const u = q + 0.5;\n    if (u \u003c= G.nA || !L) [cx[q], cy[q], tx[q], ty[q]] = [G.ax + G.aux * u * PITCH, G.ay + G.auy * u * PITCH, G.aux, G.auy];\n    else if (u >= NC - G.nB) [cx[q], cy[q], tx[q], ty[q]] = [G.bx + G.bux * (NC - u) * PITCH, G.by + G.buy * (NC - u) * PITCH, -G.bux, -G.buy];\n    else {\n      onCurve((u - G.nA) / nc, L);\n      const d = hypot(PT[2], PT[3]) || 1;\n      [cx[q], cy[q], tx[q], ty[q]] = [PT[0], PT[1], PT[2] / d, PT[3] / d];\n    }\n  }\n}\n\nfunction restart(P) {\n  Object.assign(P, { seg: 0, sp: 0.9, par: 0, ht: -1, pb: [0, 0], pv: [0, 0], clock: 0 });\n  P.ton.fill(-99);\n}\n\nfunction advance(P, h) {\n  P.sp += h;\n  P.clock += h;\n  if (P.ht >= 0) P.ht += h;\n  let S = P.seq[P.seg];\n  if (P.seg === 1 && P.ht \u003c 0 && P.sp >= 0.2 * dur(P, S)) [P.ht, P.rx, P.ry] = [0, P.hx, P.hy];\n  // A step light wakes when the spring lands by it, and stays on for 8 seconds.\n  const b = S.k === MOVE ? S.b : S.k === LOWER ? S.a : null;\n  if (b && P.sp >= 0.3 * dur(P, S) && P.ton[b.id] \u003c P.clock - 9.5) P.ton[b.id] = P.clock;\n  while (P.sp >= dur(P, S)) {\n    P.sp -= dur(P, S);\n    if (S.k === MOVE) P.par ^= 1;\n    S = P.seq[(P.seg = (P.seg + 1) % P.seq.length)];\n    if (S.k === CARRY) [P.pb, P.pv] = [[S.a.x, FLOOR], [0, 0]];\n    if (S.k === LOWER) P.ht = -1;\n  }\n  // Carried, the bottom of the spring hangs back and swings under the hand.\n  if (S.k !== CARRY) return;\n  const u = P.sp / dur(P, S);\n  const [[hx, hy], L, damp] = [carry(P, S, u), hangLen(P, NC), 3.5 + 30 * sm((u - 0.65) / 0.35)];\n  for (let c = 0; c \u003c 2; c++) {\n    P.pv[c] += (48 * ((c ? hy + L : hx) - P.pb[c]) - damp * P.pv[c]) * h;\n    P.pb[c] += P.pv[c] * h;\n  }\n  const [dx, dy, r] = [P.pb[0] - hx, P.pb[1] - hy - L, hypot(P.pb[0] - hx, P.pb[1] - hy - L)];\n  if (r > 0.6 * L) P.pb = [hx + (dx * 0.6 * L) / r, hy + L + (dy * 0.6 * L) / r];\n}\n\nexport function setup(params) {\n  const [P, F] = [params, (n) => new Float32Array(n)];\n  Object.assign(P, { bg: F(N * 3), out: F(N * 3), pl: F(N), mat: new Uint8Array(N), sh: F(N), gl: F(N), fa: F(N * 4), ba: F(N * 4) });\n  Object.assign(P, { hit: new Uint8Array(N), list: new Int32Array(N), nl: 0, cx: F(NC), cy: F(NC), tx: F(NC), ty: F(NC), G: {}, kf: 1, lext: 38, hx: -99, hy: 0, M: material(0) });\n  build(P, 6);\n  lampLevel(P, 0.06);\n  restart(P);\n}\n\nexport function update(dt, input, params) {\n  const [P, k] = [params, input.knobValues || [0, 2, 6, 0.06]];\n  P.M = material(cl(k[0], 0, 1));\n  [P.kf, P.lext] = [P.M.lazy, 38 / P.M.lazy ** 2];\n  const R = round(cl(k[2], 6, 12));\n  if (R !== P.R) build(P, R), restart(P);\n  if (cl(k[3], -1, 1) !== P.lampAtK) lampLevel(P, cl(k[3], -1, 1));\n  const h = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  const n = Math.ceil(h / 0.01);\n  for (let i = 0; i \u003c n; i++) advance(P, h / n);\n}\n\nfunction material(k1) {\n  const i = min(3, floor(k1 * 4));\n  const [t, A, B] = [k1 * 4 - i, MAT[i], MAT[i + 1]];\n  const M = { i, t, shine: mix(A[1], B[1], t), pw: mix(A[2], B[2], t), wide: mix(A[3], B[3], t), emit: mix(A[4], B[4], t), lamps: mix(A[6], B[6], t), lazy: mix(A[7], B[7], t) };\n  M.room = A[5].map((v, c) => mix(v, B[5][c], t));\n  const g = (m) => MAT[m][0] || [230, 200, 190];\n  M.glow = g(i).map((v, c) => mix(v, g(i + 1)[c], t) * M.emit);\n  return M;\n}\n\nfunction colour(M, id) {\n  const pick = (m) => MAT[m][0] || RAIN[floor((id * 6) / NC)];\n  const [a, b] = [pick(M.i), pick(M.i + 1)];\n  return [0, 1, 2].map((c) => mix(a[c], b[c], M.t));\n}\n\nfunction stamp(F, K, r, x, y, w) {\n  const [ix, iy, n] = [round(x), round(y), 2 * r + 1];\n  for (let j = -r; j \u003c= r; j++) {\n    const yy = iy + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    for (let i = -r; i \u003c= r; i++) if (ix + i >= 0 && ix + i \u003c W) F[yy * W + ix + i] += K[(j + r) * n + i + r] * w;\n  }\n}\n\nfunction add(P, A, x, y, c, w) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || w \u003c= 0) return;\n  const p = y * W + x;\n  if (!P.hit[p]) P.list[P.nl++] = p;\n  P.hit[p] = 1;\n  for (let i = 0; i \u003c 3; i++) A[p * 4 + i] += c[i] * w;\n  A[p * 4 + 3] += w;\n}\n\nfunction splat(P, A, x, y, c, w) {\n  const [ix, iy] = [floor((x -= 0.5)), floor((y -= 0.5))];\n  const [fx, fy] = [x - ix, y - iy];\n  for (let n = 0; n \u003c 4; n++) add(P, A, ix + (n & 1), iy + (n >> 1), c, w * (n & 1 ? fx : 1 - fx) * (n >> 1 ? fy : 1 - fy));\n}\n\n// Each coil a thin ring seen nearly side-on: the far half dim inside the\n// spring, the near half lit by the window and the step lights, with a glint.\nfunction rings(P, M) {\n  const { cx, cy, tx, ty, fa, ba } = P;\n  const v = [0, 0, 0];\n  for (let q = 0; q \u003c NC; q++) {\n    const col = colour(M, P.par ? NC - 1 - q : q);\n    const [nx, ny] = [-ty[q], tx[q]];\n    const [nl, nh] = [nx * LX + ny * LY, nx * HX + ny * HY];\n    const lamp = P.pl[cl(round(cy[q]), 0, H - 1) * W + cl(round(cx[q]), 0, W - 1)] * 0.3;\n    const lt = M.room.map((r, i) => r * (P.amb[i] + (lamp * LAMP[i]) / 255));\n    for (let j = 0; j \u003c KS; j++) {\n      const [c, s] = [CS[j], SN[j]];\n      const dif = max(0, c * nl + s * LZ);\n      const spe = M.shine * max(0, c * nh + s * HZ) ** M.pw;\n      const k = s > 0 ? 1 : 0.42;\n      for (let i = 0; i \u003c 3; i++) v[i] = (col[i] * (M.emit + lt[i] * (0.28 + 0.85 * dif)) + 255 * spe * lt[i]) * k;\n      const [x, y, A] = [cx[q] + (nx * c + ZX * s) * RAD, cy[q] + (ny * c + ZY * s) * RAD, s > 0 ? fa : ba];\n      splat(P, A, x, y, v, 1);\n      if (M.wide > 0) splat(P, A, x + tx[q] * 0.7, y + ty[q] * 0.7, v, M.wide);\n    }\n  }\n}\n\n// The room: daylight, the pools of the step lights that are on, the spring's\n// soft shadow, and the light a glowing spring throws round it.\nfunction lighting(P, M) {\n  const { cx, cy, tx, ty, sh, gl, pl, out, bg, mat, amb } = P;\n  sh.fill(0);\n  gl.fill(0);\n  pl.fill(0);\n  for (let q = 0; q \u003c NC; q += 2) {\n    const [nx, ny] = [-ty[q] * RAD * 0.65, tx[q] * RAD * 0.65];\n    for (const f of [-1, 0, 1]) stamp(sh, KSH, 3, cx[q] + 3 + nx * f, cy[q] + 4 + ny * f, 0.3);\n    if (M.emit > 0 && q % 6 === 0) stamp(gl, KGL, 8, cx[q], cy[q], 0.12 * M.emit);\n  }\n  for (const a of P.st) {\n    const d = P.clock - P.ton[a.id];\n    const I = M.lamps * sm(d / 0.3) * (1 - sm((d - 8) / 1.5));\n    if (I \u003c= 0) continue;\n    for (let y = max(0, a.y - 13); y \u003c= min(H - 1, a.y); y++)\n      for (let x = max(0, a.x - 13); x \u003c min(W, a.x + 13); x++) if (mat[y * W + x] % 3 !== 1) pl[y * W + x] += 1.5 * I * exp(-(((x + 0.5 - a.x) / 9) ** 2) - ((y - a.y + 3) / 6) ** 2);\n    for (let i = -1; i \u003c 1; i++) if (a.y > 3 && a.y \u003c H + 2) pl[(a.y - 3) * W + a.x + i] += 6 * I;\n  }\n  const K = [0, 1, 2].map((i) => [M.room[i] * amb[i], (M.room[i] * LAMP[i]) / 300, (M.glow[i] / 255) * 1.3, M.glow[i] * 0.1, M.room[i] * [60, 34, 6][i]]);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const m = mat[p];\n    const s = 1 - min(1, sh[p]) * (m === 0 || m === 5 ? 0.7 : m === 2 || m === 3 ? 0.45 : 0);\n    const [g, l] = [min(1.5, gl[p]), pl[p]];\n    for (let i = 0, k; i \u003c 3; i++) out[o + i] = bg[o + i] * ((k = K[i])[0] * s + k[1] * l + k[2] * g) + k[3] * g + k[4] * l;\n  }\n}\n\nfunction composite(P) {\n  const { out, fa, ba, hit, list } = P;\n  for (let i = 0; i \u003c P.nl; i++) {\n    const [p, q] = [list[i], list[i] * 4];\n    for (const A of [ba, fa]) {\n      const a = A[q + 3];\n      if (a > 0) for (let c = 0, k = min(1, a); c \u003c 3; c++) out[p * 3 + c] = out[p * 3 + c] * (1 - k) + (A[q + c] / a) * k;\n      A[q] = A[q + 1] = A[q + 2] = A[q + 3] = 0;\n    }\n    hit[p] = 0;\n  }\n  P.nl = 0;\n}\n\nfunction capsule(px, py, x1, y1, x2, y2) {\n  const [dx, dy] = [x2 - x1, y2 - y1];\n  const t = cl(((px - x1) * dx + (py - y1) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return hypot(px - x1 - dx * t, py - y1 - dy * t);\n}\n\n// A child's hand pinching the top coil, a striped sleeve running off up and right.\nfunction hand(P, M) {\n  const { out, hx, hy } = P;\n  for (let y = max(0, floor(hy - 44)); y \u003c= min(H - 1, hy + 2); y++)\n    for (let x = max(0, floor(hx - 8)); x \u003c= min(W - 1, hx + 21); x++) {\n      let [ds, dc] = [9, 9];\n      for (const [x1, y1, x2, y2, r, sl] of HAND) {\n        const d = capsule(x + 0.5 - hx, y + 0.5 - hy, x1, y1, x2, y2) - r;\n        if (sl) dc = min(dc, d);\n        else ds = min(ds, d);\n      }\n      let [c, k] = [0, 0];\n      if (ds \u003c 0) [c, k] = [[238, 184, 148], (ds > -0.8 ? 0.68 : 0.86 + 0.18 * cl(-ds / 2.5, 0, 1)) * (1.06 - 0.02 * (x - hx))];\n      else if (dc \u003c 0) [c, k] = [floor((y - hy + (x - hx) * 0.5) / 2) % 2 ? [206, 56, 62] : [232, 222, 206], dc > -0.8 ? 0.62 : 0.92];\n      else continue;\n      for (let i = 0; i \u003c 3; i++) out[(y * W + x) * 3 + i] = c[i] * k * M.room[i] * (0.15 + 0.85 * P.amb[i] + P.pl[y * W + x] * 0.5);\n    }\n}\n\nexport function draw(display, params) {\n  const [P, M] = [params, params.M];\n  shape(P);\n  lighting(P, M);\n  rings(P, M);\n  composite(P);\n  if (P.hx > -20 && P.hx \u003c 90 && P.hy > -2) hand(P, M);\n  const o = P.out;\n  for (let y = 0, i = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, i += 3) display.setPixel(x, y, min(255, o[i]), min(255, o[i + 1]), min(255, o[i + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Spring=0..1, Speed=0.2..3, Rise=6..12, Lamp=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Spring","min":0,"max":1,"about":"Which Slinky comes out of the box: polished steel at 0, then gold plate, the rainbow plastic one that walks lazier, a neon one under a blacklight, and at 1 a glow-in-the-dark one with the lights out."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the film runs: at 2 a step takes under half a second and the walk from top to bottom about seven; at 0.2 it is ten times slower."},{"name":"Rise","min":6,"max":12,"about":"How tall each step is, from 6 rows to 12: low steps make three flights and small quick bows, tall ones two flights and long reaches down."},{"name":"Lamp","min":-1,"max":1,"about":"The daylight in the stairwell: morning at -1, dusk at 0, night at 1, when only the step lights the spring has woken light the stairs and it glints as it passes them."}],"start":[0,2,6,0.06],"measures":{"motion":0.1152,"detail":0.057,"edges":0.2572,"complexity":1.8838,"coverage":0.9943,"colour":0.1312,"drift":0.056},"knobResponse":[0.1557,0.043,0.0908,0.2999]},{"slug":"smalti","title":"Smalti","family":"glass","round":19,"note":"라벤나 갈라 플라키디아의 별 궁륭과 기도하는 사도를 어두운 줄눈의 유리와 금 테세라로 128줄에 짜요. 등불이 벽을 오르내리면 저마다 조금씩 기운 금 큐브가 빛의 각도를 만날 때마다 번쩍여요.","idea":"A Ravenna mosaic of glass and gold tesserae set in dark mortar, a starry vault over a white-robed apostle, where a carried lamp wanders across the wall and every gold tessera, set at its own small tilt, flashes as the light finds its angle.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Smalti\n// Family:  glass\n// Idea:    A Ravenna mosaic of glass and gold tesserae set in dark mortar, a starry vault over a white-robed apostle, where a carried lamp wanders across the wall and every gold tessera, set at its own small tilt, flashes as the light finds its angle.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the starry vault and the apostles of the Mausoleum of Galla Placidia, Ravenna\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Tesserae=2..4, Gold=0..1\n//\n// Knob 1: Light. The colour of the lamp, from a pale white flame at 0 to a small amber oil flame at 1 that throws a smaller pool and leaves the rest of the chapel dim.\n// Knob 2: Speed. How fast the lamp is carried about: at 2 it crosses the wall in about six seconds and climbs from the apostle's feet to the cross in about seven.\n// Knob 3: Tesserae. How big the cubes of the blue ground and the grass are, from 2 LEDs across to 4; the gold work and the apostle keep their fine cubes.\n// Knob 4: Gold. At 0.06 only the stars, the cross, the rim and the halo are gold; turned up, a gold ground spreads out from the cross, over the whole vault by 0.5 and down the whole wall by 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst TAU = Math.PI * 2;\n// The vault: a disc of blue round the cross, with a banded rim.\nconst VX = 32;\nconst VY = 37;\nconst VR = 31.5;\n// A frieze under the vault, then the niche where the apostle stands.\nconst FR0 = 70;\nconst FR1 = 78;\nconst GROUND = 120;\n// Kinds of tessera.\nconst BLUE = 0;\nconst NAVY = 1;\nconst GOLD = 2;\nconst RED = 3;\nconst WHITE = 4;\nconst GREY = 5;\nconst PURPLE = 6;\nconst FLESH = 7;\nconst HAIR = 8;\nconst GREEN = 9;\nconst LEAF = 10;\nconst SKY = 11;\nconst BROWN = 12;\nconst PEARL = 13;\nconst KINDS = 14;\nconst BASE = [\n  [38, 62, 200],\n  [28, 44, 172],\n  [204, 160, 58],\n  [214, 50, 36],\n  [232, 232, 220],\n  [158, 170, 204],\n  [172, 70, 160],\n  [240, 188, 152],\n  [116, 66, 38],\n  [52, 166, 84],\n  [124, 190, 64],\n  [70, 112, 230],\n  [150, 92, 50],\n];\n// A flash off gold leaf is a pale gold, not white.\nconst FLASH = [255, 240, 186];\n// The gold work is set in cubes of 2 LEDs whatever the ground: the cross in\n// two columns, and each star as a cube with four cubes round it. Steps are\n// of 3 LEDs, a cube and its mortar.\nconst CROSS = [];\nfor (let by = -3; by \u003c= 3; by++) CROSS.push([-1, by], [0, by]);\nfor (const bx of [-3, -2, 1, 2]) CROSS.push([bx, -2], [bx, -1]);\nconst STAR = [\n  [0, 0],\n  [0, -1],\n  [0, 1],\n  [-1, 0],\n  [1, 0],\n];\nconst DOT = [[0, 0]];\n// The apostle, cube by cube: a gold halo, a white robe with purple stripes,\n// both forearms raised in prayer, sandals on the grass. Faces and haloes were\n// set in finer cubes than the ground in Ravenna too, so the figure keeps its\n// 2 LED cubes at every Tesserae setting.\nconst SPRITE = [\n  \"....GGGGG....\",\n  \".F.GGHHHGG.F.\",\n  \".F.GHFFFHG.F.\",\n  \".W.GGFFFGG.W.\",\n  \".W..GGHGG..W.\",\n  \".WWWWWWWWWWS.\",\n  \"...WPWWWPS...\",\n  \"...WPWWWPS...\",\n  \"...WPWWWPSS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWWWWWWWS..\",\n  \"....B...B....\",\n];\nconst LETTER = { G: GOLD, H: HAIR, F: FLESH, W: WHITE, S: GREY, P: PURPLE, B: BROWN };\nconst APOSTLE = [];\nSPRITE.forEach((row, by) => [...row].forEach((ch, bx) => ch !== \".\" && APOSTLE.push([bx, by, LETTER[ch]])));\n// Rings of stars round the cross: radius, count, turn, and whether each is\n// a full star or a single cube.\nconst STARS = [\n  [11.5, 6, 0.5, 0],\n  [19.5, 8, 0, 1],\n  [26.4, 16, 0.5, 0],\n];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hash(a, b, s) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Cut a run of tesserae along u: each cut sits near a multiple of len,\n// moved by up to 0.8 LED, so the cubes come out 1 LED longer or shorter.\nfunction cut(u, len, row, s) {\n  const c = Math.floor(u / len);\n  if (u \u003c c * len + 1.6 * (hash(row, c, s) - 0.5)) return c - 1;\n  if (u >= (c + 1) * len + 1.6 * (hash(row, c + 1, s) - 0.5)) return c + 1;\n  return c;\n}\n\n// Straight courses laid across the wall, a little wavy, as a mosaicist sets\n// a plain ground.\nfunction course(x, y, p, s, region) {\n  const v = y + 0.45 * Math.sin(x * 0.21 + s);\n  const row = Math.floor(v / p);\n  return region * 1e6 + row * 1000 + cut(x + row * 1.7, p, row, s) + 300;\n}\n\n// What the design asks for under the courses.\nfunction paint(x, y) {\n  const dv = Math.hypot(x - VX, y - VY);\n  if (dv \u003c VR) return BLUE;\n  if (y \u003c FR0) return NAVY;\n  if (y \u003c FR1) return PEARL;\n  if (y >= GROUND) {\n    if (hash(Math.floor(x / 3), Math.floor(y / 3), 91) \u003c 0.12) return y \u003c GROUND + 4 ? RED : WHITE;\n    return y \u003c GROUND + 4 ? LEAF : GREEN;\n  }\n  return BLUE;\n}\n\n// The setting: which tessera a point belongs to.\nfunction layout(x, y, p, s) {\n  const dv = Math.hypot(x - VX, y - VY);\n  if (dv \u003c VR) return course(x, y, p, s, 1);\n  if (y \u003c FR0) return course(x, y, p, s + 1, 3);\n  if (y \u003c FR1) {\n    const row = y \u003c (FR0 + FR1) / 2 ? 0 : 1;\n    return 4e6 + row * 1000 + cut(x + 2 * row, 4, row + 70, s) + 300;\n  }\n  if (y >= GROUND) return course(x, y - GROUND, p, s + 2, 5);\n  return course(x, y, p, s + 7, 10);\n}\n\n// Lay a motif cube by cube over the ground: each cube is a 3 by 3 block, its\n// last row and column becoming mortar. A cube that would overlap one already\n// set is left out.\nfunction setMotif(key, set, x0, y0, cubes, tag) {\n  for (const [bx, by, kd] of cubes) {\n    const ax = x0 + 3 * bx;\n    const ay = y0 + 3 * by;\n    let free = ax >= 0 && ay >= 0 && ax + 3 \u003c= W && ay + 3 \u003c= H;\n    for (let y = ay; free && y \u003c ay + 3; y++) for (let x = ax; x \u003c ax + 3; x++) if (set[y * W + x] >= 0) free = false;\n    if (!free) continue;\n    for (let y = ay; y \u003c ay + 3; y++)\n      for (let x = ax; x \u003c ax + 3; x++) {\n        key[y * W + x] = 2e7 + tag * 1000 + (bx + 20) * 40 + by + 20;\n        set[y * W + x] = kd === undefined ? GOLD : kd;\n      }\n  }\n}\n\nfunction build(P, p) {\n  P.p = p;\n  const s = P.seed;\n  const key = new Float64Array(N);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) key[y * W + x] = layout(x + 0.5, y + 0.5, p, s);\n  const set = new Int8Array(N).fill(-1);\n  setMotif(key, set, 13, 81, APOSTLE, 0);\n  setMotif(key, set, VX - 1, VY - 1, CROSS, 1);\n  let tag = 2;\n  for (const [rr, n, ph, big] of STARS)\n    for (let k = 0; k \u003c n; k++) {\n      const a = ((k + ph) / n) * TAU - Math.PI / 2;\n      setMotif(key, set, Math.round(VX + rr * Math.cos(a) - 1), Math.round(VY + rr * Math.sin(a) - 1), big ? STAR : DOT, tag++);\n    }\n  // The rim of the vault: a band of red, gold and white cubes.\n  const rim = [];\n  for (let k = 0; k \u003c 58; k++) {\n    const a = (k / 58) * TAU;\n    rim.push([Math.round(VX - 1 + 29.9 * Math.cos(a)), Math.round(VY - 1 + 29.9 * Math.sin(a)), [RED, GOLD, WHITE, GOLD][k % 4]]);\n  }\n  for (const [x, y, kd] of rim) setMotif(key, set, x, y, [[0, 0, kd]], tag++);\n  // Small stars in the niche round the apostle, and a flower in each spandrel.\n  for (const [sx, sy] of [\n    [4, 84],\n    [57, 84],\n    [4, 106],\n    [57, 106],\n  ])\n    setMotif(key, set, sx, sy, STAR, tag++);\n  setMotif(key, set, 3, 2, [[0, 0], [1, 0], [0, 1]], tag++);\n  setMotif(key, set, W - 6, 2, [[0, 0], [-1, 0], [0, 1]], tag++);\n  // Mortar runs along every join: the LED left of or above a join is mortar.\n  const ids = new Int32Array(N);\n  const index = new Map();\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      if ((x \u003c W - 1 && key[q + 1] !== key[q]) || (y \u003c H - 1 && key[q + W] !== key[q])) {\n        ids[q] = -1;\n        continue;\n      }\n      let id = index.get(key[q]);\n      if (id === undefined) {\n        id = index.size;\n        index.set(key[q], id);\n      }\n      ids[q] = id;\n    }\n  const n = index.size;\n  const cx = new Float32Array(n);\n  const cy = new Float32Array(n);\n  const count = new Float32Array(n);\n  const votes = new Float32Array(n * KINDS);\n  for (let q = 0; q \u003c N; q++) {\n    const id = ids[q];\n    if (id \u003c 0) continue;\n    const x = q % W;\n    const y = (q - x) / W;\n    cx[id] += x + 0.5;\n    cy[id] += y + 0.5;\n    count[id]++;\n    votes[id * KINDS + (set[q] >= 0 ? set[q] : paint(x + 0.5, y + 0.5))]++;\n  }\n  const kind = new Uint8Array(n);\n  const tint = new Float32Array(n * 3);\n  const tilt = new Float32Array(n * 2);\n  const rank = new Float32Array(n);\n  let alt = 0;\n  for (let i = 0; i \u003c n; i++) {\n    cx[i] /= count[i];\n    cy[i] /= count[i];\n    let best = 0;\n    for (let k = 1; k \u003c KINDS; k++) if (votes[i * KINDS + k] > votes[i * KINDS + best]) best = k;\n    const dv = Math.hypot(cx[i] - VX, cy[i] - VY);\n    // The frieze's upper course alternates red and white cube by cube.\n    if (best === PEARL) best = cy[i] \u003c (FR0 + FR1) / 2 ? (alt++ % 2 ? WHITE : RED) : GOLD;\n    // The vault's blue pales toward the cross: lighter cubes are mixed in.\n    else if (best === BLUE && dv \u003c VR && Math.random() \u003c 0.75 - dv / 30) best = SKY;\n    else if (best === BLUE && Math.random() \u003c 0.25) best = NAVY;\n    kind[i] = best;\n    // Every cube is its own pour of glass: a little lighter or darker,\n    // warmer or cooler than the next.\n    const v = 0.86 + 0.14 * Math.random();\n    for (let c = 0; c \u003c 3; c++) tint[i * 3 + c] = v * (0.9 + 0.2 * Math.random());\n    tilt[i * 2] = gauss() * 0.25;\n    tilt[i * 2 + 1] = gauss() * 0.25;\n    // As Gold turns up, gold ground takes the blue's place nearest the cross\n    // first, with a ragged edge.\n    rank[i] = 0.78 * clamp(Math.hypot(cx[i] - VX, (cy[i] - VY) * 0.8) / 90, 0, 1) + 0.22 * Math.random();\n  }\n  // Per LED the glass is uneven in its weaker colours, and the mortar is\n  // grainy.\n  const jit = new Int8Array(N * 3);\n  for (let q = 0; q \u003c N * 3; q++) jit[q] = Math.floor(Math.random() * 31) - 15;\n  const mortar = new Uint8Array(N * 3);\n  for (let q = 0; q \u003c N; q++) {\n    const lv = 5 + Math.floor(Math.random() * 7);\n    const m = Math.floor(Math.random() * 3);\n    for (let c = 0; c \u003c 3; c++) mortar[q * 3 + c] = c === m ? lv : Math.floor(Math.random() * (lv + 1));\n  }\n  Object.assign(P, { ids, n, cx, cy, kind, tint, tilt, rank, jit, mortar, col: new Float32Array(n * 3), top: new Uint8Array(n) });\n}\n\nfunction gauss() {\n  return (Math.random() + Math.random() + Math.random() - 1.5) * 2;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.seed = Math.floor(Math.random() * 1e6);\n  P.t = 0;\n  P.p = 0;\n  P.started = false;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.warm = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const p = Math.round(clamp(k[2], 2, 4)) + 1;\n  P.gold = clamp((k[3] - 0.06) / 0.94, 0, 1);\n  if (p !== P.p) build(P, p);\n  if (!P.started) {\n    P.started = true;\n    P.t = 3 + 6 * speed;\n  }\n  P.t += dt * speed;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.p) return;\n  const t = P.t;\n  // The lamp wanders the wall on a slow figure, a little in front of it, and\n  // its flame breathes.\n  const lx = 32 + 30 * Math.sin(0.5 * t);\n  const ly = 70 + 52 * Math.sin(0.29 * t - 0.93);\n  const flame = 1 + 0.05 * Math.sin(t * 7.3) + 0.04 * Math.sin(t * 11.9 + 1);\n  const warm = P.warm;\n  const R = 25 - 9 * warm;\n  const amb = 0.45 - 0.17 * warm;\n  const lc = [1, 0.95 - 0.25 * warm, 0.88 - 0.5 * warm];\n  const D2 = 2 * 34;\n  const { n, cx, cy, kind, tint, tilt, rank, col, top } = P;\n  const gold = P.gold * 1.08;\n  for (let i = 0; i \u003c n; i++) {\n    let kd = kind[i];\n    if ((kd === BLUE || kd === NAVY || kd === SKY) && rank[i] \u003c gold) kd = GOLD;\n    const dx = lx - cx[i];\n    const dy = ly - cy[i];\n    const pool = Math.exp(-(dx * dx + dy * dy) / (2 * R * R));\n    const lit = amb + pool * flame;\n    // A cube flashes when its tilt sends the lamp straight back at you.\n    const gx = tilt[i * 2] - dx / D2;\n    const gy = tilt[i * 2 + 1] - dy / D2;\n    const flash = Math.exp(-(gx * gx + gy * gy) / 0.035);\n    const shine = kd === GOLD ? 1 : 0.18;\n    const b = BASE[kd];\n    let mx = 0;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = b[c] * tint[i * 3 + c] * lc[c] * lit * (kd === GOLD ? 1.1 : 1);\n      const w = clamp(v + shine * flash * (FLASH[c] * lc[c] - v), 0, 255);\n      col[i * 3 + c] = w;\n      if (w > col[i * 3 + mx]) mx = c;\n    }\n    // Even in the dark a cube stands clear of its mortar.\n    const hi = col[i * 3 + mx];\n    if (hi \u003c 58) for (let c = 0; c \u003c 3; c++) col[i * 3 + c] *= 58 / Math.max(1, hi);\n    top[i] = mx;\n  }\n  const { ids, jit, mortar } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const id = ids[q];\n      if (id \u003c 0) {\n        display.setPixel(x, y, mortar[q * 3], mortar[q * 3 + 1], mortar[q * 3 + 2]);\n        continue;\n      }\n      const m = top[id];\n      const hi = col[id * 3 + m];\n      let r = col[id * 3] + jit[q * 3];\n      let g = col[id * 3 + 1] + jit[q * 3 + 1];\n      let b = col[id * 3 + 2] + jit[q * 3 + 2];\n      r = m === 0 ? hi : clamp(r, 0, hi);\n      g = m === 1 ? hi : clamp(g, 0, hi);\n      b = m === 2 ? hi : clamp(b, 0, hi);\n      display.setPixel(x, y, Math.round(r), Math.round(g), Math.round(b));\n    }\n}\n","layer":{"id":"layer-smalti","type":"code","name":"smalti","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Smalti\n// Family:  glass\n// Idea:    A Ravenna mosaic of glass and gold tesserae set in dark mortar, a starry vault over a white-robed apostle, where a carried lamp wanders across the wall and every gold tessera, set at its own small tilt, flashes as the light finds its angle.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the starry vault and the apostles of the Mausoleum of Galla Placidia, Ravenna\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Tesserae=2..4, Gold=0..1\n//\n// Knob 1: Light. The colour of the lamp, from a pale white flame at 0 to a small amber oil flame at 1 that throws a smaller pool and leaves the rest of the chapel dim.\n// Knob 2: Speed. How fast the lamp is carried about: at 2 it crosses the wall in about six seconds and climbs from the apostle's feet to the cross in about seven.\n// Knob 3: Tesserae. How big the cubes of the blue ground and the grass are, from 2 LEDs across to 4; the gold work and the apostle keep their fine cubes.\n// Knob 4: Gold. At 0.06 only the stars, the cross, the rim and the halo are gold; turned up, a gold ground spreads out from the cross, over the whole vault by 0.5 and down the whole wall by 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst TAU = Math.PI * 2;\n// The vault: a disc of blue round the cross, with a banded rim.\nconst VX = 32;\nconst VY = 37;\nconst VR = 31.5;\n// A frieze under the vault, then the niche where the apostle stands.\nconst FR0 = 70;\nconst FR1 = 78;\nconst GROUND = 120;\n// Kinds of tessera.\nconst BLUE = 0;\nconst NAVY = 1;\nconst GOLD = 2;\nconst RED = 3;\nconst WHITE = 4;\nconst GREY = 5;\nconst PURPLE = 6;\nconst FLESH = 7;\nconst HAIR = 8;\nconst GREEN = 9;\nconst LEAF = 10;\nconst SKY = 11;\nconst BROWN = 12;\nconst PEARL = 13;\nconst KINDS = 14;\nconst BASE = [\n  [38, 62, 200],\n  [28, 44, 172],\n  [204, 160, 58],\n  [214, 50, 36],\n  [232, 232, 220],\n  [158, 170, 204],\n  [172, 70, 160],\n  [240, 188, 152],\n  [116, 66, 38],\n  [52, 166, 84],\n  [124, 190, 64],\n  [70, 112, 230],\n  [150, 92, 50],\n];\n// A flash off gold leaf is a pale gold, not white.\nconst FLASH = [255, 240, 186];\n// The gold work is set in cubes of 2 LEDs whatever the ground: the cross in\n// two columns, and each star as a cube with four cubes round it. Steps are\n// of 3 LEDs, a cube and its mortar.\nconst CROSS = [];\nfor (let by = -3; by \u003c= 3; by++) CROSS.push([-1, by], [0, by]);\nfor (const bx of [-3, -2, 1, 2]) CROSS.push([bx, -2], [bx, -1]);\nconst STAR = [\n  [0, 0],\n  [0, -1],\n  [0, 1],\n  [-1, 0],\n  [1, 0],\n];\nconst DOT = [[0, 0]];\n// The apostle, cube by cube: a gold halo, a white robe with purple stripes,\n// both forearms raised in prayer, sandals on the grass. Faces and haloes were\n// set in finer cubes than the ground in Ravenna too, so the figure keeps its\n// 2 LED cubes at every Tesserae setting.\nconst SPRITE = [\n  \"....GGGGG....\",\n  \".F.GGHHHGG.F.\",\n  \".F.GHFFFHG.F.\",\n  \".W.GGFFFGG.W.\",\n  \".W..GGHGG..W.\",\n  \".WWWWWWWWWWS.\",\n  \"...WPWWWPS...\",\n  \"...WPWWWPS...\",\n  \"...WPWWWPSS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWWWWWWWS..\",\n  \"....B...B....\",\n];\nconst LETTER = { G: GOLD, H: HAIR, F: FLESH, W: WHITE, S: GREY, P: PURPLE, B: BROWN };\nconst APOSTLE = [];\nSPRITE.forEach((row, by) => [...row].forEach((ch, bx) => ch !== \".\" && APOSTLE.push([bx, by, LETTER[ch]])));\n// Rings of stars round the cross: radius, count, turn, and whether each is\n// a full star or a single cube.\nconst STARS = [\n  [11.5, 6, 0.5, 0],\n  [19.5, 8, 0, 1],\n  [26.4, 16, 0.5, 0],\n];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hash(a, b, s) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Cut a run of tesserae along u: each cut sits near a multiple of len,\n// moved by up to 0.8 LED, so the cubes come out 1 LED longer or shorter.\nfunction cut(u, len, row, s) {\n  const c = Math.floor(u / len);\n  if (u \u003c c * len + 1.6 * (hash(row, c, s) - 0.5)) return c - 1;\n  if (u >= (c + 1) * len + 1.6 * (hash(row, c + 1, s) - 0.5)) return c + 1;\n  return c;\n}\n\n// Straight courses laid across the wall, a little wavy, as a mosaicist sets\n// a plain ground.\nfunction course(x, y, p, s, region) {\n  const v = y + 0.45 * Math.sin(x * 0.21 + s);\n  const row = Math.floor(v / p);\n  return region * 1e6 + row * 1000 + cut(x + row * 1.7, p, row, s) + 300;\n}\n\n// What the design asks for under the courses.\nfunction paint(x, y) {\n  const dv = Math.hypot(x - VX, y - VY);\n  if (dv \u003c VR) return BLUE;\n  if (y \u003c FR0) return NAVY;\n  if (y \u003c FR1) return PEARL;\n  if (y >= GROUND) {\n    if (hash(Math.floor(x / 3), Math.floor(y / 3), 91) \u003c 0.12) return y \u003c GROUND + 4 ? RED : WHITE;\n    return y \u003c GROUND + 4 ? LEAF : GREEN;\n  }\n  return BLUE;\n}\n\n// The setting: which tessera a point belongs to.\nfunction layout(x, y, p, s) {\n  const dv = Math.hypot(x - VX, y - VY);\n  if (dv \u003c VR) return course(x, y, p, s, 1);\n  if (y \u003c FR0) return course(x, y, p, s + 1, 3);\n  if (y \u003c FR1) {\n    const row = y \u003c (FR0 + FR1) / 2 ? 0 : 1;\n    return 4e6 + row * 1000 + cut(x + 2 * row, 4, row + 70, s) + 300;\n  }\n  if (y >= GROUND) return course(x, y - GROUND, p, s + 2, 5);\n  return course(x, y, p, s + 7, 10);\n}\n\n// Lay a motif cube by cube over the ground: each cube is a 3 by 3 block, its\n// last row and column becoming mortar. A cube that would overlap one already\n// set is left out.\nfunction setMotif(key, set, x0, y0, cubes, tag) {\n  for (const [bx, by, kd] of cubes) {\n    const ax = x0 + 3 * bx;\n    const ay = y0 + 3 * by;\n    let free = ax >= 0 && ay >= 0 && ax + 3 \u003c= W && ay + 3 \u003c= H;\n    for (let y = ay; free && y \u003c ay + 3; y++) for (let x = ax; x \u003c ax + 3; x++) if (set[y * W + x] >= 0) free = false;\n    if (!free) continue;\n    for (let y = ay; y \u003c ay + 3; y++)\n      for (let x = ax; x \u003c ax + 3; x++) {\n        key[y * W + x] = 2e7 + tag * 1000 + (bx + 20) * 40 + by + 20;\n        set[y * W + x] = kd === undefined ? GOLD : kd;\n      }\n  }\n}\n\nfunction build(P, p) {\n  P.p = p;\n  const s = P.seed;\n  const key = new Float64Array(N);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) key[y * W + x] = layout(x + 0.5, y + 0.5, p, s);\n  const set = new Int8Array(N).fill(-1);\n  setMotif(key, set, 13, 81, APOSTLE, 0);\n  setMotif(key, set, VX - 1, VY - 1, CROSS, 1);\n  let tag = 2;\n  for (const [rr, n, ph, big] of STARS)\n    for (let k = 0; k \u003c n; k++) {\n      const a = ((k + ph) / n) * TAU - Math.PI / 2;\n      setMotif(key, set, Math.round(VX + rr * Math.cos(a) - 1), Math.round(VY + rr * Math.sin(a) - 1), big ? STAR : DOT, tag++);\n    }\n  // The rim of the vault: a band of red, gold and white cubes.\n  const rim = [];\n  for (let k = 0; k \u003c 58; k++) {\n    const a = (k / 58) * TAU;\n    rim.push([Math.round(VX - 1 + 29.9 * Math.cos(a)), Math.round(VY - 1 + 29.9 * Math.sin(a)), [RED, GOLD, WHITE, GOLD][k % 4]]);\n  }\n  for (const [x, y, kd] of rim) setMotif(key, set, x, y, [[0, 0, kd]], tag++);\n  // Small stars in the niche round the apostle, and a flower in each spandrel.\n  for (const [sx, sy] of [\n    [4, 84],\n    [57, 84],\n    [4, 106],\n    [57, 106],\n  ])\n    setMotif(key, set, sx, sy, STAR, tag++);\n  setMotif(key, set, 3, 2, [[0, 0], [1, 0], [0, 1]], tag++);\n  setMotif(key, set, W - 6, 2, [[0, 0], [-1, 0], [0, 1]], tag++);\n  // Mortar runs along every join: the LED left of or above a join is mortar.\n  const ids = new Int32Array(N);\n  const index = new Map();\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      if ((x \u003c W - 1 && key[q + 1] !== key[q]) || (y \u003c H - 1 && key[q + W] !== key[q])) {\n        ids[q] = -1;\n        continue;\n      }\n      let id = index.get(key[q]);\n      if (id === undefined) {\n        id = index.size;\n        index.set(key[q], id);\n      }\n      ids[q] = id;\n    }\n  const n = index.size;\n  const cx = new Float32Array(n);\n  const cy = new Float32Array(n);\n  const count = new Float32Array(n);\n  const votes = new Float32Array(n * KINDS);\n  for (let q = 0; q \u003c N; q++) {\n    const id = ids[q];\n    if (id \u003c 0) continue;\n    const x = q % W;\n    const y = (q - x) / W;\n    cx[id] += x + 0.5;\n    cy[id] += y + 0.5;\n    count[id]++;\n    votes[id * KINDS + (set[q] >= 0 ? set[q] : paint(x + 0.5, y + 0.5))]++;\n  }\n  const kind = new Uint8Array(n);\n  const tint = new Float32Array(n * 3);\n  const tilt = new Float32Array(n * 2);\n  const rank = new Float32Array(n);\n  let alt = 0;\n  for (let i = 0; i \u003c n; i++) {\n    cx[i] /= count[i];\n    cy[i] /= count[i];\n    let best = 0;\n    for (let k = 1; k \u003c KINDS; k++) if (votes[i * KINDS + k] > votes[i * KINDS + best]) best = k;\n    const dv = Math.hypot(cx[i] - VX, cy[i] - VY);\n    // The frieze's upper course alternates red and white cube by cube.\n    if (best === PEARL) best = cy[i] \u003c (FR0 + FR1) / 2 ? (alt++ % 2 ? WHITE : RED) : GOLD;\n    // The vault's blue pales toward the cross: lighter cubes are mixed in.\n    else if (best === BLUE && dv \u003c VR && Math.random() \u003c 0.75 - dv / 30) best = SKY;\n    else if (best === BLUE && Math.random() \u003c 0.25) best = NAVY;\n    kind[i] = best;\n    // Every cube is its own pour of glass: a little lighter or darker,\n    // warmer or cooler than the next.\n    const v = 0.86 + 0.14 * Math.random();\n    for (let c = 0; c \u003c 3; c++) tint[i * 3 + c] = v * (0.9 + 0.2 * Math.random());\n    tilt[i * 2] = gauss() * 0.25;\n    tilt[i * 2 + 1] = gauss() * 0.25;\n    // As Gold turns up, gold ground takes the blue's place nearest the cross\n    // first, with a ragged edge.\n    rank[i] = 0.78 * clamp(Math.hypot(cx[i] - VX, (cy[i] - VY) * 0.8) / 90, 0, 1) + 0.22 * Math.random();\n  }\n  // Per LED the glass is uneven in its weaker colours, and the mortar is\n  // grainy.\n  const jit = new Int8Array(N * 3);\n  for (let q = 0; q \u003c N * 3; q++) jit[q] = Math.floor(Math.random() * 31) - 15;\n  const mortar = new Uint8Array(N * 3);\n  for (let q = 0; q \u003c N; q++) {\n    const lv = 5 + Math.floor(Math.random() * 7);\n    const m = Math.floor(Math.random() * 3);\n    for (let c = 0; c \u003c 3; c++) mortar[q * 3 + c] = c === m ? lv : Math.floor(Math.random() * (lv + 1));\n  }\n  Object.assign(P, { ids, n, cx, cy, kind, tint, tilt, rank, jit, mortar, col: new Float32Array(n * 3), top: new Uint8Array(n) });\n}\n\nfunction gauss() {\n  return (Math.random() + Math.random() + Math.random() - 1.5) * 2;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.seed = Math.floor(Math.random() * 1e6);\n  P.t = 0;\n  P.p = 0;\n  P.started = false;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.warm = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const p = Math.round(clamp(k[2], 2, 4)) + 1;\n  P.gold = clamp((k[3] - 0.06) / 0.94, 0, 1);\n  if (p !== P.p) build(P, p);\n  if (!P.started) {\n    P.started = true;\n    P.t = 3 + 6 * speed;\n  }\n  P.t += dt * speed;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.p) return;\n  const t = P.t;\n  // The lamp wanders the wall on a slow figure, a little in front of it, and\n  // its flame breathes.\n  const lx = 32 + 30 * Math.sin(0.5 * t);\n  const ly = 70 + 52 * Math.sin(0.29 * t - 0.93);\n  const flame = 1 + 0.05 * Math.sin(t * 7.3) + 0.04 * Math.sin(t * 11.9 + 1);\n  const warm = P.warm;\n  const R = 25 - 9 * warm;\n  const amb = 0.45 - 0.17 * warm;\n  const lc = [1, 0.95 - 0.25 * warm, 0.88 - 0.5 * warm];\n  const D2 = 2 * 34;\n  const { n, cx, cy, kind, tint, tilt, rank, col, top } = P;\n  const gold = P.gold * 1.08;\n  for (let i = 0; i \u003c n; i++) {\n    let kd = kind[i];\n    if ((kd === BLUE || kd === NAVY || kd === SKY) && rank[i] \u003c gold) kd = GOLD;\n    const dx = lx - cx[i];\n    const dy = ly - cy[i];\n    const pool = Math.exp(-(dx * dx + dy * dy) / (2 * R * R));\n    const lit = amb + pool * flame;\n    // A cube flashes when its tilt sends the lamp straight back at you.\n    const gx = tilt[i * 2] - dx / D2;\n    const gy = tilt[i * 2 + 1] - dy / D2;\n    const flash = Math.exp(-(gx * gx + gy * gy) / 0.035);\n    const shine = kd === GOLD ? 1 : 0.18;\n    const b = BASE[kd];\n    let mx = 0;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = b[c] * tint[i * 3 + c] * lc[c] * lit * (kd === GOLD ? 1.1 : 1);\n      const w = clamp(v + shine * flash * (FLASH[c] * lc[c] - v), 0, 255);\n      col[i * 3 + c] = w;\n      if (w > col[i * 3 + mx]) mx = c;\n    }\n    // Even in the dark a cube stands clear of its mortar.\n    const hi = col[i * 3 + mx];\n    if (hi \u003c 58) for (let c = 0; c \u003c 3; c++) col[i * 3 + c] *= 58 / Math.max(1, hi);\n    top[i] = mx;\n  }\n  const { ids, jit, mortar } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const id = ids[q];\n      if (id \u003c 0) {\n        display.setPixel(x, y, mortar[q * 3], mortar[q * 3 + 1], mortar[q * 3 + 2]);\n        continue;\n      }\n      const m = top[id];\n      const hi = col[id * 3 + m];\n      let r = col[id * 3] + jit[q * 3];\n      let g = col[id * 3 + 1] + jit[q * 3 + 1];\n      let b = col[id * 3 + 2] + jit[q * 3 + 2];\n      r = m === 0 ? hi : clamp(r, 0, hi);\n      g = m === 1 ? hi : clamp(g, 0, hi);\n      b = m === 2 ? hi : clamp(b, 0, hi);\n      display.setPixel(x, y, Math.round(r), Math.round(g), Math.round(b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Tesserae=2..4, Gold=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The colour of the lamp, from a pale white flame at 0 to a small amber oil flame at 1 that throws a smaller pool and leaves the rest of the chapel dim."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the lamp is carried about: at 2 it crosses the wall in about six seconds and climbs from the apostle's feet to the cross in about seven."},{"name":"Tesserae","min":2,"max":4,"about":"How big the cubes of the blue ground and the grass are, from 2 LEDs across to 4; the gold work and the apostle keep their fine cubes."},{"name":"Gold","min":0,"max":1,"about":"At 0.06 only the stars, the cross, the rim and the halo are gold; turned up, a gold ground spreads out from the cross, over the whole vault by 0.5 and down the whole wall by 1."}],"start":[0,2,2,0.06],"measures":{"motion":0.0438,"detail":0.2001,"edges":1,"complexity":2.3202,"coverage":0.4186,"colour":0.2372,"drift":0.1208},"knobResponse":[0.0652,0.0785,0.082,0.0729]},{"slug":"sorting","title":"Sorting","family":"algo","round":2,"note":"막대 64개를 알고리즘 하나가 한 번에 한 동작씩 줄 세워요. 비교하는 막대는 희게, 바꾸는 막대는 붉게 켜지고, 다 서면 위에서 아래로 훑어 확인한 뒤 다시 섞어요.","idea":"Sixty-four bars are put in order by an algorithm you can watch compare and swap them one operation at a time, then a sweep checks the order and they are thrown back into a heap.","buttons":"K1 tap throws the bars back into a heap.","code":"// ===== Patternflow pattern =====\n// Title:   Sorting\n// Family:  algo\n// Idea:    Sixty-four bars are put in order by an algorithm you can watch compare and swap them one operation at a time, then a sweep checks the order and they are thrown back into a heap.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..5, Algorithm=0..7, Rows=2..8\n//\n// Knob 1: Hue. Turns the bars, which run from the shortest to the longest across a third of the colour wheel.\n// Knob 2: Speed. Operations per second with 64 bars, from 50 to about 5400, and a quarter of that with 16; a compare, a swap and a write each count as one.\n// Knob 3: Algorithm. 0 bubble, 1 insertion, 2 selection, 3 shell, 4 quick, 5 merge, 6 heap, 7 radix; turned mid-sort, the new one takes the bars as they stand.\n// Knob 4: Rows. How many LED rows each bar takes: 2 gives 64 bars, 8 gives 16 with a dark row between them.\n// Buttons: K1 tap throws the bars back into a heap.\n\nconst W = 64;\nconst H = 128;\nconst MAXN = 64;\n// The worst case is bubble or insertion sort on 64 bars in reverse: 2016\n// compares and 2016 swaps.\nconst OPS = 8192;\nconst COMPARE = 0;\nconst SWAP = 1;\nconst WRITE = 2;\n\nconst SORT = 0;\nconst SWEEP = 1;\nconst HOLD = 2;\nconst SHUFFLE = 3;\n\n// Gaps for shell sort, Ciura's sequence cut to what 64 bars can use.\nconst GAPS = [57, 23, 10, 4, 1];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = 255 * (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v);\n  out[o + 1] = 255 * (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p);\n  out[o + 2] = 255 * (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q);\n}\n\nexport function setup(params) {\n  // The bars on screen, and the copy an algorithm runs on ahead of them.\n  params.arr = new Int16Array(MAXN);\n  params.work = new Int16Array(MAXN);\n  params.aux = new Int16Array(MAXN);\n  params.bucket = new Int16Array(4);\n  params.ops = new Int32Array(OPS);\n  params.opN = 0;\n  params.opAt = 0;\n  params.heatC = new Float32Array(MAXN);\n  params.heatS = new Float32Array(MAXN);\n  params.glow = new Float32Array(MAXN);\n  params.len = new Uint8Array(MAXN);\n  params.col = new Float32Array(MAXN * 3);\n  params.done = new Float32Array(MAXN * 3);\n  params.accent = new Float32Array(3);\n  params.n = 0;\n  params.rows = 2;\n  params.algo = 0;\n  params.phase = SORT;\n  params.t = 0;\n  params.budget = 0;\n  params.hueKey = -1;\n}\n\n// The algorithms run on params.work in one go and leave their operations in\n// params.ops, which update then plays back at the speed the knob asks for.\nfunction cmp(P, i, j) {\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n  return P.work[i] - P.work[j];\n}\n\nfunction swp(P, i, j) {\n  const a = P.work;\n  const t = a[i];\n  a[i] = a[j];\n  a[j] = t;\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (SWAP \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n}\n\nfunction put(P, i, v) {\n  P.work[i] = v;\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (WRITE \u003c\u003c 16) | (i \u003c\u003c 8) | v;\n}\n\nfunction bubble(P, n) {\n  for (let end = n - 1; end > 0; end--) {\n    let swapped = false;\n    for (let j = 0; j \u003c end; j++) {\n      if (cmp(P, j, j + 1) > 0) {\n        swp(P, j, j + 1);\n        swapped = true;\n      }\n    }\n    if (!swapped) return;\n  }\n}\n\nfunction insertion(P, n, gap) {\n  for (let i = gap; i \u003c n; i++) {\n    for (let j = i; j >= gap && cmp(P, j - gap, j) > 0; j -= gap) swp(P, j - gap, j);\n  }\n}\n\nfunction selection(P, n) {\n  for (let i = 0; i \u003c n - 1; i++) {\n    let m = i;\n    for (let j = i + 1; j \u003c n; j++) if (cmp(P, j, m) \u003c 0) m = j;\n    if (m !== i) swp(P, i, m);\n  }\n}\n\nfunction quick(P, lo, hi) {\n  if (lo >= hi) return;\n  // The middle bar is the pivot, parked at the end while the range is split,\n  // so a range that is already in order does not take n squared compares.\n  swp(P, (lo + hi) >> 1, hi);\n  let s = lo;\n  for (let j = lo; j \u003c hi; j++) {\n    if (cmp(P, j, hi) \u003c 0) {\n      if (j !== s) swp(P, s, j);\n      s++;\n    }\n  }\n  if (s !== hi) swp(P, s, hi);\n  quick(P, lo, s - 1);\n  quick(P, s + 1, hi);\n}\n\nfunction merge(P, lo, hi) {\n  if (hi - lo \u003c 2) return;\n  const mid = (lo + hi) >> 1;\n  merge(P, lo, mid);\n  merge(P, mid, hi);\n  const a = P.work;\n  const aux = P.aux;\n  for (let i = lo; i \u003c hi; i++) aux[i] = a[i];\n  let i = lo;\n  let j = mid;\n  for (let k = lo; k \u003c hi; k++) {\n    // The compare lights where the two runs were read from; the write lands\n    // on the bar being rebuilt.\n    if (i \u003c mid && j \u003c hi) {\n      if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n      if (aux[i] \u003c= aux[j]) put(P, k, aux[i++]);\n      else put(P, k, aux[j++]);\n    } else if (i \u003c mid) put(P, k, aux[i++]);\n    else put(P, k, aux[j++]);\n  }\n}\n\nfunction sift(P, start, end) {\n  let root = start;\n  for (;;) {\n    let child = root * 2 + 1;\n    if (child > end) return;\n    if (child + 1 \u003c= end && cmp(P, child, child + 1) \u003c 0) child++;\n    if (cmp(P, root, child) \u003c 0) {\n      swp(P, root, child);\n      root = child;\n    } else return;\n  }\n}\n\nfunction heap(P, n) {\n  for (let s = (n >> 1) - 1; s >= 0; s--) sift(P, s, n - 1);\n  for (let end = n - 1; end > 0; end--) {\n    swp(P, 0, end);\n    sift(P, 0, end - 1);\n  }\n}\n\n// Least significant digit first, in base 4: each pass reads every bar once to\n// count its digit, then writes them all back grouped by it.\nfunction radix(P, n) {\n  const a = P.work;\n  const aux = P.aux;\n  const b = P.bucket;\n  for (let shift = 0; 1 \u003c\u003c shift \u003c n; shift += 2) {\n    b.fill(0);\n    for (let i = 0; i \u003c n; i++) {\n      if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | i;\n      b[(a[i] >> shift) & 3]++;\n      aux[i] = a[i];\n    }\n    let sum = 0;\n    for (let d = 0; d \u003c 4; d++) {\n      const c = b[d];\n      b[d] = sum;\n      sum += c;\n    }\n    // The bars go back in order of their old places, so the pass is stable.\n    // Writing them by the place they land on makes the pass run top to bottom.\n    for (let i = 0; i \u003c n; i++) a[b[(aux[i] >> shift) & 3]++] = aux[i];\n    for (let i = 0; i \u003c n; i++) put(P, i, a[i]);\n  }\n}\n\nfunction startSort(P, algo) {\n  const n = P.n;\n  P.work.set(P.arr);\n  P.opN = 0;\n  P.opAt = 0;\n  P.algo = algo;\n  if (algo === 0) bubble(P, n);\n  else if (algo === 1) insertion(P, n, 1);\n  else if (algo === 2) selection(P, n);\n  else if (algo === 3) {\n    for (let g = 0; g \u003c GAPS.length; g++) if (GAPS[g] \u003c n) insertion(P, n, GAPS[g]);\n  } else if (algo === 4) quick(P, 0, n - 1);\n  else if (algo === 5) merge(P, 0, n);\n  else if (algo === 6) heap(P, n);\n  else radix(P, n);\n  P.phase = SORT;\n}\n\nfunction startShuffle(P) {\n  const n = P.n;\n  P.work.set(P.arr);\n  P.opN = 0;\n  P.opAt = 0;\n  // Fisher and Yates, top to bottom, played back as swaps.\n  for (let i = 0; i \u003c n - 1; i++) swp(P, i, i + Math.floor(Math.random() * (n - i)));\n  P.phase = SHUFFLE;\n}\n\nfunction play(P, op) {\n  const type = op >> 16;\n  const i = (op >> 8) & 255;\n  const j = op & 255;\n  if (type === COMPARE) {\n    P.heatC[i] = 1;\n    P.heatC[j] = 1;\n  } else if (type === SWAP) {\n    const t = P.arr[i];\n    P.arr[i] = P.arr[j];\n    P.arr[j] = t;\n    P.heatS[i] = 1;\n    P.heatS[j] = 1;\n  } else {\n    P.arr[i] = j;\n    P.heatS[i] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 2];\n  const rows = Math.max(2, Math.min(8, Math.round(k[3])));\n  const algo = Math.max(0, Math.min(7, Math.round(k[2])));\n  const ops = 50 * Math.pow(2, 1.35 * k[1]);\n  // Fewer bars go slower in step, so a chunky bar can be followed by eye and\n  // sixteen of them do not spend most of their time sorted.\n  const rate = ops * (Math.floor(H / rows) / MAXN);\n  // At the fast end the check, the pause and the shuffle shorten too.\n  const pace = Math.max(0.45, Math.min(1, Math.pow(320 / ops, 0.4)));\n\n  if (rows !== P.rows || P.n === 0) {\n    P.rows = rows;\n    P.n = Math.floor(H / rows);\n    const n = P.n;\n    for (let v = 0; v \u003c n; v++) P.len[v] = Math.max(1, Math.round(((v + 1) * W) / n));\n    for (let i = 0; i \u003c n; i++) P.arr[i] = i;\n    for (let i = n - 1; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.arr[i];\n      P.arr[i] = P.arr[j];\n      P.arr[j] = t;\n    }\n    P.heatC.fill(0);\n    P.heatS.fill(0);\n    P.glow.fill(0);\n    P.hueKey = -1;\n    startSort(P, algo);\n  } else if (algo !== P.algo) {\n    if (P.phase === SORT) startSort(P, algo);\n    else P.algo = algo;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startShuffle(P);\n\n  const n = P.n;\n  // A lit bar fades over about the last ten operations with 64 bars and the\n  // last three with 16, so a slow sort shows each step and a fast one a tail.\n  const life = Math.max(0.035, Math.min(0.2, 11 / ops));\n  const fadeC = Math.exp(-dt / (life * 0.7));\n  const fadeS = Math.exp(-dt / life);\n  for (let i = 0; i \u003c n; i++) {\n    P.heatC[i] *= fadeC;\n    P.heatS[i] *= fadeS;\n  }\n\n  if (P.phase === SORT || P.phase === SHUFFLE) {\n    // The heap is thrown in about two thirds of a second, less at the fast end.\n    P.budget += dt * (P.phase === SORT ? rate : n / (0.65 * pace));\n    while (P.budget >= 1 && P.opAt \u003c P.opN) {\n      play(P, P.ops[P.opAt++]);\n      P.budget -= 1;\n    }\n    if (P.phase === SHUFFLE) for (let i = 0; i \u003c n; i++) P.glow[i] = Math.max(0, P.glow[i] - dt * 4);\n    if (P.opAt >= P.opN) {\n      P.budget = 0;\n      if (P.phase === SORT) {\n        P.phase = SWEEP;\n        P.t = 0;\n      } else startSort(P, P.algo);\n    }\n  } else if (P.phase === SWEEP) {\n    // The check runs down the bars in 0.8 s and leaves them lit behind it.\n    P.t += dt;\n    const s = Math.min(n, (P.t / (0.8 * pace)) * n);\n    for (let i = 0; i \u003c s; i++) P.glow[i] = 1;\n    if (s \u003c n) P.heatC[Math.floor(s)] = 1;\n    else {\n      P.phase = HOLD;\n      P.t = 0;\n    }\n  } else {\n    P.t += dt;\n    if (P.t > 0.9 * pace) startShuffle(P);\n  }\n\n  // Colours change only with the hue knob or the number of bars. K1 at 0\n  // opens on cyan running to violet.\n  const hue = k[0] + 0.45;\n  if (hue !== P.hueKey) {\n    P.hueKey = hue;\n    for (let v = 0; v \u003c n; v++) {\n      const h = hue + (0.33 * v) / Math.max(1, n - 1);\n      hsvInto(P.col, v * 3, h, 0.82, 0.62);\n      hsvInto(P.done, v * 3, h, 0.5, 0.82);\n    }\n    hsvInto(P.accent, 0, hue + 0.58, 0.95, 1);\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const n = P.n;\n  const rows = P.rows;\n  // Bars thicker than two rows keep a dark row under them so they stay apart.\n  const thick = rows > 2 ? rows - 1 : rows;\n  const top = (H - n * rows) >> 1;\n  const col = P.col;\n  const done = P.done;\n  const ac = P.accent;\n  for (let y = 0; y \u003c H; y++) {\n    const off = y - top;\n    const i = Math.floor(off / rows);\n    if (off \u003c 0 || i >= n || off - i * rows >= thick) {\n      for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    const v = P.arr[i];\n    const g = P.glow[i];\n    const hc = P.heatC[i];\n    const hs = P.heatS[i];\n    let r = col[v * 3] + (done[v * 3] - col[v * 3]) * g;\n    let gr = col[v * 3 + 1] + (done[v * 3 + 1] - col[v * 3 + 1]) * g;\n    let b = col[v * 3 + 2] + (done[v * 3 + 2] - col[v * 3 + 2]) * g;\n    r += (225 - r) * hc;\n    gr += (225 - gr) * hc;\n    b += (225 - b) * hc;\n    r += (ac[0] - r) * hs;\n    gr += (ac[1] - gr) * hs;\n    b += (ac[2] - b) * hs;\n    const L = P.len[v];\n    for (let x = 0; x \u003c W; x++) {\n      if (x \u003c L) display.setPixel(x, y, r, gr, b);\n      else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","layer":{"id":"layer-sorting","type":"code","name":"sorting","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sorting\n// Family:  algo\n// Idea:    Sixty-four bars are put in order by an algorithm you can watch compare and swap them one operation at a time, then a sweep checks the order and they are thrown back into a heap.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..5, Algorithm=0..7, Rows=2..8\n//\n// Knob 1: Hue. Turns the bars, which run from the shortest to the longest across a third of the colour wheel.\n// Knob 2: Speed. Operations per second with 64 bars, from 50 to about 5400, and a quarter of that with 16; a compare, a swap and a write each count as one.\n// Knob 3: Algorithm. 0 bubble, 1 insertion, 2 selection, 3 shell, 4 quick, 5 merge, 6 heap, 7 radix; turned mid-sort, the new one takes the bars as they stand.\n// Knob 4: Rows. How many LED rows each bar takes: 2 gives 64 bars, 8 gives 16 with a dark row between them.\n// Buttons: K1 tap throws the bars back into a heap.\n\nconst W = 64;\nconst H = 128;\nconst MAXN = 64;\n// The worst case is bubble or insertion sort on 64 bars in reverse: 2016\n// compares and 2016 swaps.\nconst OPS = 8192;\nconst COMPARE = 0;\nconst SWAP = 1;\nconst WRITE = 2;\n\nconst SORT = 0;\nconst SWEEP = 1;\nconst HOLD = 2;\nconst SHUFFLE = 3;\n\n// Gaps for shell sort, Ciura's sequence cut to what 64 bars can use.\nconst GAPS = [57, 23, 10, 4, 1];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = 255 * (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v);\n  out[o + 1] = 255 * (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p);\n  out[o + 2] = 255 * (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q);\n}\n\nexport function setup(params) {\n  // The bars on screen, and the copy an algorithm runs on ahead of them.\n  params.arr = new Int16Array(MAXN);\n  params.work = new Int16Array(MAXN);\n  params.aux = new Int16Array(MAXN);\n  params.bucket = new Int16Array(4);\n  params.ops = new Int32Array(OPS);\n  params.opN = 0;\n  params.opAt = 0;\n  params.heatC = new Float32Array(MAXN);\n  params.heatS = new Float32Array(MAXN);\n  params.glow = new Float32Array(MAXN);\n  params.len = new Uint8Array(MAXN);\n  params.col = new Float32Array(MAXN * 3);\n  params.done = new Float32Array(MAXN * 3);\n  params.accent = new Float32Array(3);\n  params.n = 0;\n  params.rows = 2;\n  params.algo = 0;\n  params.phase = SORT;\n  params.t = 0;\n  params.budget = 0;\n  params.hueKey = -1;\n}\n\n// The algorithms run on params.work in one go and leave their operations in\n// params.ops, which update then plays back at the speed the knob asks for.\nfunction cmp(P, i, j) {\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n  return P.work[i] - P.work[j];\n}\n\nfunction swp(P, i, j) {\n  const a = P.work;\n  const t = a[i];\n  a[i] = a[j];\n  a[j] = t;\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (SWAP \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n}\n\nfunction put(P, i, v) {\n  P.work[i] = v;\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (WRITE \u003c\u003c 16) | (i \u003c\u003c 8) | v;\n}\n\nfunction bubble(P, n) {\n  for (let end = n - 1; end > 0; end--) {\n    let swapped = false;\n    for (let j = 0; j \u003c end; j++) {\n      if (cmp(P, j, j + 1) > 0) {\n        swp(P, j, j + 1);\n        swapped = true;\n      }\n    }\n    if (!swapped) return;\n  }\n}\n\nfunction insertion(P, n, gap) {\n  for (let i = gap; i \u003c n; i++) {\n    for (let j = i; j >= gap && cmp(P, j - gap, j) > 0; j -= gap) swp(P, j - gap, j);\n  }\n}\n\nfunction selection(P, n) {\n  for (let i = 0; i \u003c n - 1; i++) {\n    let m = i;\n    for (let j = i + 1; j \u003c n; j++) if (cmp(P, j, m) \u003c 0) m = j;\n    if (m !== i) swp(P, i, m);\n  }\n}\n\nfunction quick(P, lo, hi) {\n  if (lo >= hi) return;\n  // The middle bar is the pivot, parked at the end while the range is split,\n  // so a range that is already in order does not take n squared compares.\n  swp(P, (lo + hi) >> 1, hi);\n  let s = lo;\n  for (let j = lo; j \u003c hi; j++) {\n    if (cmp(P, j, hi) \u003c 0) {\n      if (j !== s) swp(P, s, j);\n      s++;\n    }\n  }\n  if (s !== hi) swp(P, s, hi);\n  quick(P, lo, s - 1);\n  quick(P, s + 1, hi);\n}\n\nfunction merge(P, lo, hi) {\n  if (hi - lo \u003c 2) return;\n  const mid = (lo + hi) >> 1;\n  merge(P, lo, mid);\n  merge(P, mid, hi);\n  const a = P.work;\n  const aux = P.aux;\n  for (let i = lo; i \u003c hi; i++) aux[i] = a[i];\n  let i = lo;\n  let j = mid;\n  for (let k = lo; k \u003c hi; k++) {\n    // The compare lights where the two runs were read from; the write lands\n    // on the bar being rebuilt.\n    if (i \u003c mid && j \u003c hi) {\n      if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n      if (aux[i] \u003c= aux[j]) put(P, k, aux[i++]);\n      else put(P, k, aux[j++]);\n    } else if (i \u003c mid) put(P, k, aux[i++]);\n    else put(P, k, aux[j++]);\n  }\n}\n\nfunction sift(P, start, end) {\n  let root = start;\n  for (;;) {\n    let child = root * 2 + 1;\n    if (child > end) return;\n    if (child + 1 \u003c= end && cmp(P, child, child + 1) \u003c 0) child++;\n    if (cmp(P, root, child) \u003c 0) {\n      swp(P, root, child);\n      root = child;\n    } else return;\n  }\n}\n\nfunction heap(P, n) {\n  for (let s = (n >> 1) - 1; s >= 0; s--) sift(P, s, n - 1);\n  for (let end = n - 1; end > 0; end--) {\n    swp(P, 0, end);\n    sift(P, 0, end - 1);\n  }\n}\n\n// Least significant digit first, in base 4: each pass reads every bar once to\n// count its digit, then writes them all back grouped by it.\nfunction radix(P, n) {\n  const a = P.work;\n  const aux = P.aux;\n  const b = P.bucket;\n  for (let shift = 0; 1 \u003c\u003c shift \u003c n; shift += 2) {\n    b.fill(0);\n    for (let i = 0; i \u003c n; i++) {\n      if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | i;\n      b[(a[i] >> shift) & 3]++;\n      aux[i] = a[i];\n    }\n    let sum = 0;\n    for (let d = 0; d \u003c 4; d++) {\n      const c = b[d];\n      b[d] = sum;\n      sum += c;\n    }\n    // The bars go back in order of their old places, so the pass is stable.\n    // Writing them by the place they land on makes the pass run top to bottom.\n    for (let i = 0; i \u003c n; i++) a[b[(aux[i] >> shift) & 3]++] = aux[i];\n    for (let i = 0; i \u003c n; i++) put(P, i, a[i]);\n  }\n}\n\nfunction startSort(P, algo) {\n  const n = P.n;\n  P.work.set(P.arr);\n  P.opN = 0;\n  P.opAt = 0;\n  P.algo = algo;\n  if (algo === 0) bubble(P, n);\n  else if (algo === 1) insertion(P, n, 1);\n  else if (algo === 2) selection(P, n);\n  else if (algo === 3) {\n    for (let g = 0; g \u003c GAPS.length; g++) if (GAPS[g] \u003c n) insertion(P, n, GAPS[g]);\n  } else if (algo === 4) quick(P, 0, n - 1);\n  else if (algo === 5) merge(P, 0, n);\n  else if (algo === 6) heap(P, n);\n  else radix(P, n);\n  P.phase = SORT;\n}\n\nfunction startShuffle(P) {\n  const n = P.n;\n  P.work.set(P.arr);\n  P.opN = 0;\n  P.opAt = 0;\n  // Fisher and Yates, top to bottom, played back as swaps.\n  for (let i = 0; i \u003c n - 1; i++) swp(P, i, i + Math.floor(Math.random() * (n - i)));\n  P.phase = SHUFFLE;\n}\n\nfunction play(P, op) {\n  const type = op >> 16;\n  const i = (op >> 8) & 255;\n  const j = op & 255;\n  if (type === COMPARE) {\n    P.heatC[i] = 1;\n    P.heatC[j] = 1;\n  } else if (type === SWAP) {\n    const t = P.arr[i];\n    P.arr[i] = P.arr[j];\n    P.arr[j] = t;\n    P.heatS[i] = 1;\n    P.heatS[j] = 1;\n  } else {\n    P.arr[i] = j;\n    P.heatS[i] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 2];\n  const rows = Math.max(2, Math.min(8, Math.round(k[3])));\n  const algo = Math.max(0, Math.min(7, Math.round(k[2])));\n  const ops = 50 * Math.pow(2, 1.35 * k[1]);\n  // Fewer bars go slower in step, so a chunky bar can be followed by eye and\n  // sixteen of them do not spend most of their time sorted.\n  const rate = ops * (Math.floor(H / rows) / MAXN);\n  // At the fast end the check, the pause and the shuffle shorten too.\n  const pace = Math.max(0.45, Math.min(1, Math.pow(320 / ops, 0.4)));\n\n  if (rows !== P.rows || P.n === 0) {\n    P.rows = rows;\n    P.n = Math.floor(H / rows);\n    const n = P.n;\n    for (let v = 0; v \u003c n; v++) P.len[v] = Math.max(1, Math.round(((v + 1) * W) / n));\n    for (let i = 0; i \u003c n; i++) P.arr[i] = i;\n    for (let i = n - 1; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.arr[i];\n      P.arr[i] = P.arr[j];\n      P.arr[j] = t;\n    }\n    P.heatC.fill(0);\n    P.heatS.fill(0);\n    P.glow.fill(0);\n    P.hueKey = -1;\n    startSort(P, algo);\n  } else if (algo !== P.algo) {\n    if (P.phase === SORT) startSort(P, algo);\n    else P.algo = algo;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startShuffle(P);\n\n  const n = P.n;\n  // A lit bar fades over about the last ten operations with 64 bars and the\n  // last three with 16, so a slow sort shows each step and a fast one a tail.\n  const life = Math.max(0.035, Math.min(0.2, 11 / ops));\n  const fadeC = Math.exp(-dt / (life * 0.7));\n  const fadeS = Math.exp(-dt / life);\n  for (let i = 0; i \u003c n; i++) {\n    P.heatC[i] *= fadeC;\n    P.heatS[i] *= fadeS;\n  }\n\n  if (P.phase === SORT || P.phase === SHUFFLE) {\n    // The heap is thrown in about two thirds of a second, less at the fast end.\n    P.budget += dt * (P.phase === SORT ? rate : n / (0.65 * pace));\n    while (P.budget >= 1 && P.opAt \u003c P.opN) {\n      play(P, P.ops[P.opAt++]);\n      P.budget -= 1;\n    }\n    if (P.phase === SHUFFLE) for (let i = 0; i \u003c n; i++) P.glow[i] = Math.max(0, P.glow[i] - dt * 4);\n    if (P.opAt >= P.opN) {\n      P.budget = 0;\n      if (P.phase === SORT) {\n        P.phase = SWEEP;\n        P.t = 0;\n      } else startSort(P, P.algo);\n    }\n  } else if (P.phase === SWEEP) {\n    // The check runs down the bars in 0.8 s and leaves them lit behind it.\n    P.t += dt;\n    const s = Math.min(n, (P.t / (0.8 * pace)) * n);\n    for (let i = 0; i \u003c s; i++) P.glow[i] = 1;\n    if (s \u003c n) P.heatC[Math.floor(s)] = 1;\n    else {\n      P.phase = HOLD;\n      P.t = 0;\n    }\n  } else {\n    P.t += dt;\n    if (P.t > 0.9 * pace) startShuffle(P);\n  }\n\n  // Colours change only with the hue knob or the number of bars. K1 at 0\n  // opens on cyan running to violet.\n  const hue = k[0] + 0.45;\n  if (hue !== P.hueKey) {\n    P.hueKey = hue;\n    for (let v = 0; v \u003c n; v++) {\n      const h = hue + (0.33 * v) / Math.max(1, n - 1);\n      hsvInto(P.col, v * 3, h, 0.82, 0.62);\n      hsvInto(P.done, v * 3, h, 0.5, 0.82);\n    }\n    hsvInto(P.accent, 0, hue + 0.58, 0.95, 1);\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const n = P.n;\n  const rows = P.rows;\n  // Bars thicker than two rows keep a dark row under them so they stay apart.\n  const thick = rows > 2 ? rows - 1 : rows;\n  const top = (H - n * rows) >> 1;\n  const col = P.col;\n  const done = P.done;\n  const ac = P.accent;\n  for (let y = 0; y \u003c H; y++) {\n    const off = y - top;\n    const i = Math.floor(off / rows);\n    if (off \u003c 0 || i >= n || off - i * rows >= thick) {\n      for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    const v = P.arr[i];\n    const g = P.glow[i];\n    const hc = P.heatC[i];\n    const hs = P.heatS[i];\n    let r = col[v * 3] + (done[v * 3] - col[v * 3]) * g;\n    let gr = col[v * 3 + 1] + (done[v * 3 + 1] - col[v * 3 + 1]) * g;\n    let b = col[v * 3 + 2] + (done[v * 3 + 2] - col[v * 3 + 2]) * g;\n    r += (225 - r) * hc;\n    gr += (225 - gr) * hc;\n    b += (225 - b) * hc;\n    r += (ac[0] - r) * hs;\n    gr += (ac[1] - gr) * hs;\n    b += (ac[2] - b) * hs;\n    const L = P.len[v];\n    for (let x = 0; x \u003c W; x++) {\n      if (x \u003c L) display.setPixel(x, y, r, gr, b);\n      else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0..5, Algorithm=0..7, Rows=2..8","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the bars, which run from the shortest to the longest across a third of the colour wheel."},{"name":"Speed","min":0,"max":5,"about":"Operations per second with 64 bars, from 50 to about 5400, and a quarter of that with 16; a compare, a swap and a write each count as one."},{"name":"Algorithm","min":0,"max":7,"about":"0 bubble, 1 insertion, 2 selection, 3 shell, 4 quick, 5 merge, 6 heap, 7 radix; turned mid-sort, the new one takes the bars as they stand."},{"name":"Rows","min":2,"max":8,"about":"How many LED rows each bar takes: 2 gives 64 bars, 8 gives 16 with a dark row between them."}],"start":[0,2,0,2],"measures":{"motion":1.5282,"detail":0.0322,"edges":0.8211,"complexity":0.0601,"coverage":0.5078,"colour":0.3589,"drift":0.1727},"knobResponse":[0.2105,0.2338,0.2297,0.1743]},{"slug":"sparks","title":"Sparks","family":"particle","round":1,"note":"불꽃마다 흰빛에서 식어 가는 색이 제 나이를 보여 줘요. 꽃불 세 가지가 느슨한 박자로 터져요.","idea":"Each spark's colour is a clock counting down from white heat, so a whole shell shows its own age at a glance.","buttons":"K1 tap fires a shell straight away.","code":"// ===== Patternflow pattern =====\n// Title:   Sparks\n// Family:  particle\n// Idea:    Each spark's colour is a clock counting down from white heat, so a whole shell shows its own age at a glance.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Spread=0..1, Rate=0.6..5, Gravity=-1..1, Trail=0.3..1.8\n//\n// Knob 1: Spread. At 0 every shell is the same colour, slowly turning over the minutes; higher spreads the shells round the wheel, and past halfway each shell carries a second colour.\n// Knob 2: Rate. How often a rocket goes up; the beat stays loose, with doubles and the odd rest.\n// Knob 3: Gravity. At 0 the sparks hang where the drag stops them; above 0 they droop like willows, below 0 they rise like embers.\n// Knob 4: Trail. Seconds a spark's streak takes to fade.\n// Buttons: K1 tap fires a shell straight away.\n\nconst W = 64;\nconst H = 128;\nconst P = 900;\nconst R = 8;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\n// A cheap repeatable 0..1 from two integers, for the glitter.\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction splat(buf, x, y, c) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = 1 - (dx * dx + dy * dy) / 1.44;\n      if (w \u003c= 0) continue;\n      const i = (yy * W + xx) * 3;\n      // The brighter spark takes the LED whole, so a fading white flash never greys a coloured one.\n      if ((c[0] + c[1] + c[2]) * w > buf[i] + buf[i + 1] + buf[i + 2]) {\n        buf[i] = c[0] * w;\n        buf[i + 1] = c[1] * w;\n        buf[i + 2] = c[2] * w;\n      }\n    }\n  }\n}\n\nfunction line(buf, x0, y0, x1, y1, c) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const m = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.6));\n  for (let j = 1; j \u003c= m; j++) splat(buf, x0 + (dx * j) / m, y0 + (dy * j) / m, c);\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(P);\n  params.y = new Float32Array(P);\n  params.vx = new Float32Array(P);\n  params.vy = new Float32Array(P);\n  params.age = new Float32Array(P);\n  params.life = new Float32Array(P);\n  params.hue = new Float32Array(P);\n  params.drag = new Float32Array(P);\n  params.glitter = new Uint8Array(P);\n  params.next = 0;\n  // Rockets on their way up: launch x, target, time in flight, flight time, last position.\n  params.rx = new Float32Array(R);\n  params.rtx = new Float32Array(R);\n  params.rty = new Float32Array(R);\n  params.rt = new Float32Array(R);\n  params.rf = new Float32Array(R);\n  params.rpx = new Float32Array(R);\n  params.rpy = new Float32Array(R);\n  params.rOn = new Uint8Array(R);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.t = 0;\n  params.beat = 0.15;\n  params.spread = 0;\n  params.gravity = 0;\n}\n\nfunction emit(params, x, y, vx, vy, life, hue, drag, glitter) {\n  const i = params.next;\n  params.next = (i + 1) % P;\n  params.x[i] = x;\n  params.y[i] = y;\n  params.vx[i] = vx;\n  params.vy[i] = vy;\n  params.age[i] = 0;\n  params.life[i] = life;\n  params.hue[i] = hue;\n  params.drag[i] = drag;\n  params.glitter[i] = glitter;\n}\n\nfunction launch(params, late) {\n  let r = 0;\n  while (r \u003c R && params.rOn[r]) r++;\n  if (r === R) return;\n  // Shells that will fall burst high, shells that will rise burst low.\n  // The tall panel leaves room to stack shells at different heights.\n  const top = 18 + Math.max(0, -params.gravity) * 34;\n  params.rtx[r] = 14 + Math.random() * 36;\n  params.rty[r] = top + Math.random() * 70;\n  params.rx[r] = params.rtx[r] + (Math.random() - 0.5) * 10;\n  params.rt[r] = 0;\n  params.rf[r] = 0.45 + Math.random() * 0.3 + late;\n  params.rpx[r] = params.rx[r];\n  params.rpy[r] = H + 1;\n  params.rOn[r] = 1;\n}\n\nfunction burst(params, x, y) {\n  const spread = params.spread;\n  // At spread 0 one colour drifts round the wheel over three minutes.\n  const base = 0.08 + params.t * 0.0055;\n  const hue = base + (Math.random() - 0.5) * spread;\n  // Past halfway a shell carries a second colour as well.\n  const second = hue + 0.22 + Math.random() * 0.2;\n  const mix = Math.max(0, spread - 0.4) * 0.8;\n  const kind = Math.random();\n  const size = 0.6 + Math.random() * 0.5;\n  const glitter = Math.random() \u003c 0.5 ? 1 : 0;\n  if (kind \u003c 0.22) {\n    // Ring: one even hoop, tipped so it reads as seen at an angle.\n    const n = 52;\n    const tilt = 0.4 + Math.random() * 0.6;\n    const r0 = Math.random() * Math.PI * 2;\n    const v = 78 * size;\n    for (let i = 0; i \u003c n; i++) {\n      const a = r0 + (i / n) * Math.PI * 2;\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v * tilt, 1.4 + Math.random() * 0.3, h, 2.8, glitter);\n    }\n  } else if (kind \u003c 0.4) {\n    // Willow: slower sparks that live long and hang.\n    const n = 64;\n    for (let i = 0; i \u003c n; i++) {\n      const a = Math.random() * Math.PI * 2;\n      const c = Math.random() * 2 - 1;\n      const v = 60 * size * Math.sqrt(1 - c * c) * (0.9 + 0.1 * Math.random());\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v, 2.6 + Math.random() * 0.8, h, 2.4, 1);\n    }\n  } else {\n    // Peony: a sphere of sparks seen flat, so they crowd towards its rim.\n    const n = 80 + Math.floor(Math.random() * 24);\n    for (let i = 0; i \u003c n; i++) {\n      const a = Math.random() * Math.PI * 2;\n      const c = Math.random() * 2 - 1;\n      const v = 82 * size * Math.sqrt(1 - c * c) * (0.9 + 0.1 * Math.random());\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v, 1.3 + Math.random() * 0.6, h, 2.8, glitter);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.3];\n  params.spread = Math.max(0, Math.min(1, k[0]));\n  const rate = 0.25 + k[1] * 0.5;\n  params.gravity = Math.max(-1, Math.min(1, k[2]));\n  const trail = Math.max(0.05, k[3]);\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n\n  // The beat: mostly one rocket a beat, sometimes a quick second, now and then a rest.\n  params.beat -= dt;\n  if (params.beat \u003c= 0) {\n    const r = Math.random();\n    if (r \u003c 0.1 && rate > 0.8) {\n      params.beat = 0.6 / rate;\n    } else {\n      launch(params, 0);\n      if (r > 0.8) launch(params, 0.12 + Math.random() * 0.18);\n      params.beat = (0.75 + Math.random() * 0.5) / rate;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(params, 14 + Math.random() * 36, 20 + Math.random() * 70);\n\n  const buf = params.buf;\n  const fade = Math.exp(-dt / trail);\n  for (let i = 0; i \u003c buf.length; i++) buf[i] *= fade;\n\n  const col = params.col;\n  hsvInto(col, 0.09, 0.5, 0.5);\n  for (let r = 0; r \u003c R; r++) {\n    if (!params.rOn[r]) continue;\n    params.rt[r] += dt;\n    const u = Math.min(1, params.rt[r] / params.rf[r]);\n    // Eases out as it climbs, the way a rocket slows near the top.\n    const e = 1 - (1 - u) * (1 - u);\n    const nx = params.rx[r] + (params.rtx[r] - params.rx[r]) * e;\n    const ny = H + 1 + (params.rty[r] - H - 1) * e;\n    line(buf, params.rpx[r], params.rpy[r], nx, ny, col);\n    params.rpx[r] = nx;\n    params.rpy[r] = ny;\n    if (u >= 1) {\n      params.rOn[r] = 0;\n      burst(params, nx, ny);\n    }\n  }\n\n  const g = params.gravity * 44;\n  const tick = Math.floor(params.t * 24);\n  const { x, y, vx, vy, age, life, hue, drag, glitter } = params;\n  for (let i = 0; i \u003c P; i++) {\n    if (age[i] >= life[i]) continue;\n    age[i] += dt;\n    const ox = x[i];\n    const oy = y[i];\n    const f = Math.exp(-drag[i] * dt);\n    vx[i] *= f;\n    vy[i] = vy[i] * f + g * dt;\n    x[i] += vx[i] * dt;\n    y[i] += vy[i] * dt;\n    if (age[i] >= life[i]) continue;\n    const T = 1 - age[i] / life[i];\n    // White for the first frames, in the shell's full colour a seventh of a second later.\n    let s = 0.95 * Math.min(1, (age[i] + 0.01) / 0.14);\n    let v = Math.min(1, T * 1.8);\n    if (glitter[i] && T \u003c 0.5) {\n      const h = hash(i, tick);\n      if (h \u003c 0.12) {\n        s *= 0.5;\n        v = 1;\n      } else v *= h \u003c 0.55 ? 0.3 : 0.8;\n    }\n    if (v \u003c 0.04) continue;\n    hsvInto(col, hue[i] - (1 - T) * 0.04, s, v);\n    line(buf, ox, oy, x[i], y[i], col);\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y * W + x) * 3;\n      display.setPixel(x, y, buf[i], buf[i + 1], buf[i + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-sparks","type":"code","name":"sparks","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sparks\n// Family:  particle\n// Idea:    Each spark's colour is a clock counting down from white heat, so a whole shell shows its own age at a glance.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Spread=0..1, Rate=0.6..5, Gravity=-1..1, Trail=0.3..1.8\n//\n// Knob 1: Spread. At 0 every shell is the same colour, slowly turning over the minutes; higher spreads the shells round the wheel, and past halfway each shell carries a second colour.\n// Knob 2: Rate. How often a rocket goes up; the beat stays loose, with doubles and the odd rest.\n// Knob 3: Gravity. At 0 the sparks hang where the drag stops them; above 0 they droop like willows, below 0 they rise like embers.\n// Knob 4: Trail. Seconds a spark's streak takes to fade.\n// Buttons: K1 tap fires a shell straight away.\n\nconst W = 64;\nconst H = 128;\nconst P = 900;\nconst R = 8;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\n// A cheap repeatable 0..1 from two integers, for the glitter.\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction splat(buf, x, y, c) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = 1 - (dx * dx + dy * dy) / 1.44;\n      if (w \u003c= 0) continue;\n      const i = (yy * W + xx) * 3;\n      // The brighter spark takes the LED whole, so a fading white flash never greys a coloured one.\n      if ((c[0] + c[1] + c[2]) * w > buf[i] + buf[i + 1] + buf[i + 2]) {\n        buf[i] = c[0] * w;\n        buf[i + 1] = c[1] * w;\n        buf[i + 2] = c[2] * w;\n      }\n    }\n  }\n}\n\nfunction line(buf, x0, y0, x1, y1, c) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const m = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.6));\n  for (let j = 1; j \u003c= m; j++) splat(buf, x0 + (dx * j) / m, y0 + (dy * j) / m, c);\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(P);\n  params.y = new Float32Array(P);\n  params.vx = new Float32Array(P);\n  params.vy = new Float32Array(P);\n  params.age = new Float32Array(P);\n  params.life = new Float32Array(P);\n  params.hue = new Float32Array(P);\n  params.drag = new Float32Array(P);\n  params.glitter = new Uint8Array(P);\n  params.next = 0;\n  // Rockets on their way up: launch x, target, time in flight, flight time, last position.\n  params.rx = new Float32Array(R);\n  params.rtx = new Float32Array(R);\n  params.rty = new Float32Array(R);\n  params.rt = new Float32Array(R);\n  params.rf = new Float32Array(R);\n  params.rpx = new Float32Array(R);\n  params.rpy = new Float32Array(R);\n  params.rOn = new Uint8Array(R);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.t = 0;\n  params.beat = 0.15;\n  params.spread = 0;\n  params.gravity = 0;\n}\n\nfunction emit(params, x, y, vx, vy, life, hue, drag, glitter) {\n  const i = params.next;\n  params.next = (i + 1) % P;\n  params.x[i] = x;\n  params.y[i] = y;\n  params.vx[i] = vx;\n  params.vy[i] = vy;\n  params.age[i] = 0;\n  params.life[i] = life;\n  params.hue[i] = hue;\n  params.drag[i] = drag;\n  params.glitter[i] = glitter;\n}\n\nfunction launch(params, late) {\n  let r = 0;\n  while (r \u003c R && params.rOn[r]) r++;\n  if (r === R) return;\n  // Shells that will fall burst high, shells that will rise burst low.\n  // The tall panel leaves room to stack shells at different heights.\n  const top = 18 + Math.max(0, -params.gravity) * 34;\n  params.rtx[r] = 14 + Math.random() * 36;\n  params.rty[r] = top + Math.random() * 70;\n  params.rx[r] = params.rtx[r] + (Math.random() - 0.5) * 10;\n  params.rt[r] = 0;\n  params.rf[r] = 0.45 + Math.random() * 0.3 + late;\n  params.rpx[r] = params.rx[r];\n  params.rpy[r] = H + 1;\n  params.rOn[r] = 1;\n}\n\nfunction burst(params, x, y) {\n  const spread = params.spread;\n  // At spread 0 one colour drifts round the wheel over three minutes.\n  const base = 0.08 + params.t * 0.0055;\n  const hue = base + (Math.random() - 0.5) * spread;\n  // Past halfway a shell carries a second colour as well.\n  const second = hue + 0.22 + Math.random() * 0.2;\n  const mix = Math.max(0, spread - 0.4) * 0.8;\n  const kind = Math.random();\n  const size = 0.6 + Math.random() * 0.5;\n  const glitter = Math.random() \u003c 0.5 ? 1 : 0;\n  if (kind \u003c 0.22) {\n    // Ring: one even hoop, tipped so it reads as seen at an angle.\n    const n = 52;\n    const tilt = 0.4 + Math.random() * 0.6;\n    const r0 = Math.random() * Math.PI * 2;\n    const v = 78 * size;\n    for (let i = 0; i \u003c n; i++) {\n      const a = r0 + (i / n) * Math.PI * 2;\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v * tilt, 1.4 + Math.random() * 0.3, h, 2.8, glitter);\n    }\n  } else if (kind \u003c 0.4) {\n    // Willow: slower sparks that live long and hang.\n    const n = 64;\n    for (let i = 0; i \u003c n; i++) {\n      const a = Math.random() * Math.PI * 2;\n      const c = Math.random() * 2 - 1;\n      const v = 60 * size * Math.sqrt(1 - c * c) * (0.9 + 0.1 * Math.random());\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v, 2.6 + Math.random() * 0.8, h, 2.4, 1);\n    }\n  } else {\n    // Peony: a sphere of sparks seen flat, so they crowd towards its rim.\n    const n = 80 + Math.floor(Math.random() * 24);\n    for (let i = 0; i \u003c n; i++) {\n      const a = Math.random() * Math.PI * 2;\n      const c = Math.random() * 2 - 1;\n      const v = 82 * size * Math.sqrt(1 - c * c) * (0.9 + 0.1 * Math.random());\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v, 1.3 + Math.random() * 0.6, h, 2.8, glitter);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.3];\n  params.spread = Math.max(0, Math.min(1, k[0]));\n  const rate = 0.25 + k[1] * 0.5;\n  params.gravity = Math.max(-1, Math.min(1, k[2]));\n  const trail = Math.max(0.05, k[3]);\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n\n  // The beat: mostly one rocket a beat, sometimes a quick second, now and then a rest.\n  params.beat -= dt;\n  if (params.beat \u003c= 0) {\n    const r = Math.random();\n    if (r \u003c 0.1 && rate > 0.8) {\n      params.beat = 0.6 / rate;\n    } else {\n      launch(params, 0);\n      if (r > 0.8) launch(params, 0.12 + Math.random() * 0.18);\n      params.beat = (0.75 + Math.random() * 0.5) / rate;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(params, 14 + Math.random() * 36, 20 + Math.random() * 70);\n\n  const buf = params.buf;\n  const fade = Math.exp(-dt / trail);\n  for (let i = 0; i \u003c buf.length; i++) buf[i] *= fade;\n\n  const col = params.col;\n  hsvInto(col, 0.09, 0.5, 0.5);\n  for (let r = 0; r \u003c R; r++) {\n    if (!params.rOn[r]) continue;\n    params.rt[r] += dt;\n    const u = Math.min(1, params.rt[r] / params.rf[r]);\n    // Eases out as it climbs, the way a rocket slows near the top.\n    const e = 1 - (1 - u) * (1 - u);\n    const nx = params.rx[r] + (params.rtx[r] - params.rx[r]) * e;\n    const ny = H + 1 + (params.rty[r] - H - 1) * e;\n    line(buf, params.rpx[r], params.rpy[r], nx, ny, col);\n    params.rpx[r] = nx;\n    params.rpy[r] = ny;\n    if (u >= 1) {\n      params.rOn[r] = 0;\n      burst(params, nx, ny);\n    }\n  }\n\n  const g = params.gravity * 44;\n  const tick = Math.floor(params.t * 24);\n  const { x, y, vx, vy, age, life, hue, drag, glitter } = params;\n  for (let i = 0; i \u003c P; i++) {\n    if (age[i] >= life[i]) continue;\n    age[i] += dt;\n    const ox = x[i];\n    const oy = y[i];\n    const f = Math.exp(-drag[i] * dt);\n    vx[i] *= f;\n    vy[i] = vy[i] * f + g * dt;\n    x[i] += vx[i] * dt;\n    y[i] += vy[i] * dt;\n    if (age[i] >= life[i]) continue;\n    const T = 1 - age[i] / life[i];\n    // White for the first frames, in the shell's full colour a seventh of a second later.\n    let s = 0.95 * Math.min(1, (age[i] + 0.01) / 0.14);\n    let v = Math.min(1, T * 1.8);\n    if (glitter[i] && T \u003c 0.5) {\n      const h = hash(i, tick);\n      if (h \u003c 0.12) {\n        s *= 0.5;\n        v = 1;\n      } else v *= h \u003c 0.55 ? 0.3 : 0.8;\n    }\n    if (v \u003c 0.04) continue;\n    hsvInto(col, hue[i] - (1 - T) * 0.04, s, v);\n    line(buf, ox, oy, x[i], y[i], col);\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y * W + x) * 3;\n      display.setPixel(x, y, buf[i], buf[i + 1], buf[i + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Spread=0..1, Rate=0.6..5, Gravity=-1..1, Trail=0.3..1.8","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Spread","min":0,"max":1,"about":"At 0 every shell is the same colour, slowly turning over the minutes; higher spreads the shells round the wheel, and past halfway each shell carries a second colour."},{"name":"Rate","min":0.6,"max":5,"about":"How often a rocket goes up; the beat stays loose, with doubles and the odd rest."},{"name":"Gravity","min":-1,"max":1,"about":"At 0 the sparks hang where the drag stops them; above 0 they droop like willows, below 0 they rise like embers."},{"name":"Trail","min":0.3,"max":1.8,"about":"Seconds a spark's streak takes to fade."}],"start":[0,2,0,0.3],"measures":{"motion":0.3313,"detail":0.0372,"edges":0.402,"complexity":0.7208,"coverage":0.1596,"colour":0.1435,"drift":0.1348},"knobResponse":[0.034,0.0885,0.063,0.0577]},{"slug":"spectrogram","title":"Spectrogram","family":"data","round":17,"note":"새벽 합창의 스펙트로그램이 폭포처럼 내려와요. 휘파람과 떨림, 짹 소리와 뻐꾸기의 두 음이 바람과 먼 찻길로 얼룩진 바닥 위에 밝게 그려지고, K3 을 누르면 손뼉 소리에 새들이 잠시 입을 다물어요.","idea":"A live spectrogram of a dawn chorus falls down the panel as a waterfall, frequency across and time downward, with the birds' whistles, trills and chips drawn bright over the speckled roar of wind and a distant road.","buttons":"K3 tap claps: a line rings across every frequency, and the birds fall silent for a few seconds before they start again one by one.","code":"// ===== Patternflow pattern =====\n// Title:   Spectrogram\n// Family:  data\n// Idea:    A live spectrogram of a dawn chorus falls down the panel as a waterfall, frequency across and time downward, with the birds' whistles, trills and chips drawn bright over the speckled roar of wind and a distant road.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the sound spectrograph of Koenig, Dunn and Lacy (Bell Labs, 1946) and the Kay Sona-Graph sonagrams of bird song in field guides; colour maps after Smith and van der Walt's inferno, magma and viridis (2015)\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Map=0..1, Scroll=0.5..4, Birds=0..1, Gain=-1..1\n//\n// Knob 1: Map. The colour map: inferno at 0 blends into magma and then viridis, and at 1 it is the black ink on white paper of a Sona-Graph.\n// Knob 2: Scroll. How fast time falls: at 2 the waterfall moves 24 rows a second and holds five seconds of sound; at 0.5 the songs squeeze into short dashes, at 4 they stretch tall.\n// Knob 3: Birds. How far the chorus has woken: at 0 a robin, a cuckoo and a wren; turned up, sparrows, a blackbird, a collared dove, a woodpecker and more join, ten in all.\n// Knob 4: Gain. Slides the 50 dB window the map spans: turned down, only the songs show over a black floor; turned up, the wind and the far road flood the panel.\n// Buttons: K3 tap claps: a line rings across every frequency, and the birds fall silent for a few seconds before they start again one by one.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The frequency axis: constant-Q bins on a log scale from 120 Hz at the left\n// edge to 11 kHz at the right.\nconst F0 = 120;\nconst F1 = 11000;\nconst LN = Math.log(F1 / F0);\nconst xOf = (f) => (W * Math.log(f / F0)) / LN - 0.5;\nconst fOf = (x) => F0 * Math.exp(((x + 0.5) * LN) / W);\n\n// Colour maps as eleven stops from 0 to 1: inferno, magma and viridis as\n// matplotlib has them, and the black-on-white paper of a Sona-Graph.\nconst MAPS = [\n  [[0, 0, 4], [22, 11, 57], [66, 10, 104], [106, 23, 110], [147, 38, 103], [188, 55, 84], [221, 81, 58], [243, 120, 25], [252, 165, 10], [246, 215, 70], [252, 255, 164]],\n  [[0, 0, 4], [20, 14, 54], [59, 15, 112], [100, 26, 128], [140, 41, 129], [183, 55, 121], [222, 73, 104], [247, 112, 92], [254, 159, 109], [254, 207, 146], [252, 253, 191]],\n  [[68, 1, 84], [72, 36, 117], [65, 68, 135], [53, 95, 141], [42, 120, 142], [33, 145, 140], [34, 168, 132], [68, 191, 112], [122, 209, 81], [189, 223, 38], [253, 231, 37]],\n  [[236, 232, 220], [214, 210, 198], [190, 186, 176], [164, 160, 152], [138, 134, 128], [112, 108, 104], [86, 82, 80], [62, 58, 58], [40, 38, 38], [22, 20, 22], [8, 6, 8]],\n];\n\nconst LUT = 1024;\n\nfunction lut(k) {\n  const m = Math.min(2.999, k * 3);\n  const a = MAPS[Math.floor(m)];\n  const b = MAPS[Math.floor(m) + 1];\n  const u = m - Math.floor(m);\n  const out = new Uint8Array(LUT * 3);\n  for (let i = 0; i \u003c LUT; i++) {\n    const t = (i / (LUT - 1)) * 10;\n    const j = Math.min(9, Math.floor(t));\n    const f = t - j;\n    for (let c = 0; c \u003c 3; c++) {\n      const va = a[j][c] + (a[j + 1][c] - a[j][c]) * f;\n      const vb = b[j][c] + (b[j + 1][c] - b[j][c]) * f;\n      out[i * 3 + c] = Math.round(va + (vb - va) * u);\n    }\n  }\n  return out;\n}\n\nfunction gauss() {\n  return Math.sqrt(-2 * Math.log(1 - Math.random())) * Math.cos(2 * Math.PI * Math.random());\n}\n\nconst rnd = (a, b) => a + Math.random() * (b - a);\n\n// Songs. Each returns the notes of one phrase from time t: [start, end,\n// starting Hz, ending Hz, dB, harmonic dB].\nconst SONGS = {\n  // A robin or a thrush: three to six clear whistles that glide.\n  whistle(t, b) {\n    const out = [];\n    let s = t;\n    for (let n = Math.floor(rnd(3, 7)); n > 0; n--) {\n      const len = rnd(0.08, 0.22);\n      const f = b.f * rnd(0.75, 1.35);\n      out.push([s, s + len, f, f * rnd(0.75, 1.3), b.db, -14]);\n      s += len + rnd(0.04, 0.1);\n    }\n    return out;\n  },\n  // A wren: a fast trill of falling ticks that sinks as it goes.\n  trill(t, b) {\n    const out = [];\n    const n = Math.floor(rnd(12, 26));\n    const rate = rnd(14, 20);\n    for (let i = 0; i \u003c n; i++) {\n      const s = t + i / rate;\n      const f = b.f * (1 - (0.15 * i) / n);\n      out.push([s, s + 0.035, f * 1.15, f * 0.88, b.db, -18]);\n    }\n    return out;\n  },\n  // A sparrow: bursts of chips that each sweep down more than an octave.\n  chip(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(3, 8)), s = t; n > 0; n--, s += rnd(0.1, 0.16)) out.push([s, s + rnd(0.025, 0.04), b.f * 2.2, b.f * 0.9, b.db, -20]);\n    return out;\n  },\n  // A cuckoo: the falling third, cu-koo, four to eight times.\n  cuckoo(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(4, 9)), s = t; n > 0; n--, s += 1.3) {\n      out.push([s, s + 0.22, b.f, b.f * 0.97, b.db, -22]);\n      out.push([s + 0.34, s + 0.64, b.f * 0.8, b.f * 0.78, b.db, -22]);\n    }\n    return out;\n  },\n  // A collared dove: coo-COO-coo, low and slow.\n  dove(t, b) {\n    return [\n      [t, t + 0.28, b.f, b.f * 0.98, b.db - 4, -16],\n      [t + 0.4, t + 0.9, b.f * 1.06, b.f, b.db, -16],\n      [t + 1.05, t + 1.35, b.f * 0.96, b.f * 0.94, b.db - 4, -16],\n    ];\n  },\n  // A blackbird: a quick warble of short notes leaping about.\n  warble(t, b) {\n    const out = [];\n    let s = t;\n    for (let n = Math.floor(rnd(8, 18)); n > 0; n--) {\n      const len = rnd(0.04, 0.1);\n      const f = b.f * rnd(0.7, 1.5);\n      out.push([s, s + len, f, f * rnd(0.8, 1.25), b.db, -12]);\n      s += len + rnd(0.01, 0.04);\n    }\n    return out;\n  },\n  // A lesser spotted woodpecker drumming on a dead branch: a roll of knocks,\n  // each a click across the band, quickening as it goes.\n  drum(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(10, 18)), s = t, g = 0.09; n > 0; n--, s += g, g *= 0.98) out.push([s, s + 0.01, b.f, b.f, b.db, null]);\n    return out;\n  },\n};\n\n// The chorus in the order the birds wake: [song, Hz, dB, seconds between phrases].\nconst CHORUS = [\n  [\"whistle\", 2800, -30, 3.2], [\"cuckoo\", 760, -34, 9], [\"trill\", 5600, -32, 5], [\"chip\", 3600, -34, 2.2],\n  [\"warble\", 2200, -31, 5], [\"dove\", 520, -36, 6], [\"whistle\", 3600, -36, 3.8], [\"chip\", 4200, -38, 2.8],\n  [\"trill\", 6400, -38, 6], [\"drum\", 1800, -48, 10],\n];\n\nexport function setup(params) {\n  Object.assign(params, {\n    v: new Float32Array(N), head: 0, acc: 0, t: 0, ready: 0,\n    re: new Float32Array(W), im: new Float32Array(W),\n    birds: CHORUS.map(([song, f, db, gap]) => ({ song, f: f * rnd(0.92, 1.08), db, gap, next: rnd(0, gap), notes: [] })),\n    gust: 0, gv: 0, truck: -99, clap: -99, map: -1, lut: null,\n  });\n}\n\n// One row of the spectrogram: the sound from t over dt seconds, as dB per bin.\nfunction row(S, t, dt, k) {\n  const P = new Float32Array(W);\n  const busy = 3 + Math.round((k[2] ?? 0) * 7);\n  // Wind gusts wander slowly; a truck on the far road swells and fades.\n  S.gv += (-S.gust * 0.3 + gauss() * 0.6) * dt;\n  S.gust = Math.max(-1, Math.min(1.5, S.gust + S.gv * dt));\n  if (t - S.truck > 24 && Math.random() \u003c dt / 12) S.truck = t;\n  const tr = Math.max(0, 1 - Math.abs(t - S.truck - 3) / 3);\n  for (let x = 0; x \u003c W; x++) {\n    const f = fOf(x);\n    const o = Math.log2(f / 300);\n    const hiss = -74 - 3 * (x / W);\n    const road = -62 + 6 * tr - 12 * o * o;\n    const wind = -68 + 10 * S.gust - 9 * Math.max(0, Math.log2(f / 200));\n    const floor = 10 * Math.log10(10 ** (hiss / 10) + 10 ** (road / 10) + 10 ** (wind / 10));\n    // Each bin is the power of a complex value that carries six tenths of\n    // itself over to the next row, so the speckle has a grain in time.\n    const a = 0.6;\n    S.re[x] = a * S.re[x] + Math.sqrt(1 - a * a) * gauss();\n    S.im[x] = a * S.im[x] + Math.sqrt(1 - a * a) * gauss();\n    P[x] = 10 ** (floor / 10) * (S.re[x] * S.re[x] + S.im[x] * S.im[x]) * 0.5;\n  }\n  // The birds, sampled four times within the row so a fast chip spreads its\n  // sweep across the bins it passes.\n  for (let i = 0; i \u003c S.birds.length; i++) {\n    const b = S.birds[i];\n    if (i \u003c busy && t >= b.next) {\n      b.notes = SONGS[b.song](t, b);\n      b.next = b.notes[b.notes.length - 1][1] + b.gap * rnd(0.7, 1.4);\n    }\n    for (const [t0, t1, fa, fb, db, hdb] of b.notes) {\n      if (t1 \u003c t || t0 > t + dt) continue;\n      if (hdb === null) {\n        // A knock lands in the row it starts in and spreads its click over\n        // the bins about its middle.\n        if (t0 \u003c t) continue;\n        const xc = xOf(fa);\n        for (let x = 0; x \u003c W; x++) P[x] += 10 ** (db / 10) * Math.exp(-(((x - xc) / 6) ** 2)) * (0.3 + Math.random());\n        continue;\n      }\n      for (let s = 0; s \u003c 4; s++) {\n        const ts = t + ((s + 0.5) / 4) * dt;\n        if (ts \u003c t0 || ts > t1) continue;\n        const u = (ts - t0) / (t1 - t0);\n        const env = Math.sin(Math.PI * u) ** 0.5;\n        const f = fa * Math.pow(fb / fa, u);\n        for (let hm = 1; hm \u003c= 3; hm++) {\n          const xf = xOf(f * hm);\n          if (xf > W) break;\n          const p = 10 ** ((db + (hm > 1 ? hdb * (hm - 1) : 0)) / 10) * env * 0.25;\n          for (let x = Math.max(0, Math.floor(xf - 2)); x \u003c= Math.min(W - 1, xf + 2); x++) P[x] += p * Math.exp(-((x - xf) ** 2) / 0.35);\n        }\n      }\n    }\n  }\n  // A clap rings across every bin and dies away within a third of a second.\n  const age = t - S.clap;\n  if (age > -dt && age \u003c 0.3) for (let x = 0; x \u003c W; x++) P[x] += 10 ** ((-26 - 120 * Math.max(0, age) - x * 0.08) / 10);\n  return P;\n}\n\nfunction push(S, k) {\n  const dt = 1 / (12 * (k[1] ?? 2));\n  const P = row(S, S.t, dt, k);\n  S.t += dt;\n  S.head = (S.head + H - 1) % H;\n  for (let x = 0; x \u003c W; x++) S.v[S.head * W + x] = 10 * Math.log10(P[x] + 1e-12);\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const k = input.knobValues || [];\n  if (!S.ready) {\n    // Fill the panel before the first frame, at the knobs' scroll and chorus.\n    S.ready = 1;\n    for (let i = 0; i \u003c H; i++) push(S, k);\n  }\n  S.acc += dt * 12 * (k[1] ?? 2);\n  while (S.acc >= 1) {\n    push(S, k);\n    S.acc--;\n  }\n  if ((input.btnPressed || [])[2]) {\n    // Startled, every bird stops mid-phrase and starts again a few seconds on.\n    S.clap = S.t;\n    for (const b of S.birds) (b.notes = []), (b.next = S.t + rnd(3, 9));\n  }\n  S.lo = -92 - 14 * (k[3] ?? 0.06);\n  if (S.map !== (k[0] ?? 0)) {\n    S.map = k[0] ?? 0;\n    S.lut = lut(S.map);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.lut) return;\n  // Gain slides the 50 dB window the colour map spans.\n  const g = (LUT - 1) / 50;\n  for (let y = 0; y \u003c H; y++) {\n    const r = ((S.head + y) % H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = Math.round(Math.max(0, Math.min(LUT - 1, (S.v[r + x] - S.lo) * g))) * 3;\n      display.setPixel(x, y, S.lut[i], S.lut[i + 1], S.lut[i + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-spectrogram","type":"code","name":"spectrogram","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Spectrogram\n// Family:  data\n// Idea:    A live spectrogram of a dawn chorus falls down the panel as a waterfall, frequency across and time downward, with the birds' whistles, trills and chips drawn bright over the speckled roar of wind and a distant road.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the sound spectrograph of Koenig, Dunn and Lacy (Bell Labs, 1946) and the Kay Sona-Graph sonagrams of bird song in field guides; colour maps after Smith and van der Walt's inferno, magma and viridis (2015)\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Map=0..1, Scroll=0.5..4, Birds=0..1, Gain=-1..1\n//\n// Knob 1: Map. The colour map: inferno at 0 blends into magma and then viridis, and at 1 it is the black ink on white paper of a Sona-Graph.\n// Knob 2: Scroll. How fast time falls: at 2 the waterfall moves 24 rows a second and holds five seconds of sound; at 0.5 the songs squeeze into short dashes, at 4 they stretch tall.\n// Knob 3: Birds. How far the chorus has woken: at 0 a robin, a cuckoo and a wren; turned up, sparrows, a blackbird, a collared dove, a woodpecker and more join, ten in all.\n// Knob 4: Gain. Slides the 50 dB window the map spans: turned down, only the songs show over a black floor; turned up, the wind and the far road flood the panel.\n// Buttons: K3 tap claps: a line rings across every frequency, and the birds fall silent for a few seconds before they start again one by one.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The frequency axis: constant-Q bins on a log scale from 120 Hz at the left\n// edge to 11 kHz at the right.\nconst F0 = 120;\nconst F1 = 11000;\nconst LN = Math.log(F1 / F0);\nconst xOf = (f) => (W * Math.log(f / F0)) / LN - 0.5;\nconst fOf = (x) => F0 * Math.exp(((x + 0.5) * LN) / W);\n\n// Colour maps as eleven stops from 0 to 1: inferno, magma and viridis as\n// matplotlib has them, and the black-on-white paper of a Sona-Graph.\nconst MAPS = [\n  [[0, 0, 4], [22, 11, 57], [66, 10, 104], [106, 23, 110], [147, 38, 103], [188, 55, 84], [221, 81, 58], [243, 120, 25], [252, 165, 10], [246, 215, 70], [252, 255, 164]],\n  [[0, 0, 4], [20, 14, 54], [59, 15, 112], [100, 26, 128], [140, 41, 129], [183, 55, 121], [222, 73, 104], [247, 112, 92], [254, 159, 109], [254, 207, 146], [252, 253, 191]],\n  [[68, 1, 84], [72, 36, 117], [65, 68, 135], [53, 95, 141], [42, 120, 142], [33, 145, 140], [34, 168, 132], [68, 191, 112], [122, 209, 81], [189, 223, 38], [253, 231, 37]],\n  [[236, 232, 220], [214, 210, 198], [190, 186, 176], [164, 160, 152], [138, 134, 128], [112, 108, 104], [86, 82, 80], [62, 58, 58], [40, 38, 38], [22, 20, 22], [8, 6, 8]],\n];\n\nconst LUT = 1024;\n\nfunction lut(k) {\n  const m = Math.min(2.999, k * 3);\n  const a = MAPS[Math.floor(m)];\n  const b = MAPS[Math.floor(m) + 1];\n  const u = m - Math.floor(m);\n  const out = new Uint8Array(LUT * 3);\n  for (let i = 0; i \u003c LUT; i++) {\n    const t = (i / (LUT - 1)) * 10;\n    const j = Math.min(9, Math.floor(t));\n    const f = t - j;\n    for (let c = 0; c \u003c 3; c++) {\n      const va = a[j][c] + (a[j + 1][c] - a[j][c]) * f;\n      const vb = b[j][c] + (b[j + 1][c] - b[j][c]) * f;\n      out[i * 3 + c] = Math.round(va + (vb - va) * u);\n    }\n  }\n  return out;\n}\n\nfunction gauss() {\n  return Math.sqrt(-2 * Math.log(1 - Math.random())) * Math.cos(2 * Math.PI * Math.random());\n}\n\nconst rnd = (a, b) => a + Math.random() * (b - a);\n\n// Songs. Each returns the notes of one phrase from time t: [start, end,\n// starting Hz, ending Hz, dB, harmonic dB].\nconst SONGS = {\n  // A robin or a thrush: three to six clear whistles that glide.\n  whistle(t, b) {\n    const out = [];\n    let s = t;\n    for (let n = Math.floor(rnd(3, 7)); n > 0; n--) {\n      const len = rnd(0.08, 0.22);\n      const f = b.f * rnd(0.75, 1.35);\n      out.push([s, s + len, f, f * rnd(0.75, 1.3), b.db, -14]);\n      s += len + rnd(0.04, 0.1);\n    }\n    return out;\n  },\n  // A wren: a fast trill of falling ticks that sinks as it goes.\n  trill(t, b) {\n    const out = [];\n    const n = Math.floor(rnd(12, 26));\n    const rate = rnd(14, 20);\n    for (let i = 0; i \u003c n; i++) {\n      const s = t + i / rate;\n      const f = b.f * (1 - (0.15 * i) / n);\n      out.push([s, s + 0.035, f * 1.15, f * 0.88, b.db, -18]);\n    }\n    return out;\n  },\n  // A sparrow: bursts of chips that each sweep down more than an octave.\n  chip(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(3, 8)), s = t; n > 0; n--, s += rnd(0.1, 0.16)) out.push([s, s + rnd(0.025, 0.04), b.f * 2.2, b.f * 0.9, b.db, -20]);\n    return out;\n  },\n  // A cuckoo: the falling third, cu-koo, four to eight times.\n  cuckoo(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(4, 9)), s = t; n > 0; n--, s += 1.3) {\n      out.push([s, s + 0.22, b.f, b.f * 0.97, b.db, -22]);\n      out.push([s + 0.34, s + 0.64, b.f * 0.8, b.f * 0.78, b.db, -22]);\n    }\n    return out;\n  },\n  // A collared dove: coo-COO-coo, low and slow.\n  dove(t, b) {\n    return [\n      [t, t + 0.28, b.f, b.f * 0.98, b.db - 4, -16],\n      [t + 0.4, t + 0.9, b.f * 1.06, b.f, b.db, -16],\n      [t + 1.05, t + 1.35, b.f * 0.96, b.f * 0.94, b.db - 4, -16],\n    ];\n  },\n  // A blackbird: a quick warble of short notes leaping about.\n  warble(t, b) {\n    const out = [];\n    let s = t;\n    for (let n = Math.floor(rnd(8, 18)); n > 0; n--) {\n      const len = rnd(0.04, 0.1);\n      const f = b.f * rnd(0.7, 1.5);\n      out.push([s, s + len, f, f * rnd(0.8, 1.25), b.db, -12]);\n      s += len + rnd(0.01, 0.04);\n    }\n    return out;\n  },\n  // A lesser spotted woodpecker drumming on a dead branch: a roll of knocks,\n  // each a click across the band, quickening as it goes.\n  drum(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(10, 18)), s = t, g = 0.09; n > 0; n--, s += g, g *= 0.98) out.push([s, s + 0.01, b.f, b.f, b.db, null]);\n    return out;\n  },\n};\n\n// The chorus in the order the birds wake: [song, Hz, dB, seconds between phrases].\nconst CHORUS = [\n  [\"whistle\", 2800, -30, 3.2], [\"cuckoo\", 760, -34, 9], [\"trill\", 5600, -32, 5], [\"chip\", 3600, -34, 2.2],\n  [\"warble\", 2200, -31, 5], [\"dove\", 520, -36, 6], [\"whistle\", 3600, -36, 3.8], [\"chip\", 4200, -38, 2.8],\n  [\"trill\", 6400, -38, 6], [\"drum\", 1800, -48, 10],\n];\n\nexport function setup(params) {\n  Object.assign(params, {\n    v: new Float32Array(N), head: 0, acc: 0, t: 0, ready: 0,\n    re: new Float32Array(W), im: new Float32Array(W),\n    birds: CHORUS.map(([song, f, db, gap]) => ({ song, f: f * rnd(0.92, 1.08), db, gap, next: rnd(0, gap), notes: [] })),\n    gust: 0, gv: 0, truck: -99, clap: -99, map: -1, lut: null,\n  });\n}\n\n// One row of the spectrogram: the sound from t over dt seconds, as dB per bin.\nfunction row(S, t, dt, k) {\n  const P = new Float32Array(W);\n  const busy = 3 + Math.round((k[2] ?? 0) * 7);\n  // Wind gusts wander slowly; a truck on the far road swells and fades.\n  S.gv += (-S.gust * 0.3 + gauss() * 0.6) * dt;\n  S.gust = Math.max(-1, Math.min(1.5, S.gust + S.gv * dt));\n  if (t - S.truck > 24 && Math.random() \u003c dt / 12) S.truck = t;\n  const tr = Math.max(0, 1 - Math.abs(t - S.truck - 3) / 3);\n  for (let x = 0; x \u003c W; x++) {\n    const f = fOf(x);\n    const o = Math.log2(f / 300);\n    const hiss = -74 - 3 * (x / W);\n    const road = -62 + 6 * tr - 12 * o * o;\n    const wind = -68 + 10 * S.gust - 9 * Math.max(0, Math.log2(f / 200));\n    const floor = 10 * Math.log10(10 ** (hiss / 10) + 10 ** (road / 10) + 10 ** (wind / 10));\n    // Each bin is the power of a complex value that carries six tenths of\n    // itself over to the next row, so the speckle has a grain in time.\n    const a = 0.6;\n    S.re[x] = a * S.re[x] + Math.sqrt(1 - a * a) * gauss();\n    S.im[x] = a * S.im[x] + Math.sqrt(1 - a * a) * gauss();\n    P[x] = 10 ** (floor / 10) * (S.re[x] * S.re[x] + S.im[x] * S.im[x]) * 0.5;\n  }\n  // The birds, sampled four times within the row so a fast chip spreads its\n  // sweep across the bins it passes.\n  for (let i = 0; i \u003c S.birds.length; i++) {\n    const b = S.birds[i];\n    if (i \u003c busy && t >= b.next) {\n      b.notes = SONGS[b.song](t, b);\n      b.next = b.notes[b.notes.length - 1][1] + b.gap * rnd(0.7, 1.4);\n    }\n    for (const [t0, t1, fa, fb, db, hdb] of b.notes) {\n      if (t1 \u003c t || t0 > t + dt) continue;\n      if (hdb === null) {\n        // A knock lands in the row it starts in and spreads its click over\n        // the bins about its middle.\n        if (t0 \u003c t) continue;\n        const xc = xOf(fa);\n        for (let x = 0; x \u003c W; x++) P[x] += 10 ** (db / 10) * Math.exp(-(((x - xc) / 6) ** 2)) * (0.3 + Math.random());\n        continue;\n      }\n      for (let s = 0; s \u003c 4; s++) {\n        const ts = t + ((s + 0.5) / 4) * dt;\n        if (ts \u003c t0 || ts > t1) continue;\n        const u = (ts - t0) / (t1 - t0);\n        const env = Math.sin(Math.PI * u) ** 0.5;\n        const f = fa * Math.pow(fb / fa, u);\n        for (let hm = 1; hm \u003c= 3; hm++) {\n          const xf = xOf(f * hm);\n          if (xf > W) break;\n          const p = 10 ** ((db + (hm > 1 ? hdb * (hm - 1) : 0)) / 10) * env * 0.25;\n          for (let x = Math.max(0, Math.floor(xf - 2)); x \u003c= Math.min(W - 1, xf + 2); x++) P[x] += p * Math.exp(-((x - xf) ** 2) / 0.35);\n        }\n      }\n    }\n  }\n  // A clap rings across every bin and dies away within a third of a second.\n  const age = t - S.clap;\n  if (age > -dt && age \u003c 0.3) for (let x = 0; x \u003c W; x++) P[x] += 10 ** ((-26 - 120 * Math.max(0, age) - x * 0.08) / 10);\n  return P;\n}\n\nfunction push(S, k) {\n  const dt = 1 / (12 * (k[1] ?? 2));\n  const P = row(S, S.t, dt, k);\n  S.t += dt;\n  S.head = (S.head + H - 1) % H;\n  for (let x = 0; x \u003c W; x++) S.v[S.head * W + x] = 10 * Math.log10(P[x] + 1e-12);\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const k = input.knobValues || [];\n  if (!S.ready) {\n    // Fill the panel before the first frame, at the knobs' scroll and chorus.\n    S.ready = 1;\n    for (let i = 0; i \u003c H; i++) push(S, k);\n  }\n  S.acc += dt * 12 * (k[1] ?? 2);\n  while (S.acc >= 1) {\n    push(S, k);\n    S.acc--;\n  }\n  if ((input.btnPressed || [])[2]) {\n    // Startled, every bird stops mid-phrase and starts again a few seconds on.\n    S.clap = S.t;\n    for (const b of S.birds) (b.notes = []), (b.next = S.t + rnd(3, 9));\n  }\n  S.lo = -92 - 14 * (k[3] ?? 0.06);\n  if (S.map !== (k[0] ?? 0)) {\n    S.map = k[0] ?? 0;\n    S.lut = lut(S.map);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.lut) return;\n  // Gain slides the 50 dB window the colour map spans.\n  const g = (LUT - 1) / 50;\n  for (let y = 0; y \u003c H; y++) {\n    const r = ((S.head + y) % H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = Math.round(Math.max(0, Math.min(LUT - 1, (S.v[r + x] - S.lo) * g))) * 3;\n      display.setPixel(x, y, S.lut[i], S.lut[i + 1], S.lut[i + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Map=0..1, Scroll=0.5..4, Birds=0..1, Gain=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Map","min":0,"max":1,"about":"The colour map: inferno at 0 blends into magma and then viridis, and at 1 it is the black ink on white paper of a Sona-Graph."},{"name":"Scroll","min":0.5,"max":4,"about":"How fast time falls: at 2 the waterfall moves 24 rows a second and holds five seconds of sound; at 0.5 the songs squeeze into short dashes, at 4 they stretch tall."},{"name":"Birds","min":0,"max":1,"about":"How far the chorus has woken: at 0 a robin, a cuckoo and a wren; turned up, sparrows, a blackbird, a collared dove, a woodpecker and more join, ten in all."},{"name":"Gain","min":-1,"max":1,"about":"Slides the 50 dB window the map spans: turned down, only the songs show over a black floor; turned up, the wind and the far road flood the panel."}],"start":[0,2,0,0.06],"measures":{"motion":2.9689,"detail":0.133,"edges":0.3961,"complexity":2.4228,"coverage":0.9799,"colour":0.4061,"drift":0.0801},"knobResponse":[0.3109,0.1622,0.1596,0.4388]},{"slug":"sprout","title":"Sprout","family":"growth","round":1,"note":"한 LED 씩 자라는 픽셀 들꽃밭이에요. 키 큰 접시꽃 둘이 패널 위쪽까지 올라가 꽃대 아래부터 피어요. 시든 꽃잎은 한 점씩 떨어져 발치에 쌓이고, 시드는 포기 곁에서 새 싹이 올라와요.","idea":"Each stem climbs one LED at a time and only into room nobody else has taken, so a garden draws itself in single pixels, flowers, drops its petals and goes back into the ground.","buttons":"K1 tap sows a seed now.","code":"// ===== Patternflow pattern =====\n// Title:   Sprout\n// Family:  growth\n// Idea:    Each stem climbs one LED at a time and only into room nobody else has taken, so a garden draws itself in single pixels, flowers, drops its petals and goes back into the ground.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Grow=0.25..6, Branches=3..14, Wind=-1..1\n//\n// Knob 1: Hue. The flower colour; each plant takes a shade either side of it.\n// Knob 2: Grow. How fast the tips climb, and with it how soon a plant flowers, withers and makes room.\n// Knob 3: Branches. How many tips a plant may have, from a stem with two side shoots to a small tree.\n// Knob 4: Wind. Leans new growth and sways the tops; left of centre it blows the other way.\n// Buttons: K1 tap sows a seed now.\n\nconst W = 64;\nconst H = 128;\nconst PLANTS = 18;\n// A plant can stand most of the way up the tall panel, so it needs room for more LEDs.\nconst PIX = 720;\nconst TIPS = 96;\n// Petals in the air and on the ground. Fallen ones lie in drifts up to PILE\n// LEDs deep at the foot of the garden.\nconst FALL = 320;\nconst PILE = 5;\n\nconst STEM = 1;\nconst LEAF = 2;\nconst BUD = 3;\nconst PETAL = 4;\nconst HEART = 5;\n\n// Five kinds of plant: a daisy on a tall stem, a tulip on a straight one, a\n// branchy aster with many small heads, a lupine whose top grows florets, and\n// a hollyhock that stands near the top of the panel with cups up its spike.\nconst DAISY = 0;\nconst TULIP = 1;\nconst ASTER = 2;\nconst LUPINE = 3;\nconst HOLLYHOCK = 4;\n// How much a stem wanders off its line.\nconst KIND_WOBBLE = [0.1, 0.04, 0.2, 0.06, 0.03];\nconst KIND_LEN = [74, 44, 40, 78, 94];\nconst KIND_SPREAD = [42, 30, 34, 36, 22];\nconst KIND_FORK = [0.12, 0.05, 0.3, 0.07, 0.02];\nconst KIND_LEAF = [0.12, 0.3, 0.22, 0.16, 0.3];\n// The top of a hollyhock stem, in LEDs, that carries flowers.\nconst SPIKE = 44;\n\n// Flowers as offsets from the tip, a big one for the main stem and a small\n// one for side shoots. The big daisy is seven LEDs across, its heart a plus\n// (HEART_PLUS).\nconst BIG = [\n  [0, -3, -2, -2, -1, -2, 0, -2, 1, -2, 2, -2, -2, -1, -1, -1, 1, -1, 2, -1, -3, 0, -2, 0, 2, 0, 3, 0, -2, 1, -1, 1, 1, 1, 2, 1, -2, 2, -1, 2, 0, 2, 1, 2, 2, 2, 0, 3],\n  [0, -1, -1, -1, 1, -1, -1, -2, 0, -2, 1, -2, -1, -3, 1, -3],\n  [0, -1, -1, -1, 1, -1, -1, 0, 1, 0, -1, 1, 1, 1, 0, -2, 0, -3, -2, -2, 2, -2, -2, 0, -3, 0, 2, 0, 3, 0, -2, 2, 2, 2],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n];\nconst SMALL = [\n  [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 1, 1],\n  [0, -1, -1, -1, 1, -1, -1, -2, 1, -2],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n];\nconst HEART_PLUS = [-1, 0, 1, 0, 0, -1, 0, 1];\n// A hollyhock cup, around a heart two LEDs out from the stem, for a cup on\n// the right; one on the left mirrors it. The open cups low on the spike are\n// wide, the young ones near its top are small.\nconst CUP = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1, 0, -2, 0, 2, 2, 0];\nconst YOUNG_CUP = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1];\n// budGen at or past this marks a hollyhock cup: +1 for the right side, +2 for\n// a wide one. A stem's generation stays below Branches, so it never gets here.\nconst CUP_GEN = 100;\n\nconst GROWING = 1;\nconst HOLDING = 2;\nconst WITHERING = 3;\nconst RECEDING = 4;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction free(p, x, y) {\n  return x >= 0 && x \u003c W && y >= 0 && y \u003c H && p.kind[y * W + x] === 0;\n}\n\n// A tip may step into a pixel only when its two sides and the row ahead are\n// empty, so two branches never touch.\nfunction room(p, x, y) {\n  if (x \u003c 1 || x > W - 2 || y \u003c 3) return false;\n  if (!free(p, x, y) || !free(p, x - 1, y) || !free(p, x + 1, y)) return false;\n  return free(p, x - 1, y - 1) && free(p, x, y - 1) && free(p, x + 1, y - 1);\n}\n\n// Every LED a plant takes goes on its list, in the order it grew.\nfunction put(p, plant, x, y, kind) {\n  const n = p.count[plant];\n  if (n >= PIX) return;\n  const i = y * W + x;\n  p.kind[i] = kind;\n  p.owner[i] = plant;\n  p.pix[plant * PIX + n] = i;\n  p.count[plant] = n + 1;\n  p.lit++;\n}\n\nfunction newTip(p, plant, x, y, len, dir, gen) {\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] >= 0) continue;\n    p.tipPlant[t] = plant;\n    p.tipX[t] = x;\n    p.tipY[t] = y;\n    p.tipLeft[t] = len;\n    p.tipFx[t] = x;\n    p.tipLean[t] = dir;\n    p.tipGen[t] = gen;\n    p.tipSince[t] = 0;\n    p.tipAcc[t] = Math.random();\n    p.tipPace[t] = 0.8 + Math.random() * 0.4;\n    p.tips[plant]++;\n    p.tipsEver[plant]++;\n    return t;\n  }\n  return -1;\n}\n\nfunction sow(p) {\n  let slot = -1;\n  for (let i = 0; i \u003c PLANTS; i++) if (!p.state[i]) slot = i;\n  if (slot \u003c 0) return false;\n  for (let tries = 0; tries \u003c 8; tries++) {\n    const x = 3 + Math.floor(Math.random() * (W - 6));\n    // A plant that is withering or going back into the ground already makes\n    // room: a seed may come up beside it, where its leaves are not in the way.\n    let near = false;\n    for (let i = 0; i \u003c PLANTS; i++) if ((p.state[i] === GROWING || p.state[i] === HOLDING) && Math.abs(p.baseX[i] - x) \u003c 6) near = true;\n    let clear = !near;\n    for (let y = H - 1; clear && y > H - 12; y--) clear = room(p, x, y);\n    if (!clear) continue;\n    // Two hollyhocks stand in the garden whenever there is room for them; the\n    // rest is a mix.\n    let tall = 0;\n    for (let i = 0; i \u003c PLANTS; i++) if ((p.state[i] === GROWING || p.state[i] === HOLDING) && p.style[i] === HOLLYHOCK) tall++;\n    const r = Math.random();\n    const kind = tall \u003c 2 ? HOLLYHOCK : r \u003c 0.32 ? DAISY : r \u003c 0.54 ? TULIP : r \u003c 0.76 ? ASTER : LUPINE;\n    p.state[slot] = GROWING;\n    p.baseX[slot] = x;\n    p.count[slot] = 0;\n    p.tips[slot] = 0;\n    p.tipsEver[slot] = 0;\n    p.buds[slot] = 0;\n    p.wither[slot] = 0;\n    p.stopped[slot] = 0;\n    p.shade[slot] = (Math.random() - 0.5) * 0.18;\n    p.green[slot] = 0.27 + Math.random() * 0.1;\n    p.style[slot] = kind;\n    put(p, slot, x, H - 1, STEM);\n    newTip(p, slot, x, H - 1, KIND_LEN[kind] + Math.floor(Math.random() * KIND_SPREAD[kind]), 0, 0);\n    return true;\n  }\n  return false;\n}\n\nfunction bloom(p, plant, x, y, gen) {\n  const style = p.style[plant];\n  if (gen >= CUP_GEN) {\n    // The bud beside the stem opens into a cup whose heart sits one LED further out.\n    const side = (gen - CUP_GEN) & 1 ? 1 : -1;\n    const shape = (gen - CUP_GEN) & 2 ? CUP : YOUNG_CUP;\n    const cx = x + side;\n    p.kind[y * W + x] = PETAL;\n    p.buds[plant]--;\n    if (free(p, cx, y)) put(p, plant, cx, y, HEART);\n    for (let n = 0; n \u003c shape.length; n += 2) {\n      const px = cx + shape[n] * side;\n      const py = y + shape[n + 1];\n      if (free(p, px, py)) put(p, plant, px, py, PETAL);\n    }\n    return;\n  }\n  // A tulip has no heart showing.\n  p.kind[y * W + x] = style === TULIP ? PETAL : HEART;\n  p.buds[plant]--;\n  const shape = gen === 0 || Math.random() \u003c 0.3 ? BIG[style] : SMALL[style];\n  if (style === DAISY && shape === BIG[DAISY]) {\n    for (let n = 0; n \u003c HEART_PLUS.length; n += 2) if (free(p, x + HEART_PLUS[n], y + HEART_PLUS[n + 1])) put(p, plant, x + HEART_PLUS[n], y + HEART_PLUS[n + 1], HEART);\n  }\n  for (let n = 0; n \u003c shape.length; n += 2) {\n    const px = x + shape[n];\n    const py = y + shape[n + 1];\n    if (free(p, px, py)) put(p, plant, px, py, PETAL);\n  }\n}\n\nfunction endTip(p, t) {\n  const plant = p.tipPlant[t];\n  const i = p.tipY[t] * W + p.tipX[t];\n  // A stem that grew a few LEDs ends in a bud; a stub just stops.\n  if (p.tipSince[t] >= 2 || p.tipGen[t] === 0) {\n    p.kind[i] = BUD;\n    p.budAt[i] = p.budTime * (0.6 + Math.random() * 0.8);\n    p.budGen[i] = p.tipGen[t];\n    p.buds[plant]++;\n  }\n  if (p.tipGen[t] === 0) p.stopped[plant] = 1;\n  p.tipPlant[t] = -1;\n  p.tips[plant]--;\n}\n\nfunction stepTip(p, t, wind) {\n  const plant = p.tipPlant[t];\n  const style = p.style[plant];\n  const x = p.tipX[t];\n  const y = p.tipY[t];\n  if (p.tipLeft[t] \u003c= 0 || p.count[plant] > PIX - 24) {\n    endTip(p, t);\n    return;\n  }\n  // The stem keeps a heading, LEDs across per LED up. It eases back towards\n  // upright, or towards the wind, so a side shoot leaves at a slant and\n  // curves up like a candelabra arm.\n  let lean = p.tipLean[t];\n  lean += (wind * 0.45 - lean) * 0.14 + (Math.random() - 0.5) * KIND_WOBBLE[style];\n  lean = Math.max(-1, Math.min(1, lean));\n  let fx = p.tipFx[t] + lean;\n  let nx = Math.round(fx);\n  const ny = y - 1;\n  if (nx \u003c x - 1) nx = x - 1;\n  if (nx > x + 1) nx = x + 1;\n  if (fx > nx + 0.5) fx = nx + 0.5;\n  if (fx \u003c nx - 0.5) fx = nx - 0.5;\n  if (!room(p, nx, ny)) {\n    // Blocked: a slanted tip tries straight up, and a straight one tries the\n    // slant it leans to, then the other. Right after a fork the side shoot\n    // has taken a cell beside the stem, and the stem steps away from it.\n    const toward = lean \u003c 0 ? x - 1 : x + 1;\n    const away = lean \u003c 0 ? x + 1 : x - 1;\n    const other = nx !== x ? x : room(p, toward, ny) ? toward : away;\n    if (room(p, other, ny)) {\n      nx = other;\n      fx = nx;\n      lean *= 0.3;\n    } else {\n      endTip(p, t);\n      return;\n    }\n  }\n  put(p, plant, nx, ny, STEM);\n  p.tipX[t] = nx;\n  p.tipY[t] = ny;\n  p.tipFx[t] = fx;\n  p.tipLean[t] = lean;\n  p.tipLeft[t]--;\n  p.tipSince[t]++;\n\n  if (style === LUPINE && p.tipGen[t] === 0 && p.tipLeft[t] \u003c 22) {\n    // The top of a lupine climbs with a floret either side.\n    for (let side = -1; side \u003c= 1; side += 2) {\n      if (free(p, nx + side, ny + 1) && free(p, nx + side * 2, ny + 1)) put(p, plant, nx + side, ny + 1, PETAL);\n    }\n  } else if (style === HOLLYHOCK && (p.tipGen[t] === 0 || p.stopped[plant]) && p.tipLeft[t] \u003c SPIKE && ny \u003c H - 40) {\n    // Up the spike a bud every third LED, one side then the other. They open\n    // from the bottom up, as the stem passes them. When the stem is stopped,\n    // often by its own side shoot right after a fork, a side shoot carries\n    // the spike instead.\n    const left = p.tipLeft[t];\n    const side = ((left / 3) | 0) & 1 ? 1 : -1;\n    const bx = nx + side;\n    if (left % 3 === 0 && left > 2 && free(p, bx, ny + 1) && free(p, bx + side, ny + 1)) {\n      put(p, plant, bx, ny + 1, BUD);\n      const c = (ny + 1) * W + bx;\n      p.budAt[c] = p.budTime * (0.8 + Math.random() * 0.5);\n      p.budGen[c] = CUP_GEN + (side > 0 ? 1 : 0) + (left > 14 ? 2 : 0);\n      p.buds[plant]++;\n    }\n  } else if (\n    p.tipSince[t] > 1 &&\n    // A tulip keeps its leaves low, and a hollyhock its big ones.\n    Math.random() \u003c KIND_LEAF[style] * (style === TULIP && ny \u003c H - 18 ? 0.2 : style === HOLLYHOCK && ny \u003c H - 48 ? 0.15 : 1)\n  ) {\n    // Now and then a leaf beside the stem, rising away from it.\n    const side = Math.random() \u003c 0.5 ? -1 : 1;\n    const lx = nx + side;\n    if (free(p, lx, ny + 1) && free(p, lx + side, ny + 1) && free(p, lx, ny) && free(p, lx, ny + 2)) {\n      // An aster carries small florets where another plant has leaves.\n      if (style === ASTER && Math.random() \u003c 0.6) put(p, plant, lx, ny + 1, PETAL);\n      else {\n        put(p, plant, lx, ny + 1, LEAF);\n        if (Math.random() \u003c 0.6 && free(p, lx + side, ny) && free(p, lx + side * 2, ny)) put(p, plant, lx + side, ny, LEAF);\n      }\n    }\n  }\n\n  // A fork: the side shoot heads out one way and the stem leans the other.\n  if (\n    p.tipsEver[plant] \u003c p.branches &&\n    p.tipSince[t] > 3 &&\n    p.tipLeft[t] > 6 &&\n    Math.random() \u003c KIND_FORK[style] * (0.6 + p.branches * 0.12)\n  ) {\n    const side = Math.random() \u003c 0.5 ? -1 : 1;\n    const len = Math.floor(p.tipLeft[t] * (0.45 + Math.random() * 0.35));\n    if (newTip(p, plant, nx, ny, len, side * (0.75 + Math.random() * 0.25), p.tipGen[t] + 1) >= 0) {\n      p.tipLean[t] -= side * 0.35;\n      p.tipSince[t] = 0;\n    }\n  }\n}\n\nfunction release(p, x, y, hue) {\n  for (let f = 0; f \u003c FALL; f++) {\n    if (p.fState[f]) continue;\n    p.fState[f] = 1;\n    p.fx[f] = x + 0.5;\n    p.fy[f] = y + 0.5;\n    p.fHue[f] = hue;\n    p.fRest[f] = 0;\n    p.fSway[f] = Math.random() * 6.28;\n    return;\n  }\n}\n\n// A petal that lands rolls off a drift onto a lower neighbour, downwind\n// first, so the drifts slope like sand. On a full drift it blows away.\nfunction settle(p, f, wind, slow) {\n  const down = wind \u003c 0 ? -1 : 1;\n  let x = Math.floor(p.fx[f]);\n  for (let roll = 0; roll \u003c W; roll++) {\n    const a = x + down;\n    const b = x - down;\n    if (a >= 0 && a \u003c W && p.pile[a] + 1 \u003c p.pile[x]) x = a;\n    else if (b >= 0 && b \u003c W && p.pile[b] + 1 \u003c p.pile[x]) x = b;\n    else break;\n  }\n  if (p.pile[x] >= PILE) {\n    p.fState[f] = 0;\n    return;\n  }\n  p.fx[f] = x + 0.5;\n  p.fy[f] = H - 0.5 - p.pile[x];\n  p.pile[x]++;\n  p.fState[f] = 2;\n  p.fRest[f] = (12 + Math.random() * 14) * slow;\n}\n\n// A fallen petal goes into the soil, and the ones lying on it settle a LED.\nfunction sink(p, f) {\n  const x = Math.floor(p.fx[f]);\n  const y = p.fy[f];\n  p.fState[f] = 0;\n  p.pile[x]--;\n  for (let g = 0; g \u003c FALL; g++) if (p.fState[g] === 2 && Math.floor(p.fx[g]) === x && p.fy[g] \u003c y) p.fy[g] += 1;\n}\n\nfunction step(p, dt, k) {\n  const pace = k[1];\n  const wind = k[3];\n  p.branches = Math.round(k[2]);\n  p.clock += dt;\n  // Tips climb faster than on the wide panel: a stem here goes twice as high in the same season.\n  const rate = 2.6 * pace;\n  // Everything after growing runs on the same clock as the growing.\n  const slow = 2 / pace;\n  p.budTime = 1.2 * slow;\n\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] \u003c 0) continue;\n    p.tipAcc[t] += dt * rate * p.tipPace[t];\n    while (p.tipAcc[t] >= 1 && p.tipPlant[t] >= 0) {\n      p.tipAcc[t] -= 1;\n      stepTip(p, t, wind);\n    }\n  }\n\n  for (let i = 0; i \u003c PLANTS; i++) {\n    const s = p.state[i];\n    if (!s) continue;\n    const base = i * PIX;\n    if (s === GROWING || s === HOLDING) {\n      // Buds open in their own time.\n      if (p.buds[i] > 0) {\n        for (let n = 0; n \u003c p.count[i]; n++) {\n          const c = p.pix[base + n];\n          if (p.kind[c] !== BUD || p.owner[c] !== i) continue;\n          p.budAt[c] -= dt;\n          if (p.budAt[c] \u003c= 0) bloom(p, i, c % W, (c - (c % W)) / W, p.budGen[c]);\n        }\n      }\n      if (s === GROWING && p.tips[i] === 0 && p.buds[i] \u003c= 0) {\n        p.state[i] = HOLDING;\n        p.timer[i] = (12 + Math.random() * 12) * slow;\n      }\n      if (s === HOLDING) {\n        p.timer[i] -= dt;\n        if (p.timer[i] \u003c= 0) {\n          p.state[i] = WITHERING;\n          p.timer[i] = 0;\n        }\n      }\n    } else if (s === WITHERING) {\n      p.timer[i] += dt / (1.8 * slow);\n      p.wither[i] = Math.min(1, p.timer[i]);\n      // Petals let go one by one and fall.\n      for (let n = 0; n \u003c p.count[i]; n++) {\n        const c = p.pix[base + n];\n        if (p.owner[c] !== i || (p.kind[c] !== PETAL && p.kind[c] !== HEART)) continue;\n        if (Math.random() \u003c (dt * 2) / slow) {\n          if (p.kind[c] === PETAL) {\n            // It falls from where the wind has it, not from where it grew.\n            const py = (c - (c % W)) / W;\n            release(p, (c % W) + p.offset[py], py, p.hue + p.shade[i]);\n          }\n          p.kind[c] = p.kind[c] === PETAL ? 0 : STEM;\n          if (!p.kind[c]) p.lit--;\n        }\n      }\n      if (p.timer[i] >= 1) {\n        p.state[i] = RECEDING;\n        p.timer[i] = 0;\n      }\n    } else if (s === RECEDING) {\n      // The plant goes back the way it grew, newest LED first.\n      p.timer[i] += dt * rate * 8;\n      while (p.timer[i] >= 1 && p.count[i] > 0) {\n        p.timer[i] -= 1;\n        const n = --p.count[i];\n        const c = p.pix[base + n];\n        if (p.owner[c] === i && p.kind[c]) {\n          p.kind[c] = 0;\n          p.lit--;\n        }\n      }\n      if (p.count[i] === 0) p.state[i] = 0;\n    }\n  }\n\n  for (let f = 0; f \u003c FALL; f++) {\n    if (!p.fState[f]) continue;\n    if (p.fState[f] === 1) {\n      p.fSway[f] += dt * 2.2;\n      p.fy[f] += dt * (3 + 1.5 * Math.sin(p.fSway[f] * 0.7));\n      p.fx[f] += dt * (wind * 5 + Math.sin(p.fSway[f]) * 2.5);\n      if (p.fx[f] \u003c 0 || p.fx[f] >= W) {\n        p.fState[f] = 0;\n        continue;\n      }\n      if (p.fy[f] >= H - 0.5 - p.pile[Math.floor(p.fx[f])]) settle(p, f, wind, slow);\n    } else {\n      p.fRest[f] -= dt;\n      if (p.fRest[f] \u003c= 0) sink(p, f);\n    }\n  }\n\n  // Sow when the garden is thin, and hold off when it is crowded.\n  let alive = 0;\n  for (let i = 0; i \u003c PLANTS; i++) if (p.state[i] === GROWING || p.state[i] === HOLDING) alive++;\n  p.sowTimer -= dt;\n  if (p.sowTimer \u003c= 0 && alive \u003c 15 && p.lit \u003c W * H * 0.24) {\n    if (sow(p)) p.sowTimer = (0.6 + Math.random() * 2.2) * slow;\n    else p.sowTimer = 0.5;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.kind = new Uint8Array(W * H);\n  p.owner = new Uint8Array(W * H);\n  p.budAt = new Float32Array(W * H);\n  p.budGen = new Uint8Array(W * H);\n  p.pix = new Int16Array(PLANTS * PIX);\n  p.count = new Int16Array(PLANTS);\n  p.state = new Uint8Array(PLANTS);\n  p.baseX = new Int16Array(PLANTS);\n  p.tips = new Int16Array(PLANTS);\n  p.tipsEver = new Int16Array(PLANTS);\n  p.buds = new Int16Array(PLANTS);\n  p.timer = new Float32Array(PLANTS);\n  p.wither = new Float32Array(PLANTS);\n  p.stopped = new Uint8Array(PLANTS);\n  p.shade = new Float32Array(PLANTS);\n  p.green = new Float32Array(PLANTS);\n  p.style = new Uint8Array(PLANTS);\n  p.tipPlant = new Int8Array(TIPS).fill(-1);\n  p.tipX = new Int16Array(TIPS);\n  p.tipY = new Int16Array(TIPS);\n  p.tipLeft = new Int16Array(TIPS);\n  p.tipFx = new Float32Array(TIPS);\n  p.tipLean = new Float32Array(TIPS);\n  p.tipGen = new Uint8Array(TIPS);\n  p.tipSince = new Int16Array(TIPS);\n  p.tipAcc = new Float32Array(TIPS);\n  p.tipPace = new Float32Array(TIPS);\n  p.fx = new Float32Array(FALL);\n  p.fy = new Float32Array(FALL);\n  p.fHue = new Float32Array(FALL);\n  p.fState = new Uint8Array(FALL);\n  p.fRest = new Float32Array(FALL);\n  p.fSway = new Float32Array(FALL);\n  p.pile = new Uint8Array(W);\n  p.offset = new Int8Array(H);\n  p.col = new Float32Array(3);\n  p.lit = 0;\n  p.clock = 0;\n  p.sowTimer = 0;\n  p.budTime = 1;\n  p.branches = 2;\n  p.hue = 0;\n  p.ready = false;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  p.hue = k[0];\n  p.wind = k[3];\n  if (!p.ready) {\n    // Grow a garden before the first frame, so it opens mid-season at any\n    // pace: a slow garden is grown in longer steps.\n    p.ready = true;\n    const tick = (1 / 15) * Math.min(4, 2 / k[1]);\n    for (let i = 0; i \u003c 1600; i++) step(p, tick, k);\n  }\n  if (input.btnPressed && input.btnPressed[0]) sow(p);\n  step(p, dt, k);\n\n  // The tops sway more than the roots; at no wind nothing moves.\n  const w = p.wind;\n  const gust = 0.75 + 0.25 * Math.sin(p.clock * 0.9) + 0.15 * Math.sin(p.clock * 2.3);\n  for (let y = 0; y \u003c H; y++) {\n    const up = (H - 1 - y) / (H - 1);\n    p.offset[y] = Math.round(w * up * up * 5 * gust);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const col = p.col;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n\n  for (let y = 0; y \u003c H; y++) {\n    const o = p.offset[y];\n    for (let x = 0; x \u003c W; x++) {\n      const c = y * W + x;\n      const kind = p.kind[c];\n      if (!kind) continue;\n      const sx = x + o;\n      if (sx \u003c 0 || sx >= W) continue;\n      const plant = p.owner[c];\n      const dry = p.wither[plant];\n      if (kind === STEM) {\n        hsv(p.green[plant] - dry * 0.2, 0.82, 0.6 - dry * 0.12, col, 0);\n      } else if (kind === LEAF) {\n        hsv(p.green[plant] - 0.04 - dry * 0.17, 0.72 + dry * 0.1, 0.92 - dry * 0.35, col, 0);\n      } else if (kind === BUD) {\n        hsv(p.hue + p.shade[plant], 0.4, 1, col, 0);\n      } else if (kind === PETAL) {\n        hsv(p.hue + p.shade[plant], 0.82, 1 - dry * 0.3, col, 0);\n      } else {\n        // A warm heart, unless the petals are warm already.\n        const hh = p.hue + p.shade[plant];\n        const d = Math.abs(hh - Math.round(hh - 0.14) - 0.14);\n        hsv(d \u003c 0.09 ? 0.0 : 0.135, 0.8, 1 - dry * 0.4, col, 0);\n      }\n      display.setPixel(sx, y, col[0], col[1], col[2]);\n    }\n  }\n\n  // Growing tips are drawn pale, the newest LED of each stem.\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] \u003c 0) continue;\n    const y = p.tipY[t];\n    hsv(0.2, 0.4, 1, col, 0);\n    display.setPixel(p.tipX[t] + p.offset[y], y, col[0], col[1], col[2]);\n  }\n\n  for (let f = 0; f \u003c FALL; f++) {\n    if (!p.fState[f]) continue;\n    // A fallen petal is paler than one in the air. Darker, an orange one read as brown.\n    hsv(p.fHue[f], p.fState[f] === 1 ? 0.82 : 0.66, 0.85, col, 0);\n    display.setPixel(Math.floor(p.fx[f]), Math.floor(p.fy[f]), col[0], col[1], col[2]);\n  }\n}\n","layer":{"id":"layer-sprout","type":"code","name":"sprout","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sprout\n// Family:  growth\n// Idea:    Each stem climbs one LED at a time and only into room nobody else has taken, so a garden draws itself in single pixels, flowers, drops its petals and goes back into the ground.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Grow=0.25..6, Branches=3..14, Wind=-1..1\n//\n// Knob 1: Hue. The flower colour; each plant takes a shade either side of it.\n// Knob 2: Grow. How fast the tips climb, and with it how soon a plant flowers, withers and makes room.\n// Knob 3: Branches. How many tips a plant may have, from a stem with two side shoots to a small tree.\n// Knob 4: Wind. Leans new growth and sways the tops; left of centre it blows the other way.\n// Buttons: K1 tap sows a seed now.\n\nconst W = 64;\nconst H = 128;\nconst PLANTS = 18;\n// A plant can stand most of the way up the tall panel, so it needs room for more LEDs.\nconst PIX = 720;\nconst TIPS = 96;\n// Petals in the air and on the ground. Fallen ones lie in drifts up to PILE\n// LEDs deep at the foot of the garden.\nconst FALL = 320;\nconst PILE = 5;\n\nconst STEM = 1;\nconst LEAF = 2;\nconst BUD = 3;\nconst PETAL = 4;\nconst HEART = 5;\n\n// Five kinds of plant: a daisy on a tall stem, a tulip on a straight one, a\n// branchy aster with many small heads, a lupine whose top grows florets, and\n// a hollyhock that stands near the top of the panel with cups up its spike.\nconst DAISY = 0;\nconst TULIP = 1;\nconst ASTER = 2;\nconst LUPINE = 3;\nconst HOLLYHOCK = 4;\n// How much a stem wanders off its line.\nconst KIND_WOBBLE = [0.1, 0.04, 0.2, 0.06, 0.03];\nconst KIND_LEN = [74, 44, 40, 78, 94];\nconst KIND_SPREAD = [42, 30, 34, 36, 22];\nconst KIND_FORK = [0.12, 0.05, 0.3, 0.07, 0.02];\nconst KIND_LEAF = [0.12, 0.3, 0.22, 0.16, 0.3];\n// The top of a hollyhock stem, in LEDs, that carries flowers.\nconst SPIKE = 44;\n\n// Flowers as offsets from the tip, a big one for the main stem and a small\n// one for side shoots. The big daisy is seven LEDs across, its heart a plus\n// (HEART_PLUS).\nconst BIG = [\n  [0, -3, -2, -2, -1, -2, 0, -2, 1, -2, 2, -2, -2, -1, -1, -1, 1, -1, 2, -1, -3, 0, -2, 0, 2, 0, 3, 0, -2, 1, -1, 1, 1, 1, 2, 1, -2, 2, -1, 2, 0, 2, 1, 2, 2, 2, 0, 3],\n  [0, -1, -1, -1, 1, -1, -1, -2, 0, -2, 1, -2, -1, -3, 1, -3],\n  [0, -1, -1, -1, 1, -1, -1, 0, 1, 0, -1, 1, 1, 1, 0, -2, 0, -3, -2, -2, 2, -2, -2, 0, -3, 0, 2, 0, 3, 0, -2, 2, 2, 2],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n];\nconst SMALL = [\n  [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 1, 1],\n  [0, -1, -1, -1, 1, -1, -1, -2, 1, -2],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n];\nconst HEART_PLUS = [-1, 0, 1, 0, 0, -1, 0, 1];\n// A hollyhock cup, around a heart two LEDs out from the stem, for a cup on\n// the right; one on the left mirrors it. The open cups low on the spike are\n// wide, the young ones near its top are small.\nconst CUP = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1, 0, -2, 0, 2, 2, 0];\nconst YOUNG_CUP = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1];\n// budGen at or past this marks a hollyhock cup: +1 for the right side, +2 for\n// a wide one. A stem's generation stays below Branches, so it never gets here.\nconst CUP_GEN = 100;\n\nconst GROWING = 1;\nconst HOLDING = 2;\nconst WITHERING = 3;\nconst RECEDING = 4;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction free(p, x, y) {\n  return x >= 0 && x \u003c W && y >= 0 && y \u003c H && p.kind[y * W + x] === 0;\n}\n\n// A tip may step into a pixel only when its two sides and the row ahead are\n// empty, so two branches never touch.\nfunction room(p, x, y) {\n  if (x \u003c 1 || x > W - 2 || y \u003c 3) return false;\n  if (!free(p, x, y) || !free(p, x - 1, y) || !free(p, x + 1, y)) return false;\n  return free(p, x - 1, y - 1) && free(p, x, y - 1) && free(p, x + 1, y - 1);\n}\n\n// Every LED a plant takes goes on its list, in the order it grew.\nfunction put(p, plant, x, y, kind) {\n  const n = p.count[plant];\n  if (n >= PIX) return;\n  const i = y * W + x;\n  p.kind[i] = kind;\n  p.owner[i] = plant;\n  p.pix[plant * PIX + n] = i;\n  p.count[plant] = n + 1;\n  p.lit++;\n}\n\nfunction newTip(p, plant, x, y, len, dir, gen) {\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] >= 0) continue;\n    p.tipPlant[t] = plant;\n    p.tipX[t] = x;\n    p.tipY[t] = y;\n    p.tipLeft[t] = len;\n    p.tipFx[t] = x;\n    p.tipLean[t] = dir;\n    p.tipGen[t] = gen;\n    p.tipSince[t] = 0;\n    p.tipAcc[t] = Math.random();\n    p.tipPace[t] = 0.8 + Math.random() * 0.4;\n    p.tips[plant]++;\n    p.tipsEver[plant]++;\n    return t;\n  }\n  return -1;\n}\n\nfunction sow(p) {\n  let slot = -1;\n  for (let i = 0; i \u003c PLANTS; i++) if (!p.state[i]) slot = i;\n  if (slot \u003c 0) return false;\n  for (let tries = 0; tries \u003c 8; tries++) {\n    const x = 3 + Math.floor(Math.random() * (W - 6));\n    // A plant that is withering or going back into the ground already makes\n    // room: a seed may come up beside it, where its leaves are not in the way.\n    let near = false;\n    for (let i = 0; i \u003c PLANTS; i++) if ((p.state[i] === GROWING || p.state[i] === HOLDING) && Math.abs(p.baseX[i] - x) \u003c 6) near = true;\n    let clear = !near;\n    for (let y = H - 1; clear && y > H - 12; y--) clear = room(p, x, y);\n    if (!clear) continue;\n    // Two hollyhocks stand in the garden whenever there is room for them; the\n    // rest is a mix.\n    let tall = 0;\n    for (let i = 0; i \u003c PLANTS; i++) if ((p.state[i] === GROWING || p.state[i] === HOLDING) && p.style[i] === HOLLYHOCK) tall++;\n    const r = Math.random();\n    const kind = tall \u003c 2 ? HOLLYHOCK : r \u003c 0.32 ? DAISY : r \u003c 0.54 ? TULIP : r \u003c 0.76 ? ASTER : LUPINE;\n    p.state[slot] = GROWING;\n    p.baseX[slot] = x;\n    p.count[slot] = 0;\n    p.tips[slot] = 0;\n    p.tipsEver[slot] = 0;\n    p.buds[slot] = 0;\n    p.wither[slot] = 0;\n    p.stopped[slot] = 0;\n    p.shade[slot] = (Math.random() - 0.5) * 0.18;\n    p.green[slot] = 0.27 + Math.random() * 0.1;\n    p.style[slot] = kind;\n    put(p, slot, x, H - 1, STEM);\n    newTip(p, slot, x, H - 1, KIND_LEN[kind] + Math.floor(Math.random() * KIND_SPREAD[kind]), 0, 0);\n    return true;\n  }\n  return false;\n}\n\nfunction bloom(p, plant, x, y, gen) {\n  const style = p.style[plant];\n  if (gen >= CUP_GEN) {\n    // The bud beside the stem opens into a cup whose heart sits one LED further out.\n    const side = (gen - CUP_GEN) & 1 ? 1 : -1;\n    const shape = (gen - CUP_GEN) & 2 ? CUP : YOUNG_CUP;\n    const cx = x + side;\n    p.kind[y * W + x] = PETAL;\n    p.buds[plant]--;\n    if (free(p, cx, y)) put(p, plant, cx, y, HEART);\n    for (let n = 0; n \u003c shape.length; n += 2) {\n      const px = cx + shape[n] * side;\n      const py = y + shape[n + 1];\n      if (free(p, px, py)) put(p, plant, px, py, PETAL);\n    }\n    return;\n  }\n  // A tulip has no heart showing.\n  p.kind[y * W + x] = style === TULIP ? PETAL : HEART;\n  p.buds[plant]--;\n  const shape = gen === 0 || Math.random() \u003c 0.3 ? BIG[style] : SMALL[style];\n  if (style === DAISY && shape === BIG[DAISY]) {\n    for (let n = 0; n \u003c HEART_PLUS.length; n += 2) if (free(p, x + HEART_PLUS[n], y + HEART_PLUS[n + 1])) put(p, plant, x + HEART_PLUS[n], y + HEART_PLUS[n + 1], HEART);\n  }\n  for (let n = 0; n \u003c shape.length; n += 2) {\n    const px = x + shape[n];\n    const py = y + shape[n + 1];\n    if (free(p, px, py)) put(p, plant, px, py, PETAL);\n  }\n}\n\nfunction endTip(p, t) {\n  const plant = p.tipPlant[t];\n  const i = p.tipY[t] * W + p.tipX[t];\n  // A stem that grew a few LEDs ends in a bud; a stub just stops.\n  if (p.tipSince[t] >= 2 || p.tipGen[t] === 0) {\n    p.kind[i] = BUD;\n    p.budAt[i] = p.budTime * (0.6 + Math.random() * 0.8);\n    p.budGen[i] = p.tipGen[t];\n    p.buds[plant]++;\n  }\n  if (p.tipGen[t] === 0) p.stopped[plant] = 1;\n  p.tipPlant[t] = -1;\n  p.tips[plant]--;\n}\n\nfunction stepTip(p, t, wind) {\n  const plant = p.tipPlant[t];\n  const style = p.style[plant];\n  const x = p.tipX[t];\n  const y = p.tipY[t];\n  if (p.tipLeft[t] \u003c= 0 || p.count[plant] > PIX - 24) {\n    endTip(p, t);\n    return;\n  }\n  // The stem keeps a heading, LEDs across per LED up. It eases back towards\n  // upright, or towards the wind, so a side shoot leaves at a slant and\n  // curves up like a candelabra arm.\n  let lean = p.tipLean[t];\n  lean += (wind * 0.45 - lean) * 0.14 + (Math.random() - 0.5) * KIND_WOBBLE[style];\n  lean = Math.max(-1, Math.min(1, lean));\n  let fx = p.tipFx[t] + lean;\n  let nx = Math.round(fx);\n  const ny = y - 1;\n  if (nx \u003c x - 1) nx = x - 1;\n  if (nx > x + 1) nx = x + 1;\n  if (fx > nx + 0.5) fx = nx + 0.5;\n  if (fx \u003c nx - 0.5) fx = nx - 0.5;\n  if (!room(p, nx, ny)) {\n    // Blocked: a slanted tip tries straight up, and a straight one tries the\n    // slant it leans to, then the other. Right after a fork the side shoot\n    // has taken a cell beside the stem, and the stem steps away from it.\n    const toward = lean \u003c 0 ? x - 1 : x + 1;\n    const away = lean \u003c 0 ? x + 1 : x - 1;\n    const other = nx !== x ? x : room(p, toward, ny) ? toward : away;\n    if (room(p, other, ny)) {\n      nx = other;\n      fx = nx;\n      lean *= 0.3;\n    } else {\n      endTip(p, t);\n      return;\n    }\n  }\n  put(p, plant, nx, ny, STEM);\n  p.tipX[t] = nx;\n  p.tipY[t] = ny;\n  p.tipFx[t] = fx;\n  p.tipLean[t] = lean;\n  p.tipLeft[t]--;\n  p.tipSince[t]++;\n\n  if (style === LUPINE && p.tipGen[t] === 0 && p.tipLeft[t] \u003c 22) {\n    // The top of a lupine climbs with a floret either side.\n    for (let side = -1; side \u003c= 1; side += 2) {\n      if (free(p, nx + side, ny + 1) && free(p, nx + side * 2, ny + 1)) put(p, plant, nx + side, ny + 1, PETAL);\n    }\n  } else if (style === HOLLYHOCK && (p.tipGen[t] === 0 || p.stopped[plant]) && p.tipLeft[t] \u003c SPIKE && ny \u003c H - 40) {\n    // Up the spike a bud every third LED, one side then the other. They open\n    // from the bottom up, as the stem passes them. When the stem is stopped,\n    // often by its own side shoot right after a fork, a side shoot carries\n    // the spike instead.\n    const left = p.tipLeft[t];\n    const side = ((left / 3) | 0) & 1 ? 1 : -1;\n    const bx = nx + side;\n    if (left % 3 === 0 && left > 2 && free(p, bx, ny + 1) && free(p, bx + side, ny + 1)) {\n      put(p, plant, bx, ny + 1, BUD);\n      const c = (ny + 1) * W + bx;\n      p.budAt[c] = p.budTime * (0.8 + Math.random() * 0.5);\n      p.budGen[c] = CUP_GEN + (side > 0 ? 1 : 0) + (left > 14 ? 2 : 0);\n      p.buds[plant]++;\n    }\n  } else if (\n    p.tipSince[t] > 1 &&\n    // A tulip keeps its leaves low, and a hollyhock its big ones.\n    Math.random() \u003c KIND_LEAF[style] * (style === TULIP && ny \u003c H - 18 ? 0.2 : style === HOLLYHOCK && ny \u003c H - 48 ? 0.15 : 1)\n  ) {\n    // Now and then a leaf beside the stem, rising away from it.\n    const side = Math.random() \u003c 0.5 ? -1 : 1;\n    const lx = nx + side;\n    if (free(p, lx, ny + 1) && free(p, lx + side, ny + 1) && free(p, lx, ny) && free(p, lx, ny + 2)) {\n      // An aster carries small florets where another plant has leaves.\n      if (style === ASTER && Math.random() \u003c 0.6) put(p, plant, lx, ny + 1, PETAL);\n      else {\n        put(p, plant, lx, ny + 1, LEAF);\n        if (Math.random() \u003c 0.6 && free(p, lx + side, ny) && free(p, lx + side * 2, ny)) put(p, plant, lx + side, ny, LEAF);\n      }\n    }\n  }\n\n  // A fork: the side shoot heads out one way and the stem leans the other.\n  if (\n    p.tipsEver[plant] \u003c p.branches &&\n    p.tipSince[t] > 3 &&\n    p.tipLeft[t] > 6 &&\n    Math.random() \u003c KIND_FORK[style] * (0.6 + p.branches * 0.12)\n  ) {\n    const side = Math.random() \u003c 0.5 ? -1 : 1;\n    const len = Math.floor(p.tipLeft[t] * (0.45 + Math.random() * 0.35));\n    if (newTip(p, plant, nx, ny, len, side * (0.75 + Math.random() * 0.25), p.tipGen[t] + 1) >= 0) {\n      p.tipLean[t] -= side * 0.35;\n      p.tipSince[t] = 0;\n    }\n  }\n}\n\nfunction release(p, x, y, hue) {\n  for (let f = 0; f \u003c FALL; f++) {\n    if (p.fState[f]) continue;\n    p.fState[f] = 1;\n    p.fx[f] = x + 0.5;\n    p.fy[f] = y + 0.5;\n    p.fHue[f] = hue;\n    p.fRest[f] = 0;\n    p.fSway[f] = Math.random() * 6.28;\n    return;\n  }\n}\n\n// A petal that lands rolls off a drift onto a lower neighbour, downwind\n// first, so the drifts slope like sand. On a full drift it blows away.\nfunction settle(p, f, wind, slow) {\n  const down = wind \u003c 0 ? -1 : 1;\n  let x = Math.floor(p.fx[f]);\n  for (let roll = 0; roll \u003c W; roll++) {\n    const a = x + down;\n    const b = x - down;\n    if (a >= 0 && a \u003c W && p.pile[a] + 1 \u003c p.pile[x]) x = a;\n    else if (b >= 0 && b \u003c W && p.pile[b] + 1 \u003c p.pile[x]) x = b;\n    else break;\n  }\n  if (p.pile[x] >= PILE) {\n    p.fState[f] = 0;\n    return;\n  }\n  p.fx[f] = x + 0.5;\n  p.fy[f] = H - 0.5 - p.pile[x];\n  p.pile[x]++;\n  p.fState[f] = 2;\n  p.fRest[f] = (12 + Math.random() * 14) * slow;\n}\n\n// A fallen petal goes into the soil, and the ones lying on it settle a LED.\nfunction sink(p, f) {\n  const x = Math.floor(p.fx[f]);\n  const y = p.fy[f];\n  p.fState[f] = 0;\n  p.pile[x]--;\n  for (let g = 0; g \u003c FALL; g++) if (p.fState[g] === 2 && Math.floor(p.fx[g]) === x && p.fy[g] \u003c y) p.fy[g] += 1;\n}\n\nfunction step(p, dt, k) {\n  const pace = k[1];\n  const wind = k[3];\n  p.branches = Math.round(k[2]);\n  p.clock += dt;\n  // Tips climb faster than on the wide panel: a stem here goes twice as high in the same season.\n  const rate = 2.6 * pace;\n  // Everything after growing runs on the same clock as the growing.\n  const slow = 2 / pace;\n  p.budTime = 1.2 * slow;\n\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] \u003c 0) continue;\n    p.tipAcc[t] += dt * rate * p.tipPace[t];\n    while (p.tipAcc[t] >= 1 && p.tipPlant[t] >= 0) {\n      p.tipAcc[t] -= 1;\n      stepTip(p, t, wind);\n    }\n  }\n\n  for (let i = 0; i \u003c PLANTS; i++) {\n    const s = p.state[i];\n    if (!s) continue;\n    const base = i * PIX;\n    if (s === GROWING || s === HOLDING) {\n      // Buds open in their own time.\n      if (p.buds[i] > 0) {\n        for (let n = 0; n \u003c p.count[i]; n++) {\n          const c = p.pix[base + n];\n          if (p.kind[c] !== BUD || p.owner[c] !== i) continue;\n          p.budAt[c] -= dt;\n          if (p.budAt[c] \u003c= 0) bloom(p, i, c % W, (c - (c % W)) / W, p.budGen[c]);\n        }\n      }\n      if (s === GROWING && p.tips[i] === 0 && p.buds[i] \u003c= 0) {\n        p.state[i] = HOLDING;\n        p.timer[i] = (12 + Math.random() * 12) * slow;\n      }\n      if (s === HOLDING) {\n        p.timer[i] -= dt;\n        if (p.timer[i] \u003c= 0) {\n          p.state[i] = WITHERING;\n          p.timer[i] = 0;\n        }\n      }\n    } else if (s === WITHERING) {\n      p.timer[i] += dt / (1.8 * slow);\n      p.wither[i] = Math.min(1, p.timer[i]);\n      // Petals let go one by one and fall.\n      for (let n = 0; n \u003c p.count[i]; n++) {\n        const c = p.pix[base + n];\n        if (p.owner[c] !== i || (p.kind[c] !== PETAL && p.kind[c] !== HEART)) continue;\n        if (Math.random() \u003c (dt * 2) / slow) {\n          if (p.kind[c] === PETAL) {\n            // It falls from where the wind has it, not from where it grew.\n            const py = (c - (c % W)) / W;\n            release(p, (c % W) + p.offset[py], py, p.hue + p.shade[i]);\n          }\n          p.kind[c] = p.kind[c] === PETAL ? 0 : STEM;\n          if (!p.kind[c]) p.lit--;\n        }\n      }\n      if (p.timer[i] >= 1) {\n        p.state[i] = RECEDING;\n        p.timer[i] = 0;\n      }\n    } else if (s === RECEDING) {\n      // The plant goes back the way it grew, newest LED first.\n      p.timer[i] += dt * rate * 8;\n      while (p.timer[i] >= 1 && p.count[i] > 0) {\n        p.timer[i] -= 1;\n        const n = --p.count[i];\n        const c = p.pix[base + n];\n        if (p.owner[c] === i && p.kind[c]) {\n          p.kind[c] = 0;\n          p.lit--;\n        }\n      }\n      if (p.count[i] === 0) p.state[i] = 0;\n    }\n  }\n\n  for (let f = 0; f \u003c FALL; f++) {\n    if (!p.fState[f]) continue;\n    if (p.fState[f] === 1) {\n      p.fSway[f] += dt * 2.2;\n      p.fy[f] += dt * (3 + 1.5 * Math.sin(p.fSway[f] * 0.7));\n      p.fx[f] += dt * (wind * 5 + Math.sin(p.fSway[f]) * 2.5);\n      if (p.fx[f] \u003c 0 || p.fx[f] >= W) {\n        p.fState[f] = 0;\n        continue;\n      }\n      if (p.fy[f] >= H - 0.5 - p.pile[Math.floor(p.fx[f])]) settle(p, f, wind, slow);\n    } else {\n      p.fRest[f] -= dt;\n      if (p.fRest[f] \u003c= 0) sink(p, f);\n    }\n  }\n\n  // Sow when the garden is thin, and hold off when it is crowded.\n  let alive = 0;\n  for (let i = 0; i \u003c PLANTS; i++) if (p.state[i] === GROWING || p.state[i] === HOLDING) alive++;\n  p.sowTimer -= dt;\n  if (p.sowTimer \u003c= 0 && alive \u003c 15 && p.lit \u003c W * H * 0.24) {\n    if (sow(p)) p.sowTimer = (0.6 + Math.random() * 2.2) * slow;\n    else p.sowTimer = 0.5;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.kind = new Uint8Array(W * H);\n  p.owner = new Uint8Array(W * H);\n  p.budAt = new Float32Array(W * H);\n  p.budGen = new Uint8Array(W * H);\n  p.pix = new Int16Array(PLANTS * PIX);\n  p.count = new Int16Array(PLANTS);\n  p.state = new Uint8Array(PLANTS);\n  p.baseX = new Int16Array(PLANTS);\n  p.tips = new Int16Array(PLANTS);\n  p.tipsEver = new Int16Array(PLANTS);\n  p.buds = new Int16Array(PLANTS);\n  p.timer = new Float32Array(PLANTS);\n  p.wither = new Float32Array(PLANTS);\n  p.stopped = new Uint8Array(PLANTS);\n  p.shade = new Float32Array(PLANTS);\n  p.green = new Float32Array(PLANTS);\n  p.style = new Uint8Array(PLANTS);\n  p.tipPlant = new Int8Array(TIPS).fill(-1);\n  p.tipX = new Int16Array(TIPS);\n  p.tipY = new Int16Array(TIPS);\n  p.tipLeft = new Int16Array(TIPS);\n  p.tipFx = new Float32Array(TIPS);\n  p.tipLean = new Float32Array(TIPS);\n  p.tipGen = new Uint8Array(TIPS);\n  p.tipSince = new Int16Array(TIPS);\n  p.tipAcc = new Float32Array(TIPS);\n  p.tipPace = new Float32Array(TIPS);\n  p.fx = new Float32Array(FALL);\n  p.fy = new Float32Array(FALL);\n  p.fHue = new Float32Array(FALL);\n  p.fState = new Uint8Array(FALL);\n  p.fRest = new Float32Array(FALL);\n  p.fSway = new Float32Array(FALL);\n  p.pile = new Uint8Array(W);\n  p.offset = new Int8Array(H);\n  p.col = new Float32Array(3);\n  p.lit = 0;\n  p.clock = 0;\n  p.sowTimer = 0;\n  p.budTime = 1;\n  p.branches = 2;\n  p.hue = 0;\n  p.ready = false;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  p.hue = k[0];\n  p.wind = k[3];\n  if (!p.ready) {\n    // Grow a garden before the first frame, so it opens mid-season at any\n    // pace: a slow garden is grown in longer steps.\n    p.ready = true;\n    const tick = (1 / 15) * Math.min(4, 2 / k[1]);\n    for (let i = 0; i \u003c 1600; i++) step(p, tick, k);\n  }\n  if (input.btnPressed && input.btnPressed[0]) sow(p);\n  step(p, dt, k);\n\n  // The tops sway more than the roots; at no wind nothing moves.\n  const w = p.wind;\n  const gust = 0.75 + 0.25 * Math.sin(p.clock * 0.9) + 0.15 * Math.sin(p.clock * 2.3);\n  for (let y = 0; y \u003c H; y++) {\n    const up = (H - 1 - y) / (H - 1);\n    p.offset[y] = Math.round(w * up * up * 5 * gust);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const col = p.col;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n\n  for (let y = 0; y \u003c H; y++) {\n    const o = p.offset[y];\n    for (let x = 0; x \u003c W; x++) {\n      const c = y * W + x;\n      const kind = p.kind[c];\n      if (!kind) continue;\n      const sx = x + o;\n      if (sx \u003c 0 || sx >= W) continue;\n      const plant = p.owner[c];\n      const dry = p.wither[plant];\n      if (kind === STEM) {\n        hsv(p.green[plant] - dry * 0.2, 0.82, 0.6 - dry * 0.12, col, 0);\n      } else if (kind === LEAF) {\n        hsv(p.green[plant] - 0.04 - dry * 0.17, 0.72 + dry * 0.1, 0.92 - dry * 0.35, col, 0);\n      } else if (kind === BUD) {\n        hsv(p.hue + p.shade[plant], 0.4, 1, col, 0);\n      } else if (kind === PETAL) {\n        hsv(p.hue + p.shade[plant], 0.82, 1 - dry * 0.3, col, 0);\n      } else {\n        // A warm heart, unless the petals are warm already.\n        const hh = p.hue + p.shade[plant];\n        const d = Math.abs(hh - Math.round(hh - 0.14) - 0.14);\n        hsv(d \u003c 0.09 ? 0.0 : 0.135, 0.8, 1 - dry * 0.4, col, 0);\n      }\n      display.setPixel(sx, y, col[0], col[1], col[2]);\n    }\n  }\n\n  // Growing tips are drawn pale, the newest LED of each stem.\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] \u003c 0) continue;\n    const y = p.tipY[t];\n    hsv(0.2, 0.4, 1, col, 0);\n    display.setPixel(p.tipX[t] + p.offset[y], y, col[0], col[1], col[2]);\n  }\n\n  for (let f = 0; f \u003c FALL; f++) {\n    if (!p.fState[f]) continue;\n    // A fallen petal is paler than one in the air. Darker, an orange one read as brown.\n    hsv(p.fHue[f], p.fState[f] === 1 ? 0.82 : 0.66, 0.85, col, 0);\n    display.setPixel(Math.floor(p.fx[f]), Math.floor(p.fy[f]), col[0], col[1], col[2]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Grow=0.25..6, Branches=3..14, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The flower colour; each plant takes a shade either side of it."},{"name":"Grow","min":0.25,"max":6,"about":"How fast the tips climb, and with it how soon a plant flowers, withers and makes room."},{"name":"Branches","min":3,"max":14,"about":"How many tips a plant may have, from a stem with two side shoots to a small tree."},{"name":"Wind","min":-1,"max":1,"about":"Leans new growth and sways the tops; left of centre it blows the other way."}],"start":[0,2,3,0.06],"measures":{"motion":0.0426,"detail":0.1141,"edges":0.9949,"complexity":0.1635,"coverage":0.1685,"colour":0.2652,"drift":0.0313},"knobResponse":[0.0448,0.119,0.1279,0.0982]},{"slug":"stained-glass","title":"Stained Glass","family":"glass","round":18,"note":"고딕 첨두 창이 세운 패널을 다 채워요. 뾰족한 머리의 장미창과 몸통의 생명나무가 검은 납선에 끼운 보석빛 유리 조각으로 짜여 있고, 창 뒤로 해가 지나가면 그 쪽 조각이 희게 타오르고 구름 그림자가 지나가면 어두워져요. K3 은 유리를 자른 크기라서, 돌리면 테두리 네모와 마름모가 잘아지고 장미 꽃잎이 여덟 장에서 열두 장이 돼요.","idea":"A gothic lancet window fills the standing panel, a rose in its pointed head and a tree of life in its shaft, every piece of jewel glass held in black lead, and the light through it brightens and moves as the sun crosses behind and a cloud shadow passes.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Stained Glass\n// Family:  glass\n// Idea:    A gothic lancet window fills the standing panel, a rose in its pointed head and a tree of life in its shaft, every piece of jewel glass held in black lead, and the light through it brightens and moves as the sun crosses behind and a cloud shadow passes.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the medallion lancets and Jesse Tree windows of Chartres\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Glass=0..1, Speed=0.2..3, Pieces=1..4, Clouds=0..1\n//\n// Knob 1: Glass. Turns every pane round the colour wheel together, starting from the cathedral set: a cobalt ground, a ruby and gold border, ruby petals and emerald leaves.\n// Knob 2: Speed. How fast the sun and the clouds travel behind the window: at 2 the sun takes 26 s to cross it and comes round every 64 s, and a cloud shadow sweeps over in about 6 s; at 0.2 the light hardly moves.\n// Knob 3: Pieces. How finely the glazier cut the glass: at 1 the border squares are 5 LEDs long and the blue quarries 7 across, at 4 they are 3.5 and 4, and the rose gets 12 petals instead of 8.\n// Knob 4: Clouds. At 0.06 one cumulus drifts across now and then; turned up, more and darker clouds follow and hide the sun, until the window glows only in patches.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst HALF = 32;\nconst TAU = Math.PI * 2;\n// The window: its axis, half width, and an equilateral pointed arch whose two\n// arcs have the span (62) as radius and spring from row 55.\nconst X0 = 32;\nconst WH = 31;\nconst R = 62;\nconst YS = 55;\n// Iron saddle bars across the shaft, one row each.\nconst BARS = [55, 80, 105];\n// The rose in the arch head: centre row and radius.\nconst ROSE_Y = 34;\nconst ROSE_R = 17.5;\n// Kinds of glass, and their colour at Glass 0.\nconst RUBY = 0;\nconst GOLD = 1;\nconst WHITE = 2;\nconst COBALT = 3;\nconst SKY = 4;\nconst EMERALD = 5;\nconst LEAF = 6;\nconst AMBER = 7;\nconst VIOLET = 8;\nconst PINK = 9;\nconst STEM = 10;\nconst GLASS = [\n  [212, 26, 38],\n  [236, 176, 34],\n  [214, 222, 204],\n  [30, 60, 208],\n  [62, 134, 228],\n  [24, 170, 82],\n  [130, 198, 46],\n  [214, 116, 28],\n  [140, 46, 194],\n  [228, 92, 150],\n  [236, 210, 128],\n];\n// Not glass: stone round the window, lead cames and the iron bars.\nconst STONE = -1;\nconst LEAD = -2;\nconst IRON = -3;\nconst DARK = { [STONE]: [11, 9, 8], [LEAD]: [8, 8, 10], [IRON]: [6, 6, 7] };\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction rotateHue(rgb, turn) {\n  const [r, g, b] = rgb.map((v) => v / 255);\n  const mx = Math.max(r, g, b);\n  const mn = Math.min(r, g, b);\n  const c = mx - mn;\n  let h = 0;\n  if (c > 0) {\n    if (mx === r) h = ((g - b) / c + 6) % 6;\n    else if (mx === g) h = (b - r) / c + 2;\n    else h = (r - g) / c + 4;\n  }\n  h = (((h / 6 + turn) % 1) + 1) % 1;\n  const s = mx > 0 ? c / mx : 0;\n  const k = (n) => {\n    const q = (n + h * 6) % 6;\n    return mx * (1 - s * clamp(Math.min(q, 4 - q), 0, 1));\n  };\n  return [k(5) * 255, k(3) * 255, k(1) * 255];\n}\n\n// A quadratic curve sampled into points with their running length.\nfunction curve(a, b, c, n) {\n  const pts = [];\n  let len = 0;\n  for (let i = 0; i \u003c= n; i++) {\n    const t = i / n;\n    const u = (1 - t) * (1 - t) * a[0] + 2 * t * (1 - t) * b[0] + t * t * c[0];\n    const y = (1 - t) * (1 - t) * a[1] + 2 * t * (1 - t) * b[1] + t * t * c[1];\n    if (i) len += Math.hypot(u - pts[pts.length - 1][0], y - pts[pts.length - 1][1]);\n    pts.push([u, y, len]);\n  }\n  return pts;\n}\n\n// The tree of life, drawn on the left half (u is the distance from the axis):\n// in each panel of the shaft a branch leaves the trunk, curls up and out and\n// ends in a flower, with a leaf hanging under it and one standing over it.\nfunction tree() {\n  const tiers = [];\n  for (const [y0, flower] of [\n    [75, PINK],\n    [100, RUBY],\n  ]) {\n    const pts = curve([1.5, y0], [5, y0 - 7], [13.5, y0 - 9], 16);\n    const at = (t) => pts[Math.round(t * 16)];\n    const a = at(0.55);\n    const b = at(0.3);\n    tiers.push({\n      pts,\n      box: [0, y0 - 19, 30, y0 + 9],\n      flower: [16.5, y0 - 11, 5.2, flower],\n      leaves: [\n        [a[0] + 2.6, a[1] + 3.6, 0.55, 4.6, 2.2],\n        [b[0] + 4.8, b[1] + 4.6, 0.95, 4.2, 2.0],\n        [b[0] - 1.2, b[1] - 6, -1.75, 4.0, 1.9],\n      ],\n    });\n  }\n  // Two long lily leaves rise from the foot of the trunk in the lowest panel.\n  const low = {\n    pts: [],\n    box: [0, 104, 32, 122],\n    flower: null,\n    leaves: [\n      [9, 113, -2.45, 7.5, 2.4],\n      [19, 115.5, -2.75, 6, 2.2],\n    ],\n  };\n  tiers.push(low);\n  return tiers;\n}\n\n// What the glazier cut at one point of the left half: a kind of glass (or\n// STONE, IRON) and two numbers that name the piece.\nfunction cell(px, py, cut, T) {\n  const u = X0 - px;\n  const side = WH - u;\n  const bottom = 127 - py;\n  let d = Math.min(side, bottom);\n  const arch = py \u003c YS;\n  if (arch) d = Math.min(d, R - Math.hypot(WH + u, YS - py));\n  if (d \u003c= 0) return [STONE, 0, 0];\n  // The border of small square quarries and the white pearled fillet inside it.\n  if (d \u003c= 6.2) {\n    const fillet = d > 4.2;\n    const len = fillet ? 3 : 5 - 1.5 * cut;\n    let part;\n    let i;\n    if (arch) {\n      const rr = R - d;\n      const top = Math.atan2(Math.sqrt(rr * rr - WH * WH), WH);\n      i = Math.floor(((top - Math.atan2(YS - py, WH + u)) * rr) / len + 0.5);\n      part = 0;\n    } else if (side \u003c bottom) {\n      i = Math.floor((py - YS) / len);\n      part = 1;\n    } else {\n      i = Math.floor(u / len + 0.5);\n      part = 2;\n    }\n    if (fillet) return [WHITE, 10 + part, i];\n    return [i % 2 ? GOLD : RUBY, 20 + part, i];\n  }\n  for (const yb of BARS) if (py >= yb && py \u003c yb + 1) return [IRON, 0, 0];\n\n  // The rose: a gold boss, petals, a ring of pearls and a rim.\n  const ry = py - ROSE_Y;\n  const rr = Math.hypot(u, ry);\n  if (rr \u003c ROSE_R) {\n    const th = Math.atan2(u, -ry);\n    if (rr \u003c 3) return [GOLD, 30, 0];\n    const n1 = cut \u003c 0.5 ? 8 : 12;\n    const s1 = TAU / n1;\n    if (rr \u003c 11) {\n      const k = Math.floor(th / s1 + 0.5);\n      const t = Math.abs(th - k * s1) / (s1 / 2);\n      if (rr \u003c 3 + 8 * Math.sqrt(Math.max(0, 1 - t * t))) return [RUBY, 31, k];\n      return [SKY, 32, Math.floor(th / s1)];\n    }\n    const n2 = cut \u003c 0.5 ? 16 : 24;\n    const k2 = Math.floor(th / (TAU / n2) + 0.5);\n    if (rr \u003c 13.6) return [k2 % 2 ? WHITE : GOLD, 33, k2];\n    return [k2 % 2 ? VIOLET : EMERALD, 34, k2];\n  }\n\n  // The tree.\n  for (let ti = 0; ti \u003c T.length; ti++) {\n    const tier = T[ti];\n    const [b0, b1, b2, b3] = tier.box;\n    if (u \u003c b0 || u > b2 || py \u003c b1 || py > b3) continue;\n    if (tier.flower) {\n      const [fu, fy, fr, kind] = tier.flower;\n      const du = u - fu;\n      const dy = py - fy;\n      const f = Math.hypot(du, dy);\n      if (f \u003c fr + 0.5) {\n        if (f \u003c 2.1) return [GOLD, 40 + ti, 0];\n        const a = Math.atan2(du, -dy);\n        const n = cut \u003c 0.5 ? 5 : 7;\n        const k = Math.floor(((a / TAU) * n + n + 0.5) % n);\n        const c = Math.abs(Math.cos((a * n) / 2));\n        if (f \u003c fr * (0.74 + 0.26 * c)) return [kind, 44 + ti, k];\n      }\n    }\n    for (let li = 0; li \u003c tier.leaves.length; li++) {\n      const [lu, ly, al, la, lb] = tier.leaves[li];\n      const du = u - lu;\n      const dy = py - ly;\n      const q1 = (du * Math.cos(al) + dy * Math.sin(al)) / la;\n      const q2 = (-du * Math.sin(al) + dy * Math.cos(al)) / lb;\n      if (Math.abs(q1) \u003c 1 && Math.abs(q2) \u003c 1 - q1 * q1) {\n        const half = cut >= 0.5 && q2 \u003c 0 ? 1 : 0;\n        return [(li + ti) % 2 ? LEAF : EMERALD, 50 + ti * 8 + li * 2 + half, 0];\n      }\n    }\n    const pts = tier.pts;\n    for (let i = 1; i \u003c pts.length; i++) {\n      const [ax, ay, al] = pts[i - 1];\n      const [bx, by] = pts[i];\n      const vx = bx - ax;\n      const vy = by - ay;\n      const t = clamp(((u - ax) * vx + (py - ay) * vy) / (vx * vx + vy * vy), 0, 1);\n      if (Math.hypot(u - ax - t * vx, py - ay - t * vy) \u003c 2) {\n        const s = al + t * Math.hypot(vx, vy);\n        return [GOLD, 70 + ti, Math.floor(s / (8 - 3 * cut))];\n      }\n    }\n  }\n  // The trunk, rooted in the mound and reaching up into the rose.\n  const mound = 117.5 + 0.009 * u * u;\n  if (py > ROSE_Y && py \u003c mound + 1 && u \u003c 1.9 + 1.6 * clamp((py - 56) / 62, 0, 1)) return [STEM, 80, Math.floor((py - 56) / (9 - 3 * cut))];\n  if (py >= mound) {\n    const row = Math.floor((py - mound) / 3.2);\n    const col = Math.floor((u + (row % 2) * 3) / (7 - 2 * cut));\n    return [(row + col) % 2 ? LEAF : EMERALD, 90 + row, col];\n  }\n\n  // The ground: diamond quarries of cobalt, here and there sky blue or violet.\n  const q = 7 - 3 * cut;\n  const a = Math.floor((u + py) / q);\n  const b = Math.floor((py - u) / q);\n  const h = (((a * 73856093) ^ (b * 19349663)) >>> 0) % 13;\n  return [h \u003c 2 ? SKY : h === 2 ? VIOLET : COBALT, 100 + (a & 1023), b + 512];\n}\n\nfunction build(P, cut) {\n  P.cut = cut;\n  const T = tree();\n  const key = new Float64Array(HALF * H);\n  const kind = new Int8Array(HALF * H);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c HALF; x++) {\n      const [k, a, b] = cell(x + 0.5, y + 0.5, cut, T);\n      kind[y * HALF + x] = k;\n      key[y * HALF + x] = k \u003c 0 ? k : (k * 1000 + a) * 4096 + b + 2048;\n    }\n  // A lead came runs along every join: the LED on the left of or above a join\n  // between two pieces becomes lead.\n  const lead = new Uint8Array(HALF * H);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c HALF; x++) {\n      const p = y * HALF + x;\n      if (kind[p] \u003c 0) continue;\n      if ((x \u003c HALF - 1 && key[p + 1] !== key[p]) || (y \u003c H - 1 && key[p + HALF] !== key[p])) lead[p] = 1;\n    }\n  // Pieces that reach the axis are one piece with their mirror image.\n  const central = new Set();\n  for (let y = 0; y \u003c H; y++) if (!lead[y * HALF + HALF - 1]) central.add(key[y * HALF + HALF - 1]);\n  const ids = new Int32Array(N);\n  const index = new Map();\n  const kinds = [];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const left = x \u003c HALF;\n      const p = y * HALF + (left ? x : W - 1 - x);\n      if (kind[p] \u003c 0) ids[y * W + x] = kind[p];\n      else if (lead[p]) ids[y * W + x] = LEAD;\n      else {\n        const k = left || central.has(key[p]) ? key[p] : -key[p] - 1;\n        let id = index.get(k);\n        if (id === undefined) {\n          id = kinds.length;\n          index.set(k, id);\n          kinds.push(kind[p]);\n        }\n        ids[y * W + x] = id;\n      }\n    }\n  const n = kinds.length;\n  const cx = new Float32Array(n);\n  const cy = new Float32Array(n);\n  const count = new Float32Array(n);\n  for (let p = 0; p \u003c N; p++) {\n    const id = ids[p];\n    if (id \u003c 0) continue;\n    cx[id] += p % W;\n    cy[id] += Math.floor(p / W);\n    count[id]++;\n  }\n  // Each piece is its own sheet: a little lighter or darker and warmer or\n  // cooler than its neighbours, with faint streaks running one way across it.\n  const tint = new Float32Array(n * 3);\n  const streak = new Float32Array(n * 3);\n  for (let i = 0; i \u003c n; i++) {\n    cx[i] = cx[i] / count[i] + 0.5;\n    cy[i] = cy[i] / count[i] + 0.5;\n    const v = 0.84 + 0.16 * Math.random();\n    for (let c = 0; c \u003c 3; c++) tint[i * 3 + c] = v * (0.94 + 0.12 * Math.random());\n    const ang = Math.random() * Math.PI;\n    streak[i * 3] = (Math.cos(ang) * TAU) / 10;\n    streak[i * 3 + 1] = (Math.sin(ang) * TAU) / 10;\n    streak[i * 3 + 2] = Math.random() * TAU;\n  }\n  // Antique glass is uneven: per LED a speck of grain, along the streaks a\n  // ripple of 2.5 levels, and now and then a seed of trapped air.\n  const tex = new Int8Array(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    const id = ids[p];\n    const x = p % W;\n    const y = Math.floor(p / W);\n    if (id \u003c 0) {\n      for (let c = 0; c \u003c 3; c++) tex[p * 3 + c] = Math.floor(Math.random() * 3) - 1;\n      continue;\n    }\n    const s = 2.5 * Math.sin(x * streak[id * 3] + y * streak[id * 3 + 1] + streak[id * 3 + 2]);\n    const seed = Math.random() \u003c 0.012 ? 7 : 0;\n    for (let c = 0; c \u003c 3; c++) tex[p * 3 + c] = Math.round(s + seed) + Math.floor(Math.random() * 5) - 2;\n  }\n  Object.assign(P, { ids, kinds, cx, cy, tint, tex, n, col: new Float32Array(n * 3) });\n}\n\nexport function setup(params) {\n  const P = params;\n  P.tau = 0;\n  P.started = false;\n  P.cut = -1;\n  P.hue = -1;\n  P.palette = GLASS;\n  P.noise = new Float32Array(24 * 12);\n  for (let i = 0; i \u003c P.noise.length; i++) P.noise[i] = Math.random();\n}\n\n// The light behind a point of the window: the sky, the sun's glow and the\n// cloud shadows, from about 0.3 to 1, and how much of it is the sun.\nfunction light(P, x, y) {\n  const g = Math.exp(-((x - P.sx) ** 2 + (y - P.sy) ** 2) / (2 * 24 * 24)) * P.sunClear;\n  let shade = 0;\n  for (const c of P.clouds) shade += c.dark * Math.exp(-(((x - c.x) / c.rx) ** 2 + ((y - c.y) / c.ry) ** 2));\n  // Cumulus is lumpy: its shadow is mottled in puffs about 11 LEDs across\n  // that travel with the wind.\n  if (shade > 0.01) shade *= 0.15 + 1.4 * puff(P, x - P.wind, y);\n  shade = Math.min(0.55, shade);\n  const sky = P.skyLight * (1 - 0.1 * (y / H));\n  return [(sky + (1 - sky) * g) * (1 - shade), g * (1 - shade)];\n}\n\n// Smooth value noise on a 24 by 12 lattice of 11 LED cells, wrapping.\nfunction puff(P, x, y) {\n  const gx = x / 11;\n  const gy = y / 11;\n  const ix = Math.floor(gx);\n  const iy = Math.floor(gy);\n  const fx = gx - ix;\n  const fy = gy - iy;\n  const sx = fx * fx * (3 - 2 * fx);\n  const sy = fy * fy * (3 - 2 * fy);\n  const at = (i, j) => P.noise[(((j % 12) + 12) % 12) * 24 + (((i % 24) + 24) % 24)];\n  const a = at(ix, iy) + (at(ix + 1, iy) - at(ix, iy)) * sx;\n  const b = at(ix, iy + 1) + (at(ix + 1, iy + 1) - at(ix, iy + 1)) * sx;\n  return a + (b - a) * sy;\n}\n\n// The sun and the clouds at time tau (seconds at Speed 2).\nfunction sky(P, cloudy) {\n  const tau = P.tau;\n  // The sun crosses a 160 LED stretch of sky in 64 s, low at the sides and\n  // highest over the rose, then comes round again unseen.\n  const sx = ((tau * 2.5 + 23) % 160) - 48;\n  P.sx = sx;\n  P.sy = 36 + 0.006 * (sx - X0) * (sx - X0);\n  // Clouds drift right at 18 LEDs a second through a 280 LED loop, each two\n  // puffs. The first is always there; more come in as Clouds turns up.\n  P.clouds = [];\n  P.wind = tau * 18;\n  const C = [\n    [61.5, 48, 24, 38, 0.5],\n    [131, 24, 20, 26, 0.5],\n    [201, 100, 26, 30, 0.5],\n    [271, 72, 18, 44, 0.55],\n    [26, 16, 30, 24, 0.5],\n    [166, 114, 22, 22, 0.5],\n  ];\n  for (let i = 0; i \u003c C.length; i++) {\n    const [x0, y, rx, ry, dark] = C[i];\n    const w = i === 0 ? 1 : clamp(cloudy * 6 - i + 0.6, 0, 1);\n    if (w \u003c= 0) continue;\n    const x = ((x0 + tau * 18) % 280) - 70;\n    const dk = dark * w * (0.85 + 0.4 * cloudy);\n    const yy = y + 5 * Math.sin(tau * 0.07 + i);\n    P.clouds.push({ x, y: yy, rx, ry, dark: dk });\n    P.clouds.push({ x: x - rx * 0.9, y: yy + ry * 0.45, rx: rx * 0.7, ry: ry * 0.6, dark: dk * 0.6 });\n  }\n  // A cloud over the sun takes its glow, and an overcast sky takes some of it\n  // anyway and turns the daylight grey and cool.\n  let over = 0;\n  for (const c of P.clouds) over += c.dark * 1.6 * Math.exp(-(((P.sx - c.x) / c.rx) ** 2 + ((P.sy - c.y) / c.ry) ** 2));\n  P.sunClear = clamp(1 - over, 0, 1) * (1 - 0.75 * cloudy);\n  P.skyLight = 0.64 - 0.12 * cloudy;\n  P.cool = cloudy;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const cut = Math.round(clamp((k[2] - 1) / 3, 0, 1) * 6) / 6;\n  P.cloudy = clamp(k[3], 0, 1);\n  if (cut !== P.cut) build(P, cut);\n  if (hue !== P.hue) {\n    P.hue = hue;\n    P.palette = GLASS.map((c) => rotateHue(c, hue));\n  }\n  // The window opens with the sun just inside its left edge and the first\n  // cloud coming up behind it, ten seconds further on at the knob's speed,\n  // so the opening light already differs from one Speed to the next.\n  if (!P.started) {\n    P.started = true;\n    P.tau = 2 + 10 * speed;\n  }\n  P.tau += dt * speed;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.cut \u003c 0) return;\n  sky(P, P.cloudy);\n  const { kinds, cx, cy, tint, col, palette, ids, tex } = P;\n  // Sunlight is warm; an overcast sky is grey and a little blue.\n  const day = [1 - 0.22 * P.cool, 1 - 0.1 * P.cool, 0.94 + 0.1 * P.cool];\n  for (let i = 0; i \u003c P.n; i++) {\n    const [L, g] = light(P, cx[i], cy[i]);\n    // Where the sun stands right behind the glass it burns toward white.\n    const bloom = 0.5 * g * g * g;\n    const base = palette[kinds[i]];\n    for (let c = 0; c \u003c 3; c++) {\n      const v = base[c] * tint[i * 3 + c] * L * day[c];\n      col[i * 3 + c] = v + ((c === 2 ? 225 : 255) - v) * bloom;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const id = ids[p];\n      const c = id \u003c 0 ? DARK[id] : null;\n      const r = c ? c[0] : col[id * 3];\n      const g = c ? c[1] : col[id * 3 + 1];\n      const b = c ? c[2] : col[id * 3 + 2];\n      display.setPixel(x, y, Math.round(r) + tex[p * 3], Math.round(g) + tex[p * 3 + 1], Math.round(b) + tex[p * 3 + 2]);\n    }\n}\n","layer":{"id":"layer-stained-glass","type":"code","name":"stained-glass","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Stained Glass\n// Family:  glass\n// Idea:    A gothic lancet window fills the standing panel, a rose in its pointed head and a tree of life in its shaft, every piece of jewel glass held in black lead, and the light through it brightens and moves as the sun crosses behind and a cloud shadow passes.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the medallion lancets and Jesse Tree windows of Chartres\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Glass=0..1, Speed=0.2..3, Pieces=1..4, Clouds=0..1\n//\n// Knob 1: Glass. Turns every pane round the colour wheel together, starting from the cathedral set: a cobalt ground, a ruby and gold border, ruby petals and emerald leaves.\n// Knob 2: Speed. How fast the sun and the clouds travel behind the window: at 2 the sun takes 26 s to cross it and comes round every 64 s, and a cloud shadow sweeps over in about 6 s; at 0.2 the light hardly moves.\n// Knob 3: Pieces. How finely the glazier cut the glass: at 1 the border squares are 5 LEDs long and the blue quarries 7 across, at 4 they are 3.5 and 4, and the rose gets 12 petals instead of 8.\n// Knob 4: Clouds. At 0.06 one cumulus drifts across now and then; turned up, more and darker clouds follow and hide the sun, until the window glows only in patches.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst HALF = 32;\nconst TAU = Math.PI * 2;\n// The window: its axis, half width, and an equilateral pointed arch whose two\n// arcs have the span (62) as radius and spring from row 55.\nconst X0 = 32;\nconst WH = 31;\nconst R = 62;\nconst YS = 55;\n// Iron saddle bars across the shaft, one row each.\nconst BARS = [55, 80, 105];\n// The rose in the arch head: centre row and radius.\nconst ROSE_Y = 34;\nconst ROSE_R = 17.5;\n// Kinds of glass, and their colour at Glass 0.\nconst RUBY = 0;\nconst GOLD = 1;\nconst WHITE = 2;\nconst COBALT = 3;\nconst SKY = 4;\nconst EMERALD = 5;\nconst LEAF = 6;\nconst AMBER = 7;\nconst VIOLET = 8;\nconst PINK = 9;\nconst STEM = 10;\nconst GLASS = [\n  [212, 26, 38],\n  [236, 176, 34],\n  [214, 222, 204],\n  [30, 60, 208],\n  [62, 134, 228],\n  [24, 170, 82],\n  [130, 198, 46],\n  [214, 116, 28],\n  [140, 46, 194],\n  [228, 92, 150],\n  [236, 210, 128],\n];\n// Not glass: stone round the window, lead cames and the iron bars.\nconst STONE = -1;\nconst LEAD = -2;\nconst IRON = -3;\nconst DARK = { [STONE]: [11, 9, 8], [LEAD]: [8, 8, 10], [IRON]: [6, 6, 7] };\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction rotateHue(rgb, turn) {\n  const [r, g, b] = rgb.map((v) => v / 255);\n  const mx = Math.max(r, g, b);\n  const mn = Math.min(r, g, b);\n  const c = mx - mn;\n  let h = 0;\n  if (c > 0) {\n    if (mx === r) h = ((g - b) / c + 6) % 6;\n    else if (mx === g) h = (b - r) / c + 2;\n    else h = (r - g) / c + 4;\n  }\n  h = (((h / 6 + turn) % 1) + 1) % 1;\n  const s = mx > 0 ? c / mx : 0;\n  const k = (n) => {\n    const q = (n + h * 6) % 6;\n    return mx * (1 - s * clamp(Math.min(q, 4 - q), 0, 1));\n  };\n  return [k(5) * 255, k(3) * 255, k(1) * 255];\n}\n\n// A quadratic curve sampled into points with their running length.\nfunction curve(a, b, c, n) {\n  const pts = [];\n  let len = 0;\n  for (let i = 0; i \u003c= n; i++) {\n    const t = i / n;\n    const u = (1 - t) * (1 - t) * a[0] + 2 * t * (1 - t) * b[0] + t * t * c[0];\n    const y = (1 - t) * (1 - t) * a[1] + 2 * t * (1 - t) * b[1] + t * t * c[1];\n    if (i) len += Math.hypot(u - pts[pts.length - 1][0], y - pts[pts.length - 1][1]);\n    pts.push([u, y, len]);\n  }\n  return pts;\n}\n\n// The tree of life, drawn on the left half (u is the distance from the axis):\n// in each panel of the shaft a branch leaves the trunk, curls up and out and\n// ends in a flower, with a leaf hanging under it and one standing over it.\nfunction tree() {\n  const tiers = [];\n  for (const [y0, flower] of [\n    [75, PINK],\n    [100, RUBY],\n  ]) {\n    const pts = curve([1.5, y0], [5, y0 - 7], [13.5, y0 - 9], 16);\n    const at = (t) => pts[Math.round(t * 16)];\n    const a = at(0.55);\n    const b = at(0.3);\n    tiers.push({\n      pts,\n      box: [0, y0 - 19, 30, y0 + 9],\n      flower: [16.5, y0 - 11, 5.2, flower],\n      leaves: [\n        [a[0] + 2.6, a[1] + 3.6, 0.55, 4.6, 2.2],\n        [b[0] + 4.8, b[1] + 4.6, 0.95, 4.2, 2.0],\n        [b[0] - 1.2, b[1] - 6, -1.75, 4.0, 1.9],\n      ],\n    });\n  }\n  // Two long lily leaves rise from the foot of the trunk in the lowest panel.\n  const low = {\n    pts: [],\n    box: [0, 104, 32, 122],\n    flower: null,\n    leaves: [\n      [9, 113, -2.45, 7.5, 2.4],\n      [19, 115.5, -2.75, 6, 2.2],\n    ],\n  };\n  tiers.push(low);\n  return tiers;\n}\n\n// What the glazier cut at one point of the left half: a kind of glass (or\n// STONE, IRON) and two numbers that name the piece.\nfunction cell(px, py, cut, T) {\n  const u = X0 - px;\n  const side = WH - u;\n  const bottom = 127 - py;\n  let d = Math.min(side, bottom);\n  const arch = py \u003c YS;\n  if (arch) d = Math.min(d, R - Math.hypot(WH + u, YS - py));\n  if (d \u003c= 0) return [STONE, 0, 0];\n  // The border of small square quarries and the white pearled fillet inside it.\n  if (d \u003c= 6.2) {\n    const fillet = d > 4.2;\n    const len = fillet ? 3 : 5 - 1.5 * cut;\n    let part;\n    let i;\n    if (arch) {\n      const rr = R - d;\n      const top = Math.atan2(Math.sqrt(rr * rr - WH * WH), WH);\n      i = Math.floor(((top - Math.atan2(YS - py, WH + u)) * rr) / len + 0.5);\n      part = 0;\n    } else if (side \u003c bottom) {\n      i = Math.floor((py - YS) / len);\n      part = 1;\n    } else {\n      i = Math.floor(u / len + 0.5);\n      part = 2;\n    }\n    if (fillet) return [WHITE, 10 + part, i];\n    return [i % 2 ? GOLD : RUBY, 20 + part, i];\n  }\n  for (const yb of BARS) if (py >= yb && py \u003c yb + 1) return [IRON, 0, 0];\n\n  // The rose: a gold boss, petals, a ring of pearls and a rim.\n  const ry = py - ROSE_Y;\n  const rr = Math.hypot(u, ry);\n  if (rr \u003c ROSE_R) {\n    const th = Math.atan2(u, -ry);\n    if (rr \u003c 3) return [GOLD, 30, 0];\n    const n1 = cut \u003c 0.5 ? 8 : 12;\n    const s1 = TAU / n1;\n    if (rr \u003c 11) {\n      const k = Math.floor(th / s1 + 0.5);\n      const t = Math.abs(th - k * s1) / (s1 / 2);\n      if (rr \u003c 3 + 8 * Math.sqrt(Math.max(0, 1 - t * t))) return [RUBY, 31, k];\n      return [SKY, 32, Math.floor(th / s1)];\n    }\n    const n2 = cut \u003c 0.5 ? 16 : 24;\n    const k2 = Math.floor(th / (TAU / n2) + 0.5);\n    if (rr \u003c 13.6) return [k2 % 2 ? WHITE : GOLD, 33, k2];\n    return [k2 % 2 ? VIOLET : EMERALD, 34, k2];\n  }\n\n  // The tree.\n  for (let ti = 0; ti \u003c T.length; ti++) {\n    const tier = T[ti];\n    const [b0, b1, b2, b3] = tier.box;\n    if (u \u003c b0 || u > b2 || py \u003c b1 || py > b3) continue;\n    if (tier.flower) {\n      const [fu, fy, fr, kind] = tier.flower;\n      const du = u - fu;\n      const dy = py - fy;\n      const f = Math.hypot(du, dy);\n      if (f \u003c fr + 0.5) {\n        if (f \u003c 2.1) return [GOLD, 40 + ti, 0];\n        const a = Math.atan2(du, -dy);\n        const n = cut \u003c 0.5 ? 5 : 7;\n        const k = Math.floor(((a / TAU) * n + n + 0.5) % n);\n        const c = Math.abs(Math.cos((a * n) / 2));\n        if (f \u003c fr * (0.74 + 0.26 * c)) return [kind, 44 + ti, k];\n      }\n    }\n    for (let li = 0; li \u003c tier.leaves.length; li++) {\n      const [lu, ly, al, la, lb] = tier.leaves[li];\n      const du = u - lu;\n      const dy = py - ly;\n      const q1 = (du * Math.cos(al) + dy * Math.sin(al)) / la;\n      const q2 = (-du * Math.sin(al) + dy * Math.cos(al)) / lb;\n      if (Math.abs(q1) \u003c 1 && Math.abs(q2) \u003c 1 - q1 * q1) {\n        const half = cut >= 0.5 && q2 \u003c 0 ? 1 : 0;\n        return [(li + ti) % 2 ? LEAF : EMERALD, 50 + ti * 8 + li * 2 + half, 0];\n      }\n    }\n    const pts = tier.pts;\n    for (let i = 1; i \u003c pts.length; i++) {\n      const [ax, ay, al] = pts[i - 1];\n      const [bx, by] = pts[i];\n      const vx = bx - ax;\n      const vy = by - ay;\n      const t = clamp(((u - ax) * vx + (py - ay) * vy) / (vx * vx + vy * vy), 0, 1);\n      if (Math.hypot(u - ax - t * vx, py - ay - t * vy) \u003c 2) {\n        const s = al + t * Math.hypot(vx, vy);\n        return [GOLD, 70 + ti, Math.floor(s / (8 - 3 * cut))];\n      }\n    }\n  }\n  // The trunk, rooted in the mound and reaching up into the rose.\n  const mound = 117.5 + 0.009 * u * u;\n  if (py > ROSE_Y && py \u003c mound + 1 && u \u003c 1.9 + 1.6 * clamp((py - 56) / 62, 0, 1)) return [STEM, 80, Math.floor((py - 56) / (9 - 3 * cut))];\n  if (py >= mound) {\n    const row = Math.floor((py - mound) / 3.2);\n    const col = Math.floor((u + (row % 2) * 3) / (7 - 2 * cut));\n    return [(row + col) % 2 ? LEAF : EMERALD, 90 + row, col];\n  }\n\n  // The ground: diamond quarries of cobalt, here and there sky blue or violet.\n  const q = 7 - 3 * cut;\n  const a = Math.floor((u + py) / q);\n  const b = Math.floor((py - u) / q);\n  const h = (((a * 73856093) ^ (b * 19349663)) >>> 0) % 13;\n  return [h \u003c 2 ? SKY : h === 2 ? VIOLET : COBALT, 100 + (a & 1023), b + 512];\n}\n\nfunction build(P, cut) {\n  P.cut = cut;\n  const T = tree();\n  const key = new Float64Array(HALF * H);\n  const kind = new Int8Array(HALF * H);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c HALF; x++) {\n      const [k, a, b] = cell(x + 0.5, y + 0.5, cut, T);\n      kind[y * HALF + x] = k;\n      key[y * HALF + x] = k \u003c 0 ? k : (k * 1000 + a) * 4096 + b + 2048;\n    }\n  // A lead came runs along every join: the LED on the left of or above a join\n  // between two pieces becomes lead.\n  const lead = new Uint8Array(HALF * H);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c HALF; x++) {\n      const p = y * HALF + x;\n      if (kind[p] \u003c 0) continue;\n      if ((x \u003c HALF - 1 && key[p + 1] !== key[p]) || (y \u003c H - 1 && key[p + HALF] !== key[p])) lead[p] = 1;\n    }\n  // Pieces that reach the axis are one piece with their mirror image.\n  const central = new Set();\n  for (let y = 0; y \u003c H; y++) if (!lead[y * HALF + HALF - 1]) central.add(key[y * HALF + HALF - 1]);\n  const ids = new Int32Array(N);\n  const index = new Map();\n  const kinds = [];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const left = x \u003c HALF;\n      const p = y * HALF + (left ? x : W - 1 - x);\n      if (kind[p] \u003c 0) ids[y * W + x] = kind[p];\n      else if (lead[p]) ids[y * W + x] = LEAD;\n      else {\n        const k = left || central.has(key[p]) ? key[p] : -key[p] - 1;\n        let id = index.get(k);\n        if (id === undefined) {\n          id = kinds.length;\n          index.set(k, id);\n          kinds.push(kind[p]);\n        }\n        ids[y * W + x] = id;\n      }\n    }\n  const n = kinds.length;\n  const cx = new Float32Array(n);\n  const cy = new Float32Array(n);\n  const count = new Float32Array(n);\n  for (let p = 0; p \u003c N; p++) {\n    const id = ids[p];\n    if (id \u003c 0) continue;\n    cx[id] += p % W;\n    cy[id] += Math.floor(p / W);\n    count[id]++;\n  }\n  // Each piece is its own sheet: a little lighter or darker and warmer or\n  // cooler than its neighbours, with faint streaks running one way across it.\n  const tint = new Float32Array(n * 3);\n  const streak = new Float32Array(n * 3);\n  for (let i = 0; i \u003c n; i++) {\n    cx[i] = cx[i] / count[i] + 0.5;\n    cy[i] = cy[i] / count[i] + 0.5;\n    const v = 0.84 + 0.16 * Math.random();\n    for (let c = 0; c \u003c 3; c++) tint[i * 3 + c] = v * (0.94 + 0.12 * Math.random());\n    const ang = Math.random() * Math.PI;\n    streak[i * 3] = (Math.cos(ang) * TAU) / 10;\n    streak[i * 3 + 1] = (Math.sin(ang) * TAU) / 10;\n    streak[i * 3 + 2] = Math.random() * TAU;\n  }\n  // Antique glass is uneven: per LED a speck of grain, along the streaks a\n  // ripple of 2.5 levels, and now and then a seed of trapped air.\n  const tex = new Int8Array(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    const id = ids[p];\n    const x = p % W;\n    const y = Math.floor(p / W);\n    if (id \u003c 0) {\n      for (let c = 0; c \u003c 3; c++) tex[p * 3 + c] = Math.floor(Math.random() * 3) - 1;\n      continue;\n    }\n    const s = 2.5 * Math.sin(x * streak[id * 3] + y * streak[id * 3 + 1] + streak[id * 3 + 2]);\n    const seed = Math.random() \u003c 0.012 ? 7 : 0;\n    for (let c = 0; c \u003c 3; c++) tex[p * 3 + c] = Math.round(s + seed) + Math.floor(Math.random() * 5) - 2;\n  }\n  Object.assign(P, { ids, kinds, cx, cy, tint, tex, n, col: new Float32Array(n * 3) });\n}\n\nexport function setup(params) {\n  const P = params;\n  P.tau = 0;\n  P.started = false;\n  P.cut = -1;\n  P.hue = -1;\n  P.palette = GLASS;\n  P.noise = new Float32Array(24 * 12);\n  for (let i = 0; i \u003c P.noise.length; i++) P.noise[i] = Math.random();\n}\n\n// The light behind a point of the window: the sky, the sun's glow and the\n// cloud shadows, from about 0.3 to 1, and how much of it is the sun.\nfunction light(P, x, y) {\n  const g = Math.exp(-((x - P.sx) ** 2 + (y - P.sy) ** 2) / (2 * 24 * 24)) * P.sunClear;\n  let shade = 0;\n  for (const c of P.clouds) shade += c.dark * Math.exp(-(((x - c.x) / c.rx) ** 2 + ((y - c.y) / c.ry) ** 2));\n  // Cumulus is lumpy: its shadow is mottled in puffs about 11 LEDs across\n  // that travel with the wind.\n  if (shade > 0.01) shade *= 0.15 + 1.4 * puff(P, x - P.wind, y);\n  shade = Math.min(0.55, shade);\n  const sky = P.skyLight * (1 - 0.1 * (y / H));\n  return [(sky + (1 - sky) * g) * (1 - shade), g * (1 - shade)];\n}\n\n// Smooth value noise on a 24 by 12 lattice of 11 LED cells, wrapping.\nfunction puff(P, x, y) {\n  const gx = x / 11;\n  const gy = y / 11;\n  const ix = Math.floor(gx);\n  const iy = Math.floor(gy);\n  const fx = gx - ix;\n  const fy = gy - iy;\n  const sx = fx * fx * (3 - 2 * fx);\n  const sy = fy * fy * (3 - 2 * fy);\n  const at = (i, j) => P.noise[(((j % 12) + 12) % 12) * 24 + (((i % 24) + 24) % 24)];\n  const a = at(ix, iy) + (at(ix + 1, iy) - at(ix, iy)) * sx;\n  const b = at(ix, iy + 1) + (at(ix + 1, iy + 1) - at(ix, iy + 1)) * sx;\n  return a + (b - a) * sy;\n}\n\n// The sun and the clouds at time tau (seconds at Speed 2).\nfunction sky(P, cloudy) {\n  const tau = P.tau;\n  // The sun crosses a 160 LED stretch of sky in 64 s, low at the sides and\n  // highest over the rose, then comes round again unseen.\n  const sx = ((tau * 2.5 + 23) % 160) - 48;\n  P.sx = sx;\n  P.sy = 36 + 0.006 * (sx - X0) * (sx - X0);\n  // Clouds drift right at 18 LEDs a second through a 280 LED loop, each two\n  // puffs. The first is always there; more come in as Clouds turns up.\n  P.clouds = [];\n  P.wind = tau * 18;\n  const C = [\n    [61.5, 48, 24, 38, 0.5],\n    [131, 24, 20, 26, 0.5],\n    [201, 100, 26, 30, 0.5],\n    [271, 72, 18, 44, 0.55],\n    [26, 16, 30, 24, 0.5],\n    [166, 114, 22, 22, 0.5],\n  ];\n  for (let i = 0; i \u003c C.length; i++) {\n    const [x0, y, rx, ry, dark] = C[i];\n    const w = i === 0 ? 1 : clamp(cloudy * 6 - i + 0.6, 0, 1);\n    if (w \u003c= 0) continue;\n    const x = ((x0 + tau * 18) % 280) - 70;\n    const dk = dark * w * (0.85 + 0.4 * cloudy);\n    const yy = y + 5 * Math.sin(tau * 0.07 + i);\n    P.clouds.push({ x, y: yy, rx, ry, dark: dk });\n    P.clouds.push({ x: x - rx * 0.9, y: yy + ry * 0.45, rx: rx * 0.7, ry: ry * 0.6, dark: dk * 0.6 });\n  }\n  // A cloud over the sun takes its glow, and an overcast sky takes some of it\n  // anyway and turns the daylight grey and cool.\n  let over = 0;\n  for (const c of P.clouds) over += c.dark * 1.6 * Math.exp(-(((P.sx - c.x) / c.rx) ** 2 + ((P.sy - c.y) / c.ry) ** 2));\n  P.sunClear = clamp(1 - over, 0, 1) * (1 - 0.75 * cloudy);\n  P.skyLight = 0.64 - 0.12 * cloudy;\n  P.cool = cloudy;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const cut = Math.round(clamp((k[2] - 1) / 3, 0, 1) * 6) / 6;\n  P.cloudy = clamp(k[3], 0, 1);\n  if (cut !== P.cut) build(P, cut);\n  if (hue !== P.hue) {\n    P.hue = hue;\n    P.palette = GLASS.map((c) => rotateHue(c, hue));\n  }\n  // The window opens with the sun just inside its left edge and the first\n  // cloud coming up behind it, ten seconds further on at the knob's speed,\n  // so the opening light already differs from one Speed to the next.\n  if (!P.started) {\n    P.started = true;\n    P.tau = 2 + 10 * speed;\n  }\n  P.tau += dt * speed;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.cut \u003c 0) return;\n  sky(P, P.cloudy);\n  const { kinds, cx, cy, tint, col, palette, ids, tex } = P;\n  // Sunlight is warm; an overcast sky is grey and a little blue.\n  const day = [1 - 0.22 * P.cool, 1 - 0.1 * P.cool, 0.94 + 0.1 * P.cool];\n  for (let i = 0; i \u003c P.n; i++) {\n    const [L, g] = light(P, cx[i], cy[i]);\n    // Where the sun stands right behind the glass it burns toward white.\n    const bloom = 0.5 * g * g * g;\n    const base = palette[kinds[i]];\n    for (let c = 0; c \u003c 3; c++) {\n      const v = base[c] * tint[i * 3 + c] * L * day[c];\n      col[i * 3 + c] = v + ((c === 2 ? 225 : 255) - v) * bloom;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const id = ids[p];\n      const c = id \u003c 0 ? DARK[id] : null;\n      const r = c ? c[0] : col[id * 3];\n      const g = c ? c[1] : col[id * 3 + 1];\n      const b = c ? c[2] : col[id * 3 + 2];\n      display.setPixel(x, y, Math.round(r) + tex[p * 3], Math.round(g) + tex[p * 3 + 1], Math.round(b) + tex[p * 3 + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Glass=0..1, Speed=0.2..3, Pieces=1..4, Clouds=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Glass","min":0,"max":1,"about":"Turns every pane round the colour wheel together, starting from the cathedral set: a cobalt ground, a ruby and gold border, ruby petals and emerald leaves."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sun and the clouds travel behind the window: at 2 the sun takes 26 s to cross it and comes round every 64 s, and a cloud shadow sweeps over in about 6 s; at 0.2 the light hardly moves."},{"name":"Pieces","min":1,"max":4,"about":"How finely the glazier cut the glass: at 1 the border squares are 5 LEDs long and the blue quarries 7 across, at 4 they are 3.5 and 4, and the rose gets 12 petals instead of 8."},{"name":"Clouds","min":0,"max":1,"about":"At 0.06 one cumulus drifts across now and then; turned up, more and darker clouds follow and hide the sun, until the window glows only in patches."}],"start":[0,2,1,0.06],"measures":{"motion":0.0274,"detail":0.1501,"edges":0.9911,"complexity":1.9492,"coverage":0.4248,"colour":0.2313,"drift":0.0531},"knobResponse":[0.1334,0.0459,0.0844,0.0693]},{"slug":"star-trails","title":"Star Trails","family":"celestial","round":12,"note":"삼각대에 세운 카메라가 셔터를 열어 둔 사이 하늘이 돌아서, 별마다 북극 둘레에 제 색의 호를 그려요. 능선 아래에는 랜턴을 켠 텐트가 있고, 가끔 떨어지는 별똥별은 궤적만큼 사진에 남아요. K1 을 누르면 별똥별이 하나 더 떨어져요.","idea":"A camera on a tripod holds its shutter open while the sky turns: every star draws an arc around the pole above a dark ridge and a lit tent.","buttons":"K1 tap sends a meteor across the frame; it stays in the picture as long as the trails do. One also falls by itself every 9 to 23 seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Star Trails\n// Family:  celestial\n// Idea:    A camera on a tripod holds its shutter open while the sky turns: every star draws an arc around the pole above a dark ridge and a lit tent.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: star-trail photographs, the long exposures that show the sky turning about the celestial pole\n// Round:   12\n// ===============================\n// @matrix 64x128\n// @knobs Facing=-1..1, Speed=0.2..3, Latitude=-1..1, Exposure=0..1\n//\n// Knob 1: Facing. Where the camera points: north in the middle, where the trails ring the pole; turned either way it swings round through east or west to the south, where the arcs rise, cross the meridian and set.\n// Knob 2: Speed. How fast the sky turns: at 2 it goes once round in 69 seconds, at the top in 46, at the bottom in eleven and a half minutes.\n// Knob 3: Latitude. Where the tripod stands: the middle is 37.5 degrees north, Seoul; down to the equator the pole sinks to the horizon and, facing east, the stars rise straight up; up to the North Pole the pole climbs overhead and the trails run level with the ground.\n// Knob 4: Exposure. How long the shutter has been open, counted in sky turned: from 80 degrees, five hours of a real night, to 340, nearly whole circles.\n// Buttons: K1 tap sends a meteor across the frame; it stays in the picture as long as the trails do. One also falls by itself every 9 to 23 seconds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The lens. One unit of tan(angle) off the axis is S LEDs, so the frame is\n// 28 degrees either side and 47 up and down.\nconst S = 60;\nconst CX = W / 2;\nconst CY = H / 2;\nconst HORIZON = 112;\n// The camera tilts up so the horizon sits HORIZON rows down.\nconst TILT = Math.atan((HORIZON - CY) / S);\nconst STARS = 460;\nconst DEG = Math.PI / 180;\n// Trails are looked over in stretches of this much hour angle before any is\n// drawn finely.\nconst COARSE = 6 * DEG;\n// Star colours by spectral class, from blue-white to red, and how often each\n// turns up among the stars bright enough to trail.\nconst CLASSES = [\n  [0.42, 0.6, 1.0, 0.18],\n  [0.82, 0.88, 1.0, 0.22],\n  [1.0, 0.92, 0.72, 0.18],\n  [1.0, 0.76, 0.4, 0.18],\n  [1.0, 0.56, 0.22, 0.16],\n  [1.0, 0.36, 0.18, 0.08],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The ridge's height above the horizon, in degrees, round the whole compass.\nfunction ridge(az) {\n  const a = az / DEG;\n  return (\n    2.2 +\n    1.6 * Math.sin(az * 2 + 0.7) +\n    1.1 * Math.sin(az * 5 + 2.1) +\n    0.5 * Math.sin(az * 11 + 0.3) +\n    (a > 300 && a \u003c 345 ? 3.5 * Math.sin(((a - 300) / 45) * Math.PI) : 0)\n  );\n}\n\n// A pine's silhouette from its foot (bx, by) up to its tip at row ty, in\n// tiers that each flare out at the bottom.\nfunction pine(ground, bx, by, ty, tiers) {\n  const height = by - ty;\n  const reach = Math.max(1.2, height * 0.26);\n  for (let y = Math.floor(ty); y \u003c= Math.ceil(by); y++) {\n    if (y \u003c 0 || y >= H) continue;\n    const k = (y - ty) / height;\n    let half = 0.5;\n    if (k \u003c 0.88) {\n      const crown = k / 0.88;\n      const tier = (crown * tiers) % 1;\n      half = Math.max(0.5, (0.2 + 0.8 * crown) * reach * (0.5 + 0.5 * tier));\n    }\n    for (let x = Math.round(bx - half); x \u003c= Math.round(bx + half - 0.01); x++) if (x >= 0 && x \u003c W) ground[y * W + x] = 1;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  // Stars spread evenly over the sphere: declination and right ascension.\n  P.sinDec = new Float32Array(STARS);\n  P.cosDec = new Float32Array(STARS);\n  P.ra = new Float32Array(STARS);\n  P.bright = new Float32Array(STARS);\n  P.col = new Float32Array(STARS * 3);\n  for (let i = 0; i \u003c STARS; i++) {\n    let sd = hash(i, 1) * 2 - 1;\n    let ra = hash(i, 2) * Math.PI * 2;\n    if (i === 0) {\n      // Polaris, three quarters of a degree off the pole.\n      sd = Math.sin(89.26 * DEG);\n      ra = 0.66;\n    }\n    P.sinDec[i] = sd;\n    P.cosDec[i] = Math.sqrt(1 - sd * sd);\n    P.ra[i] = ra;\n    const m = hash(i, 3);\n    P.bright[i] = i === 0 ? 0.95 : 0.2 + 0.8 * m * m * m * m;\n    let pick = hash(i, 4);\n    let c = CLASSES[0];\n    for (const k of CLASSES) {\n      c = k;\n      pick -= k[3];\n      if (pick \u003c 0) break;\n    }\n    if (i === 0) c = CLASSES[2];\n    P.col[i * 3] = c[0];\n    P.col[i * 3 + 1] = c[1];\n    P.col[i * 3 + 2] = c[2];\n  }\n  P.acc = new Float32Array(N * 3);\n  P.pt = [0, 0];\n  P.prev = [0, 0];\n  P.sky = new Float32Array(N * 3);\n  P.ground = new Uint8Array(N);\n  P.lastFacing = NaN;\n  P.clock = 0;\n  P.turn = 0.4;\n  P.meteors = [];\n  P.nextMeteor = 3;\n  P.tapCount = 0;\n}\n\n// The camera's three axes in north, east, up.\nfunction camera(P, facing) {\n  const az = facing;\n  const ce = Math.cos(TILT);\n  const se = Math.sin(TILT);\n  P.f = [ce * Math.cos(az), ce * Math.sin(az), se];\n  P.r = [-Math.sin(az), Math.cos(az), 0];\n  P.u = [-se * Math.cos(az), -se * Math.sin(az), ce];\n}\n\n// A direction in north, east, up to a spot on the panel, or false behind the lens.\nfunction project(P, n, e, up, out) {\n  const f = P.f;\n  const r = P.r;\n  const u = P.u;\n  const z = n * f[0] + e * f[1] + up * f[2];\n  if (z \u003c 0.2) return false;\n  out[0] = CX + (S * (n * r[0] + e * r[1])) / z;\n  out[1] = CY - (S * (n * u[0] + e * u[1] + up * u[2])) / z;\n  return true;\n}\n\n// The landscape and the sky behind the stars; they change only when the\n// camera turns.\nfunction buildBackdrop(P, facing) {\n  camera(P, facing);\n  const sky = P.sky;\n  const ground = P.ground;\n  ground.fill(0);\n  const f = P.f;\n  const r = P.r;\n  const u = P.u;\n  // The ridge top for each column.\n  const top = new Float32Array(W);\n  const pt = [0, 0];\n  for (let x = 0; x \u003c W; x++) {\n    const px = (x + 0.5 - CX) / S;\n    const py = -(HORIZON - CY) / S;\n    const n = f[0] + r[0] * px + u[0] * py;\n    const e = f[1] + r[1] * px + u[1] * py;\n    let az = Math.atan2(e, n);\n    if (az \u003c 0) az += Math.PI * 2;\n    const h = ridge(az) * DEG;\n    const len = Math.hypot(n, e);\n    project(P, (n / len) * Math.cos(h), (e / len) * Math.cos(h), Math.sin(h), pt);\n    top[x] = pt[1];\n  }\n  // Pines: a row of small ones along the ridge, and three tall ones on the\n  // near ground. Each stands at its own bearing, so they slide past as the\n  // camera turns.\n  for (let t = 0; t \u003c 34; t++) {\n    const near = t \u003c 3;\n    const az = near ? [-17, 13, 158][t] * DEG : hash(t, 21) * Math.PI * 2;\n    const tall = (near ? 13 + 7 * hash(t, 22) : 2 + 5 * hash(t, 22)) * DEG;\n    const base = near ? -4.5 * DEG : ridge(az) * DEG - 0.8 * DEG;\n    if (!project(P, Math.cos(az) * Math.cos(base), Math.sin(az) * Math.cos(base), Math.sin(base), pt)) continue;\n    const bx = pt[0];\n    const by = pt[1];\n    project(P, Math.cos(az) * Math.cos(base + tall), Math.sin(az) * Math.cos(base + tall), Math.sin(base + tall), pt);\n    pine(ground, bx, by, pt[1], near ? 4 : 3);\n  }\n  for (let x = 0; x \u003c W; x++) for (let y = Math.max(0, Math.round(top[x])); y \u003c H; y++) ground[y * W + x] = 1;\n  // The tent, pitched on the near ground a little west of north.\n  P.tent = null;\n  const taz = -6 * DEG;\n  const talt = -3.6 * DEG;\n  if (project(P, Math.cos(taz) * Math.cos(talt), Math.sin(taz) * Math.cos(talt), Math.sin(talt), pt)) P.tent = [pt[0], pt[1]];\n\n  // Sky: deep blue overhead, paler at the horizon, and the glow of a town\n  // far off to the east-south-east.\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const px = (x + 0.5 - CX) / S;\n      const py = (CY - y - 0.5) / S;\n      const n = f[0] + r[0] * px + u[0] * py;\n      const e = f[1] + r[1] * px + u[1] * py;\n      const up = f[2] + u[2] * py;\n      const len = Math.hypot(n, e, up);\n      const alt = Math.asin(up / len);\n      const az = Math.atan2(e, n);\n      const lowness = Math.exp(-Math.max(0, alt) / (14 * DEG));\n      const townAz = Math.cos(az - 110 * DEG);\n      const town = Math.max(0, townAz) ** 6 * Math.exp(-Math.max(0, alt) / (9 * DEG));\n      const o = (y * W + x) * 3;\n      sky[o] = 0.006 + 0.03 * lowness + 0.2 * town;\n      sky[o + 1] = 0.01 + 0.05 * lowness + 0.1 * town;\n      sky[o + 2] = 0.04 + 0.09 * lowness + 0.03 * town;\n    }\n  }\n  P.lastFacing = facing;\n}\n\nfunction splat(acc, x, y, w, r, g, b) {\n  const x0 = Math.floor(x - 0.5);\n  const y0 = Math.floor(y - 0.5);\n  const fx = x - 0.5 - x0;\n  const fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++) {\n    const yy = y0 + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    const wy = j ? fy : 1 - fy;\n    for (let i = 0; i \u003c 2; i++) {\n      const xx = x0 + i;\n      if (xx \u003c 0 || xx >= W) continue;\n      const k = w * wy * (i ? fx : 1 - fx);\n      const o = (yy * W + xx) * 3;\n      acc[o] += k * r;\n      acc[o + 1] += k * g;\n      acc[o + 2] += k * b;\n    }\n  }\n}\n\n// A meteor starts somewhere in the upper sky and falls 20 to 55 degrees off\n// level, to the left or the right.\nfunction newMeteor(P, bright) {\n  const s = P.tapCount++ * 7 + 101;\n  const ang = (20 + 35 * hash(s, 3)) * DEG;\n  const side = hash(s, 6) \u003c 0.5 ? 1 : -1;\n  P.meteors.push({\n    x0: side > 0 ? 4 + hash(s, 1) * 30 : W - 4 - hash(s, 1) * 30,\n    y0: 6 + hash(s, 2) * 56,\n    dx: Math.cos(ang) * side,\n    dy: Math.sin(ang),\n    len: 30 + 26 * hash(s, 5),\n    age: 0,\n    bright,\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // North sits at the middle of the knob; either end is due south.\n  const facing = k[0] * Math.PI;\n  const v = k[2];\n  const lat = (v \u003c 0 ? 37.5 * (1 + v) : 37.5 + 52.5 * v) * DEG;\n  if (facing !== P.lastFacing) buildBackdrop(P, facing);\n  P.lat = lat;\n  // The lantern in the tent wavers a little.\n  P.clock += dt;\n  const c = P.clock;\n  P.lamp = 0.86 + 0.06 * Math.sin(c * 2.3) + 0.05 * Math.sin(c * 5.1 + 1) + 0.03 * Math.sin(c * 11.7 + 2);\n  P.omega = k[1] * 2.6 * DEG;\n  P.turn += dt * P.omega;\n  P.span = (80 + 260 * k[3]) * DEG;\n  // How long the shutter has been open, in seconds, for anything that is\n  // not a star.\n  P.open = P.span / Math.max(P.omega, 1e-4);\n  if (input.btnPressed && input.btnPressed[0]) newMeteor(P, 1);\n  P.nextMeteor -= dt;\n  if (P.nextMeteor \u003c= 0) {\n    newMeteor(P, 0.7);\n    P.nextMeteor = 9 + 14 * hash(P.tapCount, 9);\n  }\n  for (const m of P.meteors) m.age += dt;\n  P.meteors = P.meteors.filter((m) => m.age \u003c Math.min(P.open, 60));\n}\n\n// One star's trail from hour angle `from` to `to`. The samples sit at whole\n// multiples of a step of about two thirds of an LED, so they stay put on the\n// panel as the sky turns and a trail does not shimmer along its length; only\n// its two ends move.\nfunction strand(P, acc, i, from, to, tail, head, sphi, cphi) {\n  const sd = P.sinDec[i];\n  const cd = P.cosDec[i];\n  const bright = P.bright[i];\n  const cr = P.col[i * 3];\n  const cg = P.col[i * 3 + 1];\n  const cb = P.col[i * 3 + 2];\n  const span = head - tail;\n  const da = Math.min(COARSE, 0.65 / (S * Math.max(cd, 0.004) * 1.3));\n  const pt = P.pt;\n  const prev = P.prev;\n  let a = Math.ceil(from / da) * da;\n  let ch = Math.cos(a);\n  let sh = Math.sin(a);\n  const cs = Math.cos(da);\n  const ss = Math.sin(da);\n  let have = false;\n  const deposit = (age) => {\n    if (have) {\n      const len = Math.hypot(pt[0] - prev[0], pt[1] - prev[1]);\n      // The trail fades in over its oldest sixth.\n      if (len \u003c 4 && pt[0] > -2 && pt[0] \u003c W + 2 && pt[1] > -2 && pt[1] \u003c H + 2) splat(acc, pt[0], pt[1], bright * len * Math.min(1, age * 6), cr, cg, cb);\n    }\n    prev[0] = pt[0];\n    prev[1] = pt[1];\n    have = true;\n  };\n  for (; a \u003c= to; a += da) {\n    const up = sphi * sd + cphi * cd * ch;\n    if (up > -0.02 && project(P, cphi * sd - sphi * cd * ch, -cd * sh, up, pt)) deposit((a - tail) / span);\n    else have = false;\n    const c2 = ch * cs - sh * ss;\n    sh = sh * cs + ch * ss;\n    ch = c2;\n  }\n  if (to \u003c head) return;\n  // The last bit up to the star itself, and the star where it is now.\n  const hc = Math.cos(head);\n  const up = sphi * sd + cphi * cd * hc;\n  if (up > -0.02 && project(P, cphi * sd - sphi * cd * hc, -cd * Math.sin(head), up, pt)) {\n    deposit(1);\n    if (pt[0] > -2 && pt[0] \u003c W + 2 && pt[1] > -2 && pt[1] \u003c H + 2) splat(acc, pt[0], pt[1], bright * 0.7, cr, cg, cb);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const acc = P.acc;\n  acc.fill(0);\n  const sphi = Math.sin(P.lat);\n  const cphi = Math.cos(P.lat);\n  const span = P.span;\n  const pt = [0, 0];\n  const ends = new Uint8Array(Math.ceil(span / COARSE) + 2);\n  for (let i = 0; i \u003c STARS; i++) {\n    const sd = P.sinDec[i];\n    const cd = P.cosDec[i];\n    const head = P.turn - P.ra[i];\n    const tail = head - span;\n    // A coarse pass finds the stretches of the trail in or near the frame;\n    // only those are drawn finely.\n    const steps = Math.ceil(span / COARSE);\n    for (let s = 0; s \u003c= steps; s++) {\n      const a = Math.min(head, tail + s * COARSE);\n      const ch = Math.cos(a);\n      const up = sphi * sd + cphi * cd * ch;\n      const n = cphi * sd - sphi * cd * ch;\n      const e = -cd * Math.sin(a);\n      ends[s] = up > -0.08 && project(P, n, e, up, pt) && pt[0] > -12 && pt[0] \u003c W + 12 && pt[1] > -12 && pt[1] \u003c HORIZON + 6 ? 1 : 0;\n    }\n    let from = NaN;\n    for (let s = 0; s \u003c= steps; s++) {\n      const near = s \u003c steps && (ends[s] || ends[s + 1]);\n      if (near && Number.isNaN(from)) from = tail + s * COARSE;\n      if (!near && !Number.isNaN(from)) {\n        strand(P, acc, i, from, Math.min(head, tail + s * COARSE), tail, head, sphi, cphi);\n        from = NaN;\n      }\n    }\n  }\n\n  // Meteors: they streak in over a third of a second, stay as long as the\n  // trails remember and fade out the way a trail's oldest sixth does.\n  for (const m of P.meteors) {\n    const grow = Math.min(1, m.age / 0.35);\n    const fade = Math.min(1, (1 - m.age / Math.min(P.open, 60)) * 6);\n    const len = m.len * grow;\n    for (let d = 0; d \u003c len; d += 0.5) {\n      const t = d / m.len;\n      const x = m.x0 + m.dx * d;\n      const y = m.y0 + m.dy * d;\n      if (y > HORIZON) break;\n      // Warm where it struck the air, green-white at the head.\n      const w = 0.6 * m.bright * fade * Math.sin(Math.PI * Math.min(1, t * 1.1));\n      splat(acc, x, y, w, 0.55 + 0.45 * (1 - t), 1.0, 0.55 + 0.35 * t);\n    }\n  }\n\n  const sky = P.sky;\n  const ground = P.ground;\n  const tent = P.tent;\n  const lamp = P.lamp;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let r;\n      let g;\n      let b;\n      if (ground[p]) {\n        r = 0.004;\n        g = 0.005;\n        b = 0.012;\n      } else {\n        r = sky[o] + acc[o];\n        g = sky[o + 1] + acc[o + 1];\n        b = sky[o + 2] + acc[o + 2];\n      }\n      if (tent) {\n        const dx = x + 0.5 - tent[0];\n        const dy = y + 0.5 - tent[1];\n        // The tent: a lit orange triangle six LEDs high with its door flap\n        // open on the lantern, and the light on the grass in front.\n        if (dy \u003c= 0 && dy > -6 && Math.abs(dx) \u003c (dy + 6) * 0.8) {\n          const door = dy > -3 && Math.abs(dx) \u003c (dy + 3) * 0.55 + 0.3;\n          r = (door ? 1.6 : 0.62) * lamp;\n          g = (door ? 1.15 : 0.27) * lamp;\n          b = (door ? 0.45 : 0.07) * lamp;\n        } else if (ground[p]) {\n          const glow = Math.exp(-(dx * dx * 0.04 + dy * dy * 0.18)) * 0.22 * lamp;\n          r += glow;\n          g += glow * 0.45;\n          b += glow * 0.12;\n        }\n      }\n      // A soft shoulder instead of a hard clip where trails pile up at the pole.\n      display.setPixel(x, y, 255 * (1 - Math.exp(-r * 1.6)) * 1.25, 255 * (1 - Math.exp(-g * 1.6)) * 1.25, 255 * (1 - Math.exp(-b * 1.6)) * 1.25);\n    }\n  }\n}\n","layer":{"id":"layer-star-trails","type":"code","name":"star-trails","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Star Trails\n// Family:  celestial\n// Idea:    A camera on a tripod holds its shutter open while the sky turns: every star draws an arc around the pole above a dark ridge and a lit tent.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: star-trail photographs, the long exposures that show the sky turning about the celestial pole\n// Round:   12\n// ===============================\n// @matrix 64x128\n// @knobs Facing=-1..1, Speed=0.2..3, Latitude=-1..1, Exposure=0..1\n//\n// Knob 1: Facing. Where the camera points: north in the middle, where the trails ring the pole; turned either way it swings round through east or west to the south, where the arcs rise, cross the meridian and set.\n// Knob 2: Speed. How fast the sky turns: at 2 it goes once round in 69 seconds, at the top in 46, at the bottom in eleven and a half minutes.\n// Knob 3: Latitude. Where the tripod stands: the middle is 37.5 degrees north, Seoul; down to the equator the pole sinks to the horizon and, facing east, the stars rise straight up; up to the North Pole the pole climbs overhead and the trails run level with the ground.\n// Knob 4: Exposure. How long the shutter has been open, counted in sky turned: from 80 degrees, five hours of a real night, to 340, nearly whole circles.\n// Buttons: K1 tap sends a meteor across the frame; it stays in the picture as long as the trails do. One also falls by itself every 9 to 23 seconds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The lens. One unit of tan(angle) off the axis is S LEDs, so the frame is\n// 28 degrees either side and 47 up and down.\nconst S = 60;\nconst CX = W / 2;\nconst CY = H / 2;\nconst HORIZON = 112;\n// The camera tilts up so the horizon sits HORIZON rows down.\nconst TILT = Math.atan((HORIZON - CY) / S);\nconst STARS = 460;\nconst DEG = Math.PI / 180;\n// Trails are looked over in stretches of this much hour angle before any is\n// drawn finely.\nconst COARSE = 6 * DEG;\n// Star colours by spectral class, from blue-white to red, and how often each\n// turns up among the stars bright enough to trail.\nconst CLASSES = [\n  [0.42, 0.6, 1.0, 0.18],\n  [0.82, 0.88, 1.0, 0.22],\n  [1.0, 0.92, 0.72, 0.18],\n  [1.0, 0.76, 0.4, 0.18],\n  [1.0, 0.56, 0.22, 0.16],\n  [1.0, 0.36, 0.18, 0.08],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The ridge's height above the horizon, in degrees, round the whole compass.\nfunction ridge(az) {\n  const a = az / DEG;\n  return (\n    2.2 +\n    1.6 * Math.sin(az * 2 + 0.7) +\n    1.1 * Math.sin(az * 5 + 2.1) +\n    0.5 * Math.sin(az * 11 + 0.3) +\n    (a > 300 && a \u003c 345 ? 3.5 * Math.sin(((a - 300) / 45) * Math.PI) : 0)\n  );\n}\n\n// A pine's silhouette from its foot (bx, by) up to its tip at row ty, in\n// tiers that each flare out at the bottom.\nfunction pine(ground, bx, by, ty, tiers) {\n  const height = by - ty;\n  const reach = Math.max(1.2, height * 0.26);\n  for (let y = Math.floor(ty); y \u003c= Math.ceil(by); y++) {\n    if (y \u003c 0 || y >= H) continue;\n    const k = (y - ty) / height;\n    let half = 0.5;\n    if (k \u003c 0.88) {\n      const crown = k / 0.88;\n      const tier = (crown * tiers) % 1;\n      half = Math.max(0.5, (0.2 + 0.8 * crown) * reach * (0.5 + 0.5 * tier));\n    }\n    for (let x = Math.round(bx - half); x \u003c= Math.round(bx + half - 0.01); x++) if (x >= 0 && x \u003c W) ground[y * W + x] = 1;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  // Stars spread evenly over the sphere: declination and right ascension.\n  P.sinDec = new Float32Array(STARS);\n  P.cosDec = new Float32Array(STARS);\n  P.ra = new Float32Array(STARS);\n  P.bright = new Float32Array(STARS);\n  P.col = new Float32Array(STARS * 3);\n  for (let i = 0; i \u003c STARS; i++) {\n    let sd = hash(i, 1) * 2 - 1;\n    let ra = hash(i, 2) * Math.PI * 2;\n    if (i === 0) {\n      // Polaris, three quarters of a degree off the pole.\n      sd = Math.sin(89.26 * DEG);\n      ra = 0.66;\n    }\n    P.sinDec[i] = sd;\n    P.cosDec[i] = Math.sqrt(1 - sd * sd);\n    P.ra[i] = ra;\n    const m = hash(i, 3);\n    P.bright[i] = i === 0 ? 0.95 : 0.2 + 0.8 * m * m * m * m;\n    let pick = hash(i, 4);\n    let c = CLASSES[0];\n    for (const k of CLASSES) {\n      c = k;\n      pick -= k[3];\n      if (pick \u003c 0) break;\n    }\n    if (i === 0) c = CLASSES[2];\n    P.col[i * 3] = c[0];\n    P.col[i * 3 + 1] = c[1];\n    P.col[i * 3 + 2] = c[2];\n  }\n  P.acc = new Float32Array(N * 3);\n  P.pt = [0, 0];\n  P.prev = [0, 0];\n  P.sky = new Float32Array(N * 3);\n  P.ground = new Uint8Array(N);\n  P.lastFacing = NaN;\n  P.clock = 0;\n  P.turn = 0.4;\n  P.meteors = [];\n  P.nextMeteor = 3;\n  P.tapCount = 0;\n}\n\n// The camera's three axes in north, east, up.\nfunction camera(P, facing) {\n  const az = facing;\n  const ce = Math.cos(TILT);\n  const se = Math.sin(TILT);\n  P.f = [ce * Math.cos(az), ce * Math.sin(az), se];\n  P.r = [-Math.sin(az), Math.cos(az), 0];\n  P.u = [-se * Math.cos(az), -se * Math.sin(az), ce];\n}\n\n// A direction in north, east, up to a spot on the panel, or false behind the lens.\nfunction project(P, n, e, up, out) {\n  const f = P.f;\n  const r = P.r;\n  const u = P.u;\n  const z = n * f[0] + e * f[1] + up * f[2];\n  if (z \u003c 0.2) return false;\n  out[0] = CX + (S * (n * r[0] + e * r[1])) / z;\n  out[1] = CY - (S * (n * u[0] + e * u[1] + up * u[2])) / z;\n  return true;\n}\n\n// The landscape and the sky behind the stars; they change only when the\n// camera turns.\nfunction buildBackdrop(P, facing) {\n  camera(P, facing);\n  const sky = P.sky;\n  const ground = P.ground;\n  ground.fill(0);\n  const f = P.f;\n  const r = P.r;\n  const u = P.u;\n  // The ridge top for each column.\n  const top = new Float32Array(W);\n  const pt = [0, 0];\n  for (let x = 0; x \u003c W; x++) {\n    const px = (x + 0.5 - CX) / S;\n    const py = -(HORIZON - CY) / S;\n    const n = f[0] + r[0] * px + u[0] * py;\n    const e = f[1] + r[1] * px + u[1] * py;\n    let az = Math.atan2(e, n);\n    if (az \u003c 0) az += Math.PI * 2;\n    const h = ridge(az) * DEG;\n    const len = Math.hypot(n, e);\n    project(P, (n / len) * Math.cos(h), (e / len) * Math.cos(h), Math.sin(h), pt);\n    top[x] = pt[1];\n  }\n  // Pines: a row of small ones along the ridge, and three tall ones on the\n  // near ground. Each stands at its own bearing, so they slide past as the\n  // camera turns.\n  for (let t = 0; t \u003c 34; t++) {\n    const near = t \u003c 3;\n    const az = near ? [-17, 13, 158][t] * DEG : hash(t, 21) * Math.PI * 2;\n    const tall = (near ? 13 + 7 * hash(t, 22) : 2 + 5 * hash(t, 22)) * DEG;\n    const base = near ? -4.5 * DEG : ridge(az) * DEG - 0.8 * DEG;\n    if (!project(P, Math.cos(az) * Math.cos(base), Math.sin(az) * Math.cos(base), Math.sin(base), pt)) continue;\n    const bx = pt[0];\n    const by = pt[1];\n    project(P, Math.cos(az) * Math.cos(base + tall), Math.sin(az) * Math.cos(base + tall), Math.sin(base + tall), pt);\n    pine(ground, bx, by, pt[1], near ? 4 : 3);\n  }\n  for (let x = 0; x \u003c W; x++) for (let y = Math.max(0, Math.round(top[x])); y \u003c H; y++) ground[y * W + x] = 1;\n  // The tent, pitched on the near ground a little west of north.\n  P.tent = null;\n  const taz = -6 * DEG;\n  const talt = -3.6 * DEG;\n  if (project(P, Math.cos(taz) * Math.cos(talt), Math.sin(taz) * Math.cos(talt), Math.sin(talt), pt)) P.tent = [pt[0], pt[1]];\n\n  // Sky: deep blue overhead, paler at the horizon, and the glow of a town\n  // far off to the east-south-east.\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const px = (x + 0.5 - CX) / S;\n      const py = (CY - y - 0.5) / S;\n      const n = f[0] + r[0] * px + u[0] * py;\n      const e = f[1] + r[1] * px + u[1] * py;\n      const up = f[2] + u[2] * py;\n      const len = Math.hypot(n, e, up);\n      const alt = Math.asin(up / len);\n      const az = Math.atan2(e, n);\n      const lowness = Math.exp(-Math.max(0, alt) / (14 * DEG));\n      const townAz = Math.cos(az - 110 * DEG);\n      const town = Math.max(0, townAz) ** 6 * Math.exp(-Math.max(0, alt) / (9 * DEG));\n      const o = (y * W + x) * 3;\n      sky[o] = 0.006 + 0.03 * lowness + 0.2 * town;\n      sky[o + 1] = 0.01 + 0.05 * lowness + 0.1 * town;\n      sky[o + 2] = 0.04 + 0.09 * lowness + 0.03 * town;\n    }\n  }\n  P.lastFacing = facing;\n}\n\nfunction splat(acc, x, y, w, r, g, b) {\n  const x0 = Math.floor(x - 0.5);\n  const y0 = Math.floor(y - 0.5);\n  const fx = x - 0.5 - x0;\n  const fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++) {\n    const yy = y0 + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    const wy = j ? fy : 1 - fy;\n    for (let i = 0; i \u003c 2; i++) {\n      const xx = x0 + i;\n      if (xx \u003c 0 || xx >= W) continue;\n      const k = w * wy * (i ? fx : 1 - fx);\n      const o = (yy * W + xx) * 3;\n      acc[o] += k * r;\n      acc[o + 1] += k * g;\n      acc[o + 2] += k * b;\n    }\n  }\n}\n\n// A meteor starts somewhere in the upper sky and falls 20 to 55 degrees off\n// level, to the left or the right.\nfunction newMeteor(P, bright) {\n  const s = P.tapCount++ * 7 + 101;\n  const ang = (20 + 35 * hash(s, 3)) * DEG;\n  const side = hash(s, 6) \u003c 0.5 ? 1 : -1;\n  P.meteors.push({\n    x0: side > 0 ? 4 + hash(s, 1) * 30 : W - 4 - hash(s, 1) * 30,\n    y0: 6 + hash(s, 2) * 56,\n    dx: Math.cos(ang) * side,\n    dy: Math.sin(ang),\n    len: 30 + 26 * hash(s, 5),\n    age: 0,\n    bright,\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // North sits at the middle of the knob; either end is due south.\n  const facing = k[0] * Math.PI;\n  const v = k[2];\n  const lat = (v \u003c 0 ? 37.5 * (1 + v) : 37.5 + 52.5 * v) * DEG;\n  if (facing !== P.lastFacing) buildBackdrop(P, facing);\n  P.lat = lat;\n  // The lantern in the tent wavers a little.\n  P.clock += dt;\n  const c = P.clock;\n  P.lamp = 0.86 + 0.06 * Math.sin(c * 2.3) + 0.05 * Math.sin(c * 5.1 + 1) + 0.03 * Math.sin(c * 11.7 + 2);\n  P.omega = k[1] * 2.6 * DEG;\n  P.turn += dt * P.omega;\n  P.span = (80 + 260 * k[3]) * DEG;\n  // How long the shutter has been open, in seconds, for anything that is\n  // not a star.\n  P.open = P.span / Math.max(P.omega, 1e-4);\n  if (input.btnPressed && input.btnPressed[0]) newMeteor(P, 1);\n  P.nextMeteor -= dt;\n  if (P.nextMeteor \u003c= 0) {\n    newMeteor(P, 0.7);\n    P.nextMeteor = 9 + 14 * hash(P.tapCount, 9);\n  }\n  for (const m of P.meteors) m.age += dt;\n  P.meteors = P.meteors.filter((m) => m.age \u003c Math.min(P.open, 60));\n}\n\n// One star's trail from hour angle `from` to `to`. The samples sit at whole\n// multiples of a step of about two thirds of an LED, so they stay put on the\n// panel as the sky turns and a trail does not shimmer along its length; only\n// its two ends move.\nfunction strand(P, acc, i, from, to, tail, head, sphi, cphi) {\n  const sd = P.sinDec[i];\n  const cd = P.cosDec[i];\n  const bright = P.bright[i];\n  const cr = P.col[i * 3];\n  const cg = P.col[i * 3 + 1];\n  const cb = P.col[i * 3 + 2];\n  const span = head - tail;\n  const da = Math.min(COARSE, 0.65 / (S * Math.max(cd, 0.004) * 1.3));\n  const pt = P.pt;\n  const prev = P.prev;\n  let a = Math.ceil(from / da) * da;\n  let ch = Math.cos(a);\n  let sh = Math.sin(a);\n  const cs = Math.cos(da);\n  const ss = Math.sin(da);\n  let have = false;\n  const deposit = (age) => {\n    if (have) {\n      const len = Math.hypot(pt[0] - prev[0], pt[1] - prev[1]);\n      // The trail fades in over its oldest sixth.\n      if (len \u003c 4 && pt[0] > -2 && pt[0] \u003c W + 2 && pt[1] > -2 && pt[1] \u003c H + 2) splat(acc, pt[0], pt[1], bright * len * Math.min(1, age * 6), cr, cg, cb);\n    }\n    prev[0] = pt[0];\n    prev[1] = pt[1];\n    have = true;\n  };\n  for (; a \u003c= to; a += da) {\n    const up = sphi * sd + cphi * cd * ch;\n    if (up > -0.02 && project(P, cphi * sd - sphi * cd * ch, -cd * sh, up, pt)) deposit((a - tail) / span);\n    else have = false;\n    const c2 = ch * cs - sh * ss;\n    sh = sh * cs + ch * ss;\n    ch = c2;\n  }\n  if (to \u003c head) return;\n  // The last bit up to the star itself, and the star where it is now.\n  const hc = Math.cos(head);\n  const up = sphi * sd + cphi * cd * hc;\n  if (up > -0.02 && project(P, cphi * sd - sphi * cd * hc, -cd * Math.sin(head), up, pt)) {\n    deposit(1);\n    if (pt[0] > -2 && pt[0] \u003c W + 2 && pt[1] > -2 && pt[1] \u003c H + 2) splat(acc, pt[0], pt[1], bright * 0.7, cr, cg, cb);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const acc = P.acc;\n  acc.fill(0);\n  const sphi = Math.sin(P.lat);\n  const cphi = Math.cos(P.lat);\n  const span = P.span;\n  const pt = [0, 0];\n  const ends = new Uint8Array(Math.ceil(span / COARSE) + 2);\n  for (let i = 0; i \u003c STARS; i++) {\n    const sd = P.sinDec[i];\n    const cd = P.cosDec[i];\n    const head = P.turn - P.ra[i];\n    const tail = head - span;\n    // A coarse pass finds the stretches of the trail in or near the frame;\n    // only those are drawn finely.\n    const steps = Math.ceil(span / COARSE);\n    for (let s = 0; s \u003c= steps; s++) {\n      const a = Math.min(head, tail + s * COARSE);\n      const ch = Math.cos(a);\n      const up = sphi * sd + cphi * cd * ch;\n      const n = cphi * sd - sphi * cd * ch;\n      const e = -cd * Math.sin(a);\n      ends[s] = up > -0.08 && project(P, n, e, up, pt) && pt[0] > -12 && pt[0] \u003c W + 12 && pt[1] > -12 && pt[1] \u003c HORIZON + 6 ? 1 : 0;\n    }\n    let from = NaN;\n    for (let s = 0; s \u003c= steps; s++) {\n      const near = s \u003c steps && (ends[s] || ends[s + 1]);\n      if (near && Number.isNaN(from)) from = tail + s * COARSE;\n      if (!near && !Number.isNaN(from)) {\n        strand(P, acc, i, from, Math.min(head, tail + s * COARSE), tail, head, sphi, cphi);\n        from = NaN;\n      }\n    }\n  }\n\n  // Meteors: they streak in over a third of a second, stay as long as the\n  // trails remember and fade out the way a trail's oldest sixth does.\n  for (const m of P.meteors) {\n    const grow = Math.min(1, m.age / 0.35);\n    const fade = Math.min(1, (1 - m.age / Math.min(P.open, 60)) * 6);\n    const len = m.len * grow;\n    for (let d = 0; d \u003c len; d += 0.5) {\n      const t = d / m.len;\n      const x = m.x0 + m.dx * d;\n      const y = m.y0 + m.dy * d;\n      if (y > HORIZON) break;\n      // Warm where it struck the air, green-white at the head.\n      const w = 0.6 * m.bright * fade * Math.sin(Math.PI * Math.min(1, t * 1.1));\n      splat(acc, x, y, w, 0.55 + 0.45 * (1 - t), 1.0, 0.55 + 0.35 * t);\n    }\n  }\n\n  const sky = P.sky;\n  const ground = P.ground;\n  const tent = P.tent;\n  const lamp = P.lamp;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let r;\n      let g;\n      let b;\n      if (ground[p]) {\n        r = 0.004;\n        g = 0.005;\n        b = 0.012;\n      } else {\n        r = sky[o] + acc[o];\n        g = sky[o + 1] + acc[o + 1];\n        b = sky[o + 2] + acc[o + 2];\n      }\n      if (tent) {\n        const dx = x + 0.5 - tent[0];\n        const dy = y + 0.5 - tent[1];\n        // The tent: a lit orange triangle six LEDs high with its door flap\n        // open on the lantern, and the light on the grass in front.\n        if (dy \u003c= 0 && dy > -6 && Math.abs(dx) \u003c (dy + 6) * 0.8) {\n          const door = dy > -3 && Math.abs(dx) \u003c (dy + 3) * 0.55 + 0.3;\n          r = (door ? 1.6 : 0.62) * lamp;\n          g = (door ? 1.15 : 0.27) * lamp;\n          b = (door ? 0.45 : 0.07) * lamp;\n        } else if (ground[p]) {\n          const glow = Math.exp(-(dx * dx * 0.04 + dy * dy * 0.18)) * 0.22 * lamp;\n          r += glow;\n          g += glow * 0.45;\n          b += glow * 0.12;\n        }\n      }\n      // A soft shoulder instead of a hard clip where trails pile up at the pole.\n      display.setPixel(x, y, 255 * (1 - Math.exp(-r * 1.6)) * 1.25, 255 * (1 - Math.exp(-g * 1.6)) * 1.25, 255 * (1 - Math.exp(-b * 1.6)) * 1.25);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Facing=-1..1, Speed=0.2..3, Latitude=-1..1, Exposure=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Facing","min":-1,"max":1,"about":"Where the camera points: north in the middle, where the trails ring the pole; turned either way it swings round through east or west to the south, where the arcs rise, cross the meridian and set."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sky turns: at 2 it goes once round in 69 seconds, at the top in 46, at the bottom in eleven and a half minutes."},{"name":"Latitude","min":-1,"max":1,"about":"Where the tripod stands: the middle is 37.5 degrees north, Seoul; down to the equator the pole sinks to the horizon and, facing east, the stars rise straight up; up to the North Pole the pole climbs overhead and the trails run level with the ground."},{"name":"Exposure","min":0,"max":1,"about":"How long the shutter has been open, counted in sky turned: from 80 degrees, five hours of a real night, to 340, nearly whole circles."}],"start":[0,2,0,0.06],"measures":{"motion":0.019,"detail":0.0909,"edges":0.5036,"complexity":1.5537,"coverage":0.563,"colour":0.1007,"drift":0.036},"knobResponse":[0.2496,0.0367,0.1859,0.2144]},{"slug":"sunglint","title":"Sunglint","family":"ocean","round":20,"note":"절벽에서 해를 마주 보면 수평선 아래로 윤슬 길이 내려오며 넓어져 패널을 채우고, 밀려오는 잔물결 줄마다 반짝임이 실려요. K1 을 누르면 돛단배가 빛 속을 검은 그림자로 가로질러요.","idea":"From a cliff you look out to sea toward the sun, and below it the glitter path of thousands of tiny glints on choppy water widens toward you until it fills the panel, each glint flashing as its wavelet tilts, while a sailboat or a pair of gulls crosses now and then.","buttons":"K1 tap sends a sloop across the glitter before the wind, its sails dark against the light. One also comes by itself every half minute or so, and gulls cross in ones and twos.","code":"// ===== Patternflow pattern =====\n// Title:   Sunglint\n// Family:  ocean\n// Idea:    From a cliff you look out to sea toward the sun, and below it the glitter path of thousands of tiny glints on choppy water widens toward you until it fills the panel, each glint flashing as its wavelet tilts, while a sailboat or a pair of gulls crosses now and then.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Chop=0..1, Wind=-1..1\n//\n// Knob 1: Sun. How high the sun stands. At 0 a high silver sun throws a broad glitter that fills the panel from a third of the way down; turned up, it sinks onto the horizon as a flattened pale gold disc, and the glitter narrows to a gold column with dark slate water either side.\n// Knob 2: Speed. How fast the water moves: at 2 a glint holds for about half a second, and the rows of wavelets that carry the glints roll in at two or three LEDs a second near your feet.\n// Knob 3: Chop. How rough the sea is. At 0 a light chop of fine wavelets whose rows run three LEDs apart under the horizon and fourteen at the foot of the panel; at 1 the wavelets grow half as big again, their rows twenty-one LEDs apart at the foot, and the path spreads wider.\n// Knob 4: Wind. Near calm at 0.06. Turned either way, a breeze from that side sets the wavelets sliding sideways and sends the gusts that thicken the glitter racing across; the cloud bars drift and the grass on the cliff edge bends with it.\n// Buttons: K1 tap sends a sloop across the glitter before the wind, its sails dark against the light. One also comes by itself every half minute or so, and gulls cross in ones and twos.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The horizon row, and the rows of sea under it.\nconst HZ = 19;\nconst SEA = H - HZ;\nconst TAU = Math.PI * 2;\nconst LUT = 1024;\nconst COS = new Float32Array(LUT);\nfor (let i = 0; i \u003c LUT; i++) COS[i] = Math.cos((i / LUT) * TAU);\nconst KL = LUT / TAU;\nconst cos = (a) => COS[(a * KL) & (LUT - 1)];\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\n// Gull wings, raised, gliding and down: seven LEDs across, the body in the\n// middle, each entry how far that column sits above or below the body.\nconst WING = [\n  [-2, -2, -1, 0, -1, -2, -2],\n  [0, -1, -1, 0, -1, -1, 0],\n  [1, 1, 0, 0, 0, 1, 1],\n];\nconst BEAT = [0, 1, 2, 1];\n\nexport function setup(params) {\n  const P = params;\n  P.ph = new Float32Array(N);\n  P.om = new Float32Array(N);\n  P.sz = new Float32Array(N);\n  P.ph2 = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) {\n    P.ph[i] = Math.random() * TAU;\n    P.om[i] = 3.5 + Math.random() * 3.5;\n    P.ph2[i] = Math.random() * TAU;\n    const u = Math.random();\n    P.sz[i] = 1 - 0.5 * u * u * u * u;\n  }\n  P.noise = new Float32Array(256);\n  for (let i = 0; i \u003c 256; i++) P.noise[i] = Math.random();\n  P.buf = new Float32Array(N * 3);\n  P.gust = new Float32Array(16 * 32);\n  for (const k of [\"R1\", \"R2\", \"R3\", \"R4\", \"R5\", \"kx\"]) P[k] = new Float32Array(H);\n  P.t = 0;\n  P.gx = 0;\n  P.cx = 0;\n  P.wx = 0;\n  P.boat = -1;\n  P.bx = 0;\n  P.bdir = 1;\n  P.nextBoat = 14 + Math.random() * 20;\n  // Grass on the cliff edge in the near left corner: base, height, sway phase.\n  P.grass = [];\n  for (let j = 0; j \u003c 18; j++) P.grass.push([Math.random() * 25, 4 + Math.random() * 6, Math.random() * TAU]);\n  P.gulls = [];\n  P.nextGull = 2 + Math.random() * 6;\n  P.started = false;\n}\n\nfunction noise(P, fx, fy) {\n  const ix = Math.floor(fx);\n  const iy = Math.floor(fy);\n  let tx = fx - ix;\n  let ty = fy - iy;\n  tx = tx * tx * (3 - 2 * tx);\n  ty = ty * ty * (3 - 2 * ty);\n  const n = P.noise;\n  const r0 = (iy & 15) * 16;\n  const r1 = ((iy + 1) & 15) * 16;\n  const a = n[r0 + (ix & 15)];\n  const b = n[r0 + ((ix + 1) & 15)];\n  return mix(mix(a, b, tx), mix(n[r1 + (ix & 15)], n[r1 + ((ix + 1) & 15)], tx), ty);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.sun = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0, 3) / 2;\n  P.chop = clamp(k[2], 0, 1);\n  P.wind = clamp(k[3], -1, 1);\n  P.started = true;\n  const step = dt * P.speed;\n  P.t += step;\n  const dir = P.wind \u003c 0 ? -1 : 1;\n  // Gusts run over the water and the cloud bars drift, both with the wind.\n  P.gx += (dir * 3 + 12 * P.wind) * step;\n  P.cx += (dir * 0.6 + 2.5 * P.wind) * step;\n  P.wx += 4 * P.wind * step;\n  if (input.btnPressed && input.btnPressed[0] && P.boat \u003c 0) {\n    P.boat = 0;\n    P.bdir = dir;\n  }\n  P.nextBoat -= dt;\n  if (P.nextBoat \u003c 0) {\n    if (P.boat \u003c 0) {\n      P.boat = 0;\n      P.bdir = dir;\n    }\n    P.nextBoat = 35 + Math.random() * 30;\n  }\n  if (P.boat >= 0) {\n    // A sloop runs before the wind, about five LEDs a second at Speed 2.\n    P.boat += step * (1 + 0.5 * Math.abs(P.wind));\n    P.bx = P.bdir > 0 ? -10 + 5 * P.boat : W + 10 - 5 * P.boat;\n    if (P.bx \u003c -12 || P.bx > W + 12) P.boat = -1;\n  }\n  P.nextGull -= dt;\n  if (P.nextGull \u003c 0) {\n    P.nextGull = 9 + Math.random() * 14;\n    const gd = Math.random() \u003c 0.5 ? -1 : 1;\n    const y = 6 + Math.random() * 34;\n    const n = Math.random() \u003c 0.5 ? 1 : 2;\n    for (let j = 0; j \u003c n; j++)\n      P.gulls.push({ x: gd > 0 ? -4 - 7 * j : W + 3 + 7 * j, y: y + 3 * j, d: gd, f: Math.random() * TAU, v: 7 + Math.random() * 3 });\n  }\n  for (const g of P.gulls) {\n    g.x += g.d * g.v * step;\n    g.y += Math.sin(g.f * 0.21) * 0.6 * step;\n    g.f += step * 7;\n  }\n  P.gulls = P.gulls.filter((g) => g.x > -12 && g.x \u003c W + 12);\n}\n\n// The sloop's silhouette: hull, mast, mainsail aft and jib forward.\nfunction boat(P, x, y, by) {\n  const d = (x - P.bx) * P.bdir;\n  const u = by - y;\n  if (u \u003c 0 || u > 13 || d \u003c -6 || d > 6) return 0;\n  if (u === 0) return d >= -3 && d \u003c= 3 ? 1 : 0;\n  if (u === 1) return d >= -4 && d \u003c= 5 ? 1 : 0;\n  if (d === 0) return 1;\n  if (u >= 2 && u \u003c= 12 && d \u003c 0 && -d \u003c= (12.5 - u) * 0.48) return 2;\n  if (u >= 2 && u \u003c= 11 && d > 0 && d \u003c= (11 - u) * 0.42) return 2;\n  return 0;\n}\n\n// The top row of the cliff edge in the near left corner.\nfunction cliff(x) {\n  return x >= 26 ? H : H - Math.round(11 * (1 - x / 26) ** 1.3 + 0.8 * Math.sin(x * 0.9));\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const sun = P.sun;\n  const chop = P.chop;\n  const T = P.t;\n  const buf = P.buf;\n  const sx = 29.5;\n  const sy = mix(7, HZ - 3.5, sun);\n  // How far under the horizon the sun's reflection falls.\n  const r0 = Math.max(2.5, HZ - sy);\n\n  // Per row: wavelets shrink toward the horizon, so their phase runs faster.\n  let a1 = 0;\n  let a2 = 0;\n  let a3 = 0;\n  let a4 = 0;\n  let a5 = 0;\n  for (let y = HZ; y \u003c H; y++) {\n    const p = (y - HZ + 1) / SEA;\n    const ly = 2 + 6 * p * (1 + chop);\n    a1 += TAU / ly;\n    a2 += TAU / (ly * 1.3);\n    a3 += TAU / (ly * 0.6);\n    a4 += TAU / Math.max(10, 2 * ly);\n    a5 += TAU / (3 + 11 * p * (1 + 0.6 * chop));\n    P.R1[y] = a1;\n    P.R2[y] = a2;\n    P.R3[y] = a3;\n    P.R4[y] = a4;\n    P.R5[y] = a5;\n    P.kx[y] = TAU / (4 + 10 * p * (1 + chop));\n  }\n  // Gusts: patches of rougher water, 4x4 LEDs a cell.\n  const gust = P.gust;\n  for (let j = 0; j \u003c 32; j++) for (let i = 0; i \u003c 16; i++) gust[j * 16 + i] = noise(P, (i * 4 - P.gx) / 7, (j * 4) / 9);\n\n  // Water colours: slate outside the path, silver in it; glints from white to pale gold.\n  const gt = [1, mix(0.94, 0.85, sun), mix(0.8, 0.56, sun)];\n  const wf = (1.8 - 0.9 * sun) * (0.85 + 0.4 * chop);\n  const L = 30 + 50 * (1 - sun);\n  const by = HZ + 30;\n  const boatOn = P.boat >= 0;\n  const PH = P.ph;\n  const OM = P.om;\n  const SZ = P.sz;\n  const PH2 = P.ph2;\n  const wx = P.wx;\n  // With the sun low the water off the path gets fewer glints, and dimmer ones.\n  const q0 = mix(0.12, 0.04, sun);\n  const g0 = mix(100, 60, sun);\n  for (let y = HZ; y \u003c H; y++) {\n    const r = y - HZ + 1;\n    const p = r / SEA;\n    const w = (2.5 + 0.55 * r) * wf;\n    const v = Math.exp(-(((r - r0) / L) ** 2));\n    const amp = 3 + 8 * Math.min(1, r / 30);\n    const kx = P.kx[y];\n    const R1 = P.R1[y];\n    const R2 = P.R2[y];\n    const R3 = P.R3[y];\n    const R4 = P.R4[y];\n    const R5 = P.R5[y];\n    const grow = (y >> 2) * 16;\n    // Toward the foot of the panel the wavelets are nearer: fewer glints, and brighter.\n    const near = 1 - 0.3 * clamp((r - 60) / 45, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const q3 = i * 3;\n      const cx = (x - sx - wx) * kx;\n      const p1 = R1 + 0.35 * cx - 1.3 * T;\n      const s = 0.5 * cos(p1) + 0.35 * cos(R2 - 0.9 * cx - T) + 0.25 * cos(R3 + 1.4 * cx - 2.1 * T);\n      const dx = (x - sx) / w;\n      const I = (0.25 + 0.75 * v) / (1 + dx * dx * dx * dx);\n      const sI = Math.sqrt(I);\n      const g = gust[grow + (x >> 2)];\n      // The water between the facets: slate outside the path, dark inside it.\n      const b = mix(44 + 10 * (1 - p) - 6 * g, 20, I) + amp * s * (1 - 0.4 * I);\n      const sv = Math.min(1, I * 1.3);\n      let rr = b * mix(0.46, 0.88, sv);\n      let gg = b * mix(0.66, 0.93, sv);\n      let bb = b;\n      // Facets sit on the band's checkerboard, so no two glints touch. Each\n      // one mirrors a little silver sky until it tilts to the sun and flashes.\n      const band = Math.floor((R4 + 0.35 * cx - 1.3 * T) * 0.3183);\n      if ((x + y + band) & 1) {\n        const m = 11 + 20 * (0.5 + 0.5 * cos(PH2[i] + 0.5 * p1));\n        rr += m * 0.86;\n        gg += m * 0.94;\n        bb += m;\n        // Rows of wavelets roll in; their faces toward the sun carry the glints.\n        const sw = 0.5 + 0.5 * cos(R5 + 0.2 * cx + 0.8 * cos(0.11 * x + 0.3 * R5) - 1.1 * T);\n        const face = clamp(0.3 + 0.95 * sw + 0.3 * s, 0, 1.25);\n        const q = clamp((q0 + 0.75 * sI) * face * (0.63 + 0.84 * g) * near, 0, 0.95);\n        const c = cos(Math.PI * q);\n        const f = cos(PH[i] + OM[i] * T + 0.9 * p1);\n        if (f > c) {\n          const lit = SZ[i] * Math.min(1, (f - c) / 0.08) * (g0 + (255 - g0) * sI);\n          rr += lit * gt[0];\n          gg += lit * gt[1];\n          bb += lit * gt[2];\n        }\n      }\n      if (boatOn && y \u003c= by + 3 && y > by - 14) {\n        const m = boat(P, x, y, by);\n        if (m) {\n          rr = m === 1 ? 8 : 22;\n          gg = m === 1 ? 10 : 24;\n          bb = m === 1 ? 14 : 32;\n        } else if (y > by && Math.abs(x - P.bx) \u003c 4) {\n          // The hull's shadow on the water under it.\n          rr *= 0.3;\n          gg *= 0.3;\n          bb *= 0.3;\n        }\n      }\n      buf[q3] = rr;\n      buf[q3 + 1] = gg;\n      buf[q3 + 2] = bb;\n    }\n  }\n\n  // Sky: a steady fall of light from the haze on the horizon to the top\n  // row, the glow round the sun, and thin cloud bars drifting with the wind.\n  const tTop = [mix(0.58, 0.66, sun), mix(0.72, 0.68, sun), 1];\n  const tLow = [mix(0.9, 1, sun), mix(0.94, 0.85, sun), mix(1, 0.64, sun)];\n  const sc = [255, mix(250, 222, sun), mix(236, 150, sun)];\n  const sr = mix(2.4, 3.8, sun);\n  const cn = P.cn || (P.cn = new Float32Array(W * 2));\n  for (let c = 0; c \u003c 2; c++) for (let x = 0; x \u003c W; x++) cn[c * W + x] = clamp(noise(P, (x - P.cx * (1 + 0.4 * c)) / 9 + c * 5, c * 3.3) * 2.4 - 1, 0, 1);\n  for (let y = 0; y \u003c HZ; y++) {\n    const vv = y / (HZ - 1);\n    const lv = 80 + 7.4 * y;\n    const tr = mix(tTop[0], tLow[0], vv);\n    const tg = mix(tTop[1], tLow[1], vv);\n    const tb = mix(tTop[2], tLow[2], vv);\n    for (let x = 0; x \u003c W; x++) {\n      const q3 = (y * W + x) * 3;\n      const dx = x - sx;\n      const dy = (y - sy) * 1.15;\n      const d = Math.sqrt(dx * dx + dy * dy);\n      const glow = 150 * Math.exp(-d / 4.5) + 60 * Math.exp(-d / 14);\n      let cl = 0;\n      for (let c = 0; c \u003c 2; c++) {\n        const e = (y - 4 - c * 6.5) / 1.2;\n        if (e > -2.5 && e \u003c 2.5) cl += Math.exp(-e * e) * cn[c * W + x];\n      }\n      cl = Math.min(1, cl);\n      // A cloud is grey against the haze, its edges silvered near the sun.\n      const lit = lv + glow * (1 - 0.5 * cl + 1.2 * cl * (1 - cl)) - 26 * cl;\n      if (d \u003c sr) {\n        buf[q3] = sc[0];\n        buf[q3 + 1] = sc[1];\n        buf[q3 + 2] = sc[2];\n      } else {\n        buf[q3] = lit * tr;\n        buf[q3 + 1] = lit * tg;\n        buf[q3 + 2] = lit * tb;\n      }\n    }\n  }\n  // A headland runs out from the left into the haze on the horizon.\n  for (let x = 0; x \u003c 15; x++) {\n    const top = HZ - Math.round(4.2 * (1 - x / 15) ** 0.8 + 0.6 * Math.sin(x * 1.3));\n    for (let y = Math.max(0, top); y \u003c HZ; y++) {\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 40;\n      buf[q3 + 1] = 46;\n      buf[q3 + 2] = 58;\n    }\n  }\n  // The cliff edge you stand on, and its grass bending in the wind.\n  const lean = 1.6 * P.wind + 0.4;\n  for (let x = 0; x \u003c 26; x++) {\n    for (let y = cliff(x); y \u003c H; y++) {\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 9;\n      buf[q3 + 1] = 12;\n      buf[q3 + 2] = 10;\n    }\n  }\n  for (const [gb, gh, gp] of P.grass) {\n    const x0 = Math.floor(gb);\n    const y0 = cliff(x0);\n    const sway = lean + 0.5 * Math.sin(T * 1.9 + gp) + 0.6 * gust[(y0 >> 2) * 16 + (x0 >> 2)];\n    for (let k = 1; k \u003c= gh; k++) {\n      const u = k / gh;\n      const x = Math.round(gb + sway * u * u * gh * 0.5);\n      const y = y0 - k;\n      if (x \u003c 0 || x >= W || y \u003c HZ) continue;\n      const q3 = (y * W + x) * 3;\n      // The tips catch the sun.\n      const tip = k === Math.ceil(gh) ? 30 : 0;\n      buf[q3] = 10 + tip * 1.4;\n      buf[q3 + 1] = 14 + tip * 1.2;\n      buf[q3 + 2] = 10 + tip * 0.7;\n    }\n  }\n  // Gulls, dark against the light.\n  for (const g of P.gulls) {\n    const wing = WING[BEAT[Math.floor(((g.f % TAU) / TAU) * 4)]];\n    for (let j = 0; j \u003c 7; j++) {\n      const x = Math.round(g.x) + j - 3;\n      const y = Math.round(g.y) + wing[j];\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 16;\n      buf[q3 + 1] = 18;\n      buf[q3 + 2] = 24;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q3 = (y * W + x) * 3;\n      display.setPixel(x, y, clamp(buf[q3], 0, 255), clamp(buf[q3 + 1], 0, 255), clamp(buf[q3 + 2], 0, 255));\n    }\n}\n","layer":{"id":"layer-sunglint","type":"code","name":"sunglint","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sunglint\n// Family:  ocean\n// Idea:    From a cliff you look out to sea toward the sun, and below it the glitter path of thousands of tiny glints on choppy water widens toward you until it fills the panel, each glint flashing as its wavelet tilts, while a sailboat or a pair of gulls crosses now and then.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Chop=0..1, Wind=-1..1\n//\n// Knob 1: Sun. How high the sun stands. At 0 a high silver sun throws a broad glitter that fills the panel from a third of the way down; turned up, it sinks onto the horizon as a flattened pale gold disc, and the glitter narrows to a gold column with dark slate water either side.\n// Knob 2: Speed. How fast the water moves: at 2 a glint holds for about half a second, and the rows of wavelets that carry the glints roll in at two or three LEDs a second near your feet.\n// Knob 3: Chop. How rough the sea is. At 0 a light chop of fine wavelets whose rows run three LEDs apart under the horizon and fourteen at the foot of the panel; at 1 the wavelets grow half as big again, their rows twenty-one LEDs apart at the foot, and the path spreads wider.\n// Knob 4: Wind. Near calm at 0.06. Turned either way, a breeze from that side sets the wavelets sliding sideways and sends the gusts that thicken the glitter racing across; the cloud bars drift and the grass on the cliff edge bends with it.\n// Buttons: K1 tap sends a sloop across the glitter before the wind, its sails dark against the light. One also comes by itself every half minute or so, and gulls cross in ones and twos.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The horizon row, and the rows of sea under it.\nconst HZ = 19;\nconst SEA = H - HZ;\nconst TAU = Math.PI * 2;\nconst LUT = 1024;\nconst COS = new Float32Array(LUT);\nfor (let i = 0; i \u003c LUT; i++) COS[i] = Math.cos((i / LUT) * TAU);\nconst KL = LUT / TAU;\nconst cos = (a) => COS[(a * KL) & (LUT - 1)];\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\n// Gull wings, raised, gliding and down: seven LEDs across, the body in the\n// middle, each entry how far that column sits above or below the body.\nconst WING = [\n  [-2, -2, -1, 0, -1, -2, -2],\n  [0, -1, -1, 0, -1, -1, 0],\n  [1, 1, 0, 0, 0, 1, 1],\n];\nconst BEAT = [0, 1, 2, 1];\n\nexport function setup(params) {\n  const P = params;\n  P.ph = new Float32Array(N);\n  P.om = new Float32Array(N);\n  P.sz = new Float32Array(N);\n  P.ph2 = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) {\n    P.ph[i] = Math.random() * TAU;\n    P.om[i] = 3.5 + Math.random() * 3.5;\n    P.ph2[i] = Math.random() * TAU;\n    const u = Math.random();\n    P.sz[i] = 1 - 0.5 * u * u * u * u;\n  }\n  P.noise = new Float32Array(256);\n  for (let i = 0; i \u003c 256; i++) P.noise[i] = Math.random();\n  P.buf = new Float32Array(N * 3);\n  P.gust = new Float32Array(16 * 32);\n  for (const k of [\"R1\", \"R2\", \"R3\", \"R4\", \"R5\", \"kx\"]) P[k] = new Float32Array(H);\n  P.t = 0;\n  P.gx = 0;\n  P.cx = 0;\n  P.wx = 0;\n  P.boat = -1;\n  P.bx = 0;\n  P.bdir = 1;\n  P.nextBoat = 14 + Math.random() * 20;\n  // Grass on the cliff edge in the near left corner: base, height, sway phase.\n  P.grass = [];\n  for (let j = 0; j \u003c 18; j++) P.grass.push([Math.random() * 25, 4 + Math.random() * 6, Math.random() * TAU]);\n  P.gulls = [];\n  P.nextGull = 2 + Math.random() * 6;\n  P.started = false;\n}\n\nfunction noise(P, fx, fy) {\n  const ix = Math.floor(fx);\n  const iy = Math.floor(fy);\n  let tx = fx - ix;\n  let ty = fy - iy;\n  tx = tx * tx * (3 - 2 * tx);\n  ty = ty * ty * (3 - 2 * ty);\n  const n = P.noise;\n  const r0 = (iy & 15) * 16;\n  const r1 = ((iy + 1) & 15) * 16;\n  const a = n[r0 + (ix & 15)];\n  const b = n[r0 + ((ix + 1) & 15)];\n  return mix(mix(a, b, tx), mix(n[r1 + (ix & 15)], n[r1 + ((ix + 1) & 15)], tx), ty);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.sun = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0, 3) / 2;\n  P.chop = clamp(k[2], 0, 1);\n  P.wind = clamp(k[3], -1, 1);\n  P.started = true;\n  const step = dt * P.speed;\n  P.t += step;\n  const dir = P.wind \u003c 0 ? -1 : 1;\n  // Gusts run over the water and the cloud bars drift, both with the wind.\n  P.gx += (dir * 3 + 12 * P.wind) * step;\n  P.cx += (dir * 0.6 + 2.5 * P.wind) * step;\n  P.wx += 4 * P.wind * step;\n  if (input.btnPressed && input.btnPressed[0] && P.boat \u003c 0) {\n    P.boat = 0;\n    P.bdir = dir;\n  }\n  P.nextBoat -= dt;\n  if (P.nextBoat \u003c 0) {\n    if (P.boat \u003c 0) {\n      P.boat = 0;\n      P.bdir = dir;\n    }\n    P.nextBoat = 35 + Math.random() * 30;\n  }\n  if (P.boat >= 0) {\n    // A sloop runs before the wind, about five LEDs a second at Speed 2.\n    P.boat += step * (1 + 0.5 * Math.abs(P.wind));\n    P.bx = P.bdir > 0 ? -10 + 5 * P.boat : W + 10 - 5 * P.boat;\n    if (P.bx \u003c -12 || P.bx > W + 12) P.boat = -1;\n  }\n  P.nextGull -= dt;\n  if (P.nextGull \u003c 0) {\n    P.nextGull = 9 + Math.random() * 14;\n    const gd = Math.random() \u003c 0.5 ? -1 : 1;\n    const y = 6 + Math.random() * 34;\n    const n = Math.random() \u003c 0.5 ? 1 : 2;\n    for (let j = 0; j \u003c n; j++)\n      P.gulls.push({ x: gd > 0 ? -4 - 7 * j : W + 3 + 7 * j, y: y + 3 * j, d: gd, f: Math.random() * TAU, v: 7 + Math.random() * 3 });\n  }\n  for (const g of P.gulls) {\n    g.x += g.d * g.v * step;\n    g.y += Math.sin(g.f * 0.21) * 0.6 * step;\n    g.f += step * 7;\n  }\n  P.gulls = P.gulls.filter((g) => g.x > -12 && g.x \u003c W + 12);\n}\n\n// The sloop's silhouette: hull, mast, mainsail aft and jib forward.\nfunction boat(P, x, y, by) {\n  const d = (x - P.bx) * P.bdir;\n  const u = by - y;\n  if (u \u003c 0 || u > 13 || d \u003c -6 || d > 6) return 0;\n  if (u === 0) return d >= -3 && d \u003c= 3 ? 1 : 0;\n  if (u === 1) return d >= -4 && d \u003c= 5 ? 1 : 0;\n  if (d === 0) return 1;\n  if (u >= 2 && u \u003c= 12 && d \u003c 0 && -d \u003c= (12.5 - u) * 0.48) return 2;\n  if (u >= 2 && u \u003c= 11 && d > 0 && d \u003c= (11 - u) * 0.42) return 2;\n  return 0;\n}\n\n// The top row of the cliff edge in the near left corner.\nfunction cliff(x) {\n  return x >= 26 ? H : H - Math.round(11 * (1 - x / 26) ** 1.3 + 0.8 * Math.sin(x * 0.9));\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const sun = P.sun;\n  const chop = P.chop;\n  const T = P.t;\n  const buf = P.buf;\n  const sx = 29.5;\n  const sy = mix(7, HZ - 3.5, sun);\n  // How far under the horizon the sun's reflection falls.\n  const r0 = Math.max(2.5, HZ - sy);\n\n  // Per row: wavelets shrink toward the horizon, so their phase runs faster.\n  let a1 = 0;\n  let a2 = 0;\n  let a3 = 0;\n  let a4 = 0;\n  let a5 = 0;\n  for (let y = HZ; y \u003c H; y++) {\n    const p = (y - HZ + 1) / SEA;\n    const ly = 2 + 6 * p * (1 + chop);\n    a1 += TAU / ly;\n    a2 += TAU / (ly * 1.3);\n    a3 += TAU / (ly * 0.6);\n    a4 += TAU / Math.max(10, 2 * ly);\n    a5 += TAU / (3 + 11 * p * (1 + 0.6 * chop));\n    P.R1[y] = a1;\n    P.R2[y] = a2;\n    P.R3[y] = a3;\n    P.R4[y] = a4;\n    P.R5[y] = a5;\n    P.kx[y] = TAU / (4 + 10 * p * (1 + chop));\n  }\n  // Gusts: patches of rougher water, 4x4 LEDs a cell.\n  const gust = P.gust;\n  for (let j = 0; j \u003c 32; j++) for (let i = 0; i \u003c 16; i++) gust[j * 16 + i] = noise(P, (i * 4 - P.gx) / 7, (j * 4) / 9);\n\n  // Water colours: slate outside the path, silver in it; glints from white to pale gold.\n  const gt = [1, mix(0.94, 0.85, sun), mix(0.8, 0.56, sun)];\n  const wf = (1.8 - 0.9 * sun) * (0.85 + 0.4 * chop);\n  const L = 30 + 50 * (1 - sun);\n  const by = HZ + 30;\n  const boatOn = P.boat >= 0;\n  const PH = P.ph;\n  const OM = P.om;\n  const SZ = P.sz;\n  const PH2 = P.ph2;\n  const wx = P.wx;\n  // With the sun low the water off the path gets fewer glints, and dimmer ones.\n  const q0 = mix(0.12, 0.04, sun);\n  const g0 = mix(100, 60, sun);\n  for (let y = HZ; y \u003c H; y++) {\n    const r = y - HZ + 1;\n    const p = r / SEA;\n    const w = (2.5 + 0.55 * r) * wf;\n    const v = Math.exp(-(((r - r0) / L) ** 2));\n    const amp = 3 + 8 * Math.min(1, r / 30);\n    const kx = P.kx[y];\n    const R1 = P.R1[y];\n    const R2 = P.R2[y];\n    const R3 = P.R3[y];\n    const R4 = P.R4[y];\n    const R5 = P.R5[y];\n    const grow = (y >> 2) * 16;\n    // Toward the foot of the panel the wavelets are nearer: fewer glints, and brighter.\n    const near = 1 - 0.3 * clamp((r - 60) / 45, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const q3 = i * 3;\n      const cx = (x - sx - wx) * kx;\n      const p1 = R1 + 0.35 * cx - 1.3 * T;\n      const s = 0.5 * cos(p1) + 0.35 * cos(R2 - 0.9 * cx - T) + 0.25 * cos(R3 + 1.4 * cx - 2.1 * T);\n      const dx = (x - sx) / w;\n      const I = (0.25 + 0.75 * v) / (1 + dx * dx * dx * dx);\n      const sI = Math.sqrt(I);\n      const g = gust[grow + (x >> 2)];\n      // The water between the facets: slate outside the path, dark inside it.\n      const b = mix(44 + 10 * (1 - p) - 6 * g, 20, I) + amp * s * (1 - 0.4 * I);\n      const sv = Math.min(1, I * 1.3);\n      let rr = b * mix(0.46, 0.88, sv);\n      let gg = b * mix(0.66, 0.93, sv);\n      let bb = b;\n      // Facets sit on the band's checkerboard, so no two glints touch. Each\n      // one mirrors a little silver sky until it tilts to the sun and flashes.\n      const band = Math.floor((R4 + 0.35 * cx - 1.3 * T) * 0.3183);\n      if ((x + y + band) & 1) {\n        const m = 11 + 20 * (0.5 + 0.5 * cos(PH2[i] + 0.5 * p1));\n        rr += m * 0.86;\n        gg += m * 0.94;\n        bb += m;\n        // Rows of wavelets roll in; their faces toward the sun carry the glints.\n        const sw = 0.5 + 0.5 * cos(R5 + 0.2 * cx + 0.8 * cos(0.11 * x + 0.3 * R5) - 1.1 * T);\n        const face = clamp(0.3 + 0.95 * sw + 0.3 * s, 0, 1.25);\n        const q = clamp((q0 + 0.75 * sI) * face * (0.63 + 0.84 * g) * near, 0, 0.95);\n        const c = cos(Math.PI * q);\n        const f = cos(PH[i] + OM[i] * T + 0.9 * p1);\n        if (f > c) {\n          const lit = SZ[i] * Math.min(1, (f - c) / 0.08) * (g0 + (255 - g0) * sI);\n          rr += lit * gt[0];\n          gg += lit * gt[1];\n          bb += lit * gt[2];\n        }\n      }\n      if (boatOn && y \u003c= by + 3 && y > by - 14) {\n        const m = boat(P, x, y, by);\n        if (m) {\n          rr = m === 1 ? 8 : 22;\n          gg = m === 1 ? 10 : 24;\n          bb = m === 1 ? 14 : 32;\n        } else if (y > by && Math.abs(x - P.bx) \u003c 4) {\n          // The hull's shadow on the water under it.\n          rr *= 0.3;\n          gg *= 0.3;\n          bb *= 0.3;\n        }\n      }\n      buf[q3] = rr;\n      buf[q3 + 1] = gg;\n      buf[q3 + 2] = bb;\n    }\n  }\n\n  // Sky: a steady fall of light from the haze on the horizon to the top\n  // row, the glow round the sun, and thin cloud bars drifting with the wind.\n  const tTop = [mix(0.58, 0.66, sun), mix(0.72, 0.68, sun), 1];\n  const tLow = [mix(0.9, 1, sun), mix(0.94, 0.85, sun), mix(1, 0.64, sun)];\n  const sc = [255, mix(250, 222, sun), mix(236, 150, sun)];\n  const sr = mix(2.4, 3.8, sun);\n  const cn = P.cn || (P.cn = new Float32Array(W * 2));\n  for (let c = 0; c \u003c 2; c++) for (let x = 0; x \u003c W; x++) cn[c * W + x] = clamp(noise(P, (x - P.cx * (1 + 0.4 * c)) / 9 + c * 5, c * 3.3) * 2.4 - 1, 0, 1);\n  for (let y = 0; y \u003c HZ; y++) {\n    const vv = y / (HZ - 1);\n    const lv = 80 + 7.4 * y;\n    const tr = mix(tTop[0], tLow[0], vv);\n    const tg = mix(tTop[1], tLow[1], vv);\n    const tb = mix(tTop[2], tLow[2], vv);\n    for (let x = 0; x \u003c W; x++) {\n      const q3 = (y * W + x) * 3;\n      const dx = x - sx;\n      const dy = (y - sy) * 1.15;\n      const d = Math.sqrt(dx * dx + dy * dy);\n      const glow = 150 * Math.exp(-d / 4.5) + 60 * Math.exp(-d / 14);\n      let cl = 0;\n      for (let c = 0; c \u003c 2; c++) {\n        const e = (y - 4 - c * 6.5) / 1.2;\n        if (e > -2.5 && e \u003c 2.5) cl += Math.exp(-e * e) * cn[c * W + x];\n      }\n      cl = Math.min(1, cl);\n      // A cloud is grey against the haze, its edges silvered near the sun.\n      const lit = lv + glow * (1 - 0.5 * cl + 1.2 * cl * (1 - cl)) - 26 * cl;\n      if (d \u003c sr) {\n        buf[q3] = sc[0];\n        buf[q3 + 1] = sc[1];\n        buf[q3 + 2] = sc[2];\n      } else {\n        buf[q3] = lit * tr;\n        buf[q3 + 1] = lit * tg;\n        buf[q3 + 2] = lit * tb;\n      }\n    }\n  }\n  // A headland runs out from the left into the haze on the horizon.\n  for (let x = 0; x \u003c 15; x++) {\n    const top = HZ - Math.round(4.2 * (1 - x / 15) ** 0.8 + 0.6 * Math.sin(x * 1.3));\n    for (let y = Math.max(0, top); y \u003c HZ; y++) {\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 40;\n      buf[q3 + 1] = 46;\n      buf[q3 + 2] = 58;\n    }\n  }\n  // The cliff edge you stand on, and its grass bending in the wind.\n  const lean = 1.6 * P.wind + 0.4;\n  for (let x = 0; x \u003c 26; x++) {\n    for (let y = cliff(x); y \u003c H; y++) {\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 9;\n      buf[q3 + 1] = 12;\n      buf[q3 + 2] = 10;\n    }\n  }\n  for (const [gb, gh, gp] of P.grass) {\n    const x0 = Math.floor(gb);\n    const y0 = cliff(x0);\n    const sway = lean + 0.5 * Math.sin(T * 1.9 + gp) + 0.6 * gust[(y0 >> 2) * 16 + (x0 >> 2)];\n    for (let k = 1; k \u003c= gh; k++) {\n      const u = k / gh;\n      const x = Math.round(gb + sway * u * u * gh * 0.5);\n      const y = y0 - k;\n      if (x \u003c 0 || x >= W || y \u003c HZ) continue;\n      const q3 = (y * W + x) * 3;\n      // The tips catch the sun.\n      const tip = k === Math.ceil(gh) ? 30 : 0;\n      buf[q3] = 10 + tip * 1.4;\n      buf[q3 + 1] = 14 + tip * 1.2;\n      buf[q3 + 2] = 10 + tip * 0.7;\n    }\n  }\n  // Gulls, dark against the light.\n  for (const g of P.gulls) {\n    const wing = WING[BEAT[Math.floor(((g.f % TAU) / TAU) * 4)]];\n    for (let j = 0; j \u003c 7; j++) {\n      const x = Math.round(g.x) + j - 3;\n      const y = Math.round(g.y) + wing[j];\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 16;\n      buf[q3 + 1] = 18;\n      buf[q3 + 2] = 24;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q3 = (y * W + x) * 3;\n      display.setPixel(x, y, clamp(buf[q3], 0, 255), clamp(buf[q3 + 1], 0, 255), clamp(buf[q3 + 2], 0, 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sun=0..1, Speed=0.2..3, Chop=0..1, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sun","min":0,"max":1,"about":"How high the sun stands. At 0 a high silver sun throws a broad glitter that fills the panel from a third of the way down; turned up, it sinks onto the horizon as a flattened pale gold disc, and the glitter narrows to a gold column with dark slate water either side."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the water moves: at 2 a glint holds for about half a second, and the rows of wavelets that carry the glints roll in at two or three LEDs a second near your feet."},{"name":"Chop","min":0,"max":1,"about":"How rough the sea is. At 0 a light chop of fine wavelets whose rows run three LEDs apart under the horizon and fourteen at the foot of the panel; at 1 the wavelets grow half as big again, their rows twenty-one LEDs apart at the foot, and the path spreads wider."},{"name":"Wind","min":-1,"max":1,"about":"Near calm at 0.06. Turned either way, a breeze from that side sets the wavelets sliding sideways and sends the gusts that thicken the glitter racing across; the cloud bars drift and the grass on the cliff edge bends with it."}],"start":[0,2,0,0.06],"measures":{"motion":0.5376,"detail":0.3357,"edges":0.4835,"complexity":2.2983,"coverage":0.8569,"colour":0.0799,"drift":0.0378},"knobResponse":[0.1189,0.329,0.2477,0.3023]},{"slug":"test-card","title":"Test Card","family":"glitch","round":1,"note":"텔레비전 컬러 바를, 수직 동기를 잃어 가는 수상기가 보여 주는 대로 그려요.","idea":"A television's colour bars, as a set that is losing its hold would show them.","buttons":"K1 tap tears the picture now.","code":"// ===== Patternflow pattern =====\n// Title:   Test Card\n// Family:  glitch\n// Idea:    A television's colour bars, as a set that is losing its hold would show them.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Bursts=0.2..6, Damage=0.15..1, Roll=0..1\n//\n// Knob 1: Hue. Turns the whole set of bars round the colour wheel.\n// Knob 2: Bursts. How often the picture tears.\n// Knob 3: Damage. From a clean card with the odd twitch to bars torn apart and smeared.\n// Knob 4: Roll. The vertical hold: the picture starts to slip and roll.\n// Buttons: K1 tap tears the picture now.\n\nconst BARS = [\n  [235, 235, 235],\n  [235, 235, 16],\n  [16, 235, 235],\n  [16, 235, 16],\n  [235, 16, 235],\n  [235, 16, 16],\n  [16, 16, 235],\n];\n// The bottom row of the broadcast card: -I blue, white, +Q purple, then black.\nconst FOOT = [\n  [16, 60, 120],\n  [235, 235, 235],\n  [72, 16, 130],\n];\n\n// The card stands as tall as the panel: bars, the reversed strip under them,\n// a grey ramp, and the broadcast card's bottom row, as shares of the height.\nconst BARS_END = 0.6;\nconst STRIP_END = 0.68;\nconst RAMP_END = 0.84;\n\nfunction hash(a, b) {\n  const s = Math.sin(a * 12.9898 + b * 78.233) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nfunction turn(c, hue, out, o) {\n  // Rotate an RGB colour round the grey axis.\n  const a = hue * Math.PI * 2;\n  const cos = Math.cos(a);\n  const sin = Math.sin(a);\n  const k = (1 - cos) / 3;\n  const s3 = Math.sqrt(1 / 3) * sin;\n  out[o] = c[0] * (cos + k) + c[1] * (k - s3) + c[2] * (k + s3);\n  out[o + 1] = c[0] * (k + s3) + c[1] * (cos + k) + c[2] * (k - s3);\n  out[o + 2] = c[0] * (k - s3) + c[1] * (k + s3) + c[2] * (cos + k);\n}\n\n// One channel of the clean card at column xx of a row in the given part.\nfunction channel(p, part, xx, w, c) {\n  const pal = p.palette;\n  if (part === 0) return pal[Math.floor((xx / w) * 7) * 3 + c];\n  if (part === 1) {\n    const i = 6 - Math.floor((xx / w) * 7);\n    return i % 2 === 0 ? pal[i * 3 + c] : 10;\n  }\n  if (part === 2) return Math.floor((xx / w) * 6) * 40 + 20;\n  const f = (xx / w) * 7;\n  if (f \u003c 3.75) return p.foot[Math.floor(f / 1.25) * 3 + c];\n  return 10;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.tear = 0;\n  params.slot = -1;\n  params.seed = 0;\n  params.roll = 0;\n  params.hue = -1;\n  params.palette = new Float32Array(7 * 3);\n  params.foot = new Float32Array(3 * 3);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.15, 0.06];\n  params.damage = k[2];\n  params.rollAmount = k[3];\n  params.t += dt;\n  const slot = Math.floor(params.t * k[1]);\n  if (slot !== params.slot) {\n    params.slot = slot;\n    if (hash(slot, 3.1) \u003c 0.7) {\n      params.tear = 0.25 + hash(slot, 7.7) * 0.5;\n      params.seed = slot;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.tear = 0.9;\n    params.seed = params.slot + 1000 + Math.floor(params.t * 10);\n  }\n  params.tear = Math.max(0, params.tear - dt * 1.1);\n  // The roll eases up to speed and back, like a hold that drifts. It turns\n  // the picture over about as often a second as it did lying down.\n  params.roll += dt * params.rollAmount * params.rollAmount * 180;\n  if (k[0] !== params.hue) {\n    params.hue = k[0];\n    for (let i = 0; i \u003c 7; i++) turn(BARS[i], k[0], params.palette, i * 3);\n    for (let i = 0; i \u003c 3; i++) turn(FOOT[i], k[0], params.foot, i * 3);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const w = display.width;\n  const h = display.height;\n  // Damage sets how hard a burst tears, and past the middle the card never\n  // quite settles.\n  const tear = Math.max(p.tear * (0.35 + 0.65 * p.damage), Math.max(0, p.damage - 0.45) * 0.5);\n  const seed = p.seed;\n  // Torn bands keep the height in LEDs they had on the panel lying down.\n  const bands = Math.round(((6 + Math.floor(p.damage * 10)) * h) / 64);\n  const split = Math.round(tear * 3);\n  const blank = Math.round(h * 0.094);\n  const hold = p.rollAmount > 0.02 ? p.roll : 0;\n  const frame = Math.floor(p.t * 24);\n  const fizz = Math.floor(p.t * 30);\n  for (let y = 0; y \u003c h; y++) {\n    // Torn bands slide sideways; a quiet card still twitches a line now and then.\n    const band = Math.floor((y / h) * bands);\n    const kick = hash(seed, band) \u003c tear * 1.4 ? (hash(seed + 1, band) - 0.5) * w * 0.55 * tear : 0;\n    const twitch = hash(frame, y) \u003c 0.012 + p.damage * 0.02 ? (hash(y, p.t) - 0.5) * 3 : 0;\n    const shift = Math.round(kick + twitch);\n    const sy = Math.floor(y + hold) % (h + blank);\n    const part = sy >= h ? -1 : sy \u003c h * BARS_END ? 0 : sy \u003c h * STRIP_END ? 1 : sy \u003c h * RAMP_END ? 2 : 3;\n    // Scanlines dim every other row a touch, more when the picture tears.\n    const dim = y & 1 ? 1 - 0.18 - tear * 0.3 : 1;\n    for (let x = 0; x \u003c w; x++) {\n      if (part \u003c 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const base = x - shift;\n      const xr = (((base - split) % w) + w) % w;\n      const xg = ((base % w) + w) % w;\n      const xb = (((base + split) % w) + w) % w;\n      const r = channel(p, part, xr, w, 0);\n      const g = channel(p, part, xg, w, 1);\n      const b = channel(p, part, xb, w, 2);\n      const snow = hash(x + y * 131, fizz) \u003c tear * 0.25 ? 120 : 0;\n      display.setPixel(x, y, r * dim + snow, g * dim + snow, b * dim + snow);\n    }\n  }\n}\n","layer":{"id":"layer-test-card","type":"code","name":"test-card","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Test Card\n// Family:  glitch\n// Idea:    A television's colour bars, as a set that is losing its hold would show them.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Bursts=0.2..6, Damage=0.15..1, Roll=0..1\n//\n// Knob 1: Hue. Turns the whole set of bars round the colour wheel.\n// Knob 2: Bursts. How often the picture tears.\n// Knob 3: Damage. From a clean card with the odd twitch to bars torn apart and smeared.\n// Knob 4: Roll. The vertical hold: the picture starts to slip and roll.\n// Buttons: K1 tap tears the picture now.\n\nconst BARS = [\n  [235, 235, 235],\n  [235, 235, 16],\n  [16, 235, 235],\n  [16, 235, 16],\n  [235, 16, 235],\n  [235, 16, 16],\n  [16, 16, 235],\n];\n// The bottom row of the broadcast card: -I blue, white, +Q purple, then black.\nconst FOOT = [\n  [16, 60, 120],\n  [235, 235, 235],\n  [72, 16, 130],\n];\n\n// The card stands as tall as the panel: bars, the reversed strip under them,\n// a grey ramp, and the broadcast card's bottom row, as shares of the height.\nconst BARS_END = 0.6;\nconst STRIP_END = 0.68;\nconst RAMP_END = 0.84;\n\nfunction hash(a, b) {\n  const s = Math.sin(a * 12.9898 + b * 78.233) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nfunction turn(c, hue, out, o) {\n  // Rotate an RGB colour round the grey axis.\n  const a = hue * Math.PI * 2;\n  const cos = Math.cos(a);\n  const sin = Math.sin(a);\n  const k = (1 - cos) / 3;\n  const s3 = Math.sqrt(1 / 3) * sin;\n  out[o] = c[0] * (cos + k) + c[1] * (k - s3) + c[2] * (k + s3);\n  out[o + 1] = c[0] * (k + s3) + c[1] * (cos + k) + c[2] * (k - s3);\n  out[o + 2] = c[0] * (k - s3) + c[1] * (k + s3) + c[2] * (cos + k);\n}\n\n// One channel of the clean card at column xx of a row in the given part.\nfunction channel(p, part, xx, w, c) {\n  const pal = p.palette;\n  if (part === 0) return pal[Math.floor((xx / w) * 7) * 3 + c];\n  if (part === 1) {\n    const i = 6 - Math.floor((xx / w) * 7);\n    return i % 2 === 0 ? pal[i * 3 + c] : 10;\n  }\n  if (part === 2) return Math.floor((xx / w) * 6) * 40 + 20;\n  const f = (xx / w) * 7;\n  if (f \u003c 3.75) return p.foot[Math.floor(f / 1.25) * 3 + c];\n  return 10;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.tear = 0;\n  params.slot = -1;\n  params.seed = 0;\n  params.roll = 0;\n  params.hue = -1;\n  params.palette = new Float32Array(7 * 3);\n  params.foot = new Float32Array(3 * 3);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.15, 0.06];\n  params.damage = k[2];\n  params.rollAmount = k[3];\n  params.t += dt;\n  const slot = Math.floor(params.t * k[1]);\n  if (slot !== params.slot) {\n    params.slot = slot;\n    if (hash(slot, 3.1) \u003c 0.7) {\n      params.tear = 0.25 + hash(slot, 7.7) * 0.5;\n      params.seed = slot;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.tear = 0.9;\n    params.seed = params.slot + 1000 + Math.floor(params.t * 10);\n  }\n  params.tear = Math.max(0, params.tear - dt * 1.1);\n  // The roll eases up to speed and back, like a hold that drifts. It turns\n  // the picture over about as often a second as it did lying down.\n  params.roll += dt * params.rollAmount * params.rollAmount * 180;\n  if (k[0] !== params.hue) {\n    params.hue = k[0];\n    for (let i = 0; i \u003c 7; i++) turn(BARS[i], k[0], params.palette, i * 3);\n    for (let i = 0; i \u003c 3; i++) turn(FOOT[i], k[0], params.foot, i * 3);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const w = display.width;\n  const h = display.height;\n  // Damage sets how hard a burst tears, and past the middle the card never\n  // quite settles.\n  const tear = Math.max(p.tear * (0.35 + 0.65 * p.damage), Math.max(0, p.damage - 0.45) * 0.5);\n  const seed = p.seed;\n  // Torn bands keep the height in LEDs they had on the panel lying down.\n  const bands = Math.round(((6 + Math.floor(p.damage * 10)) * h) / 64);\n  const split = Math.round(tear * 3);\n  const blank = Math.round(h * 0.094);\n  const hold = p.rollAmount > 0.02 ? p.roll : 0;\n  const frame = Math.floor(p.t * 24);\n  const fizz = Math.floor(p.t * 30);\n  for (let y = 0; y \u003c h; y++) {\n    // Torn bands slide sideways; a quiet card still twitches a line now and then.\n    const band = Math.floor((y / h) * bands);\n    const kick = hash(seed, band) \u003c tear * 1.4 ? (hash(seed + 1, band) - 0.5) * w * 0.55 * tear : 0;\n    const twitch = hash(frame, y) \u003c 0.012 + p.damage * 0.02 ? (hash(y, p.t) - 0.5) * 3 : 0;\n    const shift = Math.round(kick + twitch);\n    const sy = Math.floor(y + hold) % (h + blank);\n    const part = sy >= h ? -1 : sy \u003c h * BARS_END ? 0 : sy \u003c h * STRIP_END ? 1 : sy \u003c h * RAMP_END ? 2 : 3;\n    // Scanlines dim every other row a touch, more when the picture tears.\n    const dim = y & 1 ? 1 - 0.18 - tear * 0.3 : 1;\n    for (let x = 0; x \u003c w; x++) {\n      if (part \u003c 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const base = x - shift;\n      const xr = (((base - split) % w) + w) % w;\n      const xg = ((base % w) + w) % w;\n      const xb = (((base + split) % w) + w) % w;\n      const r = channel(p, part, xr, w, 0);\n      const g = channel(p, part, xg, w, 1);\n      const b = channel(p, part, xb, w, 2);\n      const snow = hash(x + y * 131, fizz) \u003c tear * 0.25 ? 120 : 0;\n      display.setPixel(x, y, r * dim + snow, g * dim + snow, b * dim + snow);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Bursts=0.2..6, Damage=0.15..1, Roll=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole set of bars round the colour wheel."},{"name":"Bursts","min":0.2,"max":6,"about":"How often the picture tears."},{"name":"Damage","min":0.15,"max":1,"about":"From a clean card with the odd twitch to bars torn apart and smeared."},{"name":"Roll","min":0,"max":1,"about":"The vertical hold: the picture starts to slip and roll."}],"start":[0,2,0.15,0.06],"measures":{"motion":0.2635,"detail":0.0837,"edges":0.7844,"complexity":0.0808,"coverage":0.8476,"colour":0.6265,"drift":0.0606},"knobResponse":[0.3578,0.0535,0.0933,0.3676]},{"slug":"tetromino-well","title":"Tetromino Well","family":"algo","round":10,"note":"세운 패널이 너비 10칸, 높이 21칸의 테트리스 우물이에요. 지치지 않는 플레이어가 꼭대기에 기다리는 다음 조각을 보며 패널의 3분의 2 높이까지 쌓고, 오른쪽 한 줄을 비워 두었다가 긴 막대가 오면 네 줄을 한꺼번에 지워요. K1 을 누르면 긴 막대가 다음 조각으로 와요.","idea":"The standing panel is a falling-block well ten cells wide and twenty-one tall, and a player that never tires stacks the pieces two thirds of the way up before it burns them down, four lines at a time when the long bar comes.","buttons":"K1 tap sends the long bar next, and the player drops it into the well for four lines if four are ready.","code":"// ===== Patternflow pattern =====\n// Title:   Tetromino Well\n// Family:  algo\n// Idea:    The standing panel is a falling-block well ten cells wide and twenty-one tall, and a player that never tires stacks the pieces two thirds of the way up before it burns them down, four lines at a time when the long bar comes.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the falling-block puzzle of Tetris (Alexey Pajitnov, 1984); the player weighs every landing with holes, bumps and wells, after Pierre Dellacherie's one-piece controller\n// Round:   10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Headroom=6..18, Garbage=0..1\n//\n// Knob 1: Hue. Turns the seven piece colours together, starting from the usual cyan bar, yellow square, purple T, green S, red Z, blue J and orange L.\n// Knob 2: Speed. How fast pieces fall and rows clear: where it starts a piece drops ten rows a second, at the bottom of the range it drifts down one.\n// Knob 3: Headroom. The rows the player keeps free above its stack: at 6 it builds two thirds of the way up the panel before it starts taking lines, at 18 it keeps the stack on the floor.\n// Knob 4: Garbage. The chance that a grey row with one hole pushes up from the floor as each piece arrives; turned up, the stack climbs until it tops out and the floor drops it.\n// Buttons: K1 tap sends the long bar next, and the player drops it into the well for four lines if four are ready.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CELL = 6;\nconst COLS = 10;\nconst ROWS = 21;\n// Two rows above the panel where a piece comes in from.\nconst HID = 2;\nconst BR = ROWS + HID;\n// 10 cells of 6 LEDs leave two LEDs of wall on each side; 21 rows leave two LEDs of floor.\nconst X0 = 2;\n// The player keeps the right-hand column open for the long bar.\nconst WELL = COLS - 1;\nconst GARBAGE = 8;\nconst BUILD = 0;\nconst BURN = 1;\nconst PANIC = 2;\n\n// Spawn shapes, (x, y) in a 4×4 box for the bar and a 3×3 box for the rest:\n// I, O, T, S, Z, J, L.\nconst SHAPES = [\n  [[0, 1], [1, 1], [2, 1], [3, 1]],\n  [[1, 0], [2, 0], [1, 1], [2, 1]],\n  [[1, 0], [0, 1], [1, 1], [2, 1]],\n  [[1, 0], [2, 0], [0, 1], [1, 1]],\n  [[0, 0], [1, 0], [1, 1], [2, 1]],\n  [[0, 0], [0, 1], [1, 1], [2, 1]],\n  [[2, 0], [0, 1], [1, 1], [2, 1]],\n];\n// The guideline colours: cyan, yellow, purple, green, red, blue, orange.\nconst HUES = [0.5, 0.15, 0.79, 0.33, 0.995, 0.63, 0.075];\n\n// ROT[type][r] is the shape turned r quarters clockwise.\nconst ROT = SHAPES.map((cells, type) => {\n  const out = [cells];\n  for (let r = 1; r \u003c 4; r++) {\n    const prev = out[r - 1];\n    if (type === 1) out.push(prev);\n    else if (type === 0) out.push(prev.map(([x, y]) => [3 - y, x]));\n    else out.push(prev.map(([x, y]) => [2 - y, x]));\n  }\n  return out;\n});\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction fits(board, cells, x, y) {\n  for (let i = 0; i \u003c 4; i++) {\n    const c = x + cells[i][0];\n    const r = y + cells[i][1];\n    if (c \u003c 0 || c >= COLS || r >= BR) return false;\n    if (r >= 0 && board[r * COLS + c]) return false;\n  }\n  return true;\n}\n\nfunction dropRow(board, cells, x, y) {\n  while (fits(board, cells, x, y + 1)) y++;\n  return y;\n}\n\nfunction fullRows(board) {\n  const rows = [];\n  for (let r = 0; r \u003c BR; r++) {\n    let n = 0;\n    for (let c = 0; c \u003c COLS; c++) if (board[r * COLS + c]) n++;\n    if (n === COLS) rows.push(r);\n  }\n  return rows;\n}\n\n// Take the rows out and let everything above them fall in.\nfunction removeRows(board, rows) {\n  let dst = BR - 1;\n  for (let src = BR - 1; src >= 0; src--) {\n    if (rows.includes(src)) continue;\n    if (dst !== src) for (let c = 0; c \u003c COLS; c++) board[dst * COLS + c] = board[src * COLS + c];\n    dst--;\n  }\n  for (; dst >= 0; dst--) for (let c = 0; c \u003c COLS; c++) board[dst * COLS + c] = 0;\n}\n\nfunction heights(board, h) {\n  let max = 0;\n  for (let c = 0; c \u003c COLS; c++) {\n    let r = 0;\n    while (r \u003c BR && !board[r * COLS + c]) r++;\n    h[c] = BR - r;\n    if (h[c] > max) max = h[c];\n  }\n  return max;\n}\n\n// How the player likes a board, after Dellacherie with El-Tetris's weights:\n// few changes between full and empty along rows and down columns, no holes,\n// no narrow pits. The right-hand column counts as wall: the player keeps it\n// for the long bar. Three rows from the top it panics and counts it in.\nfunction boardScore(P, board, mode) {\n  const h = P.h;\n  heights(board, h);\n  const last = mode === PANIC ? COLS : WELL;\n  let rowT = 0;\n  for (let r = 0; r \u003c BR; r++) {\n    let prev = 1;\n    for (let c = 0; c \u003c last; c++) {\n      const f = board[r * COLS + c] ? 1 : 0;\n      if (f !== prev) rowT++;\n      prev = f;\n    }\n    if (!prev) rowT++;\n  }\n  let colT = 0;\n  let holes = 0;\n  for (let c = 0; c \u003c COLS; c++) {\n    let prev = 0;\n    for (let r = 0; r \u003c BR; r++) {\n      const f = board[r * COLS + c] ? 1 : 0;\n      if (f !== prev) colT++;\n      if (!f && r >= BR - h[c]) holes++;\n      prev = f;\n    }\n    if (!prev) colT++;\n  }\n  let wells = 0;\n  for (let c = 0; c \u003c last; c++) {\n    let depth = 0;\n    for (let r = 0; r \u003c BR; r++) {\n      const left = c === 0 || board[r * COLS + c - 1];\n      const right = c + 1 === last || board[r * COLS + c + 1];\n      if (!board[r * COLS + c] && left && right) wells += ++depth;\n      else depth = 0;\n    }\n  }\n  let s = -3.2 * rowT - 9.3 * colT - 7.9 * holes - 3.4 * wells;\n  if (mode === BURN) for (let c = 0; c \u003c WELL; c++) if (h[c] > P.target) s -= 1.5 * (h[c] - P.target);\n  return s;\n}\n\n// Drop a piece onto a copy of the board and score the move itself: the piece\n// low and its cells in the rows it clears. Below its line the player saves\n// the rows that are ready and keeps everything out of the right-hand column;\n// at the line it takes four at a time whenever the bar comes; in a panic it\n// fills whatever clears a line.\nfunction move(P, board, out, type, rot, x, y, mode) {\n  const cells = ROT[type][rot];\n  out.set(board);\n  let inWell = 0;\n  let top = 4;\n  let bottom = 0;\n  for (let i = 0; i \u003c 4; i++) {\n    out[(y + cells[i][1]) * COLS + x + cells[i][0]] = type + 1;\n    if (x + cells[i][0] === WELL) inWell++;\n    top = Math.min(top, cells[i][1]);\n    bottom = Math.max(bottom, cells[i][1]);\n  }\n  const rows = fullRows(out);\n  let eroded = 0;\n  for (let i = 0; i \u003c 4; i++) if (rows.includes(y + cells[i][1])) eroded++;\n  eroded *= rows.length;\n  if (rows.length) removeRows(out, rows);\n  const lines = rows.length;\n  let s = -4.5 * (BR - y - (top + bottom) / 2) + 3.4 * eroded;\n  if (mode === PANIC) s += 8 * lines;\n  else if (mode === BURN) {\n    if (type !== 0) s -= 40 * inWell;\n    s += 8 * lines + (lines === 4 ? 25 : 0);\n  } else s -= 40 * inWell + 3.4 * eroded + 12 * lines;\n  return s;\n}\n\n// Every turn and column a piece can reach by sliding along the top and\n// dropping straight down.\nfunction each(board, type, fn) {\n  const turns = type === 1 ? 1 : type === 0 || type === 3 || type === 4 ? 2 : 4;\n  for (let rot = 0; rot \u003c turns; rot++) {\n    const cells = ROT[type][rot];\n    if (!fits(board, cells, 3, HID - 1)) continue;\n    for (let dir = -1; dir \u003c= 1; dir += 2)\n      for (let x = dir \u003c 0 ? 3 : 4; x >= -3 && x \u003c= COLS; x += dir) {\n        if (!fits(board, cells, x, HID - 1)) break;\n        fn(rot, x, dropRow(board, cells, x, HID - 1));\n      }\n  }\n}\n\n// The best place for this piece, looking one piece ahead when it can: the\n// player sees the next piece, as the game shows it.\nfunction choose(P, type, next, force) {\n  const board = P.board;\n  const max = heights(board, P.h);\n  if (max >= P.target) P.burn = true;\n  else if (max \u003c= P.target - 3) P.burn = false;\n  const mode = max >= ROWS - 3 ? PANIC : P.burn || force ? BURN : BUILD;\n  let best = null;\n  each(board, type, (rot, x, y) => {\n    let s = move(P, board, P.trial, type, rot, x, y, mode);\n    if (next >= 0) {\n      let after = -Infinity;\n      each(P.trial, next, (r2, x2, y2) => {\n        const s2 = move(P, P.trial, P.trial2, next, r2, x2, y2, mode) + boardScore(P, P.trial2, mode);\n        if (s2 > after) after = s2;\n      });\n      if (after === -Infinity) after = -1000;\n      s += after;\n    } else s += boardScore(P, P.trial, mode);\n    s += Math.random() * 0.3;\n    if (!best || s > best.s) best = { s, rot, x, y };\n  });\n  return best;\n}\n\nfunction fromBag(P) {\n  if (!P.bag.length) {\n    P.bag = [0, 1, 2, 3, 4, 5, 6];\n    for (let i = 6; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.bag[i];\n      P.bag[i] = P.bag[j];\n      P.bag[j] = t;\n    }\n  }\n  return P.bag.pop();\n}\n\n// The piece that comes now. The one after it waits dim at the top of the\n// well: the player sees it coming, as the game shows it.\nfunction nextType(P) {\n  if (P.next \u003c 0) P.next = fromBag(P);\n  const type = P.next;\n  P.forced = P.forceNext;\n  P.forceNext = false;\n  P.next = P.after >= 0 ? P.after : fromBag(P);\n  P.after = -1;\n  return type;\n}\n\n// A grey row with one hole pushes the stack up a row. The hole mostly stays\n// in the same column for a few rows, the way garbage comes in a block, and\n// half the time it lines up under the player's open column.\nfunction addGarbage(P) {\n  const b = P.board;\n  for (let c = 0; c \u003c COLS; c++) if (b[c]) P.toppled = true;\n  b.copyWithin(0, COLS);\n  if (Math.random() \u003c 0.3) P.hole = Math.random() \u003c 0.5 ? WELL : Math.floor(Math.random() * COLS);\n  for (let c = 0; c \u003c COLS; c++) b[(BR - 1) * COLS + c] = c === P.hole ? 0 : GARBAGE;\n  for (let r = 0; r \u003c BR - 1; r++) P.off[r] = P.off[r + 1] + CELL;\n  P.off[BR - 1] = CELL;\n}\n\n// Play without drawing until the stack stands near the player's line, so the\n// panel opens on a game in progress.\nfunction prebuild(P, garbage) {\n  P.board.fill(0);\n  P.off.fill(0);\n  P.vel.fill(0);\n  P.burn = false;\n  const rows = Math.round(garbage * 6);\n  for (let i = 0; i \u003c rows; i++) addGarbage(P);\n  P.off.fill(0);\n  const extra = Math.floor(Math.random() * 7);\n  let after = -1;\n  for (let n = 0; n \u003c 400 && after \u003c extra; n++) {\n    const type = nextType(P);\n    const m = choose(P, type, P.next, false);\n    if (!m) break;\n    const cells = ROT[type][m.rot];\n    for (let i = 0; i \u003c 4; i++) P.board[(m.y + cells[i][1]) * COLS + m.x + cells[i][0]] = type + 1;\n    const full = fullRows(P.board);\n    if (full.length) removeRows(P.board, full);\n    if (after >= 0) after++;\n    else if (heights(P.board, P.h) >= P.target - 1) after = 0;\n  }\n}\n\nfunction spawn(P) {\n  if (P.chance > 0 && Math.random() \u003c P.chance) {\n    addGarbage(P);\n    if (P.toppled) return topple(P);\n  }\n  const type = nextType(P);\n  const m = choose(P, type, P.next, P.forced);\n  if (!m) return topple(P);\n  // The piece that waited at the top lights up there and starts to move.\n  P.type = type;\n  P.rot = 0;\n  P.x = 3;\n  P.y = HID;\n  P.wait = 0;\n  P.goal = m;\n  P.phase = \"move\";\n  P.clock = 0;\n}\n\n// Topped out: the floor opens and the whole stack falls out of the panel.\nfunction topple(P) {\n  P.phase = \"drop\";\n  P.clock = 0;\n  P.fall = 0;\n  P.fallV = 0;\n  P.toppled = false;\n  P.type = -1;\n}\n\nfunction lock(P) {\n  const cells = ROT[P.type][P.rot];\n  P.flashCells.length = 0;\n  for (let i = 0; i \u003c 4; i++) {\n    const r = P.y + cells[i][1];\n    const c = P.x + cells[i][0];\n    if (r >= 0) P.board[r * COLS + c] = P.type + 1;\n    P.flashCells.push(r * COLS + c);\n  }\n  P.flash = 1;\n  P.type = -1;\n  const rows = fullRows(P.board);\n  if (rows.length) {\n    P.clearing = rows;\n    P.phase = \"clear\";\n    if (rows.length === 4) P.glow = 1;\n  } else P.phase = \"rest\";\n  P.clock = 0;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.board = new Uint8Array(BR * COLS);\n  P.trial = new Uint8Array(BR * COLS);\n  P.trial2 = new Uint8Array(BR * COLS);\n  P.h = new Int32Array(COLS);\n  // Each board row's offset in LEDs while it falls into a cleared gap or\n  // rises over a garbage row, and how fast it is falling.\n  P.off = new Float32Array(BR);\n  P.vel = new Float32Array(BR);\n  P.img = new Float32Array(N * 3);\n  P.col = new Float32Array(9 * 3);\n  P.bag = [];\n  P.next = -1;\n  P.after = -1;\n  P.wait = 0;\n  P.hole = 0;\n  P.flashCells = [];\n  P.clearing = [];\n  P.ready = false;\n  P.type = -1;\n  P.phase = \"rest\";\n  P.clock = 0;\n  P.flash = 0;\n  P.glow = 0;\n  P.target = 16;\n  P.burn = false;\n  P.forceNext = false;\n  P.forced = false;\n  P.toppled = false;\n  P.chance = 0;\n  P.hue = 0;\n  P.time = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const tempo = Math.max(0.2, Math.min(3, k[1]));\n  const headroom = Math.round(Math.max(6, Math.min(18, k[2])));\n  const garbage = Math.max(0, Math.min(1, k[3]));\n  P.target = ROWS - headroom;\n  P.chance = garbage * garbage * 0.5;\n  if (!P.ready) {\n    P.ready = true;\n    prebuild(P, garbage);\n    spawn(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.next !== 0) {\n      P.after = P.next;\n      P.next = 0;\n    }\n    P.forceNext = true;\n  }\n\n  const s = dt * tempo;\n  P.time += s;\n  P.flash = Math.max(0, P.flash - s * 6);\n  P.glow = Math.max(0, P.glow - s * 0.9);\n  // The next piece fades in at the top once the live one has dropped clear of it.\n  if (P.phase === \"drop\") P.wait = 0;\n  else if (P.type \u003c 0 || P.y > HID + 2.5) P.wait = Math.min(1, P.wait + s * 5);\n\n  // Rows settle: down into a cleared gap under gravity, up over garbage at a steady pace.\n  let settling = false;\n  for (let r = 0; r \u003c BR; r++) {\n    if (P.off[r] \u003c 0) {\n      P.vel[r] += 220 * s;\n      P.off[r] = Math.min(0, P.off[r] + P.vel[r] * s);\n      if (P.off[r] === 0) P.vel[r] = 0;\n      settling = true;\n    } else if (P.off[r] > 0) {\n      P.off[r] = Math.max(0, P.off[r] - 40 * s);\n      settling = true;\n    }\n  }\n\n  P.clock += s;\n  if (P.phase === \"move\") {\n    // Turn and slide along the top to the chosen column, a row higher where\n    // the stack has come up that far.\n    const g = P.goal;\n    if (P.clock > 0.07) {\n      P.clock = 0;\n      if (P.rot !== g.rot) P.rot = (P.rot + 1) % 4;\n      else if (P.x !== g.x) P.x += Math.sign(g.x - P.x);\n    }\n    P.y = fits(P.board, ROT[P.type][P.rot], P.x, HID) ? HID : HID - 1;\n    if (P.rot === g.rot && P.x === g.x) {\n      P.phase = \"fall\";\n      P.clock = 0;\n    }\n  } else if (P.phase === \"fall\") {\n    P.y += 5 * s;\n    if (P.y >= P.goal.y) {\n      P.y = P.goal.y;\n      lock(P);\n    }\n  } else if (P.phase === \"clear\") {\n    // White, then the cells go from the middle out, then the rows above fall in.\n    if (P.clock > 0.42) {\n      const below = new Int32Array(BR);\n      for (let r = 0; r \u003c BR; r++) for (const c of P.clearing) if (c > r) below[r]++;\n      removeRows(P.board, P.clearing);\n      const moved = new Float32Array(BR);\n      let dst = BR - 1;\n      for (let src = BR - 1; src >= 0; src--) {\n        if (P.clearing.includes(src)) continue;\n        moved[dst] = -below[src] * CELL + P.off[src];\n        dst--;\n      }\n      for (let r = 0; r \u003c BR; r++) {\n        P.off[r] = r \u003c= dst ? 0 : moved[r];\n        P.vel[r] = 0;\n      }\n      P.clearing = [];\n      P.phase = \"rest\";\n      P.clock = 0;\n    }\n  } else if (P.phase === \"rest\") {\n    if (!settling && P.clock > 0.06) spawn(P);\n  } else if (P.phase === \"drop\") {\n    P.fallV += 160 * s;\n    P.fall += P.fallV * s;\n    if (P.fall > H + CELL * 2) {\n      P.board.fill(0);\n      P.off.fill(0);\n      P.vel.fill(0);\n      P.fall = 0;\n      P.burn = false;\n      P.phase = \"rest\";\n      P.clock = -0.5;\n    }\n  }\n}\n\nfunction blockInto(img, x0, y0, rgb, o, white, ghost, dim = 1) {\n  for (let j = 0; j \u003c CELL; j++) {\n    const y = y0 + j;\n    if (y \u003c 0 || y >= H) continue;\n    for (let i = 0; i \u003c CELL; i++) {\n      const x = x0 + i;\n      if (x \u003c X0 || x >= X0 + COLS * CELL) continue;\n      const rim = i === 0 || j === 0 || i === CELL - 1 || j === CELL - 1;\n      if (ghost && !rim) continue;\n      let f = 1;\n      let lift = 0;\n      if (i === CELL - 1 || j === CELL - 1) f = 0.5;\n      else if (i === 0 || j === 0) lift = 0.38;\n      else if (i === 1 && j === 1) lift = 0.6;\n      if (ghost) {\n        f = 0.28;\n        lift = 0;\n      }\n      const p = (y * W + x) * 3;\n      for (let ch = 0; ch \u003c 3; ch++) {\n        let v = rgb[o + ch] * f;\n        v += (255 - v) * lift;\n        v += (255 - v) * white;\n        img[p + ch] = v * dim;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const img = P.img;\n  img.fill(0);\n  const col = P.col;\n  for (let t = 0; t \u003c 7; t++) hsvInto(col, (t + 1) * 3, HUES[t] + P.hue, 0.86, 0.86);\n  col[GARBAGE * 3] = 104;\n  col[GARBAGE * 3 + 1] = 108;\n  col[GARBAGE * 3 + 2] = 122;\n\n  const drop = P.phase === \"drop\" ? Math.round(P.fall) : 0;\n  const clearT = P.phase === \"clear\" ? P.clock : -1;\n  for (let r = 0; r \u003c BR; r++) {\n    const y0 = (r - HID) * CELL + Math.round(P.off[r]) + drop;\n    if (y0 \u003c= -CELL || y0 >= H) continue;\n    const clearing = clearT >= 0 && P.clearing.includes(r);\n    for (let c = 0; c \u003c COLS; c++) {\n      const v = P.board[r * COLS + c];\n      if (!v) continue;\n      let white = 0;\n      if (clearing) {\n        // Flash white for an eighth of a second, then go two columns at a time from the middle.\n        if (clearT \u003c 0.12) white = 0.85;\n        else {\n          const ring = Math.min(4, Math.floor((clearT - 0.12) / 0.06));\n          const fromMid = c \u003c 5 ? 4 - c : c - 5;\n          if (fromMid \u003c= ring) continue;\n          white = 0.5;\n        }\n      }\n      if (P.flash > 0 && P.flashCells.includes(r * COLS + c)) white = Math.max(white, 0.45 * P.flash);\n      blockInto(img, X0 + c * CELL, y0, col, v * 3, white, false);\n    }\n  }\n\n  if (P.wait > 0 && P.next >= 0) {\n    const cells = ROT[P.next][0];\n    for (let i = 0; i \u003c 4; i++) {\n      const r = HID + cells[i][1];\n      const c = 3 + cells[i][0];\n      if (!P.board[r * COLS + c]) blockInto(img, X0 + c * CELL, (r - HID) * CELL, col, (P.next + 1) * 3, 0, false, 0.38 * P.wait);\n    }\n  }\n\n  if (P.type >= 0) {\n    const g = P.goal;\n    const cells = ROT[P.type][P.rot];\n    const o = (P.type + 1) * 3;\n    // Where the player means to put it.\n    const gc = ROT[P.type][g.rot];\n    for (let i = 0; i \u003c 4; i++) blockInto(img, X0 + (g.x + gc[i][0]) * CELL, (g.y + gc[i][1] - HID) * CELL, col, o, 0, true);\n    const py = Math.round((P.y - HID) * CELL);\n    for (let i = 0; i \u003c 4; i++) blockInto(img, X0 + (P.x + cells[i][0]) * CELL, py + cells[i][1] * CELL, col, o, 0, false);\n  }\n\n  // The wall: two LEDs of steel each side and under the floor, which opens\n  // when the stack tops out. After four lines a light runs up both walls.\n  const open = P.phase === \"drop\";\n  for (let y = 0; y \u003c H; y++) {\n    let gr = 0;\n    let gg = 0;\n    let gb = 0;\n    if (P.glow > 0) {\n      const band = Math.max(0, 1 - Math.abs(y / H - (1 - (1 - P.glow) * 1.4)) * 5);\n      if (band > 0) {\n        hsvInto(col, 0, y / H + P.hue + P.time * 0.5, 0.7, band);\n        gr = col[0];\n        gg = col[1];\n        gb = col[2];\n      }\n    }\n    for (const [x, base] of [[0, 0.55], [1, 1], [W - 2, 1], [W - 1, 0.55]]) {\n      const p = (y * W + x) * 3;\n      img[p] = 64 * base + gr;\n      img[p + 1] = 72 * base + gg;\n      img[p + 2] = 96 * base + gb;\n    }\n  }\n  if (!open)\n    for (const [y, base] of [[H - 2, 1], [H - 1, 0.55]])\n      for (let x = 2; x \u003c W - 2; x++) {\n        const p = (y * W + x) * 3;\n        img[p] = 64 * base;\n        img[p + 1] = 72 * base;\n        img[p + 2] = 96 * base;\n      }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, img[p]), Math.min(255, img[p + 1]), Math.min(255, img[p + 2]));\n    }\n}\n","layer":{"id":"layer-tetromino-well","type":"code","name":"tetromino-well","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Tetromino Well\n// Family:  algo\n// Idea:    The standing panel is a falling-block well ten cells wide and twenty-one tall, and a player that never tires stacks the pieces two thirds of the way up before it burns them down, four lines at a time when the long bar comes.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the falling-block puzzle of Tetris (Alexey Pajitnov, 1984); the player weighs every landing with holes, bumps and wells, after Pierre Dellacherie's one-piece controller\n// Round:   10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Headroom=6..18, Garbage=0..1\n//\n// Knob 1: Hue. Turns the seven piece colours together, starting from the usual cyan bar, yellow square, purple T, green S, red Z, blue J and orange L.\n// Knob 2: Speed. How fast pieces fall and rows clear: where it starts a piece drops ten rows a second, at the bottom of the range it drifts down one.\n// Knob 3: Headroom. The rows the player keeps free above its stack: at 6 it builds two thirds of the way up the panel before it starts taking lines, at 18 it keeps the stack on the floor.\n// Knob 4: Garbage. The chance that a grey row with one hole pushes up from the floor as each piece arrives; turned up, the stack climbs until it tops out and the floor drops it.\n// Buttons: K1 tap sends the long bar next, and the player drops it into the well for four lines if four are ready.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CELL = 6;\nconst COLS = 10;\nconst ROWS = 21;\n// Two rows above the panel where a piece comes in from.\nconst HID = 2;\nconst BR = ROWS + HID;\n// 10 cells of 6 LEDs leave two LEDs of wall on each side; 21 rows leave two LEDs of floor.\nconst X0 = 2;\n// The player keeps the right-hand column open for the long bar.\nconst WELL = COLS - 1;\nconst GARBAGE = 8;\nconst BUILD = 0;\nconst BURN = 1;\nconst PANIC = 2;\n\n// Spawn shapes, (x, y) in a 4×4 box for the bar and a 3×3 box for the rest:\n// I, O, T, S, Z, J, L.\nconst SHAPES = [\n  [[0, 1], [1, 1], [2, 1], [3, 1]],\n  [[1, 0], [2, 0], [1, 1], [2, 1]],\n  [[1, 0], [0, 1], [1, 1], [2, 1]],\n  [[1, 0], [2, 0], [0, 1], [1, 1]],\n  [[0, 0], [1, 0], [1, 1], [2, 1]],\n  [[0, 0], [0, 1], [1, 1], [2, 1]],\n  [[2, 0], [0, 1], [1, 1], [2, 1]],\n];\n// The guideline colours: cyan, yellow, purple, green, red, blue, orange.\nconst HUES = [0.5, 0.15, 0.79, 0.33, 0.995, 0.63, 0.075];\n\n// ROT[type][r] is the shape turned r quarters clockwise.\nconst ROT = SHAPES.map((cells, type) => {\n  const out = [cells];\n  for (let r = 1; r \u003c 4; r++) {\n    const prev = out[r - 1];\n    if (type === 1) out.push(prev);\n    else if (type === 0) out.push(prev.map(([x, y]) => [3 - y, x]));\n    else out.push(prev.map(([x, y]) => [2 - y, x]));\n  }\n  return out;\n});\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction fits(board, cells, x, y) {\n  for (let i = 0; i \u003c 4; i++) {\n    const c = x + cells[i][0];\n    const r = y + cells[i][1];\n    if (c \u003c 0 || c >= COLS || r >= BR) return false;\n    if (r >= 0 && board[r * COLS + c]) return false;\n  }\n  return true;\n}\n\nfunction dropRow(board, cells, x, y) {\n  while (fits(board, cells, x, y + 1)) y++;\n  return y;\n}\n\nfunction fullRows(board) {\n  const rows = [];\n  for (let r = 0; r \u003c BR; r++) {\n    let n = 0;\n    for (let c = 0; c \u003c COLS; c++) if (board[r * COLS + c]) n++;\n    if (n === COLS) rows.push(r);\n  }\n  return rows;\n}\n\n// Take the rows out and let everything above them fall in.\nfunction removeRows(board, rows) {\n  let dst = BR - 1;\n  for (let src = BR - 1; src >= 0; src--) {\n    if (rows.includes(src)) continue;\n    if (dst !== src) for (let c = 0; c \u003c COLS; c++) board[dst * COLS + c] = board[src * COLS + c];\n    dst--;\n  }\n  for (; dst >= 0; dst--) for (let c = 0; c \u003c COLS; c++) board[dst * COLS + c] = 0;\n}\n\nfunction heights(board, h) {\n  let max = 0;\n  for (let c = 0; c \u003c COLS; c++) {\n    let r = 0;\n    while (r \u003c BR && !board[r * COLS + c]) r++;\n    h[c] = BR - r;\n    if (h[c] > max) max = h[c];\n  }\n  return max;\n}\n\n// How the player likes a board, after Dellacherie with El-Tetris's weights:\n// few changes between full and empty along rows and down columns, no holes,\n// no narrow pits. The right-hand column counts as wall: the player keeps it\n// for the long bar. Three rows from the top it panics and counts it in.\nfunction boardScore(P, board, mode) {\n  const h = P.h;\n  heights(board, h);\n  const last = mode === PANIC ? COLS : WELL;\n  let rowT = 0;\n  for (let r = 0; r \u003c BR; r++) {\n    let prev = 1;\n    for (let c = 0; c \u003c last; c++) {\n      const f = board[r * COLS + c] ? 1 : 0;\n      if (f !== prev) rowT++;\n      prev = f;\n    }\n    if (!prev) rowT++;\n  }\n  let colT = 0;\n  let holes = 0;\n  for (let c = 0; c \u003c COLS; c++) {\n    let prev = 0;\n    for (let r = 0; r \u003c BR; r++) {\n      const f = board[r * COLS + c] ? 1 : 0;\n      if (f !== prev) colT++;\n      if (!f && r >= BR - h[c]) holes++;\n      prev = f;\n    }\n    if (!prev) colT++;\n  }\n  let wells = 0;\n  for (let c = 0; c \u003c last; c++) {\n    let depth = 0;\n    for (let r = 0; r \u003c BR; r++) {\n      const left = c === 0 || board[r * COLS + c - 1];\n      const right = c + 1 === last || board[r * COLS + c + 1];\n      if (!board[r * COLS + c] && left && right) wells += ++depth;\n      else depth = 0;\n    }\n  }\n  let s = -3.2 * rowT - 9.3 * colT - 7.9 * holes - 3.4 * wells;\n  if (mode === BURN) for (let c = 0; c \u003c WELL; c++) if (h[c] > P.target) s -= 1.5 * (h[c] - P.target);\n  return s;\n}\n\n// Drop a piece onto a copy of the board and score the move itself: the piece\n// low and its cells in the rows it clears. Below its line the player saves\n// the rows that are ready and keeps everything out of the right-hand column;\n// at the line it takes four at a time whenever the bar comes; in a panic it\n// fills whatever clears a line.\nfunction move(P, board, out, type, rot, x, y, mode) {\n  const cells = ROT[type][rot];\n  out.set(board);\n  let inWell = 0;\n  let top = 4;\n  let bottom = 0;\n  for (let i = 0; i \u003c 4; i++) {\n    out[(y + cells[i][1]) * COLS + x + cells[i][0]] = type + 1;\n    if (x + cells[i][0] === WELL) inWell++;\n    top = Math.min(top, cells[i][1]);\n    bottom = Math.max(bottom, cells[i][1]);\n  }\n  const rows = fullRows(out);\n  let eroded = 0;\n  for (let i = 0; i \u003c 4; i++) if (rows.includes(y + cells[i][1])) eroded++;\n  eroded *= rows.length;\n  if (rows.length) removeRows(out, rows);\n  const lines = rows.length;\n  let s = -4.5 * (BR - y - (top + bottom) / 2) + 3.4 * eroded;\n  if (mode === PANIC) s += 8 * lines;\n  else if (mode === BURN) {\n    if (type !== 0) s -= 40 * inWell;\n    s += 8 * lines + (lines === 4 ? 25 : 0);\n  } else s -= 40 * inWell + 3.4 * eroded + 12 * lines;\n  return s;\n}\n\n// Every turn and column a piece can reach by sliding along the top and\n// dropping straight down.\nfunction each(board, type, fn) {\n  const turns = type === 1 ? 1 : type === 0 || type === 3 || type === 4 ? 2 : 4;\n  for (let rot = 0; rot \u003c turns; rot++) {\n    const cells = ROT[type][rot];\n    if (!fits(board, cells, 3, HID - 1)) continue;\n    for (let dir = -1; dir \u003c= 1; dir += 2)\n      for (let x = dir \u003c 0 ? 3 : 4; x >= -3 && x \u003c= COLS; x += dir) {\n        if (!fits(board, cells, x, HID - 1)) break;\n        fn(rot, x, dropRow(board, cells, x, HID - 1));\n      }\n  }\n}\n\n// The best place for this piece, looking one piece ahead when it can: the\n// player sees the next piece, as the game shows it.\nfunction choose(P, type, next, force) {\n  const board = P.board;\n  const max = heights(board, P.h);\n  if (max >= P.target) P.burn = true;\n  else if (max \u003c= P.target - 3) P.burn = false;\n  const mode = max >= ROWS - 3 ? PANIC : P.burn || force ? BURN : BUILD;\n  let best = null;\n  each(board, type, (rot, x, y) => {\n    let s = move(P, board, P.trial, type, rot, x, y, mode);\n    if (next >= 0) {\n      let after = -Infinity;\n      each(P.trial, next, (r2, x2, y2) => {\n        const s2 = move(P, P.trial, P.trial2, next, r2, x2, y2, mode) + boardScore(P, P.trial2, mode);\n        if (s2 > after) after = s2;\n      });\n      if (after === -Infinity) after = -1000;\n      s += after;\n    } else s += boardScore(P, P.trial, mode);\n    s += Math.random() * 0.3;\n    if (!best || s > best.s) best = { s, rot, x, y };\n  });\n  return best;\n}\n\nfunction fromBag(P) {\n  if (!P.bag.length) {\n    P.bag = [0, 1, 2, 3, 4, 5, 6];\n    for (let i = 6; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.bag[i];\n      P.bag[i] = P.bag[j];\n      P.bag[j] = t;\n    }\n  }\n  return P.bag.pop();\n}\n\n// The piece that comes now. The one after it waits dim at the top of the\n// well: the player sees it coming, as the game shows it.\nfunction nextType(P) {\n  if (P.next \u003c 0) P.next = fromBag(P);\n  const type = P.next;\n  P.forced = P.forceNext;\n  P.forceNext = false;\n  P.next = P.after >= 0 ? P.after : fromBag(P);\n  P.after = -1;\n  return type;\n}\n\n// A grey row with one hole pushes the stack up a row. The hole mostly stays\n// in the same column for a few rows, the way garbage comes in a block, and\n// half the time it lines up under the player's open column.\nfunction addGarbage(P) {\n  const b = P.board;\n  for (let c = 0; c \u003c COLS; c++) if (b[c]) P.toppled = true;\n  b.copyWithin(0, COLS);\n  if (Math.random() \u003c 0.3) P.hole = Math.random() \u003c 0.5 ? WELL : Math.floor(Math.random() * COLS);\n  for (let c = 0; c \u003c COLS; c++) b[(BR - 1) * COLS + c] = c === P.hole ? 0 : GARBAGE;\n  for (let r = 0; r \u003c BR - 1; r++) P.off[r] = P.off[r + 1] + CELL;\n  P.off[BR - 1] = CELL;\n}\n\n// Play without drawing until the stack stands near the player's line, so the\n// panel opens on a game in progress.\nfunction prebuild(P, garbage) {\n  P.board.fill(0);\n  P.off.fill(0);\n  P.vel.fill(0);\n  P.burn = false;\n  const rows = Math.round(garbage * 6);\n  for (let i = 0; i \u003c rows; i++) addGarbage(P);\n  P.off.fill(0);\n  const extra = Math.floor(Math.random() * 7);\n  let after = -1;\n  for (let n = 0; n \u003c 400 && after \u003c extra; n++) {\n    const type = nextType(P);\n    const m = choose(P, type, P.next, false);\n    if (!m) break;\n    const cells = ROT[type][m.rot];\n    for (let i = 0; i \u003c 4; i++) P.board[(m.y + cells[i][1]) * COLS + m.x + cells[i][0]] = type + 1;\n    const full = fullRows(P.board);\n    if (full.length) removeRows(P.board, full);\n    if (after >= 0) after++;\n    else if (heights(P.board, P.h) >= P.target - 1) after = 0;\n  }\n}\n\nfunction spawn(P) {\n  if (P.chance > 0 && Math.random() \u003c P.chance) {\n    addGarbage(P);\n    if (P.toppled) return topple(P);\n  }\n  const type = nextType(P);\n  const m = choose(P, type, P.next, P.forced);\n  if (!m) return topple(P);\n  // The piece that waited at the top lights up there and starts to move.\n  P.type = type;\n  P.rot = 0;\n  P.x = 3;\n  P.y = HID;\n  P.wait = 0;\n  P.goal = m;\n  P.phase = \"move\";\n  P.clock = 0;\n}\n\n// Topped out: the floor opens and the whole stack falls out of the panel.\nfunction topple(P) {\n  P.phase = \"drop\";\n  P.clock = 0;\n  P.fall = 0;\n  P.fallV = 0;\n  P.toppled = false;\n  P.type = -1;\n}\n\nfunction lock(P) {\n  const cells = ROT[P.type][P.rot];\n  P.flashCells.length = 0;\n  for (let i = 0; i \u003c 4; i++) {\n    const r = P.y + cells[i][1];\n    const c = P.x + cells[i][0];\n    if (r >= 0) P.board[r * COLS + c] = P.type + 1;\n    P.flashCells.push(r * COLS + c);\n  }\n  P.flash = 1;\n  P.type = -1;\n  const rows = fullRows(P.board);\n  if (rows.length) {\n    P.clearing = rows;\n    P.phase = \"clear\";\n    if (rows.length === 4) P.glow = 1;\n  } else P.phase = \"rest\";\n  P.clock = 0;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.board = new Uint8Array(BR * COLS);\n  P.trial = new Uint8Array(BR * COLS);\n  P.trial2 = new Uint8Array(BR * COLS);\n  P.h = new Int32Array(COLS);\n  // Each board row's offset in LEDs while it falls into a cleared gap or\n  // rises over a garbage row, and how fast it is falling.\n  P.off = new Float32Array(BR);\n  P.vel = new Float32Array(BR);\n  P.img = new Float32Array(N * 3);\n  P.col = new Float32Array(9 * 3);\n  P.bag = [];\n  P.next = -1;\n  P.after = -1;\n  P.wait = 0;\n  P.hole = 0;\n  P.flashCells = [];\n  P.clearing = [];\n  P.ready = false;\n  P.type = -1;\n  P.phase = \"rest\";\n  P.clock = 0;\n  P.flash = 0;\n  P.glow = 0;\n  P.target = 16;\n  P.burn = false;\n  P.forceNext = false;\n  P.forced = false;\n  P.toppled = false;\n  P.chance = 0;\n  P.hue = 0;\n  P.time = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const tempo = Math.max(0.2, Math.min(3, k[1]));\n  const headroom = Math.round(Math.max(6, Math.min(18, k[2])));\n  const garbage = Math.max(0, Math.min(1, k[3]));\n  P.target = ROWS - headroom;\n  P.chance = garbage * garbage * 0.5;\n  if (!P.ready) {\n    P.ready = true;\n    prebuild(P, garbage);\n    spawn(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.next !== 0) {\n      P.after = P.next;\n      P.next = 0;\n    }\n    P.forceNext = true;\n  }\n\n  const s = dt * tempo;\n  P.time += s;\n  P.flash = Math.max(0, P.flash - s * 6);\n  P.glow = Math.max(0, P.glow - s * 0.9);\n  // The next piece fades in at the top once the live one has dropped clear of it.\n  if (P.phase === \"drop\") P.wait = 0;\n  else if (P.type \u003c 0 || P.y > HID + 2.5) P.wait = Math.min(1, P.wait + s * 5);\n\n  // Rows settle: down into a cleared gap under gravity, up over garbage at a steady pace.\n  let settling = false;\n  for (let r = 0; r \u003c BR; r++) {\n    if (P.off[r] \u003c 0) {\n      P.vel[r] += 220 * s;\n      P.off[r] = Math.min(0, P.off[r] + P.vel[r] * s);\n      if (P.off[r] === 0) P.vel[r] = 0;\n      settling = true;\n    } else if (P.off[r] > 0) {\n      P.off[r] = Math.max(0, P.off[r] - 40 * s);\n      settling = true;\n    }\n  }\n\n  P.clock += s;\n  if (P.phase === \"move\") {\n    // Turn and slide along the top to the chosen column, a row higher where\n    // the stack has come up that far.\n    const g = P.goal;\n    if (P.clock > 0.07) {\n      P.clock = 0;\n      if (P.rot !== g.rot) P.rot = (P.rot + 1) % 4;\n      else if (P.x !== g.x) P.x += Math.sign(g.x - P.x);\n    }\n    P.y = fits(P.board, ROT[P.type][P.rot], P.x, HID) ? HID : HID - 1;\n    if (P.rot === g.rot && P.x === g.x) {\n      P.phase = \"fall\";\n      P.clock = 0;\n    }\n  } else if (P.phase === \"fall\") {\n    P.y += 5 * s;\n    if (P.y >= P.goal.y) {\n      P.y = P.goal.y;\n      lock(P);\n    }\n  } else if (P.phase === \"clear\") {\n    // White, then the cells go from the middle out, then the rows above fall in.\n    if (P.clock > 0.42) {\n      const below = new Int32Array(BR);\n      for (let r = 0; r \u003c BR; r++) for (const c of P.clearing) if (c > r) below[r]++;\n      removeRows(P.board, P.clearing);\n      const moved = new Float32Array(BR);\n      let dst = BR - 1;\n      for (let src = BR - 1; src >= 0; src--) {\n        if (P.clearing.includes(src)) continue;\n        moved[dst] = -below[src] * CELL + P.off[src];\n        dst--;\n      }\n      for (let r = 0; r \u003c BR; r++) {\n        P.off[r] = r \u003c= dst ? 0 : moved[r];\n        P.vel[r] = 0;\n      }\n      P.clearing = [];\n      P.phase = \"rest\";\n      P.clock = 0;\n    }\n  } else if (P.phase === \"rest\") {\n    if (!settling && P.clock > 0.06) spawn(P);\n  } else if (P.phase === \"drop\") {\n    P.fallV += 160 * s;\n    P.fall += P.fallV * s;\n    if (P.fall > H + CELL * 2) {\n      P.board.fill(0);\n      P.off.fill(0);\n      P.vel.fill(0);\n      P.fall = 0;\n      P.burn = false;\n      P.phase = \"rest\";\n      P.clock = -0.5;\n    }\n  }\n}\n\nfunction blockInto(img, x0, y0, rgb, o, white, ghost, dim = 1) {\n  for (let j = 0; j \u003c CELL; j++) {\n    const y = y0 + j;\n    if (y \u003c 0 || y >= H) continue;\n    for (let i = 0; i \u003c CELL; i++) {\n      const x = x0 + i;\n      if (x \u003c X0 || x >= X0 + COLS * CELL) continue;\n      const rim = i === 0 || j === 0 || i === CELL - 1 || j === CELL - 1;\n      if (ghost && !rim) continue;\n      let f = 1;\n      let lift = 0;\n      if (i === CELL - 1 || j === CELL - 1) f = 0.5;\n      else if (i === 0 || j === 0) lift = 0.38;\n      else if (i === 1 && j === 1) lift = 0.6;\n      if (ghost) {\n        f = 0.28;\n        lift = 0;\n      }\n      const p = (y * W + x) * 3;\n      for (let ch = 0; ch \u003c 3; ch++) {\n        let v = rgb[o + ch] * f;\n        v += (255 - v) * lift;\n        v += (255 - v) * white;\n        img[p + ch] = v * dim;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const img = P.img;\n  img.fill(0);\n  const col = P.col;\n  for (let t = 0; t \u003c 7; t++) hsvInto(col, (t + 1) * 3, HUES[t] + P.hue, 0.86, 0.86);\n  col[GARBAGE * 3] = 104;\n  col[GARBAGE * 3 + 1] = 108;\n  col[GARBAGE * 3 + 2] = 122;\n\n  const drop = P.phase === \"drop\" ? Math.round(P.fall) : 0;\n  const clearT = P.phase === \"clear\" ? P.clock : -1;\n  for (let r = 0; r \u003c BR; r++) {\n    const y0 = (r - HID) * CELL + Math.round(P.off[r]) + drop;\n    if (y0 \u003c= -CELL || y0 >= H) continue;\n    const clearing = clearT >= 0 && P.clearing.includes(r);\n    for (let c = 0; c \u003c COLS; c++) {\n      const v = P.board[r * COLS + c];\n      if (!v) continue;\n      let white = 0;\n      if (clearing) {\n        // Flash white for an eighth of a second, then go two columns at a time from the middle.\n        if (clearT \u003c 0.12) white = 0.85;\n        else {\n          const ring = Math.min(4, Math.floor((clearT - 0.12) / 0.06));\n          const fromMid = c \u003c 5 ? 4 - c : c - 5;\n          if (fromMid \u003c= ring) continue;\n          white = 0.5;\n        }\n      }\n      if (P.flash > 0 && P.flashCells.includes(r * COLS + c)) white = Math.max(white, 0.45 * P.flash);\n      blockInto(img, X0 + c * CELL, y0, col, v * 3, white, false);\n    }\n  }\n\n  if (P.wait > 0 && P.next >= 0) {\n    const cells = ROT[P.next][0];\n    for (let i = 0; i \u003c 4; i++) {\n      const r = HID + cells[i][1];\n      const c = 3 + cells[i][0];\n      if (!P.board[r * COLS + c]) blockInto(img, X0 + c * CELL, (r - HID) * CELL, col, (P.next + 1) * 3, 0, false, 0.38 * P.wait);\n    }\n  }\n\n  if (P.type >= 0) {\n    const g = P.goal;\n    const cells = ROT[P.type][P.rot];\n    const o = (P.type + 1) * 3;\n    // Where the player means to put it.\n    const gc = ROT[P.type][g.rot];\n    for (let i = 0; i \u003c 4; i++) blockInto(img, X0 + (g.x + gc[i][0]) * CELL, (g.y + gc[i][1] - HID) * CELL, col, o, 0, true);\n    const py = Math.round((P.y - HID) * CELL);\n    for (let i = 0; i \u003c 4; i++) blockInto(img, X0 + (P.x + cells[i][0]) * CELL, py + cells[i][1] * CELL, col, o, 0, false);\n  }\n\n  // The wall: two LEDs of steel each side and under the floor, which opens\n  // when the stack tops out. After four lines a light runs up both walls.\n  const open = P.phase === \"drop\";\n  for (let y = 0; y \u003c H; y++) {\n    let gr = 0;\n    let gg = 0;\n    let gb = 0;\n    if (P.glow > 0) {\n      const band = Math.max(0, 1 - Math.abs(y / H - (1 - (1 - P.glow) * 1.4)) * 5);\n      if (band > 0) {\n        hsvInto(col, 0, y / H + P.hue + P.time * 0.5, 0.7, band);\n        gr = col[0];\n        gg = col[1];\n        gb = col[2];\n      }\n    }\n    for (const [x, base] of [[0, 0.55], [1, 1], [W - 2, 1], [W - 1, 0.55]]) {\n      const p = (y * W + x) * 3;\n      img[p] = 64 * base + gr;\n      img[p + 1] = 72 * base + gg;\n      img[p + 2] = 96 * base + gb;\n    }\n  }\n  if (!open)\n    for (const [y, base] of [[H - 2, 1], [H - 1, 0.55]])\n      for (let x = 2; x \u003c W - 2; x++) {\n        const p = (y * W + x) * 3;\n        img[p] = 64 * base;\n        img[p + 1] = 72 * base;\n        img[p + 2] = 96 * base;\n      }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, img[p]), Math.min(255, img[p + 1]), Math.min(255, img[p + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Headroom=6..18, Garbage=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the seven piece colours together, starting from the usual cyan bar, yellow square, purple T, green S, red Z, blue J and orange L."},{"name":"Speed","min":0.2,"max":3,"about":"How fast pieces fall and rows clear: where it starts a piece drops ten rows a second, at the bottom of the range it drifts down one."},{"name":"Headroom","min":6,"max":18,"about":"The rows the player keeps free above its stack: at 6 it builds two thirds of the way up the panel before it starts taking lines, at 18 it keeps the stack on the floor."},{"name":"Garbage","min":0,"max":1,"about":"The chance that a grey row with one hole pushes up from the floor as each piece arrives; turned up, the stack climbs until it tops out and the floor drops it."}],"start":[0,2,6,0.06],"measures":{"motion":0.2184,"detail":0.0909,"edges":0.7088,"complexity":0.1224,"coverage":0.6512,"colour":0.4389,"drift":0.0999},"knobResponse":[0.2488,0.0464,0.2189,0.2009]},{"slug":"train-window","title":"Train Window","family":"space","round":17,"note":"달리는 기차 창밖이 층층이 흘러요. 먼 구름과 산은 느리게, 들판과 농가는 빠르게 지나가고 전차선 기둥은 휙 스쳐요. 깎은 비탈이 다가오면 터널이 창을 검게 덮고 나트륨등이 줄을 그으며 지나가요.","idea":"The view from a train window slides by in layers, slower the farther they are, from clouds and hazy mountains to fields, farmhouses, trees and whipping catenary masts, until a cutting closes in and a tunnel turns the glass black with its lamps streaking past.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Train Window\n// Family:  space\n// Idea:    The view from a train window slides by in layers, slower the farther they are, from clouds and hazy mountains to fields, farmhouses, trees and whipping catenary masts, until a cutting closes in and a tunnel turns the glass black with its lamps streaking past.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17; the parallax scrolling of side-scrolling games, from depths in metres through a pinhole camera\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Time=0..1, Speed=0.2..3, Hills=0..1, Rain=0..1\n//\n// Knob 1: Time. The time of day from noon, through a golden afternoon, a sunset behind the mountains, a starry night with lit farmhouse windows and a pink dawn, back to noon.\n// Knob 2: Speed. How fast the train runs: 90 km/h at 2, when a catenary mast crosses the window in a quarter of a second and the mountains hardly move; 9 km/h at 0.2, and 135 km/h at 3.\n// Knob 3: Hills. At 0 farmland under low mountains and a tunnel about every 20 seconds; turned up, the mountains rise nearly three times as high, the hills swell and the tunnels come sooner, then every six to nine seconds.\n// Knob 4: Rain. Raindrops on the glass that the wind drives back along it, and an overcast sky; at the top the light is grey and the glass is crowded.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The window's glass: columns 3 to 60 and rows 6 to 107, corners rounded.\nconst WX0 = 3;\nconst WX1 = 60;\nconst WY0 = 6;\nconst WY1 = 107;\nconst CORNER = 5;\n// The camera looks out from column CX, the horizon on row HOR, F LEDs to one\n// unit of tan, from an embankment EYE metres above the plain.\nconst CX = 31.5;\nconst HOR = 58;\nconst F = 40;\nconst EYE = 12;\n// Depths in metres. Each layer slides F / depth LEDs for every metre the train runs.\nconst Z_CLOUD = 3000;\nconst Z_MOUNT = 2400;\nconst Z_HILL = 320;\nconst Z_WALL = 6;\nconst Z_TUBE = 3.5;\nconst Z_MAST = 4.5;\n// Where the fields change, by depth: a hedge runs along each line.\nconst BANDS = [10, 16, 24, 36, 54, 80, 120, 190, 300, 520, 1e9];\n// Tree rows as depth, spacing, chance of a tree, crown radius in metres.\nconst TREES = [\n  [48, 7, 0.55, 3.2],\n  [19, 11, 0.35, 3.6],\n  [10, 17, 0.22, 4.2],\n];\nconst MAST_GAP = 50;\n// The first tunnel: at Speed 2 the window goes dark 4.4 s in and is light again at 6.6 s.\nconst FIRST = 115;\nconst FIRST_LEN = 45;\nconst CUT = 35;\nconst LAMP_GAP = 8;\n// A lamp's light by rows from its two-row core.\nconst GLOW = [1, 0.4, 0.14, 0.05];\n\n// Fields at noon: pasture, young wheat, ripe wheat, ploughed earth, dark clover, rapeseed.\nconst FIELDS = [\n  [86, 150, 58],\n  [124, 176, 70],\n  [206, 180, 92],\n  [140, 100, 62],\n  [58, 112, 48],\n  [222, 202, 62],\n];\n// The day as [time, sky at the top, sky at the horizon, light on the land]:\n// noon, golden afternoon, sunset, dusk, night, dawn and noon again.\nconst DAY = [\n  [0, 38, 104, 214, 168, 204, 236, 1, 1, 1],\n  [0.2, 64, 112, 196, 238, 204, 150, 1.04, 0.9, 0.7],\n  [0.34, 52, 44, 116, 255, 128, 58, 0.86, 0.55, 0.42],\n  [0.44, 14, 14, 46, 92, 56, 80, 0.3, 0.24, 0.34],\n  [0.5, 3, 5, 18, 16, 20, 44, 0.1, 0.12, 0.2],\n  [0.76, 3, 5, 18, 16, 20, 44, 0.1, 0.12, 0.2],\n  [0.86, 46, 60, 132, 238, 168, 150, 0.72, 0.6, 0.64],\n  [1, 38, 104, 214, 168, 204, 236, 1, 1, 1],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth 1D value noise, 0..1.\nfunction n1(u, s) {\n  const i = Math.floor(u);\n  const f = u - i;\n  const t = f * f * (3 - 2 * f);\n  return hash(i, s) * (1 - t) + hash(i + 1, s) * t;\n}\n\n// The mountain ridge at u, 0..1, its peaks sharpened by the power.\nfunction ridge(u) {\n  return (0.62 * n1(u / 21, 5) + 0.28 * n1(u / 8, 6) + 0.1 * n1(u / 3, 7)) ** 1.6;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction keyed(table, t, out) {\n  let i = 0;\n  while (i \u003c table.length - 2 && t > table[i + 1][0]) i++;\n  const a = table[i];\n  const b = table[i + 1];\n  const f = smooth(0, 1, (t - a[0]) / (b[0] - a[0]));\n  for (let k = 1; k \u003c a.length; k++) out[k - 1] = a[k] + (b[k] - a[k]) * f;\n}\n\nfunction inGlass(x, y) {\n  if (x \u003c WX0 || x > WX1 || y \u003c WY0 || y > WY1) return false;\n  const dx = x \u003c WX0 + CORNER ? WX0 + CORNER - x : x > WX1 - CORNER ? x - (WX1 - CORNER) : 0;\n  const dy = y \u003c WY0 + CORNER ? WY0 + CORNER - y : y > WY1 - CORNER ? y - (WY1 - CORNER) : 0;\n  return dx * dx + dy * dy \u003c= CORNER * CORNER + 1;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.fb = new Float32Array(N * 3);\n  P.glass = new Uint8Array(N);\n  P.wall = new Float32Array(N * 3);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (inGlass(x, y)) {\n        P.glass[p] = 1;\n        continue;\n      }\n      // The carriage wall, the rubber seal and aluminium trim round the glass, the sill.\n      let near = 9;\n      for (let dy = -2; dy \u003c= 2; dy++)\n        for (let dx = -2; dx \u003c= 2; dx++) if (inGlass(x + dx, y + dy)) near = Math.min(near, Math.max(Math.abs(dx), Math.abs(dy)));\n      put(P.wall, p, ...(near === 1 ? [18, 18, 20] : near === 2 ? [118, 120, 124] : y > WY1 + 6 ? [48, 44, 42] : y > WY1 + 2 ? [96, 88, 80] : [56, 51, 48]));\n    }\n  }\n  // A wine-red curtain, gathered at the left and tied back at row 66.\n  for (let y = 0; y \u003c= WY1 + 2; y++) {\n    const w = y \u003c 66 ? 7 - (y / 66) * 3.5 : 3.5 + ((y - 66) / 40) * 3;\n    for (let x = 0; x \u003c WX0 + w; x++) {\n      const p = y * W + x;\n      P.glass[p] = 0;\n      const fold = (x + Math.floor((y \u003c 66 ? 66 - y : y - 66) / 14)) % 3;\n      const v = (fold === 0 ? 0.5 : fold === 2 && y > 66 ? 0.8 : 1) * (y > 63 && y \u003c 69 ? 0.6 : 1);\n      put(P.wall, p, 118 * v, 30 * v, 40 * v);\n    }\n  }\n  // The carriage as the glass reflects it: ceiling lamps, the luggage rack, the\n  // far windows between their pillars, seat backs with white headrest cloths.\n  P.mirror = new Float32Array(N * 3);\n  for (let y = WY0; y \u003c= WY1; y++)\n    for (let x = WX0; x \u003c= WX1; x++) {\n      const p = y * W + x;\n      const seat = (x + 4) % 27;\n      const top = 78 + Math.abs(seat - 12) * 0.25;\n      const pillar = x % 27 \u003c 6 && y > WY0 + 9 ? [54, 50, 46] : [0, 0, 0];\n      let c = pillar;\n      if (y \u003c WY0 + 7) c = y === WY0 + 2 || y === WY0 + 3 ? [96, 90, 74] : [52, 48, 44];\n      else if (y === WY0 + 8) c = [60, 58, 56];\n      else if (y >= 74 && (seat \u003c 3 || seat > 21)) c = y > 98 ? [40, 40, 44] : [0, 0, 0];\n      else if (y >= 74 && y >= top) c = y \u003c top + 5 && seat > 6 && seat \u003c 18 ? [58, 58, 54] : [32, 38, 58];\n      put(P.mirror, p, ...c);\n    }\n  // Clouds: a tileable fractal noise 128 wide and 64 tall.\n  P.cloud = new Float32Array(128 * 64);\n  for (let y = 0; y \u003c 64; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      let v = 0;\n      for (let o = 0; o \u003c 4; o++) {\n        const cx = 4 \u003c\u003c o;\n        const cy = cx >> 1;\n        const ix = Math.floor((x / 128) * cx);\n        const iy = Math.floor((y / 64) * cy);\n        const tx = smooth(0, 1, (x / 128) * cx - ix);\n        const ty = smooth(0, 1, (y / 64) * cy - iy);\n        const c = (i, j) => hash(((ix + i) % cx) + o * 97, (iy + j) % cy);\n        const top = c(0, 0) + (c(1, 0) - c(0, 0)) * tx;\n        v += (0.55 / (1 \u003c\u003c o)) * (top + (c(0, 1) + (c(1, 1) - c(0, 1)) * tx - top) * ty);\n      }\n      P.cloud[y * 128 + x] = v;\n    }\n  // Per column: the tops of the mountains and hills, and their shading.\n  for (const key of [\"mTop\", \"mLit\", \"hTop\", \"hSh\"]) P[key] = new Float32Array(W);\n  P.dark = new Uint8Array(W);\n  P.day = new Float32Array(9);\n  P.sky = P.day.subarray(0, 6);\n  P.light = P.day.subarray(6, 9);\n  P.haze = new Float32Array(3);\n  Object.assign(P, { night: 0, cam: 0, time: 0, hills: 0, rain: 0.06, clock: 0, adapt: 0, tunnels: null, nextKey: 1 });\n  // Raindrops on the glass: x, y and how fast each one runs.\n  P.drops = [];\n  for (let i = 0; i \u003c 160; i++) P.drops.push([WX0 + Math.random() * (WX1 - WX0), WY0 + Math.random() * (WY1 - WY0), 0.6 + 0.8 * Math.random()]);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));\n  P.time = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.hills = clamp(k[2], 0, 1);\n  P.rain = clamp(k[3], 0, 1);\n  if (!P.tunnels) {\n    // In hill country the first tunnel comes sooner.\n    const a = FIRST - 70 * P.hills;\n    P.tunnels = [[a, a + FIRST_LEN]];\n  }\n  P.step = 12.5 * P.speed * dt;\n  P.cam += P.step;\n  P.clock += dt;\n  // Lay the next tunnel once the last one is behind: farther apart in flat country.\n  const tl = P.tunnels;\n  const last = tl[tl.length - 1];\n  if (P.cam > last[1] + 30) {\n    const gap = (480 - 400 * P.hills) * (0.7 + 0.6 * hash(P.nextKey, 1)) + 60;\n    const len = 25 + 50 * hash(P.nextKey, 2) + 30 * P.hills;\n    tl.push([last[1] + gap, last[1] + gap + len]);\n    P.nextKey++;\n    if (tl.length > 3) tl.shift();\n  }\n  // Eyes adjust: dark-adapted in a tunnel, so daylight blazes for a moment after it.\n  const inside = P.tunnelShare || 0;\n  P.adapt += (inside - P.adapt) * Math.min(1, dt * (inside > P.adapt ? 1.6 : 1.4));\n  // Rain runs back along the glass, faster the faster the train.\n  const want = Math.round(P.rain * 160);\n  for (let i = 0; i \u003c want; i++) {\n    const d = P.drops[i];\n    d[0] -= dt * d[2] * (2 + 7 * P.speed);\n    d[1] += dt * d[2] * (1.5 + 1.5 * P.speed) * 0.4;\n    if (d[0] \u003c WX0 || d[1] > WY1) {\n      d[0] = WX0 + Math.random() * (WX1 - WX0);\n      d[1] = WY0 + Math.random() * (WY1 - WY0);\n    }\n  }\n}\n\n// The line at X metres: 0 open, 1 a cutting (its wall's height in out[0]), 2 a portal, 3 a tunnel.\nfunction track(P, X, out) {\n  const tl = P.tunnels;\n  for (let i = 0; i \u003c tl.length; i++) {\n    const a = tl[i][0];\n    const b = tl[i][1];\n    if (X >= a && X \u003c b) return 3;\n    if ((X >= a - 1.4 && X \u003c a) || (X >= b && X \u003c b + 1.4)) return 2;\n    const u = X \u003c a ? 1 - (a - X) / CUT : 1 - (X - b) / (CUT * 0.7);\n    if (u > 0 && u \u003c 1) {\n      out[0] = -7 + 17 * Math.pow(u, 1.4);\n      return 1;\n    }\n  }\n  return 0;\n}\n\nconst CUTH = new Float32Array(1);\n\nfunction put(fb, p, r, g, b) {\n  fb[p * 3] = r;\n  fb[p * 3 + 1] = g;\n  fb[p * 3 + 2] = b;\n}\n\n// A colour on the land, lit by the hour and faded into the haze.\nfunction land(P, p, r, g, b, fade) {\n  const { light: L, haze: h } = P;\n  put(P.fb, p, r * L[0] * (1 - fade) + h[0] * fade, g * L[1] * (1 - fade) + h[1] * fade, b * L[2] * (1 - fade) + h[2] * fade);\n}\n\nfunction mix(fb, p, r, g, b, a) {\n  fb[p * 3] += (r - fb[p * 3]) * a;\n  fb[p * 3 + 1] += (g - fb[p * 3 + 1]) * a;\n  fb[p * 3 + 2] += (b - fb[p * 3 + 2]) * a;\n}\n\n// Per frame: the sky, the light, the haze and the far silhouettes.\nfunction frameLight(P) {\n  const { sky, light: L, rain, cam } = P;\n  keyed(DAY, P.time, P.day);\n  // Overcast: the sky goes grey and the land dims.\n  const grey = 0.75 * rain;\n  const dim = 1 - 0.35 * rain;\n  const lum = (L[0] + L[1] + L[2]) / 3;\n  for (let i = 0; i \u003c 6; i++) sky[i] += (150 * lum + 12 - sky[i]) * grey;\n  for (let i = 0; i \u003c 3; i++) L[i] *= dim;\n  P.night = 1 - smooth(0.05, 0.35, lum);\n  P.haze[0] = sky[3];\n  P.haze[1] = sky[4];\n  P.haze[2] = sky[5];\n  const offM = (cam * F) / Z_MOUNT;\n  const offH = (cam * F) / Z_HILL;\n  const offC = (cam * F) / Z_CLOUD + P.clock * 0.6;\n  const mAmp = 18 + 30 * P.hills;\n  const hAmp = 6 + 20 * P.hills;\n  for (let x = 0; x \u003c W; x++) {\n    const u = x + offM;\n    const m = ridge(u);\n    const m2 = ridge(u + 1);\n    P.mTop[x] = HOR - 2 - mAmp * m;\n    // The sun is in the south-west: faces that fall to the right are in shade.\n    P.mLit[x] = m2 > m ? 1 : 0.72;\n    const h = x + offH;\n    P.hTop[x] = HOR + 1 - hAmp * (0.7 * n1(h / 15, 8) + 0.3 * n1(h / 5, 9)) - 1.5;\n    P.hSh[x] = 0.8 + 0.2 * n1(h / 3, 11);\n  }\n  P.offC = offC;\n}\n\n// The land and the sky, LED by LED.\nfunction paintLand(P) {\n  const { fb, glass, cam, light: L, sky, rain, night, offC } = P;\n  for (let y = WY0; y \u003c= WY1; y++) {\n    const s = (y - WY0) / (HOR - WY0);\n    const sr = sky[0] + (sky[3] - sky[0]) * s;\n    const sg = sky[1] + (sky[4] - sky[1]) * s;\n    const sb = sky[2] + (sky[5] - sky[2]) * s;\n    const k = y - HOR + 0.5;\n    const z = k > 0 ? (EYE * F) / k : 0;\n    let band = 0;\n    while (z > BANDS[band + 1]) band++;\n    const zUp = k > 1 ? (EYE * F) / (k - 1) : 1e9;\n    const hedge = k > 0 && zUp > BANDS[band + 1];\n    const fade = k > 0 ? 1 - Math.exp(-z / 700) : 0;\n    // Furrows show where a row of LEDs is under 0.84 m of ground: a stripe every 2 m.\n    const furrow = k > 0 && (z * z) / (EYE * F) \u003c 0.84;\n    const rowUp = z * 0.5 - Math.floor(z * 0.5) \u003c 0.5;\n    // A near row slides several LEDs a frame: blur it along the line.\n    const slide = k > 0 ? (P.step * F) / z : 0;\n    const taps = slide > 3 ? Math.min(4, Math.ceil(slide / 2)) : 1;\n    const bw = 18 + 0.35 * BANDS[band];\n    const shift = hash(band, 3);\n    let lastCell = 1e9;\n    let lastKind = 0;\n    for (let x = WX0; x \u003c= WX1; x++) {\n      const p = y * W + x;\n      if (!glass[p]) continue;\n      if (k \u003c= 0 || y \u003c P.hTop[x]) {\n        if (y >= P.hTop[x]) {\n          const sh = P.hSh[x];\n          land(P, p, 44 * sh, 100 * sh, 41 * sh, 0.3);\n        } else if (y >= P.mTop[x]) {\n          // Snow above row 32; the haze thins down the slopes.\n          const lit = P.mLit[x] * (y \u003c HOR - 26 ? 1.45 : 1);\n          land(P, p, 92 * lit, 104 * lit, 128 * lit, 0.45 - 0.15 * ((y - P.mTop[x]) / 30));\n        } else {\n          let r = sr;\n          let g = sg;\n          let b = sb;\n          // Stars come out as the sky darkens.\n          if (night > 0 && hash(x * 131 + y, 77) \u003c 0.012) {\n            const t = night * (90 + 120 * hash(x, y));\n            r += t;\n            g += t;\n            b += t;\n          }\n          // Clouds, stretched along the wind, greyer where they are thick.\n          const cv = P.cloud[((y - WY0) & 63) * 128 + (Math.floor((x + offC) * 0.5) & 127)];\n          const c = smooth(0.49 - 0.22 * rain, 0.54 - 0.2 * rain, cv);\n          if (c > 0) {\n            const top = cv > 0.6 - 0.2 * rain ? 0.82 : 1;\n            r += (235 * top * L[0] * 0.9 + 20 - r) * c;\n            g += (238 * top * L[1] * 0.9 + 20 - g) * c;\n            b += (242 * top * L[2] * 0.9 + 26 - b) * c;\n          }\n          put(fb, p, r, g, b);\n        }\n        continue;\n      }\n      // The plain: fields by depth band, each band cut into fields across the line.\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let t = 0; t \u003c taps; t++) {\n        const X = cam + ((x - CX + 0.5) * z) / F + (t * slide * z) / F / taps;\n        const cell = Math.floor(X / bw + shift);\n        if (cell !== lastCell) {\n          lastCell = cell;\n          lastKind = Math.floor(hash(band * 977 + cell, 4) * FIELDS.length);\n        }\n        const kind = lastKind;\n        const f = FIELDS[kind];\n        let sh = 1;\n        if (furrow) sh += (kind & 1 ? rowUp : X * 0.5 - Math.floor(X * 0.5) \u003c 0.5) ? 0.14 : -0.14;\n        if (hedge) sh = 0.45;\n        r += f[0] * sh;\n        g += f[1] * sh;\n        b += f[2] * sh;\n      }\n      land(P, p, r / taps, g / taps, b / taps, fade);\n    }\n  }\n}\n\n// The sun, low behind the mountains in the afternoon and at sunset.\nfunction paintSun(P) {\n  const { fb, glass } = P;\n  const sun = smooth(0.12, 0.22, P.time) * (1 - smooth(0.36, 0.42, P.time));\n  if (sun > 0) {\n    const sy = HOR - 36 + 24 * smooth(0.15, 0.4, P.time);\n    for (let y = Math.floor(sy - 5); y \u003c= sy + 5; y++)\n      for (let x = 40; x \u003c= 52; x++) {\n        const p = y * W + x;\n        if (y \u003c WY0 || !glass[p] || y >= P.mTop[x] || y > HOR) continue;\n        const d = Math.hypot(x - 46, y - sy);\n        const a = sun * (d \u003c 3.2 ? 1 : Math.max(0, 0.5 - (d - 3.2) * 0.2));\n        if (a > 0) mix(fb, p, 255, 236, 180, a);\n      }\n  }\n}\n\n// Farmhouses: white walls under red and grey roofs, lit windows at night.\nfunction paintHouses(P) {\n  const { glass, cam, night } = P;\n  for (let band = 3; band \u003c 8; band++) {\n    const z = Math.sqrt(BANDS[band] * BANDS[band + 1]);\n    const bw = 18 + 0.35 * BANDS[band];\n    const sc = F / z;\n    const ground = HOR + EYE * sc;\n    const fade = 1 - Math.exp(-z / 700);\n    const c0 = Math.floor((cam - 34 / sc) / bw + hash(band, 3)) - 1;\n    for (let cell = c0; cell \u003c c0 + 4 + (68 / sc) / bw; cell++) {\n      if (hash(band * 977 + cell, 5) > 0.3) continue;\n      const X = (cell - hash(band, 3) + 0.3 + 0.4 * hash(cell, band)) * bw;\n      const sx = CX + (X - cam) * sc;\n      const w = 10 * sc;\n      const wall = 5 * sc;\n      const roof = 3.5 * sc;\n      const red = hash(cell, band + 40) \u003c 0.6;\n      for (let y = Math.floor(ground - wall - roof); y \u003c ground; y++) {\n        const up = ground - y;\n        const inRoof = up > wall;\n        const half = inRoof ? (w * 0.5 + 0.5) * (1 - (up - wall) / roof) : w * 0.5;\n        for (let x = Math.floor(sx - half); x \u003c= sx + half; x++) {\n          if (x \u003c WX0 || x > WX1 || y \u003c WY0 || y > WY1) continue;\n          const p = y * W + x;\n          if (!glass[p]) continue;\n          if (!inRoof && night > 0.3 && up > wall * 0.35 && up \u003c wall * 0.75 && ((x - Math.floor(sx)) & 1) === 0) put(P.fb, p, 255 * night, 200 * night, 90 * night);\n          else if (inRoof) land(P, p, red ? 168 : 92, red ? 62 : 90, red ? 44 : 96, fade);\n          else land(P, p, 222, 216, 200, fade);\n        }\n      }\n    }\n  }\n}\n\n// Trees, the far row first, each crown lit from the upper left in three tones.\nfunction paintTrees(P) {\n  const { glass, cam } = P;\n  for (let row = 0; row \u003c TREES.length; row++) {\n    const [z, gap, chance, rad] = TREES[row];\n    const sc = F / z;\n    const ground = HOR + EYE * sc;\n    const fade = 1 - Math.exp(-z / 700);\n    const i0 = Math.floor((cam - (36 + rad * sc) / sc) / gap);\n    const i1 = Math.ceil((cam + (36 + rad * sc) / sc) / gap);\n    for (let i = i0; i \u003c= i1; i++) {\n      if (hash(i, row + 20) > chance) continue;\n      const X = (i + 0.5 * hash(i, row + 30)) * gap;\n      const sx = CX + (X - cam) * sc;\n      const tall = hash(i, row + 50) \u003c 0.3;\n      const rx = rad * sc * (tall ? 0.45 : 0.8 + 0.4 * hash(i, row + 40));\n      const ry = rad * sc * (tall ? 2.1 : 0.9);\n      const cy = ground - (2.4 * sc + ry);\n      const y0 = Math.max(WY0, Math.floor(cy - ry));\n      const y1 = Math.min(WY1, Math.ceil(ground));\n      const shade = hash(i, row + 60);\n      const irx = 1 / rx;\n      const iry = 1 / ry;\n      for (let y = y0; y \u003c= y1; y++) {\n        for (let x = Math.max(WX0, Math.floor(sx - rx)); x \u003c= Math.min(WX1, Math.ceil(sx + rx)); x++) {\n          const p = y * W + x;\n          if (!glass[p]) continue;\n          const dx = (x + 0.5 - sx) * irx;\n          const dy = (y + 0.5 - cy) * iry;\n          if (dx * dx + dy * dy \u003c 1) {\n            const lit = dx + dy \u003c -0.5 ? 1.08 : dx + dy \u003c 0.3 ? 0.86 : 0.66;\n            land(P, p, (30 + 14 * shade) * lit, (70 + 26 * shade) * lit, 30 * lit, fade);\n          } else if (y > cy && Math.abs(x + 0.5 - sx) \u003c Math.max(0.6, 0.25 * sc)) land(P, p, 52, 40, 30, fade);\n        }\n      }\n    }\n  }\n}\n\n// The cutting's rock walls rising to the portal, its stone face, then the black of the tunnel.\nfunction paintTrack(P) {\n  const { fb, glass, cam, dark } = P;\n  const scW = F / Z_WALL;\n  let darkCols = 0;\n  for (let x = WX0; x \u003c= WX1; x++) {\n    const X = cam + (x + 0.5 - CX) / scW;\n    const kind = track(P, X, CUTH);\n    dark[x] = kind === 3 ? 1 : 0;\n    if (kind === 0) continue;\n    if (kind === 3) darkCols++;\n    // The lip of the cutting is ragged with rock and scrub.\n    const top = kind === 1 ? HOR - CUTH[0] * scW - 2.5 * n1(X * 1.3, 12) - (hash(Math.floor(X * 2), 13) \u003c 0.2 ? 2 : 0) : -1;\n    for (let y = Math.max(WY0, Math.floor(top)); y \u003c= WY1; y++) {\n      const p = y * W + x;\n      if (!glass[p]) continue;\n      if (kind === 3) {\n        put(fb, p, 7, 7, 9);\n        continue;\n      }\n      if (kind === 2) {\n        // Dressed stone in courses of four rows, the joints staggered.\n        const course = y >> 2;\n        const joint = (y & 3) === 0 || Math.floor(X * 1.6 + (course & 1) * 0.5) !== Math.floor((X + 1 / scW) * 1.6 + (course & 1) * 0.5);\n        const v = joint ? 0.5 : 1 - 0.08 * (course % 3);\n        land(P, p, 152 * v, 140 * v, 120 * v, 0);\n        continue;\n      }\n      // Rock in tilted beds of pale and dark stone, grass along the lip.\n      const bed = Math.floor((HOR - y) / scW * 1.3 + 0.8 * Math.sin(X * 0.25)) & 1;\n      if (y - top \u003c 2) land(P, p, 70, 112, 50, 0);\n      else if (bed) land(P, p, 156, 142, 118, 0);\n      else land(P, p, 102, 92, 78, 0);\n    }\n  }\n  P.tunnelShare = darkCols / (WX1 - WX0 + 1);\n}\n\n// Sodium lamps every eight metres on the tunnel wall, smeared into streaks by the run.\nfunction paintLamps(P) {\n  const { fb, glass, cam, dark } = P;\n  const scT = F / Z_TUBE;\n  // The eye holds a lamp a little longer than a frame.\n  const streak = Math.max(1, 1.5 * P.step * scT);\n  const lampGain = 0.55 + 0.45 * P.adapt;\n  const l0 = Math.floor((cam - 40 / scT) / LAMP_GAP);\n  for (let i = l0; i \u003c l0 + 3; i++) {\n    const X = i * LAMP_GAP;\n    if (track(P, X, CUTH) !== 3) continue;\n    const sx = CX + (X - cam) * scT;\n    for (let x = Math.floor(sx); x \u003c sx + streak; x++) {\n      if (x \u003c WX0 || x > WX1) continue;\n      const along = 1 - (x - sx) / (streak + 1);\n      for (let dy = -3; dy \u003c= 4; dy++) {\n        const y = 48 + dy;\n        const p = y * W + x;\n        if (!glass[p] || dark[x] === 0) continue;\n        const a = GLOW[dy \u003c 0 ? -dy : Math.max(0, dy - 1)] * along * lampGain;\n        fb[p * 3] += 255 * a;\n        fb[p * 3 + 1] += 160 * a;\n        fb[p * 3 + 2] += 60 * a;\n      }\n    }\n  }\n}\n\n// Catenary masts and their wires, which rise and dip across the window as the spans go by.\nfunction paintMasts(P) {\n  const { fb, glass, cam, light: L } = P;\n  const scW = F / Z_WALL;\n  const scM = F / Z_MAST;\n  const m0 = Math.floor((cam - 40 / scM) / MAST_GAP);\n  for (let i = m0; i \u003c= m0 + 2; i++) {\n    const X = i * MAST_GAP;\n    if (track(P, X, CUTH) >= 2) continue;\n    const sx = CX + (X - cam) * scM;\n    const topY = HOR - 5.2 * scM;\n    for (let x = Math.floor(sx - 1); x \u003c= sx + 1 + 3; x++) {\n      if (x \u003c WX0 || x > WX1) continue;\n      const a = x \u003c= sx + 1 ? 1 : 0.35;\n      for (let y = Math.max(WY0, Math.floor(topY)); y \u003c= WY1; y++) {\n        const p = y * W + x;\n        if (glass[p]) mix(fb, p, 46 * L[0] + 6, 50 * L[1] + 6, 46 * L[2] + 8, a);\n      }\n    }\n  }\n  for (let x = WX0; x \u003c= WX1; x++) {\n    const X = cam + (x + 0.5 - CX) / scM;\n    if (track(P, cam + (x + 0.5 - CX) / scW, CUTH) >= 2) continue;\n    const u = X / MAST_GAP - Math.floor(X / MAST_GAP);\n    const ym = Math.round(HOR - (4.4 - 3.2 * u * (1 - u)) * scM);\n    const yc = Math.round(HOR - 3.0 * scM);\n    const dropper = X - Math.floor(X / 6) * 6 \u003c 0.12;\n    for (let y = ym; y \u003c= yc; y++) {\n      if (y !== ym && y !== yc && !dropper) continue;\n      if (y \u003c WY0) continue;\n      const p = y * W + x;\n      if (glass[p]) mix(fb, p, 26, 28, 28, 0.85);\n    }\n  }\n}\n\n// Raindrops: each a bead of brighter light with a short trail behind it.\nfunction paintRain(P) {\n  const { fb, glass } = P;\n  const drops = Math.round(P.rain * 160);\n  for (let i = 0; i \u003c drops; i++) {\n    const d = P.drops[i];\n    const x = Math.floor(d[0]);\n    const y = Math.floor(d[1]);\n    const len = 1 + Math.floor(P.speed * 1.4 * d[2]);\n    for (let j = 0; j \u003c= len; j++) {\n      const p = y * W + x + j;\n      if (x + j > WX1 || !glass[p]) continue;\n      const a = j === 0 ? 0.55 : 0.3 * (1 - j / (len + 1));\n      mix(fb, p, fb[p * 3] * 0.7 + 70, fb[p * 3 + 1] * 0.7 + 74, fb[p * 3 + 2] * 0.7 + 80, a);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  frameLight(P);\n  paintLand(P);\n  paintSun(P);\n  paintHouses(P);\n  paintTrees(P);\n  paintTrack(P);\n  paintLamps(P);\n  paintMasts(P);\n  paintRain(P);\n  present(display, P);\n}\n\n// Where it is dark outside the glass turns mirror and the carriage shows in it.\nfunction present(display, P) {\n  const { fb, glass, wall, mirror } = P;\n  const glow = 1 + 0.45 * P.adapt;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++, p++) {\n      const q = p * 3;\n      if (!glass[p]) {\n        display.setPixel(x, y, wall[q], wall[q + 1], wall[q + 2]);\n        continue;\n      }\n      let r = fb[q] * glow;\n      let g = fb[q + 1] * glow;\n      let b = fb[q + 2] * glow;\n      const out = r > g ? (r > b ? r : b) : g > b ? g : b;\n      if (out \u003c 60) {\n        const m = 1 - out / 60;\n        r += mirror[q] * m;\n        g += mirror[q + 1] * m;\n        b += mirror[q + 2] * m;\n      }\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n  }\n}\n","layer":{"id":"layer-train-window","type":"code","name":"train-window","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Train Window\n// Family:  space\n// Idea:    The view from a train window slides by in layers, slower the farther they are, from clouds and hazy mountains to fields, farmhouses, trees and whipping catenary masts, until a cutting closes in and a tunnel turns the glass black with its lamps streaking past.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17; the parallax scrolling of side-scrolling games, from depths in metres through a pinhole camera\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Time=0..1, Speed=0.2..3, Hills=0..1, Rain=0..1\n//\n// Knob 1: Time. The time of day from noon, through a golden afternoon, a sunset behind the mountains, a starry night with lit farmhouse windows and a pink dawn, back to noon.\n// Knob 2: Speed. How fast the train runs: 90 km/h at 2, when a catenary mast crosses the window in a quarter of a second and the mountains hardly move; 9 km/h at 0.2, and 135 km/h at 3.\n// Knob 3: Hills. At 0 farmland under low mountains and a tunnel about every 20 seconds; turned up, the mountains rise nearly three times as high, the hills swell and the tunnels come sooner, then every six to nine seconds.\n// Knob 4: Rain. Raindrops on the glass that the wind drives back along it, and an overcast sky; at the top the light is grey and the glass is crowded.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The window's glass: columns 3 to 60 and rows 6 to 107, corners rounded.\nconst WX0 = 3;\nconst WX1 = 60;\nconst WY0 = 6;\nconst WY1 = 107;\nconst CORNER = 5;\n// The camera looks out from column CX, the horizon on row HOR, F LEDs to one\n// unit of tan, from an embankment EYE metres above the plain.\nconst CX = 31.5;\nconst HOR = 58;\nconst F = 40;\nconst EYE = 12;\n// Depths in metres. Each layer slides F / depth LEDs for every metre the train runs.\nconst Z_CLOUD = 3000;\nconst Z_MOUNT = 2400;\nconst Z_HILL = 320;\nconst Z_WALL = 6;\nconst Z_TUBE = 3.5;\nconst Z_MAST = 4.5;\n// Where the fields change, by depth: a hedge runs along each line.\nconst BANDS = [10, 16, 24, 36, 54, 80, 120, 190, 300, 520, 1e9];\n// Tree rows as depth, spacing, chance of a tree, crown radius in metres.\nconst TREES = [\n  [48, 7, 0.55, 3.2],\n  [19, 11, 0.35, 3.6],\n  [10, 17, 0.22, 4.2],\n];\nconst MAST_GAP = 50;\n// The first tunnel: at Speed 2 the window goes dark 4.4 s in and is light again at 6.6 s.\nconst FIRST = 115;\nconst FIRST_LEN = 45;\nconst CUT = 35;\nconst LAMP_GAP = 8;\n// A lamp's light by rows from its two-row core.\nconst GLOW = [1, 0.4, 0.14, 0.05];\n\n// Fields at noon: pasture, young wheat, ripe wheat, ploughed earth, dark clover, rapeseed.\nconst FIELDS = [\n  [86, 150, 58],\n  [124, 176, 70],\n  [206, 180, 92],\n  [140, 100, 62],\n  [58, 112, 48],\n  [222, 202, 62],\n];\n// The day as [time, sky at the top, sky at the horizon, light on the land]:\n// noon, golden afternoon, sunset, dusk, night, dawn and noon again.\nconst DAY = [\n  [0, 38, 104, 214, 168, 204, 236, 1, 1, 1],\n  [0.2, 64, 112, 196, 238, 204, 150, 1.04, 0.9, 0.7],\n  [0.34, 52, 44, 116, 255, 128, 58, 0.86, 0.55, 0.42],\n  [0.44, 14, 14, 46, 92, 56, 80, 0.3, 0.24, 0.34],\n  [0.5, 3, 5, 18, 16, 20, 44, 0.1, 0.12, 0.2],\n  [0.76, 3, 5, 18, 16, 20, 44, 0.1, 0.12, 0.2],\n  [0.86, 46, 60, 132, 238, 168, 150, 0.72, 0.6, 0.64],\n  [1, 38, 104, 214, 168, 204, 236, 1, 1, 1],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth 1D value noise, 0..1.\nfunction n1(u, s) {\n  const i = Math.floor(u);\n  const f = u - i;\n  const t = f * f * (3 - 2 * f);\n  return hash(i, s) * (1 - t) + hash(i + 1, s) * t;\n}\n\n// The mountain ridge at u, 0..1, its peaks sharpened by the power.\nfunction ridge(u) {\n  return (0.62 * n1(u / 21, 5) + 0.28 * n1(u / 8, 6) + 0.1 * n1(u / 3, 7)) ** 1.6;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction keyed(table, t, out) {\n  let i = 0;\n  while (i \u003c table.length - 2 && t > table[i + 1][0]) i++;\n  const a = table[i];\n  const b = table[i + 1];\n  const f = smooth(0, 1, (t - a[0]) / (b[0] - a[0]));\n  for (let k = 1; k \u003c a.length; k++) out[k - 1] = a[k] + (b[k] - a[k]) * f;\n}\n\nfunction inGlass(x, y) {\n  if (x \u003c WX0 || x > WX1 || y \u003c WY0 || y > WY1) return false;\n  const dx = x \u003c WX0 + CORNER ? WX0 + CORNER - x : x > WX1 - CORNER ? x - (WX1 - CORNER) : 0;\n  const dy = y \u003c WY0 + CORNER ? WY0 + CORNER - y : y > WY1 - CORNER ? y - (WY1 - CORNER) : 0;\n  return dx * dx + dy * dy \u003c= CORNER * CORNER + 1;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.fb = new Float32Array(N * 3);\n  P.glass = new Uint8Array(N);\n  P.wall = new Float32Array(N * 3);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (inGlass(x, y)) {\n        P.glass[p] = 1;\n        continue;\n      }\n      // The carriage wall, the rubber seal and aluminium trim round the glass, the sill.\n      let near = 9;\n      for (let dy = -2; dy \u003c= 2; dy++)\n        for (let dx = -2; dx \u003c= 2; dx++) if (inGlass(x + dx, y + dy)) near = Math.min(near, Math.max(Math.abs(dx), Math.abs(dy)));\n      put(P.wall, p, ...(near === 1 ? [18, 18, 20] : near === 2 ? [118, 120, 124] : y > WY1 + 6 ? [48, 44, 42] : y > WY1 + 2 ? [96, 88, 80] : [56, 51, 48]));\n    }\n  }\n  // A wine-red curtain, gathered at the left and tied back at row 66.\n  for (let y = 0; y \u003c= WY1 + 2; y++) {\n    const w = y \u003c 66 ? 7 - (y / 66) * 3.5 : 3.5 + ((y - 66) / 40) * 3;\n    for (let x = 0; x \u003c WX0 + w; x++) {\n      const p = y * W + x;\n      P.glass[p] = 0;\n      const fold = (x + Math.floor((y \u003c 66 ? 66 - y : y - 66) / 14)) % 3;\n      const v = (fold === 0 ? 0.5 : fold === 2 && y > 66 ? 0.8 : 1) * (y > 63 && y \u003c 69 ? 0.6 : 1);\n      put(P.wall, p, 118 * v, 30 * v, 40 * v);\n    }\n  }\n  // The carriage as the glass reflects it: ceiling lamps, the luggage rack, the\n  // far windows between their pillars, seat backs with white headrest cloths.\n  P.mirror = new Float32Array(N * 3);\n  for (let y = WY0; y \u003c= WY1; y++)\n    for (let x = WX0; x \u003c= WX1; x++) {\n      const p = y * W + x;\n      const seat = (x + 4) % 27;\n      const top = 78 + Math.abs(seat - 12) * 0.25;\n      const pillar = x % 27 \u003c 6 && y > WY0 + 9 ? [54, 50, 46] : [0, 0, 0];\n      let c = pillar;\n      if (y \u003c WY0 + 7) c = y === WY0 + 2 || y === WY0 + 3 ? [96, 90, 74] : [52, 48, 44];\n      else if (y === WY0 + 8) c = [60, 58, 56];\n      else if (y >= 74 && (seat \u003c 3 || seat > 21)) c = y > 98 ? [40, 40, 44] : [0, 0, 0];\n      else if (y >= 74 && y >= top) c = y \u003c top + 5 && seat > 6 && seat \u003c 18 ? [58, 58, 54] : [32, 38, 58];\n      put(P.mirror, p, ...c);\n    }\n  // Clouds: a tileable fractal noise 128 wide and 64 tall.\n  P.cloud = new Float32Array(128 * 64);\n  for (let y = 0; y \u003c 64; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      let v = 0;\n      for (let o = 0; o \u003c 4; o++) {\n        const cx = 4 \u003c\u003c o;\n        const cy = cx >> 1;\n        const ix = Math.floor((x / 128) * cx);\n        const iy = Math.floor((y / 64) * cy);\n        const tx = smooth(0, 1, (x / 128) * cx - ix);\n        const ty = smooth(0, 1, (y / 64) * cy - iy);\n        const c = (i, j) => hash(((ix + i) % cx) + o * 97, (iy + j) % cy);\n        const top = c(0, 0) + (c(1, 0) - c(0, 0)) * tx;\n        v += (0.55 / (1 \u003c\u003c o)) * (top + (c(0, 1) + (c(1, 1) - c(0, 1)) * tx - top) * ty);\n      }\n      P.cloud[y * 128 + x] = v;\n    }\n  // Per column: the tops of the mountains and hills, and their shading.\n  for (const key of [\"mTop\", \"mLit\", \"hTop\", \"hSh\"]) P[key] = new Float32Array(W);\n  P.dark = new Uint8Array(W);\n  P.day = new Float32Array(9);\n  P.sky = P.day.subarray(0, 6);\n  P.light = P.day.subarray(6, 9);\n  P.haze = new Float32Array(3);\n  Object.assign(P, { night: 0, cam: 0, time: 0, hills: 0, rain: 0.06, clock: 0, adapt: 0, tunnels: null, nextKey: 1 });\n  // Raindrops on the glass: x, y and how fast each one runs.\n  P.drops = [];\n  for (let i = 0; i \u003c 160; i++) P.drops.push([WX0 + Math.random() * (WX1 - WX0), WY0 + Math.random() * (WY1 - WY0), 0.6 + 0.8 * Math.random()]);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));\n  P.time = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.hills = clamp(k[2], 0, 1);\n  P.rain = clamp(k[3], 0, 1);\n  if (!P.tunnels) {\n    // In hill country the first tunnel comes sooner.\n    const a = FIRST - 70 * P.hills;\n    P.tunnels = [[a, a + FIRST_LEN]];\n  }\n  P.step = 12.5 * P.speed * dt;\n  P.cam += P.step;\n  P.clock += dt;\n  // Lay the next tunnel once the last one is behind: farther apart in flat country.\n  const tl = P.tunnels;\n  const last = tl[tl.length - 1];\n  if (P.cam > last[1] + 30) {\n    const gap = (480 - 400 * P.hills) * (0.7 + 0.6 * hash(P.nextKey, 1)) + 60;\n    const len = 25 + 50 * hash(P.nextKey, 2) + 30 * P.hills;\n    tl.push([last[1] + gap, last[1] + gap + len]);\n    P.nextKey++;\n    if (tl.length > 3) tl.shift();\n  }\n  // Eyes adjust: dark-adapted in a tunnel, so daylight blazes for a moment after it.\n  const inside = P.tunnelShare || 0;\n  P.adapt += (inside - P.adapt) * Math.min(1, dt * (inside > P.adapt ? 1.6 : 1.4));\n  // Rain runs back along the glass, faster the faster the train.\n  const want = Math.round(P.rain * 160);\n  for (let i = 0; i \u003c want; i++) {\n    const d = P.drops[i];\n    d[0] -= dt * d[2] * (2 + 7 * P.speed);\n    d[1] += dt * d[2] * (1.5 + 1.5 * P.speed) * 0.4;\n    if (d[0] \u003c WX0 || d[1] > WY1) {\n      d[0] = WX0 + Math.random() * (WX1 - WX0);\n      d[1] = WY0 + Math.random() * (WY1 - WY0);\n    }\n  }\n}\n\n// The line at X metres: 0 open, 1 a cutting (its wall's height in out[0]), 2 a portal, 3 a tunnel.\nfunction track(P, X, out) {\n  const tl = P.tunnels;\n  for (let i = 0; i \u003c tl.length; i++) {\n    const a = tl[i][0];\n    const b = tl[i][1];\n    if (X >= a && X \u003c b) return 3;\n    if ((X >= a - 1.4 && X \u003c a) || (X >= b && X \u003c b + 1.4)) return 2;\n    const u = X \u003c a ? 1 - (a - X) / CUT : 1 - (X - b) / (CUT * 0.7);\n    if (u > 0 && u \u003c 1) {\n      out[0] = -7 + 17 * Math.pow(u, 1.4);\n      return 1;\n    }\n  }\n  return 0;\n}\n\nconst CUTH = new Float32Array(1);\n\nfunction put(fb, p, r, g, b) {\n  fb[p * 3] = r;\n  fb[p * 3 + 1] = g;\n  fb[p * 3 + 2] = b;\n}\n\n// A colour on the land, lit by the hour and faded into the haze.\nfunction land(P, p, r, g, b, fade) {\n  const { light: L, haze: h } = P;\n  put(P.fb, p, r * L[0] * (1 - fade) + h[0] * fade, g * L[1] * (1 - fade) + h[1] * fade, b * L[2] * (1 - fade) + h[2] * fade);\n}\n\nfunction mix(fb, p, r, g, b, a) {\n  fb[p * 3] += (r - fb[p * 3]) * a;\n  fb[p * 3 + 1] += (g - fb[p * 3 + 1]) * a;\n  fb[p * 3 + 2] += (b - fb[p * 3 + 2]) * a;\n}\n\n// Per frame: the sky, the light, the haze and the far silhouettes.\nfunction frameLight(P) {\n  const { sky, light: L, rain, cam } = P;\n  keyed(DAY, P.time, P.day);\n  // Overcast: the sky goes grey and the land dims.\n  const grey = 0.75 * rain;\n  const dim = 1 - 0.35 * rain;\n  const lum = (L[0] + L[1] + L[2]) / 3;\n  for (let i = 0; i \u003c 6; i++) sky[i] += (150 * lum + 12 - sky[i]) * grey;\n  for (let i = 0; i \u003c 3; i++) L[i] *= dim;\n  P.night = 1 - smooth(0.05, 0.35, lum);\n  P.haze[0] = sky[3];\n  P.haze[1] = sky[4];\n  P.haze[2] = sky[5];\n  const offM = (cam * F) / Z_MOUNT;\n  const offH = (cam * F) / Z_HILL;\n  const offC = (cam * F) / Z_CLOUD + P.clock * 0.6;\n  const mAmp = 18 + 30 * P.hills;\n  const hAmp = 6 + 20 * P.hills;\n  for (let x = 0; x \u003c W; x++) {\n    const u = x + offM;\n    const m = ridge(u);\n    const m2 = ridge(u + 1);\n    P.mTop[x] = HOR - 2 - mAmp * m;\n    // The sun is in the south-west: faces that fall to the right are in shade.\n    P.mLit[x] = m2 > m ? 1 : 0.72;\n    const h = x + offH;\n    P.hTop[x] = HOR + 1 - hAmp * (0.7 * n1(h / 15, 8) + 0.3 * n1(h / 5, 9)) - 1.5;\n    P.hSh[x] = 0.8 + 0.2 * n1(h / 3, 11);\n  }\n  P.offC = offC;\n}\n\n// The land and the sky, LED by LED.\nfunction paintLand(P) {\n  const { fb, glass, cam, light: L, sky, rain, night, offC } = P;\n  for (let y = WY0; y \u003c= WY1; y++) {\n    const s = (y - WY0) / (HOR - WY0);\n    const sr = sky[0] + (sky[3] - sky[0]) * s;\n    const sg = sky[1] + (sky[4] - sky[1]) * s;\n    const sb = sky[2] + (sky[5] - sky[2]) * s;\n    const k = y - HOR + 0.5;\n    const z = k > 0 ? (EYE * F) / k : 0;\n    let band = 0;\n    while (z > BANDS[band + 1]) band++;\n    const zUp = k > 1 ? (EYE * F) / (k - 1) : 1e9;\n    const hedge = k > 0 && zUp > BANDS[band + 1];\n    const fade = k > 0 ? 1 - Math.exp(-z / 700) : 0;\n    // Furrows show where a row of LEDs is under 0.84 m of ground: a stripe every 2 m.\n    const furrow = k > 0 && (z * z) / (EYE * F) \u003c 0.84;\n    const rowUp = z * 0.5 - Math.floor(z * 0.5) \u003c 0.5;\n    // A near row slides several LEDs a frame: blur it along the line.\n    const slide = k > 0 ? (P.step * F) / z : 0;\n    const taps = slide > 3 ? Math.min(4, Math.ceil(slide / 2)) : 1;\n    const bw = 18 + 0.35 * BANDS[band];\n    const shift = hash(band, 3);\n    let lastCell = 1e9;\n    let lastKind = 0;\n    for (let x = WX0; x \u003c= WX1; x++) {\n      const p = y * W + x;\n      if (!glass[p]) continue;\n      if (k \u003c= 0 || y \u003c P.hTop[x]) {\n        if (y >= P.hTop[x]) {\n          const sh = P.hSh[x];\n          land(P, p, 44 * sh, 100 * sh, 41 * sh, 0.3);\n        } else if (y >= P.mTop[x]) {\n          // Snow above row 32; the haze thins down the slopes.\n          const lit = P.mLit[x] * (y \u003c HOR - 26 ? 1.45 : 1);\n          land(P, p, 92 * lit, 104 * lit, 128 * lit, 0.45 - 0.15 * ((y - P.mTop[x]) / 30));\n        } else {\n          let r = sr;\n          let g = sg;\n          let b = sb;\n          // Stars come out as the sky darkens.\n          if (night > 0 && hash(x * 131 + y, 77) \u003c 0.012) {\n            const t = night * (90 + 120 * hash(x, y));\n            r += t;\n            g += t;\n            b += t;\n          }\n          // Clouds, stretched along the wind, greyer where they are thick.\n          const cv = P.cloud[((y - WY0) & 63) * 128 + (Math.floor((x + offC) * 0.5) & 127)];\n          const c = smooth(0.49 - 0.22 * rain, 0.54 - 0.2 * rain, cv);\n          if (c > 0) {\n            const top = cv > 0.6 - 0.2 * rain ? 0.82 : 1;\n            r += (235 * top * L[0] * 0.9 + 20 - r) * c;\n            g += (238 * top * L[1] * 0.9 + 20 - g) * c;\n            b += (242 * top * L[2] * 0.9 + 26 - b) * c;\n          }\n          put(fb, p, r, g, b);\n        }\n        continue;\n      }\n      // The plain: fields by depth band, each band cut into fields across the line.\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let t = 0; t \u003c taps; t++) {\n        const X = cam + ((x - CX + 0.5) * z) / F + (t * slide * z) / F / taps;\n        const cell = Math.floor(X / bw + shift);\n        if (cell !== lastCell) {\n          lastCell = cell;\n          lastKind = Math.floor(hash(band * 977 + cell, 4) * FIELDS.length);\n        }\n        const kind = lastKind;\n        const f = FIELDS[kind];\n        let sh = 1;\n        if (furrow) sh += (kind & 1 ? rowUp : X * 0.5 - Math.floor(X * 0.5) \u003c 0.5) ? 0.14 : -0.14;\n        if (hedge) sh = 0.45;\n        r += f[0] * sh;\n        g += f[1] * sh;\n        b += f[2] * sh;\n      }\n      land(P, p, r / taps, g / taps, b / taps, fade);\n    }\n  }\n}\n\n// The sun, low behind the mountains in the afternoon and at sunset.\nfunction paintSun(P) {\n  const { fb, glass } = P;\n  const sun = smooth(0.12, 0.22, P.time) * (1 - smooth(0.36, 0.42, P.time));\n  if (sun > 0) {\n    const sy = HOR - 36 + 24 * smooth(0.15, 0.4, P.time);\n    for (let y = Math.floor(sy - 5); y \u003c= sy + 5; y++)\n      for (let x = 40; x \u003c= 52; x++) {\n        const p = y * W + x;\n        if (y \u003c WY0 || !glass[p] || y >= P.mTop[x] || y > HOR) continue;\n        const d = Math.hypot(x - 46, y - sy);\n        const a = sun * (d \u003c 3.2 ? 1 : Math.max(0, 0.5 - (d - 3.2) * 0.2));\n        if (a > 0) mix(fb, p, 255, 236, 180, a);\n      }\n  }\n}\n\n// Farmhouses: white walls under red and grey roofs, lit windows at night.\nfunction paintHouses(P) {\n  const { glass, cam, night } = P;\n  for (let band = 3; band \u003c 8; band++) {\n    const z = Math.sqrt(BANDS[band] * BANDS[band + 1]);\n    const bw = 18 + 0.35 * BANDS[band];\n    const sc = F / z;\n    const ground = HOR + EYE * sc;\n    const fade = 1 - Math.exp(-z / 700);\n    const c0 = Math.floor((cam - 34 / sc) / bw + hash(band, 3)) - 1;\n    for (let cell = c0; cell \u003c c0 + 4 + (68 / sc) / bw; cell++) {\n      if (hash(band * 977 + cell, 5) > 0.3) continue;\n      const X = (cell - hash(band, 3) + 0.3 + 0.4 * hash(cell, band)) * bw;\n      const sx = CX + (X - cam) * sc;\n      const w = 10 * sc;\n      const wall = 5 * sc;\n      const roof = 3.5 * sc;\n      const red = hash(cell, band + 40) \u003c 0.6;\n      for (let y = Math.floor(ground - wall - roof); y \u003c ground; y++) {\n        const up = ground - y;\n        const inRoof = up > wall;\n        const half = inRoof ? (w * 0.5 + 0.5) * (1 - (up - wall) / roof) : w * 0.5;\n        for (let x = Math.floor(sx - half); x \u003c= sx + half; x++) {\n          if (x \u003c WX0 || x > WX1 || y \u003c WY0 || y > WY1) continue;\n          const p = y * W + x;\n          if (!glass[p]) continue;\n          if (!inRoof && night > 0.3 && up > wall * 0.35 && up \u003c wall * 0.75 && ((x - Math.floor(sx)) & 1) === 0) put(P.fb, p, 255 * night, 200 * night, 90 * night);\n          else if (inRoof) land(P, p, red ? 168 : 92, red ? 62 : 90, red ? 44 : 96, fade);\n          else land(P, p, 222, 216, 200, fade);\n        }\n      }\n    }\n  }\n}\n\n// Trees, the far row first, each crown lit from the upper left in three tones.\nfunction paintTrees(P) {\n  const { glass, cam } = P;\n  for (let row = 0; row \u003c TREES.length; row++) {\n    const [z, gap, chance, rad] = TREES[row];\n    const sc = F / z;\n    const ground = HOR + EYE * sc;\n    const fade = 1 - Math.exp(-z / 700);\n    const i0 = Math.floor((cam - (36 + rad * sc) / sc) / gap);\n    const i1 = Math.ceil((cam + (36 + rad * sc) / sc) / gap);\n    for (let i = i0; i \u003c= i1; i++) {\n      if (hash(i, row + 20) > chance) continue;\n      const X = (i + 0.5 * hash(i, row + 30)) * gap;\n      const sx = CX + (X - cam) * sc;\n      const tall = hash(i, row + 50) \u003c 0.3;\n      const rx = rad * sc * (tall ? 0.45 : 0.8 + 0.4 * hash(i, row + 40));\n      const ry = rad * sc * (tall ? 2.1 : 0.9);\n      const cy = ground - (2.4 * sc + ry);\n      const y0 = Math.max(WY0, Math.floor(cy - ry));\n      const y1 = Math.min(WY1, Math.ceil(ground));\n      const shade = hash(i, row + 60);\n      const irx = 1 / rx;\n      const iry = 1 / ry;\n      for (let y = y0; y \u003c= y1; y++) {\n        for (let x = Math.max(WX0, Math.floor(sx - rx)); x \u003c= Math.min(WX1, Math.ceil(sx + rx)); x++) {\n          const p = y * W + x;\n          if (!glass[p]) continue;\n          const dx = (x + 0.5 - sx) * irx;\n          const dy = (y + 0.5 - cy) * iry;\n          if (dx * dx + dy * dy \u003c 1) {\n            const lit = dx + dy \u003c -0.5 ? 1.08 : dx + dy \u003c 0.3 ? 0.86 : 0.66;\n            land(P, p, (30 + 14 * shade) * lit, (70 + 26 * shade) * lit, 30 * lit, fade);\n          } else if (y > cy && Math.abs(x + 0.5 - sx) \u003c Math.max(0.6, 0.25 * sc)) land(P, p, 52, 40, 30, fade);\n        }\n      }\n    }\n  }\n}\n\n// The cutting's rock walls rising to the portal, its stone face, then the black of the tunnel.\nfunction paintTrack(P) {\n  const { fb, glass, cam, dark } = P;\n  const scW = F / Z_WALL;\n  let darkCols = 0;\n  for (let x = WX0; x \u003c= WX1; x++) {\n    const X = cam + (x + 0.5 - CX) / scW;\n    const kind = track(P, X, CUTH);\n    dark[x] = kind === 3 ? 1 : 0;\n    if (kind === 0) continue;\n    if (kind === 3) darkCols++;\n    // The lip of the cutting is ragged with rock and scrub.\n    const top = kind === 1 ? HOR - CUTH[0] * scW - 2.5 * n1(X * 1.3, 12) - (hash(Math.floor(X * 2), 13) \u003c 0.2 ? 2 : 0) : -1;\n    for (let y = Math.max(WY0, Math.floor(top)); y \u003c= WY1; y++) {\n      const p = y * W + x;\n      if (!glass[p]) continue;\n      if (kind === 3) {\n        put(fb, p, 7, 7, 9);\n        continue;\n      }\n      if (kind === 2) {\n        // Dressed stone in courses of four rows, the joints staggered.\n        const course = y >> 2;\n        const joint = (y & 3) === 0 || Math.floor(X * 1.6 + (course & 1) * 0.5) !== Math.floor((X + 1 / scW) * 1.6 + (course & 1) * 0.5);\n        const v = joint ? 0.5 : 1 - 0.08 * (course % 3);\n        land(P, p, 152 * v, 140 * v, 120 * v, 0);\n        continue;\n      }\n      // Rock in tilted beds of pale and dark stone, grass along the lip.\n      const bed = Math.floor((HOR - y) / scW * 1.3 + 0.8 * Math.sin(X * 0.25)) & 1;\n      if (y - top \u003c 2) land(P, p, 70, 112, 50, 0);\n      else if (bed) land(P, p, 156, 142, 118, 0);\n      else land(P, p, 102, 92, 78, 0);\n    }\n  }\n  P.tunnelShare = darkCols / (WX1 - WX0 + 1);\n}\n\n// Sodium lamps every eight metres on the tunnel wall, smeared into streaks by the run.\nfunction paintLamps(P) {\n  const { fb, glass, cam, dark } = P;\n  const scT = F / Z_TUBE;\n  // The eye holds a lamp a little longer than a frame.\n  const streak = Math.max(1, 1.5 * P.step * scT);\n  const lampGain = 0.55 + 0.45 * P.adapt;\n  const l0 = Math.floor((cam - 40 / scT) / LAMP_GAP);\n  for (let i = l0; i \u003c l0 + 3; i++) {\n    const X = i * LAMP_GAP;\n    if (track(P, X, CUTH) !== 3) continue;\n    const sx = CX + (X - cam) * scT;\n    for (let x = Math.floor(sx); x \u003c sx + streak; x++) {\n      if (x \u003c WX0 || x > WX1) continue;\n      const along = 1 - (x - sx) / (streak + 1);\n      for (let dy = -3; dy \u003c= 4; dy++) {\n        const y = 48 + dy;\n        const p = y * W + x;\n        if (!glass[p] || dark[x] === 0) continue;\n        const a = GLOW[dy \u003c 0 ? -dy : Math.max(0, dy - 1)] * along * lampGain;\n        fb[p * 3] += 255 * a;\n        fb[p * 3 + 1] += 160 * a;\n        fb[p * 3 + 2] += 60 * a;\n      }\n    }\n  }\n}\n\n// Catenary masts and their wires, which rise and dip across the window as the spans go by.\nfunction paintMasts(P) {\n  const { fb, glass, cam, light: L } = P;\n  const scW = F / Z_WALL;\n  const scM = F / Z_MAST;\n  const m0 = Math.floor((cam - 40 / scM) / MAST_GAP);\n  for (let i = m0; i \u003c= m0 + 2; i++) {\n    const X = i * MAST_GAP;\n    if (track(P, X, CUTH) >= 2) continue;\n    const sx = CX + (X - cam) * scM;\n    const topY = HOR - 5.2 * scM;\n    for (let x = Math.floor(sx - 1); x \u003c= sx + 1 + 3; x++) {\n      if (x \u003c WX0 || x > WX1) continue;\n      const a = x \u003c= sx + 1 ? 1 : 0.35;\n      for (let y = Math.max(WY0, Math.floor(topY)); y \u003c= WY1; y++) {\n        const p = y * W + x;\n        if (glass[p]) mix(fb, p, 46 * L[0] + 6, 50 * L[1] + 6, 46 * L[2] + 8, a);\n      }\n    }\n  }\n  for (let x = WX0; x \u003c= WX1; x++) {\n    const X = cam + (x + 0.5 - CX) / scM;\n    if (track(P, cam + (x + 0.5 - CX) / scW, CUTH) >= 2) continue;\n    const u = X / MAST_GAP - Math.floor(X / MAST_GAP);\n    const ym = Math.round(HOR - (4.4 - 3.2 * u * (1 - u)) * scM);\n    const yc = Math.round(HOR - 3.0 * scM);\n    const dropper = X - Math.floor(X / 6) * 6 \u003c 0.12;\n    for (let y = ym; y \u003c= yc; y++) {\n      if (y !== ym && y !== yc && !dropper) continue;\n      if (y \u003c WY0) continue;\n      const p = y * W + x;\n      if (glass[p]) mix(fb, p, 26, 28, 28, 0.85);\n    }\n  }\n}\n\n// Raindrops: each a bead of brighter light with a short trail behind it.\nfunction paintRain(P) {\n  const { fb, glass } = P;\n  const drops = Math.round(P.rain * 160);\n  for (let i = 0; i \u003c drops; i++) {\n    const d = P.drops[i];\n    const x = Math.floor(d[0]);\n    const y = Math.floor(d[1]);\n    const len = 1 + Math.floor(P.speed * 1.4 * d[2]);\n    for (let j = 0; j \u003c= len; j++) {\n      const p = y * W + x + j;\n      if (x + j > WX1 || !glass[p]) continue;\n      const a = j === 0 ? 0.55 : 0.3 * (1 - j / (len + 1));\n      mix(fb, p, fb[p * 3] * 0.7 + 70, fb[p * 3 + 1] * 0.7 + 74, fb[p * 3 + 2] * 0.7 + 80, a);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  frameLight(P);\n  paintLand(P);\n  paintSun(P);\n  paintHouses(P);\n  paintTrees(P);\n  paintTrack(P);\n  paintLamps(P);\n  paintMasts(P);\n  paintRain(P);\n  present(display, P);\n}\n\n// Where it is dark outside the glass turns mirror and the carriage shows in it.\nfunction present(display, P) {\n  const { fb, glass, wall, mirror } = P;\n  const glow = 1 + 0.45 * P.adapt;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++, p++) {\n      const q = p * 3;\n      if (!glass[p]) {\n        display.setPixel(x, y, wall[q], wall[q + 1], wall[q + 2]);\n        continue;\n      }\n      let r = fb[q] * glow;\n      let g = fb[q + 1] * glow;\n      let b = fb[q + 2] * glow;\n      const out = r > g ? (r > b ? r : b) : g > b ? g : b;\n      if (out \u003c 60) {\n        const m = 1 - out / 60;\n        r += mirror[q] * m;\n        g += mirror[q + 1] * m;\n        b += mirror[q + 2] * m;\n      }\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Time=0..1, Speed=0.2..3, Hills=0..1, Rain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Time","min":0,"max":1,"about":"The time of day from noon, through a golden afternoon, a sunset behind the mountains, a starry night with lit farmhouse windows and a pink dawn, back to noon."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the train runs: 90 km/h at 2, when a catenary mast crosses the window in a quarter of a second and the mountains hardly move; 9 km/h at 0.2, and 135 km/h at 3."},{"name":"Hills","min":0,"max":1,"about":"At 0 farmland under low mountains and a tunnel about every 20 seconds; turned up, the mountains rise nearly three times as high, the hills swell and the tunnels come sooner, then every six to nine seconds."},{"name":"Rain","min":0,"max":1,"about":"Raindrops on the glass that the wind drives back along it, and an overcast sky; at the top the light is grey and the glass is crowded."}],"start":[0,2,0,0.06],"measures":{"motion":0.6601,"detail":0.0493,"edges":0.717,"complexity":0.2041,"coverage":0.8669,"colour":0.2389,"drift":0.3599},"knobResponse":[0.2716,0.0947,0.2843,0.1097]},{"slug":"truchet","title":"Truchet","family":"geometry","round":1,"note":"타일마다 같은 사분원 둘이 있어요. 한 장을 90도 돌리면 길 둘이 하나로 이어지거나 하나가 둘로 끊겨요.","idea":"Every tile holds the same two quarter circles, and turning one tile a quarter turn is enough to join two paths into one or cut one in two.","buttons":"K1 tap turns a quarter of the tiles at once.","code":"// ===== Patternflow pattern =====\n// Title:   Truchet\n// Family:  geometry\n// Idea:    Every tile holds the same two quarter circles, and turning one tile a quarter turn is enough to join two paths into one or cut one in two.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Flip Rate=0..5, Tile=8..20, Thickness=0..1\n//\n// Knob 1: Hue. Turns the path colours around the colour wheel.\n// Knob 2: Flip Rate. How often a wave of quarter turns crosses the panel; at 0 the paths hold still and only the light runs along them.\n// Knob 3: Tile. Tile size in LEDs; small is a dense meander, large a few wide loops.\n// Knob 4: Thickness. Line width, from a thin wire to fat ribbons with small dark holes between them.\n// Buttons: K1 tap turns a quarter of the tiles at once.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nfunction hash(a, b) {\n  let n = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  n = Math.imul(n ^ (n >>> 13), 1274126177);\n  return ((n ^ (n >>> 16)) >>> 0) / 4294967296;\n}\n\nconst W = 64;\nconst H = 128;\n// Room for tiles down to 4 LEDs, so nothing is allocated after setup.\nconst MAX_TILES = 16 * 32;\nconst MAX_NODES = 33 * 16 + 32 * 17;\nconst HALF_PI = Math.PI / 2;\n// Arcs between two pulses of light.\nconst PULSE = 5;\n\nexport function setup(params) {\n  params.from = new Uint8Array(MAX_TILES);\n  params.to = new Uint8Array(MAX_TILES);\n  params.prog = new Float32Array(MAX_TILES);\n  params.cross = new Int32Array(MAX_TILES);\n  params.bit = new Uint8Array(MAX_TILES);\n  params.cos = new Float32Array(MAX_TILES);\n  params.sin = new Float32Array(MAX_TILES);\n  params.fill = new Float32Array(MAX_TILES);\n  params.arcA = new Int32Array(MAX_TILES * 2);\n  params.arcB = new Int32Array(MAX_TILES * 2);\n  params.arcStart = new Float32Array(MAX_TILES * 2);\n  params.arcRev = new Uint8Array(MAX_TILES * 2);\n  params.arcPeriod = new Float32Array(MAX_TILES * 2);\n  params.arcTarget = new Float32Array(MAX_TILES * 2);\n  params.arcHue = new Float32Array(MAX_TILES * 2);\n  params.arcCol = new Float32Array(MAX_TILES * 2 * 3);\n  params.seen = new Uint8Array(MAX_TILES * 2);\n  params.walk = new Int32Array(MAX_TILES * 2);\n  params.nodeArc = new Int32Array(MAX_NODES * 2);\n  params.colTile = new Int16Array(W);\n  params.colLocal = new Float32Array(W);\n  params.rowTile = new Int16Array(H);\n  params.rowLocal = new Float32Array(H);\n  params.size = 0;\n  params.wave = 0;\n  params.flow = 0;\n  params.kick = 0;\n}\n\nfunction build(params, size) {\n  params.size = size;\n  params.tw = Math.ceil(W / size);\n  params.th = Math.ceil(H / size);\n  // The grid is centred, so a size that does not divide the panel crops evenly.\n  const ox = (params.tw * size - W) / 2;\n  const oy = (params.th * size - H) / 2;\n  for (let x = 0; x \u003c W; x++) {\n    const gx = x + 0.5 + ox;\n    params.colTile[x] = Math.floor(gx / size);\n    params.colLocal[x] = gx - params.colTile[x] * size;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const gy = y + 0.5 + oy;\n    params.rowTile[y] = Math.floor(gy / size);\n    params.rowLocal[y] = gy - params.rowTile[y] * size;\n  }\n  const n = params.tw * params.th;\n  for (let t = 0; t \u003c n; t++) {\n    const b = hash(t, 7) \u003c 0.5 ? 1 : 0;\n    params.from[t] = b;\n    params.to[t] = b;\n    params.prog[t] = 1;\n    params.cross[t] = -1 \u003c\u003c 30;\n  }\n  params.arcHue.fill(-1);\n  trace(params);\n}\n\n// Join the arcs into paths. Each path is numbered from its lowest edge\n// midpoint, so a path no flip touched keeps its colour and its pulses.\nfunction trace(params) {\n  const tw = params.tw;\n  const th = params.th;\n  const hCount = (th + 1) * tw;\n  const nodes = hCount + th * (tw + 1);\n  const nodeArc = params.nodeArc;\n  nodeArc.fill(-1, 0, nodes * 2);\n  const link = (node, arc) => {\n    if (nodeArc[node * 2] \u003c 0) nodeArc[node * 2] = arc;\n    else nodeArc[node * 2 + 1] = arc;\n  };\n  for (let j = 0; j \u003c th; j++) {\n    for (let i = 0; i \u003c tw; i++) {\n      const t = j * tw + i;\n      const top = j * tw + i;\n      const bottom = (j + 1) * tw + i;\n      const left = hCount + j * (tw + 1) + i;\n      const right = left + 1;\n      const logical = params.prog[t] \u003c 0.5 ? params.from[t] : params.to[t];\n      // Arc 0 starts at the top edge, arc 1 at the bottom edge.\n      params.arcA[t * 2] = top;\n      params.arcB[t * 2] = logical ? right : left;\n      params.arcA[t * 2 + 1] = bottom;\n      params.arcB[t * 2 + 1] = logical ? left : right;\n      link(top, t * 2);\n      link(params.arcB[t * 2], t * 2);\n      link(bottom, t * 2 + 1);\n      link(params.arcB[t * 2 + 1], t * 2 + 1);\n    }\n  }\n  const arcs = tw * th * 2;\n  params.seen.fill(0, 0, arcs);\n  const walk = (start, first) => {\n    let node = start;\n    let arc = first;\n    let len = 0;\n    while (arc >= 0 && !params.seen[arc]) {\n      params.seen[arc] = 1;\n      params.walk[len] = arc;\n      params.arcStart[arc] = len;\n      const forward = params.arcA[arc] === node;\n      params.arcRev[arc] = forward ? 0 : 1;\n      node = forward ? params.arcB[arc] : params.arcA[arc];\n      len++;\n      arc = nodeArc[node * 2] === arc ? nodeArc[node * 2 + 1] : nodeArc[node * 2];\n    }\n    const closed = arc >= 0;\n    // A closed loop fits a whole number of pulses, so it has no seam.\n    const period = closed ? len / Math.max(1, Math.round(len / PULSE)) : PULSE;\n    const r = hash(start, 3);\n    let hue = Math.floor(r * 5) * 0.035 - 0.07;\n    if (hash(start, 11) \u003c 0.12) hue += 0.5;\n    for (let w = 0; w \u003c len; w++) {\n      params.arcPeriod[params.walk[w]] = period;\n      params.arcTarget[params.walk[w]] = hue;\n    }\n  };\n  for (let node = 0; node \u003c nodes; node++) {\n    if (nodeArc[node * 2 + 1] \u003c 0 && nodeArc[node * 2] >= 0 && !params.seen[nodeArc[node * 2]]) walk(node, nodeArc[node * 2]);\n  }\n  for (let node = 0; node \u003c nodes; node++) {\n    const a = nodeArc[node * 2];\n    const b = nodeArc[node * 2 + 1];\n    if (a \u003c 0 || b \u003c 0 || params.seen[a]) continue;\n    const na = params.arcA[a] === node ? params.arcB[a] : params.arcA[a];\n    const nb = params.arcA[b] === node ? params.arcB[b] : params.arcA[b];\n    walk(node, na \u003c nb ? a : b);\n  }\n  for (let a = 0; a \u003c arcs; a++) if (params.arcHue[a] \u003c -0.5) params.arcHue[a] = params.arcTarget[a];\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  // K1 at 0 opens on teal rather than the red most of the study opens on.\n  params.hue = k[0] + 0.48;\n  params.rate = k[1];\n  params.thick = k[3];\n  const size = Math.round(k[2]);\n  if (size !== params.size) build(params, size);\n  const tw = params.tw;\n  const th = params.th;\n  const n = tw * th;\n  const kick = input.btnPressed && input.btnPressed[0];\n  if (kick) params.kick++;\n\n  params.wave += dt * params.rate * 0.12;\n  params.flow += dt * 0.45;\n  let dirty = false;\n  for (let t = 0; t \u003c n; t++) {\n    const i = t % tw;\n    const j = (t - i) / tw;\n    // The front runs diagonally down the long side, and each pass turns a different third of the tiles.\n    const c = (j + i * 0.7 + 1.5 * Math.sin(i * 0.6)) / (th + tw * 0.7 + 3);\n    const count = Math.floor(params.wave - c);\n    let flip = false;\n    if (count !== params.cross[t]) {\n      if (params.cross[t] !== -1 \u003c\u003c 30 && hash(t, count) \u003c 0.35) flip = true;\n      params.cross[t] = count;\n    }\n    if (kick && hash(t, 1000 + params.kick) \u003c 0.25) flip = true;\n    if (flip && params.prog[t] >= 1) {\n      params.from[t] = params.to[t];\n      params.to[t] = 1 - params.to[t];\n      params.prog[t] = 0;\n    }\n    if (params.prog[t] \u003c 1) {\n      const before = params.prog[t];\n      params.prog[t] = Math.min(1, before + dt / 0.5);\n      if (before \u003c 0.5 && params.prog[t] >= 0.5) dirty = true;\n    }\n    const pr = params.prog[t];\n    params.fill[t] = 1 - Math.sin(pr * Math.PI);\n    if (pr >= 1) {\n      params.bit[t] = params.to[t];\n      params.cos[t] = 1;\n      params.sin[t] = 0;\n    } else {\n      const eased = pr * pr * (3 - 2 * pr);\n      const ang = pr \u003c 0.5 ? eased * HALF_PI : (eased - 1) * HALF_PI;\n      params.bit[t] = pr \u003c 0.5 ? params.from[t] : params.to[t];\n      params.cos[t] = Math.cos(ang);\n      params.sin[t] = Math.sin(ang);\n    }\n  }\n  if (dirty) trace(params);\n  // A path that was joined to another one eases into its new colour.\n  const ease = Math.min(1, dt * 3);\n  for (let a = 0; a \u003c n * 2; a++) {\n    let d = params.arcTarget[a] - params.arcHue[a];\n    d -= Math.round(d);\n    params.arcHue[a] += d * ease;\n    params.arcHue[a] -= Math.floor(params.arcHue[a]);\n    const col = hsv(params.hue + params.arcHue[a], 0.85, 1);\n    params.arcCol[a * 3] = col[0];\n    params.arcCol[a * 3 + 1] = col[1];\n    params.arcCol[a * 3 + 2] = col[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.size;\n  const half = S / 2;\n  const tw = params.tw;\n  const hw = 0.8 + params.thick * (S * 0.235 - 0.8);\n  const ground = hsv(params.hue + 0.6, 0.85, 0.16);\n  for (let y = 0; y \u003c H; y++) {\n    const ty = params.rowTile[y];\n    const ly = params.rowLocal[y] - half;\n    for (let x = 0; x \u003c W; x++) {\n      const t = ty * tw + params.colTile[x];\n      const lx = params.colLocal[x] - half;\n      const c = params.cos[t];\n      const s = params.sin[t];\n      const px = c * lx + s * ly + half;\n      const py = -s * lx + c * ly + half;\n      let d0;\n      let d1;\n      if (params.bit[t] === 0) {\n        d0 = Math.hypot(px, py) - half;\n        d1 = Math.hypot(S - px, S - py) - half;\n      } else {\n        d0 = Math.hypot(S - px, py) - half;\n        d1 = Math.hypot(px, S - py) - half;\n      }\n      const which = Math.abs(d0) \u003c= Math.abs(d1) ? 0 : 1;\n      const d = which === 0 ? Math.abs(d0) : Math.abs(d1);\n      const cover = Math.min(1, hw + 0.5 - d);\n      if (cover \u003c= 0) {\n        // The two kinds of region between paths alternate like a chessboard;\n        // one of them glows faintly, and fades while its tile turns.\n        const inside = d0 \u003c 0 || d1 \u003c 0;\n        const parity = (ty + params.colTile[x] + (inside ? params.bit[t] : 1 - params.bit[t])) & 1;\n        if (parity) {\n          const f = params.fill[t];\n          display.setPixel(x, y, ground[0] * f, ground[1] * f, ground[2] * f);\n        } else display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      // Where along the arc this LED sits, from its first end to its second.\n      let theta;\n      if (params.bit[t] === 0) theta = which === 0 ? Math.atan2(py, px) : Math.atan2(S - py, S - px);\n      else theta = which === 0 ? Math.atan2(py, S - px) : Math.atan2(S - py, px);\n      const along = Math.max(0, Math.min(1, theta / HALF_PI));\n      const arc = t * 2 + which;\n      const dist = params.arcStart[arc] + (params.arcRev[arc] ? 1 - along : along);\n      const wave = 0.5 + 0.5 * Math.cos(Math.PI * 2 * (dist / params.arcPeriod[arc] - params.flow));\n      const v = (0.4 + 0.6 * wave * wave * wave) * cover;\n      const col = params.arcCol;\n      display.setPixel(x, y, col[arc * 3] * v, col[arc * 3 + 1] * v, col[arc * 3 + 2] * v);\n    }\n  }\n}\n","layer":{"id":"layer-truchet","type":"code","name":"truchet","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Truchet\n// Family:  geometry\n// Idea:    Every tile holds the same two quarter circles, and turning one tile a quarter turn is enough to join two paths into one or cut one in two.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Flip Rate=0..5, Tile=8..20, Thickness=0..1\n//\n// Knob 1: Hue. Turns the path colours around the colour wheel.\n// Knob 2: Flip Rate. How often a wave of quarter turns crosses the panel; at 0 the paths hold still and only the light runs along them.\n// Knob 3: Tile. Tile size in LEDs; small is a dense meander, large a few wide loops.\n// Knob 4: Thickness. Line width, from a thin wire to fat ribbons with small dark holes between them.\n// Buttons: K1 tap turns a quarter of the tiles at once.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nfunction hash(a, b) {\n  let n = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  n = Math.imul(n ^ (n >>> 13), 1274126177);\n  return ((n ^ (n >>> 16)) >>> 0) / 4294967296;\n}\n\nconst W = 64;\nconst H = 128;\n// Room for tiles down to 4 LEDs, so nothing is allocated after setup.\nconst MAX_TILES = 16 * 32;\nconst MAX_NODES = 33 * 16 + 32 * 17;\nconst HALF_PI = Math.PI / 2;\n// Arcs between two pulses of light.\nconst PULSE = 5;\n\nexport function setup(params) {\n  params.from = new Uint8Array(MAX_TILES);\n  params.to = new Uint8Array(MAX_TILES);\n  params.prog = new Float32Array(MAX_TILES);\n  params.cross = new Int32Array(MAX_TILES);\n  params.bit = new Uint8Array(MAX_TILES);\n  params.cos = new Float32Array(MAX_TILES);\n  params.sin = new Float32Array(MAX_TILES);\n  params.fill = new Float32Array(MAX_TILES);\n  params.arcA = new Int32Array(MAX_TILES * 2);\n  params.arcB = new Int32Array(MAX_TILES * 2);\n  params.arcStart = new Float32Array(MAX_TILES * 2);\n  params.arcRev = new Uint8Array(MAX_TILES * 2);\n  params.arcPeriod = new Float32Array(MAX_TILES * 2);\n  params.arcTarget = new Float32Array(MAX_TILES * 2);\n  params.arcHue = new Float32Array(MAX_TILES * 2);\n  params.arcCol = new Float32Array(MAX_TILES * 2 * 3);\n  params.seen = new Uint8Array(MAX_TILES * 2);\n  params.walk = new Int32Array(MAX_TILES * 2);\n  params.nodeArc = new Int32Array(MAX_NODES * 2);\n  params.colTile = new Int16Array(W);\n  params.colLocal = new Float32Array(W);\n  params.rowTile = new Int16Array(H);\n  params.rowLocal = new Float32Array(H);\n  params.size = 0;\n  params.wave = 0;\n  params.flow = 0;\n  params.kick = 0;\n}\n\nfunction build(params, size) {\n  params.size = size;\n  params.tw = Math.ceil(W / size);\n  params.th = Math.ceil(H / size);\n  // The grid is centred, so a size that does not divide the panel crops evenly.\n  const ox = (params.tw * size - W) / 2;\n  const oy = (params.th * size - H) / 2;\n  for (let x = 0; x \u003c W; x++) {\n    const gx = x + 0.5 + ox;\n    params.colTile[x] = Math.floor(gx / size);\n    params.colLocal[x] = gx - params.colTile[x] * size;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const gy = y + 0.5 + oy;\n    params.rowTile[y] = Math.floor(gy / size);\n    params.rowLocal[y] = gy - params.rowTile[y] * size;\n  }\n  const n = params.tw * params.th;\n  for (let t = 0; t \u003c n; t++) {\n    const b = hash(t, 7) \u003c 0.5 ? 1 : 0;\n    params.from[t] = b;\n    params.to[t] = b;\n    params.prog[t] = 1;\n    params.cross[t] = -1 \u003c\u003c 30;\n  }\n  params.arcHue.fill(-1);\n  trace(params);\n}\n\n// Join the arcs into paths. Each path is numbered from its lowest edge\n// midpoint, so a path no flip touched keeps its colour and its pulses.\nfunction trace(params) {\n  const tw = params.tw;\n  const th = params.th;\n  const hCount = (th + 1) * tw;\n  const nodes = hCount + th * (tw + 1);\n  const nodeArc = params.nodeArc;\n  nodeArc.fill(-1, 0, nodes * 2);\n  const link = (node, arc) => {\n    if (nodeArc[node * 2] \u003c 0) nodeArc[node * 2] = arc;\n    else nodeArc[node * 2 + 1] = arc;\n  };\n  for (let j = 0; j \u003c th; j++) {\n    for (let i = 0; i \u003c tw; i++) {\n      const t = j * tw + i;\n      const top = j * tw + i;\n      const bottom = (j + 1) * tw + i;\n      const left = hCount + j * (tw + 1) + i;\n      const right = left + 1;\n      const logical = params.prog[t] \u003c 0.5 ? params.from[t] : params.to[t];\n      // Arc 0 starts at the top edge, arc 1 at the bottom edge.\n      params.arcA[t * 2] = top;\n      params.arcB[t * 2] = logical ? right : left;\n      params.arcA[t * 2 + 1] = bottom;\n      params.arcB[t * 2 + 1] = logical ? left : right;\n      link(top, t * 2);\n      link(params.arcB[t * 2], t * 2);\n      link(bottom, t * 2 + 1);\n      link(params.arcB[t * 2 + 1], t * 2 + 1);\n    }\n  }\n  const arcs = tw * th * 2;\n  params.seen.fill(0, 0, arcs);\n  const walk = (start, first) => {\n    let node = start;\n    let arc = first;\n    let len = 0;\n    while (arc >= 0 && !params.seen[arc]) {\n      params.seen[arc] = 1;\n      params.walk[len] = arc;\n      params.arcStart[arc] = len;\n      const forward = params.arcA[arc] === node;\n      params.arcRev[arc] = forward ? 0 : 1;\n      node = forward ? params.arcB[arc] : params.arcA[arc];\n      len++;\n      arc = nodeArc[node * 2] === arc ? nodeArc[node * 2 + 1] : nodeArc[node * 2];\n    }\n    const closed = arc >= 0;\n    // A closed loop fits a whole number of pulses, so it has no seam.\n    const period = closed ? len / Math.max(1, Math.round(len / PULSE)) : PULSE;\n    const r = hash(start, 3);\n    let hue = Math.floor(r * 5) * 0.035 - 0.07;\n    if (hash(start, 11) \u003c 0.12) hue += 0.5;\n    for (let w = 0; w \u003c len; w++) {\n      params.arcPeriod[params.walk[w]] = period;\n      params.arcTarget[params.walk[w]] = hue;\n    }\n  };\n  for (let node = 0; node \u003c nodes; node++) {\n    if (nodeArc[node * 2 + 1] \u003c 0 && nodeArc[node * 2] >= 0 && !params.seen[nodeArc[node * 2]]) walk(node, nodeArc[node * 2]);\n  }\n  for (let node = 0; node \u003c nodes; node++) {\n    const a = nodeArc[node * 2];\n    const b = nodeArc[node * 2 + 1];\n    if (a \u003c 0 || b \u003c 0 || params.seen[a]) continue;\n    const na = params.arcA[a] === node ? params.arcB[a] : params.arcA[a];\n    const nb = params.arcA[b] === node ? params.arcB[b] : params.arcA[b];\n    walk(node, na \u003c nb ? a : b);\n  }\n  for (let a = 0; a \u003c arcs; a++) if (params.arcHue[a] \u003c -0.5) params.arcHue[a] = params.arcTarget[a];\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  // K1 at 0 opens on teal rather than the red most of the study opens on.\n  params.hue = k[0] + 0.48;\n  params.rate = k[1];\n  params.thick = k[3];\n  const size = Math.round(k[2]);\n  if (size !== params.size) build(params, size);\n  const tw = params.tw;\n  const th = params.th;\n  const n = tw * th;\n  const kick = input.btnPressed && input.btnPressed[0];\n  if (kick) params.kick++;\n\n  params.wave += dt * params.rate * 0.12;\n  params.flow += dt * 0.45;\n  let dirty = false;\n  for (let t = 0; t \u003c n; t++) {\n    const i = t % tw;\n    const j = (t - i) / tw;\n    // The front runs diagonally down the long side, and each pass turns a different third of the tiles.\n    const c = (j + i * 0.7 + 1.5 * Math.sin(i * 0.6)) / (th + tw * 0.7 + 3);\n    const count = Math.floor(params.wave - c);\n    let flip = false;\n    if (count !== params.cross[t]) {\n      if (params.cross[t] !== -1 \u003c\u003c 30 && hash(t, count) \u003c 0.35) flip = true;\n      params.cross[t] = count;\n    }\n    if (kick && hash(t, 1000 + params.kick) \u003c 0.25) flip = true;\n    if (flip && params.prog[t] >= 1) {\n      params.from[t] = params.to[t];\n      params.to[t] = 1 - params.to[t];\n      params.prog[t] = 0;\n    }\n    if (params.prog[t] \u003c 1) {\n      const before = params.prog[t];\n      params.prog[t] = Math.min(1, before + dt / 0.5);\n      if (before \u003c 0.5 && params.prog[t] >= 0.5) dirty = true;\n    }\n    const pr = params.prog[t];\n    params.fill[t] = 1 - Math.sin(pr * Math.PI);\n    if (pr >= 1) {\n      params.bit[t] = params.to[t];\n      params.cos[t] = 1;\n      params.sin[t] = 0;\n    } else {\n      const eased = pr * pr * (3 - 2 * pr);\n      const ang = pr \u003c 0.5 ? eased * HALF_PI : (eased - 1) * HALF_PI;\n      params.bit[t] = pr \u003c 0.5 ? params.from[t] : params.to[t];\n      params.cos[t] = Math.cos(ang);\n      params.sin[t] = Math.sin(ang);\n    }\n  }\n  if (dirty) trace(params);\n  // A path that was joined to another one eases into its new colour.\n  const ease = Math.min(1, dt * 3);\n  for (let a = 0; a \u003c n * 2; a++) {\n    let d = params.arcTarget[a] - params.arcHue[a];\n    d -= Math.round(d);\n    params.arcHue[a] += d * ease;\n    params.arcHue[a] -= Math.floor(params.arcHue[a]);\n    const col = hsv(params.hue + params.arcHue[a], 0.85, 1);\n    params.arcCol[a * 3] = col[0];\n    params.arcCol[a * 3 + 1] = col[1];\n    params.arcCol[a * 3 + 2] = col[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.size;\n  const half = S / 2;\n  const tw = params.tw;\n  const hw = 0.8 + params.thick * (S * 0.235 - 0.8);\n  const ground = hsv(params.hue + 0.6, 0.85, 0.16);\n  for (let y = 0; y \u003c H; y++) {\n    const ty = params.rowTile[y];\n    const ly = params.rowLocal[y] - half;\n    for (let x = 0; x \u003c W; x++) {\n      const t = ty * tw + params.colTile[x];\n      const lx = params.colLocal[x] - half;\n      const c = params.cos[t];\n      const s = params.sin[t];\n      const px = c * lx + s * ly + half;\n      const py = -s * lx + c * ly + half;\n      let d0;\n      let d1;\n      if (params.bit[t] === 0) {\n        d0 = Math.hypot(px, py) - half;\n        d1 = Math.hypot(S - px, S - py) - half;\n      } else {\n        d0 = Math.hypot(S - px, py) - half;\n        d1 = Math.hypot(px, S - py) - half;\n      }\n      const which = Math.abs(d0) \u003c= Math.abs(d1) ? 0 : 1;\n      const d = which === 0 ? Math.abs(d0) : Math.abs(d1);\n      const cover = Math.min(1, hw + 0.5 - d);\n      if (cover \u003c= 0) {\n        // The two kinds of region between paths alternate like a chessboard;\n        // one of them glows faintly, and fades while its tile turns.\n        const inside = d0 \u003c 0 || d1 \u003c 0;\n        const parity = (ty + params.colTile[x] + (inside ? params.bit[t] : 1 - params.bit[t])) & 1;\n        if (parity) {\n          const f = params.fill[t];\n          display.setPixel(x, y, ground[0] * f, ground[1] * f, ground[2] * f);\n        } else display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      // Where along the arc this LED sits, from its first end to its second.\n      let theta;\n      if (params.bit[t] === 0) theta = which === 0 ? Math.atan2(py, px) : Math.atan2(S - py, S - px);\n      else theta = which === 0 ? Math.atan2(py, S - px) : Math.atan2(S - py, px);\n      const along = Math.max(0, Math.min(1, theta / HALF_PI));\n      const arc = t * 2 + which;\n      const dist = params.arcStart[arc] + (params.arcRev[arc] ? 1 - along : along);\n      const wave = 0.5 + 0.5 * Math.cos(Math.PI * 2 * (dist / params.arcPeriod[arc] - params.flow));\n      const v = (0.4 + 0.6 * wave * wave * wave) * cover;\n      const col = params.arcCol;\n      display.setPixel(x, y, col[arc * 3] * v, col[arc * 3 + 1] * v, col[arc * 3 + 2] * v);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Flip Rate=0..5, Tile=8..20, Thickness=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the path colours around the colour wheel."},{"name":"Flip Rate","min":0,"max":5,"about":"How often a wave of quarter turns crosses the panel; at 0 the paths hold still and only the light runs along them."},{"name":"Tile","min":8,"max":20,"about":"Tile size in LEDs; small is a dense meander, large a few wide loops."},{"name":"Thickness","min":0,"max":1,"about":"Line width, from a thin wire to fat ribbons with small dark holes between them."}],"start":[0,2,8,0.06],"measures":{"motion":0.3464,"detail":0.1313,"edges":0.5615,"complexity":1.2014,"coverage":0.7147,"colour":0.3084,"drift":0.0597},"knobResponse":[0.1766,0.0939,0.1747,0.1431]},{"slug":"tunnel","title":"Tunnel","family":"space","round":1,"note":"가운데서 떨어진 거리로 나누면 평평한 체크무늬가 날아 들어가는 관이 돼요.","idea":"Divide by the distance from the centre and a flat checkerboard becomes a tube you fly down.","buttons":"K1 tap throws the far end of the tube to a new place.","code":"// ===== Patternflow pattern =====\n// Title:   Tunnel\n// Family:  space\n// Idea:    Divide by the distance from the centre and a flat checkerboard becomes a tube you fly down.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=-3..8, Twist=-1..1, Tiles=8..24\n//\n// Knob 1: Hue. The colour of the near rings; the far ones drift round the wheel from it.\n// Knob 2: Speed. Flying forward, and below 0 backing out of the tube.\n// Knob 3: Twist. Winds the tiles into a spiral, either way round.\n// Knob 4: Tiles. How many tiles go round the tube.\n// Buttons: K1 tap throws the far end of the tube to a new place.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nexport function setup(params) {\n  params.z = 0;\n  params.wander = 0;\n  params.kick = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 8];\n  // K1 at 0 opens on violet rather than the red most of the study opens on.\n  params.hue = k[0] + 0.72;\n  params.speed = k[1];\n  params.twist = k[2];\n  params.tiles = Math.round(k[3]);\n  params.z += dt * params.speed * 0.6;\n  params.wander += dt * (0.35 + Math.abs(params.speed) * 0.05);\n  if (input.btnPressed && input.btnPressed[0]) params.kick = 1;\n  params.kick = Math.max(0, params.kick - dt * 0.8);\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  // The far end of the tube wanders, so it reads as a bend rather than a target.\n  const swing = 1 + params.kick * 2.5;\n  const cx = w / 2 + Math.sin(params.wander * 0.9) * w * 0.16 * swing;\n  const cy = h / 2 + Math.sin(params.wander * 1.3 + 1) * h * 0.2 * swing;\n  const tiles = params.tiles;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const dx = x + 0.5 - cx;\n      // LEDs are square, so the tube is round with no aspect factor.\n      const dy = y + 0.5 - cy;\n      const r = Math.sqrt(dx * dx + dy * dy) + 0.001;\n      const depth = 40 / r;\n      const u = depth + params.z;\n      const a = Math.atan2(dy, dx) / (Math.PI * 2) + 0.5;\n      const v = a * tiles + params.twist * depth * 0.8;\n      const ring = Math.floor(u * 3);\n      const check = (ring + Math.floor(v)) & 1;\n      // Fog: the far end fades to black, which also hides the centre's aliasing.\n      // It clears 28 LEDs out, inside the 32 the narrow side of the panel has.\n      const fog = Math.min(1, Math.max(0, (r - 4) / 24));\n      const near = fog * fog;\n      const c = hsv(params.hue + depth * 0.06, check ? 0.9 : 0.55, check ? near : near * 0.22);\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    }\n  }\n}\n","layer":{"id":"layer-tunnel","type":"code","name":"tunnel","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Tunnel\n// Family:  space\n// Idea:    Divide by the distance from the centre and a flat checkerboard becomes a tube you fly down.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=-3..8, Twist=-1..1, Tiles=8..24\n//\n// Knob 1: Hue. The colour of the near rings; the far ones drift round the wheel from it.\n// Knob 2: Speed. Flying forward, and below 0 backing out of the tube.\n// Knob 3: Twist. Winds the tiles into a spiral, either way round.\n// Knob 4: Tiles. How many tiles go round the tube.\n// Buttons: K1 tap throws the far end of the tube to a new place.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nexport function setup(params) {\n  params.z = 0;\n  params.wander = 0;\n  params.kick = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 8];\n  // K1 at 0 opens on violet rather than the red most of the study opens on.\n  params.hue = k[0] + 0.72;\n  params.speed = k[1];\n  params.twist = k[2];\n  params.tiles = Math.round(k[3]);\n  params.z += dt * params.speed * 0.6;\n  params.wander += dt * (0.35 + Math.abs(params.speed) * 0.05);\n  if (input.btnPressed && input.btnPressed[0]) params.kick = 1;\n  params.kick = Math.max(0, params.kick - dt * 0.8);\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  // The far end of the tube wanders, so it reads as a bend rather than a target.\n  const swing = 1 + params.kick * 2.5;\n  const cx = w / 2 + Math.sin(params.wander * 0.9) * w * 0.16 * swing;\n  const cy = h / 2 + Math.sin(params.wander * 1.3 + 1) * h * 0.2 * swing;\n  const tiles = params.tiles;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const dx = x + 0.5 - cx;\n      // LEDs are square, so the tube is round with no aspect factor.\n      const dy = y + 0.5 - cy;\n      const r = Math.sqrt(dx * dx + dy * dy) + 0.001;\n      const depth = 40 / r;\n      const u = depth + params.z;\n      const a = Math.atan2(dy, dx) / (Math.PI * 2) + 0.5;\n      const v = a * tiles + params.twist * depth * 0.8;\n      const ring = Math.floor(u * 3);\n      const check = (ring + Math.floor(v)) & 1;\n      // Fog: the far end fades to black, which also hides the centre's aliasing.\n      // It clears 28 LEDs out, inside the 32 the narrow side of the panel has.\n      const fog = Math.min(1, Math.max(0, (r - 4) / 24));\n      const near = fog * fog;\n      const c = hsv(params.hue + depth * 0.06, check ? 0.9 : 0.55, check ? near : near * 0.22);\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=-3..8, Twist=-1..1, Tiles=8..24","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the near rings; the far ones drift round the wheel from it."},{"name":"Speed","min":-3,"max":8,"about":"Flying forward, and below 0 backing out of the tube."},{"name":"Twist","min":-1,"max":1,"about":"Winds the tiles into a spiral, either way round."},{"name":"Tiles","min":8,"max":24,"about":"How many tiles go round the tube."}],"start":[0,2,0,8],"measures":{"motion":2.5151,"detail":0.0531,"edges":0.4689,"complexity":0.9004,"coverage":0.8993,"colour":0.486,"drift":0.3919},"knobResponse":[0.376,0.2448,0.256,0.2505]},{"slug":"turntables","title":"Turntables","family":"music","round":18,"note":"DJ 의 턴테이블 두 대가 믹서 띠를 사이에 두고 위아래로 서요. 판은 가만히 있는 방 불빛 아래에서 돌며 홈을 드러내고, DJ 는 기다리는 판을 손으로 잡았다가 킥에 맞춰 놓고 크로스페이더를 넘겨요. K2 Pitch 를 0 에 두면 플래터 테두리의 안쪽 스트로브 점이 멈춰 서요.","idea":"Two turntables stacked over a mixer strip, their records spinning under a still band of room light that picks out the grooves, while the DJ holds the waiting record, lets it go on the beat and slides the crossfader over to it.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Turntables\n// Family:  music\n// Idea:    Two turntables stacked over a mixer strip, their records spinning under a still band of room light that picks out the grooves, while the DJ holds the waiting record, lets it go on the beat and slides the crossfader over to it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the direct-drive DJ turntable with its strobe-dotted platter rim and the two-channel mixer between a pair of them\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pitch=-8..8, Scratch=0..1, Light=0..1\n//\n// Knob 1: Hue. Turns the record labels, the meters' LEDs, the crossfader's light and the tint of the room's light round the colour wheel, starting from an amber label over a teal one, green meters and a violet light.\n// Knob 2: Pitch. Both pitch sliders in percent: the records turn at 33 1/3 rpm and the music at 124 BPM, each times 1 plus the pitch. The inner row of strobe dots stands still at 0 and the outer row at +3.3; at +2, where the panel opens, the inner row crawls forward and the outer row back.\n// Knob 3: Scratch. How long and how hard the DJ scratches the waiting record before letting it go: at 0 only a short cue of small rocks over the first kick, at 1 five seconds of strokes up to a quarter turn, with the crossfader cutting the scratch in on every fast stroke.\n// Knob 4: Light. Where the room's light falls, turning the sheen across both records through half a turn and brightening the plinths on that side. The records spin under it and it stays put, swaying a little once a turn because neither record is quite flat.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Both decks' spindles, and their radii in LEDs: label, run-out, grooves, the record's\n// edge, the slipmat and the platter rim with its two rows of strobe dots.\nconst CX = 32;\nconst CY = [29, 99];\nconst R_SPINDLE = 1.3;\nconst R_LABEL = 8.5;\nconst R_RUN = 10.5;\nconst R_GROOVE = 24.6;\nconst R_EDGE = 25.4;\nconst R_MAT = 26.2;\nconst R_RIM = 28.9;\n// A record turns 33 1/3 times a minute, and the music is 124 beats a minute at pitch 0.\nconst OMEGA = ((2 * Math.PI) / 60) * (100 / 3);\nconst BPM = 124;\n// Strobe dots: rows for pitch 0 and +3.3 %, 54 dots a row.\nconst DOTS = 54;\nconst ROWS = [0, 0.033];\n// What each LED is: plinth, platter rim, slipmat, record edge, grooves, run-out, label, spindle.\nconst PLINTH = 0;\nconst RIM = 1;\nconst MAT = 2;\nconst EDGE = 3;\nconst GROOVE = 4;\nconst RUN = 5;\nconst LABEL = 6;\nconst SPINDLE = 7;\nconst MIXER = 8;\n// Parts of the mix: the waiting deck is held and cued, then let go while the crossfader\n// moves over, then it plays alone.\nconst CUE = 0;\nconst MIX = 1;\nconst PLAY = 2;\nconst SKIN = [205, 150, 112];\nconst SLEEVE = [34, 30, 44];\nconst CUFF = [200, 196, 205];\nconst SILVER = [178, 178, 188];\nconst LAMP = [255, 236, 206];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// A groove profile for one side of a record, as brightness against radius every 1/50 LED:\n// five tracks of fine modulated groove with a dark band between them.\nfunction grooves() {\n  const T = new Float32Array(1000);\n  const cuts = [];\n  for (let i = 1; i \u003c 5; i++) cuts.push(R_RUN + 0.6 + ((R_GROOVE - R_RUN - 1) * (i + (Math.random() - 0.5) * 0.6)) / 5);\n  let loud = 0.7;\n  let a = Math.random();\n  let b = Math.random();\n  for (let i = 0; i \u003c T.length; i++) {\n    const r = R_RUN + i / 50;\n    if (i % 45 === 0) (a = b), (b = Math.random());\n    if (cuts.some((c) => Math.abs(r - c) \u003c 0.25)) {\n      T[i] = 0.08;\n      loud = 0.45 + 0.55 * Math.random();\n      continue;\n    }\n    const u = (i % 45) / 45;\n    T[i] = loud * (0.35 + 0.65 * (a + (b - a) * u * u * (3 - 2 * u)));\n  }\n  return T;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, hue: 0, pitch: 0, scratch: 0, light: 0, live: 0, part: CUE, pt: 0, fader: 0, cut: 0, kick: 0, spot: [1, 0.4] });\n  P.kind = new Uint8Array(N);\n  P.deck = new Int8Array(N).fill(-1);\n  P.rr = new Float32Array(N);\n  P.th = new Float32Array(N);\n  P.ai = new Uint16Array(N);\n  P.g = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.sheen = new Float32Array(720);\n  P.q = new Float64Array(14);\n  const T = [grooves(), grooves()];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (y >= 58 && y \u003c 70) {\n        P.kind[p] = MIXER;\n        continue;\n      }\n      const d = y \u003c 58 ? 0 : 1;\n      const dx = x + 0.5 - CX;\n      const dy = y + 0.5 - CY[d];\n      const r = Math.hypot(dx, dy);\n      P.deck[p] = d;\n      P.rr[p] = r;\n      P.th[p] = Math.atan2(dy, dx);\n      P.ai[p] = Math.floor(((P.th[p] + Math.PI) / (2 * Math.PI)) * 360) % 360;\n      P.kind[p] = r \u003c R_SPINDLE ? SPINDLE : r \u003c R_LABEL ? LABEL : r \u003c R_RUN ? RUN : r \u003c R_GROOVE ? GROOVE : r \u003c R_EDGE ? EDGE : r \u003c R_MAT ? MAT : r \u003c R_RIM ? RIM : PLINTH;\n      if (P.kind[p] === GROOVE) {\n        // The groove brightness averaged over the LED, from 16 points inside it.\n        let s = 0;\n        for (let j = 0; j \u003c 16; j++) {\n          const q = Math.hypot(dx - 0.5 + ((j & 3) + 0.5) / 4, dy - 0.5 + ((j >> 2) + 0.5) / 4);\n          s += T[d][clamp(Math.round((q - R_RUN) * 50), 0, 999)];\n        }\n        // Pushed apart, so neighbouring rings of groove differ in the light.\n        P.g[p] = clamp((s / 16 - 0.42) * 2.2 + 0.5, 0.04, 1);\n      }\n    }\n  // Each deck: the record's angle and turn rate, the hand on it, the needle's radius, the\n  // beat and the level its meter shows.\n  P.decks = [0, 1].map((d) => ({\n    phi: Math.random() * 6.28,\n    rate: OMEGA,\n    held: d === 1,\n    hold: 0,\n    hand: d === 1 ? 1 : 0,\n    rock: 0,\n    needle: d === 0 ? 17 + 4 * Math.random() : 23.5,\n    beat: 0,\n    vu: 0,\n    peak: 0,\n    peakT: 0,\n    strobe: [Math.random(), Math.random()],\n    dust: Array.from({ length: 14 }, () => [R_RUN + 1 + Math.random() * 13, Math.random() * 6.28]),\n  }));\n  P.decks[1].hold = P.decks[1].phi;\n}\n\n// How far the waiting record is pushed from where the hand caught it, in radians, s\n// seconds into the cue: strokes while scratching, then small rocks back and forth over\n// the first kick.\nfunction stroke(P, s) {\n  const S = 5 * P.scratch;\n  if (s \u003c 0.6) return 0;\n  if (s \u003c 0.6 + S) {\n    const u = s - 0.6;\n    const amp = 0.5 + P.scratch;\n    // Two strokes a beat, each pushed sharply forward and drawn back slower, every other\n    // one shorter, and the last two beats of every eight small.\n    const beat = (u * BPM) / 60;\n    const f = beat * 2 - Math.floor(beat * 2);\n    const phrase = Math.floor(beat / 2) % 4 === 3 ? 0.3 : 1;\n    return amp * phrase * (f \u003c 0.35 ? f / 0.35 : 1 - (f - 0.35) / 0.65) * (Math.floor(beat * 2) % 2 ? 0.6 : 1);\n  }\n  return 0.22 * Math.sin((s - 0.6 - S) * 2 * Math.PI * 1.6);\n}\n\nfunction step(P, dt) {\n  P.t += dt;\n  P.pt += dt;\n  const rate = OMEGA * (1 + P.pitch);\n  const L = P.decks[P.live];\n  const O = P.decks[1 - P.live];\n  const side = P.live === 0 ? 0 : 1;\n  const S = 5 * P.scratch;\n  if (P.part === CUE) {\n    // The hand comes down on the waiting record and holds it while the platter turns under the mat.\n    const end = 0.6 + S + 1.4;\n    O.hand = Math.min(1, O.hand + dt * 3);\n    if (!O.held) {\n      O.held = true;\n      O.hold = O.phi;\n    }\n    const was = O.rock;\n    O.rock = stroke(P, P.pt);\n    O.phi = O.hold + O.rock;\n    O.rate = (O.rock - was) / Math.max(dt, 1e-4);\n    P.cut = P.pt > 0.6 && P.pt \u003c 0.6 + S && Math.abs(O.rate) > 1.5 ? 1 : 0;\n    P.fader = P.cut ? 1 - side : side;\n    // Let go on the next kick of the playing record, in time with it.\n    if (P.pt > end && L.beat % 1 \u003c (rate / OMEGA) * dt * (BPM / 60) * 1.01) {\n      O.held = false;\n      O.beat = Math.floor(L.beat);\n      P.part = MIX;\n      P.pt = 0;\n    }\n  } else if (P.part === MIX) {\n    const u = clamp(P.pt / 6, 0, 1);\n    P.fader = side + (1 - 2 * side) * u * u * (3 - 2 * u);\n    if (u >= 1) {\n      P.part = PLAY;\n      P.pt = 0;\n    }\n  } else if (P.pt > 12) {\n    P.live = 1 - P.live;\n    P.part = CUE;\n    P.pt = 0;\n  }\n  P.cut = P.part === CUE ? P.cut : 0;\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    if (!k.held) {\n      k.hand = Math.max(0, k.hand - dt * 2.5);\n      k.rate = rate;\n      k.phi += rate * dt;\n      k.beat += (BPM / 60) * (1 + P.pitch) * dt;\n      k.needle -= 0.05 * dt;\n      if (k.needle \u003c R_RUN + 0.6) k.needle = R_GROOVE - 1;\n    }\n    // A strobe row's dots seem to turn at the difference between the platter's speed and the speed the row is for.\n    for (let j = 0; j \u003c 2; j++) k.strobe[j] += (((1 + P.pitch) / (1 + ROWS[j]) - 1) * OMEGA * dt * DOTS) / (2 * Math.PI);\n    // The channel meter: the music while it plays, and the scratch's chirps while it is held.\n    const f = k.beat % 1;\n    const level = k.held ? clamp(Math.abs(k.rate) / 9, 0, 1) : 0.42 + 0.45 * Math.exp(-6 * f) + 0.18 * Math.exp(-14 * ((f + 0.5) % 1)) + 0.08 * Math.random();\n    k.vu = Math.max(level, k.vu - dt * 2.2);\n    if (k.vu >= k.peak || P.t - k.peakT > 0.8) (k.peak = k.vu), (k.peakT = P.t);\n  }\n  // The room's lights jump on each kick of the record playing out.\n  P.kick = Math.exp(-5 * (P.decks[P.part === PLAY ? 1 - P.live : P.live].beat % 1));\n  // The booth light follows the crossfader onto the deck that is playing out.\n  P.spot[0] += (1 - P.fader - P.spot[0]) * Math.min(1, dt * 8);\n  P.spot[1] += (P.fader - P.spot[1]) * Math.min(1, dt * 8);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.pitch = clamp(k[1], -8, 8) / 100;\n  P.scratch = clamp(k[2], 0, 1);\n  P.light = clamp(k[3], 0, 1);\n  for (let i = 0; i \u003c 2; i++) step(P, dt / 2);\n}\n\n// The tonearm of a deck: the pivot in the corner, the arm down to the headshell, the needle in the groove.\nfunction arm(P, B, d) {\n  const cy = CY[d];\n  const k = P.decks[d];\n  const px = CX + 26;\n  const py = cy - 21;\n  const dist = Math.hypot(26, 21);\n  const L = 31.5;\n  const al = Math.atan2(-21, 26) + Math.acos(clamp((dist * dist + k.needle * k.needle - L * L) / (2 * dist * k.needle), -1, 1));\n  const nx = CX + k.needle * Math.cos(al);\n  const ny = cy + k.needle * Math.sin(al);\n  const put = (x, y, c, w = 1) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const o = (y * W + x) * 3;\n    for (let i = 0; i \u003c 3; i++) B[o + i] = B[o + i] * (1 - w) + c[i] * w;\n  };\n  // The stylus lamp lights a pool round the needle.\n  for (let y = -6; y \u003c= 6; y++)\n    for (let x = -6; x \u003c= 6; x++) {\n      const w = Math.max(0, 1 - Math.hypot(x, y) / 6.5) ** 2 * 0.35;\n      const o = (Math.round(ny + y) * W + Math.round(nx + x)) * 3;\n      if (w > 0 && o >= 0 && o \u003c N * 3) for (let i = 0; i \u003c 3; i++) B[o + i] += LAMP[i] * w * 0.4;\n    }\n  const ux = (nx - px) / L;\n  const uy = (ny - py) / L;\n  // Counterweight behind the pivot, the pivot's collar, the arm, the headshell.\n  for (let s = -7; s \u003c -2; s += 0.5) for (const o of [-1, 0, 1]) put(px + ux * s - uy * o, py + uy * s + ux * o, s \u003c -5 ? [70, 70, 78] : [40, 40, 46]);\n  for (let a = 0; a \u003c 6.3; a += 0.3) put(px + 3 * Math.cos(a), py + 3 * Math.sin(a), [120, 120, 130]);\n  put(px, py, [20, 20, 24]);\n  for (let s = 2; s \u003c L - 4; s += 0.5) put(px + ux * s, py + uy * s, SILVER);\n  for (let s = L - 4.5; s \u003c= L; s += 0.5) for (const o of [-1, 0, 1]) put(px + ux * s - uy * o * 0.9, py + uy * s + ux * o * 0.9, o ? [26, 26, 30] : [150, 150, 160]);\n  put(px + ux * (L - 2) + uy * 2.5, py + uy * (L - 2) - ux * 2.5, SILVER);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  const hA = 0.1 + P.hue;\n  const labels = [hsv(hA, 0.8, 0.95), hsv(hA + 0.42, 0.75, 0.8)];\n  // The room light: two bright wedges across each record on the line it falls along, the near one brighter.\n  const tl = -0.6 + Math.PI * P.light;\n  const lx = Math.cos(tl);\n  const ly = Math.sin(tl);\n  const sh = P.sheen;\n  // The room's light is tinted a paler second colour.\n  const lc = hsv(hA + 0.58, 0.5, 1).map((v) => v / 255);\n  // Neither record is quite flat, so each one's band sways a little and breathes once a turn.\n  for (let d = 0; d \u003c 2; d++) {\n    const ph = P.decks[d].phi + d * 2;\n    const sway = tl + 0.1 * Math.sin(ph);\n    const lift = (1 + 0.15 * Math.cos(ph)) * (0.8 + 0.28 * P.kick);\n    for (let i = 0; i \u003c 360; i++) {\n      const a = ((i + 0.5) / 360) * 2 * Math.PI - Math.PI - sway;\n      const s = Math.sin(a);\n      sh[d * 360 + i] = lift * (Math.exp(-((s / 0.17) ** 2)) * (0.65 + 0.35 * Math.cos(a)) + 0.3 * Math.exp(-((s / 0.45) ** 2))) + 0.05;\n    }\n  }\n  const Q = P.q;\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    Q[d] = 0.45 + 0.55 * P.spot[d];\n    Q[2 + d] = k.phi;\n    Q[4 + 2 * d] = k.strobe[0];\n    Q[5 + 2 * d] = k.strobe[1];\n    for (let i = 0; i \u003c 3; i++) Q[8 + 3 * d + i] = labels[d][i];\n  }\n  face(B, P.kind, P.deck, P.rr, P.th, P.ai, P.g, sh, Q, lc, lx, ly);\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    const cy = CY[d];\n    // Dust on the record turns with it and shows only in the light.\n    for (const q of k.dust) {\n      const x = Math.round(CX + q[0] * Math.cos(q[1] + k.phi) - 0.5);\n      const y = Math.round(cy + q[0] * Math.sin(q[1] + k.phi) - 0.5);\n      const p = y * W + x;\n      const s = sh[d * 360 + P.ai[p]];\n      for (let i = 0; i \u003c 3; i++) B[p * 3 + i] += 30 + 140 * s;\n    }\n    deckParts(P, B, d);\n    arm(P, B, d);\n    if (k.hand > 0.01) hand(P, B, d);\n  }\n  mixer(P, B);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, B[p] > 255 ? 255 : B[p], B[p + 1] > 255 ? 255 : B[p + 1], B[p + 2] > 255 ? 255 : B[p + 2]);\n}\n\n// The decks' faces: plinth, platter rim and its strobe dots, slipmat, the record and its label.\n// Q holds each deck's booth light, record angle, strobe rows and label colour.\nfunction face(B, kind, deck, rr, th, ai, g, sh, Q, lc, lx, ly) {\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    const kd = kind[p];\n    if (kd === MIXER) continue;\n    const d = deck[p];\n    const spot = Q[d];\n    const r = rr[p];\n    let v;\n    let c0;\n    let c1;\n    let c2;\n    if (kd === GROOVE || kd === RUN || kd === EDGE) {\n      const s = sh[d * 360 + ai[p]] * spot * (0.45 + (0.55 * r) / R_GROOVE);\n      if (kd === GROOVE) v = 300 * s * (0.12 + 0.88 * g[p]);\n      else if (kd === RUN) v = 170 * s * (Math.abs(r - 9.3) \u003c 0.35 ? 0.4 : 1);\n      else v = 20 + 130 * s;\n      const base = kd === GROOVE ? 8 + 6 * g[p] : 9;\n      c0 = base + v * lc[0];\n      c1 = base + v * lc[1];\n      c2 = base * 1.15 + v * lc[2];\n    } else if (kd === LABEL) {\n      // The label turns with the record; each deck's record has its own design.\n      let a = th[p] - Q[2 + d];\n      a -= Math.floor(a / (2 * Math.PI)) * 2 * Math.PI;\n      const L0 = Q[8 + 3 * d];\n      const L1 = Q[9 + 3 * d];\n      const L2 = Q[10 + 3 * d];\n      let f = 1;\n      let white = false;\n      if (d === 0) {\n        white = Math.abs(r * Math.sin(a)) \u003c 1.4 && r > 2;\n        if (Math.hypot(r * Math.cos(a) - 0, r * Math.sin(a) - 5.2) \u003c 1.5) f = 0.15;\n        if (r > 6 && r \u003c 7.6 && Math.floor(a / 1.05) % 2 === 0) f = 0.35;\n      } else {\n        f = Math.floor(a / (Math.PI / 3)) % 2 ? 0.5 : 1;\n        white = (r > 6.4 && r \u003c 7.4) || Math.hypot(r * Math.cos(a) - 3.5, r * Math.sin(a) - 1.5) \u003c 1.2;\n      }\n      const s = 1 + 0.25 * sh[d * 360 + ai[p]] * spot;\n      c0 = (white ? 235 : L0 * f) * s;\n      c1 = (white ? 225 : L1 * f) * s;\n      c2 = (white ? 200 : L2 * f) * s;\n    } else if (kd === SPINDLE) {\n      c0 = c1 = c2 = 200;\n    } else if (kd === MAT) {\n      c0 = 20;\n      c1 = 18;\n      c2 = 22;\n    } else if (kd === RIM) {\n      // The platter rim's strobe dots, lit orange near the strobe lamp at the lower left.\n      const row = r \u003c 27.55 ? 0 : 1;\n      let u = ((th[p] + Math.PI) / (2 * Math.PI)) * DOTS - Q[4 + 2 * d + row];\n      u -= Math.floor(u);\n      const lamp = Math.max(0, Math.cos(th[p] - 2.6)) ** 2;\n      const lit = 80 + 110 * sh[d * 360 + ai[p]] * spot;\n      const dot = u \u003c 0.45;\n      c0 = dot ? lit + 185 * lamp : 30;\n      c1 = dot ? lit + 40 * lamp : 30;\n      c2 = dot ? lit * 1.08 : 35;\n    } else {\n      // The plinth, satin grey, brighter towards the room's light and under the booth light.\n      const dx = (p % W) + 0.5 - CX;\n      const dy = Math.floor(p / W) + 0.5 - CY[d];\n      v = (38 + 0.5 * (dx * lx + dy * ly)) * (0.8 + 0.3 * spot);\n      c0 = v;\n      c1 = v;\n      c2 = v * 1.1;\n    }\n    B[o] = c0;\n    B[o + 1] = c1;\n    B[o + 2] = c2;\n  }\n}\n\n// The controls in a deck's corners: start button and speed buttons, the strobe lamp, the pitch slider.\nfunction deckParts(P, B, d) {\n  const y0 = d ? 70 : 0;\n  const box = (x0, y1, w, h, c) => {\n    for (let y = y1; y \u003c y1 + h; y++) for (let x = x0; x \u003c x0 + w; x++) B.set(c, ((y0 + y) * W + x) * 3);\n  };\n  box(2, 52, 7, 4, [120, 120, 128]);\n  box(3, 53, 5, 2, [70, 70, 76]);\n  box(10, 54, 3, 2, [140, 90, 50]);\n  box(14, 54, 3, 2, [90, 90, 96]);\n  box(2, 44, 3, 3, [255, 110, 50]);\n  // The pitch slider: its slot and cap, and a green light when it sits at 0.\n  box(60, 37, 2, 18, [16, 16, 20]);\n  const yc = Math.round(45 + P.pitch * 100);\n  box(59, yc, 4, 2, [196, 196, 206]);\n  box(63, 45, 1, 1, Math.abs(P.pitch) \u003c 0.001 ? [60, 255, 90] : [20, 40, 24]);\n}\n\n// The DJ's hand on the left of the record, fingers towards the label, moving round with it.\nfunction hand(P, B, d) {\n  const k = P.decks[d];\n  const cy = CY[d];\n  const a = Math.PI + 0.15 + k.rock;\n  const ca = Math.cos(a);\n  const sa = Math.sin(a);\n  const w = k.hand;\n  const paint = (u, v, c, f) => {\n    // u along the radius from the spindle, v across it.\n    const x = Math.round(CX + u * ca - v * sa - 0.5 - (1 - w) * 30);\n    const y = Math.round(cy + u * sa + v * ca - 0.5);\n    if (x \u003c 0 || x >= W || y \u003c (d ? 70 : 0) || y >= (d ? H : 58)) return;\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  // The sleeve and its cuff, the back of the hand, four fingers and the thumb.\n  for (let u = 20; u \u003c 40; u += 0.5) for (let v = -3; v \u003c= 3; v += 0.5) paint(u, v, u \u003c 24 ? CUFF : SLEEVE, 1);\n  for (let u = 14; u \u003c 21; u += 0.5) for (let v = -4; v \u003c= 4; v += 0.5) paint(u, v, SKIN, 0.75 + 0.25 * Math.cos((v / 4) * 1.4) - (u - 14) * 0.02);\n  for (let v = -3; v \u003c= 3; v += 2) for (let u = 9.5 + Math.abs(v) * 0.6; u \u003c 14; u += 0.5) paint(u, v, SKIN, 0.85);\n  for (let u = 15; u \u003c 18; u += 0.5) paint(u, 5 - (u - 15) * 0.4, SKIN, 0.7);\n}\n\n// The mixer strip between the decks: a meter for each channel and the crossfader between them.\nfunction mixer(P, B) {\n  const hA = 0.1 + P.hue;\n  const set = (x, y, c, f = 1) => {\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  for (let y = 58; y \u003c 70; y++) {\n    const v = y === 58 || y === 69 ? 8 : y === 59 ? 70 : y === 68 ? 22 : 34;\n    const c = [v, v, v * 1.15];\n    for (let x = 0; x \u003c W; x++) set(x, y, c);\n  }\n  // 27 segments a meter: 17 in the first colour, 6 in the second, the last 4 in the third.\n  const segs = 27;\n  const tone = [0, 0.2, 0.33].map((h) => hsv(hA + 0.23 - h, 0.85, 1));\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    const y = d ? 66 : 60;\n    const on = Math.round(k.vu * segs);\n    const pk = Math.min(segs - 1, Math.round(k.peak * segs) - 1);\n    for (let i = 0; i \u003c segs; i++) {\n      const c = tone[i \u003c 17 ? 0 : i \u003c 23 ? 1 : 2];\n      const f = i \u003c on || i === pk ? 1 : 0.1;\n      set(5 + 2 * i, y, c, f);\n      set(5 + 2 * i, y + 1, c, f * 0.8);\n    }\n  }\n  const slot = [6, 6, 8];\n  for (let x = 12; x \u003c= 51; x++) for (let y = 63; y \u003c= 64; y++) set(x, y, slot);\n  const xc = Math.round(12 + P.fader * 36);\n  const lit = hsv(hA + 0.42 * P.fader, 0.7, 1);\n  for (let y = 62; y \u003c= 65; y++) for (let x = xc; x \u003c xc + 4; x++) set(x, y, x === xc + 1 || x === xc + 2 ? lit : SILVER, y === 65 ? 0.7 : 1);\n  const a = hsv(hA, 0.8, 1);\n  const b = hsv(hA + 0.42, 0.75, 1);\n  for (const y of [63, 64]) {\n    set(7, y, a, 0.15 + 0.85 * (1 - P.fader));\n    set(8, y, a, 0.15 + 0.85 * (1 - P.fader));\n    set(55, y, b, 0.15 + 0.85 * P.fader);\n    set(56, y, b, 0.15 + 0.85 * P.fader);\n  }\n}\n","layer":{"id":"layer-turntables","type":"code","name":"turntables","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Turntables\n// Family:  music\n// Idea:    Two turntables stacked over a mixer strip, their records spinning under a still band of room light that picks out the grooves, while the DJ holds the waiting record, lets it go on the beat and slides the crossfader over to it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the direct-drive DJ turntable with its strobe-dotted platter rim and the two-channel mixer between a pair of them\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pitch=-8..8, Scratch=0..1, Light=0..1\n//\n// Knob 1: Hue. Turns the record labels, the meters' LEDs, the crossfader's light and the tint of the room's light round the colour wheel, starting from an amber label over a teal one, green meters and a violet light.\n// Knob 2: Pitch. Both pitch sliders in percent: the records turn at 33 1/3 rpm and the music at 124 BPM, each times 1 plus the pitch. The inner row of strobe dots stands still at 0 and the outer row at +3.3; at +2, where the panel opens, the inner row crawls forward and the outer row back.\n// Knob 3: Scratch. How long and how hard the DJ scratches the waiting record before letting it go: at 0 only a short cue of small rocks over the first kick, at 1 five seconds of strokes up to a quarter turn, with the crossfader cutting the scratch in on every fast stroke.\n// Knob 4: Light. Where the room's light falls, turning the sheen across both records through half a turn and brightening the plinths on that side. The records spin under it and it stays put, swaying a little once a turn because neither record is quite flat.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Both decks' spindles, and their radii in LEDs: label, run-out, grooves, the record's\n// edge, the slipmat and the platter rim with its two rows of strobe dots.\nconst CX = 32;\nconst CY = [29, 99];\nconst R_SPINDLE = 1.3;\nconst R_LABEL = 8.5;\nconst R_RUN = 10.5;\nconst R_GROOVE = 24.6;\nconst R_EDGE = 25.4;\nconst R_MAT = 26.2;\nconst R_RIM = 28.9;\n// A record turns 33 1/3 times a minute, and the music is 124 beats a minute at pitch 0.\nconst OMEGA = ((2 * Math.PI) / 60) * (100 / 3);\nconst BPM = 124;\n// Strobe dots: rows for pitch 0 and +3.3 %, 54 dots a row.\nconst DOTS = 54;\nconst ROWS = [0, 0.033];\n// What each LED is: plinth, platter rim, slipmat, record edge, grooves, run-out, label, spindle.\nconst PLINTH = 0;\nconst RIM = 1;\nconst MAT = 2;\nconst EDGE = 3;\nconst GROOVE = 4;\nconst RUN = 5;\nconst LABEL = 6;\nconst SPINDLE = 7;\nconst MIXER = 8;\n// Parts of the mix: the waiting deck is held and cued, then let go while the crossfader\n// moves over, then it plays alone.\nconst CUE = 0;\nconst MIX = 1;\nconst PLAY = 2;\nconst SKIN = [205, 150, 112];\nconst SLEEVE = [34, 30, 44];\nconst CUFF = [200, 196, 205];\nconst SILVER = [178, 178, 188];\nconst LAMP = [255, 236, 206];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// A groove profile for one side of a record, as brightness against radius every 1/50 LED:\n// five tracks of fine modulated groove with a dark band between them.\nfunction grooves() {\n  const T = new Float32Array(1000);\n  const cuts = [];\n  for (let i = 1; i \u003c 5; i++) cuts.push(R_RUN + 0.6 + ((R_GROOVE - R_RUN - 1) * (i + (Math.random() - 0.5) * 0.6)) / 5);\n  let loud = 0.7;\n  let a = Math.random();\n  let b = Math.random();\n  for (let i = 0; i \u003c T.length; i++) {\n    const r = R_RUN + i / 50;\n    if (i % 45 === 0) (a = b), (b = Math.random());\n    if (cuts.some((c) => Math.abs(r - c) \u003c 0.25)) {\n      T[i] = 0.08;\n      loud = 0.45 + 0.55 * Math.random();\n      continue;\n    }\n    const u = (i % 45) / 45;\n    T[i] = loud * (0.35 + 0.65 * (a + (b - a) * u * u * (3 - 2 * u)));\n  }\n  return T;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, hue: 0, pitch: 0, scratch: 0, light: 0, live: 0, part: CUE, pt: 0, fader: 0, cut: 0, kick: 0, spot: [1, 0.4] });\n  P.kind = new Uint8Array(N);\n  P.deck = new Int8Array(N).fill(-1);\n  P.rr = new Float32Array(N);\n  P.th = new Float32Array(N);\n  P.ai = new Uint16Array(N);\n  P.g = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.sheen = new Float32Array(720);\n  P.q = new Float64Array(14);\n  const T = [grooves(), grooves()];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (y >= 58 && y \u003c 70) {\n        P.kind[p] = MIXER;\n        continue;\n      }\n      const d = y \u003c 58 ? 0 : 1;\n      const dx = x + 0.5 - CX;\n      const dy = y + 0.5 - CY[d];\n      const r = Math.hypot(dx, dy);\n      P.deck[p] = d;\n      P.rr[p] = r;\n      P.th[p] = Math.atan2(dy, dx);\n      P.ai[p] = Math.floor(((P.th[p] + Math.PI) / (2 * Math.PI)) * 360) % 360;\n      P.kind[p] = r \u003c R_SPINDLE ? SPINDLE : r \u003c R_LABEL ? LABEL : r \u003c R_RUN ? RUN : r \u003c R_GROOVE ? GROOVE : r \u003c R_EDGE ? EDGE : r \u003c R_MAT ? MAT : r \u003c R_RIM ? RIM : PLINTH;\n      if (P.kind[p] === GROOVE) {\n        // The groove brightness averaged over the LED, from 16 points inside it.\n        let s = 0;\n        for (let j = 0; j \u003c 16; j++) {\n          const q = Math.hypot(dx - 0.5 + ((j & 3) + 0.5) / 4, dy - 0.5 + ((j >> 2) + 0.5) / 4);\n          s += T[d][clamp(Math.round((q - R_RUN) * 50), 0, 999)];\n        }\n        // Pushed apart, so neighbouring rings of groove differ in the light.\n        P.g[p] = clamp((s / 16 - 0.42) * 2.2 + 0.5, 0.04, 1);\n      }\n    }\n  // Each deck: the record's angle and turn rate, the hand on it, the needle's radius, the\n  // beat and the level its meter shows.\n  P.decks = [0, 1].map((d) => ({\n    phi: Math.random() * 6.28,\n    rate: OMEGA,\n    held: d === 1,\n    hold: 0,\n    hand: d === 1 ? 1 : 0,\n    rock: 0,\n    needle: d === 0 ? 17 + 4 * Math.random() : 23.5,\n    beat: 0,\n    vu: 0,\n    peak: 0,\n    peakT: 0,\n    strobe: [Math.random(), Math.random()],\n    dust: Array.from({ length: 14 }, () => [R_RUN + 1 + Math.random() * 13, Math.random() * 6.28]),\n  }));\n  P.decks[1].hold = P.decks[1].phi;\n}\n\n// How far the waiting record is pushed from where the hand caught it, in radians, s\n// seconds into the cue: strokes while scratching, then small rocks back and forth over\n// the first kick.\nfunction stroke(P, s) {\n  const S = 5 * P.scratch;\n  if (s \u003c 0.6) return 0;\n  if (s \u003c 0.6 + S) {\n    const u = s - 0.6;\n    const amp = 0.5 + P.scratch;\n    // Two strokes a beat, each pushed sharply forward and drawn back slower, every other\n    // one shorter, and the last two beats of every eight small.\n    const beat = (u * BPM) / 60;\n    const f = beat * 2 - Math.floor(beat * 2);\n    const phrase = Math.floor(beat / 2) % 4 === 3 ? 0.3 : 1;\n    return amp * phrase * (f \u003c 0.35 ? f / 0.35 : 1 - (f - 0.35) / 0.65) * (Math.floor(beat * 2) % 2 ? 0.6 : 1);\n  }\n  return 0.22 * Math.sin((s - 0.6 - S) * 2 * Math.PI * 1.6);\n}\n\nfunction step(P, dt) {\n  P.t += dt;\n  P.pt += dt;\n  const rate = OMEGA * (1 + P.pitch);\n  const L = P.decks[P.live];\n  const O = P.decks[1 - P.live];\n  const side = P.live === 0 ? 0 : 1;\n  const S = 5 * P.scratch;\n  if (P.part === CUE) {\n    // The hand comes down on the waiting record and holds it while the platter turns under the mat.\n    const end = 0.6 + S + 1.4;\n    O.hand = Math.min(1, O.hand + dt * 3);\n    if (!O.held) {\n      O.held = true;\n      O.hold = O.phi;\n    }\n    const was = O.rock;\n    O.rock = stroke(P, P.pt);\n    O.phi = O.hold + O.rock;\n    O.rate = (O.rock - was) / Math.max(dt, 1e-4);\n    P.cut = P.pt > 0.6 && P.pt \u003c 0.6 + S && Math.abs(O.rate) > 1.5 ? 1 : 0;\n    P.fader = P.cut ? 1 - side : side;\n    // Let go on the next kick of the playing record, in time with it.\n    if (P.pt > end && L.beat % 1 \u003c (rate / OMEGA) * dt * (BPM / 60) * 1.01) {\n      O.held = false;\n      O.beat = Math.floor(L.beat);\n      P.part = MIX;\n      P.pt = 0;\n    }\n  } else if (P.part === MIX) {\n    const u = clamp(P.pt / 6, 0, 1);\n    P.fader = side + (1 - 2 * side) * u * u * (3 - 2 * u);\n    if (u >= 1) {\n      P.part = PLAY;\n      P.pt = 0;\n    }\n  } else if (P.pt > 12) {\n    P.live = 1 - P.live;\n    P.part = CUE;\n    P.pt = 0;\n  }\n  P.cut = P.part === CUE ? P.cut : 0;\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    if (!k.held) {\n      k.hand = Math.max(0, k.hand - dt * 2.5);\n      k.rate = rate;\n      k.phi += rate * dt;\n      k.beat += (BPM / 60) * (1 + P.pitch) * dt;\n      k.needle -= 0.05 * dt;\n      if (k.needle \u003c R_RUN + 0.6) k.needle = R_GROOVE - 1;\n    }\n    // A strobe row's dots seem to turn at the difference between the platter's speed and the speed the row is for.\n    for (let j = 0; j \u003c 2; j++) k.strobe[j] += (((1 + P.pitch) / (1 + ROWS[j]) - 1) * OMEGA * dt * DOTS) / (2 * Math.PI);\n    // The channel meter: the music while it plays, and the scratch's chirps while it is held.\n    const f = k.beat % 1;\n    const level = k.held ? clamp(Math.abs(k.rate) / 9, 0, 1) : 0.42 + 0.45 * Math.exp(-6 * f) + 0.18 * Math.exp(-14 * ((f + 0.5) % 1)) + 0.08 * Math.random();\n    k.vu = Math.max(level, k.vu - dt * 2.2);\n    if (k.vu >= k.peak || P.t - k.peakT > 0.8) (k.peak = k.vu), (k.peakT = P.t);\n  }\n  // The room's lights jump on each kick of the record playing out.\n  P.kick = Math.exp(-5 * (P.decks[P.part === PLAY ? 1 - P.live : P.live].beat % 1));\n  // The booth light follows the crossfader onto the deck that is playing out.\n  P.spot[0] += (1 - P.fader - P.spot[0]) * Math.min(1, dt * 8);\n  P.spot[1] += (P.fader - P.spot[1]) * Math.min(1, dt * 8);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.pitch = clamp(k[1], -8, 8) / 100;\n  P.scratch = clamp(k[2], 0, 1);\n  P.light = clamp(k[3], 0, 1);\n  for (let i = 0; i \u003c 2; i++) step(P, dt / 2);\n}\n\n// The tonearm of a deck: the pivot in the corner, the arm down to the headshell, the needle in the groove.\nfunction arm(P, B, d) {\n  const cy = CY[d];\n  const k = P.decks[d];\n  const px = CX + 26;\n  const py = cy - 21;\n  const dist = Math.hypot(26, 21);\n  const L = 31.5;\n  const al = Math.atan2(-21, 26) + Math.acos(clamp((dist * dist + k.needle * k.needle - L * L) / (2 * dist * k.needle), -1, 1));\n  const nx = CX + k.needle * Math.cos(al);\n  const ny = cy + k.needle * Math.sin(al);\n  const put = (x, y, c, w = 1) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const o = (y * W + x) * 3;\n    for (let i = 0; i \u003c 3; i++) B[o + i] = B[o + i] * (1 - w) + c[i] * w;\n  };\n  // The stylus lamp lights a pool round the needle.\n  for (let y = -6; y \u003c= 6; y++)\n    for (let x = -6; x \u003c= 6; x++) {\n      const w = Math.max(0, 1 - Math.hypot(x, y) / 6.5) ** 2 * 0.35;\n      const o = (Math.round(ny + y) * W + Math.round(nx + x)) * 3;\n      if (w > 0 && o >= 0 && o \u003c N * 3) for (let i = 0; i \u003c 3; i++) B[o + i] += LAMP[i] * w * 0.4;\n    }\n  const ux = (nx - px) / L;\n  const uy = (ny - py) / L;\n  // Counterweight behind the pivot, the pivot's collar, the arm, the headshell.\n  for (let s = -7; s \u003c -2; s += 0.5) for (const o of [-1, 0, 1]) put(px + ux * s - uy * o, py + uy * s + ux * o, s \u003c -5 ? [70, 70, 78] : [40, 40, 46]);\n  for (let a = 0; a \u003c 6.3; a += 0.3) put(px + 3 * Math.cos(a), py + 3 * Math.sin(a), [120, 120, 130]);\n  put(px, py, [20, 20, 24]);\n  for (let s = 2; s \u003c L - 4; s += 0.5) put(px + ux * s, py + uy * s, SILVER);\n  for (let s = L - 4.5; s \u003c= L; s += 0.5) for (const o of [-1, 0, 1]) put(px + ux * s - uy * o * 0.9, py + uy * s + ux * o * 0.9, o ? [26, 26, 30] : [150, 150, 160]);\n  put(px + ux * (L - 2) + uy * 2.5, py + uy * (L - 2) - ux * 2.5, SILVER);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  const hA = 0.1 + P.hue;\n  const labels = [hsv(hA, 0.8, 0.95), hsv(hA + 0.42, 0.75, 0.8)];\n  // The room light: two bright wedges across each record on the line it falls along, the near one brighter.\n  const tl = -0.6 + Math.PI * P.light;\n  const lx = Math.cos(tl);\n  const ly = Math.sin(tl);\n  const sh = P.sheen;\n  // The room's light is tinted a paler second colour.\n  const lc = hsv(hA + 0.58, 0.5, 1).map((v) => v / 255);\n  // Neither record is quite flat, so each one's band sways a little and breathes once a turn.\n  for (let d = 0; d \u003c 2; d++) {\n    const ph = P.decks[d].phi + d * 2;\n    const sway = tl + 0.1 * Math.sin(ph);\n    const lift = (1 + 0.15 * Math.cos(ph)) * (0.8 + 0.28 * P.kick);\n    for (let i = 0; i \u003c 360; i++) {\n      const a = ((i + 0.5) / 360) * 2 * Math.PI - Math.PI - sway;\n      const s = Math.sin(a);\n      sh[d * 360 + i] = lift * (Math.exp(-((s / 0.17) ** 2)) * (0.65 + 0.35 * Math.cos(a)) + 0.3 * Math.exp(-((s / 0.45) ** 2))) + 0.05;\n    }\n  }\n  const Q = P.q;\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    Q[d] = 0.45 + 0.55 * P.spot[d];\n    Q[2 + d] = k.phi;\n    Q[4 + 2 * d] = k.strobe[0];\n    Q[5 + 2 * d] = k.strobe[1];\n    for (let i = 0; i \u003c 3; i++) Q[8 + 3 * d + i] = labels[d][i];\n  }\n  face(B, P.kind, P.deck, P.rr, P.th, P.ai, P.g, sh, Q, lc, lx, ly);\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    const cy = CY[d];\n    // Dust on the record turns with it and shows only in the light.\n    for (const q of k.dust) {\n      const x = Math.round(CX + q[0] * Math.cos(q[1] + k.phi) - 0.5);\n      const y = Math.round(cy + q[0] * Math.sin(q[1] + k.phi) - 0.5);\n      const p = y * W + x;\n      const s = sh[d * 360 + P.ai[p]];\n      for (let i = 0; i \u003c 3; i++) B[p * 3 + i] += 30 + 140 * s;\n    }\n    deckParts(P, B, d);\n    arm(P, B, d);\n    if (k.hand > 0.01) hand(P, B, d);\n  }\n  mixer(P, B);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, B[p] > 255 ? 255 : B[p], B[p + 1] > 255 ? 255 : B[p + 1], B[p + 2] > 255 ? 255 : B[p + 2]);\n}\n\n// The decks' faces: plinth, platter rim and its strobe dots, slipmat, the record and its label.\n// Q holds each deck's booth light, record angle, strobe rows and label colour.\nfunction face(B, kind, deck, rr, th, ai, g, sh, Q, lc, lx, ly) {\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    const kd = kind[p];\n    if (kd === MIXER) continue;\n    const d = deck[p];\n    const spot = Q[d];\n    const r = rr[p];\n    let v;\n    let c0;\n    let c1;\n    let c2;\n    if (kd === GROOVE || kd === RUN || kd === EDGE) {\n      const s = sh[d * 360 + ai[p]] * spot * (0.45 + (0.55 * r) / R_GROOVE);\n      if (kd === GROOVE) v = 300 * s * (0.12 + 0.88 * g[p]);\n      else if (kd === RUN) v = 170 * s * (Math.abs(r - 9.3) \u003c 0.35 ? 0.4 : 1);\n      else v = 20 + 130 * s;\n      const base = kd === GROOVE ? 8 + 6 * g[p] : 9;\n      c0 = base + v * lc[0];\n      c1 = base + v * lc[1];\n      c2 = base * 1.15 + v * lc[2];\n    } else if (kd === LABEL) {\n      // The label turns with the record; each deck's record has its own design.\n      let a = th[p] - Q[2 + d];\n      a -= Math.floor(a / (2 * Math.PI)) * 2 * Math.PI;\n      const L0 = Q[8 + 3 * d];\n      const L1 = Q[9 + 3 * d];\n      const L2 = Q[10 + 3 * d];\n      let f = 1;\n      let white = false;\n      if (d === 0) {\n        white = Math.abs(r * Math.sin(a)) \u003c 1.4 && r > 2;\n        if (Math.hypot(r * Math.cos(a) - 0, r * Math.sin(a) - 5.2) \u003c 1.5) f = 0.15;\n        if (r > 6 && r \u003c 7.6 && Math.floor(a / 1.05) % 2 === 0) f = 0.35;\n      } else {\n        f = Math.floor(a / (Math.PI / 3)) % 2 ? 0.5 : 1;\n        white = (r > 6.4 && r \u003c 7.4) || Math.hypot(r * Math.cos(a) - 3.5, r * Math.sin(a) - 1.5) \u003c 1.2;\n      }\n      const s = 1 + 0.25 * sh[d * 360 + ai[p]] * spot;\n      c0 = (white ? 235 : L0 * f) * s;\n      c1 = (white ? 225 : L1 * f) * s;\n      c2 = (white ? 200 : L2 * f) * s;\n    } else if (kd === SPINDLE) {\n      c0 = c1 = c2 = 200;\n    } else if (kd === MAT) {\n      c0 = 20;\n      c1 = 18;\n      c2 = 22;\n    } else if (kd === RIM) {\n      // The platter rim's strobe dots, lit orange near the strobe lamp at the lower left.\n      const row = r \u003c 27.55 ? 0 : 1;\n      let u = ((th[p] + Math.PI) / (2 * Math.PI)) * DOTS - Q[4 + 2 * d + row];\n      u -= Math.floor(u);\n      const lamp = Math.max(0, Math.cos(th[p] - 2.6)) ** 2;\n      const lit = 80 + 110 * sh[d * 360 + ai[p]] * spot;\n      const dot = u \u003c 0.45;\n      c0 = dot ? lit + 185 * lamp : 30;\n      c1 = dot ? lit + 40 * lamp : 30;\n      c2 = dot ? lit * 1.08 : 35;\n    } else {\n      // The plinth, satin grey, brighter towards the room's light and under the booth light.\n      const dx = (p % W) + 0.5 - CX;\n      const dy = Math.floor(p / W) + 0.5 - CY[d];\n      v = (38 + 0.5 * (dx * lx + dy * ly)) * (0.8 + 0.3 * spot);\n      c0 = v;\n      c1 = v;\n      c2 = v * 1.1;\n    }\n    B[o] = c0;\n    B[o + 1] = c1;\n    B[o + 2] = c2;\n  }\n}\n\n// The controls in a deck's corners: start button and speed buttons, the strobe lamp, the pitch slider.\nfunction deckParts(P, B, d) {\n  const y0 = d ? 70 : 0;\n  const box = (x0, y1, w, h, c) => {\n    for (let y = y1; y \u003c y1 + h; y++) for (let x = x0; x \u003c x0 + w; x++) B.set(c, ((y0 + y) * W + x) * 3);\n  };\n  box(2, 52, 7, 4, [120, 120, 128]);\n  box(3, 53, 5, 2, [70, 70, 76]);\n  box(10, 54, 3, 2, [140, 90, 50]);\n  box(14, 54, 3, 2, [90, 90, 96]);\n  box(2, 44, 3, 3, [255, 110, 50]);\n  // The pitch slider: its slot and cap, and a green light when it sits at 0.\n  box(60, 37, 2, 18, [16, 16, 20]);\n  const yc = Math.round(45 + P.pitch * 100);\n  box(59, yc, 4, 2, [196, 196, 206]);\n  box(63, 45, 1, 1, Math.abs(P.pitch) \u003c 0.001 ? [60, 255, 90] : [20, 40, 24]);\n}\n\n// The DJ's hand on the left of the record, fingers towards the label, moving round with it.\nfunction hand(P, B, d) {\n  const k = P.decks[d];\n  const cy = CY[d];\n  const a = Math.PI + 0.15 + k.rock;\n  const ca = Math.cos(a);\n  const sa = Math.sin(a);\n  const w = k.hand;\n  const paint = (u, v, c, f) => {\n    // u along the radius from the spindle, v across it.\n    const x = Math.round(CX + u * ca - v * sa - 0.5 - (1 - w) * 30);\n    const y = Math.round(cy + u * sa + v * ca - 0.5);\n    if (x \u003c 0 || x >= W || y \u003c (d ? 70 : 0) || y >= (d ? H : 58)) return;\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  // The sleeve and its cuff, the back of the hand, four fingers and the thumb.\n  for (let u = 20; u \u003c 40; u += 0.5) for (let v = -3; v \u003c= 3; v += 0.5) paint(u, v, u \u003c 24 ? CUFF : SLEEVE, 1);\n  for (let u = 14; u \u003c 21; u += 0.5) for (let v = -4; v \u003c= 4; v += 0.5) paint(u, v, SKIN, 0.75 + 0.25 * Math.cos((v / 4) * 1.4) - (u - 14) * 0.02);\n  for (let v = -3; v \u003c= 3; v += 2) for (let u = 9.5 + Math.abs(v) * 0.6; u \u003c 14; u += 0.5) paint(u, v, SKIN, 0.85);\n  for (let u = 15; u \u003c 18; u += 0.5) paint(u, 5 - (u - 15) * 0.4, SKIN, 0.7);\n}\n\n// The mixer strip between the decks: a meter for each channel and the crossfader between them.\nfunction mixer(P, B) {\n  const hA = 0.1 + P.hue;\n  const set = (x, y, c, f = 1) => {\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  for (let y = 58; y \u003c 70; y++) {\n    const v = y === 58 || y === 69 ? 8 : y === 59 ? 70 : y === 68 ? 22 : 34;\n    const c = [v, v, v * 1.15];\n    for (let x = 0; x \u003c W; x++) set(x, y, c);\n  }\n  // 27 segments a meter: 17 in the first colour, 6 in the second, the last 4 in the third.\n  const segs = 27;\n  const tone = [0, 0.2, 0.33].map((h) => hsv(hA + 0.23 - h, 0.85, 1));\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    const y = d ? 66 : 60;\n    const on = Math.round(k.vu * segs);\n    const pk = Math.min(segs - 1, Math.round(k.peak * segs) - 1);\n    for (let i = 0; i \u003c segs; i++) {\n      const c = tone[i \u003c 17 ? 0 : i \u003c 23 ? 1 : 2];\n      const f = i \u003c on || i === pk ? 1 : 0.1;\n      set(5 + 2 * i, y, c, f);\n      set(5 + 2 * i, y + 1, c, f * 0.8);\n    }\n  }\n  const slot = [6, 6, 8];\n  for (let x = 12; x \u003c= 51; x++) for (let y = 63; y \u003c= 64; y++) set(x, y, slot);\n  const xc = Math.round(12 + P.fader * 36);\n  const lit = hsv(hA + 0.42 * P.fader, 0.7, 1);\n  for (let y = 62; y \u003c= 65; y++) for (let x = xc; x \u003c xc + 4; x++) set(x, y, x === xc + 1 || x === xc + 2 ? lit : SILVER, y === 65 ? 0.7 : 1);\n  const a = hsv(hA, 0.8, 1);\n  const b = hsv(hA + 0.42, 0.75, 1);\n  for (const y of [63, 64]) {\n    set(7, y, a, 0.15 + 0.85 * (1 - P.fader));\n    set(8, y, a, 0.15 + 0.85 * (1 - P.fader));\n    set(55, y, b, 0.15 + 0.85 * P.fader);\n    set(56, y, b, 0.15 + 0.85 * P.fader);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Pitch=-8..8, Scratch=0..1, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the record labels, the meters' LEDs, the crossfader's light and the tint of the room's light round the colour wheel, starting from an amber label over a teal one, green meters and a violet light."},{"name":"Pitch","min":-8,"max":8,"about":"Both pitch sliders in percent: the records turn at 33 1/3 rpm and the music at 124 BPM, each times 1 plus the pitch. The inner row of strobe dots stands still at 0 and the outer row at +3.3; at +2, where the panel opens, the inner row crawls forward and the outer row back."},{"name":"Scratch","min":0,"max":1,"about":"How long and how hard the DJ scratches the waiting record before letting it go: at 0 only a short cue of small rocks over the first kick, at 1 five seconds of strokes up to a quarter turn, with the crossfader cutting the scratch in on every fast stroke."},{"name":"Light","min":0,"max":1,"about":"Where the room's light falls, turning the sheen across both records through half a turn and brightening the plinths on that side. The records spin under it and it stays put, swaying a little once a turn because neither record is quite flat."}],"start":[0,2,0,0.06],"measures":{"motion":0.2259,"detail":0.0842,"edges":0.4014,"complexity":1.294,"coverage":0.7108,"colour":0.1698,"drift":0.051},"knobResponse":[0.0432,0.0432,0.0448,0.0571]},{"slug":"typewriter","title":"Typewriter","family":"type","round":18,"note":"수동 타자기가 시 두 편을 3×5 픽셀 글자로 한 자씩 쳐요. 칠 때마다 활자대가 리본을 지나 튀어 올라 글자를 찍고 종이가 한 칸 왼쪽으로 밀리며, 줄 끝에서 벨이 번쩍이면 캐리지가 오른쪽으로 돌아오며 종이를 한 줄 올려요. K4 를 돌리면 리본이 닳아 글자가 옅어지고, 빨간 반쪽으로 치는 낱말이 늘어요.","idea":"A manual typewriter types two old poems letter by letter in a 3 by 5 pixel face, each typebar flicking up through the ribbon, while the sheet slides one letter left at every stroke, rings at the line's end and rides back with the carriage to feed up a line.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Typewriter\n// Family:  type\n// Idea:    A manual typewriter types two old poems letter by letter in a 3 by 5 pixel face, each typebar flicking up through the ribbon, while the sheet slides one letter left at every stroke, rings at the line's end and rides back with the carriage to feed up a line.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the portable typewriters of the 1950s, typing Emily Dickinson and Christina Rossetti\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Speed=0.2..3, Spacing=1..2, Ribbon=0..1\n//\n// Knob 1: Paper. The sheet and its ink: white bond with black at 0, then cream with brown, a canary carbon copy in blue and a pink copy in violet.\n// Knob 2: Speed. Strokes a second: at 2 a brisk four and a half, at 0.2 one every two seconds, at 3 nearly seven.\n// Knob 3: Spacing. The line feed, from single spacing at 1 (7 rows a line) to double at 2 (14 rows).\n// Knob 4: Ribbon. At 0 a fresh ribbon, black with the titles on its red half; turned up it wears to a faint grey that drops pixels, and the typist moves to the red half for more and more words.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sheet: 96 LEDs wide (16 letters of 4 LEDs between margins of 16) and\n// 320 long. The printing point is column 32; the line being typed has its\n// foot on row 83.\nconst PW = 96;\nconst PH = 320;\nconst MARGIN = 16;\nconst COLS = 16;\nconst PX = 31;\nconst BASE = 83;\nconst TOP = 18;\n// Where the paper goes under the card guide, and the machine below it.\nconst PAPER_END = 88;\n// The basket of 15 typebars, fanned below the printing point.\nconst BX = 32;\nconst BY = 88;\nconst BARS = 15;\n// The 3 by 5 face, rows top to bottom, one bit per column.\nconst GLYPHS = {\n  A: \"010101111101101\", B: \"110101110101110\", C: \"011100100100011\", D: \"110101101101110\",\n  E: \"111100110100111\", F: \"111100110100100\", G: \"011100101101011\", H: \"101101111101101\",\n  I: \"111010010010111\", J: \"001001001101010\", K: \"101101110101101\", L: \"100100100100111\",\n  M: \"101111111101101\", N: \"110101101101101\", O: \"010101101101010\", P: \"110101110100100\",\n  Q: \"010101101111011\", R: \"110101110101101\", S: \"011100010001110\", T: \"111010010010010\",\n  U: \"101101101101011\", V: \"101101101010010\", W: \"101101111111101\", X: \"101101010101101\",\n  Y: \"101101010010010\", Z: \"111001010100111\", \".\": \"000000000000010\", \",\": \"000000000010100\",\n  \"-\": \"000000111000000\", \"!\": \"010010010000010\", \"?\": \"110001010000010\", \"'\": \"010010000000000\",\n  \":\": \"000010000010000\", \";\": \"000010000010100\",\n};\n// Emily Dickinson's \"Hope\" is the thing with feathers (1891) and Christina\n// Rossetti's Who has seen the wind? (1872), and between them the line typists\n// learned on. Words in stars go on the ribbon's red half.\nconst POEMS = [\n  \"*HOPE*\",\n  \"\",\n  \"HOPE IS THE THING WITH FEATHERS -\",\n  \"THAT PERCHES IN THE SOUL -\",\n  \"AND SINGS THE TUNE WITHOUT THE WORDS -\",\n  \"AND NEVER STOPS - AT ALL -\",\n  \"\",\n  \"AND SWEETEST - IN THE GALE - IS HEARD -\",\n  \"AND SORE MUST BE THE STORM -\",\n  \"THAT COULD ABASH THE LITTLE BIRD\",\n  \"THAT KEPT SO MANY WARM -\",\n  \"\",\n  \"*E. DICKINSON*\",\n  \"\",\n  \"\",\n  \"NOW IS THE TIME FOR ALL GOOD MEN TO COME TO THE AID OF THE PARTY.\",\n  \"\",\n  \"\",\n  \"*WHO HAS SEEN THE WIND?*\",\n  \"\",\n  \"WHO HAS SEEN THE WIND?\",\n  \"NEITHER I NOR YOU:\",\n  \"BUT WHEN THE LEAVES HANG TREMBLING,\",\n  \"THE WIND IS PASSING THROUGH.\",\n  \"\",\n  \"WHO HAS SEEN THE WIND?\",\n  \"NEITHER YOU NOR I:\",\n  \"BUT WHEN THE TREES BOW DOWN THEIR HEADS,\",\n  \"THE WIND IS PASSING BY.\",\n  \"\",\n  \"*C. ROSSETTI*\",\n  \"\",\n  \"\",\n];\n// Paper and ink sets for the Paper knob: paper, ink, red ink.\nconst SETS = [\n  [[236, 236, 228], [20, 20, 26], [196, 26, 30]],\n  [[238, 222, 184], [70, 38, 20], [184, 40, 26]],\n  [[246, 230, 120], [30, 44, 150], [190, 30, 40]],\n  [[244, 196, 204], [76, 30, 120], [176, 20, 46]],\n];\nconst ENAMEL = [92, 150, 132];\nconst CHROME = [178, 184, 188];\nconst KEYROWS = [\"QWERTYUIOP\", \"ASDFGHJKL\", \"ZXCVBNM,.\"];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n\n// The poems broken at 16 letters; a broken line goes on indented by two. A\n// line with a starred word is typed in red throughout.\nfunction wrap() {\n  const out = [];\n  for (const line of POEMS) {\n    const red = line.includes(\"*\");\n    let row = [];\n    let len = 0;\n    for (const word of line.replace(/\\*/g, \"\").split(\" \")) {\n      if (!word) continue;\n      if (len && len + 1 + word.length > COLS) {\n        out.push(row);\n        row = [{ ch: \" \" }, { ch: \" \" }];\n        len = 2;\n      } else if (len) {\n        row.push({ ch: \" \" });\n        len++;\n      }\n      for (const ch of word) row.push({ ch, red });\n      len += word.length;\n    }\n    out.push(row);\n  }\n  return out;\n}\n\n// Key and typebar for each letter.\nfunction keyOf(ch) {\n  for (let r = 0; r \u003c 3; r++) {\n    const i = KEYROWS[r].indexOf(ch);\n    if (i >= 0) return { r, i, bar: clamp(Math.round(i * 1.45 + r * 0.6), 0, BARS - 1) };\n  }\n  return { r: 0, i: 9, bar: 14 };\n}\n\nfunction lamp(x, y) {\n  return 0.8 + 0.3 * Math.exp(-((x - 6) ** 2 + (y - 10) ** 2) / (2 * 40 * 40));\n}\n\nexport function setup(params) {\n  const P = params;\n  P.lines = wrap();\n  P.started = false;\n  P.ink = new Uint8Array(PW * PH);\n  P.inkRed = new Uint8Array(PW * PH);\n  P.grain = new Uint8Array(PW * PH);\n  for (let i = 0; i \u003c PW * PH; i++) P.grain[i] = Math.floor(Math.random() * 256);\n  P.frame = new Float32Array(N * 3);\n  P.machine = null;\n}\n\nfunction newSheet(P) {\n  P.ink.fill(0);\n  P.inkRed.fill(0);\n  P.row = 0;\n}\n\n// One letter struck at the current column: the strike strength varies from\n// letter to letter, and its pixels from one to the next.\nfunction stamp(P, cell, red) {\n  const g = GLYPHS[cell.ch];\n  if (!g) return;\n  const x0 = MARGIN + P.col * 4;\n  const y0 = TOP + P.row * P.ls;\n  const strike = 0.62 + 0.38 * Math.random();\n  const word = red ? 255 : P.wordRand;\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = 0; i \u003c 3; i++) {\n      if (g[j * 3 + i] !== \"1\") continue;\n      const p = (y0 + j) * PW + x0 + i;\n      if (p \u003c 0 || p >= PW * PH) continue;\n      P.ink[p] = Math.round(255 * clamp(strike * (0.8 + 0.2 * Math.random()) + (j === 0 ? -0.06 : 0), 0, 1));\n      P.inkRed[p] = word;\n    }\n}\n\nfunction linesPerPage(P) {\n  return Math.floor((PH - TOP - 24) / P.ls);\n}\n\n// The carriage moves on one letter; five letters before the right margin\n// the bell rings.\nfunction advance(P) {\n  P.col++;\n  if (P.col === COLS - 5) P.bell = 1;\n}\n\n// The typist, as a little machine of its own: type the line, ring, return.\nfunction step(P, dt) {\n  P.timer -= dt;\n  if (P.strike) {\n    P.strike.t += dt;\n    // The letter lands when the typebar reaches the paper, and the carriage\n    // escapes one letter as the bar falls back.\n    if (P.strike.cell && P.strike.t >= 0.05) {\n      stamp(P, P.strike.cell, P.strike.red);\n      P.strike.cell = null;\n      advance(P);\n    }\n    if (P.strike.t > 0.16) P.strike = null;\n  }\n  P.bell = Math.max(0, P.bell - dt * 1.6);\n  P.dip = Math.max(0, P.dip - dt * 8);\n  // The carriage and the paper follow where the typist put them.\n  const want = PX - MARGIN - P.col * 4;\n  const rate = P.phase === \"type\" ? 120 : 220;\n  if (P.carX \u003c want) P.carX = Math.min(want, P.carX + rate * dt);\n  else if (P.carX > want) P.carX = Math.max(want, P.carX - rate * dt);\n  const scroll = TOP + P.row * P.ls + 4 - BASE + P.extra;\n  P.scroll += clamp(scroll - P.scroll, -90 * dt, 90 * dt);\n  if (P.timer > 0 || (P.strike && P.strike.cell)) return;\n  const line = P.lines[P.line % P.lines.length];\n  if (P.phase === \"type\") {\n    if (P.col >= line.length) {\n      P.phase = \"return\";\n      P.timer = 0.12 + 0.15 / P.speed;\n      return;\n    }\n    const cell = line[P.col];\n    P.dip = 1;\n    if (cell.ch === \" \") {\n      P.wordRand = Math.floor(Math.random() * 255);\n      P.key = { r: 3, i: 0 };\n      advance(P);\n    } else {\n      const k = keyOf(cell.ch);\n      P.key = k;\n      P.strike = { bar: k.bar, t: 0, red: cell.red || P.wordRand \u003c 255 * P.redShare, cell };\n    }\n    const pause = cell.ch === \" \" ? 0.08 : /[,.:;-]/.test(cell.ch) ? 0.12 : 0;\n    P.timer = (0.22 * (0.7 + 0.6 * Math.random())) / P.speed + pause;\n  } else if (P.phase === \"return\") {\n    // Carriage return: the paper rides back right and the platen feeds a line.\n    P.col = 0;\n    P.line++;\n    P.row++;\n    P.phase = \"type\";\n    P.timer = 0.25 + 0.2 / P.speed;\n    P.wordRand = Math.floor(Math.random() * 255);\n    if (P.row >= linesPerPage(P)) {\n      // The sheet is full: pulled out over the top, and a fresh one wound in.\n      P.phase = \"page\";\n      P.timer = 1.8;\n      P.extra = 150;\n    }\n  } else if (P.phase === \"page\") {\n    newSheet(P);\n    P.extra = 0;\n    P.scroll = TOP + 4 - BASE - 70;\n    P.phase = \"type\";\n    P.timer = 1;\n  }\n}\n\n// The still parts of the machine below the paper, drawn once.\nfunction buildMachine(P) {\n  const M = new Float32Array(N * 3);\n  const put = (x, y, c) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = (y * W + x) * 3;\n    M[p] = c[0];\n    M[p + 1] = c[1];\n    M[p + 2] = c[2];\n  };\n  // The desk lamp at the upper left, and the wall behind the machine, warm\n  // where the lamp falls on it.\n  P.lamp = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) P.lamp[p] = lamp(p % W, Math.floor(p / W));\n  for (let y = 0; y \u003c= PAPER_END; y++) for (let x = 0; x \u003c W; x++) put(x, y, [22, 17, 14].map((v) => v * P.lamp[y * W + x]));\n  for (let y = PAPER_END + 1; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      // The enamel body, lit from the lamp at the upper left, its front\n      // falling away into shade.\n      const l = lamp(x, y) * (1 - 0.35 * ((y - 90) / 38));\n      put(x, y, ENAMEL.map((v) => v * l));\n    }\n  // The carriage rail and the opening of the type basket.\n  for (let x = 0; x \u003c W; x++) put(x, PAPER_END + 1, CHROME.map((v) => v * lamp(x, 89)));\n  for (let y = PAPER_END + 2; y \u003c 110; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r = Math.hypot(x - BX, y - BY);\n      if (r \u003c 21.5 && y > BY) put(x, y, [14, 15, 16]);\n      if (r >= 21.5 && r \u003c 22.6 && y > BY) put(x, y, CHROME.map((v) => v * 0.8));\n    }\n  // Keys: three staggered rows of round caps with chrome rims, and a space bar.\n  P.keys = [];\n  for (let r = 0; r \u003c 3; r++)\n    for (let i = 0; i \u003c KEYROWS[r].length; i++) {\n      const kx = 3 + r * 2 + i * 6;\n      const ky = 111 + r * 5;\n      P.keys.push([r, i, kx, ky]);\n    }\n  for (let x = 18; x \u003c 47; x++) {\n    put(x, 126, CHROME.map((v) => v * 0.85));\n    put(x, 127, [30, 30, 32]);\n  }\n  P.machine = M;\n}\n\nfunction drawKey(F, kx, ky, down) {\n  for (let j = 0; j \u003c 4; j++)\n    for (let i = 0; i \u003c 4; i++) {\n      if ((i === 0 || i === 3) && (j === 0 || j === 3)) continue;\n      const rim = i === 0 || i === 3 || j === 0 || j === 3;\n      const c = rim ? (down ? [110, 114, 118] : [196, 200, 204]) : down ? [8, 8, 9] : [26, 26, 28];\n      const y = ky + j + (down ? 1 : 0);\n      const p = (y * W + kx + i) * 3;\n      if (y \u003c H) {\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n    }\n}\n\nfunction line(F, x0, y0, x1, y1, c) {\n  const n = Math.ceil(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0))) + 1;\n  for (let s = 0; s \u003c= n; s++) {\n    const x = Math.round(x0 + ((x1 - x0) * s) / n);\n    const y = Math.round(y0 + ((y1 - y0) * s) / n);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = (y * W + x) * 3;\n    F[p] = c[0];\n    F[p + 1] = c[1];\n    F[p + 2] = c[2];\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.paper = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.05, 3) / 2;\n  P.wear = clamp(k[3], 0, 1);\n  P.redShare = 0.45 * P.wear * P.wear;\n  const ls = Math.round(7 * clamp(k[2], 1, 2));\n  if (!P.started) {\n    P.started = true;\n    P.ls = ls;\n    newSheet(P);\n    // The page is half typed when the panel opens: the first lines are already\n    // on it, and the typist has been at the next for three seconds.\n    const half = Math.floor(linesPerPage(P) / 2);\n    P.line = 0;\n    for (; P.row \u003c half; P.row++, P.line++) {\n      const row = P.lines[P.line % P.lines.length];\n      for (P.col = 0; P.col \u003c row.length; P.col++) {\n        if (row[P.col].ch === \" \" || !P.col) P.wordRand = Math.floor(Math.random() * 255);\n        stamp(P, row[P.col], row[P.col].red);\n      }\n    }\n    P.col = 0;\n    Object.assign(P, { phase: \"type\", timer: 0, strike: null, bell: 0, dip: 0, key: null, extra: 0, wordRand: 0 });\n    P.carX = PX - MARGIN;\n    P.scroll = TOP + P.row * P.ls + 4 - BASE;\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30);\n  }\n  P.ls = ls;\n  step(P, dt);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  if (!P.machine) buildMachine(P);\n  const F = P.frame;\n  F.set(P.machine);\n  // Paper and ink for the Paper knob, between its four sets.\n  const u = P.paper * 3;\n  const i0 = Math.min(2, Math.floor(u));\n  const [paper, ink, red] = [0, 1, 2].map((j) => mix(SETS[i0][j], SETS[i0 + 1][j], u - i0));\n  const cx = Math.round(P.carX);\n  const sc = Math.round(P.scroll);\n  const wear = P.wear;\n  const fade = 1 - 0.5 * wear;\n  // The platen, rubber black, with a knob at either end, all riding with the paper.\n  for (let y = 75; y \u003c= PAPER_END; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - cx;\n      const p = (y * W + x) * 3;\n      const t = (y - 75) / 13;\n      const shade = 0.5 + 0.9 * Math.exp(-((t - 0.3) ** 2) / 0.03);\n      if (px >= -6 && px \u003c PW + 6) {\n        F[p] = 26 * shade;\n        F[p + 1] = 26 * shade;\n        F[p + 2] = 30 * shade;\n      } else if ((px >= -12 && px \u003c -6) || (px >= PW + 6 && px \u003c PW + 12)) {\n        const ridge = (px & 1) === 0 ? 1 : 0.7;\n        F[p] = 118 * shade * ridge;\n        F[p + 1] = 110 * shade * ridge;\n        F[p + 2] = 100 * shade * ridge;\n      }\n    }\n  // The carriage return lever, chrome, standing up from the left knob.\n  line(F, cx - 10, 74, cx - 18, 64, CHROME);\n  line(F, cx - 18, 64, cx - 24, 63, CHROME);\n  // The sheet.\n  const top = Math.max(0, -sc);\n  for (let y = top; y \u003c= PAPER_END; y++) {\n    const py = y + sc;\n    if (py >= PH) break;\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - cx;\n      if (px \u003c 0 || px >= PW) continue;\n      const p = (y * W + x) * 3;\n      // The sheet bends away round the platen in its last rows.\n      const l = P.lamp[y * W + x] * (y > 84 ? 1 - 0.09 * (y - 84) : 1);\n      let r = paper[0] * l;\n      let g = paper[1] * l;\n      let b = paper[2] * l;\n      const q = py * PW + px;\n      const s = P.ink[q];\n      if (s) {\n        const gr = P.grain[q] / 255;\n        const a = clamp((s / 255) * fade - wear * 0.35 * (1 - gr), 0, 1);\n        const c = P.inkRed[q] === 255 || P.inkRed[q] \u003c 255 * P.redShare ? red : ink;\n        r += (c[0] * l - r) * a;\n        g += (c[1] * l - g) * a;\n        b += (c[2] * l - b) * a;\n      }\n      F[p] = r;\n      F[p + 1] = g;\n      F[p + 2] = b;\n    }\n  }\n  // The ribbon, black over red, from spool to spool past the printing point,\n  // lifted over the line while a typebar strikes.\n  const st = P.strike;\n  const lift = st ? clamp(st.t \u003c 0.05 ? st.t / 0.05 : 1 - (st.t - 0.08) / 0.08, 0, 1) : 0;\n  const rib = [mix([16, 16, 18], [74, 72, 76], wear), mix([164, 24, 28], [124, 64, 62], wear)];\n  for (let x = 12; x \u003c 53; x++) {\n    const dx = Math.abs(x - 32);\n    const y = dx \u003c 6 ? 84 : 84 + Math.round((dx - 6) * 0.28);\n    for (let j = 0; j \u003c 2; j++) {\n      const p = ((y + j) * W + x) * 3;\n      const c = rib[j];\n      F[p] = c[0];\n      F[p + 1] = c[1];\n      F[p + 2] = c[2];\n    }\n  }\n  if (lift > 0.3) {\n    const y0 = 84 - Math.round(lift * 5);\n    for (let y = y0; y \u003c y0 + 5; y++)\n      for (let x = 29; x \u003c 36; x++) {\n        const p = (y * W + x) * 3;\n        const c = rib[st.red ? 1 : 0];\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n  }\n  // The card guide round the printing point.\n  for (let x = 25; x \u003c 40; x++) {\n    if (x === 31 || x === 33 || x === 32) continue;\n    const p = (86 * W + x) * 3;\n    F[p] = CHROME[0];\n    F[p + 1] = CHROME[1];\n    F[p + 2] = CHROME[2];\n  }\n  // Ribbon spools, their hubs turning a little at every stroke.\n  for (const [sx, dir] of [\n    [6, 1],\n    [58, -1],\n  ])\n    for (let y = 89; y \u003c 101; y++)\n      for (let x = sx - 6; x \u003c= sx + 6; x++) {\n        const r = Math.hypot(x - sx, y - 95);\n        if (r > 5.6 || x \u003c 0 || x >= W) continue;\n        const p = (y * W + x) * 3;\n        const a = Math.atan2(y - 95, x - sx) * dir + (P.line * COLS + P.col) * 0.15;\n        let c;\n        if (r \u003c 1.6) c = CHROME;\n        else if (r \u003c 3.2) c = Math.cos(a * 3) > 0.4 ? CHROME.map((v) => v * 0.8) : [20, 20, 22];\n        else c = y \u003c 95 ? rib[0].map((v) => v + 20) : rib[1];\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n  // The typebars, fanned in the basket; the one striking swings up to the paper.\n  for (let b = 0; b \u003c BARS; b++) {\n    const a = Math.PI * (0.1 + (0.8 * b) / (BARS - 1));\n    const ox = BX + 20 * Math.cos(a);\n    const oy = BY + 20 * Math.sin(a);\n    let tx = BX + 6 * Math.cos(a);\n    let ty = BY + 6 * Math.sin(a);\n    if (st && st.bar === b) {\n      const s = clamp(st.t \u003c 0.05 ? st.t / 0.05 : 1 - (st.t - 0.05) / 0.09, 0, 1);\n      tx += (32 - tx) * s;\n      ty += (82 - ty) * s;\n    }\n    line(F, ox, oy, tx, ty, st && st.bar === b ? [230, 232, 236] : [120, 124, 128]);\n  }\n  // The keys, the struck one pressed down.\n  for (const [r, i, kx, ky] of P.keys) drawKey(F, kx, ky, P.dip > 0.2 && P.key && P.key.r === r && P.key.i === i);\n  if (P.dip > 0.2 && P.key && P.key.r === 3) for (let x = 18; x \u003c 47; x++) for (let j = 126; j \u003c 128; j++) F[(j * W + x) * 3] *= 0.6;\n  // The bell, a brass dome under the right spool, flashing as it rings and\n  // throwing its flash on the enamel round it.\n  const bell = P.bell * P.bell;\n  for (let y = 99; y \u003c 110; y++)\n    for (let x = 51; x \u003c W; x++) {\n      const dx = x - 58;\n      const dy = y - 105;\n      const p = (y * W + x) * 3;\n      const dome = dy >= -1 && dy \u003c= 1 && Math.abs(dx) \u003c= (dy === -1 ? 1 : dy === 0 ? 2 : 3);\n      if (dome) {\n        const c = mix(dy === -1 ? [210, 170, 70] : [160, 116, 40], [255, 244, 190], bell);\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      } else if (bell > 0.01) {\n        const g = bell * Math.exp(-(dx * dx + dy * dy) / 8);\n        F[p] += (255 - F[p]) * g * 0.8;\n        F[p + 1] += (230 - F[p + 1]) * g * 0.8;\n        F[p + 2] += (140 - F[p + 2]) * g * 0.8;\n      }\n    }\n  for (let y = 0, p = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, F[p], F[p + 1], F[p + 2]);\n}\n","layer":{"id":"layer-typewriter","type":"code","name":"typewriter","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Typewriter\n// Family:  type\n// Idea:    A manual typewriter types two old poems letter by letter in a 3 by 5 pixel face, each typebar flicking up through the ribbon, while the sheet slides one letter left at every stroke, rings at the line's end and rides back with the carriage to feed up a line.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the portable typewriters of the 1950s, typing Emily Dickinson and Christina Rossetti\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Speed=0.2..3, Spacing=1..2, Ribbon=0..1\n//\n// Knob 1: Paper. The sheet and its ink: white bond with black at 0, then cream with brown, a canary carbon copy in blue and a pink copy in violet.\n// Knob 2: Speed. Strokes a second: at 2 a brisk four and a half, at 0.2 one every two seconds, at 3 nearly seven.\n// Knob 3: Spacing. The line feed, from single spacing at 1 (7 rows a line) to double at 2 (14 rows).\n// Knob 4: Ribbon. At 0 a fresh ribbon, black with the titles on its red half; turned up it wears to a faint grey that drops pixels, and the typist moves to the red half for more and more words.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sheet: 96 LEDs wide (16 letters of 4 LEDs between margins of 16) and\n// 320 long. The printing point is column 32; the line being typed has its\n// foot on row 83.\nconst PW = 96;\nconst PH = 320;\nconst MARGIN = 16;\nconst COLS = 16;\nconst PX = 31;\nconst BASE = 83;\nconst TOP = 18;\n// Where the paper goes under the card guide, and the machine below it.\nconst PAPER_END = 88;\n// The basket of 15 typebars, fanned below the printing point.\nconst BX = 32;\nconst BY = 88;\nconst BARS = 15;\n// The 3 by 5 face, rows top to bottom, one bit per column.\nconst GLYPHS = {\n  A: \"010101111101101\", B: \"110101110101110\", C: \"011100100100011\", D: \"110101101101110\",\n  E: \"111100110100111\", F: \"111100110100100\", G: \"011100101101011\", H: \"101101111101101\",\n  I: \"111010010010111\", J: \"001001001101010\", K: \"101101110101101\", L: \"100100100100111\",\n  M: \"101111111101101\", N: \"110101101101101\", O: \"010101101101010\", P: \"110101110100100\",\n  Q: \"010101101111011\", R: \"110101110101101\", S: \"011100010001110\", T: \"111010010010010\",\n  U: \"101101101101011\", V: \"101101101010010\", W: \"101101111111101\", X: \"101101010101101\",\n  Y: \"101101010010010\", Z: \"111001010100111\", \".\": \"000000000000010\", \",\": \"000000000010100\",\n  \"-\": \"000000111000000\", \"!\": \"010010010000010\", \"?\": \"110001010000010\", \"'\": \"010010000000000\",\n  \":\": \"000010000010000\", \";\": \"000010000010100\",\n};\n// Emily Dickinson's \"Hope\" is the thing with feathers (1891) and Christina\n// Rossetti's Who has seen the wind? (1872), and between them the line typists\n// learned on. Words in stars go on the ribbon's red half.\nconst POEMS = [\n  \"*HOPE*\",\n  \"\",\n  \"HOPE IS THE THING WITH FEATHERS -\",\n  \"THAT PERCHES IN THE SOUL -\",\n  \"AND SINGS THE TUNE WITHOUT THE WORDS -\",\n  \"AND NEVER STOPS - AT ALL -\",\n  \"\",\n  \"AND SWEETEST - IN THE GALE - IS HEARD -\",\n  \"AND SORE MUST BE THE STORM -\",\n  \"THAT COULD ABASH THE LITTLE BIRD\",\n  \"THAT KEPT SO MANY WARM -\",\n  \"\",\n  \"*E. DICKINSON*\",\n  \"\",\n  \"\",\n  \"NOW IS THE TIME FOR ALL GOOD MEN TO COME TO THE AID OF THE PARTY.\",\n  \"\",\n  \"\",\n  \"*WHO HAS SEEN THE WIND?*\",\n  \"\",\n  \"WHO HAS SEEN THE WIND?\",\n  \"NEITHER I NOR YOU:\",\n  \"BUT WHEN THE LEAVES HANG TREMBLING,\",\n  \"THE WIND IS PASSING THROUGH.\",\n  \"\",\n  \"WHO HAS SEEN THE WIND?\",\n  \"NEITHER YOU NOR I:\",\n  \"BUT WHEN THE TREES BOW DOWN THEIR HEADS,\",\n  \"THE WIND IS PASSING BY.\",\n  \"\",\n  \"*C. ROSSETTI*\",\n  \"\",\n  \"\",\n];\n// Paper and ink sets for the Paper knob: paper, ink, red ink.\nconst SETS = [\n  [[236, 236, 228], [20, 20, 26], [196, 26, 30]],\n  [[238, 222, 184], [70, 38, 20], [184, 40, 26]],\n  [[246, 230, 120], [30, 44, 150], [190, 30, 40]],\n  [[244, 196, 204], [76, 30, 120], [176, 20, 46]],\n];\nconst ENAMEL = [92, 150, 132];\nconst CHROME = [178, 184, 188];\nconst KEYROWS = [\"QWERTYUIOP\", \"ASDFGHJKL\", \"ZXCVBNM,.\"];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n\n// The poems broken at 16 letters; a broken line goes on indented by two. A\n// line with a starred word is typed in red throughout.\nfunction wrap() {\n  const out = [];\n  for (const line of POEMS) {\n    const red = line.includes(\"*\");\n    let row = [];\n    let len = 0;\n    for (const word of line.replace(/\\*/g, \"\").split(\" \")) {\n      if (!word) continue;\n      if (len && len + 1 + word.length > COLS) {\n        out.push(row);\n        row = [{ ch: \" \" }, { ch: \" \" }];\n        len = 2;\n      } else if (len) {\n        row.push({ ch: \" \" });\n        len++;\n      }\n      for (const ch of word) row.push({ ch, red });\n      len += word.length;\n    }\n    out.push(row);\n  }\n  return out;\n}\n\n// Key and typebar for each letter.\nfunction keyOf(ch) {\n  for (let r = 0; r \u003c 3; r++) {\n    const i = KEYROWS[r].indexOf(ch);\n    if (i >= 0) return { r, i, bar: clamp(Math.round(i * 1.45 + r * 0.6), 0, BARS - 1) };\n  }\n  return { r: 0, i: 9, bar: 14 };\n}\n\nfunction lamp(x, y) {\n  return 0.8 + 0.3 * Math.exp(-((x - 6) ** 2 + (y - 10) ** 2) / (2 * 40 * 40));\n}\n\nexport function setup(params) {\n  const P = params;\n  P.lines = wrap();\n  P.started = false;\n  P.ink = new Uint8Array(PW * PH);\n  P.inkRed = new Uint8Array(PW * PH);\n  P.grain = new Uint8Array(PW * PH);\n  for (let i = 0; i \u003c PW * PH; i++) P.grain[i] = Math.floor(Math.random() * 256);\n  P.frame = new Float32Array(N * 3);\n  P.machine = null;\n}\n\nfunction newSheet(P) {\n  P.ink.fill(0);\n  P.inkRed.fill(0);\n  P.row = 0;\n}\n\n// One letter struck at the current column: the strike strength varies from\n// letter to letter, and its pixels from one to the next.\nfunction stamp(P, cell, red) {\n  const g = GLYPHS[cell.ch];\n  if (!g) return;\n  const x0 = MARGIN + P.col * 4;\n  const y0 = TOP + P.row * P.ls;\n  const strike = 0.62 + 0.38 * Math.random();\n  const word = red ? 255 : P.wordRand;\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = 0; i \u003c 3; i++) {\n      if (g[j * 3 + i] !== \"1\") continue;\n      const p = (y0 + j) * PW + x0 + i;\n      if (p \u003c 0 || p >= PW * PH) continue;\n      P.ink[p] = Math.round(255 * clamp(strike * (0.8 + 0.2 * Math.random()) + (j === 0 ? -0.06 : 0), 0, 1));\n      P.inkRed[p] = word;\n    }\n}\n\nfunction linesPerPage(P) {\n  return Math.floor((PH - TOP - 24) / P.ls);\n}\n\n// The carriage moves on one letter; five letters before the right margin\n// the bell rings.\nfunction advance(P) {\n  P.col++;\n  if (P.col === COLS - 5) P.bell = 1;\n}\n\n// The typist, as a little machine of its own: type the line, ring, return.\nfunction step(P, dt) {\n  P.timer -= dt;\n  if (P.strike) {\n    P.strike.t += dt;\n    // The letter lands when the typebar reaches the paper, and the carriage\n    // escapes one letter as the bar falls back.\n    if (P.strike.cell && P.strike.t >= 0.05) {\n      stamp(P, P.strike.cell, P.strike.red);\n      P.strike.cell = null;\n      advance(P);\n    }\n    if (P.strike.t > 0.16) P.strike = null;\n  }\n  P.bell = Math.max(0, P.bell - dt * 1.6);\n  P.dip = Math.max(0, P.dip - dt * 8);\n  // The carriage and the paper follow where the typist put them.\n  const want = PX - MARGIN - P.col * 4;\n  const rate = P.phase === \"type\" ? 120 : 220;\n  if (P.carX \u003c want) P.carX = Math.min(want, P.carX + rate * dt);\n  else if (P.carX > want) P.carX = Math.max(want, P.carX - rate * dt);\n  const scroll = TOP + P.row * P.ls + 4 - BASE + P.extra;\n  P.scroll += clamp(scroll - P.scroll, -90 * dt, 90 * dt);\n  if (P.timer > 0 || (P.strike && P.strike.cell)) return;\n  const line = P.lines[P.line % P.lines.length];\n  if (P.phase === \"type\") {\n    if (P.col >= line.length) {\n      P.phase = \"return\";\n      P.timer = 0.12 + 0.15 / P.speed;\n      return;\n    }\n    const cell = line[P.col];\n    P.dip = 1;\n    if (cell.ch === \" \") {\n      P.wordRand = Math.floor(Math.random() * 255);\n      P.key = { r: 3, i: 0 };\n      advance(P);\n    } else {\n      const k = keyOf(cell.ch);\n      P.key = k;\n      P.strike = { bar: k.bar, t: 0, red: cell.red || P.wordRand \u003c 255 * P.redShare, cell };\n    }\n    const pause = cell.ch === \" \" ? 0.08 : /[,.:;-]/.test(cell.ch) ? 0.12 : 0;\n    P.timer = (0.22 * (0.7 + 0.6 * Math.random())) / P.speed + pause;\n  } else if (P.phase === \"return\") {\n    // Carriage return: the paper rides back right and the platen feeds a line.\n    P.col = 0;\n    P.line++;\n    P.row++;\n    P.phase = \"type\";\n    P.timer = 0.25 + 0.2 / P.speed;\n    P.wordRand = Math.floor(Math.random() * 255);\n    if (P.row >= linesPerPage(P)) {\n      // The sheet is full: pulled out over the top, and a fresh one wound in.\n      P.phase = \"page\";\n      P.timer = 1.8;\n      P.extra = 150;\n    }\n  } else if (P.phase === \"page\") {\n    newSheet(P);\n    P.extra = 0;\n    P.scroll = TOP + 4 - BASE - 70;\n    P.phase = \"type\";\n    P.timer = 1;\n  }\n}\n\n// The still parts of the machine below the paper, drawn once.\nfunction buildMachine(P) {\n  const M = new Float32Array(N * 3);\n  const put = (x, y, c) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = (y * W + x) * 3;\n    M[p] = c[0];\n    M[p + 1] = c[1];\n    M[p + 2] = c[2];\n  };\n  // The desk lamp at the upper left, and the wall behind the machine, warm\n  // where the lamp falls on it.\n  P.lamp = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) P.lamp[p] = lamp(p % W, Math.floor(p / W));\n  for (let y = 0; y \u003c= PAPER_END; y++) for (let x = 0; x \u003c W; x++) put(x, y, [22, 17, 14].map((v) => v * P.lamp[y * W + x]));\n  for (let y = PAPER_END + 1; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      // The enamel body, lit from the lamp at the upper left, its front\n      // falling away into shade.\n      const l = lamp(x, y) * (1 - 0.35 * ((y - 90) / 38));\n      put(x, y, ENAMEL.map((v) => v * l));\n    }\n  // The carriage rail and the opening of the type basket.\n  for (let x = 0; x \u003c W; x++) put(x, PAPER_END + 1, CHROME.map((v) => v * lamp(x, 89)));\n  for (let y = PAPER_END + 2; y \u003c 110; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r = Math.hypot(x - BX, y - BY);\n      if (r \u003c 21.5 && y > BY) put(x, y, [14, 15, 16]);\n      if (r >= 21.5 && r \u003c 22.6 && y > BY) put(x, y, CHROME.map((v) => v * 0.8));\n    }\n  // Keys: three staggered rows of round caps with chrome rims, and a space bar.\n  P.keys = [];\n  for (let r = 0; r \u003c 3; r++)\n    for (let i = 0; i \u003c KEYROWS[r].length; i++) {\n      const kx = 3 + r * 2 + i * 6;\n      const ky = 111 + r * 5;\n      P.keys.push([r, i, kx, ky]);\n    }\n  for (let x = 18; x \u003c 47; x++) {\n    put(x, 126, CHROME.map((v) => v * 0.85));\n    put(x, 127, [30, 30, 32]);\n  }\n  P.machine = M;\n}\n\nfunction drawKey(F, kx, ky, down) {\n  for (let j = 0; j \u003c 4; j++)\n    for (let i = 0; i \u003c 4; i++) {\n      if ((i === 0 || i === 3) && (j === 0 || j === 3)) continue;\n      const rim = i === 0 || i === 3 || j === 0 || j === 3;\n      const c = rim ? (down ? [110, 114, 118] : [196, 200, 204]) : down ? [8, 8, 9] : [26, 26, 28];\n      const y = ky + j + (down ? 1 : 0);\n      const p = (y * W + kx + i) * 3;\n      if (y \u003c H) {\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n    }\n}\n\nfunction line(F, x0, y0, x1, y1, c) {\n  const n = Math.ceil(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0))) + 1;\n  for (let s = 0; s \u003c= n; s++) {\n    const x = Math.round(x0 + ((x1 - x0) * s) / n);\n    const y = Math.round(y0 + ((y1 - y0) * s) / n);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = (y * W + x) * 3;\n    F[p] = c[0];\n    F[p + 1] = c[1];\n    F[p + 2] = c[2];\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.paper = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.05, 3) / 2;\n  P.wear = clamp(k[3], 0, 1);\n  P.redShare = 0.45 * P.wear * P.wear;\n  const ls = Math.round(7 * clamp(k[2], 1, 2));\n  if (!P.started) {\n    P.started = true;\n    P.ls = ls;\n    newSheet(P);\n    // The page is half typed when the panel opens: the first lines are already\n    // on it, and the typist has been at the next for three seconds.\n    const half = Math.floor(linesPerPage(P) / 2);\n    P.line = 0;\n    for (; P.row \u003c half; P.row++, P.line++) {\n      const row = P.lines[P.line % P.lines.length];\n      for (P.col = 0; P.col \u003c row.length; P.col++) {\n        if (row[P.col].ch === \" \" || !P.col) P.wordRand = Math.floor(Math.random() * 255);\n        stamp(P, row[P.col], row[P.col].red);\n      }\n    }\n    P.col = 0;\n    Object.assign(P, { phase: \"type\", timer: 0, strike: null, bell: 0, dip: 0, key: null, extra: 0, wordRand: 0 });\n    P.carX = PX - MARGIN;\n    P.scroll = TOP + P.row * P.ls + 4 - BASE;\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30);\n  }\n  P.ls = ls;\n  step(P, dt);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  if (!P.machine) buildMachine(P);\n  const F = P.frame;\n  F.set(P.machine);\n  // Paper and ink for the Paper knob, between its four sets.\n  const u = P.paper * 3;\n  const i0 = Math.min(2, Math.floor(u));\n  const [paper, ink, red] = [0, 1, 2].map((j) => mix(SETS[i0][j], SETS[i0 + 1][j], u - i0));\n  const cx = Math.round(P.carX);\n  const sc = Math.round(P.scroll);\n  const wear = P.wear;\n  const fade = 1 - 0.5 * wear;\n  // The platen, rubber black, with a knob at either end, all riding with the paper.\n  for (let y = 75; y \u003c= PAPER_END; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - cx;\n      const p = (y * W + x) * 3;\n      const t = (y - 75) / 13;\n      const shade = 0.5 + 0.9 * Math.exp(-((t - 0.3) ** 2) / 0.03);\n      if (px >= -6 && px \u003c PW + 6) {\n        F[p] = 26 * shade;\n        F[p + 1] = 26 * shade;\n        F[p + 2] = 30 * shade;\n      } else if ((px >= -12 && px \u003c -6) || (px >= PW + 6 && px \u003c PW + 12)) {\n        const ridge = (px & 1) === 0 ? 1 : 0.7;\n        F[p] = 118 * shade * ridge;\n        F[p + 1] = 110 * shade * ridge;\n        F[p + 2] = 100 * shade * ridge;\n      }\n    }\n  // The carriage return lever, chrome, standing up from the left knob.\n  line(F, cx - 10, 74, cx - 18, 64, CHROME);\n  line(F, cx - 18, 64, cx - 24, 63, CHROME);\n  // The sheet.\n  const top = Math.max(0, -sc);\n  for (let y = top; y \u003c= PAPER_END; y++) {\n    const py = y + sc;\n    if (py >= PH) break;\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - cx;\n      if (px \u003c 0 || px >= PW) continue;\n      const p = (y * W + x) * 3;\n      // The sheet bends away round the platen in its last rows.\n      const l = P.lamp[y * W + x] * (y > 84 ? 1 - 0.09 * (y - 84) : 1);\n      let r = paper[0] * l;\n      let g = paper[1] * l;\n      let b = paper[2] * l;\n      const q = py * PW + px;\n      const s = P.ink[q];\n      if (s) {\n        const gr = P.grain[q] / 255;\n        const a = clamp((s / 255) * fade - wear * 0.35 * (1 - gr), 0, 1);\n        const c = P.inkRed[q] === 255 || P.inkRed[q] \u003c 255 * P.redShare ? red : ink;\n        r += (c[0] * l - r) * a;\n        g += (c[1] * l - g) * a;\n        b += (c[2] * l - b) * a;\n      }\n      F[p] = r;\n      F[p + 1] = g;\n      F[p + 2] = b;\n    }\n  }\n  // The ribbon, black over red, from spool to spool past the printing point,\n  // lifted over the line while a typebar strikes.\n  const st = P.strike;\n  const lift = st ? clamp(st.t \u003c 0.05 ? st.t / 0.05 : 1 - (st.t - 0.08) / 0.08, 0, 1) : 0;\n  const rib = [mix([16, 16, 18], [74, 72, 76], wear), mix([164, 24, 28], [124, 64, 62], wear)];\n  for (let x = 12; x \u003c 53; x++) {\n    const dx = Math.abs(x - 32);\n    const y = dx \u003c 6 ? 84 : 84 + Math.round((dx - 6) * 0.28);\n    for (let j = 0; j \u003c 2; j++) {\n      const p = ((y + j) * W + x) * 3;\n      const c = rib[j];\n      F[p] = c[0];\n      F[p + 1] = c[1];\n      F[p + 2] = c[2];\n    }\n  }\n  if (lift > 0.3) {\n    const y0 = 84 - Math.round(lift * 5);\n    for (let y = y0; y \u003c y0 + 5; y++)\n      for (let x = 29; x \u003c 36; x++) {\n        const p = (y * W + x) * 3;\n        const c = rib[st.red ? 1 : 0];\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n  }\n  // The card guide round the printing point.\n  for (let x = 25; x \u003c 40; x++) {\n    if (x === 31 || x === 33 || x === 32) continue;\n    const p = (86 * W + x) * 3;\n    F[p] = CHROME[0];\n    F[p + 1] = CHROME[1];\n    F[p + 2] = CHROME[2];\n  }\n  // Ribbon spools, their hubs turning a little at every stroke.\n  for (const [sx, dir] of [\n    [6, 1],\n    [58, -1],\n  ])\n    for (let y = 89; y \u003c 101; y++)\n      for (let x = sx - 6; x \u003c= sx + 6; x++) {\n        const r = Math.hypot(x - sx, y - 95);\n        if (r > 5.6 || x \u003c 0 || x >= W) continue;\n        const p = (y * W + x) * 3;\n        const a = Math.atan2(y - 95, x - sx) * dir + (P.line * COLS + P.col) * 0.15;\n        let c;\n        if (r \u003c 1.6) c = CHROME;\n        else if (r \u003c 3.2) c = Math.cos(a * 3) > 0.4 ? CHROME.map((v) => v * 0.8) : [20, 20, 22];\n        else c = y \u003c 95 ? rib[0].map((v) => v + 20) : rib[1];\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n  // The typebars, fanned in the basket; the one striking swings up to the paper.\n  for (let b = 0; b \u003c BARS; b++) {\n    const a = Math.PI * (0.1 + (0.8 * b) / (BARS - 1));\n    const ox = BX + 20 * Math.cos(a);\n    const oy = BY + 20 * Math.sin(a);\n    let tx = BX + 6 * Math.cos(a);\n    let ty = BY + 6 * Math.sin(a);\n    if (st && st.bar === b) {\n      const s = clamp(st.t \u003c 0.05 ? st.t / 0.05 : 1 - (st.t - 0.05) / 0.09, 0, 1);\n      tx += (32 - tx) * s;\n      ty += (82 - ty) * s;\n    }\n    line(F, ox, oy, tx, ty, st && st.bar === b ? [230, 232, 236] : [120, 124, 128]);\n  }\n  // The keys, the struck one pressed down.\n  for (const [r, i, kx, ky] of P.keys) drawKey(F, kx, ky, P.dip > 0.2 && P.key && P.key.r === r && P.key.i === i);\n  if (P.dip > 0.2 && P.key && P.key.r === 3) for (let x = 18; x \u003c 47; x++) for (let j = 126; j \u003c 128; j++) F[(j * W + x) * 3] *= 0.6;\n  // The bell, a brass dome under the right spool, flashing as it rings and\n  // throwing its flash on the enamel round it.\n  const bell = P.bell * P.bell;\n  for (let y = 99; y \u003c 110; y++)\n    for (let x = 51; x \u003c W; x++) {\n      const dx = x - 58;\n      const dy = y - 105;\n      const p = (y * W + x) * 3;\n      const dome = dy >= -1 && dy \u003c= 1 && Math.abs(dx) \u003c= (dy === -1 ? 1 : dy === 0 ? 2 : 3);\n      if (dome) {\n        const c = mix(dy === -1 ? [210, 170, 70] : [160, 116, 40], [255, 244, 190], bell);\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      } else if (bell > 0.01) {\n        const g = bell * Math.exp(-(dx * dx + dy * dy) / 8);\n        F[p] += (255 - F[p]) * g * 0.8;\n        F[p + 1] += (230 - F[p + 1]) * g * 0.8;\n        F[p + 2] += (140 - F[p + 2]) * g * 0.8;\n      }\n    }\n  for (let y = 0, p = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, F[p], F[p + 1], F[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Paper=0..1, Speed=0.2..3, Spacing=1..2, Ribbon=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Paper","min":0,"max":1,"about":"The sheet and its ink: white bond with black at 0, then cream with brown, a canary carbon copy in blue and a pink copy in violet."},{"name":"Speed","min":0.2,"max":3,"about":"Strokes a second: at 2 a brisk four and a half, at 0.2 one every two seconds, at 3 nearly seven."},{"name":"Spacing","min":1,"max":2,"about":"The line feed, from single spacing at 1 (7 rows a line) to double at 2 (14 rows)."},{"name":"Ribbon","min":0,"max":1,"about":"At 0 a fresh ribbon, black with the titles on its red half; turned up it wears to a faint grey that drops pixels, and the typist moves to the red half for more and more words."}],"start":[0,2,1,0.06],"measures":{"motion":0.4854,"detail":0.1156,"edges":0.8353,"complexity":0.7724,"coverage":0.9016,"colour":0.0948,"drift":0.1684},"knobResponse":[0.084,0.1398,0.167,0.0481]},{"slug":"veiled-lady","title":"Veiled Lady","family":"fungi","round":20,"note":"동트기 전 열대 숲 바닥을 손전등으로 비춘 망태버섯 타임랩스예요. 낙엽 속 흰 알이 터져 대가 패널 높이만큼 솟고, 올리브색 갓 밑에서 흰 레이스 망사가 낙엽 가까이까지 내려와요. 파리가 꼬였던 버섯이 시들어 쓰러지면 옆에서 다음 알이 부풀고, K1 을 돌리면 손전등이 UV 로 바뀌어 망사가 청록으로 빛나요.","idea":"A torch-lit time-lapse of a bridal veil stinkhorn on a tropical forest floor before dawn: an egg in the leaf litter splits, a white stalk shoots up under an olive spore cap, a lace veil drops from the cap almost to the leaves, flies come, and it slumps as the next egg swells.","buttons":"K1 tap starts a new egg now.","code":"// ===== Patternflow pattern =====\n// Title:   Veiled Lady\n// Family:  fungi\n// Idea:    A torch-lit time-lapse of a bridal veil stinkhorn on a tropical forest floor before dawn: an egg in the leaf litter splits, a white stalk shoots up under an olive spore cap, a lace veil drops from the cap almost to the leaves, flies come, and it slumps as the next egg swells.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after time-lapse films of Phallus indusiatus, the bridal veil stinkhorn\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Torch=0..1, Speed=0.2..3, Veil=0..1, Rain=0..1\n//\n// Knob 1: Torch. A warm incandescent bulb at 0, then a cold white LED, a blue gel, and at 1 a UV torch under which the veil glows cyan and the leaves dark red.\n// Knob 2: Speed. The time-lapse rate: at 2 one stinkhorn lives about 30 s and a new egg starts every 22 s; 0.2 is ten times slower.\n// Knob 3: Veil. At 0 an open net, holes 3 to 4 LEDs across, that stops a hand above the litter; turned up, finer, to holes of 2, longer and wider, its hem on the leaves.\n// Knob 4: Rain. Near 0 a light mist and a drip now and then; turned up, drops streak through the beam, splash on the litter and bead on the knots of the net.\n// Buttons: K1 tap starts a new egg now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, sin, cos, sqrt, floor, round, ceil, exp, asin, PI } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(x, y) {\n  let h = Math.imul(x | 0, 374761393) + Math.imul(y | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nconst f32 = (n) => new Float32Array(n);\nconst tab = (n, f) => Float32Array.from({ length: n }, (_, i) => f(i));\nconst ST = tab(1024, (i) => sin((i * PI) / 512));\nconst fsin = (x) => ST[((x * 162.97) | 0) & 1023];\nconst AS = tab(1025, (i) => asin(i / 512 - 1));\nconst CAPF = tab(257, (i) => (1 - (i / 256) ** 2.6) ** 0.45 * (1 - (0.2 * i) / 256));\nconst JT = tab(512, (i) => hash(i, 31));\nconst CW = new Float64Array(2);\n\n// One life in time-lapse seconds at Speed 2. The first opens with its veil on the way down.\nconst [SPLIT, RISE0, RISE1, VEIL0, VEIL1, FLIES, EAT1, WILT, SLUMP0, SLUMP1, GONE, NEXT, OPEN] = [2.6, 3.2, 9.6, 8.3, 13.5, 13, 26, 24, 25.5, 31.5, 38, 22, 8.8];\nconst TORCH = [[1, 0.9, 0.75], [0.86, 0.92, 1], [0.45, 0.58, 1], [0.55, 0.25, 1]];\nconst AMB = 0.05;\n// Materials: albedo, then glow under UV.\nconst GLEBA = [0.31, 0.28, 0.09, 0.03, 0.05, 0.01];\nconst RIDGE = [0.44, 0.4, 0.15, 0.04, 0.07, 0.02];\nconst GLOSS = [0.95, 0.95, 0.85, 0.05, 0.08, 0.02];\nconst WHITE = [0.91, 0.89, 0.81, 0.3, 0.4, 0.6];\nconst PIT = [0.23, 0.2, 0.11, 0.02, 0.03, 0.02];\nconst EGG = [0.95, 0.86, 0.9, 0.32, 0.4, 0.62];\nconst CUP = [0.86, 0.77, 0.78, 0.28, 0.34, 0.5];\nconst FLY = [[0.2, 0.62, 0.42, 0.05, 0.1, 0.05], [0.3, 0.06, 0.05, 0, 0, 0], [0.75, 0.78, 0.8, 0.1, 0.1, 0.2]];\n\nconst lightAt = (P, x, y) => AMB + P.PX[x] * P.PY[y];\n\nfunction put(P, p, l, m, k) {\n  const { tc: T, buf: b } = P;\n  const u = P.uv * l;\n  for (let c = 0, o = p * 3; c \u003c 3; c++, o++) b[o] += ((m[c] * T[c] * l + m[c + 3] * u) * 255 - b[o]) * k;\n}\n\n// The forest, painted once.\nfunction paint(P) {\n  const [A, F, E, D] = [f32(N * 3), f32(N * 3), f32(N * 3), f32(N)];\n  Object.assign(P, { alb: A, flu: F, emi: E, dep: D });\n  const front = new Uint8Array(N);\n  const lit = (P.lit = new Int16Array(W));\n  const set = (x, y, d, r, g, b, fr = 0, fg = 0, fb = 0) => {\n    [x, y] = [floor(x), floor(y)];\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return -1;\n    const p = y * W + x;\n    A.set([r, g, b], p * 3);\n    F.set([fr, fg, fb], p * 3);\n    E.fill(0, p * 3, p * 3 + 3);\n    D[p] = d;\n    return p;\n  };\n  const near = (y) => 1.2 + (0.5 * (y - 104)) / 23;\n  for (let p = 0; p \u003c N; p++) {\n    const y = (p / W) | 0;\n    const [k, f] = [y / 30, 1 - ease(24, 32, y)];\n    set(p % W, y, 0.12, 0.03, 0.05, 0.04);\n    E.set([(8 + 7 * k) * f, (13 + 12 * k) * f, (34 + 22 * k) * f], p * 3);\n  }\n  for (let i = 0; i \u003c 46; i++) {\n    const [cx, cy, rx, ry] = [rnd() * 70 - 3, -4 + rnd() * 36, 3 + rnd() * 5, 2 + rnd() * 3.5];\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++)\n        if (((x + 0.5 - cx) / rx) ** 2 + ((y + 0.5 - cy) / ry) ** 2 \u003c 1 - 0.35 * hash(x, y + 300)) set(x, y, 0.3, 0.04, 0.1, 0.05, 0.18, 0, 0.02);\n  }\n  // Trunks, fissured, with lichen; the near left one on buttress roots.\n  for (const [x0, w, lean, d, fin] of [[23, 2, 0.01, 0.22, 0], [43, 3, -0.01, 0.26, 0], [56, 5, 0.03, 0.55, 4], [7, 8, -0.02, 0.62, 9]])\n    for (let y = 0; y \u003c 112; y++) {\n      const cx = x0 + lean * (y - 64);\n      const hw = w / 2 + fin * max(0, (y - 82) / 26) ** 2;\n      for (let x = floor(cx - hw); x \u003c= cx + hw; x++) {\n        const q = (x + 0.5 - cx) / hw;\n        if (abs(q) > 1) continue;\n        const sh = 0.3 + 0.7 * sqrt(1 - q * q) - 0.2 * q;\n        const k = sh * (sin((x - cx) * 2.3 + 1.6 * sin(y * 0.13 + x0)) > 0.55 ? 0.5 : 1);\n        if (hash(floor(x / 3) + x0, floor(y / 4)) > 0.87) set(x, y, d, 0.5 * sh, 0.56 * sh, 0.45 * sh, 0.4, 0.55, 0.12);\n        else set(x, y, d, 0.36 * k, 0.32 * k, 0.27 * k);\n      }\n    }\n  // Heart-shaped leaves of the understory.\n  for (const [bx, by, len, ang, d] of [[-2, 100, 24, -1, 0.85], [-3, 74, 17, -0.45, 0.6], [66, 103, 21, -2.25, 0.75]]) {\n    const [ca, sa] = [cos(ang), sin(ang)];\n    for (let y = floor(by - len); y \u003c= by + len; y++)\n      for (let x = floor(bx - len); x \u003c= bx + len; x++) {\n        const [dx, dy] = [x + 0.5 - bx, y + 0.5 - by];\n        const u = dx * ca + dy * sa;\n        const v = abs(-dx * sa + dy * ca);\n        const half = len * 0.5 * sin(PI * (u / len) ** 0.7) * (1 - (0.2 * u) / len);\n        if (u \u003c 0 || u > len || v > half) continue;\n        const k = (v \u003c 0.6 ? 1.7 : abs(((u * 0.6 - v * 0.8) % 3.2) - 1.6) \u003c 0.45 ? 1.3 : 1) * (v > 0.2 * half && v \u003c 0.6 * half ? 1.25 : 0.95);\n        set(x, y, d, 0.07 * k, 0.3 * k, 0.08 * k, 0.5, 0.01, 0.05);\n      }\n  }\n  // Leaf litter, nearer leaves over farther, then twigs.\n  const [s1, s2] = [rnd() * 6, rnd() * 6];\n  for (let x = 0; x \u003c W; x++) {\n    lit[x] = round(105 + 1.6 * sin(x * 0.19 + s1) + 1.1 * sin(x * 0.47 + s2));\n    for (let y = lit[x]; y \u003c H; y++) set(x, y, near(y), 0.1, 0.07, 0.05, 0.05, 0.04, 0.01);\n  }\n  const PAL = [[0.55, 0.33, 0.14], [0.68, 0.5, 0.25], [0.4, 0.22, 0.1], [0.75, 0.6, 0.36], [0.3, 0.17, 0.08], [0.6, 0.28, 0.12], [0.5, 0.45, 0.32]];\n  const leaves = [];\n  for (let i = 0; i \u003c 300; i++) leaves.push([rnd() * 70 - 3, 102 + rnd() * 27, 2.5 + rnd() * 4.5, 1 + rnd() * 1.8, (rnd() - 0.5) * 1.5, floor(rnd() * 7), 0.7 + 0.5 * rnd()]);\n  for (const [cx, cy, len, wid, ang, ci, sh] of leaves.sort((a, b) => a[1] - b[1])) {\n    const [ca, sa, c] = [cos(ang), sin(ang), PAL[ci]];\n    for (let y = floor(cy - len); y \u003c= cy + len; y++)\n      for (let x = floor(cx - len); x \u003c= cx + len; x++) {\n        if (x \u003c 0 || x >= W || y >= H || y \u003c lit[x] - 1) continue;\n        const [dx, dy] = [x + 0.5 - cx, y + 0.5 - cy];\n        const u = (dx * ca + dy * sa) / len;\n        const v = (-dx * sa + dy * ca) / wid;\n        const q = u * u + v * v;\n        const k = sh * (abs(v) \u003c 0.3 ? 0.78 : 1) * (q > 0.7 ? 0.82 : 1) * (0.9 + 0.2 * hash(x, y));\n        if (q \u003c= 1) front[set(x, y, near(y), c[0] * k, c[1] * k, c[2] * k, 0.06, 0.05, 0.01)] = cy > 115 ? 1 : 0;\n      }\n  }\n  for (let i = 0; i \u003c 8; i++) {\n    const [x0, y0, len, ang, tk] = [rnd() * 64, 106 + rnd() * 20, 8 + rnd() * 22, (rnd() - 0.5) * 0.8, i \u003c 2 ? 1 : 0];\n    for (let t = 0; t \u003c len; t += 0.5) {\n      const x = x0 + cos(ang) * t;\n      const y = y0 + sin(ang) * t + 0.8 * sin(t * 0.3 + i);\n      if (x \u003c 0 || x >= W || y \u003c lit[floor(x)] - 1) continue;\n      front[set(x, y, near(y), 0.2, 0.13, 0.08)] = front[set(x, y - 1, near(y), 0.36 + 0.14 * tk, 0.27 + 0.13 * tk, 0.18 + 0.12 * tk)] = y0 > 115 ? 1 : 0;\n    }\n  }\n  P.fronts = Int32Array.from(front.reduce((a, f, p) => (f && a.push(p), a), []));\n  P.fsave = new Float32Array(P.fronts.length * 3);\n}\n\nfunction spawnBody(P, age, first) {\n  let [bx, best] = [33, -1];\n  for (let i = 0; i \u003c 24 && !first; i++) {\n    const x = 15 + rnd() * 34;\n    let d = 18;\n    for (const b of P.bodies) if (b.age \u003c SLUMP1) d = min(d, abs(b.bx - x));\n    if ((d += rnd() * 4) > best) [best, bx] = [d, x];\n  }\n  const sc = first ? 1 : 0.86 + rnd() * 0.14;\n  const dir = (bx \u003c 32 ? -1 : 1) * (rnd() \u003c 0.25 ? -1 : 1);\n  P.bodies.push({ bx, by: 109 + (3 * (sc - 0.86)) / 0.14, sc, H: 78 * sc, dir, age, seed: floor(rnd() * 1000), lean: (rnd() - 0.5) * 0.1, flies: [], maxF: 4 + floor(rnd() * 4) });\n}\n\nexport function setup(params) {\n  const P = params;\n  paint(P);\n  const f = f32;\n  Object.assign(P, { buf: f(N * 3), PX: f(W), PY: f(H), tc: f(3), dB: f(N).fill(99), sB: f(N), hB: f(N), tch: new Int32Array(N) });\n  P.G = { cx: f(300), cy: f(300), a: f(300), r: f(300), n: 0, Ls: 0 };\n  Object.assign(P, { bodies: [], drops: [], splash: [], t: 0, rate: 1, torch: 0, veil: 0, rain: 0.06, rAcc: 0, tx: 33 });\n  spawnBody(P, OPEN, true);\n}\n\n// The stalk's centre line: it rises, then crumples and slumps onto the litter.\nfunction geom(P, b) {\n  const { G } = P;\n  const grow = 1 - (1 - clamp((b.age - RISE0) / (RISE1 - RISE0), 0, 1)) ** 2.2;\n  const slump = ease(SLUMP0, SLUMP1, b.age);\n  const Ls = (b.H * grow + 1.5) * (1 - 0.72 * slump ** 0.7);\n  const bend = b.lean + b.dir * 1.9 * slump ** 0.8;\n  const n = min(299, max(2, ceil(Ls / 0.9)));\n  let [x, y] = [b.bx, b.by - 2];\n  for (let i = 0; i \u003c= n; i++) {\n    const a = bend * (i / n) ** 1.2;\n    const r = b.sc * (4.3 - (0.9 * i) / n + 0.35 * sin((PI * i) / n));\n    G.cx[i] = x;\n    G.cy[i] = y;\n    G.a[i] = a;\n    G.r[i] = r;\n    x += (sin(a) * Ls) / n;\n    y = min(y - (cos(a) * Ls) / n, P.lit[clamp(round(x), 0, W - 1)] + 2 - 0.5 * r);\n  }\n  [G.n, G.Ls] = [n, Ls];\n}\n\n// The egg; once split, the torn cup round the foot of the stalk.\nfunction egg(P, b, fade) {\n  const cup = b.age >= SPLIT;\n  const sw = cup ? 1 : mix(0.45, 1, 1 - (1 - clamp(b.age / (SPLIT * 0.9), 0, 1)) ** 2);\n  const [ew, eh, ex, ey] = [(cup ? 6.6 : 6.2) * b.sc * sw, 6.8 * b.sc * sw, b.bx, b.by - 1 - 4.5 * sw];\n  const crack = cup ? 0 : ease(SPLIT - 0.9, SPLIT, b.age);\n  for (let y = max(0, floor(ey - eh)); y \u003c= min(H - 1, ey + eh); y++)\n    for (let x = max(0, floor(ex - ew)); x \u003c= min(W - 1, ex + ew); x++) {\n      const nx = (x + 0.5 - ex) / ew;\n      const ny = (y + 0.5 - ey) / eh;\n      const rr = nx * nx + ny * ny;\n      const rim = cup ? -0.05 + 0.28 * abs(sin(nx * 4.2 + b.seed)) : -9;\n      if (rr > 1 || ny \u003c rim) continue;\n      const l = lightAt(P, x, y) * (0.16 + 0.82 * max(0, -0.38 * nx - 0.38 * ny + 0.84 * sqrt(1 - rr))) * (ny \u003c rim + 0.12 ? 1.2 : 1);\n      const torn = crack > 0 && ny \u003c -0.1 && abs(nx) \u003c crack * 0.85 && abs(ny + 0.55 + 0.13 * sin(nx * 9 + b.seed)) \u003c 0.06 + 0.12 * crack;\n      put(P, y * W + x, l, torn ? GLEBA : cup ? CUP : EGG, fade);\n    }\n}\n\n// Standing, the stalk fills row by row; slumped, it is stamped as discs.\nfunction stalk(P, b, fade, sleeve, slen, V) {\n  const { dB, sB, hB, tch, G } = P;\n  let nt = 0;\n  const mark = (p, d, s, h) => {\n    if (dB[p] > 9) tch[nt++] = p;\n    dB[p] = d;\n    sB[p] = s;\n    hB[p] = h;\n  };\n  if (abs(G.a[G.n]) \u003c 0.4)\n    for (let y = min(H - 1, floor(G.cy[0])), i = 0; y >= max(0, floor(G.cy[G.n])); y--) {\n      while (i \u003c G.n && G.cy[i + 1] > y + 0.5) i++;\n      const [cx, r] = [G.cx[i], G.r[i]];\n      for (let x = max(0, floor(cx - r + 0.5)); x \u003c= min(W - 1, floor(cx + r - 0.5)); x++) {\n        const t = ((x + 0.5 - cx) * cos(G.a[i])) / r;\n        mark(y * W + x, t * t, t, i / G.n);\n      }\n    }\n  else\n    for (let i = 0; i \u003c= G.n; i++) {\n      const [cx, cy, r, nx, ny] = [G.cx[i], G.cy[i], G.r[i], cos(G.a[i]), sin(G.a[i])];\n      for (let y = max(0, floor(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r + 0.5)); y++)\n        for (let x = max(0, floor(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r + 0.5)); x++) {\n          const dx = x + 0.5 - cx;\n          const dy = y + 0.5 - cy;\n          const d = (dx * dx + dy * dy) / (r * r);\n          const p = y * W + x;\n          if (d \u003c 1 && d \u003c dB[p]) mark(p, d, (dx * nx + dy * ny) / r, i / G.n);\n        }\n    }\n  const wc = ease(WILT, SLUMP1, b.age);\n  const crease = ease(SLUMP0, SLUMP1, b.age);\n  const m = [mix(0.95, 0.74, wc), mix(0.93, 0.66, wc), mix(0.87, 0.47, wc), 0.3, 0.42, 0.68];\n  for (let j = 0; j \u003c nt; j++) {\n    const p = tch[j];\n    const t = clamp(sB[p], -1, 1);\n    const hp = hB[p] * G.Ls;\n    const y = (p / W) | 0;\n    dB[p] = 99;\n    let sh = (0.2 + 0.8 * max(0, 0.92 * sqrt(1 - t * t) - 0.38 * t)) * (1 - 0.25 * wc);\n    const arc = asin(t) * 3.2 * b.sc;\n    const row = floor(hp / 1.4);\n    if (hash(row + b.seed, floor(arc / 1.3 + (row & 1) * 0.5) + 50) \u003c 0.24) sh *= 0.74;\n    if (hp % 3.2 \u003c 1) sh *= 1 - 0.4 * crease;\n    if (sleeve > 0 && hp > G.Ls - slen) sh *= 1 + sleeve * (fsin(arc * 1.4 + hp * 1.2) * fsin(arc * 1.4 - hp * 1.2) > 0.4 ? 0.22 : -0.18);\n    if (y > V.ay + 2 && y \u003c V.ay + V.L) sh *= 1 - 0.42 * V.alpha * V.open;\n    put(P, p, lightAt(P, p % W, y) * sh, m, fade);\n  }\n}\n\n// Worley ridges of the cap: F2 - F1; the cell's id and F1 go in CW.\nfunction cell(u, v, seed) {\n  let [f1, f2, id] = [9, 9, 0];\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      const cu = floor(u) + i;\n      const cv = floor(v) + j;\n      const j2 = (((cu + seed) & 15) * 16 + (cv & 15)) * 2;\n      const dx = u - (cu + 0.15 + 0.7 * JT[j2]);\n      const dy = v - (cv + 0.15 + 0.7 * JT[j2 + 1]);\n      const d = dx * dx + dy * dy;\n      if (d \u003c f1) {\n        f2 = f1;\n        f1 = d;\n        id = JT[j2];\n      } else if (d \u003c f2) f2 = d;\n    }\n  CW[0] = id;\n  CW[1] = f1;\n  return sqrt(f2) - sqrt(f1);\n}\n\nfunction cap(P, b, fade) {\n  const { G } = P;\n  const [ax, ay, a] = [G.cx[G.n], G.cy[G.n], G.a[G.n]];\n  const [ux, uy] = [sin(a), -cos(a)];\n  const cs = mix(0.55, 1, ease(SPLIT, RISE0 + 1.5, b.age));\n  const [ch, cw] = [15 * b.sc * cs, 7.6 * b.sc * cs];\n  const eat = ease(FLIES + 1.5, EAT1, b.age);\n  const wc = ease(WILT, SLUMP1, b.age);\n  const [ex, ey] = [abs(uy) * (cw + 1), abs(ux) * (cw + 1)];\n  const [xa, xb, ya, yb] = [ax - ux * 1.5, ax + ux * ch, ay - uy * 1.5, ay + uy * ch];\n  for (let y = max(0, floor(min(ya, yb) - ey)); y \u003c= min(H - 1, max(ya, yb) + ey); y++)\n    for (let x = max(0, floor(min(xa, xb) - ex)); x \u003c= min(W - 1, max(xa, xb) + ex); x++) {\n      const dx = x + 0.5 - ax;\n      const dy = y + 0.5 - ay;\n      const av = dx * ux + dy * uy;\n      const w = -dx * uy + dy * ux;\n      const t = max(0, av) / ch;\n      const hw = cw * CAPF[(min(1, t) * 256) | 0] + (av \u003c 0 ? 0.5 : 0);\n      if (av \u003c -1.5 || av > ch || abs(w) > hw) continue;\n      const q = w / hw;\n      const sh = (0.22 + 0.78 * max(0, 0.9 * sqrt(1 - q * q) - 0.4 * q)) * (0.85 + 0.15 * t) * (1 - 0.3 * wc);\n      const l = lightAt(P, x, y) * sh;\n      const p = y * W + x;\n      // A white collar at the top; where flies ate the slime, white ridges.\n      if (t > 0.9) put(P, p, l, abs(w) \u003c 0.9 && t > 0.96 ? PIT : WHITE, fade);\n      else {\n        const ridge = cell((AS[((q + 1) * 512) | 0] * cw) / 2.5, av / 2.3, b.seed) \u003c 0.24;\n        if (CW[0] \u003c eat) put(P, p, l, ridge ? WHITE : PIT, fade);\n        else if (!ridge && CW[1] \u003c 0.05 && sh > 0.7 && CW[0] > 0.55) put(P, p, l * 1.4, GLOSS, fade);\n        else put(P, p, l, ridge ? RIDGE : GLEBA, fade);\n      }\n    }\n  Object.assign(b, { capX: ax, capY: ay, ux, uy, ch, cw });\n}\n\n// The veil: a diamond net on a flared cone, its threads crowding at the sides.\nfunction veil(P, b, V, front) {\n  const { buf, tc, PX, PY, wet, uv } = P;\n  const { ax, ay, L, r0, rb, sway, wob, band, alpha, bright, col } = V;\n  const seed = b.seed;\n  const C = [0, 1, 2].map((c) => (col[c] * tc[c] + [0.45, 0.95, 1][c] * uv) * 255 * bright);\n  for (let y = max(0, ceil(ay)); y \u003c= min(H - 1, floor(ay + L * 1.06)); y++) {\n    const s = (y + 0.5 - ay) / L;\n    const sc = min(s, 1);\n    const R = r0 + (rb - r0) * sc ** 0.8;\n    const cx = ax + sway * sc * sc;\n    const cw = mix(V.cw0, V.cw1, sc) * V.kw;\n    const ch = cw * 1.15 * V.kh;\n    const [vv, icw, ich, py] = [(s * L) / ch, 1 / (cw * cw), 1 / (ch * ch), PY[y]];\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const sx = (x + 0.5 - cx) / R;\n      if (sx \u003c= -1 || sx >= 1) continue;\n      const c2 = max(0.0144, 1 - sx * sx);\n      const th = front ? AS[((sx + 1) * 512) | 0] : PI - AS[((sx + 1) * 512) | 0];\n      const hem = s > 0.94 ? 1 + 0.035 * fsin(th * 7 + seed) + 0.02 * fsin(th * 13) : 2;\n      if (s > hem) continue;\n      const u = (th * R) / cw;\n      const wb = wob * fsin(u * 2.1 + vv * 1.3 + seed);\n      const g1 = u + vv + wb;\n      const g2 = u - vv - 0.7 * wb;\n      const k = 1.4 / sqrt(icw / c2 + ich);\n      const d1 = abs(g1 - round(g1)) * k;\n      const d2 = abs(g2 - round(g2)) * k;\n      let i = (d1 \u003c 1 ? 1 - d1 : 0) + (d2 \u003c 1 ? 1 - d2 : 0);\n      if (s * L \u003c 2.2) i = max(i, 0.8);\n      if (s > hem - band / L) i = max(i, 0.7);\n      if (i \u003c 0.04) continue;\n      const l = (AMB + PX[x] * py) * (front ? 0.3 + 0.7 * max(0, 0.94 * sqrt(c2) - 0.34 * sx) : 0.18 + 0.18 * sqrt(c2));\n      const a = min(1, i) * alpha;\n      for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++, o++) buf[o] += (C[c] * l - buf[o]) * a;\n      if (front && d1 \u003c 0.7 && d2 \u003c 0.7 && hash(round(g1) + seed, round(g2) + 99) \u003c wet) put(P, y * W + x, l * 1.8, WHITE, alpha);\n    }\n  }\n}\n\nfunction drawBody(P, b) {\n  const age = b.age;\n  if (age \u003c SPLIT) return egg(P, b, 1);\n  geom(P, b);\n  const { G, veil: vk } = P;\n  const fade = 1 - ease(SLUMP1, GONE, age);\n  const f = clamp((age - VEIL0) / (VEIL1 - VEIL0), 0, 1);\n  const fu = ease(0, 1, f);\n  const c = ease(WILT, WILT + 3.5, age);\n  const [ax, ay, r0] = [G.cx[G.n], G.cy[G.n] + 1, G.r[G.n] + 1.4];\n  const Lf = max(0, min(b.by - 13 * b.sc + 10 * vk, P.lit[clamp(round(ax), 0, W - 1)] + 2) - ay);\n  const V = { ax, ay, r0, L: max(0.5, Lf * fu * (1 - 0.15 * c)), rb: mix((20 + 7 * vk) * b.sc * (0.35 + 0.65 * fu), r0 + 2.5, c), cw0: mix(6, 3.2, vk), cw1: mix(7.6, 4, vk) };\n  Object.assign(V, { kw: 0.75 + 0.25 * fu, kh: 0.55 + 0.45 * fu, band: (1 - fu) * 2.5 + 0.6, open: min(1, fu * 2), wob: 0.06 + 0.3 * c, bright: 1 - 0.4 * c });\n  V.sway = (3 * sin(age * 0.9 + b.seed) + 0.8 * sin(P.t * 0.7 + b.seed)) * (1 - c);\n  V.alpha = fade * (1 - ease(0.55, 1, c)) * (Lf > 1 ? 1 : 0);\n  V.col = [mix(0.98, 0.86, c), mix(0.97, 0.79, c), mix(0.93, 0.6, c)];\n  const show = f > 0 && V.alpha > 0.01;\n  if (show) veil(P, b, V, false);\n  stalk(P, b, fade, c, Lf * 0.8, V);\n  egg(P, b, fade);\n  if (show) veil(P, b, V, true);\n  cap(P, b, fade);\n  drawFlies(P, b);\n}\n\n// Flies land on the cap, crawl, hop, and leave when it wilts.\nfunction capPoint(b, q, a) {\n  const av = a * b.ch;\n  const w = q * b.cw * CAPF[(clamp(a, 0, 1) * 256) | 0];\n  return [b.capX + b.ux * av - b.uy * w, b.capY + b.uy * av + b.ux * w];\n}\n\nfunction updateFlies(b, dt) {\n  const want = round(b.maxF * ease(FLIES, FLIES + 3, b.age) * (1 - ease(WILT - 1, WILT + 2.5, b.age)));\n  const fl = b.flies;\n  const stay = fl.filter((f) => f.s \u003c 2);\n  const spot = () => ({ s: 0, q: (rnd() - 0.5) * 1.5, a: 0.15 + rnd() * 0.7 });\n  if (stay.length \u003c want && b.capX !== undefined && rnd() \u003c dt * 2) fl.push({ x: rnd() \u003c 0.5 ? -3 : W + 2, y: 15 + rnd() * 60, vx: 0, vy: 0, ...spot() });\n  if (stay.length > want) Object.assign(stay[0], { s: 2, tx: rnd() \u003c 0.5 ? -8 : W + 8, ty: rnd() * 50 });\n  for (let i = fl.length - 1; i >= 0; i--) {\n    const f = fl[i];\n    if (f.s === 1) {\n      f.q = clamp(f.q + (rnd() - 0.5) * dt * 1.2, -0.8, 0.8);\n      f.a = clamp(f.a + (rnd() - 0.5) * dt * 0.6, 0.1, 0.85);\n      if (rnd() \u003c dt * 0.3) Object.assign(f, spot());\n      continue;\n    }\n    const [tx, ty] = f.s === 0 ? capPoint(b, f.q, f.a) : [f.tx, f.ty];\n    f.vx += ((tx - f.x) * 5 - f.vx * 2.2 + (rnd() - 0.5) * 260) * dt;\n    f.vy += ((ty - f.y) * 5 - f.vy * 2.2 + (rnd() - 0.5) * 260) * dt;\n    f.x += f.vx * dt;\n    f.y += f.vy * dt;\n    if (f.s === 0 && abs(tx - f.x) + abs(ty - f.y) \u003c 1.5) f.s = 1;\n    if (f.s === 2 && abs(f.x - W / 2) > W / 2 + 6) fl.splice(i, 1);\n  }\n}\n\nfunction drawFlies(P, b) {\n  for (const f of b.flies) {\n    const [x, y] = (f.s === 1 ? capPoint(b, f.q, f.a) : [f.x, f.y]).map(round);\n    if (x \u003c 1 || x >= W - 2 || y \u003c 1 || y >= H) continue;\n    const [l, p] = [lightAt(P, x, y), y * W + x];\n    put(P, p, l, FLY[0], 1);\n    put(P, p + 1, l, FLY[1], 1);\n    if (f.s !== 1) for (const dx of [-1, 1]) put(P, p - W + dx + (floor(P.t * 30) & 1), l, FLY[2], 0.8);\n    else if (sin(P.t * 5 + f.q * 40) > 0.7) put(P, p, l * 1.6, GLOSS, 1);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  Object.assign(P, { torch: clamp(k[0], 0, 1), rate: clamp(k[1], 0.2, 3) / 2, veil: clamp(k[2], 0, 1), rain: clamp(k[3], 0, 1) });\n  P.t += dt;\n  for (const b of P.bodies) b.age += dt * P.rate;\n  P.bodies = P.bodies.filter((b) => b.age \u003c GONE);\n  if (min(...P.bodies.map((b) => b.age)) >= NEXT) spawnBody(P, 0, false);\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.bodies.length >= 3) P.bodies.sort((a, b) => b.age - a.age).shift();\n    spawnBody(P, 0, false);\n  }\n  // The beam follows whatever is coming up.\n  let [sw, sx] = [0, 0];\n  for (const b of P.bodies) {\n    const w = ease(SPLIT - 2, RISE1, b.age) * (1 - ease(SLUMP0, GONE, b.age)) + 0.02;\n    sw += w;\n    sx += w * b.bx;\n  }\n  P.tx += ((sx / sw || 33) - P.tx) * (1 - exp(-dt * 0.8));\n  for (const b of P.bodies) updateFlies(b, dt * clamp(P.rate, 0.12, 1.6));\n  P.rAcc += dt * (0.5 + 40 * P.rain ** 1.5);\n  for (; P.rAcc >= 1; P.rAcc--) if (P.drops.length \u003c 160) P.drops.push([rnd() * W, rnd() * 34 - 4, 75 + rnd() * 50]);\n  for (let i = P.drops.length - 1; i >= 0; i--) {\n    const d = P.drops[i];\n    const x = floor(d[0]);\n    d[1] += d[2] * dt * (0.7 + 0.3 * min(P.rate, 1.5));\n    if (d[1] \u003c P.lit[x] - 1) continue;\n    if (P.splash.length \u003c 40) P.splash.push([x, P.lit[x] - 1 + floor(rnd() * 3), 0.15]);\n    P.drops.splice(i, 1);\n  }\n  P.splash = P.splash.filter((s) => (s[2] -= dt) > 0);\n}\n\nfunction light(P) {\n  const f = P.torch * 3;\n  const i = min(2, floor(f));\n  P.uv = ease(0.72, 1, P.torch);\n  for (let c = 0; c \u003c 3; c++) P.tc[c] = mix(TORCH[i][c], TORCH[i + 1][c], f - i) * (1 - 0.7 * P.uv);\n  // A handheld beam sways.\n  const tx = P.tx + 2.5 * sin(P.t * 1.3) + 1.5 * sin(P.t * 2.9 + 1);\n  const ty = 66 + 3 * sin(P.t * 1.7 + 2);\n  for (let x = 0; x \u003c W; x++) P.PX[x] = exp(-(((x + 0.5 - tx) / 30) ** 2));\n  for (let y = 0; y \u003c H; y++) P.PY[y] = exp(-(((y + 0.5 - ty) / 62) ** 4));\n  P.haze = (5 + 38 * P.rain) * (1 - 0.4 * P.uv);\n  P.wet = 0.1 + 0.55 * P.rain;\n}\n\nfunction background(P) {\n  const { alb: A, flu: F, emi: E, dep: D, buf, tc, PX, PY, uv, haze, fronts, fsave } = P;\n  const [r, g, b] = tc;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const pool = PX[p % W] * PY[(p / W) | 0];\n    const l = D[p] * (AMB + pool) * 255;\n    const u = l * uv;\n    const h = haze * pool;\n    buf[o] = A[o] * r * l + E[o] + h * r + F[o] * u;\n    buf[o + 1] = A[o + 1] * g * l + E[o + 1] + h * g + F[o + 1] * u;\n    buf[o + 2] = A[o + 2] * b * l + E[o + 2] + h * b + F[o + 2] * u;\n  }\n  for (let i = 0; i \u003c fronts.length * 3; i++) fsave[i] = buf[fronts[(i / 3) | 0] * 3 + (i % 3)];\n}\n\nfunction drawRain(P) {\n  const { buf, tc, PX, PY } = P;\n  const glow = (x, y, v) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let c = 0; c \u003c 3; c++) buf[(y * W + x) * 3 + c] += v * (0.6 + 0.05 * c + 0.4 * tc[c]) * (1 - 0.6 * P.uv);\n  };\n  for (const [x0, y0] of P.drops) for (let j = 0, x = floor(x0); j \u003c 3; j++) glow(x, floor(y0) - j, (25 + 190 * PX[x] * PY[clamp(floor(y0) - j, 0, H - 1)]) * (1 - j * 0.3));\n  for (const [x, y, life] of P.splash) for (const [dx, dy] of [[-1, 0], [1, 0], [0, -1]]) glow(x + dx, y + dy, life * 900 * PX[x] * PY[min(H - 1, y)]);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { fronts, fsave, buf } = P;\n  light(P);\n  background(P);\n  for (const b of P.bodies.slice().sort((a, b) => a.by - b.by)) drawBody(P, b);\n  for (let i = 0; i \u003c fronts.length * 3; i++) buf[fronts[(i / 3) | 0] * 3 + (i % 3)] = fsave[i];\n  drawRain(P);\n  for (let y = 0, o = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-veiled-lady","type":"code","name":"veiled-lady","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Veiled Lady\n// Family:  fungi\n// Idea:    A torch-lit time-lapse of a bridal veil stinkhorn on a tropical forest floor before dawn: an egg in the leaf litter splits, a white stalk shoots up under an olive spore cap, a lace veil drops from the cap almost to the leaves, flies come, and it slumps as the next egg swells.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after time-lapse films of Phallus indusiatus, the bridal veil stinkhorn\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Torch=0..1, Speed=0.2..3, Veil=0..1, Rain=0..1\n//\n// Knob 1: Torch. A warm incandescent bulb at 0, then a cold white LED, a blue gel, and at 1 a UV torch under which the veil glows cyan and the leaves dark red.\n// Knob 2: Speed. The time-lapse rate: at 2 one stinkhorn lives about 30 s and a new egg starts every 22 s; 0.2 is ten times slower.\n// Knob 3: Veil. At 0 an open net, holes 3 to 4 LEDs across, that stops a hand above the litter; turned up, finer, to holes of 2, longer and wider, its hem on the leaves.\n// Knob 4: Rain. Near 0 a light mist and a drip now and then; turned up, drops streak through the beam, splash on the litter and bead on the knots of the net.\n// Buttons: K1 tap starts a new egg now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, sin, cos, sqrt, floor, round, ceil, exp, asin, PI } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(x, y) {\n  let h = Math.imul(x | 0, 374761393) + Math.imul(y | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nconst f32 = (n) => new Float32Array(n);\nconst tab = (n, f) => Float32Array.from({ length: n }, (_, i) => f(i));\nconst ST = tab(1024, (i) => sin((i * PI) / 512));\nconst fsin = (x) => ST[((x * 162.97) | 0) & 1023];\nconst AS = tab(1025, (i) => asin(i / 512 - 1));\nconst CAPF = tab(257, (i) => (1 - (i / 256) ** 2.6) ** 0.45 * (1 - (0.2 * i) / 256));\nconst JT = tab(512, (i) => hash(i, 31));\nconst CW = new Float64Array(2);\n\n// One life in time-lapse seconds at Speed 2. The first opens with its veil on the way down.\nconst [SPLIT, RISE0, RISE1, VEIL0, VEIL1, FLIES, EAT1, WILT, SLUMP0, SLUMP1, GONE, NEXT, OPEN] = [2.6, 3.2, 9.6, 8.3, 13.5, 13, 26, 24, 25.5, 31.5, 38, 22, 8.8];\nconst TORCH = [[1, 0.9, 0.75], [0.86, 0.92, 1], [0.45, 0.58, 1], [0.55, 0.25, 1]];\nconst AMB = 0.05;\n// Materials: albedo, then glow under UV.\nconst GLEBA = [0.31, 0.28, 0.09, 0.03, 0.05, 0.01];\nconst RIDGE = [0.44, 0.4, 0.15, 0.04, 0.07, 0.02];\nconst GLOSS = [0.95, 0.95, 0.85, 0.05, 0.08, 0.02];\nconst WHITE = [0.91, 0.89, 0.81, 0.3, 0.4, 0.6];\nconst PIT = [0.23, 0.2, 0.11, 0.02, 0.03, 0.02];\nconst EGG = [0.95, 0.86, 0.9, 0.32, 0.4, 0.62];\nconst CUP = [0.86, 0.77, 0.78, 0.28, 0.34, 0.5];\nconst FLY = [[0.2, 0.62, 0.42, 0.05, 0.1, 0.05], [0.3, 0.06, 0.05, 0, 0, 0], [0.75, 0.78, 0.8, 0.1, 0.1, 0.2]];\n\nconst lightAt = (P, x, y) => AMB + P.PX[x] * P.PY[y];\n\nfunction put(P, p, l, m, k) {\n  const { tc: T, buf: b } = P;\n  const u = P.uv * l;\n  for (let c = 0, o = p * 3; c \u003c 3; c++, o++) b[o] += ((m[c] * T[c] * l + m[c + 3] * u) * 255 - b[o]) * k;\n}\n\n// The forest, painted once.\nfunction paint(P) {\n  const [A, F, E, D] = [f32(N * 3), f32(N * 3), f32(N * 3), f32(N)];\n  Object.assign(P, { alb: A, flu: F, emi: E, dep: D });\n  const front = new Uint8Array(N);\n  const lit = (P.lit = new Int16Array(W));\n  const set = (x, y, d, r, g, b, fr = 0, fg = 0, fb = 0) => {\n    [x, y] = [floor(x), floor(y)];\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return -1;\n    const p = y * W + x;\n    A.set([r, g, b], p * 3);\n    F.set([fr, fg, fb], p * 3);\n    E.fill(0, p * 3, p * 3 + 3);\n    D[p] = d;\n    return p;\n  };\n  const near = (y) => 1.2 + (0.5 * (y - 104)) / 23;\n  for (let p = 0; p \u003c N; p++) {\n    const y = (p / W) | 0;\n    const [k, f] = [y / 30, 1 - ease(24, 32, y)];\n    set(p % W, y, 0.12, 0.03, 0.05, 0.04);\n    E.set([(8 + 7 * k) * f, (13 + 12 * k) * f, (34 + 22 * k) * f], p * 3);\n  }\n  for (let i = 0; i \u003c 46; i++) {\n    const [cx, cy, rx, ry] = [rnd() * 70 - 3, -4 + rnd() * 36, 3 + rnd() * 5, 2 + rnd() * 3.5];\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++)\n        if (((x + 0.5 - cx) / rx) ** 2 + ((y + 0.5 - cy) / ry) ** 2 \u003c 1 - 0.35 * hash(x, y + 300)) set(x, y, 0.3, 0.04, 0.1, 0.05, 0.18, 0, 0.02);\n  }\n  // Trunks, fissured, with lichen; the near left one on buttress roots.\n  for (const [x0, w, lean, d, fin] of [[23, 2, 0.01, 0.22, 0], [43, 3, -0.01, 0.26, 0], [56, 5, 0.03, 0.55, 4], [7, 8, -0.02, 0.62, 9]])\n    for (let y = 0; y \u003c 112; y++) {\n      const cx = x0 + lean * (y - 64);\n      const hw = w / 2 + fin * max(0, (y - 82) / 26) ** 2;\n      for (let x = floor(cx - hw); x \u003c= cx + hw; x++) {\n        const q = (x + 0.5 - cx) / hw;\n        if (abs(q) > 1) continue;\n        const sh = 0.3 + 0.7 * sqrt(1 - q * q) - 0.2 * q;\n        const k = sh * (sin((x - cx) * 2.3 + 1.6 * sin(y * 0.13 + x0)) > 0.55 ? 0.5 : 1);\n        if (hash(floor(x / 3) + x0, floor(y / 4)) > 0.87) set(x, y, d, 0.5 * sh, 0.56 * sh, 0.45 * sh, 0.4, 0.55, 0.12);\n        else set(x, y, d, 0.36 * k, 0.32 * k, 0.27 * k);\n      }\n    }\n  // Heart-shaped leaves of the understory.\n  for (const [bx, by, len, ang, d] of [[-2, 100, 24, -1, 0.85], [-3, 74, 17, -0.45, 0.6], [66, 103, 21, -2.25, 0.75]]) {\n    const [ca, sa] = [cos(ang), sin(ang)];\n    for (let y = floor(by - len); y \u003c= by + len; y++)\n      for (let x = floor(bx - len); x \u003c= bx + len; x++) {\n        const [dx, dy] = [x + 0.5 - bx, y + 0.5 - by];\n        const u = dx * ca + dy * sa;\n        const v = abs(-dx * sa + dy * ca);\n        const half = len * 0.5 * sin(PI * (u / len) ** 0.7) * (1 - (0.2 * u) / len);\n        if (u \u003c 0 || u > len || v > half) continue;\n        const k = (v \u003c 0.6 ? 1.7 : abs(((u * 0.6 - v * 0.8) % 3.2) - 1.6) \u003c 0.45 ? 1.3 : 1) * (v > 0.2 * half && v \u003c 0.6 * half ? 1.25 : 0.95);\n        set(x, y, d, 0.07 * k, 0.3 * k, 0.08 * k, 0.5, 0.01, 0.05);\n      }\n  }\n  // Leaf litter, nearer leaves over farther, then twigs.\n  const [s1, s2] = [rnd() * 6, rnd() * 6];\n  for (let x = 0; x \u003c W; x++) {\n    lit[x] = round(105 + 1.6 * sin(x * 0.19 + s1) + 1.1 * sin(x * 0.47 + s2));\n    for (let y = lit[x]; y \u003c H; y++) set(x, y, near(y), 0.1, 0.07, 0.05, 0.05, 0.04, 0.01);\n  }\n  const PAL = [[0.55, 0.33, 0.14], [0.68, 0.5, 0.25], [0.4, 0.22, 0.1], [0.75, 0.6, 0.36], [0.3, 0.17, 0.08], [0.6, 0.28, 0.12], [0.5, 0.45, 0.32]];\n  const leaves = [];\n  for (let i = 0; i \u003c 300; i++) leaves.push([rnd() * 70 - 3, 102 + rnd() * 27, 2.5 + rnd() * 4.5, 1 + rnd() * 1.8, (rnd() - 0.5) * 1.5, floor(rnd() * 7), 0.7 + 0.5 * rnd()]);\n  for (const [cx, cy, len, wid, ang, ci, sh] of leaves.sort((a, b) => a[1] - b[1])) {\n    const [ca, sa, c] = [cos(ang), sin(ang), PAL[ci]];\n    for (let y = floor(cy - len); y \u003c= cy + len; y++)\n      for (let x = floor(cx - len); x \u003c= cx + len; x++) {\n        if (x \u003c 0 || x >= W || y >= H || y \u003c lit[x] - 1) continue;\n        const [dx, dy] = [x + 0.5 - cx, y + 0.5 - cy];\n        const u = (dx * ca + dy * sa) / len;\n        const v = (-dx * sa + dy * ca) / wid;\n        const q = u * u + v * v;\n        const k = sh * (abs(v) \u003c 0.3 ? 0.78 : 1) * (q > 0.7 ? 0.82 : 1) * (0.9 + 0.2 * hash(x, y));\n        if (q \u003c= 1) front[set(x, y, near(y), c[0] * k, c[1] * k, c[2] * k, 0.06, 0.05, 0.01)] = cy > 115 ? 1 : 0;\n      }\n  }\n  for (let i = 0; i \u003c 8; i++) {\n    const [x0, y0, len, ang, tk] = [rnd() * 64, 106 + rnd() * 20, 8 + rnd() * 22, (rnd() - 0.5) * 0.8, i \u003c 2 ? 1 : 0];\n    for (let t = 0; t \u003c len; t += 0.5) {\n      const x = x0 + cos(ang) * t;\n      const y = y0 + sin(ang) * t + 0.8 * sin(t * 0.3 + i);\n      if (x \u003c 0 || x >= W || y \u003c lit[floor(x)] - 1) continue;\n      front[set(x, y, near(y), 0.2, 0.13, 0.08)] = front[set(x, y - 1, near(y), 0.36 + 0.14 * tk, 0.27 + 0.13 * tk, 0.18 + 0.12 * tk)] = y0 > 115 ? 1 : 0;\n    }\n  }\n  P.fronts = Int32Array.from(front.reduce((a, f, p) => (f && a.push(p), a), []));\n  P.fsave = new Float32Array(P.fronts.length * 3);\n}\n\nfunction spawnBody(P, age, first) {\n  let [bx, best] = [33, -1];\n  for (let i = 0; i \u003c 24 && !first; i++) {\n    const x = 15 + rnd() * 34;\n    let d = 18;\n    for (const b of P.bodies) if (b.age \u003c SLUMP1) d = min(d, abs(b.bx - x));\n    if ((d += rnd() * 4) > best) [best, bx] = [d, x];\n  }\n  const sc = first ? 1 : 0.86 + rnd() * 0.14;\n  const dir = (bx \u003c 32 ? -1 : 1) * (rnd() \u003c 0.25 ? -1 : 1);\n  P.bodies.push({ bx, by: 109 + (3 * (sc - 0.86)) / 0.14, sc, H: 78 * sc, dir, age, seed: floor(rnd() * 1000), lean: (rnd() - 0.5) * 0.1, flies: [], maxF: 4 + floor(rnd() * 4) });\n}\n\nexport function setup(params) {\n  const P = params;\n  paint(P);\n  const f = f32;\n  Object.assign(P, { buf: f(N * 3), PX: f(W), PY: f(H), tc: f(3), dB: f(N).fill(99), sB: f(N), hB: f(N), tch: new Int32Array(N) });\n  P.G = { cx: f(300), cy: f(300), a: f(300), r: f(300), n: 0, Ls: 0 };\n  Object.assign(P, { bodies: [], drops: [], splash: [], t: 0, rate: 1, torch: 0, veil: 0, rain: 0.06, rAcc: 0, tx: 33 });\n  spawnBody(P, OPEN, true);\n}\n\n// The stalk's centre line: it rises, then crumples and slumps onto the litter.\nfunction geom(P, b) {\n  const { G } = P;\n  const grow = 1 - (1 - clamp((b.age - RISE0) / (RISE1 - RISE0), 0, 1)) ** 2.2;\n  const slump = ease(SLUMP0, SLUMP1, b.age);\n  const Ls = (b.H * grow + 1.5) * (1 - 0.72 * slump ** 0.7);\n  const bend = b.lean + b.dir * 1.9 * slump ** 0.8;\n  const n = min(299, max(2, ceil(Ls / 0.9)));\n  let [x, y] = [b.bx, b.by - 2];\n  for (let i = 0; i \u003c= n; i++) {\n    const a = bend * (i / n) ** 1.2;\n    const r = b.sc * (4.3 - (0.9 * i) / n + 0.35 * sin((PI * i) / n));\n    G.cx[i] = x;\n    G.cy[i] = y;\n    G.a[i] = a;\n    G.r[i] = r;\n    x += (sin(a) * Ls) / n;\n    y = min(y - (cos(a) * Ls) / n, P.lit[clamp(round(x), 0, W - 1)] + 2 - 0.5 * r);\n  }\n  [G.n, G.Ls] = [n, Ls];\n}\n\n// The egg; once split, the torn cup round the foot of the stalk.\nfunction egg(P, b, fade) {\n  const cup = b.age >= SPLIT;\n  const sw = cup ? 1 : mix(0.45, 1, 1 - (1 - clamp(b.age / (SPLIT * 0.9), 0, 1)) ** 2);\n  const [ew, eh, ex, ey] = [(cup ? 6.6 : 6.2) * b.sc * sw, 6.8 * b.sc * sw, b.bx, b.by - 1 - 4.5 * sw];\n  const crack = cup ? 0 : ease(SPLIT - 0.9, SPLIT, b.age);\n  for (let y = max(0, floor(ey - eh)); y \u003c= min(H - 1, ey + eh); y++)\n    for (let x = max(0, floor(ex - ew)); x \u003c= min(W - 1, ex + ew); x++) {\n      const nx = (x + 0.5 - ex) / ew;\n      const ny = (y + 0.5 - ey) / eh;\n      const rr = nx * nx + ny * ny;\n      const rim = cup ? -0.05 + 0.28 * abs(sin(nx * 4.2 + b.seed)) : -9;\n      if (rr > 1 || ny \u003c rim) continue;\n      const l = lightAt(P, x, y) * (0.16 + 0.82 * max(0, -0.38 * nx - 0.38 * ny + 0.84 * sqrt(1 - rr))) * (ny \u003c rim + 0.12 ? 1.2 : 1);\n      const torn = crack > 0 && ny \u003c -0.1 && abs(nx) \u003c crack * 0.85 && abs(ny + 0.55 + 0.13 * sin(nx * 9 + b.seed)) \u003c 0.06 + 0.12 * crack;\n      put(P, y * W + x, l, torn ? GLEBA : cup ? CUP : EGG, fade);\n    }\n}\n\n// Standing, the stalk fills row by row; slumped, it is stamped as discs.\nfunction stalk(P, b, fade, sleeve, slen, V) {\n  const { dB, sB, hB, tch, G } = P;\n  let nt = 0;\n  const mark = (p, d, s, h) => {\n    if (dB[p] > 9) tch[nt++] = p;\n    dB[p] = d;\n    sB[p] = s;\n    hB[p] = h;\n  };\n  if (abs(G.a[G.n]) \u003c 0.4)\n    for (let y = min(H - 1, floor(G.cy[0])), i = 0; y >= max(0, floor(G.cy[G.n])); y--) {\n      while (i \u003c G.n && G.cy[i + 1] > y + 0.5) i++;\n      const [cx, r] = [G.cx[i], G.r[i]];\n      for (let x = max(0, floor(cx - r + 0.5)); x \u003c= min(W - 1, floor(cx + r - 0.5)); x++) {\n        const t = ((x + 0.5 - cx) * cos(G.a[i])) / r;\n        mark(y * W + x, t * t, t, i / G.n);\n      }\n    }\n  else\n    for (let i = 0; i \u003c= G.n; i++) {\n      const [cx, cy, r, nx, ny] = [G.cx[i], G.cy[i], G.r[i], cos(G.a[i]), sin(G.a[i])];\n      for (let y = max(0, floor(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r + 0.5)); y++)\n        for (let x = max(0, floor(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r + 0.5)); x++) {\n          const dx = x + 0.5 - cx;\n          const dy = y + 0.5 - cy;\n          const d = (dx * dx + dy * dy) / (r * r);\n          const p = y * W + x;\n          if (d \u003c 1 && d \u003c dB[p]) mark(p, d, (dx * nx + dy * ny) / r, i / G.n);\n        }\n    }\n  const wc = ease(WILT, SLUMP1, b.age);\n  const crease = ease(SLUMP0, SLUMP1, b.age);\n  const m = [mix(0.95, 0.74, wc), mix(0.93, 0.66, wc), mix(0.87, 0.47, wc), 0.3, 0.42, 0.68];\n  for (let j = 0; j \u003c nt; j++) {\n    const p = tch[j];\n    const t = clamp(sB[p], -1, 1);\n    const hp = hB[p] * G.Ls;\n    const y = (p / W) | 0;\n    dB[p] = 99;\n    let sh = (0.2 + 0.8 * max(0, 0.92 * sqrt(1 - t * t) - 0.38 * t)) * (1 - 0.25 * wc);\n    const arc = asin(t) * 3.2 * b.sc;\n    const row = floor(hp / 1.4);\n    if (hash(row + b.seed, floor(arc / 1.3 + (row & 1) * 0.5) + 50) \u003c 0.24) sh *= 0.74;\n    if (hp % 3.2 \u003c 1) sh *= 1 - 0.4 * crease;\n    if (sleeve > 0 && hp > G.Ls - slen) sh *= 1 + sleeve * (fsin(arc * 1.4 + hp * 1.2) * fsin(arc * 1.4 - hp * 1.2) > 0.4 ? 0.22 : -0.18);\n    if (y > V.ay + 2 && y \u003c V.ay + V.L) sh *= 1 - 0.42 * V.alpha * V.open;\n    put(P, p, lightAt(P, p % W, y) * sh, m, fade);\n  }\n}\n\n// Worley ridges of the cap: F2 - F1; the cell's id and F1 go in CW.\nfunction cell(u, v, seed) {\n  let [f1, f2, id] = [9, 9, 0];\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      const cu = floor(u) + i;\n      const cv = floor(v) + j;\n      const j2 = (((cu + seed) & 15) * 16 + (cv & 15)) * 2;\n      const dx = u - (cu + 0.15 + 0.7 * JT[j2]);\n      const dy = v - (cv + 0.15 + 0.7 * JT[j2 + 1]);\n      const d = dx * dx + dy * dy;\n      if (d \u003c f1) {\n        f2 = f1;\n        f1 = d;\n        id = JT[j2];\n      } else if (d \u003c f2) f2 = d;\n    }\n  CW[0] = id;\n  CW[1] = f1;\n  return sqrt(f2) - sqrt(f1);\n}\n\nfunction cap(P, b, fade) {\n  const { G } = P;\n  const [ax, ay, a] = [G.cx[G.n], G.cy[G.n], G.a[G.n]];\n  const [ux, uy] = [sin(a), -cos(a)];\n  const cs = mix(0.55, 1, ease(SPLIT, RISE0 + 1.5, b.age));\n  const [ch, cw] = [15 * b.sc * cs, 7.6 * b.sc * cs];\n  const eat = ease(FLIES + 1.5, EAT1, b.age);\n  const wc = ease(WILT, SLUMP1, b.age);\n  const [ex, ey] = [abs(uy) * (cw + 1), abs(ux) * (cw + 1)];\n  const [xa, xb, ya, yb] = [ax - ux * 1.5, ax + ux * ch, ay - uy * 1.5, ay + uy * ch];\n  for (let y = max(0, floor(min(ya, yb) - ey)); y \u003c= min(H - 1, max(ya, yb) + ey); y++)\n    for (let x = max(0, floor(min(xa, xb) - ex)); x \u003c= min(W - 1, max(xa, xb) + ex); x++) {\n      const dx = x + 0.5 - ax;\n      const dy = y + 0.5 - ay;\n      const av = dx * ux + dy * uy;\n      const w = -dx * uy + dy * ux;\n      const t = max(0, av) / ch;\n      const hw = cw * CAPF[(min(1, t) * 256) | 0] + (av \u003c 0 ? 0.5 : 0);\n      if (av \u003c -1.5 || av > ch || abs(w) > hw) continue;\n      const q = w / hw;\n      const sh = (0.22 + 0.78 * max(0, 0.9 * sqrt(1 - q * q) - 0.4 * q)) * (0.85 + 0.15 * t) * (1 - 0.3 * wc);\n      const l = lightAt(P, x, y) * sh;\n      const p = y * W + x;\n      // A white collar at the top; where flies ate the slime, white ridges.\n      if (t > 0.9) put(P, p, l, abs(w) \u003c 0.9 && t > 0.96 ? PIT : WHITE, fade);\n      else {\n        const ridge = cell((AS[((q + 1) * 512) | 0] * cw) / 2.5, av / 2.3, b.seed) \u003c 0.24;\n        if (CW[0] \u003c eat) put(P, p, l, ridge ? WHITE : PIT, fade);\n        else if (!ridge && CW[1] \u003c 0.05 && sh > 0.7 && CW[0] > 0.55) put(P, p, l * 1.4, GLOSS, fade);\n        else put(P, p, l, ridge ? RIDGE : GLEBA, fade);\n      }\n    }\n  Object.assign(b, { capX: ax, capY: ay, ux, uy, ch, cw });\n}\n\n// The veil: a diamond net on a flared cone, its threads crowding at the sides.\nfunction veil(P, b, V, front) {\n  const { buf, tc, PX, PY, wet, uv } = P;\n  const { ax, ay, L, r0, rb, sway, wob, band, alpha, bright, col } = V;\n  const seed = b.seed;\n  const C = [0, 1, 2].map((c) => (col[c] * tc[c] + [0.45, 0.95, 1][c] * uv) * 255 * bright);\n  for (let y = max(0, ceil(ay)); y \u003c= min(H - 1, floor(ay + L * 1.06)); y++) {\n    const s = (y + 0.5 - ay) / L;\n    const sc = min(s, 1);\n    const R = r0 + (rb - r0) * sc ** 0.8;\n    const cx = ax + sway * sc * sc;\n    const cw = mix(V.cw0, V.cw1, sc) * V.kw;\n    const ch = cw * 1.15 * V.kh;\n    const [vv, icw, ich, py] = [(s * L) / ch, 1 / (cw * cw), 1 / (ch * ch), PY[y]];\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const sx = (x + 0.5 - cx) / R;\n      if (sx \u003c= -1 || sx >= 1) continue;\n      const c2 = max(0.0144, 1 - sx * sx);\n      const th = front ? AS[((sx + 1) * 512) | 0] : PI - AS[((sx + 1) * 512) | 0];\n      const hem = s > 0.94 ? 1 + 0.035 * fsin(th * 7 + seed) + 0.02 * fsin(th * 13) : 2;\n      if (s > hem) continue;\n      const u = (th * R) / cw;\n      const wb = wob * fsin(u * 2.1 + vv * 1.3 + seed);\n      const g1 = u + vv + wb;\n      const g2 = u - vv - 0.7 * wb;\n      const k = 1.4 / sqrt(icw / c2 + ich);\n      const d1 = abs(g1 - round(g1)) * k;\n      const d2 = abs(g2 - round(g2)) * k;\n      let i = (d1 \u003c 1 ? 1 - d1 : 0) + (d2 \u003c 1 ? 1 - d2 : 0);\n      if (s * L \u003c 2.2) i = max(i, 0.8);\n      if (s > hem - band / L) i = max(i, 0.7);\n      if (i \u003c 0.04) continue;\n      const l = (AMB + PX[x] * py) * (front ? 0.3 + 0.7 * max(0, 0.94 * sqrt(c2) - 0.34 * sx) : 0.18 + 0.18 * sqrt(c2));\n      const a = min(1, i) * alpha;\n      for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++, o++) buf[o] += (C[c] * l - buf[o]) * a;\n      if (front && d1 \u003c 0.7 && d2 \u003c 0.7 && hash(round(g1) + seed, round(g2) + 99) \u003c wet) put(P, y * W + x, l * 1.8, WHITE, alpha);\n    }\n  }\n}\n\nfunction drawBody(P, b) {\n  const age = b.age;\n  if (age \u003c SPLIT) return egg(P, b, 1);\n  geom(P, b);\n  const { G, veil: vk } = P;\n  const fade = 1 - ease(SLUMP1, GONE, age);\n  const f = clamp((age - VEIL0) / (VEIL1 - VEIL0), 0, 1);\n  const fu = ease(0, 1, f);\n  const c = ease(WILT, WILT + 3.5, age);\n  const [ax, ay, r0] = [G.cx[G.n], G.cy[G.n] + 1, G.r[G.n] + 1.4];\n  const Lf = max(0, min(b.by - 13 * b.sc + 10 * vk, P.lit[clamp(round(ax), 0, W - 1)] + 2) - ay);\n  const V = { ax, ay, r0, L: max(0.5, Lf * fu * (1 - 0.15 * c)), rb: mix((20 + 7 * vk) * b.sc * (0.35 + 0.65 * fu), r0 + 2.5, c), cw0: mix(6, 3.2, vk), cw1: mix(7.6, 4, vk) };\n  Object.assign(V, { kw: 0.75 + 0.25 * fu, kh: 0.55 + 0.45 * fu, band: (1 - fu) * 2.5 + 0.6, open: min(1, fu * 2), wob: 0.06 + 0.3 * c, bright: 1 - 0.4 * c });\n  V.sway = (3 * sin(age * 0.9 + b.seed) + 0.8 * sin(P.t * 0.7 + b.seed)) * (1 - c);\n  V.alpha = fade * (1 - ease(0.55, 1, c)) * (Lf > 1 ? 1 : 0);\n  V.col = [mix(0.98, 0.86, c), mix(0.97, 0.79, c), mix(0.93, 0.6, c)];\n  const show = f > 0 && V.alpha > 0.01;\n  if (show) veil(P, b, V, false);\n  stalk(P, b, fade, c, Lf * 0.8, V);\n  egg(P, b, fade);\n  if (show) veil(P, b, V, true);\n  cap(P, b, fade);\n  drawFlies(P, b);\n}\n\n// Flies land on the cap, crawl, hop, and leave when it wilts.\nfunction capPoint(b, q, a) {\n  const av = a * b.ch;\n  const w = q * b.cw * CAPF[(clamp(a, 0, 1) * 256) | 0];\n  return [b.capX + b.ux * av - b.uy * w, b.capY + b.uy * av + b.ux * w];\n}\n\nfunction updateFlies(b, dt) {\n  const want = round(b.maxF * ease(FLIES, FLIES + 3, b.age) * (1 - ease(WILT - 1, WILT + 2.5, b.age)));\n  const fl = b.flies;\n  const stay = fl.filter((f) => f.s \u003c 2);\n  const spot = () => ({ s: 0, q: (rnd() - 0.5) * 1.5, a: 0.15 + rnd() * 0.7 });\n  if (stay.length \u003c want && b.capX !== undefined && rnd() \u003c dt * 2) fl.push({ x: rnd() \u003c 0.5 ? -3 : W + 2, y: 15 + rnd() * 60, vx: 0, vy: 0, ...spot() });\n  if (stay.length > want) Object.assign(stay[0], { s: 2, tx: rnd() \u003c 0.5 ? -8 : W + 8, ty: rnd() * 50 });\n  for (let i = fl.length - 1; i >= 0; i--) {\n    const f = fl[i];\n    if (f.s === 1) {\n      f.q = clamp(f.q + (rnd() - 0.5) * dt * 1.2, -0.8, 0.8);\n      f.a = clamp(f.a + (rnd() - 0.5) * dt * 0.6, 0.1, 0.85);\n      if (rnd() \u003c dt * 0.3) Object.assign(f, spot());\n      continue;\n    }\n    const [tx, ty] = f.s === 0 ? capPoint(b, f.q, f.a) : [f.tx, f.ty];\n    f.vx += ((tx - f.x) * 5 - f.vx * 2.2 + (rnd() - 0.5) * 260) * dt;\n    f.vy += ((ty - f.y) * 5 - f.vy * 2.2 + (rnd() - 0.5) * 260) * dt;\n    f.x += f.vx * dt;\n    f.y += f.vy * dt;\n    if (f.s === 0 && abs(tx - f.x) + abs(ty - f.y) \u003c 1.5) f.s = 1;\n    if (f.s === 2 && abs(f.x - W / 2) > W / 2 + 6) fl.splice(i, 1);\n  }\n}\n\nfunction drawFlies(P, b) {\n  for (const f of b.flies) {\n    const [x, y] = (f.s === 1 ? capPoint(b, f.q, f.a) : [f.x, f.y]).map(round);\n    if (x \u003c 1 || x >= W - 2 || y \u003c 1 || y >= H) continue;\n    const [l, p] = [lightAt(P, x, y), y * W + x];\n    put(P, p, l, FLY[0], 1);\n    put(P, p + 1, l, FLY[1], 1);\n    if (f.s !== 1) for (const dx of [-1, 1]) put(P, p - W + dx + (floor(P.t * 30) & 1), l, FLY[2], 0.8);\n    else if (sin(P.t * 5 + f.q * 40) > 0.7) put(P, p, l * 1.6, GLOSS, 1);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  Object.assign(P, { torch: clamp(k[0], 0, 1), rate: clamp(k[1], 0.2, 3) / 2, veil: clamp(k[2], 0, 1), rain: clamp(k[3], 0, 1) });\n  P.t += dt;\n  for (const b of P.bodies) b.age += dt * P.rate;\n  P.bodies = P.bodies.filter((b) => b.age \u003c GONE);\n  if (min(...P.bodies.map((b) => b.age)) >= NEXT) spawnBody(P, 0, false);\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.bodies.length >= 3) P.bodies.sort((a, b) => b.age - a.age).shift();\n    spawnBody(P, 0, false);\n  }\n  // The beam follows whatever is coming up.\n  let [sw, sx] = [0, 0];\n  for (const b of P.bodies) {\n    const w = ease(SPLIT - 2, RISE1, b.age) * (1 - ease(SLUMP0, GONE, b.age)) + 0.02;\n    sw += w;\n    sx += w * b.bx;\n  }\n  P.tx += ((sx / sw || 33) - P.tx) * (1 - exp(-dt * 0.8));\n  for (const b of P.bodies) updateFlies(b, dt * clamp(P.rate, 0.12, 1.6));\n  P.rAcc += dt * (0.5 + 40 * P.rain ** 1.5);\n  for (; P.rAcc >= 1; P.rAcc--) if (P.drops.length \u003c 160) P.drops.push([rnd() * W, rnd() * 34 - 4, 75 + rnd() * 50]);\n  for (let i = P.drops.length - 1; i >= 0; i--) {\n    const d = P.drops[i];\n    const x = floor(d[0]);\n    d[1] += d[2] * dt * (0.7 + 0.3 * min(P.rate, 1.5));\n    if (d[1] \u003c P.lit[x] - 1) continue;\n    if (P.splash.length \u003c 40) P.splash.push([x, P.lit[x] - 1 + floor(rnd() * 3), 0.15]);\n    P.drops.splice(i, 1);\n  }\n  P.splash = P.splash.filter((s) => (s[2] -= dt) > 0);\n}\n\nfunction light(P) {\n  const f = P.torch * 3;\n  const i = min(2, floor(f));\n  P.uv = ease(0.72, 1, P.torch);\n  for (let c = 0; c \u003c 3; c++) P.tc[c] = mix(TORCH[i][c], TORCH[i + 1][c], f - i) * (1 - 0.7 * P.uv);\n  // A handheld beam sways.\n  const tx = P.tx + 2.5 * sin(P.t * 1.3) + 1.5 * sin(P.t * 2.9 + 1);\n  const ty = 66 + 3 * sin(P.t * 1.7 + 2);\n  for (let x = 0; x \u003c W; x++) P.PX[x] = exp(-(((x + 0.5 - tx) / 30) ** 2));\n  for (let y = 0; y \u003c H; y++) P.PY[y] = exp(-(((y + 0.5 - ty) / 62) ** 4));\n  P.haze = (5 + 38 * P.rain) * (1 - 0.4 * P.uv);\n  P.wet = 0.1 + 0.55 * P.rain;\n}\n\nfunction background(P) {\n  const { alb: A, flu: F, emi: E, dep: D, buf, tc, PX, PY, uv, haze, fronts, fsave } = P;\n  const [r, g, b] = tc;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const pool = PX[p % W] * PY[(p / W) | 0];\n    const l = D[p] * (AMB + pool) * 255;\n    const u = l * uv;\n    const h = haze * pool;\n    buf[o] = A[o] * r * l + E[o] + h * r + F[o] * u;\n    buf[o + 1] = A[o + 1] * g * l + E[o + 1] + h * g + F[o + 1] * u;\n    buf[o + 2] = A[o + 2] * b * l + E[o + 2] + h * b + F[o + 2] * u;\n  }\n  for (let i = 0; i \u003c fronts.length * 3; i++) fsave[i] = buf[fronts[(i / 3) | 0] * 3 + (i % 3)];\n}\n\nfunction drawRain(P) {\n  const { buf, tc, PX, PY } = P;\n  const glow = (x, y, v) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let c = 0; c \u003c 3; c++) buf[(y * W + x) * 3 + c] += v * (0.6 + 0.05 * c + 0.4 * tc[c]) * (1 - 0.6 * P.uv);\n  };\n  for (const [x0, y0] of P.drops) for (let j = 0, x = floor(x0); j \u003c 3; j++) glow(x, floor(y0) - j, (25 + 190 * PX[x] * PY[clamp(floor(y0) - j, 0, H - 1)]) * (1 - j * 0.3));\n  for (const [x, y, life] of P.splash) for (const [dx, dy] of [[-1, 0], [1, 0], [0, -1]]) glow(x + dx, y + dy, life * 900 * PX[x] * PY[min(H - 1, y)]);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { fronts, fsave, buf } = P;\n  light(P);\n  background(P);\n  for (const b of P.bodies.slice().sort((a, b) => a.by - b.by)) drawBody(P, b);\n  for (let i = 0; i \u003c fronts.length * 3; i++) buf[fronts[(i / 3) | 0] * 3 + (i % 3)] = fsave[i];\n  drawRain(P);\n  for (let y = 0, o = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Torch=0..1, Speed=0.2..3, Veil=0..1, Rain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Torch","min":0,"max":1,"about":"A warm incandescent bulb at 0, then a cold white LED, a blue gel, and at 1 a UV torch under which the veil glows cyan and the leaves dark red."},{"name":"Speed","min":0.2,"max":3,"about":"The time-lapse rate: at 2 one stinkhorn lives about 30 s and a new egg starts every 22 s; 0.2 is ten times slower."},{"name":"Veil","min":0,"max":1,"about":"At 0 an open net, holes 3 to 4 LEDs across, that stops a hand above the litter; turned up, finer, to holes of 2, longer and wider, its hem on the leaves."},{"name":"Rain","min":0,"max":1,"about":"Near 0 a light mist and a drip now and then; turned up, drops streak through the beam, splash on the litter and bead on the knots of the net."}],"start":[0,2,0,0.06],"measures":{"motion":0.1497,"detail":0.0791,"edges":0.3662,"complexity":1.7099,"coverage":0.5698,"colour":0.1244,"drift":0.0576},"knobResponse":[0.0782,0.0485,0.0482,0.0673]},{"slug":"voronoi","title":"Voronoi","family":"cells","round":2,"note":"흐름을 타고 도는 씨앗마다 가장 가까운 LED 를 제 유리 색으로 칠하고, 조각 사이에 1 LED 납선이 서요. K4 로 거리를 재는 법을 바꾸면 조각 가운데 둥근 유리가 원에서 마름모를 지나 정사각형이 돼요.","idea":"Seeds swirl in a current and every LED takes the colour of the nearest one, so flat panes of glass jostle behind lead, each with a roundel at its seed that turns from disc to diamond to square as the measure of distance changes.","buttons":"K1 tap reshuffles the glass colours.","code":"// ===== Patternflow pattern =====\n// Title:   Voronoi\n// Family:  cells\n// Idea:    Seeds swirl in a current and every LED takes the colour of the nearest one, so flat panes of glass jostle behind lead, each with a roundel at its seed that turns from disc to diamond to square as the measure of distance changes.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..6, Cells=20..60, Metric=0..2\n//\n// Knob 1: Hue. The colour of most of the glass; a few panes take the colours across the wheel from it.\n// Knob 2: Speed. How fast the current carries the seeds round.\n// Knob 3: Cells. How many panes, from 20 big ones to 60 small ones.\n// Knob 4: Metric. How distance is measured: 0 is a ruler, 1 is city blocks, 2 is a king's moves on a chessboard, and the roundels go disc, diamond, square.\n// Buttons: K1 tap reshuffles the glass colours.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 64;\n// Buckets of 8x8 LEDs, each holding the few seeds that can own one of its LEDs.\nconst B = 8;\nconst BX = W / B;\nconst BY = H / B;\n// Seeds keep this far off the frame, so a roundel is seldom cut in half.\nconst EDGE = 2.5;\n\n// Kinds of glass: hue offset, saturation, brightness, and how often each turns up.\nconst GLASS = [\n  [0.0, 0.95, 0.9, 0.34],\n  [0.0, 0.8, 0.62, 0.2],\n  [-0.1, 0.9, 0.85, 0.16],\n  [0.07, 0.75, 1.0, 0.1],\n  [0.5, 0.95, 1.0, 0.12],\n  [0.38, 0.9, 0.9, 0.08],\n];\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction pickGlass(p) {\n  for (let i = 0; i \u003c MAX; i++) {\n    let r = Math.random();\n    let g = 0;\n    while (g \u003c GLASS.length - 1 && r > GLASS[g][3]) {\n      r -= GLASS[g][3];\n      g++;\n    }\n    p.kind[i] = g;\n    p.jitter[i] = (Math.random() - 0.5) * 0.05;\n  }\n  p.hue = -1;\n}\n\n// The current is a stream function made of four box modes, (1,2), (1,3),\n// (2,3) and (1,1), whose strengths rise and fall out of step. A stream\n// function cannot pile seeds up, and a box mode never flows through a wall,\n// so the seeds stay spread out and on the panel; the mix keeps the vortices\n// moving. Each mode is scaled so its fastest point moves at about one unit.\nfunction flow(amp, x, y, out) {\n  const px = Math.PI / W;\n  const py = Math.PI / H;\n  const s1x = Math.sin(px * x), c1x = Math.cos(px * x);\n  const s2x = Math.sin(2 * px * x), c2x = Math.cos(2 * px * x);\n  const s1y = Math.sin(py * y), c1y = Math.cos(py * y);\n  const s2y = Math.sin(2 * py * y), c2y = Math.cos(2 * py * y);\n  const s3y = Math.sin(3 * py * y), c3y = Math.cos(3 * py * y);\n  out[0] = amp[0] * 0.71 * s1x * c2y + amp[1] * 0.83 * s1x * c3y + amp[2] * 0.6 * s2x * c3y + amp[3] * 0.45 * s1x * c1y;\n  out[1] = -amp[0] * 0.71 * c1x * s2y - amp[1] * 0.55 * c1x * s3y - amp[2] * 0.8 * c2x * s3y - amp[3] * 0.9 * c1x * s1y;\n}\n\n// Push seeds apart where they crowd, so the panes stay roughly one size.\nfunction spread(p, n, strength) {\n  const reach = 0.95 * Math.sqrt((W * H) / n);\n  const sx = p.sx;\n  const sy = p.sy;\n  for (let i = 0; i \u003c n; i++) {\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = sx[j] - sx[i];\n      const dy = sy[j] - sy[i];\n      const d2 = dx * dx + dy * dy;\n      if (d2 >= reach * reach || d2 \u003c 1e-6) continue;\n      const d = Math.sqrt(d2);\n      const push = ((reach - d) / d) * strength * 0.5;\n      sx[i] -= dx * push;\n      sy[i] -= dy * push;\n      sx[j] += dx * push;\n      sy[j] += dy * push;\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    sx[i] = Math.min(W - EDGE, Math.max(EDGE, sx[i]));\n    sy[i] = Math.min(H - EDGE, Math.max(EDGE, sy[i]));\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.sx = new Float32Array(MAX);\n  p.sy = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) {\n    p.sx[i] = Math.random() * W;\n    p.sy[i] = Math.random() * H;\n  }\n  p.kind = new Uint8Array(MAX);\n  p.jitter = new Float32Array(MAX);\n  p.rgb = new Uint8Array(MAX * 3);\n  p.pale = new Uint8Array(MAX * 3);\n  p.jewel = new Float32Array(MAX);\n  p.tmp = new Float32Array(3);\n  p.owner = new Uint8Array(W * H);\n  p.cand = new Uint8Array(BX * BY * MAX);\n  p.count = new Uint8Array(BX * BY);\n  p.T = 0;\n  p.amp = new Float32Array(4);\n  p.vel = new Float32Array(2);\n  p.settled = false;\n  pickGlass(p);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 20, 0.06];\n  const n = Math.max(2, Math.min(MAX, Math.round(k[2])));\n  p.n = n;\n  if (!p.settled) {\n    // Relax the random scatter before the first frame, so it opens on even\n    // panes: all the seeds first, for when K3 turns up, then the ones in use.\n    for (let s = 0; s \u003c 30; s++) spread(p, MAX, 0.5);\n    for (let s = 0; s \u003c 30; s++) spread(p, n, 0.5);\n    p.settled = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) pickGlass(p);\n\n  const speed = k[1];\n  p.T += dt * speed * 0.16;\n  const T = p.T;\n  const amp = p.amp;\n  amp[0] = Math.cos(T * 1.0);\n  amp[1] = Math.cos(T * 0.71 + 1.3) * 0.9;\n  amp[2] = Math.cos(T * 1.37 + 2.1) * 0.6;\n  amp[3] = Math.cos(T * 0.53 + 4.0) * 0.8;\n  // A plain Euler step spirals outward round every vortex and, fast enough,\n  // packs the seeds against the walls. A midpoint step does not.\n  const step = 15.6 * speed * dt;\n  const vel = p.vel;\n  for (let i = 0; i \u003c MAX; i++) {\n    const x = p.sx[i];\n    const y = p.sy[i];\n    flow(amp, x, y, vel);\n    flow(amp, x + vel[0] * step * 0.5, y + vel[1] * step * 0.5, vel);\n    p.sx[i] = Math.min(W - EDGE, Math.max(EDGE, x + vel[0] * step));\n    p.sy[i] = Math.min(H - EDGE, Math.max(EDGE, y + vel[1] * step));\n  }\n  // A fast current shears the panes apart faster, so the push keeps pace.\n  spread(p, n, Math.min(0.35, 0.05 + 0.04 * speed));\n\n  // K4 0..1 blends a ruler into city blocks, 1..2 city blocks into king's moves.\n  const m = Math.max(0, Math.min(2, k[3]));\n  p.we = m \u003c 1 ? 1 - m : 0;\n  p.wm = m \u003c 1 ? m : 2 - m;\n  p.wc = m \u003c 1 ? 0 : m - 1;\n\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    // K1 at 0 opens on cobalt rather than the red most of the study opens on.\n    const base = 0.6 + k[0];\n    for (let i = 0; i \u003c MAX; i++) {\n      const g = GLASS[p.kind[i]];\n      let h = base + g[0] + p.jitter[i];\n      h -= Math.floor(h);\n      // Dim orange glass reads as brown on the panel, so warm panes stay bright.\n      const warm = h > 0.02 && h \u003c 0.2;\n      hsv(h, g[1], warm ? Math.max(0.92, g[2]) : g[2], p.tmp, 0);\n      p.rgb[i * 3] = p.tmp[0];\n      p.rgb[i * 3 + 1] = p.tmp[1];\n      p.rgb[i * 3 + 2] = p.tmp[2];\n      // The roundel at the heart of each pane is a thinner, paler glass.\n      hsv(h, g[1] * 0.45, 1, p.tmp, 0);\n      p.pale[i * 3] = p.tmp[0];\n      p.pale[i * 3 + 1] = p.tmp[1];\n      p.pale[i * 3 + 2] = p.tmp[2];\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const n = p.n;\n  const sx = p.sx;\n  const sy = p.sy;\n  const we = p.we;\n  const wm = p.wm;\n  const wc = p.wc;\n  const cand = p.cand;\n  const count = p.count;\n  const owner = p.owner;\n\n  // Each pane has a roundel round its seed, drawn in the same measure, so it\n  // is a disc, a diamond or a square. Under a third of the way to the nearest\n  // other seed it can never cross into the next pane.\n  const jewel = p.jewel;\n  for (let i = 0; i \u003c n; i++) jewel[i] = 1e9;\n  for (let i = 0; i \u003c n; i++) {\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = sx[j] - sx[i];\n      const dy = sy[j] - sy[i];\n      const ax = dx \u003c 0 ? -dx : dx;\n      const ay = dy \u003c 0 ? -dy : dy;\n      const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n      if (d \u003c jewel[i]) jewel[i] = d;\n      if (d \u003c jewel[j]) jewel[j] = d;\n    }\n  }\n  // A roundel under about two LEDs across would be all lead, a dark speck.\n  for (let i = 0; i \u003c n; i++) jewel[i] = jewel[i] * 0.3 \u003c 2.2 ? 0 : jewel[i] * 0.3;\n\n  // Any seed that owns an LED in a bucket is within the nearest seed's\n  // distance from the bucket centre plus twice the centre-to-corner distance.\n  // That holds for all three measures and for any blend of them.\n  const reachCorner = we * Math.SQRT2 * 3.5 + wm * 7 + wc * 3.5;\n  for (let by = 0; by \u003c BY; by++) {\n    for (let bx = 0; bx \u003c BX; bx++) {\n      const cx = bx * B + B / 2;\n      const cy = by * B + B / 2;\n      let best = 1e9;\n      for (let i = 0; i \u003c n; i++) {\n        const dx = sx[i] - cx;\n        const dy = sy[i] - cy;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c best) best = d;\n      }\n      const limit = best + 2 * reachCorner + 0.01;\n      const b = by * BX + bx;\n      let c = 0;\n      for (let i = 0; i \u003c n; i++) {\n        const dx = sx[i] - cx;\n        const dy = sy[i] - cy;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c= limit) cand[b * MAX + c++] = i;\n      }\n      count[b] = c;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    const row = ((y / B) | 0) * BX;\n    const py = y + 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const b = row + ((x / B) | 0);\n      const c = count[b];\n      const base = b * MAX;\n      const px = x + 0.5;\n      let best = 1e9;\n      let who = 0;\n      for (let j = 0; j \u003c c; j++) {\n        const i = cand[base + j];\n        const dx = sx[i] - px;\n        const dy = sy[i] - py;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c best) {\n          best = d;\n          who = i;\n        }\n      }\n      // Which piece of glass: the seed's number doubled, plus one inside its roundel.\n      owner[y * W + x] = who * 2 + (best \u003c jewel[who] ? 1 : 0);\n    }\n  }\n\n  // Lead goes on an LED whose right or lower neighbour belongs to another\n  // piece of glass, which draws one unbroken line between any two pieces\n  // whatever the measure.\n  const rgb = p.rgb;\n  const pale = p.pale;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const id = owner[o];\n      const lead = (x \u003c W - 1 && owner[o + 1] !== id) || (y \u003c H - 1 && owner[o + W] !== id);\n      const c = (id >> 1) * 3;\n      if (lead) display.setPixel(x, y, 0, 0, 0);\n      else if (id & 1) display.setPixel(x, y, pale[c], pale[c + 1], pale[c + 2]);\n      else display.setPixel(x, y, rgb[c], rgb[c + 1], rgb[c + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-voronoi","type":"code","name":"voronoi","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Voronoi\n// Family:  cells\n// Idea:    Seeds swirl in a current and every LED takes the colour of the nearest one, so flat panes of glass jostle behind lead, each with a roundel at its seed that turns from disc to diamond to square as the measure of distance changes.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..6, Cells=20..60, Metric=0..2\n//\n// Knob 1: Hue. The colour of most of the glass; a few panes take the colours across the wheel from it.\n// Knob 2: Speed. How fast the current carries the seeds round.\n// Knob 3: Cells. How many panes, from 20 big ones to 60 small ones.\n// Knob 4: Metric. How distance is measured: 0 is a ruler, 1 is city blocks, 2 is a king's moves on a chessboard, and the roundels go disc, diamond, square.\n// Buttons: K1 tap reshuffles the glass colours.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 64;\n// Buckets of 8x8 LEDs, each holding the few seeds that can own one of its LEDs.\nconst B = 8;\nconst BX = W / B;\nconst BY = H / B;\n// Seeds keep this far off the frame, so a roundel is seldom cut in half.\nconst EDGE = 2.5;\n\n// Kinds of glass: hue offset, saturation, brightness, and how often each turns up.\nconst GLASS = [\n  [0.0, 0.95, 0.9, 0.34],\n  [0.0, 0.8, 0.62, 0.2],\n  [-0.1, 0.9, 0.85, 0.16],\n  [0.07, 0.75, 1.0, 0.1],\n  [0.5, 0.95, 1.0, 0.12],\n  [0.38, 0.9, 0.9, 0.08],\n];\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction pickGlass(p) {\n  for (let i = 0; i \u003c MAX; i++) {\n    let r = Math.random();\n    let g = 0;\n    while (g \u003c GLASS.length - 1 && r > GLASS[g][3]) {\n      r -= GLASS[g][3];\n      g++;\n    }\n    p.kind[i] = g;\n    p.jitter[i] = (Math.random() - 0.5) * 0.05;\n  }\n  p.hue = -1;\n}\n\n// The current is a stream function made of four box modes, (1,2), (1,3),\n// (2,3) and (1,1), whose strengths rise and fall out of step. A stream\n// function cannot pile seeds up, and a box mode never flows through a wall,\n// so the seeds stay spread out and on the panel; the mix keeps the vortices\n// moving. Each mode is scaled so its fastest point moves at about one unit.\nfunction flow(amp, x, y, out) {\n  const px = Math.PI / W;\n  const py = Math.PI / H;\n  const s1x = Math.sin(px * x), c1x = Math.cos(px * x);\n  const s2x = Math.sin(2 * px * x), c2x = Math.cos(2 * px * x);\n  const s1y = Math.sin(py * y), c1y = Math.cos(py * y);\n  const s2y = Math.sin(2 * py * y), c2y = Math.cos(2 * py * y);\n  const s3y = Math.sin(3 * py * y), c3y = Math.cos(3 * py * y);\n  out[0] = amp[0] * 0.71 * s1x * c2y + amp[1] * 0.83 * s1x * c3y + amp[2] * 0.6 * s2x * c3y + amp[3] * 0.45 * s1x * c1y;\n  out[1] = -amp[0] * 0.71 * c1x * s2y - amp[1] * 0.55 * c1x * s3y - amp[2] * 0.8 * c2x * s3y - amp[3] * 0.9 * c1x * s1y;\n}\n\n// Push seeds apart where they crowd, so the panes stay roughly one size.\nfunction spread(p, n, strength) {\n  const reach = 0.95 * Math.sqrt((W * H) / n);\n  const sx = p.sx;\n  const sy = p.sy;\n  for (let i = 0; i \u003c n; i++) {\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = sx[j] - sx[i];\n      const dy = sy[j] - sy[i];\n      const d2 = dx * dx + dy * dy;\n      if (d2 >= reach * reach || d2 \u003c 1e-6) continue;\n      const d = Math.sqrt(d2);\n      const push = ((reach - d) / d) * strength * 0.5;\n      sx[i] -= dx * push;\n      sy[i] -= dy * push;\n      sx[j] += dx * push;\n      sy[j] += dy * push;\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    sx[i] = Math.min(W - EDGE, Math.max(EDGE, sx[i]));\n    sy[i] = Math.min(H - EDGE, Math.max(EDGE, sy[i]));\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.sx = new Float32Array(MAX);\n  p.sy = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) {\n    p.sx[i] = Math.random() * W;\n    p.sy[i] = Math.random() * H;\n  }\n  p.kind = new Uint8Array(MAX);\n  p.jitter = new Float32Array(MAX);\n  p.rgb = new Uint8Array(MAX * 3);\n  p.pale = new Uint8Array(MAX * 3);\n  p.jewel = new Float32Array(MAX);\n  p.tmp = new Float32Array(3);\n  p.owner = new Uint8Array(W * H);\n  p.cand = new Uint8Array(BX * BY * MAX);\n  p.count = new Uint8Array(BX * BY);\n  p.T = 0;\n  p.amp = new Float32Array(4);\n  p.vel = new Float32Array(2);\n  p.settled = false;\n  pickGlass(p);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 20, 0.06];\n  const n = Math.max(2, Math.min(MAX, Math.round(k[2])));\n  p.n = n;\n  if (!p.settled) {\n    // Relax the random scatter before the first frame, so it opens on even\n    // panes: all the seeds first, for when K3 turns up, then the ones in use.\n    for (let s = 0; s \u003c 30; s++) spread(p, MAX, 0.5);\n    for (let s = 0; s \u003c 30; s++) spread(p, n, 0.5);\n    p.settled = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) pickGlass(p);\n\n  const speed = k[1];\n  p.T += dt * speed * 0.16;\n  const T = p.T;\n  const amp = p.amp;\n  amp[0] = Math.cos(T * 1.0);\n  amp[1] = Math.cos(T * 0.71 + 1.3) * 0.9;\n  amp[2] = Math.cos(T * 1.37 + 2.1) * 0.6;\n  amp[3] = Math.cos(T * 0.53 + 4.0) * 0.8;\n  // A plain Euler step spirals outward round every vortex and, fast enough,\n  // packs the seeds against the walls. A midpoint step does not.\n  const step = 15.6 * speed * dt;\n  const vel = p.vel;\n  for (let i = 0; i \u003c MAX; i++) {\n    const x = p.sx[i];\n    const y = p.sy[i];\n    flow(amp, x, y, vel);\n    flow(amp, x + vel[0] * step * 0.5, y + vel[1] * step * 0.5, vel);\n    p.sx[i] = Math.min(W - EDGE, Math.max(EDGE, x + vel[0] * step));\n    p.sy[i] = Math.min(H - EDGE, Math.max(EDGE, y + vel[1] * step));\n  }\n  // A fast current shears the panes apart faster, so the push keeps pace.\n  spread(p, n, Math.min(0.35, 0.05 + 0.04 * speed));\n\n  // K4 0..1 blends a ruler into city blocks, 1..2 city blocks into king's moves.\n  const m = Math.max(0, Math.min(2, k[3]));\n  p.we = m \u003c 1 ? 1 - m : 0;\n  p.wm = m \u003c 1 ? m : 2 - m;\n  p.wc = m \u003c 1 ? 0 : m - 1;\n\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    // K1 at 0 opens on cobalt rather than the red most of the study opens on.\n    const base = 0.6 + k[0];\n    for (let i = 0; i \u003c MAX; i++) {\n      const g = GLASS[p.kind[i]];\n      let h = base + g[0] + p.jitter[i];\n      h -= Math.floor(h);\n      // Dim orange glass reads as brown on the panel, so warm panes stay bright.\n      const warm = h > 0.02 && h \u003c 0.2;\n      hsv(h, g[1], warm ? Math.max(0.92, g[2]) : g[2], p.tmp, 0);\n      p.rgb[i * 3] = p.tmp[0];\n      p.rgb[i * 3 + 1] = p.tmp[1];\n      p.rgb[i * 3 + 2] = p.tmp[2];\n      // The roundel at the heart of each pane is a thinner, paler glass.\n      hsv(h, g[1] * 0.45, 1, p.tmp, 0);\n      p.pale[i * 3] = p.tmp[0];\n      p.pale[i * 3 + 1] = p.tmp[1];\n      p.pale[i * 3 + 2] = p.tmp[2];\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const n = p.n;\n  const sx = p.sx;\n  const sy = p.sy;\n  const we = p.we;\n  const wm = p.wm;\n  const wc = p.wc;\n  const cand = p.cand;\n  const count = p.count;\n  const owner = p.owner;\n\n  // Each pane has a roundel round its seed, drawn in the same measure, so it\n  // is a disc, a diamond or a square. Under a third of the way to the nearest\n  // other seed it can never cross into the next pane.\n  const jewel = p.jewel;\n  for (let i = 0; i \u003c n; i++) jewel[i] = 1e9;\n  for (let i = 0; i \u003c n; i++) {\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = sx[j] - sx[i];\n      const dy = sy[j] - sy[i];\n      const ax = dx \u003c 0 ? -dx : dx;\n      const ay = dy \u003c 0 ? -dy : dy;\n      const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n      if (d \u003c jewel[i]) jewel[i] = d;\n      if (d \u003c jewel[j]) jewel[j] = d;\n    }\n  }\n  // A roundel under about two LEDs across would be all lead, a dark speck.\n  for (let i = 0; i \u003c n; i++) jewel[i] = jewel[i] * 0.3 \u003c 2.2 ? 0 : jewel[i] * 0.3;\n\n  // Any seed that owns an LED in a bucket is within the nearest seed's\n  // distance from the bucket centre plus twice the centre-to-corner distance.\n  // That holds for all three measures and for any blend of them.\n  const reachCorner = we * Math.SQRT2 * 3.5 + wm * 7 + wc * 3.5;\n  for (let by = 0; by \u003c BY; by++) {\n    for (let bx = 0; bx \u003c BX; bx++) {\n      const cx = bx * B + B / 2;\n      const cy = by * B + B / 2;\n      let best = 1e9;\n      for (let i = 0; i \u003c n; i++) {\n        const dx = sx[i] - cx;\n        const dy = sy[i] - cy;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c best) best = d;\n      }\n      const limit = best + 2 * reachCorner + 0.01;\n      const b = by * BX + bx;\n      let c = 0;\n      for (let i = 0; i \u003c n; i++) {\n        const dx = sx[i] - cx;\n        const dy = sy[i] - cy;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c= limit) cand[b * MAX + c++] = i;\n      }\n      count[b] = c;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    const row = ((y / B) | 0) * BX;\n    const py = y + 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const b = row + ((x / B) | 0);\n      const c = count[b];\n      const base = b * MAX;\n      const px = x + 0.5;\n      let best = 1e9;\n      let who = 0;\n      for (let j = 0; j \u003c c; j++) {\n        const i = cand[base + j];\n        const dx = sx[i] - px;\n        const dy = sy[i] - py;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c best) {\n          best = d;\n          who = i;\n        }\n      }\n      // Which piece of glass: the seed's number doubled, plus one inside its roundel.\n      owner[y * W + x] = who * 2 + (best \u003c jewel[who] ? 1 : 0);\n    }\n  }\n\n  // Lead goes on an LED whose right or lower neighbour belongs to another\n  // piece of glass, which draws one unbroken line between any two pieces\n  // whatever the measure.\n  const rgb = p.rgb;\n  const pale = p.pale;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const id = owner[o];\n      const lead = (x \u003c W - 1 && owner[o + 1] !== id) || (y \u003c H - 1 && owner[o + W] !== id);\n      const c = (id >> 1) * 3;\n      if (lead) display.setPixel(x, y, 0, 0, 0);\n      else if (id & 1) display.setPixel(x, y, pale[c], pale[c + 1], pale[c + 2]);\n      else display.setPixel(x, y, rgb[c], rgb[c + 1], rgb[c + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..6, Cells=20..60, Metric=0..2","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of most of the glass; a few panes take the colours across the wheel from it."},{"name":"Speed","min":0.2,"max":6,"about":"How fast the current carries the seeds round."},{"name":"Cells","min":20,"max":60,"about":"How many panes, from 20 big ones to 60 small ones."},{"name":"Metric","min":0,"max":2,"about":"How distance is measured: 0 is a ruler, 1 is city blocks, 2 is a king's moves on a chessboard, and the roundels go disc, diamond, square."}],"start":[0,2,20,0.06],"measures":{"motion":2.0975,"detail":0.1621,"edges":1,"complexity":0.2058,"coverage":0.8378,"colour":0.5986,"drift":0.1196},"knobResponse":[0.4827,0.3489,0.3517,0.1477]},{"slug":"warp","title":"Warp","family":"space","round":15,"note":"별 사이를 워프로 날아요. 별은 앞쪽에서 얼음빛 파랑이고, 옆으로 지나가며 자홍 줄로 늘어나요. K1 을 누르면 워프에서 빠져 멈췄다가 흰 빛과 함께 다시 들어가요.","idea":"A ship flies through a starfield at warp: stars stream out of a vanishing point and stretch into streaks as they rush past.","buttons":"K1 tap drops the ship out of warp, lets the stars hang still for a moment and jumps back in.","code":"// ===== Patternflow pattern =====\n// Title:   Warp\n// Family:  space\n// Idea:    A ship flies through a starfield at warp: stars stream out of a vanishing point and stretch into streaks as they rush past.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the warp and hyperspace starfields of Star Trek and Star Wars, and the 3D starfield of the demoscene\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Warp=0.2..4, Stars=420..1400, Steer=-1..1\n//\n// Knob 1: Hue. The tint of the stars: at 0 the light ahead is shifted to ice blue and runs through violet to magenta at the edges; turning it takes the whole scale round the wheel.\n// Knob 2: Warp. How fast the ship flies: at the bottom the stars drift out as points, at 2 a star crosses from the vanishing point to the edge in about a second, at the top the streaks run half the panel.\n// Knob 3: Stars. How many stars fill the space ahead, from 420, where the streaks still have dark between them, to 1400, a dense blizzard.\n// Knob 4: Steer. The ship banks: in the middle it flies straight, turned either way the field rolls and the streaks curl into a spiral, and the vanishing point slides towards the turn.\n// Buttons: K1 tap drops the ship out of warp, lets the stars hang still for a moment and jumps back in.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 1400;\n// Focal length in LEDs: a star one unit off the axis at depth 1 sits F LEDs\n// from the vanishing point.\nconst F = 34;\nconst ZFAR = 10;\nconst ZNEAR = 0.3;\n// The stars fill a tube round the line of flight, RIN to ROUT units out and\n// stretched 1.8 times up and down to fill the tall panel. Nothing flies\n// straight at the ship, so the vanishing point itself stays dark.\nconst RIN = 0.8;\nconst ROUT = 4.5;\n// How long the shutter stays open, in seconds: a streak is where the star\n// has been over this long.\nconst EXPOSE = 0.1;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p;\n  out[1] = k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p;\n  out[2] = k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p;\n}\n\n// A new star somewhere in the tube at depth z, even over its cross-section.\nfunction place(P, i, z) {\n  const r = Math.sqrt(RIN * RIN + Math.random() * (ROUT * ROUT - RIN * RIN));\n  const a = Math.random() * Math.PI * 2;\n  P.x[i] = r * Math.cos(a);\n  P.y[i] = r * Math.sin(a) * 1.8;\n  P.z[i] = z;\n  const m = Math.random();\n  P.b[i] = 0.35 + 0.65 * m * m;\n  P.tint[i] = Math.random() - 0.5;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.x = new Float32Array(MAX);\n  P.y = new Float32Array(MAX);\n  P.z = new Float32Array(MAX);\n  P.b = new Float32Array(MAX);\n  P.tint = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) place(P, i, ZNEAR + Math.random() * (ZFAR - ZNEAR));\n  P.acc = new Float32Array(N * 3);\n  P.lut = new Float32Array(1024);\n  for (let i = 0; i \u003c 1024; i++) P.lut[i] = 255 * (1 - Math.exp(-((i + 0.5) / 256) * 2.2));\n  P.col = [0, 0, 0];\n  P.count = 420;\n  P.v = 0;\n  P.roll = 0;\n  P.hue = 0;\n  P.vx = W / 2;\n  P.vy = H / 2;\n  // The jump K1 sends: seconds since the tap, or -1.\n  P.jump = -1;\n  P.flash = 0;\n}\n\n// How hard the ship flies after a K1 tap, against seconds since the tap: it\n// drops out of warp in 0.6 s, hangs nearly still until 2.4 s, leaps in at\n// three times the knob's warp and settles back by 4 s.\nfunction jumpGain(t) {\n  if (t \u003c 0) return 1;\n  if (t \u003c 0.6) return 1 - 0.97 * Math.sin((t / 0.6) * Math.PI * 0.5);\n  if (t \u003c 2.4) return 0.03;\n  if (t \u003c 2.8) return 0.03 + 2.97 * ((t - 2.4) / 0.4) ** 2;\n  if (t \u003c 4) return 1 + 2 * (1 - (t - 2.8) / 1.2) ** 2;\n  return 1;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 420, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.count = Math.max(1, Math.min(MAX, Math.round(k[2])));\n  const steer = Math.max(-1, Math.min(1, k[3]));\n\n  if (input.btnPressed && input.btnPressed[0] && P.jump \u003c 0) P.jump = 0;\n  let gain = 1;\n  if (P.jump >= 0) {\n    P.jump += dt;\n    gain = jumpGain(P.jump);\n    if (P.jump > 2.4 && P.jump \u003c 2.6) P.flash = 1;\n    if (P.jump >= 4) P.jump = -1;\n  }\n  P.flash = Math.max(0, P.flash - dt * 2.5);\n  // Warp 2 flies 12 units of depth a second.\n  P.v = Math.max(0.2, k[1]) * 6 * gain;\n  // Banking rolls the field up to 2.6 radians a second, and the vanishing\n  // point slides up to 10 LEDs towards the turn.\n  P.roll = steer * 2.6;\n  P.vx += (W / 2 + steer * 10 - P.vx) * Math.min(1, dt * 2);\n  P.vy = H / 2;\n\n  const dz = P.v * dt;\n  const ca = Math.cos(P.roll * dt);\n  const sa = Math.sin(P.roll * dt);\n  for (let i = 0; i \u003c P.count; i++) {\n    const z = P.z[i] - dz;\n    const x = P.x[i] * ca - P.y[i] * sa;\n    const y = P.x[i] * sa + P.y[i] * ca;\n    P.x[i] = x;\n    P.y[i] = y;\n    // A star that passes the ship or leaves the view comes back far ahead.\n    const sx = (F * x) / Math.max(z, 1e-3);\n    const sy = (F * y) / Math.max(z, 1e-3);\n    if (z \u003c ZNEAR || Math.abs(sx) > W * 0.75 + 8 || Math.abs(sy) > H * 0.75 + 8) {\n      place(P, i, ZFAR - Math.random() * 2);\n      continue;\n    }\n    P.z[i] = z;\n  }\n}\n\nfunction add(acc, c, r, w, cr, cg, cb) {\n  if (c \u003c 0 || c >= W || r \u003c 0 || r >= H || w \u003c= 0) return;\n  const o = (r * W + c) * 3;\n  acc[o] += w * cr;\n  acc[o + 1] += w * cg;\n  acc[o + 2] += w * cb;\n}\n\n// A point spread over its 2x2 neighbours, so it glides between LEDs.\nfunction splat(acc, x, y, w, cr, cg, cb) {\n  const fx = x - 0.5;\n  const fy = y - 0.5;\n  const c = Math.floor(fx);\n  const r = Math.floor(fy);\n  const u = fx - c;\n  const v = fy - r;\n  add(acc, c, r, w * (1 - u) * (1 - v), cr, cg, cb);\n  add(acc, c + 1, r, w * u * (1 - v), cr, cg, cb);\n  add(acc, c, r + 1, w * (1 - u) * v, cr, cg, cb);\n  add(acc, c + 1, r + 1, w * u * v, cr, cg, cb);\n}\n\n// A streak from (x0, y0) to (x1, y1), its brightness ramping from i0 to i1.\n// Each LED along the long axis takes the length of the streak inside it, and\n// the light is split between the two LEDs either side of the line across it.\n// The streak lies on the star's own path, so the LEDs it lights only change\n// at its two ends and along the ramp; nothing is counted from frame time.\nfunction streak(acc, x0, y0, x1, y1, i0, i1, cr, cg, cb) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const steep = Math.abs(dy) >= Math.abs(dx);\n  let a0 = steep ? y0 : x0;\n  let a1 = steep ? y1 : x1;\n  let b0 = steep ? x0 : y0;\n  let b1 = steep ? x1 : y1;\n  let j0 = i0;\n  let j1 = i1;\n  if (a1 \u003c a0) {\n    let s = a0;\n    a0 = a1;\n    a1 = s;\n    s = b0;\n    b0 = b1;\n    b1 = s;\n    s = j0;\n    j0 = j1;\n    j1 = s;\n  }\n  const span = a1 - a0;\n  if (span \u003c 1e-4) return;\n  const slope = (b1 - b0) / span;\n  const stretch = Math.sqrt(1 + slope * slope);\n  const lim = steep ? H : W;\n  const m0 = Math.max(0, Math.floor(a0));\n  const m1 = Math.min(lim - 1, Math.floor(a1));\n  for (let m = m0; m \u003c= m1; m++) {\n    const lo = Math.max(a0, m);\n    const hi = Math.min(a1, m + 1);\n    if (hi \u003c= lo) continue;\n    const mid = (lo + hi) * 0.5;\n    const t = (mid - a0) / span;\n    const w = (j0 + (j1 - j0) * t) * (hi - lo) * stretch;\n    const fb = b0 + slope * (mid - a0) - 0.5;\n    const n = Math.floor(fb);\n    const u = fb - n;\n    if (steep) {\n      add(acc, n, m, w * (1 - u), cr, cg, cb);\n      add(acc, n + 1, m, w * u, cr, cg, cb);\n    } else {\n      add(acc, m, n, w * (1 - u), cr, cg, cb);\n      add(acc, m, n + 1, w * u, cr, cg, cb);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const acc = P.acc;\n  acc.fill(0);\n  const col = P.col;\n  const vx = P.vx;\n  const vy = P.vy;\n  const back = P.v * EXPOSE;\n  // The streak is drawn in pieces when the field rolls, so it curls.\n  const turn = P.roll * EXPOSE;\n  const pieces = Math.min(6, 3 + Math.ceil(Math.abs(turn) * 8));\n  for (let i = 0; i \u003c P.count; i++) {\n    const z = P.z[i];\n    const x = P.x[i];\n    const y = P.y[i];\n    const hx = vx + (F * x) / z;\n    const hy = vy + (F * y) / z;\n    // Brighter as it comes closer; a new star far off fades in.\n    const near = Math.min(1.3, (2.6 / z) ** 2);\n    const fade = Math.min(1, (ZFAR - z) / 4);\n    const bright = P.b[i] * near * fade;\n    if (bright \u003c 0.01) continue;\n    // Doppler: straight ahead the light is shifted to blue, and it runs\n    // through violet to magenta 40 LEDs out; the knob turns the whole scale\n    // round the wheel.\n    const ox = hx - vx;\n    const oy = (hy - vy) * 0.6;\n    const off = Math.min(1, Math.sqrt(ox * ox + oy * oy) / 40);\n    hsvInto(col, P.hue + 0.56 + 0.32 * off + 0.05 * P.tint[i], 0.62 + 0.35 * off, 1);\n    // The streak: where the star was over the last EXPOSE seconds.\n    let px = hx;\n    let py = hy;\n    let pi = bright;\n    for (let s = 1; s \u003c= pieces; s++) {\n      const tau = s / pieces;\n      const zt = z + back * tau;\n      const a = -turn * tau;\n      const c = Math.cos(a);\n      const sn = Math.sin(a);\n      const tx = vx + (F * (x * c - y * sn)) / zt;\n      const ty = vy + (F * (x * sn + y * c)) / zt;\n      const ti = bright * (1 - tau) ** 2;\n      streak(acc, tx, ty, px, py, ti, pi, col[0], col[1], col[2]);\n      px = tx;\n      py = ty;\n      pi = ti;\n    }\n    // The star itself, whiter than its streak.\n    splat(acc, hx, hy, bright * 0.9, 0.4 + 0.6 * col[0], 0.4 + 0.6 * col[1], 0.4 + 0.6 * col[2]);\n  }\n\n  // The flash as the ship leaps back into warp.\n  if (P.flash > 0) {\n    const f = P.flash;\n    for (let r = 0; r \u003c H; r++)\n      for (let c = 0; c \u003c W; c++) {\n        const d = Math.hypot(c + 0.5 - vx, r + 0.5 - vy);\n        const g = f * 1.6 * Math.exp(-d / 9);\n        const o = (r * W + c) * 3;\n        acc[o] += g * 0.8;\n        acc[o + 1] += g * 0.9;\n        acc[o + 2] += g;\n      }\n  }\n\n  // A soft shoulder instead of a hard clip where streaks pile up, read from\n  // a table of 1024 steps over 0..4.\n  const lut = P.lut;\n  for (let r = 0; r \u003c H; r++) {\n    for (let c = 0; c \u003c W; c++) {\n      const o = (r * W + c) * 3;\n      display.setPixel(c, r, lut[Math.min(1023, (acc[o] * 256) | 0)], lut[Math.min(1023, (acc[o + 1] * 256) | 0)], lut[Math.min(1023, (acc[o + 2] * 256) | 0)]);\n    }\n  }\n}\n","layer":{"id":"layer-warp","type":"code","name":"warp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Warp\n// Family:  space\n// Idea:    A ship flies through a starfield at warp: stars stream out of a vanishing point and stretch into streaks as they rush past.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the warp and hyperspace starfields of Star Trek and Star Wars, and the 3D starfield of the demoscene\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Warp=0.2..4, Stars=420..1400, Steer=-1..1\n//\n// Knob 1: Hue. The tint of the stars: at 0 the light ahead is shifted to ice blue and runs through violet to magenta at the edges; turning it takes the whole scale round the wheel.\n// Knob 2: Warp. How fast the ship flies: at the bottom the stars drift out as points, at 2 a star crosses from the vanishing point to the edge in about a second, at the top the streaks run half the panel.\n// Knob 3: Stars. How many stars fill the space ahead, from 420, where the streaks still have dark between them, to 1400, a dense blizzard.\n// Knob 4: Steer. The ship banks: in the middle it flies straight, turned either way the field rolls and the streaks curl into a spiral, and the vanishing point slides towards the turn.\n// Buttons: K1 tap drops the ship out of warp, lets the stars hang still for a moment and jumps back in.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 1400;\n// Focal length in LEDs: a star one unit off the axis at depth 1 sits F LEDs\n// from the vanishing point.\nconst F = 34;\nconst ZFAR = 10;\nconst ZNEAR = 0.3;\n// The stars fill a tube round the line of flight, RIN to ROUT units out and\n// stretched 1.8 times up and down to fill the tall panel. Nothing flies\n// straight at the ship, so the vanishing point itself stays dark.\nconst RIN = 0.8;\nconst ROUT = 4.5;\n// How long the shutter stays open, in seconds: a streak is where the star\n// has been over this long.\nconst EXPOSE = 0.1;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p;\n  out[1] = k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p;\n  out[2] = k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p;\n}\n\n// A new star somewhere in the tube at depth z, even over its cross-section.\nfunction place(P, i, z) {\n  const r = Math.sqrt(RIN * RIN + Math.random() * (ROUT * ROUT - RIN * RIN));\n  const a = Math.random() * Math.PI * 2;\n  P.x[i] = r * Math.cos(a);\n  P.y[i] = r * Math.sin(a) * 1.8;\n  P.z[i] = z;\n  const m = Math.random();\n  P.b[i] = 0.35 + 0.65 * m * m;\n  P.tint[i] = Math.random() - 0.5;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.x = new Float32Array(MAX);\n  P.y = new Float32Array(MAX);\n  P.z = new Float32Array(MAX);\n  P.b = new Float32Array(MAX);\n  P.tint = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) place(P, i, ZNEAR + Math.random() * (ZFAR - ZNEAR));\n  P.acc = new Float32Array(N * 3);\n  P.lut = new Float32Array(1024);\n  for (let i = 0; i \u003c 1024; i++) P.lut[i] = 255 * (1 - Math.exp(-((i + 0.5) / 256) * 2.2));\n  P.col = [0, 0, 0];\n  P.count = 420;\n  P.v = 0;\n  P.roll = 0;\n  P.hue = 0;\n  P.vx = W / 2;\n  P.vy = H / 2;\n  // The jump K1 sends: seconds since the tap, or -1.\n  P.jump = -1;\n  P.flash = 0;\n}\n\n// How hard the ship flies after a K1 tap, against seconds since the tap: it\n// drops out of warp in 0.6 s, hangs nearly still until 2.4 s, leaps in at\n// three times the knob's warp and settles back by 4 s.\nfunction jumpGain(t) {\n  if (t \u003c 0) return 1;\n  if (t \u003c 0.6) return 1 - 0.97 * Math.sin((t / 0.6) * Math.PI * 0.5);\n  if (t \u003c 2.4) return 0.03;\n  if (t \u003c 2.8) return 0.03 + 2.97 * ((t - 2.4) / 0.4) ** 2;\n  if (t \u003c 4) return 1 + 2 * (1 - (t - 2.8) / 1.2) ** 2;\n  return 1;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 420, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.count = Math.max(1, Math.min(MAX, Math.round(k[2])));\n  const steer = Math.max(-1, Math.min(1, k[3]));\n\n  if (input.btnPressed && input.btnPressed[0] && P.jump \u003c 0) P.jump = 0;\n  let gain = 1;\n  if (P.jump >= 0) {\n    P.jump += dt;\n    gain = jumpGain(P.jump);\n    if (P.jump > 2.4 && P.jump \u003c 2.6) P.flash = 1;\n    if (P.jump >= 4) P.jump = -1;\n  }\n  P.flash = Math.max(0, P.flash - dt * 2.5);\n  // Warp 2 flies 12 units of depth a second.\n  P.v = Math.max(0.2, k[1]) * 6 * gain;\n  // Banking rolls the field up to 2.6 radians a second, and the vanishing\n  // point slides up to 10 LEDs towards the turn.\n  P.roll = steer * 2.6;\n  P.vx += (W / 2 + steer * 10 - P.vx) * Math.min(1, dt * 2);\n  P.vy = H / 2;\n\n  const dz = P.v * dt;\n  const ca = Math.cos(P.roll * dt);\n  const sa = Math.sin(P.roll * dt);\n  for (let i = 0; i \u003c P.count; i++) {\n    const z = P.z[i] - dz;\n    const x = P.x[i] * ca - P.y[i] * sa;\n    const y = P.x[i] * sa + P.y[i] * ca;\n    P.x[i] = x;\n    P.y[i] = y;\n    // A star that passes the ship or leaves the view comes back far ahead.\n    const sx = (F * x) / Math.max(z, 1e-3);\n    const sy = (F * y) / Math.max(z, 1e-3);\n    if (z \u003c ZNEAR || Math.abs(sx) > W * 0.75 + 8 || Math.abs(sy) > H * 0.75 + 8) {\n      place(P, i, ZFAR - Math.random() * 2);\n      continue;\n    }\n    P.z[i] = z;\n  }\n}\n\nfunction add(acc, c, r, w, cr, cg, cb) {\n  if (c \u003c 0 || c >= W || r \u003c 0 || r >= H || w \u003c= 0) return;\n  const o = (r * W + c) * 3;\n  acc[o] += w * cr;\n  acc[o + 1] += w * cg;\n  acc[o + 2] += w * cb;\n}\n\n// A point spread over its 2x2 neighbours, so it glides between LEDs.\nfunction splat(acc, x, y, w, cr, cg, cb) {\n  const fx = x - 0.5;\n  const fy = y - 0.5;\n  const c = Math.floor(fx);\n  const r = Math.floor(fy);\n  const u = fx - c;\n  const v = fy - r;\n  add(acc, c, r, w * (1 - u) * (1 - v), cr, cg, cb);\n  add(acc, c + 1, r, w * u * (1 - v), cr, cg, cb);\n  add(acc, c, r + 1, w * (1 - u) * v, cr, cg, cb);\n  add(acc, c + 1, r + 1, w * u * v, cr, cg, cb);\n}\n\n// A streak from (x0, y0) to (x1, y1), its brightness ramping from i0 to i1.\n// Each LED along the long axis takes the length of the streak inside it, and\n// the light is split between the two LEDs either side of the line across it.\n// The streak lies on the star's own path, so the LEDs it lights only change\n// at its two ends and along the ramp; nothing is counted from frame time.\nfunction streak(acc, x0, y0, x1, y1, i0, i1, cr, cg, cb) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const steep = Math.abs(dy) >= Math.abs(dx);\n  let a0 = steep ? y0 : x0;\n  let a1 = steep ? y1 : x1;\n  let b0 = steep ? x0 : y0;\n  let b1 = steep ? x1 : y1;\n  let j0 = i0;\n  let j1 = i1;\n  if (a1 \u003c a0) {\n    let s = a0;\n    a0 = a1;\n    a1 = s;\n    s = b0;\n    b0 = b1;\n    b1 = s;\n    s = j0;\n    j0 = j1;\n    j1 = s;\n  }\n  const span = a1 - a0;\n  if (span \u003c 1e-4) return;\n  const slope = (b1 - b0) / span;\n  const stretch = Math.sqrt(1 + slope * slope);\n  const lim = steep ? H : W;\n  const m0 = Math.max(0, Math.floor(a0));\n  const m1 = Math.min(lim - 1, Math.floor(a1));\n  for (let m = m0; m \u003c= m1; m++) {\n    const lo = Math.max(a0, m);\n    const hi = Math.min(a1, m + 1);\n    if (hi \u003c= lo) continue;\n    const mid = (lo + hi) * 0.5;\n    const t = (mid - a0) / span;\n    const w = (j0 + (j1 - j0) * t) * (hi - lo) * stretch;\n    const fb = b0 + slope * (mid - a0) - 0.5;\n    const n = Math.floor(fb);\n    const u = fb - n;\n    if (steep) {\n      add(acc, n, m, w * (1 - u), cr, cg, cb);\n      add(acc, n + 1, m, w * u, cr, cg, cb);\n    } else {\n      add(acc, m, n, w * (1 - u), cr, cg, cb);\n      add(acc, m, n + 1, w * u, cr, cg, cb);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const acc = P.acc;\n  acc.fill(0);\n  const col = P.col;\n  const vx = P.vx;\n  const vy = P.vy;\n  const back = P.v * EXPOSE;\n  // The streak is drawn in pieces when the field rolls, so it curls.\n  const turn = P.roll * EXPOSE;\n  const pieces = Math.min(6, 3 + Math.ceil(Math.abs(turn) * 8));\n  for (let i = 0; i \u003c P.count; i++) {\n    const z = P.z[i];\n    const x = P.x[i];\n    const y = P.y[i];\n    const hx = vx + (F * x) / z;\n    const hy = vy + (F * y) / z;\n    // Brighter as it comes closer; a new star far off fades in.\n    const near = Math.min(1.3, (2.6 / z) ** 2);\n    const fade = Math.min(1, (ZFAR - z) / 4);\n    const bright = P.b[i] * near * fade;\n    if (bright \u003c 0.01) continue;\n    // Doppler: straight ahead the light is shifted to blue, and it runs\n    // through violet to magenta 40 LEDs out; the knob turns the whole scale\n    // round the wheel.\n    const ox = hx - vx;\n    const oy = (hy - vy) * 0.6;\n    const off = Math.min(1, Math.sqrt(ox * ox + oy * oy) / 40);\n    hsvInto(col, P.hue + 0.56 + 0.32 * off + 0.05 * P.tint[i], 0.62 + 0.35 * off, 1);\n    // The streak: where the star was over the last EXPOSE seconds.\n    let px = hx;\n    let py = hy;\n    let pi = bright;\n    for (let s = 1; s \u003c= pieces; s++) {\n      const tau = s / pieces;\n      const zt = z + back * tau;\n      const a = -turn * tau;\n      const c = Math.cos(a);\n      const sn = Math.sin(a);\n      const tx = vx + (F * (x * c - y * sn)) / zt;\n      const ty = vy + (F * (x * sn + y * c)) / zt;\n      const ti = bright * (1 - tau) ** 2;\n      streak(acc, tx, ty, px, py, ti, pi, col[0], col[1], col[2]);\n      px = tx;\n      py = ty;\n      pi = ti;\n    }\n    // The star itself, whiter than its streak.\n    splat(acc, hx, hy, bright * 0.9, 0.4 + 0.6 * col[0], 0.4 + 0.6 * col[1], 0.4 + 0.6 * col[2]);\n  }\n\n  // The flash as the ship leaps back into warp.\n  if (P.flash > 0) {\n    const f = P.flash;\n    for (let r = 0; r \u003c H; r++)\n      for (let c = 0; c \u003c W; c++) {\n        const d = Math.hypot(c + 0.5 - vx, r + 0.5 - vy);\n        const g = f * 1.6 * Math.exp(-d / 9);\n        const o = (r * W + c) * 3;\n        acc[o] += g * 0.8;\n        acc[o + 1] += g * 0.9;\n        acc[o + 2] += g;\n      }\n  }\n\n  // A soft shoulder instead of a hard clip where streaks pile up, read from\n  // a table of 1024 steps over 0..4.\n  const lut = P.lut;\n  for (let r = 0; r \u003c H; r++) {\n    for (let c = 0; c \u003c W; c++) {\n      const o = (r * W + c) * 3;\n      display.setPixel(c, r, lut[Math.min(1023, (acc[o] * 256) | 0)], lut[Math.min(1023, (acc[o + 1] * 256) | 0)], lut[Math.min(1023, (acc[o + 2] * 256) | 0)]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Warp=0.2..4, Stars=420..1400, Steer=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the stars: at 0 the light ahead is shifted to ice blue and runs through violet to magenta at the edges; turning it takes the whole scale round the wheel."},{"name":"Warp","min":0.2,"max":4,"about":"How fast the ship flies: at the bottom the stars drift out as points, at 2 a star crosses from the vanishing point to the edge in about a second, at the top the streaks run half the panel."},{"name":"Stars","min":420,"max":1400,"about":"How many stars fill the space ahead, from 420, where the streaks still have dark between them, to 1400, a dense blizzard."},{"name":"Steer","min":-1,"max":1,"about":"The ship banks: in the middle it flies straight, turned either way the field rolls and the streaks curl into a spiral, and the vanishing point slides towards the turn."}],"start":[0,2,420,0.06],"measures":{"motion":2.077,"detail":0.0623,"edges":0.3496,"complexity":0.991,"coverage":0.2025,"colour":0.1354,"drift":0.0642},"knobResponse":[0.0455,0.0994,0.1476,0.0712]},{"slug":"waterfall","title":"Waterfall","family":"weather","round":14,"note":"강이 벼랑 끝을 넘어 패널 높이를 다 떨어져 소에 닿아요. 벼랑 끝에서 청록 유리 같던 물은 떨어지며 하얘지고, 소에서 오르는 안개에 무지개 한 토막이 서요. K3 바람을 끝까지 돌리면 돌풍이 물줄기를 찢어 물보라로 날려 올리고, K1 을 누르면 통나무 하나가 벼랑 끝을 넘어와요.","idea":"A river goes over a cliff and falls the whole height of the panel into a plunge pool, glassy where it leaves the lip and white by the time it lands, with spray and mist rising off the pool.","buttons":"K1 tap sends a log over the lip; it tumbles down, goes under in the pool and comes up drifting away. One also comes by itself now and then.","code":"// ===== Patternflow pattern =====\n// Title:   Waterfall\n// Family:  weather\n// Idea:    A river goes over a cliff and falls the whole height of the panel into a plunge pool, glassy where it leaves the lip and white by the time it lands, with spray and mist rising off the pool.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 12\n// Round:   14\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wind=-1..1, Spate=0..1\n//\n// Knob 1: Hue. The colour of the water, the pool and the mist, starting from glacier turquoise; about halfway round it runs red, like Blood Falls in Antarctica.\n// Knob 2: Speed. How fast the world runs: at 2 the water takes 1.6 seconds from the lip to the pool, at the top about 1.1, at the bottom 16, in slow motion.\n// Knob 3: Wind. At 0 the water falls straight; turned either way the wind bends the curtain more the further it has fallen and carries the mist off that way, and near the ends a gale catches the water before it lands and blows it back up as spray, as Kinder Downfall does in a westerly.\n// Knob 4: Spate. How much water the river brings: from a dry-season fall that breaks into threads to a flood nearly as wide as the panel, with spray and mist to match.\n// Buttons: K1 tap sends a log over the lip; it tumbles down, goes under in the pool and comes up drifting away. One also comes by itself now and then.\n\nconst W = 64;\nconst H = 128;\n// The lip the river goes over, the far edge of the pool, and the row where the water lands.\nconst LIP = 21;\nconst POOL = 110;\nconst HIT = 115;\n// Free fall in panel units: rows per second squared, and the speed water leaves the lip at.\n// 94 rows take 1.6 seconds at Speed 2.\nconst G = 59;\nconst V0 = 10;\nconst SPRAY = 220;\n// The value-noise lattice wraps every 256 cells.\nconst LAT = 256;\n// exp(-z) for z from 0 to 8 in steps of 1/32, for the mist's bell curve.\nconst EXP = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) EXP[i] = Math.exp(-i / 32);\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  return [\n    (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255,\n    (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255,\n    (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255,\n  ];\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// The fall's centre column at the lip.\nconst CX = 30;\n\nexport function setup(params) {\n  const lat = new Float32Array(LAT * LAT);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  params.lat = lat;\n  params.bg = new Float32Array(W * H * 3);\n  params.buf = new Float32Array(W * H * 3);\n  // Boulders in front of the pool: their colour, and 1 where they stand.\n  params.front = new Float32Array(W * H * 3);\n  params.frontA = new Float32Array(W * H);\n  params.px = new Float32Array(SPRAY);\n  params.py = new Float32Array(SPRAY);\n  params.pvx = new Float32Array(SPRAY);\n  params.pvy = new Float32Array(SPRAY);\n  params.pfloor = new Float32Array(SPRAY);\n  params.pgrav = new Float32Array(SPRAY);\n  params.page = new Float32Array(SPRAY).fill(9);\n  params.pnext = 0;\n  params.ts = 0;\n  params.started = false;\n  params.spawnDebt = 0;\n  params.galeDebt = 0;\n  params.log = { on: false, t0: 0, x: 0, y: 0, ang: 0, spin: 0, phase: 0, age: 0, drift: 0 };\n  // The first log comes early so the fall shows what it does; then one in a while.\n  params.nextLog = 2.4;\n  params.pal = new Float32Array(9 * 4 * 3);\n  params.dens = new Float32Array(W * H);\n  bakeScene(params);\n}\n\nfunction bakeScene(params) {\n  const bg = params.bg;\n  const lat = params.lat;\n  // Sky: pale at the top of the gorge, a little deeper towards the far ridge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = hsv(0.58, 0.28 + y * 0.006, 0.78 - y * 0.012);\n      const o = (y * W + x) * 3;\n      bg[o] = c[0];\n      bg[o + 1] = c[1];\n      bg[o + 2] = c[2];\n    }\n  // The far ridge, blue with distance.\n  for (let x = 0; x \u003c W; x++) {\n    const top = Math.round(9 + 3 * vn(lat, x / 9, 3.5) + 1.5 * vn(lat, x / 3.5, 9.5));\n    for (let y = top; y \u003c LIP; y++) {\n      const c = hsv(0.5, 0.45, 0.3 + 0.04 * vn(lat, x / 2, y / 2));\n      put(bg, x, y, c[0], c[1], c[2]);\n    }\n  }\n  // The near banks of the river, grass running back to the ridge. The river itself is drawn\n  // every frame, as wide as Spate makes it.\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 13; y \u003c LIP; y++) {\n      const g = 0.13 + 0.015 * (y - 13) + 0.09 * vn(lat, x / 2, y / 1.2 + 40);\n      const c = hsv(0.28, 0.68, g);\n      put(bg, x, y, c[0], c[1], c[2]);\n    }\n\n  // The cliff: beds of rock laid flat, each its own shade, lit on the top and undercut below.\n  const edges = [LIP];\n  while (edges[edges.length - 1] \u003c H + 12) edges.push(edges[edges.length - 1] + 5 + Math.floor(Math.random() * 8));\n  const bedV = edges.map(() => 0.12 + Math.random() * 0.09);\n  const bedH = edges.map(() => (Math.random() \u003c 0.6 ? 0.07 : 0.58));\n  const bedS = edges.map((_, i) => (bedH[i] \u003c 0.3 ? 0.3 : 0.14));\n  for (let y = LIP; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const yy = y + 2.5 * Math.sin(x * 0.07 + 0.5) + 5 * (vn(lat, x / 11, 3.3 + y / 40) - 0.5);\n      let b = 0;\n      while (b \u003c edges.length - 2 && yy >= edges[b + 1]) b++;\n      const thick = edges[b + 1] - edges[b];\n      const frac = (yy - edges[b]) / thick;\n      let v = bedV[b] + (vn(lat, x / 2.5 + b * 17, y / 2.5) - 0.5) * 0.07;\n      if (frac \u003c 0.18) v += 0.06;\n      else if (frac > 0.8) v -= 0.07;\n      // Joints: a dark crack here and there through a bed.\n      if (hash(x * 7 + b, 91) \u003c 0.012 && frac > 0.2 && frac \u003c 0.8) v *= 0.55;\n      // The gorge is lit from above: higher beds catch more sky.\n      v *= 1.25 - 0.45 * (y - LIP) / (H - LIP);\n      let c = hsv(bedH[b], bedS[b], Math.max(0.05, v));\n      // Moss on the tops of the beds, thicker low down where the spray reaches.\n      const wet = Math.max(0, (y - 40) / 80);\n      if (frac \u003c 0.35 && vn(lat, x / 4 + b * 5, y / 2.5 + 80) > 0.68 - wet * 0.22) c = hsv(0.27, 0.7, 0.2 + 0.12 * vn(lat, x / 1.7, y / 1.7 + 120));\n      // The lip overhangs a little, so the rock just under it is in shadow.\n      const under = y - LIP \u003c 3 ? 0.5 + 0.17 * (y - LIP) : 1;\n      put(bg, x, y, c[0] * under, c[1] * under, c[2] * under);\n    }\n\n  // Trees lean over the top of the gorge from both sides.\n  const crowns = [\n    [3, 4, 9],\n    [12, -1, 7],\n    [-2, 19, 8],\n    [8, 14, 6],\n    [57, 3, 8],\n    [49, 0, 6],\n    [64, 17, 9],\n    [55, 13, 6],\n  ];\n  for (const [cx, cy, r] of crowns)\n    for (let y = Math.floor(cy - r); y \u003c= cy + r; y++)\n      for (let x = Math.floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n        const dx = x - cx;\n        const dy = (y - cy) * 1.1;\n        const d = Math.sqrt(dx * dx + dy * dy) / r;\n        if (d > 0.82 + 0.3 * vn(lat, x / 2, y / 2 + 160)) continue;\n        // Lit from above: the upper leaves are lighter.\n        const leaf = vn(lat, x / 1.6 + 30, y / 1.6 + 30);\n        const v = 0.17 + 0.16 * leaf + 0.08 * Math.max(0, -dy / r);\n        const c = hsv(0.29 - 0.04 * leaf, 0.72, v);\n        put(bg, x, y, c[0], c[1], c[2]);\n      }\n\n  // Boulders round the pool, in front of the water.\n  const front = params.front;\n  const fa = params.frontA;\n  const stones = [\n    [4, 124, 11, 9],\n    [16, 128, 7, 5],\n    [59, 125, 10, 8],\n    [47, 129, 6, 5],\n  ];\n  for (const [cx, cy, rx, ry] of stones)\n    for (let y = Math.floor(cy - ry); y \u003c H; y++)\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0) continue;\n        const dx = (x - cx) / rx;\n        const dy = (y - cy) / ry;\n        const d = dx * dx + dy * dy;\n        if (d > 1 + 0.25 * (vn(lat, x / 2, y / 2 + 200) - 0.5)) continue;\n        const top = -dy;\n        let v = 0.12 + 0.12 * Math.max(0, top) + 0.05 * vn(lat, x / 1.8, y / 1.8 + 220);\n        let c = hsv(0.08, 0.22, v);\n        // Moss on the tops, and the waterline dark and wet.\n        if (top > 0.45 && vn(lat, x / 2.5, y / 2.5 + 240) > 0.45) c = hsv(0.27, 0.7, 0.22 + 0.1 * top);\n        if (y > cy + ry * 0.55) {\n          v *= 0.6;\n          c = hsv(0.55, 0.3, v);\n        }\n        const o = (y * W + x) * 3;\n        front[o] = c[0];\n        front[o + 1] = c[1];\n        front[o + 2] = c[2];\n        fa[y * W + x] = 1;\n      }\n}\n\nfunction spawnSpray(params, x, y, vx, vy, grav, floor) {\n  const s = params.pnext;\n  params.pnext = (s + 1) % SPRAY;\n  params.px[s] = x;\n  params.py[s] = y;\n  params.pvx[s] = vx;\n  params.pvy[s] = vy;\n  params.pgrav[s] = grav;\n  params.pfloor[s] = floor;\n  params.page[s] = 0;\n}\n\nfunction stepSpray(params, dts) {\n  for (let i = 0; i \u003c SPRAY; i++) {\n    if (params.page[i] > 3) continue;\n    params.page[i] += dts;\n    params.pvy[i] += G * params.pgrav[i] * dts;\n    params.px[i] += params.pvx[i] * dts;\n    params.py[i] += params.pvy[i] * dts;\n    if (params.py[i] > params.pfloor[i] && params.pvy[i] > 0) params.page[i] = 9;\n  }\n}\n\n// Time for the water to fall d rows from the lip, in world seconds.\nfunction flight(d) {\n  return (-V0 + Math.sqrt(V0 * V0 + 2 * G * d)) / G;\n}\n\n// How much wider the water is d rows below the lip.\nfunction spreadAt(d) {\n  const f = d / 94;\n  return 1 + 0.35 * f + 0.35 * f * f * f;\n}\n\n// How far the wind has carried water that left the lip at u and has been falling tau seconds.\nfunction blown(params, u, tau) {\n  const gust = 1 + 0.9 * (vn(params.lat, u * 0.7, 333.3) - 0.5);\n  return 0.5 * params.wind * 24 * gust * tau * tau;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const speed = Math.max(0.05, k[1]);\n  const dts = (dt * speed) / 2;\n  params.ts += dts;\n  const ts = params.ts;\n  params.hue = k[0] + 0.48;\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const spate = Math.max(0, Math.min(1, k[3]));\n  params.wind = wind;\n  params.spate = spate;\n  // Past about half way the wind is a gale and starts tearing the curtain apart.\n  const gale = Math.max(0, Math.min(1, (Math.abs(wind) - 0.5) / 0.45));\n  params.gale = gale;\n  params.breakAt = 94 * (1 - 0.72 * gale);\n  params.half0 = 6.5 + 14.5 * Math.pow(spate, 0.6);\n  params.hEnd = params.half0 * spreadAt(HIT - LIP);\n  // Columns break into separate threads when the river is low.\n  const low = Math.max(0, 1 - spate / 0.3);\n  params.gap = 0.75 * low * low;\n  params.hitX = CX + blown(params, ts - flight(HIT - LIP), flight(HIT - LIP));\n\n  const rate = (70 + 200 * spate) * (1 - 0.7 * gale);\n  if (!params.started) {\n    params.started = true;\n    // Two seconds of spray, so the pool opens already throwing it.\n    for (let n = 0; n \u003c 60; n++) {\n      spray(params, rate, 1 / 30);\n      stepSpray(params, 1 / 30);\n    }\n  }\n  spray(params, rate, dts);\n  stepSpray(params, dts);\n\n  const log = params.log;\n  params.nextLog -= dts;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if ((pressed || params.nextLog \u003c= 0) && !(log.on && log.phase === 0)) {\n    log.on = true;\n    log.phase = 0;\n    log.t0 = ts;\n    log.ang = Math.random() * Math.PI;\n    log.spin = (Math.random() \u003c 0.5 ? -1 : 1) * (2 + Math.random() * 2.5);\n    log.off = (Math.random() - 0.5) * params.half0;\n    params.nextLog = 20 + Math.random() * 25;\n  }\n  if (log.on) stepLog(params, log, dts);\n}\n\nfunction spray(params, rate, dts) {\n  const wind = params.wind;\n  params.spawnDebt += rate * dts;\n  while (params.spawnDebt >= 1) {\n    params.spawnDebt -= 1;\n    const x = params.hitX + (Math.random() - 0.5) * 1.8 * params.hEnd;\n    spawnSpray(params, x, HIT - 1, (Math.random() - 0.5) * (40 + 30 * params.spate) + wind * 25, -(12 + Math.random() * 40), 1.6, HIT + 1);\n  }\n  // In a gale the torn curtain goes up and away downwind as spray.\n  const gale = params.gale;\n  if (gale > 0) {\n    params.galeDebt += gale * (90 + 120 * params.spate) * dts;\n    while (params.galeDebt >= 1) {\n      params.galeDebt -= 1;\n      const d = params.breakAt + Math.random() * (HIT - LIP - params.breakAt);\n      const tau = flight(d);\n      const x = CX + blown(params, params.ts - tau, tau) + (Math.random() - 0.5) * 2 * params.half0 * spreadAt(d);\n      spawnSpray(params, x, LIP + d, wind * (35 + Math.random() * 45), -(8 + Math.random() * 30) * gale, 0.35, H + 4);\n    }\n  }\n}\n\nfunction stepLog(params, log, dts) {\n  if (log.phase === 0) {\n    log.ang += log.spin * dts;\n    const tau = params.ts - log.t0;\n    const d = V0 * tau + 0.5 * G * tau * tau;\n    log.x = CX + log.off * spreadAt(d) + blown(params, log.t0, tau);\n    log.y = LIP + d;\n    if (log.y >= HIT) {\n      for (let n = 0; n \u003c 34; n++) spawnSpray(params, log.x + (Math.random() - 0.5) * 6, HIT - 1, (Math.random() - 0.5) * 70, -(12 + Math.random() * 40) * 1.5, 1.6, HIT + 1);\n      log.phase = 1;\n      log.age = 0;\n      log.drift = log.x \u003c W / 2 ? -1 : 1;\n      log.y = HIT + 3;\n    }\n  } else {\n    // Under for a moment, then up and away on the current.\n    log.age += dts;\n    log.ang -= Math.sin(log.ang) * Math.cos(log.ang) * dts * 2;\n    log.x += log.drift * (3 + 6 * Math.min(1, log.age / 2)) * dts;\n    log.y = HIT + 4 + Math.min(1, log.age / 2) * 5 + Math.sin(log.age * 3) * 0.6;\n    if (log.x \u003c -8 || log.x > W + 8) log.on = false;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const lat = params.lat;\n  const ts = params.ts;\n  const hue = params.hue;\n  const spate = params.spate;\n  const wind = params.wind;\n  const gale = params.gale;\n  buf.set(params.bg);\n\n  // Water colours: nine levels of brightness by four of saturation.\n  const pal = params.pal;\n  const sats = [0.05, 0.22, 0.42, 0.62];\n  for (let l = 0; l \u003c= 8; l++)\n    for (let s = 0; s \u003c 4; s++) {\n      const c = hsv(hue + (s === 3 ? 0.02 : 0), sats[s], l / 8);\n      const o = (l * 4 + s) * 3;\n      pal[o] = c[0];\n      pal[o + 1] = c[1];\n      pal[o + 2] = c[2];\n    }\n\n  const half0 = params.half0;\n  const gap = params.gap;\n\n  // The river upstream, flowing towards the lip.\n  for (let y = 13; y \u003c LIP; y++) {\n    // Narrower as it runs back towards the ridge.\n    const z = 1 / (0.72 + (0.28 * (y - 13)) / (LIP - 13));\n    const wide = (half0 + 1) / z;\n    for (let x = Math.ceil(CX - wide); x \u003c CX + wide; x++) {\n      const n = vn(lat, ((x - CX) * z) / 2.2 + 300, (y - 13) * z * 0.5 - ts * 2.2);\n      const far = y \u003c 16 ? 1 : 0;\n      const l = (n > 0.7 ? 6 : n > 0.42 ? 4 : 3) - far;\n      const o = (l * 4 + 2) * 3;\n      put(buf, x, y, pal[o], pal[o + 1], pal[o + 2]);\n    }\n  }\n\n  // The falling water. Each pixel reads its texture at the moment that water left the lip,\n  // so a clump keeps its place in the texture and stretches as it speeds up.\n  const breakAt = params.breakAt;\n  for (let y = LIP; y \u003c= HIT; y++) {\n    const d = y - LIP + 0.5;\n    const dn = d / 94;\n    const tau = flight(d);\n    const u = ts - tau;\n    const half = half0 * spreadAt(d);\n    const c = CX + Math.sin(u * 0.9) * 0.8 * dn + blown(params, u, tau);\n    const aer = Math.min(1, d / 75);\n    // Below the break a gale has torn this much of the water away.\n    const torn = d > breakAt ? Math.min(1, (d - breakAt) / 26) * gale * 0.85 : 0;\n    const reach = half + 3 + 6 * dn;\n    const lo = Math.max(0, Math.floor(c - reach));\n    const hi = Math.min(W - 1, Math.ceil(c + reach));\n    // Ragged edges: lumps of water bulge out of each side and travel down with it.\n    const eL = (vn(lat, u * 5 + 17, 11) - 0.5) * (1.5 + 7 * dn);\n    const eR = (vn(lat, u * 5 + 83, 29) - 0.5) * (1.5 + 7 * dn);\n    for (let x = lo; x \u003c= hi; x++) {\n      const off = x + 0.5 - c;\n      const inside = half + (off \u003c 0 ? eL : eR) - Math.abs(off);\n      const o = (y * W + x) * 3;\n      // The rock behind and beside the water is wet and dark.\n      if (inside > -2.5) {\n        buf[o] *= 0.62;\n        buf[o + 1] *= 0.66;\n        buf[o + 2] *= 0.75;\n      }\n      const xr = off / half;\n      const s = xr * half0;\n      if (inside \u003c= 0) {\n        // Drops flung off the edge.\n        if (inside > -2 - 5 * dn && vn(lat, x * 1.37 + 500, u * 13) > 0.8 - 0.1 * dn) {\n          const p = (5 * 4 + 1) * 3;\n          buf[o] = pal[p];\n          buf[o + 1] = pal[p + 1];\n          buf[o + 2] = pal[p + 2];\n        }\n        continue;\n      }\n      const thr = gap * (0.3 + 0.75 * Math.abs(xr));\n      if (thr > 0 && vn(lat, s * 0.45 + 100.5, u * 0.5) \u003c thr) continue;\n      const n1 = vn(lat, s * 0.62 + 3.1, u * 8);\n      const n2 = vn(lat, s * 0.22 + 51.7, u * 2.6);\n      if (torn > 0 && vn(lat, s * 0.8 + 610, u * 4) \u003c torn) continue;\n      let l;\n      let sat;\n      if (n1 * 0.55 + n2 * 0.45 > 0.8 - 0.24 * aer - 0.3 * torn) {\n        l = 7 + (n1 > 0.7 ? 1 : 0);\n        sat = 0;\n      } else {\n        let v = 0.34 + 0.34 * aer + (n1 - 0.5) * (0.35 + 0.2 * aer) + (n2 - 0.5) * 0.5;\n        if (inside \u003c 1) v *= 0.8;\n        l = Math.max(1, Math.min(7, Math.round(v * 8)));\n        // Ragged, so the water pales without a seam across it.\n        const a = aer + (n1 - 0.5) * 0.5;\n        sat = a \u003c 0.35 ? 3 : a \u003c 0.7 ? 2 : 1;\n      }\n      // The curl over the lip catches the sky.\n      if (d \u003c 1.2) {\n        l = 7;\n        sat = 1;\n      } else if (d \u003c 3) {\n        l = Math.max(l, 6);\n        sat = 2;\n      }\n      const p = (l * 4 + sat) * 3;\n      buf[o] = pal[p];\n      buf[o + 1] = pal[p + 1];\n      buf[o + 2] = pal[p + 2];\n    }\n  }\n\n  // The plunge pool: rings running out from where the water lands, foam boiling over it.\n  // What a gale lets through still lands, and churns less.\n  const ci = Math.max(4, Math.min(W - 4, params.hitX));\n  const hEnd = params.hEnd;\n  const boil = 1 - 0.6 * gale;\n  for (let y = POOL; y \u003c H; y++) {\n    const q = (y - POOL) / (H - 1 - POOL);\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - ci;\n      const dy = (y - HIT) * 2.6;\n      const rho = Math.sqrt(dx * dx + dy * dy);\n      let l = 1 + (q > 0.5 ? 1 : 0);\n      let sat = 3;\n      const w = Math.sin(rho * 0.55 - ts * 6 + vn(lat, x / 6 + 900, y / 2) * 2.5);\n      if (w > 0.7 && vn(lat, x / 3 + 950, y + ts * 0.5) > 0.35) l += rho \u003c 40 ? 2 : 1;\n      const churn = Math.exp(-rho / (hEnd * 0.9 + 5)) * (0.5 + 0.9 * vn(lat, dx / 2.5 + 7, ts * 3 + y * 0.7));\n      const scum = Math.exp(-rho / 34) * vn(lat, rho / 3 - ts * 2.2, (dx / (rho + 1)) * 5 + (dy \u003c 0 ? 20 : 40)) * 0.75;\n      const f = (churn + scum) * boil;\n      if (f > 0.62) {\n        l = 8;\n        sat = 0;\n      } else if (f > 0.47) {\n        l = 5;\n        sat = 1;\n      }\n      const p = (l * 4 + sat) * 3;\n      const o = (y * W + x) * 3;\n      buf[o] = pal[p];\n      buf[o + 1] = pal[p + 1];\n      buf[o + 2] = pal[p + 2];\n    }\n  }\n\n  // The log goes in front of the water and behind the boulders and the mist.\n  const log = params.log;\n  if (log.on && !(log.phase === 1 && log.age \u003c 0.7)) drawLog(buf, log);\n\n  const front = params.front;\n  const fa = params.frontA;\n  for (let p = 0; p \u003c W * H; p++) {\n    if (fa[p] === 0) continue;\n    const o = p * 3;\n    buf[o] = front[o];\n    buf[o + 1] = front[o + 1];\n    buf[o + 2] = front[o + 2];\n  }\n\n  {\n    const p = (8 * 4 + 1) * 3;\n    for (let i = 0; i \u003c SPRAY; i++) {\n      if (params.page[i] > 3) continue;\n      put(buf, Math.round(params.px[i]), Math.round(params.py[i]), pal[p], pal[p + 1], pal[p + 2]);\n    }\n  }\n\n  // Mist rises off the pool and leans downwind. The sun is behind us, so a piece of\n  // rainbow stands in it.\n  const dens = params.dens;\n  const yTop = HIT - 80;\n  dens.fill(0, yTop * W);\n  const hs = 24 + 24 * spate + 20 * gale;\n  for (let y = Math.max(yTop, Math.floor(HIT - 4.6 * hs)); y \u003c H; y++) {\n    const h = HIT - y;\n    const fh = h > 0 ? Math.exp(-h / hs) : Math.exp(h / 5);\n    const sig = hEnd + 4 + Math.max(0, h) * 0.5;\n    const inv = 1 / (2 * sig * sig);\n    const mx = ci + wind * Math.max(0, h) * 0.9;\n    const xr = Math.ceil(sig * 2.6);\n    const row = y * W;\n    for (let x = Math.max(0, Math.floor(mx - xr)); x \u003c= Math.min(W - 1, Math.ceil(mx + xr)); x++) {\n      const dx = x + 0.5 - mx;\n      const z = dx * dx * inv * 32;\n      if (z \u003c 256) dens[row + x] += fh * EXP[z | 0];\n    }\n  }\n  const mist = hsv(hue, 0.1, 0.9);\n  const amt = 0.75 + 0.8 * spate;\n  const rcx = ci - 4;\n  const rcy = HIT + 36;\n  const R = 48;\n  for (let y = yTop; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const ds = dens[y * W + x];\n      if (ds \u003c 0.02) continue;\n      const n = vn(lat, x / 11 + 40 - ts * wind * 3, (y + ts * 7) / 11);\n      let d = ds * (0.25 + 1.3 * (n - 0.3)) * amt;\n      if (d \u003c= 0.06) continue;\n      // Four steps of mist: finer steps flicker as it rises.\n      d = Math.min(0.75, Math.round(d * 4) / 4);\n      const o = (y * W + x) * 3;\n      let mr = mist[0];\n      let mg = mist[1];\n      let mb = mist[2];\n      const rx = x + 0.5 - rcx;\n      const ry = y + 0.5 - rcy;\n      const rr = Math.sqrt(rx * rx + ry * ry) - R;\n      if (rr > -4 && rr \u003c 4 && ry \u003c 0) {\n        // Violet inside, red outside, as the primary bow has it.\n        const band = hsv(0.76 * (1 - (rr + 4) / 8), 0.85, 1);\n        mr = band[0];\n        mg = band[1];\n        mb = band[2];\n        d = Math.min(0.5, d);\n      }\n      buf[o] += (mr - buf[o]) * d;\n      buf[o + 1] += (mg - buf[o + 1]) * d;\n      buf[o + 2] += (mb - buf[o + 2]) * d;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n\nfunction drawLog(buf, log) {\n  const ca = Math.cos(log.ang);\n  const sa = Math.sin(log.ang);\n  const len = 5;\n  for (let s = -len; s \u003c= len; s += 0.5) {\n    const x = log.x + ca * s;\n    const y = log.y + sa * s;\n    const end = Math.abs(s) > len - 0.6;\n    for (let w = 0; w \u003c= 1; w++) {\n      const px = Math.round(x - sa * w);\n      const py = Math.round(y + ca * w);\n      if (end) put(buf, px, py, 215, 170, 105);\n      else put(buf, px, py, w === 0 ? 120 : 82, w === 0 ? 72 : 48, w === 0 ? 34 : 22);\n    }\n  }\n}\n","layer":{"id":"layer-waterfall","type":"code","name":"waterfall","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Waterfall\n// Family:  weather\n// Idea:    A river goes over a cliff and falls the whole height of the panel into a plunge pool, glassy where it leaves the lip and white by the time it lands, with spray and mist rising off the pool.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 12\n// Round:   14\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wind=-1..1, Spate=0..1\n//\n// Knob 1: Hue. The colour of the water, the pool and the mist, starting from glacier turquoise; about halfway round it runs red, like Blood Falls in Antarctica.\n// Knob 2: Speed. How fast the world runs: at 2 the water takes 1.6 seconds from the lip to the pool, at the top about 1.1, at the bottom 16, in slow motion.\n// Knob 3: Wind. At 0 the water falls straight; turned either way the wind bends the curtain more the further it has fallen and carries the mist off that way, and near the ends a gale catches the water before it lands and blows it back up as spray, as Kinder Downfall does in a westerly.\n// Knob 4: Spate. How much water the river brings: from a dry-season fall that breaks into threads to a flood nearly as wide as the panel, with spray and mist to match.\n// Buttons: K1 tap sends a log over the lip; it tumbles down, goes under in the pool and comes up drifting away. One also comes by itself now and then.\n\nconst W = 64;\nconst H = 128;\n// The lip the river goes over, the far edge of the pool, and the row where the water lands.\nconst LIP = 21;\nconst POOL = 110;\nconst HIT = 115;\n// Free fall in panel units: rows per second squared, and the speed water leaves the lip at.\n// 94 rows take 1.6 seconds at Speed 2.\nconst G = 59;\nconst V0 = 10;\nconst SPRAY = 220;\n// The value-noise lattice wraps every 256 cells.\nconst LAT = 256;\n// exp(-z) for z from 0 to 8 in steps of 1/32, for the mist's bell curve.\nconst EXP = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) EXP[i] = Math.exp(-i / 32);\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  return [\n    (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255,\n    (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255,\n    (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255,\n  ];\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// The fall's centre column at the lip.\nconst CX = 30;\n\nexport function setup(params) {\n  const lat = new Float32Array(LAT * LAT);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  params.lat = lat;\n  params.bg = new Float32Array(W * H * 3);\n  params.buf = new Float32Array(W * H * 3);\n  // Boulders in front of the pool: their colour, and 1 where they stand.\n  params.front = new Float32Array(W * H * 3);\n  params.frontA = new Float32Array(W * H);\n  params.px = new Float32Array(SPRAY);\n  params.py = new Float32Array(SPRAY);\n  params.pvx = new Float32Array(SPRAY);\n  params.pvy = new Float32Array(SPRAY);\n  params.pfloor = new Float32Array(SPRAY);\n  params.pgrav = new Float32Array(SPRAY);\n  params.page = new Float32Array(SPRAY).fill(9);\n  params.pnext = 0;\n  params.ts = 0;\n  params.started = false;\n  params.spawnDebt = 0;\n  params.galeDebt = 0;\n  params.log = { on: false, t0: 0, x: 0, y: 0, ang: 0, spin: 0, phase: 0, age: 0, drift: 0 };\n  // The first log comes early so the fall shows what it does; then one in a while.\n  params.nextLog = 2.4;\n  params.pal = new Float32Array(9 * 4 * 3);\n  params.dens = new Float32Array(W * H);\n  bakeScene(params);\n}\n\nfunction bakeScene(params) {\n  const bg = params.bg;\n  const lat = params.lat;\n  // Sky: pale at the top of the gorge, a little deeper towards the far ridge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = hsv(0.58, 0.28 + y * 0.006, 0.78 - y * 0.012);\n      const o = (y * W + x) * 3;\n      bg[o] = c[0];\n      bg[o + 1] = c[1];\n      bg[o + 2] = c[2];\n    }\n  // The far ridge, blue with distance.\n  for (let x = 0; x \u003c W; x++) {\n    const top = Math.round(9 + 3 * vn(lat, x / 9, 3.5) + 1.5 * vn(lat, x / 3.5, 9.5));\n    for (let y = top; y \u003c LIP; y++) {\n      const c = hsv(0.5, 0.45, 0.3 + 0.04 * vn(lat, x / 2, y / 2));\n      put(bg, x, y, c[0], c[1], c[2]);\n    }\n  }\n  // The near banks of the river, grass running back to the ridge. The river itself is drawn\n  // every frame, as wide as Spate makes it.\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 13; y \u003c LIP; y++) {\n      const g = 0.13 + 0.015 * (y - 13) + 0.09 * vn(lat, x / 2, y / 1.2 + 40);\n      const c = hsv(0.28, 0.68, g);\n      put(bg, x, y, c[0], c[1], c[2]);\n    }\n\n  // The cliff: beds of rock laid flat, each its own shade, lit on the top and undercut below.\n  const edges = [LIP];\n  while (edges[edges.length - 1] \u003c H + 12) edges.push(edges[edges.length - 1] + 5 + Math.floor(Math.random() * 8));\n  const bedV = edges.map(() => 0.12 + Math.random() * 0.09);\n  const bedH = edges.map(() => (Math.random() \u003c 0.6 ? 0.07 : 0.58));\n  const bedS = edges.map((_, i) => (bedH[i] \u003c 0.3 ? 0.3 : 0.14));\n  for (let y = LIP; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const yy = y + 2.5 * Math.sin(x * 0.07 + 0.5) + 5 * (vn(lat, x / 11, 3.3 + y / 40) - 0.5);\n      let b = 0;\n      while (b \u003c edges.length - 2 && yy >= edges[b + 1]) b++;\n      const thick = edges[b + 1] - edges[b];\n      const frac = (yy - edges[b]) / thick;\n      let v = bedV[b] + (vn(lat, x / 2.5 + b * 17, y / 2.5) - 0.5) * 0.07;\n      if (frac \u003c 0.18) v += 0.06;\n      else if (frac > 0.8) v -= 0.07;\n      // Joints: a dark crack here and there through a bed.\n      if (hash(x * 7 + b, 91) \u003c 0.012 && frac > 0.2 && frac \u003c 0.8) v *= 0.55;\n      // The gorge is lit from above: higher beds catch more sky.\n      v *= 1.25 - 0.45 * (y - LIP) / (H - LIP);\n      let c = hsv(bedH[b], bedS[b], Math.max(0.05, v));\n      // Moss on the tops of the beds, thicker low down where the spray reaches.\n      const wet = Math.max(0, (y - 40) / 80);\n      if (frac \u003c 0.35 && vn(lat, x / 4 + b * 5, y / 2.5 + 80) > 0.68 - wet * 0.22) c = hsv(0.27, 0.7, 0.2 + 0.12 * vn(lat, x / 1.7, y / 1.7 + 120));\n      // The lip overhangs a little, so the rock just under it is in shadow.\n      const under = y - LIP \u003c 3 ? 0.5 + 0.17 * (y - LIP) : 1;\n      put(bg, x, y, c[0] * under, c[1] * under, c[2] * under);\n    }\n\n  // Trees lean over the top of the gorge from both sides.\n  const crowns = [\n    [3, 4, 9],\n    [12, -1, 7],\n    [-2, 19, 8],\n    [8, 14, 6],\n    [57, 3, 8],\n    [49, 0, 6],\n    [64, 17, 9],\n    [55, 13, 6],\n  ];\n  for (const [cx, cy, r] of crowns)\n    for (let y = Math.floor(cy - r); y \u003c= cy + r; y++)\n      for (let x = Math.floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n        const dx = x - cx;\n        const dy = (y - cy) * 1.1;\n        const d = Math.sqrt(dx * dx + dy * dy) / r;\n        if (d > 0.82 + 0.3 * vn(lat, x / 2, y / 2 + 160)) continue;\n        // Lit from above: the upper leaves are lighter.\n        const leaf = vn(lat, x / 1.6 + 30, y / 1.6 + 30);\n        const v = 0.17 + 0.16 * leaf + 0.08 * Math.max(0, -dy / r);\n        const c = hsv(0.29 - 0.04 * leaf, 0.72, v);\n        put(bg, x, y, c[0], c[1], c[2]);\n      }\n\n  // Boulders round the pool, in front of the water.\n  const front = params.front;\n  const fa = params.frontA;\n  const stones = [\n    [4, 124, 11, 9],\n    [16, 128, 7, 5],\n    [59, 125, 10, 8],\n    [47, 129, 6, 5],\n  ];\n  for (const [cx, cy, rx, ry] of stones)\n    for (let y = Math.floor(cy - ry); y \u003c H; y++)\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0) continue;\n        const dx = (x - cx) / rx;\n        const dy = (y - cy) / ry;\n        const d = dx * dx + dy * dy;\n        if (d > 1 + 0.25 * (vn(lat, x / 2, y / 2 + 200) - 0.5)) continue;\n        const top = -dy;\n        let v = 0.12 + 0.12 * Math.max(0, top) + 0.05 * vn(lat, x / 1.8, y / 1.8 + 220);\n        let c = hsv(0.08, 0.22, v);\n        // Moss on the tops, and the waterline dark and wet.\n        if (top > 0.45 && vn(lat, x / 2.5, y / 2.5 + 240) > 0.45) c = hsv(0.27, 0.7, 0.22 + 0.1 * top);\n        if (y > cy + ry * 0.55) {\n          v *= 0.6;\n          c = hsv(0.55, 0.3, v);\n        }\n        const o = (y * W + x) * 3;\n        front[o] = c[0];\n        front[o + 1] = c[1];\n        front[o + 2] = c[2];\n        fa[y * W + x] = 1;\n      }\n}\n\nfunction spawnSpray(params, x, y, vx, vy, grav, floor) {\n  const s = params.pnext;\n  params.pnext = (s + 1) % SPRAY;\n  params.px[s] = x;\n  params.py[s] = y;\n  params.pvx[s] = vx;\n  params.pvy[s] = vy;\n  params.pgrav[s] = grav;\n  params.pfloor[s] = floor;\n  params.page[s] = 0;\n}\n\nfunction stepSpray(params, dts) {\n  for (let i = 0; i \u003c SPRAY; i++) {\n    if (params.page[i] > 3) continue;\n    params.page[i] += dts;\n    params.pvy[i] += G * params.pgrav[i] * dts;\n    params.px[i] += params.pvx[i] * dts;\n    params.py[i] += params.pvy[i] * dts;\n    if (params.py[i] > params.pfloor[i] && params.pvy[i] > 0) params.page[i] = 9;\n  }\n}\n\n// Time for the water to fall d rows from the lip, in world seconds.\nfunction flight(d) {\n  return (-V0 + Math.sqrt(V0 * V0 + 2 * G * d)) / G;\n}\n\n// How much wider the water is d rows below the lip.\nfunction spreadAt(d) {\n  const f = d / 94;\n  return 1 + 0.35 * f + 0.35 * f * f * f;\n}\n\n// How far the wind has carried water that left the lip at u and has been falling tau seconds.\nfunction blown(params, u, tau) {\n  const gust = 1 + 0.9 * (vn(params.lat, u * 0.7, 333.3) - 0.5);\n  return 0.5 * params.wind * 24 * gust * tau * tau;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const speed = Math.max(0.05, k[1]);\n  const dts = (dt * speed) / 2;\n  params.ts += dts;\n  const ts = params.ts;\n  params.hue = k[0] + 0.48;\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const spate = Math.max(0, Math.min(1, k[3]));\n  params.wind = wind;\n  params.spate = spate;\n  // Past about half way the wind is a gale and starts tearing the curtain apart.\n  const gale = Math.max(0, Math.min(1, (Math.abs(wind) - 0.5) / 0.45));\n  params.gale = gale;\n  params.breakAt = 94 * (1 - 0.72 * gale);\n  params.half0 = 6.5 + 14.5 * Math.pow(spate, 0.6);\n  params.hEnd = params.half0 * spreadAt(HIT - LIP);\n  // Columns break into separate threads when the river is low.\n  const low = Math.max(0, 1 - spate / 0.3);\n  params.gap = 0.75 * low * low;\n  params.hitX = CX + blown(params, ts - flight(HIT - LIP), flight(HIT - LIP));\n\n  const rate = (70 + 200 * spate) * (1 - 0.7 * gale);\n  if (!params.started) {\n    params.started = true;\n    // Two seconds of spray, so the pool opens already throwing it.\n    for (let n = 0; n \u003c 60; n++) {\n      spray(params, rate, 1 / 30);\n      stepSpray(params, 1 / 30);\n    }\n  }\n  spray(params, rate, dts);\n  stepSpray(params, dts);\n\n  const log = params.log;\n  params.nextLog -= dts;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if ((pressed || params.nextLog \u003c= 0) && !(log.on && log.phase === 0)) {\n    log.on = true;\n    log.phase = 0;\n    log.t0 = ts;\n    log.ang = Math.random() * Math.PI;\n    log.spin = (Math.random() \u003c 0.5 ? -1 : 1) * (2 + Math.random() * 2.5);\n    log.off = (Math.random() - 0.5) * params.half0;\n    params.nextLog = 20 + Math.random() * 25;\n  }\n  if (log.on) stepLog(params, log, dts);\n}\n\nfunction spray(params, rate, dts) {\n  const wind = params.wind;\n  params.spawnDebt += rate * dts;\n  while (params.spawnDebt >= 1) {\n    params.spawnDebt -= 1;\n    const x = params.hitX + (Math.random() - 0.5) * 1.8 * params.hEnd;\n    spawnSpray(params, x, HIT - 1, (Math.random() - 0.5) * (40 + 30 * params.spate) + wind * 25, -(12 + Math.random() * 40), 1.6, HIT + 1);\n  }\n  // In a gale the torn curtain goes up and away downwind as spray.\n  const gale = params.gale;\n  if (gale > 0) {\n    params.galeDebt += gale * (90 + 120 * params.spate) * dts;\n    while (params.galeDebt >= 1) {\n      params.galeDebt -= 1;\n      const d = params.breakAt + Math.random() * (HIT - LIP - params.breakAt);\n      const tau = flight(d);\n      const x = CX + blown(params, params.ts - tau, tau) + (Math.random() - 0.5) * 2 * params.half0 * spreadAt(d);\n      spawnSpray(params, x, LIP + d, wind * (35 + Math.random() * 45), -(8 + Math.random() * 30) * gale, 0.35, H + 4);\n    }\n  }\n}\n\nfunction stepLog(params, log, dts) {\n  if (log.phase === 0) {\n    log.ang += log.spin * dts;\n    const tau = params.ts - log.t0;\n    const d = V0 * tau + 0.5 * G * tau * tau;\n    log.x = CX + log.off * spreadAt(d) + blown(params, log.t0, tau);\n    log.y = LIP + d;\n    if (log.y >= HIT) {\n      for (let n = 0; n \u003c 34; n++) spawnSpray(params, log.x + (Math.random() - 0.5) * 6, HIT - 1, (Math.random() - 0.5) * 70, -(12 + Math.random() * 40) * 1.5, 1.6, HIT + 1);\n      log.phase = 1;\n      log.age = 0;\n      log.drift = log.x \u003c W / 2 ? -1 : 1;\n      log.y = HIT + 3;\n    }\n  } else {\n    // Under for a moment, then up and away on the current.\n    log.age += dts;\n    log.ang -= Math.sin(log.ang) * Math.cos(log.ang) * dts * 2;\n    log.x += log.drift * (3 + 6 * Math.min(1, log.age / 2)) * dts;\n    log.y = HIT + 4 + Math.min(1, log.age / 2) * 5 + Math.sin(log.age * 3) * 0.6;\n    if (log.x \u003c -8 || log.x > W + 8) log.on = false;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const lat = params.lat;\n  const ts = params.ts;\n  const hue = params.hue;\n  const spate = params.spate;\n  const wind = params.wind;\n  const gale = params.gale;\n  buf.set(params.bg);\n\n  // Water colours: nine levels of brightness by four of saturation.\n  const pal = params.pal;\n  const sats = [0.05, 0.22, 0.42, 0.62];\n  for (let l = 0; l \u003c= 8; l++)\n    for (let s = 0; s \u003c 4; s++) {\n      const c = hsv(hue + (s === 3 ? 0.02 : 0), sats[s], l / 8);\n      const o = (l * 4 + s) * 3;\n      pal[o] = c[0];\n      pal[o + 1] = c[1];\n      pal[o + 2] = c[2];\n    }\n\n  const half0 = params.half0;\n  const gap = params.gap;\n\n  // The river upstream, flowing towards the lip.\n  for (let y = 13; y \u003c LIP; y++) {\n    // Narrower as it runs back towards the ridge.\n    const z = 1 / (0.72 + (0.28 * (y - 13)) / (LIP - 13));\n    const wide = (half0 + 1) / z;\n    for (let x = Math.ceil(CX - wide); x \u003c CX + wide; x++) {\n      const n = vn(lat, ((x - CX) * z) / 2.2 + 300, (y - 13) * z * 0.5 - ts * 2.2);\n      const far = y \u003c 16 ? 1 : 0;\n      const l = (n > 0.7 ? 6 : n > 0.42 ? 4 : 3) - far;\n      const o = (l * 4 + 2) * 3;\n      put(buf, x, y, pal[o], pal[o + 1], pal[o + 2]);\n    }\n  }\n\n  // The falling water. Each pixel reads its texture at the moment that water left the lip,\n  // so a clump keeps its place in the texture and stretches as it speeds up.\n  const breakAt = params.breakAt;\n  for (let y = LIP; y \u003c= HIT; y++) {\n    const d = y - LIP + 0.5;\n    const dn = d / 94;\n    const tau = flight(d);\n    const u = ts - tau;\n    const half = half0 * spreadAt(d);\n    const c = CX + Math.sin(u * 0.9) * 0.8 * dn + blown(params, u, tau);\n    const aer = Math.min(1, d / 75);\n    // Below the break a gale has torn this much of the water away.\n    const torn = d > breakAt ? Math.min(1, (d - breakAt) / 26) * gale * 0.85 : 0;\n    const reach = half + 3 + 6 * dn;\n    const lo = Math.max(0, Math.floor(c - reach));\n    const hi = Math.min(W - 1, Math.ceil(c + reach));\n    // Ragged edges: lumps of water bulge out of each side and travel down with it.\n    const eL = (vn(lat, u * 5 + 17, 11) - 0.5) * (1.5 + 7 * dn);\n    const eR = (vn(lat, u * 5 + 83, 29) - 0.5) * (1.5 + 7 * dn);\n    for (let x = lo; x \u003c= hi; x++) {\n      const off = x + 0.5 - c;\n      const inside = half + (off \u003c 0 ? eL : eR) - Math.abs(off);\n      const o = (y * W + x) * 3;\n      // The rock behind and beside the water is wet and dark.\n      if (inside > -2.5) {\n        buf[o] *= 0.62;\n        buf[o + 1] *= 0.66;\n        buf[o + 2] *= 0.75;\n      }\n      const xr = off / half;\n      const s = xr * half0;\n      if (inside \u003c= 0) {\n        // Drops flung off the edge.\n        if (inside > -2 - 5 * dn && vn(lat, x * 1.37 + 500, u * 13) > 0.8 - 0.1 * dn) {\n          const p = (5 * 4 + 1) * 3;\n          buf[o] = pal[p];\n          buf[o + 1] = pal[p + 1];\n          buf[o + 2] = pal[p + 2];\n        }\n        continue;\n      }\n      const thr = gap * (0.3 + 0.75 * Math.abs(xr));\n      if (thr > 0 && vn(lat, s * 0.45 + 100.5, u * 0.5) \u003c thr) continue;\n      const n1 = vn(lat, s * 0.62 + 3.1, u * 8);\n      const n2 = vn(lat, s * 0.22 + 51.7, u * 2.6);\n      if (torn > 0 && vn(lat, s * 0.8 + 610, u * 4) \u003c torn) continue;\n      let l;\n      let sat;\n      if (n1 * 0.55 + n2 * 0.45 > 0.8 - 0.24 * aer - 0.3 * torn) {\n        l = 7 + (n1 > 0.7 ? 1 : 0);\n        sat = 0;\n      } else {\n        let v = 0.34 + 0.34 * aer + (n1 - 0.5) * (0.35 + 0.2 * aer) + (n2 - 0.5) * 0.5;\n        if (inside \u003c 1) v *= 0.8;\n        l = Math.max(1, Math.min(7, Math.round(v * 8)));\n        // Ragged, so the water pales without a seam across it.\n        const a = aer + (n1 - 0.5) * 0.5;\n        sat = a \u003c 0.35 ? 3 : a \u003c 0.7 ? 2 : 1;\n      }\n      // The curl over the lip catches the sky.\n      if (d \u003c 1.2) {\n        l = 7;\n        sat = 1;\n      } else if (d \u003c 3) {\n        l = Math.max(l, 6);\n        sat = 2;\n      }\n      const p = (l * 4 + sat) * 3;\n      buf[o] = pal[p];\n      buf[o + 1] = pal[p + 1];\n      buf[o + 2] = pal[p + 2];\n    }\n  }\n\n  // The plunge pool: rings running out from where the water lands, foam boiling over it.\n  // What a gale lets through still lands, and churns less.\n  const ci = Math.max(4, Math.min(W - 4, params.hitX));\n  const hEnd = params.hEnd;\n  const boil = 1 - 0.6 * gale;\n  for (let y = POOL; y \u003c H; y++) {\n    const q = (y - POOL) / (H - 1 - POOL);\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - ci;\n      const dy = (y - HIT) * 2.6;\n      const rho = Math.sqrt(dx * dx + dy * dy);\n      let l = 1 + (q > 0.5 ? 1 : 0);\n      let sat = 3;\n      const w = Math.sin(rho * 0.55 - ts * 6 + vn(lat, x / 6 + 900, y / 2) * 2.5);\n      if (w > 0.7 && vn(lat, x / 3 + 950, y + ts * 0.5) > 0.35) l += rho \u003c 40 ? 2 : 1;\n      const churn = Math.exp(-rho / (hEnd * 0.9 + 5)) * (0.5 + 0.9 * vn(lat, dx / 2.5 + 7, ts * 3 + y * 0.7));\n      const scum = Math.exp(-rho / 34) * vn(lat, rho / 3 - ts * 2.2, (dx / (rho + 1)) * 5 + (dy \u003c 0 ? 20 : 40)) * 0.75;\n      const f = (churn + scum) * boil;\n      if (f > 0.62) {\n        l = 8;\n        sat = 0;\n      } else if (f > 0.47) {\n        l = 5;\n        sat = 1;\n      }\n      const p = (l * 4 + sat) * 3;\n      const o = (y * W + x) * 3;\n      buf[o] = pal[p];\n      buf[o + 1] = pal[p + 1];\n      buf[o + 2] = pal[p + 2];\n    }\n  }\n\n  // The log goes in front of the water and behind the boulders and the mist.\n  const log = params.log;\n  if (log.on && !(log.phase === 1 && log.age \u003c 0.7)) drawLog(buf, log);\n\n  const front = params.front;\n  const fa = params.frontA;\n  for (let p = 0; p \u003c W * H; p++) {\n    if (fa[p] === 0) continue;\n    const o = p * 3;\n    buf[o] = front[o];\n    buf[o + 1] = front[o + 1];\n    buf[o + 2] = front[o + 2];\n  }\n\n  {\n    const p = (8 * 4 + 1) * 3;\n    for (let i = 0; i \u003c SPRAY; i++) {\n      if (params.page[i] > 3) continue;\n      put(buf, Math.round(params.px[i]), Math.round(params.py[i]), pal[p], pal[p + 1], pal[p + 2]);\n    }\n  }\n\n  // Mist rises off the pool and leans downwind. The sun is behind us, so a piece of\n  // rainbow stands in it.\n  const dens = params.dens;\n  const yTop = HIT - 80;\n  dens.fill(0, yTop * W);\n  const hs = 24 + 24 * spate + 20 * gale;\n  for (let y = Math.max(yTop, Math.floor(HIT - 4.6 * hs)); y \u003c H; y++) {\n    const h = HIT - y;\n    const fh = h > 0 ? Math.exp(-h / hs) : Math.exp(h / 5);\n    const sig = hEnd + 4 + Math.max(0, h) * 0.5;\n    const inv = 1 / (2 * sig * sig);\n    const mx = ci + wind * Math.max(0, h) * 0.9;\n    const xr = Math.ceil(sig * 2.6);\n    const row = y * W;\n    for (let x = Math.max(0, Math.floor(mx - xr)); x \u003c= Math.min(W - 1, Math.ceil(mx + xr)); x++) {\n      const dx = x + 0.5 - mx;\n      const z = dx * dx * inv * 32;\n      if (z \u003c 256) dens[row + x] += fh * EXP[z | 0];\n    }\n  }\n  const mist = hsv(hue, 0.1, 0.9);\n  const amt = 0.75 + 0.8 * spate;\n  const rcx = ci - 4;\n  const rcy = HIT + 36;\n  const R = 48;\n  for (let y = yTop; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const ds = dens[y * W + x];\n      if (ds \u003c 0.02) continue;\n      const n = vn(lat, x / 11 + 40 - ts * wind * 3, (y + ts * 7) / 11);\n      let d = ds * (0.25 + 1.3 * (n - 0.3)) * amt;\n      if (d \u003c= 0.06) continue;\n      // Four steps of mist: finer steps flicker as it rises.\n      d = Math.min(0.75, Math.round(d * 4) / 4);\n      const o = (y * W + x) * 3;\n      let mr = mist[0];\n      let mg = mist[1];\n      let mb = mist[2];\n      const rx = x + 0.5 - rcx;\n      const ry = y + 0.5 - rcy;\n      const rr = Math.sqrt(rx * rx + ry * ry) - R;\n      if (rr > -4 && rr \u003c 4 && ry \u003c 0) {\n        // Violet inside, red outside, as the primary bow has it.\n        const band = hsv(0.76 * (1 - (rr + 4) / 8), 0.85, 1);\n        mr = band[0];\n        mg = band[1];\n        mb = band[2];\n        d = Math.min(0.5, d);\n      }\n      buf[o] += (mr - buf[o]) * d;\n      buf[o + 1] += (mg - buf[o + 1]) * d;\n      buf[o + 2] += (mb - buf[o + 2]) * d;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n\nfunction drawLog(buf, log) {\n  const ca = Math.cos(log.ang);\n  const sa = Math.sin(log.ang);\n  const len = 5;\n  for (let s = -len; s \u003c= len; s += 0.5) {\n    const x = log.x + ca * s;\n    const y = log.y + sa * s;\n    const end = Math.abs(s) > len - 0.6;\n    for (let w = 0; w \u003c= 1; w++) {\n      const px = Math.round(x - sa * w);\n      const py = Math.round(y + ca * w);\n      if (end) put(buf, px, py, 215, 170, 105);\n      else put(buf, px, py, w === 0 ? 120 : 82, w === 0 ? 72 : 48, w === 0 ? 34 : 22);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Wind=-1..1, Spate=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the water, the pool and the mist, starting from glacier turquoise; about halfway round it runs red, like Blood Falls in Antarctica."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the world runs: at 2 the water takes 1.6 seconds from the lip to the pool, at the top about 1.1, at the bottom 16, in slow motion."},{"name":"Wind","min":-1,"max":1,"about":"At 0 the water falls straight; turned either way the wind bends the curtain more the further it has fallen and carries the mist off that way, and near the ends a gale catches the water before it lands and blows it back up as spray, as Kinder Downfall does in a westerly."},{"name":"Spate","min":0,"max":1,"about":"How much water the river brings: from a dry-season fall that breaks into threads to a flood nearly as wide as the panel, with spray and mist to match."}],"start":[0,2,0,0.06],"measures":{"motion":0.6549,"detail":0.0595,"edges":0.3161,"complexity":1.514,"coverage":0.9639,"colour":0.146,"drift":0.0724},"knobResponse":[0.0442,0.112,0.1828,0.287]},{"slug":"weaver","title":"Weaver","family":"bird","round":22,"note":"강 위로 뻗은 아카시아 가지 끝에서 수컷 마을베짜기새가 둥지를 지어요. 갈대 잎을 찢어 문 초록 띠를 벽에 꿰어 당기면 둥지가 고리에서 둥근 방으로, 다시 아래로 열린 입구로 한 가닥씩 자라고, 묵은 띠는 짚 색으로 바래요. K1 을 누르면 암컷이 날아와 둥지를 살피고, 다 지은 둥지가 퇴짜를 맞으면 수컷이 끊어 강에 떨어뜨리고 새 고리부터 다시 지어요.","idea":"A male village weaver builds his nest at the tip of an acacia twig over a river: he tears green strips off the reeds and threads them in, and the nest grows strand by strand from a ring to a round chamber with a downward entrance while old strips fade to straw.","buttons":"K1 tap calls a female: he hangs under his nest and flutters while she looks it over, and a finished nest she turns down he cuts loose into the river.","code":"// ===== Patternflow pattern =====\n// Title:   Weaver\n// Family:  bird\n// Idea:    A male village weaver builds his nest at the tip of an acacia twig over a river: he tears green strips off the reeds and threads them in, and the nest grows strand by strand from a ring to a round chamber with a downward entrance while old strips fade to straw.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after field photographs of village weaver (Ploceus cucullatus) colonies\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Plumage=0..2, Speed=0.2..3, Nests=3..9, Sky=0..1\n//\n// Knob 1: Plumage. A village weaver at 0, yellow with a black mask and a red eye, over a river; a golden weaver at 1 over a reed bed; a brown-masked baya weaver at 2 over a paddy field, its nests hung from a woven neck with a long tube.\n// Knob 2: Speed. How fast the birds, the wind and the water go: at 2 a strand takes him about eight seconds, there, back and woven in.\n// Knob 3: Nests. Three to nine nests in the tree, his among them. The bigger the colony, the further along his nest is at the start, from a ring with its roof begun to a chamber that wants only its entrance.\n// Knob 4: Sky. Morning at 0 with the sun low on the right, noon at 0.5, evening at 1 with the sun going down on the left.\n// Buttons: K1 tap calls a female: he hangs under his nest and flutters while she looks it over, and a finished nest she turns down he cuts loose into the river.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The far bank, the water, the near bank; his twig's tip and root.\nconst [HOR, WTOP, NEAR, AX, AY, RX, RY] = [89, 95, 121, 37, 38, 40, 19];\nconst { min, max, floor, ceil, round, sin, cos, abs, hypot, pow, atan2, sign, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mixc = (a, b, t) => a.map((v, i) => mix(v, b[i], t));\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every `per` cells.\nfunction vn(x, y, per = 4096) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = ((xi % per) + per) % per, x1 = (x0 + 1) % per, a = hash(x0, yi), b = hash(x1, yi), c = hash(x0, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, yi + 1)) * su * sv;\n}\nconst hx = (s) => s.split(\" \").map((h) => [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)));\n\n// Village, golden, baya: plumage in KEYS order (crown, mask, eye, bill, nape, breast, back, streak,\n// wing, wing edge, tail), the fresh strip, and the nest's tube, neck and chamber radii.\nconst KEYS = \"CKEBNYMmWyT\";\nconst SP = [\n  [hx(\"18140e 100c0a f02418 221c18 b25c1a fcd61c f0ca20 28220c 2e2816 e8ca38 706426 5cb234\"), [5, 0, 9, 8.5]],\n  [hx(\"ffcc18 fa8c12 faf0ba 1e1812 ffc816 ffc610 e4ac10 c49216 a48c1c fcd02c a48a20 82bc38\"), [2, 0, 9.5, 9]],\n  [hx(\"ffd828 482e1a 402616 30241c fad22c f6d040 98703a 5c4226 684e2c d2b476 7c623c 9cc458\"), [15, 5, 7.5, 8.5]],\n];\nconst pal = (a) => Object.fromEntries([...KEYS].map((k, i) => [k, a[i]]).concat([[\"F\", [204, 150, 128]]]));\nconst FPAL = pal(hx(\"b4a04a d8c670 7c4a28 ccae86 b4a04a e8da92 a08a4a 64522e 725e34 c8b472 867240\"));\nconst [STRAW, OLD] = hx(\"ceb874 96805c\");\n\n// The bird facing right: rows, anchor, bill tip.\nconst pose = (s, ax, ay, tx, ty) => ({ rows: s.split(\" \"), ax, ay, tx, ty });\nconst PERCH = pose(\"......CCC .....NCCCC .....NKEKKB ....MMKKKBBB ...MmMYKK ..WWWMYYY .yWWWYYYY TyWWyYYY TT..YYY T...F.F\", 6, 5, 11, 3);\nconst POKE = pose(\". ...MMM ..WWMNCCC .yWWMNCCCC TyWWYMKEKKB TT.YYYKKKBBB T...YYYKK ....F.F\", 5, 4, 11, 5);\nconst FA = pose(\"...yW ...yWW ....yWW..CC TTMMMWWNCCKB ..TYYYYYKEKBB .....YYYYKK\", 6, 4, 12, 4);\nconst flap = (t) => (floor(t / 0.065) & 1 ? FB : FA);\nconst FB = pose(\".........CC TTMMMMMNCCKB ..TYYWWWYKEKBB .....yWWWKK ......yWW .......yW\", 6, 2, 12, 2);\n\n// Morning, noon, evening: sky overhead, at the horizon, the light, the sun.\nconst SKY = [\n  [...hx(\"5480c6 fcc28e\"), [1.08, 0.9, 0.74], 50, 79],\n  [...hx(\"2c72e0 acd6f6\"), [1, 1, 1], 40, -40],\n  [...hx(\"3e3686 ff8442\"), [1.12, 0.74, 0.56], 16, 84],\n];\n// The acacia: limbs as x0, y0, x1, y1, w0, w1, and the flat plates of its crown.\nconst LIMBS = [[6, 25, 24, 18, 3.6, 2.6], [24, 18, 44, 19, 2.6, 2], [44, 19, 63, 14, 2, 1.3], [40, 19, 57, 26, 1.7, 1.2], [57, 26, 64, 31, 1.2, 1], [7, 50, 20, 45, 2.8, 1.7], [20, 45, 28, 49, 1.7, 1]];\nconst PLATES = [[32, 3, 42, 6.5], [6, 11, 13, 5], [48, 10, 20, 4.5], [22, 12, 10, 3], [62, 16, 8, 3]];\n// The rest of the colony: twig tip, twig root, size, which way it faces.\nconst COLONY = [[13, 31, 14, 21, 0.72, -1], [55, 56, 57, 26, 0.8, 1], [19, 64, 19, 47, 0.72, 1], [52, 31, 50, 19, 0.62, -1], [29, 82, 26, 48, 0.62, 1], [61, 84, 62, 30, 0.6, -1], [26, 27, 27, 19, 0.52, 1], [14, 85, 12, 51, 0.58, -1]];\n// The two tall blades he strips: foot, height, lean.\nconst PICK = [[15, 123, 20, 3], [50, 122, 21, -2.5]];\nconst [WEAVE, OUT, TEAR, BACK, SHOW, CUT] = [0, 1, 2, 3, 4, 5];\nconst DUR = [3.2, 1.5, 1.4, 1.7, 1, 1.6];\n\n// A nest as strands in the order they go in, in LEDs from the twig tip, facing right: the neck\n// round the twig, the ring he stands in, the egg chamber from the roof round the back, the front\n// wall down to the entrance, the entrance tube. F says which strand closes each LED of the wall.\nfunction gen([tube, nk, rx, ry], seed, s) {\n  let c = 0;\n  const r = () => hash(seed, c++), S = [], cy = nk + 8, bx = -3, by = cy + 1.5, F = [];\n  const add = (p) => S.push({ p, sh: 0.85 + 0.3 * r() });\n  const arcs = (n, cx, cy, ax, ay, th, f0, keep) => {\n    for (let j = 0; j \u003c n; j++) {\n      const p = [], f = f0 + (1 - f0) * r(), t = th(j) + (r() - 0.5) * 0.7, sw = 1.6 + r(), ox = 2 * r() - 1, oy = 2 * r() - 1;\n      for (let a = -sw / 2; a \u003c sw / 2; a += 0.5 / (ax * f)) {\n        const x = cx + ox + cos(t + a) * ax * f, y = cy + oy + sin(t + a) * ay * f;\n        if (keep(x, y)) p.push(x, y);\n      }\n      add(p);\n    }\n  };\n  const ring = (x, y) => (x / 5) ** 2 + ((y - cy) / 7) ** 2, ball = (x, y) => ((x - bx) / rx) ** 2 + ((y - by) / ry) ** 2;\n  const door = (x, y) => y > cy + 4.5 && abs(x - 2) \u003c 2.5;\n  for (let y = 0; y \u003c nk - 0.5; y += 1.5) {\n    const p = [], w = 1 + y * 0.22;\n    for (let i = 0; i \u003c= 8; i++) p.push(-w + (w * i) / 4, y + i * 0.3);\n    add(p);\n  }\n  for (let i = 0; i \u003c 6; i++) {\n    const p = [], f = 0.9 + 0.2 * r(), a0 = r() * 6.3, sw = 4 + 2 * r();\n    for (let a = 0; a \u003c sw; a += 0.12) p.push(cos(a0 + a) * 5 * f, cy + sin(a0 + a) * 7 * f);\n    add(p);\n  }\n  const pre = S.length;\n  arcs(16, bx, by, rx, ry, (j) => -PI / 2 - (j / 15) * PI * 1.1, 0.45, (x, y) => ball(x, y) \u003c 1);\n  const ch = S.length;\n  arcs(7, 0, cy, 6, 8, (k) => -1.2 + k * 0.42, 0.35, (x, y) => ring(x, y) \u003c 1 && !door(x, y));\n  const fr = S.length, t0 = cy + 5, nt = 2 + round(tube / 2), dy = (tube + 3) / nt;\n  for (let k = 0; k \u003c nt; k++) {\n    const p = [], y = t0 + k * dy, hw = k \u003c 2 ? 4.4 - k : 2.6, c = 2.6 + (y - t0) * 0.08;\n    for (let i = 0; i \u003c= 8; i++) p.push(c - hw + (hw * i) / 4, y + i * 0.28);\n    add(p);\n  }\n  for (let y = 0; y \u003c t0 + tube + 4; y += 1 / s)\n    for (let x = -13; x \u003c 8; x += 1 / s) {\n      const g = ring(x, y), tk = floor((y - t0) / dy), w = (1.5 * PI - atan2((y - by) / ry, (x - bx) / rx)) % (2 * PI);\n      let k = -1;\n      if (y \u003c nk) k = abs(x) \u003c 1 + y * 0.22 ? floor(y / 1.5) : -1;\n      else if (g \u003c 1 && !door(x, y)) k = g > 0.6 ? pre - 6 : ch + cl(round((atan2((y - cy) / 8, x / 6) + 1.2) / 0.42), 0, 6);\n      else if (ball(x, y) \u003c 1 && !door(x, y)) k = pre + min(15, round(w / (PI * 0.0733)));\n      else if (y >= t0 && tk \u003c nt && abs(x - 2.6 - (y - t0) * 0.08) \u003c (tk \u003c 2 ? 4.4 - tk : 2.6)) k = fr + tk;\n      if (k >= 0) F.push(x, y, k + (y > t0 + tube + 1.8) * 1000);\n    }\n  return Object.assign(S, { pre, fr, by, F });\n}\n\n// A nest's point on the panel, swaying on its twig and dipping when a bird lands.\nconst nxy = (n, lx, ly) => [n.x + n.sw * (1 + (ly * n.s) / 20) + lx * n.s * n.face, n.y + n.dip + n.fall + ly * n.s];\n\nfunction build(P) {\n  const { alb, mat } = P;\n  const set = (x, y, m, r, g, b) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, k = 0.8 + 0.3 * vn(x * 0.4, y * 0.8) + 0.1 * hash(x + 7, y);\n    if (y >= NEAR + round(2 * vn(x * 0.2, 4))) set(x, y, 5, 118 * k, 96 * k, 58 * k);\n    else if (y >= WTOP) set(x, y, 4, 0, 0, 0);\n    else if (y >= HOR) set(x, y, 3, 200 * k, 166 * k, 96 * k);\n  }\n  // Flat-topped acacias on the far bank.\n  for (let i = 0; i \u003c 6; i++) {\n    const cx = 12 + i * 10.5 + rnd() * 5, top = HOR - 4 - floor(rnd() * 4), w = 2 + rnd() * 4;\n    for (let y = top; y \u003c top + 2; y++) for (let x = round(cx - w - (y - top) * 1.5); x \u003c= cx + w + (y - top) * 1.5; x++) set(x, y, 6, 44, 60, 50);\n    for (let y = top + 2; y \u003c HOR; y++) set(round(cx), y, 6, 52, 56, 46);\n  }\n  const bark = (x, y, e, k = (0.72 + 0.4 * vn(x * 0.8, y * 0.16)) * (1.1 - 0.45 * e * e) * (e > 0.3 ? 1.12 : 1)) => set(x, y, 1, 112 * k, 94 * k, 76 * k);\n  for (let y = 10; y \u003c H; y++) for (let c = 5.5 + 1.8 * sin(y * 0.03 + 0.5), w = 2 + (y / H) * 2.2, x = floor(c - w); x \u003c= c + w; x++) bark(x, y, (x - c) / w);\n  for (const [x0, y0, x1, y1, w0, w1] of LIMBS)\n    for (let i = 0, n = ceil(hypot(x1 - x0, y1 - y0) * 2); i \u003c= n; i++) {\n      const f = i / n, x = mix(x0, x1, f), y = mix(y0, y1, f), w = mix(w0, w1, f);\n      for (let dy = -w / 2; dy \u003c= w / 2; dy += 0.5) bark(round(x), round(y + dy), (-2 * dy) / w);\n    }\n  for (const [cx, cy, rx, ry] of PLATES)\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const d = ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2, n = vn(x * 0.35, y * 0.5 + 20) * 0.7 + vn(x * 0.9, y * 1.1) * 0.3;\n        const k = 0.55 + 0.6 * n + (y \u003c cy - ry * 0.3 ? 0.28 : 0) - (y > cy + ry * 0.35 ? 0.2 : 0);\n        if (d \u003c 1 && n > 0.25 + 0.4 * d) set(x, y, 2, 80 * k, 118 * k, 44 * k);\n      }\n  // Reeds at the water's edge, and more out in a reed bed.\n  P.reeds = Array.from({ length: 40 }, (_, i) =>\n    i \u003c 12 ? [(i & 1 ? 44 : 10) + (i >> 1) * 2.4 + rnd() * 2, NEAR + 1, 12 + floor(rnd() * 9), rnd() * 7, i % 3 === 0] : [3 + rnd() * 60, WTOP + 4 + floor(rnd() * 20), 7 + floor(rnd() * 9), rnd() * 7, i % 2 === 0]);\n  P.shad = Float32Array.from({ length: 128 }, (_, i) => sm(1 - abs(i - 34) / 26) + 0.7 * sm(1 - abs(i - 96) / 16));\n  P.cloud = Float32Array.from({ length: 128 * 36 }, (_, i, x = i & 127, y = i >> 7) => sm((vn(x / 16, y / 4, 8) * 0.65 + vn(x / 7, y / 2.5 + 9, 128 / 7) * 0.35 - 0.5) * 3) * sm(1 - abs(y - 16) / 18));\n}\n\n// The sky for the hour, and the water and paddy that reflect it.\nfunction paint(P) {\n  const f = P.sk * 2, i = min(1, floor(f)), [top, hor, tint, sx, sy] = SKY[i].map((v, c) => (v.map ? mixc(v, SKY[i + 1][c], f - i) : mix(v, SKY[i + 1][c], f - i)));\n  const { alb, mat, bg, wet, rice } = P, G = [70, 160, 44];\n  Object.assign(P, { hor, tint, sx, sun: cl(1 - abs(sy - 70) / 60, 0, 1) });\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, m = mat[p], o = p * 3, ds = hypot(x - sx, (y - sy) * 1.2), z = (y - WTOP) / (NEAR - WTOP), row = (y - WTOP + 2) ** 0.7 * 1.6;\n    const band = m === 4 && row % 1 \u003c 0.42 && hash(x, floor(row)) > 0.15 ? rice : 0;\n    wet[p] = m === 4 ? 1 - band : 0;\n    for (let c = 0, a; c \u003c 3; c++)\n      (a = alb[o + c] * tint[c]),\n        (bg[o + c] =\n          m === 0 ? mix(top[c], hor[c], pow(y / HOR, 1.5)) + (sy > 0 ? (ds \u003c 3.2 ? 255 : 120 * Math.exp(-ds / 9)) : 0)\n          : m === 4 ? mix(mix(hor[c], top[c], 0.3 + 0.5 * z) * (0.8 - 0.2 * z), G[c] * tint[c] * (0.8 + 0.4 * hash(x, y)), band)\n          : m === 3 || m === 6 ? mix(a, hor[c], m === 6 ? 0.4 : 0.22)\n          : a);\n  }\n}\n\nfunction species(P, s) {\n  const i = min(1, floor(s)), f = s - i, [c0, q0] = SP[i], [c1, q1] = SP[i + 1], v = c0.map((c, j) => mixc(c, c1[j], f)), M = P.main;\n  Object.assign(P, { pal: pal(v), fresh: v[11], rice: cl(s - 1, 0, 1), reedN: 12 + round(28 * (1 - abs(s - 1))) });\n  for (const n of [M, ...P.col]) n.S = gen(mixc(q0, q1, f), n.seed, n.s);\n  M.nb = min(M.nb, M.S.length);\n}\n\nconst nest = (x, y, rx, ry, s, face, seed) => ({ x, y, rx, ry, s, face, seed, nb: 0, age: [], sw: 0, dip: 0, dv: 0, fall: 0, ph: rnd() * 7 });\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), wet: F(N), sp: -1, sk: -1, t: 0, fs: 0, side: 0, spt: 9 });\n  P.main = nest(AX, AY, RX, RY, 1.3, 1, 7);\n  P.col = COLONY.map((c, i) => Object.assign(nest(...c, 101 + i * 37), { old: (i * 0.37) % 1, fresh: i === 2 }));\n  build(P);\n}\n\n// Where he clings to weave strand j at reveal u: outside the wall, facing it.\nfunction wpos(P, j, u) {\n  const M = P.main, p = M.S[min(j, M.S.length - 1)].p, i = min(p.length - 2, floor((u * p.length) / 2) * 2);\n  const [x, y] = nxy(M, p[i], p[i + 1]), [cx, cy] = nxy(M, -2, M.S.by), l = hypot(x - cx, y - cy) || 1, dx = (x - cx) / l, dy = (y - cy) / l;\n  return [x + dx * 4.5, y + dy * 4.5 + (dy > 0.55 ? 1 : -1), dx > 0 ? -1 : 1, dy > 0.55];\n}\nfunction bladeTip(P, k) {\n  const [bx, by, h, lean] = PICK[k], b = P.bend[k];\n  return [bx + lean + sin(P.t * 1.3 + k * 2) * 0.8 + b * sign(lean) * 0.8, by - h + b];\n}\n\nfunction stepMale(P, d) {\n  const M = P.main, held = P.fs && P.fs \u003c 4;\n  let u = (P.bt += d) / DUR[P.bs];\n  const go = (s) => ((P.bs = s), (P.bt = 0), (P.x0 = P.bx), (P.y0 = P.by));\n  const fly = ([tx, ty], arc) => ([P.face, P.bx, P.by, P.pose, P.hang] = [tx >= P.x0 ? 1 : -1, mix(P.x0, tx, sm(u)), mix(P.y0, ty, sm(u)) - arc * sin(PI * u), flap(P.bt), false]);\n  P.show = false;\n  if (held && !P.bs) (P.bt -= d), (P.show = true), (u = -1);\n  switch (P.bs) {\n    case WEAVE: {\n      if (u \u003c 0) break;\n      // Five passes, each a push through the wall and a tug that pulls it tight and shakes the twig.\n      const k = cl(u, 0, 1) * 5, q = floor(k), f = k - q, rv = min(1, (q + sm(f * 2.5)) / 5);\n      [P.bx, P.by, P.face, P.hang] = wpos(P, M.nb, rv);\n      [P.rev, P.pose, P.strip] = [rv, f \u003c 0.42 ? POKE : PERCH, (1 - rv) * 13];\n      if (f >= 0.42 && !P.tug) M.dv += 5;\n      P.tug = f >= 0.42;\n      if (u >= 1) (M.age[M.nb++] = P.t), (P.rev = P.strip = 0), go(M.nb >= M.S.length ? SHOW : OUT);\n      break;\n    }\n    case OUT:\n      P.tip = bladeTip(P, P.side);\n      fly([P.tip[0], P.tip[1] - 4], 5);\n      if (u >= 1) go(TEAR);\n      break;\n    case TEAR: {\n      // Bite low on the blade and back off up it, tearing a strip.\n      const t = bladeTip(P, P.side), e = sm((u - 0.25) / 0.6), fc = PICK[P.side][3] > 0 ? -1 : 1;\n      P.bend[P.side] = min(3, P.bend[P.side] + d * 12);\n      [P.face, P.pose, P.hang, P.bx, P.by] = [fc, u \u003c 0.25 || (u > 0.5 && u \u003c 0.6) ? POKE : PERCH, false, t[0] - fc * 3 * e, t[1] - 4 - 2 * e];\n      P.tear = u > 0.2 && u \u003c 0.88 ? [t[0] + fc * 3, t[1] + 6] : null;\n      if (u >= 1) (P.tear = null), (P.strip = 13), go(BACK), (P.side ^= 1);\n      break;\n    }\n    case BACK:\n      fly(wpos(P, M.nb, 0), 6);\n      if (u >= 1) (M.dv += 16), go(WEAVE);\n      break;\n    case SHOW:\n      P.show = true;\n      if (!P.fs && P.bt > 0.8) callFemale(P);\n      if (P.reject) (P.reject = false), go(CUT);\n      break;\n    case CUT: {\n      const [x, y] = nxy(M, 0, 0);\n      [P.bx, P.by, P.face, P.hang, P.pose] = [x - 3, y - 3, 1, false, floor(P.bt / 0.2) & 1 ? POKE : PERCH];\n      if (u >= 1) (M.fv = -10), (M.fall = 0.01), (M.dv -= 20), go(OUT);\n    }\n  }\n  if (P.bs !== TEAR) P.bend = P.bend.map((b) => max(0, b - d * 8));\n}\n\nfunction callFemale(P) {\n  if (!P.fs) Object.assign(P, { fs: 1, ft: 0, fx0: 70, fy0: 30 + rnd() * 20 });\n}\nfunction stepFemale(P, d) {\n  const M = P.main, done = M.nb >= M.S.length, [rx, ry] = nxy(M, -3, M.S.by - 8.5).map((v, i) => v - 1 - 4 * i), u = (P.ft += d) / [1, 1.8, 3.4, 1, 1.8][P.fs];\n  const go = (s) => ((P.fs = s), (P.ft = 0), (P.fx0 = P.fx), (P.fy0 = P.fy));\n  if (P.fs === 1 || P.fs === 4) {\n    const [tx, ty] = P.fs === 1 ? [rx, ry] : [-12, 24];\n    [P.fx, P.fy, P.ff, P.fp] = [mix(P.fx0, tx, sm(u)), mix(P.fy0, ty, sm(u)) - 5 * sin(PI * u), tx > P.fx0 ? 1 : -1, flap(P.ft)];\n    if (P.fs === 1 && u >= 1) (M.dv += 10), go(2);\n    if (P.fs === 4 && u >= 1) (P.fs = 0), (P.reject = done);\n  } else {\n    [P.fx, P.fy, P.ff, P.fp] = [rx, ry, floor(P.ft / 0.9) & 1 ? 1 : -1, floor(P.ft / 0.45) % 3 === 1 ? POKE : PERCH];\n    if (u >= 1) go(4);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 3, 0.06], sp = cl(k[0], 0, 2), sk = cl(k[3], 0, 1), nn = cl(k[2], 3, 9), M = P.main;\n  if (abs(sp - P.sp) > 0.004) (P.sp = sp), species(P, sp), (P.sk = -1);\n  if (abs(sk - P.sk) > 0.002) (P.sk = sk), paint(P);\n  P.nn = round(nn) - 1;\n  if (!P.bend) {\n    // Start halfway through a strand.\n    M.nb = min(M.S.length - 1, M.S.pre + 3 + round(((nn - 3) / 6) * (M.S.fr - M.S.pre - 3)));\n    for (let j = 0; j \u003c M.nb; j++) M.age[j] = -(M.nb - j) * 7.8;\n    Object.assign(P, { bs: WEAVE, bt: 1.4, rev: 0, strip: 0, bend: [0, 0] });\n  }\n  if (input.btnPressed?.[0]) callFemale(P);\n  const d = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  P.t += d;\n  for (const n of [M, ...P.col]) {\n    n.sw = (0.55 * sin(P.t * 0.9 + n.ph) + 0.3 * sin(P.t * 2.3 + n.ph * 2)) * (1.4 - n.s * 0.4);\n    n.dv += (-70 * n.dip - 5 * n.dv) * d;\n    n.dip = cl(n.dip + n.dv * d, -3, 4);\n  }\n  if (M.fall) {\n    M.fall += (M.fv += 90 * d) * d;\n    if (M.y + M.fall > WTOP + 2) (P.spx = M.x - 2), (P.spt = 0), (M.fall = M.nb = 0), (M.seed += 11), species(P, P.sp);\n  }\n  stepMale(P, d);\n  if (P.fs) stepFemale(P, d);\n  P.spt += d;\n}\n\nlet BUF, TT;\nfunction Ao(o, r, g, b, a = 1) {\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nconst A = (x, y, r, g, b, a) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && Ao((y * W + x) * 3, r, g, b, a);\nconst AL = (x, y, c, k = 1) => A(x, y, c[0] * k * TT[0], c[1] * k * TT[1], c[2] * k * TT[2]);\n\n// Flipped, he hangs upside down; turned, he hangs head down with his wings going.\nfunction drawBird(S, pl, x0, y0, face, flip, turn) {\n  const ox = round(x0), oy = round(y0);\n  S.rows.forEach((row, r) =>\n    [...row].forEach((ch, c, _, col = ch === \"M\" && (c + r) & 1 ? pl.m : pl[ch]) => col && (turn ? AL(ox + (r - S.ay) * face, oy + c - S.ax, col) : AL(ox + (c - S.ax) * face, oy + (flip ? S.ay - r : r - S.ay), col))),\n  );\n  return [ox + (S.tx - S.ax) * face, oy + (flip ? S.ay - S.ty : S.ty - S.ay)];\n}\n\n// A strip of grass from the bill: trailing in flight, hanging while he weaves.\nfunction strip(P, [x, y], len, face, flying) {\n  let a = flying ? (face > 0 ? PI * 0.9 : PI * 0.1) : PI / 2 - face * 0.6;\n  const tg = flying ? a : PI / 2;\n  for (let i = 0; i \u003c len; i++) {\n    a += (tg - a) * 0.15 + 0.12 * sin(P.t * 9 + i * 0.8);\n    AL(round((x += cos(a))), round((y += sin(a))), P.fresh, 1.1 + 0.15 * sin(i));\n  }\n}\n\nfunction drawNest(P, n, nb, rev, light) {\n  const S = n.S, F = S.F, sd = (P.sx > 32 ? 1 : -1) * n.face, { x: nx, s, face, sw } = n, ny = n.y + n.dip + n.fall, lim = min(nb, S.length - 1), C = [];\n  for (let j = 0; j \u003c= lim; j++) {\n    C[j] = (n.fresh ? mixc(P.fresh, STRAW, (0.7 * (nb - j)) / 12) : n.old >= 0 ? mixc(STRAW, OLD, n.old) : mixc(P.fresh, STRAW, sm((P.t - (n.age[j] ?? P.t)) / 45))).map((v, c) => v * TT[c]);\n  }\n  const lit = (lx, ly) => 0.84 + 0.16 * cl((lx * sd) / 9 - (ly - S.by) / 20, -1, 1), at = (lx, ly) => [round(nx + sw * (1 + (ly * s) / 20) + lx * s * face), round(ny + ly * s)];\n  n.low = -99;\n  for (let i = 0; i \u003c F.length; i += 3) {\n    const k = F[i + 2] % 1000, lx = F[i], ly = F[i + 1];\n    if (k > lim || (k === nb && rev \u003c 0.7)) continue;\n    // The wall behind the strands: straw in slanting runs, the entrance mouth dark.\n    const [xi, yi] = at(lx, ly), c = C[k], q = F[i + 2] > 999 ? 0.15 : light * lit(lx, ly) * (0.68 + 0.1 * hash(i, 5) + 0.12 * sin((lx * 0.8 + ly) * 2.2 + 1.5 * sin(lx * 0.5 - ly * 0.3)));\n    A(xi, yi, c[0] * q, c[1] * q, c[2] * q);\n    if (yi > n.low) [n.low, n.lowx] = [yi, xi];\n  }\n  for (let j = 0; j \u003c= lim; j++) {\n    const p = S[j].p, m = j \u003c nb ? p.length : floor((rev * p.length) / 2) * 2, k0 = light * S[j].sh, [cr, cg, cb] = C[j];\n    for (let i = 0; i \u003c m; i += 2) {\n      const [xi, yi] = at(p[i], p[i + 1]), k = k0 * (lit(p[i], p[i + 1]) + ((i >> 2) & 1 ? 0.1 : -0.08));\n      A(xi, yi + 1, cr * 0.3, cg * 0.3, cb * 0.3, 0.3);\n      A(xi, yi, cr * k, cg * k, cb * k);\n    }\n  }\n}\n\nfunction twig(n) {\n  const [tx, ty] = nxy(n, 0, 0);\n  for (let i = 0, L = ceil(hypot(tx - n.rx, ty - n.ry) * 1.3); i \u003c= L; i++) AL(round(mix(n.rx, tx, i / L) + 1.5 * sin((PI * i) / L) * n.face), round(mix(n.ry, ty, i / L)), [96, 80, 64]);\n}\n\nfunction sky(P) {\n  // Clouds drift behind the tree; the crown flickers in the wind.\n  const { buf, mat, wet, t, sun } = P, off = t * 3, CT = P.cloud, cc = P.hor.map((v) => mix(v, 255, 0.55));\n  for (let p = 15 * W; p \u003c 86 * W; p++)\n    if (!mat[p]) {\n      const x = (p & 63) + off, x0 = floor(x), f = x - x0, r = ((p >> 7) - 7) * 128;\n      Ao(p * 3, cc[0], cc[1], cc[2], (CT[r + (x0 & 127)] * (1 - f) + CT[r + ((x0 + 1) & 127)] * f) * 0.8);\n    }\n  for (let p = 0; p \u003c 22 * W; p++) if (mat[p] === 2) for (let c = 0, s = 0.8 + 0.45 * CT[((p >> 6) + 8) * 128 + (((p & 63) + floor(t * 6)) & 127)]; c \u003c 3; c++) buf[p * 3 + c] *= s;\n  // Ripples on the water, and the sun's road across it.\n  for (let p = WTOP * W; p \u003c (NEAR + 2) * W; p++) {\n    if (!wet[p]) continue;\n    const x = p & 63, y = p >> 6, z = (y - WTOP) / 26, rp = sin(y * 1.9 + 2.4 * sin(x * 0.2 + t * 0.7 + y * 0.3) - t * 1.6), o = p * 3;\n    const g = rp > 0.75 ? cl((0.4 + 1.6 * sun * cl(1 - abs(x - P.sx) / (3 + 9 * z), 0, 1)) * wet[p], 0, 1) * 0.7 : 0;\n    for (let c = 0; c \u003c 3; c++) buf[o + c] = mix(buf[o + c] * (1 + 0.1 * rp * wet[p]), [255, 236, 190][c], g);\n  }\n  for (let r = P.spt * 9, x = floor(P.spx - r); P.spt \u003c 2.5 && x \u003c= P.spx + r; x++) A(x, round(WTOP + 2 + 0.2 * r * (1 - ((x - P.spx) / r) ** 2)), 240, 244, 240, 0.8 - P.spt * 0.3);\n}\n\nfunction reeds(P) {\n  for (let i = 0; i \u003c P.reedN; i++) {\n    const [rx, ry, h, ph, plume] = P.reeds[i], lean = sin(P.t * 1.4 + ph) * 0.8 + (i & 1 ? 1 : -1);\n    for (let j = 0; j \u003c h; j++) {\n      const x = round(rx + lean * (j / h) ** 2), k = 0.7 + (0.5 * j) / h;\n      AL(x, ry - j, [84, 140, 50], k);\n      if (j === round(h * 0.4) || j === round(h * 0.7)) for (let e = 1, sd = (j + i) & 1 ? 1 : -1; e \u003c 4; e++) AL(x + sd * e, ry - j - (e >> 1), [96, 156, 56], k);\n    }\n    if (plume) for (let j = 0; j \u003c 4; j++) AL(round(rx + lean) + (j & 1), ry - h - j, [160, 112, 74]);\n  }\n  for (let k = 0; k \u003c 2; k++) {\n    const [bx, by, h, lean] = PICK[k], [tx, ty] = bladeTip(P, k);\n    for (let j = 0; j \u003c= h; j++) {\n      const f = j / h, x = round(mix(bx, tx, f * f)), y = round(mix(by, ty, f));\n      AL(x, y, [96, 168, 56], 0.7 + 0.5 * f);\n      if (j % 4 === 2) AL(x - sign(lean) * (1 + (j & 4 ? 1 : 0)), y + 1, [80, 150, 50], 0.8);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, t, pal: pl, mat, shad } = P, M = P.main;\n  [BUF, TT] = [buf, P.tint];\n  buf.set(P.bg);\n  sky(P);\n  reeds(P);\n  // The colony; its males hang under their nests and flutter, sit on top, or are away.\n  for (let i = 0; i \u003c P.nn; i++) {\n    const n = P.col[i], c = (t * 0.06 + n.ph * 0.3) % 1, [x, y] = nxy(n, 2 * n.face, n.S.by + 3);\n    twig(n);\n    drawNest(P, n, n.fresh ? 10 : n.S.length, 0, 0.85);\n    if (n.fresh) drawBird(floor(t / 0.5) & 1 ? POKE : PERCH, pl, x + 5 * n.face, y - 3, -n.face);\n    else if (i % 3 !== 2) c \u003c 0.35 ? drawBird(flap(t), pl, n.lowx, n.low + 7, n.face, false, true) : c \u003c 0.55 && drawBird(PERCH, pl, ...nxy(n, -3, -3 / n.s), -n.face);\n  }\n  twig(M);\n  drawNest(P, M, M.nb, P.bs === WEAVE ? P.rev : 0, 1);\n  if (P.fs) drawBird(P.fp || FA, FPAL, P.fx, P.fy, P.ff);\n  if (P.show) drawBird(flap(t), pl, M.lowx, M.low + 7, 1, false, true);\n  else {\n    const tip = drawBird(P.pose, pl, P.bx, P.by, P.face, P.hang);\n    if (P.strip > 0.5) strip(P, tip, round(P.strip), P.face, P.bs === OUT || P.bs === BACK);\n    for (let i = 0; P.tear && i \u003c= 8; i++) AL(round(mix(tip[0], P.tear[0], i / 8)), round(mix(tip[1], P.tear[1], i / 8)), P.fresh, 1.1);\n  }\n  // Out to the panel, under the shadows of the passing clouds.\n  for (let p = 0, o = 0, so = floor(t * 3); p \u003c N; p++, o += 3) {\n    const s = mat[p] ? 1 - 0.4 * shad[((p & 63) + so - (p >> 7)) & 127] : 1;\n    display.setPixel(p & 63, p >> 6, cl(buf[o] * s, 0, 255), cl(buf[o + 1] * s, 0, 255), cl(buf[o + 2] * s, 0, 255));\n  }\n}\n","layer":{"id":"layer-weaver","type":"code","name":"weaver","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Weaver\n// Family:  bird\n// Idea:    A male village weaver builds his nest at the tip of an acacia twig over a river: he tears green strips off the reeds and threads them in, and the nest grows strand by strand from a ring to a round chamber with a downward entrance while old strips fade to straw.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after field photographs of village weaver (Ploceus cucullatus) colonies\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Plumage=0..2, Speed=0.2..3, Nests=3..9, Sky=0..1\n//\n// Knob 1: Plumage. A village weaver at 0, yellow with a black mask and a red eye, over a river; a golden weaver at 1 over a reed bed; a brown-masked baya weaver at 2 over a paddy field, its nests hung from a woven neck with a long tube.\n// Knob 2: Speed. How fast the birds, the wind and the water go: at 2 a strand takes him about eight seconds, there, back and woven in.\n// Knob 3: Nests. Three to nine nests in the tree, his among them. The bigger the colony, the further along his nest is at the start, from a ring with its roof begun to a chamber that wants only its entrance.\n// Knob 4: Sky. Morning at 0 with the sun low on the right, noon at 0.5, evening at 1 with the sun going down on the left.\n// Buttons: K1 tap calls a female: he hangs under his nest and flutters while she looks it over, and a finished nest she turns down he cuts loose into the river.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The far bank, the water, the near bank; his twig's tip and root.\nconst [HOR, WTOP, NEAR, AX, AY, RX, RY] = [89, 95, 121, 37, 38, 40, 19];\nconst { min, max, floor, ceil, round, sin, cos, abs, hypot, pow, atan2, sign, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mixc = (a, b, t) => a.map((v, i) => mix(v, b[i], t));\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every `per` cells.\nfunction vn(x, y, per = 4096) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = ((xi % per) + per) % per, x1 = (x0 + 1) % per, a = hash(x0, yi), b = hash(x1, yi), c = hash(x0, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, yi + 1)) * su * sv;\n}\nconst hx = (s) => s.split(\" \").map((h) => [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)));\n\n// Village, golden, baya: plumage in KEYS order (crown, mask, eye, bill, nape, breast, back, streak,\n// wing, wing edge, tail), the fresh strip, and the nest's tube, neck and chamber radii.\nconst KEYS = \"CKEBNYMmWyT\";\nconst SP = [\n  [hx(\"18140e 100c0a f02418 221c18 b25c1a fcd61c f0ca20 28220c 2e2816 e8ca38 706426 5cb234\"), [5, 0, 9, 8.5]],\n  [hx(\"ffcc18 fa8c12 faf0ba 1e1812 ffc816 ffc610 e4ac10 c49216 a48c1c fcd02c a48a20 82bc38\"), [2, 0, 9.5, 9]],\n  [hx(\"ffd828 482e1a 402616 30241c fad22c f6d040 98703a 5c4226 684e2c d2b476 7c623c 9cc458\"), [15, 5, 7.5, 8.5]],\n];\nconst pal = (a) => Object.fromEntries([...KEYS].map((k, i) => [k, a[i]]).concat([[\"F\", [204, 150, 128]]]));\nconst FPAL = pal(hx(\"b4a04a d8c670 7c4a28 ccae86 b4a04a e8da92 a08a4a 64522e 725e34 c8b472 867240\"));\nconst [STRAW, OLD] = hx(\"ceb874 96805c\");\n\n// The bird facing right: rows, anchor, bill tip.\nconst pose = (s, ax, ay, tx, ty) => ({ rows: s.split(\" \"), ax, ay, tx, ty });\nconst PERCH = pose(\"......CCC .....NCCCC .....NKEKKB ....MMKKKBBB ...MmMYKK ..WWWMYYY .yWWWYYYY TyWWyYYY TT..YYY T...F.F\", 6, 5, 11, 3);\nconst POKE = pose(\". ...MMM ..WWMNCCC .yWWMNCCCC TyWWYMKEKKB TT.YYYKKKBBB T...YYYKK ....F.F\", 5, 4, 11, 5);\nconst FA = pose(\"...yW ...yWW ....yWW..CC TTMMMWWNCCKB ..TYYYYYKEKBB .....YYYYKK\", 6, 4, 12, 4);\nconst flap = (t) => (floor(t / 0.065) & 1 ? FB : FA);\nconst FB = pose(\".........CC TTMMMMMNCCKB ..TYYWWWYKEKBB .....yWWWKK ......yWW .......yW\", 6, 2, 12, 2);\n\n// Morning, noon, evening: sky overhead, at the horizon, the light, the sun.\nconst SKY = [\n  [...hx(\"5480c6 fcc28e\"), [1.08, 0.9, 0.74], 50, 79],\n  [...hx(\"2c72e0 acd6f6\"), [1, 1, 1], 40, -40],\n  [...hx(\"3e3686 ff8442\"), [1.12, 0.74, 0.56], 16, 84],\n];\n// The acacia: limbs as x0, y0, x1, y1, w0, w1, and the flat plates of its crown.\nconst LIMBS = [[6, 25, 24, 18, 3.6, 2.6], [24, 18, 44, 19, 2.6, 2], [44, 19, 63, 14, 2, 1.3], [40, 19, 57, 26, 1.7, 1.2], [57, 26, 64, 31, 1.2, 1], [7, 50, 20, 45, 2.8, 1.7], [20, 45, 28, 49, 1.7, 1]];\nconst PLATES = [[32, 3, 42, 6.5], [6, 11, 13, 5], [48, 10, 20, 4.5], [22, 12, 10, 3], [62, 16, 8, 3]];\n// The rest of the colony: twig tip, twig root, size, which way it faces.\nconst COLONY = [[13, 31, 14, 21, 0.72, -1], [55, 56, 57, 26, 0.8, 1], [19, 64, 19, 47, 0.72, 1], [52, 31, 50, 19, 0.62, -1], [29, 82, 26, 48, 0.62, 1], [61, 84, 62, 30, 0.6, -1], [26, 27, 27, 19, 0.52, 1], [14, 85, 12, 51, 0.58, -1]];\n// The two tall blades he strips: foot, height, lean.\nconst PICK = [[15, 123, 20, 3], [50, 122, 21, -2.5]];\nconst [WEAVE, OUT, TEAR, BACK, SHOW, CUT] = [0, 1, 2, 3, 4, 5];\nconst DUR = [3.2, 1.5, 1.4, 1.7, 1, 1.6];\n\n// A nest as strands in the order they go in, in LEDs from the twig tip, facing right: the neck\n// round the twig, the ring he stands in, the egg chamber from the roof round the back, the front\n// wall down to the entrance, the entrance tube. F says which strand closes each LED of the wall.\nfunction gen([tube, nk, rx, ry], seed, s) {\n  let c = 0;\n  const r = () => hash(seed, c++), S = [], cy = nk + 8, bx = -3, by = cy + 1.5, F = [];\n  const add = (p) => S.push({ p, sh: 0.85 + 0.3 * r() });\n  const arcs = (n, cx, cy, ax, ay, th, f0, keep) => {\n    for (let j = 0; j \u003c n; j++) {\n      const p = [], f = f0 + (1 - f0) * r(), t = th(j) + (r() - 0.5) * 0.7, sw = 1.6 + r(), ox = 2 * r() - 1, oy = 2 * r() - 1;\n      for (let a = -sw / 2; a \u003c sw / 2; a += 0.5 / (ax * f)) {\n        const x = cx + ox + cos(t + a) * ax * f, y = cy + oy + sin(t + a) * ay * f;\n        if (keep(x, y)) p.push(x, y);\n      }\n      add(p);\n    }\n  };\n  const ring = (x, y) => (x / 5) ** 2 + ((y - cy) / 7) ** 2, ball = (x, y) => ((x - bx) / rx) ** 2 + ((y - by) / ry) ** 2;\n  const door = (x, y) => y > cy + 4.5 && abs(x - 2) \u003c 2.5;\n  for (let y = 0; y \u003c nk - 0.5; y += 1.5) {\n    const p = [], w = 1 + y * 0.22;\n    for (let i = 0; i \u003c= 8; i++) p.push(-w + (w * i) / 4, y + i * 0.3);\n    add(p);\n  }\n  for (let i = 0; i \u003c 6; i++) {\n    const p = [], f = 0.9 + 0.2 * r(), a0 = r() * 6.3, sw = 4 + 2 * r();\n    for (let a = 0; a \u003c sw; a += 0.12) p.push(cos(a0 + a) * 5 * f, cy + sin(a0 + a) * 7 * f);\n    add(p);\n  }\n  const pre = S.length;\n  arcs(16, bx, by, rx, ry, (j) => -PI / 2 - (j / 15) * PI * 1.1, 0.45, (x, y) => ball(x, y) \u003c 1);\n  const ch = S.length;\n  arcs(7, 0, cy, 6, 8, (k) => -1.2 + k * 0.42, 0.35, (x, y) => ring(x, y) \u003c 1 && !door(x, y));\n  const fr = S.length, t0 = cy + 5, nt = 2 + round(tube / 2), dy = (tube + 3) / nt;\n  for (let k = 0; k \u003c nt; k++) {\n    const p = [], y = t0 + k * dy, hw = k \u003c 2 ? 4.4 - k : 2.6, c = 2.6 + (y - t0) * 0.08;\n    for (let i = 0; i \u003c= 8; i++) p.push(c - hw + (hw * i) / 4, y + i * 0.28);\n    add(p);\n  }\n  for (let y = 0; y \u003c t0 + tube + 4; y += 1 / s)\n    for (let x = -13; x \u003c 8; x += 1 / s) {\n      const g = ring(x, y), tk = floor((y - t0) / dy), w = (1.5 * PI - atan2((y - by) / ry, (x - bx) / rx)) % (2 * PI);\n      let k = -1;\n      if (y \u003c nk) k = abs(x) \u003c 1 + y * 0.22 ? floor(y / 1.5) : -1;\n      else if (g \u003c 1 && !door(x, y)) k = g > 0.6 ? pre - 6 : ch + cl(round((atan2((y - cy) / 8, x / 6) + 1.2) / 0.42), 0, 6);\n      else if (ball(x, y) \u003c 1 && !door(x, y)) k = pre + min(15, round(w / (PI * 0.0733)));\n      else if (y >= t0 && tk \u003c nt && abs(x - 2.6 - (y - t0) * 0.08) \u003c (tk \u003c 2 ? 4.4 - tk : 2.6)) k = fr + tk;\n      if (k >= 0) F.push(x, y, k + (y > t0 + tube + 1.8) * 1000);\n    }\n  return Object.assign(S, { pre, fr, by, F });\n}\n\n// A nest's point on the panel, swaying on its twig and dipping when a bird lands.\nconst nxy = (n, lx, ly) => [n.x + n.sw * (1 + (ly * n.s) / 20) + lx * n.s * n.face, n.y + n.dip + n.fall + ly * n.s];\n\nfunction build(P) {\n  const { alb, mat } = P;\n  const set = (x, y, m, r, g, b) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, k = 0.8 + 0.3 * vn(x * 0.4, y * 0.8) + 0.1 * hash(x + 7, y);\n    if (y >= NEAR + round(2 * vn(x * 0.2, 4))) set(x, y, 5, 118 * k, 96 * k, 58 * k);\n    else if (y >= WTOP) set(x, y, 4, 0, 0, 0);\n    else if (y >= HOR) set(x, y, 3, 200 * k, 166 * k, 96 * k);\n  }\n  // Flat-topped acacias on the far bank.\n  for (let i = 0; i \u003c 6; i++) {\n    const cx = 12 + i * 10.5 + rnd() * 5, top = HOR - 4 - floor(rnd() * 4), w = 2 + rnd() * 4;\n    for (let y = top; y \u003c top + 2; y++) for (let x = round(cx - w - (y - top) * 1.5); x \u003c= cx + w + (y - top) * 1.5; x++) set(x, y, 6, 44, 60, 50);\n    for (let y = top + 2; y \u003c HOR; y++) set(round(cx), y, 6, 52, 56, 46);\n  }\n  const bark = (x, y, e, k = (0.72 + 0.4 * vn(x * 0.8, y * 0.16)) * (1.1 - 0.45 * e * e) * (e > 0.3 ? 1.12 : 1)) => set(x, y, 1, 112 * k, 94 * k, 76 * k);\n  for (let y = 10; y \u003c H; y++) for (let c = 5.5 + 1.8 * sin(y * 0.03 + 0.5), w = 2 + (y / H) * 2.2, x = floor(c - w); x \u003c= c + w; x++) bark(x, y, (x - c) / w);\n  for (const [x0, y0, x1, y1, w0, w1] of LIMBS)\n    for (let i = 0, n = ceil(hypot(x1 - x0, y1 - y0) * 2); i \u003c= n; i++) {\n      const f = i / n, x = mix(x0, x1, f), y = mix(y0, y1, f), w = mix(w0, w1, f);\n      for (let dy = -w / 2; dy \u003c= w / 2; dy += 0.5) bark(round(x), round(y + dy), (-2 * dy) / w);\n    }\n  for (const [cx, cy, rx, ry] of PLATES)\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const d = ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2, n = vn(x * 0.35, y * 0.5 + 20) * 0.7 + vn(x * 0.9, y * 1.1) * 0.3;\n        const k = 0.55 + 0.6 * n + (y \u003c cy - ry * 0.3 ? 0.28 : 0) - (y > cy + ry * 0.35 ? 0.2 : 0);\n        if (d \u003c 1 && n > 0.25 + 0.4 * d) set(x, y, 2, 80 * k, 118 * k, 44 * k);\n      }\n  // Reeds at the water's edge, and more out in a reed bed.\n  P.reeds = Array.from({ length: 40 }, (_, i) =>\n    i \u003c 12 ? [(i & 1 ? 44 : 10) + (i >> 1) * 2.4 + rnd() * 2, NEAR + 1, 12 + floor(rnd() * 9), rnd() * 7, i % 3 === 0] : [3 + rnd() * 60, WTOP + 4 + floor(rnd() * 20), 7 + floor(rnd() * 9), rnd() * 7, i % 2 === 0]);\n  P.shad = Float32Array.from({ length: 128 }, (_, i) => sm(1 - abs(i - 34) / 26) + 0.7 * sm(1 - abs(i - 96) / 16));\n  P.cloud = Float32Array.from({ length: 128 * 36 }, (_, i, x = i & 127, y = i >> 7) => sm((vn(x / 16, y / 4, 8) * 0.65 + vn(x / 7, y / 2.5 + 9, 128 / 7) * 0.35 - 0.5) * 3) * sm(1 - abs(y - 16) / 18));\n}\n\n// The sky for the hour, and the water and paddy that reflect it.\nfunction paint(P) {\n  const f = P.sk * 2, i = min(1, floor(f)), [top, hor, tint, sx, sy] = SKY[i].map((v, c) => (v.map ? mixc(v, SKY[i + 1][c], f - i) : mix(v, SKY[i + 1][c], f - i)));\n  const { alb, mat, bg, wet, rice } = P, G = [70, 160, 44];\n  Object.assign(P, { hor, tint, sx, sun: cl(1 - abs(sy - 70) / 60, 0, 1) });\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, m = mat[p], o = p * 3, ds = hypot(x - sx, (y - sy) * 1.2), z = (y - WTOP) / (NEAR - WTOP), row = (y - WTOP + 2) ** 0.7 * 1.6;\n    const band = m === 4 && row % 1 \u003c 0.42 && hash(x, floor(row)) > 0.15 ? rice : 0;\n    wet[p] = m === 4 ? 1 - band : 0;\n    for (let c = 0, a; c \u003c 3; c++)\n      (a = alb[o + c] * tint[c]),\n        (bg[o + c] =\n          m === 0 ? mix(top[c], hor[c], pow(y / HOR, 1.5)) + (sy > 0 ? (ds \u003c 3.2 ? 255 : 120 * Math.exp(-ds / 9)) : 0)\n          : m === 4 ? mix(mix(hor[c], top[c], 0.3 + 0.5 * z) * (0.8 - 0.2 * z), G[c] * tint[c] * (0.8 + 0.4 * hash(x, y)), band)\n          : m === 3 || m === 6 ? mix(a, hor[c], m === 6 ? 0.4 : 0.22)\n          : a);\n  }\n}\n\nfunction species(P, s) {\n  const i = min(1, floor(s)), f = s - i, [c0, q0] = SP[i], [c1, q1] = SP[i + 1], v = c0.map((c, j) => mixc(c, c1[j], f)), M = P.main;\n  Object.assign(P, { pal: pal(v), fresh: v[11], rice: cl(s - 1, 0, 1), reedN: 12 + round(28 * (1 - abs(s - 1))) });\n  for (const n of [M, ...P.col]) n.S = gen(mixc(q0, q1, f), n.seed, n.s);\n  M.nb = min(M.nb, M.S.length);\n}\n\nconst nest = (x, y, rx, ry, s, face, seed) => ({ x, y, rx, ry, s, face, seed, nb: 0, age: [], sw: 0, dip: 0, dv: 0, fall: 0, ph: rnd() * 7 });\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), wet: F(N), sp: -1, sk: -1, t: 0, fs: 0, side: 0, spt: 9 });\n  P.main = nest(AX, AY, RX, RY, 1.3, 1, 7);\n  P.col = COLONY.map((c, i) => Object.assign(nest(...c, 101 + i * 37), { old: (i * 0.37) % 1, fresh: i === 2 }));\n  build(P);\n}\n\n// Where he clings to weave strand j at reveal u: outside the wall, facing it.\nfunction wpos(P, j, u) {\n  const M = P.main, p = M.S[min(j, M.S.length - 1)].p, i = min(p.length - 2, floor((u * p.length) / 2) * 2);\n  const [x, y] = nxy(M, p[i], p[i + 1]), [cx, cy] = nxy(M, -2, M.S.by), l = hypot(x - cx, y - cy) || 1, dx = (x - cx) / l, dy = (y - cy) / l;\n  return [x + dx * 4.5, y + dy * 4.5 + (dy > 0.55 ? 1 : -1), dx > 0 ? -1 : 1, dy > 0.55];\n}\nfunction bladeTip(P, k) {\n  const [bx, by, h, lean] = PICK[k], b = P.bend[k];\n  return [bx + lean + sin(P.t * 1.3 + k * 2) * 0.8 + b * sign(lean) * 0.8, by - h + b];\n}\n\nfunction stepMale(P, d) {\n  const M = P.main, held = P.fs && P.fs \u003c 4;\n  let u = (P.bt += d) / DUR[P.bs];\n  const go = (s) => ((P.bs = s), (P.bt = 0), (P.x0 = P.bx), (P.y0 = P.by));\n  const fly = ([tx, ty], arc) => ([P.face, P.bx, P.by, P.pose, P.hang] = [tx >= P.x0 ? 1 : -1, mix(P.x0, tx, sm(u)), mix(P.y0, ty, sm(u)) - arc * sin(PI * u), flap(P.bt), false]);\n  P.show = false;\n  if (held && !P.bs) (P.bt -= d), (P.show = true), (u = -1);\n  switch (P.bs) {\n    case WEAVE: {\n      if (u \u003c 0) break;\n      // Five passes, each a push through the wall and a tug that pulls it tight and shakes the twig.\n      const k = cl(u, 0, 1) * 5, q = floor(k), f = k - q, rv = min(1, (q + sm(f * 2.5)) / 5);\n      [P.bx, P.by, P.face, P.hang] = wpos(P, M.nb, rv);\n      [P.rev, P.pose, P.strip] = [rv, f \u003c 0.42 ? POKE : PERCH, (1 - rv) * 13];\n      if (f >= 0.42 && !P.tug) M.dv += 5;\n      P.tug = f >= 0.42;\n      if (u >= 1) (M.age[M.nb++] = P.t), (P.rev = P.strip = 0), go(M.nb >= M.S.length ? SHOW : OUT);\n      break;\n    }\n    case OUT:\n      P.tip = bladeTip(P, P.side);\n      fly([P.tip[0], P.tip[1] - 4], 5);\n      if (u >= 1) go(TEAR);\n      break;\n    case TEAR: {\n      // Bite low on the blade and back off up it, tearing a strip.\n      const t = bladeTip(P, P.side), e = sm((u - 0.25) / 0.6), fc = PICK[P.side][3] > 0 ? -1 : 1;\n      P.bend[P.side] = min(3, P.bend[P.side] + d * 12);\n      [P.face, P.pose, P.hang, P.bx, P.by] = [fc, u \u003c 0.25 || (u > 0.5 && u \u003c 0.6) ? POKE : PERCH, false, t[0] - fc * 3 * e, t[1] - 4 - 2 * e];\n      P.tear = u > 0.2 && u \u003c 0.88 ? [t[0] + fc * 3, t[1] + 6] : null;\n      if (u >= 1) (P.tear = null), (P.strip = 13), go(BACK), (P.side ^= 1);\n      break;\n    }\n    case BACK:\n      fly(wpos(P, M.nb, 0), 6);\n      if (u >= 1) (M.dv += 16), go(WEAVE);\n      break;\n    case SHOW:\n      P.show = true;\n      if (!P.fs && P.bt > 0.8) callFemale(P);\n      if (P.reject) (P.reject = false), go(CUT);\n      break;\n    case CUT: {\n      const [x, y] = nxy(M, 0, 0);\n      [P.bx, P.by, P.face, P.hang, P.pose] = [x - 3, y - 3, 1, false, floor(P.bt / 0.2) & 1 ? POKE : PERCH];\n      if (u >= 1) (M.fv = -10), (M.fall = 0.01), (M.dv -= 20), go(OUT);\n    }\n  }\n  if (P.bs !== TEAR) P.bend = P.bend.map((b) => max(0, b - d * 8));\n}\n\nfunction callFemale(P) {\n  if (!P.fs) Object.assign(P, { fs: 1, ft: 0, fx0: 70, fy0: 30 + rnd() * 20 });\n}\nfunction stepFemale(P, d) {\n  const M = P.main, done = M.nb >= M.S.length, [rx, ry] = nxy(M, -3, M.S.by - 8.5).map((v, i) => v - 1 - 4 * i), u = (P.ft += d) / [1, 1.8, 3.4, 1, 1.8][P.fs];\n  const go = (s) => ((P.fs = s), (P.ft = 0), (P.fx0 = P.fx), (P.fy0 = P.fy));\n  if (P.fs === 1 || P.fs === 4) {\n    const [tx, ty] = P.fs === 1 ? [rx, ry] : [-12, 24];\n    [P.fx, P.fy, P.ff, P.fp] = [mix(P.fx0, tx, sm(u)), mix(P.fy0, ty, sm(u)) - 5 * sin(PI * u), tx > P.fx0 ? 1 : -1, flap(P.ft)];\n    if (P.fs === 1 && u >= 1) (M.dv += 10), go(2);\n    if (P.fs === 4 && u >= 1) (P.fs = 0), (P.reject = done);\n  } else {\n    [P.fx, P.fy, P.ff, P.fp] = [rx, ry, floor(P.ft / 0.9) & 1 ? 1 : -1, floor(P.ft / 0.45) % 3 === 1 ? POKE : PERCH];\n    if (u >= 1) go(4);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 3, 0.06], sp = cl(k[0], 0, 2), sk = cl(k[3], 0, 1), nn = cl(k[2], 3, 9), M = P.main;\n  if (abs(sp - P.sp) > 0.004) (P.sp = sp), species(P, sp), (P.sk = -1);\n  if (abs(sk - P.sk) > 0.002) (P.sk = sk), paint(P);\n  P.nn = round(nn) - 1;\n  if (!P.bend) {\n    // Start halfway through a strand.\n    M.nb = min(M.S.length - 1, M.S.pre + 3 + round(((nn - 3) / 6) * (M.S.fr - M.S.pre - 3)));\n    for (let j = 0; j \u003c M.nb; j++) M.age[j] = -(M.nb - j) * 7.8;\n    Object.assign(P, { bs: WEAVE, bt: 1.4, rev: 0, strip: 0, bend: [0, 0] });\n  }\n  if (input.btnPressed?.[0]) callFemale(P);\n  const d = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  P.t += d;\n  for (const n of [M, ...P.col]) {\n    n.sw = (0.55 * sin(P.t * 0.9 + n.ph) + 0.3 * sin(P.t * 2.3 + n.ph * 2)) * (1.4 - n.s * 0.4);\n    n.dv += (-70 * n.dip - 5 * n.dv) * d;\n    n.dip = cl(n.dip + n.dv * d, -3, 4);\n  }\n  if (M.fall) {\n    M.fall += (M.fv += 90 * d) * d;\n    if (M.y + M.fall > WTOP + 2) (P.spx = M.x - 2), (P.spt = 0), (M.fall = M.nb = 0), (M.seed += 11), species(P, P.sp);\n  }\n  stepMale(P, d);\n  if (P.fs) stepFemale(P, d);\n  P.spt += d;\n}\n\nlet BUF, TT;\nfunction Ao(o, r, g, b, a = 1) {\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nconst A = (x, y, r, g, b, a) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && Ao((y * W + x) * 3, r, g, b, a);\nconst AL = (x, y, c, k = 1) => A(x, y, c[0] * k * TT[0], c[1] * k * TT[1], c[2] * k * TT[2]);\n\n// Flipped, he hangs upside down; turned, he hangs head down with his wings going.\nfunction drawBird(S, pl, x0, y0, face, flip, turn) {\n  const ox = round(x0), oy = round(y0);\n  S.rows.forEach((row, r) =>\n    [...row].forEach((ch, c, _, col = ch === \"M\" && (c + r) & 1 ? pl.m : pl[ch]) => col && (turn ? AL(ox + (r - S.ay) * face, oy + c - S.ax, col) : AL(ox + (c - S.ax) * face, oy + (flip ? S.ay - r : r - S.ay), col))),\n  );\n  return [ox + (S.tx - S.ax) * face, oy + (flip ? S.ay - S.ty : S.ty - S.ay)];\n}\n\n// A strip of grass from the bill: trailing in flight, hanging while he weaves.\nfunction strip(P, [x, y], len, face, flying) {\n  let a = flying ? (face > 0 ? PI * 0.9 : PI * 0.1) : PI / 2 - face * 0.6;\n  const tg = flying ? a : PI / 2;\n  for (let i = 0; i \u003c len; i++) {\n    a += (tg - a) * 0.15 + 0.12 * sin(P.t * 9 + i * 0.8);\n    AL(round((x += cos(a))), round((y += sin(a))), P.fresh, 1.1 + 0.15 * sin(i));\n  }\n}\n\nfunction drawNest(P, n, nb, rev, light) {\n  const S = n.S, F = S.F, sd = (P.sx > 32 ? 1 : -1) * n.face, { x: nx, s, face, sw } = n, ny = n.y + n.dip + n.fall, lim = min(nb, S.length - 1), C = [];\n  for (let j = 0; j \u003c= lim; j++) {\n    C[j] = (n.fresh ? mixc(P.fresh, STRAW, (0.7 * (nb - j)) / 12) : n.old >= 0 ? mixc(STRAW, OLD, n.old) : mixc(P.fresh, STRAW, sm((P.t - (n.age[j] ?? P.t)) / 45))).map((v, c) => v * TT[c]);\n  }\n  const lit = (lx, ly) => 0.84 + 0.16 * cl((lx * sd) / 9 - (ly - S.by) / 20, -1, 1), at = (lx, ly) => [round(nx + sw * (1 + (ly * s) / 20) + lx * s * face), round(ny + ly * s)];\n  n.low = -99;\n  for (let i = 0; i \u003c F.length; i += 3) {\n    const k = F[i + 2] % 1000, lx = F[i], ly = F[i + 1];\n    if (k > lim || (k === nb && rev \u003c 0.7)) continue;\n    // The wall behind the strands: straw in slanting runs, the entrance mouth dark.\n    const [xi, yi] = at(lx, ly), c = C[k], q = F[i + 2] > 999 ? 0.15 : light * lit(lx, ly) * (0.68 + 0.1 * hash(i, 5) + 0.12 * sin((lx * 0.8 + ly) * 2.2 + 1.5 * sin(lx * 0.5 - ly * 0.3)));\n    A(xi, yi, c[0] * q, c[1] * q, c[2] * q);\n    if (yi > n.low) [n.low, n.lowx] = [yi, xi];\n  }\n  for (let j = 0; j \u003c= lim; j++) {\n    const p = S[j].p, m = j \u003c nb ? p.length : floor((rev * p.length) / 2) * 2, k0 = light * S[j].sh, [cr, cg, cb] = C[j];\n    for (let i = 0; i \u003c m; i += 2) {\n      const [xi, yi] = at(p[i], p[i + 1]), k = k0 * (lit(p[i], p[i + 1]) + ((i >> 2) & 1 ? 0.1 : -0.08));\n      A(xi, yi + 1, cr * 0.3, cg * 0.3, cb * 0.3, 0.3);\n      A(xi, yi, cr * k, cg * k, cb * k);\n    }\n  }\n}\n\nfunction twig(n) {\n  const [tx, ty] = nxy(n, 0, 0);\n  for (let i = 0, L = ceil(hypot(tx - n.rx, ty - n.ry) * 1.3); i \u003c= L; i++) AL(round(mix(n.rx, tx, i / L) + 1.5 * sin((PI * i) / L) * n.face), round(mix(n.ry, ty, i / L)), [96, 80, 64]);\n}\n\nfunction sky(P) {\n  // Clouds drift behind the tree; the crown flickers in the wind.\n  const { buf, mat, wet, t, sun } = P, off = t * 3, CT = P.cloud, cc = P.hor.map((v) => mix(v, 255, 0.55));\n  for (let p = 15 * W; p \u003c 86 * W; p++)\n    if (!mat[p]) {\n      const x = (p & 63) + off, x0 = floor(x), f = x - x0, r = ((p >> 7) - 7) * 128;\n      Ao(p * 3, cc[0], cc[1], cc[2], (CT[r + (x0 & 127)] * (1 - f) + CT[r + ((x0 + 1) & 127)] * f) * 0.8);\n    }\n  for (let p = 0; p \u003c 22 * W; p++) if (mat[p] === 2) for (let c = 0, s = 0.8 + 0.45 * CT[((p >> 6) + 8) * 128 + (((p & 63) + floor(t * 6)) & 127)]; c \u003c 3; c++) buf[p * 3 + c] *= s;\n  // Ripples on the water, and the sun's road across it.\n  for (let p = WTOP * W; p \u003c (NEAR + 2) * W; p++) {\n    if (!wet[p]) continue;\n    const x = p & 63, y = p >> 6, z = (y - WTOP) / 26, rp = sin(y * 1.9 + 2.4 * sin(x * 0.2 + t * 0.7 + y * 0.3) - t * 1.6), o = p * 3;\n    const g = rp > 0.75 ? cl((0.4 + 1.6 * sun * cl(1 - abs(x - P.sx) / (3 + 9 * z), 0, 1)) * wet[p], 0, 1) * 0.7 : 0;\n    for (let c = 0; c \u003c 3; c++) buf[o + c] = mix(buf[o + c] * (1 + 0.1 * rp * wet[p]), [255, 236, 190][c], g);\n  }\n  for (let r = P.spt * 9, x = floor(P.spx - r); P.spt \u003c 2.5 && x \u003c= P.spx + r; x++) A(x, round(WTOP + 2 + 0.2 * r * (1 - ((x - P.spx) / r) ** 2)), 240, 244, 240, 0.8 - P.spt * 0.3);\n}\n\nfunction reeds(P) {\n  for (let i = 0; i \u003c P.reedN; i++) {\n    const [rx, ry, h, ph, plume] = P.reeds[i], lean = sin(P.t * 1.4 + ph) * 0.8 + (i & 1 ? 1 : -1);\n    for (let j = 0; j \u003c h; j++) {\n      const x = round(rx + lean * (j / h) ** 2), k = 0.7 + (0.5 * j) / h;\n      AL(x, ry - j, [84, 140, 50], k);\n      if (j === round(h * 0.4) || j === round(h * 0.7)) for (let e = 1, sd = (j + i) & 1 ? 1 : -1; e \u003c 4; e++) AL(x + sd * e, ry - j - (e >> 1), [96, 156, 56], k);\n    }\n    if (plume) for (let j = 0; j \u003c 4; j++) AL(round(rx + lean) + (j & 1), ry - h - j, [160, 112, 74]);\n  }\n  for (let k = 0; k \u003c 2; k++) {\n    const [bx, by, h, lean] = PICK[k], [tx, ty] = bladeTip(P, k);\n    for (let j = 0; j \u003c= h; j++) {\n      const f = j / h, x = round(mix(bx, tx, f * f)), y = round(mix(by, ty, f));\n      AL(x, y, [96, 168, 56], 0.7 + 0.5 * f);\n      if (j % 4 === 2) AL(x - sign(lean) * (1 + (j & 4 ? 1 : 0)), y + 1, [80, 150, 50], 0.8);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, t, pal: pl, mat, shad } = P, M = P.main;\n  [BUF, TT] = [buf, P.tint];\n  buf.set(P.bg);\n  sky(P);\n  reeds(P);\n  // The colony; its males hang under their nests and flutter, sit on top, or are away.\n  for (let i = 0; i \u003c P.nn; i++) {\n    const n = P.col[i], c = (t * 0.06 + n.ph * 0.3) % 1, [x, y] = nxy(n, 2 * n.face, n.S.by + 3);\n    twig(n);\n    drawNest(P, n, n.fresh ? 10 : n.S.length, 0, 0.85);\n    if (n.fresh) drawBird(floor(t / 0.5) & 1 ? POKE : PERCH, pl, x + 5 * n.face, y - 3, -n.face);\n    else if (i % 3 !== 2) c \u003c 0.35 ? drawBird(flap(t), pl, n.lowx, n.low + 7, n.face, false, true) : c \u003c 0.55 && drawBird(PERCH, pl, ...nxy(n, -3, -3 / n.s), -n.face);\n  }\n  twig(M);\n  drawNest(P, M, M.nb, P.bs === WEAVE ? P.rev : 0, 1);\n  if (P.fs) drawBird(P.fp || FA, FPAL, P.fx, P.fy, P.ff);\n  if (P.show) drawBird(flap(t), pl, M.lowx, M.low + 7, 1, false, true);\n  else {\n    const tip = drawBird(P.pose, pl, P.bx, P.by, P.face, P.hang);\n    if (P.strip > 0.5) strip(P, tip, round(P.strip), P.face, P.bs === OUT || P.bs === BACK);\n    for (let i = 0; P.tear && i \u003c= 8; i++) AL(round(mix(tip[0], P.tear[0], i / 8)), round(mix(tip[1], P.tear[1], i / 8)), P.fresh, 1.1);\n  }\n  // Out to the panel, under the shadows of the passing clouds.\n  for (let p = 0, o = 0, so = floor(t * 3); p \u003c N; p++, o += 3) {\n    const s = mat[p] ? 1 - 0.4 * shad[((p & 63) + so - (p >> 7)) & 127] : 1;\n    display.setPixel(p & 63, p >> 6, cl(buf[o] * s, 0, 255), cl(buf[o + 1] * s, 0, 255), cl(buf[o + 2] * s, 0, 255));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Plumage=0..2, Speed=0.2..3, Nests=3..9, Sky=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Plumage","min":0,"max":2,"about":"A village weaver at 0, yellow with a black mask and a red eye, over a river; a golden weaver at 1 over a reed bed; a brown-masked baya weaver at 2 over a paddy field, its nests hung from a woven neck with a long tube."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the birds, the wind and the water go: at 2 a strand takes him about eight seconds, there, back and woven in."},{"name":"Nests","min":3,"max":9,"about":"Three to nine nests in the tree, his among them. The bigger the colony, the further along his nest is at the start, from a ring with its roof begun to a chamber that wants only its entrance."},{"name":"Sky","min":0,"max":1,"about":"Morning at 0 with the sun low on the right, noon at 0.5, evening at 1 with the sun going down on the left."}],"start":[0,2,3,0.06],"measures":{"motion":0.1278,"detail":0.0716,"edges":0.3689,"complexity":2.2916,"coverage":0.9985,"colour":0.2367,"drift":0.0436},"knobResponse":[0.0466,0.0543,0.0568,0.2018]},{"slug":"wireworld","title":"Wireworld","family":"automata","round":16,"note":"구리선 회로를 전자가 파란 머리와 주황 꼬리로 달려요. 둘레 12, 18, 24, 30칸 클록 넷의 신호가 다이오드와 지연선을 지나 XOR 과 OR 게이트에서 만나고, 아래 램프 셋이 그 답을 깜박여요. K1 을 누르면 네 줄에 전자 여섯 개씩이 박자를 맞춰 들어가요.","idea":"A working Wireworld circuit fills the tall panel: four clock loops of 12, 18, 24 and 30 cells send electrons down through diodes and delay lines into XOR and OR gates, and three lamps at the foot flash out what the gates decide.","buttons":"K1 tap feeds six electrons in a row into each of the four lines, timed to meet at the gates: the first XOR lamp goes dark for six bits while the OR lamp and the last lamp burn.","code":"// ===== Patternflow pattern =====\n// Title:   Wireworld\n// Family:  automata\n// Idea:    A working Wireworld circuit fills the tall panel: four clock loops of 12, 18, 24 and 30 cells send electrons down through diodes and delay lines into XOR and OR gates, and three lamps at the foot flash out what the gates decide.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Brian Silverman's Wireworld (1987), as A. K. Dewdney described it in Scientific American in January 1990\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..3, Speed=0..4, Pulses=1..3, Glow=0..1\n//\n// Knob 1: Palette. 0 copper wire with blue-white heads and red-orange tails, 1 green phosphor, 2 blueprint, 3 neon.\n// Knob 2: Speed. Ticks per second, from 2 to 14 (8 at the start); the afterglow behind an electron fades in a quarter second at any speed, so a fast electron draws a long streak and a slow one hops cell to cell.\n// Knob 3: Pulses. One, two or three electrons on each clock loop, six cells apart (the 12-cell loop holds two), which changes the rhythm of every lamp; at three the first XOR gets a pulse on both inputs every bit and its lamp goes out.\n// Knob 4: Glow. The light electrons and lamps throw on the dark board, from a one-LED rim to a bloom four LEDs wide, and the afterglow stretches from 0.25 s to 0.8 s.\n// Buttons: K1 tap feeds six electrons in a row into each of the four lines, timed to meet at the gates: the first XOR lamp goes dark for six bits while the OR lamp and the last lamp burn.\n\nconst W = 64;\nconst H = 128;\n// One Wireworld cell is 2x2 LEDs: a wire is two LEDs wide and a head reads\n// as a block, which a single LED on this panel does not.\nconst CW = 32;\nconst CH = 64;\nconst NC = CW * CH;\nconst HEAD = 1;\nconst TAIL = 2;\nconst WIRE = 3;\n// Every loop is a multiple of six cells long, so every electron in the\n// circuit rides a six-tick bit grid. Pulses that meet at a gate either arrive\n// on the same tick or a whole bit apart; anything closer merges in the XOR\n// and the gate no longer computes.\nconst BIT = 6;\nconst PRE = 240;\n// Copper warms with the electrons that cross it and cools over this many\n// seconds, so a busy line glows a little warmer than an idle one.\nconst HEAT = 1.5;\n\n// Gates drawn for signals flowing down the panel. The diode passes downward\n// and its block of three stops an electron coming up. The XOR is the usual\n// Wireworld one with a loop: one input passes, two on the same tick put three\n// heads next to the output cell, which then stays copper. The OR is the same\n// junction without the loop.\nconst DIODE = ['.#.', '###', '#.#', '.#.'];\nconst XOR = ['#.....#', '#.###.#', '.##.##.', '..#.#..', '..###..', '...#...'];\nconst OR = ['#...#', '#.#.#', '.###.', '..#..'];\n\n// Where each loop's first electron sits at tick 0, counted clockwise from the\n// loop's top left cell. Found by running the circuit: with these, A and B\n// reach the first XOR on the same tick of the bit, C and D the OR, and the\n// two gate outputs the last XOR. The fifth is the six-cell heartbeat.\nconst PHASE = [0, 1, 4, 4, 0];\n// Ticks each line holds a K1 burst back. From the feed points the first XOR\n// is 45 ticks away along A and 49 along B, the OR 20 along C and 46 along D,\n// and the outputs reach the last XOR 58 and 32 ticks after A and C were fed;\n// with these waits the six bits of every line meet their partners together.\nconst WAIT = [4, 0, 30, 4];\n// Pulses k puts min(k, m) electrons, spread evenly, on a loop of m bits:\n// loop A has two, B three, C four, D five.\nfunction slotsOf(k, m) {\n  const n = Math.min(k, m);\n  const out = [];\n  for (let j = 0; j \u003c n; j++) out.push(Math.floor((j * m) / n));\n  return out;\n}\n\n// Trace, component, head, tail and lamp for each palette. Components (the\n// diodes, gates and lamp loops) are a lighter metal than the traces, so the\n// parts read as parts.\nconst PALETTES = [\n  [[128, 84, 16], [172, 132, 64], [175, 215, 255], [255, 80, 16], [255, 226, 150]],\n  [[26, 84, 34], [70, 140, 80], [215, 255, 215], [40, 210, 80], [190, 255, 130]],\n  [[30, 60, 138], [90, 120, 190], [255, 255, 255], [40, 205, 255], [215, 240, 255]],\n  [[84, 28, 116], [140, 80, 170], [120, 255, 235], [255, 40, 150], [255, 210, 100]],\n];\n\nfunction buildMap() {\n  // 1 for a trace, 2 for a component.\n  const map = new Uint8Array(NC);\n  const rings = [];\n  let ink = 1;\n  const set = (x, y) => {\n    if (x >= 0 && x \u003c CW && y >= 0 && y \u003c CH) map[y * CW + x] = ink;\n  };\n  // A polyline of straight and 45 degree runs.\n  const path = (pts) => {\n    for (let i = 0; i \u003c pts.length - 1; i++) {\n      let x = pts[i][0];\n      let y = pts[i][1];\n      const x1 = pts[i + 1][0];\n      const y1 = pts[i + 1][1];\n      set(x, y);\n      while (x !== x1 || y !== y1) {\n        x += Math.sign(x1 - x);\n        y += Math.sign(y1 - y);\n        set(x, y);\n      }\n    }\n  };\n  const stamp = (x, y, rows) => {\n    ink = 2;\n    for (let j = 0; j \u003c rows.length; j++) for (let i = 0; i \u003c rows[j].length; i++) if (rows[j][i] === '#') set(x + i, y + j);\n    ink = 1;\n  };\n  // A loop w cells across and h down with its corners cut, so each cell\n  // touches exactly two others and the length is 2(w + h). Kept in clockwise\n  // order for placing electrons.\n  const ring = (x, y, w, h) => {\n    const c = [];\n    for (let i = 1; i \u003c= w; i++) c.push([x + i, y]);\n    for (let j = 1; j \u003c= h; j++) c.push([x + w + 1, y + j]);\n    for (let i = w; i >= 1; i--) c.push([x + i, y + h + 1]);\n    for (let j = h; j >= 1; j--) c.push([x, y + j]);\n    for (const [a, b] of c) set(a, b);\n    rings.push(c.map(([a, b]) => b * CW + a));\n  };\n  // A lamp is a loop the signal enters at one side; it splits both ways\n  // round and the halves cancel on the far side. Its glass is the hole.\n  const lamps = [];\n  const lamp = (x, y, w, trig) => {\n    ink = 2;\n    ring(x, y, w, w);\n    ink = 1;\n    lamps.push({ ring: rings.pop(), trig: trig[1] * CW + trig[0], cx: 2 * x + w + 2, cy: 2 * y + w + 2, rad: w + 0.15 });\n  };\n  // A delay line: runs between x0 and x1 two cells apart, turning on the\n  // diagonal so no cell of one run touches the next.\n  const meander = (pts, x0, x1, y, runs) => {\n    for (let r = 0; r \u003c runs; r++, y += 2) {\n      if (r % 2 === 0) pts.push([x1, y], [x1 + 1, y + 1]);\n      else pts.push([x0, y], [x0 - 1, y + 1]);\n    }\n    return pts;\n  };\n\n  // The four clocks stand on row 11 like organ pipes, 12, 18, 24 and 30\n  // cells round, each tapped at the bottom and guarded by a diode.\n  ring(1, 6, 2, 4);\n  ring(8, 4, 3, 6);\n  ring(16, 2, 4, 8);\n  ring(24, 0, 5, 10);\n  for (const x of [3, 10, 19, 27]) {\n    set(x, 12);\n    stamp(x - 1, 13, DIODE);\n  }\n  // Over clock A a six-cell loop, one bit round, beats the bit into a\n  // small lamp.\n  ring(0, 0, 1, 2);\n  path([[3, 1], [4, 1]]);\n  lamp(5, 0, 2, [5, 1]);\n  // A: a horizontal delay line. B: three long verticals, down, up, down.\n  // C: a zigzag. D: the delay line again.\n  path(meander([[3, 16], [3, 17], [1, 19]], 1, 5, 19, 7).concat([[4, 34], [4, 35]]));\n  path([[10, 16], [10, 17], [9, 18], [9, 32], [10, 33], [11, 32], [11, 19], [12, 18], [13, 19], [13, 33], [11, 35]]);\n  path([[19, 16], [19, 17], [22, 20], [16, 26], [22, 32], [22, 34], [21, 35], [21, 36]]);\n  path(meander([[27, 16], [27, 17], [25, 19]], 25, 29, 19, 7).concat([[26, 36]]));\n  stamp(4, 36, XOR);\n  stamp(21, 37, OR);\n  // Each gate's output forks: one branch winds down to its own lamp, the\n  // other meets the other gate's in the last XOR.\n  path([[7, 41], [7, 43], [6, 44], [2, 48], [8, 48], [9, 49], [8, 50], [1, 50], [0, 51], [1, 52], [8, 52], [9, 53], [8, 54], [3, 54], [3, 56]]);\n  path([[7, 43], [8, 44], [12, 48]]);\n  path([[23, 40], [23, 43], [22, 44], [19, 47], [19, 48]]);\n  path([[23, 43], [24, 44], [28, 48], [23, 48], [22, 49], [23, 50], [30, 50], [31, 51], [30, 52], [23, 52], [22, 53], [23, 54], [28, 54], [28, 56]]);\n  stamp(13, 49, XOR);\n  path([[16, 54], [16, 56]]);\n  lamp(0, 57, 4, [3, 57]);\n  lamp(13, 57, 4, [16, 57]);\n  lamp(26, 57, 4, [28, 57]);\n  return { map, rings, lamps };\n}\n\nexport function setup(params) {\n  const P = params;\n  const { map, rings, lamps } = buildMap();\n  // Index the copper: a step only visits wire cells, each with the list of\n  // wire cells it touches.\n  const id = new Int16Array(NC).fill(-1);\n  let n = 0;\n  for (let p = 0; p \u003c NC; p++) if (map[p]) id[p] = n++;\n  P.nw = n;\n  P.pos = new Int16Array(n);\n  P.part = new Uint8Array(n);\n  P.nb = new Int16Array(n * 8).fill(-1);\n  for (let p = 0; p \u003c NC; p++) {\n    const i = id[p];\n    if (i \u003c 0) continue;\n    P.pos[i] = p;\n    P.part[i] = map[p] === 2 ? 1 : 0;\n    const x = p % CW;\n    const y = (p / CW) | 0;\n    let k = 0;\n    for (let dy = -1; dy \u003c= 1; dy++)\n      for (let dx = -1; dx \u003c= 1; dx++) {\n        if (!dx && !dy) continue;\n        const xx = x + dx;\n        const yy = y + dy;\n        if (xx \u003c 0 || yy \u003c 0 || xx >= CW || yy >= CH) continue;\n        if (id[yy * CW + xx] >= 0) P.nb[i * 8 + k++] = id[yy * CW + xx];\n      }\n  }\n  P.id = id;\n  P.clocks = rings.map((r) => r.map((p) => id[p]));\n  P.lamps = lamps.map((l) => ({ trig: id[l.trig], cx: l.cx, cy: l.cy, rad: l.rad, flash: 0 }));\n  P.s = new Uint8Array(n).fill(WIRE);\n  P.s2 = new Uint8Array(n);\n  P.after = new Float32Array(n);\n  P.heat = new Float32Array(n);\n  // Where K1 feeds each line, just under its diode, and the cell behind it.\n  P.inj = [3, 10, 19, 27].map((x) => [id[17 * CW + x], id[16 * CW + x]]);\n  P.injPhase = [0, 0, 0, 0];\n  P.burst = [0, 0, 0, 0];\n  P.wait = [0, 0, 0, 0];\n  P.halo = new Float32Array(W * H);\n  P.glowTail = new Float32Array(W * H);\n  P.lamp = new Float32Array(W * H);\n  P.tick = 0;\n  P.acc = 0;\n  P.level = 0;\n  P.ready = false;\n}\n\n// Put the electrons of every clock where they would be at this tick, for the\n// current number of pulses. Slot s rides six cells behind slot 0.\nfunction seedClocks(P) {\n  for (let c = 0; c \u003c P.clocks.length; c++) {\n    const r = P.clocks[c];\n    const L = r.length;\n    for (const i of r) P.s[i] = WIRE;\n    for (const s of slotsOf(c \u003c 4 ? P.level + 1 : 1, L / BIT)) {\n      const at = (((PHASE[c] + P.tick - BIT * s) % L) + L) % L;\n      P.s[r[at]] = HEAD;\n      P.s[r[(at - 1 + L) % L]] = TAIL;\n    }\n  }\n}\n\nfunction step(P) {\n  const s = P.s;\n  const o = P.s2;\n  const nb = P.nb;\n  for (let i = 0; i \u003c P.nw; i++) {\n    const v = s[i];\n    if (v === HEAD) o[i] = TAIL;\n    else if (v === TAIL) {\n      o[i] = WIRE;\n      P.after[i] = 1;\n    } else {\n      let c = 0;\n      for (let k = i * 8, e = k + 8; k \u003c e; k++) {\n        const j = nb[k];\n        if (j \u003c 0) break;\n        if (s[j] === HEAD) c++;\n      }\n      if (c === 1 || c === 2) {\n        o[i] = HEAD;\n        P.heat[i] += 1;\n      } else o[i] = WIRE;\n    }\n  }\n  P.s = o;\n  P.s2 = s;\n  P.tick++;\n  // Learn each line's place on the bit grid from the electrons the clocks\n  // send past the feed point, so a burst lands on the same grid.\n  for (let c = 0; c \u003c 4; c++) {\n    const [a, b] = P.inj[c];\n    if (o[a] === HEAD && o[b] === TAIL) P.injPhase[c] = P.tick % BIT;\n  }\n  for (const l of P.lamps) if (o[l.trig] === HEAD) l.flash = 1;\n  // A burst fills the next bits of each line; a bit the clock already\n  // carries counts as filled.\n  for (let c = 0; c \u003c 4; c++) {\n    if (P.wait[c] > 0) {\n      P.wait[c]--;\n      continue;\n    }\n    if (P.burst[c] === 0 || P.tick % BIT !== P.injPhase[c]) continue;\n    const [a, b] = P.inj[c];\n    if (o[a] === WIRE && o[b] === WIRE) {\n      o[a] = HEAD;\n      o[b] = TAIL;\n    }\n    P.burst[c]--;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.pal = PALETTES[Math.max(0, Math.min(3, Math.round(k[0])))];\n  const tps = 2 + 3 * Math.max(0, Math.min(4, k[1]));\n  const level = Math.max(1, Math.min(3, Math.round(k[2]))) - 1;\n  P.glow = Math.max(0, Math.min(1, k[3]));\n\n  if (!P.ready) {\n    P.level = level;\n    seedClocks(P);\n    // Run the circuit until every line and lamp has had its signal, so the\n    // panel opens on a board that is already working.\n    const cool = Math.exp(-1 / tps / HEAT);\n    for (let t = 0; t \u003c PRE; t++) {\n      step(P);\n      for (let i = 0; i \u003c P.nw; i++) P.heat[i] *= cool;\n    }\n    P.after.fill(0);\n    for (const l of P.lamps) l.flash = 0;\n    P.ready = true;\n  }\n  if (level !== P.level) {\n    P.level = level;\n    seedClocks(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.burst.fill(6);\n    for (let c = 0; c \u003c 4; c++) P.wait[c] = WAIT[c];\n  }\n\n  P.acc += dt * tps;\n  let n = 0;\n  while (P.acc >= 1 && n \u003c 4) {\n    step(P);\n    P.acc -= 1;\n    n++;\n  }\n  if (P.acc > 1) P.acc = 1;\n\n  // The afterglow fades in seconds, not ticks, so it streaks further behind\n  // a faster electron; Glow stretches it from 0.25 s to 0.8 s.\n  const fade = Math.exp(-dt / (0.25 + 0.55 * P.glow));\n  const after = P.after;\n  for (let i = 0; i \u003c P.nw; i++) if (after[i] > 0) after[i] = after[i] > 0.02 ? after[i] * fade : 0;\n  const cool = Math.exp(-dt / HEAT);\n  const heat = P.heat;\n  for (let i = 0; i \u003c P.nw; i++) heat[i] *= cool;\n  const lampFade = Math.exp(-dt / 0.5);\n  for (const l of P.lamps) l.flash *= lampFade;\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  if (!P.ready) return;\n  const pal = P.pal;\n  const head = pal[2];\n  const tail = pal[3];\n  const lampC = pal[4];\n  const g = P.glow;\n  const halo = P.halo;\n  const lamp = P.lamp;\n  const id = P.id;\n  halo.fill(0);\n  lamp.fill(0);\n\n  // Heads and tails throw their colour on the LEDs around their cell: a rim\n  // one LED wide at the bottom of the knob, four LEDs of bloom at the top.\n  const rim = 0.35 + 0.55 * g;\n  const reach = 1 + Math.round(3 * g);\n  const s = P.s;\n  const glowTail = P.glowTail;\n  glowTail.fill(0);\n  for (let i = 0; i \u003c P.nw; i++) {\n    const v = s[i];\n    if (v !== HEAD && v !== TAIL) continue;\n    const buf = v === HEAD ? halo : glowTail;\n    const amt = v === HEAD ? rim : rim * 0.6;\n    const p = P.pos[i];\n    const x0 = (p % CW) * 2;\n    const y0 = ((p / CW) | 0) * 2;\n    for (let dy = -reach; dy \u003c 2 + reach; dy++) {\n      const y = y0 + dy;\n      if (y \u003c 0 || y >= H) continue;\n      const ey = dy \u003c 0 ? -dy : dy > 1 ? dy - 1 : 0;\n      for (let dx = -reach; dx \u003c 2 + reach; dx++) {\n        const x = x0 + dx;\n        if (x \u003c 0 || x >= W) continue;\n        const ex = dx \u003c 0 ? -dx : dx > 1 ? dx - 1 : 0;\n        const d = Math.max(ex, ey);\n        if (d > 0) buf[y * W + x] += amt / (d * d + (ex && ey ? 0.6 : 0));\n      }\n    }\n  }\n\n  // Each lamp's glass glows faintly when dark and fills when a signal\n  // arrives, and the flash blooms past its loop onto the board.\n  for (const l of P.lamps) {\n    const f = l.flash;\n    const out = l.rad + (6 + 10 * g) * (l.rad / 4);\n    const x0 = Math.max(0, Math.floor(l.cx - out));\n    const x1 = Math.min(W, Math.ceil(l.cx + out));\n    for (let y = Math.max(0, Math.floor(l.cy - out)); y \u003c Math.min(H, Math.ceil(l.cy + out)); y++) {\n      for (let x = x0; x \u003c x1; x++) {\n        const d = Math.hypot(x + 0.5 - l.cx, y + 0.5 - l.cy);\n        let v = 0;\n        if (d \u003c l.rad) v = 0.13 + 0.87 * f * (1 - 0.15 * (d / l.rad));\n        else if (d \u003c out) v = f * 0.9 * ((out - d) / (out - l.rad)) ** 1.3;\n        if (v > lamp[y * W + x]) lamp[y * W + x] = v;\n      }\n    }\n  }\n\n  // Black board, then every wire cell by its state. Plain copper takes a\n  // share of the light around it; a cell an electron just left still burns\n  // with the tail colour for a moment.\n  const after = P.after;\n  const heat = P.heat;\n  for (let y = 0; y \u003c H; y++) {\n    const row = (y >> 1) * CW;\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const i = id[row + (x >> 1)];\n      const h = halo[q] \u003c 1 ? halo[q] : 1;\n      const t = glowTail[q] \u003c 1 ? glowTail[q] : 1;\n      const m = lamp[q];\n      let r = head[0] * h + tail[0] * t + lampC[0] * m;\n      let gg = head[1] * h + tail[1] * t + lampC[1] * m;\n      let b = head[2] * h + tail[2] * t + lampC[2] * m;\n      if (i >= 0) {\n        const v = s[i];\n        if (v === HEAD) {\n          r = head[0];\n          gg = head[1];\n          b = head[2];\n        } else if (v === TAIL) {\n          r = tail[0];\n          gg = tail[1];\n          b = tail[2];\n        } else {\n          const c = pal[P.part[i]];\n          const w = 0.72 + 0.25 * (heat[i] \u003c 2 ? heat[i] : 2);\n          const a = after[i] * 0.8;\n          r = c[0] * w + (tail[0] - c[0] * w) * a + r * 0.5;\n          gg = c[1] * w + (tail[1] - c[1] * w) * a + gg * 0.5;\n          b = c[2] * w + (tail[2] - c[2] * w) * a + b * 0.5;\n        }\n      }\n      display.setPixel(x, y, r \u003c 255 ? r : 255, gg \u003c 255 ? gg : 255, b \u003c 255 ? b : 255);\n    }\n  }\n}\n","layer":{"id":"layer-wireworld","type":"code","name":"wireworld","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Wireworld\n// Family:  automata\n// Idea:    A working Wireworld circuit fills the tall panel: four clock loops of 12, 18, 24 and 30 cells send electrons down through diodes and delay lines into XOR and OR gates, and three lamps at the foot flash out what the gates decide.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Brian Silverman's Wireworld (1987), as A. K. Dewdney described it in Scientific American in January 1990\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..3, Speed=0..4, Pulses=1..3, Glow=0..1\n//\n// Knob 1: Palette. 0 copper wire with blue-white heads and red-orange tails, 1 green phosphor, 2 blueprint, 3 neon.\n// Knob 2: Speed. Ticks per second, from 2 to 14 (8 at the start); the afterglow behind an electron fades in a quarter second at any speed, so a fast electron draws a long streak and a slow one hops cell to cell.\n// Knob 3: Pulses. One, two or three electrons on each clock loop, six cells apart (the 12-cell loop holds two), which changes the rhythm of every lamp; at three the first XOR gets a pulse on both inputs every bit and its lamp goes out.\n// Knob 4: Glow. The light electrons and lamps throw on the dark board, from a one-LED rim to a bloom four LEDs wide, and the afterglow stretches from 0.25 s to 0.8 s.\n// Buttons: K1 tap feeds six electrons in a row into each of the four lines, timed to meet at the gates: the first XOR lamp goes dark for six bits while the OR lamp and the last lamp burn.\n\nconst W = 64;\nconst H = 128;\n// One Wireworld cell is 2x2 LEDs: a wire is two LEDs wide and a head reads\n// as a block, which a single LED on this panel does not.\nconst CW = 32;\nconst CH = 64;\nconst NC = CW * CH;\nconst HEAD = 1;\nconst TAIL = 2;\nconst WIRE = 3;\n// Every loop is a multiple of six cells long, so every electron in the\n// circuit rides a six-tick bit grid. Pulses that meet at a gate either arrive\n// on the same tick or a whole bit apart; anything closer merges in the XOR\n// and the gate no longer computes.\nconst BIT = 6;\nconst PRE = 240;\n// Copper warms with the electrons that cross it and cools over this many\n// seconds, so a busy line glows a little warmer than an idle one.\nconst HEAT = 1.5;\n\n// Gates drawn for signals flowing down the panel. The diode passes downward\n// and its block of three stops an electron coming up. The XOR is the usual\n// Wireworld one with a loop: one input passes, two on the same tick put three\n// heads next to the output cell, which then stays copper. The OR is the same\n// junction without the loop.\nconst DIODE = ['.#.', '###', '#.#', '.#.'];\nconst XOR = ['#.....#', '#.###.#', '.##.##.', '..#.#..', '..###..', '...#...'];\nconst OR = ['#...#', '#.#.#', '.###.', '..#..'];\n\n// Where each loop's first electron sits at tick 0, counted clockwise from the\n// loop's top left cell. Found by running the circuit: with these, A and B\n// reach the first XOR on the same tick of the bit, C and D the OR, and the\n// two gate outputs the last XOR. The fifth is the six-cell heartbeat.\nconst PHASE = [0, 1, 4, 4, 0];\n// Ticks each line holds a K1 burst back. From the feed points the first XOR\n// is 45 ticks away along A and 49 along B, the OR 20 along C and 46 along D,\n// and the outputs reach the last XOR 58 and 32 ticks after A and C were fed;\n// with these waits the six bits of every line meet their partners together.\nconst WAIT = [4, 0, 30, 4];\n// Pulses k puts min(k, m) electrons, spread evenly, on a loop of m bits:\n// loop A has two, B three, C four, D five.\nfunction slotsOf(k, m) {\n  const n = Math.min(k, m);\n  const out = [];\n  for (let j = 0; j \u003c n; j++) out.push(Math.floor((j * m) / n));\n  return out;\n}\n\n// Trace, component, head, tail and lamp for each palette. Components (the\n// diodes, gates and lamp loops) are a lighter metal than the traces, so the\n// parts read as parts.\nconst PALETTES = [\n  [[128, 84, 16], [172, 132, 64], [175, 215, 255], [255, 80, 16], [255, 226, 150]],\n  [[26, 84, 34], [70, 140, 80], [215, 255, 215], [40, 210, 80], [190, 255, 130]],\n  [[30, 60, 138], [90, 120, 190], [255, 255, 255], [40, 205, 255], [215, 240, 255]],\n  [[84, 28, 116], [140, 80, 170], [120, 255, 235], [255, 40, 150], [255, 210, 100]],\n];\n\nfunction buildMap() {\n  // 1 for a trace, 2 for a component.\n  const map = new Uint8Array(NC);\n  const rings = [];\n  let ink = 1;\n  const set = (x, y) => {\n    if (x >= 0 && x \u003c CW && y >= 0 && y \u003c CH) map[y * CW + x] = ink;\n  };\n  // A polyline of straight and 45 degree runs.\n  const path = (pts) => {\n    for (let i = 0; i \u003c pts.length - 1; i++) {\n      let x = pts[i][0];\n      let y = pts[i][1];\n      const x1 = pts[i + 1][0];\n      const y1 = pts[i + 1][1];\n      set(x, y);\n      while (x !== x1 || y !== y1) {\n        x += Math.sign(x1 - x);\n        y += Math.sign(y1 - y);\n        set(x, y);\n      }\n    }\n  };\n  const stamp = (x, y, rows) => {\n    ink = 2;\n    for (let j = 0; j \u003c rows.length; j++) for (let i = 0; i \u003c rows[j].length; i++) if (rows[j][i] === '#') set(x + i, y + j);\n    ink = 1;\n  };\n  // A loop w cells across and h down with its corners cut, so each cell\n  // touches exactly two others and the length is 2(w + h). Kept in clockwise\n  // order for placing electrons.\n  const ring = (x, y, w, h) => {\n    const c = [];\n    for (let i = 1; i \u003c= w; i++) c.push([x + i, y]);\n    for (let j = 1; j \u003c= h; j++) c.push([x + w + 1, y + j]);\n    for (let i = w; i >= 1; i--) c.push([x + i, y + h + 1]);\n    for (let j = h; j >= 1; j--) c.push([x, y + j]);\n    for (const [a, b] of c) set(a, b);\n    rings.push(c.map(([a, b]) => b * CW + a));\n  };\n  // A lamp is a loop the signal enters at one side; it splits both ways\n  // round and the halves cancel on the far side. Its glass is the hole.\n  const lamps = [];\n  const lamp = (x, y, w, trig) => {\n    ink = 2;\n    ring(x, y, w, w);\n    ink = 1;\n    lamps.push({ ring: rings.pop(), trig: trig[1] * CW + trig[0], cx: 2 * x + w + 2, cy: 2 * y + w + 2, rad: w + 0.15 });\n  };\n  // A delay line: runs between x0 and x1 two cells apart, turning on the\n  // diagonal so no cell of one run touches the next.\n  const meander = (pts, x0, x1, y, runs) => {\n    for (let r = 0; r \u003c runs; r++, y += 2) {\n      if (r % 2 === 0) pts.push([x1, y], [x1 + 1, y + 1]);\n      else pts.push([x0, y], [x0 - 1, y + 1]);\n    }\n    return pts;\n  };\n\n  // The four clocks stand on row 11 like organ pipes, 12, 18, 24 and 30\n  // cells round, each tapped at the bottom and guarded by a diode.\n  ring(1, 6, 2, 4);\n  ring(8, 4, 3, 6);\n  ring(16, 2, 4, 8);\n  ring(24, 0, 5, 10);\n  for (const x of [3, 10, 19, 27]) {\n    set(x, 12);\n    stamp(x - 1, 13, DIODE);\n  }\n  // Over clock A a six-cell loop, one bit round, beats the bit into a\n  // small lamp.\n  ring(0, 0, 1, 2);\n  path([[3, 1], [4, 1]]);\n  lamp(5, 0, 2, [5, 1]);\n  // A: a horizontal delay line. B: three long verticals, down, up, down.\n  // C: a zigzag. D: the delay line again.\n  path(meander([[3, 16], [3, 17], [1, 19]], 1, 5, 19, 7).concat([[4, 34], [4, 35]]));\n  path([[10, 16], [10, 17], [9, 18], [9, 32], [10, 33], [11, 32], [11, 19], [12, 18], [13, 19], [13, 33], [11, 35]]);\n  path([[19, 16], [19, 17], [22, 20], [16, 26], [22, 32], [22, 34], [21, 35], [21, 36]]);\n  path(meander([[27, 16], [27, 17], [25, 19]], 25, 29, 19, 7).concat([[26, 36]]));\n  stamp(4, 36, XOR);\n  stamp(21, 37, OR);\n  // Each gate's output forks: one branch winds down to its own lamp, the\n  // other meets the other gate's in the last XOR.\n  path([[7, 41], [7, 43], [6, 44], [2, 48], [8, 48], [9, 49], [8, 50], [1, 50], [0, 51], [1, 52], [8, 52], [9, 53], [8, 54], [3, 54], [3, 56]]);\n  path([[7, 43], [8, 44], [12, 48]]);\n  path([[23, 40], [23, 43], [22, 44], [19, 47], [19, 48]]);\n  path([[23, 43], [24, 44], [28, 48], [23, 48], [22, 49], [23, 50], [30, 50], [31, 51], [30, 52], [23, 52], [22, 53], [23, 54], [28, 54], [28, 56]]);\n  stamp(13, 49, XOR);\n  path([[16, 54], [16, 56]]);\n  lamp(0, 57, 4, [3, 57]);\n  lamp(13, 57, 4, [16, 57]);\n  lamp(26, 57, 4, [28, 57]);\n  return { map, rings, lamps };\n}\n\nexport function setup(params) {\n  const P = params;\n  const { map, rings, lamps } = buildMap();\n  // Index the copper: a step only visits wire cells, each with the list of\n  // wire cells it touches.\n  const id = new Int16Array(NC).fill(-1);\n  let n = 0;\n  for (let p = 0; p \u003c NC; p++) if (map[p]) id[p] = n++;\n  P.nw = n;\n  P.pos = new Int16Array(n);\n  P.part = new Uint8Array(n);\n  P.nb = new Int16Array(n * 8).fill(-1);\n  for (let p = 0; p \u003c NC; p++) {\n    const i = id[p];\n    if (i \u003c 0) continue;\n    P.pos[i] = p;\n    P.part[i] = map[p] === 2 ? 1 : 0;\n    const x = p % CW;\n    const y = (p / CW) | 0;\n    let k = 0;\n    for (let dy = -1; dy \u003c= 1; dy++)\n      for (let dx = -1; dx \u003c= 1; dx++) {\n        if (!dx && !dy) continue;\n        const xx = x + dx;\n        const yy = y + dy;\n        if (xx \u003c 0 || yy \u003c 0 || xx >= CW || yy >= CH) continue;\n        if (id[yy * CW + xx] >= 0) P.nb[i * 8 + k++] = id[yy * CW + xx];\n      }\n  }\n  P.id = id;\n  P.clocks = rings.map((r) => r.map((p) => id[p]));\n  P.lamps = lamps.map((l) => ({ trig: id[l.trig], cx: l.cx, cy: l.cy, rad: l.rad, flash: 0 }));\n  P.s = new Uint8Array(n).fill(WIRE);\n  P.s2 = new Uint8Array(n);\n  P.after = new Float32Array(n);\n  P.heat = new Float32Array(n);\n  // Where K1 feeds each line, just under its diode, and the cell behind it.\n  P.inj = [3, 10, 19, 27].map((x) => [id[17 * CW + x], id[16 * CW + x]]);\n  P.injPhase = [0, 0, 0, 0];\n  P.burst = [0, 0, 0, 0];\n  P.wait = [0, 0, 0, 0];\n  P.halo = new Float32Array(W * H);\n  P.glowTail = new Float32Array(W * H);\n  P.lamp = new Float32Array(W * H);\n  P.tick = 0;\n  P.acc = 0;\n  P.level = 0;\n  P.ready = false;\n}\n\n// Put the electrons of every clock where they would be at this tick, for the\n// current number of pulses. Slot s rides six cells behind slot 0.\nfunction seedClocks(P) {\n  for (let c = 0; c \u003c P.clocks.length; c++) {\n    const r = P.clocks[c];\n    const L = r.length;\n    for (const i of r) P.s[i] = WIRE;\n    for (const s of slotsOf(c \u003c 4 ? P.level + 1 : 1, L / BIT)) {\n      const at = (((PHASE[c] + P.tick - BIT * s) % L) + L) % L;\n      P.s[r[at]] = HEAD;\n      P.s[r[(at - 1 + L) % L]] = TAIL;\n    }\n  }\n}\n\nfunction step(P) {\n  const s = P.s;\n  const o = P.s2;\n  const nb = P.nb;\n  for (let i = 0; i \u003c P.nw; i++) {\n    const v = s[i];\n    if (v === HEAD) o[i] = TAIL;\n    else if (v === TAIL) {\n      o[i] = WIRE;\n      P.after[i] = 1;\n    } else {\n      let c = 0;\n      for (let k = i * 8, e = k + 8; k \u003c e; k++) {\n        const j = nb[k];\n        if (j \u003c 0) break;\n        if (s[j] === HEAD) c++;\n      }\n      if (c === 1 || c === 2) {\n        o[i] = HEAD;\n        P.heat[i] += 1;\n      } else o[i] = WIRE;\n    }\n  }\n  P.s = o;\n  P.s2 = s;\n  P.tick++;\n  // Learn each line's place on the bit grid from the electrons the clocks\n  // send past the feed point, so a burst lands on the same grid.\n  for (let c = 0; c \u003c 4; c++) {\n    const [a, b] = P.inj[c];\n    if (o[a] === HEAD && o[b] === TAIL) P.injPhase[c] = P.tick % BIT;\n  }\n  for (const l of P.lamps) if (o[l.trig] === HEAD) l.flash = 1;\n  // A burst fills the next bits of each line; a bit the clock already\n  // carries counts as filled.\n  for (let c = 0; c \u003c 4; c++) {\n    if (P.wait[c] > 0) {\n      P.wait[c]--;\n      continue;\n    }\n    if (P.burst[c] === 0 || P.tick % BIT !== P.injPhase[c]) continue;\n    const [a, b] = P.inj[c];\n    if (o[a] === WIRE && o[b] === WIRE) {\n      o[a] = HEAD;\n      o[b] = TAIL;\n    }\n    P.burst[c]--;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.pal = PALETTES[Math.max(0, Math.min(3, Math.round(k[0])))];\n  const tps = 2 + 3 * Math.max(0, Math.min(4, k[1]));\n  const level = Math.max(1, Math.min(3, Math.round(k[2]))) - 1;\n  P.glow = Math.max(0, Math.min(1, k[3]));\n\n  if (!P.ready) {\n    P.level = level;\n    seedClocks(P);\n    // Run the circuit until every line and lamp has had its signal, so the\n    // panel opens on a board that is already working.\n    const cool = Math.exp(-1 / tps / HEAT);\n    for (let t = 0; t \u003c PRE; t++) {\n      step(P);\n      for (let i = 0; i \u003c P.nw; i++) P.heat[i] *= cool;\n    }\n    P.after.fill(0);\n    for (const l of P.lamps) l.flash = 0;\n    P.ready = true;\n  }\n  if (level !== P.level) {\n    P.level = level;\n    seedClocks(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.burst.fill(6);\n    for (let c = 0; c \u003c 4; c++) P.wait[c] = WAIT[c];\n  }\n\n  P.acc += dt * tps;\n  let n = 0;\n  while (P.acc >= 1 && n \u003c 4) {\n    step(P);\n    P.acc -= 1;\n    n++;\n  }\n  if (P.acc > 1) P.acc = 1;\n\n  // The afterglow fades in seconds, not ticks, so it streaks further behind\n  // a faster electron; Glow stretches it from 0.25 s to 0.8 s.\n  const fade = Math.exp(-dt / (0.25 + 0.55 * P.glow));\n  const after = P.after;\n  for (let i = 0; i \u003c P.nw; i++) if (after[i] > 0) after[i] = after[i] > 0.02 ? after[i] * fade : 0;\n  const cool = Math.exp(-dt / HEAT);\n  const heat = P.heat;\n  for (let i = 0; i \u003c P.nw; i++) heat[i] *= cool;\n  const lampFade = Math.exp(-dt / 0.5);\n  for (const l of P.lamps) l.flash *= lampFade;\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  if (!P.ready) return;\n  const pal = P.pal;\n  const head = pal[2];\n  const tail = pal[3];\n  const lampC = pal[4];\n  const g = P.glow;\n  const halo = P.halo;\n  const lamp = P.lamp;\n  const id = P.id;\n  halo.fill(0);\n  lamp.fill(0);\n\n  // Heads and tails throw their colour on the LEDs around their cell: a rim\n  // one LED wide at the bottom of the knob, four LEDs of bloom at the top.\n  const rim = 0.35 + 0.55 * g;\n  const reach = 1 + Math.round(3 * g);\n  const s = P.s;\n  const glowTail = P.glowTail;\n  glowTail.fill(0);\n  for (let i = 0; i \u003c P.nw; i++) {\n    const v = s[i];\n    if (v !== HEAD && v !== TAIL) continue;\n    const buf = v === HEAD ? halo : glowTail;\n    const amt = v === HEAD ? rim : rim * 0.6;\n    const p = P.pos[i];\n    const x0 = (p % CW) * 2;\n    const y0 = ((p / CW) | 0) * 2;\n    for (let dy = -reach; dy \u003c 2 + reach; dy++) {\n      const y = y0 + dy;\n      if (y \u003c 0 || y >= H) continue;\n      const ey = dy \u003c 0 ? -dy : dy > 1 ? dy - 1 : 0;\n      for (let dx = -reach; dx \u003c 2 + reach; dx++) {\n        const x = x0 + dx;\n        if (x \u003c 0 || x >= W) continue;\n        const ex = dx \u003c 0 ? -dx : dx > 1 ? dx - 1 : 0;\n        const d = Math.max(ex, ey);\n        if (d > 0) buf[y * W + x] += amt / (d * d + (ex && ey ? 0.6 : 0));\n      }\n    }\n  }\n\n  // Each lamp's glass glows faintly when dark and fills when a signal\n  // arrives, and the flash blooms past its loop onto the board.\n  for (const l of P.lamps) {\n    const f = l.flash;\n    const out = l.rad + (6 + 10 * g) * (l.rad / 4);\n    const x0 = Math.max(0, Math.floor(l.cx - out));\n    const x1 = Math.min(W, Math.ceil(l.cx + out));\n    for (let y = Math.max(0, Math.floor(l.cy - out)); y \u003c Math.min(H, Math.ceil(l.cy + out)); y++) {\n      for (let x = x0; x \u003c x1; x++) {\n        const d = Math.hypot(x + 0.5 - l.cx, y + 0.5 - l.cy);\n        let v = 0;\n        if (d \u003c l.rad) v = 0.13 + 0.87 * f * (1 - 0.15 * (d / l.rad));\n        else if (d \u003c out) v = f * 0.9 * ((out - d) / (out - l.rad)) ** 1.3;\n        if (v > lamp[y * W + x]) lamp[y * W + x] = v;\n      }\n    }\n  }\n\n  // Black board, then every wire cell by its state. Plain copper takes a\n  // share of the light around it; a cell an electron just left still burns\n  // with the tail colour for a moment.\n  const after = P.after;\n  const heat = P.heat;\n  for (let y = 0; y \u003c H; y++) {\n    const row = (y >> 1) * CW;\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const i = id[row + (x >> 1)];\n      const h = halo[q] \u003c 1 ? halo[q] : 1;\n      const t = glowTail[q] \u003c 1 ? glowTail[q] : 1;\n      const m = lamp[q];\n      let r = head[0] * h + tail[0] * t + lampC[0] * m;\n      let gg = head[1] * h + tail[1] * t + lampC[1] * m;\n      let b = head[2] * h + tail[2] * t + lampC[2] * m;\n      if (i >= 0) {\n        const v = s[i];\n        if (v === HEAD) {\n          r = head[0];\n          gg = head[1];\n          b = head[2];\n        } else if (v === TAIL) {\n          r = tail[0];\n          gg = tail[1];\n          b = tail[2];\n        } else {\n          const c = pal[P.part[i]];\n          const w = 0.72 + 0.25 * (heat[i] \u003c 2 ? heat[i] : 2);\n          const a = after[i] * 0.8;\n          r = c[0] * w + (tail[0] - c[0] * w) * a + r * 0.5;\n          gg = c[1] * w + (tail[1] - c[1] * w) * a + gg * 0.5;\n          b = c[2] * w + (tail[2] - c[2] * w) * a + b * 0.5;\n        }\n      }\n      display.setPixel(x, y, r \u003c 255 ? r : 255, gg \u003c 255 ? gg : 255, b \u003c 255 ? b : 255);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..3, Speed=0..4, Pulses=1..3, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":3,"about":"0 copper wire with blue-white heads and red-orange tails, 1 green phosphor, 2 blueprint, 3 neon."},{"name":"Speed","min":0,"max":4,"about":"Ticks per second, from 2 to 14 (8 at the start); the afterglow behind an electron fades in a quarter second at any speed, so a fast electron draws a long streak and a slow one hops cell to cell."},{"name":"Pulses","min":1,"max":3,"about":"One, two or three electrons on each clock loop, six cells apart (the 12-cell loop holds two), which changes the rhythm of every lamp; at three the first XOR gets a pulse on both inputs every bit and its lamp goes out."},{"name":"Glow","min":0,"max":1,"about":"The light electrons and lamps throw on the dark board, from a one-LED rim to a bloom four LEDs wide, and the afterglow stretches from 0.25 s to 0.8 s."}],"start":[0,2,1,0.06],"measures":{"motion":0.2605,"detail":0.0895,"edges":0.7694,"complexity":0.461,"coverage":0.3111,"colour":0.2355,"drift":0.0855},"knobResponse":[0.0911,0.0637,0.0514,0.0736]},{"slug":"woodpecker","title":"Woodpecker","family":"bird","round":21,"note":"새벽 숲의 자작나무 줄기가 128줄을 다 쓰고, 오색딱따구리가 뻣뻣한 꽁지로 버티며 껑충껑충 오르다 멈춰 머리가 흐려지도록 두드려 부스러기를 튀기고 구멍을 내요. 꼭대기에 닿으면 물결치듯 날아 밑동으로 내려가 다시 오르고, K1 을 누르면 다음 걸음 뒤에 바로 두드려요.","idea":"A great spotted woodpecker hops up a tree trunk that runs the full height of the panel, braced on its stiff tail, stops to drum a hole with bark chips flying, and at the top drops off in a bounding flight to the foot of the trunk to start again, in a wood lit through the canopy.","buttons":"K1 tap makes the male stop and drum after his next hop.","code":"// ===== Patternflow pattern =====\n// Title:   Woodpecker\n// Family:  bird\n// Idea:    A great spotted woodpecker hops up a tree trunk that runs the full height of the panel, braced on its stiff tail, stops to drum a hole with bark chips flying, and at the top drops off in a bounding flight to the foot of the trunk to start again, in a wood lit through the canopy.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after field-guide plates of the great spotted woodpecker (Dendrocopos major)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Tree=0..2, Speed=0.2..3, Birds=1..4, Light=0..1\n//\n// Knob 1: Tree. A silver birch at 0, white with black lenticels and a fissured black foot; a Scots pine at 1, grey plates low down and thin orange bark higher up; an oak at 2, deeply furrowed and grey with lichen. The wood behind is of the same tree.\n// Knob 2: Speed. How fast the bird, the wind and the light go: at 2 all of it runs in real time, the bird takes 15 to 20 s up the trunk with its stops to drum and under 3 s back down; 0.2 is ten times slower.\n// Knob 3: Birds. One male at 1; at 2 his mate works a nearer trunk that comes in on the right; at 3 a red-capped young bird of the year climbs another at the left, and at 4 a second one climbs the right-hand edge of his trunk.\n// Knob 4: Light. Dawn at 0 with the sun low in the east and shafts through the mist, noon at 0.5, dusk at 1 with the sun low in the west.\n// Buttons: K1 tap makes the male stop and drum after his next hop.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, sqrt, pow, asin, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mul = (c, k) => c.map((v) => v * k);\nconst lum = (c) => (c[0] + c[1] + c[2]) / 3;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Trunks: centre, radius, the row where the foot meets the ground, haze. The near one first.\nconst TR = [[30, 10, 119, 0], [57, 5.4, 108, 0.16], [2.2, 5.2, 110, 0.12]];\nconst rad = (T, y) => T[1] * (1 + 0.7 * sm((y - T[2] + 16) / 16) ** 2);\n// Who climbs where: trunk, side (-1 the left edge, so the bird faces right), kind (0 male, 1 female, 2 young), first row.\nconst FLOCK = [[0, -1, 0, 50], [1, -1, 1, 74], [2, 1, 2, 40], [0, 1, 2, 96]];\nconst TOP = 27;\n// The clinging bird facing right, the bark on its right: rows 0..4 the head, then the body and the\n// stiff tail. The toes on row 10 grip the bark's edge, and the bill on row 3 reaches one LED into it.\n// C crown, N nape, K black, W white, w buff, R red, G bill and toes, e eye.\nconst HEAD = [\"..CCC....\", \".CCCCC...\", \"NCCCWWW..\", \"NWWeWWGG.\", \"KWKKKKG..\"];\nconst UPH = [\"..CCC.G..\", \".CCCCCG..\", \"NCCCWeW..\", \"NWWWWW...\", \"KWKKKK...\"];\nconst BODY = [\"KKKWWW...\", \"KKKKWw...\", \"KWWKww...\", \"KWWWww...\", \"KWWKww...\", \"KKKKwwG..\", \"KWKWww...\", \".KKKwR...\", \"..KKRRG..\", \"..KKRR...\", \"...KK....\", \"....KK...\", \".....K...\"];\n// In flight, facing right: the bird with its wings closed for the bound, wings up, wings down.\nconst FLB = [\".......CCC...\", \"KKK.KKKNCWW..\", \"KKKKKWWKWeWGG\", \"...RRwwwKKK..\", \".....www.....\"];\nconst WUP = [\".....W.......\", \"....KWKW.....\", \".....KWKW....\"];\nconst WDN = [\"....KWKWw....\", \"...KWKW......\", \"....W........\"];\nconst COL = { K: [24, 22, 28], W: [244, 240, 228], w: [222, 208, 184], G: [70, 70, 78], e: [90, 26, 26] };\n// Male, female, young: crown, nape, the red under the tail.\nconst KIND = [{ C: \"K\", N: \"R\", R: [232, 28, 40] }, { C: \"K\", N: \"K\", R: [232, 28, 40] }, { C: \"R\", N: \"K\", R: [240, 112, 122] }];\n// Birch, pine, oak: far trunk, foliage, leaf, ground.\nconst SP = [\n  [[0.86, 0.84, 0.8], [0.36, 0.56, 0.2], [0.56, 0.82, 0.28], [0.36, 0.44, 0.16]],\n  [[0.68, 0.38, 0.24], [0.14, 0.32, 0.2], [0.24, 0.48, 0.28], [0.36, 0.32, 0.16]],\n  [[0.36, 0.34, 0.3], [0.24, 0.4, 0.13], [0.4, 0.62, 0.2], [0.42, 0.32, 0.16]],\n];\n// Dawn, morning, noon, afternoon, dusk: sky, haze, sun, shade, shafts.\nconst HOURS = [\n  [250, 220, 172, 172, 156, 150, 255, 188, 104, 70, 80, 104, 1],\n  [214, 232, 240, 150, 176, 160, 255, 230, 170, 78, 100, 108, 0.75],\n  [186, 220, 252, 128, 170, 132, 255, 250, 232, 90, 116, 96, 0.45],\n  [244, 220, 160, 160, 150, 104, 255, 206, 128, 90, 90, 74, 0.7],\n  [252, 150, 116, 108, 78, 110, 255, 120, 60, 50, 44, 80, 0.9],\n];\nconst [CLING, HOP, DRUM, PROBE, FLY] = [0, 1, 2, 3, 4];\n\n// Bark colour at arc length s round the trunk and row y.\nfunction bark(k, s, y) {\n  const g = vn(s * 0.7, y * 0.35), q = 0.9 + 0.2 * g;\n  let c;\n  if (k === 0) {\n    // Birch: white, with dark lenticels, black scars, pink where it peels, a fissured black foot.\n    c = [0.92 * q, 0.9 * q, 0.85 * q];\n    if (vn(s * 0.22 + 3, y * 0.13) > 0.83) c = [0.12, 0.11, 0.12];\n    else if (vn(s * 0.3 + 5, y * 1.3) > 0.79) c = [0.22, 0.2, 0.2];\n    else if (vn(s * 0.3 + 20, y * 0.45) > 0.82) c = [0.9, 0.66, 0.54];\n    if (sm((y - 88) / 24) * (0.55 + 0.6 * vn(s * 0.25, y * 0.08 + 4)) > 0.5) c = abs(vn(s * 0.55, y * 0.11) * 2 - 1) \u003c 0.3 ? [0.07, 0.06, 0.06] : mul([0.34, 0.33, 0.32], q);\n  } else if (k === 1) {\n    // Scots pine: plates split by deep fissures low down, thin orange flakes higher up.\n    const up = sm((64 - y) / 22 + vn(s * 0.2, y * 0.05) - 0.5), r = abs(vn(s * 0.32, y * 0.085) * 2 - 1), i = vn(s * 0.9, y * 0.5), f = vn(s * 0.8 + 9, y * 0.9);\n    const lo = r \u003c 0.16 ? [0.09, 0.06, 0.05] : [mix(0.44, 0.6, i) * q, mix(0.38, 0.32, i) * q, mix(0.32, 0.22, i) * q];\n    const hi = f > 0.7 ? [0.96, 0.68, 0.44] : f \u003c 0.25 ? [0.52, 0.24, 0.14] : [(0.84 + 0.1 * i) * q, (0.44 + 0.08 * i) * q, 0.24 * q];\n    c = lo.map((v, j) => mix(v, hi[j], up));\n  } else {\n    // Oak: deep furrows in a net of grey ridges.\n    const r = abs(vn(s * 0.55, y * 0.04) * 2 - 1) + 0.12 * (vn(s * 1.3, y * 0.2) - 0.5);\n    c = r \u003c 0.12 || vn(s * 1.1, y * 0.5 + 9) > 0.85 ? [0.09, 0.08, 0.07] : mul([0.64, 0.6, 0.53], q * (r \u003c 0.24 ? 0.68 : 1));\n  }\n  if (vn(s * 0.45 + 40, y * 0.35 + 40) > [0.86, 0.86, 0.76][k]) c = mul([0.66, 0.74, 0.54], q);\n  if (k && y > 94 && vn(s * 0.3 + 60, y * 0.2) > 0.78 - (y - 94) / 90) c = [0.26 * q, 0.4 * q, 0.1];\n  return c;\n}\n\nfunction build(P) {\n  const { alb, mat, hz, nx, zb } = P, k = P.kind, [FT, FF, LF, GR] = SP[k];\n  const put = (x, y, m, c, h, n, z) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    [mat[p], hz[p], nx[p], zb[p]] = [m, h, n, z];\n    alb.set(c, p * 3);\n  };\n  // Leaves overhead with the sky through them, the wood fading into the haze, the ground.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const d = vn(x * 0.11, y * 0.14) * 0.55 + vn(x * 0.3 + 5, y * 0.3) * 0.3 + vn(x * 0.8, y * 0.8) * 0.15, q = 0.75 + 0.5 * vn(x * 0.6 + 3, y * 0.6), gl = 99 + 3 * vn(x * 0.09, 3.1);\n      const b = vn(x * 0.13, y * 0.11 + 30) * 0.7 + vn(x * 0.45, y * 0.4) * 0.3 + (y - 56) / 90;\n      if (d > 0.28 + 0.4 * sm((y - 4) / 26) && y \u003c 32) put(x, y, 1, mul(FF, q * (1.25 - d * 0.6)), 0, 0, 2);\n      else if (y \u003c 12 + 8 * vn(x * 0.1, 9)) put(x, y, 0, FF, 0, 0, 2);\n      else if (y \u003c gl) put(x, y, 2, mul(FF, q), b > 0.75 && y > 54 ? 0.5 - (y - 56) / 140 : 0.2 + 0.68 * sm((y - 26) / 64) + 0.2 * (vn(x * 0.2, y * 0.08 + 60) - 0.5), 0, 2);\n      else put(x, y, 4, mul(GR, q), 0.6 * (1 - sm((y - gl) / 14)), 0, 2);\n    }\n  // Far trunks, thin and pale, then a few nearer ones.\n  for (let i = 0; i \u003c 14; i++) {\n    const near = i > 8, w = near ? 2.5 + rnd() * 2 : 1 + rnd() * 1.4, cx = rnd() * 66 - 1, h = near ? 0.32 + rnd() * 0.12 : 0.58 + rnd() * 0.18;\n    for (let y = floor(rnd() * 12); y \u003c 101 + (near ? 4 : 0); y++)\n      for (let x = floor(cx - w / 2); x \u003c= cx + w / 2; x++) {\n        const u = (x + 0.5 - cx) / (w / 2 + 0.01), m = mat[y * W + x];\n        if (abs(u) \u003c= 1 && m !== 1) put(x, y, 3, k || near ? bark(k, u * 3 + i * 9, y) : y > 92 || vn(x + i * 7, y * 0.9) > 0.8 ? [0.2, 0.2, 0.2] : FT, h, u, 2);\n      }\n  }\n  // The near trunks, full bark and rounded.\n  for (let t = P.nt - 1; t >= 0; t--) {\n    const T = TR[t], [cx, r0, fy, h] = T;\n    for (let y = 0; y \u003c min(H, fy + 3); y++)\n      for (let r = rad(T, y), x = floor(cx - r); x \u003c= cx + r; x++) {\n        const u = (x + 0.5 - cx) / r, s = asin(cl(u, -1, 1)) * r0 + t * 40;\n        // The bark's own relief tips the normal, so ridges catch a low sun on one side.\n        if (abs(u) \u003c= 1) put(x, y, 3, bark(k, s, y), h, cl(u + (lum(bark(k, s - 0.7, y)) - lum(bark(k, s + 0.7, y))) * 1.6, -1, 1), t ? 1 : 0);\n      }\n  }\n  // Limbs off the near trunk: a live one to the right, one up into the crown, a dead stub on the left.\n  const limb = (x0, y0, x1, y1, w0, w1, dead) => {\n    for (let i = 0, n = abs(x1 - x0) * 2; i \u003c= n; i++) {\n      const f = i / n, x = round(mix(x0, x1, f)), yc = mix(y0, y1, f) + 3 * sin(PI * f), w = mix(w0, w1, f);\n      for (let j = 0; j \u003c w; j++) put(x, round(yc - w / 2 + j), 3, mul(bark(dead ? 2 : k, i * 0.6 + 70, j * 4 + 30), j \u003c 1 ? 1.15 : j > w - 2 ? 0.6 : 0.9), 0, j \u003c 1 ? -0.5 : 0.4, 0);\n    }\n  };\n  limb(38, 57, 64, 41, 4, 2, k === 1);\n  limb(46, 54, 52, 42, 1.5, 1, k === 1);\n  limb(56, 48, 61, 36, 1.5, 1, k === 1);\n  limb(38, 24, 62, 4, 3, 1.5);\n  limb(21, 87, 15, 83, 3, 2, true);\n  // The near ground: moss, litter, roots.\n  for (let y = 110; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, g = vn(x * 0.4, y * 0.5), l = vn(x * 0.9 + 5, y * 0.9);\n      if ((mat[p] === 3 && y \u003c 121) || (y \u003c 117 && hz[p] > 0.05)) continue;\n      put(x, y, 4, l > 0.72 ? [0.56, 0.36, 0.16] : g > 0.6 ? [0.26, 0.46, 0.1] : mul(GR, 0.7 + 0.5 * l), 0, 0, y > 116 ? 0 : 1);\n    }\n  for (const [x0, dir] of [[21, -1], [24, -1], [36, 1], [39, 1], [30, 1]])\n    for (let i = 0, x = x0, y = 117; i \u003c 14; i++) {\n      (x += dir * (0.7 + rnd() * 0.5)), (y += 0.35 + rnd() * 0.4);\n      put(round(x), round(y), 3, bark(k, i, 100 + i), 0, -0.3, 0);\n      put(round(x), round(y) + 1, 3, mul(bark(k, i, 101 + i), 0.6), 0, 0.5, 0);\n    }\n  // Leaves that move: on the right limb, over the top of the trunk, hanging in from the crown.\n  const L = (P.leaves = []);\n  const spray = (cx, cy, r, n) => {\n    for (let i = 0; i \u003c n; i++) {\n      const a = rnd() * PI * 2, d = r * sqrt(rnd());\n      L.push([round(cx + cos(a) * d), round(cy + sin(a) * d * 0.7), floor(rnd() * 4), 0.7 + rnd() * 0.6, rnd() * 7]);\n    }\n  };\n  if (k !== 1) [[52, 41, 7, 60], [61, 37, 6, 50], [46, 48, 4, 18], [58, 49, 4, 20]].forEach(([x, y, r, n]) => spray(x, y, r, n * (k ? 1.3 : 1)));\n  [[30, 3, 9, 70], [50, 10, 9, 70], [60, 3, 7, 50], [7, 20, 6, 40], [14, 14, 5, 24], [40, 18, 4, 16]].forEach((a) => spray(...a));\n  P.leafC = LF;\n  P.ferns = Array.from({ length: 12 }, (_, i) => [(i * 5.7 + rnd() * 4) % 64, 124 + rnd() * 5, 9 + rnd() * 8, (i % 2 ? 1 : -1) * (0.4 + rnd() * 0.5), rnd() * 7]);\n  P.holes = P.holes.filter((h) => h[3] \u003c P.nt);\n}\n\n// Light for the hour: what lies in shade, and what the sun adds where it gets through.\nfunction paint(P) {\n  const f = P.h * 4, i = min(3, floor(f)), q = HOURS[i].map((v, c) => mix(v, HOURS[i + 1][c], f - i)), { alb, mat, hz, nx, bg, sa } = P;\n  const sky = q.slice(0, 3), haze = q.slice(3, 6), sun = (P.sun = q.slice(6, 9)), amb = (P.amb = q.slice(9, 12));\n  const sx = (P.sx = -0.85 + 1.7 * P.h), sz = 0.55, sl = sqrt(sx * sx + sz * sz);\n  for (let p = 0; p \u003c N; p++) {\n    const m = mat[p], y = p >> 6, h = hz[p], n = nx[p], nz = sqrt(max(0, 1 - n * n)), d = m === 3 ? max(0, (n * sx + nz * sz) / sl) : m === 4 ? 0.8 : m === 1 ? 0.7 : 0.2;\n    const sh = m === 3 ? 0.35 + 0.65 * nz : m === 1 ? 0.8 : 0.9, hk = 1.1 - y / 180;\n    // How strongly the shafts show here: most in the haze, faint in front of the near trunk.\n    P.sw[p] = m ? (q[12] * 100 * (0.25 + 0.75 * h) * (1.1 - y / 160)) / 255 : 0;\n    for (let c = 0, o = p * 3; c \u003c 3; c++) {\n      const a = alb[o + c];\n      bg[o + c] = m ? mix(a * amb[c] * sh * 1.1, haze[c] * hk, h) : mix(sky[c], 255, 0.3);\n      sa[o + c] = m ? a * sun[c] * d * (1 - h) : 0;\n    }\n  }\n}\n\nfunction newBird(i) {\n  const [tr, side, kind, y] = FLOCK[i];\n  return { tr, side, face: -side, kind, y, st: CLING, t: 0, dur: 0.2 + i * 0.35, hops: 2, work: 4 + i * 11, head: 0, out: 0, look: 0 };\n}\n// The bark's edge pixel at row y, where the toes grip.\nconst feetX = (B, y) => round(TR[B.tr][0] + B.side * (rad(TR[B.tr], y) - 0.5));\nconst footRow = (B) => TR[B.tr][2] - 17;\n\nfunction stepBird(P, B, d) {\n  const go = (s, dur) => ((B.st = s), (B.t = 0), (B.dur = dur));\n  B.t += d;\n  switch (B.st) {\n    case CLING:\n      B.head = B.t > 0.15 && B.t \u003c B.dur - 0.1 ? B.look : 0;\n      B.out = 0;\n      if (B.t \u003c B.dur) break;\n      if (B.y \u003c= TOP) [B.x0, B.y0] = [feetX(B, B.y), B.y], go(FLY, 2.6);\n      else if (B.work \u003c= 0) {\n        // Drum where an old hole is, or start a new one.\n        const hx = feetX(B, B.y) + B.face * 2, hy = round(B.y) - 7;\n        B.hole = P.holes.find((h) => h[3] === B.tr && abs(h[0] - hx) \u003c 2 && abs(h[1] - hy) \u003c 3);\n        if (!B.hole) P.holes.push((B.hole = [hx, hy, 0.4, B.tr])), P.holes.length > 30 && P.holes.shift();\n        go(DRUM, 1.3 + rnd() * 1.2);\n      } else (B.y0 = B.y), (B.len = 2.5 + rnd() * 2.5), go(HOP, 0.15);\n      break;\n    case HOP: {\n      const u = B.t / B.dur;\n      B.y = mix(B.y0, B.y0 - B.len, sm(u / 0.5));\n      B.out = u \u003c 0.6 ? 1 : 0;\n      if (u \u003c 1) break;\n      B.work -= B.len;\n      if (--B.hops > 0) (B.look = 0), go(CLING, 0.04 + rnd() * 0.1);\n      else (B.hops = 2 + floor(rnd() * 4)), (B.look = rnd() \u003c 0.6 ? 1 + floor(rnd() * 2) : 0), go(CLING, 0.3 + rnd() * 0.8);\n      break;\n    }\n    case DRUM: {\n      // Bursts of strikes too fast to see: the head is a blur and chips fly.\n      const on = B.t % 0.62 \u003c 0.42;\n      B.head = on ? 3 : 0;\n      if (on) {\n        B.hole[2] = min(2.2, B.hole[2] + d * 0.5);\n        for (let n = rnd() \u003c d * 30 ? 1 + (rnd() \u003c 0.5) : 0; n > 0; n--) P.chips.push([B.hole[0] + B.side, B.hole[1] + (rnd() - 0.5) * 2, B.side * (12 + rnd() * 30), -(4 + rnd() * 26), floor(rnd() * 3), 0, B.tr ? 1 : 0]);\n      }\n      if (B.t >= B.dur) go(PROBE, 0.7 + rnd() * 0.6);\n      break;\n    }\n    case PROBE:\n      B.head = floor(B.t / 0.18) % 3 ? 4 : 0;\n      if (B.t >= B.dur) (B.work = 16 + rnd() * 24), (B.look = 1), go(CLING, 0.5);\n      break;\n    case FLY:\n      if (B.t >= B.dur) (B.y = footRow(B)), (B.look = 0), go(CLING, 0.5);\n  }\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), hz: F(N), nx: F(N), zb: new Uint8Array(N), mat: new Uint8Array(N), bg: F(N * 3), sa: F(N * 3), sw: F(N), buf: F(N * 3), lit: F(N), kind: -1, nt: 0, h: -1, t: 0, holes: [], chips: [], falls: [] });\n  P.birds = FLOCK.map((_, i) => newBird(i));\n  // Sun flecks: a tile of soft blobs the crown lets through, wrapped both ways.\n  const FT = (P.ft = F(16384));\n  for (const [c, a] of [[16, 0.3], [8, 0.45], [4, 0.25]]) {\n    const n = 128 / c, g = Array.from({ length: n * n }, rnd);\n    for (let i = 0; i \u003c 16384; i++) {\n      const x = (i & 127) / c, y = (i >> 7) / c, x0 = floor(x), y0 = floor(y), u = sm(x - x0), v = sm(y - y0), X = (x0 + 1) % n, Y = (y0 + 1) % n;\n      FT[i] += a * mix(mix(g[y0 * n + x0], g[y0 * n + X], u), mix(g[Y * n + x0], g[Y * n + X], u), v);\n    }\n  }\n  const S = (P.shafts = F(256));\n  for (let n = 0; n \u003c 7; n++) {\n    const c = rnd() * 256, w = 3 + rnd() * 9, a = 0.4 + rnd() * 0.6;\n    for (let i = 0; i \u003c 256; i++) S[i] = min(1, S[i] + a * Math.exp(-((abs(((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06], kind = round(cl(k[0], 0, 2)), nb = round(cl(k[2], 1, 4)), nt = min(3, nb), h = cl(k[3], 0, 1);\n  const d = (cl(dt, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  if (kind !== P.kind || nt !== P.nt) (P.kind = kind), (P.nt = nt), build(P), (P.h = -1);\n  if (abs(h - P.h) > 0.0005) (P.h = h), paint(P);\n  P.nb = nb;\n  // K1 tap: the male stops to drum after his next hop.\n  if (input.btnPressed?.[0]) P.birds[0].work = 0;\n  P.t += d;\n  for (let i = 0; i \u003c nb; i++) stepBird(P, P.birds[i], d);\n  P.chips = P.chips.filter((c) => {\n    if (c[5]) return (c[5] += d) \u003c 6;\n    c[3] += 110 * d;\n    c[2] *= 1 - 1.6 * d;\n    c[0] += c[2] * d;\n    c[1] += c[3] * d;\n    if (c[1] >= 118 + (c[6] ? -8 : (c[0] * 7) % 9)) c[5] = d;\n    return c[0] > -2 && c[0] \u003c W + 2;\n  });\n  // Now and then a leaf lets go up in the crown.\n  if (rnd() \u003c d * 0.6) P.falls.push([rnd() * W, 8 + rnd() * 10, 7 + rnd() * 6, rnd() * 7]);\n  P.falls = P.falls.filter((f) => ((f[1] += f[2] * d), (f[0] += sin(P.t * 2.2 + f[3]) * 9 * d + 2 * d), f[1] \u003c 121));\n}\n\nlet BUF;\nconst A = (x, y, r, g, b, a = 1) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n};\n\n// Sun flecks moving with the crown, and shafts through the haze.\nfunction light(P) {\n  const { buf, bg, sa, ft, lit, sw, shafts: S, t, sx } = P, w = 0.6 + 0.4 * sin(t * 0.31) * sin(t * 0.17 + 2);\n  const ax = 4 * sin(t * 0.5) + 2 * sin(t * 1.3) * w + t * 0.6, ay = 2 * sin(t * 0.4 + 1), bx = -t * 1.1 + 3 * sin(t * 0.8) * w, by = 1.5 * sin(t * 0.6) + 40;\n  const [ix, iy, jx, jy] = [floor(ax), floor(ay), floor(bx), floor(by)], [fx, fy, gx, gy] = [ax - ix, ay - iy, bx - jx, by - jy];\n  const so = t * 0.9 + 3 * sin(t * 0.23), [sr, sg, sb] = P.sun;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    const r0 = ((y + iy) & 127) \u003c\u003c 7, r1 = ((y + iy + 1) & 127) \u003c\u003c 7, q0 = ((y + jy) & 127) \u003c\u003c 7, q1 = ((y + jy + 1) & 127) \u003c\u003c 7, bo = y * sx * 0.8 + so;\n    for (let x = 0; x \u003c W; x++, p++) {\n      const x0 = (x + ix) & 127, x1 = (x0 + 1) & 127, z0 = (x + jx) & 127, z1 = (z0 + 1) & 127, u = ft[r0 + x0], v = ft[r1 + x0], e = ft[q0 + z0], g = ft[q1 + z0];\n      const a = u + (ft[r0 + x1] - u) * fx, c = v + (ft[r1 + x1] - v) * fx, b = e + (ft[q0 + z1] - e) * gx, d = g + (ft[q1 + z1] - g) * gx;\n      let f = ((a + (c - a) * fy) * 0.55 + (b + (d - b) * gy) * 0.45 - 0.47) * 9;\n      f = f \u003c= 0 ? 0 : f >= 1 ? 1 : f * f * (3 - 2 * f);\n      const l = (lit[p] = 0.15 + 0.85 * f), s = S[(x + bo) & 255] * sw[p], o = p * 3;\n      buf[o] = bg[o] + sa[o] * l + s * sr;\n      buf[o + 1] = bg[o + 1] + sa[o + 1] * l + s * sg;\n      buf[o + 2] = bg[o + 2] + sa[o + 2] * l + s * sb;\n    }\n  }\n}\n\nfunction lightAt(P, x, y) {\n  const l = P.lit[cl(round(y), 0, H - 1) * W + cl(round(x), 0, W - 1)];\n  return [0, 1, 2].map((c) => (P.amb[c] + 96 + P.sun[c] * 0.65 * l) / 255);\n}\n\nfunction sprite(P, rows, x0, y0, face, cmap, L, a, z, dx = 0) {\n  rows.forEach((row, r) => {\n    for (let c = 0; c \u003c row.length; c++) {\n      const ch = row[c], col = ch === \"R\" ? cmap.R : COL[cmap[ch] || ch], x = x0 + (c + dx) * face, y = y0 + r;\n      if (!col || (z && P.zb[cl(y, 0, H - 1) * W + cl(x, 0, W - 1)] \u003c 1)) continue;\n      A(x, y, min(255, col[0] * L[0]), min(255, col[1] * L[1]), min(255, col[2] * L[2]), a);\n    }\n  });\n}\n\nfunction drawBird(P, B) {\n  const cm = KIND[B.kind], z = B.tr > 0, hk = 1 - TR[B.tr][3] * 0.6;\n  if (B.st === FLY) {\n    // Three bounds out from the trunk and down to its foot: wings beating on the rise, shut on the drop.\n    const u = B.t / B.dur, b = (u * 3) % 1, f = u \u003c 0.5 ? B.side : -B.side, x = cl(B.x0 + B.side * 17 * pow(sin(PI * u), 0.7), 3, 60), y = mix(B.y0 - 8, footRow(B) - 6, sm(u)) - 6 * sin(PI * b);\n    const L = mul(lightAt(P, x, y), hk), xi = round(x - f * 6), yi = round(y) - 2, up = floor(B.t / 0.06) & 1;\n    if (u > 0.94) return sprite(P, [...HEAD, ...BODY], feetX(B, footRow(B)) - B.face * 6, footRow(B) - 10, B.face, cm, L, 1, z);\n    sprite(P, FLB, xi, yi, f, cm, L, 1, z);\n    if (b \u003c 0.45) sprite(P, up ? WUP : WDN, xi, up ? yi - 3 : yi + 4, f, cm, L, 1, z);\n    return;\n  }\n  const L = mul(lightAt(P, feetX(B, B.y), B.y - 4), hk), x0 = feetX(B, B.y) - B.face * (6 + B.out), y0 = round(B.y) - 10;\n  sprite(P, BODY, x0, y0 + 5, B.face, cm, L, 1, z);\n  if (B.head === 3) for (let i = 0, f = floor(P.t * 30) & 1; i \u003c 2; i++) sprite(P, HEAD, x0, y0, B.face, cm, L, i ? 0.45 : 1, z, i ^ f);\n  else if (B.head === 2) sprite(P, HEAD, x0 + B.face * 6, y0, -B.face, cm, L, 1, z);\n  else sprite(P, B.head === 1 ? UPH : HEAD, x0, y0, B.face, cm, L, 1, z, B.head === 4 ? 1 : 0);\n}\n\nexport function draw(display, params) {\n  const P = params, { t, leafC, sun, amb, lit } = P, w = 0.6 + 0.4 * sin(t * 0.31) * sin(t * 0.17 + 2);\n  BUF = P.buf;\n  light(P);\n  // Holes: dark, with a rim of fresh pale wood below.\n  for (const [hx, hy, r, tr] of P.holes) {\n    const L = mul(lightAt(P, hx, hy), 1 - TR[tr][3] * 0.5);\n    for (let y = floor(hy - r - 1); y \u003c= hy + r + 1; y++)\n      for (let x = floor(hx - r - 1); x \u003c= hx + r + 1; x++) {\n        const e = sqrt(((x - hx) / max(0.6, r * 0.8)) ** 2 + ((y - hy) / max(0.6, r)) ** 2);\n        if (e \u003c 1) A(x, y, 12, 8, 6);\n        else if (e \u003c 1.6) A(x, y, 240 * L[0], 212 * L[1], 156 * L[2], y > hy ? 0.9 : 0.5);\n      }\n  }\n  for (let i = 0; i \u003c P.nb; i++) if (P.birds[i].tr) drawBird(P, P.birds[i]);\n  // Leaves stir in the wind and catch the sun as they turn.\n  for (const [lx, ly, s, tone, ph] of P.leaves) {\n    const x = lx + round(sin(t * (1.2 + w) + ph) * w), q = max(0, sin(t * (2 + 2 * w) + ph * 3)) ** 6, l = lit[cl(ly, 0, H - 1) * W + cl(x, 0, W - 1)] * (0.85 + 0.6 * q);\n    const r = leafC[0] * tone * (amb[0] * 0.9 + sun[0] * l), g = leafC[1] * tone * (amb[1] * 0.9 + sun[1] * l), b = leafC[2] * tone * (amb[2] * 0.9 + sun[2] * l) + 20 * q;\n    A(x, ly, r, g, b);\n    if (s & 1) A(x + 1, ly, r * 0.8, g * 0.8, b * 0.8);\n    if (s > 1) A(x, ly + 1, r * 0.7, g * 0.7, b * 0.7);\n  }\n  for (let i = 0; i \u003c P.nb; i++) if (!P.birds[i].tr) drawBird(P, P.birds[i]);\n  for (const [x, y, , , c, , z] of P.chips) {\n    const L = lightAt(P, x, y), col = [[236, 210, 160], [200, 170, 120], [120, 96, 80]][c], xi = round(x), yi = round(y);\n    if (!z || P.zb[cl(yi, 0, H - 1) * W + cl(xi, 0, W - 1)]) A(xi, yi, col[0] * L[0], col[1] * L[1], col[2] * L[2]);\n  }\n  for (const [x, y, , ph] of P.falls) {\n    const L = lightAt(P, x, y), k = 255 * (0.8 + 0.4 * sin(t * 6 + ph));\n    A(round(x), round(y), leafC[0] * k * L[0], leafC[1] * k * L[1], leafC[2] * k * L[2]);\n  }\n  // Bracken in front, arching and swaying, the fronds narrowing to the tip.\n  for (const [fx, fy, len, lean, ph] of P.ferns)\n    for (let s = 0, x = fx, y = fy, sw = sin(t * 1.4 + ph) * 0.12 * w; s \u003c len; s++) {\n      const f = s / len, a = (lean + sw) * f * 1.8 - 0.2 * lean, ca = cos(a), sa = sin(a), L = mul(lightAt(P, (x += sa), (y -= ca)), 0.6 + 0.4 * f);\n      A(round(x), round(y), 70 * L[0], 120 * L[1], 36 * L[2]);\n      if (s > 2) for (let j = 1, n = round(3.2 * (1 - f)) + (s & 1); j \u003c= n; j++) for (const e of [-1, 1]) A(round(x + e * j * ca), round(y + e * j * sa + j * 0.35), 96 * L[0], 168 * L[1], 52 * L[2], 0.9);\n    }\n  show(display, P.buf);\n}\n\nfunction show(display, buf) {\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n    display.setPixel(p & 63, p >> 6, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n  }\n}\n","layer":{"id":"layer-woodpecker","type":"code","name":"woodpecker","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Woodpecker\n// Family:  bird\n// Idea:    A great spotted woodpecker hops up a tree trunk that runs the full height of the panel, braced on its stiff tail, stops to drum a hole with bark chips flying, and at the top drops off in a bounding flight to the foot of the trunk to start again, in a wood lit through the canopy.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after field-guide plates of the great spotted woodpecker (Dendrocopos major)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Tree=0..2, Speed=0.2..3, Birds=1..4, Light=0..1\n//\n// Knob 1: Tree. A silver birch at 0, white with black lenticels and a fissured black foot; a Scots pine at 1, grey plates low down and thin orange bark higher up; an oak at 2, deeply furrowed and grey with lichen. The wood behind is of the same tree.\n// Knob 2: Speed. How fast the bird, the wind and the light go: at 2 all of it runs in real time, the bird takes 15 to 20 s up the trunk with its stops to drum and under 3 s back down; 0.2 is ten times slower.\n// Knob 3: Birds. One male at 1; at 2 his mate works a nearer trunk that comes in on the right; at 3 a red-capped young bird of the year climbs another at the left, and at 4 a second one climbs the right-hand edge of his trunk.\n// Knob 4: Light. Dawn at 0 with the sun low in the east and shafts through the mist, noon at 0.5, dusk at 1 with the sun low in the west.\n// Buttons: K1 tap makes the male stop and drum after his next hop.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, sqrt, pow, asin, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mul = (c, k) => c.map((v) => v * k);\nconst lum = (c) => (c[0] + c[1] + c[2]) / 3;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Trunks: centre, radius, the row where the foot meets the ground, haze. The near one first.\nconst TR = [[30, 10, 119, 0], [57, 5.4, 108, 0.16], [2.2, 5.2, 110, 0.12]];\nconst rad = (T, y) => T[1] * (1 + 0.7 * sm((y - T[2] + 16) / 16) ** 2);\n// Who climbs where: trunk, side (-1 the left edge, so the bird faces right), kind (0 male, 1 female, 2 young), first row.\nconst FLOCK = [[0, -1, 0, 50], [1, -1, 1, 74], [2, 1, 2, 40], [0, 1, 2, 96]];\nconst TOP = 27;\n// The clinging bird facing right, the bark on its right: rows 0..4 the head, then the body and the\n// stiff tail. The toes on row 10 grip the bark's edge, and the bill on row 3 reaches one LED into it.\n// C crown, N nape, K black, W white, w buff, R red, G bill and toes, e eye.\nconst HEAD = [\"..CCC....\", \".CCCCC...\", \"NCCCWWW..\", \"NWWeWWGG.\", \"KWKKKKG..\"];\nconst UPH = [\"..CCC.G..\", \".CCCCCG..\", \"NCCCWeW..\", \"NWWWWW...\", \"KWKKKK...\"];\nconst BODY = [\"KKKWWW...\", \"KKKKWw...\", \"KWWKww...\", \"KWWWww...\", \"KWWKww...\", \"KKKKwwG..\", \"KWKWww...\", \".KKKwR...\", \"..KKRRG..\", \"..KKRR...\", \"...KK....\", \"....KK...\", \".....K...\"];\n// In flight, facing right: the bird with its wings closed for the bound, wings up, wings down.\nconst FLB = [\".......CCC...\", \"KKK.KKKNCWW..\", \"KKKKKWWKWeWGG\", \"...RRwwwKKK..\", \".....www.....\"];\nconst WUP = [\".....W.......\", \"....KWKW.....\", \".....KWKW....\"];\nconst WDN = [\"....KWKWw....\", \"...KWKW......\", \"....W........\"];\nconst COL = { K: [24, 22, 28], W: [244, 240, 228], w: [222, 208, 184], G: [70, 70, 78], e: [90, 26, 26] };\n// Male, female, young: crown, nape, the red under the tail.\nconst KIND = [{ C: \"K\", N: \"R\", R: [232, 28, 40] }, { C: \"K\", N: \"K\", R: [232, 28, 40] }, { C: \"R\", N: \"K\", R: [240, 112, 122] }];\n// Birch, pine, oak: far trunk, foliage, leaf, ground.\nconst SP = [\n  [[0.86, 0.84, 0.8], [0.36, 0.56, 0.2], [0.56, 0.82, 0.28], [0.36, 0.44, 0.16]],\n  [[0.68, 0.38, 0.24], [0.14, 0.32, 0.2], [0.24, 0.48, 0.28], [0.36, 0.32, 0.16]],\n  [[0.36, 0.34, 0.3], [0.24, 0.4, 0.13], [0.4, 0.62, 0.2], [0.42, 0.32, 0.16]],\n];\n// Dawn, morning, noon, afternoon, dusk: sky, haze, sun, shade, shafts.\nconst HOURS = [\n  [250, 220, 172, 172, 156, 150, 255, 188, 104, 70, 80, 104, 1],\n  [214, 232, 240, 150, 176, 160, 255, 230, 170, 78, 100, 108, 0.75],\n  [186, 220, 252, 128, 170, 132, 255, 250, 232, 90, 116, 96, 0.45],\n  [244, 220, 160, 160, 150, 104, 255, 206, 128, 90, 90, 74, 0.7],\n  [252, 150, 116, 108, 78, 110, 255, 120, 60, 50, 44, 80, 0.9],\n];\nconst [CLING, HOP, DRUM, PROBE, FLY] = [0, 1, 2, 3, 4];\n\n// Bark colour at arc length s round the trunk and row y.\nfunction bark(k, s, y) {\n  const g = vn(s * 0.7, y * 0.35), q = 0.9 + 0.2 * g;\n  let c;\n  if (k === 0) {\n    // Birch: white, with dark lenticels, black scars, pink where it peels, a fissured black foot.\n    c = [0.92 * q, 0.9 * q, 0.85 * q];\n    if (vn(s * 0.22 + 3, y * 0.13) > 0.83) c = [0.12, 0.11, 0.12];\n    else if (vn(s * 0.3 + 5, y * 1.3) > 0.79) c = [0.22, 0.2, 0.2];\n    else if (vn(s * 0.3 + 20, y * 0.45) > 0.82) c = [0.9, 0.66, 0.54];\n    if (sm((y - 88) / 24) * (0.55 + 0.6 * vn(s * 0.25, y * 0.08 + 4)) > 0.5) c = abs(vn(s * 0.55, y * 0.11) * 2 - 1) \u003c 0.3 ? [0.07, 0.06, 0.06] : mul([0.34, 0.33, 0.32], q);\n  } else if (k === 1) {\n    // Scots pine: plates split by deep fissures low down, thin orange flakes higher up.\n    const up = sm((64 - y) / 22 + vn(s * 0.2, y * 0.05) - 0.5), r = abs(vn(s * 0.32, y * 0.085) * 2 - 1), i = vn(s * 0.9, y * 0.5), f = vn(s * 0.8 + 9, y * 0.9);\n    const lo = r \u003c 0.16 ? [0.09, 0.06, 0.05] : [mix(0.44, 0.6, i) * q, mix(0.38, 0.32, i) * q, mix(0.32, 0.22, i) * q];\n    const hi = f > 0.7 ? [0.96, 0.68, 0.44] : f \u003c 0.25 ? [0.52, 0.24, 0.14] : [(0.84 + 0.1 * i) * q, (0.44 + 0.08 * i) * q, 0.24 * q];\n    c = lo.map((v, j) => mix(v, hi[j], up));\n  } else {\n    // Oak: deep furrows in a net of grey ridges.\n    const r = abs(vn(s * 0.55, y * 0.04) * 2 - 1) + 0.12 * (vn(s * 1.3, y * 0.2) - 0.5);\n    c = r \u003c 0.12 || vn(s * 1.1, y * 0.5 + 9) > 0.85 ? [0.09, 0.08, 0.07] : mul([0.64, 0.6, 0.53], q * (r \u003c 0.24 ? 0.68 : 1));\n  }\n  if (vn(s * 0.45 + 40, y * 0.35 + 40) > [0.86, 0.86, 0.76][k]) c = mul([0.66, 0.74, 0.54], q);\n  if (k && y > 94 && vn(s * 0.3 + 60, y * 0.2) > 0.78 - (y - 94) / 90) c = [0.26 * q, 0.4 * q, 0.1];\n  return c;\n}\n\nfunction build(P) {\n  const { alb, mat, hz, nx, zb } = P, k = P.kind, [FT, FF, LF, GR] = SP[k];\n  const put = (x, y, m, c, h, n, z) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    [mat[p], hz[p], nx[p], zb[p]] = [m, h, n, z];\n    alb.set(c, p * 3);\n  };\n  // Leaves overhead with the sky through them, the wood fading into the haze, the ground.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const d = vn(x * 0.11, y * 0.14) * 0.55 + vn(x * 0.3 + 5, y * 0.3) * 0.3 + vn(x * 0.8, y * 0.8) * 0.15, q = 0.75 + 0.5 * vn(x * 0.6 + 3, y * 0.6), gl = 99 + 3 * vn(x * 0.09, 3.1);\n      const b = vn(x * 0.13, y * 0.11 + 30) * 0.7 + vn(x * 0.45, y * 0.4) * 0.3 + (y - 56) / 90;\n      if (d > 0.28 + 0.4 * sm((y - 4) / 26) && y \u003c 32) put(x, y, 1, mul(FF, q * (1.25 - d * 0.6)), 0, 0, 2);\n      else if (y \u003c 12 + 8 * vn(x * 0.1, 9)) put(x, y, 0, FF, 0, 0, 2);\n      else if (y \u003c gl) put(x, y, 2, mul(FF, q), b > 0.75 && y > 54 ? 0.5 - (y - 56) / 140 : 0.2 + 0.68 * sm((y - 26) / 64) + 0.2 * (vn(x * 0.2, y * 0.08 + 60) - 0.5), 0, 2);\n      else put(x, y, 4, mul(GR, q), 0.6 * (1 - sm((y - gl) / 14)), 0, 2);\n    }\n  // Far trunks, thin and pale, then a few nearer ones.\n  for (let i = 0; i \u003c 14; i++) {\n    const near = i > 8, w = near ? 2.5 + rnd() * 2 : 1 + rnd() * 1.4, cx = rnd() * 66 - 1, h = near ? 0.32 + rnd() * 0.12 : 0.58 + rnd() * 0.18;\n    for (let y = floor(rnd() * 12); y \u003c 101 + (near ? 4 : 0); y++)\n      for (let x = floor(cx - w / 2); x \u003c= cx + w / 2; x++) {\n        const u = (x + 0.5 - cx) / (w / 2 + 0.01), m = mat[y * W + x];\n        if (abs(u) \u003c= 1 && m !== 1) put(x, y, 3, k || near ? bark(k, u * 3 + i * 9, y) : y > 92 || vn(x + i * 7, y * 0.9) > 0.8 ? [0.2, 0.2, 0.2] : FT, h, u, 2);\n      }\n  }\n  // The near trunks, full bark and rounded.\n  for (let t = P.nt - 1; t >= 0; t--) {\n    const T = TR[t], [cx, r0, fy, h] = T;\n    for (let y = 0; y \u003c min(H, fy + 3); y++)\n      for (let r = rad(T, y), x = floor(cx - r); x \u003c= cx + r; x++) {\n        const u = (x + 0.5 - cx) / r, s = asin(cl(u, -1, 1)) * r0 + t * 40;\n        // The bark's own relief tips the normal, so ridges catch a low sun on one side.\n        if (abs(u) \u003c= 1) put(x, y, 3, bark(k, s, y), h, cl(u + (lum(bark(k, s - 0.7, y)) - lum(bark(k, s + 0.7, y))) * 1.6, -1, 1), t ? 1 : 0);\n      }\n  }\n  // Limbs off the near trunk: a live one to the right, one up into the crown, a dead stub on the left.\n  const limb = (x0, y0, x1, y1, w0, w1, dead) => {\n    for (let i = 0, n = abs(x1 - x0) * 2; i \u003c= n; i++) {\n      const f = i / n, x = round(mix(x0, x1, f)), yc = mix(y0, y1, f) + 3 * sin(PI * f), w = mix(w0, w1, f);\n      for (let j = 0; j \u003c w; j++) put(x, round(yc - w / 2 + j), 3, mul(bark(dead ? 2 : k, i * 0.6 + 70, j * 4 + 30), j \u003c 1 ? 1.15 : j > w - 2 ? 0.6 : 0.9), 0, j \u003c 1 ? -0.5 : 0.4, 0);\n    }\n  };\n  limb(38, 57, 64, 41, 4, 2, k === 1);\n  limb(46, 54, 52, 42, 1.5, 1, k === 1);\n  limb(56, 48, 61, 36, 1.5, 1, k === 1);\n  limb(38, 24, 62, 4, 3, 1.5);\n  limb(21, 87, 15, 83, 3, 2, true);\n  // The near ground: moss, litter, roots.\n  for (let y = 110; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, g = vn(x * 0.4, y * 0.5), l = vn(x * 0.9 + 5, y * 0.9);\n      if ((mat[p] === 3 && y \u003c 121) || (y \u003c 117 && hz[p] > 0.05)) continue;\n      put(x, y, 4, l > 0.72 ? [0.56, 0.36, 0.16] : g > 0.6 ? [0.26, 0.46, 0.1] : mul(GR, 0.7 + 0.5 * l), 0, 0, y > 116 ? 0 : 1);\n    }\n  for (const [x0, dir] of [[21, -1], [24, -1], [36, 1], [39, 1], [30, 1]])\n    for (let i = 0, x = x0, y = 117; i \u003c 14; i++) {\n      (x += dir * (0.7 + rnd() * 0.5)), (y += 0.35 + rnd() * 0.4);\n      put(round(x), round(y), 3, bark(k, i, 100 + i), 0, -0.3, 0);\n      put(round(x), round(y) + 1, 3, mul(bark(k, i, 101 + i), 0.6), 0, 0.5, 0);\n    }\n  // Leaves that move: on the right limb, over the top of the trunk, hanging in from the crown.\n  const L = (P.leaves = []);\n  const spray = (cx, cy, r, n) => {\n    for (let i = 0; i \u003c n; i++) {\n      const a = rnd() * PI * 2, d = r * sqrt(rnd());\n      L.push([round(cx + cos(a) * d), round(cy + sin(a) * d * 0.7), floor(rnd() * 4), 0.7 + rnd() * 0.6, rnd() * 7]);\n    }\n  };\n  if (k !== 1) [[52, 41, 7, 60], [61, 37, 6, 50], [46, 48, 4, 18], [58, 49, 4, 20]].forEach(([x, y, r, n]) => spray(x, y, r, n * (k ? 1.3 : 1)));\n  [[30, 3, 9, 70], [50, 10, 9, 70], [60, 3, 7, 50], [7, 20, 6, 40], [14, 14, 5, 24], [40, 18, 4, 16]].forEach((a) => spray(...a));\n  P.leafC = LF;\n  P.ferns = Array.from({ length: 12 }, (_, i) => [(i * 5.7 + rnd() * 4) % 64, 124 + rnd() * 5, 9 + rnd() * 8, (i % 2 ? 1 : -1) * (0.4 + rnd() * 0.5), rnd() * 7]);\n  P.holes = P.holes.filter((h) => h[3] \u003c P.nt);\n}\n\n// Light for the hour: what lies in shade, and what the sun adds where it gets through.\nfunction paint(P) {\n  const f = P.h * 4, i = min(3, floor(f)), q = HOURS[i].map((v, c) => mix(v, HOURS[i + 1][c], f - i)), { alb, mat, hz, nx, bg, sa } = P;\n  const sky = q.slice(0, 3), haze = q.slice(3, 6), sun = (P.sun = q.slice(6, 9)), amb = (P.amb = q.slice(9, 12));\n  const sx = (P.sx = -0.85 + 1.7 * P.h), sz = 0.55, sl = sqrt(sx * sx + sz * sz);\n  for (let p = 0; p \u003c N; p++) {\n    const m = mat[p], y = p >> 6, h = hz[p], n = nx[p], nz = sqrt(max(0, 1 - n * n)), d = m === 3 ? max(0, (n * sx + nz * sz) / sl) : m === 4 ? 0.8 : m === 1 ? 0.7 : 0.2;\n    const sh = m === 3 ? 0.35 + 0.65 * nz : m === 1 ? 0.8 : 0.9, hk = 1.1 - y / 180;\n    // How strongly the shafts show here: most in the haze, faint in front of the near trunk.\n    P.sw[p] = m ? (q[12] * 100 * (0.25 + 0.75 * h) * (1.1 - y / 160)) / 255 : 0;\n    for (let c = 0, o = p * 3; c \u003c 3; c++) {\n      const a = alb[o + c];\n      bg[o + c] = m ? mix(a * amb[c] * sh * 1.1, haze[c] * hk, h) : mix(sky[c], 255, 0.3);\n      sa[o + c] = m ? a * sun[c] * d * (1 - h) : 0;\n    }\n  }\n}\n\nfunction newBird(i) {\n  const [tr, side, kind, y] = FLOCK[i];\n  return { tr, side, face: -side, kind, y, st: CLING, t: 0, dur: 0.2 + i * 0.35, hops: 2, work: 4 + i * 11, head: 0, out: 0, look: 0 };\n}\n// The bark's edge pixel at row y, where the toes grip.\nconst feetX = (B, y) => round(TR[B.tr][0] + B.side * (rad(TR[B.tr], y) - 0.5));\nconst footRow = (B) => TR[B.tr][2] - 17;\n\nfunction stepBird(P, B, d) {\n  const go = (s, dur) => ((B.st = s), (B.t = 0), (B.dur = dur));\n  B.t += d;\n  switch (B.st) {\n    case CLING:\n      B.head = B.t > 0.15 && B.t \u003c B.dur - 0.1 ? B.look : 0;\n      B.out = 0;\n      if (B.t \u003c B.dur) break;\n      if (B.y \u003c= TOP) [B.x0, B.y0] = [feetX(B, B.y), B.y], go(FLY, 2.6);\n      else if (B.work \u003c= 0) {\n        // Drum where an old hole is, or start a new one.\n        const hx = feetX(B, B.y) + B.face * 2, hy = round(B.y) - 7;\n        B.hole = P.holes.find((h) => h[3] === B.tr && abs(h[0] - hx) \u003c 2 && abs(h[1] - hy) \u003c 3);\n        if (!B.hole) P.holes.push((B.hole = [hx, hy, 0.4, B.tr])), P.holes.length > 30 && P.holes.shift();\n        go(DRUM, 1.3 + rnd() * 1.2);\n      } else (B.y0 = B.y), (B.len = 2.5 + rnd() * 2.5), go(HOP, 0.15);\n      break;\n    case HOP: {\n      const u = B.t / B.dur;\n      B.y = mix(B.y0, B.y0 - B.len, sm(u / 0.5));\n      B.out = u \u003c 0.6 ? 1 : 0;\n      if (u \u003c 1) break;\n      B.work -= B.len;\n      if (--B.hops > 0) (B.look = 0), go(CLING, 0.04 + rnd() * 0.1);\n      else (B.hops = 2 + floor(rnd() * 4)), (B.look = rnd() \u003c 0.6 ? 1 + floor(rnd() * 2) : 0), go(CLING, 0.3 + rnd() * 0.8);\n      break;\n    }\n    case DRUM: {\n      // Bursts of strikes too fast to see: the head is a blur and chips fly.\n      const on = B.t % 0.62 \u003c 0.42;\n      B.head = on ? 3 : 0;\n      if (on) {\n        B.hole[2] = min(2.2, B.hole[2] + d * 0.5);\n        for (let n = rnd() \u003c d * 30 ? 1 + (rnd() \u003c 0.5) : 0; n > 0; n--) P.chips.push([B.hole[0] + B.side, B.hole[1] + (rnd() - 0.5) * 2, B.side * (12 + rnd() * 30), -(4 + rnd() * 26), floor(rnd() * 3), 0, B.tr ? 1 : 0]);\n      }\n      if (B.t >= B.dur) go(PROBE, 0.7 + rnd() * 0.6);\n      break;\n    }\n    case PROBE:\n      B.head = floor(B.t / 0.18) % 3 ? 4 : 0;\n      if (B.t >= B.dur) (B.work = 16 + rnd() * 24), (B.look = 1), go(CLING, 0.5);\n      break;\n    case FLY:\n      if (B.t >= B.dur) (B.y = footRow(B)), (B.look = 0), go(CLING, 0.5);\n  }\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), hz: F(N), nx: F(N), zb: new Uint8Array(N), mat: new Uint8Array(N), bg: F(N * 3), sa: F(N * 3), sw: F(N), buf: F(N * 3), lit: F(N), kind: -1, nt: 0, h: -1, t: 0, holes: [], chips: [], falls: [] });\n  P.birds = FLOCK.map((_, i) => newBird(i));\n  // Sun flecks: a tile of soft blobs the crown lets through, wrapped both ways.\n  const FT = (P.ft = F(16384));\n  for (const [c, a] of [[16, 0.3], [8, 0.45], [4, 0.25]]) {\n    const n = 128 / c, g = Array.from({ length: n * n }, rnd);\n    for (let i = 0; i \u003c 16384; i++) {\n      const x = (i & 127) / c, y = (i >> 7) / c, x0 = floor(x), y0 = floor(y), u = sm(x - x0), v = sm(y - y0), X = (x0 + 1) % n, Y = (y0 + 1) % n;\n      FT[i] += a * mix(mix(g[y0 * n + x0], g[y0 * n + X], u), mix(g[Y * n + x0], g[Y * n + X], u), v);\n    }\n  }\n  const S = (P.shafts = F(256));\n  for (let n = 0; n \u003c 7; n++) {\n    const c = rnd() * 256, w = 3 + rnd() * 9, a = 0.4 + rnd() * 0.6;\n    for (let i = 0; i \u003c 256; i++) S[i] = min(1, S[i] + a * Math.exp(-((abs(((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06], kind = round(cl(k[0], 0, 2)), nb = round(cl(k[2], 1, 4)), nt = min(3, nb), h = cl(k[3], 0, 1);\n  const d = (cl(dt, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  if (kind !== P.kind || nt !== P.nt) (P.kind = kind), (P.nt = nt), build(P), (P.h = -1);\n  if (abs(h - P.h) > 0.0005) (P.h = h), paint(P);\n  P.nb = nb;\n  // K1 tap: the male stops to drum after his next hop.\n  if (input.btnPressed?.[0]) P.birds[0].work = 0;\n  P.t += d;\n  for (let i = 0; i \u003c nb; i++) stepBird(P, P.birds[i], d);\n  P.chips = P.chips.filter((c) => {\n    if (c[5]) return (c[5] += d) \u003c 6;\n    c[3] += 110 * d;\n    c[2] *= 1 - 1.6 * d;\n    c[0] += c[2] * d;\n    c[1] += c[3] * d;\n    if (c[1] >= 118 + (c[6] ? -8 : (c[0] * 7) % 9)) c[5] = d;\n    return c[0] > -2 && c[0] \u003c W + 2;\n  });\n  // Now and then a leaf lets go up in the crown.\n  if (rnd() \u003c d * 0.6) P.falls.push([rnd() * W, 8 + rnd() * 10, 7 + rnd() * 6, rnd() * 7]);\n  P.falls = P.falls.filter((f) => ((f[1] += f[2] * d), (f[0] += sin(P.t * 2.2 + f[3]) * 9 * d + 2 * d), f[1] \u003c 121));\n}\n\nlet BUF;\nconst A = (x, y, r, g, b, a = 1) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n};\n\n// Sun flecks moving with the crown, and shafts through the haze.\nfunction light(P) {\n  const { buf, bg, sa, ft, lit, sw, shafts: S, t, sx } = P, w = 0.6 + 0.4 * sin(t * 0.31) * sin(t * 0.17 + 2);\n  const ax = 4 * sin(t * 0.5) + 2 * sin(t * 1.3) * w + t * 0.6, ay = 2 * sin(t * 0.4 + 1), bx = -t * 1.1 + 3 * sin(t * 0.8) * w, by = 1.5 * sin(t * 0.6) + 40;\n  const [ix, iy, jx, jy] = [floor(ax), floor(ay), floor(bx), floor(by)], [fx, fy, gx, gy] = [ax - ix, ay - iy, bx - jx, by - jy];\n  const so = t * 0.9 + 3 * sin(t * 0.23), [sr, sg, sb] = P.sun;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    const r0 = ((y + iy) & 127) \u003c\u003c 7, r1 = ((y + iy + 1) & 127) \u003c\u003c 7, q0 = ((y + jy) & 127) \u003c\u003c 7, q1 = ((y + jy + 1) & 127) \u003c\u003c 7, bo = y * sx * 0.8 + so;\n    for (let x = 0; x \u003c W; x++, p++) {\n      const x0 = (x + ix) & 127, x1 = (x0 + 1) & 127, z0 = (x + jx) & 127, z1 = (z0 + 1) & 127, u = ft[r0 + x0], v = ft[r1 + x0], e = ft[q0 + z0], g = ft[q1 + z0];\n      const a = u + (ft[r0 + x1] - u) * fx, c = v + (ft[r1 + x1] - v) * fx, b = e + (ft[q0 + z1] - e) * gx, d = g + (ft[q1 + z1] - g) * gx;\n      let f = ((a + (c - a) * fy) * 0.55 + (b + (d - b) * gy) * 0.45 - 0.47) * 9;\n      f = f \u003c= 0 ? 0 : f >= 1 ? 1 : f * f * (3 - 2 * f);\n      const l = (lit[p] = 0.15 + 0.85 * f), s = S[(x + bo) & 255] * sw[p], o = p * 3;\n      buf[o] = bg[o] + sa[o] * l + s * sr;\n      buf[o + 1] = bg[o + 1] + sa[o + 1] * l + s * sg;\n      buf[o + 2] = bg[o + 2] + sa[o + 2] * l + s * sb;\n    }\n  }\n}\n\nfunction lightAt(P, x, y) {\n  const l = P.lit[cl(round(y), 0, H - 1) * W + cl(round(x), 0, W - 1)];\n  return [0, 1, 2].map((c) => (P.amb[c] + 96 + P.sun[c] * 0.65 * l) / 255);\n}\n\nfunction sprite(P, rows, x0, y0, face, cmap, L, a, z, dx = 0) {\n  rows.forEach((row, r) => {\n    for (let c = 0; c \u003c row.length; c++) {\n      const ch = row[c], col = ch === \"R\" ? cmap.R : COL[cmap[ch] || ch], x = x0 + (c + dx) * face, y = y0 + r;\n      if (!col || (z && P.zb[cl(y, 0, H - 1) * W + cl(x, 0, W - 1)] \u003c 1)) continue;\n      A(x, y, min(255, col[0] * L[0]), min(255, col[1] * L[1]), min(255, col[2] * L[2]), a);\n    }\n  });\n}\n\nfunction drawBird(P, B) {\n  const cm = KIND[B.kind], z = B.tr > 0, hk = 1 - TR[B.tr][3] * 0.6;\n  if (B.st === FLY) {\n    // Three bounds out from the trunk and down to its foot: wings beating on the rise, shut on the drop.\n    const u = B.t / B.dur, b = (u * 3) % 1, f = u \u003c 0.5 ? B.side : -B.side, x = cl(B.x0 + B.side * 17 * pow(sin(PI * u), 0.7), 3, 60), y = mix(B.y0 - 8, footRow(B) - 6, sm(u)) - 6 * sin(PI * b);\n    const L = mul(lightAt(P, x, y), hk), xi = round(x - f * 6), yi = round(y) - 2, up = floor(B.t / 0.06) & 1;\n    if (u > 0.94) return sprite(P, [...HEAD, ...BODY], feetX(B, footRow(B)) - B.face * 6, footRow(B) - 10, B.face, cm, L, 1, z);\n    sprite(P, FLB, xi, yi, f, cm, L, 1, z);\n    if (b \u003c 0.45) sprite(P, up ? WUP : WDN, xi, up ? yi - 3 : yi + 4, f, cm, L, 1, z);\n    return;\n  }\n  const L = mul(lightAt(P, feetX(B, B.y), B.y - 4), hk), x0 = feetX(B, B.y) - B.face * (6 + B.out), y0 = round(B.y) - 10;\n  sprite(P, BODY, x0, y0 + 5, B.face, cm, L, 1, z);\n  if (B.head === 3) for (let i = 0, f = floor(P.t * 30) & 1; i \u003c 2; i++) sprite(P, HEAD, x0, y0, B.face, cm, L, i ? 0.45 : 1, z, i ^ f);\n  else if (B.head === 2) sprite(P, HEAD, x0 + B.face * 6, y0, -B.face, cm, L, 1, z);\n  else sprite(P, B.head === 1 ? UPH : HEAD, x0, y0, B.face, cm, L, 1, z, B.head === 4 ? 1 : 0);\n}\n\nexport function draw(display, params) {\n  const P = params, { t, leafC, sun, amb, lit } = P, w = 0.6 + 0.4 * sin(t * 0.31) * sin(t * 0.17 + 2);\n  BUF = P.buf;\n  light(P);\n  // Holes: dark, with a rim of fresh pale wood below.\n  for (const [hx, hy, r, tr] of P.holes) {\n    const L = mul(lightAt(P, hx, hy), 1 - TR[tr][3] * 0.5);\n    for (let y = floor(hy - r - 1); y \u003c= hy + r + 1; y++)\n      for (let x = floor(hx - r - 1); x \u003c= hx + r + 1; x++) {\n        const e = sqrt(((x - hx) / max(0.6, r * 0.8)) ** 2 + ((y - hy) / max(0.6, r)) ** 2);\n        if (e \u003c 1) A(x, y, 12, 8, 6);\n        else if (e \u003c 1.6) A(x, y, 240 * L[0], 212 * L[1], 156 * L[2], y > hy ? 0.9 : 0.5);\n      }\n  }\n  for (let i = 0; i \u003c P.nb; i++) if (P.birds[i].tr) drawBird(P, P.birds[i]);\n  // Leaves stir in the wind and catch the sun as they turn.\n  for (const [lx, ly, s, tone, ph] of P.leaves) {\n    const x = lx + round(sin(t * (1.2 + w) + ph) * w), q = max(0, sin(t * (2 + 2 * w) + ph * 3)) ** 6, l = lit[cl(ly, 0, H - 1) * W + cl(x, 0, W - 1)] * (0.85 + 0.6 * q);\n    const r = leafC[0] * tone * (amb[0] * 0.9 + sun[0] * l), g = leafC[1] * tone * (amb[1] * 0.9 + sun[1] * l), b = leafC[2] * tone * (amb[2] * 0.9 + sun[2] * l) + 20 * q;\n    A(x, ly, r, g, b);\n    if (s & 1) A(x + 1, ly, r * 0.8, g * 0.8, b * 0.8);\n    if (s > 1) A(x, ly + 1, r * 0.7, g * 0.7, b * 0.7);\n  }\n  for (let i = 0; i \u003c P.nb; i++) if (!P.birds[i].tr) drawBird(P, P.birds[i]);\n  for (const [x, y, , , c, , z] of P.chips) {\n    const L = lightAt(P, x, y), col = [[236, 210, 160], [200, 170, 120], [120, 96, 80]][c], xi = round(x), yi = round(y);\n    if (!z || P.zb[cl(yi, 0, H - 1) * W + cl(xi, 0, W - 1)]) A(xi, yi, col[0] * L[0], col[1] * L[1], col[2] * L[2]);\n  }\n  for (const [x, y, , ph] of P.falls) {\n    const L = lightAt(P, x, y), k = 255 * (0.8 + 0.4 * sin(t * 6 + ph));\n    A(round(x), round(y), leafC[0] * k * L[0], leafC[1] * k * L[1], leafC[2] * k * L[2]);\n  }\n  // Bracken in front, arching and swaying, the fronds narrowing to the tip.\n  for (const [fx, fy, len, lean, ph] of P.ferns)\n    for (let s = 0, x = fx, y = fy, sw = sin(t * 1.4 + ph) * 0.12 * w; s \u003c len; s++) {\n      const f = s / len, a = (lean + sw) * f * 1.8 - 0.2 * lean, ca = cos(a), sa = sin(a), L = mul(lightAt(P, (x += sa), (y -= ca)), 0.6 + 0.4 * f);\n      A(round(x), round(y), 70 * L[0], 120 * L[1], 36 * L[2]);\n      if (s > 2) for (let j = 1, n = round(3.2 * (1 - f)) + (s & 1); j \u003c= n; j++) for (const e of [-1, 1]) A(round(x + e * j * ca), round(y + e * j * sa + j * 0.35), 96 * L[0], 168 * L[1], 52 * L[2], 0.9);\n    }\n  show(display, P.buf);\n}\n\nfunction show(display, buf) {\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n    display.setPixel(p & 63, p >> 6, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tree=0..2, Speed=0.2..3, Birds=1..4, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tree","min":0,"max":2,"about":"A silver birch at 0, white with black lenticels and a fissured black foot; a Scots pine at 1, grey plates low down and thin orange bark higher up; an oak at 2, deeply furrowed and grey with lichen. The wood behind is of the same tree."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the bird, the wind and the light go: at 2 all of it runs in real time, the bird takes 15 to 20 s up the trunk with its stops to drum and under 3 s back down; 0.2 is ten times slower."},{"name":"Birds","min":1,"max":4,"about":"One male at 1; at 2 his mate works a nearer trunk that comes in on the right; at 3 a red-capped young bird of the year climbs another at the left, and at 4 a second one climbs the right-hand edge of his trunk."},{"name":"Light","min":0,"max":1,"about":"Dawn at 0 with the sun low in the east and shafts through the mist, noon at 0.5, dusk at 1 with the sun low in the west."}],"start":[0,2,1,0.06],"measures":{"motion":0.092,"detail":0.0823,"edges":0.3471,"complexity":2.5826,"coverage":0.9376,"colour":0.1398,"drift":0.0454},"knobResponse":[0.1005,0.0437,0.0473,0.1346]},{"slug":"zen-garden","title":"Zen Garden","family":"line","round":18,"note":"곧장 내려다본 마른 돌 정원이에요. 갈퀴 자국이 이끼 두른 돌 둘레에서 고리로 휘고, 갈퀴가 15줄 띠씩 줄을 다시 그으며 떨어진 단풍잎을 거둬 가요. K1 을 돌리면 아침 해가 저녁 해로 옮겨 가며 돌 그림자와 고리의 밝은 쪽이 따라 돌아요.","idea":"A dry rock garden seen straight down, where raked grooves bend into rings round mossy stones and a rake redraws them band by band, taking up the maple leaves that fall while cloud shadows drift over.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Zen Garden\n// Family:  line\n// Idea:    A dry rock garden seen straight down, where raked grooves bend into rings round mossy stones and a rake redraws them band by band, taking up the maple leaves that fall while cloud shadows drift over.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the karesansui of Ryoan-ji, Kyoto\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Stones=3..5, Wind=0..1\n//\n// Knob 1: Light. Pale morning sun from the lower right at 0, white noon light at 0.5, low gold evening sun from the lower left at 1, and the stone shadows and the lit side of every ring swing with it.\n// Knob 2: Speed. How fast the rake walks and the clouds pass: at 2 the rake draws one 15-row band in about 6.5 seconds.\n// Knob 3: Stones. Three, four or five stone groups, each in its moss collar with two or three rings raked round it.\n// Knob 4: Wind. Calm at 0 with a leaf every ten seconds or so; at 1 the clouds cover half the garden and run three times as fast, and leaves come down every second and scuff the grooves.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Grooves are 3 rows apart and the rake has 5 tines, so it draws a 15-row band per pass.\nconst PER = 3;\nconst BAND = 15;\nconst BANDS = Math.ceil(H / BAND);\n// The rake walks 6 columns a garden second, turns in 0.8 s, and rests 3 s at the end of the garden.\nconst RAKE_V = 6;\nconst PASS = (W + 10) / RAKE_V + 0.8;\nconst CYCLE = BANDS * PASS + 3;\nconst TAU = Math.PI * 2;\n// Moss reaches 2.2 LED out from the stones, give or take its ragged edge.\nconst MOSS = 2.2;\n// Sunlight on a groove is SUN_A + SUN_B cos(phase), plus SUN_C sin(phase) as far as the\n// slope faces the sun; skylight is SKY_A + SKY_B cos(phase). A cloud takes CLOUD of the sun.\nconst SUN_A = 0.66;\nconst SUN_B = 0.28;\nconst SUN_C = 0.9;\nconst SKY_A = 0.2;\nconst SKY_B = 0.04;\nconst CLOUD = 0.8;\n// Each grain of gravel is GRAIN brighter or darker and ADD levels more or less, with its own\n// TINT of green and blue. WOB is how far a groove wanders as it wears: at the start knobs the\n// oldest grooves stray a tenth of a groove, in full wind a fifth.\nconst GRAIN = 0.16;\nconst ADD = 10;\nconst TINT = 30;\nconst WOB = 0.3;\n// One garden for each Stones setting. A group is a main stone (centre, half-axes, turn,\n// height in LED) with its rings, and smaller stones that share its moss bed.\nconst LAYOUTS = {\n  3: [\n    [20, 28, 7.5, 5.2, 0.35, 6, 3, [[29.5, 33, 3.0, 2.4, 3]]],\n    [44, 71, 6.2, 4.4, -0.5, 5, 3, [[35.5, 66.5, 2.6, 2.1, 2.5], [49, 64, 1.8, 1.5, 1.5]]],\n    [20, 107, 5.2, 4.0, 0.9, 4.5, 3, []],\n  ],\n  4: [\n    [18, 22, 7.0, 5.0, 0.3, 6, 3, [[27, 27, 2.8, 2.2, 3]]],\n    [46, 51, 5.4, 4.0, -0.6, 4.5, 2, []],\n    [19, 83, 5.2, 4.0, 0.7, 5, 3, [[11, 89, 2.4, 2.0, 2], [26, 88, 1.6, 1.4, 1.5]]],\n    [46, 111, 4.6, 3.4, -0.2, 4, 2, [[53.5, 107, 1.8, 1.5, 1.5]]],\n  ],\n  5: [\n    [19, 18, 6.5, 4.6, 0.3, 5.5, 3, [[27, 23, 2.6, 2.0, 2.5]]],\n    [47, 41, 4.4, 3.4, -0.4, 4, 2, []],\n    [20, 65, 5.6, 4.0, 0.8, 5, 3, [[12, 70, 2.2, 1.8, 2], [27, 70, 1.7, 1.4, 1.5]]],\n    [46, 89, 4.0, 3.2, 0.1, 4, 2, [[52.5, 94, 1.8, 1.5, 1.5]]],\n    [19, 113, 4.6, 3.6, -0.7, 4, 2, []],\n  ],\n};\n// Maple leaves, 5 by 5: lobes, and the stem off one corner.\nconst LEAF = [\"..#..\", \"#.#.#\", \"#####\", \".###.\", \"..#.#\"];\nconst LEAF_COL = [[205, 46, 24], [226, 104, 20], [176, 28, 32], [214, 150, 30]];\nconst COS = new Float32Array(1024);\nconst SIN = new Float32Array(1024);\nfor (let i = 0; i \u003c 1024; i++) {\n  COS[i] = Math.cos((TAU * i) / 1024);\n  SIN[i] = Math.sin((TAU * i) / 1024);\n}\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Colours go out in steps of 8 levels, so the gravel's grain is a few dozen colours, not thousands.\nconst QZ = (v) => (v \u003c= 0 ? 0 : v >= 252 ? 255 : ((v / 8 + 0.5) | 0) * 8);\nconst lerp = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [lerp(a[0], b[0], t), lerp(a[1], b[1], t), lerp(a[2], b[2], t)];\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y, s) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash(xi, yi, s);\n  const b = hash(xi + 1, yi, s);\n  const c = hash(xi, yi + 1, s);\n  const d = hash(xi + 1, yi + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\n// The sun for a Light setting: direction towards it across the garden, how long a\n// shadow is per unit of height, and the colours of sunlight and of the sky in shade.\nfunction sun(k) {\n  const az = Math.PI * (0.22 + 0.56 * k);\n  const elev = 0.32 + 0.75 * Math.sin(Math.PI * k) - 0.08 * k;\n  const warm = smooth(0.55, 1, k);\n  const cool = 1 - smooth(0, 0.4, k);\n  let col = mix3([252, 252, 246], [255, 178, 104], warm);\n  col = mix3(col, [255, 230, 186], cool);\n  let sky = mix3([92, 112, 160], [104, 84, 150], warm);\n  sky = mix3(sky, [70, 104, 196], cool);\n  // A high sun shows less of the grooves' relief, and the panel keeps noon off its top.\n  const high = Math.sin(Math.PI * k);\n  return { lx: Math.cos(az), ly: Math.sin(az), len: 1 / Math.tan(elev), col, sky, gain: 0.92 - 0.1 * high, relief: 1 - 0.3 * high };\n}\n\nfunction stone(x, y, rx, ry, a, h, seed) {\n  const ph = [0, 1, 2].map((i) => hash(seed, i, 7) * TAU);\n  return { x, y, rx, ry, ca: Math.cos(a), sa: Math.sin(a), h, ph, R: Math.max(rx, ry) * 1.25 };\n}\n\n// How far outside the stone a point is in LED, negative inside, measured along the\n// ray from its centre so rings keep their spacing on the long side; and r, 1 at the rim.\nfunction stoneDist(s, x, y) {\n  const dx = x - s.x;\n  const dy = y - s.y;\n  const u = (dx * s.ca + dy * s.sa) / s.rx;\n  const v = (-dx * s.sa + dy * s.ca) / s.ry;\n  const r = Math.hypot(u, v);\n  const th = Math.atan2(v, u);\n  const edge = 1 + 0.1 * Math.sin(2 * th + s.ph[0]) + 0.07 * Math.sin(3 * th + s.ph[1]) + 0.05 * Math.sin(5 * th + s.ph[2]);\n  return { d: Math.hypot(dx, dy) * (1 - edge / Math.max(r, 1e-3)), r: r / edge };\n}\n\nfunction build(P) {\n  const L = P.sun;\n  const groups = LAYOUTS[P.count].map((g, gi) => ({\n    x: g[0],\n    y: g[1],\n    rings: g[6],\n    stones: [stone(g[0], g[1], g[2], g[3], g[4], g[5], gi * 5)].concat(g[7].map((m, j) => stone(m[0], m[1], m[2], m[3], g[4] + j, m[4], gi * 5 + j + 1))),\n  }));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // The group whose outline is nearest, within the reach of its moss and rings.\n      let best = null;\n      let bestRho = 1e9;\n      let inStone = null;\n      let sr = 0;\n      for (const gr of groups) {\n        let rho = 1e9;\n        for (const s of gr.stones) {\n          // Far stones are skipped: nothing past their rings depends on them.\n          if (Math.hypot(x - s.x, y - s.y) > s.R + MOSS + 2 + gr.rings * PER) continue;\n          const q = stoneDist(s, x, y);\n          if (q.d \u003c rho) rho = q.d;\n          if (q.d \u003c 0 && !inStone) {\n            inStone = s;\n            sr = q.r;\n          }\n        }\n        if (rho \u003c MOSS + gr.rings * PER && rho \u003c bestRho) {\n          best = gr;\n          bestRho = rho;\n        }\n      }\n      // A stone shades what lies opposite the sun from it, as far as its height allows.\n      let shade = 1;\n      for (const gr of groups)\n        for (const s of gr.stones) {\n          if (inStone === s) continue;\n          for (const f of [0.3, 0.6, 1]) {\n            const sx = x + L.lx * s.h * L.len * f;\n            const sy = y + L.ly * s.h * L.len * f;\n            if (Math.abs(sx - s.x) > s.R || Math.abs(sy - s.y) > s.R) continue;\n            const q = stoneDist(s, sx, sy);\n            if (q.d \u003c 0 && 1 - q.r * q.r > f * f * 0.6) shade = 0.42;\n          }\n        }\n      P.shade[p] = shade;\n      P.kind[p] = 0;\n      let sunR = 0;\n      let skyR = 0;\n      let alb = [1, 1, 1];\n      if (inStone) {\n        // A rounded top lit from the sun's side, with facets, lichen and a dark rim.\n        const dx = (x - inStone.x) / inStone.rx;\n        const dy = (y - inStone.y) / inStone.ry;\n        const facet = noise(x / 2.2, y / 2.2, 9 + inStone.h * 3) - 0.5;\n        const lum = clamp(0.6 + 0.85 * (dx * L.lx + dy * L.ly) * Math.min(1, sr * 1.2) + 0.4 * facet, 0.1, 1.25) * (sr > 0.84 ? 0.6 : 1);\n        sunR = lum * 0.6;\n        skyR = lum * 0.22;\n        alb = hash(x, y, 11) \u003c 0.08 ? [0.64, 0.74, 0.5] : [0.78, 0.74, 0.68];\n        P.kind[p] = 2;\n      } else if (best && bestRho \u003c MOSS + 0.9 * (noise(x / 2, y / 2, 13) - 0.3)) {\n        const lum = 0.75 + 0.7 * (noise(x / 1.6, y / 1.6, 17) - 0.5) + 0.3 * (hash(x, y, 18) - 0.5);\n        sunR = lum * 0.46;\n        skyR = lum * 0.3;\n        alb = [0.36, 0.8, 0.22];\n        P.kind[p] = 1;\n      } else if (best) {\n        // Rings: the phase grows away from the stone and the slope faces outward.\n        P.phase[p] = (bestRho - MOSS) / PER;\n        const dx = x - best.x;\n        const dy = y - best.y;\n        const r = Math.hypot(dx, dy) || 1;\n        P.face[p] = ((dx * L.lx + dy * L.ly) / r) * L.relief;\n      } else {\n        P.phase[p] = y / PER;\n        P.face[p] = L.ly * L.relief;\n      }\n      for (let c = 0; c \u003c 3; c++) {\n        P.still[p * 6 + c] = alb[c] * L.col[c] * sunR;\n        P.still[p * 6 + 3 + c] = alb[c] * L.sky[c] * skyR;\n      }\n    }\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const k of [\"phase\", \"face\", \"shade\", \"grain\", \"wob\", \"pass\"]) P[k] = new Float32Array(N);\n  P.kind = new Uint8Array(N);\n  P.still = new Float32Array(N * 6);\n  P.tint = new Float32Array(N * 2);\n  P.cloud = new Float32Array(17 * 33);\n  P.buf = new Float32Array(N * 3);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      P.grain[p] = hash(x, y, 1) + hash(x, y, 2) - 1;\n      // Each stone of the gravel has its own tint: greener, bluer or plain.\n      P.tint[p * 2] = TINT * (hash(x, y, 5) - 0.5);\n      P.tint[p * 2 + 1] = TINT * (hash(x, y, 6) - 0.5);\n      P.wob[p] = noise(x / 9, y / 7, 4) - 0.5;\n      // The garden time at which the rake passes this LED in each round.\n      const b = Math.floor(y / BAND);\n      P.pass[p] = b * PASS + (b % 2 ? W + 5 - x : x + 5) / RAKE_V;\n    }\n  Object.assign(P, { t: 0, cx: 0, cy: 0, count: 0, light: -1, wind: 0.06, speed: 2, leaves: [], started: false, sun: sun(0) });\n}\n\nfunction ageAt(P, p) {\n  const a = (P.t - P.pass[p]) % CYCLE;\n  return a \u003c 0 ? a + CYCLE : a;\n}\n\nfunction step(P, dt) {\n  const g = dt * P.speed;\n  P.t += g;\n  // Clouds run west to east and a little south, faster in wind.\n  const v = 1.6 + 3.2 * P.wind;\n  P.cx += g * v;\n  P.cy += g * v * 0.25;\n  // A leaf lands on gravel and stays until the rake reaches it.\n  if (Math.random() \u003c g * (0.05 + 0.5 * P.wind)) {\n    for (let tries = 0; tries \u003c 8; tries++) {\n      const x = 3 + Math.floor(Math.random() * (W - 6));\n      const y = 3 + Math.floor(Math.random() * (H - 6));\n      if (P.kind[y * W + x] === 0) {\n        P.leaves.push({ x, y, z: 1, rot: Math.floor(Math.random() * 4), col: Math.floor(Math.random() * 4), land: 0, drift: (Math.random() - 0.3) * 14 });\n        break;\n      }\n    }\n  }\n  for (const l of P.leaves) {\n    if (l.z \u003c= 0) continue;\n    l.z = Math.max(0, l.z - g / 3.2);\n    if (l.z === 0) l.land = P.t;\n    else if (Math.random() \u003c g * 3) l.rot = (l.rot + 1) % 4;\n  }\n  P.leaves = P.leaves.filter((l) => l.z > 0 || ageAt(P, l.y * W + l.x) >= P.t - l.land);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.wind = clamp(k[3], 0, 1);\n  const count = Math.round(clamp(k[2], 3, 5));\n  const light = clamp(k[0], 0, 1);\n  if (count !== P.count || Math.abs(light - P.light) > 0.004) {\n    P.count = count;\n    P.light = light;\n    P.sun = sun(light);\n    build(P);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The garden opens 20 seconds into a raking at the knob's speed: the rake is part way\n    // down, the bands above it fresh and those below worn, with leaves already lying there.\n    P.t = 12;\n    for (let i = 0; i \u003c 400; i++) step(P, 0.05);\n  }\n  step(P, dt);\n}\n\nfunction drawGarden(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const cloud = P.cloud;\n  // Cloud shadow on a coarse 4-LED lattice, smoothed between.\n  const cover = 0.6 - 0.14 * P.wind;\n  for (let j = 0; j \u003c 33; j++)\n    for (let i = 0; i \u003c 17; i++) {\n      const x = i * 4 + P.cx;\n      const y = j * 4 + P.cy;\n      const n = 0.68 * noise(x / 30, y / 34, 21) + 0.32 * noise(x / 12, y / 12, 22);\n      cloud[j * 17 + i] = smooth(cover - 0.07, cover + 0.09, n);\n    }\n  const wear = (0.55 + 0.9 * P.wind) / CYCLE;\n  const [sr, sg, sb] = L.col;\n  const [kr, kg, kb] = L.sky;\n  const { kind, still, shade, phase, wob, grain, face, pass, tint } = P;\n  const row = new Float32Array(17);\n  const t = P.t;\n  for (let y = 0; y \u003c H; y++) {\n    const cj = (y >> 2) * 17;\n    const fy = (y & 3) / 4;\n    for (let i = 0; i \u003c 17; i++) row[i] = cloud[cj + i] + (cloud[cj + i + 17] - cloud[cj + i]) * fy;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const c0 = row[x >> 2];\n      const direct = (1 - CLOUD * (c0 + (row[(x >> 2) + 1] - c0) * (x & 3) * 0.25)) * shade[p] * L.gain;\n      const q = p * 3;\n      if (kind[p]) {\n        const o = p * 6;\n        buf[q] = still[o] * direct + still[o + 3];\n        buf[q + 1] = still[o + 1] * direct + still[o + 4];\n        buf[q + 2] = still[o + 2] * direct + still[o + 5];\n        continue;\n      }\n      // Gravel: a groove lit from the sun's side, worn soft since the rake passed.\n      let age = t - pass[p];\n      age -= CYCLE * Math.floor(age / CYCLE);\n      const w = age * wear;\n      const i = ((phase[p] + wob[p] * w * WOB) * 1024) & 1023;\n      const g = grain[p];\n      const gr = 1 + GRAIN * g;\n      const fresh = age \u003c 4 ? 0.05 * (4 - age) : 0;\n      const sunT = (SUN_A + (SUN_B - 0.06 * w) * COS[i] + SUN_C * face[p] * (1 - 0.25 * w) * SIN[i] + fresh) * gr * direct;\n      const skyT = (SKY_A + SKY_B * COS[i]) * gr;\n      const add = ADD * g;\n      buf[q] = sr * sunT + kr * skyT + add;\n      buf[q + 1] = sg * sunT + kg * skyT + add + tint[p * 2];\n      buf[q + 2] = sb * sunT + kb * skyT + add + tint[p * 2 + 1];\n    }\n  }\n}\n\nfunction drawLeaves(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const turn = (l, i, j) => [[i, j], [4 - j, i], [4 - i, 4 - j], [j, 4 - i]][l.rot];\n  for (const l of P.leaves) {\n    const lx = l.x + Math.round(l.drift * l.z);\n    // A falling leaf's shadow lies apart from it, closing in as it lands.\n    const sx = Math.round(-L.lx * l.z * 9);\n    const sy = Math.round(-L.ly * l.z * 9);\n    for (const pass of l.z > 0 ? [0, 1] : [1])\n      for (let j = 0; j \u003c 5; j++)\n        for (let i = 0; i \u003c 5; i++) {\n          const [a, b] = turn(l, i, j);\n          if (LEAF[b][a] !== \"#\") continue;\n          const qx = lx + i - 2 + (pass ? 0 : sx);\n          const qy = l.y + j - 2 + (pass ? 0 : sy);\n          if (qx \u003c 0 || qx >= W || qy \u003c 0 || qy >= H) continue;\n          const q = (qy * W + qx) * 3;\n          if (!pass) {\n            for (let c = 0; c \u003c 3; c++) buf[q + c] *= 0.55;\n            continue;\n          }\n          const sh = 0.7 + 0.3 * P.shade[qy * W + qx] + 0.15 * l.z;\n          for (let c = 0; c \u003c 3; c++) buf[q + c] = LEAF_COL[l.col][c] * sh * (0.85 + (0.15 * L.col[c]) / 255);\n        }\n  }\n}\n\n// The rake: a wooden head across its band with five tines, and the bamboo handle reaching ahead.\nfunction drawRake(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const cyc = ((P.t % CYCLE) + CYCLE) % CYCLE;\n  const b = Math.floor(cyc / PASS);\n  if (b >= BANDS) return;\n  const u = (cyc - b * PASS) * RAKE_V;\n  if (u >= W + 10) return;\n  const dir = b % 2 ? -1 : 1;\n  const hx = Math.round(dir > 0 ? u - 5 : W + 4 - u);\n  const top = b * BAND;\n  const mid = top + 7;\n  for (let i = 1; i \u003c= 22; i++) {\n    const x = hx + dir * i;\n    const sx = x - Math.round(L.lx * 2);\n    const sy = mid - Math.round(L.ly * 2);\n    if (sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H) for (let c = 0; c \u003c 3; c++) buf[(sy * W + sx) * 3 + c] *= 0.6;\n    if (x \u003c 0 || x >= W) continue;\n    const q = (mid * W + x) * 3;\n    const grip = i > 17 ? 0.7 : 1;\n    buf[q] = 186 * grip;\n    buf[q + 1] = 156 * grip;\n    buf[q + 2] = 92 * grip;\n  }\n  for (let y = top; y \u003c Math.min(H, top + BAND); y++)\n    for (let i = 0; i \u003c 2; i++) {\n      const x = hx - dir * i;\n      if (x \u003c 0 || x >= W) continue;\n      const q = (y * W + x) * 3;\n      const tine = i === 1 && y % PER === 1;\n      buf[q] = tine ? 60 : 128;\n      buf[q + 1] = tine ? 40 : 84;\n      buf[q + 2] = tine ? 24 : 46;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  drawGarden(P);\n  drawLeaves(P);\n  drawRake(P);\n  const buf = P.buf;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, QZ(buf[q]), QZ(buf[q + 1]), QZ(buf[q + 2]));\n    }\n}\n","layer":{"id":"layer-zen-garden","type":"code","name":"zen-garden","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Zen Garden\n// Family:  line\n// Idea:    A dry rock garden seen straight down, where raked grooves bend into rings round mossy stones and a rake redraws them band by band, taking up the maple leaves that fall while cloud shadows drift over.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the karesansui of Ryoan-ji, Kyoto\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Stones=3..5, Wind=0..1\n//\n// Knob 1: Light. Pale morning sun from the lower right at 0, white noon light at 0.5, low gold evening sun from the lower left at 1, and the stone shadows and the lit side of every ring swing with it.\n// Knob 2: Speed. How fast the rake walks and the clouds pass: at 2 the rake draws one 15-row band in about 6.5 seconds.\n// Knob 3: Stones. Three, four or five stone groups, each in its moss collar with two or three rings raked round it.\n// Knob 4: Wind. Calm at 0 with a leaf every ten seconds or so; at 1 the clouds cover half the garden and run three times as fast, and leaves come down every second and scuff the grooves.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Grooves are 3 rows apart and the rake has 5 tines, so it draws a 15-row band per pass.\nconst PER = 3;\nconst BAND = 15;\nconst BANDS = Math.ceil(H / BAND);\n// The rake walks 6 columns a garden second, turns in 0.8 s, and rests 3 s at the end of the garden.\nconst RAKE_V = 6;\nconst PASS = (W + 10) / RAKE_V + 0.8;\nconst CYCLE = BANDS * PASS + 3;\nconst TAU = Math.PI * 2;\n// Moss reaches 2.2 LED out from the stones, give or take its ragged edge.\nconst MOSS = 2.2;\n// Sunlight on a groove is SUN_A + SUN_B cos(phase), plus SUN_C sin(phase) as far as the\n// slope faces the sun; skylight is SKY_A + SKY_B cos(phase). A cloud takes CLOUD of the sun.\nconst SUN_A = 0.66;\nconst SUN_B = 0.28;\nconst SUN_C = 0.9;\nconst SKY_A = 0.2;\nconst SKY_B = 0.04;\nconst CLOUD = 0.8;\n// Each grain of gravel is GRAIN brighter or darker and ADD levels more or less, with its own\n// TINT of green and blue. WOB is how far a groove wanders as it wears: at the start knobs the\n// oldest grooves stray a tenth of a groove, in full wind a fifth.\nconst GRAIN = 0.16;\nconst ADD = 10;\nconst TINT = 30;\nconst WOB = 0.3;\n// One garden for each Stones setting. A group is a main stone (centre, half-axes, turn,\n// height in LED) with its rings, and smaller stones that share its moss bed.\nconst LAYOUTS = {\n  3: [\n    [20, 28, 7.5, 5.2, 0.35, 6, 3, [[29.5, 33, 3.0, 2.4, 3]]],\n    [44, 71, 6.2, 4.4, -0.5, 5, 3, [[35.5, 66.5, 2.6, 2.1, 2.5], [49, 64, 1.8, 1.5, 1.5]]],\n    [20, 107, 5.2, 4.0, 0.9, 4.5, 3, []],\n  ],\n  4: [\n    [18, 22, 7.0, 5.0, 0.3, 6, 3, [[27, 27, 2.8, 2.2, 3]]],\n    [46, 51, 5.4, 4.0, -0.6, 4.5, 2, []],\n    [19, 83, 5.2, 4.0, 0.7, 5, 3, [[11, 89, 2.4, 2.0, 2], [26, 88, 1.6, 1.4, 1.5]]],\n    [46, 111, 4.6, 3.4, -0.2, 4, 2, [[53.5, 107, 1.8, 1.5, 1.5]]],\n  ],\n  5: [\n    [19, 18, 6.5, 4.6, 0.3, 5.5, 3, [[27, 23, 2.6, 2.0, 2.5]]],\n    [47, 41, 4.4, 3.4, -0.4, 4, 2, []],\n    [20, 65, 5.6, 4.0, 0.8, 5, 3, [[12, 70, 2.2, 1.8, 2], [27, 70, 1.7, 1.4, 1.5]]],\n    [46, 89, 4.0, 3.2, 0.1, 4, 2, [[52.5, 94, 1.8, 1.5, 1.5]]],\n    [19, 113, 4.6, 3.6, -0.7, 4, 2, []],\n  ],\n};\n// Maple leaves, 5 by 5: lobes, and the stem off one corner.\nconst LEAF = [\"..#..\", \"#.#.#\", \"#####\", \".###.\", \"..#.#\"];\nconst LEAF_COL = [[205, 46, 24], [226, 104, 20], [176, 28, 32], [214, 150, 30]];\nconst COS = new Float32Array(1024);\nconst SIN = new Float32Array(1024);\nfor (let i = 0; i \u003c 1024; i++) {\n  COS[i] = Math.cos((TAU * i) / 1024);\n  SIN[i] = Math.sin((TAU * i) / 1024);\n}\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Colours go out in steps of 8 levels, so the gravel's grain is a few dozen colours, not thousands.\nconst QZ = (v) => (v \u003c= 0 ? 0 : v >= 252 ? 255 : ((v / 8 + 0.5) | 0) * 8);\nconst lerp = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [lerp(a[0], b[0], t), lerp(a[1], b[1], t), lerp(a[2], b[2], t)];\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y, s) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash(xi, yi, s);\n  const b = hash(xi + 1, yi, s);\n  const c = hash(xi, yi + 1, s);\n  const d = hash(xi + 1, yi + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\n// The sun for a Light setting: direction towards it across the garden, how long a\n// shadow is per unit of height, and the colours of sunlight and of the sky in shade.\nfunction sun(k) {\n  const az = Math.PI * (0.22 + 0.56 * k);\n  const elev = 0.32 + 0.75 * Math.sin(Math.PI * k) - 0.08 * k;\n  const warm = smooth(0.55, 1, k);\n  const cool = 1 - smooth(0, 0.4, k);\n  let col = mix3([252, 252, 246], [255, 178, 104], warm);\n  col = mix3(col, [255, 230, 186], cool);\n  let sky = mix3([92, 112, 160], [104, 84, 150], warm);\n  sky = mix3(sky, [70, 104, 196], cool);\n  // A high sun shows less of the grooves' relief, and the panel keeps noon off its top.\n  const high = Math.sin(Math.PI * k);\n  return { lx: Math.cos(az), ly: Math.sin(az), len: 1 / Math.tan(elev), col, sky, gain: 0.92 - 0.1 * high, relief: 1 - 0.3 * high };\n}\n\nfunction stone(x, y, rx, ry, a, h, seed) {\n  const ph = [0, 1, 2].map((i) => hash(seed, i, 7) * TAU);\n  return { x, y, rx, ry, ca: Math.cos(a), sa: Math.sin(a), h, ph, R: Math.max(rx, ry) * 1.25 };\n}\n\n// How far outside the stone a point is in LED, negative inside, measured along the\n// ray from its centre so rings keep their spacing on the long side; and r, 1 at the rim.\nfunction stoneDist(s, x, y) {\n  const dx = x - s.x;\n  const dy = y - s.y;\n  const u = (dx * s.ca + dy * s.sa) / s.rx;\n  const v = (-dx * s.sa + dy * s.ca) / s.ry;\n  const r = Math.hypot(u, v);\n  const th = Math.atan2(v, u);\n  const edge = 1 + 0.1 * Math.sin(2 * th + s.ph[0]) + 0.07 * Math.sin(3 * th + s.ph[1]) + 0.05 * Math.sin(5 * th + s.ph[2]);\n  return { d: Math.hypot(dx, dy) * (1 - edge / Math.max(r, 1e-3)), r: r / edge };\n}\n\nfunction build(P) {\n  const L = P.sun;\n  const groups = LAYOUTS[P.count].map((g, gi) => ({\n    x: g[0],\n    y: g[1],\n    rings: g[6],\n    stones: [stone(g[0], g[1], g[2], g[3], g[4], g[5], gi * 5)].concat(g[7].map((m, j) => stone(m[0], m[1], m[2], m[3], g[4] + j, m[4], gi * 5 + j + 1))),\n  }));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // The group whose outline is nearest, within the reach of its moss and rings.\n      let best = null;\n      let bestRho = 1e9;\n      let inStone = null;\n      let sr = 0;\n      for (const gr of groups) {\n        let rho = 1e9;\n        for (const s of gr.stones) {\n          // Far stones are skipped: nothing past their rings depends on them.\n          if (Math.hypot(x - s.x, y - s.y) > s.R + MOSS + 2 + gr.rings * PER) continue;\n          const q = stoneDist(s, x, y);\n          if (q.d \u003c rho) rho = q.d;\n          if (q.d \u003c 0 && !inStone) {\n            inStone = s;\n            sr = q.r;\n          }\n        }\n        if (rho \u003c MOSS + gr.rings * PER && rho \u003c bestRho) {\n          best = gr;\n          bestRho = rho;\n        }\n      }\n      // A stone shades what lies opposite the sun from it, as far as its height allows.\n      let shade = 1;\n      for (const gr of groups)\n        for (const s of gr.stones) {\n          if (inStone === s) continue;\n          for (const f of [0.3, 0.6, 1]) {\n            const sx = x + L.lx * s.h * L.len * f;\n            const sy = y + L.ly * s.h * L.len * f;\n            if (Math.abs(sx - s.x) > s.R || Math.abs(sy - s.y) > s.R) continue;\n            const q = stoneDist(s, sx, sy);\n            if (q.d \u003c 0 && 1 - q.r * q.r > f * f * 0.6) shade = 0.42;\n          }\n        }\n      P.shade[p] = shade;\n      P.kind[p] = 0;\n      let sunR = 0;\n      let skyR = 0;\n      let alb = [1, 1, 1];\n      if (inStone) {\n        // A rounded top lit from the sun's side, with facets, lichen and a dark rim.\n        const dx = (x - inStone.x) / inStone.rx;\n        const dy = (y - inStone.y) / inStone.ry;\n        const facet = noise(x / 2.2, y / 2.2, 9 + inStone.h * 3) - 0.5;\n        const lum = clamp(0.6 + 0.85 * (dx * L.lx + dy * L.ly) * Math.min(1, sr * 1.2) + 0.4 * facet, 0.1, 1.25) * (sr > 0.84 ? 0.6 : 1);\n        sunR = lum * 0.6;\n        skyR = lum * 0.22;\n        alb = hash(x, y, 11) \u003c 0.08 ? [0.64, 0.74, 0.5] : [0.78, 0.74, 0.68];\n        P.kind[p] = 2;\n      } else if (best && bestRho \u003c MOSS + 0.9 * (noise(x / 2, y / 2, 13) - 0.3)) {\n        const lum = 0.75 + 0.7 * (noise(x / 1.6, y / 1.6, 17) - 0.5) + 0.3 * (hash(x, y, 18) - 0.5);\n        sunR = lum * 0.46;\n        skyR = lum * 0.3;\n        alb = [0.36, 0.8, 0.22];\n        P.kind[p] = 1;\n      } else if (best) {\n        // Rings: the phase grows away from the stone and the slope faces outward.\n        P.phase[p] = (bestRho - MOSS) / PER;\n        const dx = x - best.x;\n        const dy = y - best.y;\n        const r = Math.hypot(dx, dy) || 1;\n        P.face[p] = ((dx * L.lx + dy * L.ly) / r) * L.relief;\n      } else {\n        P.phase[p] = y / PER;\n        P.face[p] = L.ly * L.relief;\n      }\n      for (let c = 0; c \u003c 3; c++) {\n        P.still[p * 6 + c] = alb[c] * L.col[c] * sunR;\n        P.still[p * 6 + 3 + c] = alb[c] * L.sky[c] * skyR;\n      }\n    }\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const k of [\"phase\", \"face\", \"shade\", \"grain\", \"wob\", \"pass\"]) P[k] = new Float32Array(N);\n  P.kind = new Uint8Array(N);\n  P.still = new Float32Array(N * 6);\n  P.tint = new Float32Array(N * 2);\n  P.cloud = new Float32Array(17 * 33);\n  P.buf = new Float32Array(N * 3);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      P.grain[p] = hash(x, y, 1) + hash(x, y, 2) - 1;\n      // Each stone of the gravel has its own tint: greener, bluer or plain.\n      P.tint[p * 2] = TINT * (hash(x, y, 5) - 0.5);\n      P.tint[p * 2 + 1] = TINT * (hash(x, y, 6) - 0.5);\n      P.wob[p] = noise(x / 9, y / 7, 4) - 0.5;\n      // The garden time at which the rake passes this LED in each round.\n      const b = Math.floor(y / BAND);\n      P.pass[p] = b * PASS + (b % 2 ? W + 5 - x : x + 5) / RAKE_V;\n    }\n  Object.assign(P, { t: 0, cx: 0, cy: 0, count: 0, light: -1, wind: 0.06, speed: 2, leaves: [], started: false, sun: sun(0) });\n}\n\nfunction ageAt(P, p) {\n  const a = (P.t - P.pass[p]) % CYCLE;\n  return a \u003c 0 ? a + CYCLE : a;\n}\n\nfunction step(P, dt) {\n  const g = dt * P.speed;\n  P.t += g;\n  // Clouds run west to east and a little south, faster in wind.\n  const v = 1.6 + 3.2 * P.wind;\n  P.cx += g * v;\n  P.cy += g * v * 0.25;\n  // A leaf lands on gravel and stays until the rake reaches it.\n  if (Math.random() \u003c g * (0.05 + 0.5 * P.wind)) {\n    for (let tries = 0; tries \u003c 8; tries++) {\n      const x = 3 + Math.floor(Math.random() * (W - 6));\n      const y = 3 + Math.floor(Math.random() * (H - 6));\n      if (P.kind[y * W + x] === 0) {\n        P.leaves.push({ x, y, z: 1, rot: Math.floor(Math.random() * 4), col: Math.floor(Math.random() * 4), land: 0, drift: (Math.random() - 0.3) * 14 });\n        break;\n      }\n    }\n  }\n  for (const l of P.leaves) {\n    if (l.z \u003c= 0) continue;\n    l.z = Math.max(0, l.z - g / 3.2);\n    if (l.z === 0) l.land = P.t;\n    else if (Math.random() \u003c g * 3) l.rot = (l.rot + 1) % 4;\n  }\n  P.leaves = P.leaves.filter((l) => l.z > 0 || ageAt(P, l.y * W + l.x) >= P.t - l.land);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.wind = clamp(k[3], 0, 1);\n  const count = Math.round(clamp(k[2], 3, 5));\n  const light = clamp(k[0], 0, 1);\n  if (count !== P.count || Math.abs(light - P.light) > 0.004) {\n    P.count = count;\n    P.light = light;\n    P.sun = sun(light);\n    build(P);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The garden opens 20 seconds into a raking at the knob's speed: the rake is part way\n    // down, the bands above it fresh and those below worn, with leaves already lying there.\n    P.t = 12;\n    for (let i = 0; i \u003c 400; i++) step(P, 0.05);\n  }\n  step(P, dt);\n}\n\nfunction drawGarden(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const cloud = P.cloud;\n  // Cloud shadow on a coarse 4-LED lattice, smoothed between.\n  const cover = 0.6 - 0.14 * P.wind;\n  for (let j = 0; j \u003c 33; j++)\n    for (let i = 0; i \u003c 17; i++) {\n      const x = i * 4 + P.cx;\n      const y = j * 4 + P.cy;\n      const n = 0.68 * noise(x / 30, y / 34, 21) + 0.32 * noise(x / 12, y / 12, 22);\n      cloud[j * 17 + i] = smooth(cover - 0.07, cover + 0.09, n);\n    }\n  const wear = (0.55 + 0.9 * P.wind) / CYCLE;\n  const [sr, sg, sb] = L.col;\n  const [kr, kg, kb] = L.sky;\n  const { kind, still, shade, phase, wob, grain, face, pass, tint } = P;\n  const row = new Float32Array(17);\n  const t = P.t;\n  for (let y = 0; y \u003c H; y++) {\n    const cj = (y >> 2) * 17;\n    const fy = (y & 3) / 4;\n    for (let i = 0; i \u003c 17; i++) row[i] = cloud[cj + i] + (cloud[cj + i + 17] - cloud[cj + i]) * fy;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const c0 = row[x >> 2];\n      const direct = (1 - CLOUD * (c0 + (row[(x >> 2) + 1] - c0) * (x & 3) * 0.25)) * shade[p] * L.gain;\n      const q = p * 3;\n      if (kind[p]) {\n        const o = p * 6;\n        buf[q] = still[o] * direct + still[o + 3];\n        buf[q + 1] = still[o + 1] * direct + still[o + 4];\n        buf[q + 2] = still[o + 2] * direct + still[o + 5];\n        continue;\n      }\n      // Gravel: a groove lit from the sun's side, worn soft since the rake passed.\n      let age = t - pass[p];\n      age -= CYCLE * Math.floor(age / CYCLE);\n      const w = age * wear;\n      const i = ((phase[p] + wob[p] * w * WOB) * 1024) & 1023;\n      const g = grain[p];\n      const gr = 1 + GRAIN * g;\n      const fresh = age \u003c 4 ? 0.05 * (4 - age) : 0;\n      const sunT = (SUN_A + (SUN_B - 0.06 * w) * COS[i] + SUN_C * face[p] * (1 - 0.25 * w) * SIN[i] + fresh) * gr * direct;\n      const skyT = (SKY_A + SKY_B * COS[i]) * gr;\n      const add = ADD * g;\n      buf[q] = sr * sunT + kr * skyT + add;\n      buf[q + 1] = sg * sunT + kg * skyT + add + tint[p * 2];\n      buf[q + 2] = sb * sunT + kb * skyT + add + tint[p * 2 + 1];\n    }\n  }\n}\n\nfunction drawLeaves(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const turn = (l, i, j) => [[i, j], [4 - j, i], [4 - i, 4 - j], [j, 4 - i]][l.rot];\n  for (const l of P.leaves) {\n    const lx = l.x + Math.round(l.drift * l.z);\n    // A falling leaf's shadow lies apart from it, closing in as it lands.\n    const sx = Math.round(-L.lx * l.z * 9);\n    const sy = Math.round(-L.ly * l.z * 9);\n    for (const pass of l.z > 0 ? [0, 1] : [1])\n      for (let j = 0; j \u003c 5; j++)\n        for (let i = 0; i \u003c 5; i++) {\n          const [a, b] = turn(l, i, j);\n          if (LEAF[b][a] !== \"#\") continue;\n          const qx = lx + i - 2 + (pass ? 0 : sx);\n          const qy = l.y + j - 2 + (pass ? 0 : sy);\n          if (qx \u003c 0 || qx >= W || qy \u003c 0 || qy >= H) continue;\n          const q = (qy * W + qx) * 3;\n          if (!pass) {\n            for (let c = 0; c \u003c 3; c++) buf[q + c] *= 0.55;\n            continue;\n          }\n          const sh = 0.7 + 0.3 * P.shade[qy * W + qx] + 0.15 * l.z;\n          for (let c = 0; c \u003c 3; c++) buf[q + c] = LEAF_COL[l.col][c] * sh * (0.85 + (0.15 * L.col[c]) / 255);\n        }\n  }\n}\n\n// The rake: a wooden head across its band with five tines, and the bamboo handle reaching ahead.\nfunction drawRake(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const cyc = ((P.t % CYCLE) + CYCLE) % CYCLE;\n  const b = Math.floor(cyc / PASS);\n  if (b >= BANDS) return;\n  const u = (cyc - b * PASS) * RAKE_V;\n  if (u >= W + 10) return;\n  const dir = b % 2 ? -1 : 1;\n  const hx = Math.round(dir > 0 ? u - 5 : W + 4 - u);\n  const top = b * BAND;\n  const mid = top + 7;\n  for (let i = 1; i \u003c= 22; i++) {\n    const x = hx + dir * i;\n    const sx = x - Math.round(L.lx * 2);\n    const sy = mid - Math.round(L.ly * 2);\n    if (sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H) for (let c = 0; c \u003c 3; c++) buf[(sy * W + sx) * 3 + c] *= 0.6;\n    if (x \u003c 0 || x >= W) continue;\n    const q = (mid * W + x) * 3;\n    const grip = i > 17 ? 0.7 : 1;\n    buf[q] = 186 * grip;\n    buf[q + 1] = 156 * grip;\n    buf[q + 2] = 92 * grip;\n  }\n  for (let y = top; y \u003c Math.min(H, top + BAND); y++)\n    for (let i = 0; i \u003c 2; i++) {\n      const x = hx - dir * i;\n      if (x \u003c 0 || x >= W) continue;\n      const q = (y * W + x) * 3;\n      const tine = i === 1 && y % PER === 1;\n      buf[q] = tine ? 60 : 128;\n      buf[q + 1] = tine ? 40 : 84;\n      buf[q + 2] = tine ? 24 : 46;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  drawGarden(P);\n  drawLeaves(P);\n  drawRake(P);\n  const buf = P.buf;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, QZ(buf[q]), QZ(buf[q + 1]), QZ(buf[q + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Stones=3..5, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"Pale morning sun from the lower right at 0, white noon light at 0.5, low gold evening sun from the lower left at 1, and the stone shadows and the lit side of every ring swing with it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the rake walks and the clouds pass: at 2 the rake draws one 15-row band in about 6.5 seconds."},{"name":"Stones","min":3,"max":5,"about":"Three, four or five stone groups, each in its moss collar with two or three rings raked round it."},{"name":"Wind","min":0,"max":1,"about":"Calm at 0 with a leaf every ten seconds or so; at 1 the clouds cover half the garden and run three times as fast, and leaves come down every second and scuff the grooves."}],"start":[0,2,3,0.06],"measures":{"motion":0.0392,"detail":0.2481,"edges":0.4637,"complexity":1.6255,"coverage":0.96,"colour":0.1203,"drift":0.0759},"knobResponse":[0.1756,0.245,0.2327,0.2481]}],"families":{"algo":{"label":"알고리즘","color":"#e0c060"},"automata":{"label":"셀룰러 오토마타","color":"#9be15d"},"bird":{"label":"새","color":"#778800"},"body":{"label":"몸","color":"#bb5566"},"celestial":{"label":"천체","color":"#ffffaa"},"cells":{"label":"보로노이·셀","color":"#5fd0d0"},"chemistry":{"label":"화학·실험","color":"#00bb00"},"circuit":{"label":"전자 회로","color":"#2e7d32"},"city":{"label":"도시","color":"#22ff00"},"data":{"label":"데이터 그림","color":"#7fe08a"},"fair":{"label":"놀이공원","color":"#ffffff"},"flight":{"label":"비행","color":"#9944ee"},"fractal":{"label":"프랙탈","color":"#a3a0ff"},"fungi":{"label":"버섯·균사","color":"#00ff88"},"geometry":{"label":"기하·대칭","color":"#c77dff"},"glass":{"label":"유리","color":"#b0002a"},"glitch":{"label":"글리치","color":"#b0b8c8"},"growth":{"label":"자라남","color":"#d4c094"},"insect":{"label":"곤충","color":"#b4e61e"},"kitchen":{"label":"부엌","color":"#ff5500"},"light":{"label":"빛","color":"#7ef0d0"},"line":{"label":"선·궤적","color":"#ff7a45"},"machine":{"label":"기계·톱니","color":"#4a2cff"},"mammal":{"label":"짐승","color":"#998844"},"mineral":{"label":"광물·결정","color":"#886688"},"music":{"label":"음악·악기","color":"#a0705a"},"noise":{"label":"노이즈·흐름","color":"#5ec8ff"},"ocean":{"label":"바다","color":"#1f7fb8"},"paper":{"label":"종이","color":"#996600"},"particle":{"label":"입자","color":"#ffb02e"},"physics":{"label":"물리·스프링","color":"#ff9db0"},"pixel":{"label":"픽셀 아트","color":"#ffd166"},"print":{"label":"망점·인쇄","color":"#f0a0e0"},"rhythm":{"label":"리듬·펄스","color":"#ff4d4d"},"sim":{"label":"시뮬레이션","color":"#3fe0a8"},"space":{"label":"공간·원근","color":"#e8e05a"},"sport":{"label":"운동·경기","color":"#337777"},"stage":{"label":"무대·공연","color":"#ff0066"},"textile":{"label":"직물·짜임","color":"#e04ad8"},"time":{"label":"시계·시간","color":"#ff8f5a"},"toy":{"label":"장난감","color":"#dd11ff"},"type":{"label":"글자","color":"#ff5fa2"},"wave":{"label":"물결·간섭","color":"#4f7dff"},"weather":{"label":"날씨·자연","color":"#8fc0ff"}}}</script>
+<script id="study-data" type="application/json">{"patterns":[{"slug":"abyss","title":"Abyss","family":"ocean","round":16,"note":"물결 밑 햇빛층에서 심해 바닥까지 바다 한 기둥이 128줄에 서요. 빛내림과 정어리 떼 아래로 관해파리와 샛비늘치, 아귀의 미끼 불빛을 지나 잠수정이 등을 켜고 열수 분출공까지 내려갔다 올라와요. K1 을 누르면 죽은 고래가 기둥을 다 가라앉아 바닥에 뼈로 남아요.","idea":"One column of open sea, the 128 rows its depth, from god rays and sardines under the waves through the twilight and the black to a vent on the floor, with marine snow falling and a submersible diving.","buttons":"K1 tap drops a dead whale; it sinks the whole column, lighting up the plankton in the dark, and stays on the floor as a skeleton.","code":"// ===== Patternflow pattern =====\n// Title:   Abyss\n// Family:  ocean\n// Idea:    One column of open sea, the 128 rows its depth, from god rays and sardines under the waves through the twilight and the black to a vent on the floor, with marine snow falling and a submersible diving.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 16, after the ocean's zones of light\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Night=0..1, Speed=0.2..3, Current=-1..1, Bloom=0..1\n//\n// Knob 1: Night. Noon to midnight: the sky through the surface goes gold, then silver, and the lanternfish rise from the twilight to feed near the top, as they do every night.\n// Knob 2: Speed. How fast the sea runs: at 2 the submersible reaches the floor in 20 seconds and a dive is 50; waves, fish and snow keep pace.\n// Knob 3: Current. A current left or right under a wind that roughens the waves: the god rays break up and slide, the snow slants, the siphonophore streams out and the school faces upstream.\n// Knob 4: Bloom. From the clear blue of an ocean gyre to a spring plankton bloom: the water greens, the light dies shallower and the snow thickens.\n// Buttons: K1 tap drops a dead whale; it sinks the whole column, lighting up the plankton in the dark, and stays on the floor as a skeleton.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Depth squeezes going down: the sunlit zone (to 200 m) is rows 0 to 42, the twilight zone\n// (to 1000 m) rows 43 to 85, the midnight zone (to 4000 m) the rest down to the floor.\nconst FLOOR = 118;\nconst DARK = 90; // 1000 m: no sunlight below\n// The vent's chimney: its column, and the row of its mouth.\nconst VX = 45;\nconst VTOP = 101;\n// God rays are lines from a point RAY_D rows above the surface; RAY_U bins per unit slope.\nconst RAY_D = 46;\nconst RAY_U = 150;\n// How much of its colour the floor shows with no lamp on it, as a low-light camera sees it.\nconst AMB = 0.26;\n// One dive at Speed 2, in seconds: down, working at the vent, up, then 5 at the surface.\nconst DOWN = 20;\nconst WORK = 9;\nconst UP = 16;\nconst CYCLE = DOWN + WORK + UP + 5;\nconst LANT = 14;\nconst SNOW = 470;\nconst SPARK = 90;\nconst STEM = 54;\n\n// The submersible, bow right: w hull, r sail, v viewport, l lamp, t thruster, g belly, k skid.\nconst SUB = [\"......rr\", \"...wwwwwwww\", \".wwwwwwwwwwww\", \"twwwwwwwwwwwvv\", \".wwwwwwwwwwwwl\", \"..gggggggggg\", \"...k......k\"];\nconst HULL = { w: [225, 228, 232], r: [230, 70, 30], g: [130, 135, 142], t: [90, 92, 96], k: [55, 56, 60], v: [200, 140, 60] };\n// A female deep-sea anglerfish facing right: b body, t teeth, e eye, f fin.\nconst ANGLER = [\"....bbbbb\", \"..bbbbbbbbb\", \"fbbbbbbbbbbb\", \"fbbbbbbbbbet\", \"fbbbbbbbbb\", \"fbbbbbbbbbt\", \"fbbbbbbbbbbbt\", \"..bbbbbbbbbb\", \"....bbbbbb\"];\n// A sperm whale's carcass, flukes on the left, and the skeleton it leaves.\nconst WHALE = [\"..........xxxxxxxxx\", \"xx...xxxxxxxxxxxxxxx\", \".xxxxxxxxxxxxxxxxxxx\", \"xx...xxxxxxxxxxxxxx\", \"..........xx\"];\nconst BONES = [\"....o.o.o.o.o.o\", \"....o.o.o.o.o.o.oooo\", \"oooooooooooooooooooo\", \"....o.o.o.o.o.o..ooo\"];\n// The sky seen up through the surface at noon, at sunset and under the moon.\nconst SKY = [[200, 235, 245], [250, 150, 60], [52, 64, 84]];\nconst SPINDLE = [1.4, 2.3, 2.5, 1.7];\n// A sea pig in two steps.\nconst PIG = [\n  [\".o.o\", \"ooooo\", \"o.o.o\"],\n  [\".o.o\", \"ooooo\", \".ooo\"],\n];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction add(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] += r;\n  buf[o + 1] += g;\n  buf[o + 2] += b;\n}\n\nfunction set(buf, o, r, g, b) {\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nfunction sprite(art, x0, y0, fn) {\n  for (let j = 0; j \u003c art.length; j++)\n    for (let i = 0; i \u003c art[j].length; i++) {\n      const x = x0 + i;\n      const y = y0 + j;\n      if (art[j][i] !== \".\" && x >= 0 && x \u003c W && y >= 0 && y \u003c H) fn(x, y, art[j][i], j, (y * W + x) * 3);\n    }\n}\n\nfunction shade(P, o, r, g, b) {\n  const L = P.lamp;\n  set(P.buf, o, r * (AMB + 2.6 * L[o]), g * (AMB + 2.6 * L[o + 1]), b * (AMB + 2.6 * L[o + 2]));\n}\n\nconst F = (n) => new Float32Array(n);\nconst rnd = (n, a, b) => F(n).map(() => a + Math.random() * b);\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, drift: 0, night: 0, cur: 0, bloom: 0.06, started: false, knext: 0, kdebt: 0, pulse: 0 });\n  Object.assign(P, { whale: false, wx: 0, wy: 0, skel: -1, pig: 10, sub: { x: 0, y: 0, on: 0, a: 1 } });\n  Object.assign(P, { buf: F(N * 3), lamp: F(N * 3), rows: F(H * 4), sky: F(3), ray: F(256), floorCol: F(N * 3) });\n  P.floorOn = new Uint8Array(N);\n  P.floorY = new Int16Array(W);\n  // The panel opens mid-dive, the submersible halfway down.\n  P.subT = DOWN * 0.5;\n  // Schooling fish keep about a body length apart, so the sardines sit on a loose lattice.\n  const fx = [];\n  const fy = [];\n  for (let gy = -3; gy \u003c= 3; gy++)\n    for (let gx = -5; gx \u003c= 5; gx++) {\n      const x = (gx + (gy & 1) * 0.5) * 4.2 + (Math.random() - 0.5) * 1.2;\n      const y = gy * 2.3 + (Math.random() - 0.5) * 0.8;\n      if ((x / 16) ** 2 + (y / 7.2) ** 2 \u003c 1) fx.push(x), fy.push(y);\n    }\n  P.fx = Float32Array.from(fx);\n  P.fy = Float32Array.from(fy);\n  P.fph = P.fx.map(() => Math.random() * 6.283);\n  // Lanternfish: each one's depth by day, 400 to 800 m down, and by night near the top.\n  P.lx = rnd(LANT, 4, 56);\n  P.ly = F(LANT);\n  P.ldir = new Int8Array(LANT).map(() => (Math.random() \u003c 0.5 ? -1 : 1));\n  P.lv = rnd(LANT, 1.6, 2.2);\n  P.lday = rnd(LANT, 0, 2).map((v, i) => v + 50 + ((i * 5) % LANT) * 2.5);\n  P.lnight = rnd(LANT, 0, 2).map((v, i) => v + 7 + ((i * 3) % LANT) * 2.4);\n  P.lfl = F(LANT).fill(9);\n  P.sx = rnd(SNOW, 0, W);\n  P.sy = rnd(SNOW, 0, FLOOR);\n  P.sv = rnd(SNOW, 0.5, 1.1);\n  P.ss = rnd(SNOW, 0, 1).map((v) => (v \u003c 0.22 ? 1 : 0.55 + 0.3 * Math.random()));\n  // Flashes of bioluminescence: a copepod's spark lasts under a second, a shrimp's spat cloud two.\n  Object.assign(P, { kx: F(SPARK), ky: F(SPARK), kage: F(SPARK).fill(9), klife: F(SPARK).fill(1) });\n  bakeFloor(P);\n}\n\n// The floor's colours: silt with manganese nodules, the chimney, tube worms, and any skeleton.\nfunction bakeFloor(P) {\n  const lay = (x, y, r, g, b) => {\n    set(P.floorCol, (y * W + x) * 3, r, g, b);\n    P.floorOn[y * W + x] = 1;\n  };\n  P.floorCol.fill(0);\n  P.floorOn.fill(0);\n  for (let x = 0; x \u003c W; x++) {\n    const top = Math.round(FLOOR + 1.3 * Math.sin(x * 0.17 + 1) + 0.8 * Math.sin(x * 0.53) - (hash(x, 3) \u003c 0.15 ? 1 : 0));\n    P.floorY[x] = top;\n    for (let y = top; y \u003c H; y++) {\n      const g = 0.82 + 0.3 * hash(x, y) - 0.04 * (y - top);\n      lay(x, y, 112 * g, 104 * g, 90 * g);\n    }\n    if (hash(x, 9) \u003c 0.18) lay(x, top, 34, 28, 26);\n  }\n  // The chimney: sulphide rock streaked with rust and sulphur.\n  for (let y = VTOP; y \u003c FLOOR + 2; y++) {\n    const h = (y - VTOP) / (FLOOR - VTOP);\n    const hw = 1.2 + 3.6 * h * h + (hash(y, 4) - 0.5) * 1.2;\n    for (let x = Math.round(VX - hw); x \u003c= Math.round(VX + hw); x++) {\n      const s = hash(x, y * 7);\n      if (s \u003c 0.12) lay(x, y, 150, 86, 38);\n      else if (s \u003c 0.17) lay(x, y, 150, 140, 62);\n      else lay(x, y, 80 + 20 * s, 66 + 14 * s, 58);\n    }\n  }\n  [-8, -6, -5, 5, 6, 8, 9].forEach((d, i) => {\n    const x = VX + d;\n    const top = P.floorY[x] - 3 - Math.floor(hash(i, 5) * 4);\n    for (let y = top; y \u003c P.floorY[x]; y++) lay(x, y, 205, 205, 195);\n    lay(x, top - 1, 220, 30, 30);\n    lay(x + Math.sign(d), top - 1, 180, 20, 24);\n  });\n  if (P.skel >= 0) sprite(BONES, P.skel, 0, (x, y, c, j) => lay(x, P.floorY[x] - 3 + j, 226, 218, 192));\n}\n\n// The water's colour at each row: each channel dies with depth at its own rate, red within a\n// few rows, green next, blue last. A bloom's chlorophyll eats the blue, so its water is green.\nfunction bakeRows(P) {\n  const n = P.night;\n  const b = P.bloom;\n  const day = 1 - smooth(0.22, 0.88, n);\n  const sun = 0.1 + 0.9 * day * Math.sqrt(day);\n  const warm = Math.exp(-(((n - 0.48) / 0.16) ** 2));\n  const moon = smooth(0.6, 1, n);\n  const dusk = smooth(0.12, 0.48, n);\n  for (let c = 0; c \u003c 3; c++) {\n    const lit = SKY[0][c] + (SKY[1][c] - SKY[0][c]) * dusk;\n    P.sky[c] = lit + (SKY[2][c] - lit) * moon;\n  }\n  const tr = sun * (1 + 0.5 * warm - 0.3 * moon) * (60 - 20 * b);\n  const tg = sun * (1 - 0.08 * warm - 0.1 * moon) * (175 + 55 * b);\n  const tb = sun * (1 - 0.15 * warm + 0.1 * moon) * (245 - 125 * b);\n  for (let y = 0; y \u003c H; y++) {\n    const f = 1 - smooth(62, DARK, y);\n    set(P.rows, y * 4, tr * Math.exp(-y / 4.5) * f, tg * Math.exp(-y / (18 - 6 * b)) * f, tb * Math.exp(-y / (44 - 24 * b)) * f);\n    P.rows[y * 4 + 3] = 1.25 * Math.exp(-y / 24) * (1 - 0.55 * b) * (0.35 + 0.65 * day);\n  }\n  P.sun = sun;\n}\n\n// The waves focus sunlight into shafts: each bin is one line down from the point above, lit by\n// where it crosses the waves. Wind adds short fast waves that break the shafts up.\nfunction bakeRays(P) {\n  const t = P.t;\n  const rough = 0.8 * Math.abs(P.cur);\n  for (let j = 0; j \u003c 256; j++) {\n    const s = 34 + ((j - 128) / RAY_U) * RAY_D + P.drift;\n    const a =\n      Math.sin(0.41 * s + t + 0.9 * Math.sin(0.16 * s - 0.45 * t)) +\n      0.75 * Math.sin(0.73 * s - 1.6 * t + 1.3) +\n      0.5 * Math.sin(1.21 * s + 2.2 * t + 0.4) +\n      rough * (Math.sin(1.93 * s + 3.4 * t) + 0.7 * Math.sin(2.71 * s - 4.1 * t + 2));\n    P.ray[j] = clamp((a + 0.3 + 0.4 * rough) / (1.95 + 1.2 * rough), 0, 1) ** 3;\n  }\n}\n\nfunction spark(P, x, y, kind) {\n  const i = (P.knext = (P.knext + 1) % SPARK);\n  P.kx[i] = x;\n  P.ky[i] = y;\n  P.kage[i] = 0;\n  P.klife[i] = kind ? 1.4 + Math.random() * 0.6 : 0.25 + Math.random() * 0.4;\n}\n\n// The submersible's place in its dive, and its lamps' angle below the horizon.\nfunction placeSub(P) {\n  const S = P.sub;\n  const ph = P.subT % CYCLE;\n  const ease = (f) => f - (0.4 * Math.sin(6.2832 * f)) / 6.2832;\n  let y = 5 + 0.6 * Math.sin(P.t * 1.7);\n  let x = 14;\n  S.a = 1;\n  if (ph \u003c DOWN) {\n    const e = ease(ph / DOWN);\n    y = 5 + 90 * e;\n    x = 14 + 9 * e;\n  } else if (ph \u003c DOWN + WORK) {\n    const f = (ph - DOWN) / WORK;\n    y = 95 + 1.5 * Math.sin(f * 3.14);\n    x = 23 + 3 * Math.sin(f * 3.14);\n    // The pilot sweeps the lamps over the chimney and back.\n    S.a = 0.55 + 0.35 * Math.cos(f * 6.2832);\n  } else if (ph \u003c DOWN + WORK + UP) {\n    const e = ease((ph - DOWN - WORK) / UP);\n    y = 95 - 90 * e;\n    x = 23 - 9 * e;\n    S.a = 1.35;\n  }\n  S.x = x + P.cur * 10;\n  S.y = y;\n  S.on = ph \u003c DOWN + WORK + UP ? smooth(9, 16, y) : 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.night = clamp(k[0], 0, 1);\n  P.cur = clamp(k[2], -1, 1);\n  P.bloom = clamp(k[3], 0, 1);\n  const s = (dt * clamp(k[1], 0.2, 3)) / 2;\n  P.t += s;\n  P.drift += s * P.cur * 4;\n  P.subT += s;\n  placeSub(P);\n  const S = P.sub;\n\n  // Lanternfish swim to the depth of the hour at 7 rows a second; males flash a tail gland.\n  const up = smooth(0.35, 0.85, P.night);\n  for (let i = 0; i \u003c LANT; i++) {\n    const want = P.lday[i] + (P.lnight[i] - P.lday[i]) * up;\n    P.ly[i] = P.started ? P.ly[i] + clamp(want - P.ly[i], -7 * s, 7 * s) : want;\n    P.lx[i] = clamp(P.lx[i] + (P.ldir[i] * P.lv[i] + P.cur * 1.5) * s, 0, 63);\n    if ((P.lx[i] - 31.5) * P.ldir[i] > 28.5 || Math.random() \u003c 0.05 * s) P.ldir[i] *= -1;\n    P.lfl[i] += s;\n    if (P.lfl[i] > 9 && Math.random() \u003c 0.12 * s) P.lfl[i] = 0;\n  }\n  P.started = true;\n\n  const flakes = Math.round(110 + 360 * P.bloom);\n  for (let i = 0; i \u003c flakes; i++) {\n    P.sy[i] += P.sv[i] * s;\n    P.sx[i] = (P.sx[i] + (P.cur * 4 + 0.7 * Math.sin(P.t * 0.8 + i)) * s + W) % W;\n    if (P.sy[i] >= P.floorY[Math.floor(P.sx[i])]) {\n      P.sy[i] -= FLOOR;\n      P.sx[i] = Math.random() * W;\n    }\n  }\n\n  // Copepods spark in the dark, now and then a shrimp spits a cloud of light, and at night the\n  // surface sparkles too. The submersible trips more as it passes.\n  P.kdebt += s * (5 + 5 * up);\n  for (; P.kdebt > 1; P.kdebt--) {\n    const shallow = Math.random() \u003c 0.45 * up;\n    spark(P, Math.random() * W, shallow ? 3 + Math.random() * 40 : 52 + Math.random() * 64, !shallow && Math.random() \u003c 0.13 ? 1 : 0);\n  }\n  if (S.y > 55 && Math.random() \u003c 6 * s) spark(P, S.x - 7 + Math.random() * 14, S.y - 3 + Math.random() * 7, 0);\n  for (let i = 0; i \u003c SPARK; i++) P.kage[i] += s;\n\n  P.pulse = (P.pulse + s) % 4;\n\n  if (input.btnPressed && input.btnPressed[0]) Object.assign(P, { whale: true, wx: 4 + Math.floor(Math.random() * 18), wy: -4 });\n  if (P.whale) {\n    P.wy += 5 * s;\n    if (P.wy > 50 && Math.random() \u003c 30 * s) spark(P, P.wx + Math.random() * 20, P.wy - 3 + Math.random() * 7, 0);\n    if (P.wy >= FLOOR - 4) {\n      P.whale = false;\n      P.skel = P.wx;\n      bakeFloor(P);\n    }\n  }\n\n  P.pig = P.pig > 34 ? -6 : P.pig + 0.35 * s;\n}\n\n// The lamps' light, warm near and blue-green further out as the water takes the red first;\n// the beam lights the water itself faintly.\nfunction lightLamps(P) {\n  const L = P.lamp;\n  L.fill(0);\n  const S = P.sub;\n  if (S.on \u003c 0.01) return;\n  const ox = S.x + 6.5;\n  const oy = S.y + 1.5;\n  const ca = Math.cos(S.a);\n  const sa = Math.sin(S.a);\n  const haze = (105 + 60 * P.bloom) * S.on;\n  for (let y = Math.max(0, Math.floor(oy - 4)); y \u003c= Math.min(H - 1, oy + 46); y++) {\n    const dy = y + 0.5 - oy;\n    for (let x = Math.max(0, Math.floor(ox - 46)); x \u003c= Math.min(W - 1, ox + 46); x++) {\n      const dx = x + 0.5 - ox;\n      const r2 = dx * dx + dy * dy;\n      const r = Math.sqrt(r2) + 0.01;\n      const c = (dx * ca + dy * sa) / r;\n      if (c \u003c 0.88) continue;\n      const I = (smooth(0.88, 0.965, c) * S.on * Math.exp(-r / 38)) / (1 + r2 / 500);\n      const o = (y * W + x) * 3;\n      set(L, o, I * Math.exp(-r / 16), I * Math.exp(-r / 40), I * Math.exp(-r / 60));\n      add(P.buf, x, y, L[o] * haze, L[o + 1] * haze, L[o + 2] * haze);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const rows = P.rows;\n  const L = P.lamp;\n  const t = P.t;\n  bakeRows(P);\n  bakeRays(P);\n\n  const xs = 34 + 2 * Math.sin(t * 0.3);\n  for (let y = 0; y \u003c H; y++) {\n    const A = rows[y * 4 + 3];\n    const inv = RAY_U / (y + RAY_D);\n    for (let x = 0, o = y * W * 3; x \u003c W; x++, o += 3) {\n      const m = A > 0.02 ? 1 + A * (1.5 * P.ray[clamp(((x - xs) * inv + 128) | 0, 0, 255)] - 0.33) : 1;\n      set(buf, o, rows[y * 4] * m, rows[y * 4 + 1] * m, rows[y * 4 + 2] * m);\n    }\n  }\n  // The underside of the surface: the sky through Snell's window, and the waves.\n  for (let y = 0; y \u003c 4; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const w = 0.5 + 0.5 * Math.sin(x * 0.45 + P.drift * 0.45 + t * 1.3 + Math.sin(x * 0.19 - t * 0.6) * 1.4);\n      const v = (1 - y / 4) * (0.55 + 0.45 * w) + 0.8 * Math.exp(-(((x - xs) / 5) ** 2)) * (1 - y / 3.5);\n      add(buf, x, y, v * P.sky[0], v * P.sky[1], v * P.sky[2]);\n    }\n\n  lightLamps(P);\n\n  // The floor, and the vent's dull red glow, too faint for an eye but not for a camera.\n  const glow = 0.75 + 0.25 * Math.sin(t * 7) * Math.sin(t * 3.1);\n  for (let p = (VTOP - 1) * W; p \u003c N; p++) {\n    if (!P.floorOn[p]) continue;\n    const o = p * 3;\n    shade(P, o, P.floorCol[o], P.floorCol[o + 1], P.floorCol[o + 2]);\n    const d2 = ((p % W) - VX) ** 2 + (Math.floor(p / W) - VTOP) ** 2;\n    const v = d2 \u003c 30 ? 95 * glow * Math.exp(-d2 / 5) : 0;\n    set(buf, o, buf[o] + v, buf[o + 1] + v * 0.18, buf[o + 2] + v * 0.05);\n  }\n\n  // The black smoke hides the beam behind it, greys where the lamps catch it, reddens at its\n  // root, where 350-degree water comes out.\n  for (let y = VTOP - 30; y \u003c VTOP; y++) {\n    const h = VTOP - y;\n    const cx = VX + P.cur * 0.016 * h * h + 1.1 * Math.sin(h * 0.3 - t * 2.1);\n    const hw = 1 + h * 0.3;\n    const red = 90 * glow * Math.exp(-h / 2.5);\n    for (let x = Math.max(0, Math.ceil(cx - hw)); x \u003c= Math.min(W - 1, cx + hw); x++) {\n      const q = (x - cx) / hw;\n      const d = (1 - q * q) * (0.72 + 0.14 * Math.sin(x * 1.3 + y * 0.9 + t * 3) + 0.14 * Math.sin(x * 0.7 - y * 1.7 + t * 4.1)) * (1 - h / 30);\n      const o = (y * W + x) * 3;\n      const k = 1 - 0.8 * d;\n      set(buf, o, buf[o] * k + d * (62 * (0.08 + 2.2 * L[o]) + red), buf[o + 1] * k + d * (56 * (0.08 + 2.2 * L[o + 1]) + red * 0.15), buf[o + 2] * k + d * 52 * (0.08 + 2.2 * L[o + 2]));\n    }\n  }\n\n  // A sea pig, the pink deep-sea cucumber, walks the silt on its tube feet.\n  const px = Math.round(P.pig);\n  sprite(PIG[Math.floor(t * 2) % 2], px, P.floorY[clamp(px + 2, 0, W - 1)] - 3, (x, y, c, j, o) => shade(P, o, 225, 165, 175));\n\n  drawSiphonophore(P, buf);\n  drawLanternfish(P, buf);\n  drawAngler(P, buf);\n  drawSchool(P, buf);\n\n  const flakes = Math.round(110 + 360 * P.bloom);\n  for (let i = 0; i \u003c flakes; i++) {\n    const y = Math.floor(P.sy[i]);\n    if (y \u003c 4) continue;\n    const o = (y * W + Math.floor(P.sx[i])) * 3;\n    const lit = P.ss[i] * (34 + 0.2 * rows[y * 4 + 2]);\n    const k = 330 * P.ss[i];\n    set(buf, o, buf[o] + lit * 0.95 + k * L[o], buf[o + 1] + lit + k * L[o + 1], buf[o + 2] + lit * 0.95 + k * L[o + 2]);\n  }\n\n  for (let i = 0; i \u003c SPARK; i++) {\n    const a = P.kage[i] / P.klife[i];\n    if (a >= 1) continue;\n    const cloud = P.klife[i] > 1;\n    const R = cloud ? 1 + 4 * Math.sqrt(a) : 1.6;\n    const v = cloud ? 150 * (1 - a) : (a \u003c 0.15 ? a / 0.15 : (1 - a) / 0.85) * 230;\n    for (let dy = -5; dy \u003c= 5; dy++)\n      for (let dx = -5; dx \u003c= 5; dx++) {\n        const q = 1 - (dx * dx + dy * dy) / (R * R);\n        if (q > 0) add(buf, Math.round(P.kx[i]) + dx, Math.round(P.ky[i]) + dy, v * 0.25 * q, v * 0.68 * q, v * q);\n      }\n  }\n\n  drawWhale(P, buf);\n  drawSub(P, buf);\n\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[p * 3]), Math.min(255, buf[p * 3 + 1]), Math.min(255, buf[p * 3 + 2]));\n}\n\n// The siphonophore: one glassy stem, polyps every four LEDs trailing fishing tentacles.\nfunction drawSiphonophore(P, buf) {\n  const t = P.t;\n  const cur = P.cur;\n  const tx = 52 + 4 * Math.sin(t * 0.05);\n  const ty = 46 + 1.5 * Math.sin(t * 0.13);\n  const pp = P.pulse * 16;\n  for (let i = 0; i \u003c STEM; i++) {\n    const s = i / STEM;\n    const x = tx + cur * 15 * s * Math.sqrt(s) + 3 * s * Math.sin(i * 0.15 - t * 0.8);\n    const iy = Math.round(ty + 8.5 + i * (0.95 - 0.3 * Math.abs(cur) * s));\n    const v = 0.24 + 0.85 * Math.exp(-(((i - pp) / 2.5) ** 2));\n    const ix = Math.round(x);\n    add(buf, ix, iy, 70 * v, 120 * v, 230 * v);\n    for (const e of [-1, 1]) add(buf, ix + e, iy, 21 * v, 36 * v, 70 * v);\n    if (i % 4 === 2) {\n      add(buf, ix, iy, 120 * v, 150 * v, 200 * v);\n      for (let j = 1; j \u003c= 4; j++)\n        add(buf, Math.round(x + (cur >= 0 ? j : -j) * (0.3 + Math.abs(cur) * 0.7) + 0.5 * Math.sin(t + i)), iy + j, 26 * v, 40 * v, 80 * v);\n    }\n  }\n  // On top a gas float, then four pairs of swimming bells, each pair beating after the last.\n  const lit = 1 + 1.5 * Math.exp(-pp / 3);\n  const cx = Math.round(tx);\n  add(buf, cx, Math.round(ty) - 1, 95, 45, 34);\n  for (let k = 0; k \u003c 4; k++) {\n    const sq = Math.max(0, Math.sin(t * 4.2 - k * 0.9)) ** 4;\n    for (let r = 0; r \u003c 2; r++) {\n      const n = Math.round(SPINDLE[k] * (1 - 0.3 * sq) - r * 0.5);\n      for (let d = -n; d \u003c= n; d++) {\n        const v = (Math.abs(d) === n ? 0.4 : 0.12) * lit;\n        add(buf, cx + d, Math.round(ty + 0.5 + k * 2) + r, 90 * v, 150 * v, 255 * v);\n      }\n    }\n  }\n}\n\n// Lanternfish show little but their photophores, belly lights that match the faint light from\n// above and hide the fish's shadow.\nfunction drawLanternfish(P, buf) {\n  const D = [0, 0, -1, 1, -3, 1, -5, 1];\n  for (let i = 0; i \u003c LANT; i++) {\n    const x = Math.round(P.lx[i]);\n    const y = Math.round(P.ly[i] + 0.6 * Math.sin(P.t * 1.3 + i));\n    const d = P.ldir[i];\n    for (let j = 0; j \u003c 11; j++) add(buf, x - d * (j >> 1), y + (j & 1), 10, 16, 24);\n    const v = 0.75 + 0.25 * Math.sin(P.t * 2 + i * 1.7);\n    for (let j = 0; j \u003c D.length; j += 2) add(buf, x + d * D[j], y + D[j + 1], 50 * v, 150 * v, 240 * v);\n    if (P.lfl[i] \u003c 0.25) add(buf, x - d * 6, y, 200, 230, 255);\n  }\n}\n\n// The anglerfish is black and shows only where its lure lights it: the jaw and needle teeth.\nfunction drawAngler(P, buf) {\n  const t = P.t;\n  const ax = Math.round(5 + 3 * Math.sin(t * 0.07));\n  const ay = Math.round(103 + 2 * Math.sin(t * 0.11));\n  const lx = ax + 15 + 0.6 * Math.sin(t * 1.9);\n  const ly = ay + 1 + 0.8 * Math.sin(t * 2.6);\n  const pulse = 0.6 + 0.4 * Math.max(0, Math.sin(t * 1.3)) + (Math.sin(t * 9) > 0.97 ? 0.3 : 0);\n  sprite(ANGLER, ax, ay, (x, y, c) => {\n    const g = pulse / (1 + ((x - lx) ** 2 + (y - ly) ** 2) / 14);\n    const k = c === \"t\" ? [250, 255, 245] : c === \"e\" ? [90, 170, 160] : [120, 96, 92];\n    add(buf, x, y, k[0] * g, k[1] * g, k[2] * g);\n  });\n  for (let s = 0.1; s \u003c 0.95; s += 0.12) {\n    const u = 1 - s;\n    const x = u * u * (ax + 8) + 2 * u * s * (ax + 15) + s * s * lx;\n    const y = u * u * ay + 2 * u * s * (ay - 7) + s * s * (ly - 1);\n    add(buf, Math.round(x), Math.round(y), 24 * pulse, 60 * pulse, 54 * pulse);\n  }\n  for (let dy = -3; dy \u003c= 3; dy++)\n    for (let dx = -3; dx \u003c= 3; dx++) {\n      const q = dx * dx + dy * dy;\n      const g = q ? (pulse * 0.5) / (1 + q) : pulse * 1.3;\n      add(buf, Math.round(lx) + dx, Math.round(ly) + dy, 70 * g, 235 * g, 205 * g);\n    }\n}\n\n// The sardines wheel as one. Broadside a fish is a silver dash, darker to the tail; turning,\n// it is seen end on and its flank throws the sun back, so a flash runs through the school.\nfunction drawSchool(P, buf) {\n  const t = P.t;\n  const cur = P.cur;\n  // Into a current the school holds station, facing upstream.\n  const hold = Math.min(1, Math.abs(cur) * 1.4);\n  const amp = 16 * (1 - 0.6 * hold);\n  const cx = 32 - 12 * cur * hold + amp * Math.sin(t * 0.23);\n  const cy = 22 + 6 * Math.sin(t * 0.29 + 1);\n  const sun = P.sun;\n  for (let i = 0; i \u003c P.fx.length; i++) {\n    const ox = P.fx[i];\n    const oy = P.fy[i];\n    // The leading side turns first; the turn reaches the far side 0.8 s later.\n    const lag = (ox / 16) * 0.4 * Math.sign(Math.cos(t * 0.23)) + 0.4;\n    const hx = Math.tanh(amp * 0.32 * Math.cos((t - lag) * 0.23)) * (1 - hold) - Math.sign(cur) * hold;\n    const x = Math.round(cx + ox + 1.8 * Math.sin(oy * 0.45 + t * 0.7) + 0.5 * Math.sin(t * 1.7 + P.fph[i]));\n    const y = Math.round(cy + oy + 1.1 * Math.sin(ox * 0.22 + t * 0.9));\n    if (y \u003c 4 || y > 44) continue;\n    const dir = hx >= 0 ? 1 : -1;\n    const len = Math.abs(hx) > 0.6 ? 3 : Math.abs(hx) > 0.25 ? 2 : 1;\n    const g = Math.min(1, (1 - Math.abs(hx)) ** 3 * 1.3 + Math.max(0, Math.sin(t * 2.3 + P.fph[i] * 7)) ** 40);\n    const light = sun * (0.35 + 0.65 * Math.min(1, P.rows[y * 4 + 2] / 170));\n    for (let j = 0; j \u003c len; j++) {\n      const xx = x - dir * j;\n      if (xx \u003c 0 || xx >= W) continue;\n      const o = (y * W + xx) * 3;\n      const body = (j === 2 ? 0.45 : j === 1 ? 0.8 : 1) * light;\n      const f = 1 - g;\n      set(buf, o, (buf[o] * 0.25 + 120 * body) * f + 235 * g * sun, (buf[o + 1] * 0.25 + 160 * body) * f + 242 * g * sun, (buf[o + 2] * 0.25 + 190 * body) * f + 250 * g * sun);\n    }\n  }\n}\n\n// The carcass is lit as the water round it is; in the dark the plankton it hits lights its edges.\nfunction drawWhale(P, buf) {\n  if (!P.whale) return;\n  const tick = Math.floor(P.t * 12);\n  sprite(WHALE, P.wx, Math.round(P.wy), (x, y, c, j, o) => {\n    const day = P.rows[clamp(y - 3, 0, H - 1) * 4 + 2] / 255;\n    const sh = (j ? 0.8 : 1.4) * day;\n    const i = x - P.wx;\n    const edge = !j || j === 4 || [WHALE[j - 1][i], WHALE[j + 1][i], WHALE[j][i - 1], WHALE[j][i + 1]].some((n) => n !== \"x\");\n    const g = edge ? clamp(1 - day * 4, 0, 1) * (hash(x * 31 + tick, y) \u003c 0.35 ? 1 : 0.22) : 0;\n    set(buf, o, 70 * sh + 260 * P.lamp[o] + 40 * g, 80 * sh + 250 * P.lamp[o + 1] + 120 * g, 95 * sh + 240 * P.lamp[o + 2] + 210 * g);\n  });\n}\n\nfunction drawSub(P, buf) {\n  const S = P.sub;\n  const x0 = Math.round(S.x) - 7;\n  const y0 = Math.round(S.y) - 3;\n  sprite(SUB, x0, y0, (x, y, c, j, o) => {\n    const lit = \"kvl\".includes(c) ? 1 : 0.78 + 0.22 * Math.min(1, (P.rows[y * 4 + 2] / 255) * 1.3) + (j \u003c 2 ? 0.1 : 0) - (j > 4 ? 0.25 : 0);\n    const h = HULL[c] || (S.on > 0.1 ? [255, 250, 225] : [110, 110, 110]);\n    set(buf, o, h[0] * lit, h[1] * lit, h[2] * lit);\n  });\n  if (S.y > 7 && P.t % 2 \u003c 0.1) add(buf, x0 + 6, y0, 255, 255, 255);\n  if (S.on > 0.1)\n    for (let dy = -2; dy \u003c= 2; dy++)\n      for (let dx = -2; dx \u003c= 2; dx++) {\n        const g = dx || dy ? (S.on * 120) / (1 + dx * dx + dy * dy) : 0;\n        add(buf, x0 + 13 + dx, y0 + 4 + dy, g, g, g * 0.9);\n      }\n}\n","layer":{"id":"layer-abyss","type":"code","name":"abyss","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Abyss\n// Family:  ocean\n// Idea:    One column of open sea, the 128 rows its depth, from god rays and sardines under the waves through the twilight and the black to a vent on the floor, with marine snow falling and a submersible diving.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 16, after the ocean's zones of light\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Night=0..1, Speed=0.2..3, Current=-1..1, Bloom=0..1\n//\n// Knob 1: Night. Noon to midnight: the sky through the surface goes gold, then silver, and the lanternfish rise from the twilight to feed near the top, as they do every night.\n// Knob 2: Speed. How fast the sea runs: at 2 the submersible reaches the floor in 20 seconds and a dive is 50; waves, fish and snow keep pace.\n// Knob 3: Current. A current left or right under a wind that roughens the waves: the god rays break up and slide, the snow slants, the siphonophore streams out and the school faces upstream.\n// Knob 4: Bloom. From the clear blue of an ocean gyre to a spring plankton bloom: the water greens, the light dies shallower and the snow thickens.\n// Buttons: K1 tap drops a dead whale; it sinks the whole column, lighting up the plankton in the dark, and stays on the floor as a skeleton.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Depth squeezes going down: the sunlit zone (to 200 m) is rows 0 to 42, the twilight zone\n// (to 1000 m) rows 43 to 85, the midnight zone (to 4000 m) the rest down to the floor.\nconst FLOOR = 118;\nconst DARK = 90; // 1000 m: no sunlight below\n// The vent's chimney: its column, and the row of its mouth.\nconst VX = 45;\nconst VTOP = 101;\n// God rays are lines from a point RAY_D rows above the surface; RAY_U bins per unit slope.\nconst RAY_D = 46;\nconst RAY_U = 150;\n// How much of its colour the floor shows with no lamp on it, as a low-light camera sees it.\nconst AMB = 0.26;\n// One dive at Speed 2, in seconds: down, working at the vent, up, then 5 at the surface.\nconst DOWN = 20;\nconst WORK = 9;\nconst UP = 16;\nconst CYCLE = DOWN + WORK + UP + 5;\nconst LANT = 14;\nconst SNOW = 470;\nconst SPARK = 90;\nconst STEM = 54;\n\n// The submersible, bow right: w hull, r sail, v viewport, l lamp, t thruster, g belly, k skid.\nconst SUB = [\"......rr\", \"...wwwwwwww\", \".wwwwwwwwwwww\", \"twwwwwwwwwwwvv\", \".wwwwwwwwwwwwl\", \"..gggggggggg\", \"...k......k\"];\nconst HULL = { w: [225, 228, 232], r: [230, 70, 30], g: [130, 135, 142], t: [90, 92, 96], k: [55, 56, 60], v: [200, 140, 60] };\n// A female deep-sea anglerfish facing right: b body, t teeth, e eye, f fin.\nconst ANGLER = [\"....bbbbb\", \"..bbbbbbbbb\", \"fbbbbbbbbbbb\", \"fbbbbbbbbbet\", \"fbbbbbbbbb\", \"fbbbbbbbbbt\", \"fbbbbbbbbbbbt\", \"..bbbbbbbbbb\", \"....bbbbbb\"];\n// A sperm whale's carcass, flukes on the left, and the skeleton it leaves.\nconst WHALE = [\"..........xxxxxxxxx\", \"xx...xxxxxxxxxxxxxxx\", \".xxxxxxxxxxxxxxxxxxx\", \"xx...xxxxxxxxxxxxxx\", \"..........xx\"];\nconst BONES = [\"....o.o.o.o.o.o\", \"....o.o.o.o.o.o.oooo\", \"oooooooooooooooooooo\", \"....o.o.o.o.o.o..ooo\"];\n// The sky seen up through the surface at noon, at sunset and under the moon.\nconst SKY = [[200, 235, 245], [250, 150, 60], [52, 64, 84]];\nconst SPINDLE = [1.4, 2.3, 2.5, 1.7];\n// A sea pig in two steps.\nconst PIG = [\n  [\".o.o\", \"ooooo\", \"o.o.o\"],\n  [\".o.o\", \"ooooo\", \".ooo\"],\n];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction add(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] += r;\n  buf[o + 1] += g;\n  buf[o + 2] += b;\n}\n\nfunction set(buf, o, r, g, b) {\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nfunction sprite(art, x0, y0, fn) {\n  for (let j = 0; j \u003c art.length; j++)\n    for (let i = 0; i \u003c art[j].length; i++) {\n      const x = x0 + i;\n      const y = y0 + j;\n      if (art[j][i] !== \".\" && x >= 0 && x \u003c W && y >= 0 && y \u003c H) fn(x, y, art[j][i], j, (y * W + x) * 3);\n    }\n}\n\nfunction shade(P, o, r, g, b) {\n  const L = P.lamp;\n  set(P.buf, o, r * (AMB + 2.6 * L[o]), g * (AMB + 2.6 * L[o + 1]), b * (AMB + 2.6 * L[o + 2]));\n}\n\nconst F = (n) => new Float32Array(n);\nconst rnd = (n, a, b) => F(n).map(() => a + Math.random() * b);\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, drift: 0, night: 0, cur: 0, bloom: 0.06, started: false, knext: 0, kdebt: 0, pulse: 0 });\n  Object.assign(P, { whale: false, wx: 0, wy: 0, skel: -1, pig: 10, sub: { x: 0, y: 0, on: 0, a: 1 } });\n  Object.assign(P, { buf: F(N * 3), lamp: F(N * 3), rows: F(H * 4), sky: F(3), ray: F(256), floorCol: F(N * 3) });\n  P.floorOn = new Uint8Array(N);\n  P.floorY = new Int16Array(W);\n  // The panel opens mid-dive, the submersible halfway down.\n  P.subT = DOWN * 0.5;\n  // Schooling fish keep about a body length apart, so the sardines sit on a loose lattice.\n  const fx = [];\n  const fy = [];\n  for (let gy = -3; gy \u003c= 3; gy++)\n    for (let gx = -5; gx \u003c= 5; gx++) {\n      const x = (gx + (gy & 1) * 0.5) * 4.2 + (Math.random() - 0.5) * 1.2;\n      const y = gy * 2.3 + (Math.random() - 0.5) * 0.8;\n      if ((x / 16) ** 2 + (y / 7.2) ** 2 \u003c 1) fx.push(x), fy.push(y);\n    }\n  P.fx = Float32Array.from(fx);\n  P.fy = Float32Array.from(fy);\n  P.fph = P.fx.map(() => Math.random() * 6.283);\n  // Lanternfish: each one's depth by day, 400 to 800 m down, and by night near the top.\n  P.lx = rnd(LANT, 4, 56);\n  P.ly = F(LANT);\n  P.ldir = new Int8Array(LANT).map(() => (Math.random() \u003c 0.5 ? -1 : 1));\n  P.lv = rnd(LANT, 1.6, 2.2);\n  P.lday = rnd(LANT, 0, 2).map((v, i) => v + 50 + ((i * 5) % LANT) * 2.5);\n  P.lnight = rnd(LANT, 0, 2).map((v, i) => v + 7 + ((i * 3) % LANT) * 2.4);\n  P.lfl = F(LANT).fill(9);\n  P.sx = rnd(SNOW, 0, W);\n  P.sy = rnd(SNOW, 0, FLOOR);\n  P.sv = rnd(SNOW, 0.5, 1.1);\n  P.ss = rnd(SNOW, 0, 1).map((v) => (v \u003c 0.22 ? 1 : 0.55 + 0.3 * Math.random()));\n  // Flashes of bioluminescence: a copepod's spark lasts under a second, a shrimp's spat cloud two.\n  Object.assign(P, { kx: F(SPARK), ky: F(SPARK), kage: F(SPARK).fill(9), klife: F(SPARK).fill(1) });\n  bakeFloor(P);\n}\n\n// The floor's colours: silt with manganese nodules, the chimney, tube worms, and any skeleton.\nfunction bakeFloor(P) {\n  const lay = (x, y, r, g, b) => {\n    set(P.floorCol, (y * W + x) * 3, r, g, b);\n    P.floorOn[y * W + x] = 1;\n  };\n  P.floorCol.fill(0);\n  P.floorOn.fill(0);\n  for (let x = 0; x \u003c W; x++) {\n    const top = Math.round(FLOOR + 1.3 * Math.sin(x * 0.17 + 1) + 0.8 * Math.sin(x * 0.53) - (hash(x, 3) \u003c 0.15 ? 1 : 0));\n    P.floorY[x] = top;\n    for (let y = top; y \u003c H; y++) {\n      const g = 0.82 + 0.3 * hash(x, y) - 0.04 * (y - top);\n      lay(x, y, 112 * g, 104 * g, 90 * g);\n    }\n    if (hash(x, 9) \u003c 0.18) lay(x, top, 34, 28, 26);\n  }\n  // The chimney: sulphide rock streaked with rust and sulphur.\n  for (let y = VTOP; y \u003c FLOOR + 2; y++) {\n    const h = (y - VTOP) / (FLOOR - VTOP);\n    const hw = 1.2 + 3.6 * h * h + (hash(y, 4) - 0.5) * 1.2;\n    for (let x = Math.round(VX - hw); x \u003c= Math.round(VX + hw); x++) {\n      const s = hash(x, y * 7);\n      if (s \u003c 0.12) lay(x, y, 150, 86, 38);\n      else if (s \u003c 0.17) lay(x, y, 150, 140, 62);\n      else lay(x, y, 80 + 20 * s, 66 + 14 * s, 58);\n    }\n  }\n  [-8, -6, -5, 5, 6, 8, 9].forEach((d, i) => {\n    const x = VX + d;\n    const top = P.floorY[x] - 3 - Math.floor(hash(i, 5) * 4);\n    for (let y = top; y \u003c P.floorY[x]; y++) lay(x, y, 205, 205, 195);\n    lay(x, top - 1, 220, 30, 30);\n    lay(x + Math.sign(d), top - 1, 180, 20, 24);\n  });\n  if (P.skel >= 0) sprite(BONES, P.skel, 0, (x, y, c, j) => lay(x, P.floorY[x] - 3 + j, 226, 218, 192));\n}\n\n// The water's colour at each row: each channel dies with depth at its own rate, red within a\n// few rows, green next, blue last. A bloom's chlorophyll eats the blue, so its water is green.\nfunction bakeRows(P) {\n  const n = P.night;\n  const b = P.bloom;\n  const day = 1 - smooth(0.22, 0.88, n);\n  const sun = 0.1 + 0.9 * day * Math.sqrt(day);\n  const warm = Math.exp(-(((n - 0.48) / 0.16) ** 2));\n  const moon = smooth(0.6, 1, n);\n  const dusk = smooth(0.12, 0.48, n);\n  for (let c = 0; c \u003c 3; c++) {\n    const lit = SKY[0][c] + (SKY[1][c] - SKY[0][c]) * dusk;\n    P.sky[c] = lit + (SKY[2][c] - lit) * moon;\n  }\n  const tr = sun * (1 + 0.5 * warm - 0.3 * moon) * (60 - 20 * b);\n  const tg = sun * (1 - 0.08 * warm - 0.1 * moon) * (175 + 55 * b);\n  const tb = sun * (1 - 0.15 * warm + 0.1 * moon) * (245 - 125 * b);\n  for (let y = 0; y \u003c H; y++) {\n    const f = 1 - smooth(62, DARK, y);\n    set(P.rows, y * 4, tr * Math.exp(-y / 4.5) * f, tg * Math.exp(-y / (18 - 6 * b)) * f, tb * Math.exp(-y / (44 - 24 * b)) * f);\n    P.rows[y * 4 + 3] = 1.25 * Math.exp(-y / 24) * (1 - 0.55 * b) * (0.35 + 0.65 * day);\n  }\n  P.sun = sun;\n}\n\n// The waves focus sunlight into shafts: each bin is one line down from the point above, lit by\n// where it crosses the waves. Wind adds short fast waves that break the shafts up.\nfunction bakeRays(P) {\n  const t = P.t;\n  const rough = 0.8 * Math.abs(P.cur);\n  for (let j = 0; j \u003c 256; j++) {\n    const s = 34 + ((j - 128) / RAY_U) * RAY_D + P.drift;\n    const a =\n      Math.sin(0.41 * s + t + 0.9 * Math.sin(0.16 * s - 0.45 * t)) +\n      0.75 * Math.sin(0.73 * s - 1.6 * t + 1.3) +\n      0.5 * Math.sin(1.21 * s + 2.2 * t + 0.4) +\n      rough * (Math.sin(1.93 * s + 3.4 * t) + 0.7 * Math.sin(2.71 * s - 4.1 * t + 2));\n    P.ray[j] = clamp((a + 0.3 + 0.4 * rough) / (1.95 + 1.2 * rough), 0, 1) ** 3;\n  }\n}\n\nfunction spark(P, x, y, kind) {\n  const i = (P.knext = (P.knext + 1) % SPARK);\n  P.kx[i] = x;\n  P.ky[i] = y;\n  P.kage[i] = 0;\n  P.klife[i] = kind ? 1.4 + Math.random() * 0.6 : 0.25 + Math.random() * 0.4;\n}\n\n// The submersible's place in its dive, and its lamps' angle below the horizon.\nfunction placeSub(P) {\n  const S = P.sub;\n  const ph = P.subT % CYCLE;\n  const ease = (f) => f - (0.4 * Math.sin(6.2832 * f)) / 6.2832;\n  let y = 5 + 0.6 * Math.sin(P.t * 1.7);\n  let x = 14;\n  S.a = 1;\n  if (ph \u003c DOWN) {\n    const e = ease(ph / DOWN);\n    y = 5 + 90 * e;\n    x = 14 + 9 * e;\n  } else if (ph \u003c DOWN + WORK) {\n    const f = (ph - DOWN) / WORK;\n    y = 95 + 1.5 * Math.sin(f * 3.14);\n    x = 23 + 3 * Math.sin(f * 3.14);\n    // The pilot sweeps the lamps over the chimney and back.\n    S.a = 0.55 + 0.35 * Math.cos(f * 6.2832);\n  } else if (ph \u003c DOWN + WORK + UP) {\n    const e = ease((ph - DOWN - WORK) / UP);\n    y = 95 - 90 * e;\n    x = 23 - 9 * e;\n    S.a = 1.35;\n  }\n  S.x = x + P.cur * 10;\n  S.y = y;\n  S.on = ph \u003c DOWN + WORK + UP ? smooth(9, 16, y) : 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.night = clamp(k[0], 0, 1);\n  P.cur = clamp(k[2], -1, 1);\n  P.bloom = clamp(k[3], 0, 1);\n  const s = (dt * clamp(k[1], 0.2, 3)) / 2;\n  P.t += s;\n  P.drift += s * P.cur * 4;\n  P.subT += s;\n  placeSub(P);\n  const S = P.sub;\n\n  // Lanternfish swim to the depth of the hour at 7 rows a second; males flash a tail gland.\n  const up = smooth(0.35, 0.85, P.night);\n  for (let i = 0; i \u003c LANT; i++) {\n    const want = P.lday[i] + (P.lnight[i] - P.lday[i]) * up;\n    P.ly[i] = P.started ? P.ly[i] + clamp(want - P.ly[i], -7 * s, 7 * s) : want;\n    P.lx[i] = clamp(P.lx[i] + (P.ldir[i] * P.lv[i] + P.cur * 1.5) * s, 0, 63);\n    if ((P.lx[i] - 31.5) * P.ldir[i] > 28.5 || Math.random() \u003c 0.05 * s) P.ldir[i] *= -1;\n    P.lfl[i] += s;\n    if (P.lfl[i] > 9 && Math.random() \u003c 0.12 * s) P.lfl[i] = 0;\n  }\n  P.started = true;\n\n  const flakes = Math.round(110 + 360 * P.bloom);\n  for (let i = 0; i \u003c flakes; i++) {\n    P.sy[i] += P.sv[i] * s;\n    P.sx[i] = (P.sx[i] + (P.cur * 4 + 0.7 * Math.sin(P.t * 0.8 + i)) * s + W) % W;\n    if (P.sy[i] >= P.floorY[Math.floor(P.sx[i])]) {\n      P.sy[i] -= FLOOR;\n      P.sx[i] = Math.random() * W;\n    }\n  }\n\n  // Copepods spark in the dark, now and then a shrimp spits a cloud of light, and at night the\n  // surface sparkles too. The submersible trips more as it passes.\n  P.kdebt += s * (5 + 5 * up);\n  for (; P.kdebt > 1; P.kdebt--) {\n    const shallow = Math.random() \u003c 0.45 * up;\n    spark(P, Math.random() * W, shallow ? 3 + Math.random() * 40 : 52 + Math.random() * 64, !shallow && Math.random() \u003c 0.13 ? 1 : 0);\n  }\n  if (S.y > 55 && Math.random() \u003c 6 * s) spark(P, S.x - 7 + Math.random() * 14, S.y - 3 + Math.random() * 7, 0);\n  for (let i = 0; i \u003c SPARK; i++) P.kage[i] += s;\n\n  P.pulse = (P.pulse + s) % 4;\n\n  if (input.btnPressed && input.btnPressed[0]) Object.assign(P, { whale: true, wx: 4 + Math.floor(Math.random() * 18), wy: -4 });\n  if (P.whale) {\n    P.wy += 5 * s;\n    if (P.wy > 50 && Math.random() \u003c 30 * s) spark(P, P.wx + Math.random() * 20, P.wy - 3 + Math.random() * 7, 0);\n    if (P.wy >= FLOOR - 4) {\n      P.whale = false;\n      P.skel = P.wx;\n      bakeFloor(P);\n    }\n  }\n\n  P.pig = P.pig > 34 ? -6 : P.pig + 0.35 * s;\n}\n\n// The lamps' light, warm near and blue-green further out as the water takes the red first;\n// the beam lights the water itself faintly.\nfunction lightLamps(P) {\n  const L = P.lamp;\n  L.fill(0);\n  const S = P.sub;\n  if (S.on \u003c 0.01) return;\n  const ox = S.x + 6.5;\n  const oy = S.y + 1.5;\n  const ca = Math.cos(S.a);\n  const sa = Math.sin(S.a);\n  const haze = (105 + 60 * P.bloom) * S.on;\n  for (let y = Math.max(0, Math.floor(oy - 4)); y \u003c= Math.min(H - 1, oy + 46); y++) {\n    const dy = y + 0.5 - oy;\n    for (let x = Math.max(0, Math.floor(ox - 46)); x \u003c= Math.min(W - 1, ox + 46); x++) {\n      const dx = x + 0.5 - ox;\n      const r2 = dx * dx + dy * dy;\n      const r = Math.sqrt(r2) + 0.01;\n      const c = (dx * ca + dy * sa) / r;\n      if (c \u003c 0.88) continue;\n      const I = (smooth(0.88, 0.965, c) * S.on * Math.exp(-r / 38)) / (1 + r2 / 500);\n      const o = (y * W + x) * 3;\n      set(L, o, I * Math.exp(-r / 16), I * Math.exp(-r / 40), I * Math.exp(-r / 60));\n      add(P.buf, x, y, L[o] * haze, L[o + 1] * haze, L[o + 2] * haze);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const rows = P.rows;\n  const L = P.lamp;\n  const t = P.t;\n  bakeRows(P);\n  bakeRays(P);\n\n  const xs = 34 + 2 * Math.sin(t * 0.3);\n  for (let y = 0; y \u003c H; y++) {\n    const A = rows[y * 4 + 3];\n    const inv = RAY_U / (y + RAY_D);\n    for (let x = 0, o = y * W * 3; x \u003c W; x++, o += 3) {\n      const m = A > 0.02 ? 1 + A * (1.5 * P.ray[clamp(((x - xs) * inv + 128) | 0, 0, 255)] - 0.33) : 1;\n      set(buf, o, rows[y * 4] * m, rows[y * 4 + 1] * m, rows[y * 4 + 2] * m);\n    }\n  }\n  // The underside of the surface: the sky through Snell's window, and the waves.\n  for (let y = 0; y \u003c 4; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const w = 0.5 + 0.5 * Math.sin(x * 0.45 + P.drift * 0.45 + t * 1.3 + Math.sin(x * 0.19 - t * 0.6) * 1.4);\n      const v = (1 - y / 4) * (0.55 + 0.45 * w) + 0.8 * Math.exp(-(((x - xs) / 5) ** 2)) * (1 - y / 3.5);\n      add(buf, x, y, v * P.sky[0], v * P.sky[1], v * P.sky[2]);\n    }\n\n  lightLamps(P);\n\n  // The floor, and the vent's dull red glow, too faint for an eye but not for a camera.\n  const glow = 0.75 + 0.25 * Math.sin(t * 7) * Math.sin(t * 3.1);\n  for (let p = (VTOP - 1) * W; p \u003c N; p++) {\n    if (!P.floorOn[p]) continue;\n    const o = p * 3;\n    shade(P, o, P.floorCol[o], P.floorCol[o + 1], P.floorCol[o + 2]);\n    const d2 = ((p % W) - VX) ** 2 + (Math.floor(p / W) - VTOP) ** 2;\n    const v = d2 \u003c 30 ? 95 * glow * Math.exp(-d2 / 5) : 0;\n    set(buf, o, buf[o] + v, buf[o + 1] + v * 0.18, buf[o + 2] + v * 0.05);\n  }\n\n  // The black smoke hides the beam behind it, greys where the lamps catch it, reddens at its\n  // root, where 350-degree water comes out.\n  for (let y = VTOP - 30; y \u003c VTOP; y++) {\n    const h = VTOP - y;\n    const cx = VX + P.cur * 0.016 * h * h + 1.1 * Math.sin(h * 0.3 - t * 2.1);\n    const hw = 1 + h * 0.3;\n    const red = 90 * glow * Math.exp(-h / 2.5);\n    for (let x = Math.max(0, Math.ceil(cx - hw)); x \u003c= Math.min(W - 1, cx + hw); x++) {\n      const q = (x - cx) / hw;\n      const d = (1 - q * q) * (0.72 + 0.14 * Math.sin(x * 1.3 + y * 0.9 + t * 3) + 0.14 * Math.sin(x * 0.7 - y * 1.7 + t * 4.1)) * (1 - h / 30);\n      const o = (y * W + x) * 3;\n      const k = 1 - 0.8 * d;\n      set(buf, o, buf[o] * k + d * (62 * (0.08 + 2.2 * L[o]) + red), buf[o + 1] * k + d * (56 * (0.08 + 2.2 * L[o + 1]) + red * 0.15), buf[o + 2] * k + d * 52 * (0.08 + 2.2 * L[o + 2]));\n    }\n  }\n\n  // A sea pig, the pink deep-sea cucumber, walks the silt on its tube feet.\n  const px = Math.round(P.pig);\n  sprite(PIG[Math.floor(t * 2) % 2], px, P.floorY[clamp(px + 2, 0, W - 1)] - 3, (x, y, c, j, o) => shade(P, o, 225, 165, 175));\n\n  drawSiphonophore(P, buf);\n  drawLanternfish(P, buf);\n  drawAngler(P, buf);\n  drawSchool(P, buf);\n\n  const flakes = Math.round(110 + 360 * P.bloom);\n  for (let i = 0; i \u003c flakes; i++) {\n    const y = Math.floor(P.sy[i]);\n    if (y \u003c 4) continue;\n    const o = (y * W + Math.floor(P.sx[i])) * 3;\n    const lit = P.ss[i] * (34 + 0.2 * rows[y * 4 + 2]);\n    const k = 330 * P.ss[i];\n    set(buf, o, buf[o] + lit * 0.95 + k * L[o], buf[o + 1] + lit + k * L[o + 1], buf[o + 2] + lit * 0.95 + k * L[o + 2]);\n  }\n\n  for (let i = 0; i \u003c SPARK; i++) {\n    const a = P.kage[i] / P.klife[i];\n    if (a >= 1) continue;\n    const cloud = P.klife[i] > 1;\n    const R = cloud ? 1 + 4 * Math.sqrt(a) : 1.6;\n    const v = cloud ? 150 * (1 - a) : (a \u003c 0.15 ? a / 0.15 : (1 - a) / 0.85) * 230;\n    for (let dy = -5; dy \u003c= 5; dy++)\n      for (let dx = -5; dx \u003c= 5; dx++) {\n        const q = 1 - (dx * dx + dy * dy) / (R * R);\n        if (q > 0) add(buf, Math.round(P.kx[i]) + dx, Math.round(P.ky[i]) + dy, v * 0.25 * q, v * 0.68 * q, v * q);\n      }\n  }\n\n  drawWhale(P, buf);\n  drawSub(P, buf);\n\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[p * 3]), Math.min(255, buf[p * 3 + 1]), Math.min(255, buf[p * 3 + 2]));\n}\n\n// The siphonophore: one glassy stem, polyps every four LEDs trailing fishing tentacles.\nfunction drawSiphonophore(P, buf) {\n  const t = P.t;\n  const cur = P.cur;\n  const tx = 52 + 4 * Math.sin(t * 0.05);\n  const ty = 46 + 1.5 * Math.sin(t * 0.13);\n  const pp = P.pulse * 16;\n  for (let i = 0; i \u003c STEM; i++) {\n    const s = i / STEM;\n    const x = tx + cur * 15 * s * Math.sqrt(s) + 3 * s * Math.sin(i * 0.15 - t * 0.8);\n    const iy = Math.round(ty + 8.5 + i * (0.95 - 0.3 * Math.abs(cur) * s));\n    const v = 0.24 + 0.85 * Math.exp(-(((i - pp) / 2.5) ** 2));\n    const ix = Math.round(x);\n    add(buf, ix, iy, 70 * v, 120 * v, 230 * v);\n    for (const e of [-1, 1]) add(buf, ix + e, iy, 21 * v, 36 * v, 70 * v);\n    if (i % 4 === 2) {\n      add(buf, ix, iy, 120 * v, 150 * v, 200 * v);\n      for (let j = 1; j \u003c= 4; j++)\n        add(buf, Math.round(x + (cur >= 0 ? j : -j) * (0.3 + Math.abs(cur) * 0.7) + 0.5 * Math.sin(t + i)), iy + j, 26 * v, 40 * v, 80 * v);\n    }\n  }\n  // On top a gas float, then four pairs of swimming bells, each pair beating after the last.\n  const lit = 1 + 1.5 * Math.exp(-pp / 3);\n  const cx = Math.round(tx);\n  add(buf, cx, Math.round(ty) - 1, 95, 45, 34);\n  for (let k = 0; k \u003c 4; k++) {\n    const sq = Math.max(0, Math.sin(t * 4.2 - k * 0.9)) ** 4;\n    for (let r = 0; r \u003c 2; r++) {\n      const n = Math.round(SPINDLE[k] * (1 - 0.3 * sq) - r * 0.5);\n      for (let d = -n; d \u003c= n; d++) {\n        const v = (Math.abs(d) === n ? 0.4 : 0.12) * lit;\n        add(buf, cx + d, Math.round(ty + 0.5 + k * 2) + r, 90 * v, 150 * v, 255 * v);\n      }\n    }\n  }\n}\n\n// Lanternfish show little but their photophores, belly lights that match the faint light from\n// above and hide the fish's shadow.\nfunction drawLanternfish(P, buf) {\n  const D = [0, 0, -1, 1, -3, 1, -5, 1];\n  for (let i = 0; i \u003c LANT; i++) {\n    const x = Math.round(P.lx[i]);\n    const y = Math.round(P.ly[i] + 0.6 * Math.sin(P.t * 1.3 + i));\n    const d = P.ldir[i];\n    for (let j = 0; j \u003c 11; j++) add(buf, x - d * (j >> 1), y + (j & 1), 10, 16, 24);\n    const v = 0.75 + 0.25 * Math.sin(P.t * 2 + i * 1.7);\n    for (let j = 0; j \u003c D.length; j += 2) add(buf, x + d * D[j], y + D[j + 1], 50 * v, 150 * v, 240 * v);\n    if (P.lfl[i] \u003c 0.25) add(buf, x - d * 6, y, 200, 230, 255);\n  }\n}\n\n// The anglerfish is black and shows only where its lure lights it: the jaw and needle teeth.\nfunction drawAngler(P, buf) {\n  const t = P.t;\n  const ax = Math.round(5 + 3 * Math.sin(t * 0.07));\n  const ay = Math.round(103 + 2 * Math.sin(t * 0.11));\n  const lx = ax + 15 + 0.6 * Math.sin(t * 1.9);\n  const ly = ay + 1 + 0.8 * Math.sin(t * 2.6);\n  const pulse = 0.6 + 0.4 * Math.max(0, Math.sin(t * 1.3)) + (Math.sin(t * 9) > 0.97 ? 0.3 : 0);\n  sprite(ANGLER, ax, ay, (x, y, c) => {\n    const g = pulse / (1 + ((x - lx) ** 2 + (y - ly) ** 2) / 14);\n    const k = c === \"t\" ? [250, 255, 245] : c === \"e\" ? [90, 170, 160] : [120, 96, 92];\n    add(buf, x, y, k[0] * g, k[1] * g, k[2] * g);\n  });\n  for (let s = 0.1; s \u003c 0.95; s += 0.12) {\n    const u = 1 - s;\n    const x = u * u * (ax + 8) + 2 * u * s * (ax + 15) + s * s * lx;\n    const y = u * u * ay + 2 * u * s * (ay - 7) + s * s * (ly - 1);\n    add(buf, Math.round(x), Math.round(y), 24 * pulse, 60 * pulse, 54 * pulse);\n  }\n  for (let dy = -3; dy \u003c= 3; dy++)\n    for (let dx = -3; dx \u003c= 3; dx++) {\n      const q = dx * dx + dy * dy;\n      const g = q ? (pulse * 0.5) / (1 + q) : pulse * 1.3;\n      add(buf, Math.round(lx) + dx, Math.round(ly) + dy, 70 * g, 235 * g, 205 * g);\n    }\n}\n\n// The sardines wheel as one. Broadside a fish is a silver dash, darker to the tail; turning,\n// it is seen end on and its flank throws the sun back, so a flash runs through the school.\nfunction drawSchool(P, buf) {\n  const t = P.t;\n  const cur = P.cur;\n  // Into a current the school holds station, facing upstream.\n  const hold = Math.min(1, Math.abs(cur) * 1.4);\n  const amp = 16 * (1 - 0.6 * hold);\n  const cx = 32 - 12 * cur * hold + amp * Math.sin(t * 0.23);\n  const cy = 22 + 6 * Math.sin(t * 0.29 + 1);\n  const sun = P.sun;\n  for (let i = 0; i \u003c P.fx.length; i++) {\n    const ox = P.fx[i];\n    const oy = P.fy[i];\n    // The leading side turns first; the turn reaches the far side 0.8 s later.\n    const lag = (ox / 16) * 0.4 * Math.sign(Math.cos(t * 0.23)) + 0.4;\n    const hx = Math.tanh(amp * 0.32 * Math.cos((t - lag) * 0.23)) * (1 - hold) - Math.sign(cur) * hold;\n    const x = Math.round(cx + ox + 1.8 * Math.sin(oy * 0.45 + t * 0.7) + 0.5 * Math.sin(t * 1.7 + P.fph[i]));\n    const y = Math.round(cy + oy + 1.1 * Math.sin(ox * 0.22 + t * 0.9));\n    if (y \u003c 4 || y > 44) continue;\n    const dir = hx >= 0 ? 1 : -1;\n    const len = Math.abs(hx) > 0.6 ? 3 : Math.abs(hx) > 0.25 ? 2 : 1;\n    const g = Math.min(1, (1 - Math.abs(hx)) ** 3 * 1.3 + Math.max(0, Math.sin(t * 2.3 + P.fph[i] * 7)) ** 40);\n    const light = sun * (0.35 + 0.65 * Math.min(1, P.rows[y * 4 + 2] / 170));\n    for (let j = 0; j \u003c len; j++) {\n      const xx = x - dir * j;\n      if (xx \u003c 0 || xx >= W) continue;\n      const o = (y * W + xx) * 3;\n      const body = (j === 2 ? 0.45 : j === 1 ? 0.8 : 1) * light;\n      const f = 1 - g;\n      set(buf, o, (buf[o] * 0.25 + 120 * body) * f + 235 * g * sun, (buf[o + 1] * 0.25 + 160 * body) * f + 242 * g * sun, (buf[o + 2] * 0.25 + 190 * body) * f + 250 * g * sun);\n    }\n  }\n}\n\n// The carcass is lit as the water round it is; in the dark the plankton it hits lights its edges.\nfunction drawWhale(P, buf) {\n  if (!P.whale) return;\n  const tick = Math.floor(P.t * 12);\n  sprite(WHALE, P.wx, Math.round(P.wy), (x, y, c, j, o) => {\n    const day = P.rows[clamp(y - 3, 0, H - 1) * 4 + 2] / 255;\n    const sh = (j ? 0.8 : 1.4) * day;\n    const i = x - P.wx;\n    const edge = !j || j === 4 || [WHALE[j - 1][i], WHALE[j + 1][i], WHALE[j][i - 1], WHALE[j][i + 1]].some((n) => n !== \"x\");\n    const g = edge ? clamp(1 - day * 4, 0, 1) * (hash(x * 31 + tick, y) \u003c 0.35 ? 1 : 0.22) : 0;\n    set(buf, o, 70 * sh + 260 * P.lamp[o] + 40 * g, 80 * sh + 250 * P.lamp[o + 1] + 120 * g, 95 * sh + 240 * P.lamp[o + 2] + 210 * g);\n  });\n}\n\nfunction drawSub(P, buf) {\n  const S = P.sub;\n  const x0 = Math.round(S.x) - 7;\n  const y0 = Math.round(S.y) - 3;\n  sprite(SUB, x0, y0, (x, y, c, j, o) => {\n    const lit = \"kvl\".includes(c) ? 1 : 0.78 + 0.22 * Math.min(1, (P.rows[y * 4 + 2] / 255) * 1.3) + (j \u003c 2 ? 0.1 : 0) - (j > 4 ? 0.25 : 0);\n    const h = HULL[c] || (S.on > 0.1 ? [255, 250, 225] : [110, 110, 110]);\n    set(buf, o, h[0] * lit, h[1] * lit, h[2] * lit);\n  });\n  if (S.y > 7 && P.t % 2 \u003c 0.1) add(buf, x0 + 6, y0, 255, 255, 255);\n  if (S.on > 0.1)\n    for (let dy = -2; dy \u003c= 2; dy++)\n      for (let dx = -2; dx \u003c= 2; dx++) {\n        const g = dx || dy ? (S.on * 120) / (1 + dx * dx + dy * dy) : 0;\n        add(buf, x0 + 13 + dx, y0 + 4 + dy, g, g, g * 0.9);\n      }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Night=0..1, Speed=0.2..3, Current=-1..1, Bloom=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Night","min":0,"max":1,"about":"Noon to midnight: the sky through the surface goes gold, then silver, and the lanternfish rise from the twilight to feed near the top, as they do every night."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sea runs: at 2 the submersible reaches the floor in 20 seconds and a dive is 50; waves, fish and snow keep pace."},{"name":"Current","min":-1,"max":1,"about":"A current left or right under a wind that roughens the waves: the god rays break up and slide, the snow slants, the siphonophore streams out and the school faces upstream."},{"name":"Bloom","min":0,"max":1,"about":"From the clear blue of an ocean gyre to a spring plankton bloom: the water greens, the light dies shallower and the snow thickens."}],"start":[0,2,0,0.06],"measures":{"motion":0.1244,"detail":0.039,"edges":0.3461,"complexity":1.1983,"coverage":0.6808,"colour":0.2784,"drift":0.0583},"knobResponse":[0.1135,0.059,0.0565,0.0734]},{"slug":"agate","title":"Agate","family":"mineral","round":20,"note":"라이트박스에 올린 블루 레이스 마노 단면이 패널을 거의 다 채우고, 1 LED 남짓한 하늘색 띠와 젖빛 띠가 갈색 껍질을 따라 겹겹이 들어가 석영 결정이 반짝이는 빈 속에 닿아요. 톱이 천천히 더 깊이 썰어 들어가며 띠가 흐르고, K1 을 누르면 날이 라이트박스를 가로지르며 새 마노 덩어리의 단면이 깔려요.","idea":"A slice of banded agate lies on a lightbox, so close it fills the panel, its fine fortification bands of pale blue, milky white and smoky lavender following the nodule's rough brown rind in to a hollow of glinting quartz, while a slow saw cuts deeper and the bands flow, open and close.","buttons":"K1 tap cuts into a fresh nodule: the blade crosses the lightbox from the left and the new slice follows it.","code":"// ===== Patternflow pattern =====\n// Title:   Agate\n// Family:  mineral\n// Idea:    A slice of banded agate lies on a lightbox, so close it fills the panel, its fine fortification bands of pale blue, milky white and smoky lavender following the nodule's rough brown rind in to a hollow of glinting quartz, while a slow saw cuts deeper and the bands flow, open and close.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after polished slices of blue lace agate held up to a lightbox\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Stain=0..1, Speed=0.2..3, Width=1..4, Light=-1..1\n//\n// Knob 1: Stain. The colour of the stone: blue lace agate at 0, then grey, honey and at 1 a pale carnelian, all of them pale the way agate is with light coming through it.\n// Knob 2: Speed. How fast the saw cuts down through the nodule and the lamp wanders under the glass: at 2 the bands creep about half a LED a second and a small eye in them opens and closes over ten seconds.\n// Knob 3: Width. How thick each band was laid down, from fine bands of about one LED at the start to 4 LED bands.\n// Knob 4: Light. Which side of the lightbox the lamp sits under, left at -1, behind the middle at 0, right at 1; it wanders a little either side of there on its own.\n// Buttons: K1 tap cuts into a fresh nodule: the blade crosses the lightbox from the left and the new slice follows it.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The band field is worked out on a grid with a margin round the panel, so\n// the rind can run off the panel's edge without the bands bending to meet it.\nconst M = 10;\nconst GW = W + 2 * M;\nconst GH = H + 2 * M;\nconst GN = GW * GH;\nconst NA = 256;\nconst NB = 120;\nconst TAU = Math.PI * 2;\n// The nodule's outline before its wall wanders: a rounded oblong.\nconst EA = 37;\nconst EB = 72;\nconst SUP = 2.2;\nconst NW = 5;\nconst RIND = 2.2;\nconst CORE = 6;\nconst FILL = 0.9;\nconst HOLE = 3.6;\nconst { sin, cos, sqrt, exp, min, max, floor, abs } = Math;\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nfunction hash(n) {\n  n = (n ^ 61) ^ (n >>> 16);\n  n = Math.imul(n, 9);\n  n ^= n >>> 4;\n  n = Math.imul(n, 0x27d4eb2d);\n  n ^= n >>> 15;\n  return (n >>> 0) / 4294967296;\n}\n\n// Each stain: clear band, milky band, the smoky tint some packets of clear\n// bands take, rind, quartz, and the bare lightbox round the slice.\nconst STAIN = [\n  [[174, 205, 250], [228, 220, 210], [186, 170, 218], [150, 102, 64], [226, 230, 240], [222, 228, 238]],\n  [[198, 204, 214], [226, 220, 210], [176, 170, 184], [136, 106, 80], [232, 232, 234], [230, 230, 230]],\n  [[244, 204, 136], [238, 226, 204], [210, 158, 108], [144, 92, 50], [240, 234, 220], [238, 232, 216]],\n  [[248, 160, 116], [238, 216, 202], [218, 120, 98], [132, 74, 44], [242, 230, 224], [240, 230, 222]],\n];\n\nfunction nodule(P) {\n  P.cx = W / 2 + (Math.random() - 0.5) * 4;\n  P.cy = H / 2 + (Math.random() - 0.5) * 10;\n  // The wall wanders round the oblong, and wanders differently deeper in.\n  P.harm = [];\n  for (let m = 2; m \u003c= 7; m++)\n    P.harm.push([m, (0.17 / m ** 0.8) * (0.5 + Math.random()), Math.random() * TAU, (Math.random() - 0.5) * 0.09]);\n  // Lobes where the gas bubble the agate filled was pinched or swollen.\n  P.lobes = [];\n  for (let j = 0; j \u003c 3; j++)\n    P.lobes.push([Math.random() * TAU, (Math.random() \u003c 0.5 ? -1 : 1) * (3 + Math.random() * 4), 0.18 + Math.random() * 0.15, (Math.random() - 0.5) * 0.06]);\n  P.rough = [];\n  for (const m of [11, 17, 23, 31]) P.rough.push([m, 0.25 + Math.random() * 0.35, Math.random() * TAU]);\n  // Slow ripples in the layers themselves, as a field through the stone, a\n  // finer crinkle that makes the lace, and a broad wash of tint.\n  P.waves = [];\n  for (let j = 0; j \u003c NW; j++) {\n    const a = Math.random() * TAU;\n    const k = j \u003c 3 ? 0.11 + Math.random() * 0.1 : j === 3 ? 0.42 : 0.06;\n    P.waves.push([cos(a) * k, sin(a) * k * (j === 3 ? 1 : 0.55), 0.12 + Math.random() * 0.12, Math.random() * TAU]);\n    for (let x = 0; x \u003c W; x++) {\n      P.wsx[j * W + x] = sin(P.waves[j][0] * (x + 0.5));\n      P.wcx[j * W + x] = cos(P.waves[j][0] * (x + 0.5));\n    }\n  }\n  // Band widths, in units of Width, all near one. The bands come in packets\n  // of a dozen or so, each laid down from a slightly different solution:\n  // mostly pale blue, sometimes near white or smoky lavender. A packet starts\n  // with a band laid down twice as thick.\n  let u = 0;\n  let thick = 0;\n  let tint = 0;\n  for (let k = 0; k \u003c= NB; k++) {\n    P.U[k] = u;\n    P.bh[k] = Math.random();\n    if (k === thick) {\n      const r = Math.random();\n      tint = r \u003c 0.65 ? 0.1 * Math.random() : r \u003c 0.85 ? 0.45 + 0.1 * Math.random() : 0.85 + 0.15 * Math.random();\n      if (k) u += 1.1;\n      thick += 9 + floor(Math.random() * 7);\n    }\n    P.bz[k] = tint;\n    u += 0.88 + Math.random() * 0.24;\n  }\n  P.seed = (Math.random() * 1e6) | 0;\n  P.fresh = true;\n  for (let p = 0; p \u003c N; p++) {\n    P.rr[p] = Math.random() * 1.3;\n    P.rt[p] = Math.random();\n  }\n  for (let Y = 0; Y \u003c GH; Y++)\n    for (let X = 0; X \u003c GW; X++) {\n      const i = Y * GW + X;\n      const dx = X - M + 0.5 - P.cx;\n      const dy = Y - M + 0.5 - P.cy;\n      let a = (Math.atan2(dy, dx) / TAU) * NA;\n      if (a \u003c 0) a += NA;\n      P.ang[i] = a;\n      P.rad[i] = sqrt(dx * dx + dy * dy) + 1e-6;\n    }\n  // How far the wall may reach along each ray before it leaves the grid.\n  for (let a = 0; a \u003c= NA; a++) {\n    const th = (a / NA) * TAU;\n    const c = cos(th);\n    const s = sin(th);\n    const rx = (c > 0 ? W + M - P.cx : P.cx + M) / (abs(c) + 1e-6);\n    const ry = (s > 0 ? H + M - P.cy : P.cy + M) / (abs(s) + 1e-6);\n    P.rmax[a] = min(rx, ry) - 3;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.U = new Float32Array(NB + 1);\n  P.bh = new Float32Array(NB + 1);\n  P.bz = new Float32Array(NB + 1);\n  for (const k of [\"ang\", \"rad\", \"Rp\", \"sx\", \"sy\", \"bd\", \"d\"]) P[k] = new Float32Array(GN);\n  P.inn = new Uint8Array(GN);\n  P.rmax = new Float32Array(NA + 1);\n  P.R = new Float32Array(NA + 1);\n  P.R0 = new Float32Array(NA + 1);\n  P.scale = 1;\n  // The stone's own grain: a fixed jitter per LED.\n  for (const k of [\"g1\", \"g2\", \"g3\", \"fh\", \"rr\", \"rt\", \"off\"]) P[k] = new Float32Array(N);\n  P.wsx = new Float32Array(NW * W);\n  P.wcx = new Float32Array(NW * W);\n  P.wsy = new Float32Array(NW * H);\n  P.wcy = new Float32Array(NW * H);\n  P.lx = new Float32Array(W);\n  P.ly = new Float32Array(H);\n  P.out = new Uint8ClampedArray(N * 3);\n  P.old = new Uint8ClampedArray(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    P.g1[p] = Math.random() * 2 - 1;\n    P.g2[p] = Math.random() * 2 - 1;\n    P.g3[p] = Math.random() * 2 - 1;\n    P.fh[p] = Math.random();\n  }\n  P.t = 0;\n  P.z = 0;\n  P.wipe = -1;\n  P.stain = 0;\n  P.width = 1;\n  P.side = 0.06;\n  nodule(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.stain = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3) / 2;\n  P.width = clamp(k[2], 1, 4);\n  P.side = clamp(k[3], -1, 1);\n  P.t += dt * speed;\n  P.z += dt * speed * 1.6;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.old.set(P.out);\n    P.wipe = 0;\n    nodule(P);\n  }\n  if (P.wipe >= 0) {\n    P.wipe += dt * 48;\n    if (P.wipe > W + 2) P.wipe = -1;\n  }\n}\n\n// Where the slice's wall lies this deep into the nodule, and how far every\n// point inside is from it: the layers were laid down on the wall, so each band\n// is the wall drawn again a little further in.\nfunction field(P) {\n  const z = P.z;\n  for (let a = 0; a \u003c= NA; a++) {\n    const th = (a / NA) * TAU;\n    let r = 1 / ((abs(cos(th)) / EA) ** SUP + (abs(sin(th)) / EB) ** SUP) ** (1 / SUP);\n    let f = 1;\n    for (const [m, amp, ph, om] of P.harm) f += amp * sin(m * th + ph + om * z);\n    r *= f;\n    for (const [c0, amp, wd, om] of P.lobes) {\n      let e = th - c0 - om * z;\n      e -= TAU * Math.round(e / TAU);\n      r += amp * exp(-(e * e) / (wd * wd));\n    }\n    for (const [m, amp, ph] of P.rough) r += amp * sin(m * th + ph);\n    P.R0[a] = r;\n  }\n  const { inn, sx, sy, bd, Rp, rad, ang, R } = P;\n  // The stone is held so close that it covers about the same share of the\n  // lightbox whatever its shape: the outline swells or shrinks to suit.\n  for (let it = P.fresh ? 8 : 1; it > 0; it--) {\n    for (let a = 0; a \u003c= NA; a++) R[a] = min(P.R0[a] * P.scale, P.rmax[a]);\n    let cov = 0;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = (y + M) * GW + x + M;\n        const af = ang[i];\n        const a0 = af | 0;\n        if (rad[i] \u003c R[a0] + (R[a0 + 1] - R[a0]) * (af - a0)) cov++;\n      }\n    P.scale = clamp(P.scale * (1 + 0.8 * (FILL - cov / N)), 0.8, 1.4);\n  }\n  for (let i = 0; i \u003c GN; i++) {\n    const af = ang[i];\n    const a0 = af | 0;\n    const r = R[a0] + (R[a0 + 1] - R[a0]) * (af - a0);\n    Rp[i] = r;\n    inn[i] = rad[i] \u003c r ? 1 : 0;\n    bd[i] = 1e9;\n  }\n  // Seeds: the wall's own point on the ray through each edge cell.\n  for (let Y = 1; Y \u003c GH - 1; Y++)\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i] || (inn[i - 1] && inn[i + 1] && inn[i - GW] && inn[i + GW])) continue;\n      const q = Rp[i] / rad[i];\n      const px = X - M + 0.5;\n      const py = Y - M + 0.5;\n      sx[i] = P.cx + (px - P.cx) * q;\n      sy[i] = P.cy + (py - P.cy) * q;\n      bd[i] = (sx[i] - px) ** 2 + (sy[i] - py) ** 2;\n    }\n  // Two sweeps carry the nearest wall point inward.\n  const take = (i, j, px, py) => {\n    if (bd[j] > 1e8) return;\n    const ax = sx[j] - px;\n    const ay = sy[j] - py;\n    const e = ax * ax + ay * ay;\n    if (e \u003c bd[i]) {\n      bd[i] = e;\n      sx[i] = sx[j];\n      sy[i] = sy[j];\n    }\n  };\n  for (let Y = 1; Y \u003c GH - 1; Y++) {\n    const py = Y - M + 0.5;\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      const px = X - M + 0.5;\n      take(i, i - 1, px, py);\n      take(i, i - GW - 1, px, py);\n      take(i, i - GW, px, py);\n      take(i, i - GW + 1, px, py);\n    }\n    for (let X = GW - 2; X > 0; X--) {\n      const i = Y * GW + X;\n      if (inn[i]) take(i, i + 1, X - M + 0.5, py);\n    }\n  }\n  let dmax = 0;\n  for (let Y = GH - 2; Y > 0; Y--) {\n    const py = Y - M + 0.5;\n    for (let X = GW - 2; X > 0; X--) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      const px = X - M + 0.5;\n      take(i, i + 1, px, py);\n      take(i, i + GW + 1, px, py);\n      take(i, i + GW, px, py);\n      take(i, i + GW - 1, px, py);\n    }\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      take(i, i - 1, X - M + 0.5, py);\n      const d = sqrt(bd[i]);\n      P.d[i] = d;\n      if (d > dmax) dmax = d;\n    }\n  }\n  P.dmax = dmax;\n}\n\nfunction stain(P) {\n  const s = P.stain * 3;\n  const i = min(2, floor(s));\n  const f = s - i;\n  return STAIN[i].map((c, j) => c.map((v, ch) => v + (STAIN[i + 1][j][ch] - v) * f));\n}\n\nexport function draw(display, params) {\n  const P = params;\n  // The wall moves far slower than the ripples in the layers, so its\n  // distances are worked out again only each time the saw has gone a little\n  // deeper.\n  if (P.fresh || abs(P.z - P.fz) > 0.3) {\n    field(P);\n    P.fz = P.z;\n    P.fresh = false;\n  }\n  const [CT, CM, CS, CR, CQ, CL] = stain(P);\n  const CW = CT.map((v, c) => v + (CM[c] - v) * 0.5);\n  const tmax = max(CT[0], CT[1], CT[2]);\n  const { t, z, out, old, waves, seed, wsx, wcx, wsy, wcy, U, bh, bz, inn, lx, ly, d: D, rr, rt, fh, g1, g2, g3, off } = P;\n  // The lamp under the glass: broad, and wandering slowly sideways.\n  const lampX = W / 2 + 30 * P.side + 14 * sin(t * 0.55);\n  const lampY = H / 2 + 34 * sin(t * 0.31 + 1);\n  for (let x = 0; x \u003c W; x++) lx[x] = 0.24 * exp(-((x + 0.5 - lampX) ** 2) / 1800);\n  for (let y = 0; y \u003c H; y++) ly[y] = exp(-((y + 0.5 - lampY) ** 2) / 7200);\n  const wd = P.width;\n  const dCore = P.dmax - CORE;\n  for (let j = 0; j \u003c NW; j++)\n    for (let y = 0; y \u003c H; y++) {\n      const a = waves[j][1] * (y + 0.5) + waves[j][2] * z + waves[j][3];\n      wsy[j * H + y] = sin(a);\n      wcy[j * H + y] = cos(a);\n    }\n  // Eyes: small knots in the layers that the saw passes through, each a\n  // little bullseye that opens, holds and closes again over ten seconds or so.\n  off.fill(0);\n  for (let j = floor((z - 24) / 14); j \u003c= floor((z + 24) / 14); j++) {\n    const ex = 6 + 52 * hash(seed + j * 131 + 1);\n    const ey = 10 + 108 * hash(seed + j * 131 + 2);\n    const gi = (floor(ey) + M) * GW + floor(ex) + M;\n    if (!inn[gi]) continue;\n    const dc = D[gi];\n    const f = clamp((dCore - 5 - dc) / 5, 0, 1) * clamp((dc - 6) / 4, 0, 1);\n    const A = 7 * f * exp(-(((z - j * 14 - 7 * hash(seed + j * 131 + 3)) / 7) ** 2));\n    const sg = 2.8 + 2.2 * hash(seed + j * 131 + 4);\n    if (A \u003c 0.05) continue;\n    for (let y = max(0, floor(ey - 3 * sg)); y \u003c min(H, ey + 3 * sg); y++)\n      for (let x = max(0, floor(ex - 3 * sg)); x \u003c min(W, ex + 3 * sg); x++)\n        off[y * W + x] += A * exp(-((x + 0.5 - ex) ** 2 + (y + 0.5 - ey) ** 2) / (sg * sg));\n  }\n  const wipe = P.wipe;\n  for (let y = 0; y \u003c H; y++) {\n    const py = y + 0.5;\n    const c0 = wcy[y], s0 = wsy[y], c1 = wcy[H + y], s1 = wsy[H + y], c2 = wcy[2 * H + y], s2 = wsy[2 * H + y];\n    const c3 = wcy[3 * H + y], s3 = wsy[3 * H + y], c4 = wcy[4 * H + y], s4 = wsy[4 * H + y];\n    const lyy = ly[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y + M) * GW + x + M;\n      const p = y * W + x;\n      const q = p * 3;\n      if (wipe >= 0 && x > wipe - 1) {\n        // The blade crossing the lightbox, the old slice still beyond it.\n        if (x > wipe) display.setPixel(x, y, old[q], old[q + 1], old[q + 2]);\n        else display.setPixel(x, y, 30, 28, 34);\n        continue;\n      }\n      const L = 0.76 + lx[x] * lyy;\n      let cr;\n      let cg;\n      let cb;\n      let tau;\n      if (!inn[i]) {\n        cr = CL[0];\n        cg = CL[1];\n        cb = CL[2];\n        tau = 0.92;\n      } else if (D[i] \u003c RIND + rr[p]) {\n        // The rind: rough, nearly opaque, with chalky flecks.\n        cr = CR[0];\n        cg = CR[1];\n        cb = CR[2];\n        tau = rt[p] \u003c 0.3 ? 0.62 : 0.26 + 0.16 * rt[p];\n      } else {\n        const dd =\n          D[i] +\n          off[p] +\n          0.8 * (wsx[x] * c0 + wcx[x] * s0 + wsx[W + x] * c1 + wcx[W + x] * s1 + wsx[2 * W + x] * c2 + wcx[2 * W + x] * s2) +\n          0.4 * (wsx[3 * W + x] * c3 + wcx[3 * W + x] * s3);\n        if (dd > dCore + HOLE) {\n          // Where the crystals did not meet, the slice is open and the\n          // lightbox shines straight through.\n          cr = CL[0];\n          cg = CL[1];\n          cb = CL[2];\n          tau = 1;\n        } else if (dd > dCore) {\n          // Quartz druzy: each tiny crystal throws the lamp back when its\n          // face turns toward it, and the saw keeps cutting new ones.\n          const fa = hash(p * 31 + floor(z * 0.4 + fh[p]) * 977 + seed);\n          cr = CQ[0];\n          cg = CQ[1];\n          cb = CQ[2];\n          if (dd \u003c dCore + 0.9) tau = 0.9;\n          else if (fa \u003c 0.33) tau = 0.16 + 0.3 * fa;\n          else {\n            const ax = lampX - x - 0.5;\n            const ay = lampY - py;\n            const c = (cos(fa * 40) * ax + sin(fa * 40) * ay) / (sqrt(ax * ax + ay * ay) + 1);\n            tau = 0.5 + 0.4 * fa + (c > 0 ? 0.7 * c ** 8 : 0);\n          }\n        } else {\n          const u = (dd - RIND) / wd;\n          let k = min(NB - 1, max(0, floor(u)));\n          while (k > 0 && U[k] > u) k--;\n          while (k \u003c NB - 1 && U[k + 1] \u003c= u) k++;\n          if (k & 1) {\n            cr = CM[0];\n            cg = CM[1];\n            cb = CM[2];\n            tau = 0.165 + 0.05 * bh[k];\n          } else {\n            // The clear bands, in the packet's tint, washed a little warmer\n            // or cooler across the slice, all equally clear.\n            const zt = bz[k] + 0.1 * (wsx[4 * W + x] * c4 + wcx[4 * W + x] * s4);\n            const ms = clamp((zt - 0.6) / 0.3, 0, 1);\n            const mw = clamp((zt - 0.15) / 0.3, 0, 1) - ms;\n            cr = CT[0] + (CW[0] - CT[0]) * mw + (CS[0] - CT[0]) * ms;\n            cg = CT[1] + (CW[1] - CT[1]) * mw + (CS[1] - CT[1]) * ms;\n            cb = CT[2] + (CW[2] - CT[2]) * mw + (CS[2] - CT[2]) * ms;\n            tau = ((0.94 + 0.1 * bh[k] + 0.03 * g3[p]) * tmax) / max(cr, cg, cb);\n          }\n        }\n      }\n      const v = L * tau;\n      let r = cr * v;\n      let g = cg * v;\n      let b = cb * v;\n      // The grain: the two weaker channels of every LED wander a little.\n      const j1 = 12 * g1[p];\n      const j2 = 12 * g2[p];\n      if (b >= r && b >= g) {\n        r = min(b, max(0, r + j1));\n        g = min(b, max(0, g + j2));\n      } else if (r >= g) {\n        g = min(r, max(0, g + j1));\n        b = min(r, max(0, b + j2));\n      } else {\n        r = min(g, max(0, r + j1));\n        b = min(g, max(0, b + j2));\n      }\n      out[q] = r;\n      out[q + 1] = g;\n      out[q + 2] = b;\n      display.setPixel(x, y, out[q], out[q + 1], out[q + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-agate","type":"code","name":"agate","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Agate\n// Family:  mineral\n// Idea:    A slice of banded agate lies on a lightbox, so close it fills the panel, its fine fortification bands of pale blue, milky white and smoky lavender following the nodule's rough brown rind in to a hollow of glinting quartz, while a slow saw cuts deeper and the bands flow, open and close.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after polished slices of blue lace agate held up to a lightbox\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Stain=0..1, Speed=0.2..3, Width=1..4, Light=-1..1\n//\n// Knob 1: Stain. The colour of the stone: blue lace agate at 0, then grey, honey and at 1 a pale carnelian, all of them pale the way agate is with light coming through it.\n// Knob 2: Speed. How fast the saw cuts down through the nodule and the lamp wanders under the glass: at 2 the bands creep about half a LED a second and a small eye in them opens and closes over ten seconds.\n// Knob 3: Width. How thick each band was laid down, from fine bands of about one LED at the start to 4 LED bands.\n// Knob 4: Light. Which side of the lightbox the lamp sits under, left at -1, behind the middle at 0, right at 1; it wanders a little either side of there on its own.\n// Buttons: K1 tap cuts into a fresh nodule: the blade crosses the lightbox from the left and the new slice follows it.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The band field is worked out on a grid with a margin round the panel, so\n// the rind can run off the panel's edge without the bands bending to meet it.\nconst M = 10;\nconst GW = W + 2 * M;\nconst GH = H + 2 * M;\nconst GN = GW * GH;\nconst NA = 256;\nconst NB = 120;\nconst TAU = Math.PI * 2;\n// The nodule's outline before its wall wanders: a rounded oblong.\nconst EA = 37;\nconst EB = 72;\nconst SUP = 2.2;\nconst NW = 5;\nconst RIND = 2.2;\nconst CORE = 6;\nconst FILL = 0.9;\nconst HOLE = 3.6;\nconst { sin, cos, sqrt, exp, min, max, floor, abs } = Math;\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nfunction hash(n) {\n  n = (n ^ 61) ^ (n >>> 16);\n  n = Math.imul(n, 9);\n  n ^= n >>> 4;\n  n = Math.imul(n, 0x27d4eb2d);\n  n ^= n >>> 15;\n  return (n >>> 0) / 4294967296;\n}\n\n// Each stain: clear band, milky band, the smoky tint some packets of clear\n// bands take, rind, quartz, and the bare lightbox round the slice.\nconst STAIN = [\n  [[174, 205, 250], [228, 220, 210], [186, 170, 218], [150, 102, 64], [226, 230, 240], [222, 228, 238]],\n  [[198, 204, 214], [226, 220, 210], [176, 170, 184], [136, 106, 80], [232, 232, 234], [230, 230, 230]],\n  [[244, 204, 136], [238, 226, 204], [210, 158, 108], [144, 92, 50], [240, 234, 220], [238, 232, 216]],\n  [[248, 160, 116], [238, 216, 202], [218, 120, 98], [132, 74, 44], [242, 230, 224], [240, 230, 222]],\n];\n\nfunction nodule(P) {\n  P.cx = W / 2 + (Math.random() - 0.5) * 4;\n  P.cy = H / 2 + (Math.random() - 0.5) * 10;\n  // The wall wanders round the oblong, and wanders differently deeper in.\n  P.harm = [];\n  for (let m = 2; m \u003c= 7; m++)\n    P.harm.push([m, (0.17 / m ** 0.8) * (0.5 + Math.random()), Math.random() * TAU, (Math.random() - 0.5) * 0.09]);\n  // Lobes where the gas bubble the agate filled was pinched or swollen.\n  P.lobes = [];\n  for (let j = 0; j \u003c 3; j++)\n    P.lobes.push([Math.random() * TAU, (Math.random() \u003c 0.5 ? -1 : 1) * (3 + Math.random() * 4), 0.18 + Math.random() * 0.15, (Math.random() - 0.5) * 0.06]);\n  P.rough = [];\n  for (const m of [11, 17, 23, 31]) P.rough.push([m, 0.25 + Math.random() * 0.35, Math.random() * TAU]);\n  // Slow ripples in the layers themselves, as a field through the stone, a\n  // finer crinkle that makes the lace, and a broad wash of tint.\n  P.waves = [];\n  for (let j = 0; j \u003c NW; j++) {\n    const a = Math.random() * TAU;\n    const k = j \u003c 3 ? 0.11 + Math.random() * 0.1 : j === 3 ? 0.42 : 0.06;\n    P.waves.push([cos(a) * k, sin(a) * k * (j === 3 ? 1 : 0.55), 0.12 + Math.random() * 0.12, Math.random() * TAU]);\n    for (let x = 0; x \u003c W; x++) {\n      P.wsx[j * W + x] = sin(P.waves[j][0] * (x + 0.5));\n      P.wcx[j * W + x] = cos(P.waves[j][0] * (x + 0.5));\n    }\n  }\n  // Band widths, in units of Width, all near one. The bands come in packets\n  // of a dozen or so, each laid down from a slightly different solution:\n  // mostly pale blue, sometimes near white or smoky lavender. A packet starts\n  // with a band laid down twice as thick.\n  let u = 0;\n  let thick = 0;\n  let tint = 0;\n  for (let k = 0; k \u003c= NB; k++) {\n    P.U[k] = u;\n    P.bh[k] = Math.random();\n    if (k === thick) {\n      const r = Math.random();\n      tint = r \u003c 0.65 ? 0.1 * Math.random() : r \u003c 0.85 ? 0.45 + 0.1 * Math.random() : 0.85 + 0.15 * Math.random();\n      if (k) u += 1.1;\n      thick += 9 + floor(Math.random() * 7);\n    }\n    P.bz[k] = tint;\n    u += 0.88 + Math.random() * 0.24;\n  }\n  P.seed = (Math.random() * 1e6) | 0;\n  P.fresh = true;\n  for (let p = 0; p \u003c N; p++) {\n    P.rr[p] = Math.random() * 1.3;\n    P.rt[p] = Math.random();\n  }\n  for (let Y = 0; Y \u003c GH; Y++)\n    for (let X = 0; X \u003c GW; X++) {\n      const i = Y * GW + X;\n      const dx = X - M + 0.5 - P.cx;\n      const dy = Y - M + 0.5 - P.cy;\n      let a = (Math.atan2(dy, dx) / TAU) * NA;\n      if (a \u003c 0) a += NA;\n      P.ang[i] = a;\n      P.rad[i] = sqrt(dx * dx + dy * dy) + 1e-6;\n    }\n  // How far the wall may reach along each ray before it leaves the grid.\n  for (let a = 0; a \u003c= NA; a++) {\n    const th = (a / NA) * TAU;\n    const c = cos(th);\n    const s = sin(th);\n    const rx = (c > 0 ? W + M - P.cx : P.cx + M) / (abs(c) + 1e-6);\n    const ry = (s > 0 ? H + M - P.cy : P.cy + M) / (abs(s) + 1e-6);\n    P.rmax[a] = min(rx, ry) - 3;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.U = new Float32Array(NB + 1);\n  P.bh = new Float32Array(NB + 1);\n  P.bz = new Float32Array(NB + 1);\n  for (const k of [\"ang\", \"rad\", \"Rp\", \"sx\", \"sy\", \"bd\", \"d\"]) P[k] = new Float32Array(GN);\n  P.inn = new Uint8Array(GN);\n  P.rmax = new Float32Array(NA + 1);\n  P.R = new Float32Array(NA + 1);\n  P.R0 = new Float32Array(NA + 1);\n  P.scale = 1;\n  // The stone's own grain: a fixed jitter per LED.\n  for (const k of [\"g1\", \"g2\", \"g3\", \"fh\", \"rr\", \"rt\", \"off\"]) P[k] = new Float32Array(N);\n  P.wsx = new Float32Array(NW * W);\n  P.wcx = new Float32Array(NW * W);\n  P.wsy = new Float32Array(NW * H);\n  P.wcy = new Float32Array(NW * H);\n  P.lx = new Float32Array(W);\n  P.ly = new Float32Array(H);\n  P.out = new Uint8ClampedArray(N * 3);\n  P.old = new Uint8ClampedArray(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    P.g1[p] = Math.random() * 2 - 1;\n    P.g2[p] = Math.random() * 2 - 1;\n    P.g3[p] = Math.random() * 2 - 1;\n    P.fh[p] = Math.random();\n  }\n  P.t = 0;\n  P.z = 0;\n  P.wipe = -1;\n  P.stain = 0;\n  P.width = 1;\n  P.side = 0.06;\n  nodule(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.stain = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3) / 2;\n  P.width = clamp(k[2], 1, 4);\n  P.side = clamp(k[3], -1, 1);\n  P.t += dt * speed;\n  P.z += dt * speed * 1.6;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.old.set(P.out);\n    P.wipe = 0;\n    nodule(P);\n  }\n  if (P.wipe >= 0) {\n    P.wipe += dt * 48;\n    if (P.wipe > W + 2) P.wipe = -1;\n  }\n}\n\n// Where the slice's wall lies this deep into the nodule, and how far every\n// point inside is from it: the layers were laid down on the wall, so each band\n// is the wall drawn again a little further in.\nfunction field(P) {\n  const z = P.z;\n  for (let a = 0; a \u003c= NA; a++) {\n    const th = (a / NA) * TAU;\n    let r = 1 / ((abs(cos(th)) / EA) ** SUP + (abs(sin(th)) / EB) ** SUP) ** (1 / SUP);\n    let f = 1;\n    for (const [m, amp, ph, om] of P.harm) f += amp * sin(m * th + ph + om * z);\n    r *= f;\n    for (const [c0, amp, wd, om] of P.lobes) {\n      let e = th - c0 - om * z;\n      e -= TAU * Math.round(e / TAU);\n      r += amp * exp(-(e * e) / (wd * wd));\n    }\n    for (const [m, amp, ph] of P.rough) r += amp * sin(m * th + ph);\n    P.R0[a] = r;\n  }\n  const { inn, sx, sy, bd, Rp, rad, ang, R } = P;\n  // The stone is held so close that it covers about the same share of the\n  // lightbox whatever its shape: the outline swells or shrinks to suit.\n  for (let it = P.fresh ? 8 : 1; it > 0; it--) {\n    for (let a = 0; a \u003c= NA; a++) R[a] = min(P.R0[a] * P.scale, P.rmax[a]);\n    let cov = 0;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        const i = (y + M) * GW + x + M;\n        const af = ang[i];\n        const a0 = af | 0;\n        if (rad[i] \u003c R[a0] + (R[a0 + 1] - R[a0]) * (af - a0)) cov++;\n      }\n    P.scale = clamp(P.scale * (1 + 0.8 * (FILL - cov / N)), 0.8, 1.4);\n  }\n  for (let i = 0; i \u003c GN; i++) {\n    const af = ang[i];\n    const a0 = af | 0;\n    const r = R[a0] + (R[a0 + 1] - R[a0]) * (af - a0);\n    Rp[i] = r;\n    inn[i] = rad[i] \u003c r ? 1 : 0;\n    bd[i] = 1e9;\n  }\n  // Seeds: the wall's own point on the ray through each edge cell.\n  for (let Y = 1; Y \u003c GH - 1; Y++)\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i] || (inn[i - 1] && inn[i + 1] && inn[i - GW] && inn[i + GW])) continue;\n      const q = Rp[i] / rad[i];\n      const px = X - M + 0.5;\n      const py = Y - M + 0.5;\n      sx[i] = P.cx + (px - P.cx) * q;\n      sy[i] = P.cy + (py - P.cy) * q;\n      bd[i] = (sx[i] - px) ** 2 + (sy[i] - py) ** 2;\n    }\n  // Two sweeps carry the nearest wall point inward.\n  const take = (i, j, px, py) => {\n    if (bd[j] > 1e8) return;\n    const ax = sx[j] - px;\n    const ay = sy[j] - py;\n    const e = ax * ax + ay * ay;\n    if (e \u003c bd[i]) {\n      bd[i] = e;\n      sx[i] = sx[j];\n      sy[i] = sy[j];\n    }\n  };\n  for (let Y = 1; Y \u003c GH - 1; Y++) {\n    const py = Y - M + 0.5;\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      const px = X - M + 0.5;\n      take(i, i - 1, px, py);\n      take(i, i - GW - 1, px, py);\n      take(i, i - GW, px, py);\n      take(i, i - GW + 1, px, py);\n    }\n    for (let X = GW - 2; X > 0; X--) {\n      const i = Y * GW + X;\n      if (inn[i]) take(i, i + 1, X - M + 0.5, py);\n    }\n  }\n  let dmax = 0;\n  for (let Y = GH - 2; Y > 0; Y--) {\n    const py = Y - M + 0.5;\n    for (let X = GW - 2; X > 0; X--) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      const px = X - M + 0.5;\n      take(i, i + 1, px, py);\n      take(i, i + GW + 1, px, py);\n      take(i, i + GW, px, py);\n      take(i, i + GW - 1, px, py);\n    }\n    for (let X = 1; X \u003c GW - 1; X++) {\n      const i = Y * GW + X;\n      if (!inn[i]) continue;\n      take(i, i - 1, X - M + 0.5, py);\n      const d = sqrt(bd[i]);\n      P.d[i] = d;\n      if (d > dmax) dmax = d;\n    }\n  }\n  P.dmax = dmax;\n}\n\nfunction stain(P) {\n  const s = P.stain * 3;\n  const i = min(2, floor(s));\n  const f = s - i;\n  return STAIN[i].map((c, j) => c.map((v, ch) => v + (STAIN[i + 1][j][ch] - v) * f));\n}\n\nexport function draw(display, params) {\n  const P = params;\n  // The wall moves far slower than the ripples in the layers, so its\n  // distances are worked out again only each time the saw has gone a little\n  // deeper.\n  if (P.fresh || abs(P.z - P.fz) > 0.3) {\n    field(P);\n    P.fz = P.z;\n    P.fresh = false;\n  }\n  const [CT, CM, CS, CR, CQ, CL] = stain(P);\n  const CW = CT.map((v, c) => v + (CM[c] - v) * 0.5);\n  const tmax = max(CT[0], CT[1], CT[2]);\n  const { t, z, out, old, waves, seed, wsx, wcx, wsy, wcy, U, bh, bz, inn, lx, ly, d: D, rr, rt, fh, g1, g2, g3, off } = P;\n  // The lamp under the glass: broad, and wandering slowly sideways.\n  const lampX = W / 2 + 30 * P.side + 14 * sin(t * 0.55);\n  const lampY = H / 2 + 34 * sin(t * 0.31 + 1);\n  for (let x = 0; x \u003c W; x++) lx[x] = 0.24 * exp(-((x + 0.5 - lampX) ** 2) / 1800);\n  for (let y = 0; y \u003c H; y++) ly[y] = exp(-((y + 0.5 - lampY) ** 2) / 7200);\n  const wd = P.width;\n  const dCore = P.dmax - CORE;\n  for (let j = 0; j \u003c NW; j++)\n    for (let y = 0; y \u003c H; y++) {\n      const a = waves[j][1] * (y + 0.5) + waves[j][2] * z + waves[j][3];\n      wsy[j * H + y] = sin(a);\n      wcy[j * H + y] = cos(a);\n    }\n  // Eyes: small knots in the layers that the saw passes through, each a\n  // little bullseye that opens, holds and closes again over ten seconds or so.\n  off.fill(0);\n  for (let j = floor((z - 24) / 14); j \u003c= floor((z + 24) / 14); j++) {\n    const ex = 6 + 52 * hash(seed + j * 131 + 1);\n    const ey = 10 + 108 * hash(seed + j * 131 + 2);\n    const gi = (floor(ey) + M) * GW + floor(ex) + M;\n    if (!inn[gi]) continue;\n    const dc = D[gi];\n    const f = clamp((dCore - 5 - dc) / 5, 0, 1) * clamp((dc - 6) / 4, 0, 1);\n    const A = 7 * f * exp(-(((z - j * 14 - 7 * hash(seed + j * 131 + 3)) / 7) ** 2));\n    const sg = 2.8 + 2.2 * hash(seed + j * 131 + 4);\n    if (A \u003c 0.05) continue;\n    for (let y = max(0, floor(ey - 3 * sg)); y \u003c min(H, ey + 3 * sg); y++)\n      for (let x = max(0, floor(ex - 3 * sg)); x \u003c min(W, ex + 3 * sg); x++)\n        off[y * W + x] += A * exp(-((x + 0.5 - ex) ** 2 + (y + 0.5 - ey) ** 2) / (sg * sg));\n  }\n  const wipe = P.wipe;\n  for (let y = 0; y \u003c H; y++) {\n    const py = y + 0.5;\n    const c0 = wcy[y], s0 = wsy[y], c1 = wcy[H + y], s1 = wsy[H + y], c2 = wcy[2 * H + y], s2 = wsy[2 * H + y];\n    const c3 = wcy[3 * H + y], s3 = wsy[3 * H + y], c4 = wcy[4 * H + y], s4 = wsy[4 * H + y];\n    const lyy = ly[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y + M) * GW + x + M;\n      const p = y * W + x;\n      const q = p * 3;\n      if (wipe >= 0 && x > wipe - 1) {\n        // The blade crossing the lightbox, the old slice still beyond it.\n        if (x > wipe) display.setPixel(x, y, old[q], old[q + 1], old[q + 2]);\n        else display.setPixel(x, y, 30, 28, 34);\n        continue;\n      }\n      const L = 0.76 + lx[x] * lyy;\n      let cr;\n      let cg;\n      let cb;\n      let tau;\n      if (!inn[i]) {\n        cr = CL[0];\n        cg = CL[1];\n        cb = CL[2];\n        tau = 0.92;\n      } else if (D[i] \u003c RIND + rr[p]) {\n        // The rind: rough, nearly opaque, with chalky flecks.\n        cr = CR[0];\n        cg = CR[1];\n        cb = CR[2];\n        tau = rt[p] \u003c 0.3 ? 0.62 : 0.26 + 0.16 * rt[p];\n      } else {\n        const dd =\n          D[i] +\n          off[p] +\n          0.8 * (wsx[x] * c0 + wcx[x] * s0 + wsx[W + x] * c1 + wcx[W + x] * s1 + wsx[2 * W + x] * c2 + wcx[2 * W + x] * s2) +\n          0.4 * (wsx[3 * W + x] * c3 + wcx[3 * W + x] * s3);\n        if (dd > dCore + HOLE) {\n          // Where the crystals did not meet, the slice is open and the\n          // lightbox shines straight through.\n          cr = CL[0];\n          cg = CL[1];\n          cb = CL[2];\n          tau = 1;\n        } else if (dd > dCore) {\n          // Quartz druzy: each tiny crystal throws the lamp back when its\n          // face turns toward it, and the saw keeps cutting new ones.\n          const fa = hash(p * 31 + floor(z * 0.4 + fh[p]) * 977 + seed);\n          cr = CQ[0];\n          cg = CQ[1];\n          cb = CQ[2];\n          if (dd \u003c dCore + 0.9) tau = 0.9;\n          else if (fa \u003c 0.33) tau = 0.16 + 0.3 * fa;\n          else {\n            const ax = lampX - x - 0.5;\n            const ay = lampY - py;\n            const c = (cos(fa * 40) * ax + sin(fa * 40) * ay) / (sqrt(ax * ax + ay * ay) + 1);\n            tau = 0.5 + 0.4 * fa + (c > 0 ? 0.7 * c ** 8 : 0);\n          }\n        } else {\n          const u = (dd - RIND) / wd;\n          let k = min(NB - 1, max(0, floor(u)));\n          while (k > 0 && U[k] > u) k--;\n          while (k \u003c NB - 1 && U[k + 1] \u003c= u) k++;\n          if (k & 1) {\n            cr = CM[0];\n            cg = CM[1];\n            cb = CM[2];\n            tau = 0.165 + 0.05 * bh[k];\n          } else {\n            // The clear bands, in the packet's tint, washed a little warmer\n            // or cooler across the slice, all equally clear.\n            const zt = bz[k] + 0.1 * (wsx[4 * W + x] * c4 + wcx[4 * W + x] * s4);\n            const ms = clamp((zt - 0.6) / 0.3, 0, 1);\n            const mw = clamp((zt - 0.15) / 0.3, 0, 1) - ms;\n            cr = CT[0] + (CW[0] - CT[0]) * mw + (CS[0] - CT[0]) * ms;\n            cg = CT[1] + (CW[1] - CT[1]) * mw + (CS[1] - CT[1]) * ms;\n            cb = CT[2] + (CW[2] - CT[2]) * mw + (CS[2] - CT[2]) * ms;\n            tau = ((0.94 + 0.1 * bh[k] + 0.03 * g3[p]) * tmax) / max(cr, cg, cb);\n          }\n        }\n      }\n      const v = L * tau;\n      let r = cr * v;\n      let g = cg * v;\n      let b = cb * v;\n      // The grain: the two weaker channels of every LED wander a little.\n      const j1 = 12 * g1[p];\n      const j2 = 12 * g2[p];\n      if (b >= r && b >= g) {\n        r = min(b, max(0, r + j1));\n        g = min(b, max(0, g + j2));\n      } else if (r >= g) {\n        g = min(r, max(0, g + j1));\n        b = min(r, max(0, b + j2));\n      } else {\n        r = min(g, max(0, r + j1));\n        b = min(g, max(0, b + j2));\n      }\n      out[q] = r;\n      out[q + 1] = g;\n      out[q + 2] = b;\n      display.setPixel(x, y, out[q], out[q + 1], out[q + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Stain=0..1, Speed=0.2..3, Width=1..4, Light=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Stain","min":0,"max":1,"about":"The colour of the stone: blue lace agate at 0, then grey, honey and at 1 a pale carnelian, all of them pale the way agate is with light coming through it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the saw cuts down through the nodule and the lamp wanders under the glass: at 2 the bands creep about half a LED a second and a small eye in them opens and closes over ten seconds."},{"name":"Width","min":1,"max":4,"about":"How thick each band was laid down, from fine bands of about one LED at the start to 4 LED bands."},{"name":"Light","min":-1,"max":1,"about":"Which side of the lightbox the lamp sits under, left at -1, behind the middle at 0, right at 1; it wanders a little either side of there on its own."}],"start":[0,2,1,0.06],"measures":{"motion":0.2044,"detail":0.342,"edges":0.8294,"complexity":2.5192,"coverage":1,"colour":0.128,"drift":0.0573},"knobResponse":[0.1001,0.2798,0.2989,0.0578]},{"slug":"analemma","title":"Analemma","family":"celestial","round":15,"note":"일 년 동안 같은 시각에 찍은 해가 바다 위 하늘에 8자를 그려요. K1 이 시각을 아침에서 저녁까지 돌려 8자를 눕히고, K4 를 올리면 화성의 눈물방울 모양이 돼요.","idea":"A camera fixed over the sea photographs the Sun at the same clock time every ten days for a year, and the exposures pile up into a tall figure eight that leans with the hour.","buttons":"K1 tap pins the day's date beside that day's Sun for four seconds; away from Earth's orbit it counts days from the start of the year.","code":"// ===== Patternflow pattern =====\n// Title:   Analemma\n// Family:  celestial\n// Idea:    A camera fixed over the sea photographs the Sun at the same clock time every ten days for a year, and the exposures pile up into a tall figure eight that leans with the hour.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: analemma photographs, a year of exposures of the Sun at one clock time on one frame\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hour=-1..1, Speed=0.2..3, Latitude=-1..1, Orbit=0..1\n//\n// Knob 1: Hour. The clock time the shutter fires: noon in the middle stands the eight upright over the south; 8 in the morning at the left end turns the camera to the east-south-east and lays the eight over, summer end high on the left, and 4 in the afternoon at the right end does the same to the west. The sky is lit by the Sun at that hour, golden on winter mornings and evenings.\n// Knob 2: Speed. Days a second: 20 at 2, so a year passes in 18 seconds; 2 at the bottom, 30 at the top.\n// Knob 3: Latitude. Where the camera stands: 52.5 degrees north in the middle, 40 at the left end where the noon eight climbs to 73 degrees, 65 at the right end where the winter Sun barely clears the sea.\n// Knob 4: Orbit. The first tenth is Earth's orbit; turned up it moves out to Mars's, more eccentric and more tilted, with a longer year and a smaller Sun, and the eight swells into a teardrop.\n// Buttons: K1 tap pins the day's date beside that day's Sun for four seconds; away from Earth's orbit it counts days from the start of the year.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst TAU = Math.PI * 2;\nconst DEG = Math.PI / 180;\n// LEDs per degree of sky, and the row the sea's horizon sits on.\nconst K = 1.4;\nconst HZ = 109;\nconst CX = W / 2;\n// Entries in the glare table, by squared distance in LEDs.\nconst GLOW = 16384;\n// Cumulus clouds round the compass.\nconst CLOUDS = 22;\n// Exposures a year, one every ten days.\nconst SHOTS = 36;\n// Earth and Mars: eccentricity, obliquity, the Sun's longitude at perihelion,\n// the orbit's size in AU.\nconst EARTH = [0.0167, 23.44 * DEG, 282.9 * DEG, 1];\nconst MARS = [0.0934, 25.19 * DEG, 251.0 * DEG, 1.524];\nconst YEAR = 365.2422;\n// Perihelion falls on 3 January.\nconst PERI = 3 / YEAR;\nconst MONTHS = [\"JAN\", \"FEB\", \"MAR\", \"APR\", \"MAY\", \"JUN\", \"JUL\", \"AUG\", \"SEP\", \"OCT\", \"NOV\", \"DEC\"];\nconst MDAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];\n// A 3x5 font, each glyph five rows of three bits.\nconst FONT = {\n  A: [2, 5, 7, 5, 5],\n  B: [6, 5, 6, 5, 6],\n  C: [3, 4, 4, 4, 3],\n  D: [6, 5, 5, 5, 6],\n  E: [7, 4, 6, 4, 7],\n  F: [7, 4, 6, 4, 4],\n  G: [3, 4, 5, 5, 3],\n  J: [1, 1, 1, 5, 2],\n  L: [4, 4, 4, 4, 7],\n  M: [5, 7, 7, 5, 5],\n  N: [6, 5, 5, 5, 5],\n  O: [2, 5, 5, 5, 2],\n  P: [6, 5, 6, 4, 4],\n  R: [6, 5, 6, 5, 5],\n  S: [3, 4, 2, 1, 6],\n  T: [7, 2, 2, 2, 2],\n  U: [5, 5, 5, 5, 7],\n  V: [5, 5, 5, 5, 2],\n  Y: [5, 5, 2, 2, 2],\n  0: [7, 5, 5, 5, 7],\n  1: [2, 6, 2, 2, 7],\n  2: [6, 1, 2, 4, 7],\n  3: [6, 1, 2, 1, 6],\n  4: [5, 5, 7, 1, 1],\n  5: [7, 4, 6, 1, 6],\n  6: [3, 4, 7, 5, 7],\n  7: [7, 1, 1, 2, 2],\n  8: [7, 5, 7, 5, 7],\n  9: [7, 5, 7, 1, 6],\n};\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp01((v - a) / (b - a));\n  return t * t * (3 - 2 * t);\n}\n\nfunction mix(a, b, t) {\n  return a + (b - a) * t;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frame = new Float32Array(N * 3);\n  P.sx = new Float32Array(SHOTS);\n  P.sy = new Float32Array(SHOTS);\n  P.pos = [0, 0, 0];\n  // How far through the year, and seconds since the year turned.\n  P.phase = 0.6;\n  P.turned = 9;\n  P.clock = 0;\n  P.pin = null;\n  P.hour = 12;\n  P.lat = 52.5 * DEG;\n  P.orb = EARTH.slice();\n  P.speed = 20;\n  P.az0 = Math.PI;\n  // Fair-weather cumulus round the compass, each a few round puffs on a\n  // flat base: azimuth, base altitude and the puffs' offsets and radii, in\n  // degrees.\n  P.clouds = [];\n  for (let c = 0; c \u003c CLOUDS; c++) {\n    const wide = 5 + 9 * Math.random();\n    const tall = 2 + 2.6 * Math.random();\n    const puffs = [];\n    const n = 3 + Math.floor(Math.random() * 3);\n    for (let k = 0; k \u003c n; k++) {\n      const r = tall * (0.5 + 0.5 * Math.sin((Math.PI * (k + 0.5)) / n)) * (0.75 + 0.4 * Math.random());\n      puffs.push([((k + 0.5) / n - 0.5) * wide, r * 0.75, r]);\n    }\n    P.clouds.push({ az: (c + 0.3 + 0.4 * Math.random()) * (360 / CLOUDS), base: 1.2 + 2.2 * Math.random(), wide, puffs });\n  }\n  P.wind = 0;\n  P.colW = new Float32Array(W);\n  P.glowT = new Float32Array(GLOW);\n  for (let i = 0; i \u003c GLOW; i++) {\n    const d = Math.sqrt(i);\n    P.glowT[i] = 0.5 * Math.exp(-d / 5) + 0.22 * Math.exp(-d / 20);\n  }\n}\n\n// The Sun at a share `ph` of the year: where it shows on the panel, and its\n// altitude in degrees, into out.\nfunction sunAt(P, ph, out) {\n  const e = P.orb[0];\n  const eps = P.orb[1];\n  const lp = P.orb[2];\n  // Mean anomaly, then Kepler's equation for the eccentric anomaly.\n  const M = TAU * (ph - PERI);\n  let E = M;\n  for (let i = 0; i \u003c 6; i++) E = M + e * Math.sin(E);\n  const nu = 2 * Math.atan2(Math.sqrt(1 + e) * Math.sin(E / 2), Math.sqrt(1 - e) * Math.cos(E / 2));\n  // The Sun's ecliptic longitude, its declination and right ascension.\n  const lam = nu + lp;\n  const dec = Math.asin(Math.sin(eps) * Math.sin(lam));\n  const ra = Math.atan2(Math.cos(eps) * Math.sin(lam), Math.cos(lam));\n  // The equation of time: the mean Sun's longitude against the true Sun's\n  // right ascension, the gap between clock and sundial.\n  let eot = M + lp - ra;\n  eot -= Math.round(eot / TAU) * TAU;\n  // The hour angle at this clock time, then altitude and azimuth.\n  const ha = (P.hour - 12) * 15 * DEG + eot;\n  const sl = Math.sin(P.lat);\n  const cl = Math.cos(P.lat);\n  const up = sl * Math.sin(dec) + cl * Math.cos(dec) * Math.cos(ha);\n  const north = cl * Math.sin(dec) - sl * Math.cos(dec) * Math.cos(ha);\n  const east = -Math.cos(dec) * Math.sin(ha);\n  const alt = Math.asin(Math.max(-1, Math.min(1, up)));\n  let daz = Math.atan2(east, north) - P.az0;\n  daz -= Math.round(daz / TAU) * TAU;\n  out[0] = CX + (daz / DEG) * Math.cos(alt) * K;\n  out[1] = HZ - (alt / DEG) * K;\n  out[2] = alt / DEG;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.clock += dt;\n  P.hour = 12 + 4 * Math.max(-1, Math.min(1, k[0]));\n  P.lat = (52.5 + 12.5 * Math.max(-1, Math.min(1, k[2]))) * DEG;\n  const w = clamp01((k[3] - 0.1) / 0.9);\n  for (let i = 0; i \u003c 4; i++) P.orb[i] = mix(EARTH[i], MARS[i], w);\n  // Kepler's third law: the year grows as the orbit's size to the power 1.5.\n  P.year = YEAR * Math.pow(P.orb[3], 1.5);\n  P.speed = 10 * Math.max(0.2, Math.min(3, k[1]));\n  // The camera faces where the Sun stands at this hour at an equinox.\n  const ha = (P.hour - 12) * 15 * DEG;\n  const sl = Math.sin(P.lat);\n  P.az0 = Math.atan2(-Math.sin(ha), -sl * Math.cos(ha));\n\n  P.phase += (dt * P.speed) / P.year;\n  P.turned += dt;\n  // The clouds drift east to west at a degree every two seconds.\n  P.wind += dt * 0.5;\n  if (P.phase >= 1) {\n    P.phase -= 1;\n    P.turned = 0;\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.pin = { ph: P.phase, age: 0 };\n  if (P.pin) {\n    P.pin.age += dt;\n    if (P.pin.age > 4) P.pin = null;\n  }\n\n  for (let j = 0; j \u003c SHOTS; j++) {\n    sunAt(P, (j + 0.5) / SHOTS, P.pos);\n    P.sx[j] = P.pos[0];\n    P.sy[j] = P.pos[1];\n  }\n  sunAt(P, P.phase, P.pos);\n  P.sun = [P.pos[0], P.pos[1], P.pos[2]];\n}\n\n// A disc of the Sun with a soft edge, laid over the frame with opacity op.\nfunction disc(out, x, y, rad, op, r, g, b) {\n  for (let yy = Math.floor(y - rad - 1); yy \u003c= Math.ceil(y + rad + 1); yy++) {\n    if (yy \u003c 0 || yy >= HZ) continue;\n    for (let xx = Math.floor(x - rad - 1); xx \u003c= Math.ceil(x + rad + 1); xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx + 0.5 - x;\n      const dy = yy + 0.5 - y;\n      const a = clamp01(rad + 0.5 - Math.sqrt(dx * dx + dy * dy)) * op;\n      if (a \u003c= 0) continue;\n      const p = (yy * W + xx) * 3;\n      out[p] += (r - out[p]) * a;\n      out[p + 1] += (g - out[p + 1]) * a;\n      out[p + 2] += (b - out[p + 2]) * a;\n    }\n  }\n}\n\n// Land on the horizon, in degrees, at azimuth az: a headland in the east, one\n// in the west, and the rock the lighthouse stands on a little east of south.\nfunction land(az) {\n  const a = az / DEG;\n  let h = 0;\n  if (a > 68 && a \u003c 122) h = Math.max(h, 2.6 * Math.sin(((a - 68) / 54) * Math.PI) ** 0.6 + 0.5 * Math.sin(a * 0.9));\n  if (a > 236 && a \u003c 294) h = Math.max(h, 3.2 * Math.sin(((a - 236) / 58) * Math.PI) ** 0.7 + 0.4 * Math.sin(a * 1.3));\n  if (a > 164.5 && a \u003c 171.5) h = Math.max(h, 1.1 * Math.sin(((a - 164.5) / 7) * Math.PI) ** 0.5);\n  return h;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const out = P.frame;\n  const sun = P.sun;\n  const hs = sun[2];\n  const t = P.clock;\n\n  // The sky's colours from the Sun's height: night, a low golden Sun, a pale\n  // hazy sky while the Sun is low, deep blue when it stands high.\n  const f = smooth(-7, 2, hs);\n  const g = smooth(2, 16, hs);\n  const q = smooth(14, 58, hs);\n  const zr = mix(mix(mix(4, 26, f), 34, g), 8, q);\n  const zg = mix(mix(mix(8, 34, f), 62, g), 34, q);\n  const zb = mix(mix(mix(28, 96, f), 134, g), 116, q);\n  const hr = mix(mix(mix(20, 214, f), 172, g), 64, q);\n  const hg = mix(mix(mix(22, 116, f), 156, g), 110, q);\n  const hb = mix(mix(mix(52, 74, f), 138, g), 174, q);\n  // Sunlight colour: orange low down, white-yellow high up.\n  const lr = 255;\n  const lg = mix(150, 228, g);\n  const lb = mix(70, 170, g);\n  const up = smooth(-3, 1, hs);\n\n  // Glare round the Sun from a table by squared distance, and a warmer\n  // horizon on the Sun's side while it is low.\n  const glowT = P.glowT;\n  const warm = (1 - g) * f * 0.35;\n  const colW = P.colW;\n  for (let x = 0; x \u003c W; x++) colW[x] = Math.exp(-Math.abs(x + 0.5 - sun[0]) / 26);\n  for (let y = 0; y \u003c HZ; y++) {\n    const alt = (HZ - y - 0.5) / K;\n    const v = Math.pow(clamp01(alt / 62), 0.55);\n    const br = mix(hr, zr, v);\n    const bg = mix(hg, zg, v);\n    const bb = mix(hb, zb, v);\n    const rowW = warm * Math.exp(-alt / 7);\n    const dy = y + 0.5 - sun[1];\n    const dy2 = dy * dy;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - sun[0];\n      const d2 = dx * dx + dy2;\n      const glow = Math.min(1, up * glowT[d2 \u003c GLOW ? d2 | 0 : GLOW - 1] + rowW * colW[x]);\n      const p = (y * W + x) * 3;\n      out[p] = br + (lr - br) * glow;\n      out[p + 1] = bg + (lg - bg) * glow;\n      out[p + 2] = bb + (lb - bb) * glow;\n    }\n  }\n\n  // Cumulus low over the sea, in the frame the exposures were laid over: lit\n  // on top in the sunlight's colour, grey underneath, flat at the base.\n  for (const cl of P.clouds) {\n    let daz = cl.az + P.wind - P.az0 / DEG;\n    daz -= Math.round(daz / 360) * 360;\n    const cx = CX + daz * K;\n    if (cx \u003c -cl.wide * K || cx > W + cl.wide * K) continue;\n    const baseY = HZ - cl.base * K;\n    let topY = baseY;\n    for (const pf of cl.puffs) topY = Math.min(topY, baseY - (pf[1] + pf[2]) * K);\n    for (let y = Math.max(0, Math.floor(topY - 1)); y \u003c Math.min(HZ, Math.ceil(baseY + 1)); y++) {\n      const py = y + 0.5;\n      const flat = clamp01(baseY - py + 0.5);\n      if (flat \u003c= 0) continue;\n      for (let x = Math.max(0, Math.floor(cx - cl.wide * K)); x \u003c Math.min(W, Math.ceil(cx + cl.wide * K)); x++) {\n        const px = x + 0.5;\n        let c = 0;\n        let lit = 0;\n        for (const pf of cl.puffs) {\n          const bx = cx + pf[0] * K;\n          const by = baseY - pf[1] * K;\n          const r = pf[2] * K;\n          const dx = px - bx;\n          const dy = py - by;\n          const d = Math.sqrt(dx * dx + dy * dy);\n          const a = clamp01(r + 0.5 - d);\n          if (a > c) {\n            c = a;\n            lit = clamp01(0.5 - dy / r);\n          }\n        }\n        c *= flat;\n        if (c \u003c= 0) continue;\n        const p = (y * W + x) * 3;\n        const cr = mix(hr * 0.78, mix(lr, 255, 0.4 + 0.4 * g), lit);\n        const cg = mix(hg * 0.78, mix(lg, 252, 0.4 + 0.4 * g), lit);\n        const cb = mix(hb * 0.82, mix(lb, 248, 0.4 + 0.4 * g), lit);\n        out[p] += (cr - out[p]) * c * 0.94;\n        out[p + 1] += (cg - out[p + 1]) * c * 0.94;\n        out[p + 2] += (cb - out[p + 2]) * c * 0.94;\n      }\n    }\n  }\n\n  // The exposures. Those already taken this year are bright; the rest are\n  // last year's, kept faint, and each fills in as its week comes round.\n  // At the turn of the year the whole eight fades back to that faint level.\n  const size = 1.6 / P.orb[3];\n  const faded = 0.32 + 0.68 * clamp01(1 - P.turned / 0.7);\n  for (let j = 0; j \u003c SHOTS; j++) {\n    const ph = (j + 0.5) / SHOTS;\n    const taken = ph \u003c= P.phase;\n    let op = taken ? 1 : faded;\n    let rad = size;\n    if (taken) {\n      // Seconds since this exposure: a flash as the shutter fires.\n      const age = ((P.phase - ph) * P.year) / P.speed;\n      const flash = clamp01(1 - age / 0.25);\n      rad += 0.9 * flash;\n    }\n    disc(out, P.sx[j], P.sy[j], rad, op, 255, 238, 196);\n  }\n  // The Sun itself, now.\n  disc(out, sun[0], sun[1], size + 0.6, 1, 255, 252, 236);\n\n  // The sea: it holds the horizon's light near the horizon and darkens\n  // towards the camera, with slow swell and the Sun's glitter path.\n  const depthR = mix(2, 4, g);\n  const depthG = mix(6, 16, g);\n  const depthB = mix(18, 40, g);\n  const sunUp = hs > -1;\n  for (let y = HZ; y \u003c H; y++) {\n    const k = (y - HZ + 0.5) / (H - HZ);\n    const s = Math.sqrt(k);\n    const br = mix(hr * 0.62, depthR, s);\n    const bg = mix(hg * 0.62, depthG, s);\n    const bb = mix(hb * 0.62, depthB, s);\n    const width = 0.7 + 6.5 * k;\n    // Distance out to sea: the wavelets crowd together toward the horizon.\n    const z = 1 / (k + 0.1);\n    const fx = 0.3 + 0.9 * k;\n    for (let x = 0; x \u003c W; x++) {\n      const along = Math.sin(x * fx * 0.5 + z * 0.8 + t * 0.7);\n      const swell = 0.8 + 0.3 * Math.sin(z * 3.3 - t * 1.4 + 0.7 * along) * (0.5 + 0.5 * Math.sin(x * fx * 1.3 - z * 2.1 + t * 0.5));\n      let r = br * swell;\n      let gg = bg * swell;\n      let b = bb * swell;\n      if (sunUp) {\n        const dx = (x + 0.5 - sun[0]) / width;\n        const path = Math.exp(-dx * dx) * up;\n        if (path > 0.01) {\n          const s1 = 0.5 + 0.5 * Math.sin(x * 2.3 + y * 3.1 + t * 4.7);\n          const s2 = 0.5 + 0.5 * Math.sin(x * 1.1 - y * 2.3 - t * 3.9 + 1.3);\n          const glint = path * (0.25 + 1.1 * Math.pow(s1 * s2, 3));\n          r += (lr - r) * Math.min(1, glint);\n          gg += (lg - gg) * Math.min(1, glint);\n          b += (lb - b) * Math.min(1, glint);\n        }\n      }\n      const p = (y * W + x) * 3;\n      out[p] = r;\n      out[p + 1] = gg;\n      out[p + 2] = b;\n    }\n  }\n\n  // Land along the horizon, hazed toward the sky's colour by distance.\n  const landR = mix(hr, 10, 0.62);\n  const landG = mix(hg, 16, 0.62);\n  const landB = mix(hb, 28, 0.62);\n  let tower = -1;\n  for (let x = 0; x \u003c W; x++) {\n    let az = P.az0 + (x + 0.5 - CX) / K * DEG;\n    az -= Math.floor(az / TAU) * TAU;\n    const h = land(az) * K;\n    if (Math.abs(az / DEG - 168) \u003c 0.5 / K) tower = x;\n    for (let y = Math.floor(HZ - h); y \u003c HZ; y++) {\n      const a = clamp01(HZ - h - y > 0 ? 0 : Math.min(1, h - (HZ - y - 1)));\n      const p = (y * W + x) * 3;\n      out[p] += (landR - out[p]) * a;\n      out[p + 1] += (landG - out[p + 1]) * a;\n      out[p + 2] += (landB - out[p + 2]) * a;\n    }\n  }\n  // The lighthouse: a white tower with a red band and a lantern that is lit\n  // while the Sun is low.\n  if (tower >= 0) {\n    const lamp = 1 - g;\n    for (let j = 0; j \u003c 12; j++) {\n      const y = HZ - 2 - j;\n      for (let x = tower - 1; x \u003c= tower; x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const p = (y * W + x) * 3;\n        let r = 222;\n        let gg = 226;\n        let b = 230;\n        if (j >= 4 && j \u003c= 6) {\n          r = 196;\n          gg = 40;\n          b = 40;\n        }\n        if (j >= 9) {\n          r = mix(40, 255, lamp);\n          gg = mix(40, 214, lamp);\n          b = mix(46, 130, lamp);\n        }\n        if (j === 11) {\n          r = 36;\n          gg = 30;\n          b = 30;\n        }\n        const shade = x === tower - 1 ? 1 : 0.72;\n        out[p] = r * shade;\n        out[p + 1] = gg * shade;\n        out[p + 2] = b * shade;\n      }\n    }\n  }\n\n  // A tap pins the day's date beside its place on the eight.\n  if (P.pin) {\n    const fade = clamp01(Math.min(P.pin.age / 0.2, (4 - P.pin.age) / 0.5));\n    sunAt(P, P.pin.ph, P.pos);\n    let text;\n    if (P.orb[3] \u003c 1.001) {\n      let d = Math.floor(P.pin.ph * YEAR);\n      let m = 0;\n      while (m \u003c 11 && d >= MDAYS[m]) d -= MDAYS[m++];\n      text = MONTHS[m] + \" \" + (d + 1);\n    } else text = \"DAY \" + (Math.floor(P.pin.ph * P.year) + 1);\n    const tw = text.length * 4 - 1;\n    const tx = P.pos[0] + 6 + tw \u003c W - 1 ? Math.round(P.pos[0] + 6) : Math.round(P.pos[0] - 6 - tw);\n    const ty = Math.round(Math.max(2, Math.min(HZ - 8, P.pos[1] - 2)));\n    for (let c = 0; c \u003c text.length; c++) {\n      const glyph = FONT[text[c]];\n      if (!glyph) continue;\n      for (let row = 0; row \u003c 5; row++)\n        for (let col = 0; col \u003c 3; col++) {\n          if (!((glyph[row] >> (2 - col)) & 1)) continue;\n          const x = tx + c * 4 + col;\n          const y = ty + row;\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const p = (y * W + x) * 3;\n          out[p] += (255 - out[p]) * fade;\n          out[p + 1] += (255 - out[p + 1]) * fade;\n          out[p + 2] += (255 - out[p + 2]) * fade;\n        }\n    }\n    // A ring round that day's Sun.\n    for (let a = 0; a \u003c 24; a++) {\n      const x = Math.floor(P.pos[0] + 3.6 * Math.cos((a * TAU) / 24));\n      const y = Math.floor(P.pos[1] + 3.6 * Math.sin((a * TAU) / 24));\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= HZ) continue;\n      const p = (y * W + x) * 3;\n      out[p] += (255 - out[p]) * fade * 0.8;\n      out[p + 1] += (255 - out[p + 1]) * fade * 0.8;\n      out[p + 2] += (255 - out[p + 2]) * fade * 0.8;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n}\n","layer":{"id":"layer-analemma","type":"code","name":"analemma","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Analemma\n// Family:  celestial\n// Idea:    A camera fixed over the sea photographs the Sun at the same clock time every ten days for a year, and the exposures pile up into a tall figure eight that leans with the hour.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: analemma photographs, a year of exposures of the Sun at one clock time on one frame\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hour=-1..1, Speed=0.2..3, Latitude=-1..1, Orbit=0..1\n//\n// Knob 1: Hour. The clock time the shutter fires: noon in the middle stands the eight upright over the south; 8 in the morning at the left end turns the camera to the east-south-east and lays the eight over, summer end high on the left, and 4 in the afternoon at the right end does the same to the west. The sky is lit by the Sun at that hour, golden on winter mornings and evenings.\n// Knob 2: Speed. Days a second: 20 at 2, so a year passes in 18 seconds; 2 at the bottom, 30 at the top.\n// Knob 3: Latitude. Where the camera stands: 52.5 degrees north in the middle, 40 at the left end where the noon eight climbs to 73 degrees, 65 at the right end where the winter Sun barely clears the sea.\n// Knob 4: Orbit. The first tenth is Earth's orbit; turned up it moves out to Mars's, more eccentric and more tilted, with a longer year and a smaller Sun, and the eight swells into a teardrop.\n// Buttons: K1 tap pins the day's date beside that day's Sun for four seconds; away from Earth's orbit it counts days from the start of the year.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst TAU = Math.PI * 2;\nconst DEG = Math.PI / 180;\n// LEDs per degree of sky, and the row the sea's horizon sits on.\nconst K = 1.4;\nconst HZ = 109;\nconst CX = W / 2;\n// Entries in the glare table, by squared distance in LEDs.\nconst GLOW = 16384;\n// Cumulus clouds round the compass.\nconst CLOUDS = 22;\n// Exposures a year, one every ten days.\nconst SHOTS = 36;\n// Earth and Mars: eccentricity, obliquity, the Sun's longitude at perihelion,\n// the orbit's size in AU.\nconst EARTH = [0.0167, 23.44 * DEG, 282.9 * DEG, 1];\nconst MARS = [0.0934, 25.19 * DEG, 251.0 * DEG, 1.524];\nconst YEAR = 365.2422;\n// Perihelion falls on 3 January.\nconst PERI = 3 / YEAR;\nconst MONTHS = [\"JAN\", \"FEB\", \"MAR\", \"APR\", \"MAY\", \"JUN\", \"JUL\", \"AUG\", \"SEP\", \"OCT\", \"NOV\", \"DEC\"];\nconst MDAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];\n// A 3x5 font, each glyph five rows of three bits.\nconst FONT = {\n  A: [2, 5, 7, 5, 5],\n  B: [6, 5, 6, 5, 6],\n  C: [3, 4, 4, 4, 3],\n  D: [6, 5, 5, 5, 6],\n  E: [7, 4, 6, 4, 7],\n  F: [7, 4, 6, 4, 4],\n  G: [3, 4, 5, 5, 3],\n  J: [1, 1, 1, 5, 2],\n  L: [4, 4, 4, 4, 7],\n  M: [5, 7, 7, 5, 5],\n  N: [6, 5, 5, 5, 5],\n  O: [2, 5, 5, 5, 2],\n  P: [6, 5, 6, 4, 4],\n  R: [6, 5, 6, 5, 5],\n  S: [3, 4, 2, 1, 6],\n  T: [7, 2, 2, 2, 2],\n  U: [5, 5, 5, 5, 7],\n  V: [5, 5, 5, 5, 2],\n  Y: [5, 5, 2, 2, 2],\n  0: [7, 5, 5, 5, 7],\n  1: [2, 6, 2, 2, 7],\n  2: [6, 1, 2, 4, 7],\n  3: [6, 1, 2, 1, 6],\n  4: [5, 5, 7, 1, 1],\n  5: [7, 4, 6, 1, 6],\n  6: [3, 4, 7, 5, 7],\n  7: [7, 1, 1, 2, 2],\n  8: [7, 5, 7, 5, 7],\n  9: [7, 5, 7, 1, 6],\n};\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp01((v - a) / (b - a));\n  return t * t * (3 - 2 * t);\n}\n\nfunction mix(a, b, t) {\n  return a + (b - a) * t;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frame = new Float32Array(N * 3);\n  P.sx = new Float32Array(SHOTS);\n  P.sy = new Float32Array(SHOTS);\n  P.pos = [0, 0, 0];\n  // How far through the year, and seconds since the year turned.\n  P.phase = 0.6;\n  P.turned = 9;\n  P.clock = 0;\n  P.pin = null;\n  P.hour = 12;\n  P.lat = 52.5 * DEG;\n  P.orb = EARTH.slice();\n  P.speed = 20;\n  P.az0 = Math.PI;\n  // Fair-weather cumulus round the compass, each a few round puffs on a\n  // flat base: azimuth, base altitude and the puffs' offsets and radii, in\n  // degrees.\n  P.clouds = [];\n  for (let c = 0; c \u003c CLOUDS; c++) {\n    const wide = 5 + 9 * Math.random();\n    const tall = 2 + 2.6 * Math.random();\n    const puffs = [];\n    const n = 3 + Math.floor(Math.random() * 3);\n    for (let k = 0; k \u003c n; k++) {\n      const r = tall * (0.5 + 0.5 * Math.sin((Math.PI * (k + 0.5)) / n)) * (0.75 + 0.4 * Math.random());\n      puffs.push([((k + 0.5) / n - 0.5) * wide, r * 0.75, r]);\n    }\n    P.clouds.push({ az: (c + 0.3 + 0.4 * Math.random()) * (360 / CLOUDS), base: 1.2 + 2.2 * Math.random(), wide, puffs });\n  }\n  P.wind = 0;\n  P.colW = new Float32Array(W);\n  P.glowT = new Float32Array(GLOW);\n  for (let i = 0; i \u003c GLOW; i++) {\n    const d = Math.sqrt(i);\n    P.glowT[i] = 0.5 * Math.exp(-d / 5) + 0.22 * Math.exp(-d / 20);\n  }\n}\n\n// The Sun at a share `ph` of the year: where it shows on the panel, and its\n// altitude in degrees, into out.\nfunction sunAt(P, ph, out) {\n  const e = P.orb[0];\n  const eps = P.orb[1];\n  const lp = P.orb[2];\n  // Mean anomaly, then Kepler's equation for the eccentric anomaly.\n  const M = TAU * (ph - PERI);\n  let E = M;\n  for (let i = 0; i \u003c 6; i++) E = M + e * Math.sin(E);\n  const nu = 2 * Math.atan2(Math.sqrt(1 + e) * Math.sin(E / 2), Math.sqrt(1 - e) * Math.cos(E / 2));\n  // The Sun's ecliptic longitude, its declination and right ascension.\n  const lam = nu + lp;\n  const dec = Math.asin(Math.sin(eps) * Math.sin(lam));\n  const ra = Math.atan2(Math.cos(eps) * Math.sin(lam), Math.cos(lam));\n  // The equation of time: the mean Sun's longitude against the true Sun's\n  // right ascension, the gap between clock and sundial.\n  let eot = M + lp - ra;\n  eot -= Math.round(eot / TAU) * TAU;\n  // The hour angle at this clock time, then altitude and azimuth.\n  const ha = (P.hour - 12) * 15 * DEG + eot;\n  const sl = Math.sin(P.lat);\n  const cl = Math.cos(P.lat);\n  const up = sl * Math.sin(dec) + cl * Math.cos(dec) * Math.cos(ha);\n  const north = cl * Math.sin(dec) - sl * Math.cos(dec) * Math.cos(ha);\n  const east = -Math.cos(dec) * Math.sin(ha);\n  const alt = Math.asin(Math.max(-1, Math.min(1, up)));\n  let daz = Math.atan2(east, north) - P.az0;\n  daz -= Math.round(daz / TAU) * TAU;\n  out[0] = CX + (daz / DEG) * Math.cos(alt) * K;\n  out[1] = HZ - (alt / DEG) * K;\n  out[2] = alt / DEG;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.clock += dt;\n  P.hour = 12 + 4 * Math.max(-1, Math.min(1, k[0]));\n  P.lat = (52.5 + 12.5 * Math.max(-1, Math.min(1, k[2]))) * DEG;\n  const w = clamp01((k[3] - 0.1) / 0.9);\n  for (let i = 0; i \u003c 4; i++) P.orb[i] = mix(EARTH[i], MARS[i], w);\n  // Kepler's third law: the year grows as the orbit's size to the power 1.5.\n  P.year = YEAR * Math.pow(P.orb[3], 1.5);\n  P.speed = 10 * Math.max(0.2, Math.min(3, k[1]));\n  // The camera faces where the Sun stands at this hour at an equinox.\n  const ha = (P.hour - 12) * 15 * DEG;\n  const sl = Math.sin(P.lat);\n  P.az0 = Math.atan2(-Math.sin(ha), -sl * Math.cos(ha));\n\n  P.phase += (dt * P.speed) / P.year;\n  P.turned += dt;\n  // The clouds drift east to west at a degree every two seconds.\n  P.wind += dt * 0.5;\n  if (P.phase >= 1) {\n    P.phase -= 1;\n    P.turned = 0;\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.pin = { ph: P.phase, age: 0 };\n  if (P.pin) {\n    P.pin.age += dt;\n    if (P.pin.age > 4) P.pin = null;\n  }\n\n  for (let j = 0; j \u003c SHOTS; j++) {\n    sunAt(P, (j + 0.5) / SHOTS, P.pos);\n    P.sx[j] = P.pos[0];\n    P.sy[j] = P.pos[1];\n  }\n  sunAt(P, P.phase, P.pos);\n  P.sun = [P.pos[0], P.pos[1], P.pos[2]];\n}\n\n// A disc of the Sun with a soft edge, laid over the frame with opacity op.\nfunction disc(out, x, y, rad, op, r, g, b) {\n  for (let yy = Math.floor(y - rad - 1); yy \u003c= Math.ceil(y + rad + 1); yy++) {\n    if (yy \u003c 0 || yy >= HZ) continue;\n    for (let xx = Math.floor(x - rad - 1); xx \u003c= Math.ceil(x + rad + 1); xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx + 0.5 - x;\n      const dy = yy + 0.5 - y;\n      const a = clamp01(rad + 0.5 - Math.sqrt(dx * dx + dy * dy)) * op;\n      if (a \u003c= 0) continue;\n      const p = (yy * W + xx) * 3;\n      out[p] += (r - out[p]) * a;\n      out[p + 1] += (g - out[p + 1]) * a;\n      out[p + 2] += (b - out[p + 2]) * a;\n    }\n  }\n}\n\n// Land on the horizon, in degrees, at azimuth az: a headland in the east, one\n// in the west, and the rock the lighthouse stands on a little east of south.\nfunction land(az) {\n  const a = az / DEG;\n  let h = 0;\n  if (a > 68 && a \u003c 122) h = Math.max(h, 2.6 * Math.sin(((a - 68) / 54) * Math.PI) ** 0.6 + 0.5 * Math.sin(a * 0.9));\n  if (a > 236 && a \u003c 294) h = Math.max(h, 3.2 * Math.sin(((a - 236) / 58) * Math.PI) ** 0.7 + 0.4 * Math.sin(a * 1.3));\n  if (a > 164.5 && a \u003c 171.5) h = Math.max(h, 1.1 * Math.sin(((a - 164.5) / 7) * Math.PI) ** 0.5);\n  return h;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const out = P.frame;\n  const sun = P.sun;\n  const hs = sun[2];\n  const t = P.clock;\n\n  // The sky's colours from the Sun's height: night, a low golden Sun, a pale\n  // hazy sky while the Sun is low, deep blue when it stands high.\n  const f = smooth(-7, 2, hs);\n  const g = smooth(2, 16, hs);\n  const q = smooth(14, 58, hs);\n  const zr = mix(mix(mix(4, 26, f), 34, g), 8, q);\n  const zg = mix(mix(mix(8, 34, f), 62, g), 34, q);\n  const zb = mix(mix(mix(28, 96, f), 134, g), 116, q);\n  const hr = mix(mix(mix(20, 214, f), 172, g), 64, q);\n  const hg = mix(mix(mix(22, 116, f), 156, g), 110, q);\n  const hb = mix(mix(mix(52, 74, f), 138, g), 174, q);\n  // Sunlight colour: orange low down, white-yellow high up.\n  const lr = 255;\n  const lg = mix(150, 228, g);\n  const lb = mix(70, 170, g);\n  const up = smooth(-3, 1, hs);\n\n  // Glare round the Sun from a table by squared distance, and a warmer\n  // horizon on the Sun's side while it is low.\n  const glowT = P.glowT;\n  const warm = (1 - g) * f * 0.35;\n  const colW = P.colW;\n  for (let x = 0; x \u003c W; x++) colW[x] = Math.exp(-Math.abs(x + 0.5 - sun[0]) / 26);\n  for (let y = 0; y \u003c HZ; y++) {\n    const alt = (HZ - y - 0.5) / K;\n    const v = Math.pow(clamp01(alt / 62), 0.55);\n    const br = mix(hr, zr, v);\n    const bg = mix(hg, zg, v);\n    const bb = mix(hb, zb, v);\n    const rowW = warm * Math.exp(-alt / 7);\n    const dy = y + 0.5 - sun[1];\n    const dy2 = dy * dy;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - sun[0];\n      const d2 = dx * dx + dy2;\n      const glow = Math.min(1, up * glowT[d2 \u003c GLOW ? d2 | 0 : GLOW - 1] + rowW * colW[x]);\n      const p = (y * W + x) * 3;\n      out[p] = br + (lr - br) * glow;\n      out[p + 1] = bg + (lg - bg) * glow;\n      out[p + 2] = bb + (lb - bb) * glow;\n    }\n  }\n\n  // Cumulus low over the sea, in the frame the exposures were laid over: lit\n  // on top in the sunlight's colour, grey underneath, flat at the base.\n  for (const cl of P.clouds) {\n    let daz = cl.az + P.wind - P.az0 / DEG;\n    daz -= Math.round(daz / 360) * 360;\n    const cx = CX + daz * K;\n    if (cx \u003c -cl.wide * K || cx > W + cl.wide * K) continue;\n    const baseY = HZ - cl.base * K;\n    let topY = baseY;\n    for (const pf of cl.puffs) topY = Math.min(topY, baseY - (pf[1] + pf[2]) * K);\n    for (let y = Math.max(0, Math.floor(topY - 1)); y \u003c Math.min(HZ, Math.ceil(baseY + 1)); y++) {\n      const py = y + 0.5;\n      const flat = clamp01(baseY - py + 0.5);\n      if (flat \u003c= 0) continue;\n      for (let x = Math.max(0, Math.floor(cx - cl.wide * K)); x \u003c Math.min(W, Math.ceil(cx + cl.wide * K)); x++) {\n        const px = x + 0.5;\n        let c = 0;\n        let lit = 0;\n        for (const pf of cl.puffs) {\n          const bx = cx + pf[0] * K;\n          const by = baseY - pf[1] * K;\n          const r = pf[2] * K;\n          const dx = px - bx;\n          const dy = py - by;\n          const d = Math.sqrt(dx * dx + dy * dy);\n          const a = clamp01(r + 0.5 - d);\n          if (a > c) {\n            c = a;\n            lit = clamp01(0.5 - dy / r);\n          }\n        }\n        c *= flat;\n        if (c \u003c= 0) continue;\n        const p = (y * W + x) * 3;\n        const cr = mix(hr * 0.78, mix(lr, 255, 0.4 + 0.4 * g), lit);\n        const cg = mix(hg * 0.78, mix(lg, 252, 0.4 + 0.4 * g), lit);\n        const cb = mix(hb * 0.82, mix(lb, 248, 0.4 + 0.4 * g), lit);\n        out[p] += (cr - out[p]) * c * 0.94;\n        out[p + 1] += (cg - out[p + 1]) * c * 0.94;\n        out[p + 2] += (cb - out[p + 2]) * c * 0.94;\n      }\n    }\n  }\n\n  // The exposures. Those already taken this year are bright; the rest are\n  // last year's, kept faint, and each fills in as its week comes round.\n  // At the turn of the year the whole eight fades back to that faint level.\n  const size = 1.6 / P.orb[3];\n  const faded = 0.32 + 0.68 * clamp01(1 - P.turned / 0.7);\n  for (let j = 0; j \u003c SHOTS; j++) {\n    const ph = (j + 0.5) / SHOTS;\n    const taken = ph \u003c= P.phase;\n    let op = taken ? 1 : faded;\n    let rad = size;\n    if (taken) {\n      // Seconds since this exposure: a flash as the shutter fires.\n      const age = ((P.phase - ph) * P.year) / P.speed;\n      const flash = clamp01(1 - age / 0.25);\n      rad += 0.9 * flash;\n    }\n    disc(out, P.sx[j], P.sy[j], rad, op, 255, 238, 196);\n  }\n  // The Sun itself, now.\n  disc(out, sun[0], sun[1], size + 0.6, 1, 255, 252, 236);\n\n  // The sea: it holds the horizon's light near the horizon and darkens\n  // towards the camera, with slow swell and the Sun's glitter path.\n  const depthR = mix(2, 4, g);\n  const depthG = mix(6, 16, g);\n  const depthB = mix(18, 40, g);\n  const sunUp = hs > -1;\n  for (let y = HZ; y \u003c H; y++) {\n    const k = (y - HZ + 0.5) / (H - HZ);\n    const s = Math.sqrt(k);\n    const br = mix(hr * 0.62, depthR, s);\n    const bg = mix(hg * 0.62, depthG, s);\n    const bb = mix(hb * 0.62, depthB, s);\n    const width = 0.7 + 6.5 * k;\n    // Distance out to sea: the wavelets crowd together toward the horizon.\n    const z = 1 / (k + 0.1);\n    const fx = 0.3 + 0.9 * k;\n    for (let x = 0; x \u003c W; x++) {\n      const along = Math.sin(x * fx * 0.5 + z * 0.8 + t * 0.7);\n      const swell = 0.8 + 0.3 * Math.sin(z * 3.3 - t * 1.4 + 0.7 * along) * (0.5 + 0.5 * Math.sin(x * fx * 1.3 - z * 2.1 + t * 0.5));\n      let r = br * swell;\n      let gg = bg * swell;\n      let b = bb * swell;\n      if (sunUp) {\n        const dx = (x + 0.5 - sun[0]) / width;\n        const path = Math.exp(-dx * dx) * up;\n        if (path > 0.01) {\n          const s1 = 0.5 + 0.5 * Math.sin(x * 2.3 + y * 3.1 + t * 4.7);\n          const s2 = 0.5 + 0.5 * Math.sin(x * 1.1 - y * 2.3 - t * 3.9 + 1.3);\n          const glint = path * (0.25 + 1.1 * Math.pow(s1 * s2, 3));\n          r += (lr - r) * Math.min(1, glint);\n          gg += (lg - gg) * Math.min(1, glint);\n          b += (lb - b) * Math.min(1, glint);\n        }\n      }\n      const p = (y * W + x) * 3;\n      out[p] = r;\n      out[p + 1] = gg;\n      out[p + 2] = b;\n    }\n  }\n\n  // Land along the horizon, hazed toward the sky's colour by distance.\n  const landR = mix(hr, 10, 0.62);\n  const landG = mix(hg, 16, 0.62);\n  const landB = mix(hb, 28, 0.62);\n  let tower = -1;\n  for (let x = 0; x \u003c W; x++) {\n    let az = P.az0 + (x + 0.5 - CX) / K * DEG;\n    az -= Math.floor(az / TAU) * TAU;\n    const h = land(az) * K;\n    if (Math.abs(az / DEG - 168) \u003c 0.5 / K) tower = x;\n    for (let y = Math.floor(HZ - h); y \u003c HZ; y++) {\n      const a = clamp01(HZ - h - y > 0 ? 0 : Math.min(1, h - (HZ - y - 1)));\n      const p = (y * W + x) * 3;\n      out[p] += (landR - out[p]) * a;\n      out[p + 1] += (landG - out[p + 1]) * a;\n      out[p + 2] += (landB - out[p + 2]) * a;\n    }\n  }\n  // The lighthouse: a white tower with a red band and a lantern that is lit\n  // while the Sun is low.\n  if (tower >= 0) {\n    const lamp = 1 - g;\n    for (let j = 0; j \u003c 12; j++) {\n      const y = HZ - 2 - j;\n      for (let x = tower - 1; x \u003c= tower; x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const p = (y * W + x) * 3;\n        let r = 222;\n        let gg = 226;\n        let b = 230;\n        if (j >= 4 && j \u003c= 6) {\n          r = 196;\n          gg = 40;\n          b = 40;\n        }\n        if (j >= 9) {\n          r = mix(40, 255, lamp);\n          gg = mix(40, 214, lamp);\n          b = mix(46, 130, lamp);\n        }\n        if (j === 11) {\n          r = 36;\n          gg = 30;\n          b = 30;\n        }\n        const shade = x === tower - 1 ? 1 : 0.72;\n        out[p] = r * shade;\n        out[p + 1] = gg * shade;\n        out[p + 2] = b * shade;\n      }\n    }\n  }\n\n  // A tap pins the day's date beside its place on the eight.\n  if (P.pin) {\n    const fade = clamp01(Math.min(P.pin.age / 0.2, (4 - P.pin.age) / 0.5));\n    sunAt(P, P.pin.ph, P.pos);\n    let text;\n    if (P.orb[3] \u003c 1.001) {\n      let d = Math.floor(P.pin.ph * YEAR);\n      let m = 0;\n      while (m \u003c 11 && d >= MDAYS[m]) d -= MDAYS[m++];\n      text = MONTHS[m] + \" \" + (d + 1);\n    } else text = \"DAY \" + (Math.floor(P.pin.ph * P.year) + 1);\n    const tw = text.length * 4 - 1;\n    const tx = P.pos[0] + 6 + tw \u003c W - 1 ? Math.round(P.pos[0] + 6) : Math.round(P.pos[0] - 6 - tw);\n    const ty = Math.round(Math.max(2, Math.min(HZ - 8, P.pos[1] - 2)));\n    for (let c = 0; c \u003c text.length; c++) {\n      const glyph = FONT[text[c]];\n      if (!glyph) continue;\n      for (let row = 0; row \u003c 5; row++)\n        for (let col = 0; col \u003c 3; col++) {\n          if (!((glyph[row] >> (2 - col)) & 1)) continue;\n          const x = tx + c * 4 + col;\n          const y = ty + row;\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const p = (y * W + x) * 3;\n          out[p] += (255 - out[p]) * fade;\n          out[p + 1] += (255 - out[p + 1]) * fade;\n          out[p + 2] += (255 - out[p + 2]) * fade;\n        }\n    }\n    // A ring round that day's Sun.\n    for (let a = 0; a \u003c 24; a++) {\n      const x = Math.floor(P.pos[0] + 3.6 * Math.cos((a * TAU) / 24));\n      const y = Math.floor(P.pos[1] + 3.6 * Math.sin((a * TAU) / 24));\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= HZ) continue;\n      const p = (y * W + x) * 3;\n      out[p] += (255 - out[p]) * fade * 0.8;\n      out[p + 1] += (255 - out[p + 1]) * fade * 0.8;\n      out[p + 2] += (255 - out[p + 2]) * fade * 0.8;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=-1..1, Speed=0.2..3, Latitude=-1..1, Orbit=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":-1,"max":1,"about":"The clock time the shutter fires: noon in the middle stands the eight upright over the south; 8 in the morning at the left end turns the camera to the east-south-east and lays the eight over, summer end high on the left, and 4 in the afternoon at the right end does the same to the west. The sky is lit by the Sun at that hour, golden on winter mornings and evenings."},{"name":"Speed","min":0.2,"max":3,"about":"Days a second: 20 at 2, so a year passes in 18 seconds; 2 at the bottom, 30 at the top."},{"name":"Latitude","min":-1,"max":1,"about":"Where the camera stands: 52.5 degrees north in the middle, 40 at the left end where the noon eight climbs to 73 degrees, 65 at the right end where the winter Sun barely clears the sea."},{"name":"Orbit","min":0,"max":1,"about":"The first tenth is Earth's orbit; turned up it moves out to Mars's, more eccentric and more tilted, with a longer year and a smaller Sun, and the eight swells into a teardrop."}],"start":[0,2,0,0.06],"measures":{"motion":0.0266,"detail":0.0181,"edges":0.3039,"complexity":1.0442,"coverage":0.9984,"colour":0.1966,"drift":0.0308},"knobResponse":[0.0776,0.085,0.0971,0.0827]},{"slug":"ant-farm","title":"Ant Farm","family":"insect","round":17,"note":"유리 사이에 모래를 채운 개미집에서 수확개미들이 바닥의 여왕 방까지 굴을 파고, 판 모래를 입구 옆 더미에 올리거나 오래된 막다른 굴에 다시 다져 넣어요. K1 을 누르면 뚜껑으로 물을 줘서 젖은 모래 얼룩이 천천히 아래로 번져요.","idea":"Harvester ants in a tall ant farm dig tunnels to the floor, carry the sand up or pack it into old dead ends, and tend the queen's eggs while the damp of each watering sinks through.","buttons":"K1 tap waters the farm through the lid, as the keeper does every 35 seconds at Speed 2.","code":"// ===== Patternflow pattern =====\n// Title:   Ant Farm\n// Family:  insect\n// Idea:    Harvester ants in a tall ant farm dig tunnels to the floor, carry the sand up or pack it into old dead ends, and tend the queen's eggs while the damp of each watering sinks through.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after the sand-and-glass ant farms sold as toys since the 1950s\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Fill=0..1, Speed=0.2..3, Ants=40..120, Lamp=0..1\n//\n// Knob 1: Fill. Pale sand at 0, red clay in the middle, and at 1 the blue gel of a gel farm, lit from its base.\n// Knob 2: Speed. The time-lapse: at 2 an ant walks ten LEDs a second and a digger cuts five LEDs of tunnel a second.\n// Knob 3: Ants. Workers from 40 to 120; a bigger colony digs more faces at once and keeps a bigger nest.\n// Knob 4: Lamp. From daylight to the red lamp keepers watch by, because ants do not see red.\n// Buttons: K1 tap waters the farm through the lid, as the keeper does every 35 seconds at Speed 2.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the green frame: lid rows 0 and 1, base rows 126 and 127, sides columns 0 and 63.\nconst TOP = 2;\nconst BASE = 125;\n// The sand line as the farm was filled, and the highest a heap may climb.\nconst SURF = 30;\nconst PEAK = 20;\nconst MAXN = 2400;\nconst MAXA = 120;\n// Cells: the room over the sand, sand, hole, heap, frame, and sand packed back into a tunnel.\nconst [AIR, SAND, HOLE, HEAP, FRAME, PACK] = [0, 1, 2, 3, 4, 5];\n// An ant walks the tunnels, walks on the surface, or works in one place.\nconst [WALK, ON_TOP, WORK] = [0, 1, 2];\nconst [DIG, DUMP, PACKIT, NURSE, FORAGE, IDLE] = [0, 1, 2, 3, 4, 5];\n// Forty ants keep a fifth of the sand hollow, and every forty more another 0.08: below that\n// they open new tunnels, near it they pack what they cut into old dead ends.\nconst HOLLOW = 0.12;\n// LEDs a second per unit of Speed, walking and cutting.\nconst PACE = 5;\nconst CUT = 2.5;\n// Seconds the colony works before the first frame.\nconst PRE = 6;\n// Watering every WATER seconds of colony time; the damp sinks SINK rows a second and spreads.\nconst WATER = 70;\nconst SINK = 4;\nconst SPREAD = 2;\n// Sand, red clay and blue gel: colour, grain, then the tones of a hole, a hole's rim, a heap\n// and packed sand, and how much the gel's base lights it.\nconst FILLS = [\n  [206, 170, 112, 1, 0.24, 0.8, 1.1, 0.92, 0],\n  [186, 66, 38, 0.7, 0.22, 0.76, 1.18, 0.88, 0],\n  [30, 112, 232, 0, 0.18, 1.4, 1.45, 1.2, 1],\n];\nconst FRAME_C = [30, 92, 46];\n// An ant from gaster to head; eggs, larvae, pupae; the apple.\nconst ANT = [[108, 36, 20], [138, 50, 24], [158, 62, 28]];\nconst BROOD = [[238, 234, 218], [226, 212, 172], [204, 182, 130]];\nconst SKIN = [200, 36, 30];\nconst FLESH = [238, 226, 168];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nconst q4 = (v) => clamp(Math.round(v / 4) * 4, 0, 255);\n\n// ---- Tunnels: a tree of nodes a LED apart, each the centre of a disc of hole. Node 0 is the\n// surface, its children the entrances. ----\n\nfunction addNode(P, up, x, y, r) {\n  const n = P.free.length ? P.free.pop() : P.nn \u003c MAXN ? P.nn++ : -1;\n  if (n \u003c 0) return -1;\n  P.nx[n] = x;\n  P.ny[n] = y;\n  P.par[n] = up;\n  P.dep[n] = up \u003c 0 ? 0 : P.dep[up] + 1;\n  P.kids[n] = P.perm[n] = 0;\n  P.alive[n] = 1;\n  P.rad[n] = r;\n  P.born[n] = P.t;\n  if (up >= 0) P.kids[up]++;\n  P.cut = carve(P, n, 1);\n  return n;\n}\n\n// Opens (s = 1) or packs (s = -1) a node's disc; returns the cells that changed.\nfunction carve(P, n, s) {\n  const r = P.rad[n];\n  const cx = P.nx[n];\n  const cy = P.ny[n];\n  let changed = 0;\n  for (let y = Math.ceil(cy - r); y \u003c= cy + r; y++)\n    for (let x = Math.ceil(cx - r); x \u003c= cx + r; x++) {\n      if (x \u003c 1 || x > 62 || y \u003c TOP || y > BASE || (x - cx) ** 2 + (y - cy) ** 2 > r * r + 0.01) continue;\n      const p = y * W + x;\n      const t = P.type[p];\n      if (s > 0) {\n        P.own[p]++;\n        if (t !== AIR && t !== HOLE) (P.type[p] = HOLE), changed++;\n      } else if (--P.own[p] === 0 && t === HOLE) (P.type[p] = PACK), changed++;\n    }\n  P.holes += s * changed;\n  return changed;\n}\n\nfunction route(P, a, b) {\n  const { par, dep } = P;\n  const up = [];\n  const down = [];\n  while (dep[a] > dep[b]) up.push(a), (a = par[a]);\n  while (dep[b] > dep[a]) down.push(b), (b = par[b]);\n  while (a !== b) up.push(a), (a = par[a]), down.push(b), (b = par[b]);\n  up.push(a);\n  return up.concat(down.reverse());\n}\n\n// Sand a face can cut: inside the frame, off the floor, five rows down unless a shaft.\nfunction solid(P, x, y, shaft) {\n  const ix = Math.round(x);\n  const iy = Math.round(y);\n  if (ix \u003c 3 || ix > 60 || iy > BASE - 2 || iy \u003c P.ground[ix] + (shaft ? 0 : 5)) return false;\n  const t = P.type[iy * W + ix];\n  return t === SAND || t === PACK;\n}\n\n// One LED of tunnel at a face. It wanders, leans back to the way it was started and turns\n// from a hole or the frame four LEDs ahead; boxed in, it stops.\nfunction grow(P, t) {\n  const n = t.n;\n  const x = P.nx[n];\n  const y = P.ny[n];\n  let a = t.a + (Math.random() - 0.5) * 0.5;\n  a += (t.pref - a) * 0.12;\n  const ok = (g, d) => solid(P, x + Math.cos(g) * d, y + Math.sin(g) * d, t.goal > 0);\n  if (!ok(a, 4) || !ok(a, 3)) {\n    const l = ok(a - 0.7, 4);\n    const r = ok(a + 0.7, 4);\n    if (l && (!r || Math.random() \u003c 0.5)) a -= 0.7;\n    else if (r) a += 0.7;\n    else if (!ok(a, 2.2)) return finish(P, t);\n  }\n  t.a = a;\n  const m = addNode(P, n, x + Math.cos(a), y + Math.sin(a), t.r);\n  if (m \u003c 0) return finish(P, t);\n  if (t.goal > 0) P.perm[m] = 1;\n  t.n = m;\n  if (--t.left \u003c= 0 || (t.goal > 0 && P.ny[m] >= t.goal)) finish(P, t);\n  return P.cut;\n}\n\nfunction finish(P, t) {\n  if (t.role && makeChamber(P, t)) return 0;\n  t.dead = true;\n  P.tips.splice(P.tips.indexOf(t), 1);\n  return 0;\n}\n\n// A chamber: a flat-floored oval the tunnel opens into, dug out from its door.\nfunction makeChamber(P, t) {\n  const n = t.n;\n  for (let rx = t.role === \"queen\" ? 9 : 7; rx >= 4; rx--) {\n    const ry = rx > 6 ? 3.4 : 2.8;\n    const cx = P.nx[n] + Math.cos(t.a) * (rx - 1.5);\n    const cy = P.ny[n] + Math.sin(t.a) * (ry - 1);\n    if (cx - rx \u003c 3 || cx + rx > 60 || cy + ry > BASE - 1 || cy - ry \u003c P.ground[Math.round(cx)] + 5) continue;\n    t.room = { n, cx, cy, rx, ry, p: 0, role: t.role, id: P.rooms.length + 1 };\n    P.rooms.push(t.room);\n    P.perm[n] = P.door[n] = 1;\n    t.role = \"\";\n    return true;\n  }\n  return false;\n}\n\nfunction dig(P, c, p) {\n  c.p = Math.min(1, p);\n  let changed = 0;\n  for (let y = Math.ceil(c.cy - c.ry); y \u003c= c.cy + c.ry * 0.6; y++)\n    for (let x = Math.ceil(c.cx - c.rx); x \u003c= c.cx + c.rx; x++) {\n      const q = y * W + x;\n      if (P.room[q] || ((x - c.cx) / c.rx) ** 2 + ((y - c.cy) / c.ry) ** 2 > c.p) continue;\n      P.room[q] = c.id;\n      P.own[q]++;\n      if (P.type[q] !== HOLE) (P.type[q] = HOLE), changed++;\n    }\n  P.holes += changed;\n  return changed;\n}\n\nfunction cutStep(P, t) {\n  const c = t.room;\n  if (!c) return grow(P, t);\n  const cells = dig(P, c, c.p + 3 / (Math.PI * c.rx * c.ry));\n  if (c.p >= 1) finish(P, t);\n  return cells;\n}\n\n// A side tunnel from a node, sideways and down, not where the sand ahead is a quarter hollow.\nfunction sprout(P, deep) {\n  for (let k = 0; k \u003c 16; k++) {\n    const n = 3 + Math.floor(Math.random() * (P.nn - 3));\n    if (!P.alive[n] || P.door[n] || P.kids[n] > 1 || P.ny[n] \u003c Math.max(SURF + 6, deep) || P.ny[n] > BASE - 6) continue;\n    const right = P.nx[n] \u003c 18 ? true : P.nx[n] > 46 ? false : Math.random() \u003c 0.5;\n    const a = right ? 0.05 + 0.85 * Math.random() : Math.PI - 0.05 - 0.85 * Math.random();\n    const ax = P.nx[n] + Math.cos(a) * 6;\n    const ay = P.ny[n] + Math.sin(a) * 6;\n    if (!solid(P, P.nx[n] + Math.cos(a) * 3.5, P.ny[n] + Math.sin(a) * 3.5, false)) continue;\n    let near = 0;\n    for (let y = -5; y \u003c= 5; y++) for (let x = -5; x \u003c= 5; x++) near += P.type[clamp(Math.round(ay) + y, 0, H - 1) * W + clamp(Math.round(ax) + x, 0, W - 1)] === HOLE;\n    if (near > 30) continue;\n    const role = P.rooms.length \u003c 7 && Math.random() \u003c 0.18 ? \"store\" : \"\";\n    const t = { n, a, pref: a, left: 10 + Math.floor(Math.random() * 30), r: 1.25, goal: 0, role, room: null, busy: -1, dead: false };\n    P.tips.push(t);\n    return t;\n  }\n  return null;\n}\n\nfunction floorCells(P, c) {\n  const out = [];\n  for (let y = Math.ceil(c.cy - c.ry); y \u003c= c.cy + c.ry; y++)\n    for (let x = Math.ceil(c.cx - c.rx); x \u003c= c.cx + c.rx; x++) if (P.room[y * W + x] === c.id && P.type[(y + 1) * W + x] !== HOLE) out.push(x, y);\n  return out;\n}\n\nfunction lay(P, c, kind, count) {\n  const fl = floorCells(P, c);\n  const m = fl.length / 2;\n  const s = Math.floor(Math.random() * m);\n  for (let i = 0; i \u003c count; i++) {\n    const j = ((s + i + Math.floor(Math.random() * 3)) % m) * 2;\n    P.brood.push(fl[j], fl[j + 1] - (i % 3 === 2 ? 1 : 0), kind);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const k of [\"nx\", \"ny\", \"rad\", \"born\"]) P[k] = new Float32Array(MAXN);\n  for (const k of [\"par\", \"dep\"]) P[k] = new Int32Array(MAXN);\n  for (const k of [\"kids\", \"alive\", \"perm\", \"door\"]) P[k] = new Uint8Array(MAXN);\n  for (const k of [\"type\", \"own\", \"room\"]) P[k] = new Uint8Array(N);\n  for (const k of [\"tex\", \"wet\", \"wet2\"]) P[k] = new Float32Array(N);\n  P.ground = new Int16Array(W);\n  P.buf = new Float32Array(N * 3);\n  Object.assign(P, { nn: 0, free: [], holes: 0, tips: [], rooms: [], brood: [], sproutT: 0, started: false, count: 40, t: 0, drip: 0, dx: 32, water: 4 });\n  const ph = Math.random() * 6;\n  let soil = 0;\n  for (let x = 0; x \u003c W; x++) P.ground[x] = Math.round(SURF + 1.2 * Math.sin(x * 0.13 + ph) + 0.8 * Math.sin(x * 0.41 + 2 * ph));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      P.type[p] = y \u003c TOP || y > BASE || x \u003c 1 || x > 62 ? FRAME : y \u003c P.ground[x] ? AIR : SAND;\n      if (P.type[p] === SAND) soil++;\n      // Dark mineral grains and a few pale ones.\n      const h = Math.random();\n      P.tex[p] = h \u003c 0.1 ? -0.2 : h \u003c 0.22 ? -0.08 : h > 0.94 ? 0.12 : 0;\n    }\n  P.soil = soil;\n  P.target = 0.2 * soil;\n  addNode(P, -1, -1, -1, 0);\n  // Two shafts: the left one to the queen near the floor, the right one to the larder.\n  for (const [ex, goal, role] of [\n    [13 + Math.floor(Math.random() * 6), BASE - 16, \"queen\"],\n    [42 + Math.floor(Math.random() * 6), 68 + Math.random() * 8, \"larder\"],\n  ]) {\n    const e = addNode(P, 0, ex, P.ground[ex], 1.5);\n    P.perm[e] = 1;\n    P.tips.push({ n: e, a: Math.PI / 2, pref: Math.PI / 2 + (ex \u003c 32 ? -0.12 : 0.12), left: 200, r: 1.5, goal, role, room: null, busy: -1, dead: false });\n  }\n  // What the colony has dug already: shafts, chambers, a nursery and side tunnels; the seven\n  // still growing are the faces the panel opens on.\n  for (let i = 0; i \u003c 400 && P.tips.length; i++) for (const t of P.tips.slice()) cutStep(P, t);\n  for (let k = 0, t; k \u003c 40 && P.rooms.length \u003c 3; k++)\n    if ((t = sprout(P, 76))) for (Object.assign(t, { role: \"nursery\", left: 12 }); !t.dead; ) cutStep(P, t);\n  for (let i = 0; i \u003c 3000 && P.holes \u003c P.target * 0.9; i++) {\n    if (P.tips.length \u003c 7 && i % 9 === 0) sprout(P, 0);\n    for (const t of P.tips.slice()) cutStep(P, t);\n  }\n  while (P.tips.length \u003c 7 && sprout(P, 0));\n  const role = (r, d) => P.rooms.find((c) => c.role === r) || d;\n  P.queen = role(\"queen\", P.rooms[0]);\n  P.larder = role(\"larder\", P.rooms[P.rooms.length - 1]);\n  P.nursery = role(\"nursery\", P.queen);\n  for (const [c, kind, n] of [[P.queen, 0, 10], [P.queen, 1, 4], [P.nursery, 1, 6], [P.nursery, 2, 7]]) lay(P, c, kind, n);\n  const qf = floorCells(P, P.queen);\n  P.qy = qf.length ? qf[1] : P.queen.cy;\n  P.fx = 28 + Math.floor(Math.random() * 3);\n  P.ants = [];\n  for (let i = 0; i \u003c MAXA; i++) {\n    const at = 3 + Math.floor(Math.random() * (P.nn - 3));\n    P.ants.push({ i, x: P.nx[at], y: P.ny[at], hx: 1, hy: 0, mode: WORK, path: [at], pi: 0, f: 0, at, task: IDLE, carry: 0, load: 0, t: Math.random() * 2 });\n  }\n  // A digger at each face and six nurses with the queen.\n  P.tips.forEach((t, j) => Object.assign(P.ants[(t.busy = j)], { at: t.n, task: DIG, arg: t, t: 1 + 4 * Math.random() }));\n  for (let j = 10; j \u003c 16; j++) Object.assign(P.ants[j], { at: P.queen.n, task: NURSE, arg: P.queen, x: P.queen.cx, y: P.queen.cy });\n}\n\n// ---- The ants ----\n\nfunction goTo(P, a, from, to, task, arg) {\n  Object.assign(a, { task, arg, path: route(P, from, to), pi: 0, f: 0, at: from, mode: WALK });\n  if (from === 0) toTop(P, a, to === 0 ? -1 : 1);\n}\n\n// Out on the sand, to the next entrance on the path or to the job up here.\nfunction toTop(P, a, next) {\n  if (a.at > 0) a.x = P.nx[a.at];\n  a.mode = ON_TOP;\n  a.sn = next;\n  a.sg = next >= 0 ? P.nx[a.path[next]] : a.arg;\n  a.at = 0;\n}\n\nfunction fillable(P, k) {\n  return k > 2 && P.alive[k] && !P.kids[k] && !P.perm[k] && !P.tips.some((t) => t.n === k);\n}\n\n// The nearest dead end four seconds old or more.\nfunction nearLeaf(P, a) {\n  let best = -1;\n  let bd = 1e9;\n  for (let k = 3; k \u003c P.nn; k++) {\n    if (P.born[k] > P.t - 4 || !fillable(P, k)) continue;\n    const d = route(P, a.at, k).length;\n    if (d \u003c bd) (bd = d), (best = k);\n  }\n  return best;\n}\n\n// Whether another ant is cutting this face or on its way to.\nconst taken = (P, t, i) => t.busy >= 0 && t.busy !== i && t.busy \u003c P.count && P.ants[t.busy].arg === t && P.ants[t.busy].task === DIG;\n\nconst idle = (a, s) => Object.assign(a, { mode: WORK, task: IDLE, t: s });\n\nfunction plan(P, a) {\n  const from = a.at;\n  if (a.carry === 1) {\n    // A load of sand: into a dead end near by, or up to a heap by the entrance.\n    const leaf = P.holes > P.target - 40 ? nearLeaf(P, a) : -1;\n    if (leaf > 0) return goTo(P, a, from, leaf, PACKIT, leaf);\n    let e = from > 0 ? from : a.x \u003c 32 ? 1 : 2;\n    while (P.dep[e] > 1) e = P.par[e];\n    return goTo(P, a, from, 0, DUMP, clamp(Math.round(P.nx[e] + (Math.random() \u003c 0.5 ? -1 : 1) * (4 + Math.random() * 7)), 3, 60));\n  }\n  if (a.carry === 2) return goTo(P, a, from, P.larder.n, NURSE, P.larder);\n  const r = Math.random();\n  if (r \u003c 0.6) {\n    // The nearest face nobody is cutting.\n    let open = null;\n    let bo = 1e9;\n    for (const t of P.tips) {\n      const d = route(P, from, t.n).length;\n      if (!taken(P, t, a.i) && d \u003c bo) (bo = d), (open = t);\n    }\n    if (open) return (open.busy = a.i), goTo(P, a, from, open.n, DIG, open);\n  }\n  // Otherwise up to the apple, or down to the brood or another chamber.\n  const q = Math.random();\n  if (q \u003c 0.25) return goTo(P, a, from, 0, FORAGE, P.fx + (Math.random() \u003c 0.5 ? -1 : 6));\n  const c = q \u003c 0.5 ? P.queen : q \u003c 0.7 ? P.nursery : P.rooms[Math.floor(Math.random() * P.rooms.length)];\n  goTo(P, a, from, c.n, NURSE, c);\n}\n\nfunction arrive(P, a) {\n  const t = a.arg;\n  if (a.task === DIG) {\n    if (t.dead || taken(P, t, a.i)) return plan(P, a);\n    if (t.n !== a.at) return goTo(P, a, a.at, t.n, DIG, t);\n    Object.assign(a, { mode: WORK, t: 2 + 4 * Math.random(), acc: 0, load: 0 });\n  } else if (a.task === DUMP) {\n    heap(P, a.arg, 1 + Math.min(3, Math.floor(a.load / 12)));\n    a.carry = a.load = 0;\n    idle(a, 0.3);\n  } else if (a.task === PACKIT) Object.assign(a, { mode: WORK, acc: 0 });\n  else if (a.task === NURSE) {\n    Object.assign(a, { carry: 0, mode: WORK, t: 2 + 5 * Math.random(), x: P.nx[a.at], y: P.ny[a.at] });\n    pick(P, a);\n  } else if (a.task === FORAGE) {\n    a.carry = 2;\n    plan(P, a);\n  } else idle(a, 0.3 + Math.random());\n}\n\nfunction pick(P, a) {\n  const c = a.arg;\n  a.wx = P.nx[c.n];\n  a.wy = P.ny[c.n];\n  for (let k = 0; k \u003c 8; k++) {\n    const x = Math.round(c.cx + (Math.random() * 2 - 1) * c.rx);\n    const y = Math.round(c.cy + (Math.random() * 2 - 1) * c.ry);\n    if (P.room[y * W + x] === c.id) return (a.wx = x), (a.wy = y);\n  }\n}\n\n// Packs the node the ant stands in and steps back one; false once the load is spent.\nfunction packOne(P, a) {\n  const k = a.at;\n  if (a.load \u003c= 0 || !fillable(P, k) || P.ants.some((b) => b !== a && (b.at === k || (b.mode === WALK && b.path[b.pi + 1] === k)))) return false;\n  a.load -= Math.max(1, carve(P, k, -1));\n  P.alive[k] = 0;\n  a.at = P.par[k];\n  P.kids[a.at]--;\n  for (const b of P.ants) {\n    if (b === a || (b.mode !== WALK && b.mode !== ON_TOP) || !b.path.slice(b.pi).some((n) => !P.alive[n])) continue;\n    if (b.mode === ON_TOP) b.at = 0;\n    plan(P, b);\n  }\n  P.free.push(k);\n  return true;\n}\n\n// Dropped sand rolls to the lower side while it is two grains higher, never into an entrance.\nfunction heap(P, x, n) {\n  for (let k = 0; k \u003c n; k++) {\n    let gx = x;\n    for (let s = 0; s \u003c 12; s++) {\n      const c = gx + (P.ground[gx - 1] > P.ground[gx + 1] ? -1 : 1);\n      if (c \u003c 2 || c > 61 || P.ground[c] \u003c= P.ground[gx] + 1 || Math.abs(c - P.nx[1]) \u003c 3 || Math.abs(c - P.nx[2]) \u003c 3) break;\n      gx = c;\n    }\n    const y = P.ground[gx] - 1;\n    if (y >= PEAK) (P.type[y * W + gx] = HEAP), (P.ground[gx] = y);\n  }\n}\n\n// The damp sinks, spreads, passes through the tunnels, stops at the floor and dries.\nfunction soak(P, ds) {\n  const { wet, type } = P;\n  const out = P.wet2;\n  const g = SINK * ds;\n  const d = SPREAD * ds;\n  const dry = 1 - ds / 40;\n  const damp = (q) => type[q] !== AIR && type[q] !== FRAME;\n  for (let p = TOP * W; p \u003c (BASE + 1) * W; p++) {\n    if (!damp(p)) {\n      out[p] = 0;\n      continue;\n    }\n    const w = wet[p];\n    const u = damp(p - W);\n    const f = damp(p + W);\n    const up = u ? wet[p - W] : w;\n    const dn = f ? wet[p + W] : w;\n    const l = damp(p - 1) ? wet[p - 1] : w;\n    const r = damp(p + 1) ? wet[p + 1] : w;\n    out[p] = (w + g * ((u ? up : 0) - (f ? w : 0)) + d * (l + r - 2 * w + 0.3 * (up + dn - 2 * w))) * dry;\n  }\n  P.wet2 = wet;\n  P.wet = out;\n}\n\nfunction step(P, dt, s) {\n  const v = PACE * s * dt;\n  const ds = dt * s;\n  P.t += ds;\n  P.target = P.soil * (HOLLOW + P.count / 500);\n  if (P.holes \u003c P.target && P.tips.length \u003c 3 + P.count / 10 && (P.sproutT -= ds) \u003c= 0) {\n    sprout(P, 0);\n    P.sproutT = 0.5;\n  }\n  if (P.t >= P.water) {\n    P.water = P.t + WATER;\n    P.drip = 3;\n    P.dx = 6 + Math.floor(Math.random() * 52);\n  }\n  if (P.drip > 0) {\n    P.drip -= ds;\n    for (let x = P.dx - 1; x \u003c= P.dx + 1; x++) P.wet[P.ground[x] * W + x] += 120 * ds;\n  }\n  soak(P, ds);\n  for (let i = 0; i \u003c P.count; i++) {\n    const a = P.ants[i];\n    const t = a.arg;\n    if (a.mode === WALK) {\n      // Node by node; at node 0 the path climbs out onto the sand.\n      for (a.f += v; ; a.f--, (a.at = a.path[++a.pi])) {\n        if (a.pi >= a.path.length - 1) arrive(P, a);\n        else if (a.path[a.pi + 1] === 0) toTop(P, a, a.pi + 2 \u003c a.path.length ? a.pi + 2 : -1);\n        else if (a.f >= 1) continue;\n        break;\n      }\n    } else if (a.mode === ON_TOP) {\n      const d = a.sg - a.x;\n      if (Math.abs(d) > v) (a.x += Math.sign(d) * v), (a.hx = Math.sign(d)), (a.hy = 0);\n      else if (a.sn \u003c 0) arrive(P, a);\n      else Object.assign(a, { x: a.sg, pi: a.sn, f: 0, at: a.path[a.sn], mode: WALK });\n    } else if (a.mode === WORK) {\n      a.t -= ds;\n      if (a.task === DIG) {\n        for (a.acc += CUT * ds; a.acc >= 1 && !t.dead; a.acc--) a.load += cutStep(P, t);\n        a.at = t.n;\n        if (a.t \u003c= 0 || t.dead) {\n          t.busy = -1;\n          a.carry = a.load > 0 ? 1 : 0;\n          plan(P, a);\n        }\n      } else if (a.task === PACKIT) {\n        for (a.acc += 2 * CUT * ds; a.acc >= 1; a.acc--)\n          if (!packOne(P, a)) {\n            a.carry = a.load = 0;\n            plan(P, a);\n            break;\n          }\n      } else if (a.task === NURSE) {\n        const dx = a.wx - a.x;\n        const dy = a.wy - a.y;\n        const d = Math.hypot(dx, dy);\n        if (d \u003c 0.6) {\n          if (a.t > 0) pick(P, a);\n          else if (Math.abs(a.wx - P.nx[a.at]) + Math.abs(a.wy - P.ny[a.at]) \u003c 0.1) plan(P, a);\n          else (a.wx = P.nx[a.at]), (a.wy = P.ny[a.at]);\n        } else {\n          const g = Math.min(d, v * 0.6) / d;\n          a.x += dx * g;\n          a.y += dy * g;\n          a.hx = dx / d;\n          a.hy = dy / d;\n        }\n      } else if (a.t \u003c= 0) plan(P, a);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 40, 0.06];\n  dt = Math.min(dt, 0.1);\n  const s = clamp(k[1], 0.05, 3);\n  P.count = clamp(Math.round(k[2]), 0, MAXA);\n  P.fill = clamp(k[0], 0, 1);\n  P.lamp = clamp(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.water = P.t;\n  if (!P.started) {\n    P.started = true;\n    for (let i = 0; i \u003c PRE * 30; i++) step(P, 1 / 30, s);\n  }\n  step(P, dt, s);\n}\n\n// ---- Drawing ----\n\nfunction put(buf, x, y, c, m) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 1 || x > 62 || y \u003c TOP || y > BASE) return;\n  for (let j = 0; j \u003c 3; j++) buf[(y * W + x) * 3 + j] = c[j] * m;\n}\n\n// Where an ant is and which way it faces.\nfunction where(P, a) {\n  if (a.mode === WALK && a.pi \u003c a.path.length - 1) {\n    const na = a.path[a.pi];\n    const nb = a.path[a.pi + 1];\n    a.hx = P.nx[nb] - P.nx[na];\n    a.hy = P.ny[nb] - P.ny[na];\n    a.x = P.nx[na] + a.hx * a.f;\n    a.y = P.ny[na] + a.hy * a.f;\n  } else if (a.at === 0) a.y = P.ground[clamp(Math.round(a.x), 1, 62)] - 1;\n  else if (a.mode === WORK && a.task !== NURSE) {\n    a.x = P.nx[a.at];\n    a.y = P.ny[a.at];\n    if (a.task === DIG) (a.hx = Math.cos(a.arg.a)), (a.hy = Math.sin(a.arg.a));\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  // Sand to clay as Fill passes 0.25, clay to gel as it passes 0.75.\n  const ramp = (a) => clamp((P.fill * 2 - a) / 0.3, 0, 1);\n  const wg = ramp(1.35);\n  const wc = ramp(0.35) - wg;\n  const [r0, g0, b0, grain, hole, rim, loose, pack, glow] = FILLS[0].map((v, j) => v * (1 - wc - wg) + FILLS[1][j] * wc + FILLS[2][j] * wg);\n  const fc = [r0, g0, b0];\n  const lamp = P.lamp;\n  const room = 1 - 0.8 * lamp;\n  const { buf, type } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const dep = clamp((y - SURF) / (BASE - SURF), 0, 1);\n    const shade = (1 - glow) * (1.04 - 0.1 * dep) + glow * (0.62 + 0.5 * dep * dep);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const t = type[p];\n      let c = fc;\n      let m;\n      if (t === FRAME) (c = FRAME_C), (m = y \u003c TOP || y > BASE ? 1 : 0.8);\n      else if (t === AIR) {\n        const u = (y - TOP) / (SURF - TOP);\n        c = [46 - 12 * u, 52 - 12 * u, 64 - 14 * u];\n        m = room;\n      } else {\n        m = (1 + grain * P.tex[p]) * shade * (1 - 0.5 * (1 - glow) * Math.min(1, 2 * P.wet[p]));\n        if (t === HOLE) {\n          // The far side of the tunnel: dark under the roof, lighter on the floor.\n          m *= hole;\n          if (type[p - W] !== HOLE && type[p - W] !== AIR) m *= 0.7;\n          if (type[p + W] !== HOLE) m *= 1.4;\n        } else {\n          if (t === HEAP) m *= loose;\n          else if (t === PACK) m *= pack;\n          if (type[p - 1] === HOLE || type[p + 1] === HOLE || type[p - W] === HOLE || type[p + W] === HOLE) m *= rim;\n        }\n      }\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] = c[j] * m;\n    }\n  }\n  // Grass in the top corners.\n  for (let k = 0; k \u003c 10; k++) {\n    const x0 = k \u003c 5 ? 3 + k : 51 + k;\n    const h = 5 + ((k * 7) % 5) + (k % 3) * 2;\n    for (let j = 0; j \u003c h; j++) {\n      const u = j / h;\n      put(buf, x0 + ((k % 5) - 2) * 0.18 * j + Math.sin(time * 1.3 + k) * u * u * 1.2, P.ground[x0] - 1 - j, [52 + 70 * u, 140 + 56 * u, 44 + 26 * u], room);\n    }\n  }\n  // The apple, skin up, and the drops while it is watered.\n  let gy = BASE;\n  for (let dx = 0; dx \u003c 6; dx++) gy = Math.min(gy, P.ground[P.fx + dx]);\n  for (let dy = 0; dy \u003c 4; dy++) for (let dx = dy > 2 ? 1 : 0; dx \u003c (dy > 2 ? 5 : 6); dx++) put(buf, P.fx + dx, gy - 1 - dy, dy > 2 ? SKIN : FLESH, 1);\n  if (P.drip > 0) put(buf, P.dx, TOP + ((P.t * 2.5) % 1) * (P.ground[P.dx] - TOP), [150, 190, 235], room);\n  for (let j = 0; j \u003c P.brood.length; j += 3) put(buf, P.brood[j], P.brood[j + 1], BROOD[P.brood[j + 2]], 1);\n  // The queen, twice a worker's length.\n  const qx = P.queen.cx + Math.sin(P.t * 0.15) * (P.queen.rx - 3);\n  const qd = Math.cos(P.t * 0.15) \u003c 0 ? -1 : 1;\n  for (let j = -2; j \u003c 3; j++) {\n    put(buf, qx + j * qd, P.qy - 1, ANT[j \u003c 1 ? 0 : j], 1);\n    if (j \u003c 1) put(buf, qx + j * qd, P.qy, ANT[0], 0.85);\n  }\n  for (let i = 0; i \u003c P.count; i++) {\n    const a = P.ants[i];\n    where(P, a);\n    for (let j = 0; j \u003c 3; j++) put(buf, a.x + (j - 1) * a.hx, a.y + (j - 1) * a.hy, ANT[j], 1);\n    if (a.carry) put(buf, a.x + 2 * a.hx, a.y + 2 * a.hy, a.carry === 1 ? fc : FLESH, a.carry === 1 ? 1.25 * loose : 1);\n  }\n  // By the red lamp each colour is seen as the light it sends back, in red.\n  for (let p = 0; p \u003c N; p++) {\n    let r = buf[p * 3];\n    let g = buf[p * 3 + 1];\n    let b = buf[p * 3 + 2];\n    if (lamp > 0) {\n      const lum = 0.42 * r + 0.43 * g + 0.15 * b;\n      r += lamp * (lum - r);\n      g += lamp * (lum * 0.08 - g);\n      b += lamp * (lum * 0.05 - b);\n    }\n    display.setPixel(p % W, (p / W) | 0, q4(r), q4(g), q4(b));\n  }\n}\n","layer":{"id":"layer-ant-farm","type":"code","name":"ant-farm","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ant Farm\n// Family:  insect\n// Idea:    Harvester ants in a tall ant farm dig tunnels to the floor, carry the sand up or pack it into old dead ends, and tend the queen's eggs while the damp of each watering sinks through.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after the sand-and-glass ant farms sold as toys since the 1950s\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Fill=0..1, Speed=0.2..3, Ants=40..120, Lamp=0..1\n//\n// Knob 1: Fill. Pale sand at 0, red clay in the middle, and at 1 the blue gel of a gel farm, lit from its base.\n// Knob 2: Speed. The time-lapse: at 2 an ant walks ten LEDs a second and a digger cuts five LEDs of tunnel a second.\n// Knob 3: Ants. Workers from 40 to 120; a bigger colony digs more faces at once and keeps a bigger nest.\n// Knob 4: Lamp. From daylight to the red lamp keepers watch by, because ants do not see red.\n// Buttons: K1 tap waters the farm through the lid, as the keeper does every 35 seconds at Speed 2.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the green frame: lid rows 0 and 1, base rows 126 and 127, sides columns 0 and 63.\nconst TOP = 2;\nconst BASE = 125;\n// The sand line as the farm was filled, and the highest a heap may climb.\nconst SURF = 30;\nconst PEAK = 20;\nconst MAXN = 2400;\nconst MAXA = 120;\n// Cells: the room over the sand, sand, hole, heap, frame, and sand packed back into a tunnel.\nconst [AIR, SAND, HOLE, HEAP, FRAME, PACK] = [0, 1, 2, 3, 4, 5];\n// An ant walks the tunnels, walks on the surface, or works in one place.\nconst [WALK, ON_TOP, WORK] = [0, 1, 2];\nconst [DIG, DUMP, PACKIT, NURSE, FORAGE, IDLE] = [0, 1, 2, 3, 4, 5];\n// Forty ants keep a fifth of the sand hollow, and every forty more another 0.08: below that\n// they open new tunnels, near it they pack what they cut into old dead ends.\nconst HOLLOW = 0.12;\n// LEDs a second per unit of Speed, walking and cutting.\nconst PACE = 5;\nconst CUT = 2.5;\n// Seconds the colony works before the first frame.\nconst PRE = 6;\n// Watering every WATER seconds of colony time; the damp sinks SINK rows a second and spreads.\nconst WATER = 70;\nconst SINK = 4;\nconst SPREAD = 2;\n// Sand, red clay and blue gel: colour, grain, then the tones of a hole, a hole's rim, a heap\n// and packed sand, and how much the gel's base lights it.\nconst FILLS = [\n  [206, 170, 112, 1, 0.24, 0.8, 1.1, 0.92, 0],\n  [186, 66, 38, 0.7, 0.22, 0.76, 1.18, 0.88, 0],\n  [30, 112, 232, 0, 0.18, 1.4, 1.45, 1.2, 1],\n];\nconst FRAME_C = [30, 92, 46];\n// An ant from gaster to head; eggs, larvae, pupae; the apple.\nconst ANT = [[108, 36, 20], [138, 50, 24], [158, 62, 28]];\nconst BROOD = [[238, 234, 218], [226, 212, 172], [204, 182, 130]];\nconst SKIN = [200, 36, 30];\nconst FLESH = [238, 226, 168];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nconst q4 = (v) => clamp(Math.round(v / 4) * 4, 0, 255);\n\n// ---- Tunnels: a tree of nodes a LED apart, each the centre of a disc of hole. Node 0 is the\n// surface, its children the entrances. ----\n\nfunction addNode(P, up, x, y, r) {\n  const n = P.free.length ? P.free.pop() : P.nn \u003c MAXN ? P.nn++ : -1;\n  if (n \u003c 0) return -1;\n  P.nx[n] = x;\n  P.ny[n] = y;\n  P.par[n] = up;\n  P.dep[n] = up \u003c 0 ? 0 : P.dep[up] + 1;\n  P.kids[n] = P.perm[n] = 0;\n  P.alive[n] = 1;\n  P.rad[n] = r;\n  P.born[n] = P.t;\n  if (up >= 0) P.kids[up]++;\n  P.cut = carve(P, n, 1);\n  return n;\n}\n\n// Opens (s = 1) or packs (s = -1) a node's disc; returns the cells that changed.\nfunction carve(P, n, s) {\n  const r = P.rad[n];\n  const cx = P.nx[n];\n  const cy = P.ny[n];\n  let changed = 0;\n  for (let y = Math.ceil(cy - r); y \u003c= cy + r; y++)\n    for (let x = Math.ceil(cx - r); x \u003c= cx + r; x++) {\n      if (x \u003c 1 || x > 62 || y \u003c TOP || y > BASE || (x - cx) ** 2 + (y - cy) ** 2 > r * r + 0.01) continue;\n      const p = y * W + x;\n      const t = P.type[p];\n      if (s > 0) {\n        P.own[p]++;\n        if (t !== AIR && t !== HOLE) (P.type[p] = HOLE), changed++;\n      } else if (--P.own[p] === 0 && t === HOLE) (P.type[p] = PACK), changed++;\n    }\n  P.holes += s * changed;\n  return changed;\n}\n\nfunction route(P, a, b) {\n  const { par, dep } = P;\n  const up = [];\n  const down = [];\n  while (dep[a] > dep[b]) up.push(a), (a = par[a]);\n  while (dep[b] > dep[a]) down.push(b), (b = par[b]);\n  while (a !== b) up.push(a), (a = par[a]), down.push(b), (b = par[b]);\n  up.push(a);\n  return up.concat(down.reverse());\n}\n\n// Sand a face can cut: inside the frame, off the floor, five rows down unless a shaft.\nfunction solid(P, x, y, shaft) {\n  const ix = Math.round(x);\n  const iy = Math.round(y);\n  if (ix \u003c 3 || ix > 60 || iy > BASE - 2 || iy \u003c P.ground[ix] + (shaft ? 0 : 5)) return false;\n  const t = P.type[iy * W + ix];\n  return t === SAND || t === PACK;\n}\n\n// One LED of tunnel at a face. It wanders, leans back to the way it was started and turns\n// from a hole or the frame four LEDs ahead; boxed in, it stops.\nfunction grow(P, t) {\n  const n = t.n;\n  const x = P.nx[n];\n  const y = P.ny[n];\n  let a = t.a + (Math.random() - 0.5) * 0.5;\n  a += (t.pref - a) * 0.12;\n  const ok = (g, d) => solid(P, x + Math.cos(g) * d, y + Math.sin(g) * d, t.goal > 0);\n  if (!ok(a, 4) || !ok(a, 3)) {\n    const l = ok(a - 0.7, 4);\n    const r = ok(a + 0.7, 4);\n    if (l && (!r || Math.random() \u003c 0.5)) a -= 0.7;\n    else if (r) a += 0.7;\n    else if (!ok(a, 2.2)) return finish(P, t);\n  }\n  t.a = a;\n  const m = addNode(P, n, x + Math.cos(a), y + Math.sin(a), t.r);\n  if (m \u003c 0) return finish(P, t);\n  if (t.goal > 0) P.perm[m] = 1;\n  t.n = m;\n  if (--t.left \u003c= 0 || (t.goal > 0 && P.ny[m] >= t.goal)) finish(P, t);\n  return P.cut;\n}\n\nfunction finish(P, t) {\n  if (t.role && makeChamber(P, t)) return 0;\n  t.dead = true;\n  P.tips.splice(P.tips.indexOf(t), 1);\n  return 0;\n}\n\n// A chamber: a flat-floored oval the tunnel opens into, dug out from its door.\nfunction makeChamber(P, t) {\n  const n = t.n;\n  for (let rx = t.role === \"queen\" ? 9 : 7; rx >= 4; rx--) {\n    const ry = rx > 6 ? 3.4 : 2.8;\n    const cx = P.nx[n] + Math.cos(t.a) * (rx - 1.5);\n    const cy = P.ny[n] + Math.sin(t.a) * (ry - 1);\n    if (cx - rx \u003c 3 || cx + rx > 60 || cy + ry > BASE - 1 || cy - ry \u003c P.ground[Math.round(cx)] + 5) continue;\n    t.room = { n, cx, cy, rx, ry, p: 0, role: t.role, id: P.rooms.length + 1 };\n    P.rooms.push(t.room);\n    P.perm[n] = P.door[n] = 1;\n    t.role = \"\";\n    return true;\n  }\n  return false;\n}\n\nfunction dig(P, c, p) {\n  c.p = Math.min(1, p);\n  let changed = 0;\n  for (let y = Math.ceil(c.cy - c.ry); y \u003c= c.cy + c.ry * 0.6; y++)\n    for (let x = Math.ceil(c.cx - c.rx); x \u003c= c.cx + c.rx; x++) {\n      const q = y * W + x;\n      if (P.room[q] || ((x - c.cx) / c.rx) ** 2 + ((y - c.cy) / c.ry) ** 2 > c.p) continue;\n      P.room[q] = c.id;\n      P.own[q]++;\n      if (P.type[q] !== HOLE) (P.type[q] = HOLE), changed++;\n    }\n  P.holes += changed;\n  return changed;\n}\n\nfunction cutStep(P, t) {\n  const c = t.room;\n  if (!c) return grow(P, t);\n  const cells = dig(P, c, c.p + 3 / (Math.PI * c.rx * c.ry));\n  if (c.p >= 1) finish(P, t);\n  return cells;\n}\n\n// A side tunnel from a node, sideways and down, not where the sand ahead is a quarter hollow.\nfunction sprout(P, deep) {\n  for (let k = 0; k \u003c 16; k++) {\n    const n = 3 + Math.floor(Math.random() * (P.nn - 3));\n    if (!P.alive[n] || P.door[n] || P.kids[n] > 1 || P.ny[n] \u003c Math.max(SURF + 6, deep) || P.ny[n] > BASE - 6) continue;\n    const right = P.nx[n] \u003c 18 ? true : P.nx[n] > 46 ? false : Math.random() \u003c 0.5;\n    const a = right ? 0.05 + 0.85 * Math.random() : Math.PI - 0.05 - 0.85 * Math.random();\n    const ax = P.nx[n] + Math.cos(a) * 6;\n    const ay = P.ny[n] + Math.sin(a) * 6;\n    if (!solid(P, P.nx[n] + Math.cos(a) * 3.5, P.ny[n] + Math.sin(a) * 3.5, false)) continue;\n    let near = 0;\n    for (let y = -5; y \u003c= 5; y++) for (let x = -5; x \u003c= 5; x++) near += P.type[clamp(Math.round(ay) + y, 0, H - 1) * W + clamp(Math.round(ax) + x, 0, W - 1)] === HOLE;\n    if (near > 30) continue;\n    const role = P.rooms.length \u003c 7 && Math.random() \u003c 0.18 ? \"store\" : \"\";\n    const t = { n, a, pref: a, left: 10 + Math.floor(Math.random() * 30), r: 1.25, goal: 0, role, room: null, busy: -1, dead: false };\n    P.tips.push(t);\n    return t;\n  }\n  return null;\n}\n\nfunction floorCells(P, c) {\n  const out = [];\n  for (let y = Math.ceil(c.cy - c.ry); y \u003c= c.cy + c.ry; y++)\n    for (let x = Math.ceil(c.cx - c.rx); x \u003c= c.cx + c.rx; x++) if (P.room[y * W + x] === c.id && P.type[(y + 1) * W + x] !== HOLE) out.push(x, y);\n  return out;\n}\n\nfunction lay(P, c, kind, count) {\n  const fl = floorCells(P, c);\n  const m = fl.length / 2;\n  const s = Math.floor(Math.random() * m);\n  for (let i = 0; i \u003c count; i++) {\n    const j = ((s + i + Math.floor(Math.random() * 3)) % m) * 2;\n    P.brood.push(fl[j], fl[j + 1] - (i % 3 === 2 ? 1 : 0), kind);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const k of [\"nx\", \"ny\", \"rad\", \"born\"]) P[k] = new Float32Array(MAXN);\n  for (const k of [\"par\", \"dep\"]) P[k] = new Int32Array(MAXN);\n  for (const k of [\"kids\", \"alive\", \"perm\", \"door\"]) P[k] = new Uint8Array(MAXN);\n  for (const k of [\"type\", \"own\", \"room\"]) P[k] = new Uint8Array(N);\n  for (const k of [\"tex\", \"wet\", \"wet2\"]) P[k] = new Float32Array(N);\n  P.ground = new Int16Array(W);\n  P.buf = new Float32Array(N * 3);\n  Object.assign(P, { nn: 0, free: [], holes: 0, tips: [], rooms: [], brood: [], sproutT: 0, started: false, count: 40, t: 0, drip: 0, dx: 32, water: 4 });\n  const ph = Math.random() * 6;\n  let soil = 0;\n  for (let x = 0; x \u003c W; x++) P.ground[x] = Math.round(SURF + 1.2 * Math.sin(x * 0.13 + ph) + 0.8 * Math.sin(x * 0.41 + 2 * ph));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      P.type[p] = y \u003c TOP || y > BASE || x \u003c 1 || x > 62 ? FRAME : y \u003c P.ground[x] ? AIR : SAND;\n      if (P.type[p] === SAND) soil++;\n      // Dark mineral grains and a few pale ones.\n      const h = Math.random();\n      P.tex[p] = h \u003c 0.1 ? -0.2 : h \u003c 0.22 ? -0.08 : h > 0.94 ? 0.12 : 0;\n    }\n  P.soil = soil;\n  P.target = 0.2 * soil;\n  addNode(P, -1, -1, -1, 0);\n  // Two shafts: the left one to the queen near the floor, the right one to the larder.\n  for (const [ex, goal, role] of [\n    [13 + Math.floor(Math.random() * 6), BASE - 16, \"queen\"],\n    [42 + Math.floor(Math.random() * 6), 68 + Math.random() * 8, \"larder\"],\n  ]) {\n    const e = addNode(P, 0, ex, P.ground[ex], 1.5);\n    P.perm[e] = 1;\n    P.tips.push({ n: e, a: Math.PI / 2, pref: Math.PI / 2 + (ex \u003c 32 ? -0.12 : 0.12), left: 200, r: 1.5, goal, role, room: null, busy: -1, dead: false });\n  }\n  // What the colony has dug already: shafts, chambers, a nursery and side tunnels; the seven\n  // still growing are the faces the panel opens on.\n  for (let i = 0; i \u003c 400 && P.tips.length; i++) for (const t of P.tips.slice()) cutStep(P, t);\n  for (let k = 0, t; k \u003c 40 && P.rooms.length \u003c 3; k++)\n    if ((t = sprout(P, 76))) for (Object.assign(t, { role: \"nursery\", left: 12 }); !t.dead; ) cutStep(P, t);\n  for (let i = 0; i \u003c 3000 && P.holes \u003c P.target * 0.9; i++) {\n    if (P.tips.length \u003c 7 && i % 9 === 0) sprout(P, 0);\n    for (const t of P.tips.slice()) cutStep(P, t);\n  }\n  while (P.tips.length \u003c 7 && sprout(P, 0));\n  const role = (r, d) => P.rooms.find((c) => c.role === r) || d;\n  P.queen = role(\"queen\", P.rooms[0]);\n  P.larder = role(\"larder\", P.rooms[P.rooms.length - 1]);\n  P.nursery = role(\"nursery\", P.queen);\n  for (const [c, kind, n] of [[P.queen, 0, 10], [P.queen, 1, 4], [P.nursery, 1, 6], [P.nursery, 2, 7]]) lay(P, c, kind, n);\n  const qf = floorCells(P, P.queen);\n  P.qy = qf.length ? qf[1] : P.queen.cy;\n  P.fx = 28 + Math.floor(Math.random() * 3);\n  P.ants = [];\n  for (let i = 0; i \u003c MAXA; i++) {\n    const at = 3 + Math.floor(Math.random() * (P.nn - 3));\n    P.ants.push({ i, x: P.nx[at], y: P.ny[at], hx: 1, hy: 0, mode: WORK, path: [at], pi: 0, f: 0, at, task: IDLE, carry: 0, load: 0, t: Math.random() * 2 });\n  }\n  // A digger at each face and six nurses with the queen.\n  P.tips.forEach((t, j) => Object.assign(P.ants[(t.busy = j)], { at: t.n, task: DIG, arg: t, t: 1 + 4 * Math.random() }));\n  for (let j = 10; j \u003c 16; j++) Object.assign(P.ants[j], { at: P.queen.n, task: NURSE, arg: P.queen, x: P.queen.cx, y: P.queen.cy });\n}\n\n// ---- The ants ----\n\nfunction goTo(P, a, from, to, task, arg) {\n  Object.assign(a, { task, arg, path: route(P, from, to), pi: 0, f: 0, at: from, mode: WALK });\n  if (from === 0) toTop(P, a, to === 0 ? -1 : 1);\n}\n\n// Out on the sand, to the next entrance on the path or to the job up here.\nfunction toTop(P, a, next) {\n  if (a.at > 0) a.x = P.nx[a.at];\n  a.mode = ON_TOP;\n  a.sn = next;\n  a.sg = next >= 0 ? P.nx[a.path[next]] : a.arg;\n  a.at = 0;\n}\n\nfunction fillable(P, k) {\n  return k > 2 && P.alive[k] && !P.kids[k] && !P.perm[k] && !P.tips.some((t) => t.n === k);\n}\n\n// The nearest dead end four seconds old or more.\nfunction nearLeaf(P, a) {\n  let best = -1;\n  let bd = 1e9;\n  for (let k = 3; k \u003c P.nn; k++) {\n    if (P.born[k] > P.t - 4 || !fillable(P, k)) continue;\n    const d = route(P, a.at, k).length;\n    if (d \u003c bd) (bd = d), (best = k);\n  }\n  return best;\n}\n\n// Whether another ant is cutting this face or on its way to.\nconst taken = (P, t, i) => t.busy >= 0 && t.busy !== i && t.busy \u003c P.count && P.ants[t.busy].arg === t && P.ants[t.busy].task === DIG;\n\nconst idle = (a, s) => Object.assign(a, { mode: WORK, task: IDLE, t: s });\n\nfunction plan(P, a) {\n  const from = a.at;\n  if (a.carry === 1) {\n    // A load of sand: into a dead end near by, or up to a heap by the entrance.\n    const leaf = P.holes > P.target - 40 ? nearLeaf(P, a) : -1;\n    if (leaf > 0) return goTo(P, a, from, leaf, PACKIT, leaf);\n    let e = from > 0 ? from : a.x \u003c 32 ? 1 : 2;\n    while (P.dep[e] > 1) e = P.par[e];\n    return goTo(P, a, from, 0, DUMP, clamp(Math.round(P.nx[e] + (Math.random() \u003c 0.5 ? -1 : 1) * (4 + Math.random() * 7)), 3, 60));\n  }\n  if (a.carry === 2) return goTo(P, a, from, P.larder.n, NURSE, P.larder);\n  const r = Math.random();\n  if (r \u003c 0.6) {\n    // The nearest face nobody is cutting.\n    let open = null;\n    let bo = 1e9;\n    for (const t of P.tips) {\n      const d = route(P, from, t.n).length;\n      if (!taken(P, t, a.i) && d \u003c bo) (bo = d), (open = t);\n    }\n    if (open) return (open.busy = a.i), goTo(P, a, from, open.n, DIG, open);\n  }\n  // Otherwise up to the apple, or down to the brood or another chamber.\n  const q = Math.random();\n  if (q \u003c 0.25) return goTo(P, a, from, 0, FORAGE, P.fx + (Math.random() \u003c 0.5 ? -1 : 6));\n  const c = q \u003c 0.5 ? P.queen : q \u003c 0.7 ? P.nursery : P.rooms[Math.floor(Math.random() * P.rooms.length)];\n  goTo(P, a, from, c.n, NURSE, c);\n}\n\nfunction arrive(P, a) {\n  const t = a.arg;\n  if (a.task === DIG) {\n    if (t.dead || taken(P, t, a.i)) return plan(P, a);\n    if (t.n !== a.at) return goTo(P, a, a.at, t.n, DIG, t);\n    Object.assign(a, { mode: WORK, t: 2 + 4 * Math.random(), acc: 0, load: 0 });\n  } else if (a.task === DUMP) {\n    heap(P, a.arg, 1 + Math.min(3, Math.floor(a.load / 12)));\n    a.carry = a.load = 0;\n    idle(a, 0.3);\n  } else if (a.task === PACKIT) Object.assign(a, { mode: WORK, acc: 0 });\n  else if (a.task === NURSE) {\n    Object.assign(a, { carry: 0, mode: WORK, t: 2 + 5 * Math.random(), x: P.nx[a.at], y: P.ny[a.at] });\n    pick(P, a);\n  } else if (a.task === FORAGE) {\n    a.carry = 2;\n    plan(P, a);\n  } else idle(a, 0.3 + Math.random());\n}\n\nfunction pick(P, a) {\n  const c = a.arg;\n  a.wx = P.nx[c.n];\n  a.wy = P.ny[c.n];\n  for (let k = 0; k \u003c 8; k++) {\n    const x = Math.round(c.cx + (Math.random() * 2 - 1) * c.rx);\n    const y = Math.round(c.cy + (Math.random() * 2 - 1) * c.ry);\n    if (P.room[y * W + x] === c.id) return (a.wx = x), (a.wy = y);\n  }\n}\n\n// Packs the node the ant stands in and steps back one; false once the load is spent.\nfunction packOne(P, a) {\n  const k = a.at;\n  if (a.load \u003c= 0 || !fillable(P, k) || P.ants.some((b) => b !== a && (b.at === k || (b.mode === WALK && b.path[b.pi + 1] === k)))) return false;\n  a.load -= Math.max(1, carve(P, k, -1));\n  P.alive[k] = 0;\n  a.at = P.par[k];\n  P.kids[a.at]--;\n  for (const b of P.ants) {\n    if (b === a || (b.mode !== WALK && b.mode !== ON_TOP) || !b.path.slice(b.pi).some((n) => !P.alive[n])) continue;\n    if (b.mode === ON_TOP) b.at = 0;\n    plan(P, b);\n  }\n  P.free.push(k);\n  return true;\n}\n\n// Dropped sand rolls to the lower side while it is two grains higher, never into an entrance.\nfunction heap(P, x, n) {\n  for (let k = 0; k \u003c n; k++) {\n    let gx = x;\n    for (let s = 0; s \u003c 12; s++) {\n      const c = gx + (P.ground[gx - 1] > P.ground[gx + 1] ? -1 : 1);\n      if (c \u003c 2 || c > 61 || P.ground[c] \u003c= P.ground[gx] + 1 || Math.abs(c - P.nx[1]) \u003c 3 || Math.abs(c - P.nx[2]) \u003c 3) break;\n      gx = c;\n    }\n    const y = P.ground[gx] - 1;\n    if (y >= PEAK) (P.type[y * W + gx] = HEAP), (P.ground[gx] = y);\n  }\n}\n\n// The damp sinks, spreads, passes through the tunnels, stops at the floor and dries.\nfunction soak(P, ds) {\n  const { wet, type } = P;\n  const out = P.wet2;\n  const g = SINK * ds;\n  const d = SPREAD * ds;\n  const dry = 1 - ds / 40;\n  const damp = (q) => type[q] !== AIR && type[q] !== FRAME;\n  for (let p = TOP * W; p \u003c (BASE + 1) * W; p++) {\n    if (!damp(p)) {\n      out[p] = 0;\n      continue;\n    }\n    const w = wet[p];\n    const u = damp(p - W);\n    const f = damp(p + W);\n    const up = u ? wet[p - W] : w;\n    const dn = f ? wet[p + W] : w;\n    const l = damp(p - 1) ? wet[p - 1] : w;\n    const r = damp(p + 1) ? wet[p + 1] : w;\n    out[p] = (w + g * ((u ? up : 0) - (f ? w : 0)) + d * (l + r - 2 * w + 0.3 * (up + dn - 2 * w))) * dry;\n  }\n  P.wet2 = wet;\n  P.wet = out;\n}\n\nfunction step(P, dt, s) {\n  const v = PACE * s * dt;\n  const ds = dt * s;\n  P.t += ds;\n  P.target = P.soil * (HOLLOW + P.count / 500);\n  if (P.holes \u003c P.target && P.tips.length \u003c 3 + P.count / 10 && (P.sproutT -= ds) \u003c= 0) {\n    sprout(P, 0);\n    P.sproutT = 0.5;\n  }\n  if (P.t >= P.water) {\n    P.water = P.t + WATER;\n    P.drip = 3;\n    P.dx = 6 + Math.floor(Math.random() * 52);\n  }\n  if (P.drip > 0) {\n    P.drip -= ds;\n    for (let x = P.dx - 1; x \u003c= P.dx + 1; x++) P.wet[P.ground[x] * W + x] += 120 * ds;\n  }\n  soak(P, ds);\n  for (let i = 0; i \u003c P.count; i++) {\n    const a = P.ants[i];\n    const t = a.arg;\n    if (a.mode === WALK) {\n      // Node by node; at node 0 the path climbs out onto the sand.\n      for (a.f += v; ; a.f--, (a.at = a.path[++a.pi])) {\n        if (a.pi >= a.path.length - 1) arrive(P, a);\n        else if (a.path[a.pi + 1] === 0) toTop(P, a, a.pi + 2 \u003c a.path.length ? a.pi + 2 : -1);\n        else if (a.f >= 1) continue;\n        break;\n      }\n    } else if (a.mode === ON_TOP) {\n      const d = a.sg - a.x;\n      if (Math.abs(d) > v) (a.x += Math.sign(d) * v), (a.hx = Math.sign(d)), (a.hy = 0);\n      else if (a.sn \u003c 0) arrive(P, a);\n      else Object.assign(a, { x: a.sg, pi: a.sn, f: 0, at: a.path[a.sn], mode: WALK });\n    } else if (a.mode === WORK) {\n      a.t -= ds;\n      if (a.task === DIG) {\n        for (a.acc += CUT * ds; a.acc >= 1 && !t.dead; a.acc--) a.load += cutStep(P, t);\n        a.at = t.n;\n        if (a.t \u003c= 0 || t.dead) {\n          t.busy = -1;\n          a.carry = a.load > 0 ? 1 : 0;\n          plan(P, a);\n        }\n      } else if (a.task === PACKIT) {\n        for (a.acc += 2 * CUT * ds; a.acc >= 1; a.acc--)\n          if (!packOne(P, a)) {\n            a.carry = a.load = 0;\n            plan(P, a);\n            break;\n          }\n      } else if (a.task === NURSE) {\n        const dx = a.wx - a.x;\n        const dy = a.wy - a.y;\n        const d = Math.hypot(dx, dy);\n        if (d \u003c 0.6) {\n          if (a.t > 0) pick(P, a);\n          else if (Math.abs(a.wx - P.nx[a.at]) + Math.abs(a.wy - P.ny[a.at]) \u003c 0.1) plan(P, a);\n          else (a.wx = P.nx[a.at]), (a.wy = P.ny[a.at]);\n        } else {\n          const g = Math.min(d, v * 0.6) / d;\n          a.x += dx * g;\n          a.y += dy * g;\n          a.hx = dx / d;\n          a.hy = dy / d;\n        }\n      } else if (a.t \u003c= 0) plan(P, a);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 40, 0.06];\n  dt = Math.min(dt, 0.1);\n  const s = clamp(k[1], 0.05, 3);\n  P.count = clamp(Math.round(k[2]), 0, MAXA);\n  P.fill = clamp(k[0], 0, 1);\n  P.lamp = clamp(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.water = P.t;\n  if (!P.started) {\n    P.started = true;\n    for (let i = 0; i \u003c PRE * 30; i++) step(P, 1 / 30, s);\n  }\n  step(P, dt, s);\n}\n\n// ---- Drawing ----\n\nfunction put(buf, x, y, c, m) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 1 || x > 62 || y \u003c TOP || y > BASE) return;\n  for (let j = 0; j \u003c 3; j++) buf[(y * W + x) * 3 + j] = c[j] * m;\n}\n\n// Where an ant is and which way it faces.\nfunction where(P, a) {\n  if (a.mode === WALK && a.pi \u003c a.path.length - 1) {\n    const na = a.path[a.pi];\n    const nb = a.path[a.pi + 1];\n    a.hx = P.nx[nb] - P.nx[na];\n    a.hy = P.ny[nb] - P.ny[na];\n    a.x = P.nx[na] + a.hx * a.f;\n    a.y = P.ny[na] + a.hy * a.f;\n  } else if (a.at === 0) a.y = P.ground[clamp(Math.round(a.x), 1, 62)] - 1;\n  else if (a.mode === WORK && a.task !== NURSE) {\n    a.x = P.nx[a.at];\n    a.y = P.ny[a.at];\n    if (a.task === DIG) (a.hx = Math.cos(a.arg.a)), (a.hy = Math.sin(a.arg.a));\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  // Sand to clay as Fill passes 0.25, clay to gel as it passes 0.75.\n  const ramp = (a) => clamp((P.fill * 2 - a) / 0.3, 0, 1);\n  const wg = ramp(1.35);\n  const wc = ramp(0.35) - wg;\n  const [r0, g0, b0, grain, hole, rim, loose, pack, glow] = FILLS[0].map((v, j) => v * (1 - wc - wg) + FILLS[1][j] * wc + FILLS[2][j] * wg);\n  const fc = [r0, g0, b0];\n  const lamp = P.lamp;\n  const room = 1 - 0.8 * lamp;\n  const { buf, type } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const dep = clamp((y - SURF) / (BASE - SURF), 0, 1);\n    const shade = (1 - glow) * (1.04 - 0.1 * dep) + glow * (0.62 + 0.5 * dep * dep);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const t = type[p];\n      let c = fc;\n      let m;\n      if (t === FRAME) (c = FRAME_C), (m = y \u003c TOP || y > BASE ? 1 : 0.8);\n      else if (t === AIR) {\n        const u = (y - TOP) / (SURF - TOP);\n        c = [46 - 12 * u, 52 - 12 * u, 64 - 14 * u];\n        m = room;\n      } else {\n        m = (1 + grain * P.tex[p]) * shade * (1 - 0.5 * (1 - glow) * Math.min(1, 2 * P.wet[p]));\n        if (t === HOLE) {\n          // The far side of the tunnel: dark under the roof, lighter on the floor.\n          m *= hole;\n          if (type[p - W] !== HOLE && type[p - W] !== AIR) m *= 0.7;\n          if (type[p + W] !== HOLE) m *= 1.4;\n        } else {\n          if (t === HEAP) m *= loose;\n          else if (t === PACK) m *= pack;\n          if (type[p - 1] === HOLE || type[p + 1] === HOLE || type[p - W] === HOLE || type[p + W] === HOLE) m *= rim;\n        }\n      }\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] = c[j] * m;\n    }\n  }\n  // Grass in the top corners.\n  for (let k = 0; k \u003c 10; k++) {\n    const x0 = k \u003c 5 ? 3 + k : 51 + k;\n    const h = 5 + ((k * 7) % 5) + (k % 3) * 2;\n    for (let j = 0; j \u003c h; j++) {\n      const u = j / h;\n      put(buf, x0 + ((k % 5) - 2) * 0.18 * j + Math.sin(time * 1.3 + k) * u * u * 1.2, P.ground[x0] - 1 - j, [52 + 70 * u, 140 + 56 * u, 44 + 26 * u], room);\n    }\n  }\n  // The apple, skin up, and the drops while it is watered.\n  let gy = BASE;\n  for (let dx = 0; dx \u003c 6; dx++) gy = Math.min(gy, P.ground[P.fx + dx]);\n  for (let dy = 0; dy \u003c 4; dy++) for (let dx = dy > 2 ? 1 : 0; dx \u003c (dy > 2 ? 5 : 6); dx++) put(buf, P.fx + dx, gy - 1 - dy, dy > 2 ? SKIN : FLESH, 1);\n  if (P.drip > 0) put(buf, P.dx, TOP + ((P.t * 2.5) % 1) * (P.ground[P.dx] - TOP), [150, 190, 235], room);\n  for (let j = 0; j \u003c P.brood.length; j += 3) put(buf, P.brood[j], P.brood[j + 1], BROOD[P.brood[j + 2]], 1);\n  // The queen, twice a worker's length.\n  const qx = P.queen.cx + Math.sin(P.t * 0.15) * (P.queen.rx - 3);\n  const qd = Math.cos(P.t * 0.15) \u003c 0 ? -1 : 1;\n  for (let j = -2; j \u003c 3; j++) {\n    put(buf, qx + j * qd, P.qy - 1, ANT[j \u003c 1 ? 0 : j], 1);\n    if (j \u003c 1) put(buf, qx + j * qd, P.qy, ANT[0], 0.85);\n  }\n  for (let i = 0; i \u003c P.count; i++) {\n    const a = P.ants[i];\n    where(P, a);\n    for (let j = 0; j \u003c 3; j++) put(buf, a.x + (j - 1) * a.hx, a.y + (j - 1) * a.hy, ANT[j], 1);\n    if (a.carry) put(buf, a.x + 2 * a.hx, a.y + 2 * a.hy, a.carry === 1 ? fc : FLESH, a.carry === 1 ? 1.25 * loose : 1);\n  }\n  // By the red lamp each colour is seen as the light it sends back, in red.\n  for (let p = 0; p \u003c N; p++) {\n    let r = buf[p * 3];\n    let g = buf[p * 3 + 1];\n    let b = buf[p * 3 + 2];\n    if (lamp > 0) {\n      const lum = 0.42 * r + 0.43 * g + 0.15 * b;\n      r += lamp * (lum - r);\n      g += lamp * (lum * 0.08 - g);\n      b += lamp * (lum * 0.05 - b);\n    }\n    display.setPixel(p % W, (p / W) | 0, q4(r), q4(g), q4(b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Fill=0..1, Speed=0.2..3, Ants=40..120, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Fill","min":0,"max":1,"about":"Pale sand at 0, red clay in the middle, and at 1 the blue gel of a gel farm, lit from its base."},{"name":"Speed","min":0.2,"max":3,"about":"The time-lapse: at 2 an ant walks ten LEDs a second and a digger cuts five LEDs of tunnel a second."},{"name":"Ants","min":40,"max":120,"about":"Workers from 40 to 120; a bigger colony digs more faces at once and keeps a bigger nest."},{"name":"Lamp","min":0,"max":1,"about":"From daylight to the red lamp keepers watch by, because ants do not see red."}],"start":[0,2,40,0.06],"measures":{"motion":0.0748,"detail":0.0791,"edges":0.3143,"complexity":0.7035,"coverage":0.9824,"colour":0.2295,"drift":0.0611},"knobResponse":[0.2509,0.0544,0.0511,0.2616]},{"slug":"aquarium","title":"Aquarium","family":"pixel","round":2,"note":"높은 수조에 흰동가리, 블루탱, 엔젤피시, 네온테트라 떼가 꼬리를 흔들며 헤엄쳐요. 모래 위 보물상자가 몇 초마다 뚜껑을 열어 공기 방울을 뱉고, K1 을 누르면 먹이가 떨어져 물고기가 몰려와요.","idea":"A tall tank in hand-drawn sprites: clownfish, a tang, an angelfish and a school of neon tetras wag their tails across it and turn at the glass, weed sways from the sand, bubbles climb from a stone and the surface throws a moving net of light down the water.","buttons":"K1 tap drops a pinch of food at the surface, and every fish goes for it.","code":"// ===== Patternflow pattern =====\n// Title:   Aquarium\n// Family:  pixel\n// Idea:    A tall tank in hand-drawn sprites: clownfish, a tang, an angelfish and a school of neon tetras wag their tails across it and turn at the glass, weed sways from the sand, bubbles climb from a stone and the surface throws a moving net of light down the water.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Swim=0.2..4, Fish=6..18, Light=-1..1\n//\n// Knob 1: Water. The tint of the water, from clear blue through lagoon teal and planted green to tea-brown blackwater and violet.\n// Knob 2: Swim. How fast the whole tank moves, fish, weed, bubbles and light, from slow motion to a feeding rush.\n// Knob 3: Fish. How many fish live in the tank; new ones swim in from the side and spare ones swim out.\n// Knob 4: Light. Below 0 the lamp dims towards night and the deep water goes dark; above 0 the sun is out and the net of light reaches the sand.\n// Buttons: K1 tap drops a pinch of food at the surface, and every fish goes for it.\n\nconst W = 64;\nconst H = 128;\n// The water line; above it is the air under the lid.\nconst SURFACE = 7;\n// The mean height of the sand.\nconst FLOOR = 117;\nconst MAX_FISH = 18;\nconst FLAKES = 24;\nconst BUBBLES = 40;\nconst WEEDS = 6;\nconst SIN_N = 1024;\nconst SIN_K = SIN_N / (Math.PI * 2);\n\nconst CLOWN = 0;\nconst TANG = 1;\nconst ANGEL = 2;\nconst TETRA = 3;\n\n// Sprites face right. Two frames each: the tail spread, then edge-on.\nconst KINDS = [\n  {\n    pal: { o: 0xff6810, w: 0xf6f4ee, f: 0xc83c06, k: 0x101010 },\n    speed: 9,\n    a: [\n      \"......ff....\",\n      \"f...wooowo..\",\n      \"ff.owooowok.\",\n      \"fffowooowooo\",\n      \"ff.owooowoo.\",\n      \"f...wooowo..\",\n      \"......f.....\",\n    ],\n    b: [\n      \"......ff....\",\n      \"....wooowo..\",\n      \"f..owooowok.\",\n      \"ffffwooowooo\",\n      \"f..owooowoo.\",\n      \"....wooowo..\",\n      \".....f......\",\n    ],\n  },\n  {\n    pal: { b: 0x1e5cff, n: 0x0c1c78, y: 0xffd21a, l: 0x6aa8ff, k: 0x080808 },\n    speed: 11,\n    a: [\n      \".....lllll...\",\n      \"y..lbbbbbbb..\",\n      \"yy.bnnnbbbbb.\",\n      \"yyybbbnnnbbkb\",\n      \"yyybbbbbnnbbb\",\n      \"yy.bbbbbbnbb.\",\n      \"y..lbbbbbbb..\",\n      \".....lllll...\",\n    ],\n    b: [\n      \".....lllll...\",\n      \"...lbbbbbbb..\",\n      \"y..bnnnbbbbb.\",\n      \"yyybbbnnnbbkb\",\n      \"yyybbbbbnnbbb\",\n      \"y..bbbbbbnbb.\",\n      \"...lbbbbbbb..\",\n      \".....lllll...\",\n    ],\n  },\n  {\n    pal: { s: 0xdce6f0, d: 0x46505e, f: 0xa8bccc, k: 0x0a0a0a, a: 0xf2cc50 },\n    speed: 6,\n    a: [\n      \"...f.......\",\n      \"...ff......\",\n      \"....ff.....\",\n      \"....fss....\",\n      \"...sdssa...\",\n      \"f.ssdssds..\",\n      \"ffssdssdsks\",\n      \"f.ssdssds..\",\n      \"...sdsss...\",\n      \"....fss....\",\n      \"....ff.....\",\n      \"...ff......\",\n      \"...f.......\",\n    ],\n    b: [\n      \"....f......\",\n      \"...ff......\",\n      \"...ff......\",\n      \"....fss....\",\n      \"...sdssa...\",\n      \"..ssdssds..\",\n      \"fsssdssdsks\",\n      \"..ssdssds..\",\n      \"...sdsss...\",\n      \"....fss....\",\n      \"...ff......\",\n      \"...ff......\",\n      \"....f......\",\n    ],\n  },\n  {\n    pal: { s: 0xc4ccd6, t: 0x22d4ff, r: 0xff2234, k: 0x0a0a0a },\n    speed: 13,\n    a: [\n      \"...sss..\",\n      \"s.ttttks\",\n      \"ssrrrsss\",\n      \"s..sss..\",\n    ],\n    b: [\n      \"...sss..\",\n      \"..ttttks\",\n      \"ssrrrsss\",\n      \"...sss..\",\n    ],\n  },\n];\n\n// The chest on the sand, shut and open. Every few seconds its lid lifts and lets out a burst of air.\nconst CHEST = {\n  pal: { g: 0xe8b42a, w: 0x8c4c1a, d: 0x5a2c0c, y: 0xfff09a },\n  a: [\n    \".........\",\n    \".........\",\n    \".ggggggg.\",\n    \"gwwwwwwwg\",\n    \"ggggkgggg\",\n    \"gwwwgwwwg\",\n    \"gdddgdddg\",\n    \"ggggggggg\",\n  ],\n  b: [\n    \".ggggggg.\",\n    \"gwwwwwwwg\",\n    \".gyyyyyg.\",\n    \"gyyyyyyyg\",\n    \"ggggggggg\",\n    \"gwwwgwwwg\",\n    \"gdddgdddg\",\n    \"ggggggggg\",\n  ],\n};\nconst CHEST_X = 28;\n\nconst DRAW_ORDER = [TETRA, ANGEL, TANG, CLOWN];\n\n// Which kind each fish is, in the order they arrive as the knob turns up.\nconst ORDER = [CLOWN, ANGEL, TETRA, TETRA, TANG, TETRA, TETRA, CLOWN, TETRA, ANGEL, TETRA, TETRA, TANG, TETRA, CLOWN, TETRA, TETRA, ANGEL];\n\n// Water at the top and at the bottom of the tank, one pair per tint.\nconst WATERS = [\n  [0x2a7ce0, 0x0c2a78],\n  [0x18b0b4, 0x084450],\n  [0x50a83a, 0x123c16],\n  [0xc08428, 0x3c1c08],\n  [0x8456dc, 0x24104e],\n];\n\nconst WEED_STEM = [0x1c8a2a, 0x1c8a2a, 0x8a1e3c, 0x6a9418, 0x1c8a2a, 0x1c8a2a];\nconst WEED_LEAF = [0x46cc4e, 0x46cc4e, 0xe0506e, 0xa8d030, 0x46cc4e, 0x46cc4e];\nconst WEED_X = [4, 16, 26, 45, 57, 62];\nconst WEED_H = [66, 40, 84, 30, 94, 52];\n// Rows between leaves, so no two weeds look stamped from one.\nconst WEED_GAP = [6, 5, 4, 7, 6, 5];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, lo, hi) {\n  return v \u003c lo ? lo : v > hi ? hi : v;\n}\n\nfunction rgbOf(c, out, o) {\n  out[o] = (c >> 16) & 255;\n  out[o + 1] = (c >> 8) & 255;\n  out[o + 2] = c & 255;\n}\n\n// Turns the sprite strings into palette indices once, so the draw loop only reads numbers.\nfunction bake(kind) {\n  const keys = Object.keys(kind.pal);\n  const h = kind.a.length;\n  const w = kind.a[0].length;\n  const pix = new Uint8Array(2 * w * h);\n  const frames = [kind.a, kind.b];\n  for (let f = 0; f \u003c 2; f++)\n    for (let y = 0; y \u003c h; y++)\n      for (let x = 0; x \u003c w; x++) pix[f * w * h + y * w + x] = keys.indexOf(frames[f][y][x]) + 1;\n  const pal = new Float32Array((keys.length + 1) * 3);\n  for (let i = 0; i \u003c keys.length; i++) rgbOf(kind.pal[keys[i]], pal, (i + 1) * 3);\n  return { w, h, pix, pal, speed: kind.speed };\n}\n\nfunction sinAt(p, a) {\n  return p.sin[Math.floor(a * SIN_K) & (SIN_N - 1)];\n}\n\nfunction sandTop(x) {\n  return FLOOR + Math.round(1.6 * Math.sin(x * 0.13 + 0.7) + 0.9 * Math.sin(x * 0.41 + 2));\n}\n\nfunction newCruise(p, i) {\n  const s = p.sprite[p.kind[i]];\n  p.cruise[i] = 0.6 + Math.random() * 0.6;\n  p.ty[i] = SURFACE + 6 + Math.random() * (FLOOR - SURFACE - 16 - s.h);\n  p.clock[i] = 2 + Math.random() * 5;\n}\n\nfunction placeFish(p, i, entering) {\n  const s = p.sprite[p.kind[i]];\n  p.state[i] = entering ? 3 : 1;\n  const dir = Math.random() \u003c 0.5 ? -1 : 1;\n  p.dir[i] = dir;\n  if (entering) p.x[i] = dir > 0 ? -s.w - 1 : W + 1;\n  else p.x[i] = 1 + Math.random() * (W - s.w - 2);\n  newCruise(p, i);\n  p.y[i] = entering ? p.ty[i] : SURFACE + 6 + Math.random() * (FLOOR - SURFACE - 16 - s.h);\n  p.v[i] = dir * s.speed * p.cruise[i];\n  p.vy[i] = 0;\n  p.face[i] = dir;\n  p.wag[i] = Math.random() * 2;\n}\n\nfunction swim(p, i, dt) {\n  const s = p.sprite[p.kind[i]];\n  const st = p.state[i];\n  let target;\n  let ty = p.ty[i];\n  let tx = -1;\n  if (st === 1 && p.food > 0) {\n    // Nearest flake, from the mouth.\n    const mx = p.x[i] + (p.face[i] > 0 ? s.w : 0);\n    const my = p.y[i] + s.h * 0.5;\n    let best = 1e9;\n    let bi = -1;\n    for (let f = 0; f \u003c FLAKES; f++) {\n      if (p.flakeLife[f] \u003c= 0) continue;\n      const dx = p.fx[f] - mx;\n      const dy = p.fy[f] - my;\n      // A flake another fish is already after counts as further away, so a pinch spreads the fish out.\n      const d = dx * dx + dy * dy + (p.claim[f] ? 400 : 0);\n      if (d \u003c best) {\n        best = d;\n        bi = f;\n      }\n    }\n    if (bi >= 0) {\n      p.claim[bi] = 1;\n      if (best \u003c 6) {\n        p.flakeLife[bi] = 0;\n        p.food--;\n      } else {\n        tx = p.fx[bi] - (p.face[i] > 0 ? s.w : 0);\n        ty = p.fy[bi] - s.h * 0.5;\n      }\n    }\n  }\n  if (tx >= 0) {\n    target = clamp((tx - p.x[i]) * 2, -s.speed * 1.9, s.speed * 1.9);\n  } else if (st === 1 && p.kind[i] === TETRA) {\n    // Tetras keep station behind a leader nobody sees, so they turn as one.\n    tx = p.lx - p.ldir * p.ox[i];\n    ty = p.ly + p.oy[i];\n    target = p.ldir * p.lv + (tx - p.x[i]) * 1.2;\n    target = clamp(target, -s.speed * 1.6, s.speed * 1.6);\n  } else {\n    if (st === 1) {\n      p.clock[i] -= dt;\n      if (p.clock[i] \u003c= 0) {\n        newCruise(p, i);\n        if (Math.random() \u003c 0.3) p.dir[i] = -p.dir[i];\n      }\n      const m = 2 + Math.abs(p.v[i]) * 0.5;\n      if (p.x[i] \u003c m && p.dir[i] \u003c 0) p.dir[i] = 1;\n      if (p.x[i] > W - s.w - m && p.dir[i] > 0) p.dir[i] = -1;\n    }\n    target = p.dir[i] * s.speed * (st === 2 ? 1.4 : p.cruise[i]);\n  }\n  p.v[i] += (target - p.v[i]) * Math.min(1, dt * 2.2);\n  p.x[i] += p.v[i] * dt;\n  // Fish that share a stretch of water drift apart in depth instead of swimming through each other.\n  let push = 0;\n  if (p.food \u003c= 0) {\n    for (let j = 0; j \u003c MAX_FISH; j++) {\n      if (j === i || !p.state[j]) continue;\n      if (p.kind[i] === TETRA && p.kind[j] === TETRA) continue;\n      const o = p.sprite[p.kind[j]];\n      if (p.x[j] > p.x[i] + s.w + 2 || p.x[j] + o.w + 2 \u003c p.x[i]) continue;\n      const dy = p.y[i] + s.h * 0.5 - (p.y[j] + o.h * 0.5);\n      const room = (s.h + o.h) * 0.5 + 2;\n      if (Math.abs(dy) \u003c room) push += (dy >= 0 ? 1 : -1) * (room - Math.abs(dy));\n    }\n  }\n  // A cruising fish takes the new depth as its own, so the two do not drift back together.\n  if (push !== 0 && st === 1 && p.kind[i] !== TETRA && tx \u003c 0) {\n    p.ty[i] = clamp(p.ty[i] + push * dt * 6, SURFACE + 4, FLOOR - 8 - s.h);\n    ty = p.ty[i];\n  } else ty += push * 3;\n  p.vy[i] += ((ty - p.y[i]) * 0.7 - p.vy[i]) * Math.min(1, dt * 1.5);\n  p.vy[i] = clamp(p.vy[i], -s.speed * 0.6, s.speed * 0.6);\n  p.y[i] = clamp(p.y[i] + p.vy[i] * dt, SURFACE + 2, FLOOR - 4 - s.h);\n  if (Math.abs(p.v[i]) > 0.8) p.face[i] = p.v[i] > 0 ? 1 : -1;\n  p.wag[i] += dt * (2.5 + Math.abs(p.v[i]) * 0.35);\n  if (st === 1) p.x[i] = clamp(p.x[i], 0, W - s.w);\n  else if (st === 3 && p.x[i] >= 0 && p.x[i] \u003c= W - s.w) p.state[i] = 1;\n  else if (st === 2 && (p.x[i] \u003c -s.w - 2 || p.x[i] > W + 2)) p.state[i] = 0;\n}\n\nfunction spawnBubble(p, x, y, age) {\n  for (let b = 0; b \u003c BUBBLES; b++) {\n    if (p.by[b] > 0) continue;\n    p.bx[b] = x;\n    p.by[b] = y;\n    p.bage[b] = age;\n    p.bph[b] = Math.random() * 6.28;\n    return;\n  }\n}\n\nfunction stepWorld(p, dt) {\n  p.t += dt;\n  // The school's leader cruises like a fish and turns at the glass.\n  p.lclock -= dt;\n  if (p.lclock \u003c= 0) {\n    p.lclock = 3 + Math.random() * 4;\n    p.lty = SURFACE + 16 + Math.random() * (FLOOR - SURFACE - 40);\n    p.lv = 8 + Math.random() * 6;\n    if (Math.random() \u003c 0.35) p.ldir = -p.ldir;\n  }\n  if (p.lx \u003c 10 && p.ldir \u003c 0) p.ldir = 1;\n  if (p.lx > W - 4 && p.ldir > 0) p.ldir = -1;\n  p.lx += p.ldir * p.lv * dt;\n  p.ly += (p.lty - p.ly) * Math.min(1, dt * 0.6);\n\n  p.claim.fill(0);\n  for (let i = 0; i \u003c MAX_FISH; i++) if (p.state[i]) swim(p, i, dt);\n\n  for (let f = 0; f \u003c FLAKES; f++) {\n    if (p.flakeLife[f] \u003c= 0) continue;\n    const ground = sandTop(clamp(Math.floor(p.fx[f]), 0, W - 1)) - 1;\n    if (p.fy[f] \u003c ground) {\n      p.fy[f] = Math.min(ground, p.fy[f] + dt * (4 + 1.5 * Math.sin(p.t * 3 + f)));\n      p.fx[f] = clamp(p.fx[f] + dt * Math.sin(p.t * 1.7 + f * 2.1) * 2.5, 1, W - 2);\n    } else {\n      p.flakeLife[f] -= dt;\n      if (p.flakeLife[f] \u003c= 0) p.food--;\n    }\n  }\n\n  p.chestClock -= dt;\n  if (p.chestClock \u003c= 0) {\n    if (p.chestOpen > 0) {\n      p.chestOpen = 0;\n      p.chestClock = 4 + Math.random() * 5;\n    } else {\n      p.chestOpen = 1;\n      p.chestClock = 1.3;\n      p.burst = 5 + Math.floor(Math.random() * 4);\n    }\n  }\n  if (p.chestOpen && p.burst > 0) {\n    p.burstClock -= dt;\n    if (p.burstClock \u003c= 0) {\n      p.burstClock = 0.09 + Math.random() * 0.1;\n      p.burst--;\n      spawnBubble(p, CHEST_X + 3.5 + (Math.random() - 0.5) * 4, p.chestY - 1, 1.2 + Math.random() * 1.8);\n    }\n  }\n  // Now and then a fish lets a small bubble go.\n  p.bclock -= dt;\n  if (p.bclock \u003c= 0) {\n    p.bclock = 1.5 + Math.random() * 3;\n    const i = Math.floor(Math.random() * MAX_FISH);\n    if (p.state[i] === 1) {\n      const s = p.sprite[p.kind[i]];\n      spawnBubble(p, p.x[i] + (p.face[i] > 0 ? s.w : -1), p.y[i] + s.h * 0.4, 0);\n    }\n  }\n  for (let b = 0; b \u003c BUBBLES; b++) {\n    if (p.by[b] \u003c= 0) continue;\n    p.bage[b] += dt;\n    p.by[b] -= dt * (13 + Math.min(2, p.bage[b] * 0.5) * 4);\n    if (p.by[b] \u003c= SURFACE + 1) p.by[b] = 0;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.sin = new Float32Array(SIN_N);\n  for (let i = 0; i \u003c SIN_N; i++) p.sin[i] = Math.sin((i / SIN_N) * Math.PI * 2);\n  p.sprite = KINDS.map(bake);\n  p.kind = new Uint8Array(MAX_FISH);\n  for (let i = 0; i \u003c MAX_FISH; i++) p.kind[i] = ORDER[i];\n  p.ox = new Float32Array(MAX_FISH);\n  p.oy = new Float32Array(MAX_FISH);\n  // Each tetra has its own place in the school, three abreast and staggered.\n  let n = 0;\n  for (let i = 0; i \u003c MAX_FISH; i++) {\n    if (p.kind[i] !== TETRA) continue;\n    const col = n % 3;\n    const rank = Math.floor(n / 3);\n    p.ox[i] = 1 + col * 9 + (rank & 1) * 4;\n    p.oy[i] = (col - 1) * 6 + ((rank % 3) - 1) * 2.5;\n    n++;\n  }\n  p.state = new Uint8Array(MAX_FISH);\n  p.x = new Float32Array(MAX_FISH);\n  p.y = new Float32Array(MAX_FISH);\n  p.v = new Float32Array(MAX_FISH);\n  p.vy = new Float32Array(MAX_FISH);\n  p.ty = new Float32Array(MAX_FISH);\n  p.dir = new Int8Array(MAX_FISH);\n  p.face = new Int8Array(MAX_FISH);\n  p.cruise = new Float32Array(MAX_FISH);\n  p.clock = new Float32Array(MAX_FISH);\n  p.wag = new Float32Array(MAX_FISH);\n  p.fx = new Float32Array(FLAKES);\n  p.fy = new Float32Array(FLAKES);\n  p.flakeLife = new Float32Array(FLAKES);\n  p.claim = new Uint8Array(FLAKES);\n  p.food = 0;\n  p.bx = new Float32Array(BUBBLES);\n  p.by = new Float32Array(BUBBLES);\n  p.bage = new Float32Array(BUBBLES);\n  p.bph = new Float32Array(BUBBLES);\n  p.bclock = 1;\n  p.chestOpen = 0;\n  p.chestClock = 1.5;\n  p.burst = 0;\n  p.burstClock = 0;\n  p.chest = bake(CHEST);\n  p.chestY = sandTop(CHEST_X + 4) - 7;\n  p.lx = W / 2;\n  p.ly = 60;\n  p.lty = 60;\n  p.ldir = 1;\n  p.lv = 10;\n  p.lclock = 0;\n  p.t = 0;\n  p.ready = false;\n\n  // The sand, the rocks and where each weed stands never change, so they are baked here.\n  p.ground = new Float32Array(W * H * 3);\n  p.solid = new Uint8Array(W * H);\n  for (let x = 0; x \u003c W; x++) {\n    const top = sandTop(x);\n    for (let y = top; y \u003c H; y++) {\n      const n = hash(x, y);\n      const o = (y * W + x) * 3;\n      const v = 0.5 + 0.18 * n - (y - top) * 0.012 + (y === top ? 0.12 : 0);\n      const pebble = n > 0.93 ? 0.6 : 1;\n      p.ground[o] = 214 * v * pebble;\n      p.ground[o + 1] = 176 * v * pebble;\n      p.ground[o + 2] = 118 * v * (n > 0.97 ? 1.6 : pebble);\n      p.solid[y * W + x] = 1;\n    }\n  }\n  const rocks = [\n    [52, FLOOR - 4, 10, 8],\n    [42, FLOOR - 1, 6, 4.5],\n    [9, FLOOR, 6, 3.5],\n  ];\n  for (const [cx, cy, rx, ry] of rocks) {\n    for (let y = Math.floor(cy - ry); y \u003c= cy + ry; y++) {\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const dx = (x + 0.5 - cx) / rx;\n        const dy = (y + 0.5 - cy) / ry;\n        const d = dx * dx + dy * dy;\n        if (d > 1) continue;\n        // Lit from above left in three flat steps, the way a sprite is shaded by hand.\n        const lit = -dx * 0.5 - dy * 0.8;\n        const step = lit > 0.45 ? 1.25 : lit > -0.25 ? 1 : 0.72;\n        const v = step * (0.92 + 0.12 * hash(x * 7, y * 3));\n        const o = (y * W + x) * 3;\n        p.ground[o] = 104 * v;\n        p.ground[o + 1] = 110 * v;\n        p.ground[o + 2] = 120 * v;\n        p.solid[y * W + x] = 1;\n      }\n    }\n  }\n  p.weedX = new Float32Array(WEEDS);\n  p.weedH = new Float32Array(WEEDS);\n  p.weedPh = new Float32Array(WEEDS);\n  for (let i = 0; i \u003c WEEDS; i++) {\n    p.weedX[i] = WEED_X[i];\n    p.weedH[i] = WEED_H[i];\n    p.weedPh[i] = Math.random() * 6.28;\n  }\n  p.weedStem = new Float32Array(WEEDS * 3);\n  p.weedLeaf = new Float32Array(WEEDS * 3);\n  for (let i = 0; i \u003c WEEDS; i++) {\n    rgbOf(WEED_STEM[i], p.weedStem, i * 3);\n    rgbOf(WEED_LEAF[i], p.weedLeaf, i * 3);\n  }\n  p.row = new Float32Array(H * 3);\n  p.fade = new Float32Array(H);\n  p.buf = new Float32Array(W * H * 3);\n  p.top = new Float32Array(3);\n  p.deep = new Float32Array(3);\n  p.cc = new Float32Array(3);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.water = clamp(k[0], 0, 1);\n  p.light = clamp(k[3], -1, 1);\n  const pace = Math.max(0.05, k[1] * 0.36);\n  const want = Math.round(clamp(k[2], 0, MAX_FISH));\n  if (!p.ready) {\n    p.ready = true;\n    for (let i = 0; i \u003c want; i++) placeFish(p, i, false);\n    p.ly = 40 + Math.random() * 40;\n    p.lty = p.ly;\n    // Fill the bubble column before the first frame.\n    for (let s = 0; s \u003c 120; s++) stepWorld(p, 1 / 30);\n  }\n  for (let i = 0; i \u003c MAX_FISH; i++) {\n    const st = p.state[i];\n    if (i \u003c want && (st === 0 || st === 2)) {\n      if (st === 0) placeFish(p, i, true);\n      else p.state[i] = 1;\n    } else if (i >= want && (st === 1 || st === 3)) {\n      const s = p.sprite[p.kind[i]];\n      p.state[i] = 2;\n      p.dir[i] = p.x[i] + s.w * 0.5 \u003c W / 2 ? -1 : 1;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    const cx = 8 + Math.random() * (W - 16);\n    for (let n = 0; n \u003c 7; n++) {\n      for (let f = 0; f \u003c FLAKES; f++) {\n        if (p.flakeLife[f] > 0) continue;\n        p.fx[f] = cx + (Math.random() - 0.5) * 10;\n        p.fy[f] = SURFACE + 1 + Math.random() * 2;\n        p.flakeLife[f] = 5 + Math.random() * 3;\n        p.food++;\n        break;\n      }\n    }\n  }\n  stepWorld(p, dt * pace);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const buf = p.buf;\n  const L = p.light;\n  const t = p.t;\n\n  // Water: the tint's two colours, darker with depth, and darker still at night.\n  const pos = p.water * (WATERS.length - 1);\n  const a = Math.min(WATERS.length - 2, Math.floor(pos));\n  const u = pos - a;\n  const top = p.top;\n  const deep = p.deep;\n  for (let c = 0; c \u003c 3; c++) {\n    const sh = 16 - c * 8;\n    top[c] = ((WATERS[a][0] >> sh) & 255) * (1 - u) + ((WATERS[a + 1][0] >> sh) & 255) * u;\n    deep[c] = ((WATERS[a][1] >> sh) & 255) * (1 - u) + ((WATERS[a + 1][1] >> sh) & 255) * u;\n  }\n  const lamp = L \u003c 0 ? 1 + 0.62 * L : 1;\n  const dark = 0.5 - 0.25 * L;\n  const glint = L \u003c 0 ? 0.4 * (1 + L) : 0.4 + 0.25 * L;\n  const reach = 17 + 60 * Math.max(0, L);\n  const cc = p.cc;\n  for (let c = 0; c \u003c 3; c++) cc[c] = 150 + top[c] * 0.45;\n  const row = p.row;\n  const fade = p.fade;\n  for (let y = 0; y \u003c H; y++) {\n    const d = clamp((y - SURFACE) / (FLOOR - SURFACE), 0, 1);\n    const v = 0.5 * lamp * (1 - dark * d);\n    for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = (top[c] * (1 - d) + deep[c] * d) * v;\n    fade[y] = glint * Math.exp(-(y - SURFACE) / reach);\n  }\n\n  const sandLight = 0.55 + 0.45 * lamp - 0.15 * Math.max(0, -L);\n  for (let y = 0; y \u003c H; y++) {\n    const f = fade[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const o = i * 3;\n      let r;\n      let g;\n      let b;\n      if (y \u003c SURFACE) {\n        r = 0;\n        g = 0;\n        b = 0;\n      } else if (p.solid[i]) {\n        r = p.ground[o] * sandLight;\n        g = p.ground[o + 1] * sandLight;\n        b = p.ground[o + 2] * sandLight;\n      } else {\n        r = row[y * 3];\n        g = row[y * 3 + 1];\n        b = row[y * 3 + 2];\n      }\n      if (y >= SURFACE && f > 0.03) {\n        // The net of light: bright where three slow waves cancel, cut into two flat steps.\n        const w1 = sinAt(p, x * 0.55 + t * 0.55 + 1.6 * sinAt(p, y * 0.17 + t * 0.3));\n        const w2 = sinAt(p, x * 0.31 - y * 0.42 - t * 0.45);\n        const w3 = sinAt(p, x * 0.16 + y * 0.27 + t * 0.23);\n        const s = 1 - Math.abs(w1 + w2 + w3 * 0.7) * 2.3;\n        if (s > 0) {\n          const step = (s > 0.45 ? 1 : 0.4) * f;\n          r += cc[0] * step;\n          g += cc[1] * step;\n          b += cc[2] * step;\n        }\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n\n  // The surface: a pale line that lifts a LED where a ripple passes.\n  for (let x = 0; x \u003c W; x++) {\n    const lift = sinAt(p, x * 0.35 - t * 2.1) + sinAt(p, x * 0.17 + t * 1.3) > 1.1 ? 1 : 0;\n    const o = ((SURFACE - lift) * W + x) * 3;\n    const v = 0.35 + 0.4 * lamp;\n    buf[o] = 120 * v + top[0] * 0.5;\n    buf[o + 1] = 150 * v + top[1] * 0.5;\n    buf[o + 2] = 170 * v + top[2] * 0.5;\n  }\n\n  const plant = 0.45 + 0.55 * lamp;\n  for (let i = 0; i \u003c WEEDS; i++) if (i !== 1 && i !== 5) drawWeed(p, i, plant);\n  drawSprite(p, p.chest, CHEST_X, p.chestY, p.chestOpen, true, 0.5 + 0.5 * lamp);\n\n  const fishLight = 0.5 + 0.5 * lamp;\n  // The school swims furthest back and the clownfish nearest, so a fish crossing another reads as depth.\n  for (let n = 0; n \u003c DRAW_ORDER.length; n++) {\n    const kind = DRAW_ORDER[n];\n    for (let i = 0; i \u003c MAX_FISH; i++) if (p.state[i] && p.kind[i] === kind) drawFish(p, i, fishLight);\n  }\n\n  // Two weeds stand in front of the fish, so a fish can pass behind them.\n  drawWeed(p, 1, plant);\n  drawWeed(p, 5, plant);\n\n  for (let f = 0; f \u003c FLAKES; f++) {\n    if (p.flakeLife[f] \u003c= 0) continue;\n    put(buf, Math.floor(p.fx[f]), Math.floor(p.fy[f]), 255 * fishLight, 196 * fishLight, 96 * fishLight);\n  }\n\n  for (let bI = 0; bI \u003c BUBBLES; bI++) {\n    const by = p.by[bI];\n    if (by \u003c= 0) continue;\n    const bx = p.bx[bI] + 1.1 * sinAt(p, p.bph[bI] + by * 0.27);\n    const size = p.bage[bI] \u003c 1.2 ? 0 : p.bage[bI] \u003c 2.8 ? 1 : 2;\n    const v = 0.55 + 0.35 * lamp;\n    if (size === 0) splat(buf, bx, by, 170 * v, 220 * v, 255 * v, 1);\n    else ring(buf, Math.round(bx), Math.round(by), size, 170 * v, 220 * v, 255 * v);\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// A point shared over its four nearest LEDs, so it glides instead of hopping.\nfunction splat(buf, px, py, r, g, b, amount) {\n  const x0 = Math.floor(px - 0.5);\n  const y0 = Math.floor(py - 0.5);\n  for (let yy = y0; yy \u003c= y0 + 1; yy++) {\n    if (yy \u003c SURFACE || yy >= H) continue;\n    const wy = 1 - Math.abs(yy + 0.5 - py);\n    for (let xx = x0; xx \u003c= x0 + 1; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = wy * (1 - Math.abs(xx + 0.5 - px)) * amount;\n      if (w \u003c= 0) continue;\n      const o = (yy * W + xx) * 3;\n      buf[o] += (r - buf[o]) * w;\n      buf[o + 1] += (g - buf[o + 1]) * w;\n      buf[o + 2] += (b - buf[o + 2]) * w;\n    }\n  }\n}\n\n// A bubble: a diamond of four LEDs, or a round one of eight with a glint.\nfunction ring(buf, cx, cy, size, r, g, b) {\n  if (size === 1) {\n    put(buf, cx, cy - 1, r, g, b);\n    put(buf, cx - 1, cy, r, g, b);\n    put(buf, cx + 1, cy, r, g, b);\n    put(buf, cx, cy + 1, r, g, b);\n  } else {\n    put(buf, cx, cy - 1, r, g, b);\n    put(buf, cx + 1, cy - 1, r, g, b);\n    put(buf, cx - 1, cy, r, g, b);\n    put(buf, cx + 2, cy, r, g, b);\n    put(buf, cx - 1, cy + 1, r, g, b);\n    put(buf, cx + 2, cy + 1, r, g, b);\n    put(buf, cx, cy + 2, r, g, b);\n    put(buf, cx + 1, cy + 2, r, g, b);\n    put(buf, cx, cy, 255, 255, 255);\n  }\n}\n\nfunction drawFish(p, i, light) {\n  drawSprite(p, p.sprite[p.kind[i]], Math.round(p.x[i]), Math.round(p.y[i]), Math.floor(p.wag[i]) & 1, p.face[i] > 0, light);\n}\n\nfunction drawSprite(p, s, ix, iy, frame, right, light) {\n  const buf = p.buf;\n  const base = frame * s.w * s.h;\n  for (let y = 0; y \u003c s.h; y++) {\n    const yy = iy + y;\n    if (yy \u003c SURFACE || yy >= H) continue;\n    for (let x = 0; x \u003c s.w; x++) {\n      const c = s.pix[base + y * s.w + x];\n      if (!c) continue;\n      const xx = ix + (right ? x : s.w - 1 - x);\n      if (xx \u003c 0 || xx >= W) continue;\n      const o = (yy * W + xx) * 3;\n      buf[o] = s.pal[c * 3] * light;\n      buf[o + 1] = s.pal[c * 3 + 1] * light;\n      buf[o + 2] = s.pal[c * 3 + 2] * light;\n    }\n  }\n}\n\nfunction drawWeed(p, i, light) {\n  const buf = p.buf;\n  const h = p.weedH[i];\n  const bx = p.weedX[i];\n  const base = sandTop(bx) + 1;\n  const sr = p.weedStem[i * 3] * light;\n  const sg = p.weedStem[i * 3 + 1] * light;\n  const sb = p.weedStem[i * 3 + 2] * light;\n  const lr = p.weedLeaf[i * 3] * light;\n  const lg = p.weedLeaf[i * 3 + 1] * light;\n  const lb = p.weedLeaf[i * 3 + 2] * light;\n  const t = p.t;\n  for (let r = 0; r \u003c h; r++) {\n    const y = base - r;\n    if (y \u003c SURFACE + 2) break;\n    const s = r / h;\n    // The tip sways most, and the sway runs up the stem a little late.\n    const off = 4.2 * s * s * sinAt(p, t * 0.85 + p.weedPh[i] - s * 2.4);\n    const x = Math.round(bx + off);\n    put(buf, x, y, sr, sg, sb);\n    if (r \u003c h - 8) put(buf, x + 1, y, sr, sg, sb);\n    const gap = WEED_GAP[i];\n    if (r > 3 && r % gap === 0 && r \u003c h - 2) {\n      const side = (r / gap) & 1 ? 1 : -1;\n      const lx = side > 0 ? x + (r \u003c h - 8 ? 2 : 1) : x - 1;\n      put(buf, lx, y, lr, lg, lb);\n      put(buf, lx + side, y - 1, lr, lg, lb);\n      // Lower leaves are longer.\n      if (s \u003c 0.6) put(buf, lx + side * 2, y - 2, lr, lg, lb);\n    }\n  }\n}\n","layer":{"id":"layer-aquarium","type":"code","name":"aquarium","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Aquarium\n// Family:  pixel\n// Idea:    A tall tank in hand-drawn sprites: clownfish, a tang, an angelfish and a school of neon tetras wag their tails across it and turn at the glass, weed sways from the sand, bubbles climb from a stone and the surface throws a moving net of light down the water.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Swim=0.2..4, Fish=6..18, Light=-1..1\n//\n// Knob 1: Water. The tint of the water, from clear blue through lagoon teal and planted green to tea-brown blackwater and violet.\n// Knob 2: Swim. How fast the whole tank moves, fish, weed, bubbles and light, from slow motion to a feeding rush.\n// Knob 3: Fish. How many fish live in the tank; new ones swim in from the side and spare ones swim out.\n// Knob 4: Light. Below 0 the lamp dims towards night and the deep water goes dark; above 0 the sun is out and the net of light reaches the sand.\n// Buttons: K1 tap drops a pinch of food at the surface, and every fish goes for it.\n\nconst W = 64;\nconst H = 128;\n// The water line; above it is the air under the lid.\nconst SURFACE = 7;\n// The mean height of the sand.\nconst FLOOR = 117;\nconst MAX_FISH = 18;\nconst FLAKES = 24;\nconst BUBBLES = 40;\nconst WEEDS = 6;\nconst SIN_N = 1024;\nconst SIN_K = SIN_N / (Math.PI * 2);\n\nconst CLOWN = 0;\nconst TANG = 1;\nconst ANGEL = 2;\nconst TETRA = 3;\n\n// Sprites face right. Two frames each: the tail spread, then edge-on.\nconst KINDS = [\n  {\n    pal: { o: 0xff6810, w: 0xf6f4ee, f: 0xc83c06, k: 0x101010 },\n    speed: 9,\n    a: [\n      \"......ff....\",\n      \"f...wooowo..\",\n      \"ff.owooowok.\",\n      \"fffowooowooo\",\n      \"ff.owooowoo.\",\n      \"f...wooowo..\",\n      \"......f.....\",\n    ],\n    b: [\n      \"......ff....\",\n      \"....wooowo..\",\n      \"f..owooowok.\",\n      \"ffffwooowooo\",\n      \"f..owooowoo.\",\n      \"....wooowo..\",\n      \".....f......\",\n    ],\n  },\n  {\n    pal: { b: 0x1e5cff, n: 0x0c1c78, y: 0xffd21a, l: 0x6aa8ff, k: 0x080808 },\n    speed: 11,\n    a: [\n      \".....lllll...\",\n      \"y..lbbbbbbb..\",\n      \"yy.bnnnbbbbb.\",\n      \"yyybbbnnnbbkb\",\n      \"yyybbbbbnnbbb\",\n      \"yy.bbbbbbnbb.\",\n      \"y..lbbbbbbb..\",\n      \".....lllll...\",\n    ],\n    b: [\n      \".....lllll...\",\n      \"...lbbbbbbb..\",\n      \"y..bnnnbbbbb.\",\n      \"yyybbbnnnbbkb\",\n      \"yyybbbbbnnbbb\",\n      \"y..bbbbbbnbb.\",\n      \"...lbbbbbbb..\",\n      \".....lllll...\",\n    ],\n  },\n  {\n    pal: { s: 0xdce6f0, d: 0x46505e, f: 0xa8bccc, k: 0x0a0a0a, a: 0xf2cc50 },\n    speed: 6,\n    a: [\n      \"...f.......\",\n      \"...ff......\",\n      \"....ff.....\",\n      \"....fss....\",\n      \"...sdssa...\",\n      \"f.ssdssds..\",\n      \"ffssdssdsks\",\n      \"f.ssdssds..\",\n      \"...sdsss...\",\n      \"....fss....\",\n      \"....ff.....\",\n      \"...ff......\",\n      \"...f.......\",\n    ],\n    b: [\n      \"....f......\",\n      \"...ff......\",\n      \"...ff......\",\n      \"....fss....\",\n      \"...sdssa...\",\n      \"..ssdssds..\",\n      \"fsssdssdsks\",\n      \"..ssdssds..\",\n      \"...sdsss...\",\n      \"....fss....\",\n      \"...ff......\",\n      \"...ff......\",\n      \"....f......\",\n    ],\n  },\n  {\n    pal: { s: 0xc4ccd6, t: 0x22d4ff, r: 0xff2234, k: 0x0a0a0a },\n    speed: 13,\n    a: [\n      \"...sss..\",\n      \"s.ttttks\",\n      \"ssrrrsss\",\n      \"s..sss..\",\n    ],\n    b: [\n      \"...sss..\",\n      \"..ttttks\",\n      \"ssrrrsss\",\n      \"...sss..\",\n    ],\n  },\n];\n\n// The chest on the sand, shut and open. Every few seconds its lid lifts and lets out a burst of air.\nconst CHEST = {\n  pal: { g: 0xe8b42a, w: 0x8c4c1a, d: 0x5a2c0c, y: 0xfff09a },\n  a: [\n    \".........\",\n    \".........\",\n    \".ggggggg.\",\n    \"gwwwwwwwg\",\n    \"ggggkgggg\",\n    \"gwwwgwwwg\",\n    \"gdddgdddg\",\n    \"ggggggggg\",\n  ],\n  b: [\n    \".ggggggg.\",\n    \"gwwwwwwwg\",\n    \".gyyyyyg.\",\n    \"gyyyyyyyg\",\n    \"ggggggggg\",\n    \"gwwwgwwwg\",\n    \"gdddgdddg\",\n    \"ggggggggg\",\n  ],\n};\nconst CHEST_X = 28;\n\nconst DRAW_ORDER = [TETRA, ANGEL, TANG, CLOWN];\n\n// Which kind each fish is, in the order they arrive as the knob turns up.\nconst ORDER = [CLOWN, ANGEL, TETRA, TETRA, TANG, TETRA, TETRA, CLOWN, TETRA, ANGEL, TETRA, TETRA, TANG, TETRA, CLOWN, TETRA, TETRA, ANGEL];\n\n// Water at the top and at the bottom of the tank, one pair per tint.\nconst WATERS = [\n  [0x2a7ce0, 0x0c2a78],\n  [0x18b0b4, 0x084450],\n  [0x50a83a, 0x123c16],\n  [0xc08428, 0x3c1c08],\n  [0x8456dc, 0x24104e],\n];\n\nconst WEED_STEM = [0x1c8a2a, 0x1c8a2a, 0x8a1e3c, 0x6a9418, 0x1c8a2a, 0x1c8a2a];\nconst WEED_LEAF = [0x46cc4e, 0x46cc4e, 0xe0506e, 0xa8d030, 0x46cc4e, 0x46cc4e];\nconst WEED_X = [4, 16, 26, 45, 57, 62];\nconst WEED_H = [66, 40, 84, 30, 94, 52];\n// Rows between leaves, so no two weeds look stamped from one.\nconst WEED_GAP = [6, 5, 4, 7, 6, 5];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, lo, hi) {\n  return v \u003c lo ? lo : v > hi ? hi : v;\n}\n\nfunction rgbOf(c, out, o) {\n  out[o] = (c >> 16) & 255;\n  out[o + 1] = (c >> 8) & 255;\n  out[o + 2] = c & 255;\n}\n\n// Turns the sprite strings into palette indices once, so the draw loop only reads numbers.\nfunction bake(kind) {\n  const keys = Object.keys(kind.pal);\n  const h = kind.a.length;\n  const w = kind.a[0].length;\n  const pix = new Uint8Array(2 * w * h);\n  const frames = [kind.a, kind.b];\n  for (let f = 0; f \u003c 2; f++)\n    for (let y = 0; y \u003c h; y++)\n      for (let x = 0; x \u003c w; x++) pix[f * w * h + y * w + x] = keys.indexOf(frames[f][y][x]) + 1;\n  const pal = new Float32Array((keys.length + 1) * 3);\n  for (let i = 0; i \u003c keys.length; i++) rgbOf(kind.pal[keys[i]], pal, (i + 1) * 3);\n  return { w, h, pix, pal, speed: kind.speed };\n}\n\nfunction sinAt(p, a) {\n  return p.sin[Math.floor(a * SIN_K) & (SIN_N - 1)];\n}\n\nfunction sandTop(x) {\n  return FLOOR + Math.round(1.6 * Math.sin(x * 0.13 + 0.7) + 0.9 * Math.sin(x * 0.41 + 2));\n}\n\nfunction newCruise(p, i) {\n  const s = p.sprite[p.kind[i]];\n  p.cruise[i] = 0.6 + Math.random() * 0.6;\n  p.ty[i] = SURFACE + 6 + Math.random() * (FLOOR - SURFACE - 16 - s.h);\n  p.clock[i] = 2 + Math.random() * 5;\n}\n\nfunction placeFish(p, i, entering) {\n  const s = p.sprite[p.kind[i]];\n  p.state[i] = entering ? 3 : 1;\n  const dir = Math.random() \u003c 0.5 ? -1 : 1;\n  p.dir[i] = dir;\n  if (entering) p.x[i] = dir > 0 ? -s.w - 1 : W + 1;\n  else p.x[i] = 1 + Math.random() * (W - s.w - 2);\n  newCruise(p, i);\n  p.y[i] = entering ? p.ty[i] : SURFACE + 6 + Math.random() * (FLOOR - SURFACE - 16 - s.h);\n  p.v[i] = dir * s.speed * p.cruise[i];\n  p.vy[i] = 0;\n  p.face[i] = dir;\n  p.wag[i] = Math.random() * 2;\n}\n\nfunction swim(p, i, dt) {\n  const s = p.sprite[p.kind[i]];\n  const st = p.state[i];\n  let target;\n  let ty = p.ty[i];\n  let tx = -1;\n  if (st === 1 && p.food > 0) {\n    // Nearest flake, from the mouth.\n    const mx = p.x[i] + (p.face[i] > 0 ? s.w : 0);\n    const my = p.y[i] + s.h * 0.5;\n    let best = 1e9;\n    let bi = -1;\n    for (let f = 0; f \u003c FLAKES; f++) {\n      if (p.flakeLife[f] \u003c= 0) continue;\n      const dx = p.fx[f] - mx;\n      const dy = p.fy[f] - my;\n      // A flake another fish is already after counts as further away, so a pinch spreads the fish out.\n      const d = dx * dx + dy * dy + (p.claim[f] ? 400 : 0);\n      if (d \u003c best) {\n        best = d;\n        bi = f;\n      }\n    }\n    if (bi >= 0) {\n      p.claim[bi] = 1;\n      if (best \u003c 6) {\n        p.flakeLife[bi] = 0;\n        p.food--;\n      } else {\n        tx = p.fx[bi] - (p.face[i] > 0 ? s.w : 0);\n        ty = p.fy[bi] - s.h * 0.5;\n      }\n    }\n  }\n  if (tx >= 0) {\n    target = clamp((tx - p.x[i]) * 2, -s.speed * 1.9, s.speed * 1.9);\n  } else if (st === 1 && p.kind[i] === TETRA) {\n    // Tetras keep station behind a leader nobody sees, so they turn as one.\n    tx = p.lx - p.ldir * p.ox[i];\n    ty = p.ly + p.oy[i];\n    target = p.ldir * p.lv + (tx - p.x[i]) * 1.2;\n    target = clamp(target, -s.speed * 1.6, s.speed * 1.6);\n  } else {\n    if (st === 1) {\n      p.clock[i] -= dt;\n      if (p.clock[i] \u003c= 0) {\n        newCruise(p, i);\n        if (Math.random() \u003c 0.3) p.dir[i] = -p.dir[i];\n      }\n      const m = 2 + Math.abs(p.v[i]) * 0.5;\n      if (p.x[i] \u003c m && p.dir[i] \u003c 0) p.dir[i] = 1;\n      if (p.x[i] > W - s.w - m && p.dir[i] > 0) p.dir[i] = -1;\n    }\n    target = p.dir[i] * s.speed * (st === 2 ? 1.4 : p.cruise[i]);\n  }\n  p.v[i] += (target - p.v[i]) * Math.min(1, dt * 2.2);\n  p.x[i] += p.v[i] * dt;\n  // Fish that share a stretch of water drift apart in depth instead of swimming through each other.\n  let push = 0;\n  if (p.food \u003c= 0) {\n    for (let j = 0; j \u003c MAX_FISH; j++) {\n      if (j === i || !p.state[j]) continue;\n      if (p.kind[i] === TETRA && p.kind[j] === TETRA) continue;\n      const o = p.sprite[p.kind[j]];\n      if (p.x[j] > p.x[i] + s.w + 2 || p.x[j] + o.w + 2 \u003c p.x[i]) continue;\n      const dy = p.y[i] + s.h * 0.5 - (p.y[j] + o.h * 0.5);\n      const room = (s.h + o.h) * 0.5 + 2;\n      if (Math.abs(dy) \u003c room) push += (dy >= 0 ? 1 : -1) * (room - Math.abs(dy));\n    }\n  }\n  // A cruising fish takes the new depth as its own, so the two do not drift back together.\n  if (push !== 0 && st === 1 && p.kind[i] !== TETRA && tx \u003c 0) {\n    p.ty[i] = clamp(p.ty[i] + push * dt * 6, SURFACE + 4, FLOOR - 8 - s.h);\n    ty = p.ty[i];\n  } else ty += push * 3;\n  p.vy[i] += ((ty - p.y[i]) * 0.7 - p.vy[i]) * Math.min(1, dt * 1.5);\n  p.vy[i] = clamp(p.vy[i], -s.speed * 0.6, s.speed * 0.6);\n  p.y[i] = clamp(p.y[i] + p.vy[i] * dt, SURFACE + 2, FLOOR - 4 - s.h);\n  if (Math.abs(p.v[i]) > 0.8) p.face[i] = p.v[i] > 0 ? 1 : -1;\n  p.wag[i] += dt * (2.5 + Math.abs(p.v[i]) * 0.35);\n  if (st === 1) p.x[i] = clamp(p.x[i], 0, W - s.w);\n  else if (st === 3 && p.x[i] >= 0 && p.x[i] \u003c= W - s.w) p.state[i] = 1;\n  else if (st === 2 && (p.x[i] \u003c -s.w - 2 || p.x[i] > W + 2)) p.state[i] = 0;\n}\n\nfunction spawnBubble(p, x, y, age) {\n  for (let b = 0; b \u003c BUBBLES; b++) {\n    if (p.by[b] > 0) continue;\n    p.bx[b] = x;\n    p.by[b] = y;\n    p.bage[b] = age;\n    p.bph[b] = Math.random() * 6.28;\n    return;\n  }\n}\n\nfunction stepWorld(p, dt) {\n  p.t += dt;\n  // The school's leader cruises like a fish and turns at the glass.\n  p.lclock -= dt;\n  if (p.lclock \u003c= 0) {\n    p.lclock = 3 + Math.random() * 4;\n    p.lty = SURFACE + 16 + Math.random() * (FLOOR - SURFACE - 40);\n    p.lv = 8 + Math.random() * 6;\n    if (Math.random() \u003c 0.35) p.ldir = -p.ldir;\n  }\n  if (p.lx \u003c 10 && p.ldir \u003c 0) p.ldir = 1;\n  if (p.lx > W - 4 && p.ldir > 0) p.ldir = -1;\n  p.lx += p.ldir * p.lv * dt;\n  p.ly += (p.lty - p.ly) * Math.min(1, dt * 0.6);\n\n  p.claim.fill(0);\n  for (let i = 0; i \u003c MAX_FISH; i++) if (p.state[i]) swim(p, i, dt);\n\n  for (let f = 0; f \u003c FLAKES; f++) {\n    if (p.flakeLife[f] \u003c= 0) continue;\n    const ground = sandTop(clamp(Math.floor(p.fx[f]), 0, W - 1)) - 1;\n    if (p.fy[f] \u003c ground) {\n      p.fy[f] = Math.min(ground, p.fy[f] + dt * (4 + 1.5 * Math.sin(p.t * 3 + f)));\n      p.fx[f] = clamp(p.fx[f] + dt * Math.sin(p.t * 1.7 + f * 2.1) * 2.5, 1, W - 2);\n    } else {\n      p.flakeLife[f] -= dt;\n      if (p.flakeLife[f] \u003c= 0) p.food--;\n    }\n  }\n\n  p.chestClock -= dt;\n  if (p.chestClock \u003c= 0) {\n    if (p.chestOpen > 0) {\n      p.chestOpen = 0;\n      p.chestClock = 4 + Math.random() * 5;\n    } else {\n      p.chestOpen = 1;\n      p.chestClock = 1.3;\n      p.burst = 5 + Math.floor(Math.random() * 4);\n    }\n  }\n  if (p.chestOpen && p.burst > 0) {\n    p.burstClock -= dt;\n    if (p.burstClock \u003c= 0) {\n      p.burstClock = 0.09 + Math.random() * 0.1;\n      p.burst--;\n      spawnBubble(p, CHEST_X + 3.5 + (Math.random() - 0.5) * 4, p.chestY - 1, 1.2 + Math.random() * 1.8);\n    }\n  }\n  // Now and then a fish lets a small bubble go.\n  p.bclock -= dt;\n  if (p.bclock \u003c= 0) {\n    p.bclock = 1.5 + Math.random() * 3;\n    const i = Math.floor(Math.random() * MAX_FISH);\n    if (p.state[i] === 1) {\n      const s = p.sprite[p.kind[i]];\n      spawnBubble(p, p.x[i] + (p.face[i] > 0 ? s.w : -1), p.y[i] + s.h * 0.4, 0);\n    }\n  }\n  for (let b = 0; b \u003c BUBBLES; b++) {\n    if (p.by[b] \u003c= 0) continue;\n    p.bage[b] += dt;\n    p.by[b] -= dt * (13 + Math.min(2, p.bage[b] * 0.5) * 4);\n    if (p.by[b] \u003c= SURFACE + 1) p.by[b] = 0;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.sin = new Float32Array(SIN_N);\n  for (let i = 0; i \u003c SIN_N; i++) p.sin[i] = Math.sin((i / SIN_N) * Math.PI * 2);\n  p.sprite = KINDS.map(bake);\n  p.kind = new Uint8Array(MAX_FISH);\n  for (let i = 0; i \u003c MAX_FISH; i++) p.kind[i] = ORDER[i];\n  p.ox = new Float32Array(MAX_FISH);\n  p.oy = new Float32Array(MAX_FISH);\n  // Each tetra has its own place in the school, three abreast and staggered.\n  let n = 0;\n  for (let i = 0; i \u003c MAX_FISH; i++) {\n    if (p.kind[i] !== TETRA) continue;\n    const col = n % 3;\n    const rank = Math.floor(n / 3);\n    p.ox[i] = 1 + col * 9 + (rank & 1) * 4;\n    p.oy[i] = (col - 1) * 6 + ((rank % 3) - 1) * 2.5;\n    n++;\n  }\n  p.state = new Uint8Array(MAX_FISH);\n  p.x = new Float32Array(MAX_FISH);\n  p.y = new Float32Array(MAX_FISH);\n  p.v = new Float32Array(MAX_FISH);\n  p.vy = new Float32Array(MAX_FISH);\n  p.ty = new Float32Array(MAX_FISH);\n  p.dir = new Int8Array(MAX_FISH);\n  p.face = new Int8Array(MAX_FISH);\n  p.cruise = new Float32Array(MAX_FISH);\n  p.clock = new Float32Array(MAX_FISH);\n  p.wag = new Float32Array(MAX_FISH);\n  p.fx = new Float32Array(FLAKES);\n  p.fy = new Float32Array(FLAKES);\n  p.flakeLife = new Float32Array(FLAKES);\n  p.claim = new Uint8Array(FLAKES);\n  p.food = 0;\n  p.bx = new Float32Array(BUBBLES);\n  p.by = new Float32Array(BUBBLES);\n  p.bage = new Float32Array(BUBBLES);\n  p.bph = new Float32Array(BUBBLES);\n  p.bclock = 1;\n  p.chestOpen = 0;\n  p.chestClock = 1.5;\n  p.burst = 0;\n  p.burstClock = 0;\n  p.chest = bake(CHEST);\n  p.chestY = sandTop(CHEST_X + 4) - 7;\n  p.lx = W / 2;\n  p.ly = 60;\n  p.lty = 60;\n  p.ldir = 1;\n  p.lv = 10;\n  p.lclock = 0;\n  p.t = 0;\n  p.ready = false;\n\n  // The sand, the rocks and where each weed stands never change, so they are baked here.\n  p.ground = new Float32Array(W * H * 3);\n  p.solid = new Uint8Array(W * H);\n  for (let x = 0; x \u003c W; x++) {\n    const top = sandTop(x);\n    for (let y = top; y \u003c H; y++) {\n      const n = hash(x, y);\n      const o = (y * W + x) * 3;\n      const v = 0.5 + 0.18 * n - (y - top) * 0.012 + (y === top ? 0.12 : 0);\n      const pebble = n > 0.93 ? 0.6 : 1;\n      p.ground[o] = 214 * v * pebble;\n      p.ground[o + 1] = 176 * v * pebble;\n      p.ground[o + 2] = 118 * v * (n > 0.97 ? 1.6 : pebble);\n      p.solid[y * W + x] = 1;\n    }\n  }\n  const rocks = [\n    [52, FLOOR - 4, 10, 8],\n    [42, FLOOR - 1, 6, 4.5],\n    [9, FLOOR, 6, 3.5],\n  ];\n  for (const [cx, cy, rx, ry] of rocks) {\n    for (let y = Math.floor(cy - ry); y \u003c= cy + ry; y++) {\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const dx = (x + 0.5 - cx) / rx;\n        const dy = (y + 0.5 - cy) / ry;\n        const d = dx * dx + dy * dy;\n        if (d > 1) continue;\n        // Lit from above left in three flat steps, the way a sprite is shaded by hand.\n        const lit = -dx * 0.5 - dy * 0.8;\n        const step = lit > 0.45 ? 1.25 : lit > -0.25 ? 1 : 0.72;\n        const v = step * (0.92 + 0.12 * hash(x * 7, y * 3));\n        const o = (y * W + x) * 3;\n        p.ground[o] = 104 * v;\n        p.ground[o + 1] = 110 * v;\n        p.ground[o + 2] = 120 * v;\n        p.solid[y * W + x] = 1;\n      }\n    }\n  }\n  p.weedX = new Float32Array(WEEDS);\n  p.weedH = new Float32Array(WEEDS);\n  p.weedPh = new Float32Array(WEEDS);\n  for (let i = 0; i \u003c WEEDS; i++) {\n    p.weedX[i] = WEED_X[i];\n    p.weedH[i] = WEED_H[i];\n    p.weedPh[i] = Math.random() * 6.28;\n  }\n  p.weedStem = new Float32Array(WEEDS * 3);\n  p.weedLeaf = new Float32Array(WEEDS * 3);\n  for (let i = 0; i \u003c WEEDS; i++) {\n    rgbOf(WEED_STEM[i], p.weedStem, i * 3);\n    rgbOf(WEED_LEAF[i], p.weedLeaf, i * 3);\n  }\n  p.row = new Float32Array(H * 3);\n  p.fade = new Float32Array(H);\n  p.buf = new Float32Array(W * H * 3);\n  p.top = new Float32Array(3);\n  p.deep = new Float32Array(3);\n  p.cc = new Float32Array(3);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.water = clamp(k[0], 0, 1);\n  p.light = clamp(k[3], -1, 1);\n  const pace = Math.max(0.05, k[1] * 0.36);\n  const want = Math.round(clamp(k[2], 0, MAX_FISH));\n  if (!p.ready) {\n    p.ready = true;\n    for (let i = 0; i \u003c want; i++) placeFish(p, i, false);\n    p.ly = 40 + Math.random() * 40;\n    p.lty = p.ly;\n    // Fill the bubble column before the first frame.\n    for (let s = 0; s \u003c 120; s++) stepWorld(p, 1 / 30);\n  }\n  for (let i = 0; i \u003c MAX_FISH; i++) {\n    const st = p.state[i];\n    if (i \u003c want && (st === 0 || st === 2)) {\n      if (st === 0) placeFish(p, i, true);\n      else p.state[i] = 1;\n    } else if (i >= want && (st === 1 || st === 3)) {\n      const s = p.sprite[p.kind[i]];\n      p.state[i] = 2;\n      p.dir[i] = p.x[i] + s.w * 0.5 \u003c W / 2 ? -1 : 1;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    const cx = 8 + Math.random() * (W - 16);\n    for (let n = 0; n \u003c 7; n++) {\n      for (let f = 0; f \u003c FLAKES; f++) {\n        if (p.flakeLife[f] > 0) continue;\n        p.fx[f] = cx + (Math.random() - 0.5) * 10;\n        p.fy[f] = SURFACE + 1 + Math.random() * 2;\n        p.flakeLife[f] = 5 + Math.random() * 3;\n        p.food++;\n        break;\n      }\n    }\n  }\n  stepWorld(p, dt * pace);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const buf = p.buf;\n  const L = p.light;\n  const t = p.t;\n\n  // Water: the tint's two colours, darker with depth, and darker still at night.\n  const pos = p.water * (WATERS.length - 1);\n  const a = Math.min(WATERS.length - 2, Math.floor(pos));\n  const u = pos - a;\n  const top = p.top;\n  const deep = p.deep;\n  for (let c = 0; c \u003c 3; c++) {\n    const sh = 16 - c * 8;\n    top[c] = ((WATERS[a][0] >> sh) & 255) * (1 - u) + ((WATERS[a + 1][0] >> sh) & 255) * u;\n    deep[c] = ((WATERS[a][1] >> sh) & 255) * (1 - u) + ((WATERS[a + 1][1] >> sh) & 255) * u;\n  }\n  const lamp = L \u003c 0 ? 1 + 0.62 * L : 1;\n  const dark = 0.5 - 0.25 * L;\n  const glint = L \u003c 0 ? 0.4 * (1 + L) : 0.4 + 0.25 * L;\n  const reach = 17 + 60 * Math.max(0, L);\n  const cc = p.cc;\n  for (let c = 0; c \u003c 3; c++) cc[c] = 150 + top[c] * 0.45;\n  const row = p.row;\n  const fade = p.fade;\n  for (let y = 0; y \u003c H; y++) {\n    const d = clamp((y - SURFACE) / (FLOOR - SURFACE), 0, 1);\n    const v = 0.5 * lamp * (1 - dark * d);\n    for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = (top[c] * (1 - d) + deep[c] * d) * v;\n    fade[y] = glint * Math.exp(-(y - SURFACE) / reach);\n  }\n\n  const sandLight = 0.55 + 0.45 * lamp - 0.15 * Math.max(0, -L);\n  for (let y = 0; y \u003c H; y++) {\n    const f = fade[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const o = i * 3;\n      let r;\n      let g;\n      let b;\n      if (y \u003c SURFACE) {\n        r = 0;\n        g = 0;\n        b = 0;\n      } else if (p.solid[i]) {\n        r = p.ground[o] * sandLight;\n        g = p.ground[o + 1] * sandLight;\n        b = p.ground[o + 2] * sandLight;\n      } else {\n        r = row[y * 3];\n        g = row[y * 3 + 1];\n        b = row[y * 3 + 2];\n      }\n      if (y >= SURFACE && f > 0.03) {\n        // The net of light: bright where three slow waves cancel, cut into two flat steps.\n        const w1 = sinAt(p, x * 0.55 + t * 0.55 + 1.6 * sinAt(p, y * 0.17 + t * 0.3));\n        const w2 = sinAt(p, x * 0.31 - y * 0.42 - t * 0.45);\n        const w3 = sinAt(p, x * 0.16 + y * 0.27 + t * 0.23);\n        const s = 1 - Math.abs(w1 + w2 + w3 * 0.7) * 2.3;\n        if (s > 0) {\n          const step = (s > 0.45 ? 1 : 0.4) * f;\n          r += cc[0] * step;\n          g += cc[1] * step;\n          b += cc[2] * step;\n        }\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n\n  // The surface: a pale line that lifts a LED where a ripple passes.\n  for (let x = 0; x \u003c W; x++) {\n    const lift = sinAt(p, x * 0.35 - t * 2.1) + sinAt(p, x * 0.17 + t * 1.3) > 1.1 ? 1 : 0;\n    const o = ((SURFACE - lift) * W + x) * 3;\n    const v = 0.35 + 0.4 * lamp;\n    buf[o] = 120 * v + top[0] * 0.5;\n    buf[o + 1] = 150 * v + top[1] * 0.5;\n    buf[o + 2] = 170 * v + top[2] * 0.5;\n  }\n\n  const plant = 0.45 + 0.55 * lamp;\n  for (let i = 0; i \u003c WEEDS; i++) if (i !== 1 && i !== 5) drawWeed(p, i, plant);\n  drawSprite(p, p.chest, CHEST_X, p.chestY, p.chestOpen, true, 0.5 + 0.5 * lamp);\n\n  const fishLight = 0.5 + 0.5 * lamp;\n  // The school swims furthest back and the clownfish nearest, so a fish crossing another reads as depth.\n  for (let n = 0; n \u003c DRAW_ORDER.length; n++) {\n    const kind = DRAW_ORDER[n];\n    for (let i = 0; i \u003c MAX_FISH; i++) if (p.state[i] && p.kind[i] === kind) drawFish(p, i, fishLight);\n  }\n\n  // Two weeds stand in front of the fish, so a fish can pass behind them.\n  drawWeed(p, 1, plant);\n  drawWeed(p, 5, plant);\n\n  for (let f = 0; f \u003c FLAKES; f++) {\n    if (p.flakeLife[f] \u003c= 0) continue;\n    put(buf, Math.floor(p.fx[f]), Math.floor(p.fy[f]), 255 * fishLight, 196 * fishLight, 96 * fishLight);\n  }\n\n  for (let bI = 0; bI \u003c BUBBLES; bI++) {\n    const by = p.by[bI];\n    if (by \u003c= 0) continue;\n    const bx = p.bx[bI] + 1.1 * sinAt(p, p.bph[bI] + by * 0.27);\n    const size = p.bage[bI] \u003c 1.2 ? 0 : p.bage[bI] \u003c 2.8 ? 1 : 2;\n    const v = 0.55 + 0.35 * lamp;\n    if (size === 0) splat(buf, bx, by, 170 * v, 220 * v, 255 * v, 1);\n    else ring(buf, Math.round(bx), Math.round(by), size, 170 * v, 220 * v, 255 * v);\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// A point shared over its four nearest LEDs, so it glides instead of hopping.\nfunction splat(buf, px, py, r, g, b, amount) {\n  const x0 = Math.floor(px - 0.5);\n  const y0 = Math.floor(py - 0.5);\n  for (let yy = y0; yy \u003c= y0 + 1; yy++) {\n    if (yy \u003c SURFACE || yy >= H) continue;\n    const wy = 1 - Math.abs(yy + 0.5 - py);\n    for (let xx = x0; xx \u003c= x0 + 1; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = wy * (1 - Math.abs(xx + 0.5 - px)) * amount;\n      if (w \u003c= 0) continue;\n      const o = (yy * W + xx) * 3;\n      buf[o] += (r - buf[o]) * w;\n      buf[o + 1] += (g - buf[o + 1]) * w;\n      buf[o + 2] += (b - buf[o + 2]) * w;\n    }\n  }\n}\n\n// A bubble: a diamond of four LEDs, or a round one of eight with a glint.\nfunction ring(buf, cx, cy, size, r, g, b) {\n  if (size === 1) {\n    put(buf, cx, cy - 1, r, g, b);\n    put(buf, cx - 1, cy, r, g, b);\n    put(buf, cx + 1, cy, r, g, b);\n    put(buf, cx, cy + 1, r, g, b);\n  } else {\n    put(buf, cx, cy - 1, r, g, b);\n    put(buf, cx + 1, cy - 1, r, g, b);\n    put(buf, cx - 1, cy, r, g, b);\n    put(buf, cx + 2, cy, r, g, b);\n    put(buf, cx - 1, cy + 1, r, g, b);\n    put(buf, cx + 2, cy + 1, r, g, b);\n    put(buf, cx, cy + 2, r, g, b);\n    put(buf, cx + 1, cy + 2, r, g, b);\n    put(buf, cx, cy, 255, 255, 255);\n  }\n}\n\nfunction drawFish(p, i, light) {\n  drawSprite(p, p.sprite[p.kind[i]], Math.round(p.x[i]), Math.round(p.y[i]), Math.floor(p.wag[i]) & 1, p.face[i] > 0, light);\n}\n\nfunction drawSprite(p, s, ix, iy, frame, right, light) {\n  const buf = p.buf;\n  const base = frame * s.w * s.h;\n  for (let y = 0; y \u003c s.h; y++) {\n    const yy = iy + y;\n    if (yy \u003c SURFACE || yy >= H) continue;\n    for (let x = 0; x \u003c s.w; x++) {\n      const c = s.pix[base + y * s.w + x];\n      if (!c) continue;\n      const xx = ix + (right ? x : s.w - 1 - x);\n      if (xx \u003c 0 || xx >= W) continue;\n      const o = (yy * W + xx) * 3;\n      buf[o] = s.pal[c * 3] * light;\n      buf[o + 1] = s.pal[c * 3 + 1] * light;\n      buf[o + 2] = s.pal[c * 3 + 2] * light;\n    }\n  }\n}\n\nfunction drawWeed(p, i, light) {\n  const buf = p.buf;\n  const h = p.weedH[i];\n  const bx = p.weedX[i];\n  const base = sandTop(bx) + 1;\n  const sr = p.weedStem[i * 3] * light;\n  const sg = p.weedStem[i * 3 + 1] * light;\n  const sb = p.weedStem[i * 3 + 2] * light;\n  const lr = p.weedLeaf[i * 3] * light;\n  const lg = p.weedLeaf[i * 3 + 1] * light;\n  const lb = p.weedLeaf[i * 3 + 2] * light;\n  const t = p.t;\n  for (let r = 0; r \u003c h; r++) {\n    const y = base - r;\n    if (y \u003c SURFACE + 2) break;\n    const s = r / h;\n    // The tip sways most, and the sway runs up the stem a little late.\n    const off = 4.2 * s * s * sinAt(p, t * 0.85 + p.weedPh[i] - s * 2.4);\n    const x = Math.round(bx + off);\n    put(buf, x, y, sr, sg, sb);\n    if (r \u003c h - 8) put(buf, x + 1, y, sr, sg, sb);\n    const gap = WEED_GAP[i];\n    if (r > 3 && r % gap === 0 && r \u003c h - 2) {\n      const side = (r / gap) & 1 ? 1 : -1;\n      const lx = side > 0 ? x + (r \u003c h - 8 ? 2 : 1) : x - 1;\n      put(buf, lx, y, lr, lg, lb);\n      put(buf, lx + side, y - 1, lr, lg, lb);\n      // Lower leaves are longer.\n      if (s \u003c 0.6) put(buf, lx + side * 2, y - 2, lr, lg, lb);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Water=0..1, Swim=0.2..4, Fish=6..18, Light=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Water","min":0,"max":1,"about":"The tint of the water, from clear blue through lagoon teal and planted green to tea-brown blackwater and violet."},{"name":"Swim","min":0.2,"max":4,"about":"How fast the whole tank moves, fish, weed, bubbles and light, from slow motion to a feeding rush."},{"name":"Fish","min":6,"max":18,"about":"How many fish live in the tank; new ones swim in from the side and spare ones swim out."},{"name":"Light","min":-1,"max":1,"about":"Below 0 the lamp dims towards night and the deep water goes dark; above 0 the sun is out and the net of light reaches the sand."}],"start":[0,2,6,0.06],"measures":{"motion":0.1521,"detail":0.0707,"edges":0.4986,"complexity":0.73,"coverage":0.9459,"colour":0.2752,"drift":0.0492},"knobResponse":[0.1007,0.0662,0.0696,0.1627]},{"slug":"aurora","title":"Aurora","family":"light","round":1,"note":"떠도는 선에 빛 커튼이 걸리고, 빛줄기는 커튼이 흔들리는 것보다 느리게 일렁여요.","idea":"Curtains of light hang from a line that wanders, and their rays shimmer slower than they sway.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Aurora\n// Family:  light\n// Idea:    Curtains of light hang from a line that wanders, and their rays shimmer slower than they sway.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Sway=0..1, Speed=0.1..5, Curtains=1..4, Rays=0..1\n// @ramp oklab 0:#000000 0.18:#04122e 0.45:#0b6b5a 0.72:#3dff9a 0.9:#b8ffd9 1:#f0c8ff\n//\n// Knob 1: Sway. How far the curtains swing from side to side.\n// Knob 2: Speed. How fast everything drifts.\n// Knob 3: Curtains. One curtain or a sky of up to four, each its own height.\n// Knob 4: Rays. From a smooth glow to sharp vertical rays.\n\nfunction hash(n) {\n  const s = Math.sin(n * 127.1) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nfunction noise(x) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i) * (1 - u) + hash(i + 1) * u;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.field = new Float32Array(64 * 128);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  params.sway = k[0];\n  params.speed = k[1];\n  params.curtains = k[2];\n  params.rays = k[3];\n  params.t += dt * params.speed * 0.25;\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const t = params.t;\n  const field = params.field;\n  field.fill(0);\n  const count = Math.max(1, Math.min(4, Math.round(params.curtains)));\n  const swing = 8 + params.sway * 30;\n  // A few stars behind it all, each on its own slow twinkle.\n  for (let s = 0; s \u003c 46; s++) {\n    const sx = Math.floor(hash(s * 3.7) * w);\n    const sy = Math.floor(hash(s * 9.1) * h * 0.8);\n    field[sy * w + sx] = 0.2 + 0.14 * Math.sin(t * 6 + s * 2.3);\n  }\n  const sharp = 1 + params.rays * 3;\n  for (let c = 0; c \u003c count; c++) {\n    const seed = c * 17.3;\n    // One curtain hangs low; more of them stack up the sky, the far ones dimmer.\n    // The sky is tall, so the hems sit low and the rays climb most of it.\n    const base = count === 1 ? h * 0.74 : h * (0.84 - 0.52 * (c / (count - 1)));\n    const strength = (1 - c * 0.14) / Math.sqrt(count * 0.8);\n    const height = 70 - c * 8;\n    for (let x = 0; x \u003c w; x++) {\n      // Folds a little tighter than on the wide panel, so 64 columns still hold two or three.\n      const fold = noise(x * 0.05 + t * 0.9 + seed) * 2 - 1;\n      const line = base + fold * swing * 0.5 + Math.sin(x * 0.075 + t * 1.7 + seed) * swing * 0.25;\n      const ray = noise(x * 0.32 + t * 0.35 + seed * 3);\n      const streak = Math.pow(ray, sharp) * (0.7 + params.rays * 0.6) + (1 - params.rays) * 0.3;\n      const glow = (0.6 + 0.4 * noise(x * 0.02 - t * 0.6 + seed)) * strength;\n      const top = line - height - ray * 22;\n      for (let y = 0; y \u003c h; y++) {\n        let v = 0;\n        if (y \u003c= line) {\n          // Bright at the hem, fading upward into the rays.\n          const up = (line - y) / (line - top);\n          v = up \u003c 1 ? Math.pow(1 - up, 1.3) * streak * 1.25 : 0;\n        } else {\n          v = Math.exp(-(y - line) * 0.5) * 0.9;\n        }\n        const i = y * w + x;\n        field[i] = Math.min(1, field[i] + v * glow);\n      }\n    }\n  }\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) display.setValue(x, y, field[y * w + x]);\n  }\n}\n","layer":{"id":"layer-aurora","type":"code","name":"aurora","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Aurora\n// Family:  light\n// Idea:    Curtains of light hang from a line that wanders, and their rays shimmer slower than they sway.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Sway=0..1, Speed=0.1..5, Curtains=1..4, Rays=0..1\n\n//\n// Knob 1: Sway. How far the curtains swing from side to side.\n// Knob 2: Speed. How fast everything drifts.\n// Knob 3: Curtains. One curtain or a sky of up to four, each its own height.\n// Knob 4: Rays. From a smooth glow to sharp vertical rays.\n\nfunction hash(n) {\n  const s = Math.sin(n * 127.1) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nfunction noise(x) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i) * (1 - u) + hash(i + 1) * u;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.field = new Float32Array(64 * 128);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  params.sway = k[0];\n  params.speed = k[1];\n  params.curtains = k[2];\n  params.rays = k[3];\n  params.t += dt * params.speed * 0.25;\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const t = params.t;\n  const field = params.field;\n  field.fill(0);\n  const count = Math.max(1, Math.min(4, Math.round(params.curtains)));\n  const swing = 8 + params.sway * 30;\n  // A few stars behind it all, each on its own slow twinkle.\n  for (let s = 0; s \u003c 46; s++) {\n    const sx = Math.floor(hash(s * 3.7) * w);\n    const sy = Math.floor(hash(s * 9.1) * h * 0.8);\n    field[sy * w + sx] = 0.2 + 0.14 * Math.sin(t * 6 + s * 2.3);\n  }\n  const sharp = 1 + params.rays * 3;\n  for (let c = 0; c \u003c count; c++) {\n    const seed = c * 17.3;\n    // One curtain hangs low; more of them stack up the sky, the far ones dimmer.\n    // The sky is tall, so the hems sit low and the rays climb most of it.\n    const base = count === 1 ? h * 0.74 : h * (0.84 - 0.52 * (c / (count - 1)));\n    const strength = (1 - c * 0.14) / Math.sqrt(count * 0.8);\n    const height = 70 - c * 8;\n    for (let x = 0; x \u003c w; x++) {\n      // Folds a little tighter than on the wide panel, so 64 columns still hold two or three.\n      const fold = noise(x * 0.05 + t * 0.9 + seed) * 2 - 1;\n      const line = base + fold * swing * 0.5 + Math.sin(x * 0.075 + t * 1.7 + seed) * swing * 0.25;\n      const ray = noise(x * 0.32 + t * 0.35 + seed * 3);\n      const streak = Math.pow(ray, sharp) * (0.7 + params.rays * 0.6) + (1 - params.rays) * 0.3;\n      const glow = (0.6 + 0.4 * noise(x * 0.02 - t * 0.6 + seed)) * strength;\n      const top = line - height - ray * 22;\n      for (let y = 0; y \u003c h; y++) {\n        let v = 0;\n        if (y \u003c= line) {\n          // Bright at the hem, fading upward into the rays.\n          const up = (line - y) / (line - top);\n          v = up \u003c 1 ? Math.pow(1 - up, 1.3) * streak * 1.25 : 0;\n        } else {\n          v = Math.exp(-(y - line) * 0.5) * 0.9;\n        }\n        const i = y * w + x;\n        field[i] = Math.min(1, field[i] + v * glow);\n      }\n    }\n  }\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) display.setValue(x, y, field[y * w + x]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":0.18,"color":"#04122e","alpha":1},{"position":0.45,"color":"#0b6b5a","alpha":1},{"position":0.72,"color":"#3dff9a","alpha":1},{"position":0.9,"color":"#b8ffd9","alpha":1},{"position":1,"color":"#f0c8ff","alpha":1}],"mode":"oklab","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sway=0..1, Speed=0.1..5, Curtains=1..4, Rays=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sway","min":0,"max":1,"about":"How far the curtains swing from side to side."},{"name":"Speed","min":0.1,"max":5,"about":"How fast everything drifts."},{"name":"Curtains","min":1,"max":4,"about":"One curtain or a sky of up to four, each its own height."},{"name":"Rays","min":0,"max":1,"about":"From a smooth glow to sharp vertical rays."}],"start":[0,2,1,0.06],"measures":{"motion":0.0423,"detail":0.0219,"edges":0.176,"complexity":1.1219,"coverage":0.4849,"colour":0.2574,"drift":0.0814},"knobResponse":[0.0412,0.0639,0.142,0.0829]},{"slug":"axon","title":"Axon","family":"body","round":23,"note":"어두운 조직 속에서 신경세포 하나가 초록 형광으로 빛나요. 세포체를 떠난 스파이크가 수초 사이의 랑비에 결절을 하나씩 건너뛰며 축삭을 내려가고, 말단 단추가 시냅스 틈 너머로 신호를 넘기면 아래의 자홍색 신경세포가 따라 켜져요. K4 를 올리면 수초가 벗겨져 신호가 기어가다 꺼져요.","idea":"A neuron glows green in a fluorescence micrograph of dark tissue, and each burst it fires leaves the cell body and leaps down the myelinated axon from one node of Ranvier to the next until the terminals spill glowing vesicles across the clefts onto a second neuron, which lights up in turn.","buttons":"K1 tap fires a burst of four spikes now.","code":"// ===== Patternflow pattern =====\n// Title:   Axon\n// Family:  body\n// Idea:    A neuron glows green in a fluorescence micrograph of dark tissue, and each burst it fires leaves the cell body and leaps down the myelinated axon from one node of Ranvier to the next until the terminals spill glowing vesicles across the clefts onto a second neuron, which lights up in turn.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after Santiago Ramón y Cajal's drawings of neurons and fluorescence microscopy\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dye=0..1, Speed=0.2..3, Rate=1..8, Damage=0..1\n//\n// Knob 1: Dye. The fluorescent labels, turning round the colour wheel together. At 0 the neuron is GFP green and the second neuron magenta, on cream myelin with blue nuclei.\n// Knob 2: Speed. The clock of the whole slide: at 2 a healthy spike takes about a second from the cell body to the terminals, and at 0.2 everything runs ten times slower.\n// Knob 3: Rate. How often the neuron fires: a burst of three spikes every 1.8 s at 1, up to about nine spikes a second at 8.\n// Knob 4: Damage. Demyelination. At 0 the sheaths are whole and a spike leaps from node to node. As it rises the sheaths thin and break, and the spike crawls through the bare stretches, fading as it goes. Past about 0.3 the second neuron no longer answers, and near 1 the spike dies in the bare axon before it reaches the terminals.\n// Buttons: K1 tap fires a burst of four spikes now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, abs, exp, sin, cos, hypot, floor, ceil, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\n\n// The axon's centre line, a gentle S from the hillock down to where it branches.\nconst AX = (y) => 32 + 2.6 * sin((y - 28) * 0.07);\nconst YH = 28;\n// Four sheaths 11 rows long, each followed by a bare node two rows long.\nconst NSH = 4, SA = 39.5, SL = 11, SP = 13;\nconst sa = (k) => SA + SP * k;\nconst sb = (k) => sa(k) + SL;\n// Where a spike flashes: the end of the initial segment, then each node.\nconst NODE = [SA - 0.5, sb(0) + 1, sb(1) + 1, sb(2) + 1, sb(3) + 1];\nconst YB = sb(3) + 2.5;\n// Conduction in LEDs a second of slide time.\nconst V_AIS = 60, V_FAST = 110, V_SLOW = 14, V_NODE = 40, V_TERM = 45;\n// The boutons, and how far below each the second neuron's spine sits.\nconst BOUT = [[9, 101], [20, 105], [31, 103], [42, 106], [54, 100]];\nconst CLEFT = 6, S1 = [32, 23], S2 = [33, 121];\n\n// Distance to a segment; T is how far along it the nearest point lies.\nlet T = 0;\nfunction seg(px, py, ax, ay, bx, by) {\n  const dx = bx - ax, dy = by - ay;\n  T = clamp(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return hypot(px - ax - dx * T, py - ay - dy * T);\n}\n\n// A tapered stroke into layer L, kept by the brighter of old and new. With a\n// record R it also notes, LED by LED, how far along a branch the stroke is.\nfunction stroke(L, ax, ay, bx, by, ra, rb, wt, R) {\n  const r = max(ra, rb) + 1;\n  const x0 = max(0, floor(min(ax, bx) - r));\n  const x1 = min(W - 1, ceil(max(ax, bx) + r));\n  const y0 = max(0, floor(min(ay, by) - r));\n  const y1 = min(H - 1, ceil(max(ay, by) + r));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const d = seg(x + 0.5, y + 0.5, ax, ay, bx, by) - (ra + (rb - ra) * T);\n      const v = clamp(0.5 - d, 0, 1) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n      if (R && v > R.c[i]) {\n        R.c[i] = v;\n        R.s[i] = R.s0 + T * R.len;\n        R.b[i] = R.id;\n      }\n    }\n}\n\nfunction blob(L, cx, cy, rx, ry, wt, soft) {\n  const s = soft || 1;\n  for (let y = max(0, floor(cy - ry - 2)); y \u003c= min(H - 1, ceil(cy + ry + 2)); y++)\n    for (let x = max(0, floor(cx - rx - 2)); x \u003c= min(W - 1, ceil(cx + rx + 2)); x++) {\n      const d = (hypot((x + 0.5 - cx) / rx, (y + 0.5 - cy) / ry) - 1) * min(rx, ry);\n      const v = clamp(0.5 - d / s, 0, 1) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n    }\n}\n\n// A dendrite: short strokes that wander and thin out, forking now and then\n// and set with spines.\nfunction grow(L, x, y, a, w, len, depth, wt, spines) {\n  let s = 0;\n  while (s \u003c len) {\n    const nx = x + cos(a) * 1.5;\n    const ny = y + sin(a) * 1.5;\n    const nw = max(0.42, w * 0.975);\n    stroke(L, x, y, nx, ny, w, nw, wt);\n    if (spines && rnd() \u003c 0.28) {\n      const side = rnd() \u003c 0.5 ? 1 : -1;\n      stroke(L, nx, ny, nx - sin(a) * side * (w + 1.3), ny + cos(a) * side * (w + 1.3), 0.3, 0.55, wt * 0.8);\n    }\n    (x = nx), (y = ny), (w = nw), (s += 1.5);\n    a += (rnd() - 0.5) * 0.36;\n    if (x \u003c -4 || x > W + 4 || y \u003c -4 || y > H + 4) return;\n    if (depth > 0 && s > 4 && rnd() \u003c 0.1) {\n      const turn = (0.35 + 0.45 * rnd()) * (rnd() \u003c 0.5 ? 1 : -1);\n      grow(L, x, y, a + turn, w * 0.8, (len - s) * 0.85 + 3, depth - 1, wt, spines);\n      a -= turn * 0.4;\n    }\n  }\n}\n\n// A quadratic curve of strokes from p to q bent toward c. Returns its length.\nfunction curve(L, p, c, q, r0, r1, wt, R) {\n  let px = p[0], py = p[1], s = 0;\n  for (let j = 1; j \u003c= 14; j++) {\n    const u = j / 14, v = 1 - u;\n    const qx = v * v * p[0] + 2 * u * v * c[0] + u * u * q[0];\n    const qy = v * v * p[1] + 2 * u * v * c[1] + u * u * q[1];\n    const len = hypot(qx - px, qy - py);\n    if (R) (R.s0 = s), (R.len = len);\n    stroke(L, px, py, qx, qy, r0 + ((r1 - r0) * (j - 1)) / 14, r0 + (r1 - r0) * u, wt, R);\n    s += len;\n    (px = qx), (py = qy);\n  }\n  return s;\n}\n\nfunction blur(L) {\n  const o = F32(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++)\n      o[y * W + x] = 0.25 * L[y * W + max(0, x - 1)] + 0.5 * L[y * W + x] + 0.25 * L[y * W + min(W - 1, x + 1)];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++)\n      L[y * W + x] = 0.25 * o[max(0, y - 1) * W + x] + 0.5 * o[y * W + x] + 0.25 * o[min(H - 1, y + 1) * W + x];\n}\n\n// A nucleus is dark in the cell's own label and blue in the nuclear stain.\nfunction nucleus(D, NU, x, y, rx, ry) {\n  const m = F32(N);\n  blob(m, x, y, rx, ry, 1);\n  for (let i = 0; i \u003c N; i++) if (m[i] > 0) (D[i] *= 1 - 0.7 * m[i]), (NU[i] = max(NU[i], 0.8 * m[i]));\n}\n\n// Merge a layer into the neighbours' layer, noting whose each LED is.\nfunction merge(S, L, j) {\n  for (let i = 0; i \u003c N; i++) if (L[i] > S.NB[i]) (S.NB[i] = L[i]), (S.NBI[i] = j);\n}\n\n// Copy a piece into the damageable layer with its breaking point.\nfunction mark(GD, GZ, L, z) {\n  for (let i = 0; i \u003c N; i++)\n    if (L[i] > GD[i]) {\n      GD[i] = L[i];\n      GZ[i] = z + 0.08 * rnd();\n    }\n}\n\nexport function setup(params) {\n  const S = {\n    D1: F32(N), X1: F32(N), X1v: F32(N), D2: F32(N), NU: F32(N), NB: F32(N), NBI: new Uint8Array(N),\n    GL: F32(N), GD: F32(N), GZ: F32(N), GV: F32(N), TI: F32(N), H1: F32(N), H2: F32(N), MY: F32(N), SP1: F32(N), SP2: F32(N),\n    t: 0, next: 0.5, q: [], sp: [], ves: [], ca1: 0, v2: 0, ca2: 0, f2: 0,\n    caN: [0, 0, 0, 0], Fs: F32(5), Fn: F32(5), Fb: F32(5),\n    m: F32(NSH), mr: F32(NSH), nz: F32(NSH * 14),\n    tN: F32(5), aN: F32(5), tA: F32(NSH), tB: F32(NSH), AA: F32(NSH), AB: F32(NSH), tBo: F32(5), blen: F32(5),\n    dye: -1, dmg: -1, na: [],\n  };\n  params.s = S;\n  const { D1, X1, D2, NU, GL, TI } = S;\n\n  // The neuron: a pyramid of a cell body whose apical dendrite climbs to a\n  // tuft at the top edge. The basal dendrites spread to the sides.\n  blob(D1, S1[0], S1[1] + 0.5, 7, 6, 0.85);\n  stroke(D1, 32, 21, 32, 13, 4.6, 1.3, 0.85);\n  stroke(D1, 32, 27.5, AX(31.5), 31.5, 2.6, 0.9, 0.85);\n  grow(D1, 32, 13.5, -PI / 2 + (rnd() - 0.5) * 0.2, 1.25, 18, 3, 0.85, true);\n  grow(D1, 32, 9.5, -PI / 2 - 0.9, 0.8, 22, 1, 0.8, true);\n  grow(D1, 32, 8, -PI / 2 + 0.9, 0.8, 22, 1, 0.8, true);\n  grow(D1, 26.5, 27, 2.3, 1.1, 26, 2, 0.85, true);\n  grow(D1, 37.5, 27, 0.85, 1.1, 26, 2, 0.85, true);\n  grow(D1, 25.5, 21, PI + 0.3, 1.05, 24, 2, 0.85, true);\n  grow(D1, 38.5, 21, -0.3, 1.05, 24, 2, 0.85, true);\n  grow(D1, 28.5, 29, 1.95, 0.8, 14, 1, 0.8, true);\n  grow(D1, 35.5, 29, 1.2, 0.8, 14, 1, 0.8, true);\n  nucleus(D1, NU, S1[0] + 0.4, S1[1] + 0.3, 3.2, 3.6);\n  NU[22 * W + 33] *= 0.4;\n\n  // The axon as a tube of LEDs, row by row, for the myelin and the spikes.\n  const tI = [], tY = [], tR = [], tK = [], tJ = [];\n  S.row = new Int32Array(H + 2);\n  for (let y = 0; y \u003c H; y++) {\n    S.row[y] = tI.length;\n    if (y \u003c YH || y > YB + 1) continue;\n    const yc = y + 0.5, ax = AX(yc), sl = 0.182 * cos((yc - 28) * 0.07);\n    for (let x = max(0, floor(ax - 5)); x \u003c= min(W - 1, ceil(ax + 5)); x++) {\n      const r = (x + 0.5 - ax) / Math.sqrt(1 + sl * sl);\n      let k = -1;\n      for (let j = 0; j \u003c NSH; j++) if (yc >= sa(j) - 0.5 && yc \u003c= sb(j) + 0.5) k = j;\n      tI.push(y * W + x), tY.push(yc), tR.push(r), tK.push(k), tJ.push(rnd());\n      const rr = 0.7 + 0.3 * clamp((SA - yc) / 10, 0, 1);\n      X1[y * W + x] = max(X1[y * W + x], clamp(rr + 0.5 - abs(r), 0, 1) * 0.8);\n    }\n  }\n  S.row[H] = S.row[H + 1] = tI.length;\n  [S.tI, S.tY, S.tR, S.tK, S.tJ] = [Int32Array.from(tI), Float32Array.from(tY), Float32Array.from(tR), Int8Array.from(tK), Float32Array.from(tJ)];\n  for (let k = 0; k \u003c NSH; k++) {\n    S.mr[k] = rnd();\n    let a = rnd();\n    for (let j = 0; j \u003c 14; j++) {\n      const b = rnd();\n      (S.nz[k * 14 + j] = 0.5 * a + 0.5 * b), (a = b);\n    }\n  }\n\n  // The terminal arbor: five branches fanning out from the last node to the\n  // boutons, each LED tagged with how far along its branch it lies.\n  const R = { c: F32(N), s: F32(N), b: new Int8Array(N), s0: 0, len: 0, id: 0 };\n  const P = [AX(YB), YB];\n  BOUT.forEach((B, b) => {\n    R.id = b;\n    const C = [P[0] + (B[0] - P[0]) * 0.5, P[1] + (B[1] - P[1]) * 0.2 + 1];\n    S.blen[b] = curve(X1, P, C, B, 0.65, 0.5, 0.8, R);\n    blob(X1, B[0], B[1], 1.8, 1.6, 0.95);\n  });\n  const ti = [], ts = [], tb = [], tc = [];\n  for (let i = 0; i \u003c N; i++)\n    if (R.c[i] > 0.05) ti.push(i), ts.push(R.s[i]), tb.push(R.b[i]), tc.push(R.c[i]);\n  [S.ti, S.ts, S.tb, S.tc] = [Int32Array.from(ti), Float32Array.from(ts), Int8Array.from(tb), Float32Array.from(tc)];\n\n  // The second neuron below: its dendrites rise to a spine under each bouton.\n  blob(D2, S2[0], S2[1], 7, 5.4, 0.85);\n  stroke(D2, 33, 118, 32, 112, 3.8, 1.1, 0.85);\n  BOUT.forEach((B) => {\n    const sx = B[0], sy = B[1] + CLEFT;\n    const st = [33 + (sx - 33) * 0.22, abs(sx - 33) \u003c 4 ? 112 : 117];\n    curve(D2, st, [sx * 0.8 + st[0] * 0.2, st[1] - 1], [sx, sy + 2.5], 1.1, 0.55, 0.8);\n    stroke(D2, sx, sy + 2.5, sx, sy + 0.8, 0.4, 0.5, 0.8);\n    blob(D2, sx, sy, 1.3, 1.1, 0.95);\n  });\n  grow(D2, 27, 124, PI - 0.15, 1, 24, 2, 0.8, true);\n  grow(D2, 39, 124, 0.12, 1, 24, 2, 0.8, true);\n  grow(D2, 28, 118, PI + 0.6, 0.8, 12, 1, 0.75, true);\n  grow(D2, 38, 118, -0.6, 0.8, 12, 1, 0.75, true);\n  nucleus(D2, NU, S2[0] + 0.3, S2[1] + 0.5, 3.2, 2.8);\n\n  // Neighbouring neurons, out of focus, each with a calcium flicker of its own.\n  [[8, 36], [56, 58], [9, 84]].forEach((c, j) => {\n    const L = F32(N), x = c[0] + (rnd() - 0.5) * 4, y = c[1] + (rnd() - 0.5) * 6;\n    blob(L, x, y, 3.2, 2.8, 0.7);\n    for (let d = 0; d \u003c 4; d++) grow(L, x, y, (d / 4) * 2 * PI + rnd(), 0.8, 10 + 8 * rnd(), 1, 0.65, false);\n    blur(L);\n    merge(S, L, j);\n    blob(NU, x, y, 1.8, 1.6, 0.3, 2);\n  });\n\n  // Two myelinated axons of other cells cross behind, with nodes of their\n  // own. Their sheaths and the oligodendrocytes go into GD, the layer that\n  // Damage takes apart, each piece with its own breaking point in GZ.\n  const { GD, GZ } = S;\n  const tmp = F32(N);\n  [[-3, 47 + rnd() * 4, 67, 43 + rnd() * 4], [-3, 69 + rnd() * 4, 67, 82 + rnd() * 4]].forEach((A, n) => {\n    const len = hypot(A[2] - A[0], A[3] - A[1]), ux = (A[2] - A[0]) / len, uy = (A[3] - A[1]) / len;\n    const bow = (n ? -3 : 3) * (0.6 + 0.4 * rnd());\n    const at = (s) => [A[0] + ux * s - uy * bow * sin((PI * s) / len), A[1] + uy * s + ux * bow * sin((PI * s) / len)];\n    const nodes = [];\n    for (let s = 2 + rnd() * 8; s \u003c len; s += 10) nodes.push(at(s));\n    for (let j = 0; j \u003c nodes.length - 1; j++) {\n      const p = nodes[j], q = nodes[j + 1], dx = (q[0] - p[0]) / 10, dy = (q[1] - p[1]) / 10;\n      tmp.fill(0);\n      sheath(tmp, p[0] + dx * 1.2, p[1] + dy * 1.2, q[0] - dx * 1.2, q[1] - dy * 1.2, 1.5, 0.27);\n      mark(GD, GZ, tmp, 0.15 + 0.85 * rnd());\n    }\n    tmp.fill(0);\n    for (const p of nodes) blob(tmp, p[0], p[1], 0.6, 0.6, 0.4);\n    merge(S, tmp, 3);\n    S.na.push({ nodes, sp: [] });\n  });\n\n  // Oligodendrocytes, the glia that wrap the sheaths, reaching to the axon.\n  const og = [[19 + rnd() * 3, 61, -1, [55, 66]], [44 + rnd() * 3, 76, 1, [70, 82]]];\n  for (const [x, y, side, ys] of og) {\n    tmp.fill(0);\n    blob(tmp, x, y, 2.2, 1.9, 0.6);\n    for (const ty of ys) {\n      const tx = AX(ty) + side * 2.4;\n      curve(tmp, [x, y], [(x + tx) / 2, y + (ty - y) * 0.15 + (rnd() - 0.5) * 3], [tx, ty], 0.5, 0.42, 0.34);\n    }\n    mark(GD, GZ, tmp, 0.35 + 0.3 * rnd());\n  }\n  // Astrocytes, small stars of fine processes.\n  for (const [x, y] of [[54, 31], [52, 95], [12, 70]]) {\n    blob(GL, x, y, 1.3, 1.2, 0.42);\n    for (let d = 0; d \u003c 8; d++) grow(GL, x, y, (d / 8) * 2 * PI + rnd() * 0.7, 0.5, 3 + 6 * rnd(), 0, 0.22 + 0.1 * rnd(), false);\n  }\n  // Nuclei of every other cell in the slice, in the blue stain.\n  for (let n = 0; n \u003c 26; n++) {\n    const x = rnd() * W, y = rnd() * H;\n    if (hypot(x - S1[0], y - S1[1]) \u003c 10 || hypot(x - S2[0], y - S2[1]) \u003c 10) continue;\n    if (y > 26 && y \u003c 94 && abs(x - AX(y)) \u003c 5) continue;\n    blob(NU, x, y, 1.4 + rnd() * 0.8, 1.2 + rnd() * 0.6, 0.2 + rnd() * 0.16, 1.5);\n  }\n  // Dark tissue: a faint, uneven autofluorescence.\n  const g = F32(9 * 17).map(rnd), g2 = F32(17 * 33).map(rnd);\n  const samp = (G, gw, x, y) => {\n    const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, at = (a, b) => G[b * gw + a];\n    return (at(ix, iy) * (1 - fx) + at(ix + 1, iy) * fx) * (1 - fy) + (at(ix, iy + 1) * (1 - fx) + at(ix + 1, iy + 1) * fx) * fy;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const n = 0.65 * samp(g, 9, x / 8, y / 8) + 0.35 * samp(g2, 17, x / 4, y / 4);\n      TI[y * W + x] = 0.02 + 0.055 * n * n;\n      S.H1[y * W + x] = exp(-((x + 0.5 - S1[0]) ** 2 + (y + 0.5 - S1[1]) ** 2) / 240);\n      S.H2[y * W + x] = exp(-((x + 0.5 - S2[0]) ** 2 + (y + 0.5 - S2[1]) ** 2) / 240);\n    }\n}\n\n// A sheath seen from above: bright walls and a dark line down the middle.\nfunction sheath(L, ax, ay, bx, by, R, wt) {\n  for (let y = max(0, floor(min(ay, by) - R - 1)); y \u003c= min(H - 1, ceil(max(ay, by) + R + 1)); y++)\n    for (let x = max(0, floor(min(ax, bx) - R - 1)); x \u003c= min(W - 1, ceil(max(ax, bx) + R + 1)); x++) {\n      const d = seg(x + 0.5, y + 0.5, ax, ay, bx, by);\n      const v = clamp(R + 0.5 - d, 0, 1) * (0.3 + 0.7 * sstep(0.1, R, d)) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n    }\n}\n\nfunction hsv(h, s, v) {\n  h = ((h % 1) + 1) % 1;\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction colours(S, dye) {\n  S.dye = dye;\n  const h = 0.33 + dye;\n  S.c1 = hsv(h, 0.88, 1);\n  S.c2 = hsv(h + 0.53, 0.78, 1);\n  S.cm = hsv(h - 0.21, 0.3, 1);\n  S.cn = hsv(h + 0.31, 0.8, 1);\n  S.ct = hsv(h + 0.2, 0.55, 1);\n}\n\n// The sheaths for this much damage: each thins and breaks by its own measure.\nfunction myelin(S, dmg) {\n  S.dmg = dmg;\n  for (let k = 0; k \u003c NSH; k++) S.m[k] = clamp(1 - dmg * (0.8 + 0.7 * S.mr[k]), 0, 1);\n  const { tI, tY, tR, tK, tJ, MY, X1, X1v } = S;\n  X1v.set(X1);\n  for (let j = 0; j \u003c tI.length; j++) {\n    const i = tI[j], k = tK[j];\n    MY[i] = 0;\n    if (k \u003c 0) continue;\n    const m = S.m[k], y = tY[j], r = abs(tR[j]);\n    const Rs = 2.75 * (0.45 + 0.55 * m);\n    const dy = max(0, sa(k) + Rs - y, y - (sb(k) - Rs));\n    const cov = clamp(0.5 - (hypot(r, dy) - Rs), 0, 1);\n    const thr = (1 - m) * 1.3 - 0.15;\n    const row = clamp(floor(y - sa(k) + 0.5), 0, 13);\n    const pres = sstep(thr - 0.1, thr + 0.1, S.nz[k * 14 + row] + 0.12 * tJ[j]);\n    MY[i] = cov * pres * (0.18 + 0.82 * sstep(0.2, 1.5, r)) * (0.5 + 0.25 * m);\n    X1v[i] = X1[i] * (1 - 0.9 * pres * cov);\n  }\n  const thr = dmg * 1.3 - 0.15;\n  for (let i = 0; i \u003c N; i++) S.GV[i] = S.GL[i] + (S.GD[i] ? S.GD[i] * sstep(thr - 0.1, thr + 0.1, S.GZ[i]) : 0);\n}\n\n// A spike's timetable at this much damage: when it reaches each node and how\n// strong it is there. It dies inside a sheath that is too far gone.\nfunction table(S) {\n  const { tN, aN, m } = S;\n  tN[0] = (SA - YH) / V_AIS;\n  aN[0] = 1;\n  S.blk = -1;\n  for (let k = 0; k \u003c NSH; k++) {\n    const v = V_SLOW + (V_FAST - V_SLOW) * m[k] * m[k];\n    const A0 = aN[k];\n    const A1 = A0 * (1 - 0.36 * (1 - m[k]) ** 1.2);\n    S.tA[k] = tN[k] + 0.5 / V_NODE;\n    S.tB[k] = S.tA[k] + SL / v;\n    (S.AA[k] = A0), (S.AB[k] = A1);\n    if (A1 \u003c 0.3) {\n      const f = (A0 - 0.3) / (A0 - A1);\n      S.blk = k;\n      S.blkY = sa(k) + SL * f;\n      S.blkT = S.tA[k] + (SL * f) / v;\n      for (let j = k + 1; j \u003c= NSH; j++) {\n        tN[j] = 1e9;\n        aN[j] = 0;\n      }\n      break;\n    }\n    tN[k + 1] = S.tB[k] + 1 / V_NODE;\n    aN[k + 1] = A1;\n  }\n  S.tT = tN[NSH] + (YB - NODE[NSH]) / V_NODE;\n  let end = 0;\n  for (let b = 0; b \u003c 5; b++) {\n    S.tBo[b] = S.tT + S.blen[b] / V_TERM;\n    end = max(end, S.tBo[b]);\n  }\n  S.tEnd = (S.blk >= 0 ? S.blkT : end) + 0.8;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  const dye = clamp(k[0], 0, 1);\n  const rate = clamp(k[2], 1, 8);\n  if (dye !== S.dye) colours(S, dye);\n  const dmg = clamp(k[3], 0, 1);\n  if (abs(dmg - S.dmg) > 0.001) myelin(S, dmg);\n  table(S);\n  // Slide time: Speed 2 is real time.\n  const st = (dt * clamp(k[1], 0.2, 3)) / 2;\n  S.t += st;\n  if (S.t >= S.next) {\n    S.q.push(S.t, S.t + 0.2, S.t + 0.4);\n    S.next = S.t + (1.8 / rate ** 0.8) * (0.75 + 0.5 * rnd());\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    for (let j = 0; j \u003c 4; j++) S.q.push(S.t + j * 0.15);\n    S.next = max(S.next, S.t + 1.2);\n  }\n  S.q.sort((a, b) => a - b);\n  while (S.q.length && S.q[0] \u003c= S.t) {\n    S.sp.push({ t: S.t - S.q.shift(), p: -1 });\n    S.ca1 += 0.3 * (1.25 - S.ca1);\n  }\n  // Each spike moves on; one reaching a bouton releases its vesicles.\n  for (const p of S.sp) {\n    p.p = p.t;\n    p.t += st;\n    for (let b = 0; b \u003c 5; b++)\n      if (p.p \u003c S.tBo[b] && p.t >= S.tBo[b])\n        for (let n = 0; n \u003c 3; n++) {\n          const B = BOUT[b];\n          S.ves.push({ b, a: S.aN[NSH], x: B[0] + (rnd() - 0.5) * 2, y: B[1] + 1.2, tx: B[0] + (rnd() - 0.5) * 1.6, ty: B[1] + CLEFT - 1, age: -n * 0.05, dur: 0.3 + 0.2 * rnd() });\n        }\n  }\n  S.sp = S.sp.filter((p) => p.t \u003c S.tEnd);\n  for (const v of S.ves) {\n    v.age += st;\n    if (v.age >= v.dur) {\n      S.v2 += (0.75 * v.a) / 15;\n      S.Fs[v.b] += 0.3;\n    }\n  }\n  S.ves = S.ves.filter((v) => v.age \u003c v.dur);\n  // The second neuron fires once enough transmitter has landed.\n  if (S.v2 >= 1) {\n    (S.v2 = 0.15), (S.ca2 = min(1.3, S.ca2 + 0.8)), (S.f2 = 1);\n  }\n  (S.ca1 *= exp(-st / 0.9)), (S.v2 *= exp(-st / 0.6)), (S.ca2 *= exp(-st / 1.1)), (S.f2 *= exp(-st / 0.15));\n  for (let b = 0; b \u003c 5; b++) S.Fs[b] *= exp(-st / 0.25);\n  for (let j = 0; j \u003c 3; j++) {\n    S.caN[j] *= exp(-st / 1.4);\n    if (rnd() \u003c st * 0.3) S.caN[j] += 0.7;\n  }\n  // The neighbouring axons carry spikes now and then too.\n  for (const A of S.na) {\n    for (const p of A.sp) p.t += st;\n    A.sp = A.sp.filter((p) => p.t \u003c A.nodes.length * 0.1 + 0.5);\n    if (rnd() \u003c st * 0.5) A.sp.push({ t: 0, back: rnd() \u003c 0.5 });\n  }\n}\n\n// A bright point with a soft halo, added into layer L.\nfunction bloom(L, cx, cy, amp, rc, rh, ha) {\n  if (amp \u003c 0.004) return;\n  const R = ceil(rh * 2.2);\n  for (let y = max(0, floor(cy - R)); y \u003c= min(H - 1, ceil(cy + R)); y++)\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const d2 = (x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2;\n      L[y * W + x] += amp * (exp(-d2 / (rc * rc)) + ha * exp(-d2 / (rh * rh)));\n    }\n}\n\nconst pulse = (u, tau) => (u \u003c -0.03 ? 0 : u \u003c 0 ? 1 + u / 0.03 : exp(-u / tau));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.c1) return;\n  const { SP1, SP2, tN, aN, Fn, Fb, tI, tY, tR, tK, MY } = S;\n  for (const A of [SP1, SP2, Fn, Fb]) A.fill(0);\n  let hill = 0;\n  for (const p of S.sp) {\n    const t = p.t;\n    hill += exp(-t / 0.12);\n    for (let j = 0; j \u003c= NSH; j++) Fn[j] += aN[j] * pulse(t - tN[j], 0.08);\n    // The front: always seen in the bare initial segment, seen in a sheath\n    // only as far as its myelin is gone.\n    let yf = -1, amp = 0;\n    if (t \u003c tN[0]) {\n      yf = YH + ((SA - YH) * t) / tN[0];\n      amp = 1;\n    } else\n      for (let k = 0; k \u003c NSH; k++) {\n        if (S.blk === k && t >= S.blkT) {\n          yf = S.blkY;\n          amp = 0.3 * exp(-(t - S.blkT) / 0.25);\n        } else if (t >= S.tA[k] && t \u003c S.tB[k]) {\n          const f = (t - S.tA[k]) / (S.tB[k] - S.tA[k]);\n          yf = sa(k) + SL * f;\n          amp = (S.AA[k] + (S.AB[k] - S.AA[k]) * f) * (1 - S.m[k]) ** 0.8;\n        }\n      }\n    if (yf >= 0 && amp > 0.01) {\n      for (let y = max(YH, floor(yf - 9)); y \u003c= min(H - 1, ceil(yf + 3)); y++)\n        for (let j = S.row[y]; j \u003c S.row[y + 1]; j++) {\n          const dy = tY[j] - yf;\n          const w = exp((-dy * dy) / 2.2) + (dy \u003c 0 ? 0.35 * exp(dy / 3.5) : 0);\n          const r2 = tR[j] * tR[j];\n          SP1[tI[j]] += amp * w * (1.1 * exp(-r2 / 0.9) + 0.15 * exp(-r2 / 6));\n        }\n    }\n    // Down the terminal branches to the boutons.\n    if (t >= S.tT && t \u003c S.tT + 1.2) {\n      const sf = (t - S.tT) * V_TERM;\n      const a = aN[NSH];\n      for (let j = 0; j \u003c S.ti.length; j++) {\n        const s = S.ts[j];\n        if (s > S.blen[S.tb[j]] + 1) continue;\n        const d = s - sf;\n        if (d > -8 && d \u003c 8) SP1[S.ti[j]] += a * S.tc[j] * 1.1 * exp((-d * d) / 3);\n      }\n    }\n    for (let b = 0; b \u003c 5; b++) Fb[b] += aN[NSH] * pulse(t - S.tBo[b], 0.18);\n  }\n  // Node flashes, and the sheaths on either side glowing with them.\n  bloom(SP1, AX(29.5), 29.5, min(1.5, hill) * 0.5, 2, 4.5, 0.4);\n  for (let j = 0; j \u003c= NSH; j++) bloom(SP1, AX(NODE[j]), NODE[j], Fn[j] * (j ? 1 : 0.7), 1.1, 3.4, 0.4);\n  for (let j = 0; j \u003c tI.length; j++) {\n    const k = tK[j];\n    if (k \u003c 0) continue;\n    const g = max(Fn[k], Fn[k + 1]);\n    if (g > 0.01) SP1[tI[j]] += 0.9 * g * MY[tI[j]];\n  }\n  for (let b = 0; b \u003c 5; b++) {\n    bloom(SP1, BOUT[b][0], BOUT[b][1], Fb[b], 1.6, 4, 0.4);\n    bloom(SP2, BOUT[b][0], BOUT[b][1] + CLEFT, S.Fs[b], 1.3, 3.5, 0.35);\n  }\n  // Vesicles crossing the clefts.\n  for (const v of S.ves) {\n    if (v.age \u003c 0) continue;\n    const u = v.age / v.dur;\n    const e = u * u * (3 - 2 * u);\n    bloom(SP1, v.x + (v.tx - v.x) * e, v.y + (v.ty - v.y) * e, 0.7 * (1 - 0.4 * u), 0.6, 1.8, 0.15);\n  }\n  for (const A of S.na)\n    for (const p of A.sp) {\n      const n = A.nodes.length;\n      for (let j = 0; j \u003c n; j++) {\n        const u = p.t - j * 0.1;\n        if (u > -0.03 && u \u003c 0.5) {\n          const q = A.nodes[p.back ? n - 1 - j : j];\n          bloom(SP1, q[0], q[1], 0.55 * pulse(u, 0.08), 0.9, 2.6, 0.35);\n        }\n      }\n    }\n\n  const { D1, X1v, D2, NU, NB, NBI, GV, TI, H1, H2, c1, c2, cm, cn, ct } = S;\n  const k1 = 0.28 + 0.95 * S.ca1;\n  const kx = 0.62 + 0.4 * S.ca1;\n  const kh1 = 0.03 + 0.32 * S.ca1;\n  const k2 = 0.27 + 0.4 * S.v2 + 1 * S.ca2 + 0.5 * S.f2;\n  const kh2 = 0.03 + 0.3 * S.ca2;\n  const kn = [0.45 + 1.4 * S.caN[0], 0.45 + 1.4 * S.caN[1], 0.45 + 1.4 * S.caN[2], 1];\n  for (let i = 0; i \u003c N; i++) {\n    const v1 = D1[i] * k1 + X1v[i] * kx + NB[i] * kn[NBI[i]] + H1[i] * kh1 + SP1[i];\n    const v2 = D2[i] * k2 + H2[i] * kh2 + SP2[i];\n    const vm = MY[i] + GV[i];\n    const vn = NU[i];\n    const vt = TI[i];\n    let r = 255 * (v1 * c1[0] + v2 * c2[0] + vm * cm[0] + vn * cn[0] + vt * ct[0]);\n    let g = 255 * (v1 * c1[1] + v2 * c2[1] + vm * cm[1] + vn * cn[1] + vt * ct[1]);\n    let b = 255 * (v1 * c1[2] + v2 * c2[2] + vm * cm[2] + vn * cn[2] + vt * ct[2]);\n    // Where a label saturates the camera it bleaches toward white.\n    const top = max(r, g, b);\n    if (top > 210) {\n      const e = (top - 210) * 0.5;\n      r += e;\n      g += e;\n      b += e;\n    }\n    display.setPixel(i % W, (i / W) | 0, min(255, r), min(255, g), min(255, b));\n  }\n}\n","layer":{"id":"layer-axon","type":"code","name":"axon","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Axon\n// Family:  body\n// Idea:    A neuron glows green in a fluorescence micrograph of dark tissue, and each burst it fires leaves the cell body and leaps down the myelinated axon from one node of Ranvier to the next until the terminals spill glowing vesicles across the clefts onto a second neuron, which lights up in turn.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after Santiago Ramón y Cajal's drawings of neurons and fluorescence microscopy\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dye=0..1, Speed=0.2..3, Rate=1..8, Damage=0..1\n//\n// Knob 1: Dye. The fluorescent labels, turning round the colour wheel together. At 0 the neuron is GFP green and the second neuron magenta, on cream myelin with blue nuclei.\n// Knob 2: Speed. The clock of the whole slide: at 2 a healthy spike takes about a second from the cell body to the terminals, and at 0.2 everything runs ten times slower.\n// Knob 3: Rate. How often the neuron fires: a burst of three spikes every 1.8 s at 1, up to about nine spikes a second at 8.\n// Knob 4: Damage. Demyelination. At 0 the sheaths are whole and a spike leaps from node to node. As it rises the sheaths thin and break, and the spike crawls through the bare stretches, fading as it goes. Past about 0.3 the second neuron no longer answers, and near 1 the spike dies in the bare axon before it reaches the terminals.\n// Buttons: K1 tap fires a burst of four spikes now.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, abs, exp, sin, cos, hypot, floor, ceil, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\n\n// The axon's centre line, a gentle S from the hillock down to where it branches.\nconst AX = (y) => 32 + 2.6 * sin((y - 28) * 0.07);\nconst YH = 28;\n// Four sheaths 11 rows long, each followed by a bare node two rows long.\nconst NSH = 4, SA = 39.5, SL = 11, SP = 13;\nconst sa = (k) => SA + SP * k;\nconst sb = (k) => sa(k) + SL;\n// Where a spike flashes: the end of the initial segment, then each node.\nconst NODE = [SA - 0.5, sb(0) + 1, sb(1) + 1, sb(2) + 1, sb(3) + 1];\nconst YB = sb(3) + 2.5;\n// Conduction in LEDs a second of slide time.\nconst V_AIS = 60, V_FAST = 110, V_SLOW = 14, V_NODE = 40, V_TERM = 45;\n// The boutons, and how far below each the second neuron's spine sits.\nconst BOUT = [[9, 101], [20, 105], [31, 103], [42, 106], [54, 100]];\nconst CLEFT = 6, S1 = [32, 23], S2 = [33, 121];\n\n// Distance to a segment; T is how far along it the nearest point lies.\nlet T = 0;\nfunction seg(px, py, ax, ay, bx, by) {\n  const dx = bx - ax, dy = by - ay;\n  T = clamp(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return hypot(px - ax - dx * T, py - ay - dy * T);\n}\n\n// A tapered stroke into layer L, kept by the brighter of old and new. With a\n// record R it also notes, LED by LED, how far along a branch the stroke is.\nfunction stroke(L, ax, ay, bx, by, ra, rb, wt, R) {\n  const r = max(ra, rb) + 1;\n  const x0 = max(0, floor(min(ax, bx) - r));\n  const x1 = min(W - 1, ceil(max(ax, bx) + r));\n  const y0 = max(0, floor(min(ay, by) - r));\n  const y1 = min(H - 1, ceil(max(ay, by) + r));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const d = seg(x + 0.5, y + 0.5, ax, ay, bx, by) - (ra + (rb - ra) * T);\n      const v = clamp(0.5 - d, 0, 1) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n      if (R && v > R.c[i]) {\n        R.c[i] = v;\n        R.s[i] = R.s0 + T * R.len;\n        R.b[i] = R.id;\n      }\n    }\n}\n\nfunction blob(L, cx, cy, rx, ry, wt, soft) {\n  const s = soft || 1;\n  for (let y = max(0, floor(cy - ry - 2)); y \u003c= min(H - 1, ceil(cy + ry + 2)); y++)\n    for (let x = max(0, floor(cx - rx - 2)); x \u003c= min(W - 1, ceil(cx + rx + 2)); x++) {\n      const d = (hypot((x + 0.5 - cx) / rx, (y + 0.5 - cy) / ry) - 1) * min(rx, ry);\n      const v = clamp(0.5 - d / s, 0, 1) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n    }\n}\n\n// A dendrite: short strokes that wander and thin out, forking now and then\n// and set with spines.\nfunction grow(L, x, y, a, w, len, depth, wt, spines) {\n  let s = 0;\n  while (s \u003c len) {\n    const nx = x + cos(a) * 1.5;\n    const ny = y + sin(a) * 1.5;\n    const nw = max(0.42, w * 0.975);\n    stroke(L, x, y, nx, ny, w, nw, wt);\n    if (spines && rnd() \u003c 0.28) {\n      const side = rnd() \u003c 0.5 ? 1 : -1;\n      stroke(L, nx, ny, nx - sin(a) * side * (w + 1.3), ny + cos(a) * side * (w + 1.3), 0.3, 0.55, wt * 0.8);\n    }\n    (x = nx), (y = ny), (w = nw), (s += 1.5);\n    a += (rnd() - 0.5) * 0.36;\n    if (x \u003c -4 || x > W + 4 || y \u003c -4 || y > H + 4) return;\n    if (depth > 0 && s > 4 && rnd() \u003c 0.1) {\n      const turn = (0.35 + 0.45 * rnd()) * (rnd() \u003c 0.5 ? 1 : -1);\n      grow(L, x, y, a + turn, w * 0.8, (len - s) * 0.85 + 3, depth - 1, wt, spines);\n      a -= turn * 0.4;\n    }\n  }\n}\n\n// A quadratic curve of strokes from p to q bent toward c. Returns its length.\nfunction curve(L, p, c, q, r0, r1, wt, R) {\n  let px = p[0], py = p[1], s = 0;\n  for (let j = 1; j \u003c= 14; j++) {\n    const u = j / 14, v = 1 - u;\n    const qx = v * v * p[0] + 2 * u * v * c[0] + u * u * q[0];\n    const qy = v * v * p[1] + 2 * u * v * c[1] + u * u * q[1];\n    const len = hypot(qx - px, qy - py);\n    if (R) (R.s0 = s), (R.len = len);\n    stroke(L, px, py, qx, qy, r0 + ((r1 - r0) * (j - 1)) / 14, r0 + (r1 - r0) * u, wt, R);\n    s += len;\n    (px = qx), (py = qy);\n  }\n  return s;\n}\n\nfunction blur(L) {\n  const o = F32(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++)\n      o[y * W + x] = 0.25 * L[y * W + max(0, x - 1)] + 0.5 * L[y * W + x] + 0.25 * L[y * W + min(W - 1, x + 1)];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++)\n      L[y * W + x] = 0.25 * o[max(0, y - 1) * W + x] + 0.5 * o[y * W + x] + 0.25 * o[min(H - 1, y + 1) * W + x];\n}\n\n// A nucleus is dark in the cell's own label and blue in the nuclear stain.\nfunction nucleus(D, NU, x, y, rx, ry) {\n  const m = F32(N);\n  blob(m, x, y, rx, ry, 1);\n  for (let i = 0; i \u003c N; i++) if (m[i] > 0) (D[i] *= 1 - 0.7 * m[i]), (NU[i] = max(NU[i], 0.8 * m[i]));\n}\n\n// Merge a layer into the neighbours' layer, noting whose each LED is.\nfunction merge(S, L, j) {\n  for (let i = 0; i \u003c N; i++) if (L[i] > S.NB[i]) (S.NB[i] = L[i]), (S.NBI[i] = j);\n}\n\n// Copy a piece into the damageable layer with its breaking point.\nfunction mark(GD, GZ, L, z) {\n  for (let i = 0; i \u003c N; i++)\n    if (L[i] > GD[i]) {\n      GD[i] = L[i];\n      GZ[i] = z + 0.08 * rnd();\n    }\n}\n\nexport function setup(params) {\n  const S = {\n    D1: F32(N), X1: F32(N), X1v: F32(N), D2: F32(N), NU: F32(N), NB: F32(N), NBI: new Uint8Array(N),\n    GL: F32(N), GD: F32(N), GZ: F32(N), GV: F32(N), TI: F32(N), H1: F32(N), H2: F32(N), MY: F32(N), SP1: F32(N), SP2: F32(N),\n    t: 0, next: 0.5, q: [], sp: [], ves: [], ca1: 0, v2: 0, ca2: 0, f2: 0,\n    caN: [0, 0, 0, 0], Fs: F32(5), Fn: F32(5), Fb: F32(5),\n    m: F32(NSH), mr: F32(NSH), nz: F32(NSH * 14),\n    tN: F32(5), aN: F32(5), tA: F32(NSH), tB: F32(NSH), AA: F32(NSH), AB: F32(NSH), tBo: F32(5), blen: F32(5),\n    dye: -1, dmg: -1, na: [],\n  };\n  params.s = S;\n  const { D1, X1, D2, NU, GL, TI } = S;\n\n  // The neuron: a pyramid of a cell body whose apical dendrite climbs to a\n  // tuft at the top edge. The basal dendrites spread to the sides.\n  blob(D1, S1[0], S1[1] + 0.5, 7, 6, 0.85);\n  stroke(D1, 32, 21, 32, 13, 4.6, 1.3, 0.85);\n  stroke(D1, 32, 27.5, AX(31.5), 31.5, 2.6, 0.9, 0.85);\n  grow(D1, 32, 13.5, -PI / 2 + (rnd() - 0.5) * 0.2, 1.25, 18, 3, 0.85, true);\n  grow(D1, 32, 9.5, -PI / 2 - 0.9, 0.8, 22, 1, 0.8, true);\n  grow(D1, 32, 8, -PI / 2 + 0.9, 0.8, 22, 1, 0.8, true);\n  grow(D1, 26.5, 27, 2.3, 1.1, 26, 2, 0.85, true);\n  grow(D1, 37.5, 27, 0.85, 1.1, 26, 2, 0.85, true);\n  grow(D1, 25.5, 21, PI + 0.3, 1.05, 24, 2, 0.85, true);\n  grow(D1, 38.5, 21, -0.3, 1.05, 24, 2, 0.85, true);\n  grow(D1, 28.5, 29, 1.95, 0.8, 14, 1, 0.8, true);\n  grow(D1, 35.5, 29, 1.2, 0.8, 14, 1, 0.8, true);\n  nucleus(D1, NU, S1[0] + 0.4, S1[1] + 0.3, 3.2, 3.6);\n  NU[22 * W + 33] *= 0.4;\n\n  // The axon as a tube of LEDs, row by row, for the myelin and the spikes.\n  const tI = [], tY = [], tR = [], tK = [], tJ = [];\n  S.row = new Int32Array(H + 2);\n  for (let y = 0; y \u003c H; y++) {\n    S.row[y] = tI.length;\n    if (y \u003c YH || y > YB + 1) continue;\n    const yc = y + 0.5, ax = AX(yc), sl = 0.182 * cos((yc - 28) * 0.07);\n    for (let x = max(0, floor(ax - 5)); x \u003c= min(W - 1, ceil(ax + 5)); x++) {\n      const r = (x + 0.5 - ax) / Math.sqrt(1 + sl * sl);\n      let k = -1;\n      for (let j = 0; j \u003c NSH; j++) if (yc >= sa(j) - 0.5 && yc \u003c= sb(j) + 0.5) k = j;\n      tI.push(y * W + x), tY.push(yc), tR.push(r), tK.push(k), tJ.push(rnd());\n      const rr = 0.7 + 0.3 * clamp((SA - yc) / 10, 0, 1);\n      X1[y * W + x] = max(X1[y * W + x], clamp(rr + 0.5 - abs(r), 0, 1) * 0.8);\n    }\n  }\n  S.row[H] = S.row[H + 1] = tI.length;\n  [S.tI, S.tY, S.tR, S.tK, S.tJ] = [Int32Array.from(tI), Float32Array.from(tY), Float32Array.from(tR), Int8Array.from(tK), Float32Array.from(tJ)];\n  for (let k = 0; k \u003c NSH; k++) {\n    S.mr[k] = rnd();\n    let a = rnd();\n    for (let j = 0; j \u003c 14; j++) {\n      const b = rnd();\n      (S.nz[k * 14 + j] = 0.5 * a + 0.5 * b), (a = b);\n    }\n  }\n\n  // The terminal arbor: five branches fanning out from the last node to the\n  // boutons, each LED tagged with how far along its branch it lies.\n  const R = { c: F32(N), s: F32(N), b: new Int8Array(N), s0: 0, len: 0, id: 0 };\n  const P = [AX(YB), YB];\n  BOUT.forEach((B, b) => {\n    R.id = b;\n    const C = [P[0] + (B[0] - P[0]) * 0.5, P[1] + (B[1] - P[1]) * 0.2 + 1];\n    S.blen[b] = curve(X1, P, C, B, 0.65, 0.5, 0.8, R);\n    blob(X1, B[0], B[1], 1.8, 1.6, 0.95);\n  });\n  const ti = [], ts = [], tb = [], tc = [];\n  for (let i = 0; i \u003c N; i++)\n    if (R.c[i] > 0.05) ti.push(i), ts.push(R.s[i]), tb.push(R.b[i]), tc.push(R.c[i]);\n  [S.ti, S.ts, S.tb, S.tc] = [Int32Array.from(ti), Float32Array.from(ts), Int8Array.from(tb), Float32Array.from(tc)];\n\n  // The second neuron below: its dendrites rise to a spine under each bouton.\n  blob(D2, S2[0], S2[1], 7, 5.4, 0.85);\n  stroke(D2, 33, 118, 32, 112, 3.8, 1.1, 0.85);\n  BOUT.forEach((B) => {\n    const sx = B[0], sy = B[1] + CLEFT;\n    const st = [33 + (sx - 33) * 0.22, abs(sx - 33) \u003c 4 ? 112 : 117];\n    curve(D2, st, [sx * 0.8 + st[0] * 0.2, st[1] - 1], [sx, sy + 2.5], 1.1, 0.55, 0.8);\n    stroke(D2, sx, sy + 2.5, sx, sy + 0.8, 0.4, 0.5, 0.8);\n    blob(D2, sx, sy, 1.3, 1.1, 0.95);\n  });\n  grow(D2, 27, 124, PI - 0.15, 1, 24, 2, 0.8, true);\n  grow(D2, 39, 124, 0.12, 1, 24, 2, 0.8, true);\n  grow(D2, 28, 118, PI + 0.6, 0.8, 12, 1, 0.75, true);\n  grow(D2, 38, 118, -0.6, 0.8, 12, 1, 0.75, true);\n  nucleus(D2, NU, S2[0] + 0.3, S2[1] + 0.5, 3.2, 2.8);\n\n  // Neighbouring neurons, out of focus, each with a calcium flicker of its own.\n  [[8, 36], [56, 58], [9, 84]].forEach((c, j) => {\n    const L = F32(N), x = c[0] + (rnd() - 0.5) * 4, y = c[1] + (rnd() - 0.5) * 6;\n    blob(L, x, y, 3.2, 2.8, 0.7);\n    for (let d = 0; d \u003c 4; d++) grow(L, x, y, (d / 4) * 2 * PI + rnd(), 0.8, 10 + 8 * rnd(), 1, 0.65, false);\n    blur(L);\n    merge(S, L, j);\n    blob(NU, x, y, 1.8, 1.6, 0.3, 2);\n  });\n\n  // Two myelinated axons of other cells cross behind, with nodes of their\n  // own. Their sheaths and the oligodendrocytes go into GD, the layer that\n  // Damage takes apart, each piece with its own breaking point in GZ.\n  const { GD, GZ } = S;\n  const tmp = F32(N);\n  [[-3, 47 + rnd() * 4, 67, 43 + rnd() * 4], [-3, 69 + rnd() * 4, 67, 82 + rnd() * 4]].forEach((A, n) => {\n    const len = hypot(A[2] - A[0], A[3] - A[1]), ux = (A[2] - A[0]) / len, uy = (A[3] - A[1]) / len;\n    const bow = (n ? -3 : 3) * (0.6 + 0.4 * rnd());\n    const at = (s) => [A[0] + ux * s - uy * bow * sin((PI * s) / len), A[1] + uy * s + ux * bow * sin((PI * s) / len)];\n    const nodes = [];\n    for (let s = 2 + rnd() * 8; s \u003c len; s += 10) nodes.push(at(s));\n    for (let j = 0; j \u003c nodes.length - 1; j++) {\n      const p = nodes[j], q = nodes[j + 1], dx = (q[0] - p[0]) / 10, dy = (q[1] - p[1]) / 10;\n      tmp.fill(0);\n      sheath(tmp, p[0] + dx * 1.2, p[1] + dy * 1.2, q[0] - dx * 1.2, q[1] - dy * 1.2, 1.5, 0.27);\n      mark(GD, GZ, tmp, 0.15 + 0.85 * rnd());\n    }\n    tmp.fill(0);\n    for (const p of nodes) blob(tmp, p[0], p[1], 0.6, 0.6, 0.4);\n    merge(S, tmp, 3);\n    S.na.push({ nodes, sp: [] });\n  });\n\n  // Oligodendrocytes, the glia that wrap the sheaths, reaching to the axon.\n  const og = [[19 + rnd() * 3, 61, -1, [55, 66]], [44 + rnd() * 3, 76, 1, [70, 82]]];\n  for (const [x, y, side, ys] of og) {\n    tmp.fill(0);\n    blob(tmp, x, y, 2.2, 1.9, 0.6);\n    for (const ty of ys) {\n      const tx = AX(ty) + side * 2.4;\n      curve(tmp, [x, y], [(x + tx) / 2, y + (ty - y) * 0.15 + (rnd() - 0.5) * 3], [tx, ty], 0.5, 0.42, 0.34);\n    }\n    mark(GD, GZ, tmp, 0.35 + 0.3 * rnd());\n  }\n  // Astrocytes, small stars of fine processes.\n  for (const [x, y] of [[54, 31], [52, 95], [12, 70]]) {\n    blob(GL, x, y, 1.3, 1.2, 0.42);\n    for (let d = 0; d \u003c 8; d++) grow(GL, x, y, (d / 8) * 2 * PI + rnd() * 0.7, 0.5, 3 + 6 * rnd(), 0, 0.22 + 0.1 * rnd(), false);\n  }\n  // Nuclei of every other cell in the slice, in the blue stain.\n  for (let n = 0; n \u003c 26; n++) {\n    const x = rnd() * W, y = rnd() * H;\n    if (hypot(x - S1[0], y - S1[1]) \u003c 10 || hypot(x - S2[0], y - S2[1]) \u003c 10) continue;\n    if (y > 26 && y \u003c 94 && abs(x - AX(y)) \u003c 5) continue;\n    blob(NU, x, y, 1.4 + rnd() * 0.8, 1.2 + rnd() * 0.6, 0.2 + rnd() * 0.16, 1.5);\n  }\n  // Dark tissue: a faint, uneven autofluorescence.\n  const g = F32(9 * 17).map(rnd), g2 = F32(17 * 33).map(rnd);\n  const samp = (G, gw, x, y) => {\n    const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, at = (a, b) => G[b * gw + a];\n    return (at(ix, iy) * (1 - fx) + at(ix + 1, iy) * fx) * (1 - fy) + (at(ix, iy + 1) * (1 - fx) + at(ix + 1, iy + 1) * fx) * fy;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const n = 0.65 * samp(g, 9, x / 8, y / 8) + 0.35 * samp(g2, 17, x / 4, y / 4);\n      TI[y * W + x] = 0.02 + 0.055 * n * n;\n      S.H1[y * W + x] = exp(-((x + 0.5 - S1[0]) ** 2 + (y + 0.5 - S1[1]) ** 2) / 240);\n      S.H2[y * W + x] = exp(-((x + 0.5 - S2[0]) ** 2 + (y + 0.5 - S2[1]) ** 2) / 240);\n    }\n}\n\n// A sheath seen from above: bright walls and a dark line down the middle.\nfunction sheath(L, ax, ay, bx, by, R, wt) {\n  for (let y = max(0, floor(min(ay, by) - R - 1)); y \u003c= min(H - 1, ceil(max(ay, by) + R + 1)); y++)\n    for (let x = max(0, floor(min(ax, bx) - R - 1)); x \u003c= min(W - 1, ceil(max(ax, bx) + R + 1)); x++) {\n      const d = seg(x + 0.5, y + 0.5, ax, ay, bx, by);\n      const v = clamp(R + 0.5 - d, 0, 1) * (0.3 + 0.7 * sstep(0.1, R, d)) * wt;\n      const i = y * W + x;\n      if (v > L[i]) L[i] = v;\n    }\n}\n\nfunction hsv(h, s, v) {\n  h = ((h % 1) + 1) % 1;\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction colours(S, dye) {\n  S.dye = dye;\n  const h = 0.33 + dye;\n  S.c1 = hsv(h, 0.88, 1);\n  S.c2 = hsv(h + 0.53, 0.78, 1);\n  S.cm = hsv(h - 0.21, 0.3, 1);\n  S.cn = hsv(h + 0.31, 0.8, 1);\n  S.ct = hsv(h + 0.2, 0.55, 1);\n}\n\n// The sheaths for this much damage: each thins and breaks by its own measure.\nfunction myelin(S, dmg) {\n  S.dmg = dmg;\n  for (let k = 0; k \u003c NSH; k++) S.m[k] = clamp(1 - dmg * (0.8 + 0.7 * S.mr[k]), 0, 1);\n  const { tI, tY, tR, tK, tJ, MY, X1, X1v } = S;\n  X1v.set(X1);\n  for (let j = 0; j \u003c tI.length; j++) {\n    const i = tI[j], k = tK[j];\n    MY[i] = 0;\n    if (k \u003c 0) continue;\n    const m = S.m[k], y = tY[j], r = abs(tR[j]);\n    const Rs = 2.75 * (0.45 + 0.55 * m);\n    const dy = max(0, sa(k) + Rs - y, y - (sb(k) - Rs));\n    const cov = clamp(0.5 - (hypot(r, dy) - Rs), 0, 1);\n    const thr = (1 - m) * 1.3 - 0.15;\n    const row = clamp(floor(y - sa(k) + 0.5), 0, 13);\n    const pres = sstep(thr - 0.1, thr + 0.1, S.nz[k * 14 + row] + 0.12 * tJ[j]);\n    MY[i] = cov * pres * (0.18 + 0.82 * sstep(0.2, 1.5, r)) * (0.5 + 0.25 * m);\n    X1v[i] = X1[i] * (1 - 0.9 * pres * cov);\n  }\n  const thr = dmg * 1.3 - 0.15;\n  for (let i = 0; i \u003c N; i++) S.GV[i] = S.GL[i] + (S.GD[i] ? S.GD[i] * sstep(thr - 0.1, thr + 0.1, S.GZ[i]) : 0);\n}\n\n// A spike's timetable at this much damage: when it reaches each node and how\n// strong it is there. It dies inside a sheath that is too far gone.\nfunction table(S) {\n  const { tN, aN, m } = S;\n  tN[0] = (SA - YH) / V_AIS;\n  aN[0] = 1;\n  S.blk = -1;\n  for (let k = 0; k \u003c NSH; k++) {\n    const v = V_SLOW + (V_FAST - V_SLOW) * m[k] * m[k];\n    const A0 = aN[k];\n    const A1 = A0 * (1 - 0.36 * (1 - m[k]) ** 1.2);\n    S.tA[k] = tN[k] + 0.5 / V_NODE;\n    S.tB[k] = S.tA[k] + SL / v;\n    (S.AA[k] = A0), (S.AB[k] = A1);\n    if (A1 \u003c 0.3) {\n      const f = (A0 - 0.3) / (A0 - A1);\n      S.blk = k;\n      S.blkY = sa(k) + SL * f;\n      S.blkT = S.tA[k] + (SL * f) / v;\n      for (let j = k + 1; j \u003c= NSH; j++) {\n        tN[j] = 1e9;\n        aN[j] = 0;\n      }\n      break;\n    }\n    tN[k + 1] = S.tB[k] + 1 / V_NODE;\n    aN[k + 1] = A1;\n  }\n  S.tT = tN[NSH] + (YB - NODE[NSH]) / V_NODE;\n  let end = 0;\n  for (let b = 0; b \u003c 5; b++) {\n    S.tBo[b] = S.tT + S.blen[b] / V_TERM;\n    end = max(end, S.tBo[b]);\n  }\n  S.tEnd = (S.blk >= 0 ? S.blkT : end) + 0.8;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  const dye = clamp(k[0], 0, 1);\n  const rate = clamp(k[2], 1, 8);\n  if (dye !== S.dye) colours(S, dye);\n  const dmg = clamp(k[3], 0, 1);\n  if (abs(dmg - S.dmg) > 0.001) myelin(S, dmg);\n  table(S);\n  // Slide time: Speed 2 is real time.\n  const st = (dt * clamp(k[1], 0.2, 3)) / 2;\n  S.t += st;\n  if (S.t >= S.next) {\n    S.q.push(S.t, S.t + 0.2, S.t + 0.4);\n    S.next = S.t + (1.8 / rate ** 0.8) * (0.75 + 0.5 * rnd());\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    for (let j = 0; j \u003c 4; j++) S.q.push(S.t + j * 0.15);\n    S.next = max(S.next, S.t + 1.2);\n  }\n  S.q.sort((a, b) => a - b);\n  while (S.q.length && S.q[0] \u003c= S.t) {\n    S.sp.push({ t: S.t - S.q.shift(), p: -1 });\n    S.ca1 += 0.3 * (1.25 - S.ca1);\n  }\n  // Each spike moves on; one reaching a bouton releases its vesicles.\n  for (const p of S.sp) {\n    p.p = p.t;\n    p.t += st;\n    for (let b = 0; b \u003c 5; b++)\n      if (p.p \u003c S.tBo[b] && p.t >= S.tBo[b])\n        for (let n = 0; n \u003c 3; n++) {\n          const B = BOUT[b];\n          S.ves.push({ b, a: S.aN[NSH], x: B[0] + (rnd() - 0.5) * 2, y: B[1] + 1.2, tx: B[0] + (rnd() - 0.5) * 1.6, ty: B[1] + CLEFT - 1, age: -n * 0.05, dur: 0.3 + 0.2 * rnd() });\n        }\n  }\n  S.sp = S.sp.filter((p) => p.t \u003c S.tEnd);\n  for (const v of S.ves) {\n    v.age += st;\n    if (v.age >= v.dur) {\n      S.v2 += (0.75 * v.a) / 15;\n      S.Fs[v.b] += 0.3;\n    }\n  }\n  S.ves = S.ves.filter((v) => v.age \u003c v.dur);\n  // The second neuron fires once enough transmitter has landed.\n  if (S.v2 >= 1) {\n    (S.v2 = 0.15), (S.ca2 = min(1.3, S.ca2 + 0.8)), (S.f2 = 1);\n  }\n  (S.ca1 *= exp(-st / 0.9)), (S.v2 *= exp(-st / 0.6)), (S.ca2 *= exp(-st / 1.1)), (S.f2 *= exp(-st / 0.15));\n  for (let b = 0; b \u003c 5; b++) S.Fs[b] *= exp(-st / 0.25);\n  for (let j = 0; j \u003c 3; j++) {\n    S.caN[j] *= exp(-st / 1.4);\n    if (rnd() \u003c st * 0.3) S.caN[j] += 0.7;\n  }\n  // The neighbouring axons carry spikes now and then too.\n  for (const A of S.na) {\n    for (const p of A.sp) p.t += st;\n    A.sp = A.sp.filter((p) => p.t \u003c A.nodes.length * 0.1 + 0.5);\n    if (rnd() \u003c st * 0.5) A.sp.push({ t: 0, back: rnd() \u003c 0.5 });\n  }\n}\n\n// A bright point with a soft halo, added into layer L.\nfunction bloom(L, cx, cy, amp, rc, rh, ha) {\n  if (amp \u003c 0.004) return;\n  const R = ceil(rh * 2.2);\n  for (let y = max(0, floor(cy - R)); y \u003c= min(H - 1, ceil(cy + R)); y++)\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const d2 = (x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2;\n      L[y * W + x] += amp * (exp(-d2 / (rc * rc)) + ha * exp(-d2 / (rh * rh)));\n    }\n}\n\nconst pulse = (u, tau) => (u \u003c -0.03 ? 0 : u \u003c 0 ? 1 + u / 0.03 : exp(-u / tau));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.c1) return;\n  const { SP1, SP2, tN, aN, Fn, Fb, tI, tY, tR, tK, MY } = S;\n  for (const A of [SP1, SP2, Fn, Fb]) A.fill(0);\n  let hill = 0;\n  for (const p of S.sp) {\n    const t = p.t;\n    hill += exp(-t / 0.12);\n    for (let j = 0; j \u003c= NSH; j++) Fn[j] += aN[j] * pulse(t - tN[j], 0.08);\n    // The front: always seen in the bare initial segment, seen in a sheath\n    // only as far as its myelin is gone.\n    let yf = -1, amp = 0;\n    if (t \u003c tN[0]) {\n      yf = YH + ((SA - YH) * t) / tN[0];\n      amp = 1;\n    } else\n      for (let k = 0; k \u003c NSH; k++) {\n        if (S.blk === k && t >= S.blkT) {\n          yf = S.blkY;\n          amp = 0.3 * exp(-(t - S.blkT) / 0.25);\n        } else if (t >= S.tA[k] && t \u003c S.tB[k]) {\n          const f = (t - S.tA[k]) / (S.tB[k] - S.tA[k]);\n          yf = sa(k) + SL * f;\n          amp = (S.AA[k] + (S.AB[k] - S.AA[k]) * f) * (1 - S.m[k]) ** 0.8;\n        }\n      }\n    if (yf >= 0 && amp > 0.01) {\n      for (let y = max(YH, floor(yf - 9)); y \u003c= min(H - 1, ceil(yf + 3)); y++)\n        for (let j = S.row[y]; j \u003c S.row[y + 1]; j++) {\n          const dy = tY[j] - yf;\n          const w = exp((-dy * dy) / 2.2) + (dy \u003c 0 ? 0.35 * exp(dy / 3.5) : 0);\n          const r2 = tR[j] * tR[j];\n          SP1[tI[j]] += amp * w * (1.1 * exp(-r2 / 0.9) + 0.15 * exp(-r2 / 6));\n        }\n    }\n    // Down the terminal branches to the boutons.\n    if (t >= S.tT && t \u003c S.tT + 1.2) {\n      const sf = (t - S.tT) * V_TERM;\n      const a = aN[NSH];\n      for (let j = 0; j \u003c S.ti.length; j++) {\n        const s = S.ts[j];\n        if (s > S.blen[S.tb[j]] + 1) continue;\n        const d = s - sf;\n        if (d > -8 && d \u003c 8) SP1[S.ti[j]] += a * S.tc[j] * 1.1 * exp((-d * d) / 3);\n      }\n    }\n    for (let b = 0; b \u003c 5; b++) Fb[b] += aN[NSH] * pulse(t - S.tBo[b], 0.18);\n  }\n  // Node flashes, and the sheaths on either side glowing with them.\n  bloom(SP1, AX(29.5), 29.5, min(1.5, hill) * 0.5, 2, 4.5, 0.4);\n  for (let j = 0; j \u003c= NSH; j++) bloom(SP1, AX(NODE[j]), NODE[j], Fn[j] * (j ? 1 : 0.7), 1.1, 3.4, 0.4);\n  for (let j = 0; j \u003c tI.length; j++) {\n    const k = tK[j];\n    if (k \u003c 0) continue;\n    const g = max(Fn[k], Fn[k + 1]);\n    if (g > 0.01) SP1[tI[j]] += 0.9 * g * MY[tI[j]];\n  }\n  for (let b = 0; b \u003c 5; b++) {\n    bloom(SP1, BOUT[b][0], BOUT[b][1], Fb[b], 1.6, 4, 0.4);\n    bloom(SP2, BOUT[b][0], BOUT[b][1] + CLEFT, S.Fs[b], 1.3, 3.5, 0.35);\n  }\n  // Vesicles crossing the clefts.\n  for (const v of S.ves) {\n    if (v.age \u003c 0) continue;\n    const u = v.age / v.dur;\n    const e = u * u * (3 - 2 * u);\n    bloom(SP1, v.x + (v.tx - v.x) * e, v.y + (v.ty - v.y) * e, 0.7 * (1 - 0.4 * u), 0.6, 1.8, 0.15);\n  }\n  for (const A of S.na)\n    for (const p of A.sp) {\n      const n = A.nodes.length;\n      for (let j = 0; j \u003c n; j++) {\n        const u = p.t - j * 0.1;\n        if (u > -0.03 && u \u003c 0.5) {\n          const q = A.nodes[p.back ? n - 1 - j : j];\n          bloom(SP1, q[0], q[1], 0.55 * pulse(u, 0.08), 0.9, 2.6, 0.35);\n        }\n      }\n    }\n\n  const { D1, X1v, D2, NU, NB, NBI, GV, TI, H1, H2, c1, c2, cm, cn, ct } = S;\n  const k1 = 0.28 + 0.95 * S.ca1;\n  const kx = 0.62 + 0.4 * S.ca1;\n  const kh1 = 0.03 + 0.32 * S.ca1;\n  const k2 = 0.27 + 0.4 * S.v2 + 1 * S.ca2 + 0.5 * S.f2;\n  const kh2 = 0.03 + 0.3 * S.ca2;\n  const kn = [0.45 + 1.4 * S.caN[0], 0.45 + 1.4 * S.caN[1], 0.45 + 1.4 * S.caN[2], 1];\n  for (let i = 0; i \u003c N; i++) {\n    const v1 = D1[i] * k1 + X1v[i] * kx + NB[i] * kn[NBI[i]] + H1[i] * kh1 + SP1[i];\n    const v2 = D2[i] * k2 + H2[i] * kh2 + SP2[i];\n    const vm = MY[i] + GV[i];\n    const vn = NU[i];\n    const vt = TI[i];\n    let r = 255 * (v1 * c1[0] + v2 * c2[0] + vm * cm[0] + vn * cn[0] + vt * ct[0]);\n    let g = 255 * (v1 * c1[1] + v2 * c2[1] + vm * cm[1] + vn * cn[1] + vt * ct[1]);\n    let b = 255 * (v1 * c1[2] + v2 * c2[2] + vm * cm[2] + vn * cn[2] + vt * ct[2]);\n    // Where a label saturates the camera it bleaches toward white.\n    const top = max(r, g, b);\n    if (top > 210) {\n      const e = (top - 210) * 0.5;\n      r += e;\n      g += e;\n      b += e;\n    }\n    display.setPixel(i % W, (i / W) | 0, min(255, r), min(255, g), min(255, b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dye=0..1, Speed=0.2..3, Rate=1..8, Damage=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dye","min":0,"max":1,"about":"The fluorescent labels, turning round the colour wheel together. At 0 the neuron is GFP green and the second neuron magenta, on cream myelin with blue nuclei."},{"name":"Speed","min":0.2,"max":3,"about":"The clock of the whole slide: at 2 a healthy spike takes about a second from the cell body to the terminals, and at 0.2 everything runs ten times slower."},{"name":"Rate","min":1,"max":8,"about":"How often the neuron fires: a burst of three spikes every 1.8 s at 1, up to about nine spikes a second at 8."},{"name":"Damage","min":0,"max":1,"about":"Demyelination. At 0 the sheaths are whole and a spike leaps from node to node. As it rises the sheaths thin and break, and the spike crawls through the bare stretches, fading as it goes. Past about 0.3 the second neuron no longer answers, and near 1 the spike dies in the bare axon before it reaches the terminals."}],"start":[0,2,1,0.06],"measures":{"motion":0.2284,"detail":0.0799,"edges":0.4159,"complexity":1.8734,"coverage":0.4953,"colour":0.2394,"drift":0.0867},"knobResponse":[0.1239,0.0564,0.0498,0.061]},{"slug":"bait-ball","title":"Bait Ball","family":"ocean","round":23,"note":"옆에서 본 푸른 바다를 정어리 떼 공이 거의 다 채워요. 떼가 한꺼번에 몸을 틀면 은빛 물결이 공을 가로지르고, 등을 돌리면 짙은 남색으로 가라앉아요. 상어와 돌고래가 뚫고 지나간 구멍은 뒤에서 다시 닫히고, 가넷이 수면에서 거품 꼬리를 끌며 내리꽂혀요.","idea":"Seen from the side in open blue water, a sardine bait ball fills the panel with a thousand fish churning in layers, and when the school turns together a wave of silver runs across it until it turns away again and shows its dark blue backs, while sharks and dolphins charge through and gannets dive in from the surface, punching holes that close behind them.","buttons":"K1 tap sends a hunter charging through the ball now.","code":"// ===== Patternflow pattern =====\n// Title:   Bait Ball\n// Family:  ocean\n// Idea:    Seen from the side in open blue water, a sardine bait ball fills the panel with a thousand fish churning in layers, and when the school turns together a wave of silver runs across it until it turns away again and shows its dark blue backs, while sharks and dolphins charge through and gannets dive in from the surface, punching holes that close behind them.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the sardine bait balls of the Sardine Run\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Speed=0.2..3, Predators=1..5, Sun=0..1\n//\n// Knob 1: Water. The colour of the sea: the clear blue of open ocean at 0, turning to the green of plankton-rich coastal water at 1.\n// Knob 2: Speed. How fast the school and its hunters move: at 2 a turn runs across the ball in just over a second, and the school shows its flanks for five to eight seconds before it turns away; at 0.2 it all runs ten times slower.\n// Knob 3: Predators. How many sharks and dolphins work the ball, from one to five. More hunters charge more often and bring more gannets with them. The school packs tighter against them.\n// Knob 4: Sun. The time of day, from noon of a Sardine Run winter at 0, when the sun stands 35 degrees up and its rays lean 38 degrees in the water, to late afternoon at 1. Toward 1 the rays lean further and fade as the sea darkens. The flash dims to cold steel.\n// Buttons: K1 tap sends a hunter charging through the ball now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Fish swim in rows one LED apart, each two body lengths behind the next and\n// one length along from the fish in the rows above and below, as schools space themselves.\nconst ROWS = 124;\nconst GAP = 6;\n// Each row's fish wrap round this length, wider than the panel so the wrap stays out of sight.\nconst SPAN = 84;\n// Rows swim in bands this deep, each band the other way from the next: the ball mills.\nconst BAND = 13;\n// How fast a turning front runs, in LEDs per second at Speed 2.\nconst SWEEP = 80;\nconst { min, max, sin, exp, sqrt, round, floor, atan2, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst hash = (a, b) => {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// A dusky shark and a common dolphin, nose to the right: # back, b belly, h the dolphin's tan flank, e eye.\nconst SHARK = [\n  \"..........#.........\",\n  \".........##.........\",\n  \"#.......##########..\",\n  \"##...###############\",\n  \".##############e####\",\n  \"##...bbbbbbbbbbbbbb.\",\n  \"#........#.....#....\",\n];\nconst DOLPHIN = [\n  \"........#..........\",\n  \".......##..........\",\n  \"...###########.....\",\n  \"##############e##..\",\n  \".##hhhhhhbbbbbbbbbb\",\n  \"##...bbbbbbbbb.....\",\n  \".........#.........\",\n];\nconst SHARK_C = { \"#\": [30, 40, 54], b: [74, 84, 96], e: [4, 4, 6] };\nconst DOLPHIN_C = { \"#\": [40, 48, 66], b: [128, 136, 148], h: [118, 104, 70], e: [4, 4, 6] };\n\nexport function setup(params) {\n  const fu = [];\n  const fr = [];\n  for (let j = 0; j \u003c ROWS; j++)\n    for (let u = (j & 1) * (GAP / 2); u \u003c SPAN - 1; u += GAP) {\n      fu.push(u + (Math.random() - 0.5) * 1.4);\n      fr.push(j);\n    }\n  const n = fu.length;\n  const R = (a, b) => Float32Array.from({ length: n }, () => a + Math.random() * b);\n  const v = new Float32Array(ROWS);\n  for (let j = 0; j \u003c ROWS; j++) {\n    const b = floor(j / BAND);\n    v[j] = (b & 1 ? -1 : 1) * (3.2 + 2.4 * sin(b * 2.1 + 0.4));\n  }\n  params.s = {\n    fu: Float32Array.from(fu),\n    fr: Uint8Array.from(fr),\n    edge: R(0, 1),\n    lag: R(0, 1),\n    ph: R(0, 6.283),\n    v,\n    off: new Float32Array(ROWS),\n    buf: new Float32Array(N * 3),\n    clear: new Float32Array(N),\n    lt: new Float32Array(129),\n    rt: new Float32Array(440),\n    tau: 0,\n    base: 0,\n    ev: [],\n    next: 2.08,\n    nextTo: 1,\n    nextDir: 1,\n    hunters: [],\n    gannets: [],\n    bubbles: [],\n    holes: [],\n    // The first hunter charges just as the panel has opened, and the school turns from it.\n    slots: Float32Array.from({ length: 5 }, (_, k) => 2.1 + k * (1.7 + Math.random() * 1.2)),\n    gTimer: 3.2 + Math.random(),\n    queue: [],\n    k: [0, 2, 1, 0.06],\n  };\n}\n\nfunction charge(S, from) {\n  const dir = from || (Math.random() \u003c 0.5 ? 1 : -1);\n  S.hunters.push({\n    kind: Math.random() \u003c 0.5 ? 0 : 1,\n    dir,\n    x: dir > 0 ? -18 : W + 18,\n    y0: S.cy + (Math.random() * 2 - 1) * S.ry * 0.55,\n    y: 0,\n    sp: 38 + Math.random() * 16,\n    ph: Math.random() * 6.283,\n    drop: 0,\n  });\n}\n\nfunction dive(S, delay) {\n  S.queue.push({ at: S.tau + delay, x: 8 + Math.random() * 48 });\n}\n\n// How far a turn has carried a point: 0 shows the backs, 1 the silver flanks.\n// Each front is kept as one position per row. TG is the flash right on the\n// front, where the fish are mid-turn.\nlet TG = 0;\nfunction fronts(S) {\n  for (const e of S.ev) {\n    if (!e.row) e.row = new Float32Array(H);\n    const X = (S.tau - e.at) * SWEEP - 12;\n    for (let y = 0; y \u003c H; y++) e.row[y] = X - 9 * sin(y * 0.045 + e.ph) - 0.2 * (y - 64) * e.tilt;\n  }\n}\nfunction turned(S, x, y, lag) {\n  let s = S.base;\n  TG = 0;\n  const yi = y \u003c 0 ? 0 : y > H - 1 ? H - 1 : y | 0;\n  for (const e of S.ev) {\n    const d = e.row[yi] - (e.dir > 0 ? x : 63 - x) - lag * 8;\n    if (d \u003c= 0) continue;\n    if (d >= 8) {\n      s = e.to;\n      continue;\n    }\n    const p = sstep(0, 8, d);\n    TG = max(TG, 4 * p * (1 - p));\n    s += (e.to - s) * p;\n  }\n  return s;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || S.k;\n  S.k = [clamp(k[0], 0, 1), clamp(k[1], 0.2, 3), clamp(k[2], 1, 5), clamp(k[3], 0, 1)];\n  dt = clamp(dt || 0, 0, 0.1);\n  const d = dt * (S.k[1] / 2);\n  S.tau += d;\n  const t = S.tau;\n  const hunt = round(S.k[2]);\n  // The more hunters, the tighter the school packs.\n  const sc = 1 - 0.055 * (S.k[2] - 1);\n  S.cx = 32 + 2.5 * sin(t * 0.17);\n  S.cy = 73 + 3 * sin(t * 0.13 + 1);\n  S.rx = 32 * sc;\n  S.ry = 61 * sc;\n  for (let j = 0; j \u003c ROWS; j++) S.off[j] += S.v[j] * d;\n\n  // The turns: the first comes just after the panel opens on dark backs.\n  if (t >= S.next) {\n    S.ev.push({ at: S.next, to: S.nextTo, dir: S.nextDir, ph: Math.random() * 6.283, tilt: Math.random() * 2 - 1 });\n    const first = S.ev.length === 1 && S.next \u003c 3;\n    S.next += S.nextTo ? (first ? 7.3 : 5 + Math.random() * 3) : 2.6 + Math.random() * 2;\n    S.nextTo = 1 - S.nextTo;\n    S.nextDir = first ? -1 : Math.random() \u003c 0.5 ? 1 : -1;\n  }\n  // A front that has left the panel is folded into the base state.\n  while (S.ev.length && (t - S.ev[0].at) * SWEEP > 130) S.base = S.ev.shift().to;\n\n  // Hunters from the sides, each on its own clock.\n  for (let i = 0; i \u003c 5; i++) {\n    if (i >= hunt) continue;\n    S.slots[i] -= d;\n    if (S.slots[i] \u003c= 0) {\n      // The first comes in from the left, the side the first turn starts from.\n      charge(S, S.charged ? 0 : 1);\n      S.charged = true;\n      S.slots[i] = 3 + Math.random() * 4;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) charge(S);\n  // Gannets come in volleys of two to four.\n  S.gTimer -= d * (0.6 + 0.4 * hunt);\n  if (S.gTimer \u003c= 0) {\n    const m = 2 + floor(Math.random() * 3);\n    for (let i = 0; i \u003c m; i++) dive(S, i * (0.2 + Math.random() * 0.3));\n    S.gTimer = 4 + Math.random() * 4;\n  }\n  for (let i = S.queue.length - 1; i >= 0; i--) {\n    const q = S.queue[i];\n    if (t \u003c q.at) continue;\n    S.queue.splice(i, 1);\n    S.gannets.push({ x: q.x, y: -3, vx: (Math.random() * 2 - 1) * 14, vy: 100 + Math.random() * 30, up: false, last: 0 });\n  }\n\n  for (let i = S.hunters.length - 1; i >= 0; i--) {\n    const h = S.hunters[i];\n    h.x += h.dir * h.sp * d;\n    h.y = h.y0 + 7 * sin(h.x * 0.035 + h.ph);\n    h.drop += d;\n    if (h.drop > 0.07) {\n      h.drop = 0;\n      S.holes.push({ x: h.x + h.dir * 5, y: h.y, r: 10.5, age: 0, life: 0.9 });\n    }\n    if (h.x \u003c -36 || h.x > W + 36) S.hunters.splice(i, 1);\n  }\n  for (let i = S.gannets.length - 1; i >= 0; i--) {\n    const g = S.gannets[i];\n    const wet = g.y > 2;\n    g.x += g.vx * d;\n    g.y += g.vy * d;\n    if (!wet && g.y > 2) {\n      // The splash: a burst of air dragged under.\n      for (let b = 0; b \u003c 16; b++) bubble(S, g.x + (Math.random() * 2 - 1) * 4, 3 + Math.random() * 8);\n    }\n    if (g.y > 2 && !g.up) {\n      g.vy *= exp(-1.5 * d);\n      g.vx *= exp(-1.5 * d);\n      if (Math.random() \u003c 0.9) bubble(S, g.x - g.vx * 0.04, g.y - 3 - Math.random() * 3);\n      if (g.vy \u003c 20) {\n        g.up = true;\n        g.vy = -32;\n      }\n    }\n    g.last += d;\n    if (g.y > 2 && g.last > 0.06) {\n      g.last = 0;\n      S.holes.push({ x: g.x, y: g.y, r: 4.5, age: 0, life: 0.9 });\n    }\n    if (g.up && g.y \u003c -4) S.gannets.splice(i, 1);\n  }\n  for (let i = S.bubbles.length - 1; i >= 0; i--) {\n    const b = S.bubbles[i];\n    b.age += d;\n    b.y -= b.vy * d;\n    b.x += sin(b.age * 6 + b.ph) * 4 * d;\n    if (b.age > b.life || b.y \u003c 1) S.bubbles.splice(i, 1);\n  }\n  for (let i = S.holes.length - 1; i >= 0; i--) {\n    S.holes[i].age += d;\n    if (S.holes[i].age > S.holes[i].life) S.holes.splice(i, 1);\n  }\n}\n\nfunction bubble(S, x, y) {\n  if (S.bubbles.length \u003c 400) S.bubbles.push({ x, y, vy: 9 + Math.random() * 12, age: 0, life: 1.2 + Math.random() * 1.6, ph: Math.random() * 6.283 });\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.cx === undefined) return;\n  const { buf } = S;\n  const t = S.tau;\n  const [wq, , , sun] = S.k;\n  // The sea: clear blue to coastal green, light near the surface and deep below.\n  const top = [mix(30, 50, wq), mix(118, 150, wq), mix(196, 120, wq)];\n  const deep = [mix(4, 8, wq), mix(30, 52, wq), mix(84, 44, wq)];\n  const day = 1 - 0.45 * sun;\n  // Rays bend into the water: 55 degrees off the vertical above it is 38 below, 82 is 48.\n  const slope = mix(0.78, 1.11, sun);\n  const rayS = mix(1, 0.3, sun) * day;\n  // Low sun reaches the school through more water, so the flash cools as it dims.\n  const silver = [mix(242, 200, sun), mix(249, 214, sun), mix(255, 232, sun)];\n  const flash = mix(1, 0.7, sun);\n  const back = [mix(12, 10, wq), mix(28, 42, wq), mix(52, 40, wq)];\n  const glow = [10 * flash, 16 * flash, 22 * flash];\n  const { cx, cy, rx, ry } = S;\n  // The ball's outline, one radius for each of 128 directions, and the rays by where they leave the surface.\n  const { lt, rt, clear } = S;\n  for (let i = 0; i \u003c= 128; i++) {\n    const th = -PI + (i * PI) / 64;\n    lt[i] = 1 + 0.08 * sin(3 * th + 0.45 * t) + 0.06 * sin(5 * th - 0.7 * t + 1) + 0.05 * sin(2 * th + 0.25 * t + 2);\n  }\n  const lump = (th) => lt[round(((th + PI) * 64) / PI)];\n  for (let i = 0; i \u003c rt.length; i++) {\n    const u = i / 2 - 150;\n    const ray = sin(u * 0.23 + t * 0.35) + 0.8 * sin(u * 0.41 - t * 0.27 + 1.3) + 0.6 * sin(u * 0.13 + t * 0.15 + 2) - 0.9;\n    rt[i] = ray > 0 ? ray : 0;\n  }\n  fronts(S);\n  // Where the hunters have just been, the ball is open and the sea shows through.\n  clear.fill(0);\n  for (const h of S.holes) {\n    const rr = (h.rr = h.r * (1 - h.age / h.life) ** 0.6);\n    for (let y = max(0, floor(h.y - rr)); y \u003c= min(H - 1, h.y + rr); y++)\n      for (let x = max(0, floor(h.x - rr * 1.6)); x \u003c= min(W - 1, h.x + rr * 1.6); x++) {\n        const dd = sqrt(((x - h.x) / 1.6) ** 2 + (y - h.y) ** 2);\n        const c = 1 - sstep(0.45 * rr, 0.8 * rr, dd);\n        if (c > clear[y * W + x]) clear[y * W + x] = c;\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    const dz = y / (H - 1);\n    const f = dz ** 0.8;\n    const wr = mix(top[0], deep[0], f) * day;\n    const wg = mix(top[1], deep[1], f) * day;\n    const wb = mix(top[2], deep[2], f) * day;\n    const fade = exp(-y / 60) * rayS;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      // Sun rays: bright where the waves above focus the light, leaning with the sun.\n      const u = x - slope * y;\n      const ray = rt[((u + 150) * 2) | 0] * fade;\n      let r = wr + ray * 46;\n      let g = wg + ray * 60;\n      let b = wb + ray * 58;\n      const ddx = (x - cx) / rx;\n      const ddy = (y - cy) / ry;\n      const q0 = sqrt(ddx * ddx + ddy * ddy);\n      // The outline only matters near it: the lumps change the radius by a fifth at most.\n      const q = q0 \u003c 0.7 || q0 > 1.8 ? q0 : q0 / lump(atan2(ddy, ddx));\n      if (q \u003c 1.5) {\n        // Inside the ball the fish shade the water; outside it, light thrown off their flanks.\n        const m0 = 1 - sstep(0.88, 1.05, q);\n        const c = clear[y * W + x];\n        const m = m0 * (1 - c);\n        const s = turned(S, x, y, 0.5);\n        const sh = 1 - 0.9 * m;\n        const hl = (s + 0.6 * TG) * (1.6 * m + 0.6 * c * m0 + (1 - m0) * 3.4 * (1 - sstep(1, 1.5, q)));\n        r = r * sh + glow[0] * hl;\n        g = g * sh + glow[1] * hl;\n        b = b * sh + glow[2] * hl;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n\n  // The fish.\n  const { fu, fr, edge, lag, ph, v, off, holes } = S;\n  const tick = floor(t * 6);\n  for (let i = 0; i \u003c fu.length; i++) {\n    const j = fr[i];\n    let u = (fu[i] + off[j]) % SPAN;\n    if (u \u003c 0) u += SPAN;\n    let x = cx + u - SPAN / 2;\n    if (x \u003c -4 || x > W + 3) continue;\n    let y = cy + (j - (ROWS - 1) / 2) + 1.2 * sin(x * 0.085 + t * 0.6);\n    const ddx = (x - cx) / rx;\n    const ddy = (y - cy) / ry;\n    const q0 = sqrt(ddx * ddx + ddy * ddy);\n    if (q0 > 0.74 && q0 / lump(atan2(ddy, ddx)) > 0.93 + 0.1 * edge[i]) continue;\n    // Holes the hunters punch: fish inside are pushed to the rim and flash as they flee.\n    let startle = 0;\n    for (let h = 0; h \u003c holes.length; h++) {\n      const H0 = holes[h];\n      const rr = H0.rr;\n      const hy = y - H0.y;\n      if (hy > rr * 1.8 || hy \u003c -rr * 1.8) continue;\n      const hx = (x - H0.x) / 1.6;\n      const d2 = hx * hx + hy * hy;\n      if (d2 > rr * rr * 3.2) continue;\n      const dd = sqrt(d2) + 1e-3;\n      if (dd \u003c rr) {\n        const k = (rr - (rr - dd) * 0.3) / dd;\n        x = H0.x + hx * 1.6 * k;\n        y = H0.y + hy * k;\n      }\n      startle = max(startle, 1 - dd / (rr * 1.8));\n    }\n    let s = turned(S, x, y, lag[i]);\n    let g = TG;\n    if (hash(i, tick) \u003c 0.012) g = 1;\n    s = max(s, startle);\n    const dir = v[j] > 0 ? 1 : -1;\n    const len = s > 0.5 ? 3 : 2;\n    // Broadside the flanks shimmer as ripples run through the school.\n    const rip = 0.5 + 0.5 * sin(x * 0.27 - t * 2.6 + y * 0.08 + ph[i] * 0.3);\n    const lit = (1 - 0.06 * s * rip * rip * rip) * flash;\n    const xi = round(x);\n    const yi = round(y);\n    for (let p = 0; p \u003c len; p++) {\n      const w = (p === 0 ? 1 : p === 1 ? 0.95 : 0.86) * lit;\n      const a = s * w;\n      const c = (1 - s) * (p === 0 ? 1 : 0.8);\n      put(buf, xi - dir * p, yi, back[0] * c + silver[0] * a + 90 * g, back[1] * c + silver[1] * a + 95 * g, back[2] * c + silver[2] * a + 100 * g);\n    }\n  }\n\n  // The hunters, dark against the silver, drawn half as large again as their art.\n  for (const h of S.hunters) {\n    const art = h.kind ? DOLPHIN : SHARK;\n    const col = h.kind ? DOLPHIN_C : SHARK_C;\n    const wd = round(art[0].length * 1.5);\n    const ht = round(art.length * 1.5);\n    const x0 = round(h.x - wd / 2);\n    const y0 = round(h.y - ht / 2);\n    for (let j = 0; j \u003c ht; j++)\n      for (let i = 0; i \u003c wd; i++) {\n        const c = art[floor(j / 1.5)][floor((h.dir > 0 ? i : wd - 1 - i) / 1.5)];\n        if (c === \".\") continue;\n        const cc = col[c];\n        put(buf, x0 + i, y0 + j, cc[0] * day, cc[1] * day, cc[2] * day);\n      }\n  }\n  for (const b of S.bubbles) {\n    const a = 1 - b.age / b.life;\n    const x = round(b.x);\n    const y = round(b.y);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const o = (y * W + x) * 3;\n    buf[o] = mix(buf[o], 210, a);\n    buf[o + 1] = mix(buf[o + 1], 240, a);\n    buf[o + 2] = mix(buf[o + 2], 255, a);\n  }\n  // Gannets: white darts with buff heads and black wingtips, folded for the dive.\n  for (const g of S.gannets) {\n    const sp = sqrt(g.vx * g.vx + g.vy * g.vy) + 1e-3;\n    const ux = g.vx / sp;\n    const uy = g.vy / sp;\n    for (let p = 0; p \u003c 6; p++) {\n      const px = round(g.x - ux * p);\n      const py = round(g.y - uy * p);\n      if (p === 0) put(buf, px, py, 250, 228, 150);\n      else if (p \u003c 4) {\n        put(buf, px, py, 250, 250, 250);\n        if (p === 2) put(buf, px + 1, py, 225, 228, 232);\n      } else put(buf, px, py, 26, 26, 30);\n    }\n  }\n  // The underside of the surface, bright and broken by the waves.\n  for (let y = 0; y \u003c 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const a = [0.85, 0.5, 0.2][y] * (0.7 + 0.3 * sin(x * 0.5 + t * 2.1) * sin(x * 0.23 - t * 1.3));\n      const o = (y * W + x) * 3;\n      buf[o] = mix(buf[o], 200 * day, a);\n      buf[o + 1] = mix(buf[o + 1], 232 * day, a);\n      buf[o + 2] = mix(buf[o + 2], 248 * day, a);\n    }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n    }\n}\n","layer":{"id":"layer-bait-ball","type":"code","name":"bait-ball","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bait Ball\n// Family:  ocean\n// Idea:    Seen from the side in open blue water, a sardine bait ball fills the panel with a thousand fish churning in layers, and when the school turns together a wave of silver runs across it until it turns away again and shows its dark blue backs, while sharks and dolphins charge through and gannets dive in from the surface, punching holes that close behind them.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the sardine bait balls of the Sardine Run\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Speed=0.2..3, Predators=1..5, Sun=0..1\n//\n// Knob 1: Water. The colour of the sea: the clear blue of open ocean at 0, turning to the green of plankton-rich coastal water at 1.\n// Knob 2: Speed. How fast the school and its hunters move: at 2 a turn runs across the ball in just over a second, and the school shows its flanks for five to eight seconds before it turns away; at 0.2 it all runs ten times slower.\n// Knob 3: Predators. How many sharks and dolphins work the ball, from one to five. More hunters charge more often and bring more gannets with them. The school packs tighter against them.\n// Knob 4: Sun. The time of day, from noon of a Sardine Run winter at 0, when the sun stands 35 degrees up and its rays lean 38 degrees in the water, to late afternoon at 1. Toward 1 the rays lean further and fade as the sea darkens. The flash dims to cold steel.\n// Buttons: K1 tap sends a hunter charging through the ball now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Fish swim in rows one LED apart, each two body lengths behind the next and\n// one length along from the fish in the rows above and below, as schools space themselves.\nconst ROWS = 124;\nconst GAP = 6;\n// Each row's fish wrap round this length, wider than the panel so the wrap stays out of sight.\nconst SPAN = 84;\n// Rows swim in bands this deep, each band the other way from the next: the ball mills.\nconst BAND = 13;\n// How fast a turning front runs, in LEDs per second at Speed 2.\nconst SWEEP = 80;\nconst { min, max, sin, exp, sqrt, round, floor, atan2, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst hash = (a, b) => {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// A dusky shark and a common dolphin, nose to the right: # back, b belly, h the dolphin's tan flank, e eye.\nconst SHARK = [\n  \"..........#.........\",\n  \".........##.........\",\n  \"#.......##########..\",\n  \"##...###############\",\n  \".##############e####\",\n  \"##...bbbbbbbbbbbbbb.\",\n  \"#........#.....#....\",\n];\nconst DOLPHIN = [\n  \"........#..........\",\n  \".......##..........\",\n  \"...###########.....\",\n  \"##############e##..\",\n  \".##hhhhhhbbbbbbbbbb\",\n  \"##...bbbbbbbbb.....\",\n  \".........#.........\",\n];\nconst SHARK_C = { \"#\": [30, 40, 54], b: [74, 84, 96], e: [4, 4, 6] };\nconst DOLPHIN_C = { \"#\": [40, 48, 66], b: [128, 136, 148], h: [118, 104, 70], e: [4, 4, 6] };\n\nexport function setup(params) {\n  const fu = [];\n  const fr = [];\n  for (let j = 0; j \u003c ROWS; j++)\n    for (let u = (j & 1) * (GAP / 2); u \u003c SPAN - 1; u += GAP) {\n      fu.push(u + (Math.random() - 0.5) * 1.4);\n      fr.push(j);\n    }\n  const n = fu.length;\n  const R = (a, b) => Float32Array.from({ length: n }, () => a + Math.random() * b);\n  const v = new Float32Array(ROWS);\n  for (let j = 0; j \u003c ROWS; j++) {\n    const b = floor(j / BAND);\n    v[j] = (b & 1 ? -1 : 1) * (3.2 + 2.4 * sin(b * 2.1 + 0.4));\n  }\n  params.s = {\n    fu: Float32Array.from(fu),\n    fr: Uint8Array.from(fr),\n    edge: R(0, 1),\n    lag: R(0, 1),\n    ph: R(0, 6.283),\n    v,\n    off: new Float32Array(ROWS),\n    buf: new Float32Array(N * 3),\n    clear: new Float32Array(N),\n    lt: new Float32Array(129),\n    rt: new Float32Array(440),\n    tau: 0,\n    base: 0,\n    ev: [],\n    next: 2.08,\n    nextTo: 1,\n    nextDir: 1,\n    hunters: [],\n    gannets: [],\n    bubbles: [],\n    holes: [],\n    // The first hunter charges just as the panel has opened, and the school turns from it.\n    slots: Float32Array.from({ length: 5 }, (_, k) => 2.1 + k * (1.7 + Math.random() * 1.2)),\n    gTimer: 3.2 + Math.random(),\n    queue: [],\n    k: [0, 2, 1, 0.06],\n  };\n}\n\nfunction charge(S, from) {\n  const dir = from || (Math.random() \u003c 0.5 ? 1 : -1);\n  S.hunters.push({\n    kind: Math.random() \u003c 0.5 ? 0 : 1,\n    dir,\n    x: dir > 0 ? -18 : W + 18,\n    y0: S.cy + (Math.random() * 2 - 1) * S.ry * 0.55,\n    y: 0,\n    sp: 38 + Math.random() * 16,\n    ph: Math.random() * 6.283,\n    drop: 0,\n  });\n}\n\nfunction dive(S, delay) {\n  S.queue.push({ at: S.tau + delay, x: 8 + Math.random() * 48 });\n}\n\n// How far a turn has carried a point: 0 shows the backs, 1 the silver flanks.\n// Each front is kept as one position per row. TG is the flash right on the\n// front, where the fish are mid-turn.\nlet TG = 0;\nfunction fronts(S) {\n  for (const e of S.ev) {\n    if (!e.row) e.row = new Float32Array(H);\n    const X = (S.tau - e.at) * SWEEP - 12;\n    for (let y = 0; y \u003c H; y++) e.row[y] = X - 9 * sin(y * 0.045 + e.ph) - 0.2 * (y - 64) * e.tilt;\n  }\n}\nfunction turned(S, x, y, lag) {\n  let s = S.base;\n  TG = 0;\n  const yi = y \u003c 0 ? 0 : y > H - 1 ? H - 1 : y | 0;\n  for (const e of S.ev) {\n    const d = e.row[yi] - (e.dir > 0 ? x : 63 - x) - lag * 8;\n    if (d \u003c= 0) continue;\n    if (d >= 8) {\n      s = e.to;\n      continue;\n    }\n    const p = sstep(0, 8, d);\n    TG = max(TG, 4 * p * (1 - p));\n    s += (e.to - s) * p;\n  }\n  return s;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || S.k;\n  S.k = [clamp(k[0], 0, 1), clamp(k[1], 0.2, 3), clamp(k[2], 1, 5), clamp(k[3], 0, 1)];\n  dt = clamp(dt || 0, 0, 0.1);\n  const d = dt * (S.k[1] / 2);\n  S.tau += d;\n  const t = S.tau;\n  const hunt = round(S.k[2]);\n  // The more hunters, the tighter the school packs.\n  const sc = 1 - 0.055 * (S.k[2] - 1);\n  S.cx = 32 + 2.5 * sin(t * 0.17);\n  S.cy = 73 + 3 * sin(t * 0.13 + 1);\n  S.rx = 32 * sc;\n  S.ry = 61 * sc;\n  for (let j = 0; j \u003c ROWS; j++) S.off[j] += S.v[j] * d;\n\n  // The turns: the first comes just after the panel opens on dark backs.\n  if (t >= S.next) {\n    S.ev.push({ at: S.next, to: S.nextTo, dir: S.nextDir, ph: Math.random() * 6.283, tilt: Math.random() * 2 - 1 });\n    const first = S.ev.length === 1 && S.next \u003c 3;\n    S.next += S.nextTo ? (first ? 7.3 : 5 + Math.random() * 3) : 2.6 + Math.random() * 2;\n    S.nextTo = 1 - S.nextTo;\n    S.nextDir = first ? -1 : Math.random() \u003c 0.5 ? 1 : -1;\n  }\n  // A front that has left the panel is folded into the base state.\n  while (S.ev.length && (t - S.ev[0].at) * SWEEP > 130) S.base = S.ev.shift().to;\n\n  // Hunters from the sides, each on its own clock.\n  for (let i = 0; i \u003c 5; i++) {\n    if (i >= hunt) continue;\n    S.slots[i] -= d;\n    if (S.slots[i] \u003c= 0) {\n      // The first comes in from the left, the side the first turn starts from.\n      charge(S, S.charged ? 0 : 1);\n      S.charged = true;\n      S.slots[i] = 3 + Math.random() * 4;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) charge(S);\n  // Gannets come in volleys of two to four.\n  S.gTimer -= d * (0.6 + 0.4 * hunt);\n  if (S.gTimer \u003c= 0) {\n    const m = 2 + floor(Math.random() * 3);\n    for (let i = 0; i \u003c m; i++) dive(S, i * (0.2 + Math.random() * 0.3));\n    S.gTimer = 4 + Math.random() * 4;\n  }\n  for (let i = S.queue.length - 1; i >= 0; i--) {\n    const q = S.queue[i];\n    if (t \u003c q.at) continue;\n    S.queue.splice(i, 1);\n    S.gannets.push({ x: q.x, y: -3, vx: (Math.random() * 2 - 1) * 14, vy: 100 + Math.random() * 30, up: false, last: 0 });\n  }\n\n  for (let i = S.hunters.length - 1; i >= 0; i--) {\n    const h = S.hunters[i];\n    h.x += h.dir * h.sp * d;\n    h.y = h.y0 + 7 * sin(h.x * 0.035 + h.ph);\n    h.drop += d;\n    if (h.drop > 0.07) {\n      h.drop = 0;\n      S.holes.push({ x: h.x + h.dir * 5, y: h.y, r: 10.5, age: 0, life: 0.9 });\n    }\n    if (h.x \u003c -36 || h.x > W + 36) S.hunters.splice(i, 1);\n  }\n  for (let i = S.gannets.length - 1; i >= 0; i--) {\n    const g = S.gannets[i];\n    const wet = g.y > 2;\n    g.x += g.vx * d;\n    g.y += g.vy * d;\n    if (!wet && g.y > 2) {\n      // The splash: a burst of air dragged under.\n      for (let b = 0; b \u003c 16; b++) bubble(S, g.x + (Math.random() * 2 - 1) * 4, 3 + Math.random() * 8);\n    }\n    if (g.y > 2 && !g.up) {\n      g.vy *= exp(-1.5 * d);\n      g.vx *= exp(-1.5 * d);\n      if (Math.random() \u003c 0.9) bubble(S, g.x - g.vx * 0.04, g.y - 3 - Math.random() * 3);\n      if (g.vy \u003c 20) {\n        g.up = true;\n        g.vy = -32;\n      }\n    }\n    g.last += d;\n    if (g.y > 2 && g.last > 0.06) {\n      g.last = 0;\n      S.holes.push({ x: g.x, y: g.y, r: 4.5, age: 0, life: 0.9 });\n    }\n    if (g.up && g.y \u003c -4) S.gannets.splice(i, 1);\n  }\n  for (let i = S.bubbles.length - 1; i >= 0; i--) {\n    const b = S.bubbles[i];\n    b.age += d;\n    b.y -= b.vy * d;\n    b.x += sin(b.age * 6 + b.ph) * 4 * d;\n    if (b.age > b.life || b.y \u003c 1) S.bubbles.splice(i, 1);\n  }\n  for (let i = S.holes.length - 1; i >= 0; i--) {\n    S.holes[i].age += d;\n    if (S.holes[i].age > S.holes[i].life) S.holes.splice(i, 1);\n  }\n}\n\nfunction bubble(S, x, y) {\n  if (S.bubbles.length \u003c 400) S.bubbles.push({ x, y, vy: 9 + Math.random() * 12, age: 0, life: 1.2 + Math.random() * 1.6, ph: Math.random() * 6.283 });\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.cx === undefined) return;\n  const { buf } = S;\n  const t = S.tau;\n  const [wq, , , sun] = S.k;\n  // The sea: clear blue to coastal green, light near the surface and deep below.\n  const top = [mix(30, 50, wq), mix(118, 150, wq), mix(196, 120, wq)];\n  const deep = [mix(4, 8, wq), mix(30, 52, wq), mix(84, 44, wq)];\n  const day = 1 - 0.45 * sun;\n  // Rays bend into the water: 55 degrees off the vertical above it is 38 below, 82 is 48.\n  const slope = mix(0.78, 1.11, sun);\n  const rayS = mix(1, 0.3, sun) * day;\n  // Low sun reaches the school through more water, so the flash cools as it dims.\n  const silver = [mix(242, 200, sun), mix(249, 214, sun), mix(255, 232, sun)];\n  const flash = mix(1, 0.7, sun);\n  const back = [mix(12, 10, wq), mix(28, 42, wq), mix(52, 40, wq)];\n  const glow = [10 * flash, 16 * flash, 22 * flash];\n  const { cx, cy, rx, ry } = S;\n  // The ball's outline, one radius for each of 128 directions, and the rays by where they leave the surface.\n  const { lt, rt, clear } = S;\n  for (let i = 0; i \u003c= 128; i++) {\n    const th = -PI + (i * PI) / 64;\n    lt[i] = 1 + 0.08 * sin(3 * th + 0.45 * t) + 0.06 * sin(5 * th - 0.7 * t + 1) + 0.05 * sin(2 * th + 0.25 * t + 2);\n  }\n  const lump = (th) => lt[round(((th + PI) * 64) / PI)];\n  for (let i = 0; i \u003c rt.length; i++) {\n    const u = i / 2 - 150;\n    const ray = sin(u * 0.23 + t * 0.35) + 0.8 * sin(u * 0.41 - t * 0.27 + 1.3) + 0.6 * sin(u * 0.13 + t * 0.15 + 2) - 0.9;\n    rt[i] = ray > 0 ? ray : 0;\n  }\n  fronts(S);\n  // Where the hunters have just been, the ball is open and the sea shows through.\n  clear.fill(0);\n  for (const h of S.holes) {\n    const rr = (h.rr = h.r * (1 - h.age / h.life) ** 0.6);\n    for (let y = max(0, floor(h.y - rr)); y \u003c= min(H - 1, h.y + rr); y++)\n      for (let x = max(0, floor(h.x - rr * 1.6)); x \u003c= min(W - 1, h.x + rr * 1.6); x++) {\n        const dd = sqrt(((x - h.x) / 1.6) ** 2 + (y - h.y) ** 2);\n        const c = 1 - sstep(0.45 * rr, 0.8 * rr, dd);\n        if (c > clear[y * W + x]) clear[y * W + x] = c;\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    const dz = y / (H - 1);\n    const f = dz ** 0.8;\n    const wr = mix(top[0], deep[0], f) * day;\n    const wg = mix(top[1], deep[1], f) * day;\n    const wb = mix(top[2], deep[2], f) * day;\n    const fade = exp(-y / 60) * rayS;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      // Sun rays: bright where the waves above focus the light, leaning with the sun.\n      const u = x - slope * y;\n      const ray = rt[((u + 150) * 2) | 0] * fade;\n      let r = wr + ray * 46;\n      let g = wg + ray * 60;\n      let b = wb + ray * 58;\n      const ddx = (x - cx) / rx;\n      const ddy = (y - cy) / ry;\n      const q0 = sqrt(ddx * ddx + ddy * ddy);\n      // The outline only matters near it: the lumps change the radius by a fifth at most.\n      const q = q0 \u003c 0.7 || q0 > 1.8 ? q0 : q0 / lump(atan2(ddy, ddx));\n      if (q \u003c 1.5) {\n        // Inside the ball the fish shade the water; outside it, light thrown off their flanks.\n        const m0 = 1 - sstep(0.88, 1.05, q);\n        const c = clear[y * W + x];\n        const m = m0 * (1 - c);\n        const s = turned(S, x, y, 0.5);\n        const sh = 1 - 0.9 * m;\n        const hl = (s + 0.6 * TG) * (1.6 * m + 0.6 * c * m0 + (1 - m0) * 3.4 * (1 - sstep(1, 1.5, q)));\n        r = r * sh + glow[0] * hl;\n        g = g * sh + glow[1] * hl;\n        b = b * sh + glow[2] * hl;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n\n  // The fish.\n  const { fu, fr, edge, lag, ph, v, off, holes } = S;\n  const tick = floor(t * 6);\n  for (let i = 0; i \u003c fu.length; i++) {\n    const j = fr[i];\n    let u = (fu[i] + off[j]) % SPAN;\n    if (u \u003c 0) u += SPAN;\n    let x = cx + u - SPAN / 2;\n    if (x \u003c -4 || x > W + 3) continue;\n    let y = cy + (j - (ROWS - 1) / 2) + 1.2 * sin(x * 0.085 + t * 0.6);\n    const ddx = (x - cx) / rx;\n    const ddy = (y - cy) / ry;\n    const q0 = sqrt(ddx * ddx + ddy * ddy);\n    if (q0 > 0.74 && q0 / lump(atan2(ddy, ddx)) > 0.93 + 0.1 * edge[i]) continue;\n    // Holes the hunters punch: fish inside are pushed to the rim and flash as they flee.\n    let startle = 0;\n    for (let h = 0; h \u003c holes.length; h++) {\n      const H0 = holes[h];\n      const rr = H0.rr;\n      const hy = y - H0.y;\n      if (hy > rr * 1.8 || hy \u003c -rr * 1.8) continue;\n      const hx = (x - H0.x) / 1.6;\n      const d2 = hx * hx + hy * hy;\n      if (d2 > rr * rr * 3.2) continue;\n      const dd = sqrt(d2) + 1e-3;\n      if (dd \u003c rr) {\n        const k = (rr - (rr - dd) * 0.3) / dd;\n        x = H0.x + hx * 1.6 * k;\n        y = H0.y + hy * k;\n      }\n      startle = max(startle, 1 - dd / (rr * 1.8));\n    }\n    let s = turned(S, x, y, lag[i]);\n    let g = TG;\n    if (hash(i, tick) \u003c 0.012) g = 1;\n    s = max(s, startle);\n    const dir = v[j] > 0 ? 1 : -1;\n    const len = s > 0.5 ? 3 : 2;\n    // Broadside the flanks shimmer as ripples run through the school.\n    const rip = 0.5 + 0.5 * sin(x * 0.27 - t * 2.6 + y * 0.08 + ph[i] * 0.3);\n    const lit = (1 - 0.06 * s * rip * rip * rip) * flash;\n    const xi = round(x);\n    const yi = round(y);\n    for (let p = 0; p \u003c len; p++) {\n      const w = (p === 0 ? 1 : p === 1 ? 0.95 : 0.86) * lit;\n      const a = s * w;\n      const c = (1 - s) * (p === 0 ? 1 : 0.8);\n      put(buf, xi - dir * p, yi, back[0] * c + silver[0] * a + 90 * g, back[1] * c + silver[1] * a + 95 * g, back[2] * c + silver[2] * a + 100 * g);\n    }\n  }\n\n  // The hunters, dark against the silver, drawn half as large again as their art.\n  for (const h of S.hunters) {\n    const art = h.kind ? DOLPHIN : SHARK;\n    const col = h.kind ? DOLPHIN_C : SHARK_C;\n    const wd = round(art[0].length * 1.5);\n    const ht = round(art.length * 1.5);\n    const x0 = round(h.x - wd / 2);\n    const y0 = round(h.y - ht / 2);\n    for (let j = 0; j \u003c ht; j++)\n      for (let i = 0; i \u003c wd; i++) {\n        const c = art[floor(j / 1.5)][floor((h.dir > 0 ? i : wd - 1 - i) / 1.5)];\n        if (c === \".\") continue;\n        const cc = col[c];\n        put(buf, x0 + i, y0 + j, cc[0] * day, cc[1] * day, cc[2] * day);\n      }\n  }\n  for (const b of S.bubbles) {\n    const a = 1 - b.age / b.life;\n    const x = round(b.x);\n    const y = round(b.y);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const o = (y * W + x) * 3;\n    buf[o] = mix(buf[o], 210, a);\n    buf[o + 1] = mix(buf[o + 1], 240, a);\n    buf[o + 2] = mix(buf[o + 2], 255, a);\n  }\n  // Gannets: white darts with buff heads and black wingtips, folded for the dive.\n  for (const g of S.gannets) {\n    const sp = sqrt(g.vx * g.vx + g.vy * g.vy) + 1e-3;\n    const ux = g.vx / sp;\n    const uy = g.vy / sp;\n    for (let p = 0; p \u003c 6; p++) {\n      const px = round(g.x - ux * p);\n      const py = round(g.y - uy * p);\n      if (p === 0) put(buf, px, py, 250, 228, 150);\n      else if (p \u003c 4) {\n        put(buf, px, py, 250, 250, 250);\n        if (p === 2) put(buf, px + 1, py, 225, 228, 232);\n      } else put(buf, px, py, 26, 26, 30);\n    }\n  }\n  // The underside of the surface, bright and broken by the waves.\n  for (let y = 0; y \u003c 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const a = [0.85, 0.5, 0.2][y] * (0.7 + 0.3 * sin(x * 0.5 + t * 2.1) * sin(x * 0.23 - t * 1.3));\n      const o = (y * W + x) * 3;\n      buf[o] = mix(buf[o], 200 * day, a);\n      buf[o + 1] = mix(buf[o + 1], 232 * day, a);\n      buf[o + 2] = mix(buf[o + 2], 248 * day, a);\n    }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Water=0..1, Speed=0.2..3, Predators=1..5, Sun=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Water","min":0,"max":1,"about":"The colour of the sea: the clear blue of open ocean at 0, turning to the green of plankton-rich coastal water at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the school and its hunters move: at 2 a turn runs across the ball in just over a second, and the school shows its flanks for five to eight seconds before it turns away; at 0.2 it all runs ten times slower."},{"name":"Predators","min":1,"max":5,"about":"How many sharks and dolphins work the ball, from one to five. More hunters charge more often and bring more gannets with them. The school packs tighter against them."},{"name":"Sun","min":0,"max":1,"about":"The time of day, from noon of a Sardine Run winter at 0, when the sun stands 35 degrees up and its rays lean 38 degrees in the water, to late afternoon at 1. Toward 1 the rays lean further and fade as the sea darkens. The flash dims to cold steel."}],"start":[0,2,1,0.06],"measures":{"motion":0.8889,"detail":0.2376,"edges":0.5511,"complexity":1.4993,"coverage":0.9518,"colour":0.2846,"drift":0.3724},"knobResponse":[0.0519,0.3412,0.1352,0.1016]},{"slug":"balloon-box","title":"Balloon Box","family":"weather","round":11,"note":"새벽 골짜기에 바람이 둘이에요. 낮은 바람은 열기구를 왼쪽으로, 높은 바람은 오른쪽으로 데려가고, 조종사가 버너로 높이를 바꾸면 풍선이 멈췄다 되돌아가요. 옆으로 나간 자리에는 새 풍선이 바람을 타고 들어오거나 들판에서 떠올라요. K1 을 누르면 모든 버너가 한꺼번에 켜져요.","idea":"Hot-air balloons ride the dawn winds of a valley box: low down the wind carries them one way, higher up it brings them back the other.","buttons":"K1 tap fires every burner at once; the envelopes glow from inside and the balloons climb.","code":"// ===== Patternflow pattern =====\n// Title:   Balloon Box\n// Family:  weather\n// Idea:    Hot-air balloons ride the dawn winds of a valley box: low down the wind carries them one way, higher up it brings them back the other.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the dawn mass ascensions over Albuquerque and the \"Albuquerque box\", the winds that blow one way near the ground and the other way a few hundred metres up\n// Round:   11\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Wind=0.2..3, Balloons=8..16, Sunrise=0..1\n//\n// Knob 1: Hue. Turns every envelope's colours around the wheel together; each balloon keeps its own stripes, bands or chevrons.\n// Knob 2: Wind. How hard the two winds blow: at the bottom of the range the balloons hang almost still, at the top the near ones cross the panel in a few seconds.\n// Knob 3: Balloons. How many are in the air; a balloon that joins drifts in from the side or lifts off from the field, and one that leaves drifts out and does not come back.\n// Knob 4: Sunrise. The hour: before dawn the sky is deep blue over an orange rim and the burners glow, turned up the sun comes over the ridge and the sky goes to morning blue.\n// Buttons: K1 tap fires every burner at once; the envelopes glow from inside and the balloons climb.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 16;\n// The two winds meet at this height. Above it they blow to the right, below\n// it to the left, and a balloon passing through slows, stops and turns.\nconst SPLIT = 60;\nconst SHEAR = 6;\n// Envelope colours. A balloon picks one of these as its first colour and\n// builds the rest of its fabric from it.\nconst HUES = [0.0, 0.07, 0.13, 0.27, 0.36, 0.5, 0.58, 0.66, 0.76, 0.86, 0.93];\n// How a balloon is sewn: two-colour gores, three-colour gores, a rainbow of\n// gores, level bands, zigzag chevrons, a cap and skirt over striped gores.\nconst DESIGNS = 6;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// The envelope's half width at height t, in radii: t is -1 at the crown, the\n// sphere is widest at 0, and below 0.3 it tapers to the throat at 1.4.\nfunction halfWidth(t) {\n  if (t \u003c -1 || t > 1.4) return 0;\n  if (t \u003c= 0.3) return Math.sqrt(1 - t * t);\n  const s = (t - 0.3) / 1.1;\n  return 0.22 + 0.734 * Math.cos(s * 1.5707963);\n}\n\n// The wind at height y: +1 to the right high up, -1 to the left low down.\nfunction wind(y) {\n  return Math.tanh((SPLIT - y) / SHEAR);\n}\n\n// Sky colour keys from before dawn to morning, top, middle and horizon.\nconst SKY = [\n  [0, [6, 8, 30], [16, 20, 62], [60, 34, 70]],\n  [0.06, [6, 10, 58], [20, 26, 104], [196, 78, 52]],\n  [0.4, [26, 46, 118], [86, 88, 168], [255, 146, 88]],\n  [1, [58, 118, 216], [118, 168, 232], [214, 222, 206]],\n];\n\nfunction skyKeys(s, out) {\n  let a = SKY[0];\n  let b = SKY[SKY.length - 1];\n  for (let i = 0; i \u003c SKY.length - 1; i++)\n    if (s >= SKY[i][0] && s \u003c= SKY[i + 1][0]) {\n      a = SKY[i];\n      b = SKY[i + 1];\n      break;\n    }\n  const f = b[0] > a[0] ? (s - a[0]) / (b[0] - a[0]) : 0;\n  for (let k = 0; k \u003c 3; k++) for (let c = 0; c \u003c 3; c++) out[k * 3 + c] = a[k + 1][c] + (b[k + 1][c] - a[k + 1][c]) * f;\n}\n\n// A new balloon's look: how near it is, its size, its fabric.\nfunction dress(P, i) {\n  const d = Math.random();\n  P.depth[i] = d;\n  P.R[i] = 9 + 7 * d;\n  P.design[i] = Math.floor(Math.random() * DESIGNS);\n  P.hue0[i] = HUES[Math.floor(Math.random() * HUES.length)];\n  P.gores[i] = 8 + 2 * Math.floor(Math.random() * 3);\n  P.rot[i] = Math.random() * 6.283;\n  P.spin[i] = (Math.random() - 0.5) * 0.5;\n  P.glow[i] = 0;\n  P.burn[i] = 0;\n  P.nextBurn[i] = 1 + Math.random() * 5;\n  P.retarget[i] = 6 + Math.random() * 10;\n}\n\n// Lifts a balloon off the field or brings it in on the wind from the side.\nfunction launch(P, i, fromField) {\n  dress(P, i);\n  const R = P.R[i];\n  if (fromField) {\n    P.x[i] = 10 + Math.random() * 44;\n    // Standing on the field with its basket on the ground.\n    P.y[i] = H - 2 * R;\n    P.target[i] = 20 + Math.random() * 74;\n    P.burn[i] = 2.5;\n  } else {\n    // Never at the split, where no wind would bring it in.\n    let y = 16 + Math.random() * 64;\n    if (y > SPLIT - 10) y += 20;\n    P.y[i] = y;\n    P.target[i] = y;\n    const w = wind(y);\n    P.x[i] = w > 0 ? -R * 1.1 : W + R * 1.1;\n  }\n  P.live[i] = 1;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.x = new Float32Array(MAX);\n  P.y = new Float32Array(MAX);\n  P.R = new Float32Array(MAX);\n  P.depth = new Float32Array(MAX);\n  P.design = new Int8Array(MAX);\n  P.hue0 = new Float32Array(MAX);\n  P.gores = new Int8Array(MAX);\n  P.rot = new Float32Array(MAX);\n  P.spin = new Float32Array(MAX);\n  P.glow = new Float32Array(MAX);\n  P.burn = new Float32Array(MAX);\n  P.nextBurn = new Float32Array(MAX);\n  P.target = new Float32Array(MAX);\n  P.retarget = new Float32Array(MAX);\n  P.live = new Int8Array(MAX);\n  P.order = new Int32Array(MAX);\n  P.fab = new Float32Array(MAX * 9);\n  // The rainbow design's gores, one colour each.\n  P.rain = new Float32Array(MAX * 12 * 3);\n  P.sky = new Float32Array(H * 3);\n  P.keys = new Float32Array(9);\n  P.bg = new Float32Array(N * 3);\n  P.col = new Float32Array(3);\n  // The ridge on the far side of the field, and the town's lights under it.\n  P.ridge = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++)\n    P.ridge[x] = Math.round(112 - 4 * Math.sin(x * 0.09 + 0.6) - 3 * Math.sin(x * 0.23 + 2.1) + 2 * hash(x, 3));\n  P.town = new Float32Array(N);\n  for (let i = 0; i \u003c 46; i++) {\n    const x = Math.floor(hash(i, 5) * W);\n    const y = P.ridge[x] + 3 + Math.floor(hash(i, 6) * (H - P.ridge[x] - 3));\n    if (y \u003c H) P.town[y * W + x] = 0.45 + 0.4 * hash(i, 7);\n  }\n  P.stars = new Float32Array(N);\n  for (let i = 0; i \u003c 30; i++) {\n    const x = Math.floor(hash(i, 8) * W);\n    const y = Math.floor(hash(i, 9) * 70);\n    P.stars[y * W + x] = 0.75 + 0.25 * hash(i, 10);\n  }\n  P.count = 8;\n  P.wind = 2;\n  P.hue = 0;\n  P.sun = 0.06;\n  P.ready = 0;\n}\n\n// The first frame's sky: the balloons spread over both winds, none of them\n// at a side, so the panel opens on a fiesta already in the air.\nfunction scatter(P) {\n  const n = P.count;\n  for (let i = 0; i \u003c MAX; i++) P.live[i] = 0;\n  for (let i = 0; i \u003c n; i++) {\n    dress(P, i);\n    // Heights in turn from the two winds, a little shuffled.\n    const slot = (i + 0.5) / n;\n    let y = 18 + slot * 84 + (Math.random() - 0.5) * 8;\n    if (Math.abs(y - SPLIT) \u003c 9) y = SPLIT + (y \u003c SPLIT ? -9 : 9);\n    P.y[i] = y;\n    P.target[i] = y;\n    P.x[i] = 8 + ((i * 0.618 + 0.2) % 1) * 48;\n    P.live[i] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.wind = Math.max(0.2, Math.min(3, k[1]));\n  P.count = Math.max(8, Math.min(MAX, Math.round(k[2])));\n  P.sun = Math.max(0, Math.min(1, k[3]));\n  if (!P.ready) {\n    scatter(P);\n    P.ready = 1;\n  }\n  const all = input.btnPressed && input.btnPressed[0];\n  let live = 0;\n  for (let i = 0; i \u003c MAX; i++) if (P.live[i]) live++;\n  // A balloon joins when the knob asks for more than are flying.\n  for (let i = 0; i \u003c MAX && live \u003c P.count; i++)\n    if (!P.live[i]) {\n      launch(P, i, Math.random() \u003c 0.4);\n      live++;\n    }\n\n  // Near balloons cross the panel faster than far ones, the way they would.\n  const pace = 4.4 * P.wind;\n  for (let i = 0; i \u003c MAX; i++) {\n    if (!P.live[i]) continue;\n    const R = P.R[i];\n    const d = P.depth[i];\n    if (all) {\n      P.burn[i] = 2.5;\n      P.target[i] = Math.max(16, P.y[i] - 28);\n      P.retarget[i] = 8 + Math.random() * 6;\n    }\n    // Now and then a pilot picks a new height, often in the other wind.\n    P.retarget[i] -= dt;\n    if (P.retarget[i] \u003c= 0) {\n      P.retarget[i] = 7 + Math.random() * 10;\n      P.target[i] = P.y[i] \u003c SPLIT ? SPLIT + 8 + Math.random() * 30 : 14 + Math.random() * 38;\n    }\n    // Climbing takes the burner; between climbs it fires short bursts to hold height.\n    const dy = P.target[i] - P.y[i];\n    if (dy \u003c -3 && P.burn[i] \u003c= 0) P.burn[i] = 1.2 + Math.random();\n    P.nextBurn[i] -= dt;\n    if (P.nextBurn[i] \u003c= 0) {\n      P.nextBurn[i] = 3 + Math.random() * 6;\n      if (P.burn[i] \u003c= 0) P.burn[i] = 0.5 + Math.random() * 0.6;\n    }\n    const firing = P.burn[i] > 0;\n    if (firing) P.burn[i] -= dt;\n    P.glow[i] += ((firing ? 1 : 0) - P.glow[i]) * Math.min(1, dt * (firing ? 7 : 0.9));\n    const climb = Math.max(-1, Math.min(1, dy / 10)) * (1.2 + 0.8 * Math.sqrt(P.wind / 2));\n    P.y[i] += climb * (0.6 + 0.4 * d) * dt;\n    P.x[i] += wind(P.y[i]) * pace * (0.5 + 0.5 * d) * dt;\n    P.rot[i] += P.spin[i] * dt;\n    // Off the side: the balloon is gone, and one takes its place.\n    const off = R * 1.15;\n    if (P.x[i] \u003c -off - 1 || P.x[i] > W + off + 1 || P.y[i] \u003c -R * 2) {\n      if (live > P.count) {\n        P.live[i] = 0;\n        live--;\n      } else launch(P, i, Math.random() \u003c 0.35);\n    }\n  }\n\n  // Fabric colours for this frame: each balloon's own, turned by K1.\n  const fab = P.fab;\n  for (let i = 0; i \u003c MAX; i++) {\n    if (!P.live[i]) continue;\n    const h = P.hue0[i] + P.hue;\n    const o = i * 9;\n    const des = P.design[i];\n    // Every colour at full value, so a seam between two gores changes the\n    // hue and not the brightness.\n    if (des === 0) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.5, 1, 1);\n      hsvInto(fab, o + 6, h, 1, 1);\n    } else if (des === 1) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.33, 1, 1);\n      hsvInto(fab, o + 6, h + 0.67, 1, 1);\n    } else if (des === 3) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.12, 1, 1);\n      hsvInto(fab, o + 6, h + 0.24, 1, 1);\n    } else if (des === 4) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.17, 1, 1);\n      hsvInto(fab, o + 6, h + 0.5, 1, 1);\n    } else {\n      hsvInto(fab, o, h + 0.5, 1, 1);\n      hsvInto(fab, o + 3, h, 1, 1);\n      hsvInto(fab, o + 6, h + 0.25, 1, 1);\n    }\n    if (des === 2) for (let g = 0; g \u003c P.gores[i]; g++) hsvInto(P.rain, (i * 12 + g) * 3, h + g / P.gores[i], 1, 1);\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const s = P.sun;\n  const keys = P.keys;\n  skyKeys(s, keys);\n  const bg = P.bg;\n  // The sky: top colour down to the middle, then to the horizon's rim, with\n  // the sun's glow over the ridge on the east side.\n  const sunX = 50;\n  const sunY = 118 - 40 * s;\n  // No glow before the sun is near: until then the rim is the whole dawn.\n  const sunAmp = 0.7 * smooth(0.08, 0.5, s);\n  const starAmp = 70 * (1 - smooth(0.05, 0.3, s));\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / 112;\n    let f;\n    let a;\n    let b;\n    if (v \u003c 0.55) {\n      f = v / 0.55;\n      a = 0;\n      b = 3;\n    } else {\n      f = Math.min(1, (v - 0.55) / 0.45);\n      // Eased, not squared: squared, the red of the rim climbs 7 levels a\n      // row near the ridge and the whole rim reads as a soft edge.\n      f = Math.pow(f, 1.5);\n      a = 3;\n      b = 6;\n    }\n    for (let c = 0; c \u003c 3; c++) P.sky[y * 3 + c] = keys[a + c] + (keys[b + c] - keys[a + c]) * f;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      if (y >= P.ridge[x]) {\n        // The ridge and the field under it, black but for the town.\n        const t = P.town[p] * (1 - 0.8 * smooth(0.3, 0.9, s));\n        const shade = 10 + 34 * smooth(0.2, 1, s);\n        bg[o] = shade * 0.8 + t * 255;\n        bg[o + 1] = shade * 0.75 + t * 190;\n        bg[o + 2] = shade + t * 90;\n        continue;\n      }\n      const gx = (x - sunX) / 34;\n      const gy = (y - sunY) / 22;\n      const g = sunAmp * Math.exp(-(gx * gx + gy * gy));\n      const st = P.stars[p] * starAmp;\n      bg[o] = P.sky[y * 3] + g * 120 + st;\n      bg[o + 1] = P.sky[y * 3 + 1] + g * 70 + st;\n      bg[o + 2] = P.sky[y * 3 + 2] + g * 30 + st;\n    }\n  }\n\n  // Far balloons first, so near ones pass in front.\n  let n = 0;\n  for (let i = 0; i \u003c MAX; i++) if (P.live[i]) P.order[n++] = i;\n  for (let a = 1; a \u003c n; a++) {\n    const v = P.order[a];\n    let b = a - 1;\n    while (b >= 0 && P.depth[P.order[b]] > P.depth[v]) {\n      P.order[b + 1] = P.order[b];\n      b--;\n    }\n    P.order[b + 1] = v;\n  }\n\n  // Light from the east and a little from below, the sun at the rim.\n  const Lx = 0.6;\n  const Ly = 0.12;\n  const Lz = 0.79;\n  const amb = 0.63 + 0.06 * s;\n  const sunL = 0.41 + 0.04 * s;\n  const fab = P.fab;\n  const col = P.col;\n  for (let q = 0; q \u003c n; q++) {\n    const i = P.order[q];\n    const cx = P.x[i];\n    const cy = P.y[i];\n    const R = P.R[i];\n    const d = P.depth[i];\n    const des = P.design[i];\n    const G = P.gores[i];\n    const rot = P.rot[i];\n    const glow = P.glow[i];\n    // Far balloons sit in more of the dawn's shadow.\n    const far = 0.88 + 0.12 * d;\n    const o9 = i * 9;\n    const x0 = Math.max(0, Math.floor(cx - R - 1));\n    const x1 = Math.min(W - 1, Math.ceil(cx + R + 1));\n    const y0 = Math.max(0, Math.floor(cy - R - 1));\n    const y1 = Math.min(H - 1, Math.ceil(cy + 1.4 * R));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = y + 0.5 - cy;\n      const t = dy / R;\n      const hw = halfWidth(t) * R;\n      if (hw \u003c= 0) continue;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x + 0.5 - cx;\n        const cover = Math.min(1, hw - Math.abs(dx) + 0.5);\n        if (cover \u003c= 0) continue;\n        const u = Math.asin(Math.max(-1, Math.min(1, dx / hw)));\n        const lon = (u + rot) / 6.2831853 + 2;\n        const lf = lon * G;\n        const gore = Math.floor(lf) % G;\n        let c;\n        if (des === 0 || des === 1) c = gore % (des === 0 ? 2 : 3);\n        else if (des === 2) c = -1;\n        else if (des === 3) c = Math.floor((t + 1) * 2.4) % 3;\n        else if (des === 4) {\n          const zig = Math.abs(lf - Math.floor(lf) - 0.5);\n          c = Math.floor((t + 1) * 2.2 + zig * 1.2) % 3;\n        } else c = t \u003c -0.45 || t > 0.95 ? 0 : 1 + (gore % 2);\n        const from = c \u003c 0 ? P.rain : fab;\n        const oc = c \u003c 0 ? (i * 12 + gore) * 3 : o9 + c * 3;\n        col[0] = from[oc];\n        col[1] = from[oc + 1];\n        col[2] = from[oc + 2];\n        // The cloth's light: a sphere above the waist, a cone below it.\n        let nx;\n        let ny;\n        if (t \u003c= 0.3) {\n          nx = dx / R;\n          ny = t;\n        } else {\n          nx = (dx / hw) * 0.95;\n          ny = 0.3;\n        }\n        const nz = Math.sqrt(Math.max(0, 1 - nx * nx - ny * ny));\n        // Half Lambert: the shadow side turns gently into the dark limb.\n        const lam = 0.5 + 0.5 * (nx * Lx + ny * Ly + nz * Lz);\n        // The burner lights the envelope from inside, strongest near the mouth.\n        const lit = amb + sunL * lam + glow * 0.5 * (0.45 + 0.55 * Math.min(1, (t + 1) / 2.2));\n        const p = y * W + x;\n        const o = p * 3;\n        const white = glow * 0.22;\n        for (let ch = 0; ch \u003c 3; ch++) {\n          let v = col[ch] * Math.min(1.08, lit) * far;\n          v += (255 - v) * white;\n          bg[o + ch] += (Math.min(255, v) - bg[o + ch]) * cover;\n        }\n      }\n    }\n    // Under the mouth: the cables, the basket and, while it fires, the flame.\n    const mouth = cy + 1.4 * R;\n    const basketTop = Math.round(mouth + Math.max(2, 0.32 * R));\n    const bh = Math.max(2, Math.round(0.24 * R));\n    const bw = Math.max(2, Math.round(0.36 * R));\n    const bx0 = Math.round(cx - bw / 2);\n    const dim = 0.55 + 0.45 * d;\n    for (let y = Math.round(mouth); y \u003c basketTop + bh; y++) {\n      if (y \u003c 0 || y >= H) continue;\n      if (y \u003c basketTop) {\n        // Cables from the mouth's corners to the basket's.\n        const f = (y - mouth) / Math.max(1, basketTop - mouth);\n        const half = 0.22 * R + (bw / 2 - 0.22 * R) * f;\n        for (const x of [Math.round(cx - half - 0.5), Math.round(cx + half - 0.5)]) {\n          if (x \u003c 0 || x >= W) continue;\n          const o = (y * W + x) * 3;\n          bg[o] = 70 * dim;\n          bg[o + 1] = 62 * dim;\n          bg[o + 2] = 56 * dim;\n        }\n        if (P.burn[i] > 0) {\n          const x = Math.round(cx - 0.5);\n          if (x >= 0 && x \u003c W) {\n            const fl = 0.75 + 0.25 * hash(Math.floor(time * 20), i);\n            const o = (y * W + x) * 3;\n            bg[o] = 255 * fl;\n            bg[o + 1] = 205 * fl;\n            bg[o + 2] = 110 * fl;\n          }\n        }\n        continue;\n      }\n      for (let x = bx0; x \u003c bx0 + bw; x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const o = (y * W + x) * 3;\n        const e = y === basketTop ? 1.15 : 1;\n        bg[o] = 130 * dim * e;\n        bg[o + 1] = 80 * dim * e;\n        bg[o + 2] = 40 * dim * e;\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, bg[o]), Math.min(255, bg[o + 1]), Math.min(255, bg[o + 2]));\n    }\n}\n","layer":{"id":"layer-balloon-box","type":"code","name":"balloon-box","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Balloon Box\n// Family:  weather\n// Idea:    Hot-air balloons ride the dawn winds of a valley box: low down the wind carries them one way, higher up it brings them back the other.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the dawn mass ascensions over Albuquerque and the \"Albuquerque box\", the winds that blow one way near the ground and the other way a few hundred metres up\n// Round:   11\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Wind=0.2..3, Balloons=8..16, Sunrise=0..1\n//\n// Knob 1: Hue. Turns every envelope's colours around the wheel together; each balloon keeps its own stripes, bands or chevrons.\n// Knob 2: Wind. How hard the two winds blow: at the bottom of the range the balloons hang almost still, at the top the near ones cross the panel in a few seconds.\n// Knob 3: Balloons. How many are in the air; a balloon that joins drifts in from the side or lifts off from the field, and one that leaves drifts out and does not come back.\n// Knob 4: Sunrise. The hour: before dawn the sky is deep blue over an orange rim and the burners glow, turned up the sun comes over the ridge and the sky goes to morning blue.\n// Buttons: K1 tap fires every burner at once; the envelopes glow from inside and the balloons climb.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 16;\n// The two winds meet at this height. Above it they blow to the right, below\n// it to the left, and a balloon passing through slows, stops and turns.\nconst SPLIT = 60;\nconst SHEAR = 6;\n// Envelope colours. A balloon picks one of these as its first colour and\n// builds the rest of its fabric from it.\nconst HUES = [0.0, 0.07, 0.13, 0.27, 0.36, 0.5, 0.58, 0.66, 0.76, 0.86, 0.93];\n// How a balloon is sewn: two-colour gores, three-colour gores, a rainbow of\n// gores, level bands, zigzag chevrons, a cap and skirt over striped gores.\nconst DESIGNS = 6;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// The envelope's half width at height t, in radii: t is -1 at the crown, the\n// sphere is widest at 0, and below 0.3 it tapers to the throat at 1.4.\nfunction halfWidth(t) {\n  if (t \u003c -1 || t > 1.4) return 0;\n  if (t \u003c= 0.3) return Math.sqrt(1 - t * t);\n  const s = (t - 0.3) / 1.1;\n  return 0.22 + 0.734 * Math.cos(s * 1.5707963);\n}\n\n// The wind at height y: +1 to the right high up, -1 to the left low down.\nfunction wind(y) {\n  return Math.tanh((SPLIT - y) / SHEAR);\n}\n\n// Sky colour keys from before dawn to morning, top, middle and horizon.\nconst SKY = [\n  [0, [6, 8, 30], [16, 20, 62], [60, 34, 70]],\n  [0.06, [6, 10, 58], [20, 26, 104], [196, 78, 52]],\n  [0.4, [26, 46, 118], [86, 88, 168], [255, 146, 88]],\n  [1, [58, 118, 216], [118, 168, 232], [214, 222, 206]],\n];\n\nfunction skyKeys(s, out) {\n  let a = SKY[0];\n  let b = SKY[SKY.length - 1];\n  for (let i = 0; i \u003c SKY.length - 1; i++)\n    if (s >= SKY[i][0] && s \u003c= SKY[i + 1][0]) {\n      a = SKY[i];\n      b = SKY[i + 1];\n      break;\n    }\n  const f = b[0] > a[0] ? (s - a[0]) / (b[0] - a[0]) : 0;\n  for (let k = 0; k \u003c 3; k++) for (let c = 0; c \u003c 3; c++) out[k * 3 + c] = a[k + 1][c] + (b[k + 1][c] - a[k + 1][c]) * f;\n}\n\n// A new balloon's look: how near it is, its size, its fabric.\nfunction dress(P, i) {\n  const d = Math.random();\n  P.depth[i] = d;\n  P.R[i] = 9 + 7 * d;\n  P.design[i] = Math.floor(Math.random() * DESIGNS);\n  P.hue0[i] = HUES[Math.floor(Math.random() * HUES.length)];\n  P.gores[i] = 8 + 2 * Math.floor(Math.random() * 3);\n  P.rot[i] = Math.random() * 6.283;\n  P.spin[i] = (Math.random() - 0.5) * 0.5;\n  P.glow[i] = 0;\n  P.burn[i] = 0;\n  P.nextBurn[i] = 1 + Math.random() * 5;\n  P.retarget[i] = 6 + Math.random() * 10;\n}\n\n// Lifts a balloon off the field or brings it in on the wind from the side.\nfunction launch(P, i, fromField) {\n  dress(P, i);\n  const R = P.R[i];\n  if (fromField) {\n    P.x[i] = 10 + Math.random() * 44;\n    // Standing on the field with its basket on the ground.\n    P.y[i] = H - 2 * R;\n    P.target[i] = 20 + Math.random() * 74;\n    P.burn[i] = 2.5;\n  } else {\n    // Never at the split, where no wind would bring it in.\n    let y = 16 + Math.random() * 64;\n    if (y > SPLIT - 10) y += 20;\n    P.y[i] = y;\n    P.target[i] = y;\n    const w = wind(y);\n    P.x[i] = w > 0 ? -R * 1.1 : W + R * 1.1;\n  }\n  P.live[i] = 1;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.x = new Float32Array(MAX);\n  P.y = new Float32Array(MAX);\n  P.R = new Float32Array(MAX);\n  P.depth = new Float32Array(MAX);\n  P.design = new Int8Array(MAX);\n  P.hue0 = new Float32Array(MAX);\n  P.gores = new Int8Array(MAX);\n  P.rot = new Float32Array(MAX);\n  P.spin = new Float32Array(MAX);\n  P.glow = new Float32Array(MAX);\n  P.burn = new Float32Array(MAX);\n  P.nextBurn = new Float32Array(MAX);\n  P.target = new Float32Array(MAX);\n  P.retarget = new Float32Array(MAX);\n  P.live = new Int8Array(MAX);\n  P.order = new Int32Array(MAX);\n  P.fab = new Float32Array(MAX * 9);\n  // The rainbow design's gores, one colour each.\n  P.rain = new Float32Array(MAX * 12 * 3);\n  P.sky = new Float32Array(H * 3);\n  P.keys = new Float32Array(9);\n  P.bg = new Float32Array(N * 3);\n  P.col = new Float32Array(3);\n  // The ridge on the far side of the field, and the town's lights under it.\n  P.ridge = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++)\n    P.ridge[x] = Math.round(112 - 4 * Math.sin(x * 0.09 + 0.6) - 3 * Math.sin(x * 0.23 + 2.1) + 2 * hash(x, 3));\n  P.town = new Float32Array(N);\n  for (let i = 0; i \u003c 46; i++) {\n    const x = Math.floor(hash(i, 5) * W);\n    const y = P.ridge[x] + 3 + Math.floor(hash(i, 6) * (H - P.ridge[x] - 3));\n    if (y \u003c H) P.town[y * W + x] = 0.45 + 0.4 * hash(i, 7);\n  }\n  P.stars = new Float32Array(N);\n  for (let i = 0; i \u003c 30; i++) {\n    const x = Math.floor(hash(i, 8) * W);\n    const y = Math.floor(hash(i, 9) * 70);\n    P.stars[y * W + x] = 0.75 + 0.25 * hash(i, 10);\n  }\n  P.count = 8;\n  P.wind = 2;\n  P.hue = 0;\n  P.sun = 0.06;\n  P.ready = 0;\n}\n\n// The first frame's sky: the balloons spread over both winds, none of them\n// at a side, so the panel opens on a fiesta already in the air.\nfunction scatter(P) {\n  const n = P.count;\n  for (let i = 0; i \u003c MAX; i++) P.live[i] = 0;\n  for (let i = 0; i \u003c n; i++) {\n    dress(P, i);\n    // Heights in turn from the two winds, a little shuffled.\n    const slot = (i + 0.5) / n;\n    let y = 18 + slot * 84 + (Math.random() - 0.5) * 8;\n    if (Math.abs(y - SPLIT) \u003c 9) y = SPLIT + (y \u003c SPLIT ? -9 : 9);\n    P.y[i] = y;\n    P.target[i] = y;\n    P.x[i] = 8 + ((i * 0.618 + 0.2) % 1) * 48;\n    P.live[i] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.wind = Math.max(0.2, Math.min(3, k[1]));\n  P.count = Math.max(8, Math.min(MAX, Math.round(k[2])));\n  P.sun = Math.max(0, Math.min(1, k[3]));\n  if (!P.ready) {\n    scatter(P);\n    P.ready = 1;\n  }\n  const all = input.btnPressed && input.btnPressed[0];\n  let live = 0;\n  for (let i = 0; i \u003c MAX; i++) if (P.live[i]) live++;\n  // A balloon joins when the knob asks for more than are flying.\n  for (let i = 0; i \u003c MAX && live \u003c P.count; i++)\n    if (!P.live[i]) {\n      launch(P, i, Math.random() \u003c 0.4);\n      live++;\n    }\n\n  // Near balloons cross the panel faster than far ones, the way they would.\n  const pace = 4.4 * P.wind;\n  for (let i = 0; i \u003c MAX; i++) {\n    if (!P.live[i]) continue;\n    const R = P.R[i];\n    const d = P.depth[i];\n    if (all) {\n      P.burn[i] = 2.5;\n      P.target[i] = Math.max(16, P.y[i] - 28);\n      P.retarget[i] = 8 + Math.random() * 6;\n    }\n    // Now and then a pilot picks a new height, often in the other wind.\n    P.retarget[i] -= dt;\n    if (P.retarget[i] \u003c= 0) {\n      P.retarget[i] = 7 + Math.random() * 10;\n      P.target[i] = P.y[i] \u003c SPLIT ? SPLIT + 8 + Math.random() * 30 : 14 + Math.random() * 38;\n    }\n    // Climbing takes the burner; between climbs it fires short bursts to hold height.\n    const dy = P.target[i] - P.y[i];\n    if (dy \u003c -3 && P.burn[i] \u003c= 0) P.burn[i] = 1.2 + Math.random();\n    P.nextBurn[i] -= dt;\n    if (P.nextBurn[i] \u003c= 0) {\n      P.nextBurn[i] = 3 + Math.random() * 6;\n      if (P.burn[i] \u003c= 0) P.burn[i] = 0.5 + Math.random() * 0.6;\n    }\n    const firing = P.burn[i] > 0;\n    if (firing) P.burn[i] -= dt;\n    P.glow[i] += ((firing ? 1 : 0) - P.glow[i]) * Math.min(1, dt * (firing ? 7 : 0.9));\n    const climb = Math.max(-1, Math.min(1, dy / 10)) * (1.2 + 0.8 * Math.sqrt(P.wind / 2));\n    P.y[i] += climb * (0.6 + 0.4 * d) * dt;\n    P.x[i] += wind(P.y[i]) * pace * (0.5 + 0.5 * d) * dt;\n    P.rot[i] += P.spin[i] * dt;\n    // Off the side: the balloon is gone, and one takes its place.\n    const off = R * 1.15;\n    if (P.x[i] \u003c -off - 1 || P.x[i] > W + off + 1 || P.y[i] \u003c -R * 2) {\n      if (live > P.count) {\n        P.live[i] = 0;\n        live--;\n      } else launch(P, i, Math.random() \u003c 0.35);\n    }\n  }\n\n  // Fabric colours for this frame: each balloon's own, turned by K1.\n  const fab = P.fab;\n  for (let i = 0; i \u003c MAX; i++) {\n    if (!P.live[i]) continue;\n    const h = P.hue0[i] + P.hue;\n    const o = i * 9;\n    const des = P.design[i];\n    // Every colour at full value, so a seam between two gores changes the\n    // hue and not the brightness.\n    if (des === 0) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.5, 1, 1);\n      hsvInto(fab, o + 6, h, 1, 1);\n    } else if (des === 1) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.33, 1, 1);\n      hsvInto(fab, o + 6, h + 0.67, 1, 1);\n    } else if (des === 3) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.12, 1, 1);\n      hsvInto(fab, o + 6, h + 0.24, 1, 1);\n    } else if (des === 4) {\n      hsvInto(fab, o, h, 1, 1);\n      hsvInto(fab, o + 3, h + 0.17, 1, 1);\n      hsvInto(fab, o + 6, h + 0.5, 1, 1);\n    } else {\n      hsvInto(fab, o, h + 0.5, 1, 1);\n      hsvInto(fab, o + 3, h, 1, 1);\n      hsvInto(fab, o + 6, h + 0.25, 1, 1);\n    }\n    if (des === 2) for (let g = 0; g \u003c P.gores[i]; g++) hsvInto(P.rain, (i * 12 + g) * 3, h + g / P.gores[i], 1, 1);\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const s = P.sun;\n  const keys = P.keys;\n  skyKeys(s, keys);\n  const bg = P.bg;\n  // The sky: top colour down to the middle, then to the horizon's rim, with\n  // the sun's glow over the ridge on the east side.\n  const sunX = 50;\n  const sunY = 118 - 40 * s;\n  // No glow before the sun is near: until then the rim is the whole dawn.\n  const sunAmp = 0.7 * smooth(0.08, 0.5, s);\n  const starAmp = 70 * (1 - smooth(0.05, 0.3, s));\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / 112;\n    let f;\n    let a;\n    let b;\n    if (v \u003c 0.55) {\n      f = v / 0.55;\n      a = 0;\n      b = 3;\n    } else {\n      f = Math.min(1, (v - 0.55) / 0.45);\n      // Eased, not squared: squared, the red of the rim climbs 7 levels a\n      // row near the ridge and the whole rim reads as a soft edge.\n      f = Math.pow(f, 1.5);\n      a = 3;\n      b = 6;\n    }\n    for (let c = 0; c \u003c 3; c++) P.sky[y * 3 + c] = keys[a + c] + (keys[b + c] - keys[a + c]) * f;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      if (y >= P.ridge[x]) {\n        // The ridge and the field under it, black but for the town.\n        const t = P.town[p] * (1 - 0.8 * smooth(0.3, 0.9, s));\n        const shade = 10 + 34 * smooth(0.2, 1, s);\n        bg[o] = shade * 0.8 + t * 255;\n        bg[o + 1] = shade * 0.75 + t * 190;\n        bg[o + 2] = shade + t * 90;\n        continue;\n      }\n      const gx = (x - sunX) / 34;\n      const gy = (y - sunY) / 22;\n      const g = sunAmp * Math.exp(-(gx * gx + gy * gy));\n      const st = P.stars[p] * starAmp;\n      bg[o] = P.sky[y * 3] + g * 120 + st;\n      bg[o + 1] = P.sky[y * 3 + 1] + g * 70 + st;\n      bg[o + 2] = P.sky[y * 3 + 2] + g * 30 + st;\n    }\n  }\n\n  // Far balloons first, so near ones pass in front.\n  let n = 0;\n  for (let i = 0; i \u003c MAX; i++) if (P.live[i]) P.order[n++] = i;\n  for (let a = 1; a \u003c n; a++) {\n    const v = P.order[a];\n    let b = a - 1;\n    while (b >= 0 && P.depth[P.order[b]] > P.depth[v]) {\n      P.order[b + 1] = P.order[b];\n      b--;\n    }\n    P.order[b + 1] = v;\n  }\n\n  // Light from the east and a little from below, the sun at the rim.\n  const Lx = 0.6;\n  const Ly = 0.12;\n  const Lz = 0.79;\n  const amb = 0.63 + 0.06 * s;\n  const sunL = 0.41 + 0.04 * s;\n  const fab = P.fab;\n  const col = P.col;\n  for (let q = 0; q \u003c n; q++) {\n    const i = P.order[q];\n    const cx = P.x[i];\n    const cy = P.y[i];\n    const R = P.R[i];\n    const d = P.depth[i];\n    const des = P.design[i];\n    const G = P.gores[i];\n    const rot = P.rot[i];\n    const glow = P.glow[i];\n    // Far balloons sit in more of the dawn's shadow.\n    const far = 0.88 + 0.12 * d;\n    const o9 = i * 9;\n    const x0 = Math.max(0, Math.floor(cx - R - 1));\n    const x1 = Math.min(W - 1, Math.ceil(cx + R + 1));\n    const y0 = Math.max(0, Math.floor(cy - R - 1));\n    const y1 = Math.min(H - 1, Math.ceil(cy + 1.4 * R));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = y + 0.5 - cy;\n      const t = dy / R;\n      const hw = halfWidth(t) * R;\n      if (hw \u003c= 0) continue;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x + 0.5 - cx;\n        const cover = Math.min(1, hw - Math.abs(dx) + 0.5);\n        if (cover \u003c= 0) continue;\n        const u = Math.asin(Math.max(-1, Math.min(1, dx / hw)));\n        const lon = (u + rot) / 6.2831853 + 2;\n        const lf = lon * G;\n        const gore = Math.floor(lf) % G;\n        let c;\n        if (des === 0 || des === 1) c = gore % (des === 0 ? 2 : 3);\n        else if (des === 2) c = -1;\n        else if (des === 3) c = Math.floor((t + 1) * 2.4) % 3;\n        else if (des === 4) {\n          const zig = Math.abs(lf - Math.floor(lf) - 0.5);\n          c = Math.floor((t + 1) * 2.2 + zig * 1.2) % 3;\n        } else c = t \u003c -0.45 || t > 0.95 ? 0 : 1 + (gore % 2);\n        const from = c \u003c 0 ? P.rain : fab;\n        const oc = c \u003c 0 ? (i * 12 + gore) * 3 : o9 + c * 3;\n        col[0] = from[oc];\n        col[1] = from[oc + 1];\n        col[2] = from[oc + 2];\n        // The cloth's light: a sphere above the waist, a cone below it.\n        let nx;\n        let ny;\n        if (t \u003c= 0.3) {\n          nx = dx / R;\n          ny = t;\n        } else {\n          nx = (dx / hw) * 0.95;\n          ny = 0.3;\n        }\n        const nz = Math.sqrt(Math.max(0, 1 - nx * nx - ny * ny));\n        // Half Lambert: the shadow side turns gently into the dark limb.\n        const lam = 0.5 + 0.5 * (nx * Lx + ny * Ly + nz * Lz);\n        // The burner lights the envelope from inside, strongest near the mouth.\n        const lit = amb + sunL * lam + glow * 0.5 * (0.45 + 0.55 * Math.min(1, (t + 1) / 2.2));\n        const p = y * W + x;\n        const o = p * 3;\n        const white = glow * 0.22;\n        for (let ch = 0; ch \u003c 3; ch++) {\n          let v = col[ch] * Math.min(1.08, lit) * far;\n          v += (255 - v) * white;\n          bg[o + ch] += (Math.min(255, v) - bg[o + ch]) * cover;\n        }\n      }\n    }\n    // Under the mouth: the cables, the basket and, while it fires, the flame.\n    const mouth = cy + 1.4 * R;\n    const basketTop = Math.round(mouth + Math.max(2, 0.32 * R));\n    const bh = Math.max(2, Math.round(0.24 * R));\n    const bw = Math.max(2, Math.round(0.36 * R));\n    const bx0 = Math.round(cx - bw / 2);\n    const dim = 0.55 + 0.45 * d;\n    for (let y = Math.round(mouth); y \u003c basketTop + bh; y++) {\n      if (y \u003c 0 || y >= H) continue;\n      if (y \u003c basketTop) {\n        // Cables from the mouth's corners to the basket's.\n        const f = (y - mouth) / Math.max(1, basketTop - mouth);\n        const half = 0.22 * R + (bw / 2 - 0.22 * R) * f;\n        for (const x of [Math.round(cx - half - 0.5), Math.round(cx + half - 0.5)]) {\n          if (x \u003c 0 || x >= W) continue;\n          const o = (y * W + x) * 3;\n          bg[o] = 70 * dim;\n          bg[o + 1] = 62 * dim;\n          bg[o + 2] = 56 * dim;\n        }\n        if (P.burn[i] > 0) {\n          const x = Math.round(cx - 0.5);\n          if (x >= 0 && x \u003c W) {\n            const fl = 0.75 + 0.25 * hash(Math.floor(time * 20), i);\n            const o = (y * W + x) * 3;\n            bg[o] = 255 * fl;\n            bg[o + 1] = 205 * fl;\n            bg[o + 2] = 110 * fl;\n          }\n        }\n        continue;\n      }\n      for (let x = bx0; x \u003c bx0 + bw; x++) {\n        if (x \u003c 0 || x >= W) continue;\n        const o = (y * W + x) * 3;\n        const e = y === basketTop ? 1.15 : 1;\n        bg[o] = 130 * dim * e;\n        bg[o + 1] = 80 * dim * e;\n        bg[o + 2] = 40 * dim * e;\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, bg[o]), Math.min(255, bg[o + 1]), Math.min(255, bg[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Wind=0.2..3, Balloons=8..16, Sunrise=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every envelope's colours around the wheel together; each balloon keeps its own stripes, bands or chevrons."},{"name":"Wind","min":0.2,"max":3,"about":"How hard the two winds blow: at the bottom of the range the balloons hang almost still, at the top the near ones cross the panel in a few seconds."},{"name":"Balloons","min":8,"max":16,"about":"How many are in the air; a balloon that joins drifts in from the side or lifts off from the field, and one that leaves drifts out and does not come back."},{"name":"Sunrise","min":0,"max":1,"about":"The hour: before dawn the sky is deep blue over an orange rim and the burners glow, turned up the sun comes over the ridge and the sky goes to morning blue."}],"start":[0,2,8,0.06],"measures":{"motion":0.167,"detail":0.0307,"edges":0.6336,"complexity":0.5511,"coverage":0.8946,"colour":0.5662,"drift":0.2806},"knobResponse":[0.306,0.2762,0.2316,0.2865]},{"slug":"bauhaus","title":"Bauhaus","family":"geometry","round":1,"note":"바우하우스 포스터처럼 납작한 원반과 막대가 2×4 칸에 놓이고, 한 칸씩 천천히 다른 모양이나 색으로 바뀌어요.","idea":"A poster grid of discs, halves, quarters and bars in three primaries and a cream, where one cell at a time turns or trades its shape and the sheet finds a new balance.","buttons":"K1 tap deals the whole sheet again, a diagonal of cells at a time.","code":"// ===== Patternflow pattern =====\n// Title:   Bauhaus\n// Family:  geometry\n// Idea:    A poster grid of discs, halves, quarters and bars in three primaries and a cream, where one cell at a time turns or trades its shape and the sheet finds a new balance.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0.25..6, Grid=4..12, Line=0..1\n//\n// Knob 1: Hue. Turns the red, yellow and blue together around the wheel; the cream stays cream.\n// Knob 2: Pace. How often a cell changes and how long it takes; low is one slow turn after another, high has three cells moving at once.\n// Knob 3: Grid. Cells down the long side, from four big squares to twelve small ones.\n// Knob 4: Line. How many cells are drawn as a line instead of a solid shape; at the top the sheet is a line drawing.\n// Buttons: K1 tap deals the whole sheet again, a diagonal of cells at a time.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 12 * 6;\n\nconst DISC = 0;\nconst HALF = 1;\nconst QUARTER = 2;\nconst BAR = 3;\nconst SQUARE = 4;\nconst TRIANGLE = 5;\nconst LEAF = 6;\nconst ARCS = 7;\nconst DOT = 8;\nconst SHAPES = 9;\n\n// Where each shape shrinks to and grows from, in its own unturned frame.\nconst ANCHOR_U = [0, 0, -1, 0, 0, 1, 0, -1, 0.5];\nconst ANCHOR_V = [0, 1, 1, 0, 0, 1, 0, 1, 0.5];\n\n// How likely a freshly dealt shape sits on a coloured square: small ones often, big ones seldom.\nconst GROUND = [0.3, 0.1, 0.06, 0.22, 0.35, 0.1, 0.1, 0.06, 0.5];\n\nconst TURN = 1;\nconst MORPH = 2;\nconst RECOLOUR = 3;\n\nconst SQRT_HALF = Math.SQRT1_2;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(t) {\n  t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\n// Signed distance to a shape, in half-cells, negative inside.\nfunction shapeDist(shape, u, v) {\n  if (shape === DISC) return Math.sqrt(u * u + v * v) - 0.81;\n  if (shape === HALF) return Math.max(Math.sqrt(u * u + (v - 1) * (v - 1)) - 1, v - 1);\n  if (shape === QUARTER) return Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1)) - 2;\n  if (shape === BAR) return Math.abs(v) - 0.36;\n  if (shape === SQUARE) return Math.max(Math.abs(u), Math.abs(v)) - 0.56;\n  if (shape === TRIANGLE) return -(u + v) * SQRT_HALF;\n  if (shape === DOT) return Math.sqrt((u - 0.5) * (u - 0.5) + (v - 0.5) * (v - 0.5)) - 0.3;\n  if (shape === LEAF) {\n    const a = Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1)) - 2;\n    const b = Math.sqrt((u - 1) * (u - 1) + (v + 1) * (v + 1)) - 2;\n    return Math.max(a, b);\n  }\n  // Three bands round a corner, two of them lit.\n  const r = Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1));\n  if (r >= 2) return r - 2;\n  const q = r * 1.5;\n  const band = Math.floor(q);\n  const f = q - band;\n  const edge = Math.min(f, 1 - f) / 1.5;\n  return band === 1 ? edge : -edge;\n}\n\n// A shape turned by `ang` and scaled by `s` about its anchor.\nfunction placed(shape, u, v, c, sn, s) {\n  let su = c * u + sn * v;\n  let sv = -sn * u + c * v;\n  if (s \u003c 0.999) {\n    if (s \u003c 0.02) return 9;\n    const au = ANCHOR_U[shape];\n    const av = ANCHOR_V[shape];\n    su = au + (su - au) / s;\n    sv = av + (sv - av) / s;\n    return shapeDist(shape, su, sv) * s;\n  }\n  return shapeDist(shape, su, sv);\n}\n\n// A square looks the same after a quarter turn, so it turns in eighths.\nfunction angleOf(shape, rot) {\n  return rot * (shape === SQUARE ? Math.PI / 4 : Math.PI / 2);\n}\n\nfunction pickColour(p, avoidA, avoidB) {\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const r = Math.random();\n    const c = r \u003c 0.32 ? 1 : r \u003c 0.58 ? 2 : r \u003c 0.88 ? 3 : 4;\n    if (c !== avoidA && c !== avoidB) return c;\n  }\n  return 1 + Math.floor(Math.random() * 4);\n}\n\n// Grounds lean to red and blue; a yellow square is loud on a dark panel.\nfunction pickGround(avoid) {\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const r = Math.random();\n    const c = r \u003c 0.38 ? 1 : r \u003c 0.8 ? 3 : r \u003c 0.9 ? 2 : 4;\n    if (c !== avoid) return c;\n  }\n  return avoid === 3 ? 1 : 3;\n}\n\n// A neighbour's colour, so a new cell can avoid matching the one beside it and the one above.\nfunction neighbour(p, c, dx, dy) {\n  const i = c % p.cols;\n  const j = (c - i) / p.cols;\n  const ni = i + dx;\n  const nj = j + dy;\n  if (ni \u003c 0 || nj \u003c 0 || ni >= p.cols || nj >= p.rows) return -1;\n  return p.toFg[nj * p.cols + ni];\n}\n\nfunction randomShape(p, c) {\n  p.toShape[c] = Math.floor(Math.random() * SHAPES);\n  p.toRot[c] = Math.floor(Math.random() * 4);\n  p.toFg[c] = pickColour(p, neighbour(p, c, -1, 0), neighbour(p, c, 0, -1));\n  if (Math.random() \u003c GROUND[p.toShape[c]]) {\n    p.toBg[c] = pickGround(p.toFg[c]);\n  } else p.toBg[c] = 0;\n}\n\nfunction build(p, n) {\n  p.n = n;\n  // The panel stands up, so the knob counts cells down its long side.\n  const S = Math.floor(H / n);\n  p.S = S;\n  p.rows = n;\n  p.cols = Math.max(1, Math.floor(W / S));\n  p.ox = Math.floor((W - p.cols * S) / 2);\n  p.oy = Math.floor((H - n * S) / 2);\n  const count = p.cols * p.rows;\n  for (let c = 0; c \u003c count; c++) {\n    randomShape(p, c);\n    p.fromShape[c] = p.toShape[c];\n    p.fromRot[c] = p.toRot[c];\n    p.fromFg[c] = p.toFg[c];\n    p.fromBg[c] = p.toBg[c];\n    p.kind[c] = 0;\n    p.prog[c] = 1;\n    p.last[c] = p.clock - Math.random() * 4;\n    p.pending[c] = -1;\n    p.lineR[c] = Math.random();\n  }\n  p.count = count;\n}\n\nfunction start(p, c, kind, dur) {\n  p.fromShape[c] = p.toShape[c];\n  p.fromRot[c] = p.toRot[c];\n  p.fromFg[c] = p.toFg[c];\n  p.fromBg[c] = p.toBg[c];\n  if (kind === TURN && p.toShape[c] === DISC) kind = Math.random() \u003c 0.5 ? MORPH : RECOLOUR;\n  if (kind === TURN) {\n    p.toRot[c] = (p.toRot[c] + (Math.random() \u003c 0.5 ? 1 : 3)) & 3;\n  } else if (kind === MORPH) {\n    let s = Math.floor(Math.random() * (SHAPES - 1));\n    if (s >= p.fromShape[c]) s++;\n    p.toShape[c] = s;\n    p.toRot[c] = Math.floor(Math.random() * 4);\n    if (Math.random() \u003c 0.5) p.toFg[c] = pickColour(p, p.fromFg[c], p.toBg[c]);\n  } else {\n    if (Math.random() \u003c 0.35) {\n      // The ground changes: a bare cell gets a colour, a coloured one usually goes bare.\n      p.toBg[c] = p.fromBg[c] && Math.random() \u003c 0.6 ? 0 : pickGround(p.fromFg[c]);\n    } else p.toFg[c] = pickColour(p, p.fromFg[c], p.toBg[c]);\n    p.wipe[c] = Math.floor(Math.random() * 5);\n  }\n  p.kind[c] = kind;\n  p.prog[c] = 0;\n  p.dur[c] = dur;\n  p.last[c] = p.clock;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.fromShape = new Uint8Array(MAX);\n  p.toShape = new Uint8Array(MAX);\n  p.fromRot = new Uint8Array(MAX);\n  p.toRot = new Uint8Array(MAX);\n  p.fromFg = new Uint8Array(MAX);\n  p.toFg = new Uint8Array(MAX);\n  p.fromBg = new Uint8Array(MAX);\n  p.toBg = new Uint8Array(MAX);\n  p.kind = new Uint8Array(MAX);\n  p.wipe = new Uint8Array(MAX);\n  p.prog = new Float32Array(MAX);\n  p.dur = new Float32Array(MAX);\n  p.last = new Float32Array(MAX);\n  p.pending = new Float32Array(MAX);\n  p.lineR = new Float32Array(MAX);\n  p.pal = new Float32Array(5 * 3);\n  p.hue = -1;\n  p.n = 0;\n  p.clock = 0;\n  p.timer = 0.4;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  p.clock += dt;\n  const n = Math.max(4, Math.min(12, Math.round(k[2])));\n  if (n !== p.n) build(p, n);\n  p.line = k[3];\n\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    hsv(0.995 + p.hue, 0.86, 0.94, p.pal, 3);\n    hsv(0.125 + p.hue, 0.9, 1, p.pal, 6);\n    hsv(0.6 + p.hue, 0.84, 0.92, p.pal, 9);\n    p.pal[12] = 190;\n    p.pal[13] = 168;\n    p.pal[14] = 128;\n  }\n\n  // At pace 2 a cell changes every 2.5 s, and each whole step of the knob is 1.7 times quicker or slower.\n  const every = 2.5 * Math.pow(2, (2 - k[1]) * 0.8);\n  const dur = Math.max(0.6, every * 1.1);\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    for (let c = 0; c \u003c p.count; c++) {\n      const i = c % p.cols;\n      p.pending[c] = p.clock + (i + (c - i) / p.cols) * 0.14;\n    }\n  }\n\n  for (let c = 0; c \u003c p.count; c++) {\n    if (p.prog[c] \u003c 1) {\n      p.prog[c] = Math.min(1, p.prog[c] + dt / p.dur[c]);\n      if (p.prog[c] >= 1) p.kind[c] = 0;\n    } else if (p.pending[c] >= 0 && p.clock >= p.pending[c]) {\n      p.pending[c] = -1;\n      start(p, c, MORPH, 0.9);\n    }\n  }\n\n  p.timer -= dt;\n  if (p.timer \u003c= 0) {\n    p.timer += every;\n    if (p.timer \u003c 0) p.timer = every;\n    // Of four cells drawn at random, the one left alone longest changes.\n    let best = -1;\n    for (let tries = 0; tries \u003c 4; tries++) {\n      const c = Math.floor(Math.random() * p.count);\n      if (p.prog[c] \u003c 1 || p.pending[c] >= 0) continue;\n      if (best \u003c 0 || p.last[c] \u003c p.last[best]) best = c;\n    }\n    if (best >= 0) {\n      const r = Math.random();\n      start(p, best, r \u003c 0.4 ? TURN : r \u003c 0.8 ? MORPH : RECOLOUR, dur);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const S = p.S;\n  const half = S / 2;\n  const pal = p.pal;\n  const lineW = (S >= 20 ? 2 : 1) / half;\n\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n\n  for (let c = 0; c \u003c p.count; c++) {\n    const i = c % p.cols;\n    const j = (c - i) / p.cols;\n    const x0 = p.ox + i * S;\n    const y0 = p.oy + j * S;\n    const kind = p.kind[c];\n    const e = smooth(p.prog[c]);\n    const outline = p.lineR[c] \u003c p.line;\n\n    let shape = p.toShape[c];\n    let ang = angleOf(shape, p.toRot[c]);\n    let scale = 1;\n    let fg = p.toFg[c];\n    let bg = p.toBg[c];\n    let fg2 = fg;\n    let bg2 = bg;\n    let front = 2;\n    if (kind === TURN) {\n      const a0 = angleOf(shape, p.fromRot[c]);\n      let d = ang - a0;\n      // The short way round.\n      if (d > Math.PI) d -= Math.PI * 2;\n      if (d \u003c -Math.PI) d += Math.PI * 2;\n      ang = a0 + d * e;\n    } else if (kind === MORPH) {\n      const pr = p.prog[c];\n      if (pr \u003c 0.5) {\n        shape = p.fromShape[c];\n        ang = angleOf(shape, p.fromRot[c]);\n        fg = p.fromFg[c];\n        scale = 1 - smooth(pr * 2);\n      } else scale = smooth(pr * 2 - 1);\n    } else if (kind === RECOLOUR) {\n      fg = p.fromFg[c];\n      bg = p.fromBg[c];\n      front = -1.45 + e * 2.9;\n    }\n    const cs = Math.cos(ang);\n    const sn = Math.sin(ang);\n    const wipe = p.wipe[c];\n\n    for (let ly = 0; ly \u003c S; ly++) {\n      const y = y0 + ly;\n      const v = (ly + 0.5 - half) / half;\n      for (let lx = 0; lx \u003c S; lx++) {\n        const x = x0 + lx;\n        const u = (lx + 0.5 - half) / half;\n        let f = fg;\n        let b = bg;\n        if (kind === RECOLOUR) {\n          // A hard front sweeps the new colours in: from a side, or as an iris.\n          const w = wipe === 0 ? u : wipe === 1 ? -u : wipe === 2 ? v : wipe === 3 ? -v : Math.sqrt(u * u + v * v) * 1.42 - 1;\n          if (w \u003c front) {\n            f = fg2;\n            b = bg2;\n          }\n        }\n        const d = Math.max(placed(shape, u, v, cs, sn, scale), Math.max(Math.abs(u), Math.abs(v)) - 1);\n        let col = d \u003c 0 && (!outline || d > -lineW) ? f : 0;\n        // Drawn as a line, the ground is a frame round the cell.\n        if (!col && b) col = !outline || Math.max(Math.abs(u), Math.abs(v)) > 1 - lineW ? b : 0;\n        if (col) display.setPixel(x, y, pal[col * 3], pal[col * 3 + 1], pal[col * 3 + 2]);\n      }\n    }\n  }\n}\n","layer":{"id":"layer-bauhaus","type":"code","name":"bauhaus","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bauhaus\n// Family:  geometry\n// Idea:    A poster grid of discs, halves, quarters and bars in three primaries and a cream, where one cell at a time turns or trades its shape and the sheet finds a new balance.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0.25..6, Grid=4..12, Line=0..1\n//\n// Knob 1: Hue. Turns the red, yellow and blue together around the wheel; the cream stays cream.\n// Knob 2: Pace. How often a cell changes and how long it takes; low is one slow turn after another, high has three cells moving at once.\n// Knob 3: Grid. Cells down the long side, from four big squares to twelve small ones.\n// Knob 4: Line. How many cells are drawn as a line instead of a solid shape; at the top the sheet is a line drawing.\n// Buttons: K1 tap deals the whole sheet again, a diagonal of cells at a time.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 12 * 6;\n\nconst DISC = 0;\nconst HALF = 1;\nconst QUARTER = 2;\nconst BAR = 3;\nconst SQUARE = 4;\nconst TRIANGLE = 5;\nconst LEAF = 6;\nconst ARCS = 7;\nconst DOT = 8;\nconst SHAPES = 9;\n\n// Where each shape shrinks to and grows from, in its own unturned frame.\nconst ANCHOR_U = [0, 0, -1, 0, 0, 1, 0, -1, 0.5];\nconst ANCHOR_V = [0, 1, 1, 0, 0, 1, 0, 1, 0.5];\n\n// How likely a freshly dealt shape sits on a coloured square: small ones often, big ones seldom.\nconst GROUND = [0.3, 0.1, 0.06, 0.22, 0.35, 0.1, 0.1, 0.06, 0.5];\n\nconst TURN = 1;\nconst MORPH = 2;\nconst RECOLOUR = 3;\n\nconst SQRT_HALF = Math.SQRT1_2;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(t) {\n  t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\n// Signed distance to a shape, in half-cells, negative inside.\nfunction shapeDist(shape, u, v) {\n  if (shape === DISC) return Math.sqrt(u * u + v * v) - 0.81;\n  if (shape === HALF) return Math.max(Math.sqrt(u * u + (v - 1) * (v - 1)) - 1, v - 1);\n  if (shape === QUARTER) return Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1)) - 2;\n  if (shape === BAR) return Math.abs(v) - 0.36;\n  if (shape === SQUARE) return Math.max(Math.abs(u), Math.abs(v)) - 0.56;\n  if (shape === TRIANGLE) return -(u + v) * SQRT_HALF;\n  if (shape === DOT) return Math.sqrt((u - 0.5) * (u - 0.5) + (v - 0.5) * (v - 0.5)) - 0.3;\n  if (shape === LEAF) {\n    const a = Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1)) - 2;\n    const b = Math.sqrt((u - 1) * (u - 1) + (v + 1) * (v + 1)) - 2;\n    return Math.max(a, b);\n  }\n  // Three bands round a corner, two of them lit.\n  const r = Math.sqrt((u + 1) * (u + 1) + (v - 1) * (v - 1));\n  if (r >= 2) return r - 2;\n  const q = r * 1.5;\n  const band = Math.floor(q);\n  const f = q - band;\n  const edge = Math.min(f, 1 - f) / 1.5;\n  return band === 1 ? edge : -edge;\n}\n\n// A shape turned by `ang` and scaled by `s` about its anchor.\nfunction placed(shape, u, v, c, sn, s) {\n  let su = c * u + sn * v;\n  let sv = -sn * u + c * v;\n  if (s \u003c 0.999) {\n    if (s \u003c 0.02) return 9;\n    const au = ANCHOR_U[shape];\n    const av = ANCHOR_V[shape];\n    su = au + (su - au) / s;\n    sv = av + (sv - av) / s;\n    return shapeDist(shape, su, sv) * s;\n  }\n  return shapeDist(shape, su, sv);\n}\n\n// A square looks the same after a quarter turn, so it turns in eighths.\nfunction angleOf(shape, rot) {\n  return rot * (shape === SQUARE ? Math.PI / 4 : Math.PI / 2);\n}\n\nfunction pickColour(p, avoidA, avoidB) {\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const r = Math.random();\n    const c = r \u003c 0.32 ? 1 : r \u003c 0.58 ? 2 : r \u003c 0.88 ? 3 : 4;\n    if (c !== avoidA && c !== avoidB) return c;\n  }\n  return 1 + Math.floor(Math.random() * 4);\n}\n\n// Grounds lean to red and blue; a yellow square is loud on a dark panel.\nfunction pickGround(avoid) {\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const r = Math.random();\n    const c = r \u003c 0.38 ? 1 : r \u003c 0.8 ? 3 : r \u003c 0.9 ? 2 : 4;\n    if (c !== avoid) return c;\n  }\n  return avoid === 3 ? 1 : 3;\n}\n\n// A neighbour's colour, so a new cell can avoid matching the one beside it and the one above.\nfunction neighbour(p, c, dx, dy) {\n  const i = c % p.cols;\n  const j = (c - i) / p.cols;\n  const ni = i + dx;\n  const nj = j + dy;\n  if (ni \u003c 0 || nj \u003c 0 || ni >= p.cols || nj >= p.rows) return -1;\n  return p.toFg[nj * p.cols + ni];\n}\n\nfunction randomShape(p, c) {\n  p.toShape[c] = Math.floor(Math.random() * SHAPES);\n  p.toRot[c] = Math.floor(Math.random() * 4);\n  p.toFg[c] = pickColour(p, neighbour(p, c, -1, 0), neighbour(p, c, 0, -1));\n  if (Math.random() \u003c GROUND[p.toShape[c]]) {\n    p.toBg[c] = pickGround(p.toFg[c]);\n  } else p.toBg[c] = 0;\n}\n\nfunction build(p, n) {\n  p.n = n;\n  // The panel stands up, so the knob counts cells down its long side.\n  const S = Math.floor(H / n);\n  p.S = S;\n  p.rows = n;\n  p.cols = Math.max(1, Math.floor(W / S));\n  p.ox = Math.floor((W - p.cols * S) / 2);\n  p.oy = Math.floor((H - n * S) / 2);\n  const count = p.cols * p.rows;\n  for (let c = 0; c \u003c count; c++) {\n    randomShape(p, c);\n    p.fromShape[c] = p.toShape[c];\n    p.fromRot[c] = p.toRot[c];\n    p.fromFg[c] = p.toFg[c];\n    p.fromBg[c] = p.toBg[c];\n    p.kind[c] = 0;\n    p.prog[c] = 1;\n    p.last[c] = p.clock - Math.random() * 4;\n    p.pending[c] = -1;\n    p.lineR[c] = Math.random();\n  }\n  p.count = count;\n}\n\nfunction start(p, c, kind, dur) {\n  p.fromShape[c] = p.toShape[c];\n  p.fromRot[c] = p.toRot[c];\n  p.fromFg[c] = p.toFg[c];\n  p.fromBg[c] = p.toBg[c];\n  if (kind === TURN && p.toShape[c] === DISC) kind = Math.random() \u003c 0.5 ? MORPH : RECOLOUR;\n  if (kind === TURN) {\n    p.toRot[c] = (p.toRot[c] + (Math.random() \u003c 0.5 ? 1 : 3)) & 3;\n  } else if (kind === MORPH) {\n    let s = Math.floor(Math.random() * (SHAPES - 1));\n    if (s >= p.fromShape[c]) s++;\n    p.toShape[c] = s;\n    p.toRot[c] = Math.floor(Math.random() * 4);\n    if (Math.random() \u003c 0.5) p.toFg[c] = pickColour(p, p.fromFg[c], p.toBg[c]);\n  } else {\n    if (Math.random() \u003c 0.35) {\n      // The ground changes: a bare cell gets a colour, a coloured one usually goes bare.\n      p.toBg[c] = p.fromBg[c] && Math.random() \u003c 0.6 ? 0 : pickGround(p.fromFg[c]);\n    } else p.toFg[c] = pickColour(p, p.fromFg[c], p.toBg[c]);\n    p.wipe[c] = Math.floor(Math.random() * 5);\n  }\n  p.kind[c] = kind;\n  p.prog[c] = 0;\n  p.dur[c] = dur;\n  p.last[c] = p.clock;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.fromShape = new Uint8Array(MAX);\n  p.toShape = new Uint8Array(MAX);\n  p.fromRot = new Uint8Array(MAX);\n  p.toRot = new Uint8Array(MAX);\n  p.fromFg = new Uint8Array(MAX);\n  p.toFg = new Uint8Array(MAX);\n  p.fromBg = new Uint8Array(MAX);\n  p.toBg = new Uint8Array(MAX);\n  p.kind = new Uint8Array(MAX);\n  p.wipe = new Uint8Array(MAX);\n  p.prog = new Float32Array(MAX);\n  p.dur = new Float32Array(MAX);\n  p.last = new Float32Array(MAX);\n  p.pending = new Float32Array(MAX);\n  p.lineR = new Float32Array(MAX);\n  p.pal = new Float32Array(5 * 3);\n  p.hue = -1;\n  p.n = 0;\n  p.clock = 0;\n  p.timer = 0.4;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  p.clock += dt;\n  const n = Math.max(4, Math.min(12, Math.round(k[2])));\n  if (n !== p.n) build(p, n);\n  p.line = k[3];\n\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    hsv(0.995 + p.hue, 0.86, 0.94, p.pal, 3);\n    hsv(0.125 + p.hue, 0.9, 1, p.pal, 6);\n    hsv(0.6 + p.hue, 0.84, 0.92, p.pal, 9);\n    p.pal[12] = 190;\n    p.pal[13] = 168;\n    p.pal[14] = 128;\n  }\n\n  // At pace 2 a cell changes every 2.5 s, and each whole step of the knob is 1.7 times quicker or slower.\n  const every = 2.5 * Math.pow(2, (2 - k[1]) * 0.8);\n  const dur = Math.max(0.6, every * 1.1);\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    for (let c = 0; c \u003c p.count; c++) {\n      const i = c % p.cols;\n      p.pending[c] = p.clock + (i + (c - i) / p.cols) * 0.14;\n    }\n  }\n\n  for (let c = 0; c \u003c p.count; c++) {\n    if (p.prog[c] \u003c 1) {\n      p.prog[c] = Math.min(1, p.prog[c] + dt / p.dur[c]);\n      if (p.prog[c] >= 1) p.kind[c] = 0;\n    } else if (p.pending[c] >= 0 && p.clock >= p.pending[c]) {\n      p.pending[c] = -1;\n      start(p, c, MORPH, 0.9);\n    }\n  }\n\n  p.timer -= dt;\n  if (p.timer \u003c= 0) {\n    p.timer += every;\n    if (p.timer \u003c 0) p.timer = every;\n    // Of four cells drawn at random, the one left alone longest changes.\n    let best = -1;\n    for (let tries = 0; tries \u003c 4; tries++) {\n      const c = Math.floor(Math.random() * p.count);\n      if (p.prog[c] \u003c 1 || p.pending[c] >= 0) continue;\n      if (best \u003c 0 || p.last[c] \u003c p.last[best]) best = c;\n    }\n    if (best >= 0) {\n      const r = Math.random();\n      start(p, best, r \u003c 0.4 ? TURN : r \u003c 0.8 ? MORPH : RECOLOUR, dur);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const S = p.S;\n  const half = S / 2;\n  const pal = p.pal;\n  const lineW = (S >= 20 ? 2 : 1) / half;\n\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n\n  for (let c = 0; c \u003c p.count; c++) {\n    const i = c % p.cols;\n    const j = (c - i) / p.cols;\n    const x0 = p.ox + i * S;\n    const y0 = p.oy + j * S;\n    const kind = p.kind[c];\n    const e = smooth(p.prog[c]);\n    const outline = p.lineR[c] \u003c p.line;\n\n    let shape = p.toShape[c];\n    let ang = angleOf(shape, p.toRot[c]);\n    let scale = 1;\n    let fg = p.toFg[c];\n    let bg = p.toBg[c];\n    let fg2 = fg;\n    let bg2 = bg;\n    let front = 2;\n    if (kind === TURN) {\n      const a0 = angleOf(shape, p.fromRot[c]);\n      let d = ang - a0;\n      // The short way round.\n      if (d > Math.PI) d -= Math.PI * 2;\n      if (d \u003c -Math.PI) d += Math.PI * 2;\n      ang = a0 + d * e;\n    } else if (kind === MORPH) {\n      const pr = p.prog[c];\n      if (pr \u003c 0.5) {\n        shape = p.fromShape[c];\n        ang = angleOf(shape, p.fromRot[c]);\n        fg = p.fromFg[c];\n        scale = 1 - smooth(pr * 2);\n      } else scale = smooth(pr * 2 - 1);\n    } else if (kind === RECOLOUR) {\n      fg = p.fromFg[c];\n      bg = p.fromBg[c];\n      front = -1.45 + e * 2.9;\n    }\n    const cs = Math.cos(ang);\n    const sn = Math.sin(ang);\n    const wipe = p.wipe[c];\n\n    for (let ly = 0; ly \u003c S; ly++) {\n      const y = y0 + ly;\n      const v = (ly + 0.5 - half) / half;\n      for (let lx = 0; lx \u003c S; lx++) {\n        const x = x0 + lx;\n        const u = (lx + 0.5 - half) / half;\n        let f = fg;\n        let b = bg;\n        if (kind === RECOLOUR) {\n          // A hard front sweeps the new colours in: from a side, or as an iris.\n          const w = wipe === 0 ? u : wipe === 1 ? -u : wipe === 2 ? v : wipe === 3 ? -v : Math.sqrt(u * u + v * v) * 1.42 - 1;\n          if (w \u003c front) {\n            f = fg2;\n            b = bg2;\n          }\n        }\n        const d = Math.max(placed(shape, u, v, cs, sn, scale), Math.max(Math.abs(u), Math.abs(v)) - 1);\n        let col = d \u003c 0 && (!outline || d > -lineW) ? f : 0;\n        // Drawn as a line, the ground is a frame round the cell.\n        if (!col && b) col = !outline || Math.max(Math.abs(u), Math.abs(v)) > 1 - lineW ? b : 0;\n        if (col) display.setPixel(x, y, pal[col * 3], pal[col * 3 + 1], pal[col * 3 + 2]);\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Pace=0.25..6, Grid=4..12, Line=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the red, yellow and blue together around the wheel; the cream stays cream."},{"name":"Pace","min":0.25,"max":6,"about":"How often a cell changes and how long it takes; low is one slow turn after another, high has three cells moving at once."},{"name":"Grid","min":4,"max":12,"about":"Cells down the long side, from four big squares to twelve small ones."},{"name":"Line","min":0,"max":1,"about":"How many cells are drawn as a line instead of a solid shape; at the top the sheet is a line drawing."}],"start":[0,2,4,0.06],"measures":{"motion":0.0436,"detail":0.04,"edges":0.8787,"complexity":0.0601,"coverage":0.5555,"colour":0.5847,"drift":0.0591},"knobResponse":[0.3486,0.141,0.3458,0.2172]},{"slug":"big-type","title":"Big Type","family":"type","round":1,"note":"화면을 꽉 채운 낱말 하나가 자석을 댄 옛 텔레비전 화면처럼 휘어요.","idea":"One word as big as the screen will hold, on a set that cannot keep it still, the way a magnet bends the picture on an old television.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Big Type\n// Family:  type\n// Idea:    One word as big as the screen will hold, on a set that cannot keep it still, the way a magnet bends the picture on an old television.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..5, Word=0..6, Warp=0..1\n//\n// Knob 1: Hue. Turns the outline colour; the fill and the shadow follow it.\n// Knob 2: Speed. How fast the wave runs down the word and the bright scan bar rolls.\n// Knob 3: Word. Picks the word: TV, 1963, LIGHT, HELLO, FLOW, PLAY, KNOB.\n// Knob 4: Warp. How hard the picture bends, from a slow sway to a set losing its hold.\n\nconst W = 64;\nconst H = 128;\n\n// The font is drawn from its Scale2x copy, ten by fourteen cells a glyph.\nconst ZOOM = 2;\n\nconst WORDS = [\"TV\", \"1963\", \"LIGHT\", \"HELLO\", \"FLOW\", \"PLAY\", \"KNOB\"];\n// The panel stands up, so a word is set in lines: four letters as two over\n// two like a poster, five down the panel like a hotel sign.\nconst LINES = [[\"T\", \"V\"], [\"19\", \"63\"], [\"L\", \"I\", \"G\", \"H\", \"T\"], [\"H\", \"E\", \"L\", \"L\", \"O\"], [\"FL\", \"OW\"], [\"PL\", \"AY\"], [\"KN\", \"OB\"]];\nconst MAX_LINES = 5;\n\n// 5x7 glyphs, seven rows each from the top, 16 is the left column.\nconst LETTERS = \"TV1963LIGHEOFWPAYKNB\";\nconst FONT = [\n  31, 4, 4, 4, 4, 4, 4,\n  17, 17, 17, 17, 17, 10, 4,\n  4, 12, 4, 4, 4, 4, 14,\n  14, 17, 17, 15, 1, 2, 12,\n  6, 8, 16, 30, 17, 17, 14,\n  31, 2, 4, 2, 1, 17, 14,\n  16, 16, 16, 16, 16, 16, 31,\n  14, 4, 4, 4, 4, 4, 14,\n  14, 17, 16, 23, 17, 17, 15,\n  17, 17, 17, 31, 17, 17, 17,\n  31, 16, 16, 30, 16, 16, 31,\n  14, 17, 17, 17, 17, 17, 14,\n  31, 16, 16, 30, 16, 16, 16,\n  17, 17, 17, 21, 21, 21, 10,\n  30, 17, 17, 30, 16, 16, 16,\n  14, 17, 17, 31, 17, 17, 17,\n  17, 17, 10, 4, 4, 4, 4,\n  17, 18, 20, 24, 20, 18, 17,\n  17, 17, 25, 21, 19, 17, 17,\n  30, 17, 17, 30, 17, 17, 30,\n];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash(n) {\n  let x = (Math.imul(n | 0, 374761393) + 668265263) >>> 0;\n  x = Math.imul(x ^ (x >>> 13), 1274126177) >>> 0;\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296;\n}\n\n// Lays a word out: its lines, the glyphs of each, and one scale for all of\n// them, as tall as the lines allow and no wider than 1.8 times that. The\n// scale need not be whole: five lines get 3.2 LEDs a font row.\nfunction setWord(p, slot, index) {\n  const lines = LINES[index];\n  const L = p.layout[slot];\n  L.lines = lines.length;\n  let wide = 0;\n  let k = 0;\n  for (let j = 0; j \u003c L.lines; j++) {\n    const text = lines[j];\n    L.first[j] = k;\n    L.cols[j] = text.length * 6 - 1;\n    wide = Math.max(wide, L.cols[j]);\n    for (let i = 0; i \u003c text.length; i++) L.bits[k++] = p.big[LETTERS.indexOf(text[i])];\n  }\n  L.gap = L.lines > 2 ? 2 : 8;\n  L.sy = Math.min(8, (H - 8 - (L.lines - 1) * L.gap) / (7 * L.lines));\n  L.sx = Math.min(11, Math.floor((W - 6) / wide), L.sy * 1.8);\n  L.pitch = Math.ceil(7 * L.sy) + L.gap;\n  L.y0 = Math.floor((H - L.lines * L.pitch + L.gap) / 2);\n  for (let j = 0; j \u003c L.lines; j++) L.x0[j] = Math.floor((W - L.cols[j] * L.sx) / 2);\n}\n\n// Scale2x (EPX) on a bitmap: square corners stay, a diagonal step gets joined.\nfunction epx(src, w, h) {\n  const out = new Uint8Array(w * h * 4);\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= w || y >= h ? 0 : src[y * w + x]);\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const P = at(x, y);\n      const A = at(x, y - 1);\n      const B = at(x + 1, y);\n      const C = at(x - 1, y);\n      const D = at(x, y + 1);\n      const o = y * 2 * w * 2 + x * 2;\n      out[o] = C === A && C !== D && A !== B ? A : P;\n      out[o + 1] = A === B && A !== C && B !== D ? B : P;\n      out[o + w * 2] = D === C && D !== B && C !== A ? C : P;\n      out[o + w * 2 + 1] = B === D && B !== A && D !== C ? D : P;\n    }\n  }\n  return out;\n}\n\n// u is across the panel, v down from the top of the word.\nfunction inside(L, u, v) {\n  if (v \u003c 0) return 0;\n  const j = Math.floor(v / L.pitch);\n  if (j >= L.lines) return 0;\n  v -= j * L.pitch;\n  u -= L.x0[j];\n  if (u \u003c 0) return 0;\n  const cu = Math.floor((u * ZOOM) / L.sx);\n  const cv = Math.floor((v * ZOOM) / L.sy);\n  if (cu >= L.cols[j] * ZOOM || cv >= 7 * ZOOM) return 0;\n  const letter = Math.floor(cu / (6 * ZOOM));\n  const b = cu - letter * 6 * ZOOM;\n  if (b >= 5 * ZOOM) return 0;\n  return L.bits[L.first[j] + letter][cv * 5 * ZOOM + b];\n}\n\nfunction newLayout() {\n  return {\n    lines: 0,\n    gap: 0,\n    pitch: 1,\n    sx: 1,\n    sy: 1,\n    y0: 0,\n    first: new Int8Array(MAX_LINES),\n    cols: new Int16Array(MAX_LINES),\n    x0: new Int16Array(MAX_LINES),\n    bits: [],\n  };\n}\n\nexport function setup(params) {\n  params.phase = 0;\n  params.roll = 1;\n  params.word = -1;\n  params.layout = [newLayout(), newLayout()];\n  params.big = [];\n  for (let g = 0; g \u003c LETTERS.length; g++) {\n    const bits = new Uint8Array(35);\n    for (let r = 0; r \u003c 7; r++) for (let c = 0; c \u003c 5; c++) bits[r * 5 + c] = (FONT[g * 7 + r] >> (4 - c)) & 1;\n    params.big.push(epx(bits, 5, 7));\n  }\n  params.mask = new Uint8Array(W * H);\n  params.rowShift = new Float32Array(H);\n  params.colShift = new Float32Array(W);\n  params.line = [0, 0, 0];\n  params.fill = [0, 0, 0];\n  params.shade = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  p.hue = k[0];\n  p.speed = k[1];\n  p.warp = k[3];\n  const index = Math.max(0, Math.min(WORDS.length - 1, Math.round(k[2])));\n  if (p.word \u003c 0) {\n    setWord(p, 0, index);\n    p.word = index;\n  } else if (index !== p.word) {\n    // The old word rolls up out of frame and the new one follows it in.\n    p.layout.reverse();\n    setWord(p, 0, index);\n    p.word = index;\n    p.roll = 0;\n  }\n  p.roll = Math.min(1, p.roll + dt * 3);\n  p.phase += dt * p.speed;\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const warp = p.warp;\n  const ph = p.phase;\n  const amp = 1.5 + warp * 6;\n  // About one wave to a big letter, as on the wide panel.\n  const lambda = 64 - warp * 16;\n  const shear = warp * 0.09 * Math.sin(ph * 0.45);\n  // Above half warp a band of rows slips sideways now and then, like lost sync.\n  const slot = Math.floor(ph * 3);\n  const tearY = hash(slot) * H;\n  const tearH = 3 + hash(slot + 7) * 12;\n  const tear = warp > 0.5 && hash(slot + 3) \u003c 0.6 ? (hash(slot + 11) - 0.5) * 44 * (warp - 0.5) : 0;\n  for (let y = 0; y \u003c H; y++) {\n    let s = amp * Math.sin((y / lambda) * 6.2832 - ph * 2.4) + shear * (y - H / 2);\n    if (tear !== 0 && y >= tearY && y \u003c tearY + tearH) s += tear;\n    p.rowShift[y] = s;\n  }\n  for (let x = 0; x \u003c W; x++) p.colShift[x] = warp * 3 * Math.sin((x / 56) * 6.2832 + ph * 1.3);\n\n  const e = p.roll * p.roll * (3 - 2 * p.roll);\n  const now = p.layout[0];\n  const old = p.layout[1];\n  const rolling = p.roll \u003c 1;\n  const mask = p.mask;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const u = x - p.rowShift[y];\n      const v = y - p.colShift[x];\n      let m = inside(now, u, v - now.y0 - (rolling ? (1 - e) * H : 0));\n      if (rolling && !m) m = inside(old, u, v - old.y0 + e * H);\n      mask[y * W + x] = m;\n    }\n  }\n\n  hsv(p.hue, 0.75, 1, p.line);\n  hsv(p.hue + 0.07, 0.95, 1, p.fill);\n  hsv(p.hue + 0.55, 0.9, 0.32, p.shade);\n  const line = p.line;\n  const fill = p.fill;\n  const shade = p.shade;\n  const bar = ((ph * 30) % (H + 24)) - 12;\n  const sdx = 2;\n  const sdy = 2;\n  for (let y = 0; y \u003c H; y++) {\n    const glow = Math.max(0, 1 - Math.abs(y - bar) / 7);\n    const lit = (y & 1) === 0 ? 0.3 + glow * 0.6 : glow * 0.35;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (mask[i]) {\n        const edge =\n          x === 0 || y === 0 || x === W - 1 || y === H - 1 ||\n          !mask[i - 1] || !mask[i + 1] || !mask[i - W] || !mask[i + W];\n        if (edge) display.setPixel(x, y, line[0], line[1], line[2]);\n        else display.setPixel(x, y, fill[0] * lit, fill[1] * lit, fill[2] * lit);\n      } else if (x >= sdx && y >= sdy && mask[i - sdy * W - sdx]) {\n        display.setPixel(x, y, shade[0], shade[1], shade[2]);\n      } else {\n        display.setPixel(x, y, 0, 0, 0);\n      }\n    }\n  }\n}\n","layer":{"id":"layer-big-type","type":"code","name":"big-type","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Big Type\n// Family:  type\n// Idea:    One word as big as the screen will hold, on a set that cannot keep it still, the way a magnet bends the picture on an old television.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..5, Word=0..6, Warp=0..1\n//\n// Knob 1: Hue. Turns the outline colour; the fill and the shadow follow it.\n// Knob 2: Speed. How fast the wave runs down the word and the bright scan bar rolls.\n// Knob 3: Word. Picks the word: TV, 1963, LIGHT, HELLO, FLOW, PLAY, KNOB.\n// Knob 4: Warp. How hard the picture bends, from a slow sway to a set losing its hold.\n\nconst W = 64;\nconst H = 128;\n\n// The font is drawn from its Scale2x copy, ten by fourteen cells a glyph.\nconst ZOOM = 2;\n\nconst WORDS = [\"TV\", \"1963\", \"LIGHT\", \"HELLO\", \"FLOW\", \"PLAY\", \"KNOB\"];\n// The panel stands up, so a word is set in lines: four letters as two over\n// two like a poster, five down the panel like a hotel sign.\nconst LINES = [[\"T\", \"V\"], [\"19\", \"63\"], [\"L\", \"I\", \"G\", \"H\", \"T\"], [\"H\", \"E\", \"L\", \"L\", \"O\"], [\"FL\", \"OW\"], [\"PL\", \"AY\"], [\"KN\", \"OB\"]];\nconst MAX_LINES = 5;\n\n// 5x7 glyphs, seven rows each from the top, 16 is the left column.\nconst LETTERS = \"TV1963LIGHEOFWPAYKNB\";\nconst FONT = [\n  31, 4, 4, 4, 4, 4, 4,\n  17, 17, 17, 17, 17, 10, 4,\n  4, 12, 4, 4, 4, 4, 14,\n  14, 17, 17, 15, 1, 2, 12,\n  6, 8, 16, 30, 17, 17, 14,\n  31, 2, 4, 2, 1, 17, 14,\n  16, 16, 16, 16, 16, 16, 31,\n  14, 4, 4, 4, 4, 4, 14,\n  14, 17, 16, 23, 17, 17, 15,\n  17, 17, 17, 31, 17, 17, 17,\n  31, 16, 16, 30, 16, 16, 31,\n  14, 17, 17, 17, 17, 17, 14,\n  31, 16, 16, 30, 16, 16, 16,\n  17, 17, 17, 21, 21, 21, 10,\n  30, 17, 17, 30, 16, 16, 16,\n  14, 17, 17, 31, 17, 17, 17,\n  17, 17, 10, 4, 4, 4, 4,\n  17, 18, 20, 24, 20, 18, 17,\n  17, 17, 25, 21, 19, 17, 17,\n  30, 17, 17, 30, 17, 17, 30,\n];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash(n) {\n  let x = (Math.imul(n | 0, 374761393) + 668265263) >>> 0;\n  x = Math.imul(x ^ (x >>> 13), 1274126177) >>> 0;\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296;\n}\n\n// Lays a word out: its lines, the glyphs of each, and one scale for all of\n// them, as tall as the lines allow and no wider than 1.8 times that. The\n// scale need not be whole: five lines get 3.2 LEDs a font row.\nfunction setWord(p, slot, index) {\n  const lines = LINES[index];\n  const L = p.layout[slot];\n  L.lines = lines.length;\n  let wide = 0;\n  let k = 0;\n  for (let j = 0; j \u003c L.lines; j++) {\n    const text = lines[j];\n    L.first[j] = k;\n    L.cols[j] = text.length * 6 - 1;\n    wide = Math.max(wide, L.cols[j]);\n    for (let i = 0; i \u003c text.length; i++) L.bits[k++] = p.big[LETTERS.indexOf(text[i])];\n  }\n  L.gap = L.lines > 2 ? 2 : 8;\n  L.sy = Math.min(8, (H - 8 - (L.lines - 1) * L.gap) / (7 * L.lines));\n  L.sx = Math.min(11, Math.floor((W - 6) / wide), L.sy * 1.8);\n  L.pitch = Math.ceil(7 * L.sy) + L.gap;\n  L.y0 = Math.floor((H - L.lines * L.pitch + L.gap) / 2);\n  for (let j = 0; j \u003c L.lines; j++) L.x0[j] = Math.floor((W - L.cols[j] * L.sx) / 2);\n}\n\n// Scale2x (EPX) on a bitmap: square corners stay, a diagonal step gets joined.\nfunction epx(src, w, h) {\n  const out = new Uint8Array(w * h * 4);\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= w || y >= h ? 0 : src[y * w + x]);\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const P = at(x, y);\n      const A = at(x, y - 1);\n      const B = at(x + 1, y);\n      const C = at(x - 1, y);\n      const D = at(x, y + 1);\n      const o = y * 2 * w * 2 + x * 2;\n      out[o] = C === A && C !== D && A !== B ? A : P;\n      out[o + 1] = A === B && A !== C && B !== D ? B : P;\n      out[o + w * 2] = D === C && D !== B && C !== A ? C : P;\n      out[o + w * 2 + 1] = B === D && B !== A && D !== C ? D : P;\n    }\n  }\n  return out;\n}\n\n// u is across the panel, v down from the top of the word.\nfunction inside(L, u, v) {\n  if (v \u003c 0) return 0;\n  const j = Math.floor(v / L.pitch);\n  if (j >= L.lines) return 0;\n  v -= j * L.pitch;\n  u -= L.x0[j];\n  if (u \u003c 0) return 0;\n  const cu = Math.floor((u * ZOOM) / L.sx);\n  const cv = Math.floor((v * ZOOM) / L.sy);\n  if (cu >= L.cols[j] * ZOOM || cv >= 7 * ZOOM) return 0;\n  const letter = Math.floor(cu / (6 * ZOOM));\n  const b = cu - letter * 6 * ZOOM;\n  if (b >= 5 * ZOOM) return 0;\n  return L.bits[L.first[j] + letter][cv * 5 * ZOOM + b];\n}\n\nfunction newLayout() {\n  return {\n    lines: 0,\n    gap: 0,\n    pitch: 1,\n    sx: 1,\n    sy: 1,\n    y0: 0,\n    first: new Int8Array(MAX_LINES),\n    cols: new Int16Array(MAX_LINES),\n    x0: new Int16Array(MAX_LINES),\n    bits: [],\n  };\n}\n\nexport function setup(params) {\n  params.phase = 0;\n  params.roll = 1;\n  params.word = -1;\n  params.layout = [newLayout(), newLayout()];\n  params.big = [];\n  for (let g = 0; g \u003c LETTERS.length; g++) {\n    const bits = new Uint8Array(35);\n    for (let r = 0; r \u003c 7; r++) for (let c = 0; c \u003c 5; c++) bits[r * 5 + c] = (FONT[g * 7 + r] >> (4 - c)) & 1;\n    params.big.push(epx(bits, 5, 7));\n  }\n  params.mask = new Uint8Array(W * H);\n  params.rowShift = new Float32Array(H);\n  params.colShift = new Float32Array(W);\n  params.line = [0, 0, 0];\n  params.fill = [0, 0, 0];\n  params.shade = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  p.hue = k[0];\n  p.speed = k[1];\n  p.warp = k[3];\n  const index = Math.max(0, Math.min(WORDS.length - 1, Math.round(k[2])));\n  if (p.word \u003c 0) {\n    setWord(p, 0, index);\n    p.word = index;\n  } else if (index !== p.word) {\n    // The old word rolls up out of frame and the new one follows it in.\n    p.layout.reverse();\n    setWord(p, 0, index);\n    p.word = index;\n    p.roll = 0;\n  }\n  p.roll = Math.min(1, p.roll + dt * 3);\n  p.phase += dt * p.speed;\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const warp = p.warp;\n  const ph = p.phase;\n  const amp = 1.5 + warp * 6;\n  // About one wave to a big letter, as on the wide panel.\n  const lambda = 64 - warp * 16;\n  const shear = warp * 0.09 * Math.sin(ph * 0.45);\n  // Above half warp a band of rows slips sideways now and then, like lost sync.\n  const slot = Math.floor(ph * 3);\n  const tearY = hash(slot) * H;\n  const tearH = 3 + hash(slot + 7) * 12;\n  const tear = warp > 0.5 && hash(slot + 3) \u003c 0.6 ? (hash(slot + 11) - 0.5) * 44 * (warp - 0.5) : 0;\n  for (let y = 0; y \u003c H; y++) {\n    let s = amp * Math.sin((y / lambda) * 6.2832 - ph * 2.4) + shear * (y - H / 2);\n    if (tear !== 0 && y >= tearY && y \u003c tearY + tearH) s += tear;\n    p.rowShift[y] = s;\n  }\n  for (let x = 0; x \u003c W; x++) p.colShift[x] = warp * 3 * Math.sin((x / 56) * 6.2832 + ph * 1.3);\n\n  const e = p.roll * p.roll * (3 - 2 * p.roll);\n  const now = p.layout[0];\n  const old = p.layout[1];\n  const rolling = p.roll \u003c 1;\n  const mask = p.mask;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const u = x - p.rowShift[y];\n      const v = y - p.colShift[x];\n      let m = inside(now, u, v - now.y0 - (rolling ? (1 - e) * H : 0));\n      if (rolling && !m) m = inside(old, u, v - old.y0 + e * H);\n      mask[y * W + x] = m;\n    }\n  }\n\n  hsv(p.hue, 0.75, 1, p.line);\n  hsv(p.hue + 0.07, 0.95, 1, p.fill);\n  hsv(p.hue + 0.55, 0.9, 0.32, p.shade);\n  const line = p.line;\n  const fill = p.fill;\n  const shade = p.shade;\n  const bar = ((ph * 30) % (H + 24)) - 12;\n  const sdx = 2;\n  const sdy = 2;\n  for (let y = 0; y \u003c H; y++) {\n    const glow = Math.max(0, 1 - Math.abs(y - bar) / 7);\n    const lit = (y & 1) === 0 ? 0.3 + glow * 0.6 : glow * 0.35;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (mask[i]) {\n        const edge =\n          x === 0 || y === 0 || x === W - 1 || y === H - 1 ||\n          !mask[i - 1] || !mask[i + 1] || !mask[i - W] || !mask[i + W];\n        if (edge) display.setPixel(x, y, line[0], line[1], line[2]);\n        else display.setPixel(x, y, fill[0] * lit, fill[1] * lit, fill[2] * lit);\n      } else if (x >= sdx && y >= sdy && mask[i - sdy * W - sdx]) {\n        display.setPixel(x, y, shade[0], shade[1], shade[2]);\n      } else {\n        display.setPixel(x, y, 0, 0, 0);\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..5, Word=0..6, Warp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the outline colour; the fill and the shadow follow it."},{"name":"Speed","min":0.2,"max":5,"about":"How fast the wave runs down the word and the bright scan bar rolls."},{"name":"Word","min":0,"max":6,"about":"Picks the word: TV, 1963, LIGHT, HELLO, FLOW, PLAY, KNOB."},{"name":"Warp","min":0,"max":1,"about":"How hard the picture bends, from a slow sway to a set losing its hold."}],"start":[0,2,0,0.06],"measures":{"motion":0.4681,"detail":0.0954,"edges":0.9989,"complexity":0.0628,"coverage":0.2402,"colour":0.253,"drift":0.0745},"knobResponse":[0.0865,0.0522,0.1361,0.0808]},{"slug":"bismuth","title":"Bismuth","family":"mineral","round":18,"note":"녹은 비스무트 웅덩이에서 계단 진 네모 호퍼 결정이 가지를 치며 패널 꼭대기까지 자라요. 테라스마다 산화막이 은색에서 금색, 자홍, 파랑, 청록을 지나 두 번째 금색과 분홍으로 바뀌어서 색이 그 단이 생긴 때를 말해요. K1 을 누르면 웅덩이가 패널을 타고 올라 결정을 녹였다가 빠지고, 결정이 다시 자라요.","idea":"Stepped square hopper crystals of bismuth grow up out of a glowing melt pool to the top of the panel, each terrace turning through the oxide film's silver, gold, purple, blue and green as it ages, until the melt rises and takes them back.","buttons":"K1 tap heats the pool now: the melt rises up the panel, takes the cluster back and drains, and growth starts again.","code":"// ===== Patternflow pattern =====\n// Title:   Bismuth\n// Family:  mineral\n// Idea:    Stepped square hopper crystals of bismuth grow up out of a glowing melt pool to the top of the panel, each terrace turning through the oxide film's silver, gold, purple, blue and green as it ages, until the melt rises and takes them back.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after lab-grown bismuth hopper crystals and the interference colours of their oxide skin\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Steps=3..8, Heat=0..1\n//\n// Knob 1: Tint. Moves every terrace along the oxide sequence: at 0 fresh growth is silver and gold, at 0.5 it starts out purple and blue, at 1 in the second order's gold and pink.\n// Knob 2: Speed. How fast the crystals grow and their oxide thickens: at 2 the cluster climbs the 113 rows to the top in about 40 s, at 0.2 it barely moves.\n// Knob 3: Steps. How wide each terrace of a hopper is, from fine 3 LED steps to deep 8 LED steps, so how many rings each square shows.\n// Knob 4: Heat. How hot the pool burns, from dull cherry red to yellow; a hotter pool lights the lower crystals, thickens their oxide faster and rises sooner to take the cluster back.\n// Buttons: K1 tap heats the pool now: the melt rises up the panel, takes the cluster back and drains, and growth starts again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The pool's surface row when it is at rest.\nconst POOL = 116;\n// Growth phases.\nconst GROW = 0;\nconst HOLD = 1;\nconst MELT = 2;\nconst DRAIN = 3;\n// Oxide film colours by thickness: bare silver, then the first order's straw,\n// gold, bronze, magenta, purple and blue, the second order's sky, teal, gold\n// and pink. Old metal slows toward the second order's teal, and Tint wraps\n// what goes past it back round to gold.\nconst FILM = [\n  [0.0, 200, 204, 214],\n  [0.08, 218, 208, 168],\n  [0.17, 240, 190, 78],\n  [0.26, 226, 130, 64],\n  [0.34, 206, 64, 126],\n  [0.42, 150, 54, 200],\n  [0.5, 70, 84, 236],\n  [0.59, 50, 160, 230],\n  [0.68, 44, 210, 170],\n  [0.78, 150, 216, 80],\n  [0.86, 238, 198, 70],\n  [0.96, 240, 108, 150],\n  [1.06, 168, 92, 210],\n  [1.18, 70, 172, 196],\n  [1.25, 96, 190, 176],\n];\nconst LUT = 600;\n// The longest the opening runs ahead, in seconds, waiting for the cluster to\n// reach row 20.\nconst PRE = 60;\nconst TH_MAX = 1.25;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction buildLut(P) {\n  P.lut = new Float32Array(LUT * 3);\n  for (let i = 0; i \u003c LUT; i++) {\n    const th = (i / (LUT - 1)) * TH_MAX;\n    let j = 0;\n    while (j \u003c FILM.length - 2 && FILM[j + 1][0] \u003c th) j++;\n    const a = FILM[j];\n    const b = FILM[j + 1];\n    const f = clamp((th - a[0]) / (b[0] - a[0]), 0, 1);\n    const s = f * f * (3 - 2 * f);\n    for (let c = 0; c \u003c 3; c++) P.lut[i * 3 + c] = a[c + 1] + (b[c + 1] - a[c + 1]) * s;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.owner = new Int16Array(N);\n  P.dist = new Uint8Array(N);\n  P.phase = new Uint8Array(N);\n  P.buf = new Float32Array(N * 3);\n  // Per LED: when its terrace started, and how far across the terrace it sits.\n  P.tStart = new Float32Array(N);\n  P.frac = new Float32Array(N);\n  P.wAt = 3;\n  buildLut(P);\n  // Oxide thickness grows as age to the power 0.82, here in tenths of a second.\n  P.ageLut = new Float32Array(4001);\n  for (let i = 0; i \u003c= 4000; i++) P.ageLut[i] = Math.pow(i / 10, 0.82);\n  P.glint = new Float32Array(513);\n  for (let i = 0; i \u003c= 512; i++) P.glint[i] = Math.exp(-(((i - 256) / 4 / 16) ** 2));\n  Object.assign(P, { T: 0, t: 0, tint: 0, w: 3, heat: 0.06, started: false });\n  restart(P);\n}\n\n// A clean pool: no crystals, and three seeds on its surface spread across the width.\nfunction restart(P) {\n  P.owner.fill(0);\n  P.crystals = [];\n  P.mode = GROW;\n  P.modeT = 0;\n  P.melt = POOL;\n  P.fill = 0;\n  P.quiet = 0;\n  for (let i = 0; i \u003c 3; i++) addCrystal(P, Math.round(10 + 22 * i + (Math.random() - 0.5) * 6), POOL - 3, null, false);\n}\n\nfunction addCrystal(P, x, y, parent, small) {\n  // A big crystal keeps growing round its neighbours where a small one stops.\n  const big = !small && (!parent || Math.random() \u003c 0.3);\n  const c = {\n    id: P.crystals.length + 1,\n    x,\n    y,\n    parent: parent ? parent.id : 0,\n    gen: parent ? parent.gen + 1 : 0,\n    tb: P.T,\n    // Half-size r grows as rmax * (1 - exp(-age / tau)): fast at first, then\n    // slower as the melt round it runs out.\n    rmax: small ? 3 + Math.floor(Math.random() * 3) : parent ? (big ? 10 + Math.floor(Math.random() * 6) : 5 + Math.floor(Math.random() * 6)) : 13 + Math.floor(Math.random() * 5),\n    tau: small ? 4 : parent ? 6 + Math.random() * 3 : 14,\n    r: 0,\n    // Branch slots: 0 and 1 the upper corners, 2 the top, 3 and 4 the sides.\n    slots: small ? [] : shuffle(parent && parent.gen > 1 ? [0, 1] : parent ? [0, 1, Math.random() \u003c 0.5 ? 3 : 4] : [0, 1, 2, 3, 4]),\n    // Each crystal's own oxide rate: the melt is not the same heat everywhere.\n    ox: 0.8 + 0.45 * Math.random(),\n    nextKid: parent ? 2 : 3,\n    // The side the square spiral starts its turn on, and which way it turns.\n    spin: Math.floor(Math.random() * 4),\n    hand: Math.random() \u003c 0.5 ? 1 : 3,\n    big,\n    done: false,\n  };\n  P.crystals.push(c);\n  claimRing(P, c, 0, true);\n  return c;\n}\n\nfunction shuffle(a) {\n  for (let i = a.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    [a[i], a[j]] = [a[j], a[i]];\n  }\n  return a;\n}\n\n// The quarter turn of a square spiral an LED of a crystal sits on.\nfunction sideOf(c, dx, dy) {\n  const s = Math.abs(dx) >= Math.abs(dy) ? (dx > 0 ? 1 : 3) : dy > 0 ? 2 : 0;\n  return ((s * c.hand + c.spin) % 4) * 64;\n}\n\nconst family = (P, c, q) => q === c.id || q === c.parent || P.crystals[q - 1].parent === c.id;\n\n// Looks at ring r of a crystal, a square. With claim set, takes the LEDs no crystal has reached;\n// without it, returns the share of the ring's LEDs inside the panel that\n// another crystal, not a parent or a branch, already holds.\nfunction claimRing(P, c, r, claim) {\n  let taken = 0;\n  let total = 0;\n  const own = P.owner;\n  const take = (dx, dy) => {\n    const x = c.x + dx;\n    const y = c.y + dy;\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    if (y >= P.melt - 0.5) return;\n    const q = own[p];\n    if (claim) {\n      if (q) return;\n      own[p] = c.id;\n      P.dist[p] = r;\n      P.phase[p] = sideOf(c, dx, dy);\n      terrace(P, c, p);\n      return;\n    }\n    if (q && family(P, c, q)) return;\n    total++;\n    if (q) taken++;\n  };\n  if (r === 0) take(0, 0);\n  else {\n    for (let i = -r; i \u003c= r; i++) {\n      take(i, -r);\n      take(i, r);\n    }\n    for (let i = -r + 1; i \u003c r; i++) {\n      take(-r, i);\n      take(r, i);\n    }\n  }\n  return total ? taken / total : 1;\n}\n\n// Which terrace of the square spiral an LED is on at the current step width,\n// and when the growing edge passed that terrace's inner border.\nfunction terrace(P, c, p) {\n  const w = P.wAt;\n  const ph = P.phase[p] / 256;\n  const u = P.dist[p] / w + ph;\n  const k = Math.floor(u);\n  P.frac[p] = u - k;\n  const start = Math.min(0.97, Math.max(0, (k - ph) * w) / c.rmax);\n  P.tStart[p] = c.tb - c.tau * Math.log(1 - start);\n}\n\nfunction isFree(P, x, y, m) {\n  if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= P.melt - 3) return false;\n  const o = P.owner;\n  for (let j = -m; j \u003c= m; j++)\n    for (let i = -m; i \u003c= m; i++) {\n      const xx = x + i;\n      const yy = y + j;\n      if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H && o[yy * W + xx]) return false;\n    }\n  return true;\n}\n\n// A branch starts just past an upper corner of its parent, or over its top.\nfunction branch(P, c) {\n  const slot = c.slots.pop();\n  const R = c.r + 2 + Math.floor(Math.random() * 3);\n  const sx = slot === 0 || slot === 3 ? -1 : slot === 1 || slot === 4 ? 1 : 0;\n  const x = Math.round(c.x + sx * R + (sx ? 0 : (Math.random() - 0.5) * 6));\n  const y = c.y - (slot > 2 ? Math.floor(R / 3) : R);\n  if (isFree(P, x, y, 1)) addCrystal(P, x, y, c, false);\n}\n\nfunction grow(P, h) {\n  let grew = false;\n  for (const c of P.crystals) {\n    if (c.done) continue;\n    const target = Math.floor(c.rmax * (1 - Math.exp(-(P.T - c.tb) / c.tau)) + 0.5);\n    while (c.r \u003c target && !c.done) {\n      // Stop a ring short of any crystal that is not kin, so a dark gap stays.\n      const near = claimRing(P, c, c.r + 1, false);\n      if (c.big ? near > 0.4 : near > 0.15 || claimRing(P, c, c.r + 2, false) > 0.3) {\n        c.done = true;\n        break;\n      }\n      c.r++;\n      claimRing(P, c, c.r, true);\n      grew = true;\n      if (c.r >= c.rmax) c.done = true;\n      if (c.slots.length && c.r >= c.nextKid) {\n        c.nextKid += 3 + Math.floor(Math.random() * 3);\n        branch(P, c);\n      }\n    }\n  }\n  // Small crystals start on the faces of old ones wherever there is room.\n  const tries = Math.floor(h * 4 + Math.random());\n  for (let i = 0; i \u003c tries; i++) {\n    const x = 1 + Math.floor(Math.random() * (W - 2));\n    const y = 1 + Math.floor(Math.random() * (P.melt - 10));\n    if (!isFree(P, x, y, 2)) continue;\n    const o = P.owner;\n    const p = y * W + x;\n    if ((x > 2 && o[p - 3]) || (x \u003c W - 3 && o[p + 3]) || (y > 3 && o[p - 3 * W]) || o[p + 3 * W]) {\n      addCrystal(P, x, y, null, true);\n      grew = true;\n    }\n  }\n  return grew;\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.modeT += h;\n  const heat = P.heat;\n  if (P.mode === GROW || P.mode === HOLD) {\n    const grew = grow(P, h);\n    P.quiet = grew ? 0 : P.quiet + h;\n    // A cluster that has stopped short of the top sends a new branch up from\n    // its highest crystal.\n    if (P.mode === GROW && P.quiet > 1.5 && top(P) > 6) {\n      let hi = null;\n      for (const c of P.crystals) if (c.r >= 2 && (!hi || c.y - c.r \u003c hi.y - hi.r)) hi = c;\n      if (hi) {\n        hi.slots = [0, 1, 2];\n        while (hi.slots.length) branch(P, hi);\n      }\n      P.quiet = 0;\n    }\n    if (P.mode === GROW && ((P.quiet > 4 && top(P) \u003c= 6) || P.modeT > 60)) {\n      P.mode = HOLD;\n      P.modeT = 0;\n    }\n    if (P.mode === HOLD && P.modeT > 3 + 9 * (1 - heat)) {\n      P.mode = MELT;\n      P.modeT = 0;\n    }\n  } else if (P.mode === MELT) {\n    // The pool rises and every crystal under its surface goes back into it.\n    const from = Math.ceil(P.melt);\n    P.melt -= h * (9 + 26 * heat);\n    for (let y = Math.max(0, Math.ceil(P.melt)); y \u003c from && y \u003c H; y++) P.owner.fill(0, y * W, y * W + W);\n    if (P.melt \u003c -4) {\n      P.mode = DRAIN;\n      P.modeT = 0;\n      P.owner.fill(0);\n      P.crystals = [];\n    }\n  } else {\n    P.melt += h * 70;\n    if (P.melt >= POOL) restart(P);\n  }\n}\n\n// The highest row the cluster reaches.\nfunction top(P) {\n  let t = H;\n  for (const c of P.crystals) t = Math.min(t, c.y - c.r);\n  return t;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.tint = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0, 3) / 2;\n  P.w = clamp(k[2], 3, 8);\n  P.heat = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The pour cooled some time ago: the cluster already stands the height of\n    // the panel when it opens, still growing into its gaps.\n    for (let i = 0; i \u003c PRE * 30 && top(P) > 20; i++) {\n      step(P, 1 / 30);\n      P.modeT = Math.min(P.modeT, 20);\n    }\n    for (let i = 0; i \u003c 90; i++) step(P, rate / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.mode \u003c MELT) {\n    P.mode = MELT;\n    P.modeT = 0;\n  }\n  P.t += dt;\n  step(P, dt * rate);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const own = P.owner;\n  const cs = P.crystals;\n  const lut = P.lut;\n  const w = P.w;\n  const heat = P.heat;\n  const T = P.T;\n  const melt = P.melt;\n  // Oxide grows faster on hot metal.\n  const ox = 0.06 * (0.8 + 0.5 * heat);\n  const tint = P.tint * 0.95;\n  // The pool's glow: cherry red when cool, yellow when hot.\n  const gr = 170 + 85 * heat;\n  const gg = 28 + 140 * heat * heat;\n  const gb = 12 + 40 * heat * heat * heat;\n  const reach = 10 + 22 * heat;\n  // A broad band of light that sweeps down the cluster every 26 s and\n  // catches the rims as it passes.\n  const band = ((T * 7) % 180) - 30;\n  if (P.wAt !== w) {\n    P.wAt = w;\n    for (let p = 0; p \u003c N; p++) if (own[p]) terrace(P, cs[own[p] - 1], p);\n  }\n  const ageLut = P.ageLut;\n  const glint = P.glint;\n  for (let y = 0; y \u003c H; y++) {\n    const above = melt - y;\n    const warm = above > 0 ? Math.exp(-above / reach) * (0.35 + 0.4 * heat) : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let r;\n      let g;\n      let b;\n      if (above \u003c= 0) {\n        // Molten bismuth seen from a little above: slow ripples under the\n        // glow, and the bar of light they throw back.\n        const depth = -above;\n        const ripple = Math.sin(depth * 1.1 - P.t * 1.6 + 1.3 * Math.sin(x * 0.13 + P.t * 0.5));\n        const sheen = Math.max(0, ripple - 0.55) * 2.2 * (0.6 + 0.4 * Math.sin(x * 0.4 - P.t * 0.8 + depth));\n        const dim = 0.72 + 0.12 * ripple - 0.2 * Math.min(1, depth / 12);\n        const edge = depth \u003c 1 ? 0.6 : 0;\n        r = gr * dim + 120 * sheen + 120 * edge;\n        g = gg * dim + 120 * sheen + 110 * edge;\n        b = gb * dim + 130 * sheen + 100 * edge;\n      } else if (own[p]) {\n        const c = cs[own[p] - 1];\n        const d = P.dist[p];\n        const f = P.frac[p];\n        const age = T - P.tStart[p];\n        const rim = (1 - f) * w \u003c= 1.001;\n        let th = ox * c.ox * ageLut[age \u003c= 0 ? 0 : age >= 400 ? 4000 : (age * 10) | 0] + (rim ? 0.07 : 0);\n        if (th > 1) th = 1.2 - 0.2 * Math.exp((1 - th) / 0.2);\n        th += tint;\n        if (th > TH_MAX) th -= 1.05;\n        const li = Math.floor((th / TH_MAX) * (LUT - 1)) * 3;\n        // Which side of the square this LED is on, for the light.\n        const dx = x - c.x;\n        const dy = y - c.y;\n        const lit = Math.abs(dx) >= Math.abs(dy) ? dx > 0 : dy > 0;\n        // Terraces step down into the hollow, so the inner ones sit darker.\n        let m = (0.72 + 0.2 * f) * (0.7 + (0.3 * d) / Math.max(4, c.r));\n        // The rim of each step: the riser on the far side of the hollow faces\n        // the light from the upper left, the near side is in shadow.\n        if (rim) m = lit ? 1.05 : 0.36;\n        // The crystal's outer walls: lit at the top and left, in shade at the\n        // bottom and right, silver where it is still growing; and a dark seam\n        // where it meets an older crystal.\n        const up = y > 0 ? own[p - W] : 0;\n        const left = x > 0 ? own[p - 1] : 0;\n        const down = own[p + W];\n        const right = x \u003c W - 1 ? own[p + 1] : 0;\n        const o0 = own[p];\n        if (!up || !left) m = d === c.r && !c.done ? 1.3 : 1.12;\n        else if (!down || !right) m = d === c.r && !c.done ? 1.1 : 0.42;\n        if ((up && up !== o0) || (left && left !== o0)) m *= 0.3;\n        else if ((down && down \u003c o0) || (right && right \u003c o0)) m *= 0.6;\n        const go = ((x * 0.5 + y - band) * 4 + 256) | 0;\n        const gl = go \u003c 0 || go > 512 ? 0 : glint[go];\n        const shine = (m > 0.95 ? 0.4 : 0.06) * gl;\n        m *= 1 + 0.45 * gl;\n        r = lut[li] * m + 255 * shine + gr * warm;\n        g = lut[li + 1] * m + 255 * shine + gg * warm;\n        b = lut[li + 2] * m + 255 * shine + gb * warm;\n      } else {\n        r = 5 + gr * warm * 0.35;\n        g = 6 + gg * warm * 0.35;\n        b = 10 + gb * warm * 0.35;\n      }\n      // Crystals just above a rising pool glow red hot.\n      if (P.mode === MELT && above > 0 && above \u003c 7) {\n        const hot = 1 - above / 7;\n        r += 200 * hot;\n        g += 50 * hot;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-bismuth","type":"code","name":"bismuth","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bismuth\n// Family:  mineral\n// Idea:    Stepped square hopper crystals of bismuth grow up out of a glowing melt pool to the top of the panel, each terrace turning through the oxide film's silver, gold, purple, blue and green as it ages, until the melt rises and takes them back.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after lab-grown bismuth hopper crystals and the interference colours of their oxide skin\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Steps=3..8, Heat=0..1\n//\n// Knob 1: Tint. Moves every terrace along the oxide sequence: at 0 fresh growth is silver and gold, at 0.5 it starts out purple and blue, at 1 in the second order's gold and pink.\n// Knob 2: Speed. How fast the crystals grow and their oxide thickens: at 2 the cluster climbs the 113 rows to the top in about 40 s, at 0.2 it barely moves.\n// Knob 3: Steps. How wide each terrace of a hopper is, from fine 3 LED steps to deep 8 LED steps, so how many rings each square shows.\n// Knob 4: Heat. How hot the pool burns, from dull cherry red to yellow; a hotter pool lights the lower crystals, thickens their oxide faster and rises sooner to take the cluster back.\n// Buttons: K1 tap heats the pool now: the melt rises up the panel, takes the cluster back and drains, and growth starts again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The pool's surface row when it is at rest.\nconst POOL = 116;\n// Growth phases.\nconst GROW = 0;\nconst HOLD = 1;\nconst MELT = 2;\nconst DRAIN = 3;\n// Oxide film colours by thickness: bare silver, then the first order's straw,\n// gold, bronze, magenta, purple and blue, the second order's sky, teal, gold\n// and pink. Old metal slows toward the second order's teal, and Tint wraps\n// what goes past it back round to gold.\nconst FILM = [\n  [0.0, 200, 204, 214],\n  [0.08, 218, 208, 168],\n  [0.17, 240, 190, 78],\n  [0.26, 226, 130, 64],\n  [0.34, 206, 64, 126],\n  [0.42, 150, 54, 200],\n  [0.5, 70, 84, 236],\n  [0.59, 50, 160, 230],\n  [0.68, 44, 210, 170],\n  [0.78, 150, 216, 80],\n  [0.86, 238, 198, 70],\n  [0.96, 240, 108, 150],\n  [1.06, 168, 92, 210],\n  [1.18, 70, 172, 196],\n  [1.25, 96, 190, 176],\n];\nconst LUT = 600;\n// The longest the opening runs ahead, in seconds, waiting for the cluster to\n// reach row 20.\nconst PRE = 60;\nconst TH_MAX = 1.25;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction buildLut(P) {\n  P.lut = new Float32Array(LUT * 3);\n  for (let i = 0; i \u003c LUT; i++) {\n    const th = (i / (LUT - 1)) * TH_MAX;\n    let j = 0;\n    while (j \u003c FILM.length - 2 && FILM[j + 1][0] \u003c th) j++;\n    const a = FILM[j];\n    const b = FILM[j + 1];\n    const f = clamp((th - a[0]) / (b[0] - a[0]), 0, 1);\n    const s = f * f * (3 - 2 * f);\n    for (let c = 0; c \u003c 3; c++) P.lut[i * 3 + c] = a[c + 1] + (b[c + 1] - a[c + 1]) * s;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.owner = new Int16Array(N);\n  P.dist = new Uint8Array(N);\n  P.phase = new Uint8Array(N);\n  P.buf = new Float32Array(N * 3);\n  // Per LED: when its terrace started, and how far across the terrace it sits.\n  P.tStart = new Float32Array(N);\n  P.frac = new Float32Array(N);\n  P.wAt = 3;\n  buildLut(P);\n  // Oxide thickness grows as age to the power 0.82, here in tenths of a second.\n  P.ageLut = new Float32Array(4001);\n  for (let i = 0; i \u003c= 4000; i++) P.ageLut[i] = Math.pow(i / 10, 0.82);\n  P.glint = new Float32Array(513);\n  for (let i = 0; i \u003c= 512; i++) P.glint[i] = Math.exp(-(((i - 256) / 4 / 16) ** 2));\n  Object.assign(P, { T: 0, t: 0, tint: 0, w: 3, heat: 0.06, started: false });\n  restart(P);\n}\n\n// A clean pool: no crystals, and three seeds on its surface spread across the width.\nfunction restart(P) {\n  P.owner.fill(0);\n  P.crystals = [];\n  P.mode = GROW;\n  P.modeT = 0;\n  P.melt = POOL;\n  P.fill = 0;\n  P.quiet = 0;\n  for (let i = 0; i \u003c 3; i++) addCrystal(P, Math.round(10 + 22 * i + (Math.random() - 0.5) * 6), POOL - 3, null, false);\n}\n\nfunction addCrystal(P, x, y, parent, small) {\n  // A big crystal keeps growing round its neighbours where a small one stops.\n  const big = !small && (!parent || Math.random() \u003c 0.3);\n  const c = {\n    id: P.crystals.length + 1,\n    x,\n    y,\n    parent: parent ? parent.id : 0,\n    gen: parent ? parent.gen + 1 : 0,\n    tb: P.T,\n    // Half-size r grows as rmax * (1 - exp(-age / tau)): fast at first, then\n    // slower as the melt round it runs out.\n    rmax: small ? 3 + Math.floor(Math.random() * 3) : parent ? (big ? 10 + Math.floor(Math.random() * 6) : 5 + Math.floor(Math.random() * 6)) : 13 + Math.floor(Math.random() * 5),\n    tau: small ? 4 : parent ? 6 + Math.random() * 3 : 14,\n    r: 0,\n    // Branch slots: 0 and 1 the upper corners, 2 the top, 3 and 4 the sides.\n    slots: small ? [] : shuffle(parent && parent.gen > 1 ? [0, 1] : parent ? [0, 1, Math.random() \u003c 0.5 ? 3 : 4] : [0, 1, 2, 3, 4]),\n    // Each crystal's own oxide rate: the melt is not the same heat everywhere.\n    ox: 0.8 + 0.45 * Math.random(),\n    nextKid: parent ? 2 : 3,\n    // The side the square spiral starts its turn on, and which way it turns.\n    spin: Math.floor(Math.random() * 4),\n    hand: Math.random() \u003c 0.5 ? 1 : 3,\n    big,\n    done: false,\n  };\n  P.crystals.push(c);\n  claimRing(P, c, 0, true);\n  return c;\n}\n\nfunction shuffle(a) {\n  for (let i = a.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    [a[i], a[j]] = [a[j], a[i]];\n  }\n  return a;\n}\n\n// The quarter turn of a square spiral an LED of a crystal sits on.\nfunction sideOf(c, dx, dy) {\n  const s = Math.abs(dx) >= Math.abs(dy) ? (dx > 0 ? 1 : 3) : dy > 0 ? 2 : 0;\n  return ((s * c.hand + c.spin) % 4) * 64;\n}\n\nconst family = (P, c, q) => q === c.id || q === c.parent || P.crystals[q - 1].parent === c.id;\n\n// Looks at ring r of a crystal, a square. With claim set, takes the LEDs no crystal has reached;\n// without it, returns the share of the ring's LEDs inside the panel that\n// another crystal, not a parent or a branch, already holds.\nfunction claimRing(P, c, r, claim) {\n  let taken = 0;\n  let total = 0;\n  const own = P.owner;\n  const take = (dx, dy) => {\n    const x = c.x + dx;\n    const y = c.y + dy;\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    if (y >= P.melt - 0.5) return;\n    const q = own[p];\n    if (claim) {\n      if (q) return;\n      own[p] = c.id;\n      P.dist[p] = r;\n      P.phase[p] = sideOf(c, dx, dy);\n      terrace(P, c, p);\n      return;\n    }\n    if (q && family(P, c, q)) return;\n    total++;\n    if (q) taken++;\n  };\n  if (r === 0) take(0, 0);\n  else {\n    for (let i = -r; i \u003c= r; i++) {\n      take(i, -r);\n      take(i, r);\n    }\n    for (let i = -r + 1; i \u003c r; i++) {\n      take(-r, i);\n      take(r, i);\n    }\n  }\n  return total ? taken / total : 1;\n}\n\n// Which terrace of the square spiral an LED is on at the current step width,\n// and when the growing edge passed that terrace's inner border.\nfunction terrace(P, c, p) {\n  const w = P.wAt;\n  const ph = P.phase[p] / 256;\n  const u = P.dist[p] / w + ph;\n  const k = Math.floor(u);\n  P.frac[p] = u - k;\n  const start = Math.min(0.97, Math.max(0, (k - ph) * w) / c.rmax);\n  P.tStart[p] = c.tb - c.tau * Math.log(1 - start);\n}\n\nfunction isFree(P, x, y, m) {\n  if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= P.melt - 3) return false;\n  const o = P.owner;\n  for (let j = -m; j \u003c= m; j++)\n    for (let i = -m; i \u003c= m; i++) {\n      const xx = x + i;\n      const yy = y + j;\n      if (xx >= 0 && xx \u003c W && yy >= 0 && yy \u003c H && o[yy * W + xx]) return false;\n    }\n  return true;\n}\n\n// A branch starts just past an upper corner of its parent, or over its top.\nfunction branch(P, c) {\n  const slot = c.slots.pop();\n  const R = c.r + 2 + Math.floor(Math.random() * 3);\n  const sx = slot === 0 || slot === 3 ? -1 : slot === 1 || slot === 4 ? 1 : 0;\n  const x = Math.round(c.x + sx * R + (sx ? 0 : (Math.random() - 0.5) * 6));\n  const y = c.y - (slot > 2 ? Math.floor(R / 3) : R);\n  if (isFree(P, x, y, 1)) addCrystal(P, x, y, c, false);\n}\n\nfunction grow(P, h) {\n  let grew = false;\n  for (const c of P.crystals) {\n    if (c.done) continue;\n    const target = Math.floor(c.rmax * (1 - Math.exp(-(P.T - c.tb) / c.tau)) + 0.5);\n    while (c.r \u003c target && !c.done) {\n      // Stop a ring short of any crystal that is not kin, so a dark gap stays.\n      const near = claimRing(P, c, c.r + 1, false);\n      if (c.big ? near > 0.4 : near > 0.15 || claimRing(P, c, c.r + 2, false) > 0.3) {\n        c.done = true;\n        break;\n      }\n      c.r++;\n      claimRing(P, c, c.r, true);\n      grew = true;\n      if (c.r >= c.rmax) c.done = true;\n      if (c.slots.length && c.r >= c.nextKid) {\n        c.nextKid += 3 + Math.floor(Math.random() * 3);\n        branch(P, c);\n      }\n    }\n  }\n  // Small crystals start on the faces of old ones wherever there is room.\n  const tries = Math.floor(h * 4 + Math.random());\n  for (let i = 0; i \u003c tries; i++) {\n    const x = 1 + Math.floor(Math.random() * (W - 2));\n    const y = 1 + Math.floor(Math.random() * (P.melt - 10));\n    if (!isFree(P, x, y, 2)) continue;\n    const o = P.owner;\n    const p = y * W + x;\n    if ((x > 2 && o[p - 3]) || (x \u003c W - 3 && o[p + 3]) || (y > 3 && o[p - 3 * W]) || o[p + 3 * W]) {\n      addCrystal(P, x, y, null, true);\n      grew = true;\n    }\n  }\n  return grew;\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.modeT += h;\n  const heat = P.heat;\n  if (P.mode === GROW || P.mode === HOLD) {\n    const grew = grow(P, h);\n    P.quiet = grew ? 0 : P.quiet + h;\n    // A cluster that has stopped short of the top sends a new branch up from\n    // its highest crystal.\n    if (P.mode === GROW && P.quiet > 1.5 && top(P) > 6) {\n      let hi = null;\n      for (const c of P.crystals) if (c.r >= 2 && (!hi || c.y - c.r \u003c hi.y - hi.r)) hi = c;\n      if (hi) {\n        hi.slots = [0, 1, 2];\n        while (hi.slots.length) branch(P, hi);\n      }\n      P.quiet = 0;\n    }\n    if (P.mode === GROW && ((P.quiet > 4 && top(P) \u003c= 6) || P.modeT > 60)) {\n      P.mode = HOLD;\n      P.modeT = 0;\n    }\n    if (P.mode === HOLD && P.modeT > 3 + 9 * (1 - heat)) {\n      P.mode = MELT;\n      P.modeT = 0;\n    }\n  } else if (P.mode === MELT) {\n    // The pool rises and every crystal under its surface goes back into it.\n    const from = Math.ceil(P.melt);\n    P.melt -= h * (9 + 26 * heat);\n    for (let y = Math.max(0, Math.ceil(P.melt)); y \u003c from && y \u003c H; y++) P.owner.fill(0, y * W, y * W + W);\n    if (P.melt \u003c -4) {\n      P.mode = DRAIN;\n      P.modeT = 0;\n      P.owner.fill(0);\n      P.crystals = [];\n    }\n  } else {\n    P.melt += h * 70;\n    if (P.melt >= POOL) restart(P);\n  }\n}\n\n// The highest row the cluster reaches.\nfunction top(P) {\n  let t = H;\n  for (const c of P.crystals) t = Math.min(t, c.y - c.r);\n  return t;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.tint = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0, 3) / 2;\n  P.w = clamp(k[2], 3, 8);\n  P.heat = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The pour cooled some time ago: the cluster already stands the height of\n    // the panel when it opens, still growing into its gaps.\n    for (let i = 0; i \u003c PRE * 30 && top(P) > 20; i++) {\n      step(P, 1 / 30);\n      P.modeT = Math.min(P.modeT, 20);\n    }\n    for (let i = 0; i \u003c 90; i++) step(P, rate / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.mode \u003c MELT) {\n    P.mode = MELT;\n    P.modeT = 0;\n  }\n  P.t += dt;\n  step(P, dt * rate);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const own = P.owner;\n  const cs = P.crystals;\n  const lut = P.lut;\n  const w = P.w;\n  const heat = P.heat;\n  const T = P.T;\n  const melt = P.melt;\n  // Oxide grows faster on hot metal.\n  const ox = 0.06 * (0.8 + 0.5 * heat);\n  const tint = P.tint * 0.95;\n  // The pool's glow: cherry red when cool, yellow when hot.\n  const gr = 170 + 85 * heat;\n  const gg = 28 + 140 * heat * heat;\n  const gb = 12 + 40 * heat * heat * heat;\n  const reach = 10 + 22 * heat;\n  // A broad band of light that sweeps down the cluster every 26 s and\n  // catches the rims as it passes.\n  const band = ((T * 7) % 180) - 30;\n  if (P.wAt !== w) {\n    P.wAt = w;\n    for (let p = 0; p \u003c N; p++) if (own[p]) terrace(P, cs[own[p] - 1], p);\n  }\n  const ageLut = P.ageLut;\n  const glint = P.glint;\n  for (let y = 0; y \u003c H; y++) {\n    const above = melt - y;\n    const warm = above > 0 ? Math.exp(-above / reach) * (0.35 + 0.4 * heat) : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let r;\n      let g;\n      let b;\n      if (above \u003c= 0) {\n        // Molten bismuth seen from a little above: slow ripples under the\n        // glow, and the bar of light they throw back.\n        const depth = -above;\n        const ripple = Math.sin(depth * 1.1 - P.t * 1.6 + 1.3 * Math.sin(x * 0.13 + P.t * 0.5));\n        const sheen = Math.max(0, ripple - 0.55) * 2.2 * (0.6 + 0.4 * Math.sin(x * 0.4 - P.t * 0.8 + depth));\n        const dim = 0.72 + 0.12 * ripple - 0.2 * Math.min(1, depth / 12);\n        const edge = depth \u003c 1 ? 0.6 : 0;\n        r = gr * dim + 120 * sheen + 120 * edge;\n        g = gg * dim + 120 * sheen + 110 * edge;\n        b = gb * dim + 130 * sheen + 100 * edge;\n      } else if (own[p]) {\n        const c = cs[own[p] - 1];\n        const d = P.dist[p];\n        const f = P.frac[p];\n        const age = T - P.tStart[p];\n        const rim = (1 - f) * w \u003c= 1.001;\n        let th = ox * c.ox * ageLut[age \u003c= 0 ? 0 : age >= 400 ? 4000 : (age * 10) | 0] + (rim ? 0.07 : 0);\n        if (th > 1) th = 1.2 - 0.2 * Math.exp((1 - th) / 0.2);\n        th += tint;\n        if (th > TH_MAX) th -= 1.05;\n        const li = Math.floor((th / TH_MAX) * (LUT - 1)) * 3;\n        // Which side of the square this LED is on, for the light.\n        const dx = x - c.x;\n        const dy = y - c.y;\n        const lit = Math.abs(dx) >= Math.abs(dy) ? dx > 0 : dy > 0;\n        // Terraces step down into the hollow, so the inner ones sit darker.\n        let m = (0.72 + 0.2 * f) * (0.7 + (0.3 * d) / Math.max(4, c.r));\n        // The rim of each step: the riser on the far side of the hollow faces\n        // the light from the upper left, the near side is in shadow.\n        if (rim) m = lit ? 1.05 : 0.36;\n        // The crystal's outer walls: lit at the top and left, in shade at the\n        // bottom and right, silver where it is still growing; and a dark seam\n        // where it meets an older crystal.\n        const up = y > 0 ? own[p - W] : 0;\n        const left = x > 0 ? own[p - 1] : 0;\n        const down = own[p + W];\n        const right = x \u003c W - 1 ? own[p + 1] : 0;\n        const o0 = own[p];\n        if (!up || !left) m = d === c.r && !c.done ? 1.3 : 1.12;\n        else if (!down || !right) m = d === c.r && !c.done ? 1.1 : 0.42;\n        if ((up && up !== o0) || (left && left !== o0)) m *= 0.3;\n        else if ((down && down \u003c o0) || (right && right \u003c o0)) m *= 0.6;\n        const go = ((x * 0.5 + y - band) * 4 + 256) | 0;\n        const gl = go \u003c 0 || go > 512 ? 0 : glint[go];\n        const shine = (m > 0.95 ? 0.4 : 0.06) * gl;\n        m *= 1 + 0.45 * gl;\n        r = lut[li] * m + 255 * shine + gr * warm;\n        g = lut[li + 1] * m + 255 * shine + gg * warm;\n        b = lut[li + 2] * m + 255 * shine + gb * warm;\n      } else {\n        r = 5 + gr * warm * 0.35;\n        g = 6 + gg * warm * 0.35;\n        b = 10 + gb * warm * 0.35;\n      }\n      // Crystals just above a rising pool glow red hot.\n      if (P.mode === MELT && above > 0 && above \u003c 7) {\n        const hot = 1 - above / 7;\n        r += 200 * hot;\n        g += 50 * hot;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tint=0..1, Speed=0.2..3, Steps=3..8, Heat=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tint","min":0,"max":1,"about":"Moves every terrace along the oxide sequence: at 0 fresh growth is silver and gold, at 0.5 it starts out purple and blue, at 1 in the second order's gold and pink."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the crystals grow and their oxide thickens: at 2 the cluster climbs the 113 rows to the top in about 40 s, at 0.2 it barely moves."},{"name":"Steps","min":3,"max":8,"about":"How wide each terrace of a hopper is, from fine 3 LED steps to deep 8 LED steps, so how many rings each square shows."},{"name":"Heat","min":0,"max":1,"about":"How hot the pool burns, from dull cherry red to yellow; a hotter pool lights the lower crystals, thickens their oxide faster and rises sooner to take the cluster back."}],"start":[0,2,3,0.06],"measures":{"motion":0.0634,"detail":0.155,"edges":0.6769,"complexity":1.8463,"coverage":0.7656,"colour":0.3505,"drift":0.1056},"knobResponse":[0.1563,0.1868,0.0876,0.1811]},{"slug":"bokeh","title":"Bokeh","family":"light","round":1,"note":"초점이 나간 밤거리 불빛이에요. 여섯 모 진 빛 원반이 피었다 흘러가며 겹친 자리만 부드럽게 밝아져요.","idea":"A city at night with the lens left out of focus, so every lamp turns into a disc the shape of the iris.","buttons":"K1 tap racks the focus through, so every disc closes to a point and opens out again.","code":"// ===== Patternflow pattern =====\n// Title:   Bokeh\n// Family:  light\n// Idea:    A city at night with the lens left out of focus, so every lamp turns into a disc the shape of the iris.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0.2..4, Size=-1..1, Lights=40..90\n//\n// Knob 1: Hue. Turns the lights round the colour wheel, starting from sodium amber with a few red and blue ones among them.\n// Knob 2: Pace. How fast the lights drift past and how quickly each one blooms and goes out.\n// Knob 3: Size. How far out of focus they are, from small bright points to wide soft discs.\n// Knob 4: Lights. How many are lit at once; big discs come in fewer.\n// Buttons: K1 tap racks the focus through, so every disc closes to a point and opens out again.\n\nconst W = 64;\nconst H = 128;\nconst N = 160;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nfunction smooth(a, b, x) {\n  const t = Math.max(0, Math.min(1, (x - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction spawn(params, i) {\n  params.x[i] = Math.random() * (W + 12) - 6;\n  params.y[i] = Math.random() * (H + 20) - 10;\n  // Bigger discs are nearer lamps, so they also drift faster.\n  params.size[i] = 0.65 + Math.random() * 0.75;\n  const pick = Math.random();\n  if (pick \u003c 0.62) {\n    params.off[i] = (Math.random() - 0.5) * 0.07;\n    params.sat[i] = 0.82 + Math.random() * 0.18;\n  } else if (pick \u003c 0.8) {\n    // Pale lamps, nearly white.\n    params.off[i] = (Math.random() - 0.5) * 0.05;\n    params.sat[i] = 0.25 + Math.random() * 0.25;\n  } else if (pick \u003c 0.92) {\n    // Tail lights, a step towards red.\n    params.off[i] = -0.07 - Math.random() * 0.03;\n    params.sat[i] = 0.95;\n  } else {\n    // The odd cool one across the wheel.\n    params.off[i] = 0.47 + Math.random() * 0.08;\n    params.sat[i] = 0.75;\n  }\n  params.bright[i] = 0.65 + Math.random() * 0.35;\n  params.life[i] = 1.8 + Math.random() * 1.6;\n  params.age[i] = 0;\n  params.jx[i] = (Math.random() - 0.5) * 2;\n  params.jy[i] = (Math.random() - 0.5) * 2;\n  params.on[i] = 1;\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(N);\n  params.y = new Float32Array(N);\n  params.size = new Float32Array(N);\n  params.off = new Float32Array(N);\n  params.sat = new Float32Array(N);\n  params.bright = new Float32Array(N);\n  params.life = new Float32Array(N);\n  params.age = new Float32Array(N);\n  params.jx = new Float32Array(N);\n  params.jy = new Float32Array(N);\n  params.on = new Uint8Array(N);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.t = 0;\n  params.rack = 0;\n  params.started = false;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 40];\n  params.hue = k[0];\n  const pace = Math.max(0.05, k[1]);\n  params.radius = 9 * Math.pow(1.6, k[2]);\n  const want = Math.min(N, Math.round(k[3] * Math.pow(9 / params.radius, 1.8)));\n  // A crowd dims each lamp a little, so the overlaps stay colours rather than a white wash.\n  params.crowd = Math.min(1, Math.pow(45 / k[3], 0.6));\n  dt = Math.min(dt, 0.1);\n  const step = dt * pace;\n  params.t += step;\n\n  if (!params.started) {\n    // The first frame finds each lamp somewhere in its life, so they never bloom together.\n    for (let i = 0; i \u003c want; i++) {\n      spawn(params, i);\n      params.age[i] = Math.random() * params.life[i];\n    }\n    params.started = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) params.rack = 1;\n  params.rack = Math.max(0, params.rack - dt * 0.9);\n\n  // The whole view pans slowly, the way a car window passes a street.\n  const t = params.t;\n  const ang = 0.6 * Math.sin(t * 0.11) + 0.3 * Math.sin(t * 0.23 + 2);\n  const sp = 9;\n  const dx = Math.cos(ang) * sp;\n  const dy = Math.sin(ang) * sp * 0.6;\n  for (let i = 0; i \u003c N; i++) {\n    if (!params.on[i]) {\n      if (i \u003c want) {\n        spawn(params, i);\n        // A lamp that K4 adds waits a moment, so a quick turn does not light a crowd at once.\n        params.age[i] = -Math.random() * 1.5;\n      }\n      continue;\n    }\n    params.age[i] += step;\n    if (params.age[i] >= params.life[i]) {\n      if (i \u003c want) spawn(params, i);\n      else params.on[i] = 0;\n      continue;\n    }\n    const s = params.size[i];\n    params.x[i] += (dx * s + params.jx[i]) * step;\n    params.y[i] += (dy * s + params.jy[i]) * step;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  buf.fill(0);\n  const col = params.col;\n  // Racking focus: the discs close to points and open again, brighter as they shrink.\n  const r0 = params.rack > 0 ? Math.sin(params.rack * Math.PI) : 0;\n  const focus = 1 - 0.8 * r0;\n  const gain = Math.min(4, 1 / (focus * focus));\n  // A six-bladed iris, turned a little off square.\n  const ic = Math.cos(0.3);\n  const is = Math.sin(0.3);\n  for (let i = 0; i \u003c N; i++) {\n    if (!params.on[i]) continue;\n    const u = params.age[i] / params.life[i];\n    const env = smooth(0, 0.2, u) * (1 - smooth(0.45, 1, u));\n    if (env \u003c= 0.01) continue;\n    const r = params.radius * params.size[i] * (0.6 + 0.4 * smooth(0, 0.35, u) + 0.1 * smooth(0.5, 1, u)) * focus;\n    hsvInto(col, params.hue + 0.075 + params.off[i], params.sat[i], 1);\n    const level = params.bright[i] * env * gain * params.crowd;\n    const cr = col[0] * level;\n    const cg = col[1] * level;\n    const cb = col[2] * level;\n    const cx = params.x[i];\n    const cy = params.y[i];\n    // Soft edge never narrower than four and a half LEDs.\n    const e = Math.max(0.3, 4.5 / r);\n    const e0 = 1 - e * 0.5;\n    const e1 = 1 + e * 0.5;\n    // Near the panel's edge the lens barrel clips the disc into a cat's eye,\n    // measured against the long side so the corners clip as much as before.\n    const vx = ((cx - W / 2) / (H / 2)) * 0.45 * r;\n    const vy = ((cy - H / 2) / (H / 2)) * 0.45 * r;\n    const reach = r * e1 * 1.12 + 1;\n    const x0 = Math.max(0, Math.floor(cx - reach));\n    const x1 = Math.min(W - 1, Math.ceil(cx + reach));\n    const y0 = Math.max(0, Math.floor(cy - reach));\n    const y1 = Math.min(H - 1, Math.ceil(cy + reach));\n    const inv = 1 / r;\n    const vinv = 1 / (r * 1.12);\n    for (let y = y0; y \u003c= y1; y++) {\n      const py = y - cy;\n      for (let x = x0; x \u003c= x1; x++) {\n        const px = x - cx;\n        const round = Math.sqrt(px * px + py * py) * inv;\n        if (round > e1 * 1.2) continue;\n        const ax = Math.abs(px * ic - py * is);\n        const ay = Math.abs(px * is + py * ic);\n        const hex = Math.max(ay, ax * 0.866 + ay * 0.5) * inv * 1.05;\n        let d = round * 0.6 + hex * 0.4;\n        const qx = px + vx;\n        const qy = py + vy;\n        const clip = Math.sqrt(qx * qx + qy * qy) * vinv;\n        if (clip > d) d = clip;\n        if (d >= e1) continue;\n        // Brighter towards the rim, the way a lens draws an out-of-focus light.\n        const v = (1 - smooth(e0, e1, d)) * (0.64 + 0.36 * smooth(0.15, e0, d));\n        const o = (y * W + x) * 3;\n        buf[o] += cr * v;\n        buf[o + 1] += cg * v;\n        buf[o + 2] += cb * v;\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[o]), knee(buf[o + 1]), knee(buf[o + 2]));\n    }\n  }\n}\n\n// Overlaps add up, and past 160 the light rolls off instead of clipping flat.\nfunction knee(c) {\n  if (c \u003c 160) return c;\n  return 160 + 95 * (1 - Math.exp(-(c - 160) / 95));\n}\n","layer":{"id":"layer-bokeh","type":"code","name":"bokeh","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bokeh\n// Family:  light\n// Idea:    A city at night with the lens left out of focus, so every lamp turns into a disc the shape of the iris.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0.2..4, Size=-1..1, Lights=40..90\n//\n// Knob 1: Hue. Turns the lights round the colour wheel, starting from sodium amber with a few red and blue ones among them.\n// Knob 2: Pace. How fast the lights drift past and how quickly each one blooms and goes out.\n// Knob 3: Size. How far out of focus they are, from small bright points to wide soft discs.\n// Knob 4: Lights. How many are lit at once; big discs come in fewer.\n// Buttons: K1 tap racks the focus through, so every disc closes to a point and opens out again.\n\nconst W = 64;\nconst H = 128;\nconst N = 160;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nfunction smooth(a, b, x) {\n  const t = Math.max(0, Math.min(1, (x - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction spawn(params, i) {\n  params.x[i] = Math.random() * (W + 12) - 6;\n  params.y[i] = Math.random() * (H + 20) - 10;\n  // Bigger discs are nearer lamps, so they also drift faster.\n  params.size[i] = 0.65 + Math.random() * 0.75;\n  const pick = Math.random();\n  if (pick \u003c 0.62) {\n    params.off[i] = (Math.random() - 0.5) * 0.07;\n    params.sat[i] = 0.82 + Math.random() * 0.18;\n  } else if (pick \u003c 0.8) {\n    // Pale lamps, nearly white.\n    params.off[i] = (Math.random() - 0.5) * 0.05;\n    params.sat[i] = 0.25 + Math.random() * 0.25;\n  } else if (pick \u003c 0.92) {\n    // Tail lights, a step towards red.\n    params.off[i] = -0.07 - Math.random() * 0.03;\n    params.sat[i] = 0.95;\n  } else {\n    // The odd cool one across the wheel.\n    params.off[i] = 0.47 + Math.random() * 0.08;\n    params.sat[i] = 0.75;\n  }\n  params.bright[i] = 0.65 + Math.random() * 0.35;\n  params.life[i] = 1.8 + Math.random() * 1.6;\n  params.age[i] = 0;\n  params.jx[i] = (Math.random() - 0.5) * 2;\n  params.jy[i] = (Math.random() - 0.5) * 2;\n  params.on[i] = 1;\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(N);\n  params.y = new Float32Array(N);\n  params.size = new Float32Array(N);\n  params.off = new Float32Array(N);\n  params.sat = new Float32Array(N);\n  params.bright = new Float32Array(N);\n  params.life = new Float32Array(N);\n  params.age = new Float32Array(N);\n  params.jx = new Float32Array(N);\n  params.jy = new Float32Array(N);\n  params.on = new Uint8Array(N);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.t = 0;\n  params.rack = 0;\n  params.started = false;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 40];\n  params.hue = k[0];\n  const pace = Math.max(0.05, k[1]);\n  params.radius = 9 * Math.pow(1.6, k[2]);\n  const want = Math.min(N, Math.round(k[3] * Math.pow(9 / params.radius, 1.8)));\n  // A crowd dims each lamp a little, so the overlaps stay colours rather than a white wash.\n  params.crowd = Math.min(1, Math.pow(45 / k[3], 0.6));\n  dt = Math.min(dt, 0.1);\n  const step = dt * pace;\n  params.t += step;\n\n  if (!params.started) {\n    // The first frame finds each lamp somewhere in its life, so they never bloom together.\n    for (let i = 0; i \u003c want; i++) {\n      spawn(params, i);\n      params.age[i] = Math.random() * params.life[i];\n    }\n    params.started = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) params.rack = 1;\n  params.rack = Math.max(0, params.rack - dt * 0.9);\n\n  // The whole view pans slowly, the way a car window passes a street.\n  const t = params.t;\n  const ang = 0.6 * Math.sin(t * 0.11) + 0.3 * Math.sin(t * 0.23 + 2);\n  const sp = 9;\n  const dx = Math.cos(ang) * sp;\n  const dy = Math.sin(ang) * sp * 0.6;\n  for (let i = 0; i \u003c N; i++) {\n    if (!params.on[i]) {\n      if (i \u003c want) {\n        spawn(params, i);\n        // A lamp that K4 adds waits a moment, so a quick turn does not light a crowd at once.\n        params.age[i] = -Math.random() * 1.5;\n      }\n      continue;\n    }\n    params.age[i] += step;\n    if (params.age[i] >= params.life[i]) {\n      if (i \u003c want) spawn(params, i);\n      else params.on[i] = 0;\n      continue;\n    }\n    const s = params.size[i];\n    params.x[i] += (dx * s + params.jx[i]) * step;\n    params.y[i] += (dy * s + params.jy[i]) * step;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  buf.fill(0);\n  const col = params.col;\n  // Racking focus: the discs close to points and open again, brighter as they shrink.\n  const r0 = params.rack > 0 ? Math.sin(params.rack * Math.PI) : 0;\n  const focus = 1 - 0.8 * r0;\n  const gain = Math.min(4, 1 / (focus * focus));\n  // A six-bladed iris, turned a little off square.\n  const ic = Math.cos(0.3);\n  const is = Math.sin(0.3);\n  for (let i = 0; i \u003c N; i++) {\n    if (!params.on[i]) continue;\n    const u = params.age[i] / params.life[i];\n    const env = smooth(0, 0.2, u) * (1 - smooth(0.45, 1, u));\n    if (env \u003c= 0.01) continue;\n    const r = params.radius * params.size[i] * (0.6 + 0.4 * smooth(0, 0.35, u) + 0.1 * smooth(0.5, 1, u)) * focus;\n    hsvInto(col, params.hue + 0.075 + params.off[i], params.sat[i], 1);\n    const level = params.bright[i] * env * gain * params.crowd;\n    const cr = col[0] * level;\n    const cg = col[1] * level;\n    const cb = col[2] * level;\n    const cx = params.x[i];\n    const cy = params.y[i];\n    // Soft edge never narrower than four and a half LEDs.\n    const e = Math.max(0.3, 4.5 / r);\n    const e0 = 1 - e * 0.5;\n    const e1 = 1 + e * 0.5;\n    // Near the panel's edge the lens barrel clips the disc into a cat's eye,\n    // measured against the long side so the corners clip as much as before.\n    const vx = ((cx - W / 2) / (H / 2)) * 0.45 * r;\n    const vy = ((cy - H / 2) / (H / 2)) * 0.45 * r;\n    const reach = r * e1 * 1.12 + 1;\n    const x0 = Math.max(0, Math.floor(cx - reach));\n    const x1 = Math.min(W - 1, Math.ceil(cx + reach));\n    const y0 = Math.max(0, Math.floor(cy - reach));\n    const y1 = Math.min(H - 1, Math.ceil(cy + reach));\n    const inv = 1 / r;\n    const vinv = 1 / (r * 1.12);\n    for (let y = y0; y \u003c= y1; y++) {\n      const py = y - cy;\n      for (let x = x0; x \u003c= x1; x++) {\n        const px = x - cx;\n        const round = Math.sqrt(px * px + py * py) * inv;\n        if (round > e1 * 1.2) continue;\n        const ax = Math.abs(px * ic - py * is);\n        const ay = Math.abs(px * is + py * ic);\n        const hex = Math.max(ay, ax * 0.866 + ay * 0.5) * inv * 1.05;\n        let d = round * 0.6 + hex * 0.4;\n        const qx = px + vx;\n        const qy = py + vy;\n        const clip = Math.sqrt(qx * qx + qy * qy) * vinv;\n        if (clip > d) d = clip;\n        if (d >= e1) continue;\n        // Brighter towards the rim, the way a lens draws an out-of-focus light.\n        const v = (1 - smooth(e0, e1, d)) * (0.64 + 0.36 * smooth(0.15, e0, d));\n        const o = (y * W + x) * 3;\n        buf[o] += cr * v;\n        buf[o + 1] += cg * v;\n        buf[o + 2] += cb * v;\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[o]), knee(buf[o + 1]), knee(buf[o + 2]));\n    }\n  }\n}\n\n// Overlaps add up, and past 160 the light rolls off instead of clipping flat.\nfunction knee(c) {\n  if (c \u003c 160) return c;\n  return 160 + 95 * (1 - Math.exp(-(c - 160) / 95));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Pace=0.2..4, Size=-1..1, Lights=40..90","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the lights round the colour wheel, starting from sodium amber with a few red and blue ones among them."},{"name":"Pace","min":0.2,"max":4,"about":"How fast the lights drift past and how quickly each one blooms and goes out."},{"name":"Size","min":-1,"max":1,"about":"How far out of focus they are, from small bright points to wide soft discs."},{"name":"Lights","min":40,"max":90,"about":"How many are lit at once; big discs come in fewer."}],"start":[0,2,0,40],"measures":{"motion":0.9868,"detail":0.0384,"edges":0.1836,"complexity":1.7001,"coverage":0.5358,"colour":0.318,"drift":0.3822},"knobResponse":[0.2498,0.2782,0.2491,0.2757]},{"slug":"bowling-lane","title":"Bowling Lane","family":"sport","round":22,"note":"볼러 뒤에서 본 10핀 레인이에요. 공이 오일 위로 제 반사를 끌며 휘어 올라가 핀을 흩고, 스위프 바가 데드우드를 쓸어 낸 뒤 핀이 다시 서요. 처음에는 블랙라이트 아래 핀과 화살표, 오일이 빛나고, K4 를 올리면 나무 레인에 하우스 조명이 켜져요.","idea":"A ten-pin lane seen from behind the bowler, foul line to pinsetter, where a hooking ball rolls up through the oil over its reflection, scatters the pins and the sweep clears them for the next rack, under house lights or blacklight.","buttons":"K1 tap throws the next ball now.","code":"// ===== Patternflow pattern =====\n// Title:   Bowling Lane\n// Family:  sport\n// Idea:    A ten-pin lane seen from behind the bowler, foul line to pinsetter, where a hooking ball rolls up through the oil over its reflection, scatters the pins and the sweep clears them for the next rack, under house lights or blacklight.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after cosmic bowling on ten-pin lanes with ball-tracking lane lights\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Ball=0..1, Speed=0.2..3, Hook=0..1, Lights=0..1\n//\n// Knob 1: Ball. The colour of the ball, which the lane lights and the projected trail follow: cyan at 0, round through blue, pink, red, orange and green.\n// Knob 2: Speed. How fast everything goes: at 2 the ball takes about 2.5 s from the foul line to the pins.\n// Knob 3: Hook. How far the oil runs and how much the ball curves: at 0 the oil runs 46 ft and a straight ball hits the head pin on the nose and leaves pins. Near 0.6 it hooks into the pocket and strikes; at 1 the oil stops at 30 ft and it crosses to the Brooklyn side.\n// Knob 4: Lights. Cosmic bowling at 0, the pins, arrows and oil glowing under blacklight, up to the full house lights on the wood at 1.\n// Buttons: K1 tap throws the next ball now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, sign, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = (((h % 1) + 1) % 1) * 6;\n  const k = (n) => v * (1 - s * cl(min((n + h) % 6, 4 - ((n + h) % 6)), 0, 1));\n  return [k(5), k(3), k(1)];\n}\n\n// d is feet past the foul line, x inches from the middle board. The lane\n// narrows in perspective; the pin deck is drawn nearer, 4.7 rows a foot.\nconst Z0 = 255.8;\nconst sc = (d) => 246.6 / (d + Z0);\nconst RD = 4.7;\nconst D0 = -16;\nconst NT = 1312;\nconst YT = new Float32Array(NT + 1);\n{\n  const ramp = (d) => sm(57, 59.5, d);\n  let i1 = 0;\n  let i2 = 0;\n  for (let k = 0; k \u003c 960; k++) {\n    const d = (k + 0.5) / 16;\n    i1 += (1 - ramp(d)) / (d + Z0) ** 2 / 16;\n    i2 += ramp(d) / 16;\n  }\n  // Foul line on row 106, head pin on row 36.\n  const G = (70 - RD * i2) / i1;\n  const rate = (d) => (G / (d + Z0) ** 2) * (1 - ramp(d)) + RD * ramp(d);\n  YT[1216] = 36;\n  for (let i = 1216; i \u003c NT; i++) YT[i + 1] = YT[i] - rate(D0 + (i + 0.5) / 16) / 16;\n  for (let i = 1216; i > 0; i--) YT[i - 1] = YT[i] + rate(D0 + (i - 0.5) / 16) / 16;\n}\nconst rowOf = (d) => {\n  const f = cl((d - D0) * 16, 0, NT - 0.001);\n  const i = f | 0;\n  return YT[i] + (YT[i + 1] - YT[i]) * (f - i);\n};\nconst DR = new Float32Array(H);\nfor (let y = 0, i = NT; y \u003c H; y++) {\n  while (i > 0 && YT[i] \u003c y) i--;\n  DR[y] = i >= NT ? 66 : D0 + (i + (YT[i] - y) / (YT[i] - YT[i + 1])) / 16;\n}\n// The pit edge and the row under the masking unit.\nconst PIT = round(rowOf(62.85));\nconst MB = 11;\nconst proj = (x, d, h) => {\n  const s = sc(d);\n  return [CX + x * s, rowOf(d) - h * 0.85 * s, s];\n};\nconst SPOT = [];\nfor (let r = 0; r \u003c 4; r++) for (let i = 0; i \u003c= r; i++) SPOT.push([(i - r / 2) * 12, r * 10.392]);\nconst bx = (b) => 20.75 - (b - 0.5) * 1.064;\nconst DOTS = [3, 5, 8, 11, 14, 26, 29, 32, 35, 37];\n// Pin radius in inches, base to crown.\nconst PROF = [1.0, 1.7, 2.38, 2.15, 1.6, 1.0, 0.92, 1.2, 1.15, 0.6];\nconst HOLES = [[-0.3, 0.5, 0.81], [0.3, 0.5, 0.81], [0, -0.4, 0.92]];\n// Maple approach, maple heads, pine, maple pin deck.\nconst WOOD = [[234, 178, 112], [228, 168, 100], [212, 134, 68], [238, 188, 124]];\nconst OILC = [0.4, 0.7, 1.4];\nconst SEG = [0.45, 0.55, 0.8, 0.6, 0.6, 0.45];\n\n// The still picture: house light colour A, blacklight glow F, wash share WM.\nfunction paint(P) {\n  const A = (P.A = new Float32Array(N * 3)), F = (P.F = new Float32Array(N * 3)), WM = (P.WM = new Float32Array(N));\n  const put = (x, y, a, f, wm = WM[y * W + x]) => {\n    if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n    const o = (y * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) {\n      A[o + c] = a[c];\n      F[o + c] = f[c];\n    }\n    WM[y * W + x] = wm;\n  };\n  for (let y = MB; y \u003c H; y++) {\n    const d = DR[y], s = sc(d);\n    const lit = d \u003c 57 ? 0.9 + 0.08 * cos((2 * PI * (d + 3)) / 15) : 1.12;\n    const oil = sm(44, 36, d) * (d > 0 ? 1 : 0);\n    for (let x = 0; x \u003c W; x++) {\n      const X = (x - CX) / s, ax = abs(X);\n      if (y \u003c PIT || (d > 57 && ax > 30.5)) {\n        // Kickbacks and the pit curtain.\n        const k = (x * 2 + y) % 11;\n        if (ax > 30.5) put(x, y, k \u003c 2 ? [70, 70, 80] : [28, 28, 34], k \u003c 1 ? [200, 30, 150] : k \u003c 2 ? [60, 20, 140] : [14, 6, 34], 0);\n        else put(x, y, [10, 10, 12], [6, 3, 16], 0);\n      } else if (ax \u003c= 20.75 || ax > 43.75 || (d \u003c 0 && (ax \u003c= 30 || ax > 34.5))) {\n        const far = ax > 43.75, lx = far ? ax - 64.5 : X, a = [0, 0, 0];\n        let tone = 0;\n        for (const e of [-0.25, 0.25]) {\n          const k = floor((20.75 - lx - e / s) / 1.064);\n          const kind = d \u003c 0 ? 0 : d \u003c 15.2 + (k & 3) * 0.7 ? 1 : d \u003c 56 + (k % 3) * 0.6 ? 2 : 3;\n          const t = 0.88 + 0.14 * hash(k + 40, kind) + 0.06 * (hash(k + 40, floor(d * 2.5) + 99) - 0.5);\n          for (let c = 0; c \u003c 3; c++) a[c] += WOOD[kind][c] * t * (far ? 0.7 : 1) * lit * 0.5;\n          tone += t / 2;\n        }\n        // Ceiling lights mirrored in the oil.\n        const glare = far ? 0 : 70 * oil * (exp(-(((X - 9) / 3.5) ** 2)) + exp(-(((X + 9) / 3.5) ** 2))) * (0.5 + 0.5 * cos((2 * PI * d) / 15)) ** 2;\n        const u = (far ? 0.7 : 1) * (d \u003c 0 ? 0.8 : 1) * tone;\n        let f = [22 * u, 8 * u, 46 * u];\n        if (!far && d > 2 && d \u003c 55 && hash(x, y * 7 + 3) \u003c 0.014) f = hsv(hash(y, x), 0.7, 180);\n        put(x, y, a.map((v) => v + glare), f, far ? 0.4 : 1);\n      } else if (ax \u003c= 30 || ax > 34.5) {\n        const g = ((ax \u003c= 30 ? ax - 25.375 : ax - 39.125) / 4.625) ** 2, v = (0.4 + 0.6 * g) * lit;\n        put(x, y, [70 * v, 72 * v, 84 * v], g > 0.75 ? [30, 12, 80] : [8, 4, 22], 0.5);\n      } else put(x, y, [50 * lit, 38 * lit, 32 * lit], [10, 5, 20], 0);\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    const ax = abs((x - CX) / sc(0));\n    if (ax \u003c= 30 || ax > 34.5) put(x, round(rowOf(0)), [16, 16, 18], [255, 30, 90]);\n  }\n  // Foul line, arrows, dots, range finders and pin spots.\n  for (let b = 5; b \u003c= 35; b += 5) {\n    const dt = 16 - abs(20 - b) * 0.267, ty = round(rowOf(dt)), ax = round(CX + bx(b) * sc(dt));\n    for (let j = 0; j \u003c 4; j++) for (let i = -(j >> 1); i \u003c= j >> 1; i++) put(ax + i, ty + j, [96, 34, 22], [255, 120, 24]);\n  }\n  for (const b of DOTS) put(round(CX + bx(b) * sc(7)), round(rowOf(7)), [96, 40, 26], [80, 255, 110]);\n  for (const b of [...DOTS, 20]) put(round(CX + bx(b) * sc(-12)), round(rowOf(-12)), [90, 50, 30], [70, 220, 100]);\n  for (let y = round(rowOf(40)); y \u003c= round(rowOf(34)); y++) for (const b of [10, 30]) put(round(CX + bx(b) * sc(DR[y])), y, [100, 46, 30], [40, 190, 255]);\n  for (const [X, Z] of SPOT) put(round(CX + X * sc(60 + Z / 12)), round(rowOf(60 + Z / 12)), [70, 46, 30], [60, 40, 130]);\n}\n\nconst rack = (h) => SPOT.map(([X, Z]) => ({ X, Z, vx: 0, vz: 0, th: 0, om: 0, ph: 0, w: 0, h, vh: 0, st: h ? 4 : 0 }));\n\nexport function setup(params) {\n  paint(params);\n  Object.assign(params, {\n    buf: new Float32Array(N * 3),\n    tx: new Float32Array(H),\n    tt: new Float32Array(H).fill(-99),\n    t: 0, ph: 0, tm: 1.5, first: true, ball: 1, full: true, fl: 0, mark: 0, seg: -1, pins: rack(0), B: null,\n    ra: 0, ax: [-1, 0, 0], hs: 46, zs: -9, pt: 0, path: [0, 0, 0, 0, 40], bd: -13, bh: 0, bt: 0,\n    m: 1, hook: 0, oil: 46, Hh: 0.1, U: 1, c1: [0, 1, 1], c2: [0, 0, 1],\n  });\n}\n\nconst pathX = (P, d) => {\n  const [x0, xb, sb, a, db] = P.path;\n  return d \u003c db ? x0 + sb * d : xb + sb * (d - db) - (a * (d - db) ** 2) / 2;\n};\nconst pathS = (P, d) => (d \u003c P.path[4] ? P.path[2] : P.path[2] - P.path[3] * (d - P.path[4]));\n\n// Out toward the gutter until the oil thins, then the hook back. A spare ball\n// moves the whole line onto the standing pins.\nfunction throwBall(P) {\n  const h = P.hook, db = P.oil - 6, e = 60 - db;\n  let x60 = (h \u003c 0.55 ? 0.4 + (2.3 * h) / 0.55 : 2.7 - (4.7 * (h - 0.55)) / 0.45) + (rnd() - 0.5) * 1.6;\n  let x0 = 12 - 24 * h;\n  const xs = x0 + ((x60 - x0) * db) / 60;\n  let xb = xs + (16 - xs) * min(1, h * 1.4);\n  const line = () => {\n    const sb = (xb - x0) / db;\n    return [sb, ((xb + e * sb - x60) * 2) / (e * e)];\n  };\n  const up = P.pins.filter((p) => p.st === 0);\n  if (P.ball === 2 && up.length) {\n    const z = min(...up.map((p) => p.Z)), front = up.filter((p) => p.Z \u003c z + 11), [sb, a] = line();\n    const shift = front.reduce((s, p) => s + p.X, 0) / front.length - x60 - ((sb - a * e) * z) / 12 + (rnd() - 0.5) * 2;\n    x0 += shift;\n    xb += shift;\n    x60 += shift;\n  }\n  x0 = cl(x0, -17, 17);\n  xb = cl(xb, -17, 17);\n  P.path = [x0, xb, ...line(), db];\n  Object.assign(P, { ph: 1, bt: 0, bd: -13, ra: 0 });\n  const b = 0.9 * h;\n  const k = [-cos(b), 0.3 * sin(b), sin(b)];\n  P.ax = k.map((v) => v / hypot(...k));\n}\n\n// The swing brings the ball in from below the panel, then it rolls.\nfunction roll(P, h) {\n  P.bt += h;\n  const y0 = rowOf(P.bd), v = 25 - 0.07 * P.bd;\n  if (P.bt \u003c 0.45) {\n    P.bd = -13 + 30 * P.bt;\n    P.bh = 10 * (1 - P.bt / 0.45) ** 2;\n  } else {\n    P.bd += v * h;\n    P.bh = 0;\n    P.ra += v * 0.36 * h;\n  }\n  const d = P.bd, x = CX + pathX(P, max(0, d)) * sc(d);\n  for (let y = max(0, round(rowOf(d))); y \u003c= round(y0) && y \u003c H; y++) {\n    P.tx[y] = x;\n    P.tt[y] = P.t;\n  }\n  if (d >= 58.6) {\n    P.B = { X: pathX(P, d), Z: (d - 60) * 12, vx: pathS(P, d) * v, vz: 12 * v, h: 0, vh: 0, st: -1 };\n    P.ph = 2;\n    P.pt = 0;\n  }\n}\n\nfunction pts(p) {\n  if (p.th \u003c 0.35) return [[p.X, p.Z, 0.5]];\n  const L = 15 * sin(p.th);\n  return [0.12, 0.5, 0.88].map((f) => [p.X + cos(p.ph) * L * f, p.Z + sin(p.ph) * L * f, f]);\n}\n\nfunction kick(p, dvx, dvz, f) {\n  p.vx += dvx;\n  p.vz += dvz;\n  if (p.st \u003c 0) return;\n  const dv = sqrt(dvx * dvx + dvz * dvz);\n  if (p.st === 0) {\n    if (p.th \u003c 0.05) p.ph = atan2(dvz, dvx);\n    p.om += dv / 7;\n    if (dv > 130) Object.assign(p, { vh: dv * 0.28, om: dv / 7 + 5, st: 1, th: max(p.th, 0.05) });\n  } else p.w += (15 * sin(p.th) * (f - 0.5) * (cos(p.ph) * dvz - sin(p.ph) * dvx)) / 70;\n}\n\n// Ball and pins are discs on the deck; pins rock, topple past 11 degrees, fly\n// when hit hard and spin off the kickbacks.\nfunction collide(P) {\n  const bodies = [];\n  if (P.B && P.B.h > -3) bodies.push([P.B, 15, 4.3, [[P.B.X, P.B.Z, 0.5]]]);\n  for (const p of P.pins) if (p.st \u003c 2 && p.h \u003c 14) bodies.push([p, 3.5, 2.4, pts(p)]);\n  for (let i = 0; i \u003c bodies.length; i++) {\n    const [a, ma, ra, pa] = bodies[i];\n    for (const [qx] of pa) {\n      const sg = sign(qx), lim = 30.5 - ra;\n      if (abs(qx) > lim) {\n        a.X -= qx - sg * lim;\n        if (a.vx * sg > 0) a.vx *= -0.5;\n      }\n    }\n    for (let j = i + 1; j \u003c bodies.length; j++) {\n      const [b, mb, rb, pb] = bodies[j];\n      const R = ra + rb, ia = 1 / ma, ib = 1 / mb;\n      for (const qa of pa)\n        for (const qb of pb) {\n          const dx = qb[0] - qa[0], dz = qb[1] - qa[1], dd = dx * dx + dz * dz;\n          if (dd >= R * R || dd \u003c 1e-6) continue;\n          const D = sqrt(dd), nx = dx / D, nz = dz / D, pen = (R - D) / (ia + ib);\n          a.X -= nx * pen * ia;\n          a.Z -= nz * pen * ia;\n          b.X += nx * pen * ib;\n          b.Z += nz * pen * ib;\n          const vn = (b.vx - a.vx) * nx + (b.vz - a.vz) * nz;\n          if (vn >= 0) continue;\n          const J = (-1.5 * vn) / (ia + ib);\n          kick(a, -J * nx * ia, -J * nz * ia, qa[2]);\n          kick(b, J * nx * ib, J * nz * ib, qb[2]);\n        }\n    }\n  }\n}\n\nfunction move(P, dt) {\n  const B = P.B;\n  if (B) {\n    B.X += B.vx * dt;\n    B.Z += B.vz * dt;\n    P.ra += B.vz * 0.03 * dt;\n    if (B.Z > 34.2) {\n      B.vh -= 386 * dt;\n      B.h += B.vh * dt;\n      if (B.Z > 44) B.vz = 0;\n    }\n  }\n  for (const p of P.pins) {\n    if (p.st >= 3) continue;\n    if (p.st === 2 || p.h > 0 || p.vh > 0) {\n      p.vh -= 386 * dt;\n      p.h += p.vh * dt;\n      p.th += p.om * dt;\n      if (p.st === 2) {\n        if (p.Z > 46) p.vz = 0;\n        if (p.h \u003c -40) p.st = 3;\n      } else if (p.h \u003c= 0) {\n        if (sin(p.th) \u003c 0) p.ph += PI;\n        Object.assign(p, { h: 0, vh: p.vh \u003c -80 ? -p.vh * 0.3 : 0, th: PI / 2, om: 0, st: 1 });\n      }\n    } else if (p.st === 0) {\n      if (p.th > 0 || p.om > 0) {\n        p.om += 60 * sin(p.th - 0.2) * dt;\n        p.th += p.om * dt;\n        if (p.th \u003c 0) {\n          p.th = -p.th;\n          p.om *= -0.4;\n          p.ph += PI;\n          if (abs(p.om) \u003c 0.3) p.th = p.om = 0;\n        }\n        if (p.th > 0.2) p.st = 1;\n      }\n    } else if (p.th \u003c PI / 2) {\n      p.om += 64 * sin(p.th) * dt;\n      p.th += p.om * dt;\n      if (p.th >= PI / 2) {\n        p.th = PI / 2;\n        p.om = 0;\n      }\n    }\n    if (p.st \u003c 2 && p.h \u003c= 0) {\n      const v = hypot(p.vx, p.vz), dec = (p.st ? 110 : 400) * dt, k = v > dec ? (v - dec) / v : 0;\n      p.vx *= k;\n      p.vz *= k;\n      p.w *= exp(-2.5 * dt);\n    }\n    p.X += p.vx * dt;\n    p.Z += p.vz * dt;\n    p.ph += p.w * dt;\n    if (p.st \u003c 2 && p.h \u003c 8 && p.Z + 7.5 * sin(p.th) * sin(p.ph) > 34.2) p.st = 2;\n  }\n}\n\nfunction physics(P, h) {\n  for (let s = 0, n = ceil(h / 0.004); s \u003c n; s++) {\n    move(P, h / n);\n    collide(P);\n  }\n}\n\nfunction endPins(P) {\n  const up = P.pins.filter((p) => p.st === 0).length;\n  if (!up) {\n    P.fl = P.ball === 1 ? 1 : 0.8;\n    P.mark = P.ball;\n  }\n  Object.assign(P, { full: !up || P.ball === 2, ph: 3, tm: 0, seg: -1, B: null });\n}\n\n// Sweep drops, table lifts standing pins, sweep rakes the deadwood into the\n// pit and returns, table sets the pins or a new rack, sweep lifts.\nfunction sweep(P, h) {\n  let u = (P.tm += h), k = 0;\n  while (k \u003c 6 && u > SEG[k]) u -= SEG[k++];\n  if (k >= 6) return Object.assign(P, { ph: 0, tm: 0.7, ball: P.full ? 1 : 2, hs: 46 });\n  const e = sm(0, 1, u / SEG[k]);\n  if (k !== P.seg) {\n    P.seg = k;\n    if (k === 4 && P.full) P.pins = rack(46);\n    if (k === 5) for (const p of P.pins) if (p.st === 4) p.st = p.h = 0;\n  }\n  if (k === 0) P.hs = 46 - 45 * e;\n  else if (k === 1) {\n    if (!P.full) for (const p of P.pins) if (p.st === 0 || p.st === 4) Object.assign(p, { st: 4, h: 46 * e, th: 0, om: 0, vx: 0, vz: 0 });\n  } else if (k === 2) {\n    P.zs = -9 + 47 * e;\n    for (const p of P.pins)\n      if (p.st \u003c 2 && p.h \u003c 12 && p.Z \u003c P.zs + 3) {\n        p.Z = P.zs + 3;\n        p.vz = max(p.vz, 0);\n        if (p.st === 0) Object.assign(p, { st: 1, th: 1.3, ph: PI / 2 });\n      }\n  } else if (k === 3) P.zs = 38 - 47 * e;\n  else if (k === 4) {\n    for (const p of P.pins) if (p.st === 4) p.h = 46 * (1 - e);\n  } else P.hs = 1 + 45 * e;\n}\n\nfunction throwNow(P) {\n  if (P.ph === 1) return;\n  if (P.ph >= 2) {\n    if (P.ph === 2) endPins(P);\n    P.pins = P.full ? rack(0) : P.pins.filter((p) => p.st === 0 || p.st === 4).map((p) => Object.assign(p, { st: 0, h: 0, th: 0, om: 0 }));\n    Object.assign(P, { ball: P.full ? 1 : 2, hs: 46, B: null });\n  }\n  throwBall(P);\n}\n\nfunction step(P, h) {\n  P.t += h;\n  P.fl = max(0, P.fl - h * 0.5);\n  let ph = h;\n  if (P.ph === 0) {\n    // The first ball goes at 1.5 s at any speed.\n    if ((P.tm -= P.first ? h / P.m : h) \u003c= 0) {\n      P.first = false;\n      throwBall(P);\n    }\n  } else if (P.ph === 1) roll(P, h);\n  else if (P.ph === 2) {\n    // Pin action in slow motion at first.\n    ph = h * (0.45 + 0.55 * sm(0.5, 1, P.pt));\n    P.pt += ph;\n    if (P.pt > 1.6) endPins(P);\n  } else sweep(P, h);\n  physics(P, ph);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.c1 = hsv(0.52 + k[0], 0.9, 1);\n  P.c2 = hsv(0.66 + k[0], 0.7, 1);\n  P.m = cl(k[1], 0.2, 3) / 2;\n  P.hook = cl(k[2], 0, 1);\n  P.oil = 46 - 16 * P.hook;\n  const L = cl(k[3], 0, 1);\n  P.Hh = 0.1 + 0.9 * L * L;\n  P.U = 1 - L;\n  if (input.btnPressed && input.btnPressed[0]) throwNow(P);\n  step(P, cl(dt, 0, 0.1) * P.m);\n}\n\nfunction add(buf, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) buf[o + i] += c[i] * v;\n}\nfunction blend(buf, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n  const o = (y * W + x) * 3;\n  [r, g, b].forEach((v, i) => (buf[o + i] += (v - buf[o + i]) * a));\n}\n\n// Capping lights that chase, follow the ball and light the gutters, and the\n// projected trail.\nfunction lights(P) {\n  const { buf, c1, t, U, fl, tx, tt } = P;\n  const db = P.ph === 1 ? P.bd : P.ph === 2 ? 70 : -99;\n  for (let y = round(rowOf(57)); y \u003c H; y++) {\n    const d = DR[y], s = sc(d);\n    let v = 0.16 + 0.34 * max(0, sin(2 * PI * (d / 9 - t * 0.55))) ** 6;\n    if (db > -50) v += d \u003c db ? 0.9 * exp((d - db) / 7) : exp(-(d - db) * 1.5);\n    v = (v + fl * (0.5 + 0.5 * sin(d * 0.7 - t * 14))) * 200 * (0.45 + 0.55 * U);\n    for (const sg of [-1, 1]) {\n      const xs = CX + sg * 32.25 * s, x = floor(xs), f = xs - x;\n      [0.2, 1 - f * 0.8, 0.2 + f * 0.8, 0.2].forEach((k, i) => add(buf, x + i - 1, y, c1, v * k));\n      if (d > 0) for (let X = 21; X \u003c 30; X += 1 / s) add(buf, round(CX + sg * X * s), y, c1, v * 0.4 * ((X - 20.75) / 9.25) ** 1.5);\n    }\n    const age = t - tt[y];\n    if (age \u003c 4) {\n      const I = min(1, age * 8) * exp(-age / 1.2) * 140 * U, w = 4.3 * s + 0.8;\n      for (let x = max(0, floor(tx[y] - w)); x \u003c= min(W - 1, tx[y] + w); x++) {\n        const f = 1 - ((x - tx[y]) / w) ** 2;\n        if (f > 0) add(buf, x, y, c1, I * f);\n      }\n    }\n  }\n}\n\n// Marbled shell and holes turning with the roll.\nfunction drawBall(P, cx, cy, r, alpha, mirror, clip) {\n  const { buf, c1, c2, Hh, U } = P;\n  const [k0, k1, k2] = P.ax, ca = cos(P.ra), sa = sin(P.ra);\n  for (let y = floor(cy - r - 1); y \u003c= cy + r + 1 && y \u003c clip; y++)\n    for (let x = floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n      const u = (x - cx) / r, v = (y - cy) / r, q = u * u + v * v;\n      const cov = cl((1 - sqrt(q)) * r + 0.5, 0, 1);\n      if (cov \u003c= 0) continue;\n      const nz = sqrt(max(0, 1 - q)), ny = mirror ? v : -v;\n      const kd = (k0 * u + k1 * ny + k2 * nz) * (1 - ca);\n      const X = u * ca + (k1 * nz - k2 * ny) * sa + k0 * kd;\n      const Y = ny * ca + (k2 * u - k0 * nz) * sa + k1 * kd;\n      const Z = nz * ca + (k0 * ny - k1 * u) * sa + k2 * kd;\n      const sw = (0.5 + 0.5 * sin(3.2 * X + 2.4 * sin(2.6 * Y + 1.8 * Z) + 2 * Z * X)) ** 2;\n      let hole = 1;\n      for (const [hx, hy, hz] of HOLES) if (hx * X + hy * Y + hz * Z > 0.972) hole = 0.12;\n      const lit = (0.25 + 0.75 * max(0, -0.35 * u + 0.6 * ny + 0.72 * nz)) * Hh * 1.15 + U * (0.45 + 0.6 * nz);\n      const sp = mirror ? 0 : 230 * Hh * max(0, -0.2 * u + 0.5 * ny + 0.84 * nz) ** 24;\n      const col = [0, 1, 2].map((c) => (c1[c] * (1 - sw) * 0.9 + c2[c] * sw) * 255 * lit * hole + sp);\n      blend(buf, x, y, col[0], col[1], col[2], cov * (mirror ? alpha * max(0, 1 - (y - cy + r) / (2 * r)) : alpha));\n    }\n}\n\n// A pin's profile swept from base to crown, tilted by th toward ph.\nfunction drawPin(P, p) {\n  const { buf, Hh, U } = P;\n  const [x0, y0, s] = proj(p.X, 60 + p.Z / 12, p.h - (abs(p.X) > 21 && p.st === 1 ? 2.5 : 0));\n  const hx = cos(p.ph) * 15 * sin(p.th) * s;\n  const hy = (-sin(p.ph) * 15 * sin(p.th) * RD) / 12 - 15 * cos(p.th) * 0.85 * s;\n  const L2 = hx * hx + hy * hy, clip = p.Z > 34.2 ? PIT : H;\n  for (let y = floor(min(y0, y0 + hy) - 3); y \u003c= max(y0, y0 + hy) + 3 && y \u003c clip; y++)\n    for (let x = floor(min(x0, x0 + hx) - 3); x \u003c= max(x0, x0 + hx) + 3; x++) {\n      const px = x - x0, py = y - y0;\n      const t = L2 > 0.01 ? cl((px * hx + py * hy) / L2, 0, 1) : 0;\n      const ex = px - t * hx, ey = py - t * hy, f = t * 9, i = min(8, f | 0);\n      const rw = (PROF[i] + (PROF[i + 1] - PROF[i]) * (f - i)) * s;\n      const cov = cl(rw - sqrt(ex * ex + ey * ey) + 0.5, 0, 1);\n      if (cov \u003c= 0) continue;\n      const lit = (0.82 - (0.18 * ex) / (rw + 0.3)) * Hh;\n      if (t > 0.6 && t \u003c 0.73) blend(buf, x, y, 215 * Hh + 255 * U, 30 * Hh + 40 * U, 40 * Hh + 150 * U, cov);\n      else blend(buf, x, y, 240 * lit + 180 * U, 240 * lit + 192 * U, 234 * lit + 255 * U, cov);\n    }\n}\n\nfunction drawSweep(P) {\n  const { buf, Hh, U, hs, zs } = P;\n  const [xl, yb, s] = proj(-31, 60 + zs / 12, hs);\n  const th = 3.4 * s;\n  for (let y = floor(yb - th); y \u003c= yb; y++)\n    for (let x = round(xl); x \u003c= round(2 * CX - xl); x++) {\n      const top = y \u003c yb - th + 1 ? 60 : 0;\n      const hz = ((x + 64) >> 1) % 3 === 0;\n      blend(buf, x, y, (140 + top) * Hh + (hz ? 255 : 40) * U, (142 + top) * Hh + (hz ? 210 : 20) * U, (152 + top) * Hh + (hz ? 40 : 70) * U, 1);\n    }\n  for (const x of [round(CX - 29.5 * s), round(CX + 29.5 * s)]) for (let y = MB; y \u003c yb - th; y++) blend(buf, x, y, 80 * Hh + 50 * U, 80 * Hh + 30 * U, 92 * Hh + 120 * U, 1);\n}\n\n// The masking unit, with the blacklight tube along its lip.\nfunction hood(P) {\n  const { buf, Hh, U, c1, c2, fl, t } = P;\n  for (let y = 0; y \u003c MB; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, wy = 4.4 + 2.4 * sin(x * 0.11 + 0.8), b1 = max(0, 1 - abs(y - wy));\n      const b2 = max(0, 1 - abs(y - wy - 2.5) * 1.3) * sm(4, 14, x), pulse = 0.55 + 0.45 * sin(x * 0.35 - t * 5);\n      const tw = hash(x, y) \u003c 0.07 ? (0.5 + 0.5 * sin(t * 4 + hash(y, x) * 40)) * 150 * U : 0;\n      const fx = fl > 0 ? hsv(x / 40 - t * 2, 1, fl * 200) : [0, 0, 0];\n      for (let c = 0; c \u003c 3; c++)\n        buf[o + c] =\n          y === MB - 1\n            ? 150 * Hh + [110, 50, 255][c] * U\n            : [20, 30, 88][c] * Hh * (0.85 + y * 0.03) + [12, 4, 30][c] * U + b1 * ([190, 220, 255][c] * Hh + c1[c] * 255 * U * pulse) + b2 * ([255, 140, 40][c] * Hh + c2[c] * 230 * U) + tw + fx[c];\n    }\n  // X for a strike, a slash for a spare.\n  if (fl > 0.05)\n    for (let j = -3; j \u003c= 3; j++)\n      for (const i of P.mark === 1 ? [j, -j] : [-j]) {\n        const o = ((5 + j) * W + 32 + i) * 3;\n        for (let c = 0; c \u003c 3; c++) buf[o + c] = 255 * min(1, fl * 2);\n      }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, A, F, WM, Hh, U, c1 } = P;\n  // The lane lights wash the boards in slow waves; the oil glows.\n  for (let y = MB; y \u003c H; y++) {\n    const d = DR[y], s = sc(d), wave = 16 + 9 * sin(2 * PI * (d / 14 - P.t * 0.5));\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, wm = WM[i] * wave * U;\n      const ax = abs(x - CX) / s;\n      const oil = WM[i] === 1 && d > 0 ? sm(P.oil + 3, P.oil - 4, d + ax * 0.2) * (64 - ax * ax * 0.08) * U : 0;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = A[o + c] * Hh + F[o + c] * U + c1[c] * wm + oil * OILC[c];\n    }\n  }\n  lights(P);\n  let ball = null;\n  if (P.ph === 1) ball = [pathX(P, max(0, P.bd)), P.bd, P.bh, H];\n  else if (P.B && P.B.h > -14) ball = [P.B.X, 60 + P.B.Z / 12, P.B.h, P.B.Z > 34.2 ? PIT : H];\n  let bs = null;\n  if (ball) {\n    const [x, d, h, clip] = ball;\n    const [cx, cy, s] = proj(x, d, 4.3 + h), fy = rowOf(d), r = 4.3 * s, R = r * 3.4;\n    bs = [cx, cy, r, clip, d];\n    // Halo, shadow, reflection.\n    for (let y = floor(cy - R); y \u003c= cy + R && y \u003c clip; y++)\n      for (let x2 = floor(cx - R); x2 \u003c= cx + R; x2++) {\n        const q = 1 - hypot(x2 - cx, (y - cy) * 1.2) / R;\n        if (q > 0) add(buf, x2, y, c1, q * q * 110 * U);\n        const e = ((x2 - cx) / (r * 1.1)) ** 2 + ((y - fy) / (r * 0.45)) ** 2;\n        if (e \u003c 1 && clip === H && y >= MB && y \u003c H && x2 >= 0 && x2 \u003c W)\n          for (let c = 0; c \u003c 3; c++) buf[(y * W + x2) * 3 + c] *= 1 - 0.55 * Hh * (1 - e) * exp(-h / 6);\n      }\n    if (d > 0 && d \u003c P.oil + 2) drawBall(P, cx, 2 * fy - cy + h * 1.7 * s, r, 0.15 + 0.4 * sm(P.oil + 2, P.oil - 8, d), true, H);\n  }\n  // Deck objects far to near.\n  const items = P.pins.filter((p) => p.st \u003c 3).map((p) => [p.Z + (p.st === 1 ? 7 * sin(p.ph) : 0), p]);\n  if (P.hs \u003c 45) items.push([P.zs - 0.5, 0]);\n  if (bs && bs[4] > 57) items.push([(bs[4] - 60) * 12, 1]);\n  items.sort((a, b) => b[0] - a[0]);\n  for (const [, it] of items) {\n    if (it === 0) drawSweep(P);\n    else if (it === 1) drawBall(P, bs[0], bs[1], bs[2], 1, false, bs[3]);\n    else drawPin(P, it);\n  }\n  if (bs && bs[4] \u003c= 57) drawBall(P, bs[0], bs[1], bs[2], 1, false, bs[3]);\n  hood(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-bowling-lane","type":"code","name":"bowling-lane","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bowling Lane\n// Family:  sport\n// Idea:    A ten-pin lane seen from behind the bowler, foul line to pinsetter, where a hooking ball rolls up through the oil over its reflection, scatters the pins and the sweep clears them for the next rack, under house lights or blacklight.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after cosmic bowling on ten-pin lanes with ball-tracking lane lights\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Ball=0..1, Speed=0.2..3, Hook=0..1, Lights=0..1\n//\n// Knob 1: Ball. The colour of the ball, which the lane lights and the projected trail follow: cyan at 0, round through blue, pink, red, orange and green.\n// Knob 2: Speed. How fast everything goes: at 2 the ball takes about 2.5 s from the foul line to the pins.\n// Knob 3: Hook. How far the oil runs and how much the ball curves: at 0 the oil runs 46 ft and a straight ball hits the head pin on the nose and leaves pins. Near 0.6 it hooks into the pocket and strikes; at 1 the oil stops at 30 ft and it crosses to the Brooklyn side.\n// Knob 4: Lights. Cosmic bowling at 0, the pins, arrows and oil glowing under blacklight, up to the full house lights on the wood at 1.\n// Buttons: K1 tap throws the next ball now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, atan2, sign, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction hsv(h, s, v) {\n  h = (((h % 1) + 1) % 1) * 6;\n  const k = (n) => v * (1 - s * cl(min((n + h) % 6, 4 - ((n + h) % 6)), 0, 1));\n  return [k(5), k(3), k(1)];\n}\n\n// d is feet past the foul line, x inches from the middle board. The lane\n// narrows in perspective; the pin deck is drawn nearer, 4.7 rows a foot.\nconst Z0 = 255.8;\nconst sc = (d) => 246.6 / (d + Z0);\nconst RD = 4.7;\nconst D0 = -16;\nconst NT = 1312;\nconst YT = new Float32Array(NT + 1);\n{\n  const ramp = (d) => sm(57, 59.5, d);\n  let i1 = 0;\n  let i2 = 0;\n  for (let k = 0; k \u003c 960; k++) {\n    const d = (k + 0.5) / 16;\n    i1 += (1 - ramp(d)) / (d + Z0) ** 2 / 16;\n    i2 += ramp(d) / 16;\n  }\n  // Foul line on row 106, head pin on row 36.\n  const G = (70 - RD * i2) / i1;\n  const rate = (d) => (G / (d + Z0) ** 2) * (1 - ramp(d)) + RD * ramp(d);\n  YT[1216] = 36;\n  for (let i = 1216; i \u003c NT; i++) YT[i + 1] = YT[i] - rate(D0 + (i + 0.5) / 16) / 16;\n  for (let i = 1216; i > 0; i--) YT[i - 1] = YT[i] + rate(D0 + (i - 0.5) / 16) / 16;\n}\nconst rowOf = (d) => {\n  const f = cl((d - D0) * 16, 0, NT - 0.001);\n  const i = f | 0;\n  return YT[i] + (YT[i + 1] - YT[i]) * (f - i);\n};\nconst DR = new Float32Array(H);\nfor (let y = 0, i = NT; y \u003c H; y++) {\n  while (i > 0 && YT[i] \u003c y) i--;\n  DR[y] = i >= NT ? 66 : D0 + (i + (YT[i] - y) / (YT[i] - YT[i + 1])) / 16;\n}\n// The pit edge and the row under the masking unit.\nconst PIT = round(rowOf(62.85));\nconst MB = 11;\nconst proj = (x, d, h) => {\n  const s = sc(d);\n  return [CX + x * s, rowOf(d) - h * 0.85 * s, s];\n};\nconst SPOT = [];\nfor (let r = 0; r \u003c 4; r++) for (let i = 0; i \u003c= r; i++) SPOT.push([(i - r / 2) * 12, r * 10.392]);\nconst bx = (b) => 20.75 - (b - 0.5) * 1.064;\nconst DOTS = [3, 5, 8, 11, 14, 26, 29, 32, 35, 37];\n// Pin radius in inches, base to crown.\nconst PROF = [1.0, 1.7, 2.38, 2.15, 1.6, 1.0, 0.92, 1.2, 1.15, 0.6];\nconst HOLES = [[-0.3, 0.5, 0.81], [0.3, 0.5, 0.81], [0, -0.4, 0.92]];\n// Maple approach, maple heads, pine, maple pin deck.\nconst WOOD = [[234, 178, 112], [228, 168, 100], [212, 134, 68], [238, 188, 124]];\nconst OILC = [0.4, 0.7, 1.4];\nconst SEG = [0.45, 0.55, 0.8, 0.6, 0.6, 0.45];\n\n// The still picture: house light colour A, blacklight glow F, wash share WM.\nfunction paint(P) {\n  const A = (P.A = new Float32Array(N * 3)), F = (P.F = new Float32Array(N * 3)), WM = (P.WM = new Float32Array(N));\n  const put = (x, y, a, f, wm = WM[y * W + x]) => {\n    if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n    const o = (y * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) {\n      A[o + c] = a[c];\n      F[o + c] = f[c];\n    }\n    WM[y * W + x] = wm;\n  };\n  for (let y = MB; y \u003c H; y++) {\n    const d = DR[y], s = sc(d);\n    const lit = d \u003c 57 ? 0.9 + 0.08 * cos((2 * PI * (d + 3)) / 15) : 1.12;\n    const oil = sm(44, 36, d) * (d > 0 ? 1 : 0);\n    for (let x = 0; x \u003c W; x++) {\n      const X = (x - CX) / s, ax = abs(X);\n      if (y \u003c PIT || (d > 57 && ax > 30.5)) {\n        // Kickbacks and the pit curtain.\n        const k = (x * 2 + y) % 11;\n        if (ax > 30.5) put(x, y, k \u003c 2 ? [70, 70, 80] : [28, 28, 34], k \u003c 1 ? [200, 30, 150] : k \u003c 2 ? [60, 20, 140] : [14, 6, 34], 0);\n        else put(x, y, [10, 10, 12], [6, 3, 16], 0);\n      } else if (ax \u003c= 20.75 || ax > 43.75 || (d \u003c 0 && (ax \u003c= 30 || ax > 34.5))) {\n        const far = ax > 43.75, lx = far ? ax - 64.5 : X, a = [0, 0, 0];\n        let tone = 0;\n        for (const e of [-0.25, 0.25]) {\n          const k = floor((20.75 - lx - e / s) / 1.064);\n          const kind = d \u003c 0 ? 0 : d \u003c 15.2 + (k & 3) * 0.7 ? 1 : d \u003c 56 + (k % 3) * 0.6 ? 2 : 3;\n          const t = 0.88 + 0.14 * hash(k + 40, kind) + 0.06 * (hash(k + 40, floor(d * 2.5) + 99) - 0.5);\n          for (let c = 0; c \u003c 3; c++) a[c] += WOOD[kind][c] * t * (far ? 0.7 : 1) * lit * 0.5;\n          tone += t / 2;\n        }\n        // Ceiling lights mirrored in the oil.\n        const glare = far ? 0 : 70 * oil * (exp(-(((X - 9) / 3.5) ** 2)) + exp(-(((X + 9) / 3.5) ** 2))) * (0.5 + 0.5 * cos((2 * PI * d) / 15)) ** 2;\n        const u = (far ? 0.7 : 1) * (d \u003c 0 ? 0.8 : 1) * tone;\n        let f = [22 * u, 8 * u, 46 * u];\n        if (!far && d > 2 && d \u003c 55 && hash(x, y * 7 + 3) \u003c 0.014) f = hsv(hash(y, x), 0.7, 180);\n        put(x, y, a.map((v) => v + glare), f, far ? 0.4 : 1);\n      } else if (ax \u003c= 30 || ax > 34.5) {\n        const g = ((ax \u003c= 30 ? ax - 25.375 : ax - 39.125) / 4.625) ** 2, v = (0.4 + 0.6 * g) * lit;\n        put(x, y, [70 * v, 72 * v, 84 * v], g > 0.75 ? [30, 12, 80] : [8, 4, 22], 0.5);\n      } else put(x, y, [50 * lit, 38 * lit, 32 * lit], [10, 5, 20], 0);\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    const ax = abs((x - CX) / sc(0));\n    if (ax \u003c= 30 || ax > 34.5) put(x, round(rowOf(0)), [16, 16, 18], [255, 30, 90]);\n  }\n  // Foul line, arrows, dots, range finders and pin spots.\n  for (let b = 5; b \u003c= 35; b += 5) {\n    const dt = 16 - abs(20 - b) * 0.267, ty = round(rowOf(dt)), ax = round(CX + bx(b) * sc(dt));\n    for (let j = 0; j \u003c 4; j++) for (let i = -(j >> 1); i \u003c= j >> 1; i++) put(ax + i, ty + j, [96, 34, 22], [255, 120, 24]);\n  }\n  for (const b of DOTS) put(round(CX + bx(b) * sc(7)), round(rowOf(7)), [96, 40, 26], [80, 255, 110]);\n  for (const b of [...DOTS, 20]) put(round(CX + bx(b) * sc(-12)), round(rowOf(-12)), [90, 50, 30], [70, 220, 100]);\n  for (let y = round(rowOf(40)); y \u003c= round(rowOf(34)); y++) for (const b of [10, 30]) put(round(CX + bx(b) * sc(DR[y])), y, [100, 46, 30], [40, 190, 255]);\n  for (const [X, Z] of SPOT) put(round(CX + X * sc(60 + Z / 12)), round(rowOf(60 + Z / 12)), [70, 46, 30], [60, 40, 130]);\n}\n\nconst rack = (h) => SPOT.map(([X, Z]) => ({ X, Z, vx: 0, vz: 0, th: 0, om: 0, ph: 0, w: 0, h, vh: 0, st: h ? 4 : 0 }));\n\nexport function setup(params) {\n  paint(params);\n  Object.assign(params, {\n    buf: new Float32Array(N * 3),\n    tx: new Float32Array(H),\n    tt: new Float32Array(H).fill(-99),\n    t: 0, ph: 0, tm: 1.5, first: true, ball: 1, full: true, fl: 0, mark: 0, seg: -1, pins: rack(0), B: null,\n    ra: 0, ax: [-1, 0, 0], hs: 46, zs: -9, pt: 0, path: [0, 0, 0, 0, 40], bd: -13, bh: 0, bt: 0,\n    m: 1, hook: 0, oil: 46, Hh: 0.1, U: 1, c1: [0, 1, 1], c2: [0, 0, 1],\n  });\n}\n\nconst pathX = (P, d) => {\n  const [x0, xb, sb, a, db] = P.path;\n  return d \u003c db ? x0 + sb * d : xb + sb * (d - db) - (a * (d - db) ** 2) / 2;\n};\nconst pathS = (P, d) => (d \u003c P.path[4] ? P.path[2] : P.path[2] - P.path[3] * (d - P.path[4]));\n\n// Out toward the gutter until the oil thins, then the hook back. A spare ball\n// moves the whole line onto the standing pins.\nfunction throwBall(P) {\n  const h = P.hook, db = P.oil - 6, e = 60 - db;\n  let x60 = (h \u003c 0.55 ? 0.4 + (2.3 * h) / 0.55 : 2.7 - (4.7 * (h - 0.55)) / 0.45) + (rnd() - 0.5) * 1.6;\n  let x0 = 12 - 24 * h;\n  const xs = x0 + ((x60 - x0) * db) / 60;\n  let xb = xs + (16 - xs) * min(1, h * 1.4);\n  const line = () => {\n    const sb = (xb - x0) / db;\n    return [sb, ((xb + e * sb - x60) * 2) / (e * e)];\n  };\n  const up = P.pins.filter((p) => p.st === 0);\n  if (P.ball === 2 && up.length) {\n    const z = min(...up.map((p) => p.Z)), front = up.filter((p) => p.Z \u003c z + 11), [sb, a] = line();\n    const shift = front.reduce((s, p) => s + p.X, 0) / front.length - x60 - ((sb - a * e) * z) / 12 + (rnd() - 0.5) * 2;\n    x0 += shift;\n    xb += shift;\n    x60 += shift;\n  }\n  x0 = cl(x0, -17, 17);\n  xb = cl(xb, -17, 17);\n  P.path = [x0, xb, ...line(), db];\n  Object.assign(P, { ph: 1, bt: 0, bd: -13, ra: 0 });\n  const b = 0.9 * h;\n  const k = [-cos(b), 0.3 * sin(b), sin(b)];\n  P.ax = k.map((v) => v / hypot(...k));\n}\n\n// The swing brings the ball in from below the panel, then it rolls.\nfunction roll(P, h) {\n  P.bt += h;\n  const y0 = rowOf(P.bd), v = 25 - 0.07 * P.bd;\n  if (P.bt \u003c 0.45) {\n    P.bd = -13 + 30 * P.bt;\n    P.bh = 10 * (1 - P.bt / 0.45) ** 2;\n  } else {\n    P.bd += v * h;\n    P.bh = 0;\n    P.ra += v * 0.36 * h;\n  }\n  const d = P.bd, x = CX + pathX(P, max(0, d)) * sc(d);\n  for (let y = max(0, round(rowOf(d))); y \u003c= round(y0) && y \u003c H; y++) {\n    P.tx[y] = x;\n    P.tt[y] = P.t;\n  }\n  if (d >= 58.6) {\n    P.B = { X: pathX(P, d), Z: (d - 60) * 12, vx: pathS(P, d) * v, vz: 12 * v, h: 0, vh: 0, st: -1 };\n    P.ph = 2;\n    P.pt = 0;\n  }\n}\n\nfunction pts(p) {\n  if (p.th \u003c 0.35) return [[p.X, p.Z, 0.5]];\n  const L = 15 * sin(p.th);\n  return [0.12, 0.5, 0.88].map((f) => [p.X + cos(p.ph) * L * f, p.Z + sin(p.ph) * L * f, f]);\n}\n\nfunction kick(p, dvx, dvz, f) {\n  p.vx += dvx;\n  p.vz += dvz;\n  if (p.st \u003c 0) return;\n  const dv = sqrt(dvx * dvx + dvz * dvz);\n  if (p.st === 0) {\n    if (p.th \u003c 0.05) p.ph = atan2(dvz, dvx);\n    p.om += dv / 7;\n    if (dv > 130) Object.assign(p, { vh: dv * 0.28, om: dv / 7 + 5, st: 1, th: max(p.th, 0.05) });\n  } else p.w += (15 * sin(p.th) * (f - 0.5) * (cos(p.ph) * dvz - sin(p.ph) * dvx)) / 70;\n}\n\n// Ball and pins are discs on the deck; pins rock, topple past 11 degrees, fly\n// when hit hard and spin off the kickbacks.\nfunction collide(P) {\n  const bodies = [];\n  if (P.B && P.B.h > -3) bodies.push([P.B, 15, 4.3, [[P.B.X, P.B.Z, 0.5]]]);\n  for (const p of P.pins) if (p.st \u003c 2 && p.h \u003c 14) bodies.push([p, 3.5, 2.4, pts(p)]);\n  for (let i = 0; i \u003c bodies.length; i++) {\n    const [a, ma, ra, pa] = bodies[i];\n    for (const [qx] of pa) {\n      const sg = sign(qx), lim = 30.5 - ra;\n      if (abs(qx) > lim) {\n        a.X -= qx - sg * lim;\n        if (a.vx * sg > 0) a.vx *= -0.5;\n      }\n    }\n    for (let j = i + 1; j \u003c bodies.length; j++) {\n      const [b, mb, rb, pb] = bodies[j];\n      const R = ra + rb, ia = 1 / ma, ib = 1 / mb;\n      for (const qa of pa)\n        for (const qb of pb) {\n          const dx = qb[0] - qa[0], dz = qb[1] - qa[1], dd = dx * dx + dz * dz;\n          if (dd >= R * R || dd \u003c 1e-6) continue;\n          const D = sqrt(dd), nx = dx / D, nz = dz / D, pen = (R - D) / (ia + ib);\n          a.X -= nx * pen * ia;\n          a.Z -= nz * pen * ia;\n          b.X += nx * pen * ib;\n          b.Z += nz * pen * ib;\n          const vn = (b.vx - a.vx) * nx + (b.vz - a.vz) * nz;\n          if (vn >= 0) continue;\n          const J = (-1.5 * vn) / (ia + ib);\n          kick(a, -J * nx * ia, -J * nz * ia, qa[2]);\n          kick(b, J * nx * ib, J * nz * ib, qb[2]);\n        }\n    }\n  }\n}\n\nfunction move(P, dt) {\n  const B = P.B;\n  if (B) {\n    B.X += B.vx * dt;\n    B.Z += B.vz * dt;\n    P.ra += B.vz * 0.03 * dt;\n    if (B.Z > 34.2) {\n      B.vh -= 386 * dt;\n      B.h += B.vh * dt;\n      if (B.Z > 44) B.vz = 0;\n    }\n  }\n  for (const p of P.pins) {\n    if (p.st >= 3) continue;\n    if (p.st === 2 || p.h > 0 || p.vh > 0) {\n      p.vh -= 386 * dt;\n      p.h += p.vh * dt;\n      p.th += p.om * dt;\n      if (p.st === 2) {\n        if (p.Z > 46) p.vz = 0;\n        if (p.h \u003c -40) p.st = 3;\n      } else if (p.h \u003c= 0) {\n        if (sin(p.th) \u003c 0) p.ph += PI;\n        Object.assign(p, { h: 0, vh: p.vh \u003c -80 ? -p.vh * 0.3 : 0, th: PI / 2, om: 0, st: 1 });\n      }\n    } else if (p.st === 0) {\n      if (p.th > 0 || p.om > 0) {\n        p.om += 60 * sin(p.th - 0.2) * dt;\n        p.th += p.om * dt;\n        if (p.th \u003c 0) {\n          p.th = -p.th;\n          p.om *= -0.4;\n          p.ph += PI;\n          if (abs(p.om) \u003c 0.3) p.th = p.om = 0;\n        }\n        if (p.th > 0.2) p.st = 1;\n      }\n    } else if (p.th \u003c PI / 2) {\n      p.om += 64 * sin(p.th) * dt;\n      p.th += p.om * dt;\n      if (p.th >= PI / 2) {\n        p.th = PI / 2;\n        p.om = 0;\n      }\n    }\n    if (p.st \u003c 2 && p.h \u003c= 0) {\n      const v = hypot(p.vx, p.vz), dec = (p.st ? 110 : 400) * dt, k = v > dec ? (v - dec) / v : 0;\n      p.vx *= k;\n      p.vz *= k;\n      p.w *= exp(-2.5 * dt);\n    }\n    p.X += p.vx * dt;\n    p.Z += p.vz * dt;\n    p.ph += p.w * dt;\n    if (p.st \u003c 2 && p.h \u003c 8 && p.Z + 7.5 * sin(p.th) * sin(p.ph) > 34.2) p.st = 2;\n  }\n}\n\nfunction physics(P, h) {\n  for (let s = 0, n = ceil(h / 0.004); s \u003c n; s++) {\n    move(P, h / n);\n    collide(P);\n  }\n}\n\nfunction endPins(P) {\n  const up = P.pins.filter((p) => p.st === 0).length;\n  if (!up) {\n    P.fl = P.ball === 1 ? 1 : 0.8;\n    P.mark = P.ball;\n  }\n  Object.assign(P, { full: !up || P.ball === 2, ph: 3, tm: 0, seg: -1, B: null });\n}\n\n// Sweep drops, table lifts standing pins, sweep rakes the deadwood into the\n// pit and returns, table sets the pins or a new rack, sweep lifts.\nfunction sweep(P, h) {\n  let u = (P.tm += h), k = 0;\n  while (k \u003c 6 && u > SEG[k]) u -= SEG[k++];\n  if (k >= 6) return Object.assign(P, { ph: 0, tm: 0.7, ball: P.full ? 1 : 2, hs: 46 });\n  const e = sm(0, 1, u / SEG[k]);\n  if (k !== P.seg) {\n    P.seg = k;\n    if (k === 4 && P.full) P.pins = rack(46);\n    if (k === 5) for (const p of P.pins) if (p.st === 4) p.st = p.h = 0;\n  }\n  if (k === 0) P.hs = 46 - 45 * e;\n  else if (k === 1) {\n    if (!P.full) for (const p of P.pins) if (p.st === 0 || p.st === 4) Object.assign(p, { st: 4, h: 46 * e, th: 0, om: 0, vx: 0, vz: 0 });\n  } else if (k === 2) {\n    P.zs = -9 + 47 * e;\n    for (const p of P.pins)\n      if (p.st \u003c 2 && p.h \u003c 12 && p.Z \u003c P.zs + 3) {\n        p.Z = P.zs + 3;\n        p.vz = max(p.vz, 0);\n        if (p.st === 0) Object.assign(p, { st: 1, th: 1.3, ph: PI / 2 });\n      }\n  } else if (k === 3) P.zs = 38 - 47 * e;\n  else if (k === 4) {\n    for (const p of P.pins) if (p.st === 4) p.h = 46 * (1 - e);\n  } else P.hs = 1 + 45 * e;\n}\n\nfunction throwNow(P) {\n  if (P.ph === 1) return;\n  if (P.ph >= 2) {\n    if (P.ph === 2) endPins(P);\n    P.pins = P.full ? rack(0) : P.pins.filter((p) => p.st === 0 || p.st === 4).map((p) => Object.assign(p, { st: 0, h: 0, th: 0, om: 0 }));\n    Object.assign(P, { ball: P.full ? 1 : 2, hs: 46, B: null });\n  }\n  throwBall(P);\n}\n\nfunction step(P, h) {\n  P.t += h;\n  P.fl = max(0, P.fl - h * 0.5);\n  let ph = h;\n  if (P.ph === 0) {\n    // The first ball goes at 1.5 s at any speed.\n    if ((P.tm -= P.first ? h / P.m : h) \u003c= 0) {\n      P.first = false;\n      throwBall(P);\n    }\n  } else if (P.ph === 1) roll(P, h);\n  else if (P.ph === 2) {\n    // Pin action in slow motion at first.\n    ph = h * (0.45 + 0.55 * sm(0.5, 1, P.pt));\n    P.pt += ph;\n    if (P.pt > 1.6) endPins(P);\n  } else sweep(P, h);\n  physics(P, ph);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.c1 = hsv(0.52 + k[0], 0.9, 1);\n  P.c2 = hsv(0.66 + k[0], 0.7, 1);\n  P.m = cl(k[1], 0.2, 3) / 2;\n  P.hook = cl(k[2], 0, 1);\n  P.oil = 46 - 16 * P.hook;\n  const L = cl(k[3], 0, 1);\n  P.Hh = 0.1 + 0.9 * L * L;\n  P.U = 1 - L;\n  if (input.btnPressed && input.btnPressed[0]) throwNow(P);\n  step(P, cl(dt, 0, 0.1) * P.m);\n}\n\nfunction add(buf, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) buf[o + i] += c[i] * v;\n}\nfunction blend(buf, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c MB || y >= H) return;\n  const o = (y * W + x) * 3;\n  [r, g, b].forEach((v, i) => (buf[o + i] += (v - buf[o + i]) * a));\n}\n\n// Capping lights that chase, follow the ball and light the gutters, and the\n// projected trail.\nfunction lights(P) {\n  const { buf, c1, t, U, fl, tx, tt } = P;\n  const db = P.ph === 1 ? P.bd : P.ph === 2 ? 70 : -99;\n  for (let y = round(rowOf(57)); y \u003c H; y++) {\n    const d = DR[y], s = sc(d);\n    let v = 0.16 + 0.34 * max(0, sin(2 * PI * (d / 9 - t * 0.55))) ** 6;\n    if (db > -50) v += d \u003c db ? 0.9 * exp((d - db) / 7) : exp(-(d - db) * 1.5);\n    v = (v + fl * (0.5 + 0.5 * sin(d * 0.7 - t * 14))) * 200 * (0.45 + 0.55 * U);\n    for (const sg of [-1, 1]) {\n      const xs = CX + sg * 32.25 * s, x = floor(xs), f = xs - x;\n      [0.2, 1 - f * 0.8, 0.2 + f * 0.8, 0.2].forEach((k, i) => add(buf, x + i - 1, y, c1, v * k));\n      if (d > 0) for (let X = 21; X \u003c 30; X += 1 / s) add(buf, round(CX + sg * X * s), y, c1, v * 0.4 * ((X - 20.75) / 9.25) ** 1.5);\n    }\n    const age = t - tt[y];\n    if (age \u003c 4) {\n      const I = min(1, age * 8) * exp(-age / 1.2) * 140 * U, w = 4.3 * s + 0.8;\n      for (let x = max(0, floor(tx[y] - w)); x \u003c= min(W - 1, tx[y] + w); x++) {\n        const f = 1 - ((x - tx[y]) / w) ** 2;\n        if (f > 0) add(buf, x, y, c1, I * f);\n      }\n    }\n  }\n}\n\n// Marbled shell and holes turning with the roll.\nfunction drawBall(P, cx, cy, r, alpha, mirror, clip) {\n  const { buf, c1, c2, Hh, U } = P;\n  const [k0, k1, k2] = P.ax, ca = cos(P.ra), sa = sin(P.ra);\n  for (let y = floor(cy - r - 1); y \u003c= cy + r + 1 && y \u003c clip; y++)\n    for (let x = floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n      const u = (x - cx) / r, v = (y - cy) / r, q = u * u + v * v;\n      const cov = cl((1 - sqrt(q)) * r + 0.5, 0, 1);\n      if (cov \u003c= 0) continue;\n      const nz = sqrt(max(0, 1 - q)), ny = mirror ? v : -v;\n      const kd = (k0 * u + k1 * ny + k2 * nz) * (1 - ca);\n      const X = u * ca + (k1 * nz - k2 * ny) * sa + k0 * kd;\n      const Y = ny * ca + (k2 * u - k0 * nz) * sa + k1 * kd;\n      const Z = nz * ca + (k0 * ny - k1 * u) * sa + k2 * kd;\n      const sw = (0.5 + 0.5 * sin(3.2 * X + 2.4 * sin(2.6 * Y + 1.8 * Z) + 2 * Z * X)) ** 2;\n      let hole = 1;\n      for (const [hx, hy, hz] of HOLES) if (hx * X + hy * Y + hz * Z > 0.972) hole = 0.12;\n      const lit = (0.25 + 0.75 * max(0, -0.35 * u + 0.6 * ny + 0.72 * nz)) * Hh * 1.15 + U * (0.45 + 0.6 * nz);\n      const sp = mirror ? 0 : 230 * Hh * max(0, -0.2 * u + 0.5 * ny + 0.84 * nz) ** 24;\n      const col = [0, 1, 2].map((c) => (c1[c] * (1 - sw) * 0.9 + c2[c] * sw) * 255 * lit * hole + sp);\n      blend(buf, x, y, col[0], col[1], col[2], cov * (mirror ? alpha * max(0, 1 - (y - cy + r) / (2 * r)) : alpha));\n    }\n}\n\n// A pin's profile swept from base to crown, tilted by th toward ph.\nfunction drawPin(P, p) {\n  const { buf, Hh, U } = P;\n  const [x0, y0, s] = proj(p.X, 60 + p.Z / 12, p.h - (abs(p.X) > 21 && p.st === 1 ? 2.5 : 0));\n  const hx = cos(p.ph) * 15 * sin(p.th) * s;\n  const hy = (-sin(p.ph) * 15 * sin(p.th) * RD) / 12 - 15 * cos(p.th) * 0.85 * s;\n  const L2 = hx * hx + hy * hy, clip = p.Z > 34.2 ? PIT : H;\n  for (let y = floor(min(y0, y0 + hy) - 3); y \u003c= max(y0, y0 + hy) + 3 && y \u003c clip; y++)\n    for (let x = floor(min(x0, x0 + hx) - 3); x \u003c= max(x0, x0 + hx) + 3; x++) {\n      const px = x - x0, py = y - y0;\n      const t = L2 > 0.01 ? cl((px * hx + py * hy) / L2, 0, 1) : 0;\n      const ex = px - t * hx, ey = py - t * hy, f = t * 9, i = min(8, f | 0);\n      const rw = (PROF[i] + (PROF[i + 1] - PROF[i]) * (f - i)) * s;\n      const cov = cl(rw - sqrt(ex * ex + ey * ey) + 0.5, 0, 1);\n      if (cov \u003c= 0) continue;\n      const lit = (0.82 - (0.18 * ex) / (rw + 0.3)) * Hh;\n      if (t > 0.6 && t \u003c 0.73) blend(buf, x, y, 215 * Hh + 255 * U, 30 * Hh + 40 * U, 40 * Hh + 150 * U, cov);\n      else blend(buf, x, y, 240 * lit + 180 * U, 240 * lit + 192 * U, 234 * lit + 255 * U, cov);\n    }\n}\n\nfunction drawSweep(P) {\n  const { buf, Hh, U, hs, zs } = P;\n  const [xl, yb, s] = proj(-31, 60 + zs / 12, hs);\n  const th = 3.4 * s;\n  for (let y = floor(yb - th); y \u003c= yb; y++)\n    for (let x = round(xl); x \u003c= round(2 * CX - xl); x++) {\n      const top = y \u003c yb - th + 1 ? 60 : 0;\n      const hz = ((x + 64) >> 1) % 3 === 0;\n      blend(buf, x, y, (140 + top) * Hh + (hz ? 255 : 40) * U, (142 + top) * Hh + (hz ? 210 : 20) * U, (152 + top) * Hh + (hz ? 40 : 70) * U, 1);\n    }\n  for (const x of [round(CX - 29.5 * s), round(CX + 29.5 * s)]) for (let y = MB; y \u003c yb - th; y++) blend(buf, x, y, 80 * Hh + 50 * U, 80 * Hh + 30 * U, 92 * Hh + 120 * U, 1);\n}\n\n// The masking unit, with the blacklight tube along its lip.\nfunction hood(P) {\n  const { buf, Hh, U, c1, c2, fl, t } = P;\n  for (let y = 0; y \u003c MB; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, wy = 4.4 + 2.4 * sin(x * 0.11 + 0.8), b1 = max(0, 1 - abs(y - wy));\n      const b2 = max(0, 1 - abs(y - wy - 2.5) * 1.3) * sm(4, 14, x), pulse = 0.55 + 0.45 * sin(x * 0.35 - t * 5);\n      const tw = hash(x, y) \u003c 0.07 ? (0.5 + 0.5 * sin(t * 4 + hash(y, x) * 40)) * 150 * U : 0;\n      const fx = fl > 0 ? hsv(x / 40 - t * 2, 1, fl * 200) : [0, 0, 0];\n      for (let c = 0; c \u003c 3; c++)\n        buf[o + c] =\n          y === MB - 1\n            ? 150 * Hh + [110, 50, 255][c] * U\n            : [20, 30, 88][c] * Hh * (0.85 + y * 0.03) + [12, 4, 30][c] * U + b1 * ([190, 220, 255][c] * Hh + c1[c] * 255 * U * pulse) + b2 * ([255, 140, 40][c] * Hh + c2[c] * 230 * U) + tw + fx[c];\n    }\n  // X for a strike, a slash for a spare.\n  if (fl > 0.05)\n    for (let j = -3; j \u003c= 3; j++)\n      for (const i of P.mark === 1 ? [j, -j] : [-j]) {\n        const o = ((5 + j) * W + 32 + i) * 3;\n        for (let c = 0; c \u003c 3; c++) buf[o + c] = 255 * min(1, fl * 2);\n      }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, A, F, WM, Hh, U, c1 } = P;\n  // The lane lights wash the boards in slow waves; the oil glows.\n  for (let y = MB; y \u003c H; y++) {\n    const d = DR[y], s = sc(d), wave = 16 + 9 * sin(2 * PI * (d / 14 - P.t * 0.5));\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, o = i * 3, wm = WM[i] * wave * U;\n      const ax = abs(x - CX) / s;\n      const oil = WM[i] === 1 && d > 0 ? sm(P.oil + 3, P.oil - 4, d + ax * 0.2) * (64 - ax * ax * 0.08) * U : 0;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = A[o + c] * Hh + F[o + c] * U + c1[c] * wm + oil * OILC[c];\n    }\n  }\n  lights(P);\n  let ball = null;\n  if (P.ph === 1) ball = [pathX(P, max(0, P.bd)), P.bd, P.bh, H];\n  else if (P.B && P.B.h > -14) ball = [P.B.X, 60 + P.B.Z / 12, P.B.h, P.B.Z > 34.2 ? PIT : H];\n  let bs = null;\n  if (ball) {\n    const [x, d, h, clip] = ball;\n    const [cx, cy, s] = proj(x, d, 4.3 + h), fy = rowOf(d), r = 4.3 * s, R = r * 3.4;\n    bs = [cx, cy, r, clip, d];\n    // Halo, shadow, reflection.\n    for (let y = floor(cy - R); y \u003c= cy + R && y \u003c clip; y++)\n      for (let x2 = floor(cx - R); x2 \u003c= cx + R; x2++) {\n        const q = 1 - hypot(x2 - cx, (y - cy) * 1.2) / R;\n        if (q > 0) add(buf, x2, y, c1, q * q * 110 * U);\n        const e = ((x2 - cx) / (r * 1.1)) ** 2 + ((y - fy) / (r * 0.45)) ** 2;\n        if (e \u003c 1 && clip === H && y >= MB && y \u003c H && x2 >= 0 && x2 \u003c W)\n          for (let c = 0; c \u003c 3; c++) buf[(y * W + x2) * 3 + c] *= 1 - 0.55 * Hh * (1 - e) * exp(-h / 6);\n      }\n    if (d > 0 && d \u003c P.oil + 2) drawBall(P, cx, 2 * fy - cy + h * 1.7 * s, r, 0.15 + 0.4 * sm(P.oil + 2, P.oil - 8, d), true, H);\n  }\n  // Deck objects far to near.\n  const items = P.pins.filter((p) => p.st \u003c 3).map((p) => [p.Z + (p.st === 1 ? 7 * sin(p.ph) : 0), p]);\n  if (P.hs \u003c 45) items.push([P.zs - 0.5, 0]);\n  if (bs && bs[4] > 57) items.push([(bs[4] - 60) * 12, 1]);\n  items.sort((a, b) => b[0] - a[0]);\n  for (const [, it] of items) {\n    if (it === 0) drawSweep(P);\n    else if (it === 1) drawBall(P, bs[0], bs[1], bs[2], 1, false, bs[3]);\n    else drawPin(P, it);\n  }\n  if (bs && bs[4] \u003c= 57) drawBall(P, bs[0], bs[1], bs[2], 1, false, bs[3]);\n  hood(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Ball=0..1, Speed=0.2..3, Hook=0..1, Lights=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Ball","min":0,"max":1,"about":"The colour of the ball, which the lane lights and the projected trail follow: cyan at 0, round through blue, pink, red, orange and green."},{"name":"Speed","min":0.2,"max":3,"about":"How fast everything goes: at 2 the ball takes about 2.5 s from the foul line to the pins."},{"name":"Hook","min":0,"max":1,"about":"How far the oil runs and how much the ball curves: at 0 the oil runs 46 ft and a straight ball hits the head pin on the nose and leaves pins. Near 0.6 it hooks into the pocket and strikes; at 1 the oil stops at 30 ft and it crosses to the Brooklyn side."},{"name":"Lights","min":0,"max":1,"about":"Cosmic bowling at 0, the pins, arrows and oil glowing under blacklight, up to the full house lights on the wood at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.1625,"detail":0.0689,"edges":0.5323,"complexity":1.7471,"coverage":0.9404,"colour":0.2104,"drift":0.042},"knobResponse":[0.0566,0.0281,0.0252,0.2377]},{"slug":"bread-mould","title":"Bread Mould","family":"fungi","round":21,"note":"도마 위 식빵 두 쪽이 곰팡이로 덮여 가는 저속 촬영이에요. 내려앉은 포자에서 흰 테를 두른 푸른곰팡이와 검은 털곰팡이가 고리를 그리며 번지고, 다 덮이면 새 두 쪽이 옆에서 밀려 들어와요.","idea":"A time-lapse of two slices of bread on a board under the kitchen lamp: spores drift down and land, colonies spread in fuzzy rings, white at the rim and blue-green, black or orange behind it, until the slices are overrun and a fresh pair slides in from the side.","buttons":"K1 tap slides a fresh pair of slices in now.","code":"// ===== Patternflow pattern =====\n// Title:   Bread Mould\n// Family:  fungi\n// Idea:    A time-lapse of two slices of bread on a board under the kitchen lamp: spores drift down and land, colonies spread in fuzzy rings, white at the rim and blue-green, black or orange behind it, until the slices are overrun and a fresh pair slides in from the side.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after time-lapse films of mould on bread left in a bread bin\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Mould=0..3, Speed=0.2..3, Spores=4..40, Damp=0..1\n//\n// Knob 1: Mould. What the air carries: the bread bin at 0 (blue-green Penicillium, black pin mould and the odd pink yeast), black bread mould at 1 (grey Rhizopus cotton and Aspergillus niger), green-gold Aspergillus and olive Cladosporium at 2, orange Neurospora with pink yeast and blood-red Serratia at 3.\n// Knob 2: Speed. How fast the time-lapse runs: at 2 a pair of slices goes from the first spore to overrun in about fifteen seconds; at 0.2 the colonies creep.\n// Knob 3: Spores. How many colonies start on each slice: four that grow into wide ringed discs at 4, up to forty small ones that close up fast at 40.\n// Knob 4: Damp. A dry kitchen near 0, with compact velvety colonies and thin white rims; turned up, the bread greys, the mould grows faster under a long white cotton and beads of liquid stand on the older colonies.\n// Buttons: K1 tap slides a fresh pair of slices in now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Each slice lives in its own 62x62 box; the pair sits one above the other.\nconst SW = 62;\nconst SH = 62;\nconst SN = SW * SH;\nconst BX = 1;\nconst BY = [1, 65];\n// Slice time a pair stays overrun before it goes, how long after the Lab\n// opens the first pair goes, and how many seconds a swap takes.\nconst HOLD = 1.2;\nconst LEAD = 2.4;\nconst SLIDE = 0.9;\nconst { min, max, floor, round, sin, cos, sqrt, atan2, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// A warm bulb overhead.\nconst TINT = [1, 0.95, 0.86];\nconst WHITE = [236, 238, 230];\n// Each mould: how fast its front runs (LED a second of slice time), how far\n// its loose hyphae reach ahead of it (s), how long it stays white, the\n// colour it sporulates to and the colour it ages to, how deep its growth\n// rings are, how thick its pin heads come and in what colour, and whether it\n// is a smooth wet patch instead of a felt.\nconst MOULDS = [\n  // Penicillium: velvety blue-green in growth rings behind a white margin.\n  { v: 3.2, fz: 0.35, wh: 0.75, c1: [72, 156, 148], c2: [34, 88, 86], ring: 0.22, pin: 0, pc: null, gl: 0 },\n  // Rhizopus, the black bread mould: grey cotton that runs, then black pin heads.\n  { v: 4.2, fz: 0.9, wh: 1.2, c1: [184, 184, 176], c2: [128, 126, 120], ring: 0.04, pin: 0.3, pc: [20, 18, 24], gl: 0 },\n  // Cladosporium: slow and compact, olive-black velvet with hardly a margin.\n  { v: 1.8, fz: 0.15, wh: 0.2, c1: [76, 92, 58], c2: [34, 42, 30], ring: 0.12, pin: 0, pc: null, gl: 0 },\n  // Aspergillus niger: a yellowish felt that fills with black heads.\n  { v: 2.8, fz: 0.3, wh: 0.5, c1: [206, 192, 124], c2: [70, 62, 52], ring: 0.06, pin: 0.75, pc: [30, 26, 24], gl: 0 },\n  // Aspergillus flavus: yellow-green powder.\n  { v: 2.9, fz: 0.3, wh: 0.6, c1: [178, 190, 70], c2: [112, 128, 46], ring: 0.18, pin: 0, pc: null, gl: 0 },\n  // Neurospora, the orange bread mould: the fastest, a loose orange fleece.\n  { v: 6, fz: 1, wh: 0.5, c1: [252, 170, 80], c2: [230, 122, 52], ring: 0.05, pin: 0, pc: null, gl: 0 },\n  // A pink yeast: slow, smooth and wet.\n  { v: 1.3, fz: 0, wh: 0, c1: [238, 140, 156], c2: [214, 102, 124], ring: 0, pin: 0, pc: null, gl: 1 },\n  // Serratia, the bacterium that makes bread look as if it bleeds.\n  { v: 1.1, fz: 0, wh: 0, c1: [214, 52, 66], c2: [160, 30, 48], ring: 0, pin: 0, pc: null, gl: 1 },\n];\n// What the air carries at each whole turn of K1.\nconst MIX = [\n  [0.62, 0.24, 0.08, 0, 0, 0, 0.06, 0],\n  [0.14, 0.5, 0.08, 0.28, 0, 0, 0, 0],\n  [0.24, 0.06, 0.22, 0, 0.48, 0, 0, 0],\n  [0.06, 0.1, 0, 0, 0, 0.44, 0.24, 0.16],\n];\nfunction pick(k1, u) {\n  const i = min(2, floor(k1)), f = k1 - i, A = MIX[i], B = MIX[i + 1];\n  for (let t = 0, acc = 0; t \u003c A.length; t++) if ((acc += mix(A[t], B[t], f)) > u) return t;\n  return 0;\n}\n\n// The board: long-grain wood under the lamp, scored by old knife cuts.\nfunction board(P) {\n  const bg = (P.bg = new Float32Array(N * 3)), lamp = (P.lamp = new Float32Array(N)), WOOD = [128, 84, 48];\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, L = (lamp[p] = 0.8 + 0.26 * exp(-((x - 25) ** 2 + ((y - 56) * 0.5) ** 2) / 900));\n    const w = x + 4 * vn(x * 0.05 + 7, y * 0.02), n = vn(w * 0.7, y * 0.03), ln = vn(w * 1.9 + 50, y * 0.012);\n    const k = (0.72 + 0.32 * n - max(0, ln - 0.7) * 1.4) * L;\n    for (let c = 0; c \u003c 3; c++) bg[p * 3 + c] = (WOOD[c] + (hash(p, c + 9) - 0.5) * 6) * k * TINT[c];\n  }\n  for (let i = 0; i \u003c 14; i++) {\n    const a = (rnd() - 0.5) * 1.2 + (rnd() \u003c 0.5 ? 0 : PI), len = 4 + rnd() * 10;\n    for (let s = 0, x = rnd() * W, y = rnd() * H; s \u003c len; s++, x += cos(a), y += sin(a) * 0.5) {\n      const xi = round(x), yi = round(y);\n      if (xi >= 0 && xi \u003c W && yi >= 0 && yi \u003c H) for (let c = 0; c \u003c 3; c++) bg[(yi * W + xi) * 3 + c] *= 0.8;\n    }\n  }\n}\n\n// A pan loaf slice: a square body under a domed top that overhangs it at the\n// shoulders, a crust two LEDs deep and baked darker over the dome, the crumb\n// full of holes.\nconst CRUMB = [242, 226, 188];\nconst DENSE = [222, 186, 128];\nconst CR_OUT = [100, 54, 26];\nconst CR_IN = [194, 134, 70];\nfunction slice() {\n  const S = { mask: new Uint8Array(SN), D: new Float32Array(SN), alb: new Float32Array(SN * 3), gr: new Float32Array(SN * 3), hs: new Float32Array(SN), hp: new Float32Array(SN), nz: new Float32Array(SN), T: new Float32Array(SN), own: new Uint8Array(SN), seam: new Uint8Array(SN), sp: [], col: [] };\n  const { mask, D, alb, gr, hs, hp, nz } = S, top = new Uint8Array(SN);\n  const so = floor(rnd() * 99999), flip = rnd() \u003c 0.35, lean = (rnd() - 0.5) * 5, sc = 0.96 + rnd() * 0.04, shy = 17 + rnd() * 5;\n  for (let q = 0; q \u003c SN; q++) {\n    const x = q % SW, y = (q / SW) | 0;\n    let py = (y + 0.5 - 31) / sc + 31, px = (x + 0.5 - 31) / sc, hw = 0;\n    if (flip) py = 62 - py;\n    if (py \u003c shy) px -= lean * (1 - py / shy);\n    if (py > 1 && py \u003c 61) {\n      hw = py \u003c shy ? 30.5 * (1 - ((shy - py) / (shy - 1)) ** 2.2) ** (1 / 2.2) : py \u003c shy + 5 ? 28.5 + 2 * cos(((py - shy) / 5) * PI * 0.5) : 28.5;\n      if (py > 56) hw -= 5 - sqrt(max(0, 25 - (py - 56) ** 2));\n    }\n    mask[q] = abs(px) \u003c hw ? 1 : 0;\n    top[q] = py \u003c shy + 2;\n    D[q] = mask[q] ? 99 : 0;\n  }\n  // Distance in from the edge, two chamfer passes.\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= SW || y >= SH ? 0 : D[y * SW + x]);\n  for (let y = 0; y \u003c SH; y++)\n    for (let x = 0, q = y * SW; x \u003c SW; x++, q++) if (mask[q]) D[q] = min(D[q], at(x - 1, y) + 1, at(x, y - 1) + 1, at(x - 1, y - 1) + 1.41, at(x + 1, y - 1) + 1.41);\n  for (let y = SH - 1; y >= 0; y--)\n    for (let x = SW - 1, q = y * SW + x; x >= 0; x--, q--) if (mask[q]) D[q] = min(D[q], at(x + 1, y) + 1, at(x, y + 1) + 1, at(x + 1, y + 1) + 1.41, at(x - 1, y + 1) + 1.41);\n  for (let q = 0; q \u003c SN; q++) {\n    if (!mask[q]) continue;\n    const x = q % SW, y = (q / SW) | 0, d = D[q], crust = d \u003c 2.5;\n    const t = crust ? cl((d - 1) / 1.4, 0, 1) : cl((d - 2.5) / 5, 0, 1), k = crust ? (0.82 + 0.32 * vn(x * 0.4 + so, y * 0.4)) * (top[q] ? 0.84 : 1) : 0.92 + 0.12 * vn(x * 0.3 + so, y * 0.16);\n    for (let c = 0; c \u003c 3; c++) {\n      alb[q * 3 + c] = (crust ? mix(CR_OUT[c], CR_IN[c], t) : mix(DENSE[c], CRUMB[c], t)) * k + (hash(q + so, c) - 0.5) * 12;\n      gr[q * 3 + c] = hash(q + so, c + 3) * 2 - 1;\n    }\n    hs[q] = hash(q + so, 7);\n    // Pin heads come in clumps.\n    hp[q] = hash(q + so, 8) * (0.5 + vn(x * 0.25 + so, y * 0.25 + 9));\n    // Ragged fronts: a colony reaches some crumb a little sooner than others.\n    nz[q] = (vn(x * 0.3 + so, y * 0.3) - 0.5) * 0.6 + (hash(q + so, 6) - 0.5) * 0.25;\n  }\n  // The holes of the crumb, drawn a little tall the way the dough rose. The\n  // lamp is up and to the left, so the far wall of a hole catches it.\n  for (let i = 0; i \u003c 120; i++) {\n    const rx = 0.5 + 1.7 * rnd() ** 3, ry = rx * (1.05 + 0.6 * rnd()), cx = 4 + rnd() * 54, cy = 4 + rnd() * 54, dp = 0.14 + 0.2 * cl((rx - 0.5) / 1.5, 0, 1);\n    for (let y = floor(cy - ry - 1); y \u003c= cy + ry + 1; y++)\n      for (let x = floor(cx - rx - 1); x \u003c= cx + rx + 1; x++) {\n        const q = y * SW + x;\n        if (x \u003c 0 || y \u003c 0 || x >= SW || y >= SH || D[q] \u003c 3.4) continue;\n        const dx = (x + 0.5 - cx) / rx, dy = (y + 0.5 - cy) / ry, r2 = dx * dx + dy * dy;\n        const f = r2 \u003c 1 ? 1 - dp * (1 - 0.45 * cl((dx + dy) * 0.8, -1, 1)) * (1 - 0.4 * r2) : r2 \u003c 2 && dx + dy \u003c -0.6 ? 1 + dp * 0.3 : 1;\n        alb[q * 3] *= f;\n        alb[q * 3 + 1] *= f;\n        alb[q * 3 + 2] *= f;\n      }\n  }\n  // Forty landing places, each one as far from the others as twelve tries\n  // can find, so the first few cover the slice whatever K3 asks for. Landing\n  // times and kinds are spread the same way.\n  const r0 = rnd(), r1 = rnd();\n  for (let i = 0; i \u003c 40; i++) {\n    let bx = 0, by = 0, bd = -1;\n    for (let c = 0; c \u003c 12; c++) {\n      let q = 0;\n      do q = floor(rnd() * SN);\n      while (D[q] \u003c 2.5);\n      const x = (q % SW) + rnd(), y = floor(q / SW) + rnd();\n      let md = 1e9;\n      for (const s of S.sp) md = min(md, (s.x - x) ** 2 + (s.y - y) ** 2);\n      if (md > bd) (bd = md), (bx = x), (by = y);\n    }\n    S.sp.push({ x: bx, y: by, u: (r1 + i * 0.618034) % 1, t0: 0.2 + 2.8 * ((r0 + i * 0.381966) % 1), a: rnd() * 7, b: rnd() * 7, c: rnd() * 7, dx: rnd() - 0.5 });\n  }\n  return S;\n}\n\n// When each LED of a slice is reached: the first colony to get there owns it.\n// Fronts are lobed, crust is slow ground, and the result is fixed, so a\n// frame only reads it against the slice's age.\nfunction grow(P, S) {\n  const { T, own, mask, D, sp, seam, nz } = S, col = (S.col = []);\n  T.fill(1e9);\n  for (let i = 0; i \u003c P.nsp; i++) {\n    const s = sp[i], M = MOULDS[pick(P.k1, s.u)], iv = 1 / (M.v * P.vk);\n    col.push({ M, t0: s.t0 });\n    for (let q = 0; q \u003c SN; q++) {\n      if (!mask[q]) continue;\n      const dx = (q % SW) + 0.5 - s.x, dy = ((q / SW) | 0) + 0.5 - s.y, d = sqrt(dx * dx + dy * dy);\n      if (s.t0 + d * 0.86 * iv >= T[q]) continue;\n      const a = atan2(dy, dx), t = s.t0 + d * iv * (1 + 0.05 * sin(2 * a + s.a) + 0.05 * sin(5 * a + s.b) + 0.035 * sin(11 * a + s.c));\n      if (t \u003c T[q]) (T[q] = t), (own[q] = i);\n    }\n  }\n  let tmax = 0;\n  for (let q = 0; q \u003c SN; q++) {\n    if (!mask[q]) continue;\n    T[q] += nz[q] + (D[q] \u003c 2.5 ? 0.5 : 0);\n    tmax = max(tmax, T[q]);\n  }\n  // Where two kinds meet they leave a groove.\n  for (let q = 0; q \u003c SN; q++) {\n    const m = mask[q] && col[own[q]].M, r = q % SW \u003c SW - 1 && mask[q + 1] && col[own[q + 1]].M, dn = q + SW \u003c SN && mask[q + SW] && col[own[q + SW]].M;\n    seam[q] = m && ((r && r !== m) || (dn && dn !== m)) ? 1 : 0;\n  }\n  return tmax;\n}\n\nfunction makeSet(P) {\n  const set = { s: [slice(), slice()], A: 0, L: 0 };\n  regrow(P, set);\n  return set;\n}\nfunction regrow(P, set) {\n  set.L = max(grow(P, set.s[0]), grow(P, set.s[1])) + HOLD;\n}\nconst crumb = (x, y) => [round(x), round(y), 0.6 + rnd() * 0.5, rnd() \u003c 0.3];\n\nfunction swap(P) {\n  P.old = P.cur;\n  P.cur = makeSet(P);\n  P.sw = 0;\n  // Crumbs knocked off on the way, in the gaps where they show.\n  for (let i = 0; i \u003c 7; i++) P.crumbs.push(crumb(rnd() * W, [0.5, 63.5, 64.5, 126.5][floor(rnd() * 4)] + (rnd() - 0.5) * 2));\n  P.crumbs.splice(0, max(0, P.crumbs.length - 48));\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, cur: null, old: null, sw: -1, buf: new Float32Array(N * 3), sh: new Float32Array(N), crumbs: [], motes: [], k1: -1 });\n  board(P);\n  for (let i = 0; i \u003c 26; i++) P.crumbs.push(crumb(rnd() * W, rnd() * H));\n  for (let i = 0; i \u003c 12; i++) P.motes.push({ x: rnd() * W, y: rnd() * H, vx: 0, vy: 0, ph: rnd() * 7 });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt, 0, 0.1);\n  const k1 = cl(k[0], 0, 3), nsp = round(cl(k[2], 4, 40)), damp = cl(k[3], 0, 1);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  if (abs(k1 - P.k1) > 0.002 || nsp !== P.nsp || abs(damp - P.damp) > 0.002) {\n    Object.assign(P, { k1, nsp, damp, vk: 0.85 + 0.6 * damp, fk: 1 + 1.8 * damp, wk: 1 + 1.4 * damp });\n    // The first pair opens nearly overrun and goes LEAD seconds in.\n    if (!P.cur) (P.cur = makeSet(P)), (P.cur.A = max(0, P.cur.L - LEAD));\n    else regrow(P, P.cur);\n  }\n  P.t += d;\n  if (P.sw >= 0) {\n    if ((P.sw += d) >= SLIDE) (P.sw = -1), (P.old = null);\n  } else if ((P.cur.A += d * P.rate) >= P.cur.L || input.btnPressed?.[0]) swap(P);\n  for (const m of P.motes) {\n    m.vx += ((rnd() - 0.5) * 24 - m.vx) * d;\n    m.vy += ((rnd() - 0.5) * 24 - m.vy - 2) * d;\n    m.x = (m.x + m.vx * d + W) % W;\n    m.y = (m.y + m.vy * d + H) % H;\n  }\n}\n\nfunction drawSlice(P, S, A, ox, oy) {\n  const { buf, lamp, damp, fk, wk } = P, { mask, alb, gr, hs, hp, T, own, seam, col } = S;\n  const dk0 = 1 - 0.14 * damp, dk1 = 1 - 0.15 * damp, dk2 = 1 - 0.07 * damp, bead = 0.012 * damp;\n  for (let ly = 0; ly \u003c SH; ly++)\n    for (let lx = 0, x = ox, q = ly * SW; lx \u003c SW; lx++, x++, q++) {\n      if (x \u003c 0 || x >= W || !mask[q]) continue;\n      const q3 = q * 3, age = A - T[q];\n      let r = alb[q3] * dk0, g = alb[q3 + 1] * dk1, b = alb[q3 + 2] * dk2;\n      if (age > -2) {\n        const c = col[own[q]], M = c.M, fz = M.fz * fk, wh = M.wh * wk;\n        if (age \u003c 0) {\n          // Loose hyphae run ahead of the colony.\n          if (fz > 0 && hs[q] \u003c 0.8 * (1 + age / fz)) (r = mix(r, WHITE[0], 0.55)), (g = mix(g, WHITE[1], 0.55)), (b = mix(b, WHITE[2], 0.55));\n        } else {\n          let mr, mg, mb, a;\n          if (M.gl) {\n            const t = cl(age / 3, 0, 1), s = 1 + 0.16 * cl(1 - (T[q] - c.t0) / 2, 0, 1) + (hs[q] \u003c 0.04 ? 0.25 : 0);\n            mr = mix(M.c1[0], M.c2[0], t) * s;\n            mg = mix(M.c1[1], M.c2[1], t) * s;\n            mb = mix(M.c1[2], M.c2[2], t) * s;\n            a = min(1, 0.55 + age * 2);\n          } else {\n            const t1 = cl((age - wh) / 0.7, 0, 1), t2 = cl((age - wh - 0.7) / 3, 0, 1);\n            mr = mix(mix(WHITE[0], M.c1[0], t1), M.c2[0], t2);\n            mg = mix(mix(WHITE[1], M.c1[1], t1), M.c2[1], t2);\n            mb = mix(mix(WHITE[2], M.c1[2], t1), M.c2[2], t2);\n            // Growth rings: the colony sporulates in bands as its front goes on.\n            if (M.ring) {\n              const k = 1 - M.ring * t1 * (0.5 + 0.5 * cos((T[q] - c.t0) * 7));\n              (mr *= k), (mg *= k), (mb *= k);\n            }\n            // Damp air keeps a grey cotton of aerial hyphae over the old growth.\n            const hz = damp * 0.45 * t1 * (0.6 + 0.4 * hs[q]);\n            (mr = mix(mr, 206, hz)), (mg = mix(mg, 208, hz)), (mb = mix(mb, 200, hz));\n            if (M.pin) {\n              const pr = M.pin * cl((age - wh) / 2.5, 0, 1), f = hp[q] \u003c pr ? 1 : hp[q] \u003c pr * 1.5 ? 0.5 : 0;\n              (mr = mix(mr, M.pc[0], f)), (mg = mix(mg, M.pc[1], f)), (mb = mix(mb, M.pc[2], f));\n            }\n            const gk = 6 + 8 * t1;\n            mr += gr[q3] * gk;\n            mg += gr[q3 + 1] * gk;\n            mb += gr[q3 + 2] * gk;\n            a = min(1, 0.4 + age * 1.6);\n            // Beads of liquid on old colonies when it is damp.\n            if (age > 2.5 && hs[q] > 1 - bead) (mr = 250), (mg = 246), (mb = 226), (a = 1);\n          }\n          if (seam[q] && age > 0.5) (mr *= 0.7), (mg *= 0.7), (mb *= 0.7);\n          r = mix(r, mr, a);\n          g = mix(g, mg, a);\n          b = mix(b, mb, a);\n        }\n      }\n      const p = (oy + ly) * W + x, L = lamp[p], o = p * 3;\n      buf[o] = r * L;\n      buf[o + 1] = g * L * TINT[1];\n      buf[o + 2] = b * L * TINT[2];\n    }\n}\n\n// Even steps only: the grain is there to be seen, not to be counted twice.\nconst q2 = (v) => (v > 255 ? 254 : v \u003c 0 ? 0 : (v >> 1) \u003c\u003c 1);\nconst ease = (u) => (u = cl(u, 0, 1)) * u * (3 - 2 * u);\n\nexport function draw(display, params) {\n  const P = params, { buf, sh, lamp } = P;\n  if (!P.cur) return;\n  buf.set(P.bg);\n  for (const [x, y, k, big] of P.crumbs)\n    for (let i = 0; i \u003c= (big ? 1 : 0); i++) {\n      const p = y * W + x + i;\n      if (x + i \u003c W && y >= 0 && y \u003c H) (buf[p * 3] = 214 * k * lamp[p]), (buf[p * 3 + 1] = 160 * k * lamp[p]), (buf[p * 3 + 2] = 86 * k * lamp[p]);\n    }\n  // In a swap the bottom slice follows the top one a moment later.\n  const e = [0, 1].map((j) => (P.sw >= 0 ? ease((P.sw - 0.14 * j) / (SLIDE - 0.14)) : 1));\n  const sets = P.sw >= 0 ? [[P.old, e.map((v) => round(-68 * v))], [P.cur, e.map((v) => round(68 * (1 - v)))]] : [[P.cur, [0, 0]]];\n  // Shadows on the board, cast down and to the right.\n  sh.fill(1);\n  for (const [set, ox] of sets)\n    for (let j = 0; j \u003c 2; j++)\n      for (let q = 0, m = set.s[j].mask; q \u003c SN; q++) {\n        if (!m[q]) continue;\n        const x = BX + ox[j] + (q % SW), y = BY[j] + ((q / SW) | 0);\n        if (x + 1 >= 0 && x + 1 \u003c W && y + 2 \u003c H) sh[(y + 2) * W + x + 1] = 0.5;\n        if (x + 2 >= 0 && x + 2 \u003c W && y + 4 \u003c H) sh[(y + 4) * W + x + 2] = min(sh[(y + 4) * W + x + 2], 0.74);\n      }\n  for (let p = 0; p \u003c N; p++) if (sh[p] \u003c 1) (buf[p * 3] *= sh[p]), (buf[p * 3 + 1] *= sh[p]), (buf[p * 3 + 2] *= sh[p]);\n  for (const [set, ox] of sets) for (let j = 0; j \u003c 2; j++) drawSlice(P, set.s[j], set.A, BX + ox[j], BY[j]);\n  // Spores settling out of the air, and dust in the lamplight.\n  const add = (x, y, v) => {\n    const xi = round(x), yi = round(y);\n    if (xi >= 0 && xi \u003c W && yi >= 0 && yi \u003c H) for (let c = 0, o = (yi * W + xi) * 3; c \u003c 3; c++) buf[o + c] += v * TINT[c];\n  };\n  if (P.sw \u003c 0)\n    for (let j = 0; j \u003c 2; j++)\n      for (const s of P.cur.s[j].sp.slice(0, P.nsp)) {\n        const u = (s.t0 - P.cur.A) / 0.6;\n        if (u > 0 && u \u003c 1) add(BX + s.x + s.dx * 16 * u, BY[j] + s.y - 10 * u, 150 * (1 - u));\n      }\n  for (const m of P.motes) add(m.x, m.y, 90 * lamp[(m.y | 0) * W + (m.x | 0)] ** 4 * (0.5 + 0.5 * sin(P.t * 3 + m.ph)) ** 2);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, q2(buf[o]), q2(buf[o + 1]), q2(buf[o + 2]));\n}\n","layer":{"id":"layer-bread-mould","type":"code","name":"bread-mould","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Bread Mould\n// Family:  fungi\n// Idea:    A time-lapse of two slices of bread on a board under the kitchen lamp: spores drift down and land, colonies spread in fuzzy rings, white at the rim and blue-green, black or orange behind it, until the slices are overrun and a fresh pair slides in from the side.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after time-lapse films of mould on bread left in a bread bin\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Mould=0..3, Speed=0.2..3, Spores=4..40, Damp=0..1\n//\n// Knob 1: Mould. What the air carries: the bread bin at 0 (blue-green Penicillium, black pin mould and the odd pink yeast), black bread mould at 1 (grey Rhizopus cotton and Aspergillus niger), green-gold Aspergillus and olive Cladosporium at 2, orange Neurospora with pink yeast and blood-red Serratia at 3.\n// Knob 2: Speed. How fast the time-lapse runs: at 2 a pair of slices goes from the first spore to overrun in about fifteen seconds; at 0.2 the colonies creep.\n// Knob 3: Spores. How many colonies start on each slice: four that grow into wide ringed discs at 4, up to forty small ones that close up fast at 40.\n// Knob 4: Damp. A dry kitchen near 0, with compact velvety colonies and thin white rims; turned up, the bread greys, the mould grows faster under a long white cotton and beads of liquid stand on the older colonies.\n// Buttons: K1 tap slides a fresh pair of slices in now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Each slice lives in its own 62x62 box; the pair sits one above the other.\nconst SW = 62;\nconst SH = 62;\nconst SN = SW * SH;\nconst BX = 1;\nconst BY = [1, 65];\n// Slice time a pair stays overrun before it goes, how long after the Lab\n// opens the first pair goes, and how many seconds a swap takes.\nconst HOLD = 1.2;\nconst LEAD = 2.4;\nconst SLIDE = 0.9;\nconst { min, max, floor, round, sin, cos, sqrt, atan2, exp, abs, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// A warm bulb overhead.\nconst TINT = [1, 0.95, 0.86];\nconst WHITE = [236, 238, 230];\n// Each mould: how fast its front runs (LED a second of slice time), how far\n// its loose hyphae reach ahead of it (s), how long it stays white, the\n// colour it sporulates to and the colour it ages to, how deep its growth\n// rings are, how thick its pin heads come and in what colour, and whether it\n// is a smooth wet patch instead of a felt.\nconst MOULDS = [\n  // Penicillium: velvety blue-green in growth rings behind a white margin.\n  { v: 3.2, fz: 0.35, wh: 0.75, c1: [72, 156, 148], c2: [34, 88, 86], ring: 0.22, pin: 0, pc: null, gl: 0 },\n  // Rhizopus, the black bread mould: grey cotton that runs, then black pin heads.\n  { v: 4.2, fz: 0.9, wh: 1.2, c1: [184, 184, 176], c2: [128, 126, 120], ring: 0.04, pin: 0.3, pc: [20, 18, 24], gl: 0 },\n  // Cladosporium: slow and compact, olive-black velvet with hardly a margin.\n  { v: 1.8, fz: 0.15, wh: 0.2, c1: [76, 92, 58], c2: [34, 42, 30], ring: 0.12, pin: 0, pc: null, gl: 0 },\n  // Aspergillus niger: a yellowish felt that fills with black heads.\n  { v: 2.8, fz: 0.3, wh: 0.5, c1: [206, 192, 124], c2: [70, 62, 52], ring: 0.06, pin: 0.75, pc: [30, 26, 24], gl: 0 },\n  // Aspergillus flavus: yellow-green powder.\n  { v: 2.9, fz: 0.3, wh: 0.6, c1: [178, 190, 70], c2: [112, 128, 46], ring: 0.18, pin: 0, pc: null, gl: 0 },\n  // Neurospora, the orange bread mould: the fastest, a loose orange fleece.\n  { v: 6, fz: 1, wh: 0.5, c1: [252, 170, 80], c2: [230, 122, 52], ring: 0.05, pin: 0, pc: null, gl: 0 },\n  // A pink yeast: slow, smooth and wet.\n  { v: 1.3, fz: 0, wh: 0, c1: [238, 140, 156], c2: [214, 102, 124], ring: 0, pin: 0, pc: null, gl: 1 },\n  // Serratia, the bacterium that makes bread look as if it bleeds.\n  { v: 1.1, fz: 0, wh: 0, c1: [214, 52, 66], c2: [160, 30, 48], ring: 0, pin: 0, pc: null, gl: 1 },\n];\n// What the air carries at each whole turn of K1.\nconst MIX = [\n  [0.62, 0.24, 0.08, 0, 0, 0, 0.06, 0],\n  [0.14, 0.5, 0.08, 0.28, 0, 0, 0, 0],\n  [0.24, 0.06, 0.22, 0, 0.48, 0, 0, 0],\n  [0.06, 0.1, 0, 0, 0, 0.44, 0.24, 0.16],\n];\nfunction pick(k1, u) {\n  const i = min(2, floor(k1)), f = k1 - i, A = MIX[i], B = MIX[i + 1];\n  for (let t = 0, acc = 0; t \u003c A.length; t++) if ((acc += mix(A[t], B[t], f)) > u) return t;\n  return 0;\n}\n\n// The board: long-grain wood under the lamp, scored by old knife cuts.\nfunction board(P) {\n  const bg = (P.bg = new Float32Array(N * 3)), lamp = (P.lamp = new Float32Array(N)), WOOD = [128, 84, 48];\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, L = (lamp[p] = 0.8 + 0.26 * exp(-((x - 25) ** 2 + ((y - 56) * 0.5) ** 2) / 900));\n    const w = x + 4 * vn(x * 0.05 + 7, y * 0.02), n = vn(w * 0.7, y * 0.03), ln = vn(w * 1.9 + 50, y * 0.012);\n    const k = (0.72 + 0.32 * n - max(0, ln - 0.7) * 1.4) * L;\n    for (let c = 0; c \u003c 3; c++) bg[p * 3 + c] = (WOOD[c] + (hash(p, c + 9) - 0.5) * 6) * k * TINT[c];\n  }\n  for (let i = 0; i \u003c 14; i++) {\n    const a = (rnd() - 0.5) * 1.2 + (rnd() \u003c 0.5 ? 0 : PI), len = 4 + rnd() * 10;\n    for (let s = 0, x = rnd() * W, y = rnd() * H; s \u003c len; s++, x += cos(a), y += sin(a) * 0.5) {\n      const xi = round(x), yi = round(y);\n      if (xi >= 0 && xi \u003c W && yi >= 0 && yi \u003c H) for (let c = 0; c \u003c 3; c++) bg[(yi * W + xi) * 3 + c] *= 0.8;\n    }\n  }\n}\n\n// A pan loaf slice: a square body under a domed top that overhangs it at the\n// shoulders, a crust two LEDs deep and baked darker over the dome, the crumb\n// full of holes.\nconst CRUMB = [242, 226, 188];\nconst DENSE = [222, 186, 128];\nconst CR_OUT = [100, 54, 26];\nconst CR_IN = [194, 134, 70];\nfunction slice() {\n  const S = { mask: new Uint8Array(SN), D: new Float32Array(SN), alb: new Float32Array(SN * 3), gr: new Float32Array(SN * 3), hs: new Float32Array(SN), hp: new Float32Array(SN), nz: new Float32Array(SN), T: new Float32Array(SN), own: new Uint8Array(SN), seam: new Uint8Array(SN), sp: [], col: [] };\n  const { mask, D, alb, gr, hs, hp, nz } = S, top = new Uint8Array(SN);\n  const so = floor(rnd() * 99999), flip = rnd() \u003c 0.35, lean = (rnd() - 0.5) * 5, sc = 0.96 + rnd() * 0.04, shy = 17 + rnd() * 5;\n  for (let q = 0; q \u003c SN; q++) {\n    const x = q % SW, y = (q / SW) | 0;\n    let py = (y + 0.5 - 31) / sc + 31, px = (x + 0.5 - 31) / sc, hw = 0;\n    if (flip) py = 62 - py;\n    if (py \u003c shy) px -= lean * (1 - py / shy);\n    if (py > 1 && py \u003c 61) {\n      hw = py \u003c shy ? 30.5 * (1 - ((shy - py) / (shy - 1)) ** 2.2) ** (1 / 2.2) : py \u003c shy + 5 ? 28.5 + 2 * cos(((py - shy) / 5) * PI * 0.5) : 28.5;\n      if (py > 56) hw -= 5 - sqrt(max(0, 25 - (py - 56) ** 2));\n    }\n    mask[q] = abs(px) \u003c hw ? 1 : 0;\n    top[q] = py \u003c shy + 2;\n    D[q] = mask[q] ? 99 : 0;\n  }\n  // Distance in from the edge, two chamfer passes.\n  const at = (x, y) => (x \u003c 0 || y \u003c 0 || x >= SW || y >= SH ? 0 : D[y * SW + x]);\n  for (let y = 0; y \u003c SH; y++)\n    for (let x = 0, q = y * SW; x \u003c SW; x++, q++) if (mask[q]) D[q] = min(D[q], at(x - 1, y) + 1, at(x, y - 1) + 1, at(x - 1, y - 1) + 1.41, at(x + 1, y - 1) + 1.41);\n  for (let y = SH - 1; y >= 0; y--)\n    for (let x = SW - 1, q = y * SW + x; x >= 0; x--, q--) if (mask[q]) D[q] = min(D[q], at(x + 1, y) + 1, at(x, y + 1) + 1, at(x + 1, y + 1) + 1.41, at(x - 1, y + 1) + 1.41);\n  for (let q = 0; q \u003c SN; q++) {\n    if (!mask[q]) continue;\n    const x = q % SW, y = (q / SW) | 0, d = D[q], crust = d \u003c 2.5;\n    const t = crust ? cl((d - 1) / 1.4, 0, 1) : cl((d - 2.5) / 5, 0, 1), k = crust ? (0.82 + 0.32 * vn(x * 0.4 + so, y * 0.4)) * (top[q] ? 0.84 : 1) : 0.92 + 0.12 * vn(x * 0.3 + so, y * 0.16);\n    for (let c = 0; c \u003c 3; c++) {\n      alb[q * 3 + c] = (crust ? mix(CR_OUT[c], CR_IN[c], t) : mix(DENSE[c], CRUMB[c], t)) * k + (hash(q + so, c) - 0.5) * 12;\n      gr[q * 3 + c] = hash(q + so, c + 3) * 2 - 1;\n    }\n    hs[q] = hash(q + so, 7);\n    // Pin heads come in clumps.\n    hp[q] = hash(q + so, 8) * (0.5 + vn(x * 0.25 + so, y * 0.25 + 9));\n    // Ragged fronts: a colony reaches some crumb a little sooner than others.\n    nz[q] = (vn(x * 0.3 + so, y * 0.3) - 0.5) * 0.6 + (hash(q + so, 6) - 0.5) * 0.25;\n  }\n  // The holes of the crumb, drawn a little tall the way the dough rose. The\n  // lamp is up and to the left, so the far wall of a hole catches it.\n  for (let i = 0; i \u003c 120; i++) {\n    const rx = 0.5 + 1.7 * rnd() ** 3, ry = rx * (1.05 + 0.6 * rnd()), cx = 4 + rnd() * 54, cy = 4 + rnd() * 54, dp = 0.14 + 0.2 * cl((rx - 0.5) / 1.5, 0, 1);\n    for (let y = floor(cy - ry - 1); y \u003c= cy + ry + 1; y++)\n      for (let x = floor(cx - rx - 1); x \u003c= cx + rx + 1; x++) {\n        const q = y * SW + x;\n        if (x \u003c 0 || y \u003c 0 || x >= SW || y >= SH || D[q] \u003c 3.4) continue;\n        const dx = (x + 0.5 - cx) / rx, dy = (y + 0.5 - cy) / ry, r2 = dx * dx + dy * dy;\n        const f = r2 \u003c 1 ? 1 - dp * (1 - 0.45 * cl((dx + dy) * 0.8, -1, 1)) * (1 - 0.4 * r2) : r2 \u003c 2 && dx + dy \u003c -0.6 ? 1 + dp * 0.3 : 1;\n        alb[q * 3] *= f;\n        alb[q * 3 + 1] *= f;\n        alb[q * 3 + 2] *= f;\n      }\n  }\n  // Forty landing places, each one as far from the others as twelve tries\n  // can find, so the first few cover the slice whatever K3 asks for. Landing\n  // times and kinds are spread the same way.\n  const r0 = rnd(), r1 = rnd();\n  for (let i = 0; i \u003c 40; i++) {\n    let bx = 0, by = 0, bd = -1;\n    for (let c = 0; c \u003c 12; c++) {\n      let q = 0;\n      do q = floor(rnd() * SN);\n      while (D[q] \u003c 2.5);\n      const x = (q % SW) + rnd(), y = floor(q / SW) + rnd();\n      let md = 1e9;\n      for (const s of S.sp) md = min(md, (s.x - x) ** 2 + (s.y - y) ** 2);\n      if (md > bd) (bd = md), (bx = x), (by = y);\n    }\n    S.sp.push({ x: bx, y: by, u: (r1 + i * 0.618034) % 1, t0: 0.2 + 2.8 * ((r0 + i * 0.381966) % 1), a: rnd() * 7, b: rnd() * 7, c: rnd() * 7, dx: rnd() - 0.5 });\n  }\n  return S;\n}\n\n// When each LED of a slice is reached: the first colony to get there owns it.\n// Fronts are lobed, crust is slow ground, and the result is fixed, so a\n// frame only reads it against the slice's age.\nfunction grow(P, S) {\n  const { T, own, mask, D, sp, seam, nz } = S, col = (S.col = []);\n  T.fill(1e9);\n  for (let i = 0; i \u003c P.nsp; i++) {\n    const s = sp[i], M = MOULDS[pick(P.k1, s.u)], iv = 1 / (M.v * P.vk);\n    col.push({ M, t0: s.t0 });\n    for (let q = 0; q \u003c SN; q++) {\n      if (!mask[q]) continue;\n      const dx = (q % SW) + 0.5 - s.x, dy = ((q / SW) | 0) + 0.5 - s.y, d = sqrt(dx * dx + dy * dy);\n      if (s.t0 + d * 0.86 * iv >= T[q]) continue;\n      const a = atan2(dy, dx), t = s.t0 + d * iv * (1 + 0.05 * sin(2 * a + s.a) + 0.05 * sin(5 * a + s.b) + 0.035 * sin(11 * a + s.c));\n      if (t \u003c T[q]) (T[q] = t), (own[q] = i);\n    }\n  }\n  let tmax = 0;\n  for (let q = 0; q \u003c SN; q++) {\n    if (!mask[q]) continue;\n    T[q] += nz[q] + (D[q] \u003c 2.5 ? 0.5 : 0);\n    tmax = max(tmax, T[q]);\n  }\n  // Where two kinds meet they leave a groove.\n  for (let q = 0; q \u003c SN; q++) {\n    const m = mask[q] && col[own[q]].M, r = q % SW \u003c SW - 1 && mask[q + 1] && col[own[q + 1]].M, dn = q + SW \u003c SN && mask[q + SW] && col[own[q + SW]].M;\n    seam[q] = m && ((r && r !== m) || (dn && dn !== m)) ? 1 : 0;\n  }\n  return tmax;\n}\n\nfunction makeSet(P) {\n  const set = { s: [slice(), slice()], A: 0, L: 0 };\n  regrow(P, set);\n  return set;\n}\nfunction regrow(P, set) {\n  set.L = max(grow(P, set.s[0]), grow(P, set.s[1])) + HOLD;\n}\nconst crumb = (x, y) => [round(x), round(y), 0.6 + rnd() * 0.5, rnd() \u003c 0.3];\n\nfunction swap(P) {\n  P.old = P.cur;\n  P.cur = makeSet(P);\n  P.sw = 0;\n  // Crumbs knocked off on the way, in the gaps where they show.\n  for (let i = 0; i \u003c 7; i++) P.crumbs.push(crumb(rnd() * W, [0.5, 63.5, 64.5, 126.5][floor(rnd() * 4)] + (rnd() - 0.5) * 2));\n  P.crumbs.splice(0, max(0, P.crumbs.length - 48));\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, cur: null, old: null, sw: -1, buf: new Float32Array(N * 3), sh: new Float32Array(N), crumbs: [], motes: [], k1: -1 });\n  board(P);\n  for (let i = 0; i \u003c 26; i++) P.crumbs.push(crumb(rnd() * W, rnd() * H));\n  for (let i = 0; i \u003c 12; i++) P.motes.push({ x: rnd() * W, y: rnd() * H, vx: 0, vy: 0, ph: rnd() * 7 });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], d = cl(dt, 0, 0.1);\n  const k1 = cl(k[0], 0, 3), nsp = round(cl(k[2], 4, 40)), damp = cl(k[3], 0, 1);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  if (abs(k1 - P.k1) > 0.002 || nsp !== P.nsp || abs(damp - P.damp) > 0.002) {\n    Object.assign(P, { k1, nsp, damp, vk: 0.85 + 0.6 * damp, fk: 1 + 1.8 * damp, wk: 1 + 1.4 * damp });\n    // The first pair opens nearly overrun and goes LEAD seconds in.\n    if (!P.cur) (P.cur = makeSet(P)), (P.cur.A = max(0, P.cur.L - LEAD));\n    else regrow(P, P.cur);\n  }\n  P.t += d;\n  if (P.sw >= 0) {\n    if ((P.sw += d) >= SLIDE) (P.sw = -1), (P.old = null);\n  } else if ((P.cur.A += d * P.rate) >= P.cur.L || input.btnPressed?.[0]) swap(P);\n  for (const m of P.motes) {\n    m.vx += ((rnd() - 0.5) * 24 - m.vx) * d;\n    m.vy += ((rnd() - 0.5) * 24 - m.vy - 2) * d;\n    m.x = (m.x + m.vx * d + W) % W;\n    m.y = (m.y + m.vy * d + H) % H;\n  }\n}\n\nfunction drawSlice(P, S, A, ox, oy) {\n  const { buf, lamp, damp, fk, wk } = P, { mask, alb, gr, hs, hp, T, own, seam, col } = S;\n  const dk0 = 1 - 0.14 * damp, dk1 = 1 - 0.15 * damp, dk2 = 1 - 0.07 * damp, bead = 0.012 * damp;\n  for (let ly = 0; ly \u003c SH; ly++)\n    for (let lx = 0, x = ox, q = ly * SW; lx \u003c SW; lx++, x++, q++) {\n      if (x \u003c 0 || x >= W || !mask[q]) continue;\n      const q3 = q * 3, age = A - T[q];\n      let r = alb[q3] * dk0, g = alb[q3 + 1] * dk1, b = alb[q3 + 2] * dk2;\n      if (age > -2) {\n        const c = col[own[q]], M = c.M, fz = M.fz * fk, wh = M.wh * wk;\n        if (age \u003c 0) {\n          // Loose hyphae run ahead of the colony.\n          if (fz > 0 && hs[q] \u003c 0.8 * (1 + age / fz)) (r = mix(r, WHITE[0], 0.55)), (g = mix(g, WHITE[1], 0.55)), (b = mix(b, WHITE[2], 0.55));\n        } else {\n          let mr, mg, mb, a;\n          if (M.gl) {\n            const t = cl(age / 3, 0, 1), s = 1 + 0.16 * cl(1 - (T[q] - c.t0) / 2, 0, 1) + (hs[q] \u003c 0.04 ? 0.25 : 0);\n            mr = mix(M.c1[0], M.c2[0], t) * s;\n            mg = mix(M.c1[1], M.c2[1], t) * s;\n            mb = mix(M.c1[2], M.c2[2], t) * s;\n            a = min(1, 0.55 + age * 2);\n          } else {\n            const t1 = cl((age - wh) / 0.7, 0, 1), t2 = cl((age - wh - 0.7) / 3, 0, 1);\n            mr = mix(mix(WHITE[0], M.c1[0], t1), M.c2[0], t2);\n            mg = mix(mix(WHITE[1], M.c1[1], t1), M.c2[1], t2);\n            mb = mix(mix(WHITE[2], M.c1[2], t1), M.c2[2], t2);\n            // Growth rings: the colony sporulates in bands as its front goes on.\n            if (M.ring) {\n              const k = 1 - M.ring * t1 * (0.5 + 0.5 * cos((T[q] - c.t0) * 7));\n              (mr *= k), (mg *= k), (mb *= k);\n            }\n            // Damp air keeps a grey cotton of aerial hyphae over the old growth.\n            const hz = damp * 0.45 * t1 * (0.6 + 0.4 * hs[q]);\n            (mr = mix(mr, 206, hz)), (mg = mix(mg, 208, hz)), (mb = mix(mb, 200, hz));\n            if (M.pin) {\n              const pr = M.pin * cl((age - wh) / 2.5, 0, 1), f = hp[q] \u003c pr ? 1 : hp[q] \u003c pr * 1.5 ? 0.5 : 0;\n              (mr = mix(mr, M.pc[0], f)), (mg = mix(mg, M.pc[1], f)), (mb = mix(mb, M.pc[2], f));\n            }\n            const gk = 6 + 8 * t1;\n            mr += gr[q3] * gk;\n            mg += gr[q3 + 1] * gk;\n            mb += gr[q3 + 2] * gk;\n            a = min(1, 0.4 + age * 1.6);\n            // Beads of liquid on old colonies when it is damp.\n            if (age > 2.5 && hs[q] > 1 - bead) (mr = 250), (mg = 246), (mb = 226), (a = 1);\n          }\n          if (seam[q] && age > 0.5) (mr *= 0.7), (mg *= 0.7), (mb *= 0.7);\n          r = mix(r, mr, a);\n          g = mix(g, mg, a);\n          b = mix(b, mb, a);\n        }\n      }\n      const p = (oy + ly) * W + x, L = lamp[p], o = p * 3;\n      buf[o] = r * L;\n      buf[o + 1] = g * L * TINT[1];\n      buf[o + 2] = b * L * TINT[2];\n    }\n}\n\n// Even steps only: the grain is there to be seen, not to be counted twice.\nconst q2 = (v) => (v > 255 ? 254 : v \u003c 0 ? 0 : (v >> 1) \u003c\u003c 1);\nconst ease = (u) => (u = cl(u, 0, 1)) * u * (3 - 2 * u);\n\nexport function draw(display, params) {\n  const P = params, { buf, sh, lamp } = P;\n  if (!P.cur) return;\n  buf.set(P.bg);\n  for (const [x, y, k, big] of P.crumbs)\n    for (let i = 0; i \u003c= (big ? 1 : 0); i++) {\n      const p = y * W + x + i;\n      if (x + i \u003c W && y >= 0 && y \u003c H) (buf[p * 3] = 214 * k * lamp[p]), (buf[p * 3 + 1] = 160 * k * lamp[p]), (buf[p * 3 + 2] = 86 * k * lamp[p]);\n    }\n  // In a swap the bottom slice follows the top one a moment later.\n  const e = [0, 1].map((j) => (P.sw >= 0 ? ease((P.sw - 0.14 * j) / (SLIDE - 0.14)) : 1));\n  const sets = P.sw >= 0 ? [[P.old, e.map((v) => round(-68 * v))], [P.cur, e.map((v) => round(68 * (1 - v)))]] : [[P.cur, [0, 0]]];\n  // Shadows on the board, cast down and to the right.\n  sh.fill(1);\n  for (const [set, ox] of sets)\n    for (let j = 0; j \u003c 2; j++)\n      for (let q = 0, m = set.s[j].mask; q \u003c SN; q++) {\n        if (!m[q]) continue;\n        const x = BX + ox[j] + (q % SW), y = BY[j] + ((q / SW) | 0);\n        if (x + 1 >= 0 && x + 1 \u003c W && y + 2 \u003c H) sh[(y + 2) * W + x + 1] = 0.5;\n        if (x + 2 >= 0 && x + 2 \u003c W && y + 4 \u003c H) sh[(y + 4) * W + x + 2] = min(sh[(y + 4) * W + x + 2], 0.74);\n      }\n  for (let p = 0; p \u003c N; p++) if (sh[p] \u003c 1) (buf[p * 3] *= sh[p]), (buf[p * 3 + 1] *= sh[p]), (buf[p * 3 + 2] *= sh[p]);\n  for (const [set, ox] of sets) for (let j = 0; j \u003c 2; j++) drawSlice(P, set.s[j], set.A, BX + ox[j], BY[j]);\n  // Spores settling out of the air, and dust in the lamplight.\n  const add = (x, y, v) => {\n    const xi = round(x), yi = round(y);\n    if (xi >= 0 && xi \u003c W && yi >= 0 && yi \u003c H) for (let c = 0, o = (yi * W + xi) * 3; c \u003c 3; c++) buf[o + c] += v * TINT[c];\n  };\n  if (P.sw \u003c 0)\n    for (let j = 0; j \u003c 2; j++)\n      for (const s of P.cur.s[j].sp.slice(0, P.nsp)) {\n        const u = (s.t0 - P.cur.A) / 0.6;\n        if (u > 0 && u \u003c 1) add(BX + s.x + s.dx * 16 * u, BY[j] + s.y - 10 * u, 150 * (1 - u));\n      }\n  for (const m of P.motes) add(m.x, m.y, 90 * lamp[(m.y | 0) * W + (m.x | 0)] ** 4 * (0.5 + 0.5 * sin(P.t * 3 + m.ph)) ** 2);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, q2(buf[o]), q2(buf[o + 1]), q2(buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Mould=0..3, Speed=0.2..3, Spores=4..40, Damp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Mould","min":0,"max":3,"about":"What the air carries: the bread bin at 0 (blue-green Penicillium, black pin mould and the odd pink yeast), black bread mould at 1 (grey Rhizopus cotton and Aspergillus niger), green-gold Aspergillus and olive Cladosporium at 2, orange Neurospora with pink yeast and blood-red Serratia at 3."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the time-lapse runs: at 2 a pair of slices goes from the first spore to overrun in about fifteen seconds; at 0.2 the colonies creep."},{"name":"Spores","min":4,"max":40,"about":"How many colonies start on each slice: four that grow into wide ringed discs at 4, up to forty small ones that close up fast at 40."},{"name":"Damp","min":0,"max":1,"about":"A dry kitchen near 0, with compact velvety colonies and thin white rims; turned up, the bread greys, the mould grows faster under a long white cotton and beads of liquid stand on the older colonies."}],"start":[0,2,4,0.06],"measures":{"motion":0.3259,"detail":0.0597,"edges":0.2499,"complexity":2.3664,"coverage":0.9889,"colour":0.1543,"drift":0.3583},"knobResponse":[0.188,0.3046,0.062,0.1018]},{"slug":"breath","title":"Breath","family":"body","round":24,"note":"후두에서 횡격막까지 해부도처럼 그린 폐가 숨을 쉬어요. 들이쉬면 횡격막이 내려가고 갈비뼈가 들리며, 푸르스름한 공기가 일곱 번 더 갈라지는 기관지를 타고 내려가 보랏빛 허파꽈리를 빨갛게 물들여요. K1 이 맑은 공기에서 입김이 하얗게 서리는 겨울과 매연 낀 도시까지 공기를 바꾸고, K1 을 누르면 기침을 해요.","idea":"A pair of lungs drawn like an anatomical plate from the throat to the diaphragm breathes: the diaphragm drops, the ribs lift, the lungs swell, cold air runs down the bronchial tree into the alveoli and they flush from dusky violet to red, then the warm air rises back out as a puff at the top.","buttons":"K1 tap makes the lungs cough: a quick gasp, then three jolts that blow warm air up the tree and out in puffs.","code":"// ===== Patternflow pattern =====\n// Title:   Breath\n// Family:  body\n// Idea:    A pair of lungs drawn like an anatomical plate from the throat to the diaphragm breathes: the diaphragm drops, the ribs lift, the lungs swell, cold air runs down the bronchial tree into the alveoli and they flush from dusky violet to red, then the warm air rises back out as a puff at the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after anatomical plates of the lungs, with the bronchial tree grown by volume-filling branching (Tawhai, Pullan and Hunter, 2000)\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Air=0..1, Rate=0.2..3, Depth=0..1, Altitude=0..1\n//\n// Knob 1: Air. What is breathed: clear cool air at 0, cold winter air at 0.5 where every breath comes out as a white cloud at the top, and city smog at 1 that browns the sky and leaves soot in the alveoli.\n// Knob 2: Rate. Breaths a minute: about 9 asleep at 0.2, 17 at 2 (one every 3.5 s), and a shallow pant of 34 at 3.\n// Knob 3: Depth. A quiet breath at 0, where the domes of the diaphragm drop 7 LEDs, up to a deep sigh at 1 that drops them 14 and lifts and spreads the ribs twice as far.\n// Knob 4: Altitude. Sea level at 0, the top of Everest at 1: each breath brings less oxygen, so the alveoli flush only to a dusky purple, and the breathing quickens and deepens on its own.\n// Buttons: K1 tap makes the lungs cough: a quick gasp, then three jolts that blow warm air up the tree and out in puffs.\n\nconst W = 64, H = 128, N = W * H, A0 = 2;\nconst { min, max, abs, sin, cos, exp, sqrt, floor, ceil, round, hypot, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The diaphragm under the lungs breathed out, x then y: the right dome higher\n// over the liver, the heart sitting in the dip between the domes.\nconst DK = [-1, 118.5, 5, 113.8, 9, 108.4, 13, 103.8, 17, 101.6, 21, 101, 25, 101.8, 29, 104.2, 33, 106, 37, 106.6, 41, 106.6, 45, 105.8, 49, 106.8, 53, 110.2, 57, 115, 60, 117.8, 65, 122.5];\nconst D0T = F32(68);\nfor (let i = 0, k = 0; i \u003c 68; i++) {\n  while (k \u003c DK.length - 4 && i - 1 > DK[k + 2]) k += 2;\n  D0T[i] = mix(DK[k + 1], DK[k + 3], (i - 1 - DK[k]) / (DK[k + 2] - DK[k]));\n}\nfor (let n = 0; n \u003c 4; n++) for (let i = 1; i \u003c 67; i++) D0T[i] = (D0T[i - 1] + 2 * D0T[i] + D0T[i + 1]) / 4;\nconst d0 = (x) => ((x = cl(x + 1, 0, 66.99)), D0T[floor(x)] + (D0T[floor(x) + 1] - D0T[floor(x)]) * (x - floor(x)));\n// How far the diaphragm drops at each column: most under the two domes, so\n// they flatten.\nconst GX = Float32Array.from({ length: W }, (_, x) => 0.32 + 0.68 * (exp(-(((x - 17) / 10) ** 2)) + exp(-(((x - 46) / 10) ** 2))));\n// The outlines of the right lung (on the viewer's left) and the smaller left\n// lung with the heart's notch, breathed out. The diaphragm cuts their bases.\nconst LUNGS = [\n  [19, 21, 15, 22.5, 11.5, 26, 8.5, 32, 6.3, 40, 4.8, 50, 4, 60, 3.6, 72, 3.6, 84, 4, 96, 4.6, 106, 5.6, 126, 28.8, 126, 28.6, 104, 28.2, 98, 27.6, 90, 27.2, 82, 27.6, 74, 28.6, 66, 29, 58, 28.6, 50, 27.8, 42, 26.6, 34, 24.8, 27, 22.5, 22.5],\n  [44.5, 22, 48.5, 23.5, 52, 27, 55, 33, 57.2, 41, 58.8, 51, 59.6, 62, 60, 74, 60.2, 86, 60.2, 98, 59.9, 108, 59.2, 126, 41.5, 126, 41.5, 106, 41, 103, 42.4, 98, 44.5, 92, 45.4, 86, 44.4, 80, 41.8, 75, 38.6, 71, 36.6, 66, 36, 58, 36.4, 50, 37.2, 42, 38.4, 34, 40, 28, 42, 23.5],\n];\n// Airway walls by generation (9 is the channel through the larynx), and how\n// strongly each shows over the lung.\nconst WC = Array.from({ length: 10 }, (_, g) => (g \u003c 2 ? [226, 216, 204] : [232 - 2 * g, 208 - 4 * g, 206]));\nconst AG = Array.from({ length: 10 }, (_, g) => (g \u003c 2 ? 1 : g > 8 ? 0 : 1.1 - 0.08 * g));\n// The cough: seconds and lung volume, and the moments of the three jolts.\nconst CK = [0, 0, 0.32, 0.97, 0.44, 0.97, 0.54, 0.66, 0.84, 0.66, 0.94, 0.38, 1.24, 0.38, 1.34, 0.12, 1.9, 0];\nconst CT = [0.44, 0.84, 1.24];\n\nfunction sdPoly(v, px, py) {\n  let d = 1e9, s = 1;\n  for (let i = 0, j = v.length - 2; i \u003c v.length; j = i, i += 2) {\n    const ex = v[j] - v[i], ey = v[j + 1] - v[i + 1], wx = px - v[i], wy = py - v[i + 1];\n    const t = cl((wx * ex + wy * ey) / (ex * ex + ey * ey), 0, 1), bx = wx - ex * t, by = wy - ey * t;\n    d = min(d, bx * bx + by * by);\n    const c1 = py >= v[i + 1], c2 = py \u003c v[j + 1], c3 = ex * wy > ey * wx;\n    if ((c1 && c2 && c3) || (!c1 && !c2 && !c3)) s = -s;\n  }\n  return s * sqrt(d);\n}\n// The colour being built for one LED, and mixing toward another by k.\nconst C = F32(3);\nconst DA = [74, 58, 156];\nconst bl = (r, g, b, k) => ((C[0] += (r - C[0]) * k), (C[1] += (g - C[1]) * k), (C[2] += (b - C[2]) * k));\nfunction samp(A, x, y) {\n  x = cl(x, 0, 62.999);\n  y = cl(y, 0, 126.999);\n  const xi = x | 0, yi = y | 0, fx = x - xi, p = yi * W + xi, a = A[p] + (A[p + 1] - A[p]) * fx;\n  return a + (A[p + W] + (A[p + W + 1] - A[p + W]) * fx - a) * (y - yi);\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, ph: 0.68, lp: 0.68, vol: 0.6, D: 0.5, air: 0, ct: -1, jolt: 0, hp: 0, hb: 0, envIn: 0, envOut: 0, Fin: -1, Fx: 2, bf: [], puffs: [],\n    sd: F32(N), own: new Int16Array(N).fill(-1), und: F32(N * 3), ua: F32(N), GL: F32(N),\n    SX: F32(H), KY: F32(W), alvA: F32(N), alvS: F32(N), alvK: new Int16Array(N), trA: F32(N), trV: F32(N), trS: F32(N), trG: new Int8Array(N), rib: F32(N), O: F32(N * 3),\n    seg: [], ax: [], ay: [], as: [], soot: [], cd: [], cb: [], trH: F32(N),\n  });\n  build(P);\n}\n\nfunction addSeg(P, x0, y0, x1, y1, r, g, d) {\n  const e = d + hypot(x1 - x0, y1 - y0);\n  P.seg.push(x0, y0, x1, y1, r, g, d, e);\n  return e;\n}\n\n// Volume-filling branching: a branch's alveoli are split by the line from its\n// end through their centroid, and each half gets a child that runs 40% of the\n// way to its own centroid, until a handful is left: one grape cluster.\nfunction grow(P, x0, y0, dx, dy, pts, g, r, d) {\n  const { ax, ay } = P, n = pts.length;\n  let cx = 0, cy = 0;\n  for (const i of pts) (cx += ax[i]), (cy += ay[i]);\n  (cx /= n), (cy /= n);\n  if (n \u003c= 7 || g > 8) {\n    for (const i of pts) (P.ak[i] = P.cd.length), (ax[i] += (cx - ax[i]) * 0.3), (ay[i] += (cy - ay[i]) * 0.3);\n    P.cd.push(d + hypot(cx - x0, cy - y0));\n    P.cb.push(0.84 + 0.32 * rnd());\n    return;\n  }\n  // The lobes split along the line from the branch to their centroid; past\n  // them each set is cut across its long axis, a near half and a far one.\n  let ux = cx - x0, uy = cy - y0, ul = hypot(ux, uy), ox = x0, oy = y0;\n  if (g > 2) {\n    let sxx = 0, syy = 0, sxy = 0;\n    for (const i of pts) (sxx += (ax[i] - cx) ** 2), (syy += (ay[i] - cy) ** 2), (sxy += (ax[i] - cx) * (ay[i] - cy));\n    const th = 0.5 * atan2(2 * sxy, sxx - syy) + PI / 2;\n    (ux = cos(th)), (uy = sin(th)), (ul = 1), (ox = cx), (oy = cy);\n  }\n  if (ul \u003c 0.5) (ux = dx), (uy = dy), (ul = hypot(dx, dy));\n  (ux /= ul), (uy /= ul);\n  const side = (i) => (ax[i] - ox) * uy - (ay[i] - oy) * ux;\n  let A = pts.filter((i) => side(i) > 0), B = pts.filter((i) => side(i) \u003c= 0);\n  if (A.length \u003c 2 || B.length \u003c 2) {\n    const s = pts.slice().sort((i, j) => side(i) - side(j));\n    (A = s.slice(0, n >> 1)), (B = s.slice(n >> 1));\n  }\n  const pa = atan2(dy, dx), lim = g === 2 ? 1.75 : 1.1;\n  for (const Q of [A, B]) {\n    let qx = 0, qy = 0;\n    for (const i of Q) (qx += ax[i]), (qy += ay[i]);\n    (qx = qx / Q.length - x0), (qy = qy / Q.length - y0);\n    let a = atan2(qy, qx), da = a - pa;\n    da = atan2(sin(da), cos(da));\n    if (abs(da) > lim) a = pa + Math.sign(da) * lim;\n    let len = max(1.2, hypot(qx, qy) * (Q.length \u003c= 7 ? 0.55 : 0.4)), x1, y1;\n    for (;;) {\n      (x1 = x0 + cos(a) * len), (y1 = y0 + sin(a) * len);\n      if (len \u003c= 1.2 || samp(P.sd, x1, y1) \u003c -0.6) break;\n      len *= 0.8;\n    }\n    const rr = max(0.5, r * Math.cbrt(Q.length / n));\n    grow(P, x1, y1, x1 - x0, y1 - y0, Q, g + 1, rr, addSeg(P, x0, y0, x1, y1, rr, g, d));\n  }\n}\n\nfunction build(P) {\n  const { sd, own, GL } = P;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, sl = d0(x + 0.5) - d0(x - 0.5), cut = (y - d0(x) + 0.6) / sqrt(1 + sl * sl);\n    const a = y \u003c 15 ? 6 : max(sdPoly(LUNGS[0], x, y), cut), b = y \u003c 15 ? 6 : max(sdPoly(LUNGS[1], x, y), cut);\n    sd[p] = min(a, b) + 0.9 * (vn(x * 0.32, y * 0.32) - 0.5);\n    GL[p] = exp(-(((x - 32) / 26) ** 2) - (((y - 66) / 50) ** 2));\n  }\n  // Alveoli on a jittered honeycomb inside the lungs.\n  const pts = [[], []];\n  for (let j = 0; j \u003c 56; j++)\n    for (let i = 0; i \u003c 29; i++) {\n      const x = 1 + i * 2.25 + (j & 1) * 1.125 + (rnd() - 0.5) * 0.7, y = 19 + j * 1.95 + (rnd() - 0.5) * 0.7;\n      if (x > 62.5 || y > 125 || samp(sd, x, y) > -1) continue;\n      pts[x \u003c 32 ? 0 : 1].push(P.ax.length);\n      P.ax.push(x), P.ay.push(y), P.as.push(0.86 + 0.28 * rnd()), P.soot.push(rnd());\n    }\n  P.ak = new Int16Array(P.ax.length);\n  // The larynx and trachea, the short steep right bronchus and the longer\n  // left one, then the trees.\n  let d = addSeg(P, 32, 3, 32, 16.5, 1, 9, 0);\n  d = addSeg(P, 32, 16.5, 32, 48.5, 3, 0, d);\n  grow(P, 26.6, 57, -4.8, 8.5, pts[0], 2, 2.3, addSeg(P, 31.3, 48.5, 26.6, 57, 2.3, 1, d));\n  grow(P, 40.4, 56.6, 7.8, 8.1, pts[1], 2, 2.05, addSeg(P, 32.7, 48.5, 40.4, 56.6, 2.05, 1, d));\n  P.dmax = max(...P.cd);\n  P.cd = Float32Array.from(P.cd, (v) => v / P.dmax);\n  P.cox = F32(P.cd.length).fill(0.55);\n  P.airK = F32(P.cd.length);\n  // Each lung pixel takes the cluster of its nearest alveolus.\n  const best = F32(N).fill(9);\n  P.ax.forEach((cx, i) => {\n    const cy = P.ay[i];\n    for (let y = max(0, round(cy) - 3); y \u003c= min(H - 1, round(cy) + 3); y++)\n      for (let x = max(0, round(cx) - 3); x \u003c= min(W - 1, round(cx) + 3); x++) {\n        const e = hypot(x - cx, y - cy), p = y * W + x;\n        if (e \u003c best[p]) (best[p] = e), (own[p] = P.ak[i]);\n      }\n  });\n  under(P);\n}\n\n// What lies behind the lungs, breathed out, as colour times cover: the\n// larynx, the diaphragm and, dim under it, the liver and the stomach.\nfunction under(P) {\n  const { und, ua } = P;\n  const lay = (p, r, g, b, a) => {\n    if (a \u003c= 0) return;\n    const o = p * 3;\n    (und[o] += (r - und[o]) * a), (und[o + 1] += (g - und[o + 1]) * a), (und[o + 2] += (b - und[o + 2]) * a), (ua[p] += (1 - ua[p]) * a);\n  };\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, t = y - d0(x), ax = abs(x - 32);\n    if (t > 3) {\n      const xb = 37 + 3 * sin(y * 0.21), f = (1 - 0.55 * sm(3, 20, t)) * (0.7 + 0.5 * vn(x * 0.17, y * 0.17)) * (0.4 + 0.6 * sm(0.3, 2, abs(x - xb)));\n      x \u003c xb ? lay(p, 60 * f, 20 * f, 22 * f, cl(t - 3, 0, 1)) : lay(p, 50 * f, 30 * f, 44 * f, cl(t - 3, 0, 1));\n    }\n    // The diaphragm: a band of muscle with a lit upper face, its tendon pale\n    // in the middle under the heart.\n    if (t > -0.5 && t \u003c 4) {\n      const ten = sm(24, 29, x) * sm(43, 38, x), st = 0.8 + 0.2 * sin(x * 1.9 + t * 0.9), lit = 1 + 0.45 * sm(1.6, 0, t);\n      lay(p, mix(232 * st, 214, ten) * 0.72 * lit, mix(82 * st, 198, ten) * 0.66 * lit, mix(96, 188, ten) * 0.66 * lit, cl(min(t + 0.5, 4 - t), 0, 1));\n    }\n    if (y \u003c 19) {\n      const hy = 3.4 + 0.03 * ax * ax;\n      if (ax \u003c 9.5) lay(p, 200, 192, 176, 0.5 * cl(1 - abs(y - hy) / 0.9, 0, 1));\n      const top = 6 + 2.2 * max(0, 1 - ax / 2.4), hw = 7.4 - 0.42 * (y - 6), e = min(y - top, 14.6 - y, hw - ax);\n      // The thyroid cartilage, its left plate lit and the right in shade.\n      if (e > -0.5) lay(p, 206, 196, 184, cl(e + 0.5, 0, 1) * (0.42 + 0.2 * exp(-((ax / 1.8) ** 2)) + 0.25 * sm(1.2, 0.2, e)) * (x \u003c 32 ? 1.05 : 0.78));\n      if (y > 15 && y \u003c 17.6 && ax \u003c 4.9) lay(p, 214, 204, 192, 0.55 * cl(4.9 - ax, 0, 1));\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.t += dt;\n  P.air = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3), dep = cl(k[2], 0, 1), alt = cl(k[3], 0, 1);\n  const bpm = (8 + 4.5 * rate + 12 * max(0, rate - 2) ** 2) * (1 + 0.45 * alt);\n  P.D = (0.5 + 0.5 * dep) * (1 - 0.4 * sm(2, 3, rate)) * (1 + 0.22 * alt);\n  if (input.btnPressed && input.btnPressed[0] && P.ct \u003c 0) (P.ct = 0), (P.cv = P.vol), (P.cn = 0);\n  let vol = 0, envIn = 0, envOut = 0, Fin = -1, Fx = 2;\n  P.bf = [];\n  P.jolt = 0;\n  if (P.ct >= 0) {\n    // A gasp, then three coughs, each a jolt and a burst of warm air up the tree.\n    const c = (P.ct += dt);\n    let j = 0;\n    while (j \u003c CK.length - 4 && c > CK[j + 2]) j += 2;\n    vol = mix(j ? CK[j + 1] : P.cv, CK[j + 3], sm(CK[j], CK[j + 2], c));\n    if (c \u003c 0.4) (envIn = sin((PI * c) / 0.4) ** 0.5), (Fin = 1.12 * (1 - (1 - cl(c / 0.3, 0, 1)) ** 2));\n    for (const tc of CT) {\n      const u = c - tc;\n      if (u > 0 && u \u003c 0.7) P.bf.push(1 - u * 3.2), (P.jolt = max(P.jolt, 2.4 * exp(-u / 0.08)));\n    }\n    if (P.cn \u003c 3 && c > CT[P.cn] + 0.28) P.puffs.push([0, 2, rnd()]), P.cn++;\n    if (c > 1.9) (P.ct = -1), (P.ph = 0.9);\n  } else {\n    // In for 38% of a breath, out for half, then a short rest.\n    const p = (P.ph = (P.ph + (dt * bpm) / 60) % 1);\n    if (p \u003c 0.38) (vol = 0.5 - 0.5 * cos((PI * p) / 0.38)), (envIn = sin((PI * p) / 0.38) ** 0.5), (Fin = 1.12 * (1 - (1 - cl(p / 0.3, 0, 1)) ** 2));\n    else if (p \u003c 0.88) {\n      const u = (p - 0.38) / 0.5;\n      (vol = 0.5 + 0.5 * cos(PI * u)), (envOut = sin(PI * u) ** 0.5), (Fx = 1.06 - 1.2 * sm(0.02, 0.8, u));\n    }\n    if (P.lp \u003c 0.64 && p >= 0.64) P.puffs.push([0, 1, rnd()]);\n    P.lp = p;\n  }\n  Object.assign(P, { vol, envIn, envOut, Fin, Fx });\n  // The alveoli the cold air has reached take up oxygen fast; the rest give it\n  // up slowly to the blood that carries it away.\n  const wS = max(0, 2 * P.air - 1), hi = 1 - 0.66 * alt - 0.14 * wS, { cd, cox, airK } = P;\n  for (let i = 0; i \u003c cd.length; i++) {\n    cox[i] += Fin > cd[i] ? (hi - cox[i]) * (1 - exp(-dt * 7)) : (0.05 - cox[i]) * (1 - exp(-dt * 0.85));\n    airK[i] = envIn * exp(-(((Fin - cd[i]) / 0.07) ** 2));\n  }\n  P.hp = (P.hp + (dt * (62 + 10 * rate + 40 * alt)) / 60) % 1;\n  P.hb = exp(-(((P.hp - 0.06) / 0.05) ** 2)) + 0.6 * exp(-(((P.hp - 0.3) / 0.05) ** 2));\n  P.puffs = P.puffs.filter((f) => (f[0] += dt) \u003c 5);\n}\n\n// Rest coordinates to the panel, breathed in by the per-row and per-column\n// scales: out to the sides, down with the diaphragm.\nlet FX = 0, FY = 0;\nfunction fw(P, xr, yr) {\n  const { SX, KY } = P, kx = cl(32 + (xr - 32) * SX[cl(round(yr), 0, H - 1)], 0, 62.99), ki = floor(kx);\n  FY = A0 + (yr - A0) * (KY[ki] + (KY[ki + 1] - KY[ki]) * (kx - ki));\n  FX = 32 + (xr - 32) * SX[cl(round(FY), 0, H - 1)];\n}\n\nfunction alveoli(P) {\n  const { alvA, alvS, alvK, ax, ay, as } = P, rA = 1.02 + 0.52 * P.vol * P.D;\n  alvA.fill(0);\n  for (let i = 0; i \u003c ax.length; i++) {\n    fw(P, ax[i], ay[i]);\n    const cx = FX, cy = FY, r = rA * as[i], lim = (r + 0.5) ** 2;\n    for (let y = max(0, ceil(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r + 0.5)); y++)\n      for (let x = max(0, ceil(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r + 0.5)); x++) {\n        const dx = x - cx, dy = y - cy, e2 = dx * dx + dy * dy;\n        if (e2 >= lim) continue;\n        const e = sqrt(e2), a = cl(r + 0.5 - e, 0, 1), p = y * W + x;\n        const q = e / r, hx = dx + 0.4 * r, hy = dy + 0.45 * r, hl = max(0, 1 - sqrt(hx * hx + hy * hy) / (0.75 * r));\n        const s = 0.72 + 0.28 * sqrt(max(0, 1 - q * q)) + 0.38 * hl * hl;\n        if (a * s > alvA[p] * alvS[p]) (alvA[p] = a), (alvS[p] = s), (alvK[p] = i);\n      }\n  }\n}\n\nfunction tree(P) {\n  const { seg: S, trA, trV, trS, trG, trH } = P, dil = 1 + 0.1 * P.vol * P.D;\n  trA.fill(0);\n  trH.fill(0);\n  for (let j = 0; j \u003c S.length; j += 8) {\n    fw(P, S[j], S[j + 1]);\n    const x0 = FX, y0 = FY;\n    fw(P, S[j + 2], S[j + 3]);\n    const ex = FX - x0, ey = FY - y0, l2 = ex * ex + ey * ey || 1e-6, r = S[j + 4] * dil, g = S[j + 5], da = S[j + 6], db = S[j + 7], lim = (r + 1.7) ** 2, hr = min(1, r);\n    for (let y = max(0, floor(min(y0, FY) - r - 1)); y \u003c= min(H - 1, ceil(max(y0, FY) + r + 1)); y++)\n      for (let x = max(0, floor(min(x0, FX) - r - 1)); x \u003c= min(W - 1, ceil(max(x0, FX) + r + 1)); x++) {\n        const t = cl(((x - x0) * ex + (y - y0) * ey) / l2, 0, 1), px = x - x0 - ex * t, py = y - y0 - ey * t, e2 = px * px + py * py;\n        if (e2 >= lim) continue;\n        const e = sqrt(e2), a = cl(r + 0.5 - e, 0, 1), p = y * W + x, h = cl(r + 1.7 - e, 0, 1) * hr;\n        if (h > trH[p]) trH[p] = h;\n        if (a > trA[p]) (trA[p] = a), (trS[p] = da + (db - da) * t), (trV[p] = e / r), (trG[p] = g);\n      }\n  }\n}\n\n// The collarbones and ten ribs, faint arcs that lift and spread on a breath.\nfunction ribs(P) {\n  const { rib, SX } = P, v = P.vol * P.D;\n  rib.fill(0);\n  const dot = (fx, fy, rad, k) => {\n    for (let y = max(0, round(fy) - 1); y \u003c= min(H - 1, round(fy) + 1); y++)\n      for (let x = max(0, round(fx) - 1); x \u003c= min(W - 1, round(fx) + 1); x++) {\n        const a = cl(rad + 0.5 - sqrt((x - fx) ** 2 + (y - fy) ** 2), 0, 1) * k, p = y * W + x;\n        if (a > rib[p]) rib[p] = a;\n      }\n  };\n  for (let i = 0; i \u003c= 10; i++)\n    for (const s of [-1, 1]) {\n      if (i === 0) {\n        for (let n = 0; n \u003c= 50; n++) {\n          const u = n / 50;\n          dot(32 + s * (4.5 + 21 * u), 18.6 - 4.2 * u + 1.4 * sin(PI * u) - 1.2 * v, 0.5 + 0.4 * (2 * u - 1) ** 2, 0.85);\n        }\n        continue;\n      }\n      const yr = 23 + (i - 1) * 8.4, y0 = yr - v * (1 + 0.42 * i), hw = (1.5 + 28.4 * (1 - exp(-(yr - 15) / 14))) * SX[round(yr)];\n      const rx = hw - 3, ry = (5.5 + 0.55 * i) * (1 - 0.25 * v), n = ceil((rx + ry) * 2.2);\n      for (let m = 0; m \u003c= n; m++) {\n        const th = (1.62 * m) / n;\n        dot(32 + s * (3 + rx * sin(th)), y0 + ry * (1 - cos(th)), 0.7, sm(0.2, 0.6, th));\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.cox) return;\n  const { SX, KY, sd, own, cox, cb, airK, und, ua, alvA, alvS, alvK, trA, trV, trS, trG, trH, rib, O, ak, soot, GL } = P, dm = 1 / P.dmax;\n  const t = P.t, v = P.vol * P.D, air = P.air, hb = P.hb, { envIn, envOut, Fin, Fx, bf } = P;\n  const wC = max(0, 1 - 2 * air), wW = 1 - abs(2 * air - 1), wS = max(0, 2 * air - 1);\n  const pal = (c, w, s) => [0, 1, 2].map((i) => c[i] * wC + w[i] * wW + s[i] * wS);\n  const bgT = pal([3, 7, 18], [16, 26, 48], [62, 50, 32]), bgB = pal([2, 4, 12], [8, 14, 30], [36, 28, 20]), glo = pal([8, 18, 40], [22, 38, 64], [40, 30, 18]);\n  const cold = pal([150, 205, 255], [215, 238, 255], [196, 178, 128]), warm = pal([255, 196, 160], [255, 224, 206], [190, 160, 130]);\n  const puffC = pal([255, 214, 196], [236, 242, 255], [168, 158, 144]), puffK = 0.6 * wC + 1.5 * wW + 0.7 * wS;\n  const oxA = [240 - 64 * wS, 46 + 26 * wS, 58 + 20 * wS];\n  for (let y = 0; y \u003c H; y++) SX[y] = 1 + 0.085 * v * (0.25 + 0.75 * sm(15, 115, y));\n  for (let x = 0; x \u003c W; x++) KY[x] = 1 + 0.14 * v * GX[x];\n  alveoli(P);\n  tree(P);\n  ribs(P);\n  // The breath leaving at the top: each puff rises, spreads and thins.\n  const pf = [];\n  for (const [age, str, sd0] of P.puffs) {\n    const R = 3 + (5 + 8 * wW) * age;\n    pf.push(32 + (sd0 - 0.5) * 8, 6 - 3.2 * age, R, str * sm(0, 0.25, age) * exp(-age / (0.9 + 1.6 * wW)), sd0 * 40);\n  }\n  const hs = 1 / (1 - 0.035 * hb);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const fy = y / 127, gl = GL[p];\n      let hz = 1;\n      if (wS > 0) hz = 1 + wS * (0.18 * sin(x * 0.2 + y * 0.05 + t * 0.6) + 0.18 * sin(y * 0.13 - x * 0.06 - t * 0.35));\n      for (let c = 0; c \u003c 3; c++) C[c] = (bgT[c] + (bgB[c] - bgT[c]) * fy + glo[c] * gl) * hz;\n      const xr = cl(32 + (x - 32) / SX[y], 0, 62.999), yr = cl(A0 + (y - A0) / KY[x], 0, 126.999);\n      const xi = xr | 0, yi = yr | 0, fx = xr - xi, fz = yr - yi, q = yi * W + xi;\n      if (ua[q] + ua[q + 1] + ua[q + W] + ua[q + W + 1] > 0) {\n        const w0 = (1 - fx) * (1 - fz) * ua[q], w1 = fx * (1 - fz) * ua[q + 1], w2 = (1 - fx) * fz * ua[q + W], w3 = fx * fz * ua[q + W + 1], a = 1 - w0 - w1 - w2 - w3;\n        const o0 = q * 3, o2 = o0 + W * 3;\n        for (let c = 0; c \u003c 3; c++) C[c] = C[c] * a + und[o0 + c] * w0 + und[o0 + 3 + c] * w1 + und[o2 + c] * w2 + und[o2 + 3 + c] * w3;\n      }\n      // The heart, dim behind the lungs, its apex down to the left.\n      if (xr > 20 && xr \u003c 56 && yr > 60 && yr \u003c 110) {\n        const dx = xr - 36.6, dy = yr - 86, hv = (dx * 0.6 + dy * 0.8) * hs, hu = (dx * 0.8 - dy * 0.6) * hs, eu = hu / (12.5 * (1 - 0.36 * sm(-6, 19, hv))), ev = hv / 19;\n        const a = cl((1 - sqrt(eu * eu + ev * ev)) * 9, 0, 1);\n        if (a > 0) {\n          const k = (0.4 + 0.32 * hb) * (0.65 + 0.45 * sm(9, -9, hu));\n          bl(150 * k, 26 * k, 44 * k, a);\n        }\n      }\n      // The lung: a dusky body, the grape clusters of alveoli, the capillary\n      // net shimmering on them, the pleura at the edge.\n      const s = samp(sd, xr, yr), qn = round(yr) * W + round(xr);\n      let m = 0;\n      if (s \u003c 1.2) {\n        const c = own[qn], ox = c >= 0 ? cox[c] : 0.3;\n        m = cl(0.5 - s, 0, 1);\n        if (m > 0) bl(24 + 56 * ox, 14 - 4 * ox, 50 - 20 * ox, 0.92 * m);\n        const aa = alvA[p];\n        if (aa > 0) {\n          const i = alvK[p], cc = ak[i], o = cox[cc], sh = alvS[p] * cb[cc] * (soot[i] \u003c wS * 0.4 ? 0.3 : 1), af = 0.4 * airK[cc];\n          for (let c = 0; c \u003c 3; c++) C[c] += ((DA[c] + (oxA[c] - DA[c]) * o) * sh + cold[c] * af - C[c]) * aa;\n        }\n        const cv = hash(qn, 5);\n        if (m > 0 && cv > 0.6) {\n          const k = (cv - 0.35) * (0.75 + 0.75 * sin(t * 6 + cv * 90 + 2 * hb)) * (0.12 + 0.34 * ox) * m;\n          (C[0] += 230 * k), (C[1] += 30 * k), (C[2] += 50 * k);\n        }\n        const rm = cl(1 - abs(s + 0.45) / 0.75, 0, 1) * 0.5;\n        if (rm > 0) bl(126 + 129 * ox, 100 + 24 * ox, 214 - 70 * ox, rm);\n        // A shadow along each airway lifts the tree off the alveoli.\n        bl(0, 0, 0, trH[p] * 0.5 * m);\n      }\n      // The airways, and the air in them.\n      const ta = trA[p];\n      if (ta > 0) {\n        const gg = trG[p], vv = trV[p], d = trS[p] * dm, wc = WC[gg], al = AG[gg] * ta;\n        let wb = 0.85;\n        if (gg \u003c= 1) {\n          const ring = 0.5 + 0.5 * cos(trS[p] * 2.73);\n          wb = (0.5 + 0.5 * sm(0.35, 0.95, vv)) * (0.66 + 0.44 * ring * ring);\n        } else if (gg \u003c= 3) wb = 0.65 + 0.35 * sm(0.3, 1, vv);\n        bl(wc[0] * wb, wc[1] * wb, wc[2] * wb, al);\n        let ca = 0, wa = 0;\n        if (envIn > 0 && d \u003c Fin) ca = envIn * (0.3 + 0.7 * exp(-(((Fin - d) / 0.05) ** 2)));\n        if (envOut > 0 && d > Fx) wa = envOut * (0.24 + 0.76 * exp(-(((d - Fx) / 0.05) ** 2)));\n        for (const f of bf) wa += 1.3 * exp(-(((d - f) / 0.06) ** 2)) + (d > f ? 0.25 : 0);\n        const lf = (gg \u003c= 1 ? 1 - 0.5 * sm(0.55, 1, vv) : 1) * ta * (gg === 9 ? 0.8 : 0.9);\n        for (let c = 0; c \u003c 3; c++) C[c] += (cold[c] * ca + warm[c] * wa) * lf;\n      }\n      const rb = rib[p];\n      if (rb > 0) bl(220, 210, 196, rb * (0.42 + 0.1 * m));\n      if (y \u003c 48 && pf.length) {\n        let pa = 0;\n        for (let j = 0; j \u003c pf.length; j += 5) {\n          const dx = (x - pf[j]) / (pf[j + 2] * 1.4), dy = (y - pf[j + 1]) / pf[j + 2], e = dx * dx + dy * dy;\n          if (e \u003c 4) pa += pf[j + 3] * exp(-e * 1.4) * cl(0.4 + 1.4 * (vn(x * 0.2 + pf[j + 4], y * 0.2 + t * 0.9) - 0.5) + 0.5 * exp(-e * 3), 0, 1.4);\n        }\n        if (pa > 0) bl(puffC[0], puffC[1], puffC[2], min(1, pa * puffK));\n      }\n      if (wS > 0) bl(120, 96, 62, 0.14 * wS * hz);\n      O.set(C, p * 3);\n    }\n  // A cough jolts the whole chest up.\n  const jl = round(P.jolt);\n  for (let y = 0; y \u003c H; y++) {\n    const o = min(H - 1, y + jl) * W * 3;\n    for (let x = 0; x \u003c W; x++) display.setPixel(x, y, min(255, O[o + x * 3]) | 0, min(255, O[o + x * 3 + 1]) | 0, min(255, O[o + x * 3 + 2]) | 0);\n  }\n}\n","layer":{"id":"layer-breath","type":"code","name":"breath","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Breath\n// Family:  body\n// Idea:    A pair of lungs drawn like an anatomical plate from the throat to the diaphragm breathes: the diaphragm drops, the ribs lift, the lungs swell, cold air runs down the bronchial tree into the alveoli and they flush from dusky violet to red, then the warm air rises back out as a puff at the top.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after anatomical plates of the lungs, with the bronchial tree grown by volume-filling branching (Tawhai, Pullan and Hunter, 2000)\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Air=0..1, Rate=0.2..3, Depth=0..1, Altitude=0..1\n//\n// Knob 1: Air. What is breathed: clear cool air at 0, cold winter air at 0.5 where every breath comes out as a white cloud at the top, and city smog at 1 that browns the sky and leaves soot in the alveoli.\n// Knob 2: Rate. Breaths a minute: about 9 asleep at 0.2, 17 at 2 (one every 3.5 s), and a shallow pant of 34 at 3.\n// Knob 3: Depth. A quiet breath at 0, where the domes of the diaphragm drop 7 LEDs, up to a deep sigh at 1 that drops them 14 and lifts and spreads the ribs twice as far.\n// Knob 4: Altitude. Sea level at 0, the top of Everest at 1: each breath brings less oxygen, so the alveoli flush only to a dusky purple, and the breathing quickens and deepens on its own.\n// Buttons: K1 tap makes the lungs cough: a quick gasp, then three jolts that blow warm air up the tree and out in puffs.\n\nconst W = 64, H = 128, N = W * H, A0 = 2;\nconst { min, max, abs, sin, cos, exp, sqrt, floor, ceil, round, hypot, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The diaphragm under the lungs breathed out, x then y: the right dome higher\n// over the liver, the heart sitting in the dip between the domes.\nconst DK = [-1, 118.5, 5, 113.8, 9, 108.4, 13, 103.8, 17, 101.6, 21, 101, 25, 101.8, 29, 104.2, 33, 106, 37, 106.6, 41, 106.6, 45, 105.8, 49, 106.8, 53, 110.2, 57, 115, 60, 117.8, 65, 122.5];\nconst D0T = F32(68);\nfor (let i = 0, k = 0; i \u003c 68; i++) {\n  while (k \u003c DK.length - 4 && i - 1 > DK[k + 2]) k += 2;\n  D0T[i] = mix(DK[k + 1], DK[k + 3], (i - 1 - DK[k]) / (DK[k + 2] - DK[k]));\n}\nfor (let n = 0; n \u003c 4; n++) for (let i = 1; i \u003c 67; i++) D0T[i] = (D0T[i - 1] + 2 * D0T[i] + D0T[i + 1]) / 4;\nconst d0 = (x) => ((x = cl(x + 1, 0, 66.99)), D0T[floor(x)] + (D0T[floor(x) + 1] - D0T[floor(x)]) * (x - floor(x)));\n// How far the diaphragm drops at each column: most under the two domes, so\n// they flatten.\nconst GX = Float32Array.from({ length: W }, (_, x) => 0.32 + 0.68 * (exp(-(((x - 17) / 10) ** 2)) + exp(-(((x - 46) / 10) ** 2))));\n// The outlines of the right lung (on the viewer's left) and the smaller left\n// lung with the heart's notch, breathed out. The diaphragm cuts their bases.\nconst LUNGS = [\n  [19, 21, 15, 22.5, 11.5, 26, 8.5, 32, 6.3, 40, 4.8, 50, 4, 60, 3.6, 72, 3.6, 84, 4, 96, 4.6, 106, 5.6, 126, 28.8, 126, 28.6, 104, 28.2, 98, 27.6, 90, 27.2, 82, 27.6, 74, 28.6, 66, 29, 58, 28.6, 50, 27.8, 42, 26.6, 34, 24.8, 27, 22.5, 22.5],\n  [44.5, 22, 48.5, 23.5, 52, 27, 55, 33, 57.2, 41, 58.8, 51, 59.6, 62, 60, 74, 60.2, 86, 60.2, 98, 59.9, 108, 59.2, 126, 41.5, 126, 41.5, 106, 41, 103, 42.4, 98, 44.5, 92, 45.4, 86, 44.4, 80, 41.8, 75, 38.6, 71, 36.6, 66, 36, 58, 36.4, 50, 37.2, 42, 38.4, 34, 40, 28, 42, 23.5],\n];\n// Airway walls by generation (9 is the channel through the larynx), and how\n// strongly each shows over the lung.\nconst WC = Array.from({ length: 10 }, (_, g) => (g \u003c 2 ? [226, 216, 204] : [232 - 2 * g, 208 - 4 * g, 206]));\nconst AG = Array.from({ length: 10 }, (_, g) => (g \u003c 2 ? 1 : g > 8 ? 0 : 1.1 - 0.08 * g));\n// The cough: seconds and lung volume, and the moments of the three jolts.\nconst CK = [0, 0, 0.32, 0.97, 0.44, 0.97, 0.54, 0.66, 0.84, 0.66, 0.94, 0.38, 1.24, 0.38, 1.34, 0.12, 1.9, 0];\nconst CT = [0.44, 0.84, 1.24];\n\nfunction sdPoly(v, px, py) {\n  let d = 1e9, s = 1;\n  for (let i = 0, j = v.length - 2; i \u003c v.length; j = i, i += 2) {\n    const ex = v[j] - v[i], ey = v[j + 1] - v[i + 1], wx = px - v[i], wy = py - v[i + 1];\n    const t = cl((wx * ex + wy * ey) / (ex * ex + ey * ey), 0, 1), bx = wx - ex * t, by = wy - ey * t;\n    d = min(d, bx * bx + by * by);\n    const c1 = py >= v[i + 1], c2 = py \u003c v[j + 1], c3 = ex * wy > ey * wx;\n    if ((c1 && c2 && c3) || (!c1 && !c2 && !c3)) s = -s;\n  }\n  return s * sqrt(d);\n}\n// The colour being built for one LED, and mixing toward another by k.\nconst C = F32(3);\nconst DA = [74, 58, 156];\nconst bl = (r, g, b, k) => ((C[0] += (r - C[0]) * k), (C[1] += (g - C[1]) * k), (C[2] += (b - C[2]) * k));\nfunction samp(A, x, y) {\n  x = cl(x, 0, 62.999);\n  y = cl(y, 0, 126.999);\n  const xi = x | 0, yi = y | 0, fx = x - xi, p = yi * W + xi, a = A[p] + (A[p + 1] - A[p]) * fx;\n  return a + (A[p + W] + (A[p + W + 1] - A[p + W]) * fx - a) * (y - yi);\n}\n\nexport function setup(params) {\n  const P = (params.s = {\n    t: 0, ph: 0.68, lp: 0.68, vol: 0.6, D: 0.5, air: 0, ct: -1, jolt: 0, hp: 0, hb: 0, envIn: 0, envOut: 0, Fin: -1, Fx: 2, bf: [], puffs: [],\n    sd: F32(N), own: new Int16Array(N).fill(-1), und: F32(N * 3), ua: F32(N), GL: F32(N),\n    SX: F32(H), KY: F32(W), alvA: F32(N), alvS: F32(N), alvK: new Int16Array(N), trA: F32(N), trV: F32(N), trS: F32(N), trG: new Int8Array(N), rib: F32(N), O: F32(N * 3),\n    seg: [], ax: [], ay: [], as: [], soot: [], cd: [], cb: [], trH: F32(N),\n  });\n  build(P);\n}\n\nfunction addSeg(P, x0, y0, x1, y1, r, g, d) {\n  const e = d + hypot(x1 - x0, y1 - y0);\n  P.seg.push(x0, y0, x1, y1, r, g, d, e);\n  return e;\n}\n\n// Volume-filling branching: a branch's alveoli are split by the line from its\n// end through their centroid, and each half gets a child that runs 40% of the\n// way to its own centroid, until a handful is left: one grape cluster.\nfunction grow(P, x0, y0, dx, dy, pts, g, r, d) {\n  const { ax, ay } = P, n = pts.length;\n  let cx = 0, cy = 0;\n  for (const i of pts) (cx += ax[i]), (cy += ay[i]);\n  (cx /= n), (cy /= n);\n  if (n \u003c= 7 || g > 8) {\n    for (const i of pts) (P.ak[i] = P.cd.length), (ax[i] += (cx - ax[i]) * 0.3), (ay[i] += (cy - ay[i]) * 0.3);\n    P.cd.push(d + hypot(cx - x0, cy - y0));\n    P.cb.push(0.84 + 0.32 * rnd());\n    return;\n  }\n  // The lobes split along the line from the branch to their centroid; past\n  // them each set is cut across its long axis, a near half and a far one.\n  let ux = cx - x0, uy = cy - y0, ul = hypot(ux, uy), ox = x0, oy = y0;\n  if (g > 2) {\n    let sxx = 0, syy = 0, sxy = 0;\n    for (const i of pts) (sxx += (ax[i] - cx) ** 2), (syy += (ay[i] - cy) ** 2), (sxy += (ax[i] - cx) * (ay[i] - cy));\n    const th = 0.5 * atan2(2 * sxy, sxx - syy) + PI / 2;\n    (ux = cos(th)), (uy = sin(th)), (ul = 1), (ox = cx), (oy = cy);\n  }\n  if (ul \u003c 0.5) (ux = dx), (uy = dy), (ul = hypot(dx, dy));\n  (ux /= ul), (uy /= ul);\n  const side = (i) => (ax[i] - ox) * uy - (ay[i] - oy) * ux;\n  let A = pts.filter((i) => side(i) > 0), B = pts.filter((i) => side(i) \u003c= 0);\n  if (A.length \u003c 2 || B.length \u003c 2) {\n    const s = pts.slice().sort((i, j) => side(i) - side(j));\n    (A = s.slice(0, n >> 1)), (B = s.slice(n >> 1));\n  }\n  const pa = atan2(dy, dx), lim = g === 2 ? 1.75 : 1.1;\n  for (const Q of [A, B]) {\n    let qx = 0, qy = 0;\n    for (const i of Q) (qx += ax[i]), (qy += ay[i]);\n    (qx = qx / Q.length - x0), (qy = qy / Q.length - y0);\n    let a = atan2(qy, qx), da = a - pa;\n    da = atan2(sin(da), cos(da));\n    if (abs(da) > lim) a = pa + Math.sign(da) * lim;\n    let len = max(1.2, hypot(qx, qy) * (Q.length \u003c= 7 ? 0.55 : 0.4)), x1, y1;\n    for (;;) {\n      (x1 = x0 + cos(a) * len), (y1 = y0 + sin(a) * len);\n      if (len \u003c= 1.2 || samp(P.sd, x1, y1) \u003c -0.6) break;\n      len *= 0.8;\n    }\n    const rr = max(0.5, r * Math.cbrt(Q.length / n));\n    grow(P, x1, y1, x1 - x0, y1 - y0, Q, g + 1, rr, addSeg(P, x0, y0, x1, y1, rr, g, d));\n  }\n}\n\nfunction build(P) {\n  const { sd, own, GL } = P;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, sl = d0(x + 0.5) - d0(x - 0.5), cut = (y - d0(x) + 0.6) / sqrt(1 + sl * sl);\n    const a = y \u003c 15 ? 6 : max(sdPoly(LUNGS[0], x, y), cut), b = y \u003c 15 ? 6 : max(sdPoly(LUNGS[1], x, y), cut);\n    sd[p] = min(a, b) + 0.9 * (vn(x * 0.32, y * 0.32) - 0.5);\n    GL[p] = exp(-(((x - 32) / 26) ** 2) - (((y - 66) / 50) ** 2));\n  }\n  // Alveoli on a jittered honeycomb inside the lungs.\n  const pts = [[], []];\n  for (let j = 0; j \u003c 56; j++)\n    for (let i = 0; i \u003c 29; i++) {\n      const x = 1 + i * 2.25 + (j & 1) * 1.125 + (rnd() - 0.5) * 0.7, y = 19 + j * 1.95 + (rnd() - 0.5) * 0.7;\n      if (x > 62.5 || y > 125 || samp(sd, x, y) > -1) continue;\n      pts[x \u003c 32 ? 0 : 1].push(P.ax.length);\n      P.ax.push(x), P.ay.push(y), P.as.push(0.86 + 0.28 * rnd()), P.soot.push(rnd());\n    }\n  P.ak = new Int16Array(P.ax.length);\n  // The larynx and trachea, the short steep right bronchus and the longer\n  // left one, then the trees.\n  let d = addSeg(P, 32, 3, 32, 16.5, 1, 9, 0);\n  d = addSeg(P, 32, 16.5, 32, 48.5, 3, 0, d);\n  grow(P, 26.6, 57, -4.8, 8.5, pts[0], 2, 2.3, addSeg(P, 31.3, 48.5, 26.6, 57, 2.3, 1, d));\n  grow(P, 40.4, 56.6, 7.8, 8.1, pts[1], 2, 2.05, addSeg(P, 32.7, 48.5, 40.4, 56.6, 2.05, 1, d));\n  P.dmax = max(...P.cd);\n  P.cd = Float32Array.from(P.cd, (v) => v / P.dmax);\n  P.cox = F32(P.cd.length).fill(0.55);\n  P.airK = F32(P.cd.length);\n  // Each lung pixel takes the cluster of its nearest alveolus.\n  const best = F32(N).fill(9);\n  P.ax.forEach((cx, i) => {\n    const cy = P.ay[i];\n    for (let y = max(0, round(cy) - 3); y \u003c= min(H - 1, round(cy) + 3); y++)\n      for (let x = max(0, round(cx) - 3); x \u003c= min(W - 1, round(cx) + 3); x++) {\n        const e = hypot(x - cx, y - cy), p = y * W + x;\n        if (e \u003c best[p]) (best[p] = e), (own[p] = P.ak[i]);\n      }\n  });\n  under(P);\n}\n\n// What lies behind the lungs, breathed out, as colour times cover: the\n// larynx, the diaphragm and, dim under it, the liver and the stomach.\nfunction under(P) {\n  const { und, ua } = P;\n  const lay = (p, r, g, b, a) => {\n    if (a \u003c= 0) return;\n    const o = p * 3;\n    (und[o] += (r - und[o]) * a), (und[o + 1] += (g - und[o + 1]) * a), (und[o + 2] += (b - und[o + 2]) * a), (ua[p] += (1 - ua[p]) * a);\n  };\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, t = y - d0(x), ax = abs(x - 32);\n    if (t > 3) {\n      const xb = 37 + 3 * sin(y * 0.21), f = (1 - 0.55 * sm(3, 20, t)) * (0.7 + 0.5 * vn(x * 0.17, y * 0.17)) * (0.4 + 0.6 * sm(0.3, 2, abs(x - xb)));\n      x \u003c xb ? lay(p, 60 * f, 20 * f, 22 * f, cl(t - 3, 0, 1)) : lay(p, 50 * f, 30 * f, 44 * f, cl(t - 3, 0, 1));\n    }\n    // The diaphragm: a band of muscle with a lit upper face, its tendon pale\n    // in the middle under the heart.\n    if (t > -0.5 && t \u003c 4) {\n      const ten = sm(24, 29, x) * sm(43, 38, x), st = 0.8 + 0.2 * sin(x * 1.9 + t * 0.9), lit = 1 + 0.45 * sm(1.6, 0, t);\n      lay(p, mix(232 * st, 214, ten) * 0.72 * lit, mix(82 * st, 198, ten) * 0.66 * lit, mix(96, 188, ten) * 0.66 * lit, cl(min(t + 0.5, 4 - t), 0, 1));\n    }\n    if (y \u003c 19) {\n      const hy = 3.4 + 0.03 * ax * ax;\n      if (ax \u003c 9.5) lay(p, 200, 192, 176, 0.5 * cl(1 - abs(y - hy) / 0.9, 0, 1));\n      const top = 6 + 2.2 * max(0, 1 - ax / 2.4), hw = 7.4 - 0.42 * (y - 6), e = min(y - top, 14.6 - y, hw - ax);\n      // The thyroid cartilage, its left plate lit and the right in shade.\n      if (e > -0.5) lay(p, 206, 196, 184, cl(e + 0.5, 0, 1) * (0.42 + 0.2 * exp(-((ax / 1.8) ** 2)) + 0.25 * sm(1.2, 0.2, e)) * (x \u003c 32 ? 1.05 : 0.78));\n      if (y > 15 && y \u003c 17.6 && ax \u003c 4.9) lay(p, 214, 204, 192, 0.55 * cl(4.9 - ax, 0, 1));\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.t += dt;\n  P.air = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3), dep = cl(k[2], 0, 1), alt = cl(k[3], 0, 1);\n  const bpm = (8 + 4.5 * rate + 12 * max(0, rate - 2) ** 2) * (1 + 0.45 * alt);\n  P.D = (0.5 + 0.5 * dep) * (1 - 0.4 * sm(2, 3, rate)) * (1 + 0.22 * alt);\n  if (input.btnPressed && input.btnPressed[0] && P.ct \u003c 0) (P.ct = 0), (P.cv = P.vol), (P.cn = 0);\n  let vol = 0, envIn = 0, envOut = 0, Fin = -1, Fx = 2;\n  P.bf = [];\n  P.jolt = 0;\n  if (P.ct >= 0) {\n    // A gasp, then three coughs, each a jolt and a burst of warm air up the tree.\n    const c = (P.ct += dt);\n    let j = 0;\n    while (j \u003c CK.length - 4 && c > CK[j + 2]) j += 2;\n    vol = mix(j ? CK[j + 1] : P.cv, CK[j + 3], sm(CK[j], CK[j + 2], c));\n    if (c \u003c 0.4) (envIn = sin((PI * c) / 0.4) ** 0.5), (Fin = 1.12 * (1 - (1 - cl(c / 0.3, 0, 1)) ** 2));\n    for (const tc of CT) {\n      const u = c - tc;\n      if (u > 0 && u \u003c 0.7) P.bf.push(1 - u * 3.2), (P.jolt = max(P.jolt, 2.4 * exp(-u / 0.08)));\n    }\n    if (P.cn \u003c 3 && c > CT[P.cn] + 0.28) P.puffs.push([0, 2, rnd()]), P.cn++;\n    if (c > 1.9) (P.ct = -1), (P.ph = 0.9);\n  } else {\n    // In for 38% of a breath, out for half, then a short rest.\n    const p = (P.ph = (P.ph + (dt * bpm) / 60) % 1);\n    if (p \u003c 0.38) (vol = 0.5 - 0.5 * cos((PI * p) / 0.38)), (envIn = sin((PI * p) / 0.38) ** 0.5), (Fin = 1.12 * (1 - (1 - cl(p / 0.3, 0, 1)) ** 2));\n    else if (p \u003c 0.88) {\n      const u = (p - 0.38) / 0.5;\n      (vol = 0.5 + 0.5 * cos(PI * u)), (envOut = sin(PI * u) ** 0.5), (Fx = 1.06 - 1.2 * sm(0.02, 0.8, u));\n    }\n    if (P.lp \u003c 0.64 && p >= 0.64) P.puffs.push([0, 1, rnd()]);\n    P.lp = p;\n  }\n  Object.assign(P, { vol, envIn, envOut, Fin, Fx });\n  // The alveoli the cold air has reached take up oxygen fast; the rest give it\n  // up slowly to the blood that carries it away.\n  const wS = max(0, 2 * P.air - 1), hi = 1 - 0.66 * alt - 0.14 * wS, { cd, cox, airK } = P;\n  for (let i = 0; i \u003c cd.length; i++) {\n    cox[i] += Fin > cd[i] ? (hi - cox[i]) * (1 - exp(-dt * 7)) : (0.05 - cox[i]) * (1 - exp(-dt * 0.85));\n    airK[i] = envIn * exp(-(((Fin - cd[i]) / 0.07) ** 2));\n  }\n  P.hp = (P.hp + (dt * (62 + 10 * rate + 40 * alt)) / 60) % 1;\n  P.hb = exp(-(((P.hp - 0.06) / 0.05) ** 2)) + 0.6 * exp(-(((P.hp - 0.3) / 0.05) ** 2));\n  P.puffs = P.puffs.filter((f) => (f[0] += dt) \u003c 5);\n}\n\n// Rest coordinates to the panel, breathed in by the per-row and per-column\n// scales: out to the sides, down with the diaphragm.\nlet FX = 0, FY = 0;\nfunction fw(P, xr, yr) {\n  const { SX, KY } = P, kx = cl(32 + (xr - 32) * SX[cl(round(yr), 0, H - 1)], 0, 62.99), ki = floor(kx);\n  FY = A0 + (yr - A0) * (KY[ki] + (KY[ki + 1] - KY[ki]) * (kx - ki));\n  FX = 32 + (xr - 32) * SX[cl(round(FY), 0, H - 1)];\n}\n\nfunction alveoli(P) {\n  const { alvA, alvS, alvK, ax, ay, as } = P, rA = 1.02 + 0.52 * P.vol * P.D;\n  alvA.fill(0);\n  for (let i = 0; i \u003c ax.length; i++) {\n    fw(P, ax[i], ay[i]);\n    const cx = FX, cy = FY, r = rA * as[i], lim = (r + 0.5) ** 2;\n    for (let y = max(0, ceil(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r + 0.5)); y++)\n      for (let x = max(0, ceil(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r + 0.5)); x++) {\n        const dx = x - cx, dy = y - cy, e2 = dx * dx + dy * dy;\n        if (e2 >= lim) continue;\n        const e = sqrt(e2), a = cl(r + 0.5 - e, 0, 1), p = y * W + x;\n        const q = e / r, hx = dx + 0.4 * r, hy = dy + 0.45 * r, hl = max(0, 1 - sqrt(hx * hx + hy * hy) / (0.75 * r));\n        const s = 0.72 + 0.28 * sqrt(max(0, 1 - q * q)) + 0.38 * hl * hl;\n        if (a * s > alvA[p] * alvS[p]) (alvA[p] = a), (alvS[p] = s), (alvK[p] = i);\n      }\n  }\n}\n\nfunction tree(P) {\n  const { seg: S, trA, trV, trS, trG, trH } = P, dil = 1 + 0.1 * P.vol * P.D;\n  trA.fill(0);\n  trH.fill(0);\n  for (let j = 0; j \u003c S.length; j += 8) {\n    fw(P, S[j], S[j + 1]);\n    const x0 = FX, y0 = FY;\n    fw(P, S[j + 2], S[j + 3]);\n    const ex = FX - x0, ey = FY - y0, l2 = ex * ex + ey * ey || 1e-6, r = S[j + 4] * dil, g = S[j + 5], da = S[j + 6], db = S[j + 7], lim = (r + 1.7) ** 2, hr = min(1, r);\n    for (let y = max(0, floor(min(y0, FY) - r - 1)); y \u003c= min(H - 1, ceil(max(y0, FY) + r + 1)); y++)\n      for (let x = max(0, floor(min(x0, FX) - r - 1)); x \u003c= min(W - 1, ceil(max(x0, FX) + r + 1)); x++) {\n        const t = cl(((x - x0) * ex + (y - y0) * ey) / l2, 0, 1), px = x - x0 - ex * t, py = y - y0 - ey * t, e2 = px * px + py * py;\n        if (e2 >= lim) continue;\n        const e = sqrt(e2), a = cl(r + 0.5 - e, 0, 1), p = y * W + x, h = cl(r + 1.7 - e, 0, 1) * hr;\n        if (h > trH[p]) trH[p] = h;\n        if (a > trA[p]) (trA[p] = a), (trS[p] = da + (db - da) * t), (trV[p] = e / r), (trG[p] = g);\n      }\n  }\n}\n\n// The collarbones and ten ribs, faint arcs that lift and spread on a breath.\nfunction ribs(P) {\n  const { rib, SX } = P, v = P.vol * P.D;\n  rib.fill(0);\n  const dot = (fx, fy, rad, k) => {\n    for (let y = max(0, round(fy) - 1); y \u003c= min(H - 1, round(fy) + 1); y++)\n      for (let x = max(0, round(fx) - 1); x \u003c= min(W - 1, round(fx) + 1); x++) {\n        const a = cl(rad + 0.5 - sqrt((x - fx) ** 2 + (y - fy) ** 2), 0, 1) * k, p = y * W + x;\n        if (a > rib[p]) rib[p] = a;\n      }\n  };\n  for (let i = 0; i \u003c= 10; i++)\n    for (const s of [-1, 1]) {\n      if (i === 0) {\n        for (let n = 0; n \u003c= 50; n++) {\n          const u = n / 50;\n          dot(32 + s * (4.5 + 21 * u), 18.6 - 4.2 * u + 1.4 * sin(PI * u) - 1.2 * v, 0.5 + 0.4 * (2 * u - 1) ** 2, 0.85);\n        }\n        continue;\n      }\n      const yr = 23 + (i - 1) * 8.4, y0 = yr - v * (1 + 0.42 * i), hw = (1.5 + 28.4 * (1 - exp(-(yr - 15) / 14))) * SX[round(yr)];\n      const rx = hw - 3, ry = (5.5 + 0.55 * i) * (1 - 0.25 * v), n = ceil((rx + ry) * 2.2);\n      for (let m = 0; m \u003c= n; m++) {\n        const th = (1.62 * m) / n;\n        dot(32 + s * (3 + rx * sin(th)), y0 + ry * (1 - cos(th)), 0.7, sm(0.2, 0.6, th));\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.cox) return;\n  const { SX, KY, sd, own, cox, cb, airK, und, ua, alvA, alvS, alvK, trA, trV, trS, trG, trH, rib, O, ak, soot, GL } = P, dm = 1 / P.dmax;\n  const t = P.t, v = P.vol * P.D, air = P.air, hb = P.hb, { envIn, envOut, Fin, Fx, bf } = P;\n  const wC = max(0, 1 - 2 * air), wW = 1 - abs(2 * air - 1), wS = max(0, 2 * air - 1);\n  const pal = (c, w, s) => [0, 1, 2].map((i) => c[i] * wC + w[i] * wW + s[i] * wS);\n  const bgT = pal([3, 7, 18], [16, 26, 48], [62, 50, 32]), bgB = pal([2, 4, 12], [8, 14, 30], [36, 28, 20]), glo = pal([8, 18, 40], [22, 38, 64], [40, 30, 18]);\n  const cold = pal([150, 205, 255], [215, 238, 255], [196, 178, 128]), warm = pal([255, 196, 160], [255, 224, 206], [190, 160, 130]);\n  const puffC = pal([255, 214, 196], [236, 242, 255], [168, 158, 144]), puffK = 0.6 * wC + 1.5 * wW + 0.7 * wS;\n  const oxA = [240 - 64 * wS, 46 + 26 * wS, 58 + 20 * wS];\n  for (let y = 0; y \u003c H; y++) SX[y] = 1 + 0.085 * v * (0.25 + 0.75 * sm(15, 115, y));\n  for (let x = 0; x \u003c W; x++) KY[x] = 1 + 0.14 * v * GX[x];\n  alveoli(P);\n  tree(P);\n  ribs(P);\n  // The breath leaving at the top: each puff rises, spreads and thins.\n  const pf = [];\n  for (const [age, str, sd0] of P.puffs) {\n    const R = 3 + (5 + 8 * wW) * age;\n    pf.push(32 + (sd0 - 0.5) * 8, 6 - 3.2 * age, R, str * sm(0, 0.25, age) * exp(-age / (0.9 + 1.6 * wW)), sd0 * 40);\n  }\n  const hs = 1 / (1 - 0.035 * hb);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const fy = y / 127, gl = GL[p];\n      let hz = 1;\n      if (wS > 0) hz = 1 + wS * (0.18 * sin(x * 0.2 + y * 0.05 + t * 0.6) + 0.18 * sin(y * 0.13 - x * 0.06 - t * 0.35));\n      for (let c = 0; c \u003c 3; c++) C[c] = (bgT[c] + (bgB[c] - bgT[c]) * fy + glo[c] * gl) * hz;\n      const xr = cl(32 + (x - 32) / SX[y], 0, 62.999), yr = cl(A0 + (y - A0) / KY[x], 0, 126.999);\n      const xi = xr | 0, yi = yr | 0, fx = xr - xi, fz = yr - yi, q = yi * W + xi;\n      if (ua[q] + ua[q + 1] + ua[q + W] + ua[q + W + 1] > 0) {\n        const w0 = (1 - fx) * (1 - fz) * ua[q], w1 = fx * (1 - fz) * ua[q + 1], w2 = (1 - fx) * fz * ua[q + W], w3 = fx * fz * ua[q + W + 1], a = 1 - w0 - w1 - w2 - w3;\n        const o0 = q * 3, o2 = o0 + W * 3;\n        for (let c = 0; c \u003c 3; c++) C[c] = C[c] * a + und[o0 + c] * w0 + und[o0 + 3 + c] * w1 + und[o2 + c] * w2 + und[o2 + 3 + c] * w3;\n      }\n      // The heart, dim behind the lungs, its apex down to the left.\n      if (xr > 20 && xr \u003c 56 && yr > 60 && yr \u003c 110) {\n        const dx = xr - 36.6, dy = yr - 86, hv = (dx * 0.6 + dy * 0.8) * hs, hu = (dx * 0.8 - dy * 0.6) * hs, eu = hu / (12.5 * (1 - 0.36 * sm(-6, 19, hv))), ev = hv / 19;\n        const a = cl((1 - sqrt(eu * eu + ev * ev)) * 9, 0, 1);\n        if (a > 0) {\n          const k = (0.4 + 0.32 * hb) * (0.65 + 0.45 * sm(9, -9, hu));\n          bl(150 * k, 26 * k, 44 * k, a);\n        }\n      }\n      // The lung: a dusky body, the grape clusters of alveoli, the capillary\n      // net shimmering on them, the pleura at the edge.\n      const s = samp(sd, xr, yr), qn = round(yr) * W + round(xr);\n      let m = 0;\n      if (s \u003c 1.2) {\n        const c = own[qn], ox = c >= 0 ? cox[c] : 0.3;\n        m = cl(0.5 - s, 0, 1);\n        if (m > 0) bl(24 + 56 * ox, 14 - 4 * ox, 50 - 20 * ox, 0.92 * m);\n        const aa = alvA[p];\n        if (aa > 0) {\n          const i = alvK[p], cc = ak[i], o = cox[cc], sh = alvS[p] * cb[cc] * (soot[i] \u003c wS * 0.4 ? 0.3 : 1), af = 0.4 * airK[cc];\n          for (let c = 0; c \u003c 3; c++) C[c] += ((DA[c] + (oxA[c] - DA[c]) * o) * sh + cold[c] * af - C[c]) * aa;\n        }\n        const cv = hash(qn, 5);\n        if (m > 0 && cv > 0.6) {\n          const k = (cv - 0.35) * (0.75 + 0.75 * sin(t * 6 + cv * 90 + 2 * hb)) * (0.12 + 0.34 * ox) * m;\n          (C[0] += 230 * k), (C[1] += 30 * k), (C[2] += 50 * k);\n        }\n        const rm = cl(1 - abs(s + 0.45) / 0.75, 0, 1) * 0.5;\n        if (rm > 0) bl(126 + 129 * ox, 100 + 24 * ox, 214 - 70 * ox, rm);\n        // A shadow along each airway lifts the tree off the alveoli.\n        bl(0, 0, 0, trH[p] * 0.5 * m);\n      }\n      // The airways, and the air in them.\n      const ta = trA[p];\n      if (ta > 0) {\n        const gg = trG[p], vv = trV[p], d = trS[p] * dm, wc = WC[gg], al = AG[gg] * ta;\n        let wb = 0.85;\n        if (gg \u003c= 1) {\n          const ring = 0.5 + 0.5 * cos(trS[p] * 2.73);\n          wb = (0.5 + 0.5 * sm(0.35, 0.95, vv)) * (0.66 + 0.44 * ring * ring);\n        } else if (gg \u003c= 3) wb = 0.65 + 0.35 * sm(0.3, 1, vv);\n        bl(wc[0] * wb, wc[1] * wb, wc[2] * wb, al);\n        let ca = 0, wa = 0;\n        if (envIn > 0 && d \u003c Fin) ca = envIn * (0.3 + 0.7 * exp(-(((Fin - d) / 0.05) ** 2)));\n        if (envOut > 0 && d > Fx) wa = envOut * (0.24 + 0.76 * exp(-(((d - Fx) / 0.05) ** 2)));\n        for (const f of bf) wa += 1.3 * exp(-(((d - f) / 0.06) ** 2)) + (d > f ? 0.25 : 0);\n        const lf = (gg \u003c= 1 ? 1 - 0.5 * sm(0.55, 1, vv) : 1) * ta * (gg === 9 ? 0.8 : 0.9);\n        for (let c = 0; c \u003c 3; c++) C[c] += (cold[c] * ca + warm[c] * wa) * lf;\n      }\n      const rb = rib[p];\n      if (rb > 0) bl(220, 210, 196, rb * (0.42 + 0.1 * m));\n      if (y \u003c 48 && pf.length) {\n        let pa = 0;\n        for (let j = 0; j \u003c pf.length; j += 5) {\n          const dx = (x - pf[j]) / (pf[j + 2] * 1.4), dy = (y - pf[j + 1]) / pf[j + 2], e = dx * dx + dy * dy;\n          if (e \u003c 4) pa += pf[j + 3] * exp(-e * 1.4) * cl(0.4 + 1.4 * (vn(x * 0.2 + pf[j + 4], y * 0.2 + t * 0.9) - 0.5) + 0.5 * exp(-e * 3), 0, 1.4);\n        }\n        if (pa > 0) bl(puffC[0], puffC[1], puffC[2], min(1, pa * puffK));\n      }\n      if (wS > 0) bl(120, 96, 62, 0.14 * wS * hz);\n      O.set(C, p * 3);\n    }\n  // A cough jolts the whole chest up.\n  const jl = round(P.jolt);\n  for (let y = 0; y \u003c H; y++) {\n    const o = min(H - 1, y + jl) * W * 3;\n    for (let x = 0; x \u003c W; x++) display.setPixel(x, y, min(255, O[o + x * 3]) | 0, min(255, O[o + x * 3 + 1]) | 0, min(255, O[o + x * 3 + 2]) | 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Air=0..1, Rate=0.2..3, Depth=0..1, Altitude=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Air","min":0,"max":1,"about":"What is breathed: clear cool air at 0, cold winter air at 0.5 where every breath comes out as a white cloud at the top, and city smog at 1 that browns the sky and leaves soot in the alveoli."},{"name":"Rate","min":0.2,"max":3,"about":"Breaths a minute: about 9 asleep at 0.2, 17 at 2 (one every 3.5 s), and a shallow pant of 34 at 3."},{"name":"Depth","min":0,"max":1,"about":"A quiet breath at 0, where the domes of the diaphragm drop 7 LEDs, up to a deep sigh at 1 that drops them 14 and lifts and spreads the ribs twice as far."},{"name":"Altitude","min":0,"max":1,"about":"Sea level at 0, the top of Everest at 1: each breath brings less oxygen, so the alveoli flush only to a dusky purple, and the breathing quickens and deepens on its own."}],"start":[0,2,0,0.06],"measures":{"motion":0.3669,"detail":0.0863,"edges":0.4238,"complexity":2.0569,"coverage":0.8446,"colour":0.207,"drift":0.1347},"knobResponse":[0.0972,0.1294,0.1076,0.1068]},{"slug":"brushstrokes","title":"Brushstrokes","family":"noise","round":17,"note":"반 고흐의 「별이 빛나는 밤」을 짧고 두꺼운 붓질로 칠하고 또 칠해요. 흐름을 따라 놓인 군청과 코발트 붓질이 노란 별무리와 초승달을 감아 돌고, 불꽃처럼 솟은 사이프러스 옆 마을에 창이 켜져요.","idea":"A night sky is painted and painted again in short thick strokes laid along a swirling flow field, ultramarine and cobalt curling round yellow-white stars and a crescent moon, over a flame-shaped cypress and a village with lit windows.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Brushstrokes\n// Family:  noise\n// Idea:    A night sky is painted and painted again in short thick strokes laid along a swirling flow field, ultramarine and cobalt curling round yellow-white stars and a crescent moon, over a flame-shaped cypress and a village with lit windows.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: after Vincent van Gogh's The Starry Night (1889), painted with strokes traced along the level lines of a stream function\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Flow=0.2..3, Length=4..12, Swirl=0..1\n//\n// Knob 1: Palette. Turns every colour of the painting round the colour wheel together, starting from Van Gogh's blue and yellow.\n// Knob 2: Flow. How fast the paint moves: at 2 the whole canvas is painted over every three seconds and the big swirl's arms turn on by a band of colour every second and a half; at 0.2 everything goes ten times slower.\n// Knob 3: Length. How long a stroke is, from short dabs four LEDs long to sweeps of twelve; the cypress takes longer strokes and the village shorter ones.\n// Knob 4: Swirl. How hard the sky turns: low, the stars sit in their haloes and the sky rolls past in long waves; turned up, the big spiral grows and the waves break into eddies.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Regions. A stroke keeps to the region it starts in, so the cypress and the\n// houses keep their outlines however many strokes cross the sky beside them.\nconst SKY = 0;\nconst TREE = 1;\nconst HILL = 2;\nconst WALL = 3;\nconst ROOF = 4;\nconst SPIRE = 5;\nconst LIT = 6;\nconst SHADE = 7;\n\n// The two swirls in the middle of the sky as x, y, radius, turn; the big one's\n// arms rotate. Then the moon and nine stars as x, y, radius.\nconst SWIRLS = [\n  [35, 50, 10, 1],\n  [16, 39, 7, -1],\n];\nconst MOON = [50, 14, 5.5];\nconst STARS = [\n  [9, 10, 4.2],\n  [27, 8, 3.6],\n  [40, 26, 4.8],\n  [6, 27, 3.6],\n  [59, 39, 4.2],\n  [24, 70, 3.6],\n  [50, 68, 4.8],\n  [41, 85, 3],\n  [59, 86, 3.6],\n];\n\n// Colours, 0..255. The sky's bands cycle through six blues and one streak of\n// pale yellow-green; the stars and the moon go out from their cores through\n// yellow to a green-white ring and a pale blue one.\nconst SKY_BANDS = [\n  [12, 28, 150],\n  [20, 62, 215],\n  [44, 110, 235],\n  [100, 150, 240],\n  [190, 206, 96],\n  [24, 80, 220],\n  [16, 90, 180],\n];\nconst STAR_RINGS = [\n  [0.45, 255, 250, 200],\n  [0.9, 255, 228, 60],\n  [1.3, 245, 196, 30],\n  [1.65, 205, 220, 90],\n  [2.0, 90, 150, 230],\n];\nconst MOON_RINGS = [\n  [1.35, 238, 182, 36],\n  [1.75, 200, 206, 100],\n  [2.2, 100, 150, 222],\n];\nconst MOON_COLS = [\n  [255, 248, 170],\n  [214, 112, 22],\n];\nconst TREE_COLS = [\n  [22, 54, 34],\n  [42, 74, 30],\n  [70, 58, 26],\n  [20, 38, 58],\n  [34, 90, 52],\n  [14, 30, 26],\n];\nconst HILL_COLS = [\n  [24, 40, 130],\n  [20, 64, 120],\n  [44, 50, 150],\n  [22, 76, 96],\n];\nconst WALL_COLS = [\n  [54, 80, 140],\n  [80, 92, 150],\n  [40, 90, 130],\n];\nconst ROOF_COLS = [\n  [28, 34, 74],\n  [116, 78, 44],\n  [40, 52, 96],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The cypress: a flame that rises from the foot of the panel to row 42, its\n// sides licking in and out.\nfunction cypressHalf(y) {\n  if (y \u003c 42) return -1;\n  const u = (y - 42) / 86;\n  return 10 * Math.pow(u, 0.72) * (1 + 0.22 * Math.sin(y * 0.55 + 1) + 0.1 * Math.sin(y * 1.3));\n}\nfunction cypressMid(y) {\n  return 13 + 2.4 * Math.sin(y * 0.09 + 0.4);\n}\nfunction hillTop(x) {\n  return 96 + 4 * Math.sin(x * 0.085 + 0.6) + 1.8 * Math.sin(x * 0.27 + 2);\n}\n\n// The village, the same on every load: a back row of houses up the slope and\n// a front row along the foot of the panel, each house a wall under a pitched\n// roof with a window or two, and the church's spire standing up between them.\nfunction house(P, x, top, w, bottom, b, win) {\n  const reg = P.reg;\n  const mat = P.mat;\n  const wc = Math.floor(hash(b, 4) * WALL_COLS.length);\n  const rc = Math.floor(hash(b, 5) * ROOF_COLS.length);\n  for (let y = top; y \u003c bottom; y++) {\n    const r = y - top;\n    for (let c = x; c \u003c x + w && c \u003c W; c++) {\n      const p = y * W + c;\n      if (reg[p] === TREE) continue;\n      if (r \u003c 2) {\n        if (r === 0 && (c === x || c === x + w - 1)) continue;\n        reg[p] = ROOF;\n        mat[p] = rc;\n      } else {\n        reg[p] = WALL;\n        mat[p] = wc;\n      }\n      win[p] = 0;\n    }\n  }\n  const n = 1 + Math.floor(hash(b, 6) * 2.4);\n  for (let i = 0; i \u003c n; i++) {\n    const c = x + 1 + Math.floor(hash(b, 10 + i) * (w - 2));\n    const y = top + 3 + Math.floor(hash(b, 20 + i) * Math.max(1, bottom - top - 5));\n    if (c \u003c W && y \u003c H && reg[y * W + c] === WALL) win[y * W + c] = 1;\n  }\n}\n\nfunction buildVillage(P) {\n  const reg = P.reg;\n  const mat = P.mat;\n  const win = new Uint8Array(N);\n  // The church's spire and tower first, so the houses stand in front of it.\n  for (let y = 84; y \u003c 112; y++) {\n    const half = y \u003c 97 ? 0 : 1;\n    for (let c = 45 - half; c \u003c= 45 + half; c++) {\n      reg[y * W + c] = SPIRE;\n      mat[y * W + c] = 0;\n    }\n  }\n  win[104 * W + 45] = 1;\n  let b = 0;\n  for (let row = 0; row \u003c 2; row++) {\n    let x = row ? 20 : 24;\n    while (x \u003c W - 2) {\n      const w = 4 + Math.floor(hash(b, 1) * 4);\n      const top = (row ? 113 : 103) + Math.floor(hash(b, 2) * 5);\n      const bottom = row ? H : top + 7 + Math.floor(hash(b, 3) * 3);\n      if (!(row === 0 && x \u003c= 45 && x + w > 44)) house(P, x, top, w, bottom, b, win);\n      x += w + (hash(b, 7) \u003c 0.45 ? 1 + Math.floor(hash(b, 8) * 3) : 0);\n      b++;\n    }\n  }\n  const wins = [];\n  for (let p = 0; p \u003c N; p++) if (win[p] && (reg[p] === WALL || reg[p] === SPIRE)) wins.push(p);\n  P.wins = Int32Array.from(wins);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.canvas = new Float32Array(N * 3);\n  P.reg = new Uint8Array(N);\n  P.mat = new Uint8Array(N);\n  P.col = new Float32Array(3);\n  P.m = new Float32Array(9);\n  for (let y = 0; y \u003c H; y++) {\n    const half = cypressHalf(y);\n    const mid = cypressMid(y);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const mx = x + 0.5 - MOON[0];\n      const my = y + 0.5 - MOON[1];\n      const cx = mx - 2.6;\n      const cy = my + 1.8;\n      if (half > 0 && Math.abs(x + 0.5 - mid) \u003c half) P.reg[p] = TREE;\n      else if (y >= hillTop(x)) P.reg[p] = HILL;\n      else if (mx * mx + my * my \u003c MOON[2] * MOON[2]) P.reg[p] = cx * cx + cy * cy > 20 ? LIT : SHADE;\n      else P.reg[p] = SKY;\n      P.mat[p] = Math.floor(hash(x >> 2, y >> 1) * 4);\n    }\n  }\n  buildVillage(P);\n  P.t = 0;\n  P.hue = 0;\n  P.flow = 2;\n  P.len = 4;\n  P.swirl = 0.06;\n  P.debt = 0;\n  P.started = false;\n}\n\n// The stream function: rolling bands across the sky, and a bump round each\n// swirl, star and the moon. Strokes run along its level lines, and the sky's\n// colour is picked by its value, so a stroke stays inside its band of colour.\nfunction psi(P, x, y) {\n  const t = P.t;\n  const g = 0.8 + 2.4 * P.swirl;\n  let v = y + 5 * Math.sin(x * 0.11 + y * 0.05 + t * 0.07) + 2.5 * Math.sin(x * 0.05 - y * 0.09 - t * 0.05);\n  for (let i = 0; i \u003c SWIRLS.length; i++) {\n    const s = SWIRLS[i];\n    const R = s[2] * (0.9 + 0.5 * P.swirl);\n    const dx = x - s[0];\n    const dy = y - s[1];\n    v += s[3] * 3.2 * R * g * Math.exp(-(dx * dx + dy * dy) / (2 * R * R));\n  }\n  const mr = MOON[2] * 1.7;\n  const mx = x - MOON[0];\n  const my = y - MOON[1];\n  v += 2.6 * mr * Math.exp(-(mx * mx + my * my) / (2 * mr * mr));\n  for (let i = 0; i \u003c STARS.length; i++) {\n    const s = STARS[i];\n    const R = s[2] * 1.2;\n    const dx = x - s[0];\n    const dy = y - s[1];\n    const d2 = dx * dx + dy * dy;\n    if (d2 > 50 * R * R) continue;\n    v += (i & 1 ? -2.6 : 2.6) * R * Math.exp(-d2 / (2 * R * R));\n  }\n  return v;\n}\n\n// Which way a stroke goes at (x, y), as a unit vector in out[0], out[1].\nfunction dirAt(P, reg, x, y, out) {\n  let dx;\n  let dy;\n  if (reg === SKY || reg >= LIT) {\n    const e = 0.5;\n    dx = psi(P, x, y + e) - psi(P, x, y - e);\n    dy = psi(P, x - e, y) - psi(P, x + e, y);\n    // Swirl also stirs a wobble into the flow, so the long waves break up.\n    const a = P.swirl * 1.3 * Math.sin(x * 0.31 + y * 0.17 + P.t * 0.4) * Math.sin(y * 0.23 - x * 0.07);\n    const c = Math.cos(a);\n    const s = Math.sin(a);\n    const rx = dx * c - dy * s;\n    dy = dx * s + dy * c;\n    dx = rx;\n  } else if (reg === TREE) {\n    // The cypress licks upward like a flame.\n    dx = 0.45 * Math.sin(y * 0.21 + x * 0.35 + P.t * 0.3);\n    dy = -1;\n  } else if (reg === HILL) {\n    dx = 1;\n    dy = 0.35 * Math.cos(x * 0.085 + 0.6) + 0.4 * Math.sin(y * 0.4 + x * 0.2);\n  } else if (reg === SPIRE) {\n    dx = 0;\n    dy = 1;\n  } else {\n    dx = 1;\n    dy = 0.15 * Math.sin(x + y);\n  }\n  const l = Math.hypot(dx, dy) || 1;\n  out[0] = dx / l;\n  out[1] = dy / l;\n}\n\nfunction ringCol(rings, d, out) {\n  for (let i = 0; i \u003c rings.length; i++) {\n    if (d \u003c rings[i][0]) {\n      out[0] = rings[i][1];\n      out[1] = rings[i][2];\n      out[2] = rings[i][3];\n      return true;\n    }\n  }\n  return false;\n}\n\n// The colour the painter loads for a stroke that starts at (x, y).\nfunction colourAt(P, reg, p, x, y, out) {\n  if (reg === TREE) return pick(TREE_COLS, P.mat[p] + Math.floor(Math.random() * 3), out);\n  if (reg === HILL) return pick(HILL_COLS, P.mat[p] + Math.floor(Math.random() * 2), out);\n  if (reg === WALL) return pick(WALL_COLS, P.mat[p], out);\n  if (reg === ROOF) return pick(ROOF_COLS, P.mat[p], out);\n  if (reg === SPIRE) return pick(ROOF_COLS, 0, out);\n  // The moon: a crescent lit on its lower left, its shadowed part glowing orange.\n  if (reg === LIT) return pick(MOON_COLS, 0, out);\n  if (reg === SHADE) return pick(MOON_COLS, 1, out);\n  const mx = x - MOON[0];\n  const my = y - MOON[1];\n  const md = Math.sqrt(mx * mx + my * my) / MOON[2];\n  if (ringCol(MOON_RINGS, md, out)) return;\n  for (let i = 0; i \u003c STARS.length; i++) {\n    const s = STARS[i];\n    const dx = x - s[0];\n    const dy = y - s[1];\n    // Each star's halo breathes on its own clock.\n    const r = s[2] * (1 + 0.12 * Math.sin(P.t * (0.5 + 0.13 * i) + i * 2.1));\n    if (ringCol(STAR_RINGS, Math.sqrt(dx * dx + dy * dy) / r, out)) return;\n  }\n  // The sky: bands picked by the stream function, and round the big swirl\n  // two spiral arms that turn as the clock runs.\n  const s = SWIRLS[0];\n  const dx = x - s[0];\n  const dy = y - s[1];\n  const near = Math.exp(-(dx * dx + dy * dy) / 300);\n  const k = psi(P, x, y) * 0.14 + near * (Math.atan2(dy, dx) / Math.PI + P.t * 0.12) + P.t * 0.02;\n  const band = SKY_BANDS[((Math.floor(k * 3) % 7) + 7) % 7];\n  out[0] = band[0];\n  out[1] = band[1];\n  out[2] = band[2];\n}\n\nfunction pick(list, i, out) {\n  const c = list[i % list.length];\n  out[0] = c[0];\n  out[1] = c[1];\n  out[2] = c[2];\n}\n\nconst DIR = new Float32Array(2);\nconst SAT = 1.15;\n\n// One stroke: load the brush, then walk half its length each way along the\n// flow from where it starts, one or two LEDs wide, until it runs off its region.\nfunction stroke(P, x0, y0) {\n  const p0 = Math.floor(y0) * W + Math.floor(x0);\n  const reg = P.reg[p0];\n  const col = P.col;\n  colourAt(P, reg, p0, x0, y0, col);\n  // Each stroke mixes its own shade: a little lighter or darker, a little warmer or cooler.\n  const v = 0.82 + 0.34 * Math.random();\n  const warm = (Math.random() - 0.5) * 34;\n  const r = col[0] * v + warm;\n  const g = col[1] * v + (Math.random() - 0.5) * 22;\n  const b = col[2] * v - warm * 0.6;\n  let len = P.len * (0.7 + 0.6 * Math.random());\n  if (reg === TREE) len *= 1.4;\n  else if (reg >= WALL) len *= 0.45;\n  const wide = reg !== SPIRE && Math.random() \u003c 0.55;\n  const c = P.canvas;\n  for (let side = -1; side \u003c= 1; side += 2) {\n    let x = x0;\n    let y = y0;\n    const steps = Math.ceil(len * 0.5 / 0.6);\n    for (let s = 0; s \u003c steps; s++) {\n      const px = Math.floor(x);\n      const py = Math.floor(y);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) break;\n      const p = py * W + px;\n      if (P.reg[p] !== reg) break;\n      dirAt(P, reg, x, y, DIR);\n      // Bristle grain: about one LED in eight picks up a lighter or darker fleck.\n      const q = Math.random() \u003c 0.13 ? 1 + (Math.random() - 0.5) * 0.16 : 1;\n      c[p * 3] = r * q;\n      c[p * 3 + 1] = g * q;\n      c[p * 3 + 2] = b * q;\n      if (wide) {\n        const nx = Math.floor(x - DIR[1] * 0.9);\n        const ny = Math.floor(y + DIR[0] * 0.9);\n        const n = ny * W + nx;\n        if (nx >= 0 && nx \u003c W && ny >= 0 && ny \u003c H && P.reg[n] === reg) {\n          const q2 = Math.random() \u003c 0.13 ? 0.9 + (Math.random() - 0.5) * 0.16 : 0.9;\n          c[n * 3] = r * q2;\n          c[n * 3 + 1] = g * q2;\n          c[n * 3 + 2] = b * q2;\n        }\n      }\n      x += DIR[0] * 0.6 * side;\n      y += DIR[1] * 0.6 * side;\n    }\n  }\n}\n\nfunction paint(P, count) {\n  for (let i = 0; i \u003c count; i++) stroke(P, Math.random() * W, Math.random() * H);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.flow = Math.max(0.2, Math.min(3, k[1]));\n  P.len = Math.max(4, Math.min(12, k[2]));\n  P.swirl = Math.max(0, Math.min(1, k[3]));\n  if (!P.started) {\n    // The canvas is already painted when the panel opens: a ground of flat\n    // colour, then enough strokes to cover it three times over while the\n    // clock runs four seconds, so the knobs have set the picture.\n    P.started = true;\n    for (let y = 0; y \u003c H; y++) {\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        colourAt(P, P.reg[p], p, x + 0.5, y + 0.5, P.col);\n        P.canvas[p * 3] = P.col[0] * 0.9;\n        P.canvas[p * 3 + 1] = P.col[1] * 0.9;\n        P.canvas[p * 3 + 2] = P.col[2] * 0.9;\n      }\n    }\n    const per = Math.round((3 * N) / (1.55 * P.len) / 40);\n    for (let i = 0; i \u003c 40; i++) {\n      P.t += 0.1 * P.flow;\n      paint(P, per);\n    }\n  }\n  P.t += dt * P.flow;\n  // A stroke covers about one and a half times its length in LEDs, so at\n  // Flow 2 the canvas is painted over every three seconds whatever the\n  // Length: 440 strokes a second at Length 4, 147 at Length 12.\n  P.debt += (dt * P.flow * 880) / P.len;\n  const n = Math.floor(P.debt);\n  P.debt -= n;\n  paint(P, n);\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const c = P.canvas;\n  const m = P.m;\n  // Palette: a hue rotation that keeps each colour's lightness, with the\n  // colours pushed a little further from grey, the way oil paint sits fresh.\n  const a = P.hue * Math.PI * 2;\n  const cs = Math.cos(a) * SAT;\n  const sn = Math.sin(a) * SAT;\n  m[0] = 0.213 + cs * 0.787 - sn * 0.213;\n  m[1] = 0.715 - cs * 0.715 - sn * 0.715;\n  m[2] = 0.072 - cs * 0.072 + sn * 0.928;\n  m[3] = 0.213 - cs * 0.213 + sn * 0.143;\n  m[4] = 0.715 + cs * 0.285 + sn * 0.14;\n  m[5] = 0.072 - cs * 0.072 - sn * 0.283;\n  m[6] = 0.213 - cs * 0.213 - sn * 0.787;\n  m[7] = 0.715 - cs * 0.715 + sn * 0.715;\n  m[8] = 0.072 + cs * 0.928 + sn * 0.072;\n  for (let p = 0; p \u003c N; p++) {\n    const r = c[p * 3];\n    const g = c[p * 3 + 1];\n    const b = c[p * 3 + 2];\n    const R = m[0] * r + m[1] * g + m[2] * b;\n    const G = m[3] * r + m[4] * g + m[5] * b;\n    const B = m[6] * r + m[7] * g + m[8] * b;\n    display.setPixel(p % W, (p / W) | 0, R \u003c 0 ? 0 : R > 255 ? 255 : R, G \u003c 0 ? 0 : G > 255 ? 255 : G, B \u003c 0 ? 0 : B > 255 ? 255 : B);\n  }\n  // The village's windows, dabbed on last; one now and then goes dim and comes back.\n  const wins = P.wins;\n  for (let i = 0; i \u003c wins.length; i++) {\n    const p = wins[i];\n    const f = Math.sin(time * 0.7 + i * 2.3) > 0.93 ? 0.55 : 1;\n    const r = 255 * f;\n    const g = 214 * f;\n    const b = 72 * f;\n    const R = m[0] * r + m[1] * g + m[2] * b;\n    const G = m[3] * r + m[4] * g + m[5] * b;\n    const B = m[6] * r + m[7] * g + m[8] * b;\n    display.setPixel(p % W, (p / W) | 0, Math.max(0, Math.min(255, R)), Math.max(0, Math.min(255, G)), Math.max(0, Math.min(255, B)));\n  }\n}\n","layer":{"id":"layer-brushstrokes","type":"code","name":"brushstrokes","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Brushstrokes\n// Family:  noise\n// Idea:    A night sky is painted and painted again in short thick strokes laid along a swirling flow field, ultramarine and cobalt curling round yellow-white stars and a crescent moon, over a flame-shaped cypress and a village with lit windows.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: after Vincent van Gogh's The Starry Night (1889), painted with strokes traced along the level lines of a stream function\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Flow=0.2..3, Length=4..12, Swirl=0..1\n//\n// Knob 1: Palette. Turns every colour of the painting round the colour wheel together, starting from Van Gogh's blue and yellow.\n// Knob 2: Flow. How fast the paint moves: at 2 the whole canvas is painted over every three seconds and the big swirl's arms turn on by a band of colour every second and a half; at 0.2 everything goes ten times slower.\n// Knob 3: Length. How long a stroke is, from short dabs four LEDs long to sweeps of twelve; the cypress takes longer strokes and the village shorter ones.\n// Knob 4: Swirl. How hard the sky turns: low, the stars sit in their haloes and the sky rolls past in long waves; turned up, the big spiral grows and the waves break into eddies.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Regions. A stroke keeps to the region it starts in, so the cypress and the\n// houses keep their outlines however many strokes cross the sky beside them.\nconst SKY = 0;\nconst TREE = 1;\nconst HILL = 2;\nconst WALL = 3;\nconst ROOF = 4;\nconst SPIRE = 5;\nconst LIT = 6;\nconst SHADE = 7;\n\n// The two swirls in the middle of the sky as x, y, radius, turn; the big one's\n// arms rotate. Then the moon and nine stars as x, y, radius.\nconst SWIRLS = [\n  [35, 50, 10, 1],\n  [16, 39, 7, -1],\n];\nconst MOON = [50, 14, 5.5];\nconst STARS = [\n  [9, 10, 4.2],\n  [27, 8, 3.6],\n  [40, 26, 4.8],\n  [6, 27, 3.6],\n  [59, 39, 4.2],\n  [24, 70, 3.6],\n  [50, 68, 4.8],\n  [41, 85, 3],\n  [59, 86, 3.6],\n];\n\n// Colours, 0..255. The sky's bands cycle through six blues and one streak of\n// pale yellow-green; the stars and the moon go out from their cores through\n// yellow to a green-white ring and a pale blue one.\nconst SKY_BANDS = [\n  [12, 28, 150],\n  [20, 62, 215],\n  [44, 110, 235],\n  [100, 150, 240],\n  [190, 206, 96],\n  [24, 80, 220],\n  [16, 90, 180],\n];\nconst STAR_RINGS = [\n  [0.45, 255, 250, 200],\n  [0.9, 255, 228, 60],\n  [1.3, 245, 196, 30],\n  [1.65, 205, 220, 90],\n  [2.0, 90, 150, 230],\n];\nconst MOON_RINGS = [\n  [1.35, 238, 182, 36],\n  [1.75, 200, 206, 100],\n  [2.2, 100, 150, 222],\n];\nconst MOON_COLS = [\n  [255, 248, 170],\n  [214, 112, 22],\n];\nconst TREE_COLS = [\n  [22, 54, 34],\n  [42, 74, 30],\n  [70, 58, 26],\n  [20, 38, 58],\n  [34, 90, 52],\n  [14, 30, 26],\n];\nconst HILL_COLS = [\n  [24, 40, 130],\n  [20, 64, 120],\n  [44, 50, 150],\n  [22, 76, 96],\n];\nconst WALL_COLS = [\n  [54, 80, 140],\n  [80, 92, 150],\n  [40, 90, 130],\n];\nconst ROOF_COLS = [\n  [28, 34, 74],\n  [116, 78, 44],\n  [40, 52, 96],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The cypress: a flame that rises from the foot of the panel to row 42, its\n// sides licking in and out.\nfunction cypressHalf(y) {\n  if (y \u003c 42) return -1;\n  const u = (y - 42) / 86;\n  return 10 * Math.pow(u, 0.72) * (1 + 0.22 * Math.sin(y * 0.55 + 1) + 0.1 * Math.sin(y * 1.3));\n}\nfunction cypressMid(y) {\n  return 13 + 2.4 * Math.sin(y * 0.09 + 0.4);\n}\nfunction hillTop(x) {\n  return 96 + 4 * Math.sin(x * 0.085 + 0.6) + 1.8 * Math.sin(x * 0.27 + 2);\n}\n\n// The village, the same on every load: a back row of houses up the slope and\n// a front row along the foot of the panel, each house a wall under a pitched\n// roof with a window or two, and the church's spire standing up between them.\nfunction house(P, x, top, w, bottom, b, win) {\n  const reg = P.reg;\n  const mat = P.mat;\n  const wc = Math.floor(hash(b, 4) * WALL_COLS.length);\n  const rc = Math.floor(hash(b, 5) * ROOF_COLS.length);\n  for (let y = top; y \u003c bottom; y++) {\n    const r = y - top;\n    for (let c = x; c \u003c x + w && c \u003c W; c++) {\n      const p = y * W + c;\n      if (reg[p] === TREE) continue;\n      if (r \u003c 2) {\n        if (r === 0 && (c === x || c === x + w - 1)) continue;\n        reg[p] = ROOF;\n        mat[p] = rc;\n      } else {\n        reg[p] = WALL;\n        mat[p] = wc;\n      }\n      win[p] = 0;\n    }\n  }\n  const n = 1 + Math.floor(hash(b, 6) * 2.4);\n  for (let i = 0; i \u003c n; i++) {\n    const c = x + 1 + Math.floor(hash(b, 10 + i) * (w - 2));\n    const y = top + 3 + Math.floor(hash(b, 20 + i) * Math.max(1, bottom - top - 5));\n    if (c \u003c W && y \u003c H && reg[y * W + c] === WALL) win[y * W + c] = 1;\n  }\n}\n\nfunction buildVillage(P) {\n  const reg = P.reg;\n  const mat = P.mat;\n  const win = new Uint8Array(N);\n  // The church's spire and tower first, so the houses stand in front of it.\n  for (let y = 84; y \u003c 112; y++) {\n    const half = y \u003c 97 ? 0 : 1;\n    for (let c = 45 - half; c \u003c= 45 + half; c++) {\n      reg[y * W + c] = SPIRE;\n      mat[y * W + c] = 0;\n    }\n  }\n  win[104 * W + 45] = 1;\n  let b = 0;\n  for (let row = 0; row \u003c 2; row++) {\n    let x = row ? 20 : 24;\n    while (x \u003c W - 2) {\n      const w = 4 + Math.floor(hash(b, 1) * 4);\n      const top = (row ? 113 : 103) + Math.floor(hash(b, 2) * 5);\n      const bottom = row ? H : top + 7 + Math.floor(hash(b, 3) * 3);\n      if (!(row === 0 && x \u003c= 45 && x + w > 44)) house(P, x, top, w, bottom, b, win);\n      x += w + (hash(b, 7) \u003c 0.45 ? 1 + Math.floor(hash(b, 8) * 3) : 0);\n      b++;\n    }\n  }\n  const wins = [];\n  for (let p = 0; p \u003c N; p++) if (win[p] && (reg[p] === WALL || reg[p] === SPIRE)) wins.push(p);\n  P.wins = Int32Array.from(wins);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.canvas = new Float32Array(N * 3);\n  P.reg = new Uint8Array(N);\n  P.mat = new Uint8Array(N);\n  P.col = new Float32Array(3);\n  P.m = new Float32Array(9);\n  for (let y = 0; y \u003c H; y++) {\n    const half = cypressHalf(y);\n    const mid = cypressMid(y);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const mx = x + 0.5 - MOON[0];\n      const my = y + 0.5 - MOON[1];\n      const cx = mx - 2.6;\n      const cy = my + 1.8;\n      if (half > 0 && Math.abs(x + 0.5 - mid) \u003c half) P.reg[p] = TREE;\n      else if (y >= hillTop(x)) P.reg[p] = HILL;\n      else if (mx * mx + my * my \u003c MOON[2] * MOON[2]) P.reg[p] = cx * cx + cy * cy > 20 ? LIT : SHADE;\n      else P.reg[p] = SKY;\n      P.mat[p] = Math.floor(hash(x >> 2, y >> 1) * 4);\n    }\n  }\n  buildVillage(P);\n  P.t = 0;\n  P.hue = 0;\n  P.flow = 2;\n  P.len = 4;\n  P.swirl = 0.06;\n  P.debt = 0;\n  P.started = false;\n}\n\n// The stream function: rolling bands across the sky, and a bump round each\n// swirl, star and the moon. Strokes run along its level lines, and the sky's\n// colour is picked by its value, so a stroke stays inside its band of colour.\nfunction psi(P, x, y) {\n  const t = P.t;\n  const g = 0.8 + 2.4 * P.swirl;\n  let v = y + 5 * Math.sin(x * 0.11 + y * 0.05 + t * 0.07) + 2.5 * Math.sin(x * 0.05 - y * 0.09 - t * 0.05);\n  for (let i = 0; i \u003c SWIRLS.length; i++) {\n    const s = SWIRLS[i];\n    const R = s[2] * (0.9 + 0.5 * P.swirl);\n    const dx = x - s[0];\n    const dy = y - s[1];\n    v += s[3] * 3.2 * R * g * Math.exp(-(dx * dx + dy * dy) / (2 * R * R));\n  }\n  const mr = MOON[2] * 1.7;\n  const mx = x - MOON[0];\n  const my = y - MOON[1];\n  v += 2.6 * mr * Math.exp(-(mx * mx + my * my) / (2 * mr * mr));\n  for (let i = 0; i \u003c STARS.length; i++) {\n    const s = STARS[i];\n    const R = s[2] * 1.2;\n    const dx = x - s[0];\n    const dy = y - s[1];\n    const d2 = dx * dx + dy * dy;\n    if (d2 > 50 * R * R) continue;\n    v += (i & 1 ? -2.6 : 2.6) * R * Math.exp(-d2 / (2 * R * R));\n  }\n  return v;\n}\n\n// Which way a stroke goes at (x, y), as a unit vector in out[0], out[1].\nfunction dirAt(P, reg, x, y, out) {\n  let dx;\n  let dy;\n  if (reg === SKY || reg >= LIT) {\n    const e = 0.5;\n    dx = psi(P, x, y + e) - psi(P, x, y - e);\n    dy = psi(P, x - e, y) - psi(P, x + e, y);\n    // Swirl also stirs a wobble into the flow, so the long waves break up.\n    const a = P.swirl * 1.3 * Math.sin(x * 0.31 + y * 0.17 + P.t * 0.4) * Math.sin(y * 0.23 - x * 0.07);\n    const c = Math.cos(a);\n    const s = Math.sin(a);\n    const rx = dx * c - dy * s;\n    dy = dx * s + dy * c;\n    dx = rx;\n  } else if (reg === TREE) {\n    // The cypress licks upward like a flame.\n    dx = 0.45 * Math.sin(y * 0.21 + x * 0.35 + P.t * 0.3);\n    dy = -1;\n  } else if (reg === HILL) {\n    dx = 1;\n    dy = 0.35 * Math.cos(x * 0.085 + 0.6) + 0.4 * Math.sin(y * 0.4 + x * 0.2);\n  } else if (reg === SPIRE) {\n    dx = 0;\n    dy = 1;\n  } else {\n    dx = 1;\n    dy = 0.15 * Math.sin(x + y);\n  }\n  const l = Math.hypot(dx, dy) || 1;\n  out[0] = dx / l;\n  out[1] = dy / l;\n}\n\nfunction ringCol(rings, d, out) {\n  for (let i = 0; i \u003c rings.length; i++) {\n    if (d \u003c rings[i][0]) {\n      out[0] = rings[i][1];\n      out[1] = rings[i][2];\n      out[2] = rings[i][3];\n      return true;\n    }\n  }\n  return false;\n}\n\n// The colour the painter loads for a stroke that starts at (x, y).\nfunction colourAt(P, reg, p, x, y, out) {\n  if (reg === TREE) return pick(TREE_COLS, P.mat[p] + Math.floor(Math.random() * 3), out);\n  if (reg === HILL) return pick(HILL_COLS, P.mat[p] + Math.floor(Math.random() * 2), out);\n  if (reg === WALL) return pick(WALL_COLS, P.mat[p], out);\n  if (reg === ROOF) return pick(ROOF_COLS, P.mat[p], out);\n  if (reg === SPIRE) return pick(ROOF_COLS, 0, out);\n  // The moon: a crescent lit on its lower left, its shadowed part glowing orange.\n  if (reg === LIT) return pick(MOON_COLS, 0, out);\n  if (reg === SHADE) return pick(MOON_COLS, 1, out);\n  const mx = x - MOON[0];\n  const my = y - MOON[1];\n  const md = Math.sqrt(mx * mx + my * my) / MOON[2];\n  if (ringCol(MOON_RINGS, md, out)) return;\n  for (let i = 0; i \u003c STARS.length; i++) {\n    const s = STARS[i];\n    const dx = x - s[0];\n    const dy = y - s[1];\n    // Each star's halo breathes on its own clock.\n    const r = s[2] * (1 + 0.12 * Math.sin(P.t * (0.5 + 0.13 * i) + i * 2.1));\n    if (ringCol(STAR_RINGS, Math.sqrt(dx * dx + dy * dy) / r, out)) return;\n  }\n  // The sky: bands picked by the stream function, and round the big swirl\n  // two spiral arms that turn as the clock runs.\n  const s = SWIRLS[0];\n  const dx = x - s[0];\n  const dy = y - s[1];\n  const near = Math.exp(-(dx * dx + dy * dy) / 300);\n  const k = psi(P, x, y) * 0.14 + near * (Math.atan2(dy, dx) / Math.PI + P.t * 0.12) + P.t * 0.02;\n  const band = SKY_BANDS[((Math.floor(k * 3) % 7) + 7) % 7];\n  out[0] = band[0];\n  out[1] = band[1];\n  out[2] = band[2];\n}\n\nfunction pick(list, i, out) {\n  const c = list[i % list.length];\n  out[0] = c[0];\n  out[1] = c[1];\n  out[2] = c[2];\n}\n\nconst DIR = new Float32Array(2);\nconst SAT = 1.15;\n\n// One stroke: load the brush, then walk half its length each way along the\n// flow from where it starts, one or two LEDs wide, until it runs off its region.\nfunction stroke(P, x0, y0) {\n  const p0 = Math.floor(y0) * W + Math.floor(x0);\n  const reg = P.reg[p0];\n  const col = P.col;\n  colourAt(P, reg, p0, x0, y0, col);\n  // Each stroke mixes its own shade: a little lighter or darker, a little warmer or cooler.\n  const v = 0.82 + 0.34 * Math.random();\n  const warm = (Math.random() - 0.5) * 34;\n  const r = col[0] * v + warm;\n  const g = col[1] * v + (Math.random() - 0.5) * 22;\n  const b = col[2] * v - warm * 0.6;\n  let len = P.len * (0.7 + 0.6 * Math.random());\n  if (reg === TREE) len *= 1.4;\n  else if (reg >= WALL) len *= 0.45;\n  const wide = reg !== SPIRE && Math.random() \u003c 0.55;\n  const c = P.canvas;\n  for (let side = -1; side \u003c= 1; side += 2) {\n    let x = x0;\n    let y = y0;\n    const steps = Math.ceil(len * 0.5 / 0.6);\n    for (let s = 0; s \u003c steps; s++) {\n      const px = Math.floor(x);\n      const py = Math.floor(y);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) break;\n      const p = py * W + px;\n      if (P.reg[p] !== reg) break;\n      dirAt(P, reg, x, y, DIR);\n      // Bristle grain: about one LED in eight picks up a lighter or darker fleck.\n      const q = Math.random() \u003c 0.13 ? 1 + (Math.random() - 0.5) * 0.16 : 1;\n      c[p * 3] = r * q;\n      c[p * 3 + 1] = g * q;\n      c[p * 3 + 2] = b * q;\n      if (wide) {\n        const nx = Math.floor(x - DIR[1] * 0.9);\n        const ny = Math.floor(y + DIR[0] * 0.9);\n        const n = ny * W + nx;\n        if (nx >= 0 && nx \u003c W && ny >= 0 && ny \u003c H && P.reg[n] === reg) {\n          const q2 = Math.random() \u003c 0.13 ? 0.9 + (Math.random() - 0.5) * 0.16 : 0.9;\n          c[n * 3] = r * q2;\n          c[n * 3 + 1] = g * q2;\n          c[n * 3 + 2] = b * q2;\n        }\n      }\n      x += DIR[0] * 0.6 * side;\n      y += DIR[1] * 0.6 * side;\n    }\n  }\n}\n\nfunction paint(P, count) {\n  for (let i = 0; i \u003c count; i++) stroke(P, Math.random() * W, Math.random() * H);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.flow = Math.max(0.2, Math.min(3, k[1]));\n  P.len = Math.max(4, Math.min(12, k[2]));\n  P.swirl = Math.max(0, Math.min(1, k[3]));\n  if (!P.started) {\n    // The canvas is already painted when the panel opens: a ground of flat\n    // colour, then enough strokes to cover it three times over while the\n    // clock runs four seconds, so the knobs have set the picture.\n    P.started = true;\n    for (let y = 0; y \u003c H; y++) {\n      for (let x = 0; x \u003c W; x++) {\n        const p = y * W + x;\n        colourAt(P, P.reg[p], p, x + 0.5, y + 0.5, P.col);\n        P.canvas[p * 3] = P.col[0] * 0.9;\n        P.canvas[p * 3 + 1] = P.col[1] * 0.9;\n        P.canvas[p * 3 + 2] = P.col[2] * 0.9;\n      }\n    }\n    const per = Math.round((3 * N) / (1.55 * P.len) / 40);\n    for (let i = 0; i \u003c 40; i++) {\n      P.t += 0.1 * P.flow;\n      paint(P, per);\n    }\n  }\n  P.t += dt * P.flow;\n  // A stroke covers about one and a half times its length in LEDs, so at\n  // Flow 2 the canvas is painted over every three seconds whatever the\n  // Length: 440 strokes a second at Length 4, 147 at Length 12.\n  P.debt += (dt * P.flow * 880) / P.len;\n  const n = Math.floor(P.debt);\n  P.debt -= n;\n  paint(P, n);\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const c = P.canvas;\n  const m = P.m;\n  // Palette: a hue rotation that keeps each colour's lightness, with the\n  // colours pushed a little further from grey, the way oil paint sits fresh.\n  const a = P.hue * Math.PI * 2;\n  const cs = Math.cos(a) * SAT;\n  const sn = Math.sin(a) * SAT;\n  m[0] = 0.213 + cs * 0.787 - sn * 0.213;\n  m[1] = 0.715 - cs * 0.715 - sn * 0.715;\n  m[2] = 0.072 - cs * 0.072 + sn * 0.928;\n  m[3] = 0.213 - cs * 0.213 + sn * 0.143;\n  m[4] = 0.715 + cs * 0.285 + sn * 0.14;\n  m[5] = 0.072 - cs * 0.072 - sn * 0.283;\n  m[6] = 0.213 - cs * 0.213 - sn * 0.787;\n  m[7] = 0.715 - cs * 0.715 + sn * 0.715;\n  m[8] = 0.072 + cs * 0.928 + sn * 0.072;\n  for (let p = 0; p \u003c N; p++) {\n    const r = c[p * 3];\n    const g = c[p * 3 + 1];\n    const b = c[p * 3 + 2];\n    const R = m[0] * r + m[1] * g + m[2] * b;\n    const G = m[3] * r + m[4] * g + m[5] * b;\n    const B = m[6] * r + m[7] * g + m[8] * b;\n    display.setPixel(p % W, (p / W) | 0, R \u003c 0 ? 0 : R > 255 ? 255 : R, G \u003c 0 ? 0 : G > 255 ? 255 : G, B \u003c 0 ? 0 : B > 255 ? 255 : B);\n  }\n  // The village's windows, dabbed on last; one now and then goes dim and comes back.\n  const wins = P.wins;\n  for (let i = 0; i \u003c wins.length; i++) {\n    const p = wins[i];\n    const f = Math.sin(time * 0.7 + i * 2.3) > 0.93 ? 0.55 : 1;\n    const r = 255 * f;\n    const g = 214 * f;\n    const b = 72 * f;\n    const R = m[0] * r + m[1] * g + m[2] * b;\n    const G = m[3] * r + m[4] * g + m[5] * b;\n    const B = m[6] * r + m[7] * g + m[8] * b;\n    display.setPixel(p % W, (p / W) | 0, Math.max(0, Math.min(255, R)), Math.max(0, Math.min(255, G)), Math.max(0, Math.min(255, B)));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..1, Flow=0.2..3, Length=4..12, Swirl=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":1,"about":"Turns every colour of the painting round the colour wheel together, starting from Van Gogh's blue and yellow."},{"name":"Flow","min":0.2,"max":3,"about":"How fast the paint moves: at 2 the whole canvas is painted over every three seconds and the big swirl's arms turn on by a band of colour every second and a half; at 0.2 everything goes ten times slower."},{"name":"Length","min":4,"max":12,"about":"How long a stroke is, from short dabs four LEDs long to sweeps of twelve; the cypress takes longer strokes and the village shorter ones."},{"name":"Swirl","min":0,"max":1,"about":"How hard the sky turns: low, the stars sit in their haloes and the sky rolls past in long waves; turned up, the big spiral grows and the waves break into eddies."}],"start":[0,2,4,0.06],"measures":{"motion":0.0383,"detail":0.0951,"edges":0.2993,"complexity":2.3542,"coverage":0.998,"colour":0.5763,"drift":0.0278},"knobResponse":[0.4036,0.1538,0.1578,0.1518]},{"slug":"cam-wave","title":"Cam Wave","family":"machine","round":15,"note":"발치의 캠축이 돌면 캠마다 막대를 밀어 올리고, 막대 끝에 걸린 구슬 띠가 물결이 되어 옆으로 흘러가요. K1 을 누르면 캠이 둥근 편심에서 달걀꼴, 달팽이꼴로 바뀌어요.","idea":"A camshaft turns at the foot of the panel, every cam on it keyed a little further round than its neighbour; a rod rides on each cam, slides up through two guides and lifts a beaded strip into a wave that travels across the top.","buttons":"K1 tap swaps the cam profile, round eccentric, then egg, then a snail drop cam that lifts each rod slowly and lets it fall.","code":"// ===== Patternflow pattern =====\n// Title:   Cam Wave\n// Family:  machine\n// Idea:    A camshaft turns at the foot of the panel, every cam on it keyed a little further round than its neighbour; a rod rides on each cam, slides up through two guides and lifts a beaded strip into a wave that travels across the top.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Reuben Margolin's kinetic wave sculptures, where one camshaft and its followers make a wave out of many rods\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Cams=6..12, Phase=-1..1\n//\n// Knob 1: Hue. Turns the colours of the cams and the strip together, starting from a row that runs from teal at the near end through blue and violet to magenta at the far end.\n// Knob 2: Speed. How fast the shaft turns: at 2 every cam goes round once in two seconds, at the top in 1.3, at the bottom in 20.\n// Knob 3: Cams. How many cams and rods the shaft carries, from 6 to 12; the cams stay 38 LEDs tall and crowd closer along the shaft, 7.9 LEDs apart at 6 and 3.6 at 12.\n// Knob 4: Phase. How far each cam is keyed past its neighbour: at the left end all alike and the rods pump together, in the middle 60 degrees so six cams make one wave, at the right end 180 degrees so neighbours move opposite and the wave stands still. The cams slide round to their new keying in about half a second.\n// Buttons: K1 tap swaps the cam profile, round eccentric, then egg, then a snail drop cam that lifts each rod slowly and lets it fall.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 12;\n// Points around a cam's outline, for the follower's contact.\nconst S = 192;\nconst TAU = Math.PI * 2;\n// The shaft runs left to right and away from us: we look along it from the\n// left, so a cam's face shows at this share of its width and the far cams\n// stand to the right.\nconst SB = 0.5;\nconst CB = Math.sqrt(1 - SB * SB);\n// A cam's full reach from the shaft, in LEDs, and the shaft's height.\nconst R = 19;\nconst SHAFT = 97;\n// The rod's width, in LEDs.\nconst ROD = 1.5;\n// Where the wave's beads sit when every rod is at its lowest.\nconst WAVE = 20;\n// How far the strip hangs below its top edge.\nconst STRIP = 4;\n// Free fall for a rod that drops off a cam, in LEDs per second squared.\nconst FALL = 900;\nconst PROFILES = 3;\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// A cam's radius at angle phi from its nose, as a share of its full reach.\n// 0: a round disc bored off centre, 1: an egg, 2: a snail that climbs the\n// whole way round and drops back at the nose.\nfunction radius(kind, phi) {\n  phi -= Math.floor(phi / TAU) * TAU;\n  if (kind === 0) {\n    const e = 0.36;\n    const r = 0.64;\n    const s = Math.sin(phi);\n    return e * Math.cos(phi) + Math.sqrt(r * r - e * e * s * s);\n  }\n  if (kind === 1) {\n    const c = (1 + Math.cos(phi)) / 2;\n    return 0.42 + 0.58 * c * c * Math.sqrt(c);\n  }\n  return 0.3 + 0.7 * (1 - phi / TAU);\n}\n\n// Cams spread along the shaft so the nearest one's face and the farthest\n// one's rim both stay on the panel.\nfunction layout(P, n) {\n  P.n = n;\n  const span = W - 3 - 2 * SB * R - 2.5;\n  P.gap = span / (n - 1);\n  P.thick = Math.min(3, (0.7 * P.gap) / CB);\n  P.roller = Math.min(1.7, P.gap / 2 - 0.25);\n  for (let i = 0; i \u003c n; i++) P.cx[i] = 1.5 + SB * R + i * P.gap;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frame = new Float32Array(N * 3);\n  P.alpha = new Float32Array(N);\n  P.tops = new Float32Array(MAX);\n  P.cx = new Float32Array(MAX);\n  P.rodY = new Float32Array(MAX);\n  P.rodV = new Float32Array(MAX);\n  P.theta = new Float32Array(MAX);\n  P.tables = [];\n  for (let k = 0; k \u003c PROFILES; k++) {\n    const t = new Float32Array(S);\n    for (let s = 0; s \u003c S; s++) t[s] = radius(k, (s * TAU) / S);\n    P.tables.push(t);\n  }\n  P.prof = new Float32Array(S);\n  P.prof.set(P.tables[0]);\n  P.kind = 0;\n  P.from = 0;\n  P.morph = 1;\n  P.shaft = 0;\n  P.step = Math.PI / 3;\n  P.hue = 0;\n  P.col = new Float32Array(MAX * 3);\n  P.bead = new Float32Array(3);\n  P.started = false;\n  layout(P, 6);\n}\n\n// How high the roller on cam i rides over the shaft.\nfunction contact(P, i) {\n  const prof = P.prof;\n  const rr = P.roller;\n  const th = P.theta[i];\n  let best = 0;\n  for (let k = 0; k \u003c S; k++) {\n    const a = (k * TAU) / S + th;\n    const r = prof[k] * R;\n    const x = r * Math.cos(a);\n    if (x > -rr && x \u003c rr) {\n      const h = r * Math.sin(a) + Math.sqrt(rr * rr - x * x);\n      if (h > best) best = h;\n    }\n  }\n  return best;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const speed = Math.max(0.2, Math.min(3, k[1]));\n  const n = Math.max(6, Math.min(MAX, Math.round(k[2])));\n  const v = Math.max(-1, Math.min(1, k[3]));\n  // Degrees between neighbours: 0 at the left end, 60 in the middle, 180 at the right.\n  const target = ((v \u003c 0 ? 60 * (1 + v) : 60 + 120 * v) * Math.PI) / 180;\n  if (n !== P.n) {\n    layout(P, n);\n    P.started = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.from = P.kind;\n    P.kind = (P.kind + 1) % PROFILES;\n    P.morph = 0;\n  }\n  // A new profile grows out of the old one over half a second.\n  if (P.morph \u003c 1) {\n    P.morph = Math.min(1, P.morph + dt * 2);\n    const a = P.tables[P.from];\n    const b = P.tables[P.kind];\n    const m = P.morph * P.morph * (3 - 2 * P.morph);\n    for (let s = 0; s \u003c S; s++) P.prof[s] = a[s] + (b[s] - a[s]) * m;\n  }\n  // Re-keying the cams when Phase turns: each slides round to its new place.\n  P.step += (target - P.step) * (P.started ? Math.min(1, dt * 4) : 1);\n  P.shaft += speed * Math.PI * 0.5 * dt;\n  for (let i = 0; i \u003c P.n; i++) {\n    P.theta[i] = P.shaft - i * P.step;\n    const h = contact(P, i);\n    // A rod is pushed up by its cam at once, but falls no faster than gravity.\n    if (!P.started || h >= P.rodY[i]) {\n      P.rodY[i] = h;\n      P.rodV[i] = 0;\n    } else {\n      P.rodV[i] += FALL * dt;\n      P.rodY[i] = Math.max(h, P.rodY[i] - P.rodV[i] * dt);\n      if (P.rodY[i] === h) P.rodV[i] = 0;\n    }\n  }\n  P.started = true;\n}\n\n\n// The frame and its coverage. Things nearer the eye are drawn first and each\n// later one only shows where the nearer ones left the LED uncovered.\nlet OUT = null;\nlet ALPHA = null;\n\nfunction under(x, y, a, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const q = y * W + x;\n  const left = 1 - ALPHA[q];\n  if (left \u003c 0.003) return;\n  const w = left * (a > 1 ? 1 : a);\n  const o = q * 3;\n  OUT[o] += r * w;\n  OUT[o + 1] += g * w;\n  OUT[o + 2] += b * w;\n  ALPHA[q] += w;\n}\n\n// A round dot with a soft edge, so it glides between LEDs.\nfunction dot(x, y, rad, r, g, b) {\n  for (let yy = Math.floor(y - rad - 1); yy \u003c= Math.ceil(y + rad + 1); yy++)\n    for (let xx = Math.floor(x - rad - 1); xx \u003c= Math.ceil(x + rad + 1); xx++) {\n      const dx = xx + 0.5 - x;\n      const dy = yy + 0.5 - y;\n      under(xx, yy, rad + 0.5 - Math.sqrt(dx * dx + dy * dy), r, g, b);\n    }\n}\n\n// atan2 to about 1e-5 of a radian, which is plenty for an outline on LEDs.\nfunction angle(y, x) {\n  const ax = x \u003c 0 ? -x : x;\n  const ay = y \u003c 0 ? -y : y;\n  const a = (ax \u003c ay ? ax : ay) / ((ax > ay ? ax : ay) + 1e-9);\n  const s = a * a;\n  let r = ((-0.0464964749 * s + 0.15931422) * s - 0.327622764) * s * a + a;\n  if (ay > ax) r = 1.5707963 - r;\n  if (x \u003c 0) r = 3.1415927 - r;\n  return y \u003c 0 ? -r : r;\n}\n\n// How far an LED centre at (px, py) is inside the outline of a cam face\n// whose axle shows at screen x ax, measured in LEDs on the panel. Leaves the\n// in-plane position in hit.\nconst hit = { u: 0, v: 0, r: 0, a: 0 };\nfunction inside(prof, th, ax, px, py, low) {\n  const u = (px - ax) / SB;\n  const v = SHAFT - py;\n  const r = Math.sqrt(u * u + v * v);\n  hit.u = u;\n  hit.v = v;\n  hit.r = r;\n  if (r > R + 2) return -2;\n  if (r \u003c low - 3) return 2;\n  const a = angle(v, u);\n  hit.a = a;\n  let f = ((a - th) * S) / TAU;\n  f -= Math.floor(f / S) * S;\n  const k0 = f | 0;\n  const k1 = k0 + 1 === S ? 0 : k0 + 1;\n  const ca = r > 0 ? u / r : 1;\n  const sa = r > 0 ? v / r : 0;\n  const radial = Math.sqrt(ca * ca * SB * SB + sa * sa);\n  // A snail's drop is a straight edge out from the axle: near it, blend the\n  // high side and the low side by how far the LED sits from the edge.\n  const jump = prof[0] - prof[S - 1];\n  if (jump > 0.02) {\n    const side = (f > S / 2 ? f - S : f) * (TAU / S) * r;\n    if (side > -2.5 && side \u003c 2.5) {\n      const w = clamp01(0.5 + side * Math.sqrt(sa * sa * SB * SB + ca * ca));\n      return w * clamp01((prof[0] * R - r) * radial + 0.5) + (1 - w) * clamp01((prof[S - 1] * R - r) * radial + 0.5) - 0.5;\n    }\n  }\n  const edge = (prof[k0] + (prof[k1] - prof[k0]) * (f - k0)) * R;\n  return (edge - r) * radial;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  OUT = P.frame;\n  ALPHA = P.alpha;\n  OUT.fill(0);\n  ALPHA.fill(0);\n  const n = P.n;\n  const prof = P.prof;\n  const col = P.col;\n  const rr = P.roller;\n  const thick = P.thick * CB;\n  const gap = P.gap;\n  // Hues run along the shaft; the far cams sit a little deeper in shadow.\n  for (let i = 0; i \u003c n; i++) hsvInto(col, i * 3, 0.47 + P.hue + (0.36 * i) / (n - 1), 0.8, 0.97 - (0.22 * i) / (n - 1));\n\n  let low = Infinity;\n  for (let s = 0; s \u003c S; s++) low = Math.min(low, prof[s]);\n  const rest = low * R + rr;\n  const lowR = low * R;\n  const tops = P.tops;\n  for (let i = 0; i \u003c n; i++) tops[i] = WAVE - (P.rodY[i] - rest);\n  const guide1 = Math.round(SHAFT - R - rr * 2 - 6);\n  const guide2 = Math.round((guide1 + WAVE) / 2 + 4);\n\n  // The beads on the rod tops, and the strip they carry. The strip's height\n  // is worked out once per column, so it only ever moves up and down.\n  for (let i = 0; i \u003c n; i++) dot(P.cx[i], tops[i], 1.7, 255, 246, 228);\n  const first = P.cx[0];\n  const last = P.cx[n - 1];\n  const bead = P.bead;\n  let seg = 0;\n  for (let x = Math.floor(first); x \u003c= Math.ceil(last); x++) {\n    const px = Math.max(first, Math.min(last, x + 0.5));\n    while (seg \u003c n - 2 && px > P.cx[seg + 1]) seg++;\n    const t = (px - P.cx[seg]) / (P.cx[seg + 1] - P.cx[seg]);\n    const y1 = tops[seg];\n    const y2 = tops[seg + 1];\n    const y0 = seg > 0 ? tops[seg - 1] : 2 * y1 - y2;\n    const y3 = seg + 2 \u003c n ? tops[seg + 2] : 2 * y2 - y1;\n    // Catmull-Rom through the bead heights.\n    const y = 0.5 * (2 * y1 + (-y0 + y2) * t + (2 * y0 - 5 * y1 + 4 * y2 - y3) * t * t + (-y0 + 3 * y1 - 3 * y2 + y3) * t * t * t);\n    hsvInto(bead, 0, 0.47 + P.hue + 0.36 * clamp01((px - first) / (last - first)), 0.75, 1);\n    const top = y - 1;\n    const bot = y + STRIP;\n    for (let yy = Math.floor(top); yy \u003c= Math.ceil(bot); yy++) {\n      const a = Math.min(bot, yy + 1) - Math.max(top, yy);\n      if (a \u003c= 0) continue;\n      // Bright along the top edge, deeper underneath.\n      const k = (yy + 0.5 - top) / (bot - top);\n      const s = k \u003c 0.25 ? 1 : 1 - 0.55 * (k - 0.25);\n      const wv = k \u003c 0.25 ? 0.35 : 0;\n      under(x, yy, a, (bead[0] + (255 - bead[0]) * wv) * s, (bead[1] + (255 - bead[1]) * wv) * s, (bead[2] + (255 - bead[2]) * wv) * s);\n    }\n  }\n\n  // Brass bushings where each rod passes a guide, then the guides.\n  const bw = Math.min(2, gap / 2 - 0.7);\n  for (let i = 0; i \u003c n; i++) {\n    const x = P.cx[i];\n    for (const g of [guide1, guide2])\n      for (let y = g - 1; y \u003c= g + 3; y++)\n        for (let xx = Math.floor(x - bw - 1); xx \u003c= Math.floor(x + bw + 1); xx++) {\n          const s = y === g - 1 ? 1.15 : y === g + 3 ? 0.7 : 1;\n          under(xx, y, bw + 0.5 - Math.abs(xx + 0.5 - x), 212 * s, 166 * s, 74 * s);\n        }\n  }\n  for (const g of [guide1, guide2])\n    for (let x = 0; x \u003c W; x++) {\n      under(x, g, 1, 78, 90, 120);\n      under(x, g + 1, 1, 52, 60, 86);\n      under(x, g + 2, 1, 34, 40, 58);\n    }\n\n  // Cams from the nearest to the farthest, each after its own roller and rod.\n  for (let i = 0; i \u003c n; i++) {\n    const ax = P.cx[i];\n    const th = P.theta[i];\n    const cr = col[i * 3];\n    const cg = col[i * 3 + 1];\n    const cb = col[i * 3 + 2];\n    const yb = SHAFT - P.rodY[i];\n    dot(ax, yb, rr - 0.1, 240, 192, 96);\n    const yt = tops[i];\n    const xa = ax - ROD / 2;\n    const xb = ax + ROD / 2;\n    for (let xx = Math.floor(xa); xx \u003c= Math.floor(xb); xx++) {\n      const a = Math.min(xb, xx + 1) - Math.max(xa, xx);\n      if (a \u003c= 0) continue;\n      const shine = xx + 0.5 \u003c ax ? 1.15 : 0.8;\n      for (let y = Math.floor(yt); y \u003c= Math.ceil(yb); y++) under(xx, y, a * clamp01(Math.min(yb, y + 1) - Math.max(yt, y)), 160 * shine, 168 * shine, 186 * shine);\n    }\n\n    const hole = 0.14 * R;\n    const hu = Math.cos(th) * R * 0.56;\n    const hv = Math.sin(th) * R * 0.56;\n    for (let y = Math.floor(SHAFT - R - 1); y \u003c= Math.ceil(SHAFT + R + 1); y++) {\n      const py = y + 0.5;\n      const vv = SHAFT - py;\n      const half = Math.sqrt(Math.max(0, (R + 1.5) * (R + 1.5) - vv * vv)) * SB;\n      const x0 = Math.max(0, Math.floor(ax - half - 1));\n      const x1 = Math.min(W - 1, Math.ceil(ax + half + thick + 1));\n      for (let x = x0; x \u003c= x1; x++) {\n        if (ALPHA[y * W + x] > 0.997) continue;\n        const px = x + 0.5;\n        const d = inside(prof, th, ax, px, py, lowR);\n        const face = clamp01(d + 0.5);\n        if (face > 0) {\n          const u = hit.u;\n          const v = hit.v;\n          const r = hit.r;\n          // Light from the top left: the face's edge catches it there.\n          const lit = clamp01(1 - d / 1.4) * clamp01((v - u * 0.4) / Math.max(1, r));\n          let fr = cr + (255 - cr) * 0.45 * lit;\n          let fg = cg + (255 - cg) * 0.45 * lit;\n          let fb = cb + (255 - cb) * 0.45 * lit;\n          let cover = face;\n          // A lightening hole toward the nose: what is behind shows through.\n          const hx = (u - hu) * SB;\n          const hy = v - hv;\n          cover *= 1 - clamp01(hole * 0.75 + 0.5 - Math.sqrt(hx * hx + hy * hy));\n          // The hub and the shaft's end, steel.\n          const hub = clamp01(2.6 - r * 0.75);\n          if (hub > 0) {\n            const s = r \u003c 1.6 ? 0.7 : 1;\n            fr += (180 * s - fr) * hub;\n            fg += (186 * s - fg) * hub;\n            fb += (200 * s - fb) * hub;\n            cover = Math.max(cover, hub * face);\n          }\n          under(x, y, cover, fr, fg, fb);\n          if (face >= 1 && cover >= 1) continue;\n        }\n        // The rim: the outline swept back along the shaft to the far face,\n        // lit on top and in shade underneath.\n        const rim = clamp01(inside(prof, th, ax + thick, px, py, lowR) + 0.5);\n        if (rim > 0) {\n          const s = 0.38 + 0.35 * clamp01(0.5 + (0.6 * hit.v) / Math.max(1, hit.r));\n          under(x, y, rim, cr * s, cg * s, cb * s);\n        }\n      }\n    }\n  }\n\n  // The shaft, seen between the cams, and the frame that carries it.\n  for (let y = SHAFT - 2; y \u003c= SHAFT + 1; y++)\n    for (let x = 2; x \u003c W - 2; x++) {\n      const s = y === SHAFT - 2 ? 1.2 : y === SHAFT + 1 ? 0.55 : 0.85;\n      under(x, y, 1, 150 * s, 156 * s, 172 * s);\n    }\n  for (let y = guide2; y \u003c H; y++) {\n    for (const x of [0, W - 2]) {\n      under(x, y, 1, 84, 94, 124);\n      under(x + 1, y, 1, 54, 62, 86);\n    }\n  }\n  for (let y = H - 4; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const s = y === H - 4 ? 1.25 : 0.8;\n      under(x, y, 1, 60 * s, 68 * s, 94 * s);\n    }\n\n  const out = OUT;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n}\n","layer":{"id":"layer-cam-wave","type":"code","name":"cam-wave","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cam Wave\n// Family:  machine\n// Idea:    A camshaft turns at the foot of the panel, every cam on it keyed a little further round than its neighbour; a rod rides on each cam, slides up through two guides and lifts a beaded strip into a wave that travels across the top.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Reuben Margolin's kinetic wave sculptures, where one camshaft and its followers make a wave out of many rods\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Cams=6..12, Phase=-1..1\n//\n// Knob 1: Hue. Turns the colours of the cams and the strip together, starting from a row that runs from teal at the near end through blue and violet to magenta at the far end.\n// Knob 2: Speed. How fast the shaft turns: at 2 every cam goes round once in two seconds, at the top in 1.3, at the bottom in 20.\n// Knob 3: Cams. How many cams and rods the shaft carries, from 6 to 12; the cams stay 38 LEDs tall and crowd closer along the shaft, 7.9 LEDs apart at 6 and 3.6 at 12.\n// Knob 4: Phase. How far each cam is keyed past its neighbour: at the left end all alike and the rods pump together, in the middle 60 degrees so six cams make one wave, at the right end 180 degrees so neighbours move opposite and the wave stands still. The cams slide round to their new keying in about half a second.\n// Buttons: K1 tap swaps the cam profile, round eccentric, then egg, then a snail drop cam that lifts each rod slowly and lets it fall.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 12;\n// Points around a cam's outline, for the follower's contact.\nconst S = 192;\nconst TAU = Math.PI * 2;\n// The shaft runs left to right and away from us: we look along it from the\n// left, so a cam's face shows at this share of its width and the far cams\n// stand to the right.\nconst SB = 0.5;\nconst CB = Math.sqrt(1 - SB * SB);\n// A cam's full reach from the shaft, in LEDs, and the shaft's height.\nconst R = 19;\nconst SHAFT = 97;\n// The rod's width, in LEDs.\nconst ROD = 1.5;\n// Where the wave's beads sit when every rod is at its lowest.\nconst WAVE = 20;\n// How far the strip hangs below its top edge.\nconst STRIP = 4;\n// Free fall for a rod that drops off a cam, in LEDs per second squared.\nconst FALL = 900;\nconst PROFILES = 3;\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// A cam's radius at angle phi from its nose, as a share of its full reach.\n// 0: a round disc bored off centre, 1: an egg, 2: a snail that climbs the\n// whole way round and drops back at the nose.\nfunction radius(kind, phi) {\n  phi -= Math.floor(phi / TAU) * TAU;\n  if (kind === 0) {\n    const e = 0.36;\n    const r = 0.64;\n    const s = Math.sin(phi);\n    return e * Math.cos(phi) + Math.sqrt(r * r - e * e * s * s);\n  }\n  if (kind === 1) {\n    const c = (1 + Math.cos(phi)) / 2;\n    return 0.42 + 0.58 * c * c * Math.sqrt(c);\n  }\n  return 0.3 + 0.7 * (1 - phi / TAU);\n}\n\n// Cams spread along the shaft so the nearest one's face and the farthest\n// one's rim both stay on the panel.\nfunction layout(P, n) {\n  P.n = n;\n  const span = W - 3 - 2 * SB * R - 2.5;\n  P.gap = span / (n - 1);\n  P.thick = Math.min(3, (0.7 * P.gap) / CB);\n  P.roller = Math.min(1.7, P.gap / 2 - 0.25);\n  for (let i = 0; i \u003c n; i++) P.cx[i] = 1.5 + SB * R + i * P.gap;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frame = new Float32Array(N * 3);\n  P.alpha = new Float32Array(N);\n  P.tops = new Float32Array(MAX);\n  P.cx = new Float32Array(MAX);\n  P.rodY = new Float32Array(MAX);\n  P.rodV = new Float32Array(MAX);\n  P.theta = new Float32Array(MAX);\n  P.tables = [];\n  for (let k = 0; k \u003c PROFILES; k++) {\n    const t = new Float32Array(S);\n    for (let s = 0; s \u003c S; s++) t[s] = radius(k, (s * TAU) / S);\n    P.tables.push(t);\n  }\n  P.prof = new Float32Array(S);\n  P.prof.set(P.tables[0]);\n  P.kind = 0;\n  P.from = 0;\n  P.morph = 1;\n  P.shaft = 0;\n  P.step = Math.PI / 3;\n  P.hue = 0;\n  P.col = new Float32Array(MAX * 3);\n  P.bead = new Float32Array(3);\n  P.started = false;\n  layout(P, 6);\n}\n\n// How high the roller on cam i rides over the shaft.\nfunction contact(P, i) {\n  const prof = P.prof;\n  const rr = P.roller;\n  const th = P.theta[i];\n  let best = 0;\n  for (let k = 0; k \u003c S; k++) {\n    const a = (k * TAU) / S + th;\n    const r = prof[k] * R;\n    const x = r * Math.cos(a);\n    if (x > -rr && x \u003c rr) {\n      const h = r * Math.sin(a) + Math.sqrt(rr * rr - x * x);\n      if (h > best) best = h;\n    }\n  }\n  return best;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const speed = Math.max(0.2, Math.min(3, k[1]));\n  const n = Math.max(6, Math.min(MAX, Math.round(k[2])));\n  const v = Math.max(-1, Math.min(1, k[3]));\n  // Degrees between neighbours: 0 at the left end, 60 in the middle, 180 at the right.\n  const target = ((v \u003c 0 ? 60 * (1 + v) : 60 + 120 * v) * Math.PI) / 180;\n  if (n !== P.n) {\n    layout(P, n);\n    P.started = false;\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.from = P.kind;\n    P.kind = (P.kind + 1) % PROFILES;\n    P.morph = 0;\n  }\n  // A new profile grows out of the old one over half a second.\n  if (P.morph \u003c 1) {\n    P.morph = Math.min(1, P.morph + dt * 2);\n    const a = P.tables[P.from];\n    const b = P.tables[P.kind];\n    const m = P.morph * P.morph * (3 - 2 * P.morph);\n    for (let s = 0; s \u003c S; s++) P.prof[s] = a[s] + (b[s] - a[s]) * m;\n  }\n  // Re-keying the cams when Phase turns: each slides round to its new place.\n  P.step += (target - P.step) * (P.started ? Math.min(1, dt * 4) : 1);\n  P.shaft += speed * Math.PI * 0.5 * dt;\n  for (let i = 0; i \u003c P.n; i++) {\n    P.theta[i] = P.shaft - i * P.step;\n    const h = contact(P, i);\n    // A rod is pushed up by its cam at once, but falls no faster than gravity.\n    if (!P.started || h >= P.rodY[i]) {\n      P.rodY[i] = h;\n      P.rodV[i] = 0;\n    } else {\n      P.rodV[i] += FALL * dt;\n      P.rodY[i] = Math.max(h, P.rodY[i] - P.rodV[i] * dt);\n      if (P.rodY[i] === h) P.rodV[i] = 0;\n    }\n  }\n  P.started = true;\n}\n\n\n// The frame and its coverage. Things nearer the eye are drawn first and each\n// later one only shows where the nearer ones left the LED uncovered.\nlet OUT = null;\nlet ALPHA = null;\n\nfunction under(x, y, a, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const q = y * W + x;\n  const left = 1 - ALPHA[q];\n  if (left \u003c 0.003) return;\n  const w = left * (a > 1 ? 1 : a);\n  const o = q * 3;\n  OUT[o] += r * w;\n  OUT[o + 1] += g * w;\n  OUT[o + 2] += b * w;\n  ALPHA[q] += w;\n}\n\n// A round dot with a soft edge, so it glides between LEDs.\nfunction dot(x, y, rad, r, g, b) {\n  for (let yy = Math.floor(y - rad - 1); yy \u003c= Math.ceil(y + rad + 1); yy++)\n    for (let xx = Math.floor(x - rad - 1); xx \u003c= Math.ceil(x + rad + 1); xx++) {\n      const dx = xx + 0.5 - x;\n      const dy = yy + 0.5 - y;\n      under(xx, yy, rad + 0.5 - Math.sqrt(dx * dx + dy * dy), r, g, b);\n    }\n}\n\n// atan2 to about 1e-5 of a radian, which is plenty for an outline on LEDs.\nfunction angle(y, x) {\n  const ax = x \u003c 0 ? -x : x;\n  const ay = y \u003c 0 ? -y : y;\n  const a = (ax \u003c ay ? ax : ay) / ((ax > ay ? ax : ay) + 1e-9);\n  const s = a * a;\n  let r = ((-0.0464964749 * s + 0.15931422) * s - 0.327622764) * s * a + a;\n  if (ay > ax) r = 1.5707963 - r;\n  if (x \u003c 0) r = 3.1415927 - r;\n  return y \u003c 0 ? -r : r;\n}\n\n// How far an LED centre at (px, py) is inside the outline of a cam face\n// whose axle shows at screen x ax, measured in LEDs on the panel. Leaves the\n// in-plane position in hit.\nconst hit = { u: 0, v: 0, r: 0, a: 0 };\nfunction inside(prof, th, ax, px, py, low) {\n  const u = (px - ax) / SB;\n  const v = SHAFT - py;\n  const r = Math.sqrt(u * u + v * v);\n  hit.u = u;\n  hit.v = v;\n  hit.r = r;\n  if (r > R + 2) return -2;\n  if (r \u003c low - 3) return 2;\n  const a = angle(v, u);\n  hit.a = a;\n  let f = ((a - th) * S) / TAU;\n  f -= Math.floor(f / S) * S;\n  const k0 = f | 0;\n  const k1 = k0 + 1 === S ? 0 : k0 + 1;\n  const ca = r > 0 ? u / r : 1;\n  const sa = r > 0 ? v / r : 0;\n  const radial = Math.sqrt(ca * ca * SB * SB + sa * sa);\n  // A snail's drop is a straight edge out from the axle: near it, blend the\n  // high side and the low side by how far the LED sits from the edge.\n  const jump = prof[0] - prof[S - 1];\n  if (jump > 0.02) {\n    const side = (f > S / 2 ? f - S : f) * (TAU / S) * r;\n    if (side > -2.5 && side \u003c 2.5) {\n      const w = clamp01(0.5 + side * Math.sqrt(sa * sa * SB * SB + ca * ca));\n      return w * clamp01((prof[0] * R - r) * radial + 0.5) + (1 - w) * clamp01((prof[S - 1] * R - r) * radial + 0.5) - 0.5;\n    }\n  }\n  const edge = (prof[k0] + (prof[k1] - prof[k0]) * (f - k0)) * R;\n  return (edge - r) * radial;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  OUT = P.frame;\n  ALPHA = P.alpha;\n  OUT.fill(0);\n  ALPHA.fill(0);\n  const n = P.n;\n  const prof = P.prof;\n  const col = P.col;\n  const rr = P.roller;\n  const thick = P.thick * CB;\n  const gap = P.gap;\n  // Hues run along the shaft; the far cams sit a little deeper in shadow.\n  for (let i = 0; i \u003c n; i++) hsvInto(col, i * 3, 0.47 + P.hue + (0.36 * i) / (n - 1), 0.8, 0.97 - (0.22 * i) / (n - 1));\n\n  let low = Infinity;\n  for (let s = 0; s \u003c S; s++) low = Math.min(low, prof[s]);\n  const rest = low * R + rr;\n  const lowR = low * R;\n  const tops = P.tops;\n  for (let i = 0; i \u003c n; i++) tops[i] = WAVE - (P.rodY[i] - rest);\n  const guide1 = Math.round(SHAFT - R - rr * 2 - 6);\n  const guide2 = Math.round((guide1 + WAVE) / 2 + 4);\n\n  // The beads on the rod tops, and the strip they carry. The strip's height\n  // is worked out once per column, so it only ever moves up and down.\n  for (let i = 0; i \u003c n; i++) dot(P.cx[i], tops[i], 1.7, 255, 246, 228);\n  const first = P.cx[0];\n  const last = P.cx[n - 1];\n  const bead = P.bead;\n  let seg = 0;\n  for (let x = Math.floor(first); x \u003c= Math.ceil(last); x++) {\n    const px = Math.max(first, Math.min(last, x + 0.5));\n    while (seg \u003c n - 2 && px > P.cx[seg + 1]) seg++;\n    const t = (px - P.cx[seg]) / (P.cx[seg + 1] - P.cx[seg]);\n    const y1 = tops[seg];\n    const y2 = tops[seg + 1];\n    const y0 = seg > 0 ? tops[seg - 1] : 2 * y1 - y2;\n    const y3 = seg + 2 \u003c n ? tops[seg + 2] : 2 * y2 - y1;\n    // Catmull-Rom through the bead heights.\n    const y = 0.5 * (2 * y1 + (-y0 + y2) * t + (2 * y0 - 5 * y1 + 4 * y2 - y3) * t * t + (-y0 + 3 * y1 - 3 * y2 + y3) * t * t * t);\n    hsvInto(bead, 0, 0.47 + P.hue + 0.36 * clamp01((px - first) / (last - first)), 0.75, 1);\n    const top = y - 1;\n    const bot = y + STRIP;\n    for (let yy = Math.floor(top); yy \u003c= Math.ceil(bot); yy++) {\n      const a = Math.min(bot, yy + 1) - Math.max(top, yy);\n      if (a \u003c= 0) continue;\n      // Bright along the top edge, deeper underneath.\n      const k = (yy + 0.5 - top) / (bot - top);\n      const s = k \u003c 0.25 ? 1 : 1 - 0.55 * (k - 0.25);\n      const wv = k \u003c 0.25 ? 0.35 : 0;\n      under(x, yy, a, (bead[0] + (255 - bead[0]) * wv) * s, (bead[1] + (255 - bead[1]) * wv) * s, (bead[2] + (255 - bead[2]) * wv) * s);\n    }\n  }\n\n  // Brass bushings where each rod passes a guide, then the guides.\n  const bw = Math.min(2, gap / 2 - 0.7);\n  for (let i = 0; i \u003c n; i++) {\n    const x = P.cx[i];\n    for (const g of [guide1, guide2])\n      for (let y = g - 1; y \u003c= g + 3; y++)\n        for (let xx = Math.floor(x - bw - 1); xx \u003c= Math.floor(x + bw + 1); xx++) {\n          const s = y === g - 1 ? 1.15 : y === g + 3 ? 0.7 : 1;\n          under(xx, y, bw + 0.5 - Math.abs(xx + 0.5 - x), 212 * s, 166 * s, 74 * s);\n        }\n  }\n  for (const g of [guide1, guide2])\n    for (let x = 0; x \u003c W; x++) {\n      under(x, g, 1, 78, 90, 120);\n      under(x, g + 1, 1, 52, 60, 86);\n      under(x, g + 2, 1, 34, 40, 58);\n    }\n\n  // Cams from the nearest to the farthest, each after its own roller and rod.\n  for (let i = 0; i \u003c n; i++) {\n    const ax = P.cx[i];\n    const th = P.theta[i];\n    const cr = col[i * 3];\n    const cg = col[i * 3 + 1];\n    const cb = col[i * 3 + 2];\n    const yb = SHAFT - P.rodY[i];\n    dot(ax, yb, rr - 0.1, 240, 192, 96);\n    const yt = tops[i];\n    const xa = ax - ROD / 2;\n    const xb = ax + ROD / 2;\n    for (let xx = Math.floor(xa); xx \u003c= Math.floor(xb); xx++) {\n      const a = Math.min(xb, xx + 1) - Math.max(xa, xx);\n      if (a \u003c= 0) continue;\n      const shine = xx + 0.5 \u003c ax ? 1.15 : 0.8;\n      for (let y = Math.floor(yt); y \u003c= Math.ceil(yb); y++) under(xx, y, a * clamp01(Math.min(yb, y + 1) - Math.max(yt, y)), 160 * shine, 168 * shine, 186 * shine);\n    }\n\n    const hole = 0.14 * R;\n    const hu = Math.cos(th) * R * 0.56;\n    const hv = Math.sin(th) * R * 0.56;\n    for (let y = Math.floor(SHAFT - R - 1); y \u003c= Math.ceil(SHAFT + R + 1); y++) {\n      const py = y + 0.5;\n      const vv = SHAFT - py;\n      const half = Math.sqrt(Math.max(0, (R + 1.5) * (R + 1.5) - vv * vv)) * SB;\n      const x0 = Math.max(0, Math.floor(ax - half - 1));\n      const x1 = Math.min(W - 1, Math.ceil(ax + half + thick + 1));\n      for (let x = x0; x \u003c= x1; x++) {\n        if (ALPHA[y * W + x] > 0.997) continue;\n        const px = x + 0.5;\n        const d = inside(prof, th, ax, px, py, lowR);\n        const face = clamp01(d + 0.5);\n        if (face > 0) {\n          const u = hit.u;\n          const v = hit.v;\n          const r = hit.r;\n          // Light from the top left: the face's edge catches it there.\n          const lit = clamp01(1 - d / 1.4) * clamp01((v - u * 0.4) / Math.max(1, r));\n          let fr = cr + (255 - cr) * 0.45 * lit;\n          let fg = cg + (255 - cg) * 0.45 * lit;\n          let fb = cb + (255 - cb) * 0.45 * lit;\n          let cover = face;\n          // A lightening hole toward the nose: what is behind shows through.\n          const hx = (u - hu) * SB;\n          const hy = v - hv;\n          cover *= 1 - clamp01(hole * 0.75 + 0.5 - Math.sqrt(hx * hx + hy * hy));\n          // The hub and the shaft's end, steel.\n          const hub = clamp01(2.6 - r * 0.75);\n          if (hub > 0) {\n            const s = r \u003c 1.6 ? 0.7 : 1;\n            fr += (180 * s - fr) * hub;\n            fg += (186 * s - fg) * hub;\n            fb += (200 * s - fb) * hub;\n            cover = Math.max(cover, hub * face);\n          }\n          under(x, y, cover, fr, fg, fb);\n          if (face >= 1 && cover >= 1) continue;\n        }\n        // The rim: the outline swept back along the shaft to the far face,\n        // lit on top and in shade underneath.\n        const rim = clamp01(inside(prof, th, ax + thick, px, py, lowR) + 0.5);\n        if (rim > 0) {\n          const s = 0.38 + 0.35 * clamp01(0.5 + (0.6 * hit.v) / Math.max(1, hit.r));\n          under(x, y, rim, cr * s, cg * s, cb * s);\n        }\n      }\n    }\n  }\n\n  // The shaft, seen between the cams, and the frame that carries it.\n  for (let y = SHAFT - 2; y \u003c= SHAFT + 1; y++)\n    for (let x = 2; x \u003c W - 2; x++) {\n      const s = y === SHAFT - 2 ? 1.2 : y === SHAFT + 1 ? 0.55 : 0.85;\n      under(x, y, 1, 150 * s, 156 * s, 172 * s);\n    }\n  for (let y = guide2; y \u003c H; y++) {\n    for (const x of [0, W - 2]) {\n      under(x, y, 1, 84, 94, 124);\n      under(x + 1, y, 1, 54, 62, 86);\n    }\n  }\n  for (let y = H - 4; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const s = y === H - 4 ? 1.25 : 0.8;\n      under(x, y, 1, 60 * s, 68 * s, 94 * s);\n    }\n\n  const out = OUT;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Cams=6..12, Phase=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours of the cams and the strip together, starting from a row that runs from teal at the near end through blue and violet to magenta at the far end."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the shaft turns: at 2 every cam goes round once in two seconds, at the top in 1.3, at the bottom in 20."},{"name":"Cams","min":6,"max":12,"about":"How many cams and rods the shaft carries, from 6 to 12; the cams stay 38 LEDs tall and crowd closer along the shaft, 7.9 LEDs apart at 6 and 3.6 at 12."},{"name":"Phase","min":-1,"max":1,"about":"How far each cam is keyed past its neighbour: at the left end all alike and the rods pump together, in the middle 60 degrees so six cams make one wave, at the right end 180 degrees so neighbours move opposite and the wave stands still. The cams slide round to their new keying in about half a second."}],"start":[0,2,6,0.06],"measures":{"motion":0.4062,"detail":0.0758,"edges":0.6341,"complexity":0.5068,"coverage":0.4175,"colour":0.2693,"drift":0.1185},"knobResponse":[0.0838,0.0978,0.1488,0.0628]},{"slug":"change-ringing","title":"Change Ringing","family":"rhythm","round":20,"note":"종탑 종실에서 종들이 바퀴째 한 바퀴씩 돌며 칠 때마다 번쩍이고, 그 아래로 종마다 제 색의 선이 체인지 한 줄에 한 칸씩 Plain Bob 을 따라 지그재그로 흘러내려요. 트레블의 선만 빨강이고, K1 을 누르면 「Bob!」을 불러 다음 리드 엔드에서 2번 자리 대신 4번 자리를 만들어요.","idea":"In the bell chamber of a church tower the bells swing full circle on their wheels and flash as they strike, while below them the method they ring prints itself down the panel as a blue line, one change to a row, the treble's line in red, from rounds into Plain Bob and back into rounds.","buttons":"K1 tap calls \"Bob!\": the next lead end makes fourths place instead, a gold rule marks it in the scroll, and the conductor calls more bobs as needed to bring the bells back into rounds.","code":"// ===== Patternflow pattern =====\n// Title:   Change Ringing\n// Family:  rhythm\n// Idea:    In the bell chamber of a church tower the bells swing full circle on their wheels and flash as they strike, while below them the method they ring prints itself down the panel as a blue line, one change to a row, the treble's line in red, from rounds into Plain Bob and back into rounds.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: English change ringing (plain hunting, Plain Bob, Double Bob) and the blue-line diagrams ringers learn methods from, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Lines=0..1, Speed=0.25..3, Bells=4..8, Method=-1..1\n//\n// Knob 1: Lines. Turns the colours of the working bells' lines round the wheel together, from yellow through cyan to violet at 0; the turn skips the reds, so the treble's line is the only red one.\n// Knob 2: Speed. The ringing pace: at 2 a bell strikes every 0.3 s, so a row of six takes 1.8 s, with the open handstroke gap of one more beat after every second row.\n// Knob 3: Bells. How many bells hang in the tower and ring: 4 is Minimus, 5 Doubles, 6 Minor, 7 Triples and 8 Major. Changing it starts the band again from rounds.\n// Knob 4: Method. -1 is plain hunting, 0 is Plain Bob (seconds place at each lead end, the bells dodging round the treble) and 1 is Double Bob, which makes the mirror of it at the half lead as well. A change waits for the next lead end, so the methods splice.\n// Buttons: K1 tap calls \"Bob!\": the next lead end makes fourths place instead, a gold rule marks it in the scroll, and the conductor calls more bobs as needed to bring the bells back into rounds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Axle rows of the two tiers of bells, and the chamber floor.\nconst TIER = [12, 26];\nconst FLOOR = 37;\n// The current change printed as numbers, the row its line starts on, and the\n// bottom of the scroll. The ringing chamber is under that.\nconst DIG = 41;\nconst TOP = 49;\nconst LOW = 111;\nconst CEIL = 112;\n// A bell rings just short of the balance either side, mouth up.\nconst SWING = Math.PI * 0.94;\n// Seconds a beat at Speed 1, and how far past a strike the bell reaches the balance.\nconst BEAT = 0.6;\nconst BAL = 0.22;\nconst ROUNDS = 6;\nconst SLIDE = 1.2;\nconst { min, max, floor, round, sin, cos, abs, sqrt, exp, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n// 3x5 letters, one octal digit a row.\nconst FONT = {\n  1: \"26227\", 2: \"71747\", 3: \"71717\", 4: \"55711\", 5: \"74717\", 6: \"74757\", 7: \"71222\", 8: \"75757\",\n  A: \"25755\", B: \"65656\", D: \"65556\", E: \"74647\", G: \"34553\", H: \"55755\", I: \"72227\", L: \"44447\",\n  N: \"57755\", O: \"25552\", P: \"65644\", S: \"34216\", T: \"72222\", U: \"55557\", \"!\": \"22202\", \" \": \"00000\",\n};\nconst NAMES = [\"PLAIN HUNT\", \"PLAIN BOB\", \"DOUBLE BOB\"];\n\n// Start of row r in beats: n strikes a row and one beat of handstroke gap\n// before every handstroke but the first.\nconst startOf = (n, r) => r * n + floor(r / 2);\n\n// One lead as place notation: a bitmask of the places made, 0 for a cross.\n// Even stages hunt x.1n, odd ones n.1; Plain Bob makes seconds at the lead\n// end (fourths at a bob) and Double Bob the mirror of it at the half lead.\nfunction leadChanges(n, m, bob) {\n  const top = 1 \u003c\u003c (n - 1);\n  const odd = n & 1;\n  const ch = [];\n  for (let k = 0; k \u003c 2 * n; k++) ch.push(k & 1 ? (odd ? 1 : 1 | top) : odd ? top : 0);\n  if (m === 2) ch[n - 1] = top | (top >> 1) | (odd ? 1 : 0);\n  if (m > 0 || bob) ch[2 * n - 1] = (bob ? 9 : 3) | (odd ? top : 0);\n  return ch;\n}\n\nfunction change(row, mask, n) {\n  for (let i = 0; i \u003c n; ) {\n    if ((mask >> i) & 1 || i === n - 1) i++;\n    else {\n      const t = row[i];\n      row[i] = row[i + 1];\n      row[i + 1] = t;\n      i += 2;\n    }\n  }\n}\n\nconst rounds = (n) => Array.from({ length: n }, (_, i) => i);\n\nfunction leadPerm(n, m, bob) {\n  const r = rounds(n);\n  for (const c of leadChanges(n, m, bob)) change(r, c, n);\n  return r;\n}\n\n// Leads from each lead head back to rounds, plain or bob, found once.\nfunction table(P, n, m) {\n  const id = n * 3 + m;\n  if (P.tables[id]) return P.tables[id];\n  const R = [leadPerm(n, m, false), leadPerm(n, m, true)];\n  const dist = new Map([[rounds(n).join(\"\"), 0]]);\n  const q = [rounds(n)];\n  for (let h = 0; h \u003c q.length; h++) {\n    const X = q[h];\n    const d = dist.get(X.join(\"\"));\n    for (const p of R) {\n      const Y = [];\n      for (let i = 0; i \u003c n; i++) Y[p[i]] = X[i];\n      const key = Y.join(\"\");\n      if (!dist.has(key)) {\n        dist.set(key, d + 1);\n        q.push(Y);\n      }\n    }\n  }\n  return (P.tables[id] = dist);\n}\n\nfunction say(P, text, row) {\n  if (row \u003c= P.cur) P.msg = [text, 2.4];\n  else P.calls.set(row, text);\n}\n\n// The next row of the touch: rounds, then the method lead after lead until\n// it comes round, then rounds again.\nfunction gen(P) {\n  const G = P.G;\n  const n = P.n;\n  const r = P.r0 + P.rows.length;\n  const row = G.row.slice();\n  let mark = 0;\n  if (G.phase === 0) {\n    if (++G.count >= G.need) {\n      Object.assign(G, { phase: 1, ci: 0, m: P.m, called: false, first: true, need: ROUNDS, rung: 0 });\n      say(P, \"GO \" + NAMES[G.m], r - 1);\n    }\n  } else {\n    if (G.ci === 0) {\n      if (!G.first && G.m !== P.m) say(P, NAMES[P.m], r - 1);\n      G.m = P.m;\n      G.first = false;\n      G.head = row.slice();\n    }\n    const last = G.ci === 2 * n - 1;\n    let bob = false;\n    if (last) {\n      if (G.pend) {\n        G.pend = false;\n        G.called = bob = true;\n      } else if (G.called) {\n        const T = table(P, n, G.m);\n        const after = (b) => {\n          const p = leadPerm(n, G.m, b);\n          return T.get(p.map((i) => G.head[i]).join(\"\")) ?? 1e9;\n        };\n        bob = after(true) \u003c after(false);\n        if (bob) say(P, \"BOB!\", r - 2);\n      }\n      // Plain hunting has no lead end to rule off.\n      mark = bob ? 2 : G.m ? 1 : 0;\n    }\n    change(row, leadChanges(n, G.m, bob)[G.ci], n);\n    G.ci = last ? 0 : G.ci + 1;\n    G.rung++;\n    if (last && G.rung >= 24 && row.every((b, i) => b === i)) {\n      Object.assign(G, { phase: 0, count: 0 });\n      say(P, \"THATS ALL\", r);\n    }\n  }\n  G.row = row;\n  const pos = new Int8Array(n);\n  row.forEach((b, i) => (pos[b] = i));\n  P.rows.push(Int8Array.from(row));\n  P.pos.push(pos);\n  P.mark.push(mark);\n}\n\nfunction rowAt(P, tau) {\n  const n = P.n;\n  let r = max(0, floor(tau / (n + 0.5)));\n  while (startOf(n, r + 1) \u003c= tau) r++;\n  while (r > 0 && startOf(n, r) > tau) r--;\n  return r;\n}\n\nfunction need(P, r) {\n  while (P.r0 + P.rows.length \u003c= r) gen(P);\n}\n\nconst strike = (P, r, b) => startOf(P.n, r) + P.pos[r - P.r0][b];\nconst balance = (P, r, b) => strike(P, r, b) + BAL * (strike(P, r + 1, b) - strike(P, r, b));\n\nfunction layout(P, n) {\n  const dx = W / n;\n  const rb = min(10, 0.47 * Math.hypot(dx, TIER[1] - TIER[0]), 0.94 * dx);\n  for (let i = 0; i \u003c n; i++) {\n    P.bx[i] = (i + 0.5) * dx;\n    P.by[i] = TIER[i & 1];\n    P.br[i] = rb * (0.74 + (0.26 * i) / (n - 1));\n  }\n  P.rh = n \u003c 5 ? 6 : n \u003c 7 ? 5 : 4;\n  P.sp = min(60 / (n - 1), P.rh * 2.1);\n  for (let p = 0; p \u003c n; p++) P.xs[p] = 32 + (p - (n - 1) / 2) * P.sp;\n  P.V = floor((LOW - TOP) / P.rh) + 1;\n}\n\nfunction paint(P) {\n  const S = P.bg;\n  const n = P.n;\n  S.fill(0);\n  const set = (x, y, r, g, b) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) S.set([r, g, b], (y * W + x) * 3);\n  };\n  // Stone walls of the bell chamber, coursed in blocks of 8 by 4.\n  for (let y = 0; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const bx = floor((x + ((y >> 2) & 1) * 4) / 8);\n      const by = y >> 2;\n      const joint = y % 4 === 3 || (x + ((y >> 2) & 1) * 4) % 8 === 7;\n      const s = joint ? 8 : 15 + ((bx * 7 + by * 13) % 5) * 1.6 + Math.random() * 3;\n      set(x, y, s * 1.05, s, s * 0.9);\n    }\n  // A louvred window behind the bells, daylight between the boards.\n  for (let y = 3; y \u003c 33; y++)\n    for (let x = 27; x \u003c 37; x++) {\n      const arch = y \u003c 8 && Math.hypot(x + 0.5 - 32, y - 8) > 5;\n      if (arch) continue;\n      const edge = x === 27 || x === 36 || (y \u003c 8 && Math.hypot(x + 0.5 - 32, y - 8) > 4);\n      const slat = (y + floor((x - 27) / 3)) % 3 === 0;\n      if (edge) set(x, y, 52, 46, 40);\n      else if (slat) set(x, y, 46, 40, 34);\n      else set(x, y, 120 + y, 150 + y, 186 + y * 0.5);\n    }\n  // The frame: an oak beam under each tier's bearings.\n  for (const ty of TIER)\n    for (let x = 0; x \u003c W; x++) {\n      set(x, ty + 2, 70, 46, 28);\n      set(x, ty + 3, 44, 28, 18);\n    }\n  // The floor boards, with a hole for each rope.\n  for (let y = FLOOR; y \u003c FLOOR + 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const hole = y > FLOOR && P.bx.some((b, i) => i \u003c n && x === floor(b + P.br[i] - 0.6));\n      const v = y === FLOOR ? 1 : hole ? 0.2 : x % 11 === 5 ? 0.45 : 0.72;\n      set(x, y, 104 * v, 70 * v, 42 * v);\n    }\n  // Faint rulings down each place of the scroll.\n  for (let p = 0; p \u003c n; p++)\n    for (let y = TOP; y \u003c= LOW; y += 2) set(floor(P.xs[p]), y, 9, 9, 13);\n  // The ringing chamber: ceiling beam and plastered wall.\n  for (let y = CEIL; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y \u003c CEIL + 2) set(x, y, y === CEIL ? 84 : 52, y === CEIL ? 58 : 34, y === CEIL ? 36 : 22);\n      else {\n        const s = 34 + Math.random() * 4 - (y - CEIL) * 0.5;\n        set(x, y, s * 1.1, s, s * 0.84);\n      }\n    }\n}\n\nfunction reset(P, n) {\n  P.n = n;\n  layout(P, n);\n  paint(P);\n  P.G = { row: rounds(n), phase: 0, count: 0, need: 4, ci: 0, m: P.m, pend: false, called: false };\n  Object.assign(P, { rows: [], pos: [], mark: [], r0: 0, calls: new Map(), msg: null, cur: -1 });\n  // Open part way into the first touch, with its first lead end in view.\n  const r = 4 + 2 * n + floor(P.V / 2);\n  need(P, r + 3);\n  P.tau = startOf(n, r) + 1.5;\n  P.cur = r;\n  P.fl.fill(0);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (k) => new Float32Array(k);\n  Object.assign(P, { buf: F(N * 3), bg: F(N * 3), bx: F(8), by: F(8), br: F(8), xs: F(8), th: F(8), fl: F(8), col: F(24) });\n  Object.assign(P, { tables: {}, n: 0, m: 1, hue: 0, speed: 2, tau: 0, e: 1 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = clamp(k[1], 0.25, 3);\n  P.m = k[3] \u003c -0.4 ? 0 : k[3] > 0.4 ? 2 : 1;\n  const n = clamp(round(k[2]), 4, 8);\n  if (n !== P.n) reset(P, n);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.G.pend = true;\n    P.msg = [\"BOB!\", 2.4];\n  }\n  const was = P.tau;\n  P.tau += (dt * P.speed) / BEAT;\n  const cur = rowAt(P, P.tau);\n  need(P, cur + 3);\n  for (let r = P.cur + 1; r \u003c= cur; r++)\n    if (P.calls.has(r)) {\n      P.msg = [P.calls.get(r), 2.4];\n      P.calls.delete(r);\n    }\n  P.cur = cur;\n  // Strikes since the last frame.\n  for (let r = rowAt(P, was); r \u003c= cur; r++)\n    for (let b = 0; b \u003c n; b++) {\n      const t = strike(P, r, b);\n      if (t > was && t \u003c= P.tau) P.fl[b] = 1;\n    }\n  for (let b = 0; b \u003c n; b++) {\n    P.fl[b] *= exp(-dt * 5);\n    // The stroke this bell is in: from one balance to the next.\n    let s = cur;\n    if (P.tau \u003c balance(P, s - 1, b)) s--;\n    else if (P.tau >= balance(P, s, b)) s++;\n    const b0 = balance(P, s - 1, b);\n    const u = (P.tau - b0) / (balance(P, s, b) - b0);\n    P.th[b] = (s & 1 ? -1 : 1) * SWING * cos(PI * clamp(u, 0, 1));\n  }\n  P.e = smooth((P.tau - startOf(n, cur)) / SLIDE);\n  if (P.msg && (P.msg[1] -= dt) \u003c= 0) P.msg = null;\n  // Keep sixty rows of history; the scroll shows at most seventeen.\n  if (P.rows.length > 80) {\n    const cut = P.rows.length - 60;\n    for (const A of [P.rows, P.pos, P.mark]) A.splice(0, cut);\n    P.r0 += cut;\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6;\n  const f = h - floor(h);\n  const a = v * (1 - s);\n  const b = v * (1 - s * f);\n  const c = v * (1 - s * (1 - f));\n  const rgb = [[v, c, a], [b, v, a], [a, v, c], [a, b, v], [c, a, v], [v, a, b]][i];\n  for (let k = 0; k \u003c 3; k++) out[o + k] = rgb[k] * 255;\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = (y * W + x) * 3;\n  buf[p] = r;\n  buf[p + 1] = g;\n  buf[p + 2] = b;\n}\n\nfunction bell(P, i) {\n  const { buf, col } = P;\n  const ax = P.bx[i];\n  const ay = P.by[i];\n  const R = P.br[i];\n  const th = P.th[i];\n  const fl = P.fl[i];\n  const mx = -sin(th);\n  const my = cos(th);\n  const L = 0.92 * R;\n  const u0 = 0.06 * R;\n  const G = R + 3;\n  const hl = -0.45 * my;\n  const spokes = [0, 1, 2, 3].map((s) => [cos(th + PI / 4 + (s * PI) / 2), sin(th + PI / 4 + (s * PI) / 2)]);\n  for (let y = max(0, floor(ay - G)); y \u003c= min(FLOOR - 1, floor(ay + G)); y++)\n    for (let x = max(0, floor(ax - G)); x \u003c= min(W - 1, floor(ax + G)); x++) {\n      const p = (y * W + x) * 3;\n      const dx = x + 0.5 - ax;\n      const dy = y + 0.5 - ay;\n      const d = sqrt(dx * dx + dy * dy);\n      if (d >= G) continue;\n      // The strike lights the air round the bell in the colour of its line.\n      if (fl > 0.02) {\n        const g = fl * 0.55 * (1 - d / G);\n        for (let c = 0; c \u003c 3; c++) buf[p + c] += col[i * 3 + c] * g;\n      }\n      // Wheel: rim and four spokes, turning with the bell.\n      let wv = clamp(1 - abs(d - (R - 0.5)) / 0.7, 0, 1);\n      if (d \u003c R - 0.8)\n        for (const [c, s] of spokes) {\n          const along = dx * c + dy * s;\n          if (along > 0) wv = max(wv, 0.5 * clamp(1 - abs(dy * c - dx * s) / 0.6, 0, 1));\n        }\n      if (wv > 0) {\n        buf[p] += (104 - buf[p]) * wv;\n        buf[p + 1] += (68 - buf[p + 1]) * wv;\n        buf[p + 2] += (38 - buf[p + 2]) * wv;\n      }\n      // The bell and its headstock, four samples to an LED.\n      if (d > 1.15 * R + 0.8) continue;\n      let cov = 0;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let s = 0; s \u003c 4; s++) {\n        const sx = dx - 0.25 + 0.5 * (s & 1);\n        const sy = dy - 0.25 + 0.5 * (s >> 1);\n        const u = sx * mx + sy * my;\n        const v = sx * my - sy * mx;\n        if (u \u003c u0) {\n          if (u > -0.16 * R && abs(v) \u003c 0.38 * R) {\n            r += 72;\n            g += 58;\n            b += 50;\n            cov++;\n          }\n          continue;\n        }\n        const t = (u - u0) / L;\n        if (t \u003c 0 || t > 1) continue;\n        let w = L * (0.27 + 0.06 * t + 0.27 * t * t * t * t);\n        if (t \u003c 0.12) w *= 0.6 + (0.4 * t) / 0.12;\n        const q = v / w;\n        if (abs(q) > 1) continue;\n        let sh = (0.5 + 0.65 * exp(-(q - hl) * (q - hl) * 5)) * (1 - 0.3 * q * q);\n        if (t > 0.8 && t \u003c 0.93) sh *= 1.12;\n        else if (t > 0.94) sh *= 0.55;\n        r += 228 * sh + fl * 200;\n        g += 160 * sh + fl * 170;\n        b += 70 * sh + fl * 120;\n        cov++;\n      }\n      if (cov) {\n        const a = cov / 4;\n        buf[p] = buf[p] * (1 - a) + r / 4;\n        buf[p + 1] = buf[p + 1] * (1 - a) + g / 4;\n        buf[p + 2] = buf[p + 2] * (1 - a) + b / 4;\n      }\n    }\n}\n\nfunction chamber(P) {\n  const { n, buf } = P;\n  // Each rope comes off its wheel and down through the floor, creeping as the wheel turns.\n  for (let i = 0; i \u003c n; i++) {\n    const x = floor(P.bx[i] + P.br[i] - 0.6);\n    for (let y = P.by[i]; y \u003c FLOOR + 3 && x \u003c W; y++) {\n      const v = 0.6 + 0.3 * sin((y + P.th[i] * P.br[i]) * 1.4);\n      put(buf, x, y, 168 * v, 134 * v, 90 * v);\n    }\n  }\n  for (let i = 0; i \u003c n; i += 2) bell(P, i);\n  for (let i = 1; i \u003c n; i += 2) bell(P, i);\n}\n\n// One leg of a bell's line, a soft 1-LED core with a dim edge either side,\n// kept brightest where lines cross.\nfunction seg(P, x0, y0, x1, y1, b, k) {\n  const { buf, col } = P;\n  const core = b === 0 ? 0.9 : 0.72;\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const l2 = dx * dx + dy * dy || 1;\n  const o = b * 3;\n  for (let y = max(TOP - 1, floor(min(y0, y1) - 3)); y \u003c= min(LOW, floor(max(y0, y1) + 3)); y++)\n    for (let x = max(0, floor(min(x0, x1) - 3)); x \u003c= min(W - 1, floor(max(x0, x1) + 3)); x++) {\n      const px = x + 0.5 - x0;\n      const py = y + 0.5 - y0;\n      const t = clamp((px * dx + py * dy) / l2, 0, 1);\n      const ex = px - t * dx;\n      const ey = py - t * dy;\n      const d = sqrt(ex * ex + ey * ey);\n      let v = d \u003c core ? 1 : d \u003c core + 1 ? core + 1 - d : 0;\n      v = max(v, 0.36 * clamp(2.8 - d, 0, 1)) * k;\n      if (v \u003c= 0) continue;\n      const p = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[p + c] = max(buf[p + c], col[o + c] * v);\n    }\n}\n\nfunction scroll(P) {\n  const { n, rh, xs, cur, buf, e } = P;\n  for (let a = 0; a \u003c= P.V; a++) {\n    const r = cur - a;\n    if (r - 1 \u003c P.r0) break;\n    const ya = TOP + (a - 1 + e) * rh + 0.5;\n    const k = 0.4 + 0.6 * exp(-(a + e) / 6);\n    const A = P.pos[r - P.r0];\n    const B = P.pos[r - 1 - P.r0];\n    // A rule under each lead end, gold and dashed where a bob was called.\n    const mark = P.mark[r - P.r0];\n    const yr = floor(ya + rh / 2);\n    if (mark && yr >= TOP && yr \u003c= LOW)\n      for (let x = floor(xs[0] - 3); x \u003c= xs[n - 1] + 3; x++)\n        if (mark === 2 ? x % 3 !== 0 : x % 2 === 0) put(buf, x, yr, (mark === 2 ? 220 : 70) * k, (mark === 2 ? 170 : 70) * k, (mark === 2 ? 60 : 84) * k);\n    for (let b = n - 1; b >= 0; b--) seg(P, xs[A[b]], ya, xs[B[b]], ya + rh, b, k);\n  }\n}\n\nfunction glyphs(buf, s, x, y, r, g, b) {\n  for (const ch of s) {\n    const gl = FONT[ch] || FONT[\" \"];\n    for (let row = 0; row \u003c 5; row++)\n      for (let c = 0; c \u003c 3; c++) if ((+gl[row] >> (2 - c)) & 1) put(buf, x + c, y + row, r, g, b);\n    x += 4;\n  }\n}\n\n// The change being struck, as numbers: each lights in its bell's colour as\n// it sounds, with a white flash on the strike.\nfunction numbers(P) {\n  const { n, buf, col, xs } = P;\n  const row = P.rows[P.cur - P.r0];\n  const j = P.tau - startOf(n, P.cur);\n  for (let p = 0; p \u003c n; p++) {\n    const b = row[p];\n    const since = j - p;\n    const v = since \u003c 0 ? 0.3 : 0.85;\n    const w = since \u003c 0 ? 0 : max(0, 1 - since / 0.9);\n    const c = [0, 1, 2].map((i) => col[b * 3 + i] * v * (1 - w) + 255 * w);\n    glyphs(buf, String(b + 1), round(xs[p] - 1.5), DIG, c[0], c[1], c[2]);\n    if (since \u003c 0) continue;\n    // Each node of the row lights as its bell sounds, white for the moment of the strike.\n    const ny = TOP + (P.e - 1) * P.rh + 0.5;\n    for (let y = max(TOP - 1, floor(ny - 4)); y \u003c= floor(ny + 4); y++)\n      for (let x = max(0, floor(xs[p] - 4)); x \u003c= min(W - 1, floor(xs[p] + 4)); x++) {\n        const d = Math.hypot(x + 0.5 - xs[p], y + 0.5 - ny);\n        if (d >= 4) continue;\n        const g = (1 - d / 4) * (0.45 + 0.5 * w);\n        const q = (y * W + x) * 3;\n        for (let i = 0; i \u003c 3; i++) buf[q + i] = max(buf[q + i], (col[b * 3 + i] * (1 - w) + 255 * w) * g);\n      }\n  }\n}\n\n// Ropes and sallies in the ringing chamber, each sally woven in its bell's\n// colour and white: it rises as its bell swings off the handstroke and comes\n// back down to the ringer.\nfunction ringers(P) {\n  const { n, buf, col } = P;\n  for (let i = 0; i \u003c n; i++) {\n    const x = round(P.bx[i] - 0.5);\n    const rise = (SWING - P.th[i]) / (2 * SWING);\n    const top = round(CEIL + 9 - rise * 7);\n    for (let y = CEIL + 2; y \u003c H; y++) {\n      if (y >= top && y \u003c top + 7) {\n        for (let c = -1; c \u003c= 1; c++) {\n          const k = (y - top + c + 8) % 4;\n          const v = (c === 1 ? 0.7 : 1) * (k === 2 ? 0.55 : 1);\n          for (let j = 0; j \u003c 3; j++) buf[(y * W + x + c) * 3 + j] = (k & 1 ? [232, 226, 214][j] : col[i * 3 + j]) * v;\n        }\n      } else if (y \u003c top + 13) put(buf, x, y, 176, 146, 102);\n    }\n  }\n}\n\nfunction message(P) {\n  if (!P.msg) return;\n  const [s, left] = P.msg;\n  const f = min(1, left / 0.5);\n  const w = s.length * 4 - 1;\n  const x = round(32 - w / 2);\n  const y = LOW - 8;\n  for (let yy = y - 2; yy \u003c y + 7; yy++) for (let xx = x - 2; xx \u003c x + w + 2; xx++) put(P.buf, xx, yy, 0, 0, 0);\n  glyphs(P.buf, s, x, y, 255 * f, 240 * f, 200 * f);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, col, n } = P;\n  if (!n) return;\n  for (let b = 0; b \u003c n; b++) {\n    if (b === 0) hsv(0, 0.84, 1, col, 0);\n    else {\n      // The working bells share the wheel without its reds, so only the treble is red.\n      const u = 0.05 + P.hue + (0.84 * (b - 1)) / (n - 2);\n      hsv(0.13 + 0.74 * (u - floor(u)), 0.82, 1, col, b * 3);\n    }\n  }\n  buf.set(P.bg);\n  chamber(P);\n  scroll(P);\n  numbers(P);\n  ringers(P);\n  message(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-change-ringing","type":"code","name":"change-ringing","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Change Ringing\n// Family:  rhythm\n// Idea:    In the bell chamber of a church tower the bells swing full circle on their wheels and flash as they strike, while below them the method they ring prints itself down the panel as a blue line, one change to a row, the treble's line in red, from rounds into Plain Bob and back into rounds.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: English change ringing (plain hunting, Plain Bob, Double Bob) and the blue-line diagrams ringers learn methods from, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Lines=0..1, Speed=0.25..3, Bells=4..8, Method=-1..1\n//\n// Knob 1: Lines. Turns the colours of the working bells' lines round the wheel together, from yellow through cyan to violet at 0; the turn skips the reds, so the treble's line is the only red one.\n// Knob 2: Speed. The ringing pace: at 2 a bell strikes every 0.3 s, so a row of six takes 1.8 s, with the open handstroke gap of one more beat after every second row.\n// Knob 3: Bells. How many bells hang in the tower and ring: 4 is Minimus, 5 Doubles, 6 Minor, 7 Triples and 8 Major. Changing it starts the band again from rounds.\n// Knob 4: Method. -1 is plain hunting, 0 is Plain Bob (seconds place at each lead end, the bells dodging round the treble) and 1 is Double Bob, which makes the mirror of it at the half lead as well. A change waits for the next lead end, so the methods splice.\n// Buttons: K1 tap calls \"Bob!\": the next lead end makes fourths place instead, a gold rule marks it in the scroll, and the conductor calls more bobs as needed to bring the bells back into rounds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Axle rows of the two tiers of bells, and the chamber floor.\nconst TIER = [12, 26];\nconst FLOOR = 37;\n// The current change printed as numbers, the row its line starts on, and the\n// bottom of the scroll. The ringing chamber is under that.\nconst DIG = 41;\nconst TOP = 49;\nconst LOW = 111;\nconst CEIL = 112;\n// A bell rings just short of the balance either side, mouth up.\nconst SWING = Math.PI * 0.94;\n// Seconds a beat at Speed 1, and how far past a strike the bell reaches the balance.\nconst BEAT = 0.6;\nconst BAL = 0.22;\nconst ROUNDS = 6;\nconst SLIDE = 1.2;\nconst { min, max, floor, round, sin, cos, abs, sqrt, exp, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n// 3x5 letters, one octal digit a row.\nconst FONT = {\n  1: \"26227\", 2: \"71747\", 3: \"71717\", 4: \"55711\", 5: \"74717\", 6: \"74757\", 7: \"71222\", 8: \"75757\",\n  A: \"25755\", B: \"65656\", D: \"65556\", E: \"74647\", G: \"34553\", H: \"55755\", I: \"72227\", L: \"44447\",\n  N: \"57755\", O: \"25552\", P: \"65644\", S: \"34216\", T: \"72222\", U: \"55557\", \"!\": \"22202\", \" \": \"00000\",\n};\nconst NAMES = [\"PLAIN HUNT\", \"PLAIN BOB\", \"DOUBLE BOB\"];\n\n// Start of row r in beats: n strikes a row and one beat of handstroke gap\n// before every handstroke but the first.\nconst startOf = (n, r) => r * n + floor(r / 2);\n\n// One lead as place notation: a bitmask of the places made, 0 for a cross.\n// Even stages hunt x.1n, odd ones n.1; Plain Bob makes seconds at the lead\n// end (fourths at a bob) and Double Bob the mirror of it at the half lead.\nfunction leadChanges(n, m, bob) {\n  const top = 1 \u003c\u003c (n - 1);\n  const odd = n & 1;\n  const ch = [];\n  for (let k = 0; k \u003c 2 * n; k++) ch.push(k & 1 ? (odd ? 1 : 1 | top) : odd ? top : 0);\n  if (m === 2) ch[n - 1] = top | (top >> 1) | (odd ? 1 : 0);\n  if (m > 0 || bob) ch[2 * n - 1] = (bob ? 9 : 3) | (odd ? top : 0);\n  return ch;\n}\n\nfunction change(row, mask, n) {\n  for (let i = 0; i \u003c n; ) {\n    if ((mask >> i) & 1 || i === n - 1) i++;\n    else {\n      const t = row[i];\n      row[i] = row[i + 1];\n      row[i + 1] = t;\n      i += 2;\n    }\n  }\n}\n\nconst rounds = (n) => Array.from({ length: n }, (_, i) => i);\n\nfunction leadPerm(n, m, bob) {\n  const r = rounds(n);\n  for (const c of leadChanges(n, m, bob)) change(r, c, n);\n  return r;\n}\n\n// Leads from each lead head back to rounds, plain or bob, found once.\nfunction table(P, n, m) {\n  const id = n * 3 + m;\n  if (P.tables[id]) return P.tables[id];\n  const R = [leadPerm(n, m, false), leadPerm(n, m, true)];\n  const dist = new Map([[rounds(n).join(\"\"), 0]]);\n  const q = [rounds(n)];\n  for (let h = 0; h \u003c q.length; h++) {\n    const X = q[h];\n    const d = dist.get(X.join(\"\"));\n    for (const p of R) {\n      const Y = [];\n      for (let i = 0; i \u003c n; i++) Y[p[i]] = X[i];\n      const key = Y.join(\"\");\n      if (!dist.has(key)) {\n        dist.set(key, d + 1);\n        q.push(Y);\n      }\n    }\n  }\n  return (P.tables[id] = dist);\n}\n\nfunction say(P, text, row) {\n  if (row \u003c= P.cur) P.msg = [text, 2.4];\n  else P.calls.set(row, text);\n}\n\n// The next row of the touch: rounds, then the method lead after lead until\n// it comes round, then rounds again.\nfunction gen(P) {\n  const G = P.G;\n  const n = P.n;\n  const r = P.r0 + P.rows.length;\n  const row = G.row.slice();\n  let mark = 0;\n  if (G.phase === 0) {\n    if (++G.count >= G.need) {\n      Object.assign(G, { phase: 1, ci: 0, m: P.m, called: false, first: true, need: ROUNDS, rung: 0 });\n      say(P, \"GO \" + NAMES[G.m], r - 1);\n    }\n  } else {\n    if (G.ci === 0) {\n      if (!G.first && G.m !== P.m) say(P, NAMES[P.m], r - 1);\n      G.m = P.m;\n      G.first = false;\n      G.head = row.slice();\n    }\n    const last = G.ci === 2 * n - 1;\n    let bob = false;\n    if (last) {\n      if (G.pend) {\n        G.pend = false;\n        G.called = bob = true;\n      } else if (G.called) {\n        const T = table(P, n, G.m);\n        const after = (b) => {\n          const p = leadPerm(n, G.m, b);\n          return T.get(p.map((i) => G.head[i]).join(\"\")) ?? 1e9;\n        };\n        bob = after(true) \u003c after(false);\n        if (bob) say(P, \"BOB!\", r - 2);\n      }\n      // Plain hunting has no lead end to rule off.\n      mark = bob ? 2 : G.m ? 1 : 0;\n    }\n    change(row, leadChanges(n, G.m, bob)[G.ci], n);\n    G.ci = last ? 0 : G.ci + 1;\n    G.rung++;\n    if (last && G.rung >= 24 && row.every((b, i) => b === i)) {\n      Object.assign(G, { phase: 0, count: 0 });\n      say(P, \"THATS ALL\", r);\n    }\n  }\n  G.row = row;\n  const pos = new Int8Array(n);\n  row.forEach((b, i) => (pos[b] = i));\n  P.rows.push(Int8Array.from(row));\n  P.pos.push(pos);\n  P.mark.push(mark);\n}\n\nfunction rowAt(P, tau) {\n  const n = P.n;\n  let r = max(0, floor(tau / (n + 0.5)));\n  while (startOf(n, r + 1) \u003c= tau) r++;\n  while (r > 0 && startOf(n, r) > tau) r--;\n  return r;\n}\n\nfunction need(P, r) {\n  while (P.r0 + P.rows.length \u003c= r) gen(P);\n}\n\nconst strike = (P, r, b) => startOf(P.n, r) + P.pos[r - P.r0][b];\nconst balance = (P, r, b) => strike(P, r, b) + BAL * (strike(P, r + 1, b) - strike(P, r, b));\n\nfunction layout(P, n) {\n  const dx = W / n;\n  const rb = min(10, 0.47 * Math.hypot(dx, TIER[1] - TIER[0]), 0.94 * dx);\n  for (let i = 0; i \u003c n; i++) {\n    P.bx[i] = (i + 0.5) * dx;\n    P.by[i] = TIER[i & 1];\n    P.br[i] = rb * (0.74 + (0.26 * i) / (n - 1));\n  }\n  P.rh = n \u003c 5 ? 6 : n \u003c 7 ? 5 : 4;\n  P.sp = min(60 / (n - 1), P.rh * 2.1);\n  for (let p = 0; p \u003c n; p++) P.xs[p] = 32 + (p - (n - 1) / 2) * P.sp;\n  P.V = floor((LOW - TOP) / P.rh) + 1;\n}\n\nfunction paint(P) {\n  const S = P.bg;\n  const n = P.n;\n  S.fill(0);\n  const set = (x, y, r, g, b) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) S.set([r, g, b], (y * W + x) * 3);\n  };\n  // Stone walls of the bell chamber, coursed in blocks of 8 by 4.\n  for (let y = 0; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const bx = floor((x + ((y >> 2) & 1) * 4) / 8);\n      const by = y >> 2;\n      const joint = y % 4 === 3 || (x + ((y >> 2) & 1) * 4) % 8 === 7;\n      const s = joint ? 8 : 15 + ((bx * 7 + by * 13) % 5) * 1.6 + Math.random() * 3;\n      set(x, y, s * 1.05, s, s * 0.9);\n    }\n  // A louvred window behind the bells, daylight between the boards.\n  for (let y = 3; y \u003c 33; y++)\n    for (let x = 27; x \u003c 37; x++) {\n      const arch = y \u003c 8 && Math.hypot(x + 0.5 - 32, y - 8) > 5;\n      if (arch) continue;\n      const edge = x === 27 || x === 36 || (y \u003c 8 && Math.hypot(x + 0.5 - 32, y - 8) > 4);\n      const slat = (y + floor((x - 27) / 3)) % 3 === 0;\n      if (edge) set(x, y, 52, 46, 40);\n      else if (slat) set(x, y, 46, 40, 34);\n      else set(x, y, 120 + y, 150 + y, 186 + y * 0.5);\n    }\n  // The frame: an oak beam under each tier's bearings.\n  for (const ty of TIER)\n    for (let x = 0; x \u003c W; x++) {\n      set(x, ty + 2, 70, 46, 28);\n      set(x, ty + 3, 44, 28, 18);\n    }\n  // The floor boards, with a hole for each rope.\n  for (let y = FLOOR; y \u003c FLOOR + 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const hole = y > FLOOR && P.bx.some((b, i) => i \u003c n && x === floor(b + P.br[i] - 0.6));\n      const v = y === FLOOR ? 1 : hole ? 0.2 : x % 11 === 5 ? 0.45 : 0.72;\n      set(x, y, 104 * v, 70 * v, 42 * v);\n    }\n  // Faint rulings down each place of the scroll.\n  for (let p = 0; p \u003c n; p++)\n    for (let y = TOP; y \u003c= LOW; y += 2) set(floor(P.xs[p]), y, 9, 9, 13);\n  // The ringing chamber: ceiling beam and plastered wall.\n  for (let y = CEIL; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y \u003c CEIL + 2) set(x, y, y === CEIL ? 84 : 52, y === CEIL ? 58 : 34, y === CEIL ? 36 : 22);\n      else {\n        const s = 34 + Math.random() * 4 - (y - CEIL) * 0.5;\n        set(x, y, s * 1.1, s, s * 0.84);\n      }\n    }\n}\n\nfunction reset(P, n) {\n  P.n = n;\n  layout(P, n);\n  paint(P);\n  P.G = { row: rounds(n), phase: 0, count: 0, need: 4, ci: 0, m: P.m, pend: false, called: false };\n  Object.assign(P, { rows: [], pos: [], mark: [], r0: 0, calls: new Map(), msg: null, cur: -1 });\n  // Open part way into the first touch, with its first lead end in view.\n  const r = 4 + 2 * n + floor(P.V / 2);\n  need(P, r + 3);\n  P.tau = startOf(n, r) + 1.5;\n  P.cur = r;\n  P.fl.fill(0);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (k) => new Float32Array(k);\n  Object.assign(P, { buf: F(N * 3), bg: F(N * 3), bx: F(8), by: F(8), br: F(8), xs: F(8), th: F(8), fl: F(8), col: F(24) });\n  Object.assign(P, { tables: {}, n: 0, m: 1, hue: 0, speed: 2, tau: 0, e: 1 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.hue = k[0];\n  P.speed = clamp(k[1], 0.25, 3);\n  P.m = k[3] \u003c -0.4 ? 0 : k[3] > 0.4 ? 2 : 1;\n  const n = clamp(round(k[2]), 4, 8);\n  if (n !== P.n) reset(P, n);\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.G.pend = true;\n    P.msg = [\"BOB!\", 2.4];\n  }\n  const was = P.tau;\n  P.tau += (dt * P.speed) / BEAT;\n  const cur = rowAt(P, P.tau);\n  need(P, cur + 3);\n  for (let r = P.cur + 1; r \u003c= cur; r++)\n    if (P.calls.has(r)) {\n      P.msg = [P.calls.get(r), 2.4];\n      P.calls.delete(r);\n    }\n  P.cur = cur;\n  // Strikes since the last frame.\n  for (let r = rowAt(P, was); r \u003c= cur; r++)\n    for (let b = 0; b \u003c n; b++) {\n      const t = strike(P, r, b);\n      if (t > was && t \u003c= P.tau) P.fl[b] = 1;\n    }\n  for (let b = 0; b \u003c n; b++) {\n    P.fl[b] *= exp(-dt * 5);\n    // The stroke this bell is in: from one balance to the next.\n    let s = cur;\n    if (P.tau \u003c balance(P, s - 1, b)) s--;\n    else if (P.tau >= balance(P, s, b)) s++;\n    const b0 = balance(P, s - 1, b);\n    const u = (P.tau - b0) / (balance(P, s, b) - b0);\n    P.th[b] = (s & 1 ? -1 : 1) * SWING * cos(PI * clamp(u, 0, 1));\n  }\n  P.e = smooth((P.tau - startOf(n, cur)) / SLIDE);\n  if (P.msg && (P.msg[1] -= dt) \u003c= 0) P.msg = null;\n  // Keep sixty rows of history; the scroll shows at most seventeen.\n  if (P.rows.length > 80) {\n    const cut = P.rows.length - 60;\n    for (const A of [P.rows, P.pos, P.mark]) A.splice(0, cut);\n    P.r0 += cut;\n  }\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6;\n  const f = h - floor(h);\n  const a = v * (1 - s);\n  const b = v * (1 - s * f);\n  const c = v * (1 - s * (1 - f));\n  const rgb = [[v, c, a], [b, v, a], [a, v, c], [a, b, v], [c, a, v], [v, a, b]][i];\n  for (let k = 0; k \u003c 3; k++) out[o + k] = rgb[k] * 255;\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const p = (y * W + x) * 3;\n  buf[p] = r;\n  buf[p + 1] = g;\n  buf[p + 2] = b;\n}\n\nfunction bell(P, i) {\n  const { buf, col } = P;\n  const ax = P.bx[i];\n  const ay = P.by[i];\n  const R = P.br[i];\n  const th = P.th[i];\n  const fl = P.fl[i];\n  const mx = -sin(th);\n  const my = cos(th);\n  const L = 0.92 * R;\n  const u0 = 0.06 * R;\n  const G = R + 3;\n  const hl = -0.45 * my;\n  const spokes = [0, 1, 2, 3].map((s) => [cos(th + PI / 4 + (s * PI) / 2), sin(th + PI / 4 + (s * PI) / 2)]);\n  for (let y = max(0, floor(ay - G)); y \u003c= min(FLOOR - 1, floor(ay + G)); y++)\n    for (let x = max(0, floor(ax - G)); x \u003c= min(W - 1, floor(ax + G)); x++) {\n      const p = (y * W + x) * 3;\n      const dx = x + 0.5 - ax;\n      const dy = y + 0.5 - ay;\n      const d = sqrt(dx * dx + dy * dy);\n      if (d >= G) continue;\n      // The strike lights the air round the bell in the colour of its line.\n      if (fl > 0.02) {\n        const g = fl * 0.55 * (1 - d / G);\n        for (let c = 0; c \u003c 3; c++) buf[p + c] += col[i * 3 + c] * g;\n      }\n      // Wheel: rim and four spokes, turning with the bell.\n      let wv = clamp(1 - abs(d - (R - 0.5)) / 0.7, 0, 1);\n      if (d \u003c R - 0.8)\n        for (const [c, s] of spokes) {\n          const along = dx * c + dy * s;\n          if (along > 0) wv = max(wv, 0.5 * clamp(1 - abs(dy * c - dx * s) / 0.6, 0, 1));\n        }\n      if (wv > 0) {\n        buf[p] += (104 - buf[p]) * wv;\n        buf[p + 1] += (68 - buf[p + 1]) * wv;\n        buf[p + 2] += (38 - buf[p + 2]) * wv;\n      }\n      // The bell and its headstock, four samples to an LED.\n      if (d > 1.15 * R + 0.8) continue;\n      let cov = 0;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let s = 0; s \u003c 4; s++) {\n        const sx = dx - 0.25 + 0.5 * (s & 1);\n        const sy = dy - 0.25 + 0.5 * (s >> 1);\n        const u = sx * mx + sy * my;\n        const v = sx * my - sy * mx;\n        if (u \u003c u0) {\n          if (u > -0.16 * R && abs(v) \u003c 0.38 * R) {\n            r += 72;\n            g += 58;\n            b += 50;\n            cov++;\n          }\n          continue;\n        }\n        const t = (u - u0) / L;\n        if (t \u003c 0 || t > 1) continue;\n        let w = L * (0.27 + 0.06 * t + 0.27 * t * t * t * t);\n        if (t \u003c 0.12) w *= 0.6 + (0.4 * t) / 0.12;\n        const q = v / w;\n        if (abs(q) > 1) continue;\n        let sh = (0.5 + 0.65 * exp(-(q - hl) * (q - hl) * 5)) * (1 - 0.3 * q * q);\n        if (t > 0.8 && t \u003c 0.93) sh *= 1.12;\n        else if (t > 0.94) sh *= 0.55;\n        r += 228 * sh + fl * 200;\n        g += 160 * sh + fl * 170;\n        b += 70 * sh + fl * 120;\n        cov++;\n      }\n      if (cov) {\n        const a = cov / 4;\n        buf[p] = buf[p] * (1 - a) + r / 4;\n        buf[p + 1] = buf[p + 1] * (1 - a) + g / 4;\n        buf[p + 2] = buf[p + 2] * (1 - a) + b / 4;\n      }\n    }\n}\n\nfunction chamber(P) {\n  const { n, buf } = P;\n  // Each rope comes off its wheel and down through the floor, creeping as the wheel turns.\n  for (let i = 0; i \u003c n; i++) {\n    const x = floor(P.bx[i] + P.br[i] - 0.6);\n    for (let y = P.by[i]; y \u003c FLOOR + 3 && x \u003c W; y++) {\n      const v = 0.6 + 0.3 * sin((y + P.th[i] * P.br[i]) * 1.4);\n      put(buf, x, y, 168 * v, 134 * v, 90 * v);\n    }\n  }\n  for (let i = 0; i \u003c n; i += 2) bell(P, i);\n  for (let i = 1; i \u003c n; i += 2) bell(P, i);\n}\n\n// One leg of a bell's line, a soft 1-LED core with a dim edge either side,\n// kept brightest where lines cross.\nfunction seg(P, x0, y0, x1, y1, b, k) {\n  const { buf, col } = P;\n  const core = b === 0 ? 0.9 : 0.72;\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const l2 = dx * dx + dy * dy || 1;\n  const o = b * 3;\n  for (let y = max(TOP - 1, floor(min(y0, y1) - 3)); y \u003c= min(LOW, floor(max(y0, y1) + 3)); y++)\n    for (let x = max(0, floor(min(x0, x1) - 3)); x \u003c= min(W - 1, floor(max(x0, x1) + 3)); x++) {\n      const px = x + 0.5 - x0;\n      const py = y + 0.5 - y0;\n      const t = clamp((px * dx + py * dy) / l2, 0, 1);\n      const ex = px - t * dx;\n      const ey = py - t * dy;\n      const d = sqrt(ex * ex + ey * ey);\n      let v = d \u003c core ? 1 : d \u003c core + 1 ? core + 1 - d : 0;\n      v = max(v, 0.36 * clamp(2.8 - d, 0, 1)) * k;\n      if (v \u003c= 0) continue;\n      const p = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[p + c] = max(buf[p + c], col[o + c] * v);\n    }\n}\n\nfunction scroll(P) {\n  const { n, rh, xs, cur, buf, e } = P;\n  for (let a = 0; a \u003c= P.V; a++) {\n    const r = cur - a;\n    if (r - 1 \u003c P.r0) break;\n    const ya = TOP + (a - 1 + e) * rh + 0.5;\n    const k = 0.4 + 0.6 * exp(-(a + e) / 6);\n    const A = P.pos[r - P.r0];\n    const B = P.pos[r - 1 - P.r0];\n    // A rule under each lead end, gold and dashed where a bob was called.\n    const mark = P.mark[r - P.r0];\n    const yr = floor(ya + rh / 2);\n    if (mark && yr >= TOP && yr \u003c= LOW)\n      for (let x = floor(xs[0] - 3); x \u003c= xs[n - 1] + 3; x++)\n        if (mark === 2 ? x % 3 !== 0 : x % 2 === 0) put(buf, x, yr, (mark === 2 ? 220 : 70) * k, (mark === 2 ? 170 : 70) * k, (mark === 2 ? 60 : 84) * k);\n    for (let b = n - 1; b >= 0; b--) seg(P, xs[A[b]], ya, xs[B[b]], ya + rh, b, k);\n  }\n}\n\nfunction glyphs(buf, s, x, y, r, g, b) {\n  for (const ch of s) {\n    const gl = FONT[ch] || FONT[\" \"];\n    for (let row = 0; row \u003c 5; row++)\n      for (let c = 0; c \u003c 3; c++) if ((+gl[row] >> (2 - c)) & 1) put(buf, x + c, y + row, r, g, b);\n    x += 4;\n  }\n}\n\n// The change being struck, as numbers: each lights in its bell's colour as\n// it sounds, with a white flash on the strike.\nfunction numbers(P) {\n  const { n, buf, col, xs } = P;\n  const row = P.rows[P.cur - P.r0];\n  const j = P.tau - startOf(n, P.cur);\n  for (let p = 0; p \u003c n; p++) {\n    const b = row[p];\n    const since = j - p;\n    const v = since \u003c 0 ? 0.3 : 0.85;\n    const w = since \u003c 0 ? 0 : max(0, 1 - since / 0.9);\n    const c = [0, 1, 2].map((i) => col[b * 3 + i] * v * (1 - w) + 255 * w);\n    glyphs(buf, String(b + 1), round(xs[p] - 1.5), DIG, c[0], c[1], c[2]);\n    if (since \u003c 0) continue;\n    // Each node of the row lights as its bell sounds, white for the moment of the strike.\n    const ny = TOP + (P.e - 1) * P.rh + 0.5;\n    for (let y = max(TOP - 1, floor(ny - 4)); y \u003c= floor(ny + 4); y++)\n      for (let x = max(0, floor(xs[p] - 4)); x \u003c= min(W - 1, floor(xs[p] + 4)); x++) {\n        const d = Math.hypot(x + 0.5 - xs[p], y + 0.5 - ny);\n        if (d >= 4) continue;\n        const g = (1 - d / 4) * (0.45 + 0.5 * w);\n        const q = (y * W + x) * 3;\n        for (let i = 0; i \u003c 3; i++) buf[q + i] = max(buf[q + i], (col[b * 3 + i] * (1 - w) + 255 * w) * g);\n      }\n  }\n}\n\n// Ropes and sallies in the ringing chamber, each sally woven in its bell's\n// colour and white: it rises as its bell swings off the handstroke and comes\n// back down to the ringer.\nfunction ringers(P) {\n  const { n, buf, col } = P;\n  for (let i = 0; i \u003c n; i++) {\n    const x = round(P.bx[i] - 0.5);\n    const rise = (SWING - P.th[i]) / (2 * SWING);\n    const top = round(CEIL + 9 - rise * 7);\n    for (let y = CEIL + 2; y \u003c H; y++) {\n      if (y >= top && y \u003c top + 7) {\n        for (let c = -1; c \u003c= 1; c++) {\n          const k = (y - top + c + 8) % 4;\n          const v = (c === 1 ? 0.7 : 1) * (k === 2 ? 0.55 : 1);\n          for (let j = 0; j \u003c 3; j++) buf[(y * W + x + c) * 3 + j] = (k & 1 ? [232, 226, 214][j] : col[i * 3 + j]) * v;\n        }\n      } else if (y \u003c top + 13) put(buf, x, y, 176, 146, 102);\n    }\n  }\n}\n\nfunction message(P) {\n  if (!P.msg) return;\n  const [s, left] = P.msg;\n  const f = min(1, left / 0.5);\n  const w = s.length * 4 - 1;\n  const x = round(32 - w / 2);\n  const y = LOW - 8;\n  for (let yy = y - 2; yy \u003c y + 7; yy++) for (let xx = x - 2; xx \u003c x + w + 2; xx++) put(P.buf, xx, yy, 0, 0, 0);\n  glyphs(P.buf, s, x, y, 255 * f, 240 * f, 200 * f);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, col, n } = P;\n  if (!n) return;\n  for (let b = 0; b \u003c n; b++) {\n    if (b === 0) hsv(0, 0.84, 1, col, 0);\n    else {\n      // The working bells share the wheel without its reds, so only the treble is red.\n      const u = 0.05 + P.hue + (0.84 * (b - 1)) / (n - 2);\n      hsv(0.13 + 0.74 * (u - floor(u)), 0.82, 1, col, b * 3);\n    }\n  }\n  buf.set(P.bg);\n  chamber(P);\n  scroll(P);\n  numbers(P);\n  ringers(P);\n  message(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lines=0..1, Speed=0.25..3, Bells=4..8, Method=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lines","min":0,"max":1,"about":"Turns the colours of the working bells' lines round the wheel together, from yellow through cyan to violet at 0; the turn skips the reds, so the treble's line is the only red one."},{"name":"Speed","min":0.25,"max":3,"about":"The ringing pace: at 2 a bell strikes every 0.3 s, so a row of six takes 1.8 s, with the open handstroke gap of one more beat after every second row."},{"name":"Bells","min":4,"max":8,"about":"How many bells hang in the tower and ring: 4 is Minimus, 5 Doubles, 6 Minor, 7 Triples and 8 Major. Changing it starts the band again from rounds."},{"name":"Method","min":-1,"max":1,"about":"-1 is plain hunting, 0 is Plain Bob (seconds place at each lead end, the bells dodging round the treble) and 1 is Double Bob, which makes the mirror of it at the half lead as well. A change waits for the next lead end, so the methods splice."}],"start":[0,2,4,0.06],"measures":{"motion":0.4844,"detail":0.08,"edges":0.458,"complexity":1.2457,"coverage":0.5293,"colour":0.2305,"drift":0.0504},"knobResponse":[0.0499,0.1129,0.1732,0.0613]},{"slug":"chemical-garden","title":"Chemical Garden","family":"chemistry","round":21,"note":"물유리 용액을 채운 키 큰 유리컵 모래 위에 금속염 결정을 떨어뜨리면 코발트의 청보라나 철의 녹슨 주황 같은 속 빈 광물 관이 흔들리며 수면까지 자라요. 컵이 차면 빈 컵이 밀려 들어와 다시 자라요.","idea":"Metal-salt crystals dropped into a tall glass of water-glass solution on a lab bench sprout hollow mineral tubes in cobalt blue, copper turquoise, rust, nickel green, manganese pink and calcium white that wobble up towards the surface, burst and bud sideways, until the glass is full and a fresh one slides in.","buttons":"K1 tap slides the glass away and brings in a fresh one.","code":"// ===== Patternflow pattern =====\n// Title:   Chemical Garden\n// Family:  chemistry\n// Idea:    Metal-salt crystals dropped into a tall glass of water-glass solution on a lab bench sprout hollow mineral tubes in cobalt blue, copper turquoise, rust, nickel green, manganese pink and calcium white that wobble up towards the surface, burst and bud sideways, until the glass is full and a fresh one slides in.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the chemical garden (silicate garden) of the school chemistry lab\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Salts=0..4, Speed=0.2..3, Crystals=5..20, Strength=-1..1\n//\n// Knob 1: Salts. What goes into the glass: all six salts at 0 (cobalt chloride's blue-violet, copper sulfate's turquoise, iron(III) chloride's rust, nickel sulfate's green, manganese chloride's pink, calcium chloride's white), the cool cobalt, copper and calcium at 1, the warm iron, manganese and calcium at 2, the greens of nickel and copper at 3, cobalt alone at 4.\n// Knob 2: Speed. How fast the garden grows: at 2 a tube that races takes about 11 s from its crystal to the surface and a glass lasts about half a minute before the next slides in; at 0.2 it creeps.\n// Knob 3: Crystals. How many crystals are dropped in, 5 to 20; each sends up four to six tubes as it dissolves, and those bud more. Turned up mid-glass, the extra crystals drop in at once.\n// Knob 4: Strength. How strong the water glass is: near 0 the usual mix, towards -1 a thin solution where hair-fine threads shoot up in 6 s and wriggle, towards 1 a thick one where fat tubes take 18 s and bud into knobbly branches.\n// Buttons: K1 tap slides the glass away and brings in a fresh one.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round, ceil, sin, abs, sqrt, exp, hypot } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\n\n// The glass in its own columns (walls at 3..4 and 59..60), so sliding it is\n// one offset. The rim, the solution's surface and the sand's top are\n// ellipses seen from a little above; z is depth, 0 at the front pane.\nconst GL = 3;\nconst GR = 60;\nconst IL = 5;\nconst IR = 58;\nconst RIM = 4;\nconst SY = 13;\nconst SAND = 104;\nconst BOT = 110;\nconst BENCH = 114;\nconst [HR, HS, HD] = [2.2, 2.2, 2.6];\nconst ell = (x) => sqrt(max(0, 1 - ((x - 31.5) / 28) ** 2));\nconst surfAt = (x, z) => SY + HS * ell(x) * (1 - 2 * z);\nconst sandAt = (x, z) => SAND + HD * ell(x) * (1 - 2 * z);\nconst [OUT, AIR, SOL, TOPS, SIDE, WALL, SHEET, BASE] = [0, 1, 2, 3, 4, 5, 6, 7];\nconst GROWS = [0, 0, 1, 1, 1, 0, 1, 0];\nconst [GROW, HOLD, SWAP] = [0, 1, 2];\nconst SLIDE = 70;\nconst MAXT = 900;\n\n// Each salt: the colour of its silicate tube, the colour of the crystal as\n// it goes in (cobalt chloride goes in pink and grows blue), and how fast and\n// how fat its tubes grow: iron's rust threads shoot up, calcium's white tubes\n// push up slow and thick.\nconst SALT = [\n  [[96, 76, 246], [222, 52, 112], 1.1, 0.9],\n  [[30, 184, 214], [40, 108, 255], 0.95, 1],\n  [[255, 122, 30], [200, 150, 34], 1.3, 0.72],\n  [[118, 224, 74], [58, 198, 126], 0.85, 1.15],\n  [[255, 168, 184], [240, 170, 186], 0.8, 1.05],\n  [[232, 234, 224], [244, 244, 238], 0.72, 1.4],\n];\nconst SETS = [[0, 1, 2, 3, 4, 5], [0, 1, 5], [2, 4, 5], [3, 1], [0]];\nconst saltOf = (P, J, si) => SALT[SETS[P.set][J.seeds[si].slot % SETS[P.set].length]];\n\n// The room: a dark wall with a frosted globe lamp behind the glass. The\n// solution seen against it is faintly yellow-green and a little cloudy.\nfunction paint(P) {\n  const WL = (P.wl = new Float32Array(N * 3));\n  const LA = (P.la = new Float32Array(N));\n  const SO = (P.so = new Float32Array(N * 3));\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const d = hypot((x + 0.5 - 32) * 1.15, y + 0.5 - 44);\n      const bulb = exp(-((d / 9) ** 2));\n      const glow = exp(-((d / 24) ** 2));\n      LA[p] = 0.45 * bulb + 0.75 * glow;\n      const n = (rnd() - 0.5) * 3;\n      const a = 0.12 * bulb + 0.25 * glow;\n      WL.set([11 + 255 * a + n, 12 + 234 * a + n, 17 + 194 * a + n], p * 3);\n      const deep = 1 - (0.16 * max(0, y - SY)) / 95;\n      SO.set([(WL[p * 3] * 0.9 + 7) * deep, (WL[p * 3 + 1] * 0.98 + 10) * deep, (WL[p * 3 + 2] * 0.78 + 7) * deep], p * 3);\n    }\n}\n\n// The glass, its sand and its base, in the glass's own columns. C holds the\n// opaque colours, M darkens the solution towards the walls, O is the front\n// pane's reflections, added last.\nfunction glass(P) {\n  const K = (P.jk = new Uint8Array(N));\n  const C = (P.jc = new Float32Array(N * 3));\n  const M = (P.jm = new Float32Array(N));\n  const O = (P.jo = new Float32Array(N * 3));\n  const put = (A, x, y, c) => A.set(c, (y * W + x) * 3);\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = GL; x \u003c= GR; x++) {\n      const p = y * W + x;\n      const e = ell(x);\n      const u = (x + 0.5 - 31.5) / 28;\n      const lamp = exp(-(((y - 46) / 30) ** 2));\n      M[p] = 0.7 + 0.3 * sqrt(max(0, 1 - u * u));\n      const yc = y + 0.5;\n      let k = OUT;\n      if (y >= BOT) {\n        k = BASE;\n        if (y === BENCH - 1 && (x === GL || x === GR)) k = OUT;\n      } else if (x \u003c IL || x > IR) k = y >= RIM ? WALL : OUT;\n      else if (yc \u003c RIM - HR * e - 0.6) k = OUT;\n      else if (yc \u003c SY - HS * e) k = AIR;\n      else if (yc \u003c SY + HS * e) k = SHEET;\n      else if (yc \u003c SAND - HD * e) k = SOL;\n      else if (yc \u003c SAND + HD * e) k = TOPS;\n      else k = SIDE;\n      K[p] = k;\n      const gr = 0.8 + 0.4 * rnd();\n      if (k === WALL) {\n        // The outer edge of each wall catches the lamp; the glass's thickness, seen edge on, is dark.\n        const c = x === GL ? 0.55 + 0.75 * lamp : x === GR ? 0.4 + 0.5 * lamp : x === GL + 1 ? 0.1 : 0.14;\n        put(C, x, y, [110 * c, 140 * c, 134 * c]);\n      } else if (k === BASE) {\n        const c = y === BOT ? 0.95 - 0.35 * abs(u) : y === BENCH - 1 ? 0.62 : 0.3 + 0.1 * sin(x * 0.7);\n        put(C, x, y, [100 * c, 136 * c, 126 * c]);\n      } else if (k === TOPS) put(C, x, y, [176 * gr, 160 * gr, 124 * gr]);\n      else if (k === SIDE) {\n        // Sand through the front pane, darker low down, in faint layers.\n        const f = (0.8 - (0.32 * (y - SAND)) / 6 + 0.08 * sin(y * 2.1 + x * 0.15)) * gr;\n        put(C, x, y, [150 * f, 134 * f, 100 * f]);\n      } else if (k === SHEET) put(C, x, y, [34, 44, 42]);\n    }\n  // The rim's lips and the meniscus, smoothed over two rows, with the room's\n  // window caught on the left.\n  const line = (x, yc, c) => {\n    for (let y = floor(yc - 1); y \u003c= floor(yc + 1); y++) {\n      const w = max(0, 1 - abs(y + 0.5 - yc));\n      for (let i = 0; i \u003c 3; i++) O[(y * W + x) * 3 + i] += c[i] * w;\n    }\n  };\n  for (let x = IL; x \u003c= IR; x++) {\n    const e = ell(x);\n    const gl = x > 8 && x \u003c 19 ? 1.6 : 1;\n    line(x, RIM - HR * e, [56, 70, 68]);\n    line(x, RIM + HR * e, [140 * gl, 158 * gl, 152 * gl]);\n    line(x, RIM + HR * e + 1, [26, 34, 32]);\n    line(x, SY - HS * e, [26, 36, 34]);\n    line(x, SY + HS * e, [100 * gl, 124 * gl, 116 * gl]);\n  }\n  for (let y = 16; y \u003c 100; y++) {\n    const f = sin((Math.PI * (y - 16)) / 84);\n    for (let c = 0; c \u003c 3; c++) {\n      O[(y * W + 9) * 3 + c] += 16 * f;\n      O[(y * W + 10) * 3 + c] += 9 * f;\n      O[(y * W + 52) * 3 + c] += 8 * f;\n    }\n  }\n}\n\nfunction jar() {\n  return { tid: new Int16Array(N), sh: new Float32Array(N), zb: new Float32Array(N), bo: new Float32Array(N), on: false, off: 0, g: 0, tips: [], tubes: [], seeds: [], bub: [], pops: [], motes: [], done: false };\n}\n\nfunction addSeed(P, J, x, t0) {\n  const z = rnd();\n  J.seeds.push({ x, z, y: -2, rest: sandAt(x, z) - 0.6, slot: J.seeds.length + J.rot, t0, land: -1, wet: 0, m: 0, mid: -1, next: 0, left: 4 + floor(rnd() * 3), sz: rnd() });\n}\n\n// A fresh glass: clean sand and the crystals waiting to go in.\nfunction fresh(P, J) {\n  J.tid.fill(-1);\n  J.zb.fill(9);\n  Object.assign(J, { g: 0, tips: [], tubes: [], seeds: [], bub: [], pops: [], done: false, up: 0, full: 50, rot: floor(rnd() * 6) });\n  const n = P.nc;\n  const order = Array.from({ length: n }, (_, i) => i).sort(() => rnd() - 0.5);\n  for (let i = 0; i \u003c n; i++) addSeed(P, J, IL + 4 + ((i + 0.5 + (rnd() - 0.5) * 0.7) * (IR - IL - 8)) / n, 0.3 + order[i] * (2.2 / n + 0.1));\n  J.motes = Array.from({ length: 14 }, () => [IL + rnd() * (IR - IL), SY + 4 + rnd() * 86, 0.6 + rnd() * 1.6, rnd() * 7]);\n}\n\n// One disc of membrane, shaded across the tube's direction (dx, dy): the\n// wall seen edge on at each side, a sheen on the left.\nfunction stamp(P, J, x, y, r, dx, dy, id, z, ring) {\n  const K = P.jk;\n  for (let py = max(RIM, floor(y - r)); py \u003c= min(BOT - 1, ceil(y + r)); py++)\n    for (let px = max(IL, floor(x - r)); px \u003c= min(IR, ceil(x + r)); px++) {\n      const ex = px + 0.5 - x;\n      const ey = py + 0.5 - y;\n      if (ex * ex + ey * ey > r * r) continue;\n      const q = py * W + px;\n      if (!GROWS[K[q]] || z > J.zb[q] + 0.002) continue;\n      const s = (ex * dy - ey * dx) / r;\n      J.tid[q] = id;\n      J.zb[q] = z;\n      J.bo[q] = J.g;\n      J.sh[q] = (0.42 + 0.58 * sqrt(max(0, 1 - s * s))) * ring * (0.9 + 0.2 * rnd()) + 0.3 * exp(-(((s - 0.45) / 0.3) ** 2));\n    }\n}\n\nfunction tip(P, J, o) {\n  if (J.tubes.length >= MAXT) return;\n  o.id = J.tubes.push(o.seed) - 1;\n  J.tips.push(Object.assign({ age: 0, len: 0, cap: 0, dir: 1, ph: rnd() * 7, rt: o.r, wan: 0 }, o));\n}\n\n// A crystal sends up a new tube from its skin: one in three races for the\n// surface, the rest give out somewhere on the way.\nfunction sprout(P, J, S, si) {\n  const race = rnd() \u003c 0.32;\n  const rs = (0.75 + 0.5 * rnd()) * (1.12 - 0.25 * S.z);\n  tip(P, J, {\n    seed: si, x: S.x + (rnd() - 0.5) * (2 * S.m + 3), y: S.rest - S.m * 0.8, a: (rnd() - 0.5) * 0.9, a0: (rnd() - 0.5) * 0.8,\n    r: P.r0 * rs * saltOf(P, J, si)[3], rs, v: race ? 0.95 + 0.3 * rnd() : 0.45 + 0.55 * rnd(), fuel: race ? 999 : 10 + 75 * rnd() ** 1.3,\n    z: cl(S.z + (rnd() - 0.5) * 0.08, 0, 1), y0: S.rest, bub: rnd() \u003c 0.22,\n  });\n}\n\nfunction grow(P, J, d) {\n  const g = (J.g += d);\n  if (J.seeds.length \u003c P.nc && g \u003c 30) addSeed(P, J, IL + 4 + rnd() * (IR - IL - 8), g + 0.1);\n  J.seeds.forEach((S, si) => {\n    if (g \u003c S.t0) return;\n    if (S.land \u003c 0) {\n      // Through the air to the surface, then sinking slowly through the thick solution.\n      const surf = surfAt(S.x, S.z);\n      if (S.y \u003c surf) S.y += 110 * d;\n      else {\n        if (!S.wet) (S.wet = 1), J.pops.push([S.x, surf, 0, 4]);\n        S.y += (38 + 14 * S.sz) * d;\n      }\n      if (S.y >= S.rest) [S.y, S.land, S.next] = [S.rest, g, g + 0.6 + rnd() * 0.9];\n      return;\n    }\n    // The crystal coats in a skin of silicate that swells as it dissolves.\n    if (S.mid \u003c 0) S.mid = J.tubes.push(si) - 1;\n    const m = min(1, (g - S.land) / 1.8 + (g - S.land) * 0.025) * P.mr * (0.8 + 0.4 * S.sz) * saltOf(P, J, si)[3];\n    if (m > S.m + 0.25) {\n      S.m = m;\n      stamp(P, J, S.x, S.rest - m * 0.45, m, 0, -1, S.mid, S.z, 0.9);\n      stamp(P, J, S.x + (S.sz - 0.5) * m, S.rest - m * 0.9, m * 0.7, 0, -1, S.mid, S.z, 1);\n    }\n    // Air caught in the crystal now and then lets go as a bubble.\n    if (rnd() \u003c d * 0.12) J.bub.push([S.x + (rnd() - 0.5) * 2 * m, S.rest - m - 1, S.z]);\n    if (S.left > 0 && g >= S.next && g \u003c J.full - 4 && J.tips.length \u003c 80) {\n      sprout(P, J, S, si);\n      S.left--;\n      S.next = g + 1.2 + rnd() * 3.2;\n    }\n  });\n  const born = [];\n  for (const T of J.tips) {\n    T.age += d;\n    // Growth comes in spurts, each time the skin at the open tip splits and seals again.\n    const pulse = 0.4 + 0.6 * sqrt(max(0, sin(T.age * 2.6 + T.ph)));\n    const sa = saltOf(P, J, T.seed);\n    const dist = P.v0 * T.v * sa[2] * (T.bub ? 1.6 : 1) * pulse * d;\n    // Each tube wanders off on its own way, back towards upright.\n    T.wan = cl(T.wan + (rnd() - 0.5) * 2.4 * d - T.wan * 0.4 * d, -0.3, 0.3);\n    let aim = T.wan + T.a0 * exp(-T.age * 0.8) + P.wob * (T.bub ? 0.25 : 1) * (0.7 * sin(T.ph + T.age * 1.9) + 0.3 * sin(T.ph * 1.7 + T.age * 4.3));\n    if (T.x \u003c IL + 3) aim += 0.6;\n    if (T.x > IR - 3) aim -= 0.6;\n    T.a += (aim - T.a) * min(1, d * 4);\n    if (T.cap) T.a = T.dir * 1.45;\n    if (rnd() \u003c d * 0.6) T.rt = P.r0 * T.rs * sa[3] * (0.6 + 0.9 * rnd());\n    T.r += (cl(T.rt, 0.5, 4.2) - T.r) * min(1, d * 1.3);\n    const n = max(1, ceil(dist / 0.5));\n    const dx = sin(T.a);\n    const dy = -Math.cos(T.a);\n    for (let i = 0; i \u003c n; i++) {\n      T.x = cl(T.x + (dx * dist) / n, IL + 0.5, IR + 0.5);\n      if (!T.cap) T.y += (dy * dist) / n;\n      T.len += dist / n;\n      stamp(P, J, T.x, T.y, T.r, dx, dy, T.id, T.z, 0.92 + 0.1 * sin(T.len * 0.9 + T.ph));\n    }\n    T.fuel -= dist;\n    const top = surfAt(T.x, T.z) + 1.4 + T.r;\n    if (!T.cap && T.y \u003c= top) {\n      // At the surface it spreads a little way under the skin of the solution.\n      Object.assign(T, { cap: 1, y: top, dir: T.a > 0.05 ? 1 : T.a \u003c -0.05 ? -1 : rnd() \u003c 0.5 ? -1 : 1, fuel: 7 + rnd() * 11 });\n      if (++J.up === 3) J.full = g + 7;\n      if (T.bub) J.pops.push([T.x, surfAt(T.x, T.z), 0, 3]), (T.bub = 0);\n    }\n    if (T.bub && rnd() \u003c d * 0.22) J.bub.push([T.x, T.y - T.r - 0.5, T.z]), (T.bub = 0);\n    // A tube bursts and buds sideways; often the old tip seals over.\n    if (!T.cap && g \u003c 34 && J.tips.length + born.length \u003c 80 && T.y \u003c T.y0 - 6 && rnd() \u003c P.bud * d) {\n      const sd = rnd() \u003c 0.5 ? -1 : 1;\n      stamp(P, J, T.x, T.y, T.r * 1.5, dx, dy, T.id, T.z, 1);\n      born.push({ seed: J.tubes[T.id], x: T.x + sd * T.r, y: T.y + rnd() * 2, a: sd * (0.9 + 0.6 * rnd()), a0: sd * (0.9 + 0.5 * rnd()), r: T.r * 0.75, rs: T.rs * 0.75, v: T.v * (0.6 + 0.5 * rnd()), fuel: 8 + rnd() * 40, z: cl(T.z + (rnd() - 0.5) * 0.06, 0, 1), y0: T.y + 6, bub: false });\n      if (rnd() \u003c 0.35) T.fuel = 0;\n    }\n    if (g > J.full) T.fuel = 0;\n  }\n  J.tips = J.tips.filter((T) => T.fuel > 0);\n  for (const o of born) tip(P, J, o);\n  J.done = g > J.full || (!J.tips.length && g > 6 && J.seeds.every((S) => S.land >= 0 && !S.left));\n  // Bubbles let go of their tubes and rise; rings where things meet the surface.\n  J.bub = J.bub.filter((b) => {\n    b[1] -= 26 * d;\n    b[0] += sin(b[1] * 0.5) * 2 * d;\n    if (b[1] > surfAt(b[0], b[2]) + 1) return true;\n    J.pops.push([b[0], surfAt(b[0], b[2]), 0, 3]);\n    return false;\n  });\n  for (const p of J.pops) p[2] += d;\n  J.pops = J.pops.filter((p) => p[2] \u003c 0.7);\n  for (const m of J.motes) {\n    m[1] += m[2] * d;\n    m[0] += sin(P.clock * 0.7 + m[3]) * 0.8 * d;\n    if (m[1] > SAND - 3) [m[0], m[1]] = [IL + rnd() * (IR - IL), SY + 4];\n  }\n}\n\nfunction slideIn(P) {\n  const nw = P.jars[1 - P.cur];\n  fresh(P, nw);\n  [nw.on, nw.off, P.phase, P.pt] = [true, -SLIDE, SWAP, 0];\n}\n\nexport function setup(params) {\n  const P = params;\n  paint(P);\n  glass(P);\n  P.jars = [jar(), jar()];\n  P.tc = new Float32Array(3 * MAXT);\n  P.buf = new Float32Array(N * 3);\n  P.cc = new Float32Array(W * 3);\n  Object.assign(P, { cur: 0, phase: GROW, pt: 0, clock: 0, started: false, set: 0, rate: 1, nc: 5, str: 0 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 5, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.set = cl(round(k[0]), 0, 4);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  P.nc = cl(round(k[2]), 5, 20);\n  const s = (P.str = cl(k[3], -1, 1));\n  P.v0 = 11.5 * 1.8 ** -s;\n  P.r0 = 1.2 * 1.9 ** s;\n  P.wob = 0.3 * 1.8 ** -s;\n  P.bud = 0.1 * 1.5 ** s;\n  P.mr = 1.7 + 0.9 * (s + 1);\n  const d = dt * P.rate;\n  P.clock += d;\n  const J = P.jars[P.cur];\n  if (!P.started) {\n    // Open on a garden already some seconds old, further on the faster it grows.\n    P.started = true;\n    fresh(P, J);\n    J.on = true;\n    for (let g = 10 + 2.5 * P.rate; g > 0; g -= 1 / 30) grow(P, J, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== SWAP) slideIn(P);\n  if (P.phase !== SWAP) grow(P, J, d);\n  if (P.phase === GROW && J.done) [P.phase, P.pt] = [HOLD, 0];\n  else if (P.phase === HOLD && (P.pt += d) > 2.5) slideIn(P);\n  else if (P.phase === SWAP) {\n    const nw = P.jars[1 - P.cur];\n    const q = min(1, (P.pt += dt * max(P.rate, 0.6)) / 2.4);\n    J.off = round(SLIDE * q * q * (3 - 2 * q));\n    nw.off = J.off - SLIDE;\n    if (q >= 1) [J.on, nw.off, P.cur, P.phase] = [false, 0, 1 - P.cur, GROW];\n  }\n}\n\nlet B;\nfunction add(x, y, r, g, b, a = 1) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= BENCH) return;\n  const o = (y * W + x) * 3;\n  B[o] += r * a;\n  B[o + 1] += g * a;\n  B[o + 2] += b * a;\n}\nfunction mixp(x, y, c, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= BENCH) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) B[o + i] += (c[i] - B[o + i]) * a;\n}\n\n// The moving things of one glass, drawn in screen columns.\nfunction life(P, J, cols) {\n  const o = J.off;\n  const set = SETS[P.set];\n  const t = P.clock;\n  for (const m of J.motes) add(round(m[0]) + o, round(m[1]), 34, 36, 32, 0.6 + 0.4 * sin(t * 3 + m[3]));\n  // Above each open tip, the salt solution it pushes out rises as a faint wavering thread.\n  const L = round(6 + 4 * (1 - P.str));\n  for (const T of J.tips) {\n    if (T.cap) continue;\n    const c = cols(T.id);\n    for (let i = 1; i \u003c= L; i++) {\n      const x = round(T.x + sin(t * 2.4 + T.ph + i * 0.45) * i * 0.12) + o;\n      const y = round(T.y - T.r - i);\n      if (y > SY + 2) add(x, y, c[0] + 40, c[1] + 40, c[2] + 40, 0.16 * (1 - i / (L + 1)));\n    }\n    if (T.bub) {\n      const x = round(T.x) + o;\n      const y = round(T.y - T.r - 0.6);\n      mixp(x, y, [210, 228, 226], 0.9);\n      mixp(x - 1, y, [120, 140, 140], 0.4);\n      mixp(x + 1, y, [120, 140, 140], 0.4);\n    }\n  }\n  for (const b of J.bub) {\n    const x = round(b[0]) + o;\n    const y = round(b[1]);\n    mixp(x, y, [220, 236, 234], 0.85);\n    mixp(x, y + 1, [90, 110, 110], 0.3);\n  }\n  for (const [px, py, age, w] of J.pops) {\n    const k = 1 - age / 0.7;\n    const r = w * (0.5 + age * 2);\n    for (let x = round(px - r); x \u003c= round(px + r); x++) add(x + o, round(py), 90 * k, 104 * k, 100 * k);\n  }\n  for (const S of J.seeds) {\n    if (J.g \u003c S.t0) continue;\n    const sc = SALT[set[S.slot % set.length]];\n    // Salt leaking from the crystal's skin tints the solution round it.\n    if (S.land >= 0) {\n      const R = min(9, 2 + (J.g - S.land) * 0.7);\n      const [hr, hg, hb] = sc[0];\n      for (let y = round(S.rest - R * 1.3); y \u003c= S.rest + 1; y++) {\n        const v = (y - S.rest) / (R * 1.3);\n        for (let x = max(-o, round(S.x - R)); x \u003c= S.x + R && x + o \u003c W; x++) {\n          const u = (x - S.x) / R;\n          const f = 0.08 * (1 - u * u - v * v);\n          if (f > 0) {\n            const q = (y * W + x + o) * 3;\n            B[q] += hr * f;\n            B[q + 1] += hg * f;\n            B[q + 2] += hb * f;\n          }\n        }\n      }\n    }\n    // A falling crystal leaves a faint streak of dissolving salt.\n    const surf = surfAt(S.x, S.z);\n    const fade = S.land \u003c 0 ? 1 : max(0, 1 - (J.g - S.land) / 2.5);\n    if (fade > 0 && S.y > surf)\n      for (let y = round(surf) + 1; y \u003c S.y - 1; y++) add(round(S.x) + o, y, sc[0][0], sc[0][1], sc[0][2], 0.22 * fade * exp(-(S.y - y) / 14));\n    const a = S.land \u003c 0 || J.g - S.land \u003c 1 ? 1 : 0.5;\n    const x = round(S.x - 1) + o;\n    const y = round(S.y) - 1;\n    mixp(x, y, sc[1], a);\n    mixp(x + 1, y, sc[1].map((v) => min(255, v * 1.15 + 30)), a);\n    mixp(x, y + 1, sc[1].map((v) => v * 0.7), a);\n    mixp(x + 1, y + 1, sc[1].map((v) => v * 0.85), a);\n    if (S.sz > 0.5) mixp(x + 2, y + 1, sc[1].map((v) => v * 0.75), a);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  B = P.buf;\n  const { wl: WL, la: LA, so: SO, jk: K, jc: C, jm: M, jo: O, tc: TC } = P;\n  const on = P.jars.filter((J) => J.on);\n  for (const J of on) {\n    // This frame's colour for every tube, from its crystal's salt.\n    J.tubes.forEach((si, id) => TC.set(saltOf(P, J, si)[0], id * 3));\n    J.tc = TC.slice(0, J.tubes.length * 3);\n  }\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let J = null;\n      for (let i = 0; i \u003c on.length; i++) if (x - on[i].off >= GL && x - on[i].off \u003c= GR) J = on[i];\n      const q = J ? p - J.off : 0;\n      const qo = q * 3;\n      const kind = J ? K[q] : OUT;\n      const l = 0.62 + 0.25 * LA[p];\n      for (let c = 0; c \u003c 3; c++) {\n        let v = WL[o + c];\n        if (kind === AIR) v = v * 0.9 + 5;\n        else if (kind === WALL || kind === BASE) v = C[qo + c] + v * 0.25;\n        else if (kind === SOL) v = SO[o + c] * M[q];\n        else if (kind === SHEET) v = SO[o + c] * 0.5 + C[qo + c];\n        else if (kind) v = C[qo + c] * l;\n        B[o + c] = v;\n      }\n      if (J && GROWS[kind] && J.tid[q] >= 0) {\n        // A tube: lit through from the lamp behind, paler where its skin is\n        // fresh, and fading into the solution the further back it stands.\n        const id = J.tid[q] * 3;\n        const s = J.sh[q];\n        const fr = 0.3 * max(0, 1 - (J.g - J.bo[q]) / 1.4);\n        const fog = 0.06 + 0.5 * J.zb[q];\n        const hl = max(0, s - 1);\n        const sv = min(1, s) * (0.68 + 0.48 * LA[p]);\n        for (let c = 0; c \u003c 3; c++) {\n          let v = J.tc[id + c] * sv;\n          v += (255 - v) * hl;\n          v += (235 - v) * fr;\n          v += (B[o + c] - v) * fog;\n          B[o + c] = kind === SHEET ? v * 0.75 + 11 : v;\n        }\n      }\n      if (kind) for (let c = 0; c \u003c 3; c++) B[o + c] += O[qo + c];\n    }\n  for (const J of on) life(P, J, (id) => J.tc.subarray(id * 3, id * 3 + 3));\n  for (let p = 0, o = 0; p \u003c BENCH * W; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, max(0, B[o])), min(255, max(0, B[o + 1])), min(255, max(0, B[o + 2])));\n  bench(P, display, on);\n}\n\n// A black resin bench top. The jar's foot is reflected in it, and the lamp,\n// focused through the full glass, throws a pool of light on it that takes the\n// colours of the garden it passed through, left for right.\nfunction bench(P, display, on) {\n  const B2 = P.buf;\n  const cc = P.cc.fill(0);\n  for (const J of on)\n    for (let lx = IL; lx \u003c= IR; lx++) {\n      const x = lx + J.off;\n      const xm = 63 - lx + J.off;\n      if (x \u003c 0 || x >= W || xm \u003c 0 || xm >= W) continue;\n      for (let y = 30; y \u003c 100; y += 5) for (let i = 0; i \u003c 3; i++) cc[x * 3 + i] += B2[(y * W + xm) * 3 + i] / 14;\n    }\n  for (let y = BENCH; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const gr = ((x * 7 + y * 13) % 5) * 0.6;\n      const f = 1 - (y - BENCH) / 9;\n      let r = 16 + 10 * f + gr;\n      let g = 17 + 10 * f + gr;\n      let b = 21 + 11 * f + gr;\n      if (y === 123) [r, g, b] = [66, 68, 76];\n      else if (y > 123) [r, g, b] = [26 - (y - 124) * 3 + gr, 27 - (y - 124) * 3 + gr, 31 - (y - 124) * 3 + gr];\n      else\n        for (const J of on) {\n          const lx = x - J.off;\n          if (lx \u003c GL || lx > GR) continue;\n          if (y === BENCH) {\n            [r, g, b] = [7, 7, 9];\n            continue;\n          }\n          const m = (2 * BENCH - 1 - y) * W + x;\n          const ex = (lx - 31.5) / 23;\n          const ey = (y - 118.5) / 3.4;\n          const a = 0.9 * sm(1 - ex * ex - ey * ey) + 0.7 * exp(-(((y - 117.5) / 1.1) ** 2)) * sm(1 - ex * ex * 1.4);\n          r += B2[m * 3] * 0.22 * f + (cc[x * 3] * 1.15 + 26) * a;\n          g += B2[m * 3 + 1] * 0.22 * f + (cc[x * 3 + 1] * 1.15 + 28) * a;\n          b += B2[m * 3 + 2] * 0.22 * f + (cc[x * 3 + 2] * 1.15 + 18) * a;\n        }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n}\n","layer":{"id":"layer-chemical-garden","type":"code","name":"chemical-garden","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Chemical Garden\n// Family:  chemistry\n// Idea:    Metal-salt crystals dropped into a tall glass of water-glass solution on a lab bench sprout hollow mineral tubes in cobalt blue, copper turquoise, rust, nickel green, manganese pink and calcium white that wobble up towards the surface, burst and bud sideways, until the glass is full and a fresh one slides in.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the chemical garden (silicate garden) of the school chemistry lab\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Salts=0..4, Speed=0.2..3, Crystals=5..20, Strength=-1..1\n//\n// Knob 1: Salts. What goes into the glass: all six salts at 0 (cobalt chloride's blue-violet, copper sulfate's turquoise, iron(III) chloride's rust, nickel sulfate's green, manganese chloride's pink, calcium chloride's white), the cool cobalt, copper and calcium at 1, the warm iron, manganese and calcium at 2, the greens of nickel and copper at 3, cobalt alone at 4.\n// Knob 2: Speed. How fast the garden grows: at 2 a tube that races takes about 11 s from its crystal to the surface and a glass lasts about half a minute before the next slides in; at 0.2 it creeps.\n// Knob 3: Crystals. How many crystals are dropped in, 5 to 20; each sends up four to six tubes as it dissolves, and those bud more. Turned up mid-glass, the extra crystals drop in at once.\n// Knob 4: Strength. How strong the water glass is: near 0 the usual mix, towards -1 a thin solution where hair-fine threads shoot up in 6 s and wriggle, towards 1 a thick one where fat tubes take 18 s and bud into knobbly branches.\n// Buttons: K1 tap slides the glass away and brings in a fresh one.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round, ceil, sin, abs, sqrt, exp, hypot } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\n\n// The glass in its own columns (walls at 3..4 and 59..60), so sliding it is\n// one offset. The rim, the solution's surface and the sand's top are\n// ellipses seen from a little above; z is depth, 0 at the front pane.\nconst GL = 3;\nconst GR = 60;\nconst IL = 5;\nconst IR = 58;\nconst RIM = 4;\nconst SY = 13;\nconst SAND = 104;\nconst BOT = 110;\nconst BENCH = 114;\nconst [HR, HS, HD] = [2.2, 2.2, 2.6];\nconst ell = (x) => sqrt(max(0, 1 - ((x - 31.5) / 28) ** 2));\nconst surfAt = (x, z) => SY + HS * ell(x) * (1 - 2 * z);\nconst sandAt = (x, z) => SAND + HD * ell(x) * (1 - 2 * z);\nconst [OUT, AIR, SOL, TOPS, SIDE, WALL, SHEET, BASE] = [0, 1, 2, 3, 4, 5, 6, 7];\nconst GROWS = [0, 0, 1, 1, 1, 0, 1, 0];\nconst [GROW, HOLD, SWAP] = [0, 1, 2];\nconst SLIDE = 70;\nconst MAXT = 900;\n\n// Each salt: the colour of its silicate tube, the colour of the crystal as\n// it goes in (cobalt chloride goes in pink and grows blue), and how fast and\n// how fat its tubes grow: iron's rust threads shoot up, calcium's white tubes\n// push up slow and thick.\nconst SALT = [\n  [[96, 76, 246], [222, 52, 112], 1.1, 0.9],\n  [[30, 184, 214], [40, 108, 255], 0.95, 1],\n  [[255, 122, 30], [200, 150, 34], 1.3, 0.72],\n  [[118, 224, 74], [58, 198, 126], 0.85, 1.15],\n  [[255, 168, 184], [240, 170, 186], 0.8, 1.05],\n  [[232, 234, 224], [244, 244, 238], 0.72, 1.4],\n];\nconst SETS = [[0, 1, 2, 3, 4, 5], [0, 1, 5], [2, 4, 5], [3, 1], [0]];\nconst saltOf = (P, J, si) => SALT[SETS[P.set][J.seeds[si].slot % SETS[P.set].length]];\n\n// The room: a dark wall with a frosted globe lamp behind the glass. The\n// solution seen against it is faintly yellow-green and a little cloudy.\nfunction paint(P) {\n  const WL = (P.wl = new Float32Array(N * 3));\n  const LA = (P.la = new Float32Array(N));\n  const SO = (P.so = new Float32Array(N * 3));\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const d = hypot((x + 0.5 - 32) * 1.15, y + 0.5 - 44);\n      const bulb = exp(-((d / 9) ** 2));\n      const glow = exp(-((d / 24) ** 2));\n      LA[p] = 0.45 * bulb + 0.75 * glow;\n      const n = (rnd() - 0.5) * 3;\n      const a = 0.12 * bulb + 0.25 * glow;\n      WL.set([11 + 255 * a + n, 12 + 234 * a + n, 17 + 194 * a + n], p * 3);\n      const deep = 1 - (0.16 * max(0, y - SY)) / 95;\n      SO.set([(WL[p * 3] * 0.9 + 7) * deep, (WL[p * 3 + 1] * 0.98 + 10) * deep, (WL[p * 3 + 2] * 0.78 + 7) * deep], p * 3);\n    }\n}\n\n// The glass, its sand and its base, in the glass's own columns. C holds the\n// opaque colours, M darkens the solution towards the walls, O is the front\n// pane's reflections, added last.\nfunction glass(P) {\n  const K = (P.jk = new Uint8Array(N));\n  const C = (P.jc = new Float32Array(N * 3));\n  const M = (P.jm = new Float32Array(N));\n  const O = (P.jo = new Float32Array(N * 3));\n  const put = (A, x, y, c) => A.set(c, (y * W + x) * 3);\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = GL; x \u003c= GR; x++) {\n      const p = y * W + x;\n      const e = ell(x);\n      const u = (x + 0.5 - 31.5) / 28;\n      const lamp = exp(-(((y - 46) / 30) ** 2));\n      M[p] = 0.7 + 0.3 * sqrt(max(0, 1 - u * u));\n      const yc = y + 0.5;\n      let k = OUT;\n      if (y >= BOT) {\n        k = BASE;\n        if (y === BENCH - 1 && (x === GL || x === GR)) k = OUT;\n      } else if (x \u003c IL || x > IR) k = y >= RIM ? WALL : OUT;\n      else if (yc \u003c RIM - HR * e - 0.6) k = OUT;\n      else if (yc \u003c SY - HS * e) k = AIR;\n      else if (yc \u003c SY + HS * e) k = SHEET;\n      else if (yc \u003c SAND - HD * e) k = SOL;\n      else if (yc \u003c SAND + HD * e) k = TOPS;\n      else k = SIDE;\n      K[p] = k;\n      const gr = 0.8 + 0.4 * rnd();\n      if (k === WALL) {\n        // The outer edge of each wall catches the lamp; the glass's thickness, seen edge on, is dark.\n        const c = x === GL ? 0.55 + 0.75 * lamp : x === GR ? 0.4 + 0.5 * lamp : x === GL + 1 ? 0.1 : 0.14;\n        put(C, x, y, [110 * c, 140 * c, 134 * c]);\n      } else if (k === BASE) {\n        const c = y === BOT ? 0.95 - 0.35 * abs(u) : y === BENCH - 1 ? 0.62 : 0.3 + 0.1 * sin(x * 0.7);\n        put(C, x, y, [100 * c, 136 * c, 126 * c]);\n      } else if (k === TOPS) put(C, x, y, [176 * gr, 160 * gr, 124 * gr]);\n      else if (k === SIDE) {\n        // Sand through the front pane, darker low down, in faint layers.\n        const f = (0.8 - (0.32 * (y - SAND)) / 6 + 0.08 * sin(y * 2.1 + x * 0.15)) * gr;\n        put(C, x, y, [150 * f, 134 * f, 100 * f]);\n      } else if (k === SHEET) put(C, x, y, [34, 44, 42]);\n    }\n  // The rim's lips and the meniscus, smoothed over two rows, with the room's\n  // window caught on the left.\n  const line = (x, yc, c) => {\n    for (let y = floor(yc - 1); y \u003c= floor(yc + 1); y++) {\n      const w = max(0, 1 - abs(y + 0.5 - yc));\n      for (let i = 0; i \u003c 3; i++) O[(y * W + x) * 3 + i] += c[i] * w;\n    }\n  };\n  for (let x = IL; x \u003c= IR; x++) {\n    const e = ell(x);\n    const gl = x > 8 && x \u003c 19 ? 1.6 : 1;\n    line(x, RIM - HR * e, [56, 70, 68]);\n    line(x, RIM + HR * e, [140 * gl, 158 * gl, 152 * gl]);\n    line(x, RIM + HR * e + 1, [26, 34, 32]);\n    line(x, SY - HS * e, [26, 36, 34]);\n    line(x, SY + HS * e, [100 * gl, 124 * gl, 116 * gl]);\n  }\n  for (let y = 16; y \u003c 100; y++) {\n    const f = sin((Math.PI * (y - 16)) / 84);\n    for (let c = 0; c \u003c 3; c++) {\n      O[(y * W + 9) * 3 + c] += 16 * f;\n      O[(y * W + 10) * 3 + c] += 9 * f;\n      O[(y * W + 52) * 3 + c] += 8 * f;\n    }\n  }\n}\n\nfunction jar() {\n  return { tid: new Int16Array(N), sh: new Float32Array(N), zb: new Float32Array(N), bo: new Float32Array(N), on: false, off: 0, g: 0, tips: [], tubes: [], seeds: [], bub: [], pops: [], motes: [], done: false };\n}\n\nfunction addSeed(P, J, x, t0) {\n  const z = rnd();\n  J.seeds.push({ x, z, y: -2, rest: sandAt(x, z) - 0.6, slot: J.seeds.length + J.rot, t0, land: -1, wet: 0, m: 0, mid: -1, next: 0, left: 4 + floor(rnd() * 3), sz: rnd() });\n}\n\n// A fresh glass: clean sand and the crystals waiting to go in.\nfunction fresh(P, J) {\n  J.tid.fill(-1);\n  J.zb.fill(9);\n  Object.assign(J, { g: 0, tips: [], tubes: [], seeds: [], bub: [], pops: [], done: false, up: 0, full: 50, rot: floor(rnd() * 6) });\n  const n = P.nc;\n  const order = Array.from({ length: n }, (_, i) => i).sort(() => rnd() - 0.5);\n  for (let i = 0; i \u003c n; i++) addSeed(P, J, IL + 4 + ((i + 0.5 + (rnd() - 0.5) * 0.7) * (IR - IL - 8)) / n, 0.3 + order[i] * (2.2 / n + 0.1));\n  J.motes = Array.from({ length: 14 }, () => [IL + rnd() * (IR - IL), SY + 4 + rnd() * 86, 0.6 + rnd() * 1.6, rnd() * 7]);\n}\n\n// One disc of membrane, shaded across the tube's direction (dx, dy): the\n// wall seen edge on at each side, a sheen on the left.\nfunction stamp(P, J, x, y, r, dx, dy, id, z, ring) {\n  const K = P.jk;\n  for (let py = max(RIM, floor(y - r)); py \u003c= min(BOT - 1, ceil(y + r)); py++)\n    for (let px = max(IL, floor(x - r)); px \u003c= min(IR, ceil(x + r)); px++) {\n      const ex = px + 0.5 - x;\n      const ey = py + 0.5 - y;\n      if (ex * ex + ey * ey > r * r) continue;\n      const q = py * W + px;\n      if (!GROWS[K[q]] || z > J.zb[q] + 0.002) continue;\n      const s = (ex * dy - ey * dx) / r;\n      J.tid[q] = id;\n      J.zb[q] = z;\n      J.bo[q] = J.g;\n      J.sh[q] = (0.42 + 0.58 * sqrt(max(0, 1 - s * s))) * ring * (0.9 + 0.2 * rnd()) + 0.3 * exp(-(((s - 0.45) / 0.3) ** 2));\n    }\n}\n\nfunction tip(P, J, o) {\n  if (J.tubes.length >= MAXT) return;\n  o.id = J.tubes.push(o.seed) - 1;\n  J.tips.push(Object.assign({ age: 0, len: 0, cap: 0, dir: 1, ph: rnd() * 7, rt: o.r, wan: 0 }, o));\n}\n\n// A crystal sends up a new tube from its skin: one in three races for the\n// surface, the rest give out somewhere on the way.\nfunction sprout(P, J, S, si) {\n  const race = rnd() \u003c 0.32;\n  const rs = (0.75 + 0.5 * rnd()) * (1.12 - 0.25 * S.z);\n  tip(P, J, {\n    seed: si, x: S.x + (rnd() - 0.5) * (2 * S.m + 3), y: S.rest - S.m * 0.8, a: (rnd() - 0.5) * 0.9, a0: (rnd() - 0.5) * 0.8,\n    r: P.r0 * rs * saltOf(P, J, si)[3], rs, v: race ? 0.95 + 0.3 * rnd() : 0.45 + 0.55 * rnd(), fuel: race ? 999 : 10 + 75 * rnd() ** 1.3,\n    z: cl(S.z + (rnd() - 0.5) * 0.08, 0, 1), y0: S.rest, bub: rnd() \u003c 0.22,\n  });\n}\n\nfunction grow(P, J, d) {\n  const g = (J.g += d);\n  if (J.seeds.length \u003c P.nc && g \u003c 30) addSeed(P, J, IL + 4 + rnd() * (IR - IL - 8), g + 0.1);\n  J.seeds.forEach((S, si) => {\n    if (g \u003c S.t0) return;\n    if (S.land \u003c 0) {\n      // Through the air to the surface, then sinking slowly through the thick solution.\n      const surf = surfAt(S.x, S.z);\n      if (S.y \u003c surf) S.y += 110 * d;\n      else {\n        if (!S.wet) (S.wet = 1), J.pops.push([S.x, surf, 0, 4]);\n        S.y += (38 + 14 * S.sz) * d;\n      }\n      if (S.y >= S.rest) [S.y, S.land, S.next] = [S.rest, g, g + 0.6 + rnd() * 0.9];\n      return;\n    }\n    // The crystal coats in a skin of silicate that swells as it dissolves.\n    if (S.mid \u003c 0) S.mid = J.tubes.push(si) - 1;\n    const m = min(1, (g - S.land) / 1.8 + (g - S.land) * 0.025) * P.mr * (0.8 + 0.4 * S.sz) * saltOf(P, J, si)[3];\n    if (m > S.m + 0.25) {\n      S.m = m;\n      stamp(P, J, S.x, S.rest - m * 0.45, m, 0, -1, S.mid, S.z, 0.9);\n      stamp(P, J, S.x + (S.sz - 0.5) * m, S.rest - m * 0.9, m * 0.7, 0, -1, S.mid, S.z, 1);\n    }\n    // Air caught in the crystal now and then lets go as a bubble.\n    if (rnd() \u003c d * 0.12) J.bub.push([S.x + (rnd() - 0.5) * 2 * m, S.rest - m - 1, S.z]);\n    if (S.left > 0 && g >= S.next && g \u003c J.full - 4 && J.tips.length \u003c 80) {\n      sprout(P, J, S, si);\n      S.left--;\n      S.next = g + 1.2 + rnd() * 3.2;\n    }\n  });\n  const born = [];\n  for (const T of J.tips) {\n    T.age += d;\n    // Growth comes in spurts, each time the skin at the open tip splits and seals again.\n    const pulse = 0.4 + 0.6 * sqrt(max(0, sin(T.age * 2.6 + T.ph)));\n    const sa = saltOf(P, J, T.seed);\n    const dist = P.v0 * T.v * sa[2] * (T.bub ? 1.6 : 1) * pulse * d;\n    // Each tube wanders off on its own way, back towards upright.\n    T.wan = cl(T.wan + (rnd() - 0.5) * 2.4 * d - T.wan * 0.4 * d, -0.3, 0.3);\n    let aim = T.wan + T.a0 * exp(-T.age * 0.8) + P.wob * (T.bub ? 0.25 : 1) * (0.7 * sin(T.ph + T.age * 1.9) + 0.3 * sin(T.ph * 1.7 + T.age * 4.3));\n    if (T.x \u003c IL + 3) aim += 0.6;\n    if (T.x > IR - 3) aim -= 0.6;\n    T.a += (aim - T.a) * min(1, d * 4);\n    if (T.cap) T.a = T.dir * 1.45;\n    if (rnd() \u003c d * 0.6) T.rt = P.r0 * T.rs * sa[3] * (0.6 + 0.9 * rnd());\n    T.r += (cl(T.rt, 0.5, 4.2) - T.r) * min(1, d * 1.3);\n    const n = max(1, ceil(dist / 0.5));\n    const dx = sin(T.a);\n    const dy = -Math.cos(T.a);\n    for (let i = 0; i \u003c n; i++) {\n      T.x = cl(T.x + (dx * dist) / n, IL + 0.5, IR + 0.5);\n      if (!T.cap) T.y += (dy * dist) / n;\n      T.len += dist / n;\n      stamp(P, J, T.x, T.y, T.r, dx, dy, T.id, T.z, 0.92 + 0.1 * sin(T.len * 0.9 + T.ph));\n    }\n    T.fuel -= dist;\n    const top = surfAt(T.x, T.z) + 1.4 + T.r;\n    if (!T.cap && T.y \u003c= top) {\n      // At the surface it spreads a little way under the skin of the solution.\n      Object.assign(T, { cap: 1, y: top, dir: T.a > 0.05 ? 1 : T.a \u003c -0.05 ? -1 : rnd() \u003c 0.5 ? -1 : 1, fuel: 7 + rnd() * 11 });\n      if (++J.up === 3) J.full = g + 7;\n      if (T.bub) J.pops.push([T.x, surfAt(T.x, T.z), 0, 3]), (T.bub = 0);\n    }\n    if (T.bub && rnd() \u003c d * 0.22) J.bub.push([T.x, T.y - T.r - 0.5, T.z]), (T.bub = 0);\n    // A tube bursts and buds sideways; often the old tip seals over.\n    if (!T.cap && g \u003c 34 && J.tips.length + born.length \u003c 80 && T.y \u003c T.y0 - 6 && rnd() \u003c P.bud * d) {\n      const sd = rnd() \u003c 0.5 ? -1 : 1;\n      stamp(P, J, T.x, T.y, T.r * 1.5, dx, dy, T.id, T.z, 1);\n      born.push({ seed: J.tubes[T.id], x: T.x + sd * T.r, y: T.y + rnd() * 2, a: sd * (0.9 + 0.6 * rnd()), a0: sd * (0.9 + 0.5 * rnd()), r: T.r * 0.75, rs: T.rs * 0.75, v: T.v * (0.6 + 0.5 * rnd()), fuel: 8 + rnd() * 40, z: cl(T.z + (rnd() - 0.5) * 0.06, 0, 1), y0: T.y + 6, bub: false });\n      if (rnd() \u003c 0.35) T.fuel = 0;\n    }\n    if (g > J.full) T.fuel = 0;\n  }\n  J.tips = J.tips.filter((T) => T.fuel > 0);\n  for (const o of born) tip(P, J, o);\n  J.done = g > J.full || (!J.tips.length && g > 6 && J.seeds.every((S) => S.land >= 0 && !S.left));\n  // Bubbles let go of their tubes and rise; rings where things meet the surface.\n  J.bub = J.bub.filter((b) => {\n    b[1] -= 26 * d;\n    b[0] += sin(b[1] * 0.5) * 2 * d;\n    if (b[1] > surfAt(b[0], b[2]) + 1) return true;\n    J.pops.push([b[0], surfAt(b[0], b[2]), 0, 3]);\n    return false;\n  });\n  for (const p of J.pops) p[2] += d;\n  J.pops = J.pops.filter((p) => p[2] \u003c 0.7);\n  for (const m of J.motes) {\n    m[1] += m[2] * d;\n    m[0] += sin(P.clock * 0.7 + m[3]) * 0.8 * d;\n    if (m[1] > SAND - 3) [m[0], m[1]] = [IL + rnd() * (IR - IL), SY + 4];\n  }\n}\n\nfunction slideIn(P) {\n  const nw = P.jars[1 - P.cur];\n  fresh(P, nw);\n  [nw.on, nw.off, P.phase, P.pt] = [true, -SLIDE, SWAP, 0];\n}\n\nexport function setup(params) {\n  const P = params;\n  paint(P);\n  glass(P);\n  P.jars = [jar(), jar()];\n  P.tc = new Float32Array(3 * MAXT);\n  P.buf = new Float32Array(N * 3);\n  P.cc = new Float32Array(W * 3);\n  Object.assign(P, { cur: 0, phase: GROW, pt: 0, clock: 0, started: false, set: 0, rate: 1, nc: 5, str: 0 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 5, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.set = cl(round(k[0]), 0, 4);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  P.nc = cl(round(k[2]), 5, 20);\n  const s = (P.str = cl(k[3], -1, 1));\n  P.v0 = 11.5 * 1.8 ** -s;\n  P.r0 = 1.2 * 1.9 ** s;\n  P.wob = 0.3 * 1.8 ** -s;\n  P.bud = 0.1 * 1.5 ** s;\n  P.mr = 1.7 + 0.9 * (s + 1);\n  const d = dt * P.rate;\n  P.clock += d;\n  const J = P.jars[P.cur];\n  if (!P.started) {\n    // Open on a garden already some seconds old, further on the faster it grows.\n    P.started = true;\n    fresh(P, J);\n    J.on = true;\n    for (let g = 10 + 2.5 * P.rate; g > 0; g -= 1 / 30) grow(P, J, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== SWAP) slideIn(P);\n  if (P.phase !== SWAP) grow(P, J, d);\n  if (P.phase === GROW && J.done) [P.phase, P.pt] = [HOLD, 0];\n  else if (P.phase === HOLD && (P.pt += d) > 2.5) slideIn(P);\n  else if (P.phase === SWAP) {\n    const nw = P.jars[1 - P.cur];\n    const q = min(1, (P.pt += dt * max(P.rate, 0.6)) / 2.4);\n    J.off = round(SLIDE * q * q * (3 - 2 * q));\n    nw.off = J.off - SLIDE;\n    if (q >= 1) [J.on, nw.off, P.cur, P.phase] = [false, 0, 1 - P.cur, GROW];\n  }\n}\n\nlet B;\nfunction add(x, y, r, g, b, a = 1) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= BENCH) return;\n  const o = (y * W + x) * 3;\n  B[o] += r * a;\n  B[o + 1] += g * a;\n  B[o + 2] += b * a;\n}\nfunction mixp(x, y, c, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= BENCH) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) B[o + i] += (c[i] - B[o + i]) * a;\n}\n\n// The moving things of one glass, drawn in screen columns.\nfunction life(P, J, cols) {\n  const o = J.off;\n  const set = SETS[P.set];\n  const t = P.clock;\n  for (const m of J.motes) add(round(m[0]) + o, round(m[1]), 34, 36, 32, 0.6 + 0.4 * sin(t * 3 + m[3]));\n  // Above each open tip, the salt solution it pushes out rises as a faint wavering thread.\n  const L = round(6 + 4 * (1 - P.str));\n  for (const T of J.tips) {\n    if (T.cap) continue;\n    const c = cols(T.id);\n    for (let i = 1; i \u003c= L; i++) {\n      const x = round(T.x + sin(t * 2.4 + T.ph + i * 0.45) * i * 0.12) + o;\n      const y = round(T.y - T.r - i);\n      if (y > SY + 2) add(x, y, c[0] + 40, c[1] + 40, c[2] + 40, 0.16 * (1 - i / (L + 1)));\n    }\n    if (T.bub) {\n      const x = round(T.x) + o;\n      const y = round(T.y - T.r - 0.6);\n      mixp(x, y, [210, 228, 226], 0.9);\n      mixp(x - 1, y, [120, 140, 140], 0.4);\n      mixp(x + 1, y, [120, 140, 140], 0.4);\n    }\n  }\n  for (const b of J.bub) {\n    const x = round(b[0]) + o;\n    const y = round(b[1]);\n    mixp(x, y, [220, 236, 234], 0.85);\n    mixp(x, y + 1, [90, 110, 110], 0.3);\n  }\n  for (const [px, py, age, w] of J.pops) {\n    const k = 1 - age / 0.7;\n    const r = w * (0.5 + age * 2);\n    for (let x = round(px - r); x \u003c= round(px + r); x++) add(x + o, round(py), 90 * k, 104 * k, 100 * k);\n  }\n  for (const S of J.seeds) {\n    if (J.g \u003c S.t0) continue;\n    const sc = SALT[set[S.slot % set.length]];\n    // Salt leaking from the crystal's skin tints the solution round it.\n    if (S.land >= 0) {\n      const R = min(9, 2 + (J.g - S.land) * 0.7);\n      const [hr, hg, hb] = sc[0];\n      for (let y = round(S.rest - R * 1.3); y \u003c= S.rest + 1; y++) {\n        const v = (y - S.rest) / (R * 1.3);\n        for (let x = max(-o, round(S.x - R)); x \u003c= S.x + R && x + o \u003c W; x++) {\n          const u = (x - S.x) / R;\n          const f = 0.08 * (1 - u * u - v * v);\n          if (f > 0) {\n            const q = (y * W + x + o) * 3;\n            B[q] += hr * f;\n            B[q + 1] += hg * f;\n            B[q + 2] += hb * f;\n          }\n        }\n      }\n    }\n    // A falling crystal leaves a faint streak of dissolving salt.\n    const surf = surfAt(S.x, S.z);\n    const fade = S.land \u003c 0 ? 1 : max(0, 1 - (J.g - S.land) / 2.5);\n    if (fade > 0 && S.y > surf)\n      for (let y = round(surf) + 1; y \u003c S.y - 1; y++) add(round(S.x) + o, y, sc[0][0], sc[0][1], sc[0][2], 0.22 * fade * exp(-(S.y - y) / 14));\n    const a = S.land \u003c 0 || J.g - S.land \u003c 1 ? 1 : 0.5;\n    const x = round(S.x - 1) + o;\n    const y = round(S.y) - 1;\n    mixp(x, y, sc[1], a);\n    mixp(x + 1, y, sc[1].map((v) => min(255, v * 1.15 + 30)), a);\n    mixp(x, y + 1, sc[1].map((v) => v * 0.7), a);\n    mixp(x + 1, y + 1, sc[1].map((v) => v * 0.85), a);\n    if (S.sz > 0.5) mixp(x + 2, y + 1, sc[1].map((v) => v * 0.75), a);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  B = P.buf;\n  const { wl: WL, la: LA, so: SO, jk: K, jc: C, jm: M, jo: O, tc: TC } = P;\n  const on = P.jars.filter((J) => J.on);\n  for (const J of on) {\n    // This frame's colour for every tube, from its crystal's salt.\n    J.tubes.forEach((si, id) => TC.set(saltOf(P, J, si)[0], id * 3));\n    J.tc = TC.slice(0, J.tubes.length * 3);\n  }\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let J = null;\n      for (let i = 0; i \u003c on.length; i++) if (x - on[i].off >= GL && x - on[i].off \u003c= GR) J = on[i];\n      const q = J ? p - J.off : 0;\n      const qo = q * 3;\n      const kind = J ? K[q] : OUT;\n      const l = 0.62 + 0.25 * LA[p];\n      for (let c = 0; c \u003c 3; c++) {\n        let v = WL[o + c];\n        if (kind === AIR) v = v * 0.9 + 5;\n        else if (kind === WALL || kind === BASE) v = C[qo + c] + v * 0.25;\n        else if (kind === SOL) v = SO[o + c] * M[q];\n        else if (kind === SHEET) v = SO[o + c] * 0.5 + C[qo + c];\n        else if (kind) v = C[qo + c] * l;\n        B[o + c] = v;\n      }\n      if (J && GROWS[kind] && J.tid[q] >= 0) {\n        // A tube: lit through from the lamp behind, paler where its skin is\n        // fresh, and fading into the solution the further back it stands.\n        const id = J.tid[q] * 3;\n        const s = J.sh[q];\n        const fr = 0.3 * max(0, 1 - (J.g - J.bo[q]) / 1.4);\n        const fog = 0.06 + 0.5 * J.zb[q];\n        const hl = max(0, s - 1);\n        const sv = min(1, s) * (0.68 + 0.48 * LA[p]);\n        for (let c = 0; c \u003c 3; c++) {\n          let v = J.tc[id + c] * sv;\n          v += (255 - v) * hl;\n          v += (235 - v) * fr;\n          v += (B[o + c] - v) * fog;\n          B[o + c] = kind === SHEET ? v * 0.75 + 11 : v;\n        }\n      }\n      if (kind) for (let c = 0; c \u003c 3; c++) B[o + c] += O[qo + c];\n    }\n  for (const J of on) life(P, J, (id) => J.tc.subarray(id * 3, id * 3 + 3));\n  for (let p = 0, o = 0; p \u003c BENCH * W; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, max(0, B[o])), min(255, max(0, B[o + 1])), min(255, max(0, B[o + 2])));\n  bench(P, display, on);\n}\n\n// A black resin bench top. The jar's foot is reflected in it, and the lamp,\n// focused through the full glass, throws a pool of light on it that takes the\n// colours of the garden it passed through, left for right.\nfunction bench(P, display, on) {\n  const B2 = P.buf;\n  const cc = P.cc.fill(0);\n  for (const J of on)\n    for (let lx = IL; lx \u003c= IR; lx++) {\n      const x = lx + J.off;\n      const xm = 63 - lx + J.off;\n      if (x \u003c 0 || x >= W || xm \u003c 0 || xm >= W) continue;\n      for (let y = 30; y \u003c 100; y += 5) for (let i = 0; i \u003c 3; i++) cc[x * 3 + i] += B2[(y * W + xm) * 3 + i] / 14;\n    }\n  for (let y = BENCH; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const gr = ((x * 7 + y * 13) % 5) * 0.6;\n      const f = 1 - (y - BENCH) / 9;\n      let r = 16 + 10 * f + gr;\n      let g = 17 + 10 * f + gr;\n      let b = 21 + 11 * f + gr;\n      if (y === 123) [r, g, b] = [66, 68, 76];\n      else if (y > 123) [r, g, b] = [26 - (y - 124) * 3 + gr, 27 - (y - 124) * 3 + gr, 31 - (y - 124) * 3 + gr];\n      else\n        for (const J of on) {\n          const lx = x - J.off;\n          if (lx \u003c GL || lx > GR) continue;\n          if (y === BENCH) {\n            [r, g, b] = [7, 7, 9];\n            continue;\n          }\n          const m = (2 * BENCH - 1 - y) * W + x;\n          const ex = (lx - 31.5) / 23;\n          const ey = (y - 118.5) / 3.4;\n          const a = 0.9 * sm(1 - ex * ex - ey * ey) + 0.7 * exp(-(((y - 117.5) / 1.1) ** 2)) * sm(1 - ex * ex * 1.4);\n          r += B2[m * 3] * 0.22 * f + (cc[x * 3] * 1.15 + 26) * a;\n          g += B2[m * 3 + 1] * 0.22 * f + (cc[x * 3 + 1] * 1.15 + 28) * a;\n          b += B2[m * 3 + 2] * 0.22 * f + (cc[x * 3 + 2] * 1.15 + 18) * a;\n        }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Salts=0..4, Speed=0.2..3, Crystals=5..20, Strength=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Salts","min":0,"max":4,"about":"What goes into the glass: all six salts at 0 (cobalt chloride's blue-violet, copper sulfate's turquoise, iron(III) chloride's rust, nickel sulfate's green, manganese chloride's pink, calcium chloride's white), the cool cobalt, copper and calcium at 1, the warm iron, manganese and calcium at 2, the greens of nickel and copper at 3, cobalt alone at 4."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the garden grows: at 2 a tube that races takes about 11 s from its crystal to the surface and a glass lasts about half a minute before the next slides in; at 0.2 it creeps."},{"name":"Crystals","min":5,"max":20,"about":"How many crystals are dropped in, 5 to 20; each sends up four to six tubes as it dissolves, and those bud more. Turned up mid-glass, the extra crystals drop in at once."},{"name":"Strength","min":-1,"max":1,"about":"How strong the water glass is: near 0 the usual mix, towards -1 a thin solution where hair-fine threads shoot up in 6 s and wriggle, towards 1 a thick one where fat tubes take 18 s and bud into knobbly branches."}],"start":[0,2,5,0.06],"measures":{"motion":0.044,"detail":0.0682,"edges":0.4036,"complexity":2.0411,"coverage":0.7726,"colour":0.152,"drift":0.0448},"knobResponse":[0.0762,0.0506,0.0924,0.0773]},{"slug":"chladni","title":"Chladni","family":"wave","round":16,"note":"세운 놋쇠 판에 뿌린 모래가 떨리는 자리에서 튀어 나가 가만히 있는 마디선에 모여 클라드니 도형을 그려요. 5초마다 활을 다시 그으면 모래가 흩어졌다가 새 모드의 도형을 찾아가고, K4 를 올리면 석송 가루가 배 자리마다 둥근 노란 더미로 모여요.","idea":"Sand on a tall metal plate jumps off the vibrating parts and settles on the still nodal lines, and every few seconds the plate is bowed into a new mode and the sand scatters to find the new figure.","buttons":"K1 tap draws the bow again now: the sand jumps up and finds the figure of another mode in the same register.","code":"// ===== Patternflow pattern =====\n// Title:   Chladni\n// Family:  wave\n// Idea:    Sand on a tall metal plate jumps off the vibrating parts and settles on the still nodal lines, and every few seconds the plate is bowed into a new mode and the sand scatters to find the new figure.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ernst Chladni, Entdeckungen über die Theorie des Klanges (1787); the powder heaps from Michael Faraday, On a peculiar class of acoustical figures (1831)\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Plate=0..1, Drive=0.8..3, Pitch=-1..1, Powder=0..1\n//\n// Knob 1: Plate. What the plate is made of: brass at 0, then copper, blued steel and black glass, each with the sand that shows best on it; between copper and steel it passes the purple of tempered steel.\n// Knob 2: Drive. How hard the plate is bowed. Sand only jumps where the plate throws it harder than gravity, so at the bottom only the antinodes clear and the lines lie in broad soft bands; at 2 a figure gathers in about a second; at the top the lines come out thin and hard.\n// Knob 3: Pitch. Which register the bow plays in, 1.4 octaves either way: low notes make two or three big curves, high notes a dense lace of small cells.\n// Knob 4: Powder. How much of what is on the plate is lycopodium powder instead of sand: the air the plate pumps carries the powder the other way, into round yellow heaps on the antinodes, as Faraday found.\n// Buttons: K1 tap draws the bow again now: the sand jumps up and finds the figure of another mode in the same register.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst GRAINS = 4000;\n// One period of cosine in a table, so a grain's displacement is four lookups.\nconst TAB = 4096;\nconst MASK = TAB - 1;\nconst QUARTER = TAB / 4;\nconst COS = new Float32Array(TAB);\nfor (let i = 0; i \u003c TAB; i++) COS[i] = Math.cos((2 * Math.PI * i) / TAB);\n// 1 - exp(-c) for a grain count c in steps of 1/16: how much of an LED the sand hides.\nconst COVER = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) COVER[i] = 1 - Math.exp(-0.55 * (i / 16));\n// How long a figure stands before the next bow stroke, in seconds.\nconst HOLD = 5;\n\n// Modes of a free plate twice as tall as it is wide. A free edge does not hold\n// the plate still, so each standing wave is cos(p pi x / 64) cos(q pi y / 128).\n// That is the usual approximation; the note of such a wave goes up with\n// (p/64)^2 + (q/128)^2, so on this plate two waves sound the same note when\n// 4p^2 + q^2 is the same number, and a plate bowed at that note rings with both\n// at once, added or taken away. The sum is what draws a Chladni figure. On a\n// square plate the pairs are (p, q) and (q, p); matched to the 1:2 plate\n// instead, the cells of the figure come out as tall as they are wide.\n// Each row: that number, then p and q of the first wave and of the second.\nconst MODES = [\n  [25, 0, 5, 2, 3],\n  [36, 0, 6, 3, 0],\n  [40, 1, 6, 3, 2],\n  [52, 2, 6, 3, 4],\n  [64, 0, 8, 4, 0],\n  [65, 2, 7, 4, 1],\n  [68, 1, 8, 4, 2],\n  [80, 2, 8, 4, 4],\n  [85, 1, 9, 3, 7],\n  [100, 3, 8, 4, 6],\n  [100, 0, 10, 4, 6],\n  [104, 1, 10, 5, 2],\n  [116, 2, 10, 5, 4],\n  [125, 1, 11, 5, 5],\n  [136, 3, 10, 5, 6],\n  [145, 4, 9, 6, 1],\n  [148, 1, 12, 6, 2],\n  [160, 2, 12, 6, 4],\n  [164, 4, 10, 5, 8],\n  [169, 0, 13, 6, 5],\n  [180, 3, 12, 6, 6],\n  [185, 2, 13, 4, 11],\n  [200, 5, 10, 7, 2],\n  [205, 3, 13, 7, 3],\n  [208, 4, 12, 6, 8],\n  [212, 2, 14, 7, 4],\n  [221, 5, 11, 7, 5],\n  [225, 0, 15, 6, 9],\n  [232, 3, 14, 7, 6],\n  [244, 5, 12, 6, 10],\n];\n\n// Plates, each with the sand that reads on it: the plate's colour at full light,\n// the sand's colour, how much light the plate gives back, and how sharply it\n// mirrors the window. Glass is darker than metal and the glossiest of the four.\nconst PLATES = [\n  [[255, 196, 92], [238, 232, 212], 0.13, 1], // brass, quartz sand\n  [[255, 128, 80], [242, 240, 232], 0.13, 1], // copper, white sand\n  [[90, 135, 255], [246, 214, 150], 0.14, 0.9], // blued steel, golden sand\n  [[140, 160, 185], [250, 250, 248], 0.09, 1.5], // black glass, chalk-white sand\n];\n// The grains are not all one colour: mostly clear quartz, some cream, a few amber and grey.\nconst TINTS = [\n  [1, 1, 1],\n  [1, 0.94, 0.8],\n  [0.96, 0.8, 0.56],\n  [0.78, 0.78, 0.76],\n];\n// Lycopodium spores, the club-moss powder Faraday used, sulphur yellow.\nconst POWDER = [236, 212, 92];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vnoise(x, y, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const a = hash(ix + seed, iy);\n  const b = hash(ix + 1 + seed, iy);\n  const c = hash(ix + seed, iy + 1);\n  const d = hash(ix + 1 + seed, iy + 1);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nexport function setup(params) {\n  params.gx = new Float32Array(GRAINS);\n  params.gy = new Float32Array(GRAINS);\n  params.hop = new Float32Array(GRAINS);\n  params.tint = new Uint8Array(GRAINS);\n  // Each grain draws a number once: grains under the Powder knob are powder.\n  params.kind = new Float32Array(GRAINS);\n  for (let i = 0; i \u003c GRAINS; i++) {\n    params.gx[i] = Math.random() * W;\n    params.gy[i] = Math.random() * H;\n    const r = Math.random();\n    params.tint[i] = r \u003c 0.55 ? 0 : r \u003c 0.82 ? 1 : r \u003c 0.93 ? 2 : 3;\n    params.kind[i] = Math.random();\n  }\n  params.cnt = new Float32Array(N);\n  params.sr = new Float32Array(N);\n  params.sg = new Float32Array(N);\n  params.sb = new Float32Array(N);\n  params.pw = new Float32Array(N);\n  params.cov = new Float32Array(N);\n  params.slope = new Float32Array(N);\n  params.amp2 = new Float32Array(N);\n  params.up = new Int32Array(N);\n  params.peak = new Int32Array(N);\n  params.lum = new Float32Array(N);\n  params.sheen = new Float32Array(N);\n  bakePlate(params);\n  params.mode = -1;\n  params.sign = 1;\n  params.since = 0;\n  // The plate has been sprinkled; the first stroke comes a moment after it shows.\n  params.next = 0.15;\n  params.amp = 2;\n  params.plate = 0;\n  params.powder = 0.06;\n}\n\n// The plate's own light, the same whatever it is made of: fine brushing along\n// its width, a soft window reflection running down it, and the bevel of the edge.\nfunction bakePlate(params) {\n  const lum = params.lum;\n  const sheen = params.sheen;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // Brushed: streaks 10 to 20 LEDs long across the plate, a row or two tall.\n      const brush = vnoise(x / 14, y / 1.3, 11) * 0.6 + vnoise(x / 5, y / 0.8, 37) * 0.4;\n      let l = 1 + 0.09 * (brush - 0.5) * 2;\n      // The whole plate a little lighter at the top, where it faces the window.\n      l *= 1.12 - 0.24 * (y / H);\n      // The edge catches light along the top and the left and falls into shadow on the other two.\n      if (y === 0 || x === 0) l *= 1.9;\n      else if (y === H - 1 || x === W - 1) l *= 0.5;\n      lum[i] = l;\n      // The window: a broad band leaning down the length of the plate, split by\n      // the dark bar of the sash.\n      const d = (x - 30) * 0.9 + (y - 64) * 0.3;\n      const bar = 1 - 0.55 * Math.exp(-((d - 2) * (d - 2)) / 4);\n      sheen[i] = (0.17 * Math.exp(-(d * d) / 300) + 0.1 * Math.exp(-(d * d) / 40)) * bar;\n    }\n}\n\nfunction pickMode(params, k3) {\n  // Pitch moves the middle of the register an octave and a half each way;\n  // the note of a plate mode goes with that number, so an octave doubles it.\n  const centre = 85 * Math.pow(2, 1.4 * k3);\n  const band = [];\n  for (let m = 0; m \u003c MODES.length; m++) {\n    const o = Math.abs(Math.log2(MODES[m][0] / centre));\n    if (o \u003c 0.38 && m !== params.mode) band.push(m);\n  }\n  if (band.length === 0) {\n    // At the ends of the range take the nearest modes.\n    let best = 0;\n    for (let m = 0; m \u003c MODES.length; m++) if (Math.abs(Math.log2(MODES[m][0] / centre)) \u003c Math.abs(Math.log2(MODES[best][0] / centre))) best = m;\n    band.push(best);\n  }\n  const m = band[Math.floor(Math.random() * band.length)];\n  params.mode = m;\n  params.sign = Math.random() \u003c 0.5 ? 1 : -1;\n  const row = MODES[m];\n  // Table steps per LED for each of the four cosines.\n  params.ax = (row[1] * TAB) / (2 * W);\n  params.ay = (row[2] * TAB) / (2 * H);\n  params.bx = (row[3] * TAB) / (2 * W);\n  params.by = (row[4] * TAB) / (2 * H);\n  // The wavenumber in radians per LED, the same for both waves of a pair.\n  params.k = (Math.PI / H) * Math.sqrt(row[0]);\n  // How steep the plate is at each LED, for the reflection it smears, and how\n  // hard it swings there, for the powder.\n  const slope = params.slope;\n  const amp = params.amp2;\n  const s = params.sign;\n  const inv = 1 / params.k;\n  const kax = (row[1] * Math.PI) / W;\n  const kay = (row[2] * Math.PI) / H;\n  const kbx = (row[3] * Math.PI) / W;\n  const kby = (row[4] * Math.PI) / H;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const X = x + 0.5;\n      const Y = y + 0.5;\n      const ca = COS[(params.ax * X) & MASK];\n      const sa = COS[((params.ax * X) - QUARTER) & MASK];\n      const cb = COS[(params.ay * Y) & MASK];\n      const sb = COS[((params.ay * Y) - QUARTER) & MASK];\n      const cc = COS[(params.bx * X) & MASK];\n      const sc = COS[((params.bx * X) - QUARTER) & MASK];\n      const cd = COS[(params.by * Y) & MASK];\n      const sd = COS[((params.by * Y) - QUARTER) & MASK];\n      const dx = -kax * sa * cb - s * kbx * sc * cd;\n      const dy = -kay * ca * sb - s * kby * cc * sd;\n      slope[y * W + x] = Math.sqrt(dx * dx + dy * dy) * inv * 0.5;\n      amp[y * W + x] = Math.abs(ca * cb + s * cc * cd);\n    }\n  // Where the powder goes: from each LED, climb to the neighbour that swings\n  // hardest until no neighbour swings harder. That LED is the antinode whose\n  // heap this LED feeds. Climbing on the grid finds the true peaks; following\n  // the slope by itself left powder strung out along the ridges between them.\n  const up = params.up;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let best = i;\n      for (let oy = -1; oy \u003c= 1; oy++)\n        for (let ox = -1; ox \u003c= 1; ox++) {\n          const xx = x + ox;\n          const yy = y + oy;\n          if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n          const j = yy * W + xx;\n          if (amp[j] > amp[best]) best = j;\n        }\n      up[i] = best;\n    }\n  const peak = params.peak;\n  for (let i = 0; i \u003c N; i++) {\n    let j = i;\n    while (up[j] !== j) j = up[j];\n    peak[i] = j;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.plate = Math.max(0, Math.min(1, k[0]));\n  const amp = Math.max(0.05, k[1]);\n  params.amp = amp;\n  const k3 = Math.max(-1, Math.min(1, k[2]));\n  params.powder = Math.max(0, Math.min(1, k[3]));\n\n  params.since += dt;\n  params.next -= dt;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  // Turned to another register, the bow does not wait out the figure.\n  if (params.mode >= 0 && Math.abs(Math.log2(MODES[params.mode][0] / (85 * Math.pow(2, 1.4 * k3)))) > 0.6 && params.next > 0.4) params.next = 0.4;\n  if (pressed || params.next \u003c= 0) {\n    pickMode(params, k3);\n    params.since = 0;\n    params.next = HOLD;\n  }\n  if (params.mode \u003c 0) return;\n\n  // A stroke throws everything up for a moment; then the note settles in.\n  const t = params.since;\n  const burst = 2.2 * Math.exp(-t / 0.18);\n  const env = 0.4 + 0.6 * Math.min(1, t / 0.5);\n  const a = amp * env;\n  const f = Math.sqrt(dt * 30);\n  const inv = 1 / params.k;\n  const ax = params.ax;\n  const ay = params.ay;\n  const bx = params.bx;\n  const by = params.by;\n  const s = params.sign;\n  const row = MODES[params.mode];\n  const kax = (row[1] * Math.PI) / W;\n  const kay = (row[2] * Math.PI) / H;\n  const kbx = (row[3] * Math.PI) / W;\n  const kby = (row[4] * Math.PI) / H;\n  const gx = params.gx;\n  const gy = params.gy;\n  const hop = params.hop;\n  const kind = params.kind;\n  const powder = params.powder;\n  const peak = params.peak;\n  const spread = 0.8 + 1.6 * Math.sqrt(powder);\n  for (let i = 0; i \u003c GRAINS; i++) {\n    let x = gx[i];\n    let y = gy[i];\n    const ca = COS[(ax * x) & MASK];\n    const cb = COS[(ay * y) & MASK];\n    const cc = COS[(bx * x) & MASK];\n    const cd = COS[(by * y) & MASK];\n    const u = ca * cb + s * cc * cd;\n    const sa = COS[((ax * x) - QUARTER) & MASK];\n    const sb = COS[((ay * y) - QUARTER) & MASK];\n    const sc = COS[((bx * x) - QUARTER) & MASK];\n    const sd = COS[((by * y) - QUARTER) & MASK];\n    const dx = -kax * sa * cb - s * kbx * sc * cd;\n    const dy = -kay * ca * sb - s * kby * cc * sd;\n    if (kind[i] \u003c powder) {\n      // Powder is light enough for the air the plate pumps: the currents grow\n      // with the square of the swing and carry it to the antinode of its cell.\n      // A heap holds what reaches it, so more powder makes wider heaps, and as\n      // Faraday saw in 1831, each heap turns slowly on itself.\n      const pk = peak[((y | 0) * W + (x | 0))];\n      const tx = (pk % W) + 0.5;\n      const ty = ((pk / W) | 0) + 0.5;\n      const pull = Math.min(0.5, 0.035 * a * a) * f * f;\n      const spin = (u > 0 ? 0.06 : -0.06) * f * f;\n      const j = spread * Math.sqrt(2 * pull) * 1.7 + burst * f;\n      const ox = x - tx;\n      const oy = y - ty;\n      x += -pull * ox - spin * oy + (Math.random() - 0.5) * j;\n      y += -pull * oy + spin * ox + (Math.random() - 0.5) * j;\n      hop[i] = 0;\n    } else {\n      // Sand only leaves the plate where the plate's acceleration beats gravity.\n      // e is that acceleration in g: at the antinodes it is the Drive times 4.4,\n      // and the band where it stays under 1 is where the sand lies still, so the\n      // lines thin as the bow presses harder. Above 1 a grain jumps further the\n      // harder the plate throws it, in any direction.\n      const e = 2.2 * a * Math.abs(u);\n      const e2 = e * e;\n      const e8 = e2 * e2 * e2 * e2;\n      const h = ((e > 1 ? e - 0.7 : 0.3 * e8) * 0.18 * inv + 0.015 + burst) * f;\n      x += (Math.random() * 2 - 1) * h;\n      y += (Math.random() * 2 - 1) * h;\n      // Inside the band the plate still tilts under each grain, and the sand\n      // creeps down to the line itself, so a figure sharpens while it stands.\n      const g2 = dx * dx + dy * dy;\n      if (e \u003c 1 && g2 > 1e-6) {\n        const c = (0.003 * a * u * f * f) / g2;\n        x -= c * dx;\n        y -= c * dy;\n      }\n      hop[i] = h;\n    }\n    if (x \u003c 0) x = -x;\n    else if (x >= W) x = 2 * W - x - 0.001;\n    if (y \u003c 0) y = -y;\n    else if (y >= H) y = 2 * H - y - 0.001;\n    gx[i] = Math.max(0, Math.min(W - 0.001, x));\n    gy[i] = Math.max(0, Math.min(H - 0.001, y));\n  }\n}\n\nexport function draw(display, params, time) {\n  const cnt = params.cnt;\n  const sr = params.sr;\n  const sg = params.sg;\n  const sb = params.sb;\n  const pw = params.pw;\n  const cov = params.cov;\n  cnt.fill(0);\n  sr.fill(0);\n  sg.fill(0);\n  sb.fill(0);\n  pw.fill(0);\n\n  // Plate and sand for this setting of the knob, blended between neighbours.\n  const pf = params.plate * (PLATES.length - 1);\n  const p0 = Math.min(PLATES.length - 2, Math.floor(pf));\n  const pt = pf - p0;\n  const plate = [0, 0, 0];\n  const sand = [0, 0, 0];\n  for (let c = 0; c \u003c 3; c++) {\n    plate[c] = PLATES[p0][0][c] + (PLATES[p0 + 1][0][c] - PLATES[p0][0][c]) * pt;\n    sand[c] = PLATES[p0][1][c] + (PLATES[p0 + 1][1][c] - PLATES[p0][1][c]) * pt;\n  }\n  const base = PLATES[p0][2] + (PLATES[p0 + 1][2] - PLATES[p0][2]) * pt;\n  const gloss = PLATES[p0][3] + (PLATES[p0 + 1][3] - PLATES[p0][3]) * pt;\n\n  const gx = params.gx;\n  const gy = params.gy;\n  const hop = params.hop;\n  const kind = params.kind;\n  const tint = params.tint;\n  const powder = params.powder;\n  for (let i = 0; i \u003c GRAINS; i++) {\n    const x = gx[i] | 0;\n    const y = gy[i] | 0;\n    const o = y * W + x;\n    if (kind[i] \u003c powder) {\n      // Powder is fluff: a soft spot rather than a point.\n      pw[o] += 1;\n      if (x > 0) pw[o - 1] += 0.35;\n      if (x \u003c W - 1) pw[o + 1] += 0.35;\n      if (y > 0) pw[o - W] += 0.35;\n      if (y \u003c H - 1) pw[o + W] += 0.35;\n      continue;\n    }\n    // A grain in the air is a blur, so it shows less than one lying still.\n    const w = 1 / (1 + 1.2 * hop[i]);\n    const tt = TINTS[tint[i]];\n    cnt[o] += w;\n    sr[o] += w * tt[0];\n    sg[o] += w * tt[1];\n    sb[o] += w * tt[2];\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const c = cnt[i] * 16;\n    cov[i] = COVER[c \u003c 256 ? c | 0 : 256];\n  }\n\n  const lum = params.lum;\n  const sheen = params.sheen;\n  const slope = params.slope;\n  // Where the plate tilts back and forth, the window it reflects is smeared out.\n  const smear = Math.min(0.85, params.amp * 0.3);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let l = base * lum[i] + gloss * sheen[i] * (1 - smear * Math.min(1, slope[i]));\n      let r = plate[0] * l;\n      let g = plate[1] * l;\n      let b = plate[2] * l;\n      const cv = cov[i];\n      if (cv > 0) {\n        const n = cnt[i];\n        const tr = (sand[0] * sr[i]) / n;\n        const tg = (sand[1] * sg[i]) / n;\n        const tb = (sand[2] * sb[i]) / n;\n        r += (tr - r) * cv;\n        g += (tg - g) * cv;\n        b += (tb - b) * cv;\n      }\n      const pv = pw[i];\n      if (pv > 0) {\n        const a = Math.min(0.95, 1 - Math.exp(-0.5 * pv));\n        r += (POWDER[0] - r) * a;\n        g += (POWDER[1] - g) * a;\n        b += (POWDER[2] - b) * a;\n      }\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n}\n","layer":{"id":"layer-chladni","type":"code","name":"chladni","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Chladni\n// Family:  wave\n// Idea:    Sand on a tall metal plate jumps off the vibrating parts and settles on the still nodal lines, and every few seconds the plate is bowed into a new mode and the sand scatters to find the new figure.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Ernst Chladni, Entdeckungen über die Theorie des Klanges (1787); the powder heaps from Michael Faraday, On a peculiar class of acoustical figures (1831)\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Plate=0..1, Drive=0.8..3, Pitch=-1..1, Powder=0..1\n//\n// Knob 1: Plate. What the plate is made of: brass at 0, then copper, blued steel and black glass, each with the sand that shows best on it; between copper and steel it passes the purple of tempered steel.\n// Knob 2: Drive. How hard the plate is bowed. Sand only jumps where the plate throws it harder than gravity, so at the bottom only the antinodes clear and the lines lie in broad soft bands; at 2 a figure gathers in about a second; at the top the lines come out thin and hard.\n// Knob 3: Pitch. Which register the bow plays in, 1.4 octaves either way: low notes make two or three big curves, high notes a dense lace of small cells.\n// Knob 4: Powder. How much of what is on the plate is lycopodium powder instead of sand: the air the plate pumps carries the powder the other way, into round yellow heaps on the antinodes, as Faraday found.\n// Buttons: K1 tap draws the bow again now: the sand jumps up and finds the figure of another mode in the same register.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst GRAINS = 4000;\n// One period of cosine in a table, so a grain's displacement is four lookups.\nconst TAB = 4096;\nconst MASK = TAB - 1;\nconst QUARTER = TAB / 4;\nconst COS = new Float32Array(TAB);\nfor (let i = 0; i \u003c TAB; i++) COS[i] = Math.cos((2 * Math.PI * i) / TAB);\n// 1 - exp(-c) for a grain count c in steps of 1/16: how much of an LED the sand hides.\nconst COVER = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) COVER[i] = 1 - Math.exp(-0.55 * (i / 16));\n// How long a figure stands before the next bow stroke, in seconds.\nconst HOLD = 5;\n\n// Modes of a free plate twice as tall as it is wide. A free edge does not hold\n// the plate still, so each standing wave is cos(p pi x / 64) cos(q pi y / 128).\n// That is the usual approximation; the note of such a wave goes up with\n// (p/64)^2 + (q/128)^2, so on this plate two waves sound the same note when\n// 4p^2 + q^2 is the same number, and a plate bowed at that note rings with both\n// at once, added or taken away. The sum is what draws a Chladni figure. On a\n// square plate the pairs are (p, q) and (q, p); matched to the 1:2 plate\n// instead, the cells of the figure come out as tall as they are wide.\n// Each row: that number, then p and q of the first wave and of the second.\nconst MODES = [\n  [25, 0, 5, 2, 3],\n  [36, 0, 6, 3, 0],\n  [40, 1, 6, 3, 2],\n  [52, 2, 6, 3, 4],\n  [64, 0, 8, 4, 0],\n  [65, 2, 7, 4, 1],\n  [68, 1, 8, 4, 2],\n  [80, 2, 8, 4, 4],\n  [85, 1, 9, 3, 7],\n  [100, 3, 8, 4, 6],\n  [100, 0, 10, 4, 6],\n  [104, 1, 10, 5, 2],\n  [116, 2, 10, 5, 4],\n  [125, 1, 11, 5, 5],\n  [136, 3, 10, 5, 6],\n  [145, 4, 9, 6, 1],\n  [148, 1, 12, 6, 2],\n  [160, 2, 12, 6, 4],\n  [164, 4, 10, 5, 8],\n  [169, 0, 13, 6, 5],\n  [180, 3, 12, 6, 6],\n  [185, 2, 13, 4, 11],\n  [200, 5, 10, 7, 2],\n  [205, 3, 13, 7, 3],\n  [208, 4, 12, 6, 8],\n  [212, 2, 14, 7, 4],\n  [221, 5, 11, 7, 5],\n  [225, 0, 15, 6, 9],\n  [232, 3, 14, 7, 6],\n  [244, 5, 12, 6, 10],\n];\n\n// Plates, each with the sand that reads on it: the plate's colour at full light,\n// the sand's colour, how much light the plate gives back, and how sharply it\n// mirrors the window. Glass is darker than metal and the glossiest of the four.\nconst PLATES = [\n  [[255, 196, 92], [238, 232, 212], 0.13, 1], // brass, quartz sand\n  [[255, 128, 80], [242, 240, 232], 0.13, 1], // copper, white sand\n  [[90, 135, 255], [246, 214, 150], 0.14, 0.9], // blued steel, golden sand\n  [[140, 160, 185], [250, 250, 248], 0.09, 1.5], // black glass, chalk-white sand\n];\n// The grains are not all one colour: mostly clear quartz, some cream, a few amber and grey.\nconst TINTS = [\n  [1, 1, 1],\n  [1, 0.94, 0.8],\n  [0.96, 0.8, 0.56],\n  [0.78, 0.78, 0.76],\n];\n// Lycopodium spores, the club-moss powder Faraday used, sulphur yellow.\nconst POWDER = [236, 212, 92];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vnoise(x, y, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const a = hash(ix + seed, iy);\n  const b = hash(ix + 1 + seed, iy);\n  const c = hash(ix + seed, iy + 1);\n  const d = hash(ix + 1 + seed, iy + 1);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nexport function setup(params) {\n  params.gx = new Float32Array(GRAINS);\n  params.gy = new Float32Array(GRAINS);\n  params.hop = new Float32Array(GRAINS);\n  params.tint = new Uint8Array(GRAINS);\n  // Each grain draws a number once: grains under the Powder knob are powder.\n  params.kind = new Float32Array(GRAINS);\n  for (let i = 0; i \u003c GRAINS; i++) {\n    params.gx[i] = Math.random() * W;\n    params.gy[i] = Math.random() * H;\n    const r = Math.random();\n    params.tint[i] = r \u003c 0.55 ? 0 : r \u003c 0.82 ? 1 : r \u003c 0.93 ? 2 : 3;\n    params.kind[i] = Math.random();\n  }\n  params.cnt = new Float32Array(N);\n  params.sr = new Float32Array(N);\n  params.sg = new Float32Array(N);\n  params.sb = new Float32Array(N);\n  params.pw = new Float32Array(N);\n  params.cov = new Float32Array(N);\n  params.slope = new Float32Array(N);\n  params.amp2 = new Float32Array(N);\n  params.up = new Int32Array(N);\n  params.peak = new Int32Array(N);\n  params.lum = new Float32Array(N);\n  params.sheen = new Float32Array(N);\n  bakePlate(params);\n  params.mode = -1;\n  params.sign = 1;\n  params.since = 0;\n  // The plate has been sprinkled; the first stroke comes a moment after it shows.\n  params.next = 0.15;\n  params.amp = 2;\n  params.plate = 0;\n  params.powder = 0.06;\n}\n\n// The plate's own light, the same whatever it is made of: fine brushing along\n// its width, a soft window reflection running down it, and the bevel of the edge.\nfunction bakePlate(params) {\n  const lum = params.lum;\n  const sheen = params.sheen;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // Brushed: streaks 10 to 20 LEDs long across the plate, a row or two tall.\n      const brush = vnoise(x / 14, y / 1.3, 11) * 0.6 + vnoise(x / 5, y / 0.8, 37) * 0.4;\n      let l = 1 + 0.09 * (brush - 0.5) * 2;\n      // The whole plate a little lighter at the top, where it faces the window.\n      l *= 1.12 - 0.24 * (y / H);\n      // The edge catches light along the top and the left and falls into shadow on the other two.\n      if (y === 0 || x === 0) l *= 1.9;\n      else if (y === H - 1 || x === W - 1) l *= 0.5;\n      lum[i] = l;\n      // The window: a broad band leaning down the length of the plate, split by\n      // the dark bar of the sash.\n      const d = (x - 30) * 0.9 + (y - 64) * 0.3;\n      const bar = 1 - 0.55 * Math.exp(-((d - 2) * (d - 2)) / 4);\n      sheen[i] = (0.17 * Math.exp(-(d * d) / 300) + 0.1 * Math.exp(-(d * d) / 40)) * bar;\n    }\n}\n\nfunction pickMode(params, k3) {\n  // Pitch moves the middle of the register an octave and a half each way;\n  // the note of a plate mode goes with that number, so an octave doubles it.\n  const centre = 85 * Math.pow(2, 1.4 * k3);\n  const band = [];\n  for (let m = 0; m \u003c MODES.length; m++) {\n    const o = Math.abs(Math.log2(MODES[m][0] / centre));\n    if (o \u003c 0.38 && m !== params.mode) band.push(m);\n  }\n  if (band.length === 0) {\n    // At the ends of the range take the nearest modes.\n    let best = 0;\n    for (let m = 0; m \u003c MODES.length; m++) if (Math.abs(Math.log2(MODES[m][0] / centre)) \u003c Math.abs(Math.log2(MODES[best][0] / centre))) best = m;\n    band.push(best);\n  }\n  const m = band[Math.floor(Math.random() * band.length)];\n  params.mode = m;\n  params.sign = Math.random() \u003c 0.5 ? 1 : -1;\n  const row = MODES[m];\n  // Table steps per LED for each of the four cosines.\n  params.ax = (row[1] * TAB) / (2 * W);\n  params.ay = (row[2] * TAB) / (2 * H);\n  params.bx = (row[3] * TAB) / (2 * W);\n  params.by = (row[4] * TAB) / (2 * H);\n  // The wavenumber in radians per LED, the same for both waves of a pair.\n  params.k = (Math.PI / H) * Math.sqrt(row[0]);\n  // How steep the plate is at each LED, for the reflection it smears, and how\n  // hard it swings there, for the powder.\n  const slope = params.slope;\n  const amp = params.amp2;\n  const s = params.sign;\n  const inv = 1 / params.k;\n  const kax = (row[1] * Math.PI) / W;\n  const kay = (row[2] * Math.PI) / H;\n  const kbx = (row[3] * Math.PI) / W;\n  const kby = (row[4] * Math.PI) / H;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const X = x + 0.5;\n      const Y = y + 0.5;\n      const ca = COS[(params.ax * X) & MASK];\n      const sa = COS[((params.ax * X) - QUARTER) & MASK];\n      const cb = COS[(params.ay * Y) & MASK];\n      const sb = COS[((params.ay * Y) - QUARTER) & MASK];\n      const cc = COS[(params.bx * X) & MASK];\n      const sc = COS[((params.bx * X) - QUARTER) & MASK];\n      const cd = COS[(params.by * Y) & MASK];\n      const sd = COS[((params.by * Y) - QUARTER) & MASK];\n      const dx = -kax * sa * cb - s * kbx * sc * cd;\n      const dy = -kay * ca * sb - s * kby * cc * sd;\n      slope[y * W + x] = Math.sqrt(dx * dx + dy * dy) * inv * 0.5;\n      amp[y * W + x] = Math.abs(ca * cb + s * cc * cd);\n    }\n  // Where the powder goes: from each LED, climb to the neighbour that swings\n  // hardest until no neighbour swings harder. That LED is the antinode whose\n  // heap this LED feeds. Climbing on the grid finds the true peaks; following\n  // the slope by itself left powder strung out along the ridges between them.\n  const up = params.up;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let best = i;\n      for (let oy = -1; oy \u003c= 1; oy++)\n        for (let ox = -1; ox \u003c= 1; ox++) {\n          const xx = x + ox;\n          const yy = y + oy;\n          if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n          const j = yy * W + xx;\n          if (amp[j] > amp[best]) best = j;\n        }\n      up[i] = best;\n    }\n  const peak = params.peak;\n  for (let i = 0; i \u003c N; i++) {\n    let j = i;\n    while (up[j] !== j) j = up[j];\n    peak[i] = j;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.plate = Math.max(0, Math.min(1, k[0]));\n  const amp = Math.max(0.05, k[1]);\n  params.amp = amp;\n  const k3 = Math.max(-1, Math.min(1, k[2]));\n  params.powder = Math.max(0, Math.min(1, k[3]));\n\n  params.since += dt;\n  params.next -= dt;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  // Turned to another register, the bow does not wait out the figure.\n  if (params.mode >= 0 && Math.abs(Math.log2(MODES[params.mode][0] / (85 * Math.pow(2, 1.4 * k3)))) > 0.6 && params.next > 0.4) params.next = 0.4;\n  if (pressed || params.next \u003c= 0) {\n    pickMode(params, k3);\n    params.since = 0;\n    params.next = HOLD;\n  }\n  if (params.mode \u003c 0) return;\n\n  // A stroke throws everything up for a moment; then the note settles in.\n  const t = params.since;\n  const burst = 2.2 * Math.exp(-t / 0.18);\n  const env = 0.4 + 0.6 * Math.min(1, t / 0.5);\n  const a = amp * env;\n  const f = Math.sqrt(dt * 30);\n  const inv = 1 / params.k;\n  const ax = params.ax;\n  const ay = params.ay;\n  const bx = params.bx;\n  const by = params.by;\n  const s = params.sign;\n  const row = MODES[params.mode];\n  const kax = (row[1] * Math.PI) / W;\n  const kay = (row[2] * Math.PI) / H;\n  const kbx = (row[3] * Math.PI) / W;\n  const kby = (row[4] * Math.PI) / H;\n  const gx = params.gx;\n  const gy = params.gy;\n  const hop = params.hop;\n  const kind = params.kind;\n  const powder = params.powder;\n  const peak = params.peak;\n  const spread = 0.8 + 1.6 * Math.sqrt(powder);\n  for (let i = 0; i \u003c GRAINS; i++) {\n    let x = gx[i];\n    let y = gy[i];\n    const ca = COS[(ax * x) & MASK];\n    const cb = COS[(ay * y) & MASK];\n    const cc = COS[(bx * x) & MASK];\n    const cd = COS[(by * y) & MASK];\n    const u = ca * cb + s * cc * cd;\n    const sa = COS[((ax * x) - QUARTER) & MASK];\n    const sb = COS[((ay * y) - QUARTER) & MASK];\n    const sc = COS[((bx * x) - QUARTER) & MASK];\n    const sd = COS[((by * y) - QUARTER) & MASK];\n    const dx = -kax * sa * cb - s * kbx * sc * cd;\n    const dy = -kay * ca * sb - s * kby * cc * sd;\n    if (kind[i] \u003c powder) {\n      // Powder is light enough for the air the plate pumps: the currents grow\n      // with the square of the swing and carry it to the antinode of its cell.\n      // A heap holds what reaches it, so more powder makes wider heaps, and as\n      // Faraday saw in 1831, each heap turns slowly on itself.\n      const pk = peak[((y | 0) * W + (x | 0))];\n      const tx = (pk % W) + 0.5;\n      const ty = ((pk / W) | 0) + 0.5;\n      const pull = Math.min(0.5, 0.035 * a * a) * f * f;\n      const spin = (u > 0 ? 0.06 : -0.06) * f * f;\n      const j = spread * Math.sqrt(2 * pull) * 1.7 + burst * f;\n      const ox = x - tx;\n      const oy = y - ty;\n      x += -pull * ox - spin * oy + (Math.random() - 0.5) * j;\n      y += -pull * oy + spin * ox + (Math.random() - 0.5) * j;\n      hop[i] = 0;\n    } else {\n      // Sand only leaves the plate where the plate's acceleration beats gravity.\n      // e is that acceleration in g: at the antinodes it is the Drive times 4.4,\n      // and the band where it stays under 1 is where the sand lies still, so the\n      // lines thin as the bow presses harder. Above 1 a grain jumps further the\n      // harder the plate throws it, in any direction.\n      const e = 2.2 * a * Math.abs(u);\n      const e2 = e * e;\n      const e8 = e2 * e2 * e2 * e2;\n      const h = ((e > 1 ? e - 0.7 : 0.3 * e8) * 0.18 * inv + 0.015 + burst) * f;\n      x += (Math.random() * 2 - 1) * h;\n      y += (Math.random() * 2 - 1) * h;\n      // Inside the band the plate still tilts under each grain, and the sand\n      // creeps down to the line itself, so a figure sharpens while it stands.\n      const g2 = dx * dx + dy * dy;\n      if (e \u003c 1 && g2 > 1e-6) {\n        const c = (0.003 * a * u * f * f) / g2;\n        x -= c * dx;\n        y -= c * dy;\n      }\n      hop[i] = h;\n    }\n    if (x \u003c 0) x = -x;\n    else if (x >= W) x = 2 * W - x - 0.001;\n    if (y \u003c 0) y = -y;\n    else if (y >= H) y = 2 * H - y - 0.001;\n    gx[i] = Math.max(0, Math.min(W - 0.001, x));\n    gy[i] = Math.max(0, Math.min(H - 0.001, y));\n  }\n}\n\nexport function draw(display, params, time) {\n  const cnt = params.cnt;\n  const sr = params.sr;\n  const sg = params.sg;\n  const sb = params.sb;\n  const pw = params.pw;\n  const cov = params.cov;\n  cnt.fill(0);\n  sr.fill(0);\n  sg.fill(0);\n  sb.fill(0);\n  pw.fill(0);\n\n  // Plate and sand for this setting of the knob, blended between neighbours.\n  const pf = params.plate * (PLATES.length - 1);\n  const p0 = Math.min(PLATES.length - 2, Math.floor(pf));\n  const pt = pf - p0;\n  const plate = [0, 0, 0];\n  const sand = [0, 0, 0];\n  for (let c = 0; c \u003c 3; c++) {\n    plate[c] = PLATES[p0][0][c] + (PLATES[p0 + 1][0][c] - PLATES[p0][0][c]) * pt;\n    sand[c] = PLATES[p0][1][c] + (PLATES[p0 + 1][1][c] - PLATES[p0][1][c]) * pt;\n  }\n  const base = PLATES[p0][2] + (PLATES[p0 + 1][2] - PLATES[p0][2]) * pt;\n  const gloss = PLATES[p0][3] + (PLATES[p0 + 1][3] - PLATES[p0][3]) * pt;\n\n  const gx = params.gx;\n  const gy = params.gy;\n  const hop = params.hop;\n  const kind = params.kind;\n  const tint = params.tint;\n  const powder = params.powder;\n  for (let i = 0; i \u003c GRAINS; i++) {\n    const x = gx[i] | 0;\n    const y = gy[i] | 0;\n    const o = y * W + x;\n    if (kind[i] \u003c powder) {\n      // Powder is fluff: a soft spot rather than a point.\n      pw[o] += 1;\n      if (x > 0) pw[o - 1] += 0.35;\n      if (x \u003c W - 1) pw[o + 1] += 0.35;\n      if (y > 0) pw[o - W] += 0.35;\n      if (y \u003c H - 1) pw[o + W] += 0.35;\n      continue;\n    }\n    // A grain in the air is a blur, so it shows less than one lying still.\n    const w = 1 / (1 + 1.2 * hop[i]);\n    const tt = TINTS[tint[i]];\n    cnt[o] += w;\n    sr[o] += w * tt[0];\n    sg[o] += w * tt[1];\n    sb[o] += w * tt[2];\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const c = cnt[i] * 16;\n    cov[i] = COVER[c \u003c 256 ? c | 0 : 256];\n  }\n\n  const lum = params.lum;\n  const sheen = params.sheen;\n  const slope = params.slope;\n  // Where the plate tilts back and forth, the window it reflects is smeared out.\n  const smear = Math.min(0.85, params.amp * 0.3);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let l = base * lum[i] + gloss * sheen[i] * (1 - smear * Math.min(1, slope[i]));\n      let r = plate[0] * l;\n      let g = plate[1] * l;\n      let b = plate[2] * l;\n      const cv = cov[i];\n      if (cv > 0) {\n        const n = cnt[i];\n        const tr = (sand[0] * sr[i]) / n;\n        const tg = (sand[1] * sg[i]) / n;\n        const tb = (sand[2] * sb[i]) / n;\n        r += (tr - r) * cv;\n        g += (tg - g) * cv;\n        b += (tb - b) * cv;\n      }\n      const pv = pw[i];\n      if (pv > 0) {\n        const a = Math.min(0.95, 1 - Math.exp(-0.5 * pv));\n        r += (POWDER[0] - r) * a;\n        g += (POWDER[1] - g) * a;\n        b += (POWDER[2] - b) * a;\n      }\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Plate=0..1, Drive=0.8..3, Pitch=-1..1, Powder=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Plate","min":0,"max":1,"about":"What the plate is made of: brass at 0, then copper, blued steel and black glass, each with the sand that shows best on it; between copper and steel it passes the purple of tempered steel."},{"name":"Drive","min":0.8,"max":3,"about":"How hard the plate is bowed. Sand only jumps where the plate throws it harder than gravity, so at the bottom only the antinodes clear and the lines lie in broad soft bands; at 2 a figure gathers in about a second; at the top the lines come out thin and hard."},{"name":"Pitch","min":-1,"max":1,"about":"Which register the bow plays in, 1.4 octaves either way: low notes make two or three big curves, high notes a dense lace of small cells."},{"name":"Powder","min":0,"max":1,"about":"How much of what is on the plate is lycopodium powder instead of sand: the air the plate pumps carries the powder the other way, into round yellow heaps on the antinodes, as Faraday found."}],"start":[0,2,0,0.06],"measures":{"motion":0.4769,"detail":0.0916,"edges":0.6144,"complexity":1.6152,"coverage":0.9904,"colour":0.0973,"drift":0.0566},"knobResponse":[0.0837,0.1502,0.16,0.131]},{"slug":"chromatography","title":"Chromatography","family":"chemistry","round":20,"note":"실험대 위 유리 수조에 거름종이 띠가 매달려 발끝을 용매에 담그고, 젖은 앞선이 올라가는 동안 연필 출발선의 잉크 점이 색 띠로 갈라져 저마다 다른 빠르기로 올라가요. K1 을 누르면 띠를 들어 올리고 새 띠를 걸어요.","idea":"Strips of filter paper hang from a glass rod in a tall glass tank on a lab bench, the solvent climbs them from a shallow pool, and the ink spot on each pencil start line splits into coloured bands that rise at their own speeds until the strips are lifted out and fresh ones go in.","buttons":"K1 tap lifts the strips out of the tank now and hangs fresh ones.","code":"// ===== Patternflow pattern =====\n// Title:   Chromatography\n// Family:  chemistry\n// Idea:    Strips of filter paper hang from a glass rod in a tall glass tank on a lab bench, the solvent climbs them from a shallow pool, and the ink spot on each pencil start line splits into coloured bands that rise at their own speeds until the strips are lifted out and fresh ones go in.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the paper chromatography of the school chemistry lab\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Inks=0..3, Speed=0.2..3, Strips=3..6, Solvent=-1..1\n//\n// Knob 1: Inks. What is spotted on the strips: felt-tip pens at 0 (black splits into yellow, magenta, cyan and violet, green into yellow and blue, brown into orange and blue-grey), the food dyes of sugar-coated sweets at 1, a leaf extract at 2 (orange carotene running near the front, yellow xanthophyll, blue-green and olive chlorophylls), fountain-pen inks at 3.\n// Knob 2: Speed. How fast the solvent climbs: at 2 the front takes about 15 s from the pool to the top, slowing as it goes as a wick does, and fresh strips go in every 19 s; at 0.2 it creeps.\n// Knob 3: Strips. How many strips hang from the rod, three wide ones at 3 up to six narrow ones at 6.\n// Knob 4: Solvent. How polar the solvent is: near 0 the bands spread out over the whole run; towards -1 most of the dyes stay down by the start line, towards 1 they all crowd up behind the front, and the wetter paper of a watery solvent reads darker.\n// Buttons: K1 tap lifts the strips out of the tank now and hangs fresh ones.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the glass, and the rows things sit on. Strips are drawn in their own\n// rows, so lifting them is one offset.\nconst XL = 3;\nconst XR = 60;\nconst TOP = 2;\nconst ROD = 3;\nconst RIM = 7;\nconst LABEL = 13;\nconst Y0 = 99;\nconst YS = 106;\nconst FOOT = 110;\nconst YB = 113;\nconst BENCH = 117;\n// The front climbs from the solvent surface; it stops HMAX rows above it.\nconst HO = YS - Y0;\nconst HMAX = 84;\nconst T = 15;\nconst EXP = 0.7;\nconst [RUN, LIFT, EMPTY, LOWER] = [0, 1, 2, 3];\nconst DUR = [0, 1.8, 0.9, 1.7];\nconst LIFT_H = 126;\nconst DRY = [238, 236, 226];\nconst WET = [100, 114, 130];\n// Pencil digits, 3x5, one hex digit a row.\nconst DIG = [\"26227\", \"71747\", \"71717\", \"55711\", \"74717\", \"74757\"];\n\nconst { min, max, round, floor, exp, sin, abs, sqrt } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Each ink: the colour of the spot as it goes on, how much of it stays behind\n// at the start line, and its dyes as [r, g, b, affinity, strength]. Affinity\n// is the dye's Rf in a balanced solvent: how far up the wet paper it gets as\n// a share of the solvent front.\nconst SETS = [\n  // Felt-tip pens, run in water.\n  [\n    [[34, 30, 40], 0.28, [[255, 212, 0, 0.88, 1], [255, 40, 160, 0.64, 1], [0, 190, 255, 0.44, 1], [130, 56, 255, 0.22, 1]]],\n    [[24, 120, 52], 0.15, [[220, 240, 0, 0.8, 1], [20, 90, 255, 0.38, 1]]],\n    [[100, 56, 24], 0.32, [[255, 128, 0, 0.74, 1], [104, 134, 196, 0.3, 1]]],\n    [[30, 60, 200], 0.15, [[0, 204, 255, 0.68, 1], [126, 64, 255, 0.3, 1]]],\n    [[100, 30, 130], 0.2, [[255, 40, 176, 0.7, 1], [40, 84, 255, 0.36, 1]]],\n    [[240, 110, 20], 0.12, [[255, 222, 0, 0.82, 1], [255, 64, 112, 0.52, 1]]],\n  ],\n  // The sugar shells of sweets, run in salt water.\n  [\n    [[40, 170, 60], 0.1, [[240, 232, 0, 0.82, 1], [0, 112, 255, 0.62, 1]]],\n    [[220, 30, 50], 0.12, [[255, 30, 72, 0.5, 1], [255, 172, 0, 0.78, 0.9]]],\n    [[130, 40, 140], 0.12, [[255, 40, 92, 0.48, 1], [30, 92, 255, 0.66, 1]]],\n    [[255, 120, 20], 0.1, [[255, 216, 0, 0.84, 1], [255, 52, 60, 0.52, 0.9]]],\n    [[110, 60, 30], 0.18, [[255, 40, 72, 0.46, 0.9], [255, 210, 0, 0.8, 1], [20, 100, 255, 0.64, 0.9]]],\n    [[20, 90, 230], 0.1, [[0, 120, 255, 0.66, 1], [0, 224, 200, 0.9, 0.55]]],\n  ],\n  // Leaves ground in acetone and run in petroleum ether.\n  [\n    [[30, 90, 30], 0.22, [[255, 150, 0, 0.95, 0.8], [240, 222, 30, 0.62, 0.9], [0, 190, 130, 0.42, 1], [130, 200, 20, 0.28, 0.9]]],\n    [[110, 20, 60], 0.3, [[230, 0, 120, 0.06, 1], [240, 222, 30, 0.62, 0.7], [0, 190, 130, 0.42, 0.8]]],\n    [[170, 80, 20], 0.26, [[255, 140, 0, 0.95, 1], [250, 224, 20, 0.62, 1], [160, 84, 30, 0.1, 0.8]]],\n    [[40, 120, 30], 0.18, [[0, 196, 120, 0.42, 1], [140, 210, 20, 0.28, 1], [255, 160, 0, 0.95, 0.6]]],\n    [[90, 30, 50], 0.28, [[200, 0, 140, 0.08, 0.9], [0, 180, 130, 0.42, 0.9], [255, 150, 0, 0.95, 0.6]]],\n    [[36, 100, 36], 0.2, [[255, 150, 0, 0.95, 0.7], [240, 222, 30, 0.62, 0.8], [0, 190, 130, 0.42, 0.9], [130, 200, 20, 0.28, 0.8]]],\n  ],\n  // Fountain-pen inks, run in water.\n  [\n    [[30, 50, 200], 0.15, [[40, 90, 255, 0.55, 1], [150, 60, 255, 0.3, 0.9], [255, 90, 200, 0.82, 0.5]]],\n    [[30, 30, 36], 0.25, [[255, 200, 0, 0.78, 0.9], [0, 180, 255, 0.56, 1], [230, 30, 150, 0.38, 1]]],\n    [[0, 150, 190], 0.1, [[0, 220, 255, 0.62, 1], [180, 255, 40, 0.86, 0.5]]],\n    [[200, 20, 40], 0.12, [[255, 30, 120, 0.72, 1], [255, 120, 0, 0.48, 1]]],\n    [[20, 140, 90], 0.12, [[0, 200, 230, 0.68, 1], [230, 230, 0, 0.44, 1]]],\n    [[110, 30, 200], 0.15, [[255, 40, 200, 0.66, 1], [60, 60, 255, 0.4, 1]]],\n  ],\n];\n\n// How far each kind of ink streaks back to the start line: leaf extracts\n// smear the most.\nconst TAIL = [0.4, 0.32, 0.6, 0.45];\n\nfunction layout(P, n) {\n  P.n = n;\n  P.sw = [12, 10, 8, 7][n - 3];\n  const gap = (XR - XL + 1 - n * P.sw) / (n + 1);\n  for (let j = 0; j \u003c n; j++) P.sx[j] = XL + round(gap * (j + 1) + P.sw * j);\n}\n\n// Fresh strips: each wicks at its own rate, with its own ragged front and\n// spot, and after the first set the inks go on in a new order.\nfunction fresh(P, shuffle) {\n  P.t = 0;\n  P.maxf = 0;\n  for (const S of P.st) {\n    S.f = 0.93 + rnd() * 0.13;\n    P.maxf = max(P.maxf, S.f);\n    S.spot = rnd();\n    S.ph = rnd() * 6.28;\n    let a = 0;\n    for (let i = 0; i \u003c 14; i++) S.rag[i] = a = a * 0.55 + (rnd() - 0.5) * 1.8;\n    for (let i = 0; i \u003c 5; i++) S.jit[i] = (rnd() - 0.5) * 0.05;\n  }\n  if (shuffle)\n    for (let j = 5; j > 0; j--) {\n      const i = floor(rnd() * (j + 1));\n      [P.perm[i], P.perm[j]] = [P.perm[j], P.perm[i]];\n    }\n}\n\n// The room behind, the tank and the bench, painted once. Glass in front of\n// the strips goes in an overlay added last.\nfunction paint(P) {\n  const B = (P.bg = new Float32Array(N * 3));\n  const O = (P.ov = new Float32Array(N * 3));\n  const put = (A, x, y, c) => A.set(c, (y * W + x) * 3);\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      // White wall tiles of the lab, dimmed again through two panes of glass.\n      const grout = x % 9 === 4 || y % 9 === 2;\n      const inTank = x >= 1 && x \u003c= 62 && y >= RIM;\n      let c = grout ? [12, 12, 14] : [27, 27, 30];\n      if (inTank) c = grout ? [8, 12, 13] : [15, 21, 23];\n      put(B, x, y, c);\n    }\n  // The pool: shallow solvent over the glass floor.\n  for (let y = YS; y \u003c YB; y++)\n    for (let x = XL; x \u003c= XR; x++) {\n      const d = (y - YS) / (YB - YS);\n      put(B, x, y, [24 + 6 * d, 42 + 8 * d, 54 + 6 * d]);\n    }\n  for (let x = 1; x \u003c= 62; x++) {\n    put(B, x, YB, [92, 132, 122]);\n    put(B, x, YB + 1, [40, 70, 62]);\n    put(B, x, YB + 2, [34, 60, 53]);\n    put(B, x, YB + 3, [74, 104, 96]);\n  }\n  for (let y = YS; y \u003c YB; y++) for (const x of [1, 2, 61, 62]) put(B, x, y, x === 1 || x === 62 ? [44, 70, 64] : [30, 50, 56]);\n  // The bench: a varnished hardwood top and its front edge.\n  for (let y = BENCH; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 0.86 + 0.14 * sin(x * 0.23 + y * 2.9 + 2.2 * sin(x * 0.07 + y)) + ((x * 7 + y * 13) % 5) * 0.012;\n      let c;\n      if (y === 122) c = [178, 114, 62];\n      else if (y \u003c 122) c = [132 * g, 80 * g, 40 * g];\n      else c = [88 * g, 50 * g, 24 * g];\n      if (y === BENCH && x >= 1 && x \u003c= 62) c = [60, 34, 17];\n      if (y === BENCH + 1 && x >= 2 && x \u003c= 61) c = c.map((v) => v * 0.8);\n      put(B, x, y, c);\n    }\n  // Glass: the front rim, the side walls catching the lab light from the left,\n  // and two faint streaks of reflection on the front pane.\n  for (let x = 1; x \u003c= 62; x++) {\n    put(O, x, RIM, [46, 66, 62]);\n    put(O, x, RIM + 1, [12, 18, 17]);\n  }\n  for (let y = RIM; y \u003c YB; y++) {\n    const fall = 1 - y / 200;\n    const streak = y > 14 && y \u003c 52 ? 1 : 0;\n    put(O, 1, y, [(40 + 44 * streak) * fall, (62 + 60 * streak) * fall, (58 + 56 * streak) * fall]);\n    put(O, 2, y, [12, 18, 17]);\n    put(O, 61, y, [8, 12, 12]);\n    put(O, 62, y, [28, 42, 40]);\n  }\n  for (let y = 16; y \u003c 84; y++) {\n    const x = round(56 - (y - 16) * 0.32);\n    for (let i = 0; i \u003c 3; i++) {\n      O[(y * W + x) * 3 + i] += 9;\n      O[(y * W + x - 3) * 3 + i] += 5;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.buf = new Float32Array(N * 3);\n  P.st = Array.from({ length: 6 }, () => ({ rag: new Float32Array(14), jit: new Float32Array(5) }));\n  P.perm = [0, 1, 2, 3, 4, 5];\n  P.sx = [0, 0, 0, 0, 0, 0];\n  P.h = new Float32Array(6);\n  P.fa = new Float32Array(14);\n  P.dye = new Float32Array(5 * 6);\n  P.mask = new Uint8Array(N);\n  P.drops = [];\n  P.rip = [];\n  paint(P);\n  fresh(P, false);\n  // Open with the front 32 rows up the strips, so the bands have begun to part.\n  P.t = 0.25 * T;\n  Object.assign(P, { n: 0, sw: 12, phase: RUN, pt: 0, dy: 0, clock: 0, set: 0, rate: 1, sol: 0 });\n}\n\n// Fresh strips are dry until their feet are in the pool.\nfunction fronts(P) {\n  for (let j = 0; j \u003c 6; j++) P.h[j] = P.phase === LOWER ? -9 : HMAX * min(1, (P.t * P.st[j].f) / T) ** EXP;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.set = clamp(round(k[0]), 0, 3);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  const n = clamp(round(k[2]), 3, 6);\n  if (n !== P.n) layout(P, n);\n  P.sol = clamp(k[3], -1, 1);\n  P.clock += dt;\n  if (input.btnPressed && input.btnPressed[0] && P.phase === RUN) [P.phase, P.pt] = [LIFT, 0];\n  const r = P.rate;\n  if (P.phase === RUN) {\n    P.t += dt * r;\n    if (P.t * P.maxf >= T) [P.phase, P.pt] = [LIFT, 0];\n  } else {\n    P.pt += dt * max(r, 0.7);\n    const q = min(1, P.pt / DUR[P.phase]);\n    if (P.phase === LIFT) {\n      P.dy = LIFT_H * q * q;\n      // The feet drip as they come out of the pool.\n      const foot = FOOT - P.dy;\n      if (foot \u003c YS && foot > YS - 30)\n        for (let j = 0; j \u003c P.n; j++)\n          if (rnd() \u003c dt * 7) P.drops.push([P.sx[j] + 1 + rnd() * (P.sw - 2), foot, 0]);\n    } else if (P.phase === LOWER) P.dy = LIFT_H * (1 - q) * (1 - q);\n    if (q >= 1) {\n      if (P.phase === EMPTY) fresh(P, true);\n      if (P.phase === LOWER) for (let j = 0; j \u003c P.n; j++) P.rip.push([P.sx[j] + P.sw / 2, 0]);\n      P.phase = (P.phase + 1) % 4;\n      P.pt = 0;\n      if (P.phase === RUN) P.dy = 0;\n    }\n  }\n  fronts(P);\n  for (const d of P.drops) {\n    d[2] += 160 * dt;\n    d[1] += d[2] * dt;\n    if (d[1] >= YS) P.rip.push([d[0], 0]);\n  }\n  P.drops = P.drops.filter((d) => d[1] \u003c YS);\n  for (const p of P.rip) p[1] += dt;\n  P.rip = P.rip.filter((p) => p[1] \u003c 0.9);\n}\n\n// One strip, in its own rows v (screen row y = v - dy).\nfunction strip(P, j, ink, ex) {\n  const B = P.buf;\n  const S = P.st[j];\n  const x0 = P.sx[j];\n  const w = P.sw;\n  const hw = w / 2;\n  const h = P.h[j];\n  const D = max(0, h - HO);\n  const dy = round(P.dy);\n  const wet = WET.map((c) => c * (1 - 0.2 * P.sol));\n  for (let i = 0; i \u003c w; i++) {\n    const e = (i + 0.5 - hw) / hw;\n    // Faster in the middle, and more ragged the further it has come.\n    P.fa[i] = h + (0.5 + 0.04 * h) * (1 - e * e) + S.rag[i] * (0.25 + h / HMAX) + 0.3 * sin(i * 1.3 + P.clock * 0.8 + S.ph);\n  }\n  const dyes = ink[2];\n  const nd = dyes.length;\n  const dv = P.dye;\n  for (let q = 0; q \u003c nd; q++) {\n    const rf = clamp(dyes[q][3] + S.jit[q], 0.02, 0.97) ** ex;\n    const c = rf * D;\n    const sig = 1.2 + 0.065 * c + 0.6 * S.spot;\n    dv.set([rf, 1 / (0.6 * sig), dyes[q][4] * min(1, 2.4 / (1.4 + 0.35 * sig)), min(hw - 0.6, 2.6 + 0.12 * c + S.spot), 1 / (1.7 * sig), sig], q * 6);\n  }\n  const spotC = ink[0];\n  const fade = D \u003c= 0 ? 1 : max(ink[1], exp(-D / 4));\n  const rs = 1.2 + 0.9 * S.spot;\n  const dig = DIG[j];\n  const tail = TAIL[P.set];\n  for (let v = TOP; v \u003c= FOOT; v++) {\n    const y = v - dy;\n    if (y \u003c 0 || y >= YB) continue;\n    const ly = 1 - (0.1 * v) / 110;\n    for (let i = 0; i \u003c w; i++) {\n      const x = x0 + i;\n      const p = y * W + x;\n      const o = p * 3;\n      P.mask[p] = 1;\n      const e = (i + 0.5 - hw) / hw;\n      let L = (1.03 - 0.07 * e - (i === w - 1 ? 0.12 : 0)) * ly;\n      // The fold over the rod and the shade the clip throws.\n      if (v === TOP) L *= 1.06;\n      else if (v \u003c= RIM + 1) L *= 0.9;\n      else if (v === RIM + 2) L *= 0.78;\n      const fa = P.fa[i];\n      const dist = v - (YS - fa);\n      const wt = clamp((dist + 0.5) / 2.5, 0, 1);\n      let r = (DRY[0] + (wet[0] - DRY[0]) * wt) * L;\n      let g = (DRY[1] + (wet[1] - DRY[1]) * wt) * L;\n      let b = (DRY[2] + (wet[2] - DRY[2]) * wt) * L;\n      // The front itself: a thin darker line where the dirt in the solvent\n      // collects.\n      if (dist > -2 && dist \u003c 3.2) {\n        const fl = exp(-(((dist - 0.6) / 0.8) ** 2));\n        r *= 1 - 0.22 * fl;\n        g *= 1 - 0.24 * fl;\n        b *= 1 - 0.34 * fl;\n      }\n      // Wet paper lets the grout of the wall behind show through.\n      if (wt > 0 && (x % 9 === 4 || y % 9 === 2)) {\n        r *= 1 - 0.1 * wt;\n        g *= 1 - 0.1 * wt;\n        b *= 1 - 0.08 * wt;\n      }\n      if (v > Y0) {\n        r *= 1 - 0.08 * wt;\n        g *= 1 - 0.08 * wt;\n        b *= 1 - 0.06 * wt;\n      }\n      // Pencil: the start line and the strip's number.\n      if (v === Y0 && (i + j) % 7 !== 3) [r, g, b] = [r * 0.6 + 24, g * 0.6 + 24, b * 0.6 + 28];\n      const di = i - floor(hw) + 1;\n      if (v >= LABEL && v \u003c LABEL + 5 && di >= 0 && di \u003c 3 && (parseInt(dig[v - LABEL], 16) >> (2 - di)) & 1) [r, g, b] = [r * 0.5 + 20, g * 0.5 + 20, b * 0.5 + 24];\n      // The spot as it went on, dissolving once the solvent reaches it.\n      const ds = abs(v - Y0) \u003c 3 ? clamp(rs + 0.5 - sqrt((i + 0.5 - hw) ** 2 + ((v - Y0) * 1.15) ** 2), 0, 1) * fade * 0.9 : 0;\n      if (ds > 0) {\n        r += (spotC[0] * L - r) * ds;\n        g += (spotC[1] * L - g) * ds;\n        b += (spotC[2] * L - b) * ds;\n      }\n      // The bands: a sharp, bright leading edge and a long soft tail back to\n      // the start line.\n      if (D > 0 && wt > 0) {\n        const u = Y0 - v;\n        const Dx = max(0, fa - HO);\n        const ax = abs(i + 0.5 - hw);\n        for (let q = 0, k = 0; q \u003c nd; q++, k += 6) {\n          const hx = clamp((dv[k + 3] + 0.6 - ax) / 1.2, 0, 1);\n          if (hx \u003c= 0) continue;\n          const c = dv[k] * Dx;\n          const du = u - c;\n          let pr = 0;\n          if (du >= 0) {\n            const z = du * dv[k + 1];\n            if (z \u003c 3) pr = exp(-z * z);\n          } else {\n            const z = du * dv[k + 4];\n            pr = (z > -3 ? exp(-z * z) : 0) + (u > 0 ? tail * sqrt(u / c) : 0);\n          }\n          const A = dv[k + 2] * hx;\n          const d = A * pr * wt;\n          if (d \u003c 0.01) continue;\n          const m = min(0.95, d);\n          const V = dyes[q];\n          const sig = dv[k + 5];\n          const zg = (du - 0.35 * sig) / (0.45 * sig);\n          const gl = zg > -3 && zg \u003c 3 ? 0.3 * A * exp(-zg * zg) : 0;\n          r += (V[0] * 0.92 * L - r) * m + V[0] * gl;\n          g += (V[1] * 0.92 * L - g) * m + V[1] * gl;\n          b += (V[2] * 0.92 * L - b) * m + V[2] * gl;\n        }\n      }\n      // Under the solvent the paper takes the pool's colour.\n      if (y >= YS) [r, g, b] = [r * 0.6, g * 0.76, b * 0.9];\n      B[o] = r;\n      B[o + 1] = g;\n      B[o + 2] = b;\n    }\n  }\n  // A bulldog clip holds the fold to the rod.\n  const cw = min(6, w - 2);\n  const c0 = x0 + round((w - cw) / 2);\n  for (let v = ROD - 1; v \u003c= RIM + 1; v++) {\n    const y = v - dy;\n    if (y \u003c 0 || y >= H) continue;\n    for (let x = c0; x \u003c c0 + cw; x++) {\n      let c;\n      if (v \u003c ROD + 1) c = x === c0 + 1 || x === c0 + cw - 2 ? [176, 180, 190] : null;\n      else if (v === ROD + 1) c = [150, 154, 166];\n      else c = [64 - (v - ROD) * 4, 66 - (v - ROD) * 4, 76 - (v - ROD) * 4];\n      if (c) B.set(c, (y * W + x) * 3);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  B.set(P.bg);\n  P.mask.fill(0);\n  const dy = round(P.dy);\n  const set = SETS[P.set];\n  const ex = 2 ** (-1.6 * P.sol);\n  // The glass rod across the rim, lifted with the strips.\n  const ROW = [[150, 180, 175], [70, 96, 92], [34, 48, 46]];\n  for (let r = 0; r \u003c 3; r++) {\n    const y = ROD + r - dy;\n    if (y \u003c 0) continue;\n    for (let x = 0; x \u003c W; x++) B.set(r === 0 && x > 6 && x \u003c 20 ? [226, 244, 238] : ROW[r], (y * W + x) * 3);\n  }\n  if (P.phase !== EMPTY) for (let j = 0; j \u003c P.n; j++) strip(P, j, set[P.perm[j]], ex);\n  // The solvent surface glints, and rings run out where drops land and feet\n  // go in.\n  const t = P.clock;\n  for (let x = XL; x \u003c= XR; x++) {\n    let s = 0.55 + 0.45 * sin(x * 0.8 + t * 2.1) * sin(x * 0.31 - t * 1.3 + 1);\n    for (const [rx, age] of P.rip) s += 1.4 * (1 - age / 0.9) * exp(-((abs(x - rx) - 4 - 16 * age) ** 2) / 3);\n    const o = (YS * W + x) * 3;\n    const k = P.mask[YS * W + x] ? 0.4 : 1;\n    B[o] += 54 * s * k;\n    B[o + 1] += 80 * s * k;\n    B[o + 2] += 92 * s * k;\n    for (let y = YS + 1; y \u003c YB; y++) {\n      const c = 6 * sin(x * 0.6 + y * 1.7 - t * 1.6) * sin(x * 0.23 + t * 0.9);\n      const q = (y * W + x) * 3;\n      B[q] += c;\n      B[q + 1] += c * 1.4;\n      B[q + 2] += c * 1.6;\n    }\n  }\n  for (const [x, y] of P.drops) {\n    const o = (round(y) * W + round(x)) * 3;\n    if (y >= 0) B.set([170, 200, 220], o);\n  }\n  const O = P.ov;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, B[o] + O[o]), min(255, B[o + 1] + O[o + 1]), min(255, B[o + 2] + O[o + 2]));\n  }\n}\n","layer":{"id":"layer-chromatography","type":"code","name":"chromatography","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Chromatography\n// Family:  chemistry\n// Idea:    Strips of filter paper hang from a glass rod in a tall glass tank on a lab bench, the solvent climbs them from a shallow pool, and the ink spot on each pencil start line splits into coloured bands that rise at their own speeds until the strips are lifted out and fresh ones go in.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the paper chromatography of the school chemistry lab\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Inks=0..3, Speed=0.2..3, Strips=3..6, Solvent=-1..1\n//\n// Knob 1: Inks. What is spotted on the strips: felt-tip pens at 0 (black splits into yellow, magenta, cyan and violet, green into yellow and blue, brown into orange and blue-grey), the food dyes of sugar-coated sweets at 1, a leaf extract at 2 (orange carotene running near the front, yellow xanthophyll, blue-green and olive chlorophylls), fountain-pen inks at 3.\n// Knob 2: Speed. How fast the solvent climbs: at 2 the front takes about 15 s from the pool to the top, slowing as it goes as a wick does, and fresh strips go in every 19 s; at 0.2 it creeps.\n// Knob 3: Strips. How many strips hang from the rod, three wide ones at 3 up to six narrow ones at 6.\n// Knob 4: Solvent. How polar the solvent is: near 0 the bands spread out over the whole run; towards -1 most of the dyes stay down by the start line, towards 1 they all crowd up behind the front, and the wetter paper of a watery solvent reads darker.\n// Buttons: K1 tap lifts the strips out of the tank now and hangs fresh ones.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the glass, and the rows things sit on. Strips are drawn in their own\n// rows, so lifting them is one offset.\nconst XL = 3;\nconst XR = 60;\nconst TOP = 2;\nconst ROD = 3;\nconst RIM = 7;\nconst LABEL = 13;\nconst Y0 = 99;\nconst YS = 106;\nconst FOOT = 110;\nconst YB = 113;\nconst BENCH = 117;\n// The front climbs from the solvent surface; it stops HMAX rows above it.\nconst HO = YS - Y0;\nconst HMAX = 84;\nconst T = 15;\nconst EXP = 0.7;\nconst [RUN, LIFT, EMPTY, LOWER] = [0, 1, 2, 3];\nconst DUR = [0, 1.8, 0.9, 1.7];\nconst LIFT_H = 126;\nconst DRY = [238, 236, 226];\nconst WET = [100, 114, 130];\n// Pencil digits, 3x5, one hex digit a row.\nconst DIG = [\"26227\", \"71747\", \"71717\", \"55711\", \"74717\", \"74757\"];\n\nconst { min, max, round, floor, exp, sin, abs, sqrt } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// Each ink: the colour of the spot as it goes on, how much of it stays behind\n// at the start line, and its dyes as [r, g, b, affinity, strength]. Affinity\n// is the dye's Rf in a balanced solvent: how far up the wet paper it gets as\n// a share of the solvent front.\nconst SETS = [\n  // Felt-tip pens, run in water.\n  [\n    [[34, 30, 40], 0.28, [[255, 212, 0, 0.88, 1], [255, 40, 160, 0.64, 1], [0, 190, 255, 0.44, 1], [130, 56, 255, 0.22, 1]]],\n    [[24, 120, 52], 0.15, [[220, 240, 0, 0.8, 1], [20, 90, 255, 0.38, 1]]],\n    [[100, 56, 24], 0.32, [[255, 128, 0, 0.74, 1], [104, 134, 196, 0.3, 1]]],\n    [[30, 60, 200], 0.15, [[0, 204, 255, 0.68, 1], [126, 64, 255, 0.3, 1]]],\n    [[100, 30, 130], 0.2, [[255, 40, 176, 0.7, 1], [40, 84, 255, 0.36, 1]]],\n    [[240, 110, 20], 0.12, [[255, 222, 0, 0.82, 1], [255, 64, 112, 0.52, 1]]],\n  ],\n  // The sugar shells of sweets, run in salt water.\n  [\n    [[40, 170, 60], 0.1, [[240, 232, 0, 0.82, 1], [0, 112, 255, 0.62, 1]]],\n    [[220, 30, 50], 0.12, [[255, 30, 72, 0.5, 1], [255, 172, 0, 0.78, 0.9]]],\n    [[130, 40, 140], 0.12, [[255, 40, 92, 0.48, 1], [30, 92, 255, 0.66, 1]]],\n    [[255, 120, 20], 0.1, [[255, 216, 0, 0.84, 1], [255, 52, 60, 0.52, 0.9]]],\n    [[110, 60, 30], 0.18, [[255, 40, 72, 0.46, 0.9], [255, 210, 0, 0.8, 1], [20, 100, 255, 0.64, 0.9]]],\n    [[20, 90, 230], 0.1, [[0, 120, 255, 0.66, 1], [0, 224, 200, 0.9, 0.55]]],\n  ],\n  // Leaves ground in acetone and run in petroleum ether.\n  [\n    [[30, 90, 30], 0.22, [[255, 150, 0, 0.95, 0.8], [240, 222, 30, 0.62, 0.9], [0, 190, 130, 0.42, 1], [130, 200, 20, 0.28, 0.9]]],\n    [[110, 20, 60], 0.3, [[230, 0, 120, 0.06, 1], [240, 222, 30, 0.62, 0.7], [0, 190, 130, 0.42, 0.8]]],\n    [[170, 80, 20], 0.26, [[255, 140, 0, 0.95, 1], [250, 224, 20, 0.62, 1], [160, 84, 30, 0.1, 0.8]]],\n    [[40, 120, 30], 0.18, [[0, 196, 120, 0.42, 1], [140, 210, 20, 0.28, 1], [255, 160, 0, 0.95, 0.6]]],\n    [[90, 30, 50], 0.28, [[200, 0, 140, 0.08, 0.9], [0, 180, 130, 0.42, 0.9], [255, 150, 0, 0.95, 0.6]]],\n    [[36, 100, 36], 0.2, [[255, 150, 0, 0.95, 0.7], [240, 222, 30, 0.62, 0.8], [0, 190, 130, 0.42, 0.9], [130, 200, 20, 0.28, 0.8]]],\n  ],\n  // Fountain-pen inks, run in water.\n  [\n    [[30, 50, 200], 0.15, [[40, 90, 255, 0.55, 1], [150, 60, 255, 0.3, 0.9], [255, 90, 200, 0.82, 0.5]]],\n    [[30, 30, 36], 0.25, [[255, 200, 0, 0.78, 0.9], [0, 180, 255, 0.56, 1], [230, 30, 150, 0.38, 1]]],\n    [[0, 150, 190], 0.1, [[0, 220, 255, 0.62, 1], [180, 255, 40, 0.86, 0.5]]],\n    [[200, 20, 40], 0.12, [[255, 30, 120, 0.72, 1], [255, 120, 0, 0.48, 1]]],\n    [[20, 140, 90], 0.12, [[0, 200, 230, 0.68, 1], [230, 230, 0, 0.44, 1]]],\n    [[110, 30, 200], 0.15, [[255, 40, 200, 0.66, 1], [60, 60, 255, 0.4, 1]]],\n  ],\n];\n\n// How far each kind of ink streaks back to the start line: leaf extracts\n// smear the most.\nconst TAIL = [0.4, 0.32, 0.6, 0.45];\n\nfunction layout(P, n) {\n  P.n = n;\n  P.sw = [12, 10, 8, 7][n - 3];\n  const gap = (XR - XL + 1 - n * P.sw) / (n + 1);\n  for (let j = 0; j \u003c n; j++) P.sx[j] = XL + round(gap * (j + 1) + P.sw * j);\n}\n\n// Fresh strips: each wicks at its own rate, with its own ragged front and\n// spot, and after the first set the inks go on in a new order.\nfunction fresh(P, shuffle) {\n  P.t = 0;\n  P.maxf = 0;\n  for (const S of P.st) {\n    S.f = 0.93 + rnd() * 0.13;\n    P.maxf = max(P.maxf, S.f);\n    S.spot = rnd();\n    S.ph = rnd() * 6.28;\n    let a = 0;\n    for (let i = 0; i \u003c 14; i++) S.rag[i] = a = a * 0.55 + (rnd() - 0.5) * 1.8;\n    for (let i = 0; i \u003c 5; i++) S.jit[i] = (rnd() - 0.5) * 0.05;\n  }\n  if (shuffle)\n    for (let j = 5; j > 0; j--) {\n      const i = floor(rnd() * (j + 1));\n      [P.perm[i], P.perm[j]] = [P.perm[j], P.perm[i]];\n    }\n}\n\n// The room behind, the tank and the bench, painted once. Glass in front of\n// the strips goes in an overlay added last.\nfunction paint(P) {\n  const B = (P.bg = new Float32Array(N * 3));\n  const O = (P.ov = new Float32Array(N * 3));\n  const put = (A, x, y, c) => A.set(c, (y * W + x) * 3);\n  for (let y = 0; y \u003c BENCH; y++)\n    for (let x = 0; x \u003c W; x++) {\n      // White wall tiles of the lab, dimmed again through two panes of glass.\n      const grout = x % 9 === 4 || y % 9 === 2;\n      const inTank = x >= 1 && x \u003c= 62 && y >= RIM;\n      let c = grout ? [12, 12, 14] : [27, 27, 30];\n      if (inTank) c = grout ? [8, 12, 13] : [15, 21, 23];\n      put(B, x, y, c);\n    }\n  // The pool: shallow solvent over the glass floor.\n  for (let y = YS; y \u003c YB; y++)\n    for (let x = XL; x \u003c= XR; x++) {\n      const d = (y - YS) / (YB - YS);\n      put(B, x, y, [24 + 6 * d, 42 + 8 * d, 54 + 6 * d]);\n    }\n  for (let x = 1; x \u003c= 62; x++) {\n    put(B, x, YB, [92, 132, 122]);\n    put(B, x, YB + 1, [40, 70, 62]);\n    put(B, x, YB + 2, [34, 60, 53]);\n    put(B, x, YB + 3, [74, 104, 96]);\n  }\n  for (let y = YS; y \u003c YB; y++) for (const x of [1, 2, 61, 62]) put(B, x, y, x === 1 || x === 62 ? [44, 70, 64] : [30, 50, 56]);\n  // The bench: a varnished hardwood top and its front edge.\n  for (let y = BENCH; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 0.86 + 0.14 * sin(x * 0.23 + y * 2.9 + 2.2 * sin(x * 0.07 + y)) + ((x * 7 + y * 13) % 5) * 0.012;\n      let c;\n      if (y === 122) c = [178, 114, 62];\n      else if (y \u003c 122) c = [132 * g, 80 * g, 40 * g];\n      else c = [88 * g, 50 * g, 24 * g];\n      if (y === BENCH && x >= 1 && x \u003c= 62) c = [60, 34, 17];\n      if (y === BENCH + 1 && x >= 2 && x \u003c= 61) c = c.map((v) => v * 0.8);\n      put(B, x, y, c);\n    }\n  // Glass: the front rim, the side walls catching the lab light from the left,\n  // and two faint streaks of reflection on the front pane.\n  for (let x = 1; x \u003c= 62; x++) {\n    put(O, x, RIM, [46, 66, 62]);\n    put(O, x, RIM + 1, [12, 18, 17]);\n  }\n  for (let y = RIM; y \u003c YB; y++) {\n    const fall = 1 - y / 200;\n    const streak = y > 14 && y \u003c 52 ? 1 : 0;\n    put(O, 1, y, [(40 + 44 * streak) * fall, (62 + 60 * streak) * fall, (58 + 56 * streak) * fall]);\n    put(O, 2, y, [12, 18, 17]);\n    put(O, 61, y, [8, 12, 12]);\n    put(O, 62, y, [28, 42, 40]);\n  }\n  for (let y = 16; y \u003c 84; y++) {\n    const x = round(56 - (y - 16) * 0.32);\n    for (let i = 0; i \u003c 3; i++) {\n      O[(y * W + x) * 3 + i] += 9;\n      O[(y * W + x - 3) * 3 + i] += 5;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.buf = new Float32Array(N * 3);\n  P.st = Array.from({ length: 6 }, () => ({ rag: new Float32Array(14), jit: new Float32Array(5) }));\n  P.perm = [0, 1, 2, 3, 4, 5];\n  P.sx = [0, 0, 0, 0, 0, 0];\n  P.h = new Float32Array(6);\n  P.fa = new Float32Array(14);\n  P.dye = new Float32Array(5 * 6);\n  P.mask = new Uint8Array(N);\n  P.drops = [];\n  P.rip = [];\n  paint(P);\n  fresh(P, false);\n  // Open with the front 32 rows up the strips, so the bands have begun to part.\n  P.t = 0.25 * T;\n  Object.assign(P, { n: 0, sw: 12, phase: RUN, pt: 0, dy: 0, clock: 0, set: 0, rate: 1, sol: 0 });\n}\n\n// Fresh strips are dry until their feet are in the pool.\nfunction fronts(P) {\n  for (let j = 0; j \u003c 6; j++) P.h[j] = P.phase === LOWER ? -9 : HMAX * min(1, (P.t * P.st[j].f) / T) ** EXP;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.set = clamp(round(k[0]), 0, 3);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  const n = clamp(round(k[2]), 3, 6);\n  if (n !== P.n) layout(P, n);\n  P.sol = clamp(k[3], -1, 1);\n  P.clock += dt;\n  if (input.btnPressed && input.btnPressed[0] && P.phase === RUN) [P.phase, P.pt] = [LIFT, 0];\n  const r = P.rate;\n  if (P.phase === RUN) {\n    P.t += dt * r;\n    if (P.t * P.maxf >= T) [P.phase, P.pt] = [LIFT, 0];\n  } else {\n    P.pt += dt * max(r, 0.7);\n    const q = min(1, P.pt / DUR[P.phase]);\n    if (P.phase === LIFT) {\n      P.dy = LIFT_H * q * q;\n      // The feet drip as they come out of the pool.\n      const foot = FOOT - P.dy;\n      if (foot \u003c YS && foot > YS - 30)\n        for (let j = 0; j \u003c P.n; j++)\n          if (rnd() \u003c dt * 7) P.drops.push([P.sx[j] + 1 + rnd() * (P.sw - 2), foot, 0]);\n    } else if (P.phase === LOWER) P.dy = LIFT_H * (1 - q) * (1 - q);\n    if (q >= 1) {\n      if (P.phase === EMPTY) fresh(P, true);\n      if (P.phase === LOWER) for (let j = 0; j \u003c P.n; j++) P.rip.push([P.sx[j] + P.sw / 2, 0]);\n      P.phase = (P.phase + 1) % 4;\n      P.pt = 0;\n      if (P.phase === RUN) P.dy = 0;\n    }\n  }\n  fronts(P);\n  for (const d of P.drops) {\n    d[2] += 160 * dt;\n    d[1] += d[2] * dt;\n    if (d[1] >= YS) P.rip.push([d[0], 0]);\n  }\n  P.drops = P.drops.filter((d) => d[1] \u003c YS);\n  for (const p of P.rip) p[1] += dt;\n  P.rip = P.rip.filter((p) => p[1] \u003c 0.9);\n}\n\n// One strip, in its own rows v (screen row y = v - dy).\nfunction strip(P, j, ink, ex) {\n  const B = P.buf;\n  const S = P.st[j];\n  const x0 = P.sx[j];\n  const w = P.sw;\n  const hw = w / 2;\n  const h = P.h[j];\n  const D = max(0, h - HO);\n  const dy = round(P.dy);\n  const wet = WET.map((c) => c * (1 - 0.2 * P.sol));\n  for (let i = 0; i \u003c w; i++) {\n    const e = (i + 0.5 - hw) / hw;\n    // Faster in the middle, and more ragged the further it has come.\n    P.fa[i] = h + (0.5 + 0.04 * h) * (1 - e * e) + S.rag[i] * (0.25 + h / HMAX) + 0.3 * sin(i * 1.3 + P.clock * 0.8 + S.ph);\n  }\n  const dyes = ink[2];\n  const nd = dyes.length;\n  const dv = P.dye;\n  for (let q = 0; q \u003c nd; q++) {\n    const rf = clamp(dyes[q][3] + S.jit[q], 0.02, 0.97) ** ex;\n    const c = rf * D;\n    const sig = 1.2 + 0.065 * c + 0.6 * S.spot;\n    dv.set([rf, 1 / (0.6 * sig), dyes[q][4] * min(1, 2.4 / (1.4 + 0.35 * sig)), min(hw - 0.6, 2.6 + 0.12 * c + S.spot), 1 / (1.7 * sig), sig], q * 6);\n  }\n  const spotC = ink[0];\n  const fade = D \u003c= 0 ? 1 : max(ink[1], exp(-D / 4));\n  const rs = 1.2 + 0.9 * S.spot;\n  const dig = DIG[j];\n  const tail = TAIL[P.set];\n  for (let v = TOP; v \u003c= FOOT; v++) {\n    const y = v - dy;\n    if (y \u003c 0 || y >= YB) continue;\n    const ly = 1 - (0.1 * v) / 110;\n    for (let i = 0; i \u003c w; i++) {\n      const x = x0 + i;\n      const p = y * W + x;\n      const o = p * 3;\n      P.mask[p] = 1;\n      const e = (i + 0.5 - hw) / hw;\n      let L = (1.03 - 0.07 * e - (i === w - 1 ? 0.12 : 0)) * ly;\n      // The fold over the rod and the shade the clip throws.\n      if (v === TOP) L *= 1.06;\n      else if (v \u003c= RIM + 1) L *= 0.9;\n      else if (v === RIM + 2) L *= 0.78;\n      const fa = P.fa[i];\n      const dist = v - (YS - fa);\n      const wt = clamp((dist + 0.5) / 2.5, 0, 1);\n      let r = (DRY[0] + (wet[0] - DRY[0]) * wt) * L;\n      let g = (DRY[1] + (wet[1] - DRY[1]) * wt) * L;\n      let b = (DRY[2] + (wet[2] - DRY[2]) * wt) * L;\n      // The front itself: a thin darker line where the dirt in the solvent\n      // collects.\n      if (dist > -2 && dist \u003c 3.2) {\n        const fl = exp(-(((dist - 0.6) / 0.8) ** 2));\n        r *= 1 - 0.22 * fl;\n        g *= 1 - 0.24 * fl;\n        b *= 1 - 0.34 * fl;\n      }\n      // Wet paper lets the grout of the wall behind show through.\n      if (wt > 0 && (x % 9 === 4 || y % 9 === 2)) {\n        r *= 1 - 0.1 * wt;\n        g *= 1 - 0.1 * wt;\n        b *= 1 - 0.08 * wt;\n      }\n      if (v > Y0) {\n        r *= 1 - 0.08 * wt;\n        g *= 1 - 0.08 * wt;\n        b *= 1 - 0.06 * wt;\n      }\n      // Pencil: the start line and the strip's number.\n      if (v === Y0 && (i + j) % 7 !== 3) [r, g, b] = [r * 0.6 + 24, g * 0.6 + 24, b * 0.6 + 28];\n      const di = i - floor(hw) + 1;\n      if (v >= LABEL && v \u003c LABEL + 5 && di >= 0 && di \u003c 3 && (parseInt(dig[v - LABEL], 16) >> (2 - di)) & 1) [r, g, b] = [r * 0.5 + 20, g * 0.5 + 20, b * 0.5 + 24];\n      // The spot as it went on, dissolving once the solvent reaches it.\n      const ds = abs(v - Y0) \u003c 3 ? clamp(rs + 0.5 - sqrt((i + 0.5 - hw) ** 2 + ((v - Y0) * 1.15) ** 2), 0, 1) * fade * 0.9 : 0;\n      if (ds > 0) {\n        r += (spotC[0] * L - r) * ds;\n        g += (spotC[1] * L - g) * ds;\n        b += (spotC[2] * L - b) * ds;\n      }\n      // The bands: a sharp, bright leading edge and a long soft tail back to\n      // the start line.\n      if (D > 0 && wt > 0) {\n        const u = Y0 - v;\n        const Dx = max(0, fa - HO);\n        const ax = abs(i + 0.5 - hw);\n        for (let q = 0, k = 0; q \u003c nd; q++, k += 6) {\n          const hx = clamp((dv[k + 3] + 0.6 - ax) / 1.2, 0, 1);\n          if (hx \u003c= 0) continue;\n          const c = dv[k] * Dx;\n          const du = u - c;\n          let pr = 0;\n          if (du >= 0) {\n            const z = du * dv[k + 1];\n            if (z \u003c 3) pr = exp(-z * z);\n          } else {\n            const z = du * dv[k + 4];\n            pr = (z > -3 ? exp(-z * z) : 0) + (u > 0 ? tail * sqrt(u / c) : 0);\n          }\n          const A = dv[k + 2] * hx;\n          const d = A * pr * wt;\n          if (d \u003c 0.01) continue;\n          const m = min(0.95, d);\n          const V = dyes[q];\n          const sig = dv[k + 5];\n          const zg = (du - 0.35 * sig) / (0.45 * sig);\n          const gl = zg > -3 && zg \u003c 3 ? 0.3 * A * exp(-zg * zg) : 0;\n          r += (V[0] * 0.92 * L - r) * m + V[0] * gl;\n          g += (V[1] * 0.92 * L - g) * m + V[1] * gl;\n          b += (V[2] * 0.92 * L - b) * m + V[2] * gl;\n        }\n      }\n      // Under the solvent the paper takes the pool's colour.\n      if (y >= YS) [r, g, b] = [r * 0.6, g * 0.76, b * 0.9];\n      B[o] = r;\n      B[o + 1] = g;\n      B[o + 2] = b;\n    }\n  }\n  // A bulldog clip holds the fold to the rod.\n  const cw = min(6, w - 2);\n  const c0 = x0 + round((w - cw) / 2);\n  for (let v = ROD - 1; v \u003c= RIM + 1; v++) {\n    const y = v - dy;\n    if (y \u003c 0 || y >= H) continue;\n    for (let x = c0; x \u003c c0 + cw; x++) {\n      let c;\n      if (v \u003c ROD + 1) c = x === c0 + 1 || x === c0 + cw - 2 ? [176, 180, 190] : null;\n      else if (v === ROD + 1) c = [150, 154, 166];\n      else c = [64 - (v - ROD) * 4, 66 - (v - ROD) * 4, 76 - (v - ROD) * 4];\n      if (c) B.set(c, (y * W + x) * 3);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  B.set(P.bg);\n  P.mask.fill(0);\n  const dy = round(P.dy);\n  const set = SETS[P.set];\n  const ex = 2 ** (-1.6 * P.sol);\n  // The glass rod across the rim, lifted with the strips.\n  const ROW = [[150, 180, 175], [70, 96, 92], [34, 48, 46]];\n  for (let r = 0; r \u003c 3; r++) {\n    const y = ROD + r - dy;\n    if (y \u003c 0) continue;\n    for (let x = 0; x \u003c W; x++) B.set(r === 0 && x > 6 && x \u003c 20 ? [226, 244, 238] : ROW[r], (y * W + x) * 3);\n  }\n  if (P.phase !== EMPTY) for (let j = 0; j \u003c P.n; j++) strip(P, j, set[P.perm[j]], ex);\n  // The solvent surface glints, and rings run out where drops land and feet\n  // go in.\n  const t = P.clock;\n  for (let x = XL; x \u003c= XR; x++) {\n    let s = 0.55 + 0.45 * sin(x * 0.8 + t * 2.1) * sin(x * 0.31 - t * 1.3 + 1);\n    for (const [rx, age] of P.rip) s += 1.4 * (1 - age / 0.9) * exp(-((abs(x - rx) - 4 - 16 * age) ** 2) / 3);\n    const o = (YS * W + x) * 3;\n    const k = P.mask[YS * W + x] ? 0.4 : 1;\n    B[o] += 54 * s * k;\n    B[o + 1] += 80 * s * k;\n    B[o + 2] += 92 * s * k;\n    for (let y = YS + 1; y \u003c YB; y++) {\n      const c = 6 * sin(x * 0.6 + y * 1.7 - t * 1.6) * sin(x * 0.23 + t * 0.9);\n      const q = (y * W + x) * 3;\n      B[q] += c;\n      B[q + 1] += c * 1.4;\n      B[q + 2] += c * 1.6;\n    }\n  }\n  for (const [x, y] of P.drops) {\n    const o = (round(y) * W + round(x)) * 3;\n    if (y >= 0) B.set([170, 200, 220], o);\n  }\n  const O = P.ov;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, B[o] + O[o]), min(255, B[o + 1] + O[o + 1]), min(255, B[o + 2] + O[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Inks=0..3, Speed=0.2..3, Strips=3..6, Solvent=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Inks","min":0,"max":3,"about":"What is spotted on the strips: felt-tip pens at 0 (black splits into yellow, magenta, cyan and violet, green into yellow and blue, brown into orange and blue-grey), the food dyes of sugar-coated sweets at 1, a leaf extract at 2 (orange carotene running near the front, yellow xanthophyll, blue-green and olive chlorophylls), fountain-pen inks at 3."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the solvent climbs: at 2 the front takes about 15 s from the pool to the top, slowing as it goes as a wick does, and fresh strips go in every 19 s; at 0.2 it creeps."},{"name":"Strips","min":3,"max":6,"about":"How many strips hang from the rod, three wide ones at 3 up to six narrow ones at 6."},{"name":"Solvent","min":-1,"max":1,"about":"How polar the solvent is: near 0 the bands spread out over the whole run; towards -1 most of the dyes stay down by the start line, towards 1 they all crowd up behind the front, and the wetter paper of a watery solvent reads darker."}],"start":[0,2,3,0.06],"measures":{"motion":0.0352,"detail":0.0646,"edges":0.3051,"complexity":1.2207,"coverage":0.7347,"colour":0.2232,"drift":0.0399},"knobResponse":[0.0454,0.0548,0.2236,0.048]},{"slug":"circuit-board","title":"Circuit Board","family":"circuit","round":17,"note":"회로 기판이 패널을 다 채우고, Lee 의 미로 라우터가 프로세서와 메모리 둘, 플래시, 크리스털, 금도금 단자 사이에 구리 선 47개를 곧게, 또 45도로 깔아요. 버스에는 펄스 열이 나란히 달리고 바쁜 선은 신호 색으로 데워지며, K1 을 누르면 기판이 꺼졌다가 부팅해요.","idea":"A circuit board fills the panel with copper a maze router lays in setup between a processor, two memory chips, a flash chip, a crystal and the gold fingers of an edge connector, and signals run along the traces as bright pulses while four status LEDs answer the traffic.","buttons":"K1 tap resets the board: it goes dark, the power LED comes on, the crystal starts, the processor reads the flash, walks a one across both memory buses and brings the link up.","code":"// ===== Patternflow pattern =====\n// Title:   Circuit Board\n// Family:  circuit\n// Idea:    A circuit board fills the panel with copper a maze router lays in setup between a processor, two memory chips, a flash chip, a crystal and the gold fingers of an edge connector, and signals run along the traces as bright pulses while four status LEDs answer the traffic.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: C. Y. Lee's maze router (\"An algorithm for path connections and its applications\", 1961), here with 45-degree moves\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Mask=0..1, Clock=0.5..4, Traffic=0..1, Glow=0..1\n//\n// Knob 1: Mask. The colour of the solder mask: green at 0, then blue, red, matte black and purple at 1.\n// Knob 2: Clock. How fast the board runs: at 2 the crystal ticks six times a second and a pulse covers 32 LEDs a second, at 0.5 a quarter of that, at 4 twice.\n// Knob 3: Traffic. At 0 the processor works through its program in spells of 2.4 s (loading from the flash, computing in memory, input and output, a rest, a copy out to the connector); turned up, the quiet buses fill until at 1 every bus carries trains back to back.\n// Knob 4: Glow. How far the light of a pulse spreads through the mask, and how long a busy trace stays warm after it, from one second to three.\n// Buttons: K1 tap resets the board: it goes dark, the power LED comes on, the crystal starts, the processor reads the flash, walks a one across both memory buses and brings the link up.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// What each LED of the bare board is: mask (0) over bare board, over a trace\n// or over the pour, or a part coloured from FIX.\nconst TRACE = 1;\nconst POUR = 2;\nconst PAD = 3;\nconst CHIP = 4;\nconst SILK = 5;\nconst HOLE = 6;\nconst GOLD = 7;\nconst RES = 8;\nconst LENS = 9;\nconst CAN = 10;\nconst BASE = 11;\nconst VIA = 12;\nconst ETCH = 13;\nconst FIX = [[196, 196, 186], [30, 30, 34], [222, 222, 208], [0, 0, 0], [228, 172, 52], [24, 24, 24], [120, 122, 112], [212, 214, 220], [36, 36, 40], [170, 170, 152], [92, 92, 98]];\n// Solder mask over bare board and over copper, for the five stops of K1.\nconst MASKS = [\n  [[10, 70, 34], [44, 124, 52]],\n  [[8, 32, 96], [38, 84, 170]],\n  [[96, 12, 14], [164, 50, 40]],\n  [[16, 17, 19], [46, 50, 52]],\n  [[56, 16, 86], [112, 58, 154]],\n];\n// Signal light: data, clock, connector, flash, LED drive.\nconst SIG = [[255, 196, 80], [90, 225, 255], [255, 110, 215], [150, 255, 110], [255, 255, 240]];\n// Status LEDs (power, heartbeat, connector, memory): lens top and colour lit.\nconst LENS_AT = [[39, 24], [31, 30], [33, 30], [35, 30]];\nconst LED_ON = [[60, 255, 90], [255, 50, 40], [255, 176, 30], [70, 130, 255]];\n// The program, as spells of 2.4 s at Clock 2 (load, compute, input and output,\n// rest, copy), each the load on buses A and B (memory), C (connector), L and\n// R (memory to connector) and S (flash).\nconst WORK = [[1.5, 0.3, 0.2, 0.1, 0.1, 3], [2.6, 2.6, 0.2, 0.1, 0.1, 0.2], [0.3, 0.3, 2.6, 1.8, 1.8, 0.2], [0.15, 0.15, 0.2, 0.1, 0.1, 0.2], [2, 2, 2.4, 2.5, 2.5, 0.2]];\nconst COPY = 4;\n// The router's moves: straight steps cost 5, diagonal ones 7, so a route is\n// straight runs joined by 45-degree runs.\nconst DX = [1, 0, -1, 0, 1, -1, -1, 1];\nconst DY = [0, 1, 0, -1, 1, 1, -1, -1];\n// Bits on a bus are 4 LEDs apart; a pulse's tail is 2 LEDs.\nconst GAP = 4;\nconst TAIL = 2;\n// A 3x5 font for the markings on the chips.\nconst FONT = { U: 0x5b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9 };\n\nfunction inside(x, y) {\n  return x >= 0 && y >= 0 && x \u003c W && y \u003c H;\n}\n\nfunction put(P, x, y, m, s) {\n  if (!inside(x, y)) return;\n  P.mat[y * W + x] = m;\n  P.shade[y * W + x] = s || 1;\n}\n\n// Copper keeps every other net one LED away: blk holds the net that may pass\n// each LED, 0 for any and -1 for none.\nfunction claim(P, x, y, net) {\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      if (!inside(x + i, y + j)) continue;\n      const k = (y + j) * W + x + i;\n      if (!P.blk[k]) P.blk[k] = net;\n      else if (P.blk[k] !== net) P.blk[k] = -1;\n    }\n}\n\nfunction copper(P, x, y, net) {\n  claim(P, x, y, net);\n  P.blk[y * W + x] = net;\n}\n\nfunction block(P, x0, y0, x1, y1) {\n  for (let y = y0 - 1; y \u003c= y1 + 1; y++) for (let x = x0 - 1; x \u003c= x1 + 1; x++) if (inside(x, y)) P.blk[y * W + x] = -1;\n}\n\nfunction pad(P, x, y, net, s) {\n  put(P, x, y, PAD, s);\n  copper(P, x, y, net);\n}\n\nfunction reserve(P, x, y, net) {\n  const v = P.blk[y * W + x];\n  if (!v || v === net) copper(P, x, y, net);\n}\n\n// A gull-wing lead. The LED in front of its tip is kept for its own net and\n// the others round the tip are shut, so the route leaves straight out.\nfunction lead(P, x, y, dx, dy, net) {\n  for (let i = 0; i \u003c 3; i++) pad(P, x + dx * i, y + dy * i, net, i === 2 ? 0.7 : 1);\n  reserve(P, x - dx, y - dy, net);\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      const k = (y + j) * W + x + i;\n      if ((i || j) && (i !== -dx || j !== -dy) && (i !== dx || j !== dy) && inside(x + i, y + j) && (!P.blk[k] || P.blk[k] === net)) P.blk[k] = -1;\n    }\n  return [x, y];\n}\n\nfunction chip(P, x0, y0, x1, y1) {\n  block(P, x0, y0, x1, y1);\n  for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) put(P, x, y, CHIP, y === y0 || x === x0 ? 1.45 : y === y1 || x === x1 ? 0.7 : 1);\n}\n\nfunction text(P, s, x, y) {\n  for (const ch of s) {\n    for (let b = 0; b \u003c 15; b++) if (FONT[ch] & (1 \u003c\u003c (14 - b))) put(P, x + (b % 3), y + Math.floor(b / 3), ETCH);\n    x += 4;\n  }\n}\n\nfunction via(P, x, y, net) {\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      put(P, x + i, y + j, i || j ? VIA : HOLE, i && j ? 0.8 : 1);\n      copper(P, x + i, y + j, net);\n    }\n}\n\n// A resistor and a LED in a line, from the resistor's far pad at y0 to the\n// LED's, which is ground, eight rows on in direction dy.\nfunction ledPair(P, x, y0, dy, net, inner) {\n  pad(P, x, y0, net);\n  for (let i = 3; i \u003c= 5; i++) pad(P, x, y0 + dy * i, inner);\n  put(P, x, y0 + dy * 4, TRACE);\n  pad(P, x, y0 + dy * 8, 1);\n  for (const [i, m] of [[1, RES], [2, RES], [6, LENS], [7, LENS]]) {\n    put(P, x, y0 + dy * i, m);\n    P.blk[(y0 + dy * i) * W + x] = -1;\n  }\n}\n\n// Lee's wave: every LED the net may cross gets its distance from the start,\n// cheapest first, until the wave reaches the end; the route is read back\n// from the end, keeping its direction where it can. With `diag` its first\n// turn is a diagonal, so a fan to the wider fingers jogs where there is room.\nfunction route(P, net, a, b, diag) {\n  const dist = P.dist;\n  const blk = P.blk;\n  const ring = P.ring;\n  dist.fill(1e9);\n  for (const q of ring) q.length = 0;\n  const s = a[1] * W + a[0];\n  const t = b[1] * W + b[0];\n  dist[s] = 0;\n  ring[0].push(s);\n  let pending = 1;\n  for (let d = 0; pending > 0 && d \u003c= dist[t]; d++) {\n    const q = ring[d & 7];\n    while (q.length) {\n      const u = q.pop();\n      pending--;\n      if (dist[u] !== d) continue;\n      const x = u % W;\n      const y = (u - x) / W;\n      for (let k = 0; k \u003c 8; k++) {\n        const v = u + DY[k] * W + DX[k];\n        if (!inside(x + DX[k], y + DY[k]) || (blk[v] && blk[v] !== net)) continue;\n        const nd = d + (k \u003c 4 ? 5 : 7);\n        if (nd \u003c dist[v]) {\n          dist[v] = nd;\n          ring[nd & 7].push(v);\n          pending++;\n        }\n      }\n    }\n  }\n  if (dist[t] >= 1e9) return null;\n  const path = [t];\n  let last = -1;\n  for (let u = t; u !== s; ) {\n    const x = u % W;\n    const y = (u - x) / W;\n    let best = -1;\n    let bk = -1;\n    let score = -1;\n    for (let k = 0; k \u003c 8; k++) {\n      const p = u - DY[k] * W - DX[k];\n      if (!inside(x - DX[k], y - DY[k]) || dist[p] + (k \u003c 4 ? 5 : 7) !== dist[u]) continue;\n      const sc = (k === last ? 4 : 0) + (k \u003c 4 ? 1 : 0) + (diag && k >= 4 ? 6 : 0);\n      if (sc > score) {\n        score = sc;\n        best = p;\n        bk = k;\n      }\n    }\n    path.push(best);\n    u = best;\n    last = bk;\n    if (bk >= 4) diag = false;\n  }\n  for (const c of path) {\n    copper(P, c % W, Math.floor(c / W), net);\n    if (!P.mat[c]) P.mat[c] = TRACE;\n  }\n  return Int16Array.from(path.reverse());\n}\n\nfunction buildBoard(P) {\n  const jobs = [];\n  let id = 2;\n  const net = (cls, grp, line) => ({ id: id++, cls, grp, line });\n  // Short nets are routed first, then fans and buses, each line in the order\n  // that lets the next pass outside it.\n  const link = (n, a, b, o, diag) => jobs.push({ n, a, b, o: o || 9, diag });\n  const gnd = (a, x, y) => {\n    via(P, x, y, 1);\n    link({ id: 1, cls: -1 }, a, [x, y], 1);\n  };\n  // Mounting holes, plated, in the two top corners.\n  for (const cx of [4, 59]) {\n    block(P, cx - 3, 1, cx + 3, 7);\n    for (let y = 0; y \u003c= 8; y++)\n      for (let x = cx - 4; x \u003c= cx + 4; x++) {\n        const r = Math.hypot(x - cx, y - 4);\n        if (r \u003c 1.9) put(P, x, y, HOLE);\n        else if (r \u003c 3.4) put(P, x, y, PAD, 0.9 + 0.25 * Math.cos(Math.atan2(y - 4, x - cx) + 2.3));\n      }\n  }\n  // The processor, a QFP with nine leads a side, and two memory chips under it.\n  chip(P, 22, 44, 41, 63);\n  put(P, 24, 46, ETCH);\n  text(P, \"U1\", 28, 51);\n  chip(P, 1, 84, 20, 93);\n  chip(P, 43, 84, 62, 93);\n  text(P, \"U2\", 7, 87);\n  text(P, \"U3\", 49, 87);\n  // Memory buses: nine lines from each side of the processor down to the top\n  // leads of a memory chip, the innermost being that chip's clock.\n  for (const side of [0, 1])\n    for (let j = 8; j >= 0; j--) {\n      const n = net(j === 8 ? 1 : 0, side ? \"B\" : \"A\", j);\n      const a = side ? lead(P, 44, 45 + 2 * j, -1, 0, n.id) : lead(P, 19, 45 + 2 * j, 1, 0, n.id);\n      link(n, a, lead(P, side ? 60 - 2 * j : 3 + 2 * j, 81, 0, 1, n.id));\n    }\n  // Nineteen gold fingers, two LEDs wide, the outer two ground.\n  const finger = (i, nid) => {\n    const x0 = 4 + 3 * i;\n    for (let y = 116; y \u003c H; y++)\n      for (let x = x0; x \u003c= x0 + 1; x++) {\n        put(P, x, y, GOLD, y === 116 ? 0.75 : y === H - 1 ? 0.6 : x === x0 ? 1.1 : 0.9);\n        copper(P, x, y, nid);\n      }\n    return x0;\n  };\n  finger(0, 1);\n  finger(18, 1);\n  // Nine lines from the bottom of the processor fan out to the middle fingers.\n  for (let j = 0; j \u003c 9; j++) {\n    const n = net(2, \"C\", j);\n    const f = finger(5 + j, n.id);\n    reserve(P, f, 115, n.id);\n    link(n, lead(P, 23 + 2 * j, 66, 0, -1, n.id), [f, 116], 9, true);\n  }\n  // Four lines from each memory chip's bottom leads to the outer fingers.\n  for (const side of [0, 1])\n    for (let j = 0; j \u003c 9; j++) {\n      const x = side ? 60 - 2 * j : 3 + 2 * j;\n      if (j >= 1 && j \u003c= 4) {\n        const n = net(2, side ? \"R\" : \"L\", j - 1);\n        const a = lead(P, x, 96, 0, -1, n.id);\n        const f = finger(side ? 18 - j : j, n.id) + side;\n        reserve(P, f, 115, n.id);\n        link(n, a, [f, 116], 9, true);\n      } else if (j === 0) gnd(lead(P, x, 96, 0, -1, 1), side ? 61 : 2, 100);\n      else lead(P, x, 96, 0, -1, id++);\n    }\n  // The flash chip on its side at the top left; its four right leads take\n  // the processor's first four top leads, the lowest to the nearest.\n  chip(P, 4, 24, 11, 33);\n  text(P, \"U4\", 5, 27);\n  for (let j = 0; j \u003c 4; j++) {\n    const n = net(3, \"S\", j);\n    link(n, lead(P, 23 + 2 * j, 41, 0, 1, n.id), lead(P, 14, 32 - 2 * j, -1, 0, n.id), 4);\n    lead(P, 1, 32 - 2 * j, 1, 0, id++);\n  }\n  // Three status LEDs over the next three top leads; each top pad meets the pour.\n  P.ledNet = [{ id: 0, cls: 4, grp: \"D\", line: 0 }];\n  for (let k = 1; k \u003c 4; k++) {\n    const x = 29 + 2 * k;\n    const n = net(4, \"D\", k);\n    P.ledNet.push(n);\n    ledPair(P, x, 37, -1, n.id, id++);\n    link(n, lead(P, x, 41, 0, 1, n.id), [x, 37], 3);\n  }\n  // The crystal, a metal can on two pads, on the last two top leads.\n  block(P, 45, 34, 54, 38);\n  for (let y = 34; y \u003c= 38; y++)\n    for (let x = 45; x \u003c= 54; x++) if ((y - 34) % 4 || (x - 45) % 9) put(P, x, y, CAN, y === 35 ? 1.2 : y === 38 ? 0.62 : 0.9);\n  for (let j = 0; j \u003c 2; j++) {\n    const n = net(1, \"X\", j);\n    for (let y = 35; y \u003c= 37; y++) for (let x = 42 + 14 * j; x \u003c= 43 + 14 * j; x++) pad(P, x, y, n.id);\n    link(n, lead(P, 37 + 2 * j, 41, 0, 1, n.id), j ? [56, 37] : [42, 36], 2);\n  }\n  // The regulator, a SOT-223 under its tab, between two electrolytic capacitors.\n  chip(P, 27, 8, 36, 12);\n  for (let y = 3; y \u003c= 6; y++) for (let x = 28; x \u003c= 35; x++) pad(P, x, y, 1, y === 3 ? 0.8 : 1);\n  const vin = id++;\n  const vout = id++;\n  for (let k = 0; k \u003c 3; k++)\n    for (let y = 14; y \u003c= 16; y++) for (let i = 0; i \u003c 2; i++) pad(P, 28 + 3 * k + i, y, [vin, 1, vout][k], y === 14 ? 0.7 : 1);\n  for (const [cx, side] of [[14, 0], [49, 1]]) {\n    block(P, cx - 5, 6, cx + 5, 16);\n    for (let y = 6; y \u003c= 16; y++)\n      for (let x = cx - 5; x \u003c= cx + 5; x++) {\n        const r = Math.hypot(x - cx, y - 11);\n        if (Math.abs(x - cx) + Math.abs(y - 11) > 8) continue;\n        if (r \u003c 4.3) put(P, x, y, CAN, 1.05 - 0.05 * r + 0.12 * Math.cos(Math.atan2(y - 11, x - cx) + 2.3) - (x === cx || y === 11 ? 0.28 : 0));\n        else put(P, x, y, BASE);\n      }\n    // Its tabs: the plus side to the regulator, the other to ground.\n    for (let y = 10; y \u003c= 12; y++)\n      for (let i = 0; i \u003c 2; i++) {\n        pad(P, cx - 7 + i, y, side ? vout : 1);\n        pad(P, cx + 6 + i, y, side ? 1 : vin);\n      }\n  }\n  // The power LED hangs under its resistor beside the regulator.\n  P.ledNet[0].id = vout;\n  ledPair(P, 39, 18, 1, vout, id++);\n  link({ id: vin, cls: 4 }, [28, 16], [21, 12], 2);\n  link({ id: vout, cls: 4 }, [35, 16], [42, 12], 2);\n  link(P.ledNet[0], [35, 16], [39, 18], 3);\n  // Route in that order; a net the router cannot reach is left off the board.\n  jobs.sort((a, b) => a.o - b.o);\n  P.routes = [];\n  P.group = {};\n  let off = 0;\n  for (const { n, a, b, diag } of jobs) {\n    const cells = route(P, n.id, a, b, diag);\n    if (!cells || n.cls \u003c 0) continue;\n    const r = { cells, n: cells.length, o: off, cls: n.cls, grp: n.grp, line: n.line };\n    off += r.n;\n    P.routes.push(r);\n    if (n.grp) (P.group[n.grp] = P.group[n.grp] || [])[n.line] = r;\n  }\n  P.heat = new Float32Array(off);\n  // Ground pour fills the rest a LED clear of other copper, stitched by a via\n  // wherever a 5x5 patch of it is free.\n  for (let c = 0; c \u003c N; c++) if (!P.mat[c] && (P.blk[c] === 0 || P.blk[c] === 1)) P.mat[c] = POUR;\n  for (let y = 6; y \u003c 112; y += 7)\n    for (let x = 3 + (Math.floor(y / 7) % 2) * 3; x \u003c W - 3; x += 7) {\n      let ok = true;\n      for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) if (P.mat[(y + j) * W + x + i] !== POUR) ok = false;\n      if (ok) via(P, x, y, 1);\n    }\n  // Silkscreen: corner marks round the processor and its pin-one dot.\n  for (const [x, y, dx, dy] of [[17, 40, 1, 1], [46, 40, -1, 1], [17, 67, 1, -1], [46, 67, -1, -1]])\n    for (let i = 0; i \u003c 3; i++) {\n      put(P, x + dx * i, y, SILK);\n      put(P, x, y + dy * i, SILK);\n    }\n  put(P, 19, 42, SILK);\n}\n\nfunction paintBoard(P) {\n  const k = Math.min(3.999, Math.max(0, P.mask) * 4);\n  const i0 = Math.floor(k);\n  const f = k - i0;\n  const mix = (j) => MASKS[i0][j].map((v, c) => v + (MASKS[i0 + 1][j][c] - v) * f);\n  const M = mix(0);\n  const C = mix(1);\n  const pour = M.map((v, i) => v + (C[i] - v) * 0.55);\n  for (let p = 0; p \u003c N; p++) {\n    const m = P.mat[p];\n    const s = m \u003c PAD ? 1 : P.shade[p];\n    const c = m === TRACE ? C : m === POUR ? pour : m ? FIX[m - PAD] : M;\n    for (let i = 0; i \u003c 3; i++) P.base[p * 3 + i] = c[i] * s;\n  }\n  P.maskAt = P.mask;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.mat = new Uint8Array(N);\n  P.shade = new Float32Array(N).fill(1);\n  P.blk = new Int16Array(N);\n  P.dist = new Int32Array(N);\n  P.ring = [[], [], [], [], [], [], [], []];\n  buildBoard(P);\n  for (const k of [\"base\", \"buf\", \"E\", \"T\", \"G\"]) P[k] = new Float32Array(N * 3);\n  Object.assign(P, { maskAt: -1, mask: 0, glow: 0, pulses: [], t: 0, next: {}, busy: {}, clear: {}, rev: {}, act: 0, mem: 0, tick: 0, boot: -1, started: false });\n  // The program starts near the end of a rest, a spell before the copy.\n  P.spell = 1.8;\n  P.led = new Float32Array(4);\n  P.ledWas = new Uint8Array(4);\n}\n\nfunction bits(n, p) {\n  const out = [1];\n  for (let i = 1; i \u003c n; i++) out.push(Math.random() \u003c p ? 1 : 0);\n  return out;\n}\n\n// Puts a train of bits on a route, from its first end or, reversed, its last;\n// returns the seconds until the train has left the route.\nfunction train(P, r, rev, b, at) {\n  if (!r) return 0;\n  for (let i = 0; i \u003c b.length; i++) if (b[i]) P.pulses.push({ r, rev, s: -(at || 0) - i * GAP });\n  return (r.n + (at || 0) + b.length * GAP + TAIL) / P.v;\n}\n\n// One transaction on group g once the last has gone onto the bus; a train the\n// other way waits for the bus to clear.\nfunction transact(P, g, kind) {\n  const lines = P.group[g];\n  if (!lines || P.busy[g] > P.t) return;\n  let rev = P.clear[g] > P.t ? P.rev[g] : Math.random() \u003c 0.5;\n  const n = kind === 1 ? 8 + Math.floor(Math.random() * 7) : kind ? 16 : 4 + Math.floor(Math.random() * 5);\n  let dur = 0;\n  if (kind === 0) {\n    // A memory cycle: eight data lines in step and the chip's clock with them.\n    for (let j = 0; j \u003c 8; j++) dur = Math.max(dur, train(P, lines[j], rev, bits(n, 0.5)));\n    train(P, lines[8], false, bits(n, 1));\n    P.mem = Math.max(P.mem, P.t + dur * 0.6);\n  } else if (kind === 1) {\n    // A packet on a pair of lines, or a burst on all, as a copy mostly sends.\n    const all = Math.random() \u003c (P.copy ? 0.8 : 0.25);\n    const j0 = Math.floor(Math.random() * (lines.length - 1));\n    const b = bits(all ? 4 : n, 0.6);\n    for (let j = 0; j \u003c lines.length; j++) if (all || j === j0 || j === j0 + 1) dur = Math.max(dur, train(P, lines[j], rev, b));\n    P.act = Math.max(P.act, P.t + 0.25 + dur * 0.4);\n  } else {\n    // A flash read: chip select, sixteen clocks, a command out and a byte back.\n    rev = false;\n    train(P, lines[0], false, [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]);\n    train(P, lines[1], false, bits(16, 1));\n    train(P, lines[2], false, bits(8, 0.5));\n    dur = train(P, lines[3], true, bits(8, 0.5), 8 * GAP);\n  }\n  P.busy[g] = P.t + (n * GAP + 2) / P.v;\n  P.clear[g] = P.t + dur;\n  P.rev[g] = rev;\n}\n\n// After a reset: power at 0.5 s, the crystal at 0.9, flash reads to 2.6, a one\n// walked across both memory buses, the buses filled, then two link bursts.\nfunction bootStep(P, dt) {\n  const b0 = P.boot;\n  const b1 = (P.boot += dt);\n  const at = (x) => b0 \u003c x && b1 >= x;\n  const all = (g, rev, b) => {\n    for (let j = 0; j \u003c 9; j++) train(P, P.group[g] && P.group[g][j], rev, b);\n  };\n  if (b1 > 1 && b1 \u003c 2.6) transact(P, \"S\", 2);\n  for (let j = 0; j \u003c 9; j++)\n    if (at(2.7 + j * 0.14))\n      for (const g of [\"A\", \"B\"]) train(P, P.group[g] && P.group[g][j], false, [1]);\n  if (at(4.2)) for (const g of [\"A\", \"B\"]) all(g, true, [1, 1, 1, 1]);\n  if (at(4.9) || at(5.3)) {\n    all(\"C\", false, [1, 0, 1]);\n    P.act = P.t + 0.25;\n  }\n  if (b1 > 5.8) P.boot = -1;\n}\n\nfunction step(P, dt, traffic, clock) {\n  P.t += dt;\n  P.v = 16 * clock;\n  const f = clock / 2;\n  const booting = P.boot >= 0;\n  if (booting) bootStep(P, dt);\n  // The crystal ticks: out on one pad, back on the other.\n  if (!booting || P.boot > 0.9) {\n    P.tick += dt * 3 * clock;\n    if (P.tick >= 1) {\n      P.tick -= Math.floor(P.tick);\n      train(P, P.group.X && P.group.X[0], false, [1]);\n      train(P, P.group.X && P.group.X[1], true, [1]);\n    }\n  }\n  if (!booting) {\n    const rate = { A: [0, 0.9 + 3.5 * traffic], B: [0, 0.9 + 3.5 * traffic], C: [1, 0.6 + 2.6 * traffic], L: [1, 0.25 + 1.2 * traffic], R: [1, 0.25 + 1.2 * traffic], S: [2, 0.25 + 0.9 * traffic] };\n    P.spell += (dt * f) / 2.4;\n    const w = Math.floor(P.spell) % WORK.length;\n    P.copy = w === COPY;\n    for (const g in rate) {\n      // Traffic turned up fills the quiet buses too.\n      const rg = rate[g][1] * f * (WORK[w][\"ABCLRS\".indexOf(g)] * (1 + traffic) + 2 * traffic);\n      if (P.next[g] === undefined) P.next[g] = P.t + Math.random() / rg;\n      if (P.t >= P.next[g]) {\n        transact(P, g, rate[g][0]);\n        P.next[g] = P.t - Math.log(1 - Math.random() * 0.98) / rg;\n      }\n    }\n  }\n  // The LEDs: power, a heartbeat, the connector, the memory. Each one that\n  // lights sends a pulse up its drive line.\n  const hb = (P.t * f) % 1.6;\n  const on = [!booting || P.boot > 0.5, !booting && (hb \u003c 0.1 || (hb > 0.25 && hb \u003c 0.35)), P.act > P.t, P.mem > P.t || (booting && P.boot > 2.6 && P.boot \u003c 4.6 && (P.boot * 8) % 1 \u003c 0.5)];\n  for (let k = 0; k \u003c 4; k++) {\n    if (on[k] && !P.ledWas[k] && k) train(P, P.ledNet[k].r, false, [1]);\n    P.ledWas[k] = on[k] ? 1 : 0;\n    P.led[k] += ((on[k] ? 1 : 0) - P.led[k]) * Math.min(1, dt * 30);\n  }\n  // Pulses move on, warming every LED of copper their head crosses.\n  const heat = P.heat;\n  const ps = P.pulses;\n  let kept = 0;\n  for (const p of ps) {\n    const s0 = p.s;\n    p.s += P.v * dt;\n    const r = p.r;\n    for (let c = Math.max(0, Math.ceil(s0)); c \u003c= p.s && c \u003c r.n; c++) {\n      const j = r.o + (p.rev ? r.n - 1 - c : c);\n      heat[j] = Math.min(1, heat[j] + 0.3);\n    }\n    if (p.s - TAIL \u003c r.n) ps[kept++] = p;\n  }\n  ps.length = kept;\n  const keep = Math.exp(-dt / P.tau);\n  for (let i = 0; i \u003c heat.length; i++) heat[i] *= keep;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.mask = Math.min(1, Math.max(0, k[0]));\n  const clock = Math.max(0.1, k[1]);\n  const traffic = Math.min(1, Math.max(0, k[2]));\n  P.glow = Math.min(1, Math.max(0, k[3]));\n  P.tau = 1 + 2.2 * P.glow ** 1.3;\n  if (!P.started) {\n    P.started = true;\n    for (const n of P.ledNet) n.r = P.routes.find((r) => r.grp === \"D\" && r.line === n.line);\n    // The board has been running for three seconds when the panel opens.\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30, traffic, clock);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    Object.assign(P, { boot: 0, next: {}, busy: {}, clear: {} });\n    P.pulses.length = 0;\n    P.heat.fill(0);\n  }\n  step(P, dt, traffic, clock);\n}\n\n// A box blur of one channel, along rows and then along columns.\nfunction blur(src, dst, tmp, r, c) {\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const from = pass ? tmp : src;\n    const to = pass ? dst : tmp;\n    const len = pass ? H : W;\n    const st = pass ? W * 3 : 3;\n    for (let line = 0; line \u003c (pass ? W : H); line++) {\n      const o = (pass ? line : line * W) * 3 + c;\n      let acc = 0;\n      for (let i = 0; i \u003c= r; i++) acc += from[o + i * st];\n      for (let i = 0; i \u003c len; i++) {\n        to[o + i * st] = acc / (2 * r + 1);\n        if (i + r + 1 \u003c len) acc += from[o + (i + r + 1) * st];\n        if (i - r >= 0) acc -= from[o + (i - r) * st];\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.maskAt !== P.mask) paintBoard(P);\n  const buf = P.buf;\n  const E = P.E;\n  buf.set(P.base);\n  E.fill(0);\n  // A busy trace stays warm in its signal's colour.\n  const heat = P.heat;\n  for (const r of P.routes) {\n    const col = SIG[r.cls];\n    for (let i = 0; i \u003c r.n; i++) {\n      const h = heat[r.o + i] * 0.7;\n      if (h \u003c 0.007) continue;\n      for (let c = 0; c \u003c 3; c++) E[r.cells[i] * 3 + c] += col[c] * h;\n    }\n  }\n  for (const p of P.pulses) {\n    const r = p.r;\n    const col = SIG[r.cls];\n    const hi = Math.floor(p.s);\n    for (let i = hi + 1; i >= hi - TAIL - 1; i--) {\n      if (i \u003c 0 || i >= r.n) continue;\n      const d = p.s - i;\n      let b = d \u003c 0 ? 1 + d : d \u003c 1 ? 1 : 1 - (d - 1) / (TAIL + 1);\n      if (b \u003c= 0) continue;\n      b *= b;\n      // The head burns nearly white, the tail in the signal's colour.\n      const wh = d \u003c 1 ? 0.55 : 0;\n      const o = r.cells[p.rev ? r.n - 1 - i : i] * 3;\n      for (let c = 0; c \u003c 3; c++) E[o + c] += (col[c] + (255 - col[c]) * wh) * b;\n    }\n  }\n  for (let k = 0; k \u003c 4; k++)\n    for (let y = 0; y \u003c 2; y++) {\n      const o = ((LENS_AT[k][1] + y) * W + LENS_AT[k][0]) * 3;\n      for (let c = 0; c \u003c 3; c++) E[o + c] += LED_ON[k][c] * P.led[k] * 1.8;\n    }\n  // The glow: the pulses' light spread through the mask.\n  const r = 1 + Math.round(P.glow * 3);\n  const g = 0.5 + 2.8 * P.glow;\n  const G = P.G;\n  for (let c = 0; c \u003c 3; c++) blur(E, G, P.T, r, c);\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    // Where a pulse is, its light covers the copper under it.\n    const m = 1 - 0.5 * Math.min(1, Math.max(E[o], E[o + 1], E[o + 2]) / 255);\n    display.setPixel(p % W, (p - (p % W)) / W, knee(buf[o] * m + E[o] + G[o] * g), knee(buf[o + 1] * m + E[o + 1] + G[o + 1] * g), knee(buf[o + 2] * m + E[o + 2] + G[o + 2] * g));\n  }\n}\n\n// Light past 180 rolls off towards 255, so a bright pulse keeps its colour.\nfunction knee(v) {\n  return v \u003c 180 ? v : 255 - 75 * Math.exp(-(v - 180) / 75);\n}\n","layer":{"id":"layer-circuit-board","type":"code","name":"circuit-board","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Circuit Board\n// Family:  circuit\n// Idea:    A circuit board fills the panel with copper a maze router lays in setup between a processor, two memory chips, a flash chip, a crystal and the gold fingers of an edge connector, and signals run along the traces as bright pulses while four status LEDs answer the traffic.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: C. Y. Lee's maze router (\"An algorithm for path connections and its applications\", 1961), here with 45-degree moves\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Mask=0..1, Clock=0.5..4, Traffic=0..1, Glow=0..1\n//\n// Knob 1: Mask. The colour of the solder mask: green at 0, then blue, red, matte black and purple at 1.\n// Knob 2: Clock. How fast the board runs: at 2 the crystal ticks six times a second and a pulse covers 32 LEDs a second, at 0.5 a quarter of that, at 4 twice.\n// Knob 3: Traffic. At 0 the processor works through its program in spells of 2.4 s (loading from the flash, computing in memory, input and output, a rest, a copy out to the connector); turned up, the quiet buses fill until at 1 every bus carries trains back to back.\n// Knob 4: Glow. How far the light of a pulse spreads through the mask, and how long a busy trace stays warm after it, from one second to three.\n// Buttons: K1 tap resets the board: it goes dark, the power LED comes on, the crystal starts, the processor reads the flash, walks a one across both memory buses and brings the link up.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// What each LED of the bare board is: mask (0) over bare board, over a trace\n// or over the pour, or a part coloured from FIX.\nconst TRACE = 1;\nconst POUR = 2;\nconst PAD = 3;\nconst CHIP = 4;\nconst SILK = 5;\nconst HOLE = 6;\nconst GOLD = 7;\nconst RES = 8;\nconst LENS = 9;\nconst CAN = 10;\nconst BASE = 11;\nconst VIA = 12;\nconst ETCH = 13;\nconst FIX = [[196, 196, 186], [30, 30, 34], [222, 222, 208], [0, 0, 0], [228, 172, 52], [24, 24, 24], [120, 122, 112], [212, 214, 220], [36, 36, 40], [170, 170, 152], [92, 92, 98]];\n// Solder mask over bare board and over copper, for the five stops of K1.\nconst MASKS = [\n  [[10, 70, 34], [44, 124, 52]],\n  [[8, 32, 96], [38, 84, 170]],\n  [[96, 12, 14], [164, 50, 40]],\n  [[16, 17, 19], [46, 50, 52]],\n  [[56, 16, 86], [112, 58, 154]],\n];\n// Signal light: data, clock, connector, flash, LED drive.\nconst SIG = [[255, 196, 80], [90, 225, 255], [255, 110, 215], [150, 255, 110], [255, 255, 240]];\n// Status LEDs (power, heartbeat, connector, memory): lens top and colour lit.\nconst LENS_AT = [[39, 24], [31, 30], [33, 30], [35, 30]];\nconst LED_ON = [[60, 255, 90], [255, 50, 40], [255, 176, 30], [70, 130, 255]];\n// The program, as spells of 2.4 s at Clock 2 (load, compute, input and output,\n// rest, copy), each the load on buses A and B (memory), C (connector), L and\n// R (memory to connector) and S (flash).\nconst WORK = [[1.5, 0.3, 0.2, 0.1, 0.1, 3], [2.6, 2.6, 0.2, 0.1, 0.1, 0.2], [0.3, 0.3, 2.6, 1.8, 1.8, 0.2], [0.15, 0.15, 0.2, 0.1, 0.1, 0.2], [2, 2, 2.4, 2.5, 2.5, 0.2]];\nconst COPY = 4;\n// The router's moves: straight steps cost 5, diagonal ones 7, so a route is\n// straight runs joined by 45-degree runs.\nconst DX = [1, 0, -1, 0, 1, -1, -1, 1];\nconst DY = [0, 1, 0, -1, 1, 1, -1, -1];\n// Bits on a bus are 4 LEDs apart; a pulse's tail is 2 LEDs.\nconst GAP = 4;\nconst TAIL = 2;\n// A 3x5 font for the markings on the chips.\nconst FONT = { U: 0x5b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9 };\n\nfunction inside(x, y) {\n  return x >= 0 && y >= 0 && x \u003c W && y \u003c H;\n}\n\nfunction put(P, x, y, m, s) {\n  if (!inside(x, y)) return;\n  P.mat[y * W + x] = m;\n  P.shade[y * W + x] = s || 1;\n}\n\n// Copper keeps every other net one LED away: blk holds the net that may pass\n// each LED, 0 for any and -1 for none.\nfunction claim(P, x, y, net) {\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      if (!inside(x + i, y + j)) continue;\n      const k = (y + j) * W + x + i;\n      if (!P.blk[k]) P.blk[k] = net;\n      else if (P.blk[k] !== net) P.blk[k] = -1;\n    }\n}\n\nfunction copper(P, x, y, net) {\n  claim(P, x, y, net);\n  P.blk[y * W + x] = net;\n}\n\nfunction block(P, x0, y0, x1, y1) {\n  for (let y = y0 - 1; y \u003c= y1 + 1; y++) for (let x = x0 - 1; x \u003c= x1 + 1; x++) if (inside(x, y)) P.blk[y * W + x] = -1;\n}\n\nfunction pad(P, x, y, net, s) {\n  put(P, x, y, PAD, s);\n  copper(P, x, y, net);\n}\n\nfunction reserve(P, x, y, net) {\n  const v = P.blk[y * W + x];\n  if (!v || v === net) copper(P, x, y, net);\n}\n\n// A gull-wing lead. The LED in front of its tip is kept for its own net and\n// the others round the tip are shut, so the route leaves straight out.\nfunction lead(P, x, y, dx, dy, net) {\n  for (let i = 0; i \u003c 3; i++) pad(P, x + dx * i, y + dy * i, net, i === 2 ? 0.7 : 1);\n  reserve(P, x - dx, y - dy, net);\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      const k = (y + j) * W + x + i;\n      if ((i || j) && (i !== -dx || j !== -dy) && (i !== dx || j !== dy) && inside(x + i, y + j) && (!P.blk[k] || P.blk[k] === net)) P.blk[k] = -1;\n    }\n  return [x, y];\n}\n\nfunction chip(P, x0, y0, x1, y1) {\n  block(P, x0, y0, x1, y1);\n  for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) put(P, x, y, CHIP, y === y0 || x === x0 ? 1.45 : y === y1 || x === x1 ? 0.7 : 1);\n}\n\nfunction text(P, s, x, y) {\n  for (const ch of s) {\n    for (let b = 0; b \u003c 15; b++) if (FONT[ch] & (1 \u003c\u003c (14 - b))) put(P, x + (b % 3), y + Math.floor(b / 3), ETCH);\n    x += 4;\n  }\n}\n\nfunction via(P, x, y, net) {\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      put(P, x + i, y + j, i || j ? VIA : HOLE, i && j ? 0.8 : 1);\n      copper(P, x + i, y + j, net);\n    }\n}\n\n// A resistor and a LED in a line, from the resistor's far pad at y0 to the\n// LED's, which is ground, eight rows on in direction dy.\nfunction ledPair(P, x, y0, dy, net, inner) {\n  pad(P, x, y0, net);\n  for (let i = 3; i \u003c= 5; i++) pad(P, x, y0 + dy * i, inner);\n  put(P, x, y0 + dy * 4, TRACE);\n  pad(P, x, y0 + dy * 8, 1);\n  for (const [i, m] of [[1, RES], [2, RES], [6, LENS], [7, LENS]]) {\n    put(P, x, y0 + dy * i, m);\n    P.blk[(y0 + dy * i) * W + x] = -1;\n  }\n}\n\n// Lee's wave: every LED the net may cross gets its distance from the start,\n// cheapest first, until the wave reaches the end; the route is read back\n// from the end, keeping its direction where it can. With `diag` its first\n// turn is a diagonal, so a fan to the wider fingers jogs where there is room.\nfunction route(P, net, a, b, diag) {\n  const dist = P.dist;\n  const blk = P.blk;\n  const ring = P.ring;\n  dist.fill(1e9);\n  for (const q of ring) q.length = 0;\n  const s = a[1] * W + a[0];\n  const t = b[1] * W + b[0];\n  dist[s] = 0;\n  ring[0].push(s);\n  let pending = 1;\n  for (let d = 0; pending > 0 && d \u003c= dist[t]; d++) {\n    const q = ring[d & 7];\n    while (q.length) {\n      const u = q.pop();\n      pending--;\n      if (dist[u] !== d) continue;\n      const x = u % W;\n      const y = (u - x) / W;\n      for (let k = 0; k \u003c 8; k++) {\n        const v = u + DY[k] * W + DX[k];\n        if (!inside(x + DX[k], y + DY[k]) || (blk[v] && blk[v] !== net)) continue;\n        const nd = d + (k \u003c 4 ? 5 : 7);\n        if (nd \u003c dist[v]) {\n          dist[v] = nd;\n          ring[nd & 7].push(v);\n          pending++;\n        }\n      }\n    }\n  }\n  if (dist[t] >= 1e9) return null;\n  const path = [t];\n  let last = -1;\n  for (let u = t; u !== s; ) {\n    const x = u % W;\n    const y = (u - x) / W;\n    let best = -1;\n    let bk = -1;\n    let score = -1;\n    for (let k = 0; k \u003c 8; k++) {\n      const p = u - DY[k] * W - DX[k];\n      if (!inside(x - DX[k], y - DY[k]) || dist[p] + (k \u003c 4 ? 5 : 7) !== dist[u]) continue;\n      const sc = (k === last ? 4 : 0) + (k \u003c 4 ? 1 : 0) + (diag && k >= 4 ? 6 : 0);\n      if (sc > score) {\n        score = sc;\n        best = p;\n        bk = k;\n      }\n    }\n    path.push(best);\n    u = best;\n    last = bk;\n    if (bk >= 4) diag = false;\n  }\n  for (const c of path) {\n    copper(P, c % W, Math.floor(c / W), net);\n    if (!P.mat[c]) P.mat[c] = TRACE;\n  }\n  return Int16Array.from(path.reverse());\n}\n\nfunction buildBoard(P) {\n  const jobs = [];\n  let id = 2;\n  const net = (cls, grp, line) => ({ id: id++, cls, grp, line });\n  // Short nets are routed first, then fans and buses, each line in the order\n  // that lets the next pass outside it.\n  const link = (n, a, b, o, diag) => jobs.push({ n, a, b, o: o || 9, diag });\n  const gnd = (a, x, y) => {\n    via(P, x, y, 1);\n    link({ id: 1, cls: -1 }, a, [x, y], 1);\n  };\n  // Mounting holes, plated, in the two top corners.\n  for (const cx of [4, 59]) {\n    block(P, cx - 3, 1, cx + 3, 7);\n    for (let y = 0; y \u003c= 8; y++)\n      for (let x = cx - 4; x \u003c= cx + 4; x++) {\n        const r = Math.hypot(x - cx, y - 4);\n        if (r \u003c 1.9) put(P, x, y, HOLE);\n        else if (r \u003c 3.4) put(P, x, y, PAD, 0.9 + 0.25 * Math.cos(Math.atan2(y - 4, x - cx) + 2.3));\n      }\n  }\n  // The processor, a QFP with nine leads a side, and two memory chips under it.\n  chip(P, 22, 44, 41, 63);\n  put(P, 24, 46, ETCH);\n  text(P, \"U1\", 28, 51);\n  chip(P, 1, 84, 20, 93);\n  chip(P, 43, 84, 62, 93);\n  text(P, \"U2\", 7, 87);\n  text(P, \"U3\", 49, 87);\n  // Memory buses: nine lines from each side of the processor down to the top\n  // leads of a memory chip, the innermost being that chip's clock.\n  for (const side of [0, 1])\n    for (let j = 8; j >= 0; j--) {\n      const n = net(j === 8 ? 1 : 0, side ? \"B\" : \"A\", j);\n      const a = side ? lead(P, 44, 45 + 2 * j, -1, 0, n.id) : lead(P, 19, 45 + 2 * j, 1, 0, n.id);\n      link(n, a, lead(P, side ? 60 - 2 * j : 3 + 2 * j, 81, 0, 1, n.id));\n    }\n  // Nineteen gold fingers, two LEDs wide, the outer two ground.\n  const finger = (i, nid) => {\n    const x0 = 4 + 3 * i;\n    for (let y = 116; y \u003c H; y++)\n      for (let x = x0; x \u003c= x0 + 1; x++) {\n        put(P, x, y, GOLD, y === 116 ? 0.75 : y === H - 1 ? 0.6 : x === x0 ? 1.1 : 0.9);\n        copper(P, x, y, nid);\n      }\n    return x0;\n  };\n  finger(0, 1);\n  finger(18, 1);\n  // Nine lines from the bottom of the processor fan out to the middle fingers.\n  for (let j = 0; j \u003c 9; j++) {\n    const n = net(2, \"C\", j);\n    const f = finger(5 + j, n.id);\n    reserve(P, f, 115, n.id);\n    link(n, lead(P, 23 + 2 * j, 66, 0, -1, n.id), [f, 116], 9, true);\n  }\n  // Four lines from each memory chip's bottom leads to the outer fingers.\n  for (const side of [0, 1])\n    for (let j = 0; j \u003c 9; j++) {\n      const x = side ? 60 - 2 * j : 3 + 2 * j;\n      if (j >= 1 && j \u003c= 4) {\n        const n = net(2, side ? \"R\" : \"L\", j - 1);\n        const a = lead(P, x, 96, 0, -1, n.id);\n        const f = finger(side ? 18 - j : j, n.id) + side;\n        reserve(P, f, 115, n.id);\n        link(n, a, [f, 116], 9, true);\n      } else if (j === 0) gnd(lead(P, x, 96, 0, -1, 1), side ? 61 : 2, 100);\n      else lead(P, x, 96, 0, -1, id++);\n    }\n  // The flash chip on its side at the top left; its four right leads take\n  // the processor's first four top leads, the lowest to the nearest.\n  chip(P, 4, 24, 11, 33);\n  text(P, \"U4\", 5, 27);\n  for (let j = 0; j \u003c 4; j++) {\n    const n = net(3, \"S\", j);\n    link(n, lead(P, 23 + 2 * j, 41, 0, 1, n.id), lead(P, 14, 32 - 2 * j, -1, 0, n.id), 4);\n    lead(P, 1, 32 - 2 * j, 1, 0, id++);\n  }\n  // Three status LEDs over the next three top leads; each top pad meets the pour.\n  P.ledNet = [{ id: 0, cls: 4, grp: \"D\", line: 0 }];\n  for (let k = 1; k \u003c 4; k++) {\n    const x = 29 + 2 * k;\n    const n = net(4, \"D\", k);\n    P.ledNet.push(n);\n    ledPair(P, x, 37, -1, n.id, id++);\n    link(n, lead(P, x, 41, 0, 1, n.id), [x, 37], 3);\n  }\n  // The crystal, a metal can on two pads, on the last two top leads.\n  block(P, 45, 34, 54, 38);\n  for (let y = 34; y \u003c= 38; y++)\n    for (let x = 45; x \u003c= 54; x++) if ((y - 34) % 4 || (x - 45) % 9) put(P, x, y, CAN, y === 35 ? 1.2 : y === 38 ? 0.62 : 0.9);\n  for (let j = 0; j \u003c 2; j++) {\n    const n = net(1, \"X\", j);\n    for (let y = 35; y \u003c= 37; y++) for (let x = 42 + 14 * j; x \u003c= 43 + 14 * j; x++) pad(P, x, y, n.id);\n    link(n, lead(P, 37 + 2 * j, 41, 0, 1, n.id), j ? [56, 37] : [42, 36], 2);\n  }\n  // The regulator, a SOT-223 under its tab, between two electrolytic capacitors.\n  chip(P, 27, 8, 36, 12);\n  for (let y = 3; y \u003c= 6; y++) for (let x = 28; x \u003c= 35; x++) pad(P, x, y, 1, y === 3 ? 0.8 : 1);\n  const vin = id++;\n  const vout = id++;\n  for (let k = 0; k \u003c 3; k++)\n    for (let y = 14; y \u003c= 16; y++) for (let i = 0; i \u003c 2; i++) pad(P, 28 + 3 * k + i, y, [vin, 1, vout][k], y === 14 ? 0.7 : 1);\n  for (const [cx, side] of [[14, 0], [49, 1]]) {\n    block(P, cx - 5, 6, cx + 5, 16);\n    for (let y = 6; y \u003c= 16; y++)\n      for (let x = cx - 5; x \u003c= cx + 5; x++) {\n        const r = Math.hypot(x - cx, y - 11);\n        if (Math.abs(x - cx) + Math.abs(y - 11) > 8) continue;\n        if (r \u003c 4.3) put(P, x, y, CAN, 1.05 - 0.05 * r + 0.12 * Math.cos(Math.atan2(y - 11, x - cx) + 2.3) - (x === cx || y === 11 ? 0.28 : 0));\n        else put(P, x, y, BASE);\n      }\n    // Its tabs: the plus side to the regulator, the other to ground.\n    for (let y = 10; y \u003c= 12; y++)\n      for (let i = 0; i \u003c 2; i++) {\n        pad(P, cx - 7 + i, y, side ? vout : 1);\n        pad(P, cx + 6 + i, y, side ? 1 : vin);\n      }\n  }\n  // The power LED hangs under its resistor beside the regulator.\n  P.ledNet[0].id = vout;\n  ledPair(P, 39, 18, 1, vout, id++);\n  link({ id: vin, cls: 4 }, [28, 16], [21, 12], 2);\n  link({ id: vout, cls: 4 }, [35, 16], [42, 12], 2);\n  link(P.ledNet[0], [35, 16], [39, 18], 3);\n  // Route in that order; a net the router cannot reach is left off the board.\n  jobs.sort((a, b) => a.o - b.o);\n  P.routes = [];\n  P.group = {};\n  let off = 0;\n  for (const { n, a, b, diag } of jobs) {\n    const cells = route(P, n.id, a, b, diag);\n    if (!cells || n.cls \u003c 0) continue;\n    const r = { cells, n: cells.length, o: off, cls: n.cls, grp: n.grp, line: n.line };\n    off += r.n;\n    P.routes.push(r);\n    if (n.grp) (P.group[n.grp] = P.group[n.grp] || [])[n.line] = r;\n  }\n  P.heat = new Float32Array(off);\n  // Ground pour fills the rest a LED clear of other copper, stitched by a via\n  // wherever a 5x5 patch of it is free.\n  for (let c = 0; c \u003c N; c++) if (!P.mat[c] && (P.blk[c] === 0 || P.blk[c] === 1)) P.mat[c] = POUR;\n  for (let y = 6; y \u003c 112; y += 7)\n    for (let x = 3 + (Math.floor(y / 7) % 2) * 3; x \u003c W - 3; x += 7) {\n      let ok = true;\n      for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) if (P.mat[(y + j) * W + x + i] !== POUR) ok = false;\n      if (ok) via(P, x, y, 1);\n    }\n  // Silkscreen: corner marks round the processor and its pin-one dot.\n  for (const [x, y, dx, dy] of [[17, 40, 1, 1], [46, 40, -1, 1], [17, 67, 1, -1], [46, 67, -1, -1]])\n    for (let i = 0; i \u003c 3; i++) {\n      put(P, x + dx * i, y, SILK);\n      put(P, x, y + dy * i, SILK);\n    }\n  put(P, 19, 42, SILK);\n}\n\nfunction paintBoard(P) {\n  const k = Math.min(3.999, Math.max(0, P.mask) * 4);\n  const i0 = Math.floor(k);\n  const f = k - i0;\n  const mix = (j) => MASKS[i0][j].map((v, c) => v + (MASKS[i0 + 1][j][c] - v) * f);\n  const M = mix(0);\n  const C = mix(1);\n  const pour = M.map((v, i) => v + (C[i] - v) * 0.55);\n  for (let p = 0; p \u003c N; p++) {\n    const m = P.mat[p];\n    const s = m \u003c PAD ? 1 : P.shade[p];\n    const c = m === TRACE ? C : m === POUR ? pour : m ? FIX[m - PAD] : M;\n    for (let i = 0; i \u003c 3; i++) P.base[p * 3 + i] = c[i] * s;\n  }\n  P.maskAt = P.mask;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.mat = new Uint8Array(N);\n  P.shade = new Float32Array(N).fill(1);\n  P.blk = new Int16Array(N);\n  P.dist = new Int32Array(N);\n  P.ring = [[], [], [], [], [], [], [], []];\n  buildBoard(P);\n  for (const k of [\"base\", \"buf\", \"E\", \"T\", \"G\"]) P[k] = new Float32Array(N * 3);\n  Object.assign(P, { maskAt: -1, mask: 0, glow: 0, pulses: [], t: 0, next: {}, busy: {}, clear: {}, rev: {}, act: 0, mem: 0, tick: 0, boot: -1, started: false });\n  // The program starts near the end of a rest, a spell before the copy.\n  P.spell = 1.8;\n  P.led = new Float32Array(4);\n  P.ledWas = new Uint8Array(4);\n}\n\nfunction bits(n, p) {\n  const out = [1];\n  for (let i = 1; i \u003c n; i++) out.push(Math.random() \u003c p ? 1 : 0);\n  return out;\n}\n\n// Puts a train of bits on a route, from its first end or, reversed, its last;\n// returns the seconds until the train has left the route.\nfunction train(P, r, rev, b, at) {\n  if (!r) return 0;\n  for (let i = 0; i \u003c b.length; i++) if (b[i]) P.pulses.push({ r, rev, s: -(at || 0) - i * GAP });\n  return (r.n + (at || 0) + b.length * GAP + TAIL) / P.v;\n}\n\n// One transaction on group g once the last has gone onto the bus; a train the\n// other way waits for the bus to clear.\nfunction transact(P, g, kind) {\n  const lines = P.group[g];\n  if (!lines || P.busy[g] > P.t) return;\n  let rev = P.clear[g] > P.t ? P.rev[g] : Math.random() \u003c 0.5;\n  const n = kind === 1 ? 8 + Math.floor(Math.random() * 7) : kind ? 16 : 4 + Math.floor(Math.random() * 5);\n  let dur = 0;\n  if (kind === 0) {\n    // A memory cycle: eight data lines in step and the chip's clock with them.\n    for (let j = 0; j \u003c 8; j++) dur = Math.max(dur, train(P, lines[j], rev, bits(n, 0.5)));\n    train(P, lines[8], false, bits(n, 1));\n    P.mem = Math.max(P.mem, P.t + dur * 0.6);\n  } else if (kind === 1) {\n    // A packet on a pair of lines, or a burst on all, as a copy mostly sends.\n    const all = Math.random() \u003c (P.copy ? 0.8 : 0.25);\n    const j0 = Math.floor(Math.random() * (lines.length - 1));\n    const b = bits(all ? 4 : n, 0.6);\n    for (let j = 0; j \u003c lines.length; j++) if (all || j === j0 || j === j0 + 1) dur = Math.max(dur, train(P, lines[j], rev, b));\n    P.act = Math.max(P.act, P.t + 0.25 + dur * 0.4);\n  } else {\n    // A flash read: chip select, sixteen clocks, a command out and a byte back.\n    rev = false;\n    train(P, lines[0], false, [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]);\n    train(P, lines[1], false, bits(16, 1));\n    train(P, lines[2], false, bits(8, 0.5));\n    dur = train(P, lines[3], true, bits(8, 0.5), 8 * GAP);\n  }\n  P.busy[g] = P.t + (n * GAP + 2) / P.v;\n  P.clear[g] = P.t + dur;\n  P.rev[g] = rev;\n}\n\n// After a reset: power at 0.5 s, the crystal at 0.9, flash reads to 2.6, a one\n// walked across both memory buses, the buses filled, then two link bursts.\nfunction bootStep(P, dt) {\n  const b0 = P.boot;\n  const b1 = (P.boot += dt);\n  const at = (x) => b0 \u003c x && b1 >= x;\n  const all = (g, rev, b) => {\n    for (let j = 0; j \u003c 9; j++) train(P, P.group[g] && P.group[g][j], rev, b);\n  };\n  if (b1 > 1 && b1 \u003c 2.6) transact(P, \"S\", 2);\n  for (let j = 0; j \u003c 9; j++)\n    if (at(2.7 + j * 0.14))\n      for (const g of [\"A\", \"B\"]) train(P, P.group[g] && P.group[g][j], false, [1]);\n  if (at(4.2)) for (const g of [\"A\", \"B\"]) all(g, true, [1, 1, 1, 1]);\n  if (at(4.9) || at(5.3)) {\n    all(\"C\", false, [1, 0, 1]);\n    P.act = P.t + 0.25;\n  }\n  if (b1 > 5.8) P.boot = -1;\n}\n\nfunction step(P, dt, traffic, clock) {\n  P.t += dt;\n  P.v = 16 * clock;\n  const f = clock / 2;\n  const booting = P.boot >= 0;\n  if (booting) bootStep(P, dt);\n  // The crystal ticks: out on one pad, back on the other.\n  if (!booting || P.boot > 0.9) {\n    P.tick += dt * 3 * clock;\n    if (P.tick >= 1) {\n      P.tick -= Math.floor(P.tick);\n      train(P, P.group.X && P.group.X[0], false, [1]);\n      train(P, P.group.X && P.group.X[1], true, [1]);\n    }\n  }\n  if (!booting) {\n    const rate = { A: [0, 0.9 + 3.5 * traffic], B: [0, 0.9 + 3.5 * traffic], C: [1, 0.6 + 2.6 * traffic], L: [1, 0.25 + 1.2 * traffic], R: [1, 0.25 + 1.2 * traffic], S: [2, 0.25 + 0.9 * traffic] };\n    P.spell += (dt * f) / 2.4;\n    const w = Math.floor(P.spell) % WORK.length;\n    P.copy = w === COPY;\n    for (const g in rate) {\n      // Traffic turned up fills the quiet buses too.\n      const rg = rate[g][1] * f * (WORK[w][\"ABCLRS\".indexOf(g)] * (1 + traffic) + 2 * traffic);\n      if (P.next[g] === undefined) P.next[g] = P.t + Math.random() / rg;\n      if (P.t >= P.next[g]) {\n        transact(P, g, rate[g][0]);\n        P.next[g] = P.t - Math.log(1 - Math.random() * 0.98) / rg;\n      }\n    }\n  }\n  // The LEDs: power, a heartbeat, the connector, the memory. Each one that\n  // lights sends a pulse up its drive line.\n  const hb = (P.t * f) % 1.6;\n  const on = [!booting || P.boot > 0.5, !booting && (hb \u003c 0.1 || (hb > 0.25 && hb \u003c 0.35)), P.act > P.t, P.mem > P.t || (booting && P.boot > 2.6 && P.boot \u003c 4.6 && (P.boot * 8) % 1 \u003c 0.5)];\n  for (let k = 0; k \u003c 4; k++) {\n    if (on[k] && !P.ledWas[k] && k) train(P, P.ledNet[k].r, false, [1]);\n    P.ledWas[k] = on[k] ? 1 : 0;\n    P.led[k] += ((on[k] ? 1 : 0) - P.led[k]) * Math.min(1, dt * 30);\n  }\n  // Pulses move on, warming every LED of copper their head crosses.\n  const heat = P.heat;\n  const ps = P.pulses;\n  let kept = 0;\n  for (const p of ps) {\n    const s0 = p.s;\n    p.s += P.v * dt;\n    const r = p.r;\n    for (let c = Math.max(0, Math.ceil(s0)); c \u003c= p.s && c \u003c r.n; c++) {\n      const j = r.o + (p.rev ? r.n - 1 - c : c);\n      heat[j] = Math.min(1, heat[j] + 0.3);\n    }\n    if (p.s - TAIL \u003c r.n) ps[kept++] = p;\n  }\n  ps.length = kept;\n  const keep = Math.exp(-dt / P.tau);\n  for (let i = 0; i \u003c heat.length; i++) heat[i] *= keep;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.mask = Math.min(1, Math.max(0, k[0]));\n  const clock = Math.max(0.1, k[1]);\n  const traffic = Math.min(1, Math.max(0, k[2]));\n  P.glow = Math.min(1, Math.max(0, k[3]));\n  P.tau = 1 + 2.2 * P.glow ** 1.3;\n  if (!P.started) {\n    P.started = true;\n    for (const n of P.ledNet) n.r = P.routes.find((r) => r.grp === \"D\" && r.line === n.line);\n    // The board has been running for three seconds when the panel opens.\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30, traffic, clock);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    Object.assign(P, { boot: 0, next: {}, busy: {}, clear: {} });\n    P.pulses.length = 0;\n    P.heat.fill(0);\n  }\n  step(P, dt, traffic, clock);\n}\n\n// A box blur of one channel, along rows and then along columns.\nfunction blur(src, dst, tmp, r, c) {\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const from = pass ? tmp : src;\n    const to = pass ? dst : tmp;\n    const len = pass ? H : W;\n    const st = pass ? W * 3 : 3;\n    for (let line = 0; line \u003c (pass ? W : H); line++) {\n      const o = (pass ? line : line * W) * 3 + c;\n      let acc = 0;\n      for (let i = 0; i \u003c= r; i++) acc += from[o + i * st];\n      for (let i = 0; i \u003c len; i++) {\n        to[o + i * st] = acc / (2 * r + 1);\n        if (i + r + 1 \u003c len) acc += from[o + (i + r + 1) * st];\n        if (i - r >= 0) acc -= from[o + (i - r) * st];\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.maskAt !== P.mask) paintBoard(P);\n  const buf = P.buf;\n  const E = P.E;\n  buf.set(P.base);\n  E.fill(0);\n  // A busy trace stays warm in its signal's colour.\n  const heat = P.heat;\n  for (const r of P.routes) {\n    const col = SIG[r.cls];\n    for (let i = 0; i \u003c r.n; i++) {\n      const h = heat[r.o + i] * 0.7;\n      if (h \u003c 0.007) continue;\n      for (let c = 0; c \u003c 3; c++) E[r.cells[i] * 3 + c] += col[c] * h;\n    }\n  }\n  for (const p of P.pulses) {\n    const r = p.r;\n    const col = SIG[r.cls];\n    const hi = Math.floor(p.s);\n    for (let i = hi + 1; i >= hi - TAIL - 1; i--) {\n      if (i \u003c 0 || i >= r.n) continue;\n      const d = p.s - i;\n      let b = d \u003c 0 ? 1 + d : d \u003c 1 ? 1 : 1 - (d - 1) / (TAIL + 1);\n      if (b \u003c= 0) continue;\n      b *= b;\n      // The head burns nearly white, the tail in the signal's colour.\n      const wh = d \u003c 1 ? 0.55 : 0;\n      const o = r.cells[p.rev ? r.n - 1 - i : i] * 3;\n      for (let c = 0; c \u003c 3; c++) E[o + c] += (col[c] + (255 - col[c]) * wh) * b;\n    }\n  }\n  for (let k = 0; k \u003c 4; k++)\n    for (let y = 0; y \u003c 2; y++) {\n      const o = ((LENS_AT[k][1] + y) * W + LENS_AT[k][0]) * 3;\n      for (let c = 0; c \u003c 3; c++) E[o + c] += LED_ON[k][c] * P.led[k] * 1.8;\n    }\n  // The glow: the pulses' light spread through the mask.\n  const r = 1 + Math.round(P.glow * 3);\n  const g = 0.5 + 2.8 * P.glow;\n  const G = P.G;\n  for (let c = 0; c \u003c 3; c++) blur(E, G, P.T, r, c);\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    // Where a pulse is, its light covers the copper under it.\n    const m = 1 - 0.5 * Math.min(1, Math.max(E[o], E[o + 1], E[o + 2]) / 255);\n    display.setPixel(p % W, (p - (p % W)) / W, knee(buf[o] * m + E[o] + G[o] * g), knee(buf[o + 1] * m + E[o + 1] + G[o + 1] * g), knee(buf[o + 2] * m + E[o + 2] + G[o + 2] * g));\n  }\n}\n\n// Light past 180 rolls off towards 255, so a bright pulse keeps its colour.\nfunction knee(v) {\n  return v \u003c 180 ? v : 255 - 75 * Math.exp(-(v - 180) / 75);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Mask=0..1, Clock=0.5..4, Traffic=0..1, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Mask","min":0,"max":1,"about":"The colour of the solder mask: green at 0, then blue, red, matte black and purple at 1."},{"name":"Clock","min":0.5,"max":4,"about":"How fast the board runs: at 2 the crystal ticks six times a second and a pulse covers 32 LEDs a second, at 0.5 a quarter of that, at 4 twice."},{"name":"Traffic","min":0,"max":1,"about":"At 0 the processor works through its program in spells of 2.4 s (loading from the flash, computing in memory, input and output, a rest, a copy out to the connector); turned up, the quiet buses fill until at 1 every bus carries trains back to back."},{"name":"Glow","min":0,"max":1,"about":"How far the light of a pulse spreads through the mask, and how long a busy trace stays warm after it, from one second to three."}],"start":[0,2,0,0.06],"measures":{"motion":0.2002,"detail":0.119,"edges":0.678,"complexity":0.7577,"coverage":0.9814,"colour":0.2535,"drift":0.0471},"knobResponse":[0.2116,0.0618,0.0696,0.0621]},{"slug":"circulation","title":"Circulation","family":"body","round":22,"note":"해부도처럼 머리부터 발끝까지 선 사람이에요. 심장이 뛸 때마다 붉은 피의 맥이 동맥을 타고 머리와 손발 끝까지 번져 가고, 푸른 정맥혈은 심장 쪽으로 거슬러 올라오며 폐가 박동과 숨에 분홍빛으로 물들어요. 발치의 모니터에는 심전도와 맥박 수가 떠요.","idea":"A standing figure drawn head to feet like an anatomical chart, whose heart beats lub-dub and sends each pulse of red blood out along the arteries to the head, hands and feet while blue blood flows back up the veins and the lungs flush pink.","buttons":"K1 tap startles the figure: one hard beat at once and a rush of adrenaline that races the heart for a few seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Circulation\n// Family:  body\n// Idea:    A standing figure drawn head to feet like an anatomical chart, whose heart beats lub-dub and sends each pulse of red blood out along the arteries to the head, hands and feet while blue blood flows back up the veins and the lungs flush pink.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the anatomical wall charts of the human circulatory system\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Chart=0..1, Rate=1..5, Detail=1..4, Effort=0..1\n//\n// Knob 1: Chart. The red and blue anatomical chart at 0, an angiogram with the skeleton showing at 0.5, a thermal camera at 1.\n// Knob 2: Rate. The resting heart rate, 36 a minute at 1, 72 at 2, 180 at 5; the faster, the closer the pulses follow each other.\n// Knob 3: Detail. How far the vessels branch, from the named arteries and veins drawn bold at 1 to the capillaries at 4.\n// Knob 4: Effort. From rest to a hard run: the heart beats faster and harder, the breath deepens and the arms and legs flush with blood.\n// Buttons: K1 tap startles the figure: one hard beat at once and a rush of adrenaline that races the heart for a few seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, abs, exp, sin, cos, atan2, floor, ceil, round, hypot, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst g2 = (z) => exp(-z * z);\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\n\n// Pulse tables, 100 steps a second; the arterial pulse and the venous return\n// run at CA and CV LEDs a second.\nconst KS = 100, KN = 520, CA = 80, CV = 30;\n// Vessel kinds: 0 artery, 1 vein, 2 and 3 the lungs' arteries and veins.\n// Branch levels 1..4: spacing, length, radius; the turns a blocked branch tries.\nconst GAP = [0, 7, 3, 2.2, 1.8], LEN = [0, 9, 7, 5, 3.5], RAD = [0, 0.52, 0.43, 0.37, 0.33];\nconst TURN = [0, 0.5, -0.5, 1, -1];\n\n// The trunk's half-width row by row, from the base of the neck to the crotch.\nconst TY = [22.5, 24, 25.5, 27.5, 31, 36, 44, 51, 57, 63, 67, 70.5];\nconst TW = [4.6, 9.5, 13, 14.3, 13.8, 13, 11.6, 10.3, 11, 12.4, 11.2, 6];\n// Arm and leg axes on the viewer's left, x y radius per joint.\nconst ARM = [18.3, 28.4, 3.4, 12.8, 47, 2.6, 8.6, 64.5, 2.2, 7.6, 70.5, 2.1, 6.6, 76, 1.3];\nconst LEG = [26.4, 66, 5.9, 26.2, 94, 3.7, 25.8, 119.5, 2, 24, 124.8, 2.2];\n// Capsules x1 y1 r1 x2 y2 r2 of the neck, an ear, a thumb, a calf and the\n// limbs; the body is folded at the middle, so they stand for both sides.\nconst CAPS = [[31.5, 14, 4, 31.5, 24, 4.2], [25.1, 8.8, 1.2, 25.3, 11.6, 1], [7, 66.6, 1, 5.3, 70.6, 0.8], [25.6, 98, 3.5, 25.6, 110, 2.6]];\nfor (const L of [ARM, LEG]) for (let i = 0; i \u003c L.length - 3; i += 3) CAPS.push([0, 1, 2, 3, 4, 5].map((j) => L[i + j]));\n// The lungs: centre, radii, hilum. The heart's centre.\nconst LUNG = [[25, 38.6, 5.4, 11.6, 27.6, 34], [38.2, 39.2, 5.1, 11, 35.6, 34.5]];\nconst HX = 34.4, HY = 38.4;\n// Artery and vein colours from the big trunks to the capillaries.\nconst RED = [[238, 30, 40], [238, 30, 40], [232, 38, 70], [215, 46, 110], [190, 56, 150]];\nconst BLUE = [[46, 70, 240], [46, 70, 240], [66, 68, 236], [96, 66, 226], [128, 66, 214]];\n// The readout's 3x5 letters, five rows of three bits, and its heart.\nconst GLYPH = {\n  0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7292, 8: 0x7bef, 9: 0x7bcf,\n  B: 0x6bae, P: 0x6ba4, M: 0x5fed,\n};\nconst HEART = [10, 31, 31, 14, 4];\n\n// A colour table from stops of position and r g b.\nconst lut = (s) =>\n  Uint8Array.from({ length: 768 }, (_, n) => {\n    const v = ((n / 3) | 0) / 255, c = n % 3;\n    let j = 0;\n    while (j \u003c s.length - 8 && v > s[j + 4]) j += 4;\n    return s[j + 1 + c] + (s[j + 5 + c] - s[j + 1 + c]) * clamp((v - s[j]) / (s[j + 4] - s[j]), 0, 1);\n  });\n// The angiogram and the thermal chart are one value through a colour table;\n// the weights are in the order pal() reads them.\nconst CHARTS = [\n  null,\n  [lut([0, 0, 0, 0, 0.15, 8, 20, 38, 0.4, 42, 80, 112, 0.7, 150, 196, 220, 1, 240, 252, 255]), 0.04, 0.1, 0.07, 0.14, 0, 0.06, 0, 0, 0.74, 0.05, 0.07, 0.5, 0.5, 0.36, 0.2, 0.5, 0.3, 0.95],\n  [lut([0, 0, 0, 10, 0.2, 34, 0, 86, 0.4, 145, 0, 140, 0.6, 232, 64, 36, 0.8, 255, 172, 0, 1, 255, 255, 210]), 0.07, 0.2, -0.05, 0.08, 0.3, 0.2, 0.18, 0.12, 0, 0.5, 0.16, 0.7, 0.3, 0.56, 0.12, 0.8, 0.2, 1],\n];\n\n// Distance to a segment, less a radius running r0..r1 along it.\nfunction seg(x, y, x0, y0, x1, y1, r0, r1) {\n  const dx = x1 - x0, dy = y1 - y0;\n  const t = clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1e-6), 0, 1);\n  return hypot(x - x0 - dx * t, y - y0 - dy * t) - r0 - (r1 - r0) * t;\n}\n\n// Signed distance to the skin, negative inside.\nfunction sdBody(x, y) {\n  let d = (hypot((x - 31.5) / 6.4, (y - 9.8) / 8.6) - 1) * 6.4, i = 0;\n  while (i \u003c TY.length - 2 && y > TY[i + 1]) i++;\n  const u = clamp((y - TY[i]) / (TY[i + 1] - TY[i]), 0, 1);\n  d = min(d, max(abs(x - 31.5) - TW[i] - (TW[i + 1] - TW[i]) * u, TY[0] - y, y - TY[TY.length - 1]));\n  const xr = x \u003c 31.5 ? x : 63 - x;\n  for (const c of CAPS) d = min(d, seg(xr, y, c[0], c[1], c[3], c[4], c[2], c[5]));\n  return d;\n}\n\nfunction lung(x, y, j, br) {\n  const L = LUNG[j], ry = L[3] * (1 + 0.07 * br);\n  const dy = (y - L[1] - (ry - L[3]) * 0.8) / ry;\n  return hypot(((x - L[0]) / (L[2] * (1 + 0.04 * br))) * (1 + 0.35 * max(0, -dy)), dy);\n}\n\n// The heart in its own frame: v runs from the base to the apex, u across.\nfunction heart(P, x, y, s) {\n  const dx = x - HX, dy = y - HY, k = s * 1.12;\n  const v = (P.hv = (dx * 0.55 + dy * 0.835) / k), u = (P.hu = (dx * 0.835 - dy * 0.55) / k);\n  return v \u003c 0 ? hypot(u / 5, v / 4.6) : hypot(u / (5 * (1 - 0.8 * (v / 7) ** 1.5) + 0.05), v / 7);\n}\n\n// Points along a limb axis: t counts joints, f is the share of the radius off\n// the axis, toward the outside of the limb when positive.\nfunction limb(L, list) {\n  const out = [];\n  for (let i = 0; i \u003c list.length; i += 2) {\n    const t = list[i], k = min(floor(t), L.length / 3 - 2), u = t - k;\n    const [x0, y0, r0, x1, y1, r1] = L.slice(k * 3, k * 3 + 6);\n    const dx = x1 - x0, dy = y1 - y0, l = hypot(dx, dy), r = (r0 + (r1 - r0) * u) * list[i + 1];\n    out.push(x0 + dx * u - (dy / l) * r, y0 + dy * u + (dx / l) * r);\n  }\n  return out;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, started: false, beats: [], ph: 0, br: 0, brPh: 0, adr: 0, det: -1, eh: 0, last: -9, f: {}, TA: F32(KN) });\n  Object.assign(P, { TV: F32(KN), TP: F32(KN), hud: F32(N), c0: F32(3), c1: F32(3) });\n  body(P), bones(P), vessels(P);\n}\n\n// Skin mask, rim, depth, muscle, and the way through the body from the heart.\nfunction body(P) {\n  const [m, rim, dep, mus] = [\"m\", \"rim\", \"dep\", \"mus\"].map((k) => (P[k] = F32(N)));\n  const geo = (P.geo = F32(N).fill(1e4)), room = (P.room = new Uint8Array(N));\n  P.tex = F32(N).map(() => 0.75 + 0.35 * rnd());\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p / W) | 0, sd = sdBody(x, y), lu = min(lung(x, y, 0, 0), lung(x, y, 1, 0));\n    // Room to grow: 1 in the body but not the lungs or heart, 2 in the lungs.\n    room[p] = lu \u003c 0.9 ? 2 : sd \u003c -0.6 && lu > 1.1 && hypot(x - HX, y - HY) > 6.5 ? 1 : 0;\n    [m[p], rim[p], dep[p]] = [clamp(0.5 - sd, 0, 1), clamp(1 - abs(sd + 0.7) / 1.1, 0, 1), clamp(-sd / 5, 0, 1)];\n    mus[p] = m[p] * (y > 68 ? 1 : smooth(12.5, 14.5, abs(x - 31.5)));\n  }\n  geo[38 * W + 34] = 0;\n  const NB = [1, 1, W, 1, W + 1, 1.414, W - 1, 1.414];\n  for (let pass = 0; pass \u003c 4; pass++)\n    for (let q = 0, sg = pass & 1 ? 1 : -1; q \u003c N; q++) {\n      const p = sg > 0 ? N - 1 - q : q;\n      if (m[p] > 0.2)\n        for (let j = 0; j \u003c 8; j += 2) if (geo[p + sg * NB[j]] + NB[j + 1] \u003c geo[p]) geo[p] = geo[p + sg * NB[j]] + NB[j + 1];\n    }\n  P.core = Float32Array.from(geo, (g) => exp(-g / 55));\n}\n\n// The skeleton for the angiogram: radius, brightness and a polyline for each\n// bone of the left half, which is mirrored.\nconst BONES = [\n  [0.5, 0.8, 26.5, 12.6, 26.9, 15.4, 28.6, 17.3, 31.6, 17.8], [0.55, 0.8, 31.6, 25.4, 25, 24.6, 19.5, 26.4], [0.7, 0.7, 31.6, 26.6, 31.6, 41],\n  [0.6, 0.75, 31.6, 63.5, 27.5, 62.4, 23.2, 59.2, 21, 60.5, 21.6, 64.5, 25, 68.8, 29.5, 69.8, 31.6, 69.6],\n  [1, 0.9, 26.2, 66.8, 26.4, 70, 26.2, 92], [0.85, 0.9, 26.6, 96, 26.4, 118.5], [0.45, 0.7, 24, 97, 24.4, 118.5],\n  [0.7, 0.75, 25.8, 120.5, 24.6, 124.5, 23.2, 126.2], [0.95, 0.9, 18.3, 28.4, 12.9, 46.6],\n  [0.55, 0.8, 12.2, 47.8, 7.9, 64.2], [0.55, 0.8, 13.6, 47.6, 9.5, 64.4], [0.45, 0.7, 8.6, 65.6, 6.4, 76],\n];\nfunction bones(P) {\n  const bone = (P.bone = F32(N)), skull = [0.5, 0.9], all = [skull, ...BONES];\n  for (let a = 0; a \u003c 2; a += 0.2) skull.push(31.5 - 5.6 * sin(a), 9.6 - 7.6 * cos(a));\n  for (let y = 18.5; y \u003c 64; y += 2.7) all.push([0.8, 0.85, 30.8, y, 32.2, y]);\n  for (let i = 0; i \u003c 8; i++) {\n    const y = 27.6 + i * 2.5, w = 21.7 + i * 0.3;\n    all.push([0.42, 0.65, 30.6, y, 26, y - 0.9, w, y + 1.2, w + 0.2, y + 3.4, w + 3 + i * 0.4, y + 5.2, 29.8 - i * 0.2, y + 6.2 - i * 0.2]);\n  }\n  for (const [r, v, ...q] of all)\n    for (let i = 2; i \u003c q.length; i += 2) {\n      const [x0, y0, x1, y1] = q.slice(i - 2, i + 2);\n      for (let y = max(0, floor(min(y0, y1) - r - 1)); y \u003c= min(H - 1, ceil(max(y0, y1) + r + 1)); y++)\n        for (let x = max(0, floor(min(x0, x1) - r - 1)); x \u003c= min(31, ceil(max(x0, x1) + r + 1)); x++) {\n          const a = clamp(0.5 - seg(x, y, x0, y0, x1, y1, r, r), 0, 1) * v, p = y * W + x;\n          if (a > bone[p]) bone[p] = bone[p + 63 - 2 * x] = a;\n        }\n    }\n}\n\n// The named vessels; four levels of branches grow between them.\nfunction vessels(P) {\n  const ves = (P.ves = []);\n  const add = (kind, parent, r, pts) => (ves.push({ kind, parent, r, pts, lv: 0 }), ves[ves.length - 1]);\n  const pair = (kind, pr, pl, r, pts) => [add(kind, pr, r, pts), add(kind, pl, r, pts.map((v, i) => (i & 1 ? v : 63 - v)))];\n  // Arteries, from the aorta out.\n  const ao = add(0, null, 1.3, [33.4, 35.5, 32.4, 31.6, 32.7, 29, 34, 27.6, 35.8, 28.4, 36.1, 31, 34.9, 35, 33.9, 40, 33.4, 47, 33, 55, 31.5, 62.5]);\n  const bc = add(0, ao, 1, [32.9, 28.3, 30.8, 26.9, 29.6, 25.6]);\n  const carR = add(0, bc, 0.8, [29.6, 25.6, 30, 21.5, 30, 17.5, 29.6, 15]);\n  const carL = add(0, ao, 0.8, [34.4, 27.8, 33.4, 24.5, 33, 21.5, 33, 17.5, 33.4, 15]);\n  pair(0, carR, carL, 0.6, [29.6, 15, 29.1, 12.2, 29.6, 9.6, 30.8, 8]);\n  pair(0, carR, carL, 0.55, [29.6, 15.4, 27.6, 13.6, 26.3, 10.2, 26.6, 6, 28.4, 3]);\n  const subR = add(0, bc, 0.9, [29.6, 25.6, 26.2, 26, 22.6, 26.7, 19.8, 28]);\n  const subL = add(0, ao, 0.9, [35.8, 28.4, 37.8, 26.6, 40.6, 26.8, 43.2, 28]);\n  const [brR, brL] = pair(0, subR, subL, 0.8, [19.8, 28, ...limb(ARM, [0.15, -0.3, 0.5, -0.28, 0.85, -0.22, 1, -0.1])]);\n  pair(0, brR, brL, 0.55, limb(ARM, [1, -0.1, 1.2, 0.35, 1.6, 0.42, 2, 0.42, 2.3, 0.15, 2.5, -0.2]));\n  const [ilR, ilL] = pair(0, ao, ao, 1, [31.5, 62.5, 30, 64.2, 28.6, 66.3]);\n  const [feR, feL] = pair(0, ilR, ilL, 0.85, [28.6, 66.3, ...limb(LEG, [0.08, -0.32, 0.4, -0.3, 0.75, -0.24, 1, -0.12])]);\n  pair(0, feR, feL, 0.55, limb(LEG, [1, -0.12, 1.25, -0.32, 1.6, -0.36, 1.95, -0.4, 2.3, -0.15, 2.75, 0.1]));\n  pair(0, feR, feL, 0.55, limb(LEG, [1.02, 0, 1.2, 0.36, 1.6, 0.42, 2, 0.32, 2.45, 0.2, 2.95, 0.35]));\n  // Veins, from the venae cavae out; the sinus over the brain joins the jugulars.\n  const svc = add(1, null, 1.2, [30.3, 35.6, 29.9, 31, 29.9, 27.4]);\n  const bvR = add(1, svc, 1, [29.9, 27.4, 28.2, 26, 26.6, 25.4]);\n  const bvL = add(1, svc, 0.9, [29.9, 27.4, 32.4, 26.3, 34.8, 25.6, 36.4, 25.4]);\n  pair(1, bvR, bvL, 0.8, [28.4, 25.8, 28.4, 21.5, 28.5, 17.5, 28.3, 14.4, 27.6, 11.6, 27.9, 7.2, 29.4, 4.6, 31.5, 3.9]);\n  const [axR, axL] = pair(1, bvR, bvL, 0.9, [26.6, 25.4, 23.2, 26.1, 20.4, 27.8]);\n  pair(1, axR, axL, 0.55, [20.4, 27.8, ...limb(ARM, [0.2, -0.68, 0.6, -0.64, 1, -0.68, 1.5, -0.78, 2, -0.78, 2.25, -0.45])]);\n  pair(1, axR, axL, 0.5, [21.2, 27, ...limb(ARM, [0.08, 0.5, 0.5, 0.64, 1, 0.7, 1.5, 0.78, 2, 0.78, 2.25, 0.5])]);\n  const ivc = add(1, null, 1.2, [30.5, 42.5, 30.8, 48, 31, 56, 31.4, 62.8]);\n  const [icR, icL] = pair(1, ivc, ivc, 1, [31.4, 62.8, 30, 65.4, 29.8, 67.2]);\n  pair(1, icR, icL, 0.8, [29.8, 67.2, ...limb(LEG, [0.1, -0.54, 0.4, -0.54, 0.75, -0.46, 1, -0.3, 1.3, -0.05, 1.7, 0, 2, 0.02, 2.4, -0.1])]);\n  pair(1, icR, icL, 0.5, [30, 68, ...limb(LEG, [0.15, -0.8, 0.5, -0.82, 1, -0.82, 1.5, -0.86, 2, -0.85, 2.4, -0.5, 2.8, -0.3])]);\n  // The lungs: blue blood out along the pulmonary arteries, red back.\n  const pt = add(2, null, 1.1, [32.4, 37, 31.6, 33.4, 31.8, 31.4]);\n  pair(2, pt, pt, 0.8, [31.8, 31.4, 29, 31.8, 26.4, 33.4, 25, 35]);\n  add(3, null, 0.8, [35, 36.2, 31.4, 37, 28, 37.4, 25.6, 38.6]);\n  add(3, null, 0.8, [35.6, 35.8, 37.6, 36.6, 39.2, 37.8]);\n  for (const v of ves) samples(v);\n  grow(P);\n}\n\n// Resample a vessel every 0.4 LED with its distance from the heart.\nfunction samples(v) {\n  const { pts, parent: q } = v;\n  let d = v.d0 || 0, best = 1e9;\n  if (q && v.d0 === undefined)\n    for (let i = 0; i \u003c q.x.length; i++) {\n      const e = hypot(q.x[i] - pts[0], q.y[i] - pts[1]);\n      if (e \u003c best) [best, d] = [e, q.d[i] + e];\n    }\n  [v.x, v.y, v.d] = [[pts[0]], [pts[1]], [d]];\n  for (let i = 2; i \u003c pts.length; i += 2) {\n    const x0 = pts[i - 2], y0 = pts[i - 1], dx = pts[i] - x0, dy = pts[i + 1] - y0, l = hypot(dx, dy), n = max(1, ceil(l / 0.4));\n    for (let k = 1; k \u003c= n; k++) v.x.push(x0 + (dx * k) / n), v.y.push(y0 + (dy * k) / n), v.d.push(d + (l * k) / n);\n    d += l;\n  }\n}\n\n// Branches grow level by level, shuffled so arteries and veins take their room\n// in turn; a branch bends away from the skin or another vessel, or stops.\nfunction grow(P) {\n  const occ = new Uint8Array(N);\n  const mark = (v) => v.x.forEach((x, i) => (occ[round(v.y[i]) * W + round(x)] = 1));\n  P.ves.forEach(mark);\n  let front = P.ves.slice();\n  for (let lv = 1; lv \u003c= 4; lv++) {\n    const next = [];\n    front.sort(() => rnd() - 0.5);\n    for (const v of front) {\n      const n = v.x.length, want = v.kind >= 2 ? 2 : 1;\n      for (let s = GAP[lv] * rnd(); s \u003c n * 0.4 - 0.8; s += GAP[lv] * (0.6 + 0.8 * rnd())) {\n        const i = min(n - 2, round(s / 0.4)), len = LEN[lv] * (0.5 + rnd());\n        let a = atan2(v.y[i + 1] - v.y[i], v.x[i + 1] - v.x[i]) + (rnd() \u003c 0.5 ? -1 : 1) * (0.35 + 0.6 * rnd());\n        let x = v.x[i], y = v.y[i];\n        const pts = [x, y];\n        for (let st = 1; st \u003c= len; st++) {\n          a += (rnd() - 0.5) * 0.7;\n          const turn = TURN.find((tu) => {\n            const nx = x + cos(a + tu), ny = y + sin(a + tu);\n            const q = round(ny) * W + round(nx);\n            return P.room[q] === want && (st \u003c 2 + v.r || !occ[q]);\n          });\n          if (turn === undefined) break;\n          a += turn;\n          pts.push((x += cos(a)), (y += sin(a)));\n        }\n        if (pts.length \u003c 6) continue;\n        const b = { kind: v.kind, parent: v, r: RAD[lv], pts, lv, d0: v.d[i] };\n        samples(b), mark(b), next.push(b);\n      }\n    }\n    P.ves.push(...(front = next));\n  }\n}\n\n// The vessels Detail shows in a red and a blue layer: weight, key (seconds\n// after a beat), level, pulse or flow. Low detail draws the trunks bold.\nfunction raster(P, det) {\n  for (const k of [\"wR\", \"kR\", \"lR\", \"mR\", \"wB\", \"kB\", \"lB\", \"mB\"]) (P[k] = P[k] || F32(N)).fill(0);\n  for (const v of P.ves) {\n    const vis = clamp(((det - 1) * 7) / 6 + 1.5 - v.lv, 0, 1);\n    if (vis \u003c= 0) continue;\n    const red = v.kind === 0 || v.kind === 3, flow = v.kind & 1;\n    const [w, kk, l, mo] = red ? [P.wR, P.kR, P.lR, P.mR] : [P.wB, P.kB, P.lB, P.mB];\n    const r = v.r * (v.lv ? 1 : 1.25 - 0.15 * (det - 1)), g = v.lv ? 0 : 0.9, e0 = r + g + 0.5;\n    for (let i = 0; i \u003c v.x.length; i++) {\n      const x = v.x[i], y = v.y[i], key = flow ? max(0, 0.3 + (125 - v.d[i]) / CV) : v.d[i] / CA;\n      for (let py = max(0, ceil(y - e0)); py \u003c= min(H - 1, floor(y + e0)); py++)\n        for (let px = max(0, ceil(x - e0)); px \u003c= min(W - 1, floor(x + e0)); px++) {\n          const e = hypot(px - x, py - y), p = py * W + px;\n          let a = clamp(r + 0.5 - e, 0, 1);\n          if (g) a = max(a, 0.16 * clamp(e0 - e, 0, 1));\n          if ((a *= vis) > w[p]) [w[p], kk[p], l[p], mo[p]] = [a, key, v.lv, flow];\n        }\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  if (!P.ves) setup(P);\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.chart = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 1, 5), det = clamp(k[2], 1, 4), E = (P.E = clamp(k[3], 0, 1));\n  if (abs(det - P.det) > 0.02) raster(P, (P.det = det));\n  let kick = false;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.adr = 1;\n    if (P.t - P.last > 0.28) [P.ph, kick] = [1, true];\n  }\n  P.adr *= exp(-dt / 5);\n  P.bpm = min(200, 36 * rate * (1 + 0.6 * E * E) + 75 * P.adr);\n  const T = (P.T = 60 / P.bpm);\n  P.tsys = clamp(0.16 + 0.17 * T, 0.2, 0.36);\n  P.stroke = 1 + 0.45 * E + 0.5 * P.adr;\n  if (!P.started) {\n    // Open as if the heart had been beating for a while.\n    P.started = true;\n    for (let i = 12; i >= 1; i--) P.beats.push([-(i - 0.6) * T, P.stroke]);\n    [P.ph, P.last, P.brPh] = [0.6, -0.6 * T, 0.15];\n  }\n  P.t += dt;\n  if ((P.ph += dt / T) >= 1) {\n    P.last = P.t - (P.ph = kick ? 0 : P.ph % 1) * T;\n    P.beats.push([P.last, P.stroke * (kick ? 1.5 : 1)]);\n  }\n  while (P.beats.length && P.t - P.beats[0][0] > 5.6) P.beats.shift();\n  P.brPh += dt / max(1, 4.4 - 2.6 * E - 1.2 * P.adr);\n  P.br = (0.5 - 0.5 * cos(2 * PI * P.brPh)) * (0.55 + 0.45 * E + 0.4 * P.adr);\n  P.eh = (P.eh + dt * 16) % 18;\n  tables(P), readout(P);\n}\n\n// Each beat's waves by the time since it: TA the sharp arterial pulse with its\n// dicrotic notch, TP the softer flush of the tissue, TV the venous swell.\nfunction tables(P) {\n  const { TA, TV, TP, t } = P, td = 0.13 * (1 + 0.4 * P.E);\n  TA.fill(0), TV.fill(0), TP.fill(0);\n  const span = (age, a, b, fn) => {\n    for (let k = max(0, ceil((age - a) * KS)); k \u003c= min(KN - 1, floor((age + b) * KS)); k++) fn(k, age - k / KS);\n  };\n  for (const [tb, a] of P.beats) {\n    const age = t - tb;\n    span(age, 0.9, 0, (k, s) => (TA[k] += a * ((1 - exp(-s / 0.02)) * exp(-s / td) + 0.22 * g2((s - 0.3) / 0.05))));\n    span(age, 1.4, 0, (k, s) => (TP[k] += a * (1 - exp(-s / 0.06)) * exp(-s / 0.26)));\n    span(age, 0.4, 0.4, (k, s) => (TV[k] += a * g2(s / 0.13)));\n  }\n}\n\nconst look = (T, key) => {\n  const f = key * KS, i = f | 0;\n  return i \u003c KN - 1 ? T[i] + (T[i + 1] - T[i]) * (f - i) : 0;\n};\n\nfunction ecgAt(P, tt) {\n  let v = 0;\n  for (const [tb] of P.beats) {\n    const s = tt - tb;\n    if (s > -0.3 && s \u003c 0.6)\n      v += 0.13 * g2((s + 0.16) / 0.03) - 0.12 * g2((s + 0.022) / 0.01) + g2(s / 0.016) - 0.28 * g2((s - 0.03) / 0.012) + 0.3 * g2((s - P.tsys + 0.07) / 0.055);\n  }\n  return v;\n}\n\n// The monitor beside the feet: an ECG sweep on the left, the rate on the right.\nfunction readout(P) {\n  const { hud } = P;\n  hud.fill(0, 100 * W, 120 * W);\n  for (let y = 104; y \u003c 117; y += 3) for (let x = 2; x \u003c 19; x += 3) hud[y * W + x] = 0.12;\n  for (let c = 0; c \u003c 18; c++) {\n    const a = (P.eh - c + 18) % 18;\n    if (a > 16.4) continue;\n    let lo = 999, hi = 0;\n    for (let s = 0; s \u003c= 6; s++) {\n      const yy = round(112 - 8 * ecgAt(P, P.t - (a + s / 6) / 16));\n      [lo, hi] = [min(lo, yy), max(hi, yy)];\n    }\n    for (let y = max(101, lo); y \u003c= min(118, hi); y++) hud[y * W + c + 1] = a \u003c 1 ? 1 : 0.95 - (0.55 * a) / 18;\n  }\n  const fl = 0.45 + 0.55 * g2((P.t - P.last - 0.05) / 0.08);\n  HEART.forEach((row, j) => {\n    for (let i = 0; i \u003c 5; i++) if ((row >> (4 - i)) & 1) hud[(105 + j) * W + 46 + i] = fl;\n  });\n  const put = (s, x0, y0, b) => {\n    for (let n = 0; n \u003c s.length; n++)\n      for (let q = 0; q \u003c 15; q++) if ((GLYPH[s[n]] >> (14 - q)) & 1) hud[(y0 + ((q / 3) | 0)) * W + x0 + n * 4 + (q % 3)] = b;\n  };\n  const txt = String(round(P.bpm));\n  put(txt, 63 - txt.length * 4, 105, 0.95);\n  put(\"BPM\", 51, 112, 0.55);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.wR) return;\n  const { m, rim, dep, core, geo, bone, tex, mus, hud, TA, TV, TP, wR, kR, lR, mR, wB, kB, lB, mB, f, c0, c1, E, br } = P;\n  const fc = P.chart * 2, i0 = min(1, floor(fc)), u = smooth(0.3, 0.7, fc - i0);\n  // The heart squeezes in systole and flashes on the first sound, less on the second.\n  const since = P.t - P.last, sys = since \u003c P.tsys ? sin((PI * since) / P.tsys) ** 0.7 : 0;\n  const s = 1 - (0.1 + 0.08 * E + 0.05 * P.adr) * sys;\n  const flash = g2((since - 0.03) / 0.06) + 0.6 * g2((since - P.tsys) / 0.045);\n  // The more capillaries drawn, the more the skin flushes as a pulse passes.\n  const bla = 0.3 + 0.24 * (P.det - 1);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      Object.assign(f, { y, m: m[p], rim: rim[p], dep: dep[p], core: core[p], mus: mus[p], bone: bone[p], hud: hud[p], lw: 0, hw: 0, ho: 0 });\n      f.bl = m[p] > 0 ? look(TP, geo[p] / CA + 0.04) * (bla + 0.3 * E + 0.7 * E * mus[p]) : 0;\n      if (x > 17 && x \u003c 46 && y > 24 && y \u003c 54) {\n        const e0 = lung(x, y, 0, br), e1 = lung(x, y, 1, br), e = min(e0, e1), L = LUNG[e0 \u003c e1 ? 0 : 1];\n        if (e \u003c 1.05) {\n          f.lw = clamp((1.03 - e) * 7, 0, 1) * m[p];\n          f.lrim = clamp(1 - abs(e - 0.92) / 0.1, 0, 1);\n          f.ox = clamp(0.2 + 0.4 * br + 0.5 * look(TP, hypot(x - L[4], y - L[5]) / 40 + 0.06), 0, 1.2);\n          f.lt = tex[p];\n        }\n      }\n      if ((f.wb = wB[p]) > 0) [f.bm, f.bp, f.lb] = [mB[p], look(mB[p] ? TV : TA, kB[p]), lB[p]];\n      if ((f.wr = wR[p]) > 0) [f.rm, f.rp, f.lr] = [mR[p], look(mR[p] ? TV : TA, kR[p]), lR[p]];\n      if (x > 24 && x \u003c 45 && y > 27 && y \u003c 49) {\n        const e = heart(P, x, y, s);\n        f.ho = clamp((1.3 - e) * 5, 0, 1);\n        if (e \u003c 1.1) {\n          f.hw = clamp((1.02 - e) * 5, 0, 1);\n          f.hs = smooth(-0.9, 0.3, P.hu);\n          f.hr = clamp(1 - abs(e - 0.86) / 0.16, 0, 1);\n          f.hb = 0.62 + 0.45 * flash + 0.2 * sys - (abs(P.hu + 0.3) \u003c 0.4 && P.hv > -2 ? 0.25 : 0);\n        }\n      }\n      if (i0 === 0) anat(f, c0);\n      else pal(f, CHARTS[1], c0, E);\n      if (u > 0) {\n        pal(f, CHARTS[i0 + 1], c1, E);\n        for (let c = 0; c \u003c 3; c++) c0[c] += (c1[c] - c0[c]) * u;\n      }\n      display.setPixel(x, y, min(255, c0[0]), min(255, c0[1]), min(255, c0[2]));\n    }\n}\n\n// Lerp o toward the colour c at brightness b by w; past full brightness it\n// runs toward a hot pale core.\nfunction tint(o, c, b, w) {\n  const k = min(b, 1), h = max(0, b - 1) * 0.9;\n  o[0] += (c[0] * k + 255 * h - o[0]) * w;\n  o[1] += (c[1] * k + 190 * h - o[1]) * w;\n  o[2] += (c[2] * k + 170 * h - o[2]) * w;\n}\n\n// The anatomical chart: a pale ghost of a body on a slate ground.\nfunction anat(f, o) {\n  const top = 1 - f.y / H, t = f.rim, bl = f.bl;\n  [o[0], o[1], o[2]] = [2 + 3 * top, 5 + 5 * top, 12 + 9 * top];\n  if (f.m > 0) tint(o, [18 + 34 * t + 8 * f.dep + 80 * bl, 26 + 44 * t + 10 * f.dep + 14 * bl, 42 + 50 * t + 16 * f.dep + 40 * bl], 1, f.m);\n  if (f.lw > 0) {\n    const ox = f.ox;\n    tint(o, [70 + 170 * ox, 60 + 30 * ox, 160 - 40 * ox], f.lt * (0.55 + 0.35 * ox) + 0.35 * f.lrim, f.lw);\n  }\n  const vb = () => f.wb > 0 && tint(o, BLUE[f.lb], (f.bm ? 0.36 + 0.8 * f.bp : 0.4 + 1.05 * f.bp) + 0.04 * f.lb, f.wb);\n  const vr = () => f.wr > 0 && tint(o, RED[f.lr], (f.rm ? 0.36 + 0.8 * f.rp : 0.32 + 1.05 * f.rp) + 0.05 * f.lr, f.wr);\n  // The vessel that owns the LED is drawn last.\n  if (f.wb > f.wr) vr(), vb();\n  else vb(), vr();\n  for (let c = 0; c \u003c 3; c++) o[c] *= 1 - 0.55 * f.ho;\n  if (f.hw > 0) {\n    const hs = f.hs, b = f.hb, k = 0.45 * f.hr;\n    tint(o, [(70 + 170 * hs) * b + 255 * k, (80 - 45 * hs) * b + 170 * k, (230 - 185 * hs) * b + 180 * k], 1, f.hw);\n  }\n  [40, 235, 140].forEach((c, i) => (o[i] += c * f.hud));\n}\n\n// The angiogram and the thermal chart: one value, then its colour table.\nfunction pal(f, c, o, E) {\n  const [lt, bg, t0, rim, dep, core, bl, mus, heat, bone, lung, ox, a0, a1, v0, v1, h0, h1, hud] = c;\n  let v = bg * (1.2 - (0.6 * f.y) / H);\n  if (f.m > 0) v += (t0 + rim * f.rim + dep * f.dep + core * f.core + bl * f.bl + (heat + mus * f.mus) * E - v) * f.m;\n  if (f.lw > 0) v += (lung + ox * f.ox * f.lt - v) * f.lw;\n  v += (bone - v) * f.bone * f.m * (bone > 0);\n  if (f.wb > 0) v += ((f.bm ? v0 + v1 * f.bp : a0 * 0.9 + a1 * f.bp) * (1 - 0.08 * f.lb) - v) * f.wb;\n  if (f.wr > 0) v += ((f.rm ? v0 + v1 * f.rp : a0 + a1 * f.rp) * (1 - 0.08 * f.lr) - v) * f.wr;\n  v *= 1 - 0.35 * f.ho;\n  if (f.hw > 0) v += (h0 + h1 * (f.hb - 0.62) + 0.15 * f.hr - v) * f.hw;\n  const i = clamp(round(max(v, f.hud * hud) * 255), 0, 255) * 3;\n  [o[0], o[1], o[2]] = [lt[i], lt[i + 1], lt[i + 2]];\n}\n","layer":{"id":"layer-circulation","type":"code","name":"circulation","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Circulation\n// Family:  body\n// Idea:    A standing figure drawn head to feet like an anatomical chart, whose heart beats lub-dub and sends each pulse of red blood out along the arteries to the head, hands and feet while blue blood flows back up the veins and the lungs flush pink.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the anatomical wall charts of the human circulatory system\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Chart=0..1, Rate=1..5, Detail=1..4, Effort=0..1\n//\n// Knob 1: Chart. The red and blue anatomical chart at 0, an angiogram with the skeleton showing at 0.5, a thermal camera at 1.\n// Knob 2: Rate. The resting heart rate, 36 a minute at 1, 72 at 2, 180 at 5; the faster, the closer the pulses follow each other.\n// Knob 3: Detail. How far the vessels branch, from the named arteries and veins drawn bold at 1 to the capillaries at 4.\n// Knob 4: Effort. From rest to a hard run: the heart beats faster and harder, the breath deepens and the arms and legs flush with blood.\n// Buttons: K1 tap startles the figure: one hard beat at once and a rush of adrenaline that races the heart for a few seconds.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, abs, exp, sin, cos, atan2, floor, ceil, round, hypot, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst g2 = (z) => exp(-z * z);\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\n\n// Pulse tables, 100 steps a second; the arterial pulse and the venous return\n// run at CA and CV LEDs a second.\nconst KS = 100, KN = 520, CA = 80, CV = 30;\n// Vessel kinds: 0 artery, 1 vein, 2 and 3 the lungs' arteries and veins.\n// Branch levels 1..4: spacing, length, radius; the turns a blocked branch tries.\nconst GAP = [0, 7, 3, 2.2, 1.8], LEN = [0, 9, 7, 5, 3.5], RAD = [0, 0.52, 0.43, 0.37, 0.33];\nconst TURN = [0, 0.5, -0.5, 1, -1];\n\n// The trunk's half-width row by row, from the base of the neck to the crotch.\nconst TY = [22.5, 24, 25.5, 27.5, 31, 36, 44, 51, 57, 63, 67, 70.5];\nconst TW = [4.6, 9.5, 13, 14.3, 13.8, 13, 11.6, 10.3, 11, 12.4, 11.2, 6];\n// Arm and leg axes on the viewer's left, x y radius per joint.\nconst ARM = [18.3, 28.4, 3.4, 12.8, 47, 2.6, 8.6, 64.5, 2.2, 7.6, 70.5, 2.1, 6.6, 76, 1.3];\nconst LEG = [26.4, 66, 5.9, 26.2, 94, 3.7, 25.8, 119.5, 2, 24, 124.8, 2.2];\n// Capsules x1 y1 r1 x2 y2 r2 of the neck, an ear, a thumb, a calf and the\n// limbs; the body is folded at the middle, so they stand for both sides.\nconst CAPS = [[31.5, 14, 4, 31.5, 24, 4.2], [25.1, 8.8, 1.2, 25.3, 11.6, 1], [7, 66.6, 1, 5.3, 70.6, 0.8], [25.6, 98, 3.5, 25.6, 110, 2.6]];\nfor (const L of [ARM, LEG]) for (let i = 0; i \u003c L.length - 3; i += 3) CAPS.push([0, 1, 2, 3, 4, 5].map((j) => L[i + j]));\n// The lungs: centre, radii, hilum. The heart's centre.\nconst LUNG = [[25, 38.6, 5.4, 11.6, 27.6, 34], [38.2, 39.2, 5.1, 11, 35.6, 34.5]];\nconst HX = 34.4, HY = 38.4;\n// Artery and vein colours from the big trunks to the capillaries.\nconst RED = [[238, 30, 40], [238, 30, 40], [232, 38, 70], [215, 46, 110], [190, 56, 150]];\nconst BLUE = [[46, 70, 240], [46, 70, 240], [66, 68, 236], [96, 66, 226], [128, 66, 214]];\n// The readout's 3x5 letters, five rows of three bits, and its heart.\nconst GLYPH = {\n  0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7292, 8: 0x7bef, 9: 0x7bcf,\n  B: 0x6bae, P: 0x6ba4, M: 0x5fed,\n};\nconst HEART = [10, 31, 31, 14, 4];\n\n// A colour table from stops of position and r g b.\nconst lut = (s) =>\n  Uint8Array.from({ length: 768 }, (_, n) => {\n    const v = ((n / 3) | 0) / 255, c = n % 3;\n    let j = 0;\n    while (j \u003c s.length - 8 && v > s[j + 4]) j += 4;\n    return s[j + 1 + c] + (s[j + 5 + c] - s[j + 1 + c]) * clamp((v - s[j]) / (s[j + 4] - s[j]), 0, 1);\n  });\n// The angiogram and the thermal chart are one value through a colour table;\n// the weights are in the order pal() reads them.\nconst CHARTS = [\n  null,\n  [lut([0, 0, 0, 0, 0.15, 8, 20, 38, 0.4, 42, 80, 112, 0.7, 150, 196, 220, 1, 240, 252, 255]), 0.04, 0.1, 0.07, 0.14, 0, 0.06, 0, 0, 0.74, 0.05, 0.07, 0.5, 0.5, 0.36, 0.2, 0.5, 0.3, 0.95],\n  [lut([0, 0, 0, 10, 0.2, 34, 0, 86, 0.4, 145, 0, 140, 0.6, 232, 64, 36, 0.8, 255, 172, 0, 1, 255, 255, 210]), 0.07, 0.2, -0.05, 0.08, 0.3, 0.2, 0.18, 0.12, 0, 0.5, 0.16, 0.7, 0.3, 0.56, 0.12, 0.8, 0.2, 1],\n];\n\n// Distance to a segment, less a radius running r0..r1 along it.\nfunction seg(x, y, x0, y0, x1, y1, r0, r1) {\n  const dx = x1 - x0, dy = y1 - y0;\n  const t = clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1e-6), 0, 1);\n  return hypot(x - x0 - dx * t, y - y0 - dy * t) - r0 - (r1 - r0) * t;\n}\n\n// Signed distance to the skin, negative inside.\nfunction sdBody(x, y) {\n  let d = (hypot((x - 31.5) / 6.4, (y - 9.8) / 8.6) - 1) * 6.4, i = 0;\n  while (i \u003c TY.length - 2 && y > TY[i + 1]) i++;\n  const u = clamp((y - TY[i]) / (TY[i + 1] - TY[i]), 0, 1);\n  d = min(d, max(abs(x - 31.5) - TW[i] - (TW[i + 1] - TW[i]) * u, TY[0] - y, y - TY[TY.length - 1]));\n  const xr = x \u003c 31.5 ? x : 63 - x;\n  for (const c of CAPS) d = min(d, seg(xr, y, c[0], c[1], c[3], c[4], c[2], c[5]));\n  return d;\n}\n\nfunction lung(x, y, j, br) {\n  const L = LUNG[j], ry = L[3] * (1 + 0.07 * br);\n  const dy = (y - L[1] - (ry - L[3]) * 0.8) / ry;\n  return hypot(((x - L[0]) / (L[2] * (1 + 0.04 * br))) * (1 + 0.35 * max(0, -dy)), dy);\n}\n\n// The heart in its own frame: v runs from the base to the apex, u across.\nfunction heart(P, x, y, s) {\n  const dx = x - HX, dy = y - HY, k = s * 1.12;\n  const v = (P.hv = (dx * 0.55 + dy * 0.835) / k), u = (P.hu = (dx * 0.835 - dy * 0.55) / k);\n  return v \u003c 0 ? hypot(u / 5, v / 4.6) : hypot(u / (5 * (1 - 0.8 * (v / 7) ** 1.5) + 0.05), v / 7);\n}\n\n// Points along a limb axis: t counts joints, f is the share of the radius off\n// the axis, toward the outside of the limb when positive.\nfunction limb(L, list) {\n  const out = [];\n  for (let i = 0; i \u003c list.length; i += 2) {\n    const t = list[i], k = min(floor(t), L.length / 3 - 2), u = t - k;\n    const [x0, y0, r0, x1, y1, r1] = L.slice(k * 3, k * 3 + 6);\n    const dx = x1 - x0, dy = y1 - y0, l = hypot(dx, dy), r = (r0 + (r1 - r0) * u) * list[i + 1];\n    out.push(x0 + dx * u - (dy / l) * r, y0 + dy * u + (dx / l) * r);\n  }\n  return out;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, started: false, beats: [], ph: 0, br: 0, brPh: 0, adr: 0, det: -1, eh: 0, last: -9, f: {}, TA: F32(KN) });\n  Object.assign(P, { TV: F32(KN), TP: F32(KN), hud: F32(N), c0: F32(3), c1: F32(3) });\n  body(P), bones(P), vessels(P);\n}\n\n// Skin mask, rim, depth, muscle, and the way through the body from the heart.\nfunction body(P) {\n  const [m, rim, dep, mus] = [\"m\", \"rim\", \"dep\", \"mus\"].map((k) => (P[k] = F32(N)));\n  const geo = (P.geo = F32(N).fill(1e4)), room = (P.room = new Uint8Array(N));\n  P.tex = F32(N).map(() => 0.75 + 0.35 * rnd());\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W, y = (p / W) | 0, sd = sdBody(x, y), lu = min(lung(x, y, 0, 0), lung(x, y, 1, 0));\n    // Room to grow: 1 in the body but not the lungs or heart, 2 in the lungs.\n    room[p] = lu \u003c 0.9 ? 2 : sd \u003c -0.6 && lu > 1.1 && hypot(x - HX, y - HY) > 6.5 ? 1 : 0;\n    [m[p], rim[p], dep[p]] = [clamp(0.5 - sd, 0, 1), clamp(1 - abs(sd + 0.7) / 1.1, 0, 1), clamp(-sd / 5, 0, 1)];\n    mus[p] = m[p] * (y > 68 ? 1 : smooth(12.5, 14.5, abs(x - 31.5)));\n  }\n  geo[38 * W + 34] = 0;\n  const NB = [1, 1, W, 1, W + 1, 1.414, W - 1, 1.414];\n  for (let pass = 0; pass \u003c 4; pass++)\n    for (let q = 0, sg = pass & 1 ? 1 : -1; q \u003c N; q++) {\n      const p = sg > 0 ? N - 1 - q : q;\n      if (m[p] > 0.2)\n        for (let j = 0; j \u003c 8; j += 2) if (geo[p + sg * NB[j]] + NB[j + 1] \u003c geo[p]) geo[p] = geo[p + sg * NB[j]] + NB[j + 1];\n    }\n  P.core = Float32Array.from(geo, (g) => exp(-g / 55));\n}\n\n// The skeleton for the angiogram: radius, brightness and a polyline for each\n// bone of the left half, which is mirrored.\nconst BONES = [\n  [0.5, 0.8, 26.5, 12.6, 26.9, 15.4, 28.6, 17.3, 31.6, 17.8], [0.55, 0.8, 31.6, 25.4, 25, 24.6, 19.5, 26.4], [0.7, 0.7, 31.6, 26.6, 31.6, 41],\n  [0.6, 0.75, 31.6, 63.5, 27.5, 62.4, 23.2, 59.2, 21, 60.5, 21.6, 64.5, 25, 68.8, 29.5, 69.8, 31.6, 69.6],\n  [1, 0.9, 26.2, 66.8, 26.4, 70, 26.2, 92], [0.85, 0.9, 26.6, 96, 26.4, 118.5], [0.45, 0.7, 24, 97, 24.4, 118.5],\n  [0.7, 0.75, 25.8, 120.5, 24.6, 124.5, 23.2, 126.2], [0.95, 0.9, 18.3, 28.4, 12.9, 46.6],\n  [0.55, 0.8, 12.2, 47.8, 7.9, 64.2], [0.55, 0.8, 13.6, 47.6, 9.5, 64.4], [0.45, 0.7, 8.6, 65.6, 6.4, 76],\n];\nfunction bones(P) {\n  const bone = (P.bone = F32(N)), skull = [0.5, 0.9], all = [skull, ...BONES];\n  for (let a = 0; a \u003c 2; a += 0.2) skull.push(31.5 - 5.6 * sin(a), 9.6 - 7.6 * cos(a));\n  for (let y = 18.5; y \u003c 64; y += 2.7) all.push([0.8, 0.85, 30.8, y, 32.2, y]);\n  for (let i = 0; i \u003c 8; i++) {\n    const y = 27.6 + i * 2.5, w = 21.7 + i * 0.3;\n    all.push([0.42, 0.65, 30.6, y, 26, y - 0.9, w, y + 1.2, w + 0.2, y + 3.4, w + 3 + i * 0.4, y + 5.2, 29.8 - i * 0.2, y + 6.2 - i * 0.2]);\n  }\n  for (const [r, v, ...q] of all)\n    for (let i = 2; i \u003c q.length; i += 2) {\n      const [x0, y0, x1, y1] = q.slice(i - 2, i + 2);\n      for (let y = max(0, floor(min(y0, y1) - r - 1)); y \u003c= min(H - 1, ceil(max(y0, y1) + r + 1)); y++)\n        for (let x = max(0, floor(min(x0, x1) - r - 1)); x \u003c= min(31, ceil(max(x0, x1) + r + 1)); x++) {\n          const a = clamp(0.5 - seg(x, y, x0, y0, x1, y1, r, r), 0, 1) * v, p = y * W + x;\n          if (a > bone[p]) bone[p] = bone[p + 63 - 2 * x] = a;\n        }\n    }\n}\n\n// The named vessels; four levels of branches grow between them.\nfunction vessels(P) {\n  const ves = (P.ves = []);\n  const add = (kind, parent, r, pts) => (ves.push({ kind, parent, r, pts, lv: 0 }), ves[ves.length - 1]);\n  const pair = (kind, pr, pl, r, pts) => [add(kind, pr, r, pts), add(kind, pl, r, pts.map((v, i) => (i & 1 ? v : 63 - v)))];\n  // Arteries, from the aorta out.\n  const ao = add(0, null, 1.3, [33.4, 35.5, 32.4, 31.6, 32.7, 29, 34, 27.6, 35.8, 28.4, 36.1, 31, 34.9, 35, 33.9, 40, 33.4, 47, 33, 55, 31.5, 62.5]);\n  const bc = add(0, ao, 1, [32.9, 28.3, 30.8, 26.9, 29.6, 25.6]);\n  const carR = add(0, bc, 0.8, [29.6, 25.6, 30, 21.5, 30, 17.5, 29.6, 15]);\n  const carL = add(0, ao, 0.8, [34.4, 27.8, 33.4, 24.5, 33, 21.5, 33, 17.5, 33.4, 15]);\n  pair(0, carR, carL, 0.6, [29.6, 15, 29.1, 12.2, 29.6, 9.6, 30.8, 8]);\n  pair(0, carR, carL, 0.55, [29.6, 15.4, 27.6, 13.6, 26.3, 10.2, 26.6, 6, 28.4, 3]);\n  const subR = add(0, bc, 0.9, [29.6, 25.6, 26.2, 26, 22.6, 26.7, 19.8, 28]);\n  const subL = add(0, ao, 0.9, [35.8, 28.4, 37.8, 26.6, 40.6, 26.8, 43.2, 28]);\n  const [brR, brL] = pair(0, subR, subL, 0.8, [19.8, 28, ...limb(ARM, [0.15, -0.3, 0.5, -0.28, 0.85, -0.22, 1, -0.1])]);\n  pair(0, brR, brL, 0.55, limb(ARM, [1, -0.1, 1.2, 0.35, 1.6, 0.42, 2, 0.42, 2.3, 0.15, 2.5, -0.2]));\n  const [ilR, ilL] = pair(0, ao, ao, 1, [31.5, 62.5, 30, 64.2, 28.6, 66.3]);\n  const [feR, feL] = pair(0, ilR, ilL, 0.85, [28.6, 66.3, ...limb(LEG, [0.08, -0.32, 0.4, -0.3, 0.75, -0.24, 1, -0.12])]);\n  pair(0, feR, feL, 0.55, limb(LEG, [1, -0.12, 1.25, -0.32, 1.6, -0.36, 1.95, -0.4, 2.3, -0.15, 2.75, 0.1]));\n  pair(0, feR, feL, 0.55, limb(LEG, [1.02, 0, 1.2, 0.36, 1.6, 0.42, 2, 0.32, 2.45, 0.2, 2.95, 0.35]));\n  // Veins, from the venae cavae out; the sinus over the brain joins the jugulars.\n  const svc = add(1, null, 1.2, [30.3, 35.6, 29.9, 31, 29.9, 27.4]);\n  const bvR = add(1, svc, 1, [29.9, 27.4, 28.2, 26, 26.6, 25.4]);\n  const bvL = add(1, svc, 0.9, [29.9, 27.4, 32.4, 26.3, 34.8, 25.6, 36.4, 25.4]);\n  pair(1, bvR, bvL, 0.8, [28.4, 25.8, 28.4, 21.5, 28.5, 17.5, 28.3, 14.4, 27.6, 11.6, 27.9, 7.2, 29.4, 4.6, 31.5, 3.9]);\n  const [axR, axL] = pair(1, bvR, bvL, 0.9, [26.6, 25.4, 23.2, 26.1, 20.4, 27.8]);\n  pair(1, axR, axL, 0.55, [20.4, 27.8, ...limb(ARM, [0.2, -0.68, 0.6, -0.64, 1, -0.68, 1.5, -0.78, 2, -0.78, 2.25, -0.45])]);\n  pair(1, axR, axL, 0.5, [21.2, 27, ...limb(ARM, [0.08, 0.5, 0.5, 0.64, 1, 0.7, 1.5, 0.78, 2, 0.78, 2.25, 0.5])]);\n  const ivc = add(1, null, 1.2, [30.5, 42.5, 30.8, 48, 31, 56, 31.4, 62.8]);\n  const [icR, icL] = pair(1, ivc, ivc, 1, [31.4, 62.8, 30, 65.4, 29.8, 67.2]);\n  pair(1, icR, icL, 0.8, [29.8, 67.2, ...limb(LEG, [0.1, -0.54, 0.4, -0.54, 0.75, -0.46, 1, -0.3, 1.3, -0.05, 1.7, 0, 2, 0.02, 2.4, -0.1])]);\n  pair(1, icR, icL, 0.5, [30, 68, ...limb(LEG, [0.15, -0.8, 0.5, -0.82, 1, -0.82, 1.5, -0.86, 2, -0.85, 2.4, -0.5, 2.8, -0.3])]);\n  // The lungs: blue blood out along the pulmonary arteries, red back.\n  const pt = add(2, null, 1.1, [32.4, 37, 31.6, 33.4, 31.8, 31.4]);\n  pair(2, pt, pt, 0.8, [31.8, 31.4, 29, 31.8, 26.4, 33.4, 25, 35]);\n  add(3, null, 0.8, [35, 36.2, 31.4, 37, 28, 37.4, 25.6, 38.6]);\n  add(3, null, 0.8, [35.6, 35.8, 37.6, 36.6, 39.2, 37.8]);\n  for (const v of ves) samples(v);\n  grow(P);\n}\n\n// Resample a vessel every 0.4 LED with its distance from the heart.\nfunction samples(v) {\n  const { pts, parent: q } = v;\n  let d = v.d0 || 0, best = 1e9;\n  if (q && v.d0 === undefined)\n    for (let i = 0; i \u003c q.x.length; i++) {\n      const e = hypot(q.x[i] - pts[0], q.y[i] - pts[1]);\n      if (e \u003c best) [best, d] = [e, q.d[i] + e];\n    }\n  [v.x, v.y, v.d] = [[pts[0]], [pts[1]], [d]];\n  for (let i = 2; i \u003c pts.length; i += 2) {\n    const x0 = pts[i - 2], y0 = pts[i - 1], dx = pts[i] - x0, dy = pts[i + 1] - y0, l = hypot(dx, dy), n = max(1, ceil(l / 0.4));\n    for (let k = 1; k \u003c= n; k++) v.x.push(x0 + (dx * k) / n), v.y.push(y0 + (dy * k) / n), v.d.push(d + (l * k) / n);\n    d += l;\n  }\n}\n\n// Branches grow level by level, shuffled so arteries and veins take their room\n// in turn; a branch bends away from the skin or another vessel, or stops.\nfunction grow(P) {\n  const occ = new Uint8Array(N);\n  const mark = (v) => v.x.forEach((x, i) => (occ[round(v.y[i]) * W + round(x)] = 1));\n  P.ves.forEach(mark);\n  let front = P.ves.slice();\n  for (let lv = 1; lv \u003c= 4; lv++) {\n    const next = [];\n    front.sort(() => rnd() - 0.5);\n    for (const v of front) {\n      const n = v.x.length, want = v.kind >= 2 ? 2 : 1;\n      for (let s = GAP[lv] * rnd(); s \u003c n * 0.4 - 0.8; s += GAP[lv] * (0.6 + 0.8 * rnd())) {\n        const i = min(n - 2, round(s / 0.4)), len = LEN[lv] * (0.5 + rnd());\n        let a = atan2(v.y[i + 1] - v.y[i], v.x[i + 1] - v.x[i]) + (rnd() \u003c 0.5 ? -1 : 1) * (0.35 + 0.6 * rnd());\n        let x = v.x[i], y = v.y[i];\n        const pts = [x, y];\n        for (let st = 1; st \u003c= len; st++) {\n          a += (rnd() - 0.5) * 0.7;\n          const turn = TURN.find((tu) => {\n            const nx = x + cos(a + tu), ny = y + sin(a + tu);\n            const q = round(ny) * W + round(nx);\n            return P.room[q] === want && (st \u003c 2 + v.r || !occ[q]);\n          });\n          if (turn === undefined) break;\n          a += turn;\n          pts.push((x += cos(a)), (y += sin(a)));\n        }\n        if (pts.length \u003c 6) continue;\n        const b = { kind: v.kind, parent: v, r: RAD[lv], pts, lv, d0: v.d[i] };\n        samples(b), mark(b), next.push(b);\n      }\n    }\n    P.ves.push(...(front = next));\n  }\n}\n\n// The vessels Detail shows in a red and a blue layer: weight, key (seconds\n// after a beat), level, pulse or flow. Low detail draws the trunks bold.\nfunction raster(P, det) {\n  for (const k of [\"wR\", \"kR\", \"lR\", \"mR\", \"wB\", \"kB\", \"lB\", \"mB\"]) (P[k] = P[k] || F32(N)).fill(0);\n  for (const v of P.ves) {\n    const vis = clamp(((det - 1) * 7) / 6 + 1.5 - v.lv, 0, 1);\n    if (vis \u003c= 0) continue;\n    const red = v.kind === 0 || v.kind === 3, flow = v.kind & 1;\n    const [w, kk, l, mo] = red ? [P.wR, P.kR, P.lR, P.mR] : [P.wB, P.kB, P.lB, P.mB];\n    const r = v.r * (v.lv ? 1 : 1.25 - 0.15 * (det - 1)), g = v.lv ? 0 : 0.9, e0 = r + g + 0.5;\n    for (let i = 0; i \u003c v.x.length; i++) {\n      const x = v.x[i], y = v.y[i], key = flow ? max(0, 0.3 + (125 - v.d[i]) / CV) : v.d[i] / CA;\n      for (let py = max(0, ceil(y - e0)); py \u003c= min(H - 1, floor(y + e0)); py++)\n        for (let px = max(0, ceil(x - e0)); px \u003c= min(W - 1, floor(x + e0)); px++) {\n          const e = hypot(px - x, py - y), p = py * W + px;\n          let a = clamp(r + 0.5 - e, 0, 1);\n          if (g) a = max(a, 0.16 * clamp(e0 - e, 0, 1));\n          if ((a *= vis) > w[p]) [w[p], kk[p], l[p], mo[p]] = [a, key, v.lv, flow];\n        }\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  if (!P.ves) setup(P);\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.chart = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 1, 5), det = clamp(k[2], 1, 4), E = (P.E = clamp(k[3], 0, 1));\n  if (abs(det - P.det) > 0.02) raster(P, (P.det = det));\n  let kick = false;\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.adr = 1;\n    if (P.t - P.last > 0.28) [P.ph, kick] = [1, true];\n  }\n  P.adr *= exp(-dt / 5);\n  P.bpm = min(200, 36 * rate * (1 + 0.6 * E * E) + 75 * P.adr);\n  const T = (P.T = 60 / P.bpm);\n  P.tsys = clamp(0.16 + 0.17 * T, 0.2, 0.36);\n  P.stroke = 1 + 0.45 * E + 0.5 * P.adr;\n  if (!P.started) {\n    // Open as if the heart had been beating for a while.\n    P.started = true;\n    for (let i = 12; i >= 1; i--) P.beats.push([-(i - 0.6) * T, P.stroke]);\n    [P.ph, P.last, P.brPh] = [0.6, -0.6 * T, 0.15];\n  }\n  P.t += dt;\n  if ((P.ph += dt / T) >= 1) {\n    P.last = P.t - (P.ph = kick ? 0 : P.ph % 1) * T;\n    P.beats.push([P.last, P.stroke * (kick ? 1.5 : 1)]);\n  }\n  while (P.beats.length && P.t - P.beats[0][0] > 5.6) P.beats.shift();\n  P.brPh += dt / max(1, 4.4 - 2.6 * E - 1.2 * P.adr);\n  P.br = (0.5 - 0.5 * cos(2 * PI * P.brPh)) * (0.55 + 0.45 * E + 0.4 * P.adr);\n  P.eh = (P.eh + dt * 16) % 18;\n  tables(P), readout(P);\n}\n\n// Each beat's waves by the time since it: TA the sharp arterial pulse with its\n// dicrotic notch, TP the softer flush of the tissue, TV the venous swell.\nfunction tables(P) {\n  const { TA, TV, TP, t } = P, td = 0.13 * (1 + 0.4 * P.E);\n  TA.fill(0), TV.fill(0), TP.fill(0);\n  const span = (age, a, b, fn) => {\n    for (let k = max(0, ceil((age - a) * KS)); k \u003c= min(KN - 1, floor((age + b) * KS)); k++) fn(k, age - k / KS);\n  };\n  for (const [tb, a] of P.beats) {\n    const age = t - tb;\n    span(age, 0.9, 0, (k, s) => (TA[k] += a * ((1 - exp(-s / 0.02)) * exp(-s / td) + 0.22 * g2((s - 0.3) / 0.05))));\n    span(age, 1.4, 0, (k, s) => (TP[k] += a * (1 - exp(-s / 0.06)) * exp(-s / 0.26)));\n    span(age, 0.4, 0.4, (k, s) => (TV[k] += a * g2(s / 0.13)));\n  }\n}\n\nconst look = (T, key) => {\n  const f = key * KS, i = f | 0;\n  return i \u003c KN - 1 ? T[i] + (T[i + 1] - T[i]) * (f - i) : 0;\n};\n\nfunction ecgAt(P, tt) {\n  let v = 0;\n  for (const [tb] of P.beats) {\n    const s = tt - tb;\n    if (s > -0.3 && s \u003c 0.6)\n      v += 0.13 * g2((s + 0.16) / 0.03) - 0.12 * g2((s + 0.022) / 0.01) + g2(s / 0.016) - 0.28 * g2((s - 0.03) / 0.012) + 0.3 * g2((s - P.tsys + 0.07) / 0.055);\n  }\n  return v;\n}\n\n// The monitor beside the feet: an ECG sweep on the left, the rate on the right.\nfunction readout(P) {\n  const { hud } = P;\n  hud.fill(0, 100 * W, 120 * W);\n  for (let y = 104; y \u003c 117; y += 3) for (let x = 2; x \u003c 19; x += 3) hud[y * W + x] = 0.12;\n  for (let c = 0; c \u003c 18; c++) {\n    const a = (P.eh - c + 18) % 18;\n    if (a > 16.4) continue;\n    let lo = 999, hi = 0;\n    for (let s = 0; s \u003c= 6; s++) {\n      const yy = round(112 - 8 * ecgAt(P, P.t - (a + s / 6) / 16));\n      [lo, hi] = [min(lo, yy), max(hi, yy)];\n    }\n    for (let y = max(101, lo); y \u003c= min(118, hi); y++) hud[y * W + c + 1] = a \u003c 1 ? 1 : 0.95 - (0.55 * a) / 18;\n  }\n  const fl = 0.45 + 0.55 * g2((P.t - P.last - 0.05) / 0.08);\n  HEART.forEach((row, j) => {\n    for (let i = 0; i \u003c 5; i++) if ((row >> (4 - i)) & 1) hud[(105 + j) * W + 46 + i] = fl;\n  });\n  const put = (s, x0, y0, b) => {\n    for (let n = 0; n \u003c s.length; n++)\n      for (let q = 0; q \u003c 15; q++) if ((GLYPH[s[n]] >> (14 - q)) & 1) hud[(y0 + ((q / 3) | 0)) * W + x0 + n * 4 + (q % 3)] = b;\n  };\n  const txt = String(round(P.bpm));\n  put(txt, 63 - txt.length * 4, 105, 0.95);\n  put(\"BPM\", 51, 112, 0.55);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.wR) return;\n  const { m, rim, dep, core, geo, bone, tex, mus, hud, TA, TV, TP, wR, kR, lR, mR, wB, kB, lB, mB, f, c0, c1, E, br } = P;\n  const fc = P.chart * 2, i0 = min(1, floor(fc)), u = smooth(0.3, 0.7, fc - i0);\n  // The heart squeezes in systole and flashes on the first sound, less on the second.\n  const since = P.t - P.last, sys = since \u003c P.tsys ? sin((PI * since) / P.tsys) ** 0.7 : 0;\n  const s = 1 - (0.1 + 0.08 * E + 0.05 * P.adr) * sys;\n  const flash = g2((since - 0.03) / 0.06) + 0.6 * g2((since - P.tsys) / 0.045);\n  // The more capillaries drawn, the more the skin flushes as a pulse passes.\n  const bla = 0.3 + 0.24 * (P.det - 1);\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      Object.assign(f, { y, m: m[p], rim: rim[p], dep: dep[p], core: core[p], mus: mus[p], bone: bone[p], hud: hud[p], lw: 0, hw: 0, ho: 0 });\n      f.bl = m[p] > 0 ? look(TP, geo[p] / CA + 0.04) * (bla + 0.3 * E + 0.7 * E * mus[p]) : 0;\n      if (x > 17 && x \u003c 46 && y > 24 && y \u003c 54) {\n        const e0 = lung(x, y, 0, br), e1 = lung(x, y, 1, br), e = min(e0, e1), L = LUNG[e0 \u003c e1 ? 0 : 1];\n        if (e \u003c 1.05) {\n          f.lw = clamp((1.03 - e) * 7, 0, 1) * m[p];\n          f.lrim = clamp(1 - abs(e - 0.92) / 0.1, 0, 1);\n          f.ox = clamp(0.2 + 0.4 * br + 0.5 * look(TP, hypot(x - L[4], y - L[5]) / 40 + 0.06), 0, 1.2);\n          f.lt = tex[p];\n        }\n      }\n      if ((f.wb = wB[p]) > 0) [f.bm, f.bp, f.lb] = [mB[p], look(mB[p] ? TV : TA, kB[p]), lB[p]];\n      if ((f.wr = wR[p]) > 0) [f.rm, f.rp, f.lr] = [mR[p], look(mR[p] ? TV : TA, kR[p]), lR[p]];\n      if (x > 24 && x \u003c 45 && y > 27 && y \u003c 49) {\n        const e = heart(P, x, y, s);\n        f.ho = clamp((1.3 - e) * 5, 0, 1);\n        if (e \u003c 1.1) {\n          f.hw = clamp((1.02 - e) * 5, 0, 1);\n          f.hs = smooth(-0.9, 0.3, P.hu);\n          f.hr = clamp(1 - abs(e - 0.86) / 0.16, 0, 1);\n          f.hb = 0.62 + 0.45 * flash + 0.2 * sys - (abs(P.hu + 0.3) \u003c 0.4 && P.hv > -2 ? 0.25 : 0);\n        }\n      }\n      if (i0 === 0) anat(f, c0);\n      else pal(f, CHARTS[1], c0, E);\n      if (u > 0) {\n        pal(f, CHARTS[i0 + 1], c1, E);\n        for (let c = 0; c \u003c 3; c++) c0[c] += (c1[c] - c0[c]) * u;\n      }\n      display.setPixel(x, y, min(255, c0[0]), min(255, c0[1]), min(255, c0[2]));\n    }\n}\n\n// Lerp o toward the colour c at brightness b by w; past full brightness it\n// runs toward a hot pale core.\nfunction tint(o, c, b, w) {\n  const k = min(b, 1), h = max(0, b - 1) * 0.9;\n  o[0] += (c[0] * k + 255 * h - o[0]) * w;\n  o[1] += (c[1] * k + 190 * h - o[1]) * w;\n  o[2] += (c[2] * k + 170 * h - o[2]) * w;\n}\n\n// The anatomical chart: a pale ghost of a body on a slate ground.\nfunction anat(f, o) {\n  const top = 1 - f.y / H, t = f.rim, bl = f.bl;\n  [o[0], o[1], o[2]] = [2 + 3 * top, 5 + 5 * top, 12 + 9 * top];\n  if (f.m > 0) tint(o, [18 + 34 * t + 8 * f.dep + 80 * bl, 26 + 44 * t + 10 * f.dep + 14 * bl, 42 + 50 * t + 16 * f.dep + 40 * bl], 1, f.m);\n  if (f.lw > 0) {\n    const ox = f.ox;\n    tint(o, [70 + 170 * ox, 60 + 30 * ox, 160 - 40 * ox], f.lt * (0.55 + 0.35 * ox) + 0.35 * f.lrim, f.lw);\n  }\n  const vb = () => f.wb > 0 && tint(o, BLUE[f.lb], (f.bm ? 0.36 + 0.8 * f.bp : 0.4 + 1.05 * f.bp) + 0.04 * f.lb, f.wb);\n  const vr = () => f.wr > 0 && tint(o, RED[f.lr], (f.rm ? 0.36 + 0.8 * f.rp : 0.32 + 1.05 * f.rp) + 0.05 * f.lr, f.wr);\n  // The vessel that owns the LED is drawn last.\n  if (f.wb > f.wr) vr(), vb();\n  else vb(), vr();\n  for (let c = 0; c \u003c 3; c++) o[c] *= 1 - 0.55 * f.ho;\n  if (f.hw > 0) {\n    const hs = f.hs, b = f.hb, k = 0.45 * f.hr;\n    tint(o, [(70 + 170 * hs) * b + 255 * k, (80 - 45 * hs) * b + 170 * k, (230 - 185 * hs) * b + 180 * k], 1, f.hw);\n  }\n  [40, 235, 140].forEach((c, i) => (o[i] += c * f.hud));\n}\n\n// The angiogram and the thermal chart: one value, then its colour table.\nfunction pal(f, c, o, E) {\n  const [lt, bg, t0, rim, dep, core, bl, mus, heat, bone, lung, ox, a0, a1, v0, v1, h0, h1, hud] = c;\n  let v = bg * (1.2 - (0.6 * f.y) / H);\n  if (f.m > 0) v += (t0 + rim * f.rim + dep * f.dep + core * f.core + bl * f.bl + (heat + mus * f.mus) * E - v) * f.m;\n  if (f.lw > 0) v += (lung + ox * f.ox * f.lt - v) * f.lw;\n  v += (bone - v) * f.bone * f.m * (bone > 0);\n  if (f.wb > 0) v += ((f.bm ? v0 + v1 * f.bp : a0 * 0.9 + a1 * f.bp) * (1 - 0.08 * f.lb) - v) * f.wb;\n  if (f.wr > 0) v += ((f.rm ? v0 + v1 * f.rp : a0 + a1 * f.rp) * (1 - 0.08 * f.lr) - v) * f.wr;\n  v *= 1 - 0.35 * f.ho;\n  if (f.hw > 0) v += (h0 + h1 * (f.hb - 0.62) + 0.15 * f.hr - v) * f.hw;\n  const i = clamp(round(max(v, f.hud * hud) * 255), 0, 255) * 3;\n  [o[0], o[1], o[2]] = [lt[i], lt[i + 1], lt[i + 2]];\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Chart=0..1, Rate=1..5, Detail=1..4, Effort=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Chart","min":0,"max":1,"about":"The red and blue anatomical chart at 0, an angiogram with the skeleton showing at 0.5, a thermal camera at 1."},{"name":"Rate","min":1,"max":5,"about":"The resting heart rate, 36 a minute at 1, 72 at 2, 180 at 5; the faster, the closer the pulses follow each other."},{"name":"Detail","min":1,"max":4,"about":"How far the vessels branch, from the named arteries and veins drawn bold at 1 to the capillaries at 4."},{"name":"Effort","min":0,"max":1,"about":"From rest to a hard run: the heart beats faster and harder, the breath deepens and the arms and legs flush with blood."}],"start":[0,2,1,0.06],"measures":{"motion":0.3125,"detail":0.0474,"edges":0.3512,"complexity":1.0533,"coverage":0.3719,"colour":0.2033,"drift":0.0315},"knobResponse":[0.1504,0.046,0.0247,0.0525]},{"slug":"climber","title":"Climber","family":"pixel","round":2,"note":"빨간 목도리를 맨 꼬마가 혼자서 끝없는 탑의 턱을 뛰어올라요. K4 를 돌리면 한낮에서 노을을 지나 횃불 켜진 밤이 돼요.","idea":"A hooded climber with a red scarf plays its own platform game up an endless tower: it runs to the edge of a ledge, jumps for the next one, grabs the odd coin, and the brick wall and the sky through its windows slide past at their own depths.","buttons":"K1 tap makes the climber jump now, and again in the air.","code":"// ===== Patternflow pattern =====\n// Title:   Climber\n// Family:  pixel\n// Idea:    A hooded climber with a red scarf plays its own platform game up an endless tower: it runs to the edge of a ledge, jumps for the next one, grabs the odd coin, and the brick wall and the sky through its windows slide past at their own depths.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.3..3.5, Gap=16..34, Sky=0..1\n//\n// Knob 1: Hue. The stone of the tower and its ledges; the climber keeps its own colours.\n// Knob 2: Speed. How fast the climber runs and jumps, and with it how fast the tower goes by.\n// Knob 3: Gap. How far apart the ledges are, from quick hops to long leaps with the climber high in the air.\n// Knob 4: Sky. The time of day through the windows, from noon through sunset to night, when the torches on the wall are lit.\n// Buttons: K1 tap makes the climber jump now, and again in the air.\n\nconst W = 64;\nconst H = 128;\nconst LEDGES = 24;\nconst COIN_SPARKS = 24;\nconst GRAVITY = 300;\nconst RUN = 24;\n// Height of the wall pattern's repeat: one window and one torch per band.\nconst BAND = 44;\n\nconst IDLE = 0;\nconst RUN1 = 1;\nconst RUN2 = 2;\nconst RUN3 = 3;\nconst JUMP = 4;\nconst FALL = 5;\n\n// The climber faces right; 8 wide, 8 tall, feet on the bottom row.\nconst POSES = [\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \".r.gggs.\",\n    \"...p.p..\",\n    \"...b.b..\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \"r..gggs.\",\n    \"..pp..p.\",\n    \".bb....b\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \".rrggg..\",\n    \"rr.ggs..\",\n    \"...pp...\",\n    \"...bb...\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \".r.gggs.\",\n    \"...p.pp.\",\n    \"..b...bb\",\n  ],\n  [\n    \"...ooo.s\",\n    \"..ooooos\",\n    \"..ossse.\",\n    \"r.oosss.\",\n    \"rrrggg..\",\n    \"...ggg..\",\n    \"..pp.pp.\",\n    \"..b...b.\",\n  ],\n  [\n    \"rr.ooo..\",\n    \".rooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"s..ggg.s\",\n    \"...ggg..\",\n    \"...p.p..\",\n    \"...b.b..\",\n  ],\n];\nconst CLIMBER = { o: 0xeaf0fa, s: 0xffac6a, e: 0x141414, r: 0xff2a2a, g: 0x2fa85a, p: 0x2a3a8a, b: 0x8a4a1e };\n\nconst COIN = [\n  [\".yyy.\", \"yhyyd\", \"yhyyd\", \"yyyyd\", \".ddd.\"],\n  [\"..y..\", \".hyd.\", \".hyd.\", \".yyd.\", \"..d..\"],\n  [\"..y..\", \"..h..\", \"..y..\", \"..y..\", \"..d..\"],\n];\nconst COIN_PAL = { y: 0xffc818, h: 0xfff6b0, d: 0xc08000 };\n\n// 3x5 digits for the coin count, one octal digit per row from the top.\nconst DIGITS = [0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717];\n\n// Sky through the windows, top and bottom colour, at noon, sunset and night.\nconst SKIES = [\n  [0x3a8cf0, 0x9ad4ff],\n  [0x4a2a86, 0xff8a4a],\n  [0x040822, 0x101c50],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, lo, hi) {\n  return v \u003c lo ? lo : v > hi ? hi : v;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Sprite strings become palette indices once, in setup.\nfunction bake(frames, colours) {\n  const keys = Object.keys(colours);\n  const h = frames[0].length;\n  const w = frames[0][0].length;\n  const pix = new Uint8Array(frames.length * w * h);\n  for (let f = 0; f \u003c frames.length; f++)\n    for (let y = 0; y \u003c h; y++)\n      for (let x = 0; x \u003c w; x++) pix[(f * h + y) * w + x] = keys.indexOf(frames[f][y][x]) + 1;\n  const pal = new Float32Array((keys.length + 1) * 3);\n  for (let i = 0; i \u003c keys.length; i++) {\n    const c = colours[keys[i]];\n    pal[(i + 1) * 3] = (c >> 16) & 255;\n    pal[(i + 1) * 3 + 1] = (c >> 8) & 255;\n    pal[(i + 1) * 3 + 2] = c & 255;\n  }\n  return { w, h, pix, pal };\n}\n\n// The topmost ledge gets a new one above it, a gap up and to one side.\nfunction addLedge(p) {\n  const top = p.top;\n  const i = (top + 1) % LEDGES;\n  const gap = p.gap * (0.85 + Math.random() * 0.3);\n  const width = 12 + Math.floor(Math.random() * 13);\n  const prevMid = (p.lx0[top] + p.lx1[top]) * 0.5;\n  let mid = prevMid + (Math.random() \u003c 0.5 ? -1 : 1) * (8 + Math.random() * 18);\n  if (mid \u003c 2 + width / 2 || mid > W - 2 - width / 2) mid = prevMid + (prevMid \u003c W / 2 ? 1 : -1) * (8 + Math.random() * 18);\n  const x0 = Math.round(clamp(mid - width / 2, 2, W - 2 - width));\n  p.lx0[i] = x0;\n  p.lx1[i] = x0 + width;\n  p.ly[i] = Math.round(p.ly[top] - gap);\n  p.coin[i] = Math.random() \u003c 0.4 ? 1 : 0;\n  p.coinX[i] = x0 + 2 + Math.random() * (width - 4);\n  p.top = i;\n}\n\nfunction next(i) {\n  return (i + 1) % LEDGES;\n}\n\n// Plans the next jump: where on the ledge above to land, and where to take off from.\nfunction plan(p) {\n  const n = next(p.on);\n  p.target = n;\n  const landX = p.coin[n] ? p.coinX[n] : p.lx0[n] + 2 + Math.random() * (p.lx1[n] - p.lx0[n] - 4);\n  p.landX = landX;\n  let dir = Math.sign(landX - p.cx);\n  if (dir === 0) dir = Math.random() \u003c 0.5 ? -1 : 1;\n  p.takeoff = clamp(landX - dir * (5 + Math.random() * 9), p.lx0[p.on] + 1, p.lx1[p.on] - 1);\n}\n\nfunction jump(p, from) {\n  const n = p.target;\n  const rise = Math.max(4, p.cy - p.ly[n]) + 5;\n  const up = Math.sqrt((2 * rise) / GRAVITY);\n  const down = Math.sqrt((2 * 5) / GRAVITY);\n  p.vy = -GRAVITY * up;\n  p.vx = clamp((p.landX - from) / (up + down), -70, 70);\n  p.air = true;\n  p.doubled = false;\n  if (p.vx !== 0) p.face = p.vx > 0 ? 1 : -1;\n}\n\nfunction step(p, dt) {\n  p.t += dt;\n  // Keep ledges above the top of the screen, and recycle the ones that left the bottom.\n  while (p.ly[p.top] > p.cam - 40) addLedge(p);\n\n  if (!p.air && p.land > 0) {\n    // Catching its breath after a landing.\n  } else if (!p.air) {\n    const dx = p.takeoff - p.cx;\n    if (Math.abs(dx) \u003c= RUN * dt + 0.01) {\n      p.cx = p.takeoff;\n      jump(p, p.cx);\n    } else {\n      p.face = dx > 0 ? 1 : -1;\n      p.cx += p.face * RUN * dt;\n      p.runPhase += dt * RUN * 0.22;\n    }\n  } else {\n    const before = p.cy;\n    p.vy += GRAVITY * dt;\n    p.cx = clamp(p.cx + p.vx * dt, 3, W - 4);\n    p.cy += p.vy * dt;\n    if (p.vy > 0) {\n      for (let i = 0; i \u003c LEDGES; i++) {\n        const y = p.ly[i];\n        if (before \u003c= y && p.cy >= y && p.cx >= p.lx0[i] - 1 && p.cx \u003c= p.lx1[i] + 1) {\n          p.cy = y;\n          p.air = false;\n          p.on = i;\n          p.land = Math.random() \u003c 0.2 ? 0.5 : 0.1;\n          plan(p);\n          break;\n        }\n      }\n    }\n    // Fell past the bottom of the screen: drop back in on a ledge in view.\n    if (p.air && p.cy > p.cam + H + 12) {\n      let best = -1;\n      for (let i = 0; i \u003c LEDGES; i++) {\n        if (p.ly[i] \u003c p.cam + 30 || p.ly[i] > p.cam + H - 20) continue;\n        if (best \u003c 0 || p.ly[i] > p.ly[best]) best = i;\n      }\n      if (best >= 0) {\n        p.on = best;\n        p.cx = (p.lx0[best] + p.lx1[best]) * 0.5;\n        p.cy = p.ly[best];\n        p.air = false;\n        plan(p);\n      }\n    }\n  }\n  p.land = Math.max(0, p.land - dt);\n\n  // A coin is taken when the climber's body passes over it.\n  for (let i = 0; i \u003c LEDGES; i++) {\n    if (!p.coin[i]) continue;\n    const cy = p.ly[i] - 6;\n    if (Math.abs(p.coinX[i] - p.cx) \u003c 4 && cy > p.cy - 10 && cy \u003c p.cy + 2) {\n      p.coin[i] = 0;\n      p.coins = (p.coins + 1) % 1000;\n      for (let s = 0; s \u003c 6; s++) {\n        const k = p.sparkNext;\n        p.sparkNext = (k + 1) % COIN_SPARKS;\n        const a = (s / 6) * Math.PI * 2 + 0.3;\n        p.sx[k] = p.coinX[i];\n        p.sy[k] = cy;\n        p.svx[k] = Math.cos(a) * 30;\n        p.svy[k] = Math.sin(a) * 30 - 10;\n        p.slife[k] = 0.45;\n      }\n    }\n  }\n  for (let k = 0; k \u003c COIN_SPARKS; k++) {\n    if (p.slife[k] \u003c= 0) continue;\n    p.slife[k] -= dt;\n    p.sx[k] += p.svx[k] * dt;\n    p.sy[k] += p.svy[k] * dt;\n  }\n\n  // The camera only climbs; it keeps the climber a little below the middle.\n  const want = p.cy - H * 0.6;\n  if (want \u003c p.cam) p.cam += (want - p.cam) * Math.min(1, dt * 2.5);\n}\n\nexport function setup(params) {\n  const p = params;\n  p.climber = bake(POSES, CLIMBER);\n  p.coinArt = bake(COIN, COIN_PAL);\n  p.lx0 = new Int16Array(LEDGES);\n  p.lx1 = new Int16Array(LEDGES);\n  p.ly = new Float64Array(LEDGES);\n  p.coin = new Uint8Array(LEDGES);\n  p.coinX = new Float32Array(LEDGES);\n  p.sx = new Float32Array(COIN_SPARKS);\n  p.sy = new Float32Array(COIN_SPARKS);\n  p.svx = new Float32Array(COIN_SPARKS);\n  p.svy = new Float32Array(COIN_SPARKS);\n  p.slife = new Float32Array(COIN_SPARKS);\n  p.sparkNext = 0;\n  p.buf = new Float32Array(W * H * 3);\n  p.stone = new Float32Array(3);\n  p.ledge = new Float32Array(3);\n  p.skyTop = new Float32Array(3);\n  p.skyLow = new Float32Array(3);\n  p.ready = false;\n  p.t = 0;\n  p.coins = 0;\n  p.gap = 20;\n}\n\nfunction start(p) {\n  // The ground floor, full width, then ledges above it.\n  p.top = 0;\n  p.lx0[0] = 2;\n  p.lx1[0] = W - 2;\n  p.ly[0] = 0;\n  p.coin[0] = 0;\n  for (let i = 1; i \u003c LEDGES; i++) p.ly[i] = 1e9;\n  p.cam = -H + 6;\n  p.cx = 12;\n  p.cy = 0;\n  p.vx = 0;\n  p.vy = 0;\n  p.air = false;\n  p.face = 1;\n  p.on = 0;\n  p.land = 0;\n  p.runPhase = 0;\n  for (let i = 0; i \u003c 12; i++) addLedge(p);\n  plan(p);\n  // Climb a while before the first frame, so the tower is already under way.\n  for (let s = 0; s \u003c 150; s++) step(p, 1 / 30);\n  p.coins = 0;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 16, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.hue = k[0];\n  p.gap = clamp(k[2], 8, 60);\n  p.sky = clamp(k[3], 0, 1);\n  if (!p.ready) {\n    p.ready = true;\n    start(p);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (!p.air) jump(p, p.cx);\n    else if (!p.doubled) {\n      p.doubled = true;\n      p.vy = -GRAVITY * 0.32;\n    }\n  }\n  step(p, dt * Math.max(0.1, k[1] * 0.5));\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const buf = p.buf;\n  const night = p.sky;\n  // Noon to sunset over the first half of the knob, sunset to night over the second.\n  const u = night * 2;\n  const a = Math.min(1, Math.floor(u));\n  const f = u - a;\n  for (let c = 0; c \u003c 3; c++) {\n    const sh = 16 - c * 8;\n    p.skyTop[c] = ((SKIES[a][0] >> sh) & 255) * (1 - f) + ((SKIES[a + 1][0] >> sh) & 255) * f;\n    p.skyLow[c] = ((SKIES[a][1] >> sh) & 255) * (1 - f) + ((SKIES[a + 1][1] >> sh) & 255) * f;\n  }\n  const dusk = clamp((night - 0.35) / 0.5, 0, 1);\n  const lightness = 1 - 0.55 * dusk;\n  const hue = p.hue + 0.72;\n  hsv(hue, 0.32, 0.3 * lightness, p.stone, 0);\n  hsv(hue + 0.02, 0.42, 0.8 * (1 - 0.35 * dusk), p.ledge, 0);\n  const stone = p.stone;\n  const cam = Math.round(p.cam);\n  const wall = Math.round(p.cam * 0.5);\n  const far = Math.round(p.cam * 0.2);\n\n  for (let y = 0; y \u003c H; y++) {\n    const ly = y + wall;\n    const band = Math.floor(ly / BAND);\n    const by = ly - band * BAND;\n    const brickRow = Math.floor(ly / 4);\n    const seam = (ly & 3) === 0;\n    // One arched window a band, on alternate sides.\n    const wx = (band & 1 ? 9 : 43) + Math.floor(hash(band, 1) * 5);\n    const wy = by - 10;\n    let w0 = 99;\n    let w1 = -99;\n    if (wy >= 0 && wy \u003c 16) {\n      const inset = wy === 0 ? 3 : wy === 1 ? 1 : 0;\n      w0 = wx + inset;\n      w1 = wx + 10 - inset;\n    }\n    const sky = clamp(wy / 15, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      if (x >= w0 && x \u003c w1) {\n        // Through the window: the sky, its clouds or its stars, much further away.\n        let r = p.skyTop[0] * (1 - sky) + p.skyLow[0] * sky;\n        let g = p.skyTop[1] * (1 - sky) + p.skyLow[1] * sky;\n        let b = p.skyTop[2] * (1 - sky) + p.skyLow[2] * sky;\n        const fy = y + far;\n        const fx = x + Math.floor(p.t * 3);\n        const cell = Math.floor(fy / 18);\n        const cx = Math.floor(hash(cell, 7) * 64);\n        const dx = ((fx - cx) % 64 + 96) % 64 - 32;\n        const dy = fy - cell * 18 - 9;\n        const cloud = dx * dx * 0.08 + dy * dy * 0.6 \u003c 4 + 3 * hash(cell, 9);\n        if (cloud && night \u003c 0.85) {\n          const cv = 1 - night * 0.7;\n          r = 235 * cv + r * 0.1;\n          g = 225 * cv + g * 0.1;\n          b = 235 * cv + b * 0.1;\n        } else if (night > 0.6 && hash(fx, fy) > 0.965) {\n          const s = (night - 0.6) * 2.5 * (0.6 + 0.4 * Math.sin(p.t * 3 + fx));\n          r += 220 * s;\n          g += 220 * s;\n          b += 200 * s;\n        }\n        buf[o] = r;\n        buf[o + 1] = g;\n        buf[o + 2] = b;\n      } else {\n        const col = Math.floor((x + (brickRow & 1) * 4) / 8);\n        const seamX = ((x + (brickRow & 1) * 4) & 7) === 0;\n        // Flat bricks and dark mortar, the way a tile set draws a wall.\n        let v = seam || seamX ? 0.32 : 0.97 + 0.06 * hash(brickRow, col);\n        // The window's frame and sill.\n        if (wy >= -1 && wy \u003c= 16 && x >= wx - 1 && x \u003c= wx + 10) v = wy === 16 ? 1.7 : 1.35;\n        buf[o] = stone[0] * v;\n        buf[o + 1] = stone[1] * v;\n        buf[o + 2] = stone[2] * v;\n      }\n    }\n  }\n\n  // Torches, one a band opposite the window, lit as the sky darkens.\n  const firstBand = Math.floor(wall / BAND) - 1;\n  for (let band = firstBand; band \u003c= firstBand + 4; band++) {\n    const tx = band & 1 ? 47 : 13;\n    const ty = band * BAND + 22 - wall;\n    if (ty \u003c -12 || ty > H + 12) continue;\n    const lit = clamp((night - 0.3) / 0.4, 0, 1);\n    if (lit > 0) {\n      const flick = 0.85 + 0.15 * Math.sin(p.t * 11 + band * 3) * Math.sin(p.t * 7.3 + band);\n      for (let y = ty - 12; y \u003c= ty + 12; y++) {\n        if (y \u003c 0 || y >= H) continue;\n        for (let x = tx - 12; x \u003c= tx + 12; x++) {\n          if (x \u003c 0 || x >= W) continue;\n          const d = Math.sqrt((x - tx) * (x - tx) + (y - ty + 2) * (y - ty + 2)) / 12;\n          if (d >= 1) continue;\n          const g = (1 - d) * (1 - d) * lit * flick;\n          const o = (y * W + x) * 3;\n          buf[o] += 150 * g;\n          buf[o + 1] += 80 * g;\n          buf[o + 2] += 20 * g;\n        }\n      }\n    }\n    // An iron sconce, and the torch's wooden head in it.\n    const iron = 70 + 60 * (1 - dusk);\n    put(buf, tx, ty + 2, iron, iron, iron * 1.1);\n    put(buf, tx, ty + 3, iron, iron, iron * 1.1);\n    put(buf, tx - 1, ty + 1, iron, iron, iron * 1.1);\n    put(buf, tx + 1, ty + 1, iron, iron, iron * 1.1);\n    put(buf, tx, ty + 1, 150, 90, 40);\n    if (lit > 0) {\n      const tip = Math.sin(p.t * 9 + band) > 0 ? 1 : 0;\n      put(buf, tx, ty, 255, 200 * lit + 40, 60);\n      put(buf, tx, ty - 1, 255, 150, 30);\n      put(buf, tx - 1 + tip * 2, ty - 1, 230, 110, 20);\n      put(buf, tx, ty - 2 - tip, 255, 230, 120);\n    }\n  }\n\n  // The tower's own walls left and right move with the ledges.\n  for (let y = 0; y \u003c H; y++) {\n    const wy = y + cam;\n    const row = Math.floor(wy / 3);\n    for (let x = 0; x \u003c 2; x++) {\n      const v = (wy % 3 + 3) % 3 === 0 ? 0.6 : 1.1 + 0.2 * hash(row, x);\n      put(buf, x, y, p.ledge[0] * v * 0.6, p.ledge[1] * v * 0.6, p.ledge[2] * v * 0.6);\n      put(buf, W - 1 - x, y, p.ledge[0] * v * 0.6, p.ledge[1] * v * 0.6, p.ledge[2] * v * 0.6);\n    }\n  }\n\n  const ledge = p.ledge;\n  for (let i = 0; i \u003c LEDGES; i++) {\n    const y0 = Math.round(p.ly[i]) - cam;\n    if (y0 \u003c -4 || y0 >= H) continue;\n    // A slab four LEDs deep: a lit top edge, two rows of face cut into blocks, and a shadow under a bevel.\n    for (let r = 0; r \u003c 4; r++) {\n      const v = r === 0 ? 1.25 : r === 1 ? 0.9 : r === 2 ? 0.72 : 0.42;\n      const inset = r === 3 ? 1 : 0;\n      for (let x = p.lx0[i] + inset; x \u003c p.lx1[i] - inset; x++) {\n        const s = (r === 1 || r === 2) && (x - p.lx0[i]) % 6 === 5 ? 0.55 : 1;\n        put(buf, x, y0 + r, ledge[0] * v * s, ledge[1] * v * s, ledge[2] * v * s);\n      }\n    }\n    if (p.coin[i]) {\n      const frame = [0, 1, 2, 1][Math.floor(p.t * 8 + i) & 3];\n      const bob = Math.sin(p.t * 4 + i) > 0 ? 1 : 0;\n      sprite(p, p.coinArt, frame, Math.round(p.coinX[i]) - 2, y0 - 8 - bob, true, 1);\n    }\n  }\n\n  let pose = IDLE;\n  if (p.air) pose = p.vy \u003c 0 ? JUMP : FALL;\n  else if (p.land \u003c= 0) pose = [RUN1, RUN2, RUN3, RUN2][Math.floor(p.runPhase) & 3];\n  const light = 1 - 0.25 * dusk;\n  sprite(p, p.climber, pose, Math.round(p.cx) - 4, Math.round(p.cy) - cam - 8, p.face > 0, light);\n\n  for (let k = 0; k \u003c COIN_SPARKS; k++) {\n    if (p.slife[k] \u003c= 0) continue;\n    put(buf, Math.round(p.sx[k]), Math.round(p.sy[k]) - cam, 255, 240, 150);\n  }\n\n  // The coin count, top left.\n  sprite(p, p.coinArt, 0, 3, 3, true, 1);\n  let n = p.coins;\n  let digits = 1;\n  while (n >= Math.pow(10, digits)) digits++;\n  for (let d = 0; d \u003c digits; d++) {\n    const v = Math.floor(n / Math.pow(10, digits - 1 - d)) % 10;\n    const bits = DIGITS[v];\n    for (let gy = 0; gy \u003c 5; gy++) {\n      const row = (bits >> ((4 - gy) * 3)) & 7;\n      for (let gx = 0; gx \u003c 3; gx++) if (row & (4 >> gx)) put(buf, 10 + d * 4 + gx, 3 + gy, 255, 236, 160);\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nfunction sprite(p, s, frame, ix, iy, right, light) {\n  const base = frame * s.w * s.h;\n  for (let y = 0; y \u003c s.h; y++) {\n    for (let x = 0; x \u003c s.w; x++) {\n      const c = s.pix[base + y * s.w + x];\n      if (!c) continue;\n      put(p.buf, ix + (right ? x : s.w - 1 - x), iy + y, s.pal[c * 3] * light, s.pal[c * 3 + 1] * light, s.pal[c * 3 + 2] * light);\n    }\n  }\n}\n","layer":{"id":"layer-climber","type":"code","name":"climber","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Climber\n// Family:  pixel\n// Idea:    A hooded climber with a red scarf plays its own platform game up an endless tower: it runs to the edge of a ledge, jumps for the next one, grabs the odd coin, and the brick wall and the sky through its windows slide past at their own depths.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.3..3.5, Gap=16..34, Sky=0..1\n//\n// Knob 1: Hue. The stone of the tower and its ledges; the climber keeps its own colours.\n// Knob 2: Speed. How fast the climber runs and jumps, and with it how fast the tower goes by.\n// Knob 3: Gap. How far apart the ledges are, from quick hops to long leaps with the climber high in the air.\n// Knob 4: Sky. The time of day through the windows, from noon through sunset to night, when the torches on the wall are lit.\n// Buttons: K1 tap makes the climber jump now, and again in the air.\n\nconst W = 64;\nconst H = 128;\nconst LEDGES = 24;\nconst COIN_SPARKS = 24;\nconst GRAVITY = 300;\nconst RUN = 24;\n// Height of the wall pattern's repeat: one window and one torch per band.\nconst BAND = 44;\n\nconst IDLE = 0;\nconst RUN1 = 1;\nconst RUN2 = 2;\nconst RUN3 = 3;\nconst JUMP = 4;\nconst FALL = 5;\n\n// The climber faces right; 8 wide, 8 tall, feet on the bottom row.\nconst POSES = [\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \".r.gggs.\",\n    \"...p.p..\",\n    \"...b.b..\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \"r..gggs.\",\n    \"..pp..p.\",\n    \".bb....b\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \".rrggg..\",\n    \"rr.ggs..\",\n    \"...pp...\",\n    \"...bb...\",\n  ],\n  [\n    \"...ooo..\",\n    \"..ooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"rrrggg..\",\n    \".r.gggs.\",\n    \"...p.pp.\",\n    \"..b...bb\",\n  ],\n  [\n    \"...ooo.s\",\n    \"..ooooos\",\n    \"..ossse.\",\n    \"r.oosss.\",\n    \"rrrggg..\",\n    \"...ggg..\",\n    \"..pp.pp.\",\n    \"..b...b.\",\n  ],\n  [\n    \"rr.ooo..\",\n    \".rooooo.\",\n    \"..osses.\",\n    \"..oosss.\",\n    \"s..ggg.s\",\n    \"...ggg..\",\n    \"...p.p..\",\n    \"...b.b..\",\n  ],\n];\nconst CLIMBER = { o: 0xeaf0fa, s: 0xffac6a, e: 0x141414, r: 0xff2a2a, g: 0x2fa85a, p: 0x2a3a8a, b: 0x8a4a1e };\n\nconst COIN = [\n  [\".yyy.\", \"yhyyd\", \"yhyyd\", \"yyyyd\", \".ddd.\"],\n  [\"..y..\", \".hyd.\", \".hyd.\", \".yyd.\", \"..d..\"],\n  [\"..y..\", \"..h..\", \"..y..\", \"..y..\", \"..d..\"],\n];\nconst COIN_PAL = { y: 0xffc818, h: 0xfff6b0, d: 0xc08000 };\n\n// 3x5 digits for the coin count, one octal digit per row from the top.\nconst DIGITS = [0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717];\n\n// Sky through the windows, top and bottom colour, at noon, sunset and night.\nconst SKIES = [\n  [0x3a8cf0, 0x9ad4ff],\n  [0x4a2a86, 0xff8a4a],\n  [0x040822, 0x101c50],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, lo, hi) {\n  return v \u003c lo ? lo : v > hi ? hi : v;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Sprite strings become palette indices once, in setup.\nfunction bake(frames, colours) {\n  const keys = Object.keys(colours);\n  const h = frames[0].length;\n  const w = frames[0][0].length;\n  const pix = new Uint8Array(frames.length * w * h);\n  for (let f = 0; f \u003c frames.length; f++)\n    for (let y = 0; y \u003c h; y++)\n      for (let x = 0; x \u003c w; x++) pix[(f * h + y) * w + x] = keys.indexOf(frames[f][y][x]) + 1;\n  const pal = new Float32Array((keys.length + 1) * 3);\n  for (let i = 0; i \u003c keys.length; i++) {\n    const c = colours[keys[i]];\n    pal[(i + 1) * 3] = (c >> 16) & 255;\n    pal[(i + 1) * 3 + 1] = (c >> 8) & 255;\n    pal[(i + 1) * 3 + 2] = c & 255;\n  }\n  return { w, h, pix, pal };\n}\n\n// The topmost ledge gets a new one above it, a gap up and to one side.\nfunction addLedge(p) {\n  const top = p.top;\n  const i = (top + 1) % LEDGES;\n  const gap = p.gap * (0.85 + Math.random() * 0.3);\n  const width = 12 + Math.floor(Math.random() * 13);\n  const prevMid = (p.lx0[top] + p.lx1[top]) * 0.5;\n  let mid = prevMid + (Math.random() \u003c 0.5 ? -1 : 1) * (8 + Math.random() * 18);\n  if (mid \u003c 2 + width / 2 || mid > W - 2 - width / 2) mid = prevMid + (prevMid \u003c W / 2 ? 1 : -1) * (8 + Math.random() * 18);\n  const x0 = Math.round(clamp(mid - width / 2, 2, W - 2 - width));\n  p.lx0[i] = x0;\n  p.lx1[i] = x0 + width;\n  p.ly[i] = Math.round(p.ly[top] - gap);\n  p.coin[i] = Math.random() \u003c 0.4 ? 1 : 0;\n  p.coinX[i] = x0 + 2 + Math.random() * (width - 4);\n  p.top = i;\n}\n\nfunction next(i) {\n  return (i + 1) % LEDGES;\n}\n\n// Plans the next jump: where on the ledge above to land, and where to take off from.\nfunction plan(p) {\n  const n = next(p.on);\n  p.target = n;\n  const landX = p.coin[n] ? p.coinX[n] : p.lx0[n] + 2 + Math.random() * (p.lx1[n] - p.lx0[n] - 4);\n  p.landX = landX;\n  let dir = Math.sign(landX - p.cx);\n  if (dir === 0) dir = Math.random() \u003c 0.5 ? -1 : 1;\n  p.takeoff = clamp(landX - dir * (5 + Math.random() * 9), p.lx0[p.on] + 1, p.lx1[p.on] - 1);\n}\n\nfunction jump(p, from) {\n  const n = p.target;\n  const rise = Math.max(4, p.cy - p.ly[n]) + 5;\n  const up = Math.sqrt((2 * rise) / GRAVITY);\n  const down = Math.sqrt((2 * 5) / GRAVITY);\n  p.vy = -GRAVITY * up;\n  p.vx = clamp((p.landX - from) / (up + down), -70, 70);\n  p.air = true;\n  p.doubled = false;\n  if (p.vx !== 0) p.face = p.vx > 0 ? 1 : -1;\n}\n\nfunction step(p, dt) {\n  p.t += dt;\n  // Keep ledges above the top of the screen, and recycle the ones that left the bottom.\n  while (p.ly[p.top] > p.cam - 40) addLedge(p);\n\n  if (!p.air && p.land > 0) {\n    // Catching its breath after a landing.\n  } else if (!p.air) {\n    const dx = p.takeoff - p.cx;\n    if (Math.abs(dx) \u003c= RUN * dt + 0.01) {\n      p.cx = p.takeoff;\n      jump(p, p.cx);\n    } else {\n      p.face = dx > 0 ? 1 : -1;\n      p.cx += p.face * RUN * dt;\n      p.runPhase += dt * RUN * 0.22;\n    }\n  } else {\n    const before = p.cy;\n    p.vy += GRAVITY * dt;\n    p.cx = clamp(p.cx + p.vx * dt, 3, W - 4);\n    p.cy += p.vy * dt;\n    if (p.vy > 0) {\n      for (let i = 0; i \u003c LEDGES; i++) {\n        const y = p.ly[i];\n        if (before \u003c= y && p.cy >= y && p.cx >= p.lx0[i] - 1 && p.cx \u003c= p.lx1[i] + 1) {\n          p.cy = y;\n          p.air = false;\n          p.on = i;\n          p.land = Math.random() \u003c 0.2 ? 0.5 : 0.1;\n          plan(p);\n          break;\n        }\n      }\n    }\n    // Fell past the bottom of the screen: drop back in on a ledge in view.\n    if (p.air && p.cy > p.cam + H + 12) {\n      let best = -1;\n      for (let i = 0; i \u003c LEDGES; i++) {\n        if (p.ly[i] \u003c p.cam + 30 || p.ly[i] > p.cam + H - 20) continue;\n        if (best \u003c 0 || p.ly[i] > p.ly[best]) best = i;\n      }\n      if (best >= 0) {\n        p.on = best;\n        p.cx = (p.lx0[best] + p.lx1[best]) * 0.5;\n        p.cy = p.ly[best];\n        p.air = false;\n        plan(p);\n      }\n    }\n  }\n  p.land = Math.max(0, p.land - dt);\n\n  // A coin is taken when the climber's body passes over it.\n  for (let i = 0; i \u003c LEDGES; i++) {\n    if (!p.coin[i]) continue;\n    const cy = p.ly[i] - 6;\n    if (Math.abs(p.coinX[i] - p.cx) \u003c 4 && cy > p.cy - 10 && cy \u003c p.cy + 2) {\n      p.coin[i] = 0;\n      p.coins = (p.coins + 1) % 1000;\n      for (let s = 0; s \u003c 6; s++) {\n        const k = p.sparkNext;\n        p.sparkNext = (k + 1) % COIN_SPARKS;\n        const a = (s / 6) * Math.PI * 2 + 0.3;\n        p.sx[k] = p.coinX[i];\n        p.sy[k] = cy;\n        p.svx[k] = Math.cos(a) * 30;\n        p.svy[k] = Math.sin(a) * 30 - 10;\n        p.slife[k] = 0.45;\n      }\n    }\n  }\n  for (let k = 0; k \u003c COIN_SPARKS; k++) {\n    if (p.slife[k] \u003c= 0) continue;\n    p.slife[k] -= dt;\n    p.sx[k] += p.svx[k] * dt;\n    p.sy[k] += p.svy[k] * dt;\n  }\n\n  // The camera only climbs; it keeps the climber a little below the middle.\n  const want = p.cy - H * 0.6;\n  if (want \u003c p.cam) p.cam += (want - p.cam) * Math.min(1, dt * 2.5);\n}\n\nexport function setup(params) {\n  const p = params;\n  p.climber = bake(POSES, CLIMBER);\n  p.coinArt = bake(COIN, COIN_PAL);\n  p.lx0 = new Int16Array(LEDGES);\n  p.lx1 = new Int16Array(LEDGES);\n  p.ly = new Float64Array(LEDGES);\n  p.coin = new Uint8Array(LEDGES);\n  p.coinX = new Float32Array(LEDGES);\n  p.sx = new Float32Array(COIN_SPARKS);\n  p.sy = new Float32Array(COIN_SPARKS);\n  p.svx = new Float32Array(COIN_SPARKS);\n  p.svy = new Float32Array(COIN_SPARKS);\n  p.slife = new Float32Array(COIN_SPARKS);\n  p.sparkNext = 0;\n  p.buf = new Float32Array(W * H * 3);\n  p.stone = new Float32Array(3);\n  p.ledge = new Float32Array(3);\n  p.skyTop = new Float32Array(3);\n  p.skyLow = new Float32Array(3);\n  p.ready = false;\n  p.t = 0;\n  p.coins = 0;\n  p.gap = 20;\n}\n\nfunction start(p) {\n  // The ground floor, full width, then ledges above it.\n  p.top = 0;\n  p.lx0[0] = 2;\n  p.lx1[0] = W - 2;\n  p.ly[0] = 0;\n  p.coin[0] = 0;\n  for (let i = 1; i \u003c LEDGES; i++) p.ly[i] = 1e9;\n  p.cam = -H + 6;\n  p.cx = 12;\n  p.cy = 0;\n  p.vx = 0;\n  p.vy = 0;\n  p.air = false;\n  p.face = 1;\n  p.on = 0;\n  p.land = 0;\n  p.runPhase = 0;\n  for (let i = 0; i \u003c 12; i++) addLedge(p);\n  plan(p);\n  // Climb a while before the first frame, so the tower is already under way.\n  for (let s = 0; s \u003c 150; s++) step(p, 1 / 30);\n  p.coins = 0;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 16, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.hue = k[0];\n  p.gap = clamp(k[2], 8, 60);\n  p.sky = clamp(k[3], 0, 1);\n  if (!p.ready) {\n    p.ready = true;\n    start(p);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (!p.air) jump(p, p.cx);\n    else if (!p.doubled) {\n      p.doubled = true;\n      p.vy = -GRAVITY * 0.32;\n    }\n  }\n  step(p, dt * Math.max(0.1, k[1] * 0.5));\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const buf = p.buf;\n  const night = p.sky;\n  // Noon to sunset over the first half of the knob, sunset to night over the second.\n  const u = night * 2;\n  const a = Math.min(1, Math.floor(u));\n  const f = u - a;\n  for (let c = 0; c \u003c 3; c++) {\n    const sh = 16 - c * 8;\n    p.skyTop[c] = ((SKIES[a][0] >> sh) & 255) * (1 - f) + ((SKIES[a + 1][0] >> sh) & 255) * f;\n    p.skyLow[c] = ((SKIES[a][1] >> sh) & 255) * (1 - f) + ((SKIES[a + 1][1] >> sh) & 255) * f;\n  }\n  const dusk = clamp((night - 0.35) / 0.5, 0, 1);\n  const lightness = 1 - 0.55 * dusk;\n  const hue = p.hue + 0.72;\n  hsv(hue, 0.32, 0.3 * lightness, p.stone, 0);\n  hsv(hue + 0.02, 0.42, 0.8 * (1 - 0.35 * dusk), p.ledge, 0);\n  const stone = p.stone;\n  const cam = Math.round(p.cam);\n  const wall = Math.round(p.cam * 0.5);\n  const far = Math.round(p.cam * 0.2);\n\n  for (let y = 0; y \u003c H; y++) {\n    const ly = y + wall;\n    const band = Math.floor(ly / BAND);\n    const by = ly - band * BAND;\n    const brickRow = Math.floor(ly / 4);\n    const seam = (ly & 3) === 0;\n    // One arched window a band, on alternate sides.\n    const wx = (band & 1 ? 9 : 43) + Math.floor(hash(band, 1) * 5);\n    const wy = by - 10;\n    let w0 = 99;\n    let w1 = -99;\n    if (wy >= 0 && wy \u003c 16) {\n      const inset = wy === 0 ? 3 : wy === 1 ? 1 : 0;\n      w0 = wx + inset;\n      w1 = wx + 10 - inset;\n    }\n    const sky = clamp(wy / 15, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      if (x >= w0 && x \u003c w1) {\n        // Through the window: the sky, its clouds or its stars, much further away.\n        let r = p.skyTop[0] * (1 - sky) + p.skyLow[0] * sky;\n        let g = p.skyTop[1] * (1 - sky) + p.skyLow[1] * sky;\n        let b = p.skyTop[2] * (1 - sky) + p.skyLow[2] * sky;\n        const fy = y + far;\n        const fx = x + Math.floor(p.t * 3);\n        const cell = Math.floor(fy / 18);\n        const cx = Math.floor(hash(cell, 7) * 64);\n        const dx = ((fx - cx) % 64 + 96) % 64 - 32;\n        const dy = fy - cell * 18 - 9;\n        const cloud = dx * dx * 0.08 + dy * dy * 0.6 \u003c 4 + 3 * hash(cell, 9);\n        if (cloud && night \u003c 0.85) {\n          const cv = 1 - night * 0.7;\n          r = 235 * cv + r * 0.1;\n          g = 225 * cv + g * 0.1;\n          b = 235 * cv + b * 0.1;\n        } else if (night > 0.6 && hash(fx, fy) > 0.965) {\n          const s = (night - 0.6) * 2.5 * (0.6 + 0.4 * Math.sin(p.t * 3 + fx));\n          r += 220 * s;\n          g += 220 * s;\n          b += 200 * s;\n        }\n        buf[o] = r;\n        buf[o + 1] = g;\n        buf[o + 2] = b;\n      } else {\n        const col = Math.floor((x + (brickRow & 1) * 4) / 8);\n        const seamX = ((x + (brickRow & 1) * 4) & 7) === 0;\n        // Flat bricks and dark mortar, the way a tile set draws a wall.\n        let v = seam || seamX ? 0.32 : 0.97 + 0.06 * hash(brickRow, col);\n        // The window's frame and sill.\n        if (wy >= -1 && wy \u003c= 16 && x >= wx - 1 && x \u003c= wx + 10) v = wy === 16 ? 1.7 : 1.35;\n        buf[o] = stone[0] * v;\n        buf[o + 1] = stone[1] * v;\n        buf[o + 2] = stone[2] * v;\n      }\n    }\n  }\n\n  // Torches, one a band opposite the window, lit as the sky darkens.\n  const firstBand = Math.floor(wall / BAND) - 1;\n  for (let band = firstBand; band \u003c= firstBand + 4; band++) {\n    const tx = band & 1 ? 47 : 13;\n    const ty = band * BAND + 22 - wall;\n    if (ty \u003c -12 || ty > H + 12) continue;\n    const lit = clamp((night - 0.3) / 0.4, 0, 1);\n    if (lit > 0) {\n      const flick = 0.85 + 0.15 * Math.sin(p.t * 11 + band * 3) * Math.sin(p.t * 7.3 + band);\n      for (let y = ty - 12; y \u003c= ty + 12; y++) {\n        if (y \u003c 0 || y >= H) continue;\n        for (let x = tx - 12; x \u003c= tx + 12; x++) {\n          if (x \u003c 0 || x >= W) continue;\n          const d = Math.sqrt((x - tx) * (x - tx) + (y - ty + 2) * (y - ty + 2)) / 12;\n          if (d >= 1) continue;\n          const g = (1 - d) * (1 - d) * lit * flick;\n          const o = (y * W + x) * 3;\n          buf[o] += 150 * g;\n          buf[o + 1] += 80 * g;\n          buf[o + 2] += 20 * g;\n        }\n      }\n    }\n    // An iron sconce, and the torch's wooden head in it.\n    const iron = 70 + 60 * (1 - dusk);\n    put(buf, tx, ty + 2, iron, iron, iron * 1.1);\n    put(buf, tx, ty + 3, iron, iron, iron * 1.1);\n    put(buf, tx - 1, ty + 1, iron, iron, iron * 1.1);\n    put(buf, tx + 1, ty + 1, iron, iron, iron * 1.1);\n    put(buf, tx, ty + 1, 150, 90, 40);\n    if (lit > 0) {\n      const tip = Math.sin(p.t * 9 + band) > 0 ? 1 : 0;\n      put(buf, tx, ty, 255, 200 * lit + 40, 60);\n      put(buf, tx, ty - 1, 255, 150, 30);\n      put(buf, tx - 1 + tip * 2, ty - 1, 230, 110, 20);\n      put(buf, tx, ty - 2 - tip, 255, 230, 120);\n    }\n  }\n\n  // The tower's own walls left and right move with the ledges.\n  for (let y = 0; y \u003c H; y++) {\n    const wy = y + cam;\n    const row = Math.floor(wy / 3);\n    for (let x = 0; x \u003c 2; x++) {\n      const v = (wy % 3 + 3) % 3 === 0 ? 0.6 : 1.1 + 0.2 * hash(row, x);\n      put(buf, x, y, p.ledge[0] * v * 0.6, p.ledge[1] * v * 0.6, p.ledge[2] * v * 0.6);\n      put(buf, W - 1 - x, y, p.ledge[0] * v * 0.6, p.ledge[1] * v * 0.6, p.ledge[2] * v * 0.6);\n    }\n  }\n\n  const ledge = p.ledge;\n  for (let i = 0; i \u003c LEDGES; i++) {\n    const y0 = Math.round(p.ly[i]) - cam;\n    if (y0 \u003c -4 || y0 >= H) continue;\n    // A slab four LEDs deep: a lit top edge, two rows of face cut into blocks, and a shadow under a bevel.\n    for (let r = 0; r \u003c 4; r++) {\n      const v = r === 0 ? 1.25 : r === 1 ? 0.9 : r === 2 ? 0.72 : 0.42;\n      const inset = r === 3 ? 1 : 0;\n      for (let x = p.lx0[i] + inset; x \u003c p.lx1[i] - inset; x++) {\n        const s = (r === 1 || r === 2) && (x - p.lx0[i]) % 6 === 5 ? 0.55 : 1;\n        put(buf, x, y0 + r, ledge[0] * v * s, ledge[1] * v * s, ledge[2] * v * s);\n      }\n    }\n    if (p.coin[i]) {\n      const frame = [0, 1, 2, 1][Math.floor(p.t * 8 + i) & 3];\n      const bob = Math.sin(p.t * 4 + i) > 0 ? 1 : 0;\n      sprite(p, p.coinArt, frame, Math.round(p.coinX[i]) - 2, y0 - 8 - bob, true, 1);\n    }\n  }\n\n  let pose = IDLE;\n  if (p.air) pose = p.vy \u003c 0 ? JUMP : FALL;\n  else if (p.land \u003c= 0) pose = [RUN1, RUN2, RUN3, RUN2][Math.floor(p.runPhase) & 3];\n  const light = 1 - 0.25 * dusk;\n  sprite(p, p.climber, pose, Math.round(p.cx) - 4, Math.round(p.cy) - cam - 8, p.face > 0, light);\n\n  for (let k = 0; k \u003c COIN_SPARKS; k++) {\n    if (p.slife[k] \u003c= 0) continue;\n    put(buf, Math.round(p.sx[k]), Math.round(p.sy[k]) - cam, 255, 240, 150);\n  }\n\n  // The coin count, top left.\n  sprite(p, p.coinArt, 0, 3, 3, true, 1);\n  let n = p.coins;\n  let digits = 1;\n  while (n >= Math.pow(10, digits)) digits++;\n  for (let d = 0; d \u003c digits; d++) {\n    const v = Math.floor(n / Math.pow(10, digits - 1 - d)) % 10;\n    const bits = DIGITS[v];\n    for (let gy = 0; gy \u003c 5; gy++) {\n      const row = (bits >> ((4 - gy) * 3)) & 7;\n      for (let gx = 0; gx \u003c 3; gx++) if (row & (4 >> gx)) put(buf, 10 + d * 4 + gx, 3 + gy, 255, 236, 160);\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\nfunction sprite(p, s, frame, ix, iy, right, light) {\n  const base = frame * s.w * s.h;\n  for (let y = 0; y \u003c s.h; y++) {\n    for (let x = 0; x \u003c s.w; x++) {\n      const c = s.pix[base + y * s.w + x];\n      if (!c) continue;\n      put(p.buf, ix + (right ? x : s.w - 1 - x), iy + y, s.pal[c * 3] * light, s.pal[c * 3 + 1] * light, s.pal[c * 3 + 2] * light);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.3..3.5, Gap=16..34, Sky=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The stone of the tower and its ledges; the climber keeps its own colours."},{"name":"Speed","min":0.3,"max":3.5,"about":"How fast the climber runs and jumps, and with it how fast the tower goes by."},{"name":"Gap","min":16,"max":34,"about":"How far apart the ledges are, from quick hops to long leaps with the climber high in the air."},{"name":"Sky","min":0,"max":1,"about":"The time of day through the windows, from noon through sunset to night, when the torches on the wall are lit."}],"start":[0,2,16,0.06],"measures":{"motion":1.5193,"detail":0.0867,"edges":0.9308,"complexity":0.2662,"coverage":0.7278,"colour":0.1488,"drift":0.118},"knobResponse":[0.0827,0.1542,0.146,0.1338]},{"slug":"cloth","title":"Cloth","family":"physics","round":2,"note":"12×22 매듭 천이 나무 봉의 집게에 걸려 있고, 뒤에서 부는 돌풍이 천을 앞으로 들어 올려요. LED 마다 그 자리 천이 빛에서 기운 만큼 밝아서 주름이 등고선처럼 읽혀요.","idea":"A Verlet cloth of 12 by 22 knots hangs from clips on a wooden rod, gusts from behind lift it towards you, and each LED is lit by how far the cloth there tilts from the light.","buttons":"K1 tap opens the clips; the cloth drops to the floor and is lifted back onto the rod.","code":"// ===== Patternflow pattern =====\n// Title:   Cloth\n// Family:  physics\n// Idea:    A Verlet cloth of 12 by 22 knots hangs from clips on a wooden rod, gusts from behind lift it towards you, and each LED is lit by how far the cloth there tilts from the light.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Wind=0..3, Stiffness=0..1, Pins=2..12\n//\n// Knob 1: Hue. The dye of the cloth; its stripes and its paler wrong side follow.\n// Knob 2: Wind. From still air, where it only sways, to gusts that throw the hem up past the rod.\n// Knob 3: Stiffness. Silk at 0, light with a sheen and many small folds; canvas at 1, heavy and matt in a few broad ones.\n// Knob 4: Pins. How many clips hold it to the rod, from two corners with a swag between them to every knot along the top.\n// Buttons: K1 tap opens the clips; the cloth drops to the floor and is lifted back onto the rod.\n\nconst W = 64;\nconst H = 128;\nconst NX = 12;\nconst NY = 22;\nconst N = NX * NY;\nconst REST = 5;\nconst ROD_Y = 8;\nconst PIN_Y = 10.5;\n// The clips sit closer together than the cloth is wide, so the top gathers.\nconst SPAN0 = 12;\nconst SPAN1 = 52;\nconst FLOOR = 126.5;\nconst STEP = 1 / 60;\nconst ITER = 6;\nconst G = 420;\n// A weak perspective: cloth blown towards you grows a little.\nconst CAM = 260;\nconst CX = 32;\nconst CY = 56;\n// Light from the upper left, low enough across the cloth that a fold's two sides differ.\nconst LX = -0.655;\nconst LY = -0.453;\nconst LZ = 0.605;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy) * (1 - ux) + hash(ix + 1, iy) * ux;\n  const b = hash(ix, iy + 1) * (1 - ux) + hash(ix + 1, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.px = new Float32Array(N);\n  params.py = new Float32Array(N);\n  params.pz = new Float32Array(N);\n  params.ox = new Float32Array(N);\n  params.oy = new Float32Array(N);\n  params.oz = new Float32Array(N);\n  params.nx = new Float32Array(N);\n  params.ny = new Float32Array(N);\n  params.nz = new Float32Array(N);\n  params.inv = new Float32Array(N);\n  // Where each clipped knot is pulled to, and where it was when the pull began.\n  params.tx = new Float32Array(NX);\n  params.ty = new Float32Array(NX);\n  params.tz = new Float32Array(NX);\n  params.lx = new Float32Array(NX);\n  params.ly = new Float32Array(NX);\n  params.lz = new Float32Array(NX);\n  params.sx = new Float32Array(N);\n  params.sy = new Float32Array(N);\n  params.fi = new Float32Array(N);\n  params.bi = new Float32Array(N);\n  params.fs = new Float32Array(N);\n  params.bs = new Float32Array(N);\n\n  // Springs: along the weave, across the diagonals, and over one knot to resist bending.\n  const pairs = [];\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      if (i + 1 \u003c NX) pairs.push(a, a + 1, 0);\n      if (j + 1 \u003c NY) pairs.push(a, a + NX, 0);\n    }\n  for (let j = 0; j + 1 \u003c NY; j++)\n    for (let i = 0; i + 1 \u003c NX; i++) {\n      const a = j * NX + i;\n      pairs.push(a, a + NX + 1, 1, a + 1, a + NX, 1);\n    }\n  params.nb = pairs.length / 3;\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      if (i + 2 \u003c NX) pairs.push(a, a + 2, 2);\n      if (j + 2 \u003c NY) pairs.push(a, a + 2 * NX, 2);\n    }\n  const count = pairs.length / 3;\n  params.nc = count;\n  params.ca = new Uint16Array(count);\n  params.cb = new Uint16Array(count);\n  params.ct = new Uint8Array(count);\n  params.cr = new Float32Array(count);\n  const len = [REST, REST * Math.SQRT2, REST * 2];\n  for (let c = 0; c \u003c count; c++) {\n    params.ca[c] = pairs[c * 3];\n    params.cb[c] = pairs[c * 3 + 1];\n    params.ct[c] = pairs[c * 3 + 2];\n    params.cr[c] = len[params.ct[c]];\n  }\n  params.k = new Float32Array(3);\n\n  params.rgb = new Float32Array(W * H * 3);\n  params.zbuf = new Float32Array(W * H);\n  params.front = new Float32Array(3);\n  params.back = new Float32Array(3);\n  params.stripe = new Float32Array(3);\n  params.pins = 0;\n  params.t = 0;\n  params.drop = -1;\n  params.lift = 0;\n  params.warm = false;\n  params.acc = 0;\n  hang(params);\n}\n\n// The cloth straight down from the rod, its top already gathered to the clips' spacing.\nfunction hang(params) {\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      const x = SPAN0 + ((SPAN1 - SPAN0) * i) / (NX - 1);\n      params.px[a] = params.ox[a] = x;\n      params.py[a] = params.oy[a] = PIN_Y + j * REST;\n      params.pz[a] = params.oz[a] = (Math.random() - 0.5) * 1.5;\n    }\n}\n\nfunction setPins(params, n) {\n  params.pins = n;\n  for (let i = 0; i \u003c N; i++) params.inv[i] = 1;\n  for (let p = 0; p \u003c n; p++) {\n    const i = Math.round((p * (NX - 1)) / (n - 1));\n    params.inv[i] = 0;\n  }\n  for (let i = 0; i \u003c NX; i++) {\n    params.tx[i] = SPAN0 + ((SPAN1 - SPAN0) * i) / (NX - 1);\n    params.ty[i] = PIN_Y;\n    params.tz[i] = 0;\n  }\n}\n\nfunction normals(params) {\n  const { px, py, pz, nx, ny, nz } = params;\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      const l = i > 0 ? a - 1 : a;\n      const r = i \u003c NX - 1 ? a + 1 : a;\n      const u = j > 0 ? a - NX : a;\n      const d = j \u003c NY - 1 ? a + NX : a;\n      const ax = px[r] - px[l];\n      const ay = py[r] - py[l];\n      const az = pz[r] - pz[l];\n      const bx = px[d] - px[u];\n      const by = py[d] - py[u];\n      const bz = pz[d] - pz[u];\n      // Across the weave crossed with down it: towards the viewer when the cloth hangs flat.\n      const cx = ay * bz - az * by;\n      const cy = az * bx - ax * bz;\n      const cz = ax * by - ay * bx;\n      const m = Math.sqrt(cx * cx + cy * cy + cz * cz) + 1e-6;\n      nx[a] = cx / m;\n      ny[a] = cy / m;\n      nz[a] = cz / m;\n    }\n}\n\nfunction step(params, wind, stiff, clipped) {\n  const { px, py, pz, ox, oy, oz, nx, ny, nz, inv } = params;\n  const dt = STEP;\n  const t = (params.t += dt);\n  normals(params);\n\n  // Gusts: a slow swell in strength and a direction that wanders either side of straight at you.\n  const swell = noise(t * 0.45, 7.1);\n  const gust = 0.3 + 1.52 * swell * swell;\n  const turn = (noise(t * 0.09, 2.3) - 0.5) * 2.4;\n  // Still air still breathes a little, so the cloth never hangs dead.\n  const speed = (wind + 0.2) * 62 * gust;\n  const wx = Math.sin(turn) * speed;\n  const wz = Math.cos(turn) * speed * 0.85;\n  // Silk catches the air; canvas is heavier for the same push.\n  const kd = (5.5 - stiff * 3) * dt;\n  const keep = 0.994;\n  // A falling cloth drops mostly straight; the wind only turns it.\n  const air = clipped ? 1 : 0.25;\n  for (let a = 0; a \u003c N; a++) {\n    if (clipped && inv[a] === 0) continue;\n    const vx = px[a] - ox[a];\n    const vy = py[a] - oy[a];\n    const vz = pz[a] - oz[a];\n    // Patches of the gust travel across the cloth, so it ripples rather than swings as one.\n    const local = (0.55 + 0.9 * noise(px[a] * 0.06 + t * 1.3, py[a] * 0.05 - t * 0.8)) * air;\n    const ux = wx * local * dt - vx;\n    const uy = -wind * 8 * local * dt - vy;\n    const uz = wz * local * dt - vz;\n    const d = (nx[a] * ux + ny[a] * uy + nz[a] * uz) * kd;\n    ox[a] = px[a];\n    oy[a] = py[a];\n    oz[a] = pz[a];\n    px[a] += vx * keep + nx[a] * d + ux * 0.002;\n    py[a] += vy * keep + ny[a] * d + G * dt * dt + uy * 0.002;\n    pz[a] += vz * keep + nz[a] * d + uz * 0.002;\n  }\n\n  // Clipped knots are carried, never pushed: straight to the rod, or along the lift after a drop.\n  for (let i = 0; i \u003c NX; i++) {\n    if (inv[i] !== 0 || !clipped) continue;\n    let x = params.tx[i];\n    let y = params.ty[i];\n    let z = params.tz[i];\n    if (params.lift \u003c 1) {\n      const e = params.lift * params.lift * (3 - 2 * params.lift);\n      x = params.lx[i] + (x - params.lx[i]) * e;\n      y = params.ly[i] + (y - params.ly[i]) * e;\n      z = params.lz[i] + (z - params.lz[i]) * e;\n    }\n    ox[i] = px[i];\n    oy[i] = py[i];\n    oz[i] = pz[i];\n    px[i] = x;\n    py[i] = y;\n    pz[i] = z;\n  }\n\n  const k = params.k;\n  k[0] = 1;\n  k[1] = 0.5;\n  k[2] = 0.015 + stiff * stiff * 0.5;\n  const { ca, cb, ct, cr } = params;\n  const nc = params.nc;\n  const free = clipped ? inv : null;\n  for (let it = 0; it \u003c ITER; it++) {\n    // The bending springs are soft anyway, so every other pass is enough for them.\n    const last = it & 1 ? params.nb : nc;\n    for (let c = 0; c \u003c last; c++) {\n      const a = ca[c];\n      const b = cb[c];\n      const wa = free ? free[a] : 1;\n      const wb = free ? free[b] : 1;\n      const ws = wa + wb;\n      if (ws === 0) continue;\n      const dx = px[b] - px[a];\n      const dy = py[b] - py[a];\n      const dz = pz[b] - pz[a];\n      const dist = Math.sqrt(dx * dx + dy * dy + dz * dz) + 1e-6;\n      const f = ((dist - cr[c]) / dist) * k[ct[c]] / ws;\n      px[a] += dx * f * wa;\n      py[a] += dy * f * wa;\n      pz[a] += dz * f * wa;\n      px[b] -= dx * f * wb;\n      py[b] -= dy * f * wb;\n      pz[b] -= dz * f * wb;\n    }\n  }\n  for (let a = 0; a \u003c N; a++) {\n    if (pz[a] > 150) pz[a] = 150;\n    // The floor and, while it falls, the walls are where the panel's edges are seen to be,\n    // so a cloth nearer the eye still lands on the bottom row and not below it.\n    const f = CAM / (CAM - pz[a]);\n    const floor = CY + (FLOOR - CY) / f;\n    if (py[a] > floor) {\n      // The floor holds and drags, so a dropped cloth crumples instead of sliding.\n      py[a] = floor;\n      ox[a] = px[a] - (px[a] - ox[a]) * 0.4;\n      pz[a] *= 0.9;\n      oz[a] = pz[a];\n    }\n    if (!clipped) {\n      const wall = 31 / f;\n      if (px[a] \u003c CX - wall) px[a] = CX - wall;\n      if (px[a] > CX + wall) px[a] = CX + wall;\n    }\n  }\n}\n\nfunction update1(params, dt, k, pressed) {\n  const wind = Math.max(0, k[1]);\n  const stiff = Math.max(0, Math.min(1, k[2]));\n  const pins = Math.max(2, Math.min(NX, Math.round(k[3])));\n  if (pins !== params.pins) setPins(params, pins);\n\n  if (pressed && params.drop \u003c 0) params.drop = 0;\n  let clipped = true;\n  if (params.drop >= 0) {\n    params.drop += dt;\n    if (params.drop \u003c 2.2) clipped = false;\n    else {\n      if (params.lift >= 1) {\n        // The lift starts from wherever the top knots lie on the floor.\n        params.lift = 0;\n        for (let i = 0; i \u003c NX; i++) {\n          params.lx[i] = params.px[i];\n          params.ly[i] = params.py[i];\n          params.lz[i] = params.pz[i];\n        }\n      }\n      params.lift = Math.min(1, (params.drop - 2.2) / 1.4);\n      if (params.lift >= 1) params.drop = -1;\n    }\n  }\n\n  params.acc += dt;\n  let n = 0;\n  while (params.acc >= STEP && n \u003c 4) {\n    params.acc -= STEP;\n    step(params, wind, stiff, clipped);\n    n++;\n  }\n  if (n === 4) params.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 2];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0] + 0.6;\n  params.stiff = Math.max(0, Math.min(1, k[2]));\n  if (!params.warm) {\n    // Open on a cloth that has been hanging in the wind for a while.\n    params.warm = true;\n    params.lift = 1;\n    setPins(params, Math.max(2, Math.min(NX, Math.round(k[3]))));\n    for (let s = 0; s \u003c 90; s++) update1(params, STEP, k, false);\n  }\n  params.lift = params.drop \u003c 0 ? 1 : params.lift;\n  update1(params, dt, k, input.btnPressed && input.btnPressed[0]);\n}\n\n// One triangle of the cloth, Gouraud-lit from its three knots, kept where it is nearest.\nfunction tri(params, a, b, c) {\n  const { sx, sy, pz, fi, bi, fs, bs, rgb, zbuf, front, back, stripe } = params;\n  const x0 = sx[a];\n  const y0 = sy[a];\n  const x1 = sx[b];\n  const y1 = sy[b];\n  const x2 = sx[c];\n  const y2 = sy[c];\n  const area = (x1 - x0) * (y2 - y0) - (y1 - y0) * (x2 - x0);\n  if (area > -1e-4 && area \u003c 1e-4) return;\n  const facing = area > 0;\n  const minX = Math.max(0, Math.floor(Math.min(x0, x1, x2)));\n  const maxX = Math.min(W - 1, Math.ceil(Math.max(x0, x1, x2)));\n  const minY = Math.max(0, Math.floor(Math.min(y0, y1, y2)));\n  const maxY = Math.min(H - 1, Math.ceil(Math.max(y0, y1, y2)));\n  if (minX > maxX || minY > maxY) return;\n  const inv = 1 / area;\n  const I0 = facing ? fi[a] : bi[a];\n  const I1 = facing ? fi[b] : bi[b];\n  const I2 = facing ? fi[c] : bi[c];\n  const S0 = facing ? fs[a] : bs[a];\n  const S1 = facing ? fs[b] : bs[b];\n  const S2 = facing ? fs[c] : bs[c];\n  const v0 = Math.floor(a / NX);\n  const v1 = Math.floor(b / NX);\n  const v2 = Math.floor(c / NX);\n  const u0 = a - v0 * NX;\n  const u1 = b - v1 * NX;\n  const u2 = c - v2 * NX;\n  const base = facing ? front : back;\n  // Barycentric weights step by a constant from one LED to the next along a row.\n  const d0 = (y1 - y2) * inv;\n  const d1 = (y2 - y0) * inv;\n  const za = pz[a];\n  const zb = pz[b];\n  const zc = pz[c];\n  for (let y = minY; y \u003c= maxY; y++) {\n    const py = y + 0.5;\n    const px0 = minX + 0.5;\n    let l0 = ((x1 - px0) * (y2 - py) - (y1 - py) * (x2 - px0)) * inv - d0;\n    let l1 = ((x2 - px0) * (y0 - py) - (y2 - py) * (x0 - px0)) * inv - d1;\n    for (let x = minX; x \u003c= maxX; x++) {\n      l0 += d0;\n      l1 += d1;\n      const l2 = 1 - l0 - l1;\n      if (l0 \u003c 0 || l1 \u003c 0 || l2 \u003c 0) continue;\n      const z = l0 * za + l1 * zb + l2 * zc;\n      const o = y * W + x;\n      if (z \u003c= zbuf[o]) continue;\n      zbuf[o] = z;\n      let I = l0 * I0 + l1 * I1 + l2 * I2;\n      // The light comes in five steps with short ramps between, so a fold shows as\n      // contour lines on the LEDs rather than one long smear.\n      const q = I * 5;\n      const fl = Math.floor(q);\n      let fr = (q - fl - 0.38) / 0.24;\n      fr = fr \u003c 0 ? 0 : fr > 1 ? 1 : fr;\n      I = (fl + fr * fr * (3 - 2 * fr)) / 5;\n      const S = l0 * S0 + l1 * S1 + l2 * S2;\n      // A cream border down each side, two stripes near the hem and one under the rod,\n      // woven into the front only.\n      const v = l0 * v0 + l1 * v1 + l2 * v2;\n      const u = l0 * u0 + l1 * u1 + l2 * u2;\n      const band =\n        facing &&\n        ((v > 1.3 && v \u003c 2.1) || (v > 16.4 && v \u003c 17.4) || (v > 18.6 && v \u003c 19.2) || ((u > 0.45 && u \u003c 0.95) || (u > 10.05 && u \u003c 10.55)) && v > 1.3 && v \u003c 19.2);\n      const col = band ? stripe : base;\n      const qq = o * 3;\n      rgb[qq] = col[0] * I + S;\n      rgb[qq + 1] = col[1] * I + S;\n      rgb[qq + 2] = col[2] * I + S;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const { px, py, pz, nx, ny, nz, sx, sy, fi, bi, fs, bs, rgb, zbuf } = params;\n  normals(params);\n  const stiff = params.stiff;\n  const sheen = 70 * (1 - stiff) * (1 - stiff);\n  // Halfway between the light and the eye, for the sheen.\n  let hx = LX;\n  let hy = LY;\n  let hz = LZ + 1;\n  const hm = Math.sqrt(hx * hx + hy * hy + hz * hz);\n  hx /= hm;\n  hy /= hm;\n  hz /= hm;\n  const shine = 10 + stiff * 8;\n  for (let a = 0; a \u003c N; a++) {\n    const f = CAM / (CAM - pz[a]);\n    sx[a] = CX + (px[a] - CX) * f;\n    sy[a] = CY + (py[a] - CY) * f;\n    const d = nx[a] * LX + ny[a] * LY + nz[a] * LZ;\n    const h = nx[a] * hx + ny[a] * hy + nz[a] * hz;\n    fi[a] = 0.12 + 0.88 * Math.max(0, d);\n    bi[a] = 0.12 + 0.75 * Math.max(0, -d);\n    fs[a] = h > 0 ? sheen * Math.pow(h, shine) : 0;\n    bs[a] = h \u003c 0 ? sheen * 0.6 * Math.pow(-h, shine) : 0;\n  }\n  hsvInto(params.front, 0, params.hue, 0.85, 0.95);\n  hsvInto(params.back, 0, params.hue + 0.04, 0.42, 0.85);\n  hsvInto(params.stripe, 0, params.hue + 0.1, 0.16, 0.92);\n\n  rgb.fill(0);\n  zbuf.fill(-1e9);\n  // The rod, a dowel lit from above, with a knob at each end.\n  for (let x = 3; x \u003c= 60; x++) {\n    const end = x \u003c 5 || x > 58;\n    for (let y = ROD_Y - (end ? 2 : 1); y \u003c= ROD_Y + (end ? 1 : 0); y++) {\n      const o = y * W + x;\n      const top = y \u003c ROD_Y;\n      rgb[o * 3] = top ? 150 : 105;\n      rgb[o * 3 + 1] = top ? 96 : 62;\n      rgb[o * 3 + 2] = top ? 52 : 30;\n      zbuf[o] = 0;\n    }\n  }\n  for (let j = 0; j + 1 \u003c NY; j++)\n    for (let i = 0; i + 1 \u003c NX; i++) {\n      const a = j * NX + i;\n      tri(params, a, a + 1, a + NX);\n      tri(params, a + 1, a + NX + 1, a + NX);\n    }\n  // The clips, drawn last so they always show.\n  const clipped = params.drop \u003c 0 || params.drop >= 2.2;\n  if (clipped) {\n    for (let i = 0; i \u003c NX; i++) {\n      if (params.inv[i] !== 0) continue;\n      const cx = Math.round(sx[i] - 1);\n      const cy = Math.round(sy[i] - 3);\n      for (let y = cy; y \u003c cy + 3; y++)\n        for (let x = cx; x \u003c cx + 2; x++) {\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const o = (y * W + x) * 3;\n          const lit = y === cy ? 215 : 160;\n          rgb[o] = lit;\n          rgb[o + 1] = lit;\n          rgb[o + 2] = lit + 10;\n        }\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(235, rgb[o]), Math.min(235, rgb[o + 1]), Math.min(235, rgb[o + 2]));\n    }\n}\n","layer":{"id":"layer-cloth","type":"code","name":"cloth","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cloth\n// Family:  physics\n// Idea:    A Verlet cloth of 12 by 22 knots hangs from clips on a wooden rod, gusts from behind lift it towards you, and each LED is lit by how far the cloth there tilts from the light.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Wind=0..3, Stiffness=0..1, Pins=2..12\n//\n// Knob 1: Hue. The dye of the cloth; its stripes and its paler wrong side follow.\n// Knob 2: Wind. From still air, where it only sways, to gusts that throw the hem up past the rod.\n// Knob 3: Stiffness. Silk at 0, light with a sheen and many small folds; canvas at 1, heavy and matt in a few broad ones.\n// Knob 4: Pins. How many clips hold it to the rod, from two corners with a swag between them to every knot along the top.\n// Buttons: K1 tap opens the clips; the cloth drops to the floor and is lifted back onto the rod.\n\nconst W = 64;\nconst H = 128;\nconst NX = 12;\nconst NY = 22;\nconst N = NX * NY;\nconst REST = 5;\nconst ROD_Y = 8;\nconst PIN_Y = 10.5;\n// The clips sit closer together than the cloth is wide, so the top gathers.\nconst SPAN0 = 12;\nconst SPAN1 = 52;\nconst FLOOR = 126.5;\nconst STEP = 1 / 60;\nconst ITER = 6;\nconst G = 420;\n// A weak perspective: cloth blown towards you grows a little.\nconst CAM = 260;\nconst CX = 32;\nconst CY = 56;\n// Light from the upper left, low enough across the cloth that a fold's two sides differ.\nconst LX = -0.655;\nconst LY = -0.453;\nconst LZ = 0.605;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy) * (1 - ux) + hash(ix + 1, iy) * ux;\n  const b = hash(ix, iy + 1) * (1 - ux) + hash(ix + 1, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.px = new Float32Array(N);\n  params.py = new Float32Array(N);\n  params.pz = new Float32Array(N);\n  params.ox = new Float32Array(N);\n  params.oy = new Float32Array(N);\n  params.oz = new Float32Array(N);\n  params.nx = new Float32Array(N);\n  params.ny = new Float32Array(N);\n  params.nz = new Float32Array(N);\n  params.inv = new Float32Array(N);\n  // Where each clipped knot is pulled to, and where it was when the pull began.\n  params.tx = new Float32Array(NX);\n  params.ty = new Float32Array(NX);\n  params.tz = new Float32Array(NX);\n  params.lx = new Float32Array(NX);\n  params.ly = new Float32Array(NX);\n  params.lz = new Float32Array(NX);\n  params.sx = new Float32Array(N);\n  params.sy = new Float32Array(N);\n  params.fi = new Float32Array(N);\n  params.bi = new Float32Array(N);\n  params.fs = new Float32Array(N);\n  params.bs = new Float32Array(N);\n\n  // Springs: along the weave, across the diagonals, and over one knot to resist bending.\n  const pairs = [];\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      if (i + 1 \u003c NX) pairs.push(a, a + 1, 0);\n      if (j + 1 \u003c NY) pairs.push(a, a + NX, 0);\n    }\n  for (let j = 0; j + 1 \u003c NY; j++)\n    for (let i = 0; i + 1 \u003c NX; i++) {\n      const a = j * NX + i;\n      pairs.push(a, a + NX + 1, 1, a + 1, a + NX, 1);\n    }\n  params.nb = pairs.length / 3;\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      if (i + 2 \u003c NX) pairs.push(a, a + 2, 2);\n      if (j + 2 \u003c NY) pairs.push(a, a + 2 * NX, 2);\n    }\n  const count = pairs.length / 3;\n  params.nc = count;\n  params.ca = new Uint16Array(count);\n  params.cb = new Uint16Array(count);\n  params.ct = new Uint8Array(count);\n  params.cr = new Float32Array(count);\n  const len = [REST, REST * Math.SQRT2, REST * 2];\n  for (let c = 0; c \u003c count; c++) {\n    params.ca[c] = pairs[c * 3];\n    params.cb[c] = pairs[c * 3 + 1];\n    params.ct[c] = pairs[c * 3 + 2];\n    params.cr[c] = len[params.ct[c]];\n  }\n  params.k = new Float32Array(3);\n\n  params.rgb = new Float32Array(W * H * 3);\n  params.zbuf = new Float32Array(W * H);\n  params.front = new Float32Array(3);\n  params.back = new Float32Array(3);\n  params.stripe = new Float32Array(3);\n  params.pins = 0;\n  params.t = 0;\n  params.drop = -1;\n  params.lift = 0;\n  params.warm = false;\n  params.acc = 0;\n  hang(params);\n}\n\n// The cloth straight down from the rod, its top already gathered to the clips' spacing.\nfunction hang(params) {\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      const x = SPAN0 + ((SPAN1 - SPAN0) * i) / (NX - 1);\n      params.px[a] = params.ox[a] = x;\n      params.py[a] = params.oy[a] = PIN_Y + j * REST;\n      params.pz[a] = params.oz[a] = (Math.random() - 0.5) * 1.5;\n    }\n}\n\nfunction setPins(params, n) {\n  params.pins = n;\n  for (let i = 0; i \u003c N; i++) params.inv[i] = 1;\n  for (let p = 0; p \u003c n; p++) {\n    const i = Math.round((p * (NX - 1)) / (n - 1));\n    params.inv[i] = 0;\n  }\n  for (let i = 0; i \u003c NX; i++) {\n    params.tx[i] = SPAN0 + ((SPAN1 - SPAN0) * i) / (NX - 1);\n    params.ty[i] = PIN_Y;\n    params.tz[i] = 0;\n  }\n}\n\nfunction normals(params) {\n  const { px, py, pz, nx, ny, nz } = params;\n  for (let j = 0; j \u003c NY; j++)\n    for (let i = 0; i \u003c NX; i++) {\n      const a = j * NX + i;\n      const l = i > 0 ? a - 1 : a;\n      const r = i \u003c NX - 1 ? a + 1 : a;\n      const u = j > 0 ? a - NX : a;\n      const d = j \u003c NY - 1 ? a + NX : a;\n      const ax = px[r] - px[l];\n      const ay = py[r] - py[l];\n      const az = pz[r] - pz[l];\n      const bx = px[d] - px[u];\n      const by = py[d] - py[u];\n      const bz = pz[d] - pz[u];\n      // Across the weave crossed with down it: towards the viewer when the cloth hangs flat.\n      const cx = ay * bz - az * by;\n      const cy = az * bx - ax * bz;\n      const cz = ax * by - ay * bx;\n      const m = Math.sqrt(cx * cx + cy * cy + cz * cz) + 1e-6;\n      nx[a] = cx / m;\n      ny[a] = cy / m;\n      nz[a] = cz / m;\n    }\n}\n\nfunction step(params, wind, stiff, clipped) {\n  const { px, py, pz, ox, oy, oz, nx, ny, nz, inv } = params;\n  const dt = STEP;\n  const t = (params.t += dt);\n  normals(params);\n\n  // Gusts: a slow swell in strength and a direction that wanders either side of straight at you.\n  const swell = noise(t * 0.45, 7.1);\n  const gust = 0.3 + 1.52 * swell * swell;\n  const turn = (noise(t * 0.09, 2.3) - 0.5) * 2.4;\n  // Still air still breathes a little, so the cloth never hangs dead.\n  const speed = (wind + 0.2) * 62 * gust;\n  const wx = Math.sin(turn) * speed;\n  const wz = Math.cos(turn) * speed * 0.85;\n  // Silk catches the air; canvas is heavier for the same push.\n  const kd = (5.5 - stiff * 3) * dt;\n  const keep = 0.994;\n  // A falling cloth drops mostly straight; the wind only turns it.\n  const air = clipped ? 1 : 0.25;\n  for (let a = 0; a \u003c N; a++) {\n    if (clipped && inv[a] === 0) continue;\n    const vx = px[a] - ox[a];\n    const vy = py[a] - oy[a];\n    const vz = pz[a] - oz[a];\n    // Patches of the gust travel across the cloth, so it ripples rather than swings as one.\n    const local = (0.55 + 0.9 * noise(px[a] * 0.06 + t * 1.3, py[a] * 0.05 - t * 0.8)) * air;\n    const ux = wx * local * dt - vx;\n    const uy = -wind * 8 * local * dt - vy;\n    const uz = wz * local * dt - vz;\n    const d = (nx[a] * ux + ny[a] * uy + nz[a] * uz) * kd;\n    ox[a] = px[a];\n    oy[a] = py[a];\n    oz[a] = pz[a];\n    px[a] += vx * keep + nx[a] * d + ux * 0.002;\n    py[a] += vy * keep + ny[a] * d + G * dt * dt + uy * 0.002;\n    pz[a] += vz * keep + nz[a] * d + uz * 0.002;\n  }\n\n  // Clipped knots are carried, never pushed: straight to the rod, or along the lift after a drop.\n  for (let i = 0; i \u003c NX; i++) {\n    if (inv[i] !== 0 || !clipped) continue;\n    let x = params.tx[i];\n    let y = params.ty[i];\n    let z = params.tz[i];\n    if (params.lift \u003c 1) {\n      const e = params.lift * params.lift * (3 - 2 * params.lift);\n      x = params.lx[i] + (x - params.lx[i]) * e;\n      y = params.ly[i] + (y - params.ly[i]) * e;\n      z = params.lz[i] + (z - params.lz[i]) * e;\n    }\n    ox[i] = px[i];\n    oy[i] = py[i];\n    oz[i] = pz[i];\n    px[i] = x;\n    py[i] = y;\n    pz[i] = z;\n  }\n\n  const k = params.k;\n  k[0] = 1;\n  k[1] = 0.5;\n  k[2] = 0.015 + stiff * stiff * 0.5;\n  const { ca, cb, ct, cr } = params;\n  const nc = params.nc;\n  const free = clipped ? inv : null;\n  for (let it = 0; it \u003c ITER; it++) {\n    // The bending springs are soft anyway, so every other pass is enough for them.\n    const last = it & 1 ? params.nb : nc;\n    for (let c = 0; c \u003c last; c++) {\n      const a = ca[c];\n      const b = cb[c];\n      const wa = free ? free[a] : 1;\n      const wb = free ? free[b] : 1;\n      const ws = wa + wb;\n      if (ws === 0) continue;\n      const dx = px[b] - px[a];\n      const dy = py[b] - py[a];\n      const dz = pz[b] - pz[a];\n      const dist = Math.sqrt(dx * dx + dy * dy + dz * dz) + 1e-6;\n      const f = ((dist - cr[c]) / dist) * k[ct[c]] / ws;\n      px[a] += dx * f * wa;\n      py[a] += dy * f * wa;\n      pz[a] += dz * f * wa;\n      px[b] -= dx * f * wb;\n      py[b] -= dy * f * wb;\n      pz[b] -= dz * f * wb;\n    }\n  }\n  for (let a = 0; a \u003c N; a++) {\n    if (pz[a] > 150) pz[a] = 150;\n    // The floor and, while it falls, the walls are where the panel's edges are seen to be,\n    // so a cloth nearer the eye still lands on the bottom row and not below it.\n    const f = CAM / (CAM - pz[a]);\n    const floor = CY + (FLOOR - CY) / f;\n    if (py[a] > floor) {\n      // The floor holds and drags, so a dropped cloth crumples instead of sliding.\n      py[a] = floor;\n      ox[a] = px[a] - (px[a] - ox[a]) * 0.4;\n      pz[a] *= 0.9;\n      oz[a] = pz[a];\n    }\n    if (!clipped) {\n      const wall = 31 / f;\n      if (px[a] \u003c CX - wall) px[a] = CX - wall;\n      if (px[a] > CX + wall) px[a] = CX + wall;\n    }\n  }\n}\n\nfunction update1(params, dt, k, pressed) {\n  const wind = Math.max(0, k[1]);\n  const stiff = Math.max(0, Math.min(1, k[2]));\n  const pins = Math.max(2, Math.min(NX, Math.round(k[3])));\n  if (pins !== params.pins) setPins(params, pins);\n\n  if (pressed && params.drop \u003c 0) params.drop = 0;\n  let clipped = true;\n  if (params.drop >= 0) {\n    params.drop += dt;\n    if (params.drop \u003c 2.2) clipped = false;\n    else {\n      if (params.lift >= 1) {\n        // The lift starts from wherever the top knots lie on the floor.\n        params.lift = 0;\n        for (let i = 0; i \u003c NX; i++) {\n          params.lx[i] = params.px[i];\n          params.ly[i] = params.py[i];\n          params.lz[i] = params.pz[i];\n        }\n      }\n      params.lift = Math.min(1, (params.drop - 2.2) / 1.4);\n      if (params.lift >= 1) params.drop = -1;\n    }\n  }\n\n  params.acc += dt;\n  let n = 0;\n  while (params.acc >= STEP && n \u003c 4) {\n    params.acc -= STEP;\n    step(params, wind, stiff, clipped);\n    n++;\n  }\n  if (n === 4) params.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 2];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0] + 0.6;\n  params.stiff = Math.max(0, Math.min(1, k[2]));\n  if (!params.warm) {\n    // Open on a cloth that has been hanging in the wind for a while.\n    params.warm = true;\n    params.lift = 1;\n    setPins(params, Math.max(2, Math.min(NX, Math.round(k[3]))));\n    for (let s = 0; s \u003c 90; s++) update1(params, STEP, k, false);\n  }\n  params.lift = params.drop \u003c 0 ? 1 : params.lift;\n  update1(params, dt, k, input.btnPressed && input.btnPressed[0]);\n}\n\n// One triangle of the cloth, Gouraud-lit from its three knots, kept where it is nearest.\nfunction tri(params, a, b, c) {\n  const { sx, sy, pz, fi, bi, fs, bs, rgb, zbuf, front, back, stripe } = params;\n  const x0 = sx[a];\n  const y0 = sy[a];\n  const x1 = sx[b];\n  const y1 = sy[b];\n  const x2 = sx[c];\n  const y2 = sy[c];\n  const area = (x1 - x0) * (y2 - y0) - (y1 - y0) * (x2 - x0);\n  if (area > -1e-4 && area \u003c 1e-4) return;\n  const facing = area > 0;\n  const minX = Math.max(0, Math.floor(Math.min(x0, x1, x2)));\n  const maxX = Math.min(W - 1, Math.ceil(Math.max(x0, x1, x2)));\n  const minY = Math.max(0, Math.floor(Math.min(y0, y1, y2)));\n  const maxY = Math.min(H - 1, Math.ceil(Math.max(y0, y1, y2)));\n  if (minX > maxX || minY > maxY) return;\n  const inv = 1 / area;\n  const I0 = facing ? fi[a] : bi[a];\n  const I1 = facing ? fi[b] : bi[b];\n  const I2 = facing ? fi[c] : bi[c];\n  const S0 = facing ? fs[a] : bs[a];\n  const S1 = facing ? fs[b] : bs[b];\n  const S2 = facing ? fs[c] : bs[c];\n  const v0 = Math.floor(a / NX);\n  const v1 = Math.floor(b / NX);\n  const v2 = Math.floor(c / NX);\n  const u0 = a - v0 * NX;\n  const u1 = b - v1 * NX;\n  const u2 = c - v2 * NX;\n  const base = facing ? front : back;\n  // Barycentric weights step by a constant from one LED to the next along a row.\n  const d0 = (y1 - y2) * inv;\n  const d1 = (y2 - y0) * inv;\n  const za = pz[a];\n  const zb = pz[b];\n  const zc = pz[c];\n  for (let y = minY; y \u003c= maxY; y++) {\n    const py = y + 0.5;\n    const px0 = minX + 0.5;\n    let l0 = ((x1 - px0) * (y2 - py) - (y1 - py) * (x2 - px0)) * inv - d0;\n    let l1 = ((x2 - px0) * (y0 - py) - (y2 - py) * (x0 - px0)) * inv - d1;\n    for (let x = minX; x \u003c= maxX; x++) {\n      l0 += d0;\n      l1 += d1;\n      const l2 = 1 - l0 - l1;\n      if (l0 \u003c 0 || l1 \u003c 0 || l2 \u003c 0) continue;\n      const z = l0 * za + l1 * zb + l2 * zc;\n      const o = y * W + x;\n      if (z \u003c= zbuf[o]) continue;\n      zbuf[o] = z;\n      let I = l0 * I0 + l1 * I1 + l2 * I2;\n      // The light comes in five steps with short ramps between, so a fold shows as\n      // contour lines on the LEDs rather than one long smear.\n      const q = I * 5;\n      const fl = Math.floor(q);\n      let fr = (q - fl - 0.38) / 0.24;\n      fr = fr \u003c 0 ? 0 : fr > 1 ? 1 : fr;\n      I = (fl + fr * fr * (3 - 2 * fr)) / 5;\n      const S = l0 * S0 + l1 * S1 + l2 * S2;\n      // A cream border down each side, two stripes near the hem and one under the rod,\n      // woven into the front only.\n      const v = l0 * v0 + l1 * v1 + l2 * v2;\n      const u = l0 * u0 + l1 * u1 + l2 * u2;\n      const band =\n        facing &&\n        ((v > 1.3 && v \u003c 2.1) || (v > 16.4 && v \u003c 17.4) || (v > 18.6 && v \u003c 19.2) || ((u > 0.45 && u \u003c 0.95) || (u > 10.05 && u \u003c 10.55)) && v > 1.3 && v \u003c 19.2);\n      const col = band ? stripe : base;\n      const qq = o * 3;\n      rgb[qq] = col[0] * I + S;\n      rgb[qq + 1] = col[1] * I + S;\n      rgb[qq + 2] = col[2] * I + S;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const { px, py, pz, nx, ny, nz, sx, sy, fi, bi, fs, bs, rgb, zbuf } = params;\n  normals(params);\n  const stiff = params.stiff;\n  const sheen = 70 * (1 - stiff) * (1 - stiff);\n  // Halfway between the light and the eye, for the sheen.\n  let hx = LX;\n  let hy = LY;\n  let hz = LZ + 1;\n  const hm = Math.sqrt(hx * hx + hy * hy + hz * hz);\n  hx /= hm;\n  hy /= hm;\n  hz /= hm;\n  const shine = 10 + stiff * 8;\n  for (let a = 0; a \u003c N; a++) {\n    const f = CAM / (CAM - pz[a]);\n    sx[a] = CX + (px[a] - CX) * f;\n    sy[a] = CY + (py[a] - CY) * f;\n    const d = nx[a] * LX + ny[a] * LY + nz[a] * LZ;\n    const h = nx[a] * hx + ny[a] * hy + nz[a] * hz;\n    fi[a] = 0.12 + 0.88 * Math.max(0, d);\n    bi[a] = 0.12 + 0.75 * Math.max(0, -d);\n    fs[a] = h > 0 ? sheen * Math.pow(h, shine) : 0;\n    bs[a] = h \u003c 0 ? sheen * 0.6 * Math.pow(-h, shine) : 0;\n  }\n  hsvInto(params.front, 0, params.hue, 0.85, 0.95);\n  hsvInto(params.back, 0, params.hue + 0.04, 0.42, 0.85);\n  hsvInto(params.stripe, 0, params.hue + 0.1, 0.16, 0.92);\n\n  rgb.fill(0);\n  zbuf.fill(-1e9);\n  // The rod, a dowel lit from above, with a knob at each end.\n  for (let x = 3; x \u003c= 60; x++) {\n    const end = x \u003c 5 || x > 58;\n    for (let y = ROD_Y - (end ? 2 : 1); y \u003c= ROD_Y + (end ? 1 : 0); y++) {\n      const o = y * W + x;\n      const top = y \u003c ROD_Y;\n      rgb[o * 3] = top ? 150 : 105;\n      rgb[o * 3 + 1] = top ? 96 : 62;\n      rgb[o * 3 + 2] = top ? 52 : 30;\n      zbuf[o] = 0;\n    }\n  }\n  for (let j = 0; j + 1 \u003c NY; j++)\n    for (let i = 0; i + 1 \u003c NX; i++) {\n      const a = j * NX + i;\n      tri(params, a, a + 1, a + NX);\n      tri(params, a + 1, a + NX + 1, a + NX);\n    }\n  // The clips, drawn last so they always show.\n  const clipped = params.drop \u003c 0 || params.drop >= 2.2;\n  if (clipped) {\n    for (let i = 0; i \u003c NX; i++) {\n      if (params.inv[i] !== 0) continue;\n      const cx = Math.round(sx[i] - 1);\n      const cy = Math.round(sy[i] - 3);\n      for (let y = cy; y \u003c cy + 3; y++)\n        for (let x = cx; x \u003c cx + 2; x++) {\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const o = (y * W + x) * 3;\n          const lit = y === cy ? 215 : 160;\n          rgb[o] = lit;\n          rgb[o + 1] = lit;\n          rgb[o + 2] = lit + 10;\n        }\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(235, rgb[o]), Math.min(235, rgb[o + 1]), Math.min(235, rgb[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Wind=0..3, Stiffness=0..1, Pins=2..12","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The dye of the cloth; its stripes and its paler wrong side follow."},{"name":"Wind","min":0,"max":3,"about":"From still air, where it only sways, to gusts that throw the hem up past the rod."},{"name":"Stiffness","min":0,"max":1,"about":"Silk at 0, light with a sheen and many small folds; canvas at 1, heavy and matt in a few broad ones."},{"name":"Pins","min":2,"max":12,"about":"How many clips hold it to the rod, from two corners with a swag between them to every knot along the top."}],"start":[0,2,0,2],"measures":{"motion":0.5789,"detail":0.0244,"edges":0.3966,"complexity":0.9079,"coverage":0.5904,"colour":0.3319,"drift":0.4132},"knobResponse":[0.2963,0.322,0.2371,0.2837]},{"slug":"contour","title":"Contour Map","family":"data","round":2,"note":"천천히 솟고 가라앉는 땅의 지형도예요. 다섯째 등고선마다 밝고, 바닷물이 차오르면 선은 땅에 그대로 남은 채 물 밑으로 들어가요.","idea":"A topographic map of slowly heaving land, a contour line every so many metres and every fifth one brighter, tinted green in the lowland and white on the peaks, with a sea that floods whatever lies below it.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Contour Map\n// Family:  data\n// Idea:    A topographic map of slowly heaving land, a contour line every so many metres and every fifth one brighter, tinted green in the lowland and white on the peaks, with a sea that floods whatever lies below it.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Morph=0..6, Interval=50..200, Sea level=-300..600\n//\n// Knob 1: Palette. The atlas, then a viridis data plot, then neon lines on black, then a survey sheet in dark ink.\n// Knob 2: Morph. How fast the land rises and sinks; 0 holds the map still.\n// Knob 3: Interval. Metres between contour lines, from a dense survey at 50 to a few wide rings at 200.\n// Knob 4: Sea level. Floods the lowland or drains the shelf; the lines stay where the ground is and go under the water.\n\nconst W = 64;\nconst H = 128;\nconst N = 128;\nconst LAND_LO = -400;\nconst LAND_HI = 1400;\nconst DEEP = 700;\nconst KEYS = [\"fill\", \"line\", \"index\", \"water\", \"wline\", \"coast\"];\n// Where the three slices of the noise are read from.\nconst OX = [0, 61.3, 17.9];\nconst OY = [0, 23.7, 88.1];\n\n// Stops are [metres, colour]: land by height, water by depth.\nconst PALETTES = [\n  {\n    land: [[-400, 0x2c6e30], [0, 0x2f7a34], [150, 0x5c9a38], [350, 0xa6a64c], [550, 0xb08444], [750, 0x8a5a36], [950, 0x7a625a], [1150, 0xb4aea8], [1400, 0xf2f4f6]],\n    water: [[0, 0x3c8ed4], [200, 0x1c52a0], [700, 0x0a1c50]],\n    fill: 0.5, line: 0.3, index: 0.7, wline: 0.45, coast: 0xd8f0ff,\n  },\n  {\n    land: [[-150, 0x440154], [50, 0x472d7b], [200, 0x3b528b], [350, 0x2c728e], [500, 0x21918c], [650, 0x28ae80], [800, 0x5ec962], [950, 0xaadc32], [1100, 0xfde725]],\n    water: [[0, 0x2a2a34], [700, 0x0e0e14]],\n    fill: 0.6, line: 0.3, index: 0.7, wline: 0.35, coast: 0xffffff,\n  },\n  {\n    land: [[-400, 0x00c8ff], [300, 0x00ffa0], [700, 0xc0ff40], [1000, 0xff9020], [1400, 0xff40c0]],\n    water: [[0, 0x082050], [700, 0x020818]],\n    fill: 0.08, line: 0, index: 0.55, wline: 0.6, coast: 0x60ffe0,\n  },\n  {\n    // Dark ink on paper: here the index lines are heavier, not brighter.\n    land: [[-400, 0xe0d0a8], [1400, 0xc8ae86]],\n    water: [[0, 0x6c9cac], [700, 0x48788c]],\n    fill: 0.58, ink: 0x3a2412, inkIndex: 0x1a0c04, wink: 0x1e3c58, coast: 0x102c4a,\n  },\n];\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x, 374761393) + Math.imul(y, 668265263) + Math.imul(s, 2147483647);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction fade(t) {\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\n// Tileable gradient noise, three octaves, zero mean and unit spread. Value\n// noise was tried first; its contours run along the lattice. A fourth\n// octave put a wiggle in every line that the panel cannot draw.\nfunction bake(seed) {\n  const tex = new Float32Array(N * N);\n  let amp = 1;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 4 \u003c\u003c o;\n    const size = N / cells;\n    for (let y = 0; y \u003c N; y++) {\n      const gy = Math.floor(y / size);\n      const fy = y / size - gy;\n      const uy = fade(fy);\n      for (let x = 0; x \u003c N; x++) {\n        const gx = Math.floor(x / size);\n        const fx = x / size - gx;\n        const ux = fade(fx);\n        let top = 0;\n        let bottom = 0;\n        for (let c = 0; c \u003c 4; c++) {\n          const cx = (gx + (c & 1)) % cells;\n          const cy = (gy + (c >> 1)) % cells;\n          const a = hash(cx, cy, seed * 8 + o) * 6.2832;\n          const d = Math.cos(a) * (fx - (c & 1)) + Math.sin(a) * (fy - (c >> 1));\n          if (c === 0) top = d;\n          else if (c === 1) top += (d - top) * ux;\n          else if (c === 2) bottom = d;\n          else bottom += (d - bottom) * ux;\n        }\n        tex[y * N + x] += (top + (bottom - top) * uy) * amp;\n      }\n    }\n    amp *= 0.4;\n  }\n  let sum = 0;\n  for (let i = 0; i \u003c tex.length; i++) sum += tex[i];\n  const mean = sum / tex.length;\n  let sq = 0;\n  for (let i = 0; i \u003c tex.length; i++) sq += (tex[i] - mean) * (tex[i] - mean);\n  const sd = Math.sqrt(sq / tex.length);\n  for (let i = 0; i \u003c tex.length; i++) tex[i] = (tex[i] - mean) / sd;\n  return tex;\n}\n\nfunction ramp(out, stops, lo, hi, scale, toward, mix) {\n  const n = out.length / 3;\n  let s = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const m = lo + ((hi - lo) * i) / (n - 1);\n    while (s \u003c stops.length - 2 && m > stops[s + 1][0]) s++;\n    const a = stops[s];\n    const b = stops[Math.min(stops.length - 1, s + 1)];\n    const f = b[0] === a[0] ? 0 : Math.max(0, Math.min(1, (m - a[0]) / (b[0] - a[0])));\n    for (let c = 0; c \u003c 3; c++) {\n      const sh = 16 - c * 8;\n      const v = ((a[1] >> sh) & 255) * (1 - f) + ((b[1] >> sh) & 255) * f;\n      out[i * 3 + c] = (v + (toward - v) * mix) * scale;\n    }\n  }\n}\n\n// One palette as five tables: land fill, land line, index line, water fill, water line.\nfunction tables(p) {\n  const t = {\n    fill: new Float32Array(128 * 3),\n    line: new Float32Array(128 * 3),\n    index: new Float32Array(128 * 3),\n    water: new Float32Array(64 * 3),\n    wline: new Float32Array(64 * 3),\n    coast: new Float32Array(3),\n  };\n  ramp(t.fill, p.land, LAND_LO, LAND_HI, p.fill, 0, 0);\n  ramp(t.water, p.water, 0, DEEP, 1, 0, 0);\n  if (p.ink) {\n    ramp(t.line, [[0, p.ink], [1, p.ink]], 0, 1, 1, 0, 0);\n    ramp(t.index, [[0, p.inkIndex], [1, p.inkIndex]], 0, 1, 1, 0, 0);\n    ramp(t.wline, [[0, p.wink], [1, p.wink]], 0, 1, 1, 0, 0);\n  } else {\n    ramp(t.line, p.land, LAND_LO, LAND_HI, 0.85, 255, p.line);\n    ramp(t.index, p.land, LAND_LO, LAND_HI, 1, 255, p.index);\n    ramp(t.wline, p.water, 0, DEEP, 1, 200, p.wline);\n  }\n  t.coast[0] = (p.coast >> 16) & 255;\n  t.coast[1] = (p.coast >> 8) & 255;\n  t.coast[2] = p.coast & 255;\n  return t;\n}\n\nexport function setup(params) {\n  params.tex = bake(1);\n  params.e = new Float32Array(W * H);\n  params.cx = new Int32Array(3 * W);\n  params.cf = new Float32Array(3 * W);\n  params.ry = new Int32Array(3 * H);\n  params.rf = new Float32Array(3 * H);\n  params.wk = new Float32Array(3);\n  params.sets = PALETTES.map(tables);\n  params.mix = tables(PALETTES[0]);\n  params.palKey = -1;\n  params.phi = 0.6;\n  params.psi = 0;\n  params.drift = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 50, 0.06];\n  dt = Math.min(dt, 0.1);\n  const morph = Math.max(0, k[1]);\n  params.phi += dt * morph * 0.0075;\n  params.psi += dt * morph * 0.003;\n  params.drift += dt * morph * 0.016;\n  params.interval = Math.max(10, k[2]);\n  params.sea = k[3];\n\n  // Four palettes in a row, each held for a while before it blends into the next.\n  const pos = Math.max(0, Math.min(1, k[0])) * (PALETTES.length - 1);\n  if (pos !== params.palKey) {\n    params.palKey = pos;\n    const a = Math.min(PALETTES.length - 2, Math.floor(pos));\n    const u = pos - a;\n    const g = Math.max(0, Math.min(1, (u - 0.2) / 0.6));\n    const m = g * g * (3 - 2 * g);\n    const A = params.sets[a];\n    const B = params.sets[a + 1];\n    for (const key of KEYS) {\n      const o = params.mix[key];\n      for (let i = 0; i \u003c o.length; i++) o[i] = A[key][i] * (1 - m) + B[key][i] * m;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const tex = params.tex;\n  const e = params.e;\n  // The land is three slices of one noise, turned slowly against each other,\n  // so hills swell and sink in place instead of sliding past.\n  const c1 = Math.cos(params.phi);\n  const s1 = Math.sin(params.phi);\n  const c2 = Math.cos(params.psi) * s1;\n  const s2 = Math.sin(params.psi) * s1;\n  const s = 0.6;\n  const dr = params.drift;\n  // Each slice is read at the same columns in every row and the same rows in\n  // every column, so the lattice lookups are worked out once per frame.\n  const cx = params.cx;\n  const cf = params.cf;\n  const ry = params.ry;\n  const rf = params.rf;\n  for (let k = 0; k \u003c 3; k++) {\n    for (let x = 0; x \u003c W; x++) {\n      const u = x * s + dr + OX[k];\n      const fu = Math.floor(u);\n      cx[k * W + x] = fu & (N - 1);\n      cf[k * W + x] = u - fu;\n    }\n    for (let y = 0; y \u003c H; y++) {\n      const v = y * s + dr * 0.4 + OY[k];\n      const fv = Math.floor(v);\n      ry[k * H + y] = (fv & (N - 1)) * N;\n      rf[k * H + y] = v - fv;\n    }\n  }\n  const wk = params.wk;\n  wk[0] = c1;\n  wk[1] = c2;\n  wk[2] = s2;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) e[y * W + x] = 0;\n    for (let k = 0; k \u003c 3; k++) {\n      const r0 = ry[k * H + y];\n      const r1 = (r0 + N) & (N * N - 1);\n      const ty = rf[k * H + y];\n      const w = wk[k];\n      for (let x = 0; x \u003c W; x++) {\n        const x0 = cx[k * W + x];\n        const x1 = (x0 + 1) & (N - 1);\n        const tx = cf[k * W + x];\n        const a = tex[r0 + x0];\n        const b = tex[r0 + x1];\n        const c = tex[r1 + x0];\n        const d = tex[r1 + x1];\n        e[y * W + x] += (a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty) * w;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const n = e[y * W + x];\n      // Peaks a little sharper than valleys, the way real ground erodes.\n      e[y * W + x] = 190 + 240 * n + 50 * n * Math.abs(n);\n    }\n  }\n\n  const P = params.mix;\n  const fill = P.fill;\n  const line = P.line;\n  const index = P.index;\n  const water = P.water;\n  const wline = P.wline;\n  const coast = P.coast;\n  const I = params.interval;\n  const sea = params.sea;\n  const toLand = 127 / (LAND_HI - LAND_LO);\n  const toDepth = 63 / DEEP;\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const row = y * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      const h = e[row + x];\n      const gx = (e[row + r] - e[row + l]) * 0.5;\n      const gy = (e[down + x] - e[up + x]) * 0.5;\n      // Metres per LED here, so a height difference becomes a distance.\n      const ig = 1 / (Math.sqrt(gx * gx + gy * gy) + 0.5);\n      const q = h / I;\n      const level = Math.floor(q + 0.5);\n      const major = level % 5 === 0;\n      // A line is drawn by its distance from the pixel, so it glides as the\n      // land moves instead of jumping a whole LED.\n      const off = q > level ? q - level : level - q;\n      let a = 1 - off * I * ig * (major ? 1.05 : 1.43);\n      if (a \u003c 0) a = 0;\n      let R;\n      let G;\n      let B;\n      let LR;\n      let LG;\n      let LB;\n      if (h \u003c sea) {\n        let d = ((sea - h) * toDepth + 0.5) | 0;\n        d = (d > 63 ? 63 : d) * 3;\n        R = water[d];\n        G = water[d + 1];\n        B = water[d + 2];\n        LR = wline[d];\n        LG = wline[d + 1];\n        LB = wline[d + 2];\n        if (!major) a *= 0.5;\n      } else {\n        let i = ((h - LAND_LO) * toLand + 0.5) | 0;\n        i = (i \u003c 0 ? 0 : i > 127 ? 127 : i) * 3;\n        // Light from the top left, a hillshade under the tint.\n        let sh = 1 + (e[up + l] - e[down + r]) * 0.006;\n        sh = sh \u003c 0.55 ? 0.55 : sh > 1.45 ? 1.45 : sh;\n        R = fill[i] * sh;\n        G = fill[i + 1] * sh;\n        B = fill[i + 2] * sh;\n        const t = major ? index : line;\n        LR = t[i];\n        LG = t[i + 1];\n        LB = t[i + 2];\n      }\n      R += (LR - R) * a;\n      G += (LG - G) * a;\n      B += (LB - B) * a;\n      // The shore is a line of its own at whatever height the sea stands.\n      const c = 1 - (h > sea ? h - sea : sea - h) * ig * 1.25;\n      if (c > 0) {\n        R += (coast[0] - R) * c;\n        G += (coast[1] - G) * c;\n        B += (coast[2] - B) * c;\n      }\n      display.setPixel(x, y, R > 255 ? 255 : R, G > 255 ? 255 : G, B > 255 ? 255 : B);\n    }\n  }\n}\n","layer":{"id":"layer-contour","type":"code","name":"contour","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Contour Map\n// Family:  data\n// Idea:    A topographic map of slowly heaving land, a contour line every so many metres and every fifth one brighter, tinted green in the lowland and white on the peaks, with a sea that floods whatever lies below it.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Morph=0..6, Interval=50..200, Sea level=-300..600\n//\n// Knob 1: Palette. The atlas, then a viridis data plot, then neon lines on black, then a survey sheet in dark ink.\n// Knob 2: Morph. How fast the land rises and sinks; 0 holds the map still.\n// Knob 3: Interval. Metres between contour lines, from a dense survey at 50 to a few wide rings at 200.\n// Knob 4: Sea level. Floods the lowland or drains the shelf; the lines stay where the ground is and go under the water.\n\nconst W = 64;\nconst H = 128;\nconst N = 128;\nconst LAND_LO = -400;\nconst LAND_HI = 1400;\nconst DEEP = 700;\nconst KEYS = [\"fill\", \"line\", \"index\", \"water\", \"wline\", \"coast\"];\n// Where the three slices of the noise are read from.\nconst OX = [0, 61.3, 17.9];\nconst OY = [0, 23.7, 88.1];\n\n// Stops are [metres, colour]: land by height, water by depth.\nconst PALETTES = [\n  {\n    land: [[-400, 0x2c6e30], [0, 0x2f7a34], [150, 0x5c9a38], [350, 0xa6a64c], [550, 0xb08444], [750, 0x8a5a36], [950, 0x7a625a], [1150, 0xb4aea8], [1400, 0xf2f4f6]],\n    water: [[0, 0x3c8ed4], [200, 0x1c52a0], [700, 0x0a1c50]],\n    fill: 0.5, line: 0.3, index: 0.7, wline: 0.45, coast: 0xd8f0ff,\n  },\n  {\n    land: [[-150, 0x440154], [50, 0x472d7b], [200, 0x3b528b], [350, 0x2c728e], [500, 0x21918c], [650, 0x28ae80], [800, 0x5ec962], [950, 0xaadc32], [1100, 0xfde725]],\n    water: [[0, 0x2a2a34], [700, 0x0e0e14]],\n    fill: 0.6, line: 0.3, index: 0.7, wline: 0.35, coast: 0xffffff,\n  },\n  {\n    land: [[-400, 0x00c8ff], [300, 0x00ffa0], [700, 0xc0ff40], [1000, 0xff9020], [1400, 0xff40c0]],\n    water: [[0, 0x082050], [700, 0x020818]],\n    fill: 0.08, line: 0, index: 0.55, wline: 0.6, coast: 0x60ffe0,\n  },\n  {\n    // Dark ink on paper: here the index lines are heavier, not brighter.\n    land: [[-400, 0xe0d0a8], [1400, 0xc8ae86]],\n    water: [[0, 0x6c9cac], [700, 0x48788c]],\n    fill: 0.58, ink: 0x3a2412, inkIndex: 0x1a0c04, wink: 0x1e3c58, coast: 0x102c4a,\n  },\n];\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x, 374761393) + Math.imul(y, 668265263) + Math.imul(s, 2147483647);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction fade(t) {\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\n// Tileable gradient noise, three octaves, zero mean and unit spread. Value\n// noise was tried first; its contours run along the lattice. A fourth\n// octave put a wiggle in every line that the panel cannot draw.\nfunction bake(seed) {\n  const tex = new Float32Array(N * N);\n  let amp = 1;\n  for (let o = 0; o \u003c 3; o++) {\n    const cells = 4 \u003c\u003c o;\n    const size = N / cells;\n    for (let y = 0; y \u003c N; y++) {\n      const gy = Math.floor(y / size);\n      const fy = y / size - gy;\n      const uy = fade(fy);\n      for (let x = 0; x \u003c N; x++) {\n        const gx = Math.floor(x / size);\n        const fx = x / size - gx;\n        const ux = fade(fx);\n        let top = 0;\n        let bottom = 0;\n        for (let c = 0; c \u003c 4; c++) {\n          const cx = (gx + (c & 1)) % cells;\n          const cy = (gy + (c >> 1)) % cells;\n          const a = hash(cx, cy, seed * 8 + o) * 6.2832;\n          const d = Math.cos(a) * (fx - (c & 1)) + Math.sin(a) * (fy - (c >> 1));\n          if (c === 0) top = d;\n          else if (c === 1) top += (d - top) * ux;\n          else if (c === 2) bottom = d;\n          else bottom += (d - bottom) * ux;\n        }\n        tex[y * N + x] += (top + (bottom - top) * uy) * amp;\n      }\n    }\n    amp *= 0.4;\n  }\n  let sum = 0;\n  for (let i = 0; i \u003c tex.length; i++) sum += tex[i];\n  const mean = sum / tex.length;\n  let sq = 0;\n  for (let i = 0; i \u003c tex.length; i++) sq += (tex[i] - mean) * (tex[i] - mean);\n  const sd = Math.sqrt(sq / tex.length);\n  for (let i = 0; i \u003c tex.length; i++) tex[i] = (tex[i] - mean) / sd;\n  return tex;\n}\n\nfunction ramp(out, stops, lo, hi, scale, toward, mix) {\n  const n = out.length / 3;\n  let s = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const m = lo + ((hi - lo) * i) / (n - 1);\n    while (s \u003c stops.length - 2 && m > stops[s + 1][0]) s++;\n    const a = stops[s];\n    const b = stops[Math.min(stops.length - 1, s + 1)];\n    const f = b[0] === a[0] ? 0 : Math.max(0, Math.min(1, (m - a[0]) / (b[0] - a[0])));\n    for (let c = 0; c \u003c 3; c++) {\n      const sh = 16 - c * 8;\n      const v = ((a[1] >> sh) & 255) * (1 - f) + ((b[1] >> sh) & 255) * f;\n      out[i * 3 + c] = (v + (toward - v) * mix) * scale;\n    }\n  }\n}\n\n// One palette as five tables: land fill, land line, index line, water fill, water line.\nfunction tables(p) {\n  const t = {\n    fill: new Float32Array(128 * 3),\n    line: new Float32Array(128 * 3),\n    index: new Float32Array(128 * 3),\n    water: new Float32Array(64 * 3),\n    wline: new Float32Array(64 * 3),\n    coast: new Float32Array(3),\n  };\n  ramp(t.fill, p.land, LAND_LO, LAND_HI, p.fill, 0, 0);\n  ramp(t.water, p.water, 0, DEEP, 1, 0, 0);\n  if (p.ink) {\n    ramp(t.line, [[0, p.ink], [1, p.ink]], 0, 1, 1, 0, 0);\n    ramp(t.index, [[0, p.inkIndex], [1, p.inkIndex]], 0, 1, 1, 0, 0);\n    ramp(t.wline, [[0, p.wink], [1, p.wink]], 0, 1, 1, 0, 0);\n  } else {\n    ramp(t.line, p.land, LAND_LO, LAND_HI, 0.85, 255, p.line);\n    ramp(t.index, p.land, LAND_LO, LAND_HI, 1, 255, p.index);\n    ramp(t.wline, p.water, 0, DEEP, 1, 200, p.wline);\n  }\n  t.coast[0] = (p.coast >> 16) & 255;\n  t.coast[1] = (p.coast >> 8) & 255;\n  t.coast[2] = p.coast & 255;\n  return t;\n}\n\nexport function setup(params) {\n  params.tex = bake(1);\n  params.e = new Float32Array(W * H);\n  params.cx = new Int32Array(3 * W);\n  params.cf = new Float32Array(3 * W);\n  params.ry = new Int32Array(3 * H);\n  params.rf = new Float32Array(3 * H);\n  params.wk = new Float32Array(3);\n  params.sets = PALETTES.map(tables);\n  params.mix = tables(PALETTES[0]);\n  params.palKey = -1;\n  params.phi = 0.6;\n  params.psi = 0;\n  params.drift = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 50, 0.06];\n  dt = Math.min(dt, 0.1);\n  const morph = Math.max(0, k[1]);\n  params.phi += dt * morph * 0.0075;\n  params.psi += dt * morph * 0.003;\n  params.drift += dt * morph * 0.016;\n  params.interval = Math.max(10, k[2]);\n  params.sea = k[3];\n\n  // Four palettes in a row, each held for a while before it blends into the next.\n  const pos = Math.max(0, Math.min(1, k[0])) * (PALETTES.length - 1);\n  if (pos !== params.palKey) {\n    params.palKey = pos;\n    const a = Math.min(PALETTES.length - 2, Math.floor(pos));\n    const u = pos - a;\n    const g = Math.max(0, Math.min(1, (u - 0.2) / 0.6));\n    const m = g * g * (3 - 2 * g);\n    const A = params.sets[a];\n    const B = params.sets[a + 1];\n    for (const key of KEYS) {\n      const o = params.mix[key];\n      for (let i = 0; i \u003c o.length; i++) o[i] = A[key][i] * (1 - m) + B[key][i] * m;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const tex = params.tex;\n  const e = params.e;\n  // The land is three slices of one noise, turned slowly against each other,\n  // so hills swell and sink in place instead of sliding past.\n  const c1 = Math.cos(params.phi);\n  const s1 = Math.sin(params.phi);\n  const c2 = Math.cos(params.psi) * s1;\n  const s2 = Math.sin(params.psi) * s1;\n  const s = 0.6;\n  const dr = params.drift;\n  // Each slice is read at the same columns in every row and the same rows in\n  // every column, so the lattice lookups are worked out once per frame.\n  const cx = params.cx;\n  const cf = params.cf;\n  const ry = params.ry;\n  const rf = params.rf;\n  for (let k = 0; k \u003c 3; k++) {\n    for (let x = 0; x \u003c W; x++) {\n      const u = x * s + dr + OX[k];\n      const fu = Math.floor(u);\n      cx[k * W + x] = fu & (N - 1);\n      cf[k * W + x] = u - fu;\n    }\n    for (let y = 0; y \u003c H; y++) {\n      const v = y * s + dr * 0.4 + OY[k];\n      const fv = Math.floor(v);\n      ry[k * H + y] = (fv & (N - 1)) * N;\n      rf[k * H + y] = v - fv;\n    }\n  }\n  const wk = params.wk;\n  wk[0] = c1;\n  wk[1] = c2;\n  wk[2] = s2;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) e[y * W + x] = 0;\n    for (let k = 0; k \u003c 3; k++) {\n      const r0 = ry[k * H + y];\n      const r1 = (r0 + N) & (N * N - 1);\n      const ty = rf[k * H + y];\n      const w = wk[k];\n      for (let x = 0; x \u003c W; x++) {\n        const x0 = cx[k * W + x];\n        const x1 = (x0 + 1) & (N - 1);\n        const tx = cf[k * W + x];\n        const a = tex[r0 + x0];\n        const b = tex[r0 + x1];\n        const c = tex[r1 + x0];\n        const d = tex[r1 + x1];\n        e[y * W + x] += (a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty) * w;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const n = e[y * W + x];\n      // Peaks a little sharper than valleys, the way real ground erodes.\n      e[y * W + x] = 190 + 240 * n + 50 * n * Math.abs(n);\n    }\n  }\n\n  const P = params.mix;\n  const fill = P.fill;\n  const line = P.line;\n  const index = P.index;\n  const water = P.water;\n  const wline = P.wline;\n  const coast = P.coast;\n  const I = params.interval;\n  const sea = params.sea;\n  const toLand = 127 / (LAND_HI - LAND_LO);\n  const toDepth = 63 / DEEP;\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const row = y * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      const h = e[row + x];\n      const gx = (e[row + r] - e[row + l]) * 0.5;\n      const gy = (e[down + x] - e[up + x]) * 0.5;\n      // Metres per LED here, so a height difference becomes a distance.\n      const ig = 1 / (Math.sqrt(gx * gx + gy * gy) + 0.5);\n      const q = h / I;\n      const level = Math.floor(q + 0.5);\n      const major = level % 5 === 0;\n      // A line is drawn by its distance from the pixel, so it glides as the\n      // land moves instead of jumping a whole LED.\n      const off = q > level ? q - level : level - q;\n      let a = 1 - off * I * ig * (major ? 1.05 : 1.43);\n      if (a \u003c 0) a = 0;\n      let R;\n      let G;\n      let B;\n      let LR;\n      let LG;\n      let LB;\n      if (h \u003c sea) {\n        let d = ((sea - h) * toDepth + 0.5) | 0;\n        d = (d > 63 ? 63 : d) * 3;\n        R = water[d];\n        G = water[d + 1];\n        B = water[d + 2];\n        LR = wline[d];\n        LG = wline[d + 1];\n        LB = wline[d + 2];\n        if (!major) a *= 0.5;\n      } else {\n        let i = ((h - LAND_LO) * toLand + 0.5) | 0;\n        i = (i \u003c 0 ? 0 : i > 127 ? 127 : i) * 3;\n        // Light from the top left, a hillshade under the tint.\n        let sh = 1 + (e[up + l] - e[down + r]) * 0.006;\n        sh = sh \u003c 0.55 ? 0.55 : sh > 1.45 ? 1.45 : sh;\n        R = fill[i] * sh;\n        G = fill[i + 1] * sh;\n        B = fill[i + 2] * sh;\n        const t = major ? index : line;\n        LR = t[i];\n        LG = t[i + 1];\n        LB = t[i + 2];\n      }\n      R += (LR - R) * a;\n      G += (LG - G) * a;\n      B += (LB - B) * a;\n      // The shore is a line of its own at whatever height the sea stands.\n      const c = 1 - (h > sea ? h - sea : sea - h) * ig * 1.25;\n      if (c > 0) {\n        R += (coast[0] - R) * c;\n        G += (coast[1] - G) * c;\n        B += (coast[2] - B) * c;\n      }\n      display.setPixel(x, y, R > 255 ? 255 : R, G > 255 ? 255 : G, B > 255 ? 255 : B);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..1, Morph=0..6, Interval=50..200, Sea level=-300..600","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":1,"about":"The atlas, then a viridis data plot, then neon lines on black, then a survey sheet in dark ink."},{"name":"Morph","min":0,"max":6,"about":"How fast the land rises and sinks; 0 holds the map still."},{"name":"Interval","min":50,"max":200,"about":"Metres between contour lines, from a dense survey at 50 to a few wide rings at 200."},{"name":"Sea level","min":-300,"max":600,"about":"Floods the lowland or drains the shelf; the lines stay where the ground is and go under the water."}],"start":[0,2,50,0.06],"measures":{"motion":0.059,"detail":0.1124,"edges":0.4216,"complexity":2.7352,"coverage":1,"colour":0.2347,"drift":0.0329},"knobResponse":[0.3087,0.1314,0.1058,0.2222]},{"slug":"crossroads","title":"Crossroads","family":"city","round":17,"note":"드론으로 곧장 내려다본 밤 네거리예요. 차는 전조등과 미등으로만 보이고, 나트륨등 웅덩이 사이에서 신호가 줄을 세웠다 풀며, 모든 차가 서면 사람들이 건널목 넷을 한꺼번에 건너요.","idea":"A night avenue seen straight down from a drone and crossed by two side streets, where the cars show by their lights, the signals hold and release the queues, and people cross all four zebras at once while every car waits.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Crossroads\n// Family:  city\n// Idea:    A night avenue seen straight down from a drone and crossed by two side streets, where the cars show by their lights, the signals hold and release the queues, and people cross all four zebras at once while every car waits.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17; the intelligent driver model of Treiber, Hennecke and Helbing (2000) and the all-way pedestrian phase of Seoul junctions\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Lamps=0..1, Pace=0.2..3, Hour=0..1, Rain=0..1\n//\n// Knob 1: Lamps. At 0 every street lamp is low-pressure sodium and pools the road in orange; turned up, the city swaps them one at a time for white LED heads.\n// Knob 2: Pace. The clock of the whole street: at 2 a car crosses the panel in about five seconds and the signals cycle every thirty, at 0.2 it all creeps.\n// Knob 3: Hour. At 0 the evening rush, with queues at every red; turned up, traffic and people thin out, after 1 am every other lamp goes out, and past 3 am the signals flash amber on the avenue and red on the side streets.\n// Knob 4: Rain. Darkens the asphalt to a mirror: each lamp glares under itself inside a haze of lit drops, signals and tail lights streak across the road, and people open umbrellas.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// First row of each side street, 12 rows across.\nconst JY = [30, 90];\n// Lane centres. Traffic keeps right: down the panel on the west half of the\n// avenue, up it on the east half; west on the north half of a side street.\nconst [SBO, SBI, NBI, NBO] = [22.5, 27.5, 36.5, 41.5];\nconst STEP = 0.25;\nconst cl = (v) => Math.min(1, Math.max(0, v));\n\n// A movement: an approach (from N, S, W, E) and a turn (straight, left, right).\nconst mv = (a, t) => 1 \u003c\u003c (a * 3 + t);\nconst all = (a) => 7 \u003c\u003c (a * 3);\nconst SR = (a) => mv(a, 0) | mv(a, 2);\n// The cycle in seconds at Pace 2: [length, green, amber, walk]. Each avenue\n// direction leads with its left arrow, the side streets take turns, then\n// every car waits while people cross all four zebras at once.\nconst PH = [\n  [4, all(0), 0, 0], [1, SR(0), mv(0, 1), 0], [5, SR(0) | SR(1), 0, 0], [1.2, SR(1), SR(0), 0], [4, all(1), 0, 0], [1.2, 0, all(1), 0],\n  [3, all(2), 0, 0], [1.2, 0, all(2), 0], [3, all(3), 0, 0], [1.2, 0, all(3), 0], [5, 0, 0, 1], [1.5, 0, 0, 2], [0.8, 0, 0, 0],\n];\nconst CYCLE = PH.reduce((a, p) => a + p[0], 0);\n\n// Low-pressure sodium burns in one orange line at 589 nm; LED heads are cool white.\nconst SODIUM = [1, 0.34, 0];\nconst LED = [0.4, 0.43, 0.47];\n// Lamps [x, y, reach]: both ends of the school street, two mid-block, and\n// opposite corners of each junction so the zebras stand in light.\nconst LAMPS = [\n  [6, 36, 8], [42, 70, 8], [21, 58, 8], [57, 36, 8],\n  ...JY.flatMap((y) => [[21, y - 1, 9], [42, y + 12, 9]]),\n];\n// The lamp at row 70 is dying: it goes out, strikes again in the red of its\n// neon starter gas and warms back up.\nconst DYING = 1;\n// Red neon crosses on church roofs, as on every Seoul skyline.\nconst CROSSES = [[7, 9], [56, 63], [9, 115]];\n// Lamp, headlight and tail light at their brightest, over albedo.\nconst [I_LAMP, I_HEAD, I_TAIL] = [20, 1, 9];\nconst AMBIENT = [0.13, 0.14, 0.18];\nconst RED = [1, 0.04, 0.03];\nconst GREEN = [0.05, 1, 0.5];\nconst SIG = [RED, [1, 0.5, 0], GREEN];\nconst GLASS = [0.03, 0.034, 0.04];\nconst AMBER = [255, 150, 0];\nconst BEAMS = [[1, 0.85, 0.6], [0.9, 0.95, 1]];\n// Car paint and its odds: white and silver half the time, as on Korean roads.\nconst PAINT = [[0.72, 0.72, 0.72], [0.48, 0.5, 0.53], [0.05, 0.05, 0.06], [0.2, 0.2, 0.22], [0.07, 0.09, 0.24], [0.55, 0.05, 0.04], [0.8, 0.4, 0.06]];\nconst PAINT_P = [0.3, 0.2, 0.17, 0.1, 0.07, 0.06, 0.1];\n// Umbrellas: clear convenience-store plastic most, then black, red, yellow, navy.\nconst UMBRELLA = [[0.7, 0.72, 0.75], [0.7, 0.72, 0.75], [0.05, 0.05, 0.08], [0.6, 0.05, 0.08], [0.75, 0.6, 0.05], [0.06, 0.12, 0.4]];\nconst PLUS = [[0, 0], [1, 0], [-1, 0], [0, 1], [0, -1]];\n// Walk lights laid in the kerb at both ends of each zebra, as in Seoul: first\n// LED and the way the strip runs.\nconst KERB = [[19, -6, 0, 1], [44, -6, 0, 1], [19, 14, 0, 1], [44, 14, 0, 1], [14, -1, 1, 0], [14, 12, 1, 0], [46, -1, 1, 0], [46, 12, 1, 0]];\n// Signal heads by approach, from the junction's first row: first LED of the\n// bar (red, amber, left arrow, green), the step along it, the way it faces.\nconst HEADS = [[23, 12, 1, 0, 0, -1], [40, -1, -1, 0, 0, 1], [44, 7, 0, 1, -1, 0], [19, 4, 0, -1, 1, 0]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction pick(list) {\n  let r = Math.random();\n  for (let i = 0; i \u003c list.length; i++) if ((r -= list[i]) \u003c 0) return i;\n  return list.length - 1;\n}\n\n// A route: a path sampled every STEP pixels, the speed allowed at each sample,\n// stop lines [s, junction, movement] and a turn [s0, s1, side]. Ops: [\"t\", c]\n// on until x or y is c, [\"s\", j, m] a stop line, [\"r\", side, radius] a turn.\nfunction route(x, y, hx, hy, ops) {\n  const X = [x];\n  const Y = [y];\n  const C = [99];\n  const stops = [];\n  let turn = null;\n  for (const op of ops) {\n    const s = (X.length - 1) * STEP;\n    if (op[0] === \"s\") stops.push([s, op[1], op[2]]);\n    else if (op[0] === \"t\") {\n      const n = Math.round((hx ? (op[1] - x) * hx : (op[1] - y) * hy) / STEP);\n      for (let i = 1; i \u003c= n; i++) X.push(x + hx * i * STEP), Y.push(y + hy * i * STEP), C.push(99);\n      x += hx * n * STEP;\n      y += hy * n * STEP;\n    } else {\n      const [, side, r] = op;\n      const nx = side > 0 ? -hy : hy;\n      const ny = side > 0 ? hx : -hx;\n      const cx = x + r * nx;\n      const cy = y + r * ny;\n      const n = Math.round((Math.PI / 2) * r / STEP);\n      turn = [s, s + n * STEP, side];\n      for (let i = 1; i \u003c= n; i++) {\n        const a = (i / n) * (Math.PI / 2);\n        X.push(cx - r * nx * Math.cos(a) + r * hx * Math.sin(a));\n        Y.push(cy - r * ny * Math.cos(a) + r * hy * Math.sin(a));\n        C.push(Math.sqrt(40 * r));\n      }\n      x = cx + r * hx;\n      y = cy + r * hy;\n      hx = nx;\n      hy = ny;\n    }\n  }\n  // Slow for a turn ahead at 25 px/s per second.\n  for (let i = C.length - 2; i >= 0; i--) C[i] = Math.min(C[i], Math.sqrt(C[i + 1] * C[i + 1] + 50 * STEP));\n  return { X, Y, C, stops, turn, len: (X.length - 1) * STEP };\n}\n\n// Eight entries, each a list of [odds, route].\nfunction routes() {\n  const [a, b] = JY;\n  const st = (j, ap, t) => [\"s\", j, mv(ap, t)];\n  // Along the avenue in lane x, through both junctions or turning t at one.\n  const avenue = (x, up, t) => {\n    const ap = up ? 1 : 0;\n    const order = up ? [1, 0] : [0, 1];\n    const ops = (at) => {\n      const o = [];\n      for (const j of order) {\n        const y = JY[j];\n        o.push([\"t\", up ? y + 20 : y - 8], st(j, ap, j === at ? t : 0));\n        if (j === at)\n          return o.concat(t === 2 ? [[\"t\", up ? y + 13 : y - 1], [\"r\", 1, 3.5], [\"t\", up ? 78 : -14]] : [[\"t\", up ? y + 9.5 : y + 2.5], [\"r\", -1, 7], [\"t\", up ? -14 : 78]]);\n      }\n      return o.concat([[\"t\", up ? -14 : 142]]);\n    };\n    return [[0.7, -1], [0.15, order[0]], [0.15, order[1]]].map(([p, at]) => [p, route(x, up ? 142 : -14, 0, up ? -1 : 1, ops(at))]);\n  };\n  const E = [avenue(SBO, 0, 2), avenue(SBI, 0, 1), avenue(NBI, 1, 1), avenue(NBO, 1, 2)];\n  JY.forEach((y, j) => {\n    // Turned onto the avenue, on through the other junction if it is ahead.\n    const down = j ? [[\"t\", 142]] : [[\"t\", b - 8], st(1, 0, 0), [\"t\", 142]];\n    const up = j ? [[\"t\", a + 20], st(0, 1, 0), [\"t\", -14]] : [[\"t\", -14]];\n    const side = (x, ly, h, sx, ap, ra, rt, la, lt) => [\n      [0.45, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 0), [\"t\", 64 - x]])],\n      [0.3, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 2), [\"t\", ra], [\"r\", 1, 3.5], ...rt])],\n      [0.25, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 1), [\"t\", la], [\"r\", -1, 7], ...lt])],\n    ];\n    E.push(side(-14, y + 9.5, 1, 12, 2, 19, down, 29.5, up), side(78, y + 2.5, -1, 52, 3, 45, up, 34.5, down));\n  });\n  return E;\n}\n\n// The ground as albedo per channel, and what each LED is: 0 roof, 1 road, 2 pavement.\nfunction ground(S) {\n  const { AR, AG, AB, kind } = S;\n  const set = (p, r, g, b) => ((AR[p] = r), (AG[p] = g), (AB[p] = b));\n  const paint = (p, v, yellow) => set(p, v, yellow ? v * 0.8 : v, yellow ? v * 0.2 : v);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const g = hash(x, y);\n      let j = -1;\n      let c = -1;\n      for (let i = 0; i \u003c 2; i++) if (y >= JY[i] - 20 && y \u003c JY[i] + 32) (j = i), (c = y - JY[i]);\n      const cross = c >= 0 && c \u003c 12;\n      const av = x >= 20 && x \u003c 44;\n      if (av || cross) {\n        kind[p] = 1;\n        const v = 0.12 * (0.85 + 0.3 * g);\n        set(p, v, v, v * 0.95);\n        // The first side street runs past a school and is paved red.\n        if (j === 0 && cross && (x \u003c 14 || x > 49)) set(p, v * 2.6, v * 0.3, v * 0.3);\n        if (av && !cross) {\n          if ((c >= -6 && c \u003c -2) || (c >= 14 && c \u003c 18)) !(x & 1) && paint(p, 0.42);\n          else if ((c === -8 && x \u003c 31) || (c === 19 && x > 32)) paint(p, 0.42);\n          else if (x === 31 || x === 32) paint(p, 0.4, 1);\n          else if ((x === 25 || x === 38) && y % 9 \u003c 4) paint(p, 0.36);\n        } else if (!av) {\n          if ((x >= 14 && x \u003c 18) || (x >= 46 && x \u003c 50)) !(y & 1) && paint(p, 0.42);\n          else if ((x === 12 && c > 6) || (x === 51 && c \u003c 5)) paint(p, 0.42);\n          else if (c === 5 || c === 6) paint(p, 0.4, 1);\n        }\n      } else if ((x >= 16 && x \u003c 20) || (x >= 44 && x \u003c 48) || (c >= -4 && c \u003c 0) || (c >= 12 && c \u003c 16)) {\n        kind[p] = 2;\n        const v = (x % 3 && y % 3 ? 0.15 : 0.12) + g * 0.02;\n        set(p, v, v, v * 0.92);\n      } else {\n        set(p, 0.05, 0.05, 0.05);\n      }\n    }\n}\n\n// Each lamp's light on the street, falling as (1 - r^2)^1.5 so the core burns\n// amber and the rim fades over four LEDs; its wet glare; its haze in rain.\nfunction pools(S) {\n  S.pools = LAMPS.map(([hx, hy, R], i) => {\n    const o = { idx: [], w: [], g: [], hi: [], hw: [] };\n    // An oval pool along its road, a little out of round.\n    const sx = hx \u003c 16 || hx > 47 ? 1.2 : 0.85;\n    const r2 = R * 1.9;\n    box(hx - r2, hy - r2, hx + r2, hy + r2, (x, y, p) => {\n      const [dx, dy] = [(x - hx) / sx, (y - hy) * sx];\n      const r = Math.hypot(dx, dy) * (1 + 0.06 * Math.sin(3 * Math.atan2(dy, dx) + i * 2));\n      const u = 1 - (r / R) ** 2;\n      if (u > 0 && S.kind[p]) o.idx.push(p), o.w.push(u ** 1.5), o.g.push(Math.exp((-r * r) / 3));\n      if (r \u003c r2) o.hi.push(p), o.hw.push(r \u003c R ? 0.3 + 0.7 * (r / R) ** 2 : ((r2 - r) / (r2 - R)) ** 2);\n    });\n    return o;\n  });\n}\n\nfunction newCar(R, e) {\n  return { R, e, s: 0, v: 14, k: 0, wait: 0, brake: 0, vmax: 24 * (0.85 + Math.random() * 0.3), L: [5, 6, 6, 6, 7][Math.floor(Math.random() * 5)], col: PAINT[pick(PAINT_P)], led: +(Math.random() \u003c 0.5), ph: Math.random() };\n}\n\n// A car's nose and heading (fx, fy, hx, hy), and its middle (cx, cy, bx, by).\nfunction pose(c) {\n  const { X, Y } = c.R;\n  for (let k = 0; k \u003c 2; k++) {\n    const s = k ? c.s - c.L / 2 : c.s;\n    const f = Math.min(Math.max(s / STEP, 0), X.length - 1.001);\n    const i = Math.floor(f);\n    const dx = X[i + 1] - X[i];\n    const dy = Y[i + 1] - Y[i];\n    const l = Math.hypot(dx, dy) || 1;\n    const u = f - i + (s \u003c 0 ? s / l : 0);\n    if (k) (c.cx = X[i] + dx * u), (c.cy = Y[i] + dy * u), (c.bx = dx / l), (c.by = dy / l);\n    else (c.fx = X[i] + dx * u), (c.fy = Y[i] + dy * u), (c.hx = dx / l), (c.hy = dy / l);\n  }\n}\n\n// A signal for a movement: 0 red, 1 amber, 2 green, 3 and 4 flashing amber and red.\nfunction signal(S, j, m) {\n  if (S.flash) return m & (all(2) | all(3)) ? 4 : 3;\n  const p = PH[S.ph[j]];\n  return p[1] & m ? 2 : p[2] & m ? 1 : 0;\n}\n\n// Zebra w of junction j: 0 and 1 cross the avenue, 2 and 3 the side street.\n// Returns the two ends and the way out, away from the junction.\nfunction zebra(j, w) {\n  const y0 = JY[j];\n  if (w \u003c 2) return [18, y0 + (w ? 16 : -4), 46, y0 + (w ? 16 : -4), 0, w ? 1 : -1];\n  const x = w === 2 ? 16 : 48;\n  return [x, y0 - 2, x, y0 + 14, w === 2 ? -1 : 1, 0];\n}\n\n// People walk to a corner, wait, cross on the walk phase, hurrying when it\n// blinks, and walk off along the far pavement.\nfunction stepPeople(S, dt, rate) {\n  for (let i = 0; i \u003c 16; i++)\n    if (S.people.length \u003c 60 && Math.random() \u003c rate * dt) {\n      const j = i >> 3;\n      const w = (i >> 1) & 3;\n      const e = i & 1;\n      const z = zebra(j, w);\n      const o = (Math.random() - 0.5) * 3;\n      const tx = z[e * 2] + (z[4] ? o : 0);\n      const ty = z[e * 2 + 1] + (z[5] ? o : 0);\n      const d = 8 + Math.random() * 10;\n      S.people.push({\n        j, w, e, o, tx, ty, st: 0, life: 1, x: tx + z[4] * d, y: ty + z[5] * d,\n        v: 3.5 + Math.random() * 2, delay: Math.random() * 1.2,\n        umb: Math.floor(Math.random() * 6),\n      });\n    }\n  for (const p of S.people) {\n    const walk = PH[S.ph[p.j]][3];\n    const z = zebra(p.j, p.w);\n    if (p.st === 1) {\n      if (walk !== 1 || (p.delay -= dt) > 0) continue;\n      p.st = 2;\n      p.tx = z[2 - p.e * 2] + (z[4] ? p.o : 0);\n      p.ty = z[3 - p.e * 2] + (z[5] ? p.o : 0);\n    }\n    const dx = p.tx - p.x;\n    const dy = p.ty - p.y;\n    const d = Math.hypot(dx, dy);\n    const v = p.v * (p.st === 2 && walk === 2 ? 1.5 : 1) * dt;\n    if (d > v) (p.x += (dx / d) * v), (p.y += (dy / d) * v);\n    else if (p.st === 2) (p.st = 3), (p.tx = p.x + z[4] * 14), (p.ty = p.y + z[5] * 14);\n    else if (p.st === 0) p.st = 1;\n    else p.life = 0;\n    if (p.st === 3) p.life = Math.min(p.life, d / 6);\n  }\n  S.people = S.people.filter((p) => p.life > 0);\n}\n\nfunction stepCars(S, dt, rate) {\n  const cars = S.cars;\n  for (let e = 0; e \u003c 8; e++) {\n    S.due[e] = Math.min(2, S.due[e] + dt * rate * (e \u003c 4 ? 0.16 : 0.07));\n    if (S.due[e] \u003c 1) continue;\n    const list = S.E[e];\n    const R = list[pick(list.map((r) => r[0]))][1];\n    if (cars.some((c) => c.e === e && c.s \u003c c.L + 3)) continue;\n    const c = newCar(R, e);\n    pose(c);\n    cars.push(c);\n    S.due[e]--;\n  }\n  for (const c of cars) pose(c);\n  for (const c of cars) {\n    // The nearest thing ahead in the lane: a car, or someone on a zebra.\n    let gap = 60;\n    let lv = 0;\n    const { fx, fy, hx, hy } = c;\n    const see = (ox, oy, half, ov) => {\n      const rx = ox - fx;\n      const ry = oy - fy;\n      const d = rx * hx + ry * hy - half;\n      if (d > -2 * half && d \u003c gap && Math.abs(rx * hy - ry * hx) \u003c 2.6) (gap = d), (lv = ov);\n    };\n    for (const o of cars) if (o !== c) see(o.cx, o.cy, o.L / 2, o.v * (o.hx * hx + o.hy * hy));\n    for (const p of S.people) if (p.st === 2) see(p.x, p.y, 0.5, 0);\n    const st = c.R.stops[c.k];\n    if (st) {\n      const g = st[0] - c.s;\n      if (g \u003c -0.3) {\n        c.k++;\n        c.wait = 0;\n      } else {\n        const sg = signal(S, st[1], st[2]);\n        // Stop for red, for amber with room to, a moment at a flashing red, and\n        // on green when there is no room on the far side.\n        const stop = !sg || (sg === 1 && g > (c.v * c.v) / 70 + 0.5) || (sg === 4 && c.wait \u003c 1.2) || ((sg === 2 || sg === 3) && gap \u003c g + 24 && lv \u003c 3);\n        if (stop && g \u003c gap) (gap = g), (lv = 0);\n        if (sg === 4 && g \u003c 1.5 && c.v \u003c 0.5) c.wait += dt;\n      }\n    }\n    // The intelligent driver model in pixels and seconds.\n    const v0 = Math.min(c.vmax * (S.flash ? 1.2 : 1), c.R.C[Math.min(c.R.C.length - 1, Math.max(0, Math.round(c.s / STEP)))]);\n    const ss = 1.2 + Math.max(0, c.v * 0.5 + (c.v * (c.v - lv)) / 70);\n    const acc = Math.max(-160, 30 * (1 - (c.v / v0) ** 4 - (ss / Math.max(gap, 0.05)) ** 2));\n    c.v = Math.max(0, c.v + acc * dt);\n    c.s += Math.min(c.v * dt, Math.max(0, gap - 0.4));\n    c.brake = acc \u003c -6 || c.v \u003c 1;\n  }\n  S.cars = cars.filter((c) => c.s \u003c c.R.len);\n}\n\nfunction step(S, dt, k) {\n  S.clk += dt;\n  S.flash = k[2] > 0.8;\n  for (let j = 0; j \u003c 2; j++) {\n    let c = (S.clk + j * 5) % CYCLE;\n    let i = 0;\n    while (c >= PH[i][0]) c -= PH[i++][0];\n    S.ph[j] = i;\n  }\n  stepCars(S, dt, (1 - 0.94 * k[2]) ** 1.5);\n  stepPeople(S, dt, 0.06 * (1 - k[2]) ** 2);\n}\n\nexport function setup(params) {\n  Object.assign(params, {\n    AR: new Float32Array(N), AG: new Float32Array(N), AB: new Float32Array(N), kind: new Uint8Array(N),\n    L: new Float32Array(N * 3), buf: new Float32Array(N * 3), amb: new Float32Array(N * 3).map((_, i) => AMBIENT[i % 3]),\n    E: routes(), cars: [], people: [], due: new Float32Array(8), ph: [0, 0], clk: 0, t: 0, k: null,\n    // Which lamp the city replaces first.\n    order: LAMPS.map((_, i) => i).sort(() => Math.random() - 0.5),\n  });\n  ground(params);\n  pools(params);\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const kv = input.knobValues || [];\n  const k = [kv[0] ?? 0, kv[1] ?? 2, kv[2] ?? 0, kv[3] ?? 0.06];\n  const m = k[1] / 2;\n  // Twenty seconds to fill the street, then ten at the knobs' pace, so the\n  // knobs have placed the queues and the signals by the first frame.\n  if (!S.k) for (let i = 0; i \u003c 350; i++) step(S, i \u003c 200 ? 0.1 : m / 15, k);\n  S.k = k;\n  S.t += dt;\n  step(S, dt * m, k);\n}\n\n// Add colour c times v to the buffer A at LED p.\nconst add = (A, p, c, v) => ((A[(p *= 3)] += c[0] * v), (A[p + 1] += c[1] * v), (A[p + 2] += c[2] * v));\n\n// Call f(x, y, p) for each LED of a box, clipped to the panel.\nfunction box(x0, y0, x1, y1, f) {\n  for (let y = Math.max(0, Math.floor(y0)); y \u003c= Math.min(H - 1, y1); y++) for (let x = Math.max(0, Math.floor(x0)); x \u003c= Math.min(W - 1, x1); x++) f(x, y, y * W + x);\n}\n\n// Light c from (x0, y0) along (hx, hy) out to len: strength I falling as\n// (1 - t) ** q, or 1 - t ** -q for negative q, from w0 to w1 wide. With len 0,\n// a disc of radius w0 + 1.\nfunction beam(L, x0, y0, hx, hy, len, w0, w1, I, q, c) {\n  const r = Math.max(w0, w1) + 1;\n  box(Math.min(x0, x0 + hx * len) - r, Math.min(y0, y0 + hy * len) - r, Math.max(x0, x0 + hx * len) + r, Math.max(y0, y0 + hy * len) + r, (x, y, p) => {\n    const rx = x + 0.5 - x0;\n    const ry = y + 0.5 - y0;\n    const t = len && (rx * hx + ry * hy) / len;\n    const e = w0 + (w1 - w0) * t + 1 - Math.abs(rx * hy - ry * hx);\n    const v = !len ? I * (1 - Math.hypot(rx, ry) / r) : t > 0 && t \u003c 1 && e > 0 ? I * (q >= 0 ? (1 - t) ** q : 1 - t ** -q) * Math.min(1, e) : 0;\n    if (v > 0) add(L, p, c, v);\n  });\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.k) return;\n  const { L, buf, AR, AG, AB, kind } = S;\n  const [k0, , hour, rain] = S.k;\n  const wet = cl((rain - 0.08) / 0.5);\n  L.set(S.amb);\n  // After 1 am every other lamp goes out and the rest dim.\n  const dim = cl((hour - 0.4) / 0.2);\n  const lamps = LAMPS.map((_, i) => {\n    const led = (S.order.indexOf(i) + 0.5) / LAMPS.length \u003c k0;\n    let c = led ? LED : SODIUM;\n    let lv = 1 - (i & 1 ? 0.9 : 0.25) * dim;\n    if (i === DYING && !led) {\n      const t = (S.clk + 8.9) % 16;\n      const u = cl((t - 12.3) / 3.7);\n      lv *= t \u003c 9 ? 1 : t \u003c 9.4 ? (9.4 - t) / 0.4 : t \u003c 12 ? 0 : t \u003c 12.3 ? 0.2 : 0.2 + 0.8 * u;\n      if (t > 12) c = [1, 0.12 + 0.38 * u, 0.15 * (1 - u)];\n    }\n    const { idx, w, g } = S.pools[i];\n    for (let n = 0; n \u003c idx.length; n++) add(L, idx[n], c, I_LAMP * lv * (w[n] + wet * 2 * g[n]));\n    return [c, lv];\n  });\n  const blink = S.t % 1 > 0.5;\n  const lit = [];\n  for (let j = 0; j \u003c 2; j++) {\n    const y0 = JY[j];\n    for (let a = 0; a \u003c 4; a++) {\n      const [x, y, sx, sy, fx, fy] = HEADS[a];\n      const s0 = signal(S, j, mv(a, 0));\n      const on = [!s0 || (s0 === 4 && blink), s0 === 1 || (s0 === 3 && blink), signal(S, j, mv(a, 1)) === 2, s0 === 2];\n      // A lit lamp hazes the road under it, and on wet asphalt streaks toward\n      // the drivers.\n      for (let i = 0; i \u003c 4; i++)\n        if (on[i]) {\n          const c = SIG[Math.min(i, 2)];\n          const lx = x + sx * i + 0.5;\n          const ly = y0 + y + sy * i + 0.5;\n          lit.push([lx, ly, c, 0, 0, 1]);\n          beam(L, lx, ly, 0, 0, 0, 1.2, 0, 6, 0, c);\n          if (wet) beam(L, lx, ly, fx, fy, 2.2 + wet * 6, 0, 0, 4 * wet, 1, c);\n        }\n    }\n    const walk = PH[S.ph[j]][3];\n    const g = walk === 1 || (walk === 2 && S.t % 0.6 \u003c 0.3);\n    if (!S.flash && (g || walk !== 2))\n      for (const [x, y, dx, dy] of KERB) {\n        const c = g ? GREEN : RED;\n        lit.push([x, y0 + y, c, dx, dy, 4]);\n        beam(L, x + 0.5 - dx, y0 + y + 0.5 - dy, dx, dy, 5, 0.8, 0.8, 3.4, 0, c);\n      }\n  }\n  for (const c of S.cars) {\n    beam(L, c.fx, c.fy, c.hx, c.hy, 8, 1.3, 4.5, I_HEAD * (1 - wet * 0.4), 2, BEAMS[c.led]);\n    beam(L, c.cx - c.bx * c.L * 0.5, c.cy - c.by * c.L * 0.5, -c.bx, -c.by, 5.5 + wet * 5, 1.2, 1.2, I_TAIL * (c.brake ? 1 : 0.35), -3, RED);\n  }\n  // Each channel rolls off on its own, as film does, so paint too bright for\n  // the orange light burns through to yellow.\n  const roll = (v) => (v \u003c 200 ? v : 255 - 55 * Math.exp((200 - v) / 55));\n  const shade = (q, r, g, b) => ((buf[q] = roll(r)), (buf[q + 1] = roll(g)), (buf[q + 2] = roll(b)));\n  const aw = 255 * (1 - wet * 0.7);\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const a = kind[p] ? aw : 255;\n    shade(q, AR[p] * L[q] * a, AG[p] * L[q + 1] * a, AB[p] * L[q + 2] * a);\n  }\n  // Cars: the body in the light where it stands, dark glass fore and aft.\n  for (const c of S.cars) {\n    const h = c.L / 2;\n    box(c.cx - h - 1, c.cy - h - 1, c.cx + h + 1, c.cy + h + 1, (x, y, p) => {\n      const rx = x + 0.5 - c.cx;\n      const ry = y + 0.5 - c.cy;\n      const u = rx * c.bx + ry * c.by;\n      if (Math.abs(u) >= h || Math.abs(ry * c.bx - rx * c.by) >= 1.5) return;\n      const f = (h - u) / c.L;\n      const glass = (f > 0.22 && f \u003c 0.4) || (f > 0.74 && f \u003c 0.88);\n      const [r, g, b] = glass ? GLASS : c.col;\n      const sh = glass ? 255 : 166;\n      shade(p * 3, r * L[p * 3] * sh, g * L[p * 3 + 1] * sh, b * L[p * 3 + 2] * sh);\n    });\n  }\n  const put = (x, y, r, g, b, more) => {\n    x = Math.floor(x);\n    y = Math.floor(y);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const q = (y * W + x) * 3;\n    buf[q] = r + (more ? buf[q] : 0);\n    buf[q + 1] = g + (more ? buf[q + 1] : 0);\n    buf[q + 2] = b + (more ? buf[q + 2] : 0);\n  };\n  // People: a dark speck and its shadow in the light, a coat the shop\n  // windows catch out of it, a phone in some hands, umbrellas in the rain.\n  for (const p of S.people) {\n    const x = Math.floor(p.x);\n    const y = Math.floor(p.y);\n    if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= H - 1) continue;\n    const q = (y * W + x) * 3;\n    const f = p.life;\n    if (rain > 0.25) {\n      const u = UMBRELLA[p.umb];\n      for (const [dx, dy] of PLUS) put(x + dx, y + dy, Math.max(24, u[0] * L[q] * 200) * f, u[1] * L[q + 1] * 200 * f, u[2] * L[q + 2] * 200 * f);\n      continue;\n    }\n    if (Math.max(buf[q], buf[q + 1]) > 70)\n      for (let c = 0; c \u003c 3; c++) {\n        buf[q + c] *= 1 - 0.88 * f;\n        buf[q + (W + 1) * 3 + c] *= 1 - 0.65 * f;\n      }\n    else put(x, y, 52 * f, 46 * f, 40 * f);\n    if (p.o > 0.6) put(x + 1, y, 80 * f, 100 * f, 150 * f);\n  }\n  // Car lights: headlamps, tail lamps and the brake light between them, and\n  // the indicator on the side a car turns to.\n  for (const c of S.cars) {\n    const h = c.L / 2 - 0.5;\n    const t = c.R.turn;\n    const ind = t && c.s > t[0] - 30 && c.s \u003c t[1] + 2 && (S.clk * 1.5 + c.ph) % 1 \u003c 0.5 ? t[2] : 0;\n    for (let sd = -1; sd \u003c 2; sd += 2) {\n      const ax = c.cx - c.by * sd;\n      const ay = c.cy + c.bx * sd;\n      put(ax + c.bx * h, ay + c.by * h, ...(ind === sd ? AMBER : c.led ? [235, 242, 255] : [255, 225, 170]));\n      put(ax - c.bx * h, ay - c.by * h, ...(ind === sd ? AMBER : c.brake ? [255, 18, 8] : [200, 8, 5]));\n    }\n    if (c.brake) put(c.cx - c.bx * h, c.cy - c.by * h, 200, 10, 5);\n  }\n  // Signal and walk lights, lamp heads, church crosses.\n  for (const [x, y, c, dx, dy, n] of lit) for (let i = 0; i \u003c n; i++) put(x + dx * i, y + dy * i, c[0] * 255, c[1] * 255, c[2] * 255);\n  LAMPS.forEach(([x, y], i) => put(x, y, ...lamps[i][0].map((v) => v * 255 * lamps[i][1])));\n  for (const [x, y] of CROSSES) for (let i = 0; i \u003c 7; i++) put(x, y + i, 255, 20, 30), i \u003c 5 && put(x - 2 + i, y + 2, 255, 20, 30);\n  // Rain round each lamp: a haze in its colour, and drops flashing through it.\n  if (wet)\n    lamps.forEach(([c, lv], i) => {\n      const { hi, hw } = S.pools[i];\n      for (let n = 0; n \u003c hi.length; n++) add(buf, hi[n], c, 120 * wet * lv * hw[n] * (Math.random() \u003c 0.04 * wet ? 3 : 1));\n    });\n  // Below 3 of 255 an LED is off.\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3)\n    if (buf[q] > 3 || buf[q + 1] > 3 || buf[q + 2] > 3) display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[q]) | 0, Math.min(255, buf[q + 1]) | 0, Math.min(255, buf[q + 2]) | 0);\n}\n","layer":{"id":"layer-crossroads","type":"code","name":"crossroads","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Crossroads\n// Family:  city\n// Idea:    A night avenue seen straight down from a drone and crossed by two side streets, where the cars show by their lights, the signals hold and release the queues, and people cross all four zebras at once while every car waits.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17; the intelligent driver model of Treiber, Hennecke and Helbing (2000) and the all-way pedestrian phase of Seoul junctions\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Lamps=0..1, Pace=0.2..3, Hour=0..1, Rain=0..1\n//\n// Knob 1: Lamps. At 0 every street lamp is low-pressure sodium and pools the road in orange; turned up, the city swaps them one at a time for white LED heads.\n// Knob 2: Pace. The clock of the whole street: at 2 a car crosses the panel in about five seconds and the signals cycle every thirty, at 0.2 it all creeps.\n// Knob 3: Hour. At 0 the evening rush, with queues at every red; turned up, traffic and people thin out, after 1 am every other lamp goes out, and past 3 am the signals flash amber on the avenue and red on the side streets.\n// Knob 4: Rain. Darkens the asphalt to a mirror: each lamp glares under itself inside a haze of lit drops, signals and tail lights streak across the road, and people open umbrellas.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// First row of each side street, 12 rows across.\nconst JY = [30, 90];\n// Lane centres. Traffic keeps right: down the panel on the west half of the\n// avenue, up it on the east half; west on the north half of a side street.\nconst [SBO, SBI, NBI, NBO] = [22.5, 27.5, 36.5, 41.5];\nconst STEP = 0.25;\nconst cl = (v) => Math.min(1, Math.max(0, v));\n\n// A movement: an approach (from N, S, W, E) and a turn (straight, left, right).\nconst mv = (a, t) => 1 \u003c\u003c (a * 3 + t);\nconst all = (a) => 7 \u003c\u003c (a * 3);\nconst SR = (a) => mv(a, 0) | mv(a, 2);\n// The cycle in seconds at Pace 2: [length, green, amber, walk]. Each avenue\n// direction leads with its left arrow, the side streets take turns, then\n// every car waits while people cross all four zebras at once.\nconst PH = [\n  [4, all(0), 0, 0], [1, SR(0), mv(0, 1), 0], [5, SR(0) | SR(1), 0, 0], [1.2, SR(1), SR(0), 0], [4, all(1), 0, 0], [1.2, 0, all(1), 0],\n  [3, all(2), 0, 0], [1.2, 0, all(2), 0], [3, all(3), 0, 0], [1.2, 0, all(3), 0], [5, 0, 0, 1], [1.5, 0, 0, 2], [0.8, 0, 0, 0],\n];\nconst CYCLE = PH.reduce((a, p) => a + p[0], 0);\n\n// Low-pressure sodium burns in one orange line at 589 nm; LED heads are cool white.\nconst SODIUM = [1, 0.34, 0];\nconst LED = [0.4, 0.43, 0.47];\n// Lamps [x, y, reach]: both ends of the school street, two mid-block, and\n// opposite corners of each junction so the zebras stand in light.\nconst LAMPS = [\n  [6, 36, 8], [42, 70, 8], [21, 58, 8], [57, 36, 8],\n  ...JY.flatMap((y) => [[21, y - 1, 9], [42, y + 12, 9]]),\n];\n// The lamp at row 70 is dying: it goes out, strikes again in the red of its\n// neon starter gas and warms back up.\nconst DYING = 1;\n// Red neon crosses on church roofs, as on every Seoul skyline.\nconst CROSSES = [[7, 9], [56, 63], [9, 115]];\n// Lamp, headlight and tail light at their brightest, over albedo.\nconst [I_LAMP, I_HEAD, I_TAIL] = [20, 1, 9];\nconst AMBIENT = [0.13, 0.14, 0.18];\nconst RED = [1, 0.04, 0.03];\nconst GREEN = [0.05, 1, 0.5];\nconst SIG = [RED, [1, 0.5, 0], GREEN];\nconst GLASS = [0.03, 0.034, 0.04];\nconst AMBER = [255, 150, 0];\nconst BEAMS = [[1, 0.85, 0.6], [0.9, 0.95, 1]];\n// Car paint and its odds: white and silver half the time, as on Korean roads.\nconst PAINT = [[0.72, 0.72, 0.72], [0.48, 0.5, 0.53], [0.05, 0.05, 0.06], [0.2, 0.2, 0.22], [0.07, 0.09, 0.24], [0.55, 0.05, 0.04], [0.8, 0.4, 0.06]];\nconst PAINT_P = [0.3, 0.2, 0.17, 0.1, 0.07, 0.06, 0.1];\n// Umbrellas: clear convenience-store plastic most, then black, red, yellow, navy.\nconst UMBRELLA = [[0.7, 0.72, 0.75], [0.7, 0.72, 0.75], [0.05, 0.05, 0.08], [0.6, 0.05, 0.08], [0.75, 0.6, 0.05], [0.06, 0.12, 0.4]];\nconst PLUS = [[0, 0], [1, 0], [-1, 0], [0, 1], [0, -1]];\n// Walk lights laid in the kerb at both ends of each zebra, as in Seoul: first\n// LED and the way the strip runs.\nconst KERB = [[19, -6, 0, 1], [44, -6, 0, 1], [19, 14, 0, 1], [44, 14, 0, 1], [14, -1, 1, 0], [14, 12, 1, 0], [46, -1, 1, 0], [46, 12, 1, 0]];\n// Signal heads by approach, from the junction's first row: first LED of the\n// bar (red, amber, left arrow, green), the step along it, the way it faces.\nconst HEADS = [[23, 12, 1, 0, 0, -1], [40, -1, -1, 0, 0, 1], [44, 7, 0, 1, -1, 0], [19, 4, 0, -1, 1, 0]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction pick(list) {\n  let r = Math.random();\n  for (let i = 0; i \u003c list.length; i++) if ((r -= list[i]) \u003c 0) return i;\n  return list.length - 1;\n}\n\n// A route: a path sampled every STEP pixels, the speed allowed at each sample,\n// stop lines [s, junction, movement] and a turn [s0, s1, side]. Ops: [\"t\", c]\n// on until x or y is c, [\"s\", j, m] a stop line, [\"r\", side, radius] a turn.\nfunction route(x, y, hx, hy, ops) {\n  const X = [x];\n  const Y = [y];\n  const C = [99];\n  const stops = [];\n  let turn = null;\n  for (const op of ops) {\n    const s = (X.length - 1) * STEP;\n    if (op[0] === \"s\") stops.push([s, op[1], op[2]]);\n    else if (op[0] === \"t\") {\n      const n = Math.round((hx ? (op[1] - x) * hx : (op[1] - y) * hy) / STEP);\n      for (let i = 1; i \u003c= n; i++) X.push(x + hx * i * STEP), Y.push(y + hy * i * STEP), C.push(99);\n      x += hx * n * STEP;\n      y += hy * n * STEP;\n    } else {\n      const [, side, r] = op;\n      const nx = side > 0 ? -hy : hy;\n      const ny = side > 0 ? hx : -hx;\n      const cx = x + r * nx;\n      const cy = y + r * ny;\n      const n = Math.round((Math.PI / 2) * r / STEP);\n      turn = [s, s + n * STEP, side];\n      for (let i = 1; i \u003c= n; i++) {\n        const a = (i / n) * (Math.PI / 2);\n        X.push(cx - r * nx * Math.cos(a) + r * hx * Math.sin(a));\n        Y.push(cy - r * ny * Math.cos(a) + r * hy * Math.sin(a));\n        C.push(Math.sqrt(40 * r));\n      }\n      x = cx + r * hx;\n      y = cy + r * hy;\n      hx = nx;\n      hy = ny;\n    }\n  }\n  // Slow for a turn ahead at 25 px/s per second.\n  for (let i = C.length - 2; i >= 0; i--) C[i] = Math.min(C[i], Math.sqrt(C[i + 1] * C[i + 1] + 50 * STEP));\n  return { X, Y, C, stops, turn, len: (X.length - 1) * STEP };\n}\n\n// Eight entries, each a list of [odds, route].\nfunction routes() {\n  const [a, b] = JY;\n  const st = (j, ap, t) => [\"s\", j, mv(ap, t)];\n  // Along the avenue in lane x, through both junctions or turning t at one.\n  const avenue = (x, up, t) => {\n    const ap = up ? 1 : 0;\n    const order = up ? [1, 0] : [0, 1];\n    const ops = (at) => {\n      const o = [];\n      for (const j of order) {\n        const y = JY[j];\n        o.push([\"t\", up ? y + 20 : y - 8], st(j, ap, j === at ? t : 0));\n        if (j === at)\n          return o.concat(t === 2 ? [[\"t\", up ? y + 13 : y - 1], [\"r\", 1, 3.5], [\"t\", up ? 78 : -14]] : [[\"t\", up ? y + 9.5 : y + 2.5], [\"r\", -1, 7], [\"t\", up ? -14 : 78]]);\n      }\n      return o.concat([[\"t\", up ? -14 : 142]]);\n    };\n    return [[0.7, -1], [0.15, order[0]], [0.15, order[1]]].map(([p, at]) => [p, route(x, up ? 142 : -14, 0, up ? -1 : 1, ops(at))]);\n  };\n  const E = [avenue(SBO, 0, 2), avenue(SBI, 0, 1), avenue(NBI, 1, 1), avenue(NBO, 1, 2)];\n  JY.forEach((y, j) => {\n    // Turned onto the avenue, on through the other junction if it is ahead.\n    const down = j ? [[\"t\", 142]] : [[\"t\", b - 8], st(1, 0, 0), [\"t\", 142]];\n    const up = j ? [[\"t\", a + 20], st(0, 1, 0), [\"t\", -14]] : [[\"t\", -14]];\n    const side = (x, ly, h, sx, ap, ra, rt, la, lt) => [\n      [0.45, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 0), [\"t\", 64 - x]])],\n      [0.3, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 2), [\"t\", ra], [\"r\", 1, 3.5], ...rt])],\n      [0.25, route(x, ly, h, 0, [[\"t\", sx], st(j, ap, 1), [\"t\", la], [\"r\", -1, 7], ...lt])],\n    ];\n    E.push(side(-14, y + 9.5, 1, 12, 2, 19, down, 29.5, up), side(78, y + 2.5, -1, 52, 3, 45, up, 34.5, down));\n  });\n  return E;\n}\n\n// The ground as albedo per channel, and what each LED is: 0 roof, 1 road, 2 pavement.\nfunction ground(S) {\n  const { AR, AG, AB, kind } = S;\n  const set = (p, r, g, b) => ((AR[p] = r), (AG[p] = g), (AB[p] = b));\n  const paint = (p, v, yellow) => set(p, v, yellow ? v * 0.8 : v, yellow ? v * 0.2 : v);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const g = hash(x, y);\n      let j = -1;\n      let c = -1;\n      for (let i = 0; i \u003c 2; i++) if (y >= JY[i] - 20 && y \u003c JY[i] + 32) (j = i), (c = y - JY[i]);\n      const cross = c >= 0 && c \u003c 12;\n      const av = x >= 20 && x \u003c 44;\n      if (av || cross) {\n        kind[p] = 1;\n        const v = 0.12 * (0.85 + 0.3 * g);\n        set(p, v, v, v * 0.95);\n        // The first side street runs past a school and is paved red.\n        if (j === 0 && cross && (x \u003c 14 || x > 49)) set(p, v * 2.6, v * 0.3, v * 0.3);\n        if (av && !cross) {\n          if ((c >= -6 && c \u003c -2) || (c >= 14 && c \u003c 18)) !(x & 1) && paint(p, 0.42);\n          else if ((c === -8 && x \u003c 31) || (c === 19 && x > 32)) paint(p, 0.42);\n          else if (x === 31 || x === 32) paint(p, 0.4, 1);\n          else if ((x === 25 || x === 38) && y % 9 \u003c 4) paint(p, 0.36);\n        } else if (!av) {\n          if ((x >= 14 && x \u003c 18) || (x >= 46 && x \u003c 50)) !(y & 1) && paint(p, 0.42);\n          else if ((x === 12 && c > 6) || (x === 51 && c \u003c 5)) paint(p, 0.42);\n          else if (c === 5 || c === 6) paint(p, 0.4, 1);\n        }\n      } else if ((x >= 16 && x \u003c 20) || (x >= 44 && x \u003c 48) || (c >= -4 && c \u003c 0) || (c >= 12 && c \u003c 16)) {\n        kind[p] = 2;\n        const v = (x % 3 && y % 3 ? 0.15 : 0.12) + g * 0.02;\n        set(p, v, v, v * 0.92);\n      } else {\n        set(p, 0.05, 0.05, 0.05);\n      }\n    }\n}\n\n// Each lamp's light on the street, falling as (1 - r^2)^1.5 so the core burns\n// amber and the rim fades over four LEDs; its wet glare; its haze in rain.\nfunction pools(S) {\n  S.pools = LAMPS.map(([hx, hy, R], i) => {\n    const o = { idx: [], w: [], g: [], hi: [], hw: [] };\n    // An oval pool along its road, a little out of round.\n    const sx = hx \u003c 16 || hx > 47 ? 1.2 : 0.85;\n    const r2 = R * 1.9;\n    box(hx - r2, hy - r2, hx + r2, hy + r2, (x, y, p) => {\n      const [dx, dy] = [(x - hx) / sx, (y - hy) * sx];\n      const r = Math.hypot(dx, dy) * (1 + 0.06 * Math.sin(3 * Math.atan2(dy, dx) + i * 2));\n      const u = 1 - (r / R) ** 2;\n      if (u > 0 && S.kind[p]) o.idx.push(p), o.w.push(u ** 1.5), o.g.push(Math.exp((-r * r) / 3));\n      if (r \u003c r2) o.hi.push(p), o.hw.push(r \u003c R ? 0.3 + 0.7 * (r / R) ** 2 : ((r2 - r) / (r2 - R)) ** 2);\n    });\n    return o;\n  });\n}\n\nfunction newCar(R, e) {\n  return { R, e, s: 0, v: 14, k: 0, wait: 0, brake: 0, vmax: 24 * (0.85 + Math.random() * 0.3), L: [5, 6, 6, 6, 7][Math.floor(Math.random() * 5)], col: PAINT[pick(PAINT_P)], led: +(Math.random() \u003c 0.5), ph: Math.random() };\n}\n\n// A car's nose and heading (fx, fy, hx, hy), and its middle (cx, cy, bx, by).\nfunction pose(c) {\n  const { X, Y } = c.R;\n  for (let k = 0; k \u003c 2; k++) {\n    const s = k ? c.s - c.L / 2 : c.s;\n    const f = Math.min(Math.max(s / STEP, 0), X.length - 1.001);\n    const i = Math.floor(f);\n    const dx = X[i + 1] - X[i];\n    const dy = Y[i + 1] - Y[i];\n    const l = Math.hypot(dx, dy) || 1;\n    const u = f - i + (s \u003c 0 ? s / l : 0);\n    if (k) (c.cx = X[i] + dx * u), (c.cy = Y[i] + dy * u), (c.bx = dx / l), (c.by = dy / l);\n    else (c.fx = X[i] + dx * u), (c.fy = Y[i] + dy * u), (c.hx = dx / l), (c.hy = dy / l);\n  }\n}\n\n// A signal for a movement: 0 red, 1 amber, 2 green, 3 and 4 flashing amber and red.\nfunction signal(S, j, m) {\n  if (S.flash) return m & (all(2) | all(3)) ? 4 : 3;\n  const p = PH[S.ph[j]];\n  return p[1] & m ? 2 : p[2] & m ? 1 : 0;\n}\n\n// Zebra w of junction j: 0 and 1 cross the avenue, 2 and 3 the side street.\n// Returns the two ends and the way out, away from the junction.\nfunction zebra(j, w) {\n  const y0 = JY[j];\n  if (w \u003c 2) return [18, y0 + (w ? 16 : -4), 46, y0 + (w ? 16 : -4), 0, w ? 1 : -1];\n  const x = w === 2 ? 16 : 48;\n  return [x, y0 - 2, x, y0 + 14, w === 2 ? -1 : 1, 0];\n}\n\n// People walk to a corner, wait, cross on the walk phase, hurrying when it\n// blinks, and walk off along the far pavement.\nfunction stepPeople(S, dt, rate) {\n  for (let i = 0; i \u003c 16; i++)\n    if (S.people.length \u003c 60 && Math.random() \u003c rate * dt) {\n      const j = i >> 3;\n      const w = (i >> 1) & 3;\n      const e = i & 1;\n      const z = zebra(j, w);\n      const o = (Math.random() - 0.5) * 3;\n      const tx = z[e * 2] + (z[4] ? o : 0);\n      const ty = z[e * 2 + 1] + (z[5] ? o : 0);\n      const d = 8 + Math.random() * 10;\n      S.people.push({\n        j, w, e, o, tx, ty, st: 0, life: 1, x: tx + z[4] * d, y: ty + z[5] * d,\n        v: 3.5 + Math.random() * 2, delay: Math.random() * 1.2,\n        umb: Math.floor(Math.random() * 6),\n      });\n    }\n  for (const p of S.people) {\n    const walk = PH[S.ph[p.j]][3];\n    const z = zebra(p.j, p.w);\n    if (p.st === 1) {\n      if (walk !== 1 || (p.delay -= dt) > 0) continue;\n      p.st = 2;\n      p.tx = z[2 - p.e * 2] + (z[4] ? p.o : 0);\n      p.ty = z[3 - p.e * 2] + (z[5] ? p.o : 0);\n    }\n    const dx = p.tx - p.x;\n    const dy = p.ty - p.y;\n    const d = Math.hypot(dx, dy);\n    const v = p.v * (p.st === 2 && walk === 2 ? 1.5 : 1) * dt;\n    if (d > v) (p.x += (dx / d) * v), (p.y += (dy / d) * v);\n    else if (p.st === 2) (p.st = 3), (p.tx = p.x + z[4] * 14), (p.ty = p.y + z[5] * 14);\n    else if (p.st === 0) p.st = 1;\n    else p.life = 0;\n    if (p.st === 3) p.life = Math.min(p.life, d / 6);\n  }\n  S.people = S.people.filter((p) => p.life > 0);\n}\n\nfunction stepCars(S, dt, rate) {\n  const cars = S.cars;\n  for (let e = 0; e \u003c 8; e++) {\n    S.due[e] = Math.min(2, S.due[e] + dt * rate * (e \u003c 4 ? 0.16 : 0.07));\n    if (S.due[e] \u003c 1) continue;\n    const list = S.E[e];\n    const R = list[pick(list.map((r) => r[0]))][1];\n    if (cars.some((c) => c.e === e && c.s \u003c c.L + 3)) continue;\n    const c = newCar(R, e);\n    pose(c);\n    cars.push(c);\n    S.due[e]--;\n  }\n  for (const c of cars) pose(c);\n  for (const c of cars) {\n    // The nearest thing ahead in the lane: a car, or someone on a zebra.\n    let gap = 60;\n    let lv = 0;\n    const { fx, fy, hx, hy } = c;\n    const see = (ox, oy, half, ov) => {\n      const rx = ox - fx;\n      const ry = oy - fy;\n      const d = rx * hx + ry * hy - half;\n      if (d > -2 * half && d \u003c gap && Math.abs(rx * hy - ry * hx) \u003c 2.6) (gap = d), (lv = ov);\n    };\n    for (const o of cars) if (o !== c) see(o.cx, o.cy, o.L / 2, o.v * (o.hx * hx + o.hy * hy));\n    for (const p of S.people) if (p.st === 2) see(p.x, p.y, 0.5, 0);\n    const st = c.R.stops[c.k];\n    if (st) {\n      const g = st[0] - c.s;\n      if (g \u003c -0.3) {\n        c.k++;\n        c.wait = 0;\n      } else {\n        const sg = signal(S, st[1], st[2]);\n        // Stop for red, for amber with room to, a moment at a flashing red, and\n        // on green when there is no room on the far side.\n        const stop = !sg || (sg === 1 && g > (c.v * c.v) / 70 + 0.5) || (sg === 4 && c.wait \u003c 1.2) || ((sg === 2 || sg === 3) && gap \u003c g + 24 && lv \u003c 3);\n        if (stop && g \u003c gap) (gap = g), (lv = 0);\n        if (sg === 4 && g \u003c 1.5 && c.v \u003c 0.5) c.wait += dt;\n      }\n    }\n    // The intelligent driver model in pixels and seconds.\n    const v0 = Math.min(c.vmax * (S.flash ? 1.2 : 1), c.R.C[Math.min(c.R.C.length - 1, Math.max(0, Math.round(c.s / STEP)))]);\n    const ss = 1.2 + Math.max(0, c.v * 0.5 + (c.v * (c.v - lv)) / 70);\n    const acc = Math.max(-160, 30 * (1 - (c.v / v0) ** 4 - (ss / Math.max(gap, 0.05)) ** 2));\n    c.v = Math.max(0, c.v + acc * dt);\n    c.s += Math.min(c.v * dt, Math.max(0, gap - 0.4));\n    c.brake = acc \u003c -6 || c.v \u003c 1;\n  }\n  S.cars = cars.filter((c) => c.s \u003c c.R.len);\n}\n\nfunction step(S, dt, k) {\n  S.clk += dt;\n  S.flash = k[2] > 0.8;\n  for (let j = 0; j \u003c 2; j++) {\n    let c = (S.clk + j * 5) % CYCLE;\n    let i = 0;\n    while (c >= PH[i][0]) c -= PH[i++][0];\n    S.ph[j] = i;\n  }\n  stepCars(S, dt, (1 - 0.94 * k[2]) ** 1.5);\n  stepPeople(S, dt, 0.06 * (1 - k[2]) ** 2);\n}\n\nexport function setup(params) {\n  Object.assign(params, {\n    AR: new Float32Array(N), AG: new Float32Array(N), AB: new Float32Array(N), kind: new Uint8Array(N),\n    L: new Float32Array(N * 3), buf: new Float32Array(N * 3), amb: new Float32Array(N * 3).map((_, i) => AMBIENT[i % 3]),\n    E: routes(), cars: [], people: [], due: new Float32Array(8), ph: [0, 0], clk: 0, t: 0, k: null,\n    // Which lamp the city replaces first.\n    order: LAMPS.map((_, i) => i).sort(() => Math.random() - 0.5),\n  });\n  ground(params);\n  pools(params);\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const kv = input.knobValues || [];\n  const k = [kv[0] ?? 0, kv[1] ?? 2, kv[2] ?? 0, kv[3] ?? 0.06];\n  const m = k[1] / 2;\n  // Twenty seconds to fill the street, then ten at the knobs' pace, so the\n  // knobs have placed the queues and the signals by the first frame.\n  if (!S.k) for (let i = 0; i \u003c 350; i++) step(S, i \u003c 200 ? 0.1 : m / 15, k);\n  S.k = k;\n  S.t += dt;\n  step(S, dt * m, k);\n}\n\n// Add colour c times v to the buffer A at LED p.\nconst add = (A, p, c, v) => ((A[(p *= 3)] += c[0] * v), (A[p + 1] += c[1] * v), (A[p + 2] += c[2] * v));\n\n// Call f(x, y, p) for each LED of a box, clipped to the panel.\nfunction box(x0, y0, x1, y1, f) {\n  for (let y = Math.max(0, Math.floor(y0)); y \u003c= Math.min(H - 1, y1); y++) for (let x = Math.max(0, Math.floor(x0)); x \u003c= Math.min(W - 1, x1); x++) f(x, y, y * W + x);\n}\n\n// Light c from (x0, y0) along (hx, hy) out to len: strength I falling as\n// (1 - t) ** q, or 1 - t ** -q for negative q, from w0 to w1 wide. With len 0,\n// a disc of radius w0 + 1.\nfunction beam(L, x0, y0, hx, hy, len, w0, w1, I, q, c) {\n  const r = Math.max(w0, w1) + 1;\n  box(Math.min(x0, x0 + hx * len) - r, Math.min(y0, y0 + hy * len) - r, Math.max(x0, x0 + hx * len) + r, Math.max(y0, y0 + hy * len) + r, (x, y, p) => {\n    const rx = x + 0.5 - x0;\n    const ry = y + 0.5 - y0;\n    const t = len && (rx * hx + ry * hy) / len;\n    const e = w0 + (w1 - w0) * t + 1 - Math.abs(rx * hy - ry * hx);\n    const v = !len ? I * (1 - Math.hypot(rx, ry) / r) : t > 0 && t \u003c 1 && e > 0 ? I * (q >= 0 ? (1 - t) ** q : 1 - t ** -q) * Math.min(1, e) : 0;\n    if (v > 0) add(L, p, c, v);\n  });\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.k) return;\n  const { L, buf, AR, AG, AB, kind } = S;\n  const [k0, , hour, rain] = S.k;\n  const wet = cl((rain - 0.08) / 0.5);\n  L.set(S.amb);\n  // After 1 am every other lamp goes out and the rest dim.\n  const dim = cl((hour - 0.4) / 0.2);\n  const lamps = LAMPS.map((_, i) => {\n    const led = (S.order.indexOf(i) + 0.5) / LAMPS.length \u003c k0;\n    let c = led ? LED : SODIUM;\n    let lv = 1 - (i & 1 ? 0.9 : 0.25) * dim;\n    if (i === DYING && !led) {\n      const t = (S.clk + 8.9) % 16;\n      const u = cl((t - 12.3) / 3.7);\n      lv *= t \u003c 9 ? 1 : t \u003c 9.4 ? (9.4 - t) / 0.4 : t \u003c 12 ? 0 : t \u003c 12.3 ? 0.2 : 0.2 + 0.8 * u;\n      if (t > 12) c = [1, 0.12 + 0.38 * u, 0.15 * (1 - u)];\n    }\n    const { idx, w, g } = S.pools[i];\n    for (let n = 0; n \u003c idx.length; n++) add(L, idx[n], c, I_LAMP * lv * (w[n] + wet * 2 * g[n]));\n    return [c, lv];\n  });\n  const blink = S.t % 1 > 0.5;\n  const lit = [];\n  for (let j = 0; j \u003c 2; j++) {\n    const y0 = JY[j];\n    for (let a = 0; a \u003c 4; a++) {\n      const [x, y, sx, sy, fx, fy] = HEADS[a];\n      const s0 = signal(S, j, mv(a, 0));\n      const on = [!s0 || (s0 === 4 && blink), s0 === 1 || (s0 === 3 && blink), signal(S, j, mv(a, 1)) === 2, s0 === 2];\n      // A lit lamp hazes the road under it, and on wet asphalt streaks toward\n      // the drivers.\n      for (let i = 0; i \u003c 4; i++)\n        if (on[i]) {\n          const c = SIG[Math.min(i, 2)];\n          const lx = x + sx * i + 0.5;\n          const ly = y0 + y + sy * i + 0.5;\n          lit.push([lx, ly, c, 0, 0, 1]);\n          beam(L, lx, ly, 0, 0, 0, 1.2, 0, 6, 0, c);\n          if (wet) beam(L, lx, ly, fx, fy, 2.2 + wet * 6, 0, 0, 4 * wet, 1, c);\n        }\n    }\n    const walk = PH[S.ph[j]][3];\n    const g = walk === 1 || (walk === 2 && S.t % 0.6 \u003c 0.3);\n    if (!S.flash && (g || walk !== 2))\n      for (const [x, y, dx, dy] of KERB) {\n        const c = g ? GREEN : RED;\n        lit.push([x, y0 + y, c, dx, dy, 4]);\n        beam(L, x + 0.5 - dx, y0 + y + 0.5 - dy, dx, dy, 5, 0.8, 0.8, 3.4, 0, c);\n      }\n  }\n  for (const c of S.cars) {\n    beam(L, c.fx, c.fy, c.hx, c.hy, 8, 1.3, 4.5, I_HEAD * (1 - wet * 0.4), 2, BEAMS[c.led]);\n    beam(L, c.cx - c.bx * c.L * 0.5, c.cy - c.by * c.L * 0.5, -c.bx, -c.by, 5.5 + wet * 5, 1.2, 1.2, I_TAIL * (c.brake ? 1 : 0.35), -3, RED);\n  }\n  // Each channel rolls off on its own, as film does, so paint too bright for\n  // the orange light burns through to yellow.\n  const roll = (v) => (v \u003c 200 ? v : 255 - 55 * Math.exp((200 - v) / 55));\n  const shade = (q, r, g, b) => ((buf[q] = roll(r)), (buf[q + 1] = roll(g)), (buf[q + 2] = roll(b)));\n  const aw = 255 * (1 - wet * 0.7);\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const a = kind[p] ? aw : 255;\n    shade(q, AR[p] * L[q] * a, AG[p] * L[q + 1] * a, AB[p] * L[q + 2] * a);\n  }\n  // Cars: the body in the light where it stands, dark glass fore and aft.\n  for (const c of S.cars) {\n    const h = c.L / 2;\n    box(c.cx - h - 1, c.cy - h - 1, c.cx + h + 1, c.cy + h + 1, (x, y, p) => {\n      const rx = x + 0.5 - c.cx;\n      const ry = y + 0.5 - c.cy;\n      const u = rx * c.bx + ry * c.by;\n      if (Math.abs(u) >= h || Math.abs(ry * c.bx - rx * c.by) >= 1.5) return;\n      const f = (h - u) / c.L;\n      const glass = (f > 0.22 && f \u003c 0.4) || (f > 0.74 && f \u003c 0.88);\n      const [r, g, b] = glass ? GLASS : c.col;\n      const sh = glass ? 255 : 166;\n      shade(p * 3, r * L[p * 3] * sh, g * L[p * 3 + 1] * sh, b * L[p * 3 + 2] * sh);\n    });\n  }\n  const put = (x, y, r, g, b, more) => {\n    x = Math.floor(x);\n    y = Math.floor(y);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const q = (y * W + x) * 3;\n    buf[q] = r + (more ? buf[q] : 0);\n    buf[q + 1] = g + (more ? buf[q + 1] : 0);\n    buf[q + 2] = b + (more ? buf[q + 2] : 0);\n  };\n  // People: a dark speck and its shadow in the light, a coat the shop\n  // windows catch out of it, a phone in some hands, umbrellas in the rain.\n  for (const p of S.people) {\n    const x = Math.floor(p.x);\n    const y = Math.floor(p.y);\n    if (x \u003c 1 || x >= W - 1 || y \u003c 1 || y >= H - 1) continue;\n    const q = (y * W + x) * 3;\n    const f = p.life;\n    if (rain > 0.25) {\n      const u = UMBRELLA[p.umb];\n      for (const [dx, dy] of PLUS) put(x + dx, y + dy, Math.max(24, u[0] * L[q] * 200) * f, u[1] * L[q + 1] * 200 * f, u[2] * L[q + 2] * 200 * f);\n      continue;\n    }\n    if (Math.max(buf[q], buf[q + 1]) > 70)\n      for (let c = 0; c \u003c 3; c++) {\n        buf[q + c] *= 1 - 0.88 * f;\n        buf[q + (W + 1) * 3 + c] *= 1 - 0.65 * f;\n      }\n    else put(x, y, 52 * f, 46 * f, 40 * f);\n    if (p.o > 0.6) put(x + 1, y, 80 * f, 100 * f, 150 * f);\n  }\n  // Car lights: headlamps, tail lamps and the brake light between them, and\n  // the indicator on the side a car turns to.\n  for (const c of S.cars) {\n    const h = c.L / 2 - 0.5;\n    const t = c.R.turn;\n    const ind = t && c.s > t[0] - 30 && c.s \u003c t[1] + 2 && (S.clk * 1.5 + c.ph) % 1 \u003c 0.5 ? t[2] : 0;\n    for (let sd = -1; sd \u003c 2; sd += 2) {\n      const ax = c.cx - c.by * sd;\n      const ay = c.cy + c.bx * sd;\n      put(ax + c.bx * h, ay + c.by * h, ...(ind === sd ? AMBER : c.led ? [235, 242, 255] : [255, 225, 170]));\n      put(ax - c.bx * h, ay - c.by * h, ...(ind === sd ? AMBER : c.brake ? [255, 18, 8] : [200, 8, 5]));\n    }\n    if (c.brake) put(c.cx - c.bx * h, c.cy - c.by * h, 200, 10, 5);\n  }\n  // Signal and walk lights, lamp heads, church crosses.\n  for (const [x, y, c, dx, dy, n] of lit) for (let i = 0; i \u003c n; i++) put(x + dx * i, y + dy * i, c[0] * 255, c[1] * 255, c[2] * 255);\n  LAMPS.forEach(([x, y], i) => put(x, y, ...lamps[i][0].map((v) => v * 255 * lamps[i][1])));\n  for (const [x, y] of CROSSES) for (let i = 0; i \u003c 7; i++) put(x, y + i, 255, 20, 30), i \u003c 5 && put(x - 2 + i, y + 2, 255, 20, 30);\n  // Rain round each lamp: a haze in its colour, and drops flashing through it.\n  if (wet)\n    lamps.forEach(([c, lv], i) => {\n      const { hi, hw } = S.pools[i];\n      for (let n = 0; n \u003c hi.length; n++) add(buf, hi[n], c, 120 * wet * lv * hw[n] * (Math.random() \u003c 0.04 * wet ? 3 : 1));\n    });\n  // Below 3 of 255 an LED is off.\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3)\n    if (buf[q] > 3 || buf[q + 1] > 3 || buf[q + 2] > 3) display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[q]) | 0, Math.min(255, buf[q + 1]) | 0, Math.min(255, buf[q + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamps=0..1, Pace=0.2..3, Hour=0..1, Rain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamps","min":0,"max":1,"about":"At 0 every street lamp is low-pressure sodium and pools the road in orange; turned up, the city swaps them one at a time for white LED heads."},{"name":"Pace","min":0.2,"max":3,"about":"The clock of the whole street: at 2 a car crosses the panel in about five seconds and the signals cycle every thirty, at 0.2 it all creeps."},{"name":"Hour","min":0,"max":1,"about":"At 0 the evening rush, with queues at every red; turned up, traffic and people thin out, after 1 am every other lamp goes out, and past 3 am the signals flash amber on the avenue and red on the side streets."},{"name":"Rain","min":0,"max":1,"about":"Darkens the asphalt to a mirror: each lamp glares under itself inside a haze of lit drops, signals and tail lights streak across the road, and people open umbrellas."}],"start":[0,2,0,0.06],"measures":{"motion":0.2133,"detail":0.0621,"edges":0.4808,"complexity":0.9935,"coverage":0.2564,"colour":0.385,"drift":0.0485},"knobResponse":[0.05,0.0417,0.0482,0.062]},{"slug":"cyanotype","title":"Cyanotype","family":"print","round":19,"note":"철염을 바른 종이에 고사리와 깃털, 민들레 씨앗, 레이스를 놓고 햇빛에 구운 뒤 물로 씻어 내리면 프러시안 블루 인화가 드러나요. 마르며 짙어진 인화가 옆으로 밀려 나가면 다음 장이 깔려요.","idea":"A sun print is made over and over: pressed ferns, feathers, seed heads and lace are laid on a sheet brushed with pale yellow-green iron salts, the sun turns the bare paper blue-grey round them, and when they are lifted a wash runs down the sheet, clearing their shadows to white and the ground to Prussian blue, which deepens as it dries before the print is slid away for the next sheet.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Cyanotype\n// Family:  print\n// Idea:    A sun print is made over and over: pressed ferns, feathers, seed heads and lace are laid on a sheet brushed with pale yellow-green iron salts, the sun turns the bare paper blue-grey round them, and when they are lifted a wash runs down the sheet, clearing their shadows to white and the ground to Prussian blue, which deepens as it dries before the print is slid away for the next sheet.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after John Herschel's cyanotype process (1842) and Anna Atkins's photograms of algae and ferns\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Tone=0..1, Speed=0.2..3, Specimen=0..4, Exposure=-1..1\n//\n// Knob 1: Tone. The washed print, from the plain Prussian blue on white at 0 through a violet to a tea-toned print at 1, brown-black on cream.\n// Knob 2: Speed. How fast the printer works: at 2 one sheet takes 15 seconds from laying the specimens to sliding the dry print away, five of them in the sun; at 0.2 it takes two and a half minutes.\n// Knob 3: Specimen. What is laid on the sheet: a fern frond and a feather, two feathers over a strip of lace, dandelion clocks and grasses, two ferns, or a lace doily with a sprig; turning it washes up a print of that one, and after it the sheets follow in that order.\n// Knob 4: Exposure. How long the sheet lies in the sun: at -1 the ground stays a pale blue and every barb and lace thread prints; at 0 the blue is full; at 1 it goes nearly navy and the thin parts burn through.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n\n// The steps of one sheet, in seconds at Speed 2: the last print slides away,\n// the specimens are laid one by one, the glass goes down, the sun, the glass\n// and specimens come off, the wash runs down the sheet, and it dries.\nconst SLIDE = 0;\nconst LAY = 1.2;\nconst GLASS = 2.6;\nconst SUN = 3;\nconst LIFT = 8;\nconst WASH = 8.8;\nconst DRY = 11.8;\nconst CYCLE = 15;\n// The panel opens with the wash 60% of the way down the first print.\nconst OPEN = WASH + 0.6 * (DRY - WASH);\nconst ARRANGEMENTS = 5;\n\nconst PAPER = [212, 208, 196];\nconst CREAM = [214, 188, 136];\n// The iron salts as brushed on, and the grey-blue they turn in the sun\n// before they are washed.\nconst COAT = [198, 202, 92];\nconst SUNNED = [88, 102, 112];\n// Prussian blue wet from the wash and dry; tea turns it brown-black.\nconst WET = [44, 96, 182];\nconst BLUE = [12, 44, 122];\nconst TEA_WET = [104, 74, 76];\nconst TEA = [62, 40, 46];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction noise1(x, s) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, s) * (1 - u) + hash(i + 1, s) * u;\n}\n\n// A sheet: how thick the salts were brushed at each LED, how much light the\n// specimens on it stop there, and what the specimens look like lying on it.\nfunction newSheet(arr, n) {\n  const S = {\n    arr,\n    coat: new Float32Array(N),\n    mask: new Float32Array(N),\n    obj: new Float32Array(N * 3),\n    order: new Float32Array(N),\n    // Where one specimen lies over another, the one under it.\n    under: new Float32Array(N * 3),\n    uorder: new Float32Array(N),\n    parts: 0,\n  };\n  // Brushed side to side, so the edges are ragged and a few bristles run\n  // past them, and the strokes leave streaks along the rows.\n  for (let y = 0; y \u003c H; y++) {\n    const left = 3 + 2.5 * noise1(y * 0.35, n * 13 + 1) + (hash(y, n * 13 + 2) > 0.88 ? -3 * hash(y, n * 13 + 3) : 0);\n    const right = 60 - 2.5 * noise1(y * 0.35, n * 13 + 4) + (hash(y, n * 13 + 5) > 0.88 ? 3 * hash(y, n * 13 + 6) : 0);\n    const streak = 0.9 + 0.07 * noise1(y * 0.22, n * 13 + 7) + 0.03 * noise1(y * 1.1, n * 13 + 11);\n    for (let x = 0; x \u003c W; x++) {\n      const top = 4 + 2 * noise1(x * 0.3, n * 13 + 8);\n      const bottom = 123 - 2 * noise1(x * 0.3, n * 13 + 9);\n      const inside = smooth(left - 1, left + 1.5, x) * smooth(right + 1, right - 1.5, x) * smooth(top - 1, top + 1, y) * smooth(bottom + 1, bottom - 1, y);\n      S.coat[y * W + x] = inside * streak * (0.94 + 0.06 * noise1(x * 0.2 + y * 3.7, n * 13 + 10));\n    }\n  }\n  ARRANGE[arr](S);\n  return S;\n}\n\n// Lays one stroke of a specimen: a segment `w` LEDs wide that stops `op` of\n// the light, in colour `col`.\nfunction stroke(S, x0, y0, x1, y1, w, op, col) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const len2 = dx * dx + dy * dy || 1;\n  const r = w / 2 + 0.5;\n  const xa = Math.max(0, Math.floor(Math.min(x0, x1) - r));\n  const xb = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + r));\n  const ya = Math.max(0, Math.floor(Math.min(y0, y1) - r));\n  const yb = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + r));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const u = clamp(((x - x0) * dx + (y - y0) * dy) / len2, 0, 1);\n      const d = Math.hypot(x - x0 - u * dx, y - y0 - u * dy);\n      // Pressed flat under the glass, a specimen's edge prints sharp.\n      if (d \u003c r - 0.5) paint(S, y * W + x, op, col);\n    }\n}\n\n// One LED of a specimen. The light it lets through is the least any layer\n// there lets through; the specimen laid last is the one seen on top.\nfunction paint(S, p, op, col) {\n  S.mask[p] = Math.max(S.mask[p], op);\n  if (S.order[p] && S.order[p] !== S.parts) {\n    S.uorder[p] = S.order[p];\n    for (let c = 0; c \u003c 3; c++) S.under[p * 3 + c] = S.obj[p * 3 + c];\n  }\n  for (let c = 0; c \u003c 3; c++) S.obj[p * 3 + c] = col[c];\n  S.order[p] = S.parts;\n}\n\nconst FROND = [70, 112, 48];\nconst QUILL = [196, 186, 166];\nconst SHAFT = [150, 128, 100];\nconst STRAW = [196, 166, 104];\nconst DOWN = [226, 224, 216];\nconst LACE = [232, 226, 210];\n\n// A fern frond from its foot (x, y) along angle `a` for `len` LEDs, bending\n// by `bend`, with pinnae up to `wide` LEDs long, alternate, the lowest few\n// pairs short and the frond tapering to its tip; each pinna is lobed.\nfunction fern(S, x, y, a, len, wide, bend) {\n  S.parts++;\n  const at = (s) => {\n    const c = Math.cos(a + bend * s);\n    const d = Math.sin(a + bend * s);\n    return [x + c * s * len, y + d * s * len, c, d];\n  };\n  for (let s = 0; s \u003c 1; s += 0.02) {\n    const [x0, y0] = at(s);\n    const [x1, y1] = at(s + 0.02);\n    stroke(S, x0, y0, x1, y1, 1.4 - 0.7 * s, 0.95, FROND);\n  }\n  const step = 2.9 / len;\n  let side = 1;\n  for (let s = 0.16; s \u003c 0.97; s += step) {\n    const [px, py, c, d] = at(s);\n    const k = (s - 0.16) / 0.81;\n    const l = wide * Math.pow(Math.sin(Math.PI * Math.min(1, k * 1.25 + 0.06)), 0.8) * (1 - 0.35 * k) + 1;\n    // Pinnae lean toward the tip and curve up at their ends.\n    const pa = a + bend * s + side * (1.15 - 0.25 * k);\n    let qx = px;\n    let qy = py;\n    const n = Math.max(2, Math.round(l));\n    for (let j = 0; j \u003c n; j++) {\n      const t = j / n;\n      const ang = pa - side * 0.45 * t;\n      const nx = qx + Math.cos(ang);\n      const ny = qy + Math.sin(ang);\n      const lobe = 0.75 + 0.25 * Math.cos(j * 2.4);\n      stroke(S, qx, qy, nx, ny, (2.4 - 1.5 * t) * lobe, 0.9, FROND);\n      qx = nx;\n      qy = ny;\n    }\n    side = -side;\n  }\n}\n\n// A feather from the end of its quill along angle `a`: the vanes are barbs\n// side by side that let some light through, split apart here and there, with\n// soft down at the foot, and the shaft drawn over them.\nfunction feather(S, x, y, a, len, wl, wr, seed) {\n  S.parts++;\n  const c = Math.cos(a);\n  const d = Math.sin(a);\n  const bend = 0.12 * len;\n  const at = (s) => [x + c * s * len - d * bend * s * s, y + d * s * len + c * bend * s * s];\n  const [mx, my] = at(0.5);\n  const reach = len / 2 + Math.max(wl, wr) + 4;\n  for (let py = Math.max(0, Math.floor(my - reach)); py \u003c= Math.min(H - 1, my + reach); py++)\n    for (let px = Math.max(0, Math.floor(mx - reach)); px \u003c= Math.min(W - 1, mx + reach); px++) {\n      const s = ((px - x) * c + (py - y) * d) / len;\n      if (s \u003c 0.08 || s > 1) continue;\n      const t = -(px - x) * d + (py - y) * c - bend * s * s;\n      const side = t \u003c 0 ? -1 : 1;\n      const at2 = Math.abs(t);\n      const down = s \u003c 0.3;\n      const wide = (side \u003c 0 ? wl : wr) * (down ? 0.7 + 0.5 * hash(px * 7 + py, seed) : Math.sqrt(Math.max(0, 1 - ((s - 0.55) / 0.46) ** 2)));\n      if (at2 > wide) continue;\n      // Each barb runs out from the shaft and forward toward the tip.\n      const b = (s * len - at2 * 0.55) / 2.4;\n      const k = Math.floor(b);\n      let op = b - k \u003c 0.5 ? 0.9 : 0.5;\n      if (down) op = 0.25 + 0.25 * hash(px, py + seed);\n      else if (hash(k, seed + side) > 0.88 && at2 > 0.35 * wide) op = 0.15;\n      paint(S, py * W + px, op, op > 0.6 ? QUILL : DOWN);\n    }\n  for (let s = 0; s \u003c 1; s += 0.025) {\n    const [x0, y0] = at(s);\n    const [x1, y1] = at(s + 0.025);\n    stroke(S, x0, y0, x1, y1, 1.5 - 1 * s, 0.97, SHAFT);\n  }\n}\n\n// A grass in seed: a thin stem nodding over, its seed heads hung on short\n// stalks either side.\nfunction grass(S, x, y, a, len, bend) {\n  S.parts++;\n  let px = x;\n  let py = y;\n  for (let i = 0; i \u003c len; i++) {\n    const g = a + (bend * i) / len;\n    const nx = px + Math.cos(g);\n    const ny = py + Math.sin(g);\n    stroke(S, px, py, nx, ny, 0.9, 0.9, STRAW);\n    if (i > len * 0.45 && i % 3 === 0) {\n      const side = (i / 3) % 2 ? 1 : -1;\n      const h = g + side * 0.9 + 0.5 * bend;\n      const sx = nx + 2 * Math.cos(h);\n      const sy = ny + 2 * Math.sin(h);\n      stroke(S, nx, ny, sx, sy, 0.6, 0.8, STRAW);\n      const e = h + 0.4 * side;\n      stroke(S, sx, sy, sx + 2.6 * Math.cos(e), sy + 2.6 * Math.sin(e), 1.7, 0.95, STRAW);\n    }\n    px = nx;\n    py = ny;\n  }\n}\n\n// A dandelion clock: its stem up from (x, y), a ball of seeds on fine\n// stalks, each with its little parachute.\nfunction clock(S, x, y, cx, cy, r, seed) {\n  S.parts++;\n  stroke(S, x, y, (x + cx) / 2 + 2, (y + cy) / 2, 1, 0.9, STRAW);\n  stroke(S, (x + cx) / 2 + 2, (y + cy) / 2, cx, cy, 1, 0.9, STRAW);\n  const n = 26;\n  for (let i = 0; i \u003c n; i++) {\n    const g = (i / n) * 6.283 + 0.2 * hash(i, seed);\n    const l = r * (0.8 + 0.2 * hash(i, seed + 1));\n    const ex = cx + Math.cos(g) * l;\n    const ey = cy + Math.sin(g) * l;\n    stroke(S, cx, cy, ex, ey, 0.5, 0.7, DOWN);\n    stroke(S, ex - 1.2 * Math.sin(g), ey + 1.2 * Math.cos(g), ex + 1.2 * Math.sin(g), ey - 1.2 * Math.cos(g), 0.8, 0.85, DOWN);\n  }\n  stroke(S, cx - 0.5, cy, cx + 0.5, cy, 2.4, 0.95, STRAW);\n}\n\n// Lace: a band from (x0, y0) to (x1, y1), `wide` LEDs deep, with a solid\n// heading, a net of diagonal threads, rings at each repeat and a scalloped\n// edge. `round` bends the band into a doily of that radius instead.\nfunction lace(S, x0, y0, x1, y1, wide, round) {\n  S.parts++;\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const len = Math.hypot(dx, dy);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let u;\n      let v;\n      if (round) {\n        const r = Math.hypot(x - x0, y - y0);\n        v = round - r;\n        u = (Math.atan2(y - y0, x - x0) + Math.PI) * round * 0.75;\n        if (r \u003c 3) {\n          paint(S, y * W + x, 0.85, LACE);\n          continue;\n        }\n      } else {\n        u = ((x - x0) * dx + (y - y0) * dy) / len;\n        v = (-(x - x0) * dy + (y - y0) * dx) / len;\n        if (u \u003c 0 || u > len) continue;\n      }\n      const rep = 10;\n      const m = ((u % rep) + rep) % rep;\n      const scallop = 2.6 * Math.sqrt(Math.max(0, 1 - ((m - rep / 2) / (rep / 2)) ** 2));\n      if (v \u003c 0 || v > wide + scallop) continue;\n      let op = 0;\n      if (v \u003c 1.6) op = 0.85;\n      else if (v > wide + scallop - 1.2) op = 0.8;\n      else {\n        const ring = Math.hypot(m - rep / 2, v - wide * 0.55);\n        if (Math.abs(ring - 3) \u003c 0.8) op = 0.85;\n        else if (ring \u003c 1.2) op = 0.75;\n        else if (ring > 4 && (Math.abs(((u + v) % 3.4) - 1.7) \u003c 0.5 || Math.abs(((((u - v) % 3.4) + 3.4) % 3.4) - 1.7) \u003c 0.5)) op = 0.7;\n      }\n      if (op > 0) paint(S, y * W + x, op, LACE);\n    }\n}\n\nconst ARRANGE = [\n  (S) => {\n    fern(S, 11, 126, -1.5, 100, 11, 0.2);\n    feather(S, 58, 126, -1.82, 82, 5, 8, 1);\n  },\n  (S) => {\n    feather(S, 8, 98, -1.15, 92, 7, 5, 2);\n    feather(S, 56, 96, -2.05, 80, 4, 6, 3);\n    lace(S, -2, 104, 66, 104, 11, 0);\n  },\n  (S) => {\n    clock(S, 20, 127, 18, 24, 12, 4);\n    clock(S, 34, 127, 46, 54, 10, 5);\n    clock(S, 26, 127, 16, 88, 8, 6);\n    grass(S, 56, 126, -1.65, 64, -1.2);\n  },\n  (S) => {\n    fern(S, 34, 126, -1.62, 112, 13, -0.15);\n    fern(S, 6, 4, 1.25, 52, 7, 0.25);\n  },\n  (S) => {\n    lace(S, 32, 38, 0, 0, 18, 25);\n    grass(S, 20, 126, -1.35, 60, -0.5);\n    fern(S, 48, 126, -1.75, 56, 8, -0.3);\n  },\n];\n\nexport function setup(params) {\n  const P = params;\n  P.grain = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) P.grain[p] = hash(p, 99) - 0.5;\n  P.drops = [];\n  Object.assign(P, { ct: OPEN, count: 0, arr: 0, sheet: null, last: null, started: false, tone: 0, k: 2.6 });\n  lay(P, 0);\n}\n\nfunction lay(P, arr) {\n  P.last = P.sheet;\n  P.sheet = newSheet(arr, P.count++);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.tone = clamp(k[0], 0, 1);\n  P.k = 2.6 * Math.pow(2, 1.3 * clamp(k[3], -1, 1));\n  const arr = clamp(Math.round(k[2]), 0, ARRANGEMENTS - 1);\n  if (arr !== P.arr) {\n    // A new specimen: its print comes up under the wash.\n    P.arr = arr;\n    lay(P, arr);\n    P.ct = P.started ? WASH : OPEN;\n    P.last = null;\n  }\n  P.started = true;\n  const speed = clamp(k[1], 0.1, 4) / 2;\n  P.ct += dt * speed;\n  if (P.ct >= CYCLE) {\n    P.ct -= CYCLE;\n    P.arr = arr;\n    lay(P, (P.sheet.arr + 1) % ARRANGEMENTS);\n  }\n  // Drops of the wash run down the wet sheet.\n  const ct = P.ct;\n  if (ct > WASH && ct \u003c DRY + 2 && Math.random() \u003c dt * speed * 3) P.drops.push({ x: 4 + Math.random() * 56, y: Math.min(H, washLine(ct)) * Math.random(), v: 6 + 10 * Math.random() });\n  for (const d of P.drops) d.y += d.v * dt * speed;\n  P.drops = P.drops.filter((d) => d.y \u003c H + 4);\n}\n\n// How far down the sheet the wash has run.\nfunction washLine(ct) {\n  return -10 + (H + 18) * smooth(WASH, DRY, ct);\n}\n\n// The colour of a sheet at one LED: the salts as they are at time `ct` of the\n// sheet's life, with the specimens on top while they lie there.\nfunction colour(P, S, p, x, y, ct, out) {\n  const c = S.coat[p];\n  const m = S.mask[p];\n  const tone = P.tone;\n  const g = 3 * P.grain[p];\n  let r = PAPER[0];\n  let gg = PAPER[1];\n  let b = PAPER[2];\n  // The wash front, ragged along the row.\n  const front = ct \u003c WASH ? -99 : ct \u003c DRY ? washLine(ct) + 2.2 * Math.sin(x * 0.37 + ct * 2.1) + 1.6 * Math.sin(x * 0.93 - ct * 3.3) + 3 * noise1(x * 0.45 + ct, 33) : 999;\n  if (y \u003c front) {\n    // Washed: the salts that never saw the sun are gone, and what did is blue.\n    const blue = c * (1 - Math.exp(-P.k * (1 - m)));\n    const wet = smooth(DRY + 3.2, DRY - 0.5, ct + (H - y) * 0.012);\n    const dark0 = WET[0] * wet + BLUE[0] * (1 - wet);\n    const dark1 = WET[1] * wet + BLUE[1] * (1 - wet);\n    const dark2 = WET[2] * wet + BLUE[2] * (1 - wet);\n    const t0 = TEA_WET[0] * wet + TEA[0] * (1 - wet);\n    const t1 = TEA_WET[1] * wet + TEA[1] * (1 - wet);\n    const t2 = TEA_WET[2] * wet + TEA[2] * (1 - wet);\n    const d0 = dark0 + (t0 - dark0) * tone;\n    const d1 = dark1 + (t1 - dark1) * tone;\n    const d2 = dark2 + (t2 - dark2) * tone;\n    const l0 = PAPER[0] + (CREAM[0] - PAPER[0]) * tone;\n    const l1 = PAPER[1] + (CREAM[1] - PAPER[1]) * tone;\n    const l2 = PAPER[2] + (CREAM[2] - PAPER[2]) * tone;\n    r = l0 + (d0 - l0) * blue;\n    gg = l1 + (d1 - l1) * blue;\n    b = l2 + (d2 - l2) * blue;\n    // Water on the sheet shines; the shine draws back down as it dries.\n    const film = front - y \u003c 6 ? 1 - (front - y) / 6 : wet * 0.35;\n    if (film > 0) {\n      const shine = film * (18 + 14 * Math.sin(x * 0.7 + y * 0.35 - ct * 9));\n      r += shine;\n      gg += shine;\n      b += shine;\n    }\n  } else {\n    // In the sun the salts go from yellow-green to grey-blue where light\n    // reaches them.\n    const dose = ct \u003c SUN ? 0 : smooth(SUN, LIFT, ct) * (1 - m);\n    const e = 1 - Math.exp(-P.k * 1.2 * dose);\n    const s0 = COAT[0] + (SUNNED[0] - COAT[0]) * e;\n    const s1 = COAT[1] + (SUNNED[1] - COAT[1]) * e;\n    const s2 = COAT[2] + (SUNNED[2] - COAT[2]) * e;\n    r += (s0 - r) * c;\n    gg += (s1 - gg) * c;\n    b += (s2 - b) * c;\n    // Just under the wash front the salts run yellow down the sheet.\n    if (front > -99 && y - front \u003c 10) {\n      const run = (1 - (y - front) / 10) * c;\n      r += (220 - r) * run * 0.3;\n      gg += (214 - gg) * run * 0.3;\n      b += (120 - b) * run * 0.3;\n    }\n    // The specimens, laid one after another and lifted together.\n    if (S.order[p] && ct > LAY && ct \u003c LIFT + 0.6) {\n      const off = smooth(LIFT + 0.6, LIFT, ct);\n      for (let layer = 0; layer \u003c 2; layer++) {\n        const o = layer ? S.order[p] : S.uorder[p];\n        if (!o) continue;\n        const src = layer ? S.obj : S.under;\n        const on = smooth(LAY + 0.35 * (o - 1), LAY + 0.35 * o, ct) * off;\n        r += (src[p * 3] - r) * on;\n        gg += (src[p * 3 + 1] - gg) * on;\n        b += (src[p * 3 + 2] - b) * on;\n      }\n    }\n    // The glass over it all catches the sun in a broad band.\n    if (ct > GLASS && ct \u003c LIFT + 0.4) {\n      const lit = smooth(GLASS, GLASS + 0.4, ct) * smooth(LIFT + 0.4, LIFT, ct);\n      const band = x * 0.8 + y * 0.45 - 20 - 9 * (ct - GLASS);\n      const glare = lit * (8 + 30 * Math.exp(-(band * band) / 60));\n      r += glare;\n      gg += glare;\n      b += glare;\n    }\n  }\n  out[0] = r + g;\n  out[1] = gg + g;\n  out[2] = b + g;\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.sheet) return;\n  const ct = P.ct;\n  const S = P.sheet;\n  const out = [0, 0, 0];\n  // While the last print slides off to the left, the new sheet lies under it.\n  const off = P.last && ct \u003c LAY ? Math.round(W * smooth(SLIDE, LAY, ct)) : W;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (x + off \u003c W) {\n        colour(P, P.last, p + off, x + off, y, CYCLE - 0.01, out);\n      } else {\n        colour(P, S, p, x, y, ct, out);\n        // The print's edge throws a shadow on the sheet beneath.\n        const e = x + off - W;\n        if (off \u003c W && e \u003c 3) {\n          const sh = 0.55 + 0.15 * e;\n          out[0] *= sh;\n          out[1] *= sh;\n          out[2] *= sh;\n        }\n      }\n      display.setPixel(x, y, byte(out[0]), byte(out[1]), byte(out[2]));\n    }\n  // Drops running down the wet print.\n  if (ct > WASH && ct \u003c CYCLE)\n    for (const d of P.drops) {\n      const x = Math.round(d.x);\n      for (let j = 0; j \u003c 3; j++) {\n        const y = Math.round(d.y) - j;\n        if (y \u003c 0 || y >= H || y > (ct \u003c DRY ? washLine(ct) - 3 : H)) continue;\n        colour(P, S, y * W + x, x, y, ct, out);\n        const v = 40 - 12 * j;\n        display.setPixel(x, y, byte(out[0] + v), byte(out[1] + v), byte(out[2] + v));\n      }\n    }\n}\n","layer":{"id":"layer-cyanotype","type":"code","name":"cyanotype","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Cyanotype\n// Family:  print\n// Idea:    A sun print is made over and over: pressed ferns, feathers, seed heads and lace are laid on a sheet brushed with pale yellow-green iron salts, the sun turns the bare paper blue-grey round them, and when they are lifted a wash runs down the sheet, clearing their shadows to white and the ground to Prussian blue, which deepens as it dries before the print is slid away for the next sheet.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after John Herschel's cyanotype process (1842) and Anna Atkins's photograms of algae and ferns\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Tone=0..1, Speed=0.2..3, Specimen=0..4, Exposure=-1..1\n//\n// Knob 1: Tone. The washed print, from the plain Prussian blue on white at 0 through a violet to a tea-toned print at 1, brown-black on cream.\n// Knob 2: Speed. How fast the printer works: at 2 one sheet takes 15 seconds from laying the specimens to sliding the dry print away, five of them in the sun; at 0.2 it takes two and a half minutes.\n// Knob 3: Specimen. What is laid on the sheet: a fern frond and a feather, two feathers over a strip of lace, dandelion clocks and grasses, two ferns, or a lace doily with a sprig; turning it washes up a print of that one, and after it the sheets follow in that order.\n// Knob 4: Exposure. How long the sheet lies in the sun: at -1 the ground stays a pale blue and every barb and lace thread prints; at 0 the blue is full; at 1 it goes nearly navy and the thin parts burn through.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n\n// The steps of one sheet, in seconds at Speed 2: the last print slides away,\n// the specimens are laid one by one, the glass goes down, the sun, the glass\n// and specimens come off, the wash runs down the sheet, and it dries.\nconst SLIDE = 0;\nconst LAY = 1.2;\nconst GLASS = 2.6;\nconst SUN = 3;\nconst LIFT = 8;\nconst WASH = 8.8;\nconst DRY = 11.8;\nconst CYCLE = 15;\n// The panel opens with the wash 60% of the way down the first print.\nconst OPEN = WASH + 0.6 * (DRY - WASH);\nconst ARRANGEMENTS = 5;\n\nconst PAPER = [212, 208, 196];\nconst CREAM = [214, 188, 136];\n// The iron salts as brushed on, and the grey-blue they turn in the sun\n// before they are washed.\nconst COAT = [198, 202, 92];\nconst SUNNED = [88, 102, 112];\n// Prussian blue wet from the wash and dry; tea turns it brown-black.\nconst WET = [44, 96, 182];\nconst BLUE = [12, 44, 122];\nconst TEA_WET = [104, 74, 76];\nconst TEA = [62, 40, 46];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction noise1(x, s) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, s) * (1 - u) + hash(i + 1, s) * u;\n}\n\n// A sheet: how thick the salts were brushed at each LED, how much light the\n// specimens on it stop there, and what the specimens look like lying on it.\nfunction newSheet(arr, n) {\n  const S = {\n    arr,\n    coat: new Float32Array(N),\n    mask: new Float32Array(N),\n    obj: new Float32Array(N * 3),\n    order: new Float32Array(N),\n    // Where one specimen lies over another, the one under it.\n    under: new Float32Array(N * 3),\n    uorder: new Float32Array(N),\n    parts: 0,\n  };\n  // Brushed side to side, so the edges are ragged and a few bristles run\n  // past them, and the strokes leave streaks along the rows.\n  for (let y = 0; y \u003c H; y++) {\n    const left = 3 + 2.5 * noise1(y * 0.35, n * 13 + 1) + (hash(y, n * 13 + 2) > 0.88 ? -3 * hash(y, n * 13 + 3) : 0);\n    const right = 60 - 2.5 * noise1(y * 0.35, n * 13 + 4) + (hash(y, n * 13 + 5) > 0.88 ? 3 * hash(y, n * 13 + 6) : 0);\n    const streak = 0.9 + 0.07 * noise1(y * 0.22, n * 13 + 7) + 0.03 * noise1(y * 1.1, n * 13 + 11);\n    for (let x = 0; x \u003c W; x++) {\n      const top = 4 + 2 * noise1(x * 0.3, n * 13 + 8);\n      const bottom = 123 - 2 * noise1(x * 0.3, n * 13 + 9);\n      const inside = smooth(left - 1, left + 1.5, x) * smooth(right + 1, right - 1.5, x) * smooth(top - 1, top + 1, y) * smooth(bottom + 1, bottom - 1, y);\n      S.coat[y * W + x] = inside * streak * (0.94 + 0.06 * noise1(x * 0.2 + y * 3.7, n * 13 + 10));\n    }\n  }\n  ARRANGE[arr](S);\n  return S;\n}\n\n// Lays one stroke of a specimen: a segment `w` LEDs wide that stops `op` of\n// the light, in colour `col`.\nfunction stroke(S, x0, y0, x1, y1, w, op, col) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const len2 = dx * dx + dy * dy || 1;\n  const r = w / 2 + 0.5;\n  const xa = Math.max(0, Math.floor(Math.min(x0, x1) - r));\n  const xb = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + r));\n  const ya = Math.max(0, Math.floor(Math.min(y0, y1) - r));\n  const yb = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + r));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const u = clamp(((x - x0) * dx + (y - y0) * dy) / len2, 0, 1);\n      const d = Math.hypot(x - x0 - u * dx, y - y0 - u * dy);\n      // Pressed flat under the glass, a specimen's edge prints sharp.\n      if (d \u003c r - 0.5) paint(S, y * W + x, op, col);\n    }\n}\n\n// One LED of a specimen. The light it lets through is the least any layer\n// there lets through; the specimen laid last is the one seen on top.\nfunction paint(S, p, op, col) {\n  S.mask[p] = Math.max(S.mask[p], op);\n  if (S.order[p] && S.order[p] !== S.parts) {\n    S.uorder[p] = S.order[p];\n    for (let c = 0; c \u003c 3; c++) S.under[p * 3 + c] = S.obj[p * 3 + c];\n  }\n  for (let c = 0; c \u003c 3; c++) S.obj[p * 3 + c] = col[c];\n  S.order[p] = S.parts;\n}\n\nconst FROND = [70, 112, 48];\nconst QUILL = [196, 186, 166];\nconst SHAFT = [150, 128, 100];\nconst STRAW = [196, 166, 104];\nconst DOWN = [226, 224, 216];\nconst LACE = [232, 226, 210];\n\n// A fern frond from its foot (x, y) along angle `a` for `len` LEDs, bending\n// by `bend`, with pinnae up to `wide` LEDs long, alternate, the lowest few\n// pairs short and the frond tapering to its tip; each pinna is lobed.\nfunction fern(S, x, y, a, len, wide, bend) {\n  S.parts++;\n  const at = (s) => {\n    const c = Math.cos(a + bend * s);\n    const d = Math.sin(a + bend * s);\n    return [x + c * s * len, y + d * s * len, c, d];\n  };\n  for (let s = 0; s \u003c 1; s += 0.02) {\n    const [x0, y0] = at(s);\n    const [x1, y1] = at(s + 0.02);\n    stroke(S, x0, y0, x1, y1, 1.4 - 0.7 * s, 0.95, FROND);\n  }\n  const step = 2.9 / len;\n  let side = 1;\n  for (let s = 0.16; s \u003c 0.97; s += step) {\n    const [px, py, c, d] = at(s);\n    const k = (s - 0.16) / 0.81;\n    const l = wide * Math.pow(Math.sin(Math.PI * Math.min(1, k * 1.25 + 0.06)), 0.8) * (1 - 0.35 * k) + 1;\n    // Pinnae lean toward the tip and curve up at their ends.\n    const pa = a + bend * s + side * (1.15 - 0.25 * k);\n    let qx = px;\n    let qy = py;\n    const n = Math.max(2, Math.round(l));\n    for (let j = 0; j \u003c n; j++) {\n      const t = j / n;\n      const ang = pa - side * 0.45 * t;\n      const nx = qx + Math.cos(ang);\n      const ny = qy + Math.sin(ang);\n      const lobe = 0.75 + 0.25 * Math.cos(j * 2.4);\n      stroke(S, qx, qy, nx, ny, (2.4 - 1.5 * t) * lobe, 0.9, FROND);\n      qx = nx;\n      qy = ny;\n    }\n    side = -side;\n  }\n}\n\n// A feather from the end of its quill along angle `a`: the vanes are barbs\n// side by side that let some light through, split apart here and there, with\n// soft down at the foot, and the shaft drawn over them.\nfunction feather(S, x, y, a, len, wl, wr, seed) {\n  S.parts++;\n  const c = Math.cos(a);\n  const d = Math.sin(a);\n  const bend = 0.12 * len;\n  const at = (s) => [x + c * s * len - d * bend * s * s, y + d * s * len + c * bend * s * s];\n  const [mx, my] = at(0.5);\n  const reach = len / 2 + Math.max(wl, wr) + 4;\n  for (let py = Math.max(0, Math.floor(my - reach)); py \u003c= Math.min(H - 1, my + reach); py++)\n    for (let px = Math.max(0, Math.floor(mx - reach)); px \u003c= Math.min(W - 1, mx + reach); px++) {\n      const s = ((px - x) * c + (py - y) * d) / len;\n      if (s \u003c 0.08 || s > 1) continue;\n      const t = -(px - x) * d + (py - y) * c - bend * s * s;\n      const side = t \u003c 0 ? -1 : 1;\n      const at2 = Math.abs(t);\n      const down = s \u003c 0.3;\n      const wide = (side \u003c 0 ? wl : wr) * (down ? 0.7 + 0.5 * hash(px * 7 + py, seed) : Math.sqrt(Math.max(0, 1 - ((s - 0.55) / 0.46) ** 2)));\n      if (at2 > wide) continue;\n      // Each barb runs out from the shaft and forward toward the tip.\n      const b = (s * len - at2 * 0.55) / 2.4;\n      const k = Math.floor(b);\n      let op = b - k \u003c 0.5 ? 0.9 : 0.5;\n      if (down) op = 0.25 + 0.25 * hash(px, py + seed);\n      else if (hash(k, seed + side) > 0.88 && at2 > 0.35 * wide) op = 0.15;\n      paint(S, py * W + px, op, op > 0.6 ? QUILL : DOWN);\n    }\n  for (let s = 0; s \u003c 1; s += 0.025) {\n    const [x0, y0] = at(s);\n    const [x1, y1] = at(s + 0.025);\n    stroke(S, x0, y0, x1, y1, 1.5 - 1 * s, 0.97, SHAFT);\n  }\n}\n\n// A grass in seed: a thin stem nodding over, its seed heads hung on short\n// stalks either side.\nfunction grass(S, x, y, a, len, bend) {\n  S.parts++;\n  let px = x;\n  let py = y;\n  for (let i = 0; i \u003c len; i++) {\n    const g = a + (bend * i) / len;\n    const nx = px + Math.cos(g);\n    const ny = py + Math.sin(g);\n    stroke(S, px, py, nx, ny, 0.9, 0.9, STRAW);\n    if (i > len * 0.45 && i % 3 === 0) {\n      const side = (i / 3) % 2 ? 1 : -1;\n      const h = g + side * 0.9 + 0.5 * bend;\n      const sx = nx + 2 * Math.cos(h);\n      const sy = ny + 2 * Math.sin(h);\n      stroke(S, nx, ny, sx, sy, 0.6, 0.8, STRAW);\n      const e = h + 0.4 * side;\n      stroke(S, sx, sy, sx + 2.6 * Math.cos(e), sy + 2.6 * Math.sin(e), 1.7, 0.95, STRAW);\n    }\n    px = nx;\n    py = ny;\n  }\n}\n\n// A dandelion clock: its stem up from (x, y), a ball of seeds on fine\n// stalks, each with its little parachute.\nfunction clock(S, x, y, cx, cy, r, seed) {\n  S.parts++;\n  stroke(S, x, y, (x + cx) / 2 + 2, (y + cy) / 2, 1, 0.9, STRAW);\n  stroke(S, (x + cx) / 2 + 2, (y + cy) / 2, cx, cy, 1, 0.9, STRAW);\n  const n = 26;\n  for (let i = 0; i \u003c n; i++) {\n    const g = (i / n) * 6.283 + 0.2 * hash(i, seed);\n    const l = r * (0.8 + 0.2 * hash(i, seed + 1));\n    const ex = cx + Math.cos(g) * l;\n    const ey = cy + Math.sin(g) * l;\n    stroke(S, cx, cy, ex, ey, 0.5, 0.7, DOWN);\n    stroke(S, ex - 1.2 * Math.sin(g), ey + 1.2 * Math.cos(g), ex + 1.2 * Math.sin(g), ey - 1.2 * Math.cos(g), 0.8, 0.85, DOWN);\n  }\n  stroke(S, cx - 0.5, cy, cx + 0.5, cy, 2.4, 0.95, STRAW);\n}\n\n// Lace: a band from (x0, y0) to (x1, y1), `wide` LEDs deep, with a solid\n// heading, a net of diagonal threads, rings at each repeat and a scalloped\n// edge. `round` bends the band into a doily of that radius instead.\nfunction lace(S, x0, y0, x1, y1, wide, round) {\n  S.parts++;\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const len = Math.hypot(dx, dy);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let u;\n      let v;\n      if (round) {\n        const r = Math.hypot(x - x0, y - y0);\n        v = round - r;\n        u = (Math.atan2(y - y0, x - x0) + Math.PI) * round * 0.75;\n        if (r \u003c 3) {\n          paint(S, y * W + x, 0.85, LACE);\n          continue;\n        }\n      } else {\n        u = ((x - x0) * dx + (y - y0) * dy) / len;\n        v = (-(x - x0) * dy + (y - y0) * dx) / len;\n        if (u \u003c 0 || u > len) continue;\n      }\n      const rep = 10;\n      const m = ((u % rep) + rep) % rep;\n      const scallop = 2.6 * Math.sqrt(Math.max(0, 1 - ((m - rep / 2) / (rep / 2)) ** 2));\n      if (v \u003c 0 || v > wide + scallop) continue;\n      let op = 0;\n      if (v \u003c 1.6) op = 0.85;\n      else if (v > wide + scallop - 1.2) op = 0.8;\n      else {\n        const ring = Math.hypot(m - rep / 2, v - wide * 0.55);\n        if (Math.abs(ring - 3) \u003c 0.8) op = 0.85;\n        else if (ring \u003c 1.2) op = 0.75;\n        else if (ring > 4 && (Math.abs(((u + v) % 3.4) - 1.7) \u003c 0.5 || Math.abs(((((u - v) % 3.4) + 3.4) % 3.4) - 1.7) \u003c 0.5)) op = 0.7;\n      }\n      if (op > 0) paint(S, y * W + x, op, LACE);\n    }\n}\n\nconst ARRANGE = [\n  (S) => {\n    fern(S, 11, 126, -1.5, 100, 11, 0.2);\n    feather(S, 58, 126, -1.82, 82, 5, 8, 1);\n  },\n  (S) => {\n    feather(S, 8, 98, -1.15, 92, 7, 5, 2);\n    feather(S, 56, 96, -2.05, 80, 4, 6, 3);\n    lace(S, -2, 104, 66, 104, 11, 0);\n  },\n  (S) => {\n    clock(S, 20, 127, 18, 24, 12, 4);\n    clock(S, 34, 127, 46, 54, 10, 5);\n    clock(S, 26, 127, 16, 88, 8, 6);\n    grass(S, 56, 126, -1.65, 64, -1.2);\n  },\n  (S) => {\n    fern(S, 34, 126, -1.62, 112, 13, -0.15);\n    fern(S, 6, 4, 1.25, 52, 7, 0.25);\n  },\n  (S) => {\n    lace(S, 32, 38, 0, 0, 18, 25);\n    grass(S, 20, 126, -1.35, 60, -0.5);\n    fern(S, 48, 126, -1.75, 56, 8, -0.3);\n  },\n];\n\nexport function setup(params) {\n  const P = params;\n  P.grain = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) P.grain[p] = hash(p, 99) - 0.5;\n  P.drops = [];\n  Object.assign(P, { ct: OPEN, count: 0, arr: 0, sheet: null, last: null, started: false, tone: 0, k: 2.6 });\n  lay(P, 0);\n}\n\nfunction lay(P, arr) {\n  P.last = P.sheet;\n  P.sheet = newSheet(arr, P.count++);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.tone = clamp(k[0], 0, 1);\n  P.k = 2.6 * Math.pow(2, 1.3 * clamp(k[3], -1, 1));\n  const arr = clamp(Math.round(k[2]), 0, ARRANGEMENTS - 1);\n  if (arr !== P.arr) {\n    // A new specimen: its print comes up under the wash.\n    P.arr = arr;\n    lay(P, arr);\n    P.ct = P.started ? WASH : OPEN;\n    P.last = null;\n  }\n  P.started = true;\n  const speed = clamp(k[1], 0.1, 4) / 2;\n  P.ct += dt * speed;\n  if (P.ct >= CYCLE) {\n    P.ct -= CYCLE;\n    P.arr = arr;\n    lay(P, (P.sheet.arr + 1) % ARRANGEMENTS);\n  }\n  // Drops of the wash run down the wet sheet.\n  const ct = P.ct;\n  if (ct > WASH && ct \u003c DRY + 2 && Math.random() \u003c dt * speed * 3) P.drops.push({ x: 4 + Math.random() * 56, y: Math.min(H, washLine(ct)) * Math.random(), v: 6 + 10 * Math.random() });\n  for (const d of P.drops) d.y += d.v * dt * speed;\n  P.drops = P.drops.filter((d) => d.y \u003c H + 4);\n}\n\n// How far down the sheet the wash has run.\nfunction washLine(ct) {\n  return -10 + (H + 18) * smooth(WASH, DRY, ct);\n}\n\n// The colour of a sheet at one LED: the salts as they are at time `ct` of the\n// sheet's life, with the specimens on top while they lie there.\nfunction colour(P, S, p, x, y, ct, out) {\n  const c = S.coat[p];\n  const m = S.mask[p];\n  const tone = P.tone;\n  const g = 3 * P.grain[p];\n  let r = PAPER[0];\n  let gg = PAPER[1];\n  let b = PAPER[2];\n  // The wash front, ragged along the row.\n  const front = ct \u003c WASH ? -99 : ct \u003c DRY ? washLine(ct) + 2.2 * Math.sin(x * 0.37 + ct * 2.1) + 1.6 * Math.sin(x * 0.93 - ct * 3.3) + 3 * noise1(x * 0.45 + ct, 33) : 999;\n  if (y \u003c front) {\n    // Washed: the salts that never saw the sun are gone, and what did is blue.\n    const blue = c * (1 - Math.exp(-P.k * (1 - m)));\n    const wet = smooth(DRY + 3.2, DRY - 0.5, ct + (H - y) * 0.012);\n    const dark0 = WET[0] * wet + BLUE[0] * (1 - wet);\n    const dark1 = WET[1] * wet + BLUE[1] * (1 - wet);\n    const dark2 = WET[2] * wet + BLUE[2] * (1 - wet);\n    const t0 = TEA_WET[0] * wet + TEA[0] * (1 - wet);\n    const t1 = TEA_WET[1] * wet + TEA[1] * (1 - wet);\n    const t2 = TEA_WET[2] * wet + TEA[2] * (1 - wet);\n    const d0 = dark0 + (t0 - dark0) * tone;\n    const d1 = dark1 + (t1 - dark1) * tone;\n    const d2 = dark2 + (t2 - dark2) * tone;\n    const l0 = PAPER[0] + (CREAM[0] - PAPER[0]) * tone;\n    const l1 = PAPER[1] + (CREAM[1] - PAPER[1]) * tone;\n    const l2 = PAPER[2] + (CREAM[2] - PAPER[2]) * tone;\n    r = l0 + (d0 - l0) * blue;\n    gg = l1 + (d1 - l1) * blue;\n    b = l2 + (d2 - l2) * blue;\n    // Water on the sheet shines; the shine draws back down as it dries.\n    const film = front - y \u003c 6 ? 1 - (front - y) / 6 : wet * 0.35;\n    if (film > 0) {\n      const shine = film * (18 + 14 * Math.sin(x * 0.7 + y * 0.35 - ct * 9));\n      r += shine;\n      gg += shine;\n      b += shine;\n    }\n  } else {\n    // In the sun the salts go from yellow-green to grey-blue where light\n    // reaches them.\n    const dose = ct \u003c SUN ? 0 : smooth(SUN, LIFT, ct) * (1 - m);\n    const e = 1 - Math.exp(-P.k * 1.2 * dose);\n    const s0 = COAT[0] + (SUNNED[0] - COAT[0]) * e;\n    const s1 = COAT[1] + (SUNNED[1] - COAT[1]) * e;\n    const s2 = COAT[2] + (SUNNED[2] - COAT[2]) * e;\n    r += (s0 - r) * c;\n    gg += (s1 - gg) * c;\n    b += (s2 - b) * c;\n    // Just under the wash front the salts run yellow down the sheet.\n    if (front > -99 && y - front \u003c 10) {\n      const run = (1 - (y - front) / 10) * c;\n      r += (220 - r) * run * 0.3;\n      gg += (214 - gg) * run * 0.3;\n      b += (120 - b) * run * 0.3;\n    }\n    // The specimens, laid one after another and lifted together.\n    if (S.order[p] && ct > LAY && ct \u003c LIFT + 0.6) {\n      const off = smooth(LIFT + 0.6, LIFT, ct);\n      for (let layer = 0; layer \u003c 2; layer++) {\n        const o = layer ? S.order[p] : S.uorder[p];\n        if (!o) continue;\n        const src = layer ? S.obj : S.under;\n        const on = smooth(LAY + 0.35 * (o - 1), LAY + 0.35 * o, ct) * off;\n        r += (src[p * 3] - r) * on;\n        gg += (src[p * 3 + 1] - gg) * on;\n        b += (src[p * 3 + 2] - b) * on;\n      }\n    }\n    // The glass over it all catches the sun in a broad band.\n    if (ct > GLASS && ct \u003c LIFT + 0.4) {\n      const lit = smooth(GLASS, GLASS + 0.4, ct) * smooth(LIFT + 0.4, LIFT, ct);\n      const band = x * 0.8 + y * 0.45 - 20 - 9 * (ct - GLASS);\n      const glare = lit * (8 + 30 * Math.exp(-(band * band) / 60));\n      r += glare;\n      gg += glare;\n      b += glare;\n    }\n  }\n  out[0] = r + g;\n  out[1] = gg + g;\n  out[2] = b + g;\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.sheet) return;\n  const ct = P.ct;\n  const S = P.sheet;\n  const out = [0, 0, 0];\n  // While the last print slides off to the left, the new sheet lies under it.\n  const off = P.last && ct \u003c LAY ? Math.round(W * smooth(SLIDE, LAY, ct)) : W;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (x + off \u003c W) {\n        colour(P, P.last, p + off, x + off, y, CYCLE - 0.01, out);\n      } else {\n        colour(P, S, p, x, y, ct, out);\n        // The print's edge throws a shadow on the sheet beneath.\n        const e = x + off - W;\n        if (off \u003c W && e \u003c 3) {\n          const sh = 0.55 + 0.15 * e;\n          out[0] *= sh;\n          out[1] *= sh;\n          out[2] *= sh;\n        }\n      }\n      display.setPixel(x, y, byte(out[0]), byte(out[1]), byte(out[2]));\n    }\n  // Drops running down the wet print.\n  if (ct > WASH && ct \u003c CYCLE)\n    for (const d of P.drops) {\n      const x = Math.round(d.x);\n      for (let j = 0; j \u003c 3; j++) {\n        const y = Math.round(d.y) - j;\n        if (y \u003c 0 || y >= H || y > (ct \u003c DRY ? washLine(ct) - 3 : H)) continue;\n        colour(P, S, y * W + x, x, y, ct, out);\n        const v = 40 - 12 * j;\n        display.setPixel(x, y, byte(out[0] + v), byte(out[1] + v), byte(out[2] + v));\n      }\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tone=0..1, Speed=0.2..3, Specimen=0..4, Exposure=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tone","min":0,"max":1,"about":"The washed print, from the plain Prussian blue on white at 0 through a violet to a tea-toned print at 1, brown-black on cream."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the printer works: at 2 one sheet takes 15 seconds from laying the specimens to sliding the dry print away, five of them in the sun; at 0.2 it takes two and a half minutes."},{"name":"Specimen","min":0,"max":4,"about":"What is laid on the sheet: a fern frond and a feather, two feathers over a strip of lace, dandelion clocks and grasses, two ferns, or a lace doily with a sprig; turning it washes up a print of that one, and after it the sheets follow in that order."},{"name":"Exposure","min":-1,"max":1,"about":"How long the sheet lies in the sun: at -1 the ground stays a pale blue and every barb and lace thread prints; at 0 the blue is full; at 1 it goes nearly navy and the thin parts burn through."}],"start":[0,2,0,0.06],"measures":{"motion":0.2407,"detail":0.0234,"edges":0.2171,"complexity":1.3748,"coverage":1,"colour":0.239,"drift":0.1842},"knobResponse":[0.1554,0.128,0.0957,0.1334]},{"slug":"datamosh","title":"Datamosh","family":"glitch","round":15,"note":"키프레임을 잃은 영상이에요. 노을과 격자 바닥이 제 움직임대로 블록째 밀려 녹아 흐르고, 장면이 바뀌면 새 그림이 옛 움직임을 따라 부서져요.","idea":"A video of a sunset and a spinning pinwheel plays with its keyframes dropped, so each frame only moves the last one's blocks along the picture's own motion and the image melts in blocky streams, swirls when the shot cuts, and comes back in partial slices now and then.","buttons":"K1 tap drops a whole clean keyframe, which then melts.","code":"// ===== Patternflow pattern =====\n// Title:   Datamosh\n// Family:  glitch\n// Idea:    A video of a sunset and a spinning pinwheel plays with its keyframes dropped, so each frame only moves the last one's blocks along the picture's own motion and the image melts in blocky streams, swirls when the shot cuts, and comes back in partial slices now and then.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: datamoshing, after Takeshi Murata's Monster Movie (2005)\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Block=8..16, Mosh=0..1\n//\n// Knob 1: Hue. Turns every colour of the video round the colour wheel, opening on a magenta and orange sunset over a cyan grid.\n// Knob 2: Speed. How fast the video runs, from a tenth of its speed to one and a half times, opening at full speed, where the ground nearest the viewer streams down about 45 LEDs a second.\n// Knob 3: Block. The codec's block size, from 8 LEDs square to 16; sizes that do not divide the panel leave cut blocks along its right and bottom edges, as a codec pads a frame.\n// Knob 4: Mosh. How long the decoder goes without a keyframe and how hard the motion pushes: a partial keyframe every 2 s of video at 0, every 12 s and twice the push at 1.\n// Buttons: K1 tap drops a whole clean keyframe, which then melts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Blocks are 8 LEDs or more, so there are never more than 8 by 16 of them.\nconst MAXB = (W / 8) * (H / 8);\n// The sunset's horizon row.\nconst HZ = 70;\nconst SHOT_A = 0;\nconst SHOT_B = 1;\n// How far, in LEDs a second, the encoder's vectors stray over flat sky.\nconst NOISE = 3;\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction mix(a, b, t, c) {\n  return a[c] + (b[c] - a[c]) * t;\n}\n\nconst SKY = [\n  [0, [20, 4, 56]],\n  [0.5, [120, 16, 124]],\n  [0.84, [235, 52, 96]],\n  [1, [255, 126, 48]],\n];\nconst BLADES = [\n  [255, 200, 0],\n  [240, 0, 140],\n  [0, 180, 240],\n];\n\n// The camera on the sunset sways slowly from side to side.\nfunction pan(t) {\n  return 9 * Math.sin(t * 0.45);\n}\n\nfunction panSpeed(t) {\n  return 9 * 0.45 * Math.cos(t * 0.45);\n}\n\n// One LED of the clean video, written into out at o: shot A is a sunset over\n// a grid running towards the viewer, shot B a pinwheel spinning on dark.\nfunction source(shot, x, y, t, out, o) {\n  let r = 0;\n  let g = 0;\n  let b = 0;\n  if (shot === SHOT_A) {\n    const px = pan(t);\n    if (y \u003c HZ) {\n      const v = y / HZ;\n      let i = 0;\n      while (i \u003c SKY.length - 2 && v > SKY[i + 1][0]) i++;\n      const f = (v - SKY[i][0]) / (SKY[i + 1][0] - SKY[i][0]);\n      r = mix(SKY[i][1], SKY[i + 1][1], f, 0);\n      g = mix(SKY[i][1], SKY[i + 1][1], f, 1);\n      b = mix(SKY[i][1], SKY[i + 1][1], f, 2);\n      // The sun, cut into bands that thicken towards the horizon and slide down.\n      const sx = 32 + px;\n      const sy = HZ - 18;\n      const dx = x - sx;\n      const dy = y - sy;\n      const R = 20;\n      if (dx * dx + dy * dy \u003c R * R) {\n        const u = dy / R;\n        const band = u > -0.15 && ((u * 5 - t * 0.6) % 1 + 1) % 1 \u003c 0.15 + 0.35 * (u + 0.15);\n        if (!band) {\n          const k = (u + 1) / 2;\n          r = 255;\n          g = 236 - 180 * k;\n          b = 70 + 80 * k;\n        }\n      }\n    } else {\n      // The ground: a dark plain, a cyan grid in perspective and the sun's\n      // reflection broken into ripples under it.\n      const d = y - HZ + 0.5;\n      const z = 60 / d;\n      const zl = z * 1.5 + t * 1.2;\n      const fz = zl - Math.floor(zl);\n      const wz = 0.9 * (60 / (d * d)) * 1.5 + 0.03;\n      const wx = ((x - 32 - px) * z) / 60;\n      const fx = wx * 1.4 - Math.floor(wx * 1.4);\n      const wl = (0.6 * z) / 60 + 0.02;\n      // Cross lines fade into the haze near the horizon; the lines running\n      // away from the viewer reach it.\n      const across = Math.max(0, 1 - Math.min(fz, 1 - fz) / wz) * smooth(5, 22, d);\n      const away = Math.max(0, 1 - Math.min(fx, 1 - fx) / (wl * 1.4)) * smooth(0, 4, d);\n      const L = Math.max(across, away);\n      const glow = Math.max(0, 1 - d / 14);\n      r = 10 + 110 * glow;\n      g = 2 + 14 * glow;\n      b = 26 + 64 * glow;\n      const half = 15 * (1 - d / 50);\n      if (half > 0 && Math.abs(x - 32 - px) \u003c half && Math.sin(d * 1.3 - t * 3 + Math.sin(x * 0.5) * 0.6) > 0.1 - 0.5 * (d / 50)) {\n        const f = 1 - d / 50;\n        r = 255 * f + r * (1 - f);\n        g = 110 * f + g * (1 - f);\n        b = 70 * f + b * (1 - f);\n      }\n      r = r * (1 - L) + 30 * L;\n      g = g * (1 - L) + 200 * L;\n      b = b * (1 - L) + 240 * L;\n    }\n  } else {\n    const dx = x - 32;\n    const dy = y - 64;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    r = 12;\n    g = 8;\n    b = 40;\n    // Rings round the pinwheel, far apart and faint.\n    if (((d / 9) % 1) \u003c 0.18) {\n      r = 50;\n      g = 16;\n      b = 100;\n    }\n    if (d \u003c 26) {\n      const a = Math.atan2(dy, dx) - t * 0.9;\n      const s = Math.floor(((a / (Math.PI * 2)) % 1 + 1) % 1 * 6);\n      const twist = d \u003c 6 ? -1 : s % 3;\n      if (twist >= 0) {\n        const c = BLADES[twist];\n        r = c[0];\n        g = c[1];\n        b = c[2];\n      } else {\n        r = 250;\n        g = 250;\n        b = 240;\n      }\n    }\n  }\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\n// The video's own motion at (x, y), in LEDs a second: what the encoder found\n// when it still had keyframes to compare against.\nfunction motion(shot, x, y, t, out) {\n  if (shot === SHOT_A) {\n    const pv = panSpeed(t);\n    if (y \u003c HZ) {\n      out[0] = pv;\n      // Inside the sun the bands slide down. The sky round it is one smooth\n      // ramp, where the encoder's search finds nothing to hold on to.\n      const dx = x - 32 - pan(t);\n      const dy = y - (HZ - 18);\n      const sun = dx * dx + dy * dy \u003c 400;\n      out[1] = sun && dy > -3 ? 2.4 : 0;\n      out[2] = sun ? 0 : 1;\n    } else {\n      // Ground running at the camera: everything below the horizon spreads\n      // away from the vanishing point, faster the nearer it is, and the\n      // near ground swings further with the camera than the far.\n      const d = y - HZ + 0.5;\n      const k = (d * 1.2) / 60 / 1.5;\n      out[0] = pv * (1 + d / 20) + (x - 32 - pan(t)) * k;\n      out[1] = d * k;\n      out[2] = 0;\n    }\n  } else {\n    const dx = x - 32;\n    const dy = y - 64;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    // Only the pinwheel turns; the dark round it stands still.\n    const w = d \u003c 27 ? 0.9 : 0;\n    out[0] = -dy * w;\n    out[1] = dx * w;\n    out[2] = 0;\n  }\n}\n\nexport function setup(params) {\n  params.buf = new Float32Array(N * 3);\n  params.old = new Float32Array(N * 3);\n  params.ax = new Float32Array(MAXB);\n  params.ay = new Float32Array(MAXB);\n  params.v = new Float32Array(3);\n  params.src = 0;\n  params.shot = SHOT_A;\n  params.cut = 3.5;\n  params.nextKey = 2.0;\n  params.size = 0;\n  params.keys = 0;\n  params.started = false;\n  params.m = new Float32Array(9);\n  params.hue = -1;\n}\n\n// Writes the clean video over a block, or over every block for a whole keyframe.\nfunction paintBlock(P, x0, y0, bs) {\n  const buf = P.buf;\n  const x1 = Math.min(W, x0 + bs);\n  const y1 = Math.min(H, y0 + bs);\n  for (let y = y0; y \u003c y1; y++) for (let x = x0; x \u003c x1; x++) source(P.shot, x + 0.5, y + 0.5, P.src, buf, (y * W + x) * 3);\n}\n\nfunction keyframe(P, whole) {\n  const bs = P.size;\n  const rows = Math.ceil(H / bs);\n  const cols = Math.ceil(W / bs);\n  P.keys++;\n  // A keyframe that arrives only partly: a band of slices comes through\n  // with a few blocks missing, and a scatter of single blocks elsewhere.\n  const r0 = Math.floor(hash(P.keys, 1) * rows * 0.7);\n  const r1 = Math.min(rows, r0 + Math.max(2, Math.floor(rows * (0.2 + 0.25 * hash(P.keys, 2)))));\n  for (let by = 0; by \u003c rows; by++)\n    for (let bx = 0; bx \u003c cols; bx++) {\n      const inBand = by >= r0 && by \u003c r1;\n      const p = hash(P.keys * 977 + bx, by);\n      if (whole || (inBand && p \u003c 0.85) || (!inBand && p \u003c 0.04)) {\n        paintBlock(P, bx * bs, by * bs, bs);\n        P.ax[by * cols + bx] = 0;\n        P.ay[by * cols + bx] = 0;\n      }\n    }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = Math.min(dt, 0.1);\n  const P = params;\n  const mosh = Math.max(0, Math.min(1, k[3]));\n  const bs = Math.max(8, Math.min(16, Math.round(k[2])));\n  const step = dt * Math.max(0.05, k[1]) * 0.5;\n  if (bs !== P.size) {\n    P.size = bs;\n    P.ax.fill(0);\n    P.ay.fill(0);\n  }\n  if (!P.started) {\n    P.started = true;\n    keyframe(P, true);\n  }\n  P.src += step;\n  // The video cuts between its two shots, and the encoder's keyframe at the\n  // cut is lost with the rest: the new shot's motion moves the old picture.\n  if (P.src >= P.cut) {\n    P.shot = P.shot === SHOT_A ? SHOT_B : SHOT_A;\n    const len = P.shot === SHOT_A ? 6 : 4.5;\n    P.cut = P.src + len;\n    // The new shot's motion has most of the shot to work on the old picture\n    // before a slice of the new one gets through.\n    P.nextKey = Math.max(P.nextKey, P.src + len * 0.6);\n  }\n  if (input.btnPressed && input.btnPressed[0]) keyframe(P, true);\n  else if (P.src >= P.nextKey) {\n    keyframe(P, false);\n    P.nextKey = P.src + 2 + 10 * mosh * mosh;\n  }\n\n  // Each block moves as one, by its own motion vector, rounded to whole\n  // LEDs; what is left over carries to the next frame.\n  const old = P.old;\n  const buf = P.buf;\n  old.set(buf);\n  const cols = Math.ceil(W / bs);\n  const rows = Math.ceil(H / bs);\n  const gain = (1 + mosh) * step;\n  const v = P.v;\n  for (let by = 0; by \u003c rows; by++)\n    for (let bx = 0; bx \u003c cols; bx++) {\n      const b = by * cols + bx;\n      const x0 = bx * bs;\n      const y0 = by * bs;\n      const x1 = Math.min(W, x0 + bs);\n      const y1 = Math.min(H, y0 + bs);\n      motion(P.shot, (x0 + x1) / 2, (y0 + y1) / 2, P.src, v);\n      // The encoder's search was never exact: each block's vector strays a\n      // little, and the stray changes every so often.\n      const e = Math.floor(P.src * 1.5 + hash(b, 7) * 3);\n      v[0] += (hash(b * 31 + e, 11) - 0.5) * NOISE * v[2];\n      v[1] += (hash(b * 31 + e, 13) - 0.5) * NOISE * v[2];\n      P.ax[b] += v[0] * gain;\n      P.ay[b] += v[1] * gain;\n      const mx = Math.trunc(P.ax[b]);\n      const my = Math.trunc(P.ay[b]);\n      if (mx === 0 && my === 0) continue;\n      P.ax[b] -= mx;\n      P.ay[b] -= my;\n      for (let y = y0; y \u003c y1; y++) {\n        // Past the frame's edge the decoder repeats the edge LEDs.\n        const sy = Math.max(0, Math.min(H - 1, y - my));\n        for (let x = x0; x \u003c x1; x++) {\n          const sx = Math.max(0, Math.min(W - 1, x - mx));\n          const o = (y * W + x) * 3;\n          const s = (sy * W + sx) * 3;\n          buf[o] = old[s];\n          buf[o + 1] = old[s + 1];\n          buf[o + 2] = old[s + 2];\n        }\n      }\n    }\n\n  if (k[0] !== P.hue) {\n    // Hue turns colours round the grey axis.\n    P.hue = k[0];\n    const a = k[0] * Math.PI * 2;\n    const c = Math.cos(a);\n    const s = Math.sin(a);\n    const q = (1 - c) / 3;\n    const r3 = Math.sqrt(1 / 3) * s;\n    const m = P.m;\n    m[0] = c + q;\n    m[1] = q - r3;\n    m[2] = q + r3;\n    m[3] = q + r3;\n    m[4] = c + q;\n    m[5] = q - r3;\n    m[6] = q - r3;\n    m[7] = q + r3;\n    m[8] = c + q;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const m = params.m;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      const r = buf[o];\n      const g = buf[o + 1];\n      const b = buf[o + 2];\n      display.setPixel(\n        x,\n        y,\n        Math.max(0, Math.min(255, r * m[0] + g * m[1] + b * m[2])),\n        Math.max(0, Math.min(255, r * m[3] + g * m[4] + b * m[5])),\n        Math.max(0, Math.min(255, r * m[6] + g * m[7] + b * m[8])),\n      );\n    }\n}\n","layer":{"id":"layer-datamosh","type":"code","name":"datamosh","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Datamosh\n// Family:  glitch\n// Idea:    A video of a sunset and a spinning pinwheel plays with its keyframes dropped, so each frame only moves the last one's blocks along the picture's own motion and the image melts in blocky streams, swirls when the shot cuts, and comes back in partial slices now and then.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: datamoshing, after Takeshi Murata's Monster Movie (2005)\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Block=8..16, Mosh=0..1\n//\n// Knob 1: Hue. Turns every colour of the video round the colour wheel, opening on a magenta and orange sunset over a cyan grid.\n// Knob 2: Speed. How fast the video runs, from a tenth of its speed to one and a half times, opening at full speed, where the ground nearest the viewer streams down about 45 LEDs a second.\n// Knob 3: Block. The codec's block size, from 8 LEDs square to 16; sizes that do not divide the panel leave cut blocks along its right and bottom edges, as a codec pads a frame.\n// Knob 4: Mosh. How long the decoder goes without a keyframe and how hard the motion pushes: a partial keyframe every 2 s of video at 0, every 12 s and twice the push at 1.\n// Buttons: K1 tap drops a whole clean keyframe, which then melts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Blocks are 8 LEDs or more, so there are never more than 8 by 16 of them.\nconst MAXB = (W / 8) * (H / 8);\n// The sunset's horizon row.\nconst HZ = 70;\nconst SHOT_A = 0;\nconst SHOT_B = 1;\n// How far, in LEDs a second, the encoder's vectors stray over flat sky.\nconst NOISE = 3;\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction mix(a, b, t, c) {\n  return a[c] + (b[c] - a[c]) * t;\n}\n\nconst SKY = [\n  [0, [20, 4, 56]],\n  [0.5, [120, 16, 124]],\n  [0.84, [235, 52, 96]],\n  [1, [255, 126, 48]],\n];\nconst BLADES = [\n  [255, 200, 0],\n  [240, 0, 140],\n  [0, 180, 240],\n];\n\n// The camera on the sunset sways slowly from side to side.\nfunction pan(t) {\n  return 9 * Math.sin(t * 0.45);\n}\n\nfunction panSpeed(t) {\n  return 9 * 0.45 * Math.cos(t * 0.45);\n}\n\n// One LED of the clean video, written into out at o: shot A is a sunset over\n// a grid running towards the viewer, shot B a pinwheel spinning on dark.\nfunction source(shot, x, y, t, out, o) {\n  let r = 0;\n  let g = 0;\n  let b = 0;\n  if (shot === SHOT_A) {\n    const px = pan(t);\n    if (y \u003c HZ) {\n      const v = y / HZ;\n      let i = 0;\n      while (i \u003c SKY.length - 2 && v > SKY[i + 1][0]) i++;\n      const f = (v - SKY[i][0]) / (SKY[i + 1][0] - SKY[i][0]);\n      r = mix(SKY[i][1], SKY[i + 1][1], f, 0);\n      g = mix(SKY[i][1], SKY[i + 1][1], f, 1);\n      b = mix(SKY[i][1], SKY[i + 1][1], f, 2);\n      // The sun, cut into bands that thicken towards the horizon and slide down.\n      const sx = 32 + px;\n      const sy = HZ - 18;\n      const dx = x - sx;\n      const dy = y - sy;\n      const R = 20;\n      if (dx * dx + dy * dy \u003c R * R) {\n        const u = dy / R;\n        const band = u > -0.15 && ((u * 5 - t * 0.6) % 1 + 1) % 1 \u003c 0.15 + 0.35 * (u + 0.15);\n        if (!band) {\n          const k = (u + 1) / 2;\n          r = 255;\n          g = 236 - 180 * k;\n          b = 70 + 80 * k;\n        }\n      }\n    } else {\n      // The ground: a dark plain, a cyan grid in perspective and the sun's\n      // reflection broken into ripples under it.\n      const d = y - HZ + 0.5;\n      const z = 60 / d;\n      const zl = z * 1.5 + t * 1.2;\n      const fz = zl - Math.floor(zl);\n      const wz = 0.9 * (60 / (d * d)) * 1.5 + 0.03;\n      const wx = ((x - 32 - px) * z) / 60;\n      const fx = wx * 1.4 - Math.floor(wx * 1.4);\n      const wl = (0.6 * z) / 60 + 0.02;\n      // Cross lines fade into the haze near the horizon; the lines running\n      // away from the viewer reach it.\n      const across = Math.max(0, 1 - Math.min(fz, 1 - fz) / wz) * smooth(5, 22, d);\n      const away = Math.max(0, 1 - Math.min(fx, 1 - fx) / (wl * 1.4)) * smooth(0, 4, d);\n      const L = Math.max(across, away);\n      const glow = Math.max(0, 1 - d / 14);\n      r = 10 + 110 * glow;\n      g = 2 + 14 * glow;\n      b = 26 + 64 * glow;\n      const half = 15 * (1 - d / 50);\n      if (half > 0 && Math.abs(x - 32 - px) \u003c half && Math.sin(d * 1.3 - t * 3 + Math.sin(x * 0.5) * 0.6) > 0.1 - 0.5 * (d / 50)) {\n        const f = 1 - d / 50;\n        r = 255 * f + r * (1 - f);\n        g = 110 * f + g * (1 - f);\n        b = 70 * f + b * (1 - f);\n      }\n      r = r * (1 - L) + 30 * L;\n      g = g * (1 - L) + 200 * L;\n      b = b * (1 - L) + 240 * L;\n    }\n  } else {\n    const dx = x - 32;\n    const dy = y - 64;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    r = 12;\n    g = 8;\n    b = 40;\n    // Rings round the pinwheel, far apart and faint.\n    if (((d / 9) % 1) \u003c 0.18) {\n      r = 50;\n      g = 16;\n      b = 100;\n    }\n    if (d \u003c 26) {\n      const a = Math.atan2(dy, dx) - t * 0.9;\n      const s = Math.floor(((a / (Math.PI * 2)) % 1 + 1) % 1 * 6);\n      const twist = d \u003c 6 ? -1 : s % 3;\n      if (twist >= 0) {\n        const c = BLADES[twist];\n        r = c[0];\n        g = c[1];\n        b = c[2];\n      } else {\n        r = 250;\n        g = 250;\n        b = 240;\n      }\n    }\n  }\n  out[o] = r;\n  out[o + 1] = g;\n  out[o + 2] = b;\n}\n\n// The video's own motion at (x, y), in LEDs a second: what the encoder found\n// when it still had keyframes to compare against.\nfunction motion(shot, x, y, t, out) {\n  if (shot === SHOT_A) {\n    const pv = panSpeed(t);\n    if (y \u003c HZ) {\n      out[0] = pv;\n      // Inside the sun the bands slide down. The sky round it is one smooth\n      // ramp, where the encoder's search finds nothing to hold on to.\n      const dx = x - 32 - pan(t);\n      const dy = y - (HZ - 18);\n      const sun = dx * dx + dy * dy \u003c 400;\n      out[1] = sun && dy > -3 ? 2.4 : 0;\n      out[2] = sun ? 0 : 1;\n    } else {\n      // Ground running at the camera: everything below the horizon spreads\n      // away from the vanishing point, faster the nearer it is, and the\n      // near ground swings further with the camera than the far.\n      const d = y - HZ + 0.5;\n      const k = (d * 1.2) / 60 / 1.5;\n      out[0] = pv * (1 + d / 20) + (x - 32 - pan(t)) * k;\n      out[1] = d * k;\n      out[2] = 0;\n    }\n  } else {\n    const dx = x - 32;\n    const dy = y - 64;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    // Only the pinwheel turns; the dark round it stands still.\n    const w = d \u003c 27 ? 0.9 : 0;\n    out[0] = -dy * w;\n    out[1] = dx * w;\n    out[2] = 0;\n  }\n}\n\nexport function setup(params) {\n  params.buf = new Float32Array(N * 3);\n  params.old = new Float32Array(N * 3);\n  params.ax = new Float32Array(MAXB);\n  params.ay = new Float32Array(MAXB);\n  params.v = new Float32Array(3);\n  params.src = 0;\n  params.shot = SHOT_A;\n  params.cut = 3.5;\n  params.nextKey = 2.0;\n  params.size = 0;\n  params.keys = 0;\n  params.started = false;\n  params.m = new Float32Array(9);\n  params.hue = -1;\n}\n\n// Writes the clean video over a block, or over every block for a whole keyframe.\nfunction paintBlock(P, x0, y0, bs) {\n  const buf = P.buf;\n  const x1 = Math.min(W, x0 + bs);\n  const y1 = Math.min(H, y0 + bs);\n  for (let y = y0; y \u003c y1; y++) for (let x = x0; x \u003c x1; x++) source(P.shot, x + 0.5, y + 0.5, P.src, buf, (y * W + x) * 3);\n}\n\nfunction keyframe(P, whole) {\n  const bs = P.size;\n  const rows = Math.ceil(H / bs);\n  const cols = Math.ceil(W / bs);\n  P.keys++;\n  // A keyframe that arrives only partly: a band of slices comes through\n  // with a few blocks missing, and a scatter of single blocks elsewhere.\n  const r0 = Math.floor(hash(P.keys, 1) * rows * 0.7);\n  const r1 = Math.min(rows, r0 + Math.max(2, Math.floor(rows * (0.2 + 0.25 * hash(P.keys, 2)))));\n  for (let by = 0; by \u003c rows; by++)\n    for (let bx = 0; bx \u003c cols; bx++) {\n      const inBand = by >= r0 && by \u003c r1;\n      const p = hash(P.keys * 977 + bx, by);\n      if (whole || (inBand && p \u003c 0.85) || (!inBand && p \u003c 0.04)) {\n        paintBlock(P, bx * bs, by * bs, bs);\n        P.ax[by * cols + bx] = 0;\n        P.ay[by * cols + bx] = 0;\n      }\n    }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = Math.min(dt, 0.1);\n  const P = params;\n  const mosh = Math.max(0, Math.min(1, k[3]));\n  const bs = Math.max(8, Math.min(16, Math.round(k[2])));\n  const step = dt * Math.max(0.05, k[1]) * 0.5;\n  if (bs !== P.size) {\n    P.size = bs;\n    P.ax.fill(0);\n    P.ay.fill(0);\n  }\n  if (!P.started) {\n    P.started = true;\n    keyframe(P, true);\n  }\n  P.src += step;\n  // The video cuts between its two shots, and the encoder's keyframe at the\n  // cut is lost with the rest: the new shot's motion moves the old picture.\n  if (P.src >= P.cut) {\n    P.shot = P.shot === SHOT_A ? SHOT_B : SHOT_A;\n    const len = P.shot === SHOT_A ? 6 : 4.5;\n    P.cut = P.src + len;\n    // The new shot's motion has most of the shot to work on the old picture\n    // before a slice of the new one gets through.\n    P.nextKey = Math.max(P.nextKey, P.src + len * 0.6);\n  }\n  if (input.btnPressed && input.btnPressed[0]) keyframe(P, true);\n  else if (P.src >= P.nextKey) {\n    keyframe(P, false);\n    P.nextKey = P.src + 2 + 10 * mosh * mosh;\n  }\n\n  // Each block moves as one, by its own motion vector, rounded to whole\n  // LEDs; what is left over carries to the next frame.\n  const old = P.old;\n  const buf = P.buf;\n  old.set(buf);\n  const cols = Math.ceil(W / bs);\n  const rows = Math.ceil(H / bs);\n  const gain = (1 + mosh) * step;\n  const v = P.v;\n  for (let by = 0; by \u003c rows; by++)\n    for (let bx = 0; bx \u003c cols; bx++) {\n      const b = by * cols + bx;\n      const x0 = bx * bs;\n      const y0 = by * bs;\n      const x1 = Math.min(W, x0 + bs);\n      const y1 = Math.min(H, y0 + bs);\n      motion(P.shot, (x0 + x1) / 2, (y0 + y1) / 2, P.src, v);\n      // The encoder's search was never exact: each block's vector strays a\n      // little, and the stray changes every so often.\n      const e = Math.floor(P.src * 1.5 + hash(b, 7) * 3);\n      v[0] += (hash(b * 31 + e, 11) - 0.5) * NOISE * v[2];\n      v[1] += (hash(b * 31 + e, 13) - 0.5) * NOISE * v[2];\n      P.ax[b] += v[0] * gain;\n      P.ay[b] += v[1] * gain;\n      const mx = Math.trunc(P.ax[b]);\n      const my = Math.trunc(P.ay[b]);\n      if (mx === 0 && my === 0) continue;\n      P.ax[b] -= mx;\n      P.ay[b] -= my;\n      for (let y = y0; y \u003c y1; y++) {\n        // Past the frame's edge the decoder repeats the edge LEDs.\n        const sy = Math.max(0, Math.min(H - 1, y - my));\n        for (let x = x0; x \u003c x1; x++) {\n          const sx = Math.max(0, Math.min(W - 1, x - mx));\n          const o = (y * W + x) * 3;\n          const s = (sy * W + sx) * 3;\n          buf[o] = old[s];\n          buf[o + 1] = old[s + 1];\n          buf[o + 2] = old[s + 2];\n        }\n      }\n    }\n\n  if (k[0] !== P.hue) {\n    // Hue turns colours round the grey axis.\n    P.hue = k[0];\n    const a = k[0] * Math.PI * 2;\n    const c = Math.cos(a);\n    const s = Math.sin(a);\n    const q = (1 - c) / 3;\n    const r3 = Math.sqrt(1 / 3) * s;\n    const m = P.m;\n    m[0] = c + q;\n    m[1] = q - r3;\n    m[2] = q + r3;\n    m[3] = q + r3;\n    m[4] = c + q;\n    m[5] = q - r3;\n    m[6] = q - r3;\n    m[7] = q + r3;\n    m[8] = c + q;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const m = params.m;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      const r = buf[o];\n      const g = buf[o + 1];\n      const b = buf[o + 2];\n      display.setPixel(\n        x,\n        y,\n        Math.max(0, Math.min(255, r * m[0] + g * m[1] + b * m[2])),\n        Math.max(0, Math.min(255, r * m[3] + g * m[4] + b * m[5])),\n        Math.max(0, Math.min(255, r * m[6] + g * m[7] + b * m[8])),\n      );\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Block=8..16, Mosh=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every colour of the video round the colour wheel, opening on a magenta and orange sunset over a cyan grid."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the video runs, from a tenth of its speed to one and a half times, opening at full speed, where the ground nearest the viewer streams down about 45 LEDs a second."},{"name":"Block","min":8,"max":16,"about":"The codec's block size, from 8 LEDs square to 16; sizes that do not divide the panel leave cut blocks along its right and bottom edges, as a codec pads a frame."},{"name":"Mosh","min":0,"max":1,"about":"How long the decoder goes without a keyframe and how hard the motion pushes: a partial keyframe every 2 s of video at 0, every 12 s and twice the push at 1."}],"start":[0,2,8,0.06],"measures":{"motion":0.3661,"detail":0.0404,"edges":0.6611,"complexity":0.3641,"coverage":1,"colour":0.4625,"drift":0.1386},"knobResponse":[0.3092,0.1339,0.1128,0.1158]},{"slug":"day-cycle","title":"Day and Night","family":"weather","round":2,"note":"호수 위 작은 집이 하루를 지켜봐요. 해가 언덕 뒤로 지면 하늘이 노을을 지나 별과 달로 넘어가고 창에 하나씩 불이 켜져요.","idea":"A house above a lake watches one whole day go by: the sun climbs and sets behind the hills, the sky runs through dusk to stars and a moon, and the windows light up for the night.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Day and Night\n// Family:  weather\n// Idea:    A house above a lake watches one whole day go by: the sun climbs and sets behind the hills, the sky runs through dusk to stars and a moon, and the windows light up for the night.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Time=0.2..8, Clouds=0.15..1, Sun path=-1..1\n//\n// Knob 1: Season. Spring, summer, autumn and winter in turn. Summer nights have fireflies, and in winter snow falls and lies on the roof.\n// Knob 2: Time. How fast the day goes, from ten minutes a day to fifteen seconds; a day takes a minute where it starts.\n// Knob 3: Clouds. From a few small clouds to a sky that is nearly overcast.\n// Knob 4: Sun path. How high the sun climbs, from a winter sun that skims the hills to a summer one that reaches the top.\n\nconst W = 64;\nconst H = 128;\n// The sun and moon rise and set on this row, behind the hills.\nconst HORIZON = 80;\n// The far edge of the lake.\nconst LAKE = 86;\nconst TW = 128;\nconst TH = 64;\nconst STARS = 56;\nconst FLAKES = 60;\nconst FLIES = 18;\n\n// Per season: sky top, sky low, far hills, near hills, meadow, meadow shade, flowers,\n// leaves, blossom, wall, roof, lake, roof cap, trunk.\nconst SEASONS = [\n  [0x4a8ceb, 0xaad7fa, 0x6ea096, 0x4e9a5a, 0x60be46, 0x3f9634, 0xffaad2, 0x78c85a, 0xffbedc, 0xe6d7b4, 0xbe3c30, 0x3c78b4, 0xbe3c30, 0x6e4628],\n  [0x286ee6, 0x8cc8fa, 0x50867a, 0x2e7a3c, 0x34a032, 0x247826, 0xffe650, 0x2e8c2e, 0x46aa3c, 0xe6d7b4, 0xbe3c30, 0x2864b4, 0xbe3c30, 0x6e4628],\n  [0x5082d2, 0xc8d7eb, 0x8c8278, 0x8c6e3c, 0xc8a03c, 0x9c7a2a, 0xe65a1e, 0xeb7a1e, 0xffc83c, 0xe6d7b4, 0xa03228, 0x3c6496, 0xa03228, 0x5a3a22],\n  [0x6e96d2, 0xd2e1f0, 0xaab9d2, 0x8ca0b9, 0xd2dcec, 0xaebcd2, 0xffffff, 0x466e5a, 0xe6f0fa, 0xd7c8aa, 0x8c3228, 0x5a78a0, 0xf0f5ff, 0x4a3422],\n];\nconst NCOL = 14;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction lattice(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const a = hash(x0 + seed, iy) * (1 - ux) + hash(x1 + seed, iy) * ux;\n  const b = hash(x0 + seed, iy + 1) * (1 - ux) + hash(x1 + seed, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction smooth(a, b, x) {\n  const t = Math.max(0, Math.min(1, (x - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Sky colours by the sun's height, from deep night to full day: top then low, as 0xRRGGBB.\nconst SKY_E = [-1, -0.22, -0.1, -0.02, 0.06, 0.16, 0.32];\nconst SKY_TOP = [0x060a26, 0x060a26, 0x141c4c, 0x2c3a82, 0x4a64b4, 0, 0];\nconst SKY_LOW = [0x18204e, 0x18204e, 0x5a3c78, 0xd2645a, 0xff9650, 0xffc88c, 0];\n\nexport function setup(params) {\n  params.t = 0;\n  // Where the day stands when the pattern starts: late afternoon, a few seconds before the sun meets the hills.\n  params.phase = 0.625;\n  params.cloudX = 0;\n  params.pal = new Float32Array(NCOL * 3);\n  params.seasons = SEASONS.map((list) => {\n    const out = new Float32Array(NCOL * 3);\n    list.forEach((c, i) => {\n      out[i * 3] = (c >> 16) & 255;\n      out[i * 3 + 1] = (c >> 8) & 255;\n      out[i * 3 + 2] = c & 255;\n    });\n    return out;\n  });\n  params.buf = new Float32Array(W * H * 3);\n  params.rowR = new Float32Array(H);\n  params.rowG = new Float32Array(H);\n  params.rowB = new Float32Array(H);\n  params.light = new Float32Array(3);\n  params.top = new Float32Array(3);\n  params.low = new Float32Array(3);\n\n  params.far = new Int16Array(W);\n  params.mid = new Int16Array(W);\n  params.near = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    params.far[x] = Math.round(61 + 9 * noise1(x * 0.06 + 1, 3) + 4 * noise1(x * 0.17 + 7, 5));\n    params.mid[x] = Math.round(73 + 7 * noise1(x * 0.08 + 20, 9) + 2 * noise1(x * 0.3, 11));\n    // The near shore climbs to the left, where the house stands; the lake opens out to the right.\n    params.near[x] = Math.round(95 + 9 * smooth(16, 50, x) + 1.5 * noise1(x * 0.25 + 4, 13));\n  }\n  params.tex = new Float32Array(TW * TH);\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c TW; x++)\n      params.tex[y * TW + x] = lattice(x / 12.8, y / 8, TW / 12.8, 21) * 0.68 + lattice(x / 6.4, y / 4.5, TW / 6.4, 37) * 0.32;\n  params.sx = new Int16Array(STARS);\n  params.sy = new Int16Array(STARS);\n  params.sb = new Float32Array(STARS);\n  for (let i = 0; i \u003c STARS; i++) {\n    params.sx[i] = Math.floor(hash(i, 71) * W);\n    params.sy[i] = Math.floor(hash(i, 73) * 64);\n    params.sb[i] = 0.45 + 0.55 * hash(i, 79) * hash(i, 83);\n  }\n  params.fx = new Float32Array(FLAKES);\n  params.fy = new Float32Array(FLAKES);\n  params.fs = new Float32Array(FLAKES);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    params.fx[i] = Math.random() * W;\n    params.fy[i] = Math.random() * H;\n    params.fs[i] = 0.6 + Math.random() * 0.8;\n  }\n  params.gx = new Float32Array(FLIES);\n  params.gy = new Float32Array(FLIES);\n  for (let i = 0; i \u003c FLIES; i++) {\n    params.gx[i] = Math.random() * W;\n    params.gy[i] = 92 + Math.random() * 32;\n  }\n  // Flowers in the meadow, fixed, more of them nearer.\n  params.fl = new Int16Array(70 * 2);\n  for (let i = 0; i \u003c 70; i++) {\n    const x = Math.floor(hash(i, 91) * W);\n    const y = params.near[x] + 3 + Math.floor(Math.pow(hash(i, 93), 0.7) * (H - params.near[x] - 4));\n    params.fl[i * 2] = x;\n    params.fl[i * 2 + 1] = y;\n  }\n}\n\nfunction mixHex(out, a, b, u) {\n  out[0] = ((a >> 16) & 255) * (1 - u) + ((b >> 16) & 255) * u;\n  out[1] = ((a >> 8) & 255) * (1 - u) + ((b >> 8) & 255) * u;\n  out[2] = (a & 255) * (1 - u) + (b & 255) * u;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.15, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  // A day lasts 120 / Time seconds: a minute where the knob starts. The clock slows round\n  // sunrise and sunset and hurries through noon and midnight, so the colours get the time.\n  const e = Math.sin((params.phase - 0.25) * Math.PI * 2);\n  const pace = (0.55 + 0.9 * Math.abs(e)) / 1.123;\n  params.phase = (params.phase + (dt * Math.max(0.05, k[1]) * pace) / 120) % 1;\n  params.cloudX += dt * (0.9 + 0.25 * k[1]);\n  params.season = Math.max(0, Math.min(1, k[0]));\n  params.clouds = k[2];\n  params.arc = 46 + 28 * Math.max(-1, Math.min(1, k[3]));\n\n  // Season: four palettes in a row, each held a while before it turns into the next.\n  const q = params.season * 3;\n  const a = Math.min(2, Math.floor(q));\n  const m = smooth(0.2, 0.8, q - a);\n  const pa = params.seasons[a];\n  const pb = params.seasons[a + 1];\n  for (let i = 0; i \u003c NCOL * 3; i++) params.pal[i] = pa[i] * (1 - m) + pb[i] * m;\n  params.snow = smooth(0.78, 0.95, params.season);\n  // Summer nights have fireflies.\n  params.summer = Math.max(0, 1 - Math.abs(params.season - 0.33) / 0.16);\n\n  if (params.snow > 0) {\n    for (let i = 0; i \u003c FLAKES; i++) {\n      params.fy[i] += dt * 7 * params.fs[i];\n      params.fx[i] += dt * (Math.sin(params.t * 0.9 + i * 1.7) * 3 + 1.2);\n      if (params.fy[i] > H) {\n        params.fy[i] -= H + 2;\n        params.fx[i] = Math.random() * W;\n      }\n      if (params.fx[i] >= W) params.fx[i] -= W;\n    }\n  }\n  if (params.summer > 0) {\n    for (let i = 0; i \u003c FLIES; i++) {\n      params.gx[i] += dt * (noise1(params.t * 0.4 + i * 9.3, 17) - 0.5) * 8;\n      params.gy[i] += dt * (noise1(params.t * 0.35 + i * 5.1, 19) - 0.5) * 6;\n      if (params.gx[i] \u003c 0) params.gx[i] += W;\n      if (params.gx[i] >= W) params.gx[i] -= W;\n      params.gy[i] = Math.max(88, Math.min(H - 2, params.gy[i]));\n    }\n  }\n}\n\n// One soft point spread over its 2x2 neighbours, so it glides instead of hopping LED to LED.\nfunction splat(buf, x, y, r, g, b) {\n  const x0 = Math.floor(x - 0.5);\n  const y0 = Math.floor(y - 0.5);\n  const fx = x - 0.5 - x0;\n  const fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++) {\n    const yy = y0 + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    const wy = j === 0 ? 1 - fy : fy;\n    for (let i = 0; i \u003c 2; i++) {\n      const xx = x0 + i;\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = wy * (i === 0 ? 1 - fx : fx);\n      const o = (yy * W + xx) * 3;\n      buf[o] = buf[o] * (1 - w) + Math.max(buf[o], r) * w;\n      buf[o + 1] = buf[o + 1] * (1 - w) + Math.max(buf[o + 1], g) * w;\n      buf[o + 2] = buf[o + 2] * (1 - w) + Math.max(buf[o + 2], b) * w;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const pal = params.pal;\n  const p = params.phase;\n  const t = params.t;\n  // The sun's height, -1 at midnight to 1 at noon. It crosses the panel at an even pace and climbs on a sine.\n  const e = Math.sin((p - 0.25) * Math.PI * 2);\n  const dayU = (p - 0.25) / 0.5;\n  const sunX = 4 + 56 * dayU;\n  const sunY = HORIZON - e * params.arc;\n  const nightU = ((p + 0.25) % 1) / 0.5;\n  const moonX = 4 + 56 * nightU;\n  const moonY = HORIZON + e * params.arc * 0.85;\n  const cover = params.clouds;\n  // How high the sun really stands. A low arc gives a weaker, warmer day from morning to evening.\n  const el = e > 0 ? e * (0.45 + (0.55 * (params.arc - 18)) / 56) : e;\n\n  // Daylight on the land: full by day, warm as the sun gets low, moonlit blue at night.\n  const day = smooth(-0.14, 0.22, el);\n  const gold = smooth(-0.08, 0.04, el) * (1 - smooth(0.18, 0.42, el));\n  // Cloud dims the land, and so does a low sun in front of us: the near side of everything is in shade.\n  const dim = (1 - cover * 0.3) * (1 - gold * 0.22);\n  const light = params.light;\n  // The warm cast stays light: a dim orange hill reads as brown on the panel.\n  light[0] = (day * (1 + gold * 0.08) + (1 - day) * 0.3) * dim;\n  light[1] = (day * (1 - gold * 0.08) + (1 - day) * 0.34) * dim;\n  light[2] = (day * (1 - gold * 0.3) + (1 - day) * 0.58) * dim;\n\n  // Sky: the keyframe pair for this sun height, then a gradient down to the horizon.\n  let s = 0;\n  while (s \u003c SKY_E.length - 2 && el > SKY_E[s + 1]) s++;\n  const u = smooth(SKY_E[s], SKY_E[s + 1], el);\n  const top = params.top;\n  const low = params.low;\n  const topA = SKY_TOP[s] || hexOf(pal, 0);\n  const topB = SKY_TOP[s + 1] || hexOf(pal, 0);\n  const lowA = SKY_LOW[s] || hexOf(pal, 1);\n  const lowB = SKY_LOW[s + 1] || hexOf(pal, 1);\n  mixHex(top, topA, topB, u);\n  mixHex(low, lowA, lowB, u);\n  // Cloud cover greys the sky.\n  const grey = cover * cover * 0.55;\n  const avgT = (top[0] + top[1] + top[2]) / 3;\n  const avgL = (low[0] + low[1] + low[2]) / 3;\n  for (let c = 0; c \u003c 3; c++) {\n    top[c] = top[c] * (1 - grey) + avgT * grey * 0.9;\n    low[c] = low[c] * (1 - grey) + avgL * grey * 0.9;\n  }\n  for (let y = 0; y \u003c LAKE; y++) {\n    const v = Math.pow(Math.min(1, y / HORIZON), 1.6);\n    params.rowR[y] = top[0] + (low[0] - top[0]) * v;\n    params.rowG[y] = top[1] + (low[1] - top[1]) * v;\n    params.rowB[y] = top[2] + (low[2] - top[2]) * v;\n  }\n  // The glow round a low sun, warm, spread wide along the horizon.\n  const glowK = (0.2 + 0.7 * gold) * (1 - cover * 0.6) * smooth(-0.2, 0, el);\n  for (let y = 0; y \u003c LAKE; y++) {\n    const o0 = y * W * 3;\n    const dy = (y - sunY) * 1.4;\n    const r0 = params.rowR[y];\n    const g0 = params.rowG[y];\n    const b0 = params.rowB[y];\n    const c = 140 * glowK;\n    const d0 = 140 + dy * dy;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x - sunX;\n      const g = c / (d0 + dx * dx);\n      const o = o0 + x * 3;\n      // Blended toward warm rather than added, so a bright sky does not burn white round the sun.\n      buf[o] = r0 + (255 - r0) * g;\n      buf[o + 1] = g0 + (178 - g0) * g;\n      buf[o + 2] = b0 + (84 - b0) * g * 0.8;\n    }\n  }\n\n  // Stars come out as the sky darkens; a few twinkle.\n  const starVis = smooth(-0.04, -0.2, e);\n  if (starVis > 0) {\n    for (let i = 0; i \u003c STARS; i++) {\n      const x = params.sx[i];\n      const y = params.sy[i];\n      const b = starVis * params.sb[i] * (0.75 + 0.25 * Math.sin(t * (2 + i * 0.13) + i));\n      const o = (y * W + x) * 3;\n      buf[o] = Math.max(buf[o], 200 * b);\n      buf[o + 1] = Math.max(buf[o + 1], 210 * b);\n      buf[o + 2] = Math.max(buf[o + 2], 255 * b);\n    }\n  }\n\n  // The sun: a hard disc, yellow-white high up, orange as it nears the hills.\n  if (e > -0.12) {\n    const low = 1 - smooth(0.05, 0.4, el);\n    const sr = 255;\n    const sg = 238 - 88 * low;\n    const sb = 150 - 110 * low;\n    disc(buf, sunX, sunY, 3.6, sr, sg, sb);\n  }\n  // The moon: a pale crescent, with the dark side cut away by a second disc.\n  if (e \u003c 0.12) {\n    const mv = smooth(0.12, -0.05, e);\n    moon(buf, moonX, moonY, mv);\n  }\n\n  // Clouds: a baked texture drifting left to right, cut at a level set by Clouds.\n  const tex = params.tex;\n  const thr = 0.78 - 0.5 * cover;\n  const cx0 = params.cloudX;\n  const ix = Math.floor(cx0);\n  const fx = cx0 - ix;\n  const base = ((ix % TW) + TW) % TW;\n  // White by day and greyer the more of them there are, salmon while the sun is low, slate under the moon.\n  const lit = Math.max(day, gold);\n  const grey2 = 1 - cover * 0.28;\n  // A heavy sky is grey even at sunset.\n  const pink = gold * (1 - cover * 0.65);\n  const cr = 58 * (1 - lit) + (228 * grey2 * (1 - pink) + 255 * pink) * lit;\n  const cg = 62 * (1 - lit) + (230 * grey2 * (1 - pink) + 178 * pink) * lit;\n  const cbb = 96 * (1 - lit) + (236 * grey2 * (1 - pink) + 172 * pink) * lit;\n  for (let y = 2; y \u003c 62; y++) {\n    const band = smooth(2, 12, y) * (1 - smooth(44, 62, y));\n    if (band \u003c= 0) continue;\n    const row = y * TW;\n    const up = (y - 2) * TW;\n    const bandUp = smooth(2, 12, y - 2) * (1 - smooth(44, 62, y - 2));\n    for (let x = 0; x \u003c W; x++) {\n      let xa = base - x;\n      if (xa \u003c 0) xa += TW;\n      const xb = xa + 1 === TW ? 0 : xa + 1;\n      const n = (tex[row + xa] * (1 - fx) + tex[row + xb] * fx) * (0.55 + 0.45 * band);\n      const a = smooth(thr, thr + 0.07, n);\n      if (a \u003c= 0) continue;\n      // Where the cloud is thicker just above, this is its underside, and a shade darker.\n      const nUp = (tex[up + xa] * (1 - fx) + tex[up + xb] * fx) * (0.55 + 0.45 * bandUp);\n      const lift = 0.86 + 0.14 * Math.max(-1, Math.min(1, (n - nUp) * 9));\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + cr * lift * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + cg * lift * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + cbb * lift * a;\n    }\n  }\n\n  // Hills: the far ones hazed toward the sky, the near ones in their own colour. With the\n  // sun low behind them they go to a cool silhouette instead of a lit brown.\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  const back = gold * 0.7;\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = params.far[x]; y \u003c LAKE; y++) {\n      const o = (y * W + x) * 3;\n      const near = y >= params.mid[x];\n      const ci = near ? 3 : 2;\n      const haze = near ? 0.12 : 0.4 * (1 - back * 0.5);\n      const dark = near ? back * 0.75 : back;\n      buf[o] = ((pal[ci * 3] * (1 - haze) + low[0] * haze) * lr) * (1 - dark) + 46 * dark;\n      buf[o + 1] = ((pal[ci * 3 + 1] * (1 - haze) + low[1] * haze) * lg) * (1 - dark) + 50 * dark;\n      buf[o + 2] = ((pal[ci * 3 + 2] * (1 - haze) + low[2] * haze) * lb) * (1 - dark) + 84 * dark;\n    }\n  }\n\n  // The lake mirrors what is above it, darker and bluer, broken by a slow shimmer.\n  const wr = pal[33] * 0.18 * lr;\n  const wg = pal[34] * 0.18 * lg;\n  const wb = pal[35] * 0.2 * lb;\n  for (let y = LAKE; y \u003c H; y++) {\n    // Squeezed upward, so the water shows the sky over the hills as well as the hills.\n    const my = Math.round(LAKE - 1 - (y - LAKE) * 1.7);\n    if (my \u003c 0) break;\n    const wob = Math.sin(y * 1.3 + t * 1.6) * 0.6;\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= params.near[x]) continue;\n      let sx = Math.round(x + wob * Math.sin(x * 0.4 + y));\n      if (sx \u003c 0) sx = 0;\n      if (sx >= W) sx = W - 1;\n      const so = (my * W + sx) * 3;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[so] * 0.55 + wr;\n      buf[o + 1] = buf[so + 1] * 0.6 + wg;\n      buf[o + 2] = buf[so + 2] * 0.66 + wb;\n    }\n  }\n  // A path of glitter under the sun or the moon, on the water.\n  const glitSun = e > -0.02 ? (1 - smooth(0.2, 0.6, el)) * (1 - cover * 0.7) : 0;\n  const glitMoon = e \u003c -0.05 ? smooth(-0.05, -0.25, e) * 0.5 : 0;\n  const gx = glitSun > 0 ? sunX : moonX;\n  const gk = Math.max(glitSun, glitMoon);\n  if (gk > 0.02) {\n    for (let y = LAKE + 1; y \u003c 108; y++) {\n      // Each row of water holds one short dash that slides to and fro about the light's line.\n      const half = 0.8 + (y - LAKE) * 0.12 + 0.8 * Math.sin(y * 2.3 + t * 2.1);\n      const mid = gx + Math.sin(y * 3.7 + t * 1.3) * (1 + (y - LAKE) * 0.08);\n      // A weak light breaks the path into fewer dashes rather than dimmer ones.\n      if (Math.sin(y * 5.1 + t * 2.7) \u003c 1.2 - 1.6 * gk) continue;\n      for (let x = Math.max(0, Math.round(mid - half)); x \u003c= Math.min(W - 1, Math.round(mid + half)); x++) {\n        if (y >= params.near[x]) continue;\n        const o = (y * W + x) * 3;\n        // Never dimmer than about two thirds: a dim gold dash on the water reads as tan.\n        const b = 0.62 + 0.38 * gk;\n        buf[o] = Math.max(buf[o], (glitSun > 0 ? 255 : 200) * b);\n        buf[o + 1] = Math.max(buf[o + 1], (glitSun > 0 ? 226 : 210) * b);\n        buf[o + 2] = Math.max(buf[o + 2], (glitSun > 0 ? 150 : 240) * b);\n      }\n    }\n  }\n\n  // The near meadow, a shade darker toward us, with its flowers.\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = params.near[x]; y \u003c H; y++) {\n      const v = smooth(params.near[x], H, y);\n      const o = (y * W + x) * 3;\n      buf[o] = (pal[12] * (1 - v) + pal[15] * v) * lr;\n      buf[o + 1] = (pal[13] * (1 - v) + pal[16] * v) * lg;\n      buf[o + 2] = (pal[14] * (1 - v) + pal[17] * v) * lb;\n    }\n  }\n  for (let i = 0; i \u003c 70; i++) {\n    const o = (params.fl[i * 2 + 1] * W + params.fl[i * 2]) * 3;\n    buf[o] = pal[18] * lr;\n    buf[o + 1] = pal[19] * lg;\n    buf[o + 2] = pal[20] * lb;\n  }\n\n  tree(buf, pal, params, 27, light);\n  house(buf, pal, params, light, el, p);\n\n  const flies = params.summer * (1 - day);\n  if (flies > 0.02) {\n    for (let i = 0; i \u003c FLIES; i++) {\n      const blink = Math.max(0, Math.sin(t * (1.3 + i * 0.07) + i * 2.4));\n      const b = flies * blink * blink;\n      if (b \u003c 0.05) continue;\n      // Drawn past full so the point is still bright once it is shared out over four LEDs.\n      splat(buf, params.gx[i], params.gy[i], 330 * b, 400 * b, 120 * b);\n    }\n  }\n  if (params.snow > 0.02) {\n    // Snow catches whatever light there is: white by day, blue under the moon.\n    const k = params.snow;\n    for (let i = 0; i \u003c FLAKES; i++) {\n      const v = k * (0.65 + 0.35 * params.fs[i] / 1.4);\n      splat(buf, params.fx[i], params.fy[i], 250 * v * Math.min(1, lr * 1.3), 250 * v * Math.min(1, lg * 1.3), 255 * v * Math.min(1, lb * 1.3));\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction hexOf(pal, i) {\n  return (Math.round(pal[i * 3]) \u003c\u003c 16) | (Math.round(pal[i * 3 + 1]) \u003c\u003c 8) | Math.round(pal[i * 3 + 2]);\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// A disc with a one-LED soft rim, so it moves without stepping. The hills, drawn after it, hide it as it sets.\nfunction disc(buf, cx, cy, r, cr, cg, cb) {\n  const x0 = Math.max(0, Math.floor(cx - r - 1));\n  const x1 = Math.min(W - 1, Math.ceil(cx + r + 1));\n  const y0 = Math.max(0, Math.floor(cy - r - 1));\n  const y1 = Math.min(HORIZON + 2, Math.ceil(cy + r + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - cy;\n      const a = Math.max(0, Math.min(1, r - Math.sqrt(px * px + py * py) + 0.5));\n      if (a \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + cr * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + cg * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + cb * a;\n    }\n}\n\nfunction moon(buf, cx, cy, k) {\n  const r = 3.2;\n  const x0 = Math.max(0, Math.floor(cx - r - 1));\n  const x1 = Math.min(W - 1, Math.ceil(cx + r + 1));\n  const y0 = Math.max(0, Math.floor(cy - r - 1));\n  const y1 = Math.min(HORIZON + 2, Math.ceil(cy + r + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - cy;\n      const d = Math.sqrt(px * px + py * py);\n      const cut = Math.sqrt((px + 2.4) * (px + 2.4) + (py - 1) * (py - 1));\n      const a = Math.max(0, Math.min(1, r - d + 0.5)) * Math.max(0, Math.min(1, cut - r + 0.5)) * k;\n      if (a \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + 240 * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + 236 * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + 205 * a;\n    }\n}\n\nfunction tree(buf, pal, params, tx, light) {\n  const base = params.near[tx] + 1;\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  for (let y = base - 7; y \u003c base; y++) {\n    put(buf, tx, y, pal[39] * lr, pal[40] * lg, pal[41] * lb);\n    put(buf, tx + 1, y, pal[39] * lr * 0.8, pal[40] * lg * 0.8, pal[41] * lb * 0.8);\n  }\n  const cy = base - 12;\n  for (let y = cy - 6; y \u003c= cy + 5; y++)\n    for (let x = tx - 6; x \u003c= tx + 7; x++) {\n      const dx = (x - tx - 0.5) / 6.2;\n      const dy = (y - cy) / 5.6;\n      const edge = 0.12 * Math.sin(x * 2.1 + y * 1.3);\n      if (dx * dx + dy * dy > 1 + edge) continue;\n      // The side away from the light is a shade darker, and the crown is speckled with blossom or fruit.\n      const shade = 0.78 + 0.22 * smooth(1, -1, dx + dy);\n      const dot = hash(x * 7 + 3, y * 5 + 1) \u003c 0.18;\n      const c = dot ? 24 : 21;\n      put(buf, x, y, pal[c] * shade * lr, pal[c + 1] * shade * lg, pal[c + 2] * shade * lb);\n    }\n}\n\nfunction house(buf, pal, params, light, e, p) {\n  const hx = 5;\n  const g = params.near[hx + 5] + 1;\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  const snow = params.snow;\n  // Walls.\n  for (let y = g - 7; y \u003c g; y++)\n    for (let x = hx; x \u003c hx + 11; x++) {\n      const side = x >= hx + 8 ? 0.82 : 1;\n      put(buf, x, y, pal[27] * lr * side, pal[28] * lg * side, pal[29] * lb * side);\n    }\n  // Roof: a triangle a little wider than the walls, with snow along its edge in winter.\n  for (let r = 0; r \u003c 7; r++) {\n    const y = g - 8 - r;\n    const half = 6.5 - r;\n    for (let x = Math.ceil(hx + 5 - half); x \u003c= Math.floor(hx + 5 + half); x++) {\n      const rim = r === 6 || Math.abs(x - (hx + 5)) >= half - 1;\n      const cap = rim ? snow : snow * 0.35;\n      const ri = pal[30] * (1 - cap) + pal[36] * cap;\n      const gi = pal[31] * (1 - cap) + pal[37] * cap;\n      const bi = pal[32] * (1 - cap) + pal[38] * cap;\n      put(buf, x, y, ri * lr, gi * lg, bi * lb);\n    }\n  }\n  // Chimney.\n  for (let y = g - 14; y \u003c g - 10; y++) put(buf, hx + 8, y, 120 * lr, 70 * lg, 60 * lb);\n  // Door.\n  for (let y = g - 4; y \u003c g; y++) put(buf, hx + 5, y, pal[39] * lr, pal[40] * lg, pal[41] * lb);\n  // Windows: dark glass by day; one by one they light up at dusk, and one goes out after midnight.\n  const night = p > 0.5 ? p - 1 : p;\n  for (let i = 0; i \u003c 2; i++) {\n    const wx = hx + (i === 0 ? 2 : 7);\n    const at = i === 0 ? 0.05 : 0;\n    let on = smooth(at + 0.03, at - 0.03, e);\n    // The left window goes dark from about one in the morning until five.\n    if (i === 0 && night > 0.04 && night \u003c 0.2) on = 0;\n    const wr = 50 * lr * (1 - on) + 255 * on;\n    const wg = 70 * lg * (1 - on) + 196 * on;\n    const wb = 90 * lb * (1 - on) + 90 * on;\n    put(buf, wx, g - 5, wr, wg, wb);\n    put(buf, wx + 1, g - 5, wr, wg, wb);\n    put(buf, wx, g - 4, wr, wg, wb);\n    put(buf, wx + 1, g - 4, wr, wg, wb);\n  }\n}\n","layer":{"id":"layer-day-cycle","type":"code","name":"day-cycle","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Day and Night\n// Family:  weather\n// Idea:    A house above a lake watches one whole day go by: the sun climbs and sets behind the hills, the sky runs through dusk to stars and a moon, and the windows light up for the night.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Season=0..1, Time=0.2..8, Clouds=0.15..1, Sun path=-1..1\n//\n// Knob 1: Season. Spring, summer, autumn and winter in turn. Summer nights have fireflies, and in winter snow falls and lies on the roof.\n// Knob 2: Time. How fast the day goes, from ten minutes a day to fifteen seconds; a day takes a minute where it starts.\n// Knob 3: Clouds. From a few small clouds to a sky that is nearly overcast.\n// Knob 4: Sun path. How high the sun climbs, from a winter sun that skims the hills to a summer one that reaches the top.\n\nconst W = 64;\nconst H = 128;\n// The sun and moon rise and set on this row, behind the hills.\nconst HORIZON = 80;\n// The far edge of the lake.\nconst LAKE = 86;\nconst TW = 128;\nconst TH = 64;\nconst STARS = 56;\nconst FLAKES = 60;\nconst FLIES = 18;\n\n// Per season: sky top, sky low, far hills, near hills, meadow, meadow shade, flowers,\n// leaves, blossom, wall, roof, lake, roof cap, trunk.\nconst SEASONS = [\n  [0x4a8ceb, 0xaad7fa, 0x6ea096, 0x4e9a5a, 0x60be46, 0x3f9634, 0xffaad2, 0x78c85a, 0xffbedc, 0xe6d7b4, 0xbe3c30, 0x3c78b4, 0xbe3c30, 0x6e4628],\n  [0x286ee6, 0x8cc8fa, 0x50867a, 0x2e7a3c, 0x34a032, 0x247826, 0xffe650, 0x2e8c2e, 0x46aa3c, 0xe6d7b4, 0xbe3c30, 0x2864b4, 0xbe3c30, 0x6e4628],\n  [0x5082d2, 0xc8d7eb, 0x8c8278, 0x8c6e3c, 0xc8a03c, 0x9c7a2a, 0xe65a1e, 0xeb7a1e, 0xffc83c, 0xe6d7b4, 0xa03228, 0x3c6496, 0xa03228, 0x5a3a22],\n  [0x6e96d2, 0xd2e1f0, 0xaab9d2, 0x8ca0b9, 0xd2dcec, 0xaebcd2, 0xffffff, 0x466e5a, 0xe6f0fa, 0xd7c8aa, 0x8c3228, 0x5a78a0, 0xf0f5ff, 0x4a3422],\n];\nconst NCOL = 14;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction lattice(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const a = hash(x0 + seed, iy) * (1 - ux) + hash(x1 + seed, iy) * ux;\n  const b = hash(x0 + seed, iy + 1) * (1 - ux) + hash(x1 + seed, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction smooth(a, b, x) {\n  const t = Math.max(0, Math.min(1, (x - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Sky colours by the sun's height, from deep night to full day: top then low, as 0xRRGGBB.\nconst SKY_E = [-1, -0.22, -0.1, -0.02, 0.06, 0.16, 0.32];\nconst SKY_TOP = [0x060a26, 0x060a26, 0x141c4c, 0x2c3a82, 0x4a64b4, 0, 0];\nconst SKY_LOW = [0x18204e, 0x18204e, 0x5a3c78, 0xd2645a, 0xff9650, 0xffc88c, 0];\n\nexport function setup(params) {\n  params.t = 0;\n  // Where the day stands when the pattern starts: late afternoon, a few seconds before the sun meets the hills.\n  params.phase = 0.625;\n  params.cloudX = 0;\n  params.pal = new Float32Array(NCOL * 3);\n  params.seasons = SEASONS.map((list) => {\n    const out = new Float32Array(NCOL * 3);\n    list.forEach((c, i) => {\n      out[i * 3] = (c >> 16) & 255;\n      out[i * 3 + 1] = (c >> 8) & 255;\n      out[i * 3 + 2] = c & 255;\n    });\n    return out;\n  });\n  params.buf = new Float32Array(W * H * 3);\n  params.rowR = new Float32Array(H);\n  params.rowG = new Float32Array(H);\n  params.rowB = new Float32Array(H);\n  params.light = new Float32Array(3);\n  params.top = new Float32Array(3);\n  params.low = new Float32Array(3);\n\n  params.far = new Int16Array(W);\n  params.mid = new Int16Array(W);\n  params.near = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    params.far[x] = Math.round(61 + 9 * noise1(x * 0.06 + 1, 3) + 4 * noise1(x * 0.17 + 7, 5));\n    params.mid[x] = Math.round(73 + 7 * noise1(x * 0.08 + 20, 9) + 2 * noise1(x * 0.3, 11));\n    // The near shore climbs to the left, where the house stands; the lake opens out to the right.\n    params.near[x] = Math.round(95 + 9 * smooth(16, 50, x) + 1.5 * noise1(x * 0.25 + 4, 13));\n  }\n  params.tex = new Float32Array(TW * TH);\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c TW; x++)\n      params.tex[y * TW + x] = lattice(x / 12.8, y / 8, TW / 12.8, 21) * 0.68 + lattice(x / 6.4, y / 4.5, TW / 6.4, 37) * 0.32;\n  params.sx = new Int16Array(STARS);\n  params.sy = new Int16Array(STARS);\n  params.sb = new Float32Array(STARS);\n  for (let i = 0; i \u003c STARS; i++) {\n    params.sx[i] = Math.floor(hash(i, 71) * W);\n    params.sy[i] = Math.floor(hash(i, 73) * 64);\n    params.sb[i] = 0.45 + 0.55 * hash(i, 79) * hash(i, 83);\n  }\n  params.fx = new Float32Array(FLAKES);\n  params.fy = new Float32Array(FLAKES);\n  params.fs = new Float32Array(FLAKES);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    params.fx[i] = Math.random() * W;\n    params.fy[i] = Math.random() * H;\n    params.fs[i] = 0.6 + Math.random() * 0.8;\n  }\n  params.gx = new Float32Array(FLIES);\n  params.gy = new Float32Array(FLIES);\n  for (let i = 0; i \u003c FLIES; i++) {\n    params.gx[i] = Math.random() * W;\n    params.gy[i] = 92 + Math.random() * 32;\n  }\n  // Flowers in the meadow, fixed, more of them nearer.\n  params.fl = new Int16Array(70 * 2);\n  for (let i = 0; i \u003c 70; i++) {\n    const x = Math.floor(hash(i, 91) * W);\n    const y = params.near[x] + 3 + Math.floor(Math.pow(hash(i, 93), 0.7) * (H - params.near[x] - 4));\n    params.fl[i * 2] = x;\n    params.fl[i * 2 + 1] = y;\n  }\n}\n\nfunction mixHex(out, a, b, u) {\n  out[0] = ((a >> 16) & 255) * (1 - u) + ((b >> 16) & 255) * u;\n  out[1] = ((a >> 8) & 255) * (1 - u) + ((b >> 8) & 255) * u;\n  out[2] = (a & 255) * (1 - u) + (b & 255) * u;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.15, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  // A day lasts 120 / Time seconds: a minute where the knob starts. The clock slows round\n  // sunrise and sunset and hurries through noon and midnight, so the colours get the time.\n  const e = Math.sin((params.phase - 0.25) * Math.PI * 2);\n  const pace = (0.55 + 0.9 * Math.abs(e)) / 1.123;\n  params.phase = (params.phase + (dt * Math.max(0.05, k[1]) * pace) / 120) % 1;\n  params.cloudX += dt * (0.9 + 0.25 * k[1]);\n  params.season = Math.max(0, Math.min(1, k[0]));\n  params.clouds = k[2];\n  params.arc = 46 + 28 * Math.max(-1, Math.min(1, k[3]));\n\n  // Season: four palettes in a row, each held a while before it turns into the next.\n  const q = params.season * 3;\n  const a = Math.min(2, Math.floor(q));\n  const m = smooth(0.2, 0.8, q - a);\n  const pa = params.seasons[a];\n  const pb = params.seasons[a + 1];\n  for (let i = 0; i \u003c NCOL * 3; i++) params.pal[i] = pa[i] * (1 - m) + pb[i] * m;\n  params.snow = smooth(0.78, 0.95, params.season);\n  // Summer nights have fireflies.\n  params.summer = Math.max(0, 1 - Math.abs(params.season - 0.33) / 0.16);\n\n  if (params.snow > 0) {\n    for (let i = 0; i \u003c FLAKES; i++) {\n      params.fy[i] += dt * 7 * params.fs[i];\n      params.fx[i] += dt * (Math.sin(params.t * 0.9 + i * 1.7) * 3 + 1.2);\n      if (params.fy[i] > H) {\n        params.fy[i] -= H + 2;\n        params.fx[i] = Math.random() * W;\n      }\n      if (params.fx[i] >= W) params.fx[i] -= W;\n    }\n  }\n  if (params.summer > 0) {\n    for (let i = 0; i \u003c FLIES; i++) {\n      params.gx[i] += dt * (noise1(params.t * 0.4 + i * 9.3, 17) - 0.5) * 8;\n      params.gy[i] += dt * (noise1(params.t * 0.35 + i * 5.1, 19) - 0.5) * 6;\n      if (params.gx[i] \u003c 0) params.gx[i] += W;\n      if (params.gx[i] >= W) params.gx[i] -= W;\n      params.gy[i] = Math.max(88, Math.min(H - 2, params.gy[i]));\n    }\n  }\n}\n\n// One soft point spread over its 2x2 neighbours, so it glides instead of hopping LED to LED.\nfunction splat(buf, x, y, r, g, b) {\n  const x0 = Math.floor(x - 0.5);\n  const y0 = Math.floor(y - 0.5);\n  const fx = x - 0.5 - x0;\n  const fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++) {\n    const yy = y0 + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    const wy = j === 0 ? 1 - fy : fy;\n    for (let i = 0; i \u003c 2; i++) {\n      const xx = x0 + i;\n      if (xx \u003c 0 || xx >= W) continue;\n      const w = wy * (i === 0 ? 1 - fx : fx);\n      const o = (yy * W + xx) * 3;\n      buf[o] = buf[o] * (1 - w) + Math.max(buf[o], r) * w;\n      buf[o + 1] = buf[o + 1] * (1 - w) + Math.max(buf[o + 1], g) * w;\n      buf[o + 2] = buf[o + 2] * (1 - w) + Math.max(buf[o + 2], b) * w;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const pal = params.pal;\n  const p = params.phase;\n  const t = params.t;\n  // The sun's height, -1 at midnight to 1 at noon. It crosses the panel at an even pace and climbs on a sine.\n  const e = Math.sin((p - 0.25) * Math.PI * 2);\n  const dayU = (p - 0.25) / 0.5;\n  const sunX = 4 + 56 * dayU;\n  const sunY = HORIZON - e * params.arc;\n  const nightU = ((p + 0.25) % 1) / 0.5;\n  const moonX = 4 + 56 * nightU;\n  const moonY = HORIZON + e * params.arc * 0.85;\n  const cover = params.clouds;\n  // How high the sun really stands. A low arc gives a weaker, warmer day from morning to evening.\n  const el = e > 0 ? e * (0.45 + (0.55 * (params.arc - 18)) / 56) : e;\n\n  // Daylight on the land: full by day, warm as the sun gets low, moonlit blue at night.\n  const day = smooth(-0.14, 0.22, el);\n  const gold = smooth(-0.08, 0.04, el) * (1 - smooth(0.18, 0.42, el));\n  // Cloud dims the land, and so does a low sun in front of us: the near side of everything is in shade.\n  const dim = (1 - cover * 0.3) * (1 - gold * 0.22);\n  const light = params.light;\n  // The warm cast stays light: a dim orange hill reads as brown on the panel.\n  light[0] = (day * (1 + gold * 0.08) + (1 - day) * 0.3) * dim;\n  light[1] = (day * (1 - gold * 0.08) + (1 - day) * 0.34) * dim;\n  light[2] = (day * (1 - gold * 0.3) + (1 - day) * 0.58) * dim;\n\n  // Sky: the keyframe pair for this sun height, then a gradient down to the horizon.\n  let s = 0;\n  while (s \u003c SKY_E.length - 2 && el > SKY_E[s + 1]) s++;\n  const u = smooth(SKY_E[s], SKY_E[s + 1], el);\n  const top = params.top;\n  const low = params.low;\n  const topA = SKY_TOP[s] || hexOf(pal, 0);\n  const topB = SKY_TOP[s + 1] || hexOf(pal, 0);\n  const lowA = SKY_LOW[s] || hexOf(pal, 1);\n  const lowB = SKY_LOW[s + 1] || hexOf(pal, 1);\n  mixHex(top, topA, topB, u);\n  mixHex(low, lowA, lowB, u);\n  // Cloud cover greys the sky.\n  const grey = cover * cover * 0.55;\n  const avgT = (top[0] + top[1] + top[2]) / 3;\n  const avgL = (low[0] + low[1] + low[2]) / 3;\n  for (let c = 0; c \u003c 3; c++) {\n    top[c] = top[c] * (1 - grey) + avgT * grey * 0.9;\n    low[c] = low[c] * (1 - grey) + avgL * grey * 0.9;\n  }\n  for (let y = 0; y \u003c LAKE; y++) {\n    const v = Math.pow(Math.min(1, y / HORIZON), 1.6);\n    params.rowR[y] = top[0] + (low[0] - top[0]) * v;\n    params.rowG[y] = top[1] + (low[1] - top[1]) * v;\n    params.rowB[y] = top[2] + (low[2] - top[2]) * v;\n  }\n  // The glow round a low sun, warm, spread wide along the horizon.\n  const glowK = (0.2 + 0.7 * gold) * (1 - cover * 0.6) * smooth(-0.2, 0, el);\n  for (let y = 0; y \u003c LAKE; y++) {\n    const o0 = y * W * 3;\n    const dy = (y - sunY) * 1.4;\n    const r0 = params.rowR[y];\n    const g0 = params.rowG[y];\n    const b0 = params.rowB[y];\n    const c = 140 * glowK;\n    const d0 = 140 + dy * dy;\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x - sunX;\n      const g = c / (d0 + dx * dx);\n      const o = o0 + x * 3;\n      // Blended toward warm rather than added, so a bright sky does not burn white round the sun.\n      buf[o] = r0 + (255 - r0) * g;\n      buf[o + 1] = g0 + (178 - g0) * g;\n      buf[o + 2] = b0 + (84 - b0) * g * 0.8;\n    }\n  }\n\n  // Stars come out as the sky darkens; a few twinkle.\n  const starVis = smooth(-0.04, -0.2, e);\n  if (starVis > 0) {\n    for (let i = 0; i \u003c STARS; i++) {\n      const x = params.sx[i];\n      const y = params.sy[i];\n      const b = starVis * params.sb[i] * (0.75 + 0.25 * Math.sin(t * (2 + i * 0.13) + i));\n      const o = (y * W + x) * 3;\n      buf[o] = Math.max(buf[o], 200 * b);\n      buf[o + 1] = Math.max(buf[o + 1], 210 * b);\n      buf[o + 2] = Math.max(buf[o + 2], 255 * b);\n    }\n  }\n\n  // The sun: a hard disc, yellow-white high up, orange as it nears the hills.\n  if (e > -0.12) {\n    const low = 1 - smooth(0.05, 0.4, el);\n    const sr = 255;\n    const sg = 238 - 88 * low;\n    const sb = 150 - 110 * low;\n    disc(buf, sunX, sunY, 3.6, sr, sg, sb);\n  }\n  // The moon: a pale crescent, with the dark side cut away by a second disc.\n  if (e \u003c 0.12) {\n    const mv = smooth(0.12, -0.05, e);\n    moon(buf, moonX, moonY, mv);\n  }\n\n  // Clouds: a baked texture drifting left to right, cut at a level set by Clouds.\n  const tex = params.tex;\n  const thr = 0.78 - 0.5 * cover;\n  const cx0 = params.cloudX;\n  const ix = Math.floor(cx0);\n  const fx = cx0 - ix;\n  const base = ((ix % TW) + TW) % TW;\n  // White by day and greyer the more of them there are, salmon while the sun is low, slate under the moon.\n  const lit = Math.max(day, gold);\n  const grey2 = 1 - cover * 0.28;\n  // A heavy sky is grey even at sunset.\n  const pink = gold * (1 - cover * 0.65);\n  const cr = 58 * (1 - lit) + (228 * grey2 * (1 - pink) + 255 * pink) * lit;\n  const cg = 62 * (1 - lit) + (230 * grey2 * (1 - pink) + 178 * pink) * lit;\n  const cbb = 96 * (1 - lit) + (236 * grey2 * (1 - pink) + 172 * pink) * lit;\n  for (let y = 2; y \u003c 62; y++) {\n    const band = smooth(2, 12, y) * (1 - smooth(44, 62, y));\n    if (band \u003c= 0) continue;\n    const row = y * TW;\n    const up = (y - 2) * TW;\n    const bandUp = smooth(2, 12, y - 2) * (1 - smooth(44, 62, y - 2));\n    for (let x = 0; x \u003c W; x++) {\n      let xa = base - x;\n      if (xa \u003c 0) xa += TW;\n      const xb = xa + 1 === TW ? 0 : xa + 1;\n      const n = (tex[row + xa] * (1 - fx) + tex[row + xb] * fx) * (0.55 + 0.45 * band);\n      const a = smooth(thr, thr + 0.07, n);\n      if (a \u003c= 0) continue;\n      // Where the cloud is thicker just above, this is its underside, and a shade darker.\n      const nUp = (tex[up + xa] * (1 - fx) + tex[up + xb] * fx) * (0.55 + 0.45 * bandUp);\n      const lift = 0.86 + 0.14 * Math.max(-1, Math.min(1, (n - nUp) * 9));\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + cr * lift * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + cg * lift * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + cbb * lift * a;\n    }\n  }\n\n  // Hills: the far ones hazed toward the sky, the near ones in their own colour. With the\n  // sun low behind them they go to a cool silhouette instead of a lit brown.\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  const back = gold * 0.7;\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = params.far[x]; y \u003c LAKE; y++) {\n      const o = (y * W + x) * 3;\n      const near = y >= params.mid[x];\n      const ci = near ? 3 : 2;\n      const haze = near ? 0.12 : 0.4 * (1 - back * 0.5);\n      const dark = near ? back * 0.75 : back;\n      buf[o] = ((pal[ci * 3] * (1 - haze) + low[0] * haze) * lr) * (1 - dark) + 46 * dark;\n      buf[o + 1] = ((pal[ci * 3 + 1] * (1 - haze) + low[1] * haze) * lg) * (1 - dark) + 50 * dark;\n      buf[o + 2] = ((pal[ci * 3 + 2] * (1 - haze) + low[2] * haze) * lb) * (1 - dark) + 84 * dark;\n    }\n  }\n\n  // The lake mirrors what is above it, darker and bluer, broken by a slow shimmer.\n  const wr = pal[33] * 0.18 * lr;\n  const wg = pal[34] * 0.18 * lg;\n  const wb = pal[35] * 0.2 * lb;\n  for (let y = LAKE; y \u003c H; y++) {\n    // Squeezed upward, so the water shows the sky over the hills as well as the hills.\n    const my = Math.round(LAKE - 1 - (y - LAKE) * 1.7);\n    if (my \u003c 0) break;\n    const wob = Math.sin(y * 1.3 + t * 1.6) * 0.6;\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= params.near[x]) continue;\n      let sx = Math.round(x + wob * Math.sin(x * 0.4 + y));\n      if (sx \u003c 0) sx = 0;\n      if (sx >= W) sx = W - 1;\n      const so = (my * W + sx) * 3;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[so] * 0.55 + wr;\n      buf[o + 1] = buf[so + 1] * 0.6 + wg;\n      buf[o + 2] = buf[so + 2] * 0.66 + wb;\n    }\n  }\n  // A path of glitter under the sun or the moon, on the water.\n  const glitSun = e > -0.02 ? (1 - smooth(0.2, 0.6, el)) * (1 - cover * 0.7) : 0;\n  const glitMoon = e \u003c -0.05 ? smooth(-0.05, -0.25, e) * 0.5 : 0;\n  const gx = glitSun > 0 ? sunX : moonX;\n  const gk = Math.max(glitSun, glitMoon);\n  if (gk > 0.02) {\n    for (let y = LAKE + 1; y \u003c 108; y++) {\n      // Each row of water holds one short dash that slides to and fro about the light's line.\n      const half = 0.8 + (y - LAKE) * 0.12 + 0.8 * Math.sin(y * 2.3 + t * 2.1);\n      const mid = gx + Math.sin(y * 3.7 + t * 1.3) * (1 + (y - LAKE) * 0.08);\n      // A weak light breaks the path into fewer dashes rather than dimmer ones.\n      if (Math.sin(y * 5.1 + t * 2.7) \u003c 1.2 - 1.6 * gk) continue;\n      for (let x = Math.max(0, Math.round(mid - half)); x \u003c= Math.min(W - 1, Math.round(mid + half)); x++) {\n        if (y >= params.near[x]) continue;\n        const o = (y * W + x) * 3;\n        // Never dimmer than about two thirds: a dim gold dash on the water reads as tan.\n        const b = 0.62 + 0.38 * gk;\n        buf[o] = Math.max(buf[o], (glitSun > 0 ? 255 : 200) * b);\n        buf[o + 1] = Math.max(buf[o + 1], (glitSun > 0 ? 226 : 210) * b);\n        buf[o + 2] = Math.max(buf[o + 2], (glitSun > 0 ? 150 : 240) * b);\n      }\n    }\n  }\n\n  // The near meadow, a shade darker toward us, with its flowers.\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = params.near[x]; y \u003c H; y++) {\n      const v = smooth(params.near[x], H, y);\n      const o = (y * W + x) * 3;\n      buf[o] = (pal[12] * (1 - v) + pal[15] * v) * lr;\n      buf[o + 1] = (pal[13] * (1 - v) + pal[16] * v) * lg;\n      buf[o + 2] = (pal[14] * (1 - v) + pal[17] * v) * lb;\n    }\n  }\n  for (let i = 0; i \u003c 70; i++) {\n    const o = (params.fl[i * 2 + 1] * W + params.fl[i * 2]) * 3;\n    buf[o] = pal[18] * lr;\n    buf[o + 1] = pal[19] * lg;\n    buf[o + 2] = pal[20] * lb;\n  }\n\n  tree(buf, pal, params, 27, light);\n  house(buf, pal, params, light, el, p);\n\n  const flies = params.summer * (1 - day);\n  if (flies > 0.02) {\n    for (let i = 0; i \u003c FLIES; i++) {\n      const blink = Math.max(0, Math.sin(t * (1.3 + i * 0.07) + i * 2.4));\n      const b = flies * blink * blink;\n      if (b \u003c 0.05) continue;\n      // Drawn past full so the point is still bright once it is shared out over four LEDs.\n      splat(buf, params.gx[i], params.gy[i], 330 * b, 400 * b, 120 * b);\n    }\n  }\n  if (params.snow > 0.02) {\n    // Snow catches whatever light there is: white by day, blue under the moon.\n    const k = params.snow;\n    for (let i = 0; i \u003c FLAKES; i++) {\n      const v = k * (0.65 + 0.35 * params.fs[i] / 1.4);\n      splat(buf, params.fx[i], params.fy[i], 250 * v * Math.min(1, lr * 1.3), 250 * v * Math.min(1, lg * 1.3), 255 * v * Math.min(1, lb * 1.3));\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n\nfunction hexOf(pal, i) {\n  return (Math.round(pal[i * 3]) \u003c\u003c 16) | (Math.round(pal[i * 3 + 1]) \u003c\u003c 8) | Math.round(pal[i * 3 + 2]);\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// A disc with a one-LED soft rim, so it moves without stepping. The hills, drawn after it, hide it as it sets.\nfunction disc(buf, cx, cy, r, cr, cg, cb) {\n  const x0 = Math.max(0, Math.floor(cx - r - 1));\n  const x1 = Math.min(W - 1, Math.ceil(cx + r + 1));\n  const y0 = Math.max(0, Math.floor(cy - r - 1));\n  const y1 = Math.min(HORIZON + 2, Math.ceil(cy + r + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - cy;\n      const a = Math.max(0, Math.min(1, r - Math.sqrt(px * px + py * py) + 0.5));\n      if (a \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + cr * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + cg * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + cb * a;\n    }\n}\n\nfunction moon(buf, cx, cy, k) {\n  const r = 3.2;\n  const x0 = Math.max(0, Math.floor(cx - r - 1));\n  const x1 = Math.min(W - 1, Math.ceil(cx + r + 1));\n  const y0 = Math.max(0, Math.floor(cy - r - 1));\n  const y1 = Math.min(HORIZON + 2, Math.ceil(cy + r + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - cy;\n      const d = Math.sqrt(px * px + py * py);\n      const cut = Math.sqrt((px + 2.4) * (px + 2.4) + (py - 1) * (py - 1));\n      const a = Math.max(0, Math.min(1, r - d + 0.5)) * Math.max(0, Math.min(1, cut - r + 0.5)) * k;\n      if (a \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - a) + 240 * a;\n      buf[o + 1] = buf[o + 1] * (1 - a) + 236 * a;\n      buf[o + 2] = buf[o + 2] * (1 - a) + 205 * a;\n    }\n}\n\nfunction tree(buf, pal, params, tx, light) {\n  const base = params.near[tx] + 1;\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  for (let y = base - 7; y \u003c base; y++) {\n    put(buf, tx, y, pal[39] * lr, pal[40] * lg, pal[41] * lb);\n    put(buf, tx + 1, y, pal[39] * lr * 0.8, pal[40] * lg * 0.8, pal[41] * lb * 0.8);\n  }\n  const cy = base - 12;\n  for (let y = cy - 6; y \u003c= cy + 5; y++)\n    for (let x = tx - 6; x \u003c= tx + 7; x++) {\n      const dx = (x - tx - 0.5) / 6.2;\n      const dy = (y - cy) / 5.6;\n      const edge = 0.12 * Math.sin(x * 2.1 + y * 1.3);\n      if (dx * dx + dy * dy > 1 + edge) continue;\n      // The side away from the light is a shade darker, and the crown is speckled with blossom or fruit.\n      const shade = 0.78 + 0.22 * smooth(1, -1, dx + dy);\n      const dot = hash(x * 7 + 3, y * 5 + 1) \u003c 0.18;\n      const c = dot ? 24 : 21;\n      put(buf, x, y, pal[c] * shade * lr, pal[c + 1] * shade * lg, pal[c + 2] * shade * lb);\n    }\n}\n\nfunction house(buf, pal, params, light, e, p) {\n  const hx = 5;\n  const g = params.near[hx + 5] + 1;\n  const lr = light[0];\n  const lg = light[1];\n  const lb = light[2];\n  const snow = params.snow;\n  // Walls.\n  for (let y = g - 7; y \u003c g; y++)\n    for (let x = hx; x \u003c hx + 11; x++) {\n      const side = x >= hx + 8 ? 0.82 : 1;\n      put(buf, x, y, pal[27] * lr * side, pal[28] * lg * side, pal[29] * lb * side);\n    }\n  // Roof: a triangle a little wider than the walls, with snow along its edge in winter.\n  for (let r = 0; r \u003c 7; r++) {\n    const y = g - 8 - r;\n    const half = 6.5 - r;\n    for (let x = Math.ceil(hx + 5 - half); x \u003c= Math.floor(hx + 5 + half); x++) {\n      const rim = r === 6 || Math.abs(x - (hx + 5)) >= half - 1;\n      const cap = rim ? snow : snow * 0.35;\n      const ri = pal[30] * (1 - cap) + pal[36] * cap;\n      const gi = pal[31] * (1 - cap) + pal[37] * cap;\n      const bi = pal[32] * (1 - cap) + pal[38] * cap;\n      put(buf, x, y, ri * lr, gi * lg, bi * lb);\n    }\n  }\n  // Chimney.\n  for (let y = g - 14; y \u003c g - 10; y++) put(buf, hx + 8, y, 120 * lr, 70 * lg, 60 * lb);\n  // Door.\n  for (let y = g - 4; y \u003c g; y++) put(buf, hx + 5, y, pal[39] * lr, pal[40] * lg, pal[41] * lb);\n  // Windows: dark glass by day; one by one they light up at dusk, and one goes out after midnight.\n  const night = p > 0.5 ? p - 1 : p;\n  for (let i = 0; i \u003c 2; i++) {\n    const wx = hx + (i === 0 ? 2 : 7);\n    const at = i === 0 ? 0.05 : 0;\n    let on = smooth(at + 0.03, at - 0.03, e);\n    // The left window goes dark from about one in the morning until five.\n    if (i === 0 && night > 0.04 && night \u003c 0.2) on = 0;\n    const wr = 50 * lr * (1 - on) + 255 * on;\n    const wg = 70 * lg * (1 - on) + 196 * on;\n    const wb = 90 * lb * (1 - on) + 90 * on;\n    put(buf, wx, g - 5, wr, wg, wb);\n    put(buf, wx + 1, g - 5, wr, wg, wb);\n    put(buf, wx, g - 4, wr, wg, wb);\n    put(buf, wx + 1, g - 4, wr, wg, wb);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Season=0..1, Time=0.2..8, Clouds=0.15..1, Sun path=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Season","min":0,"max":1,"about":"Spring, summer, autumn and winter in turn. Summer nights have fireflies, and in winter snow falls and lies on the roof."},{"name":"Time","min":0.2,"max":8,"about":"How fast the day goes, from ten minutes a day to fifteen seconds; a day takes a minute where it starts."},{"name":"Clouds","min":0.15,"max":1,"about":"From a few small clouds to a sky that is nearly overcast."},{"name":"Sun path","min":-1,"max":1,"about":"How high the sun climbs, from a winter sun that skims the hills to a summer one that reaches the top."}],"start":[0,2,0.15,0.06],"measures":{"motion":0.0549,"detail":0.0184,"edges":0.5425,"complexity":0.6376,"coverage":1,"colour":0.3226,"drift":0.2553},"knobResponse":[0.2229,0.2763,0.1419,0.1052]},{"slug":"domain-warp","title":"Domain Warp","family":"noise","round":1,"note":"노이즈가 제 자신을 비틀어서 어두운 쪽빛 돌에 금빛 결이 흘러요. 대리석을 붓는 것처럼 천천히 뒤섞여요.","idea":"Noise that is pushed around by its own noise twice over stops looking like noise and starts looking like stone being poured.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Domain Warp\n// Family:  noise\n// Idea:    Noise that is pushed around by its own noise twice over stops looking like noise and starts looking like stone being poured.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Cycle=0..1, Speed=0..5, Warp=1..6, Zoom=0.035..0.095\n// @ramp oklab wrap 0:#05030f 0.16:#0e1450 0.22:#2a7ac0 0.27:#100c44 0.5:#2c1478 0.62:#c83888 0.68:#ffd890 0.74:#ff6a3a 0.84:#4a0a3a 1:#05030f\n//\n// Knob 1: Cycle. Slides the palette through the stone, so the gold veins move onto other contours; one turn comes back.\n// Knob 2: Speed. How fast the marble pours; 0 holds it still.\n// Knob 3: Warp. How hard the noise is folded into itself, from loose marble to tight swirls.\n// Knob 4: Zoom. Size of the stone; low is a few big swirls, high is fine grain.\n\n// The noise is built once into a tileable texture, so each stage of the\n// warp is one lookup instead of four octaves of noise.\nconst N = 128;\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x, 374761393) + Math.imul(y, 668265263) + Math.imul(s, 2147483647);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction fade(t) {\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\nfunction tap(tex, u, v) {\n  const fu = Math.floor(u);\n  const fv = Math.floor(v);\n  const x0 = fu & (N - 1);\n  const y0 = fv & (N - 1);\n  const x1 = (x0 + 1) & (N - 1);\n  const y1 = (y0 + 1) & (N - 1);\n  const tx = u - fu;\n  const ty = v - fv;\n  const a = tex[y0 * N + x0];\n  const b = tex[y0 * N + x1];\n  const c = tex[y1 * N + x0];\n  const d = tex[y1 * N + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nexport function setup(params) {\n  const tex = new Float32Array(N * N);\n  let amp = 1;\n  for (let o = 0; o \u003c 4; o++) {\n    const cells = 4 \u003c\u003c o;\n    const size = N / cells;\n    for (let y = 0; y \u003c N; y++) {\n      const gy = Math.floor(y / size);\n      const fy = fade(y / size - gy);\n      for (let x = 0; x \u003c N; x++) {\n        const gx = Math.floor(x / size);\n        const fx = fade(x / size - gx);\n        const x1 = (gx + 1) % cells;\n        const y1 = (gy + 1) % cells;\n        const a = hash(gx, gy, o);\n        const b = hash(x1, gy, o);\n        const c = hash(gx, y1, o);\n        const d = hash(x1, y1, o);\n        const top = a + (b - a) * fx;\n        const bottom = c + (d - c) * fx;\n        tex[y * N + x] += (top + (bottom - top) * fy) * amp;\n      }\n    }\n    amp *= 0.5;\n  }\n  let lo = Infinity;\n  let hi = -Infinity;\n  for (let i = 0; i \u003c tex.length; i++) {\n    lo = Math.min(lo, tex[i]);\n    hi = Math.max(hi, tex[i]);\n  }\n  for (let i = 0; i \u003c tex.length; i++) tex[i] = (tex[i] - lo) / (hi - lo);\n  params.tex = tex;\n  params.clock = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  params.colour = k[0];\n  params.speed = k[1];\n  params.warp = k[2];\n  params.zoom = k[3];\n  params.clock += dt * params.speed * 0.4;\n}\n\nexport function draw(display, params, time) {\n  const tex = params.tex;\n  const w = display.width;\n  const h = display.height;\n  const t = params.clock;\n  // Texels per LED; the texture's coarsest noise cell is 32 texels wide.\n  const s = params.zoom * 12;\n  const amount = 36 + (params.warp - 1) * 5.5;\n  const ox = t * 3.1;\n  const oy = t * 1.7;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const px = (x - w / 2) * s + 64 + t * 1.3;\n      const py = (y - h / 2) * s + 64 + t * 0.4;\n      const qx = tap(tex, px + ox, py) - 0.5;\n      const qy = tap(tex, px + 41.3, py + 17.9 - oy) - 0.5;\n      const rx = tap(tex, px + amount * qx + 23.7 - oy, py + amount * qy + 91.1) - 0.5;\n      const ry = tap(tex, px + amount * qx + 77.2, py + amount * qy + 5.3 + ox * 0.6) - 0.5;\n      const f = tap(tex, px + amount * rx, py + amount * ry);\n      let v = f * 3 + params.colour;\n      v -= Math.floor(v);\n      display.setValue(x, y, v);\n    }\n  }\n}\n","layer":{"id":"layer-domain-warp","type":"code","name":"domain-warp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Domain Warp\n// Family:  noise\n// Idea:    Noise that is pushed around by its own noise twice over stops looking like noise and starts looking like stone being poured.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Cycle=0..1, Speed=0..5, Warp=1..6, Zoom=0.035..0.095\n\n//\n// Knob 1: Cycle. Slides the palette through the stone, so the gold veins move onto other contours; one turn comes back.\n// Knob 2: Speed. How fast the marble pours; 0 holds it still.\n// Knob 3: Warp. How hard the noise is folded into itself, from loose marble to tight swirls.\n// Knob 4: Zoom. Size of the stone; low is a few big swirls, high is fine grain.\n\n// The noise is built once into a tileable texture, so each stage of the\n// warp is one lookup instead of four octaves of noise.\nconst N = 128;\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x, 374761393) + Math.imul(y, 668265263) + Math.imul(s, 2147483647);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction fade(t) {\n  return t * t * t * (t * (t * 6 - 15) + 10);\n}\n\nfunction tap(tex, u, v) {\n  const fu = Math.floor(u);\n  const fv = Math.floor(v);\n  const x0 = fu & (N - 1);\n  const y0 = fv & (N - 1);\n  const x1 = (x0 + 1) & (N - 1);\n  const y1 = (y0 + 1) & (N - 1);\n  const tx = u - fu;\n  const ty = v - fv;\n  const a = tex[y0 * N + x0];\n  const b = tex[y0 * N + x1];\n  const c = tex[y1 * N + x0];\n  const d = tex[y1 * N + x1];\n  return a + (b - a) * tx + (c - a) * ty + (a - b - c + d) * tx * ty;\n}\n\nexport function setup(params) {\n  const tex = new Float32Array(N * N);\n  let amp = 1;\n  for (let o = 0; o \u003c 4; o++) {\n    const cells = 4 \u003c\u003c o;\n    const size = N / cells;\n    for (let y = 0; y \u003c N; y++) {\n      const gy = Math.floor(y / size);\n      const fy = fade(y / size - gy);\n      for (let x = 0; x \u003c N; x++) {\n        const gx = Math.floor(x / size);\n        const fx = fade(x / size - gx);\n        const x1 = (gx + 1) % cells;\n        const y1 = (gy + 1) % cells;\n        const a = hash(gx, gy, o);\n        const b = hash(x1, gy, o);\n        const c = hash(gx, y1, o);\n        const d = hash(x1, y1, o);\n        const top = a + (b - a) * fx;\n        const bottom = c + (d - c) * fx;\n        tex[y * N + x] += (top + (bottom - top) * fy) * amp;\n      }\n    }\n    amp *= 0.5;\n  }\n  let lo = Infinity;\n  let hi = -Infinity;\n  for (let i = 0; i \u003c tex.length; i++) {\n    lo = Math.min(lo, tex[i]);\n    hi = Math.max(hi, tex[i]);\n  }\n  for (let i = 0; i \u003c tex.length; i++) tex[i] = (tex[i] - lo) / (hi - lo);\n  params.tex = tex;\n  params.clock = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  params.colour = k[0];\n  params.speed = k[1];\n  params.warp = k[2];\n  params.zoom = k[3];\n  params.clock += dt * params.speed * 0.4;\n}\n\nexport function draw(display, params, time) {\n  const tex = params.tex;\n  const w = display.width;\n  const h = display.height;\n  const t = params.clock;\n  // Texels per LED; the texture's coarsest noise cell is 32 texels wide.\n  const s = params.zoom * 12;\n  const amount = 36 + (params.warp - 1) * 5.5;\n  const ox = t * 3.1;\n  const oy = t * 1.7;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const px = (x - w / 2) * s + 64 + t * 1.3;\n      const py = (y - h / 2) * s + 64 + t * 0.4;\n      const qx = tap(tex, px + ox, py) - 0.5;\n      const qy = tap(tex, px + 41.3, py + 17.9 - oy) - 0.5;\n      const rx = tap(tex, px + amount * qx + 23.7 - oy, py + amount * qy + 91.1) - 0.5;\n      const ry = tap(tex, px + amount * qx + 77.2, py + amount * qy + 5.3 + ox * 0.6) - 0.5;\n      const f = tap(tex, px + amount * rx, py + amount * ry);\n      let v = f * 3 + params.colour;\n      v -= Math.floor(v);\n      display.setValue(x, y, v);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#05030f","alpha":1},{"position":0.16,"color":"#0e1450","alpha":1},{"position":0.22,"color":"#2a7ac0","alpha":1},{"position":0.27,"color":"#100c44","alpha":1},{"position":0.5,"color":"#2c1478","alpha":1},{"position":0.62,"color":"#c83888","alpha":1},{"position":0.68,"color":"#ffd890","alpha":1},{"position":0.74,"color":"#ff6a3a","alpha":1},{"position":0.84,"color":"#4a0a3a","alpha":1},{"position":1,"color":"#05030f","alpha":1}],"mode":"oklab","wrap":true},"recolor":false,"knobsAnnotationRaw":"// @knobs Cycle=0..1, Speed=0..5, Warp=1..6, Zoom=0.035..0.095","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Cycle","min":0,"max":1,"about":"Slides the palette through the stone, so the gold veins move onto other contours; one turn comes back."},{"name":"Speed","min":0,"max":5,"about":"How fast the marble pours; 0 holds it still."},{"name":"Warp","min":1,"max":6,"about":"How hard the noise is folded into itself, from loose marble to tight swirls."},{"name":"Zoom","min":0.035,"max":0.095,"about":"Size of the stone; low is a few big swirls, high is fine grain."}],"start":[0,2,1,0.06],"measures":{"motion":0.2428,"detail":0.0806,"edges":0.2816,"complexity":1.8069,"coverage":0.9604,"colour":0.3247,"drift":0.15},"knobResponse":[0.3352,0.1929,0.1917,0.2107]},{"slug":"domino-run","title":"Domino Run","family":"physics","round":16,"note":"여섯 선반과 나선 계단 다섯을 잇는 도미노 마흔 개를 손끝이 밀면, 물결이 제 물리 빠르기로 내려가고 낮은 램프 빛을 받던 상아색 면이 쓰러지는 대로 어두워져요. 다 쓰러지면 필름이 거꾸로 돌아 줄을 다시 세워요. 줄이 달리는 동안 K1 을 누르면 아직 서 있는 선반 머리에서 두 번째 물결이 떠나요.","idea":"A fingertip tips the first of forty dominoes and the wave runs down six shelves and five spiral stairs at its own physical pace, each domino going dark in a low lamp's light as it falls, until the run rewinds.","buttons":"K1 tap pushes: the first domino if the run is waiting, the start of a shelf ahead of the wave if it is running (a second wave), the rewind if it is over.","code":"// ===== Patternflow pattern =====\n// Title:   Domino Run\n// Family:  physics\n// Idea:    A fingertip tips the first of forty dominoes and the wave runs down six shelves and five spiral stairs at its own physical pace, each domino going dark in a low lamp's light as it falls, until the run rewinds.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: domino toppling runs, with the pushing group moved as one body after J. M. J. van Leeuwen's \"The domino effect\" (2004)\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Speed=0.5..4, Spacing=-1..1, Angle=-1..1\n//\n// Knob 1: Colour. Ivory dominoes with black spots at 0; turned up, the run becomes a set of coloured toppling dominoes whose hues walk along the chain.\n// Knob 2: Speed. How fast the film runs, finger and all: at 2 the forty dominoes fall in under five seconds, at 0.5 the wave crawls, at 4 it is half of real speed.\n// Knob 3: Spacing. The gap between dominoes, from 0.44 to 0.8 of a domino's height; a wider gap means fewer dominoes and a flatter pile once they fall.\n// Knob 4: Angle. Swings the camera round the run, from almost straight side-on, where only the narrow edges show, to well round, where the spotted faces fill the shelves.\n// Buttons: K1 tap pushes: the first domino if the run is waiting, the start of a shelf ahead of the wave if it is running (a second wave), the rewind if it is over.\n\nconst W = 64;\nconst H = 128;\n// Two by two samples per LED, or a tipping edge jumps a whole LED at a time.\nconst SS = 2;\nconst SW = W * SS;\nconst SH = H * SS;\nconst MAXN = 64;\nconst TIERS = 6;\n// A domino in LEDs, in a real one's proportions (48 x 24 x 7.5 mm): one LED\n// is three millimetres.\nconst DH = 16;\nconst DT = 2.5;\nconst DWID = 8;\n// A shelf's straight run and the half turn at each end: the run goes into\n// the room at the right and comes back at the left, so every other shelf\n// stands 14 LEDs further back.\nconst RUN = 50;\nconst TURN_R = 7;\nconst BACK = 2 * TURN_R;\nconst SPACING = 20.5;\n// The camera looks down ten degrees, enough to see shelves as shelves and\n// turns as curves, and stands 40 degrees round to the left.\nconst PITCH = 0.18;\nconst YAW0 = 0.7;\nconst YAW_SWING = 0.44;\n// Tipping about the front bottom edge: the centre of mass sits behind the\n// edge by atan(t / h), and the moment of inertia is a slab's about its edge.\nconst BETA = Math.atan(DT / DH);\nconst RCOM = 0.5 * Math.hypot(DH, DT);\nconst INERTIA = (DH * DH + DT * DT) / 3;\n// The share of the pushing group's momentum that carries into the next\n// domino: 0.93 settles a long flat run at 1.5 sqrt(g h), as real runs go, at\n// every spacing the knob reaches. A stair hands the wave height to spend, so\n// a five-domino shelf after one runs nearer 1.8.\nconst KAPPA = 0.93;\n// Gravity in LEDs per second squared. Real gravity at three millimetres an\n// LED is about 3270, so the film runs at a little over a quarter of real\n// speed and a flat run would cover 95 LEDs a second.\nconst G0 = 250;\nconst GROUP = 8;\nconst SUBSTEP = 1 / 150;\n// The recording the rewind plays back: one pose a thirtieth of a second.\nconst MAXF = 600;\nconst REC_DT = 1 / 30;\nconst REWIND = 3;\n\n// Spots on each half of a face, as bits of a three by three grid.\nconst PIPMASK = [0, 16, 257, 273, 325, 341, 365];\n// Ivory as the lamp's warm bulb shows it.\nconst IVORY = [255, 230, 186];\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Hue h at saturation 0.85, full value.\nfunction hsvInto(out, h) {\n  for (let j = 0; j \u003c 3; j++) {\n    const k = (5 - 2 * j + 6 * (h - Math.floor(h))) % 6;\n    out[j] = 255 * (1 - 0.85 * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n}\n\n// The angle domino i leans at when it rests on domino i + 1 at angle tn. In\n// i's frame (along its heading, y up) i + 1's back face starts at `gap` and\n// its ground sits `dy` higher. Either i's top corner presses on i + 1's back\n// face or, down a step, i's front face presses on i + 1's top back corner;\n// i rests on whichever it reaches first. 9: neither is in reach.\nfunction contact(gap, dy, tn) {\n  let best = 9;\n  const s = Math.sin(tn);\n  const c = Math.cos(tn);\n  const arg = (DT + dy * s - (gap + DT) * c) / DH;\n  if (arg >= -1 && arg \u003c= 1) {\n    const ti = tn - Math.asin(arg);\n    const px = DH * Math.sin(ti) - (gap + DT - DT * c);\n    const py = DH * Math.cos(ti) - (dy + DT * s);\n    const u = px * s + py * c;\n    if (u >= -0.01 && u \u003c= DH + 0.01) best = ti;\n  }\n  const cx = gap + DT - DT * c + DH * s;\n  const cy = dy + DT * s + DH * c;\n  if (cy > 0 && cx * cx + cy * cy \u003c= DH * DH) {\n    const ti = Math.atan2(cx, cy);\n    if (ti \u003c best) best = ti;\n  }\n  return best;\n}\n\nfunction tierY(k) {\n  // Shelves at the back are lowered by what the camera's pitch lifts them,\n  // so all six sit the same distance apart on the panel.\n  const lift = (BACK * Math.cos(YAW0) * Math.sin(PITCH)) / Math.cos(PITCH);\n  return -k * SPACING - (k % 2 ? lift : 0);\n}\n\n// A point on the run's path at arc length s: position, heading and ground.\nfunction pathAt(s, out) {\n  const turn = Math.PI * TURN_R;\n  const per = RUN + turn;\n  let k = Math.floor(s / per);\n  let u = s - k * per;\n  if (k >= TIERS - 1) {\n    k = TIERS - 1;\n    u = s - k * per;\n  }\n  const even = k % 2 === 0;\n  if (u \u003c= RUN || k === TIERS - 1) {\n    out.x = even ? u : RUN - u;\n    out.z = even ? 0 : -BACK;\n    out.hx = even ? 1 : -1;\n    out.hz = 0;\n    out.y = tierY(k);\n    out.turn = 0;\n  } else {\n    const a = (u - RUN) / TURN_R;\n    if (even) {\n      out.x = RUN + TURN_R * Math.sin(a);\n      out.z = -TURN_R + TURN_R * Math.cos(a);\n      out.hx = Math.cos(a);\n      out.hz = -Math.sin(a);\n    } else {\n      out.x = -TURN_R * Math.sin(a);\n      out.z = -TURN_R - TURN_R * Math.cos(a);\n      out.hx = -Math.cos(a);\n      out.hz = Math.sin(a);\n    }\n    // Each domino in a turn has its own step, going down to the next shelf.\n    out.y = tierY(k) + (tierY(k + 1) - tierY(k)) * (a / Math.PI);\n    out.turn = 1;\n  }\n  out.tier = k;\n}\n\nfunction build(P, ratio) {\n  P.ratio = ratio;\n  const d = ratio * DH;\n  const total = TIERS * RUN + (TIERS - 1) * Math.PI * TURN_R;\n  const q = {};\n  let n = 0;\n  let lastTier = -1;\n  P.tierStart.fill(-1);\n  for (let s = 1.5; s \u003c= total - DH - 1 && n \u003c MAXN; s += d) {\n    pathAt(s, q);\n    P.px[n] = q.x;\n    P.py[n] = q.y;\n    P.pz[n] = q.z;\n    P.hx[n] = q.hx;\n    P.hz[n] = q.hz;\n    if (q.tier !== lastTier && !q.turn) {\n      P.tierStart[q.tier] = n;\n      lastTier = q.tier;\n    }\n    // The builder set every domino with its spots toward the camera.\n    const toCam = -Math.sin(YAW0) * q.hx + Math.cos(YAW0) * q.hz;\n    P.pipFront[n] = toCam > 0 ? 1 : 0;\n    // Their numbers from two irrational strides, so no two neighbours match.\n    P.pip0[n] = PIPMASK[Math.floor(((n * 0.618 + 0.3) % 1) * 7)];\n    P.pip1[n] = PIPMASK[Math.floor(((n * 0.414 + 0.8) % 1) * 7)];\n    P.turn[n] = q.turn;\n    n++;\n  }\n  P.n = n;\n  for (let i = 0; i \u003c n - 1; i++) {\n    const dx = P.px[i + 1] - P.px[i];\n    const dz = P.pz[i + 1] - P.pz[i];\n    P.gap[i] = dx * P.hx[i] + dz * P.hz[i] - DT;\n    P.dy[i] = P.py[i + 1] - P.py[i];\n  }\n  for (let i = 0; i \u003c n; i++) P.hue[i] = (i / n) * 0.85;\n  standAll(P);\n}\n\nfunction standAll(P) {\n  P.th.fill(0);\n  P.om.fill(0);\n  P.st.fill(0);\n}\n\n// The pushing group: a moving front and the dominoes leaning on it. Every\n// angle in it follows from the front's, so it moves as one body.\nfunction pose(P, f, x, out) {\n  out[0] = x;\n  let m = 1;\n  for (let j = 1; j \u003c= GROUP && f - j >= 0 && P.st[f - j] === 2; j++) {\n    const i = f - j;\n    out[j] = Math.min(Math.PI / 2, contact(P.gap[i], P.dy[i], out[j - 1]));\n    m++;\n  }\n  return m;\n}\n\nfunction potential(P, f, x) {\n  const m = pose(P, f, x, P.tmp);\n  let v = 0;\n  for (let j = 0; j \u003c m; j++) v += RCOM * Math.cos(P.tmp[j] - BETA);\n  return v;\n}\n\nfunction inertia(P, f, x) {\n  const e = 1e-4;\n  const m = pose(P, f, x + e, P.tmp);\n  for (let j = 0; j \u003c m; j++) P.tmp2[j] = P.tmp[j];\n  pose(P, f, x - e, P.tmp);\n  let s = 0;\n  for (let j = 0; j \u003c m; j++) {\n    const J = (P.tmp2[j] - P.tmp[j]) / (2 * e);\n    s += J * J;\n  }\n  return INERTIA * s;\n}\n\nfunction stepFront(P, f, g, dt) {\n  const x = P.th[f];\n  const e = 1e-4;\n  const dV = (g * (potential(P, f, x + e) - potential(P, f, x - e))) / (2 * e);\n  const I = inertia(P, f, x);\n  const dI = (inertia(P, f, x + 1e-3) - inertia(P, f, x - 1e-3)) / 2e-3;\n  let w = P.om[f];\n  // A group whose inertia shrinks hands energy back to its front. One whose\n  // inertia grew would make a leaning domino outrun the one under it, and a\n  // contact only pushes: that domino lags instead.\n  w += ((-dV - 0.5 * Math.min(0, dI) * w * w) / I) * dt;\n  let th = x + w * dt;\n  if (th \u003c 0) {\n    // Not pushed hard enough: it rocks back and stands.\n    th = 0;\n    w = 0;\n    P.st[f] = 0;\n  }\n  const last = f === P.n - 1;\n  if (!last) {\n    const next = P.st[f + 1];\n    const c = contact(P.gap[f], P.dy[f], P.th[f + 1]);\n    if (th >= c) {\n      th = c;\n      if (next === 0) {\n        // Generalised momentum carries across: the old front now moves at\n        // J times the new one's rate.\n        const J = (contact(P.gap[f], P.dy[f], 1e-3) - contact(P.gap[f], P.dy[f], 0)) / 1e-3;\n        const before = I * w;\n        P.st[f] = 2;\n        P.st[f + 1] = 1;\n        P.th[f + 1] = 0;\n        P.th[f] = th;\n        const after = inertia(P, f + 1, 0);\n        P.om[f + 1] = (KAPPA * before * J) / after;\n        P.om[f] = 0;\n        return;\n      }\n      // It met dominoes that already lie: the group stops on them.\n      P.st[f] = 2;\n      P.om[f] = 0;\n      P.th[f] = th;\n      return;\n    }\n  } else if (th >= Math.PI / 2) {\n    // The last one lands flat and bounces.\n    th = Math.PI / 2;\n    w = Math.abs(w) > 1.5 ? -0.22 * w : 0;\n    if (w === 0) P.st[f] = 3;\n  }\n  P.th[f] = th;\n  P.om[f] = w;\n}\n\nfunction settle(P) {\n  // Leaning dominoes follow the one they lean on, front to back.\n  for (let i = P.n - 2; i >= 0; i--)\n    if (P.st[i] === 2) P.th[i] = Math.min(Math.PI / 2, contact(P.gap[i], P.dy[i], P.th[i + 1]));\n}\n\nfunction record(P) {\n  if (P.frames >= MAXF) {\n    // Out of tape: keep every other pose and record at half the rate.\n    const n = P.n;\n    for (let f = 0; f \u003c MAXF / 2; f++) for (let i = 0; i \u003c n; i++) P.tape[f * MAXN + i] = P.tape[2 * f * MAXN + i];\n    P.frames = MAXF / 2;\n    P.recEvery *= 2;\n  }\n  const o = P.frames * MAXN;\n  for (let i = 0; i \u003c P.n; i++) P.tape[o + i] = Math.round((P.th[i] / (Math.PI / 2)) * 255);\n  P.frames++;\n}\n\nfunction startPush(P, i) {\n  P.finger = 0;\n  P.fingerOn = i;\n  P.st[i] = 4;\n}\n\nexport function setup(params) {\n  const P = params;\n  // Per domino: pivot (front bottom edge), heading, gap and step to the next.\n  for (const key of [\"px\", \"py\", \"pz\", \"hx\", \"hz\", \"gap\", \"dy\", \"th\", \"om\", \"hue\"]) P[key] = new Float32Array(MAXN);\n  for (const key of [\"st\", \"pipFront\", \"turn\", \"pfOn\"]) P[key] = new Uint8Array(MAXN);\n  P.pip0 = new Uint16Array(MAXN);\n  P.pip1 = new Uint16Array(MAXN);\n  P.tierStart = new Int16Array(TIERS);\n  P.tmp = new Float64Array(GROUP + 2);\n  P.tmp2 = new Float64Array(GROUP + 2);\n  P.tape = new Uint8Array(MAXN * MAXF);\n  P.zbuf = new Float32Array(SW * SH);\n  // Which domino's spotted face each sample shows, plus one.\n  P.own = new Int16Array(SW * SH);\n  P.pf = new Float32Array(MAXN * 6);\n  P.cbuf = new Uint8Array(SW * SH * 3);\n  P.pix = new Float32Array(W * H * 3);\n  P.col = new Float32Array(3);\n  Object.assign(P, { built: false, mode: \"wait\", timer: 1.4, finger: -1, fingerOn: 0, frames: 0, play: 0, colour: 0, speed: 2, yaw: YAW0 });\n  build(P, 0.62);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const cl = (v, a, b) => Math.max(a, Math.min(b, v));\n  dt = Math.min(dt, 0.1);\n  P.colour = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.5, 4);\n  const ratio = 0.62 + 0.18 * cl(k[2], -1, 1);\n  P.yaw = YAW0 + YAW_SWING * cl(k[3], -1, 1);\n  // Everything below runs in film time.\n  dt *= P.speed / 2;\n\n  // A new spacing is a new run: the builder sets it out again and pushes.\n  if (Math.abs(ratio - P.ratio) > 0.004) {\n    build(P, ratio);\n    P.mode = \"wait\";\n    P.timer = P.built ? 0.8 : 1.4;\n    P.finger = -1;\n    P.frames = 0;\n  }\n  P.built = true;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.mode === \"wait\") P.timer = 0;\n    else if (P.mode === \"run\" && P.finger \u003c 0) {\n      // A second push at the start of the first shelf the wave has not reached.\n      let far = 0;\n      for (let i = 0; i \u003c P.n; i++) if (P.st[i] !== 0) far = i;\n      for (let t = 0; t \u003c TIERS; t++) {\n        const s = P.tierStart[t];\n        if (s > far + 2 && P.st[s] === 0) {\n          startPush(P, s);\n          break;\n        }\n      }\n    } else if (P.mode === \"rest\") P.timer = 0;\n  }\n\n  if (P.mode === \"wait\") {\n    P.timer -= dt;\n    if (P.timer \u003c= 0 && P.finger \u003c 0) {\n      startPush(P, 0);\n      Object.assign(P, { mode: \"run\", frames: 0, recEvery: 1, recT: 0, quiet: 0 });\n    }\n  }\n\n  // The fingertip: in for 0.4 s, pushes for 0.22 s until the domino is past\n  // its balance point, lets go and goes back out.\n  if (P.finger >= 0) {\n    P.finger += dt;\n    const i = P.fingerOn;\n    if (P.finger \u003c 0.4) P.th[i] = 0;\n    else if (P.finger \u003c 0.62) P.th[i] = (BETA + 0.07) * smooth(0.4, 0.62, P.finger);\n    else if (P.st[i] === 4) {\n      P.st[i] = 1;\n      P.th[i] = BETA + 0.07;\n      P.om[i] = 0.7;\n    }\n    if (P.finger > 1.1) P.finger = -1;\n  }\n\n  if (P.mode === \"run\") {\n    const steps = Math.ceil(dt / SUBSTEP);\n    const h = dt / steps;\n    for (let s = 0; s \u003c steps; s++) {\n      for (let i = P.n - 1; i >= 0; i--) if (P.st[i] === 1) stepFront(P, i, G0, h);\n      settle(P);\n    }\n    P.recT += dt;\n    if (P.recT >= REC_DT * P.recEvery) {\n      P.recT -= REC_DT * P.recEvery;\n      record(P);\n    }\n    let moving = P.finger >= 0;\n    for (let i = 0; i \u003c P.n && !moving; i++) if (P.st[i] === 1 || P.st[i] === 4) moving = true;\n    P.quiet = moving ? 0 : P.quiet + dt;\n    if (P.quiet > 0.4) {\n      record(P);\n      P.mode = \"rest\";\n      P.timer = 2.2;\n    }\n  } else if (P.mode === \"rest\") {\n    P.timer -= dt;\n    if (P.timer \u003c= 0) {\n      P.mode = \"rewind\";\n      P.play = P.frames - 1;\n    }\n  } else if (P.mode === \"rewind\") {\n    // The film runs backwards three times as fast; every domino springs up\n    // the way it fell.\n    P.play -= (dt * REWIND) / (REC_DT * P.recEvery);\n    if (P.play \u003c= 0) {\n      standAll(P);\n      P.mode = \"wait\";\n      P.timer = 1.1;\n    } else {\n      const f0 = Math.floor(P.play);\n      const f1 = Math.min(P.frames - 1, f0 + 1);\n      const a = P.play - f0;\n      const s = Math.PI / 2 / 255;\n      for (let i = 0; i \u003c P.n; i++)\n        P.th[i] = s * ((1 - a) * P.tape[f0 * MAXN + i] + a * P.tape[f1 * MAXN + i]);\n    }\n  }\n}\n\n// The camera: screen right r, screen up u, c toward the camera.\nfunction camera(P) {\n  const sp = Math.sin(P.yaw);\n  const cp = Math.cos(P.yaw);\n  const se = Math.sin(PITCH);\n  const ce = Math.cos(PITCH);\n  P.rx = cp;\n  P.rz = sp;\n  P.ux = sp * se;\n  P.uy = ce;\n  P.uz = -cp * se;\n  P.cx = -sp * ce;\n  P.cy = se;\n  P.cz = cp * ce;\n  // Centre the run on the panel by its top and bottom shelves' corners.\n  const b = [1e9, -1e9, 1e9, -1e9];\n  for (const x of [-TURN_R - 3, RUN + TURN_R + 3])\n    for (const z of [DWID, -BACK - DWID])\n      for (const y of [tierY(0) + DH + 1, tierY(TIERS - 1) - 2]) {\n        const sx = x * P.rx + z * P.rz;\n        const sy = -(x * P.ux + y * P.uy + z * P.uz);\n        b[0] = Math.min(b[0], sx);\n        b[1] = Math.max(b[1], sx);\n        b[2] = Math.min(b[2], sy);\n        b[3] = Math.max(b[3], sy);\n      }\n  P.X0 = W / 2 - (b[0] + b[1]) / 2;\n  P.Y0 = H / 2 - (b[2] + b[3]) / 2;\n}\n\n// One lamp, low on the left: it lights a standing domino's face full on and\n// only grazes one that lies. The room adds a little light to the wood.\nconst LX = -0.975;\nconst LY = 0.05;\n\n// One face of a box into the samples where it is nearest: corner o, edges a\n// and b (across and up on a spotted face), outward normal n.\nfunction face(P, ox, oy, oz, ax, ay, az, bx, by, bz, nx, ny, nz, col, spots) {\n  if (nx * P.cx + ny * P.cy + nz * P.cz \u003c= 0.02) return;\n  const shade = P.amb + P.dif * Math.max(0, nx * LX + ny * LY) + P.front * Math.max(0, nz);\n  const cr = col[0] * shade;\n  const cg = col[1] * shade;\n  const cb = col[2] * shade;\n  const sx = (P.X0 + ox * P.rx + oz * P.rz) * SS;\n  const sy = (P.Y0 - (ox * P.ux + oy * P.uy + oz * P.uz)) * SS;\n  const sd = ox * P.cx + oy * P.cy + oz * P.cz;\n  const eax = (ax * P.rx + az * P.rz) * SS;\n  const eay = -(ax * P.ux + ay * P.uy + az * P.uz) * SS;\n  const ead = ax * P.cx + ay * P.cy + az * P.cz;\n  const ebx = (bx * P.rx + bz * P.rz) * SS;\n  const eby = -(bx * P.ux + by * P.uy + bz * P.uz) * SS;\n  const ebd = bx * P.cx + by * P.cy + bz * P.cz;\n  const det = eax * eby - eay * ebx;\n  if (Math.abs(det) \u003c 0.05) return;\n  const inv = 1 / det;\n  const minX = Math.max(0, Math.floor(sx + Math.min(0, eax) + Math.min(0, ebx)));\n  const maxX = Math.min(SW - 1, Math.ceil(sx + Math.max(0, eax) + Math.max(0, ebx)));\n  const minY = Math.max(0, Math.floor(sy + Math.min(0, eay) + Math.min(0, eby)));\n  const maxY = Math.min(SH - 1, Math.ceil(sy + Math.max(0, eay) + Math.max(0, eby)));\n  const zb = P.zbuf;\n  const cbuf = P.cbuf;\n  const own = P.own;\n  const id = spots ? P.cur + 1 : 0;\n  // Spots once the face is wide and tall enough for three by three a half.\n  const la = Math.hypot(eax, eay);\n  const lb = Math.hypot(ebx, eby);\n  const showPips = id > 0 && Math.abs(det) > 2.6 * SS * lb && Math.abs(det) > 6 * SS * la;\n  if (showPips) {\n    P.pf.set([sx, sy, eax, eay, ebx, eby], P.cur * 6);\n    P.pfOn[P.cur] = 1;\n  }\n  for (let y = minY; y \u003c= maxY; y++) {\n    const qy = y + 0.5 - sy;\n    for (let x = minX; x \u003c= maxX; x++) {\n      const qx = x + 0.5 - sx;\n      const a = (qx * eby - qy * ebx) * inv;\n      if (a \u003c 0 || a > 1) continue;\n      const b = (eax * qy - eay * qx) * inv;\n      if (b \u003c 0 || b > 1) continue;\n      const d = sd + a * ead + b * ebd;\n      const s = y * SW + x;\n      if (d \u003c= zb[s]) continue;\n      zb[s] = d;\n      own[s] = id;\n      // The bar between the two halves.\n      const k = showPips && Math.abs(b - 0.5) \u003c 0.03 ? 0.5 : 1;\n      cbuf[s * 3] = cr * k;\n      cbuf[s * 3 + 1] = cg * k;\n      cbuf[s * 3 + 2] = cb * k;\n    }\n  }\n}\n\n// A box from corner o along three edges a (thickness), b (across), c (up).\n// pip: -1 no spots, 0 spots on the a = 0 face, 1 on the a = 1 face.\nfunction box(P, ox, oy, oz, ax, ay, az, bx, by, bz, cx, cy, cz, la, lb, lc, col, pip) {\n  const na = 1 / la;\n  const nb = 1 / lb;\n  const nc = 1 / lc;\n  face(P, ox, oy, oz, bx, by, bz, cx, cy, cz, -ax * na, -ay * na, -az * na, col, pip === 0);\n  face(P, ox + ax, oy + ay, oz + az, bx, by, bz, cx, cy, cz, ax * na, ay * na, az * na, col, pip === 1);\n  face(P, ox, oy, oz, ax, ay, az, cx, cy, cz, -bx * nb, -by * nb, -bz * nb, col, false);\n  face(P, ox + bx, oy + by, oz + bz, ax, ay, az, cx, cy, cz, bx * nb, by * nb, bz * nb, col, false);\n  face(P, ox, oy, oz, ax, ay, az, bx, by, bz, -cx * nc, -cy * nc, -cz * nc, col, false);\n  face(P, ox + cx, oy + cy, oz + cz, ax, ay, az, bx, by, bz, cx * nc, cy * nc, cz * nc, col, false);\n}\n\nconst WOOD = [52, 34, 22];\nconst WOOD_EDGE = [96, 64, 40];\n\nexport function draw(display, params, time) {\n  const P = params;\n  camera(P);\n  P.zbuf.fill(-1e9);\n  P.own.fill(0);\n  P.pfOn.fill(0);\n  P.cur = -1;\n\n  // Dark wood that takes the room's light on its front edges, so a shelf\n  // reads as one dim line: a plank under each straight run, and in each turn\n  // a spiral stair, a post with a step out from it under every domino.\n  Object.assign(P, { amb: 0.1, dif: 0.2, front: 0.3 });\n  const deep = DWID + 2.4;\n  for (let k = 0; k \u003c TIERS; k++) {\n    const y = tierY(k);\n    box(P, -2, y - 1, (k % 2 ? -BACK : 0) + deep / 2, RUN + 4, 0, 0, 0, 0, -deep, 0, 1, 0, RUN + 4, deep, 1, WOOD_EDGE, -1);\n    const tall = y - tierY(k + 1);\n    if (k \u003c TIERS - 1) box(P, (k % 2 ? 0 : RUN) - 0.8, y - tall, -TURN_R - 0.8, 1.6, 0, 0, 0, 0, 1.6, 0, tall, 0, 1.6, 1.6, tall, WOOD, -1);\n  }\n  const out = TURN_R + DWID / 2 + 0.8;\n  const step = DT + 2.8;\n  for (let i = 0; i \u003c P.n; i++) {\n    const hx = P.hx[i];\n    const hz = P.hz[i];\n    if (P.turn[i]) box(P, P.px[i] - hx * (step - 1.4) + hz * TURN_R, P.py[i] - 1, P.pz[i] - hz * (step - 1.4) - hx * TURN_R, hx * step, 0, hz * step, -hz * out, 0, hx * out, 0, 1, 0, step, out, 1, WOOD_EDGE, -1);\n  }\n\n  // The dominoes, in the lamp's light.\n  Object.assign(P, { amb: 0.04, dif: 0.96, front: 0 });\n  const q = P.col;\n  const sat = smooth(0, 0.35, P.colour);\n  for (let i = 0; i \u003c P.n; i++) {\n    const s = Math.sin(P.th[i]);\n    const c = Math.cos(P.th[i]);\n    const hx = P.hx[i];\n    const hz = P.hz[i];\n    // Tipped edges: thickness along the heading, width across, height up.\n    const ax = hx * c * DT;\n    const az = hz * c * DT;\n    const ox = P.px[i] - ax + hz * (DWID / 2);\n    const oz = P.pz[i] - az - hx * (DWID / 2);\n    hsvInto(q, P.hue[i] + P.colour);\n    for (let j = 0; j \u003c 3; j++) q[j] = IVORY[j] + (q[j] - IVORY[j]) * sat;\n    P.cur = i;\n    box(P, ox, P.py[i] + s * DT, oz, ax, -s * DT, az, -hz * DWID, 0, hx * DWID, hx * s * DH, c * DH, hz * s * DH, DT, DWID, DH, q, P.pipFront[i]);\n  }\n\n  // Resolve the samples over a dark wall, a little warmer at the foot.\n  const pix = P.pix;\n  const zb = P.zbuf;\n  const cb = P.cbuf;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let j = 0; j \u003c 4; j++) {\n        const s = (y * SS + (j >> 1)) * SW + x * SS + (j & 1);\n        if (zb[s] > -1e8) {\n          r += cb[s * 3];\n          g += cb[s * 3 + 1];\n          b += cb[s * 3 + 2];\n        } else {\n          r += 5 + (3 * y) / H;\n          g += 5 + (2 * y) / H;\n          b += 9;\n        }\n      }\n      const p = (y * W + x) * 3;\n      pix[p] = r / 4;\n      pix[p + 1] = g / 4;\n      pix[p + 2] = b / 4;\n    }\n\n  drawPips(P);\n  if (P.finger >= 0) drawFinger(P);\n\n  for (let p = 0; p \u003c W * H; p++) display.setPixel(p % W, Math.floor(p / W), Math.min(255, pix[p * 3]), Math.min(255, pix[p * 3 + 1]), Math.min(255, pix[p * 3 + 2]));\n}\n\n// The spots, one dark LED each where that LED shows the spotted face. Drawn\n// soft, they smeared half of every face to grey.\nfunction drawPips(P) {\n  const pix = P.pix;\n  const own = P.own;\n  for (let i = 0; i \u003c P.n; i++) {\n    if (!P.pfOn[i]) continue;\n    const o = i * 6;\n    for (let half = 0; half \u003c 2; half++) {\n      const mask = half ? P.pip1[i] : P.pip0[i];\n      for (let bit = 0; bit \u003c 9; bit++) {\n        if (!(mask & (1 \u003c\u003c bit))) continue;\n        const a = 0.2 + 0.3 * (bit % 3);\n        const b = 0.5 * half + 0.1 + 0.15 * Math.floor(bit / 3);\n        const x = Math.floor((P.pf[o] + a * P.pf[o + 2] + b * P.pf[o + 4]) / SS);\n        const y = Math.floor((P.pf[o + 1] + a * P.pf[o + 3] + b * P.pf[o + 5]) / SS);\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        let mine = 0;\n        for (let j = 0; j \u003c SS; j++) for (let k = 0; k \u003c SS; k++) if (own[(y * SS + j) * SW + x * SS + k] === i + 1) mine++;\n        if (mine \u003c 3) continue;\n        const p = (y * W + x) * 3;\n        pix[p] *= 0.08;\n        pix[p + 1] *= 0.08;\n        pix[p + 2] *= 0.08;\n      }\n    }\n  }\n}\n\n// The fingertip comes from behind the domino it pushes, a little from above,\n// and touches the domino's back three quarters of the way up.\nfunction drawFinger(P) {\n  const i = P.fingerOn;\n  const s = Math.sin(P.th[i]);\n  const c = Math.cos(P.th[i]);\n  const hx = P.hx[i];\n  const hz = P.hz[i];\n  const back = DH * 0.75 * s - DT * c;\n  const tx = P.px[i] + hx * back;\n  const ty = P.py[i] + DT * s + c * DH * 0.75;\n  const tz = P.pz[i] + hz * back;\n  // Backwards along the heading on the panel, tilted 20 degrees up.\n  const dx = -(hx * P.rx + hz * P.rz);\n  const dy = hx * P.ux + hz * P.uz;\n  const up = dx > 0 ? -0.34 : 0.34;\n  const l = Math.hypot(dx, dy) || 1;\n  const ex = (dx * Math.cos(up) - dy * Math.sin(up)) / l;\n  const ey = (dx * Math.sin(up) + dy * Math.cos(up)) / l;\n  const f = P.finger;\n  const out = 2 + 26 * (f \u003c 0.4 ? 1 - smooth(0, 0.4, f) : smooth(0.62, 1.05, f));\n  const ax = P.X0 + tx * P.rx + tz * P.rz + ex * out;\n  const ay = P.Y0 - (tx * P.ux + ty * P.uy + tz * P.uz) + ey * out;\n  const pix = P.pix;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x + 0.5 - ax;\n      const py = y + 0.5 - ay;\n      const along = Math.max(0, px * ex + py * ey);\n      const cov = Math.min(1, 2.2 - Math.hypot(px - along * ex, py - along * ey));\n      if (cov \u003c= 0) continue;\n      // Skin, lighter along the top, and the nail at the tip.\n      const top = ((ex > 0 ? ey : -ey) * px - (ex > 0 ? ex : -ex) * py) / 1.7;\n      const nail = along \u003c 2.6 && top > -0.2;\n      const p = (y * W + x) * 3;\n      pix[p] += ((nail ? 250 : 232 + 14 * top) - pix[p]) * cov;\n      pix[p + 1] += ((nail ? 222 : 170 + 18 * top) - pix[p + 1]) * cov;\n      pix[p + 2] += ((nail ? 212 : 138 + 16 * top) - pix[p + 2]) * cov;\n    }\n}\n","layer":{"id":"layer-domino-run","type":"code","name":"domino-run","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Domino Run\n// Family:  physics\n// Idea:    A fingertip tips the first of forty dominoes and the wave runs down six shelves and five spiral stairs at its own physical pace, each domino going dark in a low lamp's light as it falls, until the run rewinds.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: domino toppling runs, with the pushing group moved as one body after J. M. J. van Leeuwen's \"The domino effect\" (2004)\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Speed=0.5..4, Spacing=-1..1, Angle=-1..1\n//\n// Knob 1: Colour. Ivory dominoes with black spots at 0; turned up, the run becomes a set of coloured toppling dominoes whose hues walk along the chain.\n// Knob 2: Speed. How fast the film runs, finger and all: at 2 the forty dominoes fall in under five seconds, at 0.5 the wave crawls, at 4 it is half of real speed.\n// Knob 3: Spacing. The gap between dominoes, from 0.44 to 0.8 of a domino's height; a wider gap means fewer dominoes and a flatter pile once they fall.\n// Knob 4: Angle. Swings the camera round the run, from almost straight side-on, where only the narrow edges show, to well round, where the spotted faces fill the shelves.\n// Buttons: K1 tap pushes: the first domino if the run is waiting, the start of a shelf ahead of the wave if it is running (a second wave), the rewind if it is over.\n\nconst W = 64;\nconst H = 128;\n// Two by two samples per LED, or a tipping edge jumps a whole LED at a time.\nconst SS = 2;\nconst SW = W * SS;\nconst SH = H * SS;\nconst MAXN = 64;\nconst TIERS = 6;\n// A domino in LEDs, in a real one's proportions (48 x 24 x 7.5 mm): one LED\n// is three millimetres.\nconst DH = 16;\nconst DT = 2.5;\nconst DWID = 8;\n// A shelf's straight run and the half turn at each end: the run goes into\n// the room at the right and comes back at the left, so every other shelf\n// stands 14 LEDs further back.\nconst RUN = 50;\nconst TURN_R = 7;\nconst BACK = 2 * TURN_R;\nconst SPACING = 20.5;\n// The camera looks down ten degrees, enough to see shelves as shelves and\n// turns as curves, and stands 40 degrees round to the left.\nconst PITCH = 0.18;\nconst YAW0 = 0.7;\nconst YAW_SWING = 0.44;\n// Tipping about the front bottom edge: the centre of mass sits behind the\n// edge by atan(t / h), and the moment of inertia is a slab's about its edge.\nconst BETA = Math.atan(DT / DH);\nconst RCOM = 0.5 * Math.hypot(DH, DT);\nconst INERTIA = (DH * DH + DT * DT) / 3;\n// The share of the pushing group's momentum that carries into the next\n// domino: 0.93 settles a long flat run at 1.5 sqrt(g h), as real runs go, at\n// every spacing the knob reaches. A stair hands the wave height to spend, so\n// a five-domino shelf after one runs nearer 1.8.\nconst KAPPA = 0.93;\n// Gravity in LEDs per second squared. Real gravity at three millimetres an\n// LED is about 3270, so the film runs at a little over a quarter of real\n// speed and a flat run would cover 95 LEDs a second.\nconst G0 = 250;\nconst GROUP = 8;\nconst SUBSTEP = 1 / 150;\n// The recording the rewind plays back: one pose a thirtieth of a second.\nconst MAXF = 600;\nconst REC_DT = 1 / 30;\nconst REWIND = 3;\n\n// Spots on each half of a face, as bits of a three by three grid.\nconst PIPMASK = [0, 16, 257, 273, 325, 341, 365];\n// Ivory as the lamp's warm bulb shows it.\nconst IVORY = [255, 230, 186];\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Hue h at saturation 0.85, full value.\nfunction hsvInto(out, h) {\n  for (let j = 0; j \u003c 3; j++) {\n    const k = (5 - 2 * j + 6 * (h - Math.floor(h))) % 6;\n    out[j] = 255 * (1 - 0.85 * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n}\n\n// The angle domino i leans at when it rests on domino i + 1 at angle tn. In\n// i's frame (along its heading, y up) i + 1's back face starts at `gap` and\n// its ground sits `dy` higher. Either i's top corner presses on i + 1's back\n// face or, down a step, i's front face presses on i + 1's top back corner;\n// i rests on whichever it reaches first. 9: neither is in reach.\nfunction contact(gap, dy, tn) {\n  let best = 9;\n  const s = Math.sin(tn);\n  const c = Math.cos(tn);\n  const arg = (DT + dy * s - (gap + DT) * c) / DH;\n  if (arg >= -1 && arg \u003c= 1) {\n    const ti = tn - Math.asin(arg);\n    const px = DH * Math.sin(ti) - (gap + DT - DT * c);\n    const py = DH * Math.cos(ti) - (dy + DT * s);\n    const u = px * s + py * c;\n    if (u >= -0.01 && u \u003c= DH + 0.01) best = ti;\n  }\n  const cx = gap + DT - DT * c + DH * s;\n  const cy = dy + DT * s + DH * c;\n  if (cy > 0 && cx * cx + cy * cy \u003c= DH * DH) {\n    const ti = Math.atan2(cx, cy);\n    if (ti \u003c best) best = ti;\n  }\n  return best;\n}\n\nfunction tierY(k) {\n  // Shelves at the back are lowered by what the camera's pitch lifts them,\n  // so all six sit the same distance apart on the panel.\n  const lift = (BACK * Math.cos(YAW0) * Math.sin(PITCH)) / Math.cos(PITCH);\n  return -k * SPACING - (k % 2 ? lift : 0);\n}\n\n// A point on the run's path at arc length s: position, heading and ground.\nfunction pathAt(s, out) {\n  const turn = Math.PI * TURN_R;\n  const per = RUN + turn;\n  let k = Math.floor(s / per);\n  let u = s - k * per;\n  if (k >= TIERS - 1) {\n    k = TIERS - 1;\n    u = s - k * per;\n  }\n  const even = k % 2 === 0;\n  if (u \u003c= RUN || k === TIERS - 1) {\n    out.x = even ? u : RUN - u;\n    out.z = even ? 0 : -BACK;\n    out.hx = even ? 1 : -1;\n    out.hz = 0;\n    out.y = tierY(k);\n    out.turn = 0;\n  } else {\n    const a = (u - RUN) / TURN_R;\n    if (even) {\n      out.x = RUN + TURN_R * Math.sin(a);\n      out.z = -TURN_R + TURN_R * Math.cos(a);\n      out.hx = Math.cos(a);\n      out.hz = -Math.sin(a);\n    } else {\n      out.x = -TURN_R * Math.sin(a);\n      out.z = -TURN_R - TURN_R * Math.cos(a);\n      out.hx = -Math.cos(a);\n      out.hz = Math.sin(a);\n    }\n    // Each domino in a turn has its own step, going down to the next shelf.\n    out.y = tierY(k) + (tierY(k + 1) - tierY(k)) * (a / Math.PI);\n    out.turn = 1;\n  }\n  out.tier = k;\n}\n\nfunction build(P, ratio) {\n  P.ratio = ratio;\n  const d = ratio * DH;\n  const total = TIERS * RUN + (TIERS - 1) * Math.PI * TURN_R;\n  const q = {};\n  let n = 0;\n  let lastTier = -1;\n  P.tierStart.fill(-1);\n  for (let s = 1.5; s \u003c= total - DH - 1 && n \u003c MAXN; s += d) {\n    pathAt(s, q);\n    P.px[n] = q.x;\n    P.py[n] = q.y;\n    P.pz[n] = q.z;\n    P.hx[n] = q.hx;\n    P.hz[n] = q.hz;\n    if (q.tier !== lastTier && !q.turn) {\n      P.tierStart[q.tier] = n;\n      lastTier = q.tier;\n    }\n    // The builder set every domino with its spots toward the camera.\n    const toCam = -Math.sin(YAW0) * q.hx + Math.cos(YAW0) * q.hz;\n    P.pipFront[n] = toCam > 0 ? 1 : 0;\n    // Their numbers from two irrational strides, so no two neighbours match.\n    P.pip0[n] = PIPMASK[Math.floor(((n * 0.618 + 0.3) % 1) * 7)];\n    P.pip1[n] = PIPMASK[Math.floor(((n * 0.414 + 0.8) % 1) * 7)];\n    P.turn[n] = q.turn;\n    n++;\n  }\n  P.n = n;\n  for (let i = 0; i \u003c n - 1; i++) {\n    const dx = P.px[i + 1] - P.px[i];\n    const dz = P.pz[i + 1] - P.pz[i];\n    P.gap[i] = dx * P.hx[i] + dz * P.hz[i] - DT;\n    P.dy[i] = P.py[i + 1] - P.py[i];\n  }\n  for (let i = 0; i \u003c n; i++) P.hue[i] = (i / n) * 0.85;\n  standAll(P);\n}\n\nfunction standAll(P) {\n  P.th.fill(0);\n  P.om.fill(0);\n  P.st.fill(0);\n}\n\n// The pushing group: a moving front and the dominoes leaning on it. Every\n// angle in it follows from the front's, so it moves as one body.\nfunction pose(P, f, x, out) {\n  out[0] = x;\n  let m = 1;\n  for (let j = 1; j \u003c= GROUP && f - j >= 0 && P.st[f - j] === 2; j++) {\n    const i = f - j;\n    out[j] = Math.min(Math.PI / 2, contact(P.gap[i], P.dy[i], out[j - 1]));\n    m++;\n  }\n  return m;\n}\n\nfunction potential(P, f, x) {\n  const m = pose(P, f, x, P.tmp);\n  let v = 0;\n  for (let j = 0; j \u003c m; j++) v += RCOM * Math.cos(P.tmp[j] - BETA);\n  return v;\n}\n\nfunction inertia(P, f, x) {\n  const e = 1e-4;\n  const m = pose(P, f, x + e, P.tmp);\n  for (let j = 0; j \u003c m; j++) P.tmp2[j] = P.tmp[j];\n  pose(P, f, x - e, P.tmp);\n  let s = 0;\n  for (let j = 0; j \u003c m; j++) {\n    const J = (P.tmp2[j] - P.tmp[j]) / (2 * e);\n    s += J * J;\n  }\n  return INERTIA * s;\n}\n\nfunction stepFront(P, f, g, dt) {\n  const x = P.th[f];\n  const e = 1e-4;\n  const dV = (g * (potential(P, f, x + e) - potential(P, f, x - e))) / (2 * e);\n  const I = inertia(P, f, x);\n  const dI = (inertia(P, f, x + 1e-3) - inertia(P, f, x - 1e-3)) / 2e-3;\n  let w = P.om[f];\n  // A group whose inertia shrinks hands energy back to its front. One whose\n  // inertia grew would make a leaning domino outrun the one under it, and a\n  // contact only pushes: that domino lags instead.\n  w += ((-dV - 0.5 * Math.min(0, dI) * w * w) / I) * dt;\n  let th = x + w * dt;\n  if (th \u003c 0) {\n    // Not pushed hard enough: it rocks back and stands.\n    th = 0;\n    w = 0;\n    P.st[f] = 0;\n  }\n  const last = f === P.n - 1;\n  if (!last) {\n    const next = P.st[f + 1];\n    const c = contact(P.gap[f], P.dy[f], P.th[f + 1]);\n    if (th >= c) {\n      th = c;\n      if (next === 0) {\n        // Generalised momentum carries across: the old front now moves at\n        // J times the new one's rate.\n        const J = (contact(P.gap[f], P.dy[f], 1e-3) - contact(P.gap[f], P.dy[f], 0)) / 1e-3;\n        const before = I * w;\n        P.st[f] = 2;\n        P.st[f + 1] = 1;\n        P.th[f + 1] = 0;\n        P.th[f] = th;\n        const after = inertia(P, f + 1, 0);\n        P.om[f + 1] = (KAPPA * before * J) / after;\n        P.om[f] = 0;\n        return;\n      }\n      // It met dominoes that already lie: the group stops on them.\n      P.st[f] = 2;\n      P.om[f] = 0;\n      P.th[f] = th;\n      return;\n    }\n  } else if (th >= Math.PI / 2) {\n    // The last one lands flat and bounces.\n    th = Math.PI / 2;\n    w = Math.abs(w) > 1.5 ? -0.22 * w : 0;\n    if (w === 0) P.st[f] = 3;\n  }\n  P.th[f] = th;\n  P.om[f] = w;\n}\n\nfunction settle(P) {\n  // Leaning dominoes follow the one they lean on, front to back.\n  for (let i = P.n - 2; i >= 0; i--)\n    if (P.st[i] === 2) P.th[i] = Math.min(Math.PI / 2, contact(P.gap[i], P.dy[i], P.th[i + 1]));\n}\n\nfunction record(P) {\n  if (P.frames >= MAXF) {\n    // Out of tape: keep every other pose and record at half the rate.\n    const n = P.n;\n    for (let f = 0; f \u003c MAXF / 2; f++) for (let i = 0; i \u003c n; i++) P.tape[f * MAXN + i] = P.tape[2 * f * MAXN + i];\n    P.frames = MAXF / 2;\n    P.recEvery *= 2;\n  }\n  const o = P.frames * MAXN;\n  for (let i = 0; i \u003c P.n; i++) P.tape[o + i] = Math.round((P.th[i] / (Math.PI / 2)) * 255);\n  P.frames++;\n}\n\nfunction startPush(P, i) {\n  P.finger = 0;\n  P.fingerOn = i;\n  P.st[i] = 4;\n}\n\nexport function setup(params) {\n  const P = params;\n  // Per domino: pivot (front bottom edge), heading, gap and step to the next.\n  for (const key of [\"px\", \"py\", \"pz\", \"hx\", \"hz\", \"gap\", \"dy\", \"th\", \"om\", \"hue\"]) P[key] = new Float32Array(MAXN);\n  for (const key of [\"st\", \"pipFront\", \"turn\", \"pfOn\"]) P[key] = new Uint8Array(MAXN);\n  P.pip0 = new Uint16Array(MAXN);\n  P.pip1 = new Uint16Array(MAXN);\n  P.tierStart = new Int16Array(TIERS);\n  P.tmp = new Float64Array(GROUP + 2);\n  P.tmp2 = new Float64Array(GROUP + 2);\n  P.tape = new Uint8Array(MAXN * MAXF);\n  P.zbuf = new Float32Array(SW * SH);\n  // Which domino's spotted face each sample shows, plus one.\n  P.own = new Int16Array(SW * SH);\n  P.pf = new Float32Array(MAXN * 6);\n  P.cbuf = new Uint8Array(SW * SH * 3);\n  P.pix = new Float32Array(W * H * 3);\n  P.col = new Float32Array(3);\n  Object.assign(P, { built: false, mode: \"wait\", timer: 1.4, finger: -1, fingerOn: 0, frames: 0, play: 0, colour: 0, speed: 2, yaw: YAW0 });\n  build(P, 0.62);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const cl = (v, a, b) => Math.max(a, Math.min(b, v));\n  dt = Math.min(dt, 0.1);\n  P.colour = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.5, 4);\n  const ratio = 0.62 + 0.18 * cl(k[2], -1, 1);\n  P.yaw = YAW0 + YAW_SWING * cl(k[3], -1, 1);\n  // Everything below runs in film time.\n  dt *= P.speed / 2;\n\n  // A new spacing is a new run: the builder sets it out again and pushes.\n  if (Math.abs(ratio - P.ratio) > 0.004) {\n    build(P, ratio);\n    P.mode = \"wait\";\n    P.timer = P.built ? 0.8 : 1.4;\n    P.finger = -1;\n    P.frames = 0;\n  }\n  P.built = true;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.mode === \"wait\") P.timer = 0;\n    else if (P.mode === \"run\" && P.finger \u003c 0) {\n      // A second push at the start of the first shelf the wave has not reached.\n      let far = 0;\n      for (let i = 0; i \u003c P.n; i++) if (P.st[i] !== 0) far = i;\n      for (let t = 0; t \u003c TIERS; t++) {\n        const s = P.tierStart[t];\n        if (s > far + 2 && P.st[s] === 0) {\n          startPush(P, s);\n          break;\n        }\n      }\n    } else if (P.mode === \"rest\") P.timer = 0;\n  }\n\n  if (P.mode === \"wait\") {\n    P.timer -= dt;\n    if (P.timer \u003c= 0 && P.finger \u003c 0) {\n      startPush(P, 0);\n      Object.assign(P, { mode: \"run\", frames: 0, recEvery: 1, recT: 0, quiet: 0 });\n    }\n  }\n\n  // The fingertip: in for 0.4 s, pushes for 0.22 s until the domino is past\n  // its balance point, lets go and goes back out.\n  if (P.finger >= 0) {\n    P.finger += dt;\n    const i = P.fingerOn;\n    if (P.finger \u003c 0.4) P.th[i] = 0;\n    else if (P.finger \u003c 0.62) P.th[i] = (BETA + 0.07) * smooth(0.4, 0.62, P.finger);\n    else if (P.st[i] === 4) {\n      P.st[i] = 1;\n      P.th[i] = BETA + 0.07;\n      P.om[i] = 0.7;\n    }\n    if (P.finger > 1.1) P.finger = -1;\n  }\n\n  if (P.mode === \"run\") {\n    const steps = Math.ceil(dt / SUBSTEP);\n    const h = dt / steps;\n    for (let s = 0; s \u003c steps; s++) {\n      for (let i = P.n - 1; i >= 0; i--) if (P.st[i] === 1) stepFront(P, i, G0, h);\n      settle(P);\n    }\n    P.recT += dt;\n    if (P.recT >= REC_DT * P.recEvery) {\n      P.recT -= REC_DT * P.recEvery;\n      record(P);\n    }\n    let moving = P.finger >= 0;\n    for (let i = 0; i \u003c P.n && !moving; i++) if (P.st[i] === 1 || P.st[i] === 4) moving = true;\n    P.quiet = moving ? 0 : P.quiet + dt;\n    if (P.quiet > 0.4) {\n      record(P);\n      P.mode = \"rest\";\n      P.timer = 2.2;\n    }\n  } else if (P.mode === \"rest\") {\n    P.timer -= dt;\n    if (P.timer \u003c= 0) {\n      P.mode = \"rewind\";\n      P.play = P.frames - 1;\n    }\n  } else if (P.mode === \"rewind\") {\n    // The film runs backwards three times as fast; every domino springs up\n    // the way it fell.\n    P.play -= (dt * REWIND) / (REC_DT * P.recEvery);\n    if (P.play \u003c= 0) {\n      standAll(P);\n      P.mode = \"wait\";\n      P.timer = 1.1;\n    } else {\n      const f0 = Math.floor(P.play);\n      const f1 = Math.min(P.frames - 1, f0 + 1);\n      const a = P.play - f0;\n      const s = Math.PI / 2 / 255;\n      for (let i = 0; i \u003c P.n; i++)\n        P.th[i] = s * ((1 - a) * P.tape[f0 * MAXN + i] + a * P.tape[f1 * MAXN + i]);\n    }\n  }\n}\n\n// The camera: screen right r, screen up u, c toward the camera.\nfunction camera(P) {\n  const sp = Math.sin(P.yaw);\n  const cp = Math.cos(P.yaw);\n  const se = Math.sin(PITCH);\n  const ce = Math.cos(PITCH);\n  P.rx = cp;\n  P.rz = sp;\n  P.ux = sp * se;\n  P.uy = ce;\n  P.uz = -cp * se;\n  P.cx = -sp * ce;\n  P.cy = se;\n  P.cz = cp * ce;\n  // Centre the run on the panel by its top and bottom shelves' corners.\n  const b = [1e9, -1e9, 1e9, -1e9];\n  for (const x of [-TURN_R - 3, RUN + TURN_R + 3])\n    for (const z of [DWID, -BACK - DWID])\n      for (const y of [tierY(0) + DH + 1, tierY(TIERS - 1) - 2]) {\n        const sx = x * P.rx + z * P.rz;\n        const sy = -(x * P.ux + y * P.uy + z * P.uz);\n        b[0] = Math.min(b[0], sx);\n        b[1] = Math.max(b[1], sx);\n        b[2] = Math.min(b[2], sy);\n        b[3] = Math.max(b[3], sy);\n      }\n  P.X0 = W / 2 - (b[0] + b[1]) / 2;\n  P.Y0 = H / 2 - (b[2] + b[3]) / 2;\n}\n\n// One lamp, low on the left: it lights a standing domino's face full on and\n// only grazes one that lies. The room adds a little light to the wood.\nconst LX = -0.975;\nconst LY = 0.05;\n\n// One face of a box into the samples where it is nearest: corner o, edges a\n// and b (across and up on a spotted face), outward normal n.\nfunction face(P, ox, oy, oz, ax, ay, az, bx, by, bz, nx, ny, nz, col, spots) {\n  if (nx * P.cx + ny * P.cy + nz * P.cz \u003c= 0.02) return;\n  const shade = P.amb + P.dif * Math.max(0, nx * LX + ny * LY) + P.front * Math.max(0, nz);\n  const cr = col[0] * shade;\n  const cg = col[1] * shade;\n  const cb = col[2] * shade;\n  const sx = (P.X0 + ox * P.rx + oz * P.rz) * SS;\n  const sy = (P.Y0 - (ox * P.ux + oy * P.uy + oz * P.uz)) * SS;\n  const sd = ox * P.cx + oy * P.cy + oz * P.cz;\n  const eax = (ax * P.rx + az * P.rz) * SS;\n  const eay = -(ax * P.ux + ay * P.uy + az * P.uz) * SS;\n  const ead = ax * P.cx + ay * P.cy + az * P.cz;\n  const ebx = (bx * P.rx + bz * P.rz) * SS;\n  const eby = -(bx * P.ux + by * P.uy + bz * P.uz) * SS;\n  const ebd = bx * P.cx + by * P.cy + bz * P.cz;\n  const det = eax * eby - eay * ebx;\n  if (Math.abs(det) \u003c 0.05) return;\n  const inv = 1 / det;\n  const minX = Math.max(0, Math.floor(sx + Math.min(0, eax) + Math.min(0, ebx)));\n  const maxX = Math.min(SW - 1, Math.ceil(sx + Math.max(0, eax) + Math.max(0, ebx)));\n  const minY = Math.max(0, Math.floor(sy + Math.min(0, eay) + Math.min(0, eby)));\n  const maxY = Math.min(SH - 1, Math.ceil(sy + Math.max(0, eay) + Math.max(0, eby)));\n  const zb = P.zbuf;\n  const cbuf = P.cbuf;\n  const own = P.own;\n  const id = spots ? P.cur + 1 : 0;\n  // Spots once the face is wide and tall enough for three by three a half.\n  const la = Math.hypot(eax, eay);\n  const lb = Math.hypot(ebx, eby);\n  const showPips = id > 0 && Math.abs(det) > 2.6 * SS * lb && Math.abs(det) > 6 * SS * la;\n  if (showPips) {\n    P.pf.set([sx, sy, eax, eay, ebx, eby], P.cur * 6);\n    P.pfOn[P.cur] = 1;\n  }\n  for (let y = minY; y \u003c= maxY; y++) {\n    const qy = y + 0.5 - sy;\n    for (let x = minX; x \u003c= maxX; x++) {\n      const qx = x + 0.5 - sx;\n      const a = (qx * eby - qy * ebx) * inv;\n      if (a \u003c 0 || a > 1) continue;\n      const b = (eax * qy - eay * qx) * inv;\n      if (b \u003c 0 || b > 1) continue;\n      const d = sd + a * ead + b * ebd;\n      const s = y * SW + x;\n      if (d \u003c= zb[s]) continue;\n      zb[s] = d;\n      own[s] = id;\n      // The bar between the two halves.\n      const k = showPips && Math.abs(b - 0.5) \u003c 0.03 ? 0.5 : 1;\n      cbuf[s * 3] = cr * k;\n      cbuf[s * 3 + 1] = cg * k;\n      cbuf[s * 3 + 2] = cb * k;\n    }\n  }\n}\n\n// A box from corner o along three edges a (thickness), b (across), c (up).\n// pip: -1 no spots, 0 spots on the a = 0 face, 1 on the a = 1 face.\nfunction box(P, ox, oy, oz, ax, ay, az, bx, by, bz, cx, cy, cz, la, lb, lc, col, pip) {\n  const na = 1 / la;\n  const nb = 1 / lb;\n  const nc = 1 / lc;\n  face(P, ox, oy, oz, bx, by, bz, cx, cy, cz, -ax * na, -ay * na, -az * na, col, pip === 0);\n  face(P, ox + ax, oy + ay, oz + az, bx, by, bz, cx, cy, cz, ax * na, ay * na, az * na, col, pip === 1);\n  face(P, ox, oy, oz, ax, ay, az, cx, cy, cz, -bx * nb, -by * nb, -bz * nb, col, false);\n  face(P, ox + bx, oy + by, oz + bz, ax, ay, az, cx, cy, cz, bx * nb, by * nb, bz * nb, col, false);\n  face(P, ox, oy, oz, ax, ay, az, bx, by, bz, -cx * nc, -cy * nc, -cz * nc, col, false);\n  face(P, ox + cx, oy + cy, oz + cz, ax, ay, az, bx, by, bz, cx * nc, cy * nc, cz * nc, col, false);\n}\n\nconst WOOD = [52, 34, 22];\nconst WOOD_EDGE = [96, 64, 40];\n\nexport function draw(display, params, time) {\n  const P = params;\n  camera(P);\n  P.zbuf.fill(-1e9);\n  P.own.fill(0);\n  P.pfOn.fill(0);\n  P.cur = -1;\n\n  // Dark wood that takes the room's light on its front edges, so a shelf\n  // reads as one dim line: a plank under each straight run, and in each turn\n  // a spiral stair, a post with a step out from it under every domino.\n  Object.assign(P, { amb: 0.1, dif: 0.2, front: 0.3 });\n  const deep = DWID + 2.4;\n  for (let k = 0; k \u003c TIERS; k++) {\n    const y = tierY(k);\n    box(P, -2, y - 1, (k % 2 ? -BACK : 0) + deep / 2, RUN + 4, 0, 0, 0, 0, -deep, 0, 1, 0, RUN + 4, deep, 1, WOOD_EDGE, -1);\n    const tall = y - tierY(k + 1);\n    if (k \u003c TIERS - 1) box(P, (k % 2 ? 0 : RUN) - 0.8, y - tall, -TURN_R - 0.8, 1.6, 0, 0, 0, 0, 1.6, 0, tall, 0, 1.6, 1.6, tall, WOOD, -1);\n  }\n  const out = TURN_R + DWID / 2 + 0.8;\n  const step = DT + 2.8;\n  for (let i = 0; i \u003c P.n; i++) {\n    const hx = P.hx[i];\n    const hz = P.hz[i];\n    if (P.turn[i]) box(P, P.px[i] - hx * (step - 1.4) + hz * TURN_R, P.py[i] - 1, P.pz[i] - hz * (step - 1.4) - hx * TURN_R, hx * step, 0, hz * step, -hz * out, 0, hx * out, 0, 1, 0, step, out, 1, WOOD_EDGE, -1);\n  }\n\n  // The dominoes, in the lamp's light.\n  Object.assign(P, { amb: 0.04, dif: 0.96, front: 0 });\n  const q = P.col;\n  const sat = smooth(0, 0.35, P.colour);\n  for (let i = 0; i \u003c P.n; i++) {\n    const s = Math.sin(P.th[i]);\n    const c = Math.cos(P.th[i]);\n    const hx = P.hx[i];\n    const hz = P.hz[i];\n    // Tipped edges: thickness along the heading, width across, height up.\n    const ax = hx * c * DT;\n    const az = hz * c * DT;\n    const ox = P.px[i] - ax + hz * (DWID / 2);\n    const oz = P.pz[i] - az - hx * (DWID / 2);\n    hsvInto(q, P.hue[i] + P.colour);\n    for (let j = 0; j \u003c 3; j++) q[j] = IVORY[j] + (q[j] - IVORY[j]) * sat;\n    P.cur = i;\n    box(P, ox, P.py[i] + s * DT, oz, ax, -s * DT, az, -hz * DWID, 0, hx * DWID, hx * s * DH, c * DH, hz * s * DH, DT, DWID, DH, q, P.pipFront[i]);\n  }\n\n  // Resolve the samples over a dark wall, a little warmer at the foot.\n  const pix = P.pix;\n  const zb = P.zbuf;\n  const cb = P.cbuf;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let j = 0; j \u003c 4; j++) {\n        const s = (y * SS + (j >> 1)) * SW + x * SS + (j & 1);\n        if (zb[s] > -1e8) {\n          r += cb[s * 3];\n          g += cb[s * 3 + 1];\n          b += cb[s * 3 + 2];\n        } else {\n          r += 5 + (3 * y) / H;\n          g += 5 + (2 * y) / H;\n          b += 9;\n        }\n      }\n      const p = (y * W + x) * 3;\n      pix[p] = r / 4;\n      pix[p + 1] = g / 4;\n      pix[p + 2] = b / 4;\n    }\n\n  drawPips(P);\n  if (P.finger >= 0) drawFinger(P);\n\n  for (let p = 0; p \u003c W * H; p++) display.setPixel(p % W, Math.floor(p / W), Math.min(255, pix[p * 3]), Math.min(255, pix[p * 3 + 1]), Math.min(255, pix[p * 3 + 2]));\n}\n\n// The spots, one dark LED each where that LED shows the spotted face. Drawn\n// soft, they smeared half of every face to grey.\nfunction drawPips(P) {\n  const pix = P.pix;\n  const own = P.own;\n  for (let i = 0; i \u003c P.n; i++) {\n    if (!P.pfOn[i]) continue;\n    const o = i * 6;\n    for (let half = 0; half \u003c 2; half++) {\n      const mask = half ? P.pip1[i] : P.pip0[i];\n      for (let bit = 0; bit \u003c 9; bit++) {\n        if (!(mask & (1 \u003c\u003c bit))) continue;\n        const a = 0.2 + 0.3 * (bit % 3);\n        const b = 0.5 * half + 0.1 + 0.15 * Math.floor(bit / 3);\n        const x = Math.floor((P.pf[o] + a * P.pf[o + 2] + b * P.pf[o + 4]) / SS);\n        const y = Math.floor((P.pf[o + 1] + a * P.pf[o + 3] + b * P.pf[o + 5]) / SS);\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        let mine = 0;\n        for (let j = 0; j \u003c SS; j++) for (let k = 0; k \u003c SS; k++) if (own[(y * SS + j) * SW + x * SS + k] === i + 1) mine++;\n        if (mine \u003c 3) continue;\n        const p = (y * W + x) * 3;\n        pix[p] *= 0.08;\n        pix[p + 1] *= 0.08;\n        pix[p + 2] *= 0.08;\n      }\n    }\n  }\n}\n\n// The fingertip comes from behind the domino it pushes, a little from above,\n// and touches the domino's back three quarters of the way up.\nfunction drawFinger(P) {\n  const i = P.fingerOn;\n  const s = Math.sin(P.th[i]);\n  const c = Math.cos(P.th[i]);\n  const hx = P.hx[i];\n  const hz = P.hz[i];\n  const back = DH * 0.75 * s - DT * c;\n  const tx = P.px[i] + hx * back;\n  const ty = P.py[i] + DT * s + c * DH * 0.75;\n  const tz = P.pz[i] + hz * back;\n  // Backwards along the heading on the panel, tilted 20 degrees up.\n  const dx = -(hx * P.rx + hz * P.rz);\n  const dy = hx * P.ux + hz * P.uz;\n  const up = dx > 0 ? -0.34 : 0.34;\n  const l = Math.hypot(dx, dy) || 1;\n  const ex = (dx * Math.cos(up) - dy * Math.sin(up)) / l;\n  const ey = (dx * Math.sin(up) + dy * Math.cos(up)) / l;\n  const f = P.finger;\n  const out = 2 + 26 * (f \u003c 0.4 ? 1 - smooth(0, 0.4, f) : smooth(0.62, 1.05, f));\n  const ax = P.X0 + tx * P.rx + tz * P.rz + ex * out;\n  const ay = P.Y0 - (tx * P.ux + ty * P.uy + tz * P.uz) + ey * out;\n  const pix = P.pix;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x + 0.5 - ax;\n      const py = y + 0.5 - ay;\n      const along = Math.max(0, px * ex + py * ey);\n      const cov = Math.min(1, 2.2 - Math.hypot(px - along * ex, py - along * ey));\n      if (cov \u003c= 0) continue;\n      // Skin, lighter along the top, and the nail at the tip.\n      const top = ((ex > 0 ? ey : -ey) * px - (ex > 0 ? ex : -ex) * py) / 1.7;\n      const nail = along \u003c 2.6 && top > -0.2;\n      const p = (y * W + x) * 3;\n      pix[p] += ((nail ? 250 : 232 + 14 * top) - pix[p]) * cov;\n      pix[p + 1] += ((nail ? 222 : 170 + 18 * top) - pix[p + 1]) * cov;\n      pix[p + 2] += ((nail ? 212 : 138 + 16 * top) - pix[p + 2]) * cov;\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Colour=0..1, Speed=0.5..4, Spacing=-1..1, Angle=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Colour","min":0,"max":1,"about":"Ivory dominoes with black spots at 0; turned up, the run becomes a set of coloured toppling dominoes whose hues walk along the chain."},{"name":"Speed","min":0.5,"max":4,"about":"How fast the film runs, finger and all: at 2 the forty dominoes fall in under five seconds, at 0.5 the wave crawls, at 4 it is half of real speed."},{"name":"Spacing","min":-1,"max":1,"about":"The gap between dominoes, from 0.44 to 0.8 of a domino's height; a wider gap means fewer dominoes and a flatter pile once they fall."},{"name":"Angle","min":-1,"max":1,"about":"Swings the camera round the run, from almost straight side-on, where only the narrow edges show, to well round, where the spotted faces fill the shelves."}],"start":[0,2,0,0.06],"measures":{"motion":0.1541,"detail":0.079,"edges":0.5891,"complexity":0.4474,"coverage":0.2699,"colour":0.0868,"drift":0.2609},"knobResponse":[0.2214,0.1713,0.2211,0.2694]},{"slug":"dragon","title":"Dragon Fold","family":"fractal","round":2,"note":"종이띠를 반으로 접기를 열 번 되풀이하면 헤이웨이 드래곤이 돼요. 세대마다 선 전체의 복사본이 끝점을 축으로 90도 돌아 나오고, 다 접히면 거꾸로 닫혀요.","idea":"A strip folded in half again and again opens into the Heighway dragon: each new generation swings a copy of the whole line a quarter turn out of its own end, and later the folds close back up.","buttons":"K1 tap turns the folding round, so it closes up or opens out from where it is.","code":"// ===== Patternflow pattern =====\n// Title:   Dragon Fold\n// Family:  fractal\n// Idea:    A strip folded in half again and again opens into the Heighway dragon: each new generation swings a copy of the whole line a quarter turn out of its own end, and later the folds close back up.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Fold Speed=0.5..6, Generations=8..10, Dragons=1..4\n//\n// Knob 1: Hue. Where the colour that runs along the line starts.\n// Knob 2: Fold Speed. How quickly one generation swings out of the last.\n// Knob 3: Generations. How many folds before it holds, from 256 segments to 1024.\n// Knob 4: Dragons. One to four dragons from the same first point, the second turned half round and the others a quarter; four of them tile the plane around that point.\n// Buttons: K1 tap turns the folding round, so it closes up or opens out from where it is.\n\nconst W = 64;\nconst H = 128;\nconst MAX_GEN = 10;\nconst COUNT = 1 \u003c\u003c MAX_GEN;\n// Panel LEDs per unit of the line's end-to-end span. With 64 a held\n// dragon's segments land on whole LEDs: 4 LEDs long at 8 folds, 2 diagonal\n// steps at 9, 2 LEDs at 10.\nconst K = 64;\nconst HOLD = 4;\nconst QUARTERS = [0, 2, 1, 3];\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  // The deepest dragon's corners. A shallower generation is its first 2^n + 1\n  // points, because each fold only adds to the end.\n  const px = new Int32Array(COUNT + 1);\n  const py = new Int32Array(COUNT + 1);\n  px[1] = 1;\n  for (let n = 0; n \u003c MAX_GEN; n++) {\n    const m = 1 \u003c\u003c n;\n    for (let k = 1; k \u003c= m; k++) {\n      // The new half is the old one walked backward and turned a quarter about the end.\n      const dx = px[m - k] - px[m];\n      const dy = py[m - k] - py[m];\n      px[m + k] = px[m] - dy;\n      py[m + k] = py[m] + dx;\n    }\n  }\n  params.px = px;\n  params.py = py;\n  params.sx = new Float32Array(COUNT + 1);\n  params.sy = new Float32Array(COUNT + 1);\n  params.rgb = new Float32Array(W * H * 3);\n  params.colour = new Float32Array(4 * 3 * 64);\n  params.g = -1;\n  params.dir = 1;\n  params.hold = 0;\n  params.flow = 0;\n  params.run = 0;\n  params.ox = 21;\n  params.oy = 37;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 1];\n  const gen = Math.max(1, Math.min(MAX_GEN, Math.round(k[2])));\n  params.gen = gen;\n  params.dragons = Math.max(1, Math.min(4, Math.round(k[3])));\n  // Open two folds short of the top, so the first seconds show folding.\n  if (params.g \u003c 0) params.g = Math.max(0, gen - 2);\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.dir = -params.dir;\n    params.hold = 0;\n  }\n  // A fold of a long line takes longer than a fold of a short one.\n  const n = Math.floor(params.g);\n  const step = (dt * k[1]) / (1 + 0.26 * n);\n  if (params.hold > 0) {\n    params.hold -= dt;\n    if (params.hold \u003c= 0) params.dir = params.g >= gen ? -1 : 1;\n  } else if (params.dir > 0) {\n    params.g = Math.min(gen, params.g + step);\n    if (params.g >= gen) params.hold = HOLD;\n  } else {\n    params.g = Math.max(0, params.g - step);\n    if (params.g \u003c= 0) params.hold = 0.6;\n  }\n  if (params.g > gen) {\n    params.dir = -1;\n    params.hold = 0;\n  }\n  params.flow += dt * 0.025;\n  params.run += dt * 0.12;\n\n  // One dragon sits in the middle of its own box; more share the panel's centre.\n  const tx = params.dragons > 1 ? 32 : 21;\n  const ty = params.dragons > 1 ? 64 : 37;\n  const ease = Math.min(1, dt * 2.5);\n  params.ox += (tx - params.ox) * ease;\n  params.oy += (ty - params.oy) * ease;\n\n  // Colours along the line, 64 steps per dragon, yellow through green to cyan at K1 0.\n  const hue = k[0] + 0.11 + params.flow;\n  for (let d = 0; d \u003c 4; d++) {\n    for (let s = 0; s \u003c 64; s++) hsv(hue + d * 0.27 + (s / 63) * 0.38, 0.85, 0.9, params.colour, (d * 64 + s) * 3);\n  }\n}\n\nfunction plot(rgb, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  rgb[o] = r;\n  rgb[o + 1] = g;\n  rgb[o + 2] = b;\n}\n\n// A crisp line one LED wide, both ends included.\nfunction line(rgb, x0, y0, x1, y1, r, g, b) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const steps = Math.max(1, Math.ceil(Math.max(Math.abs(dx), Math.abs(dy))));\n  for (let s = 0; s \u003c= steps; s++) {\n    const t = s / steps;\n    plot(rgb, Math.round(x0 + dx * t), Math.round(y0 + dy * t), r, g, b);\n  }\n}\n\nexport function draw(display, params, time) {\n  const rgb = params.rgb;\n  rgb.fill(0);\n  const g = params.g;\n  const n = Math.min(MAX_GEN - 1, Math.floor(g));\n  const f = g - n;\n  const e = f * f * (3 - 2 * f);\n  const m = 1 \u003c\u003c n;\n  // Points past 2^(n+1) are not drawn. Those past 2^n are mid-fold: turned\n  // back toward the old half by the part of the quarter turn still to go.\n  const last = f > 0 ? 2 * m : m;\n  const turn = (e - 1) * Math.PI * 0.5;\n  const tc = Math.cos(turn);\n  const ts = Math.sin(turn);\n  // The view divides by the span from first point to last, (1 - i)^g, so the\n  // dragon keeps its size and its heading while it folds.\n  const span = Math.pow(2, -(n + e) / 2) * K;\n  const va = (Math.PI / 4) * (n + e);\n  const vc = Math.cos(va) * span;\n  const vs = Math.sin(va) * span;\n  const px = params.px;\n  const py = params.py;\n  const sx = params.sx;\n  const sy = params.sy;\n  const cx = px[m];\n  const cy = py[m];\n  const col = params.colour;\n  const total = 1 \u003c\u003c params.gen;\n  for (let d = params.dragons - 1; d >= 0; d--) {\n    // The second dragon is the first turned half round about the first point,\n    // so two of them stand up and down the tall panel; the third and fourth\n    // fill the quarter turns between.\n    const q = QUARTERS[d];\n    const dc = q === 0 ? 1 : q === 2 ? -1 : 0;\n    const ds = q === 1 ? 1 : q === 3 ? -1 : 0;\n    for (let i = 0; i \u003c= last; i++) {\n      let x = px[i];\n      let y = py[i];\n      if (i > m) {\n        const ax = x - cx;\n        const ay = y - cy;\n        x = cx + ax * tc - ay * ts;\n        y = cy + ax * ts + ay * tc;\n      }\n      const rx = x * dc - y * ds;\n      const ry = x * ds + y * dc;\n      // Down the panel is along the span, across is the quarter turn from it.\n      sy[i] = params.oy + rx * vc - ry * vs;\n      sx[i] = params.ox + rx * vs + ry * vc;\n    }\n    // Newest segments first, so a half that has only begun to swing out\n    // stays under the line it is leaving.\n    for (let i = last - 1; i >= 0; i--) {\n      const c = (d * 64 + Math.min(63, Math.floor((i / total) * 64))) * 3;\n      // A slow swell of light walks from the first point to the last.\n      const along = i / total - params.run;\n      const lift = 0.8 + 0.2 * Math.cos((along - Math.floor(along)) * Math.PI * 2 * 3);\n      line(rgb, sx[i], sy[i], sx[i + 1], sy[i + 1], col[c] * lift, col[c + 1] * lift, col[c + 2] * lift);\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[o], rgb[o + 1], rgb[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-dragon","type":"code","name":"dragon","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dragon Fold\n// Family:  fractal\n// Idea:    A strip folded in half again and again opens into the Heighway dragon: each new generation swings a copy of the whole line a quarter turn out of its own end, and later the folds close back up.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Fold Speed=0.5..6, Generations=8..10, Dragons=1..4\n//\n// Knob 1: Hue. Where the colour that runs along the line starts.\n// Knob 2: Fold Speed. How quickly one generation swings out of the last.\n// Knob 3: Generations. How many folds before it holds, from 256 segments to 1024.\n// Knob 4: Dragons. One to four dragons from the same first point, the second turned half round and the others a quarter; four of them tile the plane around that point.\n// Buttons: K1 tap turns the folding round, so it closes up or opens out from where it is.\n\nconst W = 64;\nconst H = 128;\nconst MAX_GEN = 10;\nconst COUNT = 1 \u003c\u003c MAX_GEN;\n// Panel LEDs per unit of the line's end-to-end span. With 64 a held\n// dragon's segments land on whole LEDs: 4 LEDs long at 8 folds, 2 diagonal\n// steps at 9, 2 LEDs at 10.\nconst K = 64;\nconst HOLD = 4;\nconst QUARTERS = [0, 2, 1, 3];\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  // The deepest dragon's corners. A shallower generation is its first 2^n + 1\n  // points, because each fold only adds to the end.\n  const px = new Int32Array(COUNT + 1);\n  const py = new Int32Array(COUNT + 1);\n  px[1] = 1;\n  for (let n = 0; n \u003c MAX_GEN; n++) {\n    const m = 1 \u003c\u003c n;\n    for (let k = 1; k \u003c= m; k++) {\n      // The new half is the old one walked backward and turned a quarter about the end.\n      const dx = px[m - k] - px[m];\n      const dy = py[m - k] - py[m];\n      px[m + k] = px[m] - dy;\n      py[m + k] = py[m] + dx;\n    }\n  }\n  params.px = px;\n  params.py = py;\n  params.sx = new Float32Array(COUNT + 1);\n  params.sy = new Float32Array(COUNT + 1);\n  params.rgb = new Float32Array(W * H * 3);\n  params.colour = new Float32Array(4 * 3 * 64);\n  params.g = -1;\n  params.dir = 1;\n  params.hold = 0;\n  params.flow = 0;\n  params.run = 0;\n  params.ox = 21;\n  params.oy = 37;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 1];\n  const gen = Math.max(1, Math.min(MAX_GEN, Math.round(k[2])));\n  params.gen = gen;\n  params.dragons = Math.max(1, Math.min(4, Math.round(k[3])));\n  // Open two folds short of the top, so the first seconds show folding.\n  if (params.g \u003c 0) params.g = Math.max(0, gen - 2);\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.dir = -params.dir;\n    params.hold = 0;\n  }\n  // A fold of a long line takes longer than a fold of a short one.\n  const n = Math.floor(params.g);\n  const step = (dt * k[1]) / (1 + 0.26 * n);\n  if (params.hold > 0) {\n    params.hold -= dt;\n    if (params.hold \u003c= 0) params.dir = params.g >= gen ? -1 : 1;\n  } else if (params.dir > 0) {\n    params.g = Math.min(gen, params.g + step);\n    if (params.g >= gen) params.hold = HOLD;\n  } else {\n    params.g = Math.max(0, params.g - step);\n    if (params.g \u003c= 0) params.hold = 0.6;\n  }\n  if (params.g > gen) {\n    params.dir = -1;\n    params.hold = 0;\n  }\n  params.flow += dt * 0.025;\n  params.run += dt * 0.12;\n\n  // One dragon sits in the middle of its own box; more share the panel's centre.\n  const tx = params.dragons > 1 ? 32 : 21;\n  const ty = params.dragons > 1 ? 64 : 37;\n  const ease = Math.min(1, dt * 2.5);\n  params.ox += (tx - params.ox) * ease;\n  params.oy += (ty - params.oy) * ease;\n\n  // Colours along the line, 64 steps per dragon, yellow through green to cyan at K1 0.\n  const hue = k[0] + 0.11 + params.flow;\n  for (let d = 0; d \u003c 4; d++) {\n    for (let s = 0; s \u003c 64; s++) hsv(hue + d * 0.27 + (s / 63) * 0.38, 0.85, 0.9, params.colour, (d * 64 + s) * 3);\n  }\n}\n\nfunction plot(rgb, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  rgb[o] = r;\n  rgb[o + 1] = g;\n  rgb[o + 2] = b;\n}\n\n// A crisp line one LED wide, both ends included.\nfunction line(rgb, x0, y0, x1, y1, r, g, b) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const steps = Math.max(1, Math.ceil(Math.max(Math.abs(dx), Math.abs(dy))));\n  for (let s = 0; s \u003c= steps; s++) {\n    const t = s / steps;\n    plot(rgb, Math.round(x0 + dx * t), Math.round(y0 + dy * t), r, g, b);\n  }\n}\n\nexport function draw(display, params, time) {\n  const rgb = params.rgb;\n  rgb.fill(0);\n  const g = params.g;\n  const n = Math.min(MAX_GEN - 1, Math.floor(g));\n  const f = g - n;\n  const e = f * f * (3 - 2 * f);\n  const m = 1 \u003c\u003c n;\n  // Points past 2^(n+1) are not drawn. Those past 2^n are mid-fold: turned\n  // back toward the old half by the part of the quarter turn still to go.\n  const last = f > 0 ? 2 * m : m;\n  const turn = (e - 1) * Math.PI * 0.5;\n  const tc = Math.cos(turn);\n  const ts = Math.sin(turn);\n  // The view divides by the span from first point to last, (1 - i)^g, so the\n  // dragon keeps its size and its heading while it folds.\n  const span = Math.pow(2, -(n + e) / 2) * K;\n  const va = (Math.PI / 4) * (n + e);\n  const vc = Math.cos(va) * span;\n  const vs = Math.sin(va) * span;\n  const px = params.px;\n  const py = params.py;\n  const sx = params.sx;\n  const sy = params.sy;\n  const cx = px[m];\n  const cy = py[m];\n  const col = params.colour;\n  const total = 1 \u003c\u003c params.gen;\n  for (let d = params.dragons - 1; d >= 0; d--) {\n    // The second dragon is the first turned half round about the first point,\n    // so two of them stand up and down the tall panel; the third and fourth\n    // fill the quarter turns between.\n    const q = QUARTERS[d];\n    const dc = q === 0 ? 1 : q === 2 ? -1 : 0;\n    const ds = q === 1 ? 1 : q === 3 ? -1 : 0;\n    for (let i = 0; i \u003c= last; i++) {\n      let x = px[i];\n      let y = py[i];\n      if (i > m) {\n        const ax = x - cx;\n        const ay = y - cy;\n        x = cx + ax * tc - ay * ts;\n        y = cy + ax * ts + ay * tc;\n      }\n      const rx = x * dc - y * ds;\n      const ry = x * ds + y * dc;\n      // Down the panel is along the span, across is the quarter turn from it.\n      sy[i] = params.oy + rx * vc - ry * vs;\n      sx[i] = params.ox + rx * vs + ry * vc;\n    }\n    // Newest segments first, so a half that has only begun to swing out\n    // stays under the line it is leaving.\n    for (let i = last - 1; i >= 0; i--) {\n      const c = (d * 64 + Math.min(63, Math.floor((i / total) * 64))) * 3;\n      // A slow swell of light walks from the first point to the last.\n      const along = i / total - params.run;\n      const lift = 0.8 + 0.2 * Math.cos((along - Math.floor(along)) * Math.PI * 2 * 3);\n      line(rgb, sx[i], sy[i], sx[i + 1], sy[i + 1], col[c] * lift, col[c + 1] * lift, col[c + 2] * lift);\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[o], rgb[o + 1], rgb[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Fold Speed=0.5..6, Generations=8..10, Dragons=1..4","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Where the colour that runs along the line starts."},{"name":"Fold Speed","min":0.5,"max":6,"about":"How quickly one generation swings out of the last."},{"name":"Generations","min":8,"max":10,"about":"How many folds before it holds, from 256 segments to 1024."},{"name":"Dragons","min":1,"max":4,"about":"One to four dragons from the same first point, the second turned half round and the others a quarter; four of them tile the plane around that point."}],"start":[0,2,8,1],"measures":{"motion":0.7649,"detail":0.0834,"edges":0.9552,"complexity":0.1947,"coverage":0.1168,"colour":0.2214,"drift":0.0797},"knobResponse":[0.0573,0.0725,0.0977,0.1563]},{"slug":"dripstone","title":"Dripstone","family":"mineral","round":19,"note":"석회동굴 단면이 128줄을 다 써요. 종유석 끝에서 물방울이 부풀다 떨어져 석순을 한 방울씩 키우고 웅덩이에 동심원을 그리는 사이, 쇼케이브 조명이 청록과 보라, 흰빛으로 번갈아 바뀌고 동굴 탐험가의 헤드램프가 옆으로 훑고 지나가요.","idea":"A limestone cave in cross-section fills the panel, with stalactites hanging over stalagmites and columns and a banded flowstone curtain on one side, while drops swell at the tips, fall and splash on the stalagmites or ring the pool on the floor, each drop lengthening its formation a little under a show-cave light sequence and a caver's passing headlamp.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Dripstone\n// Family:  mineral\n// Idea:    A limestone cave in cross-section fills the panel, with stalactites hanging over stalagmites and columns and a banded flowstone curtain on one side, while drops swell at the tips, fall and splash on the stalagmites or ring the pool on the floor, each drop lengthening its formation a little under a show-cave light sequence and a caver's passing headlamp.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after show-cave lighting and the banded \"bacon\" drapery of limestone caves\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Age=0..1, Damp=0..1\n//\n// Knob 1: Lamp. Turns the two coloured show lamps round the colour wheel together, from aqua and violet at 0; the warm lamp behind the curtain and the headlamp stay white.\n// Knob 2: Speed. How fast cave time runs: at 2 a drop falls the 100 rows from the roof in 1.3 s and the light sequence takes 15 s round its three lamps; each drop that lands lengthens its stalagmite and stalactite by about half a row.\n// Knob 3: Age. How far the cave has grown, from short stalactites, soda straws and one column at 0 to a hall of thick columns at 1, with the curtain hanging twice as far down and the straws thickened into carrots. A straw that grows too long snaps and falls into the pool.\n// Knob 4: Damp. How wet the cave is: at 0 the stone is pale and chalky and the pool sits in a hollow of the floor; at 1 the pool covers the whole floor, the drips come three times as often, and the stone turns dark and shines with films of water creeping down the wall.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Drops fall at this many rows per second squared of cave time.\nconst GRAV = 110;\nconst MAXP = 160;\n// How far in front of the stone the lamps stand, in LEDs.\nconst DZ = 16;\n// The rows the wall's water films repeat over.\nconst FT = 144;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  return [k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p, k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p, k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p];\n}\n\n// The flowstone's bands, from cream through orange to rust and brown.\nconst BANDS = [\n  [0.95, 0.86, 0.68],\n  [0.92, 0.52, 0.2],\n  [0.98, 0.74, 0.42],\n  [0.62, 0.26, 0.12],\n  [0.96, 0.9, 0.78],\n  [0.84, 0.4, 0.16],\n  [0.45, 0.2, 0.1],\n];\n\nexport function setup(params) {\n  const P = params;\n  const lat = new Float32Array(65536);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  P.lat = lat;\n  P.ceil = new Int16Array(W);\n  P.flo = new Int16Array(W);\n  P.edge = new Float32Array(W);\n  // The curtain hangs from the roof where it slopes down to one side wall.\n  const right = Math.random() \u003c 0.5;\n  const cw = 20 + Math.floor(Math.random() * 4);\n  P.cx0 = right ? W - cw : 0;\n  P.cx1 = right ? W : cw;\n  P.cw = cw;\n  P.right = right;\n  P.cph = Math.random() * 6.28;\n  P.cfold = 6.5 + Math.random() * 2;\n  // The pool lies in a hollow of the floor away from the curtain.\n  P.bc = right ? 20 + Math.random() * 8 : 36 + Math.random() * 8;\n  P.bw = 11 + Math.random() * 3;\n  let deep = 0;\n  for (let x = 0; x \u003c W; x++) {\n    let c = 8 + 4 * vn(lat, x / 9, 5.5) + 1.6 * vn(lat, x / 3, 9.5);\n    if (x >= P.cx0 && x \u003c P.cx1) c += 9 * (right ? (x - P.cx0) / cw : (P.cx1 - 1 - x) / cw);\n    P.ceil[x] = Math.round(c);\n    let f = 115 + 3 * vn(lat, x / 8, 15.5) + 1.5 * vn(lat, x / 3, 19.5);\n    const b = (x + 0.5 - P.bc) / P.bw;\n    if (Math.abs(b) \u003c 1) f += 8.5 * Math.pow(1 - b * b, 0.6);\n    P.flo[x] = Math.round(f);\n    deep = Math.max(deep, P.flo[x]);\n  }\n  P.deep = deep;\n  bakeStone(P);\n\n  // Stalactite and stalagmite pairs across the width, none over the pool.\n  P.sites = [];\n  let x = 2 + Math.random() * 3;\n  while (x \u003c W - 2) {\n    const xi = Math.floor(x);\n    if (Math.abs(xi + 0.5 - P.bc) > P.bw - 4) P.sites.push(site(xi, 0));\n    x += 8 + Math.random() * 4;\n  }\n  // One pair, the one nearest the middle and clear of the curtain, has met already.\n  let best = null;\n  for (const s of P.sites) if (!inCurtain(P, s.x) && (!best || Math.abs(s.x - 32) \u003c Math.abs(best.x - 32))) best = s;\n  if (best) {\n    best.base = 1.04;\n    best.thick = 0.9;\n  }\n  // Soda straws over the pool, dripping quicker than the big stalactites.\n  for (let i = 0; i \u003c 4; i++) {\n    const s = site(Math.round(P.bc + (i - 1.5) * (3.5 + Math.random() * 1.5)), 1);\n    s.per *= 0.7;\n    P.sites.push(s);\n  }\n  P.drops = [];\n  P.rip = [];\n  P.px = new Float32Array(MAXP);\n  P.py = new Float32Array(MAXP);\n  P.pvx = new Float32Array(MAXP);\n  P.pvy = new Float32Array(MAXP);\n  P.pl = new Float32Array(MAXP);\n  P.pn = 0;\n  P.fu = new Float32Array(N);\n  P.fs = new Int8Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.ex = new Float32Array(W * 4);\n  P.ey = new Float32Array(H * 4);\n  Object.assign(P, { T: 0, t: 0, cGrow: 0, hue: 0, rate: 1, age: 0, damp: 0.06, started: false });\n}\n\nfunction site(x, kind) {\n  return {\n    x,\n    kind,\n    base: 0.12 + Math.pow(Math.random(), 1.2) * 0.58,\n    thick: 0.55 + Math.random() * 0.45,\n    grow: 0,\n    per: 1.6 + Math.random() * 2.4,\n    sw: Math.random(),\n    ph: Math.random() * 6.28,\n    tint: Math.random(),\n    // A soda straw's length, and the length it snaps at.\n    len: 4 + Math.random() * 14,\n    maxL: 20 + Math.random() * 8,\n    g: 0,\n    y0: 0,\n    y1: 0,\n    ls: 0,\n    lm: 0,\n  };\n}\n\nconst inCurtain = (P, x) => x >= P.cx0 && x \u003c P.cx1;\n\n// The back wall and the cut rock: colour, and the wall's relief as a normal.\nfunction bakeStone(P) {\n  const lat = P.lat;\n  P.alb = new Float32Array(N * 3);\n  P.nrm = new Float32Array(N * 3);\n  P.tex = new Float32Array(N);\n  const hgt = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) hgt[y * W + x] = 0.7 * vn(lat, x / 5 + 60, y / 7 + 60) + 0.3 * vn(lat, x / 2 + 90, y / 2.5 + 90);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const gx = hgt[y * W + Math.min(W - 1, x + 1)] - hgt[y * W + Math.max(0, x - 1)];\n      const gy = hgt[Math.min(H - 1, y + 1) * W + x] - hgt[Math.max(0, y - 1) * W + x];\n      const nx = -gx * 3;\n      const ny = -gy * 3;\n      const l = 1 / Math.sqrt(nx * nx + ny * ny + 1);\n      P.nrm[o] = nx * l;\n      P.nrm[o + 1] = ny * l;\n      P.nrm[o + 2] = l;\n      const ce = P.ceil[x];\n      const fl = P.flo[x];\n      let r;\n      let g;\n      let b;\n      if (y \u003c ce - 1 || y > fl) {\n        // The cut rock: beds of limestone, each its own shade.\n        const bed = Math.floor((y + 3 * vn(lat, x / 12, 40.5)) / 3);\n        const v = 0.13 + 0.05 * (((bed * 7919) % 5) / 4) + 0.05 * vn(lat, x / 2, y / 2 + 50);\n        r = v * 1.05;\n        g = v * 0.95;\n        b = v * 0.88;\n      } else if (y === ce - 1 || y === fl) {\n        // The skin of the roof and the floor, white with old calcite.\n        r = 0.8;\n        g = 0.74;\n        b = 0.62;\n        P.nrm[o] = 0;\n        P.nrm[o + 1] = y === fl ? -0.8 : 0.8;\n        P.nrm[o + 2] = 0.6;\n      } else {\n        // The back wall, darker than what stands in front of it, with pale streaks of flowstone.\n        const v = 0.22 + 0.22 * vn(lat, x / 9, y / 9 + 20);\n        const streak = Math.max(0, vn(lat, x / 2.2 + 30, y / 16 + 30) - 0.58) * 1.6;\n        r = v * 1.1 + streak * 0.5;\n        g = v * 0.96 + streak * 0.44;\n        b = v * 0.8 + streak * 0.34;\n      }\n      P.alb[o] = r;\n      P.alb[o + 1] = g;\n      P.alb[o + 2] = b;\n      // Streaks down the calcite of the formations.\n      P.tex[p] = 0.16 * (vn(lat, x * 1.1 + 200, y / 9 + 200) - 0.5);\n    }\n  // The wall's water films, as rivulets that wrap round every FT rows so they can scroll down.\n  P.ftex = new Float32Array(W * FT);\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 0; y \u003c FT; y++) {\n      const a = vn(lat, x / 1.4 + 140, y / 9);\n      const b = vn(lat, x / 1.4 + 140, (y - FT) / 9);\n      const m = y / FT;\n      P.ftex[x * FT + y] = a * (1 - m) + b * m;\n    }\n}\n\n// The curtain's lower edge in each of its columns, as long as Age and its drips have made it.\nfunction curtain(P) {\n  const a = Math.min(1.2, 0.45 + 0.65 * P.age + P.cGrow);\n  for (let x = P.cx0; x \u003c P.cx1; x++) {\n    const s = (x - P.cx0 + 0.5) / P.cw;\n    const fold = 0.5 - 0.5 * Math.cos((6.2832 * (x + 0.5)) / P.cfold + P.cph);\n    P.edge[x] = P.ceil[x] + (8 + 30 * a) * (0.45 + 0.55 * Math.sin(Math.PI * (P.right ? 0.35 + 0.65 * s : 1 - 0.65 * s))) + 3.4 * fold;\n  }\n}\n\nfunction geom(P, s) {\n  if (s.kind === 1) {\n    s.y0 = P.ceil[s.x];\n    return;\n  }\n  const y0 = inCurtain(P, s.x) ? P.edge[s.x] : P.ceil[s.x];\n  const y1 = P.flo[s.x];\n  const gap = y1 - y0;\n  s.g = Math.min(1.3, s.base + 0.8 * P.age + s.grow);\n  s.y0 = y0;\n  s.y1 = y1;\n  s.ls = s.g * gap * 0.42;\n  s.lm = s.g * gap * 0.58;\n}\n\nfunction splash(P, x, y, n, up) {\n  for (let i = 0; i \u003c n; i++) {\n    const k = P.pn;\n    P.pn = (k + 1) % MAXP;\n    P.px[k] = x + (Math.random() - 0.5);\n    P.py[k] = y;\n    P.pvx[k] = (Math.random() - 0.5) * 34;\n    P.pvy[k] = -(10 + Math.random() * 26) * up;\n    P.pl[k] = 0.45 + Math.random() * 0.3;\n  }\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.level = P.deep - 7.5 - P.damp * 12;\n  curtain(P);\n  const often = 0.6 + 1.4 * P.damp;\n  for (const s of P.sites) {\n    geom(P, s);\n    if (s.kind === 0 && s.g >= 1) continue;\n    s.sw += (h * often) / s.per;\n    if (s.sw >= 1) {\n      s.sw -= 1;\n      const tip = s.kind === 1 ? s.y0 + s.len : s.y0 + s.ls;\n      P.drops.push({ s, x: s.x, y: tip + 1, v: 6, len: 0 });\n    }\n  }\n  const lvl = P.level;\n  for (let i = P.drops.length - 1; i >= 0; i--) {\n    const d = P.drops[i];\n    const s = d.s;\n    d.v += GRAV * h;\n    d.y += d.v * h;\n    const fl = P.flo[d.x];\n    const pool = fl > lvl + 0.5;\n    const target = s.kind === 0 && !d.len ? s.y1 - s.lm : pool ? lvl : fl;\n    if (d.y \u003c target) continue;\n    P.drops.splice(i, 1);\n    if (d.len) {\n      // A broken straw goes into the pool with a heavy splash.\n      splash(P, d.x, target - 1, 14, 1.4);\n      P.rip.push({ x: d.x + 0.5, a: 0, k: 1.6 });\n      continue;\n    }\n    if (s.kind === 0 && s.y1 - s.lm \u003c fl - 0.5) {\n      // Each drop leaves a little calcite: the stalagmite rises and the stalactite reaches down.\n      s.grow += 0.011 * (1 - s.grow / 0.36);\n      if (inCurtain(P, s.x)) P.cGrow += 0.004 * (1 - P.cGrow / 0.25);\n      splash(P, d.x, target - 1, 4, 1);\n    } else {\n      splash(P, d.x, target - 1, pool ? 3 : 4, pool ? 1.2 : 0.8);\n      if (pool) P.rip.push({ x: d.x + 0.5, a: 0, k: 1 });\n      if (s.kind === 1) {\n        s.len += 0.55;\n        if (s.len > s.maxL + 10 * P.age) {\n          // Too long to hold its own weight: the straw snaps and falls.\n          const keep = 2 + Math.random() * 3;\n          P.drops.push({ s, x: s.x, y: s.y0 + s.len, v: 0, len: s.len - keep });\n          s.len = keep;\n        }\n      }\n    }\n  }\n  for (let i = 0; i \u003c MAXP; i++) {\n    if (P.pl[i] \u003c= 0) continue;\n    P.pl[i] -= h;\n    P.pvy[i] += GRAV * 0.8 * h;\n    P.px[i] += P.pvx[i] * h;\n    P.py[i] += P.pvy[i] * h;\n  }\n  for (let i = P.rip.length - 1; i >= 0; i--) {\n    P.rip[i].a += h;\n    if (P.rip[i].a > 1.8) P.rip.splice(i, 1);\n  }\n  if (P.rip.length > 14) P.rip.splice(0, P.rip.length - 14);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  P.age = clamp(k[2], 0, 1);\n  P.damp = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Twenty seconds of the cave before it opens, at the knob's pace, so the drips are\n    // already falling and the time-lapse has grown what Speed lets it.\n    for (let i = 0; i \u003c 600; i++) step(P, P.rate / 30);\n  }\n  P.t += dt;\n  step(P, dt * P.rate);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { lat, buf, fu, fs, alb, nrm, ceil, flo, edge, sites } = P;\n  const T = P.T;\n  const damp = P.damp;\n\n  // The show lamps: two coloured ones low on either side and a warm one behind the curtain,\n  // fading up and down in turn, their colours wandering a little.\n  const w = (6.2832 * T) / 15;\n  const lamps = [];\n  const ha = 0.47 + P.hue;\n  const cxm = (P.cx0 + P.cx1) / 2;\n  const defs = [\n    [6, 108, ha + 0.04 * Math.sin(T * 0.31), 0.7, 52],\n    [58, 104, ha + 0.3 + 0.04 * Math.sin(T * 0.23 + 2), 0.7, 52],\n    [cxm, 38, 0.08, 0.3, 40],\n  ];\n  for (let k = 0; k \u003c 3; k++) {\n    const d = defs[k];\n    const s = 0.5 + 0.5 * Math.sin(w + (k * 6.2832) / 3);\n    const I = 0.3 + 0.95 * s * Math.sqrt(s);\n    const c = hsv(d[2], d[3], I);\n    lamps.push({ x: d[0], y: d[1], r: c[0], g: c[1], b: c[2], I });\n    const inv = 1 / (d[4] * d[4]);\n    for (let x = 0; x \u003c W; x++) P.ex[k * W + x] = Math.exp(-(x - d[0]) * (x - d[0]) * inv);\n    for (let y = 0; y \u003c H; y++) P.ey[k * H + y] = Math.exp(-(y - d[1]) * (y - d[1]) * inv);\n  }\n  // The caver's headlamp wanders over the cave on its own time.\n  const t = P.t;\n  const hx = 32 + 38 * Math.sin(0.52 * t + 0.4);\n  const hy = 62 + 36 * Math.sin(0.23 * t + 2.1);\n  for (let x = 0; x \u003c W; x++) P.ex[3 * W + x] = 1.05 * Math.exp(-((x - hx) * (x - hx)) / 90);\n  for (let y = 0; y \u003c H; y++) P.ey[3 * H + y] = Math.exp(-((y - hy) * (y - hy)) / 170);\n  const ex = P.ex;\n  const ey = P.ey;\n\n  // The formations, drawn into a map of which one covers each LED and where across it.\n  fs.fill(-1);\n  for (let i = 0; i \u003c sites.length; i++) {\n    const s = sites[i];\n    const xc = s.x + 0.5;\n    if (s.kind === 1) {\n      // A soda straw: one LED wide, thickening into a carrot with Age.\n      const wT = 0.55 + 1.7 * P.age;\n      for (let y = s.y0; y \u003c s.y0 + s.len && y \u003c H; y++) {\n        const d = (y + 0.5 - s.y0) / s.len;\n        span(P, i, xc, y, 0.55 + (wT - 0.55) * (1 - d) * (1 - d));\n      }\n      continue;\n    }\n    const gg = Math.min(1.2, s.g);\n    const wT = 0.9 + 2.4 * s.thick * (0.3 + gg);\n    const y0 = s.y0;\n    for (let y = Math.max(0, Math.floor(y0)); y \u003c y0 + s.ls && y \u003c H; y++) {\n      const d = (y + 0.5 - y0) / s.ls;\n      const hw = 0.55 + (wT - 0.55) * Math.pow(1 - d, 1.7) + 0.3 * Math.sin(y * 1.3 + s.ph) * (1 - d);\n      span(P, i, xc, y, hw);\n    }\n    const wB = 1.6 + 3 * s.thick * (0.45 + gg);\n    const y1 = s.y1;\n    for (let y = Math.floor(y1 - s.lm); y \u003c y1; y++) {\n      const hh = (y1 - (y + 0.5)) / s.lm;\n      if (hh > 1 || hh \u003c 0) continue;\n      const hw = Math.max(0.55, wB * Math.pow(1 - hh * hh * hh * hh, 0.3) * (0.8 + 0.2 * (1 - hh)) * (1 + 0.35 * Math.pow(1 - hh, 5)));\n      span(P, i, xc, y, hw);\n    }\n  }\n\n  const amb = 0.07;\n  const tex = P.tex;\n  const ftex = P.ftex;\n  const fsh = FT - (Math.floor(T * 12.6) % FT);\n  const wet = 0.15 + 0.85 * damp;\n  const dry = 1 - damp;\n  const cfold = P.cfold;\n  const cph = P.cph;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const ce = ceil[x];\n      const fl = flo[x];\n      let ar;\n      let ag;\n      let ab;\n      let nx;\n      let ny;\n      let nz;\n      let glow = 0;\n      let spec = 0;\n      let lit = 1;\n      const f = fs[p];\n      const cur = x >= P.cx0 && x \u003c P.cx1 && y >= ce - 1 && y \u003c edge[x];\n      if (f >= 0) {\n        const s = sites[f];\n        const u = fu[p];\n        nx = u;\n        ny = 0;\n        nz = Math.sqrt(Math.max(0, 1 - u * u));\n        // Calcite, white or stained with iron, ringed where it grew in pulses.\n        const ring = 0.97 + 0.03 * Math.sin(y * 0.9 + s.ph) + tex[p];\n        const st = s.tint;\n        ar = (0.96 - 0.02 * st) * ring;\n        ag = (0.9 - 0.2 * st) * ring;\n        ab = (0.8 - 0.36 * st) * ring;\n        spec = wet * Math.max(0, 1 - Math.abs(u + 0.4) * 3.5);\n        if (s.kind === 0 && s.g >= 1) {\n          // Water runs down a column in a thin film that catches the light as it goes.\n          const run = (((y - T * 14 + s.ph * 9) % 26) + 26) % 26;\n          if (run \u003c 4) spec += 0.7 * wet * Math.max(0, 1 - Math.abs(u + 0.3) * 2.5);\n        }\n      } else if (cur) {\n        // The curtain: bands laid down parallel to its edge, folded, lit through from behind.\n        const top = ce - 1;\n        const fold = Math.sin((6.2832 * (x + 0.5)) / cfold + cph);\n        const hang = (y - top) / Math.max(4, edge[x] - top);\n        const by = (y - top - 3.4 * (0.5 - 0.5 * Math.cos((6.2832 * (x + 0.5)) / cfold + cph)) * hang * hang) / 2.4;\n        const bi = Math.floor(by + 0.25 * vn(lat, x / 4, by * 1.3));\n        const c = BANDS[((bi % 7) + 7) % 7];\n        const pleat = 0.6 + 0.4 * Math.cos((6.2832 * (x + 0.5)) / cfold + cph + 1.2);\n        ar = c[0] * pleat;\n        ag = c[1] * pleat;\n        ab = c[2] * pleat;\n        nx = 0.75 * fold;\n        ny = 0;\n        nz = 0.66;\n        const thin = clamp(1 - (edge[x] - y) / 24, 0, 1);\n        glow = lamps[2].I * (0.1 + 0.6 * thin) * (0.55 + 0.45 * fold);\n        spec = wet * 0.35 * Math.max(0, fold - 0.6);\n      } else {\n        ar = alb[o];\n        ag = alb[o + 1];\n        ab = alb[o + 2];\n        nx = nrm[o];\n        ny = nrm[o + 1];\n        nz = nrm[o + 2];\n        if (y \u003c ce - 1 || y > fl) {\n          // Cut rock takes only what light leaks in at its edge.\n          const dd = y \u003c ce ? ce - 1 - y : y - fl;\n          lit = Math.max(0, 0.45 - dd * 0.15);\n          glow = 0.9;\n        } else if (damp > 0.02) {\n          // Films of water creep down a damp wall and shine.\n          const film = ftex[x * FT + ((y + fsh) % FT)] - 0.7 + 0.12 * damp;\n          if (film > 0) spec = damp * film * 1.3;\n        }\n      }\n      if (glow \u003c 0.9) {\n        // Dry stone is chalky and pale; wet stone is darker and its colour deeper.\n        const grey = (ar + ag + ab) * 0.38;\n        const d = dry * 0.45;\n        const v = 1.08 - 0.3 * damp;\n        ar = (ar + (grey - ar) * d) * v;\n        ag = (ag + (grey - ag) * d) * v;\n        ab = (ab + (grey - ab) * d) * v;\n      }\n      let sr = 0;\n      let sg = 0;\n      let sb = 0;\n      let lr = amb;\n      let lg = amb;\n      let lb = amb * 1.15;\n      if (lit > 0) {\n        for (let k = 0; k \u003c 3; k++) {\n          const e = ex[k * W + x] * ey[k * H + y];\n          if (e \u003c 0.01) continue;\n          const L = lamps[k];\n          const dx = L.x - x;\n          const dy = L.y - y;\n          const dif = (nx * dx + ny * dy + nz * DZ) / Math.sqrt(dx * dx + dy * dy + DZ * DZ);\n          const a = e * (0.2 + 0.8 * Math.max(0, dif)) * lit;\n          lr += L.r * a;\n          lg += L.g * a;\n          lb += L.b * a;\n          if (dif > 0.8) {\n            // A wet face turned to a lamp throws back a glint of its colour.\n            const g2 = (dif - 0.8) * 5;\n            const gl = g2 * g2 * e * damp * 0.45;\n            sr += L.r * gl;\n            sg += L.g * gl;\n            sb += L.b * gl;\n          }\n        }\n        const eh = ex[3 * W + x] * ey[3 * H + y] * lit;\n        if (eh > 0.01) {\n          lr += eh * nz;\n          lg += eh * 0.93 * nz;\n          lb += eh * 0.8 * nz;\n          spec *= 1 + 2 * eh;\n        }\n      }\n      const sp = spec * 0.5 * (lr + lg + lb);\n      buf[o] = 255 * (ar * (lr * 1.25 + glow) + sp + sr);\n      buf[o + 1] = 255 * (ag * (lg * 1.25 + glow * 0.9) + sp + sg);\n      buf[o + 2] = 255 * (ab * (lb * 1.25 + glow * 0.75) + sp + sb);\n    }\n  }\n\n  // Drops swelling at the tips and falling, and the spray where they land.\n  for (const s of sites) {\n    if (s.kind === 0 && s.g >= 1) continue;\n    const tip = Math.floor(s.kind === 1 ? s.y0 + s.len : s.y0 + s.ls);\n    if (s.sw > 0.25) bead(buf, s.x, tip, (s.sw - 0.25) / 0.75);\n    if (s.sw > 0.8) bead(buf, s.x, tip + 1, (s.sw - 0.8) / 0.2);\n  }\n  for (const d of P.drops) {\n    if (d.len) {\n      for (let j = 0; j \u003c d.len; j++) put(buf, d.x, Math.round(d.y - j), 200, 180, 150, 1);\n      continue;\n    }\n    const tail = Math.min(3, d.v * 0.03);\n    for (let j = 0; j \u003c= tail; j++) put(buf, d.x, Math.round(d.y - j), 190, 220, 255, 1 - j / (tail + 1));\n  }\n  for (let i = 0; i \u003c MAXP; i++) if (P.pl[i] > 0) put(buf, Math.round(P.px[i]), Math.round(P.py[i]), 210, 230, 255, Math.min(1, P.pl[i] * 3));\n\n  // The pool: the cave mirrored in it, rings running out from each drop.\n  const lvl = P.level;\n  const ly = Math.ceil(lvl);\n  const rip = P.rip;\n  // The water's own colour, from the lamp nearest the pool.\n  const L0 = lamps[P.bc \u003c 32 ? 0 : 1];\n  const wr = 10 + 60 * L0.r;\n  const wg = 20 + 60 * L0.g;\n  const wb = 30 + 60 * L0.b;\n  for (let x = 0; x \u003c W; x++) {\n    if (flo[x] \u003c= ly) continue;\n    for (let y = ly; y \u003c= flo[x] && y \u003c H; y++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const dy = (y - lvl) * 3.5;\n      let ring = 0;\n      for (const r of rip) {\n        const dx = x + 0.5 - r.x;\n        const R = 2 + 15 * r.a;\n        const q = Math.sqrt(dx * dx + dy * dy) - R;\n        if (q > -2 && q \u003c 2) ring += (1 - q * q * 0.25) * (1 - r.a / 1.8) * r.k * 1.4;\n      }\n      const sx = clamp(Math.round(x + ring * 1.5 + Math.sin(y * 0.9 + T * 2) * 0.6), 0, W - 1);\n      const sy = clamp(2 * ly - y - 1, 0, H - 1);\n      const q = (sy * W + sx) * 3;\n      const depth = Math.min(1, (y - lvl) / 8);\n      const m = 0.5 - 0.2 * depth;\n      const under = y === flo[x] ? 0.35 : 0.15;\n      const shine = (y === ly ? 0.3 : 0) + 0.4 * Math.min(1, ring);\n      buf[o] = buf[q] * m + buf[o] * under + wr + 200 * shine;\n      buf[o + 1] = buf[q + 1] * m + buf[o + 1] * under + wg + 220 * shine;\n      buf[o + 2] = buf[q + 2] * m + buf[o + 2] * under + wb + 240 * shine;\n    }\n  }\n\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n\nfunction span(P, i, xc, y, hw) {\n  if (y \u003c 0 || y >= H) return;\n  const a = Math.max(0, Math.ceil(xc - hw - 0.5));\n  const b = Math.min(W - 1, Math.floor(xc + hw - 0.5));\n  const k = 1 / Math.max(hw, 0.6);\n  for (let x = a; x \u003c= b; x++) {\n    const p = y * W + x;\n    P.fs[p] = i;\n    P.fu[p] = clamp((x + 0.5 - xc) * k, -0.98, 0.98);\n  }\n}\n\nfunction put(buf, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  buf[o] += (r - buf[o]) * a;\n  buf[o + 1] += (g - buf[o + 1]) * a;\n  buf[o + 2] += (b - buf[o + 2]) * a;\n}\n\n// A drop on a tip catches the light brighter as it swells.\nfunction bead(buf, x, y, a) {\n  put(buf, x, y, 180, 215, 255, 0.35 + 0.65 * a);\n}\n","layer":{"id":"layer-dripstone","type":"code","name":"dripstone","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dripstone\n// Family:  mineral\n// Idea:    A limestone cave in cross-section fills the panel, with stalactites hanging over stalagmites and columns and a banded flowstone curtain on one side, while drops swell at the tips, fall and splash on the stalagmites or ring the pool on the floor, each drop lengthening its formation a little under a show-cave light sequence and a caver's passing headlamp.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after show-cave lighting and the banded \"bacon\" drapery of limestone caves\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Age=0..1, Damp=0..1\n//\n// Knob 1: Lamp. Turns the two coloured show lamps round the colour wheel together, from aqua and violet at 0; the warm lamp behind the curtain and the headlamp stay white.\n// Knob 2: Speed. How fast cave time runs: at 2 a drop falls the 100 rows from the roof in 1.3 s and the light sequence takes 15 s round its three lamps; each drop that lands lengthens its stalagmite and stalactite by about half a row.\n// Knob 3: Age. How far the cave has grown, from short stalactites, soda straws and one column at 0 to a hall of thick columns at 1, with the curtain hanging twice as far down and the straws thickened into carrots. A straw that grows too long snaps and falls into the pool.\n// Knob 4: Damp. How wet the cave is: at 0 the stone is pale and chalky and the pool sits in a hollow of the floor; at 1 the pool covers the whole floor, the drips come three times as often, and the stone turns dark and shines with films of water creeping down the wall.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Drops fall at this many rows per second squared of cave time.\nconst GRAV = 110;\nconst MAXP = 160;\n// How far in front of the stone the lamps stand, in LEDs.\nconst DZ = 16;\n// The rows the wall's water films repeat over.\nconst FT = 144;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  return [k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p, k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p, k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p];\n}\n\n// The flowstone's bands, from cream through orange to rust and brown.\nconst BANDS = [\n  [0.95, 0.86, 0.68],\n  [0.92, 0.52, 0.2],\n  [0.98, 0.74, 0.42],\n  [0.62, 0.26, 0.12],\n  [0.96, 0.9, 0.78],\n  [0.84, 0.4, 0.16],\n  [0.45, 0.2, 0.1],\n];\n\nexport function setup(params) {\n  const P = params;\n  const lat = new Float32Array(65536);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  P.lat = lat;\n  P.ceil = new Int16Array(W);\n  P.flo = new Int16Array(W);\n  P.edge = new Float32Array(W);\n  // The curtain hangs from the roof where it slopes down to one side wall.\n  const right = Math.random() \u003c 0.5;\n  const cw = 20 + Math.floor(Math.random() * 4);\n  P.cx0 = right ? W - cw : 0;\n  P.cx1 = right ? W : cw;\n  P.cw = cw;\n  P.right = right;\n  P.cph = Math.random() * 6.28;\n  P.cfold = 6.5 + Math.random() * 2;\n  // The pool lies in a hollow of the floor away from the curtain.\n  P.bc = right ? 20 + Math.random() * 8 : 36 + Math.random() * 8;\n  P.bw = 11 + Math.random() * 3;\n  let deep = 0;\n  for (let x = 0; x \u003c W; x++) {\n    let c = 8 + 4 * vn(lat, x / 9, 5.5) + 1.6 * vn(lat, x / 3, 9.5);\n    if (x >= P.cx0 && x \u003c P.cx1) c += 9 * (right ? (x - P.cx0) / cw : (P.cx1 - 1 - x) / cw);\n    P.ceil[x] = Math.round(c);\n    let f = 115 + 3 * vn(lat, x / 8, 15.5) + 1.5 * vn(lat, x / 3, 19.5);\n    const b = (x + 0.5 - P.bc) / P.bw;\n    if (Math.abs(b) \u003c 1) f += 8.5 * Math.pow(1 - b * b, 0.6);\n    P.flo[x] = Math.round(f);\n    deep = Math.max(deep, P.flo[x]);\n  }\n  P.deep = deep;\n  bakeStone(P);\n\n  // Stalactite and stalagmite pairs across the width, none over the pool.\n  P.sites = [];\n  let x = 2 + Math.random() * 3;\n  while (x \u003c W - 2) {\n    const xi = Math.floor(x);\n    if (Math.abs(xi + 0.5 - P.bc) > P.bw - 4) P.sites.push(site(xi, 0));\n    x += 8 + Math.random() * 4;\n  }\n  // One pair, the one nearest the middle and clear of the curtain, has met already.\n  let best = null;\n  for (const s of P.sites) if (!inCurtain(P, s.x) && (!best || Math.abs(s.x - 32) \u003c Math.abs(best.x - 32))) best = s;\n  if (best) {\n    best.base = 1.04;\n    best.thick = 0.9;\n  }\n  // Soda straws over the pool, dripping quicker than the big stalactites.\n  for (let i = 0; i \u003c 4; i++) {\n    const s = site(Math.round(P.bc + (i - 1.5) * (3.5 + Math.random() * 1.5)), 1);\n    s.per *= 0.7;\n    P.sites.push(s);\n  }\n  P.drops = [];\n  P.rip = [];\n  P.px = new Float32Array(MAXP);\n  P.py = new Float32Array(MAXP);\n  P.pvx = new Float32Array(MAXP);\n  P.pvy = new Float32Array(MAXP);\n  P.pl = new Float32Array(MAXP);\n  P.pn = 0;\n  P.fu = new Float32Array(N);\n  P.fs = new Int8Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.ex = new Float32Array(W * 4);\n  P.ey = new Float32Array(H * 4);\n  Object.assign(P, { T: 0, t: 0, cGrow: 0, hue: 0, rate: 1, age: 0, damp: 0.06, started: false });\n}\n\nfunction site(x, kind) {\n  return {\n    x,\n    kind,\n    base: 0.12 + Math.pow(Math.random(), 1.2) * 0.58,\n    thick: 0.55 + Math.random() * 0.45,\n    grow: 0,\n    per: 1.6 + Math.random() * 2.4,\n    sw: Math.random(),\n    ph: Math.random() * 6.28,\n    tint: Math.random(),\n    // A soda straw's length, and the length it snaps at.\n    len: 4 + Math.random() * 14,\n    maxL: 20 + Math.random() * 8,\n    g: 0,\n    y0: 0,\n    y1: 0,\n    ls: 0,\n    lm: 0,\n  };\n}\n\nconst inCurtain = (P, x) => x >= P.cx0 && x \u003c P.cx1;\n\n// The back wall and the cut rock: colour, and the wall's relief as a normal.\nfunction bakeStone(P) {\n  const lat = P.lat;\n  P.alb = new Float32Array(N * 3);\n  P.nrm = new Float32Array(N * 3);\n  P.tex = new Float32Array(N);\n  const hgt = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) hgt[y * W + x] = 0.7 * vn(lat, x / 5 + 60, y / 7 + 60) + 0.3 * vn(lat, x / 2 + 90, y / 2.5 + 90);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const gx = hgt[y * W + Math.min(W - 1, x + 1)] - hgt[y * W + Math.max(0, x - 1)];\n      const gy = hgt[Math.min(H - 1, y + 1) * W + x] - hgt[Math.max(0, y - 1) * W + x];\n      const nx = -gx * 3;\n      const ny = -gy * 3;\n      const l = 1 / Math.sqrt(nx * nx + ny * ny + 1);\n      P.nrm[o] = nx * l;\n      P.nrm[o + 1] = ny * l;\n      P.nrm[o + 2] = l;\n      const ce = P.ceil[x];\n      const fl = P.flo[x];\n      let r;\n      let g;\n      let b;\n      if (y \u003c ce - 1 || y > fl) {\n        // The cut rock: beds of limestone, each its own shade.\n        const bed = Math.floor((y + 3 * vn(lat, x / 12, 40.5)) / 3);\n        const v = 0.13 + 0.05 * (((bed * 7919) % 5) / 4) + 0.05 * vn(lat, x / 2, y / 2 + 50);\n        r = v * 1.05;\n        g = v * 0.95;\n        b = v * 0.88;\n      } else if (y === ce - 1 || y === fl) {\n        // The skin of the roof and the floor, white with old calcite.\n        r = 0.8;\n        g = 0.74;\n        b = 0.62;\n        P.nrm[o] = 0;\n        P.nrm[o + 1] = y === fl ? -0.8 : 0.8;\n        P.nrm[o + 2] = 0.6;\n      } else {\n        // The back wall, darker than what stands in front of it, with pale streaks of flowstone.\n        const v = 0.22 + 0.22 * vn(lat, x / 9, y / 9 + 20);\n        const streak = Math.max(0, vn(lat, x / 2.2 + 30, y / 16 + 30) - 0.58) * 1.6;\n        r = v * 1.1 + streak * 0.5;\n        g = v * 0.96 + streak * 0.44;\n        b = v * 0.8 + streak * 0.34;\n      }\n      P.alb[o] = r;\n      P.alb[o + 1] = g;\n      P.alb[o + 2] = b;\n      // Streaks down the calcite of the formations.\n      P.tex[p] = 0.16 * (vn(lat, x * 1.1 + 200, y / 9 + 200) - 0.5);\n    }\n  // The wall's water films, as rivulets that wrap round every FT rows so they can scroll down.\n  P.ftex = new Float32Array(W * FT);\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 0; y \u003c FT; y++) {\n      const a = vn(lat, x / 1.4 + 140, y / 9);\n      const b = vn(lat, x / 1.4 + 140, (y - FT) / 9);\n      const m = y / FT;\n      P.ftex[x * FT + y] = a * (1 - m) + b * m;\n    }\n}\n\n// The curtain's lower edge in each of its columns, as long as Age and its drips have made it.\nfunction curtain(P) {\n  const a = Math.min(1.2, 0.45 + 0.65 * P.age + P.cGrow);\n  for (let x = P.cx0; x \u003c P.cx1; x++) {\n    const s = (x - P.cx0 + 0.5) / P.cw;\n    const fold = 0.5 - 0.5 * Math.cos((6.2832 * (x + 0.5)) / P.cfold + P.cph);\n    P.edge[x] = P.ceil[x] + (8 + 30 * a) * (0.45 + 0.55 * Math.sin(Math.PI * (P.right ? 0.35 + 0.65 * s : 1 - 0.65 * s))) + 3.4 * fold;\n  }\n}\n\nfunction geom(P, s) {\n  if (s.kind === 1) {\n    s.y0 = P.ceil[s.x];\n    return;\n  }\n  const y0 = inCurtain(P, s.x) ? P.edge[s.x] : P.ceil[s.x];\n  const y1 = P.flo[s.x];\n  const gap = y1 - y0;\n  s.g = Math.min(1.3, s.base + 0.8 * P.age + s.grow);\n  s.y0 = y0;\n  s.y1 = y1;\n  s.ls = s.g * gap * 0.42;\n  s.lm = s.g * gap * 0.58;\n}\n\nfunction splash(P, x, y, n, up) {\n  for (let i = 0; i \u003c n; i++) {\n    const k = P.pn;\n    P.pn = (k + 1) % MAXP;\n    P.px[k] = x + (Math.random() - 0.5);\n    P.py[k] = y;\n    P.pvx[k] = (Math.random() - 0.5) * 34;\n    P.pvy[k] = -(10 + Math.random() * 26) * up;\n    P.pl[k] = 0.45 + Math.random() * 0.3;\n  }\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.level = P.deep - 7.5 - P.damp * 12;\n  curtain(P);\n  const often = 0.6 + 1.4 * P.damp;\n  for (const s of P.sites) {\n    geom(P, s);\n    if (s.kind === 0 && s.g >= 1) continue;\n    s.sw += (h * often) / s.per;\n    if (s.sw >= 1) {\n      s.sw -= 1;\n      const tip = s.kind === 1 ? s.y0 + s.len : s.y0 + s.ls;\n      P.drops.push({ s, x: s.x, y: tip + 1, v: 6, len: 0 });\n    }\n  }\n  const lvl = P.level;\n  for (let i = P.drops.length - 1; i >= 0; i--) {\n    const d = P.drops[i];\n    const s = d.s;\n    d.v += GRAV * h;\n    d.y += d.v * h;\n    const fl = P.flo[d.x];\n    const pool = fl > lvl + 0.5;\n    const target = s.kind === 0 && !d.len ? s.y1 - s.lm : pool ? lvl : fl;\n    if (d.y \u003c target) continue;\n    P.drops.splice(i, 1);\n    if (d.len) {\n      // A broken straw goes into the pool with a heavy splash.\n      splash(P, d.x, target - 1, 14, 1.4);\n      P.rip.push({ x: d.x + 0.5, a: 0, k: 1.6 });\n      continue;\n    }\n    if (s.kind === 0 && s.y1 - s.lm \u003c fl - 0.5) {\n      // Each drop leaves a little calcite: the stalagmite rises and the stalactite reaches down.\n      s.grow += 0.011 * (1 - s.grow / 0.36);\n      if (inCurtain(P, s.x)) P.cGrow += 0.004 * (1 - P.cGrow / 0.25);\n      splash(P, d.x, target - 1, 4, 1);\n    } else {\n      splash(P, d.x, target - 1, pool ? 3 : 4, pool ? 1.2 : 0.8);\n      if (pool) P.rip.push({ x: d.x + 0.5, a: 0, k: 1 });\n      if (s.kind === 1) {\n        s.len += 0.55;\n        if (s.len > s.maxL + 10 * P.age) {\n          // Too long to hold its own weight: the straw snaps and falls.\n          const keep = 2 + Math.random() * 3;\n          P.drops.push({ s, x: s.x, y: s.y0 + s.len, v: 0, len: s.len - keep });\n          s.len = keep;\n        }\n      }\n    }\n  }\n  for (let i = 0; i \u003c MAXP; i++) {\n    if (P.pl[i] \u003c= 0) continue;\n    P.pl[i] -= h;\n    P.pvy[i] += GRAV * 0.8 * h;\n    P.px[i] += P.pvx[i] * h;\n    P.py[i] += P.pvy[i] * h;\n  }\n  for (let i = P.rip.length - 1; i >= 0; i--) {\n    P.rip[i].a += h;\n    if (P.rip[i].a > 1.8) P.rip.splice(i, 1);\n  }\n  if (P.rip.length > 14) P.rip.splice(0, P.rip.length - 14);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  P.age = clamp(k[2], 0, 1);\n  P.damp = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Twenty seconds of the cave before it opens, at the knob's pace, so the drips are\n    // already falling and the time-lapse has grown what Speed lets it.\n    for (let i = 0; i \u003c 600; i++) step(P, P.rate / 30);\n  }\n  P.t += dt;\n  step(P, dt * P.rate);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { lat, buf, fu, fs, alb, nrm, ceil, flo, edge, sites } = P;\n  const T = P.T;\n  const damp = P.damp;\n\n  // The show lamps: two coloured ones low on either side and a warm one behind the curtain,\n  // fading up and down in turn, their colours wandering a little.\n  const w = (6.2832 * T) / 15;\n  const lamps = [];\n  const ha = 0.47 + P.hue;\n  const cxm = (P.cx0 + P.cx1) / 2;\n  const defs = [\n    [6, 108, ha + 0.04 * Math.sin(T * 0.31), 0.7, 52],\n    [58, 104, ha + 0.3 + 0.04 * Math.sin(T * 0.23 + 2), 0.7, 52],\n    [cxm, 38, 0.08, 0.3, 40],\n  ];\n  for (let k = 0; k \u003c 3; k++) {\n    const d = defs[k];\n    const s = 0.5 + 0.5 * Math.sin(w + (k * 6.2832) / 3);\n    const I = 0.3 + 0.95 * s * Math.sqrt(s);\n    const c = hsv(d[2], d[3], I);\n    lamps.push({ x: d[0], y: d[1], r: c[0], g: c[1], b: c[2], I });\n    const inv = 1 / (d[4] * d[4]);\n    for (let x = 0; x \u003c W; x++) P.ex[k * W + x] = Math.exp(-(x - d[0]) * (x - d[0]) * inv);\n    for (let y = 0; y \u003c H; y++) P.ey[k * H + y] = Math.exp(-(y - d[1]) * (y - d[1]) * inv);\n  }\n  // The caver's headlamp wanders over the cave on its own time.\n  const t = P.t;\n  const hx = 32 + 38 * Math.sin(0.52 * t + 0.4);\n  const hy = 62 + 36 * Math.sin(0.23 * t + 2.1);\n  for (let x = 0; x \u003c W; x++) P.ex[3 * W + x] = 1.05 * Math.exp(-((x - hx) * (x - hx)) / 90);\n  for (let y = 0; y \u003c H; y++) P.ey[3 * H + y] = Math.exp(-((y - hy) * (y - hy)) / 170);\n  const ex = P.ex;\n  const ey = P.ey;\n\n  // The formations, drawn into a map of which one covers each LED and where across it.\n  fs.fill(-1);\n  for (let i = 0; i \u003c sites.length; i++) {\n    const s = sites[i];\n    const xc = s.x + 0.5;\n    if (s.kind === 1) {\n      // A soda straw: one LED wide, thickening into a carrot with Age.\n      const wT = 0.55 + 1.7 * P.age;\n      for (let y = s.y0; y \u003c s.y0 + s.len && y \u003c H; y++) {\n        const d = (y + 0.5 - s.y0) / s.len;\n        span(P, i, xc, y, 0.55 + (wT - 0.55) * (1 - d) * (1 - d));\n      }\n      continue;\n    }\n    const gg = Math.min(1.2, s.g);\n    const wT = 0.9 + 2.4 * s.thick * (0.3 + gg);\n    const y0 = s.y0;\n    for (let y = Math.max(0, Math.floor(y0)); y \u003c y0 + s.ls && y \u003c H; y++) {\n      const d = (y + 0.5 - y0) / s.ls;\n      const hw = 0.55 + (wT - 0.55) * Math.pow(1 - d, 1.7) + 0.3 * Math.sin(y * 1.3 + s.ph) * (1 - d);\n      span(P, i, xc, y, hw);\n    }\n    const wB = 1.6 + 3 * s.thick * (0.45 + gg);\n    const y1 = s.y1;\n    for (let y = Math.floor(y1 - s.lm); y \u003c y1; y++) {\n      const hh = (y1 - (y + 0.5)) / s.lm;\n      if (hh > 1 || hh \u003c 0) continue;\n      const hw = Math.max(0.55, wB * Math.pow(1 - hh * hh * hh * hh, 0.3) * (0.8 + 0.2 * (1 - hh)) * (1 + 0.35 * Math.pow(1 - hh, 5)));\n      span(P, i, xc, y, hw);\n    }\n  }\n\n  const amb = 0.07;\n  const tex = P.tex;\n  const ftex = P.ftex;\n  const fsh = FT - (Math.floor(T * 12.6) % FT);\n  const wet = 0.15 + 0.85 * damp;\n  const dry = 1 - damp;\n  const cfold = P.cfold;\n  const cph = P.cph;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const ce = ceil[x];\n      const fl = flo[x];\n      let ar;\n      let ag;\n      let ab;\n      let nx;\n      let ny;\n      let nz;\n      let glow = 0;\n      let spec = 0;\n      let lit = 1;\n      const f = fs[p];\n      const cur = x >= P.cx0 && x \u003c P.cx1 && y >= ce - 1 && y \u003c edge[x];\n      if (f >= 0) {\n        const s = sites[f];\n        const u = fu[p];\n        nx = u;\n        ny = 0;\n        nz = Math.sqrt(Math.max(0, 1 - u * u));\n        // Calcite, white or stained with iron, ringed where it grew in pulses.\n        const ring = 0.97 + 0.03 * Math.sin(y * 0.9 + s.ph) + tex[p];\n        const st = s.tint;\n        ar = (0.96 - 0.02 * st) * ring;\n        ag = (0.9 - 0.2 * st) * ring;\n        ab = (0.8 - 0.36 * st) * ring;\n        spec = wet * Math.max(0, 1 - Math.abs(u + 0.4) * 3.5);\n        if (s.kind === 0 && s.g >= 1) {\n          // Water runs down a column in a thin film that catches the light as it goes.\n          const run = (((y - T * 14 + s.ph * 9) % 26) + 26) % 26;\n          if (run \u003c 4) spec += 0.7 * wet * Math.max(0, 1 - Math.abs(u + 0.3) * 2.5);\n        }\n      } else if (cur) {\n        // The curtain: bands laid down parallel to its edge, folded, lit through from behind.\n        const top = ce - 1;\n        const fold = Math.sin((6.2832 * (x + 0.5)) / cfold + cph);\n        const hang = (y - top) / Math.max(4, edge[x] - top);\n        const by = (y - top - 3.4 * (0.5 - 0.5 * Math.cos((6.2832 * (x + 0.5)) / cfold + cph)) * hang * hang) / 2.4;\n        const bi = Math.floor(by + 0.25 * vn(lat, x / 4, by * 1.3));\n        const c = BANDS[((bi % 7) + 7) % 7];\n        const pleat = 0.6 + 0.4 * Math.cos((6.2832 * (x + 0.5)) / cfold + cph + 1.2);\n        ar = c[0] * pleat;\n        ag = c[1] * pleat;\n        ab = c[2] * pleat;\n        nx = 0.75 * fold;\n        ny = 0;\n        nz = 0.66;\n        const thin = clamp(1 - (edge[x] - y) / 24, 0, 1);\n        glow = lamps[2].I * (0.1 + 0.6 * thin) * (0.55 + 0.45 * fold);\n        spec = wet * 0.35 * Math.max(0, fold - 0.6);\n      } else {\n        ar = alb[o];\n        ag = alb[o + 1];\n        ab = alb[o + 2];\n        nx = nrm[o];\n        ny = nrm[o + 1];\n        nz = nrm[o + 2];\n        if (y \u003c ce - 1 || y > fl) {\n          // Cut rock takes only what light leaks in at its edge.\n          const dd = y \u003c ce ? ce - 1 - y : y - fl;\n          lit = Math.max(0, 0.45 - dd * 0.15);\n          glow = 0.9;\n        } else if (damp > 0.02) {\n          // Films of water creep down a damp wall and shine.\n          const film = ftex[x * FT + ((y + fsh) % FT)] - 0.7 + 0.12 * damp;\n          if (film > 0) spec = damp * film * 1.3;\n        }\n      }\n      if (glow \u003c 0.9) {\n        // Dry stone is chalky and pale; wet stone is darker and its colour deeper.\n        const grey = (ar + ag + ab) * 0.38;\n        const d = dry * 0.45;\n        const v = 1.08 - 0.3 * damp;\n        ar = (ar + (grey - ar) * d) * v;\n        ag = (ag + (grey - ag) * d) * v;\n        ab = (ab + (grey - ab) * d) * v;\n      }\n      let sr = 0;\n      let sg = 0;\n      let sb = 0;\n      let lr = amb;\n      let lg = amb;\n      let lb = amb * 1.15;\n      if (lit > 0) {\n        for (let k = 0; k \u003c 3; k++) {\n          const e = ex[k * W + x] * ey[k * H + y];\n          if (e \u003c 0.01) continue;\n          const L = lamps[k];\n          const dx = L.x - x;\n          const dy = L.y - y;\n          const dif = (nx * dx + ny * dy + nz * DZ) / Math.sqrt(dx * dx + dy * dy + DZ * DZ);\n          const a = e * (0.2 + 0.8 * Math.max(0, dif)) * lit;\n          lr += L.r * a;\n          lg += L.g * a;\n          lb += L.b * a;\n          if (dif > 0.8) {\n            // A wet face turned to a lamp throws back a glint of its colour.\n            const g2 = (dif - 0.8) * 5;\n            const gl = g2 * g2 * e * damp * 0.45;\n            sr += L.r * gl;\n            sg += L.g * gl;\n            sb += L.b * gl;\n          }\n        }\n        const eh = ex[3 * W + x] * ey[3 * H + y] * lit;\n        if (eh > 0.01) {\n          lr += eh * nz;\n          lg += eh * 0.93 * nz;\n          lb += eh * 0.8 * nz;\n          spec *= 1 + 2 * eh;\n        }\n      }\n      const sp = spec * 0.5 * (lr + lg + lb);\n      buf[o] = 255 * (ar * (lr * 1.25 + glow) + sp + sr);\n      buf[o + 1] = 255 * (ag * (lg * 1.25 + glow * 0.9) + sp + sg);\n      buf[o + 2] = 255 * (ab * (lb * 1.25 + glow * 0.75) + sp + sb);\n    }\n  }\n\n  // Drops swelling at the tips and falling, and the spray where they land.\n  for (const s of sites) {\n    if (s.kind === 0 && s.g >= 1) continue;\n    const tip = Math.floor(s.kind === 1 ? s.y0 + s.len : s.y0 + s.ls);\n    if (s.sw > 0.25) bead(buf, s.x, tip, (s.sw - 0.25) / 0.75);\n    if (s.sw > 0.8) bead(buf, s.x, tip + 1, (s.sw - 0.8) / 0.2);\n  }\n  for (const d of P.drops) {\n    if (d.len) {\n      for (let j = 0; j \u003c d.len; j++) put(buf, d.x, Math.round(d.y - j), 200, 180, 150, 1);\n      continue;\n    }\n    const tail = Math.min(3, d.v * 0.03);\n    for (let j = 0; j \u003c= tail; j++) put(buf, d.x, Math.round(d.y - j), 190, 220, 255, 1 - j / (tail + 1));\n  }\n  for (let i = 0; i \u003c MAXP; i++) if (P.pl[i] > 0) put(buf, Math.round(P.px[i]), Math.round(P.py[i]), 210, 230, 255, Math.min(1, P.pl[i] * 3));\n\n  // The pool: the cave mirrored in it, rings running out from each drop.\n  const lvl = P.level;\n  const ly = Math.ceil(lvl);\n  const rip = P.rip;\n  // The water's own colour, from the lamp nearest the pool.\n  const L0 = lamps[P.bc \u003c 32 ? 0 : 1];\n  const wr = 10 + 60 * L0.r;\n  const wg = 20 + 60 * L0.g;\n  const wb = 30 + 60 * L0.b;\n  for (let x = 0; x \u003c W; x++) {\n    if (flo[x] \u003c= ly) continue;\n    for (let y = ly; y \u003c= flo[x] && y \u003c H; y++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const dy = (y - lvl) * 3.5;\n      let ring = 0;\n      for (const r of rip) {\n        const dx = x + 0.5 - r.x;\n        const R = 2 + 15 * r.a;\n        const q = Math.sqrt(dx * dx + dy * dy) - R;\n        if (q > -2 && q \u003c 2) ring += (1 - q * q * 0.25) * (1 - r.a / 1.8) * r.k * 1.4;\n      }\n      const sx = clamp(Math.round(x + ring * 1.5 + Math.sin(y * 0.9 + T * 2) * 0.6), 0, W - 1);\n      const sy = clamp(2 * ly - y - 1, 0, H - 1);\n      const q = (sy * W + sx) * 3;\n      const depth = Math.min(1, (y - lvl) / 8);\n      const m = 0.5 - 0.2 * depth;\n      const under = y === flo[x] ? 0.35 : 0.15;\n      const shine = (y === ly ? 0.3 : 0) + 0.4 * Math.min(1, ring);\n      buf[o] = buf[q] * m + buf[o] * under + wr + 200 * shine;\n      buf[o + 1] = buf[q + 1] * m + buf[o + 1] * under + wg + 220 * shine;\n      buf[o + 2] = buf[q + 2] * m + buf[o + 2] * under + wb + 240 * shine;\n    }\n  }\n\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n\nfunction span(P, i, xc, y, hw) {\n  if (y \u003c 0 || y >= H) return;\n  const a = Math.max(0, Math.ceil(xc - hw - 0.5));\n  const b = Math.min(W - 1, Math.floor(xc + hw - 0.5));\n  const k = 1 / Math.max(hw, 0.6);\n  for (let x = a; x \u003c= b; x++) {\n    const p = y * W + x;\n    P.fs[p] = i;\n    P.fu[p] = clamp((x + 0.5 - xc) * k, -0.98, 0.98);\n  }\n}\n\nfunction put(buf, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  buf[o] += (r - buf[o]) * a;\n  buf[o + 1] += (g - buf[o + 1]) * a;\n  buf[o + 2] += (b - buf[o + 2]) * a;\n}\n\n// A drop on a tip catches the light brighter as it swells.\nfunction bead(buf, x, y, a) {\n  put(buf, x, y, 180, 215, 255, 0.35 + 0.65 * a);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Speed=0.2..3, Age=0..1, Damp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"Turns the two coloured show lamps round the colour wheel together, from aqua and violet at 0; the warm lamp behind the curtain and the headlamp stay white."},{"name":"Speed","min":0.2,"max":3,"about":"How fast cave time runs: at 2 a drop falls the 100 rows from the roof in 1.3 s and the light sequence takes 15 s round its three lamps; each drop that lands lengthens its stalagmite and stalactite by about half a row."},{"name":"Age","min":0,"max":1,"about":"How far the cave has grown, from short stalactites, soda straws and one column at 0 to a hall of thick columns at 1, with the curtain hanging twice as far down and the straws thickened into carrots. A straw that grows too long snaps and falls into the pool."},{"name":"Damp","min":0,"max":1,"about":"How wet the cave is: at 0 the stone is pale and chalky and the pool sits in a hollow of the floor; at 1 the pool covers the whole floor, the drips come three times as often, and the stone turns dark and shines with films of water creeping down the wall."}],"start":[0,2,0,0.06],"measures":{"motion":0.113,"detail":0.0548,"edges":0.2063,"complexity":2.555,"coverage":0.9702,"colour":0.163,"drift":0.1125},"knobResponse":[0.0618,0.1355,0.0996,0.0869]},{"slug":"drop-tower","title":"Drop Tower","family":"fair","round":18,"note":"밤 놀이공원의 드롭 타워가 128줄을 다 써요. 링에 탄 여덟 사람을 꼭대기까지 끌어올려 매달아 두었다가 탑 높이에 맞춘 중력으로 떨어뜨리고, 자석 브레이크에서 번쩍이며 세워요. K1 을 누르면 오르는 중에도 바로 떨어뜨려요.","idea":"A drop tower at a night fair hauls a ring of riders up the full height of the panel while its marquee lights chase after them, holds them at the top while the lights go out below, lets them fall at the tower's own gravity and stops them hard on the magnetic brakes over a crowd holding up their phones.","buttons":"K1 tap drops the ring at once from wherever it is on the way up, or starts the haul when it is waiting at the station.","code":"// ===== Patternflow pattern =====\n// Title:   Drop Tower\n// Family:  fair\n// Idea:    A drop tower at a night fair hauls a ring of riders up the full height of the panel while its marquee lights chase after them, holds them at the top while the lights go out below, lets them fall at the tower's own gravity and stops them hard on the magnetic brakes over a crowd holding up their phones.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the free-fall towers of amusement parks, whose ring of seats is stopped by magnetic brakes\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Height=50..110, Thrill=0..1\n//\n// Knob 1: Lights. Turns the bulbs of the tower, the ring and the Ferris wheel round the colour wheel together with the glow they throw on the sky, starting from gold marquee bulbs over a violet glow.\n// Knob 2: Speed. How fast the night runs: at 2 the ride runs in real time, 19 s a ride with a fall of 2.1 s at 74 km/h from the top of a 50 m tower; at 0.2 it is ten times slower, at 3 half as fast again.\n// Knob 3: Height. The tower's height, 50 to 110 m. The tower always stands the full 128 rows, so a taller one makes the 40 m Ferris wheel beside it smaller, the haul longer and the fall slower on the panel, 3.3 s at 110 m.\n// Knob 4: Thrill. How long the ring hangs at the top, 1.8 s to 6 s, with the tower beating like a heart until its lights go out from the foot up in the last 1.8 s; and how hard the brakes bite, from a third of the travel at 1.8 g to a fifth at 4 g.\n// Buttons: K1 tap drops the ring at once from wherever it is on the way up, or starts the haul when it is waiting at the station.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The tower stands on column 40, from the beacon on row 1 and the cap at rows 4..10 to its\n// foot on row 121.\nconst TX = 40;\nconst YG = 121;\n// The riders' seat row at the top of the travel and at the station.\nconst YTOP = 22;\nconst YST = 110;\n// Ride states.\nconst BOARD = 0;\nconst CLIMB = 1;\nconst HOLD = 2;\nconst FALL = 3;\nconst BRAKE = 4;\nconst SETTLE = 5;\nconst LOWER = 6;\nconst G = 9.81;\n// The brakes stop the ring 4 m above the station, and it is let down from there.\nconst STOP = 4;\nconst SHIRTS = [[170, 40, 50], [40, 90, 170], [220, 210, 200], [50, 150, 70], [190, 140, 40], [130, 60, 160], [40, 40, 48]];\nconst SKIN = [[210, 160, 120], [150, 100, 70], [235, 190, 155]];\nconst HAIR = [[30, 20, 16], [90, 60, 30], [200, 170, 90], [20, 20, 24]];\n// A bulb's light on its neighbours: 1 LED away, diagonal, 2 away.\nconst GLOW = [[1, 0, 0.32], [-1, 0, 0.32], [0, 1, 0.32], [0, -1, 0.32], [1, 1, 0.14], [-1, 1, 0.14], [1, -1, 0.14], [-1, -1, 0.14], [2, 0, 0.06], [-2, 0, 0.06], [0, 2, 0.06], [0, -2, 0.06]];\n\n// Colours the Lights knob leaves alone: the wheel's legs and rim, a cabin's window, the\n// ring's catch car, seats and bands, the riders' harness, jeans and shoes, the strings'\n// wire and warm bulbs, a phone's arm, the beacon, a star and the crowd.\nconst LEG = [26, 26, 40];\nconst RIM1 = [40, 40, 58];\nconst RIM2 = [30, 30, 46];\nconst WINDOW = [210, 170, 100];\nconst CAR = [24, 24, 34];\nconst SEAT = [30, 26, 44];\nconst BAND = [96, 96, 112];\nconst BAND2 = [30, 30, 42];\nconst HARNESS = [90, 86, 30];\nconst JEANS = [40, 56, 110];\nconst SHOE = [225, 225, 235];\nconst WIRE = [12, 10, 16];\nconst WARM = [255, 196, 120];\nconst ARM = [6, 6, 10];\nconst STROBE = [255, 255, 255];\nconst BEACON = [255, 30, 20];\nconst STAR = [1, 1, 1.2];\nconst DARK = [4, 4, 8];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction mix(a, b, u) {\n  return [a[0] + (b[0] - a[0]) * u, a[1] + (b[1] - a[1]) * u, a[2] + (b[2] - a[2]) * u];\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, started: false, Ht: 0, wheel: 0.3, flash: 0, st: BOARD, e: 0, h: 0, v: 0, hc: 0, hue: 0, thrill: 0 });\n  P.buf = new Float32Array(N * 3);\n  P.sky = new Float32Array(N * 3);\n  P.tw = new Float32Array(N * 3);\n  P.tm = new Uint8Array(N);\n  P.lv = new Float32Array(H);\n  P.gx = new Float32Array(W);\n  P.gy = new Float32Array(H);\n  // Deep blue overhead, paler towards the horizon, and the stalls' warm light on the\n  // ground behind the crowd.\n  for (let y = 0; y \u003c H; y++) {\n    const c = mix([2, 4, 18], [10, 16, 52], y / (H - 1));\n    if (y > 108) for (let i = 0; i \u003c 3; i++) c[i] += [70, 46, 30][i] * ((y - 108) / 13) ** 2;\n    for (let x = 0; x \u003c W; x++) P.sky.set(c, (y * W + x) * 3);\n  }\n  // A game stall on the right: a striped awning, a lit counter with prizes on two shelves.\n  const paint = (x, y, c) => P.sky.set(c, (y * W + x) * 3);\n  for (let x = 49; x \u003c W; x++) {\n    for (let y = 103; y \u003c= 105; y++) paint(x, y, ((x - 49) >> 1) & 1 ? [220, 210, 200] : [200, 40, 50]);\n    if ((x & 1) === 0) paint(x, 106, [200, 40, 50]);\n    for (let y = 107; y \u003c= 112; y++) paint(x, y, x === 49 || x === 63 ? [60, 40, 30] : [150, 108, 60]);\n    for (let y = 113; y \u003c= 118; y++) paint(x, y, y === 113 ? [150, 60, 56] : [80, 30, 34]);\n  }\n  for (let x = 51; x \u003c 62; x += 2)\n    for (const y of [108, 110]) paint(x, y, hsv(Math.random(), 0.8, 1));\n  P.stars = [];\n  for (let i = 0; i \u003c 34; i++) P.stars.push([Math.floor(Math.random() * W), Math.floor(Math.random() * 64), 20 + Math.random() * 40, Math.random() * 7]);\n  // Marquee bulbs every 3 rows down both edges of the tower, counted from the foot.\n  P.bulbs = [];\n  for (let y = 116; y >= 14; y -= 3) for (const s of [-1, 1]) P.bulbs.push({ x: TX + 5 * s, y, q: (116 - y) / 102, i: (116 - y) / 3, L: 0 });\n  // Eight riders round the front of the ring, two LEDs wide.\n  P.riders = [];\n  for (let i = 0; i \u003c 8; i++) {\n    const pick = (a) => a[Math.floor(Math.random() * a.length)];\n    P.riders.push({ x: TX - 15 + 4 * i, shirt: pick(SHIRTS), skin: pick(SKIN), hair: pick(HAIR), bold: Math.random(), kick: Math.random() * 7 });\n  }\n  // The crowd: heads 3 LEDs wide over shoulders that widen to 7, children lower and a few on shoulders.\n  const C = (P.crowd = new Uint8Array(N));\n  P.phones = [];\n  const person = (hx, hy, rows) => {\n    for (let d = 0; d \u003c rows && hy + d \u003c H; d++) {\n      const half = d \u003c 3 ? 1 : d === 3 ? 0 : Math.min(3, d - 3);\n      for (let x = hx - half; x \u003c= hx + half; x++) if (x >= 0 && x \u003c W && hy + d >= 0) C[(hy + d) * W + x] = 1;\n    }\n  };\n  let j = 0;\n  for (let x = -1; x \u003c W + 2; x += 4 + Math.floor(Math.random() * 3)) {\n    const r = Math.random();\n    const hy = r \u003c 0.2 ? 121 : 117 + Math.floor(Math.random() * 3);\n    person(x, hy, 20);\n    if (r > 0.93) person(x, hy - 6, 6);\n    if (j++ % 2 === 0 && x > 1 && x \u003c W - 2) {\n      const side = Math.random() \u003c 0.5 ? -2 : 2;\n      P.phones.push({ x: x + side, y: hy - 3, at: 0.1 + 0.75 * Math.random(), up: 0 });\n    }\n  }\n  P.body = [];\n  for (let p = W; p \u003c N; p++) if (C[p]) P.body.push(p);\n  // Two strings of bulbs from the station canopy out past the panel's edges.\n  P.string = [];\n  const sag = (x0, y0, x1, y1, s) => {\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      P.string.push([x, Math.round(y0 + (y1 - y0) * u + s * 4 * u * (1 - u)), (x - x0) % 3 === 0]);\n    }\n  };\n  sag(0, 86, 29, 99, 5);\n  sag(51, 99, 63, 90, 3);\n}\n\n// The tower's steel for a height in metres: two rails, an X brace every 5 m, the cap,\n// the station, and the scale of everything round it.\nfunction build(P, Ht) {\n  P.Ht = Ht;\n  P.sc = (YG - 2) / Ht;\n  P.h0 = (YG - YST) / P.sc;\n  P.h1 = (YG - YTOP) / P.sc;\n  P.vc = 3 + Ht / 20;\n  P.h = clamp(P.h || P.h0, P.h0, P.h1);\n  const T = P.tw;\n  const M = P.tm;\n  T.fill(0);\n  M.fill(0);\n  const put = (x, y, c) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    T.set(c, (y * W + x) * 3);\n    M[y * W + x] = 1;\n  };\n  // Lit from the fair below: brighter at the foot.\n  const steel = (y, f) => mix([30, 34, 54], [72, 62, 66], clamp((y - 40) / 81, 0, 1)).map((v) => v * f);\n  for (let y = 11; y \u003c= YG; y++) {\n    put(TX - 4, y, steel(y, 1));\n    put(TX + 4, y, steel(y, 1));\n    put(TX, y, steel(y, 0.45));\n  }\n  const seg = 5 * P.sc;\n  for (let y0 = YG; y0 > 11; y0 -= seg) {\n    const y1 = Math.max(11, y0 - seg);\n    for (let x = -3; x \u003c= 3; x++) put(TX + x, y0, steel(y0, 0.7));\n    for (let s = 0; s \u003c= 1; s += 0.5 / seg) {\n      const y = y0 + (y1 - y0) * s;\n      put(TX - 4 + 8 * s, y, steel(y, 0.6));\n      put(TX + 4 - 8 * s, y, steel(y, 0.6));\n    }\n  }\n  // The cap: the hoist house on top, and a mast for the beacon.\n  for (let y = 4; y \u003c= 10; y++) for (let x = TX - 6; x \u003c= TX + 6; x++) put(x, y, y === 4 || Math.abs(x - TX) === 6 ? [64, 62, 84] : [16, 16, 28]);\n  for (let y = 1; y \u003c 4; y++) put(TX, y, [50, 50, 64]);\n  // The station: a lit deck under the ring and a canopy over the queue.\n  for (let x = TX - 15; x \u003c= TX + 15; x++) {\n    put(x, YG - 1, [190, 140, 80]);\n    put(x, YG, [90, 60, 40]);\n  }\n  for (let x = TX - 10; x \u003c= TX + 10; x++) put(x, 99, [80, 54, 70]);\n  P.steel = [];\n  for (let p = 0; p \u003c N; p++) if (M[p]) P.steel.push(p);\n}\n\nfunction go(P, st) {\n  P.st = st;\n  P.e = 0;\n  P.hc = P.h;\n}\n\nfunction fall(P) {\n  go(P, FALL);\n  P.v = 0;\n}\n\nfunction ride(P, d) {\n  P.e += d;\n  if (P.st === BOARD) {\n    P.h = P.h0;\n    if (P.e > 3.5) go(P, CLIMB);\n  } else if (P.st === CLIMB) {\n    // An even haul that eases in and out: the speed peaks at twice the average.\n    const u = Math.min(1, P.e / Math.max(1, (P.h1 - P.hc) / P.vc));\n    P.h = P.hc + (P.h1 - P.hc) * (u - Math.sin(2 * Math.PI * u) / (2 * Math.PI));\n    if (u >= 1) go(P, HOLD);\n  } else if (P.st === HOLD) {\n    P.h = P.h1;\n    if (P.e > P.hold) fall(P);\n  } else if (P.st === FALL) {\n    P.v -= G * d;\n    P.h += P.v * d;\n    if (P.h \u003c= P.hB) {\n      go(P, BRAKE);\n      P.a = (P.v * P.v) / (2 * Math.max(0.5, P.h - P.hS));\n      P.flash = 1;\n    }\n  } else if (P.st === BRAKE) {\n    P.v += P.a * d;\n    P.h += P.v * d;\n    if (P.v >= 0) {\n      P.v = 0;\n      go(P, SETTLE);\n    }\n  } else if (P.st === SETTLE) {\n    // The ring rocks on the brake fins and comes to rest.\n    P.h = P.hc + (0.3 + 0.9 * P.thrill) * Math.sin(P.e * 13) * Math.exp(-P.e * 5);\n    if (P.e > 1.2) go(P, LOWER);\n  } else {\n    P.h = Math.max(P.h0, P.hc - 1.5 * P.e);\n    if (P.h \u003c= P.h0) go(P, BOARD);\n  }\n}\n\nfunction tick(P, dt) {\n  while (dt > 1e-6) {\n    const d = Math.min(dt, 1 / 60);\n    dt -= d;\n    ride(P, d);\n    P.t += d;\n    P.wheel += d * 0.1;\n    P.flash *= Math.exp(-d / 0.3);\n    const high = P.st >= CLIMB && P.st \u003c= BRAKE ? (P.h - P.h0) / (P.h1 - P.h0) : P.st === SETTLE ? 1 : -1;\n    for (const f of P.phones) f.up = clamp(f.up + (high > f.at ? d * 2 : -d * 0.6), 0, 1);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 50, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  const Ht = clamp(k[2], 50, 110);\n  P.thrill = clamp(k[3], 0, 1);\n  if (Math.abs(Ht - P.Ht) > 0.25) build(P, Ht);\n  P.hold = 1.8 + 4.2 * P.thrill;\n  P.hS = P.h0 + STOP;\n  P.hB = P.hS + (0.32 - 0.14 * P.thrill) * (P.h1 - P.h0);\n  if (!P.started) {\n    // The fair has been open a while: the panel opens on the ring hanging at the top,\n    // and at the opening knobs it falls 2 s in.\n    P.started = true;\n    for (let i = 0; i \u003c 307; i++) tick(P, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.st === BOARD) go(P, CLIMB);\n    else if ((P.st === CLIMB || P.st === HOLD) && P.h > P.hB + 2) fall(P);\n  }\n  tick(P, (dt * speed) / 2);\n}\n\n// How bright each tower bulb is in this part of the ride.\nfunction bulbLevel(P, b, ys) {\n  const t = P.t;\n  if (P.st === CLIMB) {\n    // A three-bulb chase running up at 12 bulbs a second, brighter under the ring.\n    const on = (((Math.floor(t * 12) - b.i) % 3) + 3) % 3 === 0;\n    return (on ? 1 : 0.2) * (b.y > ys ? 1 : 0.5) * (0.8 + 0.2 * Math.sin(t * 7.5));\n  }\n  if (P.st === HOLD) {\n    // The tower beats like a heart while the ring hangs. In the last 1.8 s its lights go\n    // out from the foot up, and those by the ring blink faster and faster.\n    const f = 1 - (P.hold - P.e) / 1.8;\n    if (f > 0 && b.q \u003c f * 1.05) return 0.03;\n    if (Math.abs(b.y - ys) \u003c 9) return Math.sin(P.e * (8 + 34 * clamp(f, 0, 1))) > 0 ? 1 : 0.12;\n    return f > 0 ? 0.75 : 0.3 + 0.7 * Math.max(0, Math.sin(P.e * 7)) ** 3;\n  }\n  if (P.st === FALL) return b.y \u003c ys ? 1 : 0.04;\n  if (P.st === BRAKE) return Math.floor(P.e * 18) & 1 ? 1 : 0.3;\n  if (P.st === SETTLE) return 1;\n  // Waiting and letting down: a two-phase marquee, twice a second.\n  const idle = (b.i + Math.floor(t * 2)) & 1 ? 0.85 : 0.22;\n  return P.st === LOWER ? Math.max(idle, 1 - P.e / 3) : idle;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  const t = P.t;\n  const hA = 0.12 + P.hue;\n  const cA = hsv(hA, 0.72, 1);\n  const cB = hsv(hA + 0.47, 0.7, 1);\n  const add = (x, y, c, w) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H || w \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    B[o] += c[0] * w;\n    B[o + 1] += c[1] * w;\n    B[o + 2] += c[2] * w;\n  };\n  const set = (x, y, c, f = 1) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  const bulb = (x, y, c, L) => {\n    add(x, y, c, L);\n    for (const g of GLOW) add(x + g[0], y + g[1], c, L * g[2]);\n  };\n  const ys = YST - (P.h - P.h0) * P.sc;\n  // Each tower bulb's level, and the glow they throw on the sky round the tower.\n  let lit = 0;\n  for (const b of P.bulbs) lit += b.L = bulbLevel(P, b, ys);\n  lit /= P.bulbs.length;\n  const lv = P.lv;\n  lv.fill(0);\n  for (const b of P.bulbs) if (b.L > 0.1) for (let y = Math.max(0, b.y - 14); y \u003c Math.min(H, b.y + 15); y++) lv[y] += b.L * (1 - Math.abs(y - b.y) / 15);\n  const gx = P.gx;\n  for (let x = 0; x \u003c W; x++) gx[x] = Math.exp(-(((x - TX) / 10) ** 2));\n  const halo = hsv(hA, 0.75, 0.3);\n  // The fair's glow on the low sky, in the lights' second colour, brighter while the tower is lit.\n  const glow = hsv(hA + 0.6, 0.65, 0.3 + 0.12 * lit);\n  sky(B, P.sky, lv, gx, halo, glow);\n  for (const q of P.stars) add(q[0], q[1], STAR, q[2] * (0.7 + 0.3 * Math.sin(t * 1.7 + q[3])));\n  // The Ferris wheel, 40 m across, behind the tower on the left.\n  const R = 20 * P.sc;\n  const wx = 8 - 0.55 * R;\n  const wy = YG - R - 3 * P.sc;\n  for (const s of [-1, 1]) for (let u = 0; u \u003c 1; u += 0.5 / R) add(wx + s * 0.45 * R * u, wy + (YG - wy) * u, LEG, 1);\n  for (let k = 0; k \u003c 16; k++) {\n    const a = P.wheel + (k * Math.PI) / 8;\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    for (let r = 2; r \u003c R - 1; r += 0.8) {\n      const x = wx + r * ca;\n      if (x \u003c -0.5) continue;\n      add(x, wy + r * sa, cB, 0.14 + 0.3 * Math.max(0, Math.sin((r / R) * 9 - t * 3 + k * 0.4)));\n    }\n  }\n  for (let a = -Math.PI / 2; a \u003c Math.PI / 2; a += 0.8 / R) {\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    add(wx + R * ca, wy + R * sa, RIM1, 1);\n    add(wx + (R - 2) * ca, wy + (R - 2) * sa, RIM2, 1);\n  }\n  const nb = Math.floor((2 * Math.PI * R) / 3);\n  for (let j = 0; j \u003c nb; j++) {\n    const a = P.wheel + (j * 2 * Math.PI) / nb;\n    const x = wx + R * Math.cos(a);\n    if (x \u003c -2) continue;\n    bulb(x, wy + R * Math.sin(a), j & 1 ? cB : cA, (j + Math.floor(t * 4)) % 3 === 0 ? 0.9 : 0.4);\n  }\n  const cabin = cB.map((v) => v * 0.22);\n  for (let k = 0; k \u003c 12; k++) {\n    const a = P.wheel + (k * Math.PI) / 6;\n    const x = Math.round(wx + R * Math.cos(a));\n    const y = Math.round(wy + R * Math.sin(a));\n    if (x \u003c -2) continue;\n    for (let dy = 1; dy \u003c= 3; dy++) for (let dx = -1; dx \u003c= 1; dx++) set(x + dx, y + dy, dy === 2 && dx === 0 ? WINDOW : cabin);\n  }\n  // The tower's steel over everything behind it.\n  steel(B, P.tw, P.steel);\n  // The brake fins: copper plates on both faces over the last metres, white hot while they bite.\n  const heat = P.st === BRAKE ? 1 : P.st === SETTLE ? Math.exp(-P.e * 3) : 0;\n  const fin = mix([100, 60, 40], [255, 235, 210], heat);\n  for (let y = Math.round(YST - (P.hB - P.h0) * P.sc); y \u003c= YST - (P.hS - P.h0) * P.sc + 6; y += 2) for (const x of [TX - 2, TX + 2]) set(x, y, fin);\n  const white = mix(cA, [255, 250, 240], 0.55);\n  const hot = P.st === FALL || P.st === BRAKE;\n  for (const b of P.bulbs) bulb(b.x, b.y, hot ? white : cA, b.L);\n  for (let x = TX - 6; x \u003c= TX + 6; x += 2) bulb(x, 4, cB, (x / 2 + Math.floor(t * 3)) & 1 ? 0.7 : 0.25);\n  // The beacon: a red light once every 1.5 s, a white strobe while the ring hangs at the top.\n  if (P.st === HOLD) bulb(TX, 1, STROBE, Math.sin(P.e * 20) > 0.6 ? 1.6 : 0);\n  else bulb(TX, 1, BEACON, t % 1.5 \u003c 0.25 ? 1.2 : 0.15);\n  // The ring: the catch car round the tower, the seats, the riders and their legs.\n  const yi = Math.round(ys);\n  const drop = hot || (P.st === SETTLE && P.e \u003c 0.6);\n  for (let y = yi - 6; y \u003c= yi + 1; y++) for (let x = TX - 4; x \u003c= TX + 4; x++) set(x, y, CAR);\n  for (let x = TX - 16; x \u003c= TX + 16; x++) {\n    for (let y = yi - 4; y \u003c yi; y++) set(x, y, SEAT);\n    set(x, yi, BAND);\n    if (Math.abs(x - TX) \u003c 16) set(x, yi + 1, BAND2);\n  }\n  for (let x = TX - 15; x \u003c= TX + 15; x += 2) {\n    const on = drop ? 1 : P.st === HOLD ? (Math.sin(P.e * 12) > 0 ? 1 : 0.2) : (x / 2 + Math.floor(t * 6)) % 3 === 0 ? 1 : 0.35;\n    bulb(x, yi + 1, drop ? white : ((x + 1) / 2) & 1 ? cA : cB, on * 0.9);\n  }\n  for (const r of P.riders) {\n    for (let dx = 0; dx \u003c 2; dx++) {\n      const x = r.x + dx;\n      set(x, yi - 5, r.hair);\n      set(x, yi - 4, r.skin);\n      set(x, yi - 3, HARNESS);\n      set(x, yi - 2, r.shirt);\n      set(x, yi - 1, r.shirt, 0.7);\n    }\n    if (drop) {\n      // On the drop the legs fly up and the arms go up: about half the riders' at Thrill 0,\n      // everyone's at 1.\n      set(r.x, yi + 2, JEANS);\n      set(r.x + 1, yi + 2, JEANS);\n      set(r.x - 1, yi + 3, SHOE);\n      set(r.x + 2, yi + 3, SHOE);\n      if (r.bold \u003c 0.45 + 0.55 * P.thrill)\n        for (let y = yi - 7; y \u003c= yi - 4; y++) {\n          set(r.x - 1, y, r.skin, y === yi - 7 ? 1 : 0.8);\n          set(r.x + 2, y, r.skin, y === yi - 7 ? 1 : 0.8);\n        }\n    } else {\n      const sway = Math.sin(t * 2.2 + r.kick) > 0.6 ? 1 : 0;\n      for (let y = yi + 2; y \u003c= yi + 4; y++) {\n        set(r.x, y, JEANS);\n        set(r.x + 1, y, JEANS, 0.8);\n      }\n      set(r.x + sway, yi + 5, SHOE);\n    }\n  }\n  // Strings of bulbs from the station canopy, warm white with every third one in the tower's colour.\n  let n = 0;\n  for (const q of P.string) {\n    const x = q[0];\n    const y = q[1];\n    if (!q[2]) {\n      set(x, y, WIRE);\n      continue;\n    }\n    n++;\n    bulb(x, y + 1, n % 3 === 0 ? cA : WARM, 0.55 + 0.15 * Math.sin(t * 2.3 + n * 1.7));\n  }\n  // The crowd in silhouette, its heads rimmed by the fair's light, and phones held up to film.\n  const rim = mix([20, 16, 24], cA, 0.08 + 0.1 * lit);\n  const C = P.crowd;\n  for (const p of P.body) set(p % W, Math.floor(p / W), C[p - W] ? DARK : rim);\n  for (const f of P.phones) {\n    if (f.up \u003c= 0.05) continue;\n    const y = Math.round(f.y + (1 - f.up) * 5);\n    const g = 0.75 + 0.6 * P.flash;\n    for (let a = y + 2; a \u003c y + 5; a++) if (!C[a * W + f.x]) set(f.x, a, ARM);\n    set(f.x, y, [150 * g, 185 * g, Math.min(255, 255 * g)]);\n    set(f.x, y + 1, [120 * g, 150 * g, 220 * g]);\n  }\n  // The brakes' flash lights the tower, the ring and the faces below.\n  if (P.flash > 0.01) flash(B, gx, P.gy, ys, P.flash);\n  show(display, B);\n}\n\nfunction steel(B, T, list) {\n  for (let i = 0; i \u003c list.length; i++) {\n    const o = list[i] * 3;\n    B[o] = T[o] + B[o] * 0.3;\n    B[o + 1] = T[o + 1] + B[o + 1] * 0.3;\n    B[o + 2] = T[o + 2] + B[o + 2] * 0.3;\n  }\n}\n\n// The sky, with the tower's glow round it and the fair's on the low sky.\nfunction sky(B, S, lv, gx, halo, glow) {\n  for (let y = 0, o = 0; y \u003c H; y++) {\n    const v = y \u003c YG ? Math.min(1.6, lv[y] / 6) : 0;\n    const w = y \u003c 48 || y >= YG ? 0 : ((y - 48) / 73) ** 1.4;\n    const r = glow[0] * w;\n    const g = glow[1] * w;\n    const b = glow[2] * w;\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const u = v * gx[x];\n      B[o] = S[o] + halo[0] * u + r;\n      B[o + 1] = S[o + 1] + halo[1] * u + g;\n      B[o + 2] = S[o + 2] + halo[2] * u + b;\n    }\n  }\n}\n\nfunction flash(B, gx, gy, ys, f) {\n  for (let x = 0; x \u003c W; x++) gx[x] = Math.exp(-((x - TX) ** 2) / 390);\n  for (let y = 0; y \u003c H; y++) gy[y] = f * 0.85 * Math.exp(-((y - ys) ** 2) / 390);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) {\n      const w = gx[x] * gy[y];\n      B[p] += 190 * w;\n      B[p + 1] += 215 * w;\n      B[p + 2] += 255 * w;\n    }\n}\n\nfunction show(display, B) {\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, B[p] > 255 ? 255 : B[p], B[p + 1] > 255 ? 255 : B[p + 1], B[p + 2] > 255 ? 255 : B[p + 2]);\n}\n","layer":{"id":"layer-drop-tower","type":"code","name":"drop-tower","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Drop Tower\n// Family:  fair\n// Idea:    A drop tower at a night fair hauls a ring of riders up the full height of the panel while its marquee lights chase after them, holds them at the top while the lights go out below, lets them fall at the tower's own gravity and stops them hard on the magnetic brakes over a crowd holding up their phones.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the free-fall towers of amusement parks, whose ring of seats is stopped by magnetic brakes\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Height=50..110, Thrill=0..1\n//\n// Knob 1: Lights. Turns the bulbs of the tower, the ring and the Ferris wheel round the colour wheel together with the glow they throw on the sky, starting from gold marquee bulbs over a violet glow.\n// Knob 2: Speed. How fast the night runs: at 2 the ride runs in real time, 19 s a ride with a fall of 2.1 s at 74 km/h from the top of a 50 m tower; at 0.2 it is ten times slower, at 3 half as fast again.\n// Knob 3: Height. The tower's height, 50 to 110 m. The tower always stands the full 128 rows, so a taller one makes the 40 m Ferris wheel beside it smaller, the haul longer and the fall slower on the panel, 3.3 s at 110 m.\n// Knob 4: Thrill. How long the ring hangs at the top, 1.8 s to 6 s, with the tower beating like a heart until its lights go out from the foot up in the last 1.8 s; and how hard the brakes bite, from a third of the travel at 1.8 g to a fifth at 4 g.\n// Buttons: K1 tap drops the ring at once from wherever it is on the way up, or starts the haul when it is waiting at the station.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The tower stands on column 40, from the beacon on row 1 and the cap at rows 4..10 to its\n// foot on row 121.\nconst TX = 40;\nconst YG = 121;\n// The riders' seat row at the top of the travel and at the station.\nconst YTOP = 22;\nconst YST = 110;\n// Ride states.\nconst BOARD = 0;\nconst CLIMB = 1;\nconst HOLD = 2;\nconst FALL = 3;\nconst BRAKE = 4;\nconst SETTLE = 5;\nconst LOWER = 6;\nconst G = 9.81;\n// The brakes stop the ring 4 m above the station, and it is let down from there.\nconst STOP = 4;\nconst SHIRTS = [[170, 40, 50], [40, 90, 170], [220, 210, 200], [50, 150, 70], [190, 140, 40], [130, 60, 160], [40, 40, 48]];\nconst SKIN = [[210, 160, 120], [150, 100, 70], [235, 190, 155]];\nconst HAIR = [[30, 20, 16], [90, 60, 30], [200, 170, 90], [20, 20, 24]];\n// A bulb's light on its neighbours: 1 LED away, diagonal, 2 away.\nconst GLOW = [[1, 0, 0.32], [-1, 0, 0.32], [0, 1, 0.32], [0, -1, 0.32], [1, 1, 0.14], [-1, 1, 0.14], [1, -1, 0.14], [-1, -1, 0.14], [2, 0, 0.06], [-2, 0, 0.06], [0, 2, 0.06], [0, -2, 0.06]];\n\n// Colours the Lights knob leaves alone: the wheel's legs and rim, a cabin's window, the\n// ring's catch car, seats and bands, the riders' harness, jeans and shoes, the strings'\n// wire and warm bulbs, a phone's arm, the beacon, a star and the crowd.\nconst LEG = [26, 26, 40];\nconst RIM1 = [40, 40, 58];\nconst RIM2 = [30, 30, 46];\nconst WINDOW = [210, 170, 100];\nconst CAR = [24, 24, 34];\nconst SEAT = [30, 26, 44];\nconst BAND = [96, 96, 112];\nconst BAND2 = [30, 30, 42];\nconst HARNESS = [90, 86, 30];\nconst JEANS = [40, 56, 110];\nconst SHOE = [225, 225, 235];\nconst WIRE = [12, 10, 16];\nconst WARM = [255, 196, 120];\nconst ARM = [6, 6, 10];\nconst STROBE = [255, 255, 255];\nconst BEACON = [255, 30, 20];\nconst STAR = [1, 1, 1.2];\nconst DARK = [4, 4, 8];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction mix(a, b, u) {\n  return [a[0] + (b[0] - a[0]) * u, a[1] + (b[1] - a[1]) * u, a[2] + (b[2] - a[2]) * u];\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, started: false, Ht: 0, wheel: 0.3, flash: 0, st: BOARD, e: 0, h: 0, v: 0, hc: 0, hue: 0, thrill: 0 });\n  P.buf = new Float32Array(N * 3);\n  P.sky = new Float32Array(N * 3);\n  P.tw = new Float32Array(N * 3);\n  P.tm = new Uint8Array(N);\n  P.lv = new Float32Array(H);\n  P.gx = new Float32Array(W);\n  P.gy = new Float32Array(H);\n  // Deep blue overhead, paler towards the horizon, and the stalls' warm light on the\n  // ground behind the crowd.\n  for (let y = 0; y \u003c H; y++) {\n    const c = mix([2, 4, 18], [10, 16, 52], y / (H - 1));\n    if (y > 108) for (let i = 0; i \u003c 3; i++) c[i] += [70, 46, 30][i] * ((y - 108) / 13) ** 2;\n    for (let x = 0; x \u003c W; x++) P.sky.set(c, (y * W + x) * 3);\n  }\n  // A game stall on the right: a striped awning, a lit counter with prizes on two shelves.\n  const paint = (x, y, c) => P.sky.set(c, (y * W + x) * 3);\n  for (let x = 49; x \u003c W; x++) {\n    for (let y = 103; y \u003c= 105; y++) paint(x, y, ((x - 49) >> 1) & 1 ? [220, 210, 200] : [200, 40, 50]);\n    if ((x & 1) === 0) paint(x, 106, [200, 40, 50]);\n    for (let y = 107; y \u003c= 112; y++) paint(x, y, x === 49 || x === 63 ? [60, 40, 30] : [150, 108, 60]);\n    for (let y = 113; y \u003c= 118; y++) paint(x, y, y === 113 ? [150, 60, 56] : [80, 30, 34]);\n  }\n  for (let x = 51; x \u003c 62; x += 2)\n    for (const y of [108, 110]) paint(x, y, hsv(Math.random(), 0.8, 1));\n  P.stars = [];\n  for (let i = 0; i \u003c 34; i++) P.stars.push([Math.floor(Math.random() * W), Math.floor(Math.random() * 64), 20 + Math.random() * 40, Math.random() * 7]);\n  // Marquee bulbs every 3 rows down both edges of the tower, counted from the foot.\n  P.bulbs = [];\n  for (let y = 116; y >= 14; y -= 3) for (const s of [-1, 1]) P.bulbs.push({ x: TX + 5 * s, y, q: (116 - y) / 102, i: (116 - y) / 3, L: 0 });\n  // Eight riders round the front of the ring, two LEDs wide.\n  P.riders = [];\n  for (let i = 0; i \u003c 8; i++) {\n    const pick = (a) => a[Math.floor(Math.random() * a.length)];\n    P.riders.push({ x: TX - 15 + 4 * i, shirt: pick(SHIRTS), skin: pick(SKIN), hair: pick(HAIR), bold: Math.random(), kick: Math.random() * 7 });\n  }\n  // The crowd: heads 3 LEDs wide over shoulders that widen to 7, children lower and a few on shoulders.\n  const C = (P.crowd = new Uint8Array(N));\n  P.phones = [];\n  const person = (hx, hy, rows) => {\n    for (let d = 0; d \u003c rows && hy + d \u003c H; d++) {\n      const half = d \u003c 3 ? 1 : d === 3 ? 0 : Math.min(3, d - 3);\n      for (let x = hx - half; x \u003c= hx + half; x++) if (x >= 0 && x \u003c W && hy + d >= 0) C[(hy + d) * W + x] = 1;\n    }\n  };\n  let j = 0;\n  for (let x = -1; x \u003c W + 2; x += 4 + Math.floor(Math.random() * 3)) {\n    const r = Math.random();\n    const hy = r \u003c 0.2 ? 121 : 117 + Math.floor(Math.random() * 3);\n    person(x, hy, 20);\n    if (r > 0.93) person(x, hy - 6, 6);\n    if (j++ % 2 === 0 && x > 1 && x \u003c W - 2) {\n      const side = Math.random() \u003c 0.5 ? -2 : 2;\n      P.phones.push({ x: x + side, y: hy - 3, at: 0.1 + 0.75 * Math.random(), up: 0 });\n    }\n  }\n  P.body = [];\n  for (let p = W; p \u003c N; p++) if (C[p]) P.body.push(p);\n  // Two strings of bulbs from the station canopy out past the panel's edges.\n  P.string = [];\n  const sag = (x0, y0, x1, y1, s) => {\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      P.string.push([x, Math.round(y0 + (y1 - y0) * u + s * 4 * u * (1 - u)), (x - x0) % 3 === 0]);\n    }\n  };\n  sag(0, 86, 29, 99, 5);\n  sag(51, 99, 63, 90, 3);\n}\n\n// The tower's steel for a height in metres: two rails, an X brace every 5 m, the cap,\n// the station, and the scale of everything round it.\nfunction build(P, Ht) {\n  P.Ht = Ht;\n  P.sc = (YG - 2) / Ht;\n  P.h0 = (YG - YST) / P.sc;\n  P.h1 = (YG - YTOP) / P.sc;\n  P.vc = 3 + Ht / 20;\n  P.h = clamp(P.h || P.h0, P.h0, P.h1);\n  const T = P.tw;\n  const M = P.tm;\n  T.fill(0);\n  M.fill(0);\n  const put = (x, y, c) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    T.set(c, (y * W + x) * 3);\n    M[y * W + x] = 1;\n  };\n  // Lit from the fair below: brighter at the foot.\n  const steel = (y, f) => mix([30, 34, 54], [72, 62, 66], clamp((y - 40) / 81, 0, 1)).map((v) => v * f);\n  for (let y = 11; y \u003c= YG; y++) {\n    put(TX - 4, y, steel(y, 1));\n    put(TX + 4, y, steel(y, 1));\n    put(TX, y, steel(y, 0.45));\n  }\n  const seg = 5 * P.sc;\n  for (let y0 = YG; y0 > 11; y0 -= seg) {\n    const y1 = Math.max(11, y0 - seg);\n    for (let x = -3; x \u003c= 3; x++) put(TX + x, y0, steel(y0, 0.7));\n    for (let s = 0; s \u003c= 1; s += 0.5 / seg) {\n      const y = y0 + (y1 - y0) * s;\n      put(TX - 4 + 8 * s, y, steel(y, 0.6));\n      put(TX + 4 - 8 * s, y, steel(y, 0.6));\n    }\n  }\n  // The cap: the hoist house on top, and a mast for the beacon.\n  for (let y = 4; y \u003c= 10; y++) for (let x = TX - 6; x \u003c= TX + 6; x++) put(x, y, y === 4 || Math.abs(x - TX) === 6 ? [64, 62, 84] : [16, 16, 28]);\n  for (let y = 1; y \u003c 4; y++) put(TX, y, [50, 50, 64]);\n  // The station: a lit deck under the ring and a canopy over the queue.\n  for (let x = TX - 15; x \u003c= TX + 15; x++) {\n    put(x, YG - 1, [190, 140, 80]);\n    put(x, YG, [90, 60, 40]);\n  }\n  for (let x = TX - 10; x \u003c= TX + 10; x++) put(x, 99, [80, 54, 70]);\n  P.steel = [];\n  for (let p = 0; p \u003c N; p++) if (M[p]) P.steel.push(p);\n}\n\nfunction go(P, st) {\n  P.st = st;\n  P.e = 0;\n  P.hc = P.h;\n}\n\nfunction fall(P) {\n  go(P, FALL);\n  P.v = 0;\n}\n\nfunction ride(P, d) {\n  P.e += d;\n  if (P.st === BOARD) {\n    P.h = P.h0;\n    if (P.e > 3.5) go(P, CLIMB);\n  } else if (P.st === CLIMB) {\n    // An even haul that eases in and out: the speed peaks at twice the average.\n    const u = Math.min(1, P.e / Math.max(1, (P.h1 - P.hc) / P.vc));\n    P.h = P.hc + (P.h1 - P.hc) * (u - Math.sin(2 * Math.PI * u) / (2 * Math.PI));\n    if (u >= 1) go(P, HOLD);\n  } else if (P.st === HOLD) {\n    P.h = P.h1;\n    if (P.e > P.hold) fall(P);\n  } else if (P.st === FALL) {\n    P.v -= G * d;\n    P.h += P.v * d;\n    if (P.h \u003c= P.hB) {\n      go(P, BRAKE);\n      P.a = (P.v * P.v) / (2 * Math.max(0.5, P.h - P.hS));\n      P.flash = 1;\n    }\n  } else if (P.st === BRAKE) {\n    P.v += P.a * d;\n    P.h += P.v * d;\n    if (P.v >= 0) {\n      P.v = 0;\n      go(P, SETTLE);\n    }\n  } else if (P.st === SETTLE) {\n    // The ring rocks on the brake fins and comes to rest.\n    P.h = P.hc + (0.3 + 0.9 * P.thrill) * Math.sin(P.e * 13) * Math.exp(-P.e * 5);\n    if (P.e > 1.2) go(P, LOWER);\n  } else {\n    P.h = Math.max(P.h0, P.hc - 1.5 * P.e);\n    if (P.h \u003c= P.h0) go(P, BOARD);\n  }\n}\n\nfunction tick(P, dt) {\n  while (dt > 1e-6) {\n    const d = Math.min(dt, 1 / 60);\n    dt -= d;\n    ride(P, d);\n    P.t += d;\n    P.wheel += d * 0.1;\n    P.flash *= Math.exp(-d / 0.3);\n    const high = P.st >= CLIMB && P.st \u003c= BRAKE ? (P.h - P.h0) / (P.h1 - P.h0) : P.st === SETTLE ? 1 : -1;\n    for (const f of P.phones) f.up = clamp(f.up + (high > f.at ? d * 2 : -d * 0.6), 0, 1);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 50, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  const Ht = clamp(k[2], 50, 110);\n  P.thrill = clamp(k[3], 0, 1);\n  if (Math.abs(Ht - P.Ht) > 0.25) build(P, Ht);\n  P.hold = 1.8 + 4.2 * P.thrill;\n  P.hS = P.h0 + STOP;\n  P.hB = P.hS + (0.32 - 0.14 * P.thrill) * (P.h1 - P.h0);\n  if (!P.started) {\n    // The fair has been open a while: the panel opens on the ring hanging at the top,\n    // and at the opening knobs it falls 2 s in.\n    P.started = true;\n    for (let i = 0; i \u003c 307; i++) tick(P, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.st === BOARD) go(P, CLIMB);\n    else if ((P.st === CLIMB || P.st === HOLD) && P.h > P.hB + 2) fall(P);\n  }\n  tick(P, (dt * speed) / 2);\n}\n\n// How bright each tower bulb is in this part of the ride.\nfunction bulbLevel(P, b, ys) {\n  const t = P.t;\n  if (P.st === CLIMB) {\n    // A three-bulb chase running up at 12 bulbs a second, brighter under the ring.\n    const on = (((Math.floor(t * 12) - b.i) % 3) + 3) % 3 === 0;\n    return (on ? 1 : 0.2) * (b.y > ys ? 1 : 0.5) * (0.8 + 0.2 * Math.sin(t * 7.5));\n  }\n  if (P.st === HOLD) {\n    // The tower beats like a heart while the ring hangs. In the last 1.8 s its lights go\n    // out from the foot up, and those by the ring blink faster and faster.\n    const f = 1 - (P.hold - P.e) / 1.8;\n    if (f > 0 && b.q \u003c f * 1.05) return 0.03;\n    if (Math.abs(b.y - ys) \u003c 9) return Math.sin(P.e * (8 + 34 * clamp(f, 0, 1))) > 0 ? 1 : 0.12;\n    return f > 0 ? 0.75 : 0.3 + 0.7 * Math.max(0, Math.sin(P.e * 7)) ** 3;\n  }\n  if (P.st === FALL) return b.y \u003c ys ? 1 : 0.04;\n  if (P.st === BRAKE) return Math.floor(P.e * 18) & 1 ? 1 : 0.3;\n  if (P.st === SETTLE) return 1;\n  // Waiting and letting down: a two-phase marquee, twice a second.\n  const idle = (b.i + Math.floor(t * 2)) & 1 ? 0.85 : 0.22;\n  return P.st === LOWER ? Math.max(idle, 1 - P.e / 3) : idle;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  const t = P.t;\n  const hA = 0.12 + P.hue;\n  const cA = hsv(hA, 0.72, 1);\n  const cB = hsv(hA + 0.47, 0.7, 1);\n  const add = (x, y, c, w) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H || w \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    B[o] += c[0] * w;\n    B[o + 1] += c[1] * w;\n    B[o + 2] += c[2] * w;\n  };\n  const set = (x, y, c, f = 1) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  const bulb = (x, y, c, L) => {\n    add(x, y, c, L);\n    for (const g of GLOW) add(x + g[0], y + g[1], c, L * g[2]);\n  };\n  const ys = YST - (P.h - P.h0) * P.sc;\n  // Each tower bulb's level, and the glow they throw on the sky round the tower.\n  let lit = 0;\n  for (const b of P.bulbs) lit += b.L = bulbLevel(P, b, ys);\n  lit /= P.bulbs.length;\n  const lv = P.lv;\n  lv.fill(0);\n  for (const b of P.bulbs) if (b.L > 0.1) for (let y = Math.max(0, b.y - 14); y \u003c Math.min(H, b.y + 15); y++) lv[y] += b.L * (1 - Math.abs(y - b.y) / 15);\n  const gx = P.gx;\n  for (let x = 0; x \u003c W; x++) gx[x] = Math.exp(-(((x - TX) / 10) ** 2));\n  const halo = hsv(hA, 0.75, 0.3);\n  // The fair's glow on the low sky, in the lights' second colour, brighter while the tower is lit.\n  const glow = hsv(hA + 0.6, 0.65, 0.3 + 0.12 * lit);\n  sky(B, P.sky, lv, gx, halo, glow);\n  for (const q of P.stars) add(q[0], q[1], STAR, q[2] * (0.7 + 0.3 * Math.sin(t * 1.7 + q[3])));\n  // The Ferris wheel, 40 m across, behind the tower on the left.\n  const R = 20 * P.sc;\n  const wx = 8 - 0.55 * R;\n  const wy = YG - R - 3 * P.sc;\n  for (const s of [-1, 1]) for (let u = 0; u \u003c 1; u += 0.5 / R) add(wx + s * 0.45 * R * u, wy + (YG - wy) * u, LEG, 1);\n  for (let k = 0; k \u003c 16; k++) {\n    const a = P.wheel + (k * Math.PI) / 8;\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    for (let r = 2; r \u003c R - 1; r += 0.8) {\n      const x = wx + r * ca;\n      if (x \u003c -0.5) continue;\n      add(x, wy + r * sa, cB, 0.14 + 0.3 * Math.max(0, Math.sin((r / R) * 9 - t * 3 + k * 0.4)));\n    }\n  }\n  for (let a = -Math.PI / 2; a \u003c Math.PI / 2; a += 0.8 / R) {\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    add(wx + R * ca, wy + R * sa, RIM1, 1);\n    add(wx + (R - 2) * ca, wy + (R - 2) * sa, RIM2, 1);\n  }\n  const nb = Math.floor((2 * Math.PI * R) / 3);\n  for (let j = 0; j \u003c nb; j++) {\n    const a = P.wheel + (j * 2 * Math.PI) / nb;\n    const x = wx + R * Math.cos(a);\n    if (x \u003c -2) continue;\n    bulb(x, wy + R * Math.sin(a), j & 1 ? cB : cA, (j + Math.floor(t * 4)) % 3 === 0 ? 0.9 : 0.4);\n  }\n  const cabin = cB.map((v) => v * 0.22);\n  for (let k = 0; k \u003c 12; k++) {\n    const a = P.wheel + (k * Math.PI) / 6;\n    const x = Math.round(wx + R * Math.cos(a));\n    const y = Math.round(wy + R * Math.sin(a));\n    if (x \u003c -2) continue;\n    for (let dy = 1; dy \u003c= 3; dy++) for (let dx = -1; dx \u003c= 1; dx++) set(x + dx, y + dy, dy === 2 && dx === 0 ? WINDOW : cabin);\n  }\n  // The tower's steel over everything behind it.\n  steel(B, P.tw, P.steel);\n  // The brake fins: copper plates on both faces over the last metres, white hot while they bite.\n  const heat = P.st === BRAKE ? 1 : P.st === SETTLE ? Math.exp(-P.e * 3) : 0;\n  const fin = mix([100, 60, 40], [255, 235, 210], heat);\n  for (let y = Math.round(YST - (P.hB - P.h0) * P.sc); y \u003c= YST - (P.hS - P.h0) * P.sc + 6; y += 2) for (const x of [TX - 2, TX + 2]) set(x, y, fin);\n  const white = mix(cA, [255, 250, 240], 0.55);\n  const hot = P.st === FALL || P.st === BRAKE;\n  for (const b of P.bulbs) bulb(b.x, b.y, hot ? white : cA, b.L);\n  for (let x = TX - 6; x \u003c= TX + 6; x += 2) bulb(x, 4, cB, (x / 2 + Math.floor(t * 3)) & 1 ? 0.7 : 0.25);\n  // The beacon: a red light once every 1.5 s, a white strobe while the ring hangs at the top.\n  if (P.st === HOLD) bulb(TX, 1, STROBE, Math.sin(P.e * 20) > 0.6 ? 1.6 : 0);\n  else bulb(TX, 1, BEACON, t % 1.5 \u003c 0.25 ? 1.2 : 0.15);\n  // The ring: the catch car round the tower, the seats, the riders and their legs.\n  const yi = Math.round(ys);\n  const drop = hot || (P.st === SETTLE && P.e \u003c 0.6);\n  for (let y = yi - 6; y \u003c= yi + 1; y++) for (let x = TX - 4; x \u003c= TX + 4; x++) set(x, y, CAR);\n  for (let x = TX - 16; x \u003c= TX + 16; x++) {\n    for (let y = yi - 4; y \u003c yi; y++) set(x, y, SEAT);\n    set(x, yi, BAND);\n    if (Math.abs(x - TX) \u003c 16) set(x, yi + 1, BAND2);\n  }\n  for (let x = TX - 15; x \u003c= TX + 15; x += 2) {\n    const on = drop ? 1 : P.st === HOLD ? (Math.sin(P.e * 12) > 0 ? 1 : 0.2) : (x / 2 + Math.floor(t * 6)) % 3 === 0 ? 1 : 0.35;\n    bulb(x, yi + 1, drop ? white : ((x + 1) / 2) & 1 ? cA : cB, on * 0.9);\n  }\n  for (const r of P.riders) {\n    for (let dx = 0; dx \u003c 2; dx++) {\n      const x = r.x + dx;\n      set(x, yi - 5, r.hair);\n      set(x, yi - 4, r.skin);\n      set(x, yi - 3, HARNESS);\n      set(x, yi - 2, r.shirt);\n      set(x, yi - 1, r.shirt, 0.7);\n    }\n    if (drop) {\n      // On the drop the legs fly up and the arms go up: about half the riders' at Thrill 0,\n      // everyone's at 1.\n      set(r.x, yi + 2, JEANS);\n      set(r.x + 1, yi + 2, JEANS);\n      set(r.x - 1, yi + 3, SHOE);\n      set(r.x + 2, yi + 3, SHOE);\n      if (r.bold \u003c 0.45 + 0.55 * P.thrill)\n        for (let y = yi - 7; y \u003c= yi - 4; y++) {\n          set(r.x - 1, y, r.skin, y === yi - 7 ? 1 : 0.8);\n          set(r.x + 2, y, r.skin, y === yi - 7 ? 1 : 0.8);\n        }\n    } else {\n      const sway = Math.sin(t * 2.2 + r.kick) > 0.6 ? 1 : 0;\n      for (let y = yi + 2; y \u003c= yi + 4; y++) {\n        set(r.x, y, JEANS);\n        set(r.x + 1, y, JEANS, 0.8);\n      }\n      set(r.x + sway, yi + 5, SHOE);\n    }\n  }\n  // Strings of bulbs from the station canopy, warm white with every third one in the tower's colour.\n  let n = 0;\n  for (const q of P.string) {\n    const x = q[0];\n    const y = q[1];\n    if (!q[2]) {\n      set(x, y, WIRE);\n      continue;\n    }\n    n++;\n    bulb(x, y + 1, n % 3 === 0 ? cA : WARM, 0.55 + 0.15 * Math.sin(t * 2.3 + n * 1.7));\n  }\n  // The crowd in silhouette, its heads rimmed by the fair's light, and phones held up to film.\n  const rim = mix([20, 16, 24], cA, 0.08 + 0.1 * lit);\n  const C = P.crowd;\n  for (const p of P.body) set(p % W, Math.floor(p / W), C[p - W] ? DARK : rim);\n  for (const f of P.phones) {\n    if (f.up \u003c= 0.05) continue;\n    const y = Math.round(f.y + (1 - f.up) * 5);\n    const g = 0.75 + 0.6 * P.flash;\n    for (let a = y + 2; a \u003c y + 5; a++) if (!C[a * W + f.x]) set(f.x, a, ARM);\n    set(f.x, y, [150 * g, 185 * g, Math.min(255, 255 * g)]);\n    set(f.x, y + 1, [120 * g, 150 * g, 220 * g]);\n  }\n  // The brakes' flash lights the tower, the ring and the faces below.\n  if (P.flash > 0.01) flash(B, gx, P.gy, ys, P.flash);\n  show(display, B);\n}\n\nfunction steel(B, T, list) {\n  for (let i = 0; i \u003c list.length; i++) {\n    const o = list[i] * 3;\n    B[o] = T[o] + B[o] * 0.3;\n    B[o + 1] = T[o + 1] + B[o + 1] * 0.3;\n    B[o + 2] = T[o + 2] + B[o + 2] * 0.3;\n  }\n}\n\n// The sky, with the tower's glow round it and the fair's on the low sky.\nfunction sky(B, S, lv, gx, halo, glow) {\n  for (let y = 0, o = 0; y \u003c H; y++) {\n    const v = y \u003c YG ? Math.min(1.6, lv[y] / 6) : 0;\n    const w = y \u003c 48 || y >= YG ? 0 : ((y - 48) / 73) ** 1.4;\n    const r = glow[0] * w;\n    const g = glow[1] * w;\n    const b = glow[2] * w;\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const u = v * gx[x];\n      B[o] = S[o] + halo[0] * u + r;\n      B[o + 1] = S[o + 1] + halo[1] * u + g;\n      B[o + 2] = S[o + 2] + halo[2] * u + b;\n    }\n  }\n}\n\nfunction flash(B, gx, gy, ys, f) {\n  for (let x = 0; x \u003c W; x++) gx[x] = Math.exp(-((x - TX) ** 2) / 390);\n  for (let y = 0; y \u003c H; y++) gy[y] = f * 0.85 * Math.exp(-((y - ys) ** 2) / 390);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) {\n      const w = gx[x] * gy[y];\n      B[p] += 190 * w;\n      B[p + 1] += 215 * w;\n      B[p + 2] += 255 * w;\n    }\n}\n\nfunction show(display, B) {\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, B[p] > 255 ? 255 : B[p], B[p + 1] > 255 ? 255 : B[p + 1], B[p + 2] > 255 ? 255 : B[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lights=0..1, Speed=0.2..3, Height=50..110, Thrill=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lights","min":0,"max":1,"about":"Turns the bulbs of the tower, the ring and the Ferris wheel round the colour wheel together with the glow they throw on the sky, starting from gold marquee bulbs over a violet glow."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the night runs: at 2 the ride runs in real time, 19 s a ride with a fall of 2.1 s at 74 km/h from the top of a 50 m tower; at 0.2 it is ten times slower, at 3 half as fast again."},{"name":"Height","min":50,"max":110,"about":"The tower's height, 50 to 110 m. The tower always stands the full 128 rows, so a taller one makes the 40 m Ferris wheel beside it smaller, the haul longer and the fall slower on the panel, 3.3 s at 110 m."},{"name":"Thrill","min":0,"max":1,"about":"How long the ring hangs at the top, 1.8 s to 6 s, with the tower beating like a heart until its lights go out from the foot up in the last 1.8 s; and how hard the brakes bite, from a third of the travel at 1.8 g to a fifth at 4 g."}],"start":[0,2,50,0.06],"measures":{"motion":0.437,"detail":0.0668,"edges":0.5494,"complexity":1.5352,"coverage":0.8276,"colour":0.1705,"drift":0.1633},"knobResponse":[0.0483,0.0875,0.0709,0.0567]},{"slug":"drying-mud","title":"Drying Mud","family":"cells","round":16,"note":"젖은 흙이 마르며 금이 직각으로 갈라져 T 자로 만나고, 오래된 금은 넓고 깊어지며 조각 테두리가 밝게 말려 올라가요. K1 을 누르면 소나기가 와서 금이 물에 잠겨 닫히고 흙이 다시 말라요.","idea":"Wet clay dries in the sun and splits into polygons, each new crack leaving an old one at a right angle and running until it meets another, the chips paling and curling at their rims, until a shower darkens the clay and closes the cracks.","buttons":"K1 tap brings a shower now: drops spot the clay dark, the cracks fill with water and close, and the mud starts drying again.","code":"// ===== Patternflow pattern =====\n// Title:   Drying Mud\n// Family:  cells\n// Idea:    Wet clay dries in the sun and splits into polygons, each new crack leaving an old one at a right angle and running until it meets another, the chips paling and curling at their rims, until a shower darkens the clay and closes the cracks.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Jared Tarbell's Substrate (2003), and desiccation cracks in a drying puddle\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Clay=0..1, Sun=0.3..3, Cracks=0..1, Curl=0..1\n//\n// Knob 1: Clay. What the mud is made of, starting from yellow ochre loess, then red laterite, grey river silt and at the top pale playa clay.\n// Knob 2: Sun. How hot the sun is: at 2 the first crack opens within half a second and the shower comes after 24 seconds; turned down the clay stays dark and wet for minutes, turned up it bakes paler and the cracks open wider.\n// Knob 3: Cracks. How finely the mud splits: at 0 a thick layer breaks into slabs about sixteen LEDs across with wide deep cracks, at 1 a thin film dries twice as fast and crazes into chips about six across.\n// Knob 4: Curl. How far the chips lift at their rims as they dry: low, they lie nearly flat; high, each chip is a dish, lit along the rim away from the sun and dark along the rim toward it, in the shadow of the next chip's lip.\n// Buttons: K1 tap brings a shower now: drops spot the clay dark, the cracks fill with water and close, and the mud starts drying again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// How far round a crack point its distance is written: as far as a lip,\n// its shadow and the faster drying reach.\nconst REACH = 6;\nconst NONE = 1e9;\nconst MAXC = 520;\nconst MAXP = 4096;\nconst MAXD = 96;\n// A tip moves half an LED at a time, so it enters every LED it crosses.\nconst STEP = 0.5;\n// Toward the sun, in panel terms (x right, y down): the sun stands up and to the left.\nconst SX = -0.6;\nconst SY = -0.8;\n// Dry seconds (the clock that Sun runs) before the first crack, and before the shower.\nconst ONSET = 0.4;\nconst RAIN_AT = 24;\n// A shower in real seconds: drops for 4.4 s, the cracks shut between 1.0 and 3.4,\n// and the old network is wiped at 3.6 when nothing of it shows.\nconst RAIN_LEN = 4.4;\n// The light under the shower's cloud, against full sun.\nconst DIM = 0.86;\nconst WIPE = 3.6;\n// Widest opening per generation, in LEDs: the first cracks open widest.\nconst WMAX = [3.4, 2.5, 1.8, 1.4, 1.15, 1.0];\n// Tip speed per generation in LEDs per dry second.\nconst SPEED = [48, 38, 30, 26, 24, 22];\n// Dry and wet colours of four clays.\nconst CLAYS = [\n  [230, 190, 134, 128, 82, 48],\n  [228, 132, 86, 128, 56, 34],\n  [204, 190, 166, 104, 92, 74],\n  [244, 230, 202, 140, 118, 92],\n];\n\n// exp() tables: ages in steps of 1/16 dry second up to 64 s, distances from\n// a crack's lip in steps of 1/32 LED up to REACH.\nconst AGE = new Float32Array(1025);\nconst DEEP = new Float32Array(1025);\nfor (let i = 0; i \u003c= 1024; i++) {\n  AGE[i] = 1 - Math.exp(-i / 16 / 4);\n  DEEP[i] = 1 - Math.exp(-i / 16 / 2.5);\n}\nconst LIPN = REACH * 32 + 1;\nconst DRYLIP = new Float32Array(LIPN);\nconst DISH = new Float32Array(LIPN);\nconst EDGE = new Float32Array(LIPN);\nfor (let i = 0; i \u003c LIPN; i++) {\n  const l = i / 32;\n  // Water leaves fastest at the lip, and the extra drying is gone before\n  // REACH, so a chip's damp middle has no hard edge.\n  const fade = 1 - smooth(REACH - 3, REACH - 0.5, l);\n  DRYLIP[i] = Math.exp(-l / 2.6) * fade;\n  DISH[i] = Math.exp(-l / 2.2) * fade;\n  EDGE[i] = Math.exp(-l / 0.9);\n}\n\n// How far clay with this much water left has come toward its dry colour.\nconst DRYC = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) DRYC[i] = Math.pow(1 - i / 256, 0.85);\n\nfunction ageIndex(a) {\n  const i = (a * 16) | 0;\n  return i \u003c 0 ? 0 : i > 1024 ? 1024 : i;\n}\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise whose lattice wraps every period cells.\nfunction tile(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const y0 = ((iy % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const y1 = (y0 + 1) % period;\n  const s = seed * 7919;\n  const a = hash(x0 + s, y0);\n  const b = hash(x1 + s, y0);\n  const c = hash(x0 + s, y1);\n  const d = hash(x1 + s, y1);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction wipe(P) {\n  P.occ.fill(0);\n  P.key.fill(NONE);\n  P.cid.fill(-1);\n  P.nc = 0;\n  P.np = 0;\n  P.nuclei = 0;\n  P.spawnT = 0;\n}\n\nexport function setup(params) {\n  const P = params;\n  // About 440 KB of fields per LED. On the ESP32-S3 they fit in 8 and 16\n  // bits (the nearest point as an offset, times in 1/16 s), about 160 KB.\n  P.occ = new Int16Array(N);\n  P.key = new Float32Array(N);\n  P.dist = new Float32Array(N);\n  P.nx = new Float32Array(N);\n  P.ny = new Float32Array(N);\n  P.born = new Float32Array(N);\n  P.cid = new Int16Array(N);\n  P.m = new Float32Array(N);\n  P.tone = new Float32Array(N);\n  P.rate = new Float32Array(N);\n  P.wid = new Float32Array(N);\n  P.sky = new Float32Array(128 * 128);\n  P.rgb = new Uint8ClampedArray(N * 3);\n  // Cracks: tip, heading, generation, the crack it left (which it may cross\n  // for 1.6 LEDs) and where it stops if it runs straight on.\n  P.cx = new Float32Array(MAXC);\n  P.cy = new Float32Array(MAXC);\n  P.cdx = new Float32Array(MAXC);\n  P.cdy = new Float32Array(MAXC);\n  P.cgen = new Uint8Array(MAXC);\n  P.alive = new Uint8Array(MAXC);\n  P.par = new Int16Array(MAXC);\n  P.grace = new Float32Array(MAXC);\n  P.acc = new Float32Array(MAXC);\n  P.ex = new Float32Array(MAXC);\n  P.ey = new Float32Array(MAXC);\n  // Every crack as points one LED apart, for finding the widest open clay.\n  P.px = new Float32Array(MAXP);\n  P.py = new Float32Array(MAXP);\n  P.pid = new Int16Array(MAXP);\n  // Raindrops: where and how long ago they landed.\n  P.dx = new Float32Array(MAXD);\n  P.dy = new Float32Array(MAXD);\n  P.dage = new Float32Array(MAXD).fill(9);\n  P.di = 0;\n  // The clay's own texture: blotches of silt, grit, the odd dark speck of\n  // straw and a pale sand grain, and patches that dry a little faster.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      let t = 1 + 0.12 * (tile(x / 9, y / 9, 99, 1) - 0.5) + 0.07 * (tile(x / 3.2, y / 3.2, 99, 2) - 0.5) + 0.07 * (hash(x, y + 977) - 0.5);\n      const g = hash(x + 311, y);\n      if (g \u003c 0.012) t *= 0.85;\n      else if (g > 0.988) t *= 1.12;\n      P.tone[q] = t;\n      P.rate[q] = 0.7 + 0.6 * tile(x / 11, y / 11, 99, 3);\n    }\n  // The sky the wet clay mirrors: soft clouds on a tile that wraps.\n  for (let y = 0; y \u003c 128; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      const u = (x / 128) * 8;\n      const v = (y / 128) * 8;\n      // Three octaves on lattices that wrap with the tile. Thresholding it\n      // twice gave the clouds straight edges.\n      P.sky[y * 128 + x] = 0.55 * tile(u, v, 8, 4) + 0.3 * tile(u * 2, v * 2, 16, 5) + 0.15 * tile(u * 4, v * 4, 32, 8);\n    }\n  wipe(P);\n  P.m.fill(1);\n  Object.assign(P, { clock: 0, rain: -1, wiped: false, close: 1, fill: 0, light: 1, dropAcc: 0, skyX: 0, cloudX: 0, gather: 0 });\n  Object.assign(P, { clay: 0, sun: 2, fine: 0, curl: 0.06 });\n}\n\n// A crack point at (x, y): every LED within REACH takes it as its crack,\n// with the time it opened, unless another crack's eventual lip is nearer.\n// Plain nearness let a young crack starting or ending on an old one take\n// the old one's LEDs at the junction and bridge it.\nfunction mark(P, x, y, c, point) {\n  const half = WMAX[P.cgen[c]] / 2;\n  const x0 = Math.max(0, Math.ceil(x - REACH));\n  const x1 = Math.min(W - 1, Math.floor(x + REACH));\n  const y0 = Math.max(0, Math.ceil(y - REACH));\n  const y1 = Math.min(H - 1, Math.floor(y + REACH));\n  const t = P.clock;\n  for (let j = y0; j \u003c= y1; j++) {\n    const ddy = j - y;\n    for (let i = x0; i \u003c= x1; i++) {\n      const ddx = i - x;\n      const d2 = ddx * ddx + ddy * ddy;\n      if (d2 > REACH * REACH) continue;\n      const q = j * W + i;\n      const d = Math.sqrt(d2);\n      if (d - half \u003c P.key[q]) {\n        P.key[q] = d - half;\n        P.dist[q] = d;\n        P.nx[q] = x;\n        P.ny[q] = y;\n        P.born[q] = t;\n        P.cid[q] = c;\n      }\n    }\n  }\n  if (point && P.np \u003c MAXP) {\n    P.px[P.np] = x;\n    P.py[P.np] = y;\n    P.pid[P.np] = c;\n    P.np++;\n  }\n}\n\nfunction blocked(P, c, i, j) {\n  const o = P.occ[j * W + i];\n  if (o === 0 || o - 1 === c) return false;\n  return !(o - 1 === P.par[c] && P.grace[c] > 0);\n}\n\nfunction startCrack(P, x, y, hx, hy, gen, parent) {\n  if (P.nc >= MAXC) return -1;\n  const c = P.nc++;\n  const l = Math.hypot(hx, hy) || 1;\n  P.cx[c] = x;\n  P.cy[c] = y;\n  P.cdx[c] = hx / l;\n  P.cdy[c] = hy / l;\n  P.cgen[c] = Math.min(gen, WMAX.length - 1);\n  P.alive[c] = 1;\n  P.par[c] = parent;\n  P.grace[c] = 1.6;\n  P.acc[c] = 0;\n  const i = Math.round(x);\n  const j = Math.round(y);\n  if (!P.occ[j * W + i]) P.occ[j * W + i] = c + 1;\n  mark(P, x, y, c, true);\n  return c;\n}\n\n// Walk a tip forward by len LEDs. It wobbles a little, bends to meet a crack\n// it is about to hit square on, and stops at the first LED another crack owns.\nfunction grow(P, c, len) {\n  while (len > 0 && P.alive[c]) {\n    const s = Math.min(STEP, len);\n    len -= s;\n    let hx = P.cdx[c];\n    let hy = P.cdy[c];\n    // Later, shorter cracks wander a little more than the first long ones.\n    const wob = (Math.random() - 0.5) * (0.05 + 0.02 * P.cgen[c]);\n    const cw = Math.cos(wob);\n    const sw = Math.sin(wob);\n    let tx = hx * cw - hy * sw;\n    let ty = hx * sw + hy * cw;\n    const x = P.cx[c];\n    const y = P.cy[c];\n    // Three LEDs ahead: if another crack is near there, turn toward its\n    // nearest point, which is the way that meets it at a right angle.\n    const ai = Math.round(x + tx * 3);\n    const aj = Math.round(y + ty * 3);\n    if (ai >= 0 && ai \u003c W && aj >= 0 && aj \u003c H) {\n      const q = aj * W + ai;\n      const o = P.cid[q];\n      if (o >= 0 && o !== c && o !== P.par[c] && P.dist[q] \u003c 2.6) {\n        const vx = P.nx[q] - x;\n        const vy = P.ny[q] - y;\n        const vl = Math.hypot(vx, vy) || 1;\n        tx += (vx / vl) * 0.16;\n        ty += (vy / vl) * 0.16;\n      }\n    }\n    const tl = Math.hypot(tx, ty);\n    hx = tx / tl;\n    hy = ty / tl;\n    P.cdx[c] = hx;\n    P.cdy[c] = hy;\n    const fx = x + hx * s;\n    const fy = y + hy * s;\n    const pi = Math.round(x);\n    const pj = Math.round(y);\n    const ci = Math.round(fx);\n    const cj = Math.round(fy);\n    if (ci \u003c 0 || ci >= W || cj \u003c 0 || cj >= H) {\n      P.alive[c] = 0;\n      break;\n    }\n    if (ci !== pi || cj !== pj) {\n      const diag = ci !== pi && cj !== pj;\n      let hit = blocked(P, c, ci, cj);\n      let hi = ci;\n      let hj = cj;\n      if (!hit && diag) {\n        if (blocked(P, c, ci, pj)) {\n          hit = true;\n          hj = pj;\n        } else if (blocked(P, c, pi, cj)) {\n          hit = true;\n          hi = pi;\n        }\n      }\n      if (hit) {\n        // Close the gap onto the crack it ran into: a T-junction.\n        mark(P, (x + hi) / 2, (y + hj) / 2, c, false);\n        mark(P, hi, hj, c, true);\n        P.alive[c] = 0;\n        break;\n      }\n      P.occ[cj * W + ci] = c + 1;\n      if (diag) P.occ[pj * W + ci] = c + 1;\n    }\n    P.cx[c] = fx;\n    P.cy[c] = fy;\n    P.grace[c] -= s;\n    // The distance field gets every half LED; the point list one per LED.\n    P.acc[c] += s;\n    const point = P.acc[c] >= 1;\n    if (point) P.acc[c] -= 1;\n    mark(P, fx, fy, c, point);\n  }\n}\n\nfunction segDist2(x, y, ax, ay, bx, by) {\n  const vx = bx - ax;\n  const vy = by - ay;\n  const l2 = vx * vx + vy * vy;\n  let t = l2 > 0 ? ((x - ax) * vx + (y - ay) * vy) / l2 : 0;\n  t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n  const dx = x - ax - vx * t;\n  const dy = y - ay - vy * t;\n  return dx * dx + dy * dy;\n}\n\n// The mud cracks where the stress is, in the widest clay no crack has\n// reached: of ten places tried, the one furthest from every crack, every\n// tip's path ahead and the frame. The new crack leaves the nearest crack\n// toward it, so at a right angle.\nfunction spawn(P) {\n  for (let c = 0; c \u003c P.nc; c++) {\n    if (!P.alive[c]) continue;\n    let x = P.cx[c];\n    let y = P.cy[c];\n    for (let k = 0; k \u003c 140; k++) {\n      const i = Math.round(x + P.cdx[c]);\n      const j = Math.round(y + P.cdy[c]);\n      if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || blocked(P, c, i, j)) break;\n      x += P.cdx[c];\n      y += P.cdy[c];\n    }\n    P.ex[c] = x;\n    P.ey[c] = y;\n  }\n  let best = -1;\n  let bx = 0;\n  let by = 0;\n  for (let s = 0; s \u003c 10; s++) {\n    const x = Math.random() * (W - 1);\n    const y = Math.random() * (H - 1);\n    // The frame counts as a crack two LEDs out: the mud goes on past the panel.\n    const e = Math.min(x + 2.5, W + 1.5 - x, y + 2.5, H + 1.5 - y);\n    let d2 = e * e;\n    for (let p = 0; p \u003c P.np; p++) {\n      const ddx = P.px[p] - x;\n      const ddy = P.py[p] - y;\n      const v = ddx * ddx + ddy * ddy;\n      if (v \u003c d2) d2 = v;\n    }\n    for (let c = 0; c \u003c P.nc; c++) {\n      if (!P.alive[c]) continue;\n      const v = segDist2(x, y, P.cx[c], P.cy[c], P.ex[c], P.ey[c]);\n      if (v \u003c d2) d2 = v;\n    }\n    if (d2 > best) {\n      best = d2;\n      bx = x;\n      by = y;\n    }\n  }\n  if (best \u003c P.lmin * P.lmin) return;\n  const gen0 = P.nuclei \u003c P.wantNuclei;\n  if (gen0) {\n    // A crack that starts in open clay runs both ways from where it started.\n    P.nuclei++;\n    const a = Math.random() * Math.PI;\n    const hx = Math.cos(a);\n    const hy = Math.sin(a);\n    const c1 = startCrack(P, bx, by, hx, hy, 0, -1);\n    if (c1 \u003c 0) return;\n    const c2 = startCrack(P, bx, by, -hx, -hy, 0, c1);\n    if (c2 >= 0) P.par[c1] = c2;\n    return;\n  }\n  // The nearest crack point, or the frame if that is nearer.\n  let src = -1;\n  let sd = NONE;\n  for (let p = 0; p \u003c P.np; p++) {\n    const ddx = P.px[p] - bx;\n    const ddy = P.py[p] - by;\n    const v = ddx * ddx + ddy * ddy;\n    if (v \u003c sd) {\n      sd = v;\n      src = p;\n    }\n  }\n  const el = bx + 2.5;\n  const er = W + 1.5 - bx;\n  const et = by + 2.5;\n  const e = Math.min(el, er, et, H + 1.5 - by);\n  const jit = (Math.random() - 0.5) * 0.24;\n  let sx, sy, hx, hy;\n  let gen = 1;\n  let parent = -1;\n  if (src \u003c 0 || e * e \u003c sd) {\n    // A crack that started beyond the frame comes in square to it.\n    if (e === el) [sx, sy, hx, hy] = [0, by, 1, jit];\n    else if (e === er) [sx, sy, hx, hy] = [W - 1, by, -1, jit];\n    else if (e === et) [sx, sy, hx, hy] = [bx, 0, jit, 1];\n    else [sx, sy, hx, hy] = [bx, H - 1, jit, -1];\n    if (P.occ[Math.round(sy) * W + Math.round(sx)]) return;\n  } else {\n    sx = P.px[src];\n    sy = P.py[src];\n    parent = P.pid[src];\n    gen = P.cgen[parent] + 1;\n    const vx = bx - sx;\n    const vy = by - sy;\n    const cj = Math.cos(jit);\n    const sj = Math.sin(jit);\n    hx = vx * cj - vy * sj;\n    hy = vx * sj + vy * cj;\n  }\n  startCrack(P, sx, sy, hx, hy, gen, parent);\n}\n\nfunction startRain(P) {\n  if (P.rain >= 0) return;\n  P.rain = 0;\n  P.wiped = false;\n}\n\n// One pass over the clay. A crack opens as a hairline and widens toward its\n// generation's width, so a tip is always thinner than the crack behind it.\n// Clay along a crack dries fast, having a second face to the air; a thin\n// film dries faster than a thick layer, and a curled rim dries from below too.\nfunction soak(P, ddt) {\n  const close = P.close;\n  const wsc = (1 - 0.5 * P.fine) * (0.8 + 0.1 * P.sun) * close;\n  const young = 0.45 * close;\n  const clock = P.clock;\n  const dries = P.rain \u003c 0;\n  const thin = ddt * (0.7 + 0.8 * P.fine);\n  const edge = 0.2 + (1.1 + 0.6 * P.curl) * P.curl;\n  const m = P.m;\n  for (let q = 0; q \u003c N; q++) {\n    let rate = 0.15;\n    if (P.key[q] \u003c NONE) {\n      const wmax = WMAX[P.cgen[P.cid[q]]] * wsc;\n      const w = young + (wmax - young) * AGE[ageIndex(clock - P.born[q])];\n      P.wid[q] = w;\n      const lip = P.dist[q] - w / 2;\n      rate += edge * (lip \u003c= 0 ? 1 : DRYLIP[Math.min(LIPN - 1, (lip * 32) | 0)]);\n    }\n    if (dries) {\n      const v = m[q] - thin * rate * P.rate[q];\n      m[q] = v > 0 ? v : 0;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.clay = Math.max(0, Math.min(1, k[0]));\n  P.sun = Math.max(0.3, Math.min(3, k[1]));\n  P.fine = Math.max(0, Math.min(1, k[2]));\n  P.curl = Math.max(0, Math.min(1, k[3]));\n  // The widest clay left uncracked. It shrinks a little in the dry spell, so\n  // the biggest chips still split now and then.\n  P.lmin = (8 - 5 * P.fine) * (1 - 0.22 * smooth(9, 22, P.clock));\n  P.wantNuclei = 3 + Math.round(2 * P.fine);\n  if (input.btnPressed && input.btnPressed[0]) startRain(P);\n  // The clock everything dries by: Sun 2 runs it at real time.\n  const ddt = (dt * P.sun) / 2;\n  // Clouds mirrored in wet clay drift at three LEDs a second.\n  P.skyX += dt * 3;\n  // Cloud shadows cross the flat on the wind at eight LEDs a second. They\n  // gather over the last eight dry seconds before a shower and clear after it.\n  P.cloudX += dt * 8;\n  const gather = P.rain >= 0 ? 1 : smooth(RAIN_AT - 8, RAIN_AT, P.clock);\n  P.gather += (gather - P.gather) * Math.min(1, dt * (P.rain >= 0 ? 4 : 0.5));\n\n  const m = P.m;\n  if (P.rain >= 0) {\n    P.rain += dt;\n    const r = P.rain;\n    const env = smooth(0, 0.8, r) * (1 - smooth(3.0, RAIN_LEN, r));\n    P.light = Math.max(DIM, P.light - dt * 0.2);\n    P.fill = smooth(0.2, 1.4, r);\n    P.close = 1 - smooth(1.0, 3.4, r);\n    P.dropAcc += dt * 150 * env;\n    while (P.dropAcc >= 1) {\n      P.dropAcc -= 1;\n      const x = Math.random() * W;\n      const y = Math.random() * H;\n      P.dx[P.di] = x;\n      P.dy[P.di] = y;\n      P.dage[P.di] = 0;\n      P.di = (P.di + 1) % MAXD;\n      // Each drop darkens a spot three LEDs across, the way the first drops\n      // of a shower spot dry dirt.\n      for (let j = Math.floor(y - 1.5); j \u003c= y + 1.5; j++)\n        for (let i = Math.floor(x - 1.5); i \u003c= x + 1.5; i++)\n          if (i >= 0 && i \u003c W && j >= 0 && j \u003c H && (i - x) * (i - x) + (j - y) * (j - y) \u003c 2.3) m[j * W + i] = 1;\n    }\n    for (let q = 0; q \u003c N; q++) m[q] = Math.min(1, m[q] + dt * 0.3 * env);\n    if (r >= WIPE && !P.wiped) {\n      P.wiped = true;\n      wipe(P);\n    }\n    if (r >= RAIN_LEN) {\n      P.rain = -1;\n      // The water soaks away before the clay starts to crack again.\n      P.clock = -2.5;\n      P.close = 1;\n      P.fill = 0;\n    }\n  } else {\n    P.light = Math.min(1, P.light + dt * 0.3);\n    P.clock += ddt;\n    // A thin film cracks sooner than a thick layer.\n    if (P.clock > ONSET - 0.4 * P.fine) {\n      for (let c = 0; c \u003c P.nc; c++) if (P.alive[c]) grow(P, c, SPEED[P.cgen[c]] * ddt);\n      let active = 0;\n      for (let c = 0; c \u003c P.nc; c++) active += P.alive[c];\n      P.spawnT += ddt;\n      const most = 5 + Math.round(5 * P.fine);\n      while (P.spawnT > 0.1) {\n        P.spawnT -= 0.1;\n        if (active \u003c most || P.nuclei \u003c P.wantNuclei) {\n          const before = P.nc;\n          spawn(P);\n          active += P.nc - before;\n        }\n      }\n    }\n    if (P.clock > RAIN_AT) startRain(P);\n  }\n  soak(P, ddt);\n  for (let i = 0; i \u003c MAXD; i++) P.dage[i] += dt;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const f = P.clay * (CLAYS.length - 1);\n  const ci = Math.min(CLAYS.length - 2, Math.floor(f));\n  const u = f - ci;\n  const A = CLAYS[ci];\n  const B = CLAYS[ci + 1];\n  const [dr, dg, db, wr, wg, wb] = A.map((v, i) => v + (B[i] - v) * u);\n  // A hot sun bleaches the dry clay a little; an overcast one leaves it dull.\n  const light = P.light * (0.86 + 0.07 * P.sun);\n  // Curl needs sun: under the shower's cloud the chips lie in flat light.\n  const curl = (0.42 + 0.58 * P.curl) * ((P.light - DIM) / (1 - DIM)) * (0.7 + 0.15 * P.sun);\n  const fill = P.fill;\n  const clock = P.clock;\n  const sky = P.sky;\n  const sxo = Math.floor(P.skyX);\n  const cxo = P.cloudX * 0.24;\n  const cth = 0.56 - 0.38 * P.gather;\n  // A cloud's shadow takes as much light as the shower's overcast, and\n  // melts into it when the shower comes.\n  const deep = (1 - DIM) * ((P.light - DIM) / (1 - DIM));\n  const rgb = P.rgb;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const wet = P.m[q];\n      const dry = DRYC[(wet * 256) | 0];\n      // The cloud shadow: the sky tile at four times the size, sampled\n      // smoothly so its edge slides rather than steps.\n      const cu = (x * 0.22 - y * 0.09 + 64 + cxo) % 128;\n      const cv = x * 0.09 + y * 0.22 + 37;\n      const c0 = Math.floor(cu);\n      const v0 = Math.floor(cv);\n      const fu = cu - c0;\n      const fv = cv - v0;\n      const r0 = (v0 & 127) * 128;\n      const r1 = ((v0 + 1) & 127) * 128;\n      const a0 = sky[r0 + c0] + (sky[r0 + ((c0 + 1) & 127)] - sky[r0 + c0]) * fu;\n      const a1 = sky[r1 + c0] + (sky[r1 + ((c0 + 1) & 127)] - sky[r1 + c0]) * fu;\n      let shadow = (a0 + (a1 - a0) * fv - cth) * 6;\n      shadow = shadow \u003c 0 ? 0 : shadow > 1 ? 1 : shadow * shadow * (3 - 2 * shadow);\n      const t = P.tone[q] * light * (1 - deep * shadow);\n      const sun = 1 - 0.75 * shadow;\n      let r = (wr + (dr - wr) * dry) * t;\n      let g = (wg + (dg - wg) * dry) * t;\n      let b = (wb + (db - wb) * dry) * t;\n      // Wet clay mirrors the sky faintly.\n      let sk = (sky[(y & 127) * 128 + ((x + sxo) & 127)] - 0.38) * 2.9;\n      sk = sk \u003c 0 ? 0 : sk > 1 ? 1 : sk;\n      let sh = wet > 0.7 ? (wet - 0.7) / 0.3 : 0;\n      sh = sh * sh * (0.03 + 0.12 * sk);\n      if (sh > 0) {\n        r += (214 - r) * sh;\n        g += (212 - g) * sh;\n        b += (206 - b) * sh;\n      }\n      if (P.key[q] \u003c NONE) {\n        const d = P.dist[q];\n        const w = P.wid[q];\n        const half = w / 2;\n        let gx = 0;\n        let gy = 0;\n        if (d > 0.05) {\n          gx = (x - P.nx[q]) / d;\n          gy = (y - P.ny[q]) / d;\n        }\n        // Positive where this LED's chip lies toward the sun from its crack.\n        const facing = gx * SX + gy * SY;\n        const lip = d - half;\n        if (lip > 0) {\n          // A drying chip curls into a dish: the rim away from the sun tilts\n          // toward it, and the rim on the sun side turns away and lies in\n          // the shadow of the lip across the crack.\n          const li = Math.min(LIPN - 1, (lip * 32) | 0);\n          const cs = curl * sun * smooth(0, 0.6, 1 - wet);\n          let lift = 1 + cs * DISH[li] * (0.06 + 0.4 * facing) + cs * 0.14 * EDGE[li];\n          if (facing \u003c 0) {\n            const reach = cs * 2.4 * -facing;\n            if (lip \u003c reach) lift *= 1 - 0.45 * smooth(0, 0.8, reach - lip);\n          }\n          r *= lift;\n          g *= lift;\n          b *= lift;\n        }\n        const a = half + 0.5 - d;\n        if (a > 0) {\n          const cover = a > 1 ? 1 : a;\n          const depth = DEEP[ageIndex(clock - P.born[q])];\n          // The wall that faces the sun is lit; the other lies in the shadow of its lip.\n          const wall = facing \u003c -0.3 && w > 1.5 && d > 0.6;\n          const shade = wall ? 0.58 - 0.2 * depth : 0.5 - 0.44 * depth;\n          let cr = r * shade;\n          let cg = g * shade;\n          let cb = b * shade;\n          if (fill > 0) {\n            // Rain water in the crack: dark, with the clouds in it.\n            const v = 0.75 + 0.5 * sk;\n            cr += (62 * v - cr) * fill;\n            cg += (66 * v - cg) * fill;\n            cb += (70 * v - cb) * fill;\n          }\n          r += (cr - r) * cover;\n          g += (cg - g) * cover;\n          b += (cb - b) * cover;\n        }\n      }\n      rgb[q * 3] = r;\n      rgb[q * 3 + 1] = g;\n      rgb[q * 3 + 2] = b;\n    }\n  }\n  // Raindrops: a bright point where one lands, then a ring that spreads and fades.\n  for (let i = 0; i \u003c MAXD; i++) {\n    const age = P.dage[i];\n    if (age > 0.3) continue;\n    const x = P.dx[i];\n    const y = P.dy[i];\n    const rad = 0.3 + age * 7;\n    const amp = (1 - age / 0.3) * (age \u003c 0.05 ? 0.9 : 0.45);\n    const e = Math.ceil(rad + 1);\n    for (let j = Math.round(y) - e; j \u003c= y + e; j++)\n      for (let ii = Math.round(x) - e; ii \u003c= x + e; ii++) {\n        if (ii \u003c 0 || ii >= W || j \u003c 0 || j >= H) continue;\n        const ring = (1 - Math.abs(Math.hypot(ii - x, j - y) - rad) / 0.8) * amp;\n        if (ring \u003c= 0) continue;\n        const q = (j * W + ii) * 3;\n        rgb[q] += (214 - rgb[q]) * ring;\n        rgb[q + 1] += (220 - rgb[q + 1]) * ring;\n        rgb[q + 2] += (226 - rgb[q + 2]) * ring;\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[q], rgb[q + 1], rgb[q + 2]);\n    }\n}\n","layer":{"id":"layer-drying-mud","type":"code","name":"drying-mud","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Drying Mud\n// Family:  cells\n// Idea:    Wet clay dries in the sun and splits into polygons, each new crack leaving an old one at a right angle and running until it meets another, the chips paling and curling at their rims, until a shower darkens the clay and closes the cracks.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Jared Tarbell's Substrate (2003), and desiccation cracks in a drying puddle\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Clay=0..1, Sun=0.3..3, Cracks=0..1, Curl=0..1\n//\n// Knob 1: Clay. What the mud is made of, starting from yellow ochre loess, then red laterite, grey river silt and at the top pale playa clay.\n// Knob 2: Sun. How hot the sun is: at 2 the first crack opens within half a second and the shower comes after 24 seconds; turned down the clay stays dark and wet for minutes, turned up it bakes paler and the cracks open wider.\n// Knob 3: Cracks. How finely the mud splits: at 0 a thick layer breaks into slabs about sixteen LEDs across with wide deep cracks, at 1 a thin film dries twice as fast and crazes into chips about six across.\n// Knob 4: Curl. How far the chips lift at their rims as they dry: low, they lie nearly flat; high, each chip is a dish, lit along the rim away from the sun and dark along the rim toward it, in the shadow of the next chip's lip.\n// Buttons: K1 tap brings a shower now: drops spot the clay dark, the cracks fill with water and close, and the mud starts drying again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// How far round a crack point its distance is written: as far as a lip,\n// its shadow and the faster drying reach.\nconst REACH = 6;\nconst NONE = 1e9;\nconst MAXC = 520;\nconst MAXP = 4096;\nconst MAXD = 96;\n// A tip moves half an LED at a time, so it enters every LED it crosses.\nconst STEP = 0.5;\n// Toward the sun, in panel terms (x right, y down): the sun stands up and to the left.\nconst SX = -0.6;\nconst SY = -0.8;\n// Dry seconds (the clock that Sun runs) before the first crack, and before the shower.\nconst ONSET = 0.4;\nconst RAIN_AT = 24;\n// A shower in real seconds: drops for 4.4 s, the cracks shut between 1.0 and 3.4,\n// and the old network is wiped at 3.6 when nothing of it shows.\nconst RAIN_LEN = 4.4;\n// The light under the shower's cloud, against full sun.\nconst DIM = 0.86;\nconst WIPE = 3.6;\n// Widest opening per generation, in LEDs: the first cracks open widest.\nconst WMAX = [3.4, 2.5, 1.8, 1.4, 1.15, 1.0];\n// Tip speed per generation in LEDs per dry second.\nconst SPEED = [48, 38, 30, 26, 24, 22];\n// Dry and wet colours of four clays.\nconst CLAYS = [\n  [230, 190, 134, 128, 82, 48],\n  [228, 132, 86, 128, 56, 34],\n  [204, 190, 166, 104, 92, 74],\n  [244, 230, 202, 140, 118, 92],\n];\n\n// exp() tables: ages in steps of 1/16 dry second up to 64 s, distances from\n// a crack's lip in steps of 1/32 LED up to REACH.\nconst AGE = new Float32Array(1025);\nconst DEEP = new Float32Array(1025);\nfor (let i = 0; i \u003c= 1024; i++) {\n  AGE[i] = 1 - Math.exp(-i / 16 / 4);\n  DEEP[i] = 1 - Math.exp(-i / 16 / 2.5);\n}\nconst LIPN = REACH * 32 + 1;\nconst DRYLIP = new Float32Array(LIPN);\nconst DISH = new Float32Array(LIPN);\nconst EDGE = new Float32Array(LIPN);\nfor (let i = 0; i \u003c LIPN; i++) {\n  const l = i / 32;\n  // Water leaves fastest at the lip, and the extra drying is gone before\n  // REACH, so a chip's damp middle has no hard edge.\n  const fade = 1 - smooth(REACH - 3, REACH - 0.5, l);\n  DRYLIP[i] = Math.exp(-l / 2.6) * fade;\n  DISH[i] = Math.exp(-l / 2.2) * fade;\n  EDGE[i] = Math.exp(-l / 0.9);\n}\n\n// How far clay with this much water left has come toward its dry colour.\nconst DRYC = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) DRYC[i] = Math.pow(1 - i / 256, 0.85);\n\nfunction ageIndex(a) {\n  const i = (a * 16) | 0;\n  return i \u003c 0 ? 0 : i > 1024 ? 1024 : i;\n}\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise whose lattice wraps every period cells.\nfunction tile(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const y0 = ((iy % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const y1 = (y0 + 1) % period;\n  const s = seed * 7919;\n  const a = hash(x0 + s, y0);\n  const b = hash(x1 + s, y0);\n  const c = hash(x0 + s, y1);\n  const d = hash(x1 + s, y1);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction wipe(P) {\n  P.occ.fill(0);\n  P.key.fill(NONE);\n  P.cid.fill(-1);\n  P.nc = 0;\n  P.np = 0;\n  P.nuclei = 0;\n  P.spawnT = 0;\n}\n\nexport function setup(params) {\n  const P = params;\n  // About 440 KB of fields per LED. On the ESP32-S3 they fit in 8 and 16\n  // bits (the nearest point as an offset, times in 1/16 s), about 160 KB.\n  P.occ = new Int16Array(N);\n  P.key = new Float32Array(N);\n  P.dist = new Float32Array(N);\n  P.nx = new Float32Array(N);\n  P.ny = new Float32Array(N);\n  P.born = new Float32Array(N);\n  P.cid = new Int16Array(N);\n  P.m = new Float32Array(N);\n  P.tone = new Float32Array(N);\n  P.rate = new Float32Array(N);\n  P.wid = new Float32Array(N);\n  P.sky = new Float32Array(128 * 128);\n  P.rgb = new Uint8ClampedArray(N * 3);\n  // Cracks: tip, heading, generation, the crack it left (which it may cross\n  // for 1.6 LEDs) and where it stops if it runs straight on.\n  P.cx = new Float32Array(MAXC);\n  P.cy = new Float32Array(MAXC);\n  P.cdx = new Float32Array(MAXC);\n  P.cdy = new Float32Array(MAXC);\n  P.cgen = new Uint8Array(MAXC);\n  P.alive = new Uint8Array(MAXC);\n  P.par = new Int16Array(MAXC);\n  P.grace = new Float32Array(MAXC);\n  P.acc = new Float32Array(MAXC);\n  P.ex = new Float32Array(MAXC);\n  P.ey = new Float32Array(MAXC);\n  // Every crack as points one LED apart, for finding the widest open clay.\n  P.px = new Float32Array(MAXP);\n  P.py = new Float32Array(MAXP);\n  P.pid = new Int16Array(MAXP);\n  // Raindrops: where and how long ago they landed.\n  P.dx = new Float32Array(MAXD);\n  P.dy = new Float32Array(MAXD);\n  P.dage = new Float32Array(MAXD).fill(9);\n  P.di = 0;\n  // The clay's own texture: blotches of silt, grit, the odd dark speck of\n  // straw and a pale sand grain, and patches that dry a little faster.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      let t = 1 + 0.12 * (tile(x / 9, y / 9, 99, 1) - 0.5) + 0.07 * (tile(x / 3.2, y / 3.2, 99, 2) - 0.5) + 0.07 * (hash(x, y + 977) - 0.5);\n      const g = hash(x + 311, y);\n      if (g \u003c 0.012) t *= 0.85;\n      else if (g > 0.988) t *= 1.12;\n      P.tone[q] = t;\n      P.rate[q] = 0.7 + 0.6 * tile(x / 11, y / 11, 99, 3);\n    }\n  // The sky the wet clay mirrors: soft clouds on a tile that wraps.\n  for (let y = 0; y \u003c 128; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      const u = (x / 128) * 8;\n      const v = (y / 128) * 8;\n      // Three octaves on lattices that wrap with the tile. Thresholding it\n      // twice gave the clouds straight edges.\n      P.sky[y * 128 + x] = 0.55 * tile(u, v, 8, 4) + 0.3 * tile(u * 2, v * 2, 16, 5) + 0.15 * tile(u * 4, v * 4, 32, 8);\n    }\n  wipe(P);\n  P.m.fill(1);\n  Object.assign(P, { clock: 0, rain: -1, wiped: false, close: 1, fill: 0, light: 1, dropAcc: 0, skyX: 0, cloudX: 0, gather: 0 });\n  Object.assign(P, { clay: 0, sun: 2, fine: 0, curl: 0.06 });\n}\n\n// A crack point at (x, y): every LED within REACH takes it as its crack,\n// with the time it opened, unless another crack's eventual lip is nearer.\n// Plain nearness let a young crack starting or ending on an old one take\n// the old one's LEDs at the junction and bridge it.\nfunction mark(P, x, y, c, point) {\n  const half = WMAX[P.cgen[c]] / 2;\n  const x0 = Math.max(0, Math.ceil(x - REACH));\n  const x1 = Math.min(W - 1, Math.floor(x + REACH));\n  const y0 = Math.max(0, Math.ceil(y - REACH));\n  const y1 = Math.min(H - 1, Math.floor(y + REACH));\n  const t = P.clock;\n  for (let j = y0; j \u003c= y1; j++) {\n    const ddy = j - y;\n    for (let i = x0; i \u003c= x1; i++) {\n      const ddx = i - x;\n      const d2 = ddx * ddx + ddy * ddy;\n      if (d2 > REACH * REACH) continue;\n      const q = j * W + i;\n      const d = Math.sqrt(d2);\n      if (d - half \u003c P.key[q]) {\n        P.key[q] = d - half;\n        P.dist[q] = d;\n        P.nx[q] = x;\n        P.ny[q] = y;\n        P.born[q] = t;\n        P.cid[q] = c;\n      }\n    }\n  }\n  if (point && P.np \u003c MAXP) {\n    P.px[P.np] = x;\n    P.py[P.np] = y;\n    P.pid[P.np] = c;\n    P.np++;\n  }\n}\n\nfunction blocked(P, c, i, j) {\n  const o = P.occ[j * W + i];\n  if (o === 0 || o - 1 === c) return false;\n  return !(o - 1 === P.par[c] && P.grace[c] > 0);\n}\n\nfunction startCrack(P, x, y, hx, hy, gen, parent) {\n  if (P.nc >= MAXC) return -1;\n  const c = P.nc++;\n  const l = Math.hypot(hx, hy) || 1;\n  P.cx[c] = x;\n  P.cy[c] = y;\n  P.cdx[c] = hx / l;\n  P.cdy[c] = hy / l;\n  P.cgen[c] = Math.min(gen, WMAX.length - 1);\n  P.alive[c] = 1;\n  P.par[c] = parent;\n  P.grace[c] = 1.6;\n  P.acc[c] = 0;\n  const i = Math.round(x);\n  const j = Math.round(y);\n  if (!P.occ[j * W + i]) P.occ[j * W + i] = c + 1;\n  mark(P, x, y, c, true);\n  return c;\n}\n\n// Walk a tip forward by len LEDs. It wobbles a little, bends to meet a crack\n// it is about to hit square on, and stops at the first LED another crack owns.\nfunction grow(P, c, len) {\n  while (len > 0 && P.alive[c]) {\n    const s = Math.min(STEP, len);\n    len -= s;\n    let hx = P.cdx[c];\n    let hy = P.cdy[c];\n    // Later, shorter cracks wander a little more than the first long ones.\n    const wob = (Math.random() - 0.5) * (0.05 + 0.02 * P.cgen[c]);\n    const cw = Math.cos(wob);\n    const sw = Math.sin(wob);\n    let tx = hx * cw - hy * sw;\n    let ty = hx * sw + hy * cw;\n    const x = P.cx[c];\n    const y = P.cy[c];\n    // Three LEDs ahead: if another crack is near there, turn toward its\n    // nearest point, which is the way that meets it at a right angle.\n    const ai = Math.round(x + tx * 3);\n    const aj = Math.round(y + ty * 3);\n    if (ai >= 0 && ai \u003c W && aj >= 0 && aj \u003c H) {\n      const q = aj * W + ai;\n      const o = P.cid[q];\n      if (o >= 0 && o !== c && o !== P.par[c] && P.dist[q] \u003c 2.6) {\n        const vx = P.nx[q] - x;\n        const vy = P.ny[q] - y;\n        const vl = Math.hypot(vx, vy) || 1;\n        tx += (vx / vl) * 0.16;\n        ty += (vy / vl) * 0.16;\n      }\n    }\n    const tl = Math.hypot(tx, ty);\n    hx = tx / tl;\n    hy = ty / tl;\n    P.cdx[c] = hx;\n    P.cdy[c] = hy;\n    const fx = x + hx * s;\n    const fy = y + hy * s;\n    const pi = Math.round(x);\n    const pj = Math.round(y);\n    const ci = Math.round(fx);\n    const cj = Math.round(fy);\n    if (ci \u003c 0 || ci >= W || cj \u003c 0 || cj >= H) {\n      P.alive[c] = 0;\n      break;\n    }\n    if (ci !== pi || cj !== pj) {\n      const diag = ci !== pi && cj !== pj;\n      let hit = blocked(P, c, ci, cj);\n      let hi = ci;\n      let hj = cj;\n      if (!hit && diag) {\n        if (blocked(P, c, ci, pj)) {\n          hit = true;\n          hj = pj;\n        } else if (blocked(P, c, pi, cj)) {\n          hit = true;\n          hi = pi;\n        }\n      }\n      if (hit) {\n        // Close the gap onto the crack it ran into: a T-junction.\n        mark(P, (x + hi) / 2, (y + hj) / 2, c, false);\n        mark(P, hi, hj, c, true);\n        P.alive[c] = 0;\n        break;\n      }\n      P.occ[cj * W + ci] = c + 1;\n      if (diag) P.occ[pj * W + ci] = c + 1;\n    }\n    P.cx[c] = fx;\n    P.cy[c] = fy;\n    P.grace[c] -= s;\n    // The distance field gets every half LED; the point list one per LED.\n    P.acc[c] += s;\n    const point = P.acc[c] >= 1;\n    if (point) P.acc[c] -= 1;\n    mark(P, fx, fy, c, point);\n  }\n}\n\nfunction segDist2(x, y, ax, ay, bx, by) {\n  const vx = bx - ax;\n  const vy = by - ay;\n  const l2 = vx * vx + vy * vy;\n  let t = l2 > 0 ? ((x - ax) * vx + (y - ay) * vy) / l2 : 0;\n  t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n  const dx = x - ax - vx * t;\n  const dy = y - ay - vy * t;\n  return dx * dx + dy * dy;\n}\n\n// The mud cracks where the stress is, in the widest clay no crack has\n// reached: of ten places tried, the one furthest from every crack, every\n// tip's path ahead and the frame. The new crack leaves the nearest crack\n// toward it, so at a right angle.\nfunction spawn(P) {\n  for (let c = 0; c \u003c P.nc; c++) {\n    if (!P.alive[c]) continue;\n    let x = P.cx[c];\n    let y = P.cy[c];\n    for (let k = 0; k \u003c 140; k++) {\n      const i = Math.round(x + P.cdx[c]);\n      const j = Math.round(y + P.cdy[c]);\n      if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || blocked(P, c, i, j)) break;\n      x += P.cdx[c];\n      y += P.cdy[c];\n    }\n    P.ex[c] = x;\n    P.ey[c] = y;\n  }\n  let best = -1;\n  let bx = 0;\n  let by = 0;\n  for (let s = 0; s \u003c 10; s++) {\n    const x = Math.random() * (W - 1);\n    const y = Math.random() * (H - 1);\n    // The frame counts as a crack two LEDs out: the mud goes on past the panel.\n    const e = Math.min(x + 2.5, W + 1.5 - x, y + 2.5, H + 1.5 - y);\n    let d2 = e * e;\n    for (let p = 0; p \u003c P.np; p++) {\n      const ddx = P.px[p] - x;\n      const ddy = P.py[p] - y;\n      const v = ddx * ddx + ddy * ddy;\n      if (v \u003c d2) d2 = v;\n    }\n    for (let c = 0; c \u003c P.nc; c++) {\n      if (!P.alive[c]) continue;\n      const v = segDist2(x, y, P.cx[c], P.cy[c], P.ex[c], P.ey[c]);\n      if (v \u003c d2) d2 = v;\n    }\n    if (d2 > best) {\n      best = d2;\n      bx = x;\n      by = y;\n    }\n  }\n  if (best \u003c P.lmin * P.lmin) return;\n  const gen0 = P.nuclei \u003c P.wantNuclei;\n  if (gen0) {\n    // A crack that starts in open clay runs both ways from where it started.\n    P.nuclei++;\n    const a = Math.random() * Math.PI;\n    const hx = Math.cos(a);\n    const hy = Math.sin(a);\n    const c1 = startCrack(P, bx, by, hx, hy, 0, -1);\n    if (c1 \u003c 0) return;\n    const c2 = startCrack(P, bx, by, -hx, -hy, 0, c1);\n    if (c2 >= 0) P.par[c1] = c2;\n    return;\n  }\n  // The nearest crack point, or the frame if that is nearer.\n  let src = -1;\n  let sd = NONE;\n  for (let p = 0; p \u003c P.np; p++) {\n    const ddx = P.px[p] - bx;\n    const ddy = P.py[p] - by;\n    const v = ddx * ddx + ddy * ddy;\n    if (v \u003c sd) {\n      sd = v;\n      src = p;\n    }\n  }\n  const el = bx + 2.5;\n  const er = W + 1.5 - bx;\n  const et = by + 2.5;\n  const e = Math.min(el, er, et, H + 1.5 - by);\n  const jit = (Math.random() - 0.5) * 0.24;\n  let sx, sy, hx, hy;\n  let gen = 1;\n  let parent = -1;\n  if (src \u003c 0 || e * e \u003c sd) {\n    // A crack that started beyond the frame comes in square to it.\n    if (e === el) [sx, sy, hx, hy] = [0, by, 1, jit];\n    else if (e === er) [sx, sy, hx, hy] = [W - 1, by, -1, jit];\n    else if (e === et) [sx, sy, hx, hy] = [bx, 0, jit, 1];\n    else [sx, sy, hx, hy] = [bx, H - 1, jit, -1];\n    if (P.occ[Math.round(sy) * W + Math.round(sx)]) return;\n  } else {\n    sx = P.px[src];\n    sy = P.py[src];\n    parent = P.pid[src];\n    gen = P.cgen[parent] + 1;\n    const vx = bx - sx;\n    const vy = by - sy;\n    const cj = Math.cos(jit);\n    const sj = Math.sin(jit);\n    hx = vx * cj - vy * sj;\n    hy = vx * sj + vy * cj;\n  }\n  startCrack(P, sx, sy, hx, hy, gen, parent);\n}\n\nfunction startRain(P) {\n  if (P.rain >= 0) return;\n  P.rain = 0;\n  P.wiped = false;\n}\n\n// One pass over the clay. A crack opens as a hairline and widens toward its\n// generation's width, so a tip is always thinner than the crack behind it.\n// Clay along a crack dries fast, having a second face to the air; a thin\n// film dries faster than a thick layer, and a curled rim dries from below too.\nfunction soak(P, ddt) {\n  const close = P.close;\n  const wsc = (1 - 0.5 * P.fine) * (0.8 + 0.1 * P.sun) * close;\n  const young = 0.45 * close;\n  const clock = P.clock;\n  const dries = P.rain \u003c 0;\n  const thin = ddt * (0.7 + 0.8 * P.fine);\n  const edge = 0.2 + (1.1 + 0.6 * P.curl) * P.curl;\n  const m = P.m;\n  for (let q = 0; q \u003c N; q++) {\n    let rate = 0.15;\n    if (P.key[q] \u003c NONE) {\n      const wmax = WMAX[P.cgen[P.cid[q]]] * wsc;\n      const w = young + (wmax - young) * AGE[ageIndex(clock - P.born[q])];\n      P.wid[q] = w;\n      const lip = P.dist[q] - w / 2;\n      rate += edge * (lip \u003c= 0 ? 1 : DRYLIP[Math.min(LIPN - 1, (lip * 32) | 0)]);\n    }\n    if (dries) {\n      const v = m[q] - thin * rate * P.rate[q];\n      m[q] = v > 0 ? v : 0;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.clay = Math.max(0, Math.min(1, k[0]));\n  P.sun = Math.max(0.3, Math.min(3, k[1]));\n  P.fine = Math.max(0, Math.min(1, k[2]));\n  P.curl = Math.max(0, Math.min(1, k[3]));\n  // The widest clay left uncracked. It shrinks a little in the dry spell, so\n  // the biggest chips still split now and then.\n  P.lmin = (8 - 5 * P.fine) * (1 - 0.22 * smooth(9, 22, P.clock));\n  P.wantNuclei = 3 + Math.round(2 * P.fine);\n  if (input.btnPressed && input.btnPressed[0]) startRain(P);\n  // The clock everything dries by: Sun 2 runs it at real time.\n  const ddt = (dt * P.sun) / 2;\n  // Clouds mirrored in wet clay drift at three LEDs a second.\n  P.skyX += dt * 3;\n  // Cloud shadows cross the flat on the wind at eight LEDs a second. They\n  // gather over the last eight dry seconds before a shower and clear after it.\n  P.cloudX += dt * 8;\n  const gather = P.rain >= 0 ? 1 : smooth(RAIN_AT - 8, RAIN_AT, P.clock);\n  P.gather += (gather - P.gather) * Math.min(1, dt * (P.rain >= 0 ? 4 : 0.5));\n\n  const m = P.m;\n  if (P.rain >= 0) {\n    P.rain += dt;\n    const r = P.rain;\n    const env = smooth(0, 0.8, r) * (1 - smooth(3.0, RAIN_LEN, r));\n    P.light = Math.max(DIM, P.light - dt * 0.2);\n    P.fill = smooth(0.2, 1.4, r);\n    P.close = 1 - smooth(1.0, 3.4, r);\n    P.dropAcc += dt * 150 * env;\n    while (P.dropAcc >= 1) {\n      P.dropAcc -= 1;\n      const x = Math.random() * W;\n      const y = Math.random() * H;\n      P.dx[P.di] = x;\n      P.dy[P.di] = y;\n      P.dage[P.di] = 0;\n      P.di = (P.di + 1) % MAXD;\n      // Each drop darkens a spot three LEDs across, the way the first drops\n      // of a shower spot dry dirt.\n      for (let j = Math.floor(y - 1.5); j \u003c= y + 1.5; j++)\n        for (let i = Math.floor(x - 1.5); i \u003c= x + 1.5; i++)\n          if (i >= 0 && i \u003c W && j >= 0 && j \u003c H && (i - x) * (i - x) + (j - y) * (j - y) \u003c 2.3) m[j * W + i] = 1;\n    }\n    for (let q = 0; q \u003c N; q++) m[q] = Math.min(1, m[q] + dt * 0.3 * env);\n    if (r >= WIPE && !P.wiped) {\n      P.wiped = true;\n      wipe(P);\n    }\n    if (r >= RAIN_LEN) {\n      P.rain = -1;\n      // The water soaks away before the clay starts to crack again.\n      P.clock = -2.5;\n      P.close = 1;\n      P.fill = 0;\n    }\n  } else {\n    P.light = Math.min(1, P.light + dt * 0.3);\n    P.clock += ddt;\n    // A thin film cracks sooner than a thick layer.\n    if (P.clock > ONSET - 0.4 * P.fine) {\n      for (let c = 0; c \u003c P.nc; c++) if (P.alive[c]) grow(P, c, SPEED[P.cgen[c]] * ddt);\n      let active = 0;\n      for (let c = 0; c \u003c P.nc; c++) active += P.alive[c];\n      P.spawnT += ddt;\n      const most = 5 + Math.round(5 * P.fine);\n      while (P.spawnT > 0.1) {\n        P.spawnT -= 0.1;\n        if (active \u003c most || P.nuclei \u003c P.wantNuclei) {\n          const before = P.nc;\n          spawn(P);\n          active += P.nc - before;\n        }\n      }\n    }\n    if (P.clock > RAIN_AT) startRain(P);\n  }\n  soak(P, ddt);\n  for (let i = 0; i \u003c MAXD; i++) P.dage[i] += dt;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const f = P.clay * (CLAYS.length - 1);\n  const ci = Math.min(CLAYS.length - 2, Math.floor(f));\n  const u = f - ci;\n  const A = CLAYS[ci];\n  const B = CLAYS[ci + 1];\n  const [dr, dg, db, wr, wg, wb] = A.map((v, i) => v + (B[i] - v) * u);\n  // A hot sun bleaches the dry clay a little; an overcast one leaves it dull.\n  const light = P.light * (0.86 + 0.07 * P.sun);\n  // Curl needs sun: under the shower's cloud the chips lie in flat light.\n  const curl = (0.42 + 0.58 * P.curl) * ((P.light - DIM) / (1 - DIM)) * (0.7 + 0.15 * P.sun);\n  const fill = P.fill;\n  const clock = P.clock;\n  const sky = P.sky;\n  const sxo = Math.floor(P.skyX);\n  const cxo = P.cloudX * 0.24;\n  const cth = 0.56 - 0.38 * P.gather;\n  // A cloud's shadow takes as much light as the shower's overcast, and\n  // melts into it when the shower comes.\n  const deep = (1 - DIM) * ((P.light - DIM) / (1 - DIM));\n  const rgb = P.rgb;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const wet = P.m[q];\n      const dry = DRYC[(wet * 256) | 0];\n      // The cloud shadow: the sky tile at four times the size, sampled\n      // smoothly so its edge slides rather than steps.\n      const cu = (x * 0.22 - y * 0.09 + 64 + cxo) % 128;\n      const cv = x * 0.09 + y * 0.22 + 37;\n      const c0 = Math.floor(cu);\n      const v0 = Math.floor(cv);\n      const fu = cu - c0;\n      const fv = cv - v0;\n      const r0 = (v0 & 127) * 128;\n      const r1 = ((v0 + 1) & 127) * 128;\n      const a0 = sky[r0 + c0] + (sky[r0 + ((c0 + 1) & 127)] - sky[r0 + c0]) * fu;\n      const a1 = sky[r1 + c0] + (sky[r1 + ((c0 + 1) & 127)] - sky[r1 + c0]) * fu;\n      let shadow = (a0 + (a1 - a0) * fv - cth) * 6;\n      shadow = shadow \u003c 0 ? 0 : shadow > 1 ? 1 : shadow * shadow * (3 - 2 * shadow);\n      const t = P.tone[q] * light * (1 - deep * shadow);\n      const sun = 1 - 0.75 * shadow;\n      let r = (wr + (dr - wr) * dry) * t;\n      let g = (wg + (dg - wg) * dry) * t;\n      let b = (wb + (db - wb) * dry) * t;\n      // Wet clay mirrors the sky faintly.\n      let sk = (sky[(y & 127) * 128 + ((x + sxo) & 127)] - 0.38) * 2.9;\n      sk = sk \u003c 0 ? 0 : sk > 1 ? 1 : sk;\n      let sh = wet > 0.7 ? (wet - 0.7) / 0.3 : 0;\n      sh = sh * sh * (0.03 + 0.12 * sk);\n      if (sh > 0) {\n        r += (214 - r) * sh;\n        g += (212 - g) * sh;\n        b += (206 - b) * sh;\n      }\n      if (P.key[q] \u003c NONE) {\n        const d = P.dist[q];\n        const w = P.wid[q];\n        const half = w / 2;\n        let gx = 0;\n        let gy = 0;\n        if (d > 0.05) {\n          gx = (x - P.nx[q]) / d;\n          gy = (y - P.ny[q]) / d;\n        }\n        // Positive where this LED's chip lies toward the sun from its crack.\n        const facing = gx * SX + gy * SY;\n        const lip = d - half;\n        if (lip > 0) {\n          // A drying chip curls into a dish: the rim away from the sun tilts\n          // toward it, and the rim on the sun side turns away and lies in\n          // the shadow of the lip across the crack.\n          const li = Math.min(LIPN - 1, (lip * 32) | 0);\n          const cs = curl * sun * smooth(0, 0.6, 1 - wet);\n          let lift = 1 + cs * DISH[li] * (0.06 + 0.4 * facing) + cs * 0.14 * EDGE[li];\n          if (facing \u003c 0) {\n            const reach = cs * 2.4 * -facing;\n            if (lip \u003c reach) lift *= 1 - 0.45 * smooth(0, 0.8, reach - lip);\n          }\n          r *= lift;\n          g *= lift;\n          b *= lift;\n        }\n        const a = half + 0.5 - d;\n        if (a > 0) {\n          const cover = a > 1 ? 1 : a;\n          const depth = DEEP[ageIndex(clock - P.born[q])];\n          // The wall that faces the sun is lit; the other lies in the shadow of its lip.\n          const wall = facing \u003c -0.3 && w > 1.5 && d > 0.6;\n          const shade = wall ? 0.58 - 0.2 * depth : 0.5 - 0.44 * depth;\n          let cr = r * shade;\n          let cg = g * shade;\n          let cb = b * shade;\n          if (fill > 0) {\n            // Rain water in the crack: dark, with the clouds in it.\n            const v = 0.75 + 0.5 * sk;\n            cr += (62 * v - cr) * fill;\n            cg += (66 * v - cg) * fill;\n            cb += (70 * v - cb) * fill;\n          }\n          r += (cr - r) * cover;\n          g += (cg - g) * cover;\n          b += (cb - b) * cover;\n        }\n      }\n      rgb[q * 3] = r;\n      rgb[q * 3 + 1] = g;\n      rgb[q * 3 + 2] = b;\n    }\n  }\n  // Raindrops: a bright point where one lands, then a ring that spreads and fades.\n  for (let i = 0; i \u003c MAXD; i++) {\n    const age = P.dage[i];\n    if (age > 0.3) continue;\n    const x = P.dx[i];\n    const y = P.dy[i];\n    const rad = 0.3 + age * 7;\n    const amp = (1 - age / 0.3) * (age \u003c 0.05 ? 0.9 : 0.45);\n    const e = Math.ceil(rad + 1);\n    for (let j = Math.round(y) - e; j \u003c= y + e; j++)\n      for (let ii = Math.round(x) - e; ii \u003c= x + e; ii++) {\n        if (ii \u003c 0 || ii >= W || j \u003c 0 || j >= H) continue;\n        const ring = (1 - Math.abs(Math.hypot(ii - x, j - y) - rad) / 0.8) * amp;\n        if (ring \u003c= 0) continue;\n        const q = (j * W + ii) * 3;\n        rgb[q] += (214 - rgb[q]) * ring;\n        rgb[q + 1] += (220 - rgb[q + 1]) * ring;\n        rgb[q + 2] += (226 - rgb[q + 2]) * ring;\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[q], rgb[q + 1], rgb[q + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Clay=0..1, Sun=0.3..3, Cracks=0..1, Curl=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Clay","min":0,"max":1,"about":"What the mud is made of, starting from yellow ochre loess, then red laterite, grey river silt and at the top pale playa clay."},{"name":"Sun","min":0.3,"max":3,"about":"How hot the sun is: at 2 the first crack opens within half a second and the shower comes after 24 seconds; turned down the clay stays dark and wet for minutes, turned up it bakes paler and the cracks open wider."},{"name":"Cracks","min":0,"max":1,"about":"How finely the mud splits: at 0 a thick layer breaks into slabs about sixteen LEDs across with wide deep cracks, at 1 a thin film dries twice as fast and crazes into chips about six across."},{"name":"Curl","min":0,"max":1,"about":"How far the chips lift at their rims as they dry: low, they lie nearly flat; high, each chip is a dish, lit along the rim away from the sun and dark along the rim toward it, in the shadow of the next chip's lip."}],"start":[0,2,0,0.06],"measures":{"motion":0.0652,"detail":0.0775,"edges":0.2652,"complexity":2.4007,"coverage":0.991,"colour":0.1598,"drift":0.1523},"knobResponse":[0.1914,0.2254,0.1497,0.0607]},{"slug":"dust-motes","title":"Dust Motes","family":"particle","round":19,"note":"어두운 방, 높은 창에서 내려온 햇살 한 줄기 안에서만 먼지가 반짝이며 떠돌고, 커튼이 흔들리면 빛줄기가 좁아졌다 넓어져요. K1 을 누르면 사람이 방을 가로질러 빛줄기에 그림자를 내고, 발치에서 먼지가 빛 속으로 피어올라요.","idea":"A shaft of sunlight slants from a high window across a dark room to the floorboards, and the dust drifting on the slow air shows only where it crosses the shaft, glinting as each mote turns, while the curtain sways and the sun edges round.","buttons":"K1 tap sends someone walking across the room: a dark figure that cuts a shadow out of the shaft as it passes, with dust puffing up from the boards round its feet into the light.","code":"// ===== Patternflow pattern =====\n// Title:   Dust Motes\n// Family:  particle\n// Idea:    A shaft of sunlight slants from a high window across a dark room to the floorboards, and the dust drifting on the slow air shows only where it crosses the shaft, glinting as each mote turns, while the curtain sways and the sun edges round.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after Vilhelm Hammershøi's Dust Motes Dancing in the Sunbeams (1900)\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Dust=1..4, Draft=-1..1\n//\n// Knob 1: Sun. The hour: at 0 a high late-morning sun throws a steep, pale gold shaft; turned up, the sun sinks, the shaft leans further over and turns amber.\n// Knob 2: Speed. How fast the air, the curtain and the sun move: at 2 a mote wanders about a LED a second, the curtain swings every five seconds and the foot of the shaft creeps a few LEDs along the floor in ten.\n// Knob 3: Dust. How much dust hangs in the room, from about 350 motes at 1 to 1300 at 4; the more dust, the brighter the haze of the shaft itself.\n// Knob 4: Draft. Near still air at 0.06; turned either way, a draught carries the dust that way and the curtain swings harder, blown back to open the window wide at -1 and across most of it at 1, so the shaft narrows to a blade.\n// Buttons: K1 tap sends someone walking across the room: a dark figure that cuts a shadow out of the shaft as it passes, with dust puffing up from the boards round its feet into the light.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXM = 1300;\nconst PUFF = 160;\n// The window: its panes, the mullions, and the floor line.\nconst WX0 = 6;\nconst WX1 = 20;\nconst WY0 = 5;\nconst WY1 = 25;\nconst CX = (WX0 + WX1) / 2;\nconst CY = (WY0 + WY1) / 2;\nconst FY = 112;\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction spawn(P, i, x, y) {\n  P.x[i] = x;\n  P.y[i] = y;\n  P.vx[i] = 0;\n  P.vy[i] = 0;\n  // Each mote turns at its own rate; a flat one flashes as it faces the sun.\n  P.ph[i] = Math.random() * Math.PI * 2;\n  P.spin[i] = 1.5 + Math.random() * 4;\n  P.size[i] = 0.35 + Math.random() * 0.65;\n  P.life[i] = -1;\n}\n\nexport function setup(params) {\n  const P = params;\n  const M = MAXM + PUFF;\n  for (const k of [\"x\", \"y\", \"vx\", \"vy\", \"ph\", \"spin\", \"size\", \"life\"]) P[k] = new Float32Array(M);\n  for (let i = 0; i \u003c MAXM; i++) spawn(P, i, Math.random() * W, Math.random() * FY);\n  for (let i = MAXM; i \u003c M; i++) P.life[i] = 0;\n  P.buf = new Float32Array(N * 3);\n  P.t = 0;\n  P.started = false;\n  P.stir = 0;\n  P.walk = -1;\n  P.wx = -20;\n  P.wdir = 1;\n  P.stride = 0;\n}\n\n// The slow air of the room: three broad eddies drifting, as a stream function\n// so the air neither piles up nor empties anywhere.\nfunction air(P, x, y, out) {\n  const t = P.t;\n  const a1 = 0.09 * x + 0.05 * y + 0.21 * t;\n  const a2 = -0.06 * x + 0.08 * y - 0.17 * t + 2;\n  const a3 = 0.13 * x - 0.11 * y + 0.13 * t + 4;\n  // psi = 14 sin(a1) + 12 sin(a2) + 6 sin(a3)\n  const c1 = 14 * Math.cos(a1);\n  const c2 = 12 * Math.cos(a2);\n  const c3 = 6 * Math.cos(a3) * (1 + P.stir * 3);\n  out[0] = (c1 * 0.05 + c2 * 0.08 - c3 * 0.11) * 0.75;\n  out[1] = -(c1 * 0.09 - c2 * 0.06 + c3 * 0.13) * 0.75;\n}\n\n// Someone crossing the room after a K1 tap: whether their body covers the\n// point. A head, shoulders narrowing to the hips, and two striding legs.\nfunction body(P, x, y) {\n  const dx = x - P.wx;\n  if (P.walk \u003c 0 || dx \u003c -6 || dx > 6 || y \u003c FY - 48 || y > FY) return 0;\n  const hy = FY - 44;\n  if (y \u003c hy + 3) return dx * dx + (y - hy) * (y - hy) \u003c 10 ? 1 : 0;\n  if (y \u003c FY - 39) return Math.abs(dx) \u003c 1.4 ? 1 : 0;\n  if (y \u003c FY - 20) return Math.abs(dx) \u003c 4.3 - 0.05 * (y - FY + 39) ? 1 : 0;\n  const sw = 3 * Math.sin(P.stride) * ((y - FY + 20) / 20);\n  return Math.abs(dx - 1.5 - sw) \u003c 1.3 || Math.abs(dx + 1.5 + sw) \u003c 1.3 ? 1 : 0;\n}\n\n// The shaft at a point: 0 outside, about 1 at its heart. Lateral w runs across\n// it, s along it from the window.\nfunction shaft(P, x, y) {\n  const rx = x - CX;\n  const ry = y - CY;\n  const s = rx * P.dx + ry * P.dy;\n  if (s \u003c 0) return 0;\n  const w = rx * P.dy - ry * P.dx;\n  const e = 1.2 + s * 0.035;\n  let v = smooth(P.wL - e, P.wL + e, w) * (1 - smooth(P.wR - e, P.wR + e, w));\n  if (v \u003c= 0) return 0;\n  // The mullion's shadow runs down the middle as a darker line.\n  const m = (w - P.wM) / (0.8 + s * 0.02);\n  v *= 1 - 0.45 * Math.exp(-m * m);\n  // Someone standing in the light throws a shadow down the shaft behind them.\n  if (P.walk >= 0)\n    for (const o of [-3.5, 0, 3.5]) {\n      const xs = P.wx + o;\n      if (x \u003c= xs) continue;\n      if (body(P, xs, y - ((x - xs) * P.dy) / P.dx)) return 0;\n    }\n  return v * smooth(-2, 8, s);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const sun = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  P.dust = clamp(k[2], 1, 4);\n  const want = Math.round(350 * Math.pow(P.dust, 0.95));\n  const draft = clamp(k[3], -1, 1);\n  P.sun = sun;\n  P.want = Math.min(MAXM, want);\n  if (!P.started) {\n    P.started = true;\n    P.t = 4 + 14 * speed;\n  }\n  const step = dt * speed;\n  P.t += step;\n  const t = P.t;\n\n  // The sun: lower in the sky as Sun turns up, and wandering a little as it\n  // goes round, so the foot of the shaft creeps across the floor.\n  const a = 0.26 + 0.26 * sun + 0.06 * Math.sin(t * 0.16) + 0.03 * Math.sin(t * 0.43 + 1);\n  P.dx = Math.sin(a);\n  P.dy = Math.cos(a);\n  // The curtain hangs at the right of the window and swings in the air, more\n  // with a draught; what it covers casts no light.\n  const swing = 0.7 + 0.5 * Math.abs(draft);\n  P.curtain = clamp(4 + swing * (3.2 * Math.sin(t * 1.25) + 1.6 * Math.sin(t * 2.1 + 1)) + 5 * draft, 0, 12);\n  const xr = WX1 - P.curtain;\n  P.wR = (xr - CX) * P.dy - (WY0 - CY) * P.dx;\n  P.wL = (WX0 - CX) * P.dy - (WY1 - CY) * P.dx;\n  P.wM = -0.2 * (WY1 - WY0) * P.dx;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.walk = 0;\n    P.wdir = Math.random() \u003c 0.5 ? -1 : 1;\n  }\n  if (P.walk >= 0) {\n    // Someone walks across the boards at 18 LEDs a second, and every step\n    // kicks dust up from round their feet.\n    P.walk += dt;\n    P.wx = P.wdir > 0 ? -8 + 18 * P.walk : W + 8 - 18 * P.walk;\n    P.stride = P.walk * 8;\n    if (P.wx \u003c -9 || P.wx > W + 9) P.walk = -1;\n    else if (P.wx > 0 && P.wx \u003c W) {\n      let n = Math.round(60 * dt + Math.random() * 0.5);\n      for (let i = MAXM; i \u003c MAXM + PUFF && n > 0; i++) {\n        if (P.life[i] > 0) continue;\n        spawn(P, i, P.wx + (Math.random() - 0.5) * 8, FY - Math.random() * 3);\n        P.vx[i] = P.wdir * Math.random() * 8 + (Math.random() - 0.5) * 6;\n        P.vy[i] = -5 - Math.random() * 12;\n        P.life[i] = 8 + Math.random() * 6;\n        n--;\n      }\n      P.stir = 1;\n    }\n  }\n  P.stir = Math.max(0, P.stir - dt * 0.25);\n\n  const v = [0, 0];\n  const wind = draft * 5;\n  for (let i = 0; i \u003c MAXM + PUFF; i++) {\n    const puff = i >= MAXM;\n    if (puff && P.life[i] \u003c= 0) continue;\n    if (!puff && i >= P.want) continue;\n    air(P, P.x[i], P.y[i], v);\n    // Warm air in the sun rises, and the dust in it with it.\n    const lift = -1.2 * shaft(P, P.x[i], P.y[i]);\n    if (puff) {\n      // A kicked-up mote slows in the air and joins the drift.\n      const drag = Math.exp(-dt * 1.6);\n      P.vx[i] *= drag;\n      P.vy[i] = P.vy[i] * drag + dt * 1.5;\n      P.life[i] -= dt;\n    }\n    // The walker's wake drags the air along behind them.\n    const wake = P.walk >= 0 && P.y[i] > FY - 50 ? P.wdir * 7 * Math.exp(-((P.x[i] - P.wx) ** 2) / 40) : 0;\n    P.x[i] += (v[0] + wind + (Math.random() - 0.5) * 1.5) * step + (P.vx[i] + wake) * dt;\n    P.y[i] += (v[1] + lift + 0.25 + (Math.random() - 0.5) * 1.5) * step + P.vy[i] * dt;\n    P.ph[i] += P.spin[i] * step;\n    if (P.x[i] \u003c -2) P.x[i] += W + 4;\n    else if (P.x[i] > W + 2) P.x[i] -= W + 4;\n    if (P.y[i] \u003c -2) P.y[i] += FY + 2;\n    else if (P.y[i] > FY) {\n      if (puff) P.life[i] = 0;\n      else P.y[i] -= FY + 2;\n    }\n  }\n}\n\nfunction add(buf, x, y, r, g, b) {\n  const x0 = Math.floor(x);\n  const y0 = Math.floor(y);\n  const fx = x - x0;\n  const fy = y - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= FY) continue;\n      const wgt = (i ? fx : 1 - fx) * (j ? fy : 1 - fy);\n      const q = (py * W + px) * 3;\n      buf[q] += r * wgt;\n      buf[q + 1] += g * wgt;\n      buf[q + 2] += b * wgt;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const buf = P.buf;\n  const sun = P.sun;\n  // Sunlight from pale gold to amber, and the shaft's haze a little denser\n  // as the sun gets low.\n  const lc = [255, 228 - 62 * sun, 172 - 100 * sun];\n  const haze = (30 + 26 * P.dust) * (1 + 0.2 * sun);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      let r;\n      let g;\n      let b;\n      if (y >= FY) {\n        // Floorboards, seen low: their joins come closer toward the back.\n        const d = y - FY;\n        const seam = d === 0 || d === 2 || d === 5 || d === 9 || d === 14;\n        const lit = shaft(P, x + 0.5, y + 0.5);\n        const pane = d === 7 ? 0.55 : 1;\n        const base = seam ? 0.35 : 1;\n        r = 26 * base + lit * pane * base * lc[0] * 0.78;\n        g = 16 * base + lit * pane * base * lc[1] * 0.62;\n        b = 10 * base + lit * pane * base * lc[2] * 0.45;\n      } else {\n        // The wall, dark, warmed a little by light bouncing off the floor\n        // under the shaft.\n        const foot = CX + (FY - CY) * (P.dx / P.dy);\n        const bounce = 18 * Math.exp(-((x - foot) ** 2) / 300 - ((FY - y) ** 2) / 500);\n        const fall = 1 - 0.4 * clamp((y - WY1) / 90, 0, 1);\n        const s = shaft(P, x + 0.5, y + 0.5) * haze * fall;\n        r = 13 + bounce + s * lc[0] / 255;\n        g = 11 + bounce * 0.75 + s * lc[1] / 255;\n        b = 15 + bounce * 0.5 + s * lc[2] / 255;\n        if (y === FY - 1) {\n          r = 20;\n          g = 13;\n          b = 9;\n        }\n      }\n      buf[q] = r;\n      buf[q + 1] = g;\n      buf[q + 2] = b;\n    }\n  // The window: bright panes behind a cross of mullions, the curtain over its\n  // right side glowing where the sun comes through the cloth.\n  const cut = WX1 - P.curtain;\n  for (let y = WY0 - 1; y \u003c= WY1; y++)\n    for (let x = WX0 - 1; x \u003c= WX1; x++) {\n      const q = (y * W + x) * 3;\n      const frame = x === WX0 - 1 || x === WX1 || y === WY0 - 1 || y === WY1;\n      const mull = x === Math.floor(CX) || y === Math.floor(CY);\n      let r;\n      let g;\n      let b;\n      if (frame || mull) {\n        r = 44;\n        g = 32;\n        b = 26;\n      } else {\n        const glare = Math.exp(-((x - CX + 3) ** 2 + (y - CY + 4) ** 2) / 40);\n        r = 210 + 45 * glare;\n        g = 222 + 30 * glare - 30 * sun;\n        b = 228 + 20 * glare - 70 * sun;\n      }\n      if (x + 0.5 > cut + 0.6 * Math.sin(y * 0.7 + P.t * 2) && !frame) {\n        const fold = 0.75 + 0.25 * Math.sin(x * 1.9 + Math.sin(y * 0.3));\n        r = 150 * fold;\n        g = (86 - 20 * sun) * fold;\n        b = 46 * fold;\n      }\n      buf[q] = r;\n      buf[q + 1] = g;\n      buf[q + 2] = b;\n    }\n  // The motes: each shows only in the light, brightest near the window, and\n  // flashes as it turns.\n  for (let i = 0; i \u003c MAXM + PUFF; i++) {\n    if (i >= MAXM ? P.life[i] \u003c= 0 : i >= P.want) continue;\n    const x = P.x[i];\n    const y = P.y[i];\n    const s = shaft(P, x, y);\n    if (s \u003c 0.02) continue;\n    const near = 1.4 - 0.7 * clamp((y - WY1) / 80, 0, 1);\n    const turn = Math.cos(P.ph[i]);\n    const glint = 0.45 + 1.6 * Math.pow(turn * turn, 6);\n    const fade = i >= MAXM ? clamp(P.life[i] / 3, 0, 1) : 1;\n    const v = s * near * glint * P.size[i] * fade * 1.3;\n    add(buf, x - 0.5, y - 0.5, lc[0] * v, lc[1] * v, lc[2] * v);\n  }\n  // The walker is a dark shape against the lit haze, with a thin warm rim on\n  // the side the light comes from.\n  if (P.walk >= 0)\n    for (let y = FY - 48; y \u003c= FY; y++)\n      for (let x = Math.max(0, Math.floor(P.wx - 6)); x \u003c= Math.min(W - 1, P.wx + 6); x++) {\n        if (!body(P, x + 0.5, y + 0.5)) continue;\n        const q = (y * W + x) * 3;\n        const rim = body(P, x - 0.5, y - 0.5) ? 0 : 0.35 * shaft(P, x - 0.5, y - 0.5);\n        buf[q] = 5 + lc[0] * rim;\n        buf[q + 1] = 4 + lc[1] * rim;\n        buf[q + 2] = 5 + lc[2] * rim;\n      }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[q]), knee(buf[q + 1]), knee(buf[q + 2]));\n    }\n}\n\n// Where motes pile up the light rolls off instead of clipping flat.\nfunction knee(c) {\n  if (c \u003c 170) return c;\n  return 170 + 85 * (1 - Math.exp(-(c - 170) / 85));\n}\n","layer":{"id":"layer-dust-motes","type":"code","name":"dust-motes","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Dust Motes\n// Family:  particle\n// Idea:    A shaft of sunlight slants from a high window across a dark room to the floorboards, and the dust drifting on the slow air shows only where it crosses the shaft, glinting as each mote turns, while the curtain sways and the sun edges round.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after Vilhelm Hammershøi's Dust Motes Dancing in the Sunbeams (1900)\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Dust=1..4, Draft=-1..1\n//\n// Knob 1: Sun. The hour: at 0 a high late-morning sun throws a steep, pale gold shaft; turned up, the sun sinks, the shaft leans further over and turns amber.\n// Knob 2: Speed. How fast the air, the curtain and the sun move: at 2 a mote wanders about a LED a second, the curtain swings every five seconds and the foot of the shaft creeps a few LEDs along the floor in ten.\n// Knob 3: Dust. How much dust hangs in the room, from about 350 motes at 1 to 1300 at 4; the more dust, the brighter the haze of the shaft itself.\n// Knob 4: Draft. Near still air at 0.06; turned either way, a draught carries the dust that way and the curtain swings harder, blown back to open the window wide at -1 and across most of it at 1, so the shaft narrows to a blade.\n// Buttons: K1 tap sends someone walking across the room: a dark figure that cuts a shadow out of the shaft as it passes, with dust puffing up from the boards round its feet into the light.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXM = 1300;\nconst PUFF = 160;\n// The window: its panes, the mullions, and the floor line.\nconst WX0 = 6;\nconst WX1 = 20;\nconst WY0 = 5;\nconst WY1 = 25;\nconst CX = (WX0 + WX1) / 2;\nconst CY = (WY0 + WY1) / 2;\nconst FY = 112;\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n\nfunction spawn(P, i, x, y) {\n  P.x[i] = x;\n  P.y[i] = y;\n  P.vx[i] = 0;\n  P.vy[i] = 0;\n  // Each mote turns at its own rate; a flat one flashes as it faces the sun.\n  P.ph[i] = Math.random() * Math.PI * 2;\n  P.spin[i] = 1.5 + Math.random() * 4;\n  P.size[i] = 0.35 + Math.random() * 0.65;\n  P.life[i] = -1;\n}\n\nexport function setup(params) {\n  const P = params;\n  const M = MAXM + PUFF;\n  for (const k of [\"x\", \"y\", \"vx\", \"vy\", \"ph\", \"spin\", \"size\", \"life\"]) P[k] = new Float32Array(M);\n  for (let i = 0; i \u003c MAXM; i++) spawn(P, i, Math.random() * W, Math.random() * FY);\n  for (let i = MAXM; i \u003c M; i++) P.life[i] = 0;\n  P.buf = new Float32Array(N * 3);\n  P.t = 0;\n  P.started = false;\n  P.stir = 0;\n  P.walk = -1;\n  P.wx = -20;\n  P.wdir = 1;\n  P.stride = 0;\n}\n\n// The slow air of the room: three broad eddies drifting, as a stream function\n// so the air neither piles up nor empties anywhere.\nfunction air(P, x, y, out) {\n  const t = P.t;\n  const a1 = 0.09 * x + 0.05 * y + 0.21 * t;\n  const a2 = -0.06 * x + 0.08 * y - 0.17 * t + 2;\n  const a3 = 0.13 * x - 0.11 * y + 0.13 * t + 4;\n  // psi = 14 sin(a1) + 12 sin(a2) + 6 sin(a3)\n  const c1 = 14 * Math.cos(a1);\n  const c2 = 12 * Math.cos(a2);\n  const c3 = 6 * Math.cos(a3) * (1 + P.stir * 3);\n  out[0] = (c1 * 0.05 + c2 * 0.08 - c3 * 0.11) * 0.75;\n  out[1] = -(c1 * 0.09 - c2 * 0.06 + c3 * 0.13) * 0.75;\n}\n\n// Someone crossing the room after a K1 tap: whether their body covers the\n// point. A head, shoulders narrowing to the hips, and two striding legs.\nfunction body(P, x, y) {\n  const dx = x - P.wx;\n  if (P.walk \u003c 0 || dx \u003c -6 || dx > 6 || y \u003c FY - 48 || y > FY) return 0;\n  const hy = FY - 44;\n  if (y \u003c hy + 3) return dx * dx + (y - hy) * (y - hy) \u003c 10 ? 1 : 0;\n  if (y \u003c FY - 39) return Math.abs(dx) \u003c 1.4 ? 1 : 0;\n  if (y \u003c FY - 20) return Math.abs(dx) \u003c 4.3 - 0.05 * (y - FY + 39) ? 1 : 0;\n  const sw = 3 * Math.sin(P.stride) * ((y - FY + 20) / 20);\n  return Math.abs(dx - 1.5 - sw) \u003c 1.3 || Math.abs(dx + 1.5 + sw) \u003c 1.3 ? 1 : 0;\n}\n\n// The shaft at a point: 0 outside, about 1 at its heart. Lateral w runs across\n// it, s along it from the window.\nfunction shaft(P, x, y) {\n  const rx = x - CX;\n  const ry = y - CY;\n  const s = rx * P.dx + ry * P.dy;\n  if (s \u003c 0) return 0;\n  const w = rx * P.dy - ry * P.dx;\n  const e = 1.2 + s * 0.035;\n  let v = smooth(P.wL - e, P.wL + e, w) * (1 - smooth(P.wR - e, P.wR + e, w));\n  if (v \u003c= 0) return 0;\n  // The mullion's shadow runs down the middle as a darker line.\n  const m = (w - P.wM) / (0.8 + s * 0.02);\n  v *= 1 - 0.45 * Math.exp(-m * m);\n  // Someone standing in the light throws a shadow down the shaft behind them.\n  if (P.walk >= 0)\n    for (const o of [-3.5, 0, 3.5]) {\n      const xs = P.wx + o;\n      if (x \u003c= xs) continue;\n      if (body(P, xs, y - ((x - xs) * P.dy) / P.dx)) return 0;\n    }\n  return v * smooth(-2, 8, s);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const sun = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  P.dust = clamp(k[2], 1, 4);\n  const want = Math.round(350 * Math.pow(P.dust, 0.95));\n  const draft = clamp(k[3], -1, 1);\n  P.sun = sun;\n  P.want = Math.min(MAXM, want);\n  if (!P.started) {\n    P.started = true;\n    P.t = 4 + 14 * speed;\n  }\n  const step = dt * speed;\n  P.t += step;\n  const t = P.t;\n\n  // The sun: lower in the sky as Sun turns up, and wandering a little as it\n  // goes round, so the foot of the shaft creeps across the floor.\n  const a = 0.26 + 0.26 * sun + 0.06 * Math.sin(t * 0.16) + 0.03 * Math.sin(t * 0.43 + 1);\n  P.dx = Math.sin(a);\n  P.dy = Math.cos(a);\n  // The curtain hangs at the right of the window and swings in the air, more\n  // with a draught; what it covers casts no light.\n  const swing = 0.7 + 0.5 * Math.abs(draft);\n  P.curtain = clamp(4 + swing * (3.2 * Math.sin(t * 1.25) + 1.6 * Math.sin(t * 2.1 + 1)) + 5 * draft, 0, 12);\n  const xr = WX1 - P.curtain;\n  P.wR = (xr - CX) * P.dy - (WY0 - CY) * P.dx;\n  P.wL = (WX0 - CX) * P.dy - (WY1 - CY) * P.dx;\n  P.wM = -0.2 * (WY1 - WY0) * P.dx;\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.walk = 0;\n    P.wdir = Math.random() \u003c 0.5 ? -1 : 1;\n  }\n  if (P.walk >= 0) {\n    // Someone walks across the boards at 18 LEDs a second, and every step\n    // kicks dust up from round their feet.\n    P.walk += dt;\n    P.wx = P.wdir > 0 ? -8 + 18 * P.walk : W + 8 - 18 * P.walk;\n    P.stride = P.walk * 8;\n    if (P.wx \u003c -9 || P.wx > W + 9) P.walk = -1;\n    else if (P.wx > 0 && P.wx \u003c W) {\n      let n = Math.round(60 * dt + Math.random() * 0.5);\n      for (let i = MAXM; i \u003c MAXM + PUFF && n > 0; i++) {\n        if (P.life[i] > 0) continue;\n        spawn(P, i, P.wx + (Math.random() - 0.5) * 8, FY - Math.random() * 3);\n        P.vx[i] = P.wdir * Math.random() * 8 + (Math.random() - 0.5) * 6;\n        P.vy[i] = -5 - Math.random() * 12;\n        P.life[i] = 8 + Math.random() * 6;\n        n--;\n      }\n      P.stir = 1;\n    }\n  }\n  P.stir = Math.max(0, P.stir - dt * 0.25);\n\n  const v = [0, 0];\n  const wind = draft * 5;\n  for (let i = 0; i \u003c MAXM + PUFF; i++) {\n    const puff = i >= MAXM;\n    if (puff && P.life[i] \u003c= 0) continue;\n    if (!puff && i >= P.want) continue;\n    air(P, P.x[i], P.y[i], v);\n    // Warm air in the sun rises, and the dust in it with it.\n    const lift = -1.2 * shaft(P, P.x[i], P.y[i]);\n    if (puff) {\n      // A kicked-up mote slows in the air and joins the drift.\n      const drag = Math.exp(-dt * 1.6);\n      P.vx[i] *= drag;\n      P.vy[i] = P.vy[i] * drag + dt * 1.5;\n      P.life[i] -= dt;\n    }\n    // The walker's wake drags the air along behind them.\n    const wake = P.walk >= 0 && P.y[i] > FY - 50 ? P.wdir * 7 * Math.exp(-((P.x[i] - P.wx) ** 2) / 40) : 0;\n    P.x[i] += (v[0] + wind + (Math.random() - 0.5) * 1.5) * step + (P.vx[i] + wake) * dt;\n    P.y[i] += (v[1] + lift + 0.25 + (Math.random() - 0.5) * 1.5) * step + P.vy[i] * dt;\n    P.ph[i] += P.spin[i] * step;\n    if (P.x[i] \u003c -2) P.x[i] += W + 4;\n    else if (P.x[i] > W + 2) P.x[i] -= W + 4;\n    if (P.y[i] \u003c -2) P.y[i] += FY + 2;\n    else if (P.y[i] > FY) {\n      if (puff) P.life[i] = 0;\n      else P.y[i] -= FY + 2;\n    }\n  }\n}\n\nfunction add(buf, x, y, r, g, b) {\n  const x0 = Math.floor(x);\n  const y0 = Math.floor(y);\n  const fx = x - x0;\n  const fy = y - y0;\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= FY) continue;\n      const wgt = (i ? fx : 1 - fx) * (j ? fy : 1 - fy);\n      const q = (py * W + px) * 3;\n      buf[q] += r * wgt;\n      buf[q + 1] += g * wgt;\n      buf[q + 2] += b * wgt;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const buf = P.buf;\n  const sun = P.sun;\n  // Sunlight from pale gold to amber, and the shaft's haze a little denser\n  // as the sun gets low.\n  const lc = [255, 228 - 62 * sun, 172 - 100 * sun];\n  const haze = (30 + 26 * P.dust) * (1 + 0.2 * sun);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      let r;\n      let g;\n      let b;\n      if (y >= FY) {\n        // Floorboards, seen low: their joins come closer toward the back.\n        const d = y - FY;\n        const seam = d === 0 || d === 2 || d === 5 || d === 9 || d === 14;\n        const lit = shaft(P, x + 0.5, y + 0.5);\n        const pane = d === 7 ? 0.55 : 1;\n        const base = seam ? 0.35 : 1;\n        r = 26 * base + lit * pane * base * lc[0] * 0.78;\n        g = 16 * base + lit * pane * base * lc[1] * 0.62;\n        b = 10 * base + lit * pane * base * lc[2] * 0.45;\n      } else {\n        // The wall, dark, warmed a little by light bouncing off the floor\n        // under the shaft.\n        const foot = CX + (FY - CY) * (P.dx / P.dy);\n        const bounce = 18 * Math.exp(-((x - foot) ** 2) / 300 - ((FY - y) ** 2) / 500);\n        const fall = 1 - 0.4 * clamp((y - WY1) / 90, 0, 1);\n        const s = shaft(P, x + 0.5, y + 0.5) * haze * fall;\n        r = 13 + bounce + s * lc[0] / 255;\n        g = 11 + bounce * 0.75 + s * lc[1] / 255;\n        b = 15 + bounce * 0.5 + s * lc[2] / 255;\n        if (y === FY - 1) {\n          r = 20;\n          g = 13;\n          b = 9;\n        }\n      }\n      buf[q] = r;\n      buf[q + 1] = g;\n      buf[q + 2] = b;\n    }\n  // The window: bright panes behind a cross of mullions, the curtain over its\n  // right side glowing where the sun comes through the cloth.\n  const cut = WX1 - P.curtain;\n  for (let y = WY0 - 1; y \u003c= WY1; y++)\n    for (let x = WX0 - 1; x \u003c= WX1; x++) {\n      const q = (y * W + x) * 3;\n      const frame = x === WX0 - 1 || x === WX1 || y === WY0 - 1 || y === WY1;\n      const mull = x === Math.floor(CX) || y === Math.floor(CY);\n      let r;\n      let g;\n      let b;\n      if (frame || mull) {\n        r = 44;\n        g = 32;\n        b = 26;\n      } else {\n        const glare = Math.exp(-((x - CX + 3) ** 2 + (y - CY + 4) ** 2) / 40);\n        r = 210 + 45 * glare;\n        g = 222 + 30 * glare - 30 * sun;\n        b = 228 + 20 * glare - 70 * sun;\n      }\n      if (x + 0.5 > cut + 0.6 * Math.sin(y * 0.7 + P.t * 2) && !frame) {\n        const fold = 0.75 + 0.25 * Math.sin(x * 1.9 + Math.sin(y * 0.3));\n        r = 150 * fold;\n        g = (86 - 20 * sun) * fold;\n        b = 46 * fold;\n      }\n      buf[q] = r;\n      buf[q + 1] = g;\n      buf[q + 2] = b;\n    }\n  // The motes: each shows only in the light, brightest near the window, and\n  // flashes as it turns.\n  for (let i = 0; i \u003c MAXM + PUFF; i++) {\n    if (i >= MAXM ? P.life[i] \u003c= 0 : i >= P.want) continue;\n    const x = P.x[i];\n    const y = P.y[i];\n    const s = shaft(P, x, y);\n    if (s \u003c 0.02) continue;\n    const near = 1.4 - 0.7 * clamp((y - WY1) / 80, 0, 1);\n    const turn = Math.cos(P.ph[i]);\n    const glint = 0.45 + 1.6 * Math.pow(turn * turn, 6);\n    const fade = i >= MAXM ? clamp(P.life[i] / 3, 0, 1) : 1;\n    const v = s * near * glint * P.size[i] * fade * 1.3;\n    add(buf, x - 0.5, y - 0.5, lc[0] * v, lc[1] * v, lc[2] * v);\n  }\n  // The walker is a dark shape against the lit haze, with a thin warm rim on\n  // the side the light comes from.\n  if (P.walk >= 0)\n    for (let y = FY - 48; y \u003c= FY; y++)\n      for (let x = Math.max(0, Math.floor(P.wx - 6)); x \u003c= Math.min(W - 1, P.wx + 6); x++) {\n        if (!body(P, x + 0.5, y + 0.5)) continue;\n        const q = (y * W + x) * 3;\n        const rim = body(P, x - 0.5, y - 0.5) ? 0 : 0.35 * shaft(P, x - 0.5, y - 0.5);\n        buf[q] = 5 + lc[0] * rim;\n        buf[q + 1] = 4 + lc[1] * rim;\n        buf[q + 2] = 5 + lc[2] * rim;\n      }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[q]), knee(buf[q + 1]), knee(buf[q + 2]));\n    }\n}\n\n// Where motes pile up the light rolls off instead of clipping flat.\nfunction knee(c) {\n  if (c \u003c 170) return c;\n  return 170 + 85 * (1 - Math.exp(-(c - 170) / 85));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sun=0..1, Speed=0.2..3, Dust=1..4, Draft=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sun","min":0,"max":1,"about":"The hour: at 0 a high late-morning sun throws a steep, pale gold shaft; turned up, the sun sinks, the shaft leans further over and turns amber."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the air, the curtain and the sun move: at 2 a mote wanders about a LED a second, the curtain swings every five seconds and the foot of the shaft creeps a few LEDs along the floor in ten."},{"name":"Dust","min":1,"max":4,"about":"How much dust hangs in the room, from about 350 motes at 1 to 1300 at 4; the more dust, the brighter the haze of the shaft itself."},{"name":"Draft","min":-1,"max":1,"about":"Near still air at 0.06; turned either way, a draught carries the dust that way and the curtain swings harder, blown back to open the window wide at -1 and across most of it at 1, so the shaft narrows to a blade."}],"start":[0,2,1,0.06],"measures":{"motion":0.0301,"detail":0.0213,"edges":0.2348,"complexity":0.703,"coverage":0.3211,"colour":0.0688,"drift":0.0337},"knobResponse":[0.0562,0.0401,0.0354,0.0362]},{"slug":"elephant-toothpaste","title":"Elephant Toothpaste","family":"chemistry","round":23,"note":"보라색 장갑을 낀 손이 실험대 위 눈금실린더에 아이오딘화 칼륨을 부으면, 유리 안쪽에 그어 둔 식용 색소 줄무늬를 두른 거품 기둥이 입구에서 솟아 패널 꼭대기까지 올라요. 기둥은 한쪽으로 꺾여 실린더 옆을 타고 흘러내려 김 나는 더미로 쌓이고, 더미가 굳어 바래면 손이 닦아 내고 새 실린더를 내려놓아요.","idea":"A gloved hand tips potassium iodide into a tall graduated cylinder of peroxide and dish soap striped inside with food colouring, and the fat column of striped foam that shoots out of its mouth climbs to the top of the panel before it folds over and slumps steaming into a heap on the lab bench.","buttons":"K1 tap pours the catalyst now, or once the foam has finished, wipes the bench and sets down a fresh cylinder.","code":"// ===== Patternflow pattern =====\n// Title:   Elephant Toothpaste\n// Family:  chemistry\n// Idea:    A gloved hand tips potassium iodide into a tall graduated cylinder of peroxide and dish soap striped inside with food colouring, and the fat column of striped foam that shoots out of its mouth climbs to the top of the panel before it folds over and slumps steaming into a heap on the lab bench.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the elephant toothpaste demonstration of the school chemistry lab\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dye=0..1, Speed=0.2..3, Stripes=1..4, Strength=0..1\n//\n// Knob 1: Dye. The food colours striped down the glass, all turned round the colour wheel together. Blue and yellow at 0 become orange and blue at 0.5 and come back round at 1.\n// Knob 2: Speed. How fast the demonstration runs: at 2 the foam leaves the mouth a second after the catalyst goes in and a round from fresh cylinder to wiped bench takes 18.6 s; at 0.2 it all runs ten times slower.\n// Knob 3: Stripes. How many dye colours run down the glass and so through the foam: one blue against white foam at 1, up to four colours at 4.\n// Knob 4: Strength. How much stronger than the lab-grade 30% peroxide the bottle is: at 0 the column takes half a second to reach the top and stands about 25 LEDs wide, at 1 it gets there in a sixth of a second at 37 wide and leaves a taller heap.\n// Buttons: K1 tap pours the catalyst now, or once the foam has finished, wipes the bench and sets down a fresh cylinder.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The cylinder's mouth and the bench top, in rows, and the liquid's depth below the mouth.\nconst MY = 52;\nconst BENCH = 114;\nconst LIQ = 28;\n// The round at Speed 2, in seconds from the moment a fresh cylinder comes down.\nconst T_DOWN = 0.9;\nconst T_OUT = 1.4;\nconst T_IN = 2.2;\nconst T_POUR = 2.45;\nconst T_DRY = 3.05;\nconst T_BACK = 3.5;\nconst T_FROTH = 2.7;\nconst T_ERUPT = 3.4;\nconst T_STOP = 8.4;\nconst T_FOLD = 10;\nconst T_SLUMP = 12;\nconst T_WIPE = 16;\nconst T_LIFT = 17.6;\nconst T_END = 18.6;\n// The study opens with the hand on its way in with the beaker.\nconst OPEN = 1.6;\nconst { min, max, floor, ceil, round, sin, cos, exp, sqrt, abs, asin, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ss = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// The dye hues before the Dye knob turns them: blue, yellow, pink, green.\nconst HUES = [0.62, 0.15, 0.93, 0.38];\nconst WHITE = [255, 250, 240];\n// The light comes from the upper left and a little in front.\nconst LX = -0.48;\nconst LY = -0.56;\nconst LZ = 0.67;\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * (v - v * s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const S = { bub: F(N), stn: F(N), bg: F(N * 3), R: F(N), G: F(N), B: F(N) };\n  Object.assign(S, { q: F(N), nx: F(N), ny: F(N), u: F(N), s: F(N), tx: F(N), hs: F(W), len: [], c: OPEN, t: 0 });\n  // Bubbles: a few cells about 4 LEDs across with darker walls, and finer\n  // grain over them, on a tile that wraps both ways to slide with the foam.\n  const px = [];\n  const py = [];\n  for (let k = 0; k \u003c 512; k++) {\n    px.push((k & 15) * 4 + 4 * hash(k * 2));\n    py.push((k >> 4) * 4 + 4 * hash(k * 2 + 1));\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let f1 = 99;\n      let f2 = 99;\n      let best = 0;\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++) {\n          const k = (((y >> 2) + j + 32) % 32) * 16 + (((x >> 2) + i + 16) % 16);\n          let dx = abs(x + 0.5 - px[k]);\n          let dy = abs(y + 0.5 - py[k]);\n          dx = min(dx, 64 - dx);\n          dy = min(dy, 128 - dy);\n          const d = sqrt(dx * dx + dy * dy);\n          if (d \u003c f1) {\n            f2 = f1;\n            f1 = d;\n            best = k;\n          } else if (d \u003c f2) f2 = d;\n        }\n      S.bub[y * W + x] = 0.74 + 0.2 * min(1, (f2 - f1) / 1.3) + 0.08 * hash(best + 777) + 0.1 * hash(y * W + x + 5000);\n      // Steam: a smooth field that also wraps.\n      const a = (2 * PI * x) / 64;\n      const b = (2 * PI * y) / 128;\n      const v = sin(a + 2 * b + 1.3) + 0.7 * sin(-2 * a + 3 * b + 4.1) + 0.5 * sin(3 * a + 5 * b + 2.2) + 0.35 * sin(5 * a - 7 * b + 5.7);\n      S.stn[y * W + x] = 0.5 + v / 5.1;\n    }\n  // The dark lab: a tiled wall the panel barely shows over a bench whose\n  // black top is lit along its front edge, with a wooden cupboard under it.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r;\n      let g;\n      let b;\n      if (y \u003c BENCH) {\n        const v = (x % 8 === 0 || y % 8 === 7 ? 6 : 11 + 3 * hash(((y >> 3) \u003c\u003c 3) + (x >> 3))) * (0.7 + 0.4 * exp(-(((x - 32) / 30) ** 2)) * (y / BENCH));\n        r = v * 0.8;\n        g = v * 0.95;\n        b = v * 1.3;\n      } else if (y \u003c BENCH + 3) {\n        const v = y === BENCH + 2 ? 2.1 : 1 + 0.08 * (y - BENCH);\n        r = 40 * v;\n        g = 43 * v;\n        b = 48 * v;\n      } else {\n        const door = x === 31 || x === 32 || y === 126 || y === 127;\n        const knob = (x === 28 || x === 35) && y > 119 && y \u003c 122;\n        const v = door ? 0.5 : knob ? 2.4 : 1 - 0.02 * (y - 117);\n        r = 44 * v;\n        g = 31 * v;\n        b = 21 * v;\n      }\n      S.bg[(y * W + x) * 3] = r;\n      S.bg[(y * W + x) * 3 + 1] = g;\n      S.bg[(y * W + x) * 3 + 2] = b;\n    }\n  params.S = S;\n  fresh(S);\n}\n\n// A fresh cylinder brings new drips of dye and a new heap. The side the\n// column will fall to is picked here too.\nfunction fresh(S) {\n  const rnd = Math.random;\n  for (let k = 0; k \u003c 10; k++) S.len[k] = LIQ + 2 - floor(rnd() * 13);\n  S.side = rnd() \u003c 0.5 ? -1 : 1;\n  S.ph = [rnd() * 6.3, rnd() * 6.3, rnd() * 6.3];\n  for (let x = 0; x \u003c W; x++) {\n    const d = (x - 32) / 27;\n    const h = exp(-d * d * 1.6) * (0.78 + 0.1 * sin(x * 0.45 + S.ph[0]) + 0.07 * sin(x * 1.1 + S.ph[1]));\n    S.hs[x] = max(0, h + 0.22 * exp(-(((x - 22.5) / 5) ** 2)) + 0.22 * exp(-(((x - 41.5) / 5) ** 2)));\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.S) setup(params);\n  const S = params.S;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  S.dye = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3) / 2;\n  S.n = cl(round(k[2]), 1, 4);\n  S.st = cl(k[3], 0, 1);\n  S.bands = 2 * S.n + 2;\n  S.pal = HUES.map((h) => hsv((h + S.dye) % 1, 0.88, 1));\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (S.c \u003c T_IN) S.c = T_IN;\n    else if (S.c >= T_SLUMP && S.c \u003c T_WIPE) S.c = T_WIPE;\n  }\n  S.c += dt * rate;\n  S.t += dt * rate;\n  if (S.c >= T_END) {\n    S.c -= T_END;\n    fresh(S);\n  }\n}\n\n// One LED of foam, its bubbles lit by the lamp on the rounded surface and\n// coloured by the dye band it falls in. b is the band coordinate, s how far\n// the foam has moved.\nfunction foam(S, i, nx, ny, nz, b, s, tx, dim, a, sat) {\n  const tex = S.bub[((s | 0) & 127) * 64 + ((tx | 0) & 63)];\n  const lit = max(0, LX * nx + LY * ny + LZ * nz);\n  const sh = (0.16 + 1.1 * lit + 0.25 * lit ** 8) * tex * dim;\n  b += 0.3 * (tex - 0.88);\n  const m = cl((cos(2 * PI * b) - 0.05) * 2.5, 0, 1) * sat;\n  const n = S.n;\n  const c = S.pal[(((floor(b + 0.5) % n) + n) % n)];\n  const o = 1 - a;\n  S.R[i] = S.R[i] * o + (WHITE[0] + (c[0] - WHITE[0]) * m) * sh * a;\n  S.G[i] = S.G[i] * o + (WHITE[1] + (c[1] - WHITE[1]) * m) * sh * a;\n  S.B[i] = S.B[i] * o + (WHITE[2] + (c[2] - WHITE[2]) * m) * sh * a;\n}\n\n// A disc of a foam tube. Where discs overlap, the LED keeps the one it sits\n// deepest in, so a row of them makes a soft round-ended tube.\nfunction stamp(S, cx, cy, tx, ty, w, s0, asp = 1) {\n  const { q, nx, ny, u, s } = S;\n  const iw = 1 / w;\n  const y1 = min(H - 1, ceil(cy + w / asp));\n  const x1 = min(W - 1, ceil(cx + w));\n  for (let y = max(0, floor(cy - w / asp)); y \u003c= y1; y++) {\n    const dy = (y - cy) * iw * asp;\n    for (let x = max(0, floor(cx - w)); x \u003c= x1; x++) {\n      const dx = (x - cx) * iw;\n      const d = dx * dx + dy * dy;\n      const i = y * W + x;\n      if (d \u003c 1 && d \u003c q[i]) {\n        q[i] = d;\n        nx[i] = dx;\n        ny[i] = dy;\n        u[i] = -dx * ty + dy * tx;\n        s[i] = s0 - (dx * tx + dy * ty) * w * 0.8;\n        S.tx[i] = u[i] * w;\n      }\n    }\n  }\n}\n\nfunction cylinder(S, oy, top, M, dim, xs) {\n  const { R, G, B, pal, n, len } = S;\n  for (let ly = -1; ly \u003c 62; ly++) {\n    const y = MY + ly + oy;\n    if (y \u003c 0 || y >= H) continue;\n    for (let x = 16; x \u003c= 48; x++) {\n      const i = y * W + x;\n      let r = -1;\n      let g = 0;\n      let b = 0;\n      if (ly \u003c= 0) {\n        if ((ly === 0 && x >= 23 && x \u003c= 41) || (ly \u003c 0 && x >= 21 && x \u003c= 24)) [r, g, b] = [120, 136, 150];\n      } else if (ly \u003c 55) {\n        if (x === 24 || x === 40) {\n          const v = x === 24 ? 1 : 0.7;\n          [r, g, b] = [58 * v, 74 * v, 90 * v];\n        } else if (x > 24 && x \u003c 40) {\n          if (ly >= top) {\n            // Foam that has filled the glass, seen through it.\n            const u = (x - 32) / 7.6;\n            foam(S, i, u, 0, sqrt(1 - u * u), (asin(u) / (2 * PI)) * S.bands + 0.022 * (M + ly), M + ly, x, 0.72 * dim, 1, 1);\n            [r, g, b] = [R[i], G[i], B[i]];\n          } else if (ly >= LIQ) {\n            const v = ly === LIQ ? 2.4 : 1 - (ly - LIQ) * 0.012;\n            [r, g, b] = [25 * v, 38 * v, 46 * v];\n            // The dye that has run down into the liquid spreads in it.\n            for (let k = 0; k \u003c S.bands; k++) {\n              if (len[k] \u003c LIQ) continue;\n              const sp = 0.8 + (ly - LIQ) * 0.18;\n              const e = 0.4 * exp(-(((x - xs[k]) / sp) ** 2) - (ly - LIQ) / 10);\n              const c = pal[k % n];\n              r += c[0] * e;\n              g += c[1] * e;\n              b += c[2] * e;\n            }\n          } else [r, g, b] = [15, 20, 26];\n          if (ly \u003c top && ly >= 2)\n            for (let k = 0; k \u003c S.bands; k++) {\n              if (ly > len[k] || abs(x - xs[k]) > (ly >= len[k] - 1 ? 1.1 : 0.7)) continue;\n              const c = pal[k % n];\n              const v = xs.front[k] ? 0.85 : 0.35;\n              [r, g, b] = [c[0] * v, c[1] * v, c[2] * v];\n            }\n          // The graduations, and a glint down the near side of the glass.\n          const tick = ly >= 6 && ly \u003c= 50 && ly % 4 === 2 && x >= (ly % 16 === 2 ? 26 : 27) && x \u003c= (ly % 16 === 2 ? 31 : 29);\n          const glint = x === 26 ? 22 : 0;\n          r += (tick ? 60 : 0) + glint;\n          g += (tick ? 62 : 0) + glint;\n          b += (tick ? 64 : 0) + glint;\n        }\n      } else if (ly \u003c 57) {\n        if (x >= 24 && x \u003c= 40) [r, g, b] = [70, 86, 100];\n      } else if (abs(x - 32) \u003c= 11 + (ly - 57) * 1.1) {\n        const v = ly === 57 ? 1.5 : 1 - (ly - 58) * 0.08;\n        [r, g, b] = [34 * v, 54 * v, 82 * v];\n      }\n      if (r >= 0) {\n        R[i] = r;\n        G[i] = g;\n        B[i] = b;\n      }\n    }\n  }\n}\n\nconst GLOVE = [116, 82, 230];\n// A gloved hand in its lab-coat sleeve. Kind 1 holds the catalyst beaker and\n// kind 2 presses a paper towel to the bench. Kind 3 grips the cylinder.\nfunction hand(S, kind, hx, hy, a, pour) {\n  const { R, G, B } = S;\n  const ca = cos(a);\n  const sa = sin(a);\n  const wx = hx + ca * 10 - sa * 0.5;\n  const wy = hy + sa * 10 + ca * 0.5;\n  const slope = kind === 2 ? -0.45 : -0.12;\n  // The beaker's liquid stays level as it tips; pour runs 0 to 1 as it empties.\n  const lipx = hx + ca * -5.6 - sa * -6.6;\n  const lipy = hy + sa * -5.6 + ca * -6.6;\n  const surf = hy - 1 + (lipy + 0.5 + pour * 7 - hy + 1) * ss(-0.1, -0.9, a);\n  for (let y = max(0, floor(min(hy, wy) - 14)); y \u003c= min(H - 1, ceil(max(hy, wy) + 14)); y++)\n    for (let x = max(0, floor(hx - 13)); x \u003c W; x++) {\n      const i = y * W + x;\n      const dx = x - hx;\n      const dy = y - hy;\n      const lx = ca * dx + sa * dy;\n      const ly = -sa * dx + ca * dy;\n      let col = null;\n      let v = 1;\n      if (x >= wx - 1) {\n        const t = (y - wy - (x - wx) * slope) / (x \u003c wx + 7 ? 4.3 : 5.8);\n        if (abs(t) \u003c 1) {\n          v = 0.4 + 0.6 * (1 - t * t) - 0.15 * t;\n          col = x \u003c wx + 7 ? GLOVE : x \u003c wx + 8 ? [120, 120, 116] : [175, 175, 168];\n        }\n      }\n      if (kind === 1 && abs(lx) \u003c= 5.6 && abs(ly) \u003c= 6.6) {\n        v = 1;\n        if (ly \u003c -5.6) col = [125, 140, 155];\n        else if (abs(lx) > 4.6 || ly > 5.6) col = [70, 90, 105];\n        else if (y > surf) col = [190, 150, 60];\n        else col = [R[i] * 0.7 + 12, G[i] * 0.7 + 14, B[i] * 0.7 + 16];\n      } else if (kind === 1 && lx >= -7 && lx \u003c -5.6 && ly >= -7.2 && ly \u003c -5.6) col = [125, 140, 155];\n      if (kind === 2) {\n        const e = ((lx + 0.5) / 9.5) ** 2 + ((ly - 1.5) / 3) ** 2;\n        if (e \u003c 1) {\n          col = [190, 194, 190];\n          v = (0.55 + 0.45 * S.bub[(y & 127) * 64 + ((x * 2) & 63)]) * (0.7 + 0.3 * (1 - e));\n        }\n        const p = ((lx - 2.5) / 7.5) ** 2 + ((ly + 2.6) / 3.3) ** 2;\n        if (p \u003c 1) {\n          col = GLOVE;\n          v = 0.5 + 0.5 * sqrt(1 - p) - 0.12 * ly;\n        }\n      } else {\n        const p = ((lx - 6.5) / 4.6) ** 2 + ((ly - 0.4) / 6.2) ** 2;\n        if (p \u003c 1) {\n          col = GLOVE;\n          v = 0.4 + 0.5 * sqrt(1 - p) - 0.04 * ly;\n        }\n        // Four curled fingers across the front, the thumb over the top.\n        for (let j = 0; j \u003c 4; j++) {\n          const fy = ly + 4.4 - j * 2.9;\n          const fx = lx \u003c -0.5 ? lx + 0.5 : lx > 6 ? lx - 6 : 0;\n          const d = fx * fx + fy * fy;\n          if (d \u003c 1.8) {\n            col = GLOVE;\n            v = 0.5 + 0.5 * sqrt(1 - d / 1.8) - 0.03 * ly;\n          }\n        }\n        const tx = cl((lx - 2.5) / 5.5, 0, 1);\n        const d = (lx - 2.5 - 5.5 * tx) ** 2 + (ly + 6.8 - 1.6 * tx) ** 2;\n        if (d \u003c 2.3) {\n          col = GLOVE;\n          v = 0.65 + 0.35 * sqrt(1 - d / 2.3);\n        }\n      }\n      if (col) {\n        R[i] = col[0] * v;\n        G[i] = col[1] * v;\n        B[i] = col[2] * v;\n      }\n    }\n  // The catalyst falling from the lip into the mouth.\n  if (kind === 1 && pour > 0.02 && pour \u003c 0.98)\n    for (let y = max(0, round(lipy)); y \u003c MY + 2; y++) {\n      const x0 = round(lipx - 0.5 + 0.4 * sin(y * 0.9 + S.t * 30));\n      for (let x = x0; x \u003c= x0 + (pour \u003c 0.7 ? 1 : 0); x++) {\n        const i = y * W + x;\n        R[i] = 200;\n        G[i] = 160;\n        B[i] = 70;\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.S;\n  if (!S || !S.pal) return;\n  const { R, G, B, bg, q, nx, ny, u, s, hs } = S;\n  for (let i = 0; i \u003c N; i++) {\n    R[i] = bg[i * 3];\n    G[i] = bg[i * 3 + 1];\n    B[i] = bg[i * 3 + 2];\n  }\n  const c = S.c;\n  const st = S.st;\n  // The cylinder comes down at the start of a round and is lifted off at its end.\n  let oy = 0;\n  if (c \u003c T_DOWN) oy = -140 * (1 - ss(0, T_DOWN, c));\n  else if (c > T_LIFT + 0.35) oy = -140 * ss(T_LIFT + 0.35, T_END, c);\n  oy = round(oy);\n\n  // The column rises fast and keeps pouring out while the peroxide lasts.\n  // Then it folds over to one side and sinks back into the glass.\n  const tau = c - T_ERUPT;\n  const Tr = 1.6 - 0.9 * st;\n  const x01 = cl(tau / Tr, 0, 1);\n  const f = ss(T_STOP, T_FOLD, c);\n  const sl = ss(T_FOLD - 0.8, T_SLUMP, c);\n  const flow = tau > 0 ? (20 + 30 * st) * 3 * (1 - exp(-min(tau, T_STOP - T_ERUPT) / 3)) + 4 * max(0, c - T_STOP) : 0;\n  let L = tau > 0 ? (66 + 40 * st) * (1 - (1 - x01) ** 2) : 0;\n  const M = tau > 0 ? L + flow : (ss(T_FROTH, T_ERUPT, c) - 1) * LIQ;\n  L = tau > 0 ? 2 + (L - 2) * (1 - sl) : 0;\n  // How far the foam inside the glass has risen above the liquid.\n  const top = c \u003c T_FROTH ? 99 : LIQ * (1 - ss(T_FROTH, T_ERUPT, c));\n  // Once it is down, the foam stiffens and dulls.\n  const se = ss(T_SLUMP, T_WIPE, c);\n  const dim = 1 - 0.45 * se;\n\n  // Where the dye streaks sit round the inside of the glass.\n  const xs = [];\n  xs.front = [];\n  for (let k = 0; k \u003c S.bands; k++) {\n    const th = ((k + 0.5) / S.bands) * 2 * PI + 0.3;\n    xs.push(32 + 6.8 * sin(th));\n    xs.front.push(cos(th) > 0);\n  }\n  if (oy > -80) cylinder(S, oy, top, M, dim, xs);\n\n  q.fill(2);\n  if (tau > 0) {\n    const wm = 12.5 + 6 * st;\n    const l0 = 14 + 20 * (1 - f);\n    let px = 32;\n    let py = MY - 3 + oy;\n    for (let l = 0; l \u003c= L + 0.01; l += 1.5) {\n      const a = S.side * 2.8 * f * ss(l0, l0 + 26, l);\n      const w = (8.2 + (wm - 8.2) * (1 - exp(-l / 14))) * (1 + 0.35 * sl);\n      const sway = 1.3 * sin(l * 0.08 - S.t * 1.9) * min(1, l / 25) * (1 - f);\n      stamp(S, px + sway, py, sin(a), -cos(a), w, M - 55 * log(1 + l / 55), 1 + 0.7 * sl);\n      px += 1.5 * sin(a);\n      py -= 1.5 * cos(a);\n    }\n  }\n  // Foam running down the outside of the glass to the bench, first and\n  // fattest on the side the column fell to, swelling as it nears the heap.\n  for (let sd = -1; sd \u003c= 1; sd += 2) {\n    const near = sd === S.side;\n    const dr = ss(T_STOP + (near ? 0.3 : 0.9), T_SLUMP - (near ? 0.8 : 0.2), c);\n    for (let l = 0; dr > 0 && l \u003c= 60 * dr; l += 1.5) {\n      const x = 32 + sd * (8.5 + 3 * ss(0, 12, l) + 1.1 * sin(l * 0.17 + S.ph[0] * sd));\n      const w = (3.6 + 1.3 * sin(l * 0.23 + S.ph[1] + sd) + 3.4 * ss(4, 60, l)) * (near ? 1.15 : 0.95);\n      stamp(S, x, MY - 1 + l + oy, 0, 1, w, 18 * (c - T_STOP) - l);\n    }\n  }\n  const bands = S.bands;\n  for (let i = 0; i \u003c N; i++) {\n    const d = q[i];\n    if (d >= 1) continue;\n    const a = cl((1 - sqrt(d)) * 5, 0, 1);\n    foam(S, i, nx[i], ny[i], sqrt(1 - d), (asin(cl(u[i], -1, 1)) / (2 * PI)) * bands + 0.022 * s[i], s[i], S.tx[i] + 32, dim, a, 1);\n  }\n\n  // The heap on the bench, coiled foam with the dye folded through it, until\n  // the towel sweeps it off from the right.\n  const wx = 72 - 86 * ss(T_WIPE, T_LIFT, c);\n  const A = (30 + 12 * st) * ss(T_STOP + 1, T_SLUMP + 0.5, c) * (1 - 0.18 * se);\n  if (A > 0.3 && c \u003c T_LIFT)\n    for (let x = 0; x \u003c W && x \u003c wx - 7; x++) {\n      const h = A * hs[x];\n      if (h \u003c 0.4) continue;\n      const g = A * (hs[min(W - 1, x + 1)] - hs[max(0, x - 1)]) * 0.5;\n      const ytop = BENCH - h;\n      for (let y = max(0, floor(ytop)); y \u003c BENCH; y++) {\n        const dd = y + 0.5 - ytop;\n        const e = exp(-max(0, dd) / 4);\n        const coil = sin((y + 1.5 * sin(x * 0.3 + S.ph[2])) * 0.95);\n        let hx = -g * e + 0.25 * sin(x * 0.7 + y * 0.4);\n        let hy = -e + 0.4 * coil * (1 - e);\n        let hz = 0.45 + (1 - e);\n        const k = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n        hx *= k;\n        hy *= k;\n        hz *= k;\n        const b = (y + 2.5 * sin(x * 0.19 + S.ph[0]) + 1.5 * sin(x * 0.47 + S.ph[1])) * 0.15 + (x - 32) * 0.03;\n        foam(S, y * W + x, hx, hy, hz, b, y * 2 + 40, x * 2, dim * (0.62 + 0.38 * ss(0, 3, BENCH - 1 - y)), cl(dd + 0.5, 0, 1), 1 - 0.35 * se);\n      }\n    }\n\n  // Steam off the hot heap.\n  const stA = ss(T_STOP + 0.8, T_SLUMP - 1, c) * (1 - ss(T_SLUMP + 0.5, T_WIPE, c));\n  if (stA > 0.01) {\n    const crown = BENCH - A * 0.9;\n    const rise = S.t * 13;\n    for (let y = max(0, floor(crown - 70)); y \u003c BENCH; y++) {\n      const v = crown - y;\n      const env = ss(-8, 4, v) * exp(-max(0, v) / 26) * stA;\n      if (env \u003c 0.01) continue;\n      const row = ((y + rise) | 0) & 127;\n      const sw = 4 * sin(y * 0.09 + S.t);\n      for (let x = 0; x \u003c W; x++) {\n        const n = S.stn[row * 64 + ((x + sw) & 63)];\n        const add = 280 * env * exp(-(((x - 32) / 21) ** 2)) * max(0, n - 0.4);\n        const i = y * W + x;\n        R[i] += add * 0.85;\n        G[i] += add * 0.9;\n        B[i] += add;\n      }\n    }\n  }\n\n  // The hands.\n  if (c \u003c T_OUT) hand(S, 3, 40.5 + 46 * ss(T_DOWN, T_OUT, c), MY + 9 + oy, 0, 0);\n  else if (c \u003c T_BACK) {\n    const back = ss(T_DRY, T_BACK, c);\n    const hx = 41 + 44 * (1 - ss(T_OUT, T_IN, c)) + 46 * back;\n    const a = -1.25 * ss(T_IN, T_POUR, c) * (1 - 0.75 * back);\n    hand(S, 1, hx, 41 - 4 * back, a, ss(T_POUR, T_DRY, c));\n  } else if (c >= T_WIPE && c \u003c T_LIFT) hand(S, 2, wx, BENCH - 4, 0, 0);\n  else if (c >= T_LIFT) hand(S, 3, 40.5 + 44 * (1 - ss(T_LIFT, T_LIFT + 0.35, c)), MY + 9 + oy, 0, 0);\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      display.setPixel(x, y, min(255, R[i]), min(255, G[i]), min(255, B[i]));\n    }\n}\n","layer":{"id":"layer-elephant-toothpaste","type":"code","name":"elephant-toothpaste","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Elephant Toothpaste\n// Family:  chemistry\n// Idea:    A gloved hand tips potassium iodide into a tall graduated cylinder of peroxide and dish soap striped inside with food colouring, and the fat column of striped foam that shoots out of its mouth climbs to the top of the panel before it folds over and slumps steaming into a heap on the lab bench.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the elephant toothpaste demonstration of the school chemistry lab\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dye=0..1, Speed=0.2..3, Stripes=1..4, Strength=0..1\n//\n// Knob 1: Dye. The food colours striped down the glass, all turned round the colour wheel together. Blue and yellow at 0 become orange and blue at 0.5 and come back round at 1.\n// Knob 2: Speed. How fast the demonstration runs: at 2 the foam leaves the mouth a second after the catalyst goes in and a round from fresh cylinder to wiped bench takes 18.6 s; at 0.2 it all runs ten times slower.\n// Knob 3: Stripes. How many dye colours run down the glass and so through the foam: one blue against white foam at 1, up to four colours at 4.\n// Knob 4: Strength. How much stronger than the lab-grade 30% peroxide the bottle is: at 0 the column takes half a second to reach the top and stands about 25 LEDs wide, at 1 it gets there in a sixth of a second at 37 wide and leaves a taller heap.\n// Buttons: K1 tap pours the catalyst now, or once the foam has finished, wipes the bench and sets down a fresh cylinder.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The cylinder's mouth and the bench top, in rows, and the liquid's depth below the mouth.\nconst MY = 52;\nconst BENCH = 114;\nconst LIQ = 28;\n// The round at Speed 2, in seconds from the moment a fresh cylinder comes down.\nconst T_DOWN = 0.9;\nconst T_OUT = 1.4;\nconst T_IN = 2.2;\nconst T_POUR = 2.45;\nconst T_DRY = 3.05;\nconst T_BACK = 3.5;\nconst T_FROTH = 2.7;\nconst T_ERUPT = 3.4;\nconst T_STOP = 8.4;\nconst T_FOLD = 10;\nconst T_SLUMP = 12;\nconst T_WIPE = 16;\nconst T_LIFT = 17.6;\nconst T_END = 18.6;\n// The study opens with the hand on its way in with the beaker.\nconst OPEN = 1.6;\nconst { min, max, floor, ceil, round, sin, cos, exp, sqrt, abs, asin, log, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ss = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// The dye hues before the Dye knob turns them: blue, yellow, pink, green.\nconst HUES = [0.62, 0.15, 0.93, 0.38];\nconst WHITE = [255, 250, 240];\n// The light comes from the upper left and a little in front.\nconst LX = -0.48;\nconst LY = -0.56;\nconst LZ = 0.67;\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * (v - v * s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const S = { bub: F(N), stn: F(N), bg: F(N * 3), R: F(N), G: F(N), B: F(N) };\n  Object.assign(S, { q: F(N), nx: F(N), ny: F(N), u: F(N), s: F(N), tx: F(N), hs: F(W), len: [], c: OPEN, t: 0 });\n  // Bubbles: a few cells about 4 LEDs across with darker walls, and finer\n  // grain over them, on a tile that wraps both ways to slide with the foam.\n  const px = [];\n  const py = [];\n  for (let k = 0; k \u003c 512; k++) {\n    px.push((k & 15) * 4 + 4 * hash(k * 2));\n    py.push((k >> 4) * 4 + 4 * hash(k * 2 + 1));\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let f1 = 99;\n      let f2 = 99;\n      let best = 0;\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++) {\n          const k = (((y >> 2) + j + 32) % 32) * 16 + (((x >> 2) + i + 16) % 16);\n          let dx = abs(x + 0.5 - px[k]);\n          let dy = abs(y + 0.5 - py[k]);\n          dx = min(dx, 64 - dx);\n          dy = min(dy, 128 - dy);\n          const d = sqrt(dx * dx + dy * dy);\n          if (d \u003c f1) {\n            f2 = f1;\n            f1 = d;\n            best = k;\n          } else if (d \u003c f2) f2 = d;\n        }\n      S.bub[y * W + x] = 0.74 + 0.2 * min(1, (f2 - f1) / 1.3) + 0.08 * hash(best + 777) + 0.1 * hash(y * W + x + 5000);\n      // Steam: a smooth field that also wraps.\n      const a = (2 * PI * x) / 64;\n      const b = (2 * PI * y) / 128;\n      const v = sin(a + 2 * b + 1.3) + 0.7 * sin(-2 * a + 3 * b + 4.1) + 0.5 * sin(3 * a + 5 * b + 2.2) + 0.35 * sin(5 * a - 7 * b + 5.7);\n      S.stn[y * W + x] = 0.5 + v / 5.1;\n    }\n  // The dark lab: a tiled wall the panel barely shows over a bench whose\n  // black top is lit along its front edge, with a wooden cupboard under it.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r;\n      let g;\n      let b;\n      if (y \u003c BENCH) {\n        const v = (x % 8 === 0 || y % 8 === 7 ? 6 : 11 + 3 * hash(((y >> 3) \u003c\u003c 3) + (x >> 3))) * (0.7 + 0.4 * exp(-(((x - 32) / 30) ** 2)) * (y / BENCH));\n        r = v * 0.8;\n        g = v * 0.95;\n        b = v * 1.3;\n      } else if (y \u003c BENCH + 3) {\n        const v = y === BENCH + 2 ? 2.1 : 1 + 0.08 * (y - BENCH);\n        r = 40 * v;\n        g = 43 * v;\n        b = 48 * v;\n      } else {\n        const door = x === 31 || x === 32 || y === 126 || y === 127;\n        const knob = (x === 28 || x === 35) && y > 119 && y \u003c 122;\n        const v = door ? 0.5 : knob ? 2.4 : 1 - 0.02 * (y - 117);\n        r = 44 * v;\n        g = 31 * v;\n        b = 21 * v;\n      }\n      S.bg[(y * W + x) * 3] = r;\n      S.bg[(y * W + x) * 3 + 1] = g;\n      S.bg[(y * W + x) * 3 + 2] = b;\n    }\n  params.S = S;\n  fresh(S);\n}\n\n// A fresh cylinder brings new drips of dye and a new heap. The side the\n// column will fall to is picked here too.\nfunction fresh(S) {\n  const rnd = Math.random;\n  for (let k = 0; k \u003c 10; k++) S.len[k] = LIQ + 2 - floor(rnd() * 13);\n  S.side = rnd() \u003c 0.5 ? -1 : 1;\n  S.ph = [rnd() * 6.3, rnd() * 6.3, rnd() * 6.3];\n  for (let x = 0; x \u003c W; x++) {\n    const d = (x - 32) / 27;\n    const h = exp(-d * d * 1.6) * (0.78 + 0.1 * sin(x * 0.45 + S.ph[0]) + 0.07 * sin(x * 1.1 + S.ph[1]));\n    S.hs[x] = max(0, h + 0.22 * exp(-(((x - 22.5) / 5) ** 2)) + 0.22 * exp(-(((x - 41.5) / 5) ** 2)));\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.S) setup(params);\n  const S = params.S;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  S.dye = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3) / 2;\n  S.n = cl(round(k[2]), 1, 4);\n  S.st = cl(k[3], 0, 1);\n  S.bands = 2 * S.n + 2;\n  S.pal = HUES.map((h) => hsv((h + S.dye) % 1, 0.88, 1));\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (S.c \u003c T_IN) S.c = T_IN;\n    else if (S.c >= T_SLUMP && S.c \u003c T_WIPE) S.c = T_WIPE;\n  }\n  S.c += dt * rate;\n  S.t += dt * rate;\n  if (S.c >= T_END) {\n    S.c -= T_END;\n    fresh(S);\n  }\n}\n\n// One LED of foam, its bubbles lit by the lamp on the rounded surface and\n// coloured by the dye band it falls in. b is the band coordinate, s how far\n// the foam has moved.\nfunction foam(S, i, nx, ny, nz, b, s, tx, dim, a, sat) {\n  const tex = S.bub[((s | 0) & 127) * 64 + ((tx | 0) & 63)];\n  const lit = max(0, LX * nx + LY * ny + LZ * nz);\n  const sh = (0.16 + 1.1 * lit + 0.25 * lit ** 8) * tex * dim;\n  b += 0.3 * (tex - 0.88);\n  const m = cl((cos(2 * PI * b) - 0.05) * 2.5, 0, 1) * sat;\n  const n = S.n;\n  const c = S.pal[(((floor(b + 0.5) % n) + n) % n)];\n  const o = 1 - a;\n  S.R[i] = S.R[i] * o + (WHITE[0] + (c[0] - WHITE[0]) * m) * sh * a;\n  S.G[i] = S.G[i] * o + (WHITE[1] + (c[1] - WHITE[1]) * m) * sh * a;\n  S.B[i] = S.B[i] * o + (WHITE[2] + (c[2] - WHITE[2]) * m) * sh * a;\n}\n\n// A disc of a foam tube. Where discs overlap, the LED keeps the one it sits\n// deepest in, so a row of them makes a soft round-ended tube.\nfunction stamp(S, cx, cy, tx, ty, w, s0, asp = 1) {\n  const { q, nx, ny, u, s } = S;\n  const iw = 1 / w;\n  const y1 = min(H - 1, ceil(cy + w / asp));\n  const x1 = min(W - 1, ceil(cx + w));\n  for (let y = max(0, floor(cy - w / asp)); y \u003c= y1; y++) {\n    const dy = (y - cy) * iw * asp;\n    for (let x = max(0, floor(cx - w)); x \u003c= x1; x++) {\n      const dx = (x - cx) * iw;\n      const d = dx * dx + dy * dy;\n      const i = y * W + x;\n      if (d \u003c 1 && d \u003c q[i]) {\n        q[i] = d;\n        nx[i] = dx;\n        ny[i] = dy;\n        u[i] = -dx * ty + dy * tx;\n        s[i] = s0 - (dx * tx + dy * ty) * w * 0.8;\n        S.tx[i] = u[i] * w;\n      }\n    }\n  }\n}\n\nfunction cylinder(S, oy, top, M, dim, xs) {\n  const { R, G, B, pal, n, len } = S;\n  for (let ly = -1; ly \u003c 62; ly++) {\n    const y = MY + ly + oy;\n    if (y \u003c 0 || y >= H) continue;\n    for (let x = 16; x \u003c= 48; x++) {\n      const i = y * W + x;\n      let r = -1;\n      let g = 0;\n      let b = 0;\n      if (ly \u003c= 0) {\n        if ((ly === 0 && x >= 23 && x \u003c= 41) || (ly \u003c 0 && x >= 21 && x \u003c= 24)) [r, g, b] = [120, 136, 150];\n      } else if (ly \u003c 55) {\n        if (x === 24 || x === 40) {\n          const v = x === 24 ? 1 : 0.7;\n          [r, g, b] = [58 * v, 74 * v, 90 * v];\n        } else if (x > 24 && x \u003c 40) {\n          if (ly >= top) {\n            // Foam that has filled the glass, seen through it.\n            const u = (x - 32) / 7.6;\n            foam(S, i, u, 0, sqrt(1 - u * u), (asin(u) / (2 * PI)) * S.bands + 0.022 * (M + ly), M + ly, x, 0.72 * dim, 1, 1);\n            [r, g, b] = [R[i], G[i], B[i]];\n          } else if (ly >= LIQ) {\n            const v = ly === LIQ ? 2.4 : 1 - (ly - LIQ) * 0.012;\n            [r, g, b] = [25 * v, 38 * v, 46 * v];\n            // The dye that has run down into the liquid spreads in it.\n            for (let k = 0; k \u003c S.bands; k++) {\n              if (len[k] \u003c LIQ) continue;\n              const sp = 0.8 + (ly - LIQ) * 0.18;\n              const e = 0.4 * exp(-(((x - xs[k]) / sp) ** 2) - (ly - LIQ) / 10);\n              const c = pal[k % n];\n              r += c[0] * e;\n              g += c[1] * e;\n              b += c[2] * e;\n            }\n          } else [r, g, b] = [15, 20, 26];\n          if (ly \u003c top && ly >= 2)\n            for (let k = 0; k \u003c S.bands; k++) {\n              if (ly > len[k] || abs(x - xs[k]) > (ly >= len[k] - 1 ? 1.1 : 0.7)) continue;\n              const c = pal[k % n];\n              const v = xs.front[k] ? 0.85 : 0.35;\n              [r, g, b] = [c[0] * v, c[1] * v, c[2] * v];\n            }\n          // The graduations, and a glint down the near side of the glass.\n          const tick = ly >= 6 && ly \u003c= 50 && ly % 4 === 2 && x >= (ly % 16 === 2 ? 26 : 27) && x \u003c= (ly % 16 === 2 ? 31 : 29);\n          const glint = x === 26 ? 22 : 0;\n          r += (tick ? 60 : 0) + glint;\n          g += (tick ? 62 : 0) + glint;\n          b += (tick ? 64 : 0) + glint;\n        }\n      } else if (ly \u003c 57) {\n        if (x >= 24 && x \u003c= 40) [r, g, b] = [70, 86, 100];\n      } else if (abs(x - 32) \u003c= 11 + (ly - 57) * 1.1) {\n        const v = ly === 57 ? 1.5 : 1 - (ly - 58) * 0.08;\n        [r, g, b] = [34 * v, 54 * v, 82 * v];\n      }\n      if (r >= 0) {\n        R[i] = r;\n        G[i] = g;\n        B[i] = b;\n      }\n    }\n  }\n}\n\nconst GLOVE = [116, 82, 230];\n// A gloved hand in its lab-coat sleeve. Kind 1 holds the catalyst beaker and\n// kind 2 presses a paper towel to the bench. Kind 3 grips the cylinder.\nfunction hand(S, kind, hx, hy, a, pour) {\n  const { R, G, B } = S;\n  const ca = cos(a);\n  const sa = sin(a);\n  const wx = hx + ca * 10 - sa * 0.5;\n  const wy = hy + sa * 10 + ca * 0.5;\n  const slope = kind === 2 ? -0.45 : -0.12;\n  // The beaker's liquid stays level as it tips; pour runs 0 to 1 as it empties.\n  const lipx = hx + ca * -5.6 - sa * -6.6;\n  const lipy = hy + sa * -5.6 + ca * -6.6;\n  const surf = hy - 1 + (lipy + 0.5 + pour * 7 - hy + 1) * ss(-0.1, -0.9, a);\n  for (let y = max(0, floor(min(hy, wy) - 14)); y \u003c= min(H - 1, ceil(max(hy, wy) + 14)); y++)\n    for (let x = max(0, floor(hx - 13)); x \u003c W; x++) {\n      const i = y * W + x;\n      const dx = x - hx;\n      const dy = y - hy;\n      const lx = ca * dx + sa * dy;\n      const ly = -sa * dx + ca * dy;\n      let col = null;\n      let v = 1;\n      if (x >= wx - 1) {\n        const t = (y - wy - (x - wx) * slope) / (x \u003c wx + 7 ? 4.3 : 5.8);\n        if (abs(t) \u003c 1) {\n          v = 0.4 + 0.6 * (1 - t * t) - 0.15 * t;\n          col = x \u003c wx + 7 ? GLOVE : x \u003c wx + 8 ? [120, 120, 116] : [175, 175, 168];\n        }\n      }\n      if (kind === 1 && abs(lx) \u003c= 5.6 && abs(ly) \u003c= 6.6) {\n        v = 1;\n        if (ly \u003c -5.6) col = [125, 140, 155];\n        else if (abs(lx) > 4.6 || ly > 5.6) col = [70, 90, 105];\n        else if (y > surf) col = [190, 150, 60];\n        else col = [R[i] * 0.7 + 12, G[i] * 0.7 + 14, B[i] * 0.7 + 16];\n      } else if (kind === 1 && lx >= -7 && lx \u003c -5.6 && ly >= -7.2 && ly \u003c -5.6) col = [125, 140, 155];\n      if (kind === 2) {\n        const e = ((lx + 0.5) / 9.5) ** 2 + ((ly - 1.5) / 3) ** 2;\n        if (e \u003c 1) {\n          col = [190, 194, 190];\n          v = (0.55 + 0.45 * S.bub[(y & 127) * 64 + ((x * 2) & 63)]) * (0.7 + 0.3 * (1 - e));\n        }\n        const p = ((lx - 2.5) / 7.5) ** 2 + ((ly + 2.6) / 3.3) ** 2;\n        if (p \u003c 1) {\n          col = GLOVE;\n          v = 0.5 + 0.5 * sqrt(1 - p) - 0.12 * ly;\n        }\n      } else {\n        const p = ((lx - 6.5) / 4.6) ** 2 + ((ly - 0.4) / 6.2) ** 2;\n        if (p \u003c 1) {\n          col = GLOVE;\n          v = 0.4 + 0.5 * sqrt(1 - p) - 0.04 * ly;\n        }\n        // Four curled fingers across the front, the thumb over the top.\n        for (let j = 0; j \u003c 4; j++) {\n          const fy = ly + 4.4 - j * 2.9;\n          const fx = lx \u003c -0.5 ? lx + 0.5 : lx > 6 ? lx - 6 : 0;\n          const d = fx * fx + fy * fy;\n          if (d \u003c 1.8) {\n            col = GLOVE;\n            v = 0.5 + 0.5 * sqrt(1 - d / 1.8) - 0.03 * ly;\n          }\n        }\n        const tx = cl((lx - 2.5) / 5.5, 0, 1);\n        const d = (lx - 2.5 - 5.5 * tx) ** 2 + (ly + 6.8 - 1.6 * tx) ** 2;\n        if (d \u003c 2.3) {\n          col = GLOVE;\n          v = 0.65 + 0.35 * sqrt(1 - d / 2.3);\n        }\n      }\n      if (col) {\n        R[i] = col[0] * v;\n        G[i] = col[1] * v;\n        B[i] = col[2] * v;\n      }\n    }\n  // The catalyst falling from the lip into the mouth.\n  if (kind === 1 && pour > 0.02 && pour \u003c 0.98)\n    for (let y = max(0, round(lipy)); y \u003c MY + 2; y++) {\n      const x0 = round(lipx - 0.5 + 0.4 * sin(y * 0.9 + S.t * 30));\n      for (let x = x0; x \u003c= x0 + (pour \u003c 0.7 ? 1 : 0); x++) {\n        const i = y * W + x;\n        R[i] = 200;\n        G[i] = 160;\n        B[i] = 70;\n      }\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.S;\n  if (!S || !S.pal) return;\n  const { R, G, B, bg, q, nx, ny, u, s, hs } = S;\n  for (let i = 0; i \u003c N; i++) {\n    R[i] = bg[i * 3];\n    G[i] = bg[i * 3 + 1];\n    B[i] = bg[i * 3 + 2];\n  }\n  const c = S.c;\n  const st = S.st;\n  // The cylinder comes down at the start of a round and is lifted off at its end.\n  let oy = 0;\n  if (c \u003c T_DOWN) oy = -140 * (1 - ss(0, T_DOWN, c));\n  else if (c > T_LIFT + 0.35) oy = -140 * ss(T_LIFT + 0.35, T_END, c);\n  oy = round(oy);\n\n  // The column rises fast and keeps pouring out while the peroxide lasts.\n  // Then it folds over to one side and sinks back into the glass.\n  const tau = c - T_ERUPT;\n  const Tr = 1.6 - 0.9 * st;\n  const x01 = cl(tau / Tr, 0, 1);\n  const f = ss(T_STOP, T_FOLD, c);\n  const sl = ss(T_FOLD - 0.8, T_SLUMP, c);\n  const flow = tau > 0 ? (20 + 30 * st) * 3 * (1 - exp(-min(tau, T_STOP - T_ERUPT) / 3)) + 4 * max(0, c - T_STOP) : 0;\n  let L = tau > 0 ? (66 + 40 * st) * (1 - (1 - x01) ** 2) : 0;\n  const M = tau > 0 ? L + flow : (ss(T_FROTH, T_ERUPT, c) - 1) * LIQ;\n  L = tau > 0 ? 2 + (L - 2) * (1 - sl) : 0;\n  // How far the foam inside the glass has risen above the liquid.\n  const top = c \u003c T_FROTH ? 99 : LIQ * (1 - ss(T_FROTH, T_ERUPT, c));\n  // Once it is down, the foam stiffens and dulls.\n  const se = ss(T_SLUMP, T_WIPE, c);\n  const dim = 1 - 0.45 * se;\n\n  // Where the dye streaks sit round the inside of the glass.\n  const xs = [];\n  xs.front = [];\n  for (let k = 0; k \u003c S.bands; k++) {\n    const th = ((k + 0.5) / S.bands) * 2 * PI + 0.3;\n    xs.push(32 + 6.8 * sin(th));\n    xs.front.push(cos(th) > 0);\n  }\n  if (oy > -80) cylinder(S, oy, top, M, dim, xs);\n\n  q.fill(2);\n  if (tau > 0) {\n    const wm = 12.5 + 6 * st;\n    const l0 = 14 + 20 * (1 - f);\n    let px = 32;\n    let py = MY - 3 + oy;\n    for (let l = 0; l \u003c= L + 0.01; l += 1.5) {\n      const a = S.side * 2.8 * f * ss(l0, l0 + 26, l);\n      const w = (8.2 + (wm - 8.2) * (1 - exp(-l / 14))) * (1 + 0.35 * sl);\n      const sway = 1.3 * sin(l * 0.08 - S.t * 1.9) * min(1, l / 25) * (1 - f);\n      stamp(S, px + sway, py, sin(a), -cos(a), w, M - 55 * log(1 + l / 55), 1 + 0.7 * sl);\n      px += 1.5 * sin(a);\n      py -= 1.5 * cos(a);\n    }\n  }\n  // Foam running down the outside of the glass to the bench, first and\n  // fattest on the side the column fell to, swelling as it nears the heap.\n  for (let sd = -1; sd \u003c= 1; sd += 2) {\n    const near = sd === S.side;\n    const dr = ss(T_STOP + (near ? 0.3 : 0.9), T_SLUMP - (near ? 0.8 : 0.2), c);\n    for (let l = 0; dr > 0 && l \u003c= 60 * dr; l += 1.5) {\n      const x = 32 + sd * (8.5 + 3 * ss(0, 12, l) + 1.1 * sin(l * 0.17 + S.ph[0] * sd));\n      const w = (3.6 + 1.3 * sin(l * 0.23 + S.ph[1] + sd) + 3.4 * ss(4, 60, l)) * (near ? 1.15 : 0.95);\n      stamp(S, x, MY - 1 + l + oy, 0, 1, w, 18 * (c - T_STOP) - l);\n    }\n  }\n  const bands = S.bands;\n  for (let i = 0; i \u003c N; i++) {\n    const d = q[i];\n    if (d >= 1) continue;\n    const a = cl((1 - sqrt(d)) * 5, 0, 1);\n    foam(S, i, nx[i], ny[i], sqrt(1 - d), (asin(cl(u[i], -1, 1)) / (2 * PI)) * bands + 0.022 * s[i], s[i], S.tx[i] + 32, dim, a, 1);\n  }\n\n  // The heap on the bench, coiled foam with the dye folded through it, until\n  // the towel sweeps it off from the right.\n  const wx = 72 - 86 * ss(T_WIPE, T_LIFT, c);\n  const A = (30 + 12 * st) * ss(T_STOP + 1, T_SLUMP + 0.5, c) * (1 - 0.18 * se);\n  if (A > 0.3 && c \u003c T_LIFT)\n    for (let x = 0; x \u003c W && x \u003c wx - 7; x++) {\n      const h = A * hs[x];\n      if (h \u003c 0.4) continue;\n      const g = A * (hs[min(W - 1, x + 1)] - hs[max(0, x - 1)]) * 0.5;\n      const ytop = BENCH - h;\n      for (let y = max(0, floor(ytop)); y \u003c BENCH; y++) {\n        const dd = y + 0.5 - ytop;\n        const e = exp(-max(0, dd) / 4);\n        const coil = sin((y + 1.5 * sin(x * 0.3 + S.ph[2])) * 0.95);\n        let hx = -g * e + 0.25 * sin(x * 0.7 + y * 0.4);\n        let hy = -e + 0.4 * coil * (1 - e);\n        let hz = 0.45 + (1 - e);\n        const k = 1 / sqrt(hx * hx + hy * hy + hz * hz);\n        hx *= k;\n        hy *= k;\n        hz *= k;\n        const b = (y + 2.5 * sin(x * 0.19 + S.ph[0]) + 1.5 * sin(x * 0.47 + S.ph[1])) * 0.15 + (x - 32) * 0.03;\n        foam(S, y * W + x, hx, hy, hz, b, y * 2 + 40, x * 2, dim * (0.62 + 0.38 * ss(0, 3, BENCH - 1 - y)), cl(dd + 0.5, 0, 1), 1 - 0.35 * se);\n      }\n    }\n\n  // Steam off the hot heap.\n  const stA = ss(T_STOP + 0.8, T_SLUMP - 1, c) * (1 - ss(T_SLUMP + 0.5, T_WIPE, c));\n  if (stA > 0.01) {\n    const crown = BENCH - A * 0.9;\n    const rise = S.t * 13;\n    for (let y = max(0, floor(crown - 70)); y \u003c BENCH; y++) {\n      const v = crown - y;\n      const env = ss(-8, 4, v) * exp(-max(0, v) / 26) * stA;\n      if (env \u003c 0.01) continue;\n      const row = ((y + rise) | 0) & 127;\n      const sw = 4 * sin(y * 0.09 + S.t);\n      for (let x = 0; x \u003c W; x++) {\n        const n = S.stn[row * 64 + ((x + sw) & 63)];\n        const add = 280 * env * exp(-(((x - 32) / 21) ** 2)) * max(0, n - 0.4);\n        const i = y * W + x;\n        R[i] += add * 0.85;\n        G[i] += add * 0.9;\n        B[i] += add;\n      }\n    }\n  }\n\n  // The hands.\n  if (c \u003c T_OUT) hand(S, 3, 40.5 + 46 * ss(T_DOWN, T_OUT, c), MY + 9 + oy, 0, 0);\n  else if (c \u003c T_BACK) {\n    const back = ss(T_DRY, T_BACK, c);\n    const hx = 41 + 44 * (1 - ss(T_OUT, T_IN, c)) + 46 * back;\n    const a = -1.25 * ss(T_IN, T_POUR, c) * (1 - 0.75 * back);\n    hand(S, 1, hx, 41 - 4 * back, a, ss(T_POUR, T_DRY, c));\n  } else if (c >= T_WIPE && c \u003c T_LIFT) hand(S, 2, wx, BENCH - 4, 0, 0);\n  else if (c >= T_LIFT) hand(S, 3, 40.5 + 44 * (1 - ss(T_LIFT, T_LIFT + 0.35, c)), MY + 9 + oy, 0, 0);\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      display.setPixel(x, y, min(255, R[i]), min(255, G[i]), min(255, B[i]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dye=0..1, Speed=0.2..3, Stripes=1..4, Strength=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dye","min":0,"max":1,"about":"The food colours striped down the glass, all turned round the colour wheel together. Blue and yellow at 0 become orange and blue at 0.5 and come back round at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the demonstration runs: at 2 the foam leaves the mouth a second after the catalyst goes in and a round from fresh cylinder to wiped bench takes 18.6 s; at 0.2 it all runs ten times slower."},{"name":"Stripes","min":1,"max":4,"about":"How many dye colours run down the glass and so through the foam: one blue against white foam at 1, up to four colours at 4."},{"name":"Strength","min":0,"max":1,"about":"How much stronger than the lab-grade 30% peroxide the bottle is: at 0 the column takes half a second to reach the top and stands about 25 LEDs wide, at 1 it gets there in a sixth of a second at 37 wide and leaves a taller heap."}],"start":[0,2,1,0.06],"measures":{"motion":0.1815,"detail":0.029,"edges":0.1765,"complexity":0.9251,"coverage":0.367,"colour":0.1801,"drift":0.102},"knobResponse":[0.0441,0.1137,0.0453,0.0773]},{"slug":"emergence","title":"Emergence","family":"mammal","round":24,"note":"해 질 녘 메마른 언덕의 동굴 입구에서 박쥐 떼가 검은 리본처럼 쏟아져 나와, 노을 하늘을 비틀며 패널 꼭대기까지 기둥으로 올라가요. 기둥은 두 가닥으로 갈라졌다 다시 붙고, 매가 내리꽂히면 박쥐들이 고리처럼 물러났다가 구멍이 닫혀요. K1 을 끝까지 돌리면 밤이 되어 박쥐가 보름달 앞을 지나가요.","idea":"At dusk over dry hill country a dark ribbon of free-tailed bats pours out of a cave mouth and corkscrews up the whole sky, splits in two and joins again, streams off sideways at the top, and ripples open round a hawk that dives through it.","buttons":"K1 tap sends a hawk diving through the column now. On its own the first one comes about four seconds in, then one every fifteen to twenty seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Emergence\n// Family:  mammal\n// Idea:    At dusk over dry hill country a dark ribbon of free-tailed bats pours out of a cave mouth and corkscrews up the whole sky, splits in two and joins again, streams off sideways at the top, and ripples open round a hawk that dives through it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the summer evening emergence of Mexican free-tailed bats (Tadarida brasiliensis) from the caves of the Texas Hill Country\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Bats=400..1400, Wind=-1..1\n//\n// Knob 1: Dusk. How late it is: at 0 the afterglow burns orange behind the far mesa and goes rose, then indigo overhead, and towards 1 it sinks into night, the stars come out and a full moon rises behind the column, so the bats and the hawk cross it as black shapes.\n// Knob 2: Speed. The pace of everything: at 2 a bat climbs from the cave mouth to the top of the panel in about four seconds and beats its wings five times a second, and at 0.2 it all runs ten times slower.\n// Knob 3: Bats. How many bats are out, from a stream of 400 to a river of 1400 that also widens the column. Turned down, the bats already in the air finish their trip and fewer follow them out of the cave.\n// Knob 4: Wind. A crosswind: the column leans downwind and most of the bats peel off that way at the top, and the high cloud streaks drift with it. With no wind about three in four turn right.\n// Buttons: K1 tap sends a hawk diving through the column now. On its own the first one comes about four seconds in, then one every fifteen to twenty seconds.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The cave mouth: its middle column, floor row, half width and height.\nconst [CX, CB, CW, CH] = [27, 121, 9, 9.5];\n// The row where the bats come out, the most bats the knob asks for, the\n// spine's length in rows, and a bat's climb at Speed 2 in LEDs a second.\nconst [CY, MAXB, HM, V0] = [115, 1400, 118, 28];\n// The column's front at the start, and the length of one trip.\nconst [F0, LT] = [90, 150];\n\n// The sky from the top (0) to the horizon (1): afterglow, late dusk, night.\nconst SKIES = [\n  [[0, 30, 26, 98], [0.2, 66, 46, 138], [0.42, 160, 70, 134], [0.62, 236, 104, 100], [0.8, 255, 146, 72], [1, 255, 196, 112]],\n  [[0, 12, 14, 62], [0.3, 30, 30, 100], [0.6, 94, 52, 116], [0.84, 190, 84, 78], [1, 228, 126, 66]],\n  [[0, 5, 9, 32], [0.45, 10, 18, 56], [0.8, 22, 30, 74], [1, 44, 42, 84]],\n];\n// Rock, far hills, scrub and the lit undersides of the clouds at each hour.\nconst LAND = [\n  [92, 64, 54, 116, 72, 96, 34, 36, 24, 255, 178, 150],\n  [56, 40, 46, 64, 44, 80, 24, 26, 22, 140, 66, 96],\n  [28, 28, 40, 30, 30, 60, 14, 18, 22, 18, 20, 38],\n];\n// A bat against the light, and the hawk.\nconst BAT = [14, 10, 12];\n\nfunction ramp(S, g, c) {\n  let j = 0;\n  while (j \u003c S.length - 2 && g > S[j + 1][0]) j++;\n  const a = S[j], b = S[j + 1];\n  return mix(a[c + 1], b[c + 1], cl((g - a[0]) / (b[0] - a[0]), 0, 1));\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = {\n    t: 0, init: false, bg: F(N * 3), f: F(N * 3), D: F(N), key: -1, co: 0, hk: null, ring: null, nh: 3.4,\n    S: F(MAXB), V: F(MAXB), A: F(MAXB), B: F(MAXB), TU: F(MAXB), RH: F(MAXB), DR: F(MAXB), JF: F(MAXB), JP: F(MAXB),\n    FR: F(MAXB), FP: F(MAXB), OX: F(MAXB), OY: F(MAXB), VX: F(MAXB), VY: F(MAXB), BX: F(MAXB), BY: F(MAXB), Z: F(MAXB),\n    SX: F(HM), SR: F(HM), SP: F(HM), SS: F(HM), RID: F(W), FAR: F(W), CT: F(128 * 72),\n  });\n  // The near hill climbs over the cave; a flat mesa stands far off on the right.\n  for (let x = 0; x \u003c W; x++) {\n    P.RID[x] = 99 + 0.07 * x - 10 * exp(-(((x - 23) / 15) ** 2)) + 2 * vn(x * 0.13, 3) + 1.2 * vn(x * 0.4, 9) - 1.6;\n    P.FAR[x] = 90 + 2.5 * vn(x * 0.09, 1) + 1.5 * vn(x * 0.3, 2) - 7 * sm(38, 43, x) * (1 - sm(57, 61, x)) - 2 * exp(-(((x - 8) / 9) ** 2));\n  }\n  // Scrub: juniper and mesquite clumps on the slope and along the skyline.\n  P.bush = [];\n  for (let n = 0; n \u003c 34; n++) {\n    const x = rnd() * W, top = n \u003c 10, r = top ? 1 + rnd() * 1.2 : 0.8 + rnd() * 1.3;\n    const y = top ? P.RID[floor(x)] - r * 0.4 : P.RID[floor(x)] + 2 + rnd() * (H - P.RID[floor(x)] - 2);\n    if (((x - CX) / (CW + 3)) ** 2 + ((CB - y) / (CH + 3)) ** 2 > 1 || y > CB + 2) P.bush.push([x, y, r]);\n  }\n  P.stars = Array.from({ length: 80 }, () => [floor(rnd() * W), floor(rnd() * 86), 0.4 + rnd() * 0.6, rnd() * 7, 1 + rnd() * 3]);\n  // Thin streaks of high cloud, wrapping every 128 columns.\n  for (let y = 0; y \u003c 72; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      const f = (X) => 0.6 * vn(X * 0.035, y * 0.3) + 0.4 * vn(X * 0.11, y * 0.5 + 7);\n      const band = sm(0, 10, y) * (1 - sm(56, 72, y)) * (0.5 + 0.5 * sin(y * 0.21 + 1));\n      P.CT[y * 128 + x] = sm(0.5, 0.75, mix(f(x), f(x + 128), x / 128)) * band;\n    }\n}\n\n// Where a bat turns off the column, how wide it swings and which way.\nfunction route(P, i) {\n  const top = rnd() \u003c 0.16;\n  P.TU[i] = top ? 98 + 14 * rnd() : P.tu + 13 * rnd();\n  P.RH[i] = top ? 30 : 15 + 7 * rnd();\n  P.DR[i] = rnd() \u003c cl(0.72 + 0.6 * P.w, 0.04, 0.96) ? 1 : -1;\n}\n\nfunction place(P, M) {\n  for (let i = 0; i \u003c MAXB; i++) {\n    const a = rnd() * 2 - 1;\n    P.A[i] = (a \u003c 0 ? -1 : 1) * abs(a) ** 0.8;\n    P.B[i] = (rnd() - 0.5) * 1.2;\n    P.V[i] = V0 * (0.8 + 0.4 * rnd());\n    P.JF[i] = 1.4 + rnd() * 2.4;\n    P.JP[i] = rnd() * 7;\n    P.FR[i] = 4 + rnd() * 2.6;\n    P.FP[i] = rnd();\n    route(P, i);\n    P.S[i] = i \u003c M ? F0 - rnd() * LT : -1 - rnd() * LT;\n  }\n  P.init = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2), M = round(cl(k[2], 400, 1400));\n  P.k1 = cl(k[0], 0, 1);\n  P.w = cl(k[3], -1, 1);\n  const T = (P.t += d);\n  // The height where the stream peels off wanders slowly.\n  P.tu = 80 + 8 * sin(T * 0.23 + 1);\n  if (!P.init) place(P, M);\n  const w = P.w, { SX, SR, SP, SS } = P;\n  P.co += d * (1.2 + 4 * w);\n\n  // The spine of the column: it leans downwind, corkscrews and breathes, and\n  // now and then tears in two along its middle and closes again higher up.\n  const Rk = 5 + (5 * (M - 400)) / 1000, ph = (T - 2.4) % 12, split = T \u003c 2.4 ? 0 : sm(0, 1.4, ph) * (1 - sm(4.6, 6.2, ph));\n  for (let h = 0; h \u003c HM; h++) {\n    const A = 1 + 7.5 * sm(4, 92, h);\n    SX[h] = CX + w * (0.17 * h + 0.0009 * h * h) + A * (sin(0.052 * h - 1.3 * T) + 0.4 * sin(0.12 * h + 0.75 * T + 2));\n    SR[h] = Rk * (1.25 - 0.55 * sm(0, 26, h) + 0.3 * sm(20, 50, h)) * (1 + 0.005 * h) * (1 + 0.3 * sin(0.075 * h - 2.1 * T));\n    SP[h] = 0.055 * h - 1.7 * T;\n    SS[h] = h > 18 && h \u003c 96 ? split * 9 * sin((PI * (h - 18)) / 78) : 0;\n  }\n\n  // The hawk: a stoop through the column on a curve, out the other side.\n  if (input.btnPressed && input.btnPressed[0] && !P.hk) P.nh = 0;\n  if (!P.hk && (P.nh -= d) \u003c= 0) {\n    const s = rnd() \u003c 0.5 ? 1 : -1, ht = floor(46 + rnd() * 26), tx = SX[ht], ty = CY - ht, x0 = 32 + s * 46, y0 = -12, x2 = 32 - s * 52, y2 = ty - 34;\n    P.hk = { t: 0, x0, y0, x2, y2, cx: 2 * tx - (x0 + x2) / 2, cy: 2 * ty - (y0 + y2) / 2, hit: false };\n  }\n  const hk = P.hk;\n  if (hk) {\n    const u = (hk.t += d) / 2.3, v = 1 - u;\n    if (u >= 1) (P.hk = null), (P.nh = 12 + rnd() * 6);\n    else {\n      hk.x = v * v * hk.x0 + 2 * u * v * hk.cx + u * u * hk.x2;\n      hk.y = v * v * hk.y0 + 2 * u * v * hk.cy + u * u * hk.y2;\n      const dx = v * (hk.cx - hk.x0) + u * (hk.x2 - hk.cx), dy = v * (hk.cy - hk.y0) + u * (hk.y2 - hk.cy), l = hyp(dx, dy) || 1;\n      (hk.ux = dx / l), (hk.uy = dy / l), (hk.u = u);\n      if (!hk.hit && u >= 0.5) (hk.hit = true), (P.ring = { x: hk.x, y: hk.y, t: 0 });\n    }\n  }\n  const rg = P.ring;\n  if (rg && (rg.t += d) > 1.4) P.ring = null;\n  const hx = P.hk ? P.hk.x : -999, hy = P.hk ? P.hk.y : -999, rr = rg ? 4 + 26 * rg.t : 0, ra = rg ? 1 - rg.t / 1.4 : 0;\n\n  const { S, V, A, B, TU, RH, DR, JF, JP, OX, OY, VX, VY, BX, BY, Z } = P;\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (S[i] \u003c 0 && i >= M) continue;\n    // Fast out of the mouth, then the steady climb.\n    const s = (S[i] += V[i] * d * (S[i] \u003c 40 ? 1.6 - 0.015 * S[i] : 1));\n    if (s \u003c 0) continue;\n    const hh = min(s, TU[i]), j = min(HM - 2, floor(hh)), f = hh - j;\n    const r = mix(SR[j], SR[j + 1], f), p = mix(SP[j], SP[j + 1], f), ca = cos(p), sa = sin(p), a = A[i], b = B[i] * (1.9 - 0.9 * sm(0, 30, hh));\n    let x = mix(SX[j], SX[j + 1], f) + r * (a * ca - b * sa) + (a \u003c 0 ? -1 : 1) * mix(SS[j], SS[j + 1], f) + 1.1 * sin(T * JF[i] + JP[i]);\n    let y = CY - hh + 0.8 * sin(T * JF[i] * 1.3 + JP[i] * 2);\n    Z[i] = a * sa + b * ca;\n    if (s > TU[i]) {\n      // Off the top of the column in a curve, then straight out sideways.\n      const u = s - TU[i], rho = RH[i], al = min(u / rho, 1.25), st = max(0, u - rho * 1.25);\n      x += DR[i] * (rho * (1 - cos(al)) + st * 0.949);\n      y -= rho * sin(al) + st * 0.315;\n    }\n    // Away from the hawk and the ring it sends out, then back into the stream.\n    let ax = -18 * OX[i] - 6 * VX[i], ay = -18 * OY[i] - 6 * VY[i], dx = x + OX[i] - hx, dy = y + OY[i] - hy, q = dx * dx + dy * dy;\n    if (q \u003c 196) {\n      const e = sqrt(q) + 0.3, g = (1700 * (1 - e / 14) ** 2) / e;\n      (ax += g * dx), (ay += g * dy);\n    }\n    if (rg) {\n      (dx = x + OX[i] - rg.x), (dy = y + OY[i] - rg.y);\n      const e = hyp(dx, dy) + 0.5, wv = e - rr;\n      if (wv * wv \u003c 30) {\n        const g = (480 * ra * exp((-wv * wv) / 6)) / e;\n        (ax += g * dx), (ay += g * dy);\n      }\n    }\n    VX[i] += ax * d;\n    VY[i] += ay * d;\n    OX[i] = cl(OX[i] + VX[i] * d, -16, 16);\n    OY[i] = cl(OY[i] + VY[i] * d, -16, 16);\n    x += OX[i];\n    y += OY[i];\n    if (x \u003c -3 || x > W + 2 || y \u003c -3) {\n      // Out of sight: back to the cave mouth for another trip.\n      S[i] = i \u003c M ? -rnd() * 4 : -1 - rnd() * LT;\n      OX[i] = OY[i] = VX[i] = VY[i] = 0;\n      route(P, i);\n      continue;\n    }\n    BX[i] = x;\n    BY[i] = y;\n  }\n}\n\n// The sky, the moon, the hills and the cave, kept until the hour moves.\nfunction backdrop(P, k) {\n  const B = P.bg, i0 = k \u003c 0.5 ? 0 : 1, f = k \u003c 0.5 ? k * 2 : k * 2 - 1;\n  const L = LAND[i0].map((v, c) => mix(v, LAND[i0 + 1][c], f));\n  const glow = 1 - sm(0.2, 0.9, k), mx = 37, my = 134 - 88 * sm(0.12, 1, k), mr = 8.5, mc = [mix(250, 246, sm(100, 60, my)), mix(184, 240, sm(100, 60, my)), mix(124, 220, sm(100, 60, my))];\n  P.cc = L.slice(9, 12);\n  for (let y = 0; y \u003c H; y++) {\n    const g = y / 100, sky = [0, 1, 2].map((c) => mix(ramp(SKIES[i0], g, c), ramp(SKIES[i0 + 1], g, c), f));\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, rid = P.RID[x];\n      let col;\n      if (y \u003c rid) {\n        // Brighter where the sun went down, behind the far mesa.\n        const wg = 1 + 0.2 * glow * exp(-(((x - 50) / 20) ** 2)) * sm(0.3, 1, g);\n        col = sky.map((v) => v * wg);\n        const md = hyp(x + 0.5 - mx, y + 0.5 - my);\n        if (md \u003c mr) {\n          const ma = 0.82 + 0.18 * sm(0.35, 0.65, vn(x * 0.4 + 3, y * 0.4)) - 0.12 * (md / mr) ** 4;\n          col = mc.map((v) => v * ma);\n        } else col = col.map((v, c) => v + mc[c] * sm(0.25, 0.8, k) * (0.22 * exp(-(md - mr) / 4) + 0.1 * exp(-(md - mr) / 14)));\n        if (y >= P.FAR[x]) {\n          const fv = 0.86 + 0.14 * vn(x * 0.3, y * 0.3);\n          col = col.map((v, c) => mix(v, L[3 + c] * fv, 0.8));\n        }\n      } else {\n        // Limestone with darker strata, catching light along the skyline.\n        const n = vn(x * 0.22, y * 0.45), n2 = vn(x * 0.07 + 5, y * 0.16);\n        let v = (0.6 + 0.4 * n + 0.25 * sm(0.55, 0.7, n2)) * (1 + 0.3 * exp(-(y - rid) / 2.5)) * (1 - (0.28 * (y - 92)) / 36);\n        if (((y + 4 * vn(x * 0.05, 7)) % 6) \u003c 1) v *= 0.72;\n        const e = (abs((x + 0.5 - CX) / CW) ** 2.4 + abs((CB - y - 0.5) / CH) ** 2.4) ** (1 / 2.4) * (0.96 + 0.09 * vn(x * 0.7, y * 0.7));\n        // The pale outcrop the cave opens in, cracked, with a ledge on top.\n        const ot = CB - CH - 6 + 2.5 * vn(x * 0.2, 4), ow = 16 + 4 * vn(y * 0.2, 6) - 6 * sm(CB - 3, CB - CH - 6, y);\n        if (y >= ot && y \u003c CB + 1 && abs(x + 0.5 - CX) \u003c ow) {\n          v = (1.05 + 0.3 * n) * (y \u003c ot + 1 ? 1.3 : 1) * (vn(x * 0.9, y * 0.1) \u003c 0.28 ? 0.66 : 1) * (1 - 0.25 * sm(ow - 3, ow, abs(x + 0.5 - CX)));\n          if (e \u003c 1.35) v *= 0.75 + 0.25 * sm(1, 1.35, e);\n        }\n        if (y \u003c CB && e \u003c 1) {\n          // The mouth, black inside and a little lit at the lip.\n          const lip = sm(0.75, 1, e);\n          col = [3 + 12 * lip, 2 + 8 * lip, 3 + 8 * lip];\n        } else {\n          if (y >= CB) v *= (1.1 + 0.25 * hash(x, y)) * (1 - 0.45 * exp(-(((x - CX) / CW) ** 2)) * sm(CB + 5, CB, y));\n          col = L.slice(0, 3).map((c) => c * v);\n        }\n      }\n      (B[o] = col[0]), (B[o + 1] = col[1]), (B[o + 2] = col[2]);\n    }\n  }\n  for (const [bx, by, br] of P.bush)\n    for (let y = floor(by - br); y \u003c= by + br; y++)\n      for (let x = floor(bx - br); x \u003c= bx + br; x++) {\n        const e = hyp(x + 0.5 - bx, (y + 0.5 - by) * 1.2) / br;\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || e > 1) continue;\n        const o = (y * W + x) * 3, v = (0.8 + 0.4 * hash(x, y + 50)) * (y + 0.5 \u003c by - br * 0.3 ? 1.45 : 1);\n        for (let c = 0; c \u003c 3; c++) B[o + c] = L[6 + c] * v;\n      }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  const k = P.k1, key = round(k * 400);\n  if (key !== P.key) backdrop(P, k), (P.key = key);\n  const F = P.f, D = P.D, T = P.t;\n  F.set(P.bg);\n  // Stars come out as the glow goes, behind the cloud streaks.\n  const sk = sm(0.4, 0.95, k);\n  if (sk > 0)\n    for (const [x, y, b, ph, fq] of P.stars) {\n      if (y >= P.FAR[x] - 1) continue;\n      const o = (y * W + x) * 3, v = sk * b * (0.75 + 0.25 * sin(T * fq + ph));\n      (F[o] += 190 * v), (F[o + 1] += 190 * v), (F[o + 2] += 210 * v);\n    }\n  // High cloud drifts with the wind, lit from below by the sun that has set.\n  const cc = P.cc, sh = floor(P.co);\n  for (let y = 0; y \u003c 72; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const a = P.CT[y * 128 + ((x - sh) & 127)];\n      if (a \u003c 0.02 || y >= P.FAR[x]) continue;\n      const o = (y * W + x) * 3, g = 0.55 + y / 110, al = 0.55 * a;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], cc[c] * g, al);\n    }\n\n  // Bats and the hawk as darkness laid over the light.\n  D.fill(0);\n  const put = (x, y, a) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) D[y * W + x] += a;\n  };\n  const M = P.S.length;\n  for (let i = 0; i \u003c M; i++) {\n    if (P.S[i] \u003c 0) continue;\n    const x = round(P.BX[i]), y = round(P.BY[i]), near = P.Z[i] > -0.3, q = floor(((T * P.FR[i] + P.FP[i]) % 1) * 3) - 1;\n    if (near) put(x, y, 0.95), put(x - 1, y + q, 0.8), put(x + 1, y + q, 0.8);\n    else put(x, y, 0.6), put(x + (q ? 1 : -1), y + q, 0.35);\n  }\n  const hk = P.hk;\n  if (hk && hk.x !== undefined) {\n    const { x, y, ux, uy, u } = hk, nx = -uy, ny = ux;\n    const seg = (x0, y0, x1, y1, r) => {\n      const n = 2 * hyp(x1 - x0, y1 - y0) + 1;\n      for (let s = 0; s \u003c= n; s++) {\n        const px = mix(x0, x1, s / n), py = mix(y0, y1, s / n);\n        for (let yy = floor(py - r); yy \u003c= py + r; yy++) for (let xx = floor(px - r); xx \u003c= px + r; xx++) if (hyp(xx + 0.5 - px, yy + 0.5 - py) \u003c= r + 0.25) put(xx, yy, 0.6);\n      }\n    };\n    seg(x + 2.2 * ux, y + 2.2 * uy, x - 3 * ux, y - 3 * uy, 1);\n    seg(x - 3 * ux, y - 3 * uy, x - 4.6 * ux + 0.9 * nx, y - 4.6 * uy + 0.9 * ny, 0.6);\n    seg(x - 3 * ux, y - 3 * uy, x - 4.6 * ux - 0.9 * nx, y - 4.6 * uy - 0.9 * ny, 0.6);\n    if (u > 0.14 && u \u003c 0.5) {\n      // Wings folded back in the stoop.\n      for (const sg of [1, -1]) seg(x + 0.8 * ux + sg * nx, y + 0.8 * uy + sg * ny, x - 4 * ux + sg * 2.4 * nx, y - 4 * uy + sg * 2.4 * ny, 0.6);\n    } else {\n      // Spread and beating as it climbs away.\n      const fl = 1.6 * sin(hk.t * 15);\n      for (const sg of [1, -1]) {\n        const wx = x + sg * 3.2 * nx + 1.1 * ux, wy = y + sg * 3.2 * ny + 1.1 * uy;\n        seg(x + 0.5 * ux, y + 0.5 * uy, wx, wy, 0.9);\n        seg(wx, wy, x + sg * 6.2 * nx - (0.6 + fl) * ux, y + sg * 6.2 * ny - (0.6 + fl) * uy, 0.55);\n      }\n    }\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const a = min(1, D[i]), b = 1 - a;\n    display.setPixel(i & 63, i >> 6, min(255, F[o] * b + BAT[0] * a) | 0, min(255, F[o + 1] * b + BAT[1] * a) | 0, min(255, F[o + 2] * b + BAT[2] * a) | 0);\n  }\n}\n","layer":{"id":"layer-emergence","type":"code","name":"emergence","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Emergence\n// Family:  mammal\n// Idea:    At dusk over dry hill country a dark ribbon of free-tailed bats pours out of a cave mouth and corkscrews up the whole sky, splits in two and joins again, streams off sideways at the top, and ripples open round a hawk that dives through it.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the summer evening emergence of Mexican free-tailed bats (Tadarida brasiliensis) from the caves of the Texas Hill Country\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Bats=400..1400, Wind=-1..1\n//\n// Knob 1: Dusk. How late it is: at 0 the afterglow burns orange behind the far mesa and goes rose, then indigo overhead, and towards 1 it sinks into night, the stars come out and a full moon rises behind the column, so the bats and the hawk cross it as black shapes.\n// Knob 2: Speed. The pace of everything: at 2 a bat climbs from the cave mouth to the top of the panel in about four seconds and beats its wings five times a second, and at 0.2 it all runs ten times slower.\n// Knob 3: Bats. How many bats are out, from a stream of 400 to a river of 1400 that also widens the column. Turned down, the bats already in the air finish their trip and fewer follow them out of the cave.\n// Knob 4: Wind. A crosswind: the column leans downwind and most of the bats peel off that way at the top, and the high cloud streaks drift with it. With no wind about three in four turn right.\n// Buttons: K1 tap sends a hawk diving through the column now. On its own the first one comes about four seconds in, then one every fifteen to twenty seconds.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The cave mouth: its middle column, floor row, half width and height.\nconst [CX, CB, CW, CH] = [27, 121, 9, 9.5];\n// The row where the bats come out, the most bats the knob asks for, the\n// spine's length in rows, and a bat's climb at Speed 2 in LEDs a second.\nconst [CY, MAXB, HM, V0] = [115, 1400, 118, 28];\n// The column's front at the start, and the length of one trip.\nconst [F0, LT] = [90, 150];\n\n// The sky from the top (0) to the horizon (1): afterglow, late dusk, night.\nconst SKIES = [\n  [[0, 30, 26, 98], [0.2, 66, 46, 138], [0.42, 160, 70, 134], [0.62, 236, 104, 100], [0.8, 255, 146, 72], [1, 255, 196, 112]],\n  [[0, 12, 14, 62], [0.3, 30, 30, 100], [0.6, 94, 52, 116], [0.84, 190, 84, 78], [1, 228, 126, 66]],\n  [[0, 5, 9, 32], [0.45, 10, 18, 56], [0.8, 22, 30, 74], [1, 44, 42, 84]],\n];\n// Rock, far hills, scrub and the lit undersides of the clouds at each hour.\nconst LAND = [\n  [92, 64, 54, 116, 72, 96, 34, 36, 24, 255, 178, 150],\n  [56, 40, 46, 64, 44, 80, 24, 26, 22, 140, 66, 96],\n  [28, 28, 40, 30, 30, 60, 14, 18, 22, 18, 20, 38],\n];\n// A bat against the light, and the hawk.\nconst BAT = [14, 10, 12];\n\nfunction ramp(S, g, c) {\n  let j = 0;\n  while (j \u003c S.length - 2 && g > S[j + 1][0]) j++;\n  const a = S[j], b = S[j + 1];\n  return mix(a[c + 1], b[c + 1], cl((g - a[0]) / (b[0] - a[0]), 0, 1));\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = {\n    t: 0, init: false, bg: F(N * 3), f: F(N * 3), D: F(N), key: -1, co: 0, hk: null, ring: null, nh: 3.4,\n    S: F(MAXB), V: F(MAXB), A: F(MAXB), B: F(MAXB), TU: F(MAXB), RH: F(MAXB), DR: F(MAXB), JF: F(MAXB), JP: F(MAXB),\n    FR: F(MAXB), FP: F(MAXB), OX: F(MAXB), OY: F(MAXB), VX: F(MAXB), VY: F(MAXB), BX: F(MAXB), BY: F(MAXB), Z: F(MAXB),\n    SX: F(HM), SR: F(HM), SP: F(HM), SS: F(HM), RID: F(W), FAR: F(W), CT: F(128 * 72),\n  });\n  // The near hill climbs over the cave; a flat mesa stands far off on the right.\n  for (let x = 0; x \u003c W; x++) {\n    P.RID[x] = 99 + 0.07 * x - 10 * exp(-(((x - 23) / 15) ** 2)) + 2 * vn(x * 0.13, 3) + 1.2 * vn(x * 0.4, 9) - 1.6;\n    P.FAR[x] = 90 + 2.5 * vn(x * 0.09, 1) + 1.5 * vn(x * 0.3, 2) - 7 * sm(38, 43, x) * (1 - sm(57, 61, x)) - 2 * exp(-(((x - 8) / 9) ** 2));\n  }\n  // Scrub: juniper and mesquite clumps on the slope and along the skyline.\n  P.bush = [];\n  for (let n = 0; n \u003c 34; n++) {\n    const x = rnd() * W, top = n \u003c 10, r = top ? 1 + rnd() * 1.2 : 0.8 + rnd() * 1.3;\n    const y = top ? P.RID[floor(x)] - r * 0.4 : P.RID[floor(x)] + 2 + rnd() * (H - P.RID[floor(x)] - 2);\n    if (((x - CX) / (CW + 3)) ** 2 + ((CB - y) / (CH + 3)) ** 2 > 1 || y > CB + 2) P.bush.push([x, y, r]);\n  }\n  P.stars = Array.from({ length: 80 }, () => [floor(rnd() * W), floor(rnd() * 86), 0.4 + rnd() * 0.6, rnd() * 7, 1 + rnd() * 3]);\n  // Thin streaks of high cloud, wrapping every 128 columns.\n  for (let y = 0; y \u003c 72; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      const f = (X) => 0.6 * vn(X * 0.035, y * 0.3) + 0.4 * vn(X * 0.11, y * 0.5 + 7);\n      const band = sm(0, 10, y) * (1 - sm(56, 72, y)) * (0.5 + 0.5 * sin(y * 0.21 + 1));\n      P.CT[y * 128 + x] = sm(0.5, 0.75, mix(f(x), f(x + 128), x / 128)) * band;\n    }\n}\n\n// Where a bat turns off the column, how wide it swings and which way.\nfunction route(P, i) {\n  const top = rnd() \u003c 0.16;\n  P.TU[i] = top ? 98 + 14 * rnd() : P.tu + 13 * rnd();\n  P.RH[i] = top ? 30 : 15 + 7 * rnd();\n  P.DR[i] = rnd() \u003c cl(0.72 + 0.6 * P.w, 0.04, 0.96) ? 1 : -1;\n}\n\nfunction place(P, M) {\n  for (let i = 0; i \u003c MAXB; i++) {\n    const a = rnd() * 2 - 1;\n    P.A[i] = (a \u003c 0 ? -1 : 1) * abs(a) ** 0.8;\n    P.B[i] = (rnd() - 0.5) * 1.2;\n    P.V[i] = V0 * (0.8 + 0.4 * rnd());\n    P.JF[i] = 1.4 + rnd() * 2.4;\n    P.JP[i] = rnd() * 7;\n    P.FR[i] = 4 + rnd() * 2.6;\n    P.FP[i] = rnd();\n    route(P, i);\n    P.S[i] = i \u003c M ? F0 - rnd() * LT : -1 - rnd() * LT;\n  }\n  P.init = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2), M = round(cl(k[2], 400, 1400));\n  P.k1 = cl(k[0], 0, 1);\n  P.w = cl(k[3], -1, 1);\n  const T = (P.t += d);\n  // The height where the stream peels off wanders slowly.\n  P.tu = 80 + 8 * sin(T * 0.23 + 1);\n  if (!P.init) place(P, M);\n  const w = P.w, { SX, SR, SP, SS } = P;\n  P.co += d * (1.2 + 4 * w);\n\n  // The spine of the column: it leans downwind, corkscrews and breathes, and\n  // now and then tears in two along its middle and closes again higher up.\n  const Rk = 5 + (5 * (M - 400)) / 1000, ph = (T - 2.4) % 12, split = T \u003c 2.4 ? 0 : sm(0, 1.4, ph) * (1 - sm(4.6, 6.2, ph));\n  for (let h = 0; h \u003c HM; h++) {\n    const A = 1 + 7.5 * sm(4, 92, h);\n    SX[h] = CX + w * (0.17 * h + 0.0009 * h * h) + A * (sin(0.052 * h - 1.3 * T) + 0.4 * sin(0.12 * h + 0.75 * T + 2));\n    SR[h] = Rk * (1.25 - 0.55 * sm(0, 26, h) + 0.3 * sm(20, 50, h)) * (1 + 0.005 * h) * (1 + 0.3 * sin(0.075 * h - 2.1 * T));\n    SP[h] = 0.055 * h - 1.7 * T;\n    SS[h] = h > 18 && h \u003c 96 ? split * 9 * sin((PI * (h - 18)) / 78) : 0;\n  }\n\n  // The hawk: a stoop through the column on a curve, out the other side.\n  if (input.btnPressed && input.btnPressed[0] && !P.hk) P.nh = 0;\n  if (!P.hk && (P.nh -= d) \u003c= 0) {\n    const s = rnd() \u003c 0.5 ? 1 : -1, ht = floor(46 + rnd() * 26), tx = SX[ht], ty = CY - ht, x0 = 32 + s * 46, y0 = -12, x2 = 32 - s * 52, y2 = ty - 34;\n    P.hk = { t: 0, x0, y0, x2, y2, cx: 2 * tx - (x0 + x2) / 2, cy: 2 * ty - (y0 + y2) / 2, hit: false };\n  }\n  const hk = P.hk;\n  if (hk) {\n    const u = (hk.t += d) / 2.3, v = 1 - u;\n    if (u >= 1) (P.hk = null), (P.nh = 12 + rnd() * 6);\n    else {\n      hk.x = v * v * hk.x0 + 2 * u * v * hk.cx + u * u * hk.x2;\n      hk.y = v * v * hk.y0 + 2 * u * v * hk.cy + u * u * hk.y2;\n      const dx = v * (hk.cx - hk.x0) + u * (hk.x2 - hk.cx), dy = v * (hk.cy - hk.y0) + u * (hk.y2 - hk.cy), l = hyp(dx, dy) || 1;\n      (hk.ux = dx / l), (hk.uy = dy / l), (hk.u = u);\n      if (!hk.hit && u >= 0.5) (hk.hit = true), (P.ring = { x: hk.x, y: hk.y, t: 0 });\n    }\n  }\n  const rg = P.ring;\n  if (rg && (rg.t += d) > 1.4) P.ring = null;\n  const hx = P.hk ? P.hk.x : -999, hy = P.hk ? P.hk.y : -999, rr = rg ? 4 + 26 * rg.t : 0, ra = rg ? 1 - rg.t / 1.4 : 0;\n\n  const { S, V, A, B, TU, RH, DR, JF, JP, OX, OY, VX, VY, BX, BY, Z } = P;\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (S[i] \u003c 0 && i >= M) continue;\n    // Fast out of the mouth, then the steady climb.\n    const s = (S[i] += V[i] * d * (S[i] \u003c 40 ? 1.6 - 0.015 * S[i] : 1));\n    if (s \u003c 0) continue;\n    const hh = min(s, TU[i]), j = min(HM - 2, floor(hh)), f = hh - j;\n    const r = mix(SR[j], SR[j + 1], f), p = mix(SP[j], SP[j + 1], f), ca = cos(p), sa = sin(p), a = A[i], b = B[i] * (1.9 - 0.9 * sm(0, 30, hh));\n    let x = mix(SX[j], SX[j + 1], f) + r * (a * ca - b * sa) + (a \u003c 0 ? -1 : 1) * mix(SS[j], SS[j + 1], f) + 1.1 * sin(T * JF[i] + JP[i]);\n    let y = CY - hh + 0.8 * sin(T * JF[i] * 1.3 + JP[i] * 2);\n    Z[i] = a * sa + b * ca;\n    if (s > TU[i]) {\n      // Off the top of the column in a curve, then straight out sideways.\n      const u = s - TU[i], rho = RH[i], al = min(u / rho, 1.25), st = max(0, u - rho * 1.25);\n      x += DR[i] * (rho * (1 - cos(al)) + st * 0.949);\n      y -= rho * sin(al) + st * 0.315;\n    }\n    // Away from the hawk and the ring it sends out, then back into the stream.\n    let ax = -18 * OX[i] - 6 * VX[i], ay = -18 * OY[i] - 6 * VY[i], dx = x + OX[i] - hx, dy = y + OY[i] - hy, q = dx * dx + dy * dy;\n    if (q \u003c 196) {\n      const e = sqrt(q) + 0.3, g = (1700 * (1 - e / 14) ** 2) / e;\n      (ax += g * dx), (ay += g * dy);\n    }\n    if (rg) {\n      (dx = x + OX[i] - rg.x), (dy = y + OY[i] - rg.y);\n      const e = hyp(dx, dy) + 0.5, wv = e - rr;\n      if (wv * wv \u003c 30) {\n        const g = (480 * ra * exp((-wv * wv) / 6)) / e;\n        (ax += g * dx), (ay += g * dy);\n      }\n    }\n    VX[i] += ax * d;\n    VY[i] += ay * d;\n    OX[i] = cl(OX[i] + VX[i] * d, -16, 16);\n    OY[i] = cl(OY[i] + VY[i] * d, -16, 16);\n    x += OX[i];\n    y += OY[i];\n    if (x \u003c -3 || x > W + 2 || y \u003c -3) {\n      // Out of sight: back to the cave mouth for another trip.\n      S[i] = i \u003c M ? -rnd() * 4 : -1 - rnd() * LT;\n      OX[i] = OY[i] = VX[i] = VY[i] = 0;\n      route(P, i);\n      continue;\n    }\n    BX[i] = x;\n    BY[i] = y;\n  }\n}\n\n// The sky, the moon, the hills and the cave, kept until the hour moves.\nfunction backdrop(P, k) {\n  const B = P.bg, i0 = k \u003c 0.5 ? 0 : 1, f = k \u003c 0.5 ? k * 2 : k * 2 - 1;\n  const L = LAND[i0].map((v, c) => mix(v, LAND[i0 + 1][c], f));\n  const glow = 1 - sm(0.2, 0.9, k), mx = 37, my = 134 - 88 * sm(0.12, 1, k), mr = 8.5, mc = [mix(250, 246, sm(100, 60, my)), mix(184, 240, sm(100, 60, my)), mix(124, 220, sm(100, 60, my))];\n  P.cc = L.slice(9, 12);\n  for (let y = 0; y \u003c H; y++) {\n    const g = y / 100, sky = [0, 1, 2].map((c) => mix(ramp(SKIES[i0], g, c), ramp(SKIES[i0 + 1], g, c), f));\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, rid = P.RID[x];\n      let col;\n      if (y \u003c rid) {\n        // Brighter where the sun went down, behind the far mesa.\n        const wg = 1 + 0.2 * glow * exp(-(((x - 50) / 20) ** 2)) * sm(0.3, 1, g);\n        col = sky.map((v) => v * wg);\n        const md = hyp(x + 0.5 - mx, y + 0.5 - my);\n        if (md \u003c mr) {\n          const ma = 0.82 + 0.18 * sm(0.35, 0.65, vn(x * 0.4 + 3, y * 0.4)) - 0.12 * (md / mr) ** 4;\n          col = mc.map((v) => v * ma);\n        } else col = col.map((v, c) => v + mc[c] * sm(0.25, 0.8, k) * (0.22 * exp(-(md - mr) / 4) + 0.1 * exp(-(md - mr) / 14)));\n        if (y >= P.FAR[x]) {\n          const fv = 0.86 + 0.14 * vn(x * 0.3, y * 0.3);\n          col = col.map((v, c) => mix(v, L[3 + c] * fv, 0.8));\n        }\n      } else {\n        // Limestone with darker strata, catching light along the skyline.\n        const n = vn(x * 0.22, y * 0.45), n2 = vn(x * 0.07 + 5, y * 0.16);\n        let v = (0.6 + 0.4 * n + 0.25 * sm(0.55, 0.7, n2)) * (1 + 0.3 * exp(-(y - rid) / 2.5)) * (1 - (0.28 * (y - 92)) / 36);\n        if (((y + 4 * vn(x * 0.05, 7)) % 6) \u003c 1) v *= 0.72;\n        const e = (abs((x + 0.5 - CX) / CW) ** 2.4 + abs((CB - y - 0.5) / CH) ** 2.4) ** (1 / 2.4) * (0.96 + 0.09 * vn(x * 0.7, y * 0.7));\n        // The pale outcrop the cave opens in, cracked, with a ledge on top.\n        const ot = CB - CH - 6 + 2.5 * vn(x * 0.2, 4), ow = 16 + 4 * vn(y * 0.2, 6) - 6 * sm(CB - 3, CB - CH - 6, y);\n        if (y >= ot && y \u003c CB + 1 && abs(x + 0.5 - CX) \u003c ow) {\n          v = (1.05 + 0.3 * n) * (y \u003c ot + 1 ? 1.3 : 1) * (vn(x * 0.9, y * 0.1) \u003c 0.28 ? 0.66 : 1) * (1 - 0.25 * sm(ow - 3, ow, abs(x + 0.5 - CX)));\n          if (e \u003c 1.35) v *= 0.75 + 0.25 * sm(1, 1.35, e);\n        }\n        if (y \u003c CB && e \u003c 1) {\n          // The mouth, black inside and a little lit at the lip.\n          const lip = sm(0.75, 1, e);\n          col = [3 + 12 * lip, 2 + 8 * lip, 3 + 8 * lip];\n        } else {\n          if (y >= CB) v *= (1.1 + 0.25 * hash(x, y)) * (1 - 0.45 * exp(-(((x - CX) / CW) ** 2)) * sm(CB + 5, CB, y));\n          col = L.slice(0, 3).map((c) => c * v);\n        }\n      }\n      (B[o] = col[0]), (B[o + 1] = col[1]), (B[o + 2] = col[2]);\n    }\n  }\n  for (const [bx, by, br] of P.bush)\n    for (let y = floor(by - br); y \u003c= by + br; y++)\n      for (let x = floor(bx - br); x \u003c= bx + br; x++) {\n        const e = hyp(x + 0.5 - bx, (y + 0.5 - by) * 1.2) / br;\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || e > 1) continue;\n        const o = (y * W + x) * 3, v = (0.8 + 0.4 * hash(x, y + 50)) * (y + 0.5 \u003c by - br * 0.3 ? 1.45 : 1);\n        for (let c = 0; c \u003c 3; c++) B[o + c] = L[6 + c] * v;\n      }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.init) return;\n  const k = P.k1, key = round(k * 400);\n  if (key !== P.key) backdrop(P, k), (P.key = key);\n  const F = P.f, D = P.D, T = P.t;\n  F.set(P.bg);\n  // Stars come out as the glow goes, behind the cloud streaks.\n  const sk = sm(0.4, 0.95, k);\n  if (sk > 0)\n    for (const [x, y, b, ph, fq] of P.stars) {\n      if (y >= P.FAR[x] - 1) continue;\n      const o = (y * W + x) * 3, v = sk * b * (0.75 + 0.25 * sin(T * fq + ph));\n      (F[o] += 190 * v), (F[o + 1] += 190 * v), (F[o + 2] += 210 * v);\n    }\n  // High cloud drifts with the wind, lit from below by the sun that has set.\n  const cc = P.cc, sh = floor(P.co);\n  for (let y = 0; y \u003c 72; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const a = P.CT[y * 128 + ((x - sh) & 127)];\n      if (a \u003c 0.02 || y >= P.FAR[x]) continue;\n      const o = (y * W + x) * 3, g = 0.55 + y / 110, al = 0.55 * a;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], cc[c] * g, al);\n    }\n\n  // Bats and the hawk as darkness laid over the light.\n  D.fill(0);\n  const put = (x, y, a) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) D[y * W + x] += a;\n  };\n  const M = P.S.length;\n  for (let i = 0; i \u003c M; i++) {\n    if (P.S[i] \u003c 0) continue;\n    const x = round(P.BX[i]), y = round(P.BY[i]), near = P.Z[i] > -0.3, q = floor(((T * P.FR[i] + P.FP[i]) % 1) * 3) - 1;\n    if (near) put(x, y, 0.95), put(x - 1, y + q, 0.8), put(x + 1, y + q, 0.8);\n    else put(x, y, 0.6), put(x + (q ? 1 : -1), y + q, 0.35);\n  }\n  const hk = P.hk;\n  if (hk && hk.x !== undefined) {\n    const { x, y, ux, uy, u } = hk, nx = -uy, ny = ux;\n    const seg = (x0, y0, x1, y1, r) => {\n      const n = 2 * hyp(x1 - x0, y1 - y0) + 1;\n      for (let s = 0; s \u003c= n; s++) {\n        const px = mix(x0, x1, s / n), py = mix(y0, y1, s / n);\n        for (let yy = floor(py - r); yy \u003c= py + r; yy++) for (let xx = floor(px - r); xx \u003c= px + r; xx++) if (hyp(xx + 0.5 - px, yy + 0.5 - py) \u003c= r + 0.25) put(xx, yy, 0.6);\n      }\n    };\n    seg(x + 2.2 * ux, y + 2.2 * uy, x - 3 * ux, y - 3 * uy, 1);\n    seg(x - 3 * ux, y - 3 * uy, x - 4.6 * ux + 0.9 * nx, y - 4.6 * uy + 0.9 * ny, 0.6);\n    seg(x - 3 * ux, y - 3 * uy, x - 4.6 * ux - 0.9 * nx, y - 4.6 * uy - 0.9 * ny, 0.6);\n    if (u > 0.14 && u \u003c 0.5) {\n      // Wings folded back in the stoop.\n      for (const sg of [1, -1]) seg(x + 0.8 * ux + sg * nx, y + 0.8 * uy + sg * ny, x - 4 * ux + sg * 2.4 * nx, y - 4 * uy + sg * 2.4 * ny, 0.6);\n    } else {\n      // Spread and beating as it climbs away.\n      const fl = 1.6 * sin(hk.t * 15);\n      for (const sg of [1, -1]) {\n        const wx = x + sg * 3.2 * nx + 1.1 * ux, wy = y + sg * 3.2 * ny + 1.1 * uy;\n        seg(x + 0.5 * ux, y + 0.5 * uy, wx, wy, 0.9);\n        seg(wx, wy, x + sg * 6.2 * nx - (0.6 + fl) * ux, y + sg * 6.2 * ny - (0.6 + fl) * uy, 0.55);\n      }\n    }\n  }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const a = min(1, D[i]), b = 1 - a;\n    display.setPixel(i & 63, i >> 6, min(255, F[o] * b + BAT[0] * a) | 0, min(255, F[o + 1] * b + BAT[1] * a) | 0, min(255, F[o + 2] * b + BAT[2] * a) | 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dusk=0..1, Speed=0.2..3, Bats=400..1400, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dusk","min":0,"max":1,"about":"How late it is: at 0 the afterglow burns orange behind the far mesa and goes rose, then indigo overhead, and towards 1 it sinks into night, the stars come out and a full moon rises behind the column, so the bats and the hawk cross it as black shapes."},{"name":"Speed","min":0.2,"max":3,"about":"The pace of everything: at 2 a bat climbs from the cave mouth to the top of the panel in about four seconds and beats its wings five times a second, and at 0.2 it all runs ten times slower."},{"name":"Bats","min":400,"max":1400,"about":"How many bats are out, from a stream of 400 to a river of 1400 that also widens the column. Turned down, the bats already in the air finish their trip and fewer follow them out of the cave."},{"name":"Wind","min":-1,"max":1,"about":"A crosswind: the column leans downwind and most of the bats peel off that way at the top, and the high cloud streaks drift with it. With no wind about three in four turn right."}],"start":[0,2,400,0.06],"measures":{"motion":1.359,"detail":0.0665,"edges":0.4877,"complexity":1.5604,"coverage":0.9427,"colour":0.3555,"drift":0.0712},"knobResponse":[0.2525,0.0481,0.0669,0.0629]},{"slug":"euclid-pulse","title":"Euclid Pulse","family":"rhythm","round":1,"note":"유클리드 리듬 셋이 고리 셋에서 함께 돌아요. 바깥 두 고리의 박은 고리 밖 제 조각을 따라 빛으로 퍼져서 세운 패널의 위아래 끝까지 닿아요. 처음은 E(3,8) 이에요.","idea":"Spread a few beats as evenly as they will go over a ring of steps and a good many of the world's drum patterns fall out, so the panel plays three of them at once.","buttons":"K3 tap turns the outer rhythm one step later.","code":"// ===== Patternflow pattern =====\n// Title:   Euclid Pulse\n// Family:  rhythm\n// Idea:    Spread a few beats as evenly as they will go over a ring of steps and a good many of the world's drum patterns fall out, so the panel plays three of them at once.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=80..180, Pulses=3..13, Steps=8..16\n//\n// Knob 1: Hue. Turns the three rings around the colour wheel together.\n// Knob 2: Tempo. Beats per minute; the hand goes round once every four beats.\n// Knob 3: Pulses. Hits on the outer ring; the middle ring takes about half as many.\n// Knob 4: Steps. Steps on the outer ring; the middle ring has three for every four of them. Each outer step owns a slice of the panel and a hit fires a beam down it, so more steps make narrower beams.\n// Buttons: K3 tap turns the outer rhythm one step later.\n\nconst W = 64;\nconst H = 128;\nconst CX = 31.5;\nconst CY = 63.5;\nconst MAX_STEPS = 32;\nconst RIPPLES = 24;\n\n// Ring bands in LEDs from the centre: outer, middle, inner. The outer ring\n// stops three LEDs short of the panel's sides so a ripple can be seen leaving it.\nconst R_IN = [23, 15.5, 8.5];\nconst R_OUT = [28.5, 20, 12];\n// Beams start just outside the outer ring. The far corners are 71 LEDs out.\nconst BEAM_FROM = R_OUT[0] + 1.5;\n// A hit rings out as four arcs, one every 0.09 s, each a little dimmer,\n// running out at 64 LEDs a second: five or six LEDs apart.\nconst ARCS = 4;\nconst ARC_GAP = 0.09;\nconst ARC_SPEED = 64;\nconst BEND = 0.75;\n// The outer ring's beams and the middle ring's, which are a little dimmer so\n// the outer rhythm leads.\nconst FLASH = [0.4, 0.3];\nconst GLOW = [0.34, 0.24];\nconst ARC_POWER = [1, 0.7];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// k hits over n steps, as evenly as they go. This is the same necklace\n// Bjorklund's algorithm builds, read off with a modulo instead of recursion.\nfunction euclid(p, ring, k, n, rot) {\n  p.n[ring] = n;\n  for (let s = 0; s \u003c n; s++) {\n    const t = (s - rot + n * 4) % n;\n    p.hits[ring * MAX_STEPS + s] = (t * k) % n \u003c k ? 1 : 0;\n  }\n}\n\n// How brightly a ring's slice s lights a point r LEDs out, with the share of\n// it that is white left in p.white. A hit rings out as a burst of arcs, and\n// the slice fills in behind the first: a flash that settles to a glow and\n// dims through the next three beats. A rest on the outer ring sends one dim\n// arc, so the panel ticks out every step as the hand reaches it.\nfunction beam(p, ring, s, r) {\n  const at = ring * MAX_STEPS + s;\n  const since = p.beam[at];\n  const age = since / p.life;\n  let v = 0;\n  p.white = 0;\n  if (ring === 0 && !p.hits[at] && p.pass[s] \u003c 1) {\n    const front = BEAM_FROM + ARC_SPEED * p.pass[s];\n    const d = Math.abs(r - front);\n    if (d \u003c 1.4) v = 0.45 * (1 - d / 1.4) * Math.max(0.25, 1 - (front - BEAM_FROM) / 60);\n  }\n  if (age \u003c 1) {\n    if (r \u003c BEAM_FROM + ARC_SPEED * since) v = Math.max(v, FLASH[ring] * Math.exp(-6 * since) + GLOW[ring] * Math.pow(1 - age, 1.3));\n    for (let k = 0; k \u003c ARCS; k++) {\n      const front = BEAM_FROM + ARC_SPEED * (since - k * ARC_GAP);\n      const d = Math.abs(r - front);\n      if (front \u003c BEAM_FROM - 1 || d > 1.4) continue;\n      const arc = ARC_POWER[ring] * (1 - d / 1.4) * Math.pow(0.78, k) * Math.max(0.25, 1 - (front - BEAM_FROM) / 60);\n      if (arc > v) {\n        v = arc;\n        p.white = k === 0 ? arc * 0.45 : 0;\n      }\n    }\n  }\n  return v;\n}\n\n// A ripple leaves the outer edge as an arc facing the step that fired; wide 0\n// sends it all the way round.\nfunction spawn(p, ring, strength, angle, wide) {\n  let slot = 0;\n  for (let i = 0; i \u003c RIPPLES; i++) {\n    if (p.rAge[i] >= 1) {\n      slot = i;\n      break;\n    }\n    if (p.rAge[i] > p.rAge[slot]) slot = i;\n  }\n  p.rAge[slot] = 0;\n  p.rRing[slot] = ring;\n  p.rPower[slot] = strength;\n  p.rAngle[slot] = angle;\n  p.rWide[slot] = wide;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.beats = 0;\n  p.rot = 0;\n  p.n = new Int32Array(3);\n  p.hits = new Uint8Array(3 * MAX_STEPS);\n  p.env = new Float32Array(3 * MAX_STEPS);\n  p.last = new Int32Array([-1, -1, -1]);\n  p.down = 0;\n  // Seconds since each step of the outer two rings last hit, and since the\n  // hand last reached each outer step.\n  p.beam = new Float32Array(2 * MAX_STEPS).fill(99);\n  p.pass = new Float32Array(MAX_STEPS).fill(99);\n  p.white = 0;\n  p.rAge = new Float32Array(RIPPLES).fill(1);\n  p.rRing = new Uint8Array(RIPPLES);\n  p.rPower = new Float32Array(RIPPLES);\n  p.rAngle = new Float32Array(RIPPLES);\n  p.rAim = new Float32Array(RIPPLES);\n  p.rWide = new Float32Array(RIPPLES);\n  p.dist = new Float32Array(W * H);\n  p.turn = new Float32Array(W * H);\n  p.slice = new Float32Array(W * H);\n  p.across = new Float32Array(W * H);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const dx = x - CX;\n      const dy = y - CY;\n      const r = Math.hypot(dx, dy);\n      p.dist[i] = r;\n      // 0 at twelve o'clock, growing clockwise.\n      let a = Math.atan2(dx, -dy) / 6.2832;\n      if (a \u003c 0) a += 1;\n      p.turn[i] = a;\n      // Outside the rings the slices bend toward twelve and six as they go\n      // out, the way the arcs do: a slice that leaves at three o'clock would\n      // reach the side of the panel in three LEDs. The bend squeezes the turn\n      // around the sides and stretches it above and below, so every slice\n      // keeps a share of the open space. across turns a fraction of a slice\n      // into LEDs at this radius.\n      const u = Math.max(0, Math.min(1, (r - BEAM_FROM) / 24));\n      const bend = BEND * u * u * (3 - 2 * u);\n      const w = a + (bend * Math.sin(12.566 * a)) / 12.566;\n      p.slice[i] = w - Math.floor(w);\n      p.across[i] = (6.2832 * r) / (1 + bend * Math.cos(12.566 * a));\n    }\n  }\n  p.col = [\n    [0, 0, 0],\n    [0, 0, 0],\n    [0, 0, 0],\n  ];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 80, 3, 8];\n  p.hue = k[0];\n  p.bpm = k[1];\n  if (input.btnPressed && input.btnPressed[2]) p.rot++;\n  const pulses = Math.round(k[2]);\n  const steps = Math.max(Math.round(k[3]), pulses + 1);\n  const mid = Math.max(3, Math.round(steps * 0.75));\n  euclid(p, 0, pulses, steps, p.rot % steps);\n  euclid(p, 1, Math.min(mid - 1, Math.round(pulses * 0.5) + 1), mid, 1);\n  euclid(p, 2, 4, 4, 0);\n\n  p.beats += (dt * p.bpm) / 60;\n  const bar = p.beats / 4;\n  p.hand = bar - Math.floor(bar);\n  const fade = Math.exp(-dt * 5.5);\n  for (let i = 0; i \u003c 3 * MAX_STEPS; i++) p.env[i] *= fade;\n  p.down *= Math.exp(-dt * 4);\n  // A slice glows for three beats after its hit, so the beams of a bar are\n  // still there, fading, as the next one leaves.\n  p.life = 180 / p.bpm;\n  for (let i = 0; i \u003c 2 * MAX_STEPS; i++) p.beam[i] = Math.min(99, p.beam[i] + dt);\n  for (let s = 0; s \u003c MAX_STEPS; s++) p.pass[s] = Math.min(99, p.pass[s] + dt);\n  for (let ring = 0; ring \u003c 3; ring++) {\n    const n = p.n[ring];\n    const step = Math.floor(p.hand * n);\n    if (step !== p.last[ring]) {\n      p.last[ring] = step;\n      if (ring === 0) p.pass[step] = 0;\n      if (p.hits[ring * MAX_STEPS + step]) {\n        p.env[ring * MAX_STEPS + step] = 1;\n        if (ring \u003c 2) p.beam[ring * MAX_STEPS + step] = 0;\n        else if (step === 0) {\n          p.down = 1;\n          spawn(p, 2, 0.8, 0, 0);\n        } else spawn(p, 2, 0.6, (step + 0.5) / n, 0.2);\n      }\n    }\n  }\n  for (let i = 0; i \u003c RIPPLES; i++) {\n    p.rAge[i] = Math.min(1, p.rAge[i] + dt / 1.4);\n    // The panel stands, so the open space is above and below the rings. An\n    // arc leaves facing its step and bends toward the nearer of the two as it\n    // goes; one sent straight sideways would be off the panel at once.\n    const a = p.rAngle[i];\n    const to = a \u003c 0.25 ? a * 0.4 : a \u003c 0.5 ? 0.5 - (0.5 - a) * 0.4 : a \u003c 0.75 ? 0.5 + (a - 0.5) * 0.4 : 1 - (1 - a) * 0.4;\n    p.rAim[i] = a + (to - a) * Math.min(1, p.rAge[i] * 2.5);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  // Hue 0 opens on an azure outer ring, a pink middle and a gold centre.\n  hsv(p.hue + 0.55, 0.85, 1, p.col[0]);\n  hsv(p.hue + 0.88, 0.7, 1, p.col[1]);\n  hsv(p.hue + 0.15, 0.7, 1, p.col[2]);\n  const hand = p.hand;\n  const hx = Math.sin(hand * 6.2832);\n  const hy = -Math.cos(hand * 6.2832);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const r = p.dist[i];\n      const a = p.turn[i];\n      let R = 0;\n      let G = 0;\n      let B = 0;\n      let ring = -1;\n      for (let j = 0; j \u003c 3; j++) if (r >= R_IN[j] - 0.5 && r \u003c= R_OUT[j] + 0.5) ring = j;\n      if (ring >= 0) {\n        const n = p.n[ring];\n        const pos = a * n;\n        const s = Math.floor(pos);\n        const local = pos - s;\n        // A gap of about one LED between neighbouring steps.\n        const gap = (0.6 * n) / (6.2832 * r);\n        const edge = Math.min(r - R_IN[ring], R_OUT[ring] - r) + 0.5;\n        if (local > gap && local \u003c 1 - gap) {\n          const hit = p.hits[ring * MAX_STEPS + s];\n          const env = p.env[ring * MAX_STEPS + s];\n          const here = s === Math.floor(hand * n);\n          const soft = Math.max(0, Math.min(1, edge));\n          let v;\n          let white = 0;\n          if (hit) {\n            v = Math.max(0.5 + 0.5 * env, here ? 0.7 : 0) * soft;\n            white = env * env * 0.55;\n          } else {\n            // A rest is a dim cell, so the steps can be counted between hits.\n            v = (here ? 0.4 : 0.12) * soft;\n          }\n          const c = p.col[ring];\n          R = (c[0] * (1 - white) + 255 * white) * v;\n          G = (c[1] * (1 - white) + 255 * white) * v;\n          B = (c[2] * (1 - white) + 255 * white) * v;\n        }\n      } else if (r \u003c 5) {\n        const v = 0.18 + 0.82 * p.down;\n        const c = p.col[2];\n        R = c[0] * v + (255 - c[0]) * v * p.down;\n        G = c[1] * v + (255 - c[1]) * v * p.down;\n        B = c[2] * v + (255 - c[2]) * v * p.down;\n      } else if (r > R_OUT[0] + 1) {\n        // Outside the rings each step of the outer two owns a slice of the\n        // panel, the middle ring's three for every four of the outer's, and\n        // a hit sends a beam out along its slice. Where beams of the two\n        // overlap their colours add.\n        for (let j = 0; j \u003c 2; j++) {\n          const n = p.n[j];\n          const pos = p.slice[i] * n;\n          const s = Math.floor(pos);\n          // A slice with nothing in it is dark.\n          if (p.beam[j * MAX_STEPS + s] >= p.life && (j > 0 || p.pass[s] >= 1)) continue;\n          const local = pos - s;\n          // LEDs to the nearer side of the slice, with a dark LED between slices.\n          const soft = Math.max(0, Math.min(1, (Math.min(local, 1 - local) * p.across[i]) / n - 0.6));\n          if (soft \u003c= 0) continue;\n          const v = beam(p, j, s, r) * soft;\n          if (v \u003c= 0) continue;\n          const white = p.white;\n          const c = p.col[j];\n          R += (c[0] * (1 - white) + 255 * white) * v;\n          G += (c[1] * (1 - white) + 255 * white) * v;\n          B += (c[2] * (1 - white) + 255 * white) * v;\n        }\n        for (let q = 0; q \u003c RIPPLES; q++) {\n          const age = p.rAge[q];\n          if (age >= 1) continue;\n          const front = R_OUT[0] + 1 + age * 62;\n          const d = Math.abs(r - front);\n          if (d > 2.2) continue;\n          let v = p.rPower[q] * (1 - age) * Math.sqrt(1 - age) * (1 - d / 2.2);\n          const wide = p.rWide[q];\n          if (wide > 0) {\n            let da = Math.abs(a - p.rAim[q]);\n            if (da > 0.5) da = 1 - da;\n            const span = wide * (0.8 + age * 1.4);\n            if (da > span) continue;\n            v *= 1 - (da / span) * (da / span);\n          }\n          const c = p.col[p.rRing[q]];\n          R += c[0] * v;\n          G += c[1] * v;\n          B += c[2] * v;\n        }\n      }\n      // The hand: a thin spoke through the rings.\n      if (r > 5 && r \u003c R_OUT[0] + 0.5) {\n        const dx = x - CX;\n        const dy = y - CY;\n        const along = dx * hx + dy * hy;\n        const v = along > 0 ? 1 - Math.abs(dx * hy - dy * hx) / 0.9 : 0;\n        if (v > 0) {\n          R = Math.max(R, 170 * v);\n          G = Math.max(G, 170 * v);\n          B = Math.max(B, 170 * v);\n        }\n      }\n      display.setPixel(x, y, Math.min(255, R), Math.min(255, G), Math.min(255, B));\n    }\n  }\n}\n","layer":{"id":"layer-euclid-pulse","type":"code","name":"euclid-pulse","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Euclid Pulse\n// Family:  rhythm\n// Idea:    Spread a few beats as evenly as they will go over a ring of steps and a good many of the world's drum patterns fall out, so the panel plays three of them at once.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=80..180, Pulses=3..13, Steps=8..16\n//\n// Knob 1: Hue. Turns the three rings around the colour wheel together.\n// Knob 2: Tempo. Beats per minute; the hand goes round once every four beats.\n// Knob 3: Pulses. Hits on the outer ring; the middle ring takes about half as many.\n// Knob 4: Steps. Steps on the outer ring; the middle ring has three for every four of them. Each outer step owns a slice of the panel and a hit fires a beam down it, so more steps make narrower beams.\n// Buttons: K3 tap turns the outer rhythm one step later.\n\nconst W = 64;\nconst H = 128;\nconst CX = 31.5;\nconst CY = 63.5;\nconst MAX_STEPS = 32;\nconst RIPPLES = 24;\n\n// Ring bands in LEDs from the centre: outer, middle, inner. The outer ring\n// stops three LEDs short of the panel's sides so a ripple can be seen leaving it.\nconst R_IN = [23, 15.5, 8.5];\nconst R_OUT = [28.5, 20, 12];\n// Beams start just outside the outer ring. The far corners are 71 LEDs out.\nconst BEAM_FROM = R_OUT[0] + 1.5;\n// A hit rings out as four arcs, one every 0.09 s, each a little dimmer,\n// running out at 64 LEDs a second: five or six LEDs apart.\nconst ARCS = 4;\nconst ARC_GAP = 0.09;\nconst ARC_SPEED = 64;\nconst BEND = 0.75;\n// The outer ring's beams and the middle ring's, which are a little dimmer so\n// the outer rhythm leads.\nconst FLASH = [0.4, 0.3];\nconst GLOW = [0.34, 0.24];\nconst ARC_POWER = [1, 0.7];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// k hits over n steps, as evenly as they go. This is the same necklace\n// Bjorklund's algorithm builds, read off with a modulo instead of recursion.\nfunction euclid(p, ring, k, n, rot) {\n  p.n[ring] = n;\n  for (let s = 0; s \u003c n; s++) {\n    const t = (s - rot + n * 4) % n;\n    p.hits[ring * MAX_STEPS + s] = (t * k) % n \u003c k ? 1 : 0;\n  }\n}\n\n// How brightly a ring's slice s lights a point r LEDs out, with the share of\n// it that is white left in p.white. A hit rings out as a burst of arcs, and\n// the slice fills in behind the first: a flash that settles to a glow and\n// dims through the next three beats. A rest on the outer ring sends one dim\n// arc, so the panel ticks out every step as the hand reaches it.\nfunction beam(p, ring, s, r) {\n  const at = ring * MAX_STEPS + s;\n  const since = p.beam[at];\n  const age = since / p.life;\n  let v = 0;\n  p.white = 0;\n  if (ring === 0 && !p.hits[at] && p.pass[s] \u003c 1) {\n    const front = BEAM_FROM + ARC_SPEED * p.pass[s];\n    const d = Math.abs(r - front);\n    if (d \u003c 1.4) v = 0.45 * (1 - d / 1.4) * Math.max(0.25, 1 - (front - BEAM_FROM) / 60);\n  }\n  if (age \u003c 1) {\n    if (r \u003c BEAM_FROM + ARC_SPEED * since) v = Math.max(v, FLASH[ring] * Math.exp(-6 * since) + GLOW[ring] * Math.pow(1 - age, 1.3));\n    for (let k = 0; k \u003c ARCS; k++) {\n      const front = BEAM_FROM + ARC_SPEED * (since - k * ARC_GAP);\n      const d = Math.abs(r - front);\n      if (front \u003c BEAM_FROM - 1 || d > 1.4) continue;\n      const arc = ARC_POWER[ring] * (1 - d / 1.4) * Math.pow(0.78, k) * Math.max(0.25, 1 - (front - BEAM_FROM) / 60);\n      if (arc > v) {\n        v = arc;\n        p.white = k === 0 ? arc * 0.45 : 0;\n      }\n    }\n  }\n  return v;\n}\n\n// A ripple leaves the outer edge as an arc facing the step that fired; wide 0\n// sends it all the way round.\nfunction spawn(p, ring, strength, angle, wide) {\n  let slot = 0;\n  for (let i = 0; i \u003c RIPPLES; i++) {\n    if (p.rAge[i] >= 1) {\n      slot = i;\n      break;\n    }\n    if (p.rAge[i] > p.rAge[slot]) slot = i;\n  }\n  p.rAge[slot] = 0;\n  p.rRing[slot] = ring;\n  p.rPower[slot] = strength;\n  p.rAngle[slot] = angle;\n  p.rWide[slot] = wide;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.beats = 0;\n  p.rot = 0;\n  p.n = new Int32Array(3);\n  p.hits = new Uint8Array(3 * MAX_STEPS);\n  p.env = new Float32Array(3 * MAX_STEPS);\n  p.last = new Int32Array([-1, -1, -1]);\n  p.down = 0;\n  // Seconds since each step of the outer two rings last hit, and since the\n  // hand last reached each outer step.\n  p.beam = new Float32Array(2 * MAX_STEPS).fill(99);\n  p.pass = new Float32Array(MAX_STEPS).fill(99);\n  p.white = 0;\n  p.rAge = new Float32Array(RIPPLES).fill(1);\n  p.rRing = new Uint8Array(RIPPLES);\n  p.rPower = new Float32Array(RIPPLES);\n  p.rAngle = new Float32Array(RIPPLES);\n  p.rAim = new Float32Array(RIPPLES);\n  p.rWide = new Float32Array(RIPPLES);\n  p.dist = new Float32Array(W * H);\n  p.turn = new Float32Array(W * H);\n  p.slice = new Float32Array(W * H);\n  p.across = new Float32Array(W * H);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const dx = x - CX;\n      const dy = y - CY;\n      const r = Math.hypot(dx, dy);\n      p.dist[i] = r;\n      // 0 at twelve o'clock, growing clockwise.\n      let a = Math.atan2(dx, -dy) / 6.2832;\n      if (a \u003c 0) a += 1;\n      p.turn[i] = a;\n      // Outside the rings the slices bend toward twelve and six as they go\n      // out, the way the arcs do: a slice that leaves at three o'clock would\n      // reach the side of the panel in three LEDs. The bend squeezes the turn\n      // around the sides and stretches it above and below, so every slice\n      // keeps a share of the open space. across turns a fraction of a slice\n      // into LEDs at this radius.\n      const u = Math.max(0, Math.min(1, (r - BEAM_FROM) / 24));\n      const bend = BEND * u * u * (3 - 2 * u);\n      const w = a + (bend * Math.sin(12.566 * a)) / 12.566;\n      p.slice[i] = w - Math.floor(w);\n      p.across[i] = (6.2832 * r) / (1 + bend * Math.cos(12.566 * a));\n    }\n  }\n  p.col = [\n    [0, 0, 0],\n    [0, 0, 0],\n    [0, 0, 0],\n  ];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 80, 3, 8];\n  p.hue = k[0];\n  p.bpm = k[1];\n  if (input.btnPressed && input.btnPressed[2]) p.rot++;\n  const pulses = Math.round(k[2]);\n  const steps = Math.max(Math.round(k[3]), pulses + 1);\n  const mid = Math.max(3, Math.round(steps * 0.75));\n  euclid(p, 0, pulses, steps, p.rot % steps);\n  euclid(p, 1, Math.min(mid - 1, Math.round(pulses * 0.5) + 1), mid, 1);\n  euclid(p, 2, 4, 4, 0);\n\n  p.beats += (dt * p.bpm) / 60;\n  const bar = p.beats / 4;\n  p.hand = bar - Math.floor(bar);\n  const fade = Math.exp(-dt * 5.5);\n  for (let i = 0; i \u003c 3 * MAX_STEPS; i++) p.env[i] *= fade;\n  p.down *= Math.exp(-dt * 4);\n  // A slice glows for three beats after its hit, so the beams of a bar are\n  // still there, fading, as the next one leaves.\n  p.life = 180 / p.bpm;\n  for (let i = 0; i \u003c 2 * MAX_STEPS; i++) p.beam[i] = Math.min(99, p.beam[i] + dt);\n  for (let s = 0; s \u003c MAX_STEPS; s++) p.pass[s] = Math.min(99, p.pass[s] + dt);\n  for (let ring = 0; ring \u003c 3; ring++) {\n    const n = p.n[ring];\n    const step = Math.floor(p.hand * n);\n    if (step !== p.last[ring]) {\n      p.last[ring] = step;\n      if (ring === 0) p.pass[step] = 0;\n      if (p.hits[ring * MAX_STEPS + step]) {\n        p.env[ring * MAX_STEPS + step] = 1;\n        if (ring \u003c 2) p.beam[ring * MAX_STEPS + step] = 0;\n        else if (step === 0) {\n          p.down = 1;\n          spawn(p, 2, 0.8, 0, 0);\n        } else spawn(p, 2, 0.6, (step + 0.5) / n, 0.2);\n      }\n    }\n  }\n  for (let i = 0; i \u003c RIPPLES; i++) {\n    p.rAge[i] = Math.min(1, p.rAge[i] + dt / 1.4);\n    // The panel stands, so the open space is above and below the rings. An\n    // arc leaves facing its step and bends toward the nearer of the two as it\n    // goes; one sent straight sideways would be off the panel at once.\n    const a = p.rAngle[i];\n    const to = a \u003c 0.25 ? a * 0.4 : a \u003c 0.5 ? 0.5 - (0.5 - a) * 0.4 : a \u003c 0.75 ? 0.5 + (a - 0.5) * 0.4 : 1 - (1 - a) * 0.4;\n    p.rAim[i] = a + (to - a) * Math.min(1, p.rAge[i] * 2.5);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  // Hue 0 opens on an azure outer ring, a pink middle and a gold centre.\n  hsv(p.hue + 0.55, 0.85, 1, p.col[0]);\n  hsv(p.hue + 0.88, 0.7, 1, p.col[1]);\n  hsv(p.hue + 0.15, 0.7, 1, p.col[2]);\n  const hand = p.hand;\n  const hx = Math.sin(hand * 6.2832);\n  const hy = -Math.cos(hand * 6.2832);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const r = p.dist[i];\n      const a = p.turn[i];\n      let R = 0;\n      let G = 0;\n      let B = 0;\n      let ring = -1;\n      for (let j = 0; j \u003c 3; j++) if (r >= R_IN[j] - 0.5 && r \u003c= R_OUT[j] + 0.5) ring = j;\n      if (ring >= 0) {\n        const n = p.n[ring];\n        const pos = a * n;\n        const s = Math.floor(pos);\n        const local = pos - s;\n        // A gap of about one LED between neighbouring steps.\n        const gap = (0.6 * n) / (6.2832 * r);\n        const edge = Math.min(r - R_IN[ring], R_OUT[ring] - r) + 0.5;\n        if (local > gap && local \u003c 1 - gap) {\n          const hit = p.hits[ring * MAX_STEPS + s];\n          const env = p.env[ring * MAX_STEPS + s];\n          const here = s === Math.floor(hand * n);\n          const soft = Math.max(0, Math.min(1, edge));\n          let v;\n          let white = 0;\n          if (hit) {\n            v = Math.max(0.5 + 0.5 * env, here ? 0.7 : 0) * soft;\n            white = env * env * 0.55;\n          } else {\n            // A rest is a dim cell, so the steps can be counted between hits.\n            v = (here ? 0.4 : 0.12) * soft;\n          }\n          const c = p.col[ring];\n          R = (c[0] * (1 - white) + 255 * white) * v;\n          G = (c[1] * (1 - white) + 255 * white) * v;\n          B = (c[2] * (1 - white) + 255 * white) * v;\n        }\n      } else if (r \u003c 5) {\n        const v = 0.18 + 0.82 * p.down;\n        const c = p.col[2];\n        R = c[0] * v + (255 - c[0]) * v * p.down;\n        G = c[1] * v + (255 - c[1]) * v * p.down;\n        B = c[2] * v + (255 - c[2]) * v * p.down;\n      } else if (r > R_OUT[0] + 1) {\n        // Outside the rings each step of the outer two owns a slice of the\n        // panel, the middle ring's three for every four of the outer's, and\n        // a hit sends a beam out along its slice. Where beams of the two\n        // overlap their colours add.\n        for (let j = 0; j \u003c 2; j++) {\n          const n = p.n[j];\n          const pos = p.slice[i] * n;\n          const s = Math.floor(pos);\n          // A slice with nothing in it is dark.\n          if (p.beam[j * MAX_STEPS + s] >= p.life && (j > 0 || p.pass[s] >= 1)) continue;\n          const local = pos - s;\n          // LEDs to the nearer side of the slice, with a dark LED between slices.\n          const soft = Math.max(0, Math.min(1, (Math.min(local, 1 - local) * p.across[i]) / n - 0.6));\n          if (soft \u003c= 0) continue;\n          const v = beam(p, j, s, r) * soft;\n          if (v \u003c= 0) continue;\n          const white = p.white;\n          const c = p.col[j];\n          R += (c[0] * (1 - white) + 255 * white) * v;\n          G += (c[1] * (1 - white) + 255 * white) * v;\n          B += (c[2] * (1 - white) + 255 * white) * v;\n        }\n        for (let q = 0; q \u003c RIPPLES; q++) {\n          const age = p.rAge[q];\n          if (age >= 1) continue;\n          const front = R_OUT[0] + 1 + age * 62;\n          const d = Math.abs(r - front);\n          if (d > 2.2) continue;\n          let v = p.rPower[q] * (1 - age) * Math.sqrt(1 - age) * (1 - d / 2.2);\n          const wide = p.rWide[q];\n          if (wide > 0) {\n            let da = Math.abs(a - p.rAim[q]);\n            if (da > 0.5) da = 1 - da;\n            const span = wide * (0.8 + age * 1.4);\n            if (da > span) continue;\n            v *= 1 - (da / span) * (da / span);\n          }\n          const c = p.col[p.rRing[q]];\n          R += c[0] * v;\n          G += c[1] * v;\n          B += c[2] * v;\n        }\n      }\n      // The hand: a thin spoke through the rings.\n      if (r > 5 && r \u003c R_OUT[0] + 0.5) {\n        const dx = x - CX;\n        const dy = y - CY;\n        const along = dx * hx + dy * hy;\n        const v = along > 0 ? 1 - Math.abs(dx * hy - dy * hx) / 0.9 : 0;\n        if (v > 0) {\n          R = Math.max(R, 170 * v);\n          G = Math.max(G, 170 * v);\n          B = Math.max(B, 170 * v);\n        }\n      }\n      display.setPixel(x, y, Math.min(255, R), Math.min(255, G), Math.min(255, B));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Tempo=80..180, Pulses=3..13, Steps=8..16","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the three rings around the colour wheel together."},{"name":"Tempo","min":80,"max":180,"about":"Beats per minute; the hand goes round once every four beats."},{"name":"Pulses","min":3,"max":13,"about":"Hits on the outer ring; the middle ring takes about half as many."},{"name":"Steps","min":8,"max":16,"about":"Steps on the outer ring; the middle ring has three for every four of them. Each outer step owns a slice of the panel and a hit fires a beam down it, so more steps make narrower beams."}],"start":[0,80,3,8],"measures":{"motion":0.5845,"detail":0.0325,"edges":0.366,"complexity":0.4817,"coverage":0.4069,"colour":0.1498,"drift":0.1272},"knobResponse":[0.0702,0.0945,0.0699,0.0495]},{"slug":"fiddlehead","title":"Fiddlehead","family":"growth","round":21,"note":"봄 숲 바닥의 타임랩스예요. 털 덮인 고사리 순이 지난해 낙엽을 뚫고 올라와 아래부터 풀리며 패널 꼭대기에서 휘는 잎이 되고, 그사이 늙은 잎은 누렇게 시들어 쓰러지고 숲 지붕 틈으로 든 빛살이 그 위를 미끄러져요.","idea":"A spring time-lapse on a woodland floor: furred fern croziers push up through last year's leaves and unroll from the bottom up into tall arching fronds, each side leaflet uncurling from its own little spiral, while old fronds brown and fall back and light through the canopy slides over them.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Fiddlehead\n// Family:  growth\n// Idea:    A spring time-lapse on a woodland floor: furred fern croziers push up through last year's leaves and unroll from the bottom up into tall arching fronds, each side leaflet uncurling from its own little spiral, while old fronds brown and fall back and light through the canopy slides over them.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after time-lapse films of ostrich fern croziers unrolling in spring\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Fern=0..3, Speed=0.2..3, Fronds=6..18, Breeze=-1..1\n//\n// Knob 1: Fern. Ostrich fern at 0, a shuttlecock of bright green round last year's brown fertile fronds; cinnamon fern at 1 with white-woolly croziers; bracken at 2, broad blades tipped flat on tall stalks; autumn fern at 3, whose new fronds come up copper-red and green as they age.\n// Knob 2: Speed. How fast the time-lapse runs: at 2 a crozier takes about thirteen seconds to unroll and a frond lives about half a minute; at 0.2 it creeps.\n// Knob 3: Fronds. How many fronds there are, six in one crown at 6, then a crown either side, then two more crowns further back in the shade at 18.\n// Knob 4: Breeze. Near still at 0.06; turned either way the fronds lean and sway that way and the sunflecks from the canopy slide across faster.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Each fern: young leaf, grown leaf, rachis, crozier, fur, fertile frond (rgb), then the\n// share of stalk below the blade, pinna length, where the blade is widest, lean, arch,\n// coil tightness, fur, how far a crown spreads, fertile frond height, pinna angle, and\n// how slowly the young colour greens.\nconst FERNS = [\n  [160, 226, 70, 44, 150, 48, 104, 164, 60, 104, 178, 58, 196, 140, 84, 92, 58, 36, 0.2, 0.13, 0.62, 0.3, 1.5, 0.15, 0.5, 4, 30, 1.05, 0.5],\n  [184, 220, 100, 92, 178, 58, 150, 176, 96, 140, 150, 110, 236, 226, 210, 200, 106, 40, 0.3, 0.12, 0.45, 0.17, 0.9, 0.17, 1, 2.5, 40, 1.15, 0.5],\n  [130, 184, 80, 44, 124, 70, 128, 156, 84, 90, 122, 60, 190, 178, 156, 0, 0, 0, 0.46, 0.2, 0.04, 0.08, 1.6, 0.11, 0.7, 9, 0, 1.2, 0.5],\n  [238, 108, 50, 66, 140, 54, 164, 96, 54, 130, 62, 34, 64, 40, 28, 0, 0, 0, 0.26, 0.15, 0.3, 0.28, 1.15, 0.15, 0.8, 2, 0, 1.0, 1.4],\n];\n// A frond's life in world seconds at Speed 2: coming up, unrolling, standing, falling, gone.\nconst [EM, UN, HO, FA, GP] = [2, 13, 7, 4, 1];\nconst CYC = EM + UN + HO + FA + GP;\n// Crowns as x and depth, and which crown each slot belongs to in the order Fronds adds them.\nconst CROWN = [[32, 1], [10, 0.93], [54, 0.93], [21, 0.72], [43, 0.72]];\nconst SLOT = [0, 0, 0, 0, 0, 0, 1, 2, 1, 2, 1, 2, 3, 4, 3, 4, 3, 4];\n// Which way each slot leans: the side crowns lean in over the middle, mostly.\nconst LEAN = [-1, 1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, -1, 1, 1, -1, -1, 1];\n// Where in its life each frond is at 2 s: the front crown has one of each, the others are\n// mostly up, so turning Fronds at the start shows.\nconst OPEN = [0.02, 0.146, 0.267, 0.41, 0.59, 0.7, 0.62, 0.45, 0.7, 0.3, 0.76, 0.52, 0.65, 0.4, 0.58, 0.3, 0.72, 0.5];\nconst SEN = [[204, 176, 64], [132, 74, 36]];\nconst HAZE = [34, 52, 44];\nconst MAXS = 340;\n// A snail on the litter, facing right: shell light and dark, body, eye stalks.\nconst SNAIL = [\"..sss.....\", \".sSSSs.t.t\", \".sSsSs..bB\", \".sSssBBBBB\", \"bBBBBBBBBb\"];\nconst SNC = { S: [176, 128, 70], s: [96, 62, 34], B: [150, 140, 118], b: [110, 100, 86], t: [70, 62, 54] };\nconst RX = new Float32Array(MAXS), RY = new Float32Array(MAXS), RT = new Float32Array(MAXS), RW = new Float32Array(MAXS);\n\nfunction build(P) {\n  const { bg, gnd } = P;\n  for (let x = 0; x \u003c W; x++) gnd[x] = 110 + 3 * vn(x * 0.11, 5.5) + 1.6 * vn(x * 0.37, 2.2);\n  // The wood behind: dark under the canopy, hazier and warmer near the floor.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, v = cl(y / 112, 0, 1) ** 1.6, f = vn(x * 0.09, y * 0.06) * 0.6 + vn(x * 0.27, y * 0.19) * 0.4;\n    const k = 0.72 + 0.55 * f;\n    bg.set([mix(20, 44, v) * k, mix(40, 54, v) * k, mix(38, 38, v) * k], p * 3);\n  }\n  // Beech trunks, smooth and grey, lit from the right; the far ones go into the haze.\n  for (const [tx, tw, z] of [[3, 8, 1], [47, 4.5, 0.62], [60, 3, 0.45]])\n    for (let y = 0; y \u003c 116; y++)\n      for (let x = floor(tx - tw / 2); x \u003c= tx + tw / 2; x++) {\n        if (x \u003c 0 || x >= W || y > gnd[x] + 1) continue;\n        const n = (x - tx) / (tw / 2), l = (0.55 + 0.4 * n) * (0.85 + 0.25 * vn(x * 0.8, y * 0.05)) * (y > gnd[x] - 8 ? 0.8 : 1);\n        const moss = y > gnd[x] - 6 - 4 * vn(x, 9) ? 1 : 0, o = (y * W + x) * 3;\n        const c = moss ? [52, 92, 34] : [84, 86, 78];\n        for (let i = 0; i \u003c 3; i++) bg[o + i] = mix(bg[o + i], mix(c[i] * l, HAZE[i], 1 - z), 0.9);\n      }\n  // The canopy overhead, with holes the shafts come through.\n  for (let p = 0; p \u003c 18 * W; p++) {\n    const x = p & 63, y = p >> 6, h = sm((vn(x / 4, y / 3 + 50) * 0.7 + vn(x / 1.7, y / 1.4 + 70) * 0.3 - 0.52) * 5), a = (1 - h) * sm((17 - y - 7 * vn(x / 5, 3.3)) / 4), k = 0.6 + 0.7 * vn(x / 1.6, y / 1.3);\n    P.hole[p] = h * (1 - y / 18);\n    for (let i = 0; i \u003c 3; i++) bg[p * 3 + i] = mix(bg[p * 3 + i], [16, 34, 20][i] * k, a);\n  }\n  // Last year's leaves: beech copper, oak brown, pale skeletons and dark wet ones.\n  const LC = [[124, 76, 40], [98, 62, 34], [140, 110, 74], [66, 44, 30], [96, 84, 70], [130, 90, 48]];\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, d = y - gnd[x];\n    if (d >= 0) bg.set([44 - d * 0.6, 28 - d * 0.4, 18 - d * 0.2], p * 3);\n  }\n  const leaf = (cx, cy, a, rx, ry, c, put) => {\n    const ca = cos(a), sa = sin(a), t = 0.8 + rnd() * 0.35;\n    for (let y = floor(cy - rx); y \u003c= cy + rx; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const dx = x - cx, dy = y - cy, u = (dx * ca + dy * sa) / rx, v = (-dx * sa + dy * ca) / ry, r = u * u + v * v * (1 + 0.6 * u);\n        if (r > 1 || x \u003c 0 || x >= W || y >= H) continue;\n        const k = t * (abs(v) \u003c 0.22 && abs(u) \u003c 0.85 ? 0.7 : r > 0.65 ? 0.78 : 1) * (1 + 0.15 * u);\n        put(x, y, c[0] * k, c[1] * k, c[2] * k);\n      }\n  };\n  const putBg = (x, y, r, g, b) => y >= gnd[x] - 1 && bg.set([r, g, b], (y * W + x) * 3);\n  for (let n = 0; n \u003c 170; n++) {\n    const cx = rnd() * 68 - 2, top = gnd[cl(round(cx), 0, W - 1)];\n    leaf(cx, top + rnd() * (H - top + 2) - 0.5, rnd() * PI, 2 + rnd() * 1.8, 1.1 + rnd() * 0.8, LC[floor(rnd() * 6)], putBg);\n  }\n  // Moss cushions and twigs.\n  for (let n = 0; n \u003c 7; n++) {\n    const cx = rnd() * 64, cy = gnd[floor(cx)] + 2 + rnd() * 12, r = 1.5 + rnd() * 2.5;\n    for (let y = floor(cy - r); y \u003c= cy + r; y++)\n      for (let x = floor(cx - r); x \u003c= cx + r; x++)\n        if (x >= 0 && x \u003c W && y \u003c H && hypot(x - cx, (y - cy) * 1.4) \u003c r && hash(x, y) \u003c 0.85) {\n          const k = 0.7 + 0.5 * hash(y, x);\n          bg.set([50 * k, 104 * k, 36 * k], (y * W + x) * 3);\n        }\n  }\n  for (let n = 0; n \u003c 7; n++) {\n    let x = rnd() * 64, y = gnd[floor(x)] + 1 + rnd() * 14;\n    const a = (rnd() - 0.5) * 0.8, dir = rnd() \u003c 0.5 ? -1 : 1;\n    for (let i = 0, len = 6 + rnd() * 12; i \u003c len; i++, x += dir * cos(a), y += sin(a)) {\n      const xi = round(x), yi = round(y);\n      if (xi >= 0 && xi \u003c W && yi \u003c H) bg.set([62, 46, 36], (yi * W + xi) * 3);\n    }\n  }\n  // Last year's fronds, flattened and rusty on top of the leaves.\n  for (const [sx, dir, len] of [[6, 1, 24], [58, -1, 20], [36, -1, 16]]) {\n    for (let i = 0; i \u003c len; i++) {\n      const x = sx + dir * i, y = round(gnd[cl(x, 0, W - 1)] + 2 + i * 0.12);\n      if (x \u003c 0 || x >= W) continue;\n      bg.set([96, 58, 32], (y * W + x) * 3);\n      if (i % 2 && i \u003c len - 2) for (const s of [-1, 1]) for (let j = 1; j \u003c 4 - i / len * 2; j++) {\n        const px = x + dir * j * 0.6, py = y + s * j;\n        if (px >= 0 && px \u003c W && py \u003c H) bg.set([124, 72, 36], (round(py) * W + round(px)) * 3);\n      }\n    }\n  }\n  // Leaves in front of the crowns, laid over the stalks where they come out.\n  const fa = P.fa, fc = P.fc;\n  for (let n = 0; n \u003c 26; n++) {\n    const cx = CROWN[n % 5][0] + (rnd() - 0.5) * 16, top = gnd[cl(round(cx), 0, W - 1)];\n    leaf(cx, top + 1 + rnd() * 2.5, (rnd() - 0.5) * 0.9, 2 + rnd() * 1.5, 1 + rnd() * 0.6, LC[floor(rnd() * 6)], (x, y, r, g, b) => {\n      fa[y * W + x] = 1;\n      fc.set([r, g, b], (y * W + x) * 3);\n    });\n  }\n  // Canopy gaps: the shafts one way, the dapple in them the other.\n  for (let n = 0; n \u003c 12; n++) {\n    const c = n * 21.3 + rnd() * 12, w = 2.5 + rnd() * 5, a = 0.5 + rnd() * 0.5;\n    for (let i = 0; i \u003c 256; i++) P.gap[i] = min(1, P.gap[i] + a * Math.exp(-(((((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n  for (let i = 0; i \u003c 128 * 64; i++) P.dap[i] = sm((vn((i & 127) / 7, (i >> 7) / 5) * 0.7 + vn((i & 127) / 3, (i >> 7) / 2.5 + 30) * 0.3 - 0.3) * 2.2);\n  P.anem = [[15, 6], [18, 8], [21, 5], [45, 5], [48, 7], [58, 6]].map(([x, h]) => [x, h, rnd() * 7]);\n  P.mote = Array.from({ length: 16 }, () => [rnd() * 64, rnd() * 110, rnd() * 7]);\n}\n\nlet BUF;\nfunction px(x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\n// A soft dot over four LEDs, so a curve moving a fraction of an LED still moves.\nfunction dot(x, y, r, g, b, a) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n  if (xi \u003c 0 || xi > W - 2 || yi \u003c 0 || yi > H - 2) {\n    px(xi, yi, r, g, b, a * (1 - fx) * (1 - fy));\n    px(xi + 1, yi, r, g, b, a * fx * (1 - fy));\n    px(xi, yi + 1, r, g, b, a * (1 - fx) * fy);\n    return px(xi + 1, yi + 1, r, g, b, a * fx * fy);\n  }\n  const B = BUF;\n  for (let k = 0, o = (yi * W + xi) * 3; k \u003c 4; k++) {\n    const w = a * (k & 1 ? fx : 1 - fx) * (k & 2 ? fy : 1 - fy), q = o + (k & 1 ? 3 : 0) + (k & 2 ? W * 3 : 0);\n    if (w > 0.02) (B[q] += (r - B[q]) * w), (B[q + 1] += (g - B[q + 1]) * w), (B[q + 2] += (b - B[q + 2]) * w);\n  }\n}\nfunction disc(x, y, rad, r, g, b, a) {\n  if (rad \u003c 0.75) return dot(x, y, r, g, b, a);\n  for (let yy = floor(y - rad); yy \u003c= y + rad + 1; yy++)\n    for (let xx = floor(x - rad); xx \u003c= x + rad + 1; xx++) {\n      const d2 = (xx - x) ** 2 + (yy - y) ** 2;\n      if (d2 \u003c (rad + 0.5) ** 2) px(xx, yy, r, g, b, a * min(1, rad + 0.5 - sqrt(d2)));\n    }\n}\n\n// Where a slot is in its life now, and the frond's shape from that.\nfunction frondAt(P, S) {\n  const sp = P.sp, T = P.t + S.off, c = floor(T / S.cyc), a = ((T - c * S.cyc) / S.cyc) * CYC;\n  if (a >= EM + UN + HO + FA) return null;\n  const h = (m) => hash(S.j * 13 + m, c + 977), cx = CROWN[S.c][0], dep = S.z;\n  const Lf = (dep > 0.86 ? 104 : 86) * (0.84 + 0.26 * h(1)), x = cx + (h(2) - 0.5) * 2 * sp[25];\n  const stipe = 5 + Lf * 0.05, C0 = Lf * 0.5;\n  let U, C, g = 1, fall = 0, sen = 0, fade = 1;\n  if (a \u003c EM) {\n    const e = a / EM;\n    [g, U, C] = [0, stipe * e, C0 * (0.4 + 0.6 * e)];\n  } else if (a \u003c EM + UN) {\n    g = (a - EM) / UN;\n    [U, C] = [stipe + (Lf - stipe) * g ** 1.25, C0 * (1 - g) ** 0.8];\n  } else {\n    [U, C] = [Lf, 0];\n    const ph = (a - EM - UN - HO) / FA;\n    // It yellows and browns where it stands, then folds down onto the litter and fades into it.\n    if (ph > 0) [fall, sen, fade] = [sm((ph - 0.3) / 0.55), sm(ph * 2), 1 - sm((ph - 0.7) / 0.3)];\n  }\n  const lean = sp[21] * (0.55 + 0.8 * h(3)) * (S.c ? 1.2 : 1);\n  const wind = P.wind * 1.1 + (0.16 + 0.3 * abs(P.wind)) * sin(P.t * 1.3 + S.ph) + 0.1 * sin(P.t * 0.37 + S.c);\n  return {\n    x, y: P.gnd[cl(round(x), 0, W - 1)] + 0.5, o: S.o, th0: S.o * (lean + 1.5 * fall), L: U + C, f: U, Lf, dep, g, fall, sen, fade, wind,\n    k: sp[23] * (0.9 + 0.2 * h(4)), arch: sp[22] * (0.7 + 0.5 * h(5)) * sm(g * 1.3 - 0.1) * (1 + 0.6 * fall),\n    hp: a \u003c EM + UN ? 0 : min(1, (a - EM - UN) / HO), seed: S.j * 31 + c, hv: h(6) * 2 - 1,\n  };\n}\n\n// A frond's colours are c * ta + tb: browning as it dies, darker and hazier further back.\nfunction tint(F) {\n  const s = F.sen, k = 0.48 + 0.52 * F.dep, z = (1 - F.dep) * 0.5;\n  F.ta = (s \u003c 0.5 ? 1 - s * 2 : 0) * k * (1 - z);\n  F.tb = HAZE.map((hz, i) => (s \u003c 0.5 ? s * 2 * SEN[0][i] : mix(SEN[0][i], SEN[1][i], s * 2 - 1)) * k * (1 - z) + hz * z);\n}\n\n// One pinna: straight for the share that has opened, then its own little spiral.\nfunction pinna(x, y, th, len, q, sd, r, g, b, a, lobe) {\n  const st = 0.75, open = len * q, n = ceil(len / st);\n  for (let j = 1; j \u003c= n; j++) {\n    const s = j * st, w = s > open ? sm((s - open) / 1.5) : 0;\n    th -= sd * (w / (0.2 * (len - s) + 0.5) + 0.03) * st;\n    x += sin(th) * st;\n    y -= cos(th) * st;\n    px(round(x), round(y), r, g, b, a);\n    // Pinnules: a lobe either side in turn, gone towards the tip.\n    if (j & 1 && w \u003c 0.5 && s \u003c len * lobe) {\n      const e = j & 2 ? sd : -sd;\n      px(round(x - e * cos(th)), round(y - e * sin(th)), r * 0.8, g * 0.85, b * 0.8, a * 0.55);\n    }\n  }\n}\n\nfunction frond(P, F, vis) {\n  const sp = P.sp, ds = 0.5, n = min(MAXS - 1, ceil(F.L / ds)), sig = -F.o, a0 = F.fade * vis;\n  tint(F);\n  const { ta, tb } = F, fr = sp[12] * ta + tb[0], fg = sp[13] * ta + tb[1], fb = sp[14] * ta + tb[2];\n  let x = F.x, y = F.y, th = F.th0;\n  // The rachis: a log spiral above the unrolling front, whose curl relaxes to an arch below it.\n  for (let i = 0; i \u003c= n; i++) {\n    const s = i * ds, u = s / F.L, w = s > F.f ? sm((s - F.f) / 5) : 0;\n    (RX[i] = x), (RY[i] = y), (RT[i] = th), (RW[i] = w);\n    th += ((w * sig) / (F.k * (F.L - s) + 0.7) + (1 - w) * ((F.o * F.arch * 5 * u * u * u * u) / F.L + (F.wind * 2 * u * cos(th)) / F.L)) * ds;\n    x += sin(th) * ds;\n    y -= cos(th) * ds;\n    const gy = P.gnd[cl(round(x), 0, W - 1)] + 1;\n    if (y > gy) y = gy;\n  }\n  // Pinnae, the ones nearest the coil still curled.\n  const sb = F.L * sp[18], np = max(4, round((F.Lf * (1 - sp[18])) / 3.8)), Pm = sp[19] * F.Lf, D = 0.24 * F.Lf, al = sp[27], lobe = 0.75;\n  for (let i = 0; i \u003c np; i++) {\n    const u = (i + 0.5) / np, s = sb + (F.L - sb) * u;\n    if (s > F.f - 0.5) break;\n    const q = cl((F.f - s) / D, 0, 1), ii = round(s / ds), bu = sp[20];\n    const shape = u \u003c bu ? 0.1 + 0.9 * sin(((PI / 2) * u) / bu) : 0.06 + 0.94 * cos(((PI / 2) * (u - bu)) / (1 - bu)) ** 0.7;\n    const len = Pm * shape * (0.55 + 0.45 * q) * (1 - 0.3 * F.fall), m = cl(((F.f - s) / F.Lf) * 0.8 + (F.hp * 1.2) / sp[28], 0, 1);\n    // No two fronds quite the same green: some yellower, some bluer.\n    const r = mix(sp[0], sp[3], m) * ta * (1 + 0.22 * F.hv) + tb[0], g = mix(sp[1], sp[4], m) * ta + tb[1], b = mix(sp[2], sp[5], m) * ta * (1 - 0.3 * F.hv) + tb[2];\n    for (let sd = -1; sd \u003c 2; sd += 2) pinna(RX[ii], RY[ii], RT[ii] + sd * al * (0.45 + 0.55 * q), len, q, sd, r, g, b, a0, lobe);\n  }\n  // Rachis over them, swelling into the furred coil.\n  const rw = 0.45 + 0.35 * F.dep;\n  for (let i = 0; i \u003c= n; i++) {\n    const s = i * ds, u = s / F.L, w = RW[i], base = sm(1 - s / 10);\n    // The stalk is thin enough to draw every other step; the coil needs them all.\n    if (i & 1 && w === 0 && s \u003c F.f - 6) continue;\n    const rad = mix(rw * (1 - 0.6 * u), cl(0.17 * (F.k * (F.L - s) + 0.7), 0.5, 1.25), w);\n    const r = mix(mix(sp[6], sp[9], w), 96, base) * ta + tb[0], g = mix(mix(sp[7], sp[10], w), 70, base) * ta + tb[1], b = mix(mix(sp[8], sp[11], w), 40, base) * ta + tb[2];\n    disc(RX[i], RY[i], rad, r, g, b, a0);\n    // The scroll catches the light on its upper side.\n    if (w > 0.5 && i & 1) dot(RX[i] - rad * 0.35, RY[i] - rad * 0.5, r * 1.35 + 20, g * 1.3 + 16, b * 1.2 + 6, a0 * 0.45);\n    const ti = round((F.L - s) / ds);\n    if ((w > 0.1 || s > F.f - 6) && F.g \u003c 1 && hash(ti, F.seed) \u003c sp[24] * 0.9) {\n      const fo = -sig * (rad + 0.5 + hash(ti + 7, F.seed) * 0.9);\n      dot(RX[i] + cos(RT[i]) * fo, RY[i] + sin(RT[i]) * fo, fr, fg, fb, a0 * 0.85);\n    }\n  }\n}\n\n// Last year's fertile fronds stand stiff in the middle of a crown.\nfunction fertile(P, cx, dep) {\n  const sp = P.sp, hh = sp[26] * dep;\n  if (hh \u003c 3) return;\n  for (let m = 0; m \u003c 2; m++) {\n    let x = cx + (m ? 1.2 : -1), y = P.gnd[round(cx)] + 1, th = (m ? 0.1 : -0.12) + P.wind * 0.04;\n    const k = 0.5 + 0.5 * dep, hm = hh * (m ? 1 : 0.82);\n    for (let s = 0; s \u003c hm; s += 0.6) {\n      x += sin(th) * 0.6;\n      y -= cos(th) * 0.6;\n      dot(x, y, sp[15] * k * 0.7, sp[16] * k * 0.7, sp[17] * k * 0.7, 0.9);\n      if (s > hm * 0.3 && floor(s / 1.2) & 1) {\n        const lw = 0.7 + 1.4 * (1 - s / hm);\n        for (const sd of [-1, 1]) dot(x + sd * lw, y + 0.4, sp[15] * k, sp[16] * k, sp[17] * k, 0.85);\n      }\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { bg: new Float32Array(N * 3), buf: new Float32Array(N * 3), fa: new Uint8Array(N), fc: new Float32Array(N * 3), gnd: new Float32Array(W), gap: new Float32Array(256), dap: new Float32Array(128 * 64), hole: new Float32Array(18 * W), vis: new Float32Array(18), t: 0, off: 0, doff: 0, kf: -1, sn: 40, sp: FERNS[0] });\n  build(P);\n  P.slots = SLOT.map((c, j) => {\n    const cyc = CYC * (0.92 + 0.16 * rnd());\n    return { j, c, o: LEAN[j], cyc, off: OPEN[j] * cyc - 8, ph: rnd() * 7, z: CROWN[c][1] - rnd() * 0.14 };\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06], d0 = cl(dt, 0, 0.1);\n  const kf = cl(k[0], 0, 3), rate = cl(k[1], 0.2, 3) / 2, n = round(cl(k[2], 6, 18)), wind = cl(k[3], -1, 1);\n  if (kf !== P.kf) {\n    // Each fern holds over most of its stretch of the knob and turns into the next near the middle.\n    const i = min(2, floor(kf)), f = sm((kf - i) * 2.5 - 0.75);\n    P.sp = FERNS[i].map((v, c) => mix(v, FERNS[i + 1][c], f));\n    P.kf = kf;\n  }\n  // The world clock starts further in the faster the time-lapse runs.\n  if (!P.t) {\n    P.t = 6 * rate;\n    for (let j = 0; j \u003c n; j++) P.vis[j] = 1;\n  }\n  const d = d0 * rate;\n  P.t += d;\n  P.wind = wind;\n  // The sun crosses and the canopy sways: the shafts slide, the dapple shivers.\n  P.off += d * (2.2 + 9 * abs(wind)) * (wind \u003c -0.05 ? -1 : 1);\n  P.doff = P.t * (1 + 6 * abs(wind)) * (wind \u003c -0.05 ? 1 : -1) + 2 * sin(P.t * 1.7);\n  for (let j = 0; j \u003c 18; j++) P.vis[j] = cl(P.vis[j] + (j \u003c n ? 2 : -2) * d0, 0, 1);\n  P.sn += d * 1.4 * (wind \u003c -0.05 ? -1 : 1);\n  if (P.sn > 70) P.sn = -12;\n  if (P.sn \u003c -12) P.sn = 70;\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, gnd, fa, fc } = P;\n  BUF = buf;\n  buf.set(P.bg);\n  const on = [0, 0, 0, 0, 0];\n  for (const S of P.slots) if (P.vis[S.j] > 0) on[S.c] = 1;\n  for (let c = 4; c >= 0; c--) if (on[c]) fertile(P, CROWN[c][0], CROWN[c][1]);\n  // Open fronds first, so the croziers coming up in the middle of a crown stay in sight.\n  const fr = [];\n  for (const S of P.slots) {\n    const F = P.vis[S.j] > 0 && frondAt(P, S);\n    if (F) (F.vis = P.vis[S.j]), (F.key = S.z + (F.g \u003c 1) * 0.3 - F.fall * 0.2), fr.push(F);\n  }\n  for (const F of fr.sort((a, b) => a.key - b.key)) frond(P, F, F.vis);\n  for (let p = 100 * W, o = p * 3; p \u003c N; p++, o += 3) if (fa[p]) (buf[o] = fc[o]), (buf[o + 1] = fc[o + 1]), (buf[o + 2] = fc[o + 2]);\n  // Wood anemones nodding in the breeze.\n  for (const [ax, ah, ph] of P.anem) {\n    const sw = P.wind * 1.6 + 0.5 * sin(P.t * 1.6 + ph);\n    let x = ax, y = round(gnd[ax]) + 1;\n    for (let j = 0; j \u003c ah; j++) {\n      (x += (sw * j) / ah / ah), y--, px(round(x), y, 70, 110, 44, 1);\n      // The ruff of three cut leaves halfway up the stalk.\n      if (j === 2) for (const dx of [-2, -1, 1, 2]) px(round(x) + dx, y + (abs(dx) > 1), 58, 112, 40, 0.9);\n    }\n    const fx = round(x + sw * 0.4), fy = y - 1;\n    for (const [dx, dy, l] of [[0, 0, 1], [-1, 0, 0.9], [1, 0, 0.9], [0, -1, 0.85], [-1, -1, 0.5], [1, -1, 0.5], [0, 1, 0.6]]) px(fx + dx, fy + dy, 236 * l, 236 * l, 226 * l, 1);\n    px(fx, fy, 240, 210, 70, 1);\n  }\n  // The snail, quick in the time-lapse.\n  const sx = round(P.sn), sy = round(gnd[cl(sx + 4, 0, W - 1)]) - 4, f = P.wind \u003c -0.05 ? -1 : 1;\n  SNAIL.forEach((row, r) => {\n    for (let c = 0; c \u003c 10; c++) {\n      const col = SNC[row[c]];\n      if (col) px(f > 0 ? sx + c : sx + 9 - c, sy + r, col[0], col[1], col[2], 1);\n    }\n  });\n  // Motes in the shafts.\n  for (const [mx, my, ph] of P.mote) {\n    const x = (((mx + P.t * 0.7 + 3 * sin(P.t * 0.3 + ph)) % 64) + 64) % 64, y = (my + 110 - ((P.t * 1.1 + ph * 9) % 110)) % 110;\n    const l = P.gap[floor(x + y * 0.42 - P.off) & 255];\n    if (l > 0.3) dot(x, y, 255, 236, 180, l * 0.6);\n  }\n  show(display, P);\n}\n\n// To the panel, under the light that gets through the canopy.\nfunction show(display, { buf, gap, dap, off, doff, hole }) {\n  const o0 = floor(doff);\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    const hz = 0.5 * (1 - y / 150), dr = ((y >> 1) & 63) * 128;\n    for (let x = 0; x \u003c W; x++, p++) {\n      const u = x + y * 0.42 - off, ui = floor(u), f = u - ui, s = gap[ui & 255] * (1 - f) + gap[(ui + 1) & 255] * f;\n      const l = s * (0.4 + 0.6 * dap[dr + ((x + o0) & 127)]), m = 0.78 + 0.75 * l, o = p * 3, sky = y \u003c 18 ? hole[p] * (0.25 + s) * 150 : 0;\n      const r = buf[o] * m * (1 + 0.08 * l) + 34 * s * hz + sky, g = buf[o + 1] * m + 30 * s * hz + sky * 1.08, b = buf[o + 2] * m * (1 - 0.1 * l) + 16 * s * hz + sky * 0.9;\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n  }\n}\n","layer":{"id":"layer-fiddlehead","type":"code","name":"fiddlehead","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Fiddlehead\n// Family:  growth\n// Idea:    A spring time-lapse on a woodland floor: furred fern croziers push up through last year's leaves and unroll from the bottom up into tall arching fronds, each side leaflet uncurling from its own little spiral, while old fronds brown and fall back and light through the canopy slides over them.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after time-lapse films of ostrich fern croziers unrolling in spring\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Fern=0..3, Speed=0.2..3, Fronds=6..18, Breeze=-1..1\n//\n// Knob 1: Fern. Ostrich fern at 0, a shuttlecock of bright green round last year's brown fertile fronds; cinnamon fern at 1 with white-woolly croziers; bracken at 2, broad blades tipped flat on tall stalks; autumn fern at 3, whose new fronds come up copper-red and green as they age.\n// Knob 2: Speed. How fast the time-lapse runs: at 2 a crozier takes about thirteen seconds to unroll and a frond lives about half a minute; at 0.2 it creeps.\n// Knob 3: Fronds. How many fronds there are, six in one crown at 6, then a crown either side, then two more crowns further back in the shade at 18.\n// Knob 4: Breeze. Near still at 0.06; turned either way the fronds lean and sway that way and the sunflecks from the canopy slide across faster.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Each fern: young leaf, grown leaf, rachis, crozier, fur, fertile frond (rgb), then the\n// share of stalk below the blade, pinna length, where the blade is widest, lean, arch,\n// coil tightness, fur, how far a crown spreads, fertile frond height, pinna angle, and\n// how slowly the young colour greens.\nconst FERNS = [\n  [160, 226, 70, 44, 150, 48, 104, 164, 60, 104, 178, 58, 196, 140, 84, 92, 58, 36, 0.2, 0.13, 0.62, 0.3, 1.5, 0.15, 0.5, 4, 30, 1.05, 0.5],\n  [184, 220, 100, 92, 178, 58, 150, 176, 96, 140, 150, 110, 236, 226, 210, 200, 106, 40, 0.3, 0.12, 0.45, 0.17, 0.9, 0.17, 1, 2.5, 40, 1.15, 0.5],\n  [130, 184, 80, 44, 124, 70, 128, 156, 84, 90, 122, 60, 190, 178, 156, 0, 0, 0, 0.46, 0.2, 0.04, 0.08, 1.6, 0.11, 0.7, 9, 0, 1.2, 0.5],\n  [238, 108, 50, 66, 140, 54, 164, 96, 54, 130, 62, 34, 64, 40, 28, 0, 0, 0, 0.26, 0.15, 0.3, 0.28, 1.15, 0.15, 0.8, 2, 0, 1.0, 1.4],\n];\n// A frond's life in world seconds at Speed 2: coming up, unrolling, standing, falling, gone.\nconst [EM, UN, HO, FA, GP] = [2, 13, 7, 4, 1];\nconst CYC = EM + UN + HO + FA + GP;\n// Crowns as x and depth, and which crown each slot belongs to in the order Fronds adds them.\nconst CROWN = [[32, 1], [10, 0.93], [54, 0.93], [21, 0.72], [43, 0.72]];\nconst SLOT = [0, 0, 0, 0, 0, 0, 1, 2, 1, 2, 1, 2, 3, 4, 3, 4, 3, 4];\n// Which way each slot leans: the side crowns lean in over the middle, mostly.\nconst LEAN = [-1, 1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, -1, 1, 1, -1, -1, 1];\n// Where in its life each frond is at 2 s: the front crown has one of each, the others are\n// mostly up, so turning Fronds at the start shows.\nconst OPEN = [0.02, 0.146, 0.267, 0.41, 0.59, 0.7, 0.62, 0.45, 0.7, 0.3, 0.76, 0.52, 0.65, 0.4, 0.58, 0.3, 0.72, 0.5];\nconst SEN = [[204, 176, 64], [132, 74, 36]];\nconst HAZE = [34, 52, 44];\nconst MAXS = 340;\n// A snail on the litter, facing right: shell light and dark, body, eye stalks.\nconst SNAIL = [\"..sss.....\", \".sSSSs.t.t\", \".sSsSs..bB\", \".sSssBBBBB\", \"bBBBBBBBBb\"];\nconst SNC = { S: [176, 128, 70], s: [96, 62, 34], B: [150, 140, 118], b: [110, 100, 86], t: [70, 62, 54] };\nconst RX = new Float32Array(MAXS), RY = new Float32Array(MAXS), RT = new Float32Array(MAXS), RW = new Float32Array(MAXS);\n\nfunction build(P) {\n  const { bg, gnd } = P;\n  for (let x = 0; x \u003c W; x++) gnd[x] = 110 + 3 * vn(x * 0.11, 5.5) + 1.6 * vn(x * 0.37, 2.2);\n  // The wood behind: dark under the canopy, hazier and warmer near the floor.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, v = cl(y / 112, 0, 1) ** 1.6, f = vn(x * 0.09, y * 0.06) * 0.6 + vn(x * 0.27, y * 0.19) * 0.4;\n    const k = 0.72 + 0.55 * f;\n    bg.set([mix(20, 44, v) * k, mix(40, 54, v) * k, mix(38, 38, v) * k], p * 3);\n  }\n  // Beech trunks, smooth and grey, lit from the right; the far ones go into the haze.\n  for (const [tx, tw, z] of [[3, 8, 1], [47, 4.5, 0.62], [60, 3, 0.45]])\n    for (let y = 0; y \u003c 116; y++)\n      for (let x = floor(tx - tw / 2); x \u003c= tx + tw / 2; x++) {\n        if (x \u003c 0 || x >= W || y > gnd[x] + 1) continue;\n        const n = (x - tx) / (tw / 2), l = (0.55 + 0.4 * n) * (0.85 + 0.25 * vn(x * 0.8, y * 0.05)) * (y > gnd[x] - 8 ? 0.8 : 1);\n        const moss = y > gnd[x] - 6 - 4 * vn(x, 9) ? 1 : 0, o = (y * W + x) * 3;\n        const c = moss ? [52, 92, 34] : [84, 86, 78];\n        for (let i = 0; i \u003c 3; i++) bg[o + i] = mix(bg[o + i], mix(c[i] * l, HAZE[i], 1 - z), 0.9);\n      }\n  // The canopy overhead, with holes the shafts come through.\n  for (let p = 0; p \u003c 18 * W; p++) {\n    const x = p & 63, y = p >> 6, h = sm((vn(x / 4, y / 3 + 50) * 0.7 + vn(x / 1.7, y / 1.4 + 70) * 0.3 - 0.52) * 5), a = (1 - h) * sm((17 - y - 7 * vn(x / 5, 3.3)) / 4), k = 0.6 + 0.7 * vn(x / 1.6, y / 1.3);\n    P.hole[p] = h * (1 - y / 18);\n    for (let i = 0; i \u003c 3; i++) bg[p * 3 + i] = mix(bg[p * 3 + i], [16, 34, 20][i] * k, a);\n  }\n  // Last year's leaves: beech copper, oak brown, pale skeletons and dark wet ones.\n  const LC = [[124, 76, 40], [98, 62, 34], [140, 110, 74], [66, 44, 30], [96, 84, 70], [130, 90, 48]];\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, d = y - gnd[x];\n    if (d >= 0) bg.set([44 - d * 0.6, 28 - d * 0.4, 18 - d * 0.2], p * 3);\n  }\n  const leaf = (cx, cy, a, rx, ry, c, put) => {\n    const ca = cos(a), sa = sin(a), t = 0.8 + rnd() * 0.35;\n    for (let y = floor(cy - rx); y \u003c= cy + rx; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const dx = x - cx, dy = y - cy, u = (dx * ca + dy * sa) / rx, v = (-dx * sa + dy * ca) / ry, r = u * u + v * v * (1 + 0.6 * u);\n        if (r > 1 || x \u003c 0 || x >= W || y >= H) continue;\n        const k = t * (abs(v) \u003c 0.22 && abs(u) \u003c 0.85 ? 0.7 : r > 0.65 ? 0.78 : 1) * (1 + 0.15 * u);\n        put(x, y, c[0] * k, c[1] * k, c[2] * k);\n      }\n  };\n  const putBg = (x, y, r, g, b) => y >= gnd[x] - 1 && bg.set([r, g, b], (y * W + x) * 3);\n  for (let n = 0; n \u003c 170; n++) {\n    const cx = rnd() * 68 - 2, top = gnd[cl(round(cx), 0, W - 1)];\n    leaf(cx, top + rnd() * (H - top + 2) - 0.5, rnd() * PI, 2 + rnd() * 1.8, 1.1 + rnd() * 0.8, LC[floor(rnd() * 6)], putBg);\n  }\n  // Moss cushions and twigs.\n  for (let n = 0; n \u003c 7; n++) {\n    const cx = rnd() * 64, cy = gnd[floor(cx)] + 2 + rnd() * 12, r = 1.5 + rnd() * 2.5;\n    for (let y = floor(cy - r); y \u003c= cy + r; y++)\n      for (let x = floor(cx - r); x \u003c= cx + r; x++)\n        if (x >= 0 && x \u003c W && y \u003c H && hypot(x - cx, (y - cy) * 1.4) \u003c r && hash(x, y) \u003c 0.85) {\n          const k = 0.7 + 0.5 * hash(y, x);\n          bg.set([50 * k, 104 * k, 36 * k], (y * W + x) * 3);\n        }\n  }\n  for (let n = 0; n \u003c 7; n++) {\n    let x = rnd() * 64, y = gnd[floor(x)] + 1 + rnd() * 14;\n    const a = (rnd() - 0.5) * 0.8, dir = rnd() \u003c 0.5 ? -1 : 1;\n    for (let i = 0, len = 6 + rnd() * 12; i \u003c len; i++, x += dir * cos(a), y += sin(a)) {\n      const xi = round(x), yi = round(y);\n      if (xi >= 0 && xi \u003c W && yi \u003c H) bg.set([62, 46, 36], (yi * W + xi) * 3);\n    }\n  }\n  // Last year's fronds, flattened and rusty on top of the leaves.\n  for (const [sx, dir, len] of [[6, 1, 24], [58, -1, 20], [36, -1, 16]]) {\n    for (let i = 0; i \u003c len; i++) {\n      const x = sx + dir * i, y = round(gnd[cl(x, 0, W - 1)] + 2 + i * 0.12);\n      if (x \u003c 0 || x >= W) continue;\n      bg.set([96, 58, 32], (y * W + x) * 3);\n      if (i % 2 && i \u003c len - 2) for (const s of [-1, 1]) for (let j = 1; j \u003c 4 - i / len * 2; j++) {\n        const px = x + dir * j * 0.6, py = y + s * j;\n        if (px >= 0 && px \u003c W && py \u003c H) bg.set([124, 72, 36], (round(py) * W + round(px)) * 3);\n      }\n    }\n  }\n  // Leaves in front of the crowns, laid over the stalks where they come out.\n  const fa = P.fa, fc = P.fc;\n  for (let n = 0; n \u003c 26; n++) {\n    const cx = CROWN[n % 5][0] + (rnd() - 0.5) * 16, top = gnd[cl(round(cx), 0, W - 1)];\n    leaf(cx, top + 1 + rnd() * 2.5, (rnd() - 0.5) * 0.9, 2 + rnd() * 1.5, 1 + rnd() * 0.6, LC[floor(rnd() * 6)], (x, y, r, g, b) => {\n      fa[y * W + x] = 1;\n      fc.set([r, g, b], (y * W + x) * 3);\n    });\n  }\n  // Canopy gaps: the shafts one way, the dapple in them the other.\n  for (let n = 0; n \u003c 12; n++) {\n    const c = n * 21.3 + rnd() * 12, w = 2.5 + rnd() * 5, a = 0.5 + rnd() * 0.5;\n    for (let i = 0; i \u003c 256; i++) P.gap[i] = min(1, P.gap[i] + a * Math.exp(-(((((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n  for (let i = 0; i \u003c 128 * 64; i++) P.dap[i] = sm((vn((i & 127) / 7, (i >> 7) / 5) * 0.7 + vn((i & 127) / 3, (i >> 7) / 2.5 + 30) * 0.3 - 0.3) * 2.2);\n  P.anem = [[15, 6], [18, 8], [21, 5], [45, 5], [48, 7], [58, 6]].map(([x, h]) => [x, h, rnd() * 7]);\n  P.mote = Array.from({ length: 16 }, () => [rnd() * 64, rnd() * 110, rnd() * 7]);\n}\n\nlet BUF;\nfunction px(x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  const o = (y * W + x) * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\n// A soft dot over four LEDs, so a curve moving a fraction of an LED still moves.\nfunction dot(x, y, r, g, b, a) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi;\n  if (xi \u003c 0 || xi > W - 2 || yi \u003c 0 || yi > H - 2) {\n    px(xi, yi, r, g, b, a * (1 - fx) * (1 - fy));\n    px(xi + 1, yi, r, g, b, a * fx * (1 - fy));\n    px(xi, yi + 1, r, g, b, a * (1 - fx) * fy);\n    return px(xi + 1, yi + 1, r, g, b, a * fx * fy);\n  }\n  const B = BUF;\n  for (let k = 0, o = (yi * W + xi) * 3; k \u003c 4; k++) {\n    const w = a * (k & 1 ? fx : 1 - fx) * (k & 2 ? fy : 1 - fy), q = o + (k & 1 ? 3 : 0) + (k & 2 ? W * 3 : 0);\n    if (w > 0.02) (B[q] += (r - B[q]) * w), (B[q + 1] += (g - B[q + 1]) * w), (B[q + 2] += (b - B[q + 2]) * w);\n  }\n}\nfunction disc(x, y, rad, r, g, b, a) {\n  if (rad \u003c 0.75) return dot(x, y, r, g, b, a);\n  for (let yy = floor(y - rad); yy \u003c= y + rad + 1; yy++)\n    for (let xx = floor(x - rad); xx \u003c= x + rad + 1; xx++) {\n      const d2 = (xx - x) ** 2 + (yy - y) ** 2;\n      if (d2 \u003c (rad + 0.5) ** 2) px(xx, yy, r, g, b, a * min(1, rad + 0.5 - sqrt(d2)));\n    }\n}\n\n// Where a slot is in its life now, and the frond's shape from that.\nfunction frondAt(P, S) {\n  const sp = P.sp, T = P.t + S.off, c = floor(T / S.cyc), a = ((T - c * S.cyc) / S.cyc) * CYC;\n  if (a >= EM + UN + HO + FA) return null;\n  const h = (m) => hash(S.j * 13 + m, c + 977), cx = CROWN[S.c][0], dep = S.z;\n  const Lf = (dep > 0.86 ? 104 : 86) * (0.84 + 0.26 * h(1)), x = cx + (h(2) - 0.5) * 2 * sp[25];\n  const stipe = 5 + Lf * 0.05, C0 = Lf * 0.5;\n  let U, C, g = 1, fall = 0, sen = 0, fade = 1;\n  if (a \u003c EM) {\n    const e = a / EM;\n    [g, U, C] = [0, stipe * e, C0 * (0.4 + 0.6 * e)];\n  } else if (a \u003c EM + UN) {\n    g = (a - EM) / UN;\n    [U, C] = [stipe + (Lf - stipe) * g ** 1.25, C0 * (1 - g) ** 0.8];\n  } else {\n    [U, C] = [Lf, 0];\n    const ph = (a - EM - UN - HO) / FA;\n    // It yellows and browns where it stands, then folds down onto the litter and fades into it.\n    if (ph > 0) [fall, sen, fade] = [sm((ph - 0.3) / 0.55), sm(ph * 2), 1 - sm((ph - 0.7) / 0.3)];\n  }\n  const lean = sp[21] * (0.55 + 0.8 * h(3)) * (S.c ? 1.2 : 1);\n  const wind = P.wind * 1.1 + (0.16 + 0.3 * abs(P.wind)) * sin(P.t * 1.3 + S.ph) + 0.1 * sin(P.t * 0.37 + S.c);\n  return {\n    x, y: P.gnd[cl(round(x), 0, W - 1)] + 0.5, o: S.o, th0: S.o * (lean + 1.5 * fall), L: U + C, f: U, Lf, dep, g, fall, sen, fade, wind,\n    k: sp[23] * (0.9 + 0.2 * h(4)), arch: sp[22] * (0.7 + 0.5 * h(5)) * sm(g * 1.3 - 0.1) * (1 + 0.6 * fall),\n    hp: a \u003c EM + UN ? 0 : min(1, (a - EM - UN) / HO), seed: S.j * 31 + c, hv: h(6) * 2 - 1,\n  };\n}\n\n// A frond's colours are c * ta + tb: browning as it dies, darker and hazier further back.\nfunction tint(F) {\n  const s = F.sen, k = 0.48 + 0.52 * F.dep, z = (1 - F.dep) * 0.5;\n  F.ta = (s \u003c 0.5 ? 1 - s * 2 : 0) * k * (1 - z);\n  F.tb = HAZE.map((hz, i) => (s \u003c 0.5 ? s * 2 * SEN[0][i] : mix(SEN[0][i], SEN[1][i], s * 2 - 1)) * k * (1 - z) + hz * z);\n}\n\n// One pinna: straight for the share that has opened, then its own little spiral.\nfunction pinna(x, y, th, len, q, sd, r, g, b, a, lobe) {\n  const st = 0.75, open = len * q, n = ceil(len / st);\n  for (let j = 1; j \u003c= n; j++) {\n    const s = j * st, w = s > open ? sm((s - open) / 1.5) : 0;\n    th -= sd * (w / (0.2 * (len - s) + 0.5) + 0.03) * st;\n    x += sin(th) * st;\n    y -= cos(th) * st;\n    px(round(x), round(y), r, g, b, a);\n    // Pinnules: a lobe either side in turn, gone towards the tip.\n    if (j & 1 && w \u003c 0.5 && s \u003c len * lobe) {\n      const e = j & 2 ? sd : -sd;\n      px(round(x - e * cos(th)), round(y - e * sin(th)), r * 0.8, g * 0.85, b * 0.8, a * 0.55);\n    }\n  }\n}\n\nfunction frond(P, F, vis) {\n  const sp = P.sp, ds = 0.5, n = min(MAXS - 1, ceil(F.L / ds)), sig = -F.o, a0 = F.fade * vis;\n  tint(F);\n  const { ta, tb } = F, fr = sp[12] * ta + tb[0], fg = sp[13] * ta + tb[1], fb = sp[14] * ta + tb[2];\n  let x = F.x, y = F.y, th = F.th0;\n  // The rachis: a log spiral above the unrolling front, whose curl relaxes to an arch below it.\n  for (let i = 0; i \u003c= n; i++) {\n    const s = i * ds, u = s / F.L, w = s > F.f ? sm((s - F.f) / 5) : 0;\n    (RX[i] = x), (RY[i] = y), (RT[i] = th), (RW[i] = w);\n    th += ((w * sig) / (F.k * (F.L - s) + 0.7) + (1 - w) * ((F.o * F.arch * 5 * u * u * u * u) / F.L + (F.wind * 2 * u * cos(th)) / F.L)) * ds;\n    x += sin(th) * ds;\n    y -= cos(th) * ds;\n    const gy = P.gnd[cl(round(x), 0, W - 1)] + 1;\n    if (y > gy) y = gy;\n  }\n  // Pinnae, the ones nearest the coil still curled.\n  const sb = F.L * sp[18], np = max(4, round((F.Lf * (1 - sp[18])) / 3.8)), Pm = sp[19] * F.Lf, D = 0.24 * F.Lf, al = sp[27], lobe = 0.75;\n  for (let i = 0; i \u003c np; i++) {\n    const u = (i + 0.5) / np, s = sb + (F.L - sb) * u;\n    if (s > F.f - 0.5) break;\n    const q = cl((F.f - s) / D, 0, 1), ii = round(s / ds), bu = sp[20];\n    const shape = u \u003c bu ? 0.1 + 0.9 * sin(((PI / 2) * u) / bu) : 0.06 + 0.94 * cos(((PI / 2) * (u - bu)) / (1 - bu)) ** 0.7;\n    const len = Pm * shape * (0.55 + 0.45 * q) * (1 - 0.3 * F.fall), m = cl(((F.f - s) / F.Lf) * 0.8 + (F.hp * 1.2) / sp[28], 0, 1);\n    // No two fronds quite the same green: some yellower, some bluer.\n    const r = mix(sp[0], sp[3], m) * ta * (1 + 0.22 * F.hv) + tb[0], g = mix(sp[1], sp[4], m) * ta + tb[1], b = mix(sp[2], sp[5], m) * ta * (1 - 0.3 * F.hv) + tb[2];\n    for (let sd = -1; sd \u003c 2; sd += 2) pinna(RX[ii], RY[ii], RT[ii] + sd * al * (0.45 + 0.55 * q), len, q, sd, r, g, b, a0, lobe);\n  }\n  // Rachis over them, swelling into the furred coil.\n  const rw = 0.45 + 0.35 * F.dep;\n  for (let i = 0; i \u003c= n; i++) {\n    const s = i * ds, u = s / F.L, w = RW[i], base = sm(1 - s / 10);\n    // The stalk is thin enough to draw every other step; the coil needs them all.\n    if (i & 1 && w === 0 && s \u003c F.f - 6) continue;\n    const rad = mix(rw * (1 - 0.6 * u), cl(0.17 * (F.k * (F.L - s) + 0.7), 0.5, 1.25), w);\n    const r = mix(mix(sp[6], sp[9], w), 96, base) * ta + tb[0], g = mix(mix(sp[7], sp[10], w), 70, base) * ta + tb[1], b = mix(mix(sp[8], sp[11], w), 40, base) * ta + tb[2];\n    disc(RX[i], RY[i], rad, r, g, b, a0);\n    // The scroll catches the light on its upper side.\n    if (w > 0.5 && i & 1) dot(RX[i] - rad * 0.35, RY[i] - rad * 0.5, r * 1.35 + 20, g * 1.3 + 16, b * 1.2 + 6, a0 * 0.45);\n    const ti = round((F.L - s) / ds);\n    if ((w > 0.1 || s > F.f - 6) && F.g \u003c 1 && hash(ti, F.seed) \u003c sp[24] * 0.9) {\n      const fo = -sig * (rad + 0.5 + hash(ti + 7, F.seed) * 0.9);\n      dot(RX[i] + cos(RT[i]) * fo, RY[i] + sin(RT[i]) * fo, fr, fg, fb, a0 * 0.85);\n    }\n  }\n}\n\n// Last year's fertile fronds stand stiff in the middle of a crown.\nfunction fertile(P, cx, dep) {\n  const sp = P.sp, hh = sp[26] * dep;\n  if (hh \u003c 3) return;\n  for (let m = 0; m \u003c 2; m++) {\n    let x = cx + (m ? 1.2 : -1), y = P.gnd[round(cx)] + 1, th = (m ? 0.1 : -0.12) + P.wind * 0.04;\n    const k = 0.5 + 0.5 * dep, hm = hh * (m ? 1 : 0.82);\n    for (let s = 0; s \u003c hm; s += 0.6) {\n      x += sin(th) * 0.6;\n      y -= cos(th) * 0.6;\n      dot(x, y, sp[15] * k * 0.7, sp[16] * k * 0.7, sp[17] * k * 0.7, 0.9);\n      if (s > hm * 0.3 && floor(s / 1.2) & 1) {\n        const lw = 0.7 + 1.4 * (1 - s / hm);\n        for (const sd of [-1, 1]) dot(x + sd * lw, y + 0.4, sp[15] * k, sp[16] * k, sp[17] * k, 0.85);\n      }\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { bg: new Float32Array(N * 3), buf: new Float32Array(N * 3), fa: new Uint8Array(N), fc: new Float32Array(N * 3), gnd: new Float32Array(W), gap: new Float32Array(256), dap: new Float32Array(128 * 64), hole: new Float32Array(18 * W), vis: new Float32Array(18), t: 0, off: 0, doff: 0, kf: -1, sn: 40, sp: FERNS[0] });\n  build(P);\n  P.slots = SLOT.map((c, j) => {\n    const cyc = CYC * (0.92 + 0.16 * rnd());\n    return { j, c, o: LEAN[j], cyc, off: OPEN[j] * cyc - 8, ph: rnd() * 7, z: CROWN[c][1] - rnd() * 0.14 };\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06], d0 = cl(dt, 0, 0.1);\n  const kf = cl(k[0], 0, 3), rate = cl(k[1], 0.2, 3) / 2, n = round(cl(k[2], 6, 18)), wind = cl(k[3], -1, 1);\n  if (kf !== P.kf) {\n    // Each fern holds over most of its stretch of the knob and turns into the next near the middle.\n    const i = min(2, floor(kf)), f = sm((kf - i) * 2.5 - 0.75);\n    P.sp = FERNS[i].map((v, c) => mix(v, FERNS[i + 1][c], f));\n    P.kf = kf;\n  }\n  // The world clock starts further in the faster the time-lapse runs.\n  if (!P.t) {\n    P.t = 6 * rate;\n    for (let j = 0; j \u003c n; j++) P.vis[j] = 1;\n  }\n  const d = d0 * rate;\n  P.t += d;\n  P.wind = wind;\n  // The sun crosses and the canopy sways: the shafts slide, the dapple shivers.\n  P.off += d * (2.2 + 9 * abs(wind)) * (wind \u003c -0.05 ? -1 : 1);\n  P.doff = P.t * (1 + 6 * abs(wind)) * (wind \u003c -0.05 ? 1 : -1) + 2 * sin(P.t * 1.7);\n  for (let j = 0; j \u003c 18; j++) P.vis[j] = cl(P.vis[j] + (j \u003c n ? 2 : -2) * d0, 0, 1);\n  P.sn += d * 1.4 * (wind \u003c -0.05 ? -1 : 1);\n  if (P.sn > 70) P.sn = -12;\n  if (P.sn \u003c -12) P.sn = 70;\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, gnd, fa, fc } = P;\n  BUF = buf;\n  buf.set(P.bg);\n  const on = [0, 0, 0, 0, 0];\n  for (const S of P.slots) if (P.vis[S.j] > 0) on[S.c] = 1;\n  for (let c = 4; c >= 0; c--) if (on[c]) fertile(P, CROWN[c][0], CROWN[c][1]);\n  // Open fronds first, so the croziers coming up in the middle of a crown stay in sight.\n  const fr = [];\n  for (const S of P.slots) {\n    const F = P.vis[S.j] > 0 && frondAt(P, S);\n    if (F) (F.vis = P.vis[S.j]), (F.key = S.z + (F.g \u003c 1) * 0.3 - F.fall * 0.2), fr.push(F);\n  }\n  for (const F of fr.sort((a, b) => a.key - b.key)) frond(P, F, F.vis);\n  for (let p = 100 * W, o = p * 3; p \u003c N; p++, o += 3) if (fa[p]) (buf[o] = fc[o]), (buf[o + 1] = fc[o + 1]), (buf[o + 2] = fc[o + 2]);\n  // Wood anemones nodding in the breeze.\n  for (const [ax, ah, ph] of P.anem) {\n    const sw = P.wind * 1.6 + 0.5 * sin(P.t * 1.6 + ph);\n    let x = ax, y = round(gnd[ax]) + 1;\n    for (let j = 0; j \u003c ah; j++) {\n      (x += (sw * j) / ah / ah), y--, px(round(x), y, 70, 110, 44, 1);\n      // The ruff of three cut leaves halfway up the stalk.\n      if (j === 2) for (const dx of [-2, -1, 1, 2]) px(round(x) + dx, y + (abs(dx) > 1), 58, 112, 40, 0.9);\n    }\n    const fx = round(x + sw * 0.4), fy = y - 1;\n    for (const [dx, dy, l] of [[0, 0, 1], [-1, 0, 0.9], [1, 0, 0.9], [0, -1, 0.85], [-1, -1, 0.5], [1, -1, 0.5], [0, 1, 0.6]]) px(fx + dx, fy + dy, 236 * l, 236 * l, 226 * l, 1);\n    px(fx, fy, 240, 210, 70, 1);\n  }\n  // The snail, quick in the time-lapse.\n  const sx = round(P.sn), sy = round(gnd[cl(sx + 4, 0, W - 1)]) - 4, f = P.wind \u003c -0.05 ? -1 : 1;\n  SNAIL.forEach((row, r) => {\n    for (let c = 0; c \u003c 10; c++) {\n      const col = SNC[row[c]];\n      if (col) px(f > 0 ? sx + c : sx + 9 - c, sy + r, col[0], col[1], col[2], 1);\n    }\n  });\n  // Motes in the shafts.\n  for (const [mx, my, ph] of P.mote) {\n    const x = (((mx + P.t * 0.7 + 3 * sin(P.t * 0.3 + ph)) % 64) + 64) % 64, y = (my + 110 - ((P.t * 1.1 + ph * 9) % 110)) % 110;\n    const l = P.gap[floor(x + y * 0.42 - P.off) & 255];\n    if (l > 0.3) dot(x, y, 255, 236, 180, l * 0.6);\n  }\n  show(display, P);\n}\n\n// To the panel, under the light that gets through the canopy.\nfunction show(display, { buf, gap, dap, off, doff, hole }) {\n  const o0 = floor(doff);\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    const hz = 0.5 * (1 - y / 150), dr = ((y >> 1) & 63) * 128;\n    for (let x = 0; x \u003c W; x++, p++) {\n      const u = x + y * 0.42 - off, ui = floor(u), f = u - ui, s = gap[ui & 255] * (1 - f) + gap[(ui + 1) & 255] * f;\n      const l = s * (0.4 + 0.6 * dap[dr + ((x + o0) & 127)]), m = 0.78 + 0.75 * l, o = p * 3, sky = y \u003c 18 ? hole[p] * (0.25 + s) * 150 : 0;\n      const r = buf[o] * m * (1 + 0.08 * l) + 34 * s * hz + sky, g = buf[o + 1] * m + 30 * s * hz + sky * 1.08, b = buf[o + 2] * m * (1 - 0.1 * l) + 16 * s * hz + sky * 0.9;\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Fern=0..3, Speed=0.2..3, Fronds=6..18, Breeze=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Fern","min":0,"max":3,"about":"Ostrich fern at 0, a shuttlecock of bright green round last year's brown fertile fronds; cinnamon fern at 1 with white-woolly croziers; bracken at 2, broad blades tipped flat on tall stalks; autumn fern at 3, whose new fronds come up copper-red and green as they age."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the time-lapse runs: at 2 a crozier takes about thirteen seconds to unroll and a frond lives about half a minute; at 0.2 it creeps."},{"name":"Fronds","min":6,"max":18,"about":"How many fronds there are, six in one crown at 6, then a crown either side, then two more crowns further back in the shade at 18."},{"name":"Breeze","min":-1,"max":1,"about":"Near still at 0.06; turned either way the fronds lean and sway that way and the sunflecks from the canopy slide across faster."}],"start":[0,2,6,0.06],"measures":{"motion":0.2772,"detail":0.0937,"edges":0.4428,"complexity":2.2973,"coverage":0.9858,"colour":0.1938,"drift":0.0784},"knobResponse":[0.0694,0.0969,0.0478,0.0882]},{"slug":"final-approach","title":"Final Approach","family":"flight","round":23,"note":"밤에 내려앉는 여객기 조종석에서 앞을 봐요. 활주로 등과 진입등이 도시 불빛이 깔린 지평선 아래로 모이고, 래빗 섬광등이 1초에 두 번 활주로 쪽으로 달려가요. 왼쪽 PAPI 가 흰 둘 빨강 둘을 보이다가, 플레어와 접지 뒤에는 중심선 등이 발밑으로 쏟아져 지나가요. K1 을 누르면 복행해요.","idea":"From an airliner cockpit on a night landing, the runway and its approach lights converge high on the panel under a town glowing on the horizon, then stream toward the windscreen and under it with the rabbit racing ahead and the PAPI showing two white over two red, through the flare and the rollout, before the next approach begins far out.","buttons":"K1 tap goes around: the nose comes up and the lights drop away below, then the airliner banks off and comes round for a new approach.","code":"// ===== Patternflow pattern =====\n// Title:   Final Approach\n// Family:  flight\n// Idea:    From an airliner cockpit on a night landing, the runway and its approach lights converge high on the panel under a town glowing on the horizon, then stream toward the windscreen and under it with the rabbit racing ahead and the PAPI showing two white over two red, through the flare and the rollout, before the next approach begins far out.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the ALSF-2 approach lighting system\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Glow=0..1, Speed=0.2..3, Weather=0..3, Crosswind=-1..1\n//\n// Knob 1: Glow. The colour of the town's glow on the clouds and of the sodium lamps on the horizon: sodium amber at 0, turning through green and blue to violet and back to amber at 1.\n// Knob 2: Speed. How fast the airliner flies: at 2 an approach from far out to the end of the rollout takes about 18 s and the rabbit runs twice a second; at 0.2 everything runs ten times slower.\n// Knob 3: Weather. A clear night with broken cloud at 0, haze where every light blooms at 1, rain on the windscreen with the wiper going at 2, and fog at 3 where the approach lights come out of the murk late.\n// Knob 4: Crosswind. The airliner crabs into the wind from the left or the right, so the runway sits off to one side until it swings straight ahead at the flare.\n// Buttons: K1 tap goes around: the nose comes up and the lights drop away below, then the airliner banks off and comes round for a new approach.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, sin, cos, exp, sqrt, pow, floor, ceil, round, atan, log, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst rnd = () => Math.random();\n\n// The camera: focal length in LEDs, the screen centre, the eye height on the\n// runway in metres, and the horizon row on the approach.\nconst F = 150;\nconst CX = 31.5;\nconst CY = 64;\nconst HG = 8;\nconst Y0 = 32;\n// A 3 degree glide path comes down to eye height HG 320 m past the\n// threshold. The flare starts 8 m above that, and touchdown is where it ends.\nconst SLOPE = 0.0524;\nconst AIM = 320;\nconst PF = AIM - 8 / SLOPE;\nconst LF = 11 / SLOPE;\nconst TD = PF + LF * log(11 / 3);\n// Cloud base above the ground, and where a new approach starts.\nconst HC = 520;\nconst FAR = -2300;\n// The PAPI units from the runway outward, in degrees.\nconst PT = [3.5, 3.17, 2.83, 2.5];\n\nfunction eyeH(P) {\n  if (P \u003c PF) return HG + (AIM - P) * SLOPE;\n  if (P \u003c TD) return HG + 11 * exp(-(P - PF) / LF) - 3;\n  return HG;\n}\n\n// Kinds of light: steady, the sequenced flashers, the PAPI, city lamps that\n// take the glow colour, red obstruction lights and the airport beacon.\nconst [STEADY, SEQ, PAPI, CITY, OBS, BEAC] = [0, 1, 2, 3, 4, 5];\nconst WHITE = [1, 0.9, 0.74];\nconst COOL = [0.86, 0.92, 1];\nconst RED = [1, 0.1, 0.04];\nconst GREEN = [0.1, 1, 0.42];\nconst AMBER = [1, 0.7, 0.16];\nconst BLUE = [0.2, 0.32, 1];\n\n// Weather presets the knob runs between: visibility in metres, bloom, blur\n// radius, cloud cover, glow, rain, fog, and light scattered in the air.\nconst WX = [\n  [30000, 0.35, 1, 0.5, 1.0, 0, 0, 0],\n  [5000, 1.0, 2, 0.6, 1.25, 0, 0.22, 0.07],\n  [3000, 0.75, 2, 0.85, 1.35, 1, 0.15, 0.1],\n  [420, 1.5, 3, 1, 1.05, 0, 1, 0.2],\n];\n\n// A fixed tileable value noise, for clouds and grass.\nconst TN = 128;\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nlet TX = null;\nlet TC = null;\nfunction makeTex(oct) {\n  const t = new Float32Array(TN * TN);\n  let amp = 0.5;\n  for (let o = 0; o \u003c oct; o++) {\n    const g = 4 \u003c\u003c o;\n    const c = TN / g;\n    for (let y = 0; y \u003c TN; y++)\n      for (let x = 0; x \u003c TN; x++) {\n        const gx = x / c;\n        const gy = y / c;\n        const x0 = floor(gx);\n        const y0 = floor(gy);\n        let fx = gx - x0;\n        let fy = gy - y0;\n        fx = fx * fx * (3 - 2 * fx);\n        fy = fy * fy * (3 - 2 * fy);\n        const hv = (a, b) => hash(((a % g) * 131 + (b % g)) * 7 + o * 9973);\n        const top = hv(x0, y0) + (hv(x0 + 1, y0) - hv(x0, y0)) * fx;\n        const bot = hv(x0, y0 + 1) + (hv(x0 + 1, y0 + 1) - hv(x0, y0 + 1)) * fx;\n        t[y * TN + x] += amp * (top + (bot - top) * fy);\n      }\n    amp *= 0.5;\n  }\n  let lo = 9;\n  let hi = -9;\n  for (let i = 0; i \u003c t.length; i++) {\n    lo = min(lo, t[i]);\n    hi = max(hi, t[i]);\n  }\n  for (let i = 0; i \u003c t.length; i++) t[i] = (t[i] - lo) / (hi - lo);\n  return t;\n}\nfunction tex(u, v, A = TX) {\n  const x = u * TN;\n  const y = v * TN;\n  const x0 = floor(x);\n  const y0 = floor(y);\n  const fx = x - x0;\n  const fy = y - y0;\n  const a = (x0 & 127) + (y0 & 127) * TN;\n  const b = ((x0 + 1) & 127) + (y0 & 127) * TN;\n  const c = (x0 & 127) + ((y0 + 1) & 127) * TN;\n  const d = ((x0 + 1) & 127) + ((y0 + 1) & 127) * TN;\n  const top = A[a] + (A[b] - A[a]) * fx;\n  return top + (A[c] + (A[d] - A[c]) * fx - top) * fy;\n}\n\n// Every light on the field and in the town. Positions are in metres, with z\n// running along the runway from the threshold.\nfunction build() {\n  const L = [];\n  const add = (x, y, z, k, i, c, n = 0) => L.push([x, y, z, k, i, c[0], c[1], c[2], n]);\n  const both = (fn) => {\n    fn(-1);\n    fn(1);\n  };\n  // ALSF-2: a barrette every 30 m out to 720 m, red side rows on the inner\n  // 300 m, flashers on the outer part, crossbars at 300 m and 150 m.\n  for (let k = 1; k \u003c= 24; k++) {\n    const z = -30 * k;\n    for (let j = -2; j \u003c= 2; j++) add(j * 1.05, 0.6, z, STEADY, 1, WHITE);\n    if (k \u003c= 10) both((sg) => { for (let j = 0; j \u003c 3; j++) add(sg * (11 + j * 1.05), 0.6, z, STEADY, 0.75, RED); });\n    if (k >= 11) add(0, 1.4, z, SEQ, 1, COOL, 24 - k);\n  }\n  both((sg) => { for (let j = 3; j \u003c= 15; j += 1.5) add(sg * j, 0.6, -300, STEADY, 1, WHITE); });\n  both((sg) => { for (let j = 3; j \u003c= 7.5; j += 1.5) add(sg * j, 0.6, -150, STEADY, 1, WHITE); });\n  // The green threshold bar and its wing bars.\n  for (let x = -25; x \u003c= 25.01; x += 1.5) add(x, 0.3, 0, STEADY, 1, GREEN);\n  both((sg) => { for (let j = 26.5; j \u003c= 38; j += 1.5) add(sg * j, 0.3, 0, STEADY, 1, GREEN); });\n  // Runway edge lights turn yellow on the last 600 m. A red bar ends it.\n  for (let z = 0; z \u003c= 3000; z += 60) both((sg) => add(sg * 23.5, 0.4, z, STEADY, 0.85, z > 2400 ? AMBER : WHITE));\n  for (let x = -21; x \u003c= 21; x += 3) add(x, 0.3, 3000, STEADY, 0.8, RED);\n  // Centreline every 15 m, red and white near the far end; touchdown zone bars.\n  for (let z = 7.5; z \u003c 3000; z += 15) {\n    const red = z > 2700 || (z > 2100 && round((z - 7.5) / 15) % 2 === 1);\n    add(0.6, 0.05, z, STEADY, 0.7, red ? RED : COOL);\n  }\n  for (let z = 30; z \u003c= 900; z += 30) both((sg) => { for (let j = 0; j \u003c 3; j++) add(sg * (9.8 + j * 1.5), 0.05, z, STEADY, 0.55, COOL); });\n  for (let j = 0; j \u003c 4; j++) add(-(38.5 + 9 * j), 0.9, AIM, PAPI, 1.6, WHITE, j);\n  // A parallel taxiway on the right with blue edges and green lead-offs.\n  for (let z = -60; z \u003c= 3000; z += 50) both((sg) => add(190 + sg * 11, 0.3, z, STEADY, 0.4, BLUE));\n  for (const z0 of [500, 1300, 2100, 2800]) for (let t = 0; t \u003c= 1; t += 1 / 12) add(26 + 160 * t, 0.1, z0 + 120 * t * t, STEADY, 0.35, GREEN);\n  // The apron floodlights beyond it, and the beacon on the tower.\n  for (let j = 0; j \u003c 12; j++) add(330 + 260 * rnd(), 25, 900 + 1500 * rnd(), CITY, 1.3, WHITE, rnd() \u003c 0.3 ? 0.8 : 0.1);\n  add(300, 35, 1400, BEAC, 1.4, WHITE);\n  // The town: lamps along streets on a 140 m grid that thin out between\n  // districts and climb the hills behind.\n  let n = 0;\n  while (n \u003c 1150) {\n    const z = 3300 + 17000 * pow(rnd(), 1.4);\n    let x = (rnd() * 2 - 1) * 0.45 * z;\n    let zz = z;\n    if (rnd() \u003c 0.55) x = round(x / 140) * 140 + (rnd() - 0.5) * 6;\n    else zz = round(z / 140) * 140 + (rnd() - 0.5) * 6;\n    if (tex(x / 9000 + 0.2, zz / 9000) \u003c 0.35 + 0.25 * rnd()) continue;\n    const hill = max(0, (zz - 7000) / 13000) * 300 * (0.5 + tex(x / 4000, zz / 4000 + 0.5));\n    const white = rnd() \u003c 0.28;\n    add(x, hill + 5 + (rnd() \u003c 0.08 ? rnd() * 90 : 0), zz, CITY, 0.55 + 0.6 * rnd(), WHITE, white ? 0.75 : 0.05);\n    n++;\n  }\n  // Masts and towers in the town with red lights stacked up them.\n  for (let j = 0; j \u003c 7; j++) {\n    const z = 4500 + 9000 * rnd();\n    const x = (rnd() * 2 - 1) * 0.3 * z;\n    const ht = 120 + 220 * rnd();\n    const ph = rnd() * 6;\n    for (let q = 1; q \u003c= 3; q++) add(x, (ht * q) / 3, z, OBS, 1.1, RED, ph);\n  }\n  const A = (j) => Float32Array.from(L, (e) => e[j]);\n  return { lx: A(0), ly: A(1), lz: A(2), lk: A(3), li: A(4), lr: A(5), lg: A(6), lb: A(7), ln: A(8), n: L.length };\n}\n\nfunction cam(s) {\n  return { P: s.P, h: s.h, yh: s.yh, psi: s.psi, roll: s.roll, X: s.Xp };\n}\n\nfunction approach(s, P0) {\n  s.mode = 0;\n  s.P = P0;\n  s.h = eyeH(P0);\n  s.down = false;\n  s.rt = 0;\n  s.age = 0;\n  s.turn = 0;\n  s.fresh = true;\n}\n\nexport function setup(params) {\n  if (!TX) {\n    TX = makeTex(4);\n    TC = makeTex(2);\n  }\n  const F3 = () => new Float32Array(N * 3);\n  params.s = { lt: build(), lb: F3(), bl: F3(), tmp: F3(), o: F3(), tq: 0, drops: [], tw: 0, wa: 0.35, drift: 0 };\n  const s = params.s;\n  // The landing lights are fixed to the airframe, so their pool on the\n  // ground and their glow in the air stay put on the screen.\n  s.bm = new Float32Array(N);\n  s.bs = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const bx = (p % W) - CX;\n    const y = (p / W) | 0;\n    const by = (y - 76) / (y \u003c 76 ? 14 : 36);\n    s.bm[p] = exp(-((bx / 22) ** 2) - by * by);\n    s.bs[p] = exp(-((bx / 26) ** 2) - ((y - 82) / 46) ** 2);\n  }\n  // Open about a kilometre out, so the first look is the approach lights.\n  approach(s, -1000);\n  s.age = 1;\n  s.yh = Y0;\n  s.psi = 0;\n  s.roll = 0;\n  s.Xp = 0;\n  s.v = 150;\n  s.fade = 1;\n  s.c = cam(s);\n  s.pc = s.c;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const s = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  const d = (dt * clamp(k[1], 0.2, 3)) / 2;\n  s.tq += d;\n  s.age += d;\n  const tq = s.tq;\n  // Glow colour: hue rotated from sodium amber.\n  const hue = (0.085 + clamp(k[0], 0, 1)) % 1;\n  s.gc = [0, 0, 0].map((_, c) => {\n    const q = ([5, 3, 1][c] + hue * 6) % 6;\n    return 1 - 0.82 * max(0, min(q, 4 - q, 1));\n  });\n  // Weather, blended between the neighbouring presets.\n  const w = clamp(k[2], 0, 3);\n  const i0 = min(2, floor(w));\n  const f = w - i0;\n  const A = WX[i0];\n  const B = WX[i0 + 1];\n  const lerp = (j) => A[j] + (B[j] - A[j]) * f;\n  s.vis = exp(log(A[0]) + (log(B[0]) - log(A[0])) * f);\n  [s.bloom, s.br, s.cover, s.glowK, s.rain, s.fog, s.scat] = [1, 2, 3, 4, 5, 6, 7].map(lerp);\n  s.br = round(s.br);\n  s.drift += d * 0.02;\n  const cw = clamp(k[3], -1, 1);\n\n  s.pc = s.c;\n  if (input.btnPressed && input.btnPressed[0] && s.mode === 0) {\n    s.mode = 1;\n    s.g = 0;\n    s.gh = s.h;\n    s.gp = s.yh - Y0;\n  }\n  // Turbulence: a little bob and roll in the air, a rumble on the ground.\n  const air = min(1, (s.h - HG) / 25);\n  const bob = air * (0.7 * sin(tq * 1.7) + 0.4 * sin(tq * 4.1 + 1)) + (1 - air) * 0.25 * sin(tq * 31) * (s.v / 150);\n  if (s.mode === 0) {\n    if (!s.down) {\n      s.v = s.P \u003c 0 ? 150 - 0.08 * s.P : 150 - 0.05 * s.P;\n      s.P += s.v * d;\n      if (s.P >= TD) s.down = true;\n      s.h = eyeH(s.P) + (s.P \u003c PF ? 1.6 * sin(tq * 0.43) * min(1, (PF - s.P) / 500) : 0);\n    } else {\n      s.rt += d;\n      s.v = max(16, s.v - 26 * d);\n      s.P += s.v * d;\n      s.h = HG;\n    }\n    // The nose comes up in the flare and down after touchdown.\n    const flare = sstep(PF - 40, TD, s.P);\n    s.yh = Y0 + 5 * flare - 7 * sstep(0, 0.9, s.rt) + bob;\n    s.psi = cw * 0.17 * (1 - sstep(PF - 120, TD - 30, s.P));\n    s.roll = air * (0.022 * sin(tq * 1.1 + 0.5) + cw * 0.02);\n    s.Xp = 2 * sin(tq * 0.31) * air;\n    s.fade = sstep(0, 0.7, s.age) * (1 - sstep(4.3, 5, s.rt));\n    if (s.rt >= 5) approach(s, FAR);\n  } else {\n    // Go around: pitch up and climb, then bank away and come round again.\n    const g = (s.g += d);\n    s.v = min(190, s.v + 12 * d);\n    s.P += s.v * d * cos(s.turn);\n    s.h += 36 * sstep(0.2, 1.3, g) * d;\n    s.yh = Y0 + s.gp + (34 - s.gp) * sstep(0, 1.5, g) + bob;\n    s.roll = -0.45 * sstep(1.8, 2.9, g);\n    s.turn += 0.32 * sstep(1.8, 2.9, g) * d;\n    s.psi += 0.32 * sstep(1.8, 2.9, g) * d;\n    s.fade = 1 - sstep(3.1, 3.9, g);\n    if (g >= 3.9) approach(s, FAR);\n  }\n  s.c = cam(s);\n  if (s.fresh) {\n    s.pc = s.c;\n    s.fresh = false;\n  }\n\n  // Rain on the windscreen, and the wiper that clears it.\n  if (s.rain > 0.3) {\n    const nd = d * 34 * s.rain;\n    for (let j = 0; j \u003c 4; j++) if (rnd() \u003c nd / 4 && s.drops.length \u003c 70) s.drops.push({ x: rnd() * W, y: rnd() * H, r: 0.55 + 0.6 * rnd() });\n    s.tw += d;\n    const wa = -0.12 - 0.8 * (0.5 - 0.5 * cos((2 * PI * s.tw) / 1.5));\n    const lo = min(wa, s.wa);\n    const hi = max(wa, s.wa);\n    s.drops = s.drops.filter((q) => {\n      const a = atan((q.x - 58) / (150 - q.y));\n      return a \u003c lo - 0.03 || a > hi + 0.03;\n    });\n    s.wa = wa;\n  } else {\n    s.wa = 0.35;\n    if (s.drops.length) s.drops.length = 0;\n  }\n}\n\n// Additive light: a sharpened bilinear dot for far lights, a round blob for\n// near ones.\nfunction dot(B, x, y, r, g, b) {\n  const x0 = floor(x);\n  const y0 = floor(y);\n  let fx = x - x0;\n  let fy = y - y0;\n  fx = (fx * fx) / (fx * fx + (1 - fx) * (1 - fx));\n  fy = (fy * fy) / (fy * fy + (1 - fy) * (1 - fy));\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = x0 + (j & 1);\n    const yy = y0 + (j >> 1);\n    if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n    const wgt = (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy);\n    const i = (yy * W + xx) * 3;\n    B[i] += r * wgt;\n    B[i + 1] += g * wgt;\n    B[i + 2] += b * wgt;\n  }\n}\nfunction blob(B, x, y, r, g, b, sg) {\n  const R = min(4, ceil(sg * 2.2));\n  const kk = -1 / (2 * sg * sg);\n  const xa = max(0, ceil(x - R));\n  const xb = min(W - 1, floor(x + R));\n  for (let yy = max(0, ceil(y - R)); yy \u003c= min(H - 1, floor(y + R)); yy++)\n    for (let xx = xa; xx \u003c= xb; xx++) {\n      const wgt = exp(((xx - x) ** 2 + (yy - y) ** 2) * kk);\n      const i = (yy * W + xx) * 3;\n      B[i] += r * wgt;\n      B[i + 1] += g * wgt;\n      B[i + 2] += b * wgt;\n    }\n}\n\nfunction lights(s, B) {\n  const c = s.c;\n  const p = s.pc;\n  const T = s.lt;\n  const sn = sin(c.psi);\n  const cs = cos(c.psi);\n  const sr = sin(c.roll);\n  const cr = cos(c.roll);\n  const psn = sin(p.psi);\n  const pcs = cos(p.psi);\n  const psr = sin(p.roll);\n  const pcr = cos(p.roll);\n  const ext = 3 / s.vis;\n  const gc = s.gc;\n  const tq = s.tq;\n  // The rabbit runs from the outermost flasher to the 300 m bar twice a second.\n  const seq = (tq * 2) % 1;\n  const papiA = (atan((c.h - HG) / max(1, AIM - c.P)) * 180) / PI;\n  const beac = (tq * 0.5) % 1;\n  for (let i = 0; i \u003c T.n; i++) {\n    const dx = T.lx[i] - c.X;\n    const dz = T.lz[i] - c.P;\n    const zc = dx * sn + dz * cs;\n    if (zc \u003c 3) continue;\n    const xc = dx * cs - dz * sn;\n    const ox = (F * xc) / zc;\n    const oy = c.yh - CY + (F * (c.h - T.ly[i])) / zc;\n    const X = CX + ox * cr - oy * sr;\n    const Y = CY + ox * sr + oy * cr;\n    if (X \u003c -5 || X > W + 4 || Y \u003c -5 || Y > H + 4) continue;\n    let a = T.li[i] * min(1.8, pow(600 / zc, 0.62)) * exp(-zc * ext);\n    let r = T.lr[i];\n    let g = T.lg[i];\n    let b = T.lb[i];\n    const k = T.lk[i];\n    const m = T.ln[i];\n    let sg = 0.4 + min(1.7, 40 / zc);\n    if (k === SEQ) {\n      let age = seq - m / 14;\n      if (age \u003c 0) age += 1;\n      const e = exp(-age * 13);\n      a *= 4.5 * e;\n      sg += 1.1 * e;\n    } else if (k === PAPI) {\n      const wa = sstep(-0.07, 0.07, papiA - PT[m]);\n      g = 0.1 + 0.83 * wa;\n      b = 0.04 + 0.72 * wa;\n    } else if (k === CITY) {\n      r = gc[0] + (1 - gc[0]) * m;\n      g = gc[1] + (0.92 - gc[1]) * m;\n      b = gc[2] + (0.8 - gc[2]) * m;\n    } else if (k === OBS) a *= sstep(-0.25, 0.25, sin(tq * 3.3 + m));\n    else if (k === BEAC) {\n      const e = exp(-(((beac % 0.5) / 0.05) ** 2));\n      a *= 2 * e;\n      if (beac \u003c 0.5) [r, g, b] = GREEN;\n    }\n    a *= s.fade * 255;\n    if (a \u003c 3) continue;\n    // A light that crossed the screen fast since the last frame leaves a\n    // fading streak behind it.\n    if (zc \u003c 500) {\n      const pdx = T.lx[i] - p.X;\n      const pdz = T.lz[i] - p.P;\n      const pz = pdx * psn + pdz * pcs;\n      if (pz > 3) {\n        const qx = (F * (pdx * pcs - pdz * psn)) / pz;\n        const qy = p.yh - CY + (F * (p.h - T.ly[i])) / pz;\n        const PX = CX + qx * pcr - qy * psr;\n        const PY = CY + qx * psr + qy * pcr;\n        const ddx = X - PX;\n        const ddy = Y - PY;\n        const len = sqrt(ddx * ddx + ddy * ddy);\n        if (len > 1.5) {\n          const n = min(28, ceil(len));\n          const q = a * max(0.3, 1.4 / len);\n          for (let j = 1; j \u003c n; j++) {\n            const t = j / n;\n            dot(B, PX + ddx * t, PY + ddy * t, q * r * t, q * g * t, q * b * t);\n          }\n        }\n      }\n    }\n    if (sg \u003c 0.75) dot(B, X, Y, a * r, a * g, a * b);\n    else blob(B, X, Y, a * r, a * g, a * b, sg);\n    // On a wet runway each light lays a streak toward the windscreen.\n    if (s.rain > 0.05 && T.ly[i] \u003c 1.5 && T.lz[i] > -760) {\n      const ls = min(10, round(s.rain * (2 + 0.12 * (Y - c.yh))));\n      for (let j = 1; j \u003c= ls; j++) {\n        const q = a * 0.3 * s.rain * (1 - j / (ls + 1));\n        dot(B, X, Y + j, q * r, q * g, q * b);\n      }\n    }\n  }\n}\n\n// Box blur, horizontal then vertical, for the bloom.\nfunction blur(src, dst, tmp, r) {\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const o = y * W * 3 + ch;\n      let acc = 0;\n      for (let x = -r; x \u003c= r; x++) acc += src[o + clamp(x, 0, W - 1) * 3];\n      for (let x = 0; x \u003c W; x++) {\n        tmp[o + x * 3] = acc * inv;\n        acc += src[o + min(W - 1, x + r + 1) * 3] - src[o + max(0, x - r) * 3];\n      }\n    }\n  for (let x = 0; x \u003c W; x++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const o = x * 3 + ch;\n      let acc = 0;\n      for (let y = -r; y \u003c= r; y++) acc += tmp[o + clamp(y, 0, H - 1) * W * 3];\n      for (let y = 0; y \u003c H; y++) {\n        dst[o + y * W * 3] = acc * inv;\n        acc += tmp[o + min(H - 1, y + r + 1) * W * 3] - tmp[o + max(0, y - r) * W * 3];\n      }\n    }\n}\n\n// Albedo of the ground: asphalt and its paint on the runway, grass around it.\nconst TDZ = [150, 450, 600, 750, 900];\nfunction surface(X, Z) {\n  const ax = abs(X);\n  if (Z >= 0 && Z \u003c= 3000 && ax \u003c 23) {\n    let al = 0.17 + 0.05 * tex(X / 9, Z / 40);\n    if (ax > 21.9) al = 0.62;\n    else if (Z > 6 && Z \u003c 36 && ax > 3 && (ax - 3) % 3.6 \u003c 1.8) al = 0.75;\n    else if (ax \u003c 0.45 && Z > 60 && (Z - 60) % 60 \u003c 36) al = 0.4;\n    else if (Z > 300 && Z \u003c 360 && ax > 6 && ax \u003c 15) al = 0.72;\n    else if (ax > 6 && ax \u003c 15 && (ax - 6) % 3 \u003c 1.5) for (const z0 of TDZ) if (Z > z0 && Z \u003c z0 + 22) al = 0.7;\n    // Rubber from a million touchdowns darkens the middle of the zone.\n    al *= 1 - (0.45 - 0.4 * tex(X / 5, Z / 25)) * sstep(260, 340, Z) * sstep(1050, 950, Z) * sstep(14, 10, ax);\n    return al;\n  }\n  return 0.04 + 0.07 * tex(X / 6, Z / 6);\n}\n\nexport function draw(display, params) {\n  const s = params.s;\n  if (!s || !s.gc) return;\n  const L = s.lb;\n  const BL = s.bl;\n  const O = s.o;\n  L.fill(0);\n  lights(s, L);\n  blur(L, BL, s.tmp, s.br);\n  blur(BL, BL, s.tmp, s.br);\n\n  const c = s.c;\n  const gc = s.gc;\n  const sn = sin(c.psi);\n  const cs = cos(c.psi);\n  const sr = sin(c.roll);\n  const cr = cos(c.roll);\n  const ext = 3 / s.vis;\n  const land = 2 * s.fade;\n  const gk = s.glowK;\n  const fog = s.fog;\n  // The colour the murk takes: lit by the town, and by the airport in fog.\n  const fl = (0.05 + 0.07 * fog) * (1 + 0.6 * fog);\n  const fw = 0.16 * fog;\n  const fogC = [gc[0] * fl + fw, gc[1] * fl + fw * 1.04, gc[2] * fl + fw * 1.1];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const ax = x - CX;\n      const ay = y - CY;\n      const xr = ax * cr + ay * sr;\n      const v = CY - ax * sr + ay * cr - c.yh;\n      // The town glows brighter in some directions than others.\n      const hd = xr / F + c.psi;\n      const dir = 0.55 + 0.8 * tex(hd * 0.8 + 0.3, 0.71);\n      let R = 0;\n      let G = 0;\n      let Bc = 0;\n      const wg = sstep(-1, 1, v);\n      if (wg \u003c 1) {\n        // Sky: a dark blue zenith over the glow of the town, and the broken\n        // cloud deck lit from below.\n        const u = max(0, -v);\n        let gl = gk * dir * (0.3 * exp(-u / 6) * (1 - fog) + 0.13 * exp(-u / 30));\n        if (u > 0.3 && s.cover > 0) {\n          const zz = (F * (HC - c.h)) / u;\n          const xx = (xr * zz) / F;\n          // Far cloud melts into the glow instead of shimmering.\n          let n = tex((xx * cs + zz * sn + c.X) / 5000, (-xx * sn + zz * cs + c.P) / 5000 + s.drift, TC);\n          n = 0.5 + (n - 0.5) * exp(-zz / 9000);\n          gl += sstep(1 - s.cover, 1.3 - s.cover, n) * sstep(0.3, 5, u) * (0.15 + 0.3 * exp(-u / 22)) * dir * gk;\n        }\n        let sR = 0.03 + gc[0] * gl;\n        let sG = 0.045 + gc[1] * gl;\n        let sB = 0.13 + gc[2] * gl;\n        // In fog the sky is the murk, darker going up.\n        const fu = fog * (0.75 + 0.25 * exp(-u / 20));\n        sR += (fogC[0] * fu - sR) * fog;\n        sG += (fogC[1] * fu - sG) * fog;\n        sB += (fogC[2] * fu - sB) * fog;\n        R += sR * (1 - wg);\n        G += sG * (1 - wg);\n        Bc += sB * (1 - wg);\n      }\n      if (wg > 0) {\n        const vv = max(0.05, v);\n        const zc = (F * c.h) / vv;\n        const xc = (xr * zc) / F;\n        const dd = sqrt(zc * zc + xc * xc + c.h * c.h);\n        const Tr = exp(-dd * ext);\n        const E = land * s.bm[y * W + x] * min(1, pow(45 / dd, 1.3)) * Tr;\n        let gR = 0;\n        if (E > 0.008) gR = E * surface(xc * cs + zc * sn + c.X, -xc * sn + zc * cs + c.P);\n        // The glow of the town runs a little way below the horizon.\n        const band = gk * dir * 0.32 * exp(-vv / 2.2) * (1 - fog);\n        R += (gR + gc[0] * band + fogC[0] * (1 - Tr)) * wg;\n        G += (gR * 0.93 + gc[1] * band + fogC[1] * (1 - Tr)) * wg;\n        Bc += (gR * 0.8 + gc[2] * band + fogC[2] * (1 - Tr)) * wg;\n      }\n      // The landing light beams seen in the air.\n      const sc = s.scat * land * s.bs[y * W + x];\n      const i = (y * W + x) * 3;\n      const fd = s.fade * 255;\n      O[i] = (R + sc) * fd + L[i] + BL[i] * s.bloom;\n      O[i + 1] = (G + sc * 0.95) * fd + L[i + 1] + BL[i + 1] * s.bloom;\n      O[i + 2] = (Bc + sc * 0.85) * fd + L[i + 2] + BL[i + 2] * s.bloom;\n    }\n\n  // Drops on the windscreen pick up the lights behind them.\n  for (const q of s.drops) {\n    const j = (clamp(round(q.y + 3), 0, H - 1) * W + clamp(round(q.x), 0, W - 1)) * 3;\n    const e = 1.4 * s.fade;\n    blob(O, q.x, q.y, 14 * e + BL[j] * e, 16 * e + BL[j + 1] * e, 20 * e + BL[j + 2] * e, q.r);\n  }\n  // The wiper blade, dark against the glow.\n  if (s.rain > 0.3) {\n    const dx = sin(s.wa);\n    const dy = -cos(s.wa);\n    for (let t = 30; t \u003c 175; t += 0.7) {\n      const x = round(58 + dx * t);\n      const y = round(150 + dy * t);\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      for (let e = 0; e \u003c 2; e++) {\n        const i = (y * W + min(W - 1, x + e)) * 3;\n        O[i] *= 0.12;\n        O[i + 1] *= 0.12;\n        O[i + 2] *= 0.12;\n      }\n    }\n  }\n  // A soft shoulder, with a little of an overbright channel spilling into the\n  // others so bright lights burn toward white.\n  const sh = (v) => (v \u003c 190 ? v : 255 - 65 * exp(-(v - 190) / 65));\n  for (let i = 0, p = 0; p \u003c N; p++, i += 3) {\n    let r = O[i];\n    let g = O[i + 1];\n    let b = O[i + 2];\n    const m = max(r, g, b);\n    if (m > 255) {\n      const sp = (m - 255) * 0.22;\n      r += sp;\n      g += sp;\n      b += sp;\n    }\n    display.setPixel(p % W, (p / W) | 0, sh(r), sh(g), sh(b));\n  }\n}\n","layer":{"id":"layer-final-approach","type":"code","name":"final-approach","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Final Approach\n// Family:  flight\n// Idea:    From an airliner cockpit on a night landing, the runway and its approach lights converge high on the panel under a town glowing on the horizon, then stream toward the windscreen and under it with the rabbit racing ahead and the PAPI showing two white over two red, through the flare and the rollout, before the next approach begins far out.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the ALSF-2 approach lighting system\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Glow=0..1, Speed=0.2..3, Weather=0..3, Crosswind=-1..1\n//\n// Knob 1: Glow. The colour of the town's glow on the clouds and of the sodium lamps on the horizon: sodium amber at 0, turning through green and blue to violet and back to amber at 1.\n// Knob 2: Speed. How fast the airliner flies: at 2 an approach from far out to the end of the rollout takes about 18 s and the rabbit runs twice a second; at 0.2 everything runs ten times slower.\n// Knob 3: Weather. A clear night with broken cloud at 0, haze where every light blooms at 1, rain on the windscreen with the wiper going at 2, and fog at 3 where the approach lights come out of the murk late.\n// Knob 4: Crosswind. The airliner crabs into the wind from the left or the right, so the runway sits off to one side until it swings straight ahead at the flare.\n// Buttons: K1 tap goes around: the nose comes up and the lights drop away below, then the airliner banks off and comes round for a new approach.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, sin, cos, exp, sqrt, pow, floor, ceil, round, atan, log, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst rnd = () => Math.random();\n\n// The camera: focal length in LEDs, the screen centre, the eye height on the\n// runway in metres, and the horizon row on the approach.\nconst F = 150;\nconst CX = 31.5;\nconst CY = 64;\nconst HG = 8;\nconst Y0 = 32;\n// A 3 degree glide path comes down to eye height HG 320 m past the\n// threshold. The flare starts 8 m above that, and touchdown is where it ends.\nconst SLOPE = 0.0524;\nconst AIM = 320;\nconst PF = AIM - 8 / SLOPE;\nconst LF = 11 / SLOPE;\nconst TD = PF + LF * log(11 / 3);\n// Cloud base above the ground, and where a new approach starts.\nconst HC = 520;\nconst FAR = -2300;\n// The PAPI units from the runway outward, in degrees.\nconst PT = [3.5, 3.17, 2.83, 2.5];\n\nfunction eyeH(P) {\n  if (P \u003c PF) return HG + (AIM - P) * SLOPE;\n  if (P \u003c TD) return HG + 11 * exp(-(P - PF) / LF) - 3;\n  return HG;\n}\n\n// Kinds of light: steady, the sequenced flashers, the PAPI, city lamps that\n// take the glow colour, red obstruction lights and the airport beacon.\nconst [STEADY, SEQ, PAPI, CITY, OBS, BEAC] = [0, 1, 2, 3, 4, 5];\nconst WHITE = [1, 0.9, 0.74];\nconst COOL = [0.86, 0.92, 1];\nconst RED = [1, 0.1, 0.04];\nconst GREEN = [0.1, 1, 0.42];\nconst AMBER = [1, 0.7, 0.16];\nconst BLUE = [0.2, 0.32, 1];\n\n// Weather presets the knob runs between: visibility in metres, bloom, blur\n// radius, cloud cover, glow, rain, fog, and light scattered in the air.\nconst WX = [\n  [30000, 0.35, 1, 0.5, 1.0, 0, 0, 0],\n  [5000, 1.0, 2, 0.6, 1.25, 0, 0.22, 0.07],\n  [3000, 0.75, 2, 0.85, 1.35, 1, 0.15, 0.1],\n  [420, 1.5, 3, 1, 1.05, 0, 1, 0.2],\n];\n\n// A fixed tileable value noise, for clouds and grass.\nconst TN = 128;\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nlet TX = null;\nlet TC = null;\nfunction makeTex(oct) {\n  const t = new Float32Array(TN * TN);\n  let amp = 0.5;\n  for (let o = 0; o \u003c oct; o++) {\n    const g = 4 \u003c\u003c o;\n    const c = TN / g;\n    for (let y = 0; y \u003c TN; y++)\n      for (let x = 0; x \u003c TN; x++) {\n        const gx = x / c;\n        const gy = y / c;\n        const x0 = floor(gx);\n        const y0 = floor(gy);\n        let fx = gx - x0;\n        let fy = gy - y0;\n        fx = fx * fx * (3 - 2 * fx);\n        fy = fy * fy * (3 - 2 * fy);\n        const hv = (a, b) => hash(((a % g) * 131 + (b % g)) * 7 + o * 9973);\n        const top = hv(x0, y0) + (hv(x0 + 1, y0) - hv(x0, y0)) * fx;\n        const bot = hv(x0, y0 + 1) + (hv(x0 + 1, y0 + 1) - hv(x0, y0 + 1)) * fx;\n        t[y * TN + x] += amp * (top + (bot - top) * fy);\n      }\n    amp *= 0.5;\n  }\n  let lo = 9;\n  let hi = -9;\n  for (let i = 0; i \u003c t.length; i++) {\n    lo = min(lo, t[i]);\n    hi = max(hi, t[i]);\n  }\n  for (let i = 0; i \u003c t.length; i++) t[i] = (t[i] - lo) / (hi - lo);\n  return t;\n}\nfunction tex(u, v, A = TX) {\n  const x = u * TN;\n  const y = v * TN;\n  const x0 = floor(x);\n  const y0 = floor(y);\n  const fx = x - x0;\n  const fy = y - y0;\n  const a = (x0 & 127) + (y0 & 127) * TN;\n  const b = ((x0 + 1) & 127) + (y0 & 127) * TN;\n  const c = (x0 & 127) + ((y0 + 1) & 127) * TN;\n  const d = ((x0 + 1) & 127) + ((y0 + 1) & 127) * TN;\n  const top = A[a] + (A[b] - A[a]) * fx;\n  return top + (A[c] + (A[d] - A[c]) * fx - top) * fy;\n}\n\n// Every light on the field and in the town. Positions are in metres, with z\n// running along the runway from the threshold.\nfunction build() {\n  const L = [];\n  const add = (x, y, z, k, i, c, n = 0) => L.push([x, y, z, k, i, c[0], c[1], c[2], n]);\n  const both = (fn) => {\n    fn(-1);\n    fn(1);\n  };\n  // ALSF-2: a barrette every 30 m out to 720 m, red side rows on the inner\n  // 300 m, flashers on the outer part, crossbars at 300 m and 150 m.\n  for (let k = 1; k \u003c= 24; k++) {\n    const z = -30 * k;\n    for (let j = -2; j \u003c= 2; j++) add(j * 1.05, 0.6, z, STEADY, 1, WHITE);\n    if (k \u003c= 10) both((sg) => { for (let j = 0; j \u003c 3; j++) add(sg * (11 + j * 1.05), 0.6, z, STEADY, 0.75, RED); });\n    if (k >= 11) add(0, 1.4, z, SEQ, 1, COOL, 24 - k);\n  }\n  both((sg) => { for (let j = 3; j \u003c= 15; j += 1.5) add(sg * j, 0.6, -300, STEADY, 1, WHITE); });\n  both((sg) => { for (let j = 3; j \u003c= 7.5; j += 1.5) add(sg * j, 0.6, -150, STEADY, 1, WHITE); });\n  // The green threshold bar and its wing bars.\n  for (let x = -25; x \u003c= 25.01; x += 1.5) add(x, 0.3, 0, STEADY, 1, GREEN);\n  both((sg) => { for (let j = 26.5; j \u003c= 38; j += 1.5) add(sg * j, 0.3, 0, STEADY, 1, GREEN); });\n  // Runway edge lights turn yellow on the last 600 m. A red bar ends it.\n  for (let z = 0; z \u003c= 3000; z += 60) both((sg) => add(sg * 23.5, 0.4, z, STEADY, 0.85, z > 2400 ? AMBER : WHITE));\n  for (let x = -21; x \u003c= 21; x += 3) add(x, 0.3, 3000, STEADY, 0.8, RED);\n  // Centreline every 15 m, red and white near the far end; touchdown zone bars.\n  for (let z = 7.5; z \u003c 3000; z += 15) {\n    const red = z > 2700 || (z > 2100 && round((z - 7.5) / 15) % 2 === 1);\n    add(0.6, 0.05, z, STEADY, 0.7, red ? RED : COOL);\n  }\n  for (let z = 30; z \u003c= 900; z += 30) both((sg) => { for (let j = 0; j \u003c 3; j++) add(sg * (9.8 + j * 1.5), 0.05, z, STEADY, 0.55, COOL); });\n  for (let j = 0; j \u003c 4; j++) add(-(38.5 + 9 * j), 0.9, AIM, PAPI, 1.6, WHITE, j);\n  // A parallel taxiway on the right with blue edges and green lead-offs.\n  for (let z = -60; z \u003c= 3000; z += 50) both((sg) => add(190 + sg * 11, 0.3, z, STEADY, 0.4, BLUE));\n  for (const z0 of [500, 1300, 2100, 2800]) for (let t = 0; t \u003c= 1; t += 1 / 12) add(26 + 160 * t, 0.1, z0 + 120 * t * t, STEADY, 0.35, GREEN);\n  // The apron floodlights beyond it, and the beacon on the tower.\n  for (let j = 0; j \u003c 12; j++) add(330 + 260 * rnd(), 25, 900 + 1500 * rnd(), CITY, 1.3, WHITE, rnd() \u003c 0.3 ? 0.8 : 0.1);\n  add(300, 35, 1400, BEAC, 1.4, WHITE);\n  // The town: lamps along streets on a 140 m grid that thin out between\n  // districts and climb the hills behind.\n  let n = 0;\n  while (n \u003c 1150) {\n    const z = 3300 + 17000 * pow(rnd(), 1.4);\n    let x = (rnd() * 2 - 1) * 0.45 * z;\n    let zz = z;\n    if (rnd() \u003c 0.55) x = round(x / 140) * 140 + (rnd() - 0.5) * 6;\n    else zz = round(z / 140) * 140 + (rnd() - 0.5) * 6;\n    if (tex(x / 9000 + 0.2, zz / 9000) \u003c 0.35 + 0.25 * rnd()) continue;\n    const hill = max(0, (zz - 7000) / 13000) * 300 * (0.5 + tex(x / 4000, zz / 4000 + 0.5));\n    const white = rnd() \u003c 0.28;\n    add(x, hill + 5 + (rnd() \u003c 0.08 ? rnd() * 90 : 0), zz, CITY, 0.55 + 0.6 * rnd(), WHITE, white ? 0.75 : 0.05);\n    n++;\n  }\n  // Masts and towers in the town with red lights stacked up them.\n  for (let j = 0; j \u003c 7; j++) {\n    const z = 4500 + 9000 * rnd();\n    const x = (rnd() * 2 - 1) * 0.3 * z;\n    const ht = 120 + 220 * rnd();\n    const ph = rnd() * 6;\n    for (let q = 1; q \u003c= 3; q++) add(x, (ht * q) / 3, z, OBS, 1.1, RED, ph);\n  }\n  const A = (j) => Float32Array.from(L, (e) => e[j]);\n  return { lx: A(0), ly: A(1), lz: A(2), lk: A(3), li: A(4), lr: A(5), lg: A(6), lb: A(7), ln: A(8), n: L.length };\n}\n\nfunction cam(s) {\n  return { P: s.P, h: s.h, yh: s.yh, psi: s.psi, roll: s.roll, X: s.Xp };\n}\n\nfunction approach(s, P0) {\n  s.mode = 0;\n  s.P = P0;\n  s.h = eyeH(P0);\n  s.down = false;\n  s.rt = 0;\n  s.age = 0;\n  s.turn = 0;\n  s.fresh = true;\n}\n\nexport function setup(params) {\n  if (!TX) {\n    TX = makeTex(4);\n    TC = makeTex(2);\n  }\n  const F3 = () => new Float32Array(N * 3);\n  params.s = { lt: build(), lb: F3(), bl: F3(), tmp: F3(), o: F3(), tq: 0, drops: [], tw: 0, wa: 0.35, drift: 0 };\n  const s = params.s;\n  // The landing lights are fixed to the airframe, so their pool on the\n  // ground and their glow in the air stay put on the screen.\n  s.bm = new Float32Array(N);\n  s.bs = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const bx = (p % W) - CX;\n    const y = (p / W) | 0;\n    const by = (y - 76) / (y \u003c 76 ? 14 : 36);\n    s.bm[p] = exp(-((bx / 22) ** 2) - by * by);\n    s.bs[p] = exp(-((bx / 26) ** 2) - ((y - 82) / 46) ** 2);\n  }\n  // Open about a kilometre out, so the first look is the approach lights.\n  approach(s, -1000);\n  s.age = 1;\n  s.yh = Y0;\n  s.psi = 0;\n  s.roll = 0;\n  s.Xp = 0;\n  s.v = 150;\n  s.fade = 1;\n  s.c = cam(s);\n  s.pc = s.c;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const s = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  const d = (dt * clamp(k[1], 0.2, 3)) / 2;\n  s.tq += d;\n  s.age += d;\n  const tq = s.tq;\n  // Glow colour: hue rotated from sodium amber.\n  const hue = (0.085 + clamp(k[0], 0, 1)) % 1;\n  s.gc = [0, 0, 0].map((_, c) => {\n    const q = ([5, 3, 1][c] + hue * 6) % 6;\n    return 1 - 0.82 * max(0, min(q, 4 - q, 1));\n  });\n  // Weather, blended between the neighbouring presets.\n  const w = clamp(k[2], 0, 3);\n  const i0 = min(2, floor(w));\n  const f = w - i0;\n  const A = WX[i0];\n  const B = WX[i0 + 1];\n  const lerp = (j) => A[j] + (B[j] - A[j]) * f;\n  s.vis = exp(log(A[0]) + (log(B[0]) - log(A[0])) * f);\n  [s.bloom, s.br, s.cover, s.glowK, s.rain, s.fog, s.scat] = [1, 2, 3, 4, 5, 6, 7].map(lerp);\n  s.br = round(s.br);\n  s.drift += d * 0.02;\n  const cw = clamp(k[3], -1, 1);\n\n  s.pc = s.c;\n  if (input.btnPressed && input.btnPressed[0] && s.mode === 0) {\n    s.mode = 1;\n    s.g = 0;\n    s.gh = s.h;\n    s.gp = s.yh - Y0;\n  }\n  // Turbulence: a little bob and roll in the air, a rumble on the ground.\n  const air = min(1, (s.h - HG) / 25);\n  const bob = air * (0.7 * sin(tq * 1.7) + 0.4 * sin(tq * 4.1 + 1)) + (1 - air) * 0.25 * sin(tq * 31) * (s.v / 150);\n  if (s.mode === 0) {\n    if (!s.down) {\n      s.v = s.P \u003c 0 ? 150 - 0.08 * s.P : 150 - 0.05 * s.P;\n      s.P += s.v * d;\n      if (s.P >= TD) s.down = true;\n      s.h = eyeH(s.P) + (s.P \u003c PF ? 1.6 * sin(tq * 0.43) * min(1, (PF - s.P) / 500) : 0);\n    } else {\n      s.rt += d;\n      s.v = max(16, s.v - 26 * d);\n      s.P += s.v * d;\n      s.h = HG;\n    }\n    // The nose comes up in the flare and down after touchdown.\n    const flare = sstep(PF - 40, TD, s.P);\n    s.yh = Y0 + 5 * flare - 7 * sstep(0, 0.9, s.rt) + bob;\n    s.psi = cw * 0.17 * (1 - sstep(PF - 120, TD - 30, s.P));\n    s.roll = air * (0.022 * sin(tq * 1.1 + 0.5) + cw * 0.02);\n    s.Xp = 2 * sin(tq * 0.31) * air;\n    s.fade = sstep(0, 0.7, s.age) * (1 - sstep(4.3, 5, s.rt));\n    if (s.rt >= 5) approach(s, FAR);\n  } else {\n    // Go around: pitch up and climb, then bank away and come round again.\n    const g = (s.g += d);\n    s.v = min(190, s.v + 12 * d);\n    s.P += s.v * d * cos(s.turn);\n    s.h += 36 * sstep(0.2, 1.3, g) * d;\n    s.yh = Y0 + s.gp + (34 - s.gp) * sstep(0, 1.5, g) + bob;\n    s.roll = -0.45 * sstep(1.8, 2.9, g);\n    s.turn += 0.32 * sstep(1.8, 2.9, g) * d;\n    s.psi += 0.32 * sstep(1.8, 2.9, g) * d;\n    s.fade = 1 - sstep(3.1, 3.9, g);\n    if (g >= 3.9) approach(s, FAR);\n  }\n  s.c = cam(s);\n  if (s.fresh) {\n    s.pc = s.c;\n    s.fresh = false;\n  }\n\n  // Rain on the windscreen, and the wiper that clears it.\n  if (s.rain > 0.3) {\n    const nd = d * 34 * s.rain;\n    for (let j = 0; j \u003c 4; j++) if (rnd() \u003c nd / 4 && s.drops.length \u003c 70) s.drops.push({ x: rnd() * W, y: rnd() * H, r: 0.55 + 0.6 * rnd() });\n    s.tw += d;\n    const wa = -0.12 - 0.8 * (0.5 - 0.5 * cos((2 * PI * s.tw) / 1.5));\n    const lo = min(wa, s.wa);\n    const hi = max(wa, s.wa);\n    s.drops = s.drops.filter((q) => {\n      const a = atan((q.x - 58) / (150 - q.y));\n      return a \u003c lo - 0.03 || a > hi + 0.03;\n    });\n    s.wa = wa;\n  } else {\n    s.wa = 0.35;\n    if (s.drops.length) s.drops.length = 0;\n  }\n}\n\n// Additive light: a sharpened bilinear dot for far lights, a round blob for\n// near ones.\nfunction dot(B, x, y, r, g, b) {\n  const x0 = floor(x);\n  const y0 = floor(y);\n  let fx = x - x0;\n  let fy = y - y0;\n  fx = (fx * fx) / (fx * fx + (1 - fx) * (1 - fx));\n  fy = (fy * fy) / (fy * fy + (1 - fy) * (1 - fy));\n  for (let j = 0; j \u003c 4; j++) {\n    const xx = x0 + (j & 1);\n    const yy = y0 + (j >> 1);\n    if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n    const wgt = (j & 1 ? fx : 1 - fx) * (j >> 1 ? fy : 1 - fy);\n    const i = (yy * W + xx) * 3;\n    B[i] += r * wgt;\n    B[i + 1] += g * wgt;\n    B[i + 2] += b * wgt;\n  }\n}\nfunction blob(B, x, y, r, g, b, sg) {\n  const R = min(4, ceil(sg * 2.2));\n  const kk = -1 / (2 * sg * sg);\n  const xa = max(0, ceil(x - R));\n  const xb = min(W - 1, floor(x + R));\n  for (let yy = max(0, ceil(y - R)); yy \u003c= min(H - 1, floor(y + R)); yy++)\n    for (let xx = xa; xx \u003c= xb; xx++) {\n      const wgt = exp(((xx - x) ** 2 + (yy - y) ** 2) * kk);\n      const i = (yy * W + xx) * 3;\n      B[i] += r * wgt;\n      B[i + 1] += g * wgt;\n      B[i + 2] += b * wgt;\n    }\n}\n\nfunction lights(s, B) {\n  const c = s.c;\n  const p = s.pc;\n  const T = s.lt;\n  const sn = sin(c.psi);\n  const cs = cos(c.psi);\n  const sr = sin(c.roll);\n  const cr = cos(c.roll);\n  const psn = sin(p.psi);\n  const pcs = cos(p.psi);\n  const psr = sin(p.roll);\n  const pcr = cos(p.roll);\n  const ext = 3 / s.vis;\n  const gc = s.gc;\n  const tq = s.tq;\n  // The rabbit runs from the outermost flasher to the 300 m bar twice a second.\n  const seq = (tq * 2) % 1;\n  const papiA = (atan((c.h - HG) / max(1, AIM - c.P)) * 180) / PI;\n  const beac = (tq * 0.5) % 1;\n  for (let i = 0; i \u003c T.n; i++) {\n    const dx = T.lx[i] - c.X;\n    const dz = T.lz[i] - c.P;\n    const zc = dx * sn + dz * cs;\n    if (zc \u003c 3) continue;\n    const xc = dx * cs - dz * sn;\n    const ox = (F * xc) / zc;\n    const oy = c.yh - CY + (F * (c.h - T.ly[i])) / zc;\n    const X = CX + ox * cr - oy * sr;\n    const Y = CY + ox * sr + oy * cr;\n    if (X \u003c -5 || X > W + 4 || Y \u003c -5 || Y > H + 4) continue;\n    let a = T.li[i] * min(1.8, pow(600 / zc, 0.62)) * exp(-zc * ext);\n    let r = T.lr[i];\n    let g = T.lg[i];\n    let b = T.lb[i];\n    const k = T.lk[i];\n    const m = T.ln[i];\n    let sg = 0.4 + min(1.7, 40 / zc);\n    if (k === SEQ) {\n      let age = seq - m / 14;\n      if (age \u003c 0) age += 1;\n      const e = exp(-age * 13);\n      a *= 4.5 * e;\n      sg += 1.1 * e;\n    } else if (k === PAPI) {\n      const wa = sstep(-0.07, 0.07, papiA - PT[m]);\n      g = 0.1 + 0.83 * wa;\n      b = 0.04 + 0.72 * wa;\n    } else if (k === CITY) {\n      r = gc[0] + (1 - gc[0]) * m;\n      g = gc[1] + (0.92 - gc[1]) * m;\n      b = gc[2] + (0.8 - gc[2]) * m;\n    } else if (k === OBS) a *= sstep(-0.25, 0.25, sin(tq * 3.3 + m));\n    else if (k === BEAC) {\n      const e = exp(-(((beac % 0.5) / 0.05) ** 2));\n      a *= 2 * e;\n      if (beac \u003c 0.5) [r, g, b] = GREEN;\n    }\n    a *= s.fade * 255;\n    if (a \u003c 3) continue;\n    // A light that crossed the screen fast since the last frame leaves a\n    // fading streak behind it.\n    if (zc \u003c 500) {\n      const pdx = T.lx[i] - p.X;\n      const pdz = T.lz[i] - p.P;\n      const pz = pdx * psn + pdz * pcs;\n      if (pz > 3) {\n        const qx = (F * (pdx * pcs - pdz * psn)) / pz;\n        const qy = p.yh - CY + (F * (p.h - T.ly[i])) / pz;\n        const PX = CX + qx * pcr - qy * psr;\n        const PY = CY + qx * psr + qy * pcr;\n        const ddx = X - PX;\n        const ddy = Y - PY;\n        const len = sqrt(ddx * ddx + ddy * ddy);\n        if (len > 1.5) {\n          const n = min(28, ceil(len));\n          const q = a * max(0.3, 1.4 / len);\n          for (let j = 1; j \u003c n; j++) {\n            const t = j / n;\n            dot(B, PX + ddx * t, PY + ddy * t, q * r * t, q * g * t, q * b * t);\n          }\n        }\n      }\n    }\n    if (sg \u003c 0.75) dot(B, X, Y, a * r, a * g, a * b);\n    else blob(B, X, Y, a * r, a * g, a * b, sg);\n    // On a wet runway each light lays a streak toward the windscreen.\n    if (s.rain > 0.05 && T.ly[i] \u003c 1.5 && T.lz[i] > -760) {\n      const ls = min(10, round(s.rain * (2 + 0.12 * (Y - c.yh))));\n      for (let j = 1; j \u003c= ls; j++) {\n        const q = a * 0.3 * s.rain * (1 - j / (ls + 1));\n        dot(B, X, Y + j, q * r, q * g, q * b);\n      }\n    }\n  }\n}\n\n// Box blur, horizontal then vertical, for the bloom.\nfunction blur(src, dst, tmp, r) {\n  const inv = 1 / (2 * r + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const o = y * W * 3 + ch;\n      let acc = 0;\n      for (let x = -r; x \u003c= r; x++) acc += src[o + clamp(x, 0, W - 1) * 3];\n      for (let x = 0; x \u003c W; x++) {\n        tmp[o + x * 3] = acc * inv;\n        acc += src[o + min(W - 1, x + r + 1) * 3] - src[o + max(0, x - r) * 3];\n      }\n    }\n  for (let x = 0; x \u003c W; x++)\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const o = x * 3 + ch;\n      let acc = 0;\n      for (let y = -r; y \u003c= r; y++) acc += tmp[o + clamp(y, 0, H - 1) * W * 3];\n      for (let y = 0; y \u003c H; y++) {\n        dst[o + y * W * 3] = acc * inv;\n        acc += tmp[o + min(H - 1, y + r + 1) * W * 3] - tmp[o + max(0, y - r) * W * 3];\n      }\n    }\n}\n\n// Albedo of the ground: asphalt and its paint on the runway, grass around it.\nconst TDZ = [150, 450, 600, 750, 900];\nfunction surface(X, Z) {\n  const ax = abs(X);\n  if (Z >= 0 && Z \u003c= 3000 && ax \u003c 23) {\n    let al = 0.17 + 0.05 * tex(X / 9, Z / 40);\n    if (ax > 21.9) al = 0.62;\n    else if (Z > 6 && Z \u003c 36 && ax > 3 && (ax - 3) % 3.6 \u003c 1.8) al = 0.75;\n    else if (ax \u003c 0.45 && Z > 60 && (Z - 60) % 60 \u003c 36) al = 0.4;\n    else if (Z > 300 && Z \u003c 360 && ax > 6 && ax \u003c 15) al = 0.72;\n    else if (ax > 6 && ax \u003c 15 && (ax - 6) % 3 \u003c 1.5) for (const z0 of TDZ) if (Z > z0 && Z \u003c z0 + 22) al = 0.7;\n    // Rubber from a million touchdowns darkens the middle of the zone.\n    al *= 1 - (0.45 - 0.4 * tex(X / 5, Z / 25)) * sstep(260, 340, Z) * sstep(1050, 950, Z) * sstep(14, 10, ax);\n    return al;\n  }\n  return 0.04 + 0.07 * tex(X / 6, Z / 6);\n}\n\nexport function draw(display, params) {\n  const s = params.s;\n  if (!s || !s.gc) return;\n  const L = s.lb;\n  const BL = s.bl;\n  const O = s.o;\n  L.fill(0);\n  lights(s, L);\n  blur(L, BL, s.tmp, s.br);\n  blur(BL, BL, s.tmp, s.br);\n\n  const c = s.c;\n  const gc = s.gc;\n  const sn = sin(c.psi);\n  const cs = cos(c.psi);\n  const sr = sin(c.roll);\n  const cr = cos(c.roll);\n  const ext = 3 / s.vis;\n  const land = 2 * s.fade;\n  const gk = s.glowK;\n  const fog = s.fog;\n  // The colour the murk takes: lit by the town, and by the airport in fog.\n  const fl = (0.05 + 0.07 * fog) * (1 + 0.6 * fog);\n  const fw = 0.16 * fog;\n  const fogC = [gc[0] * fl + fw, gc[1] * fl + fw * 1.04, gc[2] * fl + fw * 1.1];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const ax = x - CX;\n      const ay = y - CY;\n      const xr = ax * cr + ay * sr;\n      const v = CY - ax * sr + ay * cr - c.yh;\n      // The town glows brighter in some directions than others.\n      const hd = xr / F + c.psi;\n      const dir = 0.55 + 0.8 * tex(hd * 0.8 + 0.3, 0.71);\n      let R = 0;\n      let G = 0;\n      let Bc = 0;\n      const wg = sstep(-1, 1, v);\n      if (wg \u003c 1) {\n        // Sky: a dark blue zenith over the glow of the town, and the broken\n        // cloud deck lit from below.\n        const u = max(0, -v);\n        let gl = gk * dir * (0.3 * exp(-u / 6) * (1 - fog) + 0.13 * exp(-u / 30));\n        if (u > 0.3 && s.cover > 0) {\n          const zz = (F * (HC - c.h)) / u;\n          const xx = (xr * zz) / F;\n          // Far cloud melts into the glow instead of shimmering.\n          let n = tex((xx * cs + zz * sn + c.X) / 5000, (-xx * sn + zz * cs + c.P) / 5000 + s.drift, TC);\n          n = 0.5 + (n - 0.5) * exp(-zz / 9000);\n          gl += sstep(1 - s.cover, 1.3 - s.cover, n) * sstep(0.3, 5, u) * (0.15 + 0.3 * exp(-u / 22)) * dir * gk;\n        }\n        let sR = 0.03 + gc[0] * gl;\n        let sG = 0.045 + gc[1] * gl;\n        let sB = 0.13 + gc[2] * gl;\n        // In fog the sky is the murk, darker going up.\n        const fu = fog * (0.75 + 0.25 * exp(-u / 20));\n        sR += (fogC[0] * fu - sR) * fog;\n        sG += (fogC[1] * fu - sG) * fog;\n        sB += (fogC[2] * fu - sB) * fog;\n        R += sR * (1 - wg);\n        G += sG * (1 - wg);\n        Bc += sB * (1 - wg);\n      }\n      if (wg > 0) {\n        const vv = max(0.05, v);\n        const zc = (F * c.h) / vv;\n        const xc = (xr * zc) / F;\n        const dd = sqrt(zc * zc + xc * xc + c.h * c.h);\n        const Tr = exp(-dd * ext);\n        const E = land * s.bm[y * W + x] * min(1, pow(45 / dd, 1.3)) * Tr;\n        let gR = 0;\n        if (E > 0.008) gR = E * surface(xc * cs + zc * sn + c.X, -xc * sn + zc * cs + c.P);\n        // The glow of the town runs a little way below the horizon.\n        const band = gk * dir * 0.32 * exp(-vv / 2.2) * (1 - fog);\n        R += (gR + gc[0] * band + fogC[0] * (1 - Tr)) * wg;\n        G += (gR * 0.93 + gc[1] * band + fogC[1] * (1 - Tr)) * wg;\n        Bc += (gR * 0.8 + gc[2] * band + fogC[2] * (1 - Tr)) * wg;\n      }\n      // The landing light beams seen in the air.\n      const sc = s.scat * land * s.bs[y * W + x];\n      const i = (y * W + x) * 3;\n      const fd = s.fade * 255;\n      O[i] = (R + sc) * fd + L[i] + BL[i] * s.bloom;\n      O[i + 1] = (G + sc * 0.95) * fd + L[i + 1] + BL[i + 1] * s.bloom;\n      O[i + 2] = (Bc + sc * 0.85) * fd + L[i + 2] + BL[i + 2] * s.bloom;\n    }\n\n  // Drops on the windscreen pick up the lights behind them.\n  for (const q of s.drops) {\n    const j = (clamp(round(q.y + 3), 0, H - 1) * W + clamp(round(q.x), 0, W - 1)) * 3;\n    const e = 1.4 * s.fade;\n    blob(O, q.x, q.y, 14 * e + BL[j] * e, 16 * e + BL[j + 1] * e, 20 * e + BL[j + 2] * e, q.r);\n  }\n  // The wiper blade, dark against the glow.\n  if (s.rain > 0.3) {\n    const dx = sin(s.wa);\n    const dy = -cos(s.wa);\n    for (let t = 30; t \u003c 175; t += 0.7) {\n      const x = round(58 + dx * t);\n      const y = round(150 + dy * t);\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      for (let e = 0; e \u003c 2; e++) {\n        const i = (y * W + min(W - 1, x + e)) * 3;\n        O[i] *= 0.12;\n        O[i + 1] *= 0.12;\n        O[i + 2] *= 0.12;\n      }\n    }\n  }\n  // A soft shoulder, with a little of an overbright channel spilling into the\n  // others so bright lights burn toward white.\n  const sh = (v) => (v \u003c 190 ? v : 255 - 65 * exp(-(v - 190) / 65));\n  for (let i = 0, p = 0; p \u003c N; p++, i += 3) {\n    let r = O[i];\n    let g = O[i + 1];\n    let b = O[i + 2];\n    const m = max(r, g, b);\n    if (m > 255) {\n      const sp = (m - 255) * 0.22;\n      r += sp;\n      g += sp;\n      b += sp;\n    }\n    display.setPixel(p % W, (p / W) | 0, sh(r), sh(g), sh(b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Glow=0..1, Speed=0.2..3, Weather=0..3, Crosswind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Glow","min":0,"max":1,"about":"The colour of the town's glow on the clouds and of the sodium lamps on the horizon: sodium amber at 0, turning through green and blue to violet and back to amber at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the airliner flies: at 2 an approach from far out to the end of the rollout takes about 18 s and the rabbit runs twice a second; at 0.2 everything runs ten times slower."},{"name":"Weather","min":0,"max":3,"about":"A clear night with broken cloud at 0, haze where every light blooms at 1, rain on the windscreen with the wiper going at 2, and fog at 3 where the approach lights come out of the murk late."},{"name":"Crosswind","min":-1,"max":1,"about":"The airliner crabs into the wind from the left or the right, so the runway sits off to one side until it swings straight ahead at the flare."}],"start":[0,2,0,0.06],"measures":{"motion":1.2895,"detail":0.0365,"edges":0.3949,"complexity":1.2312,"coverage":0.4908,"colour":0.0984,"drift":0.1085},"knobResponse":[0.0373,0.0632,0.3041,0.0884]},{"slug":"fire","title":"Fire","family":"sim","round":1,"note":"데모신의 불이에요. 바닥의 열이 올라가며 식고, K1 을 돌리면 나무 불에서 가스 불, 붕소 불까지 색이 바뀌어요.","idea":"The demoscene fire: heat poured in along the bottom rises a row at a time, each LED the average of the ones below it less a little cooling, and the cooling itself rides up with the flames.","buttons":"K1 tap drops a log on, and the fire flares and throws sparks.","code":"// ===== Patternflow pattern =====\n// Title:   Fire\n// Family:  sim\n// Idea:    The demoscene fire: heat poured in along the bottom rises a row at a time, each LED the average of the ones below it less a little cooling, and the cooling itself rides up with the flames.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Height=0.6..4, Wind=-1..1, Crackle=0..1\n//\n// Knob 1: Colour. What is burning: wood, then potassium lilac, gas blue, copper teal and boron green.\n// Knob 2: Height. How far the flames climb before they cool, from low licks along the bottom to a wall that leaves the top.\n// Knob 3: Wind. At 0 the flames stand up; either way they lean and the gusts come with it.\n// Knob 4: Crackle. Rougher air in the flames, pops of heat in the bed, and sparks thrown up out of them, from the odd one to a shower.\n// Buttons: K1 tap drops a log on, and the fire flares and throws sparks.\n\nconst W = 64;\nconst H = 128;\n// Two rows below the panel hold the fuel.\nconst BH = H + 2;\nconst STEPS = 60;\nconst E = 160;\nconst POPS = 6;\n\n// Heat to colour: the same nine heats for every palette, one palette per thing burning.\nconst HEATS = [0, 0.08, 0.18, 0.3, 0.42, 0.55, 0.7, 0.84, 1];\nconst PALETTES = [\n  [0x000000, 0x000000, 0x3a0400, 0xa01000, 0xe83a00, 0xff7a00, 0xffb41c, 0xffe070, 0xfff6d0],\n  [0x000000, 0x000000, 0x26003a, 0x6410a0, 0xa830e0, 0xd868ff, 0xf0a0ff, 0xffd0ff, 0xfff2ff],\n  [0x000000, 0x000000, 0x00083a, 0x001ca0, 0x0848ff, 0x2888ff, 0x60c0ff, 0xa8e8ff, 0xf0fcff],\n  [0x000000, 0x000000, 0x002428, 0x006070, 0x00a0a8, 0x10d8c8, 0x60f8e0, 0xb0fff0, 0xf2fffc],\n  [0x000000, 0x000000, 0x002a06, 0x00701a, 0x08b030, 0x40e840, 0x98ff60, 0xd0ffa0, 0xf6fff0],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth value noise over x and time.\nfunction noise(x, t) {\n  const ix = Math.floor(x);\n  const it = Math.floor(t);\n  const fx = x - ix;\n  const ft = t - it;\n  const ux = fx * fx * (3 - 2 * fx);\n  const ut = ft * ft * (3 - 2 * ft);\n  const a = hash(ix, it) * (1 - ux) + hash(ix + 1, it) * ux;\n  const b = hash(ix, it + 1) * (1 - ux) + hash(ix + 1, it + 1) * ux;\n  return a * (1 - ut) + b * ut;\n}\n\nfunction buildPalette(colours) {\n  const lut = new Float32Array(256 * 3);\n  let s = 0;\n  for (let i = 0; i \u003c 256; i++) {\n    const v = i / 255;\n    while (s \u003c HEATS.length - 2 && v > HEATS[s + 1]) s++;\n    const c0 = colours[s];\n    const c1 = colours[s + 1];\n    const f = Math.max(0, Math.min(1, (v - HEATS[s]) / (HEATS[s + 1] - HEATS[s])));\n    lut[i * 3] = ((c0 >> 16) & 255) * (1 - f) + ((c1 >> 16) & 255) * f;\n    lut[i * 3 + 1] = ((c0 >> 8) & 255) * (1 - f) + ((c1 >> 8) & 255) * f;\n    lut[i * 3 + 2] = (c0 & 255) * (1 - f) + (c1 & 255) * f;\n  }\n  return lut;\n}\n\nexport function setup(params) {\n  params.heat = new Float32Array(W * BH);\n  params.next = new Float32Array(W * BH);\n  params.cool = new Float32Array(W * BH);\n  params.luts = PALETTES.map(buildPalette);\n  params.lut = new Float32Array(256 * 3);\n  params.lutKey = -1;\n  params.ex = new Float32Array(E);\n  params.ey = new Float32Array(E);\n  params.evx = new Float32Array(E);\n  params.evy = new Float32Array(E);\n  params.eage = new Float32Array(E);\n  params.elife = new Float32Array(E);\n  params.enext = 0;\n  params.n = 0;\n  params.acc = 0;\n  params.spark = 0;\n  params.flare = 0;\n  params.t = 0;\n  params.shift = new Float32Array(BH);\n  params.popX = new Float32Array(POPS);\n  params.popS = new Float32Array(POPS);\n  params.popClock = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.started = false;\n}\n\nfunction throwEmber(params, wind, x) {\n  const i = params.enext;\n  params.enext = (i + 1) % E;\n  params.ex[i] = x + (Math.random() - 0.5) * 8;\n  params.ey[i] = H - 6 - Math.random() * 20;\n  params.evx[i] = wind * 26 + (Math.random() - 0.5) * 14;\n  // Thrown hard enough to clear the flames, which now stand about ninety rows.\n  params.evy[i] = -(40 + Math.random() * 55);\n  params.eage[i] = 0;\n  params.elife[i] = 1 + Math.random() * 1.6;\n}\n\nfunction step(params, height, wind, crackle) {\n  const heat = params.heat;\n  const next = params.next;\n  const cool = params.cool;\n  const n = ++params.n;\n  const T = n / STEPS;\n\n  // A new row of cooling enters at the bottom; the rows above it moved up one with the flames.\n  const row = ((BH - 1 + n) % BH) * W;\n  for (let x = 0; x \u003c W; x++) {\n    const c = noise(x * 0.16, T * 3.5) * 0.6 + noise(x * 0.42 + 40, T * 8) * 0.4;\n    cool[row + x] = c * c * c * 3.2 + 0.08;\n  }\n\n  // Fuel along the bottom: a slow swell of hot and less hot places, and a fast flicker on top.\n  const flare = 1 + params.flare * 0.2;\n  for (let x = 0; x \u003c W; x++) {\n    const bed = 0.72 + 0.28 * noise(x * 0.07, T * 0.3 + 9);\n    const flick = 0.82 + 0.18 * noise(x * 0.35, T * 9);\n    let pop = 0;\n    for (let j = 0; j \u003c POPS; j++) {\n      if (params.popS[j] \u003c 0.02) continue;\n      const d = x - params.popX[j];\n      pop += params.popS[j] * Math.exp(-d * d * 0.03);\n    }\n    const f = Math.min(1, 0.95 * bed * flick * flare + pop * 0.4);\n    heat[(BH - 1) * W + x] = f;\n    heat[(BH - 2) * W + x] = f;\n  }\n\n  // Wind leans the flames, more at the top than at the base, and gusts with its strength.\n  const gust = wind * (0.65 + 0.7 * noise(T * 0.6, 3.3));\n  const shift = params.shift;\n  for (let y = 0; y \u003c BH - 2; y++) {\n    const up = 1 - y / BH;\n    // Turbulence: a sideways shove that changes smoothly from row to row, so the tongues writhe without tearing.\n    const slow = (noise(y * 0.13, T * 3.1) - 0.5) * 1.3 * (0.9 + crackle * 0.6);\n    const fast = (noise(y * 0.37 + 17, T * 7.3) - 0.5) * 0.7 * (0.9 + crackle * 2.4);\n    shift[y] = gust * (0.25 + 0.6 * up) + slow + fast;\n  }\n\n  // Half the loss a row of the 64-row panel had, so the flames climb twice as many rows.\n  const lose = 1.7 / (12 + height * 32);\n  for (let y = 0; y \u003c BH - 2; y++) {\n    const below = (y + 1) * W;\n    const below2 = (y + 2) * W;\n    const crow = ((y + n) % BH) * W;\n    const sx = shift[y];\n    const i0 = Math.floor(sx);\n    const f = sx - i0;\n    for (let x = 0; x \u003c W; x++) {\n      // Sample the row below, moved sideways by the wind, with a soft three-tap blur.\n      const b = x - i0;\n      const am = heat[below + ((b - 1 + W * 4) % W)];\n      const a0 = heat[below + ((b + W * 4) % W)];\n      const a1 = heat[below + ((b + 1 + W * 4) % W)];\n      const ap = heat[below + ((b - 2 + W * 4) % W)];\n      const l = am * (1 - f) + ap * f;\n      const c = a0 * (1 - f) + am * f;\n      const r = a1 * (1 - f) + a0 * f;\n      const d = heat[below2 + ((b + W * 4) % W)] * (1 - f) + heat[below2 + ((b - 1 + W * 4) % W)] * f;\n      const v = (l + 6 * c + r) * 0.09375 + d * 0.25 - cool[crow + x] * lose;\n      next[y * W + x] = v > 0 ? v : 0;\n    }\n  }\n  for (let i = 0; i \u003c (BH - 2) * W; i++) heat[i] = next[i];\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  const height = Math.max(0.1, k[1]);\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const crackle = Math.max(0, Math.min(1, k[3]));\n\n  // Colour: five palettes in a row, each held for a while before it blends into the next.\n  const pos = Math.max(0, Math.min(1, k[0])) * (PALETTES.length - 1);\n  if (pos !== params.lutKey) {\n    params.lutKey = pos;\n    const a = Math.min(PALETTES.length - 2, Math.floor(pos));\n    const u = pos - a;\n    const g = Math.max(0, Math.min(1, (u - 0.2) / 0.6));\n    const m = g * g * (3 - 2 * g);\n    const la = params.luts[a];\n    const lb = params.luts[a + 1];\n    for (let i = 0; i \u003c la.length; i++) params.lut[i] = la[i] * (1 - m) + lb[i] * m;\n  }\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.flare = 1;\n    for (let j = 0; j \u003c 30; j++) throwEmber(params, wind, Math.random() * W);\n  }\n  params.flare = Math.max(0, params.flare - dt * 0.6);\n\n  params.acc += dt * STEPS;\n  let steps = Math.floor(params.acc);\n  params.acc -= steps;\n  if (steps > 6) steps = 6;\n  // A pop: a knot in the wood bursts, a hot spot flares in the bed and spits a handful of sparks.\n  params.popClock += dt * crackle * crackle * 4;\n  for (let j = 0; j \u003c POPS; j++) params.popS[j] *= Math.exp(-dt * 4);\n  while (params.popClock >= 1) {\n    params.popClock -= 1;\n    let j = 0;\n    for (let m = 1; m \u003c POPS; m++) if (params.popS[m] \u003c params.popS[j]) j = m;\n    params.popX[j] = 6 + Math.random() * (W - 12);\n    params.popS[j] = 1;\n    const n = 4 + Math.floor(Math.random() * 8);\n    for (let m = 0; m \u003c n; m++) throwEmber(params, wind, params.popX[j]);\n  }\n  // The first frame finds the fire already burning rather than a cold grate.\n  if (!params.started) {\n    params.started = true;\n    steps = 150;\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, height + params.flare * 1.2, wind, crackle);\n\n  params.spark += dt * (crackle * crackle * 40 + crackle * 6);\n  while (params.spark >= 1) {\n    params.spark -= 1;\n    throwEmber(params, wind, Math.random() * W);\n  }\n  const t = params.t;\n  for (let i = 0; i \u003c E; i++) {\n    if (params.eage[i] >= params.elife[i]) continue;\n    params.eage[i] += dt;\n    // Sparks ride the hot air: they wander, slow as they cool, and drift with the wind.\n    params.evx[i] += ((Math.sin(t * 7 + i * 1.7) * 30) + (wind * 26 - params.evx[i]) * 1.2) * dt;\n    params.evy[i] += (-params.evy[i] * 0.6 - 6) * dt;\n    params.ex[i] += params.evx[i] * dt;\n    params.ey[i] += params.evy[i] * dt;\n    if (params.ey[i] \u003c -2) params.eage[i] = params.elife[i];\n  }\n}\n\nexport function draw(display, params, time) {\n  const heat = params.heat;\n  const lut = params.lut;\n  const buf = params.buf;\n  for (let i = 0; i \u003c W * H; i++) {\n    let v = heat[i];\n    if (v > 1) v = 1;\n    const c = Math.floor(v * 255) * 3;\n    buf[i * 3] = lut[c];\n    buf[i * 3 + 1] = lut[c + 1];\n    buf[i * 3 + 2] = lut[c + 2];\n  }\n  for (let i = 0; i \u003c E; i++) {\n    if (params.eage[i] >= params.elife[i]) continue;\n    const life = 1 - params.eage[i] / params.elife[i];\n    // An ember is drawn with the palette as it cools: white-hot, then its own colour, then out.\n    const c = Math.floor((0.35 + 0.65 * life) * 255) * 3;\n    const ex = params.ex[i];\n    const ey = params.ey[i];\n    const x0 = Math.floor(ex - 0.5);\n    const y0 = Math.floor(ey - 0.5);\n    for (let yy = y0; yy \u003c= y0 + 1; yy++) {\n      if (yy \u003c 0 || yy >= H) continue;\n      const wy = 1 - Math.abs(yy + 0.5 - ey);\n      for (let xx = x0; xx \u003c= x0 + 1; xx++) {\n        if (xx \u003c 0 || xx >= W) continue;\n        const w = wy * (1 - Math.abs(xx + 0.5 - ex)) * Math.min(1, life * 3);\n        if (w \u003c= 0) continue;\n        const o = (yy * W + xx) * 3;\n        buf[o] = Math.min(255, buf[o] + lut[c] * w);\n        buf[o + 1] = Math.min(255, buf[o + 1] + lut[c + 1] * w);\n        buf[o + 2] = Math.min(255, buf[o + 2] + lut[c + 2] * w);\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, buf[o], buf[o + 1], buf[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-fire","type":"code","name":"fire","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Fire\n// Family:  sim\n// Idea:    The demoscene fire: heat poured in along the bottom rises a row at a time, each LED the average of the ones below it less a little cooling, and the cooling itself rides up with the flames.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Height=0.6..4, Wind=-1..1, Crackle=0..1\n//\n// Knob 1: Colour. What is burning: wood, then potassium lilac, gas blue, copper teal and boron green.\n// Knob 2: Height. How far the flames climb before they cool, from low licks along the bottom to a wall that leaves the top.\n// Knob 3: Wind. At 0 the flames stand up; either way they lean and the gusts come with it.\n// Knob 4: Crackle. Rougher air in the flames, pops of heat in the bed, and sparks thrown up out of them, from the odd one to a shower.\n// Buttons: K1 tap drops a log on, and the fire flares and throws sparks.\n\nconst W = 64;\nconst H = 128;\n// Two rows below the panel hold the fuel.\nconst BH = H + 2;\nconst STEPS = 60;\nconst E = 160;\nconst POPS = 6;\n\n// Heat to colour: the same nine heats for every palette, one palette per thing burning.\nconst HEATS = [0, 0.08, 0.18, 0.3, 0.42, 0.55, 0.7, 0.84, 1];\nconst PALETTES = [\n  [0x000000, 0x000000, 0x3a0400, 0xa01000, 0xe83a00, 0xff7a00, 0xffb41c, 0xffe070, 0xfff6d0],\n  [0x000000, 0x000000, 0x26003a, 0x6410a0, 0xa830e0, 0xd868ff, 0xf0a0ff, 0xffd0ff, 0xfff2ff],\n  [0x000000, 0x000000, 0x00083a, 0x001ca0, 0x0848ff, 0x2888ff, 0x60c0ff, 0xa8e8ff, 0xf0fcff],\n  [0x000000, 0x000000, 0x002428, 0x006070, 0x00a0a8, 0x10d8c8, 0x60f8e0, 0xb0fff0, 0xf2fffc],\n  [0x000000, 0x000000, 0x002a06, 0x00701a, 0x08b030, 0x40e840, 0x98ff60, 0xd0ffa0, 0xf6fff0],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth value noise over x and time.\nfunction noise(x, t) {\n  const ix = Math.floor(x);\n  const it = Math.floor(t);\n  const fx = x - ix;\n  const ft = t - it;\n  const ux = fx * fx * (3 - 2 * fx);\n  const ut = ft * ft * (3 - 2 * ft);\n  const a = hash(ix, it) * (1 - ux) + hash(ix + 1, it) * ux;\n  const b = hash(ix, it + 1) * (1 - ux) + hash(ix + 1, it + 1) * ux;\n  return a * (1 - ut) + b * ut;\n}\n\nfunction buildPalette(colours) {\n  const lut = new Float32Array(256 * 3);\n  let s = 0;\n  for (let i = 0; i \u003c 256; i++) {\n    const v = i / 255;\n    while (s \u003c HEATS.length - 2 && v > HEATS[s + 1]) s++;\n    const c0 = colours[s];\n    const c1 = colours[s + 1];\n    const f = Math.max(0, Math.min(1, (v - HEATS[s]) / (HEATS[s + 1] - HEATS[s])));\n    lut[i * 3] = ((c0 >> 16) & 255) * (1 - f) + ((c1 >> 16) & 255) * f;\n    lut[i * 3 + 1] = ((c0 >> 8) & 255) * (1 - f) + ((c1 >> 8) & 255) * f;\n    lut[i * 3 + 2] = (c0 & 255) * (1 - f) + (c1 & 255) * f;\n  }\n  return lut;\n}\n\nexport function setup(params) {\n  params.heat = new Float32Array(W * BH);\n  params.next = new Float32Array(W * BH);\n  params.cool = new Float32Array(W * BH);\n  params.luts = PALETTES.map(buildPalette);\n  params.lut = new Float32Array(256 * 3);\n  params.lutKey = -1;\n  params.ex = new Float32Array(E);\n  params.ey = new Float32Array(E);\n  params.evx = new Float32Array(E);\n  params.evy = new Float32Array(E);\n  params.eage = new Float32Array(E);\n  params.elife = new Float32Array(E);\n  params.enext = 0;\n  params.n = 0;\n  params.acc = 0;\n  params.spark = 0;\n  params.flare = 0;\n  params.t = 0;\n  params.shift = new Float32Array(BH);\n  params.popX = new Float32Array(POPS);\n  params.popS = new Float32Array(POPS);\n  params.popClock = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.started = false;\n}\n\nfunction throwEmber(params, wind, x) {\n  const i = params.enext;\n  params.enext = (i + 1) % E;\n  params.ex[i] = x + (Math.random() - 0.5) * 8;\n  params.ey[i] = H - 6 - Math.random() * 20;\n  params.evx[i] = wind * 26 + (Math.random() - 0.5) * 14;\n  // Thrown hard enough to clear the flames, which now stand about ninety rows.\n  params.evy[i] = -(40 + Math.random() * 55);\n  params.eage[i] = 0;\n  params.elife[i] = 1 + Math.random() * 1.6;\n}\n\nfunction step(params, height, wind, crackle) {\n  const heat = params.heat;\n  const next = params.next;\n  const cool = params.cool;\n  const n = ++params.n;\n  const T = n / STEPS;\n\n  // A new row of cooling enters at the bottom; the rows above it moved up one with the flames.\n  const row = ((BH - 1 + n) % BH) * W;\n  for (let x = 0; x \u003c W; x++) {\n    const c = noise(x * 0.16, T * 3.5) * 0.6 + noise(x * 0.42 + 40, T * 8) * 0.4;\n    cool[row + x] = c * c * c * 3.2 + 0.08;\n  }\n\n  // Fuel along the bottom: a slow swell of hot and less hot places, and a fast flicker on top.\n  const flare = 1 + params.flare * 0.2;\n  for (let x = 0; x \u003c W; x++) {\n    const bed = 0.72 + 0.28 * noise(x * 0.07, T * 0.3 + 9);\n    const flick = 0.82 + 0.18 * noise(x * 0.35, T * 9);\n    let pop = 0;\n    for (let j = 0; j \u003c POPS; j++) {\n      if (params.popS[j] \u003c 0.02) continue;\n      const d = x - params.popX[j];\n      pop += params.popS[j] * Math.exp(-d * d * 0.03);\n    }\n    const f = Math.min(1, 0.95 * bed * flick * flare + pop * 0.4);\n    heat[(BH - 1) * W + x] = f;\n    heat[(BH - 2) * W + x] = f;\n  }\n\n  // Wind leans the flames, more at the top than at the base, and gusts with its strength.\n  const gust = wind * (0.65 + 0.7 * noise(T * 0.6, 3.3));\n  const shift = params.shift;\n  for (let y = 0; y \u003c BH - 2; y++) {\n    const up = 1 - y / BH;\n    // Turbulence: a sideways shove that changes smoothly from row to row, so the tongues writhe without tearing.\n    const slow = (noise(y * 0.13, T * 3.1) - 0.5) * 1.3 * (0.9 + crackle * 0.6);\n    const fast = (noise(y * 0.37 + 17, T * 7.3) - 0.5) * 0.7 * (0.9 + crackle * 2.4);\n    shift[y] = gust * (0.25 + 0.6 * up) + slow + fast;\n  }\n\n  // Half the loss a row of the 64-row panel had, so the flames climb twice as many rows.\n  const lose = 1.7 / (12 + height * 32);\n  for (let y = 0; y \u003c BH - 2; y++) {\n    const below = (y + 1) * W;\n    const below2 = (y + 2) * W;\n    const crow = ((y + n) % BH) * W;\n    const sx = shift[y];\n    const i0 = Math.floor(sx);\n    const f = sx - i0;\n    for (let x = 0; x \u003c W; x++) {\n      // Sample the row below, moved sideways by the wind, with a soft three-tap blur.\n      const b = x - i0;\n      const am = heat[below + ((b - 1 + W * 4) % W)];\n      const a0 = heat[below + ((b + W * 4) % W)];\n      const a1 = heat[below + ((b + 1 + W * 4) % W)];\n      const ap = heat[below + ((b - 2 + W * 4) % W)];\n      const l = am * (1 - f) + ap * f;\n      const c = a0 * (1 - f) + am * f;\n      const r = a1 * (1 - f) + a0 * f;\n      const d = heat[below2 + ((b + W * 4) % W)] * (1 - f) + heat[below2 + ((b - 1 + W * 4) % W)] * f;\n      const v = (l + 6 * c + r) * 0.09375 + d * 0.25 - cool[crow + x] * lose;\n      next[y * W + x] = v > 0 ? v : 0;\n    }\n  }\n  for (let i = 0; i \u003c (BH - 2) * W; i++) heat[i] = next[i];\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  const height = Math.max(0.1, k[1]);\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const crackle = Math.max(0, Math.min(1, k[3]));\n\n  // Colour: five palettes in a row, each held for a while before it blends into the next.\n  const pos = Math.max(0, Math.min(1, k[0])) * (PALETTES.length - 1);\n  if (pos !== params.lutKey) {\n    params.lutKey = pos;\n    const a = Math.min(PALETTES.length - 2, Math.floor(pos));\n    const u = pos - a;\n    const g = Math.max(0, Math.min(1, (u - 0.2) / 0.6));\n    const m = g * g * (3 - 2 * g);\n    const la = params.luts[a];\n    const lb = params.luts[a + 1];\n    for (let i = 0; i \u003c la.length; i++) params.lut[i] = la[i] * (1 - m) + lb[i] * m;\n  }\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.flare = 1;\n    for (let j = 0; j \u003c 30; j++) throwEmber(params, wind, Math.random() * W);\n  }\n  params.flare = Math.max(0, params.flare - dt * 0.6);\n\n  params.acc += dt * STEPS;\n  let steps = Math.floor(params.acc);\n  params.acc -= steps;\n  if (steps > 6) steps = 6;\n  // A pop: a knot in the wood bursts, a hot spot flares in the bed and spits a handful of sparks.\n  params.popClock += dt * crackle * crackle * 4;\n  for (let j = 0; j \u003c POPS; j++) params.popS[j] *= Math.exp(-dt * 4);\n  while (params.popClock >= 1) {\n    params.popClock -= 1;\n    let j = 0;\n    for (let m = 1; m \u003c POPS; m++) if (params.popS[m] \u003c params.popS[j]) j = m;\n    params.popX[j] = 6 + Math.random() * (W - 12);\n    params.popS[j] = 1;\n    const n = 4 + Math.floor(Math.random() * 8);\n    for (let m = 0; m \u003c n; m++) throwEmber(params, wind, params.popX[j]);\n  }\n  // The first frame finds the fire already burning rather than a cold grate.\n  if (!params.started) {\n    params.started = true;\n    steps = 150;\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, height + params.flare * 1.2, wind, crackle);\n\n  params.spark += dt * (crackle * crackle * 40 + crackle * 6);\n  while (params.spark >= 1) {\n    params.spark -= 1;\n    throwEmber(params, wind, Math.random() * W);\n  }\n  const t = params.t;\n  for (let i = 0; i \u003c E; i++) {\n    if (params.eage[i] >= params.elife[i]) continue;\n    params.eage[i] += dt;\n    // Sparks ride the hot air: they wander, slow as they cool, and drift with the wind.\n    params.evx[i] += ((Math.sin(t * 7 + i * 1.7) * 30) + (wind * 26 - params.evx[i]) * 1.2) * dt;\n    params.evy[i] += (-params.evy[i] * 0.6 - 6) * dt;\n    params.ex[i] += params.evx[i] * dt;\n    params.ey[i] += params.evy[i] * dt;\n    if (params.ey[i] \u003c -2) params.eage[i] = params.elife[i];\n  }\n}\n\nexport function draw(display, params, time) {\n  const heat = params.heat;\n  const lut = params.lut;\n  const buf = params.buf;\n  for (let i = 0; i \u003c W * H; i++) {\n    let v = heat[i];\n    if (v > 1) v = 1;\n    const c = Math.floor(v * 255) * 3;\n    buf[i * 3] = lut[c];\n    buf[i * 3 + 1] = lut[c + 1];\n    buf[i * 3 + 2] = lut[c + 2];\n  }\n  for (let i = 0; i \u003c E; i++) {\n    if (params.eage[i] >= params.elife[i]) continue;\n    const life = 1 - params.eage[i] / params.elife[i];\n    // An ember is drawn with the palette as it cools: white-hot, then its own colour, then out.\n    const c = Math.floor((0.35 + 0.65 * life) * 255) * 3;\n    const ex = params.ex[i];\n    const ey = params.ey[i];\n    const x0 = Math.floor(ex - 0.5);\n    const y0 = Math.floor(ey - 0.5);\n    for (let yy = y0; yy \u003c= y0 + 1; yy++) {\n      if (yy \u003c 0 || yy >= H) continue;\n      const wy = 1 - Math.abs(yy + 0.5 - ey);\n      for (let xx = x0; xx \u003c= x0 + 1; xx++) {\n        if (xx \u003c 0 || xx >= W) continue;\n        const w = wy * (1 - Math.abs(xx + 0.5 - ex)) * Math.min(1, life * 3);\n        if (w \u003c= 0) continue;\n        const o = (yy * W + xx) * 3;\n        buf[o] = Math.min(255, buf[o] + lut[c] * w);\n        buf[o + 1] = Math.min(255, buf[o + 1] + lut[c + 1] * w);\n        buf[o + 2] = Math.min(255, buf[o + 2] + lut[c + 2] * w);\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, buf[o], buf[o + 1], buf[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Colour=0..1, Height=0.6..4, Wind=-1..1, Crackle=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Colour","min":0,"max":1,"about":"What is burning: wood, then potassium lilac, gas blue, copper teal and boron green."},{"name":"Height","min":0.6,"max":4,"about":"How far the flames climb before they cool, from low licks along the bottom to a wall that leaves the top."},{"name":"Wind","min":-1,"max":1,"about":"At 0 the flames stand up; either way they lean and the gusts come with it."},{"name":"Crackle","min":0,"max":1,"about":"Rougher air in the flames, pops of heat in the bed, and sparks thrown up out of them, from the odd one to a shower."}],"start":[0,2,0,0.06],"measures":{"motion":0.9647,"detail":0.0218,"edges":0.1201,"complexity":0.8283,"coverage":0.5059,"colour":0.4964,"drift":0.2161},"knobResponse":[0.3207,0.2786,0.0846,0.0537]},{"slug":"fireflies","title":"Fireflies","family":"insect","round":16,"note":"풀밭 위 반딧불이 200마리가 따로 깜박이다가 서로의 깜박임을 보고 박자를 맞춰, 한꺼번에 깜박이는 무리와 어두운 쉼이 번갈아 와요. K4 가 결합의 세기이고, K1 을 누르면 손전등이 지나가며 박자를 흩어요.","idea":"Synchronous fireflies over a meadow under the trees flash out of step at first, then pull each other into bursts of flashes in unison with dark pauses between, because each one's clock jumps ahead when it sees a neighbour flash.","buttons":"K1 tap sweeps a bare flashlight across the meadow from left to right; every firefly in the beam goes dark and loses its place in both its clocks, and the sync has to form again.","code":"// ===== Patternflow pattern =====\n// Title:   Fireflies\n// Family:  insect\n// Idea:    Synchronous fireflies over a meadow under the trees flash out of step at first, then pull each other into bursts of flashes in unison with dark pauses between, because each one's clock jumps ahead when it sees a neighbour flash.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Mirollo and Strogatz's pulse-coupled oscillators (1990), after the synchronous firefly Photinus carolinus at Elkmont in the Great Smoky Mountains\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Moon=0..1, Pace=0.5..4, Fireflies=200..480, Coupling=0..0.25\n//\n// Knob 1: Moon. At 0 a moonless night; turned up, a moon climbs out of the far trees into a gap in the leaves, the sky and the grass go silver, and fewer fireflies fly, down to one in four at full moon.\n// Knob 2: Pace. At 2 the flashes in a burst come half a second apart, as Photinus carolinus flashes, and a burst comes round every 5.5 s; at 0.5 the flashes are two seconds apart, at 4 a quarter second, and the fireflies fly faster with it.\n// Knob 3: Fireflies. How many are out, from 200 to 480; half of them are farther than 5.5 m and show as sparks along the forest edge.\n// Knob 4: Coupling. How far a clock jumps for each flash it sees: at 0 every firefly keeps its own time and the meadow twinkles for ever; at 0.06 the flashes fall into step within a few seconds and the first dark pauses open; at 0.25 the swarm locks in its first burst.\n// Buttons: K1 tap sweeps a bare flashlight across the meadow from left to right; every firefly in the beam goes dark and loses its place in both its clocks, and the sync has to form again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXF = 480;\n// The camera: eye 1.5 m above the meadow, the horizon on row 74, 56 LEDs to one unit of tan.\nconst EYE = 1.5;\nconst HOR = 74;\nconst FOC = 56;\nconst NEAR = 1.4;\nconst FAR = 22;\n// What stands in the way, by distance: tall grass at our feet, a tulip poplar 6 m off whose\n// crown hangs over the top of the panel, a thinner trunk at 10 m and the far forest edge.\nconst GRASS_D = 2.2;\nconst TREE_D = 6;\nconst TREE2_D = 10;\nconst EDGE_D = 30;\nconst SKY_D = 1e6;\n\n// Two clocks in each firefly. The flash clock beats every half second; the burst clock comes\n// round every 5.5 s and opens a burst of four to six flashes on the next beats. Photinus\n// carolinus flashes five to eight times and then waits six to nine seconds; the panel keeps\n// the half second and shortens the wait, so a burst comes round inside a few seconds.\nconst GAP = 0.5;\nconst CYCLE = 5.5;\n// Mirollo and Strogatz's state curve x = ln(1 + (e^b - 1) phase) / b. It is concave, so a seen\n// flash moves a clock that is far from firing a little and one about to fire a lot, and the\n// ones pushed over the top fire together with the flash that pushed them.\nconst BEND = 3;\nconst EB = Math.exp(BEND) - 1;\n// For the first quarter of a beat after its own flash a firefly does not respond, and for the\n// first 55% of its burst cycle its burst clock does not either. Without the first, a crowd\n// flashing over two frames shoves every clock round again and the beat runs away.\nconst REST = 0.25;\nconst OPEN = 0.55;\n// How hard the coupling knob pulls each clock, for the share of neighbours seen flashing.\n// The burst clock only hears first flashes, the flash that ends somebody's dark.\nconst KF = 3;\nconst KB = 16;\n\n// Who sees whom: the panel in 8 x 8 LED cells, and a flash seen from a cell d cells away\n// counts e^(-d / 2.2), so a firefly sees about 20 LEDs round it well and nothing more than 40\n// rows away.\nconst CS = 8;\nconst GX = W / CS;\nconst GY = H / CS;\nconst SIGHT = 2.2;\n// Seconds the swarm runs before the first frame.\nconst PRE = 3;\n\n// The flash: up in 30 ms, held for 150 ms while it sags a little, then out in a fast fade,\n// gone a third of a second after it began. A firefly's lantern blinks rather than swells.\nconst RISE = 0.03;\nconst HOLD = 0.18;\nconst FADE = 0.05;\nconst LIGHT_END = 0.32;\n\n// Glows by distance: nearer than 2.6 m, 5 m, 10 m, and beyond. Each is a lantern, one LED\n// and a little cross round it, in a halo whose sigma (in LEDs) grows as it comes closer; the\n// farthest are the lantern alone.\nconst HALO_SIG = [1, 1.2, 1.8, 2.6];\nconst HALO = [0, 0.45, 0.5, 0.55];\nconst CORE = [0.75, 0.5, 0.5, 0.5];\nconst CROSS = [0.19, 0.12, 0.15, 0.2];\nconst REACH = [1, 3, 5, 7];\n\n// The females wait low in the grass and answer a burst with one dimmer flash in the dark after it.\nconst FEM = 14;\nconst REPLY = 0.6;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction fwd(phase) {\n  return Math.log(1 + EB * phase) / BEND;\n}\n\nfunction inv(x) {\n  return (Math.exp(BEND * x) - 1) / EB;\n}\n\nfunction envelope(age) {\n  if (age \u003c RISE) return age / RISE;\n  if (age \u003c HOLD) return 1 - (0.15 * (age - RISE)) / (HOLD - RISE);\n  return 0.85 * Math.exp(-(age - HOLD) / FADE);\n}\n\nfunction q4(v) {\n  const q = Math.round(v / 4) * 4;\n  return q > 255 ? 255 : q;\n}\n\nfunction sizeOf(d) {\n  return d \u003c 2.6 ? 3 : d \u003c 5 ? 2 : d \u003c 10 ? 1 : 0;\n}\n\n// Sprites: dx, dy and weight for each glow size.\nfunction makeSprites() {\n  const out = [];\n  for (let c = 0; c \u003c 4; c++) {\n    const s = [];\n    const r = REACH[c];\n    const k = 1 / (2 * HALO_SIG[c] * HALO_SIG[c]);\n    for (let dy = -r; dy \u003c= r; dy++)\n      for (let dx = -r; dx \u003c= r; dx++) {\n        const ring = Math.abs(dx) + Math.abs(dy);\n        const w = HALO[c] * Math.exp(-(dx * dx + dy * dy) * k) + (ring === 0 ? CORE[c] : ring === 1 ? CROSS[c] : 0);\n        if (w > 0.02) s.push(dx, dy, w);\n      }\n    out.push(s);\n  }\n  return out;\n}\n\n// Smooth value noise on a line and on the plane, 0..1.\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction noise2(x, y, seed) {\n  const i = Math.floor(x);\n  const j = Math.floor(y);\n  const u = smooth(0, 1, x - i);\n  const v = smooth(0, 1, y - j);\n  const a = hash(i + 131 * j, seed);\n  const b = hash(i + 1 + 131 * j, seed);\n  const c = hash(i + 131 * (j + 1), seed);\n  const d = hash(i + 1 + 131 * (j + 1), seed);\n  return (a * (1 - u) + b * u) * (1 - v) + (c * (1 - u) + d * u) * v;\n}\n\n// What each LED shows before any firefly: the scene drawn once as a map of parts.\nconst SKY = 0;\nconst MEADOW = 1;\nconst EDGE = 2;\nconst TRUNK2 = 3;\nconst TRUNK = 4;\nconst TRUNK_LIT = 5;\nconst CROWN = 6;\nconst BLADE = 7;\nconst TIP = 8;\nconst DEPTH = [SKY_D, SKY_D, EDGE_D, TREE2_D, TREE_D, TREE_D, TREE_D, GRASS_D, GRASS_D];\n// How much of the flashlight each part sends back: the haze of the sky, the far trees, bark.\nconst SURF = [0.15, 0.5, 0.3, 0.7, 0.9, 0.9, 0.5, 1, 1];\n\nfunction drawScene(P) {\n  const mask = P.mask;\n  // The far forest edge 30 m off: a row of crowns, most of them the round heads of tulip\n  // poplar and one in three the drooping point of a hemlock.\n  const top = new Float32Array(W).fill(HOR - 6);\n  for (let k = -1; k \u003c 13; k++) {\n    const cx = k * 5.5 + 4 * hash(k + 9, 12);\n    const w = 3 + 4 * hash(k + 9, 13);\n    const h = 5 + 11 * hash(k + 9, 14);\n    const hemlock = hash(k + 9, 15) \u003c 0.33;\n    for (let x = 0; x \u003c W; x++) {\n      const u = Math.abs(x - cx) / w;\n      if (u >= 1) continue;\n      const lift = hemlock ? h * 1.2 * (1 - u) ** 1.3 : h * Math.sqrt(1 - u * u);\n      top[x] = Math.min(top[x], HOR - 6 - lift);\n    }\n  }\n  const footA = HOR + (FOC * EYE) / TREE_D;\n  const footB = HOR + (FOC * EYE) / TREE2_D;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let m = y \u003c HOR ? SKY : MEADOW;\n      if (y \u003c= HOR && y >= top[x] + noise1(x * 0.7, 16) * 1.5) m = EDGE;\n      if (x >= 50 && x \u003c= 52 && y \u003c= footB) m = TRUNK2;\n      // The near trunk, 7 LEDs wide at the foot and 5 under the crown; a moon catches its right side.\n      const taper = 1 - y / footA;\n      if (x >= 3 + taper && x \u003c= 9 - taper && y \u003c= footA) m = x >= 8 - taper ? TRUNK_LIT : TRUNK;\n      // A limb leaves the trunk at row 50 and climbs into the leaves.\n      const t = clamp((x - 8) / 17, 0, 1);\n      const ly = 50 - 22 * t;\n      if (x >= 8 && x \u003c= 25 && Math.abs(y - ly - 2 * t * (1 - t)) \u003c 1.1 - 0.4 * t) m = TRUNK;\n      // The crown's lower edge hangs in lobes, high on the right where a window of sky opens for\n      // the moon; inside it the leaves part here and there.\n      const edge = 31 + 10 * (noise1(x / 7, 31) - 0.5) + 5 * (noise1(x / 2.7, 32) - 0.5) - 19 * smooth(27, 42, x) * (1 - smooth(57, 66, x));\n      if (y \u003c edge && !(y > 3 && y \u003c edge - 3 && noise2(x / 4.5, y / 3.5, 33) > 0.76)) m = CROWN;\n      mask[y * W + x] = m;\n    }\n  // Tall grass at our feet: blades leaning and bending, and seed heads on a few.\n  for (let k = 0; k \u003c 52; k++) {\n    const x0 = hash(k, 51) * W;\n    const tall = 9 + 20 * hash(k, 52) ** 1.5;\n    const lean = (hash(k, 53) - 0.5) * 0.5;\n    const bend = (hash(k, 54) - 0.5) * 0.02;\n    const head = hash(k, 55) \u003c 0.3;\n    for (let j = 0; j \u003c tall; j++) {\n      const x = Math.round(x0 + lean * j + bend * j * j);\n      const y = 127 - j;\n      if (x \u003c 0 || x >= W) continue;\n      const tip = j > tall - 3;\n      mask[y * W + x] = tip ? TIP : BLADE;\n      if (head && tip && x + 1 \u003c W) mask[y * W + x + 1] = TIP;\n    }\n  }\n}\n\nfunction bake(P, moon) {\n  const { bg, occ, surf, mask } = P;\n  const m = moon;\n  // The moon climbs from behind the far trees into the window in the leaves.\n  const mx = 46;\n  const my = HOR - 8 - 44 * smooth(0, 1, m);\n  const lv = smooth(0, 0.3, m);\n  for (let y = 0; y \u003c H; y++) {\n    const up = y / HOR;\n    const far = 1 - (y - HOR) / (H - HOR);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const part = mask[p];\n      let r;\n      let g;\n      let b;\n      if (part === SKY) {\n        // Deep blue overhead, paler down at the trees.\n        const lift = 0.55 + 0.45 * up;\n        r = 4 + 6 * up + 24 * m * lift;\n        g = 8 + 10 * up + 34 * m * lift;\n        b = 22 + 20 * up + 48 * m * lift;\n        if (m > 0) {\n          const dd = Math.sqrt((x - mx) ** 2 + (y - my) ** 2);\n          const disc = 1 - smooth(2.4, 3.4, dd);\n          const glow = Math.exp(-dd / 8) * 0.5;\n          r += lv * (disc * 210 + glow * 40);\n          g += lv * (disc * 208 + glow * 46);\n          b += lv * (disc * 186 + glow * 54);\n        }\n      } else if (part === MEADOW) {\n        // A faint sheen of sky on the far grass, darker at our feet.\n        r = 2 + 3 * far + 16 * m * (0.5 + 0.5 * far);\n        g = 4 + 4 * far + 24 * m * (0.5 + 0.5 * far);\n        b = 4 + 5 * far + 22 * m * (0.5 + 0.5 * far);\n      } else if (part === EDGE) {\n        r = 2 + 6 * m;\n        g = 4 + 10 * m;\n        b = 8 + 13 * m;\n      } else if (part === TRUNK2) {\n        r = 2 + 9 * m;\n        g = 3 + 10 * m;\n        b = 5 + 12 * m;\n      } else if (part === TRUNK || part === TRUNK_LIT) {\n        const lit = part === TRUNK_LIT ? 1 : 0.35;\n        r = 1 + 14 * m * lit;\n        g = 2 + 15 * m * lit;\n        b = 3 + 16 * m * lit;\n      } else if (part === CROWN) {\n        r = 1 + 6 * m;\n        g = 2 + 9 * m;\n        b = 4 + 10 * m;\n      } else {\n        // Grass: under a moon the tips catch the light.\n        const tip = part === TIP ? 1 : 0.5;\n        r = 1 + 12 * m * tip;\n        g = 2 + 18 * m * tip;\n        b = 2 + 14 * m * tip;\n      }\n      bg[p * 3] = r;\n      bg[p * 3 + 1] = g;\n      bg[p * 3 + 2] = b;\n      occ[p] = DEPTH[part];\n      surf[p] = part === MEADOW ? 0.35 + 0.65 * (1 - far) : SURF[part];\n    }\n  }\n  // Stars between the leaves and the far trees, fainter as the moon comes up.\n  for (let i = 0; i \u003c 30; i++) {\n    const x = Math.floor(hash(i * 7 + 3, 21) * W);\n    const y = Math.floor(2 + hash(i * 5 + 1, 22) * 62);\n    const p = y * W + x;\n    if (mask[p] !== SKY) continue;\n    const v = (34 + 56 * hash(i, 23)) * (1 - 0.65 * m);\n    bg[p * 3] += v * 0.85;\n    bg[p * 3 + 1] += v * 0.9;\n    bg[p * 3 + 2] += v;\n  }\n  P.baked = moon;\n}\n\nfunction burstLength() {\n  return 4 + Math.floor(Math.random() * 3);\n}\n\nfunction spawn(P, i) {\n  // Distance log-uniform from 1.4 to 22 m: as many between 2 and 4 m as between 10 and 20.\n  const d = NEAR * Math.pow(FAR / NEAR, Math.random());\n  P.d[i] = d;\n  P.X[i] = (Math.random() - 0.5) * (W / FOC) * d * 1.2;\n  // Three in ten keep low over the grass, most fly a metre to three metres up, and one in\n  // seven is up in the leaves.\n  const u = Math.random();\n  P.h[i] = u \u003c 0.3 ? 0.15 + Math.random() * 0.65 : u \u003c 0.86 ? 0.8 + Math.random() * 2.4 : 3.2 + Math.random() * 4.5;\n  const a = Math.random() * Math.PI * 2;\n  P.vx[i] = Math.cos(a) * 0.3;\n  P.vh[i] = (Math.random() - 0.5) * 0.1;\n  P.vd[i] = Math.sin(a) * 0.3;\n  // Each clock runs a little fast or slow: the beat within 3%, the burst within 5%.\n  P.tr[i] = (1 + (Math.random() - 0.5) * 0.06) / GAP;\n  P.pr[i] = (1 + (Math.random() - 0.5) * 0.1) / CYCLE;\n  P.th[i] = Math.random();\n  P.ps[i] = Math.random();\n  P.nf[i] = burstLength();\n  P.left[i] = Math.max(0, P.nf[i] - Math.floor((P.ps[i] * CYCLE) / GAP));\n  P.age[i] = 9;\n  P.hold[i] = 0;\n  P.shy[i] = Math.random();\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const key of [\"X\", \"h\", \"d\", \"vx\", \"vh\", \"vd\", \"tr\", \"pr\", \"th\", \"ps\", \"age\", \"hold\", \"shy\"]) P[key] = new Float32Array(MAXF);\n  P.nf = new Uint8Array(MAXF);\n  P.left = new Uint8Array(MAXF);\n  P.last = new Uint8Array(MAXF);\n  P.sx = new Int16Array(MAXF);\n  P.sy = new Int16Array(MAXF);\n  P.cell = new Int16Array(MAXF);\n  // Flashes and first flashes that began last frame, and fireflies flying, per cell; and the\n  // same three as each cell sees them through the sight kernel.\n  const G = GX * GY;\n  for (const key of [\"pa\", \"pf\", \"pc\", \"na\", \"nf2\", \"nc\", \"sa\", \"sf\", \"sc\"]) P[key] = new Float32Array(G);\n  P.kern = new Float32Array(G);\n  for (let y = 0; y \u003c GY; y++) for (let x = 0; x \u003c GX; x++) P.kern[y * GX + x] = Math.exp(-Math.sqrt(x * x + y * y) / SIGHT);\n  P.bg = new Float32Array(N * 3);\n  P.mask = new Uint8Array(N);\n  drawScene(P);\n  P.occ = new Float32Array(N);\n  P.surf = new Float32Array(N);\n  P.lum = new Float32Array(N);\n  P.ang = new Float32Array(N);\n  P.sprites = makeSprites();\n  // The flashlight is held at our chest, below the bottom of the panel.\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) P.ang[y * W + x] = Math.atan2(x - 32, 170 - y);\n  for (let i = 0; i \u003c MAXF; i++) spawn(P, i);\n  // The females sit still, low in the grass, 1.6 to 4 m away.\n  P.fx = new Int16Array(FEM);\n  P.fy = new Int16Array(FEM);\n  P.fd = new Float32Array(FEM);\n  P.fmem = new Float32Array(FEM);\n  P.fwait = new Float32Array(FEM);\n  P.fage = new Float32Array(FEM).fill(9);\n  for (let j = 0; j \u003c FEM; j++) {\n    const d = 1.6 + 2.4 * hash(j, 41);\n    P.fd[j] = d;\n    P.fx[j] = Math.round(4 + 56 * hash(j, 42));\n    P.fy[j] = Math.round(HOR + (FOC * (EYE - 0.15 - 0.3 * hash(j, 43))) / d);\n  }\n  Object.assign(P, { count: 200, moon: 0, baked: -1, torch: -1, beam: 0, beamOn: 0, started: false });\n}\n\nfunction flash(P, i, first) {\n  P.age[i] = 0;\n  P.na[P.cell[i]] += 1;\n  if (first) P.nf2[P.cell[i]] += 1;\n  P.last[i] = first ? 3 : 1;\n}\n\n// Spread the last frame's flashes and the crowd through the sight kernel, from each cell\n// that holds any to every cell within five rows of cells.\nfunction look(P) {\n  const { pa, pf, pc, sa, sf, sc, kern } = P;\n  sa.fill(0);\n  sf.fill(0);\n  sc.fill(0);\n  for (let s = 0; s \u003c GX * GY; s++) {\n    const a = pa[s];\n    const f = pf[s];\n    const c = pc[s];\n    if (a === 0 && c === 0) continue;\n    const sx = s % GX;\n    const sy = (s / GX) | 0;\n    for (let ty = Math.max(0, sy - 5); ty \u003c= Math.min(GY - 1, sy + 5); ty++) {\n      const row = Math.abs(ty - sy) * GX;\n      for (let tx = 0; tx \u003c GX; tx++) {\n        const k = kern[row + Math.abs(tx - sx)];\n        const t = ty * GX + tx;\n        sa[t] += a * k;\n        sf[t] += f * k;\n        sc[t] += c * k;\n      }\n    }\n  }\n}\n\nfunction advance(P, step, pace, count, eps, moon) {\n  // Last frame's flashes become what is seen this frame.\n  for (const [a, b] of [\n    [\"pa\", \"na\"],\n    [\"pf\", \"nf2\"],\n    [\"pc\", \"nc\"],\n  ]) {\n    const t = P[a];\n    P[a] = P[b];\n    P[b] = t;\n    P[b].fill(0);\n  }\n  look(P);\n  const { sa, sf, sc } = P;\n  // Fewer fly under a bright moon.\n  const shyLine = 0.75 * moon;\n\n  for (let i = 0; i \u003c count; i++) {\n    const out = P.shy[i] \u003c shyLine;\n    if (P.age[i] \u003c 9) P.age[i] += step;\n    const c = P.cell[i];\n    let seeA = 0;\n    let seeF = 0;\n    if (!out && P.hold[i] \u003c= 0) {\n      // What counts is the share of the neighbours seen flashing, so a thick swarm does not\n      // shove every clock round at once. A firefly does not see its own flash.\n      const crowd = Math.max(3, sc[c] - 1);\n      seeA = (sa[c] - (P.last[i] & 1)) / crowd;\n      seeF = (sf[c] - (P.last[i] >> 1)) / crowd;\n    }\n    P.last[i] = 0;\n    if (P.hold[i] > 0) P.hold[i] -= step;\n\n    let p = P.ps[i] + step * P.pr[i];\n    if (p > OPEN && seeF > 0 && eps > 0) {\n      const q = (p - OPEN) / (1 - OPEN);\n      const x = fwd(Math.min(1, q)) + eps * KB * seeF;\n      p = x >= 1 ? 1 : OPEN + (1 - OPEN) * inv(x);\n    }\n    if (p >= 1) {\n      p = 0;\n      P.nf[i] = burstLength();\n      P.left[i] = P.nf[i];\n    }\n    P.ps[i] = p;\n\n    let t = P.th[i] + step * P.tr[i];\n    if (t > REST && seeA > 0 && eps > 0) {\n      const u = (t - REST) / (1 - REST);\n      const x = fwd(Math.min(1, u)) + eps * KF * seeA;\n      t = x >= 1 ? 1 : REST + (1 - REST) * inv(x);\n    }\n    if (t >= 1) {\n      t = 0;\n      if (P.left[i] > 0) {\n        const first = P.left[i] === P.nf[i];\n        P.left[i]--;\n        if (!out && P.hold[i] \u003c= 0) flash(P, i, first);\n      }\n    }\n    P.th[i] = t;\n\n    // Flight: a slow wander, about a third of a metre a second, turning gently.\n    const fly = step * (0.6 + 0.4 * Math.min(2, pace / 2));\n    P.vx[i] += (Math.random() - 0.5) * 0.4 * fly;\n    P.vd[i] += (Math.random() - 0.5) * 0.4 * fly;\n    P.vh[i] += (Math.random() - 0.5) * 0.2 * fly - P.vh[i] * 0.5 * fly;\n    const sp = Math.sqrt(P.vx[i] * P.vx[i] + P.vd[i] * P.vd[i]);\n    if (sp > 0.45) {\n      P.vx[i] *= 0.45 / sp;\n      P.vd[i] *= 0.45 / sp;\n    }\n    let d = P.d[i] + P.vd[i] * fly;\n    if (d \u003c NEAR || d > FAR) {\n      P.vd[i] = -P.vd[i];\n      d = clamp(d, NEAR, FAR);\n    }\n    P.d[i] = d;\n    let X = P.X[i] + P.vx[i] * fly;\n    const half = (0.6 * W * d) / FOC;\n    if (X > half) X -= 2 * half;\n    else if (X \u003c -half) X += 2 * half;\n    P.X[i] = X;\n    let h = P.h[i] + P.vh[i] * fly;\n    if (h \u003c 0.2 || h > 8) {\n      P.vh[i] = -P.vh[i];\n      h = clamp(h, 0.2, 8);\n    }\n    P.h[i] = h;\n    const sx = Math.round(W / 2 + (FOC * X) / d);\n    const sy = Math.round(HOR + (FOC * (EYE - h)) / d);\n    P.sx[i] = sx;\n    P.sy[i] = sy;\n    P.cell[i] = clamp(sy >> 3, 0, GY - 1) * GX + clamp(sx >> 3, 0, GX - 1);\n    if (!out) P.nc[P.cell[i]] += 1;\n\n    // The flashlight: a firefly in the beam goes dark and loses its place in both clocks. At\n    // Elkmont the park asks for red cellophane over the lens and the beam kept on the ground.\n    // This one is bare.\n    if (P.beamOn > 0.3 && sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H) {\n      const a = P.ang[sy * W + sx];\n      if (Math.abs(a - P.beam) \u003c 0.14) {\n        P.th[i] = Math.random();\n        P.ps[i] = Math.random() * OPEN;\n        P.left[i] = 0;\n        P.hold[i] = 0.8;\n        if (P.age[i] \u003c LIGHT_END) P.age[i] = LIGHT_END;\n      }\n    }\n  }\n\n  // The females: each listens to the flashes round her and, once they stop, answers.\n  for (let j = 0; j \u003c FEM; j++) {\n    if (P.fage[j] \u003c 9) P.fage[j] += step;\n    const c = clamp(P.fy[j] >> 3, 0, GY - 1) * GX + clamp(P.fx[j] >> 3, 0, GX - 1);\n    const heard = sa[c] / Math.max(3, sc[c]);\n    if (heard > 0.04) {\n      P.fmem[j] = Math.min(1, P.fmem[j] + heard);\n      P.fwait[j] = REPLY * (0.8 + 0.4 * hash(j, 44));\n    } else if (P.fmem[j] > 0.25) {\n      P.fwait[j] -= step;\n      if (P.fwait[j] \u003c= 0) {\n        P.fage[j] = 0;\n        P.fmem[j] = 0;\n      }\n    } else P.fmem[j] = Math.max(0, P.fmem[j] - step * 0.2);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 200, 0.06];\n  dt = Math.min(dt, 0.1);\n  const moon = clamp(k[0], 0, 1);\n  const pace = Math.max(0.1, k[1]);\n  const step = (dt * pace) / 2;\n  const count = clamp(Math.round(k[2]), 0, MAXF);\n  const eps = Math.max(0, k[3]);\n  P.count = count;\n  P.moon = moon;\n  if (Math.abs(P.baked - moon) > 0.004) bake(P, moon);\n\n  if (input.btnPressed && input.btnPressed[0]) P.torch = 0;\n  if (P.torch >= 0) {\n    P.torch += dt;\n    const u = P.torch / 2.4;\n    P.beam = -0.9 + 1.8 * smooth(0, 1, u);\n    P.beamOn = smooth(0, 0.06, u) * (1 - smooth(0.92, 1, u));\n    if (u >= 1) {\n      P.torch = -1;\n      P.beamOn = 0;\n    }\n  }\n\n  if (!P.started) {\n    // The night is under way when the panel opens: the swarm has had three seconds to start\n    // finding its beat.\n    P.started = true;\n    for (let i = 0; i \u003c PRE * 30; i++) advance(P, (pace / 2) / 30, pace, count, eps, moon);\n  }\n  advance(P, step, pace, count, eps, moon);\n}\n\nfunction splat(P, sx, sy, d, e) {\n  const lum = P.lum;\n  const occ = P.occ;\n  const spr = P.sprites[sizeOf(d)];\n  for (let j = 0; j \u003c spr.length; j += 3) {\n    const x = sx + spr[j];\n    const y = sy + spr[j + 1];\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = y * W + x;\n    if (occ[p] \u003c d) continue;\n    lum[p] += e * spr[j + 2];\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  P.lum.fill(0);\n  const shyLine = 0.75 * P.moon;\n  for (let i = 0; i \u003c P.count; i++) {\n    const age = P.age[i];\n    if (age >= LIGHT_END || P.shy[i] \u003c shyLine) continue;\n    splat(P, P.sx[i], P.sy[i], P.d[i], envelope(age));\n  }\n  // A female's answer is dimmer and slower to fade.\n  for (let j = 0; j \u003c FEM; j++) {\n    const age = P.fage[j] * 0.6;\n    if (age >= LIGHT_END) continue;\n    splat(P, P.fx[j], P.fy[j], P.fd[j], envelope(age) * 0.5);\n  }\n  const { bg, surf, lum, ang } = P;\n  const beamOn = P.beamOn;\n  const beam = P.beam;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = bg[p * 3];\n      let g = bg[p * 3 + 1];\n      let b = bg[p * 3 + 2];\n      const v = lum[p];\n      if (v > 0.004) {\n        // 560 nm is a yellow green; past full the core runs pale.\n        const t = v \u003c 1 ? v : 1;\n        const hot = v > 0.8 ? Math.min(1, (v - 0.8) / 0.7) : 0;\n        r += 182 * t + 50 * hot;\n        g += 255 * t;\n        b += 12 * t + 110 * hot;\n      }\n      if (beamOn > 0) {\n        const da = ang[p] - beam;\n        const I = beamOn * Math.exp(-(da * da) / 0.016) * surf[p] * (0.5 + (0.5 * y) / H);\n        r += 150 * I;\n        g += 138 * I;\n        b += 112 * I;\n      }\n      // Every channel in steps of 4: on the panel 64 steps look the same as 256, and the dark\n      // gradients stop being noise.\n      display.setPixel(x, y, q4(r), q4(g), q4(b));\n    }\n}\n","layer":{"id":"layer-fireflies","type":"code","name":"fireflies","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Fireflies\n// Family:  insect\n// Idea:    Synchronous fireflies over a meadow under the trees flash out of step at first, then pull each other into bursts of flashes in unison with dark pauses between, because each one's clock jumps ahead when it sees a neighbour flash.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Mirollo and Strogatz's pulse-coupled oscillators (1990), after the synchronous firefly Photinus carolinus at Elkmont in the Great Smoky Mountains\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Moon=0..1, Pace=0.5..4, Fireflies=200..480, Coupling=0..0.25\n//\n// Knob 1: Moon. At 0 a moonless night; turned up, a moon climbs out of the far trees into a gap in the leaves, the sky and the grass go silver, and fewer fireflies fly, down to one in four at full moon.\n// Knob 2: Pace. At 2 the flashes in a burst come half a second apart, as Photinus carolinus flashes, and a burst comes round every 5.5 s; at 0.5 the flashes are two seconds apart, at 4 a quarter second, and the fireflies fly faster with it.\n// Knob 3: Fireflies. How many are out, from 200 to 480; half of them are farther than 5.5 m and show as sparks along the forest edge.\n// Knob 4: Coupling. How far a clock jumps for each flash it sees: at 0 every firefly keeps its own time and the meadow twinkles for ever; at 0.06 the flashes fall into step within a few seconds and the first dark pauses open; at 0.25 the swarm locks in its first burst.\n// Buttons: K1 tap sweeps a bare flashlight across the meadow from left to right; every firefly in the beam goes dark and loses its place in both its clocks, and the sync has to form again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXF = 480;\n// The camera: eye 1.5 m above the meadow, the horizon on row 74, 56 LEDs to one unit of tan.\nconst EYE = 1.5;\nconst HOR = 74;\nconst FOC = 56;\nconst NEAR = 1.4;\nconst FAR = 22;\n// What stands in the way, by distance: tall grass at our feet, a tulip poplar 6 m off whose\n// crown hangs over the top of the panel, a thinner trunk at 10 m and the far forest edge.\nconst GRASS_D = 2.2;\nconst TREE_D = 6;\nconst TREE2_D = 10;\nconst EDGE_D = 30;\nconst SKY_D = 1e6;\n\n// Two clocks in each firefly. The flash clock beats every half second; the burst clock comes\n// round every 5.5 s and opens a burst of four to six flashes on the next beats. Photinus\n// carolinus flashes five to eight times and then waits six to nine seconds; the panel keeps\n// the half second and shortens the wait, so a burst comes round inside a few seconds.\nconst GAP = 0.5;\nconst CYCLE = 5.5;\n// Mirollo and Strogatz's state curve x = ln(1 + (e^b - 1) phase) / b. It is concave, so a seen\n// flash moves a clock that is far from firing a little and one about to fire a lot, and the\n// ones pushed over the top fire together with the flash that pushed them.\nconst BEND = 3;\nconst EB = Math.exp(BEND) - 1;\n// For the first quarter of a beat after its own flash a firefly does not respond, and for the\n// first 55% of its burst cycle its burst clock does not either. Without the first, a crowd\n// flashing over two frames shoves every clock round again and the beat runs away.\nconst REST = 0.25;\nconst OPEN = 0.55;\n// How hard the coupling knob pulls each clock, for the share of neighbours seen flashing.\n// The burst clock only hears first flashes, the flash that ends somebody's dark.\nconst KF = 3;\nconst KB = 16;\n\n// Who sees whom: the panel in 8 x 8 LED cells, and a flash seen from a cell d cells away\n// counts e^(-d / 2.2), so a firefly sees about 20 LEDs round it well and nothing more than 40\n// rows away.\nconst CS = 8;\nconst GX = W / CS;\nconst GY = H / CS;\nconst SIGHT = 2.2;\n// Seconds the swarm runs before the first frame.\nconst PRE = 3;\n\n// The flash: up in 30 ms, held for 150 ms while it sags a little, then out in a fast fade,\n// gone a third of a second after it began. A firefly's lantern blinks rather than swells.\nconst RISE = 0.03;\nconst HOLD = 0.18;\nconst FADE = 0.05;\nconst LIGHT_END = 0.32;\n\n// Glows by distance: nearer than 2.6 m, 5 m, 10 m, and beyond. Each is a lantern, one LED\n// and a little cross round it, in a halo whose sigma (in LEDs) grows as it comes closer; the\n// farthest are the lantern alone.\nconst HALO_SIG = [1, 1.2, 1.8, 2.6];\nconst HALO = [0, 0.45, 0.5, 0.55];\nconst CORE = [0.75, 0.5, 0.5, 0.5];\nconst CROSS = [0.19, 0.12, 0.15, 0.2];\nconst REACH = [1, 3, 5, 7];\n\n// The females wait low in the grass and answer a burst with one dimmer flash in the dark after it.\nconst FEM = 14;\nconst REPLY = 0.6;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction fwd(phase) {\n  return Math.log(1 + EB * phase) / BEND;\n}\n\nfunction inv(x) {\n  return (Math.exp(BEND * x) - 1) / EB;\n}\n\nfunction envelope(age) {\n  if (age \u003c RISE) return age / RISE;\n  if (age \u003c HOLD) return 1 - (0.15 * (age - RISE)) / (HOLD - RISE);\n  return 0.85 * Math.exp(-(age - HOLD) / FADE);\n}\n\nfunction q4(v) {\n  const q = Math.round(v / 4) * 4;\n  return q > 255 ? 255 : q;\n}\n\nfunction sizeOf(d) {\n  return d \u003c 2.6 ? 3 : d \u003c 5 ? 2 : d \u003c 10 ? 1 : 0;\n}\n\n// Sprites: dx, dy and weight for each glow size.\nfunction makeSprites() {\n  const out = [];\n  for (let c = 0; c \u003c 4; c++) {\n    const s = [];\n    const r = REACH[c];\n    const k = 1 / (2 * HALO_SIG[c] * HALO_SIG[c]);\n    for (let dy = -r; dy \u003c= r; dy++)\n      for (let dx = -r; dx \u003c= r; dx++) {\n        const ring = Math.abs(dx) + Math.abs(dy);\n        const w = HALO[c] * Math.exp(-(dx * dx + dy * dy) * k) + (ring === 0 ? CORE[c] : ring === 1 ? CROSS[c] : 0);\n        if (w > 0.02) s.push(dx, dy, w);\n      }\n    out.push(s);\n  }\n  return out;\n}\n\n// Smooth value noise on a line and on the plane, 0..1.\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction noise2(x, y, seed) {\n  const i = Math.floor(x);\n  const j = Math.floor(y);\n  const u = smooth(0, 1, x - i);\n  const v = smooth(0, 1, y - j);\n  const a = hash(i + 131 * j, seed);\n  const b = hash(i + 1 + 131 * j, seed);\n  const c = hash(i + 131 * (j + 1), seed);\n  const d = hash(i + 1 + 131 * (j + 1), seed);\n  return (a * (1 - u) + b * u) * (1 - v) + (c * (1 - u) + d * u) * v;\n}\n\n// What each LED shows before any firefly: the scene drawn once as a map of parts.\nconst SKY = 0;\nconst MEADOW = 1;\nconst EDGE = 2;\nconst TRUNK2 = 3;\nconst TRUNK = 4;\nconst TRUNK_LIT = 5;\nconst CROWN = 6;\nconst BLADE = 7;\nconst TIP = 8;\nconst DEPTH = [SKY_D, SKY_D, EDGE_D, TREE2_D, TREE_D, TREE_D, TREE_D, GRASS_D, GRASS_D];\n// How much of the flashlight each part sends back: the haze of the sky, the far trees, bark.\nconst SURF = [0.15, 0.5, 0.3, 0.7, 0.9, 0.9, 0.5, 1, 1];\n\nfunction drawScene(P) {\n  const mask = P.mask;\n  // The far forest edge 30 m off: a row of crowns, most of them the round heads of tulip\n  // poplar and one in three the drooping point of a hemlock.\n  const top = new Float32Array(W).fill(HOR - 6);\n  for (let k = -1; k \u003c 13; k++) {\n    const cx = k * 5.5 + 4 * hash(k + 9, 12);\n    const w = 3 + 4 * hash(k + 9, 13);\n    const h = 5 + 11 * hash(k + 9, 14);\n    const hemlock = hash(k + 9, 15) \u003c 0.33;\n    for (let x = 0; x \u003c W; x++) {\n      const u = Math.abs(x - cx) / w;\n      if (u >= 1) continue;\n      const lift = hemlock ? h * 1.2 * (1 - u) ** 1.3 : h * Math.sqrt(1 - u * u);\n      top[x] = Math.min(top[x], HOR - 6 - lift);\n    }\n  }\n  const footA = HOR + (FOC * EYE) / TREE_D;\n  const footB = HOR + (FOC * EYE) / TREE2_D;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let m = y \u003c HOR ? SKY : MEADOW;\n      if (y \u003c= HOR && y >= top[x] + noise1(x * 0.7, 16) * 1.5) m = EDGE;\n      if (x >= 50 && x \u003c= 52 && y \u003c= footB) m = TRUNK2;\n      // The near trunk, 7 LEDs wide at the foot and 5 under the crown; a moon catches its right side.\n      const taper = 1 - y / footA;\n      if (x >= 3 + taper && x \u003c= 9 - taper && y \u003c= footA) m = x >= 8 - taper ? TRUNK_LIT : TRUNK;\n      // A limb leaves the trunk at row 50 and climbs into the leaves.\n      const t = clamp((x - 8) / 17, 0, 1);\n      const ly = 50 - 22 * t;\n      if (x >= 8 && x \u003c= 25 && Math.abs(y - ly - 2 * t * (1 - t)) \u003c 1.1 - 0.4 * t) m = TRUNK;\n      // The crown's lower edge hangs in lobes, high on the right where a window of sky opens for\n      // the moon; inside it the leaves part here and there.\n      const edge = 31 + 10 * (noise1(x / 7, 31) - 0.5) + 5 * (noise1(x / 2.7, 32) - 0.5) - 19 * smooth(27, 42, x) * (1 - smooth(57, 66, x));\n      if (y \u003c edge && !(y > 3 && y \u003c edge - 3 && noise2(x / 4.5, y / 3.5, 33) > 0.76)) m = CROWN;\n      mask[y * W + x] = m;\n    }\n  // Tall grass at our feet: blades leaning and bending, and seed heads on a few.\n  for (let k = 0; k \u003c 52; k++) {\n    const x0 = hash(k, 51) * W;\n    const tall = 9 + 20 * hash(k, 52) ** 1.5;\n    const lean = (hash(k, 53) - 0.5) * 0.5;\n    const bend = (hash(k, 54) - 0.5) * 0.02;\n    const head = hash(k, 55) \u003c 0.3;\n    for (let j = 0; j \u003c tall; j++) {\n      const x = Math.round(x0 + lean * j + bend * j * j);\n      const y = 127 - j;\n      if (x \u003c 0 || x >= W) continue;\n      const tip = j > tall - 3;\n      mask[y * W + x] = tip ? TIP : BLADE;\n      if (head && tip && x + 1 \u003c W) mask[y * W + x + 1] = TIP;\n    }\n  }\n}\n\nfunction bake(P, moon) {\n  const { bg, occ, surf, mask } = P;\n  const m = moon;\n  // The moon climbs from behind the far trees into the window in the leaves.\n  const mx = 46;\n  const my = HOR - 8 - 44 * smooth(0, 1, m);\n  const lv = smooth(0, 0.3, m);\n  for (let y = 0; y \u003c H; y++) {\n    const up = y / HOR;\n    const far = 1 - (y - HOR) / (H - HOR);\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const part = mask[p];\n      let r;\n      let g;\n      let b;\n      if (part === SKY) {\n        // Deep blue overhead, paler down at the trees.\n        const lift = 0.55 + 0.45 * up;\n        r = 4 + 6 * up + 24 * m * lift;\n        g = 8 + 10 * up + 34 * m * lift;\n        b = 22 + 20 * up + 48 * m * lift;\n        if (m > 0) {\n          const dd = Math.sqrt((x - mx) ** 2 + (y - my) ** 2);\n          const disc = 1 - smooth(2.4, 3.4, dd);\n          const glow = Math.exp(-dd / 8) * 0.5;\n          r += lv * (disc * 210 + glow * 40);\n          g += lv * (disc * 208 + glow * 46);\n          b += lv * (disc * 186 + glow * 54);\n        }\n      } else if (part === MEADOW) {\n        // A faint sheen of sky on the far grass, darker at our feet.\n        r = 2 + 3 * far + 16 * m * (0.5 + 0.5 * far);\n        g = 4 + 4 * far + 24 * m * (0.5 + 0.5 * far);\n        b = 4 + 5 * far + 22 * m * (0.5 + 0.5 * far);\n      } else if (part === EDGE) {\n        r = 2 + 6 * m;\n        g = 4 + 10 * m;\n        b = 8 + 13 * m;\n      } else if (part === TRUNK2) {\n        r = 2 + 9 * m;\n        g = 3 + 10 * m;\n        b = 5 + 12 * m;\n      } else if (part === TRUNK || part === TRUNK_LIT) {\n        const lit = part === TRUNK_LIT ? 1 : 0.35;\n        r = 1 + 14 * m * lit;\n        g = 2 + 15 * m * lit;\n        b = 3 + 16 * m * lit;\n      } else if (part === CROWN) {\n        r = 1 + 6 * m;\n        g = 2 + 9 * m;\n        b = 4 + 10 * m;\n      } else {\n        // Grass: under a moon the tips catch the light.\n        const tip = part === TIP ? 1 : 0.5;\n        r = 1 + 12 * m * tip;\n        g = 2 + 18 * m * tip;\n        b = 2 + 14 * m * tip;\n      }\n      bg[p * 3] = r;\n      bg[p * 3 + 1] = g;\n      bg[p * 3 + 2] = b;\n      occ[p] = DEPTH[part];\n      surf[p] = part === MEADOW ? 0.35 + 0.65 * (1 - far) : SURF[part];\n    }\n  }\n  // Stars between the leaves and the far trees, fainter as the moon comes up.\n  for (let i = 0; i \u003c 30; i++) {\n    const x = Math.floor(hash(i * 7 + 3, 21) * W);\n    const y = Math.floor(2 + hash(i * 5 + 1, 22) * 62);\n    const p = y * W + x;\n    if (mask[p] !== SKY) continue;\n    const v = (34 + 56 * hash(i, 23)) * (1 - 0.65 * m);\n    bg[p * 3] += v * 0.85;\n    bg[p * 3 + 1] += v * 0.9;\n    bg[p * 3 + 2] += v;\n  }\n  P.baked = moon;\n}\n\nfunction burstLength() {\n  return 4 + Math.floor(Math.random() * 3);\n}\n\nfunction spawn(P, i) {\n  // Distance log-uniform from 1.4 to 22 m: as many between 2 and 4 m as between 10 and 20.\n  const d = NEAR * Math.pow(FAR / NEAR, Math.random());\n  P.d[i] = d;\n  P.X[i] = (Math.random() - 0.5) * (W / FOC) * d * 1.2;\n  // Three in ten keep low over the grass, most fly a metre to three metres up, and one in\n  // seven is up in the leaves.\n  const u = Math.random();\n  P.h[i] = u \u003c 0.3 ? 0.15 + Math.random() * 0.65 : u \u003c 0.86 ? 0.8 + Math.random() * 2.4 : 3.2 + Math.random() * 4.5;\n  const a = Math.random() * Math.PI * 2;\n  P.vx[i] = Math.cos(a) * 0.3;\n  P.vh[i] = (Math.random() - 0.5) * 0.1;\n  P.vd[i] = Math.sin(a) * 0.3;\n  // Each clock runs a little fast or slow: the beat within 3%, the burst within 5%.\n  P.tr[i] = (1 + (Math.random() - 0.5) * 0.06) / GAP;\n  P.pr[i] = (1 + (Math.random() - 0.5) * 0.1) / CYCLE;\n  P.th[i] = Math.random();\n  P.ps[i] = Math.random();\n  P.nf[i] = burstLength();\n  P.left[i] = Math.max(0, P.nf[i] - Math.floor((P.ps[i] * CYCLE) / GAP));\n  P.age[i] = 9;\n  P.hold[i] = 0;\n  P.shy[i] = Math.random();\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const key of [\"X\", \"h\", \"d\", \"vx\", \"vh\", \"vd\", \"tr\", \"pr\", \"th\", \"ps\", \"age\", \"hold\", \"shy\"]) P[key] = new Float32Array(MAXF);\n  P.nf = new Uint8Array(MAXF);\n  P.left = new Uint8Array(MAXF);\n  P.last = new Uint8Array(MAXF);\n  P.sx = new Int16Array(MAXF);\n  P.sy = new Int16Array(MAXF);\n  P.cell = new Int16Array(MAXF);\n  // Flashes and first flashes that began last frame, and fireflies flying, per cell; and the\n  // same three as each cell sees them through the sight kernel.\n  const G = GX * GY;\n  for (const key of [\"pa\", \"pf\", \"pc\", \"na\", \"nf2\", \"nc\", \"sa\", \"sf\", \"sc\"]) P[key] = new Float32Array(G);\n  P.kern = new Float32Array(G);\n  for (let y = 0; y \u003c GY; y++) for (let x = 0; x \u003c GX; x++) P.kern[y * GX + x] = Math.exp(-Math.sqrt(x * x + y * y) / SIGHT);\n  P.bg = new Float32Array(N * 3);\n  P.mask = new Uint8Array(N);\n  drawScene(P);\n  P.occ = new Float32Array(N);\n  P.surf = new Float32Array(N);\n  P.lum = new Float32Array(N);\n  P.ang = new Float32Array(N);\n  P.sprites = makeSprites();\n  // The flashlight is held at our chest, below the bottom of the panel.\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) P.ang[y * W + x] = Math.atan2(x - 32, 170 - y);\n  for (let i = 0; i \u003c MAXF; i++) spawn(P, i);\n  // The females sit still, low in the grass, 1.6 to 4 m away.\n  P.fx = new Int16Array(FEM);\n  P.fy = new Int16Array(FEM);\n  P.fd = new Float32Array(FEM);\n  P.fmem = new Float32Array(FEM);\n  P.fwait = new Float32Array(FEM);\n  P.fage = new Float32Array(FEM).fill(9);\n  for (let j = 0; j \u003c FEM; j++) {\n    const d = 1.6 + 2.4 * hash(j, 41);\n    P.fd[j] = d;\n    P.fx[j] = Math.round(4 + 56 * hash(j, 42));\n    P.fy[j] = Math.round(HOR + (FOC * (EYE - 0.15 - 0.3 * hash(j, 43))) / d);\n  }\n  Object.assign(P, { count: 200, moon: 0, baked: -1, torch: -1, beam: 0, beamOn: 0, started: false });\n}\n\nfunction flash(P, i, first) {\n  P.age[i] = 0;\n  P.na[P.cell[i]] += 1;\n  if (first) P.nf2[P.cell[i]] += 1;\n  P.last[i] = first ? 3 : 1;\n}\n\n// Spread the last frame's flashes and the crowd through the sight kernel, from each cell\n// that holds any to every cell within five rows of cells.\nfunction look(P) {\n  const { pa, pf, pc, sa, sf, sc, kern } = P;\n  sa.fill(0);\n  sf.fill(0);\n  sc.fill(0);\n  for (let s = 0; s \u003c GX * GY; s++) {\n    const a = pa[s];\n    const f = pf[s];\n    const c = pc[s];\n    if (a === 0 && c === 0) continue;\n    const sx = s % GX;\n    const sy = (s / GX) | 0;\n    for (let ty = Math.max(0, sy - 5); ty \u003c= Math.min(GY - 1, sy + 5); ty++) {\n      const row = Math.abs(ty - sy) * GX;\n      for (let tx = 0; tx \u003c GX; tx++) {\n        const k = kern[row + Math.abs(tx - sx)];\n        const t = ty * GX + tx;\n        sa[t] += a * k;\n        sf[t] += f * k;\n        sc[t] += c * k;\n      }\n    }\n  }\n}\n\nfunction advance(P, step, pace, count, eps, moon) {\n  // Last frame's flashes become what is seen this frame.\n  for (const [a, b] of [\n    [\"pa\", \"na\"],\n    [\"pf\", \"nf2\"],\n    [\"pc\", \"nc\"],\n  ]) {\n    const t = P[a];\n    P[a] = P[b];\n    P[b] = t;\n    P[b].fill(0);\n  }\n  look(P);\n  const { sa, sf, sc } = P;\n  // Fewer fly under a bright moon.\n  const shyLine = 0.75 * moon;\n\n  for (let i = 0; i \u003c count; i++) {\n    const out = P.shy[i] \u003c shyLine;\n    if (P.age[i] \u003c 9) P.age[i] += step;\n    const c = P.cell[i];\n    let seeA = 0;\n    let seeF = 0;\n    if (!out && P.hold[i] \u003c= 0) {\n      // What counts is the share of the neighbours seen flashing, so a thick swarm does not\n      // shove every clock round at once. A firefly does not see its own flash.\n      const crowd = Math.max(3, sc[c] - 1);\n      seeA = (sa[c] - (P.last[i] & 1)) / crowd;\n      seeF = (sf[c] - (P.last[i] >> 1)) / crowd;\n    }\n    P.last[i] = 0;\n    if (P.hold[i] > 0) P.hold[i] -= step;\n\n    let p = P.ps[i] + step * P.pr[i];\n    if (p > OPEN && seeF > 0 && eps > 0) {\n      const q = (p - OPEN) / (1 - OPEN);\n      const x = fwd(Math.min(1, q)) + eps * KB * seeF;\n      p = x >= 1 ? 1 : OPEN + (1 - OPEN) * inv(x);\n    }\n    if (p >= 1) {\n      p = 0;\n      P.nf[i] = burstLength();\n      P.left[i] = P.nf[i];\n    }\n    P.ps[i] = p;\n\n    let t = P.th[i] + step * P.tr[i];\n    if (t > REST && seeA > 0 && eps > 0) {\n      const u = (t - REST) / (1 - REST);\n      const x = fwd(Math.min(1, u)) + eps * KF * seeA;\n      t = x >= 1 ? 1 : REST + (1 - REST) * inv(x);\n    }\n    if (t >= 1) {\n      t = 0;\n      if (P.left[i] > 0) {\n        const first = P.left[i] === P.nf[i];\n        P.left[i]--;\n        if (!out && P.hold[i] \u003c= 0) flash(P, i, first);\n      }\n    }\n    P.th[i] = t;\n\n    // Flight: a slow wander, about a third of a metre a second, turning gently.\n    const fly = step * (0.6 + 0.4 * Math.min(2, pace / 2));\n    P.vx[i] += (Math.random() - 0.5) * 0.4 * fly;\n    P.vd[i] += (Math.random() - 0.5) * 0.4 * fly;\n    P.vh[i] += (Math.random() - 0.5) * 0.2 * fly - P.vh[i] * 0.5 * fly;\n    const sp = Math.sqrt(P.vx[i] * P.vx[i] + P.vd[i] * P.vd[i]);\n    if (sp > 0.45) {\n      P.vx[i] *= 0.45 / sp;\n      P.vd[i] *= 0.45 / sp;\n    }\n    let d = P.d[i] + P.vd[i] * fly;\n    if (d \u003c NEAR || d > FAR) {\n      P.vd[i] = -P.vd[i];\n      d = clamp(d, NEAR, FAR);\n    }\n    P.d[i] = d;\n    let X = P.X[i] + P.vx[i] * fly;\n    const half = (0.6 * W * d) / FOC;\n    if (X > half) X -= 2 * half;\n    else if (X \u003c -half) X += 2 * half;\n    P.X[i] = X;\n    let h = P.h[i] + P.vh[i] * fly;\n    if (h \u003c 0.2 || h > 8) {\n      P.vh[i] = -P.vh[i];\n      h = clamp(h, 0.2, 8);\n    }\n    P.h[i] = h;\n    const sx = Math.round(W / 2 + (FOC * X) / d);\n    const sy = Math.round(HOR + (FOC * (EYE - h)) / d);\n    P.sx[i] = sx;\n    P.sy[i] = sy;\n    P.cell[i] = clamp(sy >> 3, 0, GY - 1) * GX + clamp(sx >> 3, 0, GX - 1);\n    if (!out) P.nc[P.cell[i]] += 1;\n\n    // The flashlight: a firefly in the beam goes dark and loses its place in both clocks. At\n    // Elkmont the park asks for red cellophane over the lens and the beam kept on the ground.\n    // This one is bare.\n    if (P.beamOn > 0.3 && sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H) {\n      const a = P.ang[sy * W + sx];\n      if (Math.abs(a - P.beam) \u003c 0.14) {\n        P.th[i] = Math.random();\n        P.ps[i] = Math.random() * OPEN;\n        P.left[i] = 0;\n        P.hold[i] = 0.8;\n        if (P.age[i] \u003c LIGHT_END) P.age[i] = LIGHT_END;\n      }\n    }\n  }\n\n  // The females: each listens to the flashes round her and, once they stop, answers.\n  for (let j = 0; j \u003c FEM; j++) {\n    if (P.fage[j] \u003c 9) P.fage[j] += step;\n    const c = clamp(P.fy[j] >> 3, 0, GY - 1) * GX + clamp(P.fx[j] >> 3, 0, GX - 1);\n    const heard = sa[c] / Math.max(3, sc[c]);\n    if (heard > 0.04) {\n      P.fmem[j] = Math.min(1, P.fmem[j] + heard);\n      P.fwait[j] = REPLY * (0.8 + 0.4 * hash(j, 44));\n    } else if (P.fmem[j] > 0.25) {\n      P.fwait[j] -= step;\n      if (P.fwait[j] \u003c= 0) {\n        P.fage[j] = 0;\n        P.fmem[j] = 0;\n      }\n    } else P.fmem[j] = Math.max(0, P.fmem[j] - step * 0.2);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 200, 0.06];\n  dt = Math.min(dt, 0.1);\n  const moon = clamp(k[0], 0, 1);\n  const pace = Math.max(0.1, k[1]);\n  const step = (dt * pace) / 2;\n  const count = clamp(Math.round(k[2]), 0, MAXF);\n  const eps = Math.max(0, k[3]);\n  P.count = count;\n  P.moon = moon;\n  if (Math.abs(P.baked - moon) > 0.004) bake(P, moon);\n\n  if (input.btnPressed && input.btnPressed[0]) P.torch = 0;\n  if (P.torch >= 0) {\n    P.torch += dt;\n    const u = P.torch / 2.4;\n    P.beam = -0.9 + 1.8 * smooth(0, 1, u);\n    P.beamOn = smooth(0, 0.06, u) * (1 - smooth(0.92, 1, u));\n    if (u >= 1) {\n      P.torch = -1;\n      P.beamOn = 0;\n    }\n  }\n\n  if (!P.started) {\n    // The night is under way when the panel opens: the swarm has had three seconds to start\n    // finding its beat.\n    P.started = true;\n    for (let i = 0; i \u003c PRE * 30; i++) advance(P, (pace / 2) / 30, pace, count, eps, moon);\n  }\n  advance(P, step, pace, count, eps, moon);\n}\n\nfunction splat(P, sx, sy, d, e) {\n  const lum = P.lum;\n  const occ = P.occ;\n  const spr = P.sprites[sizeOf(d)];\n  for (let j = 0; j \u003c spr.length; j += 3) {\n    const x = sx + spr[j];\n    const y = sy + spr[j + 1];\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = y * W + x;\n    if (occ[p] \u003c d) continue;\n    lum[p] += e * spr[j + 2];\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  P.lum.fill(0);\n  const shyLine = 0.75 * P.moon;\n  for (let i = 0; i \u003c P.count; i++) {\n    const age = P.age[i];\n    if (age >= LIGHT_END || P.shy[i] \u003c shyLine) continue;\n    splat(P, P.sx[i], P.sy[i], P.d[i], envelope(age));\n  }\n  // A female's answer is dimmer and slower to fade.\n  for (let j = 0; j \u003c FEM; j++) {\n    const age = P.fage[j] * 0.6;\n    if (age >= LIGHT_END) continue;\n    splat(P, P.fx[j], P.fy[j], P.fd[j], envelope(age) * 0.5);\n  }\n  const { bg, surf, lum, ang } = P;\n  const beamOn = P.beamOn;\n  const beam = P.beam;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = bg[p * 3];\n      let g = bg[p * 3 + 1];\n      let b = bg[p * 3 + 2];\n      const v = lum[p];\n      if (v > 0.004) {\n        // 560 nm is a yellow green; past full the core runs pale.\n        const t = v \u003c 1 ? v : 1;\n        const hot = v > 0.8 ? Math.min(1, (v - 0.8) / 0.7) : 0;\n        r += 182 * t + 50 * hot;\n        g += 255 * t;\n        b += 12 * t + 110 * hot;\n      }\n      if (beamOn > 0) {\n        const da = ang[p] - beam;\n        const I = beamOn * Math.exp(-(da * da) / 0.016) * surf[p] * (0.5 + (0.5 * y) / H);\n        r += 150 * I;\n        g += 138 * I;\n        b += 112 * I;\n      }\n      // Every channel in steps of 4: on the panel 64 steps look the same as 256, and the dark\n      // gradients stop being noise.\n      display.setPixel(x, y, q4(r), q4(g), q4(b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Moon=0..1, Pace=0.5..4, Fireflies=200..480, Coupling=0..0.25","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Moon","min":0,"max":1,"about":"At 0 a moonless night; turned up, a moon climbs out of the far trees into a gap in the leaves, the sky and the grass go silver, and fewer fireflies fly, down to one in four at full moon."},{"name":"Pace","min":0.5,"max":4,"about":"At 2 the flashes in a burst come half a second apart, as Photinus carolinus flashes, and a burst comes round every 5.5 s; at 0.5 the flashes are two seconds apart, at 4 a quarter second, and the fireflies fly faster with it."},{"name":"Fireflies","min":200,"max":480,"about":"How many are out, from 200 to 480; half of them are farther than 5.5 m and show as sparks along the forest edge."},{"name":"Coupling","min":0,"max":0.25,"about":"How far a clock jumps for each flash it sees: at 0 every firefly keeps its own time and the meadow twinkles for ever; at 0.06 the flashes fall into step within a few seconds and the first dark pauses open; at 0.25 the swarm locks in its first burst."}],"start":[0,2,200,0.06],"measures":{"motion":0.3823,"detail":0.021,"edges":0.1814,"complexity":0.404,"coverage":0.3382,"colour":0.0994,"drift":0.0945},"knobResponse":[0.0808,0.0516,0.0623,0.0425]},{"slug":"flame-test","title":"Flame Test","family":"chemistry","round":22,"note":"분젠 버너의 파란 불꽃에 손이 니크롬 고리를 넣으면 불꽃이 그 염의 색으로 터져요. 구리는 청록, 나트륨은 짙은 노랑으로 타고 알갱이가 튀다가 파랗게 돌아오면, 고리를 염산에 씻어 이름표 붙은 다음 시계접시로 가요.","idea":"On a dark lab bench a hand dips a nichrome wire loop into a row of labelled watch glasses and holds each salt in the pale blue flame of a Bunsen burner, which bursts into the element's colour, sputters with grains of salt and fades back to blue before the loop is cleaned in acid and goes for the next.","buttons":"K1 tap sends the loop to the next salt now.","code":"// ===== Patternflow pattern =====\n// Title:   Flame Test\n// Family:  chemistry\n// Idea:    On a dark lab bench a hand dips a nichrome wire loop into a row of labelled watch glasses and holds each salt in the pale blue flame of a Bunsen burner, which bursts into the element's colour, sputters with grains of salt and fades back to blue before the loop is cleaned in acid and goes for the next.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the flame test of the school chemistry lab\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Salt=0..8, Speed=0.2..3, Room=0..1, Air=-1..1\n//\n// Knob 1: Salt. Which watch glass the loop goes to next: at 0 it works along the row from copper (blue-green) through sodium (yellow-orange), lithium (crimson), barium (apple green), potassium (lilac), calcium (brick red), boric acid (green) and strontium (red); 1 to 8 keeps to one glass, copper at 1 to strontium at 8.\n// Knob 2: Speed. How fast the hand works and the flame moves: at 2 a salt burns about 4.5 s and the next one goes into the flame 12 s after it; at 0.2 the hand works ten times slower and the flame slows to a lazy flicker.\n// Knob 3: Room. The lab lights, on at 0 and off at 1, where only the flame lights the tiles, the bench and the hand.\n// Knob 4: Air. The burner's collar: shut at -1 for a tall, wavering yellow flame that hides the salt's colour, half open near 0 for the quiet blue flame of the test, wide open at 1 for a short roaring flame with a sharp inner cone.\n// Buttons: K1 tap sends the loop to the next salt now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The burner's axis, the first row of flame above its barrel, the bench top.\nconst FX = 21;\nconst MOUTH = 79;\nconst BENCH = 94;\nconst { min, max, floor, ceil, round, sin, cos, exp, abs, sqrt, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => a.map((v, i) => mix(v, b[i], t));\n\n// The row of watch glasses, left to right: symbol, flame colour, the salt's\n// own colour, how long its colour lasts in the flame (s), how strong it is.\nconst WHITE = [0.92, 0.91, 0.87];\nconst SALTS = [\n  [\"Cu\", [0, 240, 185], [0.35, 0.75, 0.7], 2, 1],\n  [\"Na\", [255, 175, 10], WHITE, 3.5, 1.25],\n  [\"Li\", [255, 10, 85], WHITE, 2, 1],\n  [\"Ba\", [170, 255, 35], WHITE, 2, 0.95],\n  [\"K\", [190, 100, 255], WHITE, 1.3, 0.8],\n  [\"Ca\", [255, 85, 10], WHITE, 2.2, 1],\n  [\"B\", [35, 255, 60], WHITE, 1.8, 1],\n  [\"Sr\", [255, 5, 25], WHITE, 2.2, 1.1],\n];\n// A heap of salt in a watch glass: x offset, row, shade.\nconst HEAP = [[0, 107, 1], [-1, 108, 0.95], [0, 108, 1], [1, 108, 0.8], [-2, 109, 0.85], [-1, 109, 0.9], [0, 109, 0.85], [1, 109, 0.75], [2, 109, 0.65]];\n// 3x5 letters for the labels.\nconst FONT = {\n  C: \"011/100/100/100/011\",\n  u: \"000/000/101/101/011\",\n  N: \"110/101/101/101/101\",\n  a: \"000/011/101/101/011\",\n  L: \"100/100/100/100/111\",\n  i: \"1/0/1/1/1\",\n  B: \"110/101/110/101/110\",\n  K: \"101/101/110/101/101\",\n  S: \"011/100/010/001/110\",\n  r: \"000/000/101/110/100\",\n  H: \"101/101/111/101/101\",\n  l: \"1/1/1/1/1\",\n};\n\n// The hand's round: in the flame with a salt, to the acid, dipped, back,\n// in the flame to burn the loop clean, to the next glass, dipped, back.\nconst DUR = [4.5, 1.1, 0.8, 1, 1.4, 1.2, 0.7, 1];\n// Where the loop goes, and the holder's angle there.\nconst FP = [FX + 4, 62, 0.45];\nconst AT = [51, 75, 1.22];\nconst AD = [51, 90, 1.22];\nconst ST = (i) => [4 + 8 * i, 100, 0.52];\nconst SD = (i) => [4 + 8 * i, 108, 0.52];\n\n// Smooth value noise, wrapping both ways.\nfunction noise(w, h, cell, oct) {\n  const out = new Float32Array(w * h);\n  let amp = 1;\n  let tot = 0;\n  for (let o = 0; o \u003c oct; o++, cell /= 2, amp *= 0.55) {\n    const gw = w / cell;\n    const gh = h / cell;\n    const g = Float32Array.from({ length: gw * gh }, rnd);\n    const at = (i, j) => g[(j % gh) * gw + (i % gw)];\n    for (let y = 0; y \u003c h; y++) {\n      const j = floor(y / cell);\n      const ty = sm(0, 1, y / cell - j);\n      for (let x = 0; x \u003c w; x++) {\n        const i = floor(x / cell);\n        const tx = sm(0, 1, x / cell - i);\n        const a = at(i, j) + (at(i + 1, j) - at(i, j)) * tx;\n        const b = at(i, j + 1) + (at(i + 1, j + 1) - at(i, j + 1)) * tx;\n        out[y * w + x] += amp * (a + (b - a) * ty);\n      }\n    }\n    tot += amp;\n  }\n  return out.map((v) => v / tot);\n}\n\n// Bilinear lookup in the 64x128 noise tile.\nfunction nz(T, x, y) {\n  const xi = floor(x);\n  const yi = floor(y);\n  const fx = x - xi;\n  const r0 = (yi & 127) * 64;\n  const r1 = ((yi + 1) & 127) * 64;\n  const a = T[r0 + (xi & 63)];\n  const b = T[r0 + ((xi + 1) & 63)];\n  const c = T[r1 + (xi & 63)];\n  const d = T[r1 + ((xi + 1) & 63)];\n  return a + (b - a) * fx + (c - a + (a - b - c + d) * fx) * (y - yi);\n}\n\n// Everything that stands still, as albedo: the tiled wall and its periodic\n// table, the gas tap and hose, the burner, the acid, the glasses, the labels.\nfunction build(P) {\n  const { alb, spec, G, benchM } = P;\n  const put = (x, y, c, s) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    alb.set(c, p * 3);\n    benchM[p] = 0;\n    if (s !== undefined) spec[p] = s;\n  };\n  const at = (x, y) => alb.slice((y * W + x) * 3, (y * W + x) * 3 + 3);\n  const text = (str, cx, top, ink) => {\n    const gl = [...str].map((c) => FONT[c].split(\"/\"));\n    let x0 = cx - (gl.reduce((s, g) => s + g[0].length + 1, -1) >> 1);\n    for (const g of gl) {\n      for (let j = 0; j \u003c 5; j++) for (let i = 0; i \u003c g[j].length; i++) if (g[j][i] === \"1\") put(x0 + i, top + j, ink);\n      x0 += g[0].length + 1;\n    }\n  };\n  const shade = Float32Array.from({ length: 256 }, rnd);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let v;\n      if (y \u003c BENCH - 1) {\n        const gx = (x + 5) % 11;\n        const gy = (y + 7) % 11;\n        v = gx === 10 || gy === 10 ? 0.36 : 0.45 + 0.05 * shade[(((x + 5) / 11) | 0) * 19 + (((y + 7) / 11) | 0) * 7 & 255] + 0.05 * (1 - (gx + gy) / 18) + (gx === 0 || gy === 0 ? 0.03 : 0);\n        put(x, y, [v, v * 1.01, v * 1.03]);\n      } else if (y === BENCH - 1) put(x, y, [0.06, 0.06, 0.07]);\n      else if (y === BENCH) put(x, y, [0.3, 0.3, 0.32], 0.3);\n      else if (y \u003c 125) {\n        v = 0.17 + 0.014 * rnd();\n        put(x, y, [v, v, v * 1.08]);\n        benchM[y * W + x] = 1;\n      } else put(x, y, y === 125 ? [0.42, 0.42, 0.44] : [0.1, 0.1, 0.11], y === 125 ? 0.4 : 0);\n      // The flame lights the room like a lamp along its height.\n      const dx = x - FX;\n      const dy = y \u003c 22 ? 22 - y : y > 78 ? y - 78 : 0;\n      G[y * W + x] = 1 / (1 + (dx * dx + dy * dy) / 480);\n    }\n  // A periodic table pinned to the tiles.\n  for (let y = 3; y \u003c= 27; y++) for (let x = 39; x \u003c= 62; x++) put(x, y, [0.85, 0.84, 0.78]);\n  for (let x = 42; x \u003c= 59; x++) put(x, 5, [0.2, 0.2, 0.28]);\n  const cell = (c, y, f) =>\n    put(42 + c, y, f ? [0.55, 0.85, 0.8] : c === 0 ? (y === 8 ? [0.7, 0.7, 0.75] : [0.95, 0.35, 0.35]) : c === 1 ? [0.98, 0.62, 0.3] : c \u003c 12 ? [0.95, 0.85, 0.35] : c \u003c 17 ? (c - 12 > (y - 8) / 2 - 1 ? [0.45, 0.8, 0.5] : [0.45, 0.65, 0.95]) : [0.7, 0.5, 0.95]);\n  for (let n = 1; n \u003c= 7; n++) for (let c = 0; c \u003c 18; c++) if (n > 3 || (n === 1 ? c === 0 || c === 17 : c \u003c 2 || c > 11)) cell(c, 6 + 2 * n, false);\n  for (let c = 3; c \u003c 17; c++) cell(c, 23, true), cell(c, 25, true);\n  // The heatproof mat the burner stands on.\n  for (let y = 96; y \u003c= 104; y++)\n    for (let x = 7 - ((y - 96) >> 1); x \u003c= 35 + ((y - 96) >> 1); x++) {\n      const v = y === 104 ? 0.22 : y === 96 ? 0.42 : 0.5 + 0.04 * rnd();\n      put(x, y, [v, v * 0.97, v * 0.92]);\n    }\n  // The gas tap on the wall, its lever, and the orange rubber hose to the burner.\n  for (let y = 82; y \u003c= 91; y++) for (let x = 0; x \u003c= 3; x++) put(x, y, [0.4, 0.4, 0.42], x === 0 ? 0.3 : 0);\n  for (let y = 86; y \u003c= 89; y++) for (let x = 1; x \u003c= 6; x++) put(x, y, y === 86 ? [0.9, 0.72, 0.2] : [0.62, 0.48, 0.2], y === 86 ? 0.5 : 0);\n  for (let x = 7; x \u003c= 9; x++) put(x, 88, [0.72, 0.56, 0.24]);\n  for (let j = 0; j \u003c 4; j++) put(4 + (j >> 1), 85 - j, [0.12, 0.12, 0.13]);\n  for (let k = 0; k \u003c= 80; k++) {\n    const t = k / 80;\n    const u = 1 - t;\n    const bx = round(u * u * u * 9 + 3 * u * u * t * 17 + 3 * u * t * t * 2 + t * t * t * 10);\n    const by = round(u * u * u * 88 + 3 * u * u * t * 94 + 3 * u * t * t * 106 + t * t * t * 101);\n    put(bx, by, [0.88, 0.38, 0.14], 0.25);\n    put(bx, by + 1, [0.6, 0.24, 0.08]);\n  }\n  // The burner: a heavy base, the gas inlet, the chrome barrel and its collar.\n  const BW = [5, 6, 7, 7, 7];\n  for (let j = 0; j \u003c 5; j++)\n    for (let x = FX - BW[j]; x \u003c= FX + BW[j]; x++) {\n      const v = j === 0 ? 0.42 : j === 4 ? 0.1 : 0.22 - 0.03 * j;\n      put(x, 99 + j, [v, v, v * 1.15], j === 0 ? 0.5 : 0);\n    }\n  for (let x = FX - 7; x \u003c= FX + 8; x++) put(x, 104, at(x, 104).map((v) => v * 0.55));\n  for (let x = FX - 11; x \u003c FX - 7; x++) put(x, 100, [0.78, 0.62, 0.3], 0.4), put(x, 101, [0.5, 0.38, 0.18]);\n  const BC = [0.28, 0.75, 0.56, 0.38, 0.2];\n  for (let y = 80; y \u003c= 98; y++)\n    for (let i = 0; i \u003c 5; i++) {\n      const v = BC[i] + (y === 80 ? 0.15 : 0);\n      put(FX - 2 + i, y, [v, v, v * 1.06], i === 1 ? 0.6 : 0);\n    }\n  const CC = [0.25, 0.5, 0.8, 0.64, 0.46, 0.3, 0.18];\n  for (let y = 89; y \u003c= 95; y++)\n    for (let i = 0; i \u003c 7; i++) {\n      const v = CC[i] * (y === 89 || y === 95 ? 0.75 : 1);\n      put(FX - 3 + i, y, [v, v * 0.8, v * 0.42], i === 2 ? 0.5 : 0);\n    }\n  // A beaker of dilute hydrochloric acid to clean the loop in.\n  for (let y = 75; y \u003c= 101; y++)\n    for (let x = 43; x \u003c= 58; x++) {\n      if (x === 43 && y > 76) continue;\n      if (y === 75 || y === 101 || x === 44 || x === 58 || x === 43) {\n        put(x, y, [0.5, 0.55, 0.6], x === 44 || y === 75 ? 0.8 : 0.4);\n        continue;\n      }\n      let c = at(x, y).map((v, i) => v * [0.9, 0.94, 0.98][i]);\n      if (y >= 85) c = c.map((v, i) => v * [0.62, 0.68, 0.7][i] + [0.08, 0.11, 0.14][i]);\n      put(x, y, c, y === 85 ? 0.6 : x === 45 ? 0.3 : 0);\n    }\n  P.front = [];\n  for (let y = 93; y \u003c= 99; y++) for (let x = 46; x \u003c= 56; x++) put(x, y, [0.88, 0.86, 0.78]), P.front.push(y * W + x);\n  text(\"HCl\", 51, 94, [0.07, 0.07, 0.1]);\n  // The watch glasses, each with its heap of salt, and the tape with their names.\n  for (let i = 0; i \u003c 8; i++) {\n    const c = 4 + 8 * i;\n    for (let x = c - 3; x \u003c= c + 3; x++) put(x, 112, at(x, 112).map((v) => v * 0.6));\n    for (let dy = -2; dy \u003c= 1; dy++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const e = (dx / 3.7) ** 2 + ((dy + 0.5) / 2.1) ** 2;\n        if (e \u003c 1) put(c + dx, 110 + dy, e > 0.45 ? [0.5, 0.56, 0.6] : at(c + dx, 110 + dy).map((v) => v * 1.3 + 0.07), e > 0.45 && dy \u003c 0 ? 0.9 : 0.3);\n      }\n    const k = SALTS[i][2];\n    for (const [dx, y, s] of HEAP) put(c + dx, y, k.map((v) => v * s));\n  }\n  for (let y = 115; y \u003c= 121; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const v = y === 115 || y === 121 ? 0.62 : 0.82;\n      if (x % 8) put(x, y, [v, v * 0.97, v * 0.82]);\n    }\n  for (let i = 0; i \u003c 8; i++) text(SALTS[i][0], 4 + 8 * i, 116, [0.06, 0.06, 0.09]);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), spec: F(N), G: F(N), buf: F(N * 3), benchM: new Uint8Array(N), NT: noise(64, 128, 16, 3) });\n  build(P);\n  Object.assign(P, { started: false, t: 0, tf: 0, ph: 0, pt: 0, cur: 0, salt: 0, pick: 0, ks: 0, kd: 0, kc: SALTS[0][1], heat: 0, bead: 0, sput: 0, flare: 0, sp: [], hot: [], sAcc: 0, bAcc: 0, air: 0.5, room: 0, from: FP, pos: FP, m: 1 });\n}\n\n// Kind 0 is a grain carried up the flame in the salt's colour, kind 1 a grain\n// spat out of the loop that glows as it falls, kind 2 a bubble in the acid.\nfunction spark(P, k) {\n  if (P.sp.length >= 160) return;\n  P.sp.push({\n    k,\n    x: P.pos[0] + (rnd() - 0.5) * 2.5,\n    y: P.pos[1] + (rnd() - 0.5) * 2,\n    vx: (rnd() - 0.5) * [14, 60, 2][k],\n    vy: -[25 + 45 * rnd(), 10 + 35 * rnd(), 7 + 6 * rnd()][k],\n    a: 0,\n    l: [0.25 + 0.55 * rnd(), 0.4 + 0.6 * rnd(), 2][k],\n    c: P.kc.map((v) => v * 0.6 + 100),\n  });\n}\n\nfunction enter(P) {\n  const ph = P.ph;\n  P.from = P.pos;\n  if (ph === 5) P.cur = P.pick ? P.pick - 1 : (P.cur + 1) % 8;\n  if (ph === 7) P.bead = 1;\n  if (ph === 0) {\n    P.salt = P.cur;\n    P.kc = SALTS[P.cur][1];\n    for (let i = 0; i \u003c 16; i++) spark(P, i & 1);\n  }\n  // Even a clean loop shows a flash of sodium from the acid and the fingers.\n  if (ph === 4) P.kc = SALTS[1][1];\n}\n\nfunction step(P, h) {\n  P.t += h;\n  P.pt += h;\n  while (P.pt >= DUR[P.ph]) {\n    P.pt -= DUR[P.ph];\n    P.ph = (P.ph + 1) % 8;\n    enter(P);\n  }\n  const ph = P.ph;\n  const s = P.pt / DUR[ph];\n  const e = sm(0, 1, s);\n  const dip = sm(0, 0.35, s) * sm(1, 0.62, s);\n  let pos;\n  if (ph === 0 || ph === 4) pos = [FP[0] + 0.5 * sin(P.t * 1.3), FP[1] + 0.5 * sin(P.t * 1.9 + 1), FP[2]];\n  else if (ph === 2 || ph === 6) {\n    pos = ph === 2 ? mix3(AT, AD, dip) : mix3(ST(P.cur), SD(P.cur), dip);\n    pos[0] += sin(s * 19) * 0.7 * dip;\n  } else {\n    pos = mix3(P.from, ph === 1 ? AT : ph === 5 ? ST(P.cur) : FP, e);\n    pos[1] -= 5 * sin(PI * e);\n  }\n  P.pos = pos;\n  const inF = ph === 0 || ph === 4;\n  const wet = ph === 2 && dip > 0.6;\n  P.heat += ((inF ? 1 : 0) - P.heat) * (1 - exp(-h / (inF ? 0.35 : wet ? 0.07 : 0.9)));\n  if (ph === 0) P.bead = max(0, 1 - P.pt / 0.9);\n\n  // The salt's colour: a burst as the loop goes in, a while at full, then a fade.\n  const S = SALTS[P.salt];\n  let tgt = 0;\n  P.sput = 0;\n  if (ph === 0) {\n    tgt = S[4] * (P.pt \u003c 1.3 ? sm(0, 0.18, P.pt) : exp(-(P.pt - 1.3) / S[3]));\n    P.sput = S[4] * (exp(-P.pt / 0.9) + 0.3 * exp(-P.pt / 2.5));\n  } else if (ph === 4) {\n    tgt = 0.85 * sm(0, 0.15, P.pt) * exp(-P.pt / 0.5);\n    P.sput = 0.5 * exp(-P.pt / 0.35);\n  }\n  P.ks += (tgt - P.ks) * (1 - exp(-h / (tgt > P.ks ? 0.06 : 0.22)));\n  P.flare *= exp(-h / 0.15);\n  P.kd = P.ks * (0.78 + 0.3 * nz(P.NT, P.t * 9, 40.5)) + P.flare;\n  // Grains crackle off the loop, now and then a whole crust at once.\n  if (P.sput > 0.02) {\n    P.sAcc += 40 * P.sput * h;\n    for (; P.sAcc >= 1; P.sAcc--) spark(P, rnd() \u003c 0.7 ? 0 : 1);\n    if (rnd() \u003c 3 * P.sput * h) {\n      P.flare += 0.3 * P.ks;\n      for (let i = 0; i \u003c 8; i++) spark(P, i % 3 ? 0 : 1);\n    }\n  }\n  if (wet) for (P.bAcc += 22 * h; P.bAcc >= 1; P.bAcc--) spark(P, 2);\n  P.sp = P.sp.filter((p) => {\n    p.a += h;\n    if (p.k === 0) {\n      p.vy -= 30 * h;\n      p.vx *= exp(-2 * h);\n    } else if (p.k === 1) p.vy += 90 * h;\n    p.x += p.vx * h;\n    p.y += p.vy * h;\n    return p.a \u003c p.l && !(p.k === 2 && p.y \u003c 85.5) && p.x >= 0 && p.x \u003c= 63 && p.y >= 0 && p.y \u003c= 124;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  P.pick = cl(round(k[0]), 0, 8);\n  P.m = cl(k[1], 0.2, 3) / 2;\n  const room = cl(k[2], 0, 1);\n  const air = (cl(k[3], -1, 1) + 1) / 2;\n  if (!P.started) {\n    P.started = true;\n    P.air = air;\n    P.room = room;\n    P.cur = P.pick ? P.pick - 1 : 0;\n    enter(P);\n    // Open a moment after the first salt went into the flame.\n    for (let i = 0; i \u003c 8; i++) step(P, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.ph \u003c 5) {\n    P.ph = 5;\n    P.pt = 0;\n    enter(P);\n  }\n  P.air += (air - P.air) * (1 - exp(-dt / 0.25));\n  P.room += (room - P.room) * (1 - exp(-dt / 0.12));\n  P.tf += dt * (0.3 + 0.7 * P.m);\n  step(P, dt * P.m);\n}\n\n// The holder: the wire loop, the nichrome wire, the aluminium handle, the\n// hand round it and the white sleeve of a lab coat. The loop and the first\n// few LEDs of wire are kept to glow when hot.\nfunction holder(P, light) {\n  const [lx, ly, th] = P.pos;\n  const ux = cos(th);\n  const uy = -sin(th);\n  P.hot = [];\n  for (let y = max(0, floor(ly + 100 * uy - 7)); y \u003c= min(H - 1, ceil(ly + 7)); y++)\n    for (let x = max(0, floor(lx - 3)); x \u003c W; x++) {\n      const dx = x - lx;\n      const dy = y - ly;\n      const s = dx * ux + dy * uy;\n      const q = dx * uy - dy * ux;\n      if (s \u003c -2.5 || abs(q) > 6.2) continue;\n      let c = null;\n      const hand = ((s - 31) / 4.3) ** 2 + ((q + 0.3) / 3.7) ** 2;\n      if (((s - 27.5) / 2.6) ** 2 + ((q - 2.5) / 1.3) ** 2 \u003c 1) c = [1, 0.78, 0.64];\n      else if (hand \u003c 1) {\n        // Curled fingers under the handle, the knuckles above it.\n        const k = 0.84 + 0.07 * q - (q \u003c -0.8 && abs(((s - 29.5) % 2) - 1) \u003c 0.45 ? 0.22 : 0);\n        c = [k, 0.72 * k, 0.58 * k];\n      } else if (s > 34 && s \u003c 37.5 && abs(q + 0.5) \u003c 3) c = [0.88, 0.62, 0.5];\n      else if (s >= 37 && abs(q + 0.6) \u003c 5.4) {\n        const k = (s \u003c 39 ? 0.74 : 0.9) + 0.03 * q;\n        c = [0.88 * k, 0.89 * k, 0.92 * k];\n      } else if (s >= 9 && s \u003c 30 && q > -1 && q \u003c 0.6) c = q > -0.2 ? [0.66, 0.68, 0.74] : [0.36, 0.37, 0.42];\n      else if ((s >= 1 && s \u003c 9 && abs(q) \u003c 0.6) || (s \u003c 1.8 && abs(hypot(dx, dy) - 1.25) \u003c 0.55)) {\n        c = [0.55, 0.55, 0.52];\n        if (s \u003c 5) P.hot.push(y * W + x, 1 - max(0, s) / 6);\n      }\n      if (c) light(y * W + x, c);\n    }\n}\n\nfunction flame(P) {\n  const { buf, NT, kd, kc } = P;\n  const a = P.air;\n  const t = P.tf;\n  const k1 = min(1, kd);\n  const Yf = sm(0.5, 0.06, a);\n  const Rf = sm(0.6, 1, a);\n  const Cf = sm(0.12, 0.6, a);\n  const bl = sm(0.06, 0.5, a);\n  const fl = 1 + (0.06 * sin(t * 7.3) + 0.05 * sin(t * 12.9 + 1)) * (1 + Yf);\n  const Hf = mix(mix(76, 58, bl), 47, Rf) * (1 + 0.2 * k1) * fl;\n  const Wm = mix(8.5, 6.4, bl) - Rf + 1.6 * k1;\n  const Hi = mix(7, 15, sm(0.15, 1, a));\n  const A = mix(5, 2, bl) * (1 - 0.6 * Rf);\n  const ws = mix(4.5, 6.5, a) + 7 * Rf;\n  const vs = mix(30, 46, a) + 40 * Rf;\n  const tn = mix(0.75, 0.5, a);\n  const [lx, ly] = P.pos;\n  const inF = P.heat > 0.5;\n  const salt = 1 - 0.8 * Yf;\n  for (let y = max(0, floor(MOUTH - Hf * 1.3)); y \u003c= MOUTH; y++) {\n    const hg = MOUTH + 1 - y;\n    const v = hg / Hf;\n    const cx = FX + A * v ** 1.4 * sin(0.11 * hg - ws * t) + 0.45 * A * v * sin(0.23 * hg - 1.7 * ws * t + 2);\n    const hw = max(0.7, (2.6 + (Wm - 2.6) * sm(0, 0.3, v)) * sqrt(max(0, 1.05 - v)));\n    const yw = Yf * sm(2, 9, hg);\n    const ri = 2.5 * max(0, 1 - hg / Hi) ** 0.8 + 0.25;\n    const cxi = FX + 0.35 * sin(t * 9 + hg * 0.3) * (1 - Rf);\n    const above = sm(ly + 5, ly - 2, y);\n    for (let x = max(0, floor(cx - hw * 1.7 - 3)); x \u003c= min(W - 1, ceil(cx + hw * 1.7 + 3)); x++) {\n      const n = nz(NT, x * 1.1 + 7, y * 0.55 + t * vs * 0.55);\n      const d2 = abs(x - cx) / hw + (n - 0.5) * tn * (0.25 + v);\n      const O = sm(1.12, 0.55, d2) * sm(1, 0.72, v + (n - 0.5) * 0.45 * v);\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      // The outer flame: pale blue, or yellow with soot when the collar is shut.\n      if (O > 0.002) {\n        const ob = O * (0.62 + 0.38 * (1 - v)) * (0.85 + 0.25 * n) * (0.8 + 0.25 * Rf);\n        const core = sm(0.85, 0.2, d2) * (1 - 0.5 * v);\n        const lum = O * (0.75 + 0.35 * n);\n        r = mix(58 * ob, 255 * lum, yw);\n        g = mix(98 * ob, lum * (95 + 150 * core - 60 * v), yw);\n        b = mix(225 * ob, O * (10 + 120 * core * core), yw);\n      }\n      // The inner cone, brightest along its surface.\n      if (hg \u003c Hi + 1) {\n        const di = abs(x - cxi);\n        const C = sm(ri + 0.75, ri - 0.35, di) * Cf * (0.92 + 0.08 * sin(t * 61 + hg));\n        if (C > 0) {\n          const rim = sm(ri - 1.3, ri - 0.3, di);\n          r += (60 + 100 * rim) * C;\n          g += (140 + 100 * rim) * C;\n          b += 255 * C;\n        }\n      }\n      // The salt's colour rises from the loop and fills the flame above it in tongues.\n      let ps = 0;\n      if (kd > 0.01) {\n        const n2 = nz(NT, x * 1.6 + 31, y * 0.8 + t * vs * 0.9 + 53);\n        ps = kd * salt * (O * above * (0.4 + 0.95 * n2) + (inF ? 0.9 * exp(-((x - lx) ** 2 + (y - ly) ** 2) / 10) : 0));\n        const q = max(0, 1 - 1.4 * ps);\n        r = r * q + kc[0] * ps;\n        g = g * q + kc[1] * ps;\n        b = b * q + kc[2] * ps;\n      }\n      if (r + g + b \u003c 1) continue;\n      const o = (y * W + x) * 3;\n      const dim = 1 - 0.4 * min(1, O + 0.5 * ps);\n      buf[o] = buf[o] * dim + r;\n      buf[o + 1] = buf[o + 1] * dim + g;\n      buf[o + 2] = buf[o + 2] * dim + b;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const { buf, alb, spec, G, benchM, kc } = P;\n  const a = P.air;\n  const Yf = sm(0.5, 0.06, a);\n  const k1 = min(1.3, P.kd) * (1 - 0.8 * Yf);\n  const fl = 0.9 + 0.1 * nz(P.NT, P.tf * 11, 70.5) + 0.12 * Yf * sin(P.tf * 9);\n  // The flame's own colour, which lights the room.\n  const FC = [0, 1, 2].map((i) => (mix([58, 98, 225][i] * 0.85, [255, 165, 40][i], Yf) * (1 - 0.8 * min(1, k1)) + kc[i] * k1) * fl);\n  const [gr, gg, gb] = FC.map((v) => v * (0.52 + 0.3 * Yf));\n  const A = 150 * (1 - P.room) ** 1.3 + 1.5;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const g = G[p];\n    const s = spec[p];\n    buf[o] = alb[o] * (A + gr * g) + s * (0.3 * A + 1.4 * gr * g);\n    buf[o + 1] = alb[o + 1] * (A + gg * g) + s * (0.3 * A + 1.4 * gg * g);\n    buf[o + 2] = alb[o + 2] * (A * 0.95 + gb * g) + s * (0.3 * A + 1.4 * gb * g);\n  }\n  const add = (p, c, f) => {\n    for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] += c[i] * f;\n  };\n  // The glossy bench: the ceiling lights along its back and the flame under the burner.\n  for (let x = 0; x \u003c W; x++) for (const [y, k] of [[96, 0.22], [97, 0.12]]) if (benchM[y * W + x]) add(y * W + x, [A, A, A], k);\n  const sway = 1.5 * sin(P.tf * 4.1);\n  for (let y = 105; y \u003c= 124; y++) {\n    const w = 2 + (y - 105) * 0.22;\n    const k = 0.34 * exp(-(y - 105) / 7);\n    for (let x = max(0, floor(FX - 3 * w)); x \u003c= min(W - 1, ceil(FX + 3 * w)); x++)\n      if (benchM[y * W + x]) add(y * W + x, FC, k * exp(-(((x - FX - (sway * (y - 105)) / 20) / w) ** 2)));\n  }\n  const light = (p, c) => {\n    const g = G[p];\n    buf[p * 3] = c[0] * (A + gr * g);\n    buf[p * 3 + 1] = c[1] * (A + gg * g);\n    buf[p * 3 + 2] = c[2] * (A * 0.95 + gb * g);\n  };\n  // The air hole in the collar opens as the collar turns.\n  const hole = round(4 * a);\n  for (let y = 91; y \u003c= 93; y++) for (let x = FX - (hole >> 1); x \u003c FX - (hole >> 1) + hole; x++) light(y * W + x, [0.03, 0.03, 0.03]);\n  for (const p of P.sp) if (p.k === 2) light(round(p.y) * W + round(p.x), [0.7, 0.75, 0.8]);\n  holder(P, light);\n  // The label on the beaker hides the loop behind it.\n  if (P.ph >= 1 && P.ph \u003c= 3) for (const p of P.front) light(p, alb.subarray(p * 3, p * 3 + 3));\n  flame(P);\n  for (const p of P.sp) {\n    const f = 1 - p.a / p.l;\n    if (p.k \u003c 2) add(round(p.y) * W + round(p.x), p.k ? [255 * sqrt(f), 210 * f * f, 120 * f * f * f] : p.c, p.k ? 1 : f);\n  }\n  // The loop glows red hot in the flame; the salt on it shows until it melts.\n  const ht = P.heat;\n  if (ht > 0.02) for (let i = 0; i \u003c P.hot.length; i += 2) add(P.hot[i], [255, 70 + 90 * ht, 25 * ht], ht * P.hot[i + 1]);\n  if (P.bead > 0.05) {\n    const c = SALTS[P.cur][2];\n    const p = round(P.pos[1]) * W + round(P.pos[0]);\n    for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = mix(buf[p * 3 + i], c[i] * (A + 60) + [180, 140, 90][i] * ht, P.bead);\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-flame-test","type":"code","name":"flame-test","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flame Test\n// Family:  chemistry\n// Idea:    On a dark lab bench a hand dips a nichrome wire loop into a row of labelled watch glasses and holds each salt in the pale blue flame of a Bunsen burner, which bursts into the element's colour, sputters with grains of salt and fades back to blue before the loop is cleaned in acid and goes for the next.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the flame test of the school chemistry lab\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Salt=0..8, Speed=0.2..3, Room=0..1, Air=-1..1\n//\n// Knob 1: Salt. Which watch glass the loop goes to next: at 0 it works along the row from copper (blue-green) through sodium (yellow-orange), lithium (crimson), barium (apple green), potassium (lilac), calcium (brick red), boric acid (green) and strontium (red); 1 to 8 keeps to one glass, copper at 1 to strontium at 8.\n// Knob 2: Speed. How fast the hand works and the flame moves: at 2 a salt burns about 4.5 s and the next one goes into the flame 12 s after it; at 0.2 the hand works ten times slower and the flame slows to a lazy flicker.\n// Knob 3: Room. The lab lights, on at 0 and off at 1, where only the flame lights the tiles, the bench and the hand.\n// Knob 4: Air. The burner's collar: shut at -1 for a tall, wavering yellow flame that hides the salt's colour, half open near 0 for the quiet blue flame of the test, wide open at 1 for a short roaring flame with a sharp inner cone.\n// Buttons: K1 tap sends the loop to the next salt now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The burner's axis, the first row of flame above its barrel, the bench top.\nconst FX = 21;\nconst MOUTH = 79;\nconst BENCH = 94;\nconst { min, max, floor, ceil, round, sin, cos, exp, abs, sqrt, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => a.map((v, i) => mix(v, b[i], t));\n\n// The row of watch glasses, left to right: symbol, flame colour, the salt's\n// own colour, how long its colour lasts in the flame (s), how strong it is.\nconst WHITE = [0.92, 0.91, 0.87];\nconst SALTS = [\n  [\"Cu\", [0, 240, 185], [0.35, 0.75, 0.7], 2, 1],\n  [\"Na\", [255, 175, 10], WHITE, 3.5, 1.25],\n  [\"Li\", [255, 10, 85], WHITE, 2, 1],\n  [\"Ba\", [170, 255, 35], WHITE, 2, 0.95],\n  [\"K\", [190, 100, 255], WHITE, 1.3, 0.8],\n  [\"Ca\", [255, 85, 10], WHITE, 2.2, 1],\n  [\"B\", [35, 255, 60], WHITE, 1.8, 1],\n  [\"Sr\", [255, 5, 25], WHITE, 2.2, 1.1],\n];\n// A heap of salt in a watch glass: x offset, row, shade.\nconst HEAP = [[0, 107, 1], [-1, 108, 0.95], [0, 108, 1], [1, 108, 0.8], [-2, 109, 0.85], [-1, 109, 0.9], [0, 109, 0.85], [1, 109, 0.75], [2, 109, 0.65]];\n// 3x5 letters for the labels.\nconst FONT = {\n  C: \"011/100/100/100/011\",\n  u: \"000/000/101/101/011\",\n  N: \"110/101/101/101/101\",\n  a: \"000/011/101/101/011\",\n  L: \"100/100/100/100/111\",\n  i: \"1/0/1/1/1\",\n  B: \"110/101/110/101/110\",\n  K: \"101/101/110/101/101\",\n  S: \"011/100/010/001/110\",\n  r: \"000/000/101/110/100\",\n  H: \"101/101/111/101/101\",\n  l: \"1/1/1/1/1\",\n};\n\n// The hand's round: in the flame with a salt, to the acid, dipped, back,\n// in the flame to burn the loop clean, to the next glass, dipped, back.\nconst DUR = [4.5, 1.1, 0.8, 1, 1.4, 1.2, 0.7, 1];\n// Where the loop goes, and the holder's angle there.\nconst FP = [FX + 4, 62, 0.45];\nconst AT = [51, 75, 1.22];\nconst AD = [51, 90, 1.22];\nconst ST = (i) => [4 + 8 * i, 100, 0.52];\nconst SD = (i) => [4 + 8 * i, 108, 0.52];\n\n// Smooth value noise, wrapping both ways.\nfunction noise(w, h, cell, oct) {\n  const out = new Float32Array(w * h);\n  let amp = 1;\n  let tot = 0;\n  for (let o = 0; o \u003c oct; o++, cell /= 2, amp *= 0.55) {\n    const gw = w / cell;\n    const gh = h / cell;\n    const g = Float32Array.from({ length: gw * gh }, rnd);\n    const at = (i, j) => g[(j % gh) * gw + (i % gw)];\n    for (let y = 0; y \u003c h; y++) {\n      const j = floor(y / cell);\n      const ty = sm(0, 1, y / cell - j);\n      for (let x = 0; x \u003c w; x++) {\n        const i = floor(x / cell);\n        const tx = sm(0, 1, x / cell - i);\n        const a = at(i, j) + (at(i + 1, j) - at(i, j)) * tx;\n        const b = at(i, j + 1) + (at(i + 1, j + 1) - at(i, j + 1)) * tx;\n        out[y * w + x] += amp * (a + (b - a) * ty);\n      }\n    }\n    tot += amp;\n  }\n  return out.map((v) => v / tot);\n}\n\n// Bilinear lookup in the 64x128 noise tile.\nfunction nz(T, x, y) {\n  const xi = floor(x);\n  const yi = floor(y);\n  const fx = x - xi;\n  const r0 = (yi & 127) * 64;\n  const r1 = ((yi + 1) & 127) * 64;\n  const a = T[r0 + (xi & 63)];\n  const b = T[r0 + ((xi + 1) & 63)];\n  const c = T[r1 + (xi & 63)];\n  const d = T[r1 + ((xi + 1) & 63)];\n  return a + (b - a) * fx + (c - a + (a - b - c + d) * fx) * (y - yi);\n}\n\n// Everything that stands still, as albedo: the tiled wall and its periodic\n// table, the gas tap and hose, the burner, the acid, the glasses, the labels.\nfunction build(P) {\n  const { alb, spec, G, benchM } = P;\n  const put = (x, y, c, s) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    alb.set(c, p * 3);\n    benchM[p] = 0;\n    if (s !== undefined) spec[p] = s;\n  };\n  const at = (x, y) => alb.slice((y * W + x) * 3, (y * W + x) * 3 + 3);\n  const text = (str, cx, top, ink) => {\n    const gl = [...str].map((c) => FONT[c].split(\"/\"));\n    let x0 = cx - (gl.reduce((s, g) => s + g[0].length + 1, -1) >> 1);\n    for (const g of gl) {\n      for (let j = 0; j \u003c 5; j++) for (let i = 0; i \u003c g[j].length; i++) if (g[j][i] === \"1\") put(x0 + i, top + j, ink);\n      x0 += g[0].length + 1;\n    }\n  };\n  const shade = Float32Array.from({ length: 256 }, rnd);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let v;\n      if (y \u003c BENCH - 1) {\n        const gx = (x + 5) % 11;\n        const gy = (y + 7) % 11;\n        v = gx === 10 || gy === 10 ? 0.36 : 0.45 + 0.05 * shade[(((x + 5) / 11) | 0) * 19 + (((y + 7) / 11) | 0) * 7 & 255] + 0.05 * (1 - (gx + gy) / 18) + (gx === 0 || gy === 0 ? 0.03 : 0);\n        put(x, y, [v, v * 1.01, v * 1.03]);\n      } else if (y === BENCH - 1) put(x, y, [0.06, 0.06, 0.07]);\n      else if (y === BENCH) put(x, y, [0.3, 0.3, 0.32], 0.3);\n      else if (y \u003c 125) {\n        v = 0.17 + 0.014 * rnd();\n        put(x, y, [v, v, v * 1.08]);\n        benchM[y * W + x] = 1;\n      } else put(x, y, y === 125 ? [0.42, 0.42, 0.44] : [0.1, 0.1, 0.11], y === 125 ? 0.4 : 0);\n      // The flame lights the room like a lamp along its height.\n      const dx = x - FX;\n      const dy = y \u003c 22 ? 22 - y : y > 78 ? y - 78 : 0;\n      G[y * W + x] = 1 / (1 + (dx * dx + dy * dy) / 480);\n    }\n  // A periodic table pinned to the tiles.\n  for (let y = 3; y \u003c= 27; y++) for (let x = 39; x \u003c= 62; x++) put(x, y, [0.85, 0.84, 0.78]);\n  for (let x = 42; x \u003c= 59; x++) put(x, 5, [0.2, 0.2, 0.28]);\n  const cell = (c, y, f) =>\n    put(42 + c, y, f ? [0.55, 0.85, 0.8] : c === 0 ? (y === 8 ? [0.7, 0.7, 0.75] : [0.95, 0.35, 0.35]) : c === 1 ? [0.98, 0.62, 0.3] : c \u003c 12 ? [0.95, 0.85, 0.35] : c \u003c 17 ? (c - 12 > (y - 8) / 2 - 1 ? [0.45, 0.8, 0.5] : [0.45, 0.65, 0.95]) : [0.7, 0.5, 0.95]);\n  for (let n = 1; n \u003c= 7; n++) for (let c = 0; c \u003c 18; c++) if (n > 3 || (n === 1 ? c === 0 || c === 17 : c \u003c 2 || c > 11)) cell(c, 6 + 2 * n, false);\n  for (let c = 3; c \u003c 17; c++) cell(c, 23, true), cell(c, 25, true);\n  // The heatproof mat the burner stands on.\n  for (let y = 96; y \u003c= 104; y++)\n    for (let x = 7 - ((y - 96) >> 1); x \u003c= 35 + ((y - 96) >> 1); x++) {\n      const v = y === 104 ? 0.22 : y === 96 ? 0.42 : 0.5 + 0.04 * rnd();\n      put(x, y, [v, v * 0.97, v * 0.92]);\n    }\n  // The gas tap on the wall, its lever, and the orange rubber hose to the burner.\n  for (let y = 82; y \u003c= 91; y++) for (let x = 0; x \u003c= 3; x++) put(x, y, [0.4, 0.4, 0.42], x === 0 ? 0.3 : 0);\n  for (let y = 86; y \u003c= 89; y++) for (let x = 1; x \u003c= 6; x++) put(x, y, y === 86 ? [0.9, 0.72, 0.2] : [0.62, 0.48, 0.2], y === 86 ? 0.5 : 0);\n  for (let x = 7; x \u003c= 9; x++) put(x, 88, [0.72, 0.56, 0.24]);\n  for (let j = 0; j \u003c 4; j++) put(4 + (j >> 1), 85 - j, [0.12, 0.12, 0.13]);\n  for (let k = 0; k \u003c= 80; k++) {\n    const t = k / 80;\n    const u = 1 - t;\n    const bx = round(u * u * u * 9 + 3 * u * u * t * 17 + 3 * u * t * t * 2 + t * t * t * 10);\n    const by = round(u * u * u * 88 + 3 * u * u * t * 94 + 3 * u * t * t * 106 + t * t * t * 101);\n    put(bx, by, [0.88, 0.38, 0.14], 0.25);\n    put(bx, by + 1, [0.6, 0.24, 0.08]);\n  }\n  // The burner: a heavy base, the gas inlet, the chrome barrel and its collar.\n  const BW = [5, 6, 7, 7, 7];\n  for (let j = 0; j \u003c 5; j++)\n    for (let x = FX - BW[j]; x \u003c= FX + BW[j]; x++) {\n      const v = j === 0 ? 0.42 : j === 4 ? 0.1 : 0.22 - 0.03 * j;\n      put(x, 99 + j, [v, v, v * 1.15], j === 0 ? 0.5 : 0);\n    }\n  for (let x = FX - 7; x \u003c= FX + 8; x++) put(x, 104, at(x, 104).map((v) => v * 0.55));\n  for (let x = FX - 11; x \u003c FX - 7; x++) put(x, 100, [0.78, 0.62, 0.3], 0.4), put(x, 101, [0.5, 0.38, 0.18]);\n  const BC = [0.28, 0.75, 0.56, 0.38, 0.2];\n  for (let y = 80; y \u003c= 98; y++)\n    for (let i = 0; i \u003c 5; i++) {\n      const v = BC[i] + (y === 80 ? 0.15 : 0);\n      put(FX - 2 + i, y, [v, v, v * 1.06], i === 1 ? 0.6 : 0);\n    }\n  const CC = [0.25, 0.5, 0.8, 0.64, 0.46, 0.3, 0.18];\n  for (let y = 89; y \u003c= 95; y++)\n    for (let i = 0; i \u003c 7; i++) {\n      const v = CC[i] * (y === 89 || y === 95 ? 0.75 : 1);\n      put(FX - 3 + i, y, [v, v * 0.8, v * 0.42], i === 2 ? 0.5 : 0);\n    }\n  // A beaker of dilute hydrochloric acid to clean the loop in.\n  for (let y = 75; y \u003c= 101; y++)\n    for (let x = 43; x \u003c= 58; x++) {\n      if (x === 43 && y > 76) continue;\n      if (y === 75 || y === 101 || x === 44 || x === 58 || x === 43) {\n        put(x, y, [0.5, 0.55, 0.6], x === 44 || y === 75 ? 0.8 : 0.4);\n        continue;\n      }\n      let c = at(x, y).map((v, i) => v * [0.9, 0.94, 0.98][i]);\n      if (y >= 85) c = c.map((v, i) => v * [0.62, 0.68, 0.7][i] + [0.08, 0.11, 0.14][i]);\n      put(x, y, c, y === 85 ? 0.6 : x === 45 ? 0.3 : 0);\n    }\n  P.front = [];\n  for (let y = 93; y \u003c= 99; y++) for (let x = 46; x \u003c= 56; x++) put(x, y, [0.88, 0.86, 0.78]), P.front.push(y * W + x);\n  text(\"HCl\", 51, 94, [0.07, 0.07, 0.1]);\n  // The watch glasses, each with its heap of salt, and the tape with their names.\n  for (let i = 0; i \u003c 8; i++) {\n    const c = 4 + 8 * i;\n    for (let x = c - 3; x \u003c= c + 3; x++) put(x, 112, at(x, 112).map((v) => v * 0.6));\n    for (let dy = -2; dy \u003c= 1; dy++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const e = (dx / 3.7) ** 2 + ((dy + 0.5) / 2.1) ** 2;\n        if (e \u003c 1) put(c + dx, 110 + dy, e > 0.45 ? [0.5, 0.56, 0.6] : at(c + dx, 110 + dy).map((v) => v * 1.3 + 0.07), e > 0.45 && dy \u003c 0 ? 0.9 : 0.3);\n      }\n    const k = SALTS[i][2];\n    for (const [dx, y, s] of HEAP) put(c + dx, y, k.map((v) => v * s));\n  }\n  for (let y = 115; y \u003c= 121; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const v = y === 115 || y === 121 ? 0.62 : 0.82;\n      if (x % 8) put(x, y, [v, v * 0.97, v * 0.82]);\n    }\n  for (let i = 0; i \u003c 8; i++) text(SALTS[i][0], 4 + 8 * i, 116, [0.06, 0.06, 0.09]);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), spec: F(N), G: F(N), buf: F(N * 3), benchM: new Uint8Array(N), NT: noise(64, 128, 16, 3) });\n  build(P);\n  Object.assign(P, { started: false, t: 0, tf: 0, ph: 0, pt: 0, cur: 0, salt: 0, pick: 0, ks: 0, kd: 0, kc: SALTS[0][1], heat: 0, bead: 0, sput: 0, flare: 0, sp: [], hot: [], sAcc: 0, bAcc: 0, air: 0.5, room: 0, from: FP, pos: FP, m: 1 });\n}\n\n// Kind 0 is a grain carried up the flame in the salt's colour, kind 1 a grain\n// spat out of the loop that glows as it falls, kind 2 a bubble in the acid.\nfunction spark(P, k) {\n  if (P.sp.length >= 160) return;\n  P.sp.push({\n    k,\n    x: P.pos[0] + (rnd() - 0.5) * 2.5,\n    y: P.pos[1] + (rnd() - 0.5) * 2,\n    vx: (rnd() - 0.5) * [14, 60, 2][k],\n    vy: -[25 + 45 * rnd(), 10 + 35 * rnd(), 7 + 6 * rnd()][k],\n    a: 0,\n    l: [0.25 + 0.55 * rnd(), 0.4 + 0.6 * rnd(), 2][k],\n    c: P.kc.map((v) => v * 0.6 + 100),\n  });\n}\n\nfunction enter(P) {\n  const ph = P.ph;\n  P.from = P.pos;\n  if (ph === 5) P.cur = P.pick ? P.pick - 1 : (P.cur + 1) % 8;\n  if (ph === 7) P.bead = 1;\n  if (ph === 0) {\n    P.salt = P.cur;\n    P.kc = SALTS[P.cur][1];\n    for (let i = 0; i \u003c 16; i++) spark(P, i & 1);\n  }\n  // Even a clean loop shows a flash of sodium from the acid and the fingers.\n  if (ph === 4) P.kc = SALTS[1][1];\n}\n\nfunction step(P, h) {\n  P.t += h;\n  P.pt += h;\n  while (P.pt >= DUR[P.ph]) {\n    P.pt -= DUR[P.ph];\n    P.ph = (P.ph + 1) % 8;\n    enter(P);\n  }\n  const ph = P.ph;\n  const s = P.pt / DUR[ph];\n  const e = sm(0, 1, s);\n  const dip = sm(0, 0.35, s) * sm(1, 0.62, s);\n  let pos;\n  if (ph === 0 || ph === 4) pos = [FP[0] + 0.5 * sin(P.t * 1.3), FP[1] + 0.5 * sin(P.t * 1.9 + 1), FP[2]];\n  else if (ph === 2 || ph === 6) {\n    pos = ph === 2 ? mix3(AT, AD, dip) : mix3(ST(P.cur), SD(P.cur), dip);\n    pos[0] += sin(s * 19) * 0.7 * dip;\n  } else {\n    pos = mix3(P.from, ph === 1 ? AT : ph === 5 ? ST(P.cur) : FP, e);\n    pos[1] -= 5 * sin(PI * e);\n  }\n  P.pos = pos;\n  const inF = ph === 0 || ph === 4;\n  const wet = ph === 2 && dip > 0.6;\n  P.heat += ((inF ? 1 : 0) - P.heat) * (1 - exp(-h / (inF ? 0.35 : wet ? 0.07 : 0.9)));\n  if (ph === 0) P.bead = max(0, 1 - P.pt / 0.9);\n\n  // The salt's colour: a burst as the loop goes in, a while at full, then a fade.\n  const S = SALTS[P.salt];\n  let tgt = 0;\n  P.sput = 0;\n  if (ph === 0) {\n    tgt = S[4] * (P.pt \u003c 1.3 ? sm(0, 0.18, P.pt) : exp(-(P.pt - 1.3) / S[3]));\n    P.sput = S[4] * (exp(-P.pt / 0.9) + 0.3 * exp(-P.pt / 2.5));\n  } else if (ph === 4) {\n    tgt = 0.85 * sm(0, 0.15, P.pt) * exp(-P.pt / 0.5);\n    P.sput = 0.5 * exp(-P.pt / 0.35);\n  }\n  P.ks += (tgt - P.ks) * (1 - exp(-h / (tgt > P.ks ? 0.06 : 0.22)));\n  P.flare *= exp(-h / 0.15);\n  P.kd = P.ks * (0.78 + 0.3 * nz(P.NT, P.t * 9, 40.5)) + P.flare;\n  // Grains crackle off the loop, now and then a whole crust at once.\n  if (P.sput > 0.02) {\n    P.sAcc += 40 * P.sput * h;\n    for (; P.sAcc >= 1; P.sAcc--) spark(P, rnd() \u003c 0.7 ? 0 : 1);\n    if (rnd() \u003c 3 * P.sput * h) {\n      P.flare += 0.3 * P.ks;\n      for (let i = 0; i \u003c 8; i++) spark(P, i % 3 ? 0 : 1);\n    }\n  }\n  if (wet) for (P.bAcc += 22 * h; P.bAcc >= 1; P.bAcc--) spark(P, 2);\n  P.sp = P.sp.filter((p) => {\n    p.a += h;\n    if (p.k === 0) {\n      p.vy -= 30 * h;\n      p.vx *= exp(-2 * h);\n    } else if (p.k === 1) p.vy += 90 * h;\n    p.x += p.vx * h;\n    p.y += p.vy * h;\n    return p.a \u003c p.l && !(p.k === 2 && p.y \u003c 85.5) && p.x >= 0 && p.x \u003c= 63 && p.y >= 0 && p.y \u003c= 124;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  P.pick = cl(round(k[0]), 0, 8);\n  P.m = cl(k[1], 0.2, 3) / 2;\n  const room = cl(k[2], 0, 1);\n  const air = (cl(k[3], -1, 1) + 1) / 2;\n  if (!P.started) {\n    P.started = true;\n    P.air = air;\n    P.room = room;\n    P.cur = P.pick ? P.pick - 1 : 0;\n    enter(P);\n    // Open a moment after the first salt went into the flame.\n    for (let i = 0; i \u003c 8; i++) step(P, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.ph \u003c 5) {\n    P.ph = 5;\n    P.pt = 0;\n    enter(P);\n  }\n  P.air += (air - P.air) * (1 - exp(-dt / 0.25));\n  P.room += (room - P.room) * (1 - exp(-dt / 0.12));\n  P.tf += dt * (0.3 + 0.7 * P.m);\n  step(P, dt * P.m);\n}\n\n// The holder: the wire loop, the nichrome wire, the aluminium handle, the\n// hand round it and the white sleeve of a lab coat. The loop and the first\n// few LEDs of wire are kept to glow when hot.\nfunction holder(P, light) {\n  const [lx, ly, th] = P.pos;\n  const ux = cos(th);\n  const uy = -sin(th);\n  P.hot = [];\n  for (let y = max(0, floor(ly + 100 * uy - 7)); y \u003c= min(H - 1, ceil(ly + 7)); y++)\n    for (let x = max(0, floor(lx - 3)); x \u003c W; x++) {\n      const dx = x - lx;\n      const dy = y - ly;\n      const s = dx * ux + dy * uy;\n      const q = dx * uy - dy * ux;\n      if (s \u003c -2.5 || abs(q) > 6.2) continue;\n      let c = null;\n      const hand = ((s - 31) / 4.3) ** 2 + ((q + 0.3) / 3.7) ** 2;\n      if (((s - 27.5) / 2.6) ** 2 + ((q - 2.5) / 1.3) ** 2 \u003c 1) c = [1, 0.78, 0.64];\n      else if (hand \u003c 1) {\n        // Curled fingers under the handle, the knuckles above it.\n        const k = 0.84 + 0.07 * q - (q \u003c -0.8 && abs(((s - 29.5) % 2) - 1) \u003c 0.45 ? 0.22 : 0);\n        c = [k, 0.72 * k, 0.58 * k];\n      } else if (s > 34 && s \u003c 37.5 && abs(q + 0.5) \u003c 3) c = [0.88, 0.62, 0.5];\n      else if (s >= 37 && abs(q + 0.6) \u003c 5.4) {\n        const k = (s \u003c 39 ? 0.74 : 0.9) + 0.03 * q;\n        c = [0.88 * k, 0.89 * k, 0.92 * k];\n      } else if (s >= 9 && s \u003c 30 && q > -1 && q \u003c 0.6) c = q > -0.2 ? [0.66, 0.68, 0.74] : [0.36, 0.37, 0.42];\n      else if ((s >= 1 && s \u003c 9 && abs(q) \u003c 0.6) || (s \u003c 1.8 && abs(hypot(dx, dy) - 1.25) \u003c 0.55)) {\n        c = [0.55, 0.55, 0.52];\n        if (s \u003c 5) P.hot.push(y * W + x, 1 - max(0, s) / 6);\n      }\n      if (c) light(y * W + x, c);\n    }\n}\n\nfunction flame(P) {\n  const { buf, NT, kd, kc } = P;\n  const a = P.air;\n  const t = P.tf;\n  const k1 = min(1, kd);\n  const Yf = sm(0.5, 0.06, a);\n  const Rf = sm(0.6, 1, a);\n  const Cf = sm(0.12, 0.6, a);\n  const bl = sm(0.06, 0.5, a);\n  const fl = 1 + (0.06 * sin(t * 7.3) + 0.05 * sin(t * 12.9 + 1)) * (1 + Yf);\n  const Hf = mix(mix(76, 58, bl), 47, Rf) * (1 + 0.2 * k1) * fl;\n  const Wm = mix(8.5, 6.4, bl) - Rf + 1.6 * k1;\n  const Hi = mix(7, 15, sm(0.15, 1, a));\n  const A = mix(5, 2, bl) * (1 - 0.6 * Rf);\n  const ws = mix(4.5, 6.5, a) + 7 * Rf;\n  const vs = mix(30, 46, a) + 40 * Rf;\n  const tn = mix(0.75, 0.5, a);\n  const [lx, ly] = P.pos;\n  const inF = P.heat > 0.5;\n  const salt = 1 - 0.8 * Yf;\n  for (let y = max(0, floor(MOUTH - Hf * 1.3)); y \u003c= MOUTH; y++) {\n    const hg = MOUTH + 1 - y;\n    const v = hg / Hf;\n    const cx = FX + A * v ** 1.4 * sin(0.11 * hg - ws * t) + 0.45 * A * v * sin(0.23 * hg - 1.7 * ws * t + 2);\n    const hw = max(0.7, (2.6 + (Wm - 2.6) * sm(0, 0.3, v)) * sqrt(max(0, 1.05 - v)));\n    const yw = Yf * sm(2, 9, hg);\n    const ri = 2.5 * max(0, 1 - hg / Hi) ** 0.8 + 0.25;\n    const cxi = FX + 0.35 * sin(t * 9 + hg * 0.3) * (1 - Rf);\n    const above = sm(ly + 5, ly - 2, y);\n    for (let x = max(0, floor(cx - hw * 1.7 - 3)); x \u003c= min(W - 1, ceil(cx + hw * 1.7 + 3)); x++) {\n      const n = nz(NT, x * 1.1 + 7, y * 0.55 + t * vs * 0.55);\n      const d2 = abs(x - cx) / hw + (n - 0.5) * tn * (0.25 + v);\n      const O = sm(1.12, 0.55, d2) * sm(1, 0.72, v + (n - 0.5) * 0.45 * v);\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      // The outer flame: pale blue, or yellow with soot when the collar is shut.\n      if (O > 0.002) {\n        const ob = O * (0.62 + 0.38 * (1 - v)) * (0.85 + 0.25 * n) * (0.8 + 0.25 * Rf);\n        const core = sm(0.85, 0.2, d2) * (1 - 0.5 * v);\n        const lum = O * (0.75 + 0.35 * n);\n        r = mix(58 * ob, 255 * lum, yw);\n        g = mix(98 * ob, lum * (95 + 150 * core - 60 * v), yw);\n        b = mix(225 * ob, O * (10 + 120 * core * core), yw);\n      }\n      // The inner cone, brightest along its surface.\n      if (hg \u003c Hi + 1) {\n        const di = abs(x - cxi);\n        const C = sm(ri + 0.75, ri - 0.35, di) * Cf * (0.92 + 0.08 * sin(t * 61 + hg));\n        if (C > 0) {\n          const rim = sm(ri - 1.3, ri - 0.3, di);\n          r += (60 + 100 * rim) * C;\n          g += (140 + 100 * rim) * C;\n          b += 255 * C;\n        }\n      }\n      // The salt's colour rises from the loop and fills the flame above it in tongues.\n      let ps = 0;\n      if (kd > 0.01) {\n        const n2 = nz(NT, x * 1.6 + 31, y * 0.8 + t * vs * 0.9 + 53);\n        ps = kd * salt * (O * above * (0.4 + 0.95 * n2) + (inF ? 0.9 * exp(-((x - lx) ** 2 + (y - ly) ** 2) / 10) : 0));\n        const q = max(0, 1 - 1.4 * ps);\n        r = r * q + kc[0] * ps;\n        g = g * q + kc[1] * ps;\n        b = b * q + kc[2] * ps;\n      }\n      if (r + g + b \u003c 1) continue;\n      const o = (y * W + x) * 3;\n      const dim = 1 - 0.4 * min(1, O + 0.5 * ps);\n      buf[o] = buf[o] * dim + r;\n      buf[o + 1] = buf[o + 1] * dim + g;\n      buf[o + 2] = buf[o + 2] * dim + b;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const { buf, alb, spec, G, benchM, kc } = P;\n  const a = P.air;\n  const Yf = sm(0.5, 0.06, a);\n  const k1 = min(1.3, P.kd) * (1 - 0.8 * Yf);\n  const fl = 0.9 + 0.1 * nz(P.NT, P.tf * 11, 70.5) + 0.12 * Yf * sin(P.tf * 9);\n  // The flame's own colour, which lights the room.\n  const FC = [0, 1, 2].map((i) => (mix([58, 98, 225][i] * 0.85, [255, 165, 40][i], Yf) * (1 - 0.8 * min(1, k1)) + kc[i] * k1) * fl);\n  const [gr, gg, gb] = FC.map((v) => v * (0.52 + 0.3 * Yf));\n  const A = 150 * (1 - P.room) ** 1.3 + 1.5;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const g = G[p];\n    const s = spec[p];\n    buf[o] = alb[o] * (A + gr * g) + s * (0.3 * A + 1.4 * gr * g);\n    buf[o + 1] = alb[o + 1] * (A + gg * g) + s * (0.3 * A + 1.4 * gg * g);\n    buf[o + 2] = alb[o + 2] * (A * 0.95 + gb * g) + s * (0.3 * A + 1.4 * gb * g);\n  }\n  const add = (p, c, f) => {\n    for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] += c[i] * f;\n  };\n  // The glossy bench: the ceiling lights along its back and the flame under the burner.\n  for (let x = 0; x \u003c W; x++) for (const [y, k] of [[96, 0.22], [97, 0.12]]) if (benchM[y * W + x]) add(y * W + x, [A, A, A], k);\n  const sway = 1.5 * sin(P.tf * 4.1);\n  for (let y = 105; y \u003c= 124; y++) {\n    const w = 2 + (y - 105) * 0.22;\n    const k = 0.34 * exp(-(y - 105) / 7);\n    for (let x = max(0, floor(FX - 3 * w)); x \u003c= min(W - 1, ceil(FX + 3 * w)); x++)\n      if (benchM[y * W + x]) add(y * W + x, FC, k * exp(-(((x - FX - (sway * (y - 105)) / 20) / w) ** 2)));\n  }\n  const light = (p, c) => {\n    const g = G[p];\n    buf[p * 3] = c[0] * (A + gr * g);\n    buf[p * 3 + 1] = c[1] * (A + gg * g);\n    buf[p * 3 + 2] = c[2] * (A * 0.95 + gb * g);\n  };\n  // The air hole in the collar opens as the collar turns.\n  const hole = round(4 * a);\n  for (let y = 91; y \u003c= 93; y++) for (let x = FX - (hole >> 1); x \u003c FX - (hole >> 1) + hole; x++) light(y * W + x, [0.03, 0.03, 0.03]);\n  for (const p of P.sp) if (p.k === 2) light(round(p.y) * W + round(p.x), [0.7, 0.75, 0.8]);\n  holder(P, light);\n  // The label on the beaker hides the loop behind it.\n  if (P.ph >= 1 && P.ph \u003c= 3) for (const p of P.front) light(p, alb.subarray(p * 3, p * 3 + 3));\n  flame(P);\n  for (const p of P.sp) {\n    const f = 1 - p.a / p.l;\n    if (p.k \u003c 2) add(round(p.y) * W + round(p.x), p.k ? [255 * sqrt(f), 210 * f * f, 120 * f * f * f] : p.c, p.k ? 1 : f);\n  }\n  // The loop glows red hot in the flame; the salt on it shows until it melts.\n  const ht = P.heat;\n  if (ht > 0.02) for (let i = 0; i \u003c P.hot.length; i += 2) add(P.hot[i], [255, 70 + 90 * ht, 25 * ht], ht * P.hot[i + 1]);\n  if (P.bead > 0.05) {\n    const c = SALTS[P.cur][2];\n    const p = round(P.pos[1]) * W + round(P.pos[0]);\n    for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = mix(buf[p * 3 + i], c[i] * (A + 60) + [180, 140, 90][i] * ht, P.bead);\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Salt=0..8, Speed=0.2..3, Room=0..1, Air=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Salt","min":0,"max":8,"about":"Which watch glass the loop goes to next: at 0 it works along the row from copper (blue-green) through sodium (yellow-orange), lithium (crimson), barium (apple green), potassium (lilac), calcium (brick red), boric acid (green) and strontium (red); 1 to 8 keeps to one glass, copper at 1 to strontium at 8."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the hand works and the flame moves: at 2 a salt burns about 4.5 s and the next one goes into the flame 12 s after it; at 0.2 the hand works ten times slower and the flame slows to a lazy flicker."},{"name":"Room","min":0,"max":1,"about":"The lab lights, on at 0 and off at 1, where only the flame lights the tiles, the bench and the hand."},{"name":"Air","min":-1,"max":1,"about":"The burner's collar: shut at -1 for a tall, wavering yellow flame that hides the salt's colour, half open near 0 for the quiet blue flame of the test, wide open at 1 for a short roaring flame with a sharp inner cone."}],"start":[0,2,0,0.06],"measures":{"motion":0.0593,"detail":0.0588,"edges":0.4458,"complexity":1.5027,"coverage":0.9519,"colour":0.1298,"drift":0.0434},"knobResponse":[0.0735,0.0457,0.2666,0.1163]},{"slug":"flip-clock","title":"Flip Clock","family":"time","round":2,"note":"세워 둔 넘김 시계예요. 위에 시, 아래에 분 카드가 있고, 바뀔 때마다 옛 카드의 윗장이 앞으로 넘어가 그 뒷면이 새 카드의 아랫장으로 내려앉아요.","idea":"A split-flap clock stood on end, hours above minutes: at each change the top half of the old card falls forward, and its back lands as the bottom half of the new one.","buttons":"K1 tap sets the clock back to 09:58, and the flaps spin round to get there.","code":"// ===== Patternflow pattern =====\n// Title:   Flip Clock\n// Family:  time\n// Idea:    A split-flap clock stood on end, hours above minutes: at each change the top half of the old card falls forward, and its back lands as the bottom half of the new one.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Rate=0..3, Seconds=0..1, Light=0..1\n//\n// Knob 1: Colour. The colour of the digits; the dark cards take a little of it.\n// Knob 2: Rate. From real time at 0 to a minute every second at 3, a minute every four seconds where it starts.\n// Knob 3: Seconds. Turn it up and a seconds card joins below, growing until all three are one size.\n// Knob 4: Light. How hard the light falls on the cards, from flat to a deep shadow under each falling flap.\n// Buttons: K1 tap sets the clock back to 09:58, and the flaps spin round to get there.\n\nconst START = 9 * 3600 + 59 * 60 + 20;\n// Like a real flap clock, the hours are one wheel of 24 cards and the minutes\n// and seconds wheels of 60, each card printed with both digits.\nconst SIZE = [24, 60, 60];\nconst MAX_DW = 24;\nconst MAX_DH = 42;\n\n// Each digit is a few strokes in a box one wide and one tall, y downward.\n// Arcs are cut into short straight pieces when the masks are baked.\nconst FONT = [\n  [[\"l\", 0, 0.3, 0, 0.7], [\"a\", 0.5, 0.7, 0.5, 0.3, 180, 0], [\"l\", 1, 0.7, 1, 0.3], [\"a\", 0.5, 0.3, 0.5, 0.3, 0, -180]],\n  [[\"l\", 0.58, 0, 0.58, 1], [\"l\", 0.58, 0, 0.2, 0.22]],\n  [[\"a\", 0.5, 0.28, 0.5, 0.28, 190, 385], [\"l\", 0.953, 0.398, 0, 1], [\"l\", 0, 1, 1, 1]],\n  [[\"a\", 0.5, 0.25, 0.47, 0.25, 205, 450], [\"a\", 0.5, 0.74, 0.5, 0.26, 270, 520]],\n  [[\"l\", 0.72, 1, 0.72, 0], [\"l\", 0.72, 0, 0, 0.7], [\"l\", 0, 0.7, 1, 0.7]],\n  [[\"l\", 0.95, 0, 0.12, 0], [\"l\", 0.12, 0, 0.07, 0.47], [\"a\", 0.5, 0.68, 0.5, 0.32, 215, 510]],\n  [[\"a\", 0.5, 0.7, 0.5, 0.3, 0, 360], [\"a\", 0.95, 0.7, 0.95, 0.68, 180, 250]],\n  [[\"l\", 0, 0, 1, 0], [\"l\", 1, 0, 0.32, 1]],\n  [[\"a\", 0.5, 0.24, 0.42, 0.24, 0, 360], [\"a\", 0.5, 0.73, 0.5, 0.27, 0, 360]],\n  [[\"a\", 0.5, 0.3, 0.5, 0.3, 0, 360], [\"a\", 0.05, 0.3, 0.95, 0.68, 0, 70]],\n];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction strokes() {\n  const all = [];\n  for (let d = 0; d \u003c 10; d++) {\n    const segs = [];\n    for (const s of FONT[d]) {\n      if (s[0] === \"l\") {\n        segs.push(s[1], s[2], s[3], s[4]);\n        continue;\n      }\n      const [, cx, cy, rx, ry, a0, a1] = s;\n      const pieces = Math.max(3, Math.round(Math.abs(a1 - a0) / 20));\n      for (let i = 0; i \u003c pieces; i++) {\n        const b0 = ((a0 + ((a1 - a0) * i) / pieces) * Math.PI) / 180;\n        const b1 = ((a0 + ((a1 - a0) * (i + 1)) / pieces) * Math.PI) / 180;\n        segs.push(cx + rx * Math.cos(b0), cy + ry * Math.sin(b0), cx + rx * Math.cos(b1), cy + ry * Math.sin(b1));\n      }\n    }\n    all.push(new Float32Array(segs));\n  }\n  return all;\n}\n\n// Bake the ten digits at one size into coverage masks, one byte an LED, with\n// a one-LED soft edge. This runs only when a card changes size.\nfunction bake(p, m, dh) {\n  const dw = Math.round(dh * 0.56);\n  const sw = Math.max(2.2, dh * 0.135);\n  m.dh = dh;\n  m.dw = dw;\n  const half = sw / 2;\n  const sx = dw - sw;\n  const sy = dh - sw;\n  for (let d = 0; d \u003c 10; d++) {\n    const segs = p.strokes[d];\n    for (let j = 0; j \u003c dh; j++) {\n      for (let i = 0; i \u003c dw; i++) {\n        const x = i + 0.5;\n        const y = j + 0.5;\n        let best = 1e9;\n        for (let s = 0; s \u003c segs.length; s += 4) {\n          const ax = half + segs[s] * sx;\n          const ay = half + segs[s + 1] * sy;\n          const bx = half + segs[s + 2] * sx - ax;\n          const by = half + segs[s + 3] * sy - ay;\n          const px = x - ax;\n          const py = y - ay;\n          const len = bx * bx + by * by;\n          let t = len > 0 ? (px * bx + py * by) / len : 0;\n          t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n          const dx = px - bx * t;\n          const dy = py - by * t;\n          const dd = dx * dx + dy * dy;\n          if (dd \u003c best) best = dd;\n        }\n        const c = half + 0.5 - Math.sqrt(best);\n        m.mask[(d * MAX_DH + j) * MAX_DW + i] = Math.round(Math.max(0, Math.min(1, c)) * 255);\n      }\n    }\n  }\n}\n\n// Bilinear read of a baked digit at box position (x, y), so a squashed flap stays smooth.\nfunction sample(m, d, x, y) {\n  const u = x - 0.5;\n  const v = y - 0.5;\n  const i = Math.floor(u);\n  const j = Math.floor(v);\n  if (i \u003c -1 || j \u003c -1 || i >= m.dw || j >= m.dh) return 0;\n  const fu = u - i;\n  const fv = v - j;\n  const base = d * MAX_DH;\n  const mask = m.mask;\n  const a = i >= 0 && j >= 0 ? mask[(base + j) * MAX_DW + i] : 0;\n  const b = i + 1 \u003c m.dw && j >= 0 ? mask[(base + j) * MAX_DW + i + 1] : 0;\n  const c = i >= 0 && j + 1 \u003c m.dh ? mask[(base + j + 1) * MAX_DW + i] : 0;\n  const e = i + 1 \u003c m.dw && j + 1 \u003c m.dh ? mask[(base + j + 1) * MAX_DW + i + 1] : 0;\n  return ((a * (1 - fu) + b * fu) * (1 - fv) + (c * (1 - fu) + e * fu) * fv) / 255;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.strokes = strokes();\n  // One set of masks for the hours and minutes cards, one for the seconds card.\n  p.masks = [\n    { dh: 0, dw: 0, mask: new Uint8Array(10 * MAX_DH * MAX_DW) },\n    { dh: 0, dw: 0, mask: new Uint8Array(10 * MAX_DH * MAX_DW) },\n  ];\n  p.clock = START;\n  p.target = new Int32Array(3);\n  p.shown = new Int32Array([9, 59, 20]);\n  p.prev = new Int32Array([9, 59, 20]);\n  p.prog = new Float32Array([1, 1, 1]);\n  p.dur = new Float32Array([0.34, 0.34, 0.34]);\n  p.rect = new Int32Array(12);\n  p.card = [0, 0, 0];\n  p.face = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // At 0 the digits are a pale blue rather than red.\n  p.hue = k[0] + 0.6;\n  p.light = 0.3 + 0.7 * k[3];\n  p.secs = k[2];\n  if (input.btnPressed && input.btnPressed[0]) p.clock = 9 * 3600 + 58 * 60;\n  p.clock += dt * Math.pow(60, k[1] / 3);\n  const t = Math.floor(p.clock) % 86400;\n  p.target[0] = Math.floor(t / 3600);\n  p.target[1] = Math.floor(t / 60) % 60;\n  p.target[2] = t % 60;\n  for (let u = 0; u \u003c 3; u++) {\n    if (p.prog[u] \u003c 1) p.prog[u] = Math.min(1, p.prog[u] + dt / p.dur[u]);\n    if (p.prog[u] >= 1 && p.shown[u] !== p.target[u]) {\n      // A wheel can only step to its next card, so a clock run fast spins\n      // its flaps to catch up the way a real one does.\n      const n = SIZE[u];\n      p.prev[u] = p.shown[u];\n      p.shown[u] = (p.shown[u] + 1) % n;\n      const behind = (p.target[u] - p.prev[u] + n) % n;\n      p.dur[u] = 0.34 / Math.min(5, behind);\n      p.prog[u] = 0;\n    }\n  }\n}\n\nfunction setRect(r, u, x, y, w, h) {\n  r[u * 4] = x;\n  r[u * 4 + 1] = y;\n  r[u * 4 + 2] = w;\n  r[u * 4 + 3] = h;\n}\n\nfunction layout(p) {\n  const r = p.rect;\n  if (p.secs \u003c= 0.12) {\n    // Hours and minutes, one big card each.\n    setRect(r, 0, 3, 5, 58, 55);\n    setRect(r, 1, 3, 68, 58, 55);\n    return 2;\n  }\n  // The seconds card grows from small to the size of the other two.\n  const u = Math.min(1, (p.secs - 0.12) / 0.88);\n  const hs = 2 * Math.round(12 + 6 * u) + 1;\n  let ch = Math.floor((128 - hs - 12) / 2);\n  if (ch % 2 === 0) ch--;\n  const top = Math.floor((128 - 2 * ch - hs - 8) / 2);\n  const sw = Math.min(58, 2 * Math.round(hs * 0.8));\n  setRect(r, 0, 3, top, 58, ch);\n  setRect(r, 1, 3, top + ch + 4, 58, ch);\n  setRect(r, 2, (64 - sw) / 2, top + 2 * ch + 8, sw, hs);\n  return 3;\n}\n\nfunction drawCard(display, p, u) {\n  const x0 = p.rect[u * 4];\n  const y0 = p.rect[u * 4 + 1];\n  const cw = p.rect[u * 4 + 2];\n  const ch = p.rect[u * 4 + 3];\n  const L = p.light;\n  const m = p.masks[u === 2 ? 1 : 0];\n  const dh = Math.min(MAX_DH, Math.round(ch * 0.72));\n  if (m.dh !== dh) bake(p, m, dh);\n  const dw = m.dw;\n  const gap = Math.max(2, Math.round(cw * 0.08));\n  const lx = Math.round(cw / 2 - gap / 2 - dw);\n  const rx = Math.round(cw / 2 + gap / 2);\n  const oy = Math.round((ch - dh) / 2);\n  const value = p.shown[u];\n  const old = p.prev[u];\n  const prog = p.prog[u];\n  const flipping = prog \u003c 1;\n\n  const hh = (ch - 1) / 2;\n  const hinge = hh + 0.5;\n  const theta = prog * Math.PI;\n  const cos = Math.cos(theta);\n  const sin = Math.sin(theta);\n  const reach = hh * Math.abs(cos);\n  const first = flipping && prog \u003c 0.5;\n  const second = flipping && prog >= 0.5;\n  const mid = cw / 2;\n  const card = p.card;\n  const face = p.face;\n\n  for (let y = 0; y \u003c ch; y++) {\n    const ry = y + 0.5;\n    const upper = ry \u003c hh;\n    const lower = ry > hh + 1;\n    if (!upper && !lower) continue;\n    // Which surface is seen on this row, where on its card it comes from, and how it is lit.\n    let sy = ry;\n    let shown = value;\n    let shade = 1;\n    let flap = false;\n    let f = 0;\n    if (first && upper && hinge - ry \u003c= reach) {\n      f = (hinge - ry) / reach;\n      sy = hinge - f * hh;\n      shown = old;\n      shade = 1 - 0.8 * L * sin;\n      flap = true;\n    } else if (second && lower && ry - hinge \u003c= reach) {\n      f = (ry - hinge) / reach;\n      sy = hinge + f * hh;\n      shade = 1 - 0.8 * L * sin;\n      flap = true;\n    } else if (lower && flipping) {\n      // The old bottom half stays until the flap lands on it, in its shadow.\n      shown = old;\n      if (second) {\n        const below = ry - hinge - reach;\n        if (below \u003c 7) shade *= 1 - 0.6 * L * (1 - below / 7) * (1 - 0.6 * Math.abs(cos));\n      }\n    }\n    const ty = Math.floor(sy);\n    const roundTop = ty === 0 || ty === hh + 1;\n    const roundBottom = ty === ch - 1 || ty === hh - 1;\n    // Light from above: each card darkens toward its foot, the top edge\n    // catches the light and the row under the split sits in shadow.\n    shade *= 1 + L * (0.1 - 0.45 * (sy / ch));\n    if (ty === 0) shade *= 1 + 0.5 * L;\n    else if (ty === hh + 1) shade *= 1 - 0.5 * L;\n    const tens = Math.floor(shown / 10);\n    const ones = shown % 10;\n    // The falling flap's free edge swings toward you, so it looks a little wider.\n    const widen = flap ? 1 + 0.12 * sin * f : 1;\n    const pad = flap ? 2 : 0;\n    for (let x = -pad; x \u003c cw + pad; x++) {\n      const sx = mid + (x + 0.5 - mid) / widen;\n      if (sx \u003c 0 || sx >= cw) continue;\n      const tx = Math.floor(sx);\n      // Each half card has its corners cut.\n      if ((tx === 0 || tx === cw - 1) && (roundTop || roundBottom)) continue;\n      const a = sx \u003c mid ? sample(m, tens, sx - lx, sy - oy) : sample(m, ones, sx - rx, sy - oy);\n      const r = (card[0] + (face[0] - card[0]) * a) * shade;\n      const g = (card[1] + (face[1] - card[1]) * a) * shade;\n      const b = (card[2] + (face[2] - card[2]) * a) * shade;\n      display.setPixel(x0 + x, y0 + y, r, g, b);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  hsv(p.hue, 0.3, 0.19, p.card);\n  hsv(p.hue, 0.4, 1, p.face);\n  const cards = layout(p);\n  for (let u = 0; u \u003c cards; u++) drawCard(display, p, u);\n}\n","layer":{"id":"layer-flip-clock","type":"code","name":"flip-clock","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flip Clock\n// Family:  time\n// Idea:    A split-flap clock stood on end, hours above minutes: at each change the top half of the old card falls forward, and its back lands as the bottom half of the new one.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Colour=0..1, Rate=0..3, Seconds=0..1, Light=0..1\n//\n// Knob 1: Colour. The colour of the digits; the dark cards take a little of it.\n// Knob 2: Rate. From real time at 0 to a minute every second at 3, a minute every four seconds where it starts.\n// Knob 3: Seconds. Turn it up and a seconds card joins below, growing until all three are one size.\n// Knob 4: Light. How hard the light falls on the cards, from flat to a deep shadow under each falling flap.\n// Buttons: K1 tap sets the clock back to 09:58, and the flaps spin round to get there.\n\nconst START = 9 * 3600 + 59 * 60 + 20;\n// Like a real flap clock, the hours are one wheel of 24 cards and the minutes\n// and seconds wheels of 60, each card printed with both digits.\nconst SIZE = [24, 60, 60];\nconst MAX_DW = 24;\nconst MAX_DH = 42;\n\n// Each digit is a few strokes in a box one wide and one tall, y downward.\n// Arcs are cut into short straight pieces when the masks are baked.\nconst FONT = [\n  [[\"l\", 0, 0.3, 0, 0.7], [\"a\", 0.5, 0.7, 0.5, 0.3, 180, 0], [\"l\", 1, 0.7, 1, 0.3], [\"a\", 0.5, 0.3, 0.5, 0.3, 0, -180]],\n  [[\"l\", 0.58, 0, 0.58, 1], [\"l\", 0.58, 0, 0.2, 0.22]],\n  [[\"a\", 0.5, 0.28, 0.5, 0.28, 190, 385], [\"l\", 0.953, 0.398, 0, 1], [\"l\", 0, 1, 1, 1]],\n  [[\"a\", 0.5, 0.25, 0.47, 0.25, 205, 450], [\"a\", 0.5, 0.74, 0.5, 0.26, 270, 520]],\n  [[\"l\", 0.72, 1, 0.72, 0], [\"l\", 0.72, 0, 0, 0.7], [\"l\", 0, 0.7, 1, 0.7]],\n  [[\"l\", 0.95, 0, 0.12, 0], [\"l\", 0.12, 0, 0.07, 0.47], [\"a\", 0.5, 0.68, 0.5, 0.32, 215, 510]],\n  [[\"a\", 0.5, 0.7, 0.5, 0.3, 0, 360], [\"a\", 0.95, 0.7, 0.95, 0.68, 180, 250]],\n  [[\"l\", 0, 0, 1, 0], [\"l\", 1, 0, 0.32, 1]],\n  [[\"a\", 0.5, 0.24, 0.42, 0.24, 0, 360], [\"a\", 0.5, 0.73, 0.5, 0.27, 0, 360]],\n  [[\"a\", 0.5, 0.3, 0.5, 0.3, 0, 360], [\"a\", 0.05, 0.3, 0.95, 0.68, 0, 70]],\n];\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction strokes() {\n  const all = [];\n  for (let d = 0; d \u003c 10; d++) {\n    const segs = [];\n    for (const s of FONT[d]) {\n      if (s[0] === \"l\") {\n        segs.push(s[1], s[2], s[3], s[4]);\n        continue;\n      }\n      const [, cx, cy, rx, ry, a0, a1] = s;\n      const pieces = Math.max(3, Math.round(Math.abs(a1 - a0) / 20));\n      for (let i = 0; i \u003c pieces; i++) {\n        const b0 = ((a0 + ((a1 - a0) * i) / pieces) * Math.PI) / 180;\n        const b1 = ((a0 + ((a1 - a0) * (i + 1)) / pieces) * Math.PI) / 180;\n        segs.push(cx + rx * Math.cos(b0), cy + ry * Math.sin(b0), cx + rx * Math.cos(b1), cy + ry * Math.sin(b1));\n      }\n    }\n    all.push(new Float32Array(segs));\n  }\n  return all;\n}\n\n// Bake the ten digits at one size into coverage masks, one byte an LED, with\n// a one-LED soft edge. This runs only when a card changes size.\nfunction bake(p, m, dh) {\n  const dw = Math.round(dh * 0.56);\n  const sw = Math.max(2.2, dh * 0.135);\n  m.dh = dh;\n  m.dw = dw;\n  const half = sw / 2;\n  const sx = dw - sw;\n  const sy = dh - sw;\n  for (let d = 0; d \u003c 10; d++) {\n    const segs = p.strokes[d];\n    for (let j = 0; j \u003c dh; j++) {\n      for (let i = 0; i \u003c dw; i++) {\n        const x = i + 0.5;\n        const y = j + 0.5;\n        let best = 1e9;\n        for (let s = 0; s \u003c segs.length; s += 4) {\n          const ax = half + segs[s] * sx;\n          const ay = half + segs[s + 1] * sy;\n          const bx = half + segs[s + 2] * sx - ax;\n          const by = half + segs[s + 3] * sy - ay;\n          const px = x - ax;\n          const py = y - ay;\n          const len = bx * bx + by * by;\n          let t = len > 0 ? (px * bx + py * by) / len : 0;\n          t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n          const dx = px - bx * t;\n          const dy = py - by * t;\n          const dd = dx * dx + dy * dy;\n          if (dd \u003c best) best = dd;\n        }\n        const c = half + 0.5 - Math.sqrt(best);\n        m.mask[(d * MAX_DH + j) * MAX_DW + i] = Math.round(Math.max(0, Math.min(1, c)) * 255);\n      }\n    }\n  }\n}\n\n// Bilinear read of a baked digit at box position (x, y), so a squashed flap stays smooth.\nfunction sample(m, d, x, y) {\n  const u = x - 0.5;\n  const v = y - 0.5;\n  const i = Math.floor(u);\n  const j = Math.floor(v);\n  if (i \u003c -1 || j \u003c -1 || i >= m.dw || j >= m.dh) return 0;\n  const fu = u - i;\n  const fv = v - j;\n  const base = d * MAX_DH;\n  const mask = m.mask;\n  const a = i >= 0 && j >= 0 ? mask[(base + j) * MAX_DW + i] : 0;\n  const b = i + 1 \u003c m.dw && j >= 0 ? mask[(base + j) * MAX_DW + i + 1] : 0;\n  const c = i >= 0 && j + 1 \u003c m.dh ? mask[(base + j + 1) * MAX_DW + i] : 0;\n  const e = i + 1 \u003c m.dw && j + 1 \u003c m.dh ? mask[(base + j + 1) * MAX_DW + i + 1] : 0;\n  return ((a * (1 - fu) + b * fu) * (1 - fv) + (c * (1 - fu) + e * fu) * fv) / 255;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.strokes = strokes();\n  // One set of masks for the hours and minutes cards, one for the seconds card.\n  p.masks = [\n    { dh: 0, dw: 0, mask: new Uint8Array(10 * MAX_DH * MAX_DW) },\n    { dh: 0, dw: 0, mask: new Uint8Array(10 * MAX_DH * MAX_DW) },\n  ];\n  p.clock = START;\n  p.target = new Int32Array(3);\n  p.shown = new Int32Array([9, 59, 20]);\n  p.prev = new Int32Array([9, 59, 20]);\n  p.prog = new Float32Array([1, 1, 1]);\n  p.dur = new Float32Array([0.34, 0.34, 0.34]);\n  p.rect = new Int32Array(12);\n  p.card = [0, 0, 0];\n  p.face = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // At 0 the digits are a pale blue rather than red.\n  p.hue = k[0] + 0.6;\n  p.light = 0.3 + 0.7 * k[3];\n  p.secs = k[2];\n  if (input.btnPressed && input.btnPressed[0]) p.clock = 9 * 3600 + 58 * 60;\n  p.clock += dt * Math.pow(60, k[1] / 3);\n  const t = Math.floor(p.clock) % 86400;\n  p.target[0] = Math.floor(t / 3600);\n  p.target[1] = Math.floor(t / 60) % 60;\n  p.target[2] = t % 60;\n  for (let u = 0; u \u003c 3; u++) {\n    if (p.prog[u] \u003c 1) p.prog[u] = Math.min(1, p.prog[u] + dt / p.dur[u]);\n    if (p.prog[u] >= 1 && p.shown[u] !== p.target[u]) {\n      // A wheel can only step to its next card, so a clock run fast spins\n      // its flaps to catch up the way a real one does.\n      const n = SIZE[u];\n      p.prev[u] = p.shown[u];\n      p.shown[u] = (p.shown[u] + 1) % n;\n      const behind = (p.target[u] - p.prev[u] + n) % n;\n      p.dur[u] = 0.34 / Math.min(5, behind);\n      p.prog[u] = 0;\n    }\n  }\n}\n\nfunction setRect(r, u, x, y, w, h) {\n  r[u * 4] = x;\n  r[u * 4 + 1] = y;\n  r[u * 4 + 2] = w;\n  r[u * 4 + 3] = h;\n}\n\nfunction layout(p) {\n  const r = p.rect;\n  if (p.secs \u003c= 0.12) {\n    // Hours and minutes, one big card each.\n    setRect(r, 0, 3, 5, 58, 55);\n    setRect(r, 1, 3, 68, 58, 55);\n    return 2;\n  }\n  // The seconds card grows from small to the size of the other two.\n  const u = Math.min(1, (p.secs - 0.12) / 0.88);\n  const hs = 2 * Math.round(12 + 6 * u) + 1;\n  let ch = Math.floor((128 - hs - 12) / 2);\n  if (ch % 2 === 0) ch--;\n  const top = Math.floor((128 - 2 * ch - hs - 8) / 2);\n  const sw = Math.min(58, 2 * Math.round(hs * 0.8));\n  setRect(r, 0, 3, top, 58, ch);\n  setRect(r, 1, 3, top + ch + 4, 58, ch);\n  setRect(r, 2, (64 - sw) / 2, top + 2 * ch + 8, sw, hs);\n  return 3;\n}\n\nfunction drawCard(display, p, u) {\n  const x0 = p.rect[u * 4];\n  const y0 = p.rect[u * 4 + 1];\n  const cw = p.rect[u * 4 + 2];\n  const ch = p.rect[u * 4 + 3];\n  const L = p.light;\n  const m = p.masks[u === 2 ? 1 : 0];\n  const dh = Math.min(MAX_DH, Math.round(ch * 0.72));\n  if (m.dh !== dh) bake(p, m, dh);\n  const dw = m.dw;\n  const gap = Math.max(2, Math.round(cw * 0.08));\n  const lx = Math.round(cw / 2 - gap / 2 - dw);\n  const rx = Math.round(cw / 2 + gap / 2);\n  const oy = Math.round((ch - dh) / 2);\n  const value = p.shown[u];\n  const old = p.prev[u];\n  const prog = p.prog[u];\n  const flipping = prog \u003c 1;\n\n  const hh = (ch - 1) / 2;\n  const hinge = hh + 0.5;\n  const theta = prog * Math.PI;\n  const cos = Math.cos(theta);\n  const sin = Math.sin(theta);\n  const reach = hh * Math.abs(cos);\n  const first = flipping && prog \u003c 0.5;\n  const second = flipping && prog >= 0.5;\n  const mid = cw / 2;\n  const card = p.card;\n  const face = p.face;\n\n  for (let y = 0; y \u003c ch; y++) {\n    const ry = y + 0.5;\n    const upper = ry \u003c hh;\n    const lower = ry > hh + 1;\n    if (!upper && !lower) continue;\n    // Which surface is seen on this row, where on its card it comes from, and how it is lit.\n    let sy = ry;\n    let shown = value;\n    let shade = 1;\n    let flap = false;\n    let f = 0;\n    if (first && upper && hinge - ry \u003c= reach) {\n      f = (hinge - ry) / reach;\n      sy = hinge - f * hh;\n      shown = old;\n      shade = 1 - 0.8 * L * sin;\n      flap = true;\n    } else if (second && lower && ry - hinge \u003c= reach) {\n      f = (ry - hinge) / reach;\n      sy = hinge + f * hh;\n      shade = 1 - 0.8 * L * sin;\n      flap = true;\n    } else if (lower && flipping) {\n      // The old bottom half stays until the flap lands on it, in its shadow.\n      shown = old;\n      if (second) {\n        const below = ry - hinge - reach;\n        if (below \u003c 7) shade *= 1 - 0.6 * L * (1 - below / 7) * (1 - 0.6 * Math.abs(cos));\n      }\n    }\n    const ty = Math.floor(sy);\n    const roundTop = ty === 0 || ty === hh + 1;\n    const roundBottom = ty === ch - 1 || ty === hh - 1;\n    // Light from above: each card darkens toward its foot, the top edge\n    // catches the light and the row under the split sits in shadow.\n    shade *= 1 + L * (0.1 - 0.45 * (sy / ch));\n    if (ty === 0) shade *= 1 + 0.5 * L;\n    else if (ty === hh + 1) shade *= 1 - 0.5 * L;\n    const tens = Math.floor(shown / 10);\n    const ones = shown % 10;\n    // The falling flap's free edge swings toward you, so it looks a little wider.\n    const widen = flap ? 1 + 0.12 * sin * f : 1;\n    const pad = flap ? 2 : 0;\n    for (let x = -pad; x \u003c cw + pad; x++) {\n      const sx = mid + (x + 0.5 - mid) / widen;\n      if (sx \u003c 0 || sx >= cw) continue;\n      const tx = Math.floor(sx);\n      // Each half card has its corners cut.\n      if ((tx === 0 || tx === cw - 1) && (roundTop || roundBottom)) continue;\n      const a = sx \u003c mid ? sample(m, tens, sx - lx, sy - oy) : sample(m, ones, sx - rx, sy - oy);\n      const r = (card[0] + (face[0] - card[0]) * a) * shade;\n      const g = (card[1] + (face[1] - card[1]) * a) * shade;\n      const b = (card[2] + (face[2] - card[2]) * a) * shade;\n      display.setPixel(x0 + x, y0 + y, r, g, b);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  hsv(p.hue, 0.3, 0.19, p.card);\n  hsv(p.hue, 0.4, 1, p.face);\n  const cards = layout(p);\n  for (let u = 0; u \u003c cards; u++) drawCard(display, p, u);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Colour=0..1, Rate=0..3, Seconds=0..1, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Colour","min":0,"max":1,"about":"The colour of the digits; the dark cards take a little of it."},{"name":"Rate","min":0,"max":3,"about":"From real time at 0 to a minute every second at 3, a minute every four seconds where it starts."},{"name":"Seconds","min":0,"max":1,"about":"Turn it up and a seconds card joins below, growing until all three are one size."},{"name":"Light","min":0,"max":1,"about":"How hard the light falls on the cards, from flat to a deep shadow under each falling flap."}],"start":[0,2,0,0.06],"measures":{"motion":0.0975,"detail":0.0443,"edges":0.7774,"complexity":0.213,"coverage":0.7633,"colour":0.1458,"drift":0.128},"knobResponse":[0.0983,0.1045,0.1894,0.032]},{"slug":"flipdot","title":"Flipdot","family":"type","round":22,"note":"버스 앞에 다는 형광 노랑 플립 디스크 행선판을 세워 놓았어요. 위 칸에 노선 번호, 아래 칸에 행선지가 7줄 점 글꼴로 서고, 쪽이 바뀔 때마다 디스크가 한 줄씩 넘어가며 판 전체를 노랗게 뒤집었다가 반전된 경유지 쪽을 써요. 넘어가는 동안의 디스크는 가는 모서리로 보여요.","idea":"A bus destination sign of fluorescent flip discs stands on end, the route number in its own box above the destination, and between pages a wave of discs flips the whole board yellow and back, each disc showing a thin edge as it turns.","buttons":"K1 tap ends the page now and the next wave starts.","code":"// ===== Patternflow pattern =====\n// Title:   Flipdot\n// Family:  type\n// Idea:    A bus destination sign of fluorescent flip discs stands on end, the route number in its own box above the destination, and between pages a wave of discs flips the whole board yellow and back, each disc showing a thin edge as it turns.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the electromagnetic flip-disc destination signs on buses and trams from the 1970s on\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Disc=0..1, Speed=0.2..3, Route=0..3, Wipe=0..3\n//\n// Knob 1: Disc. The colour painted on the bright side of the discs: fluorescent yellow at 0, then lime green, white, amber and red at 1.\n// Knob 2: Speed. How fast the sign runs its pages and its waves: at 2 the destination holds three seconds, the stops a little over two, and a wave crosses the board in under a second.\n// Knob 3: Route. Which bus the sign is set for, each with its own number, destination and stops: the 17 to Pier Head, the 7 to Dock Yard, the N9 night bus and the X3 express to Sea Wall.\n// Knob 4: Wipe. How the controller drives the discs between pages: column by column at 0, a diagonal at 1, a scatter of single discs at 2, row by row at 3.\n// Buttons: K1 tap ends the page now and the next wave starts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The board: 20 discs across and 40 down on a 3 LED pitch, each disc 2 by 2\n// LEDs with one dark LED between. The top box holds 16 rows for the route\n// number; a housing bar; then 24 rows for the destination.\nconst COLS = 20;\nconst R1 = 16;\nconst R2 = 24;\nconst ROWS = R1 + R2;\nconst ND = COLS * ROWS;\nconst discX = (c) => 3 + 3 * c;\nconst discY = (r) => (r \u003c R1 ? 2 + 3 * r : 55 + 3 * (r - R1));\n\n// One disc's turn, in sign seconds. The first quarter shows the old face, the\n// second a thin edge of it on the top row, the third a thin edge of the new\n// face on the bottom row, the last the new face.\nconst FD = 0.14;\nconst FIRST = 2.15;\nconst HOLD = 3.0;\nconst HOLD_INV = 2.2;\nconst WAVE = [0.8, 1.05, 0.9, 1.0];\n\n// A condensed 7 row dot face. Each glyph is its rows left to right, top to\n// bottom; the width is the length over 7. Most letters are 4 discs wide, the\n// I and the 1 are 3, M T V W X Y are 5.\nconst FONT = {\n  A: \".##.#..##..######..##..##..#\", B: \"###.#..##..####.#..##..####.\", C: \".##.#..##...#...#...#..#.##.\",\n  D: \"###.#..##..##..##..##..####.\", E: \"#####...#...###.#...#...####\", F: \"#####...#...###.#...#...#...\",\n  G: \".##.#..##...#.###..##..#.###\", H: \"#..##..##..######..##..##..#\", I: \"###.#..#..#..#..#.###\",\n  J: \"...#...#...#...##..##..#.##.\", K: \"#..##..##.#.##..#.#.#..##..#\", L: \"#...#...#...#...#...#...####\",\n  M: \"#...###.###.#.##.#.##...##...##...#\", N: \"#..###.###.##.###.###..##..#\", O: \".##.#..##..##..##..##..#.##.\",\n  P: \"###.#..##..####.#...#...#...\", R: \"###.#..##..####.#.#.#..##..#\", S: \".##.#..##....##....##..#.##.\",\n  T: \"#####..#....#....#....#....#....#..\", U: \"#..##..##..##..##..##..#.##.\", V: \"#...##...##...#.#.#..#.#..#.#...#..\",\n  W: \"#...##...##...##.#.##.#.###.###...#\", X: \"#...##...#.#.#...#...#.#.#...##...#\", Y: \"#...##...#.#.#...#....#....#....#..\",\n  Z: \"####...#..#...#..#..#...####\",\n  0: \".##.#..##.###..###.##..#.##.\", 1: \".#.##..#..#..#..#.###\", 2: \".##.#..#...#..#..#..#...####\",\n  3: \".##.#..#...#.##....##..#.##.\", 4: \"..#..##.#.#.#.#.####..#...#.\", 5: \"#####...###....#...##..#.##.\",\n  6: \".##.#...#...###.#..##..#.##.\", 7: \"####...#..#...#..#...#...#..\", 8: \".##.#..##..#.##.#..##..#.##.\",\n  9: \".##.#..##..#.###...#...#.##.\", \"-\": \".........###.........\", \":\": \"..#..#.\", \".\": \"......#\",\n};\n\n// Each route runs four pages: the destination, a page of stops shown\n// inverse, the destination again, and a second inverse page.\nconst ROUTES = [\n  { no: \"17\", pages: [[\"PIER\", \"HEAD\"], [\"VIA\", \"OLD\", \"MILL\"], [\"PIER\", \"HEAD\"], [\"VIA\", \"FISH\", \"DOCK\"]] },\n  { no: \"7\", pages: [[\"DOCK\", \"YARD\"], [\"VIA\", \"FAIR\", \"LANE\"], [\"DOCK\", \"YARD\"], [\"VIA\", \"ROPE\", \"WALK\"]] },\n  { no: \"N9\", pages: [[\"ZOO\", \"GATE\"], [\"LAST\", \"BUS\", \"0115\"], [\"ZOO\", \"GATE\"], [\"VIA\", \"ELM\", \"PARK\"]] },\n  { no: \"X3\", pages: [[\"SEA\", \"WALL\"], [\"VIA\", \"HIGH\", \"ST\"], [\"SEA\", \"WALL\"], [\"VIA\", \"LIDO\"]] },\n];\n\n// Disc paint, from the yellow most of these signs carried to the red a few did.\nconst PAINT = [\n  [255, 226, 20],\n  [110, 255, 40],\n  [236, 240, 226],\n  [255, 150, 12],\n  [255, 58, 34],\n];\nconst BLACK = [13, 13, 12];\nconst GAP = [3, 3, 4];\n\nconst textWidth = (s, k) => {\n  let w = 0;\n  for (const ch of s) w += (ch === \" \" ? 2 : FONT[ch].length / 7) * k + k;\n  return max(0, w - k);\n};\n\n// Sets the discs of one line of text, k times size, its top left at disc\n// (c0, r0).\nfunction stamp(bits, s, c0, r0, k) {\n  let c = c0;\n  for (const ch of s) {\n    if (ch === \" \") {\n      c += 3 * k;\n      continue;\n    }\n    const g = FONT[ch];\n    const gw = g.length / 7;\n    for (let y = 0; y \u003c 7; y++)\n      for (let x = 0; x \u003c gw; x++) {\n        if (g[y * gw + x] !== \"#\") continue;\n        for (let a = 0; a \u003c k; a++)\n          for (let b = 0; b \u003c k; b++) {\n            const cc = c + x * k + b;\n            const rr = r0 + y * k + a;\n            if (cc >= 0 && cc \u003c COLS && rr >= 0 && rr \u003c ROWS) bits[rr * COLS + cc] = 1;\n          }\n      }\n    c += (gw + 1) * k;\n  }\n}\n\n// A page as the discs it wants yellow. Odd pages are inverse: yellow ground,\n// black letters, the route box with them.\nfunction pageBits(route, n) {\n  const R = ROUTES[route];\n  const lines = R.pages[n % R.pages.length];\n  const bits = new Uint8Array(ND);\n  stamp(bits, R.no, floor((COLS - textWidth(R.no, 2)) / 2), 1, 2);\n  const h = lines.length * 8 - 1;\n  const top = R1 + floor((R2 - h) / 2);\n  lines.forEach((s, j) => stamp(bits, s, floor((COLS - textWidth(s, 1) + 1) / 2), top + j * 8, 1));\n  if (n & 1) for (let i = 0; i \u003c ND; i++) bits[i] ^= 1;\n  return bits;\n}\n\nconst ALL = [new Uint8Array(ND), new Uint8Array(ND).fill(1)];\n\nfunction palette(P, u) {\n  P.hue = u;\n  const t = u * 4;\n  const j = min(3, floor(t));\n  const f = t - j;\n  for (let c = 0; c \u003c 3; c++) P.col[c] = PAINT[j][c] + (PAINT[j + 1][c] - PAINT[j][c]) * f;\n}\n\n// The housing: a grey bezel round the edge, the dark backplate the discs sit\n// on, and the bar between the two boxes with its four screws.\nfunction housing(P) {\n  const b = P.base;\n  for (let p = 0; p \u003c N; p++) [b[p * 3], b[p * 3 + 1], b[p * 3 + 2]] = GAP;\n  const put = (x, y, v, t) => {\n    const o = (y * W + x) * 3;\n    b[o] = v;\n    b[o + 1] = v;\n    b[o + 2] = v + t;\n  };\n  for (let x = 0; x \u003c W; x++) {\n    put(x, 0, 40, 4);\n    put(x, H - 1, 34, 4);\n    put(x, 50, 40, 4);\n    for (let y = 51; y \u003c 53; y++) put(x, y, 26, 3);\n    put(x, 53, 32, 3);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    put(0, y, 38, 4);\n    put(W - 1, y, 34, 4);\n  }\n  for (const sx of [5, 57]) for (let y = 51; y \u003c 53; y++) for (let x = sx; x \u003c sx + 2; x++) put(x, y, x === sx && y === 51 ? 86 : 58, 2);\n}\n\nfunction init(P, route) {\n  P.route = route;\n  P.base = new Float32Array(N * 3);\n  P.out = new Float32Array(N * 3);\n  P.col = [0, 0, 0];\n  P.fa = new Uint8Array(ND);\n  P.fb = new Uint8Array(ND);\n  P.ts = new Float32Array(ND).fill(-9);\n  // How bright each disc's paint still is, and how much light falls on its\n  // row from the strip under the top of each box.\n  P.lit = new Float32Array(ND);\n  P.dim = new Float32Array(ND);\n  P.q = new Int32Array(ND);\n  for (let i = 0; i \u003c ND; i++) {\n    const r = floor(i / COLS);\n    const c = i % COLS;\n    const shade = r \u003c R1 ? 1 - 0.04 * (r / (R1 - 1)) : 1 - 0.06 * ((r - R1) / (R2 - 1));\n    P.lit[i] = (0.96 + 0.04 * rnd()) * shade;\n    P.dim[i] = 0.85 + 0.3 * rnd();\n    P.q[i] = discY(r) * W + discX(c);\n  }\n  // One disc jammed on its edge, and a few loose ones that flutter as the bus\n  // idles.\n  P.stuck = (R1 + 2 + floor(rnd() * (R2 - 4))) * COLS + 1 + floor(rnd() * (COLS - 2));\n  P.loose = [0, 1, 2, 3].map(() => floor(rnd() * ND));\n  P.fli = -1;\n  P.flt = 0;\n  housing(P);\n  P.st = 0;\n  P.pg = 0;\n  const bits = pageBits(route, 0);\n  P.fa.set(bits);\n  P.fb.set(bits);\n  P.k = 0;\n  P.kt = 0;\n  P.kd = FIRST;\n}\n\nconst face = (P, i) => (P.st >= P.ts[i] ? P.fb[i] : P.fa[i]);\n\n// Starts a wave towards the target at sign time t0. Discs already showing\n// the right face do not move; two random ones in each wave are sticky and\n// turn late.\nfunction wave(P, target, t0, dir) {\n  const mode = P.mode;\n  const wd = WAVE[mode];\n  const sticky = [floor(rnd() * ND), floor(rnd() * ND)];\n  P.fli = -1;\n  for (let i = 0; i \u003c ND; i++) {\n    const cur = face(P, i);\n    const tgt = target[i];\n    P.fa[i] = cur;\n    P.fb[i] = tgt;\n    if (cur === tgt) {\n      P.ts[i] = -9;\n      continue;\n    }\n    const r = floor(i / COLS);\n    const c = dir > 0 ? i % COLS : COLS - 1 - (i % COLS);\n    const rr = dir > 0 ? r : ROWS - 1 - r;\n    let u;\n    if (mode === 0) u = c / (COLS - 1) + r * 0.0012;\n    else if (mode === 1) u = (c + rr) / (COLS + ROWS - 2);\n    else if (mode === 2) u = rnd();\n    else u = rr / (ROWS - 1) + c * 0.0015;\n    P.ts[i] = t0 + u * wd + (i === sticky[0] || i === sticky[1] ? 0.12 + 0.15 * rnd() : 0);\n  }\n  return wd + FD + 0.03;\n}\n\n// The sign's cycle: page, fill to yellow, hold, inverse page, clear to\n// black, hold, next page.\nfunction enter(P, k, t0) {\n  P.k = k;\n  P.kt = t0;\n  if (k === 0) P.kd = HOLD;\n  else if (k === 1) P.kd = wave(P, ALL[1], t0, 1);\n  else if (k === 2) P.kd = 0.4;\n  else if (k === 3) P.kd = wave(P, pageBits(P.route, ++P.pg), t0, 1);\n  else if (k === 4) P.kd = HOLD_INV;\n  else if (k === 5) P.kd = wave(P, ALL[0], t0, -1);\n  else if (k === 6) P.kd = 0.25;\n  else P.kd = wave(P, pageBits(P.route, ++P.pg), t0, -1);\n}\n\nexport function setup(params) {\n  params.base = null;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  const hue = cl(k[0], 0, 1);\n  const sp = cl(k[1], 0.2, 3) / 2;\n  const route = cl(round(k[2]), 0, 3);\n  P.mode = cl(round(k[3]), 0, 3);\n  if (!P.base) init(P, route);\n  else if (route !== P.route) {\n    P.route = route;\n    P.pg = -1;\n    enter(P, 7, P.st);\n  }\n  if (hue !== P.hue) palette(P, hue);\n  P.st += dt * sp;\n  const hold = P.k % 2 === 0;\n  if (input.btnPressed && input.btnPressed[0] && hold) P.kd = P.st - P.kt;\n  while (P.st - P.kt >= P.kd) enter(P, (P.k + 1) % 8, P.kt + P.kd);\n  if (P.fli >= 0 && P.st - P.flt > 3 * FD) P.fli = -1;\n  if (P.k % 2 === 0 && P.fli \u003c 0 && rnd() \u003c dt * sp * 1.1) {\n    P.fli = P.loose[floor(rnd() * P.loose.length)];\n    P.flt = P.st;\n  }\n}\n\n// Paints one disc part way through a turn from face a to face b.\nfunction paint(P, i, a, b, p) {\n  const o = P.out;\n  const q = P.q[i];\n  let f = p \u003c 0.5 ? a : b;\n  let rows = 3;\n  let s = 1;\n  if (p >= 0.25 && p \u003c 0.5) [rows, s] = [1, 0.6];\n  else if (p >= 0.5 && p \u003c 0.75) [rows, s] = [2, 0.6];\n  if (i === P.stuck) [f, rows, s] = [1, 1, 0.5];\n  const c = P.col;\n  const L = P.lit[i] * s;\n  const D = P.dim[i] * s;\n  const cr = f ? c[0] * L : BLACK[0] * D;\n  const cg = f ? c[1] * L : BLACK[1] * D;\n  const cb = f ? c[2] * L : BLACK[2] * D;\n  for (let y = 0; y \u003c 2; y++) {\n    if (!(rows & (1 \u003c\u003c y))) continue;\n    for (let x = 0; x \u003c 2; x++) {\n      const j = (q + y * W + x) * 3;\n      // The face is not quite flat: its top left catches a little more of\n      // the light than its bottom right.\n      const g = 1.03 - 0.03 * (x + y);\n      o[j] = cr * g;\n      o[j + 1] = cg * g;\n      o[j + 2] = cb * g;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.base) return;\n  const o = P.out;\n  o.set(P.base);\n  const st = P.st;\n  for (let i = 0; i \u003c ND; i++) {\n    const a = P.fa[i];\n    const b = P.fb[i];\n    let p = a === b ? 1 : (st - P.ts[i]) / FD;\n    if (i === P.fli) {\n      const e = (st - P.flt) / FD;\n      const cur = face(P, i);\n      if (e \u003c 1) paint(P, i, cur, 1 - cur, e);\n      else if (e \u003c 2) paint(P, i, 1 - cur, 1 - cur, 1);\n      else paint(P, i, 1 - cur, cur, e - 2);\n      continue;\n    }\n    paint(P, i, a, b, p \u003c 0 ? 0 : p > 1 ? 1 : p);\n  }\n  for (let y = 0, j = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, j += 3) display.setPixel(x, y, min(255, o[j]) | 0, min(255, o[j + 1]) | 0, min(255, o[j + 2]) | 0);\n}\n","layer":{"id":"layer-flipdot","type":"code","name":"flipdot","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flipdot\n// Family:  type\n// Idea:    A bus destination sign of fluorescent flip discs stands on end, the route number in its own box above the destination, and between pages a wave of discs flips the whole board yellow and back, each disc showing a thin edge as it turns.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the electromagnetic flip-disc destination signs on buses and trams from the 1970s on\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Disc=0..1, Speed=0.2..3, Route=0..3, Wipe=0..3\n//\n// Knob 1: Disc. The colour painted on the bright side of the discs: fluorescent yellow at 0, then lime green, white, amber and red at 1.\n// Knob 2: Speed. How fast the sign runs its pages and its waves: at 2 the destination holds three seconds, the stops a little over two, and a wave crosses the board in under a second.\n// Knob 3: Route. Which bus the sign is set for, each with its own number, destination and stops: the 17 to Pier Head, the 7 to Dock Yard, the N9 night bus and the X3 express to Sea Wall.\n// Knob 4: Wipe. How the controller drives the discs between pages: column by column at 0, a diagonal at 1, a scatter of single discs at 2, row by row at 3.\n// Buttons: K1 tap ends the page now and the next wave starts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\n// The board: 20 discs across and 40 down on a 3 LED pitch, each disc 2 by 2\n// LEDs with one dark LED between. The top box holds 16 rows for the route\n// number; a housing bar; then 24 rows for the destination.\nconst COLS = 20;\nconst R1 = 16;\nconst R2 = 24;\nconst ROWS = R1 + R2;\nconst ND = COLS * ROWS;\nconst discX = (c) => 3 + 3 * c;\nconst discY = (r) => (r \u003c R1 ? 2 + 3 * r : 55 + 3 * (r - R1));\n\n// One disc's turn, in sign seconds. The first quarter shows the old face, the\n// second a thin edge of it on the top row, the third a thin edge of the new\n// face on the bottom row, the last the new face.\nconst FD = 0.14;\nconst FIRST = 2.15;\nconst HOLD = 3.0;\nconst HOLD_INV = 2.2;\nconst WAVE = [0.8, 1.05, 0.9, 1.0];\n\n// A condensed 7 row dot face. Each glyph is its rows left to right, top to\n// bottom; the width is the length over 7. Most letters are 4 discs wide, the\n// I and the 1 are 3, M T V W X Y are 5.\nconst FONT = {\n  A: \".##.#..##..######..##..##..#\", B: \"###.#..##..####.#..##..####.\", C: \".##.#..##...#...#...#..#.##.\",\n  D: \"###.#..##..##..##..##..####.\", E: \"#####...#...###.#...#...####\", F: \"#####...#...###.#...#...#...\",\n  G: \".##.#..##...#.###..##..#.###\", H: \"#..##..##..######..##..##..#\", I: \"###.#..#..#..#..#.###\",\n  J: \"...#...#...#...##..##..#.##.\", K: \"#..##..##.#.##..#.#.#..##..#\", L: \"#...#...#...#...#...#...####\",\n  M: \"#...###.###.#.##.#.##...##...##...#\", N: \"#..###.###.##.###.###..##..#\", O: \".##.#..##..##..##..##..#.##.\",\n  P: \"###.#..##..####.#...#...#...\", R: \"###.#..##..####.#.#.#..##..#\", S: \".##.#..##....##....##..#.##.\",\n  T: \"#####..#....#....#....#....#....#..\", U: \"#..##..##..##..##..##..#.##.\", V: \"#...##...##...#.#.#..#.#..#.#...#..\",\n  W: \"#...##...##...##.#.##.#.###.###...#\", X: \"#...##...#.#.#...#...#.#.#...##...#\", Y: \"#...##...#.#.#...#....#....#....#..\",\n  Z: \"####...#..#...#..#..#...####\",\n  0: \".##.#..##.###..###.##..#.##.\", 1: \".#.##..#..#..#..#.###\", 2: \".##.#..#...#..#..#..#...####\",\n  3: \".##.#..#...#.##....##..#.##.\", 4: \"..#..##.#.#.#.#.####..#...#.\", 5: \"#####...###....#...##..#.##.\",\n  6: \".##.#...#...###.#..##..#.##.\", 7: \"####...#..#...#..#...#...#..\", 8: \".##.#..##..#.##.#..##..#.##.\",\n  9: \".##.#..##..#.###...#...#.##.\", \"-\": \".........###.........\", \":\": \"..#..#.\", \".\": \"......#\",\n};\n\n// Each route runs four pages: the destination, a page of stops shown\n// inverse, the destination again, and a second inverse page.\nconst ROUTES = [\n  { no: \"17\", pages: [[\"PIER\", \"HEAD\"], [\"VIA\", \"OLD\", \"MILL\"], [\"PIER\", \"HEAD\"], [\"VIA\", \"FISH\", \"DOCK\"]] },\n  { no: \"7\", pages: [[\"DOCK\", \"YARD\"], [\"VIA\", \"FAIR\", \"LANE\"], [\"DOCK\", \"YARD\"], [\"VIA\", \"ROPE\", \"WALK\"]] },\n  { no: \"N9\", pages: [[\"ZOO\", \"GATE\"], [\"LAST\", \"BUS\", \"0115\"], [\"ZOO\", \"GATE\"], [\"VIA\", \"ELM\", \"PARK\"]] },\n  { no: \"X3\", pages: [[\"SEA\", \"WALL\"], [\"VIA\", \"HIGH\", \"ST\"], [\"SEA\", \"WALL\"], [\"VIA\", \"LIDO\"]] },\n];\n\n// Disc paint, from the yellow most of these signs carried to the red a few did.\nconst PAINT = [\n  [255, 226, 20],\n  [110, 255, 40],\n  [236, 240, 226],\n  [255, 150, 12],\n  [255, 58, 34],\n];\nconst BLACK = [13, 13, 12];\nconst GAP = [3, 3, 4];\n\nconst textWidth = (s, k) => {\n  let w = 0;\n  for (const ch of s) w += (ch === \" \" ? 2 : FONT[ch].length / 7) * k + k;\n  return max(0, w - k);\n};\n\n// Sets the discs of one line of text, k times size, its top left at disc\n// (c0, r0).\nfunction stamp(bits, s, c0, r0, k) {\n  let c = c0;\n  for (const ch of s) {\n    if (ch === \" \") {\n      c += 3 * k;\n      continue;\n    }\n    const g = FONT[ch];\n    const gw = g.length / 7;\n    for (let y = 0; y \u003c 7; y++)\n      for (let x = 0; x \u003c gw; x++) {\n        if (g[y * gw + x] !== \"#\") continue;\n        for (let a = 0; a \u003c k; a++)\n          for (let b = 0; b \u003c k; b++) {\n            const cc = c + x * k + b;\n            const rr = r0 + y * k + a;\n            if (cc >= 0 && cc \u003c COLS && rr >= 0 && rr \u003c ROWS) bits[rr * COLS + cc] = 1;\n          }\n      }\n    c += (gw + 1) * k;\n  }\n}\n\n// A page as the discs it wants yellow. Odd pages are inverse: yellow ground,\n// black letters, the route box with them.\nfunction pageBits(route, n) {\n  const R = ROUTES[route];\n  const lines = R.pages[n % R.pages.length];\n  const bits = new Uint8Array(ND);\n  stamp(bits, R.no, floor((COLS - textWidth(R.no, 2)) / 2), 1, 2);\n  const h = lines.length * 8 - 1;\n  const top = R1 + floor((R2 - h) / 2);\n  lines.forEach((s, j) => stamp(bits, s, floor((COLS - textWidth(s, 1) + 1) / 2), top + j * 8, 1));\n  if (n & 1) for (let i = 0; i \u003c ND; i++) bits[i] ^= 1;\n  return bits;\n}\n\nconst ALL = [new Uint8Array(ND), new Uint8Array(ND).fill(1)];\n\nfunction palette(P, u) {\n  P.hue = u;\n  const t = u * 4;\n  const j = min(3, floor(t));\n  const f = t - j;\n  for (let c = 0; c \u003c 3; c++) P.col[c] = PAINT[j][c] + (PAINT[j + 1][c] - PAINT[j][c]) * f;\n}\n\n// The housing: a grey bezel round the edge, the dark backplate the discs sit\n// on, and the bar between the two boxes with its four screws.\nfunction housing(P) {\n  const b = P.base;\n  for (let p = 0; p \u003c N; p++) [b[p * 3], b[p * 3 + 1], b[p * 3 + 2]] = GAP;\n  const put = (x, y, v, t) => {\n    const o = (y * W + x) * 3;\n    b[o] = v;\n    b[o + 1] = v;\n    b[o + 2] = v + t;\n  };\n  for (let x = 0; x \u003c W; x++) {\n    put(x, 0, 40, 4);\n    put(x, H - 1, 34, 4);\n    put(x, 50, 40, 4);\n    for (let y = 51; y \u003c 53; y++) put(x, y, 26, 3);\n    put(x, 53, 32, 3);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    put(0, y, 38, 4);\n    put(W - 1, y, 34, 4);\n  }\n  for (const sx of [5, 57]) for (let y = 51; y \u003c 53; y++) for (let x = sx; x \u003c sx + 2; x++) put(x, y, x === sx && y === 51 ? 86 : 58, 2);\n}\n\nfunction init(P, route) {\n  P.route = route;\n  P.base = new Float32Array(N * 3);\n  P.out = new Float32Array(N * 3);\n  P.col = [0, 0, 0];\n  P.fa = new Uint8Array(ND);\n  P.fb = new Uint8Array(ND);\n  P.ts = new Float32Array(ND).fill(-9);\n  // How bright each disc's paint still is, and how much light falls on its\n  // row from the strip under the top of each box.\n  P.lit = new Float32Array(ND);\n  P.dim = new Float32Array(ND);\n  P.q = new Int32Array(ND);\n  for (let i = 0; i \u003c ND; i++) {\n    const r = floor(i / COLS);\n    const c = i % COLS;\n    const shade = r \u003c R1 ? 1 - 0.04 * (r / (R1 - 1)) : 1 - 0.06 * ((r - R1) / (R2 - 1));\n    P.lit[i] = (0.96 + 0.04 * rnd()) * shade;\n    P.dim[i] = 0.85 + 0.3 * rnd();\n    P.q[i] = discY(r) * W + discX(c);\n  }\n  // One disc jammed on its edge, and a few loose ones that flutter as the bus\n  // idles.\n  P.stuck = (R1 + 2 + floor(rnd() * (R2 - 4))) * COLS + 1 + floor(rnd() * (COLS - 2));\n  P.loose = [0, 1, 2, 3].map(() => floor(rnd() * ND));\n  P.fli = -1;\n  P.flt = 0;\n  housing(P);\n  P.st = 0;\n  P.pg = 0;\n  const bits = pageBits(route, 0);\n  P.fa.set(bits);\n  P.fb.set(bits);\n  P.k = 0;\n  P.kt = 0;\n  P.kd = FIRST;\n}\n\nconst face = (P, i) => (P.st >= P.ts[i] ? P.fb[i] : P.fa[i]);\n\n// Starts a wave towards the target at sign time t0. Discs already showing\n// the right face do not move; two random ones in each wave are sticky and\n// turn late.\nfunction wave(P, target, t0, dir) {\n  const mode = P.mode;\n  const wd = WAVE[mode];\n  const sticky = [floor(rnd() * ND), floor(rnd() * ND)];\n  P.fli = -1;\n  for (let i = 0; i \u003c ND; i++) {\n    const cur = face(P, i);\n    const tgt = target[i];\n    P.fa[i] = cur;\n    P.fb[i] = tgt;\n    if (cur === tgt) {\n      P.ts[i] = -9;\n      continue;\n    }\n    const r = floor(i / COLS);\n    const c = dir > 0 ? i % COLS : COLS - 1 - (i % COLS);\n    const rr = dir > 0 ? r : ROWS - 1 - r;\n    let u;\n    if (mode === 0) u = c / (COLS - 1) + r * 0.0012;\n    else if (mode === 1) u = (c + rr) / (COLS + ROWS - 2);\n    else if (mode === 2) u = rnd();\n    else u = rr / (ROWS - 1) + c * 0.0015;\n    P.ts[i] = t0 + u * wd + (i === sticky[0] || i === sticky[1] ? 0.12 + 0.15 * rnd() : 0);\n  }\n  return wd + FD + 0.03;\n}\n\n// The sign's cycle: page, fill to yellow, hold, inverse page, clear to\n// black, hold, next page.\nfunction enter(P, k, t0) {\n  P.k = k;\n  P.kt = t0;\n  if (k === 0) P.kd = HOLD;\n  else if (k === 1) P.kd = wave(P, ALL[1], t0, 1);\n  else if (k === 2) P.kd = 0.4;\n  else if (k === 3) P.kd = wave(P, pageBits(P.route, ++P.pg), t0, 1);\n  else if (k === 4) P.kd = HOLD_INV;\n  else if (k === 5) P.kd = wave(P, ALL[0], t0, -1);\n  else if (k === 6) P.kd = 0.25;\n  else P.kd = wave(P, pageBits(P.route, ++P.pg), t0, -1);\n}\n\nexport function setup(params) {\n  params.base = null;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  const hue = cl(k[0], 0, 1);\n  const sp = cl(k[1], 0.2, 3) / 2;\n  const route = cl(round(k[2]), 0, 3);\n  P.mode = cl(round(k[3]), 0, 3);\n  if (!P.base) init(P, route);\n  else if (route !== P.route) {\n    P.route = route;\n    P.pg = -1;\n    enter(P, 7, P.st);\n  }\n  if (hue !== P.hue) palette(P, hue);\n  P.st += dt * sp;\n  const hold = P.k % 2 === 0;\n  if (input.btnPressed && input.btnPressed[0] && hold) P.kd = P.st - P.kt;\n  while (P.st - P.kt >= P.kd) enter(P, (P.k + 1) % 8, P.kt + P.kd);\n  if (P.fli >= 0 && P.st - P.flt > 3 * FD) P.fli = -1;\n  if (P.k % 2 === 0 && P.fli \u003c 0 && rnd() \u003c dt * sp * 1.1) {\n    P.fli = P.loose[floor(rnd() * P.loose.length)];\n    P.flt = P.st;\n  }\n}\n\n// Paints one disc part way through a turn from face a to face b.\nfunction paint(P, i, a, b, p) {\n  const o = P.out;\n  const q = P.q[i];\n  let f = p \u003c 0.5 ? a : b;\n  let rows = 3;\n  let s = 1;\n  if (p >= 0.25 && p \u003c 0.5) [rows, s] = [1, 0.6];\n  else if (p >= 0.5 && p \u003c 0.75) [rows, s] = [2, 0.6];\n  if (i === P.stuck) [f, rows, s] = [1, 1, 0.5];\n  const c = P.col;\n  const L = P.lit[i] * s;\n  const D = P.dim[i] * s;\n  const cr = f ? c[0] * L : BLACK[0] * D;\n  const cg = f ? c[1] * L : BLACK[1] * D;\n  const cb = f ? c[2] * L : BLACK[2] * D;\n  for (let y = 0; y \u003c 2; y++) {\n    if (!(rows & (1 \u003c\u003c y))) continue;\n    for (let x = 0; x \u003c 2; x++) {\n      const j = (q + y * W + x) * 3;\n      // The face is not quite flat: its top left catches a little more of\n      // the light than its bottom right.\n      const g = 1.03 - 0.03 * (x + y);\n      o[j] = cr * g;\n      o[j + 1] = cg * g;\n      o[j + 2] = cb * g;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.base) return;\n  const o = P.out;\n  o.set(P.base);\n  const st = P.st;\n  for (let i = 0; i \u003c ND; i++) {\n    const a = P.fa[i];\n    const b = P.fb[i];\n    let p = a === b ? 1 : (st - P.ts[i]) / FD;\n    if (i === P.fli) {\n      const e = (st - P.flt) / FD;\n      const cur = face(P, i);\n      if (e \u003c 1) paint(P, i, cur, 1 - cur, e);\n      else if (e \u003c 2) paint(P, i, 1 - cur, 1 - cur, 1);\n      else paint(P, i, 1 - cur, cur, e - 2);\n      continue;\n    }\n    paint(P, i, a, b, p \u003c 0 ? 0 : p > 1 ? 1 : p);\n  }\n  for (let y = 0, j = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, j += 3) display.setPixel(x, y, min(255, o[j]) | 0, min(255, o[j + 1]) | 0, min(255, o[j + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Disc=0..1, Speed=0.2..3, Route=0..3, Wipe=0..3","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Disc","min":0,"max":1,"about":"The colour painted on the bright side of the discs: fluorescent yellow at 0, then lime green, white, amber and red at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sign runs its pages and its waves: at 2 the destination holds three seconds, the stops a little over two, and a wave crosses the board in under a second."},{"name":"Route","min":0,"max":3,"about":"Which bus the sign is set for, each with its own number, destination and stops: the 17 to Pier Head, the 7 to Dock Yard, the N9 night bus and the X3 express to Sea Wall."},{"name":"Wipe","min":0,"max":3,"about":"How the controller drives the discs between pages: column by column at 0, a diagonal at 1, a scatter of single discs at 2, row by row at 3."}],"start":[0,2,0,0.06],"measures":{"motion":0.1111,"detail":0.2452,"edges":0.47,"complexity":0.3774,"coverage":0.3252,"colour":0.3924,"drift":0.2652},"knobResponse":[0.0968,0.1699,0.0516,0.048]},{"slug":"flock","title":"Flock","family":"particle","round":1,"note":"새 90마리가 가까운 이웃만 보고 날아요. 보이지 않는 매가 무리를 쫓아 자꾸 갈라놓아요.","idea":"Ninety birds each follow three rules about their nearest neighbours, and the shape the whole flock makes is one nobody is steering.","buttons":"K1 tap sends the unseen hawk diving into the flock.","code":"// ===== Patternflow pattern =====\n// Title:   Flock\n// Family:  particle\n// Idea:    Ninety birds each follow three rules about their nearest neighbours, and the shape the whole flock makes is one nobody is steering.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..4, Scatter=-1..1, Trail=0.3..2.5\n//\n// Knob 1: Hue. Turns the flock's colours around the wheel; birds flying up and down sit either side of it.\n// Knob 2: Speed. How fast the birds fly, and so how long their streaks are.\n// Knob 3: Scatter. Below 0 the birds pack into tight schools, above 0 they lose interest in each other and drift apart like gnats.\n// Knob 4: Trail. How long a streak lasts; long trails leave the flock's recent path woven across the panel.\n// Buttons: K1 tap sends the unseen hawk diving into the flock.\n\nconst W = 64;\nconst H = 128;\nconst N = 90;\nconst V0 = 16;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nfunction wrapX(x) {\n  return x \u003c 0 ? x + W : x >= W ? x - W : x;\n}\n\nfunction wrapY(y) {\n  return y \u003c 0 ? y + H : y >= H ? y - H : y;\n}\n\n// A soft round dot, brightest at its centre and wrapped round the edges,\n// kept as the brighter of what is there and what it brings.\nfunction splat(buf, x, y, c) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      const dx = xx - x;\n      const w = 1 - (dx * dx + dy * dy) / 1.44;\n      if (w \u003c= 0) continue;\n      const i = (((yy + H) % H) * W + ((xx + W) % W)) * 3;\n      const r = c[0] * w;\n      const g = c[1] * w;\n      const b = c[2] * w;\n      if (r > buf[i]) buf[i] = r;\n      if (g > buf[i + 1]) buf[i + 1] = g;\n      if (b > buf[i + 2]) buf[i + 2] = b;\n    }\n  }\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(N);\n  params.y = new Float32Array(N);\n  params.vx = new Float32Array(N);\n  params.vy = new Float32Array(N);\n  params.lx = new Float32Array(N);\n  params.ly = new Float32Array(N);\n  params.wander = new Float32Array(N);\n  params.pace = new Float32Array(N);\n  params.tone = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) {\n    // Three loose groups heading different ways, so the first seconds already show them meeting.\n    const g = i % 3;\n    const a = g * 2.1 + (Math.random() - 0.5) * 0.8;\n    params.x[i] = (g * 21 + 6 + Math.random() * 18) % W;\n    params.y[i] = 14 + g * 38 + Math.random() * 26;\n    params.vx[i] = Math.cos(a) * V0;\n    params.vy[i] = Math.sin(a) * V0;\n    params.lx[i] = params.x[i];\n    params.ly[i] = params.y[i];\n    params.pace[i] = 0.85 + Math.random() * 0.3;\n    params.tone[i] = Math.random() - 0.5;\n  }\n  params.hx = W / 2;\n  params.hy = -20;\n  params.hvx = 0;\n  params.hvy = V0;\n  params.prey = 0;\n  params.preyTime = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.hue = 0;\n}\n\nfunction step(params, dt, u) {\n  const { x, y, vx, vy, wander, pace } = params;\n  const R = 13 - 6 * u;\n  const R2 = R * R;\n  const S = 3.5 + 3.5 * u;\n  const S2 = S * S;\n  const kA = 2.6 - 2.3 * u;\n  const kC = 1.1 - 1.1 * u;\n  const kS = 26 + 110 * u;\n  const kW = 0.5 + 3.5 * u;\n\n  // The hawk chases one bird for a few seconds, then picks another.\n  params.preyTime -= dt;\n  if (params.preyTime \u003c= 0) {\n    params.prey = Math.floor(Math.random() * N);\n    params.preyTime = 3 + Math.random() * 4;\n  }\n  let tx = x[params.prey] - params.hx;\n  let ty = y[params.prey] - params.hy;\n  if (tx > W / 2) tx -= W;\n  if (tx \u003c -W / 2) tx += W;\n  if (ty > H / 2) ty -= H;\n  if (ty \u003c -H / 2) ty += H;\n  const td = Math.hypot(tx, ty) + 0.001;\n  params.hvx += ((tx / td) * V0 * 1.15 - params.hvx) * Math.min(1, dt * 1.5);\n  params.hvy += ((ty / td) * V0 * 1.15 - params.hvy) * Math.min(1, dt * 1.5);\n  params.hx = wrapX(params.hx + params.hvx * dt);\n  params.hy = wrapY(params.hy + params.hvy * dt);\n  const hx = params.hx;\n  const hy = params.hy;\n\n  for (let i = 0; i \u003c N; i++) {\n    const xi = x[i];\n    const yi = y[i];\n    let n = 0;\n    let cx = 0;\n    let cy = 0;\n    let ax = 0;\n    let ay = 0;\n    let sx = 0;\n    let sy = 0;\n    for (let j = 0; j \u003c N; j++) {\n      if (j === i) continue;\n      let dx = x[j] - xi;\n      let dy = y[j] - yi;\n      if (dx > W / 2) dx -= W;\n      else if (dx \u003c -W / 2) dx += W;\n      if (dy > H / 2) dy -= H;\n      else if (dy \u003c -H / 2) dy += H;\n      const d2 = dx * dx + dy * dy;\n      if (d2 > R2) continue;\n      n++;\n      cx += dx;\n      cy += dy;\n      ax += vx[j];\n      ay += vy[j];\n      if (d2 \u003c S2) {\n        sx -= dx / (d2 + 0.4);\n        sy -= dy / (d2 + 0.4);\n      }\n    }\n    let fx = sx * kS;\n    let fy = sy * kS;\n    if (n > 0) {\n      fx += (ax / n - vx[i]) * kA + (cx / n) * kC;\n      fy += (ay / n - vy[i]) * kA + (cy / n) * kC;\n    }\n    let ex = xi - hx;\n    let ey = yi - hy;\n    if (ex > W / 2) ex -= W;\n    else if (ex \u003c -W / 2) ex += W;\n    if (ey > H / 2) ey -= H;\n    else if (ey \u003c -H / 2) ey += H;\n    const ed = Math.hypot(ex, ey) + 0.001;\n    if (ed \u003c 15) {\n      const push = (1 - ed / 15) * 90;\n      fx += (ex / ed) * push;\n      fy += (ey / ed) * push;\n    }\n    // Each bird's own wavering: a slow random turn left or right.\n    wander[i] = wander[i] * Math.exp(-dt * 1.5) + (Math.random() - 0.5) * Math.sqrt(dt) * 2.4;\n    const sp = Math.hypot(vx[i], vy[i]) + 0.001;\n    fx += (-vy[i] / sp) * wander[i] * V0 * kW;\n    fy += (vx[i] / sp) * wander[i] * V0 * kW;\n\n    let nvx = vx[i] + fx * dt;\n    let nvy = vy[i] + fy * dt;\n    const ns = Math.hypot(nvx, nvy) + 0.001;\n    const target = V0 * pace[i];\n    const s = ns + (target - ns) * Math.min(1, dt * 2.5);\n    nvx = (nvx / ns) * s;\n    nvy = (nvy / ns) * s;\n    vx[i] = nvx;\n    vy[i] = nvy;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    x[i] = wrapX(x[i] + vx[i] * dt);\n    y[i] = wrapY(y[i] + vy[i] * dt);\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.3];\n  params.hue = k[0];\n  const speed = k[1];\n  const u = (Math.max(-1, Math.min(1, k[2])) + 1) / 2;\n  // Slow birds keep a longer streak, so they still read as flying.\n  const trail = Math.max(0.05, k[3]) * Math.sqrt(2 / Math.max(0.1, speed));\n  dt = Math.min(dt, 0.1);\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Drop the hawk just behind a bird, already flying at it.\n    const b = Math.floor(Math.random() * N);\n    params.prey = b;\n    params.preyTime = 4;\n    params.hx = wrapX(params.x[b] - params.vx[b] * 0.5);\n    params.hy = wrapY(params.y[b] - params.vy[b] * 0.5);\n    params.hvx = params.vx[b] * 1.6;\n    params.hvy = params.vy[b] * 1.6;\n  }\n\n  // Speed is the simulation's own clock, so the flock keeps its shape and only hurries.\n  const simDt = dt * speed;\n  const steps = Math.max(1, Math.ceil(simDt / 0.035));\n  for (let i = 0; i \u003c N; i++) {\n    params.lx[i] = params.x[i];\n    params.ly[i] = params.y[i];\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, simDt / steps, u);\n\n  const buf = params.buf;\n  // Mostly a slow exponential fade, with a little taken off as well so old paths reach black.\n  const fade = Math.exp(-dt / trail);\n  const off = dt * 12;\n  for (let i = 0; i \u003c buf.length; i++) {\n    const v = buf[i] * fade - off;\n    buf[i] = v > 0 ? v : 0;\n  }\n\n  const col = params.col;\n  for (let i = 0; i \u003c N; i++) {\n    const vx = params.vx[i];\n    const vy = params.vy[i];\n    const sp = Math.hypot(vx, vy) + 0.001;\n    // Birds climbing and birds diving lean to either side of the chosen hue.\n    hsvInto(col, params.hue + (vy / sp) * 0.09 + params.tone[i] * 0.04, 0.88, 0.82);\n    const x0 = params.lx[i];\n    const y0 = params.ly[i];\n    const x1 = params.x[i];\n    const y1 = params.y[i];\n    const dx = x1 - x0;\n    const dy = y1 - y0;\n    if (Math.abs(dx) > W / 2 || Math.abs(dy) > H / 2) {\n      splat(buf, x1, y1, col);\n      continue;\n    }\n    const n = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.5));\n    for (let s = 1; s \u003c= n; s++) splat(buf, x0 + (dx * s) / n, y0 + (dy * s) / n, col);\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y * W + x) * 3;\n      display.setPixel(x, y, buf[i], buf[i + 1], buf[i + 2]);\n    }\n  }\n  // Heads: a paler, brighter LED where each bird is now.\n  const col = params.col;\n  for (let i = 0; i \u003c N; i++) {\n    const vy = params.vy[i];\n    const sp = Math.hypot(params.vx[i], vy) + 0.001;\n    hsvInto(col, params.hue + (vy / sp) * 0.09 + params.tone[i] * 0.04, 0.35, 1);\n    const px = Math.round(params.x[i]) % W;\n    const py = Math.round(params.y[i]) % H;\n    const j = (py * W + px) * 3;\n    display.setPixel(px, py, Math.max(buf[j], col[0]), Math.max(buf[j + 1], col[1]), Math.max(buf[j + 2], col[2]));\n  }\n}\n","layer":{"id":"layer-flock","type":"code","name":"flock","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flock\n// Family:  particle\n// Idea:    Ninety birds each follow three rules about their nearest neighbours, and the shape the whole flock makes is one nobody is steering.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..4, Scatter=-1..1, Trail=0.3..2.5\n//\n// Knob 1: Hue. Turns the flock's colours around the wheel; birds flying up and down sit either side of it.\n// Knob 2: Speed. How fast the birds fly, and so how long their streaks are.\n// Knob 3: Scatter. Below 0 the birds pack into tight schools, above 0 they lose interest in each other and drift apart like gnats.\n// Knob 4: Trail. How long a streak lasts; long trails leave the flock's recent path woven across the panel.\n// Buttons: K1 tap sends the unseen hawk diving into the flock.\n\nconst W = 64;\nconst H = 128;\nconst N = 90;\nconst V0 = 16;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nfunction wrapX(x) {\n  return x \u003c 0 ? x + W : x >= W ? x - W : x;\n}\n\nfunction wrapY(y) {\n  return y \u003c 0 ? y + H : y >= H ? y - H : y;\n}\n\n// A soft round dot, brightest at its centre and wrapped round the edges,\n// kept as the brighter of what is there and what it brings.\nfunction splat(buf, x, y, c) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      const dx = xx - x;\n      const w = 1 - (dx * dx + dy * dy) / 1.44;\n      if (w \u003c= 0) continue;\n      const i = (((yy + H) % H) * W + ((xx + W) % W)) * 3;\n      const r = c[0] * w;\n      const g = c[1] * w;\n      const b = c[2] * w;\n      if (r > buf[i]) buf[i] = r;\n      if (g > buf[i + 1]) buf[i + 1] = g;\n      if (b > buf[i + 2]) buf[i + 2] = b;\n    }\n  }\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(N);\n  params.y = new Float32Array(N);\n  params.vx = new Float32Array(N);\n  params.vy = new Float32Array(N);\n  params.lx = new Float32Array(N);\n  params.ly = new Float32Array(N);\n  params.wander = new Float32Array(N);\n  params.pace = new Float32Array(N);\n  params.tone = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) {\n    // Three loose groups heading different ways, so the first seconds already show them meeting.\n    const g = i % 3;\n    const a = g * 2.1 + (Math.random() - 0.5) * 0.8;\n    params.x[i] = (g * 21 + 6 + Math.random() * 18) % W;\n    params.y[i] = 14 + g * 38 + Math.random() * 26;\n    params.vx[i] = Math.cos(a) * V0;\n    params.vy[i] = Math.sin(a) * V0;\n    params.lx[i] = params.x[i];\n    params.ly[i] = params.y[i];\n    params.pace[i] = 0.85 + Math.random() * 0.3;\n    params.tone[i] = Math.random() - 0.5;\n  }\n  params.hx = W / 2;\n  params.hy = -20;\n  params.hvx = 0;\n  params.hvy = V0;\n  params.prey = 0;\n  params.preyTime = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.hue = 0;\n}\n\nfunction step(params, dt, u) {\n  const { x, y, vx, vy, wander, pace } = params;\n  const R = 13 - 6 * u;\n  const R2 = R * R;\n  const S = 3.5 + 3.5 * u;\n  const S2 = S * S;\n  const kA = 2.6 - 2.3 * u;\n  const kC = 1.1 - 1.1 * u;\n  const kS = 26 + 110 * u;\n  const kW = 0.5 + 3.5 * u;\n\n  // The hawk chases one bird for a few seconds, then picks another.\n  params.preyTime -= dt;\n  if (params.preyTime \u003c= 0) {\n    params.prey = Math.floor(Math.random() * N);\n    params.preyTime = 3 + Math.random() * 4;\n  }\n  let tx = x[params.prey] - params.hx;\n  let ty = y[params.prey] - params.hy;\n  if (tx > W / 2) tx -= W;\n  if (tx \u003c -W / 2) tx += W;\n  if (ty > H / 2) ty -= H;\n  if (ty \u003c -H / 2) ty += H;\n  const td = Math.hypot(tx, ty) + 0.001;\n  params.hvx += ((tx / td) * V0 * 1.15 - params.hvx) * Math.min(1, dt * 1.5);\n  params.hvy += ((ty / td) * V0 * 1.15 - params.hvy) * Math.min(1, dt * 1.5);\n  params.hx = wrapX(params.hx + params.hvx * dt);\n  params.hy = wrapY(params.hy + params.hvy * dt);\n  const hx = params.hx;\n  const hy = params.hy;\n\n  for (let i = 0; i \u003c N; i++) {\n    const xi = x[i];\n    const yi = y[i];\n    let n = 0;\n    let cx = 0;\n    let cy = 0;\n    let ax = 0;\n    let ay = 0;\n    let sx = 0;\n    let sy = 0;\n    for (let j = 0; j \u003c N; j++) {\n      if (j === i) continue;\n      let dx = x[j] - xi;\n      let dy = y[j] - yi;\n      if (dx > W / 2) dx -= W;\n      else if (dx \u003c -W / 2) dx += W;\n      if (dy > H / 2) dy -= H;\n      else if (dy \u003c -H / 2) dy += H;\n      const d2 = dx * dx + dy * dy;\n      if (d2 > R2) continue;\n      n++;\n      cx += dx;\n      cy += dy;\n      ax += vx[j];\n      ay += vy[j];\n      if (d2 \u003c S2) {\n        sx -= dx / (d2 + 0.4);\n        sy -= dy / (d2 + 0.4);\n      }\n    }\n    let fx = sx * kS;\n    let fy = sy * kS;\n    if (n > 0) {\n      fx += (ax / n - vx[i]) * kA + (cx / n) * kC;\n      fy += (ay / n - vy[i]) * kA + (cy / n) * kC;\n    }\n    let ex = xi - hx;\n    let ey = yi - hy;\n    if (ex > W / 2) ex -= W;\n    else if (ex \u003c -W / 2) ex += W;\n    if (ey > H / 2) ey -= H;\n    else if (ey \u003c -H / 2) ey += H;\n    const ed = Math.hypot(ex, ey) + 0.001;\n    if (ed \u003c 15) {\n      const push = (1 - ed / 15) * 90;\n      fx += (ex / ed) * push;\n      fy += (ey / ed) * push;\n    }\n    // Each bird's own wavering: a slow random turn left or right.\n    wander[i] = wander[i] * Math.exp(-dt * 1.5) + (Math.random() - 0.5) * Math.sqrt(dt) * 2.4;\n    const sp = Math.hypot(vx[i], vy[i]) + 0.001;\n    fx += (-vy[i] / sp) * wander[i] * V0 * kW;\n    fy += (vx[i] / sp) * wander[i] * V0 * kW;\n\n    let nvx = vx[i] + fx * dt;\n    let nvy = vy[i] + fy * dt;\n    const ns = Math.hypot(nvx, nvy) + 0.001;\n    const target = V0 * pace[i];\n    const s = ns + (target - ns) * Math.min(1, dt * 2.5);\n    nvx = (nvx / ns) * s;\n    nvy = (nvy / ns) * s;\n    vx[i] = nvx;\n    vy[i] = nvy;\n  }\n  for (let i = 0; i \u003c N; i++) {\n    x[i] = wrapX(x[i] + vx[i] * dt);\n    y[i] = wrapY(y[i] + vy[i] * dt);\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.3];\n  params.hue = k[0];\n  const speed = k[1];\n  const u = (Math.max(-1, Math.min(1, k[2])) + 1) / 2;\n  // Slow birds keep a longer streak, so they still read as flying.\n  const trail = Math.max(0.05, k[3]) * Math.sqrt(2 / Math.max(0.1, speed));\n  dt = Math.min(dt, 0.1);\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Drop the hawk just behind a bird, already flying at it.\n    const b = Math.floor(Math.random() * N);\n    params.prey = b;\n    params.preyTime = 4;\n    params.hx = wrapX(params.x[b] - params.vx[b] * 0.5);\n    params.hy = wrapY(params.y[b] - params.vy[b] * 0.5);\n    params.hvx = params.vx[b] * 1.6;\n    params.hvy = params.vy[b] * 1.6;\n  }\n\n  // Speed is the simulation's own clock, so the flock keeps its shape and only hurries.\n  const simDt = dt * speed;\n  const steps = Math.max(1, Math.ceil(simDt / 0.035));\n  for (let i = 0; i \u003c N; i++) {\n    params.lx[i] = params.x[i];\n    params.ly[i] = params.y[i];\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, simDt / steps, u);\n\n  const buf = params.buf;\n  // Mostly a slow exponential fade, with a little taken off as well so old paths reach black.\n  const fade = Math.exp(-dt / trail);\n  const off = dt * 12;\n  for (let i = 0; i \u003c buf.length; i++) {\n    const v = buf[i] * fade - off;\n    buf[i] = v > 0 ? v : 0;\n  }\n\n  const col = params.col;\n  for (let i = 0; i \u003c N; i++) {\n    const vx = params.vx[i];\n    const vy = params.vy[i];\n    const sp = Math.hypot(vx, vy) + 0.001;\n    // Birds climbing and birds diving lean to either side of the chosen hue.\n    hsvInto(col, params.hue + (vy / sp) * 0.09 + params.tone[i] * 0.04, 0.88, 0.82);\n    const x0 = params.lx[i];\n    const y0 = params.ly[i];\n    const x1 = params.x[i];\n    const y1 = params.y[i];\n    const dx = x1 - x0;\n    const dy = y1 - y0;\n    if (Math.abs(dx) > W / 2 || Math.abs(dy) > H / 2) {\n      splat(buf, x1, y1, col);\n      continue;\n    }\n    const n = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.5));\n    for (let s = 1; s \u003c= n; s++) splat(buf, x0 + (dx * s) / n, y0 + (dy * s) / n, col);\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y * W + x) * 3;\n      display.setPixel(x, y, buf[i], buf[i + 1], buf[i + 2]);\n    }\n  }\n  // Heads: a paler, brighter LED where each bird is now.\n  const col = params.col;\n  for (let i = 0; i \u003c N; i++) {\n    const vy = params.vy[i];\n    const sp = Math.hypot(params.vx[i], vy) + 0.001;\n    hsvInto(col, params.hue + (vy / sp) * 0.09 + params.tone[i] * 0.04, 0.35, 1);\n    const px = Math.round(params.x[i]) % W;\n    const py = Math.round(params.y[i]) % H;\n    const j = (py * W + px) * 3;\n    display.setPixel(px, py, Math.max(buf[j], col[0]), Math.max(buf[j + 1], col[1]), Math.max(buf[j + 2], col[2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.5..4, Scatter=-1..1, Trail=0.3..2.5","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the flock's colours around the wheel; birds flying up and down sit either side of it."},{"name":"Speed","min":0.5,"max":4,"about":"How fast the birds fly, and so how long their streaks are."},{"name":"Scatter","min":-1,"max":1,"about":"Below 0 the birds pack into tight schools, above 0 they lose interest in each other and drift apart like gnats."},{"name":"Trail","min":0.3,"max":2.5,"about":"How long a streak lasts; long trails leave the flock's recent path woven across the panel."}],"start":[0,2,0,0.3],"measures":{"motion":0.7954,"detail":0.0794,"edges":0.4039,"complexity":1.2562,"coverage":0.2957,"colour":0.1808,"drift":0.1151},"knobResponse":[0.0754,0.1076,0.0932,0.1053]},{"slug":"flying-trapeze","title":"Flying Trapeze","family":"stage","round":24,"note":"밤의 서커스 천막 꼭대기를 올려다봐요. 빨강과 크림 줄무늬 천 아래에서 플라이어가 공중그네를 타고 나가 공중제비를 돌고, 무릎으로 매달린 캐처가 손을 잡아요. 팔로 스폿 셋이 연무 속에 빛줄기를 그으며 따라가고, 차례가 끝나면 그물로 떨어져 튀어 올라요. K1 을 누르면 북이 울리고 세 바퀴 공중제비가 나와요.","idea":"Looking up into a circus big top at night, a flyer swings out from the board, lets go at the top of the arc, turns her somersaults in the follow spots and is caught by the catcher hanging by his knees, then swings home to the bar or drops into the safety net over the dark crowd.","buttons":"K1 tap starts a drum roll: the next trick is the triple, and it ends in the net.","code":"// ===== Patternflow pattern =====\n// Title:   Flying Trapeze\n// Family:  stage\n// Idea:    Looking up into a circus big top at night, a flyer swings out from the board, lets go at the top of the arc, turns her somersaults in the follow spots and is caught by the catcher hanging by his knees, then swings home to the bar or drops into the safety net over the dark crowd.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the flying trapeze act Jules Léotard first flew at the Cirque Napoléon in 1859\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Turns=1..3, Haze=0..1\n//\n// Knob 1: Lights. The gels in the follow spots and the sequins on the costumes: warm white and gold at 0, amber and rose, then pink and lavender, and at 1 one pink spot and one blue. The house light on the canvas turns with them.\n// Knob 2: Speed. How fast the act runs: at 2 the fly bar swings out and back in 2.4 s and a flyer lets go every eight to eleven seconds; at 0.2 it all runs ten times slower.\n// Knob 3: Turns. The somersaults in the trick, one, two or three. A bigger trick swings higher and flies longer, and the house goes darker for it while every spot finds the flyer.\n// Knob 4: Haze. How much haze hangs under the canvas. A little shows the beams as thin shafts; turned up they swell and the whole tent glows in the gels.\n// Buttons: K1 tap starts a drum roll: the next trick is the triple, and it ends in the net.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, sin, cos, abs, sqrt, exp, floor, ceil, round, atan2, log, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst ease = (s) => s - sin(TAU * s) * (0.8 / TAU);\nconst rnd = () => Math.random();\n// A swing of the fly bar out and back, in seconds at Speed 2.\nconst PB = 2.4;\nconst OM = TAU / PB;\n// The fly bar's crane and rope; the catcher's cradle, rope and swing.\nconst [PFX, PFY, LF] = [24, 30, 34];\nconst [PCX, PCY, LC, B] = [57, 30, 20, 0.18];\n// The board's top, where the next flyer waits on it, and the rope ladder.\nconst [BY, WX, LX] = [68, 1.2, 2.6];\n// Hips above feet, hands above hips, gravity, and the time of the flight back to the bar.\nconst [LEG, HL, G, TR] = [3.8, 5.7, 90, 0.45];\n// Follow spots below the panel behind the crowd, and how fast their cones open.\nconst SPOT = [[-14, 166], [78, 166], [32, 186]];\nconst TA = 0.046;\n// Gels by the Lights knob: house wash (0..1), three spots, two flyers and the catcher.\nconst PAL = [\n  [[1, 0.8, 0.52], [255, 226, 170], [255, 244, 222], [255, 206, 120], [255, 182, 36], [205, 222, 255], [70, 120, 255]],\n  [[1, 0.64, 0.5], [255, 182, 120], [255, 150, 150], [255, 208, 150], [255, 96, 112], [255, 206, 60], [250, 240, 230]],\n  [[0.82, 0.52, 0.86], [255, 122, 196], [186, 142, 255], [255, 166, 214], [255, 62, 196], [160, 104, 255], [110, 236, 214]],\n  [[0.46, 0.44, 1], [255, 76, 170], [66, 128, 255], [172, 96, 255], [255, 44, 156], [36, 150, 255], [245, 245, 255]],\n];\nconst [SKIN, STEEL, ROPE, BAR] = [[255, 196, 156], [170, 176, 190], [150, 138, 116], [215, 215, 225]];\nconst ONNET = { drop: 1, net: 1, up: 1, tada: 1 };\n\nconst mkF = (c) => ({ m: 'wait', x: WX, y: BY - LEG, ph: 0, fs: 1, a1: 2.9, a2: 2.9, l1: 0, l2: 0, k1: 0, k2: 0, hx: null, T: 0, sx: 0, sy: 0, c });\n// Thighs, knees and arms of a figure, both sides.\nconst lim = (f, l1, l2, k1, k2, a1, a2) => Object.assign(f, { l1, l2, k1, k2, a1, a2 });\nconst rest = (f) => ((f.hx = null), lim(f, 0, 0, 0, 0, 2.9, 2.9));\nconst barAt = (th) => [PFX + LF * sin(th), PFY + LF * cos(th)];\nconst netY = (x) => 98.5 + 1.6 * sin((PI * cl(x, 0, 63)) / 63);\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = {\n    t: 0, started: false, F: F32(N * 3), LT: F32(N * 3), CA: F32(N * 3), CI: F32(N), AUD: F32(N), ROW: new Int8Array(N).fill(-1), POOL: F32(H),\n    bar: 'free', A: 0.55, phc: 0, fl: [mkF(4), mkF(5)], star: 0,\n    sp: SPOT.map(([sx, sy]) => ({ sx, sy, ax: 30, ay: 50, ux: 0, uy: -1, D: 110 })),\n    drum: 0, drumB: 0, pop: 0, wash: 1, trip: false, nextFin: true, turns: 1, net: { s: 0, v: 0, x: 32 }, fx: [], phones: [], P: PAL[0].map((c) => c.slice()), hz: 0.3,\n  };\n  // The canvas: red and cream panels running down from the peak, each billowing between its seams.\n  for (let y = 0; y \u003c H; y++) {\n    S.POOL[y] = exp(-(((y - 17) / 15) ** 2));\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, dx = x - 32, dy = y - 5, a = atan2(dx, dy);\n      const red = 0.5 + 0.5 * cl(sin(a * 7) * 4, -1, 1);\n      const k = (0.84 - 0.16 * cos(a * 14)) * sm(2.5, 6, sqrt(dx * dx + dy * dy));\n      S.CA[i * 3] = mix(0.95, 0.88, red) * k;\n      S.CA[i * 3 + 1] = mix(0.86, 0.12, red) * k;\n      S.CA[i * 3 + 2] = mix(0.68, 0.12, red) * k;\n      S.CI[i] = (0.3 + 0.7 * exp(-((dx * dx) / 900 + (dy * dy) / 300))) * sm(40, 20, y);\n    }\n  }\n  // The crowd: rows of heads and shoulders, bigger towards the front, each row a solid band below.\n  [[108.5, 1.9, 4.6], [114, 2.3, 5.4], [120.5, 2.8, 6.4], [127.5, 3.4, 7.6]].forEach(([base, r, gap], k) => {\n    for (let cx = -2 + rnd() * gap; cx \u003c W + 3; cx += gap * (0.8 + 0.4 * rnd())) {\n      const hy = base - r * 1.15 + (rnd() - 0.5) * 1.2, hx = cx + rnd() - 0.5;\n      for (let y = max(0, floor(hy - r - 1)); y \u003c H; y++)\n        for (let x = max(0, floor(hx - r * 2.4)); x \u003c= min(W - 1, ceil(hx + r * 2.4)); x++) {\n          const hd = r + 0.5 - sqrt((x - hx) ** 2 + (y - hy) ** 2);\n          const sh = 1 - sqrt(((x - hx) / (r * 2.2)) ** 2 + ((y - base) / (r * 0.9)) ** 2);\n          const c = y >= base ? 1 : cl(max(hd, sh * r * 2), 0, 1), i = y * W + x;\n          if (c > S.AUD[i]) S.AUD[i] = c;\n          if (c > 0.5) S.ROW[i] = k;\n        }\n      if (rnd() \u003c 0.09) S.phones.push([round(hx + 1), round(hy - r - 1)]);\n    }\n  });\n  params.s = S;\n}\n\n// The catcher at swing angle psi: knees over the bar, body hanging, arms reaching for the flyer.\nfunction cpose(psi) {\n  const ps = psi * 1.2, bx = PCX + LC * sin(psi), by = PCY + LC * cos(psi), sx = sin(ps), sy = cos(ps);\n  const hx = bx + 1.9 * sx, hy = by + 1.9 * sy;\n  const ax = sx * cos(0.2) - sy * sin(0.2), ay = sy * cos(0.2) + sx * sin(0.2);\n  return { bx, by, x: hx, y: hy, ph: PI - ps, fs: 1, l1: 0, l2: 0, k1: 1.5, k2: 1.3, hx: hx + 3 * sx + 2.7 * ax, hy: hy + 3 * sy + 2.7 * ay };\n}\n\nfunction newRound(S, go, who) {\n  const trip = S.trip, turns = trip ? 3 : S.turns, fin = trip || S.nextFin, tf = 0.75 + 0.25 * turns, tr = go + 1.5 * PB;\n  S.trip = false;\n  S.nextFin = !fin;\n  S.rd = { turns, fin, tf, h: 8 + 3 * turns, tg: go, tr, tc: tr + tf, rel: false, A0: S.A, A: 0.55 + 0.03 * (turns - 1), t0: S.t, over: false };\n  S.star = who;\n  // The catcher times his swing to be out at the front of it when she arrives.\n  const dt = max(0.3, S.rd.tc - S.t);\n  let k = round((S.phc + OM * dt) / TAU);\n  if ((TAU * k - S.phc) / dt \u003c 0.6 * OM) k++;\n  S.ct = { ph: TAU * k, t: S.rd.tc, ev: 0 };\n}\n\nconst burst = (S, n) => {\n  for (let i = 0; i \u003c n; i++) S.fx.push({ x: 2 + rnd() * 60, y: 106 + rnd() * 20, a: 1, w: rnd() * 0.25 });\n};\n\nfunction catcherEvent(S, ev) {\n  const rd = S.rd, f = S.fl[S.star];\n  f.T = 0;\n  f.ph0 = f.ph;\n  if (ev === 0) {\n    // The catch: the house comes up and the crowd's cameras go off.\n    if (f.m === 'fly') f.m = 'caught';\n    burst(S, 7, (S.pop = 1));\n    S.ct = rd.fin ? { ph: S.phc + 1.5 * PI, t: S.t + 2.4, ev: 2 } : { ph: S.phc + TAU, t: rd.tg + 3.5 * PB - TR, ev: 1 };\n  } else if (ev === 1) [f.m, f.sx, f.sy] = ['ret', f.x, f.y];\n  else {\n    // He lets her go on the swing back, and she falls turning over into the net.\n    [f.m, f.vx, f.vy] = ['drop', f.vx0, f.vy0];\n    const dy = netY(f.x + f.vx * 0.9) - 1 - f.y;\n    f.TF = (-f.vy + sqrt(f.vy * f.vy + 2 * G * max(1, dy))) / G;\n    rd.over = true;\n  }\n}\n\nfunction stepFlyer(S, f, d, i) {\n  const rd = S.rd, t = S.t, th = S.th, [hbx, hby] = barAt(-S.A), [bx, by] = barAt(th), nt = S.net;\n  f.T += d;\n  switch (f.m) {\n    case 'wait':\n    case 'hold': {\n      // Standing on the board; the one whose turn it is steps up and takes the bar.\n      const h = f.m === 'hold', gx = h ? hbx - 1 : WX;\n      rest(f);\n      f.x += cl(gx - f.x, -7 * d, 7 * d);\n      [f.fs, f.y, f.ph] = [1, BY - LEG, h ? 0.12 * sm(3, 0.5, abs(gx - f.x)) : 0.04 * sin(t * 1.3 + i)];\n      if (!h) break;\n      if (abs(gx - f.x) \u003c 1.5) [f.hx, f.hy] = [hbx, hby];\n      if (t >= rd.tg) [S.bar, f.m, f.T, f.sx, f.sy] = ['free', 'swing', 0, f.x, f.y];\n      break;\n    }\n    case 'swing':\n    case 'ride': {\n      f.fs = f.m === 'ride' ? -1 : 1;\n      const k = f.m === 'swing' ? sm(0, 0.3, f.T) : 1, u = (f.fs * th) / S.A;\n      [f.x, f.y, f.ph] = [mix(f.sx, bx + HL * sin(th), k), mix(f.sy, by + HL * cos(th), k), -th * k];\n      // Legs lead at the front of each swing and trail at the back.\n      const l = (0.95 * max(0, u) + 0.35 * min(0, u)) * k;\n      lim(f, l, l, 0.25 * max(0, -u) * k, 0.25 * max(0, -u) * k, f.a1, f.a2);\n      [f.hx, f.hy] = [bx, by];\n      if (f.m === 'swing' && !rd.rel && t >= rd.tr) {\n        // Let go at the top of the swing, aimed at where the catcher's hands will be.\n        const c = cpose(-B);\n        rd.rel = true;\n        Object.assign(f, { m: 'fly', Rx: f.x, Ry: f.y, Cx: c.hx + HL * sin(-0.8 * B), Cy: c.hy + HL * cos(-0.8 * B), phR: f.ph, pkR: f.l1, hx: null });\n      }\n      if (f.m === 'ride' && t >= rd.tg + 4 * PB) {\n        // Home on the board. The flyer who was waiting takes the bar next.\n        S.bar = 'hook';\n        rd.over = true;\n        [f.m, f.T, f.sx, f.sy] = ['land', 0, f.x, f.y];\n        const o = S.fl[1 - i];\n        if (o.m === 'wait') o.m = 'hold';\n        f.next = o.m === 'hold' ? 'wait' : 'hold';\n        newRound(S, t + 1.1, o.m === 'hold' ? 1 - i : i);\n      }\n      break;\n    }\n    case 'fly': {\n      const s = cl((t - rd.tr) / rd.tf, 0, 1), u = sm(0.04, 0.22, s) * (1 - sm(0.7, 0.9, s));\n      [f.x, f.y, f.ph] = [mix(f.Rx, f.Cx, s), mix(f.Ry, f.Cy, s) - 4 * rd.h * s * (1 - s), mix(f.phR, 0.8 * B - TAU * rd.turns, ease(s))];\n      const l = max(f.pkR * (1 - sm(0, 0.12, s)), 2.2 * u);\n      lim(f, l, l, 2.4 * u, 2.4 * u, 2 * u, 2 * u);\n      break;\n    }\n    case 'caught': {\n      const c = S.cp, tp = S.psi * 0.8;\n      [f.x, f.y, f.ph, f.fs, f.hx, f.hy] = [c.hx + HL * sin(tp), c.hy + HL * cos(tp), -tp, 1, c.hx, c.hy];\n      lim(f, 0.4 * sin(S.phc + 0.6), 0.4 * sin(S.phc + 0.6), 0, 0, 0, 0);\n      break;\n    }\n    case 'ret': {\n      // A half turn in the air and back to the fly bar, which comes out to meet her.\n      const s = cl(f.T / TR, 0, 1), [ex, ey] = barAt(rd.A);\n      [f.x, f.y, f.ph, f.fs] = [mix(f.sx, ex + HL * sin(rd.A), s), mix(f.sy, ey + HL * cos(rd.A), s) - 18 * s * (1 - s), mix(f.ph0, -rd.A, s), s \u003c 0.5 ? 1 : -1];\n      const a = sin(PI * s);\n      f.hx = null;\n      lim(f, 0.3 * a, 0.3 * a, 0, 0, 1.3 * a, -1.3 * a);\n      if (s >= 1) f.m = 'ride';\n      break;\n    }\n    case 'land': {\n      const k = sm(0, 0.35, f.T);\n      rest(f);\n      [f.x, f.y, f.ph, f.hx, f.hy] = [mix(f.sx, hbx - 1, k), mix(f.sy, BY - LEG, k), mix(f.ph, 0, k), hbx, hby];\n      if (f.T > 0.4) f.m = f.next;\n      break;\n    }\n    case 'drop': {\n      f.vy += G * d;\n      [f.x, f.y] = [f.x + f.vx * d, f.y + f.vy * d];\n      const s = cl(f.T / f.TF, 0, 1), u = sm(0.1, 0.3, s) * (1 - sm(0.62, 0.85, s));\n      f.ph = mix(f.ph0, -PI / 2 - TAU, ease(s));\n      lim(f, 2.2 * u, 2.2 * u, 2.4 * u, 2.4 * u, 0.6 + 1.4 * u, 0.6 + 1.4 * u).hx = null;\n      if (f.y >= netY(f.x) - 1) {\n        [f.m, f.T, nt.x] = ['net', 0, f.x];\n        S.pop = max(S.pop, 0.8);\n        burst(S, 6);\n      }\n      break;\n    }\n    case 'net': {\n      // Bouncing on her back: a stiff spring while she is in the net, a fall while she is out.\n      const n = max(1, ceil(d / 0.006)), h = d / n;\n      for (let j = 0; j \u003c n; j++) {\n        const pen = f.y - (netY(f.x) - 1);\n        f.vy += (G - (pen > 0 ? 420 * pen + 7 * f.vy : 0)) * h;\n        [f.y, f.x, f.vx] = [f.y + f.vy * h, f.x + f.vx * h, f.vx * (1 - 2.5 * h)];\n        if (pen > 0) [nt.s, nt.v] = [pen, f.vy];\n        else (nt.v += (-900 * nt.s - 22 * nt.v) * h), (nt.s += nt.v * h);\n      }\n      [nt.x, nt.hold, f.ph] = [f.x, true, -PI / 2];\n      lim(f, 0.6, 0.6, 0.4, 0.4, 1.6 + 0.5 * sin(f.T * 9), 1.6 - 0.5 * sin(f.T * 9));\n      if (f.T > 2.6) [f.m, f.T, f.sy] = ['up', 0, f.y];\n      break;\n    }\n    case 'up':\n    case 'tada':\n    case 'walk': {\n      nt.s += (1.5 - nt.s) * min(1, d * 8);\n      [nt.v, nt.x, nt.hold] = [0, f.x, true];\n      const top = netY(f.x) + nt.s - LEG - 0.6;\n      if (f.m === 'up') {\n        const k = sm(0, 0.5, f.T);\n        rest(f);\n        [f.ph, f.y] = [mix(-PI / 2, 0, k), mix(f.sy, top, k)];\n        if (f.T > 0.55) [f.m, f.T] = ['tada', 0];\n      } else if (f.m === 'tada') {\n        // Arms up for the crowd.\n        [f.ph, f.y] = [0, top];\n        lim(f, 0, 0, 0, 0, 0.55, -0.55);\n        if (f.T > 0.8) [f.m, f.T] = ['walk', 0];\n      } else {\n        // Bouncing along the net to the ladder.\n        const w = sin(f.T * 8);\n        [f.fs, f.x, f.y, f.ph] = [-1, f.x - 13 * d, top - 1.1 * abs(w), 0];\n        lim(f, 0.5 * w, -0.5 * w, 0, 0, PI - 0.5 * w, PI + 0.5 * w);\n        if (f.x \u003c= LX) [f.m, f.T] = ['climb', 0];\n      }\n      break;\n    }\n    case 'climb': {\n      // Up the rope ladder to the board.\n      const w = sin(f.T * 9);\n      [f.x, f.y, f.fs, f.ph, f.hx] = [LX, f.y - 12 * d, -1, 0, null];\n      const p = max(0, w), q = max(0, -w);\n      lim(f, 0.9 * p, 0.9 * q, 1.5 * p, 1.5 * q, 0.35 + 0.45 * w, 0.35 - 0.45 * w);\n      if (f.y \u003c= BY - LEG) [f.y, f.m] = [BY - LEG, 'wait'];\n      break;\n    }\n  }\n  if (d > 0) [f.vx0, f.vy0] = [(f.x - f.px) / d, (f.y - f.py) / d];\n  [f.px, f.py] = [f.x, f.y];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06], rdt = cl(dt || 0, 0, 0.1), d = rdt * (cl(kv[1], 0.2, 3) / 2);\n  const u = cl(kv[0], 0, 1) * 3, pi = min(2, floor(u));\n  for (let j = 0; j \u003c 7; j++) for (let c = 0; c \u003c 3; c++) S.P[j][c] = mix(PAL[pi][j][c], PAL[pi + 1][j][c], u - pi);\n  [S.turns, S.hz] = [cl(round(kv[2]), 1, 3), 0.26 + 0.74 * cl(kv[3], 0, 1)];\n  if (!S.started) {\n    // Open mid-act: the first flyer is already out on her first swing.\n    [S.started, S.fl[0].m, S.fl[0].T] = [true, 'swing', 1];\n    newRound(S, -0.9, 0);\n    [S.A, S.phc] = [S.rd.A, S.ct.ph - OM * S.rd.tc];\n  }\n  const tp = S.t, t = (S.t += d), rd = S.rd;\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Drum roll: this trick becomes the triple if she has not let go yet, else the next one.\n    S.drumB = 1;\n    if (!rd.rel && !rd.over) {\n      Object.assign(rd, { turns: 3, fin: true, tf: 1.5, h: 17, tc: rd.tr + 1.5 });\n      S.nextFin = false;\n      if (S.ct && S.ct.ev === 0) S.ct.t = rd.tc;\n    } else S.trip = true;\n  }\n  S.A = S.bar === 'hook' && !rd.over ? mix(rd.A0, rd.A, sm(rd.t0, rd.tg, t)) : rd.A;\n  S.th = S.bar === 'hook' ? -S.A : -S.A * cos(OM * (t - rd.tg));\n  // The catcher, phase-locked to the next thing he has to be on time for.\n  const ct = S.ct, rem = ct ? ct.t - tp : 0;\n  S.phc = ct ? (rem \u003c= d ? ct.ph : S.phc + ((ct.ph - S.phc) * d) / rem) : S.phc + OM * d;\n  S.cp = cpose((S.psi = -B * cos(S.phc)));\n  if (ct && rem \u003c= d) (S.ct = null), catcherEvent(S, ct.ev);\n  const nt = S.net, h = min(d, 0.02);\n  nt.hold = false;\n  S.fl.forEach((f, i) => stepFlyer(S, f, d, i));\n  // An empty net rings and settles.\n  if (!nt.hold) (nt.v += (-900 * nt.s - 22 * nt.v) * h), (nt.s = (nt.s + nt.v * h) * exp(-d * 3));\n  // After a drop the bar swings empty until it comes back to the board and the next flyer hooks it.\n  const R = S.rd;\n  const w = S.fl.findIndex((f) => f.m === 'wait');\n  if (R.over && S.bar === 'free' && w >= 0 && floor((t - R.tg) / PB) > floor((tp - R.tg) / PB)) [S.bar, S.fl[w].m] = ['hook', 'hold'], newRound(S, t + 0.7, w);\n  // Light cues: the house dims for the drum roll, more for a bigger trick, and comes up on the catch.\n  const r = S.rd, star = S.fl[S.star];\n  const roll = (!r.rel && t > r.tg + 0.5 * PB) || star.m === 'fly' || S.drumB > 0 ? 1 : 0;\n  S.drum += (roll - S.drum) * (1 - exp(-d * 4));\n  S.drumB = max(0, S.drumB - rdt * 0.4);\n  S.pop *= exp(-d * 0.9);\n  S.wash = (1 - S.drum * (0.3 + 0.22 * (r.turns - 1))) * (1 + 0.8 * S.pop);\n  // The follow spots: two on the flyer, the third on the catcher unless the trick is big.\n  const fin = S.fl.find((f) => ONNET[f.m]);\n  const tg = [fin || star, fin && t \u003c r.tg + 0.4 ? fin : star, S.drum > 0.5 && r.turns >= 2 ? star : { x: S.cp.x, y: S.cp.y + 3 }];\n  const k = 1 - exp(-d * 8);\n  S.sp.forEach((s, j) => {\n    const vx = (s.ax += (tg[j].x - s.ax) * k) - s.sx, vy = (s.ay += (tg[j].y - 1 - s.ay) * k) - s.sy, D = (s.D = sqrt(vx * vx + vy * vy));\n    [s.ux, s.uy] = [vx / D, vy / D];\n  });\n  // Camera flashes in the crowd.\n  if (rnd() \u003c rdt * 0.9) burst(S, 1);\n  for (const e of S.fx) e.a -= rdt * 9;\n  S.fx = S.fx.filter((e) => e.a > 0);\n}\n\n// A stroke lit by the light field, with optional sequin sparkle.\nfunction seg(S, ax, ay, bx, by, r, c, sp) {\n  const { F, LT } = S, dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1e-6;\n  const x1 = min(W - 1, ceil(max(ax, bx) + r + 1)), y1 = min(H - 1, ceil(max(ay, by) + r + 1));\n  for (let y = max(0, floor(min(ay, by) - r - 1)); y \u003c= y1; y++)\n    for (let x = max(0, floor(min(ax, bx) - r - 1)); x \u003c= x1; x++) {\n      const t = cl(((x - ax) * dx + (y - ay) * dy) / ll, 0, 1), ex = x - ax - dx * t, ey = y - ay - dy * t;\n      const a = cl(r + 0.5 - sqrt(ex * ex + ey * ey), 0, 1);\n      if (a \u003c= 0) continue;\n      const q = (y * W + x) * 3, s = sp ? 0.72 + 0.56 * rnd() : 1;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += (c[j] * LT[q + j] * s - F[q + j]) * a;\n    }\n}\n\nfunction glow(F, x, y, r, c, k) {\n  for (let yy = max(0, floor(y - r)); yy \u003c= min(H - 1, ceil(y + r)); yy++)\n    for (let xx = max(0, floor(x - r)); xx \u003c= min(W - 1, ceil(x + r)); xx++) {\n      const g = k * exp(-((xx - x) ** 2 + (yy - y) ** 2) / (0.25 * r * r)), q = (yy * W + xx) * 3;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += c[j] * g;\n    }\n}\n\n// A stick figure: hips at (x, y), body angle ph (0 is head up), facing fs.\nfunction fig(S, f, col) {\n  const bx = sin(f.ph), by = -cos(f.ph), nx = cos(f.ph) * f.fs, ny = sin(f.ph) * f.fs;\n  const dv = (a, l) => [(bx * cos(a) + nx * sin(a)) * l, (by * cos(a) + ny * sin(a)) * l];\n  const shx = f.x + bx * 3, shy = f.y + by * 3;\n  for (const [l, k] of [[f.l1, f.k1], [f.l2, f.k2]]) {\n    const [kx, ky] = dv(PI - l, 1.9), [fx, fy] = dv(PI - l + k, 1.9);\n    seg(S, f.x, f.y, f.x + kx, f.y + ky, 0.6, col, 1);\n    seg(S, f.x + kx, f.y + ky, f.x + kx + fx, f.y + ky + fy, 0.5, col, 1);\n  }\n  seg(S, f.x, f.y, shx, shy, 0.8, col, 1);\n  for (const a of [f.a1, f.a2]) {\n    const [ax, ay] = dv(a, 2.7);\n    seg(S, shx, shy, f.hx === null ? shx + ax : f.hx, f.hx === null ? shy + ay : f.hy, 0.42, SKIN, 0);\n  }\n  seg(S, shx + bx * 1.45, shy + by * 1.45, shx + bx * 1.55, shy + by * 1.55, 0.75, SKIN, 0);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { F, LT, CA, CI, AUD, ROW, POOL, P, wash, hz } = S, wc = P[0];\n  const hzA = hz * (0.7 - 0.22 * hz), halo = hz * hz * 0.18, hl = log(max(1, halo * 400));\n  const am = wc.map((v) => v * (0.12 + 0.12 * wash)), kc = 0.48 * 255 * wash, air = 9 * hz * wash;\n  const sp = S.sp.map((s, j) => [s.sx, s.sy, s.ux, s.uy, s.D, ...P[1 + j].map((v) => v / 255)]);\n  for (let y = 0; y \u003c H; y++) {\n    // The ring below the net glows in the house light behind the crowd.\n    const pb = POOL[y], ring = 50 * sm(117, 104, y) * sm(100, 104, y) * wash + air;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, q = i * 3, ci = CI[i] * kc;\n      let r = 4 + wc[0] * ring + CA[q] * wc[0] * ci, g = 4 + wc[1] * ring + CA[q + 1] * wc[1] * ci, b = 9 + wc[2] * ring + CA[q + 2] * wc[2] * ci;\n      let lr = 0, lg = 0, lb = 0;\n      const cv = CI[i] > 0.02 ? 0.9 * pb * sm(0, 0.3, CI[i]) * 255 : 0;\n      for (const s of sp) {\n        const vx = x - s[0], vy = y - s[1], al = vx * s[2] + vy * s[3], pp = abs(vx * s[3] - vy * s[2]), R = 0.8 + al * TA;\n        if (pp \u003c R) {\n          // Lit air along the beam, and past the flyer a pool where it lands on the canvas.\n          const p = sm(R, R * 0.45, pp), k = ((p * (al > s[4] ? 0.8 : 1) * 1.3) / (1 + (al / 110) ** 2)) * hzA * 255, c = cv > 0 && al > s[4] ? cv * p : 0;\n          (lr += s[5] * p), (lg += s[6] * p), (lb += s[7] * p);\n          (r += s[5] * (k + CA[q] * c)), (g += s[6] * (k + CA[q + 1] * c)), (b += s[7] * (k + CA[q + 2] * c));\n        }\n        // Haze scatters a wide glow round each beam.\n        if (pp \u003c (R + 9) * hl) {\n          const h = halo * exp(-pp / (R + 9)) * 255;\n          (r += s[5] * h), (g += s[6] * h), (b += s[7] * h);\n        }\n      }\n      (F[q] = r), (F[q + 1] = g), (F[q + 2] = b);\n      (LT[q] = min(1.25, lr * 1.2 + am[0])), (LT[q + 1] = min(1.25, lg * 1.2 + am[1])), (LT[q + 2] = min(1.25, lb * 1.2 + am[2]));\n    }\n  }\n  const t = S.t;\n  // The king pole, the ring of bulbs round the peak, which chase in a drum roll, and the bale ring.\n  seg(S, 32, 7, 32, 29, 0.7, STEEL, 0);\n  for (let j = 0; j \u003c 22; j++) {\n    const a = (TAU * j) / 22, x = 32 + 20 * sin(a), y = 6.5 + 5 * cos(a), ch = (((j / 22 - t * 0.9) % 1) + 1) % 1 \u003c 0.22 ? 1 : 0;\n    const v = (mix(0.75 + 0.15 * sin(t * 3 + j * 2.1), 0.3 + 0.9 * ch, S.drum) + 0.5 * S.pop) * (0.85 + 0.15 * cos(a));\n    glow(F, x, y, 3.2, [255, 196, 110], 0.42 * v);\n    const q = (round(y) * W + round(x)) * 3;\n    for (let k = 0; k \u003c 3; k++) F[q + k] += [200, 160, 90][k] * v;\n  }\n  seg(S, 30, 5, 34, 5, 1.1, [60, 62, 70], 0);\n  // The rig: a truss under the peak, guy lines, the uprights, the board and the ladder.\n  seg(S, 3, PFY - 2, 61, PFY - 2, 0.4, STEEL, 0);\n  seg(S, 3, PFY, 61, PFY, 0.35, STEEL, 0);\n  for (let x = 5; x \u003c 61; x += 4) seg(S, x, PFY - 2, x + 2, PFY, 0.25, STEEL, 0);\n  seg(S, 4, PFY - 2, 24, 7, 0.25, ROPE, 0);\n  seg(S, 60, PFY - 2, 40, 7, 0.25, ROPE, 0);\n  seg(S, 62, PFY - 2, 62, 103, 0.35, ROPE, 0);\n  seg(S, 0, PFY - 2, 0, BY, 0.35, ROPE, 0);\n  seg(S, 0, BY + 0.6, barAt(-S.rd.A)[0] + 0.4, BY + 0.6, 0.55, [190, 160, 120], 0);\n  seg(S, 1, BY + 1, 1, 97, 0.3, ROPE, 0);\n  seg(S, 4.2, BY + 1, 4.2, 97, 0.3, ROPE, 0);\n  for (let y = BY + 3; y \u003c 97; y += 3) seg(S, 1, y, 4.2, y, 0.25, ROPE, 0);\n  // The safety net, a sagging diamond mesh, dented where a flyer is in it.\n  const nt = S.net;\n  for (let x = 0; x \u003c W; x++) {\n    const dn = nt.s * exp(-(((x - nt.x) / 8) ** 2)), far = 94.5 + 1.2 * sin((PI * x) / 63) + 0.6 * dn, near = 103 + 2 * sin((PI * x) / 63) + dn;\n    for (let y = max(0, floor(far - 1)); y \u003c= min(H - 1, ceil(near + 1)); y++) {\n      const v = (y - far) / (near - far), fa = x * 0.34 + v * 3, fb = x * 0.34 - v * 3;\n      let ln = v > -0.06 && v \u003c 1.06 ? max(sm(0.3, 0.48, abs((fa % 1) - 0.5)), sm(0.3, 0.48, abs((((fb % 1) + 1) % 1) - 0.5))) : 0;\n      ln = max(ln, sm(0.9, 0.2, abs(y - far)), sm(0.9, 0.2, abs(y - near))) * 0.8;\n      const q = (y * W + x) * 3;\n      if (ln > 0) for (let j = 0; j \u003c 3; j++) F[q + j] += ([205, 196, 176][j] * LT[q + j] - F[q + j]) * ln;\n    }\n  }\n  // The fly bar on its ropes, the catcher's cradle, the catcher and the flyers.\n  const [bx, by] = barAt(S.th), c = S.cp;\n  for (const [px, py, x, y] of [[PFX, PFY, bx, by], [PCX, PCY, c.bx, c.by]]) {\n    seg(S, px - 1.2, py, x - 1.2, y, 0.28, ROPE, 0);\n    seg(S, px + 1.2, py, x + 1.2, y, 0.28, ROPE, 0);\n    seg(S, x - 1.8, y, x + 1.8, y, 0.45, BAR, 0);\n  }\n  fig(S, c, P[6]);\n  for (const f of S.fl) fig(S, f, P[f.c]);\n  // The crowd in front of it all, a dark sea, each head rimmed by the light behind it.\n  for (let i = W; i \u003c N; i++) {\n    const a = AUD[i];\n    if (a \u003c= 0) continue;\n    const q = i * 3, k = ROW[i], rim = k > ROW[i - W] ? (1 - 0.2 * k) * a : 0;\n    for (let j = 0; j \u003c 3; j++) F[q + j] += ((12 - 2.5 * k) * wc[j] - F[q + j]) * a + rim * (16 * wash * wc[j] + 60 * max(0, LT[q + j] - 0.3));\n  }\n  // Phones held up to film, and camera flashes.\n  for (const [x, y] of S.phones) if (x >= 0 && x \u003c W - 1) for (let j = 0; j \u003c 6; j++) F[(y * W + x) * 3 + j] += [70, 92, 130][j % 3];\n  for (const e of S.fx) glow(F, e.x, e.y, 2.2, [255, 250, 240], e.a * e.a * (1 - e.w));\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-flying-trapeze","type":"code","name":"flying-trapeze","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Flying Trapeze\n// Family:  stage\n// Idea:    Looking up into a circus big top at night, a flyer swings out from the board, lets go at the top of the arc, turns her somersaults in the follow spots and is caught by the catcher hanging by his knees, then swings home to the bar or drops into the safety net over the dark crowd.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the flying trapeze act Jules Léotard first flew at the Cirque Napoléon in 1859\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Lights=0..1, Speed=0.2..3, Turns=1..3, Haze=0..1\n//\n// Knob 1: Lights. The gels in the follow spots and the sequins on the costumes: warm white and gold at 0, amber and rose, then pink and lavender, and at 1 one pink spot and one blue. The house light on the canvas turns with them.\n// Knob 2: Speed. How fast the act runs: at 2 the fly bar swings out and back in 2.4 s and a flyer lets go every eight to eleven seconds; at 0.2 it all runs ten times slower.\n// Knob 3: Turns. The somersaults in the trick, one, two or three. A bigger trick swings higher and flies longer, and the house goes darker for it while every spot finds the flyer.\n// Knob 4: Haze. How much haze hangs under the canvas. A little shows the beams as thin shafts; turned up they swell and the whole tent glows in the gels.\n// Buttons: K1 tap starts a drum roll: the next trick is the triple, and it ends in the net.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, sin, cos, abs, sqrt, exp, floor, ceil, round, atan2, log, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst ease = (s) => s - sin(TAU * s) * (0.8 / TAU);\nconst rnd = () => Math.random();\n// A swing of the fly bar out and back, in seconds at Speed 2.\nconst PB = 2.4;\nconst OM = TAU / PB;\n// The fly bar's crane and rope; the catcher's cradle, rope and swing.\nconst [PFX, PFY, LF] = [24, 30, 34];\nconst [PCX, PCY, LC, B] = [57, 30, 20, 0.18];\n// The board's top, where the next flyer waits on it, and the rope ladder.\nconst [BY, WX, LX] = [68, 1.2, 2.6];\n// Hips above feet, hands above hips, gravity, and the time of the flight back to the bar.\nconst [LEG, HL, G, TR] = [3.8, 5.7, 90, 0.45];\n// Follow spots below the panel behind the crowd, and how fast their cones open.\nconst SPOT = [[-14, 166], [78, 166], [32, 186]];\nconst TA = 0.046;\n// Gels by the Lights knob: house wash (0..1), three spots, two flyers and the catcher.\nconst PAL = [\n  [[1, 0.8, 0.52], [255, 226, 170], [255, 244, 222], [255, 206, 120], [255, 182, 36], [205, 222, 255], [70, 120, 255]],\n  [[1, 0.64, 0.5], [255, 182, 120], [255, 150, 150], [255, 208, 150], [255, 96, 112], [255, 206, 60], [250, 240, 230]],\n  [[0.82, 0.52, 0.86], [255, 122, 196], [186, 142, 255], [255, 166, 214], [255, 62, 196], [160, 104, 255], [110, 236, 214]],\n  [[0.46, 0.44, 1], [255, 76, 170], [66, 128, 255], [172, 96, 255], [255, 44, 156], [36, 150, 255], [245, 245, 255]],\n];\nconst [SKIN, STEEL, ROPE, BAR] = [[255, 196, 156], [170, 176, 190], [150, 138, 116], [215, 215, 225]];\nconst ONNET = { drop: 1, net: 1, up: 1, tada: 1 };\n\nconst mkF = (c) => ({ m: 'wait', x: WX, y: BY - LEG, ph: 0, fs: 1, a1: 2.9, a2: 2.9, l1: 0, l2: 0, k1: 0, k2: 0, hx: null, T: 0, sx: 0, sy: 0, c });\n// Thighs, knees and arms of a figure, both sides.\nconst lim = (f, l1, l2, k1, k2, a1, a2) => Object.assign(f, { l1, l2, k1, k2, a1, a2 });\nconst rest = (f) => ((f.hx = null), lim(f, 0, 0, 0, 0, 2.9, 2.9));\nconst barAt = (th) => [PFX + LF * sin(th), PFY + LF * cos(th)];\nconst netY = (x) => 98.5 + 1.6 * sin((PI * cl(x, 0, 63)) / 63);\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const S = {\n    t: 0, started: false, F: F32(N * 3), LT: F32(N * 3), CA: F32(N * 3), CI: F32(N), AUD: F32(N), ROW: new Int8Array(N).fill(-1), POOL: F32(H),\n    bar: 'free', A: 0.55, phc: 0, fl: [mkF(4), mkF(5)], star: 0,\n    sp: SPOT.map(([sx, sy]) => ({ sx, sy, ax: 30, ay: 50, ux: 0, uy: -1, D: 110 })),\n    drum: 0, drumB: 0, pop: 0, wash: 1, trip: false, nextFin: true, turns: 1, net: { s: 0, v: 0, x: 32 }, fx: [], phones: [], P: PAL[0].map((c) => c.slice()), hz: 0.3,\n  };\n  // The canvas: red and cream panels running down from the peak, each billowing between its seams.\n  for (let y = 0; y \u003c H; y++) {\n    S.POOL[y] = exp(-(((y - 17) / 15) ** 2));\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, dx = x - 32, dy = y - 5, a = atan2(dx, dy);\n      const red = 0.5 + 0.5 * cl(sin(a * 7) * 4, -1, 1);\n      const k = (0.84 - 0.16 * cos(a * 14)) * sm(2.5, 6, sqrt(dx * dx + dy * dy));\n      S.CA[i * 3] = mix(0.95, 0.88, red) * k;\n      S.CA[i * 3 + 1] = mix(0.86, 0.12, red) * k;\n      S.CA[i * 3 + 2] = mix(0.68, 0.12, red) * k;\n      S.CI[i] = (0.3 + 0.7 * exp(-((dx * dx) / 900 + (dy * dy) / 300))) * sm(40, 20, y);\n    }\n  }\n  // The crowd: rows of heads and shoulders, bigger towards the front, each row a solid band below.\n  [[108.5, 1.9, 4.6], [114, 2.3, 5.4], [120.5, 2.8, 6.4], [127.5, 3.4, 7.6]].forEach(([base, r, gap], k) => {\n    for (let cx = -2 + rnd() * gap; cx \u003c W + 3; cx += gap * (0.8 + 0.4 * rnd())) {\n      const hy = base - r * 1.15 + (rnd() - 0.5) * 1.2, hx = cx + rnd() - 0.5;\n      for (let y = max(0, floor(hy - r - 1)); y \u003c H; y++)\n        for (let x = max(0, floor(hx - r * 2.4)); x \u003c= min(W - 1, ceil(hx + r * 2.4)); x++) {\n          const hd = r + 0.5 - sqrt((x - hx) ** 2 + (y - hy) ** 2);\n          const sh = 1 - sqrt(((x - hx) / (r * 2.2)) ** 2 + ((y - base) / (r * 0.9)) ** 2);\n          const c = y >= base ? 1 : cl(max(hd, sh * r * 2), 0, 1), i = y * W + x;\n          if (c > S.AUD[i]) S.AUD[i] = c;\n          if (c > 0.5) S.ROW[i] = k;\n        }\n      if (rnd() \u003c 0.09) S.phones.push([round(hx + 1), round(hy - r - 1)]);\n    }\n  });\n  params.s = S;\n}\n\n// The catcher at swing angle psi: knees over the bar, body hanging, arms reaching for the flyer.\nfunction cpose(psi) {\n  const ps = psi * 1.2, bx = PCX + LC * sin(psi), by = PCY + LC * cos(psi), sx = sin(ps), sy = cos(ps);\n  const hx = bx + 1.9 * sx, hy = by + 1.9 * sy;\n  const ax = sx * cos(0.2) - sy * sin(0.2), ay = sy * cos(0.2) + sx * sin(0.2);\n  return { bx, by, x: hx, y: hy, ph: PI - ps, fs: 1, l1: 0, l2: 0, k1: 1.5, k2: 1.3, hx: hx + 3 * sx + 2.7 * ax, hy: hy + 3 * sy + 2.7 * ay };\n}\n\nfunction newRound(S, go, who) {\n  const trip = S.trip, turns = trip ? 3 : S.turns, fin = trip || S.nextFin, tf = 0.75 + 0.25 * turns, tr = go + 1.5 * PB;\n  S.trip = false;\n  S.nextFin = !fin;\n  S.rd = { turns, fin, tf, h: 8 + 3 * turns, tg: go, tr, tc: tr + tf, rel: false, A0: S.A, A: 0.55 + 0.03 * (turns - 1), t0: S.t, over: false };\n  S.star = who;\n  // The catcher times his swing to be out at the front of it when she arrives.\n  const dt = max(0.3, S.rd.tc - S.t);\n  let k = round((S.phc + OM * dt) / TAU);\n  if ((TAU * k - S.phc) / dt \u003c 0.6 * OM) k++;\n  S.ct = { ph: TAU * k, t: S.rd.tc, ev: 0 };\n}\n\nconst burst = (S, n) => {\n  for (let i = 0; i \u003c n; i++) S.fx.push({ x: 2 + rnd() * 60, y: 106 + rnd() * 20, a: 1, w: rnd() * 0.25 });\n};\n\nfunction catcherEvent(S, ev) {\n  const rd = S.rd, f = S.fl[S.star];\n  f.T = 0;\n  f.ph0 = f.ph;\n  if (ev === 0) {\n    // The catch: the house comes up and the crowd's cameras go off.\n    if (f.m === 'fly') f.m = 'caught';\n    burst(S, 7, (S.pop = 1));\n    S.ct = rd.fin ? { ph: S.phc + 1.5 * PI, t: S.t + 2.4, ev: 2 } : { ph: S.phc + TAU, t: rd.tg + 3.5 * PB - TR, ev: 1 };\n  } else if (ev === 1) [f.m, f.sx, f.sy] = ['ret', f.x, f.y];\n  else {\n    // He lets her go on the swing back, and she falls turning over into the net.\n    [f.m, f.vx, f.vy] = ['drop', f.vx0, f.vy0];\n    const dy = netY(f.x + f.vx * 0.9) - 1 - f.y;\n    f.TF = (-f.vy + sqrt(f.vy * f.vy + 2 * G * max(1, dy))) / G;\n    rd.over = true;\n  }\n}\n\nfunction stepFlyer(S, f, d, i) {\n  const rd = S.rd, t = S.t, th = S.th, [hbx, hby] = barAt(-S.A), [bx, by] = barAt(th), nt = S.net;\n  f.T += d;\n  switch (f.m) {\n    case 'wait':\n    case 'hold': {\n      // Standing on the board; the one whose turn it is steps up and takes the bar.\n      const h = f.m === 'hold', gx = h ? hbx - 1 : WX;\n      rest(f);\n      f.x += cl(gx - f.x, -7 * d, 7 * d);\n      [f.fs, f.y, f.ph] = [1, BY - LEG, h ? 0.12 * sm(3, 0.5, abs(gx - f.x)) : 0.04 * sin(t * 1.3 + i)];\n      if (!h) break;\n      if (abs(gx - f.x) \u003c 1.5) [f.hx, f.hy] = [hbx, hby];\n      if (t >= rd.tg) [S.bar, f.m, f.T, f.sx, f.sy] = ['free', 'swing', 0, f.x, f.y];\n      break;\n    }\n    case 'swing':\n    case 'ride': {\n      f.fs = f.m === 'ride' ? -1 : 1;\n      const k = f.m === 'swing' ? sm(0, 0.3, f.T) : 1, u = (f.fs * th) / S.A;\n      [f.x, f.y, f.ph] = [mix(f.sx, bx + HL * sin(th), k), mix(f.sy, by + HL * cos(th), k), -th * k];\n      // Legs lead at the front of each swing and trail at the back.\n      const l = (0.95 * max(0, u) + 0.35 * min(0, u)) * k;\n      lim(f, l, l, 0.25 * max(0, -u) * k, 0.25 * max(0, -u) * k, f.a1, f.a2);\n      [f.hx, f.hy] = [bx, by];\n      if (f.m === 'swing' && !rd.rel && t >= rd.tr) {\n        // Let go at the top of the swing, aimed at where the catcher's hands will be.\n        const c = cpose(-B);\n        rd.rel = true;\n        Object.assign(f, { m: 'fly', Rx: f.x, Ry: f.y, Cx: c.hx + HL * sin(-0.8 * B), Cy: c.hy + HL * cos(-0.8 * B), phR: f.ph, pkR: f.l1, hx: null });\n      }\n      if (f.m === 'ride' && t >= rd.tg + 4 * PB) {\n        // Home on the board. The flyer who was waiting takes the bar next.\n        S.bar = 'hook';\n        rd.over = true;\n        [f.m, f.T, f.sx, f.sy] = ['land', 0, f.x, f.y];\n        const o = S.fl[1 - i];\n        if (o.m === 'wait') o.m = 'hold';\n        f.next = o.m === 'hold' ? 'wait' : 'hold';\n        newRound(S, t + 1.1, o.m === 'hold' ? 1 - i : i);\n      }\n      break;\n    }\n    case 'fly': {\n      const s = cl((t - rd.tr) / rd.tf, 0, 1), u = sm(0.04, 0.22, s) * (1 - sm(0.7, 0.9, s));\n      [f.x, f.y, f.ph] = [mix(f.Rx, f.Cx, s), mix(f.Ry, f.Cy, s) - 4 * rd.h * s * (1 - s), mix(f.phR, 0.8 * B - TAU * rd.turns, ease(s))];\n      const l = max(f.pkR * (1 - sm(0, 0.12, s)), 2.2 * u);\n      lim(f, l, l, 2.4 * u, 2.4 * u, 2 * u, 2 * u);\n      break;\n    }\n    case 'caught': {\n      const c = S.cp, tp = S.psi * 0.8;\n      [f.x, f.y, f.ph, f.fs, f.hx, f.hy] = [c.hx + HL * sin(tp), c.hy + HL * cos(tp), -tp, 1, c.hx, c.hy];\n      lim(f, 0.4 * sin(S.phc + 0.6), 0.4 * sin(S.phc + 0.6), 0, 0, 0, 0);\n      break;\n    }\n    case 'ret': {\n      // A half turn in the air and back to the fly bar, which comes out to meet her.\n      const s = cl(f.T / TR, 0, 1), [ex, ey] = barAt(rd.A);\n      [f.x, f.y, f.ph, f.fs] = [mix(f.sx, ex + HL * sin(rd.A), s), mix(f.sy, ey + HL * cos(rd.A), s) - 18 * s * (1 - s), mix(f.ph0, -rd.A, s), s \u003c 0.5 ? 1 : -1];\n      const a = sin(PI * s);\n      f.hx = null;\n      lim(f, 0.3 * a, 0.3 * a, 0, 0, 1.3 * a, -1.3 * a);\n      if (s >= 1) f.m = 'ride';\n      break;\n    }\n    case 'land': {\n      const k = sm(0, 0.35, f.T);\n      rest(f);\n      [f.x, f.y, f.ph, f.hx, f.hy] = [mix(f.sx, hbx - 1, k), mix(f.sy, BY - LEG, k), mix(f.ph, 0, k), hbx, hby];\n      if (f.T > 0.4) f.m = f.next;\n      break;\n    }\n    case 'drop': {\n      f.vy += G * d;\n      [f.x, f.y] = [f.x + f.vx * d, f.y + f.vy * d];\n      const s = cl(f.T / f.TF, 0, 1), u = sm(0.1, 0.3, s) * (1 - sm(0.62, 0.85, s));\n      f.ph = mix(f.ph0, -PI / 2 - TAU, ease(s));\n      lim(f, 2.2 * u, 2.2 * u, 2.4 * u, 2.4 * u, 0.6 + 1.4 * u, 0.6 + 1.4 * u).hx = null;\n      if (f.y >= netY(f.x) - 1) {\n        [f.m, f.T, nt.x] = ['net', 0, f.x];\n        S.pop = max(S.pop, 0.8);\n        burst(S, 6);\n      }\n      break;\n    }\n    case 'net': {\n      // Bouncing on her back: a stiff spring while she is in the net, a fall while she is out.\n      const n = max(1, ceil(d / 0.006)), h = d / n;\n      for (let j = 0; j \u003c n; j++) {\n        const pen = f.y - (netY(f.x) - 1);\n        f.vy += (G - (pen > 0 ? 420 * pen + 7 * f.vy : 0)) * h;\n        [f.y, f.x, f.vx] = [f.y + f.vy * h, f.x + f.vx * h, f.vx * (1 - 2.5 * h)];\n        if (pen > 0) [nt.s, nt.v] = [pen, f.vy];\n        else (nt.v += (-900 * nt.s - 22 * nt.v) * h), (nt.s += nt.v * h);\n      }\n      [nt.x, nt.hold, f.ph] = [f.x, true, -PI / 2];\n      lim(f, 0.6, 0.6, 0.4, 0.4, 1.6 + 0.5 * sin(f.T * 9), 1.6 - 0.5 * sin(f.T * 9));\n      if (f.T > 2.6) [f.m, f.T, f.sy] = ['up', 0, f.y];\n      break;\n    }\n    case 'up':\n    case 'tada':\n    case 'walk': {\n      nt.s += (1.5 - nt.s) * min(1, d * 8);\n      [nt.v, nt.x, nt.hold] = [0, f.x, true];\n      const top = netY(f.x) + nt.s - LEG - 0.6;\n      if (f.m === 'up') {\n        const k = sm(0, 0.5, f.T);\n        rest(f);\n        [f.ph, f.y] = [mix(-PI / 2, 0, k), mix(f.sy, top, k)];\n        if (f.T > 0.55) [f.m, f.T] = ['tada', 0];\n      } else if (f.m === 'tada') {\n        // Arms up for the crowd.\n        [f.ph, f.y] = [0, top];\n        lim(f, 0, 0, 0, 0, 0.55, -0.55);\n        if (f.T > 0.8) [f.m, f.T] = ['walk', 0];\n      } else {\n        // Bouncing along the net to the ladder.\n        const w = sin(f.T * 8);\n        [f.fs, f.x, f.y, f.ph] = [-1, f.x - 13 * d, top - 1.1 * abs(w), 0];\n        lim(f, 0.5 * w, -0.5 * w, 0, 0, PI - 0.5 * w, PI + 0.5 * w);\n        if (f.x \u003c= LX) [f.m, f.T] = ['climb', 0];\n      }\n      break;\n    }\n    case 'climb': {\n      // Up the rope ladder to the board.\n      const w = sin(f.T * 9);\n      [f.x, f.y, f.fs, f.ph, f.hx] = [LX, f.y - 12 * d, -1, 0, null];\n      const p = max(0, w), q = max(0, -w);\n      lim(f, 0.9 * p, 0.9 * q, 1.5 * p, 1.5 * q, 0.35 + 0.45 * w, 0.35 - 0.45 * w);\n      if (f.y \u003c= BY - LEG) [f.y, f.m] = [BY - LEG, 'wait'];\n      break;\n    }\n  }\n  if (d > 0) [f.vx0, f.vy0] = [(f.x - f.px) / d, (f.y - f.py) / d];\n  [f.px, f.py] = [f.x, f.y];\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06], rdt = cl(dt || 0, 0, 0.1), d = rdt * (cl(kv[1], 0.2, 3) / 2);\n  const u = cl(kv[0], 0, 1) * 3, pi = min(2, floor(u));\n  for (let j = 0; j \u003c 7; j++) for (let c = 0; c \u003c 3; c++) S.P[j][c] = mix(PAL[pi][j][c], PAL[pi + 1][j][c], u - pi);\n  [S.turns, S.hz] = [cl(round(kv[2]), 1, 3), 0.26 + 0.74 * cl(kv[3], 0, 1)];\n  if (!S.started) {\n    // Open mid-act: the first flyer is already out on her first swing.\n    [S.started, S.fl[0].m, S.fl[0].T] = [true, 'swing', 1];\n    newRound(S, -0.9, 0);\n    [S.A, S.phc] = [S.rd.A, S.ct.ph - OM * S.rd.tc];\n  }\n  const tp = S.t, t = (S.t += d), rd = S.rd;\n  if (input.btnPressed && input.btnPressed[0]) {\n    // Drum roll: this trick becomes the triple if she has not let go yet, else the next one.\n    S.drumB = 1;\n    if (!rd.rel && !rd.over) {\n      Object.assign(rd, { turns: 3, fin: true, tf: 1.5, h: 17, tc: rd.tr + 1.5 });\n      S.nextFin = false;\n      if (S.ct && S.ct.ev === 0) S.ct.t = rd.tc;\n    } else S.trip = true;\n  }\n  S.A = S.bar === 'hook' && !rd.over ? mix(rd.A0, rd.A, sm(rd.t0, rd.tg, t)) : rd.A;\n  S.th = S.bar === 'hook' ? -S.A : -S.A * cos(OM * (t - rd.tg));\n  // The catcher, phase-locked to the next thing he has to be on time for.\n  const ct = S.ct, rem = ct ? ct.t - tp : 0;\n  S.phc = ct ? (rem \u003c= d ? ct.ph : S.phc + ((ct.ph - S.phc) * d) / rem) : S.phc + OM * d;\n  S.cp = cpose((S.psi = -B * cos(S.phc)));\n  if (ct && rem \u003c= d) (S.ct = null), catcherEvent(S, ct.ev);\n  const nt = S.net, h = min(d, 0.02);\n  nt.hold = false;\n  S.fl.forEach((f, i) => stepFlyer(S, f, d, i));\n  // An empty net rings and settles.\n  if (!nt.hold) (nt.v += (-900 * nt.s - 22 * nt.v) * h), (nt.s = (nt.s + nt.v * h) * exp(-d * 3));\n  // After a drop the bar swings empty until it comes back to the board and the next flyer hooks it.\n  const R = S.rd;\n  const w = S.fl.findIndex((f) => f.m === 'wait');\n  if (R.over && S.bar === 'free' && w >= 0 && floor((t - R.tg) / PB) > floor((tp - R.tg) / PB)) [S.bar, S.fl[w].m] = ['hook', 'hold'], newRound(S, t + 0.7, w);\n  // Light cues: the house dims for the drum roll, more for a bigger trick, and comes up on the catch.\n  const r = S.rd, star = S.fl[S.star];\n  const roll = (!r.rel && t > r.tg + 0.5 * PB) || star.m === 'fly' || S.drumB > 0 ? 1 : 0;\n  S.drum += (roll - S.drum) * (1 - exp(-d * 4));\n  S.drumB = max(0, S.drumB - rdt * 0.4);\n  S.pop *= exp(-d * 0.9);\n  S.wash = (1 - S.drum * (0.3 + 0.22 * (r.turns - 1))) * (1 + 0.8 * S.pop);\n  // The follow spots: two on the flyer, the third on the catcher unless the trick is big.\n  const fin = S.fl.find((f) => ONNET[f.m]);\n  const tg = [fin || star, fin && t \u003c r.tg + 0.4 ? fin : star, S.drum > 0.5 && r.turns >= 2 ? star : { x: S.cp.x, y: S.cp.y + 3 }];\n  const k = 1 - exp(-d * 8);\n  S.sp.forEach((s, j) => {\n    const vx = (s.ax += (tg[j].x - s.ax) * k) - s.sx, vy = (s.ay += (tg[j].y - 1 - s.ay) * k) - s.sy, D = (s.D = sqrt(vx * vx + vy * vy));\n    [s.ux, s.uy] = [vx / D, vy / D];\n  });\n  // Camera flashes in the crowd.\n  if (rnd() \u003c rdt * 0.9) burst(S, 1);\n  for (const e of S.fx) e.a -= rdt * 9;\n  S.fx = S.fx.filter((e) => e.a > 0);\n}\n\n// A stroke lit by the light field, with optional sequin sparkle.\nfunction seg(S, ax, ay, bx, by, r, c, sp) {\n  const { F, LT } = S, dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1e-6;\n  const x1 = min(W - 1, ceil(max(ax, bx) + r + 1)), y1 = min(H - 1, ceil(max(ay, by) + r + 1));\n  for (let y = max(0, floor(min(ay, by) - r - 1)); y \u003c= y1; y++)\n    for (let x = max(0, floor(min(ax, bx) - r - 1)); x \u003c= x1; x++) {\n      const t = cl(((x - ax) * dx + (y - ay) * dy) / ll, 0, 1), ex = x - ax - dx * t, ey = y - ay - dy * t;\n      const a = cl(r + 0.5 - sqrt(ex * ex + ey * ey), 0, 1);\n      if (a \u003c= 0) continue;\n      const q = (y * W + x) * 3, s = sp ? 0.72 + 0.56 * rnd() : 1;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += (c[j] * LT[q + j] * s - F[q + j]) * a;\n    }\n}\n\nfunction glow(F, x, y, r, c, k) {\n  for (let yy = max(0, floor(y - r)); yy \u003c= min(H - 1, ceil(y + r)); yy++)\n    for (let xx = max(0, floor(x - r)); xx \u003c= min(W - 1, ceil(x + r)); xx++) {\n      const g = k * exp(-((xx - x) ** 2 + (yy - y) ** 2) / (0.25 * r * r)), q = (yy * W + xx) * 3;\n      for (let j = 0; j \u003c 3; j++) F[q + j] += c[j] * g;\n    }\n}\n\n// A stick figure: hips at (x, y), body angle ph (0 is head up), facing fs.\nfunction fig(S, f, col) {\n  const bx = sin(f.ph), by = -cos(f.ph), nx = cos(f.ph) * f.fs, ny = sin(f.ph) * f.fs;\n  const dv = (a, l) => [(bx * cos(a) + nx * sin(a)) * l, (by * cos(a) + ny * sin(a)) * l];\n  const shx = f.x + bx * 3, shy = f.y + by * 3;\n  for (const [l, k] of [[f.l1, f.k1], [f.l2, f.k2]]) {\n    const [kx, ky] = dv(PI - l, 1.9), [fx, fy] = dv(PI - l + k, 1.9);\n    seg(S, f.x, f.y, f.x + kx, f.y + ky, 0.6, col, 1);\n    seg(S, f.x + kx, f.y + ky, f.x + kx + fx, f.y + ky + fy, 0.5, col, 1);\n  }\n  seg(S, f.x, f.y, shx, shy, 0.8, col, 1);\n  for (const a of [f.a1, f.a2]) {\n    const [ax, ay] = dv(a, 2.7);\n    seg(S, shx, shy, f.hx === null ? shx + ax : f.hx, f.hx === null ? shy + ay : f.hy, 0.42, SKIN, 0);\n  }\n  seg(S, shx + bx * 1.45, shy + by * 1.45, shx + bx * 1.55, shy + by * 1.55, 0.75, SKIN, 0);\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { F, LT, CA, CI, AUD, ROW, POOL, P, wash, hz } = S, wc = P[0];\n  const hzA = hz * (0.7 - 0.22 * hz), halo = hz * hz * 0.18, hl = log(max(1, halo * 400));\n  const am = wc.map((v) => v * (0.12 + 0.12 * wash)), kc = 0.48 * 255 * wash, air = 9 * hz * wash;\n  const sp = S.sp.map((s, j) => [s.sx, s.sy, s.ux, s.uy, s.D, ...P[1 + j].map((v) => v / 255)]);\n  for (let y = 0; y \u003c H; y++) {\n    // The ring below the net glows in the house light behind the crowd.\n    const pb = POOL[y], ring = 50 * sm(117, 104, y) * sm(100, 104, y) * wash + air;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x, q = i * 3, ci = CI[i] * kc;\n      let r = 4 + wc[0] * ring + CA[q] * wc[0] * ci, g = 4 + wc[1] * ring + CA[q + 1] * wc[1] * ci, b = 9 + wc[2] * ring + CA[q + 2] * wc[2] * ci;\n      let lr = 0, lg = 0, lb = 0;\n      const cv = CI[i] > 0.02 ? 0.9 * pb * sm(0, 0.3, CI[i]) * 255 : 0;\n      for (const s of sp) {\n        const vx = x - s[0], vy = y - s[1], al = vx * s[2] + vy * s[3], pp = abs(vx * s[3] - vy * s[2]), R = 0.8 + al * TA;\n        if (pp \u003c R) {\n          // Lit air along the beam, and past the flyer a pool where it lands on the canvas.\n          const p = sm(R, R * 0.45, pp), k = ((p * (al > s[4] ? 0.8 : 1) * 1.3) / (1 + (al / 110) ** 2)) * hzA * 255, c = cv > 0 && al > s[4] ? cv * p : 0;\n          (lr += s[5] * p), (lg += s[6] * p), (lb += s[7] * p);\n          (r += s[5] * (k + CA[q] * c)), (g += s[6] * (k + CA[q + 1] * c)), (b += s[7] * (k + CA[q + 2] * c));\n        }\n        // Haze scatters a wide glow round each beam.\n        if (pp \u003c (R + 9) * hl) {\n          const h = halo * exp(-pp / (R + 9)) * 255;\n          (r += s[5] * h), (g += s[6] * h), (b += s[7] * h);\n        }\n      }\n      (F[q] = r), (F[q + 1] = g), (F[q + 2] = b);\n      (LT[q] = min(1.25, lr * 1.2 + am[0])), (LT[q + 1] = min(1.25, lg * 1.2 + am[1])), (LT[q + 2] = min(1.25, lb * 1.2 + am[2]));\n    }\n  }\n  const t = S.t;\n  // The king pole, the ring of bulbs round the peak, which chase in a drum roll, and the bale ring.\n  seg(S, 32, 7, 32, 29, 0.7, STEEL, 0);\n  for (let j = 0; j \u003c 22; j++) {\n    const a = (TAU * j) / 22, x = 32 + 20 * sin(a), y = 6.5 + 5 * cos(a), ch = (((j / 22 - t * 0.9) % 1) + 1) % 1 \u003c 0.22 ? 1 : 0;\n    const v = (mix(0.75 + 0.15 * sin(t * 3 + j * 2.1), 0.3 + 0.9 * ch, S.drum) + 0.5 * S.pop) * (0.85 + 0.15 * cos(a));\n    glow(F, x, y, 3.2, [255, 196, 110], 0.42 * v);\n    const q = (round(y) * W + round(x)) * 3;\n    for (let k = 0; k \u003c 3; k++) F[q + k] += [200, 160, 90][k] * v;\n  }\n  seg(S, 30, 5, 34, 5, 1.1, [60, 62, 70], 0);\n  // The rig: a truss under the peak, guy lines, the uprights, the board and the ladder.\n  seg(S, 3, PFY - 2, 61, PFY - 2, 0.4, STEEL, 0);\n  seg(S, 3, PFY, 61, PFY, 0.35, STEEL, 0);\n  for (let x = 5; x \u003c 61; x += 4) seg(S, x, PFY - 2, x + 2, PFY, 0.25, STEEL, 0);\n  seg(S, 4, PFY - 2, 24, 7, 0.25, ROPE, 0);\n  seg(S, 60, PFY - 2, 40, 7, 0.25, ROPE, 0);\n  seg(S, 62, PFY - 2, 62, 103, 0.35, ROPE, 0);\n  seg(S, 0, PFY - 2, 0, BY, 0.35, ROPE, 0);\n  seg(S, 0, BY + 0.6, barAt(-S.rd.A)[0] + 0.4, BY + 0.6, 0.55, [190, 160, 120], 0);\n  seg(S, 1, BY + 1, 1, 97, 0.3, ROPE, 0);\n  seg(S, 4.2, BY + 1, 4.2, 97, 0.3, ROPE, 0);\n  for (let y = BY + 3; y \u003c 97; y += 3) seg(S, 1, y, 4.2, y, 0.25, ROPE, 0);\n  // The safety net, a sagging diamond mesh, dented where a flyer is in it.\n  const nt = S.net;\n  for (let x = 0; x \u003c W; x++) {\n    const dn = nt.s * exp(-(((x - nt.x) / 8) ** 2)), far = 94.5 + 1.2 * sin((PI * x) / 63) + 0.6 * dn, near = 103 + 2 * sin((PI * x) / 63) + dn;\n    for (let y = max(0, floor(far - 1)); y \u003c= min(H - 1, ceil(near + 1)); y++) {\n      const v = (y - far) / (near - far), fa = x * 0.34 + v * 3, fb = x * 0.34 - v * 3;\n      let ln = v > -0.06 && v \u003c 1.06 ? max(sm(0.3, 0.48, abs((fa % 1) - 0.5)), sm(0.3, 0.48, abs((((fb % 1) + 1) % 1) - 0.5))) : 0;\n      ln = max(ln, sm(0.9, 0.2, abs(y - far)), sm(0.9, 0.2, abs(y - near))) * 0.8;\n      const q = (y * W + x) * 3;\n      if (ln > 0) for (let j = 0; j \u003c 3; j++) F[q + j] += ([205, 196, 176][j] * LT[q + j] - F[q + j]) * ln;\n    }\n  }\n  // The fly bar on its ropes, the catcher's cradle, the catcher and the flyers.\n  const [bx, by] = barAt(S.th), c = S.cp;\n  for (const [px, py, x, y] of [[PFX, PFY, bx, by], [PCX, PCY, c.bx, c.by]]) {\n    seg(S, px - 1.2, py, x - 1.2, y, 0.28, ROPE, 0);\n    seg(S, px + 1.2, py, x + 1.2, y, 0.28, ROPE, 0);\n    seg(S, x - 1.8, y, x + 1.8, y, 0.45, BAR, 0);\n  }\n  fig(S, c, P[6]);\n  for (const f of S.fl) fig(S, f, P[f.c]);\n  // The crowd in front of it all, a dark sea, each head rimmed by the light behind it.\n  for (let i = W; i \u003c N; i++) {\n    const a = AUD[i];\n    if (a \u003c= 0) continue;\n    const q = i * 3, k = ROW[i], rim = k > ROW[i - W] ? (1 - 0.2 * k) * a : 0;\n    for (let j = 0; j \u003c 3; j++) F[q + j] += ((12 - 2.5 * k) * wc[j] - F[q + j]) * a + rim * (16 * wash * wc[j] + 60 * max(0, LT[q + j] - 0.3));\n  }\n  // Phones held up to film, and camera flashes.\n  for (const [x, y] of S.phones) if (x >= 0 && x \u003c W - 1) for (let j = 0; j \u003c 6; j++) F[(y * W + x) * 3 + j] += [70, 92, 130][j % 3];\n  for (const e of S.fx) glow(F, e.x, e.y, 2.2, [255, 250, 240], e.a * e.a * (1 - e.w));\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lights=0..1, Speed=0.2..3, Turns=1..3, Haze=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lights","min":0,"max":1,"about":"The gels in the follow spots and the sequins on the costumes: warm white and gold at 0, amber and rose, then pink and lavender, and at 1 one pink spot and one blue. The house light on the canvas turns with them."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the act runs: at 2 the fly bar swings out and back in 2.4 s and a flyer lets go every eight to eleven seconds; at 0.2 it all runs ten times slower."},{"name":"Turns","min":1,"max":3,"about":"The somersaults in the trick, one, two or three. A bigger trick swings higher and flies longer, and the house goes darker for it while every spot finds the flyer."},{"name":"Haze","min":0,"max":1,"about":"How much haze hangs under the canvas. A little shows the beams as thin shafts; turned up they swell and the whole tent glows in the gels."}],"start":[0,2,1,0.06],"measures":{"motion":0.3174,"detail":0.0396,"edges":0.2107,"complexity":1.4663,"coverage":0.506,"colour":0.1821,"drift":0.1332},"knobResponse":[0.0514,0.1017,0.0609,0.161]},{"slug":"foxfire","title":"Foxfire","family":"fungi","round":19,"note":"밤 숲 바닥 단면에서 뽕나무버섯 균사가 그루터기와 통나무, 흙 속을 기어가며 갈라지고 실을 따라 연둣빛 펄스가 흘러요. 버섯 무리가 돋았다 시들며 숨 쉬듯 빛나고 포자가 위로 떠올라요. K1 을 누르면 피어 있는 갓이 한꺼번에 포자를 뿜어요.","idea":"A night forest floor in cross-section, a broken stump and a rotting log on the leaf litter over the soil, where glowing honey fungus threads creep and branch through wood and earth with pulses of light running out along them, while clusters of little glowing mushrooms come up, breathe their light and shed spores that drift up into the dark.","buttons":"K1 tap shakes the floor: every cap that is up lets go a puff of spores at once.","code":"// ===== Patternflow pattern =====\n// Title:   Foxfire\n// Family:  fungi\n// Idea:    A night forest floor in cross-section, a broken stump and a rotting log on the leaf litter over the soil, where glowing honey fungus threads creep and branch through wood and earth with pulses of light running out along them, while clusters of little glowing mushrooms come up, breathe their light and shed spores that drift up into the dark.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the foxfire of Armillaria-rotted wood and the glowing caps of Mycena chlorophos and Panellus stipticus\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Glow=0..1, Speed=0.2..3, Spores=0..1, Damp=0..1\n//\n// Knob 1: Glow. The colour of the light, from the yellow-green of foxfire at 0 through a clear green to a cold blue-green at 1.\n// Knob 2: Speed. How fast the floor lives: at 2 a thread tip creeps about three LEDs a second, a pulse runs seven LEDs a second and a mushroom cluster comes and goes in about forty seconds; at 0.2 all of it runs ten times slower.\n// Knob 3: Spores. How hard the caps shed: at 0 a few motes rise from each cluster; turned up, the spores thicken into a lit haze that climbs past the stump into the top of the panel.\n// Knob 4: Damp. How wet the wood is; wet foxfire glows harder, so turning it up brightens the threads and the caps and lights more of the rotten wood round them.\n// Buttons: K1 tap shakes the floor: every cap that is up lets go a puff of spores at once.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n\n// What each LED of the floor is made of. Threads grow in wood, roots, litter\n// and soil, never in the air, the stones or the bark.\nconst AIR = 0;\nconst BARK = 1;\nconst WOOD = 2;\nconst LITTER = 3;\nconst SOIL = 4;\nconst STONE = 5;\nconst ROOT = 6;\nconst GROWS = [0, 0, 1, 1, 1, 0, 1];\n\n// The ground line, the stump's middle column, and the log lying beside it\n// from its broken end at LOGX out past the right edge.\nconst GROUND = 64;\nconst SX = 12;\nconst LOGX = 27;\nconst LOGY = 51;\nconst LOGR = 10.5;\n\n// Thread tips alive at once, LEDs each one creeps per second of floor time,\n// the chance per step that a tip forks, and how long a thread lives before\n// it rots away, in seconds of floor time (plus up to LIFE_J more).\nconst TIPS = 26;\nconst CREEP = 3;\nconst FORK = 0.08;\nconst LIFE = 16;\nconst LIFE_J = 8;\n// A pulse every WAVE LEDs along a thread, running at RUN LEDs a second.\nconst WAVE = 26;\nconst RUN = 7;\n// Seconds of floor time grown before the panel opens.\nconst PRE = 26;\nconst PRE_DT = 1 / 15;\n// Where fresh threads start: the stump, the log and the soil.\nconst ORIGINS = [\n  [12, 68], [9, 46], [14, 26], [11, 12], [12, 36], [34, 50], [46, 54], [58, 48], [30, 86], [50, 100], [42, 120], [10, 110],\n];\n\nconst MAXS = 900;\n// The spore haze is kept on a grid of 4 x 4 LED cells.\nconst HW = 17;\nconst HH = 33;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\n// The spores draw from their own sequence, so how many there are never\n// changes the way the threads grow.\nfunction sporeRandom(P) {\n  P.seed = (P.seed + 0x6d2b79f5) | 0;\n  let t = P.seed;\n  t = Math.imul(t ^ (t >>> 15), t | 1);\n  t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y, s) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const u = x - xi;\n  const v = y - yi;\n  const fu = u * u * (3 - 2 * u);\n  const fv = v * v * (3 - 2 * v);\n  const k = xi + s * 7919;\n  const a = hash(k, yi);\n  const b = hash(k + 1, yi);\n  const c = hash(k, yi + 1);\n  return a + (b - a) * fu + (c - a) * fv + (a - b - c + hash(k + 1, yi + 1)) * fu * fv;\n}\n\nfunction groundY(x) {\n  return GROUND - 0.5 + 1.5 * Math.sin(x * 0.17 + 0.5) + Math.sin(x * 0.41);\n}\n\n// The stump's half width at a row, flaring into its roots at the foot, and\n// the row its broken top reaches at a column.\nfunction stumpHalf(y) {\n  return 7 + 5 * smooth(GROUND - 16, GROUND + 6, y) ** 2;\n}\n\nfunction stumpTop(x) {\n  return 5 + 6 * Math.abs(Math.sin(x * 0.75 + 0.4)) + 3 * hash(x, 77) + 4 * smooth(4, 0, Math.abs(x - SX) - 4);\n}\n\nfunction logCentre(x) {\n  return LOGY + 0.05 * (x - LOGX);\n}\n\n// The glow colours Glow runs through: foxfire yellow-green, green, sea\n// green, a cold blue.\nconst HUES = [\n  [150, 255, 40],\n  [50, 255, 100],\n  [20, 235, 200],\n  [30, 150, 255],\n];\n\nfunction hueOf(k, out) {\n  const u = clamp(k, 0, 1) * (HUES.length - 1);\n  const i = Math.min(HUES.length - 2, Math.floor(u));\n  const f = u - i;\n  for (let c = 0; c \u003c 3; c++) out[c] = (HUES[i][c] * (1 - f) + HUES[i + 1][c] * f) / 255;\n}\n\n// Paints the floor once: what each LED is, its colour in the dark (kept under\n// 24) and how rotten it is there.\nfunction build(P) {\n  const { kind, base, rot } = P;\n  const put = (p, k, r, g, b) => {\n    kind[p] = k;\n    base[p * 3] = r;\n    base[p * 3 + 1] = g;\n    base[p * 3 + 2] = b;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gy = groundY(x);\n      if (y \u003c gy) {\n        // Night air under the trees, with two far trunks a shade lighter.\n        const h = y / gy;\n        const trunk = smooth(1.5, 0, Math.abs(x - 41 - 2 * Math.sin(y * 0.03)) - 2.5) + smooth(1.5, 0, Math.abs(x - 58) - 1.5);\n        const n = noise(x * 0.5, y * 0.12, 1);\n        put(p, AIR, 2 + 2 * h + 4 * trunk * n, 3 + 3 * h + 4 * trunk * n, 8 + 2 * h + 3 * trunk);\n      } else if (y \u003c gy + 8) {\n        // Leaf litter between the leaves.\n        const v = 0.5 + 0.4 * noise(x * 0.6, y * 0.6, 17);\n        put(p, LITTER, 12 * v, 8 * v, 4 * v);\n      } else {\n        // Soil: dark, mottled, darker with depth.\n        const m = 0.55 + 0.6 * noise(x * 0.35, y * 0.35, 2) - (0.3 * (y - gy)) / 64;\n        put(p, SOIL, 15 * m, 10 * m, 6 * m);\n      }\n    }\n  // Stones in the soil, lit on top.\n  for (const [cx, cy, rx, ry] of [[37, 84, 5, 3], [53, 101, 6, 4], [20, 104, 4, 3], [61, 77, 3, 2.5], [5, 84, 3, 2], [33, 118, 5, 3.5], [58, 122, 4, 3]]) {\n    for (let y = Math.floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const e = ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2;\n        if (e > 1) continue;\n        const top = 1 - (y - cy + ry) / (2 * ry);\n        const v = 8 + 9 * top * top;\n        put(y * W + x, STONE, v, v, v + 2);\n      }\n  }\n  // Roots from the foot of the stump down into the soil.\n  for (const [x0, a0, len, w0] of [[4, 2.2, 40, 2.4], [10, 1.75, 52, 2.6], [17, 1.25, 50, 2.4], [22, 0.6, 36, 1.8], [1, 2.6, 22, 1.6]]) {\n    let x = x0;\n    let y = GROUND + 4;\n    let a = a0;\n    for (let s = 0; s \u003c len; s++) {\n      a += 0.12 * Math.sin(s * 0.35 + x0);\n      x += Math.cos(a);\n      y += Math.sin(a) * 0.9 + 0.15;\n      const r = w0 * (1 - s / (len + 6));\n      for (let j = Math.floor(y - r); j \u003c= y + r; j++)\n        for (let i = Math.floor(x - r); i \u003c= x + r; i++) {\n          if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || (i - x) ** 2 + (j - y) ** 2 > r * r) continue;\n          const q = j * W + i;\n          if (kind[q] !== SOIL) continue;\n          const v = 0.8 + 0.3 * noise(i * 0.8, j * 0.3, 4);\n          put(q, ROOT, 18 * v, 11 * v, 7 * v);\n          // Stretches of root sheathed in fungus glow faintly.\n          rot[q] = 0.75 * noise(s * 0.15, x0, 25);\n        }\n    }\n  }\n  // The log, lying with its broken end to the left: bark top and bottom, the\n  // rotten wood bared along its middle, the end face showing its rings.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = LOGX - 5; x \u003c W; x++) {\n      const p = y * W + x;\n      const v = (y - logCentre(x)) / LOGR;\n      if (Math.abs(v) > 1) continue;\n      const face = ((x - LOGX) / 4) ** 2 + v * v;\n      if (x \u003c LOGX && face > 1) continue;\n      const round = Math.sqrt(1 - v * v);\n      if (face \u003c= 1) {\n        // End face: rings round the heart, the heart rotted soft.\n        const ring = Math.sqrt(face) * 6;\n        const line = Math.abs(ring - Math.round(ring)) \u003c 0.18 ? 0.6 : 1;\n        const s = (0.7 + 0.3 * noise(x * 0.9, y * 0.5, 5)) * line;\n        put(p, WOOD, 20 * s, 15 * s, 9 * s);\n        rot[p] = (0.75 + 0.25 * (1 - Math.sqrt(face))) * (line \u003c 1 ? 0.5 : 1);\n        continue;\n      }\n      const n = noise(x * 0.18, y * 0.5, 6);\n      const barkEdge = 0.58 + 0.3 * n;\n      if (Math.abs(v) > barkEdge) {\n        // Bark in long ridges along the log, moss on its top.\n        const ridge = 0.6 + 0.4 * Math.abs(Math.sin(y * 1.7 + 2 * noise(x * 0.25, y, 7)));\n        const s = ridge * (0.45 + 0.55 * round);\n        const moss = v \u003c 0 ? smooth(0.5, 0.8, noise(x * 0.3, y * 0.6, 8)) * smooth(-0.6, -0.95, v) : 0;\n        put(p, BARK, (14 - 8 * moss) * s, (10 + 6 * moss) * s, (7 - 3 * moss) * s);\n      } else {\n        // Bared wood with its grain along the log and a few cracks across it.\n        const grain = 0.75 + 0.25 * Math.sin(y * 2.3 + 3 * noise(x * 0.1, y * 0.3, 9));\n        const crack = smooth(0.08, 0, Math.abs(noise(x * 0.22, 3, 10) - 0.5)) * 0.6;\n        const s = grain * (1 - crack) * (0.55 + 0.45 * round);\n        put(p, WOOD, 21 * s, 16 * s, 9 * s);\n        rot[p] = smooth(0.35, 0.75, noise(x * 0.22, y * 0.35, 11)) * (1 - crack);\n      }\n    }\n  // The stump: bark down both sides and in patches, the rest bared and rotten.\n  for (let y = 0; y \u003c H; y++) {\n    const half = stumpHalf(y);\n    for (let x = 0; x \u003c W; x++) {\n      const dx = Math.abs(x - SX);\n      if (dx > half || y \u003c stumpTop(x) || y > groundY(x) + 1) continue;\n      const p = y * W + x;\n      const edge = half - dx;\n      const round = Math.sqrt(1 - (dx / (half + 0.5)) ** 2);\n      const patch = noise(x * 0.3, y * 0.09, 12);\n      if (edge \u003c 1.6 + 1.2 * noise(1, y * 0.2, 13) || patch > 0.8) {\n        const fissure = 0.55 + 0.45 * Math.abs(Math.sin(x * 1.9 + 2 * noise(x, y * 0.15, 14)));\n        const s = fissure * (0.5 + 0.5 * round);\n        put(p, BARK, 15 * s, 10 * s, 7 * s);\n      } else {\n        const grain = 0.75 + 0.25 * Math.sin(x * 2.1 + 3 * noise(x * 0.4, y * 0.08, 15));\n        const s = grain * (0.55 + 0.45 * round);\n        put(p, WOOD, 20 * s, 15 * s, 9 * s);\n        rot[p] = smooth(0.28, 0.68, noise(x * 0.32, y * 0.11, 16)) * (0.8 + 0.2 * smooth(20, 10, y));\n      }\n    }\n  }\n  // Fallen leaves over the soil and round the foot of the log and the stump,\n  // oak brown, beech copper, a few still olive.\n  const LEAVES = [[19, 10, 4], [15, 12, 4], [21, 13, 6], [11, 8, 4], [17, 9, 3], [13, 13, 6]];\n  for (let i = 0; i \u003c 170; i++) {\n    const x0 = hash(i, 19) * W;\n    const gy = groundY(x0);\n    const y0 = gy - 1 + hash(i, 20) * 9;\n    const a = hash(i, 21) * 3.14;\n    const rx = 1.6 + 1.6 * hash(i, 22);\n    const ry = 0.7 + 0.6 * hash(i, 23);\n    const col = LEAVES[Math.floor(hash(i, 24) * LEAVES.length)];\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    for (let y = Math.floor(y0 - rx); y \u003c= y0 + rx; y++)\n      for (let x = Math.floor(x0 - rx); x \u003c= x0 + rx; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || y \u003c groundY(x) - 1.5) continue;\n        const u = ((x - x0) * ca + (y - y0) * sa) / rx;\n        const w = (-(x - x0) * sa + (y - y0) * ca) / ry;\n        if (u * u + w * w > 1) continue;\n        const s = (Math.abs(w) \u003c 0.3 ? 0.7 : 1) * (0.8 + 0.2 * hash(x, y));\n        put(y * W + x, LITTER, col[0] * s, col[1] * s, col[2] * s);\n        // One leaf in five is grown through and glows, the way leaf litter\n        // full of Mycena does.\n        rot[y * W + x] = hash(i, 26) \u003c 0.2 ? 0.55 + 0.3 * hash(i, 27) : 0;\n      }\n  }\n  // Every LED of the dark gets its own grain, channel by channel, and nothing\n  // in the dark goes over 23.\n  for (let p = 0; p \u003c N; p++) {\n    let m = 0;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = Math.max(0, base[p * 3 + c] + 7 * (hash(p, 30 + c) - 0.5));\n      base[p * 3 + c] = v;\n      if (v > m) m = v;\n    }\n    if (m > 23) for (let c = 0; c \u003c 3; c++) base[p * 3 + c] *= 23 / m;\n  }\n}\n\n// Mushroom clusters: Mycena standing up on stems, or Panellus shelves on the\n// side of the wood (side -1 or 1). Each comes up, glows and goes.\nfunction makeSites() {\n  const sites = [];\n  const up = (x, y, n, tall) => sites.push({ x, y, side: 0, n, tall });\n  const shelf = (x, y, side, n) => sites.push({ x, y, side, n, tall: 0 });\n  up(11, Math.ceil(stumpTop(11)), 6, 7);\n  up(5, Math.ceil(stumpTop(5)), 3, 4);\n  shelf(SX + 8, 28, 1, 3);\n  shelf(SX - 8, 42, -1, 3);\n  up(39, Math.floor(logCentre(39) - LOGR * 0.92), 5, 6);\n  up(55, Math.floor(logCentre(55) - LOGR * 0.92), 4, 5);\n  shelf(LOGX - 5, 49, -1, 2);\n  up(31, Math.floor(groundY(31)), 3, 3);\n  up(47, Math.floor(groundY(47)) + 1, 3, 3);\n  up(61, Math.floor(groundY(61)), 2, 3);\n  for (let i = 0; i \u003c sites.length; i++) {\n    const s = sites[i];\n    s.period = 34 + 14 * hash(i, 40);\n    s.offset = s.period * hash(i, 41);\n    s.beat = 3.2 + 2.4 * hash(i, 42);\n    s.phase = 6.28 * hash(i, 43);\n    s.caps = [];\n    for (let j = 0; j \u003c s.n; j++) {\n      if (s.side === 0) {\n        // Neighbours stand at different heights, so their caps do not run\n        // together into one plate.\n        const bx = (j - (s.n - 1) / 2) * 2.2 + 0.6 * (hash(i * 9 + j, 44) - 0.5);\n        const h = s.tall * (j % 2 ? 0.5 : 1) * (0.8 + 0.2 * hash(i * 9 + j, 45));\n        s.caps.push({ bx, h, lean: bx * 0.1 + 0.2 * (hash(i * 9 + j, 46) - 0.5), r: j % 2 || hash(i * 9 + j, 47) \u003c 0.5 ? 1 : 2 });\n      } else {\n        s.caps.push({ by: j * 4 - (s.n - 1) * 2, r: 3 + Math.round(2 * hash(i * 9 + j, 48)) });\n      }\n    }\n    s.life = 0;\n    s.glow = 0;\n  }\n  return sites;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.kind = new Uint8Array(N);\n  P.base = new Float32Array(N * 3);\n  P.rot = new Float32Array(N);\n  build(P);\n  P.occ = new Uint8Array(N);\n  P.dist = new Float32Array(N);\n  P.born = new Float32Array(N);\n  P.dies = new Float32Array(N);\n  P.tips = [];\n  P.sites = makeSites();\n  // Each stem stands on whatever is under it.\n  for (const s of P.sites)\n    for (const c of s.caps) {\n      if (s.side !== 0) continue;\n      const x = Math.round(s.x + c.bx);\n      let y = s.y - 8;\n      while (y \u003c s.y + 4 && (x \u003c 0 || x >= W || P.kind[(y + 1) * W + x] === AIR)) y++;\n      c.foot = y;\n    }\n  P.spores = [];\n  P.seed = Math.floor(Math.random() * 4294967296) | 0;\n  P.haze = new Float32Array(HW * HH);\n  P.G = new Float32Array(N);\n  P.col = new Float32Array(3);\n  Object.assign(P, { T: 0, sweep: 0, owed: 0, started: false, damp: 0.06, spore: 0, hue: -1 });\n}\n\nfunction addTip(P, x, y, a, d) {\n  if (P.tips.length \u003c TIPS * 2) P.tips.push({ x, y, a, d, acc: Math.random(), rate: CREEP * (0.6 + 0.8 * Math.random()), len: 0, last: -1 });\n}\n\n// A new tip, most often forking off a living thread, sometimes from an origin.\nfunction sprout(P) {\n  if (Math.random() \u003c 0.55) {\n    for (let k = 0; k \u003c 40; k++) {\n      const p = Math.floor(Math.random() * N);\n      if (P.occ[p] && P.dies[p] - P.T > 6) {\n        addTip(P, p % W, (p / W) | 0, Math.random() * 6.283, P.dist[p]);\n        return;\n      }\n    }\n  }\n  const o = ORIGINS[Math.floor(Math.random() * ORIGINS.length)];\n  addTip(P, o[0] + 2 * (Math.random() - 0.5), o[1] + 2 * (Math.random() - 0.5), Math.random() * 6.283, 0);\n}\n\n// One LED of creep for a tip. Returns false when the tip stops.\nfunction creep(P, t) {\n  const { kind, occ } = P;\n  let a = t.a + 0.5 * (Math.random() - 0.5);\n  // In the log the threads follow the grain along it; in the stump, up and\n  // down it.\n  if (kind[Math.round(t.y) * W + Math.round(t.x)] === WOOD) {\n    if (t.x > LOGX - 5 && t.y > LOGY - 14 && t.y \u003c GROUND) a += 0.12 * Math.sin(-2 * a);\n    else if (t.x \u003c SX + 12) a += 0.12 * Math.sin(2 * (Math.PI / 2 - a));\n  }\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const nx = t.x + Math.cos(a);\n    const ny = t.y + Math.sin(a);\n    const ix = Math.round(nx);\n    const iy = Math.round(ny);\n    if (ix >= 0 && ix \u003c W && iy >= 0 && iy \u003c H && GROWS[kind[iy * W + ix]]) {\n      const p = iy * W + ix;\n      t.x = nx;\n      t.y = ny;\n      t.a = a;\n      if (p === t.last) return true;\n      // Two threads that meet fuse, and the one arriving stops.\n      if (occ[p] && P.dies[p] - P.T > 2 && Math.random() \u003c 0.6) return false;\n      t.last = p;\n      occ[p] = 1;\n      P.dist[p] = ++t.d;\n      P.born[p] = P.T;\n      // Threads in the soil and the litter rot sooner than those in the wood.\n      P.dies[p] = P.T + (LIFE + LIFE_J * Math.random()) * (kind[p] === WOOD ? 1 : 0.6);\n      if (Math.random() \u003c (kind[p] === SOIL ? FORK * 0.5 : FORK)) addTip(P, nx, ny, a + (Math.random() \u003c 0.5 ? -1 : 1) * (0.6 + 0.6 * Math.random()), t.d);\n      return ++t.len \u003c 70;\n    }\n    a += (Math.random() \u003c 0.5 ? -1 : 1) * (0.9 + 1.2 * Math.random());\n  }\n  return false;\n}\n\n// Spores leave the caps of the clusters that are up.\nfunction shed(P, count) {\n  const up = P.sites.filter((s) => s.life > 0.6);\n  for (let n = 0; n \u003c count && up.length && P.spores.length \u003c MAXS; n++) {\n    const s = up[Math.floor(sporeRandom(P) * up.length)];\n    const c = s.caps[Math.floor(sporeRandom(P) * s.caps.length)];\n    const side = s.side === 0;\n    P.spores.push({\n      x: side ? s.x + c.bx + c.lean * c.h + (sporeRandom(P) - 0.5) * 2 * c.r : s.x + s.side * c.r * sporeRandom(P),\n      y: side ? c.foot - c.h - 1 : s.y + c.by + 1,\n      v: 1.6 + 2.6 * sporeRandom(P),\n      age: 0,\n      life: 9 + 9 * sporeRandom(P),\n      ph: 6.28 * sporeRandom(P),\n      w: 0,\n    });\n  }\n}\n\nfunction world(P, wdt, spores) {\n  P.T += wdt;\n  const T = P.T;\n  // Threads creep.\n  while (P.tips.length \u003c TIPS) sprout(P);\n  P.tips = P.tips.filter((t) => {\n    for (t.acc += wdt * t.rate; t.acc >= 1; t.acc--) if (!creep(P, t)) return false;\n    return true;\n  });\n  // Old threads rot away, a few times a second.\n  P.sweep += wdt;\n  if (P.sweep > 0.2) {\n    P.sweep = 0;\n    const { occ, dies } = P;\n    for (let p = 0; p \u003c N; p++) if (occ[p] && dies[p] \u003c T) occ[p] = 0;\n  }\n  // Each cluster's life: up over the first eighth, glowing, then withering.\n  for (const s of P.sites) {\n    const u = ((T + s.offset) % s.period) / s.period;\n    s.life = u \u003c 0.12 ? smooth(0, 0.12, u) : u \u003c 0.74 ? 1 : 1 - smooth(0.74, 0.88, u);\n    s.glow = s.life * (0.62 + 0.38 * Math.sin((T * 6.283) / s.beat + s.phase));\n  }\n  // Spores rise, sway and fade.\n  P.owed += wdt * (6 + 75 * spores);\n  const n = Math.floor(P.owed);\n  P.owed -= n;\n  shed(P, n);\n  P.spores = P.spores.filter((m) => {\n    m.age += wdt;\n    m.y -= m.v * wdt;\n    m.x += wdt * (1.1 * Math.sin(T * 0.5 + m.ph) + 0.3 * Math.sin(m.y * 0.1));\n    m.w = Math.min(1, m.age / 1.5) * clamp((m.life - m.age) / 3, 0, 1);\n    return m.age \u003c m.life && m.y > -2 && m.x > -2 && m.x \u003c W + 1;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const speed = clamp(k[1], 0.1, 4) / 2;\n  const spores = clamp(k[2], 0, 1);\n  P.damp = clamp(k[3], 0, 1);\n  P.spore = spores;\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    hueOf(k[0], P.col);\n  }\n  if (!P.started) {\n    P.started = true;\n    for (let t = 0; t \u003c PRE; t += PRE_DT) world(P, PRE_DT, spores);\n  }\n  if (input.btnPressed && input.btnPressed[0]) shed(P, 160);\n  world(P, dt * speed, spores);\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.G) return;\n  const { G, kind, rot, occ, dist, born, dies, base, haze } = P;\n  const T = P.T;\n  const damp = P.damp;\n  const gain = 0.8 + 0.7 * damp;\n  // Rotten wood glows where it is wet enough, breathing slowly.\n  const edge = 0.45 - 0.3 * damp;\n  for (let p = 0; p \u003c N; p++) {\n    const r = rot[p];\n    if (r \u003c= edge) {\n      G[p] = 0;\n      continue;\n    }\n    const x = p % W;\n    const y = (p / W) | 0;\n    const breath = 0.55 + 0.45 * Math.sin(x * 0.16 - T * 0.6 + 0.8 * Math.sin(y * 0.07 + T * 0.3));\n    G[p] = 0.5 * smooth(edge, edge + 0.45, r) * breath;\n  }\n  // The threads: dim along their length, a pulse running out along each, and\n  // the growing tip bright.\n  const kw = 6.283 / WAVE;\n  const om = kw * RUN;\n  for (let p = 0; p \u003c N; p++) {\n    if (!occ[p]) continue;\n    const age = T - born[p];\n    const left = dies[p] - T;\n    const fade = Math.min(1, age / 0.5) * clamp(left / 4, 0, 1);\n    let c = 0.5 + 0.5 * Math.cos(dist[p] * kw - T * om);\n    c = c * c * c;\n    const soil = kind[p] === SOIL || kind[p] === LITTER ? 0.8 : 1;\n    G[p] += fade * soil * (0.2 + 0.55 * c) + (age \u003c 1 ? 0.5 * (1 - age) : 0);\n  }\n  for (const t of P.tips) G[Math.round(t.y) * W + Math.round(t.x)] += 0.55;\n  // The spore haze: each spore counts into the grid, which is spread back\n  // over the LEDs smoothly.\n  haze.fill(0);\n  for (const m of P.spores) {\n    const fx = m.x / 4;\n    const fy = m.y / 4;\n    const ix = Math.floor(fx);\n    const iy = Math.floor(fy);\n    if (ix \u003c 0 || iy \u003c 0 || ix >= HW - 1 || iy >= HH - 1) continue;\n    const u = fx - ix;\n    const v = fy - iy;\n    const w = m.w;\n    const q = iy * HW + ix;\n    haze[q] += w * (1 - u) * (1 - v);\n    haze[q + 1] += w * u * (1 - v);\n    haze[q + HW] += w * (1 - u) * v;\n    haze[q + HW + 1] += w * u * v;\n  }\n  const hk = 0.045 + 0.035 * P.spore;\n  for (let y = 0; y \u003c H; y++) {\n    const fy = y / 4;\n    const iy = Math.min(HH - 2, Math.floor(fy));\n    const v = fy - iy;\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / 4;\n      const ix = Math.min(HW - 2, Math.floor(fx));\n      const u = fx - ix;\n      const q = iy * HW + ix;\n      const d = (haze[q] * (1 - u) + haze[q + 1] * u) * (1 - v) + (haze[q + HW] * (1 - u) + haze[q + HW + 1] * u) * v;\n      if (d > 0) G[y * W + x] += hk * Math.min(d, 5);\n    }\n  }\n  // Each spore itself, a mote caught in the glow.\n  for (const m of P.spores) {\n    const x = Math.round(m.x);\n    const y = Math.round(m.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) G[y * W + x] += 0.3 * m.w * (0.6 + 0.4 * Math.sin(T * 3 + m.ph * 5));\n  }\n  // The clusters: a soft halo on the wood round them, then stems and caps.\n  for (const s of P.sites) {\n    if (s.life \u003c= 0) continue;\n    const g = s.glow;\n    const cy = s.side === 0 ? s.y - s.tall * 0.6 : s.y;\n    const cx = s.x + s.side * 2;\n    for (let y = Math.max(0, Math.floor(cy - 9)); y \u003c= Math.min(H - 1, cy + 9); y++)\n      for (let x = Math.max(0, Math.floor(cx - 9)); x \u003c= Math.min(W - 1, cx + 9); x++) {\n        const d2 = (x - cx) ** 2 + (y - cy) ** 2;\n        if (d2 \u003c 81) G[y * W + x] += 0.2 * g * (1 - d2 / 81) ** 2;\n      }\n    for (const c of s.caps) {\n      if (s.side === 0) {\n        const h = c.h * s.life;\n        for (let j = 0; j \u003c= h; j++) {\n          const x = Math.round(s.x + c.bx + c.lean * j);\n          const y = c.foot - j;\n          if (x >= 0 && x \u003c W && y >= 0) G[y * W + x] += 0.32 * g;\n        }\n        const tx = s.x + c.bx + c.lean * h;\n        const ty = c.foot - Math.round(h) - 1;\n        const r = c.r * (0.4 + 0.6 * s.life);\n        // A Mycena cap is a little bell: one LED at the top, wider at the rim.\n        for (let row = 0; row \u003c= c.r; row++) {\n          const half = row === c.r ? r + 0.4 : (r * row) / c.r;\n          const y = ty - c.r + row;\n          if (y \u003c 0 || y >= H) continue;\n          for (let x = Math.round(tx - half); x \u003c= Math.round(tx + half); x++)\n            if (x >= 0 && x \u003c W) G[y * W + x] += g * (row === c.r ? 1.15 : 0.85);\n        }\n      } else {\n        // A Panellus shelf: a thin bracket out of the wood, its top dim and\n        // the gills under it bright, the rim bent down.\n        const r = Math.round(c.r * (0.4 + 0.6 * s.life));\n        const y0 = Math.round(s.y + c.by);\n        for (let i = 0; i \u003c= r; i++) {\n          const x = Math.round(s.x + s.side * i);\n          if (x \u003c 0 || x >= W) continue;\n          if (i \u003c r - 1 && y0 > 0) G[(y0 - 1) * W + x] += 0.45 * g;\n          if (y0 >= 0 && y0 \u003c H) G[y0 * W + x] += 0.75 * g;\n          if (i > 0 && i \u003c r && y0 + 1 \u003c H) G[(y0 + 1) * W + x] += 1.25 * g;\n        }\n      }\n    }\n  }\n  // Light the floor: the dark as it was painted, plus the glow in the Glow\n  // colour, running toward white where it is brightest.\n  const C = P.col;\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    const g = G[p] * gain;\n    let r = base[q];\n    let gg = base[q + 1];\n    let b = base[q + 2];\n    if (g > 0) {\n      const v = g * 255;\n      const w = g > 0.7 ? (g - 0.7) * 170 : 0;\n      r += v * C[0] + w;\n      gg += v * C[1] + w;\n      b += v * C[2] + w;\n    }\n    display.setPixel(p % W, (p / W) | 0, byte(r), byte(gg), byte(b));\n  }\n}\n","layer":{"id":"layer-foxfire","type":"code","name":"foxfire","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Foxfire\n// Family:  fungi\n// Idea:    A night forest floor in cross-section, a broken stump and a rotting log on the leaf litter over the soil, where glowing honey fungus threads creep and branch through wood and earth with pulses of light running out along them, while clusters of little glowing mushrooms come up, breathe their light and shed spores that drift up into the dark.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the foxfire of Armillaria-rotted wood and the glowing caps of Mycena chlorophos and Panellus stipticus\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Glow=0..1, Speed=0.2..3, Spores=0..1, Damp=0..1\n//\n// Knob 1: Glow. The colour of the light, from the yellow-green of foxfire at 0 through a clear green to a cold blue-green at 1.\n// Knob 2: Speed. How fast the floor lives: at 2 a thread tip creeps about three LEDs a second, a pulse runs seven LEDs a second and a mushroom cluster comes and goes in about forty seconds; at 0.2 all of it runs ten times slower.\n// Knob 3: Spores. How hard the caps shed: at 0 a few motes rise from each cluster; turned up, the spores thicken into a lit haze that climbs past the stump into the top of the panel.\n// Knob 4: Damp. How wet the wood is; wet foxfire glows harder, so turning it up brightens the threads and the caps and lights more of the rotten wood round them.\n// Buttons: K1 tap shakes the floor: every cap that is up lets go a puff of spores at once.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n\n// What each LED of the floor is made of. Threads grow in wood, roots, litter\n// and soil, never in the air, the stones or the bark.\nconst AIR = 0;\nconst BARK = 1;\nconst WOOD = 2;\nconst LITTER = 3;\nconst SOIL = 4;\nconst STONE = 5;\nconst ROOT = 6;\nconst GROWS = [0, 0, 1, 1, 1, 0, 1];\n\n// The ground line, the stump's middle column, and the log lying beside it\n// from its broken end at LOGX out past the right edge.\nconst GROUND = 64;\nconst SX = 12;\nconst LOGX = 27;\nconst LOGY = 51;\nconst LOGR = 10.5;\n\n// Thread tips alive at once, LEDs each one creeps per second of floor time,\n// the chance per step that a tip forks, and how long a thread lives before\n// it rots away, in seconds of floor time (plus up to LIFE_J more).\nconst TIPS = 26;\nconst CREEP = 3;\nconst FORK = 0.08;\nconst LIFE = 16;\nconst LIFE_J = 8;\n// A pulse every WAVE LEDs along a thread, running at RUN LEDs a second.\nconst WAVE = 26;\nconst RUN = 7;\n// Seconds of floor time grown before the panel opens.\nconst PRE = 26;\nconst PRE_DT = 1 / 15;\n// Where fresh threads start: the stump, the log and the soil.\nconst ORIGINS = [\n  [12, 68], [9, 46], [14, 26], [11, 12], [12, 36], [34, 50], [46, 54], [58, 48], [30, 86], [50, 100], [42, 120], [10, 110],\n];\n\nconst MAXS = 900;\n// The spore haze is kept on a grid of 4 x 4 LED cells.\nconst HW = 17;\nconst HH = 33;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\n// The spores draw from their own sequence, so how many there are never\n// changes the way the threads grow.\nfunction sporeRandom(P) {\n  P.seed = (P.seed + 0x6d2b79f5) | 0;\n  let t = P.seed;\n  t = Math.imul(t ^ (t >>> 15), t | 1);\n  t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y, s) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const u = x - xi;\n  const v = y - yi;\n  const fu = u * u * (3 - 2 * u);\n  const fv = v * v * (3 - 2 * v);\n  const k = xi + s * 7919;\n  const a = hash(k, yi);\n  const b = hash(k + 1, yi);\n  const c = hash(k, yi + 1);\n  return a + (b - a) * fu + (c - a) * fv + (a - b - c + hash(k + 1, yi + 1)) * fu * fv;\n}\n\nfunction groundY(x) {\n  return GROUND - 0.5 + 1.5 * Math.sin(x * 0.17 + 0.5) + Math.sin(x * 0.41);\n}\n\n// The stump's half width at a row, flaring into its roots at the foot, and\n// the row its broken top reaches at a column.\nfunction stumpHalf(y) {\n  return 7 + 5 * smooth(GROUND - 16, GROUND + 6, y) ** 2;\n}\n\nfunction stumpTop(x) {\n  return 5 + 6 * Math.abs(Math.sin(x * 0.75 + 0.4)) + 3 * hash(x, 77) + 4 * smooth(4, 0, Math.abs(x - SX) - 4);\n}\n\nfunction logCentre(x) {\n  return LOGY + 0.05 * (x - LOGX);\n}\n\n// The glow colours Glow runs through: foxfire yellow-green, green, sea\n// green, a cold blue.\nconst HUES = [\n  [150, 255, 40],\n  [50, 255, 100],\n  [20, 235, 200],\n  [30, 150, 255],\n];\n\nfunction hueOf(k, out) {\n  const u = clamp(k, 0, 1) * (HUES.length - 1);\n  const i = Math.min(HUES.length - 2, Math.floor(u));\n  const f = u - i;\n  for (let c = 0; c \u003c 3; c++) out[c] = (HUES[i][c] * (1 - f) + HUES[i + 1][c] * f) / 255;\n}\n\n// Paints the floor once: what each LED is, its colour in the dark (kept under\n// 24) and how rotten it is there.\nfunction build(P) {\n  const { kind, base, rot } = P;\n  const put = (p, k, r, g, b) => {\n    kind[p] = k;\n    base[p * 3] = r;\n    base[p * 3 + 1] = g;\n    base[p * 3 + 2] = b;\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const gy = groundY(x);\n      if (y \u003c gy) {\n        // Night air under the trees, with two far trunks a shade lighter.\n        const h = y / gy;\n        const trunk = smooth(1.5, 0, Math.abs(x - 41 - 2 * Math.sin(y * 0.03)) - 2.5) + smooth(1.5, 0, Math.abs(x - 58) - 1.5);\n        const n = noise(x * 0.5, y * 0.12, 1);\n        put(p, AIR, 2 + 2 * h + 4 * trunk * n, 3 + 3 * h + 4 * trunk * n, 8 + 2 * h + 3 * trunk);\n      } else if (y \u003c gy + 8) {\n        // Leaf litter between the leaves.\n        const v = 0.5 + 0.4 * noise(x * 0.6, y * 0.6, 17);\n        put(p, LITTER, 12 * v, 8 * v, 4 * v);\n      } else {\n        // Soil: dark, mottled, darker with depth.\n        const m = 0.55 + 0.6 * noise(x * 0.35, y * 0.35, 2) - (0.3 * (y - gy)) / 64;\n        put(p, SOIL, 15 * m, 10 * m, 6 * m);\n      }\n    }\n  // Stones in the soil, lit on top.\n  for (const [cx, cy, rx, ry] of [[37, 84, 5, 3], [53, 101, 6, 4], [20, 104, 4, 3], [61, 77, 3, 2.5], [5, 84, 3, 2], [33, 118, 5, 3.5], [58, 122, 4, 3]]) {\n    for (let y = Math.floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const e = ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2;\n        if (e > 1) continue;\n        const top = 1 - (y - cy + ry) / (2 * ry);\n        const v = 8 + 9 * top * top;\n        put(y * W + x, STONE, v, v, v + 2);\n      }\n  }\n  // Roots from the foot of the stump down into the soil.\n  for (const [x0, a0, len, w0] of [[4, 2.2, 40, 2.4], [10, 1.75, 52, 2.6], [17, 1.25, 50, 2.4], [22, 0.6, 36, 1.8], [1, 2.6, 22, 1.6]]) {\n    let x = x0;\n    let y = GROUND + 4;\n    let a = a0;\n    for (let s = 0; s \u003c len; s++) {\n      a += 0.12 * Math.sin(s * 0.35 + x0);\n      x += Math.cos(a);\n      y += Math.sin(a) * 0.9 + 0.15;\n      const r = w0 * (1 - s / (len + 6));\n      for (let j = Math.floor(y - r); j \u003c= y + r; j++)\n        for (let i = Math.floor(x - r); i \u003c= x + r; i++) {\n          if (i \u003c 0 || i >= W || j \u003c 0 || j >= H || (i - x) ** 2 + (j - y) ** 2 > r * r) continue;\n          const q = j * W + i;\n          if (kind[q] !== SOIL) continue;\n          const v = 0.8 + 0.3 * noise(i * 0.8, j * 0.3, 4);\n          put(q, ROOT, 18 * v, 11 * v, 7 * v);\n          // Stretches of root sheathed in fungus glow faintly.\n          rot[q] = 0.75 * noise(s * 0.15, x0, 25);\n        }\n    }\n  }\n  // The log, lying with its broken end to the left: bark top and bottom, the\n  // rotten wood bared along its middle, the end face showing its rings.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = LOGX - 5; x \u003c W; x++) {\n      const p = y * W + x;\n      const v = (y - logCentre(x)) / LOGR;\n      if (Math.abs(v) > 1) continue;\n      const face = ((x - LOGX) / 4) ** 2 + v * v;\n      if (x \u003c LOGX && face > 1) continue;\n      const round = Math.sqrt(1 - v * v);\n      if (face \u003c= 1) {\n        // End face: rings round the heart, the heart rotted soft.\n        const ring = Math.sqrt(face) * 6;\n        const line = Math.abs(ring - Math.round(ring)) \u003c 0.18 ? 0.6 : 1;\n        const s = (0.7 + 0.3 * noise(x * 0.9, y * 0.5, 5)) * line;\n        put(p, WOOD, 20 * s, 15 * s, 9 * s);\n        rot[p] = (0.75 + 0.25 * (1 - Math.sqrt(face))) * (line \u003c 1 ? 0.5 : 1);\n        continue;\n      }\n      const n = noise(x * 0.18, y * 0.5, 6);\n      const barkEdge = 0.58 + 0.3 * n;\n      if (Math.abs(v) > barkEdge) {\n        // Bark in long ridges along the log, moss on its top.\n        const ridge = 0.6 + 0.4 * Math.abs(Math.sin(y * 1.7 + 2 * noise(x * 0.25, y, 7)));\n        const s = ridge * (0.45 + 0.55 * round);\n        const moss = v \u003c 0 ? smooth(0.5, 0.8, noise(x * 0.3, y * 0.6, 8)) * smooth(-0.6, -0.95, v) : 0;\n        put(p, BARK, (14 - 8 * moss) * s, (10 + 6 * moss) * s, (7 - 3 * moss) * s);\n      } else {\n        // Bared wood with its grain along the log and a few cracks across it.\n        const grain = 0.75 + 0.25 * Math.sin(y * 2.3 + 3 * noise(x * 0.1, y * 0.3, 9));\n        const crack = smooth(0.08, 0, Math.abs(noise(x * 0.22, 3, 10) - 0.5)) * 0.6;\n        const s = grain * (1 - crack) * (0.55 + 0.45 * round);\n        put(p, WOOD, 21 * s, 16 * s, 9 * s);\n        rot[p] = smooth(0.35, 0.75, noise(x * 0.22, y * 0.35, 11)) * (1 - crack);\n      }\n    }\n  // The stump: bark down both sides and in patches, the rest bared and rotten.\n  for (let y = 0; y \u003c H; y++) {\n    const half = stumpHalf(y);\n    for (let x = 0; x \u003c W; x++) {\n      const dx = Math.abs(x - SX);\n      if (dx > half || y \u003c stumpTop(x) || y > groundY(x) + 1) continue;\n      const p = y * W + x;\n      const edge = half - dx;\n      const round = Math.sqrt(1 - (dx / (half + 0.5)) ** 2);\n      const patch = noise(x * 0.3, y * 0.09, 12);\n      if (edge \u003c 1.6 + 1.2 * noise(1, y * 0.2, 13) || patch > 0.8) {\n        const fissure = 0.55 + 0.45 * Math.abs(Math.sin(x * 1.9 + 2 * noise(x, y * 0.15, 14)));\n        const s = fissure * (0.5 + 0.5 * round);\n        put(p, BARK, 15 * s, 10 * s, 7 * s);\n      } else {\n        const grain = 0.75 + 0.25 * Math.sin(x * 2.1 + 3 * noise(x * 0.4, y * 0.08, 15));\n        const s = grain * (0.55 + 0.45 * round);\n        put(p, WOOD, 20 * s, 15 * s, 9 * s);\n        rot[p] = smooth(0.28, 0.68, noise(x * 0.32, y * 0.11, 16)) * (0.8 + 0.2 * smooth(20, 10, y));\n      }\n    }\n  }\n  // Fallen leaves over the soil and round the foot of the log and the stump,\n  // oak brown, beech copper, a few still olive.\n  const LEAVES = [[19, 10, 4], [15, 12, 4], [21, 13, 6], [11, 8, 4], [17, 9, 3], [13, 13, 6]];\n  for (let i = 0; i \u003c 170; i++) {\n    const x0 = hash(i, 19) * W;\n    const gy = groundY(x0);\n    const y0 = gy - 1 + hash(i, 20) * 9;\n    const a = hash(i, 21) * 3.14;\n    const rx = 1.6 + 1.6 * hash(i, 22);\n    const ry = 0.7 + 0.6 * hash(i, 23);\n    const col = LEAVES[Math.floor(hash(i, 24) * LEAVES.length)];\n    const ca = Math.cos(a);\n    const sa = Math.sin(a);\n    for (let y = Math.floor(y0 - rx); y \u003c= y0 + rx; y++)\n      for (let x = Math.floor(x0 - rx); x \u003c= x0 + rx; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || y \u003c groundY(x) - 1.5) continue;\n        const u = ((x - x0) * ca + (y - y0) * sa) / rx;\n        const w = (-(x - x0) * sa + (y - y0) * ca) / ry;\n        if (u * u + w * w > 1) continue;\n        const s = (Math.abs(w) \u003c 0.3 ? 0.7 : 1) * (0.8 + 0.2 * hash(x, y));\n        put(y * W + x, LITTER, col[0] * s, col[1] * s, col[2] * s);\n        // One leaf in five is grown through and glows, the way leaf litter\n        // full of Mycena does.\n        rot[y * W + x] = hash(i, 26) \u003c 0.2 ? 0.55 + 0.3 * hash(i, 27) : 0;\n      }\n  }\n  // Every LED of the dark gets its own grain, channel by channel, and nothing\n  // in the dark goes over 23.\n  for (let p = 0; p \u003c N; p++) {\n    let m = 0;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = Math.max(0, base[p * 3 + c] + 7 * (hash(p, 30 + c) - 0.5));\n      base[p * 3 + c] = v;\n      if (v > m) m = v;\n    }\n    if (m > 23) for (let c = 0; c \u003c 3; c++) base[p * 3 + c] *= 23 / m;\n  }\n}\n\n// Mushroom clusters: Mycena standing up on stems, or Panellus shelves on the\n// side of the wood (side -1 or 1). Each comes up, glows and goes.\nfunction makeSites() {\n  const sites = [];\n  const up = (x, y, n, tall) => sites.push({ x, y, side: 0, n, tall });\n  const shelf = (x, y, side, n) => sites.push({ x, y, side, n, tall: 0 });\n  up(11, Math.ceil(stumpTop(11)), 6, 7);\n  up(5, Math.ceil(stumpTop(5)), 3, 4);\n  shelf(SX + 8, 28, 1, 3);\n  shelf(SX - 8, 42, -1, 3);\n  up(39, Math.floor(logCentre(39) - LOGR * 0.92), 5, 6);\n  up(55, Math.floor(logCentre(55) - LOGR * 0.92), 4, 5);\n  shelf(LOGX - 5, 49, -1, 2);\n  up(31, Math.floor(groundY(31)), 3, 3);\n  up(47, Math.floor(groundY(47)) + 1, 3, 3);\n  up(61, Math.floor(groundY(61)), 2, 3);\n  for (let i = 0; i \u003c sites.length; i++) {\n    const s = sites[i];\n    s.period = 34 + 14 * hash(i, 40);\n    s.offset = s.period * hash(i, 41);\n    s.beat = 3.2 + 2.4 * hash(i, 42);\n    s.phase = 6.28 * hash(i, 43);\n    s.caps = [];\n    for (let j = 0; j \u003c s.n; j++) {\n      if (s.side === 0) {\n        // Neighbours stand at different heights, so their caps do not run\n        // together into one plate.\n        const bx = (j - (s.n - 1) / 2) * 2.2 + 0.6 * (hash(i * 9 + j, 44) - 0.5);\n        const h = s.tall * (j % 2 ? 0.5 : 1) * (0.8 + 0.2 * hash(i * 9 + j, 45));\n        s.caps.push({ bx, h, lean: bx * 0.1 + 0.2 * (hash(i * 9 + j, 46) - 0.5), r: j % 2 || hash(i * 9 + j, 47) \u003c 0.5 ? 1 : 2 });\n      } else {\n        s.caps.push({ by: j * 4 - (s.n - 1) * 2, r: 3 + Math.round(2 * hash(i * 9 + j, 48)) });\n      }\n    }\n    s.life = 0;\n    s.glow = 0;\n  }\n  return sites;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.kind = new Uint8Array(N);\n  P.base = new Float32Array(N * 3);\n  P.rot = new Float32Array(N);\n  build(P);\n  P.occ = new Uint8Array(N);\n  P.dist = new Float32Array(N);\n  P.born = new Float32Array(N);\n  P.dies = new Float32Array(N);\n  P.tips = [];\n  P.sites = makeSites();\n  // Each stem stands on whatever is under it.\n  for (const s of P.sites)\n    for (const c of s.caps) {\n      if (s.side !== 0) continue;\n      const x = Math.round(s.x + c.bx);\n      let y = s.y - 8;\n      while (y \u003c s.y + 4 && (x \u003c 0 || x >= W || P.kind[(y + 1) * W + x] === AIR)) y++;\n      c.foot = y;\n    }\n  P.spores = [];\n  P.seed = Math.floor(Math.random() * 4294967296) | 0;\n  P.haze = new Float32Array(HW * HH);\n  P.G = new Float32Array(N);\n  P.col = new Float32Array(3);\n  Object.assign(P, { T: 0, sweep: 0, owed: 0, started: false, damp: 0.06, spore: 0, hue: -1 });\n}\n\nfunction addTip(P, x, y, a, d) {\n  if (P.tips.length \u003c TIPS * 2) P.tips.push({ x, y, a, d, acc: Math.random(), rate: CREEP * (0.6 + 0.8 * Math.random()), len: 0, last: -1 });\n}\n\n// A new tip, most often forking off a living thread, sometimes from an origin.\nfunction sprout(P) {\n  if (Math.random() \u003c 0.55) {\n    for (let k = 0; k \u003c 40; k++) {\n      const p = Math.floor(Math.random() * N);\n      if (P.occ[p] && P.dies[p] - P.T > 6) {\n        addTip(P, p % W, (p / W) | 0, Math.random() * 6.283, P.dist[p]);\n        return;\n      }\n    }\n  }\n  const o = ORIGINS[Math.floor(Math.random() * ORIGINS.length)];\n  addTip(P, o[0] + 2 * (Math.random() - 0.5), o[1] + 2 * (Math.random() - 0.5), Math.random() * 6.283, 0);\n}\n\n// One LED of creep for a tip. Returns false when the tip stops.\nfunction creep(P, t) {\n  const { kind, occ } = P;\n  let a = t.a + 0.5 * (Math.random() - 0.5);\n  // In the log the threads follow the grain along it; in the stump, up and\n  // down it.\n  if (kind[Math.round(t.y) * W + Math.round(t.x)] === WOOD) {\n    if (t.x > LOGX - 5 && t.y > LOGY - 14 && t.y \u003c GROUND) a += 0.12 * Math.sin(-2 * a);\n    else if (t.x \u003c SX + 12) a += 0.12 * Math.sin(2 * (Math.PI / 2 - a));\n  }\n  for (let tries = 0; tries \u003c 4; tries++) {\n    const nx = t.x + Math.cos(a);\n    const ny = t.y + Math.sin(a);\n    const ix = Math.round(nx);\n    const iy = Math.round(ny);\n    if (ix >= 0 && ix \u003c W && iy >= 0 && iy \u003c H && GROWS[kind[iy * W + ix]]) {\n      const p = iy * W + ix;\n      t.x = nx;\n      t.y = ny;\n      t.a = a;\n      if (p === t.last) return true;\n      // Two threads that meet fuse, and the one arriving stops.\n      if (occ[p] && P.dies[p] - P.T > 2 && Math.random() \u003c 0.6) return false;\n      t.last = p;\n      occ[p] = 1;\n      P.dist[p] = ++t.d;\n      P.born[p] = P.T;\n      // Threads in the soil and the litter rot sooner than those in the wood.\n      P.dies[p] = P.T + (LIFE + LIFE_J * Math.random()) * (kind[p] === WOOD ? 1 : 0.6);\n      if (Math.random() \u003c (kind[p] === SOIL ? FORK * 0.5 : FORK)) addTip(P, nx, ny, a + (Math.random() \u003c 0.5 ? -1 : 1) * (0.6 + 0.6 * Math.random()), t.d);\n      return ++t.len \u003c 70;\n    }\n    a += (Math.random() \u003c 0.5 ? -1 : 1) * (0.9 + 1.2 * Math.random());\n  }\n  return false;\n}\n\n// Spores leave the caps of the clusters that are up.\nfunction shed(P, count) {\n  const up = P.sites.filter((s) => s.life > 0.6);\n  for (let n = 0; n \u003c count && up.length && P.spores.length \u003c MAXS; n++) {\n    const s = up[Math.floor(sporeRandom(P) * up.length)];\n    const c = s.caps[Math.floor(sporeRandom(P) * s.caps.length)];\n    const side = s.side === 0;\n    P.spores.push({\n      x: side ? s.x + c.bx + c.lean * c.h + (sporeRandom(P) - 0.5) * 2 * c.r : s.x + s.side * c.r * sporeRandom(P),\n      y: side ? c.foot - c.h - 1 : s.y + c.by + 1,\n      v: 1.6 + 2.6 * sporeRandom(P),\n      age: 0,\n      life: 9 + 9 * sporeRandom(P),\n      ph: 6.28 * sporeRandom(P),\n      w: 0,\n    });\n  }\n}\n\nfunction world(P, wdt, spores) {\n  P.T += wdt;\n  const T = P.T;\n  // Threads creep.\n  while (P.tips.length \u003c TIPS) sprout(P);\n  P.tips = P.tips.filter((t) => {\n    for (t.acc += wdt * t.rate; t.acc >= 1; t.acc--) if (!creep(P, t)) return false;\n    return true;\n  });\n  // Old threads rot away, a few times a second.\n  P.sweep += wdt;\n  if (P.sweep > 0.2) {\n    P.sweep = 0;\n    const { occ, dies } = P;\n    for (let p = 0; p \u003c N; p++) if (occ[p] && dies[p] \u003c T) occ[p] = 0;\n  }\n  // Each cluster's life: up over the first eighth, glowing, then withering.\n  for (const s of P.sites) {\n    const u = ((T + s.offset) % s.period) / s.period;\n    s.life = u \u003c 0.12 ? smooth(0, 0.12, u) : u \u003c 0.74 ? 1 : 1 - smooth(0.74, 0.88, u);\n    s.glow = s.life * (0.62 + 0.38 * Math.sin((T * 6.283) / s.beat + s.phase));\n  }\n  // Spores rise, sway and fade.\n  P.owed += wdt * (6 + 75 * spores);\n  const n = Math.floor(P.owed);\n  P.owed -= n;\n  shed(P, n);\n  P.spores = P.spores.filter((m) => {\n    m.age += wdt;\n    m.y -= m.v * wdt;\n    m.x += wdt * (1.1 * Math.sin(T * 0.5 + m.ph) + 0.3 * Math.sin(m.y * 0.1));\n    m.w = Math.min(1, m.age / 1.5) * clamp((m.life - m.age) / 3, 0, 1);\n    return m.age \u003c m.life && m.y > -2 && m.x > -2 && m.x \u003c W + 1;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const speed = clamp(k[1], 0.1, 4) / 2;\n  const spores = clamp(k[2], 0, 1);\n  P.damp = clamp(k[3], 0, 1);\n  P.spore = spores;\n  if (P.hue !== k[0]) {\n    P.hue = k[0];\n    hueOf(k[0], P.col);\n  }\n  if (!P.started) {\n    P.started = true;\n    for (let t = 0; t \u003c PRE; t += PRE_DT) world(P, PRE_DT, spores);\n  }\n  if (input.btnPressed && input.btnPressed[0]) shed(P, 160);\n  world(P, dt * speed, spores);\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.G) return;\n  const { G, kind, rot, occ, dist, born, dies, base, haze } = P;\n  const T = P.T;\n  const damp = P.damp;\n  const gain = 0.8 + 0.7 * damp;\n  // Rotten wood glows where it is wet enough, breathing slowly.\n  const edge = 0.45 - 0.3 * damp;\n  for (let p = 0; p \u003c N; p++) {\n    const r = rot[p];\n    if (r \u003c= edge) {\n      G[p] = 0;\n      continue;\n    }\n    const x = p % W;\n    const y = (p / W) | 0;\n    const breath = 0.55 + 0.45 * Math.sin(x * 0.16 - T * 0.6 + 0.8 * Math.sin(y * 0.07 + T * 0.3));\n    G[p] = 0.5 * smooth(edge, edge + 0.45, r) * breath;\n  }\n  // The threads: dim along their length, a pulse running out along each, and\n  // the growing tip bright.\n  const kw = 6.283 / WAVE;\n  const om = kw * RUN;\n  for (let p = 0; p \u003c N; p++) {\n    if (!occ[p]) continue;\n    const age = T - born[p];\n    const left = dies[p] - T;\n    const fade = Math.min(1, age / 0.5) * clamp(left / 4, 0, 1);\n    let c = 0.5 + 0.5 * Math.cos(dist[p] * kw - T * om);\n    c = c * c * c;\n    const soil = kind[p] === SOIL || kind[p] === LITTER ? 0.8 : 1;\n    G[p] += fade * soil * (0.2 + 0.55 * c) + (age \u003c 1 ? 0.5 * (1 - age) : 0);\n  }\n  for (const t of P.tips) G[Math.round(t.y) * W + Math.round(t.x)] += 0.55;\n  // The spore haze: each spore counts into the grid, which is spread back\n  // over the LEDs smoothly.\n  haze.fill(0);\n  for (const m of P.spores) {\n    const fx = m.x / 4;\n    const fy = m.y / 4;\n    const ix = Math.floor(fx);\n    const iy = Math.floor(fy);\n    if (ix \u003c 0 || iy \u003c 0 || ix >= HW - 1 || iy >= HH - 1) continue;\n    const u = fx - ix;\n    const v = fy - iy;\n    const w = m.w;\n    const q = iy * HW + ix;\n    haze[q] += w * (1 - u) * (1 - v);\n    haze[q + 1] += w * u * (1 - v);\n    haze[q + HW] += w * (1 - u) * v;\n    haze[q + HW + 1] += w * u * v;\n  }\n  const hk = 0.045 + 0.035 * P.spore;\n  for (let y = 0; y \u003c H; y++) {\n    const fy = y / 4;\n    const iy = Math.min(HH - 2, Math.floor(fy));\n    const v = fy - iy;\n    for (let x = 0; x \u003c W; x++) {\n      const fx = x / 4;\n      const ix = Math.min(HW - 2, Math.floor(fx));\n      const u = fx - ix;\n      const q = iy * HW + ix;\n      const d = (haze[q] * (1 - u) + haze[q + 1] * u) * (1 - v) + (haze[q + HW] * (1 - u) + haze[q + HW + 1] * u) * v;\n      if (d > 0) G[y * W + x] += hk * Math.min(d, 5);\n    }\n  }\n  // Each spore itself, a mote caught in the glow.\n  for (const m of P.spores) {\n    const x = Math.round(m.x);\n    const y = Math.round(m.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) G[y * W + x] += 0.3 * m.w * (0.6 + 0.4 * Math.sin(T * 3 + m.ph * 5));\n  }\n  // The clusters: a soft halo on the wood round them, then stems and caps.\n  for (const s of P.sites) {\n    if (s.life \u003c= 0) continue;\n    const g = s.glow;\n    const cy = s.side === 0 ? s.y - s.tall * 0.6 : s.y;\n    const cx = s.x + s.side * 2;\n    for (let y = Math.max(0, Math.floor(cy - 9)); y \u003c= Math.min(H - 1, cy + 9); y++)\n      for (let x = Math.max(0, Math.floor(cx - 9)); x \u003c= Math.min(W - 1, cx + 9); x++) {\n        const d2 = (x - cx) ** 2 + (y - cy) ** 2;\n        if (d2 \u003c 81) G[y * W + x] += 0.2 * g * (1 - d2 / 81) ** 2;\n      }\n    for (const c of s.caps) {\n      if (s.side === 0) {\n        const h = c.h * s.life;\n        for (let j = 0; j \u003c= h; j++) {\n          const x = Math.round(s.x + c.bx + c.lean * j);\n          const y = c.foot - j;\n          if (x >= 0 && x \u003c W && y >= 0) G[y * W + x] += 0.32 * g;\n        }\n        const tx = s.x + c.bx + c.lean * h;\n        const ty = c.foot - Math.round(h) - 1;\n        const r = c.r * (0.4 + 0.6 * s.life);\n        // A Mycena cap is a little bell: one LED at the top, wider at the rim.\n        for (let row = 0; row \u003c= c.r; row++) {\n          const half = row === c.r ? r + 0.4 : (r * row) / c.r;\n          const y = ty - c.r + row;\n          if (y \u003c 0 || y >= H) continue;\n          for (let x = Math.round(tx - half); x \u003c= Math.round(tx + half); x++)\n            if (x >= 0 && x \u003c W) G[y * W + x] += g * (row === c.r ? 1.15 : 0.85);\n        }\n      } else {\n        // A Panellus shelf: a thin bracket out of the wood, its top dim and\n        // the gills under it bright, the rim bent down.\n        const r = Math.round(c.r * (0.4 + 0.6 * s.life));\n        const y0 = Math.round(s.y + c.by);\n        for (let i = 0; i \u003c= r; i++) {\n          const x = Math.round(s.x + s.side * i);\n          if (x \u003c 0 || x >= W) continue;\n          if (i \u003c r - 1 && y0 > 0) G[(y0 - 1) * W + x] += 0.45 * g;\n          if (y0 >= 0 && y0 \u003c H) G[y0 * W + x] += 0.75 * g;\n          if (i > 0 && i \u003c r && y0 + 1 \u003c H) G[(y0 + 1) * W + x] += 1.25 * g;\n        }\n      }\n    }\n  }\n  // Light the floor: the dark as it was painted, plus the glow in the Glow\n  // colour, running toward white where it is brightest.\n  const C = P.col;\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    const g = G[p] * gain;\n    let r = base[q];\n    let gg = base[q + 1];\n    let b = base[q + 2];\n    if (g > 0) {\n      const v = g * 255;\n      const w = g > 0.7 ? (g - 0.7) * 170 : 0;\n      r += v * C[0] + w;\n      gg += v * C[1] + w;\n      b += v * C[2] + w;\n    }\n    display.setPixel(p % W, (p / W) | 0, byte(r), byte(gg), byte(b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Glow=0..1, Speed=0.2..3, Spores=0..1, Damp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Glow","min":0,"max":1,"about":"The colour of the light, from the yellow-green of foxfire at 0 through a clear green to a cold blue-green at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the floor lives: at 2 a thread tip creeps about three LEDs a second, a pulse runs seven LEDs a second and a mushroom cluster comes and goes in about forty seconds; at 0.2 all of it runs ten times slower."},{"name":"Spores","min":0,"max":1,"about":"How hard the caps shed: at 0 a few motes rise from each cluster; turned up, the spores thicken into a lit haze that climbs past the stump into the top of the panel."},{"name":"Damp","min":0,"max":1,"about":"How wet the wood is; wet foxfire glows harder, so turning it up brightens the threads and the caps and lights more of the rotten wood round them."}],"start":[0,2,0,0.06],"measures":{"motion":0.0552,"detail":0.062,"edges":0.4422,"complexity":2.0011,"coverage":0.1963,"colour":0.1249,"drift":0.0326},"knobResponse":[0.0328,0.0383,0.0467,0.0368]},{"slug":"frost","title":"Frost","family":"fractal","round":17,"note":"밤 유리창에 서리 고사리가 아래 틀과 창틀에서 자라 들어와요. 가지는 대각선으로 곧게 뻗어 깃털처럼 곁가지를 내며 반짝이고, 유리 너머로 가로등과 눈발이 흐리게 비치다가 방이 데워지면 가운데부터 녹아 다시 자라요. K1 을 누르면 입김이 가운데를 닦아요.","idea":"Frost ferns grow across a dark window pane at night from the sill and the frame, feathery and glittering, while a street lamp and falling snow glow dimly through the glass; then the room warms, the middle of the pane thaws, and the cold draws the ferns in again.","buttons":"K1 tap breathes on the glass: a round patch in the middle clears, wet for a moment, and the ferns grow back into it from its rim.","code":"// ===== Patternflow pattern =====\n// Title:   Frost\n// Family:  fractal\n// Idea:    Frost ferns grow across a dark window pane at night from the sill and the frame, feathery and glittering, while a street lamp and falling snow glow dimly through the glass; then the room warms, the middle of the pane thaws, and the cold draws the ferns in again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: diffusion-limited aggregation (Witten and Sander, 1981), after fern frost on a single-glazed window\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Rime=0..1, Glitter=0..1\n//\n// Knob 1: Lamp. The street light behind the glass, from a sodium lamp's amber through warm and cold white to a mercury lamp's blue-green and a pink shop sign; the snow clouds, the street and the frost near the lamp take its colour.\n// Knob 2: Speed. How fast the frost grows: at 2 about forty crystals freeze each second and the pane is frosted over 17 seconds after the panel opens; at 0.2 the ferns have only begun.\n// Knob 3: Rime. How readily vapour sticks where it touches the frost: at 0 every touch counts and the ferns grow thin and feathery; turned up, most touches bounce off and wander deeper in, and the frost packs into a dense white crust along the frame.\n// Knob 4: Glitter. How hard the crystal faces flash as they turn to the light, from a matte frost to every fern sparkling.\n// Buttons: K1 tap breathes on the glass: a round patch in the middle clears, wet for a moment, and the ferns grow back into it from its rim.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The distance to the nearest frost, in LEDs (the larger of the two axis\n// steps), is kept for every LED up to this far. A walker that far out can\n// jump that far in one go without passing any frost.\nconst CAP = 9;\n// A walker starts only where the frost is at least this far off. When none\n// can, the pane is full.\nconst LAUNCH = 4;\n// Hits an LED next to the frost takes before it freezes. One is Witten and\n// Sander's rule, and its ferns wander like lichen; three average out the\n// walkers' noise, the way Nittmann and Stanley grew snowflakes in 1986, and\n// the ferns run straight along the diagonals with side branches like a feather.\nconst HITS = 3;\n// Crystals frozen each second at Speed 1.\nconst RATE = 21;\n// Seconds of growth the pane has had when the panel opens.\nconst PRE = 15;\n// Walker steps a frame may spend; a walker left over carries on next frame.\nconst BUDGET = 9000;\n// The street lamp's head, seen through the glass in the middle of the pane,\n// where the frost reaches last.\nconst LX = 34;\nconst LY = 44;\n// The lamps K1 runs through: sodium amber, warm white, cold white, mercury\n// blue-green, a pink sign.\nconst LAMPS = [\n  [255, 140, 24],\n  [255, 196, 120],\n  [150, 190, 255],\n  [100, 255, 210],\n  [255, 60, 190],\n];\n// The ice: a cold blue-white.\nconst ICE = [105, 165, 255];\nconst FLAKES = 46;\n// Lit windows in the houses across the road.\nconst WINDOWS = [\n  [10, 86],\n  [53, 90],\n];\n// The glass's own grain: each LED of the street seen through it is off by up\n// to half this, channel by channel.\nconst GRAIN = 9;\n\n// Seconds the full pane holds before the room warms, the seconds the thaw\n// takes, and how far it reaches: 0 is the middle of the pane, 1 the middle\n// of each side.\nconst HOLD_S = 4;\nconst MELT_S = 6;\nconst THAW = 0.85;\n\nconst GROW = 0;\nconst HOLD = 1;\nconst MELT = 2;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction lampColour(k, out) {\n  const u = clamp(k, 0, 1) * (LAMPS.length - 1);\n  const i = Math.min(LAMPS.length - 2, Math.floor(u));\n  const f = u - i;\n  for (let c = 0; c \u003c 3; c++) out[c] = (LAMPS[i][c] * (1 - f) + LAMPS[i + 1][c] * f) / 255;\n}\n\n// Freeze one LED: mark it and pull the distance field in round it.\nfunction freeze(P, p) {\n  const { frost, dist } = P;\n  frost[p] = 1;\n  P.born[p] = P.clock;\n  const x0 = p % W;\n  const y0 = (p / W) | 0;\n  const ya = Math.max(0, y0 - CAP);\n  const yb = Math.min(H - 1, y0 + CAP);\n  const xa = Math.max(0, x0 - CAP);\n  const xb = Math.min(W - 1, x0 + CAP);\n  for (let y = ya; y \u003c= yb; y++) {\n    const dy = y > y0 ? y - y0 : y0 - y;\n    const row = y * W;\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x > x0 ? x - x0 : x0 - x;\n      const d = dx > dy ? dx : dy;\n      if (d \u003c dist[row + x]) dist[row + x] = d;\n    }\n  }\n}\n\n// The whole distance field again, after frost melts: two passes over the pane.\nfunction measureDistance(P) {\n  const { frost, dist } = P;\n  for (let p = 0; p \u003c N; p++) dist[p] = frost[p] ? 0 : CAP;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let d = dist[p];\n      if (d === 0) continue;\n      if (x > 0) d = Math.min(d, dist[p - 1] + 1);\n      if (y > 0) {\n        d = Math.min(d, dist[p - W] + 1);\n        if (x > 0) d = Math.min(d, dist[p - W - 1] + 1);\n        if (x \u003c W - 1) d = Math.min(d, dist[p - W + 1] + 1);\n      }\n      dist[p] = d;\n    }\n  for (let y = H - 1; y >= 0; y--)\n    for (let x = W - 1; x >= 0; x--) {\n      const p = y * W + x;\n      let d = dist[p];\n      if (d === 0) continue;\n      if (x \u003c W - 1) d = Math.min(d, dist[p + 1] + 1);\n      if (y \u003c H - 1) {\n        d = Math.min(d, dist[p + W] + 1);\n        if (x > 0) d = Math.min(d, dist[p + W - 1] + 1);\n        if (x \u003c W - 1) d = Math.min(d, dist[p + W + 1] + 1);\n      }\n      dist[p] = d;\n    }\n}\n\n// The frame is cold first: the sill along the bottom freezes all along, the\n// sides here and there below row 36, the top in a few places.\nfunction seed(P) {\n  P.frost.fill(0);\n  P.hits.fill(0);\n  P.dist.fill(CAP);\n  for (let x = 0; x \u003c W; x++) freeze(P, (H - 1) * W + x);\n  for (let y = H - 2; y > 36; y -= 3 + Math.floor(Math.random() * 6)) freeze(P, y * W);\n  for (let y = H - 2; y > 36; y -= 3 + Math.floor(Math.random() * 6)) freeze(P, y * W + W - 1);\n  for (let x = 2; x \u003c W - 2; x += 9 + Math.floor(Math.random() * 14)) freeze(P, x);\n  P.walking = false;\n}\n\n// A walker starts anywhere on the glass at least LAUNCH from the frost.\nfunction launch(P) {\n  const dist = P.dist;\n  for (let tries = 0; tries \u003c 200; tries++) {\n    const x = Math.floor(Math.random() * W);\n    const y = Math.floor(Math.random() * H);\n    if (dist[y * W + x] >= LAUNCH) {\n      P.wx = x;\n      P.wy = y;\n      P.walking = true;\n      return true;\n    }\n  }\n  return false;\n}\n\n// Vapour as random walkers, one at a time, until `want` crystals have frozen\n// or the step budget runs out. Returns false when no walker can start: the\n// pane is full.\nfunction walk(P, want, stick, budget) {\n  const dist = P.dist;\n  const frost = P.frost;\n  let made = 0;\n  let x = P.wx;\n  let y = P.wy;\n  while (made \u003c want && budget > 0) {\n    if (!P.walking) {\n      if (!launch(P)) return false;\n      x = P.wx;\n      y = P.wy;\n    }\n    budget--;\n    const p = y * W + x;\n    const d = dist[p];\n    if (d === 1 && Math.random() \u003c stick) {\n      if (++P.hits[p] >= HITS) {\n        freeze(P, p);\n        made++;\n      }\n      P.walking = false;\n      continue;\n    }\n    if (d >= 3) {\n      // Far from the frost: land anywhere on the square ring d - 1 out, which\n      // the walk would have to cross anyway.\n      const r = d - 1;\n      const s = Math.floor(Math.random() * 8 * r);\n      const side = (s / (2 * r)) | 0;\n      const o = (s % (2 * r)) - r;\n      if (side === 0) {\n        x += o;\n        y -= r;\n      } else if (side === 1) {\n        x += r;\n        y += o;\n      } else if (side === 2) {\n        x -= o;\n        y += r;\n      } else {\n        x -= r;\n        y -= o;\n      }\n    } else {\n      const s = Math.floor(Math.random() * 4);\n      let nx = x + (s === 0 ? 1 : s === 1 ? -1 : 0);\n      let ny = y + (s === 2 ? 1 : s === 3 ? -1 : 0);\n      if (nx \u003c 0) nx = 1;\n      if (nx >= W) nx = W - 2;\n      if (ny \u003c 0) ny = 1;\n      if (ny >= H) ny = H - 2;\n      if (!frost[ny * W + nx]) {\n        x = nx;\n        y = ny;\n      }\n    }\n    if (x \u003c 0) x = -x;\n    if (x >= W) x = 2 * (W - 1) - x;\n    if (y \u003c 0) y = -y;\n    if (y >= H) y = 2 * (H - 1) - y;\n    x = clamp(x, 0, W - 1);\n    y = clamp(y, 0, H - 1);\n  }\n  P.wx = x;\n  P.wy = y;\n  return true;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frost = new Uint8Array(N);\n  P.hits = new Uint8Array(N);\n  P.dist = new Uint8Array(N);\n  P.born = new Float32Array(N);\n  P.thaw = new Float32Array(N);\n  P.bg = new Float32Array(N * 3);\n  P.base = new Float32Array(N * 3);\n  // Each LED of the pane has its own crystal face: how much light it sends\n  // back, a tint per channel, and a time when it flashes.\n  P.facet = new Float32Array(N);\n  P.tint = new Float32Array(N * 3);\n  P.spin = new Float32Array(N);\n  P.phase = new Float32Array(N);\n  P.grain = new Float32Array(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    P.facet[p] = hash(p, 1);\n    for (let c = 0; c \u003c 3; c++) {\n      P.tint[p * 3 + c] = 0.86 + 0.28 * hash(p, 2 + c);\n      P.grain[p * 3 + c] = hash(p, 5 + c) - 0.5;\n    }\n    P.spin[p] = 2 + 7 * hash(p, 8);\n    P.phase[p] = 6.283 * hash(p, 9);\n  }\n  // What the lamp does at each LED: how much of it the ice scatters back, how\n  // far the film between the ferns spreads it, and the lamp's own head.\n  P.lit = new Float32Array(N);\n  P.haze = new Float32Array(N);\n  P.core = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const d2 = ((p % W) - LX) ** 2 + (((p / W) | 0) - LY) ** 2;\n    P.lit[p] = Math.exp(-d2 / 1500);\n    P.haze[p] = Math.exp(-d2 / 4500);\n    P.core[p] = 235 * Math.exp(-d2 / 5);\n  }\n  P.fx = new Float32Array(FLAKES);\n  P.fy = new Float32Array(FLAKES);\n  P.fz = new Float32Array(FLAKES);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    P.fx[i] = Math.random() * W;\n    P.fy[i] = Math.random() * H;\n    P.fz[i] = 0.4 + 0.6 * Math.random();\n  }\n  P.lamp = new Float32Array(3);\n  Object.assign(P, { clock: 0, owed: 0, phaseOf: GROW, timer: 0, wx: 0, wy: 0, walking: false, started: false, baked: -1 });\n  seed(P);\n}\n\nfunction startMelt(P) {\n  P.phaseOf = MELT;\n  P.timer = 0;\n  // The room warms the middle of the pane first: the frost melts from there\n  // out toward the frame, and the corners and the sill keep theirs.\n  const { frost, thaw } = P;\n  for (let p = 0; p \u003c N; p++) {\n    if (!frost[p]) continue;\n    const x = (p % W) - 32;\n    const y = ((p / W) | 0) - 58;\n    thaw[p] = Math.sqrt((x / 32) ** 2 + (y / 66) ** 2) + 0.2 * hash(p, 11);\n  }\n}\n\nfunction step(P, dt, speed, stick) {\n  P.clock += dt;\n  if (P.phaseOf === GROW) {\n    P.owed += RATE * speed * (1 + 1.5 * P.rime) * dt;\n    const want = Math.floor(P.owed);\n    P.owed -= want;\n    if (want > 0 && !walk(P, want, stick, BUDGET)) {\n      P.phaseOf = HOLD;\n      P.timer = 0;\n    }\n  } else if (P.phaseOf === HOLD) {\n    P.timer += dt;\n    if (P.timer > HOLD_S) startMelt(P);\n  } else {\n    P.timer += dt;\n    const front = THAW * smooth(0, MELT_S, P.timer);\n    const { frost, thaw } = P;\n    let changed = false;\n    for (let p = 0; p \u003c N; p++)\n      if (frost[p] && thaw[p] \u003c front) {\n        frost[p] = 0;\n        P.born[p] = P.clock;\n        changed = true;\n      }\n    if (changed) measureDistance(P);\n    if (P.timer > MELT_S + 0.5) {\n      // The cold comes back and the ferns grow in again from what is left.\n      P.phaseOf = GROW;\n      P.hits.fill(0);\n      P.walking = false;\n    }\n  }\n}\n\nfunction breathe(P) {\n  // A warm breath on the middle of the pane: a ragged round patch clears.\n  const { frost } = P;\n  const cx = 32;\n  const cy = 60;\n  for (let p = 0; p \u003c N; p++) {\n    if (!frost[p]) continue;\n    const x = p % W;\n    const y = (p / W) | 0;\n    const r = Math.sqrt((x - cx) ** 2 + ((y - cy) * 0.8) ** 2);\n    if (r \u003c 22 + 4 * hash(p, 12)) {\n      frost[p] = 0;\n      P.born[p] = P.clock;\n    }\n  }\n  measureDistance(P);\n  P.walking = false;\n  if (P.phaseOf !== GROW) P.phaseOf = GROW;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const speed = clamp(k[1], 0.1, 4);\n  const rime = clamp(k[2], 0, 1);\n  P.rime = rime;\n  // The chance a walker that touches the frost freezes there.\n  const stick = 1 - 0.95 * Math.sqrt(rime);\n  P.glitter = clamp(k[3], 0, 1);\n  if (Math.abs(P.baked - k[0]) > 0.002) {\n    lampColour(k[0], P.lamp);\n    bake(P, k[0]);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The pane has been freezing for fifteen seconds of Speed when the panel\n    // opens, so the knobs have already shaped the frost.\n    const n = Math.round(PRE * RATE * speed * (1 + 1.5 * rime));\n    walk(P, n, stick, 1e9);\n    P.clock = 0;\n    for (let p = 0; p \u003c N; p++) P.born[p] = -9;\n  }\n  if (input.btnPressed && input.btnPressed[0]) breathe(P);\n  step(P, dt, speed, stick);\n  // Snow outside, falling past the lamp.\n  for (let i = 0; i \u003c FLAKES; i++) {\n    P.fy[i] += dt * (5 + 9 * P.fz[i]);\n    P.fx[i] += dt * (1.2 * Math.sin(P.clock * 0.7 + i) + 0.8);\n    if (P.fy[i] > H + 3) {\n      P.fy[i] = -3;\n      P.fx[i] = Math.random() * W;\n    }\n    if (P.fx[i] > W + 3) P.fx[i] -= W + 6;\n  }\n}\n\n// The street behind the glass, out of focus: snow clouds, the roofs across\n// the road with two windows lit, the lamp's glow and its pool on the snow.\n// It is drawn again only when the lamp changes.\nfunction bake(P, key) {\n  const base = P.base;\n  const L = P.lamp;\n  const grain = P.grain;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const roofY = 74 + 3 * Math.sin(x * 0.13 + 1) - 10 * smooth(8, 12, x) * (1 - smooth(22, 26, x)) - 6 * smooth(44, 47, x);\n      const dx = x - LX;\n      const dy = y - LY;\n      const d2 = dx * dx + dy * dy;\n      let r;\n      let g;\n      let b;\n      if (y \u003c roofY) {\n        // Snow clouds hang low and give back the street lights: navy\n        // overhead, the lamp's own colour down at the roofs.\n        const h = smooth(0, roofY, y);\n        const glow = 4 + 15 * h * h;\n        r = 3 * (1 - h) + glow * L[0];\n        g = 5 * (1 - h) + glow * L[1];\n        b = 15 * (1 - h) + glow * L[2];\n        // Snow lies along the roof edges.\n        const lip = Math.exp(-((y - roofY + 1.5) ** 2) / 2);\n        r += 8 * lip;\n        g += 9 * lip;\n        b += 11 * lip;\n      } else if (y \u003c 102) {\n        // The houses opposite, dark, with two windows lit by the rooms inside.\n        let win = 0;\n        for (const [wx, wy] of WINDOWS) {\n          const u = (x - wx) / 3.2;\n          const v = (y - wy) / 4;\n          win += Math.exp(-(u * u + v * v) * 2);\n        }\n        r = 3 + 4 * L[0] + 17 * win;\n        g = 3 + 4 * L[1] + 12 * win;\n        b = 5 + 4 * L[2] + 5 * win;\n      } else {\n        // Snow on the street, in a pool of light under the lamp.\n        const pool = Math.exp(-(dx * dx) / 260 - ((y - 114) ** 2) / 180);\n        r = 3 + (9 + 12 * pool) * L[0];\n        g = 4 + (9 + 12 * pool) * L[1];\n        b = 6 + (9 + 12 * pool) * L[2];\n      }\n      // The lamp's glow through the glass.\n      const glow = 16 / (1 + d2 / 50);\n      r += glow * L[0];\n      g += glow * L[1];\n      b += glow * L[2];\n      // Its pole, dark against the glow.\n      if (x >= LX - 1 && x \u003c= LX && y > LY + 2 && y \u003c 106) {\n        r *= 0.45;\n        g *= 0.45;\n        b *= 0.45;\n      }\n      base[p * 3] = r + GRAIN * grain[p * 3];\n      base[p * 3 + 1] = g + GRAIN * grain[p * 3 + 1];\n      base[p * 3 + 2] = b + GRAIN * grain[p * 3 + 2];\n    }\n  P.baked = key;\n}\n\n// Flakes falling past the window, soft and dim, brighter as they pass the lamp.\nfunction paintSnow(P) {\n  const bg = P.bg;\n  const L = P.lamp;\n  bg.set(P.base);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    const fx = P.fx[i];\n    const fy = P.fy[i];\n    const near = Math.exp(-((fx - LX) ** 2 + (fy - LY) ** 2) / 500);\n    const v = (4 + 10 * near) * P.fz[i];\n    const xa = Math.max(0, Math.floor(fx - 2));\n    const xb = Math.min(W - 1, Math.ceil(fx + 2));\n    const ya = Math.max(0, Math.floor(fy - 2));\n    const yb = Math.min(H - 1, Math.ceil(fy + 2));\n    for (let y = ya; y \u003c= yb; y++)\n      for (let x = xa; x \u003c= xb; x++) {\n        const w = v * Math.exp(-((x - fx) ** 2 + (y - fy) ** 2) / 1.6);\n        const q = (y * W + x) * 3;\n        bg[q] += w * (0.7 + 0.3 * L[0]);\n        bg[q + 1] += w * (0.7 + 0.3 * L[1]);\n        bg[q + 2] += w * (0.8 + 0.2 * L[2]);\n      }\n  }\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.bg) return;\n  paintSnow(P);\n  const { bg, frost, dist, facet, tint, born, spin, phase, lamp, lit, haze, core } = P;\n  const t = P.clock;\n  const gl = P.glitter;\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    let r = bg[q];\n    let g = bg[q + 1];\n    let b = bg[q + 2];\n    // The street stays under 24 everywhere but the lamp itself.\n    const m = r > g ? (r > b ? r : b) : g > b ? g : b;\n    if (m > 22) {\n      r *= 22 / m;\n      g *= 22 / m;\n      b *= 22 / m;\n    }\n    const f = facet[p];\n    const d = dist[p];\n    let sparkle = 1;\n    if (d \u003c= 1 && gl > 0) {\n      // Glitter: each face turns to the light and away again on its own beat.\n      const s = Math.sin(t * spin[p] + phase[p]);\n      sparkle = 1 - 0.6 * gl + (s > 0 ? 2.4 * gl * s * s * s : 0);\n    }\n    if (frost[p]) {\n      // A crystal just frozen flashes, then settles.\n      const age = t - born[p];\n      const v = (0.45 + 0.5 * f) * (age \u003c 0.5 ? 1.7 - 1.4 * age : 1) * sparkle;\n      // The brightest faces run white; near the lamp the ice is its colour.\n      const w = 90 * f * f * f * f * v;\n      const a = 280 * lit[p] * v;\n      r = (ICE[0] * v + a * lamp[0] + w) * tint[q];\n      g = (ICE[1] * v + a * lamp[1] + w) * tint[q + 1];\n      b = (ICE[2] * v + a * lamp[2] + w) * tint[q + 2];\n    } else {\n      // The lamp's head, where no frost hides it.\n      const c0 = core[p];\n      if (c0 > 0.5) {\n        r += c0 * lamp[0];\n        g += c0 * lamp[1];\n        b += c0 * lamp[2];\n      }\n      // Where frost has just melted the glass is wet for a moment.\n      const wet = t - born[p];\n      if (wet >= 0 && wet \u003c 1.5) {\n        const e = (1 - wet / 1.5) * (0.3 + f);\n        r += 30 * e;\n        g += 44 * e;\n        b += 60 * e;\n      }\n      if (d \u003c= 2) {\n        // A film of hoar frost round the ferns, lit one step out and kept\n        // under 24 the next. It scatters the lamp's light farther than the\n        // ferns do.\n        const near = d === 1;\n        const film = (near ? 0.17 * sparkle : 0.06) * (0.6 + 0.8 * f);\n        const hz = haze[p];\n        const c = 1 - 0.6 * hz;\n        const keep = near ? 0.5 : 0.7;\n        r = keep * r + (ICE[0] * c + 300 * hz * lamp[0]) * film;\n        g = keep * g + (ICE[1] * c + 300 * hz * lamp[1]) * film;\n        b = keep * b + (ICE[2] * c + 300 * hz * lamp[2]) * film;\n        if (!near) {\n          const n = r > g ? (r > b ? r : b) : g > b ? g : b;\n          if (n > 23) {\n            r *= 23 / n;\n            g *= 23 / n;\n            b *= 23 / n;\n          }\n        }\n      }\n    }\n    display.setPixel(p % W, (p / W) | 0, byte(r), byte(g), byte(b));\n  }\n}\n","layer":{"id":"layer-frost","type":"code","name":"frost","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Frost\n// Family:  fractal\n// Idea:    Frost ferns grow across a dark window pane at night from the sill and the frame, feathery and glittering, while a street lamp and falling snow glow dimly through the glass; then the room warms, the middle of the pane thaws, and the cold draws the ferns in again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: diffusion-limited aggregation (Witten and Sander, 1981), after fern frost on a single-glazed window\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Rime=0..1, Glitter=0..1\n//\n// Knob 1: Lamp. The street light behind the glass, from a sodium lamp's amber through warm and cold white to a mercury lamp's blue-green and a pink shop sign; the snow clouds, the street and the frost near the lamp take its colour.\n// Knob 2: Speed. How fast the frost grows: at 2 about forty crystals freeze each second and the pane is frosted over 17 seconds after the panel opens; at 0.2 the ferns have only begun.\n// Knob 3: Rime. How readily vapour sticks where it touches the frost: at 0 every touch counts and the ferns grow thin and feathery; turned up, most touches bounce off and wander deeper in, and the frost packs into a dense white crust along the frame.\n// Knob 4: Glitter. How hard the crystal faces flash as they turn to the light, from a matte frost to every fern sparkling.\n// Buttons: K1 tap breathes on the glass: a round patch in the middle clears, wet for a moment, and the ferns grow back into it from its rim.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The distance to the nearest frost, in LEDs (the larger of the two axis\n// steps), is kept for every LED up to this far. A walker that far out can\n// jump that far in one go without passing any frost.\nconst CAP = 9;\n// A walker starts only where the frost is at least this far off. When none\n// can, the pane is full.\nconst LAUNCH = 4;\n// Hits an LED next to the frost takes before it freezes. One is Witten and\n// Sander's rule, and its ferns wander like lichen; three average out the\n// walkers' noise, the way Nittmann and Stanley grew snowflakes in 1986, and\n// the ferns run straight along the diagonals with side branches like a feather.\nconst HITS = 3;\n// Crystals frozen each second at Speed 1.\nconst RATE = 21;\n// Seconds of growth the pane has had when the panel opens.\nconst PRE = 15;\n// Walker steps a frame may spend; a walker left over carries on next frame.\nconst BUDGET = 9000;\n// The street lamp's head, seen through the glass in the middle of the pane,\n// where the frost reaches last.\nconst LX = 34;\nconst LY = 44;\n// The lamps K1 runs through: sodium amber, warm white, cold white, mercury\n// blue-green, a pink sign.\nconst LAMPS = [\n  [255, 140, 24],\n  [255, 196, 120],\n  [150, 190, 255],\n  [100, 255, 210],\n  [255, 60, 190],\n];\n// The ice: a cold blue-white.\nconst ICE = [105, 165, 255];\nconst FLAKES = 46;\n// Lit windows in the houses across the road.\nconst WINDOWS = [\n  [10, 86],\n  [53, 90],\n];\n// The glass's own grain: each LED of the street seen through it is off by up\n// to half this, channel by channel.\nconst GRAIN = 9;\n\n// Seconds the full pane holds before the room warms, the seconds the thaw\n// takes, and how far it reaches: 0 is the middle of the pane, 1 the middle\n// of each side.\nconst HOLD_S = 4;\nconst MELT_S = 6;\nconst THAW = 0.85;\n\nconst GROW = 0;\nconst HOLD = 1;\nconst MELT = 2;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nfunction lampColour(k, out) {\n  const u = clamp(k, 0, 1) * (LAMPS.length - 1);\n  const i = Math.min(LAMPS.length - 2, Math.floor(u));\n  const f = u - i;\n  for (let c = 0; c \u003c 3; c++) out[c] = (LAMPS[i][c] * (1 - f) + LAMPS[i + 1][c] * f) / 255;\n}\n\n// Freeze one LED: mark it and pull the distance field in round it.\nfunction freeze(P, p) {\n  const { frost, dist } = P;\n  frost[p] = 1;\n  P.born[p] = P.clock;\n  const x0 = p % W;\n  const y0 = (p / W) | 0;\n  const ya = Math.max(0, y0 - CAP);\n  const yb = Math.min(H - 1, y0 + CAP);\n  const xa = Math.max(0, x0 - CAP);\n  const xb = Math.min(W - 1, x0 + CAP);\n  for (let y = ya; y \u003c= yb; y++) {\n    const dy = y > y0 ? y - y0 : y0 - y;\n    const row = y * W;\n    for (let x = xa; x \u003c= xb; x++) {\n      const dx = x > x0 ? x - x0 : x0 - x;\n      const d = dx > dy ? dx : dy;\n      if (d \u003c dist[row + x]) dist[row + x] = d;\n    }\n  }\n}\n\n// The whole distance field again, after frost melts: two passes over the pane.\nfunction measureDistance(P) {\n  const { frost, dist } = P;\n  for (let p = 0; p \u003c N; p++) dist[p] = frost[p] ? 0 : CAP;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let d = dist[p];\n      if (d === 0) continue;\n      if (x > 0) d = Math.min(d, dist[p - 1] + 1);\n      if (y > 0) {\n        d = Math.min(d, dist[p - W] + 1);\n        if (x > 0) d = Math.min(d, dist[p - W - 1] + 1);\n        if (x \u003c W - 1) d = Math.min(d, dist[p - W + 1] + 1);\n      }\n      dist[p] = d;\n    }\n  for (let y = H - 1; y >= 0; y--)\n    for (let x = W - 1; x >= 0; x--) {\n      const p = y * W + x;\n      let d = dist[p];\n      if (d === 0) continue;\n      if (x \u003c W - 1) d = Math.min(d, dist[p + 1] + 1);\n      if (y \u003c H - 1) {\n        d = Math.min(d, dist[p + W] + 1);\n        if (x > 0) d = Math.min(d, dist[p + W - 1] + 1);\n        if (x \u003c W - 1) d = Math.min(d, dist[p + W + 1] + 1);\n      }\n      dist[p] = d;\n    }\n}\n\n// The frame is cold first: the sill along the bottom freezes all along, the\n// sides here and there below row 36, the top in a few places.\nfunction seed(P) {\n  P.frost.fill(0);\n  P.hits.fill(0);\n  P.dist.fill(CAP);\n  for (let x = 0; x \u003c W; x++) freeze(P, (H - 1) * W + x);\n  for (let y = H - 2; y > 36; y -= 3 + Math.floor(Math.random() * 6)) freeze(P, y * W);\n  for (let y = H - 2; y > 36; y -= 3 + Math.floor(Math.random() * 6)) freeze(P, y * W + W - 1);\n  for (let x = 2; x \u003c W - 2; x += 9 + Math.floor(Math.random() * 14)) freeze(P, x);\n  P.walking = false;\n}\n\n// A walker starts anywhere on the glass at least LAUNCH from the frost.\nfunction launch(P) {\n  const dist = P.dist;\n  for (let tries = 0; tries \u003c 200; tries++) {\n    const x = Math.floor(Math.random() * W);\n    const y = Math.floor(Math.random() * H);\n    if (dist[y * W + x] >= LAUNCH) {\n      P.wx = x;\n      P.wy = y;\n      P.walking = true;\n      return true;\n    }\n  }\n  return false;\n}\n\n// Vapour as random walkers, one at a time, until `want` crystals have frozen\n// or the step budget runs out. Returns false when no walker can start: the\n// pane is full.\nfunction walk(P, want, stick, budget) {\n  const dist = P.dist;\n  const frost = P.frost;\n  let made = 0;\n  let x = P.wx;\n  let y = P.wy;\n  while (made \u003c want && budget > 0) {\n    if (!P.walking) {\n      if (!launch(P)) return false;\n      x = P.wx;\n      y = P.wy;\n    }\n    budget--;\n    const p = y * W + x;\n    const d = dist[p];\n    if (d === 1 && Math.random() \u003c stick) {\n      if (++P.hits[p] >= HITS) {\n        freeze(P, p);\n        made++;\n      }\n      P.walking = false;\n      continue;\n    }\n    if (d >= 3) {\n      // Far from the frost: land anywhere on the square ring d - 1 out, which\n      // the walk would have to cross anyway.\n      const r = d - 1;\n      const s = Math.floor(Math.random() * 8 * r);\n      const side = (s / (2 * r)) | 0;\n      const o = (s % (2 * r)) - r;\n      if (side === 0) {\n        x += o;\n        y -= r;\n      } else if (side === 1) {\n        x += r;\n        y += o;\n      } else if (side === 2) {\n        x -= o;\n        y += r;\n      } else {\n        x -= r;\n        y -= o;\n      }\n    } else {\n      const s = Math.floor(Math.random() * 4);\n      let nx = x + (s === 0 ? 1 : s === 1 ? -1 : 0);\n      let ny = y + (s === 2 ? 1 : s === 3 ? -1 : 0);\n      if (nx \u003c 0) nx = 1;\n      if (nx >= W) nx = W - 2;\n      if (ny \u003c 0) ny = 1;\n      if (ny >= H) ny = H - 2;\n      if (!frost[ny * W + nx]) {\n        x = nx;\n        y = ny;\n      }\n    }\n    if (x \u003c 0) x = -x;\n    if (x >= W) x = 2 * (W - 1) - x;\n    if (y \u003c 0) y = -y;\n    if (y >= H) y = 2 * (H - 1) - y;\n    x = clamp(x, 0, W - 1);\n    y = clamp(y, 0, H - 1);\n  }\n  P.wx = x;\n  P.wy = y;\n  return true;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.frost = new Uint8Array(N);\n  P.hits = new Uint8Array(N);\n  P.dist = new Uint8Array(N);\n  P.born = new Float32Array(N);\n  P.thaw = new Float32Array(N);\n  P.bg = new Float32Array(N * 3);\n  P.base = new Float32Array(N * 3);\n  // Each LED of the pane has its own crystal face: how much light it sends\n  // back, a tint per channel, and a time when it flashes.\n  P.facet = new Float32Array(N);\n  P.tint = new Float32Array(N * 3);\n  P.spin = new Float32Array(N);\n  P.phase = new Float32Array(N);\n  P.grain = new Float32Array(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    P.facet[p] = hash(p, 1);\n    for (let c = 0; c \u003c 3; c++) {\n      P.tint[p * 3 + c] = 0.86 + 0.28 * hash(p, 2 + c);\n      P.grain[p * 3 + c] = hash(p, 5 + c) - 0.5;\n    }\n    P.spin[p] = 2 + 7 * hash(p, 8);\n    P.phase[p] = 6.283 * hash(p, 9);\n  }\n  // What the lamp does at each LED: how much of it the ice scatters back, how\n  // far the film between the ferns spreads it, and the lamp's own head.\n  P.lit = new Float32Array(N);\n  P.haze = new Float32Array(N);\n  P.core = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const d2 = ((p % W) - LX) ** 2 + (((p / W) | 0) - LY) ** 2;\n    P.lit[p] = Math.exp(-d2 / 1500);\n    P.haze[p] = Math.exp(-d2 / 4500);\n    P.core[p] = 235 * Math.exp(-d2 / 5);\n  }\n  P.fx = new Float32Array(FLAKES);\n  P.fy = new Float32Array(FLAKES);\n  P.fz = new Float32Array(FLAKES);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    P.fx[i] = Math.random() * W;\n    P.fy[i] = Math.random() * H;\n    P.fz[i] = 0.4 + 0.6 * Math.random();\n  }\n  P.lamp = new Float32Array(3);\n  Object.assign(P, { clock: 0, owed: 0, phaseOf: GROW, timer: 0, wx: 0, wy: 0, walking: false, started: false, baked: -1 });\n  seed(P);\n}\n\nfunction startMelt(P) {\n  P.phaseOf = MELT;\n  P.timer = 0;\n  // The room warms the middle of the pane first: the frost melts from there\n  // out toward the frame, and the corners and the sill keep theirs.\n  const { frost, thaw } = P;\n  for (let p = 0; p \u003c N; p++) {\n    if (!frost[p]) continue;\n    const x = (p % W) - 32;\n    const y = ((p / W) | 0) - 58;\n    thaw[p] = Math.sqrt((x / 32) ** 2 + (y / 66) ** 2) + 0.2 * hash(p, 11);\n  }\n}\n\nfunction step(P, dt, speed, stick) {\n  P.clock += dt;\n  if (P.phaseOf === GROW) {\n    P.owed += RATE * speed * (1 + 1.5 * P.rime) * dt;\n    const want = Math.floor(P.owed);\n    P.owed -= want;\n    if (want > 0 && !walk(P, want, stick, BUDGET)) {\n      P.phaseOf = HOLD;\n      P.timer = 0;\n    }\n  } else if (P.phaseOf === HOLD) {\n    P.timer += dt;\n    if (P.timer > HOLD_S) startMelt(P);\n  } else {\n    P.timer += dt;\n    const front = THAW * smooth(0, MELT_S, P.timer);\n    const { frost, thaw } = P;\n    let changed = false;\n    for (let p = 0; p \u003c N; p++)\n      if (frost[p] && thaw[p] \u003c front) {\n        frost[p] = 0;\n        P.born[p] = P.clock;\n        changed = true;\n      }\n    if (changed) measureDistance(P);\n    if (P.timer > MELT_S + 0.5) {\n      // The cold comes back and the ferns grow in again from what is left.\n      P.phaseOf = GROW;\n      P.hits.fill(0);\n      P.walking = false;\n    }\n  }\n}\n\nfunction breathe(P) {\n  // A warm breath on the middle of the pane: a ragged round patch clears.\n  const { frost } = P;\n  const cx = 32;\n  const cy = 60;\n  for (let p = 0; p \u003c N; p++) {\n    if (!frost[p]) continue;\n    const x = p % W;\n    const y = (p / W) | 0;\n    const r = Math.sqrt((x - cx) ** 2 + ((y - cy) * 0.8) ** 2);\n    if (r \u003c 22 + 4 * hash(p, 12)) {\n      frost[p] = 0;\n      P.born[p] = P.clock;\n    }\n  }\n  measureDistance(P);\n  P.walking = false;\n  if (P.phaseOf !== GROW) P.phaseOf = GROW;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const speed = clamp(k[1], 0.1, 4);\n  const rime = clamp(k[2], 0, 1);\n  P.rime = rime;\n  // The chance a walker that touches the frost freezes there.\n  const stick = 1 - 0.95 * Math.sqrt(rime);\n  P.glitter = clamp(k[3], 0, 1);\n  if (Math.abs(P.baked - k[0]) > 0.002) {\n    lampColour(k[0], P.lamp);\n    bake(P, k[0]);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The pane has been freezing for fifteen seconds of Speed when the panel\n    // opens, so the knobs have already shaped the frost.\n    const n = Math.round(PRE * RATE * speed * (1 + 1.5 * rime));\n    walk(P, n, stick, 1e9);\n    P.clock = 0;\n    for (let p = 0; p \u003c N; p++) P.born[p] = -9;\n  }\n  if (input.btnPressed && input.btnPressed[0]) breathe(P);\n  step(P, dt, speed, stick);\n  // Snow outside, falling past the lamp.\n  for (let i = 0; i \u003c FLAKES; i++) {\n    P.fy[i] += dt * (5 + 9 * P.fz[i]);\n    P.fx[i] += dt * (1.2 * Math.sin(P.clock * 0.7 + i) + 0.8);\n    if (P.fy[i] > H + 3) {\n      P.fy[i] = -3;\n      P.fx[i] = Math.random() * W;\n    }\n    if (P.fx[i] > W + 3) P.fx[i] -= W + 6;\n  }\n}\n\n// The street behind the glass, out of focus: snow clouds, the roofs across\n// the road with two windows lit, the lamp's glow and its pool on the snow.\n// It is drawn again only when the lamp changes.\nfunction bake(P, key) {\n  const base = P.base;\n  const L = P.lamp;\n  const grain = P.grain;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const roofY = 74 + 3 * Math.sin(x * 0.13 + 1) - 10 * smooth(8, 12, x) * (1 - smooth(22, 26, x)) - 6 * smooth(44, 47, x);\n      const dx = x - LX;\n      const dy = y - LY;\n      const d2 = dx * dx + dy * dy;\n      let r;\n      let g;\n      let b;\n      if (y \u003c roofY) {\n        // Snow clouds hang low and give back the street lights: navy\n        // overhead, the lamp's own colour down at the roofs.\n        const h = smooth(0, roofY, y);\n        const glow = 4 + 15 * h * h;\n        r = 3 * (1 - h) + glow * L[0];\n        g = 5 * (1 - h) + glow * L[1];\n        b = 15 * (1 - h) + glow * L[2];\n        // Snow lies along the roof edges.\n        const lip = Math.exp(-((y - roofY + 1.5) ** 2) / 2);\n        r += 8 * lip;\n        g += 9 * lip;\n        b += 11 * lip;\n      } else if (y \u003c 102) {\n        // The houses opposite, dark, with two windows lit by the rooms inside.\n        let win = 0;\n        for (const [wx, wy] of WINDOWS) {\n          const u = (x - wx) / 3.2;\n          const v = (y - wy) / 4;\n          win += Math.exp(-(u * u + v * v) * 2);\n        }\n        r = 3 + 4 * L[0] + 17 * win;\n        g = 3 + 4 * L[1] + 12 * win;\n        b = 5 + 4 * L[2] + 5 * win;\n      } else {\n        // Snow on the street, in a pool of light under the lamp.\n        const pool = Math.exp(-(dx * dx) / 260 - ((y - 114) ** 2) / 180);\n        r = 3 + (9 + 12 * pool) * L[0];\n        g = 4 + (9 + 12 * pool) * L[1];\n        b = 6 + (9 + 12 * pool) * L[2];\n      }\n      // The lamp's glow through the glass.\n      const glow = 16 / (1 + d2 / 50);\n      r += glow * L[0];\n      g += glow * L[1];\n      b += glow * L[2];\n      // Its pole, dark against the glow.\n      if (x >= LX - 1 && x \u003c= LX && y > LY + 2 && y \u003c 106) {\n        r *= 0.45;\n        g *= 0.45;\n        b *= 0.45;\n      }\n      base[p * 3] = r + GRAIN * grain[p * 3];\n      base[p * 3 + 1] = g + GRAIN * grain[p * 3 + 1];\n      base[p * 3 + 2] = b + GRAIN * grain[p * 3 + 2];\n    }\n  P.baked = key;\n}\n\n// Flakes falling past the window, soft and dim, brighter as they pass the lamp.\nfunction paintSnow(P) {\n  const bg = P.bg;\n  const L = P.lamp;\n  bg.set(P.base);\n  for (let i = 0; i \u003c FLAKES; i++) {\n    const fx = P.fx[i];\n    const fy = P.fy[i];\n    const near = Math.exp(-((fx - LX) ** 2 + (fy - LY) ** 2) / 500);\n    const v = (4 + 10 * near) * P.fz[i];\n    const xa = Math.max(0, Math.floor(fx - 2));\n    const xb = Math.min(W - 1, Math.ceil(fx + 2));\n    const ya = Math.max(0, Math.floor(fy - 2));\n    const yb = Math.min(H - 1, Math.ceil(fy + 2));\n    for (let y = ya; y \u003c= yb; y++)\n      for (let x = xa; x \u003c= xb; x++) {\n        const w = v * Math.exp(-((x - fx) ** 2 + (y - fy) ** 2) / 1.6);\n        const q = (y * W + x) * 3;\n        bg[q] += w * (0.7 + 0.3 * L[0]);\n        bg[q + 1] += w * (0.7 + 0.3 * L[1]);\n        bg[q + 2] += w * (0.8 + 0.2 * L[2]);\n      }\n  }\n}\n\nfunction byte(v) {\n  return v > 255 ? 255 : v \u003c 0 ? 0 : v | 0;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.bg) return;\n  paintSnow(P);\n  const { bg, frost, dist, facet, tint, born, spin, phase, lamp, lit, haze, core } = P;\n  const t = P.clock;\n  const gl = P.glitter;\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    let r = bg[q];\n    let g = bg[q + 1];\n    let b = bg[q + 2];\n    // The street stays under 24 everywhere but the lamp itself.\n    const m = r > g ? (r > b ? r : b) : g > b ? g : b;\n    if (m > 22) {\n      r *= 22 / m;\n      g *= 22 / m;\n      b *= 22 / m;\n    }\n    const f = facet[p];\n    const d = dist[p];\n    let sparkle = 1;\n    if (d \u003c= 1 && gl > 0) {\n      // Glitter: each face turns to the light and away again on its own beat.\n      const s = Math.sin(t * spin[p] + phase[p]);\n      sparkle = 1 - 0.6 * gl + (s > 0 ? 2.4 * gl * s * s * s : 0);\n    }\n    if (frost[p]) {\n      // A crystal just frozen flashes, then settles.\n      const age = t - born[p];\n      const v = (0.45 + 0.5 * f) * (age \u003c 0.5 ? 1.7 - 1.4 * age : 1) * sparkle;\n      // The brightest faces run white; near the lamp the ice is its colour.\n      const w = 90 * f * f * f * f * v;\n      const a = 280 * lit[p] * v;\n      r = (ICE[0] * v + a * lamp[0] + w) * tint[q];\n      g = (ICE[1] * v + a * lamp[1] + w) * tint[q + 1];\n      b = (ICE[2] * v + a * lamp[2] + w) * tint[q + 2];\n    } else {\n      // The lamp's head, where no frost hides it.\n      const c0 = core[p];\n      if (c0 > 0.5) {\n        r += c0 * lamp[0];\n        g += c0 * lamp[1];\n        b += c0 * lamp[2];\n      }\n      // Where frost has just melted the glass is wet for a moment.\n      const wet = t - born[p];\n      if (wet >= 0 && wet \u003c 1.5) {\n        const e = (1 - wet / 1.5) * (0.3 + f);\n        r += 30 * e;\n        g += 44 * e;\n        b += 60 * e;\n      }\n      if (d \u003c= 2) {\n        // A film of hoar frost round the ferns, lit one step out and kept\n        // under 24 the next. It scatters the lamp's light farther than the\n        // ferns do.\n        const near = d === 1;\n        const film = (near ? 0.17 * sparkle : 0.06) * (0.6 + 0.8 * f);\n        const hz = haze[p];\n        const c = 1 - 0.6 * hz;\n        const keep = near ? 0.5 : 0.7;\n        r = keep * r + (ICE[0] * c + 300 * hz * lamp[0]) * film;\n        g = keep * g + (ICE[1] * c + 300 * hz * lamp[1]) * film;\n        b = keep * b + (ICE[2] * c + 300 * hz * lamp[2]) * film;\n        if (!near) {\n          const n = r > g ? (r > b ? r : b) : g > b ? g : b;\n          if (n > 23) {\n            r *= 23 / n;\n            g *= 23 / n;\n            b *= 23 / n;\n          }\n        }\n      }\n    }\n    display.setPixel(p % W, (p / W) | 0, byte(r), byte(g), byte(b));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Speed=0.2..3, Rime=0..1, Glitter=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"The street light behind the glass, from a sodium lamp's amber through warm and cold white to a mercury lamp's blue-green and a pink shop sign; the snow clouds, the street and the frost near the lamp take its colour."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the frost grows: at 2 about forty crystals freeze each second and the pane is frosted over 17 seconds after the panel opens; at 0.2 the ferns have only begun."},{"name":"Rime","min":0,"max":1,"about":"How readily vapour sticks where it touches the frost: at 0 every touch counts and the ferns grow thin and feathery; turned up, most touches bounce off and wander deeper in, and the frost packs into a dense white crust along the frame."},{"name":"Glitter","min":0,"max":1,"about":"How hard the crystal faces flash as they turn to the light, from a matte frost to every fern sparkling."}],"start":[0,2,0,0.06],"measures":{"motion":0.0377,"detail":0.1373,"edges":0.4636,"complexity":2.383,"coverage":0.4303,"colour":0.1004,"drift":0.0382},"knobResponse":[0.0509,0.1276,0.1564,0.0602]},{"slug":"galilean-moons","title":"Galilean Moons","family":"celestial","round":22,"note":"목성의 네 위성을 관측 도표로 그려요. 위쪽 접안렌즈에서는 줄무늬 목성이 돌고 이오의 그림자가 원반을 지나가며, 아래 도표에서는 위성마다 제 사인 곡선을 그리며 날짜가 위로 올라와요.","idea":"Jupiter's four big moons as an observer's chart: the eyepiece at the top shows the belted planet turning, its moons in a line and their shadows crossing the disc, and below it each moon traces its own sine round Jupiter's band, ten rows a day, as the days to come scroll up to the eyepiece.","buttons":"K1 tap jumps ahead to the next shadow transit, an hour before the shadow touches Jupiter's limb.","code":"// ===== Patternflow pattern =====\n// Title:   Galilean Moons\n// Family:  celestial\n// Idea:    Jupiter's four big moons as an observer's chart: the eyepiece at the top shows the belted planet turning, its moons in a line and their shadows crossing the disc, and below it each moon traces its own sine round Jupiter's band, ten rows a day, as the days to come scroll up to the eyepiece.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the Jupiter's-moons chart Sky & Telescope prints each month, computed with Jean Meeus's low-accuracy theory of the four satellites\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Sky=0..1, Speed=0.5..24, Power=0..1, Seeing=0..1\n//\n// Knob 1: Sky. The light the chart is read by: a night chart in navy at 0, red-light observing mode at the middle, the printed paper chart at 1.\n// Knob 2: Speed. Hours of Jupiter's time a second: at 2 the Great Red Spot comes round every 5 seconds and the chart climbs a row every 1.2 seconds; 0.5 to 24, a day a second.\n// Knob 3: Power. The eyepiece's magnification, which also sets the chart's scale: at 0 the field holds Callisto's whole orbit; turned up, Callisto, then Ganymede, then Europa run off the sides at elongation until only Io's orbit fits.\n// Knob 4: Seeing. Turbulence in the air over the telescope: steady near 0, and toward 1 the disc wobbles, boils and blurs into a glow until the belts are gone.\n// Buttons: K1 tap jumps ahead to the next shadow transit, an hour before the shadow touches Jupiter's limb.\n\nconst W = 64;\nconst H = 128;\nconst { sin, cos, asin, atan2, sqrt, floor, round, min, max, abs, exp, pow, PI } = Math;\nconst RAD = PI / 180;\nconst CX = 31.5;\n// The eyepiece fills rows 0 to 37: the close-up round row 16 and the\n// low-power line on row 35. The chart starts at row 38 with row 35 as now.\nconst EY = 16;\nconst LY = 35;\nconst C0 = 38;\nconst EYE = C0;\n// 2026 October 23, 18:00 UT, three months before the February 2027\n// opposition, when Earth crosses Jupiter's equator and the moons pass right\n// over each other; the panel opens at the first shadow transit after it.\nconst JD0 = 2461337.25;\n// The Great Red Spot's System II longitude, about where it drifts to by late 2026.\nconst GRS = 78;\n// Meeus: each moon's longitude at J2000 and daily motion in degrees, its\n// radius in Jupiter radii.\nconst U0 = [163.8069, 358.414, 5.7176, 224.8092];\nconst UN = [203.4058646, 101.2916335, 50.234518, 21.48798];\nconst RM = [0.0255, 0.0219, 0.0368, 0.0337];\n// Dot and shadow radii in the close-up, in LEDs. Io is 0.7 LEDs across at\n// the lowest power, so the moons are drawn two and a half times too big.\nconst DOT = [0.85, 0.75, 1.15, 1.05];\n// Io yellow-orange, Europa white, Ganymede grey-brown, Callisto grey-blue,\n// as they look in the eyepiece, and the albedo they show against the disc.\nconst EYEC = [\n  [255, 196, 84],\n  [240, 242, 248],\n  [206, 178, 146],\n  [128, 150, 200],\n];\nconst ALB = [1, 1, 0.78, 0.62];\n// Chart palettes: night, red light, paper. bg0/bg1 alternate by day.\nconst PAL = [\n  {\n    bg0: [8, 14, 40], bg1: [16, 28, 72], band: [196, 170, 128], shadow: [26, 18, 20], label: [104, 124, 178],\n    moon: [[255, 170, 40], [236, 240, 250], [190, 156, 118], [118, 146, 210]],\n  },\n  {\n    bg0: [14, 0, 0], bg1: [42, 2, 0], band: [128, 12, 4], shadow: [4, 0, 0], label: [120, 8, 0],\n    moon: [[230, 44, 10], [255, 96, 66], [176, 26, 8], [128, 14, 4]],\n  },\n  {\n    bg0: [232, 224, 204], bg1: [212, 204, 184], band: [190, 162, 118], shadow: [36, 26, 20], label: [112, 100, 88],\n    moon: [[222, 100, 8], [28, 32, 52], [126, 80, 42], [34, 76, 152]],\n  },\n];\n// 3x5 digits for the day labels.\nconst DIG = [0x7b6f, 0x2c97, 0x73e7, 0x73cf, 0x5bc9, 0x79cf, 0x79ef, 0x7249, 0x7bef, 0x7bcf];\n\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, x) => {\n  const t = cl((x - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\n// Signed difference of two angles in degrees, -180..180.\nconst wrap = (a) => a - 360 * floor((a + 180) / 360);\n\n// Jupiter seen from Earth at Julian date jd: distance, phase angle, the\n// declinations of the Earth and the Sun over its equator, the shadow's\n// direction and the System I and II central meridians (Meeus, chapter 44).\nfunction sky(jd, S) {\n  const d = jd - 2451545;\n  const V = (172.74 + 0.00111588 * d) * RAD;\n  const M = (357.529 + 0.9856003 * d) * RAD;\n  const N = (20.02 + 0.0830853 * d + 0.329 * sin(V)) * RAD;\n  const J = (66.115 + 0.9025179 * d - 0.329 * sin(V)) * RAD;\n  const A = (1.915 * sin(M) + 0.02 * sin(2 * M)) * RAD;\n  const B = (5.555 * sin(N) + 0.168 * sin(2 * N)) * RAD;\n  const K = J + A - B;\n  const R = 1.00014 - 0.01671 * cos(M) - 0.00014 * cos(2 * M);\n  const r = 5.20872 - 0.25208 * cos(N) - 0.00611 * cos(2 * N);\n  const dist = sqrt(r * r + R * R - 2 * r * R * cos(K));\n  const psi = asin((R / dist) * sin(K));\n  const lam = (34.35 + 0.083091 * d + 0.329 * sin(V)) * RAD + B;\n  S.Ds = 3.12 * RAD * sin(lam + 42.8 * RAD);\n  S.De = S.Ds - 2.22 * RAD * sin(psi) * cos(lam + 22 * RAD) - 1.3 * RAD * ((r - dist) / dist) * sin(lam - 100.5 * RAD);\n  S.lt = dist / 173;\n  S.ph = psi - B;\n  // The shadow points away from the Sun: west (right) before opposition.\n  S.sx = -sin(psi);\n  S.sz = cos(psi);\n  const t = d - S.lt;\n  S.w1 = 210.98 + 877.8169088 * t + S.ph / RAD;\n  S.w2 = 187.23 + 870.1869088 * t + S.ph / RAD;\n}\n\nfunction makeMoons() {\n  const F = () => new Float64Array(4);\n  return { X: F(), Y: F(), Z: F(), vis: F(), sx: F(), sy: F(), son: F(), u: F() };\n}\n\n// The four moons at jd using the slow terms in S. X is west (right) and Y\n// north in Jupiter radii, Z away from Earth. vis is how much of the moon is\n// neither behind Jupiter nor in its shadow; son is how much of its shadow\n// lies on the side of the disc we see, at (sx, sy).\nfunction moons(jd, S, Mo) {\n  const t = jd - 2451545 - S.lt;\n  const u = Mo.u;\n  for (let i = 0; i \u003c 4; i++) u[i] = (U0[i] + UN[i] * t) * RAD + S.ph;\n  const G = (331.18 + 50.310482 * t) * RAD;\n  const Hh = (87.45 + 21.569231 * t) * RAD;\n  const a = u[0], b = u[1], c = u[2];\n  u[0] += 0.473 * RAD * sin(2 * (a - b));\n  u[1] += 1.065 * RAD * sin(2 * (b - c));\n  u[2] += 0.165 * RAD * sin(G);\n  u[3] += 0.843 * RAD * sin(Hh);\n  const rr0 = 5.9057 - 0.0244 * cos(2 * (a - b));\n  const rr1 = 9.3966 - 0.0882 * cos(2 * (b - c));\n  const rr2 = 14.9883 - 0.0216 * cos(G);\n  const rr3 = 26.3627 - 0.1939 * cos(Hh);\n  const sDe = sin(S.De);\n  for (let i = 0; i \u003c 4; i++) {\n    const r = i === 0 ? rr0 : i === 1 ? rr1 : i === 2 ? rr2 : rr3;\n    const X = r * sin(u[i]);\n    const Z = -r * cos(u[i]);\n    const Y = Z * sDe;\n    Mo.X[i] = X;\n    Mo.Y[i] = Y;\n    Mo.Z[i] = Z;\n    let vis = 1;\n    if (Z > 0) vis = sm(1 - RM[i], 1 + RM[i], sqrt(X * X + (Y / 0.935) ** 2));\n    const al = X * S.sx + Z * S.sz;\n    if (al > 0) {\n      const pe = X * S.sz - Z * S.sx;\n      const v = (al * S.Ds) / 0.935;\n      const w = RM[i] + al * 0.0012;\n      vis *= sm(1 - w, 1 + w, sqrt(pe * pe + v * v));\n    }\n    Mo.vis[i] = vis;\n    Mo.son[i] = 0;\n    if (Z \u003c 0) {\n      const cc = X * X + Z * Z - 1;\n      const disc = al * al - cc;\n      if (disc > 0) {\n        const tt = -al - sqrt(disc);\n        const zh = Z + tt * S.sz;\n        if (tt > 0 && zh \u003c 0) {\n          const xh = X + tt * S.sx;\n          const yh = Y - tt * S.Ds;\n          Mo.sx[i] = xh;\n          Mo.sy[i] = yh;\n          Mo.son[i] = 1 - sm(0.93, 1, sqrt(xh * xh + (yh / 0.935) ** 2));\n        }\n      }\n    }\n  }\n}\n\n// Day of the month of the civil day that starts at jd (Meeus, chapter 7).\nfunction dayOf(jd) {\n  const Z = floor(jd + 0.5);\n  const al = floor((Z - 1867216.25) / 36524.25);\n  const A = Z + 1 + al - floor(al / 4);\n  const B = A + 1524;\n  const C = floor((B - 122.1) / 365.25);\n  const D = floor(365.25 * C);\n  const E = floor((B - D) / 30.6001);\n  return B - D - floor(30.6001 * E);\n}\n\n// Cloud colours at planetographic latitude lat (degrees) and System I and II\n// longitudes L1, L2 (degrees, west). Writes albedo 0..1 into o.\nfunction cloud(lat, L1, L2, o) {\n  const al = abs(lat);\n  let r = 0.94, g = 0.89, b = 0.77;\n  const put = (cr, cg, cb, a) => {\n    r += (cr - r) * a;\n    g += (cg - g) * a;\n    b += (cb - b) * a;\n  };\n  const l1 = L1 * RAD, l2 = L2 * RAD;\n  // Polar hoods.\n  put(0.6, 0.57, 0.54, 0.85 * sm(28, 58, al));\n  // North Equatorial Belt, festoons trailing from its south edge.\n  const ns = 6.8 + 1.1 * sin(6 * l1 + 1) + 0.6 * sin(13 * l1);\n  const nn = 17.5 + 1.2 * sin(2 * l2 + 0.4) + 0.7 * sin(5 * l2 + 2);\n  let a = sm(ns - 1, ns + 1, lat) * (1 - sm(nn - 1, nn + 1, lat));\n  put(0.6, 0.37, 0.23, 0.88 * a);\n  // Festoons: dark plumes, unevenly spaced, slanting down into the EZ.\n  const fe = sin(10 * l1 + 0.12 * lat + 0.9 * sin(3 * l1 + 2));\n  put(0.4, 0.43, 0.54, 0.7 * sm(0.5, 0.9, fe) * sm(1.5 + 2.5 * sin(7 * l1) ** 2, 6.5, lat) * (1 - sm(6.5, 8, lat)));\n  // Barges: dark red ovals in the NEB's north half.\n  for (const bl of [40, 165, 290]) {\n    const e = (wrap(L2 - bl) / 5) ** 2 + ((lat - 15) / 1.8) ** 2;\n    put(0.42, 0.2, 0.14, 0.9 * (1 - sm(0.5, 1.1, e)));\n  }\n  // The Great Red Spot and the hollow it presses into the SEB.\n  const eg = (wrap(L2 - GRS) / 8) ** 2 + ((lat + 22.5) / 5) ** 2;\n  // South Equatorial Belt, paler down its middle.\n  const ss = -19.5 + 0.9 * sin(3 * l2 + 2) + 0.5 * sin(8 * l2);\n  const sn = -7.5 + 0.8 * sin(4 * l2) + 0.5 * sin(11 * l1 + 1);\n  a = sm(ss - 1, ss + 1, lat) * (1 - sm(sn - 1, sn + 1, lat));\n  a *= 1 - 0.4 * exp(-(((lat + 13.5) / 2.6) ** 2)) * (0.6 + 0.4 * sin(5 * l2 + 1));\n  a *= sm(1.1, 2.4, eg);\n  put(0.66, 0.44, 0.28, 0.8 * a);\n  put(0.88, 0.45, 0.31, 1 - sm(0.6, 1, eg));\n  // Temperate belts, white ovals in the south one.\n  const st = -29 + 0.8 * sin(3 * l2 + 4);\n  put(0.7, 0.55, 0.41, 0.62 * sm(st - 2.5, st - 1, lat) * (1 - sm(st + 1, st + 2.5, lat)));\n  for (const wl of [100, 215, 335]) {\n    const e = (wrap(L2 - wl) / 4.5) ** 2 + ((lat + 33) / 2.4) ** 2;\n    put(1, 0.99, 0.95, 0.85 * (1 - sm(0.4, 1, e)));\n  }\n  const nt = 26 + 0.9 * sin(4 * l2 + 1);\n  put(0.68, 0.51, 0.37, 0.6 * sm(nt - 2.5, nt - 1, lat) * (1 - sm(nt + 1, nt + 2.5, lat)));\n  put(0.72, 0.62, 0.52, 0.4 * exp(-(((al - 37) / 1.6) ** 2)));\n  o[0] = r;\n  o[1] = g;\n  o[2] = b;\n}\n\n// A soft dot of colour c and strength a added into buffer f (stride W).\nfunction dot(f, rows, x, y, rad, c, a) {\n  const x0 = max(0, floor(x - rad - 1)), x1 = min(W - 1, floor(x + rad + 1));\n  const y0 = max(0, floor(y - rad - 1)), y1 = min(rows - 1, floor(y + rad + 1));\n  for (let j = y0; j \u003c= y1; j++)\n    for (let i = x0; i \u003c= x1; i++) {\n      const k = cl(rad + 0.5 - sqrt((i - x) ** 2 + (j - y) ** 2), 0, 1) * a;\n      if (k \u003c= 0) continue;\n      const o = (j * W + i) * 3;\n      f[o] += (c[0] - f[o]) * k;\n      f[o + 1] += (c[1] - f[o + 1]) * k;\n      f[o + 2] += (c[2] - f[o + 2]) * k;\n    }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.S = {};\n  P.Mo = makeMoons();\n  P.eye = new Float32Array(W * C0 * 3);\n  P.tmp = new Float32Array(W * EYE * 3);\n  P.row = new Float32Array(W * 3);\n  P.al = new Float32Array(W * 4);\n  P.sh = new Float32Array(W);\n  P.xp = new Float64Array(4);\n  P.vp = new Float64Array(4);\n  P.cs = new Float32Array(3);\n  P.clock = 0;\n  Object.assign(P, { skyk: 0, speed: 2, power: 0, seeing: 0.06 });\n  // Open five hours before the first shadow touches the limb, which at the\n  // opening speed brings it on at 2.5 seconds.\n  P.jd = nextShadow(JD0) - 5 / 24;\n}\n\n// The next time after jd that a moon's shadow reaches the disc.\nfunction nextShadow(jd) {\n  const S = {}, Mo = makeMoons();\n  let was = 0;\n  for (let k = 0; k \u003c 2000; k++) {\n    const t = jd + k * 0.01;\n    if (k % 10 === 0) sky(t, S);\n    moons(t, S, Mo);\n    let on = 0;\n    for (let i = 0; i \u003c 4; i++) if (Mo.son[i] > 0.5) on |= 1 \u003c\u003c i;\n    if (k > 0 && on & ~was) return t;\n    was = on;\n  }\n  return jd;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.skyk = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.5, 24);\n  P.power = cl(k[2], 0, 1);\n  P.seeing = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.jd = nextShadow(P.jd + 0.02) - 1 / 24;\n  P.jd += (dt * P.speed) / 24;\n  P.clock += dt;\n}\n\n// The close-up eyepiece: Jupiter at Rc LEDs a radius, with seeing.\nfunction eyepiece(P, S, Mo, Rc) {\n  const f = P.eye;\n  const see = P.seeing;\n  const tm = P.clock;\n  const cs = P.cs;\n  // Image motion: the whole disc wanders, and each row ripples on its own.\n  const gx = see * (2.6 * sin(tm * 3.1) * sin(tm * 1.27 + 1) + 1.3 * sin(tm * 7.3 + 2));\n  const gy = see * (1.5 * sin(tm * 2.3 + 4) * sin(tm * 0.9) + 0.8 * sin(tm * 6.1 + 1));\n  const Rp = Rc * 0.935;\n  const cy = EY + gy;\n  const w1 = S.w1, w2 = S.w2;\n  for (let y = 0; y \u003c EYE; y++) {\n    const rip = see * 1.3 * sin(y * 0.9 + tm * 11) * sin(y * 0.37 - tm * 5.3 + 1.3);\n    const cx = CX + gx + rip;\n    const ny = (y - cy) / Rp;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      const nx = (x - cx) / Rc;\n      const q = nx * nx + ny * ny;\n      const rho = sqrt(q);\n      // Glare round the disc: the seeing disc's wings.\n      const out = max(0, rho - 1) * Rc;\n      const halo = (4 + 110 * see) / pow(1 + (out / (2 + 10 * see)) ** 2, 1.5) * (rho > 1 ? 1 : 0);\n      f[o] = 3 + halo * 0.95;\n      f[o + 1] = 4 + halo * 0.9;\n      f[o + 2] = 8 + halo * 0.8;\n      if (rho >= 1 + 1 / Rc) continue;\n      const edge = cl((1 - rho) * Rc + 0.6, 0, 1);\n      const mu = sqrt(max(0, 1 - min(q, 1)));\n      const lat = -asin(cl(ny, -1, 1)) / RAD;\n      const lon = atan2(nx, mu) / RAD;\n      cloud(lat, w1 - lon, w2 - lon, cs);\n      let lum = 255 * (0.18 + 0.82 * pow(mu, 0.55));\n      // The phase: a thin shade on the limb away from the Sun.\n      lum *= 1 - 0.35 * sm(0.75, 1, nx * (S.sx > 0 ? 1 : -1)) * abs(S.sx) * 5;\n      for (let i = 0; i \u003c 4; i++) {\n        if (Mo.son[i] \u003c= 0) continue;\n        const dx = (x - cx - Mo.sx[i] * Rc), dy = (y - cy + Mo.sy[i] * Rc);\n        lum *= 1 - 0.9 * Mo.son[i] * cl(DOT[i] + 0.55 - sqrt(dx * dx + dy * dy), 0, 1);\n      }\n      f[o] += (cs[0] * lum - f[o]) * edge;\n      f[o + 1] += (cs[1] * lum - f[o + 1]) * edge;\n      f[o + 2] += (cs[2] * lum - f[o + 2]) * edge;\n    }\n  }\n  // Moons in the field, in front of the disc or beside it.\n  for (let i = 0; i \u003c 4; i++) {\n    const x = CX + gx + Mo.X[i] * Rc, y = cy - Mo.Y[i] * Rc;\n    if (x \u003c -3 || x > W + 3 || Mo.vis[i] \u003c= 0.01) continue;\n    const onDisc = Mo.Z[i] \u003c 0 && Mo.X[i] ** 2 + (Mo.Y[i] / 0.935) ** 2 \u003c 1;\n    const tw = 1 + see * 0.35 * sin(tm * (17 + i * 3) + i);\n    const c = EYEC[i].map((v) => v * (onDisc ? ALB[i] : 1) * min(1.1, tw));\n    dot(f, EYE, x, y, DOT[i] * (1 + see * 0.6), c, Mo.vis[i]);\n  }\n  // Seeing blurs the image: a separable Gaussian.\n  const sg = 0.2 + 1.7 * see;\n  if (sg > 0.35) {\n    const rad = min(5, Math.ceil(sg * 2.5));\n    const ker = [];\n    let ks = 0;\n    for (let i = -rad; i \u003c= rad; i++) ks += ker[i + rad] = exp(-(i * i) / (2 * sg * sg));\n    const t = P.tmp;\n    for (let y = 0; y \u003c EYE; y++)\n      for (let x = 0; x \u003c W; x++)\n        for (let c = 0; c \u003c 3; c++) {\n          let s = 0;\n          for (let i = -rad; i \u003c= rad; i++) s += ker[i + rad] * f[(y * W + cl(x + i, 0, W - 1)) * 3 + c];\n          t[(y * W + x) * 3 + c] = s / ks;\n        }\n    for (let y = 0; y \u003c EYE; y++)\n      for (let x = 0; x \u003c W; x++)\n        for (let c = 0; c \u003c 3; c++) {\n          let s = 0;\n          for (let i = -rad; i \u003c= rad; i++) s += ker[i + rad] * t[(cl(y + i, 0, EYE - 1) * W + x) * 3 + c];\n          f[(y * W + x) * 3 + c] = s / ks;\n        }\n  }\n}\n\n// The low-power line under the close-up: Jupiter and its moons at the chart's scale.\nfunction line(P, Mo, Rj, Rc) {\n  const f = P.eye;\n  // Two faint lines from under the close-up down to the planet it magnifies.\n  for (const s of [-1, 1]) {\n    const xa = CX + s * Rc * 0.45, ya = EY + Rc * 0.935 + 1;\n    const xb = CX + s * (Rj + 0.8), yb = LY - 1.5;\n    const n = max(2, round(yb - ya));\n    for (let k = 0; k \u003c= n; k++) {\n      const x = round(mix(xa, xb, k / n)), y = round(mix(ya, yb, k / n));\n      const o = (y * W + x) * 3;\n      if (y \u003c C0 && x >= 0 && x \u003c W) for (let c = 0; c \u003c 3; c++) f[o + c] = max(f[o + c], [34, 40, 62][c]);\n    }\n  }\n  const hj = min(Rj * 0.935, 2.2);\n  for (let y = LY - 3; y \u003c= LY + 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const nx = (x - CX) / Rj, ny = (y - LY) / hj;\n      const rho = sqrt(nx * nx + ny * ny);\n      const k = cl((1 - rho) * max(1.2, Rj) + 0.7, 0, 1);\n      if (k \u003c= 0) continue;\n      const lum = 0.55 + 0.45 * sqrt(max(0, 1 - rho * rho));\n      const o = (y * W + x) * 3;\n      f[o] += (236 * lum - f[o]) * k;\n      f[o + 1] += (220 * lum - f[o + 1]) * k;\n      f[o + 2] += (186 * lum - f[o + 2]) * k;\n    }\n  for (let i = 0; i \u003c 4; i++) {\n    if (Mo.vis[i] \u003c= 0.01) continue;\n    dot(f, C0, CX + Mo.X[i] * Rj, LY - Mo.Y[i] * Rj, 0.7, EYEC[i], Mo.vis[i]);\n  }\n}\n\nfunction blend(k1) {\n  const s = k1 * 2;\n  const i = min(1, floor(s)), t = sm(0, 1, s - i);\n  const a = PAL[i], b = PAL[i + 1];\n  const m = (u, v) => u.map((x, j) => mix(x, v[j], t));\n  const o = {};\n  for (const key of [\"bg0\", \"bg1\", \"band\", \"shadow\", \"label\"]) o[key] = m(a[key], b[key]);\n  o.moon = a.moon.map((c, j) => m(c, b.moon[j]));\n  return o;\n}\n\n// The chart: ten rows a day at the lowest power, now at row LY, the day\n// numbers down the left edge under the line each day starts on.\nfunction chart(P, display, pal, Rj) {\n  const rpd = 10 * pow(Rj / 1.15, 0.6);\n  const S = P.S2 || (P.S2 = {});\n  const Mo = P.Mo2 || (P.Mo2 = makeMoons());\n  const { row, al, sh } = P;\n  const hw = 0.55;\n  const marks = new Set();\n  for (let d = floor(P.jd + (C0 - 6 - LY) / rpd - 0.5) + 1.5; d \u003c P.jd + (H - LY) / rpd; d++) {\n    const n = dayOf(d + 0.01), yb = round(LY + (d - P.jd) * rpd);\n    const s = n \u003c 10 ? [n] : [floor(n / 10), n % 10];\n    s.forEach((dg, j) => {\n      for (let b = 0; b \u003c 15; b++) if ((DIG[dg] >> (14 - b)) & 1) marks.add((yb + 1 + floor(b / 3)) * W + 1 + j * 4 + (b % 3));\n    });\n  }\n  for (let y = C0; y \u003c H; y++) {\n    const tc = P.jd + (y - LY) / rpd;\n    const ta = tc - 0.5 / rpd, tb = tc + 0.5 / rpd;\n    // Alternate days light and dark, split where a day starts inside the row.\n    const da = floor(ta - 0.5);\n    let odd = da & 1;\n    const nb = da + 1.5;\n    if (nb \u003c tb) {\n      const fr = (tb - nb) * rpd;\n      odd = odd * (1 - fr) + (1 - (da & 1)) * fr;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const lab = marks.has(y * W + x);\n      for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = lab ? pal.label[c] : mix(pal.bg0[c], pal.bg1[c], odd);\n    }\n    // Jupiter's band, rounded off by its limb.\n    for (let x = floor(CX - Rj - 1); x \u003c= CX + Rj + 1; x++) {\n      const k = cl(min(x + 0.5, CX + Rj) - max(x - 0.5, CX - Rj), 0, 1);\n      if (k \u003c= 0) continue;\n      const dx = (x - CX) / Rj;\n      const lum = 0.62 + 0.38 * sqrt(max(0, 1 - dx * dx));\n      for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.band[c] * lum, k);\n    }\n    sky(tc, S);\n    al.fill(0);\n    sh.fill(0);\n    const xp = P.xp, vp = P.vp;\n    for (let s = 0; s \u003c= 4; s++) {\n      moons(ta + (s / 4) * (tb - ta), S, Mo);\n      for (let i = 0; i \u003c 4; i++) {\n        const x = CX + Mo.X[i] * Rj, v = Mo.vis[i];\n        if (Mo.son[i] > 0) {\n          const xs = CX + Mo.sx[i] * Rj;\n          for (let xx = max(0, floor(xs - 1)); xx \u003c= min(W - 1, xs + 1); xx++)\n            sh[xx] = max(sh[xx], Mo.son[i] * cl(1 - abs(xx - xs) * 0.8, 0, 1));\n        }\n        if (s > 0) {\n          const lo = min(x, xp[i]) - hw, hi = max(x, xp[i]) + hw, vv = min(v, vp[i]);\n          if (vv > 0.02 && hi > -1 && lo \u003c W)\n            for (let xx = max(0, floor(lo)); xx \u003c= min(W - 1, floor(hi + 1)); xx++) {\n              const k = cl(min(xx + 0.5, hi) - max(xx - 0.5, lo), 0, 1) * vv;\n              if (k > al[xx * 4 + i]) al[xx * 4 + i] = k;\n            }\n        }\n        xp[i] = x;\n        vp[i] = v;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      if (sh[x] > 0) for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.shadow[c], sh[x] * 0.9);\n      for (let i = 3; i >= 0; i--) {\n        const k = al[x * 4 + i];\n        if (k > 0) for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.moon[i][c], k);\n      }\n      display.setPixel(x, y, min(255, row[x * 3]), min(255, row[x * 3 + 1]), min(255, row[x * 3 + 2]));\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.eye) setup(P);\n  const S = P.S, Mo = P.Mo;\n  sky(P.jd, S);\n  moons(P.jd, S, Mo);\n  const p = P.power;\n  const Rj = 1.15 * pow(5.1 / 1.15, p);\n  const Rc = 14 + 2.5 * p;\n  eyepiece(P, S, Mo, Rc);\n  line(P, Mo, Rj, Rc);\n  // Red light turns the eyepiece's colours to shades of red.\n  const red = sm(0, 1, 1 - abs(P.skyk * 2 - 1));\n  const f = P.eye;\n  for (let i = 0, o = 0; i \u003c W * C0; i++, o += 3) {\n    let r = f[o], g = f[o + 1], b = f[o + 2];\n    if (red > 0) {\n      const l = 0.5 * r + 0.4 * g + 0.1 * b;\n      r = mix(r, l, red);\n      g = mix(g, l * 0.06, red);\n      b = mix(b, 0, red);\n    }\n    display.setPixel(i % W, (i / W) | 0, min(255, r), min(255, g), min(255, b));\n  }\n  const pal = blend(P.skyk);\n  chart(P, display, pal, Rj);\n}\n","layer":{"id":"layer-galilean-moons","type":"code","name":"galilean-moons","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Galilean Moons\n// Family:  celestial\n// Idea:    Jupiter's four big moons as an observer's chart: the eyepiece at the top shows the belted planet turning, its moons in a line and their shadows crossing the disc, and below it each moon traces its own sine round Jupiter's band, ten rows a day, as the days to come scroll up to the eyepiece.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the Jupiter's-moons chart Sky & Telescope prints each month, computed with Jean Meeus's low-accuracy theory of the four satellites\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Sky=0..1, Speed=0.5..24, Power=0..1, Seeing=0..1\n//\n// Knob 1: Sky. The light the chart is read by: a night chart in navy at 0, red-light observing mode at the middle, the printed paper chart at 1.\n// Knob 2: Speed. Hours of Jupiter's time a second: at 2 the Great Red Spot comes round every 5 seconds and the chart climbs a row every 1.2 seconds; 0.5 to 24, a day a second.\n// Knob 3: Power. The eyepiece's magnification, which also sets the chart's scale: at 0 the field holds Callisto's whole orbit; turned up, Callisto, then Ganymede, then Europa run off the sides at elongation until only Io's orbit fits.\n// Knob 4: Seeing. Turbulence in the air over the telescope: steady near 0, and toward 1 the disc wobbles, boils and blurs into a glow until the belts are gone.\n// Buttons: K1 tap jumps ahead to the next shadow transit, an hour before the shadow touches Jupiter's limb.\n\nconst W = 64;\nconst H = 128;\nconst { sin, cos, asin, atan2, sqrt, floor, round, min, max, abs, exp, pow, PI } = Math;\nconst RAD = PI / 180;\nconst CX = 31.5;\n// The eyepiece fills rows 0 to 37: the close-up round row 16 and the\n// low-power line on row 35. The chart starts at row 38 with row 35 as now.\nconst EY = 16;\nconst LY = 35;\nconst C0 = 38;\nconst EYE = C0;\n// 2026 October 23, 18:00 UT, three months before the February 2027\n// opposition, when Earth crosses Jupiter's equator and the moons pass right\n// over each other; the panel opens at the first shadow transit after it.\nconst JD0 = 2461337.25;\n// The Great Red Spot's System II longitude, about where it drifts to by late 2026.\nconst GRS = 78;\n// Meeus: each moon's longitude at J2000 and daily motion in degrees, its\n// radius in Jupiter radii.\nconst U0 = [163.8069, 358.414, 5.7176, 224.8092];\nconst UN = [203.4058646, 101.2916335, 50.234518, 21.48798];\nconst RM = [0.0255, 0.0219, 0.0368, 0.0337];\n// Dot and shadow radii in the close-up, in LEDs. Io is 0.7 LEDs across at\n// the lowest power, so the moons are drawn two and a half times too big.\nconst DOT = [0.85, 0.75, 1.15, 1.05];\n// Io yellow-orange, Europa white, Ganymede grey-brown, Callisto grey-blue,\n// as they look in the eyepiece, and the albedo they show against the disc.\nconst EYEC = [\n  [255, 196, 84],\n  [240, 242, 248],\n  [206, 178, 146],\n  [128, 150, 200],\n];\nconst ALB = [1, 1, 0.78, 0.62];\n// Chart palettes: night, red light, paper. bg0/bg1 alternate by day.\nconst PAL = [\n  {\n    bg0: [8, 14, 40], bg1: [16, 28, 72], band: [196, 170, 128], shadow: [26, 18, 20], label: [104, 124, 178],\n    moon: [[255, 170, 40], [236, 240, 250], [190, 156, 118], [118, 146, 210]],\n  },\n  {\n    bg0: [14, 0, 0], bg1: [42, 2, 0], band: [128, 12, 4], shadow: [4, 0, 0], label: [120, 8, 0],\n    moon: [[230, 44, 10], [255, 96, 66], [176, 26, 8], [128, 14, 4]],\n  },\n  {\n    bg0: [232, 224, 204], bg1: [212, 204, 184], band: [190, 162, 118], shadow: [36, 26, 20], label: [112, 100, 88],\n    moon: [[222, 100, 8], [28, 32, 52], [126, 80, 42], [34, 76, 152]],\n  },\n];\n// 3x5 digits for the day labels.\nconst DIG = [0x7b6f, 0x2c97, 0x73e7, 0x73cf, 0x5bc9, 0x79cf, 0x79ef, 0x7249, 0x7bef, 0x7bcf];\n\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, x) => {\n  const t = cl((x - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\n// Signed difference of two angles in degrees, -180..180.\nconst wrap = (a) => a - 360 * floor((a + 180) / 360);\n\n// Jupiter seen from Earth at Julian date jd: distance, phase angle, the\n// declinations of the Earth and the Sun over its equator, the shadow's\n// direction and the System I and II central meridians (Meeus, chapter 44).\nfunction sky(jd, S) {\n  const d = jd - 2451545;\n  const V = (172.74 + 0.00111588 * d) * RAD;\n  const M = (357.529 + 0.9856003 * d) * RAD;\n  const N = (20.02 + 0.0830853 * d + 0.329 * sin(V)) * RAD;\n  const J = (66.115 + 0.9025179 * d - 0.329 * sin(V)) * RAD;\n  const A = (1.915 * sin(M) + 0.02 * sin(2 * M)) * RAD;\n  const B = (5.555 * sin(N) + 0.168 * sin(2 * N)) * RAD;\n  const K = J + A - B;\n  const R = 1.00014 - 0.01671 * cos(M) - 0.00014 * cos(2 * M);\n  const r = 5.20872 - 0.25208 * cos(N) - 0.00611 * cos(2 * N);\n  const dist = sqrt(r * r + R * R - 2 * r * R * cos(K));\n  const psi = asin((R / dist) * sin(K));\n  const lam = (34.35 + 0.083091 * d + 0.329 * sin(V)) * RAD + B;\n  S.Ds = 3.12 * RAD * sin(lam + 42.8 * RAD);\n  S.De = S.Ds - 2.22 * RAD * sin(psi) * cos(lam + 22 * RAD) - 1.3 * RAD * ((r - dist) / dist) * sin(lam - 100.5 * RAD);\n  S.lt = dist / 173;\n  S.ph = psi - B;\n  // The shadow points away from the Sun: west (right) before opposition.\n  S.sx = -sin(psi);\n  S.sz = cos(psi);\n  const t = d - S.lt;\n  S.w1 = 210.98 + 877.8169088 * t + S.ph / RAD;\n  S.w2 = 187.23 + 870.1869088 * t + S.ph / RAD;\n}\n\nfunction makeMoons() {\n  const F = () => new Float64Array(4);\n  return { X: F(), Y: F(), Z: F(), vis: F(), sx: F(), sy: F(), son: F(), u: F() };\n}\n\n// The four moons at jd using the slow terms in S. X is west (right) and Y\n// north in Jupiter radii, Z away from Earth. vis is how much of the moon is\n// neither behind Jupiter nor in its shadow; son is how much of its shadow\n// lies on the side of the disc we see, at (sx, sy).\nfunction moons(jd, S, Mo) {\n  const t = jd - 2451545 - S.lt;\n  const u = Mo.u;\n  for (let i = 0; i \u003c 4; i++) u[i] = (U0[i] + UN[i] * t) * RAD + S.ph;\n  const G = (331.18 + 50.310482 * t) * RAD;\n  const Hh = (87.45 + 21.569231 * t) * RAD;\n  const a = u[0], b = u[1], c = u[2];\n  u[0] += 0.473 * RAD * sin(2 * (a - b));\n  u[1] += 1.065 * RAD * sin(2 * (b - c));\n  u[2] += 0.165 * RAD * sin(G);\n  u[3] += 0.843 * RAD * sin(Hh);\n  const rr0 = 5.9057 - 0.0244 * cos(2 * (a - b));\n  const rr1 = 9.3966 - 0.0882 * cos(2 * (b - c));\n  const rr2 = 14.9883 - 0.0216 * cos(G);\n  const rr3 = 26.3627 - 0.1939 * cos(Hh);\n  const sDe = sin(S.De);\n  for (let i = 0; i \u003c 4; i++) {\n    const r = i === 0 ? rr0 : i === 1 ? rr1 : i === 2 ? rr2 : rr3;\n    const X = r * sin(u[i]);\n    const Z = -r * cos(u[i]);\n    const Y = Z * sDe;\n    Mo.X[i] = X;\n    Mo.Y[i] = Y;\n    Mo.Z[i] = Z;\n    let vis = 1;\n    if (Z > 0) vis = sm(1 - RM[i], 1 + RM[i], sqrt(X * X + (Y / 0.935) ** 2));\n    const al = X * S.sx + Z * S.sz;\n    if (al > 0) {\n      const pe = X * S.sz - Z * S.sx;\n      const v = (al * S.Ds) / 0.935;\n      const w = RM[i] + al * 0.0012;\n      vis *= sm(1 - w, 1 + w, sqrt(pe * pe + v * v));\n    }\n    Mo.vis[i] = vis;\n    Mo.son[i] = 0;\n    if (Z \u003c 0) {\n      const cc = X * X + Z * Z - 1;\n      const disc = al * al - cc;\n      if (disc > 0) {\n        const tt = -al - sqrt(disc);\n        const zh = Z + tt * S.sz;\n        if (tt > 0 && zh \u003c 0) {\n          const xh = X + tt * S.sx;\n          const yh = Y - tt * S.Ds;\n          Mo.sx[i] = xh;\n          Mo.sy[i] = yh;\n          Mo.son[i] = 1 - sm(0.93, 1, sqrt(xh * xh + (yh / 0.935) ** 2));\n        }\n      }\n    }\n  }\n}\n\n// Day of the month of the civil day that starts at jd (Meeus, chapter 7).\nfunction dayOf(jd) {\n  const Z = floor(jd + 0.5);\n  const al = floor((Z - 1867216.25) / 36524.25);\n  const A = Z + 1 + al - floor(al / 4);\n  const B = A + 1524;\n  const C = floor((B - 122.1) / 365.25);\n  const D = floor(365.25 * C);\n  const E = floor((B - D) / 30.6001);\n  return B - D - floor(30.6001 * E);\n}\n\n// Cloud colours at planetographic latitude lat (degrees) and System I and II\n// longitudes L1, L2 (degrees, west). Writes albedo 0..1 into o.\nfunction cloud(lat, L1, L2, o) {\n  const al = abs(lat);\n  let r = 0.94, g = 0.89, b = 0.77;\n  const put = (cr, cg, cb, a) => {\n    r += (cr - r) * a;\n    g += (cg - g) * a;\n    b += (cb - b) * a;\n  };\n  const l1 = L1 * RAD, l2 = L2 * RAD;\n  // Polar hoods.\n  put(0.6, 0.57, 0.54, 0.85 * sm(28, 58, al));\n  // North Equatorial Belt, festoons trailing from its south edge.\n  const ns = 6.8 + 1.1 * sin(6 * l1 + 1) + 0.6 * sin(13 * l1);\n  const nn = 17.5 + 1.2 * sin(2 * l2 + 0.4) + 0.7 * sin(5 * l2 + 2);\n  let a = sm(ns - 1, ns + 1, lat) * (1 - sm(nn - 1, nn + 1, lat));\n  put(0.6, 0.37, 0.23, 0.88 * a);\n  // Festoons: dark plumes, unevenly spaced, slanting down into the EZ.\n  const fe = sin(10 * l1 + 0.12 * lat + 0.9 * sin(3 * l1 + 2));\n  put(0.4, 0.43, 0.54, 0.7 * sm(0.5, 0.9, fe) * sm(1.5 + 2.5 * sin(7 * l1) ** 2, 6.5, lat) * (1 - sm(6.5, 8, lat)));\n  // Barges: dark red ovals in the NEB's north half.\n  for (const bl of [40, 165, 290]) {\n    const e = (wrap(L2 - bl) / 5) ** 2 + ((lat - 15) / 1.8) ** 2;\n    put(0.42, 0.2, 0.14, 0.9 * (1 - sm(0.5, 1.1, e)));\n  }\n  // The Great Red Spot and the hollow it presses into the SEB.\n  const eg = (wrap(L2 - GRS) / 8) ** 2 + ((lat + 22.5) / 5) ** 2;\n  // South Equatorial Belt, paler down its middle.\n  const ss = -19.5 + 0.9 * sin(3 * l2 + 2) + 0.5 * sin(8 * l2);\n  const sn = -7.5 + 0.8 * sin(4 * l2) + 0.5 * sin(11 * l1 + 1);\n  a = sm(ss - 1, ss + 1, lat) * (1 - sm(sn - 1, sn + 1, lat));\n  a *= 1 - 0.4 * exp(-(((lat + 13.5) / 2.6) ** 2)) * (0.6 + 0.4 * sin(5 * l2 + 1));\n  a *= sm(1.1, 2.4, eg);\n  put(0.66, 0.44, 0.28, 0.8 * a);\n  put(0.88, 0.45, 0.31, 1 - sm(0.6, 1, eg));\n  // Temperate belts, white ovals in the south one.\n  const st = -29 + 0.8 * sin(3 * l2 + 4);\n  put(0.7, 0.55, 0.41, 0.62 * sm(st - 2.5, st - 1, lat) * (1 - sm(st + 1, st + 2.5, lat)));\n  for (const wl of [100, 215, 335]) {\n    const e = (wrap(L2 - wl) / 4.5) ** 2 + ((lat + 33) / 2.4) ** 2;\n    put(1, 0.99, 0.95, 0.85 * (1 - sm(0.4, 1, e)));\n  }\n  const nt = 26 + 0.9 * sin(4 * l2 + 1);\n  put(0.68, 0.51, 0.37, 0.6 * sm(nt - 2.5, nt - 1, lat) * (1 - sm(nt + 1, nt + 2.5, lat)));\n  put(0.72, 0.62, 0.52, 0.4 * exp(-(((al - 37) / 1.6) ** 2)));\n  o[0] = r;\n  o[1] = g;\n  o[2] = b;\n}\n\n// A soft dot of colour c and strength a added into buffer f (stride W).\nfunction dot(f, rows, x, y, rad, c, a) {\n  const x0 = max(0, floor(x - rad - 1)), x1 = min(W - 1, floor(x + rad + 1));\n  const y0 = max(0, floor(y - rad - 1)), y1 = min(rows - 1, floor(y + rad + 1));\n  for (let j = y0; j \u003c= y1; j++)\n    for (let i = x0; i \u003c= x1; i++) {\n      const k = cl(rad + 0.5 - sqrt((i - x) ** 2 + (j - y) ** 2), 0, 1) * a;\n      if (k \u003c= 0) continue;\n      const o = (j * W + i) * 3;\n      f[o] += (c[0] - f[o]) * k;\n      f[o + 1] += (c[1] - f[o + 1]) * k;\n      f[o + 2] += (c[2] - f[o + 2]) * k;\n    }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.S = {};\n  P.Mo = makeMoons();\n  P.eye = new Float32Array(W * C0 * 3);\n  P.tmp = new Float32Array(W * EYE * 3);\n  P.row = new Float32Array(W * 3);\n  P.al = new Float32Array(W * 4);\n  P.sh = new Float32Array(W);\n  P.xp = new Float64Array(4);\n  P.vp = new Float64Array(4);\n  P.cs = new Float32Array(3);\n  P.clock = 0;\n  Object.assign(P, { skyk: 0, speed: 2, power: 0, seeing: 0.06 });\n  // Open five hours before the first shadow touches the limb, which at the\n  // opening speed brings it on at 2.5 seconds.\n  P.jd = nextShadow(JD0) - 5 / 24;\n}\n\n// The next time after jd that a moon's shadow reaches the disc.\nfunction nextShadow(jd) {\n  const S = {}, Mo = makeMoons();\n  let was = 0;\n  for (let k = 0; k \u003c 2000; k++) {\n    const t = jd + k * 0.01;\n    if (k % 10 === 0) sky(t, S);\n    moons(t, S, Mo);\n    let on = 0;\n    for (let i = 0; i \u003c 4; i++) if (Mo.son[i] > 0.5) on |= 1 \u003c\u003c i;\n    if (k > 0 && on & ~was) return t;\n    was = on;\n  }\n  return jd;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.skyk = cl(k[0], 0, 1);\n  P.speed = cl(k[1], 0.5, 24);\n  P.power = cl(k[2], 0, 1);\n  P.seeing = cl(k[3], 0, 1);\n  if (input.btnPressed && input.btnPressed[0]) P.jd = nextShadow(P.jd + 0.02) - 1 / 24;\n  P.jd += (dt * P.speed) / 24;\n  P.clock += dt;\n}\n\n// The close-up eyepiece: Jupiter at Rc LEDs a radius, with seeing.\nfunction eyepiece(P, S, Mo, Rc) {\n  const f = P.eye;\n  const see = P.seeing;\n  const tm = P.clock;\n  const cs = P.cs;\n  // Image motion: the whole disc wanders, and each row ripples on its own.\n  const gx = see * (2.6 * sin(tm * 3.1) * sin(tm * 1.27 + 1) + 1.3 * sin(tm * 7.3 + 2));\n  const gy = see * (1.5 * sin(tm * 2.3 + 4) * sin(tm * 0.9) + 0.8 * sin(tm * 6.1 + 1));\n  const Rp = Rc * 0.935;\n  const cy = EY + gy;\n  const w1 = S.w1, w2 = S.w2;\n  for (let y = 0; y \u003c EYE; y++) {\n    const rip = see * 1.3 * sin(y * 0.9 + tm * 11) * sin(y * 0.37 - tm * 5.3 + 1.3);\n    const cx = CX + gx + rip;\n    const ny = (y - cy) / Rp;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      const nx = (x - cx) / Rc;\n      const q = nx * nx + ny * ny;\n      const rho = sqrt(q);\n      // Glare round the disc: the seeing disc's wings.\n      const out = max(0, rho - 1) * Rc;\n      const halo = (4 + 110 * see) / pow(1 + (out / (2 + 10 * see)) ** 2, 1.5) * (rho > 1 ? 1 : 0);\n      f[o] = 3 + halo * 0.95;\n      f[o + 1] = 4 + halo * 0.9;\n      f[o + 2] = 8 + halo * 0.8;\n      if (rho >= 1 + 1 / Rc) continue;\n      const edge = cl((1 - rho) * Rc + 0.6, 0, 1);\n      const mu = sqrt(max(0, 1 - min(q, 1)));\n      const lat = -asin(cl(ny, -1, 1)) / RAD;\n      const lon = atan2(nx, mu) / RAD;\n      cloud(lat, w1 - lon, w2 - lon, cs);\n      let lum = 255 * (0.18 + 0.82 * pow(mu, 0.55));\n      // The phase: a thin shade on the limb away from the Sun.\n      lum *= 1 - 0.35 * sm(0.75, 1, nx * (S.sx > 0 ? 1 : -1)) * abs(S.sx) * 5;\n      for (let i = 0; i \u003c 4; i++) {\n        if (Mo.son[i] \u003c= 0) continue;\n        const dx = (x - cx - Mo.sx[i] * Rc), dy = (y - cy + Mo.sy[i] * Rc);\n        lum *= 1 - 0.9 * Mo.son[i] * cl(DOT[i] + 0.55 - sqrt(dx * dx + dy * dy), 0, 1);\n      }\n      f[o] += (cs[0] * lum - f[o]) * edge;\n      f[o + 1] += (cs[1] * lum - f[o + 1]) * edge;\n      f[o + 2] += (cs[2] * lum - f[o + 2]) * edge;\n    }\n  }\n  // Moons in the field, in front of the disc or beside it.\n  for (let i = 0; i \u003c 4; i++) {\n    const x = CX + gx + Mo.X[i] * Rc, y = cy - Mo.Y[i] * Rc;\n    if (x \u003c -3 || x > W + 3 || Mo.vis[i] \u003c= 0.01) continue;\n    const onDisc = Mo.Z[i] \u003c 0 && Mo.X[i] ** 2 + (Mo.Y[i] / 0.935) ** 2 \u003c 1;\n    const tw = 1 + see * 0.35 * sin(tm * (17 + i * 3) + i);\n    const c = EYEC[i].map((v) => v * (onDisc ? ALB[i] : 1) * min(1.1, tw));\n    dot(f, EYE, x, y, DOT[i] * (1 + see * 0.6), c, Mo.vis[i]);\n  }\n  // Seeing blurs the image: a separable Gaussian.\n  const sg = 0.2 + 1.7 * see;\n  if (sg > 0.35) {\n    const rad = min(5, Math.ceil(sg * 2.5));\n    const ker = [];\n    let ks = 0;\n    for (let i = -rad; i \u003c= rad; i++) ks += ker[i + rad] = exp(-(i * i) / (2 * sg * sg));\n    const t = P.tmp;\n    for (let y = 0; y \u003c EYE; y++)\n      for (let x = 0; x \u003c W; x++)\n        for (let c = 0; c \u003c 3; c++) {\n          let s = 0;\n          for (let i = -rad; i \u003c= rad; i++) s += ker[i + rad] * f[(y * W + cl(x + i, 0, W - 1)) * 3 + c];\n          t[(y * W + x) * 3 + c] = s / ks;\n        }\n    for (let y = 0; y \u003c EYE; y++)\n      for (let x = 0; x \u003c W; x++)\n        for (let c = 0; c \u003c 3; c++) {\n          let s = 0;\n          for (let i = -rad; i \u003c= rad; i++) s += ker[i + rad] * t[(cl(y + i, 0, EYE - 1) * W + x) * 3 + c];\n          f[(y * W + x) * 3 + c] = s / ks;\n        }\n  }\n}\n\n// The low-power line under the close-up: Jupiter and its moons at the chart's scale.\nfunction line(P, Mo, Rj, Rc) {\n  const f = P.eye;\n  // Two faint lines from under the close-up down to the planet it magnifies.\n  for (const s of [-1, 1]) {\n    const xa = CX + s * Rc * 0.45, ya = EY + Rc * 0.935 + 1;\n    const xb = CX + s * (Rj + 0.8), yb = LY - 1.5;\n    const n = max(2, round(yb - ya));\n    for (let k = 0; k \u003c= n; k++) {\n      const x = round(mix(xa, xb, k / n)), y = round(mix(ya, yb, k / n));\n      const o = (y * W + x) * 3;\n      if (y \u003c C0 && x >= 0 && x \u003c W) for (let c = 0; c \u003c 3; c++) f[o + c] = max(f[o + c], [34, 40, 62][c]);\n    }\n  }\n  const hj = min(Rj * 0.935, 2.2);\n  for (let y = LY - 3; y \u003c= LY + 3; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const nx = (x - CX) / Rj, ny = (y - LY) / hj;\n      const rho = sqrt(nx * nx + ny * ny);\n      const k = cl((1 - rho) * max(1.2, Rj) + 0.7, 0, 1);\n      if (k \u003c= 0) continue;\n      const lum = 0.55 + 0.45 * sqrt(max(0, 1 - rho * rho));\n      const o = (y * W + x) * 3;\n      f[o] += (236 * lum - f[o]) * k;\n      f[o + 1] += (220 * lum - f[o + 1]) * k;\n      f[o + 2] += (186 * lum - f[o + 2]) * k;\n    }\n  for (let i = 0; i \u003c 4; i++) {\n    if (Mo.vis[i] \u003c= 0.01) continue;\n    dot(f, C0, CX + Mo.X[i] * Rj, LY - Mo.Y[i] * Rj, 0.7, EYEC[i], Mo.vis[i]);\n  }\n}\n\nfunction blend(k1) {\n  const s = k1 * 2;\n  const i = min(1, floor(s)), t = sm(0, 1, s - i);\n  const a = PAL[i], b = PAL[i + 1];\n  const m = (u, v) => u.map((x, j) => mix(x, v[j], t));\n  const o = {};\n  for (const key of [\"bg0\", \"bg1\", \"band\", \"shadow\", \"label\"]) o[key] = m(a[key], b[key]);\n  o.moon = a.moon.map((c, j) => m(c, b.moon[j]));\n  return o;\n}\n\n// The chart: ten rows a day at the lowest power, now at row LY, the day\n// numbers down the left edge under the line each day starts on.\nfunction chart(P, display, pal, Rj) {\n  const rpd = 10 * pow(Rj / 1.15, 0.6);\n  const S = P.S2 || (P.S2 = {});\n  const Mo = P.Mo2 || (P.Mo2 = makeMoons());\n  const { row, al, sh } = P;\n  const hw = 0.55;\n  const marks = new Set();\n  for (let d = floor(P.jd + (C0 - 6 - LY) / rpd - 0.5) + 1.5; d \u003c P.jd + (H - LY) / rpd; d++) {\n    const n = dayOf(d + 0.01), yb = round(LY + (d - P.jd) * rpd);\n    const s = n \u003c 10 ? [n] : [floor(n / 10), n % 10];\n    s.forEach((dg, j) => {\n      for (let b = 0; b \u003c 15; b++) if ((DIG[dg] >> (14 - b)) & 1) marks.add((yb + 1 + floor(b / 3)) * W + 1 + j * 4 + (b % 3));\n    });\n  }\n  for (let y = C0; y \u003c H; y++) {\n    const tc = P.jd + (y - LY) / rpd;\n    const ta = tc - 0.5 / rpd, tb = tc + 0.5 / rpd;\n    // Alternate days light and dark, split where a day starts inside the row.\n    const da = floor(ta - 0.5);\n    let odd = da & 1;\n    const nb = da + 1.5;\n    if (nb \u003c tb) {\n      const fr = (tb - nb) * rpd;\n      odd = odd * (1 - fr) + (1 - (da & 1)) * fr;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const lab = marks.has(y * W + x);\n      for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = lab ? pal.label[c] : mix(pal.bg0[c], pal.bg1[c], odd);\n    }\n    // Jupiter's band, rounded off by its limb.\n    for (let x = floor(CX - Rj - 1); x \u003c= CX + Rj + 1; x++) {\n      const k = cl(min(x + 0.5, CX + Rj) - max(x - 0.5, CX - Rj), 0, 1);\n      if (k \u003c= 0) continue;\n      const dx = (x - CX) / Rj;\n      const lum = 0.62 + 0.38 * sqrt(max(0, 1 - dx * dx));\n      for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.band[c] * lum, k);\n    }\n    sky(tc, S);\n    al.fill(0);\n    sh.fill(0);\n    const xp = P.xp, vp = P.vp;\n    for (let s = 0; s \u003c= 4; s++) {\n      moons(ta + (s / 4) * (tb - ta), S, Mo);\n      for (let i = 0; i \u003c 4; i++) {\n        const x = CX + Mo.X[i] * Rj, v = Mo.vis[i];\n        if (Mo.son[i] > 0) {\n          const xs = CX + Mo.sx[i] * Rj;\n          for (let xx = max(0, floor(xs - 1)); xx \u003c= min(W - 1, xs + 1); xx++)\n            sh[xx] = max(sh[xx], Mo.son[i] * cl(1 - abs(xx - xs) * 0.8, 0, 1));\n        }\n        if (s > 0) {\n          const lo = min(x, xp[i]) - hw, hi = max(x, xp[i]) + hw, vv = min(v, vp[i]);\n          if (vv > 0.02 && hi > -1 && lo \u003c W)\n            for (let xx = max(0, floor(lo)); xx \u003c= min(W - 1, floor(hi + 1)); xx++) {\n              const k = cl(min(xx + 0.5, hi) - max(xx - 0.5, lo), 0, 1) * vv;\n              if (k > al[xx * 4 + i]) al[xx * 4 + i] = k;\n            }\n        }\n        xp[i] = x;\n        vp[i] = v;\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      if (sh[x] > 0) for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.shadow[c], sh[x] * 0.9);\n      for (let i = 3; i >= 0; i--) {\n        const k = al[x * 4 + i];\n        if (k > 0) for (let c = 0; c \u003c 3; c++) row[x * 3 + c] = mix(row[x * 3 + c], pal.moon[i][c], k);\n      }\n      display.setPixel(x, y, min(255, row[x * 3]), min(255, row[x * 3 + 1]), min(255, row[x * 3 + 2]));\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.eye) setup(P);\n  const S = P.S, Mo = P.Mo;\n  sky(P.jd, S);\n  moons(P.jd, S, Mo);\n  const p = P.power;\n  const Rj = 1.15 * pow(5.1 / 1.15, p);\n  const Rc = 14 + 2.5 * p;\n  eyepiece(P, S, Mo, Rc);\n  line(P, Mo, Rj, Rc);\n  // Red light turns the eyepiece's colours to shades of red.\n  const red = sm(0, 1, 1 - abs(P.skyk * 2 - 1));\n  const f = P.eye;\n  for (let i = 0, o = 0; i \u003c W * C0; i++, o += 3) {\n    let r = f[o], g = f[o + 1], b = f[o + 2];\n    if (red > 0) {\n      const l = 0.5 * r + 0.4 * g + 0.1 * b;\n      r = mix(r, l, red);\n      g = mix(g, l * 0.06, red);\n      b = mix(b, 0, red);\n    }\n    display.setPixel(i % W, (i / W) | 0, min(255, r), min(255, g), min(255, b));\n  }\n  const pal = blend(P.skyk);\n  chart(P, display, pal, Rj);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sky=0..1, Speed=0.5..24, Power=0..1, Seeing=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sky","min":0,"max":1,"about":"The light the chart is read by: a night chart in navy at 0, red-light observing mode at the middle, the printed paper chart at 1."},{"name":"Speed","min":0.5,"max":24,"about":"Hours of Jupiter's time a second: at 2 the Great Red Spot comes round every 5 seconds and the chart climbs a row every 1.2 seconds; 0.5 to 24, a day a second."},{"name":"Power","min":0,"max":1,"about":"The eyepiece's magnification, which also sets the chart's scale: at 0 the field holds Callisto's whole orbit; turned up, Callisto, then Ganymede, then Europa run off the sides at elongation until only Io's orbit fits."},{"name":"Seeing","min":0,"max":1,"about":"Turbulence in the air over the telescope: steady near 0, and toward 1 the disc wobbles, boils and blurs into a glow until the belts are gone."}],"start":[0,2,0,0.06],"measures":{"motion":0.0779,"detail":0.0747,"edges":0.5632,"complexity":0.743,"coverage":0.7778,"colour":0.1926,"drift":0.0306},"knobResponse":[0.5122,0.1178,0.1493,0.0539]},{"slug":"galton","title":"Galton Board","family":"data","round":2,"note":"깔때기에서 떨어진 공이 못마다 동전 던지듯 왼쪽이나 오른쪽으로 튀어 칸에 쌓이고, 종 모양이 서요. 칸 색은 가운데에서 표준편차 몇 개만큼 떨어졌는지를 보여 줘요.","idea":"Balls pour from a hopper through a triangle of pegs, each peg a coin toss, and the bins under it fill into a bell curve coloured by how many standard deviations each bin sits from the middle.","buttons":"K1 tap opens the floor, the bins drain and the hopper fills again.","code":"// ===== Patternflow pattern =====\n// Title:   Galton Board\n// Family:  data\n// Idea:    Balls pour from a hopper through a triangle of pegs, each peg a coin toss, and the bins under it fill into a bell curve coloured by how many standard deviations each bin sits from the middle.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rate=30..240, Bias=-0.3..0.3, Rows=8..15\n//\n// Knob 1: Hue. Turns the pile round the wheel; the middle, the one-sigma band and the tails keep their steps apart.\n// Knob 2: Rate. Balls let through the neck each second, from a trickle to a pour.\n// Knob 3: Bias. The chance of bouncing right at a peg, from 0.2 to 0.8; at 0 it is a fair coin and the curve stands straight.\n// Knob 4: Rows. Rows of pegs, which is also coins tossed per ball; more rows make more, narrower bins.\n// Buttons: K1 tap opens the floor, the bins drain and the hopper fills again.\n\nconst W = 64;\nconst H = 128;\nconst NECK = 11;\nconst PEG_TOP = 17;\nconst BOTTOM = H - 1;\nconst MAXB = 400;\nconst MAXP = 136;\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// The hopper's walls: a funnel from the top corners down to a two-LED neck.\nfunction wallLeft(y) {\n  return Math.round(1 + (29 * y) / NECK);\n}\n\nfunction layout(params, rows) {\n  params.rows = rows;\n  // Bins and pegs share one spacing, as wide as the panel allows for this many bins.\n  const dx = Math.floor(65 / (rows + 1));\n  const span = (rows + 1) * dx - 1;\n  const x0 = Math.floor((W - span) / 2);\n  const mid = x0 + span / 2;\n  const dy = dx * 0.866;\n  params.dx = dx;\n  params.iw = dx - 1;\n  params.x0 = x0;\n  params.mid = mid;\n  params.dy = dy;\n  params.trow = 0.11 * Math.sqrt(dy / 3.46);\n  for (let r = 0; r \u003c rows; r++) {\n    for (let j = 0; j \u003c= r; j++) {\n      const n = (r * (r + 1)) / 2 + j;\n      params.pegX[n] = Math.floor(mid + (j - r / 2) * dx);\n      params.pegY[n] = Math.round(PEG_TOP + r * dy);\n      params.glow[n] = 0;\n    }\n  }\n  params.pegs = (rows * (rows + 1)) / 2;\n  // The last row of pegs sits on top of the dividers.\n  params.binTop = params.pegY[params.pegs - 1];\n  params.binRows = BOTTOM - params.binTop;\n  const col = params.colBin;\n  for (let x = 0; x \u003c W; x++) {\n    const rel = x - x0;\n    if (rel === -1 || rel === span) col[x] = -2;\n    else if (rel \u003c 0 || rel > span) col[x] = -1;\n    else if ((rel + 1) % dx === 0) col[x] = -2;\n    else col[x] = Math.floor(rel / dx);\n  }\n}\n\nfunction pmf(n, j, p) {\n  let c = 1;\n  for (let i = 0; i \u003c j; i++) c = (c * (n - i)) / (i + 1);\n  return c * Math.pow(p, j) * Math.pow(1 - p, n - j);\n}\n\n// Bands and the curve the pile is heading for, from the bias as it stands.\nfunction theory(params) {\n  const n = params.rows;\n  const p = params.p;\n  const sd = Math.sqrt(n * p * (1 - p));\n  let top = 0;\n  for (let j = 0; j \u003c= n; j++) {\n    const m = pmf(n, j, p);\n    params.expect[j] = m;\n    if (m > top) top = m;\n    const z = Math.abs(j - n * p) / sd;\n    params.band[j] = z \u003c= 1 ? 0 : z \u003c= 2 ? 1 : 2;\n  }\n  params.top = top;\n}\n\nfunction fill(params) {\n  theory(params);\n  // Enough balls that the tallest bin should end a little under the brim.\n  params.total = Math.round((0.9 * params.iw * params.binRows) / params.top);\n  params.hopper = params.total;\n  params.count.fill(0);\n  params.pile.fill(0);\n}\n\nfunction place(params, j, xp) {\n  const iw = params.iw;\n  const level = Math.floor(params.count[j] / iw);\n  if (level >= params.binRows) return false;\n  const y = BOTTOM - level;\n  const left = params.x0 + j * params.dx;\n  let c = Math.max(left, Math.min(left + iw - 1, Math.floor(xp)));\n  // The nearest free place in the row the bin is filling.\n  for (let d = 0; d \u003c iw * 2; d++) {\n    const cc = c + (d & 1 ? -((d + 1) >> 1) : d >> 1);\n    if (cc \u003c left || cc >= left + iw) continue;\n    if (params.pile[y * W + cc] === 0) {\n      c = cc;\n      break;\n    }\n  }\n  params.pile[y * W + c] = 140 + Math.floor(Math.random() * 115);\n  params.count[j]++;\n  if (params.count[j] >= iw * params.binRows) params.full = true;\n  return true;\n}\n\nfunction release(params) {\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (params.mode[i] !== 0) continue;\n    params.mode[i] = 1;\n    params.bt[i] = 0;\n    params.row[i] = 0;\n    params.bj[i] = 0;\n    params.bx[i] = params.mid;\n    params.by[i] = NECK;\n    params.hopper--;\n    return;\n  }\n}\n\nfunction toss(params, i) {\n  params.nj[i] = params.bj[i] + (Math.random() \u003c params.p ? 1 : 0);\n  params.glow[(params.row[i] * (params.row[i] + 1)) / 2 + params.bj[i]] += 1;\n}\n\nfunction moveBalls(params, dt) {\n  const T = params.trow;\n  const dy = params.dy;\n  for (let i = 0; i \u003c MAXB; i++) {\n    const m = params.mode[i];\n    if (m === 0) continue;\n    if (m === 1) {\n      // Out of the neck and onto the top peg.\n      params.bt[i] += dt / 0.14;\n      const t = Math.min(1, params.bt[i]);\n      params.bx[i] = params.mid;\n      params.by[i] = NECK + (params.pegY[0] - 1 - NECK) * t * t;\n      if (params.bt[i] >= 1) {\n        params.bt[i] -= 1;\n        params.mode[i] = 2;\n        toss(params, i);\n      }\n    } else if (m === 2) {\n      params.bt[i] += dt / T;\n      const r = params.row[i];\n      const a = (r * (r + 1)) / 2 + params.bj[i];\n      if (r === params.rows - 1) {\n        // Off the last peg and into a bin.\n        params.mode[i] = params.drain >= 0 ? 4 : 3;\n        params.vy[i] = -dy * 2;\n        params.bt[i] = 0;\n        params.tx[i] = params.x0 + params.nj[i] * params.dx + Math.random() * params.iw;\n        params.bj[i] = params.nj[i];\n        continue;\n      }\n      const b = ((r + 1) * (r + 2)) / 2 + params.nj[i];\n      const t = Math.min(1, params.bt[i]);\n      params.bx[i] = params.pegX[a] + 0.5 + (params.pegX[b] - params.pegX[a]) * t;\n      // A little hop off the peg, then falling.\n      params.by[i] = params.pegY[a] - 1 + (params.pegY[b] - params.pegY[a]) * t * t - dy * 0.35 * 4 * t * (1 - t);\n      if (params.bt[i] >= 1) {\n        params.bt[i] -= 1;\n        params.row[i] = r + 1;\n        params.bj[i] = params.nj[i];\n        toss(params, i);\n      }\n    } else {\n      params.vy[i] = Math.min(70, params.vy[i] + 400 * dt);\n      params.by[i] += params.vy[i] * dt;\n      params.bt[i] += dt;\n      if (m === 3) {\n        params.bx[i] += (params.tx[i] - params.bx[i]) * Math.min(1, dt * 12);\n        const j = params.bj[i];\n        const land = BOTTOM - Math.floor(params.count[j] / params.iw);\n        if (params.drain >= 0) params.mode[i] = 4;\n        else if (params.by[i] >= land) {\n          params.mode[i] = 0;\n          if (!place(params, j, params.bx[i])) params.full = true;\n        }\n      } else if (params.by[i] > H + 2) params.mode[i] = 0;\n    }\n  }\n}\n\nexport function setup(params) {\n  params.pegX = new Int16Array(MAXP);\n  params.pegY = new Int16Array(MAXP);\n  params.glow = new Float32Array(MAXP);\n  params.colBin = new Int8Array(W);\n  params.count = new Int16Array(17);\n  params.expect = new Float32Array(17);\n  params.band = new Uint8Array(17);\n  params.pile = new Uint8Array(W * H);\n  params.mode = new Uint8Array(MAXB);\n  params.bx = new Float32Array(MAXB);\n  params.by = new Float32Array(MAXB);\n  params.bt = new Float32Array(MAXB);\n  params.vy = new Float32Array(MAXB);\n  params.tx = new Float32Array(MAXB);\n  params.row = new Int8Array(MAXB);\n  params.bj = new Int8Array(MAXB);\n  params.nj = new Int8Array(MAXB);\n  params.fb = new Float32Array(W * H * 3);\n  params.colours = new Float32Array(4 * 3);\n  params.hueKey = -1;\n  params.grain = new Uint8Array(W * (NECK + 1));\n  for (let i = 0; i \u003c params.grain.length; i++) params.grain[i] = 120 + Math.floor(Math.random() * 135);\n  let cap = 0;\n  for (let y = 0; y \u003c= NECK; y++) cap += 63 - 2 * wallLeft(y);\n  params.hopCap = cap;\n  params.rows = 0;\n  params.p = 0.5;\n  params.acc = 0;\n  params.drain = -1;\n  params.hold = 0;\n  params.refill = 1;\n  params.refillFrom = 1;\n  params.full = false;\n  params.fresh = true;\n}\n\nfunction startDrain(params) {\n  if (params.drain >= 0) return;\n  params.drain = 0;\n  // Whatever is left in the hopper stays there and is topped up after.\n  params.refillFrom = params.hopper / params.total;\n  for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] === 3) params.mode[i] = 4;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 30, 0, 8];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  const rate = Math.max(1, k[1]);\n  params.p = 0.5 + Math.max(-0.3, Math.min(0.3, k[2]));\n  const rows = Math.max(1, Math.min(15, Math.round(k[3])));\n\n  if (params.fresh) {\n    params.fresh = false;\n    layout(params, rows);\n    fill(params);\n    // Start partway through a fill: over half the balls already sorted, and\n    // two and a half seconds of the stream run so the board is busy.\n    const n = Math.floor(params.total * 0.55);\n    for (let b = 0; b \u003c n; b++) {\n      let j = 0;\n      for (let r = 0; r \u003c rows; r++) if (Math.random() \u003c params.p) j++;\n      place(params, j, params.x0 + j * params.dx + Math.random() * params.iw);\n    }\n    params.hopper -= n;\n    for (let s = 0; s \u003c 75; s++) {\n      params.acc += rate / 30;\n      while (params.acc >= 1) {\n        params.acc -= 1;\n        release(params);\n      }\n      moveBalls(params, 1 / 30);\n    }\n  }\n\n  if (rows !== params.rows || (input.btnPressed && input.btnPressed[0])) {\n    if (params.drain \u003c 0) startDrain(params);\n    params.nextRows = rows;\n  }\n  theory(params);\n\n  if (params.drain >= 0) {\n    params.drain += dt;\n    // The floor is open: the pile falls out under gravity.\n    if (0.5 * 300 * params.drain * params.drain > H) {\n      params.drain = -1;\n      if (params.nextRows && params.nextRows !== params.rows) {\n        // Balls still on the old pegs have nowhere to go on the new board.\n        for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] !== 0) params.mode[i] = 4;\n        layout(params, params.nextRows);\n      }\n      fill(params);\n      params.full = false;\n      params.hold = 0;\n      params.refill = 0;\n    }\n  } else if (params.refill \u003c 1) {\n    params.refill = Math.min(1, params.refill + dt / 0.8);\n  } else {\n    let flying = 0;\n    for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] >= 1 && params.mode[i] \u003c= 3) flying++;\n    if (params.full || (params.hopper \u003c= 0 && flying === 0)) {\n      // Hold the finished curve a moment before the floor opens.\n      params.hold += dt;\n      if (params.hold > 2.5) startDrain(params);\n    } else if (!params.full) {\n      params.acc += rate * dt;\n      while (params.acc >= 1 && params.hopper > 0) {\n        params.acc -= 1;\n        release(params);\n      }\n      if (params.hopper \u003c= 0) params.acc = 0;\n    }\n  }\n\n  moveBalls(params, dt);\n  const fade = Math.exp(-dt * 5);\n  for (let n = 0; n \u003c params.pegs; n++) params.glow[n] *= fade;\n}\n\nfunction add(fb, x, y, r, g, b) {\n  const i = (y * W + x) * 3;\n  fb[i] += r;\n  fb[i + 1] += g;\n  fb[i + 2] += b;\n}\n\nexport function draw(display, params, time) {\n  const fb = params.fb;\n  const col = params.colours;\n  if (params.hueKey !== params.hue) {\n    params.hueKey = params.hue;\n    // K1 at 0 opens on mint, with the tails stepping towards blue.\n    const h = params.hue + 0.42;\n    const cs = [hsv(h, 0.62, 1), hsv(h + 0.09, 0.8, 0.9), hsv(h + 0.19, 0.9, 0.82), hsv(h + 0.05, 0.2, 1)];\n    for (let c = 0; c \u003c 4; c++) {\n      col[c * 3] = cs[c][0];\n      col[c * 3 + 1] = cs[c][1];\n      col[c * 3 + 2] = cs[c][2];\n    }\n  }\n  fb.fill(0);\n\n  // The hopper, filled from the neck up with what is left to drop.\n  const from = params.refillFrom;\n  const left = params.drain >= 0 ? from : params.refill \u003c 1 ? from + (1 - from) * params.refill : params.hopper / params.total;\n  let cells = Math.round(params.hopCap * Math.max(0, left));\n  for (let y = NECK; y >= 0; y--) {\n    const wl = wallLeft(y);\n    const wr = W - 1 - wl;\n    add(fb, wl, y, 46, 48, 58);\n    add(fb, wr, y, 46, 48, 58);\n    const width = wr - wl - 1;\n    // A part-filled row fills from the walls in, the dip a draining funnel makes.\n    for (let n = 0; n \u003c width && cells > 0; n++, cells--) {\n      const x = n & 1 ? wr - 1 - (n >> 1) : wl + 1 + (n >> 1);\n      const s = params.grain[y * W + x] / 255;\n      add(fb, x, y, col[0] * s * 0.7, col[1] * s * 0.7, col[2] * s * 0.7);\n    }\n  }\n\n  // Pegs glow for a moment each time a ball strikes them.\n  for (let n = 0; n \u003c params.pegs; n++) {\n    const v = 0.42 + 0.58 * (1 - Math.exp(-params.glow[n] * 0.5));\n    add(fb, params.pegX[n], params.pegY[n], col[9] * v, col[10] * v, col[11] * v);\n  }\n\n  const colBin = params.colBin;\n  for (let x = 0; x \u003c W; x++) {\n    if (colBin[x] !== -2) continue;\n    for (let y = params.binTop + 1; y \u003c H; y++) add(fb, x, y, 40, 42, 52);\n  }\n\n  // The pile, falling away while the floor is open.\n  const drop = params.drain >= 0 ? Math.floor(0.5 * 300 * params.drain * params.drain) : 0;\n  const pile = params.pile;\n  for (let y = BOTTOM; y > params.binTop; y--) {\n    const to = y + drop;\n    if (to > BOTTOM) continue;\n    for (let x = 0; x \u003c W; x++) {\n      const s = pile[y * W + x];\n      if (s === 0) continue;\n      const c = params.band[colBin[x]] * 3;\n      const v = s / 255;\n      add(fb, x, to, col[c] * v, col[c + 1] * v, col[c + 2] * v);\n    }\n  }\n\n  // Where theory says each bin will stand when the hopper is empty.\n  if (params.drain \u003c 0) {\n    for (let j = 0; j \u003c= params.rows; j++) {\n      const tall = (params.total * params.expect[j]) / params.iw;\n      if (tall \u003c 1) continue;\n      const y = BOTTOM - Math.floor(tall);\n      if (y \u003c= params.binTop) continue;\n      const c = params.band[j] * 3;\n      const x0 = params.x0 + j * params.dx;\n      for (let x = x0; x \u003c x0 + params.iw; x++) {\n        if (pile[y * W + x] !== 0) continue;\n        add(fb, x, y, col[c] * 0.22, col[c + 1] * 0.22, col[c + 2] * 0.22);\n      }\n    }\n  }\n\n  // Balls in flight, each spread over its four nearest LEDs so it glides.\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (params.mode[i] === 0) continue;\n    const fx = params.bx[i] - 0.5;\n    const fy = params.by[i] - 0.5;\n    const ix = Math.floor(fx);\n    const iy = Math.floor(fy);\n    const ax = fx - ix;\n    const ay = fy - iy;\n    for (let q = 0; q \u003c 4; q++) {\n      const x = ix + (q & 1);\n      const y = iy + (q >> 1);\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const w = (q & 1 ? ax : 1 - ax) * (q >> 1 ? ay : 1 - ay);\n      add(fb, x, y, col[9] * w, col[10] * w, col[11] * w);\n    }\n  }\n\n  for (let p = 0, i = 0; p \u003c W * H; p++, i += 3) {\n    const r = fb[i];\n    const g = fb[i + 1];\n    const b = fb[i + 2];\n    display.setPixel(p % W, (p / W) | 0, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","layer":{"id":"layer-galton","type":"code","name":"galton","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Galton Board\n// Family:  data\n// Idea:    Balls pour from a hopper through a triangle of pegs, each peg a coin toss, and the bins under it fill into a bell curve coloured by how many standard deviations each bin sits from the middle.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rate=30..240, Bias=-0.3..0.3, Rows=8..15\n//\n// Knob 1: Hue. Turns the pile round the wheel; the middle, the one-sigma band and the tails keep their steps apart.\n// Knob 2: Rate. Balls let through the neck each second, from a trickle to a pour.\n// Knob 3: Bias. The chance of bouncing right at a peg, from 0.2 to 0.8; at 0 it is a fair coin and the curve stands straight.\n// Knob 4: Rows. Rows of pegs, which is also coins tossed per ball; more rows make more, narrower bins.\n// Buttons: K1 tap opens the floor, the bins drain and the hopper fills again.\n\nconst W = 64;\nconst H = 128;\nconst NECK = 11;\nconst PEG_TOP = 17;\nconst BOTTOM = H - 1;\nconst MAXB = 400;\nconst MAXP = 136;\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// The hopper's walls: a funnel from the top corners down to a two-LED neck.\nfunction wallLeft(y) {\n  return Math.round(1 + (29 * y) / NECK);\n}\n\nfunction layout(params, rows) {\n  params.rows = rows;\n  // Bins and pegs share one spacing, as wide as the panel allows for this many bins.\n  const dx = Math.floor(65 / (rows + 1));\n  const span = (rows + 1) * dx - 1;\n  const x0 = Math.floor((W - span) / 2);\n  const mid = x0 + span / 2;\n  const dy = dx * 0.866;\n  params.dx = dx;\n  params.iw = dx - 1;\n  params.x0 = x0;\n  params.mid = mid;\n  params.dy = dy;\n  params.trow = 0.11 * Math.sqrt(dy / 3.46);\n  for (let r = 0; r \u003c rows; r++) {\n    for (let j = 0; j \u003c= r; j++) {\n      const n = (r * (r + 1)) / 2 + j;\n      params.pegX[n] = Math.floor(mid + (j - r / 2) * dx);\n      params.pegY[n] = Math.round(PEG_TOP + r * dy);\n      params.glow[n] = 0;\n    }\n  }\n  params.pegs = (rows * (rows + 1)) / 2;\n  // The last row of pegs sits on top of the dividers.\n  params.binTop = params.pegY[params.pegs - 1];\n  params.binRows = BOTTOM - params.binTop;\n  const col = params.colBin;\n  for (let x = 0; x \u003c W; x++) {\n    const rel = x - x0;\n    if (rel === -1 || rel === span) col[x] = -2;\n    else if (rel \u003c 0 || rel > span) col[x] = -1;\n    else if ((rel + 1) % dx === 0) col[x] = -2;\n    else col[x] = Math.floor(rel / dx);\n  }\n}\n\nfunction pmf(n, j, p) {\n  let c = 1;\n  for (let i = 0; i \u003c j; i++) c = (c * (n - i)) / (i + 1);\n  return c * Math.pow(p, j) * Math.pow(1 - p, n - j);\n}\n\n// Bands and the curve the pile is heading for, from the bias as it stands.\nfunction theory(params) {\n  const n = params.rows;\n  const p = params.p;\n  const sd = Math.sqrt(n * p * (1 - p));\n  let top = 0;\n  for (let j = 0; j \u003c= n; j++) {\n    const m = pmf(n, j, p);\n    params.expect[j] = m;\n    if (m > top) top = m;\n    const z = Math.abs(j - n * p) / sd;\n    params.band[j] = z \u003c= 1 ? 0 : z \u003c= 2 ? 1 : 2;\n  }\n  params.top = top;\n}\n\nfunction fill(params) {\n  theory(params);\n  // Enough balls that the tallest bin should end a little under the brim.\n  params.total = Math.round((0.9 * params.iw * params.binRows) / params.top);\n  params.hopper = params.total;\n  params.count.fill(0);\n  params.pile.fill(0);\n}\n\nfunction place(params, j, xp) {\n  const iw = params.iw;\n  const level = Math.floor(params.count[j] / iw);\n  if (level >= params.binRows) return false;\n  const y = BOTTOM - level;\n  const left = params.x0 + j * params.dx;\n  let c = Math.max(left, Math.min(left + iw - 1, Math.floor(xp)));\n  // The nearest free place in the row the bin is filling.\n  for (let d = 0; d \u003c iw * 2; d++) {\n    const cc = c + (d & 1 ? -((d + 1) >> 1) : d >> 1);\n    if (cc \u003c left || cc >= left + iw) continue;\n    if (params.pile[y * W + cc] === 0) {\n      c = cc;\n      break;\n    }\n  }\n  params.pile[y * W + c] = 140 + Math.floor(Math.random() * 115);\n  params.count[j]++;\n  if (params.count[j] >= iw * params.binRows) params.full = true;\n  return true;\n}\n\nfunction release(params) {\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (params.mode[i] !== 0) continue;\n    params.mode[i] = 1;\n    params.bt[i] = 0;\n    params.row[i] = 0;\n    params.bj[i] = 0;\n    params.bx[i] = params.mid;\n    params.by[i] = NECK;\n    params.hopper--;\n    return;\n  }\n}\n\nfunction toss(params, i) {\n  params.nj[i] = params.bj[i] + (Math.random() \u003c params.p ? 1 : 0);\n  params.glow[(params.row[i] * (params.row[i] + 1)) / 2 + params.bj[i]] += 1;\n}\n\nfunction moveBalls(params, dt) {\n  const T = params.trow;\n  const dy = params.dy;\n  for (let i = 0; i \u003c MAXB; i++) {\n    const m = params.mode[i];\n    if (m === 0) continue;\n    if (m === 1) {\n      // Out of the neck and onto the top peg.\n      params.bt[i] += dt / 0.14;\n      const t = Math.min(1, params.bt[i]);\n      params.bx[i] = params.mid;\n      params.by[i] = NECK + (params.pegY[0] - 1 - NECK) * t * t;\n      if (params.bt[i] >= 1) {\n        params.bt[i] -= 1;\n        params.mode[i] = 2;\n        toss(params, i);\n      }\n    } else if (m === 2) {\n      params.bt[i] += dt / T;\n      const r = params.row[i];\n      const a = (r * (r + 1)) / 2 + params.bj[i];\n      if (r === params.rows - 1) {\n        // Off the last peg and into a bin.\n        params.mode[i] = params.drain >= 0 ? 4 : 3;\n        params.vy[i] = -dy * 2;\n        params.bt[i] = 0;\n        params.tx[i] = params.x0 + params.nj[i] * params.dx + Math.random() * params.iw;\n        params.bj[i] = params.nj[i];\n        continue;\n      }\n      const b = ((r + 1) * (r + 2)) / 2 + params.nj[i];\n      const t = Math.min(1, params.bt[i]);\n      params.bx[i] = params.pegX[a] + 0.5 + (params.pegX[b] - params.pegX[a]) * t;\n      // A little hop off the peg, then falling.\n      params.by[i] = params.pegY[a] - 1 + (params.pegY[b] - params.pegY[a]) * t * t - dy * 0.35 * 4 * t * (1 - t);\n      if (params.bt[i] >= 1) {\n        params.bt[i] -= 1;\n        params.row[i] = r + 1;\n        params.bj[i] = params.nj[i];\n        toss(params, i);\n      }\n    } else {\n      params.vy[i] = Math.min(70, params.vy[i] + 400 * dt);\n      params.by[i] += params.vy[i] * dt;\n      params.bt[i] += dt;\n      if (m === 3) {\n        params.bx[i] += (params.tx[i] - params.bx[i]) * Math.min(1, dt * 12);\n        const j = params.bj[i];\n        const land = BOTTOM - Math.floor(params.count[j] / params.iw);\n        if (params.drain >= 0) params.mode[i] = 4;\n        else if (params.by[i] >= land) {\n          params.mode[i] = 0;\n          if (!place(params, j, params.bx[i])) params.full = true;\n        }\n      } else if (params.by[i] > H + 2) params.mode[i] = 0;\n    }\n  }\n}\n\nexport function setup(params) {\n  params.pegX = new Int16Array(MAXP);\n  params.pegY = new Int16Array(MAXP);\n  params.glow = new Float32Array(MAXP);\n  params.colBin = new Int8Array(W);\n  params.count = new Int16Array(17);\n  params.expect = new Float32Array(17);\n  params.band = new Uint8Array(17);\n  params.pile = new Uint8Array(W * H);\n  params.mode = new Uint8Array(MAXB);\n  params.bx = new Float32Array(MAXB);\n  params.by = new Float32Array(MAXB);\n  params.bt = new Float32Array(MAXB);\n  params.vy = new Float32Array(MAXB);\n  params.tx = new Float32Array(MAXB);\n  params.row = new Int8Array(MAXB);\n  params.bj = new Int8Array(MAXB);\n  params.nj = new Int8Array(MAXB);\n  params.fb = new Float32Array(W * H * 3);\n  params.colours = new Float32Array(4 * 3);\n  params.hueKey = -1;\n  params.grain = new Uint8Array(W * (NECK + 1));\n  for (let i = 0; i \u003c params.grain.length; i++) params.grain[i] = 120 + Math.floor(Math.random() * 135);\n  let cap = 0;\n  for (let y = 0; y \u003c= NECK; y++) cap += 63 - 2 * wallLeft(y);\n  params.hopCap = cap;\n  params.rows = 0;\n  params.p = 0.5;\n  params.acc = 0;\n  params.drain = -1;\n  params.hold = 0;\n  params.refill = 1;\n  params.refillFrom = 1;\n  params.full = false;\n  params.fresh = true;\n}\n\nfunction startDrain(params) {\n  if (params.drain >= 0) return;\n  params.drain = 0;\n  // Whatever is left in the hopper stays there and is topped up after.\n  params.refillFrom = params.hopper / params.total;\n  for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] === 3) params.mode[i] = 4;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 30, 0, 8];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  const rate = Math.max(1, k[1]);\n  params.p = 0.5 + Math.max(-0.3, Math.min(0.3, k[2]));\n  const rows = Math.max(1, Math.min(15, Math.round(k[3])));\n\n  if (params.fresh) {\n    params.fresh = false;\n    layout(params, rows);\n    fill(params);\n    // Start partway through a fill: over half the balls already sorted, and\n    // two and a half seconds of the stream run so the board is busy.\n    const n = Math.floor(params.total * 0.55);\n    for (let b = 0; b \u003c n; b++) {\n      let j = 0;\n      for (let r = 0; r \u003c rows; r++) if (Math.random() \u003c params.p) j++;\n      place(params, j, params.x0 + j * params.dx + Math.random() * params.iw);\n    }\n    params.hopper -= n;\n    for (let s = 0; s \u003c 75; s++) {\n      params.acc += rate / 30;\n      while (params.acc >= 1) {\n        params.acc -= 1;\n        release(params);\n      }\n      moveBalls(params, 1 / 30);\n    }\n  }\n\n  if (rows !== params.rows || (input.btnPressed && input.btnPressed[0])) {\n    if (params.drain \u003c 0) startDrain(params);\n    params.nextRows = rows;\n  }\n  theory(params);\n\n  if (params.drain >= 0) {\n    params.drain += dt;\n    // The floor is open: the pile falls out under gravity.\n    if (0.5 * 300 * params.drain * params.drain > H) {\n      params.drain = -1;\n      if (params.nextRows && params.nextRows !== params.rows) {\n        // Balls still on the old pegs have nowhere to go on the new board.\n        for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] !== 0) params.mode[i] = 4;\n        layout(params, params.nextRows);\n      }\n      fill(params);\n      params.full = false;\n      params.hold = 0;\n      params.refill = 0;\n    }\n  } else if (params.refill \u003c 1) {\n    params.refill = Math.min(1, params.refill + dt / 0.8);\n  } else {\n    let flying = 0;\n    for (let i = 0; i \u003c MAXB; i++) if (params.mode[i] >= 1 && params.mode[i] \u003c= 3) flying++;\n    if (params.full || (params.hopper \u003c= 0 && flying === 0)) {\n      // Hold the finished curve a moment before the floor opens.\n      params.hold += dt;\n      if (params.hold > 2.5) startDrain(params);\n    } else if (!params.full) {\n      params.acc += rate * dt;\n      while (params.acc >= 1 && params.hopper > 0) {\n        params.acc -= 1;\n        release(params);\n      }\n      if (params.hopper \u003c= 0) params.acc = 0;\n    }\n  }\n\n  moveBalls(params, dt);\n  const fade = Math.exp(-dt * 5);\n  for (let n = 0; n \u003c params.pegs; n++) params.glow[n] *= fade;\n}\n\nfunction add(fb, x, y, r, g, b) {\n  const i = (y * W + x) * 3;\n  fb[i] += r;\n  fb[i + 1] += g;\n  fb[i + 2] += b;\n}\n\nexport function draw(display, params, time) {\n  const fb = params.fb;\n  const col = params.colours;\n  if (params.hueKey !== params.hue) {\n    params.hueKey = params.hue;\n    // K1 at 0 opens on mint, with the tails stepping towards blue.\n    const h = params.hue + 0.42;\n    const cs = [hsv(h, 0.62, 1), hsv(h + 0.09, 0.8, 0.9), hsv(h + 0.19, 0.9, 0.82), hsv(h + 0.05, 0.2, 1)];\n    for (let c = 0; c \u003c 4; c++) {\n      col[c * 3] = cs[c][0];\n      col[c * 3 + 1] = cs[c][1];\n      col[c * 3 + 2] = cs[c][2];\n    }\n  }\n  fb.fill(0);\n\n  // The hopper, filled from the neck up with what is left to drop.\n  const from = params.refillFrom;\n  const left = params.drain >= 0 ? from : params.refill \u003c 1 ? from + (1 - from) * params.refill : params.hopper / params.total;\n  let cells = Math.round(params.hopCap * Math.max(0, left));\n  for (let y = NECK; y >= 0; y--) {\n    const wl = wallLeft(y);\n    const wr = W - 1 - wl;\n    add(fb, wl, y, 46, 48, 58);\n    add(fb, wr, y, 46, 48, 58);\n    const width = wr - wl - 1;\n    // A part-filled row fills from the walls in, the dip a draining funnel makes.\n    for (let n = 0; n \u003c width && cells > 0; n++, cells--) {\n      const x = n & 1 ? wr - 1 - (n >> 1) : wl + 1 + (n >> 1);\n      const s = params.grain[y * W + x] / 255;\n      add(fb, x, y, col[0] * s * 0.7, col[1] * s * 0.7, col[2] * s * 0.7);\n    }\n  }\n\n  // Pegs glow for a moment each time a ball strikes them.\n  for (let n = 0; n \u003c params.pegs; n++) {\n    const v = 0.42 + 0.58 * (1 - Math.exp(-params.glow[n] * 0.5));\n    add(fb, params.pegX[n], params.pegY[n], col[9] * v, col[10] * v, col[11] * v);\n  }\n\n  const colBin = params.colBin;\n  for (let x = 0; x \u003c W; x++) {\n    if (colBin[x] !== -2) continue;\n    for (let y = params.binTop + 1; y \u003c H; y++) add(fb, x, y, 40, 42, 52);\n  }\n\n  // The pile, falling away while the floor is open.\n  const drop = params.drain >= 0 ? Math.floor(0.5 * 300 * params.drain * params.drain) : 0;\n  const pile = params.pile;\n  for (let y = BOTTOM; y > params.binTop; y--) {\n    const to = y + drop;\n    if (to > BOTTOM) continue;\n    for (let x = 0; x \u003c W; x++) {\n      const s = pile[y * W + x];\n      if (s === 0) continue;\n      const c = params.band[colBin[x]] * 3;\n      const v = s / 255;\n      add(fb, x, to, col[c] * v, col[c + 1] * v, col[c + 2] * v);\n    }\n  }\n\n  // Where theory says each bin will stand when the hopper is empty.\n  if (params.drain \u003c 0) {\n    for (let j = 0; j \u003c= params.rows; j++) {\n      const tall = (params.total * params.expect[j]) / params.iw;\n      if (tall \u003c 1) continue;\n      const y = BOTTOM - Math.floor(tall);\n      if (y \u003c= params.binTop) continue;\n      const c = params.band[j] * 3;\n      const x0 = params.x0 + j * params.dx;\n      for (let x = x0; x \u003c x0 + params.iw; x++) {\n        if (pile[y * W + x] !== 0) continue;\n        add(fb, x, y, col[c] * 0.22, col[c + 1] * 0.22, col[c + 2] * 0.22);\n      }\n    }\n  }\n\n  // Balls in flight, each spread over its four nearest LEDs so it glides.\n  for (let i = 0; i \u003c MAXB; i++) {\n    if (params.mode[i] === 0) continue;\n    const fx = params.bx[i] - 0.5;\n    const fy = params.by[i] - 0.5;\n    const ix = Math.floor(fx);\n    const iy = Math.floor(fy);\n    const ax = fx - ix;\n    const ay = fy - iy;\n    for (let q = 0; q \u003c 4; q++) {\n      const x = ix + (q & 1);\n      const y = iy + (q >> 1);\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const w = (q & 1 ? ax : 1 - ax) * (q >> 1 ? ay : 1 - ay);\n      add(fb, x, y, col[9] * w, col[10] * w, col[11] * w);\n    }\n  }\n\n  for (let p = 0, i = 0; p \u003c W * H; p++, i += 3) {\n    const r = fb[i];\n    const g = fb[i + 1];\n    const b = fb[i + 2];\n    display.setPixel(p % W, (p / W) | 0, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Rate=30..240, Bias=-0.3..0.3, Rows=8..15","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the pile round the wheel; the middle, the one-sigma band and the tails keep their steps apart."},{"name":"Rate","min":30,"max":240,"about":"Balls let through the neck each second, from a trickle to a pour."},{"name":"Bias","min":-0.3,"max":0.3,"about":"The chance of bouncing right at a peg, from 0.2 to 0.8; at 0 it is a fair coin and the curve stands straight."},{"name":"Rows","min":8,"max":15,"about":"Rows of pegs, which is also coins tossed per ball; more rows make more, narrower bins."}],"start":[0,30,0,8],"measures":{"motion":0.2909,"detail":0.0577,"edges":0.7232,"complexity":0.5234,"coverage":0.2361,"colour":0.1843,"drift":0.0246},"knobResponse":[0.0536,0.0477,0.0979,0.0715]},{"slug":"gear-train","title":"Gear Train","family":"machine","round":8,"note":"패널 발치의 크랭크가 색 톱니바퀴를 돌려요. 바퀴마다 아래 바퀴와 톱니를 맞물려 꼭대기까지 이어지고, 작은 바퀴일수록 빨리 돌아요. K4 를 올리면 모든 바퀴가 톱니 하나씩 딸깍 걸려 나가요.","idea":"A crank at the foot of the panel turns a train of coloured gears that climbs to the top, every gear meshing tooth for tooth with the one below.","buttons":"K1 tap reverses the crank; the train slows, stops and runs the other way.","code":"// ===== Patternflow pattern =====\n// Title:   Gear Train\n// Family:  machine\n// Idea:    A crank at the foot of the panel turns a train of coloured gears that climbs to the top, every gear meshing tooth for tooth with the one below.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the snap-together plastic gear sets children build on a pegboard\n// Round:   8\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Gears=4..9, Tick=0..1\n//\n// Knob 1: Hue. Turns the colour of every gear together, starting from a blue drive gear under yellow, green and violet.\n// Knob 2: Speed. How fast the crank turns: at the bottom of the range the drive gear creeps a tooth every few seconds, at the top it passes three teeth a second.\n// Knob 3: Gears. How many gears the train has; fewer gears are bigger, so the train always reaches from the crank to the top of the panel.\n// Knob 4: Tick. Smooth turning at 0; turned up, the crank moves a tooth at a time and every gear jumps and settles together, like a ratchet.\n// Buttons: K1 tap reverses the crank; the train slows, stops and runs the other way.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The module: half a tooth pitch on the pitch circle per tooth, in LEDs.\n// Every gear of the set has it, so any two of them mesh.\nconst MOD = 1.7;\nconst ADD = MOD;\nconst DED = 1.2 * MOD;\n// How sharply a tooth's flank turns into its tip and root: a trapezoid tooth.\nconst FLANK = 1.7;\nconst MAX = 9;\n// A big-small rhythm up the train, scaled to fill the panel's height.\nconst TEETH = [30, 15, 25, 13, 27, 14, 22, 12, 24];\n// The set's colours, bottom to top: the drive gear is blue.\nconst HUES = [0.6, 0.14, 0.34, 0.78, 0.07, 0.5, 0.92, 0.22, 0.68];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Lay out n gears scaled by s, each one leaning off the gear below by the\n// angle the plan gives it: the drive gear at the foot, every next gear\n// meshing with the one below. Null when a gear runs too far off the panel's\n// sides or into any gear but its neighbours.\nfunction place(n, s, plan) {\n  const g = [];\n  for (let i = 0; i \u003c n; i++) {\n    const z = Math.max(10, Math.round(TEETH[i] * s));\n    const rp = (MOD * z) / 2;\n    g.push({ z, rp, ro: rp + ADD, x: 0, y: 0, alpha: 0 });\n  }\n  g[0].x = g[0].ro * 0.55 + (W - g[0].ro * 1.1) * plan[0];\n  for (let i = 1; i \u003c n; i++) {\n    const a = g[i - 1];\n    const b = g[i];\n    const d = a.rp + b.rp;\n    b.x = a.x + d * Math.sin(plan[i]);\n    b.y = a.y - d * Math.cos(plan[i]);\n    if (b.x \u003c b.ro * 0.45 || b.x > W - b.ro * 0.45 || b.y + b.ro > g[0].y + g[0].ro) return null;\n    for (let j = 0; j \u003c i - 1; j++) {\n      const c = g[j];\n      if (Math.hypot(b.x - c.x, b.y - c.y) \u003c b.ro + c.ro + 1.5) return null;\n    }\n    b.alpha = Math.atan2(b.y - a.y, b.x - a.x);\n  }\n  return g;\n}\n\nfunction span(g) {\n  let top = Infinity;\n  for (const q of g) top = Math.min(top, q.y - q.ro);\n  return g[0].y + g[0].ro - top;\n}\n\nfunction layout(P, n) {\n  // Try a few hundred plans and keep the one whose gears can be biggest while\n  // the train still fits between the foot of the panel and its top. Links\n  // mostly lean to alternate sides and lean between 20 and 75 degrees.\n  let best = null;\n  let bestS = 0.3;\n  const plan = [0];\n  for (let c = 0; c \u003c 240; c++) {\n    plan[0] = hash(n, c * 16);\n    let side = hash(n, c * 16 + 1) \u003c 0.5 ? -1 : 1;\n    for (let i = 1; i \u003c n; i++) {\n      if (hash(c, i * 7 + n) \u003c 0.75) side = -side;\n      plan[i] = side * (0.35 + 0.95 * hash(c * 31 + n, i));\n    }\n    for (let s = 2.4; s > bestS + 0.01; s -= 0.02) {\n      const g = place(n, s, plan);\n      if (g && span(g) \u003c= 132) {\n        bestS = s;\n        best = g;\n        break;\n      }\n    }\n  }\n  if (!best) {\n    for (let i = 0; i \u003c n; i++) plan[i] = i ? (i % 2 ? -0.35 : 0.35) : 0.5;\n    best = place(n, 0.3, plan);\n  }\n  const shift = 64 + span(best) / 2 - (best[0].y + best[0].ro);\n  for (const q of best) q.y += shift;\n  P.gears = best;\n  P.n = n;\n\n  // The pegboard: brown hardboard with a hole every four LEDs, and under each\n  // gear a soft shadow cast down and to the right.\n  const board = P.board;\n  const base = [0, 0, 0];\n  hsvInto(base, 0, 0.075, 0.55, 0.21);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const hx = (x % 4) - 1.5;\n      const hy = (y % 4) - 1.5;\n      const hole = clamp01(1.25 - Math.hypot(hx, hy));\n      let shade = 1 - 0.72 * hole;\n      for (const q of best) {\n        const d = Math.hypot(x - q.x - 1.5, y - q.y - 2.5);\n        shade *= 1 - 0.55 * clamp01((q.rp + 1.5 - d) / 1.5);\n      }\n      const p = y * W + x;\n      board[p * 3] = base[0] * shade;\n      board[p * 3 + 1] = base[1] * shade;\n      board[p * 3 + 2] = base[2] * shade;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.board = new Float32Array(N * 3);\n  P.frame = new Float32Array(N * 3);\n  P.col = new Float32Array(3);\n  P.theta = new Float32Array(MAX);\n  P.u = 0;\n  P.vel = 2;\n  P.dir = 1;\n  P.speed = 2;\n  P.tick = 0.06;\n  P.hue = 0;\n  layout(P, 4);\n}\n\n// The snap of one ratchet step: quick, a little past, and back.\nfunction snap(f) {\n  const t = Math.min(1, f / 0.28) - 1;\n  return 1 + 2.70158 * t * t * t + 1.70158 * t * t;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.speed = Math.max(0.2, Math.min(3, k[1]));\n  const n = Math.max(4, Math.min(MAX, Math.round(k[2])));\n  P.tick = clamp01(k[3]);\n  if (n !== P.n) layout(P, n);\n\n  if (input.btnPressed && input.btnPressed[0]) P.dir = -P.dir;\n  // The crank speeds up or comes round to the other way in about half a second.\n  const target = P.dir * P.speed;\n  P.vel += (target - P.vel) * Math.min(1, dt * 5);\n  P.u += P.vel * dt;\n\n  // The drive gear's angle, a tooth at a time as Tick turns up.\n  const g = P.gears;\n  const whole = Math.floor(P.u);\n  const stepped = whole + snap(P.u - whole);\n  const teeth = P.u * (1 - P.tick) + stepped * P.tick;\n  P.theta[0] = (teeth * 2 * Math.PI) / g[0].z;\n  // Each gear takes its angle from the one below: where their pitch circles\n  // touch, a tooth of one sits in a gap of the other.\n  for (let i = 1; i \u003c g.length; i++) {\n    const a = g[i - 1];\n    const b = g[i];\n    P.theta[i] = b.alpha + Math.PI - (Math.PI - a.z * (b.alpha - P.theta[i - 1])) / b.z;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const out = P.frame;\n  out.set(P.board);\n  const col = P.col;\n  const g = P.gears;\n\n  for (let i = 0; i \u003c g.length; i++) {\n    const q = g[i];\n    const th = P.theta[i];\n    const z = q.z;\n    const rp = q.rp;\n    const ro = q.ro;\n    const root = rp - DED;\n    const groove = root - 1.6;\n    const hub = Math.max(2.6, rp * 0.26);\n    const holes = rp >= 18 ? 6 : rp >= 13 ? 5 : rp >= 9 ? 3 : 0;\n    const ringR = (hub + groove) / 2;\n    const holeR = holes ? Math.min(0.3 * (groove - hub), ringR * Math.sin(Math.PI / holes) * 0.55) : 0;\n    const step = holes ? (2 * Math.PI) / holes : 1;\n    hsvInto(col, 0, HUES[i] + P.hue, 0.82, 0.93);\n    const crank = i === 0;\n    const ct = Math.cos(th + step / 2);\n    const st = Math.sin(th + step / 2);\n    const arm = ringR + 1;\n\n    const x0 = Math.max(0, Math.floor(q.x - ro - 1));\n    const x1 = Math.min(W - 1, Math.ceil(q.x + ro + 1));\n    const y0 = Math.max(0, Math.floor(q.y - ro - 1));\n    const y1 = Math.min(H - 1, Math.ceil(q.y + ro + 1));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = y - q.y;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x - q.x;\n        const r = Math.sqrt(dx * dx + dy * dy);\n        if (r > ro + 1) continue;\n        // The tooth outline: radius as a trapezoid wave around the rim. Inside\n        // the roots the face is whole, so the angle is only worked out near\n        // the teeth and on the ring of holes.\n        const nearTeeth = r > root - 3;\n        const nearHoles = holes > 0 && Math.abs(r - ringR) \u003c holeR + 1;\n        const beta = nearTeeth || nearHoles ? Math.atan2(dy, dx) : 0;\n        let dist = 4;\n        if (nearTeeth) {\n          const phi = z * (beta - th);\n          const c = Math.cos(phi);\n          const f = Math.max(-1, Math.min(1, FLANK * c));\n          const depth = f > 0 ? ADD : DED;\n          dist = rp + depth * f - r;\n          // On a flank the outline runs at a slant, so the distance to it is\n          // shorter than the radial gap; far from the outline that no longer holds.\n          if (Math.abs(FLANK * c) \u003c 1) {\n            const slope = (depth * FLANK * Math.sin(phi) * z) / r;\n            dist /= Math.sqrt(1 + slope * slope * clamp01(1.5 - Math.abs(dist) / 2));\n          }\n        }\n        let cover = clamp01(dist + 0.5);\n        if (cover \u003c= 0) continue;\n\n        // The crank handle on the drive gear: an arm out from the hub between\n        // two holes, and a cream knob at its end. It stands on the gear's face.\n        let handle = 0;\n        let knob = 0;\n        if (crank) {\n          const along = dx * ct + dy * st;\n          const across = -dx * st + dy * ct;\n          const armC = along > 0 && along \u003c arm ? clamp01(1.9 - Math.abs(across)) : 0;\n          const kx = along - arm;\n          knob = clamp01(3.6 - Math.sqrt(kx * kx + across * across));\n          handle = Math.max(armC, knob);\n        }\n\n        // Lightening holes, turning with the gear: the board shows through.\n        if (nearHoles) {\n          const k = Math.round((beta - th) / step);\n          const a = th + k * step;\n          const ex = dx - ringR * Math.cos(a);\n          const ey = dy - ringR * Math.sin(a);\n          cover *= 1 - clamp01(holeR - Math.sqrt(ex * ex + ey * ey) + 0.5);\n          cover = Math.max(cover, handle);\n          if (cover \u003c= 0) continue;\n        }\n\n        // Light from the top left, a groove inside the teeth, a raised hub.\n        // The outline catches the light on its top left and falls into shade\n        // on its bottom right, so the teeth stand up off the face.\n        const face = -(dx * 0.6 + dy * 0.8) / Math.max(1, r);\n        const rim = clamp01(1 - dist / 1.6);\n        let v = 1;\n        v *= 1 - 0.16 * clamp01(1 - Math.abs(r - groove) * 1.1);\n        if (r \u003c hub + 0.5) v *= 1.08 - 0.22 * clamp01(1 - Math.abs(r - hub) * 1.2);\n        if (face \u003c 0) v *= 1 + 0.32 * rim * face;\n        let R = col[0] * v;\n        let G = col[1] * v;\n        let B = col[2] * v;\n        if (face > 0) {\n          const w = 0.4 * rim * face;\n          R += (255 - R) * w;\n          G += (255 - G) * w;\n          B += (255 - B) * w;\n        }\n        // The axle peg in the middle, steel grey and still.\n        const peg = clamp01(1.9 - r);\n        if (peg > 0) {\n          R += (190 - R) * peg;\n          G += (192 - G) * peg;\n          B += (200 - B) * peg;\n        }\n        if (handle > 0) {\n          const lit = knob >= handle ? 1 : 0.8;\n          R += (245 * lit - R) * handle;\n          G += (232 * lit - G) * handle;\n          B += (205 * lit - B) * handle;\n        }\n        const p = (y * W + x) * 3;\n        out[p] += (R - out[p]) * cover;\n        out[p + 1] += (G - out[p + 1]) * cover;\n        out[p + 2] += (B - out[p + 2]) * cover;\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n  }\n}\n","layer":{"id":"layer-gear-train","type":"code","name":"gear-train","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Gear Train\n// Family:  machine\n// Idea:    A crank at the foot of the panel turns a train of coloured gears that climbs to the top, every gear meshing tooth for tooth with the one below.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the snap-together plastic gear sets children build on a pegboard\n// Round:   8\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Gears=4..9, Tick=0..1\n//\n// Knob 1: Hue. Turns the colour of every gear together, starting from a blue drive gear under yellow, green and violet.\n// Knob 2: Speed. How fast the crank turns: at the bottom of the range the drive gear creeps a tooth every few seconds, at the top it passes three teeth a second.\n// Knob 3: Gears. How many gears the train has; fewer gears are bigger, so the train always reaches from the crank to the top of the panel.\n// Knob 4: Tick. Smooth turning at 0; turned up, the crank moves a tooth at a time and every gear jumps and settles together, like a ratchet.\n// Buttons: K1 tap reverses the crank; the train slows, stops and runs the other way.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The module: half a tooth pitch on the pitch circle per tooth, in LEDs.\n// Every gear of the set has it, so any two of them mesh.\nconst MOD = 1.7;\nconst ADD = MOD;\nconst DED = 1.2 * MOD;\n// How sharply a tooth's flank turns into its tip and root: a trapezoid tooth.\nconst FLANK = 1.7;\nconst MAX = 9;\n// A big-small rhythm up the train, scaled to fill the panel's height.\nconst TEETH = [30, 15, 25, 13, 27, 14, 22, 12, 24];\n// The set's colours, bottom to top: the drive gear is blue.\nconst HUES = [0.6, 0.14, 0.34, 0.78, 0.07, 0.5, 0.92, 0.22, 0.68];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Lay out n gears scaled by s, each one leaning off the gear below by the\n// angle the plan gives it: the drive gear at the foot, every next gear\n// meshing with the one below. Null when a gear runs too far off the panel's\n// sides or into any gear but its neighbours.\nfunction place(n, s, plan) {\n  const g = [];\n  for (let i = 0; i \u003c n; i++) {\n    const z = Math.max(10, Math.round(TEETH[i] * s));\n    const rp = (MOD * z) / 2;\n    g.push({ z, rp, ro: rp + ADD, x: 0, y: 0, alpha: 0 });\n  }\n  g[0].x = g[0].ro * 0.55 + (W - g[0].ro * 1.1) * plan[0];\n  for (let i = 1; i \u003c n; i++) {\n    const a = g[i - 1];\n    const b = g[i];\n    const d = a.rp + b.rp;\n    b.x = a.x + d * Math.sin(plan[i]);\n    b.y = a.y - d * Math.cos(plan[i]);\n    if (b.x \u003c b.ro * 0.45 || b.x > W - b.ro * 0.45 || b.y + b.ro > g[0].y + g[0].ro) return null;\n    for (let j = 0; j \u003c i - 1; j++) {\n      const c = g[j];\n      if (Math.hypot(b.x - c.x, b.y - c.y) \u003c b.ro + c.ro + 1.5) return null;\n    }\n    b.alpha = Math.atan2(b.y - a.y, b.x - a.x);\n  }\n  return g;\n}\n\nfunction span(g) {\n  let top = Infinity;\n  for (const q of g) top = Math.min(top, q.y - q.ro);\n  return g[0].y + g[0].ro - top;\n}\n\nfunction layout(P, n) {\n  // Try a few hundred plans and keep the one whose gears can be biggest while\n  // the train still fits between the foot of the panel and its top. Links\n  // mostly lean to alternate sides and lean between 20 and 75 degrees.\n  let best = null;\n  let bestS = 0.3;\n  const plan = [0];\n  for (let c = 0; c \u003c 240; c++) {\n    plan[0] = hash(n, c * 16);\n    let side = hash(n, c * 16 + 1) \u003c 0.5 ? -1 : 1;\n    for (let i = 1; i \u003c n; i++) {\n      if (hash(c, i * 7 + n) \u003c 0.75) side = -side;\n      plan[i] = side * (0.35 + 0.95 * hash(c * 31 + n, i));\n    }\n    for (let s = 2.4; s > bestS + 0.01; s -= 0.02) {\n      const g = place(n, s, plan);\n      if (g && span(g) \u003c= 132) {\n        bestS = s;\n        best = g;\n        break;\n      }\n    }\n  }\n  if (!best) {\n    for (let i = 0; i \u003c n; i++) plan[i] = i ? (i % 2 ? -0.35 : 0.35) : 0.5;\n    best = place(n, 0.3, plan);\n  }\n  const shift = 64 + span(best) / 2 - (best[0].y + best[0].ro);\n  for (const q of best) q.y += shift;\n  P.gears = best;\n  P.n = n;\n\n  // The pegboard: brown hardboard with a hole every four LEDs, and under each\n  // gear a soft shadow cast down and to the right.\n  const board = P.board;\n  const base = [0, 0, 0];\n  hsvInto(base, 0, 0.075, 0.55, 0.21);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const hx = (x % 4) - 1.5;\n      const hy = (y % 4) - 1.5;\n      const hole = clamp01(1.25 - Math.hypot(hx, hy));\n      let shade = 1 - 0.72 * hole;\n      for (const q of best) {\n        const d = Math.hypot(x - q.x - 1.5, y - q.y - 2.5);\n        shade *= 1 - 0.55 * clamp01((q.rp + 1.5 - d) / 1.5);\n      }\n      const p = y * W + x;\n      board[p * 3] = base[0] * shade;\n      board[p * 3 + 1] = base[1] * shade;\n      board[p * 3 + 2] = base[2] * shade;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.board = new Float32Array(N * 3);\n  P.frame = new Float32Array(N * 3);\n  P.col = new Float32Array(3);\n  P.theta = new Float32Array(MAX);\n  P.u = 0;\n  P.vel = 2;\n  P.dir = 1;\n  P.speed = 2;\n  P.tick = 0.06;\n  P.hue = 0;\n  layout(P, 4);\n}\n\n// The snap of one ratchet step: quick, a little past, and back.\nfunction snap(f) {\n  const t = Math.min(1, f / 0.28) - 1;\n  return 1 + 2.70158 * t * t * t + 1.70158 * t * t;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.speed = Math.max(0.2, Math.min(3, k[1]));\n  const n = Math.max(4, Math.min(MAX, Math.round(k[2])));\n  P.tick = clamp01(k[3]);\n  if (n !== P.n) layout(P, n);\n\n  if (input.btnPressed && input.btnPressed[0]) P.dir = -P.dir;\n  // The crank speeds up or comes round to the other way in about half a second.\n  const target = P.dir * P.speed;\n  P.vel += (target - P.vel) * Math.min(1, dt * 5);\n  P.u += P.vel * dt;\n\n  // The drive gear's angle, a tooth at a time as Tick turns up.\n  const g = P.gears;\n  const whole = Math.floor(P.u);\n  const stepped = whole + snap(P.u - whole);\n  const teeth = P.u * (1 - P.tick) + stepped * P.tick;\n  P.theta[0] = (teeth * 2 * Math.PI) / g[0].z;\n  // Each gear takes its angle from the one below: where their pitch circles\n  // touch, a tooth of one sits in a gap of the other.\n  for (let i = 1; i \u003c g.length; i++) {\n    const a = g[i - 1];\n    const b = g[i];\n    P.theta[i] = b.alpha + Math.PI - (Math.PI - a.z * (b.alpha - P.theta[i - 1])) / b.z;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const out = P.frame;\n  out.set(P.board);\n  const col = P.col;\n  const g = P.gears;\n\n  for (let i = 0; i \u003c g.length; i++) {\n    const q = g[i];\n    const th = P.theta[i];\n    const z = q.z;\n    const rp = q.rp;\n    const ro = q.ro;\n    const root = rp - DED;\n    const groove = root - 1.6;\n    const hub = Math.max(2.6, rp * 0.26);\n    const holes = rp >= 18 ? 6 : rp >= 13 ? 5 : rp >= 9 ? 3 : 0;\n    const ringR = (hub + groove) / 2;\n    const holeR = holes ? Math.min(0.3 * (groove - hub), ringR * Math.sin(Math.PI / holes) * 0.55) : 0;\n    const step = holes ? (2 * Math.PI) / holes : 1;\n    hsvInto(col, 0, HUES[i] + P.hue, 0.82, 0.93);\n    const crank = i === 0;\n    const ct = Math.cos(th + step / 2);\n    const st = Math.sin(th + step / 2);\n    const arm = ringR + 1;\n\n    const x0 = Math.max(0, Math.floor(q.x - ro - 1));\n    const x1 = Math.min(W - 1, Math.ceil(q.x + ro + 1));\n    const y0 = Math.max(0, Math.floor(q.y - ro - 1));\n    const y1 = Math.min(H - 1, Math.ceil(q.y + ro + 1));\n    for (let y = y0; y \u003c= y1; y++) {\n      const dy = y - q.y;\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x - q.x;\n        const r = Math.sqrt(dx * dx + dy * dy);\n        if (r > ro + 1) continue;\n        // The tooth outline: radius as a trapezoid wave around the rim. Inside\n        // the roots the face is whole, so the angle is only worked out near\n        // the teeth and on the ring of holes.\n        const nearTeeth = r > root - 3;\n        const nearHoles = holes > 0 && Math.abs(r - ringR) \u003c holeR + 1;\n        const beta = nearTeeth || nearHoles ? Math.atan2(dy, dx) : 0;\n        let dist = 4;\n        if (nearTeeth) {\n          const phi = z * (beta - th);\n          const c = Math.cos(phi);\n          const f = Math.max(-1, Math.min(1, FLANK * c));\n          const depth = f > 0 ? ADD : DED;\n          dist = rp + depth * f - r;\n          // On a flank the outline runs at a slant, so the distance to it is\n          // shorter than the radial gap; far from the outline that no longer holds.\n          if (Math.abs(FLANK * c) \u003c 1) {\n            const slope = (depth * FLANK * Math.sin(phi) * z) / r;\n            dist /= Math.sqrt(1 + slope * slope * clamp01(1.5 - Math.abs(dist) / 2));\n          }\n        }\n        let cover = clamp01(dist + 0.5);\n        if (cover \u003c= 0) continue;\n\n        // The crank handle on the drive gear: an arm out from the hub between\n        // two holes, and a cream knob at its end. It stands on the gear's face.\n        let handle = 0;\n        let knob = 0;\n        if (crank) {\n          const along = dx * ct + dy * st;\n          const across = -dx * st + dy * ct;\n          const armC = along > 0 && along \u003c arm ? clamp01(1.9 - Math.abs(across)) : 0;\n          const kx = along - arm;\n          knob = clamp01(3.6 - Math.sqrt(kx * kx + across * across));\n          handle = Math.max(armC, knob);\n        }\n\n        // Lightening holes, turning with the gear: the board shows through.\n        if (nearHoles) {\n          const k = Math.round((beta - th) / step);\n          const a = th + k * step;\n          const ex = dx - ringR * Math.cos(a);\n          const ey = dy - ringR * Math.sin(a);\n          cover *= 1 - clamp01(holeR - Math.sqrt(ex * ex + ey * ey) + 0.5);\n          cover = Math.max(cover, handle);\n          if (cover \u003c= 0) continue;\n        }\n\n        // Light from the top left, a groove inside the teeth, a raised hub.\n        // The outline catches the light on its top left and falls into shade\n        // on its bottom right, so the teeth stand up off the face.\n        const face = -(dx * 0.6 + dy * 0.8) / Math.max(1, r);\n        const rim = clamp01(1 - dist / 1.6);\n        let v = 1;\n        v *= 1 - 0.16 * clamp01(1 - Math.abs(r - groove) * 1.1);\n        if (r \u003c hub + 0.5) v *= 1.08 - 0.22 * clamp01(1 - Math.abs(r - hub) * 1.2);\n        if (face \u003c 0) v *= 1 + 0.32 * rim * face;\n        let R = col[0] * v;\n        let G = col[1] * v;\n        let B = col[2] * v;\n        if (face > 0) {\n          const w = 0.4 * rim * face;\n          R += (255 - R) * w;\n          G += (255 - G) * w;\n          B += (255 - B) * w;\n        }\n        // The axle peg in the middle, steel grey and still.\n        const peg = clamp01(1.9 - r);\n        if (peg > 0) {\n          R += (190 - R) * peg;\n          G += (192 - G) * peg;\n          B += (200 - B) * peg;\n        }\n        if (handle > 0) {\n          const lit = knob >= handle ? 1 : 0.8;\n          R += (245 * lit - R) * handle;\n          G += (232 * lit - G) * handle;\n          B += (205 * lit - B) * handle;\n        }\n        const p = (y * W + x) * 3;\n        out[p] += (R - out[p]) * cover;\n        out[p + 1] += (G - out[p + 1]) * cover;\n        out[p + 2] += (B - out[p + 2]) * cover;\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[p]), Math.min(255, out[p + 1]), Math.min(255, out[p + 2]));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Gears=4..9, Tick=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colour of every gear together, starting from a blue drive gear under yellow, green and violet."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the crank turns: at the bottom of the range the drive gear creeps a tooth every few seconds, at the top it passes three teeth a second."},{"name":"Gears","min":4,"max":9,"about":"How many gears the train has; fewer gears are bigger, so the train always reaches from the crank to the top of the panel."},{"name":"Tick","min":0,"max":1,"about":"Smooth turning at 0; turned up, the crank moves a tooth at a time and every gear jumps and settles together, like a ratchet."}],"start":[0,2,4,0.06],"measures":{"motion":0.8362,"detail":0.0922,"edges":0.4218,"complexity":1.1517,"coverage":0.8876,"colour":0.5762,"drift":0.1048},"knobResponse":[0.3786,0.1249,0.2931,0.0655]},{"slug":"giraffe","title":"Giraffe","family":"mammal","round":23,"note":"우산 아카시아의 납작한 수관 밑에서 그물무늬기린이 보라색 혀로 잔가지를 감아 잎을 훑고, 소등쪼기새가 목을 타고 뛰어다녀요. 가끔 앞다리를 A 자로 벌리고 목을 내려 웅덩이 물을 마시면 물에 동그란 물결이 퍼져요. K3 을 돌리면 무늬가 마사이기린이나 로스차일드기린의 것으로 바뀌고, 끝에는 흰 기린이 서요.","idea":"Under the flat crown of an umbrella thorn a reticulated giraffe strips a twig with its long dark tongue, and every so often it splays its front legs and bends down to drink at the waterhole.","buttons":"K1 tap sends the giraffe down to drink now.","code":"// ===== Patternflow pattern =====\n// Title:   Giraffe\n// Family:  mammal\n// Idea:    Under the flat crown of an umbrella thorn a reticulated giraffe strips a twig with its long dark tongue, and every so often it splays its front legs and bends down to drink at the waterhole.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the browse line giraffes cut under the umbrella thorn acacia (Vachellia tortilis)\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Coat=0..3, Wind=0..1\n//\n// Knob 1: Sun. The hour, from a high white sun at 0 to a red sun setting between the giraffe's legs at 1. Round each hour the sun sinks a little and climbs back once a minute.\n// Knob 2: Speed. At 2 a lick takes about three seconds; the giraffe first goes down to drink after three, then every half minute or when its twig is bare.\n// Knob 3: Coat. Reticulated with thin white lines, Masai with jagged leaf patches, Rothschild with broad buff lines and white stockings, or pale leucistic, each on its own ground: red earth, gold grass, green grass, pale sand.\n// Knob 4: Wind. Grass and crown lean and shake with it, and dust blows over the plain until the far herd goes hazy.\n// Buttons: K1 tap sends the giraffe down to drink now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Horizon and waterhole; the crown is kept wider than the panel to rock.\nconst [HOR, PCX, PCY, PRX, PRY] = [94, 50, 113.5, 14, 4.8];\nconst [CW, CH, CO] = [80, 26, 8];\nconst { min, max, floor, round, sin, cos, sqrt, exp, PI } = Math;\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst smin = (a, b, k, h = cl(0.5 + (0.5 * (b - a)) / k, 0, 1)) => b + (a - b) * h - k * h * (1 - h);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The light from afternoon to dusk, one row per hour.\nconst SKY = [\n  [74, 134, 216, 186, 210, 226, 255, 250, 228, 1, 0.98, 0.92, 1],\n  [62, 114, 206, 236, 208, 164, 255, 238, 180, 1.04, 0.92, 0.78, 0.97],\n  [56, 78, 170, 255, 170, 94, 255, 198, 100, 1.08, 0.8, 0.6, 0.88],\n  [40, 38, 108, 248, 108, 72, 255, 132, 60, 1, 0.64, 0.52, 0.74],\n];\n// Each coat: patch, line, mane, and the ground it stands on.\nconst COATS = [\n  { p: [150, 54, 22], l: [250, 240, 214], m: [92, 42, 22], land: [204, 142, 92] },\n  { p: [108, 50, 26], l: [226, 184, 122], m: [80, 42, 24], land: [214, 182, 98] },\n  { p: [180, 98, 44], l: [236, 212, 164], m: [112, 62, 32], land: [160, 176, 86] },\n  { p: [224, 204, 172], l: [252, 248, 238], m: [200, 168, 132], land: [224, 210, 166] },\n];\n// The pale of the lower legs.\nconst STOCK = [244, 234, 212];\nconst [BODY, NECK, HEAD, LEGN, LEGF, MANE, OSS, TIP, EAR, TAIL, TUFT, HOOF, MUZ] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];\n\n// The coat as a 128 x 128 wrapping texture: 1 inside a patch, 0 on a line.\nfunction buildCoat(P, kind) {\n  const S = 6.4, G = 20;\n  for (let y = 0; y \u003c 128; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      let qx = x + 0.5, qy = y + 0.5, f1 = 99, f2 = 99, id = 0, ax = 0, ay = 0, v;\n      if (kind === 1) (qx += 3 * (vn(x * 0.3, y * 0.3) - 0.5)), (qy += 3 * (vn(x * 0.3 + 9, y * 0.3) - 0.5));\n      const cx = floor(qx / S), cy = floor(qy / S);\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++) {\n          const gx = (cx + i + G) % G, gy = (cy + j + G) % G, fx = (cx + i + 0.15 + 0.7 * hash(gx, gy)) * S, fy = (cy + j + 0.15 + 0.7 * hash(gx + 50, gy)) * S;\n          const d = hyp(qx - fx, qy - fy);\n          if (d \u003c f1) (f2 = f1), (f1 = d), (id = gx * 31 + gy), (ax = qx - fx), (ay = qy - fy);\n          else if (d \u003c f2) f2 = d;\n        }\n      const e = f2 - f1;\n      if (kind === 0) v = sm(0.7, 1.4, e);\n      else if (kind === 1) {\n        // Masai patches are cut into leaves and stars.\n        const thr = 1.9 + sin(Math.atan2(ay, ax) * 5 + id) + 0.6 * vn(x * 0.7, y * 0.7);\n        v = sm(thr - 0.5, thr + 0.5, e);\n      } else v = kind === 2 ? sm(1.3, 2.6, e) : sm(1, 2.2, e) * 0.9;\n      P.tex[y * 128 + x] = v;\n      P.tsh[y * 128 + x] = 0.84 + 0.3 * hash(id, 7);\n    }\n  P.coat = kind;\n}\n\n// A thick line into the wood layer.\nfunction stroke(A, pts, r0, r1, val) {\n  for (let j = 0; j + 2 \u003c pts.length; j += 2) {\n    const [ax, ay, bx, by] = pts.slice(j, j + 4), n = 2 * hyp(bx - ax, by - ay);\n    for (let s = 0; s \u003c= n; s++) {\n      const t = s / n, x = mix(ax, bx, t), y = mix(ay, by, t), r = mix(r0, r1, (j + 2 * t) / (pts.length - 2));\n      for (let yy = floor(y - r); yy \u003c= y + r; yy++)\n        for (let xx = floor(x - r); xx \u003c= x + r; xx++)\n          if (hyp(xx + 0.5 - x, yy + 0.5 - y) \u003c= r && xx >= 0 && xx \u003c W) A[yy * W + xx] = max(A[yy * W + xx], val * (1.1 - (0.35 * (xx + 0.5 - x)) / r));\n    }\n  }\n}\n\nfunction build(P) {\n  // The crown: flat layers of leaves over a flat browse line, with a hollow\n  // eaten up into it where the giraffe reaches.\n  for (let x = 0; x \u003c CW; x++) {\n    const X = x - CO, top = 3 + 0.0028 * (X - 28) ** 2 + 2.2 * vn(X * 0.18, 1.5);\n    const bot = 19.5 + 1.6 * vn(X * 0.3, 4.5) + 0.0016 * (X - 28) ** 2 - 6.5 * exp(-(((X - 53.5) / 4.2) ** 2));\n    for (let y = 0; y \u003c CH; y++) {\n      const i = y * CW + x, f = (y - top) / (bot - top), n = vn(X * 0.16, y * 0.42) * 0.6 + vn(X * 0.5, y * 0.6) * 0.4;\n      if (f \u003c 0 || f > 1) continue;\n      const k = n + 0.125 + 0.125 * sin(y * 0.9 + 2.4 * vn(X * 0.08, 2)) - 0.3 * sm(0.75, 1, f) - 0.35 * sm(0.18, 0, f);\n      if (k > 0.34) (P.cA[i] = 1), (P.cL[i] = (1.15 - 0.6 * f) * (0.75 + 0.5 * n) * (0.85 + 0.3 * hash(X + 300, y)));\n      else if (k > 0.2 && f > 0.12) P.cA[i] = 1;\n    }\n  }\n  // The trunk, and crooked branches fanning up to the crown.\n  stroke(P.wood, [58.5, 104, 57.5, 86, 59, 66, 57.5, 50], 2.2, 1.7, 1);\n  for (const b of [[57.5, 50, 53, 41, 48, 37, 41, 29, 31, 22, 24, 19], [57.5, 52, 55, 42, 51, 33, 50, 25, 46, 19], [58, 50, 61, 40, 61, 31, 65, 21], [58, 60, 54, 55, 46, 50]]) stroke(P.wood, b, 1.5, 0.8, 0.85);\n  // The ground, and dust that wraps every 128 columns.\n  for (let i = HOR * W; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    P.gnd[i] = mix(vn(x * 0.12, y * 0.9), vn(x * 0.6, y * 0.18), (y - HOR) / (H - HOR)) * 0.7 + 0.3 * hash(x, y + 700);\n  }\n  for (let i = 0; i \u003c 128 * 58; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => vn(X * 0.07, y * 0.16) * 0.7 + vn(X * 0.19, y * 0.3 + 5) * 0.3;\n    P.haze[i] = mix(f(x), f(x + 128), x / 128);\n  }\n  P.hill = Array.from({ length: W }, (_, x) => HOR - 2 - 2.5 * vn(x * 0.07, 3) - 1.5 * vn(x * 0.2, 7));\n  // Dry grass, none standing in the water.\n  P.blades = [];\n  while (P.blades.length \u003c 230) {\n    const y = HOR + 5 + (H - HOR - 4) * sqrt(rnd()), x = rnd() * 66 - 1;\n    if (((x - PCX) / (PRX + 1.5)) ** 2 + ((y - PCY) / (PRY + 2)) ** 2 > 1) P.blades.push([x, y, 1.5 + (y - HOR) * 0.2 * (0.6 + 0.8 * rnd()), rnd() * 7, 0.7 + 0.6 * rnd()]);\n  }\n  P.herd = Array.from({ length: 7 }, (_, i) => [i * 9.5 + rnd() * 5, HOR + 0.5 + rnd() * 2.2, 0.35 + rnd() * 0.3, rnd() * 7]);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.g = {\n    f: F(N * 3), z: new Int8Array(N), p: new Uint8Array(N), u: F(N), v: F(N), tex: F(16384), tsh: F(16384), gnd: F(N), wood: F(N), cA: F(CW * CH), cL: F(CW * CH),\n    haze: F(128 * 58), row: F(HOR * 3), bg: F(N * 3), coat: -1, t: 0, dk: 0, dt: 0, next: 3.4, legN: 0, legF: 0, nk: 0, tc: 0.6, tp: 2.8, tw: 0, twv: 0, tl: 9,\n    ear: 1, flick: 0, swish: 0, sw: 3, ox: 0.55, oxT: 1, hop: 1, fall: [], rip: [], ripT: 0,\n  };\n  build(params.g);\n}\n\nexport function update(dt, input, params) {\n  if (!params.g) setup(params);\n  const P = params.g, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2), coat = cl(round(k[2]), 0, 3), w = (P.wind = cl(k[3], 0, 1));\n  if (coat !== P.coat) buildCoat(P, coat);\n  const t = (P.t += d), sunK = cl(k[0], 0, 1);\n  // The sun sinks and climbs back a little round the hour the knob sets.\n  P.h = sunK + (1 - sunK) * 0.3 * (0.5 - 0.5 * cos((2 * PI * t) / 60));\n\n  // Down to drink: the front legs go out one by one, then the neck comes down.\n  if (input.btnPressed && input.btnPressed[0] && P.dk === 0) P.next = 0;\n  const T = (P.dt += d);\n  if (P.dk === 0) {\n    if ((P.next -= d) \u003c= 0 || (P.tl \u003c= 0 && P.tc > 1.6)) (P.dk = 1), (P.dt = 0);\n  } else if (P.dk === 1) {\n    [P.legN, P.legF, P.nk] = [sm(0, 0.7, T), sm(0.45, 1.15, T), sm(0.8, 2.6, T)];\n    if (T >= 2.6) (P.dk = 2), (P.dt = 0);\n  } else if (P.dk === 2) {\n    // Sips: the head dips and lifts, and rings spread on the water.\n    P.nk = 1 - 0.035 * (0.5 - 0.5 * cos(T * 4.4));\n    if ((P.ripT -= d) \u003c= 0) (P.ripT = 0.7 + rnd() * 0.4), P.rip.push([P.mx, P.my + 1, 0, 1]);\n    if (T >= 3.4) (P.dk = 3), (P.dt = 0);\n  } else {\n    // Up again fast, the head first, then the legs gathered in.\n    [P.nk, P.legN, P.legF] = [1 - sm(0, 1, T), 1 - sm(0.9, 1.6, T), 1 - sm(0.6, 1.3, T)];\n    if (T >= 1.8) (P.dk = 0), (P.next = 26 + rnd() * 12), (P.tl = 9), (P.tc = 1.3);\n  }\n\n  // The tongue curls round the twig to strip it. Then the jaw chews.\n  const browsing = P.dk === 0 && P.nk \u003c 0.01;\n  if ((P.tc += d) > P.tp) (P.tc = 0), (P.tp = 2.4 + rnd() * 1.3), (P.pulled = false);\n  const c = P.tc, live = browsing && P.tl > 0;\n  P.ext = live ? (c \u003c 0.45 ? sm(0, 0.45, c) : c \u003c 1 ? 1 : 1 - sm(1, 1.3, c)) : 0;\n  P.twv += (60 * ((live && c > 0.5 && c \u003c 1 ? 3 * sm(0.5, 0.85, c) : 0) - P.tw) - 5 * P.twv) * d;\n  P.tw += P.twv * d;\n  if (live && c > 0.85 && !P.pulled) {\n    P.pulled = true;\n    P.tl--;\n    for (let n = 0; n \u003c 2; n++) P.fall.push([53.5 + rnd() * 2, 18, (rnd() - 0.5) * 4, 2 + rnd() * 3, rnd() * 7]);\n  }\n  P.chew = browsing && c > 1.3 ? 0.5 + 0.5 * sin(c * 19) : 0;\n\n  // Ear and tail keep the flies off, and the oxpecker hops along the neck.\n  if ((P.ear -= d) \u003c= 0) (P.ear = 1.5 + rnd() * 3), (P.flick = 1);\n  P.flick = max(0, P.flick - d * 3.5);\n  if ((P.sw -= d) \u003c= 0) (P.sw = 2.5 + rnd() * 4), (P.swish = 1);\n  P.swish = max(0, P.swish - d * 0.9);\n  P.tail = 0.12 * sin(t * 1.1) + 0.5 * P.swish * sin(t * 9);\n  if ((P.oxT -= d) \u003c= 0) (P.oxT = 0.7 + rnd() * 1.8), (P.ox0 = P.ox), (P.ox1 = cl(P.ox + (rnd() \u003c 0.5 ? -1 : 1) * (0.05 + rnd() * 0.1), 0.3, 0.78)), (P.hop = 0);\n  if (P.hop \u003c 1) (P.hop = min(1, P.hop + d * 4)), (P.ox = mix(P.ox0, P.ox1, P.hop));\n\n  // Falling leaves and rings on the pool.\n  P.fall = P.fall.filter((q) => ((q[4] += d), (q[0] += (q[2] + 3 * sin(q[4] * 3) + 8 * w) * d), (q[1] += q[3] * d), q[1] \u003c 124));\n  P.rip = P.rip.filter((q) => ((q[2] += d * 5), (q[3] -= d * 0.45), q[3] > 0));\n  // The far herd walks on.\n  for (const a of P.herd) if ((a[0] -= a[2] * d) \u003c -4) a[0] += 72;\n}\n\n// One LED of the giraffe, unless something nearer is there.\nfunction put(P, x, y, z, part, u, v) {\n  const i = y * W + x;\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && z >= P.z[i]) (P.z[i] = z), (P.p[i] = part), (P.u[i] = u), (P.v[i] = v);\n}\n\n// A limb through joints, each a point and a radius. Each LED keeps how far\n// along it lies (u) and across (v, plus on the mane side); the tip LEDs take\n// another part.\nfunction limb(P, J, z, part, mane = 0, tipPart = 0, tipLen = 0) {\n  let total = 0, s0 = 0;\n  for (let j = 3; j \u003c J.length; j += 3) total += hyp(J[j] - J[j - 3], J[j + 1] - J[j - 2]);\n  for (let j = 0; j + 3 \u003c J.length; j += 3) {\n    const [ax, ay, ra, bx, by, rb] = J.slice(j, j + 6), len = hyp(bx - ax, by - ay) || 1e-6, dx = (bx - ax) / len, dy = (by - ay) / len, pad = max(ra, rb) + mane + 1;\n    for (let y = floor(min(ay, by) - pad); y \u003c= max(ay, by) + pad; y++)\n      for (let x = floor(min(ax, bx) - pad); x \u003c= max(ax, bx) + pad; x++) {\n        const px = x + 0.5 - ax, py = y + 0.5 - ay, tt = cl(px * dx + py * dy, 0, len), dist = hyp(px - dx * tt, py - dy * tt);\n        const side = px * dy - py * dx, r = ra + ((rb - ra) * tt) / len, s = s0 + tt;\n        if (dist \u003c= r) put(P, x, y, z, tipLen && s > total - tipLen ? tipPart : part, s, side >= 0 ? dist / r : -dist / r);\n        else if (mane && side > 0 && dist \u003c= r + mane && s > 3 && s \u003c total - 1) put(P, x, y, z, MANE, s, 1);\n      }\n    s0 += len;\n  }\n}\n\n// Two bones from hip to hoof, bending the way dir says.\nfunction ik(ax, ay, bx, by, a, b, dir) {\n  const dx = bx - ax, dy = by - ay, d0 = hyp(dx, dy), d = min(d0, a + b - 0.01), x = (a * a - b * b + d * d) / (2 * d), h = sqrt(max(0, a * a - x * x));\n  return [ax + (dx / d0) * x - (dy / d0) * h * dir, ay + (dy / d0) * x + (dx / d0) * h * dir];\n}\n\n// Keys for the neck and head as they swing from the leaves to the water.\nconst NK = [\n  [39.5, 44, 42, 28, -0.52],\n  [50, 40, 58, 58, 1.2],\n  [49, 80, 55, 99.5, 1.66],\n];\n\nfunction giraffe(P) {\n  P.z.fill(-1);\n  const lean = max(P.legN, P.legF), ca = cos(0.22 * lean), sa = sin(0.22 * lean), drop = 3 * lean;\n  // Body space to the panel, tilted on the hip.\n  const T = (x, y) => [12 + (x - 12) * ca - (y - 72) * sa, 72 + (x - 12) * sa + (y - 72) * ca + drop];\n  // The legs go behind the body, the far pair darker. To drink the near\n  // front leg goes back and the far one forward.\n  for (const [sx, sy, hx, hy, dir, part, z] of [\n    [31, 78, 33 + 12 * P.legF, 119.5, -1, LEGF, 1],\n    [16, 75, 16, 119.5, 1, LEGF, 1],\n    [35, 78, 37 - 14 * P.legN, 121.5, -1, LEGN, 2],\n    [12, 75, 11, 121.5, 1, LEGN, 2],\n  ]) {\n    const [ax, ay] = T(sx, sy), [kx, ky] = ik(ax, ay, hx, hy, 22, 22.5, dir);\n    limb(P, [ax, ay, dir \u003c 0 ? 3.2 : 4, kx, ky, dir \u003c 0 ? 1.6 : 1.8, hx, hy, 1.3], z, part, 0, HOOF, 2.2);\n  }\n  // The body, low at the rump and high at the shoulder.\n  for (let y = 48; y \u003c 96; y++)\n    for (let x = 0; x \u003c 50; x++) {\n      const qx = x + 0.5 - 12, qy = y + 0.5 - 72 - drop, bx = 12 + qx * ca + qy * sa, by = 72 - qx * sa + qy * ca;\n      const a = (hyp((bx - 13) / 8.5, (by - 72) / 8.5) - 1) * 8.5, b = (hyp((bx - 24) / 12.5, (by - 73.5) / 9.5) - 1) * 9.5, c = (hyp((bx - 34) / 8.5, (by - 67.5) / 13.5) - 1) * 8.5;\n      if (smin(smin(a, b, 5), c, 5) \u003c= 0) put(P, x, y, 3, BODY, bx, by);\n    }\n  // The tail hangs from the rump and swishes.\n  const tj = T(5.5, 65);\n  tj.push(0.6);\n  for (let j = 1, x = tj[0], y = tj[1], a; j \u003c= 4; j++) (a = PI / 2 + 0.1 + P.tail * j * 0.45), tj.push((x += 6.5 * cos(a)), (y += 6.5 * sin(a)), j === 4 ? 1.7 : 0.6);\n  limb(P, tj, 4, TAIL, 0, TUFT, 4.5);\n\n  // The neck, a curve from the withers to the poll, and its mane.\n  const e = sm(0, 1, P.nk) * 2, i = min(1, floor(e)), K = NK[i].map((v, c) => mix(v, NK[i + 1][c], e - i));\n  const bob = P.dk === 0 ? 1 - P.nk : 0, pull = P.tw * 0.25, [sx, sy] = T(36, 61), qx = K[2] + bob * 0.5 * sin(P.t * 0.9), qy = K[3] + bob * (0.4 * sin(P.t * 1.3) - pull);\n  const J = (P.neck = []);\n  for (let n = 0, t; n \u003c= 12; n++) (t = n / 12), J.push((1 - t) ** 2 * sx + 2 * t * (1 - t) * K[0] + t * t * qx, (1 - t) ** 2 * sy + 2 * t * (1 - t) * K[1] + t * t * qy, mix(5.4, 2.8, t));\n  limb(P, J, 2, NECK, 1.2);\n  // The head, its cheek working as it chews.\n  const ph = K[4] - pull * 0.05, fx = cos(ph), fy = sin(ph), nx = fy, ny = -fx, ch = P.chew;\n  const mx = (P.mx = qx + 10.5 * fx), my = (P.my = qy + 10.5 * fy);\n  limb(P, [qx - fx, qy - fy, 2.4, qx + 3 * fx - 0.4 * nx, qy + 3 * fy - 0.4 * ny, 3.1 + 0.35 * ch, mx, my, 1.6 + 0.3 * ch], 7, HEAD, 0, MUZ, 2.6);\n  // Ossicones, and the ear flicking at a fly.\n  for (const [o, z] of [[0.3, 7], [2.1, 6]]) {\n    const bx = qx + o * fx + 2 * nx, by = qy + o * fy + 2 * ny;\n    limb(P, [bx, by, 1, bx + 3.2 * (nx - 0.25 * fx), by + 3.2 * (ny - 0.25 * fy), 0.9], z, OSS, 0, TIP, 1.3);\n  }\n  const fa = 0.35 - 0.9 * P.flick * sin(P.flick * 9), bx = qx - 0.6 * fx + 1.3 * nx, by = qy - 0.6 * fy + 1.3 * ny;\n  limb(P, [bx, by, 1, bx + 3.6 * (-fx * cos(fa) + nx * sin(fa)), by + 3.6 * (-fy * cos(fa) + ny * sin(fa)), 0.5], 8, EAR);\n  P.eye = [qx + 2.8 * fx + 0.9 * nx - 0.5, qy + 2.8 * fy + 0.9 * ny - 0.5];\n}\n\n// A colour into the frame, mixed over what is there by a.\nlet F;\nfunction set(x, y, col, a = 1, k = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) F[o + c] = mix(F[o + c], col[c] * k, a);\n}\n\n// Everything behind the tree.\nfunction back(P, L, tint, land) {\n  const h = P.h, t = P.t, row = P.row, key = round(h * 900) * 4 + P.coat;\n  // Sky and plain are kept until the hour moves.\n  if (key !== P.bgKey) {\n    const B = P.bg, hill = [104, 104, 136].map((v) => v * (0.55 + 0.45 * L[12])), sx = 21 + 6 * h, sy = 30 + 66 * h, sr = 3.2 + 2 * h, g1 = 10 + 30 * h, g2 = 8 + 12 * h;\n    P.bgKey = key;\n    for (let y = 0; y \u003c HOR; y++) for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = mix(L[c], L[3 + c], (y / HOR) ** 1.5);\n    for (let i = 0; i \u003c N; i++) {\n      const x = i & 63, y = i >> 6, o = i * 3;\n      if (y \u003c HOR) {\n        const d = hyp(x + 0.5 - sx, (y + 0.5 - sy) * 1.05), gl = d \u003c sr ? 1 : d > 48 ? 0 : 0.4 * exp(-((d - sr) * (d - sr)) / g1) + 0.16 * exp(-d / g2), hm = y >= P.hill[x] ? 0.5 : 0;\n        for (let c = 0, v; c \u003c 3; c++) (v = row[y * 3 + c]), (B[o + c] = mix(v + (L[6 + c] - v * 0.4) * gl, hill[c], hm));\n      } else {\n        const q = 1 - (y - HOR) / (H - HOR), n = 0.78 + 0.34 * P.gnd[i];\n        for (let c = 0; c \u003c 3; c++) B[o + c] = mix(land[c] * n, L[3 + c], 0.5 * q * q);\n      }\n    }\n  }\n  F.set(P.bg);\n  // The far herd walking along the horizon.\n  const hc = [74, 58, 50].map((v, c) => v * tint[c]);\n  for (const [x, y, , p] of P.herd) {\n    const s = (t * 4 + p) % 2 \u003c 1 ? 0 : 1;\n    set(x, y, hc), set(x + 1, y, hc), set(x + 2, y - 1, hc), set(x + s, y + 1, hc, 0.7), set(x + 2 - s, y + 1, hc, 0.7);\n  }\n  // The giraffe's shadow stretches away from the sun.\n  const shx = 24 + 22 * h, shr = 17 + 12 * h;\n  for (let y = 118; y \u003c 126; y++)\n    for (let x = 0, e; x \u003c W; x++) if ((e = ((x - shx) / shr) ** 2 + ((y - 122) / 2.6) ** 2) \u003c 1) for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] *= 0.58 + 0.3 * e;\n  // The waterhole holds the sky, and sipping sends rings across it.\n  for (let y = floor(PCY - PRY); y \u003c= PCY + PRY; y++)\n    for (let x = floor(PCX - PRX); x \u003c W; x++) {\n      const e = ((x + 0.5 - PCX) / PRX) ** 2 + ((y + 0.5 - PCY) / PRY) ** 2, o = (y * W + x) * 3, ry = cl(round(HOR - 6 - (y - PCY + PRY) * 4), 0, HOR - 1);\n      if (e >= 1) continue;\n      let k = 0.1 * sin(x * 0.8 + t * 2.6 + y * 1.7) * (0.4 + P.wind);\n      for (const [cx, cy, rr, a] of P.rip) k += 0.5 * a * exp(-((hyp(x + 0.5 - cx, (y + 0.5 - cy) * 2.6) - rr) ** 2) / 0.7);\n      for (let c = 0; c \u003c 3; c++) F[o + c] = e > 0.72 ? F[o + c] * 0.5 : row[ry * 3 + c] * (0.76 + k) + 6 * c;\n    }\n}\n\n// The tree, its crown rocking on the wind.\nfunction tree(P, tint) {\n  const t = P.t, w = P.wind, wood = [92, 72, 58].map((v, c) => v * tint[c]), lit = (P.leaf = [116, 152, 58].map((v, c) => v * tint[c])), dark = [14, 23, 10];\n  for (let i = 0; i \u003c N; i++) if (P.wood[i] > 0) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = wood[c] * P.wood[i];\n  const rock = (0.35 + 2.4 * w) * sin(t * (0.9 + w)) + 0.9 * w * sin(t * 2.3 + 1), fa = 0.08 + 0.3 * w, fw = 3 + 5 * w;\n  for (let y = 0; y \u003c CH; y++)\n    for (let x = 0, sh = rock * (0.6 + (0.4 * (CH - y)) / CH); x \u003c W; x++) {\n      const X = round(x + CO - sh), j = y * CW + X;\n      if (X \u003c 0 || X >= CW || !P.cA[j]) continue;\n      const v = cl(P.cL[j] * (1 + fa * sin(t * fw + hash(X, y) * 40)) - 0.12, 0, 1.3);\n      for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] = dark[c] + (lit[c] - dark[c]) * v;\n    }\n  const tx = (P.tx = 54 - 0.5 * P.tw), ty = (P.ty = 18.5 + 0.9 * P.tw);\n  for (let s = 0; s \u003c= 8; s++) {\n    const u = s / 8, x = mix(57.5, tx, u) + 0.6 * sin(u * 3), y = mix(12, ty, u);\n    set(x, y, wood);\n    if (s >= 2 && (s - 2) * 1.5 \u003c P.tl) set(x + (s & 1 ? 1 : -1), y, lit, 1, 1.35);\n  }\n}\n\n// The giraffe's colours, the coat looked up by where on the body each LED lies.\nfunction coat(P, C, tint) {\n  const col = [0, 0, 0], { tex, tsh } = P;\n  for (let i = 0; i \u003c N; i++) {\n    if (P.z[i] \u003c 0) continue;\n    const part = P.p[i], u = P.u[i], v = P.v[i];\n    let k = 1 - 0.22 * v * v;\n    if (part === MANE) for (let c = 0; c \u003c 3; c++) col[c] = C.m[c] * (0.8 + 0.25 * (round(u) & 1));\n    else if (part === TIP || part === TUFT || part === HOOF) col.splice(0, 3, ...(part === HOOF ? [70, 54, 44] : [52, 36, 28]));\n    else if (part === TAIL) for (let c = 0; c \u003c 3; c++) col[c] = C.m[c] * 1.3;\n    else if (part === MUZ || part === OSS || part === EAR) for (let c = 0; c \u003c 3; c++) col[c] = mix(C.l[c], C.p[c], part === MUZ ? 0.5 : 0.35) * (part === MUZ ? 0.78 : 1);\n    else {\n      let tx, ty, pale = 0;\n      if (part === BODY) (tx = u * 1.05 + 3), (ty = v * 1.05), (k = 1.08 - 0.3 * sm(64, 84, v));\n      else if (part === NECK) (tx = v * 6.2 + 77), (ty = u * 1.05 + 5);\n      else if (part === HEAD) (tx = u * 1.6 + 40), (ty = v * 4 + 100), (pale = 0.15);\n      else (tx = v * 3 + 100), (ty = u * (1 + u * 0.02) + 60), (pale = sm(18, 34, u) * (P.coat === 2 ? 1 : 0.55));\n      const ti = ((floor(ty) & 127) \u003c\u003c 7) | (floor(tx) & 127), pv = tex[ti] * (1 - pale), s = tsh[ti];\n      for (let c = 0; c \u003c 3; c++) col[c] = mix(mix(C.l[c], STOCK[c], pale), C.p[c] * s, pv);\n    }\n    if (part === LEGF) k *= 0.66;\n    for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = col[c] * k * tint[c];\n  }\n  set(P.eye[0], P.eye[1], [24, 18, 14]);\n}\n\n// Dry grass rooted between rows y0 and y1, leaning and shaking on the wind.\nfunction grass(P, tint, y0, y1) {\n  const w = P.wind, gc = [226, 196, 116].map((v, c) => v * tint[c]), lw = 0.3 + 6 * w, gf = 1.6 + 2.5 * w;\n  for (const [bx, by, bh, ph, kk] of P.blades) {\n    if (by \u003c y0 || by >= y1) continue;\n    const lean = (lw * (0.7 + 0.3 * sin(P.t * gf + bx * 0.22 + ph * 0.3)) * bh) / 8, n = Math.ceil(bh);\n    for (let s = 0, u; s \u003c= n; s++) (u = s / n), set(bx + lean * u * u, by - u * bh, gc, 0.85, kk * (0.65 + 0.4 * u));\n  }\n}\n\n// What is in front of the giraffe.\nfunction front(P, tint, land) {\n  const t = P.t, w = P.wind;\n  if (P.ext > 0) {\n    // Dark and long, out to the twig and curled round it.\n    const n = 14 * P.ext, tg = [70, 44, 116], tx = P.tx - 0.4, ty = P.ty - 1.2;\n    for (let s = 0; s \u003c= n; s++) {\n      const u = s / 14, a = u / 0.75;\n      if (u \u003c 0.75) set(mix(P.mx, tx, a), mix(P.my, ty, a) - sin(a * PI) * 1.2, tg);\n      else set(tx + 1.4 * sin((u - 0.75) * 12), ty + 0.84 * (1 - cos((u - 0.75) * 12)), tg);\n    }\n  }\n  // The oxpecker on the back of the neck.\n  const J = P.neck, s = P.ox * 12, n = min(11, floor(s)), f = s - n, j = n * 3, lift = 1.8 + mix(J[j + 2], J[j + 5], f) + sin(P.hop * PI) * 1.5;\n  const dx = J[j + 3] - J[j], dy = J[j + 4] - J[j + 1], dl = hyp(dx, dy) || 1, ax = dx / dl, ay = dy / dl;\n  const bx = mix(J[j], J[j + 3], f) + ay * lift, by = mix(J[j + 1], J[j + 4], f) - ax * lift, br = [80, 62, 48].map((v, c) => v * tint[c]);\n  set(bx, by, br), set(bx - ax, by - ay, br), set(bx - 2 * ax, by - 2 * ay, br, 1, 0.8);\n  set(bx - ax - ay * 0.9, by - ay + ax * 0.9, [196, 170, 120]), set(bx + ax, by + ay, [240, 40, 28]);\n  grass(P, tint, 117, H);\n  // Dust on the wind: a veil low in the sky and drifts over the plain.\n  const dc = land.map((v) => v * 1.15), sh = floor(t * (6 + 30 * w));\n  for (let y = 36; y \u003c H; y++) {\n    const ka = (0.1 + w) * 0.7 * sm(70, 112, y), kv = w * 0.3 * sm(36, 96, y);\n    for (let x = 0, a; x \u003c W; x++) if ((a = kv + (y \u003c 70 ? 0 : ka * cl(P.haze[(y - 70) * 128 + ((x - sh) & 127)] * 1.5 - 0.4, 0, 1))) > 0.01) set(x, y, dc, a);\n  }\n  for (const [x, y] of P.fall) set(x, y, P.leaf);\n}\n\nexport function draw(display, params) {\n  const P = params.g;\n  if (!P || P.coat \u003c 0) return;\n  F = P.f;\n  const C = COATS[P.coat], hh = cl(P.h, 0, 1) * 3, i0 = min(2, floor(hh)), L = SKY[i0].map((v, c) => mix(v, SKY[i0 + 1][c], hh - i0));\n  const tint = [9, 10, 11].map((c) => L[c] * L[12]), land = C.land.map((v, c) => v * tint[c]);\n  back(P, L, tint, land);\n  tree(P, tint);\n  grass(P, tint, 0, 117);\n  giraffe(P);\n  coat(P, C, tint);\n  front(P, tint, land);\n  // Whole numbers out, which the engine passes without boxing.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-giraffe","type":"code","name":"giraffe","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Giraffe\n// Family:  mammal\n// Idea:    Under the flat crown of an umbrella thorn a reticulated giraffe strips a twig with its long dark tongue, and every so often it splays its front legs and bends down to drink at the waterhole.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the browse line giraffes cut under the umbrella thorn acacia (Vachellia tortilis)\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Coat=0..3, Wind=0..1\n//\n// Knob 1: Sun. The hour, from a high white sun at 0 to a red sun setting between the giraffe's legs at 1. Round each hour the sun sinks a little and climbs back once a minute.\n// Knob 2: Speed. At 2 a lick takes about three seconds; the giraffe first goes down to drink after three, then every half minute or when its twig is bare.\n// Knob 3: Coat. Reticulated with thin white lines, Masai with jagged leaf patches, Rothschild with broad buff lines and white stockings, or pale leucistic, each on its own ground: red earth, gold grass, green grass, pale sand.\n// Knob 4: Wind. Grass and crown lean and shake with it, and dust blows over the plain until the far herd goes hazy.\n// Buttons: K1 tap sends the giraffe down to drink now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Horizon and waterhole; the crown is kept wider than the panel to rock.\nconst [HOR, PCX, PCY, PRX, PRY] = [94, 50, 113.5, 14, 4.8];\nconst [CW, CH, CO] = [80, 26, 8];\nconst { min, max, floor, round, sin, cos, sqrt, exp, PI } = Math;\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst smin = (a, b, k, h = cl(0.5 + (0.5 * (b - a)) / k, 0, 1)) => b + (a - b) * h - k * h * (1 - h);\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// The light from afternoon to dusk, one row per hour.\nconst SKY = [\n  [74, 134, 216, 186, 210, 226, 255, 250, 228, 1, 0.98, 0.92, 1],\n  [62, 114, 206, 236, 208, 164, 255, 238, 180, 1.04, 0.92, 0.78, 0.97],\n  [56, 78, 170, 255, 170, 94, 255, 198, 100, 1.08, 0.8, 0.6, 0.88],\n  [40, 38, 108, 248, 108, 72, 255, 132, 60, 1, 0.64, 0.52, 0.74],\n];\n// Each coat: patch, line, mane, and the ground it stands on.\nconst COATS = [\n  { p: [150, 54, 22], l: [250, 240, 214], m: [92, 42, 22], land: [204, 142, 92] },\n  { p: [108, 50, 26], l: [226, 184, 122], m: [80, 42, 24], land: [214, 182, 98] },\n  { p: [180, 98, 44], l: [236, 212, 164], m: [112, 62, 32], land: [160, 176, 86] },\n  { p: [224, 204, 172], l: [252, 248, 238], m: [200, 168, 132], land: [224, 210, 166] },\n];\n// The pale of the lower legs.\nconst STOCK = [244, 234, 212];\nconst [BODY, NECK, HEAD, LEGN, LEGF, MANE, OSS, TIP, EAR, TAIL, TUFT, HOOF, MUZ] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];\n\n// The coat as a 128 x 128 wrapping texture: 1 inside a patch, 0 on a line.\nfunction buildCoat(P, kind) {\n  const S = 6.4, G = 20;\n  for (let y = 0; y \u003c 128; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      let qx = x + 0.5, qy = y + 0.5, f1 = 99, f2 = 99, id = 0, ax = 0, ay = 0, v;\n      if (kind === 1) (qx += 3 * (vn(x * 0.3, y * 0.3) - 0.5)), (qy += 3 * (vn(x * 0.3 + 9, y * 0.3) - 0.5));\n      const cx = floor(qx / S), cy = floor(qy / S);\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++) {\n          const gx = (cx + i + G) % G, gy = (cy + j + G) % G, fx = (cx + i + 0.15 + 0.7 * hash(gx, gy)) * S, fy = (cy + j + 0.15 + 0.7 * hash(gx + 50, gy)) * S;\n          const d = hyp(qx - fx, qy - fy);\n          if (d \u003c f1) (f2 = f1), (f1 = d), (id = gx * 31 + gy), (ax = qx - fx), (ay = qy - fy);\n          else if (d \u003c f2) f2 = d;\n        }\n      const e = f2 - f1;\n      if (kind === 0) v = sm(0.7, 1.4, e);\n      else if (kind === 1) {\n        // Masai patches are cut into leaves and stars.\n        const thr = 1.9 + sin(Math.atan2(ay, ax) * 5 + id) + 0.6 * vn(x * 0.7, y * 0.7);\n        v = sm(thr - 0.5, thr + 0.5, e);\n      } else v = kind === 2 ? sm(1.3, 2.6, e) : sm(1, 2.2, e) * 0.9;\n      P.tex[y * 128 + x] = v;\n      P.tsh[y * 128 + x] = 0.84 + 0.3 * hash(id, 7);\n    }\n  P.coat = kind;\n}\n\n// A thick line into the wood layer.\nfunction stroke(A, pts, r0, r1, val) {\n  for (let j = 0; j + 2 \u003c pts.length; j += 2) {\n    const [ax, ay, bx, by] = pts.slice(j, j + 4), n = 2 * hyp(bx - ax, by - ay);\n    for (let s = 0; s \u003c= n; s++) {\n      const t = s / n, x = mix(ax, bx, t), y = mix(ay, by, t), r = mix(r0, r1, (j + 2 * t) / (pts.length - 2));\n      for (let yy = floor(y - r); yy \u003c= y + r; yy++)\n        for (let xx = floor(x - r); xx \u003c= x + r; xx++)\n          if (hyp(xx + 0.5 - x, yy + 0.5 - y) \u003c= r && xx >= 0 && xx \u003c W) A[yy * W + xx] = max(A[yy * W + xx], val * (1.1 - (0.35 * (xx + 0.5 - x)) / r));\n    }\n  }\n}\n\nfunction build(P) {\n  // The crown: flat layers of leaves over a flat browse line, with a hollow\n  // eaten up into it where the giraffe reaches.\n  for (let x = 0; x \u003c CW; x++) {\n    const X = x - CO, top = 3 + 0.0028 * (X - 28) ** 2 + 2.2 * vn(X * 0.18, 1.5);\n    const bot = 19.5 + 1.6 * vn(X * 0.3, 4.5) + 0.0016 * (X - 28) ** 2 - 6.5 * exp(-(((X - 53.5) / 4.2) ** 2));\n    for (let y = 0; y \u003c CH; y++) {\n      const i = y * CW + x, f = (y - top) / (bot - top), n = vn(X * 0.16, y * 0.42) * 0.6 + vn(X * 0.5, y * 0.6) * 0.4;\n      if (f \u003c 0 || f > 1) continue;\n      const k = n + 0.125 + 0.125 * sin(y * 0.9 + 2.4 * vn(X * 0.08, 2)) - 0.3 * sm(0.75, 1, f) - 0.35 * sm(0.18, 0, f);\n      if (k > 0.34) (P.cA[i] = 1), (P.cL[i] = (1.15 - 0.6 * f) * (0.75 + 0.5 * n) * (0.85 + 0.3 * hash(X + 300, y)));\n      else if (k > 0.2 && f > 0.12) P.cA[i] = 1;\n    }\n  }\n  // The trunk, and crooked branches fanning up to the crown.\n  stroke(P.wood, [58.5, 104, 57.5, 86, 59, 66, 57.5, 50], 2.2, 1.7, 1);\n  for (const b of [[57.5, 50, 53, 41, 48, 37, 41, 29, 31, 22, 24, 19], [57.5, 52, 55, 42, 51, 33, 50, 25, 46, 19], [58, 50, 61, 40, 61, 31, 65, 21], [58, 60, 54, 55, 46, 50]]) stroke(P.wood, b, 1.5, 0.8, 0.85);\n  // The ground, and dust that wraps every 128 columns.\n  for (let i = HOR * W; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    P.gnd[i] = mix(vn(x * 0.12, y * 0.9), vn(x * 0.6, y * 0.18), (y - HOR) / (H - HOR)) * 0.7 + 0.3 * hash(x, y + 700);\n  }\n  for (let i = 0; i \u003c 128 * 58; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => vn(X * 0.07, y * 0.16) * 0.7 + vn(X * 0.19, y * 0.3 + 5) * 0.3;\n    P.haze[i] = mix(f(x), f(x + 128), x / 128);\n  }\n  P.hill = Array.from({ length: W }, (_, x) => HOR - 2 - 2.5 * vn(x * 0.07, 3) - 1.5 * vn(x * 0.2, 7));\n  // Dry grass, none standing in the water.\n  P.blades = [];\n  while (P.blades.length \u003c 230) {\n    const y = HOR + 5 + (H - HOR - 4) * sqrt(rnd()), x = rnd() * 66 - 1;\n    if (((x - PCX) / (PRX + 1.5)) ** 2 + ((y - PCY) / (PRY + 2)) ** 2 > 1) P.blades.push([x, y, 1.5 + (y - HOR) * 0.2 * (0.6 + 0.8 * rnd()), rnd() * 7, 0.7 + 0.6 * rnd()]);\n  }\n  P.herd = Array.from({ length: 7 }, (_, i) => [i * 9.5 + rnd() * 5, HOR + 0.5 + rnd() * 2.2, 0.35 + rnd() * 0.3, rnd() * 7]);\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.g = {\n    f: F(N * 3), z: new Int8Array(N), p: new Uint8Array(N), u: F(N), v: F(N), tex: F(16384), tsh: F(16384), gnd: F(N), wood: F(N), cA: F(CW * CH), cL: F(CW * CH),\n    haze: F(128 * 58), row: F(HOR * 3), bg: F(N * 3), coat: -1, t: 0, dk: 0, dt: 0, next: 3.4, legN: 0, legF: 0, nk: 0, tc: 0.6, tp: 2.8, tw: 0, twv: 0, tl: 9,\n    ear: 1, flick: 0, swish: 0, sw: 3, ox: 0.55, oxT: 1, hop: 1, fall: [], rip: [], ripT: 0,\n  };\n  build(params.g);\n}\n\nexport function update(dt, input, params) {\n  if (!params.g) setup(params);\n  const P = params.g, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2), coat = cl(round(k[2]), 0, 3), w = (P.wind = cl(k[3], 0, 1));\n  if (coat !== P.coat) buildCoat(P, coat);\n  const t = (P.t += d), sunK = cl(k[0], 0, 1);\n  // The sun sinks and climbs back a little round the hour the knob sets.\n  P.h = sunK + (1 - sunK) * 0.3 * (0.5 - 0.5 * cos((2 * PI * t) / 60));\n\n  // Down to drink: the front legs go out one by one, then the neck comes down.\n  if (input.btnPressed && input.btnPressed[0] && P.dk === 0) P.next = 0;\n  const T = (P.dt += d);\n  if (P.dk === 0) {\n    if ((P.next -= d) \u003c= 0 || (P.tl \u003c= 0 && P.tc > 1.6)) (P.dk = 1), (P.dt = 0);\n  } else if (P.dk === 1) {\n    [P.legN, P.legF, P.nk] = [sm(0, 0.7, T), sm(0.45, 1.15, T), sm(0.8, 2.6, T)];\n    if (T >= 2.6) (P.dk = 2), (P.dt = 0);\n  } else if (P.dk === 2) {\n    // Sips: the head dips and lifts, and rings spread on the water.\n    P.nk = 1 - 0.035 * (0.5 - 0.5 * cos(T * 4.4));\n    if ((P.ripT -= d) \u003c= 0) (P.ripT = 0.7 + rnd() * 0.4), P.rip.push([P.mx, P.my + 1, 0, 1]);\n    if (T >= 3.4) (P.dk = 3), (P.dt = 0);\n  } else {\n    // Up again fast, the head first, then the legs gathered in.\n    [P.nk, P.legN, P.legF] = [1 - sm(0, 1, T), 1 - sm(0.9, 1.6, T), 1 - sm(0.6, 1.3, T)];\n    if (T >= 1.8) (P.dk = 0), (P.next = 26 + rnd() * 12), (P.tl = 9), (P.tc = 1.3);\n  }\n\n  // The tongue curls round the twig to strip it. Then the jaw chews.\n  const browsing = P.dk === 0 && P.nk \u003c 0.01;\n  if ((P.tc += d) > P.tp) (P.tc = 0), (P.tp = 2.4 + rnd() * 1.3), (P.pulled = false);\n  const c = P.tc, live = browsing && P.tl > 0;\n  P.ext = live ? (c \u003c 0.45 ? sm(0, 0.45, c) : c \u003c 1 ? 1 : 1 - sm(1, 1.3, c)) : 0;\n  P.twv += (60 * ((live && c > 0.5 && c \u003c 1 ? 3 * sm(0.5, 0.85, c) : 0) - P.tw) - 5 * P.twv) * d;\n  P.tw += P.twv * d;\n  if (live && c > 0.85 && !P.pulled) {\n    P.pulled = true;\n    P.tl--;\n    for (let n = 0; n \u003c 2; n++) P.fall.push([53.5 + rnd() * 2, 18, (rnd() - 0.5) * 4, 2 + rnd() * 3, rnd() * 7]);\n  }\n  P.chew = browsing && c > 1.3 ? 0.5 + 0.5 * sin(c * 19) : 0;\n\n  // Ear and tail keep the flies off, and the oxpecker hops along the neck.\n  if ((P.ear -= d) \u003c= 0) (P.ear = 1.5 + rnd() * 3), (P.flick = 1);\n  P.flick = max(0, P.flick - d * 3.5);\n  if ((P.sw -= d) \u003c= 0) (P.sw = 2.5 + rnd() * 4), (P.swish = 1);\n  P.swish = max(0, P.swish - d * 0.9);\n  P.tail = 0.12 * sin(t * 1.1) + 0.5 * P.swish * sin(t * 9);\n  if ((P.oxT -= d) \u003c= 0) (P.oxT = 0.7 + rnd() * 1.8), (P.ox0 = P.ox), (P.ox1 = cl(P.ox + (rnd() \u003c 0.5 ? -1 : 1) * (0.05 + rnd() * 0.1), 0.3, 0.78)), (P.hop = 0);\n  if (P.hop \u003c 1) (P.hop = min(1, P.hop + d * 4)), (P.ox = mix(P.ox0, P.ox1, P.hop));\n\n  // Falling leaves and rings on the pool.\n  P.fall = P.fall.filter((q) => ((q[4] += d), (q[0] += (q[2] + 3 * sin(q[4] * 3) + 8 * w) * d), (q[1] += q[3] * d), q[1] \u003c 124));\n  P.rip = P.rip.filter((q) => ((q[2] += d * 5), (q[3] -= d * 0.45), q[3] > 0));\n  // The far herd walks on.\n  for (const a of P.herd) if ((a[0] -= a[2] * d) \u003c -4) a[0] += 72;\n}\n\n// One LED of the giraffe, unless something nearer is there.\nfunction put(P, x, y, z, part, u, v) {\n  const i = y * W + x;\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && z >= P.z[i]) (P.z[i] = z), (P.p[i] = part), (P.u[i] = u), (P.v[i] = v);\n}\n\n// A limb through joints, each a point and a radius. Each LED keeps how far\n// along it lies (u) and across (v, plus on the mane side); the tip LEDs take\n// another part.\nfunction limb(P, J, z, part, mane = 0, tipPart = 0, tipLen = 0) {\n  let total = 0, s0 = 0;\n  for (let j = 3; j \u003c J.length; j += 3) total += hyp(J[j] - J[j - 3], J[j + 1] - J[j - 2]);\n  for (let j = 0; j + 3 \u003c J.length; j += 3) {\n    const [ax, ay, ra, bx, by, rb] = J.slice(j, j + 6), len = hyp(bx - ax, by - ay) || 1e-6, dx = (bx - ax) / len, dy = (by - ay) / len, pad = max(ra, rb) + mane + 1;\n    for (let y = floor(min(ay, by) - pad); y \u003c= max(ay, by) + pad; y++)\n      for (let x = floor(min(ax, bx) - pad); x \u003c= max(ax, bx) + pad; x++) {\n        const px = x + 0.5 - ax, py = y + 0.5 - ay, tt = cl(px * dx + py * dy, 0, len), dist = hyp(px - dx * tt, py - dy * tt);\n        const side = px * dy - py * dx, r = ra + ((rb - ra) * tt) / len, s = s0 + tt;\n        if (dist \u003c= r) put(P, x, y, z, tipLen && s > total - tipLen ? tipPart : part, s, side >= 0 ? dist / r : -dist / r);\n        else if (mane && side > 0 && dist \u003c= r + mane && s > 3 && s \u003c total - 1) put(P, x, y, z, MANE, s, 1);\n      }\n    s0 += len;\n  }\n}\n\n// Two bones from hip to hoof, bending the way dir says.\nfunction ik(ax, ay, bx, by, a, b, dir) {\n  const dx = bx - ax, dy = by - ay, d0 = hyp(dx, dy), d = min(d0, a + b - 0.01), x = (a * a - b * b + d * d) / (2 * d), h = sqrt(max(0, a * a - x * x));\n  return [ax + (dx / d0) * x - (dy / d0) * h * dir, ay + (dy / d0) * x + (dx / d0) * h * dir];\n}\n\n// Keys for the neck and head as they swing from the leaves to the water.\nconst NK = [\n  [39.5, 44, 42, 28, -0.52],\n  [50, 40, 58, 58, 1.2],\n  [49, 80, 55, 99.5, 1.66],\n];\n\nfunction giraffe(P) {\n  P.z.fill(-1);\n  const lean = max(P.legN, P.legF), ca = cos(0.22 * lean), sa = sin(0.22 * lean), drop = 3 * lean;\n  // Body space to the panel, tilted on the hip.\n  const T = (x, y) => [12 + (x - 12) * ca - (y - 72) * sa, 72 + (x - 12) * sa + (y - 72) * ca + drop];\n  // The legs go behind the body, the far pair darker. To drink the near\n  // front leg goes back and the far one forward.\n  for (const [sx, sy, hx, hy, dir, part, z] of [\n    [31, 78, 33 + 12 * P.legF, 119.5, -1, LEGF, 1],\n    [16, 75, 16, 119.5, 1, LEGF, 1],\n    [35, 78, 37 - 14 * P.legN, 121.5, -1, LEGN, 2],\n    [12, 75, 11, 121.5, 1, LEGN, 2],\n  ]) {\n    const [ax, ay] = T(sx, sy), [kx, ky] = ik(ax, ay, hx, hy, 22, 22.5, dir);\n    limb(P, [ax, ay, dir \u003c 0 ? 3.2 : 4, kx, ky, dir \u003c 0 ? 1.6 : 1.8, hx, hy, 1.3], z, part, 0, HOOF, 2.2);\n  }\n  // The body, low at the rump and high at the shoulder.\n  for (let y = 48; y \u003c 96; y++)\n    for (let x = 0; x \u003c 50; x++) {\n      const qx = x + 0.5 - 12, qy = y + 0.5 - 72 - drop, bx = 12 + qx * ca + qy * sa, by = 72 - qx * sa + qy * ca;\n      const a = (hyp((bx - 13) / 8.5, (by - 72) / 8.5) - 1) * 8.5, b = (hyp((bx - 24) / 12.5, (by - 73.5) / 9.5) - 1) * 9.5, c = (hyp((bx - 34) / 8.5, (by - 67.5) / 13.5) - 1) * 8.5;\n      if (smin(smin(a, b, 5), c, 5) \u003c= 0) put(P, x, y, 3, BODY, bx, by);\n    }\n  // The tail hangs from the rump and swishes.\n  const tj = T(5.5, 65);\n  tj.push(0.6);\n  for (let j = 1, x = tj[0], y = tj[1], a; j \u003c= 4; j++) (a = PI / 2 + 0.1 + P.tail * j * 0.45), tj.push((x += 6.5 * cos(a)), (y += 6.5 * sin(a)), j === 4 ? 1.7 : 0.6);\n  limb(P, tj, 4, TAIL, 0, TUFT, 4.5);\n\n  // The neck, a curve from the withers to the poll, and its mane.\n  const e = sm(0, 1, P.nk) * 2, i = min(1, floor(e)), K = NK[i].map((v, c) => mix(v, NK[i + 1][c], e - i));\n  const bob = P.dk === 0 ? 1 - P.nk : 0, pull = P.tw * 0.25, [sx, sy] = T(36, 61), qx = K[2] + bob * 0.5 * sin(P.t * 0.9), qy = K[3] + bob * (0.4 * sin(P.t * 1.3) - pull);\n  const J = (P.neck = []);\n  for (let n = 0, t; n \u003c= 12; n++) (t = n / 12), J.push((1 - t) ** 2 * sx + 2 * t * (1 - t) * K[0] + t * t * qx, (1 - t) ** 2 * sy + 2 * t * (1 - t) * K[1] + t * t * qy, mix(5.4, 2.8, t));\n  limb(P, J, 2, NECK, 1.2);\n  // The head, its cheek working as it chews.\n  const ph = K[4] - pull * 0.05, fx = cos(ph), fy = sin(ph), nx = fy, ny = -fx, ch = P.chew;\n  const mx = (P.mx = qx + 10.5 * fx), my = (P.my = qy + 10.5 * fy);\n  limb(P, [qx - fx, qy - fy, 2.4, qx + 3 * fx - 0.4 * nx, qy + 3 * fy - 0.4 * ny, 3.1 + 0.35 * ch, mx, my, 1.6 + 0.3 * ch], 7, HEAD, 0, MUZ, 2.6);\n  // Ossicones, and the ear flicking at a fly.\n  for (const [o, z] of [[0.3, 7], [2.1, 6]]) {\n    const bx = qx + o * fx + 2 * nx, by = qy + o * fy + 2 * ny;\n    limb(P, [bx, by, 1, bx + 3.2 * (nx - 0.25 * fx), by + 3.2 * (ny - 0.25 * fy), 0.9], z, OSS, 0, TIP, 1.3);\n  }\n  const fa = 0.35 - 0.9 * P.flick * sin(P.flick * 9), bx = qx - 0.6 * fx + 1.3 * nx, by = qy - 0.6 * fy + 1.3 * ny;\n  limb(P, [bx, by, 1, bx + 3.6 * (-fx * cos(fa) + nx * sin(fa)), by + 3.6 * (-fy * cos(fa) + ny * sin(fa)), 0.5], 8, EAR);\n  P.eye = [qx + 2.8 * fx + 0.9 * nx - 0.5, qy + 2.8 * fy + 0.9 * ny - 0.5];\n}\n\n// A colour into the frame, mixed over what is there by a.\nlet F;\nfunction set(x, y, col, a = 1, k = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) F[o + c] = mix(F[o + c], col[c] * k, a);\n}\n\n// Everything behind the tree.\nfunction back(P, L, tint, land) {\n  const h = P.h, t = P.t, row = P.row, key = round(h * 900) * 4 + P.coat;\n  // Sky and plain are kept until the hour moves.\n  if (key !== P.bgKey) {\n    const B = P.bg, hill = [104, 104, 136].map((v) => v * (0.55 + 0.45 * L[12])), sx = 21 + 6 * h, sy = 30 + 66 * h, sr = 3.2 + 2 * h, g1 = 10 + 30 * h, g2 = 8 + 12 * h;\n    P.bgKey = key;\n    for (let y = 0; y \u003c HOR; y++) for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = mix(L[c], L[3 + c], (y / HOR) ** 1.5);\n    for (let i = 0; i \u003c N; i++) {\n      const x = i & 63, y = i >> 6, o = i * 3;\n      if (y \u003c HOR) {\n        const d = hyp(x + 0.5 - sx, (y + 0.5 - sy) * 1.05), gl = d \u003c sr ? 1 : d > 48 ? 0 : 0.4 * exp(-((d - sr) * (d - sr)) / g1) + 0.16 * exp(-d / g2), hm = y >= P.hill[x] ? 0.5 : 0;\n        for (let c = 0, v; c \u003c 3; c++) (v = row[y * 3 + c]), (B[o + c] = mix(v + (L[6 + c] - v * 0.4) * gl, hill[c], hm));\n      } else {\n        const q = 1 - (y - HOR) / (H - HOR), n = 0.78 + 0.34 * P.gnd[i];\n        for (let c = 0; c \u003c 3; c++) B[o + c] = mix(land[c] * n, L[3 + c], 0.5 * q * q);\n      }\n    }\n  }\n  F.set(P.bg);\n  // The far herd walking along the horizon.\n  const hc = [74, 58, 50].map((v, c) => v * tint[c]);\n  for (const [x, y, , p] of P.herd) {\n    const s = (t * 4 + p) % 2 \u003c 1 ? 0 : 1;\n    set(x, y, hc), set(x + 1, y, hc), set(x + 2, y - 1, hc), set(x + s, y + 1, hc, 0.7), set(x + 2 - s, y + 1, hc, 0.7);\n  }\n  // The giraffe's shadow stretches away from the sun.\n  const shx = 24 + 22 * h, shr = 17 + 12 * h;\n  for (let y = 118; y \u003c 126; y++)\n    for (let x = 0, e; x \u003c W; x++) if ((e = ((x - shx) / shr) ** 2 + ((y - 122) / 2.6) ** 2) \u003c 1) for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] *= 0.58 + 0.3 * e;\n  // The waterhole holds the sky, and sipping sends rings across it.\n  for (let y = floor(PCY - PRY); y \u003c= PCY + PRY; y++)\n    for (let x = floor(PCX - PRX); x \u003c W; x++) {\n      const e = ((x + 0.5 - PCX) / PRX) ** 2 + ((y + 0.5 - PCY) / PRY) ** 2, o = (y * W + x) * 3, ry = cl(round(HOR - 6 - (y - PCY + PRY) * 4), 0, HOR - 1);\n      if (e >= 1) continue;\n      let k = 0.1 * sin(x * 0.8 + t * 2.6 + y * 1.7) * (0.4 + P.wind);\n      for (const [cx, cy, rr, a] of P.rip) k += 0.5 * a * exp(-((hyp(x + 0.5 - cx, (y + 0.5 - cy) * 2.6) - rr) ** 2) / 0.7);\n      for (let c = 0; c \u003c 3; c++) F[o + c] = e > 0.72 ? F[o + c] * 0.5 : row[ry * 3 + c] * (0.76 + k) + 6 * c;\n    }\n}\n\n// The tree, its crown rocking on the wind.\nfunction tree(P, tint) {\n  const t = P.t, w = P.wind, wood = [92, 72, 58].map((v, c) => v * tint[c]), lit = (P.leaf = [116, 152, 58].map((v, c) => v * tint[c])), dark = [14, 23, 10];\n  for (let i = 0; i \u003c N; i++) if (P.wood[i] > 0) for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = wood[c] * P.wood[i];\n  const rock = (0.35 + 2.4 * w) * sin(t * (0.9 + w)) + 0.9 * w * sin(t * 2.3 + 1), fa = 0.08 + 0.3 * w, fw = 3 + 5 * w;\n  for (let y = 0; y \u003c CH; y++)\n    for (let x = 0, sh = rock * (0.6 + (0.4 * (CH - y)) / CH); x \u003c W; x++) {\n      const X = round(x + CO - sh), j = y * CW + X;\n      if (X \u003c 0 || X >= CW || !P.cA[j]) continue;\n      const v = cl(P.cL[j] * (1 + fa * sin(t * fw + hash(X, y) * 40)) - 0.12, 0, 1.3);\n      for (let c = 0; c \u003c 3; c++) F[(y * W + x) * 3 + c] = dark[c] + (lit[c] - dark[c]) * v;\n    }\n  const tx = (P.tx = 54 - 0.5 * P.tw), ty = (P.ty = 18.5 + 0.9 * P.tw);\n  for (let s = 0; s \u003c= 8; s++) {\n    const u = s / 8, x = mix(57.5, tx, u) + 0.6 * sin(u * 3), y = mix(12, ty, u);\n    set(x, y, wood);\n    if (s >= 2 && (s - 2) * 1.5 \u003c P.tl) set(x + (s & 1 ? 1 : -1), y, lit, 1, 1.35);\n  }\n}\n\n// The giraffe's colours, the coat looked up by where on the body each LED lies.\nfunction coat(P, C, tint) {\n  const col = [0, 0, 0], { tex, tsh } = P;\n  for (let i = 0; i \u003c N; i++) {\n    if (P.z[i] \u003c 0) continue;\n    const part = P.p[i], u = P.u[i], v = P.v[i];\n    let k = 1 - 0.22 * v * v;\n    if (part === MANE) for (let c = 0; c \u003c 3; c++) col[c] = C.m[c] * (0.8 + 0.25 * (round(u) & 1));\n    else if (part === TIP || part === TUFT || part === HOOF) col.splice(0, 3, ...(part === HOOF ? [70, 54, 44] : [52, 36, 28]));\n    else if (part === TAIL) for (let c = 0; c \u003c 3; c++) col[c] = C.m[c] * 1.3;\n    else if (part === MUZ || part === OSS || part === EAR) for (let c = 0; c \u003c 3; c++) col[c] = mix(C.l[c], C.p[c], part === MUZ ? 0.5 : 0.35) * (part === MUZ ? 0.78 : 1);\n    else {\n      let tx, ty, pale = 0;\n      if (part === BODY) (tx = u * 1.05 + 3), (ty = v * 1.05), (k = 1.08 - 0.3 * sm(64, 84, v));\n      else if (part === NECK) (tx = v * 6.2 + 77), (ty = u * 1.05 + 5);\n      else if (part === HEAD) (tx = u * 1.6 + 40), (ty = v * 4 + 100), (pale = 0.15);\n      else (tx = v * 3 + 100), (ty = u * (1 + u * 0.02) + 60), (pale = sm(18, 34, u) * (P.coat === 2 ? 1 : 0.55));\n      const ti = ((floor(ty) & 127) \u003c\u003c 7) | (floor(tx) & 127), pv = tex[ti] * (1 - pale), s = tsh[ti];\n      for (let c = 0; c \u003c 3; c++) col[c] = mix(mix(C.l[c], STOCK[c], pale), C.p[c] * s, pv);\n    }\n    if (part === LEGF) k *= 0.66;\n    for (let c = 0; c \u003c 3; c++) F[i * 3 + c] = col[c] * k * tint[c];\n  }\n  set(P.eye[0], P.eye[1], [24, 18, 14]);\n}\n\n// Dry grass rooted between rows y0 and y1, leaning and shaking on the wind.\nfunction grass(P, tint, y0, y1) {\n  const w = P.wind, gc = [226, 196, 116].map((v, c) => v * tint[c]), lw = 0.3 + 6 * w, gf = 1.6 + 2.5 * w;\n  for (const [bx, by, bh, ph, kk] of P.blades) {\n    if (by \u003c y0 || by >= y1) continue;\n    const lean = (lw * (0.7 + 0.3 * sin(P.t * gf + bx * 0.22 + ph * 0.3)) * bh) / 8, n = Math.ceil(bh);\n    for (let s = 0, u; s \u003c= n; s++) (u = s / n), set(bx + lean * u * u, by - u * bh, gc, 0.85, kk * (0.65 + 0.4 * u));\n  }\n}\n\n// What is in front of the giraffe.\nfunction front(P, tint, land) {\n  const t = P.t, w = P.wind;\n  if (P.ext > 0) {\n    // Dark and long, out to the twig and curled round it.\n    const n = 14 * P.ext, tg = [70, 44, 116], tx = P.tx - 0.4, ty = P.ty - 1.2;\n    for (let s = 0; s \u003c= n; s++) {\n      const u = s / 14, a = u / 0.75;\n      if (u \u003c 0.75) set(mix(P.mx, tx, a), mix(P.my, ty, a) - sin(a * PI) * 1.2, tg);\n      else set(tx + 1.4 * sin((u - 0.75) * 12), ty + 0.84 * (1 - cos((u - 0.75) * 12)), tg);\n    }\n  }\n  // The oxpecker on the back of the neck.\n  const J = P.neck, s = P.ox * 12, n = min(11, floor(s)), f = s - n, j = n * 3, lift = 1.8 + mix(J[j + 2], J[j + 5], f) + sin(P.hop * PI) * 1.5;\n  const dx = J[j + 3] - J[j], dy = J[j + 4] - J[j + 1], dl = hyp(dx, dy) || 1, ax = dx / dl, ay = dy / dl;\n  const bx = mix(J[j], J[j + 3], f) + ay * lift, by = mix(J[j + 1], J[j + 4], f) - ax * lift, br = [80, 62, 48].map((v, c) => v * tint[c]);\n  set(bx, by, br), set(bx - ax, by - ay, br), set(bx - 2 * ax, by - 2 * ay, br, 1, 0.8);\n  set(bx - ax - ay * 0.9, by - ay + ax * 0.9, [196, 170, 120]), set(bx + ax, by + ay, [240, 40, 28]);\n  grass(P, tint, 117, H);\n  // Dust on the wind: a veil low in the sky and drifts over the plain.\n  const dc = land.map((v) => v * 1.15), sh = floor(t * (6 + 30 * w));\n  for (let y = 36; y \u003c H; y++) {\n    const ka = (0.1 + w) * 0.7 * sm(70, 112, y), kv = w * 0.3 * sm(36, 96, y);\n    for (let x = 0, a; x \u003c W; x++) if ((a = kv + (y \u003c 70 ? 0 : ka * cl(P.haze[(y - 70) * 128 + ((x - sh) & 127)] * 1.5 - 0.4, 0, 1))) > 0.01) set(x, y, dc, a);\n  }\n  for (const [x, y] of P.fall) set(x, y, P.leaf);\n}\n\nexport function draw(display, params) {\n  const P = params.g;\n  if (!P || P.coat \u003c 0) return;\n  F = P.f;\n  const C = COATS[P.coat], hh = cl(P.h, 0, 1) * 3, i0 = min(2, floor(hh)), L = SKY[i0].map((v, c) => mix(v, SKY[i0 + 1][c], hh - i0));\n  const tint = [9, 10, 11].map((c) => L[c] * L[12]), land = C.land.map((v, c) => v * tint[c]);\n  back(P, L, tint, land);\n  tree(P, tint);\n  grass(P, tint, 0, 117);\n  giraffe(P);\n  coat(P, C, tint);\n  front(P, tint, land);\n  // Whole numbers out, which the engine passes without boxing.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sun=0..1, Speed=0.2..3, Coat=0..3, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sun","min":0,"max":1,"about":"The hour, from a high white sun at 0 to a red sun setting between the giraffe's legs at 1. Round each hour the sun sinks a little and climbs back once a minute."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a lick takes about three seconds; the giraffe first goes down to drink after three, then every half minute or when its twig is bare."},{"name":"Coat","min":0,"max":3,"about":"Reticulated with thin white lines, Masai with jagged leaf patches, Rothschild with broad buff lines and white stockings, or pale leucistic, each on its own ground: red earth, gold grass, green grass, pale sand."},{"name":"Wind","min":0,"max":1,"about":"Grass and crown lean and shake with it, and dust blows over the plain until the far herd goes hazy."}],"start":[0,2,0,0.06],"measures":{"motion":0.123,"detail":0.074,"edges":0.4044,"complexity":1.9181,"coverage":0.9853,"colour":0.3367,"drift":0.0426},"knobResponse":[0.2454,0.0494,0.078,0.0609]},{"slug":"glyph-rain","title":"Glyph Rain","family":"type","round":1,"note":"3×5 글자가 줄마다 떨어지며 바뀌어요. 비가 지나간 글자는 옛 단말기의 초록 형광처럼 몇 초 남아 흐려져서, 아무 말도 하지 않는 글이 화면을 채워요.","idea":"Every column keeps writing characters downward and forgets them as it goes, so the panel is full of text that never says anything.","buttons":"K4 tap switches between small glyphs and double-size ones.","code":"// ===== Patternflow pattern =====\n// Title:   Glyph Rain\n// Family:  type\n// Idea:    Every column keeps writing characters downward and forgets them as it goes, so the panel is full of text that never says anything.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Fall=0.3..6, Density=0..1, Mutate=0..1\n//\n// Knob 1: Hue. Turns the rain around the colour wheel from phosphor green; the heads stay close to white.\n// Knob 2: Fall. How fast the columns fall, each at its own pace around this one.\n// Knob 3: Density. How many columns run and how long their tails hang, up to a full wall of text.\n// Knob 4: Mutate. How often a glyph already written turns into another; turned all the way, the whole wall boils.\n// Buttons: K4 tap switches between small glyphs and double-size ones.\n\nconst W = 64;\nconst H = 128;\n// Small glyphs sit on a 4x6 pitch: 16 columns of 22 rows.\nconst COLS = Math.floor(W / 4);\nconst ROWS = Math.ceil(H / 6);\n\n// 3x5 glyphs, one octal digit per row from the top, 4 is the left column.\nconst FONT = [\n  0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717,\n  0o25755, 0o74647, 0o74644, 0o55755, 0o55655, 0o44447, 0o57755, 0o65644, 0o65655, 0o72222,\n  0o55557, 0o55255, 0o55222, 0o71247, 0o02720, 0o00700, 0o07070, 0o05250, 0o11244, 0o12421,\n  0o42124, 0o57575, 0o02020, 0o34216, 0o61243, 0o27272,\n];\n\n// Hue 0 is the green of an old terminal's phosphor rather than red.\nconst GREEN = 0.33;\n// Where a tail ends, and where the glyphs it leaves behind start to fade from.\nconst EMBER = 0.38;\n// Below this a fading glyph is gone: the panel shows next to nothing under 20/255.\nconst GONE = 0.09;\n// Levels are drawn in steps, so a fading glyph changes a few times on its way out\n// instead of on every frame.\nconst STEPS = 20;\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction rand(p) {\n  let s = p.seed;\n  s ^= s \u003c\u003c 13;\n  s >>>= 0;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  s >>>= 0;\n  p.seed = s;\n  return s / 4294967296;\n}\n\nfunction spawn(p, c, scatter) {\n  p.len[c] = 4 + rand(p) * (p.rows + 2) * (0.75 + 0.85 * p.density);\n  p.rate[c] = 0.55 + rand(p) * 0.9;\n  // The gap before the next drop is counted in cells, so it holds at any speed.\n  const gap = rand(p) * p.rows * 0.9 * (1 - p.density);\n  p.head[c] = scatter ? rand(p) * (p.rows + p.len[c]) : -gap;\n  p.wait[c] = 0;\n}\n\nfunction layout(p) {\n  p.pw = 4 * p.scale;\n  p.ph = 6 * p.scale;\n  p.cols = Math.floor(W / p.pw);\n  p.rows = Math.ceil(H / p.ph);\n  for (let c = 0; c \u003c p.cols; c++) {\n    // Golden-ratio steps: whatever share of columns runs is spread evenly.\n    const r = c * 0.618034 + 0.31;\n    p.rank[c] = r - Math.floor(r);\n    p.flick[c] = 0;\n    spawn(p, c, true);\n  }\n  for (let i = 0; i \u003c p.glyph.length; i++) {\n    p.glyph[i] = Math.floor(rand(p) * FONT.length);\n    p.flash[i] = 0;\n    p.glow[i] = 0;\n  }\n  p.started = false;\n}\n\nexport function setup(params) {\n  params.seed = 0x2545f491;\n  params.scale = 1;\n  params.density = 0;\n  params.glyph = new Uint8Array(COLS * ROWS);\n  params.flash = new Float32Array(COLS * ROWS);\n  params.glow = new Float32Array(COLS * ROWS);\n  params.head = new Float32Array(COLS);\n  params.len = new Float32Array(COLS);\n  params.rate = new Float32Array(COLS);\n  params.wait = new Float32Array(COLS);\n  params.rank = new Float32Array(COLS);\n  params.flick = new Float32Array(COLS);\n  params.fb = new Uint8Array(W * H * 3);\n  params.c = [0, 0, 0];\n  layout(params);\n}\n\nfunction step(p, dt) {\n  const share = 0.7 + 0.3 * p.density;\n  const move = p.fall * 5 * dt;\n  for (let c = 0; c \u003c p.cols; c++) {\n    if (p.wait[c] > 0) {\n      p.wait[c] -= dt;\n      if (p.wait[c] \u003c= 0 && p.rank[c] \u003c share) spawn(p, c, false);\n      else if (p.wait[c] \u003c= 0) p.wait[c] = 0.3;\n      continue;\n    }\n    const before = Math.floor(p.head[c]);\n    p.head[c] += move * p.rate[c];\n    const after = Math.floor(p.head[c]);\n    // The head writes a fresh glyph into each cell it enters, even the ones a\n    // fast drop crosses inside one frame.\n    for (let r = Math.max(0, before + 1); r \u003c= Math.min(after, p.rows - 1); r++) p.glyph[r * p.cols + c] = Math.floor(rand(p) * FONT.length);\n    // And it cannot make up its mind about the cell it is in.\n    p.flick[c] -= dt;\n    if (p.flick[c] \u003c= 0) {\n      p.flick[c] = 0.07;\n      if (after >= 0 && after \u003c p.rows) p.glyph[after * p.cols + c] = Math.floor(rand(p) * FONT.length);\n    }\n    if (p.head[c] - p.len[c] > p.rows) {\n      if (p.rank[c] \u003c share) spawn(p, c, false);\n      else p.wait[c] = 0.3;\n    }\n  }\n  // What a tail leaves behind fades the way a phosphor does, slower the\n  // longer the tails hang.\n  const fade = Math.exp(-dt / (1.8 + 3 * p.density));\n  const chance = (0.4 + 12 * p.mutate * p.mutate) * dt;\n  for (let r = 0; r \u003c p.rows; r++) {\n    for (let c = 0; c \u003c p.cols; c++) {\n      const i = r * p.cols + c;\n      p.flash[i] *= Math.exp(-dt * 7);\n      const d = p.head[c] - r;\n      const tail = p.wait[c] \u003c= 0 && d >= 1 && d \u003c= p.len[c];\n      if (tail) p.glow[i] = EMBER;\n      else if (p.glow[i] > 0) {\n        p.glow[i] *= fade;\n        if (p.glow[i] \u003c GONE) p.glow[i] = 0;\n      }\n      if (!tail && p.glow[i] === 0) continue;\n      if (rand(p) \u003c chance) {\n        p.glyph[i] = Math.floor(rand(p) * FONT.length);\n        p.flash[i] = 1;\n      }\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.hue = k[0];\n  p.fall = k[1];\n  p.density = k[2];\n  p.mutate = k[3];\n  if (input.btnPressed && input.btnPressed[3]) {\n    p.scale = 3 - p.scale;\n    layout(p);\n  }\n  if (!p.started) {\n    p.started = true;\n    // Rain that has been falling a while: the wall behind it is already written.\n    for (let i = 0; i \u003c 90; i++) step(p, 1 / 30);\n  }\n  step(p, dt);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const fb = p.fb;\n  fb.fill(0);\n  const c3 = p.c;\n  const sc = p.scale;\n  const hue = p.hue + GREEN;\n  for (let c = 0; c \u003c p.cols; c++) {\n    const live = p.wait[c] \u003c= 0;\n    const head = p.head[c];\n    const len = p.len[c];\n    for (let r = 0; r \u003c p.rows; r++) {\n      const d = head - r;\n      const i = r * p.cols + c;\n      if (live && d >= 0 && d \u003c 1) {\n        // The head: near white with a little of the hue in it.\n        hsv(hue + 0.04, 0.3, 1, c3);\n      } else {\n        let v;\n        let t;\n        if (live && d >= 1 && d \u003c= len) {\n          // A tail steps down a glyph at a time behind its head.\n          t = Math.floor(d) / len;\n          v = EMBER + (1 - EMBER) * Math.pow(1 - t, 1.25);\n        } else if (p.glow[i] > 0) {\n          t = 1;\n          v = p.glow[i];\n        } else continue;\n        v = Math.min(1, v + p.flash[i] * 0.35);\n        v = Math.round(v * STEPS) / STEPS;\n        hsv(hue + 0.06 - 0.08 * t, 0.8 + 0.2 * t, v, c3);\n      }\n      const R = c3[0];\n      const G = c3[1];\n      const B = c3[2];\n      const bits = FONT[p.glyph[i]];\n      const x0 = c * p.pw;\n      const y0 = r * p.ph;\n      for (let gy = 0; gy \u003c 5; gy++) {\n        const row = (bits >> ((4 - gy) * 3)) & 7;\n        if (!row) continue;\n        for (let gx = 0; gx \u003c 3; gx++) {\n          if (!(row & (4 >> gx))) continue;\n          for (let sy = 0; sy \u003c sc; sy++) {\n            const y = y0 + gy * sc + sy;\n            if (y >= H) continue;\n            for (let sx = 0; sx \u003c sc; sx++) {\n              const o = (y * W + x0 + gx * sc + sx) * 3;\n              fb[o] = R;\n              fb[o + 1] = G;\n              fb[o + 2] = B;\n            }\n          }\n        }\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, fb[o], fb[o + 1], fb[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-glyph-rain","type":"code","name":"glyph-rain","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Glyph Rain\n// Family:  type\n// Idea:    Every column keeps writing characters downward and forgets them as it goes, so the panel is full of text that never says anything.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Fall=0.3..6, Density=0..1, Mutate=0..1\n//\n// Knob 1: Hue. Turns the rain around the colour wheel from phosphor green; the heads stay close to white.\n// Knob 2: Fall. How fast the columns fall, each at its own pace around this one.\n// Knob 3: Density. How many columns run and how long their tails hang, up to a full wall of text.\n// Knob 4: Mutate. How often a glyph already written turns into another; turned all the way, the whole wall boils.\n// Buttons: K4 tap switches between small glyphs and double-size ones.\n\nconst W = 64;\nconst H = 128;\n// Small glyphs sit on a 4x6 pitch: 16 columns of 22 rows.\nconst COLS = Math.floor(W / 4);\nconst ROWS = Math.ceil(H / 6);\n\n// 3x5 glyphs, one octal digit per row from the top, 4 is the left column.\nconst FONT = [\n  0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717,\n  0o25755, 0o74647, 0o74644, 0o55755, 0o55655, 0o44447, 0o57755, 0o65644, 0o65655, 0o72222,\n  0o55557, 0o55255, 0o55222, 0o71247, 0o02720, 0o00700, 0o07070, 0o05250, 0o11244, 0o12421,\n  0o42124, 0o57575, 0o02020, 0o34216, 0o61243, 0o27272,\n];\n\n// Hue 0 is the green of an old terminal's phosphor rather than red.\nconst GREEN = 0.33;\n// Where a tail ends, and where the glyphs it leaves behind start to fade from.\nconst EMBER = 0.38;\n// Below this a fading glyph is gone: the panel shows next to nothing under 20/255.\nconst GONE = 0.09;\n// Levels are drawn in steps, so a fading glyph changes a few times on its way out\n// instead of on every frame.\nconst STEPS = 20;\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction rand(p) {\n  let s = p.seed;\n  s ^= s \u003c\u003c 13;\n  s >>>= 0;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  s >>>= 0;\n  p.seed = s;\n  return s / 4294967296;\n}\n\nfunction spawn(p, c, scatter) {\n  p.len[c] = 4 + rand(p) * (p.rows + 2) * (0.75 + 0.85 * p.density);\n  p.rate[c] = 0.55 + rand(p) * 0.9;\n  // The gap before the next drop is counted in cells, so it holds at any speed.\n  const gap = rand(p) * p.rows * 0.9 * (1 - p.density);\n  p.head[c] = scatter ? rand(p) * (p.rows + p.len[c]) : -gap;\n  p.wait[c] = 0;\n}\n\nfunction layout(p) {\n  p.pw = 4 * p.scale;\n  p.ph = 6 * p.scale;\n  p.cols = Math.floor(W / p.pw);\n  p.rows = Math.ceil(H / p.ph);\n  for (let c = 0; c \u003c p.cols; c++) {\n    // Golden-ratio steps: whatever share of columns runs is spread evenly.\n    const r = c * 0.618034 + 0.31;\n    p.rank[c] = r - Math.floor(r);\n    p.flick[c] = 0;\n    spawn(p, c, true);\n  }\n  for (let i = 0; i \u003c p.glyph.length; i++) {\n    p.glyph[i] = Math.floor(rand(p) * FONT.length);\n    p.flash[i] = 0;\n    p.glow[i] = 0;\n  }\n  p.started = false;\n}\n\nexport function setup(params) {\n  params.seed = 0x2545f491;\n  params.scale = 1;\n  params.density = 0;\n  params.glyph = new Uint8Array(COLS * ROWS);\n  params.flash = new Float32Array(COLS * ROWS);\n  params.glow = new Float32Array(COLS * ROWS);\n  params.head = new Float32Array(COLS);\n  params.len = new Float32Array(COLS);\n  params.rate = new Float32Array(COLS);\n  params.wait = new Float32Array(COLS);\n  params.rank = new Float32Array(COLS);\n  params.flick = new Float32Array(COLS);\n  params.fb = new Uint8Array(W * H * 3);\n  params.c = [0, 0, 0];\n  layout(params);\n}\n\nfunction step(p, dt) {\n  const share = 0.7 + 0.3 * p.density;\n  const move = p.fall * 5 * dt;\n  for (let c = 0; c \u003c p.cols; c++) {\n    if (p.wait[c] > 0) {\n      p.wait[c] -= dt;\n      if (p.wait[c] \u003c= 0 && p.rank[c] \u003c share) spawn(p, c, false);\n      else if (p.wait[c] \u003c= 0) p.wait[c] = 0.3;\n      continue;\n    }\n    const before = Math.floor(p.head[c]);\n    p.head[c] += move * p.rate[c];\n    const after = Math.floor(p.head[c]);\n    // The head writes a fresh glyph into each cell it enters, even the ones a\n    // fast drop crosses inside one frame.\n    for (let r = Math.max(0, before + 1); r \u003c= Math.min(after, p.rows - 1); r++) p.glyph[r * p.cols + c] = Math.floor(rand(p) * FONT.length);\n    // And it cannot make up its mind about the cell it is in.\n    p.flick[c] -= dt;\n    if (p.flick[c] \u003c= 0) {\n      p.flick[c] = 0.07;\n      if (after >= 0 && after \u003c p.rows) p.glyph[after * p.cols + c] = Math.floor(rand(p) * FONT.length);\n    }\n    if (p.head[c] - p.len[c] > p.rows) {\n      if (p.rank[c] \u003c share) spawn(p, c, false);\n      else p.wait[c] = 0.3;\n    }\n  }\n  // What a tail leaves behind fades the way a phosphor does, slower the\n  // longer the tails hang.\n  const fade = Math.exp(-dt / (1.8 + 3 * p.density));\n  const chance = (0.4 + 12 * p.mutate * p.mutate) * dt;\n  for (let r = 0; r \u003c p.rows; r++) {\n    for (let c = 0; c \u003c p.cols; c++) {\n      const i = r * p.cols + c;\n      p.flash[i] *= Math.exp(-dt * 7);\n      const d = p.head[c] - r;\n      const tail = p.wait[c] \u003c= 0 && d >= 1 && d \u003c= p.len[c];\n      if (tail) p.glow[i] = EMBER;\n      else if (p.glow[i] > 0) {\n        p.glow[i] *= fade;\n        if (p.glow[i] \u003c GONE) p.glow[i] = 0;\n      }\n      if (!tail && p.glow[i] === 0) continue;\n      if (rand(p) \u003c chance) {\n        p.glyph[i] = Math.floor(rand(p) * FONT.length);\n        p.flash[i] = 1;\n      }\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  p.hue = k[0];\n  p.fall = k[1];\n  p.density = k[2];\n  p.mutate = k[3];\n  if (input.btnPressed && input.btnPressed[3]) {\n    p.scale = 3 - p.scale;\n    layout(p);\n  }\n  if (!p.started) {\n    p.started = true;\n    // Rain that has been falling a while: the wall behind it is already written.\n    for (let i = 0; i \u003c 90; i++) step(p, 1 / 30);\n  }\n  step(p, dt);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const fb = p.fb;\n  fb.fill(0);\n  const c3 = p.c;\n  const sc = p.scale;\n  const hue = p.hue + GREEN;\n  for (let c = 0; c \u003c p.cols; c++) {\n    const live = p.wait[c] \u003c= 0;\n    const head = p.head[c];\n    const len = p.len[c];\n    for (let r = 0; r \u003c p.rows; r++) {\n      const d = head - r;\n      const i = r * p.cols + c;\n      if (live && d >= 0 && d \u003c 1) {\n        // The head: near white with a little of the hue in it.\n        hsv(hue + 0.04, 0.3, 1, c3);\n      } else {\n        let v;\n        let t;\n        if (live && d >= 1 && d \u003c= len) {\n          // A tail steps down a glyph at a time behind its head.\n          t = Math.floor(d) / len;\n          v = EMBER + (1 - EMBER) * Math.pow(1 - t, 1.25);\n        } else if (p.glow[i] > 0) {\n          t = 1;\n          v = p.glow[i];\n        } else continue;\n        v = Math.min(1, v + p.flash[i] * 0.35);\n        v = Math.round(v * STEPS) / STEPS;\n        hsv(hue + 0.06 - 0.08 * t, 0.8 + 0.2 * t, v, c3);\n      }\n      const R = c3[0];\n      const G = c3[1];\n      const B = c3[2];\n      const bits = FONT[p.glyph[i]];\n      const x0 = c * p.pw;\n      const y0 = r * p.ph;\n      for (let gy = 0; gy \u003c 5; gy++) {\n        const row = (bits >> ((4 - gy) * 3)) & 7;\n        if (!row) continue;\n        for (let gx = 0; gx \u003c 3; gx++) {\n          if (!(row & (4 >> gx))) continue;\n          for (let sy = 0; sy \u003c sc; sy++) {\n            const y = y0 + gy * sc + sy;\n            if (y >= H) continue;\n            for (let sx = 0; sx \u003c sc; sx++) {\n              const o = (y * W + x0 + gx * sc + sx) * 3;\n              fb[o] = R;\n              fb[o + 1] = G;\n              fb[o + 2] = B;\n            }\n          }\n        }\n      }\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, fb[o], fb[o + 1], fb[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Fall=0.3..6, Density=0..1, Mutate=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the rain around the colour wheel from phosphor green; the heads stay close to white."},{"name":"Fall","min":0.3,"max":6,"about":"How fast the columns fall, each at its own pace around this one."},{"name":"Density","min":0,"max":1,"about":"How many columns run and how long their tails hang, up to a full wall of text."},{"name":"Mutate","min":0,"max":1,"about":"How often a glyph already written turns into another; turned all the way, the whole wall boils."}],"start":[0,2,0,0.06],"measures":{"motion":0.2257,"detail":0.0998,"edges":0.7469,"complexity":0.2343,"coverage":0.2152,"colour":0.1998,"drift":0.0956},"knobResponse":[0.0655,0.0718,0.1045,0.0664]},{"slug":"guilloche","title":"Guilloché","family":"line","round":16,"note":"장미 기관으로 깎은 은판의 보리알 띠와 물결 띠가 패널 높이의 타원으로 서고, 등불이 돌면 그 쪽을 향한 홈만 금빛으로 번쩍여요. K1 을 누르면 칼끝이 귀퉁이에서 가운데로 들어오며 판을 새 무늬로 다시 깎아요.","idea":"An engine-turned silver plate stands the height of the panel, an oval of rose-engine bands inside straight-line corners, and as a lamp circles it each groove flashes or goes dark by the way it was cut.","buttons":"K1 tap re-cuts the plate with the next set of patterns, the cutter working in from the corners to the centre.","code":"// ===== Patternflow pattern =====\n// Title:   Guilloché\n// Family:  line\n// Idea:    An engine-turned silver plate stands the height of the panel, an oval of rose-engine bands inside straight-line corners, and as a lamp circles it each groove flashes or goes dark by the way it was cut.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: guilloché, the rose engine and the straight-line engine, as on Breguet dials and banknotes\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Metal=0..1, Light=0..4, Lobes=12..36, Phasing=0..0.5\n//\n// Knob 1: Metal. Silver at 0, then champagne, yellow gold and rose gold at the far end.\n// Knob 2: Light. How fast the lamp travels round the plate: once in ten seconds at 2, in five at 4; at 0 it stands still and only the rosettes drift.\n// Knob 3: Lobes. Bosses on the rosette cam, 12 to 36: the waves, the barleycorn grains, the basketweave cells and the corner waves all grow finer.\n// Knob 4: Phasing. How far the rosette is turned between one cut and the next, in lobes: 0 nests the waves, a little twists them into flames, 0.5 trades waves for barleycorn.\n// Buttons: K1 tap re-cuts the plate with the next set of patterns, the cutter working in from the corners to the centre.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\nconst CY = 63.5;\nconst TAU = Math.PI * 2;\n// The oval chuck. The cutter at radius R traces an ellipse with semi-axes\n// R - E across and R + E up, so the axes always differ by 2E: cuts made at an\n// even pitch stay evenly spaced all the way round, which scaled ellipses\n// would not. At R = 48 the oval is 64 by 128 and meets the panel's sides; at\n// R = E it closes to a slot 64 LEDs tall down the middle.\nconst E = 16;\nconst RIM = 48;\n// One cut every two LEDs: a groove and a gap.\nconst PITCH = 2;\n// How much of an LED's width blurs a groove's edge. A whole LED gave every\n// slanting groove a soft grey edge and the bands went to mud; at 0.15 the\n// grooves stay crisp, and one that runs between two LEDs still lights both.\nconst SHARP = 0.15;\n\nconst TS = 2048;\nconst SIN = new Float32Array(TS);\nfor (let i = 0; i \u003c TS; i++) SIN[i] = Math.sin((i / TS) * TAU);\nfunction sinT(u) {\n  return SIN[((u - Math.floor(u)) * TS) & (TS - 1)];\n}\nfunction cosT(u) {\n  return sinT(u + 0.25);\n}\n\n// What lies under an LED.\nconst POLISH = 0;\nconst CUT = 1;\nconst BOSS = 2;\n\n// The patterns a band can carry.\nconst FLAT = 0; // a polished ring between bands\nconst WAVE = 1; // vagues: cuts rocked by the rosette, each turned on by the phasing\nconst BARLEY = 2; // grain d'orge: every other cut turned half a lobe, so neighbours cross\nconst RAYS = 3; // a sunburst of straight cuts out from the centre\nconst BASKET = 4; // panier: round and radial cuts taking turns in cells\nconst CLOUS = 5; // clous de Paris: a field of little pyramids\n\n// The plates K1 steps through. Zones from the centre out, each a pattern\n// and the radius it runs to; the corners outside the oval are the\n// straight-line engine's: how far the rosette rocks its cuts, how many waves\n// it puts in 512 / lobes LEDs, and the turn between one cut and the next.\nconst PLATES = [\n  {\n    zones: [CLOUS, 21.5, FLAT, 22.5, BARLEY, 34.5, FLAT, 35.5, WAVE, 47.5, FLAT, 49],\n    corner: { amp: 1.8, waves: 2, step: 0.1 },\n  },\n  {\n    zones: [RAYS, 21.5, FLAT, 22.5, BASKET, 34.5, FLAT, 35.5, BARLEY, 47.5, FLAT, 49],\n    corner: { amp: 1.6, waves: 2, step: 0.5 },\n  },\n  {\n    zones: [BASKET, 21.5, FLAT, 22.5, WAVE, 34.5, FLAT, 35.5, RAYS, 47.5, FLAT, 49],\n    corner: { amp: 2.5, waves: 2, step: 0.25 },\n  },\n];\n\nfunction chuckR(X, Y) {\n  const ax = Math.abs(X);\n  const ay = Math.abs(Y);\n  let lo = E + ax;\n  let hi = E + ax + ay + 1;\n  for (let i = 0; i \u003c 30; i++) {\n    const m = 0.5 * (lo + hi);\n    const a = m - E;\n    const b = m + E;\n    if ((ax * ax) / (a * a) + (ay * ay) / (b * b) > 1) lo = m;\n    else hi = m;\n  }\n  return 0.5 * (lo + hi);\n}\n\n// The angle round the oval in turns, stretched so a lobe of the cam is about\n// as long at the sides as at the ends.\nfunction chuckT(X, Y, R) {\n  const a = R - E;\n  const b = R + E;\n  const t = Math.atan2(Y / b, X / a);\n  const k = (b * b - a * a) / (b * b + a * a);\n  return (t + 0.25 * k * Math.sin(2 * t)) / TAU;\n}\n\nfunction wrapTurn(d) {\n  return d - Math.round(d);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.R = new Float32Array(N);\n  P.T = new Float32Array(N);\n  P.rx = new Float32Array(N);\n  P.ry = new Float32Array(N);\n  P.tx = new Float32Array(N);\n  P.ty = new Float32Array(N);\n  const h = 0.01;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const X = x - CX;\n      const Y = y - CY;\n      const R = chuckR(X, Y);\n      P.R[p] = R;\n      P.T[p] = chuckT(X, Y, R);\n      const Rxp = chuckR(X + h, Y);\n      const Rxm = chuckR(X - h, Y);\n      const Ryp = chuckR(X, Y + h);\n      const Rym = chuckR(X, Y - h);\n      P.rx[p] = (Rxp - Rxm) / (2 * h);\n      P.ry[p] = (Ryp - Rym) / (2 * h);\n      P.tx[p] = wrapTurn(chuckT(X + h, Y, Rxp) - chuckT(X - h, Y, Rxm)) / (2 * h);\n      P.ty[p] = wrapTurn(chuckT(X, Y + h, Ryp) - chuckT(X, Y - h, Rym)) / (2 * h);\n    }\n  }\n  P.plate = 0;\n  P.old = 0;\n  P.front = -1;\n  P.metal = 0;\n  P.speed = 2;\n  P.lobes = 12;\n  P.phasing = 0.06;\n  P.lampA = 2.2;\n  P.drift = 0;\n  P.t = 0;\n  P.frame = 0;\n  // The surface under each LED, worked out a third of the rows a frame: the\n  // rosettes drift about a LED a second, so a row is never more than a\n  // fourteenth of a LED behind.\n  P.kind = new Uint8Array(N);\n  P.gx = new Float32Array(N);\n  P.gy = new Float32Array(N);\n  P.cov = new Float32Array(N);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 12, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.metal = Math.max(0, Math.min(1, k[0]));\n  P.speed = Math.max(0, Math.min(4, k[1]));\n  P.lobes = Math.round(Math.max(12, Math.min(36, k[2])));\n  P.phasing = Math.max(0, Math.min(0.5, k[3]));\n  P.t += dt;\n  P.lampA += dt * 0.32 * P.speed;\n  P.drift += dt * 0.05;\n  if (input.btnPressed && input.btnPressed[0] && P.front \u003c 0) {\n    P.old = P.plate;\n    P.plate = (P.plate + 1) % PLATES.length;\n    P.front = 78;\n  }\n  if (P.front >= 0) {\n    P.front -= dt * 20;\n    if (P.front \u003c 14) P.front = -1;\n  }\n}\n\n// The surface under one LED: its kind, the direction across the groove\n// there (GX, GY, a unit vector in the plate), and how much of the LED the\n// groove covers (COV).\nlet KIND = POLISH;\nlet GX = 0;\nlet GY = 0;\nlet COV = 0;\n\nfunction polish() {\n  KIND = POLISH;\n  GX = 0;\n  GY = 0;\n  COV = 0;\n}\n\n// The share of an LED's footprint [d - hw, d + hw] that a groove one LED\n// wide centred at c covers.\nfunction overlap(d, hw, c) {\n  const lo = Math.max(d - hw, c - 0.5);\n  const hi = Math.min(d + hw, c + 0.5);\n  return hi > lo ? (hi - lo) / (2 * hw) : 0;\n}\n\n// d is the LED's distance from the nearest cut's centre line, along the\n// direction (gx, gy) / g across it.\nfunction cut(d, gx, gy, g, pitch) {\n  KIND = CUT;\n  GX = gx / g;\n  GY = gy / g;\n  const hw = SHARP * (Math.abs(GX) + Math.abs(GY));\n  COV = Math.min(1, overlap(d, hw, 0) + overlap(d, hw, d > 0 ? pitch : -pitch));\n}\n\n// Rose-engine cuts round the oval: cut k sits at r0 + PITCH (k + 1/2) and the\n// cam rocks it in and out by amp, n lobes a turn, turned on by step lobes\n// for each cut and by rot for the whole band.\nfunction rose(P, p, r0, r1, n, amp, step, rot) {\n  const R = P.R[p];\n  const T = P.T[p];\n  const cuts = Math.max(1, Math.floor((r1 - r0) / PITCH));\n  const kc = (R - r0) / PITCH - 0.5;\n  const reach = amp / PITCH + 1;\n  const k0 = Math.max(0, Math.floor(kc - reach));\n  const k1 = Math.min(cuts - 1, Math.ceil(kc + reach));\n  const rx = P.rx[p];\n  const ry = P.ry[p];\n  const tx = P.tx[p] * TAU * n * amp;\n  const ty = P.ty[p] * TAU * n * amp;\n  let best = 1e9;\n  let bx = 0;\n  let by = 0;\n  let bg = 1;\n  let bd = 0;\n  // The nearest cut, compared by squared distance d^2 / |grad|^2.\n  for (let c = k0; c \u003c= k1; c++) {\n    const u = n * T + step * c + rot;\n    const d = R - (r0 + PITCH * (c + 0.5)) - amp * sinT(u);\n    const w = cosT(u);\n    const gx = rx - w * tx;\n    const gy = ry - w * ty;\n    const g2 = gx * gx + gy * gy + 1e-9;\n    const q = (d * d) / g2;\n    if (q \u003c best) {\n      best = q;\n      bx = gx;\n      by = gy;\n      bg = g2;\n      bd = d;\n    }\n  }\n  const g = Math.sqrt(bg);\n  cut(bd / g, bx, by, g, PITCH);\n}\n\n// Sunburst: straight cuts out from the centre, count of them set so they\n// are a pitch apart at the band's middle, twisted by the phasing.\nfunction rays(P, p, r0, r1, phasing) {\n  const R = P.R[p];\n  const mid = 0.5 * (r0 + r1);\n  const around = Math.PI * (3 * 2 * mid - Math.sqrt((3 * (mid - E) + mid + E) * (mid - E + 3 * (mid + E))));\n  const m = Math.round(around / PITCH);\n  const tw = phasing * 0.6;\n  const q = m * P.T[p] + tw * (R - r0);\n  const gx = m * P.tx[p] + tw * P.rx[p];\n  const gy = m * P.ty[p] + tw * P.ry[p];\n  const g = Math.sqrt(gx * gx + gy * gy) + 1e-6;\n  cut((q - Math.round(q)) / g, gx, gy, g, PITCH);\n}\n\n// Basketweave: cells two cuts deep, round cuts and radial cuts taking turns\n// like the over and under of a weave.\nfunction basket(P, p, r0, r1, lobes) {\n  const R = P.R[p];\n  const T = P.T[p];\n  const cellR = 2 * PITCH;\n  const i = Math.floor((R - r0) / cellR);\n  const cells = lobes * 2;\n  const j = Math.floor((T + 1) * cells);\n  if ((i + j) & 1) {\n    const m = (cells * 2.5) | 0;\n    const q = m * T;\n    const gx = m * P.tx[p];\n    const gy = m * P.ty[p];\n    const g = Math.sqrt(gx * gx + gy * gy) + 1e-6;\n    cut((q - Math.round(q)) / g, gx, gy, g, PITCH);\n  } else {\n    const q = (R - r0) / PITCH - 0.5;\n    const g = Math.sqrt(P.rx[p] * P.rx[p] + P.ry[p] * P.ry[p]) + 1e-6;\n    cut(((q - Math.round(q)) * PITCH) / g, P.rx[p], P.ry[p], g, PITCH);\n  }\n}\n\n// Clous de Paris: two sets of straight cuts crossing at right angles, set\n// diagonal on the plate, leave a field of little square pyramids. Each face\n// of a pyramid leans towards the cut beside it.\nfunction clous(x, y, size) {\n  const X = x - CX;\n  const Y = y - CY;\n  const q1 = (X + Y) / (size * Math.SQRT2);\n  const q2 = (X - Y) / (size * Math.SQRT2);\n  const d1 = (q1 - Math.round(q1)) * size;\n  const d2 = (q2 - Math.round(q2)) * size;\n  const one = Math.abs(d1) \u003c Math.abs(d2);\n  const d = one ? d1 : d2;\n  cut(d, 1, one ? 1 : -1, Math.SQRT2, size);\n  KIND = BOSS;\n  // The face leans down towards the cut it slopes into.\n  if (d > 0) {\n    GX = -GX;\n    GY = -GY;\n  }\n}\n\n// The straight-line engine fills the corners: the work slides past the\n// cutter instead of turning, so the cuts run straight across the plate,\n// rocked up and down by the same rosette.\nfunction straight(x, y, c, lobes, phasing, rot) {\n  const X = x - CX;\n  const Y = y - CY;\n  const f = (c.waves * lobes) / 512;\n  const slope = c.amp * TAU * f;\n  const kc = Math.round(Y / PITCH);\n  const reach = Math.ceil(c.amp / PITCH) + 1;\n  let best = 1e9;\n  let bd = 0;\n  let bx = 0;\n  let bg = 1;\n  for (let k = kc - reach; k \u003c= kc + reach; k++) {\n    const u = f * X + (c.step + phasing) * k + rot;\n    const d = Y - PITCH * k - c.amp * sinT(u);\n    const gx = -slope * cosT(u);\n    const g2 = gx * gx + 1;\n    const q = (d * d) / g2;\n    if (q \u003c best) {\n      best = q;\n      bd = d;\n      bx = gx;\n      bg = g2;\n    }\n  }\n  const g = Math.sqrt(bg);\n  cut(bd / g, bx, 1, g, PITCH);\n}\n\nfunction surface(P, p, x, y, plate) {\n  const R = P.R[p];\n  if (R > RIM + 1) return straight(x, y, plate.corner, P.lobes, P.phasing, P.drift);\n  const zones = plate.zones;\n  let r0 = 0;\n  for (let i = 0; i \u003c zones.length; i += 2) {\n    const r1 = zones[i + 1];\n    if (R \u003c r1 || i === zones.length - 2) {\n      const kind = zones[i];\n      // Neighbouring bands drift opposite ways.\n      const rot = i & 4 ? -P.drift : P.drift;\n      if (kind === WAVE) return rose(P, p, r0, r1, P.lobes, 3, P.phasing, rot);\n      if (kind === BARLEY) return rose(P, p, r0, r1, P.lobes, 2.2, 0.5 + P.phasing, rot);\n      if (kind === RAYS) return rays(P, p, r0, r1, P.phasing);\n      if (kind === BASKET) return basket(P, p, r0, r1, P.lobes);\n      if (kind === CLOUS) return clous(x, y, 4);\n      return polish();\n    }\n    r0 = r1;\n  }\n}\n\nconst METALS = [\n  [0.97, 0.98, 1.0],\n  [1.0, 0.93, 0.78],\n  [1.0, 0.8, 0.42],\n  [1.0, 0.68, 0.56],\n];\n\n// The land between grooves, a groove in shadow, and how much more a groove\n// gives back when it faces the lamp.\nconst LAND = 0.64;\nconst GROOVE = 0.12;\nconst GLINT = 1.3;\n\n// The cutter's point, white hot where it bites, as it runs round the front.\nfunction drawCutter(display, P) {\n  const f = P.front;\n  if (f \u003c E + 1) return;\n  const a = P.t * TAU * 2;\n  const cx = CX + (f - E) * Math.cos(a);\n  const cy = CY + (f + E) * Math.sin(a);\n  for (let j = -1; j \u003c= 1; j++) {\n    for (let i = -1; i \u003c= 1; i++) {\n      const x = Math.round(cx) + i;\n      const y = Math.round(cy) + j;\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const v = i === 0 && j === 0 ? 255 : 200;\n      display.setPixel(x, y, v, v, i === 0 && j === 0 ? 240 : 150);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const mu = P.metal * (METALS.length - 1);\n  const mi = Math.min(METALS.length - 2, Math.floor(mu));\n  const mf = mu - mi;\n  const mr = METALS[mi][0] + (METALS[mi + 1][0] - METALS[mi][0]) * mf;\n  const mg = METALS[mi][1] + (METALS[mi + 1][1] - METALS[mi][1]) * mf;\n  const mb = METALS[mi][2] + (METALS[mi + 1][2] - METALS[mi][2]) * mf;\n  // The lamp circles the plate on a tall ellipse, 46 LEDs out from the\n  // middle at the sides and 72 at the ends, just off the panel.\n  const LX = CX + 46 * Math.cos(P.lampA);\n  const LY = CY + 72 * Math.sin(P.lampA);\n  const cur = PLATES[P.plate];\n  const old = PLATES[P.old];\n  const front = P.front;\n  const all = P.frame === 0;\n  const third = P.frame % 3;\n  P.frame++;\n  for (let y = all ? 0 : third; y \u003c H; y += all ? 1 : 3) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      surface(P, p, x, y, front >= 0 && P.R[p] \u003c front ? old : cur);\n      P.kind[p] = KIND;\n      P.gx[p] = GX;\n      P.gy[p] = GY;\n      P.cov[p] = COV;\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const dx = LX - x;\n      const dy = LY - y;\n      const dd = dx * dx + dy * dy;\n      const id = 1 / Math.sqrt(dd + 1);\n      const fall = 1 / (1 + dd * 0.00016);\n      const kind = P.kind[p];\n      const cov = P.cov[p];\n      // Two lights: the cool room, and the warm lamp.\n      let room;\n      let lamp;\n      if (kind === CUT) {\n        // A groove throws the lamp back when it runs across the lamp's\n        // direction: the streak every engine-turned dial has, running from\n        // the lamp over the cuts that face it.\n        let a = (P.gx[p] * dx + P.gy[p] * dy) * id;\n        a *= a;\n        const g8 = a * a * a * a;\n        // The window above lights the land between grooves that run across\n        // the plate a little more than the land between grooves that run up it.\n        const gy = P.gy[p];\n        room = LAND * (0.86 + 0.28 * gy * gy) * (1 - cov) + GROOVE * cov;\n        lamp = fall * (0.5 * a * (1 - cov) + GLINT * g8 * cov);\n      } else if (kind === BOSS) {\n        const a = (P.gx[p] * dx + P.gy[p] * dy) * id;\n        const lit = a > 0 ? a * a : 0;\n        room = (0.55 - 0.2 * P.gy[p]) * (1 - cov) + GROOVE * cov;\n        lamp = fall * 0.8 * lit * (1 - cov);\n      } else {\n        // Polished: bright where it shows the window, brighter by the lamp.\n        room = 0.8;\n        lamp = 0.5 / (1 + dd * 0.0005);\n      }\n      let r = (room * 0.83 + lamp) * mr;\n      let g = (room * 0.91 + lamp * 0.85) * mg;\n      let b = (room * 1.0 + lamp * 0.6) * mb;\n      if (front >= 0) {\n        // Just behind the cutter the metal is fresh and bright, and it dulls\n        // over the next four LEDs.\n        const e = P.R[p] - front;\n        if (e > -0.6 && e \u003c 4) {\n          const glow = e \u003c 0.6 ? 0.9 : 0.45 * (1 - (e - 0.6) / 3.4);\n          r += glow;\n          g += glow * 0.94;\n          b += glow * 0.82;\n        }\n      }\n      display.setPixel(x, y, Math.min(255, r * 255), Math.min(255, g * 255), Math.min(255, b * 255));\n    }\n  }\n  if (front >= 0) drawCutter(display, P);\n}\n","layer":{"id":"layer-guilloche","type":"code","name":"guilloche","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Guilloché\n// Family:  line\n// Idea:    An engine-turned silver plate stands the height of the panel, an oval of rose-engine bands inside straight-line corners, and as a lamp circles it each groove flashes or goes dark by the way it was cut.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: guilloché, the rose engine and the straight-line engine, as on Breguet dials and banknotes\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Metal=0..1, Light=0..4, Lobes=12..36, Phasing=0..0.5\n//\n// Knob 1: Metal. Silver at 0, then champagne, yellow gold and rose gold at the far end.\n// Knob 2: Light. How fast the lamp travels round the plate: once in ten seconds at 2, in five at 4; at 0 it stands still and only the rosettes drift.\n// Knob 3: Lobes. Bosses on the rosette cam, 12 to 36: the waves, the barleycorn grains, the basketweave cells and the corner waves all grow finer.\n// Knob 4: Phasing. How far the rosette is turned between one cut and the next, in lobes: 0 nests the waves, a little twists them into flames, 0.5 trades waves for barleycorn.\n// Buttons: K1 tap re-cuts the plate with the next set of patterns, the cutter working in from the corners to the centre.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\nconst CY = 63.5;\nconst TAU = Math.PI * 2;\n// The oval chuck. The cutter at radius R traces an ellipse with semi-axes\n// R - E across and R + E up, so the axes always differ by 2E: cuts made at an\n// even pitch stay evenly spaced all the way round, which scaled ellipses\n// would not. At R = 48 the oval is 64 by 128 and meets the panel's sides; at\n// R = E it closes to a slot 64 LEDs tall down the middle.\nconst E = 16;\nconst RIM = 48;\n// One cut every two LEDs: a groove and a gap.\nconst PITCH = 2;\n// How much of an LED's width blurs a groove's edge. A whole LED gave every\n// slanting groove a soft grey edge and the bands went to mud; at 0.15 the\n// grooves stay crisp, and one that runs between two LEDs still lights both.\nconst SHARP = 0.15;\n\nconst TS = 2048;\nconst SIN = new Float32Array(TS);\nfor (let i = 0; i \u003c TS; i++) SIN[i] = Math.sin((i / TS) * TAU);\nfunction sinT(u) {\n  return SIN[((u - Math.floor(u)) * TS) & (TS - 1)];\n}\nfunction cosT(u) {\n  return sinT(u + 0.25);\n}\n\n// What lies under an LED.\nconst POLISH = 0;\nconst CUT = 1;\nconst BOSS = 2;\n\n// The patterns a band can carry.\nconst FLAT = 0; // a polished ring between bands\nconst WAVE = 1; // vagues: cuts rocked by the rosette, each turned on by the phasing\nconst BARLEY = 2; // grain d'orge: every other cut turned half a lobe, so neighbours cross\nconst RAYS = 3; // a sunburst of straight cuts out from the centre\nconst BASKET = 4; // panier: round and radial cuts taking turns in cells\nconst CLOUS = 5; // clous de Paris: a field of little pyramids\n\n// The plates K1 steps through. Zones from the centre out, each a pattern\n// and the radius it runs to; the corners outside the oval are the\n// straight-line engine's: how far the rosette rocks its cuts, how many waves\n// it puts in 512 / lobes LEDs, and the turn between one cut and the next.\nconst PLATES = [\n  {\n    zones: [CLOUS, 21.5, FLAT, 22.5, BARLEY, 34.5, FLAT, 35.5, WAVE, 47.5, FLAT, 49],\n    corner: { amp: 1.8, waves: 2, step: 0.1 },\n  },\n  {\n    zones: [RAYS, 21.5, FLAT, 22.5, BASKET, 34.5, FLAT, 35.5, BARLEY, 47.5, FLAT, 49],\n    corner: { amp: 1.6, waves: 2, step: 0.5 },\n  },\n  {\n    zones: [BASKET, 21.5, FLAT, 22.5, WAVE, 34.5, FLAT, 35.5, RAYS, 47.5, FLAT, 49],\n    corner: { amp: 2.5, waves: 2, step: 0.25 },\n  },\n];\n\nfunction chuckR(X, Y) {\n  const ax = Math.abs(X);\n  const ay = Math.abs(Y);\n  let lo = E + ax;\n  let hi = E + ax + ay + 1;\n  for (let i = 0; i \u003c 30; i++) {\n    const m = 0.5 * (lo + hi);\n    const a = m - E;\n    const b = m + E;\n    if ((ax * ax) / (a * a) + (ay * ay) / (b * b) > 1) lo = m;\n    else hi = m;\n  }\n  return 0.5 * (lo + hi);\n}\n\n// The angle round the oval in turns, stretched so a lobe of the cam is about\n// as long at the sides as at the ends.\nfunction chuckT(X, Y, R) {\n  const a = R - E;\n  const b = R + E;\n  const t = Math.atan2(Y / b, X / a);\n  const k = (b * b - a * a) / (b * b + a * a);\n  return (t + 0.25 * k * Math.sin(2 * t)) / TAU;\n}\n\nfunction wrapTurn(d) {\n  return d - Math.round(d);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.R = new Float32Array(N);\n  P.T = new Float32Array(N);\n  P.rx = new Float32Array(N);\n  P.ry = new Float32Array(N);\n  P.tx = new Float32Array(N);\n  P.ty = new Float32Array(N);\n  const h = 0.01;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const X = x - CX;\n      const Y = y - CY;\n      const R = chuckR(X, Y);\n      P.R[p] = R;\n      P.T[p] = chuckT(X, Y, R);\n      const Rxp = chuckR(X + h, Y);\n      const Rxm = chuckR(X - h, Y);\n      const Ryp = chuckR(X, Y + h);\n      const Rym = chuckR(X, Y - h);\n      P.rx[p] = (Rxp - Rxm) / (2 * h);\n      P.ry[p] = (Ryp - Rym) / (2 * h);\n      P.tx[p] = wrapTurn(chuckT(X + h, Y, Rxp) - chuckT(X - h, Y, Rxm)) / (2 * h);\n      P.ty[p] = wrapTurn(chuckT(X, Y + h, Ryp) - chuckT(X, Y - h, Rym)) / (2 * h);\n    }\n  }\n  P.plate = 0;\n  P.old = 0;\n  P.front = -1;\n  P.metal = 0;\n  P.speed = 2;\n  P.lobes = 12;\n  P.phasing = 0.06;\n  P.lampA = 2.2;\n  P.drift = 0;\n  P.t = 0;\n  P.frame = 0;\n  // The surface under each LED, worked out a third of the rows a frame: the\n  // rosettes drift about a LED a second, so a row is never more than a\n  // fourteenth of a LED behind.\n  P.kind = new Uint8Array(N);\n  P.gx = new Float32Array(N);\n  P.gy = new Float32Array(N);\n  P.cov = new Float32Array(N);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 12, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.metal = Math.max(0, Math.min(1, k[0]));\n  P.speed = Math.max(0, Math.min(4, k[1]));\n  P.lobes = Math.round(Math.max(12, Math.min(36, k[2])));\n  P.phasing = Math.max(0, Math.min(0.5, k[3]));\n  P.t += dt;\n  P.lampA += dt * 0.32 * P.speed;\n  P.drift += dt * 0.05;\n  if (input.btnPressed && input.btnPressed[0] && P.front \u003c 0) {\n    P.old = P.plate;\n    P.plate = (P.plate + 1) % PLATES.length;\n    P.front = 78;\n  }\n  if (P.front >= 0) {\n    P.front -= dt * 20;\n    if (P.front \u003c 14) P.front = -1;\n  }\n}\n\n// The surface under one LED: its kind, the direction across the groove\n// there (GX, GY, a unit vector in the plate), and how much of the LED the\n// groove covers (COV).\nlet KIND = POLISH;\nlet GX = 0;\nlet GY = 0;\nlet COV = 0;\n\nfunction polish() {\n  KIND = POLISH;\n  GX = 0;\n  GY = 0;\n  COV = 0;\n}\n\n// The share of an LED's footprint [d - hw, d + hw] that a groove one LED\n// wide centred at c covers.\nfunction overlap(d, hw, c) {\n  const lo = Math.max(d - hw, c - 0.5);\n  const hi = Math.min(d + hw, c + 0.5);\n  return hi > lo ? (hi - lo) / (2 * hw) : 0;\n}\n\n// d is the LED's distance from the nearest cut's centre line, along the\n// direction (gx, gy) / g across it.\nfunction cut(d, gx, gy, g, pitch) {\n  KIND = CUT;\n  GX = gx / g;\n  GY = gy / g;\n  const hw = SHARP * (Math.abs(GX) + Math.abs(GY));\n  COV = Math.min(1, overlap(d, hw, 0) + overlap(d, hw, d > 0 ? pitch : -pitch));\n}\n\n// Rose-engine cuts round the oval: cut k sits at r0 + PITCH (k + 1/2) and the\n// cam rocks it in and out by amp, n lobes a turn, turned on by step lobes\n// for each cut and by rot for the whole band.\nfunction rose(P, p, r0, r1, n, amp, step, rot) {\n  const R = P.R[p];\n  const T = P.T[p];\n  const cuts = Math.max(1, Math.floor((r1 - r0) / PITCH));\n  const kc = (R - r0) / PITCH - 0.5;\n  const reach = amp / PITCH + 1;\n  const k0 = Math.max(0, Math.floor(kc - reach));\n  const k1 = Math.min(cuts - 1, Math.ceil(kc + reach));\n  const rx = P.rx[p];\n  const ry = P.ry[p];\n  const tx = P.tx[p] * TAU * n * amp;\n  const ty = P.ty[p] * TAU * n * amp;\n  let best = 1e9;\n  let bx = 0;\n  let by = 0;\n  let bg = 1;\n  let bd = 0;\n  // The nearest cut, compared by squared distance d^2 / |grad|^2.\n  for (let c = k0; c \u003c= k1; c++) {\n    const u = n * T + step * c + rot;\n    const d = R - (r0 + PITCH * (c + 0.5)) - amp * sinT(u);\n    const w = cosT(u);\n    const gx = rx - w * tx;\n    const gy = ry - w * ty;\n    const g2 = gx * gx + gy * gy + 1e-9;\n    const q = (d * d) / g2;\n    if (q \u003c best) {\n      best = q;\n      bx = gx;\n      by = gy;\n      bg = g2;\n      bd = d;\n    }\n  }\n  const g = Math.sqrt(bg);\n  cut(bd / g, bx, by, g, PITCH);\n}\n\n// Sunburst: straight cuts out from the centre, count of them set so they\n// are a pitch apart at the band's middle, twisted by the phasing.\nfunction rays(P, p, r0, r1, phasing) {\n  const R = P.R[p];\n  const mid = 0.5 * (r0 + r1);\n  const around = Math.PI * (3 * 2 * mid - Math.sqrt((3 * (mid - E) + mid + E) * (mid - E + 3 * (mid + E))));\n  const m = Math.round(around / PITCH);\n  const tw = phasing * 0.6;\n  const q = m * P.T[p] + tw * (R - r0);\n  const gx = m * P.tx[p] + tw * P.rx[p];\n  const gy = m * P.ty[p] + tw * P.ry[p];\n  const g = Math.sqrt(gx * gx + gy * gy) + 1e-6;\n  cut((q - Math.round(q)) / g, gx, gy, g, PITCH);\n}\n\n// Basketweave: cells two cuts deep, round cuts and radial cuts taking turns\n// like the over and under of a weave.\nfunction basket(P, p, r0, r1, lobes) {\n  const R = P.R[p];\n  const T = P.T[p];\n  const cellR = 2 * PITCH;\n  const i = Math.floor((R - r0) / cellR);\n  const cells = lobes * 2;\n  const j = Math.floor((T + 1) * cells);\n  if ((i + j) & 1) {\n    const m = (cells * 2.5) | 0;\n    const q = m * T;\n    const gx = m * P.tx[p];\n    const gy = m * P.ty[p];\n    const g = Math.sqrt(gx * gx + gy * gy) + 1e-6;\n    cut((q - Math.round(q)) / g, gx, gy, g, PITCH);\n  } else {\n    const q = (R - r0) / PITCH - 0.5;\n    const g = Math.sqrt(P.rx[p] * P.rx[p] + P.ry[p] * P.ry[p]) + 1e-6;\n    cut(((q - Math.round(q)) * PITCH) / g, P.rx[p], P.ry[p], g, PITCH);\n  }\n}\n\n// Clous de Paris: two sets of straight cuts crossing at right angles, set\n// diagonal on the plate, leave a field of little square pyramids. Each face\n// of a pyramid leans towards the cut beside it.\nfunction clous(x, y, size) {\n  const X = x - CX;\n  const Y = y - CY;\n  const q1 = (X + Y) / (size * Math.SQRT2);\n  const q2 = (X - Y) / (size * Math.SQRT2);\n  const d1 = (q1 - Math.round(q1)) * size;\n  const d2 = (q2 - Math.round(q2)) * size;\n  const one = Math.abs(d1) \u003c Math.abs(d2);\n  const d = one ? d1 : d2;\n  cut(d, 1, one ? 1 : -1, Math.SQRT2, size);\n  KIND = BOSS;\n  // The face leans down towards the cut it slopes into.\n  if (d > 0) {\n    GX = -GX;\n    GY = -GY;\n  }\n}\n\n// The straight-line engine fills the corners: the work slides past the\n// cutter instead of turning, so the cuts run straight across the plate,\n// rocked up and down by the same rosette.\nfunction straight(x, y, c, lobes, phasing, rot) {\n  const X = x - CX;\n  const Y = y - CY;\n  const f = (c.waves * lobes) / 512;\n  const slope = c.amp * TAU * f;\n  const kc = Math.round(Y / PITCH);\n  const reach = Math.ceil(c.amp / PITCH) + 1;\n  let best = 1e9;\n  let bd = 0;\n  let bx = 0;\n  let bg = 1;\n  for (let k = kc - reach; k \u003c= kc + reach; k++) {\n    const u = f * X + (c.step + phasing) * k + rot;\n    const d = Y - PITCH * k - c.amp * sinT(u);\n    const gx = -slope * cosT(u);\n    const g2 = gx * gx + 1;\n    const q = (d * d) / g2;\n    if (q \u003c best) {\n      best = q;\n      bd = d;\n      bx = gx;\n      bg = g2;\n    }\n  }\n  const g = Math.sqrt(bg);\n  cut(bd / g, bx, 1, g, PITCH);\n}\n\nfunction surface(P, p, x, y, plate) {\n  const R = P.R[p];\n  if (R > RIM + 1) return straight(x, y, plate.corner, P.lobes, P.phasing, P.drift);\n  const zones = plate.zones;\n  let r0 = 0;\n  for (let i = 0; i \u003c zones.length; i += 2) {\n    const r1 = zones[i + 1];\n    if (R \u003c r1 || i === zones.length - 2) {\n      const kind = zones[i];\n      // Neighbouring bands drift opposite ways.\n      const rot = i & 4 ? -P.drift : P.drift;\n      if (kind === WAVE) return rose(P, p, r0, r1, P.lobes, 3, P.phasing, rot);\n      if (kind === BARLEY) return rose(P, p, r0, r1, P.lobes, 2.2, 0.5 + P.phasing, rot);\n      if (kind === RAYS) return rays(P, p, r0, r1, P.phasing);\n      if (kind === BASKET) return basket(P, p, r0, r1, P.lobes);\n      if (kind === CLOUS) return clous(x, y, 4);\n      return polish();\n    }\n    r0 = r1;\n  }\n}\n\nconst METALS = [\n  [0.97, 0.98, 1.0],\n  [1.0, 0.93, 0.78],\n  [1.0, 0.8, 0.42],\n  [1.0, 0.68, 0.56],\n];\n\n// The land between grooves, a groove in shadow, and how much more a groove\n// gives back when it faces the lamp.\nconst LAND = 0.64;\nconst GROOVE = 0.12;\nconst GLINT = 1.3;\n\n// The cutter's point, white hot where it bites, as it runs round the front.\nfunction drawCutter(display, P) {\n  const f = P.front;\n  if (f \u003c E + 1) return;\n  const a = P.t * TAU * 2;\n  const cx = CX + (f - E) * Math.cos(a);\n  const cy = CY + (f + E) * Math.sin(a);\n  for (let j = -1; j \u003c= 1; j++) {\n    for (let i = -1; i \u003c= 1; i++) {\n      const x = Math.round(cx) + i;\n      const y = Math.round(cy) + j;\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const v = i === 0 && j === 0 ? 255 : 200;\n      display.setPixel(x, y, v, v, i === 0 && j === 0 ? 240 : 150);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const mu = P.metal * (METALS.length - 1);\n  const mi = Math.min(METALS.length - 2, Math.floor(mu));\n  const mf = mu - mi;\n  const mr = METALS[mi][0] + (METALS[mi + 1][0] - METALS[mi][0]) * mf;\n  const mg = METALS[mi][1] + (METALS[mi + 1][1] - METALS[mi][1]) * mf;\n  const mb = METALS[mi][2] + (METALS[mi + 1][2] - METALS[mi][2]) * mf;\n  // The lamp circles the plate on a tall ellipse, 46 LEDs out from the\n  // middle at the sides and 72 at the ends, just off the panel.\n  const LX = CX + 46 * Math.cos(P.lampA);\n  const LY = CY + 72 * Math.sin(P.lampA);\n  const cur = PLATES[P.plate];\n  const old = PLATES[P.old];\n  const front = P.front;\n  const all = P.frame === 0;\n  const third = P.frame % 3;\n  P.frame++;\n  for (let y = all ? 0 : third; y \u003c H; y += all ? 1 : 3) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      surface(P, p, x, y, front >= 0 && P.R[p] \u003c front ? old : cur);\n      P.kind[p] = KIND;\n      P.gx[p] = GX;\n      P.gy[p] = GY;\n      P.cov[p] = COV;\n    }\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const dx = LX - x;\n      const dy = LY - y;\n      const dd = dx * dx + dy * dy;\n      const id = 1 / Math.sqrt(dd + 1);\n      const fall = 1 / (1 + dd * 0.00016);\n      const kind = P.kind[p];\n      const cov = P.cov[p];\n      // Two lights: the cool room, and the warm lamp.\n      let room;\n      let lamp;\n      if (kind === CUT) {\n        // A groove throws the lamp back when it runs across the lamp's\n        // direction: the streak every engine-turned dial has, running from\n        // the lamp over the cuts that face it.\n        let a = (P.gx[p] * dx + P.gy[p] * dy) * id;\n        a *= a;\n        const g8 = a * a * a * a;\n        // The window above lights the land between grooves that run across\n        // the plate a little more than the land between grooves that run up it.\n        const gy = P.gy[p];\n        room = LAND * (0.86 + 0.28 * gy * gy) * (1 - cov) + GROOVE * cov;\n        lamp = fall * (0.5 * a * (1 - cov) + GLINT * g8 * cov);\n      } else if (kind === BOSS) {\n        const a = (P.gx[p] * dx + P.gy[p] * dy) * id;\n        const lit = a > 0 ? a * a : 0;\n        room = (0.55 - 0.2 * P.gy[p]) * (1 - cov) + GROOVE * cov;\n        lamp = fall * 0.8 * lit * (1 - cov);\n      } else {\n        // Polished: bright where it shows the window, brighter by the lamp.\n        room = 0.8;\n        lamp = 0.5 / (1 + dd * 0.0005);\n      }\n      let r = (room * 0.83 + lamp) * mr;\n      let g = (room * 0.91 + lamp * 0.85) * mg;\n      let b = (room * 1.0 + lamp * 0.6) * mb;\n      if (front >= 0) {\n        // Just behind the cutter the metal is fresh and bright, and it dulls\n        // over the next four LEDs.\n        const e = P.R[p] - front;\n        if (e > -0.6 && e \u003c 4) {\n          const glow = e \u003c 0.6 ? 0.9 : 0.45 * (1 - (e - 0.6) / 3.4);\n          r += glow;\n          g += glow * 0.94;\n          b += glow * 0.82;\n        }\n      }\n      display.setPixel(x, y, Math.min(255, r * 255), Math.min(255, g * 255), Math.min(255, b * 255));\n    }\n  }\n  if (front >= 0) drawCutter(display, P);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Metal=0..1, Light=0..4, Lobes=12..36, Phasing=0..0.5","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Metal","min":0,"max":1,"about":"Silver at 0, then champagne, yellow gold and rose gold at the far end."},{"name":"Light","min":0,"max":4,"about":"How fast the lamp travels round the plate: once in ten seconds at 2, in five at 4; at 0 it stands still and only the rosettes drift."},{"name":"Lobes","min":12,"max":36,"about":"Bosses on the rosette cam, 12 to 36: the waves, the barleycorn grains, the basketweave cells and the corner waves all grow finer."},{"name":"Phasing","min":0,"max":0.5,"about":"How far the rosette is turned between one cut and the next, in lobes: 0 nests the waves, a little twists them into flames, 0.5 trades waves for barleycorn."}],"start":[0,2,12,0.06],"measures":{"motion":0.3271,"detail":0.2382,"edges":0.6848,"complexity":2.494,"coverage":1,"colour":0.0828,"drift":0.1447},"knobResponse":[0.1324,0.1841,0.2378,0.2082]},{"slug":"halftone","title":"Halftone","family":"print","round":2,"note":"떠도는 등불 넷이 비추는 저녁 하늘을 잉크마다 각도가 다른 망점으로 찍어요. 점은 농도만큼 자라고 줄며, K1 이 CMY, 리소, 벤데이, 신문 잉크를 골라요.","idea":"A soft picture of drifting lights is printed the way a press prints a photograph, one screen of hard dots per ink, each screen at its own angle, so the dots grow and shrink with the tone and the inks lock into rosettes.","buttons":"K1 tap knocks the plates out of register, and they settle back.","code":"// ===== Patternflow pattern =====\n// Title:   Halftone\n// Family:  print\n// Idea:    A soft picture of drifting lights is printed the way a press prints a photograph, one screen of hard dots per ink, each screen at its own angle, so the dots grow and shrink with the tone and the inks lock into rosettes.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Inks=0..3, Speed=0.1..5, Screen=8..13, Turn=0..30\n//\n// Knob 1: Inks. The ink set, in four steps: process cyan, magenta and yellow; riso blue and pink; Ben-Day blue, red and yellow; black on newsprint.\n// Knob 2: Speed. How fast the lights drift under the screens.\n// Knob 3: Screen. How many dots fit across the 64 LEDs, from 8 fat poster dots to 13 fine ones.\n// Knob 4: Turn. Turns the screens off the printer's rosette towards one shared angle, until at 30 every ink lands dot on dot.\n// Buttons: K1 tap knocks the plates out of register, and they settle back.\n\nconst W = 64;\nconst H = 128;\n\n// Each set is a paper colour and its inks. An ink is its colour, the part of\n// the picture it prints (0 cyan, 1 magenta, 2 yellow, 3 grey, 4 everything\n// warm, so riso pink carries the sun too) and its screen angle in degrees\n// away from 45, the angle the eye notices least. Paper stays well under\n// full white, since it covers most of the panel.\nconst SETS = [\n  {\n    paper: [200, 192, 172],\n    inks: [\n      [[0, 158, 224], 0, -30],\n      [[236, 0, 140], 1, 30],\n      [[255, 226, 0], 2, 45],\n    ],\n  },\n  {\n    paper: [200, 192, 172],\n    inks: [\n      [[0, 120, 191], 0, -30],\n      [[255, 72, 176], 4, 30],\n    ],\n  },\n  {\n    paper: [204, 196, 176],\n    inks: [\n      [[20, 70, 200], 0, -30],\n      [[226, 30, 38], 1, 30],\n      [[255, 214, 0], 2, 45],\n    ],\n  },\n  {\n    paper: [184, 182, 168],\n    inks: [[[20, 20, 24], 3, 0]],\n  },\n];\n\n// The picture is a dusk sky: bare paper at the top, a magenta glow low\n// down where the cyan of the deep sky comes up to meet it, so two screens\n// share that band and have to agree. Four lamps wander over it on their own\n// loops. Radius in LEDs; how much cyan, magenta and yellow each asks for;\n// the middle and reach of its loop down the panel, as shares of the height.\n// The last one is plain light, where the dots shrink away to bare paper.\nconst LAMPS = [\n  [26, 0.0, 0.2, 0.8, 0.26, 0.16],\n  [22, 0.0, 0.8, 0.1, 0.2, 0.15],\n  [18, 0.75, 0.8, 0.1, 0.82, 0.1],\n  [22, 0.0, 0.0, 0.0, 0.68, 0.22],\n];\n\nexport function setup(params) {\n  const p = params;\n  p.tone = new Float32Array(W * H * 5);\n  p.lx = new Float32Array(LAMPS.length);\n  p.ly = new Float32Array(LAMPS.length);\n  p.t = 0;\n  p.slip = 0;\n  p.slipX = new Float32Array(3);\n  p.slipY = new Float32Array(3);\n  p.wave = new Float32Array(W);\n  p.cosA = new Float32Array(3);\n  p.sinA = new Float32Array(3);\n  p.u = new Float32Array(3);\n  p.v = new Float32Array(3);\n  p.ink = new Float32Array(9);\n  p.chan = new Uint8Array(3);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  p.set = SETS[Math.max(0, Math.min(SETS.length - 1, Math.round(k[0])))];\n  p.t += dt * k[1] * 0.5;\n  p.pitch = W / k[2];\n  p.turn = Math.max(0, Math.min(1, k[3] / 30));\n  if (input.btnPressed && input.btnPressed[0]) {\n    p.slip = 1;\n    for (let i = 0; i \u003c 3; i++) {\n      // Each plate slides its own way, six LEDs at the moment of the tap.\n      const a = Math.random() * Math.PI * 2;\n      p.slipX[i] = Math.cos(a);\n      p.slipY[i] = Math.sin(a);\n    }\n  }\n  p.slip = Math.max(0, p.slip - dt * 0.4);\n\n  const t = p.t;\n  for (let i = 0; i \u003c LAMPS.length; i++) {\n    const o = i * 2.1;\n    p.lx[i] = W / 2 + Math.sin(t * (0.37 + i * 0.11) + o) * W * 0.38;\n    p.ly[i] = H * LAMPS[i][4] + Math.sin(t * (0.23 + i * 0.07) + o * 1.7) * H * LAMPS[i][5];\n  }\n  // The bands sway a little, so the sky's dots breathe too.\n  const lift = 0.05 * Math.sin(t * 0.31);\n  for (let x = 0; x \u003c W; x++) p.wave[x] = 0.07 * Math.sin(x * 0.07 + t * 0.8) + lift;\n  const tone = p.tone;\n  for (let y = 0; y \u003c H; y++) {\n    const g = (y + 0.5) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const sway = g + p.wave[x];\n      const e = Math.max(0, Math.min(1, (sway - 0.3) / 0.7));\n      const glow = 1 - ((sway - 0.55) * (sway - 0.55)) / 0.04;\n      let c = 0.88 * e * e * (3 - 2 * e);\n      let m = glow > 0 ? 0.45 * glow * glow : 0;\n      let yl = 0;\n      for (let i = 0; i \u003c LAMPS.length; i++) {\n        const dx = x - p.lx[i];\n        const dy = y - p.ly[i];\n        const R = LAMPS[i][0];\n        const q = 1 - (dx * dx + dy * dy) / (R * R);\n        if (q \u003c= 0) continue;\n        const w = q * q;\n        c += (LAMPS[i][1] - c) * w;\n        m += (LAMPS[i][2] - m) * w;\n        yl += (LAMPS[i][3] - yl) * w;\n      }\n      const o = (y * W + x) * 5;\n      tone[o] = c;\n      tone[o + 1] = m;\n      tone[o + 2] = yl;\n      tone[o + 3] = Math.min(1, 0.55 * c + 0.55 * m + 0.35 * yl);\n      tone[o + 4] = Math.min(1, m + 0.6 * yl);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const set = p.set;\n  const inks = set.inks;\n  const n = inks.length;\n  const pitch = p.pitch;\n  const tone = p.tone;\n  const turn = p.turn;\n  // Turned all the way, every screen lands on 30 degrees, dot on dot.\n  for (let i = 0; i \u003c n; i++) {\n    const a = ((45 + inks[i][2] * (1 - turn) - 15 * turn) * Math.PI) / 180;\n    p.cosA[i] = Math.cos(a) / pitch;\n    p.sinA[i] = Math.sin(a) / pitch;\n  }\n  const slip = p.slip * p.slip * 6;\n  const s2 = pitch * pitch;\n  const cosA = p.cosA;\n  const sinA = p.sinA;\n  const ink = p.ink;\n  const chan = p.chan;\n  const U = p.u;\n  const V = p.v;\n  for (let i = 0; i \u003c n; i++) {\n    ink[i * 3] = inks[i][0][0] / 255;\n    ink[i * 3 + 1] = inks[i][0][1] / 255;\n    ink[i * 3 + 2] = inks[i][0][2] / 255;\n    chan[i] = inks[i][1];\n  }\n  const pr = set.paper[0];\n  const pg = set.paper[1];\n  const pb = set.paper[2];\n  for (let y = 0; y \u003c H; y++) {\n    // Each screen's grid position at the start of the row; it then steps by\n    // the same amount per LED.\n    for (let i = 0; i \u003c n; i++) {\n      const px = 0.5 - W / 2 + p.slipX[i] * slip;\n      const py = y + 0.5 - H / 2 + p.slipY[i] * slip;\n      U[i] = px * cosA[i] + py * sinA[i];\n      V[i] = py * cosA[i] - px * sinA[i];\n    }\n    for (let x = 0; x \u003c W; x++) {\n      let r = pr;\n      let g = pg;\n      let b = pb;\n      for (let i = 0; i \u003c n; i++) {\n        const ca = cosA[i];\n        const sa = sinA[i];\n        // In the screen's own grid each dot sits on a whole number.\n        const u = U[i];\n        const v = V[i];\n        U[i] = u + ca;\n        V[i] = v - sa;\n        const cu = Math.floor(u + 0.5);\n        const cv = Math.floor(v + 0.5);\n        const fu = u - cu;\n        const fv = v - cv;\n        // Back out to the panel to read the picture at the dot's centre, so\n        // every dot is round whatever the picture does across it.\n        let sx = Math.floor((cu * ca - cv * sa) * s2 + W / 2);\n        let sy = Math.floor((cu * sa + cv * ca) * s2 + H / 2);\n        sx = sx \u003c 0 ? 0 : sx >= W ? W - 1 : sx;\n        sy = sy \u003c 0 ? 0 : sy >= H ? H - 1 : sy;\n        let c = tone[(sy * W + sx) * 5 + chan[i]];\n        // A highlight dot under about two LEDs across drops out, as fine dots\n        // do on press; a single lit LED would only read as grit.\n        if (c * s2 \u003c 3.8) continue;\n        if (c > 1) c = 1;\n        // Dot area follows the tone; past where dots touch, the corners fill in.\n        const r2 = c \u003c 0.785 ? c / Math.PI : 0.25 + (c - 0.785) * 1.163;\n        if (fu * fu + fv * fv \u003c r2) {\n          r *= ink[i * 3];\n          g *= ink[i * 3 + 1];\n          b *= ink[i * 3 + 2];\n        }\n      }\n      display.setPixel(x, y, r, g, b);\n    }\n  }\n}\n","layer":{"id":"layer-halftone","type":"code","name":"halftone","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Halftone\n// Family:  print\n// Idea:    A soft picture of drifting lights is printed the way a press prints a photograph, one screen of hard dots per ink, each screen at its own angle, so the dots grow and shrink with the tone and the inks lock into rosettes.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Inks=0..3, Speed=0.1..5, Screen=8..13, Turn=0..30\n//\n// Knob 1: Inks. The ink set, in four steps: process cyan, magenta and yellow; riso blue and pink; Ben-Day blue, red and yellow; black on newsprint.\n// Knob 2: Speed. How fast the lights drift under the screens.\n// Knob 3: Screen. How many dots fit across the 64 LEDs, from 8 fat poster dots to 13 fine ones.\n// Knob 4: Turn. Turns the screens off the printer's rosette towards one shared angle, until at 30 every ink lands dot on dot.\n// Buttons: K1 tap knocks the plates out of register, and they settle back.\n\nconst W = 64;\nconst H = 128;\n\n// Each set is a paper colour and its inks. An ink is its colour, the part of\n// the picture it prints (0 cyan, 1 magenta, 2 yellow, 3 grey, 4 everything\n// warm, so riso pink carries the sun too) and its screen angle in degrees\n// away from 45, the angle the eye notices least. Paper stays well under\n// full white, since it covers most of the panel.\nconst SETS = [\n  {\n    paper: [200, 192, 172],\n    inks: [\n      [[0, 158, 224], 0, -30],\n      [[236, 0, 140], 1, 30],\n      [[255, 226, 0], 2, 45],\n    ],\n  },\n  {\n    paper: [200, 192, 172],\n    inks: [\n      [[0, 120, 191], 0, -30],\n      [[255, 72, 176], 4, 30],\n    ],\n  },\n  {\n    paper: [204, 196, 176],\n    inks: [\n      [[20, 70, 200], 0, -30],\n      [[226, 30, 38], 1, 30],\n      [[255, 214, 0], 2, 45],\n    ],\n  },\n  {\n    paper: [184, 182, 168],\n    inks: [[[20, 20, 24], 3, 0]],\n  },\n];\n\n// The picture is a dusk sky: bare paper at the top, a magenta glow low\n// down where the cyan of the deep sky comes up to meet it, so two screens\n// share that band and have to agree. Four lamps wander over it on their own\n// loops. Radius in LEDs; how much cyan, magenta and yellow each asks for;\n// the middle and reach of its loop down the panel, as shares of the height.\n// The last one is plain light, where the dots shrink away to bare paper.\nconst LAMPS = [\n  [26, 0.0, 0.2, 0.8, 0.26, 0.16],\n  [22, 0.0, 0.8, 0.1, 0.2, 0.15],\n  [18, 0.75, 0.8, 0.1, 0.82, 0.1],\n  [22, 0.0, 0.0, 0.0, 0.68, 0.22],\n];\n\nexport function setup(params) {\n  const p = params;\n  p.tone = new Float32Array(W * H * 5);\n  p.lx = new Float32Array(LAMPS.length);\n  p.ly = new Float32Array(LAMPS.length);\n  p.t = 0;\n  p.slip = 0;\n  p.slipX = new Float32Array(3);\n  p.slipY = new Float32Array(3);\n  p.wave = new Float32Array(W);\n  p.cosA = new Float32Array(3);\n  p.sinA = new Float32Array(3);\n  p.u = new Float32Array(3);\n  p.v = new Float32Array(3);\n  p.ink = new Float32Array(9);\n  p.chan = new Uint8Array(3);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  p.set = SETS[Math.max(0, Math.min(SETS.length - 1, Math.round(k[0])))];\n  p.t += dt * k[1] * 0.5;\n  p.pitch = W / k[2];\n  p.turn = Math.max(0, Math.min(1, k[3] / 30));\n  if (input.btnPressed && input.btnPressed[0]) {\n    p.slip = 1;\n    for (let i = 0; i \u003c 3; i++) {\n      // Each plate slides its own way, six LEDs at the moment of the tap.\n      const a = Math.random() * Math.PI * 2;\n      p.slipX[i] = Math.cos(a);\n      p.slipY[i] = Math.sin(a);\n    }\n  }\n  p.slip = Math.max(0, p.slip - dt * 0.4);\n\n  const t = p.t;\n  for (let i = 0; i \u003c LAMPS.length; i++) {\n    const o = i * 2.1;\n    p.lx[i] = W / 2 + Math.sin(t * (0.37 + i * 0.11) + o) * W * 0.38;\n    p.ly[i] = H * LAMPS[i][4] + Math.sin(t * (0.23 + i * 0.07) + o * 1.7) * H * LAMPS[i][5];\n  }\n  // The bands sway a little, so the sky's dots breathe too.\n  const lift = 0.05 * Math.sin(t * 0.31);\n  for (let x = 0; x \u003c W; x++) p.wave[x] = 0.07 * Math.sin(x * 0.07 + t * 0.8) + lift;\n  const tone = p.tone;\n  for (let y = 0; y \u003c H; y++) {\n    const g = (y + 0.5) / H;\n    for (let x = 0; x \u003c W; x++) {\n      const sway = g + p.wave[x];\n      const e = Math.max(0, Math.min(1, (sway - 0.3) / 0.7));\n      const glow = 1 - ((sway - 0.55) * (sway - 0.55)) / 0.04;\n      let c = 0.88 * e * e * (3 - 2 * e);\n      let m = glow > 0 ? 0.45 * glow * glow : 0;\n      let yl = 0;\n      for (let i = 0; i \u003c LAMPS.length; i++) {\n        const dx = x - p.lx[i];\n        const dy = y - p.ly[i];\n        const R = LAMPS[i][0];\n        const q = 1 - (dx * dx + dy * dy) / (R * R);\n        if (q \u003c= 0) continue;\n        const w = q * q;\n        c += (LAMPS[i][1] - c) * w;\n        m += (LAMPS[i][2] - m) * w;\n        yl += (LAMPS[i][3] - yl) * w;\n      }\n      const o = (y * W + x) * 5;\n      tone[o] = c;\n      tone[o + 1] = m;\n      tone[o + 2] = yl;\n      tone[o + 3] = Math.min(1, 0.55 * c + 0.55 * m + 0.35 * yl);\n      tone[o + 4] = Math.min(1, m + 0.6 * yl);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const set = p.set;\n  const inks = set.inks;\n  const n = inks.length;\n  const pitch = p.pitch;\n  const tone = p.tone;\n  const turn = p.turn;\n  // Turned all the way, every screen lands on 30 degrees, dot on dot.\n  for (let i = 0; i \u003c n; i++) {\n    const a = ((45 + inks[i][2] * (1 - turn) - 15 * turn) * Math.PI) / 180;\n    p.cosA[i] = Math.cos(a) / pitch;\n    p.sinA[i] = Math.sin(a) / pitch;\n  }\n  const slip = p.slip * p.slip * 6;\n  const s2 = pitch * pitch;\n  const cosA = p.cosA;\n  const sinA = p.sinA;\n  const ink = p.ink;\n  const chan = p.chan;\n  const U = p.u;\n  const V = p.v;\n  for (let i = 0; i \u003c n; i++) {\n    ink[i * 3] = inks[i][0][0] / 255;\n    ink[i * 3 + 1] = inks[i][0][1] / 255;\n    ink[i * 3 + 2] = inks[i][0][2] / 255;\n    chan[i] = inks[i][1];\n  }\n  const pr = set.paper[0];\n  const pg = set.paper[1];\n  const pb = set.paper[2];\n  for (let y = 0; y \u003c H; y++) {\n    // Each screen's grid position at the start of the row; it then steps by\n    // the same amount per LED.\n    for (let i = 0; i \u003c n; i++) {\n      const px = 0.5 - W / 2 + p.slipX[i] * slip;\n      const py = y + 0.5 - H / 2 + p.slipY[i] * slip;\n      U[i] = px * cosA[i] + py * sinA[i];\n      V[i] = py * cosA[i] - px * sinA[i];\n    }\n    for (let x = 0; x \u003c W; x++) {\n      let r = pr;\n      let g = pg;\n      let b = pb;\n      for (let i = 0; i \u003c n; i++) {\n        const ca = cosA[i];\n        const sa = sinA[i];\n        // In the screen's own grid each dot sits on a whole number.\n        const u = U[i];\n        const v = V[i];\n        U[i] = u + ca;\n        V[i] = v - sa;\n        const cu = Math.floor(u + 0.5);\n        const cv = Math.floor(v + 0.5);\n        const fu = u - cu;\n        const fv = v - cv;\n        // Back out to the panel to read the picture at the dot's centre, so\n        // every dot is round whatever the picture does across it.\n        let sx = Math.floor((cu * ca - cv * sa) * s2 + W / 2);\n        let sy = Math.floor((cu * sa + cv * ca) * s2 + H / 2);\n        sx = sx \u003c 0 ? 0 : sx >= W ? W - 1 : sx;\n        sy = sy \u003c 0 ? 0 : sy >= H ? H - 1 : sy;\n        let c = tone[(sy * W + sx) * 5 + chan[i]];\n        // A highlight dot under about two LEDs across drops out, as fine dots\n        // do on press; a single lit LED would only read as grit.\n        if (c * s2 \u003c 3.8) continue;\n        if (c > 1) c = 1;\n        // Dot area follows the tone; past where dots touch, the corners fill in.\n        const r2 = c \u003c 0.785 ? c / Math.PI : 0.25 + (c - 0.785) * 1.163;\n        if (fu * fu + fv * fv \u003c r2) {\n          r *= ink[i * 3];\n          g *= ink[i * 3 + 1];\n          b *= ink[i * 3 + 2];\n        }\n      }\n      display.setPixel(x, y, r, g, b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Inks=0..3, Speed=0.1..5, Screen=8..13, Turn=0..30","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Inks","min":0,"max":3,"about":"The ink set, in four steps: process cyan, magenta and yellow; riso blue and pink; Ben-Day blue, red and yellow; black on newsprint."},{"name":"Speed","min":0.1,"max":5,"about":"How fast the lights drift under the screens."},{"name":"Screen","min":8,"max":13,"about":"How many dots fit across the 64 LEDs, from 8 fat poster dots to 13 fine ones."},{"name":"Turn","min":0,"max":30,"about":"Turns the screens off the printer's rosette towards one shared angle, until at 30 every ink lands dot on dot."}],"start":[0,2,8,0.06],"measures":{"motion":0.0294,"detail":0.0277,"edges":0.6406,"complexity":0.1753,"coverage":0.9983,"colour":0.4355,"drift":0.0403},"knobResponse":[0.2427,0.1303,0.1431,0.1473]},{"slug":"hanging-scroll","title":"Hanging Scroll","family":"paper","round":23,"note":"어두운 도코노마 벽의 못에 족자가 걸리고, 아래 굴대가 내려가며 비단 표구 속 상아빛 종이에 그린 먹 산수를 한 줄씩 드러내요. 안개 낀 봉우리 아래 소나무와 폭포, 초가와 쪽배가 있고 붉은 낙관이 찍혀 있어요. 외풍에 조금 흔들리다 아래부터 말려 올라가면 바람 맞는 대나무가 내려오고, 달 아래 홍매와 파도 위 학이 뒤를 이어요.","idea":"A hanging scroll in a dim alcove lets its weighted roller down from the upper rod to show an ink painting on ivory paper in silk borders row by row, hangs swaying in a draft, then rolls up from the bottom so the next painting can come down.","buttons":"K1 tap rolls the scroll up now and unrolls the next painting.","code":"// ===== Patternflow pattern =====\n// Title:   Hanging Scroll\n// Family:  paper\n// Idea:    A hanging scroll in a dim alcove lets its weighted roller down from the upper rod to show an ink painting on ivory paper in silk borders row by row, hangs swaying in a draft, then rolls up from the bottom so the next painting can come down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after Japanese kakemono hanging scrolls and Song dynasty ink landscapes\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Painting=0..3, Ink=0..1\n//\n// Knob 1: Lamp. The light on the scroll: a warm candle low on the left turns the paper ivory at 0, and towards 1 it gives way to cool moonlight from a window on the right.\n// Knob 2: Speed. How fast the scroll moves: at 2 the roller takes under three seconds to come down, a painting hangs for seven and the draft swings it about once in two and a half.\n// Knob 3: Painting. Which painting unrolls next: misty mountains with a waterfall at 0, bamboo in wind at 1, a plum branch under the moon at 2, cranes over waves at 3. Turning it rolls the scroll up and lets that one down.\n// Knob 4: Ink. How wet the ink was: crisp dry-brush lines with broken edges at 0, washes that bled out into the paper and strokes feathered at their edges at 1.\n// Buttons: K1 tap rolls the scroll up now and unrolls the next painting.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The scroll hangs from a nail at row 3. Its upper rod fills rows 15 and 16,\n// and the mounting runs 96 rows down from row 17 to the roller, 44 columns\n// wide from column 10. The painting sits inside the mounting, 36 by 74.\nconst [NAIL, TOP, LEN, MX, MW] = [3, 17, 96, 10, 44];\nconst [PX, PY, PW, PH] = [4, 14, 36, 74];\nconst PN = PW * PH;\n// At Speed 2, in seconds: unroll, hang, roll up, rest rolled.\nconst [TU, TS, TR, TZ] = [2.6, 7, 2, 0.5];\nconst [PAPER, SILK, GOLD, BACK] = [[0.95, 0.91, 0.8], [0.2, 0.31, 0.3], [0.8, 0.61, 0.27], [0.6, 0.58, 0.5]];\nconst [WOOD, BONE, BRASS, CORD] = [[0.4, 0.27, 0.16], [0.86, 0.8, 0.64], [0.85, 0.66, 0.32], [0.5, 0.3, 0.45]];\n// Seal vermilion, plum blossom and the red sun.\nconst PIG = [[0.82, 0.14, 0.1], [0.9, 0.3, 0.42], [0.93, 0.3, 0.12]];\nconst CANDLE = [1, 0.9, 0.72];\nconst MOON = [0.56, 0.67, 0.92];\nconst { min, max, floor, ceil, round, sqrt, sin, cos, exp, abs, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\n// A fixed hash and a value noise made from it, so a painting comes out the\n// same every time it unrolls.\nconst hash = (a, b) => {\n  let h = Math.imul((a | 0) * 374761393 + (b | 0) * 668265263, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nconst vn = (x, y) => {\n  const i = floor(x);\n  const j = floor(y);\n  const [u, v] = [sm(0, 1, x - i), sm(0, 1, y - j)];\n  const [a, b, c] = [hash(i, j), hash(i + 1, j), hash(i, j + 1)];\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(i + 1, j + 1)) * u * v;\n};\n\n// The painting being made: wash and stroke densities, pigment cover and which\n// pigment. RID is a ridge row per column for fill(), ROC how solid it is there.\nlet Wm, Sm, Am, Pg;\nlet rs = 1;\nconst rnd = () => (rs = (rs * 16807) % 2147483647) / 2147483647;\nconst RID = new Float32Array(PW);\nconst ROC = new Float32Array(PW);\n\n// A brush stroke through points [x, y, half width, ...]. dry parts the hairs\n// into streaks along the stroke, more of them toward its end.\nfunction brush(p, dens, dry = 0) {\n  const n = p.length / 3 - 1;\n  for (let k = 0; k \u003c n; k++) {\n    const [ax, ay, aw, bx, by, bw] = p.slice(k * 3, k * 3 + 6);\n    const dx = bx - ax;\n    const dy = by - ay;\n    const L2 = dx * dx + dy * dy || 1e-6;\n    const L = sqrt(L2);\n    const m = max(aw, bw) + 1;\n    for (let y = max(0, floor(min(ay, by) - m)); y \u003c= min(PH - 1, floor(max(ay, by) + m)); y++)\n      for (let x = max(0, floor(min(ax, bx) - m)); x \u003c= min(PW - 1, floor(max(ax, bx) + m)); x++) {\n        const qx = x + 0.5 - ax;\n        const qy = y + 0.5 - ay;\n        const t = cl((qx * dx + qy * dy) / L2, 0, 1);\n        let a = cl(aw + (bw - aw) * t + 0.5 - hypot(qx - dx * t, qy - dy * t), 0, 1);\n        if (a \u003c= 0) continue;\n        if (dry) {\n          const g = (dry * (k + t)) / n;\n          const c = (qx * dy - qy * dx) / L;\n          a *= 0.15 + 0.85 * sm(g - 0.1, g + 0.1, 0.55 * hash(floor(c * 1.8) + 99, floor(t * L * 0.5) + k * 31) + 0.45 * vn(x * 0.9, y * 0.9));\n        }\n        const i = y * PW + x;\n        // A negative density leaves the paper bare instead.\n        if (dens \u003c 0) Wm[i] *= 1 + dens * a;\n        else Sm[i] = max(Sm[i], a * dens);\n      }\n  }\n}\n\n// A round patch of pigment, which leaves no wash under it.\nfunction disc(cx, cy, r, pg, a0 = 0.92) {\n  for (let y = max(0, floor(cy - r - 1)); y \u003c min(PH, cy + r + 1); y++)\n    for (let x = max(0, floor(cx - r - 1)); x \u003c min(PW, cx + r + 1); x++) {\n      const a = cl(r + 0.5 - hypot(x + 0.5 - cx, y + 0.5 - cy), 0, 1);\n      const i = y * PW + x;\n      if (a > Am[i]) {\n        Am[i] = a * a0;\n        Pg[i] = pg;\n      }\n      Wm[i] *= 1 - a;\n    }\n}\n\n// Fill below the ridge in RID: the wash is darkest at the ridge and fades down\n// into mist, and it covers what was painted behind. edge inks the ridge line\n// and cun the short texture strokes under it.\nfunction fill(dens, fade, edge, cun, sd) {\n  for (let x = 0; x \u003c PW; x++) {\n    const r = RID[x];\n    const oc = ROC[x];\n    for (let y = max(0, floor(r)); y \u003c PH; y++) {\n      // The row the ridge crosses is covered only in part.\n      const cv = cl(y + 1 - r, 0, 1) * oc;\n      const d = max(0, y + 0.5 - r);\n      const i = y * PW + x;\n      const o = 0.92 * cl(d / 2 + 0.3, 0, 1) * cv;\n      Wm[i] = min(1, Wm[i] * (1 - o) + dens * exp(-d / fade) * (0.7 + 0.6 * vn(x * 0.5 + sd, y * 0.2)) * cv);\n      Sm[i] *= 1 - o;\n      if (d \u003c 1.5) Sm[i] = max(Sm[i], edge * (1 - d / 1.7) * (0.35 + 0.65 * vn(x * 1.3 + sd, y * 0.5)) * cv);\n      const c = vn(x * 1.2 + sd, y * 0.3);\n      if (c > 0.64) Sm[i] = max(Sm[i], cun * (c - 0.6) * 2.6 * exp(-d / (fade * 0.8)) * oc);\n    }\n  }\n}\n\nfunction mtn(cx, base, hw, ht, dens, fade, edge, cun, sd) {\n  for (let x = 0; x \u003c PW; x++) {\n    const u = abs(x + 0.5 - cx) / hw;\n    RID[x] = u \u003c 1 ? base - ht * (1 - u ** 1.6) * (0.62 + 0.45 * vn(x * 0.28 + sd, sd) + 0.3 * vn(x * 0.8, sd + 5)) : PH;\n    ROC[x] = sm(1, 0.75, u);\n  }\n  fill(dens, fade, edge, cun, sd);\n}\n\n// A pine clinging to a ridge: a crooked trunk and flat layers of needles.\nfunction pine(x, y, h, d) {\n  brush([x, y, 0.45, x + 0.5, y - h * 0.5, 0.35, x - 0.2, y - h, 0.3], d);\n  for (let k = 0; k \u003c 3; k++) {\n    const yy = y - h * (0.42 + 0.26 * k);\n    const w = h * (0.55 - 0.13 * k);\n    brush([x - w, yy + 0.4, 0.45, x + 0.2, yy - 0.3, 0.75, x + w, yy + 0.2, 0.4], d);\n  }\n}\n\n// A column of characters, each a few short strokes in a square cell, and the\n// red seal under it.\nfunction calli(x, y, n) {\n  for (let c = 0; c \u003c n; c++) {\n    const cy = y + c * 4.6;\n    for (let k = 3 + floor(rnd() * 3); k > 0; k--) {\n      const t = rnd() * 4;\n      const a = x + rnd() * 2.6;\n      const b = cy + rnd() * 3;\n      brush(t \u003c 1.6 ? [a - 0.3, b, 0.4, min(x + 3.2, a + 2), b + 0.2, 0.35] : t \u003c 3 ? [a, b - 0.4, 0.4, a + 0.2, min(cy + 3.6, b + 2.2), 0.3] : [a, b, 0.55, a + 0.7, b + 0.7, 0.3], 0.92);\n    }\n  }\n  const sy = floor(y + n * 4.6 + 0.6);\n  const sx = floor(x + 0.2);\n  for (let j = 0; j \u003c 3; j++)\n    for (let i = 0; i \u003c 3; i++) {\n      const k = (sy + j) * PW + sx + i;\n      // Carved lines let the paper show through the red.\n      Am[k] = (i + j) % 2 && hash(sx + i, sy + j) \u003c 0.6 ? 0.45 : 0.95;\n      Pg[k] = 0;\n    }\n}\n\nfunction landscape() {\n  // The far peak towers over the left, a lower one stands behind on the right.\n  mtn(13, 42, 15, 34, 0.32, 10, 0.45, 0.3, 3);\n  mtn(29, 40, 9, 12, 0.26, 7, 0.35, 0.25, 11);\n  mtn(24, 56, 16, 18, 0.5, 8, 0.85, 0.6, 23);\n  for (const x of [15, 18, 21, 31, 34]) pine(x, RID[x] + 1.5, 4 + (x % 3), 0.9);\n  // A waterfall drops from a cleft in the middle ridge into the mist.\n  for (let y = floor(RID[28] + 3); y \u003c 58; y++)\n    for (let x = 25; x \u003c 31; x++) {\n      const i = y * PW + x;\n      const c = abs(x + 0.5 - 28 - 0.4 * sin(y * 0.45));\n      const f = sm(58, 50, y);\n      if (c \u003c 0.9) {\n        Wm[i] *= 1 - 0.9 * f;\n        Sm[i] *= 1 - f;\n      } else if (c \u003c 2.4) Sm[i] = max(Sm[i], (0.75 * f * (2.4 - c)) / 1.5);\n    }\n  mtn(30, 63, 9, 3, 0.3, 2.5, 0.5, 0, 51);\n  // The near bank, with a hut under two pines.\n  mtn(5, 70, 17, 16, 0.72, 6, 1, 0.85, 37);\n  pine(3, RID[3] + 2, 7, 0.95);\n  pine(8, RID[8] + 2, 6, 0.95);\n  const hy = round(RID[15] + 4);\n  for (let j = -4; j \u003c= 1; j++)\n    for (let i = 11; i \u003c= 18; i++) {\n      Wm[(hy + j) * PW + i] *= 0.1;\n      Sm[(hy + j) * PW + i] = 0;\n    }\n  brush([10.5, hy - 2.2, 0.55, 14.5, hy - 4.6, 0.7, 18.5, hy - 2.2, 0.55], 0.97);\n  brush([12, hy - 2, 0.3, 12, hy + 0.6, 0.3], 0.7);\n  brush([17, hy - 2, 0.3, 17, hy + 0.6, 0.3], 0.7);\n  brush([14.5, hy - 1, 0.45, 14.5, hy + 0.6, 0.45], 0.85);\n  // Still water, a boat with its fisherman and his rod.\n  brush([19, 66.5, 0.25, 23, 66.5, 0.2], 0.3);\n  brush([28, 71.5, 0.25, 34, 71.5, 0.2], 0.28);\n  brush([20, 72.5, 0.2, 24, 72.5, 0.2], 0.25);\n  brush([22.5, 68, 0.35, 25, 69, 0.6, 28, 68.9, 0.6, 29.5, 67.7, 0.35], 0.92);\n  brush([26.5, 68, 0.55, 26.6, 66.4, 0.5], 0.9);\n  brush([27, 66.8, 0.25, 31, 63.5, 0.2], 0.6);\n  calli(31.6, 1.5, 4);\n}\n\nfunction bamboo() {\n  // Three stalks lean in the wind, the far one pale.\n  for (const [x0, x1, y1, w, d] of [[6, 11, -2, 1.1, 0.32], [14, 20, -2, 1.7, 0.9], [25, 29, 10, 1.3, 0.72]]) {\n    const n = round((75 - y1) / 10.5);\n    for (let k = 0; k \u003c n; k++) {\n      const ax = mix(x0, x1, k / n);\n      const ay = mix(75, y1, k / n);\n      const bx = mix(x0, x1, (k + 1) / n);\n      const by = mix(75, y1, (k + 1) / n);\n      brush([ax, ay - 0.8, w, bx, by + 0.8, w * 0.9], d, 0.45);\n      brush([bx - w - 0.5, by + 0.2, 0.45, bx + w + 0.5, by - 0.4, 0.45], min(1, d * 1.1));\n    }\n  }\n  // Leaves stream off the twigs to the right.\n  for (const [x, y, n, d, s] of [\n    [12, 8, 4, 0.35, 0.9], [9, 40, 4, 0.35, 0.9], [21, 12, 5, 0.92, 1.2], [20, 34, 5, 0.9, 1.15],\n    [19, 56, 4, 0.85, 1.05], [29, 24, 5, 0.75, 1], [28, 46, 3, 0.75, 0.95],\n  ]) {\n    brush([x - 3.5, y + 2.5, 0.35, x, y, 0.25], d);\n    for (let j = 0; j \u003c n; j++) {\n      const a = 0.35 + (j / (n - 1) - 0.5) * 1.3 + (rnd() - 0.5) * 0.3;\n      const L = (8 + rnd() * 4) * s;\n      const w = (1 + rnd() * 0.3) * s;\n      brush([x, y, 0.25, x + cos(a) * L * 0.3, y + sin(a) * L * 0.3, w, x + cos(a + 0.12) * L, y + sin(a + 0.12) * L, 0.05], d);\n    }\n  }\n  calli(31.4, 42, 5);\n}\n\nfunction plum() {\n  // The sky washed grey round a full moon left bare.\n  for (let y = 0; y \u003c 50; y++)\n    for (let x = 0; x \u003c PW; x++)\n      Wm[y * PW + x] = 0.28 * sm(8, 9.6, hypot(x + 0.5 - 23, y + 0.5 - 17)) * sm(50, 18, y) * (0.75 + 0.5 * vn(x * 0.2, y * 0.15));\n  // An old branch in dry brush, straight young shoots off it, and red blossom.\n  brush([-1, 75, 3, 5, 63, 2.5, 3, 51, 2.1, 10, 41, 1.7, 8, 31, 1.3, 15, 21, 1, 13, 12, 0.6], 0.93, 0.9);\n  brush([5, 61, 1.3, 13, 56, 1, 21, 51, 0.75, 29, 42, 0.45], 0.88, 0.8);\n  for (const t of [[10, 41, 12, 28], [15, 21, 22, 8], [13, 12, 14, 4], [21, 51, 24, 41], [29, 42, 33, 33], [8, 31, 3, 23], [13, 56, 16, 48], [24, 47, 31, 47]])\n    brush([t[0], t[1], 0.45, t[2], t[3], 0.25], 0.85);\n  for (const [x, y, r] of [\n    [12, 30, 1.5], [12.5, 26, 1.3], [17, 16, 1.4], [20, 11, 1.5], [21.5, 7.5, 1.2], [14, 6, 1.3],\n    [22, 44, 1.5], [24, 40.5, 1.2], [31, 37, 1.4], [32.5, 33, 1.2], [5, 25, 1.4], [3, 21.5, 1.2],\n    [15.5, 50, 1.4], [27.5, 47, 1.3], [9, 37.5, 1.5], [17.5, 54, 1.3], [6, 57, 1.6], [11, 16.5, 1.1],\n  ]) {\n    disc(x, y, r, 1);\n    Sm[floor(y) * PW + floor(x)] = 0.6;\n  }\n  calli(31.4, 50, 4);\n}\n\n// A red-crowned crane flying left, wings raised (up 1) or lowered (up -1).\nfunction crane(cx, cy, s, up) {\n  const u = up * s;\n  // The far wing and the near wing are left bare in the grey sky, each with\n  // black flight feathers along its trailing edge.\n  for (const [fx, d] of [[-2.5, -0.55], [4.5, -0.95]]) {\n    const w = [cx, cy - 0.3 * u, 1.9 * s, cx + (fx * 0.4 + 0.6) * s, cy - 5 * u, 1.4 * s, cx + fx * s, cy - 9.5 * u, 0.7 * s];\n    brush(w, d);\n    brush(w.map((v, k) => (k % 3 === 0 ? v + 1.6 * s : k % 3 === 2 ? 0.3 * s : v)), 0.9);\n  }\n  brush([cx - 3 * s, cy, 1.3 * s, cx + 3 * s, cy + 0.3 * s, 1.1 * s], -0.95);\n  // The black neck, a grey bill, the black tail and the trailing legs.\n  brush([cx - 2.6 * s, cy - 0.2 * s, 0.55 * s, cx - 7.8 * s, cy - 1.4 * s, 0.45 * s], 0.95);\n  brush([cx - 8.3 * s, cy - 1.4 * s, 0.3, cx - 10.5 * s, cy - 1 * s, 0.2], 0.5);\n  brush([cx + 2.5 * s, cy - 0.2 * s, 0.8 * s, cx + 4.3 * s, cy + 0.5 * s, 0.4 * s], 0.9);\n  brush([cx + 3 * s, cy + 0.9 * s, 0.3, cx + 9.5 * s, cy + 1.9 * s, 0.25], 0.6);\n  disc(cx - 8 * s, cy - 2 * s, 0.6, 0);\n}\n\nfunction cranes() {\n  for (let y = 0; y \u003c PH; y++) for (let x = 0; x \u003c PW; x++) Wm[y * PW + x] = (0.5 + 0.25 * sm(62, 0, y)) * (0.8 + 0.4 * vn(x * 0.13 + 4, y * 0.09));\n  disc(27, 10, 4.4, 2);\n  crane(19, 30, 1.3, 1);\n  crane(23, 47, 0.95, -1);\n  crane(8, 41, 0.5, 1);\n  // Rows of waves, each crest inked and its trough left pale.\n  for (let b = 0; b \u003c 4; b++) {\n    const y0 = 56 + b * 5.4;\n    const amp = 1.4 + b * 0.8;\n    const f = 0.5 - b * 0.07;\n    for (let x = 0; x \u003c PW; x++) {\n      RID[x] = y0 - amp * (0.5 + 0.5 * sin(x * f + b * 2.1)) ** 3;\n      ROC[x] = 1;\n    }\n    fill(0.42, 2.6, 0.9, 0, b * 13);\n    // A curl of foam breaks off each crest.\n    for (let x0 = (PI / 2 - b * 2.1 + 2 * PI * 3) / f; x0 > -2; x0 -= (2 * PI) / f) {\n      const py = y0 - amp;\n      brush([x0 + 1, py + 0.6, 0.35, x0, py - 0.6, 0.4, x0 - 1.6, py - 0.3, 0.3, x0 - 2.2, py + 0.8, 0.2], 0.85);\n    }\n  }\n  calli(1.6, 2, 4);\n}\n\nconst PAINT = [landscape, bamboo, plum, cranes];\n\n// Each painting is kept twice: as painted with a dry brush, and as it would\n// be had the ink been wet, its washes spread and its strokes bled.\nfunction blur(src, r) {\n  let a = src;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const b = new Float32Array(PN);\n    const c = new Float32Array(PN);\n    for (let y = 0; y \u003c PH; y++)\n      for (let x = 0; x \u003c PW; x++) {\n        let s = 0;\n        for (let k = -r; k \u003c= r; k++) s += a[y * PW + cl(x + k, 0, PW - 1)];\n        b[y * PW + x] = s / (2 * r + 1);\n      }\n    for (let y = 0; y \u003c PH; y++)\n      for (let x = 0; x \u003c PW; x++) {\n        let s = 0;\n        for (let k = -r; k \u003c= r; k++) s += b[cl(y + k, 0, PH - 1) * PW + x];\n        c[y * PW + x] = s / (2 * r + 1);\n      }\n    a = c;\n  }\n  return a;\n}\n\nfunction paint(n) {\n  Wm = new Float32Array(PN);\n  Sm = new Float32Array(PN);\n  Am = new Float32Array(PN);\n  Pg = new Uint8Array(PN);\n  rs = 11 + n * 7;\n  PAINT[n]();\n  const wb = blur(Wm, 2);\n  const sb = blur(Sm, 1);\n  const hb = blur(sb, 2);\n  const wh = blur(wb, 3);\n  const d0 = new Float32Array(PN);\n  const d1 = new Float32Array(PN);\n  for (let i = 0; i \u003c PN; i++) {\n    // A dry wash catches only the raised fibres of the paper, in streaks.\n    const x = i % PW;\n    const y = (i / PW) | 0;\n    d0[i] = 1 - (1 - Wm[i] * (0.5 + 0.45 * vn(x * 0.25, y * 0.6))) * (1 - Sm[i]);\n    d1[i] = 1 - exp(-1.7 * (wb[i] + 0.5 * wh[i]) - 1.5 * (sb[i] + 0.6 * hb[i]));\n  }\n  return [d0, d1, Am, Pg];\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = { F: [F(N), F(N), F(N)], A: [F(N), F(N), F(N)], S: [F(MW * LEN), F(MW * LEN), F(MW * LEN)], L: [F(W), F(W), F(W)] });\n  Object.assign(P, { cache: [], base: -1, st: 0, tm: 0, u: 0, u0: 0, hold: 2.2, T: 0, rt: 0, kick: -99, th: 0, bow: 0, tw: 0, built: -1, wetD: -1, lamp: 0, wet: 0.06 });\n  // The alcove: an earth wall, a wooden post at the left, and the raised floor\n  // with its lacquered front edge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let c = [0.085, 0.07, 0.055];\n      let f = 0.8 + 0.4 * vn(x * 0.25, y * 0.12) + 0.08 * (hash(x, y) - 0.5);\n      if (x \u003c 3) {\n        c = [0.22, 0.15, 0.09];\n        f = (x === 2 ? 0.55 : 1) * (0.85 + 0.3 * vn(x * 2, y * 0.05));\n      } else if (y === 120) f = 0.35;\n      else if (y > 120 && y \u003c 125) {\n        c = [0.2, 0.14, 0.085];\n        f = 0.8 + 0.25 * vn(x * 0.06, y * 2) + (y - 121) * 0.06;\n      } else if (y >= 125) {\n        c = [0.1, 0.075, 0.06];\n        f = y === 125 ? 3.2 : 0.6;\n      }\n      for (let k = 0; k \u003c 3; k++) P.A[k][y * W + x] = c[k] * f;\n    }\n  // The mounting: silk with a small woven figure, gold brocade strips above\n  // and below the painting, and the two hanging strips from the rod.\n  for (let y = 0; y \u003c LEN; y++)\n    for (let x = 0; x \u003c MW; x++) {\n      let c = SILK;\n      let f = (0.92 + 0.08 * ((x + y) & 1)) * ((x % 4 === 1 && y % 4 === 1) || (x % 4 === 3 && y % 4 === 3) ? 1.3 : 1);\n      if (x >= PX && x \u003c PX + PW && (y === PY - 2 || y === PY - 1 || y === PY + PH || y === PY + PH + 1)) {\n        c = GOLD;\n        f = (x + 2 * y) % 3 ? 0.88 : 1.15;\n      }\n      if (x === PX - 1 || x === PX + PW) f *= 0.8;\n      const fu = x % 23 > 8 && x % 23 \u003c 12;\n      if (fu && y \u003c= 10) {\n        c = GOLD;\n        f = (x % 23 === 10 ? 1 : 0.8) * (y % 3 ? 0.92 : 1.12);\n      } else if (fu && y === 11 && x % 23 !== 10) {\n        c = PAPER;\n        f = 0.75;\n      } else if (x % 23 === 12 && y \u003c= 11) f *= 0.55;\n      if (y === 0) f *= 0.65;\n      for (let k = 0; k \u003c 3; k++) P.S[k][y * MW + x] = c[k] * f;\n    }\n}\n\nfunction roll(P) {\n  if (P.st \u003c 2) Object.assign(P, { st: 2, tm: 0, u0: P.u });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.lamp = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3) / 2;\n  const base = cl(round(k[2]), 0, 3);\n  P.wet = cl(k[3], 0, 1);\n  if (P.base \u003c 0) {\n    P.base = P.cur = base;\n    P.nx = (base + 1) % 4;\n  }\n  if (base !== P.base) {\n    P.base = P.nx = base;\n    roll(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) roll(P);\n  const st = dt * rate;\n  P.T += st;\n  P.rt += dt;\n  P.tm += st;\n  if (P.st === 0) {\n    P.u = sm(0, 1, P.tm / TU);\n    if (P.tm >= TU) Object.assign(P, { st: 1, tm: 0, kick: P.T });\n  } else if (P.st === 1) {\n    if (P.tm >= P.hold) roll(P);\n  } else if (P.st === 2) {\n    P.u = P.u0 * (1 - sm(0, 1, P.tm / (TR * max(0.25, P.u0))));\n    if (P.u \u003c= 0) Object.assign(P, { u: 0, st: 3, tm: 0 });\n  } else if (P.tm >= TZ) {\n    // Rolled up, the scroll is swapped for the next one, which comes down.\n    Object.assign(P, { cur: P.nx, nx: (P.nx + 1) % 4, st: 0, tm: 0, hold: TS });\n  }\n  // The swing: a kick when the roller comes to rest, then the draft.\n  const w = (2 * PI) / 2.4;\n  const tk = P.T - P.kick;\n  const kick = tk > 0 ? 1.7 * exp(-tk / 2.2) * sin(w * tk) : 0;\n  const T = P.T;\n  P.th = (kick + 0.55 * (0.6 + 0.4 * sin(0.29 * w * T)) * sin(w * T + 0.6 * sin(0.13 * w * T))) / 110;\n  P.bow = 0.45 * sin(0.71 * w * T + 1.3) + 0.3 * kick;\n  P.tw = sin(0.57 * w * T + 0.4);\n}\n\nfunction compose(P) {\n  const c = P.cache[P.cur] || (P.cache[P.cur] = paint(P.cur));\n  const wet = P.wet;\n  for (let y = 0; y \u003c PH; y++)\n    for (let x = 0; x \u003c PW; x++) {\n      const i = y * PW + x;\n      const D = c[0][i] + (c[1][i] - c[0][i]) * wet;\n      const f = (1 - 0.9 * D) * (0.965 + 0.05 * hash(x + 7, y + 3));\n      const a = c[2][i];\n      const p = PIG[c[3][i]];\n      for (let k = 0; k \u003c 3; k++) P.S[k][(PY + y) * MW + PX + x] = PAPER[k] * f * (1 - a) + p[k] * a;\n    }\n  P.built = P.cur;\n  P.wetD = wet;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.base \u003c 0) return;\n  if (P.built !== P.cur || abs(P.wetD - P.wet) > 0.004) compose(P);\n  const [FR, FG, FB] = P.F;\n  const [AR, AG, AB] = P.A;\n  const [SR, SG, SB] = P.S;\n  const [LR, LG, LB] = P.L;\n  const lamp = P.lamp;\n  const fl = 1 + (1 - lamp) * 0.035 * (sin(P.rt * 9.3) * 0.6 + sin(P.rt * 14.1 + 1) * 0.4);\n  // The light on each column: the candle from the left, the moon from the right.\n  for (let x = 0; x \u003c W; x++) {\n    const gc = (1.08 - (0.42 * x) / 63) * fl;\n    const gm = 0.66 + (0.4 * x) / 63;\n    for (let k = 0; k \u003c 3; k++) P.L[k][x] = mix(CANDLE[k] * gc, MOON[k] * gm, lamp);\n  }\n  const vy = (y) => 0.8 + 0.2 * min(1, y / 60);\n  const yR = TOP + P.u * LEN;\n  const dia = sqrt(16 + 26 * (1 - P.u));\n  const yc = yR + dia / 2;\n  const { th, bow } = P;\n  const side = 1 - 2 * lamp;\n\n  // The wall, with the scroll's soft shadow thrown away from the light.\n  const sx0 = MX + th * 60 + 3 * side;\n  for (let y = 0; y \u003c H; y++) {\n    const v = vy(y);\n    const sy = y > 15 && y \u003c yc + dia / 2 + 1.5 ? 0.55 : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const s = (1 - sy * cl(min(x + 0.5 - sx0, sx0 + MW - x - 0.5) * 0.6 + 0.5, 0, 1)) * v;\n      FR[i] = AR[i] * LR[x] * s;\n      FG[i] = AG[i] * LG[x] * s;\n      FB[i] = AB[i] * LB[x] * s;\n    }\n  }\n\n  // The hanging part, each row shifted by the swing and the bow of the paper.\n  // The paper turned toward the light is brighter, and the rows curling onto\n  // the roller darker.\n  const glow = 1 + 0.06 * P.tw * side;\n  for (let y = TOP; y \u003c yR; y++) {\n    const cov = min(1, yR - y);\n    const ty = y - TOP;\n    const bw = bow * sin(PI * cl((y + 0.5 - TOP) / (yR - TOP), 0, 1));\n    const dx = th * (y + 0.5 - NAIL) + bw;\n    const v = vy(y) * glow * (0.62 + 0.38 * cl((yR - y - 0.5) / 1.6, 0, 1)) * cov;\n    for (let x = MX - 3; x \u003c MX + MW + 3; x++) {\n      const fx = x - MX - dx;\n      const i0 = floor(fx);\n      const f = fx - i0;\n      const w0 = i0 >= 0 && i0 \u003c MW ? 1 - f : 0;\n      const w1 = i0 >= -1 && i0 \u003c MW - 1 ? f : 0;\n      const a = (w0 + w1) * cov;\n      if (a \u003c= 0) continue;\n      const t = ty * MW + i0;\n      const r = (w0 ? SR[t] * w0 : 0) + (w1 ? SR[t + 1] * w1 : 0);\n      const g = (w0 ? SG[t] * w0 : 0) + (w1 ? SG[t + 1] * w1 : 0);\n      const b = (w0 ? SB[t] * w0 : 0) + (w1 ? SB[t + 1] * w1 : 0);\n      const s = v * (1 + (0.12 * bw * side * (31.5 - x)) / 22);\n      const i = y * W + x;\n      FR[i] = FR[i] * (1 - a) + r * LR[x] * s;\n      FG[i] = FG[i] * (1 - a) + g * LG[x] * s;\n      FB[i] = FB[i] * (1 - a) + b * LB[x] * s;\n    }\n  }\n\n  const put = (x, y, c, f, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const i = y * W + x;\n    const s = f * vy(y) * a;\n    FR[i] = FR[i] * (1 - a) + c[0] * LR[x] * s;\n    FG[i] = FG[i] * (1 - a) + c[1] * LG[x] * s;\n    FB[i] = FB[i] * (1 - a) + c[2] * LB[x] * s;\n  };\n  // The nail, the cord to two rings on the rod, and the rod.\n  for (let y = 4; y \u003c 15; y++)\n    for (const ex of [20.5, 43.5]) {\n      const x = mix(31.5, ex, (y - 4) / 10.5) - 0.5;\n      const x0 = floor(x);\n      put(x0, y, CORD, 1, 1 - (x - x0));\n      put(x0 + 1, y, CORD, 1, x - x0);\n    }\n  for (const [x, y, f] of [[31, 2, 1.25], [32, 2, 0.8], [31, 3, 0.8], [32, 3, 0.55], [20, 14, 1.1], [43, 14, 1.1]]) put(x, y, BRASS, f);\n  for (let x = MX - 1; x \u003c= MX + MW; x++) {\n    const e = x \u003c MX || x >= MX + MW ? 0.75 : 1;\n    put(x, 15, WOOD, 1.3 * e);\n    put(x, 16, WOOD, 0.7 * e);\n  }\n\n  // The roller and the rolled scroll on it, turning as it goes, with a knob\n  // of bone at each end standing proud of the roll.\n  const dxr = th * (yc - NAIL);\n  const rolled = 1 - P.u;\n  const ang = (rolled * LEN) / (dia / 2);\n  const seam = cos(ang) > 0.2 && rolled > 0.02 ? sin(ang) : 9;\n  const rc = [0, 1, 2].map((k) => mix(SILK[k], BACK[k], sm(0, 0.3, rolled)));\n  for (let y = floor(yc - 3.6); y \u003c= yc + 3.6; y++) {\n    const yy = y + 0.5 - yc;\n    const v = yy / (dia / 2);\n    const vk = yy / 3.4;\n    for (let x = MX - 5; x \u003c MX + MW + 5; x++) {\n      const px = x + 0.5 - dxr;\n      const kx = px \u003c MX ? MX - px : px - MX - MW;\n      if (kx \u003c 0) {\n        const a = cl(dia / 2 - abs(yy) + 0.5, 0, 1) * cl(0.5 - kx, 0, 1);\n        if (a \u003c= 0) continue;\n        const n = sqrt(max(0, 1 - v * v));\n        put(x, y, rc, (0.25 + 0.75 * n * (0.8 - 0.35 * v)) * (abs(v - seam) \u003c 0.3 ? 0.6 : 1), a);\n      } else if (kx \u003c 4.6) {\n        const e = 3.4 * sqrt(max(0, 1 - (kx / 4.4) ** 4));\n        const a = cl(e - abs(yy) + 0.5, 0, 1);\n        if (a \u003c= 0) continue;\n        const n = sqrt(max(0, 1 - vk * vk));\n        const hi = 0.45 * exp(-((vk + 0.45) ** 2) / 0.05);\n        put(x, y, BONE, (0.3 + 0.75 * n * (0.85 - 0.3 * vk) + hi) * (kx \u003c 0.8 ? 0.55 : 1), a);\n      }\n    }\n  }\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, FR[i] * 255), min(255, FG[i] * 255), min(255, FB[i] * 255));\n}\n","layer":{"id":"layer-hanging-scroll","type":"code","name":"hanging-scroll","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hanging Scroll\n// Family:  paper\n// Idea:    A hanging scroll in a dim alcove lets its weighted roller down from the upper rod to show an ink painting on ivory paper in silk borders row by row, hangs swaying in a draft, then rolls up from the bottom so the next painting can come down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after Japanese kakemono hanging scrolls and Song dynasty ink landscapes\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Painting=0..3, Ink=0..1\n//\n// Knob 1: Lamp. The light on the scroll: a warm candle low on the left turns the paper ivory at 0, and towards 1 it gives way to cool moonlight from a window on the right.\n// Knob 2: Speed. How fast the scroll moves: at 2 the roller takes under three seconds to come down, a painting hangs for seven and the draft swings it about once in two and a half.\n// Knob 3: Painting. Which painting unrolls next: misty mountains with a waterfall at 0, bamboo in wind at 1, a plum branch under the moon at 2, cranes over waves at 3. Turning it rolls the scroll up and lets that one down.\n// Knob 4: Ink. How wet the ink was: crisp dry-brush lines with broken edges at 0, washes that bled out into the paper and strokes feathered at their edges at 1.\n// Buttons: K1 tap rolls the scroll up now and unrolls the next painting.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The scroll hangs from a nail at row 3. Its upper rod fills rows 15 and 16,\n// and the mounting runs 96 rows down from row 17 to the roller, 44 columns\n// wide from column 10. The painting sits inside the mounting, 36 by 74.\nconst [NAIL, TOP, LEN, MX, MW] = [3, 17, 96, 10, 44];\nconst [PX, PY, PW, PH] = [4, 14, 36, 74];\nconst PN = PW * PH;\n// At Speed 2, in seconds: unroll, hang, roll up, rest rolled.\nconst [TU, TS, TR, TZ] = [2.6, 7, 2, 0.5];\nconst [PAPER, SILK, GOLD, BACK] = [[0.95, 0.91, 0.8], [0.2, 0.31, 0.3], [0.8, 0.61, 0.27], [0.6, 0.58, 0.5]];\nconst [WOOD, BONE, BRASS, CORD] = [[0.4, 0.27, 0.16], [0.86, 0.8, 0.64], [0.85, 0.66, 0.32], [0.5, 0.3, 0.45]];\n// Seal vermilion, plum blossom and the red sun.\nconst PIG = [[0.82, 0.14, 0.1], [0.9, 0.3, 0.42], [0.93, 0.3, 0.12]];\nconst CANDLE = [1, 0.9, 0.72];\nconst MOON = [0.56, 0.67, 0.92];\nconst { min, max, floor, ceil, round, sqrt, sin, cos, exp, abs, hypot, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => {\n  const t = cl((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst mix = (a, b, t) => a + (b - a) * t;\n// A fixed hash and a value noise made from it, so a painting comes out the\n// same every time it unrolls.\nconst hash = (a, b) => {\n  let h = Math.imul((a | 0) * 374761393 + (b | 0) * 668265263, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nconst vn = (x, y) => {\n  const i = floor(x);\n  const j = floor(y);\n  const [u, v] = [sm(0, 1, x - i), sm(0, 1, y - j)];\n  const [a, b, c] = [hash(i, j), hash(i + 1, j), hash(i, j + 1)];\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(i + 1, j + 1)) * u * v;\n};\n\n// The painting being made: wash and stroke densities, pigment cover and which\n// pigment. RID is a ridge row per column for fill(), ROC how solid it is there.\nlet Wm, Sm, Am, Pg;\nlet rs = 1;\nconst rnd = () => (rs = (rs * 16807) % 2147483647) / 2147483647;\nconst RID = new Float32Array(PW);\nconst ROC = new Float32Array(PW);\n\n// A brush stroke through points [x, y, half width, ...]. dry parts the hairs\n// into streaks along the stroke, more of them toward its end.\nfunction brush(p, dens, dry = 0) {\n  const n = p.length / 3 - 1;\n  for (let k = 0; k \u003c n; k++) {\n    const [ax, ay, aw, bx, by, bw] = p.slice(k * 3, k * 3 + 6);\n    const dx = bx - ax;\n    const dy = by - ay;\n    const L2 = dx * dx + dy * dy || 1e-6;\n    const L = sqrt(L2);\n    const m = max(aw, bw) + 1;\n    for (let y = max(0, floor(min(ay, by) - m)); y \u003c= min(PH - 1, floor(max(ay, by) + m)); y++)\n      for (let x = max(0, floor(min(ax, bx) - m)); x \u003c= min(PW - 1, floor(max(ax, bx) + m)); x++) {\n        const qx = x + 0.5 - ax;\n        const qy = y + 0.5 - ay;\n        const t = cl((qx * dx + qy * dy) / L2, 0, 1);\n        let a = cl(aw + (bw - aw) * t + 0.5 - hypot(qx - dx * t, qy - dy * t), 0, 1);\n        if (a \u003c= 0) continue;\n        if (dry) {\n          const g = (dry * (k + t)) / n;\n          const c = (qx * dy - qy * dx) / L;\n          a *= 0.15 + 0.85 * sm(g - 0.1, g + 0.1, 0.55 * hash(floor(c * 1.8) + 99, floor(t * L * 0.5) + k * 31) + 0.45 * vn(x * 0.9, y * 0.9));\n        }\n        const i = y * PW + x;\n        // A negative density leaves the paper bare instead.\n        if (dens \u003c 0) Wm[i] *= 1 + dens * a;\n        else Sm[i] = max(Sm[i], a * dens);\n      }\n  }\n}\n\n// A round patch of pigment, which leaves no wash under it.\nfunction disc(cx, cy, r, pg, a0 = 0.92) {\n  for (let y = max(0, floor(cy - r - 1)); y \u003c min(PH, cy + r + 1); y++)\n    for (let x = max(0, floor(cx - r - 1)); x \u003c min(PW, cx + r + 1); x++) {\n      const a = cl(r + 0.5 - hypot(x + 0.5 - cx, y + 0.5 - cy), 0, 1);\n      const i = y * PW + x;\n      if (a > Am[i]) {\n        Am[i] = a * a0;\n        Pg[i] = pg;\n      }\n      Wm[i] *= 1 - a;\n    }\n}\n\n// Fill below the ridge in RID: the wash is darkest at the ridge and fades down\n// into mist, and it covers what was painted behind. edge inks the ridge line\n// and cun the short texture strokes under it.\nfunction fill(dens, fade, edge, cun, sd) {\n  for (let x = 0; x \u003c PW; x++) {\n    const r = RID[x];\n    const oc = ROC[x];\n    for (let y = max(0, floor(r)); y \u003c PH; y++) {\n      // The row the ridge crosses is covered only in part.\n      const cv = cl(y + 1 - r, 0, 1) * oc;\n      const d = max(0, y + 0.5 - r);\n      const i = y * PW + x;\n      const o = 0.92 * cl(d / 2 + 0.3, 0, 1) * cv;\n      Wm[i] = min(1, Wm[i] * (1 - o) + dens * exp(-d / fade) * (0.7 + 0.6 * vn(x * 0.5 + sd, y * 0.2)) * cv);\n      Sm[i] *= 1 - o;\n      if (d \u003c 1.5) Sm[i] = max(Sm[i], edge * (1 - d / 1.7) * (0.35 + 0.65 * vn(x * 1.3 + sd, y * 0.5)) * cv);\n      const c = vn(x * 1.2 + sd, y * 0.3);\n      if (c > 0.64) Sm[i] = max(Sm[i], cun * (c - 0.6) * 2.6 * exp(-d / (fade * 0.8)) * oc);\n    }\n  }\n}\n\nfunction mtn(cx, base, hw, ht, dens, fade, edge, cun, sd) {\n  for (let x = 0; x \u003c PW; x++) {\n    const u = abs(x + 0.5 - cx) / hw;\n    RID[x] = u \u003c 1 ? base - ht * (1 - u ** 1.6) * (0.62 + 0.45 * vn(x * 0.28 + sd, sd) + 0.3 * vn(x * 0.8, sd + 5)) : PH;\n    ROC[x] = sm(1, 0.75, u);\n  }\n  fill(dens, fade, edge, cun, sd);\n}\n\n// A pine clinging to a ridge: a crooked trunk and flat layers of needles.\nfunction pine(x, y, h, d) {\n  brush([x, y, 0.45, x + 0.5, y - h * 0.5, 0.35, x - 0.2, y - h, 0.3], d);\n  for (let k = 0; k \u003c 3; k++) {\n    const yy = y - h * (0.42 + 0.26 * k);\n    const w = h * (0.55 - 0.13 * k);\n    brush([x - w, yy + 0.4, 0.45, x + 0.2, yy - 0.3, 0.75, x + w, yy + 0.2, 0.4], d);\n  }\n}\n\n// A column of characters, each a few short strokes in a square cell, and the\n// red seal under it.\nfunction calli(x, y, n) {\n  for (let c = 0; c \u003c n; c++) {\n    const cy = y + c * 4.6;\n    for (let k = 3 + floor(rnd() * 3); k > 0; k--) {\n      const t = rnd() * 4;\n      const a = x + rnd() * 2.6;\n      const b = cy + rnd() * 3;\n      brush(t \u003c 1.6 ? [a - 0.3, b, 0.4, min(x + 3.2, a + 2), b + 0.2, 0.35] : t \u003c 3 ? [a, b - 0.4, 0.4, a + 0.2, min(cy + 3.6, b + 2.2), 0.3] : [a, b, 0.55, a + 0.7, b + 0.7, 0.3], 0.92);\n    }\n  }\n  const sy = floor(y + n * 4.6 + 0.6);\n  const sx = floor(x + 0.2);\n  for (let j = 0; j \u003c 3; j++)\n    for (let i = 0; i \u003c 3; i++) {\n      const k = (sy + j) * PW + sx + i;\n      // Carved lines let the paper show through the red.\n      Am[k] = (i + j) % 2 && hash(sx + i, sy + j) \u003c 0.6 ? 0.45 : 0.95;\n      Pg[k] = 0;\n    }\n}\n\nfunction landscape() {\n  // The far peak towers over the left, a lower one stands behind on the right.\n  mtn(13, 42, 15, 34, 0.32, 10, 0.45, 0.3, 3);\n  mtn(29, 40, 9, 12, 0.26, 7, 0.35, 0.25, 11);\n  mtn(24, 56, 16, 18, 0.5, 8, 0.85, 0.6, 23);\n  for (const x of [15, 18, 21, 31, 34]) pine(x, RID[x] + 1.5, 4 + (x % 3), 0.9);\n  // A waterfall drops from a cleft in the middle ridge into the mist.\n  for (let y = floor(RID[28] + 3); y \u003c 58; y++)\n    for (let x = 25; x \u003c 31; x++) {\n      const i = y * PW + x;\n      const c = abs(x + 0.5 - 28 - 0.4 * sin(y * 0.45));\n      const f = sm(58, 50, y);\n      if (c \u003c 0.9) {\n        Wm[i] *= 1 - 0.9 * f;\n        Sm[i] *= 1 - f;\n      } else if (c \u003c 2.4) Sm[i] = max(Sm[i], (0.75 * f * (2.4 - c)) / 1.5);\n    }\n  mtn(30, 63, 9, 3, 0.3, 2.5, 0.5, 0, 51);\n  // The near bank, with a hut under two pines.\n  mtn(5, 70, 17, 16, 0.72, 6, 1, 0.85, 37);\n  pine(3, RID[3] + 2, 7, 0.95);\n  pine(8, RID[8] + 2, 6, 0.95);\n  const hy = round(RID[15] + 4);\n  for (let j = -4; j \u003c= 1; j++)\n    for (let i = 11; i \u003c= 18; i++) {\n      Wm[(hy + j) * PW + i] *= 0.1;\n      Sm[(hy + j) * PW + i] = 0;\n    }\n  brush([10.5, hy - 2.2, 0.55, 14.5, hy - 4.6, 0.7, 18.5, hy - 2.2, 0.55], 0.97);\n  brush([12, hy - 2, 0.3, 12, hy + 0.6, 0.3], 0.7);\n  brush([17, hy - 2, 0.3, 17, hy + 0.6, 0.3], 0.7);\n  brush([14.5, hy - 1, 0.45, 14.5, hy + 0.6, 0.45], 0.85);\n  // Still water, a boat with its fisherman and his rod.\n  brush([19, 66.5, 0.25, 23, 66.5, 0.2], 0.3);\n  brush([28, 71.5, 0.25, 34, 71.5, 0.2], 0.28);\n  brush([20, 72.5, 0.2, 24, 72.5, 0.2], 0.25);\n  brush([22.5, 68, 0.35, 25, 69, 0.6, 28, 68.9, 0.6, 29.5, 67.7, 0.35], 0.92);\n  brush([26.5, 68, 0.55, 26.6, 66.4, 0.5], 0.9);\n  brush([27, 66.8, 0.25, 31, 63.5, 0.2], 0.6);\n  calli(31.6, 1.5, 4);\n}\n\nfunction bamboo() {\n  // Three stalks lean in the wind, the far one pale.\n  for (const [x0, x1, y1, w, d] of [[6, 11, -2, 1.1, 0.32], [14, 20, -2, 1.7, 0.9], [25, 29, 10, 1.3, 0.72]]) {\n    const n = round((75 - y1) / 10.5);\n    for (let k = 0; k \u003c n; k++) {\n      const ax = mix(x0, x1, k / n);\n      const ay = mix(75, y1, k / n);\n      const bx = mix(x0, x1, (k + 1) / n);\n      const by = mix(75, y1, (k + 1) / n);\n      brush([ax, ay - 0.8, w, bx, by + 0.8, w * 0.9], d, 0.45);\n      brush([bx - w - 0.5, by + 0.2, 0.45, bx + w + 0.5, by - 0.4, 0.45], min(1, d * 1.1));\n    }\n  }\n  // Leaves stream off the twigs to the right.\n  for (const [x, y, n, d, s] of [\n    [12, 8, 4, 0.35, 0.9], [9, 40, 4, 0.35, 0.9], [21, 12, 5, 0.92, 1.2], [20, 34, 5, 0.9, 1.15],\n    [19, 56, 4, 0.85, 1.05], [29, 24, 5, 0.75, 1], [28, 46, 3, 0.75, 0.95],\n  ]) {\n    brush([x - 3.5, y + 2.5, 0.35, x, y, 0.25], d);\n    for (let j = 0; j \u003c n; j++) {\n      const a = 0.35 + (j / (n - 1) - 0.5) * 1.3 + (rnd() - 0.5) * 0.3;\n      const L = (8 + rnd() * 4) * s;\n      const w = (1 + rnd() * 0.3) * s;\n      brush([x, y, 0.25, x + cos(a) * L * 0.3, y + sin(a) * L * 0.3, w, x + cos(a + 0.12) * L, y + sin(a + 0.12) * L, 0.05], d);\n    }\n  }\n  calli(31.4, 42, 5);\n}\n\nfunction plum() {\n  // The sky washed grey round a full moon left bare.\n  for (let y = 0; y \u003c 50; y++)\n    for (let x = 0; x \u003c PW; x++)\n      Wm[y * PW + x] = 0.28 * sm(8, 9.6, hypot(x + 0.5 - 23, y + 0.5 - 17)) * sm(50, 18, y) * (0.75 + 0.5 * vn(x * 0.2, y * 0.15));\n  // An old branch in dry brush, straight young shoots off it, and red blossom.\n  brush([-1, 75, 3, 5, 63, 2.5, 3, 51, 2.1, 10, 41, 1.7, 8, 31, 1.3, 15, 21, 1, 13, 12, 0.6], 0.93, 0.9);\n  brush([5, 61, 1.3, 13, 56, 1, 21, 51, 0.75, 29, 42, 0.45], 0.88, 0.8);\n  for (const t of [[10, 41, 12, 28], [15, 21, 22, 8], [13, 12, 14, 4], [21, 51, 24, 41], [29, 42, 33, 33], [8, 31, 3, 23], [13, 56, 16, 48], [24, 47, 31, 47]])\n    brush([t[0], t[1], 0.45, t[2], t[3], 0.25], 0.85);\n  for (const [x, y, r] of [\n    [12, 30, 1.5], [12.5, 26, 1.3], [17, 16, 1.4], [20, 11, 1.5], [21.5, 7.5, 1.2], [14, 6, 1.3],\n    [22, 44, 1.5], [24, 40.5, 1.2], [31, 37, 1.4], [32.5, 33, 1.2], [5, 25, 1.4], [3, 21.5, 1.2],\n    [15.5, 50, 1.4], [27.5, 47, 1.3], [9, 37.5, 1.5], [17.5, 54, 1.3], [6, 57, 1.6], [11, 16.5, 1.1],\n  ]) {\n    disc(x, y, r, 1);\n    Sm[floor(y) * PW + floor(x)] = 0.6;\n  }\n  calli(31.4, 50, 4);\n}\n\n// A red-crowned crane flying left, wings raised (up 1) or lowered (up -1).\nfunction crane(cx, cy, s, up) {\n  const u = up * s;\n  // The far wing and the near wing are left bare in the grey sky, each with\n  // black flight feathers along its trailing edge.\n  for (const [fx, d] of [[-2.5, -0.55], [4.5, -0.95]]) {\n    const w = [cx, cy - 0.3 * u, 1.9 * s, cx + (fx * 0.4 + 0.6) * s, cy - 5 * u, 1.4 * s, cx + fx * s, cy - 9.5 * u, 0.7 * s];\n    brush(w, d);\n    brush(w.map((v, k) => (k % 3 === 0 ? v + 1.6 * s : k % 3 === 2 ? 0.3 * s : v)), 0.9);\n  }\n  brush([cx - 3 * s, cy, 1.3 * s, cx + 3 * s, cy + 0.3 * s, 1.1 * s], -0.95);\n  // The black neck, a grey bill, the black tail and the trailing legs.\n  brush([cx - 2.6 * s, cy - 0.2 * s, 0.55 * s, cx - 7.8 * s, cy - 1.4 * s, 0.45 * s], 0.95);\n  brush([cx - 8.3 * s, cy - 1.4 * s, 0.3, cx - 10.5 * s, cy - 1 * s, 0.2], 0.5);\n  brush([cx + 2.5 * s, cy - 0.2 * s, 0.8 * s, cx + 4.3 * s, cy + 0.5 * s, 0.4 * s], 0.9);\n  brush([cx + 3 * s, cy + 0.9 * s, 0.3, cx + 9.5 * s, cy + 1.9 * s, 0.25], 0.6);\n  disc(cx - 8 * s, cy - 2 * s, 0.6, 0);\n}\n\nfunction cranes() {\n  for (let y = 0; y \u003c PH; y++) for (let x = 0; x \u003c PW; x++) Wm[y * PW + x] = (0.5 + 0.25 * sm(62, 0, y)) * (0.8 + 0.4 * vn(x * 0.13 + 4, y * 0.09));\n  disc(27, 10, 4.4, 2);\n  crane(19, 30, 1.3, 1);\n  crane(23, 47, 0.95, -1);\n  crane(8, 41, 0.5, 1);\n  // Rows of waves, each crest inked and its trough left pale.\n  for (let b = 0; b \u003c 4; b++) {\n    const y0 = 56 + b * 5.4;\n    const amp = 1.4 + b * 0.8;\n    const f = 0.5 - b * 0.07;\n    for (let x = 0; x \u003c PW; x++) {\n      RID[x] = y0 - amp * (0.5 + 0.5 * sin(x * f + b * 2.1)) ** 3;\n      ROC[x] = 1;\n    }\n    fill(0.42, 2.6, 0.9, 0, b * 13);\n    // A curl of foam breaks off each crest.\n    for (let x0 = (PI / 2 - b * 2.1 + 2 * PI * 3) / f; x0 > -2; x0 -= (2 * PI) / f) {\n      const py = y0 - amp;\n      brush([x0 + 1, py + 0.6, 0.35, x0, py - 0.6, 0.4, x0 - 1.6, py - 0.3, 0.3, x0 - 2.2, py + 0.8, 0.2], 0.85);\n    }\n  }\n  calli(1.6, 2, 4);\n}\n\nconst PAINT = [landscape, bamboo, plum, cranes];\n\n// Each painting is kept twice: as painted with a dry brush, and as it would\n// be had the ink been wet, its washes spread and its strokes bled.\nfunction blur(src, r) {\n  let a = src;\n  for (let pass = 0; pass \u003c 2; pass++) {\n    const b = new Float32Array(PN);\n    const c = new Float32Array(PN);\n    for (let y = 0; y \u003c PH; y++)\n      for (let x = 0; x \u003c PW; x++) {\n        let s = 0;\n        for (let k = -r; k \u003c= r; k++) s += a[y * PW + cl(x + k, 0, PW - 1)];\n        b[y * PW + x] = s / (2 * r + 1);\n      }\n    for (let y = 0; y \u003c PH; y++)\n      for (let x = 0; x \u003c PW; x++) {\n        let s = 0;\n        for (let k = -r; k \u003c= r; k++) s += b[cl(y + k, 0, PH - 1) * PW + x];\n        c[y * PW + x] = s / (2 * r + 1);\n      }\n    a = c;\n  }\n  return a;\n}\n\nfunction paint(n) {\n  Wm = new Float32Array(PN);\n  Sm = new Float32Array(PN);\n  Am = new Float32Array(PN);\n  Pg = new Uint8Array(PN);\n  rs = 11 + n * 7;\n  PAINT[n]();\n  const wb = blur(Wm, 2);\n  const sb = blur(Sm, 1);\n  const hb = blur(sb, 2);\n  const wh = blur(wb, 3);\n  const d0 = new Float32Array(PN);\n  const d1 = new Float32Array(PN);\n  for (let i = 0; i \u003c PN; i++) {\n    // A dry wash catches only the raised fibres of the paper, in streaks.\n    const x = i % PW;\n    const y = (i / PW) | 0;\n    d0[i] = 1 - (1 - Wm[i] * (0.5 + 0.45 * vn(x * 0.25, y * 0.6))) * (1 - Sm[i]);\n    d1[i] = 1 - exp(-1.7 * (wb[i] + 0.5 * wh[i]) - 1.5 * (sb[i] + 0.6 * hb[i]));\n  }\n  return [d0, d1, Am, Pg];\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = { F: [F(N), F(N), F(N)], A: [F(N), F(N), F(N)], S: [F(MW * LEN), F(MW * LEN), F(MW * LEN)], L: [F(W), F(W), F(W)] });\n  Object.assign(P, { cache: [], base: -1, st: 0, tm: 0, u: 0, u0: 0, hold: 2.2, T: 0, rt: 0, kick: -99, th: 0, bow: 0, tw: 0, built: -1, wetD: -1, lamp: 0, wet: 0.06 });\n  // The alcove: an earth wall, a wooden post at the left, and the raised floor\n  // with its lacquered front edge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let c = [0.085, 0.07, 0.055];\n      let f = 0.8 + 0.4 * vn(x * 0.25, y * 0.12) + 0.08 * (hash(x, y) - 0.5);\n      if (x \u003c 3) {\n        c = [0.22, 0.15, 0.09];\n        f = (x === 2 ? 0.55 : 1) * (0.85 + 0.3 * vn(x * 2, y * 0.05));\n      } else if (y === 120) f = 0.35;\n      else if (y > 120 && y \u003c 125) {\n        c = [0.2, 0.14, 0.085];\n        f = 0.8 + 0.25 * vn(x * 0.06, y * 2) + (y - 121) * 0.06;\n      } else if (y >= 125) {\n        c = [0.1, 0.075, 0.06];\n        f = y === 125 ? 3.2 : 0.6;\n      }\n      for (let k = 0; k \u003c 3; k++) P.A[k][y * W + x] = c[k] * f;\n    }\n  // The mounting: silk with a small woven figure, gold brocade strips above\n  // and below the painting, and the two hanging strips from the rod.\n  for (let y = 0; y \u003c LEN; y++)\n    for (let x = 0; x \u003c MW; x++) {\n      let c = SILK;\n      let f = (0.92 + 0.08 * ((x + y) & 1)) * ((x % 4 === 1 && y % 4 === 1) || (x % 4 === 3 && y % 4 === 3) ? 1.3 : 1);\n      if (x >= PX && x \u003c PX + PW && (y === PY - 2 || y === PY - 1 || y === PY + PH || y === PY + PH + 1)) {\n        c = GOLD;\n        f = (x + 2 * y) % 3 ? 0.88 : 1.15;\n      }\n      if (x === PX - 1 || x === PX + PW) f *= 0.8;\n      const fu = x % 23 > 8 && x % 23 \u003c 12;\n      if (fu && y \u003c= 10) {\n        c = GOLD;\n        f = (x % 23 === 10 ? 1 : 0.8) * (y % 3 ? 0.92 : 1.12);\n      } else if (fu && y === 11 && x % 23 !== 10) {\n        c = PAPER;\n        f = 0.75;\n      } else if (x % 23 === 12 && y \u003c= 11) f *= 0.55;\n      if (y === 0) f *= 0.65;\n      for (let k = 0; k \u003c 3; k++) P.S[k][y * MW + x] = c[k] * f;\n    }\n}\n\nfunction roll(P) {\n  if (P.st \u003c 2) Object.assign(P, { st: 2, tm: 0, u0: P.u });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1);\n  P.lamp = cl(k[0], 0, 1);\n  const rate = cl(k[1], 0.2, 3) / 2;\n  const base = cl(round(k[2]), 0, 3);\n  P.wet = cl(k[3], 0, 1);\n  if (P.base \u003c 0) {\n    P.base = P.cur = base;\n    P.nx = (base + 1) % 4;\n  }\n  if (base !== P.base) {\n    P.base = P.nx = base;\n    roll(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) roll(P);\n  const st = dt * rate;\n  P.T += st;\n  P.rt += dt;\n  P.tm += st;\n  if (P.st === 0) {\n    P.u = sm(0, 1, P.tm / TU);\n    if (P.tm >= TU) Object.assign(P, { st: 1, tm: 0, kick: P.T });\n  } else if (P.st === 1) {\n    if (P.tm >= P.hold) roll(P);\n  } else if (P.st === 2) {\n    P.u = P.u0 * (1 - sm(0, 1, P.tm / (TR * max(0.25, P.u0))));\n    if (P.u \u003c= 0) Object.assign(P, { u: 0, st: 3, tm: 0 });\n  } else if (P.tm >= TZ) {\n    // Rolled up, the scroll is swapped for the next one, which comes down.\n    Object.assign(P, { cur: P.nx, nx: (P.nx + 1) % 4, st: 0, tm: 0, hold: TS });\n  }\n  // The swing: a kick when the roller comes to rest, then the draft.\n  const w = (2 * PI) / 2.4;\n  const tk = P.T - P.kick;\n  const kick = tk > 0 ? 1.7 * exp(-tk / 2.2) * sin(w * tk) : 0;\n  const T = P.T;\n  P.th = (kick + 0.55 * (0.6 + 0.4 * sin(0.29 * w * T)) * sin(w * T + 0.6 * sin(0.13 * w * T))) / 110;\n  P.bow = 0.45 * sin(0.71 * w * T + 1.3) + 0.3 * kick;\n  P.tw = sin(0.57 * w * T + 0.4);\n}\n\nfunction compose(P) {\n  const c = P.cache[P.cur] || (P.cache[P.cur] = paint(P.cur));\n  const wet = P.wet;\n  for (let y = 0; y \u003c PH; y++)\n    for (let x = 0; x \u003c PW; x++) {\n      const i = y * PW + x;\n      const D = c[0][i] + (c[1][i] - c[0][i]) * wet;\n      const f = (1 - 0.9 * D) * (0.965 + 0.05 * hash(x + 7, y + 3));\n      const a = c[2][i];\n      const p = PIG[c[3][i]];\n      for (let k = 0; k \u003c 3; k++) P.S[k][(PY + y) * MW + PX + x] = PAPER[k] * f * (1 - a) + p[k] * a;\n    }\n  P.built = P.cur;\n  P.wetD = wet;\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.base \u003c 0) return;\n  if (P.built !== P.cur || abs(P.wetD - P.wet) > 0.004) compose(P);\n  const [FR, FG, FB] = P.F;\n  const [AR, AG, AB] = P.A;\n  const [SR, SG, SB] = P.S;\n  const [LR, LG, LB] = P.L;\n  const lamp = P.lamp;\n  const fl = 1 + (1 - lamp) * 0.035 * (sin(P.rt * 9.3) * 0.6 + sin(P.rt * 14.1 + 1) * 0.4);\n  // The light on each column: the candle from the left, the moon from the right.\n  for (let x = 0; x \u003c W; x++) {\n    const gc = (1.08 - (0.42 * x) / 63) * fl;\n    const gm = 0.66 + (0.4 * x) / 63;\n    for (let k = 0; k \u003c 3; k++) P.L[k][x] = mix(CANDLE[k] * gc, MOON[k] * gm, lamp);\n  }\n  const vy = (y) => 0.8 + 0.2 * min(1, y / 60);\n  const yR = TOP + P.u * LEN;\n  const dia = sqrt(16 + 26 * (1 - P.u));\n  const yc = yR + dia / 2;\n  const { th, bow } = P;\n  const side = 1 - 2 * lamp;\n\n  // The wall, with the scroll's soft shadow thrown away from the light.\n  const sx0 = MX + th * 60 + 3 * side;\n  for (let y = 0; y \u003c H; y++) {\n    const v = vy(y);\n    const sy = y > 15 && y \u003c yc + dia / 2 + 1.5 ? 0.55 : 0;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const s = (1 - sy * cl(min(x + 0.5 - sx0, sx0 + MW - x - 0.5) * 0.6 + 0.5, 0, 1)) * v;\n      FR[i] = AR[i] * LR[x] * s;\n      FG[i] = AG[i] * LG[x] * s;\n      FB[i] = AB[i] * LB[x] * s;\n    }\n  }\n\n  // The hanging part, each row shifted by the swing and the bow of the paper.\n  // The paper turned toward the light is brighter, and the rows curling onto\n  // the roller darker.\n  const glow = 1 + 0.06 * P.tw * side;\n  for (let y = TOP; y \u003c yR; y++) {\n    const cov = min(1, yR - y);\n    const ty = y - TOP;\n    const bw = bow * sin(PI * cl((y + 0.5 - TOP) / (yR - TOP), 0, 1));\n    const dx = th * (y + 0.5 - NAIL) + bw;\n    const v = vy(y) * glow * (0.62 + 0.38 * cl((yR - y - 0.5) / 1.6, 0, 1)) * cov;\n    for (let x = MX - 3; x \u003c MX + MW + 3; x++) {\n      const fx = x - MX - dx;\n      const i0 = floor(fx);\n      const f = fx - i0;\n      const w0 = i0 >= 0 && i0 \u003c MW ? 1 - f : 0;\n      const w1 = i0 >= -1 && i0 \u003c MW - 1 ? f : 0;\n      const a = (w0 + w1) * cov;\n      if (a \u003c= 0) continue;\n      const t = ty * MW + i0;\n      const r = (w0 ? SR[t] * w0 : 0) + (w1 ? SR[t + 1] * w1 : 0);\n      const g = (w0 ? SG[t] * w0 : 0) + (w1 ? SG[t + 1] * w1 : 0);\n      const b = (w0 ? SB[t] * w0 : 0) + (w1 ? SB[t + 1] * w1 : 0);\n      const s = v * (1 + (0.12 * bw * side * (31.5 - x)) / 22);\n      const i = y * W + x;\n      FR[i] = FR[i] * (1 - a) + r * LR[x] * s;\n      FG[i] = FG[i] * (1 - a) + g * LG[x] * s;\n      FB[i] = FB[i] * (1 - a) + b * LB[x] * s;\n    }\n  }\n\n  const put = (x, y, c, f, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const i = y * W + x;\n    const s = f * vy(y) * a;\n    FR[i] = FR[i] * (1 - a) + c[0] * LR[x] * s;\n    FG[i] = FG[i] * (1 - a) + c[1] * LG[x] * s;\n    FB[i] = FB[i] * (1 - a) + c[2] * LB[x] * s;\n  };\n  // The nail, the cord to two rings on the rod, and the rod.\n  for (let y = 4; y \u003c 15; y++)\n    for (const ex of [20.5, 43.5]) {\n      const x = mix(31.5, ex, (y - 4) / 10.5) - 0.5;\n      const x0 = floor(x);\n      put(x0, y, CORD, 1, 1 - (x - x0));\n      put(x0 + 1, y, CORD, 1, x - x0);\n    }\n  for (const [x, y, f] of [[31, 2, 1.25], [32, 2, 0.8], [31, 3, 0.8], [32, 3, 0.55], [20, 14, 1.1], [43, 14, 1.1]]) put(x, y, BRASS, f);\n  for (let x = MX - 1; x \u003c= MX + MW; x++) {\n    const e = x \u003c MX || x >= MX + MW ? 0.75 : 1;\n    put(x, 15, WOOD, 1.3 * e);\n    put(x, 16, WOOD, 0.7 * e);\n  }\n\n  // The roller and the rolled scroll on it, turning as it goes, with a knob\n  // of bone at each end standing proud of the roll.\n  const dxr = th * (yc - NAIL);\n  const rolled = 1 - P.u;\n  const ang = (rolled * LEN) / (dia / 2);\n  const seam = cos(ang) > 0.2 && rolled > 0.02 ? sin(ang) : 9;\n  const rc = [0, 1, 2].map((k) => mix(SILK[k], BACK[k], sm(0, 0.3, rolled)));\n  for (let y = floor(yc - 3.6); y \u003c= yc + 3.6; y++) {\n    const yy = y + 0.5 - yc;\n    const v = yy / (dia / 2);\n    const vk = yy / 3.4;\n    for (let x = MX - 5; x \u003c MX + MW + 5; x++) {\n      const px = x + 0.5 - dxr;\n      const kx = px \u003c MX ? MX - px : px - MX - MW;\n      if (kx \u003c 0) {\n        const a = cl(dia / 2 - abs(yy) + 0.5, 0, 1) * cl(0.5 - kx, 0, 1);\n        if (a \u003c= 0) continue;\n        const n = sqrt(max(0, 1 - v * v));\n        put(x, y, rc, (0.25 + 0.75 * n * (0.8 - 0.35 * v)) * (abs(v - seam) \u003c 0.3 ? 0.6 : 1), a);\n      } else if (kx \u003c 4.6) {\n        const e = 3.4 * sqrt(max(0, 1 - (kx / 4.4) ** 4));\n        const a = cl(e - abs(yy) + 0.5, 0, 1);\n        if (a \u003c= 0) continue;\n        const n = sqrt(max(0, 1 - vk * vk));\n        const hi = 0.45 * exp(-((vk + 0.45) ** 2) / 0.05);\n        put(x, y, BONE, (0.3 + 0.75 * n * (0.85 - 0.3 * vk) + hi) * (kx \u003c 0.8 ? 0.55 : 1), a);\n      }\n    }\n  }\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, FR[i] * 255), min(255, FG[i] * 255), min(255, FB[i] * 255));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Speed=0.2..3, Painting=0..3, Ink=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"The light on the scroll: a warm candle low on the left turns the paper ivory at 0, and towards 1 it gives way to cool moonlight from a window on the right."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the scroll moves: at 2 the roller takes under three seconds to come down, a painting hangs for seven and the draft swings it about once in two and a half."},{"name":"Painting","min":0,"max":3,"about":"Which painting unrolls next: misty mountains with a waterfall at 0, bamboo in wind at 1, a plum branch under the moon at 2, cranes over waves at 3. Turning it rolls the scroll up and lets that one down."},{"name":"Ink","min":0,"max":1,"about":"How wet the ink was: crisp dry-brush lines with broken edges at 0, washes that bled out into the paper and strokes feathered at their edges at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.177,"detail":0.0295,"edges":0.2326,"complexity":1.3758,"coverage":0.4677,"colour":0.1211,"drift":0.2049},"knobResponse":[0.0845,0.2,0.0646,0.0324]},{"slug":"harmonograph","title":"Harmonograph","family":"line","round":1,"note":"단순한 비에서 조금씩 어긋난 진자 셋이 닫히지 않는 그림을 그리고, 멎어 가며 가운데로 감겨 들어가요.","idea":"Pendulums swinging at almost a simple ratio draw a figure that never quite closes, and as they run down it winds itself into the centre.","buttons":"K1 tap gives the pendulums a fresh push.","code":"// ===== Patternflow pattern =====\n// Title:   Harmonograph\n// Family:  line\n// Idea:    Pendulums swinging at almost a simple ratio draw a figure that never quite closes, and as they run down it winds itself into the centre.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.25..4, Ratio=0..7, Damping=0.02..0.4\n//\n// Knob 1: Hue. The colour of the fresh line; older line turns a little round the wheel as it fades.\n// Knob 2: Speed. How fast the pen travels; a slow pen's line lasts longer.\n// Knob 3: Ratio. Walks the pendulums through 1:2, 2:3, 3:4, 3:5, 1:3, 2:5, 1:4 and 4:5; between two steps the pair drifts further out of tune.\n// Knob 4: Damping. How quickly the swing dies away; low keeps one figure turning for two minutes, high spirals in within seconds.\n// Buttons: K1 tap gives the pendulums a fresh push.\n\nconst W = 64;\nconst H = 128;\nconst RATIOS = [1, 2, 2, 3, 3, 4, 3, 5, 1, 3, 2, 5, 1, 4, 4, 5];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\n// The phosphor: bright fresh line in the chosen hue, fading and turning as it ages.\nfunction buildLut(params, hue) {\n  const lut = params.lut;\n  for (let i = 0; i \u003c 256; i++) {\n    const v = i / 255;\n    hsvInto(lut, i * 3, hue - (1 - v) * 0.14, 0.92 - 0.12 * v * v, Math.pow(v, 1.15));\n  }\n  params.lutHue = hue;\n}\n\nfunction push(params) {\n  params.s = 0;\n  params.amp = 0.88 + Math.random() * 0.12;\n  params.p1 = Math.random() * Math.PI * 2;\n  params.p2 = Math.random() * Math.PI * 2;\n  params.p3 = Math.random() * Math.PI * 2;\n  params.turn = 0.12 + Math.random() * 0.16;\n  params.sign = Math.random() \u003c 0.5 ? -1 : 1;\n}\n\nexport function setup(params) {\n  params.buf = new Float32Array(W * H);\n  params.lut = new Float32Array(256 * 3);\n  params.lutHue = -1;\n  params.pen = new Float32Array(2);\n  params.head = new Float32Array(3);\n  params.hue = 0;\n  params.warm = false;\n  push(params);\n}\n\n// Where the pen is after s seconds of swing.\nfunction penAt(params, s, out) {\n  const w = params.w;\n  const d = Math.exp(-params.damp * s) * params.amp;\n  const a = params.fa * w;\n  const b = params.fb * w;\n  const r = a * (1 + params.detune * params.sign);\n  const t = params.turn;\n  // Lateral pendulums along y and x, x a little out of tune with y, and a rotary one\n  // turning the paper at nearly y's rate. The slower pendulum swings along the tall\n  // side, so 1:2 stands up as an eight instead of lying down.\n  const xb = b * (1 - params.detune * 0.5 * params.sign);\n  out[0] = W / 2 - 0.5 + 29.5 * d * ((1 - t) * Math.sin(xb * s + params.p2) + t * Math.cos(r * s + params.p3));\n  out[1] = H / 2 - 0.5 + 60 * d * ((1 - t) * Math.sin(a * s + params.p1) + t * Math.sin(r * s + params.p3));\n}\n\n// A faint wide haze under the line, so it glows rather than sits on the black.\nfunction haze(buf, x, y, v) {\n  const x0 = Math.ceil(x - 2.4);\n  const y0 = Math.ceil(y - 2.4);\n  for (let yy = y0; yy \u003c= y0 + 4; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 4; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = (1 - (dx * dx + dy * dy) / 5.76) * v;\n      const i = yy * W + xx;\n      if (w > buf[i]) buf[i] = w;\n    }\n  }\n}\n\nfunction splat(buf, x, y, v) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = (1 - (dx * dx + dy * dy) / 1.44) * v;\n      const i = yy * W + xx;\n      if (w > buf[i]) buf[i] = w;\n    }\n  }\n}\n\n// Draws the pen's path from swing time s0 to s1. With tau, older stretches come out\n// dimmer, the same as if they had been fading on the panel since the pen passed.\nfunction trace(params, s0, s1, tau) {\n  const buf = params.buf;\n  const pen = params.pen;\n  const n = Math.max(2, Math.ceil((s1 - s0) * 24 * Math.max(params.fa, params.fb) * params.w));\n  penAt(params, s0, pen);\n  let px = pen[0];\n  let py = pen[1];\n  for (let i = 1; i \u003c= n; i++) {\n    const s = s0 + ((s1 - s0) * i) / n;\n    penAt(params, s, pen);\n    const v = tau > 0 ? Math.exp(-(s1 - s) / tau) : 1;\n    const dx = pen[0] - px;\n    const dy = pen[1] - py;\n    const m = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.5));\n    for (let j = 1; j \u003c= m; j++) {\n      const x = px + (dx * j) / m;\n      const y = py + (dy * j) / m;\n      if (j % 2 === 0 || j === m) haze(buf, x, y, 0.18 * v);\n      splat(buf, x, y, v);\n    }\n    px = pen[0];\n    py = pen[1];\n  }\n  params.x = px;\n  params.y = py;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const speed = Math.max(0.05, k[1]);\n  const pick = Math.max(0, Math.min(7, k[2]));\n  const step = Math.round(pick);\n  params.fa = RATIOS[step * 2];\n  params.fb = RATIOS[step * 2 + 1];\n  // On a step the pair is a hair out of tune; halfway to the next it is much further out.\n  params.detune = 0.012 + Math.abs(pick - step) * 0.05;\n  params.damp = k[3] * 0.6;\n  // The faster pendulum swings once a second whatever the ratio, so a busy figure takes longer to draw.\n  params.w = (Math.PI * 2) / Math.max(params.fa, params.fb);\n  dt = Math.min(dt, 0.1);\n  if (params.lutHue !== params.hue) buildLut(params, params.hue);\n  if (input.btnPressed && input.btnPressed[0]) push(params);\n\n  // A slow pen keeps its line longer, so it still lays down a whole figure.\n  const tau = 6 * Math.sqrt(2 / speed);\n  // Speed 2 runs the swing in real time.\n  const sd = (dt * speed) / 2;\n  if (!params.warm) {\n    // Open mid-swing, with the last six seconds of it already on the panel.\n    params.warm = true;\n    trace(params, 0, 6, (tau * speed) / 2);\n    params.s = 6;\n    return;\n  }\n  const buf = params.buf;\n  const fade = Math.exp(-dt / tau);\n  for (let i = 0; i \u003c buf.length; i++) buf[i] *= fade;\n  trace(params, params.s, params.s + sd, 0);\n  params.s += sd;\n  // When the swing has run down to a small knot, push again.\n  if (Math.exp(-params.damp * params.s) * params.amp \u003c 0.2) push(params);\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const v = buf[y * W + x];\n      const i = Math.min(255, Math.floor(v * 255)) * 3;\n      display.setPixel(x, y, lut[i], lut[i + 1], lut[i + 2]);\n    }\n  }\n  // The pen itself, a little paler than its line.\n  const head = params.head;\n  hsvInto(head, 0, params.hue, 0.3, 1);\n  const hx = Math.round(params.x);\n  const hy = Math.round(params.y);\n  if (hx >= 0 && hx \u003c W && hy >= 0 && hy \u003c H) display.setPixel(hx, hy, head[0], head[1], head[2]);\n}\n","layer":{"id":"layer-harmonograph","type":"code","name":"harmonograph","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Harmonograph\n// Family:  line\n// Idea:    Pendulums swinging at almost a simple ratio draw a figure that never quite closes, and as they run down it winds itself into the centre.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.25..4, Ratio=0..7, Damping=0.02..0.4\n//\n// Knob 1: Hue. The colour of the fresh line; older line turns a little round the wheel as it fades.\n// Knob 2: Speed. How fast the pen travels; a slow pen's line lasts longer.\n// Knob 3: Ratio. Walks the pendulums through 1:2, 2:3, 3:4, 3:5, 1:3, 2:5, 1:4 and 4:5; between two steps the pair drifts further out of tune.\n// Knob 4: Damping. How quickly the swing dies away; low keeps one figure turning for two minutes, high spirals in within seconds.\n// Buttons: K1 tap gives the pendulums a fresh push.\n\nconst W = 64;\nconst H = 128;\nconst RATIOS = [1, 2, 2, 3, 3, 4, 3, 5, 1, 3, 2, 5, 1, 4, 4, 5];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\n// The phosphor: bright fresh line in the chosen hue, fading and turning as it ages.\nfunction buildLut(params, hue) {\n  const lut = params.lut;\n  for (let i = 0; i \u003c 256; i++) {\n    const v = i / 255;\n    hsvInto(lut, i * 3, hue - (1 - v) * 0.14, 0.92 - 0.12 * v * v, Math.pow(v, 1.15));\n  }\n  params.lutHue = hue;\n}\n\nfunction push(params) {\n  params.s = 0;\n  params.amp = 0.88 + Math.random() * 0.12;\n  params.p1 = Math.random() * Math.PI * 2;\n  params.p2 = Math.random() * Math.PI * 2;\n  params.p3 = Math.random() * Math.PI * 2;\n  params.turn = 0.12 + Math.random() * 0.16;\n  params.sign = Math.random() \u003c 0.5 ? -1 : 1;\n}\n\nexport function setup(params) {\n  params.buf = new Float32Array(W * H);\n  params.lut = new Float32Array(256 * 3);\n  params.lutHue = -1;\n  params.pen = new Float32Array(2);\n  params.head = new Float32Array(3);\n  params.hue = 0;\n  params.warm = false;\n  push(params);\n}\n\n// Where the pen is after s seconds of swing.\nfunction penAt(params, s, out) {\n  const w = params.w;\n  const d = Math.exp(-params.damp * s) * params.amp;\n  const a = params.fa * w;\n  const b = params.fb * w;\n  const r = a * (1 + params.detune * params.sign);\n  const t = params.turn;\n  // Lateral pendulums along y and x, x a little out of tune with y, and a rotary one\n  // turning the paper at nearly y's rate. The slower pendulum swings along the tall\n  // side, so 1:2 stands up as an eight instead of lying down.\n  const xb = b * (1 - params.detune * 0.5 * params.sign);\n  out[0] = W / 2 - 0.5 + 29.5 * d * ((1 - t) * Math.sin(xb * s + params.p2) + t * Math.cos(r * s + params.p3));\n  out[1] = H / 2 - 0.5 + 60 * d * ((1 - t) * Math.sin(a * s + params.p1) + t * Math.sin(r * s + params.p3));\n}\n\n// A faint wide haze under the line, so it glows rather than sits on the black.\nfunction haze(buf, x, y, v) {\n  const x0 = Math.ceil(x - 2.4);\n  const y0 = Math.ceil(y - 2.4);\n  for (let yy = y0; yy \u003c= y0 + 4; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 4; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = (1 - (dx * dx + dy * dy) / 5.76) * v;\n      const i = yy * W + xx;\n      if (w > buf[i]) buf[i] = w;\n    }\n  }\n}\n\nfunction splat(buf, x, y, v) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = (1 - (dx * dx + dy * dy) / 1.44) * v;\n      const i = yy * W + xx;\n      if (w > buf[i]) buf[i] = w;\n    }\n  }\n}\n\n// Draws the pen's path from swing time s0 to s1. With tau, older stretches come out\n// dimmer, the same as if they had been fading on the panel since the pen passed.\nfunction trace(params, s0, s1, tau) {\n  const buf = params.buf;\n  const pen = params.pen;\n  const n = Math.max(2, Math.ceil((s1 - s0) * 24 * Math.max(params.fa, params.fb) * params.w));\n  penAt(params, s0, pen);\n  let px = pen[0];\n  let py = pen[1];\n  for (let i = 1; i \u003c= n; i++) {\n    const s = s0 + ((s1 - s0) * i) / n;\n    penAt(params, s, pen);\n    const v = tau > 0 ? Math.exp(-(s1 - s) / tau) : 1;\n    const dx = pen[0] - px;\n    const dy = pen[1] - py;\n    const m = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.5));\n    for (let j = 1; j \u003c= m; j++) {\n      const x = px + (dx * j) / m;\n      const y = py + (dy * j) / m;\n      if (j % 2 === 0 || j === m) haze(buf, x, y, 0.18 * v);\n      splat(buf, x, y, v);\n    }\n    px = pen[0];\n    py = pen[1];\n  }\n  params.x = px;\n  params.y = py;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const speed = Math.max(0.05, k[1]);\n  const pick = Math.max(0, Math.min(7, k[2]));\n  const step = Math.round(pick);\n  params.fa = RATIOS[step * 2];\n  params.fb = RATIOS[step * 2 + 1];\n  // On a step the pair is a hair out of tune; halfway to the next it is much further out.\n  params.detune = 0.012 + Math.abs(pick - step) * 0.05;\n  params.damp = k[3] * 0.6;\n  // The faster pendulum swings once a second whatever the ratio, so a busy figure takes longer to draw.\n  params.w = (Math.PI * 2) / Math.max(params.fa, params.fb);\n  dt = Math.min(dt, 0.1);\n  if (params.lutHue !== params.hue) buildLut(params, params.hue);\n  if (input.btnPressed && input.btnPressed[0]) push(params);\n\n  // A slow pen keeps its line longer, so it still lays down a whole figure.\n  const tau = 6 * Math.sqrt(2 / speed);\n  // Speed 2 runs the swing in real time.\n  const sd = (dt * speed) / 2;\n  if (!params.warm) {\n    // Open mid-swing, with the last six seconds of it already on the panel.\n    params.warm = true;\n    trace(params, 0, 6, (tau * speed) / 2);\n    params.s = 6;\n    return;\n  }\n  const buf = params.buf;\n  const fade = Math.exp(-dt / tau);\n  for (let i = 0; i \u003c buf.length; i++) buf[i] *= fade;\n  trace(params, params.s, params.s + sd, 0);\n  params.s += sd;\n  // When the swing has run down to a small knot, push again.\n  if (Math.exp(-params.damp * params.s) * params.amp \u003c 0.2) push(params);\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const v = buf[y * W + x];\n      const i = Math.min(255, Math.floor(v * 255)) * 3;\n      display.setPixel(x, y, lut[i], lut[i + 1], lut[i + 2]);\n    }\n  }\n  // The pen itself, a little paler than its line.\n  const head = params.head;\n  hsvInto(head, 0, params.hue, 0.3, 1);\n  const hx = Math.round(params.x);\n  const hy = Math.round(params.y);\n  if (hx >= 0 && hx \u003c W && hy >= 0 && hy \u003c H) display.setPixel(hx, hy, head[0], head[1], head[2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.25..4, Ratio=0..7, Damping=0.02..0.4","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the fresh line; older line turns a little round the wheel as it fades."},{"name":"Speed","min":0.25,"max":4,"about":"How fast the pen travels; a slow pen's line lasts longer."},{"name":"Ratio","min":0,"max":7,"about":"Walks the pendulums through 1:2, 2:3, 3:4, 3:5, 1:3, 2:5, 1:4 and 4:5; between two steps the pair drifts further out of tune."},{"name":"Damping","min":0.02,"max":0.4,"about":"How quickly the swing dies away; low keeps one figure turning for two minutes, high spirals in within seconds."}],"start":[0,2,0,0.06],"measures":{"motion":0.0325,"detail":0.0469,"edges":0.3334,"complexity":0.8432,"coverage":0.2444,"colour":0.1802,"drift":0.053},"knobResponse":[0.0712,0.0419,0.0758,0.0561]},{"slug":"harp","title":"Harp","family":"music","round":16,"note":"무대에 선 페달 하프가 패널 높이를 다 채우고, 보이지 않는 하프 주자가 뜯은 줄이 렌즈 꼴로 번졌다가 잦아들어요. K3 은 펼친화음, 굴린 화음, 하모닉스, 글리산도 가운데 하나를 고르고, K1 을 누르면 29줄을 다 훑는 글리산도가 올라갔다 내려와요.","idea":"A concert pedal harp stands the full height of the panel, and each string an unseen harpist plucks blurs into the lens of its vibration and rings away, the bass widest and longest.","buttons":"K1 tap is a glissando up all 29 strings and back down. K2 tap changes key a fifth up: a pedal drops a notch and the discs on that note's strings turn.","code":"// ===== Patternflow pattern =====\n// Title:   Harp\n// Family:  music\n// Idea:    A concert pedal harp stands the full height of the panel, and each string an unseen harpist plucks blurs into the lens of its vibration and rings away, the bass widest and longest.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the double-action pedal harp (Sebastien Erard, 1810) and the envelope of a plucked string\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Tempo=0.5..3.5, Figure=0..3, Damp=0..1\n//\n// Knob 1: Light. The colour of the stage light on the backdrop and in the ringing strings, starting from a deep blue behind the gilt harp.\n// Knob 2: Tempo. Beats a second: 2 is 120 to the minute, 0.5 is 30 and 3.5 is 210.\n// Knob 3: Figure. What the harpist plays: 0 broken chords rising across the strings with a rolled chord and a glissando at each cadence, 1 rolled chords in both hands, 2 a tune in harmonics, each string ringing in two halves around a still middle, 3 pedal glissandi up and down every bar over the bass.\n// Knob 4: Damp. At the start the strings ring freely, the bass for three seconds; turned up, the left hand stops the bass at each change of chord, and at 1 the palm stops every note as soon as it sounds.\n// Buttons: K1 tap is a glissando up all 29 strings and back down. K2 tap changes key a fifth up: a pedal drops a notch and the discs on that note's strings turn.\n\nconst W = 64;\nconst H = 128;\n// 29 strings from C2 to C6, one LED wide with one LED between them: string i\n// stands in column 5 + 2i. A concert harp has 47, from C1 to G7; the panel\n// holds four octaves and a C.\nconst NS = 29;\nconst SX0 = 5;\n// The underside and the top of the neck, as points the curve passes through.\n// It rises a little off the column, sags over the tenor strings and climbs\n// again to the shoulder: the harmonic curve.\nconst NECK_UNDER = [[0, 12.5], [4, 12.5], [8, 12], [14, 13], [22, 16.5], [30, 20.5], [38, 23.5], [45, 24.5], [51, 23.5], [56, 20.5], [60, 16.5], [63, 14], [67, 13]];\nconst NECK_TOP = [[0, 4], [4, 4], [8, 4], [14, 5.5], [22, 9.5], [30, 14], [38, 17.5], [45, 18.5], [51, 17.5], [56, 14], [59, 11], [61.5, 9.5], [64, 9.5], [67, 11]];\n// The soundboard is straight, from the foot of C2 to the foot of C6.\nconst SB_X0 = 5;\nconst SB_Y0 = 116;\nconst SB_X1 = 61;\nconst SB_Y1 = 27;\n// The base: its top, its bottom, and its back end.\nconst BASE_TOP = 116;\nconst BASE_BOT = 124;\nconst BASE_X1 = 26;\n// The seven pedals in their slots, as the harpist's feet meet them: D C B on\n// the left, E F G A on the right. Up is flat, the middle notch natural, down sharp.\nconst PEDAL_NOTE = [1, 0, 6, 2, 3, 4, 5];\nconst PEDAL_X = [4, 7, 10, 15, 18, 21, 24];\n// Keys a fifth apart add a sharp in this order and take a flat in the other.\nconst SHARPS = [3, 0, 4, 1, 5, 2, 6];\n// Four bars to a phrase, as chords on scale degrees counted from 0. In minor\n// the seventh is raised, so V is major and III and VII are left out.\nconst PROG_MAJOR = [[0, 5, 3, 4], [0, 3, 4, 4], [0, 5, 1, 4], [0, 2, 3, 4], [3, 4, 0, 4], [0, 4, 5, 4]];\nconst PROG_MINOR = [[0, 5, 3, 4], [0, 3, 4, 4], [0, 3, 5, 4], [5, 3, 4, 4]];\n// Broken-chord shapes, as steps up the chord's strings from the bass root,\n// and the beat each note takes: rising eighths, a rise and fall in triplets,\n// and a rocking figure that leaves the bass and swings in the treble.\nconst ARPS = [[[0, 2, 3, 4, 5, 6, 7, 8], 0.5], [[0, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6], 1 / 3], [[0, 4, 6, 7, 9, 7, 6, 4], 0.5]];\n// The tune in harmonics: rhythms for a bar, in beats.\nconst TUNES = [[2, 1, 1], [1, 1, 2], [1, 1, 1, 1], [3, 1], [2, 2]];\n// How much of a string's light the LED either side of it catches.\nconst GLOW = 0.3;\n// Brass for the discs and pedals, and the flash of a disc as it turns.\nconst BRASS = [205, 160, 70];\nconst GLINT = [50, 80, 120];\n// A string at rest, as a share of its full colour; the edges of a ringing\n// string's blur against its flash; and the stage-lit halo round it.\nconst IDLE = 0.38;\nconst EDGE = 1.05;\nconst HALO = 0.3;\n\nfunction hsvInto(out, h, s, v) {\n  for (let c = 0; c \u003c 3; c++) {\n    const k = (5 - 2 * c + 6 * (h - Math.floor(h))) % 6;\n    out[c] = 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\n// A Catmull-Rom curve through the points, read off at every column.\nfunction catmull(a, b, c, d, t) {\n  return 0.5 * (2 * b + (c - a) * t + (2 * a - 5 * b + 4 * c - d) * t * t + (3 * b - a - 3 * c + d) * t * t * t);\n}\n\nfunction curve(pts) {\n  const out = new Float32Array(W);\n  let px = pts[0][0];\n  let py = pts[0][1];\n  for (let k = 0; k \u003c pts.length - 1; k++) {\n    const p = [pts[Math.max(0, k - 1)], pts[k], pts[k + 1], pts[Math.min(pts.length - 1, k + 2)]];\n    for (let s = 1; s \u003c= 32; s++) {\n      const x = catmull(p[0][0], p[1][0], p[2][0], p[3][0], s / 32);\n      const y = catmull(p[0][1], p[1][1], p[2][1], p[3][1], s / 32);\n      for (let c = Math.max(0, Math.ceil(px)); c \u003c= Math.floor(x) && c \u003c W; c++) out[c] = py + ((y - py) * (c - px)) / (x - px);\n      px = x;\n      py = y;\n    }\n  }\n  return out;\n}\n\nfunction boardY(x) {\n  return SB_Y0 + ((x - SB_X0) * (SB_Y1 - SB_Y0)) / (SB_X1 - SB_X0);\n}\n\n// Paints one LED of the frame over what is there, with coverage a.\nfunction paint(P, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  if (a > 1) a = 1;\n  const p = y * W + x;\n  const o = p * 3;\n  const fr = P.frame;\n  fr[o] = r * a + fr[o] * (1 - a);\n  fr[o + 1] = g * a + fr[o + 1] * (1 - a);\n  fr[o + 2] = b * a + fr[o + 2] * (1 - a);\n  P.alpha[p] = a + P.alpha[p] * (1 - a);\n}\n\nfunction gilt(P, x, y, f, a) {\n  paint(P, x, y, 225 * f, 172 * f, 70 * f, a);\n}\n\n// The crown on top of the column, carved and gilded, from the finial down\n// through the abacus, a pair of volutes and hanging leaves to the collar: 3 is\n// a highlight, 2 gold, 1 shadow gold, 0 a deep cut, blank is open.\nconst CROWN = [\"  121  \", \"  232  \", \" 12321 \", \"1233332\", \"0111110\", \"2302032\", \"1233321\", \"0122210\", \" 12321 \", \" 01210 \", \" 1221  \"];\n\nfunction buildFrame(P) {\n  const under = P.under;\n  const top = P.top;\n  // The soundbox, seen from the side: its flank tapers from 18 LEDs deep at\n  // the base to 3 at the shoulder, and the back is built of staves, whose\n  // seams show as lines that close in towards the top.\n  const len = Math.hypot(SB_X0 - SB_X1, SB_Y0 - SB_Y1);\n  const ux = (SB_X0 - SB_X1) / len;\n  const uy = (SB_Y0 - SB_Y1) / len;\n  for (let y = 0; y \u003c BASE_TOP; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const vx = x + 0.5 - SB_X1;\n      const vy = y + 0.5 - SB_Y1;\n      // s runs down the soundboard from the shoulder, d out from it into the box.\n      const s = (vx * ux + vy * uy) / len;\n      const d = vx * uy - vy * ux;\n      if (s \u003c -0.15 || d \u003c -1) continue;\n      const D = 3 + 15 * s;\n      const a = clamp01(d + 0.6) * clamp01(D - d + 0.5);\n      if (a \u003c= 0) continue;\n      const q = clamp01((d - 1) / Math.max(1, D - 1));\n      let f = 0.92 - 0.55 * q * q;\n      for (const seam of [0.42, 0.68, 0.87]) f *= 1 - 0.4 * Math.exp(-3 * ((q - seam) * D) ** 2);\n      // Maple, its grain running along the box.\n      f *= 0.93 + 0.07 * Math.sin(s * 140 + q * 7);\n      // The soundboard's edge, pale spruce, along the strings' feet.\n      const e = clamp01(1.7 - d);\n      paint(P, x, y, 165 * f + (228 - 165 * f) * e, 102 * f + (184 - 102 * f) * e, 48 * f + (96 - 48 * f) * e, a);\n    }\n  // The neck: a gilt rim along the top, dark wood with the tuning pins, and\n  // the brass plates of the action along the bottom.\n  for (let x = 3; x \u003c W; x++) {\n    const t = top[x];\n    const u = under[x];\n    for (let y = Math.floor(t); y \u003c= Math.ceil(u); y++) {\n      const a = clamp01(y + 1 - t) * clamp01(u - y);\n      if (a \u003c= 0) continue;\n      const v = (y + 0.5 - t) / (u - t);\n      if (v \u003c 0.2) gilt(P, x, y, 0.95, a);\n      else if (u - y \u003c 2.2) paint(P, x, y, ...BRASS.map((c) => c * (u - y \u003c 1.2 ? 0.54 : 0.72)), a);\n      else paint(P, x, y, 92 * (1 - 0.35 * v), 52 * (1 - 0.35 * v), 24 * (1 - 0.35 * v), a);\n    }\n    // A tuning pin above every string.\n    if (x >= SX0 && (x - SX0) % 2 === 0 && x \u003c= SX0 + 2 * (NS - 1)) paint(P, x, Math.round(u - 3.6), 150, 150, 162, 1);\n  }\n  // The shoulder, where the neck sits on the top of the soundbox.\n  for (let x = 62; x \u003c W; x++)\n    for (let y = Math.floor(under[x]); y \u003c Math.ceil(boardY(x)) + 1; y++) {\n      const f = 0.75 - 0.012 * (y - under[x]);\n      paint(P, x, y, 150 * f, 92 * f, 42 * f, 1);\n    }\n  // A gilt scroll curling on the shoulder.\n  const SCROLL = [[60, 10, 0.7], [61, 9, 1.1], [62, 9, 1.15], [63, 10, 0.95], [63, 11, 0.7], [62, 12, 0.6], [61, 11, 0.45], [62, 11, 1.05]];\n  for (const [x, y, f] of SCROLL) gilt(P, x, y, f, 1);\n  // The column, gilt and round: lit from the front, so the second LED takes\n  // the highlight. Carved leaves hang under the crown and over the foot.\n  const SHADE = [0.55, 1.05, 0.78, 0.42];\n  for (let y = 9; y \u003c BASE_TOP; y++) {\n    let wide = 0;\n    let carve = 0;\n    if (y >= 10 && y \u003c 24) {\n      const ly = (y - 10) % 5;\n      carve = ly \u003c 3 ? 1 : 0;\n      wide = ly === 2 ? 1 : 0;\n    } else if (y === 24 || y === 25 || y === 101 || y === 102) wide = 1;\n    else if (y >= 103 && y \u003c 113) {\n      const ly = (y - 103) % 5;\n      carve = ly > 1 ? 1 : 0;\n      wide = ly === 3 ? 1 : 0;\n    } else if (y >= 113) wide = 2;\n    for (let x = 0; x \u003c 4 + wide; x++) {\n      let f = x \u003c 4 ? SHADE[x] : 0.5;\n      if (carve && x > 0) f *= (x + y) % 2 === 0 ? 1.12 : 0.72;\n      if (y === 24 || y === 101) f *= 1.15;\n      gilt(P, x, y, f, 1);\n    }\n  }\n  for (let y = 0; y \u003c CROWN.length; y++)\n    for (let x = 0; x \u003c CROWN[y].length; x++) {\n      const c = CROWN[y][x];\n      if (c === \" \") continue;\n      gilt(P, x, y, c === \"3\" ? 1.15 : c === \"2\" ? 0.88 : c === \"1\" ? 0.6 : 0.3, 1);\n    }\n  // The base: gilt mouldings above and below dark wood, the pedal slots, and four feet.\n  for (let x = 0; x \u003c= BASE_X1; x++)\n    for (let y = BASE_TOP; y \u003c= BASE_BOT; y++) {\n      if (y > BASE_TOP && y \u003c BASE_BOT) paint(P, x, y, 70, 40, 18, 1);\n      else gilt(P, x, y, y === BASE_TOP ? 0.95 : 0.6, 1);\n    }\n  for (let k = 0; k \u003c 7; k++) for (let y = BASE_TOP + 2; y \u003c= BASE_BOT - 2; y++) paint(P, PEDAL_X[k], y, 16, 10, 6, 1);\n  for (let y = BASE_BOT + 1; y \u003c H - 1; y++)\n    for (let x = 0; x \u003c= BASE_X1; x++) if (x \u003c= 3 || x >= BASE_X1 - 4) gilt(P, x, y, 0.62 - 0.2 * (y - BASE_BOT - 1), 1);\n}\n\nfunction buildStrings(P) {\n  const under = P.under;\n  for (const k of [\"sx\", \"sTop\", \"sBot\", \"disc1\", \"disc2\", \"lenN\", \"tauN\"]) P[k] = new Float32Array(NS);\n  P.col = new Float32Array(NS * 3);\n  let L0 = 0;\n  for (let i = 0; i \u003c NS; i++) {\n    const x = SX0 + 2 * i;\n    P.sx[i] = x;\n    // From the bridge pin under the neck down into the soundboard.\n    P.sTop[i] = under[x] + 0.3;\n    P.sBot[i] = boardY(x);\n    const L = P.sBot[i] - P.sTop[i];\n    if (i === 0) L0 = L;\n    P.lenN[i] = L / L0;\n    // Each disc grips the string a semitone shorter: the natural disc\n    // 1 - 2^(-1/12) of its length below the bridge pin, the sharp 1 - 2^(-1/6).\n    P.disc1[i] = P.sTop[i] + 0.0561 * L;\n    P.disc2[i] = P.sTop[i] + 0.1091 * L;\n    // How long a free string rings, in seconds.\n    P.tauN[i] = 0.42 + 0.85 * P.lenN[i];\n    // Every C red, every F dark blue, the rest gut. The five lowest are\n    // wound wire, bronze, keeping a tint of their colour.\n    const n = i % 7;\n    const c = n === 0 ? [240, 48, 38] : n === 3 ? [38, 62, 215] : [235, 205, 155];\n    const m = i >= 5 ? 0 : n === 0 || n === 3 ? 0.45 : 0.75;\n    const WIRE = [200, 150, 98];\n    for (let k = 0; k \u003c 3; k++) P.col[i * 3 + k] = c[k] + (WIRE[k] - c[k]) * m;\n  }\n}\n\n// Sets the pedals for a key, counted in fifths from C major; the discs of a\n// pedal that moves flash as they turn.\nfunction setKey(P, key, minor) {\n  P.key = key;\n  P.minor = minor;\n  const major = (((4 * key) % 7) + 7) % 7;\n  P.tonic = minor ? (major + 5) % 7 : major;\n  const acc = [0, 0, 0, 0, 0, 0, 0];\n  if (key > 0) for (let k = 0; k \u003c key; k++) acc[SHARPS[k]] = 1;\n  else for (let k = 0; k \u003c -key; k++) acc[SHARPS[6 - k]] = -1;\n  // Harmonic minor raises the seventh: the note under the minor tonic.\n  if (minor) acc[(major + 4) % 7] += 1;\n  for (let n = 0; n \u003c 7; n++)\n    if (acc[n] !== P.pedal[n]) {\n      P.pedal[n] = acc[n];\n      P.discGlint[n] = 1;\n    }\n}\n\nfunction ev(P, at, i, f, kind) {\n  if (i \u003c 0 || i >= NS) return;\n  P.events.push({ at, i, f, kind });\n}\n\nfunction roll(P, at, list, span, f) {\n  for (let k = 0; k \u003c list.length; k++) ev(P, at + (span * k) / Math.max(1, list.length - 1), list[k], f, 0);\n}\n\nfunction gliss(P, at, from, to, span, f) {\n  const n = Math.abs(to - from);\n  const dir = to > from ? 1 : -1;\n  for (let k = 0; k \u003c= n; k++) ev(P, at + (span * k) / Math.max(1, n), from + dir * k, f, 0);\n}\n\nfunction newPhrase(P) {\n  if (P.prog) {\n    const r = Math.random();\n    if (r \u003c 0.2 && P.key \u003c 4) setKey(P, P.key + 1, P.minor);\n    else if (r \u003c 0.35 && P.key > -3) setKey(P, P.key - 1, P.minor);\n    else if (r \u003c 0.55) setKey(P, P.key, !P.minor);\n  }\n  P.prog = pick(P.minor ? PROG_MINOR : PROG_MAJOR);\n  P.style = Math.floor(Math.random() * ARPS.length);\n  P.tune = pick(TUNES);\n  P.phraseBar = 0;\n}\n\n// One bar of music, written from beat `at`.\nfunction compose(P, at, fig) {\n  if (!P.prog || P.phraseBar >= 4) newPhrase(P);\n  const b = P.phraseBar;\n  const r = (P.tonic + P.prog[b]) % 7;\n  const T = [];\n  for (let i = 0; i \u003c NS; i++) if ((i - r + 7) % 7 % 2 === 0 && (i - r + 7) % 7 \u003c 6) T.push(i);\n  const k0 = T.indexOf(r);\n  const tone = (k) => T[Math.min(T.length - 1, k0 + k)];\n  const cad = b === 3;\n  // The left hand damps the bass strings that are not in the new chord.\n  const stop = clamp01((P.damp - 0.12) / 0.4);\n  if (stop > 0)\n    for (let i = 0; i \u003c 14; i++)\n      if (T.indexOf(i) \u003c 0) {\n        P.amp[i] *= 1 - 0.85 * stop;\n        P.glow[i] *= 1 - 0.85 * stop;\n      }\n  if (fig === 0) {\n    if (cad) {\n      roll(P, at, [r, r + 4, r + 7, tone(5), tone(6), tone(7), tone(8)], 0.3, 0.85);\n      gliss(P, at + 2, 3, NS - 1, 1.5, 0.36);\n    } else {\n      const [steps, beat] = ARPS[P.style];\n      for (let n = 0; n \u003c steps.length; n++) ev(P, at + n * beat, tone(steps[n]), n === 0 ? 0.9 : 0.62, 0);\n      // The left hand doubles the root an octave up and takes the fifth on the third beat.\n      ev(P, at + 0.04, r + 7, 0.55, 0);\n      ev(P, at + 2, r + 4, 0.6, 0);\n    }\n  } else if (fig === 1) {\n    roll(P, at, [r, r + 4, r + 7], 0.15, 0.85);\n    roll(P, at + 0.1, [tone(5), tone(6), tone(7), tone(8)], 0.18, 0.7);\n    if (cad) gliss(P, at + 2, NS - 1, 3, 1.5, 0.36);\n    else {\n      roll(P, at + 2, [tone(4), tone(5), tone(6), tone(7)], 0.15, 0.55);\n      roll(P, at + 3, [tone(6), tone(7), tone(8)], 0.12, 0.5);\n    }\n  } else if (fig === 2) {\n    // The left hand breaks the chord under the tune: root, fifth, octave, fifth.\n    ev(P, at, r, 0.7, 0);\n    ev(P, at + 1, r + 4, 0.5, 0);\n    ev(P, at + 2, r + 7, 0.5, 0);\n    ev(P, at + 3, r + 4, 0.45, 0);\n    // Harmonics sound best in the middle of the harp, so the tune keeps to\n    // strings 9 to 22, starting each bar on the chord tone nearest the last note.\n    let p = -99;\n    for (const c of T) if (c >= 9 && c \u003c= 22 && Math.abs(c - P.mel) \u003c Math.abs(p - P.mel)) p = c;\n    const rhythm = cad ? [4] : P.tune;\n    let t = 0;\n    for (let k = 0; k \u003c rhythm.length; k++) {\n      if (k > 0) {\n        const step = Math.random() \u003c 0.7 ? (Math.random() \u003c 0.5 ? -1 : 1) : Math.random() \u003c 0.5 ? -2 : 2;\n        p += step;\n        if (p \u003c 9 || p > 22) p -= 2 * step;\n      }\n      ev(P, at + t, p, 0.95, 1);\n      t += rhythm[k];\n    }\n    P.mel = p;\n  } else {\n    ev(P, at, r, 0.9, 0);\n    ev(P, at + 0.04, r + 7, 0.6, 0);\n    gliss(P, at + 0.25, r + 2, NS - 1, 1.75, 0.4);\n    gliss(P, at + 2, NS - 1, r + 5, 2, 0.34);\n  }\n  P.phraseBar++;\n}\n\nfunction pluck(P, i, f, kind) {\n  const a0 = f * (1.3 + 3.4 * P.lenN[i]) * (kind ? 0.7 : 1);\n  P.amp[i] = Math.max(P.amp[i] * 0.4, a0);\n  P.age[i] = 0;\n  P.mode[i] = kind ? 2 : 1;\n  // Harpists play near the middle of the string; a harmonic is the upper half\n  // plucked while the palm touches the middle.\n  P.pp[i] = kind ? 0.25 : 0.42 + 0.16 * Math.random();\n  P.glow[i] = Math.min(1.2, Math.max(P.glow[i], f));\n  // The same note an octave and two octaves down rings in sympathy, on the\n  // partial that matches: the octave below in two halves, the next in four.\n  for (let m = 2; m \u003c= 4; m *= 2) {\n    const j = i - (m === 2 ? 7 : 14);\n    if (j \u003c 0) break;\n    const s = (0.45 * f * (1.3 + 3.4 * P.lenN[j])) / Math.sqrt(m);\n    if (P.amp[j] \u003c s) {\n      P.amp[j] = s;\n      P.mode[j] = m;\n      P.age[j] = 1;\n      P.glow[j] = Math.max(P.glow[j], 0.25 * f);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.under = curve(NECK_UNDER);\n  params.top = curve(NECK_TOP);\n  for (const k of [\"frame\", \"bg\", \"buf\"]) params[k] = new Float32Array(W * H * 3);\n  params.alpha = new Float32Array(W * H);\n  buildFrame(params);\n  buildStrings(params);\n  params.cw = new Float32Array(32);\n  params.tint = new Float32Array(3);\n  params.lightAt = -1;\n  for (const k of [\"amp\", \"age\", \"pp\", \"mode\", \"glow\"]) params[k] = new Float32Array(NS);\n  for (const k of [\"pedal\", \"pedalPos\", \"discGlint\"]) params[k] = new Float32Array(7);\n  params.events = [];\n  params.beat = 0;\n  params.nextBar = 0;\n  params.prog = null;\n  params.mel = 16;\n  params.light = 0;\n  setKey(params, 0, false);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.light = k[0];\n  P.tempo = Math.max(0.1, k[1]);\n  const fig = Math.max(0, Math.min(3, Math.round(k[2])));\n  P.damp = clamp01(k[3]);\n  P.beat += dt * P.tempo;\n  if (input.btnPressed && input.btnPressed[0]) {\n    const span = 0.9 * P.tempo;\n    gliss(P, P.beat, 0, NS - 1, span, 0.6);\n    gliss(P, P.beat + span + 0.1 * P.tempo, NS - 2, 0, span, 0.5);\n  }\n  if (input.btnPressed && input.btnPressed[1]) setKey(P, P.key >= 4 ? -3 : P.key + 1, P.minor);\n  while (P.nextBar \u003c= P.beat) {\n    compose(P, P.nextBar, fig);\n    P.nextBar += 4;\n  }\n  const evs = P.events;\n  for (let e = evs.length - 1; e >= 0; e--)\n    if (evs[e].at \u003c= P.beat) {\n      const v = evs.splice(e, 1)[0];\n      pluck(P, v.i, v.f, v.kind);\n    }\n  const free = (1 - P.damp) ** 1.5;\n  for (let i = 0; i \u003c NS; i++) {\n    const tau = 0.07 + P.tauN[i] * free;\n    P.amp[i] *= Math.exp(-dt / tau);\n    P.glow[i] *= Math.exp(-dt / (tau * 1.5));\n    P.age[i] += dt;\n  }\n  for (let n = 0; n \u003c 7; n++) {\n    P.discGlint[n] *= Math.exp(-dt / 0.35);\n    P.pedalPos[n] += (P.pedal[n] - P.pedalPos[n]) * Math.min(1, dt * 9);\n  }\n}\n\n// The stage light's hue along the knob: deep blue, violet, magenta and red,\n// then quickly past amber and yellow, which read as brown and olive this dim,\n// to green and teal and back to blue.\nconst GEL = [[0, 0.62], [0.15, 0.76], [0.3, 0.88], [0.46, 0.99], [0.58, 1.3], [0.8, 1.48], [1, 1.62]];\n\nfunction gel(k) {\n  for (let i = 1; i \u003c GEL.length; i++)\n    if (k \u003c= GEL[i][0]) return GEL[i - 1][1] + ((GEL[i][1] - GEL[i - 1][1]) * (k - GEL[i - 1][0])) / (GEL[i][0] - GEL[i - 1][0]);\n  return GEL[GEL.length - 1][1];\n}\n\nfunction backdrop(P) {\n  const bg = P.bg;\n  const tint = P.tint;\n  hsvInto(tint, gel(P.light), 0.78, 1);\n  // A cyclorama lit from the floor and dark at the top, and the stage floor\n  // with a warm pool from the follow spot.\n  const WARM = [255, 222, 175];\n  for (let y = 0; y \u003c H; y++) {\n    const v = clamp01((y - 8) / 118);\n    const lv = y >= H - 2 ? 0.1 : 0.03 + 0.37 * v * v;\n    for (let x = 0; x \u003c W; x++) {\n      const pool = y >= H - 2 ? 0.22 * Math.exp(-((x - 22) * (x - 22)) / 500) : 0;\n      for (let c = 0; c \u003c 3; c++) bg[(y * W + x) * 3 + c] = tint[c] * lv + WARM[c] * pool;\n    }\n  }\n  P.lightAt = P.light;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.lightAt !== P.light) backdrop(P);\n  const buf = P.buf;\n  buf.set(P.bg);\n  const PI = Math.PI;\n  const tint = P.tint;\n  const cw = P.cw;\n  for (let i = 0; i \u003c NS; i++) {\n    const x = P.sx[i];\n    const ci = i * 3;\n    const B = IDLE + 0.7 * P.glow[i];\n    const top = P.sTop[i];\n    const yB = P.sBot[i];\n    const acc = P.pedal[i % 7];\n    const yA = acc \u003c 0 ? top : acc === 0 ? P.disc1[i] : P.disc2[i];\n    const a = P.amp[i];\n    const span = yB - yA;\n    const p = P.pp[i];\n    const kink = Math.exp(-P.age[i] / 0.12);\n    const mode = P.mode[i];\n    for (let y = Math.floor(top); y \u003c Math.ceil(yB); y++) {\n      const cv = Math.min(y + 1, yB) - Math.max(y, top);\n      if (cv \u003c= 0) continue;\n      let L = B * cv;\n      // The wound strings glint along their winding.\n      if (i \u003c 5 && y % 2 === 1) L *= 0.85;\n      const u = (y + 0.5 - yA) / span;\n      let wp = 0;\n      let wn = 0;\n      if (a > 0.05 && u > 0 && u \u003c 1) {\n        if (mode > 1) wp = wn = a * Math.abs(Math.sin(mode * PI * u));\n        else {\n          const sn = Math.sin(PI * u);\n          // Just after the pluck the string is two straight pieces with a corner\n          // where the finger left it, and half a period later the same shape\n          // turned over; the corners round off as the high partials die.\n          const t1 = u \u003c p ? u / p : (1 - u) / (1 - p);\n          const t2 = u \u003c 1 - p ? u / (1 - p) : (1 - u) / p;\n          wp = a * (sn + (t1 - sn) * kink);\n          wn = a * (sn + (t2 - sn) * kink);\n        }\n      }\n      const h = 0.5 * (wp + wn);\n      const c0 = 0.5 * (wp - wn);\n      if (h \u003c 0.04) {\n        addLight(buf, x, y, P.col, ci, L);\n        continue;\n      }\n      // A string swinging from side to side spends most of its time near the\n      // ends of its swing, so the blur is brightest at its two edges. Each LED\n      // takes the share of the swing it holds, squared against the edge's, so\n      // the lens draws as two bright curves with the neighbours seen between.\n      const lo = Math.floor(c0 - h + 0.5);\n      const hi = Math.floor(c0 + h + 0.5);\n      let Fp = 0;\n      let top1 = 0;\n      for (let dx = lo; dx \u003c= hi; dx++) {\n        const z = (dx + 0.5 - c0) / h;\n        const Fz = z >= 1 ? 1 : z \u003c= -1 ? 0 : 0.5 + Math.asin(z) / PI;\n        const cov = Fz - Fp;\n        Fp = Fz;\n        cw[dx - lo] = cov;\n        if (cov > top1) top1 = cov;\n      }\n      L *= EDGE / (top1 * top1);\n      for (let dx = lo; dx \u003c= hi; dx++) {\n        const cov = cw[dx - lo];\n        if (cov > 0) addLight(buf, x + dx, y, P.col, ci, L * cov * cov);\n      }\n      // The ringing string lights the air around it faintly in the stage light.\n      const hl = HALO * P.glow[i] * Math.min(1, h);\n      if (hl > 0.004) {\n        const reach = h + 2.5;\n        const h0 = Math.ceil(c0 - reach);\n        const h1 = Math.floor(c0 + reach);\n        for (let dx = h0; dx \u003c= h1; dx++) {\n          const xx = x + dx;\n          if (xx \u003c 0 || xx >= W) continue;\n          const w = hl * (1 - Math.abs(dx - c0) / (reach + 0.5));\n          for (let c = 0; c \u003c 3; c++) buf[(y * W + xx) * 3 + c] += tint[c] * w;\n        }\n      }\n    }\n  }\n  // The frame goes over the strings.\n  const fr = P.frame;\n  const al = P.alpha;\n  for (let p = 0; p \u003c W * H; p++) if (al[p] > 0) for (let o = p * 3; o \u003c p * 3 + 3; o++) buf[o] = fr[o] + buf[o] * (1 - al[p]);\n  // The discs under the neck: brass, bright where they grip the string, and\n  // flashing as they turn when the pedal for their note moves.\n  for (let i = 0; i \u003c NS; i++) {\n    const n = i % 7;\n    const x = P.sx[i];\n    const gl = P.discGlint[n];\n    for (let k = 0; k \u003c 2; k++) {\n      const y = Math.round(k === 0 ? P.disc1[i] : P.disc2[i]);\n      if (y \u003c= P.under[x] + 0.5) continue;\n      const f = P.pedal[n] >= k ? 1 : 0.55;\n      const o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = BRASS[c] * f + GLINT[c] * gl;\n    }\n  }\n  // The pedals in their notches.\n  for (let k = 0; k \u003c 7; k++) {\n    const n = PEDAL_NOTE[k];\n    const yy = BASE_TOP + 4 + 2 * P.pedalPos[n];\n    const y0 = Math.floor(yy);\n    const fy = yy - y0;\n    const gl = 1.05 + 0.4 * P.discGlint[n];\n    for (let x = PEDAL_X[k]; x \u003c= PEDAL_X[k] + 1; x++)\n      for (let j = 0; j \u003c 2; j++) {\n        const w = j === 0 ? 1 - fy : fy;\n        const o = ((y0 + j) * W + x) * 3;\n        for (let c = 0; c \u003c 3; c++) buf[o + c] += (BRASS[c] * gl - buf[o + c]) * w;\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[o]), knee(buf[o + 1]), knee(buf[o + 2]));\n    }\n}\n\n// Light past 170 rolls off towards 255, so strings ringing together keep their\n// edges instead of clipping into one white patch.\nfunction knee(v) {\n  return v \u003c 170 ? v : 255 - 85 * Math.exp(-(v - 170) / 85);\n}\n\n// A string's light on one LED, and GLOW of it on the LED either side.\nfunction addLight(buf, x, y, col, ci, L) {\n  for (let d = -1; d \u003c= 1; d++) {\n    if (x + d \u003c 0 || x + d >= W) continue;\n    const s = d === 0 ? L : L * GLOW;\n    for (let c = 0; c \u003c 3; c++) buf[(y * W + x + d) * 3 + c] += col[ci + c] * s;\n  }\n}\n","layer":{"id":"layer-harp","type":"code","name":"harp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Harp\n// Family:  music\n// Idea:    A concert pedal harp stands the full height of the panel, and each string an unseen harpist plucks blurs into the lens of its vibration and rings away, the bass widest and longest.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the double-action pedal harp (Sebastien Erard, 1810) and the envelope of a plucked string\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Tempo=0.5..3.5, Figure=0..3, Damp=0..1\n//\n// Knob 1: Light. The colour of the stage light on the backdrop and in the ringing strings, starting from a deep blue behind the gilt harp.\n// Knob 2: Tempo. Beats a second: 2 is 120 to the minute, 0.5 is 30 and 3.5 is 210.\n// Knob 3: Figure. What the harpist plays: 0 broken chords rising across the strings with a rolled chord and a glissando at each cadence, 1 rolled chords in both hands, 2 a tune in harmonics, each string ringing in two halves around a still middle, 3 pedal glissandi up and down every bar over the bass.\n// Knob 4: Damp. At the start the strings ring freely, the bass for three seconds; turned up, the left hand stops the bass at each change of chord, and at 1 the palm stops every note as soon as it sounds.\n// Buttons: K1 tap is a glissando up all 29 strings and back down. K2 tap changes key a fifth up: a pedal drops a notch and the discs on that note's strings turn.\n\nconst W = 64;\nconst H = 128;\n// 29 strings from C2 to C6, one LED wide with one LED between them: string i\n// stands in column 5 + 2i. A concert harp has 47, from C1 to G7; the panel\n// holds four octaves and a C.\nconst NS = 29;\nconst SX0 = 5;\n// The underside and the top of the neck, as points the curve passes through.\n// It rises a little off the column, sags over the tenor strings and climbs\n// again to the shoulder: the harmonic curve.\nconst NECK_UNDER = [[0, 12.5], [4, 12.5], [8, 12], [14, 13], [22, 16.5], [30, 20.5], [38, 23.5], [45, 24.5], [51, 23.5], [56, 20.5], [60, 16.5], [63, 14], [67, 13]];\nconst NECK_TOP = [[0, 4], [4, 4], [8, 4], [14, 5.5], [22, 9.5], [30, 14], [38, 17.5], [45, 18.5], [51, 17.5], [56, 14], [59, 11], [61.5, 9.5], [64, 9.5], [67, 11]];\n// The soundboard is straight, from the foot of C2 to the foot of C6.\nconst SB_X0 = 5;\nconst SB_Y0 = 116;\nconst SB_X1 = 61;\nconst SB_Y1 = 27;\n// The base: its top, its bottom, and its back end.\nconst BASE_TOP = 116;\nconst BASE_BOT = 124;\nconst BASE_X1 = 26;\n// The seven pedals in their slots, as the harpist's feet meet them: D C B on\n// the left, E F G A on the right. Up is flat, the middle notch natural, down sharp.\nconst PEDAL_NOTE = [1, 0, 6, 2, 3, 4, 5];\nconst PEDAL_X = [4, 7, 10, 15, 18, 21, 24];\n// Keys a fifth apart add a sharp in this order and take a flat in the other.\nconst SHARPS = [3, 0, 4, 1, 5, 2, 6];\n// Four bars to a phrase, as chords on scale degrees counted from 0. In minor\n// the seventh is raised, so V is major and III and VII are left out.\nconst PROG_MAJOR = [[0, 5, 3, 4], [0, 3, 4, 4], [0, 5, 1, 4], [0, 2, 3, 4], [3, 4, 0, 4], [0, 4, 5, 4]];\nconst PROG_MINOR = [[0, 5, 3, 4], [0, 3, 4, 4], [0, 3, 5, 4], [5, 3, 4, 4]];\n// Broken-chord shapes, as steps up the chord's strings from the bass root,\n// and the beat each note takes: rising eighths, a rise and fall in triplets,\n// and a rocking figure that leaves the bass and swings in the treble.\nconst ARPS = [[[0, 2, 3, 4, 5, 6, 7, 8], 0.5], [[0, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6], 1 / 3], [[0, 4, 6, 7, 9, 7, 6, 4], 0.5]];\n// The tune in harmonics: rhythms for a bar, in beats.\nconst TUNES = [[2, 1, 1], [1, 1, 2], [1, 1, 1, 1], [3, 1], [2, 2]];\n// How much of a string's light the LED either side of it catches.\nconst GLOW = 0.3;\n// Brass for the discs and pedals, and the flash of a disc as it turns.\nconst BRASS = [205, 160, 70];\nconst GLINT = [50, 80, 120];\n// A string at rest, as a share of its full colour; the edges of a ringing\n// string's blur against its flash; and the stage-lit halo round it.\nconst IDLE = 0.38;\nconst EDGE = 1.05;\nconst HALO = 0.3;\n\nfunction hsvInto(out, h, s, v) {\n  for (let c = 0; c \u003c 3; c++) {\n    const k = (5 - 2 * c + 6 * (h - Math.floor(h))) % 6;\n    out[c] = 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\n// A Catmull-Rom curve through the points, read off at every column.\nfunction catmull(a, b, c, d, t) {\n  return 0.5 * (2 * b + (c - a) * t + (2 * a - 5 * b + 4 * c - d) * t * t + (3 * b - a - 3 * c + d) * t * t * t);\n}\n\nfunction curve(pts) {\n  const out = new Float32Array(W);\n  let px = pts[0][0];\n  let py = pts[0][1];\n  for (let k = 0; k \u003c pts.length - 1; k++) {\n    const p = [pts[Math.max(0, k - 1)], pts[k], pts[k + 1], pts[Math.min(pts.length - 1, k + 2)]];\n    for (let s = 1; s \u003c= 32; s++) {\n      const x = catmull(p[0][0], p[1][0], p[2][0], p[3][0], s / 32);\n      const y = catmull(p[0][1], p[1][1], p[2][1], p[3][1], s / 32);\n      for (let c = Math.max(0, Math.ceil(px)); c \u003c= Math.floor(x) && c \u003c W; c++) out[c] = py + ((y - py) * (c - px)) / (x - px);\n      px = x;\n      py = y;\n    }\n  }\n  return out;\n}\n\nfunction boardY(x) {\n  return SB_Y0 + ((x - SB_X0) * (SB_Y1 - SB_Y0)) / (SB_X1 - SB_X0);\n}\n\n// Paints one LED of the frame over what is there, with coverage a.\nfunction paint(P, x, y, r, g, b, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n  if (a > 1) a = 1;\n  const p = y * W + x;\n  const o = p * 3;\n  const fr = P.frame;\n  fr[o] = r * a + fr[o] * (1 - a);\n  fr[o + 1] = g * a + fr[o + 1] * (1 - a);\n  fr[o + 2] = b * a + fr[o + 2] * (1 - a);\n  P.alpha[p] = a + P.alpha[p] * (1 - a);\n}\n\nfunction gilt(P, x, y, f, a) {\n  paint(P, x, y, 225 * f, 172 * f, 70 * f, a);\n}\n\n// The crown on top of the column, carved and gilded, from the finial down\n// through the abacus, a pair of volutes and hanging leaves to the collar: 3 is\n// a highlight, 2 gold, 1 shadow gold, 0 a deep cut, blank is open.\nconst CROWN = [\"  121  \", \"  232  \", \" 12321 \", \"1233332\", \"0111110\", \"2302032\", \"1233321\", \"0122210\", \" 12321 \", \" 01210 \", \" 1221  \"];\n\nfunction buildFrame(P) {\n  const under = P.under;\n  const top = P.top;\n  // The soundbox, seen from the side: its flank tapers from 18 LEDs deep at\n  // the base to 3 at the shoulder, and the back is built of staves, whose\n  // seams show as lines that close in towards the top.\n  const len = Math.hypot(SB_X0 - SB_X1, SB_Y0 - SB_Y1);\n  const ux = (SB_X0 - SB_X1) / len;\n  const uy = (SB_Y0 - SB_Y1) / len;\n  for (let y = 0; y \u003c BASE_TOP; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const vx = x + 0.5 - SB_X1;\n      const vy = y + 0.5 - SB_Y1;\n      // s runs down the soundboard from the shoulder, d out from it into the box.\n      const s = (vx * ux + vy * uy) / len;\n      const d = vx * uy - vy * ux;\n      if (s \u003c -0.15 || d \u003c -1) continue;\n      const D = 3 + 15 * s;\n      const a = clamp01(d + 0.6) * clamp01(D - d + 0.5);\n      if (a \u003c= 0) continue;\n      const q = clamp01((d - 1) / Math.max(1, D - 1));\n      let f = 0.92 - 0.55 * q * q;\n      for (const seam of [0.42, 0.68, 0.87]) f *= 1 - 0.4 * Math.exp(-3 * ((q - seam) * D) ** 2);\n      // Maple, its grain running along the box.\n      f *= 0.93 + 0.07 * Math.sin(s * 140 + q * 7);\n      // The soundboard's edge, pale spruce, along the strings' feet.\n      const e = clamp01(1.7 - d);\n      paint(P, x, y, 165 * f + (228 - 165 * f) * e, 102 * f + (184 - 102 * f) * e, 48 * f + (96 - 48 * f) * e, a);\n    }\n  // The neck: a gilt rim along the top, dark wood with the tuning pins, and\n  // the brass plates of the action along the bottom.\n  for (let x = 3; x \u003c W; x++) {\n    const t = top[x];\n    const u = under[x];\n    for (let y = Math.floor(t); y \u003c= Math.ceil(u); y++) {\n      const a = clamp01(y + 1 - t) * clamp01(u - y);\n      if (a \u003c= 0) continue;\n      const v = (y + 0.5 - t) / (u - t);\n      if (v \u003c 0.2) gilt(P, x, y, 0.95, a);\n      else if (u - y \u003c 2.2) paint(P, x, y, ...BRASS.map((c) => c * (u - y \u003c 1.2 ? 0.54 : 0.72)), a);\n      else paint(P, x, y, 92 * (1 - 0.35 * v), 52 * (1 - 0.35 * v), 24 * (1 - 0.35 * v), a);\n    }\n    // A tuning pin above every string.\n    if (x >= SX0 && (x - SX0) % 2 === 0 && x \u003c= SX0 + 2 * (NS - 1)) paint(P, x, Math.round(u - 3.6), 150, 150, 162, 1);\n  }\n  // The shoulder, where the neck sits on the top of the soundbox.\n  for (let x = 62; x \u003c W; x++)\n    for (let y = Math.floor(under[x]); y \u003c Math.ceil(boardY(x)) + 1; y++) {\n      const f = 0.75 - 0.012 * (y - under[x]);\n      paint(P, x, y, 150 * f, 92 * f, 42 * f, 1);\n    }\n  // A gilt scroll curling on the shoulder.\n  const SCROLL = [[60, 10, 0.7], [61, 9, 1.1], [62, 9, 1.15], [63, 10, 0.95], [63, 11, 0.7], [62, 12, 0.6], [61, 11, 0.45], [62, 11, 1.05]];\n  for (const [x, y, f] of SCROLL) gilt(P, x, y, f, 1);\n  // The column, gilt and round: lit from the front, so the second LED takes\n  // the highlight. Carved leaves hang under the crown and over the foot.\n  const SHADE = [0.55, 1.05, 0.78, 0.42];\n  for (let y = 9; y \u003c BASE_TOP; y++) {\n    let wide = 0;\n    let carve = 0;\n    if (y >= 10 && y \u003c 24) {\n      const ly = (y - 10) % 5;\n      carve = ly \u003c 3 ? 1 : 0;\n      wide = ly === 2 ? 1 : 0;\n    } else if (y === 24 || y === 25 || y === 101 || y === 102) wide = 1;\n    else if (y >= 103 && y \u003c 113) {\n      const ly = (y - 103) % 5;\n      carve = ly > 1 ? 1 : 0;\n      wide = ly === 3 ? 1 : 0;\n    } else if (y >= 113) wide = 2;\n    for (let x = 0; x \u003c 4 + wide; x++) {\n      let f = x \u003c 4 ? SHADE[x] : 0.5;\n      if (carve && x > 0) f *= (x + y) % 2 === 0 ? 1.12 : 0.72;\n      if (y === 24 || y === 101) f *= 1.15;\n      gilt(P, x, y, f, 1);\n    }\n  }\n  for (let y = 0; y \u003c CROWN.length; y++)\n    for (let x = 0; x \u003c CROWN[y].length; x++) {\n      const c = CROWN[y][x];\n      if (c === \" \") continue;\n      gilt(P, x, y, c === \"3\" ? 1.15 : c === \"2\" ? 0.88 : c === \"1\" ? 0.6 : 0.3, 1);\n    }\n  // The base: gilt mouldings above and below dark wood, the pedal slots, and four feet.\n  for (let x = 0; x \u003c= BASE_X1; x++)\n    for (let y = BASE_TOP; y \u003c= BASE_BOT; y++) {\n      if (y > BASE_TOP && y \u003c BASE_BOT) paint(P, x, y, 70, 40, 18, 1);\n      else gilt(P, x, y, y === BASE_TOP ? 0.95 : 0.6, 1);\n    }\n  for (let k = 0; k \u003c 7; k++) for (let y = BASE_TOP + 2; y \u003c= BASE_BOT - 2; y++) paint(P, PEDAL_X[k], y, 16, 10, 6, 1);\n  for (let y = BASE_BOT + 1; y \u003c H - 1; y++)\n    for (let x = 0; x \u003c= BASE_X1; x++) if (x \u003c= 3 || x >= BASE_X1 - 4) gilt(P, x, y, 0.62 - 0.2 * (y - BASE_BOT - 1), 1);\n}\n\nfunction buildStrings(P) {\n  const under = P.under;\n  for (const k of [\"sx\", \"sTop\", \"sBot\", \"disc1\", \"disc2\", \"lenN\", \"tauN\"]) P[k] = new Float32Array(NS);\n  P.col = new Float32Array(NS * 3);\n  let L0 = 0;\n  for (let i = 0; i \u003c NS; i++) {\n    const x = SX0 + 2 * i;\n    P.sx[i] = x;\n    // From the bridge pin under the neck down into the soundboard.\n    P.sTop[i] = under[x] + 0.3;\n    P.sBot[i] = boardY(x);\n    const L = P.sBot[i] - P.sTop[i];\n    if (i === 0) L0 = L;\n    P.lenN[i] = L / L0;\n    // Each disc grips the string a semitone shorter: the natural disc\n    // 1 - 2^(-1/12) of its length below the bridge pin, the sharp 1 - 2^(-1/6).\n    P.disc1[i] = P.sTop[i] + 0.0561 * L;\n    P.disc2[i] = P.sTop[i] + 0.1091 * L;\n    // How long a free string rings, in seconds.\n    P.tauN[i] = 0.42 + 0.85 * P.lenN[i];\n    // Every C red, every F dark blue, the rest gut. The five lowest are\n    // wound wire, bronze, keeping a tint of their colour.\n    const n = i % 7;\n    const c = n === 0 ? [240, 48, 38] : n === 3 ? [38, 62, 215] : [235, 205, 155];\n    const m = i >= 5 ? 0 : n === 0 || n === 3 ? 0.45 : 0.75;\n    const WIRE = [200, 150, 98];\n    for (let k = 0; k \u003c 3; k++) P.col[i * 3 + k] = c[k] + (WIRE[k] - c[k]) * m;\n  }\n}\n\n// Sets the pedals for a key, counted in fifths from C major; the discs of a\n// pedal that moves flash as they turn.\nfunction setKey(P, key, minor) {\n  P.key = key;\n  P.minor = minor;\n  const major = (((4 * key) % 7) + 7) % 7;\n  P.tonic = minor ? (major + 5) % 7 : major;\n  const acc = [0, 0, 0, 0, 0, 0, 0];\n  if (key > 0) for (let k = 0; k \u003c key; k++) acc[SHARPS[k]] = 1;\n  else for (let k = 0; k \u003c -key; k++) acc[SHARPS[6 - k]] = -1;\n  // Harmonic minor raises the seventh: the note under the minor tonic.\n  if (minor) acc[(major + 4) % 7] += 1;\n  for (let n = 0; n \u003c 7; n++)\n    if (acc[n] !== P.pedal[n]) {\n      P.pedal[n] = acc[n];\n      P.discGlint[n] = 1;\n    }\n}\n\nfunction ev(P, at, i, f, kind) {\n  if (i \u003c 0 || i >= NS) return;\n  P.events.push({ at, i, f, kind });\n}\n\nfunction roll(P, at, list, span, f) {\n  for (let k = 0; k \u003c list.length; k++) ev(P, at + (span * k) / Math.max(1, list.length - 1), list[k], f, 0);\n}\n\nfunction gliss(P, at, from, to, span, f) {\n  const n = Math.abs(to - from);\n  const dir = to > from ? 1 : -1;\n  for (let k = 0; k \u003c= n; k++) ev(P, at + (span * k) / Math.max(1, n), from + dir * k, f, 0);\n}\n\nfunction newPhrase(P) {\n  if (P.prog) {\n    const r = Math.random();\n    if (r \u003c 0.2 && P.key \u003c 4) setKey(P, P.key + 1, P.minor);\n    else if (r \u003c 0.35 && P.key > -3) setKey(P, P.key - 1, P.minor);\n    else if (r \u003c 0.55) setKey(P, P.key, !P.minor);\n  }\n  P.prog = pick(P.minor ? PROG_MINOR : PROG_MAJOR);\n  P.style = Math.floor(Math.random() * ARPS.length);\n  P.tune = pick(TUNES);\n  P.phraseBar = 0;\n}\n\n// One bar of music, written from beat `at`.\nfunction compose(P, at, fig) {\n  if (!P.prog || P.phraseBar >= 4) newPhrase(P);\n  const b = P.phraseBar;\n  const r = (P.tonic + P.prog[b]) % 7;\n  const T = [];\n  for (let i = 0; i \u003c NS; i++) if ((i - r + 7) % 7 % 2 === 0 && (i - r + 7) % 7 \u003c 6) T.push(i);\n  const k0 = T.indexOf(r);\n  const tone = (k) => T[Math.min(T.length - 1, k0 + k)];\n  const cad = b === 3;\n  // The left hand damps the bass strings that are not in the new chord.\n  const stop = clamp01((P.damp - 0.12) / 0.4);\n  if (stop > 0)\n    for (let i = 0; i \u003c 14; i++)\n      if (T.indexOf(i) \u003c 0) {\n        P.amp[i] *= 1 - 0.85 * stop;\n        P.glow[i] *= 1 - 0.85 * stop;\n      }\n  if (fig === 0) {\n    if (cad) {\n      roll(P, at, [r, r + 4, r + 7, tone(5), tone(6), tone(7), tone(8)], 0.3, 0.85);\n      gliss(P, at + 2, 3, NS - 1, 1.5, 0.36);\n    } else {\n      const [steps, beat] = ARPS[P.style];\n      for (let n = 0; n \u003c steps.length; n++) ev(P, at + n * beat, tone(steps[n]), n === 0 ? 0.9 : 0.62, 0);\n      // The left hand doubles the root an octave up and takes the fifth on the third beat.\n      ev(P, at + 0.04, r + 7, 0.55, 0);\n      ev(P, at + 2, r + 4, 0.6, 0);\n    }\n  } else if (fig === 1) {\n    roll(P, at, [r, r + 4, r + 7], 0.15, 0.85);\n    roll(P, at + 0.1, [tone(5), tone(6), tone(7), tone(8)], 0.18, 0.7);\n    if (cad) gliss(P, at + 2, NS - 1, 3, 1.5, 0.36);\n    else {\n      roll(P, at + 2, [tone(4), tone(5), tone(6), tone(7)], 0.15, 0.55);\n      roll(P, at + 3, [tone(6), tone(7), tone(8)], 0.12, 0.5);\n    }\n  } else if (fig === 2) {\n    // The left hand breaks the chord under the tune: root, fifth, octave, fifth.\n    ev(P, at, r, 0.7, 0);\n    ev(P, at + 1, r + 4, 0.5, 0);\n    ev(P, at + 2, r + 7, 0.5, 0);\n    ev(P, at + 3, r + 4, 0.45, 0);\n    // Harmonics sound best in the middle of the harp, so the tune keeps to\n    // strings 9 to 22, starting each bar on the chord tone nearest the last note.\n    let p = -99;\n    for (const c of T) if (c >= 9 && c \u003c= 22 && Math.abs(c - P.mel) \u003c Math.abs(p - P.mel)) p = c;\n    const rhythm = cad ? [4] : P.tune;\n    let t = 0;\n    for (let k = 0; k \u003c rhythm.length; k++) {\n      if (k > 0) {\n        const step = Math.random() \u003c 0.7 ? (Math.random() \u003c 0.5 ? -1 : 1) : Math.random() \u003c 0.5 ? -2 : 2;\n        p += step;\n        if (p \u003c 9 || p > 22) p -= 2 * step;\n      }\n      ev(P, at + t, p, 0.95, 1);\n      t += rhythm[k];\n    }\n    P.mel = p;\n  } else {\n    ev(P, at, r, 0.9, 0);\n    ev(P, at + 0.04, r + 7, 0.6, 0);\n    gliss(P, at + 0.25, r + 2, NS - 1, 1.75, 0.4);\n    gliss(P, at + 2, NS - 1, r + 5, 2, 0.34);\n  }\n  P.phraseBar++;\n}\n\nfunction pluck(P, i, f, kind) {\n  const a0 = f * (1.3 + 3.4 * P.lenN[i]) * (kind ? 0.7 : 1);\n  P.amp[i] = Math.max(P.amp[i] * 0.4, a0);\n  P.age[i] = 0;\n  P.mode[i] = kind ? 2 : 1;\n  // Harpists play near the middle of the string; a harmonic is the upper half\n  // plucked while the palm touches the middle.\n  P.pp[i] = kind ? 0.25 : 0.42 + 0.16 * Math.random();\n  P.glow[i] = Math.min(1.2, Math.max(P.glow[i], f));\n  // The same note an octave and two octaves down rings in sympathy, on the\n  // partial that matches: the octave below in two halves, the next in four.\n  for (let m = 2; m \u003c= 4; m *= 2) {\n    const j = i - (m === 2 ? 7 : 14);\n    if (j \u003c 0) break;\n    const s = (0.45 * f * (1.3 + 3.4 * P.lenN[j])) / Math.sqrt(m);\n    if (P.amp[j] \u003c s) {\n      P.amp[j] = s;\n      P.mode[j] = m;\n      P.age[j] = 1;\n      P.glow[j] = Math.max(P.glow[j], 0.25 * f);\n    }\n  }\n}\n\nexport function setup(params) {\n  params.under = curve(NECK_UNDER);\n  params.top = curve(NECK_TOP);\n  for (const k of [\"frame\", \"bg\", \"buf\"]) params[k] = new Float32Array(W * H * 3);\n  params.alpha = new Float32Array(W * H);\n  buildFrame(params);\n  buildStrings(params);\n  params.cw = new Float32Array(32);\n  params.tint = new Float32Array(3);\n  params.lightAt = -1;\n  for (const k of [\"amp\", \"age\", \"pp\", \"mode\", \"glow\"]) params[k] = new Float32Array(NS);\n  for (const k of [\"pedal\", \"pedalPos\", \"discGlint\"]) params[k] = new Float32Array(7);\n  params.events = [];\n  params.beat = 0;\n  params.nextBar = 0;\n  params.prog = null;\n  params.mel = 16;\n  params.light = 0;\n  setKey(params, 0, false);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.light = k[0];\n  P.tempo = Math.max(0.1, k[1]);\n  const fig = Math.max(0, Math.min(3, Math.round(k[2])));\n  P.damp = clamp01(k[3]);\n  P.beat += dt * P.tempo;\n  if (input.btnPressed && input.btnPressed[0]) {\n    const span = 0.9 * P.tempo;\n    gliss(P, P.beat, 0, NS - 1, span, 0.6);\n    gliss(P, P.beat + span + 0.1 * P.tempo, NS - 2, 0, span, 0.5);\n  }\n  if (input.btnPressed && input.btnPressed[1]) setKey(P, P.key >= 4 ? -3 : P.key + 1, P.minor);\n  while (P.nextBar \u003c= P.beat) {\n    compose(P, P.nextBar, fig);\n    P.nextBar += 4;\n  }\n  const evs = P.events;\n  for (let e = evs.length - 1; e >= 0; e--)\n    if (evs[e].at \u003c= P.beat) {\n      const v = evs.splice(e, 1)[0];\n      pluck(P, v.i, v.f, v.kind);\n    }\n  const free = (1 - P.damp) ** 1.5;\n  for (let i = 0; i \u003c NS; i++) {\n    const tau = 0.07 + P.tauN[i] * free;\n    P.amp[i] *= Math.exp(-dt / tau);\n    P.glow[i] *= Math.exp(-dt / (tau * 1.5));\n    P.age[i] += dt;\n  }\n  for (let n = 0; n \u003c 7; n++) {\n    P.discGlint[n] *= Math.exp(-dt / 0.35);\n    P.pedalPos[n] += (P.pedal[n] - P.pedalPos[n]) * Math.min(1, dt * 9);\n  }\n}\n\n// The stage light's hue along the knob: deep blue, violet, magenta and red,\n// then quickly past amber and yellow, which read as brown and olive this dim,\n// to green and teal and back to blue.\nconst GEL = [[0, 0.62], [0.15, 0.76], [0.3, 0.88], [0.46, 0.99], [0.58, 1.3], [0.8, 1.48], [1, 1.62]];\n\nfunction gel(k) {\n  for (let i = 1; i \u003c GEL.length; i++)\n    if (k \u003c= GEL[i][0]) return GEL[i - 1][1] + ((GEL[i][1] - GEL[i - 1][1]) * (k - GEL[i - 1][0])) / (GEL[i][0] - GEL[i - 1][0]);\n  return GEL[GEL.length - 1][1];\n}\n\nfunction backdrop(P) {\n  const bg = P.bg;\n  const tint = P.tint;\n  hsvInto(tint, gel(P.light), 0.78, 1);\n  // A cyclorama lit from the floor and dark at the top, and the stage floor\n  // with a warm pool from the follow spot.\n  const WARM = [255, 222, 175];\n  for (let y = 0; y \u003c H; y++) {\n    const v = clamp01((y - 8) / 118);\n    const lv = y >= H - 2 ? 0.1 : 0.03 + 0.37 * v * v;\n    for (let x = 0; x \u003c W; x++) {\n      const pool = y >= H - 2 ? 0.22 * Math.exp(-((x - 22) * (x - 22)) / 500) : 0;\n      for (let c = 0; c \u003c 3; c++) bg[(y * W + x) * 3 + c] = tint[c] * lv + WARM[c] * pool;\n    }\n  }\n  P.lightAt = P.light;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.lightAt !== P.light) backdrop(P);\n  const buf = P.buf;\n  buf.set(P.bg);\n  const PI = Math.PI;\n  const tint = P.tint;\n  const cw = P.cw;\n  for (let i = 0; i \u003c NS; i++) {\n    const x = P.sx[i];\n    const ci = i * 3;\n    const B = IDLE + 0.7 * P.glow[i];\n    const top = P.sTop[i];\n    const yB = P.sBot[i];\n    const acc = P.pedal[i % 7];\n    const yA = acc \u003c 0 ? top : acc === 0 ? P.disc1[i] : P.disc2[i];\n    const a = P.amp[i];\n    const span = yB - yA;\n    const p = P.pp[i];\n    const kink = Math.exp(-P.age[i] / 0.12);\n    const mode = P.mode[i];\n    for (let y = Math.floor(top); y \u003c Math.ceil(yB); y++) {\n      const cv = Math.min(y + 1, yB) - Math.max(y, top);\n      if (cv \u003c= 0) continue;\n      let L = B * cv;\n      // The wound strings glint along their winding.\n      if (i \u003c 5 && y % 2 === 1) L *= 0.85;\n      const u = (y + 0.5 - yA) / span;\n      let wp = 0;\n      let wn = 0;\n      if (a > 0.05 && u > 0 && u \u003c 1) {\n        if (mode > 1) wp = wn = a * Math.abs(Math.sin(mode * PI * u));\n        else {\n          const sn = Math.sin(PI * u);\n          // Just after the pluck the string is two straight pieces with a corner\n          // where the finger left it, and half a period later the same shape\n          // turned over; the corners round off as the high partials die.\n          const t1 = u \u003c p ? u / p : (1 - u) / (1 - p);\n          const t2 = u \u003c 1 - p ? u / (1 - p) : (1 - u) / p;\n          wp = a * (sn + (t1 - sn) * kink);\n          wn = a * (sn + (t2 - sn) * kink);\n        }\n      }\n      const h = 0.5 * (wp + wn);\n      const c0 = 0.5 * (wp - wn);\n      if (h \u003c 0.04) {\n        addLight(buf, x, y, P.col, ci, L);\n        continue;\n      }\n      // A string swinging from side to side spends most of its time near the\n      // ends of its swing, so the blur is brightest at its two edges. Each LED\n      // takes the share of the swing it holds, squared against the edge's, so\n      // the lens draws as two bright curves with the neighbours seen between.\n      const lo = Math.floor(c0 - h + 0.5);\n      const hi = Math.floor(c0 + h + 0.5);\n      let Fp = 0;\n      let top1 = 0;\n      for (let dx = lo; dx \u003c= hi; dx++) {\n        const z = (dx + 0.5 - c0) / h;\n        const Fz = z >= 1 ? 1 : z \u003c= -1 ? 0 : 0.5 + Math.asin(z) / PI;\n        const cov = Fz - Fp;\n        Fp = Fz;\n        cw[dx - lo] = cov;\n        if (cov > top1) top1 = cov;\n      }\n      L *= EDGE / (top1 * top1);\n      for (let dx = lo; dx \u003c= hi; dx++) {\n        const cov = cw[dx - lo];\n        if (cov > 0) addLight(buf, x + dx, y, P.col, ci, L * cov * cov);\n      }\n      // The ringing string lights the air around it faintly in the stage light.\n      const hl = HALO * P.glow[i] * Math.min(1, h);\n      if (hl > 0.004) {\n        const reach = h + 2.5;\n        const h0 = Math.ceil(c0 - reach);\n        const h1 = Math.floor(c0 + reach);\n        for (let dx = h0; dx \u003c= h1; dx++) {\n          const xx = x + dx;\n          if (xx \u003c 0 || xx >= W) continue;\n          const w = hl * (1 - Math.abs(dx - c0) / (reach + 0.5));\n          for (let c = 0; c \u003c 3; c++) buf[(y * W + xx) * 3 + c] += tint[c] * w;\n        }\n      }\n    }\n  }\n  // The frame goes over the strings.\n  const fr = P.frame;\n  const al = P.alpha;\n  for (let p = 0; p \u003c W * H; p++) if (al[p] > 0) for (let o = p * 3; o \u003c p * 3 + 3; o++) buf[o] = fr[o] + buf[o] * (1 - al[p]);\n  // The discs under the neck: brass, bright where they grip the string, and\n  // flashing as they turn when the pedal for their note moves.\n  for (let i = 0; i \u003c NS; i++) {\n    const n = i % 7;\n    const x = P.sx[i];\n    const gl = P.discGlint[n];\n    for (let k = 0; k \u003c 2; k++) {\n      const y = Math.round(k === 0 ? P.disc1[i] : P.disc2[i]);\n      if (y \u003c= P.under[x] + 0.5) continue;\n      const f = P.pedal[n] >= k ? 1 : 0.55;\n      const o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = BRASS[c] * f + GLINT[c] * gl;\n    }\n  }\n  // The pedals in their notches.\n  for (let k = 0; k \u003c 7; k++) {\n    const n = PEDAL_NOTE[k];\n    const yy = BASE_TOP + 4 + 2 * P.pedalPos[n];\n    const y0 = Math.floor(yy);\n    const fy = yy - y0;\n    const gl = 1.05 + 0.4 * P.discGlint[n];\n    for (let x = PEDAL_X[k]; x \u003c= PEDAL_X[k] + 1; x++)\n      for (let j = 0; j \u003c 2; j++) {\n        const w = j === 0 ? 1 - fy : fy;\n        const o = ((y0 + j) * W + x) * 3;\n        for (let c = 0; c \u003c 3; c++) buf[o + c] += (BRASS[c] * gl - buf[o + c]) * w;\n      }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, knee(buf[o]), knee(buf[o + 1]), knee(buf[o + 2]));\n    }\n}\n\n// Light past 170 rolls off towards 255, so strings ringing together keep their\n// edges instead of clipping into one white patch.\nfunction knee(v) {\n  return v \u003c 170 ? v : 255 - 85 * Math.exp(-(v - 170) / 85);\n}\n\n// A string's light on one LED, and GLOW of it on the LED either side.\nfunction addLight(buf, x, y, col, ci, L) {\n  for (let d = -1; d \u003c= 1; d++) {\n    if (x + d \u003c 0 || x + d >= W) continue;\n    const s = d === 0 ? L : L * GLOW;\n    for (let c = 0; c \u003c 3; c++) buf[(y * W + x + d) * 3 + c] += col[ci + c] * s;\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Tempo=0.5..3.5, Figure=0..3, Damp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The colour of the stage light on the backdrop and in the ringing strings, starting from a deep blue behind the gilt harp."},{"name":"Tempo","min":0.5,"max":3.5,"about":"Beats a second: 2 is 120 to the minute, 0.5 is 30 and 3.5 is 210."},{"name":"Figure","min":0,"max":3,"about":"What the harpist plays: 0 broken chords rising across the strings with a rolled chord and a glissando at each cadence, 1 rolled chords in both hands, 2 a tune in harmonics, each string ringing in two halves around a still middle, 3 pedal glissandi up and down every bar over the bass."},{"name":"Damp","min":0,"max":1,"about":"At the start the strings ring freely, the bass for three seconds; turned up, the left hand stops the bass at each change of chord, and at 1 the palm stops every note as soon as it sounds."}],"start":[0,2,0,0.06],"measures":{"motion":0.151,"detail":0.0758,"edges":0.4257,"complexity":1.512,"coverage":0.8852,"colour":0.2261,"drift":0.0747},"knobResponse":[0.0708,0.0671,0.0617,0.0595]},{"slug":"helter-skelter","title":"Helter Skelter","family":"fair","round":19,"note":"밤 장터의 헬터 스켈터가 128줄을 다 써요. 사람들이 탑 안 계단을 올라 작은 창에 비치고, 꼭대기에서 매트에 앉아 전구 체이스와 함께 탑을 돌아 미끄러져 내려온 뒤 매트를 들고 아래 문으로 돌아가요.","idea":"A helter skelter stands the height of the panel at a night fair, its striped tower under a pointed roof and a flag, and riders climb the stair inside past its little windows, come out of the door at the top, sit on their coir mats and slide down the spiral round and behind the tower and round again under a chase of festoon bulbs, shoot off the run-out at the foot and carry their mats back to the door.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Helter Skelter\n// Family:  fair\n// Idea:    A helter skelter stands the height of the panel at a night fair, its striped tower under a pointed roof and a flag, and riders climb the stair inside past its little windows, come out of the door at the top, sit on their coir mats and slide down the spiral round and behind the tower and round again under a chase of festoon bulbs, shoot off the run-out at the foot and carry their mats back to the door.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the helter skelters of British fairgrounds and seaside piers\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Bulbs=0..1, Speed=0.2..3, Turns=3..6, Stripes=-1..1\n//\n// Knob 1: Bulbs. Turns the festoon bulbs round the colour wheel, and with them the light they throw on the tower, the slide and the sky, starting from warm gold.\n// Knob 2: Speed. How fast the night runs: at 2 a rider takes 8 s to come down three turns, a lit stretch of the chase passes each bulb about once a second, and every 8 s all the bulbs come on together for a second and a half; at 0.2 it is ten times slower.\n// Knob 3: Turns. How many times the slide wraps round the tower, 3 to 6; more turns make a tighter spiral, a longer ride and a longer climb inside.\n// Knob 4: Stripes. The tower's painted stripes: straight up and down near 0, twisting into a barber's pole one way or the other, up to three turns from foot to roof at either end, with the roof's segments twisting after them.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 32;\n// The tower's radius, the slide's outer edge and where the riders sit, in LEDs.\nconst RT = 9;\nconst RO = 20;\nconst RM = 15;\n// How far below the middle of a ring its front edge sits: the panel looks down a little.\nconst TILT = 0.2;\n// The roof's apex, its eaves and their radius; the slide leaves the top door on row 33\n// at the front and comes round to the front on its last turn on row 104; the ground.\nconst YR = 9;\nconst YE = 25;\nconst RR = 13;\nconst YTOP = 33;\nconst YBOT = 104;\nconst YG = 121;\nconst SKY = -1e9;\n// How fast a rider goes round once moving, in radians a second.\nconst OMEGA = 2.5;\nconst STRING = -100;\n\nconst RED = [184, 26, 38];\nconst CREAM = [250, 240, 214];\nconst WOOD = [190, 120, 56];\nconst WALL = [40, 84, 196];\nconst WALL2 = [24, 56, 150];\nconst TRIM = [230, 230, 236];\nconst FLAG = [250, 206, 40];\n// The night's own light on the paint, without the bulbs.\nconst AMB = [0.16, 0.18, 0.3];\nconst SHIRTS = [[200, 40, 60], [40, 110, 210], [240, 240, 240], [50, 170, 80], [240, 170, 30], [150, 70, 200], [30, 190, 190]];\nconst SKINS = [[226, 172, 132], [160, 104, 70], [240, 196, 160], [110, 70, 46]];\nconst HAIRS = [[40, 26, 18], [120, 70, 30], [220, 180, 90], [20, 18, 20], [160, 50, 30]];\nconst MAT = [130, 86, 40];\nconst JEANS = [40, 60, 120];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function setup(params) {\n  const P = params;\n  P.t = 0;\n  P.turns = 0;\n  P.twist = 99;\n  P.alb = new Float32Array(N * 3);\n  P.z = new Float32Array(N);\n  P.lm = new Float32Array(N);\n  P.ph = new Float32Array(N);\n  P.lo = new Float32Array(N);\n  P.kind = new Uint8Array(N);\n  P.win = new Int8Array(N);\n  P.sky = new Float32Array(N * 3);\n  P.halo = new Float32Array(N);\n  P.out = new Float32Array(N * 3);\n  P.pos = new Float32Array(5);\n  // A deep blue night, paler and warmer low down where the fair lights the haze.\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / (H - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      P.sky[o] = 3 + 14 * v * v + 30 * Math.max(0, v - 0.75) ** 2 * 16;\n      P.sky[o + 1] = 4 + 12 * v * v;\n      P.sky[o + 2] = 18 + 30 * v;\n      // The bulbs' glow on the air round the ride.\n      P.halo[y * W + x] = Math.exp(-(((x - CX) / 20) ** 2)) * Math.min(1, Math.max(0, (y - 4) / 30)) * (y \u003c YG ? 1 : 0);\n    }\n  }\n  for (let i = 0; i \u003c 40; i++) {\n    const x = Math.floor(Math.random() * W);\n    const y = Math.floor(Math.random() * 70);\n    const o = (y * W + x) * 3;\n    const b = 30 + Math.random() * 50;\n    P.sky[o] += b;\n    P.sky[o + 1] += b;\n    P.sky[o + 2] += b * 1.1;\n  }\n  // Seven riders, each a seventh of the round behind the one before.\n  P.riders = [];\n  const pick = (a) => a[Math.floor(Math.random() * a.length)];\n  for (let i = 0; i \u003c 7; i++) P.riders.push({ shirt: pick(SHIRTS), skin: pick(SKINS), hair: pick(HAIRS), arms: Math.random() \u003c 0.5, lag: i / 7 + Math.random() * 0.04 });\n}\n\n// Paints one LED of the ride if it is nearer than what is there: its paint c dimmed\n// by f, the bulb light l that reaches it, its place ph on the chase (-1 for none) and\n// how far the light there falls between the chase's lit stretches, lo.\nfunction plot(P, x, y, z, c, l, ph, f, lo = 0.3, kind = 0) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const p = y * W + x;\n  if (z \u003c= P.z[p]) return;\n  P.z[p] = z;\n  P.alb[p * 3] = c[0] * f;\n  P.alb[p * 3 + 1] = c[1] * f;\n  P.alb[p * 3 + 2] = c[2] * f;\n  P.lm[p] = l;\n  P.ph[p] = ph;\n  P.lo[p] = lo;\n  P.kind[p] = kind;\n  P.win[p] = 0;\n}\n\n// The tower's and the roof's paint at an LED: the colour, and how much it is shaded\n// to the sides. The stripes twist with the Stripes knob.\nfunction tower(x, y, twist) {\n  const th = Math.asin(clamp((x - CX) / (RT + 0.5), -1, 1));\n  const turn = th / (Math.PI * 2) + (twist * 3 * (YG - y)) / (YG - YE);\n  return [Math.floor(turn * 12 + 100) & 1 ? CREAM : RED, 0.4 + 0.6 * Math.cos(th)];\n}\n\nfunction roof(x, y, yb, twist) {\n  const r = Math.min(RR, (RR * (y - YR + 0.5)) / (YE - YR)) + 0.5;\n  const th = Math.asin(clamp((x - CX) / r, -1, 1));\n  const c = y > yb - 1 ? TRIM : Math.floor((th / (Math.PI * 2) + 1 + twist * (1 - (y - YR) / (YE - YR))) * 16) & 1 ? CREAM : RED;\n  return [c, 0.35 + 0.65 * Math.cos(th)];\n}\n\nfunction eave(x) {\n  return YE + RR * TILT * Math.cos(Math.asin(clamp((x - CX) / (RR + 0.5), -1, 1)));\n}\n\n// Paints the tower and the roof again for a new twist, leaving the rest as it is.\nfunction repaint(P, twist) {\n  P.twist = twist;\n  for (let p = 0; p \u003c N; p++) {\n    const kind = P.kind[p];\n    if (!kind || P.win[p]) continue;\n    const x = p % W;\n    const y = (p / W) | 0;\n    const [c, f] = kind === 1 ? tower(x, y, twist) : roof(x, y, eave(x), twist);\n    P.alb[p * 3] = c[0] * f;\n    P.alb[p * 3 + 1] = c[1] * f;\n    P.alb[p * 3 + 2] = c[2] * f;\n  }\n}\n\n// The ride for a number of turns and a twist of the stripes: the paint, how near\n// each LED is, how much bulb light reaches it, and where on the slide it is.\nfunction build(P, turns, twist) {\n  P.turns = turns;\n  P.twist = twist;\n  P.kind.fill(0);\n  P.z.fill(SKY);\n  P.alb.fill(0);\n  P.lm.fill(0);\n  P.ph.fill(-1);\n  P.win.fill(0);\n  const T = turns * Math.PI * 2;\n  P.pitch = (YBOT - YTOP) / turns;\n  // The ground, lit round the foot of the tower.\n  for (let y = YG; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) plot(P, x, y, -60, [44, 52, 30], 0.12 + 0.55 * Math.exp(-(((x - CX) / 18) ** 2)), -1, 1);\n  // Festoon strings from the top of the roof out to the ground on both sides.\n  P.strings = [];\n  for (const [ex, ey] of [[-2, 100], [65, 100], [4, 124], [60, 124]]) {\n    const n = Math.ceil(Math.hypot(ex - CX, ey - YR));\n    for (let i = 0; i \u003c= n; i++) {\n      const u = i / n;\n      const x = CX + (ex - CX) * u;\n      const y = YR + 2 + (ey - YR - 2) * u + 6 * u * (1 - u);\n      plot(P, x, y, STRING, [10, 8, 8], 0, -1, 1);\n      if (i % 4 === 2) P.strings.push([Math.round(x), Math.round(y + 1), i]);\n    }\n  }\n  // The tower, which takes the chase from the turn of the slide at its height.\n  for (let y = YE; y \u003c YG; y++)\n    for (let x = CX - RT; x \u003c= CX + RT; x++) {\n      const th = Math.asin(clamp((x - CX) / (RT + 0.5), -1, 1));\n      const [c, f] = tower(x, y, twist);\n      plot(P, x, y, RT * Math.cos(th), c, 1, th + (2 * Math.PI * (y - YTOP)) / P.pitch, f, 0.55, 1);\n    }\n  // The roof, a cone of red and cream segments with a pale trim along the eaves.\n  for (let x = CX - RR; x \u003c= CX + RR; x++) {\n    const yb = eave(x);\n    for (let y = YR; y \u003c= yb; y++) {\n      if (Math.abs(x - CX) > Math.min(RR, (RR * (y - YR + 0.5)) / (YE - YR)) + 0.5) continue;\n      const [c, f] = roof(x, y, yb, twist);\n      plot(P, x, y, 50, c, 0.6, -1, f, 0.3, 2);\n    }\n  }\n  // The slide: a wooden trough round the tower with a blue outer wall and a white\n  // rail on it, from the top door down to the front again on the last turn.\n  for (let f = 0; f \u003c= T; f += 0.02) {\n    const h = YTOP + (YBOT - YTOP) * (f / T);\n    const s = Math.sin(f);\n    const c = Math.cos(f);\n    for (let r = RT; r \u003c= RO; r += 0.5) {\n      const shade = 0.55 + 0.45 * Math.max(0, c * 0.6 + 0.4);\n      plot(P, CX + r * s, h + r * TILT * c, r * c, WOOD, 0.95, f, shade);\n      plot(P, CX + r * s, h + r * TILT * c + 1, r * c - 0.05, WOOD, 0.95, f, shade * 0.55);\n    }\n    const panel = Math.floor((f * RO) / 6) & 1 ? WALL : WALL2;\n    for (let d = 0; d \u003c 4; d++) plot(P, CX + RO * s, h + RO * TILT * c - d + 1, RO * c + 0.1, d === 3 ? TRIM : panel, 0.95, f, c \u003c 0 ? 0.6 : 1);\n  }\n  // The run-out: straight off to the right and down onto the landing.\n  const r0 = YBOT + RM * TILT;\n  for (let u = 0; u \u003c= 1; u += 0.01) {\n    const x = CX + 24 * u;\n    const y = YBOT + (YG - 3 - r0) * u * u;\n    for (let r = RT; r \u003c= RO; r += 0.5) plot(P, x, y + r * TILT, r + 20, WOOD, 0.95, T + u, 1);\n    for (let d = 0; d \u003c 3; d++) plot(P, x, y + RO * TILT - d + 1, RO + 20.5, d === 2 ? TRIM : WALL, 0.95, T + u, 1);\n  }\n  // A pile of mats to land on.\n  for (let y = YG - 4; y \u003c YG; y++) for (let x = 56; x \u003c W; x++) plot(P, x, y, 40, (y + (x >> 1)) & 1 ? MAT : [100, 66, 30], 0.8, -1, 1);\n  // Doors at the top and the foot and little windows on the stair between the turns,\n  // lit from inside. Window k is marked k + 1, the doors 100 and 101.\n  const mark = (x0, x1, y0, y1, id) => {\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const p = y * W + x;\n        // Doors are arched; nothing in front of the tower is cut.\n        if ((id > 99 && y === y0 && (x === x0 || x === x1)) || P.z[p] > RT + 0.1) continue;\n        P.win[p] = id;\n        P.alb[p * 3] = P.alb[p * 3 + 1] = P.alb[p * 3 + 2] = 0;\n      }\n  };\n  mark(CX - 2, CX + 2, YTOP - 7, YTOP - 1, 100);\n  mark(25, 29, YG - 9, YG - 1, 101);\n  for (let k = 0; k \u003c turns; k++) {\n    const wy = Math.round(YTOP + (k + 0.5) * P.pitch + 2);\n    if (wy \u003c= YBOT) mark(CX - 1, CX + 1, wy - 2, wy + 1, k + 1);\n  }\n  // Bulbs along the slide's rail, a little more than 3 LEDs apart.\n  P.bulbs = [];\n  for (let f = 0.1; f \u003c= T; f += 3.2 / RO) P.bulbs.push(f);\n}\n\n// Where a rider is at time u of their round, written into o: x, y, depth, a pose\n// (0 sitting, 1 walking, 2 inside) and which way they face.\nfunction where(P, u, o) {\n  const T = P.turns * Math.PI * 2;\n  const climb = 1 + 1.6 * P.turns;\n  const slide = T / OMEGA + 0.4;\n  const parts = [2.6, climb, 0.7, slide, 1, 0.5];\n  let k = 0;\n  while (k \u003c parts.length - 1 && u > parts[k]) u -= parts[k++];\n  if (k === 0) {\n    // Walking back from the landing to the door at the foot, mat under the arm.\n    const f = clamp(u / parts[0], 0, 1);\n    o[0] = 57 - 30 * f;\n    o[1] = YG + 4;\n    o[2] = 100;\n    o[3] = 1;\n    o[4] = -1;\n  } else if (k === 1) {\n    // Up the stair inside, round and round, to the door at the top.\n    const f = u / climb;\n    o[0] = CX;\n    o[1] = YG - 3 - f * (YG - 3 - YTOP + 2);\n    o[2] = -100;\n    o[3] = 2;\n    o[4] = Math.cos(f * P.turns * Math.PI * 2);\n  } else if (k === 2) {\n    // Out of the top door and down onto the mat.\n    o[0] = CX + 2 * (u / parts[2]);\n    o[1] = YTOP + RM * TILT - 1 + (u / parts[2]);\n    o[2] = RM + 0.5;\n    o[3] = 0;\n    o[4] = 1;\n  } else if (k === 3) {\n    // Down the slide: away from the door slowly, then at the slide's own speed.\n    const f = u \u003c 0.8 ? (OMEGA * u * u) / 1.6 : OMEGA * (u - 0.4);\n    const g = Math.min(f, T);\n    o[0] = CX + RM * Math.sin(g);\n    o[1] = YTOP + (YBOT - YTOP) * (g / T) + RM * TILT * Math.cos(g);\n    o[2] = RM * Math.cos(g) + 0.5;\n    o[3] = 0;\n    o[4] = Math.cos(g) >= 0 ? 1 : -1;\n  } else {\n    // Off the end of the run-out onto the mats, and up.\n    const f = k === 4 ? 1 - (1 - u) ** 2 : 1;\n    const y = YBOT + (YG - 3 - (YBOT + RM * TILT)) * f * f + RM * TILT;\n    o[0] = CX + 24 * f + (k === 5 ? 2 : 0);\n    o[1] = k === 5 ? YG - 4 : y;\n    o[2] = k === 5 ? 60 : RM + 20.5;\n    o[3] = 0;\n    o[4] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const turns = Math.round(clamp(k[2], 3, 6));\n  const twist = clamp(k[3], -1, 1);\n  if (turns !== P.turns) build(P, turns, twist);\n  else if (twist !== P.twist) repaint(P, twist);\n  P.t += (dt * speed) / 2;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const t = P.t;\n  const out = P.out;\n  const col = hsv(0.11 + P.hue, 0.6, 1);\n  const col2 = hsv(0.11 + P.hue + 0.5, 0.7, 1);\n  const warm = [1, 0.86, 0.6];\n  // The chase runs down the spiral, three lit stretches to every two turns, and\n  // the slide and the tower brighten under it.\n  const ct = t * 6;\n  // Every 8 s the operator throws every bulb on for a second and a half.\n  const q = t % 8;\n  const all = Math.min(1, Math.max(0, (q - 4.8) / 0.3)) * Math.min(1, Math.max(0, (6.9 - q) / 0.3));\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const z = P.z[p];\n    if (z === SKY) {\n      const h = P.halo[p] * 70;\n      out[o] = P.sky[o] + col[0] * h;\n      out[o + 1] = P.sky[o + 1] + col[1] * h;\n      out[o + 2] = P.sky[o + 2] + col[2] * h;\n      continue;\n    }\n    const ph = P.ph[p];\n    const lo = P.lo[p];\n    const w = P.lm[p] * (ph \u003c 0 ? 0.8 + 0.2 * all : lo + (1 - lo) * Math.max(all, (0.5 + 0.5 * Math.cos(ph * 1.5 - ct)) ** 2));\n    out[o] = P.alb[o] * (AMB[0] + col[0] * w);\n    out[o + 1] = P.alb[o + 1] * (AMB[1] + col[1] * w);\n    out[o + 2] = P.alb[o + 2] * (AMB[2] + col[2] * w);\n  }\n  // The lamp-lit doors and windows of the stair.\n  const flick = 0.85 + 0.15 * Math.sin(t * 9.3) * Math.sin(t * 3.1);\n  for (let p = 0; p \u003c N; p++) {\n    const id = P.win[p];\n    if (!id) continue;\n    const o = p * 3;\n    out[o] = 230 * flick;\n    out[o + 1] = 150 * flick;\n    out[o + 2] = 70 * flick;\n  }\n  const pos = P.pos;\n  const T = P.turns * Math.PI * 2;\n  const round = 2.6 + 1 + 1.6 * P.turns + 0.7 + T / OMEGA + 0.4 + 1 + 0.5;\n  // The riders, back ones first.\n  const list = [];\n  for (const r of P.riders) {\n    where(P, (((t / round + r.lag) % 1) + 1) % 1 * round, pos);\n    list.push([pos[2], r, pos[0], pos[1], pos[3], pos[4]]);\n  }\n  list.sort((a, b) => a[0] - b[0]);\n  for (const [z, r, x, y, pose, dir] of list) {\n    if (pose === 2) inside(P, out, r, y, dir);\n    else if (pose === 1) walker(out, r, x, y, t);\n    else sitter(P, out, r, x, y, z, dir, t);\n  }\n  // Bulbs on the rail, the eaves and the strings.\n  for (let i = 0; i \u003c P.bulbs.length; i++) {\n    const f = P.bulbs[i];\n    const s = Math.sin(f);\n    const c = Math.cos(f);\n    const x = CX + RO * s;\n    const y = YTOP + (YBOT - YTOP) * (f / T) + RO * TILT * c - 2;\n    const lit = 0.25 + 0.75 * Math.max(all, (0.5 + 0.5 * Math.cos(f * 1.5 - ct)) ** 3);\n    bulb(P, out, x, y, RO * c + 0.3, i & 1 ? col : warm, lit);\n  }\n  for (let x = CX - RR + 1, i = 0; x \u003c= CX + RR - 1; x += 3, i++) {\n    bulb(P, out, x, eave(x) + 1, 60, (i + Math.floor(t * 3)) % 2 ? col2 : warm, 0.85);\n  }\n  for (const [x, y, i] of P.strings) bulb(P, out, x, y, STRING + 1, (i >> 2) % 3 === 0 ? col2 : (i >> 2) % 3 === 1 ? col : warm, Math.max(all, 0.55 + 0.35 * Math.sin(t * 2.1 + i)));\n  // The flag on top, a pennant that ripples in the wind.\n  for (let y = 1; y \u003c YR; y++) paint(out, CX, y, [90, 90, 100], 1);\n  for (let i = 0; i \u003c 9; i++) {\n    const half = 1.6 * (1 - i / 9);\n    const wave = Math.sin(i * 0.8 - t * 7) * (i / 9) * 1.4;\n    for (let d = -Math.ceil(half); d \u003c= Math.ceil(half); d++) if (Math.abs(d) \u003c= half + 0.3) paint(out, CX + 1 + i, 2.5 + d + wave, FLAG, 0.9 - 0.04 * i);\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, Math.min(255, out[o]), Math.min(255, out[o + 1]), Math.min(255, out[o + 2]));\n}\n\nfunction paint(out, x, y, c, f) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const o = (y * W + x) * 3;\n  out[o] = c[0] * f;\n  out[o + 1] = c[1] * f;\n  out[o + 2] = c[2] * f;\n}\n\nfunction bulb(P, out, x, y, z, c, L) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  if (z \u003c P.z[y * W + x] - 0.6) return;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const xx = x + dx;\n      const yy = y + dy;\n      if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n      const o = (yy * W + xx) * 3;\n      const k = dx === 0 && dy === 0 ? 255 : dx === 0 || dy === 0 ? 70 : 28;\n      out[o] += c[0] * k * L;\n      out[o + 1] += c[1] * k * L;\n      out[o + 2] += c[2] * k * L;\n    }\n}\n\n// A rider on a mat, sitting up with the legs out in front, only where nothing\n// nearer stands in front.\nfunction sitter(P, out, r, x, y, z, dir, t) {\n  const put = (fx, dy, c) => {\n    const xx = Math.round(x) + fx * dir;\n    const yy = Math.round(y) + dy;\n    if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) return;\n    if (z \u003c P.z[yy * W + xx] - 0.6) return;\n    const o = (yy * W + xx) * 3;\n    out[o] = c[0];\n    out[o + 1] = c[1];\n    out[o + 2] = c[2];\n  };\n  for (let i = -2; i \u003c= 2; i++) put(i, 0, MAT);\n  put(-1, -1, r.shirt);\n  put(0, -1, JEANS);\n  put(1, -1, JEANS);\n  put(2, -1, [235, 235, 240]);\n  for (let dy = -3; dy \u003c= -2; dy++) {\n    put(-1, dy, r.shirt);\n    put(0, dy, r.shirt);\n  }\n  put(-1, -4, r.skin);\n  put(0, -4, r.skin);\n  put(-1, -5, r.hair);\n  put(0, -5, r.hair);\n  // Half of them throw their arms up on the way down.\n  if (r.arms && Math.sin(t * 3 + x * 0.1) > -0.3) for (let dy = -6; dy \u003c= -4; dy++) put(1, dy, r.skin);\n  else put(1, -3, r.skin);\n}\n\n// A rider walking back to the door with a mat under the arm.\nfunction walker(out, r, x, y, t) {\n  const step = Math.floor(t * 8) & 1;\n  const px = Math.round(x);\n  const py = Math.round(y);\n  paint(out, px, py - 6, r.hair, 1);\n  paint(out, px, py - 5, r.skin, 1);\n  for (let d = 4; d >= 2; d--) paint(out, px, py - d, r.shirt, 1);\n  paint(out, px - 1, py - 4, r.shirt, 0.8);\n  paint(out, px, py - 1, JEANS, 1);\n  paint(out, px - step, py, JEANS, 1);\n  paint(out, px + 1 - step, py, JEANS, 0.8);\n  for (let i = 1; i \u003c= 3; i++) paint(out, px + i, py - 3, MAT, 1);\n}\n\n// A rider on the stair inside, seen only as a shadow crossing a window.\nfunction inside(P, out, r, y, facing) {\n  if (facing \u003c -0.2) return;\n  for (let dy = -4; dy \u003c= 0; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const yy = Math.round(y) + dy;\n      const xx = CX + dx;\n      if (yy \u003c 0 || yy >= H) continue;\n      const p = yy * W + xx;\n      const id = P.win[p];\n      if (!id || id === 101) continue;\n      if (dy === -4 && dx !== 0) continue;\n      const o = p * 3;\n      out[o] = r.shirt[0] * 0.25;\n      out[o + 1] = r.shirt[1] * 0.2;\n      out[o + 2] = r.shirt[2] * 0.2;\n    }\n}\n","layer":{"id":"layer-helter-skelter","type":"code","name":"helter-skelter","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Helter Skelter\n// Family:  fair\n// Idea:    A helter skelter stands the height of the panel at a night fair, its striped tower under a pointed roof and a flag, and riders climb the stair inside past its little windows, come out of the door at the top, sit on their coir mats and slide down the spiral round and behind the tower and round again under a chase of festoon bulbs, shoot off the run-out at the foot and carry their mats back to the door.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the helter skelters of British fairgrounds and seaside piers\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Bulbs=0..1, Speed=0.2..3, Turns=3..6, Stripes=-1..1\n//\n// Knob 1: Bulbs. Turns the festoon bulbs round the colour wheel, and with them the light they throw on the tower, the slide and the sky, starting from warm gold.\n// Knob 2: Speed. How fast the night runs: at 2 a rider takes 8 s to come down three turns, a lit stretch of the chase passes each bulb about once a second, and every 8 s all the bulbs come on together for a second and a half; at 0.2 it is ten times slower.\n// Knob 3: Turns. How many times the slide wraps round the tower, 3 to 6; more turns make a tighter spiral, a longer ride and a longer climb inside.\n// Knob 4: Stripes. The tower's painted stripes: straight up and down near 0, twisting into a barber's pole one way or the other, up to three turns from foot to roof at either end, with the roof's segments twisting after them.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 32;\n// The tower's radius, the slide's outer edge and where the riders sit, in LEDs.\nconst RT = 9;\nconst RO = 20;\nconst RM = 15;\n// How far below the middle of a ring its front edge sits: the panel looks down a little.\nconst TILT = 0.2;\n// The roof's apex, its eaves and their radius; the slide leaves the top door on row 33\n// at the front and comes round to the front on its last turn on row 104; the ground.\nconst YR = 9;\nconst YE = 25;\nconst RR = 13;\nconst YTOP = 33;\nconst YBOT = 104;\nconst YG = 121;\nconst SKY = -1e9;\n// How fast a rider goes round once moving, in radians a second.\nconst OMEGA = 2.5;\nconst STRING = -100;\n\nconst RED = [184, 26, 38];\nconst CREAM = [250, 240, 214];\nconst WOOD = [190, 120, 56];\nconst WALL = [40, 84, 196];\nconst WALL2 = [24, 56, 150];\nconst TRIM = [230, 230, 236];\nconst FLAG = [250, 206, 40];\n// The night's own light on the paint, without the bulbs.\nconst AMB = [0.16, 0.18, 0.3];\nconst SHIRTS = [[200, 40, 60], [40, 110, 210], [240, 240, 240], [50, 170, 80], [240, 170, 30], [150, 70, 200], [30, 190, 190]];\nconst SKINS = [[226, 172, 132], [160, 104, 70], [240, 196, 160], [110, 70, 46]];\nconst HAIRS = [[40, 26, 18], [120, 70, 30], [220, 180, 90], [20, 18, 20], [160, 50, 30]];\nconst MAT = [130, 86, 40];\nconst JEANS = [40, 60, 120];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function setup(params) {\n  const P = params;\n  P.t = 0;\n  P.turns = 0;\n  P.twist = 99;\n  P.alb = new Float32Array(N * 3);\n  P.z = new Float32Array(N);\n  P.lm = new Float32Array(N);\n  P.ph = new Float32Array(N);\n  P.lo = new Float32Array(N);\n  P.kind = new Uint8Array(N);\n  P.win = new Int8Array(N);\n  P.sky = new Float32Array(N * 3);\n  P.halo = new Float32Array(N);\n  P.out = new Float32Array(N * 3);\n  P.pos = new Float32Array(5);\n  // A deep blue night, paler and warmer low down where the fair lights the haze.\n  for (let y = 0; y \u003c H; y++) {\n    const v = y / (H - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      P.sky[o] = 3 + 14 * v * v + 30 * Math.max(0, v - 0.75) ** 2 * 16;\n      P.sky[o + 1] = 4 + 12 * v * v;\n      P.sky[o + 2] = 18 + 30 * v;\n      // The bulbs' glow on the air round the ride.\n      P.halo[y * W + x] = Math.exp(-(((x - CX) / 20) ** 2)) * Math.min(1, Math.max(0, (y - 4) / 30)) * (y \u003c YG ? 1 : 0);\n    }\n  }\n  for (let i = 0; i \u003c 40; i++) {\n    const x = Math.floor(Math.random() * W);\n    const y = Math.floor(Math.random() * 70);\n    const o = (y * W + x) * 3;\n    const b = 30 + Math.random() * 50;\n    P.sky[o] += b;\n    P.sky[o + 1] += b;\n    P.sky[o + 2] += b * 1.1;\n  }\n  // Seven riders, each a seventh of the round behind the one before.\n  P.riders = [];\n  const pick = (a) => a[Math.floor(Math.random() * a.length)];\n  for (let i = 0; i \u003c 7; i++) P.riders.push({ shirt: pick(SHIRTS), skin: pick(SKINS), hair: pick(HAIRS), arms: Math.random() \u003c 0.5, lag: i / 7 + Math.random() * 0.04 });\n}\n\n// Paints one LED of the ride if it is nearer than what is there: its paint c dimmed\n// by f, the bulb light l that reaches it, its place ph on the chase (-1 for none) and\n// how far the light there falls between the chase's lit stretches, lo.\nfunction plot(P, x, y, z, c, l, ph, f, lo = 0.3, kind = 0) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const p = y * W + x;\n  if (z \u003c= P.z[p]) return;\n  P.z[p] = z;\n  P.alb[p * 3] = c[0] * f;\n  P.alb[p * 3 + 1] = c[1] * f;\n  P.alb[p * 3 + 2] = c[2] * f;\n  P.lm[p] = l;\n  P.ph[p] = ph;\n  P.lo[p] = lo;\n  P.kind[p] = kind;\n  P.win[p] = 0;\n}\n\n// The tower's and the roof's paint at an LED: the colour, and how much it is shaded\n// to the sides. The stripes twist with the Stripes knob.\nfunction tower(x, y, twist) {\n  const th = Math.asin(clamp((x - CX) / (RT + 0.5), -1, 1));\n  const turn = th / (Math.PI * 2) + (twist * 3 * (YG - y)) / (YG - YE);\n  return [Math.floor(turn * 12 + 100) & 1 ? CREAM : RED, 0.4 + 0.6 * Math.cos(th)];\n}\n\nfunction roof(x, y, yb, twist) {\n  const r = Math.min(RR, (RR * (y - YR + 0.5)) / (YE - YR)) + 0.5;\n  const th = Math.asin(clamp((x - CX) / r, -1, 1));\n  const c = y > yb - 1 ? TRIM : Math.floor((th / (Math.PI * 2) + 1 + twist * (1 - (y - YR) / (YE - YR))) * 16) & 1 ? CREAM : RED;\n  return [c, 0.35 + 0.65 * Math.cos(th)];\n}\n\nfunction eave(x) {\n  return YE + RR * TILT * Math.cos(Math.asin(clamp((x - CX) / (RR + 0.5), -1, 1)));\n}\n\n// Paints the tower and the roof again for a new twist, leaving the rest as it is.\nfunction repaint(P, twist) {\n  P.twist = twist;\n  for (let p = 0; p \u003c N; p++) {\n    const kind = P.kind[p];\n    if (!kind || P.win[p]) continue;\n    const x = p % W;\n    const y = (p / W) | 0;\n    const [c, f] = kind === 1 ? tower(x, y, twist) : roof(x, y, eave(x), twist);\n    P.alb[p * 3] = c[0] * f;\n    P.alb[p * 3 + 1] = c[1] * f;\n    P.alb[p * 3 + 2] = c[2] * f;\n  }\n}\n\n// The ride for a number of turns and a twist of the stripes: the paint, how near\n// each LED is, how much bulb light reaches it, and where on the slide it is.\nfunction build(P, turns, twist) {\n  P.turns = turns;\n  P.twist = twist;\n  P.kind.fill(0);\n  P.z.fill(SKY);\n  P.alb.fill(0);\n  P.lm.fill(0);\n  P.ph.fill(-1);\n  P.win.fill(0);\n  const T = turns * Math.PI * 2;\n  P.pitch = (YBOT - YTOP) / turns;\n  // The ground, lit round the foot of the tower.\n  for (let y = YG; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) plot(P, x, y, -60, [44, 52, 30], 0.12 + 0.55 * Math.exp(-(((x - CX) / 18) ** 2)), -1, 1);\n  // Festoon strings from the top of the roof out to the ground on both sides.\n  P.strings = [];\n  for (const [ex, ey] of [[-2, 100], [65, 100], [4, 124], [60, 124]]) {\n    const n = Math.ceil(Math.hypot(ex - CX, ey - YR));\n    for (let i = 0; i \u003c= n; i++) {\n      const u = i / n;\n      const x = CX + (ex - CX) * u;\n      const y = YR + 2 + (ey - YR - 2) * u + 6 * u * (1 - u);\n      plot(P, x, y, STRING, [10, 8, 8], 0, -1, 1);\n      if (i % 4 === 2) P.strings.push([Math.round(x), Math.round(y + 1), i]);\n    }\n  }\n  // The tower, which takes the chase from the turn of the slide at its height.\n  for (let y = YE; y \u003c YG; y++)\n    for (let x = CX - RT; x \u003c= CX + RT; x++) {\n      const th = Math.asin(clamp((x - CX) / (RT + 0.5), -1, 1));\n      const [c, f] = tower(x, y, twist);\n      plot(P, x, y, RT * Math.cos(th), c, 1, th + (2 * Math.PI * (y - YTOP)) / P.pitch, f, 0.55, 1);\n    }\n  // The roof, a cone of red and cream segments with a pale trim along the eaves.\n  for (let x = CX - RR; x \u003c= CX + RR; x++) {\n    const yb = eave(x);\n    for (let y = YR; y \u003c= yb; y++) {\n      if (Math.abs(x - CX) > Math.min(RR, (RR * (y - YR + 0.5)) / (YE - YR)) + 0.5) continue;\n      const [c, f] = roof(x, y, yb, twist);\n      plot(P, x, y, 50, c, 0.6, -1, f, 0.3, 2);\n    }\n  }\n  // The slide: a wooden trough round the tower with a blue outer wall and a white\n  // rail on it, from the top door down to the front again on the last turn.\n  for (let f = 0; f \u003c= T; f += 0.02) {\n    const h = YTOP + (YBOT - YTOP) * (f / T);\n    const s = Math.sin(f);\n    const c = Math.cos(f);\n    for (let r = RT; r \u003c= RO; r += 0.5) {\n      const shade = 0.55 + 0.45 * Math.max(0, c * 0.6 + 0.4);\n      plot(P, CX + r * s, h + r * TILT * c, r * c, WOOD, 0.95, f, shade);\n      plot(P, CX + r * s, h + r * TILT * c + 1, r * c - 0.05, WOOD, 0.95, f, shade * 0.55);\n    }\n    const panel = Math.floor((f * RO) / 6) & 1 ? WALL : WALL2;\n    for (let d = 0; d \u003c 4; d++) plot(P, CX + RO * s, h + RO * TILT * c - d + 1, RO * c + 0.1, d === 3 ? TRIM : panel, 0.95, f, c \u003c 0 ? 0.6 : 1);\n  }\n  // The run-out: straight off to the right and down onto the landing.\n  const r0 = YBOT + RM * TILT;\n  for (let u = 0; u \u003c= 1; u += 0.01) {\n    const x = CX + 24 * u;\n    const y = YBOT + (YG - 3 - r0) * u * u;\n    for (let r = RT; r \u003c= RO; r += 0.5) plot(P, x, y + r * TILT, r + 20, WOOD, 0.95, T + u, 1);\n    for (let d = 0; d \u003c 3; d++) plot(P, x, y + RO * TILT - d + 1, RO + 20.5, d === 2 ? TRIM : WALL, 0.95, T + u, 1);\n  }\n  // A pile of mats to land on.\n  for (let y = YG - 4; y \u003c YG; y++) for (let x = 56; x \u003c W; x++) plot(P, x, y, 40, (y + (x >> 1)) & 1 ? MAT : [100, 66, 30], 0.8, -1, 1);\n  // Doors at the top and the foot and little windows on the stair between the turns,\n  // lit from inside. Window k is marked k + 1, the doors 100 and 101.\n  const mark = (x0, x1, y0, y1, id) => {\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const p = y * W + x;\n        // Doors are arched; nothing in front of the tower is cut.\n        if ((id > 99 && y === y0 && (x === x0 || x === x1)) || P.z[p] > RT + 0.1) continue;\n        P.win[p] = id;\n        P.alb[p * 3] = P.alb[p * 3 + 1] = P.alb[p * 3 + 2] = 0;\n      }\n  };\n  mark(CX - 2, CX + 2, YTOP - 7, YTOP - 1, 100);\n  mark(25, 29, YG - 9, YG - 1, 101);\n  for (let k = 0; k \u003c turns; k++) {\n    const wy = Math.round(YTOP + (k + 0.5) * P.pitch + 2);\n    if (wy \u003c= YBOT) mark(CX - 1, CX + 1, wy - 2, wy + 1, k + 1);\n  }\n  // Bulbs along the slide's rail, a little more than 3 LEDs apart.\n  P.bulbs = [];\n  for (let f = 0.1; f \u003c= T; f += 3.2 / RO) P.bulbs.push(f);\n}\n\n// Where a rider is at time u of their round, written into o: x, y, depth, a pose\n// (0 sitting, 1 walking, 2 inside) and which way they face.\nfunction where(P, u, o) {\n  const T = P.turns * Math.PI * 2;\n  const climb = 1 + 1.6 * P.turns;\n  const slide = T / OMEGA + 0.4;\n  const parts = [2.6, climb, 0.7, slide, 1, 0.5];\n  let k = 0;\n  while (k \u003c parts.length - 1 && u > parts[k]) u -= parts[k++];\n  if (k === 0) {\n    // Walking back from the landing to the door at the foot, mat under the arm.\n    const f = clamp(u / parts[0], 0, 1);\n    o[0] = 57 - 30 * f;\n    o[1] = YG + 4;\n    o[2] = 100;\n    o[3] = 1;\n    o[4] = -1;\n  } else if (k === 1) {\n    // Up the stair inside, round and round, to the door at the top.\n    const f = u / climb;\n    o[0] = CX;\n    o[1] = YG - 3 - f * (YG - 3 - YTOP + 2);\n    o[2] = -100;\n    o[3] = 2;\n    o[4] = Math.cos(f * P.turns * Math.PI * 2);\n  } else if (k === 2) {\n    // Out of the top door and down onto the mat.\n    o[0] = CX + 2 * (u / parts[2]);\n    o[1] = YTOP + RM * TILT - 1 + (u / parts[2]);\n    o[2] = RM + 0.5;\n    o[3] = 0;\n    o[4] = 1;\n  } else if (k === 3) {\n    // Down the slide: away from the door slowly, then at the slide's own speed.\n    const f = u \u003c 0.8 ? (OMEGA * u * u) / 1.6 : OMEGA * (u - 0.4);\n    const g = Math.min(f, T);\n    o[0] = CX + RM * Math.sin(g);\n    o[1] = YTOP + (YBOT - YTOP) * (g / T) + RM * TILT * Math.cos(g);\n    o[2] = RM * Math.cos(g) + 0.5;\n    o[3] = 0;\n    o[4] = Math.cos(g) >= 0 ? 1 : -1;\n  } else {\n    // Off the end of the run-out onto the mats, and up.\n    const f = k === 4 ? 1 - (1 - u) ** 2 : 1;\n    const y = YBOT + (YG - 3 - (YBOT + RM * TILT)) * f * f + RM * TILT;\n    o[0] = CX + 24 * f + (k === 5 ? 2 : 0);\n    o[1] = k === 5 ? YG - 4 : y;\n    o[2] = k === 5 ? 60 : RM + 20.5;\n    o[3] = 0;\n    o[4] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const turns = Math.round(clamp(k[2], 3, 6));\n  const twist = clamp(k[3], -1, 1);\n  if (turns !== P.turns) build(P, turns, twist);\n  else if (twist !== P.twist) repaint(P, twist);\n  P.t += (dt * speed) / 2;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const t = P.t;\n  const out = P.out;\n  const col = hsv(0.11 + P.hue, 0.6, 1);\n  const col2 = hsv(0.11 + P.hue + 0.5, 0.7, 1);\n  const warm = [1, 0.86, 0.6];\n  // The chase runs down the spiral, three lit stretches to every two turns, and\n  // the slide and the tower brighten under it.\n  const ct = t * 6;\n  // Every 8 s the operator throws every bulb on for a second and a half.\n  const q = t % 8;\n  const all = Math.min(1, Math.max(0, (q - 4.8) / 0.3)) * Math.min(1, Math.max(0, (6.9 - q) / 0.3));\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const z = P.z[p];\n    if (z === SKY) {\n      const h = P.halo[p] * 70;\n      out[o] = P.sky[o] + col[0] * h;\n      out[o + 1] = P.sky[o + 1] + col[1] * h;\n      out[o + 2] = P.sky[o + 2] + col[2] * h;\n      continue;\n    }\n    const ph = P.ph[p];\n    const lo = P.lo[p];\n    const w = P.lm[p] * (ph \u003c 0 ? 0.8 + 0.2 * all : lo + (1 - lo) * Math.max(all, (0.5 + 0.5 * Math.cos(ph * 1.5 - ct)) ** 2));\n    out[o] = P.alb[o] * (AMB[0] + col[0] * w);\n    out[o + 1] = P.alb[o + 1] * (AMB[1] + col[1] * w);\n    out[o + 2] = P.alb[o + 2] * (AMB[2] + col[2] * w);\n  }\n  // The lamp-lit doors and windows of the stair.\n  const flick = 0.85 + 0.15 * Math.sin(t * 9.3) * Math.sin(t * 3.1);\n  for (let p = 0; p \u003c N; p++) {\n    const id = P.win[p];\n    if (!id) continue;\n    const o = p * 3;\n    out[o] = 230 * flick;\n    out[o + 1] = 150 * flick;\n    out[o + 2] = 70 * flick;\n  }\n  const pos = P.pos;\n  const T = P.turns * Math.PI * 2;\n  const round = 2.6 + 1 + 1.6 * P.turns + 0.7 + T / OMEGA + 0.4 + 1 + 0.5;\n  // The riders, back ones first.\n  const list = [];\n  for (const r of P.riders) {\n    where(P, (((t / round + r.lag) % 1) + 1) % 1 * round, pos);\n    list.push([pos[2], r, pos[0], pos[1], pos[3], pos[4]]);\n  }\n  list.sort((a, b) => a[0] - b[0]);\n  for (const [z, r, x, y, pose, dir] of list) {\n    if (pose === 2) inside(P, out, r, y, dir);\n    else if (pose === 1) walker(out, r, x, y, t);\n    else sitter(P, out, r, x, y, z, dir, t);\n  }\n  // Bulbs on the rail, the eaves and the strings.\n  for (let i = 0; i \u003c P.bulbs.length; i++) {\n    const f = P.bulbs[i];\n    const s = Math.sin(f);\n    const c = Math.cos(f);\n    const x = CX + RO * s;\n    const y = YTOP + (YBOT - YTOP) * (f / T) + RO * TILT * c - 2;\n    const lit = 0.25 + 0.75 * Math.max(all, (0.5 + 0.5 * Math.cos(f * 1.5 - ct)) ** 3);\n    bulb(P, out, x, y, RO * c + 0.3, i & 1 ? col : warm, lit);\n  }\n  for (let x = CX - RR + 1, i = 0; x \u003c= CX + RR - 1; x += 3, i++) {\n    bulb(P, out, x, eave(x) + 1, 60, (i + Math.floor(t * 3)) % 2 ? col2 : warm, 0.85);\n  }\n  for (const [x, y, i] of P.strings) bulb(P, out, x, y, STRING + 1, (i >> 2) % 3 === 0 ? col2 : (i >> 2) % 3 === 1 ? col : warm, Math.max(all, 0.55 + 0.35 * Math.sin(t * 2.1 + i)));\n  // The flag on top, a pennant that ripples in the wind.\n  for (let y = 1; y \u003c YR; y++) paint(out, CX, y, [90, 90, 100], 1);\n  for (let i = 0; i \u003c 9; i++) {\n    const half = 1.6 * (1 - i / 9);\n    const wave = Math.sin(i * 0.8 - t * 7) * (i / 9) * 1.4;\n    for (let d = -Math.ceil(half); d \u003c= Math.ceil(half); d++) if (Math.abs(d) \u003c= half + 0.3) paint(out, CX + 1 + i, 2.5 + d + wave, FLAG, 0.9 - 0.04 * i);\n  }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, Math.min(255, out[o]), Math.min(255, out[o + 1]), Math.min(255, out[o + 2]));\n}\n\nfunction paint(out, x, y, c, f) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const o = (y * W + x) * 3;\n  out[o] = c[0] * f;\n  out[o + 1] = c[1] * f;\n  out[o + 2] = c[2] * f;\n}\n\nfunction bulb(P, out, x, y, z, c, L) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  if (z \u003c P.z[y * W + x] - 0.6) return;\n  for (let dy = -1; dy \u003c= 1; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const xx = x + dx;\n      const yy = y + dy;\n      if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) continue;\n      const o = (yy * W + xx) * 3;\n      const k = dx === 0 && dy === 0 ? 255 : dx === 0 || dy === 0 ? 70 : 28;\n      out[o] += c[0] * k * L;\n      out[o + 1] += c[1] * k * L;\n      out[o + 2] += c[2] * k * L;\n    }\n}\n\n// A rider on a mat, sitting up with the legs out in front, only where nothing\n// nearer stands in front.\nfunction sitter(P, out, r, x, y, z, dir, t) {\n  const put = (fx, dy, c) => {\n    const xx = Math.round(x) + fx * dir;\n    const yy = Math.round(y) + dy;\n    if (xx \u003c 0 || yy \u003c 0 || xx >= W || yy >= H) return;\n    if (z \u003c P.z[yy * W + xx] - 0.6) return;\n    const o = (yy * W + xx) * 3;\n    out[o] = c[0];\n    out[o + 1] = c[1];\n    out[o + 2] = c[2];\n  };\n  for (let i = -2; i \u003c= 2; i++) put(i, 0, MAT);\n  put(-1, -1, r.shirt);\n  put(0, -1, JEANS);\n  put(1, -1, JEANS);\n  put(2, -1, [235, 235, 240]);\n  for (let dy = -3; dy \u003c= -2; dy++) {\n    put(-1, dy, r.shirt);\n    put(0, dy, r.shirt);\n  }\n  put(-1, -4, r.skin);\n  put(0, -4, r.skin);\n  put(-1, -5, r.hair);\n  put(0, -5, r.hair);\n  // Half of them throw their arms up on the way down.\n  if (r.arms && Math.sin(t * 3 + x * 0.1) > -0.3) for (let dy = -6; dy \u003c= -4; dy++) put(1, dy, r.skin);\n  else put(1, -3, r.skin);\n}\n\n// A rider walking back to the door with a mat under the arm.\nfunction walker(out, r, x, y, t) {\n  const step = Math.floor(t * 8) & 1;\n  const px = Math.round(x);\n  const py = Math.round(y);\n  paint(out, px, py - 6, r.hair, 1);\n  paint(out, px, py - 5, r.skin, 1);\n  for (let d = 4; d >= 2; d--) paint(out, px, py - d, r.shirt, 1);\n  paint(out, px - 1, py - 4, r.shirt, 0.8);\n  paint(out, px, py - 1, JEANS, 1);\n  paint(out, px - step, py, JEANS, 1);\n  paint(out, px + 1 - step, py, JEANS, 0.8);\n  for (let i = 1; i \u003c= 3; i++) paint(out, px + i, py - 3, MAT, 1);\n}\n\n// A rider on the stair inside, seen only as a shadow crossing a window.\nfunction inside(P, out, r, y, facing) {\n  if (facing \u003c -0.2) return;\n  for (let dy = -4; dy \u003c= 0; dy++)\n    for (let dx = -1; dx \u003c= 1; dx++) {\n      const yy = Math.round(y) + dy;\n      const xx = CX + dx;\n      if (yy \u003c 0 || yy >= H) continue;\n      const p = yy * W + xx;\n      const id = P.win[p];\n      if (!id || id === 101) continue;\n      if (dy === -4 && dx !== 0) continue;\n      const o = p * 3;\n      out[o] = r.shirt[0] * 0.25;\n      out[o + 1] = r.shirt[1] * 0.2;\n      out[o + 2] = r.shirt[2] * 0.2;\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Bulbs=0..1, Speed=0.2..3, Turns=3..6, Stripes=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Bulbs","min":0,"max":1,"about":"Turns the festoon bulbs round the colour wheel, and with them the light they throw on the tower, the slide and the sky, starting from warm gold."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the night runs: at 2 a rider takes 8 s to come down three turns, a lit stretch of the chase passes each bulb about once a second, and every 8 s all the bulbs come on together for a second and a half; at 0.2 it is ten times slower."},{"name":"Turns","min":3,"max":6,"about":"How many times the slide wraps round the tower, 3 to 6; more turns make a tighter spiral, a longer ride and a longer climb inside."},{"name":"Stripes","min":-1,"max":1,"about":"The tower's painted stripes: straight up and down near 0, twisting into a barber's pole one way or the other, up to three turns from foot to roof at either end, with the roof's segments twisting after them."}],"start":[0,2,3,0.06],"measures":{"motion":0.1978,"detail":0.0529,"edges":0.4142,"complexity":1.5797,"coverage":0.8591,"colour":0.2542,"drift":0.0688},"knobResponse":[0.0829,0.0365,0.0808,0.0347]},{"slug":"high-dive","title":"High Dive","family":"sport","round":23,"note":"밤의 실내 다이빙장을 옆에서 봐요. 다이버가 콘크리트 타워의 지그재그 계단을 올라 10 m 플랫폼 조명 아래 서고, 1.6초 동안 공중제비를 돌며 떨어져 물에 들어가면 물속에 기포 기둥이 오르고 전광판에 심판 일곱 명의 점수가 떠요. K3 이 앞으로 뛰기부터 세 바퀴 반과 비틀기까지 다이빙을 골라요.","idea":"A diving hall at night seen from the side: divers climb a concrete tower and somersault ten metres in a second and a half into a pool whose rippling light plays over the walls while the scoreboard posts the marks.","buttons":"K1 tap sends the waiting diver off now, or hurries the one on the stairs.","code":"// ===== Patternflow pattern =====\n// Title:   High Dive\n// Family:  sport\n// Idea:    A diving hall at night seen from the side: divers climb a concrete tower and somersault ten metres in a second and a half into a pool whose rippling light plays over the walls while the scoreboard posts the marks.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the 10 m platform event in competition diving\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Pool=0..1, Speed=0.2..3, Dive=0..4, Lights=0..1\n//\n// Knob 1: Pool. The colour of the underwater lights, aqua at 0 and once round the wheel; the pool throws it onto the walls.\n// Knob 2: Speed. Real time at 2, where a dive takes about 1.6 s and a diver starts up the stairs every 6 s; ten times slower at 0.2.\n// Knob 3: Dive. The next dive, from a plain forward dive through forward somersaults of 1.5 up to 3.5 to 2.5 with two twists. Harder ones jump higher and take longer to set up. The scoreboard shows the dive and its difficulty.\n// Knob 4: Lights. From a dim night practice with only the tower lamps on to full competition lights.\n// Buttons: K1 tap sends the waiting diver off now, or hurries the one on the stairs.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The still waterline and the pool floor; the pool's end wall stands under the tower.\nconst WL = 86;\nconst POOL_X = 14;\nconst FLOOR = 123;\n// LEDs per metre, and gravity in LEDs per second squared.\nconst PX = 7;\nconst G = 9.81 * PX;\n// The top row of each platform (10 m, 7.5 m, 5 m, 3 m) and where it ends.\nconst PLAT = [16, 33, 51, 65];\nconst PLAT_END = [26, 21, 23, 19];\n// Where a diver's hip stands at the edge of the 10 m platform.\nconst EDGE = 24;\nconst HIP = 5.4;\nconst INTERVAL = 6;\nconst [CLIMB, WALK, STAND, FLY, UNDER, SWIM] = [0, 1, 2, 3, 4, 5];\n\n// Number, difficulty in tenths, somersaults, position (2 is a tuck, 1 a pike),\n// twists, take-off speed in m/s, seconds the diver stands first.\nconst DIVES = [\n  [\"101A\", 16, 0.5, 0, 0, 1.6, 0.5],\n  [\"103B\", 20, 1.5, 1, 0, 2.4, 1.1],\n  [\"105B\", 30, 2.5, 1, 0, 3.0, 1.6],\n  [\"107C\", 37, 3.5, 2, 0, 3.5, 2.1],\n  [\"5154B\", 36, 2.5, 1, 2, 3.2, 2.5],\n];\nconst SUITS = [[255, 40, 60], [40, 110, 255], [255, 215, 30], [30, 220, 120], [220, 60, 255]];\nconst SKIN = [245, 180, 140];\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F = (n) => new Float32Array(n);\n// A fixed hash, so the window lights and the glints repeat on every run.\nconst hash = (a, b) => ((Math.imul(a * 7919 + b, 2654435761) >>> 8) & 1023) / 1024;\nconst hsv = (h, s, v) => [5, 3, 1].map((n) => v - v * s * max(0, min((n + h * 6) % 6, 4 - ((n + h * 6) % 6), 1)));\n\n// The climb, as feet positions: in along the deck, then up the flights that\n// zigzag across the stairwell to the top of the tower.\nconst PATH = [[-6, 83.5], [11, 83.5], [3, 74], [11, 64.5], [3, 57.5], [11, 50.5], [3, 41.5], [11, 32.5], [3, 24], [11, 15.5]];\nconst SEGL = [];\nlet PLEN = 0;\nfor (let j = 1; j \u003c PATH.length; j++) {\n  SEGL.push(hypot(PATH[j][0] - PATH[j - 1][0], PATH[j][1] - PATH[j - 1][1]));\n  PLEN += SEGL[j - 1];\n}\nfunction along(p, out) {\n  let j = 0;\n  while (j \u003c SEGL.length - 1 && p > SEGL[j]) p -= SEGL[j++];\n  const u = cl(p / SEGL[j], 0, 1);\n  const a = PATH[j];\n  const b = PATH[j + 1];\n  out[0] = a[0] + (b[0] - a[0]) * u; out[1] = a[1] + (b[1] - a[1]) * u;\n  out[2] = b[0] >= a[0] ? 1 : -1; out[3] = j > 0 ? 1 : 0;\n}\n\n// The scoreboard's letters, three wide and five tall, one bit an LED.\nconst FONT = { 0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7249, 8: 0x7bef, 9: 0x7bcf, A: 0x2bed, B: 0x6bae, C: 0x3923, D: 0x6b6e, M: 0x5fed, \".\": 4 };\n\n// The hall, built once: what each LED's surface is made of and how much\n// light the lamps and the pool throw on it.\nfunction build(S) {\n  const [alb, em] = [F(N * 3), F(N * 3)];\n  const [lt, lh, rf, cone, wb, wl] = [F(N), F(N), F(N), F(N), F(N), F(N)];\n  const lamp = (x, y, lx) => exp(-((x - lx) ** 2) / 300 - (y - 1) ** 2 / 5200);\n  const glow = (x, y, s) => exp(-((x - 28) ** 2 + (y - 106) ** 2) / s) + exp(-((x - 52) ** 2 + (y - 106) ** 2) / s);\n  const flights = [];\n  for (let j = 1; j \u003c PATH.length - 1; j++) flights.push([PATH[j], PATH[j + 1]]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // Back wall: painted block in panels, catching the pool's light.\n      let a = x % 8 ? [0.42, 0.44, 0.5] : [0.36, 0.37, 0.42];\n      let r = 1;\n      let plat = -1;\n      for (let p = 0; p \u003c 4; p++) if (y >= PLAT[p] && y \u003c= PLAT[p] + 2 && x \u003c= PLAT_END[p]) plat = p;\n      if (y \u003c= 1) {\n        a = [0.18, 0.18, 0.2]; r = 0;\n      } else if (x >= 33 && y >= 3 && y \u003c= 33) {\n        // The scoreboard.\n        a = x === 33 || x === 63 || y === 3 || y === 33 ? [0.5, 0.5, 0.52] : [0.03, 0.03, 0.035];\n        r = 0;\n      } else if (y >= 9 && y \u003c PLAT[0] && x \u003c= 12 && (x % 6 === 0 || y === 9 || y === 12)) {\n        a = [0.7, 0.74, 0.8]; r = 0.5;\n      } else if (plat >= 0) {\n        const row = y - PLAT[plat];\n        const v = x === PLAT_END[plat] ? 0.75 : row === 0 ? 0.92 : row === 1 ? 0.62 : 0.4;\n        a = [v, v * 0.97, v * 0.92]; r = row === 2 ? 1.6 : 0.8;\n      } else if (x \u003c= 12 && y > PLAT[0] && y \u003c 84) {\n        // The tower: two concrete legs and the stairwell between them.\n        if (x \u003c= 1 || x === 12) {\n          const v = 0.62 - 0.06 * (y % 5 === 0);\n          a = [v, v * 0.97, v * 0.9];\n        } else {\n          a = [0.24, 0.24, 0.26];\n          for (const [p, q] of flights) {\n            const lo = min(p[0], q[0]);\n            const hi = max(p[0], q[0]);\n            if (x \u003c lo - 1 || x > hi + 1) continue;\n            const xs = cl(x, lo, hi);\n            const sl = (q[1] - p[1]) / (q[0] - p[0]);\n            const xq = p[0] + floor((xs - p[0]) / 2 + (q[0] > p[0] ? 0 : 0.99)) * 2;\n            const yf = p[1] + sl * (cl(xq, lo, hi) - p[0]);\n            if (y >= ceil(yf) && y \u003c= ceil(yf) + 1) a = [0.74, 0.72, 0.66];\n            else if (abs(y - p[1] + 5.5 - sl * (xs - p[0])) \u003c 0.5 && x >= lo && x \u003c= hi) a = [0.4, 0.4, 0.42];\n          }\n          r = 0.6;\n        }\n      } else if (y >= 84 && y \u003c= 86 && x \u003c POOL_X) {\n        a = [0.8, 0.8, 0.78]; r = 0.7;\n      } else if (y > 86 && x \u003c POOL_X) {\n        // The ground under the deck, hatched like the cut concrete of a section drawing.\n        a = x === POOL_X - 1 ? [0.6, 0.65, 0.66] : [0.2, 0.2, 0.21];\n        r = 0;\n        if (x \u003c POOL_X - 1 && (x + y) % 4 === 0) em.fill(30, i * 3, i * 3 + 3);\n      } else if (y >= 84) {\n        // The gutter on the far side, and the far wall when a wave dips.\n        a = y \u003c 86 ? [0.78, 0.8, 0.82] : [0.6, 0.66, 0.7];\n        r = 0.6;\n      } else if (x >= 31 && x \u003c= 61 && y >= 39 && y \u003c= 63) {\n        // Tall windows onto the night.\n        if ((x - 31) % 10 === 0 || (y - 39) % 12 === 0) {\n          a = [0.33, 0.34, 0.37]; r = 0.6;\n        } else {\n          a = [0.06, 0.07, 0.09]; r = 0.35;\n          const g = (y - 39) / 24;\n          const c = y > 54 && hash(x, y) \u003c 0.1;\n          em.set([6 + 8 * g + 120 * c, 14 + 14 * g + 90 * c, 38 + 26 * g + 40 * c], i * 3);\n        }\n      }\n      // Light reflected up from the pool fades with height above the water.\n      rf[i] = r * exp(-max(0, WL - y) / 30); alb.set(a, i * 3);\n      lt[i] = lamp(x, y, 6) + lamp(x, y, 22); lh[i] = lamp(x, y, 40) + lamp(x, y, 56) + 0.3;\n      // The platform lamp: a cone of hazy light from the ceiling onto the 10 m platform.\n      if (y >= 3 && y \u003c= PLAT[0]) {\n        const e = y - 2;\n        cone[i] = sm((x - 21 + e * 0.85) / 2) * sm((23 + e * 0.42 - x) / 2) * (1 - 0.45 * (e / 14));\n      }\n      // Underwater: light fading with depth, and the tiled far wall with its two lamps.\n      if (x >= POOL_X && y >= WL - 2) {\n        const d = y - WL;\n        let v = 0.34 + 0.42 * exp(-max(0, d) / 13);\n        if ((x - POOL_X) % 5 === 0 || (y - WL) % 5 === 4) v *= 0.82;\n        if (y >= FLOOR) {\n          // The floor, with the dark lane lines running away from us.\n          v = 0.62 - 0.06 * (y - FLOOR);\n          const dx = x - 21 - floor((x - 21) / 14) * 14 - ((y - FLOOR) * (x - 38)) / 40;\n          if (x >= 21 && abs(dx) \u003c 1.2) v = 0.16;\n        }\n        wb[i] = v;\n        wl[i] = 1.1 * glow(x, y, 3) + 0.22 * glow(x, y, 50);\n      }\n    }\n  Object.assign(S, { alb, lt, lh, rf, em, cone, wb, wl });\n}\n\nfunction newDiver(S, st) {\n  S.num = (S.num % 9) + 1;\n  const suit = SUITS[floor(rnd() * 5) % 5];\n  return { st, p: 0, x: 0, t: 0, num: S.num, suit, wait: rnd() * 0.4, hx: -20, face: 1, q: [0, 0, 0, 0, 0, PI, PI, 0] };\n}\n\nexport function setup(params) {\n  const S = { t: 0, divers: [], drops: [], bubs: [], num: 0, spawn: 0.5, spot: 1, surge: 0.1, foam: -9, foamX: 0, hue: 0.49, dive: 0, lights: 0.06 };\n  Object.assign(S, { h: F(W), hv: F(W), sy: new Int16Array(W), sh: F(W), C: F(N * 3) });\n  params.s = S; build(S);\n  const a = newDiver(S, STAND);\n  a.x = EDGE; a.wait = 0; S.divers.push(a);\n  S.board = { num: a.num, suit: a.suit, sc: null, reveal: -1 };\n}\n\n// Poses are [body angle, hip and knee of each leg, each arm, twist].\nfunction walkPose(q, ph, stair) {\n  const s = sin(ph);\n  const lift = 0.35 * stair;\n  q.splice(0, 8, 0.08 * stair, 0.45 * s + lift * max(0, s), 0.5 * max(0, s) + 0.3 * stair, -0.45 * s + lift * max(0, -s), 0.5 * max(0, -s) + 0.3 * stair, PI - 0.4 * s, PI + 0.4 * s, 0);\n}\n\nfunction flyPose(q, D, u) {\n  const [, , turns, pos, twist] = D;\n  const Th = turns * TAU;\n  let th, arm;\n  let s = 0;\n  let tw = 0;\n  if (turns \u003c 1) {\n    // A plain forward dive: arms out like a swallow, closing overhead for the entry.\n    th = Th * min(1, u / 0.9);\n    arm = 1.5 * sm(u / 0.2) * (1 - sm((u - 0.55) / 0.25));\n  } else {\n    // Fold up, spin fast, open out at about three quarters of the fall and line up.\n    const uo = 0.72;\n    th = u \u003c uo ? (Th - 0.5) * (u / uo) ** 1.15 : Th - 0.5 + 0.5 * sm((u - uo) / (0.92 - uo));\n    s = sm(u / 0.1) * (1 - sm((u - uo + 0.03) / 0.08));\n    if (twist) {\n      tw = twist * TAU * sm((u - 0.05) / 0.33); s *= sm((u - 0.38) / 0.06);\n    }\n    arm = s * (pos === 2 ? 1.9 : 2.5);\n    if (twist) arm = max(arm, PI * 0.9 * sm(u / 0.06) * (1 - sm((u - 0.36) / 0.06)));\n  }\n  const hip = s * (pos === 2 ? 2.3 : 2.75);\n  const knee = pos === 2 ? s * 2.6 : 0;\n  q.splice(0, 8, th, hip, knee, hip, knee, arm, arm, tw);\n}\n\nfunction takeOff(S, d) {\n  const D = DIVES[S.dive];\n  Object.assign(d, { dv: D, st: FLY, t: 0, x0: d.hx, y0: d.hy, vx: D[2] \u003c 1 ? 6 : 7.5, vy: D[5] * PX });\n  // Time until the hands reach the water, with the body straight and head down.\n  d.T = (d.vy + sqrt(d.vy * d.vy + 2 * G * (WL - 8.6 - d.y0))) / G;\n  [S.board.code, S.board.dd] = D;\n}\n\nfunction enter(S, d) {\n  const ex = round(d.hx);\n  for (let j = -2; j \u003c= 2; j++) S.hv[cl(ex + j, POOL_X, W - 1)] += 30 * (1 - abs(j) * 0.25);\n  // A rip throws up only a few drops and drags air down the hole.\n  for (let j = 0; j \u003c 12; j++) S.drops.push({ x: ex + (rnd() - 0.5) * 3, y: WL - 1, vx: (rnd() - 0.5) * 16, vy: -(14 + rnd() * 30) });\n  for (let j = 0; j \u003c 4; j++) S.drops.push({ x: ex + rnd() - 0.5, y: WL - 1, vx: (rnd() - 0.5) * 3, vy: -(30 + rnd() * 14) });\n  for (let j = 0; j \u003c 40; j++) bub(S, ex + (rnd() - 0.5) * 4, WL + 1 + rnd() * 8, 6 + rnd() * 16, 1 + rnd() * 2.2, 0.7 + 0.3 * rnd());\n  S.foam = S.t; S.foamX = ex;\n  Object.assign(d, { st: UNDER, t: 0, xE: d.hx, yE: d.hy, vE: G * d.T - d.vy });\n  S.board.reveal = 0.7;\n}\n\n// Seven judges; the two highest and two lowest drop, the middle three times the difficulty.\nfunction score(S) {\n  const b = S.board;\n  const q = 6.4 + rnd() * 2.7;\n  const sc = [];\n  for (let j = 0; j \u003c 7; j++) sc.push(cl(round(q + (rnd() - 0.5) * 1.8), 3, 9));\n  const order = [0, 1, 2, 3, 4, 5, 6].sort((i, j) => sc[i] - sc[j] || i - j);\n  b.drop = order.slice(0, 2).concat(order.slice(5));\n  const v = (sc[order[2]] + sc[order[3]] + sc[order[4]]) * b.dd;\n  b.total = `${floor(v / 10)}.${v % 10}0`;\n  b.sc = sc;\n}\n\nconst onPlat = (v) => v.st === WALK || v.st === STAND;\nconst bub = (S, x, y, vy, life, b) => S.bubs.push({ x, y, vy, life, b });\n\n// K1: whoever is on the platform goes now; failing that, the climber hurries.\nfunction go(S) {\n  const d = S.divers.find(onPlat) || S.divers.find((v) => v.st === CLIMB);\n  if (d) d.hurry = d.go = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1); S.hue = (0.49 + cl(k[0], 0, 1)) % 1; S.dive = cl(round(k[2]), 0, 4);\n  S.lights = cl(k[3], 0, 1);\n  const st = (dt * cl(k[1], 0.2, 3)) / 2;\n  S.t += st;\n  if (input.btnPressed && input.btnPressed[0]) go(S);\n\n  S.spawn -= st;\n  if (S.spawn \u003c= 0 && S.divers.length \u003c 7) {\n    S.spawn += INTERVAL; S.divers.push(newDiver(S, CLIMB));\n  }\n  const busy = S.divers.some(onPlat);\n  const surf = (x) => WL + S.h[cl(round(x), POOL_X, W - 1)];\n  const flying = S.divers.some((v) => v.st === FLY);\n  let lim = PLEN;\n  const pt = [0, 0, 0, 0];\n  const top = PLAT[0] - 0.5 - HIP;\n  for (const d of S.divers) {\n    const q = d.q;\n    if (d.st === CLIMB) {\n      // Climbers keep a flight apart and wait at the top while the platform is taken.\n      d.p = min(d.p + st * 24 * (d.hurry ? 3 : 1), lim);\n      lim = d.p - 16; along(d.p, pt); d.hx = pt[0]; d.hy = pt[1] - HIP; d.face = pt[2];\n      walkPose(q, d.p * 0.55, pt[3]);\n      if (d.p >= PLEN && !busy) {\n        d.st = WALK; d.x = 11;\n        Object.assign(S.board, { num: d.num, suit: d.suit, sc: null, reveal: -1 });\n      }\n    } else if (d.st === WALK) {\n      d.hx = d.x = min(EDGE, d.x + st * 14 * (d.hurry ? 2.5 : 1));\n      d.hy = top; d.face = 1; walkPose(q, d.x * 0.6, 0);\n      if (d.x >= EDGE) {\n        d.st = STAND; d.t = 0;\n      }\n    } else if (d.st === STAND) {\n      d.t += st;\n      const wait = DIVES[S.dive][6] + d.wait;\n      d.hx = EDGE; d.hy = top; walkPose(q, 0, 0);\n      // Arms come up from the sides over the last moment before take-off.\n      q[5] = q[6] = PI * (1 - (d.go ? 1 : sm((d.t - wait + 0.6) / 0.45)));\n      if (d.go || (d.t >= wait && !flying)) takeOff(S, d);\n    } else if (d.st === FLY) {\n      d.t += st; d.hx = d.x0 + d.vx * d.t; d.hy = d.y0 - d.vy * d.t + 0.5 * G * d.t * d.t;\n      flyPose(q, d.dv, min(1, d.t / d.T));\n      if (d.t >= d.T) enter(S, d);\n    } else if (d.st === UNDER) {\n      d.t += st; q[1] = q[2] = q[3] = q[4] = q[7] = 0;\n      if (d.t \u003c 0.5) {\n        // Straight down the hole it punched, slowing fast and trailing air.\n        d.yD = d.hy = d.yE + d.vE * 0.22 * (1 - exp(-d.t / 0.22));\n        d.hx = d.xE; q[0] = PI; q[5] = q[6] = 0;\n        for (let j = 0; j \u003c st * 260; j++) bub(S, d.hx + (rnd() - 0.5) * 3, WL + 1 + rnd() * (d.hy + 6 - WL), 8 + rnd() * 20, 1.4 + rnd() * 2, 0.5 + rnd() / 2);\n      } else {\n        // Turn up and rise to the surface, drifting away from the tower.\n        const u = cl((d.t - 0.5) / 1.1, 0, 1);\n        d.hy = d.yD + (WL + 0.8 - d.yD) * sm(u); d.hx += st * 5;\n        q[0] = PI - 0.75 * PI * sm(u * 1.5) + 0.25 * PI * sm((u - 0.7) / 0.3);\n        q[5] = q[6] = 0.3 + 2 * sm(u);\n        if (u >= 1) {\n          d.st = SWIM; d.t = 0;\n        }\n      }\n    } else if (d.st === SWIM) {\n      // Front crawl to the far side, the arms wheeling over the surface.\n      d.t += st; d.hx += st * 10;\n      d.hy = surf(d.hx) + 0.8;\n      const kick = 0.25 * sin(d.t * 12);\n      q.splice(0, 8, PI / 2, kick, 0.15, -kick, 0.15, d.t * 5.5, d.t * 5.5 + PI, 0);\n      const fx = cl(round(d.hx - 6), POOL_X, W - 1);\n      S.hv[fx] += st * 22;\n      if (rnd() \u003c st * 4.5) S.drops.push({ x: fx, y: WL - 1, vx: (rnd() - 0.5) * 6, vy: -8 - rnd() * 10 });\n    }\n  }\n  S.divers = S.divers.filter((d) => d.st !== SWIM || d.hx \u003c 74);\n\n  // The platform lamp is up while someone is out on the 10 m platform.\n  S.spot += (+S.divers.some(onPlat) - S.spot) * min(1, st * 2.2);\n  const b = S.board;\n  if (b.reveal > 0 && (b.reveal -= st) \u003c= 0) score(S);\n\n  // The surface: a damped string of water heights, kicked by the sparger\n  // under the landing area and by every entry.\n  const { h, hv } = S;\n  const kicks = round(st * 70 + rnd() * 0.5);\n  for (let j = 0; j \u003c kicks; j++) hv[22 + floor(rnd() * 26)] += (rnd() - 0.5) * 9;\n  for (let s = 0; s \u003c 3; s++) {\n    const q = st / 3;\n    for (let x = POOL_X; x \u003c W; x++) {\n      const l = x > POOL_X ? h[x - 1] : h[x];\n      const r = x \u003c W - 1 ? h[x + 1] : h[x];\n      hv[x] += (160 * (l + r - 2 * h[x]) - 22 * h[x] - 1.6 * hv[x]) * q;\n    }\n    for (let x = POOL_X; x \u003c W; x++) h[x] = cl(h[x] + hv[x] * q, -3, 3);\n  }\n  let e = 0;\n  for (let x = POOL_X; x \u003c W; x++) e += h[x] * h[x];\n  const target = min(1.3, sqrt(e / 40));\n  S.surge += (target - S.surge) * min(1, st * (target > S.surge ? 6 : 0.9));\n\n  // Sparger bubbles from the floor, and the entry bubbles rising.\n  const ns = st * 38 + rnd();\n  for (let j = 1; j \u003c ns; j++) bub(S, 22 + rnd() * 26, FLOOR - 1, 26 + rnd() * 16, 3, 0.28 + 0.2 * rnd());\n  for (const u of S.bubs) {\n    u.y -= u.vy * st; u.vy = min(u.vy + st * 6, 40); u.x += sin(u.y * 0.5 + u.b * 20) * 0.25;\n    u.life -= st;\n  }\n  S.bubs = S.bubs.filter((u) => u.life > 0 && u.y > surf(u.x) + 0.5);\n  for (const p of S.drops) {\n    p.vy += G * st; p.x += p.vx * st; p.y += p.vy * st;\n  }\n  S.drops = S.drops.filter((p) => p.vy \u003c 0 || p.y \u003c surf(p.x));\n}\n\n// One figure, its hip at (hx, hy). q[0] turns it forward as it somersaults:\n// 0 stands upright facing `face`.\nconst PART = new Float32Array(80);\nfunction figure(S, hx, hy, face, q, suit, lf, pc) {\n  const { C, sy } = S;\n  const ct = cos(q[7]);\n  const ux = sin(q[0]) * face;\n  const uy = -cos(q[0]);\n  const fx = cos(q[0]) * face * ct;\n  const fy = sin(q[0]) * ct;\n  const nx = hx + ux * 3.8;\n  const ny = hy + uy * 3.8;\n  let n = 0;\n  const part = (ax, ay, bx, by, r, c) => {\n    PART.set([ax, ay, bx, by, r, c], n);\n    n += 6;\n  };\n  const limb = (x, y, a, l) => [x + l * (ux * cos(a) + fx * sin(a)), y + l * (uy * cos(a) + fy * sin(a))];\n  // The far leg and arm go down first, dimmer, so the near ones cover them.\n  for (let side = 0; side \u003c 2; side++) {\n    const a1 = PI - q[1 + side * 2];\n    const [kx, ky] = limb(hx, hy, a1, 2.7);\n    const [ax, ay] = limb(kx, ky, a1 + q[2 + side * 2], 2.7);\n    const [wx, wy] = limb(nx, ny, q[5 + side], 3.4);\n    const c = side ? 0 : 2;\n    if (side) {\n      part(hx, hy, nx, ny, 0.95, 1);\n      part(hx + ux * 5.1, hy + uy * 5.1, hx + ux * 5.1, hy + uy * 5.1, 1.15, 0);\n    }\n    part(hx, hy, kx, ky, 0.75, c);\n    part(kx, ky, ax, ay, 0.6, c);\n    part(nx, ny, wx, wy, 0.5, c);\n  }\n  // Nothing reaches further than 8 LEDs from the hip.\n  for (let y = max(0, floor(hy - 9)); y \u003c= min(H - 1, hy + 9); y++)\n    for (let x = max(0, floor(hx - 9)); x \u003c= min(W - 1, hx + 9); x++) {\n      const i = (y * W + x) * 3;\n      const px = x + 0.5;\n      const py = y + 0.5;\n      // Seen through the water a body is tinted and softer.\n      const wet = x >= POOL_X && y > sy[x];\n      for (let j = 0; j \u003c n; j += 6) {\n        const ax = PART[j];\n        const ay = PART[j + 1];\n        const dx = PART[j + 2] - ax;\n        const dy = PART[j + 3] - ay;\n        const tt = cl(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1);\n        const a = cl(PART[j + 4] + 0.5 - sqrt((px - ax - dx * tt) ** 2 + (py - ay - dy * tt) ** 2), 0, 1);\n        if (a \u003c= 0) continue;\n        const src = PART[j + 5] === 1 ? suit : SKIN;\n        const m = lf * (PART[j + 5] === 2 ? 0.62 : 1);\n        for (let c = 0; c \u003c 3; c++) {\n          const v = wet ? src[c] * m * 0.45 + pc[c] * 70 : src[c] * m;\n          C[i + c] += (v - C[i + c]) * a;\n        }\n      }\n    }\n}\n\nconst put = (S, i, col) => S.C.set(col, i * 3);\nfunction text(S, s, x, y, col) {\n  for (const ch of s) {\n    for (let j = 0; j \u003c 15; j++) if ((FONT[ch] >> (14 - j)) & 1) put(S, (y + floor(j / 3)) * W + x + (j % 3), col);\n    x += ch === \".\" ? 2 : 4;\n  }\n}\nconst width = (s) => s.length * 4 - 1 - (s.includes(\".\") ? 2 : 0);\n// Lamp light, warm white.\nconst WARM = [1, 0.93, 0.8];\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { C, alb, lt, lh, rf, em, cone, wb, wl, h, sy, sh, spot } = S;\n  const pc = hsv(S.hue, 0.78, 1);\n  const k4 = S.lights;\n  const t = S.t;\n  const amb = 0.06 + 0.2 * k4;\n  const wT = 0.55 + 0.45 * k4 + 0.25 * spot;\n  const wH = 0.1 + 0.9 * k4;\n  // Stirred water throws brighter light on the walls and stronger shafts below.\n  const A = (0.3 + 1.7 * S.surge) * 0.9 * 255;\n  const sw = 0.25 + 0.5 * S.surge;\n  for (let x = 0; x \u003c W; x++) {\n    sy[x] = x >= POOL_X ? round(WL + h[x]) : 999;\n    const c = x > POOL_X && x \u003c W - 1 ? h[x - 1] + h[x + 1] - 2 * h[x] : 0;\n    sh[x] = sin(x * 0.5 + t * 1.1 + 2 * h[x]) * sin(x * 0.19 - t * 0.7) - 2.5 * c;\n  }\n  const foamA = max(0, 1 - (t - S.foam) / 0.8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const j = i * 3;\n      if (y \u003c sy[x]) {\n        // The hall, lit by the lamps and by the pool's rippling light.\n        const light = (amb + wT * lt[i] + wH * lh[i]) * 153 + spot * cone[i] * 120;\n        let cs = 0;\n        if (rf[i] > 0.02) {\n          const xc = cl((x + (WL - y) * 0.3) | 0, POOL_X, W - 1);\n          let q1 = 1 - abs(sin(x * 0.62 + 1.7 * sin(y * 0.29 + t * 0.8) + t * 0.9 + 1.8 * h[xc]));\n          let q2 = 1 - abs(sin(y * 0.5 - x * 0.2 + 1.5 * sin(x * 0.33 - t * 1.05) - t * 0.65));\n          q1 *= q1;\n          q2 *= q2;\n          cs = (q1 * q1 * q1 + q2 * q2 * q2) * rf[i] * A;\n        }\n        const hz = spot * cone[i] * (40 + 30 * (1 - k4));\n        for (let c = 0; c \u003c 3; c++) C[j + c] = alb[j + c] * (light * WARM[c] + pc[c] * cs) + em[j + c] + hz * WARM[c];\n      } else if (y === sy[x]) {\n        // The surface line, glinting where it tilts and where the sparger froths.\n        let gl = 0.55 + 0.45 * k4 + min(1, abs((x \u003c W - 1 ? h[x + 1] : h[x]) - h[x - 1]) * 1.2);\n        if (x >= 22 && x \u003c 48 && hash(x, floor(t * 9)) \u003c 0.18) gl += 0.6;\n        gl += 1.5 * foamA * max(0, 1 - abs(x - S.foamX) / 4);\n        for (let c = 0; c \u003c 3; c++) C[j + c] = (pc[c] * 0.5 + 0.5) * 122 * gl;\n      } else {\n        const d = y - WL;\n        let v = wb[i] * 255;\n        if (d \u003c 34 && y \u003c FLOOR) v *= 1 + sw * sh[cl(round(x - d * 0.45), 0, W - 1)] * exp(-d / 20);\n        const top = k4 * 30 * exp(-max(0, d) / 10);\n        for (let c = 0; c \u003c 3; c++) C[j + c] = pc[c] * v + wl[i] * 255 * (0.5 + 0.5 * pc[c]) + top;\n      }\n    }\n\n  // Bubbles catch the underwater light.\n  for (const u of S.bubs) {\n    const x = round(u.x);\n    const y = round(u.y);\n    if (x \u003c POOL_X || x >= W || y \u003c= sy[x] || y >= H) continue;\n    const v = u.b * min(1, u.life * 1.5) * 170;\n    for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] += v * (0.55 + 0.45 * pc[c]);\n  }\n\n  // The lamps along the ceiling: the two over the tower are on at night.\n  for (const [lx, w] of [[6, wT], [22, wT], [40, wH], [56, wH]])\n    for (let y = 0; y \u003c 5; y++)\n      for (let x = lx - 4; x \u003c= lx + 4; x++) {\n        const core = abs(x - lx) \u003c= 1 && y >= 1 && y \u003c= 2;\n        if (!core && x >= 33 && y >= 3) continue;\n        const v = core ? 120 + 135 * min(1, w) : 90 * min(1, w) * exp(-((x - lx) ** 2 + (y - 1.5) ** 2) / 3);\n        for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] = max(C[(y * W + x) * 3 + c], v * WARM[c]);\n      }\n\n  // The scoreboard shows the dive and its difficulty, then the seven judges' marks.\n  const bd = S.board;\n  const [code, dd] = bd.sc ? [bd.code, bd.dd] : DIVES[S.dive];\n  const amber = [255, 170, 40];\n  const white = [235, 235, 225];\n  text(S, String(bd.num), 35, 6, amber);\n  text(S, code, 62 - width(code), 6, white);\n  for (let j = 0; j \u003c 15; j++) put(S, (13 + floor(j / 3)) * W + 35 + (j % 3), bd.suit);\n  text(S, \"10M\", 40, 13, [150, 150, 150]);\n  const dds = `${floor(dd / 10)}.${dd % 10}`;\n  text(S, dds, 62 - width(dds), 13, amber);\n  if (bd.sc) {\n    for (let j = 0; j \u003c 7; j++) text(S, String(bd.sc[j]), 35 + j * 4, 20, bd.drop.includes(j) ? [80, 80, 80] : amber);\n    text(S, bd.total, 62 - width(bd.total), 27, white);\n  }\n\n  const lf = 0.62 + 0.38 * k4;\n  for (const d of S.divers) {\n    const lit = d.st === WALK || d.st === STAND || (d.st === FLY && d.t \u003c 0.4);\n    figure(S, d.hx, d.hy, d.face, d.q, d.suit, min(1.1, lf + (lit ? 0.35 * spot : 0)), pc);\n  }\n\n  // Spray above the water.\n  for (const p of S.drops) {\n    const x = round(p.x);\n    const y = round(p.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] = max(C[(y * W + x) * 3 + c], 210 + 40 * pc[c]);\n  }\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, C[i * 3]), min(255, C[i * 3 + 1]), min(255, C[i * 3 + 2]));\n}\n","layer":{"id":"layer-high-dive","type":"code","name":"high-dive","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   High Dive\n// Family:  sport\n// Idea:    A diving hall at night seen from the side: divers climb a concrete tower and somersault ten metres in a second and a half into a pool whose rippling light plays over the walls while the scoreboard posts the marks.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the 10 m platform event in competition diving\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Pool=0..1, Speed=0.2..3, Dive=0..4, Lights=0..1\n//\n// Knob 1: Pool. The colour of the underwater lights, aqua at 0 and once round the wheel; the pool throws it onto the walls.\n// Knob 2: Speed. Real time at 2, where a dive takes about 1.6 s and a diver starts up the stairs every 6 s; ten times slower at 0.2.\n// Knob 3: Dive. The next dive, from a plain forward dive through forward somersaults of 1.5 up to 3.5 to 2.5 with two twists. Harder ones jump higher and take longer to set up. The scoreboard shows the dive and its difficulty.\n// Knob 4: Lights. From a dim night practice with only the tower lamps on to full competition lights.\n// Buttons: K1 tap sends the waiting diver off now, or hurries the one on the stairs.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The still waterline and the pool floor; the pool's end wall stands under the tower.\nconst WL = 86;\nconst POOL_X = 14;\nconst FLOOR = 123;\n// LEDs per metre, and gravity in LEDs per second squared.\nconst PX = 7;\nconst G = 9.81 * PX;\n// The top row of each platform (10 m, 7.5 m, 5 m, 3 m) and where it ends.\nconst PLAT = [16, 33, 51, 65];\nconst PLAT_END = [26, 21, 23, 19];\n// Where a diver's hip stands at the edge of the 10 m platform.\nconst EDGE = 24;\nconst HIP = 5.4;\nconst INTERVAL = 6;\nconst [CLIMB, WALK, STAND, FLY, UNDER, SWIM] = [0, 1, 2, 3, 4, 5];\n\n// Number, difficulty in tenths, somersaults, position (2 is a tuck, 1 a pike),\n// twists, take-off speed in m/s, seconds the diver stands first.\nconst DIVES = [\n  [\"101A\", 16, 0.5, 0, 0, 1.6, 0.5],\n  [\"103B\", 20, 1.5, 1, 0, 2.4, 1.1],\n  [\"105B\", 30, 2.5, 1, 0, 3.0, 1.6],\n  [\"107C\", 37, 3.5, 2, 0, 3.5, 2.1],\n  [\"5154B\", 36, 2.5, 1, 2, 3.2, 2.5],\n];\nconst SUITS = [[255, 40, 60], [40, 110, 255], [255, 215, 30], [30, 220, 120], [220, 60, 255]];\nconst SKIN = [245, 180, 140];\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (v) => ((v = cl(v, 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F = (n) => new Float32Array(n);\n// A fixed hash, so the window lights and the glints repeat on every run.\nconst hash = (a, b) => ((Math.imul(a * 7919 + b, 2654435761) >>> 8) & 1023) / 1024;\nconst hsv = (h, s, v) => [5, 3, 1].map((n) => v - v * s * max(0, min((n + h * 6) % 6, 4 - ((n + h * 6) % 6), 1)));\n\n// The climb, as feet positions: in along the deck, then up the flights that\n// zigzag across the stairwell to the top of the tower.\nconst PATH = [[-6, 83.5], [11, 83.5], [3, 74], [11, 64.5], [3, 57.5], [11, 50.5], [3, 41.5], [11, 32.5], [3, 24], [11, 15.5]];\nconst SEGL = [];\nlet PLEN = 0;\nfor (let j = 1; j \u003c PATH.length; j++) {\n  SEGL.push(hypot(PATH[j][0] - PATH[j - 1][0], PATH[j][1] - PATH[j - 1][1]));\n  PLEN += SEGL[j - 1];\n}\nfunction along(p, out) {\n  let j = 0;\n  while (j \u003c SEGL.length - 1 && p > SEGL[j]) p -= SEGL[j++];\n  const u = cl(p / SEGL[j], 0, 1);\n  const a = PATH[j];\n  const b = PATH[j + 1];\n  out[0] = a[0] + (b[0] - a[0]) * u; out[1] = a[1] + (b[1] - a[1]) * u;\n  out[2] = b[0] >= a[0] ? 1 : -1; out[3] = j > 0 ? 1 : 0;\n}\n\n// The scoreboard's letters, three wide and five tall, one bit an LED.\nconst FONT = { 0: 0x7b6f, 1: 0x2c97, 2: 0x73e7, 3: 0x73cf, 4: 0x5bc9, 5: 0x79cf, 6: 0x79ef, 7: 0x7249, 8: 0x7bef, 9: 0x7bcf, A: 0x2bed, B: 0x6bae, C: 0x3923, D: 0x6b6e, M: 0x5fed, \".\": 4 };\n\n// The hall, built once: what each LED's surface is made of and how much\n// light the lamps and the pool throw on it.\nfunction build(S) {\n  const [alb, em] = [F(N * 3), F(N * 3)];\n  const [lt, lh, rf, cone, wb, wl] = [F(N), F(N), F(N), F(N), F(N), F(N)];\n  const lamp = (x, y, lx) => exp(-((x - lx) ** 2) / 300 - (y - 1) ** 2 / 5200);\n  const glow = (x, y, s) => exp(-((x - 28) ** 2 + (y - 106) ** 2) / s) + exp(-((x - 52) ** 2 + (y - 106) ** 2) / s);\n  const flights = [];\n  for (let j = 1; j \u003c PATH.length - 1; j++) flights.push([PATH[j], PATH[j + 1]]);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      // Back wall: painted block in panels, catching the pool's light.\n      let a = x % 8 ? [0.42, 0.44, 0.5] : [0.36, 0.37, 0.42];\n      let r = 1;\n      let plat = -1;\n      for (let p = 0; p \u003c 4; p++) if (y >= PLAT[p] && y \u003c= PLAT[p] + 2 && x \u003c= PLAT_END[p]) plat = p;\n      if (y \u003c= 1) {\n        a = [0.18, 0.18, 0.2]; r = 0;\n      } else if (x >= 33 && y >= 3 && y \u003c= 33) {\n        // The scoreboard.\n        a = x === 33 || x === 63 || y === 3 || y === 33 ? [0.5, 0.5, 0.52] : [0.03, 0.03, 0.035];\n        r = 0;\n      } else if (y >= 9 && y \u003c PLAT[0] && x \u003c= 12 && (x % 6 === 0 || y === 9 || y === 12)) {\n        a = [0.7, 0.74, 0.8]; r = 0.5;\n      } else if (plat >= 0) {\n        const row = y - PLAT[plat];\n        const v = x === PLAT_END[plat] ? 0.75 : row === 0 ? 0.92 : row === 1 ? 0.62 : 0.4;\n        a = [v, v * 0.97, v * 0.92]; r = row === 2 ? 1.6 : 0.8;\n      } else if (x \u003c= 12 && y > PLAT[0] && y \u003c 84) {\n        // The tower: two concrete legs and the stairwell between them.\n        if (x \u003c= 1 || x === 12) {\n          const v = 0.62 - 0.06 * (y % 5 === 0);\n          a = [v, v * 0.97, v * 0.9];\n        } else {\n          a = [0.24, 0.24, 0.26];\n          for (const [p, q] of flights) {\n            const lo = min(p[0], q[0]);\n            const hi = max(p[0], q[0]);\n            if (x \u003c lo - 1 || x > hi + 1) continue;\n            const xs = cl(x, lo, hi);\n            const sl = (q[1] - p[1]) / (q[0] - p[0]);\n            const xq = p[0] + floor((xs - p[0]) / 2 + (q[0] > p[0] ? 0 : 0.99)) * 2;\n            const yf = p[1] + sl * (cl(xq, lo, hi) - p[0]);\n            if (y >= ceil(yf) && y \u003c= ceil(yf) + 1) a = [0.74, 0.72, 0.66];\n            else if (abs(y - p[1] + 5.5 - sl * (xs - p[0])) \u003c 0.5 && x >= lo && x \u003c= hi) a = [0.4, 0.4, 0.42];\n          }\n          r = 0.6;\n        }\n      } else if (y >= 84 && y \u003c= 86 && x \u003c POOL_X) {\n        a = [0.8, 0.8, 0.78]; r = 0.7;\n      } else if (y > 86 && x \u003c POOL_X) {\n        // The ground under the deck, hatched like the cut concrete of a section drawing.\n        a = x === POOL_X - 1 ? [0.6, 0.65, 0.66] : [0.2, 0.2, 0.21];\n        r = 0;\n        if (x \u003c POOL_X - 1 && (x + y) % 4 === 0) em.fill(30, i * 3, i * 3 + 3);\n      } else if (y >= 84) {\n        // The gutter on the far side, and the far wall when a wave dips.\n        a = y \u003c 86 ? [0.78, 0.8, 0.82] : [0.6, 0.66, 0.7];\n        r = 0.6;\n      } else if (x >= 31 && x \u003c= 61 && y >= 39 && y \u003c= 63) {\n        // Tall windows onto the night.\n        if ((x - 31) % 10 === 0 || (y - 39) % 12 === 0) {\n          a = [0.33, 0.34, 0.37]; r = 0.6;\n        } else {\n          a = [0.06, 0.07, 0.09]; r = 0.35;\n          const g = (y - 39) / 24;\n          const c = y > 54 && hash(x, y) \u003c 0.1;\n          em.set([6 + 8 * g + 120 * c, 14 + 14 * g + 90 * c, 38 + 26 * g + 40 * c], i * 3);\n        }\n      }\n      // Light reflected up from the pool fades with height above the water.\n      rf[i] = r * exp(-max(0, WL - y) / 30); alb.set(a, i * 3);\n      lt[i] = lamp(x, y, 6) + lamp(x, y, 22); lh[i] = lamp(x, y, 40) + lamp(x, y, 56) + 0.3;\n      // The platform lamp: a cone of hazy light from the ceiling onto the 10 m platform.\n      if (y >= 3 && y \u003c= PLAT[0]) {\n        const e = y - 2;\n        cone[i] = sm((x - 21 + e * 0.85) / 2) * sm((23 + e * 0.42 - x) / 2) * (1 - 0.45 * (e / 14));\n      }\n      // Underwater: light fading with depth, and the tiled far wall with its two lamps.\n      if (x >= POOL_X && y >= WL - 2) {\n        const d = y - WL;\n        let v = 0.34 + 0.42 * exp(-max(0, d) / 13);\n        if ((x - POOL_X) % 5 === 0 || (y - WL) % 5 === 4) v *= 0.82;\n        if (y >= FLOOR) {\n          // The floor, with the dark lane lines running away from us.\n          v = 0.62 - 0.06 * (y - FLOOR);\n          const dx = x - 21 - floor((x - 21) / 14) * 14 - ((y - FLOOR) * (x - 38)) / 40;\n          if (x >= 21 && abs(dx) \u003c 1.2) v = 0.16;\n        }\n        wb[i] = v;\n        wl[i] = 1.1 * glow(x, y, 3) + 0.22 * glow(x, y, 50);\n      }\n    }\n  Object.assign(S, { alb, lt, lh, rf, em, cone, wb, wl });\n}\n\nfunction newDiver(S, st) {\n  S.num = (S.num % 9) + 1;\n  const suit = SUITS[floor(rnd() * 5) % 5];\n  return { st, p: 0, x: 0, t: 0, num: S.num, suit, wait: rnd() * 0.4, hx: -20, face: 1, q: [0, 0, 0, 0, 0, PI, PI, 0] };\n}\n\nexport function setup(params) {\n  const S = { t: 0, divers: [], drops: [], bubs: [], num: 0, spawn: 0.5, spot: 1, surge: 0.1, foam: -9, foamX: 0, hue: 0.49, dive: 0, lights: 0.06 };\n  Object.assign(S, { h: F(W), hv: F(W), sy: new Int16Array(W), sh: F(W), C: F(N * 3) });\n  params.s = S; build(S);\n  const a = newDiver(S, STAND);\n  a.x = EDGE; a.wait = 0; S.divers.push(a);\n  S.board = { num: a.num, suit: a.suit, sc: null, reveal: -1 };\n}\n\n// Poses are [body angle, hip and knee of each leg, each arm, twist].\nfunction walkPose(q, ph, stair) {\n  const s = sin(ph);\n  const lift = 0.35 * stair;\n  q.splice(0, 8, 0.08 * stair, 0.45 * s + lift * max(0, s), 0.5 * max(0, s) + 0.3 * stair, -0.45 * s + lift * max(0, -s), 0.5 * max(0, -s) + 0.3 * stair, PI - 0.4 * s, PI + 0.4 * s, 0);\n}\n\nfunction flyPose(q, D, u) {\n  const [, , turns, pos, twist] = D;\n  const Th = turns * TAU;\n  let th, arm;\n  let s = 0;\n  let tw = 0;\n  if (turns \u003c 1) {\n    // A plain forward dive: arms out like a swallow, closing overhead for the entry.\n    th = Th * min(1, u / 0.9);\n    arm = 1.5 * sm(u / 0.2) * (1 - sm((u - 0.55) / 0.25));\n  } else {\n    // Fold up, spin fast, open out at about three quarters of the fall and line up.\n    const uo = 0.72;\n    th = u \u003c uo ? (Th - 0.5) * (u / uo) ** 1.15 : Th - 0.5 + 0.5 * sm((u - uo) / (0.92 - uo));\n    s = sm(u / 0.1) * (1 - sm((u - uo + 0.03) / 0.08));\n    if (twist) {\n      tw = twist * TAU * sm((u - 0.05) / 0.33); s *= sm((u - 0.38) / 0.06);\n    }\n    arm = s * (pos === 2 ? 1.9 : 2.5);\n    if (twist) arm = max(arm, PI * 0.9 * sm(u / 0.06) * (1 - sm((u - 0.36) / 0.06)));\n  }\n  const hip = s * (pos === 2 ? 2.3 : 2.75);\n  const knee = pos === 2 ? s * 2.6 : 0;\n  q.splice(0, 8, th, hip, knee, hip, knee, arm, arm, tw);\n}\n\nfunction takeOff(S, d) {\n  const D = DIVES[S.dive];\n  Object.assign(d, { dv: D, st: FLY, t: 0, x0: d.hx, y0: d.hy, vx: D[2] \u003c 1 ? 6 : 7.5, vy: D[5] * PX });\n  // Time until the hands reach the water, with the body straight and head down.\n  d.T = (d.vy + sqrt(d.vy * d.vy + 2 * G * (WL - 8.6 - d.y0))) / G;\n  [S.board.code, S.board.dd] = D;\n}\n\nfunction enter(S, d) {\n  const ex = round(d.hx);\n  for (let j = -2; j \u003c= 2; j++) S.hv[cl(ex + j, POOL_X, W - 1)] += 30 * (1 - abs(j) * 0.25);\n  // A rip throws up only a few drops and drags air down the hole.\n  for (let j = 0; j \u003c 12; j++) S.drops.push({ x: ex + (rnd() - 0.5) * 3, y: WL - 1, vx: (rnd() - 0.5) * 16, vy: -(14 + rnd() * 30) });\n  for (let j = 0; j \u003c 4; j++) S.drops.push({ x: ex + rnd() - 0.5, y: WL - 1, vx: (rnd() - 0.5) * 3, vy: -(30 + rnd() * 14) });\n  for (let j = 0; j \u003c 40; j++) bub(S, ex + (rnd() - 0.5) * 4, WL + 1 + rnd() * 8, 6 + rnd() * 16, 1 + rnd() * 2.2, 0.7 + 0.3 * rnd());\n  S.foam = S.t; S.foamX = ex;\n  Object.assign(d, { st: UNDER, t: 0, xE: d.hx, yE: d.hy, vE: G * d.T - d.vy });\n  S.board.reveal = 0.7;\n}\n\n// Seven judges; the two highest and two lowest drop, the middle three times the difficulty.\nfunction score(S) {\n  const b = S.board;\n  const q = 6.4 + rnd() * 2.7;\n  const sc = [];\n  for (let j = 0; j \u003c 7; j++) sc.push(cl(round(q + (rnd() - 0.5) * 1.8), 3, 9));\n  const order = [0, 1, 2, 3, 4, 5, 6].sort((i, j) => sc[i] - sc[j] || i - j);\n  b.drop = order.slice(0, 2).concat(order.slice(5));\n  const v = (sc[order[2]] + sc[order[3]] + sc[order[4]]) * b.dd;\n  b.total = `${floor(v / 10)}.${v % 10}0`;\n  b.sc = sc;\n}\n\nconst onPlat = (v) => v.st === WALK || v.st === STAND;\nconst bub = (S, x, y, vy, life, b) => S.bubs.push({ x, y, vy, life, b });\n\n// K1: whoever is on the platform goes now; failing that, the climber hurries.\nfunction go(S) {\n  const d = S.divers.find(onPlat) || S.divers.find((v) => v.st === CLIMB);\n  if (d) d.hurry = d.go = true;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt || 0, 0, 0.1); S.hue = (0.49 + cl(k[0], 0, 1)) % 1; S.dive = cl(round(k[2]), 0, 4);\n  S.lights = cl(k[3], 0, 1);\n  const st = (dt * cl(k[1], 0.2, 3)) / 2;\n  S.t += st;\n  if (input.btnPressed && input.btnPressed[0]) go(S);\n\n  S.spawn -= st;\n  if (S.spawn \u003c= 0 && S.divers.length \u003c 7) {\n    S.spawn += INTERVAL; S.divers.push(newDiver(S, CLIMB));\n  }\n  const busy = S.divers.some(onPlat);\n  const surf = (x) => WL + S.h[cl(round(x), POOL_X, W - 1)];\n  const flying = S.divers.some((v) => v.st === FLY);\n  let lim = PLEN;\n  const pt = [0, 0, 0, 0];\n  const top = PLAT[0] - 0.5 - HIP;\n  for (const d of S.divers) {\n    const q = d.q;\n    if (d.st === CLIMB) {\n      // Climbers keep a flight apart and wait at the top while the platform is taken.\n      d.p = min(d.p + st * 24 * (d.hurry ? 3 : 1), lim);\n      lim = d.p - 16; along(d.p, pt); d.hx = pt[0]; d.hy = pt[1] - HIP; d.face = pt[2];\n      walkPose(q, d.p * 0.55, pt[3]);\n      if (d.p >= PLEN && !busy) {\n        d.st = WALK; d.x = 11;\n        Object.assign(S.board, { num: d.num, suit: d.suit, sc: null, reveal: -1 });\n      }\n    } else if (d.st === WALK) {\n      d.hx = d.x = min(EDGE, d.x + st * 14 * (d.hurry ? 2.5 : 1));\n      d.hy = top; d.face = 1; walkPose(q, d.x * 0.6, 0);\n      if (d.x >= EDGE) {\n        d.st = STAND; d.t = 0;\n      }\n    } else if (d.st === STAND) {\n      d.t += st;\n      const wait = DIVES[S.dive][6] + d.wait;\n      d.hx = EDGE; d.hy = top; walkPose(q, 0, 0);\n      // Arms come up from the sides over the last moment before take-off.\n      q[5] = q[6] = PI * (1 - (d.go ? 1 : sm((d.t - wait + 0.6) / 0.45)));\n      if (d.go || (d.t >= wait && !flying)) takeOff(S, d);\n    } else if (d.st === FLY) {\n      d.t += st; d.hx = d.x0 + d.vx * d.t; d.hy = d.y0 - d.vy * d.t + 0.5 * G * d.t * d.t;\n      flyPose(q, d.dv, min(1, d.t / d.T));\n      if (d.t >= d.T) enter(S, d);\n    } else if (d.st === UNDER) {\n      d.t += st; q[1] = q[2] = q[3] = q[4] = q[7] = 0;\n      if (d.t \u003c 0.5) {\n        // Straight down the hole it punched, slowing fast and trailing air.\n        d.yD = d.hy = d.yE + d.vE * 0.22 * (1 - exp(-d.t / 0.22));\n        d.hx = d.xE; q[0] = PI; q[5] = q[6] = 0;\n        for (let j = 0; j \u003c st * 260; j++) bub(S, d.hx + (rnd() - 0.5) * 3, WL + 1 + rnd() * (d.hy + 6 - WL), 8 + rnd() * 20, 1.4 + rnd() * 2, 0.5 + rnd() / 2);\n      } else {\n        // Turn up and rise to the surface, drifting away from the tower.\n        const u = cl((d.t - 0.5) / 1.1, 0, 1);\n        d.hy = d.yD + (WL + 0.8 - d.yD) * sm(u); d.hx += st * 5;\n        q[0] = PI - 0.75 * PI * sm(u * 1.5) + 0.25 * PI * sm((u - 0.7) / 0.3);\n        q[5] = q[6] = 0.3 + 2 * sm(u);\n        if (u >= 1) {\n          d.st = SWIM; d.t = 0;\n        }\n      }\n    } else if (d.st === SWIM) {\n      // Front crawl to the far side, the arms wheeling over the surface.\n      d.t += st; d.hx += st * 10;\n      d.hy = surf(d.hx) + 0.8;\n      const kick = 0.25 * sin(d.t * 12);\n      q.splice(0, 8, PI / 2, kick, 0.15, -kick, 0.15, d.t * 5.5, d.t * 5.5 + PI, 0);\n      const fx = cl(round(d.hx - 6), POOL_X, W - 1);\n      S.hv[fx] += st * 22;\n      if (rnd() \u003c st * 4.5) S.drops.push({ x: fx, y: WL - 1, vx: (rnd() - 0.5) * 6, vy: -8 - rnd() * 10 });\n    }\n  }\n  S.divers = S.divers.filter((d) => d.st !== SWIM || d.hx \u003c 74);\n\n  // The platform lamp is up while someone is out on the 10 m platform.\n  S.spot += (+S.divers.some(onPlat) - S.spot) * min(1, st * 2.2);\n  const b = S.board;\n  if (b.reveal > 0 && (b.reveal -= st) \u003c= 0) score(S);\n\n  // The surface: a damped string of water heights, kicked by the sparger\n  // under the landing area and by every entry.\n  const { h, hv } = S;\n  const kicks = round(st * 70 + rnd() * 0.5);\n  for (let j = 0; j \u003c kicks; j++) hv[22 + floor(rnd() * 26)] += (rnd() - 0.5) * 9;\n  for (let s = 0; s \u003c 3; s++) {\n    const q = st / 3;\n    for (let x = POOL_X; x \u003c W; x++) {\n      const l = x > POOL_X ? h[x - 1] : h[x];\n      const r = x \u003c W - 1 ? h[x + 1] : h[x];\n      hv[x] += (160 * (l + r - 2 * h[x]) - 22 * h[x] - 1.6 * hv[x]) * q;\n    }\n    for (let x = POOL_X; x \u003c W; x++) h[x] = cl(h[x] + hv[x] * q, -3, 3);\n  }\n  let e = 0;\n  for (let x = POOL_X; x \u003c W; x++) e += h[x] * h[x];\n  const target = min(1.3, sqrt(e / 40));\n  S.surge += (target - S.surge) * min(1, st * (target > S.surge ? 6 : 0.9));\n\n  // Sparger bubbles from the floor, and the entry bubbles rising.\n  const ns = st * 38 + rnd();\n  for (let j = 1; j \u003c ns; j++) bub(S, 22 + rnd() * 26, FLOOR - 1, 26 + rnd() * 16, 3, 0.28 + 0.2 * rnd());\n  for (const u of S.bubs) {\n    u.y -= u.vy * st; u.vy = min(u.vy + st * 6, 40); u.x += sin(u.y * 0.5 + u.b * 20) * 0.25;\n    u.life -= st;\n  }\n  S.bubs = S.bubs.filter((u) => u.life > 0 && u.y > surf(u.x) + 0.5);\n  for (const p of S.drops) {\n    p.vy += G * st; p.x += p.vx * st; p.y += p.vy * st;\n  }\n  S.drops = S.drops.filter((p) => p.vy \u003c 0 || p.y \u003c surf(p.x));\n}\n\n// One figure, its hip at (hx, hy). q[0] turns it forward as it somersaults:\n// 0 stands upright facing `face`.\nconst PART = new Float32Array(80);\nfunction figure(S, hx, hy, face, q, suit, lf, pc) {\n  const { C, sy } = S;\n  const ct = cos(q[7]);\n  const ux = sin(q[0]) * face;\n  const uy = -cos(q[0]);\n  const fx = cos(q[0]) * face * ct;\n  const fy = sin(q[0]) * ct;\n  const nx = hx + ux * 3.8;\n  const ny = hy + uy * 3.8;\n  let n = 0;\n  const part = (ax, ay, bx, by, r, c) => {\n    PART.set([ax, ay, bx, by, r, c], n);\n    n += 6;\n  };\n  const limb = (x, y, a, l) => [x + l * (ux * cos(a) + fx * sin(a)), y + l * (uy * cos(a) + fy * sin(a))];\n  // The far leg and arm go down first, dimmer, so the near ones cover them.\n  for (let side = 0; side \u003c 2; side++) {\n    const a1 = PI - q[1 + side * 2];\n    const [kx, ky] = limb(hx, hy, a1, 2.7);\n    const [ax, ay] = limb(kx, ky, a1 + q[2 + side * 2], 2.7);\n    const [wx, wy] = limb(nx, ny, q[5 + side], 3.4);\n    const c = side ? 0 : 2;\n    if (side) {\n      part(hx, hy, nx, ny, 0.95, 1);\n      part(hx + ux * 5.1, hy + uy * 5.1, hx + ux * 5.1, hy + uy * 5.1, 1.15, 0);\n    }\n    part(hx, hy, kx, ky, 0.75, c);\n    part(kx, ky, ax, ay, 0.6, c);\n    part(nx, ny, wx, wy, 0.5, c);\n  }\n  // Nothing reaches further than 8 LEDs from the hip.\n  for (let y = max(0, floor(hy - 9)); y \u003c= min(H - 1, hy + 9); y++)\n    for (let x = max(0, floor(hx - 9)); x \u003c= min(W - 1, hx + 9); x++) {\n      const i = (y * W + x) * 3;\n      const px = x + 0.5;\n      const py = y + 0.5;\n      // Seen through the water a body is tinted and softer.\n      const wet = x >= POOL_X && y > sy[x];\n      for (let j = 0; j \u003c n; j += 6) {\n        const ax = PART[j];\n        const ay = PART[j + 1];\n        const dx = PART[j + 2] - ax;\n        const dy = PART[j + 3] - ay;\n        const tt = cl(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy + 1e-6), 0, 1);\n        const a = cl(PART[j + 4] + 0.5 - sqrt((px - ax - dx * tt) ** 2 + (py - ay - dy * tt) ** 2), 0, 1);\n        if (a \u003c= 0) continue;\n        const src = PART[j + 5] === 1 ? suit : SKIN;\n        const m = lf * (PART[j + 5] === 2 ? 0.62 : 1);\n        for (let c = 0; c \u003c 3; c++) {\n          const v = wet ? src[c] * m * 0.45 + pc[c] * 70 : src[c] * m;\n          C[i + c] += (v - C[i + c]) * a;\n        }\n      }\n    }\n}\n\nconst put = (S, i, col) => S.C.set(col, i * 3);\nfunction text(S, s, x, y, col) {\n  for (const ch of s) {\n    for (let j = 0; j \u003c 15; j++) if ((FONT[ch] >> (14 - j)) & 1) put(S, (y + floor(j / 3)) * W + x + (j % 3), col);\n    x += ch === \".\" ? 2 : 4;\n  }\n}\nconst width = (s) => s.length * 4 - 1 - (s.includes(\".\") ? 2 : 0);\n// Lamp light, warm white.\nconst WARM = [1, 0.93, 0.8];\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S) return;\n  const { C, alb, lt, lh, rf, em, cone, wb, wl, h, sy, sh, spot } = S;\n  const pc = hsv(S.hue, 0.78, 1);\n  const k4 = S.lights;\n  const t = S.t;\n  const amb = 0.06 + 0.2 * k4;\n  const wT = 0.55 + 0.45 * k4 + 0.25 * spot;\n  const wH = 0.1 + 0.9 * k4;\n  // Stirred water throws brighter light on the walls and stronger shafts below.\n  const A = (0.3 + 1.7 * S.surge) * 0.9 * 255;\n  const sw = 0.25 + 0.5 * S.surge;\n  for (let x = 0; x \u003c W; x++) {\n    sy[x] = x >= POOL_X ? round(WL + h[x]) : 999;\n    const c = x > POOL_X && x \u003c W - 1 ? h[x - 1] + h[x + 1] - 2 * h[x] : 0;\n    sh[x] = sin(x * 0.5 + t * 1.1 + 2 * h[x]) * sin(x * 0.19 - t * 0.7) - 2.5 * c;\n  }\n  const foamA = max(0, 1 - (t - S.foam) / 0.8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const j = i * 3;\n      if (y \u003c sy[x]) {\n        // The hall, lit by the lamps and by the pool's rippling light.\n        const light = (amb + wT * lt[i] + wH * lh[i]) * 153 + spot * cone[i] * 120;\n        let cs = 0;\n        if (rf[i] > 0.02) {\n          const xc = cl((x + (WL - y) * 0.3) | 0, POOL_X, W - 1);\n          let q1 = 1 - abs(sin(x * 0.62 + 1.7 * sin(y * 0.29 + t * 0.8) + t * 0.9 + 1.8 * h[xc]));\n          let q2 = 1 - abs(sin(y * 0.5 - x * 0.2 + 1.5 * sin(x * 0.33 - t * 1.05) - t * 0.65));\n          q1 *= q1;\n          q2 *= q2;\n          cs = (q1 * q1 * q1 + q2 * q2 * q2) * rf[i] * A;\n        }\n        const hz = spot * cone[i] * (40 + 30 * (1 - k4));\n        for (let c = 0; c \u003c 3; c++) C[j + c] = alb[j + c] * (light * WARM[c] + pc[c] * cs) + em[j + c] + hz * WARM[c];\n      } else if (y === sy[x]) {\n        // The surface line, glinting where it tilts and where the sparger froths.\n        let gl = 0.55 + 0.45 * k4 + min(1, abs((x \u003c W - 1 ? h[x + 1] : h[x]) - h[x - 1]) * 1.2);\n        if (x >= 22 && x \u003c 48 && hash(x, floor(t * 9)) \u003c 0.18) gl += 0.6;\n        gl += 1.5 * foamA * max(0, 1 - abs(x - S.foamX) / 4);\n        for (let c = 0; c \u003c 3; c++) C[j + c] = (pc[c] * 0.5 + 0.5) * 122 * gl;\n      } else {\n        const d = y - WL;\n        let v = wb[i] * 255;\n        if (d \u003c 34 && y \u003c FLOOR) v *= 1 + sw * sh[cl(round(x - d * 0.45), 0, W - 1)] * exp(-d / 20);\n        const top = k4 * 30 * exp(-max(0, d) / 10);\n        for (let c = 0; c \u003c 3; c++) C[j + c] = pc[c] * v + wl[i] * 255 * (0.5 + 0.5 * pc[c]) + top;\n      }\n    }\n\n  // Bubbles catch the underwater light.\n  for (const u of S.bubs) {\n    const x = round(u.x);\n    const y = round(u.y);\n    if (x \u003c POOL_X || x >= W || y \u003c= sy[x] || y >= H) continue;\n    const v = u.b * min(1, u.life * 1.5) * 170;\n    for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] += v * (0.55 + 0.45 * pc[c]);\n  }\n\n  // The lamps along the ceiling: the two over the tower are on at night.\n  for (const [lx, w] of [[6, wT], [22, wT], [40, wH], [56, wH]])\n    for (let y = 0; y \u003c 5; y++)\n      for (let x = lx - 4; x \u003c= lx + 4; x++) {\n        const core = abs(x - lx) \u003c= 1 && y >= 1 && y \u003c= 2;\n        if (!core && x >= 33 && y >= 3) continue;\n        const v = core ? 120 + 135 * min(1, w) : 90 * min(1, w) * exp(-((x - lx) ** 2 + (y - 1.5) ** 2) / 3);\n        for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] = max(C[(y * W + x) * 3 + c], v * WARM[c]);\n      }\n\n  // The scoreboard shows the dive and its difficulty, then the seven judges' marks.\n  const bd = S.board;\n  const [code, dd] = bd.sc ? [bd.code, bd.dd] : DIVES[S.dive];\n  const amber = [255, 170, 40];\n  const white = [235, 235, 225];\n  text(S, String(bd.num), 35, 6, amber);\n  text(S, code, 62 - width(code), 6, white);\n  for (let j = 0; j \u003c 15; j++) put(S, (13 + floor(j / 3)) * W + 35 + (j % 3), bd.suit);\n  text(S, \"10M\", 40, 13, [150, 150, 150]);\n  const dds = `${floor(dd / 10)}.${dd % 10}`;\n  text(S, dds, 62 - width(dds), 13, amber);\n  if (bd.sc) {\n    for (let j = 0; j \u003c 7; j++) text(S, String(bd.sc[j]), 35 + j * 4, 20, bd.drop.includes(j) ? [80, 80, 80] : amber);\n    text(S, bd.total, 62 - width(bd.total), 27, white);\n  }\n\n  const lf = 0.62 + 0.38 * k4;\n  for (const d of S.divers) {\n    const lit = d.st === WALK || d.st === STAND || (d.st === FLY && d.t \u003c 0.4);\n    figure(S, d.hx, d.hy, d.face, d.q, d.suit, min(1.1, lf + (lit ? 0.35 * spot : 0)), pc);\n  }\n\n  // Spray above the water.\n  for (const p of S.drops) {\n    const x = round(p.x);\n    const y = round(p.y);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let c = 0; c \u003c 3; c++) C[(y * W + x) * 3 + c] = max(C[(y * W + x) * 3 + c], 210 + 40 * pc[c]);\n  }\n\n  for (let i = 0; i \u003c N; i++) display.setPixel(i % W, (i / W) | 0, min(255, C[i * 3]), min(255, C[i * 3 + 1]), min(255, C[i * 3 + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Pool=0..1, Speed=0.2..3, Dive=0..4, Lights=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Pool","min":0,"max":1,"about":"The colour of the underwater lights, aqua at 0 and once round the wheel; the pool throws it onto the walls."},{"name":"Speed","min":0.2,"max":3,"about":"Real time at 2, where a dive takes about 1.6 s and a diver starts up the stairs every 6 s; ten times slower at 0.2."},{"name":"Dive","min":0,"max":4,"about":"The next dive, from a plain forward dive through forward somersaults of 1.5 up to 3.5 to 2.5 with two twists. Harder ones jump higher and take longer to set up. The scoreboard shows the dive and its difficulty."},{"name":"Lights","min":0,"max":1,"about":"From a dim night practice with only the tower lamps on to full competition lights."}],"start":[0,2,0,0.06],"measures":{"motion":0.3915,"detail":0.0721,"edges":0.2796,"complexity":1.8967,"coverage":0.7436,"colour":0.2296,"drift":0.0344},"knobResponse":[0.0986,0.0554,0.0399,0.1523]},{"slug":"high-striker","title":"High Striker","family":"fair","round":20,"note":"밤 장터의 하이 스트라이커가 128줄을 다 써요. 줄 선 사람들이 차례로 망치를 내리치면 퍽이 실제 중력으로 레일을 오르며 눈금을 켜다가 떨어지고, 세게 친 판이나 K1 을 누른 판에는 꼭대기 놋쇠 종이 울려 전구가 깜박이고 하늘이 밝아져요.","idea":"A high striker stands the full height of a night fair: players from a queue take turns swinging a mallet onto the pad, the puck flies up the rail under real gravity lighting the scale it passes and falls back, and a hit hard enough rings the brass bell at the top, so the tower's bulbs flash and the sky lights up.","buttons":"K1 tap makes the next swing a big one that rings the bell, at once if the player is already lifting the mallet.","code":"// ===== Patternflow pattern =====\n// Title:   High Striker\n// Family:  fair\n// Idea:    A high striker stands the full height of a night fair: players from a queue take turns swinging a mallet onto the pad, the puck flies up the rail under real gravity lighting the scale it passes and falls back, and a hit hard enough rings the brass bell at the top, so the tower's bulbs flash and the sky lights up.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the strength-tester towers of fairgrounds and seaside piers\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Bulbs=0..1, Speed=0.2..3, Strength=60..130, Gravity=-1..1\n//\n// Knob 1: Bulbs. Turns the bulbs up both edges of the tower round the colour wheel, with the light they throw on the striped posts and the night round the tower, starting from gold.\n// Knob 2: Speed. How fast the fair runs: at 2 everything moves in real time, a full flight to the bell takes 1.26 s each way; at 0.2 it is ten times slower, at 3 half as fast again.\n// Knob 3: Strength. How hard the players hit on average, as the share of the run to the bell an average swing sends the puck: 60% at the minimum, where an average grown-up just lights FAIR, to 130%, where nearly every grown-up rings the bell. Children hit softer and the strongman harder.\n// Knob 4: Gravity. The pull on the puck, from 0.57 g at -1 through Earth's at the middle to 1.74 g at 1: the same swing sends it higher and slower, or lower and quicker.\n// Buttons: K1 tap makes the next swing a big one that rings the bell, at once if the player is already lifting the mallet.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, round, floor, sin, cos, exp, sqrt, atan2, hypot, asin } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n\n// The tower. Striped posts on columns 34..36 and 49..51 hold a crossbar on rows\n// 2..4, and the bell hangs from it with its mouth on row 13. The board between\n// the posts carries the rail on columns 42 and 43 with the scale either side.\nconst PL = 34;\nconst PR = 49;\nconst CX = 42.5;\nconst LIP = 13;\n// The puck's top row when it rests on the lever, and how far it climbs to the bell.\nconst REST = 106;\nconst RUN = REST - LIP - 1;\nconst NSEG = 22;\nconst BULBS = 26;\nconst GROUND = 117;\n// The player swings from column 11 onto the rubber of the pad, columns 20..27.\nconst SPOT = 11;\nconst PADX = 24;\nconst PADY = 110;\n// One row is 8.5 cm: a player of 20 rows stands 1.7 m, the run to the bell is 7.8 m.\nconst ROW = 0.085;\nconst G0 = 9.81 / ROW;\nconst [WALK, LIFT, AIM, SWING, WATCH, LOWER] = [0, 1, 2, 3, 4, 5];\nconst DUR = [0, 0.8, 0.35, 0.16, 0, 0.45];\n// The mallet held up behind the head, 120 degrees above the horizontal.\nconst A_BACK = -2.1;\n// Words beside the scale in a 3x5 font, one number a row, and the segment each sits at.\nconst FONT = { B: [6, 5, 6, 5, 6], Y: [5, 5, 2, 2, 2], E: [7, 4, 6, 4, 7], A: [2, 5, 7, 5, 5], F: [7, 4, 6, 4, 4], I: [7, 2, 2, 2, 7], R: [6, 5, 6, 5, 5], G: [3, 4, 5, 5, 3], O: [2, 5, 5, 5, 2], D: [6, 5, 5, 5, 6], H: [5, 5, 7, 5, 5] };\nconst WORDS = [[\"BABY\", 9], [\"FAIR\", 13], [\"GOOD\", 17], [\"HERO\", 21]];\nconst SHIRTS = [[60, 110, 210], [210, 60, 70], [235, 205, 70], [60, 175, 110], [175, 80, 195], [235, 135, 50], [225, 225, 230], [50, 165, 185]];\nconst SKINS = [[225, 172, 132], [165, 112, 76], [240, 200, 166], [125, 84, 58]];\nconst HAIRS = [[34, 22, 16], [96, 58, 26], [205, 165, 84], [18, 18, 24], [150, 150, 156]];\nconst PANTS = [[44, 58, 120], [56, 56, 66], [96, 74, 52], [34, 34, 46]];\nconst GLOW = [[1, 0, 0.34], [-1, 0, 0.34], [0, 1, 0.34], [0, -1, 0.34], [1, 1, 0.14], [-1, 1, 0.14], [1, -1, 0.14], [-1, -1, 0.14], [2, 0, 0.06], [-2, 0, 0.06], [0, 2, 0.06], [0, -2, 0.06]];\nconst FESTOON = [[255, 90, 70], [255, 205, 90], [90, 210, 120], [100, 150, 255]];\nconst FLAGS = [[190, 40, 52], [225, 185, 60], [50, 110, 205], [60, 165, 95], [230, 228, 218]];\n\nfunction hsv(h, s, v) {\n  h -= floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nconst segTop = (i) => REST - 4 * i;\nconst segH = (i) => 4 * i + 2;\nconst bulbY = (i) => 7 + 4 * i;\n\n// Three kinds of player: a child (0), a grown-up (1) and a strongman in a singlet\n// (2), each with the share of the average swing they put into the mallet.\nfunction newPlayer(x, kind = rnd() \u003c 0.2 ? 0 : rnd() \u003c 0.75 ? 1 : 2) {\n  const pick = (a) => a[floor(rnd() * a.length)];\n  const h = [15, 20, 23][kind] + floor(rnd() * (kind === 1 ? 4 : 2));\n  const p = [0.55, 0.8, 1.75][kind] + rnd() * [0.2, 0.4, 0.3][kind];\n  return { x, h, kind, shirt: pick(SHIRTS), skin: pick(SKINS), hair: pick(HAIRS), pants: pick(PANTS), p, walk: rnd() * 6, moving: false };\n}\n\n// The fair behind the game, painted once: sky, stalls, ground and the tower's wood.\nfunction paint(P) {\n  const S = P.bg;\n  const set = (x, y, c, k = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const o = (y * W + x) * 3;\n    S[o] = c[0] * k;\n    S[o + 1] = c[1] * k;\n    S[o + 2] = c[2] * k;\n  };\n  const box = (x0, y0, x1, y1, c, k) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) set(x, y, c, k);\n  };\n  for (let y = 0; y \u003c H; y++) {\n    const u = clamp(y / 114, 0, 1);\n    for (let x = 0; x \u003c W; x++) set(x, y, [3 + 32 * u ** 2.4 + rnd() * 2, 3 + 12 * u ** 2.2, 13 + 30 * u ** 1.6 + rnd() * 2]);\n  }\n  for (let n = 0; n \u003c 30; n++) {\n    const x = floor(rnd() * W);\n    const y = floor(rnd() * 62);\n    if (x \u003c 31 || x > 54) set(x, y, [60, 60, 76], 0.4 + rnd() * 0.6);\n  }\n  for (let y = 28; y \u003c= 36; y++)\n    for (let x = 1; x \u003c= 10; x++) {\n      const d = hypot(x - 5, y - 32);\n      if (d \u003c 3.6 && hypot(x - 6.6, y - 31) > 3) set(x, y, [205, 205, 176], d > 2.8 ? 0.6 : 1);\n    }\n  // Two stalls: a prize booth behind the queue and a hot-dog stand behind the crowd.\n  // Their lit windows sit over the heads, so the people stand against dark boards.\n  for (const [x0, x1, awn, win] of [[0, 15, [30, 125, 135], [104, 116, 138]], [55, 63, [125, 50, 155], [150, 104, 46]]]) {\n    box(x0, 82, x1, 116, [26, 18, 18]);\n    for (let x = x0 + 2; x \u003c x1; x += 4) box(x, 93, x, 116, [20, 14, 14]);\n    box(x0 + 1, 83, x1 - 1, 90, win);\n    box(x0 + 1, 91, x1 - 1, 92, [110, 60, 32]);\n    for (let x = x0; x \u003c= x1; x++) for (let y = 77; y \u003c= 81; y++) set(x, y, floor((x - x0) / 3) % 2 ? [215, 205, 175] : awn, y === 77 ? 0.7 : 1);\n    for (let x = x0; x \u003c= x1; x += 2) set(x, 82, floor((x - x0) / 3) % 2 ? [215, 205, 175] : awn, 0.8);\n  }\n  for (const [x, c] of [[3, [205, 95, 150]], [7, [90, 150, 225]], [11, [235, 205, 85]]]) box(x - 1, 85, x + 1, 87, c, 0.85);\n  box(57, 86, 61, 87, [200, 120, 70]);\n  box(0, GROUND, 63, H - 1, [30, 22, 18]);\n  box(0, GROUND, 63, GROUND, [46, 34, 26]);\n  for (let n = 0; n \u003c 160; n++) set(floor(rnd() * W), GROUND + 1 + floor(rnd() * 10), [44, 32, 24], 0.7 + rnd() * 0.5);\n  // The posts, striped like a barber's pole and rounded by shade.\n  for (let y = 2; y \u003c= 109; y++)\n    for (let c = 0; c \u003c 3; c++) {\n      const sh = [0.68, 1, 0.82][c];\n      set(PL + c, y, floor((y + 40 - c * 1.5) / 4) % 2 ? [225, 205, 165] : [180, 26, 36], sh);\n      set(PR + c, y, floor((y + 40 - (2 - c) * 1.5) / 4) % 2 ? [225, 205, 165] : [180, 26, 36], sh);\n    }\n  box(PL + 3, 5, PR - 1, 109, [14, 16, 42]);\n  box(PL + 3, 5, PL + 3, 109, [28, 30, 64]);\n  box(PR - 1, 5, PR - 1, 109, [28, 30, 64]);\n  box(33, 2, 52, 4, [150, 24, 30]);\n  box(33, 2, 52, 2, [205, 155, 64]);\n  box(33, 4, 52, 4, [120, 86, 36]);\n  for (const x of [34, 50]) box(x, 0, x + 1, 1, [215, 170, 70]);\n  // The rail with its stop under the bell.\n  for (let y = 14; y \u003c= 109; y++) {\n    set(42, y, [130, 134, 150]);\n    set(43, y, [70, 74, 90]);\n  }\n  box(40, 14, 45, 14, [90, 92, 104]);\n  // The base and its lever out to the pad.\n  box(30, 110, 55, 116, [100, 22, 28]);\n  box(30, 110, 55, 110, [195, 145, 62]);\n  box(30, 116, 55, 116, [50, 12, 16]);\n  for (let x = 32; x \u003c= 53; x += 3) set(x, 113, [195, 145, 62], 0.8);\n  box(28, 112, 30, 113, [70, 70, 78]);\n  box(19, 111, 28, 116, [44, 44, 52]);\n  box(19, 111, 28, 111, [80, 80, 92]);\n  // The light of the bulbs over the sky, the posts and the ground, and the wide\n  // flash of a ring round the bell.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const d = min(abs(x - 33), abs(x - 52));\n      const v = smooth((y - 1) / 8) * smooth((118 - y) / 10);\n      let g = v * (0.26 * exp(-(d * d) / 30) + 0.08 * exp(-d / 14));\n      if (y >= GROUND - 6) {\n        const dx = (x - CX) / 20;\n        g += 0.14 * exp(-dx * dx) * exp(-abs(y - GROUND) / 6);\n      }\n      P.glowM[p] = g;\n      P.flashM[p] = 0.55 * exp(-hypot(x - CX, (y - 10) * 0.8) / 24) + 0.07;\n    }\n}\n\n// Where the active player's shoulder is, and the mallet's reach and angles from it.\nfunction grip(P, A) {\n  const sx = round(A.x) + 0.5;\n  const sy = GROUND - A.h + 5;\n  const tx = PADX - sx;\n  const ty = PADY - 2 - sy;\n  P.mS = [sx, sy];\n  P.mL = hypot(tx, ty);\n  P.aHit = atan2(ty, tx);\n  P.aRest = asin(clamp((GROUND - 2 - sy) / P.mL, -1, 1));\n}\n\n// The swing lands: the pad gives, and the puck leaves the lever at the speed\n// the swing gave it. Gravity alone decides how high that is.\nfunction strike(P) {\n  const A = P.q[0];\n  const f = P.big ? 1.35 * (P.g / G0) : (P.str / 100) * A.p * (0.9 + 0.2 * rnd());\n  P.big = false;\n  Object.assign(P, { vel: sqrt(2 * G0 * f * RUN), hgt: 0, fly: true, peak: 0, lit: 0, padDip: 1, hitT: 0, restT: 0 });\n}\n\nfunction ring(P, v) {\n  P.ringT = 0;\n  P.ringA = clamp(0.65 + v / 150, 0.65, 1);\n  for (let n = 0; n \u003c 26; n++) {\n    const a = rnd() * 6.283;\n    const s = 22 + rnd() * 40;\n    P.sparks.push([CX + cos(a) * 3, 10 + sin(a) * 2, cos(a) * s, sin(a) * s * 0.8 - 12, 0.8 + rnd() * 0.7]);\n  }\n}\n\nfunction puck(P, h) {\n  if (!P.fly) {\n    P.restT += h;\n    if (P.restT > 1.4) P.lit = max(0, P.lit - 26 * h);\n    return;\n  }\n  const g = P.g;\n  const h0 = P.hgt;\n  const v0 = P.vel;\n  let y = h0 + v0 * h - 0.5 * g * h * h;\n  P.vel = v0 - g * h;\n  if (y >= RUN) {\n    const hit = sqrt(max(0, v0 * v0 - 2 * g * (RUN - h0)));\n    y = RUN;\n    P.vel = -0.3 * hit;\n    ring(P, hit);\n  }\n  if (y \u003c= 0 && P.vel \u003c 0) {\n    y = 0;\n    if (P.vel \u003c -40) P.vel *= -0.24;\n    else Object.assign(P, { vel: 0, fly: false, restT: 0 });\n  }\n  P.hgt = y;\n  P.peak = max(P.peak, y);\n  let n = 0;\n  while (n \u003c NSEG && segH(n) \u003c= P.peak) n++;\n  P.lit = max(P.lit, n);\n}\n\nfunction walkTo(F, target, v, h) {\n  const d = target - F.x;\n  F.moving = abs(d) > 0.05;\n  if (!F.moving) return true;\n  F.x += clamp(d, -v * h, v * h);\n  F.walk += h * 10;\n  return false;\n}\n\nfunction tick(P, h) {\n  P.t += h;\n  P.pt += h;\n  P.chase += h * 5;\n  P.aPrev = P.a;\n  const A = P.q[0];\n  const ph = P.ph;\n  if (ph === WALK) {\n    if (walkTo(A, SPOT, 16, h)) {\n      grip(P, A);\n      P.a = P.aPrev = P.aRest;\n      Object.assign(P, { ph: LIFT, pt: 0 });\n    }\n  } else if (ph === LIFT) P.a = P.aRest + (A_BACK - P.aRest) * smooth(P.pt / DUR[LIFT]);\n  else if (ph === AIM) P.a = A_BACK + 0.05 * sin(P.pt * 18);\n  else if (ph === SWING) {\n    const u = min(1, P.pt / DUR[SWING]);\n    P.a = A_BACK + (P.aHit - A_BACK) * u * u;\n    if (u >= 1) {\n      strike(P);\n      Object.assign(P, { ph: WATCH, pt: 0 });\n    }\n  } else if (ph === WATCH) {\n    P.a = P.aHit - 0.22 * max(0, sin(min(P.pt, 0.3) * 10.5)) * exp(-P.pt * 4);\n    if (!P.fly && P.restT > 0.45) Object.assign(P, { ph: LOWER, pt: 0 });\n  } else if (ph === LOWER) {\n    P.a = P.aHit + (P.aRest - P.aHit) * smooth(P.pt / DUR[LOWER]);\n    if (P.pt >= DUR[LOWER]) {\n      P.leavers.push(P.q.shift());\n      P.q.push(newPlayer(P.q[P.q.length - 1].x - 7 - rnd() * 3));\n      Object.assign(P, { ph: WALK, pt: 0 });\n    }\n  }\n  if ((ph === LIFT || ph === AIM) && P.pt >= DUR[ph]) Object.assign(P, { ph: ph + 1, pt: 0 });\n  for (let i = 1; i \u003c P.q.length; i++) walkTo(P.q[i], min(P.q[i - 1].x - 7, SPOT - 7 * i), 16, h);\n  for (const F of P.leavers) walkTo(F, 99, 16, h);\n  P.leavers = P.leavers.filter((F) => F.x \u003c 72);\n  puck(P, h);\n  P.ringT += h;\n  P.hitT += h;\n  P.padDip = max(0, P.padDip - h * 8);\n  for (const s of P.sparks) {\n    s[2] *= 1 - 1.2 * h;\n    s[3] += 60 * h;\n    s[0] += s[2] * h;\n    s[1] += s[3] * h;\n    s[4] -= h;\n  }\n  P.sparks = P.sparks.filter((s) => s[4] > 0);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), bg: F(N * 3), glowM: F(N), flashM: F(N), bl: F(BULBS + 6) });\n  paint(P);\n  // The queue opens with a grown-up at the pad, a strongman behind and then a child.\n  P.q = [1, 2, 0, undefined].map((kind, i) => newPlayer(SPOT - 7 * i, kind));\n  P.crowd = [newPlayer(57, 1), newPlayer(62, 1)];\n  P.segCol = Array.from({ length: NSEG }, (_, i) => hsv(0.36 - (0.37 * i) / (NSEG - 1), 0.85, 1));\n  Object.assign(P, { t: 0, ph: LIFT, pt: 0.2, hgt: 0, vel: 0, fly: false, peak: 0, lit: 0, restT: 9, ringT: 9, ringA: 0 });\n  Object.assign(P, { padDip: 0, hitT: 9, big: false, chase: 0, leavers: [], sparks: [], speed: 1, str: 60, g: G0, col: [255, 196, 71], prevY: REST });\n  grip(P, P.q[0]);\n  P.a = P.aPrev = P.aRest + (A_BACK - P.aRest) * smooth(0.2 / DUR[LIFT]);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 60, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.col = hsv(0.115 + clamp(k[0], 0, 1), 0.72, 1);\n  P.speed = clamp(k[1], 0.2, 3) / 2;\n  P.str = clamp(k[2], 60, 130);\n  P.g = G0 * 2 ** (0.8 * clamp(k[3], -1, 1));\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.big = true;\n    if (P.ph === LIFT || P.ph === AIM) Object.assign(P, { ph: SWING, pt: 0 });\n  }\n  P.prevY = REST - P.hgt;\n  const h = dt * P.speed;\n  const steps = Math.ceil(h / 0.02);\n  for (let i = 0; i \u003c steps; i++) tick(P, h / steps);\n}\n\nfunction put(P, x, y, c, k = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  P.buf[o] = c[0] * k;\n  P.buf[o + 1] = c[1] * k;\n  P.buf[o + 2] = c[2] * k;\n}\n\nfunction add(P, x, y, c, k) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  P.buf[o] += c[0] * k;\n  P.buf[o + 1] += c[1] * k;\n  P.buf[o + 2] += c[2] * k;\n}\n\nfunction base(P, gl, fl) {\n  const { buf, bg, glowM, flashM, col } = P;\n  const [r, g, b] = col;\n  const fr = (r + 255) * 0.5 * fl;\n  const fg = (g + 255) * 0.5 * fl;\n  const fb = (b + 255) * 0.5 * fl;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const k = glowM[p] * gl;\n    const f = flashM[p];\n    buf[o] = bg[o] + r * k + fr * f;\n    buf[o + 1] = bg[o + 1] + g * k + fg * f;\n    buf[o + 2] = bg[o + 2] + b * k + fb * f;\n  }\n}\n\nfunction scale(P) {\n  const ring = P.ringT \u003c 1.4 && floor(P.ringT * 8) % 2 === 0;\n  const top = P.fly || P.lit \u003c 1 ? -1 : floor(P.lit - 0.001);\n  const blink = floor(P.t * 6) % 2 === 0;\n  for (let i = 0; i \u003c NSEG; i++) {\n    const c = P.segCol[i];\n    const on = ring || i \u003c P.lit - 0.5;\n    const k = on ? (i === top && blink ? 0.45 : 1) : 0.17;\n    for (let r = 0; r \u003c 3; r++)\n      for (let x = 38; x \u003c= 47; x++) if (x \u003c 42 || x > 43) put(P, x, segTop(i) + r, c, k * (r === 2 ? 0.72 : 1) * (x === 38 || x === 47 ? 0.8 : 1));\n  }\n  for (const [w, i] of WORDS) {\n    const on = ring || i \u003c P.lit - 0.5;\n    const c = on ? P.segCol[i].map((v) => v * 0.7 + 76) : [62, 50, 40];\n    for (let n = 0; n \u003c 4; n++)\n      for (let y = 0; y \u003c 5; y++) for (let x = 0; x \u003c 3; x++) if ((FONT[w[n]][y] >> (2 - x)) & 1) put(P, 14 + n * 4 + x, segTop(i) - 1 + y, c);\n  }\n}\n\nfunction drawPuck(P) {\n  const y = REST - P.hgt;\n  const y0 = P.prevY;\n  if (abs(y - y0) > 1.5) {\n    const n = abs(y - y0);\n    for (let s = 1; s \u003c n; s++) {\n      const k = 0.7 * (1 - s / n);\n      const yy = y + Math.sign(y0 - y) * s + 1;\n      add(P, 42, yy, [150, 170, 255], k);\n      add(P, 43, yy, [150, 170, 255], k);\n    }\n  }\n  const yi = round(y);\n  for (let x = 41; x \u003c= 44; x++) {\n    const e = x === 41 || x === 44 ? 0.8 : 1;\n    put(P, x, yi, [250, 250, 255], e);\n    put(P, x, yi + 1, [205, 212, 230], e);\n    put(P, x, yi + 2, [110, 116, 136], e);\n  }\n}\n\nfunction bell(P) {\n  const s = P.ringT \u003c 1.6 ? round(sin(P.ringT * 42) * 1.3 * exp(-P.ringT * 2.2)) : 0;\n  const fl = P.ringT \u003c 1 ? exp(-P.ringT * 4) * P.ringA : 0;\n  const HW = [1.5, 3, 4, 4.5, 5, 5.5, 5.5, 6];\n  put(P, CX - 0.5, 5, [60, 60, 70]);\n  put(P, CX + 0.5, 5, [60, 60, 70]);\n  for (let r = 0; r \u003c 8; r++) {\n    const y = 6 + r;\n    const hw = HW[r];\n    for (let x = floor(CX - hw); x \u003c CX + hw; x++) {\n      const u = (x + 0.5 - CX) / hw;\n      let k = 0.55 + 0.45 * clamp(1 - abs(u + 0.35) * 1.3, 0, 1);\n      if (r === 7) k = 0.85 - 0.25 * u;\n      const c = [222 * k + 255 * fl, 168 * k + 240 * fl, 70 * k + 200 * fl];\n      put(P, x + s, y, c);\n    }\n  }\n}\n\nfunction bulbs(P) {\n  const L = P.bl;\n  const ch = floor(P.chase);\n  const ringing = P.ringT \u003c 1.8;\n  let sum = 0;\n  for (let i = 0; i \u003c BULBS + 6; i++) {\n    let v;\n    if (i \u003c BULBS) {\n      const up = BULBS - 1 - i;\n      v = (up + 999 - ch) % 3 === 0 ? 0.9 : 0.2;\n      if (REST + 1 - bulbY(i) \u003c= 4 * P.lit) v = 1;\n    } else v = (i + ch) % 2 ? 1 : 0.35;\n    if (ringing) v = floor(P.ringT * 9) % 2 ? 0.25 : 1;\n    L[i] = v;\n    sum += v;\n  }\n  return sum / (BULBS + 6);\n}\n\nfunction drawBulbs(P) {\n  const c = P.col;\n  const core = c.map((v) => v * 0.6 + 102);\n  const at = (x, y, v) => {\n    put(P, x, y, core, 0.25 + 0.75 * v);\n    for (const [dx, dy, w] of GLOW) add(P, x + dx, y + dy, c, w * v);\n  };\n  for (let i = 0; i \u003c BULBS; i++) {\n    at(33, bulbY(i), P.bl[i]);\n    at(52, bulbY(i), P.bl[i]);\n  }\n  for (let i = 0; i \u003c 6; i++) at(35 + 3 * i, 3, P.bl[BULBS + i]);\n  // Festoons along the stall awnings.\n  for (let x = 0; x \u003c= 63; x += 3) {\n    if (x > 15 && x \u003c 55) continue;\n    const tw = 0.75 + 0.25 * sin(P.t * 3 + x);\n    put(P, x, 76, FESTOON[(x / 3) % 4], tw);\n  }\n}\n\n// Bunting from the crossbar down to the stalls, swaying in the night air.\nfunction bunting(P) {\n  for (const [x0, y0, x1, y1, sag] of [[0, 15, 33, 3, 5], [52, 3, 63, 17, 3]]) {\n    const s = sag + 0.9 * sin(P.t * 1.1 + x0);\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      const y = round(y0 + (y1 - y0) * u + s * 4 * u * (1 - u));\n      put(P, x, y, [44, 40, 46]);\n      const n = x - x0 - 2;\n      if (n % 5 || x === x0 || x === x1) continue;\n      const c = FLAGS[(n / 5) % 5];\n      const k = 0.55 + 0.25 * sin(P.t * 2.3 + x);\n      for (let r = 1; r \u003c= 3; r++) for (let dx = -1; dx \u003c= 1; dx++) if (abs(dx) \u003c= 2 - r + (r === 1)) put(P, x + dx, y + r, c, k * (dx \u003c 0 ? 0.8 : 1));\n    }\n  }\n}\n\n// A person facing right (or left), feet on the ground row, lit from the tower's side.\nfunction person(P, F, left, dim, held, cheer) {\n  const cx = round(F.x);\n  const top = GROUND - F.h;\n  const col = (dx) => (left ? cx - 1 - dx : cx + dx);\n  const T = [F.shirt, F.pants, F.skin, F.hair].map((c) => [c.map((v) => v * dim * 0.78), c.map((v) => v * dim * 1.05)]);\n  const tone = (n, x) => T[n][x > cx - 1 ? 1 : 0];\n  const arm = F.kind === 2 ? F.skin : F.shirt;\n  const torso = round(F.h * 0.36);\n  const legTop = top + 4 + torso;\n  const sw = F.moving ? sin(F.walk) : 0;\n  for (let y = legTop; y \u003c GROUND; y++) {\n    const off = round(((sw * 1.6 * (y - legTop)) / (GROUND - legTop)) * (left ? -1 : 1));\n    for (let dx = -2; dx \u003c= 1; dx++) {\n      const x = col(dx) + (dx \u003c 0 ? -off : off);\n      put(P, x, y, y === GROUND - 1 ? [30, 26, 24] : tone(1, x), dx === -1 || dx === 1 ? 0.85 : 1);\n    }\n  }\n  if (!F.moving) put(P, col(2), GROUND - 1, [30, 26, 24]);\n  for (let y = top + 4; y \u003c legTop; y++) for (let dx = -2; dx \u003c= (F.kind === 2 ? 2 : 1); dx++) put(P, col(dx), y, tone(0, col(dx)));\n  for (let y = top; y \u003c top + 4; y++)\n    for (let dx = -1; dx \u003c= 1; dx++) put(P, col(dx), y, tone(y === top || (dx === -1 && y === top + 1) ? 3 : 2, col(dx)));\n  if (held) return;\n  if (cheer) {\n    for (let y = top - 2; y \u003c top + 5; y++) {\n      put(P, col(2), y, y \u003c top ? F.skin : arm, dim);\n      put(P, col(-3), y, y \u003c top ? F.skin : arm, dim * 0.8);\n    }\n    return;\n  }\n  const hx = col(0) + round(sw * 1.2) * (left ? -1 : 1);\n  for (let y = top + 5; y \u003c legTop + 1; y++) put(P, y \u003c legTop - 1 ? col(0) : hx, y, y === legTop ? F.skin : arm, dim * 0.85);\n}\n\nfunction mallet(P) {\n  const [sx, sy] = P.mS;\n  const L = P.mL;\n  const head = (a, k) => {\n    const dx = cos(a);\n    const dy = sin(a);\n    for (let u = -1.5; u \u003c= 1.5; u += 0.5)\n      for (let v = -2.5; v \u003c= 2.5; v += 0.5) {\n        const c = abs(v) > 1.7 ? [170, 170, 184] : u \u003c -0.7 ? [150, 96, 46] : [210, 146, 76];\n        put(P, sx + dx * (L + u) - dy * v - 0.5, sy + dy * (L + u) + dx * v - 0.5, c, k);\n      }\n  };\n  if (P.ph === SWING || (P.ph === WATCH && P.pt \u003c 0.05)) for (let n = 1; n \u003c= 3; n++) head(P.a + (P.aPrev - P.a) * (n / 3), 0.32);\n  const dx = cos(P.a);\n  const dy = sin(P.a);\n  for (let t = 4; t \u003c= L - 1.5; t += 0.5) put(P, sx + dx * t - 0.5, sy + dy * t - 0.5, [196, 150, 92]);\n  head(P.a, 1);\n  const A = P.q[0];\n  if (P.ph === WALK) return;\n  for (let t = 0; t \u003c= 6; t += 0.5) put(P, sx + dx * t - 0.5, sy + dy * t - 0.5, t > 4.5 || A.kind === 2 ? A.skin : A.shirt, t > 4.5 ? 1 : 0.9);\n}\n\nfunction arcs(P) {\n  if (P.ringT > 1.4) return;\n  const c = P.col.map((v) => v * 0.5 + 128);\n  for (let n = 0; n \u003c 2; n++) {\n    const r = 8 + (P.ringT - 0.28 * n) * 34;\n    if (r \u003c 8) continue;\n    const k = P.ringA * clamp(1 - (r - 8) / 44, 0, 1);\n    for (let a = -0.9; a \u003c= 0.9; a += 0.6 / r) {\n      add(P, CX - 0.5 - r * cos(a), 9 + r * sin(a) * 0.9, c, k);\n      add(P, CX - 0.5 + r * cos(a), 9 + r * sin(a) * 0.9, c, k);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const gl = bulbs(P);\n  const fl = P.ringT \u003c 2.5 ? P.ringA * exp(-P.ringT * 2.2) : 0;\n  base(P, 0.25 + 0.75 * gl, fl);\n  bunting(P);\n  scale(P);\n  drawPuck(P);\n  bell(P);\n  drawBulbs(P);\n  // The pad's rubber, pressed down a row by the blow.\n  const dip = P.padDip > 0.3 ? 1 : 0;\n  for (let x = 20; x \u003c= 27; x++) {\n    put(P, x, PADY + dip, [150, 34, 34]);\n    put(P, x, PADY + 1, [96, 22, 24]);\n  }\n  if (P.hitT \u003c 0.12) for (const [dx, dy] of [[0, 0], [1, 0], [-1, 0], [0, -1], [2, -1], [-2, -1]]) put(P, PADX + dx - 0.5, PADY - 1 + dy, [255, 250, 230]);\n  const cheer = P.ringT \u003c 1.6;\n  P.crowd.forEach((F, i) => person(P, F, true, 0.62, false, cheer && floor(P.ringT * 6 + i) % 2 === 0));\n  for (let i = P.q.length - 1; i >= 1; i--) person(P, P.q[i], false, 0.78, false, false);\n  const A = P.q[0];\n  person(P, A, false, 1, P.ph !== WALK, false);\n  mallet(P);\n  for (const F of P.leavers) person(P, F, false, 0.95, false, false);\n  arcs(P);\n  const sc = P.col.map((v) => v * 0.45 + 140);\n  for (const [x, y, , , life] of P.sparks) {\n    const k = min(1, life * 1.2);\n    put(P, x, y, sc, k);\n    if (life > 0.9) for (const [dx, dy, w] of GLOW.slice(0, 4)) add(P, x + dx, y + dy, sc, w * k);\n  }\n  flush(display, P.buf);\n}\n\nfunction flush(display, buf) {\n  for (let y = 0, o = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-high-striker","type":"code","name":"high-striker","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   High Striker\n// Family:  fair\n// Idea:    A high striker stands the full height of a night fair: players from a queue take turns swinging a mallet onto the pad, the puck flies up the rail under real gravity lighting the scale it passes and falls back, and a hit hard enough rings the brass bell at the top, so the tower's bulbs flash and the sky lights up.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the strength-tester towers of fairgrounds and seaside piers\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Bulbs=0..1, Speed=0.2..3, Strength=60..130, Gravity=-1..1\n//\n// Knob 1: Bulbs. Turns the bulbs up both edges of the tower round the colour wheel, with the light they throw on the striped posts and the night round the tower, starting from gold.\n// Knob 2: Speed. How fast the fair runs: at 2 everything moves in real time, a full flight to the bell takes 1.26 s each way; at 0.2 it is ten times slower, at 3 half as fast again.\n// Knob 3: Strength. How hard the players hit on average, as the share of the run to the bell an average swing sends the puck: 60% at the minimum, where an average grown-up just lights FAIR, to 130%, where nearly every grown-up rings the bell. Children hit softer and the strongman harder.\n// Knob 4: Gravity. The pull on the puck, from 0.57 g at -1 through Earth's at the middle to 1.74 g at 1: the same swing sends it higher and slower, or lower and quicker.\n// Buttons: K1 tap makes the next swing a big one that rings the bell, at once if the player is already lifting the mallet.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, round, floor, sin, cos, exp, sqrt, atan2, hypot, asin } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n\n// The tower. Striped posts on columns 34..36 and 49..51 hold a crossbar on rows\n// 2..4, and the bell hangs from it with its mouth on row 13. The board between\n// the posts carries the rail on columns 42 and 43 with the scale either side.\nconst PL = 34;\nconst PR = 49;\nconst CX = 42.5;\nconst LIP = 13;\n// The puck's top row when it rests on the lever, and how far it climbs to the bell.\nconst REST = 106;\nconst RUN = REST - LIP - 1;\nconst NSEG = 22;\nconst BULBS = 26;\nconst GROUND = 117;\n// The player swings from column 11 onto the rubber of the pad, columns 20..27.\nconst SPOT = 11;\nconst PADX = 24;\nconst PADY = 110;\n// One row is 8.5 cm: a player of 20 rows stands 1.7 m, the run to the bell is 7.8 m.\nconst ROW = 0.085;\nconst G0 = 9.81 / ROW;\nconst [WALK, LIFT, AIM, SWING, WATCH, LOWER] = [0, 1, 2, 3, 4, 5];\nconst DUR = [0, 0.8, 0.35, 0.16, 0, 0.45];\n// The mallet held up behind the head, 120 degrees above the horizontal.\nconst A_BACK = -2.1;\n// Words beside the scale in a 3x5 font, one number a row, and the segment each sits at.\nconst FONT = { B: [6, 5, 6, 5, 6], Y: [5, 5, 2, 2, 2], E: [7, 4, 6, 4, 7], A: [2, 5, 7, 5, 5], F: [7, 4, 6, 4, 4], I: [7, 2, 2, 2, 7], R: [6, 5, 6, 5, 5], G: [3, 4, 5, 5, 3], O: [2, 5, 5, 5, 2], D: [6, 5, 5, 5, 6], H: [5, 5, 7, 5, 5] };\nconst WORDS = [[\"BABY\", 9], [\"FAIR\", 13], [\"GOOD\", 17], [\"HERO\", 21]];\nconst SHIRTS = [[60, 110, 210], [210, 60, 70], [235, 205, 70], [60, 175, 110], [175, 80, 195], [235, 135, 50], [225, 225, 230], [50, 165, 185]];\nconst SKINS = [[225, 172, 132], [165, 112, 76], [240, 200, 166], [125, 84, 58]];\nconst HAIRS = [[34, 22, 16], [96, 58, 26], [205, 165, 84], [18, 18, 24], [150, 150, 156]];\nconst PANTS = [[44, 58, 120], [56, 56, 66], [96, 74, 52], [34, 34, 46]];\nconst GLOW = [[1, 0, 0.34], [-1, 0, 0.34], [0, 1, 0.34], [0, -1, 0.34], [1, 1, 0.14], [-1, 1, 0.14], [1, -1, 0.14], [-1, -1, 0.14], [2, 0, 0.06], [-2, 0, 0.06], [0, 2, 0.06], [0, -2, 0.06]];\nconst FESTOON = [[255, 90, 70], [255, 205, 90], [90, 210, 120], [100, 150, 255]];\nconst FLAGS = [[190, 40, 52], [225, 185, 60], [50, 110, 205], [60, 165, 95], [230, 228, 218]];\n\nfunction hsv(h, s, v) {\n  h -= floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nconst segTop = (i) => REST - 4 * i;\nconst segH = (i) => 4 * i + 2;\nconst bulbY = (i) => 7 + 4 * i;\n\n// Three kinds of player: a child (0), a grown-up (1) and a strongman in a singlet\n// (2), each with the share of the average swing they put into the mallet.\nfunction newPlayer(x, kind = rnd() \u003c 0.2 ? 0 : rnd() \u003c 0.75 ? 1 : 2) {\n  const pick = (a) => a[floor(rnd() * a.length)];\n  const h = [15, 20, 23][kind] + floor(rnd() * (kind === 1 ? 4 : 2));\n  const p = [0.55, 0.8, 1.75][kind] + rnd() * [0.2, 0.4, 0.3][kind];\n  return { x, h, kind, shirt: pick(SHIRTS), skin: pick(SKINS), hair: pick(HAIRS), pants: pick(PANTS), p, walk: rnd() * 6, moving: false };\n}\n\n// The fair behind the game, painted once: sky, stalls, ground and the tower's wood.\nfunction paint(P) {\n  const S = P.bg;\n  const set = (x, y, c, k = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const o = (y * W + x) * 3;\n    S[o] = c[0] * k;\n    S[o + 1] = c[1] * k;\n    S[o + 2] = c[2] * k;\n  };\n  const box = (x0, y0, x1, y1, c, k) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) set(x, y, c, k);\n  };\n  for (let y = 0; y \u003c H; y++) {\n    const u = clamp(y / 114, 0, 1);\n    for (let x = 0; x \u003c W; x++) set(x, y, [3 + 32 * u ** 2.4 + rnd() * 2, 3 + 12 * u ** 2.2, 13 + 30 * u ** 1.6 + rnd() * 2]);\n  }\n  for (let n = 0; n \u003c 30; n++) {\n    const x = floor(rnd() * W);\n    const y = floor(rnd() * 62);\n    if (x \u003c 31 || x > 54) set(x, y, [60, 60, 76], 0.4 + rnd() * 0.6);\n  }\n  for (let y = 28; y \u003c= 36; y++)\n    for (let x = 1; x \u003c= 10; x++) {\n      const d = hypot(x - 5, y - 32);\n      if (d \u003c 3.6 && hypot(x - 6.6, y - 31) > 3) set(x, y, [205, 205, 176], d > 2.8 ? 0.6 : 1);\n    }\n  // Two stalls: a prize booth behind the queue and a hot-dog stand behind the crowd.\n  // Their lit windows sit over the heads, so the people stand against dark boards.\n  for (const [x0, x1, awn, win] of [[0, 15, [30, 125, 135], [104, 116, 138]], [55, 63, [125, 50, 155], [150, 104, 46]]]) {\n    box(x0, 82, x1, 116, [26, 18, 18]);\n    for (let x = x0 + 2; x \u003c x1; x += 4) box(x, 93, x, 116, [20, 14, 14]);\n    box(x0 + 1, 83, x1 - 1, 90, win);\n    box(x0 + 1, 91, x1 - 1, 92, [110, 60, 32]);\n    for (let x = x0; x \u003c= x1; x++) for (let y = 77; y \u003c= 81; y++) set(x, y, floor((x - x0) / 3) % 2 ? [215, 205, 175] : awn, y === 77 ? 0.7 : 1);\n    for (let x = x0; x \u003c= x1; x += 2) set(x, 82, floor((x - x0) / 3) % 2 ? [215, 205, 175] : awn, 0.8);\n  }\n  for (const [x, c] of [[3, [205, 95, 150]], [7, [90, 150, 225]], [11, [235, 205, 85]]]) box(x - 1, 85, x + 1, 87, c, 0.85);\n  box(57, 86, 61, 87, [200, 120, 70]);\n  box(0, GROUND, 63, H - 1, [30, 22, 18]);\n  box(0, GROUND, 63, GROUND, [46, 34, 26]);\n  for (let n = 0; n \u003c 160; n++) set(floor(rnd() * W), GROUND + 1 + floor(rnd() * 10), [44, 32, 24], 0.7 + rnd() * 0.5);\n  // The posts, striped like a barber's pole and rounded by shade.\n  for (let y = 2; y \u003c= 109; y++)\n    for (let c = 0; c \u003c 3; c++) {\n      const sh = [0.68, 1, 0.82][c];\n      set(PL + c, y, floor((y + 40 - c * 1.5) / 4) % 2 ? [225, 205, 165] : [180, 26, 36], sh);\n      set(PR + c, y, floor((y + 40 - (2 - c) * 1.5) / 4) % 2 ? [225, 205, 165] : [180, 26, 36], sh);\n    }\n  box(PL + 3, 5, PR - 1, 109, [14, 16, 42]);\n  box(PL + 3, 5, PL + 3, 109, [28, 30, 64]);\n  box(PR - 1, 5, PR - 1, 109, [28, 30, 64]);\n  box(33, 2, 52, 4, [150, 24, 30]);\n  box(33, 2, 52, 2, [205, 155, 64]);\n  box(33, 4, 52, 4, [120, 86, 36]);\n  for (const x of [34, 50]) box(x, 0, x + 1, 1, [215, 170, 70]);\n  // The rail with its stop under the bell.\n  for (let y = 14; y \u003c= 109; y++) {\n    set(42, y, [130, 134, 150]);\n    set(43, y, [70, 74, 90]);\n  }\n  box(40, 14, 45, 14, [90, 92, 104]);\n  // The base and its lever out to the pad.\n  box(30, 110, 55, 116, [100, 22, 28]);\n  box(30, 110, 55, 110, [195, 145, 62]);\n  box(30, 116, 55, 116, [50, 12, 16]);\n  for (let x = 32; x \u003c= 53; x += 3) set(x, 113, [195, 145, 62], 0.8);\n  box(28, 112, 30, 113, [70, 70, 78]);\n  box(19, 111, 28, 116, [44, 44, 52]);\n  box(19, 111, 28, 111, [80, 80, 92]);\n  // The light of the bulbs over the sky, the posts and the ground, and the wide\n  // flash of a ring round the bell.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const d = min(abs(x - 33), abs(x - 52));\n      const v = smooth((y - 1) / 8) * smooth((118 - y) / 10);\n      let g = v * (0.26 * exp(-(d * d) / 30) + 0.08 * exp(-d / 14));\n      if (y >= GROUND - 6) {\n        const dx = (x - CX) / 20;\n        g += 0.14 * exp(-dx * dx) * exp(-abs(y - GROUND) / 6);\n      }\n      P.glowM[p] = g;\n      P.flashM[p] = 0.55 * exp(-hypot(x - CX, (y - 10) * 0.8) / 24) + 0.07;\n    }\n}\n\n// Where the active player's shoulder is, and the mallet's reach and angles from it.\nfunction grip(P, A) {\n  const sx = round(A.x) + 0.5;\n  const sy = GROUND - A.h + 5;\n  const tx = PADX - sx;\n  const ty = PADY - 2 - sy;\n  P.mS = [sx, sy];\n  P.mL = hypot(tx, ty);\n  P.aHit = atan2(ty, tx);\n  P.aRest = asin(clamp((GROUND - 2 - sy) / P.mL, -1, 1));\n}\n\n// The swing lands: the pad gives, and the puck leaves the lever at the speed\n// the swing gave it. Gravity alone decides how high that is.\nfunction strike(P) {\n  const A = P.q[0];\n  const f = P.big ? 1.35 * (P.g / G0) : (P.str / 100) * A.p * (0.9 + 0.2 * rnd());\n  P.big = false;\n  Object.assign(P, { vel: sqrt(2 * G0 * f * RUN), hgt: 0, fly: true, peak: 0, lit: 0, padDip: 1, hitT: 0, restT: 0 });\n}\n\nfunction ring(P, v) {\n  P.ringT = 0;\n  P.ringA = clamp(0.65 + v / 150, 0.65, 1);\n  for (let n = 0; n \u003c 26; n++) {\n    const a = rnd() * 6.283;\n    const s = 22 + rnd() * 40;\n    P.sparks.push([CX + cos(a) * 3, 10 + sin(a) * 2, cos(a) * s, sin(a) * s * 0.8 - 12, 0.8 + rnd() * 0.7]);\n  }\n}\n\nfunction puck(P, h) {\n  if (!P.fly) {\n    P.restT += h;\n    if (P.restT > 1.4) P.lit = max(0, P.lit - 26 * h);\n    return;\n  }\n  const g = P.g;\n  const h0 = P.hgt;\n  const v0 = P.vel;\n  let y = h0 + v0 * h - 0.5 * g * h * h;\n  P.vel = v0 - g * h;\n  if (y >= RUN) {\n    const hit = sqrt(max(0, v0 * v0 - 2 * g * (RUN - h0)));\n    y = RUN;\n    P.vel = -0.3 * hit;\n    ring(P, hit);\n  }\n  if (y \u003c= 0 && P.vel \u003c 0) {\n    y = 0;\n    if (P.vel \u003c -40) P.vel *= -0.24;\n    else Object.assign(P, { vel: 0, fly: false, restT: 0 });\n  }\n  P.hgt = y;\n  P.peak = max(P.peak, y);\n  let n = 0;\n  while (n \u003c NSEG && segH(n) \u003c= P.peak) n++;\n  P.lit = max(P.lit, n);\n}\n\nfunction walkTo(F, target, v, h) {\n  const d = target - F.x;\n  F.moving = abs(d) > 0.05;\n  if (!F.moving) return true;\n  F.x += clamp(d, -v * h, v * h);\n  F.walk += h * 10;\n  return false;\n}\n\nfunction tick(P, h) {\n  P.t += h;\n  P.pt += h;\n  P.chase += h * 5;\n  P.aPrev = P.a;\n  const A = P.q[0];\n  const ph = P.ph;\n  if (ph === WALK) {\n    if (walkTo(A, SPOT, 16, h)) {\n      grip(P, A);\n      P.a = P.aPrev = P.aRest;\n      Object.assign(P, { ph: LIFT, pt: 0 });\n    }\n  } else if (ph === LIFT) P.a = P.aRest + (A_BACK - P.aRest) * smooth(P.pt / DUR[LIFT]);\n  else if (ph === AIM) P.a = A_BACK + 0.05 * sin(P.pt * 18);\n  else if (ph === SWING) {\n    const u = min(1, P.pt / DUR[SWING]);\n    P.a = A_BACK + (P.aHit - A_BACK) * u * u;\n    if (u >= 1) {\n      strike(P);\n      Object.assign(P, { ph: WATCH, pt: 0 });\n    }\n  } else if (ph === WATCH) {\n    P.a = P.aHit - 0.22 * max(0, sin(min(P.pt, 0.3) * 10.5)) * exp(-P.pt * 4);\n    if (!P.fly && P.restT > 0.45) Object.assign(P, { ph: LOWER, pt: 0 });\n  } else if (ph === LOWER) {\n    P.a = P.aHit + (P.aRest - P.aHit) * smooth(P.pt / DUR[LOWER]);\n    if (P.pt >= DUR[LOWER]) {\n      P.leavers.push(P.q.shift());\n      P.q.push(newPlayer(P.q[P.q.length - 1].x - 7 - rnd() * 3));\n      Object.assign(P, { ph: WALK, pt: 0 });\n    }\n  }\n  if ((ph === LIFT || ph === AIM) && P.pt >= DUR[ph]) Object.assign(P, { ph: ph + 1, pt: 0 });\n  for (let i = 1; i \u003c P.q.length; i++) walkTo(P.q[i], min(P.q[i - 1].x - 7, SPOT - 7 * i), 16, h);\n  for (const F of P.leavers) walkTo(F, 99, 16, h);\n  P.leavers = P.leavers.filter((F) => F.x \u003c 72);\n  puck(P, h);\n  P.ringT += h;\n  P.hitT += h;\n  P.padDip = max(0, P.padDip - h * 8);\n  for (const s of P.sparks) {\n    s[2] *= 1 - 1.2 * h;\n    s[3] += 60 * h;\n    s[0] += s[2] * h;\n    s[1] += s[3] * h;\n    s[4] -= h;\n  }\n  P.sparks = P.sparks.filter((s) => s[4] > 0);\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), bg: F(N * 3), glowM: F(N), flashM: F(N), bl: F(BULBS + 6) });\n  paint(P);\n  // The queue opens with a grown-up at the pad, a strongman behind and then a child.\n  P.q = [1, 2, 0, undefined].map((kind, i) => newPlayer(SPOT - 7 * i, kind));\n  P.crowd = [newPlayer(57, 1), newPlayer(62, 1)];\n  P.segCol = Array.from({ length: NSEG }, (_, i) => hsv(0.36 - (0.37 * i) / (NSEG - 1), 0.85, 1));\n  Object.assign(P, { t: 0, ph: LIFT, pt: 0.2, hgt: 0, vel: 0, fly: false, peak: 0, lit: 0, restT: 9, ringT: 9, ringA: 0 });\n  Object.assign(P, { padDip: 0, hitT: 9, big: false, chase: 0, leavers: [], sparks: [], speed: 1, str: 60, g: G0, col: [255, 196, 71], prevY: REST });\n  grip(P, P.q[0]);\n  P.a = P.aPrev = P.aRest + (A_BACK - P.aRest) * smooth(0.2 / DUR[LIFT]);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 60, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.col = hsv(0.115 + clamp(k[0], 0, 1), 0.72, 1);\n  P.speed = clamp(k[1], 0.2, 3) / 2;\n  P.str = clamp(k[2], 60, 130);\n  P.g = G0 * 2 ** (0.8 * clamp(k[3], -1, 1));\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.big = true;\n    if (P.ph === LIFT || P.ph === AIM) Object.assign(P, { ph: SWING, pt: 0 });\n  }\n  P.prevY = REST - P.hgt;\n  const h = dt * P.speed;\n  const steps = Math.ceil(h / 0.02);\n  for (let i = 0; i \u003c steps; i++) tick(P, h / steps);\n}\n\nfunction put(P, x, y, c, k = 1) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  P.buf[o] = c[0] * k;\n  P.buf[o + 1] = c[1] * k;\n  P.buf[o + 2] = c[2] * k;\n}\n\nfunction add(P, x, y, c, k) {\n  x = round(x);\n  y = round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  P.buf[o] += c[0] * k;\n  P.buf[o + 1] += c[1] * k;\n  P.buf[o + 2] += c[2] * k;\n}\n\nfunction base(P, gl, fl) {\n  const { buf, bg, glowM, flashM, col } = P;\n  const [r, g, b] = col;\n  const fr = (r + 255) * 0.5 * fl;\n  const fg = (g + 255) * 0.5 * fl;\n  const fb = (b + 255) * 0.5 * fl;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const k = glowM[p] * gl;\n    const f = flashM[p];\n    buf[o] = bg[o] + r * k + fr * f;\n    buf[o + 1] = bg[o + 1] + g * k + fg * f;\n    buf[o + 2] = bg[o + 2] + b * k + fb * f;\n  }\n}\n\nfunction scale(P) {\n  const ring = P.ringT \u003c 1.4 && floor(P.ringT * 8) % 2 === 0;\n  const top = P.fly || P.lit \u003c 1 ? -1 : floor(P.lit - 0.001);\n  const blink = floor(P.t * 6) % 2 === 0;\n  for (let i = 0; i \u003c NSEG; i++) {\n    const c = P.segCol[i];\n    const on = ring || i \u003c P.lit - 0.5;\n    const k = on ? (i === top && blink ? 0.45 : 1) : 0.17;\n    for (let r = 0; r \u003c 3; r++)\n      for (let x = 38; x \u003c= 47; x++) if (x \u003c 42 || x > 43) put(P, x, segTop(i) + r, c, k * (r === 2 ? 0.72 : 1) * (x === 38 || x === 47 ? 0.8 : 1));\n  }\n  for (const [w, i] of WORDS) {\n    const on = ring || i \u003c P.lit - 0.5;\n    const c = on ? P.segCol[i].map((v) => v * 0.7 + 76) : [62, 50, 40];\n    for (let n = 0; n \u003c 4; n++)\n      for (let y = 0; y \u003c 5; y++) for (let x = 0; x \u003c 3; x++) if ((FONT[w[n]][y] >> (2 - x)) & 1) put(P, 14 + n * 4 + x, segTop(i) - 1 + y, c);\n  }\n}\n\nfunction drawPuck(P) {\n  const y = REST - P.hgt;\n  const y0 = P.prevY;\n  if (abs(y - y0) > 1.5) {\n    const n = abs(y - y0);\n    for (let s = 1; s \u003c n; s++) {\n      const k = 0.7 * (1 - s / n);\n      const yy = y + Math.sign(y0 - y) * s + 1;\n      add(P, 42, yy, [150, 170, 255], k);\n      add(P, 43, yy, [150, 170, 255], k);\n    }\n  }\n  const yi = round(y);\n  for (let x = 41; x \u003c= 44; x++) {\n    const e = x === 41 || x === 44 ? 0.8 : 1;\n    put(P, x, yi, [250, 250, 255], e);\n    put(P, x, yi + 1, [205, 212, 230], e);\n    put(P, x, yi + 2, [110, 116, 136], e);\n  }\n}\n\nfunction bell(P) {\n  const s = P.ringT \u003c 1.6 ? round(sin(P.ringT * 42) * 1.3 * exp(-P.ringT * 2.2)) : 0;\n  const fl = P.ringT \u003c 1 ? exp(-P.ringT * 4) * P.ringA : 0;\n  const HW = [1.5, 3, 4, 4.5, 5, 5.5, 5.5, 6];\n  put(P, CX - 0.5, 5, [60, 60, 70]);\n  put(P, CX + 0.5, 5, [60, 60, 70]);\n  for (let r = 0; r \u003c 8; r++) {\n    const y = 6 + r;\n    const hw = HW[r];\n    for (let x = floor(CX - hw); x \u003c CX + hw; x++) {\n      const u = (x + 0.5 - CX) / hw;\n      let k = 0.55 + 0.45 * clamp(1 - abs(u + 0.35) * 1.3, 0, 1);\n      if (r === 7) k = 0.85 - 0.25 * u;\n      const c = [222 * k + 255 * fl, 168 * k + 240 * fl, 70 * k + 200 * fl];\n      put(P, x + s, y, c);\n    }\n  }\n}\n\nfunction bulbs(P) {\n  const L = P.bl;\n  const ch = floor(P.chase);\n  const ringing = P.ringT \u003c 1.8;\n  let sum = 0;\n  for (let i = 0; i \u003c BULBS + 6; i++) {\n    let v;\n    if (i \u003c BULBS) {\n      const up = BULBS - 1 - i;\n      v = (up + 999 - ch) % 3 === 0 ? 0.9 : 0.2;\n      if (REST + 1 - bulbY(i) \u003c= 4 * P.lit) v = 1;\n    } else v = (i + ch) % 2 ? 1 : 0.35;\n    if (ringing) v = floor(P.ringT * 9) % 2 ? 0.25 : 1;\n    L[i] = v;\n    sum += v;\n  }\n  return sum / (BULBS + 6);\n}\n\nfunction drawBulbs(P) {\n  const c = P.col;\n  const core = c.map((v) => v * 0.6 + 102);\n  const at = (x, y, v) => {\n    put(P, x, y, core, 0.25 + 0.75 * v);\n    for (const [dx, dy, w] of GLOW) add(P, x + dx, y + dy, c, w * v);\n  };\n  for (let i = 0; i \u003c BULBS; i++) {\n    at(33, bulbY(i), P.bl[i]);\n    at(52, bulbY(i), P.bl[i]);\n  }\n  for (let i = 0; i \u003c 6; i++) at(35 + 3 * i, 3, P.bl[BULBS + i]);\n  // Festoons along the stall awnings.\n  for (let x = 0; x \u003c= 63; x += 3) {\n    if (x > 15 && x \u003c 55) continue;\n    const tw = 0.75 + 0.25 * sin(P.t * 3 + x);\n    put(P, x, 76, FESTOON[(x / 3) % 4], tw);\n  }\n}\n\n// Bunting from the crossbar down to the stalls, swaying in the night air.\nfunction bunting(P) {\n  for (const [x0, y0, x1, y1, sag] of [[0, 15, 33, 3, 5], [52, 3, 63, 17, 3]]) {\n    const s = sag + 0.9 * sin(P.t * 1.1 + x0);\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      const y = round(y0 + (y1 - y0) * u + s * 4 * u * (1 - u));\n      put(P, x, y, [44, 40, 46]);\n      const n = x - x0 - 2;\n      if (n % 5 || x === x0 || x === x1) continue;\n      const c = FLAGS[(n / 5) % 5];\n      const k = 0.55 + 0.25 * sin(P.t * 2.3 + x);\n      for (let r = 1; r \u003c= 3; r++) for (let dx = -1; dx \u003c= 1; dx++) if (abs(dx) \u003c= 2 - r + (r === 1)) put(P, x + dx, y + r, c, k * (dx \u003c 0 ? 0.8 : 1));\n    }\n  }\n}\n\n// A person facing right (or left), feet on the ground row, lit from the tower's side.\nfunction person(P, F, left, dim, held, cheer) {\n  const cx = round(F.x);\n  const top = GROUND - F.h;\n  const col = (dx) => (left ? cx - 1 - dx : cx + dx);\n  const T = [F.shirt, F.pants, F.skin, F.hair].map((c) => [c.map((v) => v * dim * 0.78), c.map((v) => v * dim * 1.05)]);\n  const tone = (n, x) => T[n][x > cx - 1 ? 1 : 0];\n  const arm = F.kind === 2 ? F.skin : F.shirt;\n  const torso = round(F.h * 0.36);\n  const legTop = top + 4 + torso;\n  const sw = F.moving ? sin(F.walk) : 0;\n  for (let y = legTop; y \u003c GROUND; y++) {\n    const off = round(((sw * 1.6 * (y - legTop)) / (GROUND - legTop)) * (left ? -1 : 1));\n    for (let dx = -2; dx \u003c= 1; dx++) {\n      const x = col(dx) + (dx \u003c 0 ? -off : off);\n      put(P, x, y, y === GROUND - 1 ? [30, 26, 24] : tone(1, x), dx === -1 || dx === 1 ? 0.85 : 1);\n    }\n  }\n  if (!F.moving) put(P, col(2), GROUND - 1, [30, 26, 24]);\n  for (let y = top + 4; y \u003c legTop; y++) for (let dx = -2; dx \u003c= (F.kind === 2 ? 2 : 1); dx++) put(P, col(dx), y, tone(0, col(dx)));\n  for (let y = top; y \u003c top + 4; y++)\n    for (let dx = -1; dx \u003c= 1; dx++) put(P, col(dx), y, tone(y === top || (dx === -1 && y === top + 1) ? 3 : 2, col(dx)));\n  if (held) return;\n  if (cheer) {\n    for (let y = top - 2; y \u003c top + 5; y++) {\n      put(P, col(2), y, y \u003c top ? F.skin : arm, dim);\n      put(P, col(-3), y, y \u003c top ? F.skin : arm, dim * 0.8);\n    }\n    return;\n  }\n  const hx = col(0) + round(sw * 1.2) * (left ? -1 : 1);\n  for (let y = top + 5; y \u003c legTop + 1; y++) put(P, y \u003c legTop - 1 ? col(0) : hx, y, y === legTop ? F.skin : arm, dim * 0.85);\n}\n\nfunction mallet(P) {\n  const [sx, sy] = P.mS;\n  const L = P.mL;\n  const head = (a, k) => {\n    const dx = cos(a);\n    const dy = sin(a);\n    for (let u = -1.5; u \u003c= 1.5; u += 0.5)\n      for (let v = -2.5; v \u003c= 2.5; v += 0.5) {\n        const c = abs(v) > 1.7 ? [170, 170, 184] : u \u003c -0.7 ? [150, 96, 46] : [210, 146, 76];\n        put(P, sx + dx * (L + u) - dy * v - 0.5, sy + dy * (L + u) + dx * v - 0.5, c, k);\n      }\n  };\n  if (P.ph === SWING || (P.ph === WATCH && P.pt \u003c 0.05)) for (let n = 1; n \u003c= 3; n++) head(P.a + (P.aPrev - P.a) * (n / 3), 0.32);\n  const dx = cos(P.a);\n  const dy = sin(P.a);\n  for (let t = 4; t \u003c= L - 1.5; t += 0.5) put(P, sx + dx * t - 0.5, sy + dy * t - 0.5, [196, 150, 92]);\n  head(P.a, 1);\n  const A = P.q[0];\n  if (P.ph === WALK) return;\n  for (let t = 0; t \u003c= 6; t += 0.5) put(P, sx + dx * t - 0.5, sy + dy * t - 0.5, t > 4.5 || A.kind === 2 ? A.skin : A.shirt, t > 4.5 ? 1 : 0.9);\n}\n\nfunction arcs(P) {\n  if (P.ringT > 1.4) return;\n  const c = P.col.map((v) => v * 0.5 + 128);\n  for (let n = 0; n \u003c 2; n++) {\n    const r = 8 + (P.ringT - 0.28 * n) * 34;\n    if (r \u003c 8) continue;\n    const k = P.ringA * clamp(1 - (r - 8) / 44, 0, 1);\n    for (let a = -0.9; a \u003c= 0.9; a += 0.6 / r) {\n      add(P, CX - 0.5 - r * cos(a), 9 + r * sin(a) * 0.9, c, k);\n      add(P, CX - 0.5 + r * cos(a), 9 + r * sin(a) * 0.9, c, k);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const gl = bulbs(P);\n  const fl = P.ringT \u003c 2.5 ? P.ringA * exp(-P.ringT * 2.2) : 0;\n  base(P, 0.25 + 0.75 * gl, fl);\n  bunting(P);\n  scale(P);\n  drawPuck(P);\n  bell(P);\n  drawBulbs(P);\n  // The pad's rubber, pressed down a row by the blow.\n  const dip = P.padDip > 0.3 ? 1 : 0;\n  for (let x = 20; x \u003c= 27; x++) {\n    put(P, x, PADY + dip, [150, 34, 34]);\n    put(P, x, PADY + 1, [96, 22, 24]);\n  }\n  if (P.hitT \u003c 0.12) for (const [dx, dy] of [[0, 0], [1, 0], [-1, 0], [0, -1], [2, -1], [-2, -1]]) put(P, PADX + dx - 0.5, PADY - 1 + dy, [255, 250, 230]);\n  const cheer = P.ringT \u003c 1.6;\n  P.crowd.forEach((F, i) => person(P, F, true, 0.62, false, cheer && floor(P.ringT * 6 + i) % 2 === 0));\n  for (let i = P.q.length - 1; i >= 1; i--) person(P, P.q[i], false, 0.78, false, false);\n  const A = P.q[0];\n  person(P, A, false, 1, P.ph !== WALK, false);\n  mallet(P);\n  for (const F of P.leavers) person(P, F, false, 0.95, false, false);\n  arcs(P);\n  const sc = P.col.map((v) => v * 0.45 + 140);\n  for (const [x, y, , , life] of P.sparks) {\n    const k = min(1, life * 1.2);\n    put(P, x, y, sc, k);\n    if (life > 0.9) for (const [dx, dy, w] of GLOW.slice(0, 4)) add(P, x + dx, y + dy, sc, w * k);\n  }\n  flush(display, P.buf);\n}\n\nfunction flush(display, buf) {\n  for (let y = 0, o = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Bulbs=0..1, Speed=0.2..3, Strength=60..130, Gravity=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Bulbs","min":0,"max":1,"about":"Turns the bulbs up both edges of the tower round the colour wheel, with the light they throw on the striped posts and the night round the tower, starting from gold."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the fair runs: at 2 everything moves in real time, a full flight to the bell takes 1.26 s each way; at 0.2 it is ten times slower, at 3 half as fast again."},{"name":"Strength","min":60,"max":130,"about":"How hard the players hit on average, as the share of the run to the bell an average swing sends the puck: 60% at the minimum, where an average grown-up just lights FAIR, to 130%, where nearly every grown-up rings the bell. Children hit softer and the strongman harder."},{"name":"Gravity","min":-1,"max":1,"about":"The pull on the puck, from 0.57 g at -1 through Earth's at the middle to 1.74 g at 1: the same swing sends it higher and slower, or lower and quicker."}],"start":[0,2,60,0.06],"measures":{"motion":0.2551,"detail":0.0819,"edges":0.4794,"complexity":1.4989,"coverage":0.8211,"colour":0.2622,"drift":0.1521},"knobResponse":[0.0547,0.0439,0.0765,0.0768]},{"slug":"hourglass","title":"Hourglass","family":"time","round":2,"note":"LED 하나가 모래 한 알이에요. 두 LED 목으로 흘러 위 더미는 가운데부터 꺼지고 아래에는 원뿔이 쌓이며, 위가 비면 유리가 반 바퀴 돌아 뒤집혀요.","idea":"One LED is one grain: a falling-sand automaton pours through a two-LED neck, funnels the top heap into a V and builds a cone below, and when the top runs dry the glass turns over.","buttons":"K1 tap turns the glass over now.","code":"// ===== Patternflow pattern =====\n// Title:   Hourglass\n// Family:  time\n// Idea:    One LED is one grain: a falling-sand automaton pours through a two-LED neck, funnels the top heap into a V and builds a cone below, and when the top runs dry the glass turns over.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Sand=0..1, Flow=0.5..4, Glass=0..1, Layers=1..6\n//\n// Knob 1: Sand. The colour of the sand.\n// Knob 2: Flow. How fast the sand runs: a glass takes about half a minute where it starts, two minutes at the bottom of the range.\n// Knob 3: Glass. The shape of the glass: round bulbs, then two straight cones, then two spheres on a thin tube.\n// Knob 4: Layers. Colours each grain by when in the run it passed the neck, so the heap below grows rings of time.\n// Buttons: K1 tap turns the glass over now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The neck sits between rows 63 and 64; the glass reaches 58 rows each way.\nconst MID = 64;\nconst REACH = 58.5;\nconst BULB = 25;\nconst TURN = 1.5;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Half the inside width of the glass at d rows from the neck. Three shapes,\n// blended as the knob turns: round bulbs, straight cones, spheres on a tube.\nfunction profile(d, shape) {\n  const t = Math.max(0, Math.min(1, (d - 2) / (REACH - 2)));\n  const round = Math.pow(Math.sin(t * Math.PI * 0.62), 0.7);\n  const cone = Math.min(1, t * 1.06);\n  const u = (t - 0.58) / 0.46;\n  const sphere = u * u \u003c 1 ? Math.sqrt(1 - u * u) : 0;\n  const f = shape \u003c 0.5 ? round + (cone - round) * shape * 2 : cone + (sphere - cone) * (shape - 0.5) * 2;\n  return 1 + (BULB - 1) * f;\n}\n\nfunction build(p, shape) {\n  const cell = p.cell;\n  for (let y = 0; y \u003c H; y++) {\n    const d = Math.abs(y + 0.5 - MID);\n    p.hw[y] = d \u003c REACH ? profile(d, shape) : 0;\n  }\n  // Grains the new walls land on are taken out and poured back in from the top of their half.\n  let lost = 0;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const inside = Math.abs(x + 0.5 - W / 2) \u003c p.hw[y];\n      if (inside) {\n        if (cell[i] === 1) cell[i] = 0;\n      } else {\n        if (cell[i] >= 2) {\n          p.spill[lost * 3] = cell[i];\n          p.spill[lost * 3 + 1] = p.ord[i];\n          p.spill[lost * 3 + 2] = y \u003c MID ? 0 : 1;\n          lost++;\n        }\n        cell[i] = 1;\n      }\n    }\n  }\n  for (let g = 0; g \u003c lost; g++) {\n    const bottom = p.spill[g * 3 + 2];\n    const y0 = bottom ? MID : 0;\n    let placed = false;\n    for (let y = y0; y \u003c y0 + MID && !placed; y++) {\n      for (let s = 0; s \u003c W && !placed; s++) {\n        const x = s & 1 ? W / 2 + (s >> 1) : W / 2 - 1 - (s >> 1);\n        const i = y * W + x;\n        if (cell[i] === 0) {\n          cell[i] = p.spill[g * 3];\n          p.ord[i] = p.spill[g * 3 + 1];\n          placed = true;\n        }\n      }\n    }\n  }\n  let total = 0;\n  for (let i = 0; i \u003c N; i++) if (cell[i] >= 2) total++;\n  p.total = total;\n  // The outline is drawn on the outside cells that touch the inside.\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let edge = 0;\n      if (cell[i] === 1) {\n        for (let dy = -1; dy \u003c= 1 && !edge; dy++) {\n          for (let dx = -1; dx \u003c= 1; dx++) {\n            const xx = x + dx;\n            const yy = y + dy;\n            if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n            if (cell[yy * W + xx] !== 1) {\n              edge = 1;\n              break;\n            }\n          }\n        }\n      }\n      p.wall[i] = edge;\n    }\n  }\n}\n\nfunction fill(p) {\n  const cell = p.cell;\n  let room = 0;\n  for (let i = 0; i \u003c MID * W; i++) if (cell[i] !== 1) room++;\n  const count = Math.floor(room * 0.62);\n  let placed = 0;\n  let far = 1;\n  for (let y = MID - 1; y >= 0 && placed \u003c count; y--) {\n    for (let s = 0; s \u003c W && placed \u003c count; s++) {\n      const x = s & 1 ? W / 2 + (s >> 1) : W / 2 - 1 - (s >> 1);\n      const i = y * W + x;\n      if (cell[i] !== 0) continue;\n      cell[i] = 2 + Math.floor(Math.random() * 4);\n      far = Math.max(far, Math.hypot(x + 0.5 - W / 2, (MID - y) * 1.6));\n      placed++;\n    }\n  }\n  // The first heap is banded in bowls around the neck, the way a heap that\n  // has just been turned over hangs, rather than in flat rows.\n  for (let y = 0; y \u003c MID; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (cell[i] >= 2) p.ord[i] = Math.min(255, Math.floor((Math.hypot(x + 0.5 - W / 2, (MID - y) * 1.6) / far) * 256));\n    }\n  }\n  p.total = placed;\n  p.passed = 0;\n}\n\n// A grain takes its band as it passes the neck, by how much of the run has\n// gone before it, so the heap below lays down the run as rings of colour.\nfunction through(p) {\n  const band = Math.min(255, Math.floor((p.passed * 256) / Math.max(1, p.total)));\n  p.passed++;\n  return band;\n}\n\n// One step of the automaton, bottom row first so a grain moves once a step.\n// In each row every grain that can drop straight down does so before any\n// grain slides sideways. Otherwise a slide takes the hole first, the side of\n// the top heap drains before its middle, and the heap peaks instead of\n// funnelling into a crater the way real sand does.\nfunction step(p) {\n  const cell = p.cell;\n  const ord = p.ord;\n  const flip = p.steps & 1;\n  let moved = 0;\n  let top = 0;\n  for (let y = H - 2; y >= 0; y--) {\n    const row = y * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = row + x;\n      const c = cell[i];\n      if (c \u003c 2 || cell[i + W] !== 0) continue;\n      cell[i + W] = c;\n      ord[i + W] = y + 1 === MID ? through(p) : ord[i];\n      cell[i] = 0;\n      moved++;\n      if (y + 1 \u003c MID) top++;\n    }\n    for (let s = 0; s \u003c W; s++) {\n      const x = flip ? s : W - 1 - s;\n      const i = row + x;\n      const c = cell[i];\n      if (c \u003c 2) continue;\n      let to = i + W;\n      const left = x > 0 && cell[to - 1] === 0;\n      const right = x \u003c W - 1 && cell[to + 1] === 0;\n      if (left && right) to += Math.random() \u003c 0.5 ? -1 : 1;\n      else if (left) to -= 1;\n      else if (right) to += 1;\n      else if (y \u003c MID && cell[to] === 1) {\n        // Glass is smoother than sand: near the neck the walls are flatter\n        // than the sand would stand, so a grain lying on the glass creeps\n        // toward the neck instead of staying there for good.\n        const inward = x \u003c W / 2 ? 1 : -1;\n        if (cell[i + inward] !== 0) {\n          top++;\n          continue;\n        }\n        to = i + inward;\n      } else {\n        if (y \u003c MID) top++;\n        continue;\n      }\n      cell[to] = c;\n      ord[to] = y + 1 === MID && to >= MID * W ? through(p) : ord[i];\n      cell[i] = 0;\n      moved++;\n      if (to \u003c MID * W) top++;\n    }\n  }\n  p.steps++;\n  p.moved = moved;\n  p.top = top;\n}\n\nfunction spin(p) {\n  p.passed = 0;\n  const cell = p.cell;\n  const ord = p.ord;\n  for (let i = 0, j = N - 1; i \u003c j; i++, j--) {\n    const c = cell[i];\n    cell[i] = cell[j];\n    cell[j] = c;\n    const o = ord[i];\n    ord[i] = ord[j];\n    ord[j] = o;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.cell = new Uint8Array(N);\n  p.ord = new Uint8Array(N);\n  p.wall = new Uint8Array(N);\n  p.hw = new Float32Array(H);\n  p.spill = new Uint8Array(N * 3);\n  p.img = new Float32Array(N * 3);\n  p.lut = new Float32Array(6 * 4 * 3);\n  p.shape = -1;\n  p.ready = false;\n  p.acc = 0;\n  p.steps = 0;\n  p.moved = 0;\n  p.top = 1;\n  p.idle = 0;\n  p.turn = -1;\n  p.total = 1;\n  p.passed = 0;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 1];\n  const shape = Math.round(Math.max(0, Math.min(1, k[2])) * 40) / 40;\n  if (shape !== p.shape) {\n    p.shape = shape;\n    build(p, shape);\n  }\n  if (!p.ready) {\n    p.ready = true;\n    fill(p);\n    // Open a third of the way through a run, with the stream already landing.\n    for (let i = 0; i \u003c 260; i++) step(p);\n  }\n  p.layers = Math.max(1, Math.min(6, Math.round(k[3])));\n  // At 0 the sand is a sea green rather than red.\n  p.hue = k[0] + 0.44;\n\n  if (input.btnPressed && input.btnPressed[0] && p.turn \u003c 0) p.turn = 0;\n  if (p.turn >= 0) {\n    p.turn += dt / TURN;\n    if (p.turn >= 1) {\n      spin(p);\n      p.turn = -1;\n      p.idle = 0;\n      p.acc = 0;\n    }\n    return;\n  }\n  p.acc += dt * 11 * k[1];\n  let n = 0;\n  while (p.acc >= 1 && n \u003c 8) {\n    step(p);\n    p.acc -= 1;\n    n++;\n  }\n  if (p.acc > 1) p.acc = 1;\n  // Once the top is empty and the heap has stopped sliding, wait a moment and turn.\n  if (p.top === 0 && p.moved === 0) {\n    p.idle += dt;\n    if (p.idle > 1.2) p.turn = 0;\n  } else p.idle = 0;\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const cell = p.cell;\n  const ord = p.ord;\n  const wall = p.wall;\n  const img = p.img;\n  const lut = p.lut;\n  const layers = p.layers;\n  for (let b = 0; b \u003c layers; b++) {\n    // Neighbouring bands step a little round the wheel and alternate light and dark.\n    const h = p.hue + b * 0.09;\n    const light = b & 1 ? 0.6 : 1;\n    for (let s = 0; s \u003c 4; s++) hsv(h, 0.5 + s * 0.04, (0.62 + s * 0.11) * light, lut, (b * 4 + s) * 3);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const hw = p.hw[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const o = i * 3;\n      const c = cell[i];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (c >= 2) {\n        const l = ((ord[i] * layers) >> 8) * 12 + (c - 2) * 3;\n        r = lut[l];\n        g = lut[l + 1];\n        b = lut[l + 2];\n      } else if (wall[i]) {\n        r = 74;\n        g = 96;\n        b = 118;\n      } else if (c === 0) {\n        // A faint glint down one side of each bulb, mirrored so it survives the turn.\n        const dx = x + 0.5 - W / 2;\n        const side = y \u003c MID ? -dx : dx;\n        if (hw > 8 && side > hw * 0.55 && side \u003c hw * 0.55 + 1.2) {\n          r = 26;\n          g = 32;\n          b = 40;\n        }\n      } else if (y \u003c 4 || y >= H - 4) {\n        // The two wooden ends, lit on their outer face.\n        const outer = y === 0 || y === H - 1;\n        r = outer ? 150 : 108;\n        g = outer ? 92 : 62;\n        b = outer ? 46 : 28;\n      } else if (x === 1 || x === W - 2) {\n        r = 128;\n        g = 78;\n        b = 38;\n      } else if (x === 2 || x === W - 3) {\n        r = 84;\n        g = 48;\n        b = 22;\n      }\n      img[o] = r;\n      img[o + 1] = g;\n      img[o + 2] = b;\n    }\n  }\n  if (p.turn \u003c 0) {\n    for (let y = 0; y \u003c H; y++) {\n      for (let x = 0; x \u003c W; x++) {\n        const o = (y * W + x) * 3;\n        display.setPixel(x, y, img[o], img[o + 1], img[o + 2]);\n      }\n    }\n    return;\n  }\n  // The turn: the whole glass rotates half a turn about the middle, shrinking\n  // so that lying on its side it still fits across the panel.\n  const u = p.turn;\n  const e = u * u * (3 - 2 * u);\n  const a = e * Math.PI;\n  const ca = Math.cos(a);\n  const sa = Math.sin(a);\n  const fit = Math.min(1, W / (W * Math.abs(ca) + H * Math.abs(sa)), H / (W * Math.abs(sa) + H * Math.abs(ca)));\n  const inv = 1 / fit;\n  const cx = W / 2;\n  const cy = H / 2;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const px = (x + 0.5 - cx) * inv;\n      const py = (y + 0.5 - cy) * inv;\n      const sx = ca * px + sa * py + cx - 0.5;\n      const sy = -sa * px + ca * py + cy - 0.5;\n      const x0 = Math.floor(sx);\n      const y0 = Math.floor(sy);\n      const fx = sx - x0;\n      const fy = sy - y0;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let q = 0; q \u003c 4; q++) {\n        const xx = x0 + (q & 1);\n        const yy = y0 + (q >> 1);\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const w = (q & 1 ? fx : 1 - fx) * (q >> 1 ? fy : 1 - fy);\n        const o = (yy * W + xx) * 3;\n        r += img[o] * w;\n        g += img[o + 1] * w;\n        b += img[o + 2] * w;\n      }\n      display.setPixel(x, y, r, g, b);\n    }\n  }\n}\n","layer":{"id":"layer-hourglass","type":"code","name":"hourglass","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Hourglass\n// Family:  time\n// Idea:    One LED is one grain: a falling-sand automaton pours through a two-LED neck, funnels the top heap into a V and builds a cone below, and when the top runs dry the glass turns over.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Sand=0..1, Flow=0.5..4, Glass=0..1, Layers=1..6\n//\n// Knob 1: Sand. The colour of the sand.\n// Knob 2: Flow. How fast the sand runs: a glass takes about half a minute where it starts, two minutes at the bottom of the range.\n// Knob 3: Glass. The shape of the glass: round bulbs, then two straight cones, then two spheres on a thin tube.\n// Knob 4: Layers. Colours each grain by when in the run it passed the neck, so the heap below grows rings of time.\n// Buttons: K1 tap turns the glass over now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The neck sits between rows 63 and 64; the glass reaches 58 rows each way.\nconst MID = 64;\nconst REACH = 58.5;\nconst BULB = 25;\nconst TURN = 1.5;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Half the inside width of the glass at d rows from the neck. Three shapes,\n// blended as the knob turns: round bulbs, straight cones, spheres on a tube.\nfunction profile(d, shape) {\n  const t = Math.max(0, Math.min(1, (d - 2) / (REACH - 2)));\n  const round = Math.pow(Math.sin(t * Math.PI * 0.62), 0.7);\n  const cone = Math.min(1, t * 1.06);\n  const u = (t - 0.58) / 0.46;\n  const sphere = u * u \u003c 1 ? Math.sqrt(1 - u * u) : 0;\n  const f = shape \u003c 0.5 ? round + (cone - round) * shape * 2 : cone + (sphere - cone) * (shape - 0.5) * 2;\n  return 1 + (BULB - 1) * f;\n}\n\nfunction build(p, shape) {\n  const cell = p.cell;\n  for (let y = 0; y \u003c H; y++) {\n    const d = Math.abs(y + 0.5 - MID);\n    p.hw[y] = d \u003c REACH ? profile(d, shape) : 0;\n  }\n  // Grains the new walls land on are taken out and poured back in from the top of their half.\n  let lost = 0;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const inside = Math.abs(x + 0.5 - W / 2) \u003c p.hw[y];\n      if (inside) {\n        if (cell[i] === 1) cell[i] = 0;\n      } else {\n        if (cell[i] >= 2) {\n          p.spill[lost * 3] = cell[i];\n          p.spill[lost * 3 + 1] = p.ord[i];\n          p.spill[lost * 3 + 2] = y \u003c MID ? 0 : 1;\n          lost++;\n        }\n        cell[i] = 1;\n      }\n    }\n  }\n  for (let g = 0; g \u003c lost; g++) {\n    const bottom = p.spill[g * 3 + 2];\n    const y0 = bottom ? MID : 0;\n    let placed = false;\n    for (let y = y0; y \u003c y0 + MID && !placed; y++) {\n      for (let s = 0; s \u003c W && !placed; s++) {\n        const x = s & 1 ? W / 2 + (s >> 1) : W / 2 - 1 - (s >> 1);\n        const i = y * W + x;\n        if (cell[i] === 0) {\n          cell[i] = p.spill[g * 3];\n          p.ord[i] = p.spill[g * 3 + 1];\n          placed = true;\n        }\n      }\n    }\n  }\n  let total = 0;\n  for (let i = 0; i \u003c N; i++) if (cell[i] >= 2) total++;\n  p.total = total;\n  // The outline is drawn on the outside cells that touch the inside.\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let edge = 0;\n      if (cell[i] === 1) {\n        for (let dy = -1; dy \u003c= 1 && !edge; dy++) {\n          for (let dx = -1; dx \u003c= 1; dx++) {\n            const xx = x + dx;\n            const yy = y + dy;\n            if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n            if (cell[yy * W + xx] !== 1) {\n              edge = 1;\n              break;\n            }\n          }\n        }\n      }\n      p.wall[i] = edge;\n    }\n  }\n}\n\nfunction fill(p) {\n  const cell = p.cell;\n  let room = 0;\n  for (let i = 0; i \u003c MID * W; i++) if (cell[i] !== 1) room++;\n  const count = Math.floor(room * 0.62);\n  let placed = 0;\n  let far = 1;\n  for (let y = MID - 1; y >= 0 && placed \u003c count; y--) {\n    for (let s = 0; s \u003c W && placed \u003c count; s++) {\n      const x = s & 1 ? W / 2 + (s >> 1) : W / 2 - 1 - (s >> 1);\n      const i = y * W + x;\n      if (cell[i] !== 0) continue;\n      cell[i] = 2 + Math.floor(Math.random() * 4);\n      far = Math.max(far, Math.hypot(x + 0.5 - W / 2, (MID - y) * 1.6));\n      placed++;\n    }\n  }\n  // The first heap is banded in bowls around the neck, the way a heap that\n  // has just been turned over hangs, rather than in flat rows.\n  for (let y = 0; y \u003c MID; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (cell[i] >= 2) p.ord[i] = Math.min(255, Math.floor((Math.hypot(x + 0.5 - W / 2, (MID - y) * 1.6) / far) * 256));\n    }\n  }\n  p.total = placed;\n  p.passed = 0;\n}\n\n// A grain takes its band as it passes the neck, by how much of the run has\n// gone before it, so the heap below lays down the run as rings of colour.\nfunction through(p) {\n  const band = Math.min(255, Math.floor((p.passed * 256) / Math.max(1, p.total)));\n  p.passed++;\n  return band;\n}\n\n// One step of the automaton, bottom row first so a grain moves once a step.\n// In each row every grain that can drop straight down does so before any\n// grain slides sideways. Otherwise a slide takes the hole first, the side of\n// the top heap drains before its middle, and the heap peaks instead of\n// funnelling into a crater the way real sand does.\nfunction step(p) {\n  const cell = p.cell;\n  const ord = p.ord;\n  const flip = p.steps & 1;\n  let moved = 0;\n  let top = 0;\n  for (let y = H - 2; y >= 0; y--) {\n    const row = y * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = row + x;\n      const c = cell[i];\n      if (c \u003c 2 || cell[i + W] !== 0) continue;\n      cell[i + W] = c;\n      ord[i + W] = y + 1 === MID ? through(p) : ord[i];\n      cell[i] = 0;\n      moved++;\n      if (y + 1 \u003c MID) top++;\n    }\n    for (let s = 0; s \u003c W; s++) {\n      const x = flip ? s : W - 1 - s;\n      const i = row + x;\n      const c = cell[i];\n      if (c \u003c 2) continue;\n      let to = i + W;\n      const left = x > 0 && cell[to - 1] === 0;\n      const right = x \u003c W - 1 && cell[to + 1] === 0;\n      if (left && right) to += Math.random() \u003c 0.5 ? -1 : 1;\n      else if (left) to -= 1;\n      else if (right) to += 1;\n      else if (y \u003c MID && cell[to] === 1) {\n        // Glass is smoother than sand: near the neck the walls are flatter\n        // than the sand would stand, so a grain lying on the glass creeps\n        // toward the neck instead of staying there for good.\n        const inward = x \u003c W / 2 ? 1 : -1;\n        if (cell[i + inward] !== 0) {\n          top++;\n          continue;\n        }\n        to = i + inward;\n      } else {\n        if (y \u003c MID) top++;\n        continue;\n      }\n      cell[to] = c;\n      ord[to] = y + 1 === MID && to >= MID * W ? through(p) : ord[i];\n      cell[i] = 0;\n      moved++;\n      if (to \u003c MID * W) top++;\n    }\n  }\n  p.steps++;\n  p.moved = moved;\n  p.top = top;\n}\n\nfunction spin(p) {\n  p.passed = 0;\n  const cell = p.cell;\n  const ord = p.ord;\n  for (let i = 0, j = N - 1; i \u003c j; i++, j--) {\n    const c = cell[i];\n    cell[i] = cell[j];\n    cell[j] = c;\n    const o = ord[i];\n    ord[i] = ord[j];\n    ord[j] = o;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.cell = new Uint8Array(N);\n  p.ord = new Uint8Array(N);\n  p.wall = new Uint8Array(N);\n  p.hw = new Float32Array(H);\n  p.spill = new Uint8Array(N * 3);\n  p.img = new Float32Array(N * 3);\n  p.lut = new Float32Array(6 * 4 * 3);\n  p.shape = -1;\n  p.ready = false;\n  p.acc = 0;\n  p.steps = 0;\n  p.moved = 0;\n  p.top = 1;\n  p.idle = 0;\n  p.turn = -1;\n  p.total = 1;\n  p.passed = 0;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 0, 1];\n  const shape = Math.round(Math.max(0, Math.min(1, k[2])) * 40) / 40;\n  if (shape !== p.shape) {\n    p.shape = shape;\n    build(p, shape);\n  }\n  if (!p.ready) {\n    p.ready = true;\n    fill(p);\n    // Open a third of the way through a run, with the stream already landing.\n    for (let i = 0; i \u003c 260; i++) step(p);\n  }\n  p.layers = Math.max(1, Math.min(6, Math.round(k[3])));\n  // At 0 the sand is a sea green rather than red.\n  p.hue = k[0] + 0.44;\n\n  if (input.btnPressed && input.btnPressed[0] && p.turn \u003c 0) p.turn = 0;\n  if (p.turn >= 0) {\n    p.turn += dt / TURN;\n    if (p.turn >= 1) {\n      spin(p);\n      p.turn = -1;\n      p.idle = 0;\n      p.acc = 0;\n    }\n    return;\n  }\n  p.acc += dt * 11 * k[1];\n  let n = 0;\n  while (p.acc >= 1 && n \u003c 8) {\n    step(p);\n    p.acc -= 1;\n    n++;\n  }\n  if (p.acc > 1) p.acc = 1;\n  // Once the top is empty and the heap has stopped sliding, wait a moment and turn.\n  if (p.top === 0 && p.moved === 0) {\n    p.idle += dt;\n    if (p.idle > 1.2) p.turn = 0;\n  } else p.idle = 0;\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const cell = p.cell;\n  const ord = p.ord;\n  const wall = p.wall;\n  const img = p.img;\n  const lut = p.lut;\n  const layers = p.layers;\n  for (let b = 0; b \u003c layers; b++) {\n    // Neighbouring bands step a little round the wheel and alternate light and dark.\n    const h = p.hue + b * 0.09;\n    const light = b & 1 ? 0.6 : 1;\n    for (let s = 0; s \u003c 4; s++) hsv(h, 0.5 + s * 0.04, (0.62 + s * 0.11) * light, lut, (b * 4 + s) * 3);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const hw = p.hw[y];\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const o = i * 3;\n      const c = cell[i];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (c >= 2) {\n        const l = ((ord[i] * layers) >> 8) * 12 + (c - 2) * 3;\n        r = lut[l];\n        g = lut[l + 1];\n        b = lut[l + 2];\n      } else if (wall[i]) {\n        r = 74;\n        g = 96;\n        b = 118;\n      } else if (c === 0) {\n        // A faint glint down one side of each bulb, mirrored so it survives the turn.\n        const dx = x + 0.5 - W / 2;\n        const side = y \u003c MID ? -dx : dx;\n        if (hw > 8 && side > hw * 0.55 && side \u003c hw * 0.55 + 1.2) {\n          r = 26;\n          g = 32;\n          b = 40;\n        }\n      } else if (y \u003c 4 || y >= H - 4) {\n        // The two wooden ends, lit on their outer face.\n        const outer = y === 0 || y === H - 1;\n        r = outer ? 150 : 108;\n        g = outer ? 92 : 62;\n        b = outer ? 46 : 28;\n      } else if (x === 1 || x === W - 2) {\n        r = 128;\n        g = 78;\n        b = 38;\n      } else if (x === 2 || x === W - 3) {\n        r = 84;\n        g = 48;\n        b = 22;\n      }\n      img[o] = r;\n      img[o + 1] = g;\n      img[o + 2] = b;\n    }\n  }\n  if (p.turn \u003c 0) {\n    for (let y = 0; y \u003c H; y++) {\n      for (let x = 0; x \u003c W; x++) {\n        const o = (y * W + x) * 3;\n        display.setPixel(x, y, img[o], img[o + 1], img[o + 2]);\n      }\n    }\n    return;\n  }\n  // The turn: the whole glass rotates half a turn about the middle, shrinking\n  // so that lying on its side it still fits across the panel.\n  const u = p.turn;\n  const e = u * u * (3 - 2 * u);\n  const a = e * Math.PI;\n  const ca = Math.cos(a);\n  const sa = Math.sin(a);\n  const fit = Math.min(1, W / (W * Math.abs(ca) + H * Math.abs(sa)), H / (W * Math.abs(sa) + H * Math.abs(ca)));\n  const inv = 1 / fit;\n  const cx = W / 2;\n  const cy = H / 2;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const px = (x + 0.5 - cx) * inv;\n      const py = (y + 0.5 - cy) * inv;\n      const sx = ca * px + sa * py + cx - 0.5;\n      const sy = -sa * px + ca * py + cy - 0.5;\n      const x0 = Math.floor(sx);\n      const y0 = Math.floor(sy);\n      const fx = sx - x0;\n      const fy = sy - y0;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let q = 0; q \u003c 4; q++) {\n        const xx = x0 + (q & 1);\n        const yy = y0 + (q >> 1);\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const w = (q & 1 ? fx : 1 - fx) * (q >> 1 ? fy : 1 - fy);\n        const o = (yy * W + xx) * 3;\n        r += img[o] * w;\n        g += img[o + 1] * w;\n        b += img[o + 2] * w;\n      }\n      display.setPixel(x, y, r, g, b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sand=0..1, Flow=0.5..4, Glass=0..1, Layers=1..6","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sand","min":0,"max":1,"about":"The colour of the sand."},{"name":"Flow","min":0.5,"max":4,"about":"How fast the sand runs: a glass takes about half a minute where it starts, two minutes at the bottom of the range."},{"name":"Glass","min":0,"max":1,"about":"The shape of the glass: round bulbs, then two straight cones, then two spheres on a thin tube."},{"name":"Layers","min":1,"max":6,"about":"Colours each grain by when in the run it passed the neck, so the heap below grows rings of time."}],"start":[0,2,0,1],"measures":{"motion":0.0687,"detail":0.0755,"edges":0.7242,"complexity":0.1856,"coverage":0.3468,"colour":0.2248,"drift":0.051},"knobResponse":[0.0656,0.0293,0.076,0.03]},{"slug":"incense","title":"Incense","family":"noise","round":15,"note":"향 연기가 실처럼 곧게 오르다 몇 줄 위에서 흔들리고, 곧 소용돌이로 흩어져 위로 퍼져요. 돌탑 위 역류 향꽂이에서는 무거운 연기가 돌을 타고 흘러내려 접시에 고여요.","idea":"A backflow cone on a little cairn of stones sends a thin thread of smoke straight up until it snakes, curls and breaks into wisps in a curl-noise draught, while its heavy smoke pours down the stones like water and pools in the dish.","buttons":"K1 tap breathes across the smoke at some height between rows 22 and 62, bending and scrambling the threads there for a second and a half while the embers flare.","code":"// ===== Patternflow pattern =====\n// Title:   Incense\n// Family:  noise\n// Idea:    A backflow cone on a little cairn of stones sends a thin thread of smoke straight up until it snakes, curls and breaks into wisps in a curl-noise draught, while its heavy smoke pours down the stones like water and pools in the dish.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bridson, Hourihan and Nordenstam's curl noise for procedural fluid flow (SIGGRAPH 2007), driving smoke particles\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sticks=1..3, Breeze=-1..1\n//\n// Knob 1: Hue. The colour of the lamp that lights the smoke and the room, starting from a cool grey-blue; thick smoke goes whiter whatever the colour.\n// Knob 2: Speed. How fast the air moves: at 2 the thread leaves the tip at 18 rows a second and breaks up about 17 rows above it; at 0.2 the smoke drifts up ten times slower and holds together for 29 rows; at 3 it breaks up after 10.\n// Knob 3: Sticks. One to three sticks of incense standing in the dish beside the burner, each with a glowing tip and its own thread; each stick past the first warms and stirs the air so every thread breaks up 3.5 rows sooner.\n// Knob 4: Breeze. A cross draught: at 0 the smoke rises straight; turned either way it leans that way, breaks up as much as 9 rows sooner, bends the falling smoke and drags the pool along the dish.\n// Buttons: K1 tap breathes across the smoke at some height between rows 22 and 62, bending and scrambling the threads there for a second and a half while the embers flare.\n\nconst W = 64;\nconst H = 128;\nconst MAXP = 4600;\n// Rows: the dish's rim is DISH, the pooled smoke lies at POOL, the table top is TABLE.\nconst DISH = 114;\nconst POOL = 113.5;\nconst TABLE = 123.5;\n// The cone's glowing tip, and the hole in the top stone where its heavy smoke comes out.\nconst CONE_X = 32;\nconst CONE_Y = 76;\nconst HOLE_X = 32;\nconst HOLE_Y = 91;\n// Sticks in the dish as base x, base y, tip x, tip y. The first stands behind the stones.\nconst STICKS = [\n  [41, 104, 42.5, 66],\n  [11, 116, 12, 92],\n  [53, 116, 51.5, 97],\n];\n// Stones of the burner as left x, right x, top y at the left, top y at the right, bottom y.\nconst STONES = [\n  [21, 52, 109, 104, 113],\n  [19, 47, 96, 99, 105],\n  [25, 39, 84, 84, 95],\n];\n// The heavy smoke slides down the tops of the two lower stones: stone index, from x, to x.\nconst LEDGES = [\n  [1, 24, 47.5],\n  [0, 52, 22],\n];\n// Curl-noise velocity grid: a node every 2 LEDs.\nconst GX = 33;\nconst GY = 65;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(out, h, s, v) {\n  h -= Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n  return out;\n}\n\nfunction smooth(v) {\n  v = v \u003c 0 ? 0 : v > 1 ? 1 : v;\n  return v * v * (3 - 2 * v);\n}\n\nfunction stoneTop(s, x) {\n  const S = STONES[s];\n  return S[2] + ((S[3] - S[2]) * (x - S[0])) / (S[1] - S[0]);\n}\n\nexport function setup(params) {\n  const lat = new Float32Array(256 * 256);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  params.lat = lat;\n  // Particles: position, velocity, age, what they are doing, where they came from, when, and a depth in the stream.\n  params.x = new Float32Array(MAXP);\n  params.y = new Float32Array(MAXP);\n  params.vx = new Float32Array(MAXP);\n  params.vy = new Float32Array(MAXP);\n  params.age = new Float32Array(MAXP);\n  params.kind = new Int8Array(MAXP).fill(-1);\n  params.src = new Int8Array(MAXP);\n  params.emit = new Float32Array(MAXP);\n  params.dep = new Float32Array(MAXP);\n  params.led = new Int8Array(MAXP);\n  // Each rising particle remembers the one its source let go just before it, so the thread is drawn as a line between them.\n  params.prev = new Int32Array(MAXP).fill(-1);\n  params.last = new Int32Array(5).fill(-1);\n  params.next = 0;\n  params.gvx = new Float32Array(GX * GY);\n  params.gvy = new Float32Array(GX * GY);\n  params.psi = new Float32Array(GX * GY);\n  params.dens = new Float32Array(W * H);\n  params.soft = new Float32Array(W * H);\n  params.tmp = new Float32Array(W * H);\n  params.scene = new Float32Array(W * H * 3);\n  // 1 where a stone or the dish stands in front of the sticks.\n  params.front = new Uint8Array(W * H);\n  params.buf = new Float32Array(W * H * 3);\n  params.glow = new Float32Array(W * H);\n  params.debt = new Float32Array(5);\n  params.sx = new Float32Array(4);\n  params.sy = new Float32Array(4);\n  params.sway = new Float32Array(4);\n  params.col = [0, 0, 0];\n  params.t = 0;\n  params.started = false;\n  params.breath = 9;\n  params.by = 40;\n  params.bdir = 1;\n  params.sticks = 0;\n  params.flare = 0;\n  params.hb = 17;\n  bakeScene(params);\n}\n\nfunction bakeScene(params) {\n  const sc = params.scene;\n  const fr = params.front;\n  const c = params.col;\n  const set = (x, y) => sc.set(c, (y * W + x) * 3);\n  // A dark room, a little lighter up to the left where the lamp is; draw() colours it with the lamp.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) params.glow[y * W + x] = 0.012 + 0.1 * (1 - Math.hypot(x + 10, y - 20) / 140);\n  // The table, dark wood with its grain running across.\n  for (let y = TABLE + 0.5; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 0.5 + 0.5 * Math.sin(x * 0.21 + Math.sin(x * 0.05 + y) * 2 + y * 1.7);\n      hsv(c, 0.07, 0.62, y === TABLE + 0.5 ? 0.24 : 0.13 + 0.04 * g);\n      set(x, y);\n      params.glow[y * W + x] = y === TABLE + 0.5 ? 0.16 - (0.1 * x) / W : 0;\n    }\n  // Stones, glazed a dark celadon, lit on their top edges and on the side towards the lamp.\n  STONES.forEach((S, s) => {\n    for (let x = S[0]; x \u003c= S[1]; x++) {\n      const top = Math.round(stoneTop(s, x));\n      const u = (x - S[0]) / (S[1] - S[0]);\n      for (let y = top; y \u003c= S[4]; y++) {\n        // Rounded corners, and sides that bulge a little at the middle like a river stone.\n        const e = Math.min(y - top, S[4] - y);\n        const inset = (e \u003c 2 ? 2 - e : 0) + 1.2 * Math.abs((2 * (y - top)) / (S[4] - top) - 1) ** 2;\n        if (x \u003c S[0] + inset - 0.3 || x > S[1] - inset + 0.3) continue;\n        const edgeL = x \u003c S[0] + inset + 0.7;\n        const edgeR = x > S[1] - inset - 0.7;\n        // Layers in the stone, a few pits, darker towards the foot and away from the lamp.\n        let v = 0.25 - 0.09 * u + 0.025 * Math.sin(y * 1.1 + s * 2 + x * 0.08) + 0.04 * (hash(x, y) - 0.5) - (0.07 * (y - top)) / (S[4] - top + 1);\n        if (hash(x * 5, y * 3 + s) \u003c 0.05) v -= 0.06;\n        if (y === top) v = 0.46 - 0.12 * u;\n        else if (edgeL || y === top + 1) v += 0.06;\n        else if (edgeR || y === S[4]) v -= 0.06;\n        hsv(c, 0.44, 0.32, v);\n        set(x, y);\n        fr[y * W + x] = 1;\n        // The lamp catches the top edges.\n        params.glow[y * W + x] = y === top ? 0.22 - 0.12 * u : 0;\n      }\n    }\n  });\n  // The hole the heavy smoke comes out of, and the cone sitting on the top stone.\n  for (let x = 31; x \u003c= 33; x++) {\n    hsv(c, 0.44, 0.4, x === 32 ? 0.03 : 0.08);\n    set(x, HOLE_Y - 1);\n    set(x, HOLE_Y);\n  }\n  for (let y = CONE_Y + 1; y \u003c 84; y++) {\n    const half = ((y - CONE_Y) * 3.4) / (83 - CONE_Y);\n    for (let x = Math.round(CONE_X - half); x \u003c= Math.round(CONE_X + half); x++) {\n      hsv(c, 0.03, 0.55, 0.36 - (0.12 * (x - CONE_X + half)) / (2 * half + 1));\n      set(x, y);\n      fr[y * W + x] = 1;\n      params.glow[y * W + x] = 0;\n    }\n  }\n  // The dish, a dark iron glaze with a lit rim, standing on a foot.\n  for (let y = DISH; y \u003c= DISH + 8; y++) {\n    const q = (y - DISH) / 7;\n    const half = y > DISH + 7 ? 13 : 26.5 - 7 * q * q;\n    for (let x = Math.ceil(31.5 - half); x \u003c= Math.floor(31.5 + half); x++) {\n      const u = (x - 31.5 + half) / (2 * half);\n      let v = y === DISH ? 0.55 - 0.2 * u : 0.24 - 0.12 * u - 0.06 * q + 0.03 * hash(x, y);\n      if (y === DISH + 1) v += 0.08;\n      hsv(c, 0.05, y === DISH ? 0.35 : 0.6, v);\n      set(x, y);\n      fr[y * W + x] = 1;\n      params.glow[y * W + x] = y === DISH ? 0.2 - 0.12 * u : 0;\n    }\n  }\n}\n\nfunction spawn(params, kind, x, y, vx, vy, src) {\n  const i = params.next;\n  params.next = (i + 1) % MAXP;\n  params.kind[i] = kind;\n  params.x[i] = x;\n  params.y[i] = y;\n  params.vx[i] = vx;\n  params.vy[i] = vy;\n  params.age[i] = 0;\n  params.src[i] = src;\n  params.emit[i] = params.t;\n  params.dep[i] = Math.random();\n  return i;\n}\n\n// The draught: a stream function of two octaves of noise drifting up with the smoke; its curl\n// gives a velocity that swirls without ever piling smoke up or thinning it out.\nfunction stepField(params) {\n  const lat = params.lat;\n  const t = params.t;\n  const psi = params.psi;\n  for (let j = 0; j \u003c GY; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const x = i * 2;\n      const y = j * 2;\n      psi[j * GX + i] = vn(lat, x / 13 + 0.05 * t, (y + 11 * t) / 13) + 0.4 * vn(lat, x / 5.5 - 0.09 * t + 40, (y + 15 * t) / 5.5 + 40);\n    }\n  const gvx = params.gvx;\n  const gvy = params.gvy;\n  for (let j = 0; j \u003c GY; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const jm = j > 0 ? j - 1 : j;\n      const jp = j \u003c GY - 1 ? j + 1 : j;\n      const im = i > 0 ? i - 1 : i;\n      const ip = i \u003c GX - 1 ? i + 1 : i;\n      gvx[j * GX + i] = ((psi[jp * GX + i] - psi[jm * GX + i]) / (2 * (jp - jm))) * 190;\n      gvy[j * GX + i] = (-(psi[j * GX + ip] - psi[j * GX + im]) / (2 * (ip - im))) * 190;\n    }\n}\n\nfunction step(params, dts) {\n  const t = (params.t += dts);\n  stepField(params);\n  const sticks = params.sticks;\n  const breeze = params.breeze;\n  // Sources: the cone, then the sticks the knob has lit. Room air leans each thread gently one way and the other.\n  const srcs = 1 + sticks;\n  const SX = params.sx;\n  const SY = params.sy;\n  const sway = params.sway;\n  for (let s = 0; s \u003c srcs; s++) {\n    SX[s] = s === 0 ? CONE_X : STICKS[s - 1][2];\n    SY[s] = s === 0 ? CONE_Y : STICKS[s - 1][3];\n    sway[s] = 2 * Math.sin(t * 0.43 + s * 2) + 1.2 * Math.sin(t * 0.17 + s);\n    params.debt[s] += 50 * dts;\n    while (params.debt[s] >= 1) {\n      params.debt[s] -= 1;\n      // vx keeps how far this bit of smoke will be pushed aside where the thread starts to snake.\n      const i = spawn(params, 0, SX[s] + (Math.random() - 0.5) * 0.15, SY[s] - 1 - Math.random(), 5 * Math.sin(t * 2.7 + s * 1.9), 0, s);\n      params.prev[i] = params.last[s];\n      params.last[s] = i;\n    }\n  }\n  // Heavy smoke out of the hole in the stone.\n  params.debt[4] += 44 * dts;\n  while (params.debt[4] >= 1) {\n    params.debt[4] -= 1;\n    spawn(params, 1, HOLE_X + (Math.random() - 0.5) * 2, HOLE_Y + 0.5, (Math.random() - 0.5) * 0.8, 2, 4);\n  }\n\n  // How far a thread climbs before it breaks up: less in a faster or crosswise draught.\n  // More sticks warm the air more and stir it, so every thread breaks sooner.\n  const hb = (params.hb = 17 * (1.8 - 0.8 * params.speed) - 9 * Math.abs(breeze) - 3.5 * (sticks - 1));\n  const breath = params.breath;\n  const env = breath \u003c 1.6 ? Math.sin((Math.PI * breath) / 1.6) : 0;\n  const gvx = params.gvx;\n  const gvy = params.gvy;\n  const X = params.x;\n  const Y = params.y;\n  for (let i = 0; i \u003c MAXP; i++) {\n    const kind = params.kind[i];\n    if (kind \u003c 0) continue;\n    const age = (params.age[i] += dts);\n    let x = X[i];\n    let y = Y[i];\n    if (kind === 0) {\n      const s = params.src[i];\n      const h = SY[s] - y;\n      const turb = smooth((h - hb) / 18);\n      // Still air carries the thread straight up, slower as it cools.\n      let ux = breeze * 20 * (0.2 + Math.min(1, h / 45)) + sway[s] * Math.min(1, h / 25);\n      let uy = -18 * (0.4 + 0.6 * Math.exp(-h / 50));\n      // A broken-up plume entrains the air round it and widens as it climbs.\n      ux += (x - SX[s]) * 0.12 * turb;\n      // Just below the break the thread starts to snake: each bit of smoke was pushed aside by the moment it left the tip.\n      if (h > hb - 14) ux += params.vx[i] * smooth((h - hb + 14) / 12) * (1 - 0.6 * turb);\n      if (turb > 0 || env > 0) {\n        const gx = Math.max(0, Math.min(GX - 1.001, x / 2));\n        const gy = Math.max(0, Math.min(GY - 1.001, y / 2));\n        const ix = Math.floor(gx);\n        const iy = Math.floor(gy);\n        const fx = gx - ix;\n        const fy = gy - iy;\n        const o = iy * GX + ix;\n        const a = (1 - fx) * (1 - fy);\n        const b = fx * (1 - fy);\n        const c = (1 - fx) * fy;\n        const d = fx * fy;\n        let amp = turb;\n        if (env > 0) {\n          const e = env * Math.exp(-((y - params.by) * (y - params.by)) / 120);\n          ux += params.bdir * 45 * e;\n          amp += 1.6 * e;\n        }\n        ux += amp * (gvx[o] * a + gvx[o + 1] * b + gvx[o + GX] * c + gvx[o + GX + 1] * d);\n        uy += amp * (gvy[o] * a + gvy[o + 1] * b + gvy[o + GX] * c + gvy[o + GX + 1] * d);\n      }\n      x += ux * dts;\n      y += uy * dts;\n      // Past the break the smoke also spreads in small eddies the field is too coarse to hold.\n      if (turb > 0) {\n        const r = turb * 1.4 * Math.sqrt(dts);\n        x += (Math.random() - 0.5) * r;\n        y += (Math.random() - 0.5) * r;\n      }\n      if (y \u003c -3 || x \u003c -3 || x > W + 2 || age > 9) params.kind[i] = -1;\n    } else if (kind === 1) {\n      // Heavy smoke falls slowly and lands on a stone, in the dish or on the table.\n      let vy = params.vy[i] + 22 * dts;\n      if (vy > 9) vy = 9;\n      params.vy[i] = vy;\n      params.vx[i] += (breeze * 9 - params.vx[i]) * dts;\n      x += params.vx[i] * dts;\n      const ny = y + vy * dts;\n      const dep = params.dep[i];\n      let landed = false;\n      for (let l = 0; l \u003c LEDGES.length && !landed; l++) {\n        const L = LEDGES[l];\n        if (x \u003c Math.min(L[1], L[2]) || x > Math.max(L[1], L[2])) continue;\n        const top = stoneTop(L[0], x) - 0.6 - dep * 1.4;\n        if (y \u003c= top + 0.5 && ny >= top) {\n          params.kind[i] = 2;\n          params.led[i] = l;\n          y = top;\n          landed = true;\n        }\n      }\n      if (!landed) {\n        y = ny;\n        const inDish = x > 6 && x \u003c 57;\n        if (inDish && y >= POOL - dep * 3) {\n          params.kind[i] = 3;\n          // Pooled smoke spreads out over the dish from where it lands; vy keeps the way it drifts.\n          params.vy[i] = (Math.random() \u003c 0.45 ? -1 : 1) * (0.8 + 2.2 * Math.random());\n          params.vx[i] = params.vy[i] * 2;\n          y = POOL - dep * 3;\n        } else if (!inDish && y >= TABLE - dep * 1.5) {\n          params.kind[i] = 4;\n          params.vx[i] = (x \u003c 31.5 ? -1 : 1) * (2 + 2 * Math.random());\n          y = TABLE - dep * 1.5;\n        }\n      }\n    } else if (kind === 2) {\n      // Sliding down the top of a stone to its lower end, then over.\n      const L = LEDGES[params.led[i]];\n      const dir = L[2] > L[1] ? 1 : -1;\n      x += dir * (6 + 3 * params.dep[i]) * dts;\n      y = stoneTop(L[0], x) - 0.6 - params.dep[i] * 1.4;\n      if ((x - L[2]) * dir > 0) {\n        params.kind[i] = 1;\n        params.vx[i] = dir * 3.5;\n        params.vy[i] = 0.5;\n      }\n    } else {\n      // Pooled on the dish or the table: spreading out, wandering, thinning.\n      params.vx[i] += ((Math.random() - 0.5) * 9 + breeze * 9 + (kind === 3 ? params.vy[i] - params.vx[i] : -0.3 * params.vx[i])) * dts;\n      x += params.vx[i] * dts;\n      if (kind === 3) {\n        y = POOL - params.dep[i] * 3 - 0.6 * Math.sin(age * 1.3 + params.dep[i] * 9);\n        if (x \u003c 5.5 || x > 57.5) {\n          params.kind[i] = 1;\n          params.vy[i] = 0.5;\n        } else if (age > 20) params.kind[i] = -1;\n      } else if (age > 13 || x \u003c -2 || x > W + 1) params.kind[i] = -1;\n    }\n    X[i] = x;\n    Y[i] = y;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = 0.58 + k[0];\n  params.speed = Math.max(0.1, k[1] / 2);\n  params.sticks = Math.max(1, Math.min(3, Math.round(k[2])));\n  params.breeze = Math.max(-1, Math.min(1, k[3]));\n  if (!params.started) {\n    params.started = true;\n    // Ten seconds of smoke before the first frame, so the thread is up and the dish has its pool.\n    for (let n = 0; n \u003c 100; n++) step(params, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.breath = 0;\n    params.by = 22 + Math.random() * 40;\n    params.bdir = Math.random() \u003c 0.5 ? -1 : 1;\n  }\n  params.breath += dt;\n  params.flare = params.breath \u003c 2 ? Math.sin((Math.PI * params.breath) / 2) : 0;\n  step(params, dt * params.speed);\n}\n\nfunction splat(dens, x, y, w) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  if (ix \u003c 0 || iy \u003c 0 || ix >= W - 1 || iy >= H - 1) return;\n  const fx = x - ix;\n  const fy = y - iy;\n  const o = iy * W + ix;\n  dens[o] += w * (1 - fx) * (1 - fy);\n  dens[o + 1] += w * fx * (1 - fy);\n  dens[o + W] += w * (1 - fx) * fy;\n  dens[o + W + 1] += w * fx * fy;\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  buf.set(params.scene);\n  const fr = params.front;\n  const c = params.col;\n  // The lamp: its colour on the smoke, and a paler wash of it on the room and the lit edges.\n  const light = hsv([0, 0, 0], params.hue, 0.5, 0.95);\n  const room = hsv([0, 0, 0], params.hue, 0.45, 0.95);\n  const glow = params.glow;\n  for (let p = 0; p \u003c W * H; p++) {\n    const g = glow[p];\n    if (g === 0) continue;\n    buf[p * 3] += room[0] * g;\n    buf[p * 3 + 1] += room[1] * g;\n    buf[p * 3 + 2] += room[2] * g;\n  }\n  // Sticks behind the stones and the dish: bamboo at the foot, the dark coated length, and grey ash over the ember.\n  const embers = [[CONE_X, CONE_Y, 0]];\n  for (let s = 0; s \u003c params.sticks; s++) {\n    const [bx, by, tx, ty] = STICKS[s];\n    for (let y = ty; y \u003c= by; y++) {\n      const x = Math.round(bx + ((tx - bx) * (by - y)) / (by - ty));\n      if (fr[y * W + x]) continue;\n      if (y - ty \u003c 2) hsv(c, 0.08, 0.06, 0.55 - 0.1 * (y - ty));\n      else if (by - y \u003c 9) hsv(c, 0.11, 0.45, 0.5);\n      else hsv(c, 0.02, 0.62, 0.36);\n      buf.set(c, (y * W + x) * 3);\n    }\n    embers.push([tx, ty + 2, s + 1]);\n  }\n\n  // Smoke goes into two layers: the threads as they are, and the broken-up and pooled smoke, which is blurred so it reads as haze, not grains.\n  const dens = params.dens;\n  const soft = params.soft;\n  dens.fill(0);\n  soft.fill(0);\n  const hb = params.hb;\n  // The tip burns at its own pace, so in a slow draught the same smoke crowds into less air and looks thicker.\n  const thick = Math.pow(params.speed, -0.35);\n  for (let i = 0; i \u003c MAXP; i++) {\n    const kind = params.kind[i];\n    if (kind \u003c 0) continue;\n    const age = params.age[i];\n    const x = params.x[i];\n    const y = params.y[i];\n    if (kind === 0) {\n      // Rising smoke thins as it cools. A thread is drawn as a line back to the smoke let go just before it, so a stretched line spreads the same smoke thinner.\n      const s = params.src[i];\n      const w = 0.75 * thick * Math.exp(-age / 9);\n      const ws = w * 0.85 * smooth((params.sy[s] - y - hb) / 18);\n      const wc = w - ws;\n      const both = ws > 0.01 * w && wc > 0.16 * w;\n      const into = wc > ws ? dens : soft;\n      const j = params.prev[i];\n      if (j >= 0 && params.kind[j] === 0 && params.src[j] === s && params.emit[j] \u003c= params.emit[i]) {\n        const dx = params.x[j] - x;\n        const dy = params.y[j] - y;\n        const d = Math.abs(dx) + Math.abs(dy);\n        if (d \u003c 9) {\n          const n = Math.ceil(d / 0.75);\n          for (let k = 0; k \u003c n; k++) {\n            if (both) {\n              splat(dens, x + (dx * k) / n, y + (dy * k) / n, wc / n);\n              splat(soft, x + (dx * k) / n, y + (dy * k) / n, ws / n);\n            } else splat(into, x + (dx * k) / n, y + (dy * k) / n, w / n);\n          }\n          continue;\n        }\n      }\n      splat(into, x, y, w);\n      continue;\n    }\n    // The heavy smoke stays milky until it has lain a while.\n    if (kind === 3 || kind === 4) splat(soft, x, y, 0.35 * thick * Math.min(1, ((kind === 3 ? 20 : 13) - age) / 6));\n    else {\n      splat(dens, x, y, 0.23 * thick);\n      splat(soft, x, y, 0.23 * thick);\n    }\n  }\n  // A 3 x 3 tent blur of the soft layer, across then down.\n  const tmp = params.tmp;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      tmp[p] = 0.5 * soft[p] + 0.25 * ((x > 0 ? soft[p - 1] : 0) + (x \u003c W - 1 ? soft[p + 1] : 0));\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      dens[p] += 0.5 * tmp[p] + 0.25 * ((y > 0 ? tmp[p - W] : 0) + (y \u003c H - 1 ? tmp[p + W] : 0));\n    }\n\n  for (let p = 0; p \u003c W * H; p++) {\n    const d = dens[p];\n    if (d \u003c 0.004) continue;\n    const s = 1 - Math.exp(-d * 2.2);\n    // Thin smoke takes the lamp's colour; where it is thick it scatters more of everything and goes whiter.\n    const wv = s * s * 0.3;\n    const o = p * 3;\n    buf[o] += (light[0] + (245 - light[0]) * wv - buf[o]) * s;\n    buf[o + 1] += (light[1] + (245 - light[1]) * wv - buf[o + 1]) * s;\n    buf[o + 2] += (light[2] + (245 - light[2]) * wv - buf[o + 2]) * s;\n  }\n\n  // Embers breathe, and flare when breathed on; their glow warms the smoke right over them.\n  for (const [ex, ey, s] of embers) {\n    const heat = (0.8 + 0.12 * Math.sin(time * 1.7 + s * 2.3) + 0.08 * Math.sin(time * 4.1 + s)) * (1 + 0.6 * params.flare);\n    const cx = Math.round(ex);\n    const cy = Math.round(ey);\n    for (let dy = -3; dy \u003c= 3; dy++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const x = cx + dx;\n        const y = cy + dy;\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const g = heat * Math.exp(-(dx * dx + dy * dy) / 2.2) * (dx === 0 && dy === 0 ? 1 : 0.5);\n        const o = (y * W + x) * 3;\n        buf[o] += 255 * g;\n        buf[o + 1] += 105 * g;\n        buf[o + 2] += 30 * g;\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","layer":{"id":"layer-incense","type":"code","name":"incense","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Incense\n// Family:  noise\n// Idea:    A backflow cone on a little cairn of stones sends a thin thread of smoke straight up until it snakes, curls and breaks into wisps in a curl-noise draught, while its heavy smoke pours down the stones like water and pools in the dish.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bridson, Hourihan and Nordenstam's curl noise for procedural fluid flow (SIGGRAPH 2007), driving smoke particles\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Sticks=1..3, Breeze=-1..1\n//\n// Knob 1: Hue. The colour of the lamp that lights the smoke and the room, starting from a cool grey-blue; thick smoke goes whiter whatever the colour.\n// Knob 2: Speed. How fast the air moves: at 2 the thread leaves the tip at 18 rows a second and breaks up about 17 rows above it; at 0.2 the smoke drifts up ten times slower and holds together for 29 rows; at 3 it breaks up after 10.\n// Knob 3: Sticks. One to three sticks of incense standing in the dish beside the burner, each with a glowing tip and its own thread; each stick past the first warms and stirs the air so every thread breaks up 3.5 rows sooner.\n// Knob 4: Breeze. A cross draught: at 0 the smoke rises straight; turned either way it leans that way, breaks up as much as 9 rows sooner, bends the falling smoke and drags the pool along the dish.\n// Buttons: K1 tap breathes across the smoke at some height between rows 22 and 62, bending and scrambling the threads there for a second and a half while the embers flare.\n\nconst W = 64;\nconst H = 128;\nconst MAXP = 4600;\n// Rows: the dish's rim is DISH, the pooled smoke lies at POOL, the table top is TABLE.\nconst DISH = 114;\nconst POOL = 113.5;\nconst TABLE = 123.5;\n// The cone's glowing tip, and the hole in the top stone where its heavy smoke comes out.\nconst CONE_X = 32;\nconst CONE_Y = 76;\nconst HOLE_X = 32;\nconst HOLE_Y = 91;\n// Sticks in the dish as base x, base y, tip x, tip y. The first stands behind the stones.\nconst STICKS = [\n  [41, 104, 42.5, 66],\n  [11, 116, 12, 92],\n  [53, 116, 51.5, 97],\n];\n// Stones of the burner as left x, right x, top y at the left, top y at the right, bottom y.\nconst STONES = [\n  [21, 52, 109, 104, 113],\n  [19, 47, 96, 99, 105],\n  [25, 39, 84, 84, 95],\n];\n// The heavy smoke slides down the tops of the two lower stones: stone index, from x, to x.\nconst LEDGES = [\n  [1, 24, 47.5],\n  [0, 52, 22],\n];\n// Curl-noise velocity grid: a node every 2 LEDs.\nconst GX = 33;\nconst GY = 65;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(out, h, s, v) {\n  h -= Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n  return out;\n}\n\nfunction smooth(v) {\n  v = v \u003c 0 ? 0 : v > 1 ? 1 : v;\n  return v * v * (3 - 2 * v);\n}\n\nfunction stoneTop(s, x) {\n  const S = STONES[s];\n  return S[2] + ((S[3] - S[2]) * (x - S[0])) / (S[1] - S[0]);\n}\n\nexport function setup(params) {\n  const lat = new Float32Array(256 * 256);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  params.lat = lat;\n  // Particles: position, velocity, age, what they are doing, where they came from, when, and a depth in the stream.\n  params.x = new Float32Array(MAXP);\n  params.y = new Float32Array(MAXP);\n  params.vx = new Float32Array(MAXP);\n  params.vy = new Float32Array(MAXP);\n  params.age = new Float32Array(MAXP);\n  params.kind = new Int8Array(MAXP).fill(-1);\n  params.src = new Int8Array(MAXP);\n  params.emit = new Float32Array(MAXP);\n  params.dep = new Float32Array(MAXP);\n  params.led = new Int8Array(MAXP);\n  // Each rising particle remembers the one its source let go just before it, so the thread is drawn as a line between them.\n  params.prev = new Int32Array(MAXP).fill(-1);\n  params.last = new Int32Array(5).fill(-1);\n  params.next = 0;\n  params.gvx = new Float32Array(GX * GY);\n  params.gvy = new Float32Array(GX * GY);\n  params.psi = new Float32Array(GX * GY);\n  params.dens = new Float32Array(W * H);\n  params.soft = new Float32Array(W * H);\n  params.tmp = new Float32Array(W * H);\n  params.scene = new Float32Array(W * H * 3);\n  // 1 where a stone or the dish stands in front of the sticks.\n  params.front = new Uint8Array(W * H);\n  params.buf = new Float32Array(W * H * 3);\n  params.glow = new Float32Array(W * H);\n  params.debt = new Float32Array(5);\n  params.sx = new Float32Array(4);\n  params.sy = new Float32Array(4);\n  params.sway = new Float32Array(4);\n  params.col = [0, 0, 0];\n  params.t = 0;\n  params.started = false;\n  params.breath = 9;\n  params.by = 40;\n  params.bdir = 1;\n  params.sticks = 0;\n  params.flare = 0;\n  params.hb = 17;\n  bakeScene(params);\n}\n\nfunction bakeScene(params) {\n  const sc = params.scene;\n  const fr = params.front;\n  const c = params.col;\n  const set = (x, y) => sc.set(c, (y * W + x) * 3);\n  // A dark room, a little lighter up to the left where the lamp is; draw() colours it with the lamp.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) params.glow[y * W + x] = 0.012 + 0.1 * (1 - Math.hypot(x + 10, y - 20) / 140);\n  // The table, dark wood with its grain running across.\n  for (let y = TABLE + 0.5; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const g = 0.5 + 0.5 * Math.sin(x * 0.21 + Math.sin(x * 0.05 + y) * 2 + y * 1.7);\n      hsv(c, 0.07, 0.62, y === TABLE + 0.5 ? 0.24 : 0.13 + 0.04 * g);\n      set(x, y);\n      params.glow[y * W + x] = y === TABLE + 0.5 ? 0.16 - (0.1 * x) / W : 0;\n    }\n  // Stones, glazed a dark celadon, lit on their top edges and on the side towards the lamp.\n  STONES.forEach((S, s) => {\n    for (let x = S[0]; x \u003c= S[1]; x++) {\n      const top = Math.round(stoneTop(s, x));\n      const u = (x - S[0]) / (S[1] - S[0]);\n      for (let y = top; y \u003c= S[4]; y++) {\n        // Rounded corners, and sides that bulge a little at the middle like a river stone.\n        const e = Math.min(y - top, S[4] - y);\n        const inset = (e \u003c 2 ? 2 - e : 0) + 1.2 * Math.abs((2 * (y - top)) / (S[4] - top) - 1) ** 2;\n        if (x \u003c S[0] + inset - 0.3 || x > S[1] - inset + 0.3) continue;\n        const edgeL = x \u003c S[0] + inset + 0.7;\n        const edgeR = x > S[1] - inset - 0.7;\n        // Layers in the stone, a few pits, darker towards the foot and away from the lamp.\n        let v = 0.25 - 0.09 * u + 0.025 * Math.sin(y * 1.1 + s * 2 + x * 0.08) + 0.04 * (hash(x, y) - 0.5) - (0.07 * (y - top)) / (S[4] - top + 1);\n        if (hash(x * 5, y * 3 + s) \u003c 0.05) v -= 0.06;\n        if (y === top) v = 0.46 - 0.12 * u;\n        else if (edgeL || y === top + 1) v += 0.06;\n        else if (edgeR || y === S[4]) v -= 0.06;\n        hsv(c, 0.44, 0.32, v);\n        set(x, y);\n        fr[y * W + x] = 1;\n        // The lamp catches the top edges.\n        params.glow[y * W + x] = y === top ? 0.22 - 0.12 * u : 0;\n      }\n    }\n  });\n  // The hole the heavy smoke comes out of, and the cone sitting on the top stone.\n  for (let x = 31; x \u003c= 33; x++) {\n    hsv(c, 0.44, 0.4, x === 32 ? 0.03 : 0.08);\n    set(x, HOLE_Y - 1);\n    set(x, HOLE_Y);\n  }\n  for (let y = CONE_Y + 1; y \u003c 84; y++) {\n    const half = ((y - CONE_Y) * 3.4) / (83 - CONE_Y);\n    for (let x = Math.round(CONE_X - half); x \u003c= Math.round(CONE_X + half); x++) {\n      hsv(c, 0.03, 0.55, 0.36 - (0.12 * (x - CONE_X + half)) / (2 * half + 1));\n      set(x, y);\n      fr[y * W + x] = 1;\n      params.glow[y * W + x] = 0;\n    }\n  }\n  // The dish, a dark iron glaze with a lit rim, standing on a foot.\n  for (let y = DISH; y \u003c= DISH + 8; y++) {\n    const q = (y - DISH) / 7;\n    const half = y > DISH + 7 ? 13 : 26.5 - 7 * q * q;\n    for (let x = Math.ceil(31.5 - half); x \u003c= Math.floor(31.5 + half); x++) {\n      const u = (x - 31.5 + half) / (2 * half);\n      let v = y === DISH ? 0.55 - 0.2 * u : 0.24 - 0.12 * u - 0.06 * q + 0.03 * hash(x, y);\n      if (y === DISH + 1) v += 0.08;\n      hsv(c, 0.05, y === DISH ? 0.35 : 0.6, v);\n      set(x, y);\n      fr[y * W + x] = 1;\n      params.glow[y * W + x] = y === DISH ? 0.2 - 0.12 * u : 0;\n    }\n  }\n}\n\nfunction spawn(params, kind, x, y, vx, vy, src) {\n  const i = params.next;\n  params.next = (i + 1) % MAXP;\n  params.kind[i] = kind;\n  params.x[i] = x;\n  params.y[i] = y;\n  params.vx[i] = vx;\n  params.vy[i] = vy;\n  params.age[i] = 0;\n  params.src[i] = src;\n  params.emit[i] = params.t;\n  params.dep[i] = Math.random();\n  return i;\n}\n\n// The draught: a stream function of two octaves of noise drifting up with the smoke; its curl\n// gives a velocity that swirls without ever piling smoke up or thinning it out.\nfunction stepField(params) {\n  const lat = params.lat;\n  const t = params.t;\n  const psi = params.psi;\n  for (let j = 0; j \u003c GY; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const x = i * 2;\n      const y = j * 2;\n      psi[j * GX + i] = vn(lat, x / 13 + 0.05 * t, (y + 11 * t) / 13) + 0.4 * vn(lat, x / 5.5 - 0.09 * t + 40, (y + 15 * t) / 5.5 + 40);\n    }\n  const gvx = params.gvx;\n  const gvy = params.gvy;\n  for (let j = 0; j \u003c GY; j++)\n    for (let i = 0; i \u003c GX; i++) {\n      const jm = j > 0 ? j - 1 : j;\n      const jp = j \u003c GY - 1 ? j + 1 : j;\n      const im = i > 0 ? i - 1 : i;\n      const ip = i \u003c GX - 1 ? i + 1 : i;\n      gvx[j * GX + i] = ((psi[jp * GX + i] - psi[jm * GX + i]) / (2 * (jp - jm))) * 190;\n      gvy[j * GX + i] = (-(psi[j * GX + ip] - psi[j * GX + im]) / (2 * (ip - im))) * 190;\n    }\n}\n\nfunction step(params, dts) {\n  const t = (params.t += dts);\n  stepField(params);\n  const sticks = params.sticks;\n  const breeze = params.breeze;\n  // Sources: the cone, then the sticks the knob has lit. Room air leans each thread gently one way and the other.\n  const srcs = 1 + sticks;\n  const SX = params.sx;\n  const SY = params.sy;\n  const sway = params.sway;\n  for (let s = 0; s \u003c srcs; s++) {\n    SX[s] = s === 0 ? CONE_X : STICKS[s - 1][2];\n    SY[s] = s === 0 ? CONE_Y : STICKS[s - 1][3];\n    sway[s] = 2 * Math.sin(t * 0.43 + s * 2) + 1.2 * Math.sin(t * 0.17 + s);\n    params.debt[s] += 50 * dts;\n    while (params.debt[s] >= 1) {\n      params.debt[s] -= 1;\n      // vx keeps how far this bit of smoke will be pushed aside where the thread starts to snake.\n      const i = spawn(params, 0, SX[s] + (Math.random() - 0.5) * 0.15, SY[s] - 1 - Math.random(), 5 * Math.sin(t * 2.7 + s * 1.9), 0, s);\n      params.prev[i] = params.last[s];\n      params.last[s] = i;\n    }\n  }\n  // Heavy smoke out of the hole in the stone.\n  params.debt[4] += 44 * dts;\n  while (params.debt[4] >= 1) {\n    params.debt[4] -= 1;\n    spawn(params, 1, HOLE_X + (Math.random() - 0.5) * 2, HOLE_Y + 0.5, (Math.random() - 0.5) * 0.8, 2, 4);\n  }\n\n  // How far a thread climbs before it breaks up: less in a faster or crosswise draught.\n  // More sticks warm the air more and stir it, so every thread breaks sooner.\n  const hb = (params.hb = 17 * (1.8 - 0.8 * params.speed) - 9 * Math.abs(breeze) - 3.5 * (sticks - 1));\n  const breath = params.breath;\n  const env = breath \u003c 1.6 ? Math.sin((Math.PI * breath) / 1.6) : 0;\n  const gvx = params.gvx;\n  const gvy = params.gvy;\n  const X = params.x;\n  const Y = params.y;\n  for (let i = 0; i \u003c MAXP; i++) {\n    const kind = params.kind[i];\n    if (kind \u003c 0) continue;\n    const age = (params.age[i] += dts);\n    let x = X[i];\n    let y = Y[i];\n    if (kind === 0) {\n      const s = params.src[i];\n      const h = SY[s] - y;\n      const turb = smooth((h - hb) / 18);\n      // Still air carries the thread straight up, slower as it cools.\n      let ux = breeze * 20 * (0.2 + Math.min(1, h / 45)) + sway[s] * Math.min(1, h / 25);\n      let uy = -18 * (0.4 + 0.6 * Math.exp(-h / 50));\n      // A broken-up plume entrains the air round it and widens as it climbs.\n      ux += (x - SX[s]) * 0.12 * turb;\n      // Just below the break the thread starts to snake: each bit of smoke was pushed aside by the moment it left the tip.\n      if (h > hb - 14) ux += params.vx[i] * smooth((h - hb + 14) / 12) * (1 - 0.6 * turb);\n      if (turb > 0 || env > 0) {\n        const gx = Math.max(0, Math.min(GX - 1.001, x / 2));\n        const gy = Math.max(0, Math.min(GY - 1.001, y / 2));\n        const ix = Math.floor(gx);\n        const iy = Math.floor(gy);\n        const fx = gx - ix;\n        const fy = gy - iy;\n        const o = iy * GX + ix;\n        const a = (1 - fx) * (1 - fy);\n        const b = fx * (1 - fy);\n        const c = (1 - fx) * fy;\n        const d = fx * fy;\n        let amp = turb;\n        if (env > 0) {\n          const e = env * Math.exp(-((y - params.by) * (y - params.by)) / 120);\n          ux += params.bdir * 45 * e;\n          amp += 1.6 * e;\n        }\n        ux += amp * (gvx[o] * a + gvx[o + 1] * b + gvx[o + GX] * c + gvx[o + GX + 1] * d);\n        uy += amp * (gvy[o] * a + gvy[o + 1] * b + gvy[o + GX] * c + gvy[o + GX + 1] * d);\n      }\n      x += ux * dts;\n      y += uy * dts;\n      // Past the break the smoke also spreads in small eddies the field is too coarse to hold.\n      if (turb > 0) {\n        const r = turb * 1.4 * Math.sqrt(dts);\n        x += (Math.random() - 0.5) * r;\n        y += (Math.random() - 0.5) * r;\n      }\n      if (y \u003c -3 || x \u003c -3 || x > W + 2 || age > 9) params.kind[i] = -1;\n    } else if (kind === 1) {\n      // Heavy smoke falls slowly and lands on a stone, in the dish or on the table.\n      let vy = params.vy[i] + 22 * dts;\n      if (vy > 9) vy = 9;\n      params.vy[i] = vy;\n      params.vx[i] += (breeze * 9 - params.vx[i]) * dts;\n      x += params.vx[i] * dts;\n      const ny = y + vy * dts;\n      const dep = params.dep[i];\n      let landed = false;\n      for (let l = 0; l \u003c LEDGES.length && !landed; l++) {\n        const L = LEDGES[l];\n        if (x \u003c Math.min(L[1], L[2]) || x > Math.max(L[1], L[2])) continue;\n        const top = stoneTop(L[0], x) - 0.6 - dep * 1.4;\n        if (y \u003c= top + 0.5 && ny >= top) {\n          params.kind[i] = 2;\n          params.led[i] = l;\n          y = top;\n          landed = true;\n        }\n      }\n      if (!landed) {\n        y = ny;\n        const inDish = x > 6 && x \u003c 57;\n        if (inDish && y >= POOL - dep * 3) {\n          params.kind[i] = 3;\n          // Pooled smoke spreads out over the dish from where it lands; vy keeps the way it drifts.\n          params.vy[i] = (Math.random() \u003c 0.45 ? -1 : 1) * (0.8 + 2.2 * Math.random());\n          params.vx[i] = params.vy[i] * 2;\n          y = POOL - dep * 3;\n        } else if (!inDish && y >= TABLE - dep * 1.5) {\n          params.kind[i] = 4;\n          params.vx[i] = (x \u003c 31.5 ? -1 : 1) * (2 + 2 * Math.random());\n          y = TABLE - dep * 1.5;\n        }\n      }\n    } else if (kind === 2) {\n      // Sliding down the top of a stone to its lower end, then over.\n      const L = LEDGES[params.led[i]];\n      const dir = L[2] > L[1] ? 1 : -1;\n      x += dir * (6 + 3 * params.dep[i]) * dts;\n      y = stoneTop(L[0], x) - 0.6 - params.dep[i] * 1.4;\n      if ((x - L[2]) * dir > 0) {\n        params.kind[i] = 1;\n        params.vx[i] = dir * 3.5;\n        params.vy[i] = 0.5;\n      }\n    } else {\n      // Pooled on the dish or the table: spreading out, wandering, thinning.\n      params.vx[i] += ((Math.random() - 0.5) * 9 + breeze * 9 + (kind === 3 ? params.vy[i] - params.vx[i] : -0.3 * params.vx[i])) * dts;\n      x += params.vx[i] * dts;\n      if (kind === 3) {\n        y = POOL - params.dep[i] * 3 - 0.6 * Math.sin(age * 1.3 + params.dep[i] * 9);\n        if (x \u003c 5.5 || x > 57.5) {\n          params.kind[i] = 1;\n          params.vy[i] = 0.5;\n        } else if (age > 20) params.kind[i] = -1;\n      } else if (age > 13 || x \u003c -2 || x > W + 1) params.kind[i] = -1;\n    }\n    X[i] = x;\n    Y[i] = y;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = 0.58 + k[0];\n  params.speed = Math.max(0.1, k[1] / 2);\n  params.sticks = Math.max(1, Math.min(3, Math.round(k[2])));\n  params.breeze = Math.max(-1, Math.min(1, k[3]));\n  if (!params.started) {\n    params.started = true;\n    // Ten seconds of smoke before the first frame, so the thread is up and the dish has its pool.\n    for (let n = 0; n \u003c 100; n++) step(params, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.breath = 0;\n    params.by = 22 + Math.random() * 40;\n    params.bdir = Math.random() \u003c 0.5 ? -1 : 1;\n  }\n  params.breath += dt;\n  params.flare = params.breath \u003c 2 ? Math.sin((Math.PI * params.breath) / 2) : 0;\n  step(params, dt * params.speed);\n}\n\nfunction splat(dens, x, y, w) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  if (ix \u003c 0 || iy \u003c 0 || ix >= W - 1 || iy >= H - 1) return;\n  const fx = x - ix;\n  const fy = y - iy;\n  const o = iy * W + ix;\n  dens[o] += w * (1 - fx) * (1 - fy);\n  dens[o + 1] += w * fx * (1 - fy);\n  dens[o + W] += w * (1 - fx) * fy;\n  dens[o + W + 1] += w * fx * fy;\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  buf.set(params.scene);\n  const fr = params.front;\n  const c = params.col;\n  // The lamp: its colour on the smoke, and a paler wash of it on the room and the lit edges.\n  const light = hsv([0, 0, 0], params.hue, 0.5, 0.95);\n  const room = hsv([0, 0, 0], params.hue, 0.45, 0.95);\n  const glow = params.glow;\n  for (let p = 0; p \u003c W * H; p++) {\n    const g = glow[p];\n    if (g === 0) continue;\n    buf[p * 3] += room[0] * g;\n    buf[p * 3 + 1] += room[1] * g;\n    buf[p * 3 + 2] += room[2] * g;\n  }\n  // Sticks behind the stones and the dish: bamboo at the foot, the dark coated length, and grey ash over the ember.\n  const embers = [[CONE_X, CONE_Y, 0]];\n  for (let s = 0; s \u003c params.sticks; s++) {\n    const [bx, by, tx, ty] = STICKS[s];\n    for (let y = ty; y \u003c= by; y++) {\n      const x = Math.round(bx + ((tx - bx) * (by - y)) / (by - ty));\n      if (fr[y * W + x]) continue;\n      if (y - ty \u003c 2) hsv(c, 0.08, 0.06, 0.55 - 0.1 * (y - ty));\n      else if (by - y \u003c 9) hsv(c, 0.11, 0.45, 0.5);\n      else hsv(c, 0.02, 0.62, 0.36);\n      buf.set(c, (y * W + x) * 3);\n    }\n    embers.push([tx, ty + 2, s + 1]);\n  }\n\n  // Smoke goes into two layers: the threads as they are, and the broken-up and pooled smoke, which is blurred so it reads as haze, not grains.\n  const dens = params.dens;\n  const soft = params.soft;\n  dens.fill(0);\n  soft.fill(0);\n  const hb = params.hb;\n  // The tip burns at its own pace, so in a slow draught the same smoke crowds into less air and looks thicker.\n  const thick = Math.pow(params.speed, -0.35);\n  for (let i = 0; i \u003c MAXP; i++) {\n    const kind = params.kind[i];\n    if (kind \u003c 0) continue;\n    const age = params.age[i];\n    const x = params.x[i];\n    const y = params.y[i];\n    if (kind === 0) {\n      // Rising smoke thins as it cools. A thread is drawn as a line back to the smoke let go just before it, so a stretched line spreads the same smoke thinner.\n      const s = params.src[i];\n      const w = 0.75 * thick * Math.exp(-age / 9);\n      const ws = w * 0.85 * smooth((params.sy[s] - y - hb) / 18);\n      const wc = w - ws;\n      const both = ws > 0.01 * w && wc > 0.16 * w;\n      const into = wc > ws ? dens : soft;\n      const j = params.prev[i];\n      if (j >= 0 && params.kind[j] === 0 && params.src[j] === s && params.emit[j] \u003c= params.emit[i]) {\n        const dx = params.x[j] - x;\n        const dy = params.y[j] - y;\n        const d = Math.abs(dx) + Math.abs(dy);\n        if (d \u003c 9) {\n          const n = Math.ceil(d / 0.75);\n          for (let k = 0; k \u003c n; k++) {\n            if (both) {\n              splat(dens, x + (dx * k) / n, y + (dy * k) / n, wc / n);\n              splat(soft, x + (dx * k) / n, y + (dy * k) / n, ws / n);\n            } else splat(into, x + (dx * k) / n, y + (dy * k) / n, w / n);\n          }\n          continue;\n        }\n      }\n      splat(into, x, y, w);\n      continue;\n    }\n    // The heavy smoke stays milky until it has lain a while.\n    if (kind === 3 || kind === 4) splat(soft, x, y, 0.35 * thick * Math.min(1, ((kind === 3 ? 20 : 13) - age) / 6));\n    else {\n      splat(dens, x, y, 0.23 * thick);\n      splat(soft, x, y, 0.23 * thick);\n    }\n  }\n  // A 3 x 3 tent blur of the soft layer, across then down.\n  const tmp = params.tmp;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      tmp[p] = 0.5 * soft[p] + 0.25 * ((x > 0 ? soft[p - 1] : 0) + (x \u003c W - 1 ? soft[p + 1] : 0));\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      dens[p] += 0.5 * tmp[p] + 0.25 * ((y > 0 ? tmp[p - W] : 0) + (y \u003c H - 1 ? tmp[p + W] : 0));\n    }\n\n  for (let p = 0; p \u003c W * H; p++) {\n    const d = dens[p];\n    if (d \u003c 0.004) continue;\n    const s = 1 - Math.exp(-d * 2.2);\n    // Thin smoke takes the lamp's colour; where it is thick it scatters more of everything and goes whiter.\n    const wv = s * s * 0.3;\n    const o = p * 3;\n    buf[o] += (light[0] + (245 - light[0]) * wv - buf[o]) * s;\n    buf[o + 1] += (light[1] + (245 - light[1]) * wv - buf[o + 1]) * s;\n    buf[o + 2] += (light[2] + (245 - light[2]) * wv - buf[o + 2]) * s;\n  }\n\n  // Embers breathe, and flare when breathed on; their glow warms the smoke right over them.\n  for (const [ex, ey, s] of embers) {\n    const heat = (0.8 + 0.12 * Math.sin(time * 1.7 + s * 2.3) + 0.08 * Math.sin(time * 4.1 + s)) * (1 + 0.6 * params.flare);\n    const cx = Math.round(ex);\n    const cy = Math.round(ey);\n    for (let dy = -3; dy \u003c= 3; dy++)\n      for (let dx = -3; dx \u003c= 3; dx++) {\n        const x = cx + dx;\n        const y = cy + dy;\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const g = heat * Math.exp(-(dx * dx + dy * dy) / 2.2) * (dx === 0 && dy === 0 ? 1 : 0.5);\n        const o = (y * W + x) * 3;\n        buf[o] += 255 * g;\n        buf[o + 1] += 105 * g;\n        buf[o + 2] += 30 * g;\n      }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Sticks=1..3, Breeze=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the lamp that lights the smoke and the room, starting from a cool grey-blue; thick smoke goes whiter whatever the colour."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the air moves: at 2 the thread leaves the tip at 18 rows a second and breaks up about 17 rows above it; at 0.2 the smoke drifts up ten times slower and holds together for 29 rows; at 3 it breaks up after 10."},{"name":"Sticks","min":1,"max":3,"about":"One to three sticks of incense standing in the dish beside the burner, each with a glowing tip and its own thread; each stick past the first warms and stirs the air so every thread breaks up 3.5 rows sooner."},{"name":"Breeze","min":-1,"max":1,"about":"A cross draught: at 0 the smoke rises straight; turned either way it leans that way, breaks up as much as 9 rows sooner, bends the falling smoke and drags the pool along the dish."}],"start":[0,2,1,0.06],"measures":{"motion":0.2464,"detail":0.0379,"edges":0.3304,"complexity":1.0761,"coverage":0.3311,"colour":0.0945,"drift":0.0442},"knobResponse":[0.0522,0.0616,0.0686,0.0518]},{"slug":"ivy","title":"Ivy","family":"growth","round":15,"note":"돌담을 타고 담쟁이가 꼭대기까지 올라요. 바람이 잎을 뒤집어 옅은 뒷면이 물결치고, 가을이면 잎이 노랑에서 진홍으로 물들어 떨어져요. 겨울에는 맨 줄기에 검푸른 열매가 남아요.","idea":"Boston ivy climbs a stone wall from the ground to the top of the panel, branching and reaching out tendrils; every year its leaves turn from green through yellow to red, fall down the wall and come back in spring.","buttons":"K1 tap cuts the oldest stem at the ground: its leaves go brown and drop, the dead wood fades in 5 seconds, and a new shoot starts climbing in its place, or in spring if it is autumn or winter.","code":"// ===== Patternflow pattern =====\n// Title:   Ivy\n// Family:  growth\n// Idea:    Boston ivy climbs a stone wall from the ground to the top of the panel, branching and reaching out tendrils; every year its leaves turn from green through yellow to red, fall down the wall and come back in spring.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 13\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Vines=2..6, Wind=-1..1\n//\n// Knob 1: Hue. The leaf colour, starting from green; autumn always turns the leaves a third of the way back round the colour wheel, so green goes through yellow to red.\n// Knob 2: Speed. How fast the year turns: at 2 a year is 60 seconds and a new stem climbs the 120 rows of wall in about 16; at 3 a year is 40 seconds, at 0.2 ten minutes. The gusts come and go faster with it.\n// Knob 3: Vines. How many stems come out of the ground, 2 to 6; turning it up starts new shoots at the foot of the wall, turning it down cuts stems so they wither.\n// Knob 4: Wind. Near 0 a breath of air now and then turns a few leaves silver side up; turned either way the gusts come more often from that side, sweep the wall faster and, past halfway, tear leaves off and blow them away.\n// Buttons: K1 tap cuts the oldest stem at the ground: its leaves go brown and drop, the dead wood fades in 5 seconds, and a new shoot starts climbing in its place, or in spring if it is autumn or winter.\n\nconst W = 64;\nconst H = 128;\n// The wall is rows 0 to 119, thirty courses of stone four LEDs high; the bed is the eight rows under it.\nconst GROUND = 120;\nconst GR = H - GROUND;\n// One year in world seconds. Speed 2 runs the world at twice that, so a year is 60 seconds.\nconst YEAR = 120;\n// Shoots grow until GROW_END of the year, leaves start to turn at TURN and are all down by BARE.\nconst GROW_END = 0.55;\nconst TURN = 0.56;\nconst BARE = 0.86;\nconst MAXS = 500;\nconst MAXL = 1800;\nconst MAXF = 260;\nconst MAXB = 90;\nconst MAXR = 6;\n// A coarse grid of 4 x 4 cells counts stems and leaves, so new growth heads for bare wall.\nconst GW = 16;\nconst GH = 30;\n// The first update grows the vine for this long, so the panel opens in its third spring with the wall covered.\nconst PRE = YEAR * 2.22;\n\n// Leaf sprites as dx, dy pairs: a bud, a small leaf, a half-grown one, a full one. shade() lights them from the upper left.\nconst LEAF = [\n  [0, 0],\n  [0, -1, -1, 0, 0, 0, 1, 0, 0, 1],\n  [0, -1, 1, -1, -1, 0, 0, 0, 1, 0, 2, 0, -1, 1, 0, 1, 1, 1, 2, 1, 0, 2, 1, 2],\n  [-1, -2, 0, -2, 1, -2, -2, -1, -1, -1, 0, -1, 1, -1, 2, -1, -2, 0, -1, 0, 0, 0, 1, 0, 2, 0, -1, 1, 0, 1, 1, 1, 0, 2],\n];\n// A falling leaf seen face on, tipped one way, edge on, tipped the other way.\nconst FALLS = [\n  [-1, 0, 0, 0, 1, 0, 0, -1],\n  [-1, -1, 0, 0, 1, 1],\n  [0, -1, 0, 0],\n  [1, -1, 0, 0, -1, 1],\n];\n// A tendril curling off the stem to the right; the left mirrors it.\nconst CURL = [[1, -1], [2, -1], [3, -2], [3, -3], [2, -3]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// From hue a towards hue b the short way round.\nfunction hueTo(a, b, t) {\n  return a + (b + Math.round(a - b) - a) * t;\n}\n\nfunction hsv(out, h, s, v) {\n  h = (h - Math.floor(h)) * 6;\n  for (let i = 0; i \u003c 3; i++) {\n    const k = (5 - 2 * i + h) % 6;\n    out[i] = 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n  return out;\n}\n\nexport function setup(params) {\n  Object.assign(params, { shoots: [], leaves: [], falls: [], berries: [], queue: [], gusts: [], roots: [], pal: [] });\n  for (let r = 0; r \u003c MAXR; r++) params.roots.push({ use: false, wait: false, x: 32, born: 0, dead: -1 });\n  // Fallen leaves in the bed: colour, the year they fell and how much is left of them.\n  params.gC = new Float32Array(GR * W * 3);\n  params.gY = new Int16Array(GR * W).fill(-1);\n  params.gA = new Float32Array(GR * W);\n  params.occ = new Float32Array(GW * GH);\n  params.wall = new Float32Array(W * H * 3);\n  params.buf = new Float32Array(W * H * 3);\n  for (let k = 0; k \u003c= 16; k++) params.pal.push([0, 0, 0]);\n  Object.assign(params, { col: [0, 0, 0], ts: 0, rt: 0, p: 0, year: 0, started: false, nextGust: 0.6, windDir: 1, hue: 0.29, wind: 0.06, want: 2 });\n  bakeWall(params);\n}\n\nfunction bakeWall(P) {\n  const c = P.col;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= GROUND) {\n        // A bed of dark earth with a few pale pebbles; the foot of the wall casts a line of shadow.\n        const n = hash(x * 3 + 1, y * 7 + 2);\n        if (n \u003c 0.05 && y > GROUND) hsv(c, 0.08, 0.12, 0.27 + 0.08 * hash(x, y));\n        else hsv(c, 0.065, 0.5, (y === GROUND ? 0.08 : 0.12) + 0.05 * n);\n      } else {\n        const course = y >> 2;\n        const row = y & 3;\n        // Stones five to ten LEDs long, each course laid from its own offset.\n        let x0 = -Math.floor(hash(course, 77) * 9);\n        let len = 0;\n        let id = 0;\n        for (;;) {\n          len = 5 + Math.floor(hash(course * 31 + id, 5) * 6);\n          if (x \u003c x0 + len) break;\n          x0 += len;\n          id++;\n        }\n        const col = x - x0;\n        if (row === 3 || col === len - 1) hsv(c, 0.6, 0.12, 0.065);\n        else {\n          const h2 = hash(course * 17 + id, 23);\n          let v = 0.135 + 0.05 * hash(course * 131 + id, 9) + 0.012 * (hash(x, y) - 0.5);\n          v += row === 0 ? 0.018 : row === 2 ? -0.012 : 0;\n          if (col === 0) v += 0.01;\n          // Lighter towards the top, where the sky reaches the wall.\n          hsv(c, 0.58 + 0.07 * (h2 - 0.5), 0.14 + 0.1 * h2, v * (1.12 - (0.24 * y) / GROUND));\n        }\n      }\n      P.wall.set(c, (y * W + x) * 3);\n    }\n}\n\nfunction crowd(P, x, y) {\n  if (x \u003c 1 || x > W - 2 || y \u003c 1 || y > GROUND - 2) return 14;\n  const cx = Math.floor(x / 4);\n  const cy = Math.floor(y / 4);\n  const o = P.occ;\n  const i = cy * GW + cx;\n  return o[i] + 0.3 * ((cx > 0 ? o[i - 1] : 0) + (cx \u003c GW - 1 ? o[i + 1] : 0) + (cy > 0 ? o[i - GW] : 0) + (cy \u003c GH - 1 ? o[i + GW] : 0));\n}\n\nfunction mark(P, x, y, amt) {\n  const cx = Math.floor(x / 4);\n  const cy = Math.floor(y / 4);\n  if (cx >= 0 && cx \u003c GW && cy >= 0 && cy \u003c GH) P.occ[cy * GW + cx] += amt;\n}\n\nfunction newShoot(P, root, gen, x, y, ang, bias, budget) {\n  if (P.shoots.length >= MAXS) return null;\n  const s = { root, gen, x: [x], y: [y], t: [P.ts], node0: 0, budget, grow: true, top: false, ang, bias, acc: 0, rand: Math.random(), side: Math.random() \u003c 0.5 ? -1 : 1 };\n  P.shoots.push(s);\n  return s;\n}\n\nfunction addLeaf(P, s, x, y) {\n  if (x \u003c 0.5 || x > W - 1.5 || y \u003c 1 || y > GROUND - 3 || P.leaves.length >= MAXL) return;\n  // Whole branches turn together, so autumn comes in patches.\n  const turn = TURN + 0.07 * s.rand + 0.06 * Math.random();\n  const size = s.gen === 0 ? 3 : s.gen === 1 && Math.random() \u003c 0.6 ? 3 : 2;\n  P.leaves.push({ x, y, t: P.ts, root: s.root, size, gone: -1, r1: Math.random(), r2: Math.random(), r3: Math.random(), sus: Math.random(), flip: 0, turn, drop: turn + 0.06 + 0.09 * Math.random() });\n  mark(P, x, y, 0.8);\n}\n\nfunction branch(P, s, x, y, a, gen, budget) {\n  const cA = crowd(P, x + Math.sin(a + 1.1) * 5, y - Math.cos(a + 1.1) * 5);\n  const cB = crowd(P, x + Math.sin(a - 1.1) * 5, y - Math.cos(a - 1.1) * 5);\n  if (Math.min(cA, cB) > 7) return;\n  const side = cA \u003c cB ? 1 : -1;\n  const c = newShoot(P, s.root, gen + 1, x, y, a + side * (0.9 + Math.random() * 0.4), side * (0.35 + Math.random() * 0.35), budget);\n  if (c) c.node0 = 1;\n}\n\nfunction addPoint(P, s) {\n  const n = s.x.length;\n  const x = s.x[n - 1];\n  const y = s.y[n - 1];\n  const gen = s.gen;\n  if (s.budget \u003c= 0) {\n    s.grow = false;\n    return;\n  }\n  let a = s.ang + (Math.random() - 0.5) * 0.55;\n  // A main stem keeps to its own lane up the wall; side shoots set off sideways and curve up as they go.\n  const lane = gen === 0 && !s.top ? clamp((P.roots[s.root].x - x) * 0.04, -0.5, 0.5) : 0;\n  a += (s.bias + lane - a) * (gen === 0 ? 0.15 : 0.1);\n  if (gen > 0 && !s.top) s.bias *= 0.98;\n  // Of three headings, the one into the barest wall, with a little chance.\n  let best = a;\n  let bestScore = 1e9;\n  for (let c = -1; c \u003c= 1; c++) {\n    const ca = a + c * 0.45;\n    const score = crowd(P, x + Math.sin(ca) * 4, y - Math.cos(ca) * 4) * 0.3 + Math.abs(c) * 0.3 + Math.random() * 0.35;\n    if (score \u003c bestScore) [bestScore, best] = [score, ca];\n  }\n  a = clamp(best, -2, 2);\n  if (y - Math.cos(a) \u003c 1.5 && !s.top) {\n    // At the top of the wall a shoot turns and runs along the coping for a little way.\n    s.top = true;\n    const side = (x \u003c W / 2) === Math.random() \u003c 0.7 ? 1 : -1;\n    s.bias = side * 1.5;\n    a = side * 1.3;\n    s.budget = Math.min(s.budget, 8 + Math.random() * 12);\n  }\n  const nx = x + Math.sin(a);\n  const ny = y - Math.cos(a);\n  if (ny \u003c 0.5 || nx \u003c 0.5 || nx > W - 1.5 || ny > GROUND - 1.5) {\n    s.grow = false;\n    return;\n  }\n  s.ang = a;\n  s.budget--;\n  s.x.push(nx);\n  s.y.push(ny);\n  s.t.push(P.ts);\n  mark(P, nx, ny, 1);\n  if ((s.node0 + n) % 3 === 0) {\n    s.side = -s.side;\n    addLeaf(P, s, nx - Math.cos(a) * s.side * 2.2, ny - Math.sin(a) * s.side * 2.2 - 0.7);\n  }\n  // Low on the wall a main stem is bushier.\n  if (gen \u003c 2 && Math.random() \u003c (gen === 0 ? (ny > 70 ? 0.12 : 0.07) : 0.035)) branch(P, s, nx, ny, a, gen, gen === 0 ? 18 + Math.random() * 34 : 6 + Math.random() * 12);\n  if (gen > 0 && Math.random() \u003c 0.025 && P.berries.length \u003c MAXB) P.berries.push({ x: nx, y: ny, root: s.root, r: Math.random(), t: P.ts });\n}\n\n// Where a new stem comes out of the ground: as far from the others as the bed allows.\nfunction freeSpot(P, r) {\n  let best = 32;\n  let bestD = -1;\n  for (let x = 5; x \u003c= 58; x++) {\n    const d = Math.min(99, ...P.roots.map((q, i) => (i !== r && q.use ? Math.abs(q.x - x) : 99))) + Math.random() * 2;\n    if (d > bestD) [bestD, best] = [d, x];\n  }\n  return best;\n}\n\nfunction cut(P, r) {\n  const R = P.roots[r];\n  if (R.use && !R.wait && R.dead \u003c 0) R.dead = P.rt;\n}\n\n// Cut the oldest living stem, if it has lived at least this many years.\nfunction cutOldest(P, years) {\n  let old = -1;\n  P.roots.forEach((R, r) => {\n    if (R.use && !R.wait && R.dead \u003c 0 && P.year - Math.floor(R.born / YEAR) >= years && (old \u003c 0 || R.born \u003c P.roots[old].born)) old = r;\n  });\n  if (old >= 0) cut(P, old);\n}\n\n// The dead wood has faded: clear it away and let a new stem come up there, if the Vines knob still wants one.\nfunction freeRoot(P, r) {\n  const R = P.roots[r];\n  P.shoots = P.shoots.filter((s) => s.root !== r);\n  P.leaves = P.leaves.filter((l) => l.root !== r);\n  P.berries = P.berries.filter((b) => b.root !== r);\n  P.queue = P.queue.filter((q) => q.s.root !== r);\n  R.dead = -1;\n  if (r \u003c P.want) {\n    R.wait = true;\n    R.x = clamp(R.x + (Math.random() - 0.5) * 8, 5, 58);\n  } else R.use = false;\n  P.occ.fill(0);\n  for (const s of P.shoots) for (let i = 0; i \u003c s.x.length; i++) mark(P, s.x[i], s.y[i], 1);\n  for (const l of P.leaves) mark(P, l.x, l.y, 0.8);\n}\n\n// Each spring the old wood puts out new side shoots, spread through the growing season.\nfunction springSchedule(P) {\n  P.roots.forEach((R, r) => {\n    if (!R.use || R.wait || R.dead >= 0) return;\n    const cand = P.shoots.filter((s) => s.root === r && s.gen \u003c 2 && s.x.length > 4);\n    if (!cand.length) return;\n    const count = 8 + Math.floor(Math.random() * 5);\n    for (let k = 0; k \u003c count && P.queue.length \u003c 64; k++) {\n      const s = cand[Math.floor(Math.random() * cand.length)];\n      P.queue.push({ s, i: 1 + Math.floor(Math.random() * (s.x.length - 2)), at: P.year * YEAR + YEAR * (0.06 + 0.34 * Math.random()) });\n    }\n  });\n}\n\n// The world clock: seasons, growth and the year's events, in world seconds.\nfunction stepWorld(P, dts, pre) {\n  const prevP = P.p;\n  const ts = (P.ts += dts);\n  const Y = Math.floor(ts / YEAR);\n  const p = (P.p = ts / YEAR - Y);\n  if (Y !== P.year) {\n    P.year = Y;\n    springSchedule(P);\n  }\n  // In the pre-run last autumn's leaves land in the bed, so the panel opens with them rotting there.\n  if (pre && prevP \u003c BARE && p >= BARE)\n    for (const l of P.leaves) if (Math.random() \u003c 0.5) stamp(P, l.x + (Math.random() - 0.5) * 14, GROUND + 1 + Math.random() * (GR - 1.5), leafColour(P, l, 1, l.drop));\n  // Early in winter a stem three years old is cut back, and a new one comes up in spring.\n  if (!pre && prevP \u003c BARE + 0.03 && p >= BARE + 0.03) cutOldest(P, 3);\n  P.roots.forEach((R, r) => {\n    if (R.use && R.wait && R.dead \u003c 0 && p \u003c 0.42) {\n      R.wait = false;\n      R.born = ts;\n      newShoot(P, r, 0, R.x + (Math.random() - 0.5) * 2, GROUND - 1.6, (Math.random() - 0.5) * 0.4, 0, 9999);\n    }\n  });\n\n  const f = p \u003c 0.45 ? 1 : p \u003c GROW_END ? (GROW_END - p) / (GROW_END - 0.45) : 0;\n  if (f \u003c= 0) return;\n  P.queue = P.queue.filter((q) => {\n    if (ts \u003c q.at) return true;\n    const s = q.s;\n    const i = Math.min(q.i, s.x.length - 1);\n    if (P.roots[s.root].dead \u003c 0) branch(P, s, s.x[i], s.y[i], 0, Math.min(1, s.gen), 12 + Math.random() * 26);\n    return false;\n  });\n  const shoots = P.shoots;\n  for (let k = 0; k \u003c shoots.length; k++) {\n    const s = shoots[k];\n    if (!s.grow || P.roots[s.root].dead >= 0) continue;\n    s.acc += (s.gen === 0 ? 4 : 3) * f * dts;\n    while (s.acc >= 1 && s.grow) {\n      s.acc -= 1;\n      addPoint(P, s);\n    }\n  }\n}\n\nfunction openAt(P, l, Y) {\n  if (l.t >= Y * YEAR) return l.t + 1.5;\n  // Old wood comes into leaf low down first.\n  return Y * YEAR + YEAR * (0.015 + 0.06 * l.r1 + 0.04 * (1 - l.y / H));\n}\n\n// A leaf's colour at year phase p: young lime, deep green, the autumn turn, withering, and the pale underside a gust shows.\nfunction leafColour(P, l, m, p) {\n  const lift = 0.86 + 0.28 * l.r1;\n  let h = P.hue - 0.055 + 0.065 * m + (l.r2 - 0.5) * 0.04;\n  let s = 0.7 + 0.18 * m;\n  let v = (0.82 - 0.28 * m) * lift;\n  const c = clamp((p - l.turn) / 0.09, 0, 1);\n  if (c > 0) {\n    h -= (0.31 + (l.r3 > 0.7 ? 0.035 : 0)) * c;\n    s += (0.93 - s) * c;\n    v = (0.54 + 0.36 * Math.sin(Math.PI * c) + 0.1 * c) * lift;\n  }\n  const dead = P.roots[l.root].dead;\n  if (dead >= 0) {\n    const w = clamp((P.rt - dead) / 1.2, 0, 1);\n    h = hueTo(h, 0.075, w);\n    s += (0.6 - s) * w;\n    v += (0.34 - v) * w;\n  }\n  const f = l.flip;\n  if (f > 0) {\n    h -= 0.02 * f;\n    s *= 1 - 0.62 * f;\n    v += (0.95 - v) * 0.55 * f;\n  }\n  return hsv(P.col, h, s, Math.min(1, v));\n}\n\nfunction stamp(P, x, y, c) {\n  const cx = Math.round(x);\n  const cy = Math.floor(y) - GROUND;\n  const sp = FALLS[0];\n  for (let k = 0; k \u003c sp.length; k += 2) {\n    const px = cx + sp[k];\n    const py = cy + sp[k + 1];\n    if (px \u003c 0 || px >= W || py \u003c 0 || py >= GR) continue;\n    const g = py * W + px;\n    for (let j = 0; j \u003c 3; j++) P.gC[g * 3 + j] = c[j] * 0.8 * shade(sp[k], sp[k + 1]);\n    P.gY[g] = P.year;\n    P.gA[g] = 1;\n  }\n}\n\nfunction dropLeaf(P, l, fall) {\n  l.gone = P.year;\n  if (!fall || P.falls.length >= MAXF) return;\n  const flip = l.flip;\n  l.flip = 0;\n  const c = leafColour(P, l, clamp((P.ts - openAt(P, l, P.year)) / (YEAR * 0.1), 0, 1), P.p);\n  l.flip = flip;\n  const s = Math.random() \u003c 0.5 ? -1 : 1;\n  P.falls.push({ x: l.x, y: l.y, vy: 1 + Math.random() * 2, ph: Math.random() * 6.283, spin: s * (3 + Math.random() * 4), term: 8 + Math.random() * 7, land: GROUND + 1 + Math.random() * (GR - 1.5), c: c.slice() });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = 0.29 + k[0];\n  const speed = clamp(k[1], 0.05, 3);\n  const n = clamp(Math.round(k[2]), 2, MAXR);\n  P.wind = clamp(k[3], -1, 1);\n  if (!P.started) {\n    P.started = true;\n    P.want = n;\n    for (let r = 0; r \u003c n; r++) Object.assign(P.roots[r], { use: true, wait: r \u003c n - 1, x: clamp(((r + 0.5) * W) / n + (Math.random() - 0.5) * 6, 5, 58) });\n    // The youngest stem comes up in the third spring, so the panel opens with it climbing.\n    const late = P.roots[n - 1];\n    while (P.ts \u003c PRE) {\n      if (P.ts >= YEAR * 2.1 && !late.born) late.wait = true;\n      stepWorld(P, 0.1, true);\n    }\n  }\n  P.rt += dt;\n  // Follow the Vines knob: new stems where there are too few, cut ones where there are too many.\n  P.want = n;\n  P.roots.forEach((R, r) => {\n    if (r \u003c n && !R.use) Object.assign(R, { use: true, dead: -1, wait: true, x: freeSpot(P, r) });\n    else if (r >= n && R.use && R.dead \u003c 0) {\n      if (R.wait) R.use = R.wait = false;\n      else cut(P, r);\n    }\n  });\n  if (input.btnPressed && input.btnPressed[0]) cutOldest(P, -9);\n  stepWorld(P, dt * speed, false);\n  P.roots.forEach((R, r) => {\n    if (R.dead >= 0 && P.rt - R.dead > 5.2) freeRoot(P, r);\n  });\n  stepGusts(P, dt, speed / 2);\n  stepLeaves(P, dt);\n  stepFalling(P, dt);\n  // Last year's leaves rot away in the bed through the spring.\n  for (let g = 0; g \u003c GR * W; g++) {\n    if (P.gY[g] \u003c 0 || P.gY[g] >= P.year) continue;\n    P.gA[g] = 1 - clamp((P.p - 0.03 - 0.3 * hash(g, 3)) / 0.012, 0, 1);\n    if (P.gA[g] \u003c= 0) P.gY[g] = -1;\n  }\n}\n\n// Gusts run in the panel's own time, but a faster world brings them more often and sends them across quicker.\nfunction stepGusts(P, dt, quick) {\n  const aw = Math.abs(P.wind);\n  P.nextGust -= dt;\n  if (P.nextGust \u003c= 0) {\n    P.nextGust = ((3.2 - 2.4 * aw) * (0.6 + 0.8 * Math.random())) / quick;\n    if (P.gusts.length \u003c 6) {\n      const dir = aw > 0.12 ? Math.sign(P.wind) : Math.random() \u003c 0.5 ? -1 : 1;\n      const w = 5 + 7 * aw + 3 * Math.random();\n      P.gusts.push({ dir, w, s: Math.min(1, 0.5 + 0.5 * aw + 0.15 * Math.random()), v: (26 + 40 * aw + 10 * Math.random()) * quick, x: dir > 0 ? -2 * w - 8 : W + 2 * w + 8, tilt: (Math.random() - 0.5) * 0.5, seed: Math.random() * 100, row: new Float32Array(H) });\n      P.windDir = dir;\n    }\n  }\n  P.gusts = P.gusts.filter((g) => {\n    g.x += g.dir * g.v * dt;\n    // The front of a gust is a slanted, wavy line across the wall.\n    for (let y = 0; y \u003c H; y++) g.row[y] = g.x + g.tilt * (y - 64) + 4 * Math.sin(y * 0.06 + g.seed);\n    return g.x > -2 * g.w - 50 && g.x \u003c W + 2 * g.w + 50;\n  });\n}\n\n// How hard the gusts press on a point, signed by their direction.\nfunction gustAt(P, x, y) {\n  let push = 0;\n  const yi = clamp(Math.round(y), 0, H - 1);\n  for (const g of P.gusts) {\n    const d = (x - g.row[yi]) / g.w;\n    if (d > -1 && d \u003c 1) push += g.dir * g.s * (1 - d * d);\n  }\n  return push;\n}\n\nfunction stepLeaves(P, dt) {\n  const Y = P.year;\n  const p = P.p;\n  const aw = Math.abs(P.wind);\n  for (const l of P.leaves) {\n    if (l.gone === Y) continue;\n    const dead = P.roots[l.root].dead;\n    const open = P.ts > openAt(P, l, Y);\n    if (dead >= 0) {\n      if (P.rt - dead > 0.8 + 2.6 * l.r3) dropLeaf(P, l, open && p \u003c l.drop);\n      continue;\n    }\n    if (p >= l.drop) {\n      dropLeaf(P, l, p - l.drop \u003c 0.03);\n      continue;\n    }\n    if (!open) continue;\n    // A gust lifts the leaves it passes over and shows their pale undersides; stiffer leaves need a stronger gust.\n    let t = 0;\n    const yi = clamp(Math.round(l.y), 0, H - 1);\n    for (const g of P.gusts) {\n      const d = (l.x - g.row[yi]) / g.w;\n      if (d > -1 && d \u003c 1) t = Math.max(t, (1 - d * d) * clamp((g.s - l.sus * 0.8) * 3, 0, 1));\n    }\n    l.flip += (t - l.flip) * Math.min(1, dt * (t > l.flip ? 12 : 3));\n    if (aw > 0.45 && l.flip > 0.55 && Math.random() \u003c dt * (aw - 0.45) * 0.12 * (1 + 30 * clamp((p - l.turn) / 0.09, 0, 1))) dropLeaf(P, l, true);\n  }\n}\n\nfunction stepFalling(P, dt) {\n  P.falls = P.falls.filter((f) => {\n    f.ph += f.spin * dt;\n    f.vy += (f.term - f.vy) * Math.min(1, dt * 1.5);\n    f.x += (P.wind * 18 + gustAt(P, f.x, f.y) * 22 + Math.sin(f.ph) * 6) * dt;\n    f.y += f.vy * (0.65 + 0.35 * Math.abs(Math.cos(f.ph))) * dt;\n    if (f.x \u003c -3 || f.x > W + 2) return false;\n    if (f.y \u003c f.land) return true;\n    stamp(P, f.x, f.land, f.c);\n    return false;\n  });\n}\n\n// Lighter up and to the left, with a darker midrib down the middle.\nfunction shade(dx, dy) {\n  return 1 - 0.06 * dx - 0.08 * dy - (dx === 0 && dy > -2 ? 0.06 : 0);\n}\n\nfunction put(buf, x, y, c, sh, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] += (c[0] * sh - buf[o]) * a;\n  buf[o + 1] += (c[1] * sh - buf[o + 1]) * a;\n  buf[o + 2] += (c[2] * sh - buf[o + 2]) * a;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  buf.set(P.wall);\n  const ts = P.ts;\n  const Y = P.year;\n  const p = P.p;\n  const hb = P.hue;\n  const col = P.col;\n\n  // Fallen leaves in the bed, browner after the turn of the year.\n  const brown = [70, 38, 18];\n  for (let g = 0; g \u003c GR * W; g++) {\n    if (P.gY[g] \u003c 0) continue;\n    const age = P.gY[g] \u003c Y ? 0.6 : 0;\n    const o = (GROUND * W + g) * 3;\n    for (let k = 0; k \u003c 3; k++) buf[o + k] += (P.gC[g * 3 + k] + (brown[k] - P.gC[g * 3 + k]) * age - buf[o + k]) * P.gA[g];\n  }\n\n  // Stems: green and supple when new, brown wood after a third of a year, thicker low on the old stems.\n  for (let k = 0; k \u003c= 16; k++) hsv(P.pal[k], hueTo(hb - 0.05, 0.04, k / 16), 0.6 - (0.1 * k) / 16, 0.62 - (0.28 * k) / 16);\n  const grey = [72, 64, 58];\n  const c = [0, 0, 0];\n  for (const s of P.shoots) {\n    const dead = P.roots[s.root].dead;\n    const e = dead >= 0 ? P.rt - dead : 0;\n    const fade = clamp(e / 2.5, 0, 1);\n    const alpha = 1 - clamp((e - 2.5) / 2.5, 0, 1);\n    const len = s.x.length;\n    for (let i = 0; i \u003c len; i++) {\n      const x = Math.round(s.x[i]);\n      const y = Math.round(s.y[i]);\n      const age = ts - s.t[i];\n      const pc = P.pal[Math.round(clamp(age / (YEAR * 0.33), 0, 1) * 16)];\n      for (let k = 0; k \u003c 3; k++) c[k] = pc[k] + (grey[k] - pc[k]) * fade;\n      put(buf, x, y, c, 1, alpha);\n      if (s.gen === 0 && age > YEAR * 0.5) {\n        put(buf, x + 1, y, c, 0.7, alpha);\n        if (age > YEAR * 1.1 && y > GROUND - 45) put(buf, x - 1, y, c, 0.85, alpha);\n      }\n      // Young tendrils reach off the stem between the leaves and fade into it as the wood hardens.\n      if (s.gen \u003c 2 && age \u003c YEAR * 0.15 && (s.node0 + i) % 9 === 4) {\n        const ta = clamp((YEAR * 0.15 - age) / (YEAR * 0.05), 0, 1) * alpha;\n        const sd = (s.node0 + i) & 8 ? 1 : -1;\n        hsv(col, hb - 0.08, 0.5, 0.72);\n        CURL.forEach(([dx, dy], q) => put(buf, x + sd * dx, y + dy, col, 1, ta * (1 - q * 0.12)));\n      }\n    }\n    // A growing tip glows pale and feels ahead with a tendril, which circles slowly the way climbing shoots do.\n    if (s.grow && p \u003c GROW_END && dead \u003c 0) {\n      const x = s.x[len - 1];\n      const y = s.y[len - 1];\n      const sn = Math.sin(s.ang);\n      const cs = Math.cos(s.ang);\n      hsv(col, hb - 0.09, 0.45, 0.95);\n      const nut = 1.4 * Math.sin(ts * 0.8 + s.rand * 40);\n      for (let d = 0; d \u003c= 3; d++) {\n        const curl = [0, 0.3, 1, 1.8][d] * nut;\n        put(buf, Math.round(x + sn * d + cs * curl), Math.round(y - cs * d + sn * curl), col, 1, d ? 0.85 - d * 0.15 : 1);\n      }\n    }\n  }\n\n  // Berries: green under the leaves in late summer, blue-black on red stalks once the leaves are down, eaten by spring.\n  for (const b of P.berries) {\n    if (p \u003c 0.42 && !(Y * YEAR > b.t && p \u003c 0.05 + 0.12 * b.r)) continue;\n    const ripe = p \u003c 0.42 ? 1 : clamp((p - 0.42) / 0.25, 0, 1);\n    const x = Math.round(b.x);\n    const y = Math.round(b.y);\n    if (ripe > 0.5) put(buf, x, y - 1, hsv(col, 0.98, 0.7, 0.5), 1, 1);\n    hsv(col, hueTo(hb - 0.03, 0.68, ripe), 0.6 - 0.1 * ripe, 0.5 - 0.06 * ripe);\n    for (let k = 0; k \u003c 8; k += 2) put(buf, x + FALLS[0][k], y - FALLS[0][k + 1], col, shade(FALLS[0][k], 0), 1);\n  }\n\n  // Leaves, unfurling from a bud through two sizes to full.\n  const dir = P.windDir;\n  for (const l of P.leaves) {\n    if (l.gone === Y || p >= l.drop) continue;\n    const tO = openAt(P, l, Y);\n    const u = (ts - tO) / 6;\n    if (u \u003c= 0) continue;\n    const spr = LEAF[u \u003c 0.2 ? 0 : u \u003c 0.45 ? 1 : u \u003c 0.75 ? Math.min(2, l.size) : l.size];\n    const lc = leafColour(P, l, clamp((ts - tO) / (YEAR * 0.1), 0, 1), p);\n    const cx = Math.round(l.x) + (l.flip > 0.6 ? dir : 0);\n    const cy = Math.round(l.y);\n    for (let k = 0; k \u003c spr.length; k += 2) put(buf, cx + spr[k], cy + spr[k + 1], lc, shade(spr[k], spr[k + 1]), 1);\n  }\n\n  // Leaves on their way down, tumbling.\n  for (const f of P.falls) {\n    const ph = f.ph / 6.283;\n    const q = Math.floor((ph - Math.floor(ph)) * 4);\n    const face = (q === 2 ? 0.8 : 1) * (0.85 + 0.3 * Math.abs(Math.cos(f.ph * 0.5)));\n    const x = Math.round(f.x);\n    const y = Math.round(f.y);\n    const sp = FALLS[q];\n    for (let k = 0; k \u003c sp.length; k += 2) put(buf, x + sp[k], y + sp[k + 1], f.c, shade(sp[k], sp[k + 1]) * face, 1);\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","layer":{"id":"layer-ivy","type":"code","name":"ivy","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ivy\n// Family:  growth\n// Idea:    Boston ivy climbs a stone wall from the ground to the top of the panel, branching and reaching out tendrils; every year its leaves turn from green through yellow to red, fall down the wall and come back in spring.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 13\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Vines=2..6, Wind=-1..1\n//\n// Knob 1: Hue. The leaf colour, starting from green; autumn always turns the leaves a third of the way back round the colour wheel, so green goes through yellow to red.\n// Knob 2: Speed. How fast the year turns: at 2 a year is 60 seconds and a new stem climbs the 120 rows of wall in about 16; at 3 a year is 40 seconds, at 0.2 ten minutes. The gusts come and go faster with it.\n// Knob 3: Vines. How many stems come out of the ground, 2 to 6; turning it up starts new shoots at the foot of the wall, turning it down cuts stems so they wither.\n// Knob 4: Wind. Near 0 a breath of air now and then turns a few leaves silver side up; turned either way the gusts come more often from that side, sweep the wall faster and, past halfway, tear leaves off and blow them away.\n// Buttons: K1 tap cuts the oldest stem at the ground: its leaves go brown and drop, the dead wood fades in 5 seconds, and a new shoot starts climbing in its place, or in spring if it is autumn or winter.\n\nconst W = 64;\nconst H = 128;\n// The wall is rows 0 to 119, thirty courses of stone four LEDs high; the bed is the eight rows under it.\nconst GROUND = 120;\nconst GR = H - GROUND;\n// One year in world seconds. Speed 2 runs the world at twice that, so a year is 60 seconds.\nconst YEAR = 120;\n// Shoots grow until GROW_END of the year, leaves start to turn at TURN and are all down by BARE.\nconst GROW_END = 0.55;\nconst TURN = 0.56;\nconst BARE = 0.86;\nconst MAXS = 500;\nconst MAXL = 1800;\nconst MAXF = 260;\nconst MAXB = 90;\nconst MAXR = 6;\n// A coarse grid of 4 x 4 cells counts stems and leaves, so new growth heads for bare wall.\nconst GW = 16;\nconst GH = 30;\n// The first update grows the vine for this long, so the panel opens in its third spring with the wall covered.\nconst PRE = YEAR * 2.22;\n\n// Leaf sprites as dx, dy pairs: a bud, a small leaf, a half-grown one, a full one. shade() lights them from the upper left.\nconst LEAF = [\n  [0, 0],\n  [0, -1, -1, 0, 0, 0, 1, 0, 0, 1],\n  [0, -1, 1, -1, -1, 0, 0, 0, 1, 0, 2, 0, -1, 1, 0, 1, 1, 1, 2, 1, 0, 2, 1, 2],\n  [-1, -2, 0, -2, 1, -2, -2, -1, -1, -1, 0, -1, 1, -1, 2, -1, -2, 0, -1, 0, 0, 0, 1, 0, 2, 0, -1, 1, 0, 1, 1, 1, 0, 2],\n];\n// A falling leaf seen face on, tipped one way, edge on, tipped the other way.\nconst FALLS = [\n  [-1, 0, 0, 0, 1, 0, 0, -1],\n  [-1, -1, 0, 0, 1, 1],\n  [0, -1, 0, 0],\n  [1, -1, 0, 0, -1, 1],\n];\n// A tendril curling off the stem to the right; the left mirrors it.\nconst CURL = [[1, -1], [2, -1], [3, -2], [3, -3], [2, -3]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// From hue a towards hue b the short way round.\nfunction hueTo(a, b, t) {\n  return a + (b + Math.round(a - b) - a) * t;\n}\n\nfunction hsv(out, h, s, v) {\n  h = (h - Math.floor(h)) * 6;\n  for (let i = 0; i \u003c 3; i++) {\n    const k = (5 - 2 * i + h) % 6;\n    out[i] = 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  }\n  return out;\n}\n\nexport function setup(params) {\n  Object.assign(params, { shoots: [], leaves: [], falls: [], berries: [], queue: [], gusts: [], roots: [], pal: [] });\n  for (let r = 0; r \u003c MAXR; r++) params.roots.push({ use: false, wait: false, x: 32, born: 0, dead: -1 });\n  // Fallen leaves in the bed: colour, the year they fell and how much is left of them.\n  params.gC = new Float32Array(GR * W * 3);\n  params.gY = new Int16Array(GR * W).fill(-1);\n  params.gA = new Float32Array(GR * W);\n  params.occ = new Float32Array(GW * GH);\n  params.wall = new Float32Array(W * H * 3);\n  params.buf = new Float32Array(W * H * 3);\n  for (let k = 0; k \u003c= 16; k++) params.pal.push([0, 0, 0]);\n  Object.assign(params, { col: [0, 0, 0], ts: 0, rt: 0, p: 0, year: 0, started: false, nextGust: 0.6, windDir: 1, hue: 0.29, wind: 0.06, want: 2 });\n  bakeWall(params);\n}\n\nfunction bakeWall(P) {\n  const c = P.col;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= GROUND) {\n        // A bed of dark earth with a few pale pebbles; the foot of the wall casts a line of shadow.\n        const n = hash(x * 3 + 1, y * 7 + 2);\n        if (n \u003c 0.05 && y > GROUND) hsv(c, 0.08, 0.12, 0.27 + 0.08 * hash(x, y));\n        else hsv(c, 0.065, 0.5, (y === GROUND ? 0.08 : 0.12) + 0.05 * n);\n      } else {\n        const course = y >> 2;\n        const row = y & 3;\n        // Stones five to ten LEDs long, each course laid from its own offset.\n        let x0 = -Math.floor(hash(course, 77) * 9);\n        let len = 0;\n        let id = 0;\n        for (;;) {\n          len = 5 + Math.floor(hash(course * 31 + id, 5) * 6);\n          if (x \u003c x0 + len) break;\n          x0 += len;\n          id++;\n        }\n        const col = x - x0;\n        if (row === 3 || col === len - 1) hsv(c, 0.6, 0.12, 0.065);\n        else {\n          const h2 = hash(course * 17 + id, 23);\n          let v = 0.135 + 0.05 * hash(course * 131 + id, 9) + 0.012 * (hash(x, y) - 0.5);\n          v += row === 0 ? 0.018 : row === 2 ? -0.012 : 0;\n          if (col === 0) v += 0.01;\n          // Lighter towards the top, where the sky reaches the wall.\n          hsv(c, 0.58 + 0.07 * (h2 - 0.5), 0.14 + 0.1 * h2, v * (1.12 - (0.24 * y) / GROUND));\n        }\n      }\n      P.wall.set(c, (y * W + x) * 3);\n    }\n}\n\nfunction crowd(P, x, y) {\n  if (x \u003c 1 || x > W - 2 || y \u003c 1 || y > GROUND - 2) return 14;\n  const cx = Math.floor(x / 4);\n  const cy = Math.floor(y / 4);\n  const o = P.occ;\n  const i = cy * GW + cx;\n  return o[i] + 0.3 * ((cx > 0 ? o[i - 1] : 0) + (cx \u003c GW - 1 ? o[i + 1] : 0) + (cy > 0 ? o[i - GW] : 0) + (cy \u003c GH - 1 ? o[i + GW] : 0));\n}\n\nfunction mark(P, x, y, amt) {\n  const cx = Math.floor(x / 4);\n  const cy = Math.floor(y / 4);\n  if (cx >= 0 && cx \u003c GW && cy >= 0 && cy \u003c GH) P.occ[cy * GW + cx] += amt;\n}\n\nfunction newShoot(P, root, gen, x, y, ang, bias, budget) {\n  if (P.shoots.length >= MAXS) return null;\n  const s = { root, gen, x: [x], y: [y], t: [P.ts], node0: 0, budget, grow: true, top: false, ang, bias, acc: 0, rand: Math.random(), side: Math.random() \u003c 0.5 ? -1 : 1 };\n  P.shoots.push(s);\n  return s;\n}\n\nfunction addLeaf(P, s, x, y) {\n  if (x \u003c 0.5 || x > W - 1.5 || y \u003c 1 || y > GROUND - 3 || P.leaves.length >= MAXL) return;\n  // Whole branches turn together, so autumn comes in patches.\n  const turn = TURN + 0.07 * s.rand + 0.06 * Math.random();\n  const size = s.gen === 0 ? 3 : s.gen === 1 && Math.random() \u003c 0.6 ? 3 : 2;\n  P.leaves.push({ x, y, t: P.ts, root: s.root, size, gone: -1, r1: Math.random(), r2: Math.random(), r3: Math.random(), sus: Math.random(), flip: 0, turn, drop: turn + 0.06 + 0.09 * Math.random() });\n  mark(P, x, y, 0.8);\n}\n\nfunction branch(P, s, x, y, a, gen, budget) {\n  const cA = crowd(P, x + Math.sin(a + 1.1) * 5, y - Math.cos(a + 1.1) * 5);\n  const cB = crowd(P, x + Math.sin(a - 1.1) * 5, y - Math.cos(a - 1.1) * 5);\n  if (Math.min(cA, cB) > 7) return;\n  const side = cA \u003c cB ? 1 : -1;\n  const c = newShoot(P, s.root, gen + 1, x, y, a + side * (0.9 + Math.random() * 0.4), side * (0.35 + Math.random() * 0.35), budget);\n  if (c) c.node0 = 1;\n}\n\nfunction addPoint(P, s) {\n  const n = s.x.length;\n  const x = s.x[n - 1];\n  const y = s.y[n - 1];\n  const gen = s.gen;\n  if (s.budget \u003c= 0) {\n    s.grow = false;\n    return;\n  }\n  let a = s.ang + (Math.random() - 0.5) * 0.55;\n  // A main stem keeps to its own lane up the wall; side shoots set off sideways and curve up as they go.\n  const lane = gen === 0 && !s.top ? clamp((P.roots[s.root].x - x) * 0.04, -0.5, 0.5) : 0;\n  a += (s.bias + lane - a) * (gen === 0 ? 0.15 : 0.1);\n  if (gen > 0 && !s.top) s.bias *= 0.98;\n  // Of three headings, the one into the barest wall, with a little chance.\n  let best = a;\n  let bestScore = 1e9;\n  for (let c = -1; c \u003c= 1; c++) {\n    const ca = a + c * 0.45;\n    const score = crowd(P, x + Math.sin(ca) * 4, y - Math.cos(ca) * 4) * 0.3 + Math.abs(c) * 0.3 + Math.random() * 0.35;\n    if (score \u003c bestScore) [bestScore, best] = [score, ca];\n  }\n  a = clamp(best, -2, 2);\n  if (y - Math.cos(a) \u003c 1.5 && !s.top) {\n    // At the top of the wall a shoot turns and runs along the coping for a little way.\n    s.top = true;\n    const side = (x \u003c W / 2) === Math.random() \u003c 0.7 ? 1 : -1;\n    s.bias = side * 1.5;\n    a = side * 1.3;\n    s.budget = Math.min(s.budget, 8 + Math.random() * 12);\n  }\n  const nx = x + Math.sin(a);\n  const ny = y - Math.cos(a);\n  if (ny \u003c 0.5 || nx \u003c 0.5 || nx > W - 1.5 || ny > GROUND - 1.5) {\n    s.grow = false;\n    return;\n  }\n  s.ang = a;\n  s.budget--;\n  s.x.push(nx);\n  s.y.push(ny);\n  s.t.push(P.ts);\n  mark(P, nx, ny, 1);\n  if ((s.node0 + n) % 3 === 0) {\n    s.side = -s.side;\n    addLeaf(P, s, nx - Math.cos(a) * s.side * 2.2, ny - Math.sin(a) * s.side * 2.2 - 0.7);\n  }\n  // Low on the wall a main stem is bushier.\n  if (gen \u003c 2 && Math.random() \u003c (gen === 0 ? (ny > 70 ? 0.12 : 0.07) : 0.035)) branch(P, s, nx, ny, a, gen, gen === 0 ? 18 + Math.random() * 34 : 6 + Math.random() * 12);\n  if (gen > 0 && Math.random() \u003c 0.025 && P.berries.length \u003c MAXB) P.berries.push({ x: nx, y: ny, root: s.root, r: Math.random(), t: P.ts });\n}\n\n// Where a new stem comes out of the ground: as far from the others as the bed allows.\nfunction freeSpot(P, r) {\n  let best = 32;\n  let bestD = -1;\n  for (let x = 5; x \u003c= 58; x++) {\n    const d = Math.min(99, ...P.roots.map((q, i) => (i !== r && q.use ? Math.abs(q.x - x) : 99))) + Math.random() * 2;\n    if (d > bestD) [bestD, best] = [d, x];\n  }\n  return best;\n}\n\nfunction cut(P, r) {\n  const R = P.roots[r];\n  if (R.use && !R.wait && R.dead \u003c 0) R.dead = P.rt;\n}\n\n// Cut the oldest living stem, if it has lived at least this many years.\nfunction cutOldest(P, years) {\n  let old = -1;\n  P.roots.forEach((R, r) => {\n    if (R.use && !R.wait && R.dead \u003c 0 && P.year - Math.floor(R.born / YEAR) >= years && (old \u003c 0 || R.born \u003c P.roots[old].born)) old = r;\n  });\n  if (old >= 0) cut(P, old);\n}\n\n// The dead wood has faded: clear it away and let a new stem come up there, if the Vines knob still wants one.\nfunction freeRoot(P, r) {\n  const R = P.roots[r];\n  P.shoots = P.shoots.filter((s) => s.root !== r);\n  P.leaves = P.leaves.filter((l) => l.root !== r);\n  P.berries = P.berries.filter((b) => b.root !== r);\n  P.queue = P.queue.filter((q) => q.s.root !== r);\n  R.dead = -1;\n  if (r \u003c P.want) {\n    R.wait = true;\n    R.x = clamp(R.x + (Math.random() - 0.5) * 8, 5, 58);\n  } else R.use = false;\n  P.occ.fill(0);\n  for (const s of P.shoots) for (let i = 0; i \u003c s.x.length; i++) mark(P, s.x[i], s.y[i], 1);\n  for (const l of P.leaves) mark(P, l.x, l.y, 0.8);\n}\n\n// Each spring the old wood puts out new side shoots, spread through the growing season.\nfunction springSchedule(P) {\n  P.roots.forEach((R, r) => {\n    if (!R.use || R.wait || R.dead >= 0) return;\n    const cand = P.shoots.filter((s) => s.root === r && s.gen \u003c 2 && s.x.length > 4);\n    if (!cand.length) return;\n    const count = 8 + Math.floor(Math.random() * 5);\n    for (let k = 0; k \u003c count && P.queue.length \u003c 64; k++) {\n      const s = cand[Math.floor(Math.random() * cand.length)];\n      P.queue.push({ s, i: 1 + Math.floor(Math.random() * (s.x.length - 2)), at: P.year * YEAR + YEAR * (0.06 + 0.34 * Math.random()) });\n    }\n  });\n}\n\n// The world clock: seasons, growth and the year's events, in world seconds.\nfunction stepWorld(P, dts, pre) {\n  const prevP = P.p;\n  const ts = (P.ts += dts);\n  const Y = Math.floor(ts / YEAR);\n  const p = (P.p = ts / YEAR - Y);\n  if (Y !== P.year) {\n    P.year = Y;\n    springSchedule(P);\n  }\n  // In the pre-run last autumn's leaves land in the bed, so the panel opens with them rotting there.\n  if (pre && prevP \u003c BARE && p >= BARE)\n    for (const l of P.leaves) if (Math.random() \u003c 0.5) stamp(P, l.x + (Math.random() - 0.5) * 14, GROUND + 1 + Math.random() * (GR - 1.5), leafColour(P, l, 1, l.drop));\n  // Early in winter a stem three years old is cut back, and a new one comes up in spring.\n  if (!pre && prevP \u003c BARE + 0.03 && p >= BARE + 0.03) cutOldest(P, 3);\n  P.roots.forEach((R, r) => {\n    if (R.use && R.wait && R.dead \u003c 0 && p \u003c 0.42) {\n      R.wait = false;\n      R.born = ts;\n      newShoot(P, r, 0, R.x + (Math.random() - 0.5) * 2, GROUND - 1.6, (Math.random() - 0.5) * 0.4, 0, 9999);\n    }\n  });\n\n  const f = p \u003c 0.45 ? 1 : p \u003c GROW_END ? (GROW_END - p) / (GROW_END - 0.45) : 0;\n  if (f \u003c= 0) return;\n  P.queue = P.queue.filter((q) => {\n    if (ts \u003c q.at) return true;\n    const s = q.s;\n    const i = Math.min(q.i, s.x.length - 1);\n    if (P.roots[s.root].dead \u003c 0) branch(P, s, s.x[i], s.y[i], 0, Math.min(1, s.gen), 12 + Math.random() * 26);\n    return false;\n  });\n  const shoots = P.shoots;\n  for (let k = 0; k \u003c shoots.length; k++) {\n    const s = shoots[k];\n    if (!s.grow || P.roots[s.root].dead >= 0) continue;\n    s.acc += (s.gen === 0 ? 4 : 3) * f * dts;\n    while (s.acc >= 1 && s.grow) {\n      s.acc -= 1;\n      addPoint(P, s);\n    }\n  }\n}\n\nfunction openAt(P, l, Y) {\n  if (l.t >= Y * YEAR) return l.t + 1.5;\n  // Old wood comes into leaf low down first.\n  return Y * YEAR + YEAR * (0.015 + 0.06 * l.r1 + 0.04 * (1 - l.y / H));\n}\n\n// A leaf's colour at year phase p: young lime, deep green, the autumn turn, withering, and the pale underside a gust shows.\nfunction leafColour(P, l, m, p) {\n  const lift = 0.86 + 0.28 * l.r1;\n  let h = P.hue - 0.055 + 0.065 * m + (l.r2 - 0.5) * 0.04;\n  let s = 0.7 + 0.18 * m;\n  let v = (0.82 - 0.28 * m) * lift;\n  const c = clamp((p - l.turn) / 0.09, 0, 1);\n  if (c > 0) {\n    h -= (0.31 + (l.r3 > 0.7 ? 0.035 : 0)) * c;\n    s += (0.93 - s) * c;\n    v = (0.54 + 0.36 * Math.sin(Math.PI * c) + 0.1 * c) * lift;\n  }\n  const dead = P.roots[l.root].dead;\n  if (dead >= 0) {\n    const w = clamp((P.rt - dead) / 1.2, 0, 1);\n    h = hueTo(h, 0.075, w);\n    s += (0.6 - s) * w;\n    v += (0.34 - v) * w;\n  }\n  const f = l.flip;\n  if (f > 0) {\n    h -= 0.02 * f;\n    s *= 1 - 0.62 * f;\n    v += (0.95 - v) * 0.55 * f;\n  }\n  return hsv(P.col, h, s, Math.min(1, v));\n}\n\nfunction stamp(P, x, y, c) {\n  const cx = Math.round(x);\n  const cy = Math.floor(y) - GROUND;\n  const sp = FALLS[0];\n  for (let k = 0; k \u003c sp.length; k += 2) {\n    const px = cx + sp[k];\n    const py = cy + sp[k + 1];\n    if (px \u003c 0 || px >= W || py \u003c 0 || py >= GR) continue;\n    const g = py * W + px;\n    for (let j = 0; j \u003c 3; j++) P.gC[g * 3 + j] = c[j] * 0.8 * shade(sp[k], sp[k + 1]);\n    P.gY[g] = P.year;\n    P.gA[g] = 1;\n  }\n}\n\nfunction dropLeaf(P, l, fall) {\n  l.gone = P.year;\n  if (!fall || P.falls.length >= MAXF) return;\n  const flip = l.flip;\n  l.flip = 0;\n  const c = leafColour(P, l, clamp((P.ts - openAt(P, l, P.year)) / (YEAR * 0.1), 0, 1), P.p);\n  l.flip = flip;\n  const s = Math.random() \u003c 0.5 ? -1 : 1;\n  P.falls.push({ x: l.x, y: l.y, vy: 1 + Math.random() * 2, ph: Math.random() * 6.283, spin: s * (3 + Math.random() * 4), term: 8 + Math.random() * 7, land: GROUND + 1 + Math.random() * (GR - 1.5), c: c.slice() });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = 0.29 + k[0];\n  const speed = clamp(k[1], 0.05, 3);\n  const n = clamp(Math.round(k[2]), 2, MAXR);\n  P.wind = clamp(k[3], -1, 1);\n  if (!P.started) {\n    P.started = true;\n    P.want = n;\n    for (let r = 0; r \u003c n; r++) Object.assign(P.roots[r], { use: true, wait: r \u003c n - 1, x: clamp(((r + 0.5) * W) / n + (Math.random() - 0.5) * 6, 5, 58) });\n    // The youngest stem comes up in the third spring, so the panel opens with it climbing.\n    const late = P.roots[n - 1];\n    while (P.ts \u003c PRE) {\n      if (P.ts >= YEAR * 2.1 && !late.born) late.wait = true;\n      stepWorld(P, 0.1, true);\n    }\n  }\n  P.rt += dt;\n  // Follow the Vines knob: new stems where there are too few, cut ones where there are too many.\n  P.want = n;\n  P.roots.forEach((R, r) => {\n    if (r \u003c n && !R.use) Object.assign(R, { use: true, dead: -1, wait: true, x: freeSpot(P, r) });\n    else if (r >= n && R.use && R.dead \u003c 0) {\n      if (R.wait) R.use = R.wait = false;\n      else cut(P, r);\n    }\n  });\n  if (input.btnPressed && input.btnPressed[0]) cutOldest(P, -9);\n  stepWorld(P, dt * speed, false);\n  P.roots.forEach((R, r) => {\n    if (R.dead >= 0 && P.rt - R.dead > 5.2) freeRoot(P, r);\n  });\n  stepGusts(P, dt, speed / 2);\n  stepLeaves(P, dt);\n  stepFalling(P, dt);\n  // Last year's leaves rot away in the bed through the spring.\n  for (let g = 0; g \u003c GR * W; g++) {\n    if (P.gY[g] \u003c 0 || P.gY[g] >= P.year) continue;\n    P.gA[g] = 1 - clamp((P.p - 0.03 - 0.3 * hash(g, 3)) / 0.012, 0, 1);\n    if (P.gA[g] \u003c= 0) P.gY[g] = -1;\n  }\n}\n\n// Gusts run in the panel's own time, but a faster world brings them more often and sends them across quicker.\nfunction stepGusts(P, dt, quick) {\n  const aw = Math.abs(P.wind);\n  P.nextGust -= dt;\n  if (P.nextGust \u003c= 0) {\n    P.nextGust = ((3.2 - 2.4 * aw) * (0.6 + 0.8 * Math.random())) / quick;\n    if (P.gusts.length \u003c 6) {\n      const dir = aw > 0.12 ? Math.sign(P.wind) : Math.random() \u003c 0.5 ? -1 : 1;\n      const w = 5 + 7 * aw + 3 * Math.random();\n      P.gusts.push({ dir, w, s: Math.min(1, 0.5 + 0.5 * aw + 0.15 * Math.random()), v: (26 + 40 * aw + 10 * Math.random()) * quick, x: dir > 0 ? -2 * w - 8 : W + 2 * w + 8, tilt: (Math.random() - 0.5) * 0.5, seed: Math.random() * 100, row: new Float32Array(H) });\n      P.windDir = dir;\n    }\n  }\n  P.gusts = P.gusts.filter((g) => {\n    g.x += g.dir * g.v * dt;\n    // The front of a gust is a slanted, wavy line across the wall.\n    for (let y = 0; y \u003c H; y++) g.row[y] = g.x + g.tilt * (y - 64) + 4 * Math.sin(y * 0.06 + g.seed);\n    return g.x > -2 * g.w - 50 && g.x \u003c W + 2 * g.w + 50;\n  });\n}\n\n// How hard the gusts press on a point, signed by their direction.\nfunction gustAt(P, x, y) {\n  let push = 0;\n  const yi = clamp(Math.round(y), 0, H - 1);\n  for (const g of P.gusts) {\n    const d = (x - g.row[yi]) / g.w;\n    if (d > -1 && d \u003c 1) push += g.dir * g.s * (1 - d * d);\n  }\n  return push;\n}\n\nfunction stepLeaves(P, dt) {\n  const Y = P.year;\n  const p = P.p;\n  const aw = Math.abs(P.wind);\n  for (const l of P.leaves) {\n    if (l.gone === Y) continue;\n    const dead = P.roots[l.root].dead;\n    const open = P.ts > openAt(P, l, Y);\n    if (dead >= 0) {\n      if (P.rt - dead > 0.8 + 2.6 * l.r3) dropLeaf(P, l, open && p \u003c l.drop);\n      continue;\n    }\n    if (p >= l.drop) {\n      dropLeaf(P, l, p - l.drop \u003c 0.03);\n      continue;\n    }\n    if (!open) continue;\n    // A gust lifts the leaves it passes over and shows their pale undersides; stiffer leaves need a stronger gust.\n    let t = 0;\n    const yi = clamp(Math.round(l.y), 0, H - 1);\n    for (const g of P.gusts) {\n      const d = (l.x - g.row[yi]) / g.w;\n      if (d > -1 && d \u003c 1) t = Math.max(t, (1 - d * d) * clamp((g.s - l.sus * 0.8) * 3, 0, 1));\n    }\n    l.flip += (t - l.flip) * Math.min(1, dt * (t > l.flip ? 12 : 3));\n    if (aw > 0.45 && l.flip > 0.55 && Math.random() \u003c dt * (aw - 0.45) * 0.12 * (1 + 30 * clamp((p - l.turn) / 0.09, 0, 1))) dropLeaf(P, l, true);\n  }\n}\n\nfunction stepFalling(P, dt) {\n  P.falls = P.falls.filter((f) => {\n    f.ph += f.spin * dt;\n    f.vy += (f.term - f.vy) * Math.min(1, dt * 1.5);\n    f.x += (P.wind * 18 + gustAt(P, f.x, f.y) * 22 + Math.sin(f.ph) * 6) * dt;\n    f.y += f.vy * (0.65 + 0.35 * Math.abs(Math.cos(f.ph))) * dt;\n    if (f.x \u003c -3 || f.x > W + 2) return false;\n    if (f.y \u003c f.land) return true;\n    stamp(P, f.x, f.land, f.c);\n    return false;\n  });\n}\n\n// Lighter up and to the left, with a darker midrib down the middle.\nfunction shade(dx, dy) {\n  return 1 - 0.06 * dx - 0.08 * dy - (dx === 0 && dy > -2 ? 0.06 : 0);\n}\n\nfunction put(buf, x, y, c, sh, a) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] += (c[0] * sh - buf[o]) * a;\n  buf[o + 1] += (c[1] * sh - buf[o + 1]) * a;\n  buf[o + 2] += (c[2] * sh - buf[o + 2]) * a;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  buf.set(P.wall);\n  const ts = P.ts;\n  const Y = P.year;\n  const p = P.p;\n  const hb = P.hue;\n  const col = P.col;\n\n  // Fallen leaves in the bed, browner after the turn of the year.\n  const brown = [70, 38, 18];\n  for (let g = 0; g \u003c GR * W; g++) {\n    if (P.gY[g] \u003c 0) continue;\n    const age = P.gY[g] \u003c Y ? 0.6 : 0;\n    const o = (GROUND * W + g) * 3;\n    for (let k = 0; k \u003c 3; k++) buf[o + k] += (P.gC[g * 3 + k] + (brown[k] - P.gC[g * 3 + k]) * age - buf[o + k]) * P.gA[g];\n  }\n\n  // Stems: green and supple when new, brown wood after a third of a year, thicker low on the old stems.\n  for (let k = 0; k \u003c= 16; k++) hsv(P.pal[k], hueTo(hb - 0.05, 0.04, k / 16), 0.6 - (0.1 * k) / 16, 0.62 - (0.28 * k) / 16);\n  const grey = [72, 64, 58];\n  const c = [0, 0, 0];\n  for (const s of P.shoots) {\n    const dead = P.roots[s.root].dead;\n    const e = dead >= 0 ? P.rt - dead : 0;\n    const fade = clamp(e / 2.5, 0, 1);\n    const alpha = 1 - clamp((e - 2.5) / 2.5, 0, 1);\n    const len = s.x.length;\n    for (let i = 0; i \u003c len; i++) {\n      const x = Math.round(s.x[i]);\n      const y = Math.round(s.y[i]);\n      const age = ts - s.t[i];\n      const pc = P.pal[Math.round(clamp(age / (YEAR * 0.33), 0, 1) * 16)];\n      for (let k = 0; k \u003c 3; k++) c[k] = pc[k] + (grey[k] - pc[k]) * fade;\n      put(buf, x, y, c, 1, alpha);\n      if (s.gen === 0 && age > YEAR * 0.5) {\n        put(buf, x + 1, y, c, 0.7, alpha);\n        if (age > YEAR * 1.1 && y > GROUND - 45) put(buf, x - 1, y, c, 0.85, alpha);\n      }\n      // Young tendrils reach off the stem between the leaves and fade into it as the wood hardens.\n      if (s.gen \u003c 2 && age \u003c YEAR * 0.15 && (s.node0 + i) % 9 === 4) {\n        const ta = clamp((YEAR * 0.15 - age) / (YEAR * 0.05), 0, 1) * alpha;\n        const sd = (s.node0 + i) & 8 ? 1 : -1;\n        hsv(col, hb - 0.08, 0.5, 0.72);\n        CURL.forEach(([dx, dy], q) => put(buf, x + sd * dx, y + dy, col, 1, ta * (1 - q * 0.12)));\n      }\n    }\n    // A growing tip glows pale and feels ahead with a tendril, which circles slowly the way climbing shoots do.\n    if (s.grow && p \u003c GROW_END && dead \u003c 0) {\n      const x = s.x[len - 1];\n      const y = s.y[len - 1];\n      const sn = Math.sin(s.ang);\n      const cs = Math.cos(s.ang);\n      hsv(col, hb - 0.09, 0.45, 0.95);\n      const nut = 1.4 * Math.sin(ts * 0.8 + s.rand * 40);\n      for (let d = 0; d \u003c= 3; d++) {\n        const curl = [0, 0.3, 1, 1.8][d] * nut;\n        put(buf, Math.round(x + sn * d + cs * curl), Math.round(y - cs * d + sn * curl), col, 1, d ? 0.85 - d * 0.15 : 1);\n      }\n    }\n  }\n\n  // Berries: green under the leaves in late summer, blue-black on red stalks once the leaves are down, eaten by spring.\n  for (const b of P.berries) {\n    if (p \u003c 0.42 && !(Y * YEAR > b.t && p \u003c 0.05 + 0.12 * b.r)) continue;\n    const ripe = p \u003c 0.42 ? 1 : clamp((p - 0.42) / 0.25, 0, 1);\n    const x = Math.round(b.x);\n    const y = Math.round(b.y);\n    if (ripe > 0.5) put(buf, x, y - 1, hsv(col, 0.98, 0.7, 0.5), 1, 1);\n    hsv(col, hueTo(hb - 0.03, 0.68, ripe), 0.6 - 0.1 * ripe, 0.5 - 0.06 * ripe);\n    for (let k = 0; k \u003c 8; k += 2) put(buf, x + FALLS[0][k], y - FALLS[0][k + 1], col, shade(FALLS[0][k], 0), 1);\n  }\n\n  // Leaves, unfurling from a bud through two sizes to full.\n  const dir = P.windDir;\n  for (const l of P.leaves) {\n    if (l.gone === Y || p >= l.drop) continue;\n    const tO = openAt(P, l, Y);\n    const u = (ts - tO) / 6;\n    if (u \u003c= 0) continue;\n    const spr = LEAF[u \u003c 0.2 ? 0 : u \u003c 0.45 ? 1 : u \u003c 0.75 ? Math.min(2, l.size) : l.size];\n    const lc = leafColour(P, l, clamp((ts - tO) / (YEAR * 0.1), 0, 1), p);\n    const cx = Math.round(l.x) + (l.flip > 0.6 ? dir : 0);\n    const cy = Math.round(l.y);\n    for (let k = 0; k \u003c spr.length; k += 2) put(buf, cx + spr[k], cy + spr[k + 1], lc, shade(spr[k], spr[k + 1]), 1);\n  }\n\n  // Leaves on their way down, tumbling.\n  for (const f of P.falls) {\n    const ph = f.ph / 6.283;\n    const q = Math.floor((ph - Math.floor(ph)) * 4);\n    const face = (q === 2 ? 0.8 : 1) * (0.85 + 0.3 * Math.abs(Math.cos(f.ph * 0.5)));\n    const x = Math.round(f.x);\n    const y = Math.round(f.y);\n    const sp = FALLS[q];\n    for (let k = 0; k \u003c sp.length; k += 2) put(buf, x + sp[k], y + sp[k + 1], f.c, shade(sp[k], sp[k + 1]) * face, 1);\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Vines=2..6, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The leaf colour, starting from green; autumn always turns the leaves a third of the way back round the colour wheel, so green goes through yellow to red."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the year turns: at 2 a year is 60 seconds and a new stem climbs the 120 rows of wall in about 16; at 3 a year is 40 seconds, at 0.2 ten minutes. The gusts come and go faster with it."},{"name":"Vines","min":2,"max":6,"about":"How many stems come out of the ground, 2 to 6; turning it up starts new shoots at the foot of the wall, turning it down cuts stems so they wither."},{"name":"Wind","min":-1,"max":1,"about":"Near 0 a breath of air now and then turns a few leaves silver side up; turned either way the gusts come more often from that side, sweep the wall faster and, past halfway, tear leaves off and blow them away."}],"start":[0,2,2,0.06],"measures":{"motion":0.0893,"detail":0.1136,"edges":0.3366,"complexity":2.0732,"coverage":0.8558,"colour":0.304,"drift":0.0713},"knobResponse":[0.1737,0.0489,0.1412,0.1012]},{"slug":"jacobs-ladder","title":"Jacob's Ladder","family":"light","round":6,"note":"두 막대가 가장 가까운 목에서 보랏빛 아크가 튀어, 벌어지는 V 를 타고 막대 끝까지 올라가 끊어져요. 위의 아크가 끝에 닿기 전에 목에서 다음 아크가 튀고, K4 를 올리면 지나간 아크가 사다리 가로대로 쌓여요.","idea":"An arc strikes where two rods stand closest, rides its own hot air up the widening V until it is too long to hold, and breaks at the tips while the next one strikes below.","buttons":"K1 tap strikes a new arc now.","code":"// ===== Patternflow pattern =====\n// Title:   Jacob's Ladder\n// Family:  light\n// Idea:    An arc strikes where two rods stand closest, rides its own hot air up the widening V until it is too long to hold, and breaks at the tips while the next one strikes below.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Jacob's ladder, the climbing-arc spark gap of high-voltage demonstrations\n// Round:   6\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Power=0.3..3, Spread=0..1, Exposure=0..1\n//\n// Knob 1: Hue. The colour of the gas the arc burns in, starting from the violet of an arc in air.\n// Knob 2: Power. How hard the transformer drives the arc: weak, it climbs slowly and breaks partway up; strong, it races to the tips, writhes, throws sparks and strikes again before the last one is gone.\n// Knob 3: Spread. How far apart the rod tips stand, from a narrow V to horns that flare out to the edges of the panel. In a wide V the arc stretches sooner, so the next one strikes sooner and a weak arc breaks lower down.\n// Knob 4: Exposure. How long the panel keeps each arc after it has moved on, like a camera left open; turned up, the arcs it leaves stack into the rungs of a ladder.\n// Buttons: K1 tap strikes a new arc now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 32;\n// Rows, top down: the rod tips, the throat where the rods come closest and\n// every arc strikes, the tops of the two insulators, the lid of the box.\nconst TIP = 8;\nconst THROAT = 94;\nconst POST = 104;\nconst BOX = 116;\n// Half the gap between the rods at the throat and where they leave the posts.\nconst THROAT_GAP = 2.2;\nconst POST_GAP = 9.5;\nconst ARCS = 3;\nconst PTS = 72;\nconst EMBERS = 48;\n// The arc throbs at this rate. A camera left open keeps the bright moments\n// and loses the dim ones, so the long exposure lays the arc down in rungs.\nconst HUM = 10;\n// The arc lights the air around it. That wide glow is worked out on a grid\n// of 4 LED cells and spread across the cells between.\nconst CELL = 4;\nconst GW = W / CELL + 1;\nconst GH = H / CELL + 1;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash2(i, j) {\n  let h = Math.imul(i, 374761393) + Math.imul(j, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth value noise, -1..1.\nfunction noise2(x, y) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash2(xi, yi);\n  const b = hash2(xi + 1, yi);\n  const c = hash2(xi, yi + 1);\n  const d = hash2(xi + 1, yi + 1);\n  return (a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v) * 2 - 1;\n}\n\n// Half the gap between the rods at row y, read from the table build() fills.\nfunction gapAt(P, y) {\n  if (y \u003c= TIP) return P.gap[TIP];\n  if (y >= POST) return POST_GAP;\n  const i = Math.floor(y);\n  const f = y - i;\n  return P.gap[i] + (P.gap[i + 1] - P.gap[i]) * f;\n}\n\n// The rods, the posts and the box, drawn once for a spread. Above the throat\n// the rods open from a straight V to horns: the wider the spread, the longer\n// they stay close before they flare.\nfunction build(P, spread) {\n  P.spread = spread;\n  const top = 15 + 16 * spread;\n  const bend = 1.1 + 0.6 * spread;\n  for (let y = 0; y \u003c= H; y++) {\n    if (y \u003c= THROAT) {\n      const u = Math.min(1, (THROAT - y) / (THROAT - TIP));\n      P.gap[y] = THROAT_GAP + (top - THROAT_GAP) * Math.pow(u, bend);\n    } else {\n      const t = Math.min(1, (y - THROAT) / (POST - THROAT));\n      P.gap[y] = THROAT_GAP + (POST_GAP - THROAT_GAP) * t * t;\n    }\n  }\n  const rod = P.rod;\n  rod.fill(0);\n  // Each rod is stamped every quarter row, so a pixel keeps how close the\n  // rod's centre line passed it: a one-LED wire, shared between two LEDs\n  // where it runs between them.\n  for (let y = TIP; y \u003c= POST; y += 0.25) {\n    const g = gapAt(P, y);\n    for (let side = -1; side \u003c= 1; side += 2) {\n      const x = CX + side * g;\n      const x0 = Math.floor(x) - 1;\n      const y0 = Math.floor(y) - 1;\n      for (let py = y0; py \u003c= y0 + 2; py++) {\n        if (py \u003c 0 || py >= H) continue;\n        for (let px = x0; px \u003c= x0 + 2; px++) {\n          if (px \u003c 0 || px >= W) continue;\n          const d = Math.hypot(px + 0.5 - x, py + 0.5 - y);\n          const c = Math.min(1, Math.max(0, 1.05 - d));\n          const i = py * W + px;\n          if (c > rod[i]) rod[i] = c;\n        }\n      }\n    }\n  }\n  // A round knob on each tip.\n  for (let side = -1; side \u003c= 1; side += 2) {\n    const x = CX + side * P.gap[TIP];\n    for (let py = TIP - 3; py \u003c= TIP + 1; py++) {\n      for (let px = Math.floor(x) - 2; px \u003c= Math.floor(x) + 2; px++) {\n        if (px \u003c 0 || px >= W) continue;\n        const d = Math.hypot(px + 0.5 - x, py + 0.5 - (TIP - 0.6));\n        const c = Math.min(1, Math.max(0, 1.7 - d));\n        const i = py * W + px;\n        if (c > rod[i]) rod[i] = c;\n      }\n    }\n  }\n\n  const st = P.stat;\n  st.fill(0);\n  for (let i = 0; i \u003c N; i++) {\n    const c = rod[i];\n    if (c \u003c= 0) continue;\n    const x = i % W;\n    // Steel, a touch lighter on the face toward the middle.\n    const face = x \u003c CX ? 1.08 : 0.94;\n    st[i * 3] = 98 * c * face;\n    st[i * 3 + 1] = 102 * c * face;\n    st[i * 3 + 2] = 116 * c * face;\n  }\n  // Two glazed posts with sheds, lit from the left.\n  for (let y = POST; y \u003c BOX; y++) {\n    const wide = (y - POST) % 3 !== 2;\n    const half = wide ? 3 : 2;\n    for (let side = -1; side \u003c= 1; side += 2) {\n      const cx = CX + side * POST_GAP;\n      for (let x = Math.floor(cx - half); x \u003c Math.ceil(cx + half); x++) {\n        const u = (x + 0.5 - (cx - half)) / (2 * half);\n        const shade = (wide ? 1 : 0.68) * (1.15 - 0.6 * u);\n        const o = (y * W + x) * 3;\n        st[o] = 176 * shade;\n        st[o + 1] = 166 * shade;\n        st[o + 2] = 148 * shade;\n      }\n    }\n  }\n  // The transformer box: a light lid, a dark body with vent slots.\n  for (let y = BOX; y \u003c H; y++) {\n    for (let x = 3; x \u003c W - 3; x++) {\n      if (y === BOX && (x === 3 || x === W - 4)) continue;\n      const o = (y * W + x) * 3;\n      let r = 54;\n      let g = 52;\n      let b = 60;\n      if (y === BOX) {\n        r = 104;\n        g = 102;\n        b = 112;\n      } else if (y === BOX + 1) {\n        r = 70;\n        g = 68;\n        b = 76;\n      } else if (y >= BOX + 4 && y \u003c= BOX + 9 && (y - BOX) % 2 === 0 && x >= 16 && x \u003c W - 16) {\n        r = 18;\n        g = 18;\n        b = 21;\n      }\n      st[o] = r;\n      st[o + 1] = g;\n      st[o + 2] = b;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.gap = new Float32Array(H + 1);\n  P.rod = new Float32Array(N);\n  P.stat = new Float32Array(N * 3);\n  P.spread = -1;\n  P.alive = new Uint8Array(ARCS);\n  P.age = new Float32Array(ARCS);\n  P.root = new Float32Array(ARCS);\n  P.life = new Float32Array(ARCS);\n  P.seed = new Float32Array(ARCS);\n  P.turb = new Float32Array(ARCS);\n  P.len = new Float32Array(ARCS);\n  P.ends = new Float32Array(ARCS * 4);\n  P.px = new Float32Array(ARCS * PTS);\n  P.py = new Float32Array(ARCS * PTS);\n  P.pn = new Uint8Array(ARCS);\n  P.ex = new Float32Array(EMBERS);\n  P.ey = new Float32Array(EMBERS);\n  P.evx = new Float32Array(EMBERS);\n  P.evy = new Float32Array(EMBERS);\n  P.elife = new Float32Array(EMBERS);\n  P.emax = new Float32Array(EMBERS);\n  P.ebounce = new Uint8Array(EMBERS);\n  P.core = new Float32Array(N);\n  P.glow = new Float32Array(N);\n  P.trail = new Float32Array(N);\n  P.warm = new Float32Array(N);\n  P.dist = new Float32Array(N).fill(1e9);\n  P.air = new Float32Array(GW * GH);\n  P.airTrail = new Float32Array(GW * GH);\n  P.out = new Float32Array(N * 3);\n  P.col = new Float32Array(12);\n  P.t = 0;\n  P.dt = 1 / 30;\n  P.flash = 0;\n  P.cool = 0;\n  P.power = 2;\n  P.hue = 0;\n  P.exposure = 0.06;\n}\n\nfunction strike(P) {\n  let a = -1;\n  for (let i = 0; i \u003c ARCS; i++) if (P.alive[i] === 0) a = i;\n  if (a \u003c 0) {\n    // Every slot is busy: the oldest arc gives way.\n    a = 0;\n    for (let i = 1; i \u003c ARCS; i++) if (P.age[i] > P.age[a]) a = i;\n  }\n  P.alive[a] = 1;\n  P.age[a] = 0;\n  P.root[a] = THROAT - 0.3 + (Math.random() - 0.5) * 1.2;\n  P.life[a] = 1;\n  P.seed[a] = Math.floor(Math.random() * 997);\n  P.turb[a] = 0;\n  P.len[a] = 0;\n  P.flash = 1;\n  P.cool = 0;\n}\n\n// The arc's points for this frame: a chord between the two roots, bowed up\n// in the middle, where hot air rises fastest, and bent by turbulence that\n// grows with the arc's length. The roots sit on the inner face of each rod.\nfunction shape(P, a) {\n  const age = P.age[a];\n  const live = P.alive[a] === 1;\n  const seed = P.seed[a];\n  const yl = P.root[a] + 0.9 * noise2(age * 2.7, seed);\n  const yr = P.root[a] + 0.9 * noise2(age * 2.7, seed + 17);\n  const xl = CX - gapAt(P, yl) + 0.7;\n  const xr = CX + gapAt(P, yr) - 0.7;\n  P.ends[a * 4] = xl;\n  P.ends[a * 4 + 1] = yl;\n  P.ends[a * 4 + 2] = xr;\n  P.ends[a * 4 + 3] = yr;\n  const dx = xr - xl;\n  const dy = yr - yl;\n  const chord = Math.max(0.5, Math.hypot(dx, dy));\n  const tx = dx / chord;\n  const ty = dy / chord;\n  // The normal that points up the panel.\n  const nx = ty;\n  const ny = -tx;\n  const power = P.power;\n  let bow = chord * (0.1 + 0.05 * power) * (1 - Math.exp(-age / 0.3));\n  if (!live) bow += (1 - P.life[a]) * 4;\n  const amp = (0.4 + 0.09 * chord) * (0.6 + 0.25 * power);\n  const turb = P.turb[a];\n  const jit = 0.25 * (0.5 + 0.3 * power);\n  const n = Math.max(6, Math.min(PTS, Math.round(chord / 1.1) + 4));\n  P.pn[a] = n;\n  const o = a * PTS;\n  let len = 0;\n  let lx = 0;\n  let ly = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const s = i / (n - 1);\n    const e = Math.sin(Math.PI * s);\n    const bx = xl + dx * s;\n    const by = yl + dy * s;\n    const lift = bow * 4 * s * (1 - s);\n    const bend =\n      amp *\n      Math.pow(e, 0.7) *\n      (noise2(s * 2.6, turb + seed * 7.3) + 0.45 * noise2(s * 6.1 + 9, turb * 1.7 + seed) + 0.2 * noise2(s * 13 + 21, turb * 3.1 + seed));\n    const slide = 0.4 * amp * e * noise2(s * 2 + 40, turb * 0.8 + seed * 3.1);\n    const j = (Math.random() - 0.5) * 2 * jit * e;\n    let x = bx + nx * (lift + bend + j) + tx * slide;\n    const y = by + ny * (lift + bend + j) + ty * slide;\n    if (live) {\n      const g = gapAt(P, y) - 0.5;\n      if (x \u003c CX - g) x = CX - g;\n      else if (x > CX + g) x = CX + g;\n    }\n    P.px[o + i] = x;\n    P.py[o + i] = y;\n    if (i > 0) len += Math.hypot(x - lx, y - ly);\n    lx = x;\n    ly = y;\n  }\n  P.len[a] = len;\n}\n\nfunction throwEmber(P, x, y, side) {\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] > 0) continue;\n    P.ex[i] = x;\n    P.ey[i] = y;\n    P.evx[i] = side * (5 + 18 * Math.random());\n    P.evy[i] = -(8 + 26 * Math.random());\n    P.emax[i] = 0.7 + 0.9 * Math.random();\n    P.elife[i] = P.emax[i];\n    P.ebounce[i] = 0;\n    return;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.hue = k[0];\n  const power = Math.max(0.3, Math.min(3, k[1]));\n  P.power = power;\n  const spread = Math.max(0, Math.min(1, k[2]));\n  P.exposure = Math.max(0, Math.min(1, k[3]));\n  if (Math.abs(spread - P.spread) > 1e-4) build(P, spread);\n\n  P.t += dt;\n  P.dt = dt;\n  P.cool += dt;\n  P.flash *= Math.exp(-dt / 0.07);\n\n  const vmax = 25 + 32 * power;\n  const reach = 20 + 15 * power;\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] === 0) continue;\n    P.age[a] += dt;\n    const v = vmax * (0.25 + 0.75 * (1 - Math.exp(-P.age[a] / 0.22)));\n    if (P.alive[a] === 1) {\n      P.root[a] -= v * dt;\n      P.turb[a] += dt * (1.2 + 0.5 * power);\n    } else {\n      // Broken: what is left of the arc floats up off the tips and goes out.\n      P.root[a] -= v * 0.6 * dt;\n      P.turb[a] += dt * 0.8;\n      P.life[a] -= dt / 0.16;\n      if (P.life[a] \u003c= 0) {\n        P.alive[a] = 0;\n        continue;\n      }\n    }\n    shape(P, a);\n    if (P.alive[a] === 1 && (P.root[a] \u003c= TIP + 1 || P.len[a] > reach)) P.alive[a] = 2;\n  }\n\n  // The next arc strikes once the throat is clear for long enough. The\n  // throat also breaks down again while the last arc is still climbing: when\n  // that arc is high, which comes sooner the harder it is pushed, or when it\n  // has stretched long, which comes sooner in a wide V.\n  let live = 0;\n  let youngest = -1;\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] !== 1) continue;\n    live++;\n    if (youngest \u003c 0 || P.age[a] \u003c P.age[youngest]) youngest = a;\n  }\n  const rest = 0.05 + 0.25 / power;\n  const again = 0.95 - 0.25 * ((power - 0.3) / 2.7);\n  if (live === 0) {\n    if (P.cool > rest) strike(P);\n  } else if (live \u003c (power > 2.2 ? 3 : 2) && P.cool > 0.1) {\n    const climbed = (THROAT - P.root[youngest]) / (THROAT - TIP);\n    if (climbed > again || P.len[youngest] > 0.75 * reach) strike(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) strike(P);\n\n  // Hot metal leaves the roots as sparks, thrown off the rod and falling.\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] !== 1) continue;\n    const rate = 0.4 * power * power;\n    if (Math.random() \u003c rate * dt) throwEmber(P, P.ends[a * 4], P.ends[a * 4 + 1], -1);\n    if (Math.random() \u003c rate * dt) throwEmber(P, P.ends[a * 4 + 2], P.ends[a * 4 + 3], 1);\n  }\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] \u003c= 0) continue;\n    P.elife[i] -= dt;\n    P.evy[i] += 70 * dt;\n    P.ex[i] += P.evx[i] * dt;\n    P.ey[i] += P.evy[i] * dt;\n    if (P.ey[i] >= BOX - 0.5 && P.ex[i] > 3 && P.ex[i] \u003c W - 3) {\n      if (P.ebounce[i]) P.elife[i] = 0;\n      else {\n        P.ey[i] = BOX - 0.5;\n        P.evy[i] *= -0.3;\n        P.evx[i] *= 0.5;\n        P.ebounce[i] = 1;\n      }\n    }\n    if (P.ex[i] \u003c 0 || P.ex[i] >= W || P.ey[i] >= H) P.elife[i] = 0;\n  }\n}\n\n// Closest distance squared from every pixel near the segment, kept per pixel.\nfunction stampSegment(P, x0, y0, x1, y1, R, box) {\n  const dist = P.dist;\n  const minX = Math.max(0, Math.floor(Math.min(x0, x1) - R));\n  const maxX = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + R));\n  const minY = Math.max(0, Math.floor(Math.min(y0, y1) - R));\n  const maxY = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + R));\n  if (minX > maxX || minY > maxY) return;\n  if (minX \u003c box[0]) box[0] = minX;\n  if (maxX > box[1]) box[1] = maxX;\n  if (minY \u003c box[2]) box[2] = minY;\n  if (maxY > box[3]) box[3] = maxY;\n  const sx = x1 - x0;\n  const sy = y1 - y0;\n  const ll = sx * sx + sy * sy || 1e-6;\n  for (let py = minY; py \u003c= maxY; py++) {\n    const cy = py + 0.5 - y0;\n    for (let px = minX; px \u003c= maxX; px++) {\n      const cx = px + 0.5 - x0;\n      let u = (cx * sx + cy * sy) / ll;\n      if (u \u003c 0) u = 0;\n      else if (u > 1) u = 1;\n      const ex = cx - u * sx;\n      const ey = cy - u * sy;\n      const d = ex * ex + ey * ey;\n      const i = py * W + px;\n      if (d \u003c dist[i]) dist[i] = d;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const core = P.core;\n  const glow = P.glow;\n  const warm = P.warm;\n  const trail = P.trail;\n  const dist = P.dist;\n  const power = P.power;\n  const air = P.air;\n  core.fill(0);\n  glow.fill(0);\n  warm.fill(0);\n  air.fill(0);\n\n  // The hum: one beat bright, the rest of the cycle dimmer.\n  const beat = Math.pow(Math.abs(Math.sin(Math.PI * HUM * P.t)), 6);\n  const box = [W, -1, H, -1];\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] === 0) continue;\n    const live = P.alive[a] === 1;\n    const age = P.age[a];\n    const life = P.life[a];\n    let b = (0.62 + 0.13 * power) * (0.84 + 0.16 * Math.random()) * (0.82 + 0.18 * beat);\n    if (age \u003c 0.1) b *= 1 + 1.3 * (1 - age / 0.1);\n    if (!live) b *= life * life;\n    const lambda = 2.6 + 0.6 * power + (live ? 0 : (1 - life) * 3);\n    const sigma = (0.55 + 0.2 * power) * (live ? 1 : life * life + 0.05);\n    const R = Math.ceil(lambda * 3.4);\n    box[0] = W;\n    box[1] = -1;\n    box[2] = H;\n    box[3] = -1;\n    const o = a * PTS;\n    const n = P.pn[a];\n    for (let i = 0; i + 1 \u003c n; i++) stampSegment(P, P.px[o + i], P.py[o + i], P.px[o + i + 1], P.py[o + i + 1], R, box);\n    // The air: each grid point's distance to the nearest segment.\n    const reachAir = 7 + 1.5 * power;\n    for (let gy = 0; gy \u003c GH; gy++) {\n      const y = gy * CELL;\n      for (let gx = 0; gx \u003c GW; gx++) {\n        const x = gx * CELL;\n        let best = 1e9;\n        for (let i = 0; i + 1 \u003c n; i++) {\n          const x0 = P.px[o + i];\n          const y0 = P.py[o + i];\n          const sx = P.px[o + i + 1] - x0;\n          const sy = P.py[o + i + 1] - y0;\n          const cx = x - x0;\n          const cy = y - y0;\n          let u = (cx * sx + cy * sy) / (sx * sx + sy * sy || 1e-6);\n          if (u \u003c 0) u = 0;\n          else if (u > 1) u = 1;\n          const ex = cx - u * sx;\n          const ey = cy - u * sy;\n          const d = ex * ex + ey * ey;\n          if (d \u003c best) best = d;\n        }\n        // Near the arc the air glows; further off, the room is only tinted.\n        const d = Math.sqrt(best);\n        air[gy * GW + gx] += b * (0.3 * Math.exp(-d / reachAir) + 0.07 * Math.exp(-d / 26));\n      }\n    }\n    if (box[1] \u003c box[0]) continue;\n    const rr = R * R;\n    for (let py = box[2]; py \u003c= box[3]; py++) {\n      for (let px = box[0]; px \u003c= box[1]; px++) {\n        const i = py * W + px;\n        const d = dist[i];\n        if (d >= 1e8) continue;\n        dist[i] = 1e9;\n        if (d > rr) continue;\n        const c = d \u003c 8 * sigma ? b * Math.exp(-d / sigma) : 0;\n        const g = b * 0.7 * Math.exp(-Math.sqrt(d) / lambda);\n        if (c > core[i]) core[i] = c;\n        if (g > glow[i]) glow[i] = g;\n      }\n    }\n    if (!live) continue;\n    // The roots burn white on the rod.\n    for (let e = 0; e \u003c 2; e++) {\n      const x = P.ends[a * 4 + e * 2];\n      const y = P.ends[a * 4 + e * 2 + 1];\n      for (let py = Math.floor(y) - 3; py \u003c= Math.floor(y) + 3; py++) {\n        if (py \u003c 0 || py >= H) continue;\n        for (let px = Math.floor(x) - 3; px \u003c= Math.floor(x) + 3; px++) {\n          if (px \u003c 0 || px >= W) continue;\n          const dx = px + 0.5 - x;\n          const dy = py + 0.5 - y;\n          const w = b * 1.1 * Math.exp(-(dx * dx + dy * dy) / 1.4);\n          const i = py * W + px;\n          if (w > warm[i]) warm[i] = w;\n        }\n      }\n    }\n  }\n\n  // The trail: a camera left open keeps the bright beats and lets the rest go.\n  const tau = 0.035 * Math.exp(4.6 * P.exposure);\n  const keep = Math.exp(-P.dt / tau);\n  const lay = 0.2 + 0.8 * beat;\n  for (let i = 0; i \u003c N; i++) {\n    const v = Math.max(core[i] * 0.7, glow[i] * 1.3) * lay;\n    const t = trail[i] * keep;\n    trail[i] = v > t ? v : t;\n  }\n  // The glowing air is kept the same way, as a haze through the V.\n  const airTrail = P.airTrail;\n  for (let q = 0; q \u003c GW * GH; q++) {\n    const t = airTrail[q] * keep;\n    airTrail[q] = air[q] > t ? air[q] : t;\n    const h = airTrail[q] * 0.8;\n    if (h > air[q]) air[q] = h;\n  }\n\n  const col = P.col;\n  const hue = P.hue + 0.74;\n  hsv(hue, 0.78, 1, col, 0);\n  hsv(hue, 0.22, 1, col, 3);\n  hsv(hue + 0.02, 0.6, 0.9, col, 6);\n  const amb = 0.62 + 0.3 * P.flash;\n  // Steel and glaze take on the colour of the light that falls on them.\n  const tr = 0.45 + 0.55 * (col[0] / 255);\n  const tg = 0.45 + 0.55 * (col[1] / 255);\n  const tb = 0.45 + 0.55 * (col[2] / 255);\n  const st = P.stat;\n  const out = P.out;\n  for (let y = 0; y \u003c H; y++) {\n    const fy = (y + 0.5) / CELL;\n    const gy = Math.min(GH - 2, Math.floor(fy));\n    const vy = fy - gy;\n    for (let x = 0; x \u003c W; x++) {\n      const fx = (x + 0.5) / CELL;\n      const gx = Math.min(GW - 2, Math.floor(fx));\n      const vx = fx - gx;\n      const q = gy * GW + gx;\n      const top = air[q] + (air[q + 1] - air[q]) * vx;\n      const bottom = air[q + GW] + (air[q + GW + 1] - air[q + GW]) * vx;\n      const ai = top + (bottom - top) * vy;\n      const i = y * W + x;\n      const o = i * 3;\n      const g = Math.max(glow[i], trail[i] * 0.85);\n      const c = core[i];\n      const w = warm[i];\n      const lit = 1.6 * g + 2.2 * ai + 1.2 * w;\n      out[o] = st[o] * (amb + lit * tr) + c * col[3] + glow[i] * col[0] + (g - glow[i]) * col[6] + ai * col[0] + w * 255;\n      out[o + 1] = st[o + 1] * (amb + lit * tg) + c * col[4] + glow[i] * col[1] + (g - glow[i]) * col[7] + ai * col[1] + w * 196;\n      out[o + 2] = st[o + 2] * (amb + lit * tb) + c * col[5] + glow[i] * col[2] + (g - glow[i]) * col[8] + ai * col[2] + w * 130;\n    }\n  }\n  // The pilot lamp on the box, and the sparks: white-hot, cooling to red.\n  for (let py = BOX + 4; py \u003c= BOX + 5; py++) {\n    for (let px = 7; px \u003c= 8; px++) {\n      const o = (py * W + px) * 3;\n      out[o] = 236;\n      out[o + 1] = 120 + 40 * P.flash;\n      out[o + 2] = 36;\n    }\n  }\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] \u003c= 0) continue;\n    const u = P.elife[i] / P.emax[i];\n    const px = Math.floor(P.ex[i]);\n    const py = Math.floor(P.ey[i]);\n    if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n    const o = (py * W + px) * 3;\n    const v = 0.35 + 0.65 * u;\n    out[o] += 255 * v;\n    out[o + 1] += (60 + 170 * u * u) * v;\n    out[o + 2] += 90 * u * u * u * v;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[o]), Math.min(255, out[o + 1]), Math.min(255, out[o + 2]));\n    }\n  }\n}\n","layer":{"id":"layer-jacobs-ladder","type":"code","name":"jacobs-ladder","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Jacob's Ladder\n// Family:  light\n// Idea:    An arc strikes where two rods stand closest, rides its own hot air up the widening V until it is too long to hold, and breaks at the tips while the next one strikes below.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Jacob's ladder, the climbing-arc spark gap of high-voltage demonstrations\n// Round:   6\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Power=0.3..3, Spread=0..1, Exposure=0..1\n//\n// Knob 1: Hue. The colour of the gas the arc burns in, starting from the violet of an arc in air.\n// Knob 2: Power. How hard the transformer drives the arc: weak, it climbs slowly and breaks partway up; strong, it races to the tips, writhes, throws sparks and strikes again before the last one is gone.\n// Knob 3: Spread. How far apart the rod tips stand, from a narrow V to horns that flare out to the edges of the panel. In a wide V the arc stretches sooner, so the next one strikes sooner and a weak arc breaks lower down.\n// Knob 4: Exposure. How long the panel keeps each arc after it has moved on, like a camera left open; turned up, the arcs it leaves stack into the rungs of a ladder.\n// Buttons: K1 tap strikes a new arc now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 32;\n// Rows, top down: the rod tips, the throat where the rods come closest and\n// every arc strikes, the tops of the two insulators, the lid of the box.\nconst TIP = 8;\nconst THROAT = 94;\nconst POST = 104;\nconst BOX = 116;\n// Half the gap between the rods at the throat and where they leave the posts.\nconst THROAT_GAP = 2.2;\nconst POST_GAP = 9.5;\nconst ARCS = 3;\nconst PTS = 72;\nconst EMBERS = 48;\n// The arc throbs at this rate. A camera left open keeps the bright moments\n// and loses the dim ones, so the long exposure lays the arc down in rungs.\nconst HUM = 10;\n// The arc lights the air around it. That wide glow is worked out on a grid\n// of 4 LED cells and spread across the cells between.\nconst CELL = 4;\nconst GW = W / CELL + 1;\nconst GH = H / CELL + 1;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash2(i, j) {\n  let h = Math.imul(i, 374761393) + Math.imul(j, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth value noise, -1..1.\nfunction noise2(x, y) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash2(xi, yi);\n  const b = hash2(xi + 1, yi);\n  const c = hash2(xi, yi + 1);\n  const d = hash2(xi + 1, yi + 1);\n  return (a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v) * 2 - 1;\n}\n\n// Half the gap between the rods at row y, read from the table build() fills.\nfunction gapAt(P, y) {\n  if (y \u003c= TIP) return P.gap[TIP];\n  if (y >= POST) return POST_GAP;\n  const i = Math.floor(y);\n  const f = y - i;\n  return P.gap[i] + (P.gap[i + 1] - P.gap[i]) * f;\n}\n\n// The rods, the posts and the box, drawn once for a spread. Above the throat\n// the rods open from a straight V to horns: the wider the spread, the longer\n// they stay close before they flare.\nfunction build(P, spread) {\n  P.spread = spread;\n  const top = 15 + 16 * spread;\n  const bend = 1.1 + 0.6 * spread;\n  for (let y = 0; y \u003c= H; y++) {\n    if (y \u003c= THROAT) {\n      const u = Math.min(1, (THROAT - y) / (THROAT - TIP));\n      P.gap[y] = THROAT_GAP + (top - THROAT_GAP) * Math.pow(u, bend);\n    } else {\n      const t = Math.min(1, (y - THROAT) / (POST - THROAT));\n      P.gap[y] = THROAT_GAP + (POST_GAP - THROAT_GAP) * t * t;\n    }\n  }\n  const rod = P.rod;\n  rod.fill(0);\n  // Each rod is stamped every quarter row, so a pixel keeps how close the\n  // rod's centre line passed it: a one-LED wire, shared between two LEDs\n  // where it runs between them.\n  for (let y = TIP; y \u003c= POST; y += 0.25) {\n    const g = gapAt(P, y);\n    for (let side = -1; side \u003c= 1; side += 2) {\n      const x = CX + side * g;\n      const x0 = Math.floor(x) - 1;\n      const y0 = Math.floor(y) - 1;\n      for (let py = y0; py \u003c= y0 + 2; py++) {\n        if (py \u003c 0 || py >= H) continue;\n        for (let px = x0; px \u003c= x0 + 2; px++) {\n          if (px \u003c 0 || px >= W) continue;\n          const d = Math.hypot(px + 0.5 - x, py + 0.5 - y);\n          const c = Math.min(1, Math.max(0, 1.05 - d));\n          const i = py * W + px;\n          if (c > rod[i]) rod[i] = c;\n        }\n      }\n    }\n  }\n  // A round knob on each tip.\n  for (let side = -1; side \u003c= 1; side += 2) {\n    const x = CX + side * P.gap[TIP];\n    for (let py = TIP - 3; py \u003c= TIP + 1; py++) {\n      for (let px = Math.floor(x) - 2; px \u003c= Math.floor(x) + 2; px++) {\n        if (px \u003c 0 || px >= W) continue;\n        const d = Math.hypot(px + 0.5 - x, py + 0.5 - (TIP - 0.6));\n        const c = Math.min(1, Math.max(0, 1.7 - d));\n        const i = py * W + px;\n        if (c > rod[i]) rod[i] = c;\n      }\n    }\n  }\n\n  const st = P.stat;\n  st.fill(0);\n  for (let i = 0; i \u003c N; i++) {\n    const c = rod[i];\n    if (c \u003c= 0) continue;\n    const x = i % W;\n    // Steel, a touch lighter on the face toward the middle.\n    const face = x \u003c CX ? 1.08 : 0.94;\n    st[i * 3] = 98 * c * face;\n    st[i * 3 + 1] = 102 * c * face;\n    st[i * 3 + 2] = 116 * c * face;\n  }\n  // Two glazed posts with sheds, lit from the left.\n  for (let y = POST; y \u003c BOX; y++) {\n    const wide = (y - POST) % 3 !== 2;\n    const half = wide ? 3 : 2;\n    for (let side = -1; side \u003c= 1; side += 2) {\n      const cx = CX + side * POST_GAP;\n      for (let x = Math.floor(cx - half); x \u003c Math.ceil(cx + half); x++) {\n        const u = (x + 0.5 - (cx - half)) / (2 * half);\n        const shade = (wide ? 1 : 0.68) * (1.15 - 0.6 * u);\n        const o = (y * W + x) * 3;\n        st[o] = 176 * shade;\n        st[o + 1] = 166 * shade;\n        st[o + 2] = 148 * shade;\n      }\n    }\n  }\n  // The transformer box: a light lid, a dark body with vent slots.\n  for (let y = BOX; y \u003c H; y++) {\n    for (let x = 3; x \u003c W - 3; x++) {\n      if (y === BOX && (x === 3 || x === W - 4)) continue;\n      const o = (y * W + x) * 3;\n      let r = 54;\n      let g = 52;\n      let b = 60;\n      if (y === BOX) {\n        r = 104;\n        g = 102;\n        b = 112;\n      } else if (y === BOX + 1) {\n        r = 70;\n        g = 68;\n        b = 76;\n      } else if (y >= BOX + 4 && y \u003c= BOX + 9 && (y - BOX) % 2 === 0 && x >= 16 && x \u003c W - 16) {\n        r = 18;\n        g = 18;\n        b = 21;\n      }\n      st[o] = r;\n      st[o + 1] = g;\n      st[o + 2] = b;\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.gap = new Float32Array(H + 1);\n  P.rod = new Float32Array(N);\n  P.stat = new Float32Array(N * 3);\n  P.spread = -1;\n  P.alive = new Uint8Array(ARCS);\n  P.age = new Float32Array(ARCS);\n  P.root = new Float32Array(ARCS);\n  P.life = new Float32Array(ARCS);\n  P.seed = new Float32Array(ARCS);\n  P.turb = new Float32Array(ARCS);\n  P.len = new Float32Array(ARCS);\n  P.ends = new Float32Array(ARCS * 4);\n  P.px = new Float32Array(ARCS * PTS);\n  P.py = new Float32Array(ARCS * PTS);\n  P.pn = new Uint8Array(ARCS);\n  P.ex = new Float32Array(EMBERS);\n  P.ey = new Float32Array(EMBERS);\n  P.evx = new Float32Array(EMBERS);\n  P.evy = new Float32Array(EMBERS);\n  P.elife = new Float32Array(EMBERS);\n  P.emax = new Float32Array(EMBERS);\n  P.ebounce = new Uint8Array(EMBERS);\n  P.core = new Float32Array(N);\n  P.glow = new Float32Array(N);\n  P.trail = new Float32Array(N);\n  P.warm = new Float32Array(N);\n  P.dist = new Float32Array(N).fill(1e9);\n  P.air = new Float32Array(GW * GH);\n  P.airTrail = new Float32Array(GW * GH);\n  P.out = new Float32Array(N * 3);\n  P.col = new Float32Array(12);\n  P.t = 0;\n  P.dt = 1 / 30;\n  P.flash = 0;\n  P.cool = 0;\n  P.power = 2;\n  P.hue = 0;\n  P.exposure = 0.06;\n}\n\nfunction strike(P) {\n  let a = -1;\n  for (let i = 0; i \u003c ARCS; i++) if (P.alive[i] === 0) a = i;\n  if (a \u003c 0) {\n    // Every slot is busy: the oldest arc gives way.\n    a = 0;\n    for (let i = 1; i \u003c ARCS; i++) if (P.age[i] > P.age[a]) a = i;\n  }\n  P.alive[a] = 1;\n  P.age[a] = 0;\n  P.root[a] = THROAT - 0.3 + (Math.random() - 0.5) * 1.2;\n  P.life[a] = 1;\n  P.seed[a] = Math.floor(Math.random() * 997);\n  P.turb[a] = 0;\n  P.len[a] = 0;\n  P.flash = 1;\n  P.cool = 0;\n}\n\n// The arc's points for this frame: a chord between the two roots, bowed up\n// in the middle, where hot air rises fastest, and bent by turbulence that\n// grows with the arc's length. The roots sit on the inner face of each rod.\nfunction shape(P, a) {\n  const age = P.age[a];\n  const live = P.alive[a] === 1;\n  const seed = P.seed[a];\n  const yl = P.root[a] + 0.9 * noise2(age * 2.7, seed);\n  const yr = P.root[a] + 0.9 * noise2(age * 2.7, seed + 17);\n  const xl = CX - gapAt(P, yl) + 0.7;\n  const xr = CX + gapAt(P, yr) - 0.7;\n  P.ends[a * 4] = xl;\n  P.ends[a * 4 + 1] = yl;\n  P.ends[a * 4 + 2] = xr;\n  P.ends[a * 4 + 3] = yr;\n  const dx = xr - xl;\n  const dy = yr - yl;\n  const chord = Math.max(0.5, Math.hypot(dx, dy));\n  const tx = dx / chord;\n  const ty = dy / chord;\n  // The normal that points up the panel.\n  const nx = ty;\n  const ny = -tx;\n  const power = P.power;\n  let bow = chord * (0.1 + 0.05 * power) * (1 - Math.exp(-age / 0.3));\n  if (!live) bow += (1 - P.life[a]) * 4;\n  const amp = (0.4 + 0.09 * chord) * (0.6 + 0.25 * power);\n  const turb = P.turb[a];\n  const jit = 0.25 * (0.5 + 0.3 * power);\n  const n = Math.max(6, Math.min(PTS, Math.round(chord / 1.1) + 4));\n  P.pn[a] = n;\n  const o = a * PTS;\n  let len = 0;\n  let lx = 0;\n  let ly = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const s = i / (n - 1);\n    const e = Math.sin(Math.PI * s);\n    const bx = xl + dx * s;\n    const by = yl + dy * s;\n    const lift = bow * 4 * s * (1 - s);\n    const bend =\n      amp *\n      Math.pow(e, 0.7) *\n      (noise2(s * 2.6, turb + seed * 7.3) + 0.45 * noise2(s * 6.1 + 9, turb * 1.7 + seed) + 0.2 * noise2(s * 13 + 21, turb * 3.1 + seed));\n    const slide = 0.4 * amp * e * noise2(s * 2 + 40, turb * 0.8 + seed * 3.1);\n    const j = (Math.random() - 0.5) * 2 * jit * e;\n    let x = bx + nx * (lift + bend + j) + tx * slide;\n    const y = by + ny * (lift + bend + j) + ty * slide;\n    if (live) {\n      const g = gapAt(P, y) - 0.5;\n      if (x \u003c CX - g) x = CX - g;\n      else if (x > CX + g) x = CX + g;\n    }\n    P.px[o + i] = x;\n    P.py[o + i] = y;\n    if (i > 0) len += Math.hypot(x - lx, y - ly);\n    lx = x;\n    ly = y;\n  }\n  P.len[a] = len;\n}\n\nfunction throwEmber(P, x, y, side) {\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] > 0) continue;\n    P.ex[i] = x;\n    P.ey[i] = y;\n    P.evx[i] = side * (5 + 18 * Math.random());\n    P.evy[i] = -(8 + 26 * Math.random());\n    P.emax[i] = 0.7 + 0.9 * Math.random();\n    P.elife[i] = P.emax[i];\n    P.ebounce[i] = 0;\n    return;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  P.hue = k[0];\n  const power = Math.max(0.3, Math.min(3, k[1]));\n  P.power = power;\n  const spread = Math.max(0, Math.min(1, k[2]));\n  P.exposure = Math.max(0, Math.min(1, k[3]));\n  if (Math.abs(spread - P.spread) > 1e-4) build(P, spread);\n\n  P.t += dt;\n  P.dt = dt;\n  P.cool += dt;\n  P.flash *= Math.exp(-dt / 0.07);\n\n  const vmax = 25 + 32 * power;\n  const reach = 20 + 15 * power;\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] === 0) continue;\n    P.age[a] += dt;\n    const v = vmax * (0.25 + 0.75 * (1 - Math.exp(-P.age[a] / 0.22)));\n    if (P.alive[a] === 1) {\n      P.root[a] -= v * dt;\n      P.turb[a] += dt * (1.2 + 0.5 * power);\n    } else {\n      // Broken: what is left of the arc floats up off the tips and goes out.\n      P.root[a] -= v * 0.6 * dt;\n      P.turb[a] += dt * 0.8;\n      P.life[a] -= dt / 0.16;\n      if (P.life[a] \u003c= 0) {\n        P.alive[a] = 0;\n        continue;\n      }\n    }\n    shape(P, a);\n    if (P.alive[a] === 1 && (P.root[a] \u003c= TIP + 1 || P.len[a] > reach)) P.alive[a] = 2;\n  }\n\n  // The next arc strikes once the throat is clear for long enough. The\n  // throat also breaks down again while the last arc is still climbing: when\n  // that arc is high, which comes sooner the harder it is pushed, or when it\n  // has stretched long, which comes sooner in a wide V.\n  let live = 0;\n  let youngest = -1;\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] !== 1) continue;\n    live++;\n    if (youngest \u003c 0 || P.age[a] \u003c P.age[youngest]) youngest = a;\n  }\n  const rest = 0.05 + 0.25 / power;\n  const again = 0.95 - 0.25 * ((power - 0.3) / 2.7);\n  if (live === 0) {\n    if (P.cool > rest) strike(P);\n  } else if (live \u003c (power > 2.2 ? 3 : 2) && P.cool > 0.1) {\n    const climbed = (THROAT - P.root[youngest]) / (THROAT - TIP);\n    if (climbed > again || P.len[youngest] > 0.75 * reach) strike(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) strike(P);\n\n  // Hot metal leaves the roots as sparks, thrown off the rod and falling.\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] !== 1) continue;\n    const rate = 0.4 * power * power;\n    if (Math.random() \u003c rate * dt) throwEmber(P, P.ends[a * 4], P.ends[a * 4 + 1], -1);\n    if (Math.random() \u003c rate * dt) throwEmber(P, P.ends[a * 4 + 2], P.ends[a * 4 + 3], 1);\n  }\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] \u003c= 0) continue;\n    P.elife[i] -= dt;\n    P.evy[i] += 70 * dt;\n    P.ex[i] += P.evx[i] * dt;\n    P.ey[i] += P.evy[i] * dt;\n    if (P.ey[i] >= BOX - 0.5 && P.ex[i] > 3 && P.ex[i] \u003c W - 3) {\n      if (P.ebounce[i]) P.elife[i] = 0;\n      else {\n        P.ey[i] = BOX - 0.5;\n        P.evy[i] *= -0.3;\n        P.evx[i] *= 0.5;\n        P.ebounce[i] = 1;\n      }\n    }\n    if (P.ex[i] \u003c 0 || P.ex[i] >= W || P.ey[i] >= H) P.elife[i] = 0;\n  }\n}\n\n// Closest distance squared from every pixel near the segment, kept per pixel.\nfunction stampSegment(P, x0, y0, x1, y1, R, box) {\n  const dist = P.dist;\n  const minX = Math.max(0, Math.floor(Math.min(x0, x1) - R));\n  const maxX = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + R));\n  const minY = Math.max(0, Math.floor(Math.min(y0, y1) - R));\n  const maxY = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + R));\n  if (minX > maxX || minY > maxY) return;\n  if (minX \u003c box[0]) box[0] = minX;\n  if (maxX > box[1]) box[1] = maxX;\n  if (minY \u003c box[2]) box[2] = minY;\n  if (maxY > box[3]) box[3] = maxY;\n  const sx = x1 - x0;\n  const sy = y1 - y0;\n  const ll = sx * sx + sy * sy || 1e-6;\n  for (let py = minY; py \u003c= maxY; py++) {\n    const cy = py + 0.5 - y0;\n    for (let px = minX; px \u003c= maxX; px++) {\n      const cx = px + 0.5 - x0;\n      let u = (cx * sx + cy * sy) / ll;\n      if (u \u003c 0) u = 0;\n      else if (u > 1) u = 1;\n      const ex = cx - u * sx;\n      const ey = cy - u * sy;\n      const d = ex * ex + ey * ey;\n      const i = py * W + px;\n      if (d \u003c dist[i]) dist[i] = d;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const core = P.core;\n  const glow = P.glow;\n  const warm = P.warm;\n  const trail = P.trail;\n  const dist = P.dist;\n  const power = P.power;\n  const air = P.air;\n  core.fill(0);\n  glow.fill(0);\n  warm.fill(0);\n  air.fill(0);\n\n  // The hum: one beat bright, the rest of the cycle dimmer.\n  const beat = Math.pow(Math.abs(Math.sin(Math.PI * HUM * P.t)), 6);\n  const box = [W, -1, H, -1];\n  for (let a = 0; a \u003c ARCS; a++) {\n    if (P.alive[a] === 0) continue;\n    const live = P.alive[a] === 1;\n    const age = P.age[a];\n    const life = P.life[a];\n    let b = (0.62 + 0.13 * power) * (0.84 + 0.16 * Math.random()) * (0.82 + 0.18 * beat);\n    if (age \u003c 0.1) b *= 1 + 1.3 * (1 - age / 0.1);\n    if (!live) b *= life * life;\n    const lambda = 2.6 + 0.6 * power + (live ? 0 : (1 - life) * 3);\n    const sigma = (0.55 + 0.2 * power) * (live ? 1 : life * life + 0.05);\n    const R = Math.ceil(lambda * 3.4);\n    box[0] = W;\n    box[1] = -1;\n    box[2] = H;\n    box[3] = -1;\n    const o = a * PTS;\n    const n = P.pn[a];\n    for (let i = 0; i + 1 \u003c n; i++) stampSegment(P, P.px[o + i], P.py[o + i], P.px[o + i + 1], P.py[o + i + 1], R, box);\n    // The air: each grid point's distance to the nearest segment.\n    const reachAir = 7 + 1.5 * power;\n    for (let gy = 0; gy \u003c GH; gy++) {\n      const y = gy * CELL;\n      for (let gx = 0; gx \u003c GW; gx++) {\n        const x = gx * CELL;\n        let best = 1e9;\n        for (let i = 0; i + 1 \u003c n; i++) {\n          const x0 = P.px[o + i];\n          const y0 = P.py[o + i];\n          const sx = P.px[o + i + 1] - x0;\n          const sy = P.py[o + i + 1] - y0;\n          const cx = x - x0;\n          const cy = y - y0;\n          let u = (cx * sx + cy * sy) / (sx * sx + sy * sy || 1e-6);\n          if (u \u003c 0) u = 0;\n          else if (u > 1) u = 1;\n          const ex = cx - u * sx;\n          const ey = cy - u * sy;\n          const d = ex * ex + ey * ey;\n          if (d \u003c best) best = d;\n        }\n        // Near the arc the air glows; further off, the room is only tinted.\n        const d = Math.sqrt(best);\n        air[gy * GW + gx] += b * (0.3 * Math.exp(-d / reachAir) + 0.07 * Math.exp(-d / 26));\n      }\n    }\n    if (box[1] \u003c box[0]) continue;\n    const rr = R * R;\n    for (let py = box[2]; py \u003c= box[3]; py++) {\n      for (let px = box[0]; px \u003c= box[1]; px++) {\n        const i = py * W + px;\n        const d = dist[i];\n        if (d >= 1e8) continue;\n        dist[i] = 1e9;\n        if (d > rr) continue;\n        const c = d \u003c 8 * sigma ? b * Math.exp(-d / sigma) : 0;\n        const g = b * 0.7 * Math.exp(-Math.sqrt(d) / lambda);\n        if (c > core[i]) core[i] = c;\n        if (g > glow[i]) glow[i] = g;\n      }\n    }\n    if (!live) continue;\n    // The roots burn white on the rod.\n    for (let e = 0; e \u003c 2; e++) {\n      const x = P.ends[a * 4 + e * 2];\n      const y = P.ends[a * 4 + e * 2 + 1];\n      for (let py = Math.floor(y) - 3; py \u003c= Math.floor(y) + 3; py++) {\n        if (py \u003c 0 || py >= H) continue;\n        for (let px = Math.floor(x) - 3; px \u003c= Math.floor(x) + 3; px++) {\n          if (px \u003c 0 || px >= W) continue;\n          const dx = px + 0.5 - x;\n          const dy = py + 0.5 - y;\n          const w = b * 1.1 * Math.exp(-(dx * dx + dy * dy) / 1.4);\n          const i = py * W + px;\n          if (w > warm[i]) warm[i] = w;\n        }\n      }\n    }\n  }\n\n  // The trail: a camera left open keeps the bright beats and lets the rest go.\n  const tau = 0.035 * Math.exp(4.6 * P.exposure);\n  const keep = Math.exp(-P.dt / tau);\n  const lay = 0.2 + 0.8 * beat;\n  for (let i = 0; i \u003c N; i++) {\n    const v = Math.max(core[i] * 0.7, glow[i] * 1.3) * lay;\n    const t = trail[i] * keep;\n    trail[i] = v > t ? v : t;\n  }\n  // The glowing air is kept the same way, as a haze through the V.\n  const airTrail = P.airTrail;\n  for (let q = 0; q \u003c GW * GH; q++) {\n    const t = airTrail[q] * keep;\n    airTrail[q] = air[q] > t ? air[q] : t;\n    const h = airTrail[q] * 0.8;\n    if (h > air[q]) air[q] = h;\n  }\n\n  const col = P.col;\n  const hue = P.hue + 0.74;\n  hsv(hue, 0.78, 1, col, 0);\n  hsv(hue, 0.22, 1, col, 3);\n  hsv(hue + 0.02, 0.6, 0.9, col, 6);\n  const amb = 0.62 + 0.3 * P.flash;\n  // Steel and glaze take on the colour of the light that falls on them.\n  const tr = 0.45 + 0.55 * (col[0] / 255);\n  const tg = 0.45 + 0.55 * (col[1] / 255);\n  const tb = 0.45 + 0.55 * (col[2] / 255);\n  const st = P.stat;\n  const out = P.out;\n  for (let y = 0; y \u003c H; y++) {\n    const fy = (y + 0.5) / CELL;\n    const gy = Math.min(GH - 2, Math.floor(fy));\n    const vy = fy - gy;\n    for (let x = 0; x \u003c W; x++) {\n      const fx = (x + 0.5) / CELL;\n      const gx = Math.min(GW - 2, Math.floor(fx));\n      const vx = fx - gx;\n      const q = gy * GW + gx;\n      const top = air[q] + (air[q + 1] - air[q]) * vx;\n      const bottom = air[q + GW] + (air[q + GW + 1] - air[q + GW]) * vx;\n      const ai = top + (bottom - top) * vy;\n      const i = y * W + x;\n      const o = i * 3;\n      const g = Math.max(glow[i], trail[i] * 0.85);\n      const c = core[i];\n      const w = warm[i];\n      const lit = 1.6 * g + 2.2 * ai + 1.2 * w;\n      out[o] = st[o] * (amb + lit * tr) + c * col[3] + glow[i] * col[0] + (g - glow[i]) * col[6] + ai * col[0] + w * 255;\n      out[o + 1] = st[o + 1] * (amb + lit * tg) + c * col[4] + glow[i] * col[1] + (g - glow[i]) * col[7] + ai * col[1] + w * 196;\n      out[o + 2] = st[o + 2] * (amb + lit * tb) + c * col[5] + glow[i] * col[2] + (g - glow[i]) * col[8] + ai * col[2] + w * 130;\n    }\n  }\n  // The pilot lamp on the box, and the sparks: white-hot, cooling to red.\n  for (let py = BOX + 4; py \u003c= BOX + 5; py++) {\n    for (let px = 7; px \u003c= 8; px++) {\n      const o = (py * W + px) * 3;\n      out[o] = 236;\n      out[o + 1] = 120 + 40 * P.flash;\n      out[o + 2] = 36;\n    }\n  }\n  for (let i = 0; i \u003c EMBERS; i++) {\n    if (P.elife[i] \u003c= 0) continue;\n    const u = P.elife[i] / P.emax[i];\n    const px = Math.floor(P.ex[i]);\n    const py = Math.floor(P.ey[i]);\n    if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n    const o = (py * W + px) * 3;\n    const v = 0.35 + 0.65 * u;\n    out[o] += 255 * v;\n    out[o + 1] += (60 + 170 * u * u) * v;\n    out[o + 2] += 90 * u * u * u * v;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, out[o]), Math.min(255, out[o + 1]), Math.min(255, out[o + 2]));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Power=0.3..3, Spread=0..1, Exposure=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the gas the arc burns in, starting from the violet of an arc in air."},{"name":"Power","min":0.3,"max":3,"about":"How hard the transformer drives the arc: weak, it climbs slowly and breaks partway up; strong, it races to the tips, writhes, throws sparks and strikes again before the last one is gone."},{"name":"Spread","min":0,"max":1,"about":"How far apart the rod tips stand, from a narrow V to horns that flare out to the edges of the panel. In a wide V the arc stretches sooner, so the next one strikes sooner and a weak arc breaks lower down."},{"name":"Exposure","min":0,"max":1,"about":"How long the panel keeps each arc after it has moved on, like a camera left open; turned up, the arcs it leaves stack into the rungs of a ladder."}],"start":[0,2,0,0.06],"measures":{"motion":0.8103,"detail":0.0208,"edges":0.2771,"complexity":0.702,"coverage":0.2778,"colour":0.0843,"drift":0.105},"knobResponse":[0.0479,0.0767,0.0696,0.0781]},{"slug":"jacquard","title":"Jacquard Loom","family":"textile","round":4,"note":"구멍 뚫린 카드가 한 장씩 내려와 날실을 들어 올리면 북이 씨실을 끌고 지나가고, 바디가 그 씨실을 쳐 넣어요. 아래로 짜여 내려가는 천에 카드 구멍이 적어 둔 다이아몬드가 서요.","idea":"A punched-card loom weaving down the panel: each card lifts its warp ends, the shuttle flies the weft through the shed, the reed beats it in, and the cloth below carries the figure the holes spelled.","buttons":"K1 tap turns the deck over, so the next picks weave the back of the cloth, figure and ground traded.","code":"// ===== Patternflow pattern =====\n// Title:   Jacquard Loom\n// Family:  textile\n// Idea:    A punched-card loom weaving down the panel: each card lifts its warp ends, the shuttle flies the weft through the shed, the reed beats it in, and the cloth below carries the figure the holes spelled.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Joseph Marie Jacquard's punched-card loom (1804)\n// Round:   4\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..5, Card=1..4, Stripes=0..1\n//\n// Knob 1: Hue. Turns every thread's colour together, starting from an indigo warp over a weft that runs gold, orange, rose, violet, turquoise and green.\n// Knob 2: Speed. Picks a second, from half a pick, where the shuttle drifts across, to five, where it is a streak.\n// Knob 3: Card. The deck laced on the loom: nested diamonds, eight-pointed stars, chevrons, then a houndstooth that no card draws, only a twill over four ends and four picks of each of two colours. The cards change at once; the cloth changes from the fell down.\n// Knob 4: Stripes. How often the shuttle changes colour: broad bands every ten picks at the bottom of the range, a new colour every pick at the top. The houndstooth keeps its four indigo and four cream picks.\n// Buttons: K1 tap turns the deck over, so the next picks weave the back of the cloth, figure and ground traded.\n\nconst W = 64;\nconst H = 128;\n// Thirty-two warp ends, two LEDs each. A pick of weft is two rows.\nconst ENDS = 32;\n// Five punched cards of four rows above the griffe bar.\nconst CARD = 4;\nconst CARDS = 5;\nconst BAR = CARD * CARDS;\n// The heddle eyes: a lifted end's eye rides RISE rows above a lowered one's.\nconst EYE = 30;\nconst RISE = 3;\n// The reed rests at REED and beats each pick down against the fell.\nconst REED = 34;\nconst FELL = 48;\n// Picks kept: the cloth shows 41 of them, the cards one more.\nconst KEEP = 44;\n// The weft's colours go up the row and back, so bands grade into each other.\nconst SEQ = [0, 1, 2, 3, 4, 5, 4, 3, 2, 1];\nconst INDIGO = 6;\nconst CREAM = 7;\n\n// Times within one pick, 0..1: the cards drop and the shed opens, the\n// shuttle flies, the reed beats, the cloth is taken up.\nconst SHED = 0.12;\nconst FLOWN = 0.55;\nconst BEAT = 0.75;\nconst BACK = 0.95;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Where the figure is, on the pattern's grid of ends and picks.\nfunction figure(design, w, j) {\n  if (design === 0) {\n    // Nested diamonds, four ends to a ring, one diamond the width of the cloth.\n    const x = Math.abs(w - 15.5);\n    const y = Math.abs((j % 32) - 15.5);\n    return Math.floor((x + y) / 4) % 2 === 0;\n  }\n  if (design === 1) {\n    // An eight-pointed star the width of the cloth, a square and a diamond\n    // laid on each other, with a diamond cut from its middle.\n    const dx = Math.abs(w - 15.5);\n    const dy = Math.abs((j % 32) - 15.5);\n    return ((Math.max(dx, dy) \u003c 8 || dx + dy \u003c 14) && dx + dy > 4) || dx + dy > 25;\n  }\n  // Chevrons six picks deep.\n  const tx = w % 16;\n  const z = tx \u003c 8 ? tx : 15 - tx;\n  return (j + z) % 12 \u003c 6;\n}\n\n// Is end w over the weft on pick j? The figure is a warp-faced satin and\n// the ground a weft-faced one, each tied down once in eight.\nfunction liftOf(design, flip, w, j) {\n  let up;\n  if (design === 3) up = (w + j) % 4 \u003c 2;\n  else if (figure(design, w, j)) up = (j + 3 * w) % 8 !== 0;\n  else up = (j + 5 * w) % 8 === 0;\n  return flip ? !up : up;\n}\n\n// Houndstooth is four ends and four picks of each colour, and only reads\n// when the light warp and the light weft are the same cream.\nfunction warpOf(design, w) {\n  if (design === 3) return Math.floor(w / 4) % 2 === 0 ? INDIGO : CREAM;\n  // Cream selvedges.\n  return w === 0 || w === ENDS - 1 ? CREAM : INDIGO;\n}\n\nfunction weftOf(design, j, band) {\n  if (design === 3) return Math.floor(j / 4) % 2 === 0 ? INDIGO : CREAM;\n  return SEQ[Math.floor(j / band) % SEQ.length];\n}\n\nexport function setup(params) {\n  params.lift = new Uint8Array(KEEP * ENDS);\n  params.weft = new Uint8Array(KEEP);\n  params.deck = new Uint8Array(KEEP);\n  params.pal = new Float32Array(8 * 3);\n  params.pick = 0;\n  params.phase = 0;\n  params.started = false;\n  params.flip = false;\n  params.design = 0;\n  params.band = 9;\n  params.speed = 2;\n  params.hue = 0;\n}\n\n// The card for pick q comes to the needles: its holes become the shed.\nfunction startPick(params, q) {\n  const slot = q % KEEP;\n  for (let w = 0; w \u003c ENDS; w++) params.lift[slot * ENDS + w] = liftOf(params.design, params.flip, w, q) ? 1 : 0;\n  params.weft[slot] = weftOf(params.design, q, params.band);\n  params.deck[slot] = params.design;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.speed = Math.max(0.1, k[1]);\n  params.design = Math.max(0, Math.min(3, Math.round(k[2]) - 1));\n  params.band = Math.max(1, Math.round(1 + 9 * (1 - Math.max(0, Math.min(1, k[3])))));\n  if (!params.started) {\n    params.started = true;\n    // A loom that has been weaving a while: the cloth already reaches the floor.\n    for (let q = 0; q \u003c= KEEP; q++) startPick(params, q);\n    params.pick = KEEP;\n    params.phase = 0.3;\n  }\n  if (input.btnPressed && input.btnPressed[0]) params.flip = !params.flip;\n  params.phase += dt * params.speed;\n  while (params.phase >= 1) {\n    params.phase -= 1;\n    params.pick++;\n    startPick(params, params.pick);\n  }\n}\n\n// Is end w up on pick q, for a pick the loom has read or is about to?\nfunction cardLift(params, q, w) {\n  if (q \u003c= params.pick) return params.lift[(q % KEEP) * ENDS + w] === 1;\n  return liftOf(params.design, params.flip, w, q);\n}\n\nexport function draw(display, params, time) {\n  const pal = params.pal;\n  const hue = params.hue;\n  // The weft's gold, orange, rose, violet, turquoise and green, then the warp's indigo and cream.\n  hsvInto(pal, 0, hue + 0.12, 0.95, 1);\n  hsvInto(pal, 3, hue + 0.06, 0.95, 1);\n  hsvInto(pal, 6, hue + 0.96, 0.85, 1);\n  hsvInto(pal, 9, hue + 0.8, 0.75, 1);\n  hsvInto(pal, 12, hue + 0.48, 0.95, 1);\n  hsvInto(pal, 15, hue + 0.3, 0.9, 0.95);\n  // The warp is lit brighter and paler where the hue turns it yellow, since dim yellow reads as olive.\n  const warm = Math.pow(0.5 + 0.5 * Math.cos(2 * Math.PI * (hue + 0.63 - 0.14)), 3);\n  hsvInto(pal, 18, hue + 0.63, 0.9 - 0.2 * warm, 0.8 + 0.2 * warm);\n  hsvInto(pal, 21, hue + 0.11, 0.16, 0.95);\n\n  const lift = params.lift;\n  const weft = params.weft;\n  const deck = params.deck;\n  const pick = params.pick;\n  const phase = params.phase;\n  const set = (x, y, r, g, b) => display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n\n  // The punched cards, dropping one card a pick onto the needles.\n  const drop = Math.round(smooth(0, SHED, phase) * CARD);\n  for (let y = 0; y \u003c BAR; y++) for (let x = 0; x \u003c W; x++) set(x, y, 10, 9, 8);\n  for (let c = -1; c \u003c= CARDS; c++) {\n    const q = pick + c;\n    const top = BAR - CARD * (c + 1) - (CARD - drop);\n    for (let r = 0; r \u003c CARD; r++) {\n      const y = top + r;\n      if (y \u003c 0 || y >= BAR) continue;\n      for (let x = 0; x \u003c W; x++) {\n        if (r === 3) {\n          // The lacing between cards.\n          if (x === 4 || x === 59) set(x, y, 120, 100, 70);\n          continue;\n        }\n        const shade = r === 0 ? 0.8 : 1;\n        if (r > 0 && x % 2 === 0 && cardLift(params, q, x >> 1)) set(x, y, 12, 10, 8);\n        else set(x, y, 228 * shade, 204 * shade, 156 * shade);\n      }\n    }\n  }\n  // The griffe bar the hooks hang from.\n  for (let x = 0; x \u003c W; x++) {\n    set(x, BAR, 150, 152, 162);\n    set(x, BAR + 1, 64, 66, 76);\n  }\n\n  // The shed: cords down to the heddle eyes, then each end on to the fell.\n  const shedPick = phase \u003c SHED ? pick - 1 : pick;\n  const shedSlot = (shedPick % KEEP) * ENDS;\n  const woven = phase >= BEAT ? pick : pick - 1;\n  const take = phase >= BEAT ? (phase \u003c 0.82 ? 0 : phase \u003c 0.88 ? 1 : 2) : 2;\n  const clothTop = FELL - 2 + take;\n  for (let y = BAR + 2; y \u003c clothTop; y++) for (let x = 0; x \u003c W; x++) set(x, y, 8, 8, 10);\n  for (let w = 0; w \u003c ENDS; w++) {\n    const up = lift[shedSlot + w] === 1;\n    const eye = up ? EYE - RISE : EYE;\n    const c = warpOf(deck[shedPick % KEEP], w) * 3;\n    const x = 2 * w;\n    for (let y = BAR + 2; y \u003c clothTop; y++) {\n      if (y \u003c eye) {\n        const v = up ? 92 : 52;\n        set(x, y, v, v, v + 6);\n      } else if (y === eye) set(x, y, 214, 214, 224);\n      else {\n        const v = up ? 1 : 0.5;\n        set(x, y, pal[c] * v, pal[c + 1] * v, pal[c + 2] * v);\n      }\n    }\n  }\n\n  // The reed swings in after the shuttle and back.\n  let swing = 0;\n  if (phase >= FLOWN && phase \u003c BEAT) {\n    const u = (phase - FLOWN) / (BEAT - FLOWN);\n    swing = u * u;\n  } else if (phase >= BEAT && phase \u003c BACK) swing = 1 - smooth(BEAT, BACK, phase);\n  const reedY = Math.round(REED + (FELL - 4 - REED) * swing);\n  const pickY = phase \u003c BEAT ? reedY + 2 : FELL - 2;\n\n  // The weft the shuttle has laid so far, under every lifted end.\n  if (phase >= SHED && phase \u003c BEAT) {\n    const dir = pick % 2 === 0 ? 1 : -1;\n    const u = smooth(SHED, FLOWN, phase);\n    const sx = dir > 0 ? -6 + 76 * u : 69 - 76 * u;\n    const from = dir > 0 ? 0 : Math.max(0, Math.round(sx));\n    const to = dir > 0 ? Math.min(W - 1, Math.round(sx)) : W - 1;\n    const wc = weft[pick % KEEP] * 3;\n    for (let x = from; x \u003c= to; x++) {\n      if (x % 2 === 0 && lift[(pick % KEEP) * ENDS + (x >> 1)] === 1) continue;\n      for (let dy = 0; dy \u003c 2; dy++) {\n        const v = dy === 0 ? 1 : 0.7;\n        set(x, pickY + dy, pal[wc] * v, pal[wc + 1] * v, pal[wc + 2] * v);\n      }\n    }\n    if (phase \u003c FLOWN) {\n      // The shuttle: a wooden boat with steel tips, the pirn showing in its middle.\n      const cx = Math.round(sx);\n      for (let dx = -4; dx \u003c= 4; dx++) {\n        const x = cx + dx;\n        if (x \u003c 0 || x >= W) continue;\n        const ax = Math.abs(dx);\n        if (ax \u003c= 3) set(x, pickY - 1, 205, 142, 74);\n        if (ax === 4) set(x, pickY, 200, 200, 212);\n        else if (ax \u003c= 1) set(x, pickY, pal[wc], pal[wc + 1], pal[wc + 2]);\n        else set(x, pickY, 176, 116, 58);\n        if (ax \u003c= 3) set(x, pickY + 1, 120, 76, 38);\n      }\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    set(x, reedY, 196, 146, 84);\n    const d = x % 2 === 1 ? 176 : 70;\n    set(x, reedY + 1, d, d, d + 10);\n  }\n\n  // The cloth, newest pick at the fell. Each float is lit on one side and\n  // dips where it goes under its neighbour.\n  for (let y = clothTop; y \u003c H; y++) {\n    const age = (y - clothTop) >> 1;\n    const dy = (y - clothTop) & 1;\n    const p = woven - age;\n    const slot = (p % KEEP) * ENDS;\n    const above = p \u003c woven ? ((p + 1) % KEEP) * ENDS : -1;\n    const below = ((p - 1 + KEEP) % KEEP) * ENDS;\n    const wc = weft[p % KEEP] * 3;\n    const d = deck[p % KEEP];\n    for (let x = 0; x \u003c W; x++) {\n      const w = x >> 1;\n      const dx = x & 1;\n      let v;\n      let c;\n      if (lift[slot + w] === 1) {\n        c = warpOf(d, w) * 3;\n        v = dx === 0 ? 1 : 0.72;\n        const next = dy === 0 ? above : below;\n        if (next >= 0 && lift[next + w] === 0) v *= 0.78;\n      } else {\n        c = wc;\n        v = dy === 0 ? 1 : 0.7;\n        const n = dx === 0 ? w - 1 : w + 1;\n        if (n >= 0 && n \u003c ENDS && lift[slot + n] === 1) v *= 0.78;\n      }\n      set(x, y, pal[c] * v, pal[c + 1] * v, pal[c + 2] * v);\n    }\n  }\n}\n","layer":{"id":"layer-jacquard","type":"code","name":"jacquard","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Jacquard Loom\n// Family:  textile\n// Idea:    A punched-card loom weaving down the panel: each card lifts its warp ends, the shuttle flies the weft through the shed, the reed beats it in, and the cloth below carries the figure the holes spelled.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Joseph Marie Jacquard's punched-card loom (1804)\n// Round:   4\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..5, Card=1..4, Stripes=0..1\n//\n// Knob 1: Hue. Turns every thread's colour together, starting from an indigo warp over a weft that runs gold, orange, rose, violet, turquoise and green.\n// Knob 2: Speed. Picks a second, from half a pick, where the shuttle drifts across, to five, where it is a streak.\n// Knob 3: Card. The deck laced on the loom: nested diamonds, eight-pointed stars, chevrons, then a houndstooth that no card draws, only a twill over four ends and four picks of each of two colours. The cards change at once; the cloth changes from the fell down.\n// Knob 4: Stripes. How often the shuttle changes colour: broad bands every ten picks at the bottom of the range, a new colour every pick at the top. The houndstooth keeps its four indigo and four cream picks.\n// Buttons: K1 tap turns the deck over, so the next picks weave the back of the cloth, figure and ground traded.\n\nconst W = 64;\nconst H = 128;\n// Thirty-two warp ends, two LEDs each. A pick of weft is two rows.\nconst ENDS = 32;\n// Five punched cards of four rows above the griffe bar.\nconst CARD = 4;\nconst CARDS = 5;\nconst BAR = CARD * CARDS;\n// The heddle eyes: a lifted end's eye rides RISE rows above a lowered one's.\nconst EYE = 30;\nconst RISE = 3;\n// The reed rests at REED and beats each pick down against the fell.\nconst REED = 34;\nconst FELL = 48;\n// Picks kept: the cloth shows 41 of them, the cards one more.\nconst KEEP = 44;\n// The weft's colours go up the row and back, so bands grade into each other.\nconst SEQ = [0, 1, 2, 3, 4, 5, 4, 3, 2, 1];\nconst INDIGO = 6;\nconst CREAM = 7;\n\n// Times within one pick, 0..1: the cards drop and the shed opens, the\n// shuttle flies, the reed beats, the cloth is taken up.\nconst SHED = 0.12;\nconst FLOWN = 0.55;\nconst BEAT = 0.75;\nconst BACK = 0.95;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// Where the figure is, on the pattern's grid of ends and picks.\nfunction figure(design, w, j) {\n  if (design === 0) {\n    // Nested diamonds, four ends to a ring, one diamond the width of the cloth.\n    const x = Math.abs(w - 15.5);\n    const y = Math.abs((j % 32) - 15.5);\n    return Math.floor((x + y) / 4) % 2 === 0;\n  }\n  if (design === 1) {\n    // An eight-pointed star the width of the cloth, a square and a diamond\n    // laid on each other, with a diamond cut from its middle.\n    const dx = Math.abs(w - 15.5);\n    const dy = Math.abs((j % 32) - 15.5);\n    return ((Math.max(dx, dy) \u003c 8 || dx + dy \u003c 14) && dx + dy > 4) || dx + dy > 25;\n  }\n  // Chevrons six picks deep.\n  const tx = w % 16;\n  const z = tx \u003c 8 ? tx : 15 - tx;\n  return (j + z) % 12 \u003c 6;\n}\n\n// Is end w over the weft on pick j? The figure is a warp-faced satin and\n// the ground a weft-faced one, each tied down once in eight.\nfunction liftOf(design, flip, w, j) {\n  let up;\n  if (design === 3) up = (w + j) % 4 \u003c 2;\n  else if (figure(design, w, j)) up = (j + 3 * w) % 8 !== 0;\n  else up = (j + 5 * w) % 8 === 0;\n  return flip ? !up : up;\n}\n\n// Houndstooth is four ends and four picks of each colour, and only reads\n// when the light warp and the light weft are the same cream.\nfunction warpOf(design, w) {\n  if (design === 3) return Math.floor(w / 4) % 2 === 0 ? INDIGO : CREAM;\n  // Cream selvedges.\n  return w === 0 || w === ENDS - 1 ? CREAM : INDIGO;\n}\n\nfunction weftOf(design, j, band) {\n  if (design === 3) return Math.floor(j / 4) % 2 === 0 ? INDIGO : CREAM;\n  return SEQ[Math.floor(j / band) % SEQ.length];\n}\n\nexport function setup(params) {\n  params.lift = new Uint8Array(KEEP * ENDS);\n  params.weft = new Uint8Array(KEEP);\n  params.deck = new Uint8Array(KEEP);\n  params.pal = new Float32Array(8 * 3);\n  params.pick = 0;\n  params.phase = 0;\n  params.started = false;\n  params.flip = false;\n  params.design = 0;\n  params.band = 9;\n  params.speed = 2;\n  params.hue = 0;\n}\n\n// The card for pick q comes to the needles: its holes become the shed.\nfunction startPick(params, q) {\n  const slot = q % KEEP;\n  for (let w = 0; w \u003c ENDS; w++) params.lift[slot * ENDS + w] = liftOf(params.design, params.flip, w, q) ? 1 : 0;\n  params.weft[slot] = weftOf(params.design, q, params.band);\n  params.deck[slot] = params.design;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.speed = Math.max(0.1, k[1]);\n  params.design = Math.max(0, Math.min(3, Math.round(k[2]) - 1));\n  params.band = Math.max(1, Math.round(1 + 9 * (1 - Math.max(0, Math.min(1, k[3])))));\n  if (!params.started) {\n    params.started = true;\n    // A loom that has been weaving a while: the cloth already reaches the floor.\n    for (let q = 0; q \u003c= KEEP; q++) startPick(params, q);\n    params.pick = KEEP;\n    params.phase = 0.3;\n  }\n  if (input.btnPressed && input.btnPressed[0]) params.flip = !params.flip;\n  params.phase += dt * params.speed;\n  while (params.phase >= 1) {\n    params.phase -= 1;\n    params.pick++;\n    startPick(params, params.pick);\n  }\n}\n\n// Is end w up on pick q, for a pick the loom has read or is about to?\nfunction cardLift(params, q, w) {\n  if (q \u003c= params.pick) return params.lift[(q % KEEP) * ENDS + w] === 1;\n  return liftOf(params.design, params.flip, w, q);\n}\n\nexport function draw(display, params, time) {\n  const pal = params.pal;\n  const hue = params.hue;\n  // The weft's gold, orange, rose, violet, turquoise and green, then the warp's indigo and cream.\n  hsvInto(pal, 0, hue + 0.12, 0.95, 1);\n  hsvInto(pal, 3, hue + 0.06, 0.95, 1);\n  hsvInto(pal, 6, hue + 0.96, 0.85, 1);\n  hsvInto(pal, 9, hue + 0.8, 0.75, 1);\n  hsvInto(pal, 12, hue + 0.48, 0.95, 1);\n  hsvInto(pal, 15, hue + 0.3, 0.9, 0.95);\n  // The warp is lit brighter and paler where the hue turns it yellow, since dim yellow reads as olive.\n  const warm = Math.pow(0.5 + 0.5 * Math.cos(2 * Math.PI * (hue + 0.63 - 0.14)), 3);\n  hsvInto(pal, 18, hue + 0.63, 0.9 - 0.2 * warm, 0.8 + 0.2 * warm);\n  hsvInto(pal, 21, hue + 0.11, 0.16, 0.95);\n\n  const lift = params.lift;\n  const weft = params.weft;\n  const deck = params.deck;\n  const pick = params.pick;\n  const phase = params.phase;\n  const set = (x, y, r, g, b) => display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n\n  // The punched cards, dropping one card a pick onto the needles.\n  const drop = Math.round(smooth(0, SHED, phase) * CARD);\n  for (let y = 0; y \u003c BAR; y++) for (let x = 0; x \u003c W; x++) set(x, y, 10, 9, 8);\n  for (let c = -1; c \u003c= CARDS; c++) {\n    const q = pick + c;\n    const top = BAR - CARD * (c + 1) - (CARD - drop);\n    for (let r = 0; r \u003c CARD; r++) {\n      const y = top + r;\n      if (y \u003c 0 || y >= BAR) continue;\n      for (let x = 0; x \u003c W; x++) {\n        if (r === 3) {\n          // The lacing between cards.\n          if (x === 4 || x === 59) set(x, y, 120, 100, 70);\n          continue;\n        }\n        const shade = r === 0 ? 0.8 : 1;\n        if (r > 0 && x % 2 === 0 && cardLift(params, q, x >> 1)) set(x, y, 12, 10, 8);\n        else set(x, y, 228 * shade, 204 * shade, 156 * shade);\n      }\n    }\n  }\n  // The griffe bar the hooks hang from.\n  for (let x = 0; x \u003c W; x++) {\n    set(x, BAR, 150, 152, 162);\n    set(x, BAR + 1, 64, 66, 76);\n  }\n\n  // The shed: cords down to the heddle eyes, then each end on to the fell.\n  const shedPick = phase \u003c SHED ? pick - 1 : pick;\n  const shedSlot = (shedPick % KEEP) * ENDS;\n  const woven = phase >= BEAT ? pick : pick - 1;\n  const take = phase >= BEAT ? (phase \u003c 0.82 ? 0 : phase \u003c 0.88 ? 1 : 2) : 2;\n  const clothTop = FELL - 2 + take;\n  for (let y = BAR + 2; y \u003c clothTop; y++) for (let x = 0; x \u003c W; x++) set(x, y, 8, 8, 10);\n  for (let w = 0; w \u003c ENDS; w++) {\n    const up = lift[shedSlot + w] === 1;\n    const eye = up ? EYE - RISE : EYE;\n    const c = warpOf(deck[shedPick % KEEP], w) * 3;\n    const x = 2 * w;\n    for (let y = BAR + 2; y \u003c clothTop; y++) {\n      if (y \u003c eye) {\n        const v = up ? 92 : 52;\n        set(x, y, v, v, v + 6);\n      } else if (y === eye) set(x, y, 214, 214, 224);\n      else {\n        const v = up ? 1 : 0.5;\n        set(x, y, pal[c] * v, pal[c + 1] * v, pal[c + 2] * v);\n      }\n    }\n  }\n\n  // The reed swings in after the shuttle and back.\n  let swing = 0;\n  if (phase >= FLOWN && phase \u003c BEAT) {\n    const u = (phase - FLOWN) / (BEAT - FLOWN);\n    swing = u * u;\n  } else if (phase >= BEAT && phase \u003c BACK) swing = 1 - smooth(BEAT, BACK, phase);\n  const reedY = Math.round(REED + (FELL - 4 - REED) * swing);\n  const pickY = phase \u003c BEAT ? reedY + 2 : FELL - 2;\n\n  // The weft the shuttle has laid so far, under every lifted end.\n  if (phase >= SHED && phase \u003c BEAT) {\n    const dir = pick % 2 === 0 ? 1 : -1;\n    const u = smooth(SHED, FLOWN, phase);\n    const sx = dir > 0 ? -6 + 76 * u : 69 - 76 * u;\n    const from = dir > 0 ? 0 : Math.max(0, Math.round(sx));\n    const to = dir > 0 ? Math.min(W - 1, Math.round(sx)) : W - 1;\n    const wc = weft[pick % KEEP] * 3;\n    for (let x = from; x \u003c= to; x++) {\n      if (x % 2 === 0 && lift[(pick % KEEP) * ENDS + (x >> 1)] === 1) continue;\n      for (let dy = 0; dy \u003c 2; dy++) {\n        const v = dy === 0 ? 1 : 0.7;\n        set(x, pickY + dy, pal[wc] * v, pal[wc + 1] * v, pal[wc + 2] * v);\n      }\n    }\n    if (phase \u003c FLOWN) {\n      // The shuttle: a wooden boat with steel tips, the pirn showing in its middle.\n      const cx = Math.round(sx);\n      for (let dx = -4; dx \u003c= 4; dx++) {\n        const x = cx + dx;\n        if (x \u003c 0 || x >= W) continue;\n        const ax = Math.abs(dx);\n        if (ax \u003c= 3) set(x, pickY - 1, 205, 142, 74);\n        if (ax === 4) set(x, pickY, 200, 200, 212);\n        else if (ax \u003c= 1) set(x, pickY, pal[wc], pal[wc + 1], pal[wc + 2]);\n        else set(x, pickY, 176, 116, 58);\n        if (ax \u003c= 3) set(x, pickY + 1, 120, 76, 38);\n      }\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    set(x, reedY, 196, 146, 84);\n    const d = x % 2 === 1 ? 176 : 70;\n    set(x, reedY + 1, d, d, d + 10);\n  }\n\n  // The cloth, newest pick at the fell. Each float is lit on one side and\n  // dips where it goes under its neighbour.\n  for (let y = clothTop; y \u003c H; y++) {\n    const age = (y - clothTop) >> 1;\n    const dy = (y - clothTop) & 1;\n    const p = woven - age;\n    const slot = (p % KEEP) * ENDS;\n    const above = p \u003c woven ? ((p + 1) % KEEP) * ENDS : -1;\n    const below = ((p - 1 + KEEP) % KEEP) * ENDS;\n    const wc = weft[p % KEEP] * 3;\n    const d = deck[p % KEEP];\n    for (let x = 0; x \u003c W; x++) {\n      const w = x >> 1;\n      const dx = x & 1;\n      let v;\n      let c;\n      if (lift[slot + w] === 1) {\n        c = warpOf(d, w) * 3;\n        v = dx === 0 ? 1 : 0.72;\n        const next = dy === 0 ? above : below;\n        if (next >= 0 && lift[next + w] === 0) v *= 0.78;\n      } else {\n        c = wc;\n        v = dy === 0 ? 1 : 0.7;\n        const n = dx === 0 ? w - 1 : w + 1;\n        if (n >= 0 && n \u003c ENDS && lift[slot + n] === 1) v *= 0.78;\n      }\n      set(x, y, pal[c] * v, pal[c + 1] * v, pal[c + 2] * v);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.5..5, Card=1..4, Stripes=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every thread's colour together, starting from an indigo warp over a weft that runs gold, orange, rose, violet, turquoise and green."},{"name":"Speed","min":0.5,"max":5,"about":"Picks a second, from half a pick, where the shuttle drifts across, to five, where it is a streak."},{"name":"Card","min":1,"max":4,"about":"The deck laced on the loom: nested diamonds, eight-pointed stars, chevrons, then a houndstooth that no card draws, only a twill over four ends and four picks of each of two colours. The cards change at once; the cloth changes from the fell down."},{"name":"Stripes","min":0,"max":1,"about":"How often the shuttle changes colour: broad bands every ten picks at the bottom of the range, a new colour every pick at the top. The houndstooth keeps its four indigo and four cream picks."}],"start":[0,2,1,0.06],"measures":{"motion":1.0063,"detail":0.2005,"edges":0.8201,"complexity":0.1835,"coverage":0.8529,"colour":0.5431,"drift":0.0411},"knobResponse":[0.3764,0.209,0.2197,0.1447]},{"slug":"jelly","title":"Jelly","family":"physics","round":2,"note":"젤리마다 질량 18개를 용수철과 안쪽 압력으로 묶은 고리예요. 키 큰 병에 떨어져 눌린 채 쌓여 출렁이다가, 하나씩 통 튀어 올라 다른 젤리 위로 굴러떨어져요.","idea":"Each jelly is a ring of eighteen masses held by springs and the pressure of what is inside, so dropped into the tall jar they squash, stack, wobble and roll off one another.","buttons":"K1 tap shakes the jar.","code":"// ===== Patternflow pattern =====\n// Title:   Jelly\n// Family:  physics\n// Idea:    Each jelly is a ring of eighteen masses held by springs and the pressure of what is inside, so dropped into the tall jar they squash, stack, wobble and roll off one another.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Gravity=-1..3, Softness=0..1, Count=4..12\n//\n// Knob 1: Hue. Turns the whole bag of sweets round the colour wheel; each jelly sits a golden step round from the last, so no two match.\n// Knob 2: Gravity. Heavy at 3, a slow float at 0, and below 0 the jar is upside down and they pile against the lid.\n// Knob 3: Softness. Firm gums at 0 that bounce and roll; at 1 water balloons that slump over each other.\n// Knob 4: Count. How many are in the jar; new ones fall in one after another, and every jelly shrinks to share the room.\n// Buttons: K1 tap shakes the jar.\n\nconst W = 64;\nconst H = 128;\nconst B = 12;\nconst M = 18;\nconst STEP = 1 / 90;\nconst ITER = 3;\n// The jellies together take about a third of the jar, whatever their number.\nconst FILL = 0.5;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.px = new Float32Array(B * M);\n  params.py = new Float32Array(B * M);\n  params.ox = new Float32Array(B * M);\n  params.oy = new Float32Array(B * M);\n  params.r = new Float32Array(B);\n  params.size = new Float32Array(B);\n  params.on = new Uint8Array(B);\n  params.inside = new Uint8Array(B);\n  params.cx = new Float32Array(B);\n  params.cy = new Float32Array(B);\n  params.x0 = new Float32Array(B);\n  params.x1 = new Float32Array(B);\n  params.y0 = new Float32Array(B);\n  params.y1 = new Float32Array(B);\n  params.col = new Float32Array(B * 3);\n  params.rim = new Float32Array(B * 3);\n  params.id = new Uint8Array(W * H);\n  params.dist = new Float32Array(W * H);\n  params.cross = new Float32Array(M + 2);\n  params.ringX = new Float32Array(M);\n  params.ringY = new Float32Array(M);\n  for (let k = 0; k \u003c M; k++) {\n    params.ringX[k] = Math.cos((k / M) * Math.PI * 2);\n    params.ringY[k] = Math.sin((k / M) * Math.PI * 2);\n  }\n  for (let b = 0; b \u003c B; b++) params.size[b] = 0.82 + Math.random() * 0.36;\n  params.count = 0;\n  params.hop = 0.6;\n  params.acc = 0;\n  params.t = 0;\n  params.warm = false;\n}\n\nfunction radiusFor(params, b, count) {\n  let sum = 0;\n  for (let i = 0; i \u003c count; i++) sum += params.size[i] * params.size[i];\n  return Math.sqrt((FILL * W * H) / (Math.PI * sum)) * params.size[b];\n}\n\nfunction place(params, b, x, y, r, vx, vy) {\n  for (let k = 0; k \u003c M; k++) {\n    const a = (k / M) * Math.PI * 2;\n    const i = b * M + k;\n    params.px[i] = x + Math.cos(a) * r;\n    params.py[i] = y + Math.sin(a) * r;\n    params.ox[i] = params.px[i] - vx * STEP;\n    params.oy[i] = params.py[i] - vy * STEP;\n  }\n  params.r[b] = r;\n  params.on[b] = 1;\n}\n\nfunction setCount(params, count, g, warm) {\n  let queue = 0;\n  for (let b = 0; b \u003c B; b++) {\n    if (b \u003c count && !params.on[b]) {\n      const r = radiusFor(params, b, count);\n      if (warm) {\n        // At the start they are already in the jar, in a loose stack to settle from.\n        const col = b % 2;\n        const row = Math.floor(b / 2);\n        place(params, b, 18 + col * 28 + (Math.random() - 0.5) * 4, H - 16 - row * 26, r * 0.9, 0, 0);\n        params.inside[b] = 1;\n      } else {\n        // A new one comes in from the side gravity points away from, already moving in.\n        // Several at once queue up outside the jar, so they drop in one after another.\n        const down = g >= 0;\n        const wait = r + 2 + queue * (2 * r + 6);\n        queue++;\n        place(params, b, r + 2 + Math.random() * (W - 2 * r - 4), down ? -wait : H + wait, r, 0, down ? 90 : -90);\n        params.inside[b] = 0;\n      }\n    }\n  }\n  params.count = count;\n}\n\nfunction nudge(params, b, vx, vy, spin) {\n  const cx = params.cx[b];\n  const cy = params.cy[b];\n  for (let k = 0; k \u003c M; k++) {\n    const i = b * M + k;\n    const dx = params.px[i] - cx;\n    const dy = params.py[i] - cy;\n    params.ox[i] -= (vx - dy * spin) * STEP;\n    params.oy[i] -= (vy + dx * spin) * STEP;\n  }\n}\n\nfunction centres(params) {\n  const { px, py } = params;\n  for (let b = 0; b \u003c B; b++) {\n    if (!params.on[b]) continue;\n    let sx = 0;\n    let sy = 0;\n    let x0 = 1e9;\n    let x1 = -1e9;\n    let y0 = 1e9;\n    let y1 = -1e9;\n    for (let k = 0; k \u003c M; k++) {\n      const i = b * M + k;\n      sx += px[i];\n      sy += py[i];\n      if (px[i] \u003c x0) x0 = px[i];\n      if (px[i] > x1) x1 = px[i];\n      if (py[i] \u003c y0) y0 = py[i];\n      if (py[i] > y1) y1 = py[i];\n    }\n    params.cx[b] = sx / M;\n    params.cy[b] = sy / M;\n    params.x0[b] = x0;\n    params.x1[b] = x1;\n    params.y0[b] = y0;\n    params.y1[b] = y1;\n  }\n}\n\n// A mass that has slipped inside another jelly goes back out through the nearest\n// edge, and that edge gives way by the same amount. Without this a mass caught\n// inside stays there, far from every mass that could push it.\nfunction pushOut(params, i, b) {\n  const { px, py } = params;\n  const x = px[i];\n  const y = py[i];\n  if (x \u003c params.x0[b] || x > params.x1[b] || y \u003c params.y0[b] || y > params.y1[b]) return;\n  const o = b * M;\n  let inside = false;\n  for (let k = 0, m = M - 1; k \u003c M; m = k++) {\n    const yk = py[o + k];\n    const ym = py[o + m];\n    if (yk > y !== ym > y && x \u003c ((px[o + m] - px[o + k]) * (y - yk)) / (ym - yk) + px[o + k]) inside = !inside;\n  }\n  if (!inside) return;\n  let best = 1e9;\n  let bj = 0;\n  let bt = 0;\n  for (let k = 0; k \u003c M; k++) {\n    const j = o + k;\n    const n = o + ((k + 1) % M);\n    const ex = px[n] - px[j];\n    const ey = py[n] - py[j];\n    let t = ((x - px[j]) * ex + (y - py[j]) * ey) / (ex * ex + ey * ey + 1e-6);\n    t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n    const dx = px[j] + ex * t - x;\n    const dy = py[j] + ey * t - y;\n    const d = dx * dx + dy * dy;\n    if (d \u003c best) {\n      best = d;\n      bj = k;\n      bt = t;\n    }\n  }\n  const j = o + bj;\n  const n = o + ((bj + 1) % M);\n  const dx = px[j] + (px[n] - px[j]) * bt - x;\n  const dy = py[j] + (py[n] - py[j]) * bt - y;\n  px[i] += dx * 0.6;\n  py[i] += dy * 0.6;\n  px[j] -= dx * 0.4 * (1 - bt);\n  py[j] -= dy * 0.4 * (1 - bt);\n  px[n] -= dx * 0.4 * bt;\n  py[n] -= dy * 0.4 * bt;\n}\n\nfunction step(params, gx, gy, soft) {\n  const { px, py, ox, oy, r, on, inside } = params;\n  const dt2 = STEP * STEP;\n  const count = params.count;\n  for (let b = 0; b \u003c B; b++) {\n    if (!on[b]) continue;\n    // Sizes ease to their share of the room; a jelly no longer counted shrinks away.\n    const target = b \u003c count ? radiusFor(params, b, count) : 0;\n    r[b] += (target - r[b]) * 0.02;\n    if (b >= count && r[b] \u003c 1.2) {\n      on[b] = 0;\n      continue;\n    }\n    for (let k = 0; k \u003c M; k++) {\n      const i = b * M + k;\n      const vx = (px[i] - ox[i]) * 0.997;\n      const vy = (py[i] - oy[i]) * 0.997;\n      ox[i] = px[i];\n      oy[i] = py[i];\n      px[i] += vx + gx * dt2;\n      py[i] += vy + gy * dt2;\n    }\n  }\n\n  const kEdge = 0.9 - soft * 0.55;\n  const kSkip = 0.3 - soft * 0.27;\n  const kArea = 0.6 - soft * 0.35;\n  const kShape = 0.05 - soft * 0.042;\n  for (let it = 0; it \u003c ITER; it++) {\n    for (let b = 0; b \u003c B; b++) {\n      if (!on[b]) continue;\n      const o = b * M;\n      const R = r[b];\n      const edge = 2 * R * Math.sin(Math.PI / M);\n      const skip = 2 * R * Math.sin((2 * Math.PI) / M);\n      for (let k = 0; k \u003c M; k++) {\n        for (let s = 1; s \u003c= 2; s++) {\n          const i = o + k;\n          const j = o + ((k + s) % M);\n          const dx = px[j] - px[i];\n          const dy = py[j] - py[i];\n          const d = Math.sqrt(dx * dx + dy * dy) + 1e-6;\n          const f = ((d - (s === 1 ? edge : skip)) / d) * 0.5 * (s === 1 ? kEdge : kSkip);\n          px[i] += dx * f;\n          py[i] += dy * f;\n          px[j] -= dx * f;\n          py[j] -= dy * f;\n        }\n      }\n      // Pressure: push every mass out along the ring's normal until the area is back.\n      let area = 0;\n      let grad = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const j = o + ((k + 1) % M);\n        area += px[i] * py[j] - px[j] * py[i];\n        const n = o + ((k + 1) % M);\n        const p = o + ((k + M - 1) % M);\n        const gxk = 0.5 * (py[n] - py[p]);\n        const gyk = 0.5 * (px[p] - px[n]);\n        grad += gxk * gxk + gyk * gyk;\n      }\n      area *= 0.5;\n      const lambda = ((Math.PI * R * R - area) / (grad + 1e-6)) * kArea;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const n = o + ((k + 1) % M);\n        const p = o + ((k + M - 1) % M);\n        // The neighbours' positions have moved by a hair this pass; close enough for pressure.\n        px[i] += 0.5 * (py[n] - py[p]) * lambda;\n        py[i] += 0.5 * (px[p] - px[n]) * lambda;\n      }\n      // Shape matching: a weak pull back towards a circle turned the way the ring has\n      // turned. It lets a jelly squash but never tie itself in a knot.\n      let cx = 0;\n      let cy = 0;\n      for (let k = 0; k \u003c M; k++) {\n        cx += px[o + k];\n        cy += py[o + k];\n      }\n      cx /= M;\n      cy /= M;\n      let dot = 0;\n      let crs = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const qx = params.ringX[k];\n        const qy = params.ringY[k];\n        const dx = px[o + k] - cx;\n        const dy = py[o + k] - cy;\n        dot += qx * dx + qy * dy;\n        crs += qx * dy - qy * dx;\n      }\n      const m = Math.sqrt(dot * dot + crs * crs) + 1e-6;\n      const cs = (dot / m) * R;\n      const sn = (crs / m) * R;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const qx = params.ringX[k];\n        const qy = params.ringY[k];\n        px[i] += (cx + cs * qx - sn * qy - px[i]) * kShape;\n        py[i] += (cy + sn * qx + cs * qy - py[i]) * kShape;\n      }\n    }\n\n    centres(params);\n    // Jelly against jelly: masses of two rings keep a hair apart, and grip a little.\n    const reach = 1.4;\n    for (let a = 0; a \u003c B; a++) {\n      if (!on[a]) continue;\n      for (let b = a + 1; b \u003c B; b++) {\n        if (!on[b]) continue;\n        if (params.x0[a] - reach > params.x1[b] || params.x0[b] - reach > params.x1[a]) continue;\n        if (params.y0[a] - reach > params.y1[b] || params.y0[b] - reach > params.y1[a]) continue;\n        const r2 = reach * reach;\n        for (let k = 0; k \u003c M; k++) {\n          const i = a * M + k;\n          for (let m = 0; m \u003c M; m++) {\n            const j = b * M + m;\n            const dx = px[j] - px[i];\n            const dy = py[j] - py[i];\n            const d2 = dx * dx + dy * dy;\n            if (d2 >= r2) continue;\n            const d = Math.sqrt(d2) + 1e-6;\n            const f = ((reach - d) / d) * 0.5;\n            px[i] -= dx * f;\n            py[i] -= dy * f;\n            px[j] += dx * f;\n            py[j] += dy * f;\n            // A little grip where they touch, so a stack holds and a top one rolls off.\n            const fx = ((px[i] - ox[i]) - (px[j] - ox[j])) * 0.08;\n            const fy = ((py[i] - oy[i]) - (py[j] - oy[j])) * 0.08;\n            ox[i] += fx;\n            oy[i] += fy;\n            ox[j] -= fx;\n            oy[j] -= fy;\n          }\n        }\n      }\n    }\n\n    for (let a = 0; a \u003c B; a++) {\n      if (!on[a]) continue;\n      for (let b = 0; b \u003c B; b++) {\n        if (b === a || !on[b]) continue;\n        if (params.x0[a] > params.x1[b] || params.x0[b] > params.x1[a]) continue;\n        if (params.y0[a] > params.y1[b] || params.y0[b] > params.y1[a]) continue;\n        for (let k = 0; k \u003c M; k++) pushOut(params, a * M + k, b);\n      }\n    }\n\n    for (let b = 0; b \u003c B; b++) {\n      if (!on[b]) continue;\n      if (!inside[b]) {\n        if (params.y0[b] > 0.5 && params.y1[b] \u003c H - 0.5) inside[b] = 1;\n      }\n      for (let k = 0; k \u003c M; k++) {\n        const i = b * M + k;\n        if (px[i] \u003c 0.5) {\n          px[i] = 0.5;\n          oy[i] += (py[i] - oy[i]) * 0.3;\n        } else if (px[i] > W - 0.5) {\n          px[i] = W - 0.5;\n          oy[i] += (py[i] - oy[i]) * 0.3;\n        }\n        if (!inside[b]) continue;\n        if (py[i] > H - 0.5) {\n          py[i] = H - 0.5;\n          ox[i] += (px[i] - ox[i]) * 0.3;\n        } else if (py[i] \u003c 0.5) {\n          py[i] = 0.5;\n          ox[i] += (px[i] - ox[i]) * 0.3;\n        }\n      }\n    }\n  }\n}\n\nfunction simulate(params, dt, k, shake) {\n  const gravity = k[1];\n  const soft = Math.max(0, Math.min(1, k[2]));\n  const count = Math.max(4, Math.min(B, Math.round(k[3])));\n  // The jar rocks a little in the hand, so the pile keeps sliding and settling.\n  const tilt = Math.sin(params.t * 0.45) * 0.16;\n  const g = gravity * 150;\n  const gx = Math.sin(tilt) * g;\n  const gy = Math.cos(tilt) * g;\n  if (count !== params.count) setCount(params, count, g, false);\n  centres(params);\n\n  params.hop -= dt;\n  if (params.hop \u003c= 0 || shake) {\n    // One of them gives a hop, or with a shake all of them are thrown.\n    params.hop = 0.9 + Math.random() * 1.4;\n    const up = g > 25 ? -1 : g \u003c -25 ? 1 : Math.random() \u003c 0.5 ? -1 : 1;\n    const pick = Math.floor(Math.random() * params.count);\n    for (let b = 0; b \u003c B; b++) {\n      if (!params.on[b] || !params.inside[b]) continue;\n      if (!shake && b !== pick) continue;\n      const lift = shake ? 230 + Math.random() * 170 : 160 + Math.random() * 110;\n      nudge(params, b, (Math.random() - 0.5) * (shake ? 280 : 90), up * lift, (Math.random() - 0.5) * 6);\n    }\n  }\n\n  params.acc += dt;\n  let n = 0;\n  while (params.acc >= STEP && n \u003c 9) {\n    params.acc -= STEP;\n    params.t += STEP;\n    step(params, gx, gy, soft);\n    n++;\n  }\n  if (n === 9) params.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 4];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0] + 0.3;\n  if (!params.warm) {\n    params.warm = true;\n    setCount(params, Math.max(4, Math.min(B, Math.round(k[3]))), k[1], true);\n    for (let s = 0; s \u003c 90; s++) simulate(params, STEP, k, false);\n  }\n  simulate(params, dt, k, input.btnPressed && input.btnPressed[0]);\n}\n\nexport function draw(display, params, time) {\n  const { px, py, id, dist, cross, col, rim } = params;\n  id.fill(0);\n  centres(params);\n  for (let b = 0; b \u003c B; b++) {\n    if (!params.on[b]) continue;\n    // Neighbours a golden step apart round the wheel never land on the same colour.\n    const h = params.hue + b * 0.381966;\n    hsvInto(col, b * 3, h, 0.78, 1);\n    hsvInto(rim, b * 3, h + 0.03, 0.35, 1);\n    const o = b * M;\n    const yA = Math.max(0, Math.floor(params.y0[b]));\n    const yB = Math.min(H - 1, Math.ceil(params.y1[b]));\n    for (let y = yA; y \u003c= yB; y++) {\n      const sy = y + 0.5;\n      let n = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const j = o + ((k + 1) % M);\n        const ya = py[i];\n        const yb = py[j];\n        if (ya \u003c= sy === yb \u003c= sy) continue;\n        const x = px[i] + ((sy - ya) * (px[j] - px[i])) / (yb - ya);\n        let m = n++;\n        while (m > 0 && cross[m - 1] > x) {\n          cross[m] = cross[m - 1];\n          m--;\n        }\n        cross[m] = x;\n      }\n      for (let c = 0; c + 1 \u003c n; c += 2) {\n        const xa = Math.max(0, Math.ceil(cross[c] - 0.5));\n        const xb = Math.min(W - 1, Math.floor(cross[c + 1] - 0.5));\n        for (let x = xa; x \u003c= xb; x++) id[y * W + x] = b + 1;\n      }\n    }\n  }\n\n  // How far each lit LED is from the edge of its own jelly, by a two-pass chamfer.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const v = id[o];\n      if (!v) continue;\n      const edge = x === 0 || x === W - 1 || y === 0 || y === H - 1 || id[o - 1] !== v || id[o + 1] !== v || id[o - W] !== v || id[o + W] !== v;\n      dist[o] = edge ? 0 : 99;\n    }\n  for (let y = 1; y \u003c H; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const o = y * W + x;\n      if (!id[o]) continue;\n      let d = dist[o];\n      if (dist[o - 1] + 1 \u003c d) d = dist[o - 1] + 1;\n      if (dist[o - W] + 1 \u003c d) d = dist[o - W] + 1;\n      if (dist[o - W - 1] + 1.41 \u003c d) d = dist[o - W - 1] + 1.41;\n      if (dist[o - W + 1] + 1.41 \u003c d) d = dist[o - W + 1] + 1.41;\n      dist[o] = d;\n    }\n  for (let y = H - 2; y >= 0; y--)\n    for (let x = W - 2; x >= 1; x--) {\n      const o = y * W + x;\n      if (!id[o]) continue;\n      let d = dist[o];\n      if (dist[o + 1] + 1 \u003c d) d = dist[o + 1] + 1;\n      if (dist[o + W] + 1 \u003c d) d = dist[o + W] + 1;\n      if (dist[o + W + 1] + 1.41 \u003c d) d = dist[o + W + 1] + 1.41;\n      if (dist[o + W - 1] + 1.41 \u003c d) d = dist[o + W - 1] + 1.41;\n      dist[o] = d;\n    }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const v = id[o];\n      if (!v) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const b = v - 1;\n      const c = b * 3;\n      const d = dist[o];\n      if (d \u003c 0.5) {\n        // A dark seam where two jellies touch keeps each one whole.\n        display.setPixel(x, y, col[c] * 0.22, col[c + 1] * 0.22, col[c + 2] * 0.22);\n        continue;\n      }\n      if (d \u003c 1.5) {\n        display.setPixel(x, y, rim[c] * 0.9, rim[c + 1] * 0.9, rim[c + 2] * 0.9);\n        continue;\n      }\n      const R = params.r[b];\n      const ex = (params.x1[b] - params.x0[b]) * 0.5 + 0.5;\n      const ey = (params.y1[b] - params.y0[b]) * 0.5 + 0.5;\n      // A dome: thin near the rim, full in the middle.\n      const u = Math.min(1, (d - 1) / (0.5 * R));\n      const dome = Math.sqrt(1 - (1 - u) * (1 - u));\n      let lv = 0.64 + 0.28 * dome;\n      // Light through the jelly gathers low and to the right, opposite the shine.\n      const gx = (x + 0.5 - params.cx[b] - ex * 0.25) / (ex * 0.6);\n      const gy = (y + 0.5 - params.cy[b] - ey * 0.3) / (ey * 0.55);\n      const glow = 1 - gx * gx - gy * gy;\n      if (glow > 0) lv += glow * 0.25;\n      let r = col[c] * lv;\n      let g = col[c + 1] * lv;\n      let bl = col[c + 2] * lv;\n      const sx = (x + 0.5 - params.cx[b] + ex * 0.4) / (ex * 0.28);\n      const sy = (y + 0.5 - params.cy[b] + ey * 0.45) / (ey * 0.2);\n      const shine = 1 - sx * sx - sy * sy;\n      if (shine > 0) {\n        const s = Math.min(1, shine * 1.8) * 0.85;\n        r += (235 - r) * s;\n        g += (235 - g) * s;\n        bl += (235 - bl) * s;\n      }\n      display.setPixel(x, y, Math.min(235, r), Math.min(235, g), Math.min(235, bl));\n    }\n}\n","layer":{"id":"layer-jelly","type":"code","name":"jelly","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Jelly\n// Family:  physics\n// Idea:    Each jelly is a ring of eighteen masses held by springs and the pressure of what is inside, so dropped into the tall jar they squash, stack, wobble and roll off one another.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Gravity=-1..3, Softness=0..1, Count=4..12\n//\n// Knob 1: Hue. Turns the whole bag of sweets round the colour wheel; each jelly sits a golden step round from the last, so no two match.\n// Knob 2: Gravity. Heavy at 3, a slow float at 0, and below 0 the jar is upside down and they pile against the lid.\n// Knob 3: Softness. Firm gums at 0 that bounce and roll; at 1 water balloons that slump over each other.\n// Knob 4: Count. How many are in the jar; new ones fall in one after another, and every jelly shrinks to share the room.\n// Buttons: K1 tap shakes the jar.\n\nconst W = 64;\nconst H = 128;\nconst B = 12;\nconst M = 18;\nconst STEP = 1 / 90;\nconst ITER = 3;\n// The jellies together take about a third of the jar, whatever their number.\nconst FILL = 0.5;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.px = new Float32Array(B * M);\n  params.py = new Float32Array(B * M);\n  params.ox = new Float32Array(B * M);\n  params.oy = new Float32Array(B * M);\n  params.r = new Float32Array(B);\n  params.size = new Float32Array(B);\n  params.on = new Uint8Array(B);\n  params.inside = new Uint8Array(B);\n  params.cx = new Float32Array(B);\n  params.cy = new Float32Array(B);\n  params.x0 = new Float32Array(B);\n  params.x1 = new Float32Array(B);\n  params.y0 = new Float32Array(B);\n  params.y1 = new Float32Array(B);\n  params.col = new Float32Array(B * 3);\n  params.rim = new Float32Array(B * 3);\n  params.id = new Uint8Array(W * H);\n  params.dist = new Float32Array(W * H);\n  params.cross = new Float32Array(M + 2);\n  params.ringX = new Float32Array(M);\n  params.ringY = new Float32Array(M);\n  for (let k = 0; k \u003c M; k++) {\n    params.ringX[k] = Math.cos((k / M) * Math.PI * 2);\n    params.ringY[k] = Math.sin((k / M) * Math.PI * 2);\n  }\n  for (let b = 0; b \u003c B; b++) params.size[b] = 0.82 + Math.random() * 0.36;\n  params.count = 0;\n  params.hop = 0.6;\n  params.acc = 0;\n  params.t = 0;\n  params.warm = false;\n}\n\nfunction radiusFor(params, b, count) {\n  let sum = 0;\n  for (let i = 0; i \u003c count; i++) sum += params.size[i] * params.size[i];\n  return Math.sqrt((FILL * W * H) / (Math.PI * sum)) * params.size[b];\n}\n\nfunction place(params, b, x, y, r, vx, vy) {\n  for (let k = 0; k \u003c M; k++) {\n    const a = (k / M) * Math.PI * 2;\n    const i = b * M + k;\n    params.px[i] = x + Math.cos(a) * r;\n    params.py[i] = y + Math.sin(a) * r;\n    params.ox[i] = params.px[i] - vx * STEP;\n    params.oy[i] = params.py[i] - vy * STEP;\n  }\n  params.r[b] = r;\n  params.on[b] = 1;\n}\n\nfunction setCount(params, count, g, warm) {\n  let queue = 0;\n  for (let b = 0; b \u003c B; b++) {\n    if (b \u003c count && !params.on[b]) {\n      const r = radiusFor(params, b, count);\n      if (warm) {\n        // At the start they are already in the jar, in a loose stack to settle from.\n        const col = b % 2;\n        const row = Math.floor(b / 2);\n        place(params, b, 18 + col * 28 + (Math.random() - 0.5) * 4, H - 16 - row * 26, r * 0.9, 0, 0);\n        params.inside[b] = 1;\n      } else {\n        // A new one comes in from the side gravity points away from, already moving in.\n        // Several at once queue up outside the jar, so they drop in one after another.\n        const down = g >= 0;\n        const wait = r + 2 + queue * (2 * r + 6);\n        queue++;\n        place(params, b, r + 2 + Math.random() * (W - 2 * r - 4), down ? -wait : H + wait, r, 0, down ? 90 : -90);\n        params.inside[b] = 0;\n      }\n    }\n  }\n  params.count = count;\n}\n\nfunction nudge(params, b, vx, vy, spin) {\n  const cx = params.cx[b];\n  const cy = params.cy[b];\n  for (let k = 0; k \u003c M; k++) {\n    const i = b * M + k;\n    const dx = params.px[i] - cx;\n    const dy = params.py[i] - cy;\n    params.ox[i] -= (vx - dy * spin) * STEP;\n    params.oy[i] -= (vy + dx * spin) * STEP;\n  }\n}\n\nfunction centres(params) {\n  const { px, py } = params;\n  for (let b = 0; b \u003c B; b++) {\n    if (!params.on[b]) continue;\n    let sx = 0;\n    let sy = 0;\n    let x0 = 1e9;\n    let x1 = -1e9;\n    let y0 = 1e9;\n    let y1 = -1e9;\n    for (let k = 0; k \u003c M; k++) {\n      const i = b * M + k;\n      sx += px[i];\n      sy += py[i];\n      if (px[i] \u003c x0) x0 = px[i];\n      if (px[i] > x1) x1 = px[i];\n      if (py[i] \u003c y0) y0 = py[i];\n      if (py[i] > y1) y1 = py[i];\n    }\n    params.cx[b] = sx / M;\n    params.cy[b] = sy / M;\n    params.x0[b] = x0;\n    params.x1[b] = x1;\n    params.y0[b] = y0;\n    params.y1[b] = y1;\n  }\n}\n\n// A mass that has slipped inside another jelly goes back out through the nearest\n// edge, and that edge gives way by the same amount. Without this a mass caught\n// inside stays there, far from every mass that could push it.\nfunction pushOut(params, i, b) {\n  const { px, py } = params;\n  const x = px[i];\n  const y = py[i];\n  if (x \u003c params.x0[b] || x > params.x1[b] || y \u003c params.y0[b] || y > params.y1[b]) return;\n  const o = b * M;\n  let inside = false;\n  for (let k = 0, m = M - 1; k \u003c M; m = k++) {\n    const yk = py[o + k];\n    const ym = py[o + m];\n    if (yk > y !== ym > y && x \u003c ((px[o + m] - px[o + k]) * (y - yk)) / (ym - yk) + px[o + k]) inside = !inside;\n  }\n  if (!inside) return;\n  let best = 1e9;\n  let bj = 0;\n  let bt = 0;\n  for (let k = 0; k \u003c M; k++) {\n    const j = o + k;\n    const n = o + ((k + 1) % M);\n    const ex = px[n] - px[j];\n    const ey = py[n] - py[j];\n    let t = ((x - px[j]) * ex + (y - py[j]) * ey) / (ex * ex + ey * ey + 1e-6);\n    t = t \u003c 0 ? 0 : t > 1 ? 1 : t;\n    const dx = px[j] + ex * t - x;\n    const dy = py[j] + ey * t - y;\n    const d = dx * dx + dy * dy;\n    if (d \u003c best) {\n      best = d;\n      bj = k;\n      bt = t;\n    }\n  }\n  const j = o + bj;\n  const n = o + ((bj + 1) % M);\n  const dx = px[j] + (px[n] - px[j]) * bt - x;\n  const dy = py[j] + (py[n] - py[j]) * bt - y;\n  px[i] += dx * 0.6;\n  py[i] += dy * 0.6;\n  px[j] -= dx * 0.4 * (1 - bt);\n  py[j] -= dy * 0.4 * (1 - bt);\n  px[n] -= dx * 0.4 * bt;\n  py[n] -= dy * 0.4 * bt;\n}\n\nfunction step(params, gx, gy, soft) {\n  const { px, py, ox, oy, r, on, inside } = params;\n  const dt2 = STEP * STEP;\n  const count = params.count;\n  for (let b = 0; b \u003c B; b++) {\n    if (!on[b]) continue;\n    // Sizes ease to their share of the room; a jelly no longer counted shrinks away.\n    const target = b \u003c count ? radiusFor(params, b, count) : 0;\n    r[b] += (target - r[b]) * 0.02;\n    if (b >= count && r[b] \u003c 1.2) {\n      on[b] = 0;\n      continue;\n    }\n    for (let k = 0; k \u003c M; k++) {\n      const i = b * M + k;\n      const vx = (px[i] - ox[i]) * 0.997;\n      const vy = (py[i] - oy[i]) * 0.997;\n      ox[i] = px[i];\n      oy[i] = py[i];\n      px[i] += vx + gx * dt2;\n      py[i] += vy + gy * dt2;\n    }\n  }\n\n  const kEdge = 0.9 - soft * 0.55;\n  const kSkip = 0.3 - soft * 0.27;\n  const kArea = 0.6 - soft * 0.35;\n  const kShape = 0.05 - soft * 0.042;\n  for (let it = 0; it \u003c ITER; it++) {\n    for (let b = 0; b \u003c B; b++) {\n      if (!on[b]) continue;\n      const o = b * M;\n      const R = r[b];\n      const edge = 2 * R * Math.sin(Math.PI / M);\n      const skip = 2 * R * Math.sin((2 * Math.PI) / M);\n      for (let k = 0; k \u003c M; k++) {\n        for (let s = 1; s \u003c= 2; s++) {\n          const i = o + k;\n          const j = o + ((k + s) % M);\n          const dx = px[j] - px[i];\n          const dy = py[j] - py[i];\n          const d = Math.sqrt(dx * dx + dy * dy) + 1e-6;\n          const f = ((d - (s === 1 ? edge : skip)) / d) * 0.5 * (s === 1 ? kEdge : kSkip);\n          px[i] += dx * f;\n          py[i] += dy * f;\n          px[j] -= dx * f;\n          py[j] -= dy * f;\n        }\n      }\n      // Pressure: push every mass out along the ring's normal until the area is back.\n      let area = 0;\n      let grad = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const j = o + ((k + 1) % M);\n        area += px[i] * py[j] - px[j] * py[i];\n        const n = o + ((k + 1) % M);\n        const p = o + ((k + M - 1) % M);\n        const gxk = 0.5 * (py[n] - py[p]);\n        const gyk = 0.5 * (px[p] - px[n]);\n        grad += gxk * gxk + gyk * gyk;\n      }\n      area *= 0.5;\n      const lambda = ((Math.PI * R * R - area) / (grad + 1e-6)) * kArea;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const n = o + ((k + 1) % M);\n        const p = o + ((k + M - 1) % M);\n        // The neighbours' positions have moved by a hair this pass; close enough for pressure.\n        px[i] += 0.5 * (py[n] - py[p]) * lambda;\n        py[i] += 0.5 * (px[p] - px[n]) * lambda;\n      }\n      // Shape matching: a weak pull back towards a circle turned the way the ring has\n      // turned. It lets a jelly squash but never tie itself in a knot.\n      let cx = 0;\n      let cy = 0;\n      for (let k = 0; k \u003c M; k++) {\n        cx += px[o + k];\n        cy += py[o + k];\n      }\n      cx /= M;\n      cy /= M;\n      let dot = 0;\n      let crs = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const qx = params.ringX[k];\n        const qy = params.ringY[k];\n        const dx = px[o + k] - cx;\n        const dy = py[o + k] - cy;\n        dot += qx * dx + qy * dy;\n        crs += qx * dy - qy * dx;\n      }\n      const m = Math.sqrt(dot * dot + crs * crs) + 1e-6;\n      const cs = (dot / m) * R;\n      const sn = (crs / m) * R;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const qx = params.ringX[k];\n        const qy = params.ringY[k];\n        px[i] += (cx + cs * qx - sn * qy - px[i]) * kShape;\n        py[i] += (cy + sn * qx + cs * qy - py[i]) * kShape;\n      }\n    }\n\n    centres(params);\n    // Jelly against jelly: masses of two rings keep a hair apart, and grip a little.\n    const reach = 1.4;\n    for (let a = 0; a \u003c B; a++) {\n      if (!on[a]) continue;\n      for (let b = a + 1; b \u003c B; b++) {\n        if (!on[b]) continue;\n        if (params.x0[a] - reach > params.x1[b] || params.x0[b] - reach > params.x1[a]) continue;\n        if (params.y0[a] - reach > params.y1[b] || params.y0[b] - reach > params.y1[a]) continue;\n        const r2 = reach * reach;\n        for (let k = 0; k \u003c M; k++) {\n          const i = a * M + k;\n          for (let m = 0; m \u003c M; m++) {\n            const j = b * M + m;\n            const dx = px[j] - px[i];\n            const dy = py[j] - py[i];\n            const d2 = dx * dx + dy * dy;\n            if (d2 >= r2) continue;\n            const d = Math.sqrt(d2) + 1e-6;\n            const f = ((reach - d) / d) * 0.5;\n            px[i] -= dx * f;\n            py[i] -= dy * f;\n            px[j] += dx * f;\n            py[j] += dy * f;\n            // A little grip where they touch, so a stack holds and a top one rolls off.\n            const fx = ((px[i] - ox[i]) - (px[j] - ox[j])) * 0.08;\n            const fy = ((py[i] - oy[i]) - (py[j] - oy[j])) * 0.08;\n            ox[i] += fx;\n            oy[i] += fy;\n            ox[j] -= fx;\n            oy[j] -= fy;\n          }\n        }\n      }\n    }\n\n    for (let a = 0; a \u003c B; a++) {\n      if (!on[a]) continue;\n      for (let b = 0; b \u003c B; b++) {\n        if (b === a || !on[b]) continue;\n        if (params.x0[a] > params.x1[b] || params.x0[b] > params.x1[a]) continue;\n        if (params.y0[a] > params.y1[b] || params.y0[b] > params.y1[a]) continue;\n        for (let k = 0; k \u003c M; k++) pushOut(params, a * M + k, b);\n      }\n    }\n\n    for (let b = 0; b \u003c B; b++) {\n      if (!on[b]) continue;\n      if (!inside[b]) {\n        if (params.y0[b] > 0.5 && params.y1[b] \u003c H - 0.5) inside[b] = 1;\n      }\n      for (let k = 0; k \u003c M; k++) {\n        const i = b * M + k;\n        if (px[i] \u003c 0.5) {\n          px[i] = 0.5;\n          oy[i] += (py[i] - oy[i]) * 0.3;\n        } else if (px[i] > W - 0.5) {\n          px[i] = W - 0.5;\n          oy[i] += (py[i] - oy[i]) * 0.3;\n        }\n        if (!inside[b]) continue;\n        if (py[i] > H - 0.5) {\n          py[i] = H - 0.5;\n          ox[i] += (px[i] - ox[i]) * 0.3;\n        } else if (py[i] \u003c 0.5) {\n          py[i] = 0.5;\n          ox[i] += (px[i] - ox[i]) * 0.3;\n        }\n      }\n    }\n  }\n}\n\nfunction simulate(params, dt, k, shake) {\n  const gravity = k[1];\n  const soft = Math.max(0, Math.min(1, k[2]));\n  const count = Math.max(4, Math.min(B, Math.round(k[3])));\n  // The jar rocks a little in the hand, so the pile keeps sliding and settling.\n  const tilt = Math.sin(params.t * 0.45) * 0.16;\n  const g = gravity * 150;\n  const gx = Math.sin(tilt) * g;\n  const gy = Math.cos(tilt) * g;\n  if (count !== params.count) setCount(params, count, g, false);\n  centres(params);\n\n  params.hop -= dt;\n  if (params.hop \u003c= 0 || shake) {\n    // One of them gives a hop, or with a shake all of them are thrown.\n    params.hop = 0.9 + Math.random() * 1.4;\n    const up = g > 25 ? -1 : g \u003c -25 ? 1 : Math.random() \u003c 0.5 ? -1 : 1;\n    const pick = Math.floor(Math.random() * params.count);\n    for (let b = 0; b \u003c B; b++) {\n      if (!params.on[b] || !params.inside[b]) continue;\n      if (!shake && b !== pick) continue;\n      const lift = shake ? 230 + Math.random() * 170 : 160 + Math.random() * 110;\n      nudge(params, b, (Math.random() - 0.5) * (shake ? 280 : 90), up * lift, (Math.random() - 0.5) * 6);\n    }\n  }\n\n  params.acc += dt;\n  let n = 0;\n  while (params.acc >= STEP && n \u003c 9) {\n    params.acc -= STEP;\n    params.t += STEP;\n    step(params, gx, gy, soft);\n    n++;\n  }\n  if (n === 9) params.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 4];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0] + 0.3;\n  if (!params.warm) {\n    params.warm = true;\n    setCount(params, Math.max(4, Math.min(B, Math.round(k[3]))), k[1], true);\n    for (let s = 0; s \u003c 90; s++) simulate(params, STEP, k, false);\n  }\n  simulate(params, dt, k, input.btnPressed && input.btnPressed[0]);\n}\n\nexport function draw(display, params, time) {\n  const { px, py, id, dist, cross, col, rim } = params;\n  id.fill(0);\n  centres(params);\n  for (let b = 0; b \u003c B; b++) {\n    if (!params.on[b]) continue;\n    // Neighbours a golden step apart round the wheel never land on the same colour.\n    const h = params.hue + b * 0.381966;\n    hsvInto(col, b * 3, h, 0.78, 1);\n    hsvInto(rim, b * 3, h + 0.03, 0.35, 1);\n    const o = b * M;\n    const yA = Math.max(0, Math.floor(params.y0[b]));\n    const yB = Math.min(H - 1, Math.ceil(params.y1[b]));\n    for (let y = yA; y \u003c= yB; y++) {\n      const sy = y + 0.5;\n      let n = 0;\n      for (let k = 0; k \u003c M; k++) {\n        const i = o + k;\n        const j = o + ((k + 1) % M);\n        const ya = py[i];\n        const yb = py[j];\n        if (ya \u003c= sy === yb \u003c= sy) continue;\n        const x = px[i] + ((sy - ya) * (px[j] - px[i])) / (yb - ya);\n        let m = n++;\n        while (m > 0 && cross[m - 1] > x) {\n          cross[m] = cross[m - 1];\n          m--;\n        }\n        cross[m] = x;\n      }\n      for (let c = 0; c + 1 \u003c n; c += 2) {\n        const xa = Math.max(0, Math.ceil(cross[c] - 0.5));\n        const xb = Math.min(W - 1, Math.floor(cross[c + 1] - 0.5));\n        for (let x = xa; x \u003c= xb; x++) id[y * W + x] = b + 1;\n      }\n    }\n  }\n\n  // How far each lit LED is from the edge of its own jelly, by a two-pass chamfer.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const v = id[o];\n      if (!v) continue;\n      const edge = x === 0 || x === W - 1 || y === 0 || y === H - 1 || id[o - 1] !== v || id[o + 1] !== v || id[o - W] !== v || id[o + W] !== v;\n      dist[o] = edge ? 0 : 99;\n    }\n  for (let y = 1; y \u003c H; y++)\n    for (let x = 1; x \u003c W - 1; x++) {\n      const o = y * W + x;\n      if (!id[o]) continue;\n      let d = dist[o];\n      if (dist[o - 1] + 1 \u003c d) d = dist[o - 1] + 1;\n      if (dist[o - W] + 1 \u003c d) d = dist[o - W] + 1;\n      if (dist[o - W - 1] + 1.41 \u003c d) d = dist[o - W - 1] + 1.41;\n      if (dist[o - W + 1] + 1.41 \u003c d) d = dist[o - W + 1] + 1.41;\n      dist[o] = d;\n    }\n  for (let y = H - 2; y >= 0; y--)\n    for (let x = W - 2; x >= 1; x--) {\n      const o = y * W + x;\n      if (!id[o]) continue;\n      let d = dist[o];\n      if (dist[o + 1] + 1 \u003c d) d = dist[o + 1] + 1;\n      if (dist[o + W] + 1 \u003c d) d = dist[o + W] + 1;\n      if (dist[o + W + 1] + 1.41 \u003c d) d = dist[o + W + 1] + 1.41;\n      if (dist[o + W - 1] + 1.41 \u003c d) d = dist[o + W - 1] + 1.41;\n      dist[o] = d;\n    }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const v = id[o];\n      if (!v) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const b = v - 1;\n      const c = b * 3;\n      const d = dist[o];\n      if (d \u003c 0.5) {\n        // A dark seam where two jellies touch keeps each one whole.\n        display.setPixel(x, y, col[c] * 0.22, col[c + 1] * 0.22, col[c + 2] * 0.22);\n        continue;\n      }\n      if (d \u003c 1.5) {\n        display.setPixel(x, y, rim[c] * 0.9, rim[c + 1] * 0.9, rim[c + 2] * 0.9);\n        continue;\n      }\n      const R = params.r[b];\n      const ex = (params.x1[b] - params.x0[b]) * 0.5 + 0.5;\n      const ey = (params.y1[b] - params.y0[b]) * 0.5 + 0.5;\n      // A dome: thin near the rim, full in the middle.\n      const u = Math.min(1, (d - 1) / (0.5 * R));\n      const dome = Math.sqrt(1 - (1 - u) * (1 - u));\n      let lv = 0.64 + 0.28 * dome;\n      // Light through the jelly gathers low and to the right, opposite the shine.\n      const gx = (x + 0.5 - params.cx[b] - ex * 0.25) / (ex * 0.6);\n      const gy = (y + 0.5 - params.cy[b] - ey * 0.3) / (ey * 0.55);\n      const glow = 1 - gx * gx - gy * gy;\n      if (glow > 0) lv += glow * 0.25;\n      let r = col[c] * lv;\n      let g = col[c + 1] * lv;\n      let bl = col[c + 2] * lv;\n      const sx = (x + 0.5 - params.cx[b] + ex * 0.4) / (ex * 0.28);\n      const sy = (y + 0.5 - params.cy[b] + ey * 0.45) / (ey * 0.2);\n      const shine = 1 - sx * sx - sy * sy;\n      if (shine > 0) {\n        const s = Math.min(1, shine * 1.8) * 0.85;\n        r += (235 - r) * s;\n        g += (235 - g) * s;\n        bl += (235 - bl) * s;\n      }\n      display.setPixel(x, y, Math.min(235, r), Math.min(235, g), Math.min(235, bl));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Gravity=-1..3, Softness=0..1, Count=4..12","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole bag of sweets round the colour wheel; each jelly sits a golden step round from the last, so no two match."},{"name":"Gravity","min":-1,"max":3,"about":"Heavy at 3, a slow float at 0, and below 0 the jar is upside down and they pile against the lid."},{"name":"Softness","min":0,"max":1,"about":"Firm gums at 0 that bounce and roll; at 1 water balloons that slump over each other."},{"name":"Count","min":4,"max":12,"about":"How many are in the jar; new ones fall in one after another, and every jelly shrinks to share the room."}],"start":[0,2,0,4],"measures":{"motion":0.4127,"detail":0.0345,"edges":0.4341,"complexity":0.5229,"coverage":0.4923,"colour":0.4252,"drift":0.1653},"knobResponse":[0.2349,0.3804,0.1184,0.2314]},{"slug":"kaleidoscope","title":"Kaleidoscope","family":"geometry","round":1,"note":"움직이는 선 세 벌이 유리 한 조각을 자르고 거울이 그 조각을 꽃으로 접어요. 조각 사이에 1 LED 검은 납선이 있어요.","idea":"Three sets of moving lines cut one wedge of glass into shards, and mirrors fold that wedge round the centre until it reads as a flower.","buttons":"K1 tap reverses the turn.","code":"// ===== Patternflow pattern =====\n// Title:   Kaleidoscope\n// Family:  geometry\n// Idea:    Three sets of moving lines cut one wedge of glass into shards, and mirrors fold that wedge round the centre until it reads as a flower.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.1..4, Segments=6..16, Twist=-1..1\n//\n// Knob 1: Hue. Turns the glass colours around the colour wheel.\n// Knob 2: Speed. How fast the shards slide and the mirrors turn.\n// Knob 3: Segments. How many mirrored wedges, in whole numbers; 6 is a snowflake, 16 a fine rosette.\n// Knob 4: Twist. Bends the wedges into a spiral, one way below 0 and the other way above.\n// Buttons: K1 tap reverses the turn.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// Hue offset, saturation and brightness of each kind of glass. A brightness\n// of 0 is dark glass, which leaves the gaps that let the symmetry read.\nconst GLASS = [\n  [0.0, 0.9, 1.0],\n  [0.0, 0.95, 0.5],\n  [0.07, 0.85, 0.9],\n  [-0.07, 0.9, 0.75],\n  [0.5, 0.75, 0.85],\n  [0.03, 0.35, 1.0],\n  [-0.15, 0.85, 0.85],\n  [0.0, 0.0, 0.0],\n  [0.0, 0.0, 0.0],\n  [0.0, 0.0, 0.0],\n];\n\n// Angle and spacing in LEDs of the three line families, in the folded wedge.\nconst LINES = [\n  [0.35, 11, 1.0],\n  [1.45, 13, -0.8],\n  [2.5, 9, 0.55],\n];\n\nexport function setup(params) {\n  const w = 64;\n  const h = 128;\n  params.radius = new Float32Array(w * h);\n  params.angle = new Float32Array(w * h);\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const dx = x - 31.5;\n      const dy = y - 63.5;\n      params.radius[y * w + x] = Math.hypot(dx, dy);\n      params.angle[y * w + x] = Math.atan2(dy, dx);\n    }\n  }\n  params.palette = new Float32Array(GLASS.length * 3);\n  params.turn = 0;\n  params.slide = 0;\n  params.dir = 1;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  params.hue = k[0];\n  params.speed = k[1];\n  params.segments = Math.max(2, Math.round(k[2]));\n  params.twist = k[3];\n  if (input.btnPressed && input.btnPressed[0]) params.dir = -params.dir;\n  params.turn += dt * params.speed * 0.1 * params.dir;\n  params.slide += dt * params.speed * 1.4;\n  for (let i = 0; i \u003c GLASS.length; i++) {\n    const c = hsv(params.hue + GLASS[i][0], GLASS[i][1], GLASS[i][2]);\n    params.palette[i * 3] = c[0];\n    params.palette[i * 3 + 1] = c[1];\n    params.palette[i * 3 + 2] = c[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const wedge = (Math.PI * 2) / params.segments;\n  const half = wedge / 2;\n  const twist = params.twist * 0.032;\n  const pal = params.palette;\n  const c0 = Math.cos(LINES[0][0]), s0 = Math.sin(LINES[0][0]);\n  const c1 = Math.cos(LINES[1][0]), s1 = Math.sin(LINES[1][0]);\n  const c2 = Math.cos(LINES[2][0]), s2 = Math.sin(LINES[2][0]);\n  const o0 = params.slide * LINES[0][2];\n  const o1 = params.slide * LINES[1][2];\n  const o2 = params.slide * LINES[2][2];\n  const g0 = LINES[0][1], g1 = LINES[1][1], g2 = LINES[2][1];\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const p = y * w + x;\n      const r = params.radius[p];\n      let a = params.angle[p] + params.turn + twist * r;\n      a -= Math.floor(a / wedge) * wedge;\n      if (a > half) a = wedge - a;\n      const u = r * Math.cos(a);\n      const v = r * Math.sin(a);\n      const q0 = (u * c0 + v * s0 + o0) / g0;\n      const q1 = (u * c1 + v * s1 + o1) / g1;\n      const q2 = (u * c2 + v * s2 + o2) / g2;\n      const i0 = Math.floor(q0), i1 = Math.floor(q1), i2 = Math.floor(q2);\n      // Distance in LEDs to the nearest line of lead between shards.\n      const e0 = Math.min(q0 - i0, i0 + 1 - q0) * g0;\n      const e1 = Math.min(q1 - i1, i1 + 1 - q1) * g1;\n      const e2 = Math.min(q2 - i2, i2 + 1 - q2) * g2;\n      const e = Math.min(e0, e1, e2);\n      if (e \u003c 0.45) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      let n = Math.imul(i0, 73856093) ^ Math.imul(i1, 19349663) ^ Math.imul(i2, 83492791);\n      n = Math.imul(n ^ (n >>> 13), 1274126177);\n      n = (n ^ (n >>> 16)) >>> 0;\n      const kind = n % GLASS.length;\n      if (GLASS[kind][2] === 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      // Each shard is brightest in its middle, like light through a bevel.\n      let lift = 0.5 + 0.5 * Math.min(1, (e - 0.45) / 3.5);\n      if (e \u003c 1.3) lift *= (e - 0.45) / 0.85;\n      display.setPixel(x, y, pal[kind * 3] * lift, pal[kind * 3 + 1] * lift, pal[kind * 3 + 2] * lift);\n    }\n  }\n}\n","layer":{"id":"layer-kaleidoscope","type":"code","name":"kaleidoscope","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kaleidoscope\n// Family:  geometry\n// Idea:    Three sets of moving lines cut one wedge of glass into shards, and mirrors fold that wedge round the centre until it reads as a flower.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.1..4, Segments=6..16, Twist=-1..1\n//\n// Knob 1: Hue. Turns the glass colours around the colour wheel.\n// Knob 2: Speed. How fast the shards slide and the mirrors turn.\n// Knob 3: Segments. How many mirrored wedges, in whole numbers; 6 is a snowflake, 16 a fine rosette.\n// Knob 4: Twist. Bends the wedges into a spiral, one way below 0 and the other way above.\n// Buttons: K1 tap reverses the turn.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// Hue offset, saturation and brightness of each kind of glass. A brightness\n// of 0 is dark glass, which leaves the gaps that let the symmetry read.\nconst GLASS = [\n  [0.0, 0.9, 1.0],\n  [0.0, 0.95, 0.5],\n  [0.07, 0.85, 0.9],\n  [-0.07, 0.9, 0.75],\n  [0.5, 0.75, 0.85],\n  [0.03, 0.35, 1.0],\n  [-0.15, 0.85, 0.85],\n  [0.0, 0.0, 0.0],\n  [0.0, 0.0, 0.0],\n  [0.0, 0.0, 0.0],\n];\n\n// Angle and spacing in LEDs of the three line families, in the folded wedge.\nconst LINES = [\n  [0.35, 11, 1.0],\n  [1.45, 13, -0.8],\n  [2.5, 9, 0.55],\n];\n\nexport function setup(params) {\n  const w = 64;\n  const h = 128;\n  params.radius = new Float32Array(w * h);\n  params.angle = new Float32Array(w * h);\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const dx = x - 31.5;\n      const dy = y - 63.5;\n      params.radius[y * w + x] = Math.hypot(dx, dy);\n      params.angle[y * w + x] = Math.atan2(dy, dx);\n    }\n  }\n  params.palette = new Float32Array(GLASS.length * 3);\n  params.turn = 0;\n  params.slide = 0;\n  params.dir = 1;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  params.hue = k[0];\n  params.speed = k[1];\n  params.segments = Math.max(2, Math.round(k[2]));\n  params.twist = k[3];\n  if (input.btnPressed && input.btnPressed[0]) params.dir = -params.dir;\n  params.turn += dt * params.speed * 0.1 * params.dir;\n  params.slide += dt * params.speed * 1.4;\n  for (let i = 0; i \u003c GLASS.length; i++) {\n    const c = hsv(params.hue + GLASS[i][0], GLASS[i][1], GLASS[i][2]);\n    params.palette[i * 3] = c[0];\n    params.palette[i * 3 + 1] = c[1];\n    params.palette[i * 3 + 2] = c[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const wedge = (Math.PI * 2) / params.segments;\n  const half = wedge / 2;\n  const twist = params.twist * 0.032;\n  const pal = params.palette;\n  const c0 = Math.cos(LINES[0][0]), s0 = Math.sin(LINES[0][0]);\n  const c1 = Math.cos(LINES[1][0]), s1 = Math.sin(LINES[1][0]);\n  const c2 = Math.cos(LINES[2][0]), s2 = Math.sin(LINES[2][0]);\n  const o0 = params.slide * LINES[0][2];\n  const o1 = params.slide * LINES[1][2];\n  const o2 = params.slide * LINES[2][2];\n  const g0 = LINES[0][1], g1 = LINES[1][1], g2 = LINES[2][1];\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const p = y * w + x;\n      const r = params.radius[p];\n      let a = params.angle[p] + params.turn + twist * r;\n      a -= Math.floor(a / wedge) * wedge;\n      if (a > half) a = wedge - a;\n      const u = r * Math.cos(a);\n      const v = r * Math.sin(a);\n      const q0 = (u * c0 + v * s0 + o0) / g0;\n      const q1 = (u * c1 + v * s1 + o1) / g1;\n      const q2 = (u * c2 + v * s2 + o2) / g2;\n      const i0 = Math.floor(q0), i1 = Math.floor(q1), i2 = Math.floor(q2);\n      // Distance in LEDs to the nearest line of lead between shards.\n      const e0 = Math.min(q0 - i0, i0 + 1 - q0) * g0;\n      const e1 = Math.min(q1 - i1, i1 + 1 - q1) * g1;\n      const e2 = Math.min(q2 - i2, i2 + 1 - q2) * g2;\n      const e = Math.min(e0, e1, e2);\n      if (e \u003c 0.45) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      let n = Math.imul(i0, 73856093) ^ Math.imul(i1, 19349663) ^ Math.imul(i2, 83492791);\n      n = Math.imul(n ^ (n >>> 13), 1274126177);\n      n = (n ^ (n >>> 16)) >>> 0;\n      const kind = n % GLASS.length;\n      if (GLASS[kind][2] === 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      // Each shard is brightest in its middle, like light through a bevel.\n      let lift = 0.5 + 0.5 * Math.min(1, (e - 0.45) / 3.5);\n      if (e \u003c 1.3) lift *= (e - 0.45) / 0.85;\n      display.setPixel(x, y, pal[kind * 3] * lift, pal[kind * 3 + 1] * lift, pal[kind * 3 + 2] * lift);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.1..4, Segments=6..16, Twist=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the glass colours around the colour wheel."},{"name":"Speed","min":0.1,"max":4,"about":"How fast the shards slide and the mirrors turn."},{"name":"Segments","min":6,"max":16,"about":"How many mirrored wedges, in whole numbers; 6 is a snowflake, 16 a fine rosette."},{"name":"Twist","min":-1,"max":1,"about":"Bends the wedges into a spiral, one way below 0 and the other way above."}],"start":[0,2,6,0.06],"measures":{"motion":0.9384,"detail":0.1125,"edges":0.4099,"complexity":1.6131,"coverage":0.5499,"colour":0.359,"drift":0.2217},"knobResponse":[0.1659,0.2298,0.1535,0.1426]},{"slug":"kettle","title":"Kettle","family":"kitchen","round":20,"note":"밤 부엌 조리대의 유리 전기 주전자가 128줄을 다 써요. 받침의 파란 LED 고리가 물을 밑에서 밝히는 동안 열판의 잔 기포가 떠올랐다 꺼지는 철을 지나 큰 기포가 들끓고, 김이 주둥이에서 패널 꼭대기까지 오르다가 스위치가 딸깍 꺼져요. K1 을 누르면 바로 켜거나 꺼요.","idea":"A glass electric kettle on a dark kitchen counter at night heats under the blue light of its LED ring, from bubbles clinging to the element through the hiss to a rolling boil, its steam fogging the glass and rising from the spout to the top of the panel, until the switch clicks off, the light goes out and someone switches it on again.","buttons":"K1 tap switches the kettle on or off now.","code":"// ===== Patternflow pattern =====\n// Title:   Kettle\n// Family:  kitchen\n// Idea:    A glass electric kettle on a dark kitchen counter at night heats under the blue light of its LED ring, from bubbles clinging to the element through the hiss to a rolling boil, its steam fogging the glass and rising from the spout to the top of the panel, until the switch clicks off, the light goes out and someone switches it on again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the stages of water coming to the boil in a glass kettle\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Fill=1..1.7, Cold=0..1\n//\n// Knob 1: Light. The colour of the LED ring in the base and of everything it lights: blue at 0, then teal, green and violet, to a warm amber at 1.\n// Knob 2: Speed. How fast the water heats and everything moves: at 2 the kettle comes to the boil, boils 3.5 s, clicks off and is switched on again 5 s later, about 15 s a round; at 0.2 it all runs ten times slower.\n// Knob 3: Fill. How much water is in the kettle, from one litre to the 1.7 L MAX line on the gauge; a full kettle takes about twice as long to come to the boil.\n// Knob 4: Cold. How cold the kitchen is: in a warm one the steam thins out on its way up; in a cold one it billows to the ceiling, the glass above the water fogs over and drops run down it.\n// Buttons: K1 tap switches the kettle on or off now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The body's middle column, the first glass row under the rim band, and the\n// last row of water, which lies on the element plate.\nconst CX = 31;\nconst TOP = 37;\nconst BOT = 100;\n// Steam is kept at half resolution.\nconst SW = 32;\nconst SH = 64;\nconst MAXB = 280;\nconst MAXP = 190;\nconst MAXS = 60;\nconst NSITE = 18;\nconst ND = 150;\nconst NC = 46;\n// LED colours from blue through teal, green and violet to amber.\nconst LEDS = [[40, 110, 255], [0, 205, 225], [40, 235, 100], [160, 70, 255], [255, 160, 60]];\nconst { min, max, round, floor, sin, exp, abs, hypot } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Inner half-width of the glass, a little wider at the foot.\nconst HW = Float32Array.from({ length: H }, (_, y) => 14 + (3 * (clamp(y, TOP, BOT) - TOP)) / (BOT - TOP));\nconst wallL = (y) => CX - round(HW[clamp(y, 0, H - 1)]);\nconst wallR = (y) => CX + round(HW[clamp(y, 0, H - 1)]);\nconst EX12 = Float32Array.from({ length: 128 }, (_, i) => exp(-i / 12));\nconst EDGE = Float32Array.from({ length: 64 }, (_, i) => exp(-(i - 1) / 1.6));\nconst EX6 = Float32Array.from({ length: 128 }, (_, i) => exp(-i / 6));\n// The 3x5 letters of MAX on the gauge.\nconst MAXT = [\"101111101\", \"111101101\", \"101111010\", \"101101101\", \"101101101\"];\n// The lid, row by row from its knob: half-widths.\nconst LID = [2, 2, 8, 10, 11, 12, 13, 13];\n\n// Smooth value noise, wrapping both ways.\nfunction noise(w, h, cell, oct) {\n  const out = new Float32Array(w * h);\n  let amp = 1;\n  let tot = 0;\n  for (let o = 0; o \u003c oct; o++, cell /= 2, amp *= 0.5) {\n    const gw = w / cell;\n    const gh = h / cell;\n    const g = Float32Array.from({ length: gw * gh }, rnd);\n    const at = (i, j) => g[(j % gh) * gw + (i % gw)];\n    for (let y = 0; y \u003c h; y++) {\n      const j = floor(y / cell);\n      const ty = smooth(0, 1, y / cell - j);\n      for (let x = 0; x \u003c w; x++) {\n        const i = floor(x / cell);\n        const tx = smooth(0, 1, x / cell - i);\n        const a = at(i, j) + (at(i + 1, j) - at(i, j)) * tx;\n        const b = at(i, j + 1) + (at(i + 1, j + 1) - at(i, j + 1)) * tx;\n        out[y * w + x] += amp * (a + (b - a) * ty);\n      }\n    }\n    tot += amp;\n  }\n  for (let i = 0; i \u003c out.length; i++) out[i] /= tot;\n  return out;\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), S: F(SW * SH), wipe: F(N), tile: F(N), grain: F(N), sh: F(W), sv: F(W), led: F(3), sr: new Int16Array(W) });\n  for (const k of [\"bx\", \"by\", \"br\", \"bv\", \"bp\", \"be\", \"bm\"]) P[k] = F(MAXB);\n  P.pArr = [\"px\", \"py\", \"pvx\", \"pvy\", \"pr\", \"pa\", \"pg\", \"pl\"].map((k) => (P[k] = F(MAXP)));\n  for (const k of [\"dx\", \"dy\", \"dvx\", \"dvy\"]) P[k] = F(MAXS);\n  // Subway tiles behind the counter, each a little different.\n  const shade = Float32Array.from({ length: 512 }, () => 0.85 + 0.2 * rnd());\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const band = y >> 2;\n      const u = x + (band & 1) * 4;\n      const grout = (y & 3) === 3 || (u & 7) === 7;\n      P.tile[y * W + x] = grout ? 0.5 : shade[(band * 9 + (u >> 3)) & 511] * ((y & 3) === 0 ? 1.1 : 1);\n      P.grain[y * W + x] = (rnd() - 0.5) * 9;\n    }\n  // Blotchy condensation, and the wisps the steam carries.\n  P.fogTex = noise(W, H, 16, 2).map((v) => 0.3 + 1.7 * v * v);\n  P.wisp = noise(SW, SH, 8, 3);\n  P.siteX = Float32Array.from({ length: NSITE }, (_, i) => 17 + ((i + 0.2 + 0.6 * rnd()) * 29) / NSITE);\n  P.siteW = Float32Array.from({ length: NSITE }, () => 0.5 + rnd());\n  P.acc = F(NSITE);\n  // Drops of condensation on the inside of the glass, each with the fog it needs.\n  P.qx = new Int8Array(ND);\n  P.qy = new Int16Array(ND);\n  P.qt = F(ND);\n  for (let i = 0; i \u003c ND; i++) {\n    const y = TOP + 1 + floor(rnd() * 60);\n    P.qy[i] = y;\n    P.qx[i] = wallL(y) + 1 + floor(rnd() * (wallR(y) - wallL(y) - 1));\n    P.qt[i] = 0.12 + 0.85 * rnd();\n  }\n  // Tiny bubbles that cling to the plate and the foot of the glass.\n  P.cx = new Int8Array(NC);\n  P.cy = new Int16Array(NC);\n  P.ct = F(NC);\n  for (let i = 0; i \u003c NC; i++) {\n    const side = i \u003c 30 ? 0 : i & 1 ? -1 : 1;\n    const y = side ? 72 + floor(rnd() * 28) : BOT - (rnd() \u003c 0.3 ? 1 : 0);\n    P.cy[i] = y;\n    P.cx[i] = side \u003c 0 ? wallL(y) + 1 : side > 0 ? wallR(y) - 1 : 16 + floor(rnd() * 31);\n    P.ct[i] = rnd() * 0.85;\n  }\n  P.runners = [];\n  Object.assign(P, { started: false, t: 0, on: true, T: 0.27, Pw: 1, I: 1, hold: 0, off: 0, F: 0, nb: 0, np: 0, ns: 0, eAcc: 0, lAcc: 0, cold: 0.06, m: 1, surf0: 69, fill: 1, hue: 0 });\n}\n\nfunction toggle(P, on) {\n  P.on = on;\n  P.hold = 0;\n  P.off = 0;\n}\n\nfunction release(P, s, reach) {\n  if (P.nb >= MAXB) return;\n  const i = P.nb++;\n  const depth = BOT - P.surf0;\n  P.bx[i] = P.siteX[s] + (rnd() - 0.5) * 1.5;\n  P.by[i] = BOT;\n  P.br[i] = 0.5 + 0.35 * rnd() + 0.5 * P.boilF;\n  P.bv[i] = -3;\n  P.bp[i] = rnd() * 6.3;\n  P.bm[i] = 0.55 + 0.6 * rnd();\n  // Below the boil a bubble collapses on its way up, higher as the water heats.\n  P.be[i] = rnd() \u003c reach * reach ? -99 : BOT - depth * reach * (0.3 + 0.65 * rnd());\n}\n\nfunction puff(P, x, y, vx, vy, r, a) {\n  if (P.np >= MAXP) return;\n  const i = P.np++;\n  const v = [x, y, vx, vy, r, a * (0.45 + 1.4 * P.cold), 0, (3.4 + 3.6 * P.cold) * (0.8 + 0.4 * rnd())];\n  for (let n = 0; n \u003c 8; n++) P.pArr[n][i] = v[n];\n}\n\nfunction burst(P, c, r) {\n  P.sv[c] -= 5 + 9 * r;\n  if (r > 1.1 && P.ns \u003c MAXS && rnd() \u003c 0.6) {\n    const i = P.ns++;\n    P.dx[i] = c;\n    P.dy[i] = P.surf0 + P.sh[c] - 1;\n    P.dvx[i] = (rnd() - 0.5) * 12;\n    P.dvy[i] = -(14 + 22 * rnd()) * (0.5 + r / 3);\n  }\n}\n\nfunction step(P, h) {\n  P.t += h;\n  if (P.on) {\n    // A full kettle takes longer to come to the boil.\n    P.T = min(1, P.T + (0.11 * h) / P.fill ** 1.3);\n    if (P.T >= 1 && (P.hold += h) >= 3.5) toggle(P, false);\n  } else {\n    P.T = 0.15 + (P.T - 0.15) * exp(-h / 3.5);\n    if ((P.off += h) >= 5) toggle(P, true);\n  }\n  const on = P.on ? 1 : 0;\n  P.Pw += (on - P.Pw) * (1 - exp(-h / (on ? 0.4 : 0.6)));\n  P.I += (on - P.I) * (1 - exp(-h / (on ? 0.12 : 0.25)));\n  const T = P.T;\n  P.hissF = smooth(0.45, 0.7, T);\n  P.boilF = smooth(0.8, 1, T);\n  P.cling = smooth(0.22, 0.5, T);\n  const reach = smooth(0.5, 0.95, T);\n  const steam = smooth(0.5, 1, T) * (0.2 + 0.8 * P.Pw);\n  const fogT = smooth(0.45, 0.95, T) * (0.3 + 0.7 * P.cold);\n  P.F += (fogT - P.F) * (1 - exp(-h / (fogT > P.F ? 1 : 7)));\n\n  // Bubbles: released from the sites on the plate, rising, wobbling, and\n  // either collapsing in cooler water or bursting at the surface.\n  const rate = P.Pw * (1.3 * P.hissF * (1 - 0.6 * P.boilF) + 1.1 * P.boilF);\n  for (let s = 0; s \u003c NSITE; s++) {\n    P.acc[s] += rate * P.siteW[s] * h;\n    for (; P.acc[s] >= 1; P.acc[s]--) release(P, s, reach);\n  }\n  const { bx, by, br, bv, bp, be, bm, sh, sv } = P;\n  for (let i = 0; i \u003c P.nb; ) {\n    bv[i] += (-(9 + 9 * br[i]) - bv[i]) * (1 - exp(-2 * h));\n    by[i] += bv[i] * h;\n    bp[i] += (6 + 3 * br[i]) * h;\n    bx[i] = clamp(bx[i] + sin(bp[i]) * 4 * h * br[i], wallL(by[i] | 0) + 1.5, wallR(by[i] | 0) - 1.5);\n    let dead = false;\n    if (by[i] \u003c be[i] + 3) {\n      br[i] -= 2.5 * h;\n      dead = br[i] \u003c 0.3;\n    } else if (P.boilF > 0.2) br[i] = min(P.bm[i] * (1 + 2.2 * P.boilF), br[i] + 2 * P.boilF * h);\n    const c = round(bx[i]);\n    if (!dead && by[i] - br[i] * 0.5 \u003c= P.surf0 + sh[c]) {\n      burst(P, c, br[i]);\n      dead = true;\n    }\n    if (dead) {\n      const j = --P.nb;\n      for (const A of [bx, by, br, bv, bp, be, bm]) A[i] = A[j];\n    } else i++;\n  }\n\n  // The surface: a damped string, kicked by bursts and by the churn of the boil.\n  const L = wallL(P.surf0 | 0) + 1;\n  const R = wallR(P.surf0 | 0) - 1;\n  const n = Math.ceil(h * 60);\n  for (let k = 0; k \u003c n; k++) {\n    const d = h / n;\n    for (let x = L; x \u003c= R; x++) {\n      const a = 300 * (sh[max(L, x - 1)] + sh[min(R, x + 1)] - 2 * sh[x]) - 40 * sh[x] - 5 * sv[x];\n      sv[x] += a * d;\n    }\n    for (let x = L; x \u003c= R; x++) sh[x] = clamp(sh[x] + sv[x] * d, -4, 3);\n  }\n  if (rnd() \u003c 14 * P.boilF * P.Pw * h) sv[L + floor(rnd() * (R - L + 1))] += (rnd() - 0.65) * 50 * P.boilF;\n  for (let i = 0; i \u003c P.ns; ) {\n    P.dvy[i] += 150 * h;\n    P.dx[i] = clamp(P.dx[i] + P.dvx[i] * h, L, R);\n    P.dy[i] += P.dvy[i] * h;\n    if (P.dvy[i] > 0 && P.dy[i] > P.surf0 + sh[round(P.dx[i])]) {\n      const j = --P.ns;\n      for (const A of [P.dx, P.dy, P.dvx, P.dvy]) A[i] = A[j];\n    } else i++;\n  }\n\n  // Steam out of the spout, in puffs at the boil, and round the lid.\n  P.eAcc += 36 * steam * (1 + P.boilF * P.Pw * (1.2 * max(0, sin(P.t * 5.5)) - 0.35)) * h;\n  for (; P.eAcc >= 1; P.eAcc--) puff(P, 9 + rnd() * 2, 33.5, -1 - 2 * rnd(), -8 - 6 * rnd(), 1.6, 0.8 + 0.5 * rnd());\n  P.lAcc += 7 * steam * P.boilF * h;\n  for (; P.lAcc >= 1; P.lAcc--) puff(P, 21 + rnd() * 20, 29, (rnd() - 0.5) * 3, -4 - 4 * rnd(), 1.8, 0.45 + 0.3 * rnd());\n  const { px, py, pvx, pvy, pr, pg, pl } = P;\n  const ry = 1 - exp(-h);\n  const rx = 1 - exp(-h / 0.8);\n  const grow = 3.6 + 2 * P.cold;\n  for (let i = 0; i \u003c P.np; ) {\n    pg[i] += h;\n    const wind = 8 + 3 * sin(0.07 * py[i] + 0.4 * P.t) + 2 * sin(0.17 * P.t + 1.3);\n    pvy[i] += (-12 - pvy[i]) * ry;\n    pvx[i] += (wind - pvx[i]) * rx + (rnd() - 0.5) * 24 * h;\n    px[i] += pvx[i] * h;\n    py[i] += pvy[i] * h;\n    pr[i] += grow * h;\n    if (pg[i] > pl[i] || py[i] + pr[i] \u003c -2 || px[i] > W + 12) {\n      const j = --P.np;\n      for (const A of P.pArr) A[i] = A[j];\n    } else i++;\n  }\n\n  // Drops that grow heavy run down through the fog and wipe a clear line.\n  const { wipe, runners } = P;\n  const keep = exp(-h / 6);\n  for (let y = TOP; y \u003c= BOT; y++) for (let x = 14; x \u003c= 48; x++) wipe[y * W + x] *= keep;\n  if (P.F > 0.4 && runners.length \u003c 6 && rnd() \u003c (P.F - 0.4) * (0.6 + 1.6 * P.cold) * h) {\n    const y = TOP + 1 + rnd() * 8;\n    runners.push([wallL(y | 0) + 2 + rnd() * (wallR(y | 0) - wallL(y | 0) - 4), y, 4 + 6 * rnd(), rnd() * 6]);\n  }\n  P.runners = runners.filter((r) => {\n    r[3] += h * 3;\n    r[1] += r[2] * h * (0.25 + 0.75 * max(0, sin(r[3])));\n    const p = (r[1] | 0) * W + (r[0] | 0);\n    wipe[p] = 1;\n    return r[1] \u003c P.surf0 + sh[r[0] | 0] - 1;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.m = clamp(k[1], 0.2, 3) / 2;\n  P.fill = clamp(k[2], 1, 1.7);\n  P.surf0 = 101 - (P.fill / 1.7) * 55;\n  P.cold = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Open in the hiss, three seconds after the bubbles began to cling.\n    for (let i = 0; i \u003c 30; i++) step(P, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) toggle(P, !P.on);\n  step(P, dt * P.m);\n}\n\nfunction add(P, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) P.buf[o + i] += c[i] * v;\n}\n\n// Bubbles lighten the water, so where they crowd it turns pale, not white.\nfunction lift(P, x, y, c, v) {\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) P.buf[o + i] = max(P.buf[o + i], P.buf[o + i] * 0.5 + c[i] * v);\n}\n\nfunction put(P, o, r, g, b) {\n  P.buf[o] = r;\n  P.buf[o + 1] = g;\n  P.buf[o + 2] = b;\n}\n\n// The tiled wall, lit by the kettle; the counter top with its pool of light\n// and the ring's reflection; the counter's edge and the cupboard below.\nfunction room(P) {\n  const { led, tile } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const yy = clamp(y, P.surf0, 106);\n    const dy = y - yy;\n    const hw = HW[yy | 0];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const ex = (x - CX) / 17;\n      let g;\n      let a = tile[p];\n      let b = a * 4;\n      if (y \u003c 117) {\n        const dx = max(0, abs(x - CX) - hw);\n        g = (a * 100) / (1 + (dx * dx + dy * dy) / 70);\n      } else if (y \u003c 124) {\n        g = 150 * exp(-ex * ex - ((y - 117) / 4) ** 2) + (y === 118 && x >= 14 && x \u003c= 48 ? (x % 3 === 1 ? 70 : 49) : 0);\n        b = 7 + P.grain[p];\n        a = 1;\n      } else {\n        g = (y === 124 ? 60 : 12) * exp(-ex * ex * 0.6);\n        b = y === 124 ? 28 : 6;\n        a = 0.75;\n      }\n      g *= P.I;\n      put(P, p * 3, b + g * led[0], b + a + g * led[1], b + 4 * a + g * led[2]);\n    }\n  }\n}\n\n// The glass: its walls, the water, the fog and drops above it, the spout.\nfunction glass(P) {\n  const { buf, led, sh, sr, fogTex, wipe } = P;\n  const I = P.I;\n  const F = P.F;\n  const t = P.t;\n  const hot = smooth(0.3, 1, P.T);\n  const milk = 0.35 * P.boilF * P.Pw;\n  const shim = 0.06 + 0.16 * hot;\n  const wc = [0, 1, 2].map((i) => 210 * (led[i] * (1 - milk) + milk));\n  const fc = [0, 1, 2].map((i) => 255 * (0.5 * led[i] + 0.5) * (0.12 + 0.75 * I));\n  for (let x = 0; x \u003c W; x++) sr[x] = round(P.surf0 + sh[x]);\n  const glass = (o, v, a) => put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 6 + 255 * v * led[2]);\n  const fog = (o, p, y, s) => {\n    const f = F * fogTex[p] * (0.55 + 1.1 * EX12[min(127, s - y)] + 0.4 * EX6[max(0, y - TOP)]) * (1 - wipe[p]);\n    for (let i = 0; i \u003c 3; i++) buf[o + i] = buf[o + i] * 0.7 + f * fc[i];\n  };\n  for (let y = TOP; y \u003c= BOT; y++) {\n    const l = wallL(y);\n    const r = wallR(y);\n    const lw = I * (0.32 + 0.68 * exp((y - BOT) / 30)) * (1 + 0.3 * milk);\n    const row = ((y + floor(t * 9)) & 127) * W;\n    for (let x = l; x \u003c= r; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const s = sr[x];\n      if (x === l || x === r) {\n        if (x === l && y \u003c= 46) glass(o, (y & 1 ? 0.1 : 0.04) + 0.12 * I, y & 1 ? 40 : 18);\n        else glass(o, y >= s ? 0.25 * I + 0.85 * lw : 0.07 * I + 0.25 * F * I, 26);\n      } else if (y >= s) {\n        let v = lw * (1 + shim * (fogTex[row + x] - 0.8) + 0.3 * EDGE[min(x - l, r - x)]);\n        if (y === s) v = v * 1.35 + 0.18 * I;\n        put(P, o, 4 + v * wc[0], 6 + v * wc[1], 10 + v * wc[2]);\n      } else fog(o, p, y, s);\n    }\n  }\n  // The spout: a glass lip leaning out to the left, the filter where the wall was.\n  for (let y = 34; y \u003c= 46; y++) {\n    const xs = round(9 + ((y - 34) * 8) / 12);\n    for (let x = xs; x \u003c 17; x++) {\n      const o = (y * W + x) * 3;\n      if (x === xs || y === 34) glass(o, 0.05 + 0.1 * I + 0.15 * F * I, 30);\n      else fog(o, y * W + x, y, round(P.surf0));\n    }\n  }\n}\n\n// What changes only with the light, the water level and the switch: the rim\n// band, the lid and its knob, the plate, the LED ring and the base.\nfunction shell(P) {\n  const { led } = P;\n  const I = P.I;\n  const glass = (o, v, a) => put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 6 + 255 * v * led[2]);\n  for (let y = 35; y \u003c= 36; y++)\n    for (let x = 17; x \u003c= 45; x++) {\n      const v = (y === 35 ? 0.8 : 0.5) + (x === 22 || x === 23 ? 0.6 : 0);\n      put(P, (y * W + x) * 3, 30 * v + 70 * I * v * led[0], 31 * v + 70 * I * v * led[1], 36 * v + 70 * I * v * led[2]);\n    }\n  for (let j = 0; j \u003c LID.length; j++) {\n    const y = 27 + j;\n    for (let x = CX - LID[j]; x \u003c= CX + LID[j]; x++) {\n      const edge = j === 0 || (j === 2 && abs(x - CX) > 2) || (j > 2 && abs(x - CX) > LID[j - 1]);\n      let v = j === 7 ? 6 : 13 + (x \u003c CX ? 4 : 0);\n      if (edge) v += x \u003c CX ? 30 : 18;\n      put(P, (y * W + x) * 3, v, v, v + 3);\n    }\n  }\n  // The element plate, the LED ring under the glass, the base and its stand.\n  for (let y = 101; y \u003c= 116; y++) {\n    const x0 = y \u003c= 105 ? 14 : y \u003c= 111 ? 13 : y === 112 || y === 116 ? 11 : 10;\n    for (let x = x0; x \u003c= 2 * CX - x0; x++) {\n      const o = (y * W + x) * 3;\n      if (y \u003c= 103) {\n        if (x === 14 || x === 48) glass(o, 0.2 + 0.7 * I, 26);\n        else {\n          const v = [0.5, 0.3, 0.45][y - 101] * I;\n          const a = [40, 26, 13][y - 101];\n          put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n        }\n      } else if (y \u003c= 105) {\n        const v = I * (y === 104 ? (x % 3 === 1 ? 1 : 0.72) : 0.42);\n        const a = 16 * (1 - I);\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 255 * v * led[2]);\n      } else if (y \u003c= 111) {\n        const c = 0.45 + 0.55 * exp(-(((x - 24) / 12) ** 2));\n        const v = 0.3 * I * exp(-(y - 106) / 1.5);\n        const a = 34 * c * (1 - (y - 106) * 0.06);\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n      } else {\n        const v = y === 112 ? 0.4 * I * exp(-(((x - CX) / 18) ** 2)) : 0.03 * I;\n        const a = y === 112 ? 30 : 14;\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n      }\n    }\n  }\n}\n\n// Signed distance to a rounded rectangle.\nfunction box(x, y, x0, y0, x1, y1, r) {\n  const qx = abs(x - (x0 + x1) / 2) - (x1 - x0) / 2 + r;\n  const qy = abs(y - (y0 + y1) / 2) - (y1 - y0) / 2 + r;\n  return hypot(max(qx, 0), max(qy, 0)) + min(max(qx, qy), 0) - r;\n}\n\n// The black handle, its inner face lit by the glass, and the switch at its foot.\nfunction handle(P) {\n  const { led } = P;\n  const I = P.I;\n  for (let y = 37; y \u003c= 105; y++) {\n    const lw = I * (0.25 + 0.75 * exp((y - BOT) / 24));\n    for (let x = wallR(y) + 1; x \u003c= 59; x++) {\n      const out = box(x, y, 38, 37, 58, 105, 8);\n      const inn = box(x, y, 38, 45, 52.5, 96, 5);\n      if (out > 0 || inn \u003c 0) continue;\n      let a = 11 + (x === 55 && y > 46 && y \u003c 95 ? 9 : 0);\n      if (out > -1.2) a += y \u003c 50 || x \u003c 50 ? 26 : 14;\n      const v = inn \u003c 1.4 && x > 50 ? 0.3 * lw : inn \u003c 1.4 && y > 95 ? 0.18 * lw : 0;\n      put(P, (y * W + x) * 3, a + 255 * v * led[0], a + 255 * v * led[1], a + 3 + 255 * v * led[2]);\n    }\n  }\n  // The rocker tips as it clicks; its light shows the kettle is on.\n  const o = P.on ? 0 : 1;\n  for (let y = 99; y \u003c= 102; y++)\n    for (let x = 53; x \u003c= 56; x++) {\n      const lit = y === 101 + o && (x === 54 || x === 55);\n      const v = lit ? 0.4 + 0.6 * I : 0;\n      const a = lit ? 20 : y === 99 + o ? 58 : 34;\n      put(P, (y * W + x) * 3, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n    }\n}\n\n// Level marks printed on the glass: every quarter litre from 0.5, and MAX at 1.7.\nfunction gauge(P) {\n  const { led, sr } = P;\n  const I = P.I;\n  const ink = (x, y) => {\n    const wet = y >= sr[x];\n    const v = wet ? 30 + 150 * I * (0.25 + 0.75 * exp((y - BOT) / 24)) : 34 + 50 * I;\n    const o = (y * W + x) * 3;\n    for (let i = 0; i \u003c 3; i++) P.buf[o + i] = v * (0.7 + 0.3 * led[i]);\n  };\n  for (const L of [0.5, 0.75, 1, 1.25, 1.5, 1.7]) {\n    const y = round(101 - (L / 1.7) * 55);\n    const len = L === 1.7 ? 5 : L % 0.5 ? 2 : 4;\n    for (let i = 0; i \u003c len; i++) ink(wallL(y) + 2 + i, y);\n  }\n  for (let j = 0; j \u003c 5; j++) for (let i = 0; i \u003c 9; i++) if (MAXT[j][i] === \"1\") ink(25 + i + (i > 2) + (i > 5), 44 + j);\n}\n\nfunction bubbles(P) {\n  const { led, sr, bx, by, br } = P;\n  const I = P.I;\n  const k = 0.3 + 0.7 * I;\n  const bc = [0, 1, 2].map((i) => (0.45 * led[i] + 0.55) * k);\n  const wet = (x, y) => x >= 0 && x \u003c W && y >= sr[x] && y \u003c= BOT;\n  for (let i = 0; i \u003c NC; i++) {\n    const v = P.cling - P.ct[i];\n    if (v > 0 && wet(P.cx[i], P.cy[i])) add(P, P.cx[i], P.cy[i], bc, min(1, v * 4) * 150 * (0.8 + 0.2 * sin(P.t * 9 + i)));\n  }\n  for (let i = 0; i \u003c P.nb; i++) {\n    const r = br[i];\n    if (r \u003c 0.9) {\n      if (wet(round(bx[i]), round(by[i]))) lift(P, round(bx[i]), round(by[i]), bc, 150);\n      continue;\n    }\n    for (let y = floor(by[i] - r); y \u003c= Math.ceil(by[i] + r); y++)\n      for (let x = floor(bx[i] - r); x \u003c= Math.ceil(bx[i] + r); x++) {\n        const d = hypot(x - bx[i], y - by[i]);\n        if (d > r + 0.5 || !wet(x, y)) continue;\n        const e = abs(d - r);\n        if (e \u003c 0.7) lift(P, x, y, bc, 150);\n        else if (d \u003c 0.8 && x \u003c bx[i]) lift(P, x, y, bc, 120);\n      }\n  }\n  for (let i = 0; i \u003c P.ns; i++) if (P.dy[i] >= TOP) add(P, round(P.dx[i]), round(P.dy[i]), bc, 140);\n  // Drops of condensation, and the ones running down.\n  const fc = [0, 1, 2].map((i) => 0.6 * led[i] + 0.4);\n  for (let i = 0; i \u003c ND; i++) {\n    const x = P.qx[i];\n    const y = P.qy[i];\n    const v = P.F - P.qt[i];\n    if (v > 0 && y \u003c sr[x] - 1) add(P, x, y, fc, min(1, v * 2.5) * (25 + 120 * I) * (1 - P.wipe[y * W + x]));\n  }\n  for (const [x, y] of P.runners) add(P, x | 0, y | 0, fc, 40 + 150 * I);\n}\n\n// Steam: puffs splatted at half resolution, broken into wisps, lit from below\n// by the glass and faintly by the night.\nfunction steam(P) {\n  const { S, wisp, px, py, pr, pa, pg, pl, led, buf } = P;\n  S.fill(0);\n  for (let i = 0; i \u003c P.np; i++) {\n    const a = pa[i] * min(1, pg[i] / 0.3) * (1 - pg[i] / pl[i]) ** 1.6;\n    const cx = px[i] / 2;\n    const cy = py[i] / 2;\n    const r = pr[i] / 2;\n    const r2 = r * r;\n    for (let y = max(0, floor(cy - r)); y \u003c= min(SH - 1, Math.ceil(cy + r)); y++)\n      for (let x = max(0, floor(cx - r)); x \u003c= min(SW - 1, Math.ceil(cx + r)); x++) {\n        const d = ((x - cx) ** 2 + (y - cy) ** 2) / r2;\n        if (d \u003c 1) S[y * SW + x] += a * (1 - d) * (1 - d);\n      }\n  }\n  const off = P.t * 2.2;\n  const j0 = floor(off);\n  const f = off - j0;\n  for (let y = 0; y \u003c 26; y++)\n    for (let x = 0; x \u003c SW; x++) {\n      const a = wisp[((y + j0) % SH) * SW + x];\n      const b = wisp[((y + j0 + 1) % SH) * SW + x];\n      S[y * SW + x] *= 0.4 + 1.3 * (a + (b - a) * f);\n    }\n  const I = P.I;\n  const sc = [0, 1, 2].map((i) => 0.55 * led[i] + 0.45 * [0.9, 0.95, 1][i]);\n  for (let y = 0; y \u003c 50; y++) {\n    const light = 30 + I * 170 * (0.45 + 0.55 * exp(-max(0, 36 - y) / 30));\n    const hy = clamp(y / 2 - 0.25, 0, SH - 1.001);\n    const y0 = floor(hy);\n    const fy = hy - y0;\n    for (let x = 0; x \u003c W; x++) {\n      const hx = clamp(x / 2 - 0.25, 0, SW - 1.001);\n      const x0 = floor(hx);\n      const fx = hx - x0;\n      const q = y0 * SW + x0;\n      const top = S[q] + (S[q + 1] - S[q]) * fx;\n      const bot = S[q + SW] + (S[q + SW + 1] - S[q + SW]) * fx;\n      const v = top + (bot - top) * fy;\n      if (v \u003c 0.003) continue;\n      const s = (1 - exp(-1.4 * v)) * light;\n      const o = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[o + i] += s * sc[i];\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, led } = P;\n  const f = P.hue * 4;\n  const li = min(3, floor(f));\n  for (let c = 0; c \u003c 3; c++) led[c] = (LEDS[li][c] + (LEDS[li + 1][c] - LEDS[li][c]) * (f - li)) / 255;\n  // The room, the lid, the base and the handle are drawn into a layer of their\n  // own and kept until the light, the water level or the switch changes.\n  const key = `${round(P.I * 60)} ${P.hue} ${P.surf0} ${P.on}`;\n  if (key !== P.key) {\n    P.key = key;\n    P.stat = P.stat || new Float32Array(N * 3);\n    P.buf = P.stat;\n    room(P);\n    shell(P);\n    handle(P);\n    P.buf = buf;\n  }\n  buf.set(P.stat);\n  glass(P);\n  gauge(P);\n  bubbles(P);\n  steam(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-kettle","type":"code","name":"kettle","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kettle\n// Family:  kitchen\n// Idea:    A glass electric kettle on a dark kitchen counter at night heats under the blue light of its LED ring, from bubbles clinging to the element through the hiss to a rolling boil, its steam fogging the glass and rising from the spout to the top of the panel, until the switch clicks off, the light goes out and someone switches it on again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after the stages of water coming to the boil in a glass kettle\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Fill=1..1.7, Cold=0..1\n//\n// Knob 1: Light. The colour of the LED ring in the base and of everything it lights: blue at 0, then teal, green and violet, to a warm amber at 1.\n// Knob 2: Speed. How fast the water heats and everything moves: at 2 the kettle comes to the boil, boils 3.5 s, clicks off and is switched on again 5 s later, about 15 s a round; at 0.2 it all runs ten times slower.\n// Knob 3: Fill. How much water is in the kettle, from one litre to the 1.7 L MAX line on the gauge; a full kettle takes about twice as long to come to the boil.\n// Knob 4: Cold. How cold the kitchen is: in a warm one the steam thins out on its way up; in a cold one it billows to the ceiling, the glass above the water fogs over and drops run down it.\n// Buttons: K1 tap switches the kettle on or off now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The body's middle column, the first glass row under the rim band, and the\n// last row of water, which lies on the element plate.\nconst CX = 31;\nconst TOP = 37;\nconst BOT = 100;\n// Steam is kept at half resolution.\nconst SW = 32;\nconst SH = 64;\nconst MAXB = 280;\nconst MAXP = 190;\nconst MAXS = 60;\nconst NSITE = 18;\nconst ND = 150;\nconst NC = 46;\n// LED colours from blue through teal, green and violet to amber.\nconst LEDS = [[40, 110, 255], [0, 205, 225], [40, 235, 100], [160, 70, 255], [255, 160, 60]];\nconst { min, max, round, floor, sin, exp, abs, hypot } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Inner half-width of the glass, a little wider at the foot.\nconst HW = Float32Array.from({ length: H }, (_, y) => 14 + (3 * (clamp(y, TOP, BOT) - TOP)) / (BOT - TOP));\nconst wallL = (y) => CX - round(HW[clamp(y, 0, H - 1)]);\nconst wallR = (y) => CX + round(HW[clamp(y, 0, H - 1)]);\nconst EX12 = Float32Array.from({ length: 128 }, (_, i) => exp(-i / 12));\nconst EDGE = Float32Array.from({ length: 64 }, (_, i) => exp(-(i - 1) / 1.6));\nconst EX6 = Float32Array.from({ length: 128 }, (_, i) => exp(-i / 6));\n// The 3x5 letters of MAX on the gauge.\nconst MAXT = [\"101111101\", \"111101101\", \"101111010\", \"101101101\", \"101101101\"];\n// The lid, row by row from its knob: half-widths.\nconst LID = [2, 2, 8, 10, 11, 12, 13, 13];\n\n// Smooth value noise, wrapping both ways.\nfunction noise(w, h, cell, oct) {\n  const out = new Float32Array(w * h);\n  let amp = 1;\n  let tot = 0;\n  for (let o = 0; o \u003c oct; o++, cell /= 2, amp *= 0.5) {\n    const gw = w / cell;\n    const gh = h / cell;\n    const g = Float32Array.from({ length: gw * gh }, rnd);\n    const at = (i, j) => g[(j % gh) * gw + (i % gw)];\n    for (let y = 0; y \u003c h; y++) {\n      const j = floor(y / cell);\n      const ty = smooth(0, 1, y / cell - j);\n      for (let x = 0; x \u003c w; x++) {\n        const i = floor(x / cell);\n        const tx = smooth(0, 1, x / cell - i);\n        const a = at(i, j) + (at(i + 1, j) - at(i, j)) * tx;\n        const b = at(i, j + 1) + (at(i + 1, j + 1) - at(i, j + 1)) * tx;\n        out[y * w + x] += amp * (a + (b - a) * ty);\n      }\n    }\n    tot += amp;\n  }\n  for (let i = 0; i \u003c out.length; i++) out[i] /= tot;\n  return out;\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), S: F(SW * SH), wipe: F(N), tile: F(N), grain: F(N), sh: F(W), sv: F(W), led: F(3), sr: new Int16Array(W) });\n  for (const k of [\"bx\", \"by\", \"br\", \"bv\", \"bp\", \"be\", \"bm\"]) P[k] = F(MAXB);\n  P.pArr = [\"px\", \"py\", \"pvx\", \"pvy\", \"pr\", \"pa\", \"pg\", \"pl\"].map((k) => (P[k] = F(MAXP)));\n  for (const k of [\"dx\", \"dy\", \"dvx\", \"dvy\"]) P[k] = F(MAXS);\n  // Subway tiles behind the counter, each a little different.\n  const shade = Float32Array.from({ length: 512 }, () => 0.85 + 0.2 * rnd());\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const band = y >> 2;\n      const u = x + (band & 1) * 4;\n      const grout = (y & 3) === 3 || (u & 7) === 7;\n      P.tile[y * W + x] = grout ? 0.5 : shade[(band * 9 + (u >> 3)) & 511] * ((y & 3) === 0 ? 1.1 : 1);\n      P.grain[y * W + x] = (rnd() - 0.5) * 9;\n    }\n  // Blotchy condensation, and the wisps the steam carries.\n  P.fogTex = noise(W, H, 16, 2).map((v) => 0.3 + 1.7 * v * v);\n  P.wisp = noise(SW, SH, 8, 3);\n  P.siteX = Float32Array.from({ length: NSITE }, (_, i) => 17 + ((i + 0.2 + 0.6 * rnd()) * 29) / NSITE);\n  P.siteW = Float32Array.from({ length: NSITE }, () => 0.5 + rnd());\n  P.acc = F(NSITE);\n  // Drops of condensation on the inside of the glass, each with the fog it needs.\n  P.qx = new Int8Array(ND);\n  P.qy = new Int16Array(ND);\n  P.qt = F(ND);\n  for (let i = 0; i \u003c ND; i++) {\n    const y = TOP + 1 + floor(rnd() * 60);\n    P.qy[i] = y;\n    P.qx[i] = wallL(y) + 1 + floor(rnd() * (wallR(y) - wallL(y) - 1));\n    P.qt[i] = 0.12 + 0.85 * rnd();\n  }\n  // Tiny bubbles that cling to the plate and the foot of the glass.\n  P.cx = new Int8Array(NC);\n  P.cy = new Int16Array(NC);\n  P.ct = F(NC);\n  for (let i = 0; i \u003c NC; i++) {\n    const side = i \u003c 30 ? 0 : i & 1 ? -1 : 1;\n    const y = side ? 72 + floor(rnd() * 28) : BOT - (rnd() \u003c 0.3 ? 1 : 0);\n    P.cy[i] = y;\n    P.cx[i] = side \u003c 0 ? wallL(y) + 1 : side > 0 ? wallR(y) - 1 : 16 + floor(rnd() * 31);\n    P.ct[i] = rnd() * 0.85;\n  }\n  P.runners = [];\n  Object.assign(P, { started: false, t: 0, on: true, T: 0.27, Pw: 1, I: 1, hold: 0, off: 0, F: 0, nb: 0, np: 0, ns: 0, eAcc: 0, lAcc: 0, cold: 0.06, m: 1, surf0: 69, fill: 1, hue: 0 });\n}\n\nfunction toggle(P, on) {\n  P.on = on;\n  P.hold = 0;\n  P.off = 0;\n}\n\nfunction release(P, s, reach) {\n  if (P.nb >= MAXB) return;\n  const i = P.nb++;\n  const depth = BOT - P.surf0;\n  P.bx[i] = P.siteX[s] + (rnd() - 0.5) * 1.5;\n  P.by[i] = BOT;\n  P.br[i] = 0.5 + 0.35 * rnd() + 0.5 * P.boilF;\n  P.bv[i] = -3;\n  P.bp[i] = rnd() * 6.3;\n  P.bm[i] = 0.55 + 0.6 * rnd();\n  // Below the boil a bubble collapses on its way up, higher as the water heats.\n  P.be[i] = rnd() \u003c reach * reach ? -99 : BOT - depth * reach * (0.3 + 0.65 * rnd());\n}\n\nfunction puff(P, x, y, vx, vy, r, a) {\n  if (P.np >= MAXP) return;\n  const i = P.np++;\n  const v = [x, y, vx, vy, r, a * (0.45 + 1.4 * P.cold), 0, (3.4 + 3.6 * P.cold) * (0.8 + 0.4 * rnd())];\n  for (let n = 0; n \u003c 8; n++) P.pArr[n][i] = v[n];\n}\n\nfunction burst(P, c, r) {\n  P.sv[c] -= 5 + 9 * r;\n  if (r > 1.1 && P.ns \u003c MAXS && rnd() \u003c 0.6) {\n    const i = P.ns++;\n    P.dx[i] = c;\n    P.dy[i] = P.surf0 + P.sh[c] - 1;\n    P.dvx[i] = (rnd() - 0.5) * 12;\n    P.dvy[i] = -(14 + 22 * rnd()) * (0.5 + r / 3);\n  }\n}\n\nfunction step(P, h) {\n  P.t += h;\n  if (P.on) {\n    // A full kettle takes longer to come to the boil.\n    P.T = min(1, P.T + (0.11 * h) / P.fill ** 1.3);\n    if (P.T >= 1 && (P.hold += h) >= 3.5) toggle(P, false);\n  } else {\n    P.T = 0.15 + (P.T - 0.15) * exp(-h / 3.5);\n    if ((P.off += h) >= 5) toggle(P, true);\n  }\n  const on = P.on ? 1 : 0;\n  P.Pw += (on - P.Pw) * (1 - exp(-h / (on ? 0.4 : 0.6)));\n  P.I += (on - P.I) * (1 - exp(-h / (on ? 0.12 : 0.25)));\n  const T = P.T;\n  P.hissF = smooth(0.45, 0.7, T);\n  P.boilF = smooth(0.8, 1, T);\n  P.cling = smooth(0.22, 0.5, T);\n  const reach = smooth(0.5, 0.95, T);\n  const steam = smooth(0.5, 1, T) * (0.2 + 0.8 * P.Pw);\n  const fogT = smooth(0.45, 0.95, T) * (0.3 + 0.7 * P.cold);\n  P.F += (fogT - P.F) * (1 - exp(-h / (fogT > P.F ? 1 : 7)));\n\n  // Bubbles: released from the sites on the plate, rising, wobbling, and\n  // either collapsing in cooler water or bursting at the surface.\n  const rate = P.Pw * (1.3 * P.hissF * (1 - 0.6 * P.boilF) + 1.1 * P.boilF);\n  for (let s = 0; s \u003c NSITE; s++) {\n    P.acc[s] += rate * P.siteW[s] * h;\n    for (; P.acc[s] >= 1; P.acc[s]--) release(P, s, reach);\n  }\n  const { bx, by, br, bv, bp, be, bm, sh, sv } = P;\n  for (let i = 0; i \u003c P.nb; ) {\n    bv[i] += (-(9 + 9 * br[i]) - bv[i]) * (1 - exp(-2 * h));\n    by[i] += bv[i] * h;\n    bp[i] += (6 + 3 * br[i]) * h;\n    bx[i] = clamp(bx[i] + sin(bp[i]) * 4 * h * br[i], wallL(by[i] | 0) + 1.5, wallR(by[i] | 0) - 1.5);\n    let dead = false;\n    if (by[i] \u003c be[i] + 3) {\n      br[i] -= 2.5 * h;\n      dead = br[i] \u003c 0.3;\n    } else if (P.boilF > 0.2) br[i] = min(P.bm[i] * (1 + 2.2 * P.boilF), br[i] + 2 * P.boilF * h);\n    const c = round(bx[i]);\n    if (!dead && by[i] - br[i] * 0.5 \u003c= P.surf0 + sh[c]) {\n      burst(P, c, br[i]);\n      dead = true;\n    }\n    if (dead) {\n      const j = --P.nb;\n      for (const A of [bx, by, br, bv, bp, be, bm]) A[i] = A[j];\n    } else i++;\n  }\n\n  // The surface: a damped string, kicked by bursts and by the churn of the boil.\n  const L = wallL(P.surf0 | 0) + 1;\n  const R = wallR(P.surf0 | 0) - 1;\n  const n = Math.ceil(h * 60);\n  for (let k = 0; k \u003c n; k++) {\n    const d = h / n;\n    for (let x = L; x \u003c= R; x++) {\n      const a = 300 * (sh[max(L, x - 1)] + sh[min(R, x + 1)] - 2 * sh[x]) - 40 * sh[x] - 5 * sv[x];\n      sv[x] += a * d;\n    }\n    for (let x = L; x \u003c= R; x++) sh[x] = clamp(sh[x] + sv[x] * d, -4, 3);\n  }\n  if (rnd() \u003c 14 * P.boilF * P.Pw * h) sv[L + floor(rnd() * (R - L + 1))] += (rnd() - 0.65) * 50 * P.boilF;\n  for (let i = 0; i \u003c P.ns; ) {\n    P.dvy[i] += 150 * h;\n    P.dx[i] = clamp(P.dx[i] + P.dvx[i] * h, L, R);\n    P.dy[i] += P.dvy[i] * h;\n    if (P.dvy[i] > 0 && P.dy[i] > P.surf0 + sh[round(P.dx[i])]) {\n      const j = --P.ns;\n      for (const A of [P.dx, P.dy, P.dvx, P.dvy]) A[i] = A[j];\n    } else i++;\n  }\n\n  // Steam out of the spout, in puffs at the boil, and round the lid.\n  P.eAcc += 36 * steam * (1 + P.boilF * P.Pw * (1.2 * max(0, sin(P.t * 5.5)) - 0.35)) * h;\n  for (; P.eAcc >= 1; P.eAcc--) puff(P, 9 + rnd() * 2, 33.5, -1 - 2 * rnd(), -8 - 6 * rnd(), 1.6, 0.8 + 0.5 * rnd());\n  P.lAcc += 7 * steam * P.boilF * h;\n  for (; P.lAcc >= 1; P.lAcc--) puff(P, 21 + rnd() * 20, 29, (rnd() - 0.5) * 3, -4 - 4 * rnd(), 1.8, 0.45 + 0.3 * rnd());\n  const { px, py, pvx, pvy, pr, pg, pl } = P;\n  const ry = 1 - exp(-h);\n  const rx = 1 - exp(-h / 0.8);\n  const grow = 3.6 + 2 * P.cold;\n  for (let i = 0; i \u003c P.np; ) {\n    pg[i] += h;\n    const wind = 8 + 3 * sin(0.07 * py[i] + 0.4 * P.t) + 2 * sin(0.17 * P.t + 1.3);\n    pvy[i] += (-12 - pvy[i]) * ry;\n    pvx[i] += (wind - pvx[i]) * rx + (rnd() - 0.5) * 24 * h;\n    px[i] += pvx[i] * h;\n    py[i] += pvy[i] * h;\n    pr[i] += grow * h;\n    if (pg[i] > pl[i] || py[i] + pr[i] \u003c -2 || px[i] > W + 12) {\n      const j = --P.np;\n      for (const A of P.pArr) A[i] = A[j];\n    } else i++;\n  }\n\n  // Drops that grow heavy run down through the fog and wipe a clear line.\n  const { wipe, runners } = P;\n  const keep = exp(-h / 6);\n  for (let y = TOP; y \u003c= BOT; y++) for (let x = 14; x \u003c= 48; x++) wipe[y * W + x] *= keep;\n  if (P.F > 0.4 && runners.length \u003c 6 && rnd() \u003c (P.F - 0.4) * (0.6 + 1.6 * P.cold) * h) {\n    const y = TOP + 1 + rnd() * 8;\n    runners.push([wallL(y | 0) + 2 + rnd() * (wallR(y | 0) - wallL(y | 0) - 4), y, 4 + 6 * rnd(), rnd() * 6]);\n  }\n  P.runners = runners.filter((r) => {\n    r[3] += h * 3;\n    r[1] += r[2] * h * (0.25 + 0.75 * max(0, sin(r[3])));\n    const p = (r[1] | 0) * W + (r[0] | 0);\n    wipe[p] = 1;\n    return r[1] \u003c P.surf0 + sh[r[0] | 0] - 1;\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.m = clamp(k[1], 0.2, 3) / 2;\n  P.fill = clamp(k[2], 1, 1.7);\n  P.surf0 = 101 - (P.fill / 1.7) * 55;\n  P.cold = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Open in the hiss, three seconds after the bubbles began to cling.\n    for (let i = 0; i \u003c 30; i++) step(P, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) toggle(P, !P.on);\n  step(P, dt * P.m);\n}\n\nfunction add(P, x, y, c, v) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) P.buf[o + i] += c[i] * v;\n}\n\n// Bubbles lighten the water, so where they crowd it turns pale, not white.\nfunction lift(P, x, y, c, v) {\n  const o = (y * W + x) * 3;\n  for (let i = 0; i \u003c 3; i++) P.buf[o + i] = max(P.buf[o + i], P.buf[o + i] * 0.5 + c[i] * v);\n}\n\nfunction put(P, o, r, g, b) {\n  P.buf[o] = r;\n  P.buf[o + 1] = g;\n  P.buf[o + 2] = b;\n}\n\n// The tiled wall, lit by the kettle; the counter top with its pool of light\n// and the ring's reflection; the counter's edge and the cupboard below.\nfunction room(P) {\n  const { led, tile } = P;\n  for (let y = 0; y \u003c H; y++) {\n    const yy = clamp(y, P.surf0, 106);\n    const dy = y - yy;\n    const hw = HW[yy | 0];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const ex = (x - CX) / 17;\n      let g;\n      let a = tile[p];\n      let b = a * 4;\n      if (y \u003c 117) {\n        const dx = max(0, abs(x - CX) - hw);\n        g = (a * 100) / (1 + (dx * dx + dy * dy) / 70);\n      } else if (y \u003c 124) {\n        g = 150 * exp(-ex * ex - ((y - 117) / 4) ** 2) + (y === 118 && x >= 14 && x \u003c= 48 ? (x % 3 === 1 ? 70 : 49) : 0);\n        b = 7 + P.grain[p];\n        a = 1;\n      } else {\n        g = (y === 124 ? 60 : 12) * exp(-ex * ex * 0.6);\n        b = y === 124 ? 28 : 6;\n        a = 0.75;\n      }\n      g *= P.I;\n      put(P, p * 3, b + g * led[0], b + a + g * led[1], b + 4 * a + g * led[2]);\n    }\n  }\n}\n\n// The glass: its walls, the water, the fog and drops above it, the spout.\nfunction glass(P) {\n  const { buf, led, sh, sr, fogTex, wipe } = P;\n  const I = P.I;\n  const F = P.F;\n  const t = P.t;\n  const hot = smooth(0.3, 1, P.T);\n  const milk = 0.35 * P.boilF * P.Pw;\n  const shim = 0.06 + 0.16 * hot;\n  const wc = [0, 1, 2].map((i) => 210 * (led[i] * (1 - milk) + milk));\n  const fc = [0, 1, 2].map((i) => 255 * (0.5 * led[i] + 0.5) * (0.12 + 0.75 * I));\n  for (let x = 0; x \u003c W; x++) sr[x] = round(P.surf0 + sh[x]);\n  const glass = (o, v, a) => put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 6 + 255 * v * led[2]);\n  const fog = (o, p, y, s) => {\n    const f = F * fogTex[p] * (0.55 + 1.1 * EX12[min(127, s - y)] + 0.4 * EX6[max(0, y - TOP)]) * (1 - wipe[p]);\n    for (let i = 0; i \u003c 3; i++) buf[o + i] = buf[o + i] * 0.7 + f * fc[i];\n  };\n  for (let y = TOP; y \u003c= BOT; y++) {\n    const l = wallL(y);\n    const r = wallR(y);\n    const lw = I * (0.32 + 0.68 * exp((y - BOT) / 30)) * (1 + 0.3 * milk);\n    const row = ((y + floor(t * 9)) & 127) * W;\n    for (let x = l; x \u003c= r; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const s = sr[x];\n      if (x === l || x === r) {\n        if (x === l && y \u003c= 46) glass(o, (y & 1 ? 0.1 : 0.04) + 0.12 * I, y & 1 ? 40 : 18);\n        else glass(o, y >= s ? 0.25 * I + 0.85 * lw : 0.07 * I + 0.25 * F * I, 26);\n      } else if (y >= s) {\n        let v = lw * (1 + shim * (fogTex[row + x] - 0.8) + 0.3 * EDGE[min(x - l, r - x)]);\n        if (y === s) v = v * 1.35 + 0.18 * I;\n        put(P, o, 4 + v * wc[0], 6 + v * wc[1], 10 + v * wc[2]);\n      } else fog(o, p, y, s);\n    }\n  }\n  // The spout: a glass lip leaning out to the left, the filter where the wall was.\n  for (let y = 34; y \u003c= 46; y++) {\n    const xs = round(9 + ((y - 34) * 8) / 12);\n    for (let x = xs; x \u003c 17; x++) {\n      const o = (y * W + x) * 3;\n      if (x === xs || y === 34) glass(o, 0.05 + 0.1 * I + 0.15 * F * I, 30);\n      else fog(o, y * W + x, y, round(P.surf0));\n    }\n  }\n}\n\n// What changes only with the light, the water level and the switch: the rim\n// band, the lid and its knob, the plate, the LED ring and the base.\nfunction shell(P) {\n  const { led } = P;\n  const I = P.I;\n  const glass = (o, v, a) => put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 6 + 255 * v * led[2]);\n  for (let y = 35; y \u003c= 36; y++)\n    for (let x = 17; x \u003c= 45; x++) {\n      const v = (y === 35 ? 0.8 : 0.5) + (x === 22 || x === 23 ? 0.6 : 0);\n      put(P, (y * W + x) * 3, 30 * v + 70 * I * v * led[0], 31 * v + 70 * I * v * led[1], 36 * v + 70 * I * v * led[2]);\n    }\n  for (let j = 0; j \u003c LID.length; j++) {\n    const y = 27 + j;\n    for (let x = CX - LID[j]; x \u003c= CX + LID[j]; x++) {\n      const edge = j === 0 || (j === 2 && abs(x - CX) > 2) || (j > 2 && abs(x - CX) > LID[j - 1]);\n      let v = j === 7 ? 6 : 13 + (x \u003c CX ? 4 : 0);\n      if (edge) v += x \u003c CX ? 30 : 18;\n      put(P, (y * W + x) * 3, v, v, v + 3);\n    }\n  }\n  // The element plate, the LED ring under the glass, the base and its stand.\n  for (let y = 101; y \u003c= 116; y++) {\n    const x0 = y \u003c= 105 ? 14 : y \u003c= 111 ? 13 : y === 112 || y === 116 ? 11 : 10;\n    for (let x = x0; x \u003c= 2 * CX - x0; x++) {\n      const o = (y * W + x) * 3;\n      if (y \u003c= 103) {\n        if (x === 14 || x === 48) glass(o, 0.2 + 0.7 * I, 26);\n        else {\n          const v = [0.5, 0.3, 0.45][y - 101] * I;\n          const a = [40, 26, 13][y - 101];\n          put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n        }\n      } else if (y \u003c= 105) {\n        const v = I * (y === 104 ? (x % 3 === 1 ? 1 : 0.72) : 0.42);\n        const a = 16 * (1 - I);\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 255 * v * led[2]);\n      } else if (y \u003c= 111) {\n        const c = 0.45 + 0.55 * exp(-(((x - 24) / 12) ** 2));\n        const v = 0.3 * I * exp(-(y - 106) / 1.5);\n        const a = 34 * c * (1 - (y - 106) * 0.06);\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n      } else {\n        const v = y === 112 ? 0.4 * I * exp(-(((x - CX) / 18) ** 2)) : 0.03 * I;\n        const a = y === 112 ? 30 : 14;\n        put(P, o, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n      }\n    }\n  }\n}\n\n// Signed distance to a rounded rectangle.\nfunction box(x, y, x0, y0, x1, y1, r) {\n  const qx = abs(x - (x0 + x1) / 2) - (x1 - x0) / 2 + r;\n  const qy = abs(y - (y0 + y1) / 2) - (y1 - y0) / 2 + r;\n  return hypot(max(qx, 0), max(qy, 0)) + min(max(qx, qy), 0) - r;\n}\n\n// The black handle, its inner face lit by the glass, and the switch at its foot.\nfunction handle(P) {\n  const { led } = P;\n  const I = P.I;\n  for (let y = 37; y \u003c= 105; y++) {\n    const lw = I * (0.25 + 0.75 * exp((y - BOT) / 24));\n    for (let x = wallR(y) + 1; x \u003c= 59; x++) {\n      const out = box(x, y, 38, 37, 58, 105, 8);\n      const inn = box(x, y, 38, 45, 52.5, 96, 5);\n      if (out > 0 || inn \u003c 0) continue;\n      let a = 11 + (x === 55 && y > 46 && y \u003c 95 ? 9 : 0);\n      if (out > -1.2) a += y \u003c 50 || x \u003c 50 ? 26 : 14;\n      const v = inn \u003c 1.4 && x > 50 ? 0.3 * lw : inn \u003c 1.4 && y > 95 ? 0.18 * lw : 0;\n      put(P, (y * W + x) * 3, a + 255 * v * led[0], a + 255 * v * led[1], a + 3 + 255 * v * led[2]);\n    }\n  }\n  // The rocker tips as it clicks; its light shows the kettle is on.\n  const o = P.on ? 0 : 1;\n  for (let y = 99; y \u003c= 102; y++)\n    for (let x = 53; x \u003c= 56; x++) {\n      const lit = y === 101 + o && (x === 54 || x === 55);\n      const v = lit ? 0.4 + 0.6 * I : 0;\n      const a = lit ? 20 : y === 99 + o ? 58 : 34;\n      put(P, (y * W + x) * 3, a + 255 * v * led[0], a + 255 * v * led[1], a + 4 + 255 * v * led[2]);\n    }\n}\n\n// Level marks printed on the glass: every quarter litre from 0.5, and MAX at 1.7.\nfunction gauge(P) {\n  const { led, sr } = P;\n  const I = P.I;\n  const ink = (x, y) => {\n    const wet = y >= sr[x];\n    const v = wet ? 30 + 150 * I * (0.25 + 0.75 * exp((y - BOT) / 24)) : 34 + 50 * I;\n    const o = (y * W + x) * 3;\n    for (let i = 0; i \u003c 3; i++) P.buf[o + i] = v * (0.7 + 0.3 * led[i]);\n  };\n  for (const L of [0.5, 0.75, 1, 1.25, 1.5, 1.7]) {\n    const y = round(101 - (L / 1.7) * 55);\n    const len = L === 1.7 ? 5 : L % 0.5 ? 2 : 4;\n    for (let i = 0; i \u003c len; i++) ink(wallL(y) + 2 + i, y);\n  }\n  for (let j = 0; j \u003c 5; j++) for (let i = 0; i \u003c 9; i++) if (MAXT[j][i] === \"1\") ink(25 + i + (i > 2) + (i > 5), 44 + j);\n}\n\nfunction bubbles(P) {\n  const { led, sr, bx, by, br } = P;\n  const I = P.I;\n  const k = 0.3 + 0.7 * I;\n  const bc = [0, 1, 2].map((i) => (0.45 * led[i] + 0.55) * k);\n  const wet = (x, y) => x >= 0 && x \u003c W && y >= sr[x] && y \u003c= BOT;\n  for (let i = 0; i \u003c NC; i++) {\n    const v = P.cling - P.ct[i];\n    if (v > 0 && wet(P.cx[i], P.cy[i])) add(P, P.cx[i], P.cy[i], bc, min(1, v * 4) * 150 * (0.8 + 0.2 * sin(P.t * 9 + i)));\n  }\n  for (let i = 0; i \u003c P.nb; i++) {\n    const r = br[i];\n    if (r \u003c 0.9) {\n      if (wet(round(bx[i]), round(by[i]))) lift(P, round(bx[i]), round(by[i]), bc, 150);\n      continue;\n    }\n    for (let y = floor(by[i] - r); y \u003c= Math.ceil(by[i] + r); y++)\n      for (let x = floor(bx[i] - r); x \u003c= Math.ceil(bx[i] + r); x++) {\n        const d = hypot(x - bx[i], y - by[i]);\n        if (d > r + 0.5 || !wet(x, y)) continue;\n        const e = abs(d - r);\n        if (e \u003c 0.7) lift(P, x, y, bc, 150);\n        else if (d \u003c 0.8 && x \u003c bx[i]) lift(P, x, y, bc, 120);\n      }\n  }\n  for (let i = 0; i \u003c P.ns; i++) if (P.dy[i] >= TOP) add(P, round(P.dx[i]), round(P.dy[i]), bc, 140);\n  // Drops of condensation, and the ones running down.\n  const fc = [0, 1, 2].map((i) => 0.6 * led[i] + 0.4);\n  for (let i = 0; i \u003c ND; i++) {\n    const x = P.qx[i];\n    const y = P.qy[i];\n    const v = P.F - P.qt[i];\n    if (v > 0 && y \u003c sr[x] - 1) add(P, x, y, fc, min(1, v * 2.5) * (25 + 120 * I) * (1 - P.wipe[y * W + x]));\n  }\n  for (const [x, y] of P.runners) add(P, x | 0, y | 0, fc, 40 + 150 * I);\n}\n\n// Steam: puffs splatted at half resolution, broken into wisps, lit from below\n// by the glass and faintly by the night.\nfunction steam(P) {\n  const { S, wisp, px, py, pr, pa, pg, pl, led, buf } = P;\n  S.fill(0);\n  for (let i = 0; i \u003c P.np; i++) {\n    const a = pa[i] * min(1, pg[i] / 0.3) * (1 - pg[i] / pl[i]) ** 1.6;\n    const cx = px[i] / 2;\n    const cy = py[i] / 2;\n    const r = pr[i] / 2;\n    const r2 = r * r;\n    for (let y = max(0, floor(cy - r)); y \u003c= min(SH - 1, Math.ceil(cy + r)); y++)\n      for (let x = max(0, floor(cx - r)); x \u003c= min(SW - 1, Math.ceil(cx + r)); x++) {\n        const d = ((x - cx) ** 2 + (y - cy) ** 2) / r2;\n        if (d \u003c 1) S[y * SW + x] += a * (1 - d) * (1 - d);\n      }\n  }\n  const off = P.t * 2.2;\n  const j0 = floor(off);\n  const f = off - j0;\n  for (let y = 0; y \u003c 26; y++)\n    for (let x = 0; x \u003c SW; x++) {\n      const a = wisp[((y + j0) % SH) * SW + x];\n      const b = wisp[((y + j0 + 1) % SH) * SW + x];\n      S[y * SW + x] *= 0.4 + 1.3 * (a + (b - a) * f);\n    }\n  const I = P.I;\n  const sc = [0, 1, 2].map((i) => 0.55 * led[i] + 0.45 * [0.9, 0.95, 1][i]);\n  for (let y = 0; y \u003c 50; y++) {\n    const light = 30 + I * 170 * (0.45 + 0.55 * exp(-max(0, 36 - y) / 30));\n    const hy = clamp(y / 2 - 0.25, 0, SH - 1.001);\n    const y0 = floor(hy);\n    const fy = hy - y0;\n    for (let x = 0; x \u003c W; x++) {\n      const hx = clamp(x / 2 - 0.25, 0, SW - 1.001);\n      const x0 = floor(hx);\n      const fx = hx - x0;\n      const q = y0 * SW + x0;\n      const top = S[q] + (S[q + 1] - S[q]) * fx;\n      const bot = S[q + SW] + (S[q + SW + 1] - S[q + SW]) * fx;\n      const v = top + (bot - top) * fy;\n      if (v \u003c 0.003) continue;\n      const s = (1 - exp(-1.4 * v)) * light;\n      const o = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[o + i] += s * sc[i];\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, led } = P;\n  const f = P.hue * 4;\n  const li = min(3, floor(f));\n  for (let c = 0; c \u003c 3; c++) led[c] = (LEDS[li][c] + (LEDS[li + 1][c] - LEDS[li][c]) * (f - li)) / 255;\n  // The room, the lid, the base and the handle are drawn into a layer of their\n  // own and kept until the light, the water level or the switch changes.\n  const key = `${round(P.I * 60)} ${P.hue} ${P.surf0} ${P.on}`;\n  if (key !== P.key) {\n    P.key = key;\n    P.stat = P.stat || new Float32Array(N * 3);\n    P.buf = P.stat;\n    room(P);\n    shell(P);\n    handle(P);\n    P.buf = buf;\n  }\n  buf.set(P.stat);\n  glass(P);\n  gauge(P);\n  bubbles(P);\n  steam(P);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Fill=1..1.7, Cold=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The colour of the LED ring in the base and of everything it lights: blue at 0, then teal, green and violet, to a warm amber at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the water heats and everything moves: at 2 the kettle comes to the boil, boils 3.5 s, clicks off and is switched on again 5 s later, about 15 s a round; at 0.2 it all runs ten times slower."},{"name":"Fill","min":1,"max":1.7,"about":"How much water is in the kettle, from one litre to the 1.7 L MAX line on the gauge; a full kettle takes about twice as long to come to the boil."},{"name":"Cold","min":0,"max":1,"about":"How cold the kitchen is: in a warm one the steam thins out on its way up; in a cold one it billows to the ceiling, the glass above the water fogs over and drops run down it."}],"start":[0,2,1,0.06],"measures":{"motion":0.2843,"detail":0.0449,"edges":0.2669,"complexity":1.5413,"coverage":0.6281,"colour":0.1671,"drift":0.1681},"knobResponse":[0.1034,0.0699,0.0403,0.056]},{"slug":"kingfisher","title":"Kingfisher","family":"bird","round":20,"note":"강둑 단면이 오리나무 가지부터 강바닥 자갈까지 128줄을 다 써요. 물총새가 가지에서 머리를 까딱이며 물을 보다가 곧장 내리꽂혀 물보라와 거품 줄을 남기고, 피라미를 물고 올라와 가지에 두드린 뒤 삼켜요. K1 을 누르면 바로 뛰어들어요.","idea":"A river bank cut from the alder overhead to the pebbles on the bed: a kingfisher watches from a branch, drops straight in with a splash and a trail of bubbles, comes up with a minnow, beats it on the branch and swallows it.","buttons":"K1 tap sends the kingfisher down now, or as soon as it is back on the branch.","code":"// ===== Patternflow pattern =====\n// Title:   Kingfisher\n// Family:  bird\n// Idea:    A river bank cut from the alder overhead to the pebbles on the bed: a kingfisher watches from a branch, drops straight in with a splash and a trail of bubbles, comes up with a minnow, beats it on the branch and swallows it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after split-level river photographs of the common kingfisher (Alcedo atthis)\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Fish=6..60, Current=-1..1\n//\n// Knob 1: Hour. Early morning at 0 with the sun low in the east; noon sends the light shafts straight down, the afternoon goes gold, dusk goes pink.\n// Knob 2: Speed. How fast the river, the wind, the clouds and the bird go: at 2 it dives within two seconds, then every ten to fifteen.\n// Knob 3: Fish. How rich the river runs: six minnows and eight strands of water-crowfoot at 6, a shoal of sixty in a thick weed bed under reeds and yellow flag at 60. More fish, and the bird goes sooner.\n// Knob 4: Current. Near still at 0.06; turned either way the river runs that way, the weed streams out, the minnows face upstream and the alder stirs. Run hard, it goes the colour of tea.\n// Buttons: K1 tap sends the kingfisher down now, or as soon as it is back on the branch.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Waterline, top of the far bank, the bird's feet on the branch.\nconst [SURF, BANK, PX, PY] = [84, 47, 37, 33];\nconst { min, max, floor, round, sin, cos, abs, sqrt, pow, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every `per` cells.\nfunction vn(x, y, per = 4096) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = ((xi % per) + per) % per, x1 = (x0 + 1) % per, a = hash(x0, yi), b = hash(x1, yi), c = hash(x0, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, yi + 1)) * su * sv;\n}\n\n// The bird facing right: C cobalt, T turquoise back, O orange, W white, K bill, R feet.\n// A pose: rows, anchor, bill tip, and how a fish in the bill lies.\nconst COL = { C: [24, 92, 214], T: [40, 214, 238], O: [252, 112, 24], o: [200, 78, 20], W: [238, 240, 228], K: [20, 18, 26], R: [236, 72, 58] };\nconst pose = (s, ax, ay, tx, ty, fo) => ({ rows: s.split(\" \"), ax, ay, tx, ty, fo });\nconst BODY = \" .CCWW TCCOO TCCOO .CCOo .CC.R .C\";\nconst LEVEL = pose(\"..CCC .CCCCKKKK .WOOOK\" + BODY, 4, 7, 8, 1, \"v\");\nconst DOWN = pose(\"..CCC .CCCCK .WOOOKK .CCWW.KK\" + BODY.slice(6), 4, 7, 7, 3, \"v\");\nconst UP = pose(\"......K .....K ..CCK .CCCC .WOOO\" + BODY, 4, 9, 6, 0, \"d\");\nconst WIND = { ...UP, fo: \"h\" };\nconst SLAM = pose(\". .CCC TCCCC TCWOOC .CCOOWK .CCOo.K .CC.R.K .C\", 4, 6, 6, 6, \"h\");\nconst D45 = pose(\"CT .CTT .OCCT ..OCCC ...WOCK ......K .......K\", 5, 4, 7, 6, \"h\");\nconst DV = pose(\".C .CT OCT OCT OCT WOC .KC .K .K\", 1, 5, 1, 8, \"h\");\nconst RV = pose(\".K .K .KC WOC OCT OCT OCT .CT .C\", 1, 3, 1, 0, \"h\");\nconst FA = pose(\"....CC .....CC CTTTTTCCC .COOOOWOCKKK\", 5, 2, 11, 3, \"v\");\nconst FB = pose(\". . CTTTTCCCC .COOCCWOCKKK ....CC .....C\", 5, 2, 11, 3, \"v\");\n// Morning to dusk: sky overhead, sky low, light, sun.\nconst HOURS = [[96, 150, 214, 214, 218, 196, 1, 0.97, 0.9, 0.85], [54, 122, 228, 158, 198, 236, 1, 1, 1, 1], [66, 118, 204, 226, 204, 150, 1.06, 0.97, 0.84, 0.92], [70, 82, 158, 248, 156, 92, 1.12, 0.84, 0.7, 0.7], [36, 38, 94, 212, 100, 104, 0.9, 0.72, 0.82, 0.45]];\nconst [PERCH, LEAN, DIVE, UNDER, RISE, FLY, BEAT, SWALLOW] = [0, 1, 2, 3, 4, 5, 6, 7];\nconst DUR = [0, 0.35, 0.62, 0.5, 0.74, 1.5, 2.1, 1.3];\nconst TUFT = [[1, 0, 0.95], [2, -1, 0.8], [2, 1, 0.5], [3, -1, 0.4], [1, -1, 0.7]];\n\nfunction build(P) {\n  const { alb, mat } = P, crown = [], bed = (P.bed = []), lv = [];\n  const set = (x, y, m, r, g, b) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  const clump = (x, y) => vn(x * 0.2, y * 0.22) * 0.65 + vn(x * 0.55, y * 0.5) * 0.35;\n  for (let x = 0; x \u003c W; x++) (crown[x] = 11 + 8 * vn(x * 0.1, 3.3) + 4 * vn(x * 0.33, 8.1)), (bed[x] = 115.5 + 2.5 * sin(x * 0.11 + 0.7) + 3 * vn(x * 0.25, 11.5));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, g = hash(x + 900, y) - 0.5, c = y - crown[x], wet = cl((y - SURF + 7) / 6, 0, 1);\n    const n = c >= 0 && y \u003c= BANK && clump(x, y), k = n && (0.62 + 0.55 * n + 0.9 * (clump(x - 1.5, y - 1.5) - n)) * (1 - (0.42 * c) / (BANK - crown[x] + 1)) + 0.08 * g + (c \u003c 1.5 ? 0.35 : 0);\n    const e = (0.78 + 0.36 * (vn(2.5, y * 0.32) * 0.7 + vn(x * 0.06, y * 0.3) * 0.3) + 0.12 * g) * (1 - 0.38 * wet), q = 0.8 + 0.3 * vn(x * 0.7, y * 0.7) + 0.2 * g;\n    if (c \u003c 0) set(x, y, 0, 0, 0, 0);\n    else if (y \u003c= BANK) set(x, y, 2, 58 * k, 96 * k, 58 * k + 6);\n    else if (y \u003c SURF) set(x, y, 4, 138 * e, (100 + 14 * wet) * e, (64 + 6 * wet) * e);\n    else set(x, y, y \u003c bed[x] ? 5 : 6, 150 * q, 134 * q, 98 * q);\n  }\n  const ST = [[196, 172, 130], [150, 146, 136], [214, 182, 120], [128, 110, 90], [226, 198, 146]];\n  for (let n = 0; n \u003c 80; n++) {\n    const cx = rnd() * 66 - 1, cy = bed[cl(round(cx), 0, W - 1)] + 1 + rnd() * 9, rx = 1.3 + rnd() * 2.4, ry = 0.9 + rnd() * 1.4, c = ST[floor(rnd() * 5)], t = 0.85 + rnd() * 0.3;\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const dx = (x + 0.5 - cx) / rx, dy = (y + 0.5 - cy) / ry, r = dx * dx + dy * dy, k = t * (r > 0.6 ? 0.62 : 1) * (1 + 0.28 * cl(-dx - dy, -1, 1));\n        if (r \u003c= 1 && y \u003c H && y >= bed[x]) set(x, y, 6, c[0] * k, c[1] * k, c[2] * k);\n      }\n  }\n  // Grass, roots, and the kingfisher's burrow.\n  for (let x = 0; x \u003c W; x++) for (let y = BANK - floor(rnd() * 3.6), k; y \u003c= BANK + 1; y++) (k = 0.75 + rnd() * 0.5), set(x, y, 3, 74 * k, 124 * k, 46 * k);\n  for (let n = 0; n \u003c 6; n++) for (let x = 8 + rnd() * 30, i = 0, len = 5 + rnd() * 12; i \u003c len; i++) set(round((x += (rnd() - 0.5) * 1.2)), BANK + 2 + i, 4, 66, 50, 38);\n  for (let y = 53; y \u003c 64; y++)\n    for (let x = 16; x \u003c 29; x++) {\n      const dx = (x - 22) / 3.1, dy = (y - 57.5) / 2.6, r = dx * dx + dy * dy, q = r * r;\n      if (r \u003c 1) set(x, y, 4, 12 + 40 * q, 9 + 28 * q, 7 + 18 * q);\n      else if (r \u003c 1.5 && dy > 0.4) set(x, y, 4, 172, 132, 92);\n    }\n  for (let y = 0; y \u003c= BANK + 1; y++)\n    for (let x = 0, w = 4 + max(0, y - 30) * 0.14, k; x \u003c w; x++) (k = (0.72 + 0.4 * vn(x * 0.9, y * 0.13)) * (x \u003c 1 ? 1.25 : x > w - 1.5 ? 0.7 : 1)), set(x, y, 1, 104 * k, 98 * k, 88 * k);\n  for (let x = 3; x \u003c= 55; x++) {\n    const th = 3.2 - (2.4 * (x - 4)) / 51, n = max(1, round(th)), top = round(35.6 - 0.06 * (x - 4) + 0.0009 * (x - 4) ** 2 - th / 2);\n    for (let i = 0, k; i \u003c n; i++) (k = i ? (i === n - 1 ? 0.6 : 0.9) : 1.35), set(x, top + i, 1, 106 * k, 96 * k, 84 * k);\n  }\n  for (const tw of [[20, 34, 24, 29, 27, 26], [30, 35, 33, 38, 35, 41], [46, 35, 49, 38, 51, 42], [54, 35, 58, 34, 61, 37]])\n    for (let s = 0; s \u003c 4; s += 2) for (let i = 0; i \u003c= 8; i++) set(round(mix(tw[s], tw[s + 2], i / 8)), round(mix(tw[s + 1], tw[s + 3], i / 8)), 1, 92, 82, 72);\n  // Alder leaves, none in front of the bird.\n  for (const [cx, cy, r, n, shade] of [[3, 2, 12, 110, 1], [15, 0, 11, 80, 1], [27, 1, 8, 50, 1], [36, -1, 6, 22, 1], [7, 14, 7, 40, 1], [24, 26, 4, 18], [13, 26, 3, 10], [35, 42, 3, 10], [50, 42, 4, 18], [60, 36, 3, 12], [49, 30, 3, 8]]) {\n    for (let y = floor(cy - r); shade && y \u003c= cy + r; y++)\n      for (let x = floor(cx - r), d; x \u003c= cx + r; x++) if ((d = hypot(x - cx, (y - cy) * 1.3) / r) \u003c 0.85 && vn(x * 0.45, y * 0.45 + 40) > 0.3 + d * 0.3) set(x, y, 1, 34, 58, 30);\n    for (let i = 0; i \u003c n; i++) {\n      const a = rnd() * PI * 2, rr = r * sqrt(rnd()), x = round(cx + cos(a) * rr), y = round(cy + sin(a) * rr * 0.75);\n      if (x \u003c 31 || x > 46 || y \u003c 21 || y > 33) lv.push(x, y, floor(rnd() * 4), 0.75 + rnd() * 0.5, rnd() * 7, rnd() * 7, cy > 20 ? 1 : 0);\n    }\n  }\n  P.leaves = lv;\n  // More weed, reeds and starwort as the river gets richer.\n  P.weed = [6, 17, 28, 40, 50, 59, 12, 23, 45, 34, 55, 2, 20, 42, 62, 31, 9, 48, 26, 14, 37, 53, 4, 57].map((x) => [x, 16 + rnd() * 26, rnd() * 7, 0.8 + rnd() * 0.4]);\n  P.reeds = Array.from({ length: 32 }, (_, i) => [(i * 23.7 + rnd() * 6) % 64, 7 + rnd() * 10, rnd() * 7, i % 6 === 3]);\n  P.tuft = bed.map((_, x) => [vn(x * 0.3, 50.5), 1 + floor(rnd() * 3)]);\n  const tex = (h, f) => Float32Array.from({ length: 128 * h }, (_, i) => f(i & 127, i >> 7));\n  P.cloud = tex(24, (x, y) => sm((vn(x / 14, y / 5, 128 / 14) * 0.65 + vn(x / 6, y / 3 + 9, 128 / 6) * 0.35 - 0.48) * 3.2) * (1 - y / 30));\n  P.shad = tex(1, (i) => sm(1 - abs(i - 34) / 30) + 0.7 * sm(1 - abs(i - 96) / 18));\n  const S = (P.shaft = new Float32Array(256));\n  for (let n = 0; n \u003c 9; n++) {\n    const c = rnd() * 256, w = 6 + rnd() * 18, a = 0.4 + rnd() * 0.6;\n    for (let i = 0; i \u003c 256; i++) S[i] = min(1, S[i] + a * Math.exp(-((abs(((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n}\n\n// Light for the hour. A river in spate is the colour of tea.\nfunction paint(P, h) {\n  const f = h * 4, i = min(3, floor(f)), B = HOURS[i + 1], q = HOURS[i].map((v, c) => mix(v, B[c], f - i)), { alb, mat, bg } = P;\n  const sun = (P.sun = q[9]), top = q.slice(0, 3), low = (P.low = q.slice(3, 6)), tint = (P.tint = q.slice(6, 9).map((v) => v * sun)), s = (P.silt = 0.6 * P.cur * P.cur);\n  P.sunDir = -0.9 + 1.8 * h;\n  const M = (a, b) => a.map((v, c) => mix(v, b[c], s)), WT = M([88, 128, 94], [112, 98, 52]), WD = M([30, 58, 44], [50, 40, 24]), fl = M([0.74, 0.88, 0.72], [0.62, 0.6, 0.4]);\n  for (let p = 0; p \u003c N; p++) {\n    const y = p >> 6, m = mat[p], ts = pow(cl(y / 24, 0, 1), 1.3), d = cl((y - SURF - 1) / (H - SURF - 2), 0, 1);\n    for (let c = 0, o = p * 3, a; c \u003c 3; c++)\n      (a = alb[o + c] * tint[c]),\n        (bg[o + c] =\n          m === 0 ? mix(top[c], low[c], ts)\n          : m === 2 ? mix(a, low[c] * 0.5, 0.16)\n          : m === 5 ? mix(WT[c], WD[c], pow(d, 0.8)) * tint[c] + low[c] * 0.08 * (1 - d)\n          : m === 6 ? mix(a * fl[c] * (0.95 - 0.25 * d), WD[c] * tint[c], s * 0.8)\n          : a);\n  }\n}\n\nfunction stepFish(P, d) {\n  const t = P.t, cx = 32 + 15 * sin(t * 0.13 + 0.4) + 6 * sin(t * 0.31), cy = 103 + 5 * sin(t * 0.21 + 1.3);\n  for (const F of P.fish) {\n    // The one it has picked drifts into the line of the dive.\n    const held = P.bs && P.bs \u003c= UNDER && F === P.prey && P.hit;\n    if (held) F.vx += (P.tx - F.x) * 2 * d;\n    if (F.s > 0) F.s -= d;\n    else if (!held) {\n      F.vx += ((cx + F.ox + 4 * sin(t * 0.7 + F.ph) - F.x) * 0.9 - F.vx * 1.1) * d + (rnd() - 0.5) * 30 * d;\n      F.vy += ((cy + F.oy + 2 * sin(t * 0.9 + F.ph * 1.3) - F.y) * 0.9 - F.vy * 1.4) * d + (rnd() - 0.5) * 16 * d;\n      if (rnd() \u003c d * 0.45) F.g = 0.25;\n    }\n    const lim = F.s > 0 ? 36 : held ? 8 : 14, sp = hypot(F.vx, F.vy);\n    if (sp > lim) (F.vx *= lim / sp), (F.vy *= lim / sp);\n    F.x += F.vx * d;\n    F.y = cl(F.y + F.vy * d, SURF + 5, P.bed[cl(round(F.x), 0, W - 1)] - 3);\n    const f = abs(P.cur) > 0.12 && F.s \u003c= 0 ? (P.cur > 0 ? -1 : 1) : abs(F.vx) > 2 ? Math.sign(F.vx) : F.f;\n    if (f !== F.f) (F.f = f), (F.g = 0.3);\n    F.g -= d;\n  }\n}\n\n// Drops, rings, foam; the dive scatters all but its minnow.\nfunction splash(P, x, n, up) {\n  for (let i = 0; i \u003c n; i++) P.dr.push([x + (rnd() - 0.5) * 4, SURF - 1, (rnd() - 0.5) * (i % 7 ? 46 : 4), -(18 + rnd() * up) * (i % 7 ? 1 : 1.5)]);\n  P.ri.push([x, 0, 1], [x, 0, 0.6, 1]);\n  for (const F of n \u003c 30 ? [] : P.fish) {\n    const dx = F.x - x, dy = F.y - SURF, r = hypot(dx, dy) + 1;\n    if (r > 27 || (F === P.prey && P.hit)) continue;\n    [F.s, F.g] = [0.7 + rnd() * 0.6, 0.3];\n    F.vx += (dx / r) * 34;\n    F.vy += (dy / r) * 20 + 6;\n  }\n}\n\nfunction stepBird(P, d) {\n  let k, u = (P.bt += d) / (DUR[P.bs] || 1);\n  const go = (s) => ((P.bs = s), (P.bt = 0));\n  const bub = (p, x, y) => rnd() \u003c p && P.bu.push([P.bx + (rnd() - 0.5) * x, P.by + y, 14 + rnd() * 14, rnd() * 7]);\n  switch (P.bs) {\n    case PERCH:\n      if ((P.look -= d) \u003c= 0) {\n        P.pose = rnd() \u003c 0.55 ? LEVEL : DOWN;\n        P.look = 0.4 + rnd() * 1.2;\n      }\n      if (P.bt >= P.wait * (1 - 0.45 * P.rich) || P.go) {\n        // A minnow below the branch. One dive in four misses, never the first.\n        let best = null, sc = 1e9;\n        for (const F of P.fish) {\n          const s = abs(F.x - PX - 10) + 0.5 * abs(F.y - 100);\n          if (F.x >= PX - 6 && F.x \u003c= 60 && s \u003c sc) [sc, best] = [s, F];\n        }\n        Object.assign(P, { go: false, prey: best, tx: best ? cl(best.x + best.vx * 0.6, PX - 2, 53) : PX + 10, hit: !!best && (!P.dives++ || rnd() \u003c 0.75) });\n        go(LEAN);\n      }\n      break;\n    case LEAN:\n      [P.pose, P.bx, P.by, P.face] = [D45, PX + 2, PY - 4 + u, 1];\n      if (u >= 1) go(DIVE);\n      break;\n    case DIVE:\n      P.face = P.tx >= PX ? 1 : -1;\n      P.bx = mix(PX + 2, P.tx, pow(u, 0.8));\n      P.by = mix(PY - 3, SURF - 2, pow(u, 1.8));\n      P.pose = u \u003c 0.22 ? D45 : DV;\n      if (u >= 1) {\n        splash(P, (P.x0 = P.bx), 30, 50);\n        for (let i = 0; i \u003c 14; i++) bub(1, 5, 3 + rnd() * 5);\n        go(UNDER);\n      }\n      break;\n    case UNDER: {\n      const q = P.hit && P.fish.includes(P.prey) ? P.prey : null, e = 1 - (1 - u) * (1 - u);\n      P.bx = mix(P.x0, q ? q.x : P.x0, e);\n      P.by = mix(SURF - 2, q ? q.y - 2 : 99, e);\n      P.pose = DV;\n      bub(0.8, 3, -3);\n      if (u >= 1) {\n        if (q) P.fish.splice(P.fish.indexOf(q), 1);\n        [P.fl, P.prey, P.y0] = [q ? 4 : 0, null, P.by];\n        go(RISE);\n      }\n      break;\n    }\n    case RISE: {\n      const w = cl((u - 0.43) / 0.57, 0, 1);\n      P.pose = u \u003c 0.22 ? DV : RV;\n      if (!w) P.bx += sin(P.bt * 60) * 9 * d;\n      P.by = mix(P.y0, SURF - 2, w * w);\n      bub(w ? 0.7 : 0.5, 3, w ? 4 : -2);\n      if (u >= 1) splash(P, (P.x0 = P.bx), 16, 32), go(FLY);\n      break;\n    }\n    case FLY:\n      P.face = PX >= P.x0 ? 1 : -1;\n      P.bx = mix(P.x0, PX, sm(u));\n      P.by = mix(SURF - 4, PY - 3, 1 - (1 - u) * (1 - u)) - 7 * sin(PI * u);\n      P.pose = floor(P.bt / 0.07) & 1 ? FB : FA;\n      if (u \u003c 0.25 && rnd() \u003c 0.5) P.dr.push([P.bx + (rnd() - 0.5) * 6, P.by + 2, (rnd() - 0.5) * 10, rnd() * 10]);\n      if (u >= 1 && !P.fl) for (let i = 0; i \u003c 10; i++) P.dr.push([PX + (rnd() - 0.5) * 6, PY - 4 - rnd() * 4, (rnd() - 0.5) * 30, -rnd() * 20]);\n      if (u >= 1) (k = P.fl), perch(P), k && ((P.fl = k), go(BEAT));\n      break;\n    case BEAT: {\n      // Four whacks on the branch.\n      k = floor(P.bt / 0.42);\n      const slam = P.bt % 0.42 > 0.24 && k \u003c 4;\n      P.pose = k > 3 ? LEVEL : slam ? SLAM : WIND;\n      if (slam && !P.slam) (P.shake = 1), P.dr.push([PX + 7, PY - 1, 8 + rnd() * 10, -10 - rnd() * 14]);\n      P.slam = slam;\n      if (u >= 1) go(SWALLOW);\n      break;\n    }\n    case SWALLOW:\n      P.pose = u \u003c 0.85 ? UP : LEVEL;\n      P.fl = u \u003c 0.3 ? 3 : u \u003c 0.55 ? 2 : u \u003c 0.8 ? 1 : 0;\n      if (u >= 1) perch(P);\n  }\n}\n\nfunction perch(P) {\n  Object.assign(P, { bs: PERCH, bt: 0, bx: PX, by: PY, face: 1, pose: LEVEL, look: 0.4, fl: 0, wait: P.queued ? 0.3 : 3.5 + rnd() * 4, queued: false });\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), h: -1, t: 0, dives: 0, fish: [], dr: [], bu: [], ri: [], shake: 0 });\n  build(P);\n  perch(P);\n  P.wait = 1.3;\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06], h = cl(k[0], 0, 1), cur = cl(k[3], -1, 1);\n  const rich = (P.rich = cl((k[2] - 6) / 54, 0, 1)), want = round(cl(k[2], 6, 60)), d = cl(dt, 0, 0.1) * (P.rate = cl(k[1], 0.2, 3) / 2);\n  if (abs(h - P.h) > 0.0005 || abs(cur - P.cur) > 0.01) (P.h = h), (P.cur = cur), paint(P, h);\n  [P.nweed, P.wlen, P.every] = [8 + round(rich * 16), 0.62 + 0.55 * rich, rich > 0.5 ? 2 : 3];\n  for (let e = P.t > 0; P.fish.length \u003c want; )\n    P.fish.push({ x: e ? (cur >= 0 ? -3 : 66) : 6 + rnd() * 52, y: e ? 100 + rnd() * 8 : 94 + rnd() * 18, vx: 0, vy: 0, ox: (rnd() - 0.5) * 30, oy: (rnd() - 0.5) * 12, ph: rnd() * 7, f: rnd() \u003c 0.5 ? 1 : -1, s: 0, g: 0 });\n  P.fish.length = want;\n  // The river's clock starts further in the faster it runs.\n  if (!P.t) P.t = 6 * P.rate;\n  if (input.btnPressed?.[0]) P[P.bs === PERCH ? \"go\" : \"queued\"] = true;\n  P.t += d;\n  stepFish(P, d);\n  stepBird(P, d);\n  P.dr = P.dr.filter((p) => ((p[3] += 150 * d), (p[0] += p[2] * d), (p[1] += p[3] * d), !(p[1] > SURF && p[3] > 0)));\n  P.bu = P.bu.filter((b) => ((b[1] -= b[2] * d), (b[0] += (sin(b[3] + b[1] * 0.6) * 3 + cur * 8) * d), b[1] > SURF + 1));\n  P.ri = P.ri.filter((r) => ((r[1] += 13 * d), (r[0] += cur * 10 * d), (r[2] -= (r[3] ? 1 : 0.42) * d) > 0));\n  P.shake = max(0, P.shake - d * 3);\n}\n\nlet BUF;\nfunction Ao(o, r, g, b, a = 1) {\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nconst A = (x, y, r, g, b, a) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && Ao((y * W + x) * 3, r, g, b, a);\n\nfunction drawBird(P) {\n  const S = P.pose, face = P.face, ox = round(P.bx), oy = round(P.by), L = 0.45 + 0.6 * P.sun, fk = 0.5 + 0.5 * P.sun;\n  const fl = P.bs && P.bs \u003c= FLY ? 1.2 : 0.8 + 0.3 * max(0, sin(P.t * 2.3));\n  S.rows.forEach((row, r) => {\n    for (let c = 0; c \u003c row.length; c++) {\n      const col = COL[row[c]], x = ox + (c - S.ax) * face, y = oy + r - S.ay, k = L * (row[c] === \"T\" ? fl : 1), w = y > SURF;\n      if (col) A(x, y, col[0] * k * (w ? 0.66 : 1), col[1] * k * (w ? 0.88 : 1), col[2] * k * (w ? 0.8 : 1));\n    }\n  });\n  const [sx, sy, dx, dy] = { v: [-1, -1, 0, 1], h: [-1, 1, 1, 0], d: [1, -1, 1, -1] }[S.fo], tx = ox + (S.tx - S.ax) * face, ty = oy + S.ty - S.ay;\n  for (let i = 0; i \u003c P.fl; i++) {\n    const x = tx + (sx + i * dx) * face, y = ty + sy + i * dy, k = fk * (y > SURF ? 0.8 : 1), b = i === (dy > 0 ? 3 : dy ? P.fl - 1 : 0);\n    A(x, y, (b ? 90 : 210) * k, (b ? 110 : 216) * k, (b ? 84 : 204) * k);\n    // Swallowed head first: the tail end sticks out.\n    if (dy \u003c 0) A(x - face, y, 90 * k, 110 * k, 84 * k);\n  }\n}\n\nfunction leaves({ leaves: L, t, tint, sun, shake }, wind) {\n  for (let i = 0; i \u003c L.length; i += 7) {\n    const x = L[i] + round(sin(t * (1.1 + wind) + L[i + 5]) * wind * (L[i + 6] ? 1 + shake * 2 : 0.7)), y = L[i + 1], q = max(0, sin(t * (2 + 3 * wind) + L[i + 4])) ** 6;\n    const k = L[i + 3] * (0.9 + 0.7 * q), r = 60 * k * tint[0], g = 112 * k * tint[1], b = 50 * k * tint[2] + 30 * q * sun;\n    A(x, y, r, g, b);\n    if (L[i + 2] & 1) A(x + 1, y, r * 0.85, g * 0.85, b * 0.85);\n    if (L[i + 2] > 1) A(x, y + 1, r * 0.8, g * 0.8, b * 0.8);\n  }\n}\n\n// Light shafts, and caustics on the bed.\nfunction shafts({ buf, mat, tint, sun, cur, t, sunDir, silt, shaft: S }) {\n  const sl = sunDir * 2.2, so = t * (1.2 + 5 * cur) * 4, shine = sun * (1.15 - abs(sunDir) * 0.45) * (1 - silt) * 46, [tr, tg, tb] = [tint[0] * 0.85, tint[1], tint[2] * 0.7];\n  for (let y = SURF + 1; y \u003c H; y++) {\n    const dy = y - SURF, fade = pow(1 - dy / (H - SURF + 6), 1.4) * shine, b0 = so + dy * sl, b1 = 97 - t * 10.4 + dy * sl * 0.5, ph = t * 1.7 + 2 * sin(y * 0.45 - t * 0.9);\n    for (let x = 0, p = y * W, o = p * 3; x \u003c W; x++, p++, o += 3) {\n      let a = S[(b0 + x * 4) & 255] * (0.55 + 0.45 * S[(b1 + x * 2) & 255]) * fade;\n      const c = mat[p] === 6 ? sin(x * 0.8 + ph) + sin(x * 0.37 - y * 0.5 - t * 1.2) : 0;\n      if (c > 1.1) a += (c - 1.1) * 40 * sun;\n      if (a > 0.5) (buf[o] += a * tr), (buf[o + 1] += a * tg), (buf[o + 2] += a * tb);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, mat, tint, low, sun, cur, t, rich, bed } = P, wind = 0.35 + 0.65 * abs(cur), wl = 0.55 + 0.45 * sun;\n  const At = (x, y, r, g, b) => A(x, y, r * tint[0], g * tint[1], b * tint[2]);\n  BUF = buf;\n  buf.set(P.bg);\n  const off = t * (0.8 + 3.2 * wind), CT = P.cloud, wo = floor(t * wind * 5);\n  const cc = low.map((v) => mix(v, 250, 0.6) * (0.55 + 0.45 * sun));\n  for (let p = 0, m, r, x0, f; p \u003c (BANK + 1) * W; p++)\n    if (!(m = mat[p])) (x0 = floor((f = (p & 63) - off))), (f -= x0), (r = (p >> 6) * 128), Ao(p * 3, cc[0], cc[1], cc[2], (CT[r + (x0 & 127)] * (1 - f) + CT[r + ((x0 + 1) & 127)] * f) * 0.85);\n    else if (m === 2) for (let c = 0, s = 0.92 + 0.22 * CT[((p >> 6) % 24) * 128 + (((p & 63) + wo) & 127)]; c \u003c 3; c++) buf[p * 3 + c] *= s;\n  for (let i = 0, n = 3 + round(rich * 29); i \u003c n; i++) {\n    const [rx, r0, ph, iris] = P.reeds[i], rh = r0 * (0.6 + 0.9 * rich), lean = sin(t * (1.2 + wind) + ph) * wind * 1.4 + wind * 0.8;\n    for (let j = 0, f, x, k; j \u003c rh; j++) {\n      (f = j / rh), (x = round(rx + lean * f * f)), (k = 0.75 + 0.5 * f);\n      At(x, SURF - 1 - j, 92 * k, 146 * k, 52 * k);\n    }\n    const x = round(rx + lean * 0.5), y = round(SURF - rh * 0.75);\n    if (iris) At(x, y, 250, 214, 40), At(x - 1, y + 1, 230, 180, 30);\n  }\n  shafts(P);\n  for (let x = 0, ro = t * (0.8 + 7 * cur); x \u003c W; x++) {\n    const r = sin(x * 0.9 + ro + 2 * sin(x * 0.23 - t * 1.1)), gl = r > 0.6 ? (r - 0.6) * 1.5 : 0, o = (SURF * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) buf[o + c] = mix(low[c] * 0.85, 255, gl) * (0.5 + 0.5 * sun);\n  }\n  // Rings and foam.\n  for (const [cx, r, a, foam] of P.ri)\n    if (foam) for (let x = round(cx) - 3; x \u003c= round(cx) + 3; x++) for (let y = SURF - 1; y \u003c= SURF + 2; y++) A(x, y, 240, 245, 245, a * 1.4 * (1 - abs(x - cx) / 4));\n    else\n      for (let x = floor(cx - r), ry = max(0.6, r * 0.11), k = a * (0.6 + 0.4 * sun), e; r > 0 && x \u003c= cx + r; x++) {\n        e = ry * sqrt(max(0, 1 - ((x + 0.5 - cx) / r) ** 2));\n        A(x, round(SURF - e), 235, 240, 240, k * 0.8);\n        A(x, round(SURF + e) + 1, 210, 230, 225, k * 0.5);\n      }\n  P.tuft.forEach(([n, h], x) => {\n    const hh = h + round(rich * 4), sw = round(sin(t * 1.6 + x * 0.5) * 0.6 + cur);\n    for (let j = -2, k; n \u003c 0.22 + 0.66 * rich && j \u003c hh; j++) (k = (j \u003c 0 ? 0.6 : 0.75 + (0.35 * j) / hh) * wl), A(x + (j > 1) * sw, round(bed[x]) - j, 36 * k, 96 * k, 30 * k);\n  });\n  // Water-crowfoot; a stem that reaches the top trails and flowers.\n  for (let n = 0; n \u003c P.nweed; n++) {\n    const [wx, len0, ph, tone] = P.weed[n], len = len0 * P.wlen, lean = (((n * 5) % 7) - 3) * 0.06, dir = cur > 0.05 ? 1 : cur \u003c -0.05 || lean \u003c 0 ? -1 : 1;\n    let x = wx + 0.5, y = bed[wx] + 1, top = false;\n    for (let s = 0; s \u003c len; s++) {\n      const f = s / len, ang = lean + cur * 1.3 * pow(f, 0.6) + sin(t * 1.3 + ph + s * 0.16) * (0.14 + 0.24 * f) * (0.5 + abs(cur));\n      if (y > SURF + 2.5) (x += sin(ang)), (y -= cos(ang));\n      else (top = true), (x += dir * (0.8 + 0.2 * sin(t * 2 + s)));\n      const k = tone * (0.8 + 0.25 * sin(s * 1.3 + ph)) * wl, xi = round(x - 0.5), yi = round(y), sd = (s + n) % 2 ? 1 : -1;\n      A(xi, yi, 14 * k, 54 * k, 12 * k);\n      if (s % P.every !== 1 || s \u003c 2) A(xi + 1, yi, 84 * k, 170 * k, 62 * k, 0.8);\n      else if (top) {\n        A(xi, yi + 1, 104 * k, 196 * k, 74 * k, 0.9);\n        A(xi + dir, yi + 2, 84 * k, 164 * k, 60 * k, 0.6);\n        if (s % 4 === 1) A(xi, SURF, 244, 244, 232, 0.95), A(xi + 1, SURF, 236, 210, 80, 0.9);\n      } else for (const [ex, ey, a] of TUFT) A(xi + ex * sd, yi + ey, 104 * k, 196 * k, 76 * k, a);\n    }\n  }\n  const fk = (0.4 + 0.6 * sun) * (1 - 0.4 * P.silt);\n  for (const F of P.fish) {\n    const x = round(F.x), y = round(F.y), f = F.f, g = F.g > 0;\n    for (let j = 0, s; j \u003c 4; j++) {\n      s = (j === 2 ? 0.62 : 1) * (g ? 1.3 : 1) * fk;\n      A(x - f * j, y, (g ? 150 : 46) * fk, (g ? 162 : 64) * fk, (g ? 146 : 44) * fk);\n      A(x - f * j, y + 1, min(255, 196 * s), min(255, 204 * s), min(255, 186 * s));\n    }\n    A(x - f * 4, y + (floor(t * 7 + F.ph) & 1), 60 * fk, 78 * fk, 56 * fk);\n  }\n  for (const [x, y] of P.bu) A(round(x), round(y), 200, 232, 228, 0.7);\n  leaves(P, wind);\n  drawBird(P);\n  for (const [x, y] of P.dr) A(round(x), round(y), 225, 240, 245, 0.9);\n  show(display, P, 0.34 * cl((sun - 0.4) / 0.5, 0, 1), 1024 - (floor(off * 1.3) & 127));\n}\n\n// To the panel, under a passing cloud's shadow.\nfunction show(display, { buf, mat, shad: sh }, amp, so3) {\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, xs = so3 - round(y * 0.45); x \u003c W; x++, p++) {\n      const o = p * 3, s = mat[p] ? 1 - amp * sh[(x + xs) & 127] : 1, r = buf[o] * s, g = buf[o + 1] * s, b = buf[o + 2] * s;\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n}\n","layer":{"id":"layer-kingfisher","type":"code","name":"kingfisher","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Kingfisher\n// Family:  bird\n// Idea:    A river bank cut from the alder overhead to the pebbles on the bed: a kingfisher watches from a branch, drops straight in with a splash and a trail of bubbles, comes up with a minnow, beats it on the branch and swallows it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after split-level river photographs of the common kingfisher (Alcedo atthis)\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Fish=6..60, Current=-1..1\n//\n// Knob 1: Hour. Early morning at 0 with the sun low in the east; noon sends the light shafts straight down, the afternoon goes gold, dusk goes pink.\n// Knob 2: Speed. How fast the river, the wind, the clouds and the bird go: at 2 it dives within two seconds, then every ten to fifteen.\n// Knob 3: Fish. How rich the river runs: six minnows and eight strands of water-crowfoot at 6, a shoal of sixty in a thick weed bed under reeds and yellow flag at 60. More fish, and the bird goes sooner.\n// Knob 4: Current. Near still at 0.06; turned either way the river runs that way, the weed streams out, the minnows face upstream and the alder stirs. Run hard, it goes the colour of tea.\n// Buttons: K1 tap sends the kingfisher down now, or as soon as it is back on the branch.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Waterline, top of the far bank, the bird's feet on the branch.\nconst [SURF, BANK, PX, PY] = [84, 47, 37, 33];\nconst { min, max, floor, round, sin, cos, abs, sqrt, pow, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every `per` cells.\nfunction vn(x, y, per = 4096) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = ((xi % per) + per) % per, x1 = (x0 + 1) % per, a = hash(x0, yi), b = hash(x1, yi), c = hash(x0, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, yi + 1)) * su * sv;\n}\n\n// The bird facing right: C cobalt, T turquoise back, O orange, W white, K bill, R feet.\n// A pose: rows, anchor, bill tip, and how a fish in the bill lies.\nconst COL = { C: [24, 92, 214], T: [40, 214, 238], O: [252, 112, 24], o: [200, 78, 20], W: [238, 240, 228], K: [20, 18, 26], R: [236, 72, 58] };\nconst pose = (s, ax, ay, tx, ty, fo) => ({ rows: s.split(\" \"), ax, ay, tx, ty, fo });\nconst BODY = \" .CCWW TCCOO TCCOO .CCOo .CC.R .C\";\nconst LEVEL = pose(\"..CCC .CCCCKKKK .WOOOK\" + BODY, 4, 7, 8, 1, \"v\");\nconst DOWN = pose(\"..CCC .CCCCK .WOOOKK .CCWW.KK\" + BODY.slice(6), 4, 7, 7, 3, \"v\");\nconst UP = pose(\"......K .....K ..CCK .CCCC .WOOO\" + BODY, 4, 9, 6, 0, \"d\");\nconst WIND = { ...UP, fo: \"h\" };\nconst SLAM = pose(\". .CCC TCCCC TCWOOC .CCOOWK .CCOo.K .CC.R.K .C\", 4, 6, 6, 6, \"h\");\nconst D45 = pose(\"CT .CTT .OCCT ..OCCC ...WOCK ......K .......K\", 5, 4, 7, 6, \"h\");\nconst DV = pose(\".C .CT OCT OCT OCT WOC .KC .K .K\", 1, 5, 1, 8, \"h\");\nconst RV = pose(\".K .K .KC WOC OCT OCT OCT .CT .C\", 1, 3, 1, 0, \"h\");\nconst FA = pose(\"....CC .....CC CTTTTTCCC .COOOOWOCKKK\", 5, 2, 11, 3, \"v\");\nconst FB = pose(\". . CTTTTCCCC .COOCCWOCKKK ....CC .....C\", 5, 2, 11, 3, \"v\");\n// Morning to dusk: sky overhead, sky low, light, sun.\nconst HOURS = [[96, 150, 214, 214, 218, 196, 1, 0.97, 0.9, 0.85], [54, 122, 228, 158, 198, 236, 1, 1, 1, 1], [66, 118, 204, 226, 204, 150, 1.06, 0.97, 0.84, 0.92], [70, 82, 158, 248, 156, 92, 1.12, 0.84, 0.7, 0.7], [36, 38, 94, 212, 100, 104, 0.9, 0.72, 0.82, 0.45]];\nconst [PERCH, LEAN, DIVE, UNDER, RISE, FLY, BEAT, SWALLOW] = [0, 1, 2, 3, 4, 5, 6, 7];\nconst DUR = [0, 0.35, 0.62, 0.5, 0.74, 1.5, 2.1, 1.3];\nconst TUFT = [[1, 0, 0.95], [2, -1, 0.8], [2, 1, 0.5], [3, -1, 0.4], [1, -1, 0.7]];\n\nfunction build(P) {\n  const { alb, mat } = P, crown = [], bed = (P.bed = []), lv = [];\n  const set = (x, y, m, r, g, b) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  const clump = (x, y) => vn(x * 0.2, y * 0.22) * 0.65 + vn(x * 0.55, y * 0.5) * 0.35;\n  for (let x = 0; x \u003c W; x++) (crown[x] = 11 + 8 * vn(x * 0.1, 3.3) + 4 * vn(x * 0.33, 8.1)), (bed[x] = 115.5 + 2.5 * sin(x * 0.11 + 0.7) + 3 * vn(x * 0.25, 11.5));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, g = hash(x + 900, y) - 0.5, c = y - crown[x], wet = cl((y - SURF + 7) / 6, 0, 1);\n    const n = c >= 0 && y \u003c= BANK && clump(x, y), k = n && (0.62 + 0.55 * n + 0.9 * (clump(x - 1.5, y - 1.5) - n)) * (1 - (0.42 * c) / (BANK - crown[x] + 1)) + 0.08 * g + (c \u003c 1.5 ? 0.35 : 0);\n    const e = (0.78 + 0.36 * (vn(2.5, y * 0.32) * 0.7 + vn(x * 0.06, y * 0.3) * 0.3) + 0.12 * g) * (1 - 0.38 * wet), q = 0.8 + 0.3 * vn(x * 0.7, y * 0.7) + 0.2 * g;\n    if (c \u003c 0) set(x, y, 0, 0, 0, 0);\n    else if (y \u003c= BANK) set(x, y, 2, 58 * k, 96 * k, 58 * k + 6);\n    else if (y \u003c SURF) set(x, y, 4, 138 * e, (100 + 14 * wet) * e, (64 + 6 * wet) * e);\n    else set(x, y, y \u003c bed[x] ? 5 : 6, 150 * q, 134 * q, 98 * q);\n  }\n  const ST = [[196, 172, 130], [150, 146, 136], [214, 182, 120], [128, 110, 90], [226, 198, 146]];\n  for (let n = 0; n \u003c 80; n++) {\n    const cx = rnd() * 66 - 1, cy = bed[cl(round(cx), 0, W - 1)] + 1 + rnd() * 9, rx = 1.3 + rnd() * 2.4, ry = 0.9 + rnd() * 1.4, c = ST[floor(rnd() * 5)], t = 0.85 + rnd() * 0.3;\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const dx = (x + 0.5 - cx) / rx, dy = (y + 0.5 - cy) / ry, r = dx * dx + dy * dy, k = t * (r > 0.6 ? 0.62 : 1) * (1 + 0.28 * cl(-dx - dy, -1, 1));\n        if (r \u003c= 1 && y \u003c H && y >= bed[x]) set(x, y, 6, c[0] * k, c[1] * k, c[2] * k);\n      }\n  }\n  // Grass, roots, and the kingfisher's burrow.\n  for (let x = 0; x \u003c W; x++) for (let y = BANK - floor(rnd() * 3.6), k; y \u003c= BANK + 1; y++) (k = 0.75 + rnd() * 0.5), set(x, y, 3, 74 * k, 124 * k, 46 * k);\n  for (let n = 0; n \u003c 6; n++) for (let x = 8 + rnd() * 30, i = 0, len = 5 + rnd() * 12; i \u003c len; i++) set(round((x += (rnd() - 0.5) * 1.2)), BANK + 2 + i, 4, 66, 50, 38);\n  for (let y = 53; y \u003c 64; y++)\n    for (let x = 16; x \u003c 29; x++) {\n      const dx = (x - 22) / 3.1, dy = (y - 57.5) / 2.6, r = dx * dx + dy * dy, q = r * r;\n      if (r \u003c 1) set(x, y, 4, 12 + 40 * q, 9 + 28 * q, 7 + 18 * q);\n      else if (r \u003c 1.5 && dy > 0.4) set(x, y, 4, 172, 132, 92);\n    }\n  for (let y = 0; y \u003c= BANK + 1; y++)\n    for (let x = 0, w = 4 + max(0, y - 30) * 0.14, k; x \u003c w; x++) (k = (0.72 + 0.4 * vn(x * 0.9, y * 0.13)) * (x \u003c 1 ? 1.25 : x > w - 1.5 ? 0.7 : 1)), set(x, y, 1, 104 * k, 98 * k, 88 * k);\n  for (let x = 3; x \u003c= 55; x++) {\n    const th = 3.2 - (2.4 * (x - 4)) / 51, n = max(1, round(th)), top = round(35.6 - 0.06 * (x - 4) + 0.0009 * (x - 4) ** 2 - th / 2);\n    for (let i = 0, k; i \u003c n; i++) (k = i ? (i === n - 1 ? 0.6 : 0.9) : 1.35), set(x, top + i, 1, 106 * k, 96 * k, 84 * k);\n  }\n  for (const tw of [[20, 34, 24, 29, 27, 26], [30, 35, 33, 38, 35, 41], [46, 35, 49, 38, 51, 42], [54, 35, 58, 34, 61, 37]])\n    for (let s = 0; s \u003c 4; s += 2) for (let i = 0; i \u003c= 8; i++) set(round(mix(tw[s], tw[s + 2], i / 8)), round(mix(tw[s + 1], tw[s + 3], i / 8)), 1, 92, 82, 72);\n  // Alder leaves, none in front of the bird.\n  for (const [cx, cy, r, n, shade] of [[3, 2, 12, 110, 1], [15, 0, 11, 80, 1], [27, 1, 8, 50, 1], [36, -1, 6, 22, 1], [7, 14, 7, 40, 1], [24, 26, 4, 18], [13, 26, 3, 10], [35, 42, 3, 10], [50, 42, 4, 18], [60, 36, 3, 12], [49, 30, 3, 8]]) {\n    for (let y = floor(cy - r); shade && y \u003c= cy + r; y++)\n      for (let x = floor(cx - r), d; x \u003c= cx + r; x++) if ((d = hypot(x - cx, (y - cy) * 1.3) / r) \u003c 0.85 && vn(x * 0.45, y * 0.45 + 40) > 0.3 + d * 0.3) set(x, y, 1, 34, 58, 30);\n    for (let i = 0; i \u003c n; i++) {\n      const a = rnd() * PI * 2, rr = r * sqrt(rnd()), x = round(cx + cos(a) * rr), y = round(cy + sin(a) * rr * 0.75);\n      if (x \u003c 31 || x > 46 || y \u003c 21 || y > 33) lv.push(x, y, floor(rnd() * 4), 0.75 + rnd() * 0.5, rnd() * 7, rnd() * 7, cy > 20 ? 1 : 0);\n    }\n  }\n  P.leaves = lv;\n  // More weed, reeds and starwort as the river gets richer.\n  P.weed = [6, 17, 28, 40, 50, 59, 12, 23, 45, 34, 55, 2, 20, 42, 62, 31, 9, 48, 26, 14, 37, 53, 4, 57].map((x) => [x, 16 + rnd() * 26, rnd() * 7, 0.8 + rnd() * 0.4]);\n  P.reeds = Array.from({ length: 32 }, (_, i) => [(i * 23.7 + rnd() * 6) % 64, 7 + rnd() * 10, rnd() * 7, i % 6 === 3]);\n  P.tuft = bed.map((_, x) => [vn(x * 0.3, 50.5), 1 + floor(rnd() * 3)]);\n  const tex = (h, f) => Float32Array.from({ length: 128 * h }, (_, i) => f(i & 127, i >> 7));\n  P.cloud = tex(24, (x, y) => sm((vn(x / 14, y / 5, 128 / 14) * 0.65 + vn(x / 6, y / 3 + 9, 128 / 6) * 0.35 - 0.48) * 3.2) * (1 - y / 30));\n  P.shad = tex(1, (i) => sm(1 - abs(i - 34) / 30) + 0.7 * sm(1 - abs(i - 96) / 18));\n  const S = (P.shaft = new Float32Array(256));\n  for (let n = 0; n \u003c 9; n++) {\n    const c = rnd() * 256, w = 6 + rnd() * 18, a = 0.4 + rnd() * 0.6;\n    for (let i = 0; i \u003c 256; i++) S[i] = min(1, S[i] + a * Math.exp(-((abs(((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n}\n\n// Light for the hour. A river in spate is the colour of tea.\nfunction paint(P, h) {\n  const f = h * 4, i = min(3, floor(f)), B = HOURS[i + 1], q = HOURS[i].map((v, c) => mix(v, B[c], f - i)), { alb, mat, bg } = P;\n  const sun = (P.sun = q[9]), top = q.slice(0, 3), low = (P.low = q.slice(3, 6)), tint = (P.tint = q.slice(6, 9).map((v) => v * sun)), s = (P.silt = 0.6 * P.cur * P.cur);\n  P.sunDir = -0.9 + 1.8 * h;\n  const M = (a, b) => a.map((v, c) => mix(v, b[c], s)), WT = M([88, 128, 94], [112, 98, 52]), WD = M([30, 58, 44], [50, 40, 24]), fl = M([0.74, 0.88, 0.72], [0.62, 0.6, 0.4]);\n  for (let p = 0; p \u003c N; p++) {\n    const y = p >> 6, m = mat[p], ts = pow(cl(y / 24, 0, 1), 1.3), d = cl((y - SURF - 1) / (H - SURF - 2), 0, 1);\n    for (let c = 0, o = p * 3, a; c \u003c 3; c++)\n      (a = alb[o + c] * tint[c]),\n        (bg[o + c] =\n          m === 0 ? mix(top[c], low[c], ts)\n          : m === 2 ? mix(a, low[c] * 0.5, 0.16)\n          : m === 5 ? mix(WT[c], WD[c], pow(d, 0.8)) * tint[c] + low[c] * 0.08 * (1 - d)\n          : m === 6 ? mix(a * fl[c] * (0.95 - 0.25 * d), WD[c] * tint[c], s * 0.8)\n          : a);\n  }\n}\n\nfunction stepFish(P, d) {\n  const t = P.t, cx = 32 + 15 * sin(t * 0.13 + 0.4) + 6 * sin(t * 0.31), cy = 103 + 5 * sin(t * 0.21 + 1.3);\n  for (const F of P.fish) {\n    // The one it has picked drifts into the line of the dive.\n    const held = P.bs && P.bs \u003c= UNDER && F === P.prey && P.hit;\n    if (held) F.vx += (P.tx - F.x) * 2 * d;\n    if (F.s > 0) F.s -= d;\n    else if (!held) {\n      F.vx += ((cx + F.ox + 4 * sin(t * 0.7 + F.ph) - F.x) * 0.9 - F.vx * 1.1) * d + (rnd() - 0.5) * 30 * d;\n      F.vy += ((cy + F.oy + 2 * sin(t * 0.9 + F.ph * 1.3) - F.y) * 0.9 - F.vy * 1.4) * d + (rnd() - 0.5) * 16 * d;\n      if (rnd() \u003c d * 0.45) F.g = 0.25;\n    }\n    const lim = F.s > 0 ? 36 : held ? 8 : 14, sp = hypot(F.vx, F.vy);\n    if (sp > lim) (F.vx *= lim / sp), (F.vy *= lim / sp);\n    F.x += F.vx * d;\n    F.y = cl(F.y + F.vy * d, SURF + 5, P.bed[cl(round(F.x), 0, W - 1)] - 3);\n    const f = abs(P.cur) > 0.12 && F.s \u003c= 0 ? (P.cur > 0 ? -1 : 1) : abs(F.vx) > 2 ? Math.sign(F.vx) : F.f;\n    if (f !== F.f) (F.f = f), (F.g = 0.3);\n    F.g -= d;\n  }\n}\n\n// Drops, rings, foam; the dive scatters all but its minnow.\nfunction splash(P, x, n, up) {\n  for (let i = 0; i \u003c n; i++) P.dr.push([x + (rnd() - 0.5) * 4, SURF - 1, (rnd() - 0.5) * (i % 7 ? 46 : 4), -(18 + rnd() * up) * (i % 7 ? 1 : 1.5)]);\n  P.ri.push([x, 0, 1], [x, 0, 0.6, 1]);\n  for (const F of n \u003c 30 ? [] : P.fish) {\n    const dx = F.x - x, dy = F.y - SURF, r = hypot(dx, dy) + 1;\n    if (r > 27 || (F === P.prey && P.hit)) continue;\n    [F.s, F.g] = [0.7 + rnd() * 0.6, 0.3];\n    F.vx += (dx / r) * 34;\n    F.vy += (dy / r) * 20 + 6;\n  }\n}\n\nfunction stepBird(P, d) {\n  let k, u = (P.bt += d) / (DUR[P.bs] || 1);\n  const go = (s) => ((P.bs = s), (P.bt = 0));\n  const bub = (p, x, y) => rnd() \u003c p && P.bu.push([P.bx + (rnd() - 0.5) * x, P.by + y, 14 + rnd() * 14, rnd() * 7]);\n  switch (P.bs) {\n    case PERCH:\n      if ((P.look -= d) \u003c= 0) {\n        P.pose = rnd() \u003c 0.55 ? LEVEL : DOWN;\n        P.look = 0.4 + rnd() * 1.2;\n      }\n      if (P.bt >= P.wait * (1 - 0.45 * P.rich) || P.go) {\n        // A minnow below the branch. One dive in four misses, never the first.\n        let best = null, sc = 1e9;\n        for (const F of P.fish) {\n          const s = abs(F.x - PX - 10) + 0.5 * abs(F.y - 100);\n          if (F.x >= PX - 6 && F.x \u003c= 60 && s \u003c sc) [sc, best] = [s, F];\n        }\n        Object.assign(P, { go: false, prey: best, tx: best ? cl(best.x + best.vx * 0.6, PX - 2, 53) : PX + 10, hit: !!best && (!P.dives++ || rnd() \u003c 0.75) });\n        go(LEAN);\n      }\n      break;\n    case LEAN:\n      [P.pose, P.bx, P.by, P.face] = [D45, PX + 2, PY - 4 + u, 1];\n      if (u >= 1) go(DIVE);\n      break;\n    case DIVE:\n      P.face = P.tx >= PX ? 1 : -1;\n      P.bx = mix(PX + 2, P.tx, pow(u, 0.8));\n      P.by = mix(PY - 3, SURF - 2, pow(u, 1.8));\n      P.pose = u \u003c 0.22 ? D45 : DV;\n      if (u >= 1) {\n        splash(P, (P.x0 = P.bx), 30, 50);\n        for (let i = 0; i \u003c 14; i++) bub(1, 5, 3 + rnd() * 5);\n        go(UNDER);\n      }\n      break;\n    case UNDER: {\n      const q = P.hit && P.fish.includes(P.prey) ? P.prey : null, e = 1 - (1 - u) * (1 - u);\n      P.bx = mix(P.x0, q ? q.x : P.x0, e);\n      P.by = mix(SURF - 2, q ? q.y - 2 : 99, e);\n      P.pose = DV;\n      bub(0.8, 3, -3);\n      if (u >= 1) {\n        if (q) P.fish.splice(P.fish.indexOf(q), 1);\n        [P.fl, P.prey, P.y0] = [q ? 4 : 0, null, P.by];\n        go(RISE);\n      }\n      break;\n    }\n    case RISE: {\n      const w = cl((u - 0.43) / 0.57, 0, 1);\n      P.pose = u \u003c 0.22 ? DV : RV;\n      if (!w) P.bx += sin(P.bt * 60) * 9 * d;\n      P.by = mix(P.y0, SURF - 2, w * w);\n      bub(w ? 0.7 : 0.5, 3, w ? 4 : -2);\n      if (u >= 1) splash(P, (P.x0 = P.bx), 16, 32), go(FLY);\n      break;\n    }\n    case FLY:\n      P.face = PX >= P.x0 ? 1 : -1;\n      P.bx = mix(P.x0, PX, sm(u));\n      P.by = mix(SURF - 4, PY - 3, 1 - (1 - u) * (1 - u)) - 7 * sin(PI * u);\n      P.pose = floor(P.bt / 0.07) & 1 ? FB : FA;\n      if (u \u003c 0.25 && rnd() \u003c 0.5) P.dr.push([P.bx + (rnd() - 0.5) * 6, P.by + 2, (rnd() - 0.5) * 10, rnd() * 10]);\n      if (u >= 1 && !P.fl) for (let i = 0; i \u003c 10; i++) P.dr.push([PX + (rnd() - 0.5) * 6, PY - 4 - rnd() * 4, (rnd() - 0.5) * 30, -rnd() * 20]);\n      if (u >= 1) (k = P.fl), perch(P), k && ((P.fl = k), go(BEAT));\n      break;\n    case BEAT: {\n      // Four whacks on the branch.\n      k = floor(P.bt / 0.42);\n      const slam = P.bt % 0.42 > 0.24 && k \u003c 4;\n      P.pose = k > 3 ? LEVEL : slam ? SLAM : WIND;\n      if (slam && !P.slam) (P.shake = 1), P.dr.push([PX + 7, PY - 1, 8 + rnd() * 10, -10 - rnd() * 14]);\n      P.slam = slam;\n      if (u >= 1) go(SWALLOW);\n      break;\n    }\n    case SWALLOW:\n      P.pose = u \u003c 0.85 ? UP : LEVEL;\n      P.fl = u \u003c 0.3 ? 3 : u \u003c 0.55 ? 2 : u \u003c 0.8 ? 1 : 0;\n      if (u >= 1) perch(P);\n  }\n}\n\nfunction perch(P) {\n  Object.assign(P, { bs: PERCH, bt: 0, bx: PX, by: PY, face: 1, pose: LEVEL, look: 0.4, fl: 0, wait: P.queued ? 0.3 : 3.5 + rnd() * 4, queued: false });\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), h: -1, t: 0, dives: 0, fish: [], dr: [], bu: [], ri: [], shake: 0 });\n  build(P);\n  perch(P);\n  P.wait = 1.3;\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06], h = cl(k[0], 0, 1), cur = cl(k[3], -1, 1);\n  const rich = (P.rich = cl((k[2] - 6) / 54, 0, 1)), want = round(cl(k[2], 6, 60)), d = cl(dt, 0, 0.1) * (P.rate = cl(k[1], 0.2, 3) / 2);\n  if (abs(h - P.h) > 0.0005 || abs(cur - P.cur) > 0.01) (P.h = h), (P.cur = cur), paint(P, h);\n  [P.nweed, P.wlen, P.every] = [8 + round(rich * 16), 0.62 + 0.55 * rich, rich > 0.5 ? 2 : 3];\n  for (let e = P.t > 0; P.fish.length \u003c want; )\n    P.fish.push({ x: e ? (cur >= 0 ? -3 : 66) : 6 + rnd() * 52, y: e ? 100 + rnd() * 8 : 94 + rnd() * 18, vx: 0, vy: 0, ox: (rnd() - 0.5) * 30, oy: (rnd() - 0.5) * 12, ph: rnd() * 7, f: rnd() \u003c 0.5 ? 1 : -1, s: 0, g: 0 });\n  P.fish.length = want;\n  // The river's clock starts further in the faster it runs.\n  if (!P.t) P.t = 6 * P.rate;\n  if (input.btnPressed?.[0]) P[P.bs === PERCH ? \"go\" : \"queued\"] = true;\n  P.t += d;\n  stepFish(P, d);\n  stepBird(P, d);\n  P.dr = P.dr.filter((p) => ((p[3] += 150 * d), (p[0] += p[2] * d), (p[1] += p[3] * d), !(p[1] > SURF && p[3] > 0)));\n  P.bu = P.bu.filter((b) => ((b[1] -= b[2] * d), (b[0] += (sin(b[3] + b[1] * 0.6) * 3 + cur * 8) * d), b[1] > SURF + 1));\n  P.ri = P.ri.filter((r) => ((r[1] += 13 * d), (r[0] += cur * 10 * d), (r[2] -= (r[3] ? 1 : 0.42) * d) > 0));\n  P.shake = max(0, P.shake - d * 3);\n}\n\nlet BUF;\nfunction Ao(o, r, g, b, a = 1) {\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nconst A = (x, y, r, g, b, a) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && Ao((y * W + x) * 3, r, g, b, a);\n\nfunction drawBird(P) {\n  const S = P.pose, face = P.face, ox = round(P.bx), oy = round(P.by), L = 0.45 + 0.6 * P.sun, fk = 0.5 + 0.5 * P.sun;\n  const fl = P.bs && P.bs \u003c= FLY ? 1.2 : 0.8 + 0.3 * max(0, sin(P.t * 2.3));\n  S.rows.forEach((row, r) => {\n    for (let c = 0; c \u003c row.length; c++) {\n      const col = COL[row[c]], x = ox + (c - S.ax) * face, y = oy + r - S.ay, k = L * (row[c] === \"T\" ? fl : 1), w = y > SURF;\n      if (col) A(x, y, col[0] * k * (w ? 0.66 : 1), col[1] * k * (w ? 0.88 : 1), col[2] * k * (w ? 0.8 : 1));\n    }\n  });\n  const [sx, sy, dx, dy] = { v: [-1, -1, 0, 1], h: [-1, 1, 1, 0], d: [1, -1, 1, -1] }[S.fo], tx = ox + (S.tx - S.ax) * face, ty = oy + S.ty - S.ay;\n  for (let i = 0; i \u003c P.fl; i++) {\n    const x = tx + (sx + i * dx) * face, y = ty + sy + i * dy, k = fk * (y > SURF ? 0.8 : 1), b = i === (dy > 0 ? 3 : dy ? P.fl - 1 : 0);\n    A(x, y, (b ? 90 : 210) * k, (b ? 110 : 216) * k, (b ? 84 : 204) * k);\n    // Swallowed head first: the tail end sticks out.\n    if (dy \u003c 0) A(x - face, y, 90 * k, 110 * k, 84 * k);\n  }\n}\n\nfunction leaves({ leaves: L, t, tint, sun, shake }, wind) {\n  for (let i = 0; i \u003c L.length; i += 7) {\n    const x = L[i] + round(sin(t * (1.1 + wind) + L[i + 5]) * wind * (L[i + 6] ? 1 + shake * 2 : 0.7)), y = L[i + 1], q = max(0, sin(t * (2 + 3 * wind) + L[i + 4])) ** 6;\n    const k = L[i + 3] * (0.9 + 0.7 * q), r = 60 * k * tint[0], g = 112 * k * tint[1], b = 50 * k * tint[2] + 30 * q * sun;\n    A(x, y, r, g, b);\n    if (L[i + 2] & 1) A(x + 1, y, r * 0.85, g * 0.85, b * 0.85);\n    if (L[i + 2] > 1) A(x, y + 1, r * 0.8, g * 0.8, b * 0.8);\n  }\n}\n\n// Light shafts, and caustics on the bed.\nfunction shafts({ buf, mat, tint, sun, cur, t, sunDir, silt, shaft: S }) {\n  const sl = sunDir * 2.2, so = t * (1.2 + 5 * cur) * 4, shine = sun * (1.15 - abs(sunDir) * 0.45) * (1 - silt) * 46, [tr, tg, tb] = [tint[0] * 0.85, tint[1], tint[2] * 0.7];\n  for (let y = SURF + 1; y \u003c H; y++) {\n    const dy = y - SURF, fade = pow(1 - dy / (H - SURF + 6), 1.4) * shine, b0 = so + dy * sl, b1 = 97 - t * 10.4 + dy * sl * 0.5, ph = t * 1.7 + 2 * sin(y * 0.45 - t * 0.9);\n    for (let x = 0, p = y * W, o = p * 3; x \u003c W; x++, p++, o += 3) {\n      let a = S[(b0 + x * 4) & 255] * (0.55 + 0.45 * S[(b1 + x * 2) & 255]) * fade;\n      const c = mat[p] === 6 ? sin(x * 0.8 + ph) + sin(x * 0.37 - y * 0.5 - t * 1.2) : 0;\n      if (c > 1.1) a += (c - 1.1) * 40 * sun;\n      if (a > 0.5) (buf[o] += a * tr), (buf[o + 1] += a * tg), (buf[o + 2] += a * tb);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, mat, tint, low, sun, cur, t, rich, bed } = P, wind = 0.35 + 0.65 * abs(cur), wl = 0.55 + 0.45 * sun;\n  const At = (x, y, r, g, b) => A(x, y, r * tint[0], g * tint[1], b * tint[2]);\n  BUF = buf;\n  buf.set(P.bg);\n  const off = t * (0.8 + 3.2 * wind), CT = P.cloud, wo = floor(t * wind * 5);\n  const cc = low.map((v) => mix(v, 250, 0.6) * (0.55 + 0.45 * sun));\n  for (let p = 0, m, r, x0, f; p \u003c (BANK + 1) * W; p++)\n    if (!(m = mat[p])) (x0 = floor((f = (p & 63) - off))), (f -= x0), (r = (p >> 6) * 128), Ao(p * 3, cc[0], cc[1], cc[2], (CT[r + (x0 & 127)] * (1 - f) + CT[r + ((x0 + 1) & 127)] * f) * 0.85);\n    else if (m === 2) for (let c = 0, s = 0.92 + 0.22 * CT[((p >> 6) % 24) * 128 + (((p & 63) + wo) & 127)]; c \u003c 3; c++) buf[p * 3 + c] *= s;\n  for (let i = 0, n = 3 + round(rich * 29); i \u003c n; i++) {\n    const [rx, r0, ph, iris] = P.reeds[i], rh = r0 * (0.6 + 0.9 * rich), lean = sin(t * (1.2 + wind) + ph) * wind * 1.4 + wind * 0.8;\n    for (let j = 0, f, x, k; j \u003c rh; j++) {\n      (f = j / rh), (x = round(rx + lean * f * f)), (k = 0.75 + 0.5 * f);\n      At(x, SURF - 1 - j, 92 * k, 146 * k, 52 * k);\n    }\n    const x = round(rx + lean * 0.5), y = round(SURF - rh * 0.75);\n    if (iris) At(x, y, 250, 214, 40), At(x - 1, y + 1, 230, 180, 30);\n  }\n  shafts(P);\n  for (let x = 0, ro = t * (0.8 + 7 * cur); x \u003c W; x++) {\n    const r = sin(x * 0.9 + ro + 2 * sin(x * 0.23 - t * 1.1)), gl = r > 0.6 ? (r - 0.6) * 1.5 : 0, o = (SURF * W + x) * 3;\n    for (let c = 0; c \u003c 3; c++) buf[o + c] = mix(low[c] * 0.85, 255, gl) * (0.5 + 0.5 * sun);\n  }\n  // Rings and foam.\n  for (const [cx, r, a, foam] of P.ri)\n    if (foam) for (let x = round(cx) - 3; x \u003c= round(cx) + 3; x++) for (let y = SURF - 1; y \u003c= SURF + 2; y++) A(x, y, 240, 245, 245, a * 1.4 * (1 - abs(x - cx) / 4));\n    else\n      for (let x = floor(cx - r), ry = max(0.6, r * 0.11), k = a * (0.6 + 0.4 * sun), e; r > 0 && x \u003c= cx + r; x++) {\n        e = ry * sqrt(max(0, 1 - ((x + 0.5 - cx) / r) ** 2));\n        A(x, round(SURF - e), 235, 240, 240, k * 0.8);\n        A(x, round(SURF + e) + 1, 210, 230, 225, k * 0.5);\n      }\n  P.tuft.forEach(([n, h], x) => {\n    const hh = h + round(rich * 4), sw = round(sin(t * 1.6 + x * 0.5) * 0.6 + cur);\n    for (let j = -2, k; n \u003c 0.22 + 0.66 * rich && j \u003c hh; j++) (k = (j \u003c 0 ? 0.6 : 0.75 + (0.35 * j) / hh) * wl), A(x + (j > 1) * sw, round(bed[x]) - j, 36 * k, 96 * k, 30 * k);\n  });\n  // Water-crowfoot; a stem that reaches the top trails and flowers.\n  for (let n = 0; n \u003c P.nweed; n++) {\n    const [wx, len0, ph, tone] = P.weed[n], len = len0 * P.wlen, lean = (((n * 5) % 7) - 3) * 0.06, dir = cur > 0.05 ? 1 : cur \u003c -0.05 || lean \u003c 0 ? -1 : 1;\n    let x = wx + 0.5, y = bed[wx] + 1, top = false;\n    for (let s = 0; s \u003c len; s++) {\n      const f = s / len, ang = lean + cur * 1.3 * pow(f, 0.6) + sin(t * 1.3 + ph + s * 0.16) * (0.14 + 0.24 * f) * (0.5 + abs(cur));\n      if (y > SURF + 2.5) (x += sin(ang)), (y -= cos(ang));\n      else (top = true), (x += dir * (0.8 + 0.2 * sin(t * 2 + s)));\n      const k = tone * (0.8 + 0.25 * sin(s * 1.3 + ph)) * wl, xi = round(x - 0.5), yi = round(y), sd = (s + n) % 2 ? 1 : -1;\n      A(xi, yi, 14 * k, 54 * k, 12 * k);\n      if (s % P.every !== 1 || s \u003c 2) A(xi + 1, yi, 84 * k, 170 * k, 62 * k, 0.8);\n      else if (top) {\n        A(xi, yi + 1, 104 * k, 196 * k, 74 * k, 0.9);\n        A(xi + dir, yi + 2, 84 * k, 164 * k, 60 * k, 0.6);\n        if (s % 4 === 1) A(xi, SURF, 244, 244, 232, 0.95), A(xi + 1, SURF, 236, 210, 80, 0.9);\n      } else for (const [ex, ey, a] of TUFT) A(xi + ex * sd, yi + ey, 104 * k, 196 * k, 76 * k, a);\n    }\n  }\n  const fk = (0.4 + 0.6 * sun) * (1 - 0.4 * P.silt);\n  for (const F of P.fish) {\n    const x = round(F.x), y = round(F.y), f = F.f, g = F.g > 0;\n    for (let j = 0, s; j \u003c 4; j++) {\n      s = (j === 2 ? 0.62 : 1) * (g ? 1.3 : 1) * fk;\n      A(x - f * j, y, (g ? 150 : 46) * fk, (g ? 162 : 64) * fk, (g ? 146 : 44) * fk);\n      A(x - f * j, y + 1, min(255, 196 * s), min(255, 204 * s), min(255, 186 * s));\n    }\n    A(x - f * 4, y + (floor(t * 7 + F.ph) & 1), 60 * fk, 78 * fk, 56 * fk);\n  }\n  for (const [x, y] of P.bu) A(round(x), round(y), 200, 232, 228, 0.7);\n  leaves(P, wind);\n  drawBird(P);\n  for (const [x, y] of P.dr) A(round(x), round(y), 225, 240, 245, 0.9);\n  show(display, P, 0.34 * cl((sun - 0.4) / 0.5, 0, 1), 1024 - (floor(off * 1.3) & 127));\n}\n\n// To the panel, under a passing cloud's shadow.\nfunction show(display, { buf, mat, shad: sh }, amp, so3) {\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, xs = so3 - round(y * 0.45); x \u003c W; x++, p++) {\n      const o = p * 3, s = mat[p] ? 1 - amp * sh[(x + xs) & 127] : 1, r = buf[o] * s, g = buf[o + 1] * s, b = buf[o + 2] * s;\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=0..1, Speed=0.2..3, Fish=6..60, Current=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":0,"max":1,"about":"Early morning at 0 with the sun low in the east; noon sends the light shafts straight down, the afternoon goes gold, dusk goes pink."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the river, the wind, the clouds and the bird go: at 2 it dives within two seconds, then every ten to fifteen."},{"name":"Fish","min":6,"max":60,"about":"How rich the river runs: six minnows and eight strands of water-crowfoot at 6, a shoal of sixty in a thick weed bed under reeds and yellow flag at 60. More fish, and the bird goes sooner."},{"name":"Current","min":-1,"max":1,"about":"Near still at 0.06; turned either way the river runs that way, the weed streams out, the minnows face upstream and the alder stirs. Run hard, it goes the colour of tea."}],"start":[0,2,6,0.06],"measures":{"motion":0.0867,"detail":0.0496,"edges":0.2577,"complexity":2.0204,"coverage":0.9952,"colour":0.1732,"drift":0.0377},"knobResponse":[0.186,0.0476,0.0402,0.0555]},{"slug":"lap-pool","title":"Lap Pool","family":"sport","round":21,"note":"야외 25 m 수영장을 바로 위에서 내려다본 그림이 128줄을 다 써요. 색 수모를 쓴 사람들이 레인마다 제 속도로 오가다 벽에서 플립 턴을 하고, 뒤로 퍼지는 V자 물결이 빨강·하양·파랑 레인 로프를 흔들어요. 타일 바닥에는 햇빛이 만든 물결 그물이 흘러요.","idea":"A 25 m outdoor pool seen from straight above: swimmers in coloured caps swim lengths at their own paces, kick up white water, rock the lane ropes with their V wakes and flip-turn at the walls over a floor netted with sun caustics.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Lap Pool\n// Family:  sport\n// Idea:    A 25 m outdoor pool seen from straight above: swimmers in coloured caps swim lengths at their own paces, kick up white water, rock the lane ropes with their V wakes and flip-turn at the walls over a floor netted with sun caustics.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after overhead drone photographs of outdoor lap pools\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Stroke=0..3, Speed=0.2..3, Swimmers=4..15, Sun=-1..1\n//\n// Knob 1: Stroke. What everyone swims: freestyle at 0, backstroke at 1, breaststroke at 2 with its frog kick and glide, butterfly at 3 with both arms swung across the lane. Breaststroke and butterfly churn the water and break up the caustic net.\n// Knob 2: Speed. How fast the swimmers and the water go: at 2 a freestyle length takes 10 to 14 s, breaststroke nearer 20.\n// Knob 3: Swimmers. Four swimmers in four of the five lanes at 4; past five they share lanes and swim in circles, three a lane at 15.\n// Knob 4: Sun. Near noon at 0.06, with a bright caustic net and short shadows. Towards -1 the morning sun comes low from the east, towards 1 the evening sun from the west: gold light, a faint stretched net, long shadows across the lanes.\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, pow, asin, tan, PI } = Math;\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst fr = (x) => x - floor(x);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nconst [W, H, N] = [64, 128, 8192];\n// Pixel centres on whole numbers. Water: rows 8..119 (25 m), columns 2..61, five lanes of 12.\nconst [Y0, Y1] = [8, 119];\nconst LANE = (k) => 7.5 + 12 * k;\nconst ROPE = (k) => 13.5 + 12 * k;\n// Backstroke flags 5 m out from each wall.\nconst FLAGS = [Y0 + 22, Y1 - 22];\n// Body centre VC rows behind the crown; swimmers drawn SZ times life size.\nconst [VC, SZ] = [4.5, 1.3];\nconst HV = VC * SZ;\nconst [SWIM, TURN, GLIDE] = [0, 1, 2];\n// Per stroke: pace (rows/s at Speed 2), arm cycles/s, wake, kick spray/s, churn.\nconst STROKE = [[9.2, 1.15, 0.5, 22, 0.2], [8, 1, 0.45, 26, 0.15], [5.8, 0.95, 0.9, 0, 0.7], [8.6, 1.05, 1.25, 0, 1]];\nconst CAPS = [[252, 212, 20], [232, 36, 48], [242, 242, 236], [34, 34, 40], [36, 204, 92], [255, 122, 18], [255, 84, 170], [28, 104, 238], [182, 188, 198], [150, 64, 226]];\nconst SKIN = [[238, 192, 160], [214, 160, 118], [176, 116, 78], [122, 78, 52], [248, 206, 178]];\nconst SUIT = [[22, 26, 70], [18, 18, 22], [184, 22, 44], [0, 112, 132], [96, 32, 124], [34, 64, 168]];\n// Lanes fill from the middle, so four swimmers leave lane 4 free.\nconst ORDER = [2, 0, 4, 1, 3];\n// Light through 2 m of water, and the blue it scatters back.\nconst TW = [0.36, 0.72, 0.82];\nconst SC = [2, 18, 30];\n\nfunction build(P) {\n  const { alb, mat, blk } = P;\n  const set = (x, y, m, r, g, b) => ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, g = hash(x, y) - 0.5, e = min(y - Y0, Y1 - y);\n    if (e >= 0 && x >= 2 && x \u003c= 61) {\n      // White tiles on a 4 LED grid; lane lines end in a T 2 m from the wall.\n      const t = (1 + (hash(x >> 2, (y - Y0) >> 2) - 0.5) * 0.07 + g * 0.04) * ((x - 2) % 4 && (y - Y0) % 4 ? 1 : 0.88);\n      const dc = abs(x - LANE(floor((x - 1.5) / 12)));\n      if (e > 8 && (dc \u003c 1 || (dc \u003c 3 && e \u003c 11))) set(x, y, 3, 0.1 * t, 0.14 * t, 0.38 * t);\n      else set(x, y, 3, 0.84 * t, 0.92 * t, 0.95 * t);\n    } else if (e === -1 && x >= 2 && x \u003c= 61) set(x, y, 2, 0.12, 0.28 + g * 0.04, 0.58);\n    else if (e >= -3 && x >= 1 && x \u003c= 62) {\n      // The overflow gutter's grate: white bars over dark water.\n      const bar = (e \u003c -1 ? x : y) % 2 === 0;\n      set(x, y, 1, bar ? 0.86 : 0.04, bar ? 0.88 : 0.17, bar ? 0.89 : 0.23);\n    } else {\n      // Stone paving, darker where the splashes land.\n      const side = x === 0 || x === 63, j = side ? y % 8 === 0 : x % 8 === 0 || e === -8;\n      const k = (0.92 + 0.16 * hash(side ? x : x >> 3, side ? y >> 3 : y > 64) + g * 0.07) * (j ? 0.84 : 1) * (e === -4 || side ? 0.88 - 0.1 * hash(x, y + 7) : 1);\n      set(x, y, 0, 0.8 * k, 0.75 * k, 0.66 * k);\n    }\n  }\n  const box = (x0, y0, w, h, c, rd) => {\n    for (let y = y0; y \u003c y0 + h; y++)\n      for (let x = x0; x \u003c x0 + w; x++) if (!rd || (x > x0 && x \u003c x0 + w - 1) || (y > y0 && y \u003c y0 + h - 1)) (blk[y * W + x] = 1), set(x, y, 0, ...c);\n  };\n  // Starting blocks: kick plate, blue grip, white rim.\n  for (let k = 0, x; k \u003c 5; k++) (x = round(LANE(k) - 2.5)), box(x, 1, 6, 5, [0.9, 0.91, 0.92]), box(x, 1, 6, 1, [0.5, 0.53, 0.57]), box(x + 1, 2, 4, 3, [0.12, 0.28, 0.72]);\n  // Kickboards, bottles, a towel and flip-flops on the far deck.\n  box(3, 123, 5, 4, [0.96, 0.76, 0.12], 1);\n  box(5, 124, 5, 4, [0.16, 0.42, 0.92], 1);\n  for (const [x, c] of [[11, [0.3, 0.62, 0.95]], [35, [0.92, 0.2, 0.22]], [47, [0.3, 0.82, 0.42]]]) box(x, 124, 2, 2, c), set(x, 124, 0, 0.95, 0.95, 0.95);\n  for (let y = 123; y \u003c 127; y++) box(50, y, 7, 1, y & 1 ? [0.95, 0.94, 0.88] : [0.1, 0.62, 0.62]);\n  for (const x of [41, 43]) box(x, 124, 1, 3, [0.96, 0.4, 0.62]);\n}\n\n// Sun height and bearing: shadows, light colour, the stretch of the caustic net.\nfunction paint(P, s) {\n  const q = pow(abs(s), 1.3), a = ((25 + 100 * s) * PI) / 180, e = ((52 - 36 * abs(s)) * PI) / 180, za = PI / 2 - e;\n  const L = 11 * tan(asin(sin(za) / 1.33)), ux = sin(a), uy = -cos(a), F = L + 8 * tan(za), I = 1 - 0.18 * q, warm = s \u003c 0 ? [1, 0.86, 0.66] : [1, 0.76, 0.56];\n  Object.assign(P, { sx: ux * L, sy: uy * L, fx: ux * F, fy: uy * F, str: 0.8 * sin(e) ** 2 + 0.25, glint: (1 - abs(s)) ** 2 * 150 });\n  P.lc = [1, 0.98, 0.93].map((v, c) => mix(v, warm[c], q) * I);\n  // Low sun leaves the floor to the sky's light.\n  P.amb = [0.1, 0.15, 0.2].map((v, c) => v + q * [0.06, 0.12, 0.18][c]);\n  // The caustic net, squeezed along the sun's bearing when it is low.\n  const st = 1 - 1 / (1 + 1.4 * (1 - sin(e))), { wv, CS, CC, alb, mat, blk, bg, SB, lc, amb } = P;\n  wv.forEach(([an, l], i) => {\n    const kx = (cos(an) * 2 * PI) / l, ky = (sin(an) * 2 * PI) / l, kd = (kx * ux + ky * uy) * st;\n    P.ky[i] = ky - kd * uy;\n    for (let x = 0; x \u003c W; x++) (CS[i * W + x] = sin((kx - kd * ux) * x)), (CC[i * W + x] = cos((kx - kd * ux) * x));\n  });\n  // Shadows: the blocks' on the deck; the walls', ropes' and flags' on the floor.\n  const bx = ux * 2 * tan(za), by = uy * 2 * tan(za);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6;\n    if (mat[p] === 3) {\n      const wx = x - P.sx, wy = y - P.sy;\n      let sh = 1 - sm(min(wx - 1.5, 61.5 - wx, wy - Y0 + 0.5, Y1 + 0.5 - wy) + 0.5);\n      for (let k = 0; k \u003c 4; k++) sh += 0.6 * cl(1.3 - abs(wx - ROPE(k)), 0, 1);\n      for (const f of FLAGS) sh += 0.35 * cl(1 - abs(y - P.fy - f), 0, 1) * (floor(x - P.fx) % 3 ? 1 : 0.4);\n      SB[p] = min(1, sh);\n    } else {\n      const sx = round(x - bx), sy = round(y - by), shade = !blk[p] && sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H && blk[sy * W + sx] ? 0.5 : 1;\n      for (let c = 0; c \u003c 3; c++) bg[p * 3 + c] = alb[p * 3 + c] * (amb[c] * 0.7 + lc[c] * 0.74 * shade) * 255;\n    }\n  }\n}\n\n// Swimmers are capsules in body coordinates: u across (+ right), v back from the crown.\nlet nc = 0;\nconst CP = new Float32Array(20 * 8);\nconst cap = (u0, v0, u1, v1, r, c, sub) => CP.set([u0, v0, u1, v1, r, c, sub], nc++ * 8);\n// An arm from the shoulder to the hand, the elbow bent out to its side.\nfunction arm(sg, [hu, hv, bend, sub, hr = 0.5], deep) {\n  const su = sg * 1.8, dx = hu - su, dv = hv - 2.5, l = hyp(dx, dv) || 1, f = (dv * sg \u003c 0 ? -bend : bend) / l, eu = (su + hu) / 2 + dv * f, ev = (2.5 + hv) / 2 - dx * f;\n  cap(su, 2.5, eu, ev, 0.55, 1, max(sub, deep));\n  cap(eu, ev, hu, hv, hr, 1, max(sub, deep));\n}\n\n// Hand [u, v, elbow bend, how far under, hand size] for each stroke and phase.\nfunction hand(s, sg, ph) {\n  const th = fr(ph + (sg > 0 || s > 1 ? 0 : 0.5)), p = th * 2 - 1, q = th * 2 * PI;\n  if (s === 0) return th \u003c 0.5 ? [sg * (0.5 + 0.7 * sin(q)), -2.4 + 8.2 * sm(th * 2), 0.5, 0.5] : [sg * (1.6 + 2.3 * sin(p * PI)), 5.8 - 8.2 * sm(p), 1.3, 0];\n  // Backstroke's straight arm passes the vertical: from above, a bright hand.\n  if (s === 1) return th \u003c 0.5 ? [sg * 2.1, 2.5 + 4.8 * cos(q), 0, 0, 0.5 + 0.4 * sin(q)] : [sg * (1.3 + 2.6 * sin(p * PI)), -2.3 + 8.8 * sm(p), 1.2, 0.5];\n  if (s === 2) {\n    if (th \u003c 0.22) return [sg * (0.4 + 2.8 * sm(th / 0.22)), -3.4 + 7.3 * th, 0.9, 0.4];\n    if (th \u003c 0.38) return [sg * mix(3.2, 0.7, sm((th - 0.22) / 0.16)), mix(-1.8, 1.4, (th - 0.22) / 0.16), 1, 0.32];\n    if (th \u003c 0.52) return [sg * mix(0.7, 0.4, (th - 0.38) / 0.14), mix(1.4, -3.4, sm((th - 0.38) / 0.14)), 0.6, 0.4];\n    return [sg * 0.4, -3.4, 0.3, 0.45];\n  }\n  if (th \u003c 0.5) return [sg * (1.6 - 0.9 * sin(q)), mix(-2.6, 6, sm(th * 2)), 0.6, 0.5];\n  return th \u003c 0.8 ? [sg * (1.8 + 3.8 * sin(((th - 0.5) / 0.3) * PI)), mix(6, -2.6, sm((th - 0.5) / 0.3)), 0.4, 0] : [sg * 1.6, -2.6, 0.4, 0.32];\n}\n\n// This frame's capsules; returns how far the body is curled up.\nfunction pose(S, s) {\n  nc = 0;\n  const { ph, z, st } = S, t = S.t / S.tt;\n  let sc = 1, up = 0, hs, feet = null;\n  if (st === SWIM) (hs = [hand(s, 1, ph), hand(s, -1, ph)]), (up = s === 2 ? sm(1 - abs(ph - 0.36) / 0.16) : s === 3 ? sm(1 - abs(ph - 0.47) / 0.14) : 0);\n  else if (st === GLIDE) hs = [[0.3, -4.1, 0.2, z], [-0.3, -4.1, 0.2, z]];\n  else {\n    sc = t \u003c 0.5 ? 1 - 0.55 * sm(t / 0.35) : 0.45 + 0.55 * sm(t * 2 - 1);\n    hs = t >= 0.5 ? [[0.3, -3.6, 0.2, 0.7], [-0.3, -3.6, 0.2, 0.7]] : S.open ? [[1, -3.4, 0.4, 0], [-1, -3.4, 0.4, 0]] : [[1.6, 6, 0.3, 0.5], [-1.6, 6, 0.3, 0.5]];\n    up = S.open && t \u003c 0.6 ? 1 : 0;\n    // In a flip the legs come over the top.\n    if (!S.open && t > 0.25 && t \u003c 0.62) feet = 9.6 * cos((PI * (t - 0.25)) / 0.37);\n  }\n  const deep = st === TURN ? 0.4 : z, under = (i) => hs[i][3] > 0.3;\n  for (let i = 0; i \u003c 2; i++) if (under(i)) arm(1 - 2 * i, hs[i], deep);\n  for (const sg of [1, -1]) {\n    // The frog kick draws the heels up and whips them round and together.\n    const r = st || s - 2 ? 0 : cl(1 - abs(ph - 0.52) / 0.14, 0, 1), w = ph > 0.52 ? 8.8 * r * (1 - r) : 0;\n    let fu = sg * (0.5 + 1.2 * r + w), fv = 9.4 - 2.2 * r + (s \u003c 2 ? 0.3 * sin(S.kp + (sg > 0 ? 0 : PI)) : 0), ku = sg * (0.6 + 1.6 * r), kv = 7.9 - 0.6 * r;\n    if (st === SWIM && s === 3) fv = 9.4 + 0.5 * sin(ph * 4 * PI);\n    if (st === GLIDE) fv = 9.5 + 0.4 * sin(S.t * 16);\n    if (feet !== null) [ku, kv, fu, fv] = [sg * 0.6, VC + feet * 0.45, sg * 0.5, VC + feet];\n    cap(sg * 0.6, 6.3, ku, kv, 0.62, 1, max(0.42, deep));\n    cap(ku, kv, fu, fv, 0.5, 1, feet !== null ? 0.6 * abs(feet / 9.6) : max(0.42, deep));\n  }\n  // Hips, back, shoulders (the one over a recovering arm rides higher), head.\n  cap(0, 5.2, 0, 6.3, 1.15, 2, max(s === 3 && st === SWIM ? 0.3 + 0.25 * sin(ph * 4 * PI) : 0.35, deep));\n  cap(0, 2.8, 0, 5, 1.35, S.sb ? 2 : 1, max(0.25 - 0.2 * up, deep));\n  for (let i = 0; i \u003c 2; i++) cap(0, 2.4, 1.8 - 3.6 * i, 2.5, 0.75, 1, max(under(i) ? 0.3 : 0.05, deep) * (1 - 0.6 * up));\n  const h = (st === TURN && !S.open ? 0.6 * sm(t / 0.3) : 0.05 * (1 - up)) + deep * 0.6;\n  if (s === 1 && st !== GLIDE) {\n    // Face up: cap, face, goggles.\n    cap(0, 0.55, 0, 0.9, 0.95, 0, h);\n    cap(0, 1.45, 0, 1.45, 0.75, 1, h);\n    cap(-0.45, 1.2, 0.45, 1.2, 0.28, 3, h);\n  } else cap(0, 0.7, 0, 1.3, 0.95 + 0.15 * up, 0, h);\n  for (let i = 0; i \u003c 2; i++) if (!under(i)) arm(1 - 2 * i, hs[i], deep * 0.6);\n  return sc;\n}\n\n// Screen position of a body point.\nconst sxy = (S, sc, u, v) => [S.x - S.d * u * SZ * (1.3 - 0.3 * sc), S.y - S.d * (v - VC) * sc * SZ];\n\n// White water: n flecks round a point. Kinds: foam, spray, kick.\nfunction foam(P, [x, y], n, spread, life, size, kind, vel) {\n  for (let i = 0, a, r, l; i \u003c n; i++) (a = rnd() * 2 * PI), (r = spread * sqrt(rnd())), (l = life * (0.6 + 0.6 * rnd())), P.fo.push([x + cos(a) * r, y + sin(a) * r, cos(a) * vel * rnd(), sin(a) * vel * rnd(), l, l, size * (0.7 + 0.6 * rnd()), kind]);\n}\nconst ring = (P, S, [x, y], amp) => P.ri.push([x, y, 0, amp, S.k, rnd() * 7]);\nconst fade = (r, amp) => amp * max(0, 1 - r / 10);\n\nfunction newSwimmer(P, i, fresh) {\n  const k = ORDER[i % 5], d = rnd() \u003c 0.5 ? 1 : -1;\n  const S = { k, d, x: LANE(k) + rnd() - 0.5, o: (rnd() - 0.5) * 1.2, f: 0.8 + rnd() * 0.36, ph: rnd(), kp: rnd() * 7, st: SWIM, t: 0, tt: 1, z: 0, v: 0, ring: rnd() * 0.12, cap: CAPS[P.caps[i % 10]], skin: SKIN[floor(rnd() * 5)], suit: SUIT[floor(rnd() * 6)], sb: rnd() \u003c 0.5 };\n  // At the start they are spread along their lanes; later ones push off a wall.\n  if (fresh) S.y = Y0 + 16 + fr(0.29 * floor(i / 5) + rnd() * 0.85) * (Y1 - Y0 - 32);\n  else Object.assign(S, { y: (d > 0 ? Y0 - 0.5 : Y1 + 0.5) + d * 5.6 * SZ, st: GLIDE, z: 0.85 });\n  return S;\n}\n\nfunction stepSwimmer(P, S, d, s) {\n  const [pace0, hz, wamp, kf] = STROKE[s], pace = pace0 * S.f, wall = S.d > 0 ? Y1 + 0.5 : Y0 - 0.5;\n  const head = () => sxy(S, 1, 0, 0.6), feet = () => sxy(S, 1, 0, 9.8);\n  S.t += d;\n  S.x += cl(LANE(S.k) + (P.cnt[S.k] > 1 ? -S.d * 2.4 : S.o) - S.x, -4 * d, 4 * d);\n  S.kp += d * (s \u003c 2 ? 17 : 6);\n  let v = 0;\n  if (S.st === SWIM) {\n    const p0 = S.ph, ph = (S.ph += hz * (0.55 + 0.45 * S.f) * d), crossed = (at) => floor(p0 - at) !== floor(ph - at);\n    // Breaststroke and butterfly surge after each kick.\n    v = pace * (s === 2 ? 0.6 + 1.82 * exp(-4.5 * fr(ph - 0.6)) : s === 3 ? 0.7 + exp(-3 * fr(2 * ph - 0.1)) : 1 + 0.06 * sin(ph * 4 * PI));\n    // Keep behind a slower swimmer going the same way.\n    for (const O of P.sw) if (O.k === S.k && O.d === S.d && !O.st && (O.y - S.y) * S.d > 0 && (O.y - S.y) * S.d \u003c 13) v = min(v, O.v);\n    // Splash where a hand goes in; butterfly throws spray.\n    for (const sg of [1, -1]) {\n      const at = [sg > 0 ? 0 : 0.5, sg > 0 ? 0.5 : 0, -1, 0.8][s];\n      if (at >= 0 && crossed(at)) {\n        const h = hand(s, sg, at + 0.001), xy = sxy(S, 1, h[0], h[1]);\n        foam(P, xy, s === 3 ? 6 : 3, s === 3 ? 1.6 : 0.8, 0.6, s === 3 ? 0.85 : 0.75, 0, s === 3 ? 5 : 2);\n        if (s === 3) foam(P, xy, 4, 0.5, 0.35, 0.8, 1, 9);\n      }\n    }\n    if (kf && rnd() \u003c kf * d * 1.5) {\n      const [x, y] = feet();\n      foam(P, [x + (rnd() - 0.5) * 2.2, y + S.d * rnd() * 1.5], 1, 0.4, 0.5, 0.75, 2, 0);\n    }\n    if ((s === 2 && crossed(0.6)) || (s === 3 && (crossed(0.08) || crossed(0.58)))) foam(P, feet(), 5, 2, 0.7, 0.85, 0, 3);\n    // Each stroke sends out a pulse, so the arms of the V come in dashes.\n    if ((S.ring -= d) \u003c= 0) (S.ring = 0.2), ring(P, S, head(), wamp * (0.35 + 1.3 * (s \u003c 2 ? cos(2 * PI * ph) ** 2 : sm(1 - abs(fr(ph) - (s === 2 ? 0.45 : 0.78)) / 0.22))));\n    // At the wall: a flip turn, or a two-hand touch for breaststroke and butterfly.\n    if ((wall - S.y) * S.d - HV \u003c (s > 1 ? 1.2 : 2.3)) Object.assign(S, { st: TURN, t: 0, y0: S.y, w: wall, yb: wall - S.d * 3 * SZ, open: s > 1, tt: s > 1 ? 1.15 : 0.9, flip: 0 });\n    else S.y += S.d * v * d;\n  } else if (S.st === TURN) {\n    const t = S.t / S.tt;\n    if (t >= 0.5 && !S.flip) {\n      S.flip = true;\n      S.d = -S.d;\n      const xy = sxy(S, 0.45, 0, VC + 3);\n      foam(P, xy, S.open ? 5 : 9, 2.4, 0.9, 0.95, 0, 4);\n      if (!S.open) foam(P, xy, 5, 1, 0.35, 0.8, 1, 8);\n      ring(P, S, xy, 1.1);\n    }\n    S.y = t \u003c 0.5 ? mix(S.y0, S.yb, sm(t * 2)) : mix(S.yb, S.w + S.d * 5.6 * SZ, sm(t * 2 - 1));\n    if (t >= 1) Object.assign(S, { st: GLIDE, t: 0, z: 0.85 });\n  } else {\n    // Underwater off the wall, rising as it slows, then a breakout.\n    const t = S.t / 1.05;\n    v = pace * (1.75 - 0.85 * t);\n    S.z = 0.85 - 0.75 * sm(t);\n    S.y += S.d * v * d;\n    if ((S.ring -= d) \u003c= 0) (S.ring = 0.2), ring(P, S, head(), 0.45 * (1 - S.z));\n    if (t >= 1) {\n      foam(P, head(), s === 3 ? 7 : 5, 1.8, 0.7, 0.85, 0, 3);\n      ring(P, S, head(), 0.9);\n      Object.assign(S, { st: SWIM, t: 0, z: 0, ph: s === 2 ? 0.1 : 0 });\n    }\n  }\n  S.v = v;\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), blk: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), SB: F(N), SS: F(N), FL: F(N), SF: F(N), acc: F(W) });\n  Object.assign(P, { CS: F(7 * W), CC: F(7 * W), RS: F(7 * H), RC: F(7 * H), ky: F(7), chop: -1, rock: F(4 * H), sun: 9, t: 0, sw: [], fo: [], ri: [], cnt: [0, 0, 0, 0, 0] });\n  // Five long swells make the caustic net; two short ripples are the swimmers' chop.\n  P.wv = Array.from({ length: 7 }, (_, i) => {\n    const l = i \u003c 5 ? 9 + rnd() * 6 : 5 + rnd() * 1.5;\n    return [(i * PI) / 5 + (rnd() - 0.5) * 0.4 + (i > 4) * 0.3, l, ((i \u003c 5 ? 1.6 + rnd() * 1.4 : 3 + rnd()) * 2 * PI) / l, rnd() * 7];\n  });\n  // Bright caps first.\n  P.caps = [0, 1, 5, 4, 6, 7].sort(() => rnd() - 0.5).concat([2, 9, 8, 3]);\n  build(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], { rock } = P;\n  const s = (P.s = cl(round(k[0]), 0, 3)), sun = cl(k[3], -1, 1), n = round(cl(k[2], 4, 15)), d = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  if (abs(sun - P.sun) > 0.002) (P.sun = sun), paint(P, sun);\n  // Butterfly and breaststroke churn the pool; more swimmers churn it more.\n  const chop = STROKE[s][4] * (0.7 + (0.3 * (n - 4)) / 11), fresh = !P.t;\n  P.chop = fresh ? chop : P.chop + (chop - P.chop) * min(1, d * 1.5);\n  while (P.sw.length \u003c n) P.sw.push(newSwimmer(P, P.sw.length, fresh));\n  P.sw.length = n;\n  P.cnt.fill(0);\n  for (const S of P.sw) P.cnt[S.k]++;\n  P.t += d;\n  for (const S of P.sw) stepSwimmer(P, S, d, s);\n  // Wakes spread at 3 rows a second, slower than the swimmers, so their rings\n  // pile up into a V. Where one meets a rope, the floats rock.\n  for (let i = 0; i \u003c 4 * H; i++) rock[i] *= exp(-1.8 * d);\n  P.ri = P.ri.filter((R) => {\n    const r = (R[2] += 3 * d), f = fade(r, R[3]);\n    for (const j of [R[4] - 1, R[4]]) {\n      const dx = abs(ROPE(j) - R[0]), dy = sqrt(r * r - dx * dx);\n      if (j >= 0 && j \u003c 4 && r > dx) for (const y of [round(R[1] - dy), round(R[1] + dy)]) if (y >= 0 && y \u003c H) rock[j * H + y] = max(rock[j * H + y], f);\n    }\n    return r \u003c 10;\n  });\n  const dk = exp(-4 * d);\n  P.fo = P.fo.filter((f) => ((f[0] += f[2] * d), (f[1] += f[3] * d), (f[2] *= dk), (f[3] *= dk), (f[4] -= d) > 0));\n}\n\nlet BUF;\nfunction blend(p, r, g, b, a) {\n  const o = p * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nfunction splat(B, x, y, v) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi, p = yi * W + xi;\n  if (xi \u003c 2 || xi > 60 || yi \u003c Y0 || yi >= Y1) return;\n  B[p] += v * (1 - fx) * (1 - fy);\n  B[p + 1] += v * fx * (1 - fy);\n  B[p + W] += v * (1 - fx) * fy;\n  B[p + W + 1] += v * fx * fy;\n}\n\n// One capsule on screen: into the colour buffer, or as a soft shadow into SS.\nfunction stamp(P, x0, y0, x1, y1, r, col, sub, shadow) {\n  const dx = x1 - x0, dy = y1 - y0, ll = dx * dx + dy * dy || 1e-6, e = shadow ? r + 1.4 : r + 0.6, { lc, amb, SS } = P, op = 1 - 0.3 * sub;\n  const c = [0, 1, 2].map((i, v) => ((v = col[i] * (lc[i] * 0.86 + amb[i] * 0.45)), mix(v, v * TW[i] * 1.15 + SC[i], sub)));\n  for (let y = max(0, floor(min(y0, y1) - e)), yb = min(H - 1, ceil(max(y0, y1) + e)); y \u003c= yb; y++)\n    for (let x = max(2, floor(min(x0, x1) - e)), xb = min(61, ceil(max(x0, x1) + e)); x \u003c= xb; x++) {\n      const px = x - x0, py = y - y0, t = cl((px * dx + py * dy) / ll, 0, 1), dd = hyp(px - t * dx, py - t * dy), p = y * W + x;\n      if (shadow) SS[p] = max(SS[p], cl((r + 1 - dd) / 1.8, 0, 1) * 0.85);\n      else if (r + 0.5 > dd) blend(p, c[0], c[1], c[2], min(1, r + 0.5 - dd) * op);\n    }\n}\n\nfunction swimmers(P, shadow) {\n  for (const S of P.sw) {\n    const sc = pose(S, P.s), cols = [S.cap, S.skin, S.suit, [20, 40, 90]], off = shadow ? 1 - 0.6 * S.z : 0;\n    // White water pushed up round the head and shoulders.\n    if (shadow && S.z \u003c 0.5)\n      for (let i = 0; i \u003c= 10; i++) {\n        const a = (i - 5) * 0.38, [x, y] = sxy(S, sc, sin(a) * 2.6, 1.6 - cos(a) * 2.4);\n        splat(P.SF, x, y, (0.9 - 0.08 * abs(i - 5)) * (1 - 2 * S.z) * (S.st === TURN ? 1.6 : 1));\n      }\n    for (let i = 0, o = 0; i \u003c nc; i++, o += 8) {\n      const [x0, y0] = sxy(S, sc, CP[o], CP[o + 1]), [x1, y1] = sxy(S, sc, CP[o + 2], CP[o + 3]);\n      stamp(P, x0 + P.sx * off, y0 + P.sy * off, x1 + P.sx * off, y1 + P.sy * off, CP[o + 4] * SZ, cols[CP[o + 5]], CP[o + 6], shadow);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, alb, mat, bg, SB, SS, FL, SF, CS, CC, RS, RC, lc, amb, str, acc, sx, sy, glint } = P;\n  BUF = buf;\n  for (const B of [SS, FL, SF]) B.fill(0);\n  swimmers(P, true);\n  // Wake rings: crest and trough on the surface, focused light on the floor.\n  for (const [cx, cy, r, amp, k, sd] of P.ri) {\n    const f = fade(r, amp), n = f > 0.03 ? max(6, ceil(r * 4.2)) : 0;\n    for (let i = 0; i \u003c n; i++) {\n      const a = (i / n) * 2 * PI, ca = cos(a), sa = sin(a), x = cx + ca * r, y = cy + sa * r, w = f * (abs(x - LANE(k)) > 6.2 ? 0.2 : 1) * (0.6 + 0.4 * sin(a * 3 + sd));\n      splat(SF, x, y, w * 3);\n      splat(SF, x - ca, y - sa, -w * 1.6);\n      splat(FL, x + sx, y + sy, w * 0.9);\n      splat(FL, x + sx - 1.5 * ca, y + sy - 1.5 * sa, -w * 0.6);\n    }\n  }\n  for (let i = 0; i \u003c 7; i++) {\n    const [, , om, ps] = P.wv[i], ky = P.ky[i], a = i \u003c 5 ? 0.21 : 0.3 * P.chop;\n    for (let y = 0, q; y \u003c H; y++) (q = ky * y - om * P.t + ps), (RS[i * H + y] = a * sin(q)), (RC[i * H + y] = a * cos(q));\n  }\n  // The floor: tiles under the caustic net, the shadows, and the wakes' light.\n  const [A0, A1, A2] = amb.map((v, c) => v * TW[c] * 255), [L0, L1, L2] = lc.map((v, c) => v * TW[c] * 255);\n  for (let y = Y0; y \u003c= Y1; y++) {\n    acc.fill(0);\n    for (let i = 0; i \u003c 7; i++) for (let x = 2, rc = RC[i * H + y], rs = RS[i * H + y]; x \u003c 62; x++) acc[x] += CS[i * W + x] * rc + CC[i * W + x] * rs;\n    for (let x = 2, p = y * W + 2; x \u003c 62; x++, p++) {\n      const s = abs(acc[x]) * 7, c = s \u003c 1 ? (1 - s) * (1 - s) : 0, li = max(0, 0.62 + str * c + FL[p]) * (1 - 0.85 * min(1, SB[p] + SS[p])), sf = SF[p], gl = sf > 0.45 ? (sf - 0.45) * glint : 0;\n      const o = p * 3;\n      buf[o] = alb[o] * (A0 + L0 * li) + 2 + sf * 40 + gl;\n      buf[o + 1] = alb[o + 1] * (A1 + L1 * li) + 18 + sf * 62 + gl;\n      buf[o + 2] = alb[o + 2] * (A2 + L2 * li) + 30 + sf * 66 + gl;\n    }\n  }\n  // Deck; water moving in the gutters.\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3)\n    if (mat[p] !== 3) {\n      const q = mat[p] === 1 && alb[o] \u003c 0.5 ? 0.75 + 0.5 * sin(P.t * 3 + (p & 63) * 0.9 + (p >> 6) * 0.7) : 1;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = bg[o + c] * q;\n    }\n  ropes(P);\n  swimmers(P, false);\n  for (const [x, y, , , life, l0, size, kind] of P.fo) {\n    const f = life / l0, r = size * (0.55 + 0.45 * f), a = [0.8, 0.95, 0.6][kind] * pow(f, 0.7);\n    for (let yy = max(Y0 - 1, floor(y - r)); yy \u003c= min(Y1 + 1, y + r); yy++)\n      for (let xx = max(2, floor(x - r)); xx \u003c= min(61, x + r); xx++) {\n        const q = cl(r + 0.5 - hyp(xx - x, yy - y), 0, 1) * a;\n        if (q > 0.02) blend(yy * W + xx, 236 * lc[0] + 20, 244 * lc[1] + 10, 248 * lc[2] + 6, q);\n      }\n  }\n  flags(P);\n  for (let y = 0, o = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n}\n\n// Lane ropes: red floats 5 m from each end, blue and white between; a wake rocks them.\nconst FLOAT = [[222, 38, 40], [236, 236, 232], [28, 72, 206]];\nfunction ropes({ rock, t, lc, amb }) {\n  const k3 = lc.map((v, c) => v * 0.9 + amb[c] * 0.4);\n  for (let j = 0; j \u003c 4; j++)\n    for (let i = 0; i \u003c 56; i++) {\n      const y = Y0 + 2 * i, rk = min(1.2, max(rock[j * H + y], rock[j * H + y + 1])), c = FLOAT[i \u003c 11 || i > 44 ? 0 : (i >> 1) & 1 ? 1 : 2], on = rk > 0.12;\n      const sh = on ? round(sin(t * 11 + i * 1.3) * min(1, rk) * 0.9) : 0, hi = on ? floor(t * 7 * rk + i * 0.5) & 3 : 0;\n      for (let q = 0, k; q \u003c 4; q++) (k = (q === hi ? 1.28 : q === 3 - hi ? 0.62 : 0.92) * (1 + 0.15 * rk)), blend((y + (q >> 1)) * W + ROPE(j) - 0.5 + (q & 1) + sh, c[0] * k * k3[0], c[1] * k * k3[1], c[2] * k * k3[2], 1);\n    }\n}\n\n// Backstroke flags strung across between posts on the side decks.\nconst FLAGC = [[228, 40, 44], [240, 240, 236], [30, 80, 220], [250, 206, 30]];\nfunction flags({ lc }) {\n  for (const f of FLAGS) for (let x = 0, c; x \u003c W; x++) (c = x % 3 > 1 ? [70, 70, 74] : FLAGC[floor(x / 3) & 3].map((v, i) => v * lc[i])), blend(f * W + x, ...c, 0.95);\n}\n","layer":{"id":"layer-lap-pool","type":"code","name":"lap-pool","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lap Pool\n// Family:  sport\n// Idea:    A 25 m outdoor pool seen from straight above: swimmers in coloured caps swim lengths at their own paces, kick up white water, rock the lane ropes with their V wakes and flip-turn at the walls over a floor netted with sun caustics.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after overhead drone photographs of outdoor lap pools\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Stroke=0..3, Speed=0.2..3, Swimmers=4..15, Sun=-1..1\n//\n// Knob 1: Stroke. What everyone swims: freestyle at 0, backstroke at 1, breaststroke at 2 with its frog kick and glide, butterfly at 3 with both arms swung across the lane. Breaststroke and butterfly churn the water and break up the caustic net.\n// Knob 2: Speed. How fast the swimmers and the water go: at 2 a freestyle length takes 10 to 14 s, breaststroke nearer 20.\n// Knob 3: Swimmers. Four swimmers in four of the five lanes at 4; past five they share lanes and swim in circles, three a lane at 15.\n// Knob 4: Sun. Near noon at 0.06, with a bright caustic net and short shadows. Towards -1 the morning sun comes low from the east, towards 1 the evening sun from the west: gold light, a faint stretched net, long shadows across the lanes.\n\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, pow, asin, tan, PI } = Math;\nconst hyp = (a, b) => sqrt(a * a + b * b);\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst fr = (x) => x - floor(x);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nconst [W, H, N] = [64, 128, 8192];\n// Pixel centres on whole numbers. Water: rows 8..119 (25 m), columns 2..61, five lanes of 12.\nconst [Y0, Y1] = [8, 119];\nconst LANE = (k) => 7.5 + 12 * k;\nconst ROPE = (k) => 13.5 + 12 * k;\n// Backstroke flags 5 m out from each wall.\nconst FLAGS = [Y0 + 22, Y1 - 22];\n// Body centre VC rows behind the crown; swimmers drawn SZ times life size.\nconst [VC, SZ] = [4.5, 1.3];\nconst HV = VC * SZ;\nconst [SWIM, TURN, GLIDE] = [0, 1, 2];\n// Per stroke: pace (rows/s at Speed 2), arm cycles/s, wake, kick spray/s, churn.\nconst STROKE = [[9.2, 1.15, 0.5, 22, 0.2], [8, 1, 0.45, 26, 0.15], [5.8, 0.95, 0.9, 0, 0.7], [8.6, 1.05, 1.25, 0, 1]];\nconst CAPS = [[252, 212, 20], [232, 36, 48], [242, 242, 236], [34, 34, 40], [36, 204, 92], [255, 122, 18], [255, 84, 170], [28, 104, 238], [182, 188, 198], [150, 64, 226]];\nconst SKIN = [[238, 192, 160], [214, 160, 118], [176, 116, 78], [122, 78, 52], [248, 206, 178]];\nconst SUIT = [[22, 26, 70], [18, 18, 22], [184, 22, 44], [0, 112, 132], [96, 32, 124], [34, 64, 168]];\n// Lanes fill from the middle, so four swimmers leave lane 4 free.\nconst ORDER = [2, 0, 4, 1, 3];\n// Light through 2 m of water, and the blue it scatters back.\nconst TW = [0.36, 0.72, 0.82];\nconst SC = [2, 18, 30];\n\nfunction build(P) {\n  const { alb, mat, blk } = P;\n  const set = (x, y, m, r, g, b) => ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, g = hash(x, y) - 0.5, e = min(y - Y0, Y1 - y);\n    if (e >= 0 && x >= 2 && x \u003c= 61) {\n      // White tiles on a 4 LED grid; lane lines end in a T 2 m from the wall.\n      const t = (1 + (hash(x >> 2, (y - Y0) >> 2) - 0.5) * 0.07 + g * 0.04) * ((x - 2) % 4 && (y - Y0) % 4 ? 1 : 0.88);\n      const dc = abs(x - LANE(floor((x - 1.5) / 12)));\n      if (e > 8 && (dc \u003c 1 || (dc \u003c 3 && e \u003c 11))) set(x, y, 3, 0.1 * t, 0.14 * t, 0.38 * t);\n      else set(x, y, 3, 0.84 * t, 0.92 * t, 0.95 * t);\n    } else if (e === -1 && x >= 2 && x \u003c= 61) set(x, y, 2, 0.12, 0.28 + g * 0.04, 0.58);\n    else if (e >= -3 && x >= 1 && x \u003c= 62) {\n      // The overflow gutter's grate: white bars over dark water.\n      const bar = (e \u003c -1 ? x : y) % 2 === 0;\n      set(x, y, 1, bar ? 0.86 : 0.04, bar ? 0.88 : 0.17, bar ? 0.89 : 0.23);\n    } else {\n      // Stone paving, darker where the splashes land.\n      const side = x === 0 || x === 63, j = side ? y % 8 === 0 : x % 8 === 0 || e === -8;\n      const k = (0.92 + 0.16 * hash(side ? x : x >> 3, side ? y >> 3 : y > 64) + g * 0.07) * (j ? 0.84 : 1) * (e === -4 || side ? 0.88 - 0.1 * hash(x, y + 7) : 1);\n      set(x, y, 0, 0.8 * k, 0.75 * k, 0.66 * k);\n    }\n  }\n  const box = (x0, y0, w, h, c, rd) => {\n    for (let y = y0; y \u003c y0 + h; y++)\n      for (let x = x0; x \u003c x0 + w; x++) if (!rd || (x > x0 && x \u003c x0 + w - 1) || (y > y0 && y \u003c y0 + h - 1)) (blk[y * W + x] = 1), set(x, y, 0, ...c);\n  };\n  // Starting blocks: kick plate, blue grip, white rim.\n  for (let k = 0, x; k \u003c 5; k++) (x = round(LANE(k) - 2.5)), box(x, 1, 6, 5, [0.9, 0.91, 0.92]), box(x, 1, 6, 1, [0.5, 0.53, 0.57]), box(x + 1, 2, 4, 3, [0.12, 0.28, 0.72]);\n  // Kickboards, bottles, a towel and flip-flops on the far deck.\n  box(3, 123, 5, 4, [0.96, 0.76, 0.12], 1);\n  box(5, 124, 5, 4, [0.16, 0.42, 0.92], 1);\n  for (const [x, c] of [[11, [0.3, 0.62, 0.95]], [35, [0.92, 0.2, 0.22]], [47, [0.3, 0.82, 0.42]]]) box(x, 124, 2, 2, c), set(x, 124, 0, 0.95, 0.95, 0.95);\n  for (let y = 123; y \u003c 127; y++) box(50, y, 7, 1, y & 1 ? [0.95, 0.94, 0.88] : [0.1, 0.62, 0.62]);\n  for (const x of [41, 43]) box(x, 124, 1, 3, [0.96, 0.4, 0.62]);\n}\n\n// Sun height and bearing: shadows, light colour, the stretch of the caustic net.\nfunction paint(P, s) {\n  const q = pow(abs(s), 1.3), a = ((25 + 100 * s) * PI) / 180, e = ((52 - 36 * abs(s)) * PI) / 180, za = PI / 2 - e;\n  const L = 11 * tan(asin(sin(za) / 1.33)), ux = sin(a), uy = -cos(a), F = L + 8 * tan(za), I = 1 - 0.18 * q, warm = s \u003c 0 ? [1, 0.86, 0.66] : [1, 0.76, 0.56];\n  Object.assign(P, { sx: ux * L, sy: uy * L, fx: ux * F, fy: uy * F, str: 0.8 * sin(e) ** 2 + 0.25, glint: (1 - abs(s)) ** 2 * 150 });\n  P.lc = [1, 0.98, 0.93].map((v, c) => mix(v, warm[c], q) * I);\n  // Low sun leaves the floor to the sky's light.\n  P.amb = [0.1, 0.15, 0.2].map((v, c) => v + q * [0.06, 0.12, 0.18][c]);\n  // The caustic net, squeezed along the sun's bearing when it is low.\n  const st = 1 - 1 / (1 + 1.4 * (1 - sin(e))), { wv, CS, CC, alb, mat, blk, bg, SB, lc, amb } = P;\n  wv.forEach(([an, l], i) => {\n    const kx = (cos(an) * 2 * PI) / l, ky = (sin(an) * 2 * PI) / l, kd = (kx * ux + ky * uy) * st;\n    P.ky[i] = ky - kd * uy;\n    for (let x = 0; x \u003c W; x++) (CS[i * W + x] = sin((kx - kd * ux) * x)), (CC[i * W + x] = cos((kx - kd * ux) * x));\n  });\n  // Shadows: the blocks' on the deck; the walls', ropes' and flags' on the floor.\n  const bx = ux * 2 * tan(za), by = uy * 2 * tan(za);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6;\n    if (mat[p] === 3) {\n      const wx = x - P.sx, wy = y - P.sy;\n      let sh = 1 - sm(min(wx - 1.5, 61.5 - wx, wy - Y0 + 0.5, Y1 + 0.5 - wy) + 0.5);\n      for (let k = 0; k \u003c 4; k++) sh += 0.6 * cl(1.3 - abs(wx - ROPE(k)), 0, 1);\n      for (const f of FLAGS) sh += 0.35 * cl(1 - abs(y - P.fy - f), 0, 1) * (floor(x - P.fx) % 3 ? 1 : 0.4);\n      SB[p] = min(1, sh);\n    } else {\n      const sx = round(x - bx), sy = round(y - by), shade = !blk[p] && sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H && blk[sy * W + sx] ? 0.5 : 1;\n      for (let c = 0; c \u003c 3; c++) bg[p * 3 + c] = alb[p * 3 + c] * (amb[c] * 0.7 + lc[c] * 0.74 * shade) * 255;\n    }\n  }\n}\n\n// Swimmers are capsules in body coordinates: u across (+ right), v back from the crown.\nlet nc = 0;\nconst CP = new Float32Array(20 * 8);\nconst cap = (u0, v0, u1, v1, r, c, sub) => CP.set([u0, v0, u1, v1, r, c, sub], nc++ * 8);\n// An arm from the shoulder to the hand, the elbow bent out to its side.\nfunction arm(sg, [hu, hv, bend, sub, hr = 0.5], deep) {\n  const su = sg * 1.8, dx = hu - su, dv = hv - 2.5, l = hyp(dx, dv) || 1, f = (dv * sg \u003c 0 ? -bend : bend) / l, eu = (su + hu) / 2 + dv * f, ev = (2.5 + hv) / 2 - dx * f;\n  cap(su, 2.5, eu, ev, 0.55, 1, max(sub, deep));\n  cap(eu, ev, hu, hv, hr, 1, max(sub, deep));\n}\n\n// Hand [u, v, elbow bend, how far under, hand size] for each stroke and phase.\nfunction hand(s, sg, ph) {\n  const th = fr(ph + (sg > 0 || s > 1 ? 0 : 0.5)), p = th * 2 - 1, q = th * 2 * PI;\n  if (s === 0) return th \u003c 0.5 ? [sg * (0.5 + 0.7 * sin(q)), -2.4 + 8.2 * sm(th * 2), 0.5, 0.5] : [sg * (1.6 + 2.3 * sin(p * PI)), 5.8 - 8.2 * sm(p), 1.3, 0];\n  // Backstroke's straight arm passes the vertical: from above, a bright hand.\n  if (s === 1) return th \u003c 0.5 ? [sg * 2.1, 2.5 + 4.8 * cos(q), 0, 0, 0.5 + 0.4 * sin(q)] : [sg * (1.3 + 2.6 * sin(p * PI)), -2.3 + 8.8 * sm(p), 1.2, 0.5];\n  if (s === 2) {\n    if (th \u003c 0.22) return [sg * (0.4 + 2.8 * sm(th / 0.22)), -3.4 + 7.3 * th, 0.9, 0.4];\n    if (th \u003c 0.38) return [sg * mix(3.2, 0.7, sm((th - 0.22) / 0.16)), mix(-1.8, 1.4, (th - 0.22) / 0.16), 1, 0.32];\n    if (th \u003c 0.52) return [sg * mix(0.7, 0.4, (th - 0.38) / 0.14), mix(1.4, -3.4, sm((th - 0.38) / 0.14)), 0.6, 0.4];\n    return [sg * 0.4, -3.4, 0.3, 0.45];\n  }\n  if (th \u003c 0.5) return [sg * (1.6 - 0.9 * sin(q)), mix(-2.6, 6, sm(th * 2)), 0.6, 0.5];\n  return th \u003c 0.8 ? [sg * (1.8 + 3.8 * sin(((th - 0.5) / 0.3) * PI)), mix(6, -2.6, sm((th - 0.5) / 0.3)), 0.4, 0] : [sg * 1.6, -2.6, 0.4, 0.32];\n}\n\n// This frame's capsules; returns how far the body is curled up.\nfunction pose(S, s) {\n  nc = 0;\n  const { ph, z, st } = S, t = S.t / S.tt;\n  let sc = 1, up = 0, hs, feet = null;\n  if (st === SWIM) (hs = [hand(s, 1, ph), hand(s, -1, ph)]), (up = s === 2 ? sm(1 - abs(ph - 0.36) / 0.16) : s === 3 ? sm(1 - abs(ph - 0.47) / 0.14) : 0);\n  else if (st === GLIDE) hs = [[0.3, -4.1, 0.2, z], [-0.3, -4.1, 0.2, z]];\n  else {\n    sc = t \u003c 0.5 ? 1 - 0.55 * sm(t / 0.35) : 0.45 + 0.55 * sm(t * 2 - 1);\n    hs = t >= 0.5 ? [[0.3, -3.6, 0.2, 0.7], [-0.3, -3.6, 0.2, 0.7]] : S.open ? [[1, -3.4, 0.4, 0], [-1, -3.4, 0.4, 0]] : [[1.6, 6, 0.3, 0.5], [-1.6, 6, 0.3, 0.5]];\n    up = S.open && t \u003c 0.6 ? 1 : 0;\n    // In a flip the legs come over the top.\n    if (!S.open && t > 0.25 && t \u003c 0.62) feet = 9.6 * cos((PI * (t - 0.25)) / 0.37);\n  }\n  const deep = st === TURN ? 0.4 : z, under = (i) => hs[i][3] > 0.3;\n  for (let i = 0; i \u003c 2; i++) if (under(i)) arm(1 - 2 * i, hs[i], deep);\n  for (const sg of [1, -1]) {\n    // The frog kick draws the heels up and whips them round and together.\n    const r = st || s - 2 ? 0 : cl(1 - abs(ph - 0.52) / 0.14, 0, 1), w = ph > 0.52 ? 8.8 * r * (1 - r) : 0;\n    let fu = sg * (0.5 + 1.2 * r + w), fv = 9.4 - 2.2 * r + (s \u003c 2 ? 0.3 * sin(S.kp + (sg > 0 ? 0 : PI)) : 0), ku = sg * (0.6 + 1.6 * r), kv = 7.9 - 0.6 * r;\n    if (st === SWIM && s === 3) fv = 9.4 + 0.5 * sin(ph * 4 * PI);\n    if (st === GLIDE) fv = 9.5 + 0.4 * sin(S.t * 16);\n    if (feet !== null) [ku, kv, fu, fv] = [sg * 0.6, VC + feet * 0.45, sg * 0.5, VC + feet];\n    cap(sg * 0.6, 6.3, ku, kv, 0.62, 1, max(0.42, deep));\n    cap(ku, kv, fu, fv, 0.5, 1, feet !== null ? 0.6 * abs(feet / 9.6) : max(0.42, deep));\n  }\n  // Hips, back, shoulders (the one over a recovering arm rides higher), head.\n  cap(0, 5.2, 0, 6.3, 1.15, 2, max(s === 3 && st === SWIM ? 0.3 + 0.25 * sin(ph * 4 * PI) : 0.35, deep));\n  cap(0, 2.8, 0, 5, 1.35, S.sb ? 2 : 1, max(0.25 - 0.2 * up, deep));\n  for (let i = 0; i \u003c 2; i++) cap(0, 2.4, 1.8 - 3.6 * i, 2.5, 0.75, 1, max(under(i) ? 0.3 : 0.05, deep) * (1 - 0.6 * up));\n  const h = (st === TURN && !S.open ? 0.6 * sm(t / 0.3) : 0.05 * (1 - up)) + deep * 0.6;\n  if (s === 1 && st !== GLIDE) {\n    // Face up: cap, face, goggles.\n    cap(0, 0.55, 0, 0.9, 0.95, 0, h);\n    cap(0, 1.45, 0, 1.45, 0.75, 1, h);\n    cap(-0.45, 1.2, 0.45, 1.2, 0.28, 3, h);\n  } else cap(0, 0.7, 0, 1.3, 0.95 + 0.15 * up, 0, h);\n  for (let i = 0; i \u003c 2; i++) if (!under(i)) arm(1 - 2 * i, hs[i], deep * 0.6);\n  return sc;\n}\n\n// Screen position of a body point.\nconst sxy = (S, sc, u, v) => [S.x - S.d * u * SZ * (1.3 - 0.3 * sc), S.y - S.d * (v - VC) * sc * SZ];\n\n// White water: n flecks round a point. Kinds: foam, spray, kick.\nfunction foam(P, [x, y], n, spread, life, size, kind, vel) {\n  for (let i = 0, a, r, l; i \u003c n; i++) (a = rnd() * 2 * PI), (r = spread * sqrt(rnd())), (l = life * (0.6 + 0.6 * rnd())), P.fo.push([x + cos(a) * r, y + sin(a) * r, cos(a) * vel * rnd(), sin(a) * vel * rnd(), l, l, size * (0.7 + 0.6 * rnd()), kind]);\n}\nconst ring = (P, S, [x, y], amp) => P.ri.push([x, y, 0, amp, S.k, rnd() * 7]);\nconst fade = (r, amp) => amp * max(0, 1 - r / 10);\n\nfunction newSwimmer(P, i, fresh) {\n  const k = ORDER[i % 5], d = rnd() \u003c 0.5 ? 1 : -1;\n  const S = { k, d, x: LANE(k) + rnd() - 0.5, o: (rnd() - 0.5) * 1.2, f: 0.8 + rnd() * 0.36, ph: rnd(), kp: rnd() * 7, st: SWIM, t: 0, tt: 1, z: 0, v: 0, ring: rnd() * 0.12, cap: CAPS[P.caps[i % 10]], skin: SKIN[floor(rnd() * 5)], suit: SUIT[floor(rnd() * 6)], sb: rnd() \u003c 0.5 };\n  // At the start they are spread along their lanes; later ones push off a wall.\n  if (fresh) S.y = Y0 + 16 + fr(0.29 * floor(i / 5) + rnd() * 0.85) * (Y1 - Y0 - 32);\n  else Object.assign(S, { y: (d > 0 ? Y0 - 0.5 : Y1 + 0.5) + d * 5.6 * SZ, st: GLIDE, z: 0.85 });\n  return S;\n}\n\nfunction stepSwimmer(P, S, d, s) {\n  const [pace0, hz, wamp, kf] = STROKE[s], pace = pace0 * S.f, wall = S.d > 0 ? Y1 + 0.5 : Y0 - 0.5;\n  const head = () => sxy(S, 1, 0, 0.6), feet = () => sxy(S, 1, 0, 9.8);\n  S.t += d;\n  S.x += cl(LANE(S.k) + (P.cnt[S.k] > 1 ? -S.d * 2.4 : S.o) - S.x, -4 * d, 4 * d);\n  S.kp += d * (s \u003c 2 ? 17 : 6);\n  let v = 0;\n  if (S.st === SWIM) {\n    const p0 = S.ph, ph = (S.ph += hz * (0.55 + 0.45 * S.f) * d), crossed = (at) => floor(p0 - at) !== floor(ph - at);\n    // Breaststroke and butterfly surge after each kick.\n    v = pace * (s === 2 ? 0.6 + 1.82 * exp(-4.5 * fr(ph - 0.6)) : s === 3 ? 0.7 + exp(-3 * fr(2 * ph - 0.1)) : 1 + 0.06 * sin(ph * 4 * PI));\n    // Keep behind a slower swimmer going the same way.\n    for (const O of P.sw) if (O.k === S.k && O.d === S.d && !O.st && (O.y - S.y) * S.d > 0 && (O.y - S.y) * S.d \u003c 13) v = min(v, O.v);\n    // Splash where a hand goes in; butterfly throws spray.\n    for (const sg of [1, -1]) {\n      const at = [sg > 0 ? 0 : 0.5, sg > 0 ? 0.5 : 0, -1, 0.8][s];\n      if (at >= 0 && crossed(at)) {\n        const h = hand(s, sg, at + 0.001), xy = sxy(S, 1, h[0], h[1]);\n        foam(P, xy, s === 3 ? 6 : 3, s === 3 ? 1.6 : 0.8, 0.6, s === 3 ? 0.85 : 0.75, 0, s === 3 ? 5 : 2);\n        if (s === 3) foam(P, xy, 4, 0.5, 0.35, 0.8, 1, 9);\n      }\n    }\n    if (kf && rnd() \u003c kf * d * 1.5) {\n      const [x, y] = feet();\n      foam(P, [x + (rnd() - 0.5) * 2.2, y + S.d * rnd() * 1.5], 1, 0.4, 0.5, 0.75, 2, 0);\n    }\n    if ((s === 2 && crossed(0.6)) || (s === 3 && (crossed(0.08) || crossed(0.58)))) foam(P, feet(), 5, 2, 0.7, 0.85, 0, 3);\n    // Each stroke sends out a pulse, so the arms of the V come in dashes.\n    if ((S.ring -= d) \u003c= 0) (S.ring = 0.2), ring(P, S, head(), wamp * (0.35 + 1.3 * (s \u003c 2 ? cos(2 * PI * ph) ** 2 : sm(1 - abs(fr(ph) - (s === 2 ? 0.45 : 0.78)) / 0.22))));\n    // At the wall: a flip turn, or a two-hand touch for breaststroke and butterfly.\n    if ((wall - S.y) * S.d - HV \u003c (s > 1 ? 1.2 : 2.3)) Object.assign(S, { st: TURN, t: 0, y0: S.y, w: wall, yb: wall - S.d * 3 * SZ, open: s > 1, tt: s > 1 ? 1.15 : 0.9, flip: 0 });\n    else S.y += S.d * v * d;\n  } else if (S.st === TURN) {\n    const t = S.t / S.tt;\n    if (t >= 0.5 && !S.flip) {\n      S.flip = true;\n      S.d = -S.d;\n      const xy = sxy(S, 0.45, 0, VC + 3);\n      foam(P, xy, S.open ? 5 : 9, 2.4, 0.9, 0.95, 0, 4);\n      if (!S.open) foam(P, xy, 5, 1, 0.35, 0.8, 1, 8);\n      ring(P, S, xy, 1.1);\n    }\n    S.y = t \u003c 0.5 ? mix(S.y0, S.yb, sm(t * 2)) : mix(S.yb, S.w + S.d * 5.6 * SZ, sm(t * 2 - 1));\n    if (t >= 1) Object.assign(S, { st: GLIDE, t: 0, z: 0.85 });\n  } else {\n    // Underwater off the wall, rising as it slows, then a breakout.\n    const t = S.t / 1.05;\n    v = pace * (1.75 - 0.85 * t);\n    S.z = 0.85 - 0.75 * sm(t);\n    S.y += S.d * v * d;\n    if ((S.ring -= d) \u003c= 0) (S.ring = 0.2), ring(P, S, head(), 0.45 * (1 - S.z));\n    if (t >= 1) {\n      foam(P, head(), s === 3 ? 7 : 5, 1.8, 0.7, 0.85, 0, 3);\n      ring(P, S, head(), 0.9);\n      Object.assign(S, { st: SWIM, t: 0, z: 0, ph: s === 2 ? 0.1 : 0 });\n    }\n  }\n  S.v = v;\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), blk: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), SB: F(N), SS: F(N), FL: F(N), SF: F(N), acc: F(W) });\n  Object.assign(P, { CS: F(7 * W), CC: F(7 * W), RS: F(7 * H), RC: F(7 * H), ky: F(7), chop: -1, rock: F(4 * H), sun: 9, t: 0, sw: [], fo: [], ri: [], cnt: [0, 0, 0, 0, 0] });\n  // Five long swells make the caustic net; two short ripples are the swimmers' chop.\n  P.wv = Array.from({ length: 7 }, (_, i) => {\n    const l = i \u003c 5 ? 9 + rnd() * 6 : 5 + rnd() * 1.5;\n    return [(i * PI) / 5 + (rnd() - 0.5) * 0.4 + (i > 4) * 0.3, l, ((i \u003c 5 ? 1.6 + rnd() * 1.4 : 3 + rnd()) * 2 * PI) / l, rnd() * 7];\n  });\n  // Bright caps first.\n  P.caps = [0, 1, 5, 4, 6, 7].sort(() => rnd() - 0.5).concat([2, 9, 8, 3]);\n  build(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], { rock } = P;\n  const s = (P.s = cl(round(k[0]), 0, 3)), sun = cl(k[3], -1, 1), n = round(cl(k[2], 4, 15)), d = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  if (abs(sun - P.sun) > 0.002) (P.sun = sun), paint(P, sun);\n  // Butterfly and breaststroke churn the pool; more swimmers churn it more.\n  const chop = STROKE[s][4] * (0.7 + (0.3 * (n - 4)) / 11), fresh = !P.t;\n  P.chop = fresh ? chop : P.chop + (chop - P.chop) * min(1, d * 1.5);\n  while (P.sw.length \u003c n) P.sw.push(newSwimmer(P, P.sw.length, fresh));\n  P.sw.length = n;\n  P.cnt.fill(0);\n  for (const S of P.sw) P.cnt[S.k]++;\n  P.t += d;\n  for (const S of P.sw) stepSwimmer(P, S, d, s);\n  // Wakes spread at 3 rows a second, slower than the swimmers, so their rings\n  // pile up into a V. Where one meets a rope, the floats rock.\n  for (let i = 0; i \u003c 4 * H; i++) rock[i] *= exp(-1.8 * d);\n  P.ri = P.ri.filter((R) => {\n    const r = (R[2] += 3 * d), f = fade(r, R[3]);\n    for (const j of [R[4] - 1, R[4]]) {\n      const dx = abs(ROPE(j) - R[0]), dy = sqrt(r * r - dx * dx);\n      if (j >= 0 && j \u003c 4 && r > dx) for (const y of [round(R[1] - dy), round(R[1] + dy)]) if (y >= 0 && y \u003c H) rock[j * H + y] = max(rock[j * H + y], f);\n    }\n    return r \u003c 10;\n  });\n  const dk = exp(-4 * d);\n  P.fo = P.fo.filter((f) => ((f[0] += f[2] * d), (f[1] += f[3] * d), (f[2] *= dk), (f[3] *= dk), (f[4] -= d) > 0));\n}\n\nlet BUF;\nfunction blend(p, r, g, b, a) {\n  const o = p * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nfunction splat(B, x, y, v) {\n  const xi = floor(x), yi = floor(y), fx = x - xi, fy = y - yi, p = yi * W + xi;\n  if (xi \u003c 2 || xi > 60 || yi \u003c Y0 || yi >= Y1) return;\n  B[p] += v * (1 - fx) * (1 - fy);\n  B[p + 1] += v * fx * (1 - fy);\n  B[p + W] += v * (1 - fx) * fy;\n  B[p + W + 1] += v * fx * fy;\n}\n\n// One capsule on screen: into the colour buffer, or as a soft shadow into SS.\nfunction stamp(P, x0, y0, x1, y1, r, col, sub, shadow) {\n  const dx = x1 - x0, dy = y1 - y0, ll = dx * dx + dy * dy || 1e-6, e = shadow ? r + 1.4 : r + 0.6, { lc, amb, SS } = P, op = 1 - 0.3 * sub;\n  const c = [0, 1, 2].map((i, v) => ((v = col[i] * (lc[i] * 0.86 + amb[i] * 0.45)), mix(v, v * TW[i] * 1.15 + SC[i], sub)));\n  for (let y = max(0, floor(min(y0, y1) - e)), yb = min(H - 1, ceil(max(y0, y1) + e)); y \u003c= yb; y++)\n    for (let x = max(2, floor(min(x0, x1) - e)), xb = min(61, ceil(max(x0, x1) + e)); x \u003c= xb; x++) {\n      const px = x - x0, py = y - y0, t = cl((px * dx + py * dy) / ll, 0, 1), dd = hyp(px - t * dx, py - t * dy), p = y * W + x;\n      if (shadow) SS[p] = max(SS[p], cl((r + 1 - dd) / 1.8, 0, 1) * 0.85);\n      else if (r + 0.5 > dd) blend(p, c[0], c[1], c[2], min(1, r + 0.5 - dd) * op);\n    }\n}\n\nfunction swimmers(P, shadow) {\n  for (const S of P.sw) {\n    const sc = pose(S, P.s), cols = [S.cap, S.skin, S.suit, [20, 40, 90]], off = shadow ? 1 - 0.6 * S.z : 0;\n    // White water pushed up round the head and shoulders.\n    if (shadow && S.z \u003c 0.5)\n      for (let i = 0; i \u003c= 10; i++) {\n        const a = (i - 5) * 0.38, [x, y] = sxy(S, sc, sin(a) * 2.6, 1.6 - cos(a) * 2.4);\n        splat(P.SF, x, y, (0.9 - 0.08 * abs(i - 5)) * (1 - 2 * S.z) * (S.st === TURN ? 1.6 : 1));\n      }\n    for (let i = 0, o = 0; i \u003c nc; i++, o += 8) {\n      const [x0, y0] = sxy(S, sc, CP[o], CP[o + 1]), [x1, y1] = sxy(S, sc, CP[o + 2], CP[o + 3]);\n      stamp(P, x0 + P.sx * off, y0 + P.sy * off, x1 + P.sx * off, y1 + P.sy * off, CP[o + 4] * SZ, cols[CP[o + 5]], CP[o + 6], shadow);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, alb, mat, bg, SB, SS, FL, SF, CS, CC, RS, RC, lc, amb, str, acc, sx, sy, glint } = P;\n  BUF = buf;\n  for (const B of [SS, FL, SF]) B.fill(0);\n  swimmers(P, true);\n  // Wake rings: crest and trough on the surface, focused light on the floor.\n  for (const [cx, cy, r, amp, k, sd] of P.ri) {\n    const f = fade(r, amp), n = f > 0.03 ? max(6, ceil(r * 4.2)) : 0;\n    for (let i = 0; i \u003c n; i++) {\n      const a = (i / n) * 2 * PI, ca = cos(a), sa = sin(a), x = cx + ca * r, y = cy + sa * r, w = f * (abs(x - LANE(k)) > 6.2 ? 0.2 : 1) * (0.6 + 0.4 * sin(a * 3 + sd));\n      splat(SF, x, y, w * 3);\n      splat(SF, x - ca, y - sa, -w * 1.6);\n      splat(FL, x + sx, y + sy, w * 0.9);\n      splat(FL, x + sx - 1.5 * ca, y + sy - 1.5 * sa, -w * 0.6);\n    }\n  }\n  for (let i = 0; i \u003c 7; i++) {\n    const [, , om, ps] = P.wv[i], ky = P.ky[i], a = i \u003c 5 ? 0.21 : 0.3 * P.chop;\n    for (let y = 0, q; y \u003c H; y++) (q = ky * y - om * P.t + ps), (RS[i * H + y] = a * sin(q)), (RC[i * H + y] = a * cos(q));\n  }\n  // The floor: tiles under the caustic net, the shadows, and the wakes' light.\n  const [A0, A1, A2] = amb.map((v, c) => v * TW[c] * 255), [L0, L1, L2] = lc.map((v, c) => v * TW[c] * 255);\n  for (let y = Y0; y \u003c= Y1; y++) {\n    acc.fill(0);\n    for (let i = 0; i \u003c 7; i++) for (let x = 2, rc = RC[i * H + y], rs = RS[i * H + y]; x \u003c 62; x++) acc[x] += CS[i * W + x] * rc + CC[i * W + x] * rs;\n    for (let x = 2, p = y * W + 2; x \u003c 62; x++, p++) {\n      const s = abs(acc[x]) * 7, c = s \u003c 1 ? (1 - s) * (1 - s) : 0, li = max(0, 0.62 + str * c + FL[p]) * (1 - 0.85 * min(1, SB[p] + SS[p])), sf = SF[p], gl = sf > 0.45 ? (sf - 0.45) * glint : 0;\n      const o = p * 3;\n      buf[o] = alb[o] * (A0 + L0 * li) + 2 + sf * 40 + gl;\n      buf[o + 1] = alb[o + 1] * (A1 + L1 * li) + 18 + sf * 62 + gl;\n      buf[o + 2] = alb[o + 2] * (A2 + L2 * li) + 30 + sf * 66 + gl;\n    }\n  }\n  // Deck; water moving in the gutters.\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3)\n    if (mat[p] !== 3) {\n      const q = mat[p] === 1 && alb[o] \u003c 0.5 ? 0.75 + 0.5 * sin(P.t * 3 + (p & 63) * 0.9 + (p >> 6) * 0.7) : 1;\n      for (let c = 0; c \u003c 3; c++) buf[o + c] = bg[o + c] * q;\n    }\n  ropes(P);\n  swimmers(P, false);\n  for (const [x, y, , , life, l0, size, kind] of P.fo) {\n    const f = life / l0, r = size * (0.55 + 0.45 * f), a = [0.8, 0.95, 0.6][kind] * pow(f, 0.7);\n    for (let yy = max(Y0 - 1, floor(y - r)); yy \u003c= min(Y1 + 1, y + r); yy++)\n      for (let xx = max(2, floor(x - r)); xx \u003c= min(61, x + r); xx++) {\n        const q = cl(r + 0.5 - hyp(xx - x, yy - y), 0, 1) * a;\n        if (q > 0.02) blend(yy * W + xx, 236 * lc[0] + 20, 244 * lc[1] + 10, 248 * lc[2] + 6, q);\n      }\n  }\n  flags(P);\n  for (let y = 0, o = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, o += 3) {\n      const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n}\n\n// Lane ropes: red floats 5 m from each end, blue and white between; a wake rocks them.\nconst FLOAT = [[222, 38, 40], [236, 236, 232], [28, 72, 206]];\nfunction ropes({ rock, t, lc, amb }) {\n  const k3 = lc.map((v, c) => v * 0.9 + amb[c] * 0.4);\n  for (let j = 0; j \u003c 4; j++)\n    for (let i = 0; i \u003c 56; i++) {\n      const y = Y0 + 2 * i, rk = min(1.2, max(rock[j * H + y], rock[j * H + y + 1])), c = FLOAT[i \u003c 11 || i > 44 ? 0 : (i >> 1) & 1 ? 1 : 2], on = rk > 0.12;\n      const sh = on ? round(sin(t * 11 + i * 1.3) * min(1, rk) * 0.9) : 0, hi = on ? floor(t * 7 * rk + i * 0.5) & 3 : 0;\n      for (let q = 0, k; q \u003c 4; q++) (k = (q === hi ? 1.28 : q === 3 - hi ? 0.62 : 0.92) * (1 + 0.15 * rk)), blend((y + (q >> 1)) * W + ROPE(j) - 0.5 + (q & 1) + sh, c[0] * k * k3[0], c[1] * k * k3[1], c[2] * k * k3[2], 1);\n    }\n}\n\n// Backstroke flags strung across between posts on the side decks.\nconst FLAGC = [[228, 40, 44], [240, 240, 236], [30, 80, 220], [250, 206, 30]];\nfunction flags({ lc }) {\n  for (const f of FLAGS) for (let x = 0, c; x \u003c W; x++) (c = x % 3 > 1 ? [70, 70, 74] : FLAGC[floor(x / 3) & 3].map((v, i) => v * lc[i])), blend(f * W + x, ...c, 0.95);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Stroke=0..3, Speed=0.2..3, Swimmers=4..15, Sun=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Stroke","min":0,"max":3,"about":"What everyone swims: freestyle at 0, backstroke at 1, breaststroke at 2 with its frog kick and glide, butterfly at 3 with both arms swung across the lane. Breaststroke and butterfly churn the water and break up the caustic net."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the swimmers and the water go: at 2 a freestyle length takes 10 to 14 s, breaststroke nearer 20."},{"name":"Swimmers","min":4,"max":15,"about":"Four swimmers in four of the five lanes at 4; past five they share lanes and swim in circles, three a lane at 15."},{"name":"Sun","min":-1,"max":1,"about":"Near noon at 0.06, with a bright caustic net and short shadows. Towards -1 the morning sun comes low from the east, towards 1 the evening sun from the west: gold light, a faint stretched net, long shadows across the lanes."}],"start":[0,2,4,0.06],"measures":{"motion":0.3073,"detail":0.1425,"edges":0.4977,"complexity":2.1556,"coverage":0.9906,"colour":0.3817,"drift":0.0257},"knobResponse":[0.044,0.0596,0.0629,0.1105]},{"slug":"lava-lamp","title":"Lava Lamp","family":"sim","round":3,"note":"전구 위 웅덩이에서 데워진 왁스가 목을 늘이며 떨어져 나와 방울로 떠오르고, 위에서 식으면 다시 가라앉아요. 파란 물속에서 식은 왁스는 주황, 뜨거운 왁스는 노랑이에요.","idea":"A tall lava lamp: wax warms in the pool over the bulb, pulls up on a neck, rises as a drop, cools against the glass at the top and sinks back, glowing soft against coloured liquid.","buttons":"K1 tap flares the bulb, and the lowest drop heats through and lets go.","code":"// ===== Patternflow pattern =====\n// Title:   Lava Lamp\n// Family:  sim\n// Idea:    A tall lava lamp: wax warms in the pool over the bulb, pulls up on a neck, rises as a drop, cools against the glass at the top and sinks back, glowing soft against coloured liquid.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Edward Craven Walker's Astro lamp (1963), drawn as metaballs\n// Round:   3\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Heat=0.3..3, Wax=4..10, Stretch=0..1\n//\n// Knob 1: Hue. Turns the liquid and the wax together, starting from blue liquid and wax that runs from orange when cool to yellow when hot.\n// Knob 2: Heat. How hot the bulb runs: the wax barely stirs at the bottom of the range and circulates in a few seconds at the top.\n// Knob 3: Wax. How many drops are loose in the lamp; drops past the count sink into the pool and melt into it.\n// Knob 4: Stretch. At 0 the wax travels as round drops; turned up, moving wax pulls out into teardrops and long necks, and the pool reaches up after it.\n// Buttons: K1 tap flares the bulb, and the lowest drop heats through and lets go.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 10;\n// A drop is wax where its field passes EDGE. The field of an isolated drop\n// reaches EDGE at 0.644 of its kernel radius, so the kernel is 1.55 times the\n// drop's radius.\nconst EDGE = 0.22;\nconst KERNEL = 1.55;\n// The pool's surface row. Drops that reach the top rest under the glass at CAP.\nconst POOL = 114;\nconst CAP = 2;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(MAX);\n  params.y = new Float32Array(MAX);\n  params.vx = new Float32Array(MAX);\n  params.vy = new Float32Array(MAX);\n  params.r = new Float32Array(MAX);\n  params.temp = new Float32Array(MAX);\n  params.size = new Float32Array(MAX);\n  // How slowly each drop gives up its heat to the liquid on the way, in seconds.\n  params.hold = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) {\n    params.r[i] = 7 + Math.random() * 7;\n    params.hold[i] = 9 + Math.random() * 20;\n    params.x[i] = 10 + Math.random() * (W - 20);\n    params.y[i] = 20 + Math.random() * 90;\n    params.temp[i] = Math.random();\n    params.size[i] = i \u003c 4 ? 1 : 0;\n  }\n  params.surfB = new Float32Array(W);\n  params.liquid = new Float32Array(H * 3);\n  params.side = new Float32Array(W);\n  params.lut = new Float32Array(65 * 3);\n  params.t = 0;\n  params.flare = 0;\n  params.started = false;\n  params.heat = 2;\n  params.stretch = 0;\n  params.count = 4;\n}\n\nfunction step(params, dt) {\n  const heat = params.heat;\n  const stretch = params.stretch;\n  const t = (params.t += dt);\n  params.flare = Math.max(0, params.flare - dt * 0.6);\n  // Rising wax is faster the hotter the lamp runs, never quick.\n  const V = 11 * Math.pow(heat, 0.7);\n  const relax = Math.min(1, dt / 0.6);\n  const n = params.count;\n  for (let i = 0; i \u003c MAX; i++) {\n    // Drops past the count shrink away into the pool; new ones grow out of it.\n    const target = i \u003c n ? 1 : 0;\n    const s = params.size[i];\n    params.size[i] = s + (target - s) * Math.min(1, dt * 0.5);\n    if (s \u003c 0.02 && target === 0) {\n      params.size[i] = 0;\n      params.y[i] = H + 4;\n      continue;\n    }\n    if (s \u003c 0.05 && target === 1 && params.y[i] \u003c POOL) {\n      // A drop that comes back starts warm in the pool.\n      params.y[i] = H - 4;\n      params.temp[i] = 0.5;\n    }\n    const r = params.r[i] * (0.4 + 0.6 * s);\n    const y = params.y[i];\n    let T = params.temp[i];\n    // Only the bulb heats, through the pool; the liquid is cooler than melted wax\n    // all the way up, and coolest under the glass at the top.\n    const bottom = smooth(POOL - 8, POOL + 6, y + r * 0.6);\n    const top = smooth(CAP + 24, CAP + 4, y - r * 0.6);\n    const ambient = 0.2 + 0.15 * (y / H);\n    T += dt * heat * (bottom * (1.05 - T) * (0.6 + params.flare * 2) - top * (T + 0.05) * 0.35);\n    T -= (dt * (T - ambient)) / params.hold[i];\n    params.temp[i] = Math.max(0, Math.min(1, T));\n\n    // Bigger drops push harder; a drop's speed follows its warmth.\n    const vyTarget = -Math.tanh((params.temp[i] - 0.5) * 4) * V * (0.6 + r / 22);\n    params.vy[i] += (vyTarget - params.vy[i]) * relax;\n    const rising = params.vy[i] \u003c 0;\n    const wander = (noise1(t * 0.12 + i * 7.3, i) - 0.5) * 6;\n    // Warm wax drifts in over the bulb, cool wax slides out along the glass.\n    const lane = rising ? (W / 2 - params.x[i]) * 0.05 : (params.x[i] \u003c W / 2 ? -1 : 1) * 1.2;\n    let push = 0;\n    for (let j = 0; j \u003c MAX; j++) {\n      if (j === i || params.size[j] \u003c 0.05) continue;\n      const dx = params.x[i] - params.x[j];\n      const dy = params.y[i] - params.y[j];\n      const reach = (params.r[i] + params.r[j]) * 0.65;\n      const d2 = dx * dx + dy * dy;\n      if (d2 \u003c reach * reach && d2 > 1e-4) push += (dx / Math.sqrt(d2)) * (1 - Math.sqrt(d2) / reach) * 3;\n    }\n    params.vx[i] += (wander + lane + push - params.vx[i]) * relax;\n    params.x[i] += params.vx[i] * dt;\n    params.y[i] += params.vy[i] * dt;\n    const m = r * 0.7;\n    if (params.x[i] \u003c m) {\n      params.x[i] = m;\n      params.vx[i] = Math.abs(params.vx[i]) * 0.3;\n    } else if (params.x[i] > W - m) {\n      params.x[i] = W - m;\n      params.vx[i] = -Math.abs(params.vx[i]) * 0.3;\n    }\n    // Wax that reaches the top rests against the glass until it cools; wax in the pool sinks half into it.\n    const ceiling = CAP + r * 0.45;\n    const floor = POOL + r * 0.55;\n    if (params.y[i] \u003c ceiling) {\n      params.y[i] = ceiling;\n      params.vy[i] = Math.max(0, params.vy[i]);\n    } else if (params.y[i] > floor) {\n      params.y[i] = floor;\n      params.vy[i] = Math.min(0, params.vy[i]);\n    }\n  }\n  // The pool breathes slowly.\n  for (let x = 0; x \u003c W; x++)\n    params.surfB[x] = POOL + 2.2 * Math.sin(x * 0.11 + t * 0.35) + 1.4 * Math.sin(x * 0.27 - t * 0.6 + 1) - stretch * 2;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.heat = Math.max(0.1, k[1]);\n  params.count = Math.max(1, Math.min(MAX, Math.round(k[2])));\n  params.stretch = Math.max(0, Math.min(1, k[3]));\n  if (!params.started) {\n    params.started = true;\n    for (let i = 0; i \u003c MAX; i++) params.size[i] = i \u003c params.count ? 1 : 0;\n    // A lamp that has been on for a while: the wax is already moving.\n    for (let i = 0; i \u003c 600; i++) step(params, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.flare = 1;\n    let best = -1;\n    for (let i = 0; i \u003c params.count; i++) if (best \u003c 0 || params.y[i] > params.y[best]) best = i;\n    if (best >= 0) {\n      params.temp[best] = 1;\n      params.vy[best] = -12;\n    }\n  }\n  step(params, dt);\n}\n\nexport function draw(display, params, time) {\n  const hue = params.hue;\n  const stretch = params.stretch;\n  const flare = params.flare;\n  const liquid = params.liquid;\n  const lut = params.lut;\n  const side = params.side;\n  // The liquid glows brightest just over the bulb, bluer there and more violet at the top.\n  // Yellow liquid is lit brighter and paler, since dim yellow reads as olive.\n  for (let y = 0; y \u003c H; y++) {\n    const d = y / (H - 1);\n    const lh = hue + 0.74 - 0.1 * d;\n    const warm = Math.pow(0.5 + 0.5 * Math.cos(2 * Math.PI * (lh - 0.14)), 3);\n    const v = (0.5 + 0.38 * Math.pow(d, 1.6)) * (1 + 0.45 * warm) + flare * 0.12 * d;\n    hsvInto(liquid, y * 3, lh, 0.9 - 0.2 * warm, Math.min(1, v));\n  }\n  // The glass is round, so the liquid dims a little towards its sides.\n  for (let x = 0; x \u003c W; x++) {\n    const u = (x - (W - 1) / 2) / (W / 2);\n    side[x] = 1 - 0.16 * u * u;\n  }\n  // Wax colour by warmth: orange when cool, yellow when hot. It stays bright, since dim orange reads as brown.\n  for (let i = 0; i \u003c= 64; i++) {\n    const T = i / 64;\n    hsvInto(lut, i * 3, hue + 0.055 + 0.08 * T, 0.95 - 0.25 * T * T, 1);\n  }\n\n  const n = MAX;\n  const bx = params.x;\n  const by = params.y;\n  const vy = params.vy;\n  const temp = params.temp;\n  // Each drop's kernel, drawn out into a teardrop along the way it moves and\n  // flattened on top where it rests against the glass.\n  const R = new Float32Array(n);\n  const lead = new Float32Array(n);\n  const tail = new Float32Array(n);\n  const wide = new Float32Array(n);\n  const up = new Int8Array(n);\n  for (let i = 0; i \u003c n; i++) {\n    const s = params.size[i];\n    if (s \u003c 0.02) {\n      R[i] = 0;\n      continue;\n    }\n    const r = params.r[i] * (0.4 + 0.6 * s) * (0.94 + 0.12 * temp[i]);\n    R[i] = r * KERNEL;\n    const speed = Math.min(1, Math.abs(vy[i]) / 14);\n    const rest = smooth(CAP + r * 0.45 + 5, CAP + r * 0.45, by[i]);\n    lead[i] = (1 + 0.15 * speed) * (1 - 0.3 * rest);\n    tail[i] = 1 + 0.4 * speed + stretch * (0.4 + 1.4 * speed);\n    wide[i] = (1 + 0.2 * rest) / Math.sqrt((lead[i] + tail[i]) / 2);\n    up[i] = vy[i] \u003c 0 || rest > 0.5 ? 1 : 0;\n  }\n  const reach = 3.5 + 8 * stretch;\n  const surfB = params.surfB;\n\n  for (let y = 0; y \u003c H; y++) {\n    const lr = liquid[y * 3];\n    const lg = liquid[y * 3 + 1];\n    const lb = liquid[y * 3 + 2];\n    for (let x = 0; x \u003c W; x++) {\n      // The pool is a wall of wax whose field fades over a few LEDs above it,\n      // so a drop leaving it pulls up a neck.\n      const fb = EDGE * Math.exp(Math.min(3, (y - surfB[x]) / reach));\n      let F = fb;\n      let FT = fb;\n      for (let i = 0; i \u003c n; i++) {\n        const Ri = R[i];\n        if (Ri === 0) continue;\n        const dx = (x - bx[i]) / wide[i];\n        if (dx > Ri || dx \u003c -Ri) continue;\n        let dy = y - by[i];\n        // Rising wax trails below; sinking wax trails above.\n        dy /= (dy > 0) === (up[i] === 1) ? tail[i] : lead[i];\n        if (dy > Ri || dy \u003c -Ri) continue;\n        const u = (dx * dx + dy * dy) / (Ri * Ri);\n        if (u >= 1) continue;\n        const f = (1 - u) * (1 - u) * (1 - u);\n        F += f;\n        FT += f * temp[i];\n      }\n      // A ramp of a few LEDs around EDGE: the wax shades into the liquid instead of cutting it.\n      const m = smooth(EDGE - 0.1, EDGE + 0.14, F);\n      const T = F > 1e-6 ? Math.min(1, FT / F) : 0;\n      const li = Math.round(T * 64) * 3;\n      // Deep wax glows brighter than its rim.\n      const core = 0.88 + 0.12 * smooth(EDGE, EDGE + 0.8, F);\n      // Liquid close to wax catches its glow.\n      const glow = side[x] * (1 + 0.3 * smooth(0, EDGE, F)) * (1 - m);\n      const r = lr * glow + lut[li] * core * m;\n      const g = lg * glow + lut[li + 1] * core * m;\n      const b = lb * glow + lut[li + 2] * core * m;\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n}\n","layer":{"id":"layer-lava-lamp","type":"code","name":"lava-lamp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lava Lamp\n// Family:  sim\n// Idea:    A tall lava lamp: wax warms in the pool over the bulb, pulls up on a neck, rises as a drop, cools against the glass at the top and sinks back, glowing soft against coloured liquid.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Edward Craven Walker's Astro lamp (1963), drawn as metaballs\n// Round:   3\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Heat=0.3..3, Wax=4..10, Stretch=0..1\n//\n// Knob 1: Hue. Turns the liquid and the wax together, starting from blue liquid and wax that runs from orange when cool to yellow when hot.\n// Knob 2: Heat. How hot the bulb runs: the wax barely stirs at the bottom of the range and circulates in a few seconds at the top.\n// Knob 3: Wax. How many drops are loose in the lamp; drops past the count sink into the pool and melt into it.\n// Knob 4: Stretch. At 0 the wax travels as round drops; turned up, moving wax pulls out into teardrops and long necks, and the pool reaches up after it.\n// Buttons: K1 tap flares the bulb, and the lowest drop heats through and lets go.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 10;\n// A drop is wax where its field passes EDGE. The field of an isolated drop\n// reaches EDGE at 0.644 of its kernel radius, so the kernel is 1.55 times the\n// drop's radius.\nconst EDGE = 0.22;\nconst KERNEL = 1.55;\n// The pool's surface row. Drops that reach the top rest under the glass at CAP.\nconst POOL = 114;\nconst CAP = 2;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x, seed) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, seed) * (1 - u) + hash(i + 1, seed) * u;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(MAX);\n  params.y = new Float32Array(MAX);\n  params.vx = new Float32Array(MAX);\n  params.vy = new Float32Array(MAX);\n  params.r = new Float32Array(MAX);\n  params.temp = new Float32Array(MAX);\n  params.size = new Float32Array(MAX);\n  // How slowly each drop gives up its heat to the liquid on the way, in seconds.\n  params.hold = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) {\n    params.r[i] = 7 + Math.random() * 7;\n    params.hold[i] = 9 + Math.random() * 20;\n    params.x[i] = 10 + Math.random() * (W - 20);\n    params.y[i] = 20 + Math.random() * 90;\n    params.temp[i] = Math.random();\n    params.size[i] = i \u003c 4 ? 1 : 0;\n  }\n  params.surfB = new Float32Array(W);\n  params.liquid = new Float32Array(H * 3);\n  params.side = new Float32Array(W);\n  params.lut = new Float32Array(65 * 3);\n  params.t = 0;\n  params.flare = 0;\n  params.started = false;\n  params.heat = 2;\n  params.stretch = 0;\n  params.count = 4;\n}\n\nfunction step(params, dt) {\n  const heat = params.heat;\n  const stretch = params.stretch;\n  const t = (params.t += dt);\n  params.flare = Math.max(0, params.flare - dt * 0.6);\n  // Rising wax is faster the hotter the lamp runs, never quick.\n  const V = 11 * Math.pow(heat, 0.7);\n  const relax = Math.min(1, dt / 0.6);\n  const n = params.count;\n  for (let i = 0; i \u003c MAX; i++) {\n    // Drops past the count shrink away into the pool; new ones grow out of it.\n    const target = i \u003c n ? 1 : 0;\n    const s = params.size[i];\n    params.size[i] = s + (target - s) * Math.min(1, dt * 0.5);\n    if (s \u003c 0.02 && target === 0) {\n      params.size[i] = 0;\n      params.y[i] = H + 4;\n      continue;\n    }\n    if (s \u003c 0.05 && target === 1 && params.y[i] \u003c POOL) {\n      // A drop that comes back starts warm in the pool.\n      params.y[i] = H - 4;\n      params.temp[i] = 0.5;\n    }\n    const r = params.r[i] * (0.4 + 0.6 * s);\n    const y = params.y[i];\n    let T = params.temp[i];\n    // Only the bulb heats, through the pool; the liquid is cooler than melted wax\n    // all the way up, and coolest under the glass at the top.\n    const bottom = smooth(POOL - 8, POOL + 6, y + r * 0.6);\n    const top = smooth(CAP + 24, CAP + 4, y - r * 0.6);\n    const ambient = 0.2 + 0.15 * (y / H);\n    T += dt * heat * (bottom * (1.05 - T) * (0.6 + params.flare * 2) - top * (T + 0.05) * 0.35);\n    T -= (dt * (T - ambient)) / params.hold[i];\n    params.temp[i] = Math.max(0, Math.min(1, T));\n\n    // Bigger drops push harder; a drop's speed follows its warmth.\n    const vyTarget = -Math.tanh((params.temp[i] - 0.5) * 4) * V * (0.6 + r / 22);\n    params.vy[i] += (vyTarget - params.vy[i]) * relax;\n    const rising = params.vy[i] \u003c 0;\n    const wander = (noise1(t * 0.12 + i * 7.3, i) - 0.5) * 6;\n    // Warm wax drifts in over the bulb, cool wax slides out along the glass.\n    const lane = rising ? (W / 2 - params.x[i]) * 0.05 : (params.x[i] \u003c W / 2 ? -1 : 1) * 1.2;\n    let push = 0;\n    for (let j = 0; j \u003c MAX; j++) {\n      if (j === i || params.size[j] \u003c 0.05) continue;\n      const dx = params.x[i] - params.x[j];\n      const dy = params.y[i] - params.y[j];\n      const reach = (params.r[i] + params.r[j]) * 0.65;\n      const d2 = dx * dx + dy * dy;\n      if (d2 \u003c reach * reach && d2 > 1e-4) push += (dx / Math.sqrt(d2)) * (1 - Math.sqrt(d2) / reach) * 3;\n    }\n    params.vx[i] += (wander + lane + push - params.vx[i]) * relax;\n    params.x[i] += params.vx[i] * dt;\n    params.y[i] += params.vy[i] * dt;\n    const m = r * 0.7;\n    if (params.x[i] \u003c m) {\n      params.x[i] = m;\n      params.vx[i] = Math.abs(params.vx[i]) * 0.3;\n    } else if (params.x[i] > W - m) {\n      params.x[i] = W - m;\n      params.vx[i] = -Math.abs(params.vx[i]) * 0.3;\n    }\n    // Wax that reaches the top rests against the glass until it cools; wax in the pool sinks half into it.\n    const ceiling = CAP + r * 0.45;\n    const floor = POOL + r * 0.55;\n    if (params.y[i] \u003c ceiling) {\n      params.y[i] = ceiling;\n      params.vy[i] = Math.max(0, params.vy[i]);\n    } else if (params.y[i] > floor) {\n      params.y[i] = floor;\n      params.vy[i] = Math.min(0, params.vy[i]);\n    }\n  }\n  // The pool breathes slowly.\n  for (let x = 0; x \u003c W; x++)\n    params.surfB[x] = POOL + 2.2 * Math.sin(x * 0.11 + t * 0.35) + 1.4 * Math.sin(x * 0.27 - t * 0.6 + 1) - stretch * 2;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.heat = Math.max(0.1, k[1]);\n  params.count = Math.max(1, Math.min(MAX, Math.round(k[2])));\n  params.stretch = Math.max(0, Math.min(1, k[3]));\n  if (!params.started) {\n    params.started = true;\n    for (let i = 0; i \u003c MAX; i++) params.size[i] = i \u003c params.count ? 1 : 0;\n    // A lamp that has been on for a while: the wax is already moving.\n    for (let i = 0; i \u003c 600; i++) step(params, 1 / 30);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.flare = 1;\n    let best = -1;\n    for (let i = 0; i \u003c params.count; i++) if (best \u003c 0 || params.y[i] > params.y[best]) best = i;\n    if (best >= 0) {\n      params.temp[best] = 1;\n      params.vy[best] = -12;\n    }\n  }\n  step(params, dt);\n}\n\nexport function draw(display, params, time) {\n  const hue = params.hue;\n  const stretch = params.stretch;\n  const flare = params.flare;\n  const liquid = params.liquid;\n  const lut = params.lut;\n  const side = params.side;\n  // The liquid glows brightest just over the bulb, bluer there and more violet at the top.\n  // Yellow liquid is lit brighter and paler, since dim yellow reads as olive.\n  for (let y = 0; y \u003c H; y++) {\n    const d = y / (H - 1);\n    const lh = hue + 0.74 - 0.1 * d;\n    const warm = Math.pow(0.5 + 0.5 * Math.cos(2 * Math.PI * (lh - 0.14)), 3);\n    const v = (0.5 + 0.38 * Math.pow(d, 1.6)) * (1 + 0.45 * warm) + flare * 0.12 * d;\n    hsvInto(liquid, y * 3, lh, 0.9 - 0.2 * warm, Math.min(1, v));\n  }\n  // The glass is round, so the liquid dims a little towards its sides.\n  for (let x = 0; x \u003c W; x++) {\n    const u = (x - (W - 1) / 2) / (W / 2);\n    side[x] = 1 - 0.16 * u * u;\n  }\n  // Wax colour by warmth: orange when cool, yellow when hot. It stays bright, since dim orange reads as brown.\n  for (let i = 0; i \u003c= 64; i++) {\n    const T = i / 64;\n    hsvInto(lut, i * 3, hue + 0.055 + 0.08 * T, 0.95 - 0.25 * T * T, 1);\n  }\n\n  const n = MAX;\n  const bx = params.x;\n  const by = params.y;\n  const vy = params.vy;\n  const temp = params.temp;\n  // Each drop's kernel, drawn out into a teardrop along the way it moves and\n  // flattened on top where it rests against the glass.\n  const R = new Float32Array(n);\n  const lead = new Float32Array(n);\n  const tail = new Float32Array(n);\n  const wide = new Float32Array(n);\n  const up = new Int8Array(n);\n  for (let i = 0; i \u003c n; i++) {\n    const s = params.size[i];\n    if (s \u003c 0.02) {\n      R[i] = 0;\n      continue;\n    }\n    const r = params.r[i] * (0.4 + 0.6 * s) * (0.94 + 0.12 * temp[i]);\n    R[i] = r * KERNEL;\n    const speed = Math.min(1, Math.abs(vy[i]) / 14);\n    const rest = smooth(CAP + r * 0.45 + 5, CAP + r * 0.45, by[i]);\n    lead[i] = (1 + 0.15 * speed) * (1 - 0.3 * rest);\n    tail[i] = 1 + 0.4 * speed + stretch * (0.4 + 1.4 * speed);\n    wide[i] = (1 + 0.2 * rest) / Math.sqrt((lead[i] + tail[i]) / 2);\n    up[i] = vy[i] \u003c 0 || rest > 0.5 ? 1 : 0;\n  }\n  const reach = 3.5 + 8 * stretch;\n  const surfB = params.surfB;\n\n  for (let y = 0; y \u003c H; y++) {\n    const lr = liquid[y * 3];\n    const lg = liquid[y * 3 + 1];\n    const lb = liquid[y * 3 + 2];\n    for (let x = 0; x \u003c W; x++) {\n      // The pool is a wall of wax whose field fades over a few LEDs above it,\n      // so a drop leaving it pulls up a neck.\n      const fb = EDGE * Math.exp(Math.min(3, (y - surfB[x]) / reach));\n      let F = fb;\n      let FT = fb;\n      for (let i = 0; i \u003c n; i++) {\n        const Ri = R[i];\n        if (Ri === 0) continue;\n        const dx = (x - bx[i]) / wide[i];\n        if (dx > Ri || dx \u003c -Ri) continue;\n        let dy = y - by[i];\n        // Rising wax trails below; sinking wax trails above.\n        dy /= (dy > 0) === (up[i] === 1) ? tail[i] : lead[i];\n        if (dy > Ri || dy \u003c -Ri) continue;\n        const u = (dx * dx + dy * dy) / (Ri * Ri);\n        if (u >= 1) continue;\n        const f = (1 - u) * (1 - u) * (1 - u);\n        F += f;\n        FT += f * temp[i];\n      }\n      // A ramp of a few LEDs around EDGE: the wax shades into the liquid instead of cutting it.\n      const m = smooth(EDGE - 0.1, EDGE + 0.14, F);\n      const T = F > 1e-6 ? Math.min(1, FT / F) : 0;\n      const li = Math.round(T * 64) * 3;\n      // Deep wax glows brighter than its rim.\n      const core = 0.88 + 0.12 * smooth(EDGE, EDGE + 0.8, F);\n      // Liquid close to wax catches its glow.\n      const glow = side[x] * (1 + 0.3 * smooth(0, EDGE, F)) * (1 - m);\n      const r = lr * glow + lut[li] * core * m;\n      const g = lg * glow + lut[li + 1] * core * m;\n      const b = lb * glow + lut[li + 2] * core * m;\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Heat=0.3..3, Wax=4..10, Stretch=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the liquid and the wax together, starting from blue liquid and wax that runs from orange when cool to yellow when hot."},{"name":"Heat","min":0.3,"max":3,"about":"How hot the bulb runs: the wax barely stirs at the bottom of the range and circulates in a few seconds at the top."},{"name":"Wax","min":4,"max":10,"about":"How many drops are loose in the lamp; drops past the count sink into the pool and melt into it."},{"name":"Stretch","min":0,"max":1,"about":"At 0 the wax travels as round drops; turned up, moving wax pulls out into teardrops and long necks, and the pool reaches up after it."}],"start":[0,2,4,0.06],"measures":{"motion":0.1138,"detail":0.0147,"edges":0.1844,"complexity":1.5488,"coverage":1,"colour":0.5657,"drift":0.068},"knobResponse":[0.5599,0.1621,0.1504,0.0519]},{"slug":"life","title":"Life","family":"automata","round":1,"note":"같은 여덟 이웃에 법칙이 여섯이에요. 세포가 나이만큼 색을 입어서 법칙마다 무엇이 남는지 보여요.","idea":"The same eight neighbours run under six different laws, and each cell wears its age, so a law shows itself in what lasts and what flickers.","buttons":"K1 tap sweeps a fresh soup down the whole panel.","code":"// ===== Patternflow pattern =====\n// Title:   Life\n// Family:  automata\n// Idea:    The same eight neighbours run under six different laws, and each cell wears its age, so a law shows itself in what lasts and what flickers.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Rule=0..5, Ghosts=0..1\n//\n// Knob 1: Hue. Turns the whole palette, newborn to old to ghost, around the colour wheel.\n// Knob 2: Speed. Generations per second, from one to about 24.\n// Knob 3: Rule. 0 Conway B3/S23, 1 HighLife B36/S23, 2 2x2 B36/S125, 3 Day and Night B3678/S34678, 4 Anneal B4678/S35678, 5 Maze B3/S12345.\n// Knob 4: Ghosts. How long a dead cell glows on, from a short smear to long exposure.\n// Buttons: K1 tap sweeps a fresh soup down the whole panel.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Birth and survival as bit masks over the neighbour count, the density of\n// the soup each rule starts from, and the density a reseed drops in. The rules\n// that grow walls get a sparse drop, so a reseed clears ground to regrow.\nconst RULES = [\n  [1 \u003c\u003c 3, (1 \u003c\u003c 2) | (1 \u003c\u003c 3), 0.33, 0.33],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6), (1 \u003c\u003c 2) | (1 \u003c\u003c 3), 0.33, 0.33],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6), (1 \u003c\u003c 1) | (1 \u003c\u003c 2) | (1 \u003c\u003c 5), 0.3, 0.3],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), (1 \u003c\u003c 3) | (1 \u003c\u003c 4) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), 0.5, 0.5],\n  [(1 \u003c\u003c 4) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), (1 \u003c\u003c 3) | (1 \u003c\u003c 5) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), 0.5, 0.5],\n  [1 \u003c\u003c 3, (1 \u003c\u003c 1) | (1 \u003c\u003c 2) | (1 \u003c\u003c 3) | (1 \u003c\u003c 4) | (1 \u003c\u003c 5), 0.12, 0.05],\n];\n// Colours by age on a log scale: the first few generations change the colour\n// fast, and a still region keeps deepening for about twenty seconds.\nconst AGES = 48;\nconst GHOST_CUT = 0.07;\nconst BLOCKS = 32;\n\nfunction rand(params) {\n  let s = params.rng | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.rng = s;\n  return (s >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.cells = new Uint8Array(N);\n  params.next = new Uint8Array(N);\n  params.age = new Uint16Array(N);\n  params.ghost = new Float32Array(N);\n  params.ageCol = new Float32Array(AGES * 3);\n  params.ageIndex = new Uint8Array(1024);\n  for (let a = 0; a \u003c 1024; a++) params.ageIndex[a] = Math.min(AGES - 1, Math.floor(Math.log2(1 + a) * 5.2));\n  params.blocks = new Float32Array(BLOCKS);\n  params.now = new Float32Array(BLOCKS);\n  params.still = 0;\n  params.gen = 0;\n  params.ghostCol = [0, 0, 0];\n  params.rng = (Math.random() * 4294967295) | 1;\n  params.seeded = false;\n  params.acc = 0;\n  params.calm = 1;\n  params.cooldown = 0;\n  // The reseed under way: 0 none, 1 a growing drop, 2 a sweep across the panel.\n  params.wipe = 0;\n  params.wipeT = 0;\n  params.wipeDone = 0;\n}\n\n// Kill or seed one cell as a wipe passes it; what dies there leaves a ghost.\nfunction reseedCell(params, p, density) {\n  if (params.cells[p]) params.ghost[p] = 0.5;\n  const alive = rand(params) \u003c density ? 1 : 0;\n  params.cells[p] = alive;\n  params.age[p] = 0;\n}\n\nfunction startWipe(params, kind) {\n  params.wipe = kind;\n  params.wipeT = 0;\n  params.wipeDone = 0;\n  params.wipeX = Math.floor(rand(params) * W);\n  params.wipeY = Math.floor(rand(params) * H);\n  params.wipeR = 16 + rand(params) * 12;\n  params.cooldown = 64;\n  params.still = 0;\n}\n\nfunction runWipe(params, dt, density) {\n  if (params.wipe === 2) density = params.soup;\n  params.wipeT += dt;\n  if (params.wipe === 1) {\n    // A disc of fresh soup grows from one point, edge first.\n    const r = Math.min(1, params.wipeT / 0.8) * params.wipeR;\n    const r0 = params.wipeDone;\n    const reach = Math.ceil(r);\n    for (let dy = -reach; dy \u003c= reach; dy++) {\n      for (let dx = -reach; dx \u003c= reach; dx++) {\n        const d = Math.hypot(dx, dy);\n        if (d \u003c r0 || d >= r) continue;\n        const x = (params.wipeX + dx + W) % W;\n        const y = (params.wipeY + dy + H) % H;\n        reseedCell(params, y * W + x, density * (1 - 0.5 * (d / params.wipeR)));\n      }\n    }\n    params.wipeDone = r;\n    if (params.wipeT >= 0.8) params.wipe = 0;\n  } else {\n    // A front of fresh soup comes down the whole panel from the top.\n    const to = Math.min(H, Math.floor((params.wipeT / 1.2) * H));\n    for (let y = params.wipeDone; y \u003c to; y++) {\n      for (let x = 0; x \u003c W; x++) reseedCell(params, y * W + x, density);\n    }\n    params.wipeDone = to;\n    if (to >= H) params.wipe = 0;\n  }\n}\n\nfunction step(params, rule) {\n  const cells = params.cells;\n  const next = params.next;\n  const age = params.age;\n  const birth = rule[0];\n  const survive = rule[1];\n  let changed = 0;\n  let population = 0;\n  for (let y = 0; y \u003c H; y++) {\n    const up = ((y + H - 1) % H) * W;\n    const row = y * W;\n    const down = ((y + 1) % H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const l = (x + W - 1) % W;\n      const r = (x + 1) % W;\n      const n =\n        cells[up + l] + cells[up + x] + cells[up + r] +\n        cells[row + l] + cells[row + r] +\n        cells[down + l] + cells[down + x] + cells[down + r];\n      const p = row + x;\n      const was = cells[p];\n      const now = ((was ? survive : birth) >> n) & 1;\n      next[p] = now;\n      if (now) {\n        age[p] = was ? Math.min(age[p] + 1, 65535) : 0;\n        population++;\n      } else if (was) params.ghost[p] = 0.5;\n      if (now !== was) changed++;\n    }\n  }\n  params.cells = next;\n  params.next = cells;\n  params.calm = params.calm * 0.9 + 0.1 * (changed / N);\n  params.gen++;\n  // Every sixteen generations, measure how far the layout has moved from the\n  // last one that counted as new; flicker along an edge never adds up to that.\n  if (params.gen % 16 === 0) {\n    let moved = 0;\n    for (let b = 0; b \u003c BLOCKS; b++) {\n      const bx = (b % 4) * 16;\n      const by = Math.floor(b / 4) * 16;\n      let sum = 0;\n      for (let y = by; y \u003c by + 16; y++) for (let x = bx; x \u003c bx + 16; x++) sum += next[y * W + x];\n      params.now[b] = sum / 256;\n      moved += Math.abs(params.now[b] - params.blocks[b]);\n    }\n    // Measured against the population, so a sparse field and a crowded one\n    // are held to the same standard.\n    if (moved / BLOCKS / (population / N + 0.02) > 0.12) {\n      params.blocks.set(params.now);\n      params.still = 0;\n    } else params.still++;\n  }\n  if (params.cooldown > 0) params.cooldown--;\n  if (params.wipe) return;\n  if (population \u003c N * 0.004) startWipe(params, 2);\n  else if ((params.calm \u003c 0.006 || params.still >= 4) && params.cooldown === 0) startWipe(params, 1);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const rate = 1 + 5.5 * k[1];\n  const ruleIndex = Math.max(0, Math.min(RULES.length - 1, Math.round(k[2])));\n  const rule = RULES[ruleIndex];\n  params.trail = 0.25 + 3 * Math.pow(k[3], 1.5);\n\n  if (!params.seeded) {\n    for (let p = 0; p \u003c N; p++) params.cells[p] = rand(params) \u003c rule[2] ? 1 : 0;\n    // Run the soup past its first boil, so even the slowest speed opens on shapes.\n    for (let i = 0; i \u003c 24; i++) step(params, rule);\n    params.ghost.fill(0);\n    params.seeded = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startWipe(params, 2);\n  params.soup = rule[2];\n  if (params.wipe) runWipe(params, dt, rule[3]);\n\n  params.acc += dt * rate;\n  let steps = 0;\n  while (params.acc >= 1 && steps \u003c 4) {\n    step(params, rule);\n    params.acc -= 1;\n    steps++;\n  }\n  if (params.acc > 1) params.acc = 1;\n\n  const fade = Math.exp(-dt / params.trail);\n  const ghost = params.ghost;\n  for (let p = 0; p \u003c N; p++) if (ghost[p] > 0) ghost[p] = ghost[p] > GHOST_CUT ? ghost[p] * fade : 0;\n\n  // Newborn cells are pale and hot, the young ones the full hue, and the old\n  // ones sink to a deeper, darker colour; ghosts sit further round the wheel.\n  for (let a = 0; a \u003c AGES; a++) {\n    const young = Math.min(1, a / 8);\n    const old = Math.max(0, (a - 8) / (AGES - 9));\n    const c = hsv(params.hue + 0.1 * (1 - young) - 0.2 * old, 0.55 + 0.35 * young, 1 - 0.55 * old);\n    params.ageCol[a * 3] = c[0];\n    params.ageCol[a * 3 + 1] = c[1];\n    params.ageCol[a * 3 + 2] = c[2];\n  }\n  params.ghostCol = hsv(params.hue + 0.62, 0.85, 1);\n}\n\nexport function draw(display, params, time) {\n  const cells = params.cells;\n  const age = params.age;\n  const ghost = params.ghost;\n  const col = params.ageCol;\n  const g = params.ghostCol;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (cells[p]) {\n        const a = params.ageIndex[Math.min(age[p], 1023)] * 3;\n        display.setPixel(x, y, col[a], col[a + 1], col[a + 2]);\n      } else if (ghost[p] > GHOST_CUT) {\n        const v = ghost[p];\n        display.setPixel(x, y, g[0] * v, g[1] * v, g[2] * v);\n      } else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","layer":{"id":"layer-life","type":"code","name":"life","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Life\n// Family:  automata\n// Idea:    The same eight neighbours run under six different laws, and each cell wears its age, so a law shows itself in what lasts and what flickers.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Rule=0..5, Ghosts=0..1\n//\n// Knob 1: Hue. Turns the whole palette, newborn to old to ghost, around the colour wheel.\n// Knob 2: Speed. Generations per second, from one to about 24.\n// Knob 3: Rule. 0 Conway B3/S23, 1 HighLife B36/S23, 2 2x2 B36/S125, 3 Day and Night B3678/S34678, 4 Anneal B4678/S35678, 5 Maze B3/S12345.\n// Knob 4: Ghosts. How long a dead cell glows on, from a short smear to long exposure.\n// Buttons: K1 tap sweeps a fresh soup down the whole panel.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Birth and survival as bit masks over the neighbour count, the density of\n// the soup each rule starts from, and the density a reseed drops in. The rules\n// that grow walls get a sparse drop, so a reseed clears ground to regrow.\nconst RULES = [\n  [1 \u003c\u003c 3, (1 \u003c\u003c 2) | (1 \u003c\u003c 3), 0.33, 0.33],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6), (1 \u003c\u003c 2) | (1 \u003c\u003c 3), 0.33, 0.33],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6), (1 \u003c\u003c 1) | (1 \u003c\u003c 2) | (1 \u003c\u003c 5), 0.3, 0.3],\n  [(1 \u003c\u003c 3) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), (1 \u003c\u003c 3) | (1 \u003c\u003c 4) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), 0.5, 0.5],\n  [(1 \u003c\u003c 4) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), (1 \u003c\u003c 3) | (1 \u003c\u003c 5) | (1 \u003c\u003c 6) | (1 \u003c\u003c 7) | (1 \u003c\u003c 8), 0.5, 0.5],\n  [1 \u003c\u003c 3, (1 \u003c\u003c 1) | (1 \u003c\u003c 2) | (1 \u003c\u003c 3) | (1 \u003c\u003c 4) | (1 \u003c\u003c 5), 0.12, 0.05],\n];\n// Colours by age on a log scale: the first few generations change the colour\n// fast, and a still region keeps deepening for about twenty seconds.\nconst AGES = 48;\nconst GHOST_CUT = 0.07;\nconst BLOCKS = 32;\n\nfunction rand(params) {\n  let s = params.rng | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.rng = s;\n  return (s >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.cells = new Uint8Array(N);\n  params.next = new Uint8Array(N);\n  params.age = new Uint16Array(N);\n  params.ghost = new Float32Array(N);\n  params.ageCol = new Float32Array(AGES * 3);\n  params.ageIndex = new Uint8Array(1024);\n  for (let a = 0; a \u003c 1024; a++) params.ageIndex[a] = Math.min(AGES - 1, Math.floor(Math.log2(1 + a) * 5.2));\n  params.blocks = new Float32Array(BLOCKS);\n  params.now = new Float32Array(BLOCKS);\n  params.still = 0;\n  params.gen = 0;\n  params.ghostCol = [0, 0, 0];\n  params.rng = (Math.random() * 4294967295) | 1;\n  params.seeded = false;\n  params.acc = 0;\n  params.calm = 1;\n  params.cooldown = 0;\n  // The reseed under way: 0 none, 1 a growing drop, 2 a sweep across the panel.\n  params.wipe = 0;\n  params.wipeT = 0;\n  params.wipeDone = 0;\n}\n\n// Kill or seed one cell as a wipe passes it; what dies there leaves a ghost.\nfunction reseedCell(params, p, density) {\n  if (params.cells[p]) params.ghost[p] = 0.5;\n  const alive = rand(params) \u003c density ? 1 : 0;\n  params.cells[p] = alive;\n  params.age[p] = 0;\n}\n\nfunction startWipe(params, kind) {\n  params.wipe = kind;\n  params.wipeT = 0;\n  params.wipeDone = 0;\n  params.wipeX = Math.floor(rand(params) * W);\n  params.wipeY = Math.floor(rand(params) * H);\n  params.wipeR = 16 + rand(params) * 12;\n  params.cooldown = 64;\n  params.still = 0;\n}\n\nfunction runWipe(params, dt, density) {\n  if (params.wipe === 2) density = params.soup;\n  params.wipeT += dt;\n  if (params.wipe === 1) {\n    // A disc of fresh soup grows from one point, edge first.\n    const r = Math.min(1, params.wipeT / 0.8) * params.wipeR;\n    const r0 = params.wipeDone;\n    const reach = Math.ceil(r);\n    for (let dy = -reach; dy \u003c= reach; dy++) {\n      for (let dx = -reach; dx \u003c= reach; dx++) {\n        const d = Math.hypot(dx, dy);\n        if (d \u003c r0 || d >= r) continue;\n        const x = (params.wipeX + dx + W) % W;\n        const y = (params.wipeY + dy + H) % H;\n        reseedCell(params, y * W + x, density * (1 - 0.5 * (d / params.wipeR)));\n      }\n    }\n    params.wipeDone = r;\n    if (params.wipeT >= 0.8) params.wipe = 0;\n  } else {\n    // A front of fresh soup comes down the whole panel from the top.\n    const to = Math.min(H, Math.floor((params.wipeT / 1.2) * H));\n    for (let y = params.wipeDone; y \u003c to; y++) {\n      for (let x = 0; x \u003c W; x++) reseedCell(params, y * W + x, density);\n    }\n    params.wipeDone = to;\n    if (to >= H) params.wipe = 0;\n  }\n}\n\nfunction step(params, rule) {\n  const cells = params.cells;\n  const next = params.next;\n  const age = params.age;\n  const birth = rule[0];\n  const survive = rule[1];\n  let changed = 0;\n  let population = 0;\n  for (let y = 0; y \u003c H; y++) {\n    const up = ((y + H - 1) % H) * W;\n    const row = y * W;\n    const down = ((y + 1) % H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const l = (x + W - 1) % W;\n      const r = (x + 1) % W;\n      const n =\n        cells[up + l] + cells[up + x] + cells[up + r] +\n        cells[row + l] + cells[row + r] +\n        cells[down + l] + cells[down + x] + cells[down + r];\n      const p = row + x;\n      const was = cells[p];\n      const now = ((was ? survive : birth) >> n) & 1;\n      next[p] = now;\n      if (now) {\n        age[p] = was ? Math.min(age[p] + 1, 65535) : 0;\n        population++;\n      } else if (was) params.ghost[p] = 0.5;\n      if (now !== was) changed++;\n    }\n  }\n  params.cells = next;\n  params.next = cells;\n  params.calm = params.calm * 0.9 + 0.1 * (changed / N);\n  params.gen++;\n  // Every sixteen generations, measure how far the layout has moved from the\n  // last one that counted as new; flicker along an edge never adds up to that.\n  if (params.gen % 16 === 0) {\n    let moved = 0;\n    for (let b = 0; b \u003c BLOCKS; b++) {\n      const bx = (b % 4) * 16;\n      const by = Math.floor(b / 4) * 16;\n      let sum = 0;\n      for (let y = by; y \u003c by + 16; y++) for (let x = bx; x \u003c bx + 16; x++) sum += next[y * W + x];\n      params.now[b] = sum / 256;\n      moved += Math.abs(params.now[b] - params.blocks[b]);\n    }\n    // Measured against the population, so a sparse field and a crowded one\n    // are held to the same standard.\n    if (moved / BLOCKS / (population / N + 0.02) > 0.12) {\n      params.blocks.set(params.now);\n      params.still = 0;\n    } else params.still++;\n  }\n  if (params.cooldown > 0) params.cooldown--;\n  if (params.wipe) return;\n  if (population \u003c N * 0.004) startWipe(params, 2);\n  else if ((params.calm \u003c 0.006 || params.still >= 4) && params.cooldown === 0) startWipe(params, 1);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const rate = 1 + 5.5 * k[1];\n  const ruleIndex = Math.max(0, Math.min(RULES.length - 1, Math.round(k[2])));\n  const rule = RULES[ruleIndex];\n  params.trail = 0.25 + 3 * Math.pow(k[3], 1.5);\n\n  if (!params.seeded) {\n    for (let p = 0; p \u003c N; p++) params.cells[p] = rand(params) \u003c rule[2] ? 1 : 0;\n    // Run the soup past its first boil, so even the slowest speed opens on shapes.\n    for (let i = 0; i \u003c 24; i++) step(params, rule);\n    params.ghost.fill(0);\n    params.seeded = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startWipe(params, 2);\n  params.soup = rule[2];\n  if (params.wipe) runWipe(params, dt, rule[3]);\n\n  params.acc += dt * rate;\n  let steps = 0;\n  while (params.acc >= 1 && steps \u003c 4) {\n    step(params, rule);\n    params.acc -= 1;\n    steps++;\n  }\n  if (params.acc > 1) params.acc = 1;\n\n  const fade = Math.exp(-dt / params.trail);\n  const ghost = params.ghost;\n  for (let p = 0; p \u003c N; p++) if (ghost[p] > 0) ghost[p] = ghost[p] > GHOST_CUT ? ghost[p] * fade : 0;\n\n  // Newborn cells are pale and hot, the young ones the full hue, and the old\n  // ones sink to a deeper, darker colour; ghosts sit further round the wheel.\n  for (let a = 0; a \u003c AGES; a++) {\n    const young = Math.min(1, a / 8);\n    const old = Math.max(0, (a - 8) / (AGES - 9));\n    const c = hsv(params.hue + 0.1 * (1 - young) - 0.2 * old, 0.55 + 0.35 * young, 1 - 0.55 * old);\n    params.ageCol[a * 3] = c[0];\n    params.ageCol[a * 3 + 1] = c[1];\n    params.ageCol[a * 3 + 2] = c[2];\n  }\n  params.ghostCol = hsv(params.hue + 0.62, 0.85, 1);\n}\n\nexport function draw(display, params, time) {\n  const cells = params.cells;\n  const age = params.age;\n  const ghost = params.ghost;\n  const col = params.ageCol;\n  const g = params.ghostCol;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (cells[p]) {\n        const a = params.ageIndex[Math.min(age[p], 1023)] * 3;\n        display.setPixel(x, y, col[a], col[a + 1], col[a + 2]);\n      } else if (ghost[p] > GHOST_CUT) {\n        const v = ghost[p];\n        display.setPixel(x, y, g[0] * v, g[1] * v, g[2] * v);\n      } else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0..4, Rule=0..5, Ghosts=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole palette, newborn to old to ghost, around the colour wheel."},{"name":"Speed","min":0,"max":4,"about":"Generations per second, from one to about 24."},{"name":"Rule","min":0,"max":5,"about":"0 Conway B3/S23, 1 HighLife B36/S23, 2 2x2 B36/S125, 3 Day and Night B3678/S34678, 4 Anneal B4678/S35678, 5 Maze B3/S12345."},{"name":"Ghosts","min":0,"max":1,"about":"How long a dead cell glows on, from a short smear to long exposure."}],"start":[0,2,0,0.06],"measures":{"motion":0.6935,"detail":0.1138,"edges":0.7121,"complexity":0.3343,"coverage":0.2193,"colour":0.2429,"drift":0.1393},"knobResponse":[0.1027,0.1531,0.303,0.0806]},{"slug":"liftoff","title":"Liftoff","family":"flight","round":22,"note":"새벽 물 건너 발사대에서 로켓이 하얀 산소 김을 흘리며 서 있다가 김구름 속에 불을 붙이고 솟아올라요. 카메라가 따라 고개를 들면 하늘이 파랑에서 별 뜬 검정으로 바뀌고, Max-Q 와 단 분리를 지나 밝은 점이 되면 새 로켓이 발사대에 서요.","idea":"A rocket vents on its pad across the water, lights up in rolling steam and climbs while the camera tilts after it from blue sky into black and stars, through Max-Q and staging, until it is a bright dot and the next rocket stands on the pad.","buttons":"K1 tap skips the countdown to ignition, or after liftoff rolls out the next rocket.","code":"// ===== Patternflow pattern =====\n// Title:   Liftoff\n// Family:  flight\n// Idea:    A rocket vents on its pad across the water, lights up in rolling steam and climbs while the camera tilts after it from blue sky into black and stars, through Max-Q and staging, until it is a bright dot and the next rocket stands on the pad.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after long-lens tracking shots of launches filmed across the water from the press site\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Rocket=0..3, Speed=0.2..3, Stages=1..3, Time=0..1\n//\n// Knob 1: Rocket. A white moon rocket by its tower at 0, a chequered V-2 at 1, a grey-green cluster whose boosters fall away in a cross at 2, a sounding rocket on a rail at 3.\n// Knob 2: Speed. At 2 the countdown, the flight and the next rocket take 35 s; at 0.2 ten times longer.\n// Knob 3: Stages. 1 to 3 stages. A taller stack gets a taller tower and more steam, and each extra stage drops away on the climb.\n// Knob 4: Time. Dawn at 0, then day, dusk and a floodlit night with searchlights. At dawn and dusk the high plume catches the sun.\n// Buttons: K1 tap skips the countdown to ignition, or after liftoff rolls out the next rocket.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Shoreline row with the camera level, pad column, deck height.\nconst GY = 112;\nconst X0 = 36;\nconst DECK = 4;\nconst MAXP = 900;\n// A puff: x, height, vx, vz, radius, growth, age, life, opacity, heat,\n// whiteness, drag, sprite.\nconst PF = 13;\nconst SP = 24;\nconst { min, max, abs, sin, cos, exp, sqrt, floor, round, ceil, atan2, hypot } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ss = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Dawn, day, dusk, night: four sky colours, ambient, sun colour; sun on the\n// rocket, on the high plume, floodlights, stars, sun column, height, radius.\nconst PAL = [\n  [255, 150, 90, 200, 135, 150, 80, 105, 190, 22, 36, 110, 80, 88, 125, 255, 175, 120, 0.3, 1, 0.75, 0.15, 56, 0, 3.5],\n  [200, 222, 245, 140, 190, 240, 55, 135, 230, 15, 55, 165, 175, 185, 200, 255, 250, 235, 1, 0, 0, 0, 12, 190, 3.5],\n  [255, 115, 55, 185, 85, 115, 70, 55, 140, 18, 18, 70, 95, 72, 100, 255, 135, 75, 0.35, 1, 0.6, 0.3, 8, 3, 4],\n  [22, 34, 62, 14, 22, 50, 7, 12, 34, 3, 5, 16, 30, 34, 55, 0, 0, 0, 0, 0.1, 1, 1, 30, -40, 0],\n];\n// Kerosene, hydrogen, solid: flame core, middle, edge, glow; trail\n// whiteness and thickness.\nconst FUEL = [\n  [[255, 246, 215], [255, 196, 80], [235, 105, 30], [255, 140, 55], 0.62, 0.75],\n  [[235, 240, 255], [170, 180, 255], [120, 110, 230], [130, 150, 255], 0.95, 0.22],\n  [[255, 252, 240], [255, 225, 150], [250, 160, 70], [255, 190, 120], 0.95, 0.95],\n];\nconst ACC = [1, 1.15, 1.05, 1.7];\nconst LEAN = [0, 0, 0, 0.12];\nconst STEAM = [1, 0.55, 0.9, 0.35];\nconst IGN = [-2, -1.6, -2.2, -0.12];\n// White, black, engine bells, bare metal, grey-green, orange.\nconst PAINT = [[0.9, 0.9, 0.88], [0.08, 0.08, 0.08], [0.24, 0.21, 0.2], [0.66, 0.69, 0.74], [0.62, 0.67, 0.58], [0.95, 0.42, 0.12]];\n// 3x5 letters: 0-9, T, minus, plus.\nconst FONT = [31599, 11415, 29671, 29647, 23497, 31183, 31215, 29330, 31727, 31695, 29842, 448, 1488];\nconst BEAMS = [[3, 0.32], [62, -0.3], [22, 0.06]].map(([b, a]) => [b, sin(a), cos(a)]);\nconst BOOST = [[-1.4, 0, 1.9, 1.4, 2, 0], [0, 1, 2.1, 2.05, 1, 0], [1, 13, 2.05, 1.1, 10, 0], [13, 18, 1.1, 0, 10, 0]];\n\n// Stages from the bottom: length, segments [u0, u1, half widths, paint],\n// bell [length, half widths], nozzle, fuel, fins [u0, u1, span, paint].\nfunction build(sty, n) {\n  const S = (len, segs, bell, wn, fuel, fins = []) => ({ len, segs, bell, wn, fuel, fins });\n  const a = 20 + (3 - n) * 2.5, b = n > 1 ? 26 : 29;\n  const st = [\n    [S(a, [[0, a, 4.5, 4.5, 6]], [2.5, 4.4, 3.4], 4.3, 0, [[0, 5, 2.4, 1]]), S(13, [[0, 1, 4.5, 4.5, 1], [1, 13, 4.5, 4.5, 0]], [1.5, 3, 2.2], 3, 1), S(10, [[0, 3, 4.5, 3.3, 0], [3, 10, 3.3, 3.3, 7]], [1.2, 1.8, 1.2], 1.6, 1)],\n    [S(b, [[0, 20, 3.2, 3.4, 8], [20, b, 3.4, n > 1 ? 1.4 : 0, 8]], [1.5, 2.4, 1.8], 2.2, 0, [[0, 7, 3.4, 8]]), S(12, [[0, 12, 1.4, 1.4, 0]], [0.8, 1.1, 0.8], 1, 2, [[0, 3, 1.7, 1]]), S(8, [[0, 8, 1.1, 1.1, 9]], [0.7, 0.9, 0.6], 0.8, 2, [[0, 2.5, 1.2, 5]])],\n    [S(28, [[0, 26, 2.2, 2.8, 10], [26, 28, 2.8, 2.5, 10]], [1.5, 2.2, 1.6], 2.2, 0), S(10, [[0, 2, 2.4, 2.4, 11], [2, 10, 2.6, 2.6, 10]], [1.2, 1.8, 1.2], 1.6, 0), S(4, [[0, 4, 2.6, 2.6, 3]], [0.8, 1.2, 0.8], 1, 1)],\n    [S(15, [[0, 15, 1.7, 1.7, 9]], [1, 1.4, 1.1], 1.4, 2, [[0, 4.5, 2.6, 5]]), S(12, [[0, 1.5, 1.7, 1.3, 1], [1.5, 12, 1.3, 1.3, 9]], [0.8, 1.1, 0.8], 1.1, 2, [[1.5, 4, 1.7, 5]]), S(9, [[0, 9, 1.1, 1.1, 9]], [0.6, 0.9, 0.6], 0.8, 2, [[0, 2.5, 1.2, 5]])],\n  ][sty].slice(0, n);\n  const last = st[n - 1], top = last.segs.at(-1)[3];\n  last.nose = sty === 0 ? [[0, 4, top, 2.6, 3], [4, 7, 2.6, 0.7, 0], [7, 11, 0.45, 0.45, 5], [11, 13, 0.9, 0.9, 5], [13, 14, 0.9, 0.1, 5]] : sty === 2 ? [[0, 5, 3.2, 3.2, 0], [5, 9, 3.2, 1.4, 0], [9, 10, 1.4, 0.5, 0], [10, 14, 0.4, 0.4, 5], [14, 16, 0.8, 0.8, 5], [16, 17, 0.8, 0, 5]] : top > 0 ? [[0, sty === 3 ? 6 : 4, top, 0, 0]] : [];\n  let u = 0;\n  for (const s of st) [s.u, u] = [u, u + s.len];\n  return { st, n, L: u + (last.nose.length && last.nose.at(-1)[1]), sep: st.slice(1).map((_, i) => (sty === 2 ? 11.5 + i * 4.5 : 9.5 + i * 5)), boost: sty === 2 };\n}\n\n// Stages a..b-1 end to end from 0, with stage a's bell below.\nfunction stack(V, a, b) {\n  const segs = [], fins = [], u0 = V.st[a].u, bl = V.st[a].bell;\n  segs.push([-bl[0], 0, bl[1], bl[2], 2, 0]);\n  for (let i = a; i \u003c b; i++) {\n    const s = V.st[i], o = s.u - u0, t = o + s.len;\n    for (const g of s.segs) segs.push([g[0] + o, g[1] + o, g[2], g[3], g[4], o]);\n    for (const f of s.fins) fins.push([f[0] + o, f[1] + o, f[2], f[3], o]);\n    if (s.nose) for (const g of s.nose) segs.push([g[0] + t, g[1] + t, g[2], g[3], g[4], t]);\n  }\n  return { segs, fins };\n}\n\nconst vehicle = (P) => P.vc[P.style * 4 + P.n] || (P.vc[P.style * 4 + P.n] = build(P.style, P.n));\n\n// The stack's foot at flight time T, and its engines.\nfunction fly(P, V, T) {\n  const sty = P.style, t = max(0, T), g = ACC[sty], E = g * 512 * (1 - exp((-t * t) / 128));\n  let ai = 0, f = ss(IGN[sty], IGN[sty] + 0.6, T);\n  for (const ts of V.sep) {\n    if (T >= ts) ai++;\n    f *= 1 - ss(ts - 0.3, ts, T) + ss(ts + 0.7, ts + 1.1, T);\n  }\n  const bo = V.boost && T \u003c 7.5, S = V.st[ai], wn = bo ? 6.2 : S.wn;\n  return { E, ai, f, wn, s: 1 / (1 + 0.001 * g * t * t * t), a: LEAN[sty] + 0.2 * ss(3, 16, t), x: X0 + 6 * ss(3, 20, t) + (sty === 3 ? 0.12 * min(E, 70) : 0), e: DECK + V.st[0].bell[0] + E, Lf: wn * (S.fuel === 2 ? 4.2 : 3.2) * (1 + E / 260) * f, k: 0.12 + min(0.9, E / 500) * (S.fuel === 1 ? 1.4 : 1), fuel: bo ? 0 : S.fuel };\n}\n\n// The camera's tilt in rows keeps the nose near the top, then lets the\n// shrinking rocket climb.\nfunction camera(V, T, F) {\n  const d = F.E - (GY - DECK - V.st[0].bell[0] - V.L * F.s - 15 + 9 * ss(12, 23, T)), h = max(14 - abs(d), 0) / 14;\n  return max(0, d) + h * h * 3.5;\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), G: F(N), D: F(N * 5), pa: F(MAXP * PF), spD: F(4 * SP * SP), spS: F(4 * SP * SP), vc: {}, started: false, T: -4.3, np: 0, clk: 0, pt: null });\n  // Lumpy puffs lit from above.\n  for (let q = 0; q \u003c 4 * SP * SP; q++) {\n    const k = floor(q / (SP * SP)), dx = (((q % SP) + 0.5) / SP) * 2 - 1, dy = (((floor(q / SP) % SP) + 0.5) / SP) * 2 - 1;\n    const d = hypot(dx, dy), an = atan2(dy, dx), edge = 0.8 + 0.1 * sin(5 * an + k * 1.7) + 0.07 * sin(9 * an + k * 2.9) + 0.04 * sin(13 * an + k);\n    P.spD[q] = ss(edge, edge - 0.45, d) * (0.78 + 0.22 * sin(dx * 7 + k) * sin(dy * 6 + k * 2));\n    P.spS[q] = clamp(0.55 - 0.55 * dy + 0.12 * dx + (d > edge - 0.2 && dy \u003c 0 ? 0.25 : 0), 0, 1);\n  }\n  P.stars = Array.from({ length: 240 }, () => [floor(rnd() * W), 30 + rnd() * 620, 0.25 + 0.75 * rnd() ** 3]);\n  P.shore = Array.from({ length: W }, (_, x) => 3 + 1.2 * sin(x * 0.7) * sin(x * 0.23 + 1) + (x % 11 \u003c 3 ? 1.8 : 0) + (x > 52 ? 1.2 : 0));\n}\n\nfunction newRocket(P, T) {\n  [P.T, P.np, P.pt] = [T, 0, null];\n}\n\nfunction emit(P, ...v) {\n  if (P.np \u003c MAXP) P.pa.set([...v.slice(0, 6), 0, ...v.slice(6), floor(rnd() * 4)], P.np++ * PF);\n}\n\nfunction times(n, fn) {\n  for (let c = n; c > 0 && (c >= 1 || rnd() \u003c c); c--) fn();\n}\n\nfunction step(P, h) {\n  P.T += h;\n  if (P.T > 25) return newRocket(P, -10);\n  const T = P.T, V = vehicle(P), sty = P.style, F = fly(P, V, T), C = camera(V, T, F), s = F.s, sa = sin(F.a), ca = cos(F.a);\n  // Before ignition liquid oxygen boils off and falls down the tanks.\n  if (T \u003c IGN[sty] + 0.4 && sty !== 3)\n    for (const S of V.st)\n      times(S.fuel === 2 ? 0 : h * 34, () => {\n        const sd = rnd() \u003c 0.6 ? 1 : -1;\n        emit(P, F.x + sd * (S.segs.at(-1)[3] - 0.3), F.e + S.u + S.len * (0.35 + 0.6 * rnd()), sd * (0.8 + 2.5 * rnd()), -3 - 5 * rnd(), 0.6, 1.5, 1.4 + rnd(), 0.2, 0, 0.95, 0.4);\n      });\n  if (F.f > 0.02) {\n    const uN = V.st[F.ai].u - V.st[F.ai].bell[0], tl = F.Lf * s * 0.85, tx = F.x + sa * (uN * s - tl), tz = F.e + ca * (uN * s - tl), fu = FUEL[F.fuel];\n    // Steam rolls out of the trench both ways and up round the rocket.\n    if (tz \u003c 24 && F.E \u003c 40)\n      times(55 * STEAM[sty] * (0.25 + 0.35 * P.n) * F.f * (1 - F.E / 40) * h, () => {\n        const sd = rnd() \u003c 0.5 ? -1 : 1;\n        if (rnd() \u003c 0.72) emit(P, X0 + sd * (8 + 2 * rnd()), 1 + rnd() * 2, sd * (18 + 34 * rnd()) * (0.6 + 0.4 * F.f), 3 + 9 * rnd(), 2.2, 3.6 + 2 * rnd(), 16, 0.5, 0.7, 0.95, 0.55);\n        else emit(P, X0 + sd * rnd() * 7, DECK + rnd() * 3, sd * 4 * rnd(), 10 + 16 * rnd(), 2, 2.8, 12, 0.45, 0.9, 0.95, 0.9);\n      });\n    // The trail, laid along the path since the last step.\n    if (T > 0 && tz > DECK + 6) {\n      const [px, pz] = P.pt || [tx, tz], r0 = max(0.6, F.wn * s * 1.05), hi = P.tw * ss(140, 300, tz);\n      const cnt = min(14, ceil(max(hypot(tx - px, tz - pz) / max(0.6, r0 * 0.6), h * 24)));\n      for (let j = 1; j \u003c= cnt; j++) emit(P, px + ((tx - px) * j) / cnt + (rnd() - 0.5) * r0, pz + ((tz - pz) * j) / cnt, (rnd() - 0.5) * 2 * s, -1.5 * s, r0, (1.1 + 1.8 * hi) * sqrt(s + 0.08) * 2, 30, fu[5] * (0.75 + 0.25 * rnd()) * (1 - 0.4 * hi), 1, fu[4], 0.05);\n      P.pt = [tx, tz];\n    }\n  } else P.pt = null;\n  // Puffs spread, rise and thin, and go once below the panel.\n  const pa = P.pa;\n  for (let i = 0; i \u003c P.np; i++) {\n    const o = i * PF, dr = exp(-pa[o + 11] * h);\n    pa[o + 6] += h;\n    pa[o + 2] *= dr;\n    pa[o + 3] = pa[o + 3] * dr + (pa[o + 11] > 0.3 ? 2 * h : 0);\n    pa[o] += (pa[o + 2] + 1.2 + pa[o + 1] * 0.012) * h;\n    pa[o + 1] += pa[o + 3] * h;\n    if (pa[o + 6] > pa[o + 7] || GY + C - pa[o + 1] - pa[o + 4] - pa[o + 5] * sqrt(pa[o + 6]) > 130 || abs(pa[o] - 32) > 62) {\n      pa.copyWithin(o, --P.np * PF, P.np * PF + PF);\n      i--;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.style = clamp(round(k[0]), 0, 3);\n  P.n = clamp(round(k[2]), 1, 3);\n  P.tod = clamp(k[3], 0, 1);\n  // The hour's colours; the sun lingers low at dawn and dusk.\n  const f = P.tod * 3, i = min(2, floor(f)), q = f - i, A = PAL[i], B = PAL[i + 1];\n  P.pal = A.map((v, j) => v + (B[j] - v) * q);\n  P.se = A[23] + (B[23] - A[23]) * (i === 0 ? q * q : i === 1 ? 1 - (1 - q) ** 2 : q);\n  [P.sunI, P.tw, P.lights, P.night] = [P.pal[18], P.pal[19], P.pal[20], ss(0.67, 1, P.tod)];\n  if (!P.started) {\n    P.started = true;\n    // Open 2.3 s before liftoff, with the tanks already venting.\n    for (let j = 0; j \u003c 20; j++) step(P, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.T \u003c IGN[P.style] - 0.3) P.T = IGN[P.style] - 0.3;\n    else if (P.T > 2) newRocket(P, -3);\n  }\n  P.clk += dt;\n  step(P, (dt * clamp(k[1], 0.2, 3)) / 2);\n}\n\n// Lights a surface facing vn across a cylinder, laid over the LED.\nfunction shade(P, p, vn, fl, r, g, b, a) {\n  const c = P.pal, o = p * 3, buf = P.buf, sn = P.sunK * max(0, 0.25 + 0.75 * vn * P.side), am = 1 - 0.28 * vn * vn, fr = 235 * fl * (1 - 0.35 * vn * vn);\n  [r, g, b].forEach((k, j) => (buf[o + j] += (k * (c[12 + j] * am + c[15 + j] * sn + fr + P.G[p] * P.gc[j]) - buf[o + j]) * a));\n}\n\n// Patterned paints: moon rocket stages 1 and 3, V-2 quarters, bands,\n// grey-green, truss.\nfunction albedo(c, u, vn) {\n  if (c === 6) c = (u > 0.5 && u \u003c 7 && vn > -0.1 && vn \u003c 0.5) || (u > 15.5 && u \u003c 17) ? 1 : 0;\n  else if (c === 7) c = u > 5 && u \u003c 8.5 && vn > 0.05 ? 1 : 0;\n  else if (c === 8) c = (floor(u / 6.5) + (vn > 0)) & 1;\n  else if (c === 9) c = u % 7 \u003c 1.4 ? 5 : 0;\n  else if (c > 9) c = c === 10 ? 4 : (floor(u * 1.5) + floor((vn + 1) * 2.5)) & 1 ? 1 : 3;\n  return PAINT[c];\n}\n\n// One body from its foot at (b.x, b.y), leaning b.ang, at scale b.sc.\nfunction body(P, b) {\n  const sa = sin(b.ang), ca = cos(b.ang), sc = b.sc, fl = b.flame, buf = P.buf;\n  let u0 = 0, u1 = 0, hm = 0;\n  for (const g of b.segs) [u0, u1, hm] = [min(u0, g[0]), max(u1, g[1]), max(hm, g[2], g[3])];\n  hm += b.fins.length ? 3.5 : 0;\n  const fu = u0;\n  if (fl) [u0, hm] = [u0 - fl.Lf * 3.2, max(hm + 5, fl.wn + (fl.k + 0.12) * fl.Lf * 3.2 + 1)];\n  const m = (u0 + u1) / 2, cx = b.x + m * sa * sc, cy = b.y - m * ca * sc, R = hypot((u1 - u0) / 2, hm) * sc + 2;\n  const fc = fl && FUEL[fl.fuel], flood = P.lights * 0.9 * exp(-b.E / 45);\n  for (let y = max(0, floor(cy - R)); y \u003c= min(H - 1, ceil(cy + R)); y++)\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const dx = x + 0.5 - b.x, dy = b.y - (y + 0.5), p = y * W + x;\n      const u = (dx * sa + dy * ca) / sc, v = (dx * ca - dy * sa) / sc, av = abs(v);\n      let seg = null;\n      for (const g of b.segs) if (u >= g[0] && u \u003c g[1]) seg = g;\n      if (seg) {\n        const hw = seg[2] + ((seg[3] - seg[2]) * (u - seg[0])) / (seg[1] - seg[0]);\n        let cov = clamp((hw - av) * sc + 0.5, 0, 1), vn = clamp(v / max(0.3, hw), -1, 1), c = seg[4], uu = u - seg[5];\n        if (cov \u003c= 0)\n          for (const f of b.fins)\n            if (u >= f[0] && u \u003c f[1]) {\n              const cf = clamp((hw + f[2] * (1 - (u - f[0]) / (f[1] - f[0])) - av) * sc + 0.5, 0, 1);\n              if (cf > cov) [cov, vn, c, uu] = [cf, v > 0 ? 0.6 : -0.6, f[3], u - f[4]];\n            }\n        const A = albedo(c, uu, vn), hc = hw + 0.6 + (b.uq + 0.5 - u) * 0.6;\n        if (cov > 0) shade(P, p, vn, flood, A[0], A[1], A[2], cov * b.al);\n        // Max-Q: a collar of condensation round the body.\n        else if (b.q > 0 && u > b.uq - 7 && u \u003c b.uq + 0.5 && av \u003c hc) shade(P, p, v / hc, 0.4, 1, 1, 1, b.q * 0.95 * ss(0, 1.2, b.uq + 0.5 - u) * (1 - (av / hc) ** 3) * (0.75 + 0.25 * sin(u * 3 + P.clk * 40)));\n        continue;\n      }\n      // The flame, clipped where it meets the deck.\n      if (!fl || u >= fu || GY + P.Ci - y - 0.5 \u003c DECK + 0.5) continue;\n      const ue = fu - u, q = av / (fl.wn * 0.85 + (fl.k + 0.12) * ue);\n      if (q >= 1.2) continue;\n      const I = (exp(-ue / fl.Lf) * max(0, 1 - q * q) * (fl.fuel === 0 && b.E \u003c 140 ? 0.8 + 0.3 * cos((ue * 2.4) / fl.wn) : 1) * fl.f) / (1 + fl.k * 1.2);\n      const core = exp(-ue / (fl.Lf * 0.35)) * max(0, 1 - q * 1.7) * fl.f;\n      const tt = min(1, I * 0.9 + core) * 2, br = min(1.2, I * 1.7 + core), A = fc[tt \u003c 1 ? 2 : 1], B = fc[tt \u003c 1 ? 1 : 0], w = tt \u003c 1 ? tt : tt - 1;\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += (A[j] + (B[j] - A[j]) * w) * br;\n    }\n}\n\n// The cluster's boosters; at 7.5 s the side ones pivot out and fall.\nfunction boosters(P, V, T, F, sides) {\n  const dt = T - 7.5, sep = dt > 0, S0 = sep ? fly(P, V, 7.5) : F;\n  if (dt > 5) return;\n  const drop = sep ? ((fly(P, V, 7.55).E - S0.E) / 0.05) * 1.1 * (1 - exp(-dt / 1.1)) : 0;\n  for (const sd of sides) {\n    const off = sd * 3.7 * S0.s;\n    body(P, { segs: BOOST, fins: [], x: S0.x + cos(S0.a) * off + (sep ? sd * 2 * dt : 0), y: GY + P.Ci - S0.e - drop + sin(S0.a) * off, ang: S0.a + sd * (sep ? 0.35 + 0.9 * dt : -0.05), sc: S0.s / (1 + (sep ? 0.06 * dt : 0)), al: 1 - ss(3, 5, max(0, dt)), E: sep ? 300 : F.E });\n  }\n}\n\nfunction sky(P) {\n  const c = P.pal, buf = P.buf, Ci = P.Ci, sx = c[22], se = P.se, sr = c[24], sunA = 1 - P.night, sk = [0, 0, 0], bi = P.lights * (0.25 + 0.75 * P.night) * 55;\n  for (let y = 0; y \u003c H; y++) {\n    const a = GY + Ci - y - 6, e = a + 6, gl = sunA * 0.55 * exp(-abs(e - se) / 26);\n    const [A, B, q] = a \u003c 22 ? [0, 3, max(0, a) / 22] : a \u003c 100 ? [3, 6, (a - 22) / 78] : a \u003c 240 ? [6, 9, (a - 100) / 140] : [9, -1, min(1, (a - 240) / 180)];\n    for (let j = 0; j \u003c 3; j++) sk[j] = c[A + j] + ((B \u003c 0 ? 0 : c[B + j]) - c[A + j]) * q;\n    // The sun's glow and disc, and searchlights from the pad.\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, dx = x + 0.5 - sx, g = gl * exp(-(dx * dx) / 420), disc = sr > 0 ? sunA * clamp(sr - hypot(dx, e - se) + 0.5, 0, 1) : 0;\n      let v = 0;\n      if (bi > 1 && e > 0)\n        for (const [bx, sn, cs] of BEAMS) {\n          const d = x + 0.5 - bx, al = d * sn + e * cs, pp = d * cs - e * sn, w = 1.2 + al * 0.035;\n          v += (bi * exp(-(pp * pp) / (w * w))) / (1 + al / 160);\n        }\n      for (let j = 0; j \u003c 3; j++) buf[o + j] = sk[j] + c[15 + j] * g + (c[15 + j] * 0.8 + 50) * disc + v * [0.75, 0.82, 1][j];\n    }\n  }\n  // Stars come out as the sky darkens.\n  P.stars.forEach(([x, e, m], i) => {\n    const y = GY + Ci - floor(e), v = m * (c[21] + (1 - c[21]) * ss(250, 420, e)) * (0.8 + 0.2 * sin(P.clk * 3 + i)) * 235, o = (y * W + x) * 3;\n    if (y >= 0 && y \u003c H) for (let j = 0; j \u003c 3; j++) buf[o + j] += v * (j > 1 ? 1 : 0.9);\n  });\n}\n\n// A lit beam between two points, in rows above the shoreline.\nfunction line(P, x0, e0, x1, e1, w, r, g, b, fl) {\n  const Ci = P.Ci, dx = x1 - x0, de = e1 - e0, l2 = dx * dx + de * de || 1;\n  for (let y = max(0, floor(GY + Ci - max(e0, e1) - w)); y \u003c= min(H - 1, ceil(GY + Ci - min(e0, e1) + w)); y++)\n    for (let x = max(0, floor(min(x0, x1) - w)); x \u003c= min(W - 1, ceil(max(x0, x1) + w)); x++) {\n      const px = x + 0.5 - x0, pe = GY + Ci - y - 0.5 - e0, t = clamp((px * dx + pe * de) / l2, 0, 1), a = clamp(w * 0.5 - hypot(px - dx * t, pe - de * t) + 0.5, 0, 1);\n      if (a > 0) shade(P, y * W + x, 0, fl, r, g, b, a);\n    }\n}\n\n// Shore, pad, the moon rocket's tower and arms, the sounding rocket's rail.\nfunction pad(P, V, T) {\n  const Ci = P.Ci, sty = P.style, tl = P.lights * 0.5, th = DECK + V.L + 6, tx0 = X0 - 19, tx1 = X0 - 10, buf = P.buf;\n  for (let y = max(0, GY + Ci - 90); y \u003c= min(H - 1, GY + Ci); y++) {\n    const e = GY + Ci - y;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, k = e === 4 ? 0.62 : 0.45, q = 0.2 + ((x * 7 + e * 3) % 5) * 0.012, i = x - tx0, j = e % 9;\n      if (e \u003c= 4 && abs(x + 0.5 - X0) \u003c 11 - e * 1.2) shade(P, p, (x + 0.5 - X0) / 14, tl, k, k, k, 1);\n      else if (e \u003c= P.shore[x]) shade(P, p, 0, 0, q * 0.9, q, q * 0.8, 1);\n      else if (e \u003c= 6) for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] = P.pal[j] * 0.55 + buf[p * 3 + j] * 0.2;\n      // The tower: an X-braced lattice with a hammerhead crane on top.\n      if (sty || e \u003c= 0) continue;\n      if ((i >= 0 && x \u003c= tx1 && e \u003c= th && (i === 0 || i === 9 || j === 0 || i === j || i === 9 - j)) || (e >= th && e \u003c= th + 1 && i >= -2 && x \u003c= X0 + 2) || (e > th + 1 && e \u003c= th + 3 && i >= 2 && i \u003c= 5)) shade(P, p, i / 9 - 0.5, tl, 0.52, 0.54, 0.6, 1);\n      if (e === th + 4 && (i === 3 || x === X0 + 2) && sin(P.clk * 5) > 0) buf.set([255, 40, 30], p * 3);\n    }\n  }\n  // Swing arms to the stage joints and the capsule; the crew arm leaves first.\n  if (sty === 0)\n    V.st.map((s) => s.u + s.len - 1.5).concat([V.L - 11]).forEach((u, i, lv) => {\n      const t0 = i === lv.length - 1 ? -6 : 0.1 + i * 0.25, reach = (X0 - 4.3 - tx1) * (1 - ss(t0, t0 + 1.4, T));\n      if (reach > 0.3) line(P, tx1 + 0.5, DECK + 2.5 + u, tx1 + 0.5 + reach, DECK + 2.5 + u, 1.8, 0.5, 0.52, 0.58, tl);\n    });\n  if (sty === 3) line(P, X0 - 2.2, DECK, X0 - 2.2 + sin(LEAN[3]) * V.L * 0.8, DECK + cos(LEAN[3]) * V.L * 0.8, 1.8, 0.55, 0.55, 0.6, tl);\n}\n\n// Puffs add density, shading, heat, sunlight and whiteness; then the smoke\n// is lit.\nfunction smoke(P) {\n  const { D, spD, spS, buf, G, gc, pa, Ci, pal: c } = P;\n  D.fill(0);\n  for (let i = 0; i \u003c P.np; i++) {\n    const o = i * PF, ag = pa[o + 6], r = max(0.9, min(16, pa[o + 4] + pa[o + 5] * sqrt(ag))), cx = pa[o], cy = GY + Ci - pa[o + 1], life = pa[o + 7];\n    const a = (pa[o + 8] * min(1, ag * 12) * (1 - ss(life * 0.4, life, ag)) * 2) / (1 + r * 0.08);\n    const L = [0, pa[o + 9] * exp(-ag / 0.3), min(1, P.sunI + P.tw * ss(140, 300, pa[o + 1])), pa[o + 10]], k = pa[o + 12] * SP * SP;\n    for (let y = max(0, ceil(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r - 0.5)); y++)\n      for (let x = max(0, ceil(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r - 0.5)); x++) {\n        const sx = floor(((x + 0.5 - cx) / r) * 0.5 * SP + SP / 2), sy = floor(((y + 0.5 - cy) / r) * 0.5 * SP + SP / 2), q = k + sy * SP + sx, d = spD[q] * a;\n        if (sx \u003c 0 || sx >= SP || sy \u003c 0 || sy >= SP || d \u003c= 0.001) continue;\n        const p = (y * W + x) * 5;\n        D[p] += d;\n        D[p + 1] += d * spS[q];\n        for (let j = 1; j \u003c 4; j++) D[p + j + 1] += d * L[j];\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const d = D[p * 5];\n    if (d \u003c 0.004) continue;\n    const sh = D[p * 5 + 1] / d, he = min(1.4, D[p * 5 + 2] / d), sn = (D[p * 5 + 3] / d) * (0.3 + 0.8 * sh) * (0.6 + 0.4 * P.sunI), ab = D[p * 5 + 4] / d;\n    const al = 1 - exp(-1.7 * d), am = 0.5 + 0.55 * sh, fl = P.lights * 75 * exp(-max(0, GY + Ci - ((p / W) | 0)) / 60), g = G[p] * 1.25;\n    for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += (ab * (c[12 + j] * am + c[15 + j] * sn + fl + g * gc[j]) + he * gc[j] * 0.9 - buf[p * 3 + j]) * al;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, V = vehicle(P), T = P.T, buf = P.buf, c = P.pal, G = P.G;\n  const F = fly(P, V, T), Ci = (P.Ci = round(camera(V, T, F))), s = F.s, sa = sin(F.a), ca = cos(F.a), fu = FUEL[F.fuel];\n  P.side = clamp((c[22] - X0) / 25, -1, 1);\n  P.sunK = P.sunI + P.tw * 0.7 * ss(60, 260, F.E);\n  // The engines' glow.\n  const uo = V.st[F.ai].u, uN = uo - V.st[F.ai].bell[0], nx = F.x + sa * uN * s, ny = GY + Ci - F.e - ca * uN * s, gx = nx - sa * F.Lf * s * 0.4, gy = ny + ca * F.Lf * s * 0.4;\n  const flick = 0.85 + 0.15 * sin(P.clk * 31) * sin(P.clk * 17.3 + 1), near = 1 - ss(10, 60, F.E);\n  const gr = ((6 + 8 * F.wn * s) * (1 + 1.6 * near)) ** 2, gi = F.f * flick * (F.fuel === 1 ? 0.35 : 1) * (0.55 + 0.6 * near) * (F.ai ? 1 : 0.5 + 0.25 * P.n) * (0.7 + 0.5 * P.night);\n  P.gc = fu[3];\n  for (let p = 0; p \u003c N; p++) G[p] = gi > 0.01 ? (gi * gr) / (gr + ((p % W) + 0.5 - gx) ** 2 + (((p / W) | 0) + 0.5 - gy) ** 2) : 0;\n  sky(P);\n  pad(P, V, T);\n  // Spent stages fall behind and tumble.\n  V.sep.forEach((ts, i) => {\n    const dt = T - ts, S0 = fly(P, V, ts), u = V.st[i].u * S0.s;\n    if (dt > 0 && dt \u003c 5) body(P, { ...stack(V, i, i + 1), x: S0.x + sin(S0.a) * u + 2 * dt, y: GY + Ci - S0.e - cos(S0.a) * u - ((fly(P, V, ts + 0.05).E - S0.E) / 0.05) * 1.1 * (1 - exp(-dt / 1.1)), ang: S0.a + 0.45 * dt, sc: S0.s / (1 + 0.06 * dt), al: 1 - ss(3, 5, dt), E: 300 });\n  });\n  if (V.boost) boosters(P, V, T, F, [-1, 1]);\n  // The rocket from its lowest burning stage up.\n  body(P, { ...stack(V, F.ai, V.n), x: F.x + sa * uo * s, y: GY + Ci - F.e - ca * uo * s, ang: F.a, sc: s, al: 1, E: F.E, q: ss(6.2, 6.7, T) * (1 - ss(7.6, 8.3, T)), uq: (V.L - uo) * 0.5, flame: { wn: F.wn, Lf: max(0.01, F.Lf * flick), k: F.k, f: F.f, fuel: F.fuel } });\n  if (V.boost) boosters(P, V, T, F, [0]);\n  // Far off, the flame is a bright point.\n  if (s * F.wn \u003c 1.4 && F.f > 0.05)\n    for (let p = 0; p \u003c N; p++) {\n      const a = 1.1 * F.f * exp(-(((p % W) + 0.5 - nx) ** 2 + (((p / W) | 0) + 0.5 - ny) ** 2) / (0.9 + 0.5 * s * F.wn) ** 2);\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += fu[1][j] * a;\n    }\n  smoke(P);\n  // The water in front mirrors everything above the shoreline.\n  for (let y = max(0, GY + Ci); y \u003c H; y++) {\n    const sy = clamp(2 * (GY + Ci) - 1 - y, 0, H - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, so = (sy * W + x) * 3, rp = 0.5 + 0.1 * sin(y * 2.1 + x * 0.3 - P.clk * 3);\n      for (let k = 0; k \u003c 3; k++) buf[o + k] = buf[so + k] * rp + c[k] * 0.12 + G[y * W + x] * P.gc[k] * 0.25;\n    }\n  }\n  // The clock.\n  const tc = T \u003c 0 ? ceil(-T) : floor(T);\n  [10, T \u003c 0 ? 11 : 12, floor(tc / 10) % 10, tc % 10].forEach((ch, i) => {\n    for (let r = 0; r \u003c 15; r++) if ((FONT[ch] >> (14 - r)) & 1) buf.set([255, 196, 70], ((2 + floor(r / 3)) * W + 2 + i * 4 + (r % 3)) * 3);\n  });\n  const fade = ss(-10, -9.3, T) * (1 - ss(23.8, 25, T));\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o] * fade), min(255, buf[o + 1] * fade), min(255, buf[o + 2] * fade));\n}\n","layer":{"id":"layer-liftoff","type":"code","name":"liftoff","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Liftoff\n// Family:  flight\n// Idea:    A rocket vents on its pad across the water, lights up in rolling steam and climbs while the camera tilts after it from blue sky into black and stars, through Max-Q and staging, until it is a bright dot and the next rocket stands on the pad.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after long-lens tracking shots of launches filmed across the water from the press site\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Rocket=0..3, Speed=0.2..3, Stages=1..3, Time=0..1\n//\n// Knob 1: Rocket. A white moon rocket by its tower at 0, a chequered V-2 at 1, a grey-green cluster whose boosters fall away in a cross at 2, a sounding rocket on a rail at 3.\n// Knob 2: Speed. At 2 the countdown, the flight and the next rocket take 35 s; at 0.2 ten times longer.\n// Knob 3: Stages. 1 to 3 stages. A taller stack gets a taller tower and more steam, and each extra stage drops away on the climb.\n// Knob 4: Time. Dawn at 0, then day, dusk and a floodlit night with searchlights. At dawn and dusk the high plume catches the sun.\n// Buttons: K1 tap skips the countdown to ignition, or after liftoff rolls out the next rocket.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Shoreline row with the camera level, pad column, deck height.\nconst GY = 112;\nconst X0 = 36;\nconst DECK = 4;\nconst MAXP = 900;\n// A puff: x, height, vx, vz, radius, growth, age, life, opacity, heat,\n// whiteness, drag, sprite.\nconst PF = 13;\nconst SP = 24;\nconst { min, max, abs, sin, cos, exp, sqrt, floor, round, ceil, atan2, hypot } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ss = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Dawn, day, dusk, night: four sky colours, ambient, sun colour; sun on the\n// rocket, on the high plume, floodlights, stars, sun column, height, radius.\nconst PAL = [\n  [255, 150, 90, 200, 135, 150, 80, 105, 190, 22, 36, 110, 80, 88, 125, 255, 175, 120, 0.3, 1, 0.75, 0.15, 56, 0, 3.5],\n  [200, 222, 245, 140, 190, 240, 55, 135, 230, 15, 55, 165, 175, 185, 200, 255, 250, 235, 1, 0, 0, 0, 12, 190, 3.5],\n  [255, 115, 55, 185, 85, 115, 70, 55, 140, 18, 18, 70, 95, 72, 100, 255, 135, 75, 0.35, 1, 0.6, 0.3, 8, 3, 4],\n  [22, 34, 62, 14, 22, 50, 7, 12, 34, 3, 5, 16, 30, 34, 55, 0, 0, 0, 0, 0.1, 1, 1, 30, -40, 0],\n];\n// Kerosene, hydrogen, solid: flame core, middle, edge, glow; trail\n// whiteness and thickness.\nconst FUEL = [\n  [[255, 246, 215], [255, 196, 80], [235, 105, 30], [255, 140, 55], 0.62, 0.75],\n  [[235, 240, 255], [170, 180, 255], [120, 110, 230], [130, 150, 255], 0.95, 0.22],\n  [[255, 252, 240], [255, 225, 150], [250, 160, 70], [255, 190, 120], 0.95, 0.95],\n];\nconst ACC = [1, 1.15, 1.05, 1.7];\nconst LEAN = [0, 0, 0, 0.12];\nconst STEAM = [1, 0.55, 0.9, 0.35];\nconst IGN = [-2, -1.6, -2.2, -0.12];\n// White, black, engine bells, bare metal, grey-green, orange.\nconst PAINT = [[0.9, 0.9, 0.88], [0.08, 0.08, 0.08], [0.24, 0.21, 0.2], [0.66, 0.69, 0.74], [0.62, 0.67, 0.58], [0.95, 0.42, 0.12]];\n// 3x5 letters: 0-9, T, minus, plus.\nconst FONT = [31599, 11415, 29671, 29647, 23497, 31183, 31215, 29330, 31727, 31695, 29842, 448, 1488];\nconst BEAMS = [[3, 0.32], [62, -0.3], [22, 0.06]].map(([b, a]) => [b, sin(a), cos(a)]);\nconst BOOST = [[-1.4, 0, 1.9, 1.4, 2, 0], [0, 1, 2.1, 2.05, 1, 0], [1, 13, 2.05, 1.1, 10, 0], [13, 18, 1.1, 0, 10, 0]];\n\n// Stages from the bottom: length, segments [u0, u1, half widths, paint],\n// bell [length, half widths], nozzle, fuel, fins [u0, u1, span, paint].\nfunction build(sty, n) {\n  const S = (len, segs, bell, wn, fuel, fins = []) => ({ len, segs, bell, wn, fuel, fins });\n  const a = 20 + (3 - n) * 2.5, b = n > 1 ? 26 : 29;\n  const st = [\n    [S(a, [[0, a, 4.5, 4.5, 6]], [2.5, 4.4, 3.4], 4.3, 0, [[0, 5, 2.4, 1]]), S(13, [[0, 1, 4.5, 4.5, 1], [1, 13, 4.5, 4.5, 0]], [1.5, 3, 2.2], 3, 1), S(10, [[0, 3, 4.5, 3.3, 0], [3, 10, 3.3, 3.3, 7]], [1.2, 1.8, 1.2], 1.6, 1)],\n    [S(b, [[0, 20, 3.2, 3.4, 8], [20, b, 3.4, n > 1 ? 1.4 : 0, 8]], [1.5, 2.4, 1.8], 2.2, 0, [[0, 7, 3.4, 8]]), S(12, [[0, 12, 1.4, 1.4, 0]], [0.8, 1.1, 0.8], 1, 2, [[0, 3, 1.7, 1]]), S(8, [[0, 8, 1.1, 1.1, 9]], [0.7, 0.9, 0.6], 0.8, 2, [[0, 2.5, 1.2, 5]])],\n    [S(28, [[0, 26, 2.2, 2.8, 10], [26, 28, 2.8, 2.5, 10]], [1.5, 2.2, 1.6], 2.2, 0), S(10, [[0, 2, 2.4, 2.4, 11], [2, 10, 2.6, 2.6, 10]], [1.2, 1.8, 1.2], 1.6, 0), S(4, [[0, 4, 2.6, 2.6, 3]], [0.8, 1.2, 0.8], 1, 1)],\n    [S(15, [[0, 15, 1.7, 1.7, 9]], [1, 1.4, 1.1], 1.4, 2, [[0, 4.5, 2.6, 5]]), S(12, [[0, 1.5, 1.7, 1.3, 1], [1.5, 12, 1.3, 1.3, 9]], [0.8, 1.1, 0.8], 1.1, 2, [[1.5, 4, 1.7, 5]]), S(9, [[0, 9, 1.1, 1.1, 9]], [0.6, 0.9, 0.6], 0.8, 2, [[0, 2.5, 1.2, 5]])],\n  ][sty].slice(0, n);\n  const last = st[n - 1], top = last.segs.at(-1)[3];\n  last.nose = sty === 0 ? [[0, 4, top, 2.6, 3], [4, 7, 2.6, 0.7, 0], [7, 11, 0.45, 0.45, 5], [11, 13, 0.9, 0.9, 5], [13, 14, 0.9, 0.1, 5]] : sty === 2 ? [[0, 5, 3.2, 3.2, 0], [5, 9, 3.2, 1.4, 0], [9, 10, 1.4, 0.5, 0], [10, 14, 0.4, 0.4, 5], [14, 16, 0.8, 0.8, 5], [16, 17, 0.8, 0, 5]] : top > 0 ? [[0, sty === 3 ? 6 : 4, top, 0, 0]] : [];\n  let u = 0;\n  for (const s of st) [s.u, u] = [u, u + s.len];\n  return { st, n, L: u + (last.nose.length && last.nose.at(-1)[1]), sep: st.slice(1).map((_, i) => (sty === 2 ? 11.5 + i * 4.5 : 9.5 + i * 5)), boost: sty === 2 };\n}\n\n// Stages a..b-1 end to end from 0, with stage a's bell below.\nfunction stack(V, a, b) {\n  const segs = [], fins = [], u0 = V.st[a].u, bl = V.st[a].bell;\n  segs.push([-bl[0], 0, bl[1], bl[2], 2, 0]);\n  for (let i = a; i \u003c b; i++) {\n    const s = V.st[i], o = s.u - u0, t = o + s.len;\n    for (const g of s.segs) segs.push([g[0] + o, g[1] + o, g[2], g[3], g[4], o]);\n    for (const f of s.fins) fins.push([f[0] + o, f[1] + o, f[2], f[3], o]);\n    if (s.nose) for (const g of s.nose) segs.push([g[0] + t, g[1] + t, g[2], g[3], g[4], t]);\n  }\n  return { segs, fins };\n}\n\nconst vehicle = (P) => P.vc[P.style * 4 + P.n] || (P.vc[P.style * 4 + P.n] = build(P.style, P.n));\n\n// The stack's foot at flight time T, and its engines.\nfunction fly(P, V, T) {\n  const sty = P.style, t = max(0, T), g = ACC[sty], E = g * 512 * (1 - exp((-t * t) / 128));\n  let ai = 0, f = ss(IGN[sty], IGN[sty] + 0.6, T);\n  for (const ts of V.sep) {\n    if (T >= ts) ai++;\n    f *= 1 - ss(ts - 0.3, ts, T) + ss(ts + 0.7, ts + 1.1, T);\n  }\n  const bo = V.boost && T \u003c 7.5, S = V.st[ai], wn = bo ? 6.2 : S.wn;\n  return { E, ai, f, wn, s: 1 / (1 + 0.001 * g * t * t * t), a: LEAN[sty] + 0.2 * ss(3, 16, t), x: X0 + 6 * ss(3, 20, t) + (sty === 3 ? 0.12 * min(E, 70) : 0), e: DECK + V.st[0].bell[0] + E, Lf: wn * (S.fuel === 2 ? 4.2 : 3.2) * (1 + E / 260) * f, k: 0.12 + min(0.9, E / 500) * (S.fuel === 1 ? 1.4 : 1), fuel: bo ? 0 : S.fuel };\n}\n\n// The camera's tilt in rows keeps the nose near the top, then lets the\n// shrinking rocket climb.\nfunction camera(V, T, F) {\n  const d = F.E - (GY - DECK - V.st[0].bell[0] - V.L * F.s - 15 + 9 * ss(12, 23, T)), h = max(14 - abs(d), 0) / 14;\n  return max(0, d) + h * h * 3.5;\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), G: F(N), D: F(N * 5), pa: F(MAXP * PF), spD: F(4 * SP * SP), spS: F(4 * SP * SP), vc: {}, started: false, T: -4.3, np: 0, clk: 0, pt: null });\n  // Lumpy puffs lit from above.\n  for (let q = 0; q \u003c 4 * SP * SP; q++) {\n    const k = floor(q / (SP * SP)), dx = (((q % SP) + 0.5) / SP) * 2 - 1, dy = (((floor(q / SP) % SP) + 0.5) / SP) * 2 - 1;\n    const d = hypot(dx, dy), an = atan2(dy, dx), edge = 0.8 + 0.1 * sin(5 * an + k * 1.7) + 0.07 * sin(9 * an + k * 2.9) + 0.04 * sin(13 * an + k);\n    P.spD[q] = ss(edge, edge - 0.45, d) * (0.78 + 0.22 * sin(dx * 7 + k) * sin(dy * 6 + k * 2));\n    P.spS[q] = clamp(0.55 - 0.55 * dy + 0.12 * dx + (d > edge - 0.2 && dy \u003c 0 ? 0.25 : 0), 0, 1);\n  }\n  P.stars = Array.from({ length: 240 }, () => [floor(rnd() * W), 30 + rnd() * 620, 0.25 + 0.75 * rnd() ** 3]);\n  P.shore = Array.from({ length: W }, (_, x) => 3 + 1.2 * sin(x * 0.7) * sin(x * 0.23 + 1) + (x % 11 \u003c 3 ? 1.8 : 0) + (x > 52 ? 1.2 : 0));\n}\n\nfunction newRocket(P, T) {\n  [P.T, P.np, P.pt] = [T, 0, null];\n}\n\nfunction emit(P, ...v) {\n  if (P.np \u003c MAXP) P.pa.set([...v.slice(0, 6), 0, ...v.slice(6), floor(rnd() * 4)], P.np++ * PF);\n}\n\nfunction times(n, fn) {\n  for (let c = n; c > 0 && (c >= 1 || rnd() \u003c c); c--) fn();\n}\n\nfunction step(P, h) {\n  P.T += h;\n  if (P.T > 25) return newRocket(P, -10);\n  const T = P.T, V = vehicle(P), sty = P.style, F = fly(P, V, T), C = camera(V, T, F), s = F.s, sa = sin(F.a), ca = cos(F.a);\n  // Before ignition liquid oxygen boils off and falls down the tanks.\n  if (T \u003c IGN[sty] + 0.4 && sty !== 3)\n    for (const S of V.st)\n      times(S.fuel === 2 ? 0 : h * 34, () => {\n        const sd = rnd() \u003c 0.6 ? 1 : -1;\n        emit(P, F.x + sd * (S.segs.at(-1)[3] - 0.3), F.e + S.u + S.len * (0.35 + 0.6 * rnd()), sd * (0.8 + 2.5 * rnd()), -3 - 5 * rnd(), 0.6, 1.5, 1.4 + rnd(), 0.2, 0, 0.95, 0.4);\n      });\n  if (F.f > 0.02) {\n    const uN = V.st[F.ai].u - V.st[F.ai].bell[0], tl = F.Lf * s * 0.85, tx = F.x + sa * (uN * s - tl), tz = F.e + ca * (uN * s - tl), fu = FUEL[F.fuel];\n    // Steam rolls out of the trench both ways and up round the rocket.\n    if (tz \u003c 24 && F.E \u003c 40)\n      times(55 * STEAM[sty] * (0.25 + 0.35 * P.n) * F.f * (1 - F.E / 40) * h, () => {\n        const sd = rnd() \u003c 0.5 ? -1 : 1;\n        if (rnd() \u003c 0.72) emit(P, X0 + sd * (8 + 2 * rnd()), 1 + rnd() * 2, sd * (18 + 34 * rnd()) * (0.6 + 0.4 * F.f), 3 + 9 * rnd(), 2.2, 3.6 + 2 * rnd(), 16, 0.5, 0.7, 0.95, 0.55);\n        else emit(P, X0 + sd * rnd() * 7, DECK + rnd() * 3, sd * 4 * rnd(), 10 + 16 * rnd(), 2, 2.8, 12, 0.45, 0.9, 0.95, 0.9);\n      });\n    // The trail, laid along the path since the last step.\n    if (T > 0 && tz > DECK + 6) {\n      const [px, pz] = P.pt || [tx, tz], r0 = max(0.6, F.wn * s * 1.05), hi = P.tw * ss(140, 300, tz);\n      const cnt = min(14, ceil(max(hypot(tx - px, tz - pz) / max(0.6, r0 * 0.6), h * 24)));\n      for (let j = 1; j \u003c= cnt; j++) emit(P, px + ((tx - px) * j) / cnt + (rnd() - 0.5) * r0, pz + ((tz - pz) * j) / cnt, (rnd() - 0.5) * 2 * s, -1.5 * s, r0, (1.1 + 1.8 * hi) * sqrt(s + 0.08) * 2, 30, fu[5] * (0.75 + 0.25 * rnd()) * (1 - 0.4 * hi), 1, fu[4], 0.05);\n      P.pt = [tx, tz];\n    }\n  } else P.pt = null;\n  // Puffs spread, rise and thin, and go once below the panel.\n  const pa = P.pa;\n  for (let i = 0; i \u003c P.np; i++) {\n    const o = i * PF, dr = exp(-pa[o + 11] * h);\n    pa[o + 6] += h;\n    pa[o + 2] *= dr;\n    pa[o + 3] = pa[o + 3] * dr + (pa[o + 11] > 0.3 ? 2 * h : 0);\n    pa[o] += (pa[o + 2] + 1.2 + pa[o + 1] * 0.012) * h;\n    pa[o + 1] += pa[o + 3] * h;\n    if (pa[o + 6] > pa[o + 7] || GY + C - pa[o + 1] - pa[o + 4] - pa[o + 5] * sqrt(pa[o + 6]) > 130 || abs(pa[o] - 32) > 62) {\n      pa.copyWithin(o, --P.np * PF, P.np * PF + PF);\n      i--;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.style = clamp(round(k[0]), 0, 3);\n  P.n = clamp(round(k[2]), 1, 3);\n  P.tod = clamp(k[3], 0, 1);\n  // The hour's colours; the sun lingers low at dawn and dusk.\n  const f = P.tod * 3, i = min(2, floor(f)), q = f - i, A = PAL[i], B = PAL[i + 1];\n  P.pal = A.map((v, j) => v + (B[j] - v) * q);\n  P.se = A[23] + (B[23] - A[23]) * (i === 0 ? q * q : i === 1 ? 1 - (1 - q) ** 2 : q);\n  [P.sunI, P.tw, P.lights, P.night] = [P.pal[18], P.pal[19], P.pal[20], ss(0.67, 1, P.tod)];\n  if (!P.started) {\n    P.started = true;\n    // Open 2.3 s before liftoff, with the tanks already venting.\n    for (let j = 0; j \u003c 20; j++) step(P, 0.1);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.T \u003c IGN[P.style] - 0.3) P.T = IGN[P.style] - 0.3;\n    else if (P.T > 2) newRocket(P, -3);\n  }\n  P.clk += dt;\n  step(P, (dt * clamp(k[1], 0.2, 3)) / 2);\n}\n\n// Lights a surface facing vn across a cylinder, laid over the LED.\nfunction shade(P, p, vn, fl, r, g, b, a) {\n  const c = P.pal, o = p * 3, buf = P.buf, sn = P.sunK * max(0, 0.25 + 0.75 * vn * P.side), am = 1 - 0.28 * vn * vn, fr = 235 * fl * (1 - 0.35 * vn * vn);\n  [r, g, b].forEach((k, j) => (buf[o + j] += (k * (c[12 + j] * am + c[15 + j] * sn + fr + P.G[p] * P.gc[j]) - buf[o + j]) * a));\n}\n\n// Patterned paints: moon rocket stages 1 and 3, V-2 quarters, bands,\n// grey-green, truss.\nfunction albedo(c, u, vn) {\n  if (c === 6) c = (u > 0.5 && u \u003c 7 && vn > -0.1 && vn \u003c 0.5) || (u > 15.5 && u \u003c 17) ? 1 : 0;\n  else if (c === 7) c = u > 5 && u \u003c 8.5 && vn > 0.05 ? 1 : 0;\n  else if (c === 8) c = (floor(u / 6.5) + (vn > 0)) & 1;\n  else if (c === 9) c = u % 7 \u003c 1.4 ? 5 : 0;\n  else if (c > 9) c = c === 10 ? 4 : (floor(u * 1.5) + floor((vn + 1) * 2.5)) & 1 ? 1 : 3;\n  return PAINT[c];\n}\n\n// One body from its foot at (b.x, b.y), leaning b.ang, at scale b.sc.\nfunction body(P, b) {\n  const sa = sin(b.ang), ca = cos(b.ang), sc = b.sc, fl = b.flame, buf = P.buf;\n  let u0 = 0, u1 = 0, hm = 0;\n  for (const g of b.segs) [u0, u1, hm] = [min(u0, g[0]), max(u1, g[1]), max(hm, g[2], g[3])];\n  hm += b.fins.length ? 3.5 : 0;\n  const fu = u0;\n  if (fl) [u0, hm] = [u0 - fl.Lf * 3.2, max(hm + 5, fl.wn + (fl.k + 0.12) * fl.Lf * 3.2 + 1)];\n  const m = (u0 + u1) / 2, cx = b.x + m * sa * sc, cy = b.y - m * ca * sc, R = hypot((u1 - u0) / 2, hm) * sc + 2;\n  const fc = fl && FUEL[fl.fuel], flood = P.lights * 0.9 * exp(-b.E / 45);\n  for (let y = max(0, floor(cy - R)); y \u003c= min(H - 1, ceil(cy + R)); y++)\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const dx = x + 0.5 - b.x, dy = b.y - (y + 0.5), p = y * W + x;\n      const u = (dx * sa + dy * ca) / sc, v = (dx * ca - dy * sa) / sc, av = abs(v);\n      let seg = null;\n      for (const g of b.segs) if (u >= g[0] && u \u003c g[1]) seg = g;\n      if (seg) {\n        const hw = seg[2] + ((seg[3] - seg[2]) * (u - seg[0])) / (seg[1] - seg[0]);\n        let cov = clamp((hw - av) * sc + 0.5, 0, 1), vn = clamp(v / max(0.3, hw), -1, 1), c = seg[4], uu = u - seg[5];\n        if (cov \u003c= 0)\n          for (const f of b.fins)\n            if (u >= f[0] && u \u003c f[1]) {\n              const cf = clamp((hw + f[2] * (1 - (u - f[0]) / (f[1] - f[0])) - av) * sc + 0.5, 0, 1);\n              if (cf > cov) [cov, vn, c, uu] = [cf, v > 0 ? 0.6 : -0.6, f[3], u - f[4]];\n            }\n        const A = albedo(c, uu, vn), hc = hw + 0.6 + (b.uq + 0.5 - u) * 0.6;\n        if (cov > 0) shade(P, p, vn, flood, A[0], A[1], A[2], cov * b.al);\n        // Max-Q: a collar of condensation round the body.\n        else if (b.q > 0 && u > b.uq - 7 && u \u003c b.uq + 0.5 && av \u003c hc) shade(P, p, v / hc, 0.4, 1, 1, 1, b.q * 0.95 * ss(0, 1.2, b.uq + 0.5 - u) * (1 - (av / hc) ** 3) * (0.75 + 0.25 * sin(u * 3 + P.clk * 40)));\n        continue;\n      }\n      // The flame, clipped where it meets the deck.\n      if (!fl || u >= fu || GY + P.Ci - y - 0.5 \u003c DECK + 0.5) continue;\n      const ue = fu - u, q = av / (fl.wn * 0.85 + (fl.k + 0.12) * ue);\n      if (q >= 1.2) continue;\n      const I = (exp(-ue / fl.Lf) * max(0, 1 - q * q) * (fl.fuel === 0 && b.E \u003c 140 ? 0.8 + 0.3 * cos((ue * 2.4) / fl.wn) : 1) * fl.f) / (1 + fl.k * 1.2);\n      const core = exp(-ue / (fl.Lf * 0.35)) * max(0, 1 - q * 1.7) * fl.f;\n      const tt = min(1, I * 0.9 + core) * 2, br = min(1.2, I * 1.7 + core), A = fc[tt \u003c 1 ? 2 : 1], B = fc[tt \u003c 1 ? 1 : 0], w = tt \u003c 1 ? tt : tt - 1;\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += (A[j] + (B[j] - A[j]) * w) * br;\n    }\n}\n\n// The cluster's boosters; at 7.5 s the side ones pivot out and fall.\nfunction boosters(P, V, T, F, sides) {\n  const dt = T - 7.5, sep = dt > 0, S0 = sep ? fly(P, V, 7.5) : F;\n  if (dt > 5) return;\n  const drop = sep ? ((fly(P, V, 7.55).E - S0.E) / 0.05) * 1.1 * (1 - exp(-dt / 1.1)) : 0;\n  for (const sd of sides) {\n    const off = sd * 3.7 * S0.s;\n    body(P, { segs: BOOST, fins: [], x: S0.x + cos(S0.a) * off + (sep ? sd * 2 * dt : 0), y: GY + P.Ci - S0.e - drop + sin(S0.a) * off, ang: S0.a + sd * (sep ? 0.35 + 0.9 * dt : -0.05), sc: S0.s / (1 + (sep ? 0.06 * dt : 0)), al: 1 - ss(3, 5, max(0, dt)), E: sep ? 300 : F.E });\n  }\n}\n\nfunction sky(P) {\n  const c = P.pal, buf = P.buf, Ci = P.Ci, sx = c[22], se = P.se, sr = c[24], sunA = 1 - P.night, sk = [0, 0, 0], bi = P.lights * (0.25 + 0.75 * P.night) * 55;\n  for (let y = 0; y \u003c H; y++) {\n    const a = GY + Ci - y - 6, e = a + 6, gl = sunA * 0.55 * exp(-abs(e - se) / 26);\n    const [A, B, q] = a \u003c 22 ? [0, 3, max(0, a) / 22] : a \u003c 100 ? [3, 6, (a - 22) / 78] : a \u003c 240 ? [6, 9, (a - 100) / 140] : [9, -1, min(1, (a - 240) / 180)];\n    for (let j = 0; j \u003c 3; j++) sk[j] = c[A + j] + ((B \u003c 0 ? 0 : c[B + j]) - c[A + j]) * q;\n    // The sun's glow and disc, and searchlights from the pad.\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, dx = x + 0.5 - sx, g = gl * exp(-(dx * dx) / 420), disc = sr > 0 ? sunA * clamp(sr - hypot(dx, e - se) + 0.5, 0, 1) : 0;\n      let v = 0;\n      if (bi > 1 && e > 0)\n        for (const [bx, sn, cs] of BEAMS) {\n          const d = x + 0.5 - bx, al = d * sn + e * cs, pp = d * cs - e * sn, w = 1.2 + al * 0.035;\n          v += (bi * exp(-(pp * pp) / (w * w))) / (1 + al / 160);\n        }\n      for (let j = 0; j \u003c 3; j++) buf[o + j] = sk[j] + c[15 + j] * g + (c[15 + j] * 0.8 + 50) * disc + v * [0.75, 0.82, 1][j];\n    }\n  }\n  // Stars come out as the sky darkens.\n  P.stars.forEach(([x, e, m], i) => {\n    const y = GY + Ci - floor(e), v = m * (c[21] + (1 - c[21]) * ss(250, 420, e)) * (0.8 + 0.2 * sin(P.clk * 3 + i)) * 235, o = (y * W + x) * 3;\n    if (y >= 0 && y \u003c H) for (let j = 0; j \u003c 3; j++) buf[o + j] += v * (j > 1 ? 1 : 0.9);\n  });\n}\n\n// A lit beam between two points, in rows above the shoreline.\nfunction line(P, x0, e0, x1, e1, w, r, g, b, fl) {\n  const Ci = P.Ci, dx = x1 - x0, de = e1 - e0, l2 = dx * dx + de * de || 1;\n  for (let y = max(0, floor(GY + Ci - max(e0, e1) - w)); y \u003c= min(H - 1, ceil(GY + Ci - min(e0, e1) + w)); y++)\n    for (let x = max(0, floor(min(x0, x1) - w)); x \u003c= min(W - 1, ceil(max(x0, x1) + w)); x++) {\n      const px = x + 0.5 - x0, pe = GY + Ci - y - 0.5 - e0, t = clamp((px * dx + pe * de) / l2, 0, 1), a = clamp(w * 0.5 - hypot(px - dx * t, pe - de * t) + 0.5, 0, 1);\n      if (a > 0) shade(P, y * W + x, 0, fl, r, g, b, a);\n    }\n}\n\n// Shore, pad, the moon rocket's tower and arms, the sounding rocket's rail.\nfunction pad(P, V, T) {\n  const Ci = P.Ci, sty = P.style, tl = P.lights * 0.5, th = DECK + V.L + 6, tx0 = X0 - 19, tx1 = X0 - 10, buf = P.buf;\n  for (let y = max(0, GY + Ci - 90); y \u003c= min(H - 1, GY + Ci); y++) {\n    const e = GY + Ci - y;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, k = e === 4 ? 0.62 : 0.45, q = 0.2 + ((x * 7 + e * 3) % 5) * 0.012, i = x - tx0, j = e % 9;\n      if (e \u003c= 4 && abs(x + 0.5 - X0) \u003c 11 - e * 1.2) shade(P, p, (x + 0.5 - X0) / 14, tl, k, k, k, 1);\n      else if (e \u003c= P.shore[x]) shade(P, p, 0, 0, q * 0.9, q, q * 0.8, 1);\n      else if (e \u003c= 6) for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] = P.pal[j] * 0.55 + buf[p * 3 + j] * 0.2;\n      // The tower: an X-braced lattice with a hammerhead crane on top.\n      if (sty || e \u003c= 0) continue;\n      if ((i >= 0 && x \u003c= tx1 && e \u003c= th && (i === 0 || i === 9 || j === 0 || i === j || i === 9 - j)) || (e >= th && e \u003c= th + 1 && i >= -2 && x \u003c= X0 + 2) || (e > th + 1 && e \u003c= th + 3 && i >= 2 && i \u003c= 5)) shade(P, p, i / 9 - 0.5, tl, 0.52, 0.54, 0.6, 1);\n      if (e === th + 4 && (i === 3 || x === X0 + 2) && sin(P.clk * 5) > 0) buf.set([255, 40, 30], p * 3);\n    }\n  }\n  // Swing arms to the stage joints and the capsule; the crew arm leaves first.\n  if (sty === 0)\n    V.st.map((s) => s.u + s.len - 1.5).concat([V.L - 11]).forEach((u, i, lv) => {\n      const t0 = i === lv.length - 1 ? -6 : 0.1 + i * 0.25, reach = (X0 - 4.3 - tx1) * (1 - ss(t0, t0 + 1.4, T));\n      if (reach > 0.3) line(P, tx1 + 0.5, DECK + 2.5 + u, tx1 + 0.5 + reach, DECK + 2.5 + u, 1.8, 0.5, 0.52, 0.58, tl);\n    });\n  if (sty === 3) line(P, X0 - 2.2, DECK, X0 - 2.2 + sin(LEAN[3]) * V.L * 0.8, DECK + cos(LEAN[3]) * V.L * 0.8, 1.8, 0.55, 0.55, 0.6, tl);\n}\n\n// Puffs add density, shading, heat, sunlight and whiteness; then the smoke\n// is lit.\nfunction smoke(P) {\n  const { D, spD, spS, buf, G, gc, pa, Ci, pal: c } = P;\n  D.fill(0);\n  for (let i = 0; i \u003c P.np; i++) {\n    const o = i * PF, ag = pa[o + 6], r = max(0.9, min(16, pa[o + 4] + pa[o + 5] * sqrt(ag))), cx = pa[o], cy = GY + Ci - pa[o + 1], life = pa[o + 7];\n    const a = (pa[o + 8] * min(1, ag * 12) * (1 - ss(life * 0.4, life, ag)) * 2) / (1 + r * 0.08);\n    const L = [0, pa[o + 9] * exp(-ag / 0.3), min(1, P.sunI + P.tw * ss(140, 300, pa[o + 1])), pa[o + 10]], k = pa[o + 12] * SP * SP;\n    for (let y = max(0, ceil(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r - 0.5)); y++)\n      for (let x = max(0, ceil(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r - 0.5)); x++) {\n        const sx = floor(((x + 0.5 - cx) / r) * 0.5 * SP + SP / 2), sy = floor(((y + 0.5 - cy) / r) * 0.5 * SP + SP / 2), q = k + sy * SP + sx, d = spD[q] * a;\n        if (sx \u003c 0 || sx >= SP || sy \u003c 0 || sy >= SP || d \u003c= 0.001) continue;\n        const p = (y * W + x) * 5;\n        D[p] += d;\n        D[p + 1] += d * spS[q];\n        for (let j = 1; j \u003c 4; j++) D[p + j + 1] += d * L[j];\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const d = D[p * 5];\n    if (d \u003c 0.004) continue;\n    const sh = D[p * 5 + 1] / d, he = min(1.4, D[p * 5 + 2] / d), sn = (D[p * 5 + 3] / d) * (0.3 + 0.8 * sh) * (0.6 + 0.4 * P.sunI), ab = D[p * 5 + 4] / d;\n    const al = 1 - exp(-1.7 * d), am = 0.5 + 0.55 * sh, fl = P.lights * 75 * exp(-max(0, GY + Ci - ((p / W) | 0)) / 60), g = G[p] * 1.25;\n    for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += (ab * (c[12 + j] * am + c[15 + j] * sn + fl + g * gc[j]) + he * gc[j] * 0.9 - buf[p * 3 + j]) * al;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, V = vehicle(P), T = P.T, buf = P.buf, c = P.pal, G = P.G;\n  const F = fly(P, V, T), Ci = (P.Ci = round(camera(V, T, F))), s = F.s, sa = sin(F.a), ca = cos(F.a), fu = FUEL[F.fuel];\n  P.side = clamp((c[22] - X0) / 25, -1, 1);\n  P.sunK = P.sunI + P.tw * 0.7 * ss(60, 260, F.E);\n  // The engines' glow.\n  const uo = V.st[F.ai].u, uN = uo - V.st[F.ai].bell[0], nx = F.x + sa * uN * s, ny = GY + Ci - F.e - ca * uN * s, gx = nx - sa * F.Lf * s * 0.4, gy = ny + ca * F.Lf * s * 0.4;\n  const flick = 0.85 + 0.15 * sin(P.clk * 31) * sin(P.clk * 17.3 + 1), near = 1 - ss(10, 60, F.E);\n  const gr = ((6 + 8 * F.wn * s) * (1 + 1.6 * near)) ** 2, gi = F.f * flick * (F.fuel === 1 ? 0.35 : 1) * (0.55 + 0.6 * near) * (F.ai ? 1 : 0.5 + 0.25 * P.n) * (0.7 + 0.5 * P.night);\n  P.gc = fu[3];\n  for (let p = 0; p \u003c N; p++) G[p] = gi > 0.01 ? (gi * gr) / (gr + ((p % W) + 0.5 - gx) ** 2 + (((p / W) | 0) + 0.5 - gy) ** 2) : 0;\n  sky(P);\n  pad(P, V, T);\n  // Spent stages fall behind and tumble.\n  V.sep.forEach((ts, i) => {\n    const dt = T - ts, S0 = fly(P, V, ts), u = V.st[i].u * S0.s;\n    if (dt > 0 && dt \u003c 5) body(P, { ...stack(V, i, i + 1), x: S0.x + sin(S0.a) * u + 2 * dt, y: GY + Ci - S0.e - cos(S0.a) * u - ((fly(P, V, ts + 0.05).E - S0.E) / 0.05) * 1.1 * (1 - exp(-dt / 1.1)), ang: S0.a + 0.45 * dt, sc: S0.s / (1 + 0.06 * dt), al: 1 - ss(3, 5, dt), E: 300 });\n  });\n  if (V.boost) boosters(P, V, T, F, [-1, 1]);\n  // The rocket from its lowest burning stage up.\n  body(P, { ...stack(V, F.ai, V.n), x: F.x + sa * uo * s, y: GY + Ci - F.e - ca * uo * s, ang: F.a, sc: s, al: 1, E: F.E, q: ss(6.2, 6.7, T) * (1 - ss(7.6, 8.3, T)), uq: (V.L - uo) * 0.5, flame: { wn: F.wn, Lf: max(0.01, F.Lf * flick), k: F.k, f: F.f, fuel: F.fuel } });\n  if (V.boost) boosters(P, V, T, F, [0]);\n  // Far off, the flame is a bright point.\n  if (s * F.wn \u003c 1.4 && F.f > 0.05)\n    for (let p = 0; p \u003c N; p++) {\n      const a = 1.1 * F.f * exp(-(((p % W) + 0.5 - nx) ** 2 + (((p / W) | 0) + 0.5 - ny) ** 2) / (0.9 + 0.5 * s * F.wn) ** 2);\n      for (let j = 0; j \u003c 3; j++) buf[p * 3 + j] += fu[1][j] * a;\n    }\n  smoke(P);\n  // The water in front mirrors everything above the shoreline.\n  for (let y = max(0, GY + Ci); y \u003c H; y++) {\n    const sy = clamp(2 * (GY + Ci) - 1 - y, 0, H - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3, so = (sy * W + x) * 3, rp = 0.5 + 0.1 * sin(y * 2.1 + x * 0.3 - P.clk * 3);\n      for (let k = 0; k \u003c 3; k++) buf[o + k] = buf[so + k] * rp + c[k] * 0.12 + G[y * W + x] * P.gc[k] * 0.25;\n    }\n  }\n  // The clock.\n  const tc = T \u003c 0 ? ceil(-T) : floor(T);\n  [10, T \u003c 0 ? 11 : 12, floor(tc / 10) % 10, tc % 10].forEach((ch, i) => {\n    for (let r = 0; r \u003c 15; r++) if ((FONT[ch] >> (14 - r)) & 1) buf.set([255, 196, 70], ((2 + floor(r / 3)) * W + 2 + i * 4 + (r % 3)) * 3);\n  });\n  const fade = ss(-10, -9.3, T) * (1 - ss(23.8, 25, T));\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p % W, (p / W) | 0, min(255, buf[o] * fade), min(255, buf[o + 1] * fade), min(255, buf[o + 2] * fade));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Rocket=0..3, Speed=0.2..3, Stages=1..3, Time=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Rocket","min":0,"max":3,"about":"A white moon rocket by its tower at 0, a chequered V-2 at 1, a grey-green cluster whose boosters fall away in a cross at 2, a sounding rocket on a rail at 3."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 the countdown, the flight and the next rocket take 35 s; at 0.2 ten times longer."},{"name":"Stages","min":1,"max":3,"about":"1 to 3 stages. A taller stack gets a taller tower and more steam, and each extra stage drops away on the climb."},{"name":"Time","min":0,"max":1,"about":"Dawn at 0, then day, dusk and a floodlit night with searchlights. At dawn and dusk the high plume catches the sun."}],"start":[0,2,1,0.06],"measures":{"motion":0.3231,"detail":0.0267,"edges":0.3728,"complexity":1.8839,"coverage":0.9986,"colour":0.2838,"drift":0.1066},"knobResponse":[0.0489,0.062,0.0431,0.4667]},{"slug":"longcase-clock","title":"Longcase Clock","family":"time","round":18,"note":"촛불 켠 밤 방에 128줄을 다 쓰는 괘종시계가 서 있어요. 줄의 유리문 안에서 황동 추가 1초에 한 번씩 흔들리고 무게추가 내려가며, 다이얼 아치의 달 원판이 돌고, 정시마다 꼭대기 종이 번쩍이며 울려요. K3 을 돌리면 촛불이 시계 왼쪽에서 앞을 지나 오른쪽으로 옮겨 가고, 벽에 진 그림자가 반대쪽으로 넘어가요.","idea":"A grandfather clock stands the full height of a dark room by candlelight, its brass bob beating seconds behind the trunk glass, its weights sinking on their cables, the moon disc turning in the arch of the dial, and on the hour it strikes and the candle flame jumps.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Longcase Clock\n// Family:  time\n// Idea:    A grandfather clock stands the full height of a dark room by candlelight, its brass bob beating seconds behind the trunk glass, its weights sinking on their cables, the moon disc turning in the arch of the dial, and on the hour it strikes and the candle flame jumps.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the eight-day longcase clocks of 18th-century England, with an arched brass dial and a painted moon disc\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Wood=0..1, Speed=0..3, Candle=0..1, Lamp=0..1\n//\n// Knob 1: Wood. The case, from honey oak at 0 through walnut and red mahogany to ebonised black at 1.\n// Knob 2: Speed. How fast the clock's time runs: real time at 0, a minute a second at 2 so the hands move and it strikes the hour once a minute, and at 3 a day goes by in under a second, the weights sink, the moon turns and daylight comes and goes in the window.\n// Knob 3: Candle. Where the candle stands: off the left edge at 0, in front of the clock at 0.5, off the right edge at 1, and the case's shadow on the wall swings round to the other side.\n// Knob 4: Lamp. The light in the room, from the flickering candle at 0 to steady blue moonlight through a window on the upper right at 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Woods at full light: oak, walnut, mahogany, ebonised.\nconst WOODS = [\n  [200, 142, 74],\n  [128, 84, 50],\n  [158, 60, 34],\n  [44, 36, 34],\n];\n// Materials and what each is at full light. Wood takes the Wood knob.\nconst WALL = 0;\nconst FLOOR = 1;\nconst WOOD = 2;\nconst BRASS = 3;\nconst SILVER = 4;\nconst INSIDE = 5;\nconst DARK = 6;\nconst SKIRT = 7;\nconst FRET = 8;\nconst BELL = 9;\nconst COL = [\n  [70, 60, 52],\n  [120, 84, 52],\n  null,\n  [235, 184, 92],\n  [236, 236, 230],\n  null,\n  [14, 12, 12],\n  [46, 36, 30],\n  [8, 6, 6],\n  [235, 184, 92],\n];\n// The dial: centre, the arch and its moon disc, the seconds dial.\nconst DX = 32;\nconst DY = 37;\nconst AY = 24;\nconst AR = 12.5;\nconst SY = 31;\n// Pendulum: pivot behind the dial, the bob's rest point and its arc; the\n// top of the trunk glass.\nconst PIV = 44;\nconst BOB = 92;\nconst ARC = 4.5;\nconst DT = 58;\nconst CANDLE = [1, 0.74, 0.46];\nconst MOONC = [0.42, 0.55, 1];\nconst SUN = [1, 0.9, 0.7];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction hyp(a, b) {\n  return Math.sqrt(a * a + b * b);\n}\n\nfunction hash(x, y) {\n  const s = Math.sin(x * 127.1 + y * 311.7) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.mat = new Uint8Array(N);\n  P.tone = new Float32Array(N);\n  P.spec = new Float32Array(N);\n  P.lamp = new Float32Array(N);\n  P.win = new Float32Array(N);\n  P.sheen = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.pal = new Float32Array(COL.length * 3);\n  P.light = new Float32Array(12);\n  P.hcol = new Float32Array(3);\n  P.rod = new Float32Array(3);\n  P.cab = new Float32Array(3);\n  P.pul = new Float32Array(3);\n  const { mat, tone, spec } = P;\n  const set = (x, y, m, t, s) => {\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const p = y * W + x;\n    mat[p] = m;\n    tone[p] = t;\n    spec[p] = s || 0;\n  };\n  // Wood grain: vertical streaks that wander, or along a moulding.\n  const grain = (x, y, along) => {\n    const a = along ? y : x;\n    const b = along ? x : y;\n    return 0.8 + 0.12 * Math.sin(a * 2.3 + 2.6 * Math.sin(b * 0.09 + a * 0.4)) + 0.1 * hash(a, Math.floor(b / 9));\n  };\n  const box = (x0, y0, x1, y1, m, f) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) set(x, y, m, f ? f(x, y) : 1);\n  };\n  const woodV = (x, y) => grain(x, y, false);\n  // A moulding: rows lit from above, the left end catching the light.\n  const mould = (x0, y0, x1, y1) =>\n    box(x0, y0, x1, y1, WOOD, (x, y) => grain(x, y, true) * (1.15 - (0.5 * (y - y0)) / (y1 - y0 + 1)) * (x === x0 ? 1.25 : x === x1 ? 0.6 : 1));\n  // The room: papered wall with a faint stripe, dado rail, skirting, boards.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= 118) set(x, y, FLOOR, (0.75 + 0.2 * hash(Math.floor((x - 32) / (3 + (y - 118) * 0.25)), 1)) * (Math.abs(((x - 32) / (1 + (y - 118) * 0.08)) % 7) \u003c 0.6 ? 0.5 : 1));\n      else if (y >= 112) set(x, y, SKIRT, y === 112 ? 1.4 : 1);\n      else if (y >= 76 && y \u003c= 78) set(x, y, SKIRT, y === 76 ? 1.5 : 0.8);\n      else set(x, y, WALL, (x % 6 \u003c 3 ? 1 : 0.82) * (y > 78 ? 0.8 : 1) * (0.92 + 0.08 * hash(x, y)));\n    }\n  // Pediment: a broken arch with rosettes and two brass finials, and in\n  // its open middle the bell the hours are struck on.\n  for (let x = 14; x \u003c= 50; x++) {\n    const d = Math.abs(x - DX);\n    const top = d \u003c 7 ? 9 : Math.round(3 + 6 * ((d - 7) / 11) ** 1.6);\n    for (let y = top; y \u003c= 10; y++) set(x, y, WOOD, grain(x, y, true) * (y === top ? 1.35 : 0.95));\n  }\n  for (const [fx, fy] of [[15, 3], [49, 3]]) {\n    box(fx - 1, fy + 2, fx + 1, 10, WOOD, woodV);\n    for (let y = fy - 2; y \u003c= fy + 1; y++)\n      for (let x = fx - 2; x \u003c= fx + 2; x++) {\n        const r = hyp(x - fx, y - fy);\n        if (r \u003c= 1.8) set(x, y, BRASS, 0.7 + 0.3 * (fx - x), 1 - r / 1.8);\n      }\n    set(fx, fy - 2, BRASS, 0.8, 0.5);\n    set(fx, fy - 3, BRASS, 0.6, 0.3);\n  }\n  for (const rx of [24, 40]) set(rx, 4, BRASS, 1, 0.8);\n  for (let y = 2; y \u003c= 8; y++)\n    for (let x = 27; x \u003c= 37; x++) {\n      const e = ((x - DX) / 4.6) ** 2 + ((y - 7.6) / 5.2) ** 2;\n      if (e \u003c= 1 && y \u003c= 7.6) set(x, y, BELL, 0.55 + 0.6 * clamp((DX + 1 - x) / 4, 0, 1), y === 7 ? 0.9 : 0.35 * (1 - e));\n    }\n  set(DX, 1, BELL, 0.8, 0.4);\n  for (const x of [DX - 1, DX, DX + 1]) set(x, 8, DARK, 1);\n  // Hood: the frame, brass-capped pillars, the fretted spandrels.\n  mould(12, 10, 52, 12);\n  box(13, 13, 51, 52, WOOD, woodV);\n  for (const cx of [14, 50])\n    for (let y = 13; y \u003c= 52; y++)\n      for (let x = cx - 1; x \u003c= cx + 1; x++) {\n        const cap = y \u003c= 15 || y >= 50;\n        set(x, y, cap ? BRASS : WOOD, (cap ? 1 : grain(x, y, false)) * (1.1 - 0.3 * (x - cx + 1)), cap ? 0.8 - 0.3 * (x - cx + 1) : 0);\n      }\n  for (let y = 13; y \u003c= AY; y++)\n    for (let x = 17; x \u003c= 47; x++)\n      if (hyp(x - DX, y - AY) > AR + 1.5 && (hash(Math.floor(x / 2), Math.floor(y / 2)) > 0.55 || (x + y) % 4 === 0)) set(x, y, FRET, 1);\n  mould(12, 53, 52, 56);\n  // Dial: brass plate in the arch and the square, gilt scrolls in the\n  // corners, a silvered chapter ring, the seconds dial and winding holes.\n  for (let y = 11; y \u003c= 50; y++)\n    for (let x = 18; x \u003c= 46; x++) {\n      const ra = hyp(x - DX, y - AY);\n      if (y \u003c AY && ra > AR + 1) continue;\n      const r = hyp(x - DX, y - DY);\n      if (y \u003c AY && ra > AR) set(x, y, BRASS, 1.1, 0.6);\n      else if (y \u003c AY) set(x, y, DARK, 1);\n      else if (r >= 9.6 && r \u003c= 13.2) {\n        const a = Math.atan2(y - DY, x - DX) / (Math.PI / 6);\n        const tick = Math.abs(a - Math.round(a)) \u003c 0.14 && r > 10.2 && r \u003c 12.6;\n        set(x, y, tick ? DARK : SILVER, r > 12.7 || r \u003c 10 ? 0.7 : 1);\n      } else if (r > 13.2) {\n        const g = Math.sin(x * 1.4 + Math.sin(y * 0.9) * 2) * Math.sin(y * 1.4 + Math.sin(x * 0.9) * 2);\n        set(x, y, BRASS, g > 0.15 ? 1.15 : 0.5, g > 0.5 ? 0.6 : 0.1);\n      } else {\n        const rs = hyp(x - DX, y - SY);\n        if (rs \u003c= 3.6 && rs >= 2.4) set(x, y, SILVER, 0.9);\n        else set(x, y, BRASS, 0.6 + 0.06 * hash(x, y), 0.05);\n      }\n    }\n  for (const wx of [27, 37]) set(wx, DY + 5, DARK, 1);\n  // Trunk: carcass, pilasters, the arched glass door and its escutcheon.\n  box(18, 57, 46, 101, WOOD, woodV);\n  for (const px of [18, 19, 45, 46]) for (let y = 57; y \u003c= 101; y++) set(px, y, WOOD, grain(px, y, false) * (px === 18 ? 1.3 : px === 46 ? 0.55 : 0.85));\n  for (let y = 58; y \u003c= 101; y++)\n    for (let x = 21; x \u003c= 43; x++) {\n      const glass = x >= 23 && x \u003c= 41 && y \u003c= 99 && (y >= 69 || hyp(x - DX, y - 69) \u003c= 9.5);\n      if (glass) set(x, y, INSIDE, grain(x, y, false) * (0.85 + 0.15 * Math.cos((x - DX) * 0.2)));\n      else if (y >= 69 || hyp(x - DX, y - 69) \u003c= 11.5) set(x, y, WOOD, grain(x, y, false) * (x \u003c DX ? 1.15 : 0.85));\n    }\n  set(42, 82, BRASS, 1, 1);\n  set(42, 83, DARK, 1);\n  // Base: a moulding, the plinth with a figured panel, skirt and feet.\n  mould(15, 102, 49, 105);\n  box(16, 106, 48, 120, WOOD, woodV);\n  for (let y = 109; y \u003c= 117; y++)\n    for (let x = 20; x \u003c= 44; x++) {\n      const f = Math.sin(hyp(x - DX, (y - 113) * 2.2) * 1.3 + hash(x >> 1, y >> 1) * 1.5);\n      set(x, y, WOOD, x === 20 || y === 109 ? 1.3 : x === 44 || y === 117 ? 0.55 : 0.95 + 0.18 * f);\n    }\n  mould(14, 121, 50, 123);\n  for (const fx of [14, 45]) box(fx, 124, fx + 5, 126, WOOD, (x, y) => grain(x, y, true) * (y === 124 ? 1.2 : 0.8));\n  // The window: a patch from the upper right, crossed by its glazing bars.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p - x) / W;\n    const u = x + 0.7 * y;\n    const v = y - 0.45 * x;\n    let mo = clamp((u - 58) / 4, 0, 1) * clamp((116 - u) / 4, 0, 1) * clamp((v + 2) / 4, 0, 1) * clamp((104 - v) / 4, 0, 1);\n    if (Math.abs(u - 77) \u003c 1.2 || Math.abs(u - 97) \u003c 1.2 || Math.abs(v - 50) \u003c 1.2) mo *= 0.25;\n    P.win[p] = (0.12 + mo) * (mat[p] === INSIDE ? 0.5 : 1);\n  }\n  P.candleAt = null;\n  P.started = false;\n  P.t = 0;\n  P.flare = 0;\n  P.blows = 0;\n  P.nextBlow = 0;\n  P.day = 0;\n}\n\n// Candlelight on every LED from a candle at table height, 30 LEDs in front\n// of the clock, at column cx; the case throws its shadow on the wall on the\n// far side, and the flame shows as a streak in both panes of glass.\nfunction light(P, cx) {\n  const { mat } = P;\n  const off = clamp((5 * (32 - cx)) / 66, -6, 6);\n  // Scaled so the nearest edge of the case gets the same light wherever\n  // the candle stands.\n  const near = 1.6 * (1 + (Math.max(0, Math.abs(cx - DX) - 18) ** 2 + 900) / 2600);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p - x) / W;\n    let l = 1 / (1 + ((x - cx) ** 2 + (y - 74) ** 2 + 900) / 2600);\n    const m = mat[p];\n    if (m === WALL || m === SKIRT || m === FLOOR) {\n      const sx = Math.round(x - off);\n      const sm = sx >= 0 && sx \u003c W ? mat[p + sx - x] : WALL;\n      if ((x > 46 || x \u003c 18) && sm !== WALL && sm !== SKIRT && sm !== FLOOR) l *= 0.3;\n    }\n    if (m === INSIDE) l *= 0.45;\n    P.lamp[p] = l * near;\n    const glass = m === INSIDE || (y >= 14 && y \u003c= 50 && x >= 18 && x \u003c= 46 && (m === BRASS || m === SILVER || m === DARK));\n    P.sheen[p] = glass ? Math.exp(-((x - 0.35 * y - (y \u003c 57 ? 13 : -3) + (cx + 34) * 0.15) ** 2) / 3) * 0.16 : 0;\n  }\n}\n\n// Clock seconds per real second for the Speed knob.\nfunction rate(k) {\n  return k \u003c= 2 ? 60 ** (k / 2) : 60 * (100000 / 60) ** (k - 2);\n}\n\nfunction advance(P, dt, speed) {\n  const r = rate(speed);\n  const hourBefore = Math.floor(P.clock / 3600);\n  P.clock += dt * r;\n  P.t += dt;\n  // Eight days of fall on the weights; wound again at the bottom.\n  P.fall += (dt * r) / (8 * 86400);\n  if (P.fall > 1) P.fall -= 1;\n  // The strike is held off while the hands are spun round fast.\n  if (Math.floor(P.clock / 3600) !== hourBefore && P.blows === 0 && r \u003c 3000) {\n    P.blows = Math.floor(P.clock / 3600) % 12 || 12;\n    P.nextBlow = P.t;\n  }\n  if (P.blows > 0 && P.t >= P.nextBlow) {\n    P.blows--;\n    P.flare = 1;\n    P.nextBlow = P.t + 1.5;\n  }\n  P.flare *= Math.exp(-dt / 0.45);\n  // Daylight in the window, eased so days that fly by read as a glow.\n  const h = (P.clock / 3600) % 24;\n  const sun = clamp((h - 5.5) / 2, 0, 1) * clamp((19.5 - h) / 2, 0, 1);\n  P.day += (sun - P.day) * (1 - Math.exp(-dt / 0.8));\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.wood = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  P.rate = rate(speed);\n  const cx = Math.round((-34 + 132 * clamp(k[2], 0, 1)) * 2) / 2;\n  if (cx !== P.candleAt) {\n    P.candleAt = cx;\n    light(P, cx);\n  }\n  P.lampK = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Eight and a half minutes to ten at night, twelve days into the\n    // moon's month, weights half down; then six seconds at the knob's pace,\n    // so at Speed 2 it strikes ten from 2.5 s on.\n    P.clock = 21 * 3600 + 51.5 * 60;\n    P.age = 12.4;\n    P.fall = 0.45;\n    for (let i = 0; i \u003c 180; i++) advance(P, 1 / 30, speed);\n    P.t = 0;\n    P.nextBlow = 0;\n  }\n  advance(P, dt, speed);\n}\n\nfunction woodColour(w) {\n  const f = w * 3;\n  const i = Math.min(2, Math.floor(f));\n  const u = f - i;\n  return WOODS[i].map((c, j) => c + (WOODS[i + 1][j] - c) * u);\n}\n\n// A line of width w from (x0, y0) to (x1, y1), blended over the buffer.\nfunction stroke(buf, x0, y0, x1, y1, w, c, a) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const L2 = dx * dx + dy * dy || 1;\n  const ya = Math.max(0, Math.floor(Math.min(y0, y1) - w - 1));\n  const yb = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + w + 1));\n  const xa = Math.max(0, Math.floor(Math.min(x0, x1) - w - 1));\n  const xb = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + w + 1));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const u = clamp(((x - x0) * dx + (y - y0) * dy) / L2, 0, 1);\n      const ex = x - x0 - u * dx;\n      const ey = y - y0 - u * dy;\n      const al = clamp(w + 0.5 - Math.sqrt(ex * ex + ey * ey), 0, 1) * a;\n      if (al \u003c= 0) continue;\n      const p = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[p + i] += (c[i] - buf[p + i]) * al;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const t = P.t;\n  const lk = P.lampK;\n  // The candle breathes and flickers in a draught, and jumps at each blow.\n  const fl = (1 + (1 - lk) * (0.1 * Math.sin(0.62 * t + 0.4) + 0.05 * Math.sin(1.9 * t + 1.1) + 0.03 * Math.sin(5.3 * t + 2) + 0.02 * Math.sin(13.1 * t))) * (1 + 0.22 * P.flare);\n  const L = P.light;\n  // The window: moonlight at night, brighter near the full moon, and\n  // daylight when the clock is run on into the day.\n  const lunar = ((P.age + P.clock / 86400) % 29.53) / 29.53;\n  const full = 0.25 + 0.75 * (0.5 - 0.5 * Math.cos(2 * Math.PI * lunar));\n  for (let i = 0; i \u003c 3; i++) {\n    L[i] = 0.05 + (0.2 - 0.025 * i) * P.day;\n    L[3 + i] = CANDLE[i] * (1 - lk) * fl;\n    L[6 + i] = MOONC[i] * lk * 1.5 * full * (1 - P.day) + SUN[i] * 2.2 * P.day;\n    L[9 + i] = L[i] + L[3 + i] * 0.55 + L[6 + i] * 0.5;\n  }\n  const wood = woodColour(P.wood);\n  for (let m = 0; m \u003c COL.length; m++)\n    for (let i = 0; i \u003c 3; i++) P.pal[m * 3 + i] = m === WOOD ? wood[i] : m === INSIDE ? wood[i] * 0.45 + 6 : COL[m][i];\n  shadeAll(P, buf, L);\n  if (P.flare > 0.02) fret(P, buf);\n  moonDisc(P, buf, L, lunar);\n  hands(P, buf, L);\n  hammer(P, buf, L);\n  pendulum(P, buf, L, t);\n  weights(P, buf, L);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n}\n\n// Every LED lit by the room: ambient, candle and window.\nfunction shadeAll(P, buf, L) {\n  const { mat, tone, spec, lamp, win, sheen, pal } = P;\n  const a0 = L[0];\n  const a1 = L[1];\n  const a2 = L[2];\n  const l0 = L[3];\n  const l1 = L[4];\n  const l2 = L[5];\n  const m0 = L[6];\n  const m1 = L[7];\n  const m2 = L[8];\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const q = mat[p] * 3;\n    const tn = tone[p];\n    const la = lamp[p];\n    const mo = win[p];\n    const s = spec[p] * 255;\n    const g = (s * 0.5 + sheen[p] * 255) * la;\n    const sm = s * 0.3 * mo;\n    buf[o] = pal[q] * tn * (a0 + l0 * la + m0 * mo) + g * l0 + sm * m0;\n    buf[o + 1] = pal[q + 1] * tn * (a1 + l1 * la + m1 * mo) + g * l1 + sm * m1;\n    buf[o + 2] = pal[q + 2] * tn * (a2 + l2 * la + m2 * mo) + g * l2 + sm * m2;\n  }\n}\n\n// At each blow the bell flashes and rings, and the fret round the dial\n// arch catches it.\nfunction fret(P, buf) {\n  const f = P.flare;\n  for (let p = 0; p \u003c 30 * W; p++) {\n    const m = P.mat[p];\n    if (m !== FRET && m !== BELL) continue;\n    const h = m === BELL ? f * (0.6 + 0.4 * Math.sin(P.t * 50 + (p % W))) : f * 0.5 * hash(p, 3);\n    buf[p * 3] += 255 * h;\n    buf[p * 3 + 1] += 205 * h;\n    buf[p * 3 + 2] += 120 * h;\n  }\n  for (let y = 0; y \u003c= 14; y++)\n    for (let x = 20; x \u003c= 44; x++) {\n      const h = 70 * f * Math.exp(-((x - DX) ** 2 + (y - 5) ** 2) / 28);\n      const o = (y * W + x) * 3;\n      buf[o] += h;\n      buf[o + 1] += h * 0.8;\n      buf[o + 2] += h * 0.5;\n    }\n}\n\n// The hammer: an arm up through the moulding to the right of the bell,\n// lifted back before each blow and let fall on it.\nfunction hammer(P, buf, L) {\n  const wait = P.blows > 0 ? P.nextBlow - P.t : 9;\n  const lift = clamp((0.5 - wait) / 0.5, 0, 1) ** 2 * 0.7;\n  const a = -0.45 - lift;\n  const hx = 38 + 6 * Math.sin(a);\n  const hy = 12 - 6 * Math.cos(a);\n  const col = P.hcol;\n  stroke(buf, 38, 12, hx, hy, 0.35, col, 1);\n  stroke(buf, hx - 0.6, hy - 0.4, hx + 0.6, hy + 0.4, 0.9, col, 1);\n}\n\n// The moon disc in the arch, turning once in two lunations, its moon\n// hidden and shown by the two painted humps.\nfunction moonDisc(P, buf, L, lunar) {\n  const phi = Math.PI * (lunar * 2 - 1);\n  const ca = Math.cos(phi);\n  const sa = Math.sin(phi);\n  const d0 = L[0] + L[3] * 0.7 + L[6] * 0.5 + 0.12;\n  const d1 = L[1] + L[4] * 0.7 + L[7] * 0.5 + 0.12;\n  const d2 = L[2] + L[5] * 0.7 + L[8] * 0.5 + 0.12;\n  for (let y = AY - 13; y \u003c AY; y++)\n    for (let x = DX - 13; x \u003c= DX + 13; x++) {\n      const p = y * W + x;\n      if (P.mat[p] !== DARK || hyp(x - DX, y - AY) > AR) continue;\n      let r;\n      let g;\n      let b;\n      const hx = x \u003c DX ? DX - 6.5 : DX + 6.5;\n      if (hyp(x - hx, y - AY) \u003c 6.3) {\n        const land = hyp(x - hx - 1, y - AY + 2) \u003c 3.5;\n        r = land ? 110 : 50;\n        g = land ? 160 : 100;\n        b = land ? 90 : 170;\n      } else {\n        const u = (x - DX) * ca + (y - AY) * sa;\n        const v = (y - AY) * ca - (x - DX) * sa;\n        const dm = Math.min(hyp(u, v + 7.5), hyp(u, v - 7.5));\n        if (dm \u003c 4.3) (r = 245), (g = 232), (b = 190);\n        else if (dm \u003c 5) (r = 200), (g = 170), (b = 110);\n        else if (hash(Math.round(u * 1.3) + 40, Math.round(v * 1.3) + 40) > 0.93) (r = 250), (g = 210), (b = 110);\n        else (r = 28), (g = 46), (b = 120);\n      }\n      buf[p * 3] = r * d0;\n      buf[p * 3 + 1] = g * d1;\n      buf[p * 3 + 2] = b * d2;\n    }\n}\n\n// Hands: blued steel. A hand swept faster than the eye fades to a blur.\nfunction hands(P, buf, L) {\n  const T = P.clock;\n  const r = P.rate;\n  const col = P.hcol;\n  for (let i = 0; i \u003c 3; i++) col[i] = 12 + 30 * L[3 + i] + 20 * L[6 + i] + (i === 2 ? 10 : 0);\n  const hand = (turns, len, w, tail, perFrame) => {\n    const a = turns * 2 * Math.PI;\n    const sx = Math.sin(a);\n    const cy = -Math.cos(a);\n    stroke(buf, DX - sx * tail, DY - cy * tail, DX + sx * len, DY + cy * len, w, col, clamp(1.6 - perFrame / 20, 0.15, 1));\n  };\n  hand(T / 43200, 7.5, 1.2, 2, r / 3600);\n  hand(T / 3600, 12, 0.75, 3, r / 300);\n  const sec = r \u003c 2 ? Math.floor(T) : T;\n  const sa = (sec / 60) * 2 * Math.PI;\n  stroke(buf, DX, SY, DX + 3.2 * Math.sin(sa), SY - 3.2 * Math.cos(sa), 0.3, col, clamp(1.6 - r / 15, 0.2, 1));\n}\n\n// The bob's shadow on the backboard, the rod and the brass bob, beating\n// seconds whatever the clock's own speed.\nfunction pendulum(P, buf, L, t) {\n  const th = Math.asin(ARC / (BOB - PIV)) * Math.sin(Math.PI * t);\n  const bx = DX + (BOB - PIV) * Math.sin(th);\n  const by = PIV + (BOB - PIV) * Math.cos(th);\n  for (let y = Math.floor(by - 5); y \u003c= by + 8; y++)\n    for (let x = Math.floor(bx - 3); x \u003c= bx + 10; x++) {\n      const p = y * W + x;\n      if (P.mat[p] !== INSIDE) continue;\n      const sh = 0.45 + 0.55 * clamp((hyp(x - bx - 3.5, y - by - 1.5) - 3) / 3, 0, 1);\n      buf[p * 3] *= sh;\n      buf[p * 3 + 1] *= sh;\n      buf[p * 3 + 2] *= sh;\n    }\n  const rod = P.rod;\n  for (let i = 0; i \u003c 3; i++) rod[i] = [200, 150, 80][i] * L[9 + i];\n  stroke(buf, DX, DT, bx, by, 0.45, rod, 1);\n  for (let y = Math.floor(by - 6); y \u003c= by + 6; y++)\n    for (let x = Math.floor(bx - 6); x \u003c= bx + 6; x++) {\n      const d = hyp(x - bx, (y - by) * 1.05);\n      if (d > 5.2) continue;\n      const a = clamp(5.2 - d, 0, 1);\n      const shade = 0.75 + 0.3 * ((bx - x) / 5) + 0.15 * ((by - y) / 5);\n      const hl = 255 * Math.exp(-((x - bx + 1.6) ** 2 + (y - by + 1.6) ** 2) / 2.2);\n      const p = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) {\n        const c = COL[BRASS][i] * shade * (L[9 + i] + 0.15) + hl * (L[3 + i] * 0.8 + L[6 + i] * 0.4);\n        buf[p + i] += (c - buf[p + i]) * a;\n      }\n    }\n}\n\n// Going weight on the right, striking weight on the left, each under a\n// pulley on a doubled cable; the striking train runs down a little faster.\nfunction weights(P, buf, L) {\n  const cab = P.cab;\n  for (let i = 0; i \u003c 3; i++) cab[i] = [110, 100, 90][i] * L[9 + i] + 8;\n  const pul = P.pul;\n  for (let i = 0; i \u003c 3; i++) pul[i] = [150, 120, 70][i] * L[9 + i];\n  for (let w = 0; w \u003c 2; w++) {\n    const wx = w ? 38 : 26;\n    const wy = 64 + 26 * (w ? P.fall : (P.fall * 1.06) % 1);\n    stroke(buf, wx - 1.5, DT, wx - 1.5, wy - 2, 0.2, cab, 0.8);\n    stroke(buf, wx + 1.5, DT, wx + 1.5, wy - 2, 0.2, cab, 0.8);\n    stroke(buf, wx - 1.5, wy - 2.5, wx + 1.5, wy - 2.5, 0.6, pul, 1);\n    for (let y = Math.round(wy); y \u003c= wy + 12; y++)\n      for (let x = wx - 2; x \u003c= wx + 2; x++) {\n        const p = (y * W + x) * 3;\n        const cyl = Math.cos(((x - wx + 0.6) / 3) * 1.4);\n        for (let i = 0; i \u003c 3; i++) buf[p + i] = COL[BRASS][i] * (0.35 + 0.75 * cyl) * (L[9 + i] + 0.1) + 96 * cyl ** 8 * L[3 + i];\n      }\n  }\n}\n","layer":{"id":"layer-longcase-clock","type":"code","name":"longcase-clock","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Longcase Clock\n// Family:  time\n// Idea:    A grandfather clock stands the full height of a dark room by candlelight, its brass bob beating seconds behind the trunk glass, its weights sinking on their cables, the moon disc turning in the arch of the dial, and on the hour it strikes and the candle flame jumps.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the eight-day longcase clocks of 18th-century England, with an arched brass dial and a painted moon disc\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Wood=0..1, Speed=0..3, Candle=0..1, Lamp=0..1\n//\n// Knob 1: Wood. The case, from honey oak at 0 through walnut and red mahogany to ebonised black at 1.\n// Knob 2: Speed. How fast the clock's time runs: real time at 0, a minute a second at 2 so the hands move and it strikes the hour once a minute, and at 3 a day goes by in under a second, the weights sink, the moon turns and daylight comes and goes in the window.\n// Knob 3: Candle. Where the candle stands: off the left edge at 0, in front of the clock at 0.5, off the right edge at 1, and the case's shadow on the wall swings round to the other side.\n// Knob 4: Lamp. The light in the room, from the flickering candle at 0 to steady blue moonlight through a window on the upper right at 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Woods at full light: oak, walnut, mahogany, ebonised.\nconst WOODS = [\n  [200, 142, 74],\n  [128, 84, 50],\n  [158, 60, 34],\n  [44, 36, 34],\n];\n// Materials and what each is at full light. Wood takes the Wood knob.\nconst WALL = 0;\nconst FLOOR = 1;\nconst WOOD = 2;\nconst BRASS = 3;\nconst SILVER = 4;\nconst INSIDE = 5;\nconst DARK = 6;\nconst SKIRT = 7;\nconst FRET = 8;\nconst BELL = 9;\nconst COL = [\n  [70, 60, 52],\n  [120, 84, 52],\n  null,\n  [235, 184, 92],\n  [236, 236, 230],\n  null,\n  [14, 12, 12],\n  [46, 36, 30],\n  [8, 6, 6],\n  [235, 184, 92],\n];\n// The dial: centre, the arch and its moon disc, the seconds dial.\nconst DX = 32;\nconst DY = 37;\nconst AY = 24;\nconst AR = 12.5;\nconst SY = 31;\n// Pendulum: pivot behind the dial, the bob's rest point and its arc; the\n// top of the trunk glass.\nconst PIV = 44;\nconst BOB = 92;\nconst ARC = 4.5;\nconst DT = 58;\nconst CANDLE = [1, 0.74, 0.46];\nconst MOONC = [0.42, 0.55, 1];\nconst SUN = [1, 0.9, 0.7];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction hyp(a, b) {\n  return Math.sqrt(a * a + b * b);\n}\n\nfunction hash(x, y) {\n  const s = Math.sin(x * 127.1 + y * 311.7) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.mat = new Uint8Array(N);\n  P.tone = new Float32Array(N);\n  P.spec = new Float32Array(N);\n  P.lamp = new Float32Array(N);\n  P.win = new Float32Array(N);\n  P.sheen = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.pal = new Float32Array(COL.length * 3);\n  P.light = new Float32Array(12);\n  P.hcol = new Float32Array(3);\n  P.rod = new Float32Array(3);\n  P.cab = new Float32Array(3);\n  P.pul = new Float32Array(3);\n  const { mat, tone, spec } = P;\n  const set = (x, y, m, t, s) => {\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const p = y * W + x;\n    mat[p] = m;\n    tone[p] = t;\n    spec[p] = s || 0;\n  };\n  // Wood grain: vertical streaks that wander, or along a moulding.\n  const grain = (x, y, along) => {\n    const a = along ? y : x;\n    const b = along ? x : y;\n    return 0.8 + 0.12 * Math.sin(a * 2.3 + 2.6 * Math.sin(b * 0.09 + a * 0.4)) + 0.1 * hash(a, Math.floor(b / 9));\n  };\n  const box = (x0, y0, x1, y1, m, f) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) set(x, y, m, f ? f(x, y) : 1);\n  };\n  const woodV = (x, y) => grain(x, y, false);\n  // A moulding: rows lit from above, the left end catching the light.\n  const mould = (x0, y0, x1, y1) =>\n    box(x0, y0, x1, y1, WOOD, (x, y) => grain(x, y, true) * (1.15 - (0.5 * (y - y0)) / (y1 - y0 + 1)) * (x === x0 ? 1.25 : x === x1 ? 0.6 : 1));\n  // The room: papered wall with a faint stripe, dado rail, skirting, boards.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= 118) set(x, y, FLOOR, (0.75 + 0.2 * hash(Math.floor((x - 32) / (3 + (y - 118) * 0.25)), 1)) * (Math.abs(((x - 32) / (1 + (y - 118) * 0.08)) % 7) \u003c 0.6 ? 0.5 : 1));\n      else if (y >= 112) set(x, y, SKIRT, y === 112 ? 1.4 : 1);\n      else if (y >= 76 && y \u003c= 78) set(x, y, SKIRT, y === 76 ? 1.5 : 0.8);\n      else set(x, y, WALL, (x % 6 \u003c 3 ? 1 : 0.82) * (y > 78 ? 0.8 : 1) * (0.92 + 0.08 * hash(x, y)));\n    }\n  // Pediment: a broken arch with rosettes and two brass finials, and in\n  // its open middle the bell the hours are struck on.\n  for (let x = 14; x \u003c= 50; x++) {\n    const d = Math.abs(x - DX);\n    const top = d \u003c 7 ? 9 : Math.round(3 + 6 * ((d - 7) / 11) ** 1.6);\n    for (let y = top; y \u003c= 10; y++) set(x, y, WOOD, grain(x, y, true) * (y === top ? 1.35 : 0.95));\n  }\n  for (const [fx, fy] of [[15, 3], [49, 3]]) {\n    box(fx - 1, fy + 2, fx + 1, 10, WOOD, woodV);\n    for (let y = fy - 2; y \u003c= fy + 1; y++)\n      for (let x = fx - 2; x \u003c= fx + 2; x++) {\n        const r = hyp(x - fx, y - fy);\n        if (r \u003c= 1.8) set(x, y, BRASS, 0.7 + 0.3 * (fx - x), 1 - r / 1.8);\n      }\n    set(fx, fy - 2, BRASS, 0.8, 0.5);\n    set(fx, fy - 3, BRASS, 0.6, 0.3);\n  }\n  for (const rx of [24, 40]) set(rx, 4, BRASS, 1, 0.8);\n  for (let y = 2; y \u003c= 8; y++)\n    for (let x = 27; x \u003c= 37; x++) {\n      const e = ((x - DX) / 4.6) ** 2 + ((y - 7.6) / 5.2) ** 2;\n      if (e \u003c= 1 && y \u003c= 7.6) set(x, y, BELL, 0.55 + 0.6 * clamp((DX + 1 - x) / 4, 0, 1), y === 7 ? 0.9 : 0.35 * (1 - e));\n    }\n  set(DX, 1, BELL, 0.8, 0.4);\n  for (const x of [DX - 1, DX, DX + 1]) set(x, 8, DARK, 1);\n  // Hood: the frame, brass-capped pillars, the fretted spandrels.\n  mould(12, 10, 52, 12);\n  box(13, 13, 51, 52, WOOD, woodV);\n  for (const cx of [14, 50])\n    for (let y = 13; y \u003c= 52; y++)\n      for (let x = cx - 1; x \u003c= cx + 1; x++) {\n        const cap = y \u003c= 15 || y >= 50;\n        set(x, y, cap ? BRASS : WOOD, (cap ? 1 : grain(x, y, false)) * (1.1 - 0.3 * (x - cx + 1)), cap ? 0.8 - 0.3 * (x - cx + 1) : 0);\n      }\n  for (let y = 13; y \u003c= AY; y++)\n    for (let x = 17; x \u003c= 47; x++)\n      if (hyp(x - DX, y - AY) > AR + 1.5 && (hash(Math.floor(x / 2), Math.floor(y / 2)) > 0.55 || (x + y) % 4 === 0)) set(x, y, FRET, 1);\n  mould(12, 53, 52, 56);\n  // Dial: brass plate in the arch and the square, gilt scrolls in the\n  // corners, a silvered chapter ring, the seconds dial and winding holes.\n  for (let y = 11; y \u003c= 50; y++)\n    for (let x = 18; x \u003c= 46; x++) {\n      const ra = hyp(x - DX, y - AY);\n      if (y \u003c AY && ra > AR + 1) continue;\n      const r = hyp(x - DX, y - DY);\n      if (y \u003c AY && ra > AR) set(x, y, BRASS, 1.1, 0.6);\n      else if (y \u003c AY) set(x, y, DARK, 1);\n      else if (r >= 9.6 && r \u003c= 13.2) {\n        const a = Math.atan2(y - DY, x - DX) / (Math.PI / 6);\n        const tick = Math.abs(a - Math.round(a)) \u003c 0.14 && r > 10.2 && r \u003c 12.6;\n        set(x, y, tick ? DARK : SILVER, r > 12.7 || r \u003c 10 ? 0.7 : 1);\n      } else if (r > 13.2) {\n        const g = Math.sin(x * 1.4 + Math.sin(y * 0.9) * 2) * Math.sin(y * 1.4 + Math.sin(x * 0.9) * 2);\n        set(x, y, BRASS, g > 0.15 ? 1.15 : 0.5, g > 0.5 ? 0.6 : 0.1);\n      } else {\n        const rs = hyp(x - DX, y - SY);\n        if (rs \u003c= 3.6 && rs >= 2.4) set(x, y, SILVER, 0.9);\n        else set(x, y, BRASS, 0.6 + 0.06 * hash(x, y), 0.05);\n      }\n    }\n  for (const wx of [27, 37]) set(wx, DY + 5, DARK, 1);\n  // Trunk: carcass, pilasters, the arched glass door and its escutcheon.\n  box(18, 57, 46, 101, WOOD, woodV);\n  for (const px of [18, 19, 45, 46]) for (let y = 57; y \u003c= 101; y++) set(px, y, WOOD, grain(px, y, false) * (px === 18 ? 1.3 : px === 46 ? 0.55 : 0.85));\n  for (let y = 58; y \u003c= 101; y++)\n    for (let x = 21; x \u003c= 43; x++) {\n      const glass = x >= 23 && x \u003c= 41 && y \u003c= 99 && (y >= 69 || hyp(x - DX, y - 69) \u003c= 9.5);\n      if (glass) set(x, y, INSIDE, grain(x, y, false) * (0.85 + 0.15 * Math.cos((x - DX) * 0.2)));\n      else if (y >= 69 || hyp(x - DX, y - 69) \u003c= 11.5) set(x, y, WOOD, grain(x, y, false) * (x \u003c DX ? 1.15 : 0.85));\n    }\n  set(42, 82, BRASS, 1, 1);\n  set(42, 83, DARK, 1);\n  // Base: a moulding, the plinth with a figured panel, skirt and feet.\n  mould(15, 102, 49, 105);\n  box(16, 106, 48, 120, WOOD, woodV);\n  for (let y = 109; y \u003c= 117; y++)\n    for (let x = 20; x \u003c= 44; x++) {\n      const f = Math.sin(hyp(x - DX, (y - 113) * 2.2) * 1.3 + hash(x >> 1, y >> 1) * 1.5);\n      set(x, y, WOOD, x === 20 || y === 109 ? 1.3 : x === 44 || y === 117 ? 0.55 : 0.95 + 0.18 * f);\n    }\n  mould(14, 121, 50, 123);\n  for (const fx of [14, 45]) box(fx, 124, fx + 5, 126, WOOD, (x, y) => grain(x, y, true) * (y === 124 ? 1.2 : 0.8));\n  // The window: a patch from the upper right, crossed by its glazing bars.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p - x) / W;\n    const u = x + 0.7 * y;\n    const v = y - 0.45 * x;\n    let mo = clamp((u - 58) / 4, 0, 1) * clamp((116 - u) / 4, 0, 1) * clamp((v + 2) / 4, 0, 1) * clamp((104 - v) / 4, 0, 1);\n    if (Math.abs(u - 77) \u003c 1.2 || Math.abs(u - 97) \u003c 1.2 || Math.abs(v - 50) \u003c 1.2) mo *= 0.25;\n    P.win[p] = (0.12 + mo) * (mat[p] === INSIDE ? 0.5 : 1);\n  }\n  P.candleAt = null;\n  P.started = false;\n  P.t = 0;\n  P.flare = 0;\n  P.blows = 0;\n  P.nextBlow = 0;\n  P.day = 0;\n}\n\n// Candlelight on every LED from a candle at table height, 30 LEDs in front\n// of the clock, at column cx; the case throws its shadow on the wall on the\n// far side, and the flame shows as a streak in both panes of glass.\nfunction light(P, cx) {\n  const { mat } = P;\n  const off = clamp((5 * (32 - cx)) / 66, -6, 6);\n  // Scaled so the nearest edge of the case gets the same light wherever\n  // the candle stands.\n  const near = 1.6 * (1 + (Math.max(0, Math.abs(cx - DX) - 18) ** 2 + 900) / 2600);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p - x) / W;\n    let l = 1 / (1 + ((x - cx) ** 2 + (y - 74) ** 2 + 900) / 2600);\n    const m = mat[p];\n    if (m === WALL || m === SKIRT || m === FLOOR) {\n      const sx = Math.round(x - off);\n      const sm = sx >= 0 && sx \u003c W ? mat[p + sx - x] : WALL;\n      if ((x > 46 || x \u003c 18) && sm !== WALL && sm !== SKIRT && sm !== FLOOR) l *= 0.3;\n    }\n    if (m === INSIDE) l *= 0.45;\n    P.lamp[p] = l * near;\n    const glass = m === INSIDE || (y >= 14 && y \u003c= 50 && x >= 18 && x \u003c= 46 && (m === BRASS || m === SILVER || m === DARK));\n    P.sheen[p] = glass ? Math.exp(-((x - 0.35 * y - (y \u003c 57 ? 13 : -3) + (cx + 34) * 0.15) ** 2) / 3) * 0.16 : 0;\n  }\n}\n\n// Clock seconds per real second for the Speed knob.\nfunction rate(k) {\n  return k \u003c= 2 ? 60 ** (k / 2) : 60 * (100000 / 60) ** (k - 2);\n}\n\nfunction advance(P, dt, speed) {\n  const r = rate(speed);\n  const hourBefore = Math.floor(P.clock / 3600);\n  P.clock += dt * r;\n  P.t += dt;\n  // Eight days of fall on the weights; wound again at the bottom.\n  P.fall += (dt * r) / (8 * 86400);\n  if (P.fall > 1) P.fall -= 1;\n  // The strike is held off while the hands are spun round fast.\n  if (Math.floor(P.clock / 3600) !== hourBefore && P.blows === 0 && r \u003c 3000) {\n    P.blows = Math.floor(P.clock / 3600) % 12 || 12;\n    P.nextBlow = P.t;\n  }\n  if (P.blows > 0 && P.t >= P.nextBlow) {\n    P.blows--;\n    P.flare = 1;\n    P.nextBlow = P.t + 1.5;\n  }\n  P.flare *= Math.exp(-dt / 0.45);\n  // Daylight in the window, eased so days that fly by read as a glow.\n  const h = (P.clock / 3600) % 24;\n  const sun = clamp((h - 5.5) / 2, 0, 1) * clamp((19.5 - h) / 2, 0, 1);\n  P.day += (sun - P.day) * (1 - Math.exp(-dt / 0.8));\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.wood = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  P.rate = rate(speed);\n  const cx = Math.round((-34 + 132 * clamp(k[2], 0, 1)) * 2) / 2;\n  if (cx !== P.candleAt) {\n    P.candleAt = cx;\n    light(P, cx);\n  }\n  P.lampK = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // Eight and a half minutes to ten at night, twelve days into the\n    // moon's month, weights half down; then six seconds at the knob's pace,\n    // so at Speed 2 it strikes ten from 2.5 s on.\n    P.clock = 21 * 3600 + 51.5 * 60;\n    P.age = 12.4;\n    P.fall = 0.45;\n    for (let i = 0; i \u003c 180; i++) advance(P, 1 / 30, speed);\n    P.t = 0;\n    P.nextBlow = 0;\n  }\n  advance(P, dt, speed);\n}\n\nfunction woodColour(w) {\n  const f = w * 3;\n  const i = Math.min(2, Math.floor(f));\n  const u = f - i;\n  return WOODS[i].map((c, j) => c + (WOODS[i + 1][j] - c) * u);\n}\n\n// A line of width w from (x0, y0) to (x1, y1), blended over the buffer.\nfunction stroke(buf, x0, y0, x1, y1, w, c, a) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const L2 = dx * dx + dy * dy || 1;\n  const ya = Math.max(0, Math.floor(Math.min(y0, y1) - w - 1));\n  const yb = Math.min(H - 1, Math.ceil(Math.max(y0, y1) + w + 1));\n  const xa = Math.max(0, Math.floor(Math.min(x0, x1) - w - 1));\n  const xb = Math.min(W - 1, Math.ceil(Math.max(x0, x1) + w + 1));\n  for (let y = ya; y \u003c= yb; y++)\n    for (let x = xa; x \u003c= xb; x++) {\n      const u = clamp(((x - x0) * dx + (y - y0) * dy) / L2, 0, 1);\n      const ex = x - x0 - u * dx;\n      const ey = y - y0 - u * dy;\n      const al = clamp(w + 0.5 - Math.sqrt(ex * ex + ey * ey), 0, 1) * a;\n      if (al \u003c= 0) continue;\n      const p = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[p + i] += (c[i] - buf[p + i]) * al;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const t = P.t;\n  const lk = P.lampK;\n  // The candle breathes and flickers in a draught, and jumps at each blow.\n  const fl = (1 + (1 - lk) * (0.1 * Math.sin(0.62 * t + 0.4) + 0.05 * Math.sin(1.9 * t + 1.1) + 0.03 * Math.sin(5.3 * t + 2) + 0.02 * Math.sin(13.1 * t))) * (1 + 0.22 * P.flare);\n  const L = P.light;\n  // The window: moonlight at night, brighter near the full moon, and\n  // daylight when the clock is run on into the day.\n  const lunar = ((P.age + P.clock / 86400) % 29.53) / 29.53;\n  const full = 0.25 + 0.75 * (0.5 - 0.5 * Math.cos(2 * Math.PI * lunar));\n  for (let i = 0; i \u003c 3; i++) {\n    L[i] = 0.05 + (0.2 - 0.025 * i) * P.day;\n    L[3 + i] = CANDLE[i] * (1 - lk) * fl;\n    L[6 + i] = MOONC[i] * lk * 1.5 * full * (1 - P.day) + SUN[i] * 2.2 * P.day;\n    L[9 + i] = L[i] + L[3 + i] * 0.55 + L[6 + i] * 0.5;\n  }\n  const wood = woodColour(P.wood);\n  for (let m = 0; m \u003c COL.length; m++)\n    for (let i = 0; i \u003c 3; i++) P.pal[m * 3 + i] = m === WOOD ? wood[i] : m === INSIDE ? wood[i] * 0.45 + 6 : COL[m][i];\n  shadeAll(P, buf, L);\n  if (P.flare > 0.02) fret(P, buf);\n  moonDisc(P, buf, L, lunar);\n  hands(P, buf, L);\n  hammer(P, buf, L);\n  pendulum(P, buf, L, t);\n  weights(P, buf, L);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n}\n\n// Every LED lit by the room: ambient, candle and window.\nfunction shadeAll(P, buf, L) {\n  const { mat, tone, spec, lamp, win, sheen, pal } = P;\n  const a0 = L[0];\n  const a1 = L[1];\n  const a2 = L[2];\n  const l0 = L[3];\n  const l1 = L[4];\n  const l2 = L[5];\n  const m0 = L[6];\n  const m1 = L[7];\n  const m2 = L[8];\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const q = mat[p] * 3;\n    const tn = tone[p];\n    const la = lamp[p];\n    const mo = win[p];\n    const s = spec[p] * 255;\n    const g = (s * 0.5 + sheen[p] * 255) * la;\n    const sm = s * 0.3 * mo;\n    buf[o] = pal[q] * tn * (a0 + l0 * la + m0 * mo) + g * l0 + sm * m0;\n    buf[o + 1] = pal[q + 1] * tn * (a1 + l1 * la + m1 * mo) + g * l1 + sm * m1;\n    buf[o + 2] = pal[q + 2] * tn * (a2 + l2 * la + m2 * mo) + g * l2 + sm * m2;\n  }\n}\n\n// At each blow the bell flashes and rings, and the fret round the dial\n// arch catches it.\nfunction fret(P, buf) {\n  const f = P.flare;\n  for (let p = 0; p \u003c 30 * W; p++) {\n    const m = P.mat[p];\n    if (m !== FRET && m !== BELL) continue;\n    const h = m === BELL ? f * (0.6 + 0.4 * Math.sin(P.t * 50 + (p % W))) : f * 0.5 * hash(p, 3);\n    buf[p * 3] += 255 * h;\n    buf[p * 3 + 1] += 205 * h;\n    buf[p * 3 + 2] += 120 * h;\n  }\n  for (let y = 0; y \u003c= 14; y++)\n    for (let x = 20; x \u003c= 44; x++) {\n      const h = 70 * f * Math.exp(-((x - DX) ** 2 + (y - 5) ** 2) / 28);\n      const o = (y * W + x) * 3;\n      buf[o] += h;\n      buf[o + 1] += h * 0.8;\n      buf[o + 2] += h * 0.5;\n    }\n}\n\n// The hammer: an arm up through the moulding to the right of the bell,\n// lifted back before each blow and let fall on it.\nfunction hammer(P, buf, L) {\n  const wait = P.blows > 0 ? P.nextBlow - P.t : 9;\n  const lift = clamp((0.5 - wait) / 0.5, 0, 1) ** 2 * 0.7;\n  const a = -0.45 - lift;\n  const hx = 38 + 6 * Math.sin(a);\n  const hy = 12 - 6 * Math.cos(a);\n  const col = P.hcol;\n  stroke(buf, 38, 12, hx, hy, 0.35, col, 1);\n  stroke(buf, hx - 0.6, hy - 0.4, hx + 0.6, hy + 0.4, 0.9, col, 1);\n}\n\n// The moon disc in the arch, turning once in two lunations, its moon\n// hidden and shown by the two painted humps.\nfunction moonDisc(P, buf, L, lunar) {\n  const phi = Math.PI * (lunar * 2 - 1);\n  const ca = Math.cos(phi);\n  const sa = Math.sin(phi);\n  const d0 = L[0] + L[3] * 0.7 + L[6] * 0.5 + 0.12;\n  const d1 = L[1] + L[4] * 0.7 + L[7] * 0.5 + 0.12;\n  const d2 = L[2] + L[5] * 0.7 + L[8] * 0.5 + 0.12;\n  for (let y = AY - 13; y \u003c AY; y++)\n    for (let x = DX - 13; x \u003c= DX + 13; x++) {\n      const p = y * W + x;\n      if (P.mat[p] !== DARK || hyp(x - DX, y - AY) > AR) continue;\n      let r;\n      let g;\n      let b;\n      const hx = x \u003c DX ? DX - 6.5 : DX + 6.5;\n      if (hyp(x - hx, y - AY) \u003c 6.3) {\n        const land = hyp(x - hx - 1, y - AY + 2) \u003c 3.5;\n        r = land ? 110 : 50;\n        g = land ? 160 : 100;\n        b = land ? 90 : 170;\n      } else {\n        const u = (x - DX) * ca + (y - AY) * sa;\n        const v = (y - AY) * ca - (x - DX) * sa;\n        const dm = Math.min(hyp(u, v + 7.5), hyp(u, v - 7.5));\n        if (dm \u003c 4.3) (r = 245), (g = 232), (b = 190);\n        else if (dm \u003c 5) (r = 200), (g = 170), (b = 110);\n        else if (hash(Math.round(u * 1.3) + 40, Math.round(v * 1.3) + 40) > 0.93) (r = 250), (g = 210), (b = 110);\n        else (r = 28), (g = 46), (b = 120);\n      }\n      buf[p * 3] = r * d0;\n      buf[p * 3 + 1] = g * d1;\n      buf[p * 3 + 2] = b * d2;\n    }\n}\n\n// Hands: blued steel. A hand swept faster than the eye fades to a blur.\nfunction hands(P, buf, L) {\n  const T = P.clock;\n  const r = P.rate;\n  const col = P.hcol;\n  for (let i = 0; i \u003c 3; i++) col[i] = 12 + 30 * L[3 + i] + 20 * L[6 + i] + (i === 2 ? 10 : 0);\n  const hand = (turns, len, w, tail, perFrame) => {\n    const a = turns * 2 * Math.PI;\n    const sx = Math.sin(a);\n    const cy = -Math.cos(a);\n    stroke(buf, DX - sx * tail, DY - cy * tail, DX + sx * len, DY + cy * len, w, col, clamp(1.6 - perFrame / 20, 0.15, 1));\n  };\n  hand(T / 43200, 7.5, 1.2, 2, r / 3600);\n  hand(T / 3600, 12, 0.75, 3, r / 300);\n  const sec = r \u003c 2 ? Math.floor(T) : T;\n  const sa = (sec / 60) * 2 * Math.PI;\n  stroke(buf, DX, SY, DX + 3.2 * Math.sin(sa), SY - 3.2 * Math.cos(sa), 0.3, col, clamp(1.6 - r / 15, 0.2, 1));\n}\n\n// The bob's shadow on the backboard, the rod and the brass bob, beating\n// seconds whatever the clock's own speed.\nfunction pendulum(P, buf, L, t) {\n  const th = Math.asin(ARC / (BOB - PIV)) * Math.sin(Math.PI * t);\n  const bx = DX + (BOB - PIV) * Math.sin(th);\n  const by = PIV + (BOB - PIV) * Math.cos(th);\n  for (let y = Math.floor(by - 5); y \u003c= by + 8; y++)\n    for (let x = Math.floor(bx - 3); x \u003c= bx + 10; x++) {\n      const p = y * W + x;\n      if (P.mat[p] !== INSIDE) continue;\n      const sh = 0.45 + 0.55 * clamp((hyp(x - bx - 3.5, y - by - 1.5) - 3) / 3, 0, 1);\n      buf[p * 3] *= sh;\n      buf[p * 3 + 1] *= sh;\n      buf[p * 3 + 2] *= sh;\n    }\n  const rod = P.rod;\n  for (let i = 0; i \u003c 3; i++) rod[i] = [200, 150, 80][i] * L[9 + i];\n  stroke(buf, DX, DT, bx, by, 0.45, rod, 1);\n  for (let y = Math.floor(by - 6); y \u003c= by + 6; y++)\n    for (let x = Math.floor(bx - 6); x \u003c= bx + 6; x++) {\n      const d = hyp(x - bx, (y - by) * 1.05);\n      if (d > 5.2) continue;\n      const a = clamp(5.2 - d, 0, 1);\n      const shade = 0.75 + 0.3 * ((bx - x) / 5) + 0.15 * ((by - y) / 5);\n      const hl = 255 * Math.exp(-((x - bx + 1.6) ** 2 + (y - by + 1.6) ** 2) / 2.2);\n      const p = (y * W + x) * 3;\n      for (let i = 0; i \u003c 3; i++) {\n        const c = COL[BRASS][i] * shade * (L[9 + i] + 0.15) + hl * (L[3 + i] * 0.8 + L[6 + i] * 0.4);\n        buf[p + i] += (c - buf[p + i]) * a;\n      }\n    }\n}\n\n// Going weight on the right, striking weight on the left, each under a\n// pulley on a doubled cable; the striking train runs down a little faster.\nfunction weights(P, buf, L) {\n  const cab = P.cab;\n  for (let i = 0; i \u003c 3; i++) cab[i] = [110, 100, 90][i] * L[9 + i] + 8;\n  const pul = P.pul;\n  for (let i = 0; i \u003c 3; i++) pul[i] = [150, 120, 70][i] * L[9 + i];\n  for (let w = 0; w \u003c 2; w++) {\n    const wx = w ? 38 : 26;\n    const wy = 64 + 26 * (w ? P.fall : (P.fall * 1.06) % 1);\n    stroke(buf, wx - 1.5, DT, wx - 1.5, wy - 2, 0.2, cab, 0.8);\n    stroke(buf, wx + 1.5, DT, wx + 1.5, wy - 2, 0.2, cab, 0.8);\n    stroke(buf, wx - 1.5, wy - 2.5, wx + 1.5, wy - 2.5, 0.6, pul, 1);\n    for (let y = Math.round(wy); y \u003c= wy + 12; y++)\n      for (let x = wx - 2; x \u003c= wx + 2; x++) {\n        const p = (y * W + x) * 3;\n        const cyl = Math.cos(((x - wx + 0.6) / 3) * 1.4);\n        for (let i = 0; i \u003c 3; i++) buf[p + i] = COL[BRASS][i] * (0.35 + 0.75 * cyl) * (L[9 + i] + 0.1) + 96 * cyl ** 8 * L[3 + i];\n      }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Wood=0..1, Speed=0..3, Candle=0..1, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Wood","min":0,"max":1,"about":"The case, from honey oak at 0 through walnut and red mahogany to ebonised black at 1."},{"name":"Speed","min":0,"max":3,"about":"How fast the clock's time runs: real time at 0, a minute a second at 2 so the hands move and it strikes the hour once a minute, and at 3 a day goes by in under a second, the weights sink, the moon turns and daylight comes and goes in the window."},{"name":"Candle","min":0,"max":1,"about":"Where the candle stands: off the left edge at 0, in front of the clock at 0.5, off the right edge at 1, and the case's shadow on the wall swings round to the other side."},{"name":"Lamp","min":0,"max":1,"about":"The light in the room, from the flickering candle at 0 to steady blue moonlight through a window on the upper right at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.144,"detail":0.0765,"edges":0.4175,"complexity":2.1824,"coverage":0.9202,"colour":0.2877,"drift":0.0825},"knobResponse":[0.0907,0.1391,0.1097,0.2042]},{"slug":"lunation","title":"Lunation","family":"celestial","round":16,"note":"망원 렌즈로 본 한 달을 빠르게 돌려요. 패널 너비만 한 달이 지구조에 비친 초승달에서 보름달로 차오르며 달의 바다와 크레이터를 드러내고, 하늘도 같이 밝아져요. K1 을 누르면 다음 보름에 개기월식이 들어 달이 구릿빛이 돼요.","idea":"One synodic month sped up through a long lens: a Moon as wide as the panel grows from a crescent in earthshine to full, the terminator uncovering maria and craters as the sky over a far ridge brightens with it.","buttons":"K1 tap books a total lunar eclipse for the next full Moon: the month holds still while the Earth's shadow crosses, its umbra edged in turquoise, the Moon copper red, the stars back.","code":"// ===== Patternflow pattern =====\n// Title:   Lunation\n// Family:  celestial\n// Idea:    One synodic month sped up through a long lens: a Moon as wide as the panel grows from a crescent in earthshine to full, the terminator uncovering maria and craters as the sky over a far ridge brightens with it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: lunar phase time-lapses, one lunation of 29.53 days photographed night after night through a telephoto lens\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Latitude=-90..90, Days=0.5..4, Zoom=0..1, Exposure=-2..2\n//\n// Knob 1: Latitude. Where the camera stands, which turns the Moon's face against the horizon: at the equator, where it opens, the crescent lies on its back like a boat; at the North Pole north is up and it is lit from the right; at the South Pole the face hangs upside down.\n// Knob 2: Days. Days of the month a second: at 2 the crescent of day 2.6 is full six seconds later and a lunation takes 15 seconds; 0.5 to 4.\n// Knob 3: Zoom. The lens: at 0 the disc is 60 LEDs across, the panel's width; turned up it magnifies 2.5 times until maria, craters and the terminator fill the frame.\n// Knob 4: Exposure. Stops either side of a full-Moon exposure: two down, earthshine and faint stars go black; two up, the dark side shows its maria and the lit Moon burns out white.\n// Buttons: K1 tap books a total lunar eclipse for the next full Moon: the month holds still while the Earth's shadow crosses, its umbra edged in turquoise, the Moon copper red, the stars back.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst DEG = Math.PI / 180;\nconst TAU = Math.PI * 2;\n// The Moon's centre and radius at the widest field: 58 km a LED.\nconst CX = 32;\nconst CY = 56;\nconst R0 = 30;\n// The face: a 128x128 orthographic map of the near side, north up, 27 km a\n// texel, about a texel a LED at the closest zoom.\nconst TEX = 128;\nconst SYNODIC = 29.530589;\n// The Lab opens 1.43 days before new moon, so at 2 days a second the window\n// the study measures, 2 to 8 s, is day 2.57 to 14.57 and ends 0.1 s short of\n// full, while every LED is still only brightening.\nconst DAY0 = -1.43;\n// Sun elevation over which ground past the terminator goes from black to\n// fully lit: 12.6 degrees, six LEDs at the disc's centre.\nconst W0 = 0.22;\n// Earthshine at a seventh of full sunlight, as an exposure made for it shows\n// it, blue from the Earth's oceans; then sunlight on highland and on mare.\nconst ES = 0.15;\nconst ES_COL = [0.66, 0.78, 1.0];\nconst HI_COL = [1.0, 0.965, 0.885];\nconst MA_COL = [0.93, 0.95, 1.0];\n// Samples round the limb that light the aureole, and the Gaussian, 3 samples\n// wide, that spreads each over its neighbours.\nconst LIMB = 64;\nconst SPREAD = [];\nfor (let k = -6; k \u003c= 6; k++) SPREAD.push(Math.exp(-(k * k) / 18));\nconst SPREAD_SUM = SPREAD.reduce((a, b) => a + b, 0);\n// Eclipse: umbra and penumbra in Moon radii, the path's offset from the\n// shadow's axis, the seconds it takes.\nconst UMBRA = 2.65;\nconst PENUMBRA = 4.6;\nconst GAMMA = -0.42;\nconst ECL_T = 12;\n\n// Maria as caps on the sphere: latitude, longitude (east, toward Crisium, is\n// right), angular radius in degrees, how much darker than highland.\nconst MARIA = [\n  // Imbrium; Serenitatis, paler than its neighbours; Tranquillitatis\n  [33, -16, 17, 0.4], [40, -28, 9, 0.38], [24, -3, 7.5, 0.36], [28, 17.5, 10.5, 0.31],\n  [8, 26, 10, 0.46], [12, 35, 7, 0.46], [1, 38, 7, 0.45], [-1, 44, 5, 0.42],\n  // Crisium, Fecunditatis, Nectaris, Nubium, Humorum, Cognitum\n  [17, 59.1, 8.5, 0.47], [-4, 51, 8.5, 0.39], [-13, 49, 7, 0.37], [-15.2, 35.5, 5.5, 0.38],\n  [-20, -16, 10, 0.35], [-15, -8, 5, 0.3], [-24.4, -38.6, 6.6, 0.42], [-10, -22, 7, 0.35],\n  // Insularum round Copernicus, Vaporum, Sinus Aestuum, Sinus Medii\n  [8, -28, 9, 0.38], [14, 4, 5, 0.35], [11, -8, 6, 0.32], [2, 2, 4.5, 0.24],\n  // Oceanus Procellarum, north to south\n  [42, -50, 10, 0.38], [30, -55, 13, 0.42], [17, -58, 13, 0.44], [24, -42, 8, 0.41],\n  [12, -45, 10, 0.41], [4, -56, 12, 0.42], [-5, -50, 10, 0.38], [-12, -42, 7, 0.34],\n  // Frigoris, a ragged band across the north\n  [58, -45, 4.5, 0.3], [55, -35, 5.2, 0.33], [57.5, -24, 4, 0.32], [55.5, -13, 4.4, 0.33],\n  [57, -2, 3.8, 0.3], [55, 9, 4.6, 0.32], [56.5, 20, 4, 0.3], [54, 31, 4.4, 0.29], [52, 40, 3.2, 0.26],\n  // Lacus Somniorum; Smythii, Marginis and Australe on the east limb\n  [37, 31, 5, 0.24], [-2, 86, 4.5, 0.34], [13, 86, 3.8, 0.3], [-40, 86, 6, 0.24],\n];\n// Mountain rings of the big basins: centre, radius in degrees, height. Where\n// a ring stands on highland it is the Apennines, the Caucasus, the Alps.\nconst RINGS = [[32.8, -15.6, 19.5, 0.022], [28, 17.5, 11.8, 0.014], [17, 59.1, 9.6, 0.012], [-15.2, 35.5, 8, 0.01], [-24.4, -38.6, 7.6, 0.008]];\n// Named craters: latitude, longitude, km across, kind (0 plain, 1 young and\n// rayed, 2 dark floor, 3 flooded flat floor).\nconst CRATERS = [\n  // Tycho, Copernicus, Kepler, Aristarchus, Proclus, Menelaus\n  [-43.3, -11.2, 85, 1], [9.6, -20.1, 93, 1], [8.1, -38, 32, 1], [23.7, -47.4, 40, 1], [16.2, 46.8, 28, 1], [16.3, 16, 27, 1],\n  // Plato, Grimaldi, Endymion, Clavius, Ptolemaeus, Alphonsus, Arzachel, Theophilus\n  [51.6, -9.4, 101, 2], [-5.2, -68.6, 173, 2], [53.9, 57, 123, 2], [-58.4, -14.4, 231, 0], [-9.3, -1.9, 153, 3], [-13.4, -2.8, 119, 0], [-18.2, -1.9, 97, 0], [-11.4, 26.4, 100, 0],\n  // Langrenus, Petavius, Vendelinus, Archimedes, Eratosthenes, Maginus, Longomontanus, Schickard\n  [-8.9, 61.1, 132, 0], [-25.1, 60.4, 177, 0], [-16.3, 61.6, 147, 3], [29.7, -4, 83, 3], [14.5, -11.3, 58, 0], [-50, -6.2, 194, 0], [-49.6, -21.7, 145, 0], [-44.3, -54.6, 206, 2],\n  // Gassendi, Posidonius, Atlas, Albategnius, Hipparchus, Stofler, Janssen, Deslandres, Aristoteles, Bailly\n  [-17.6, -40.1, 110, 3], [31.8, 29.9, 95, 3], [46.7, 44.4, 87, 0], [-11.2, 4.1, 129, 0], [-5.1, 5.2, 138, 3], [-41.1, 6, 126, 0], [-44.9, 41.5, 199, 0], [-32.5, -5.2, 234, 3], [50.2, 17.4, 87, 0], [-66.5, -69.1, 303, 0],\n];\n// Ray systems of the first six: rays, e-folding length in radians, strength.\nconst RAYS = [[18, 0.34, 0.15], [12, 0.14, 0.14], [9, 0.08, 0.12], [7, 0.06, 0.14], [6, 0.09, 0.1], [5, 0.05, 0.08]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise on a 64x64 lattice; a seed shifts it so uses do not line up.\nconst LATTICE = new Float32Array(4096);\nfor (let i = 0; i \u003c 4096; i++) LATTICE[i] = hash(i, 977);\n\nfunction noise(x, y, s) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const ux = (x - ix) * (x - ix) * (3 - 2 * (x - ix));\n  const uy = (y - iy) * (y - iy) * (3 - 2 * (y - iy));\n  const i0 = (ix + s * 17) & 63;\n  const i1 = (i0 + 1) & 63;\n  const j0 = ((iy + s * 29) & 63) \u003c\u003c 6;\n  const j1 = (j0 + 64) & 4095;\n  const a = LATTICE[j0 + i0];\n  const b = LATTICE[j0 + i1];\n  const c = LATTICE[j1 + i0];\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + LATTICE[j1 + i1]) * ux * uy;\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp01((v - a) / (b - a));\n  return t * t * (3 - 2 * t);\n}\n\n// A unit vector on the near side: x right (east), y north, z toward Earth.\nfunction dir(lat, lon) {\n  const cb = Math.cos(lat * DEG);\n  return [cb * Math.sin(lon * DEG), Math.sin(lat * DEG), cb * Math.cos(lon * DEG)];\n}\n\n// Calls fn for each texel within angle `reach` of c.\nfunction box(c, reach, fn) {\n  const span = Math.ceil((Math.min(2, reach) * TEX) / 2) + 1;\n  const ci = Math.floor(((c[0] + 1) / 2) * TEX);\n  const cj = Math.floor(((1 - c[1]) / 2) * TEX);\n  for (let j = Math.max(0, cj - span); j \u003c= Math.min(TEX - 1, cj + span); j++)\n    for (let i = Math.max(0, ci - span); i \u003c= Math.min(TEX - 1, ci + span); i++) fn(j * TEX + i);\n}\n\nfunction angle(F, t, c) {\n  return Math.acos(Math.min(1, F.px[t] * c[0] + F.py[t] * c[1] + F.pz[t] * c[2]));\n}\n\n// A texel's place on the sphere, its highland albedo and roughness, and a\n// noise-pushed place to look the maria up from, so every shore wobbles 100\n// to 200 km. Texels outside the disc copy the limb.\nfunction texelInit(F, t, u, v) {\n  const rr = u * u + v * v;\n  const k = rr > 0.9995 ? Math.sqrt(0.9995 / rr) : 1;\n  const x = (u *= k);\n  const y = -(v *= k);\n  const z = Math.sqrt(Math.max(0, 1 - u * u - v * v));\n  F.px[t] = x;\n  F.py[t] = y;\n  F.pz[t] = z;\n  // Albedo wanders a tenth over a few hundred km, the south, sprayed by\n  // Tycho, is brighter, and a texel-sized grain keeps the zoom from smoothing.\n  F.alb[t] = 0.88 + 0.1 * noise(u * 5 + 3, v * 5 + 5, 1) + 0.08 * noise(u * 14, v * 14, 2) + 0.05 * v + 0.06 * noise(u * 47, v * 47, 12);\n  F.hgt[t] = 0.004 * (noise(u * 40, v * 40, 3) - 0.5);\n  const wx = x + 0.07 * (noise(x * 5 + 1, y * 5, 7) - 0.5) + 0.025 * (noise(x * 19, y * 19, 4) - 0.5);\n  const wy = y + 0.07 * (noise(x * 5, y * 5 + 4, 10) - 0.5) + 0.025 * (noise(x * 19 + 7, y * 19, 11) - 0.5);\n  const l = Math.sqrt(wx * wx + wy * wy + z * z);\n  F.wx[t] = wx / l;\n  F.wy[t] = wy / l;\n  F.wz[t] = z / l;\n}\n\n// Lava is flat and low, and darker by the mare's depth, unevenly.\nfunction lava(F, t, m) {\n  F.mare[t] = m;\n  F.alb[t] *= 1 - m * (0.8 + 0.3 * noise(F.px[t] * 9, F.py[t] * 9, 5) + 0.12 * noise(F.px[t] * 30, F.py[t] * 30, 8));\n  F.hgt[t] -= 0.03 * m;\n}\n\n// A crater: bowl, rim, a central peak if big, and albedo: fresh ones bright,\n// Plato's kind dark-floored.\nfunction crater(F, la, lo, km, kind, seed) {\n  const c = dir(la, lo);\n  const rho = km / 2 / 1737;\n  const depth = rho * (kind === 3 ? 0.06 : kind === 1 ? 0.24 : 0.16 + 0.06 * hash(seed, 1));\n  const peak = km > 70 && kind !== 3 ? depth * 0.5 : 0;\n  const flat = kind === 3 || km > 150 ? 6 : 2;\n  const rimA = 0.04 * hash(seed, 3) - 0.01;\n  box(c, rho * 1.8, (t) => {\n    const r = angle(F, t, c) / rho;\n    if (r > 1.8) return;\n    let h = depth * 0.35 * Math.exp(-(((r - 1) / 0.22) ** 2));\n    if (r \u003c 1) h -= depth * (1 - r ** flat);\n    if (peak) h += peak * Math.exp(-((r / 0.16) ** 2));\n    F.hgt[t] += h;\n    if (kind === 1 && r \u003c 1.5) F.alb[t] += 0.3 * (1 - smooth(0.9, 1.5, r));\n    else if (kind === 0) F.alb[t] += rimA * Math.exp(-(((r - 1) / 0.25) ** 2)) - (r \u003c 0.8 ? 0.03 : 0);\n    if (kind === 2 && r \u003c 1) F.alb[t] *= 0.62 + 0.38 * smooth(0.75, 1, r);\n  });\n}\n\n// A rayed crater's light at a texel. Rays start past the dark collar of\n// fresh ejecta, broad and faint, not spokes; only the two either side of\n// the texel's bearing can reach it.\nfunction rayLight(F, t, ci, c, rho, count, len) {\n  const d = angle(F, t, c);\n  if (d > Math.min(Math.PI, len * 4) || d \u003c 1.2 * rho) return 0;\n  const x = F.px[t] - c[0];\n  const y = F.py[t] - c[1];\n  const z = F.pz[t] - c[2];\n  const e = Math.hypot(c[0], c[2]);\n  const th = Math.atan2(y * e - (c[1] * (x * c[0] + z * c[2])) / e, (x * c[2] - z * c[0]) / e);\n  const k0 = Math.floor(((th \u003c 0 ? th + TAU : th) / TAU) * count);\n  const across = Math.sin(d) / (0.012 + 0.03 * d);\n  let sum = 0;\n  for (let kk = k0 - 1; kk \u003c= k0 + 1; kk++) {\n    const k = (kk + count) % count;\n    const id = ci * 31 + k;\n    let dt = th - ((k + 0.8 * hash(id, 21)) / count) * TAU;\n    dt -= Math.round(dt / TAU) * TAU;\n    const lateral = Math.abs(dt) * across;\n    if (lateral \u003c 3) sum += (0.4 + 0.8 * hash(id, 23)) * Math.exp(-lateral * lateral - d / (len * (0.45 + 1.1 * hash(id, 22))));\n  }\n  return Math.min(1, sum) * smooth(1.6 * rho, 4 * rho, d);\n}\n\n// The face map: albedo, how much mare, and the slope the Sun sees.\nfunction buildFace(P) {\n  const T = TEX * TEX;\n  const F = {};\n  for (const key of [\"px\", \"py\", \"pz\", \"alb\", \"hgt\", \"wx\", \"wy\", \"wz\", \"mare\", \"field\", \"dark\"]) F[key] = new Float32Array(T);\n  for (let j = 0; j \u003c TEX; j++) for (let i = 0; i \u003c TEX; i++) texelInit(F, j * TEX + i, ((i + 0.5) / TEX) * 2 - 1, ((j + 0.5) / TEX) * 2 - 1);\n  // Maria: caps add up as a steep field, so only neighbours that touch join,\n  // with a rounded neck, as Serenitatis runs into Tranquillitatis.\n  for (const [la, lo, rad, dark] of MARIA) {\n    const c = dir(la, lo);\n    const rho = rad * DEG;\n    const near = Math.cos(1.6 * rho);\n    box(c, 1.6 * rho + 0.06, (t) => {\n      const cd = F.wx[t] * c[0] + F.wy[t] * c[1] + F.wz[t] * c[2];\n      if (cd \u003c near) return;\n      const d = Math.acos(Math.min(1, cd)) / rho;\n      const w = Math.exp(-3 * d * d);\n      F.field[t] += w;\n      F.dark[t] += w * dark;\n    });\n  }\n  for (let t = 0; t \u003c T; t++) if (F.field[t] > 0.02) lava(F, t, smooth(0.035, 0.12, F.field[t]) * (F.dark[t] / F.field[t]));\n  // Basin rings: a band of peaks a tenth of the radius wide, only on highland.\n  for (const [la, lo, rad, tall] of RINGS) {\n    const c = dir(la, lo);\n    const rho = rad * DEG;\n    box(c, 1.35 * rho, (t) => {\n      const d = angle(F, t, c) / rho;\n      if (d \u003c 0.75 || d > 1.35) return;\n      const peaks = 0.4 + noise(F.px[t] * 70, F.py[t] * 70, 6) * 1.2;\n      F.hgt[t] += tall * Math.exp(-(((d - 1.04) / 0.12) ** 2)) * peaks * (1 - clamp01(F.mare[t] / 0.3));\n    });\n  }\n  CRATERS.forEach(([la, lo, km, kind], n) => crater(F, la, lo, km, kind, n));\n  // 420 random craters, 40 to 180 km, saturate the highlands, not the maria.\n  for (let n = 0; n \u003c 420; n++) {\n    const z = hash(n, 11);\n    const a = hash(n, 12) * TAU;\n    const x = Math.sqrt(1 - z * z) * Math.cos(a);\n    const y = Math.sqrt(1 - z * z) * Math.sin(a);\n    const t = Math.min(TEX - 1, Math.floor(((1 - y) / 2) * TEX)) * TEX + Math.min(TEX - 1, Math.floor(((x + 1) / 2) * TEX));\n    if (F.mare[t] > 0.15 && hash(n, 13) > 0.2) continue;\n    crater(F, Math.asin(y) / DEG, Math.atan2(x, z) / DEG, 40 * Math.pow(4.5, Math.pow(hash(n, 14), 1.7)), 0, 1000 + n);\n  }\n  RAYS.forEach(([count, len, power], ci) => {\n    const c = dir(CRATERS[ci][0], CRATERS[ci][1]);\n    const rho = CRATERS[ci][2] / 2 / 1737;\n    box(c, len * 4, (t) => {\n      const d = angle(F, t, c);\n      F.alb[t] += power * rayLight(F, t, ci, c, rho, count, len) + (d > 1.2 * rho ? 0.1 * Math.exp(-(((d - 1.6 * rho) / (1.6 * rho)) ** 2)) : 0);\n    });\n  });\n  // Slope along the Sun's path, positive toward a Sun rising on the right.\n  const slope = new Float32Array(T);\n  for (let t = 1; t \u003c T - 1; t++) {\n    if (t % TEX === 0 || t % TEX === TEX - 1) continue;\n    const cosl = F.pz[t] / Math.sqrt(F.px[t] * F.px[t] + F.pz[t] * F.pz[t] + 1e-9);\n    const s = (-(F.hgt[t + 1] - F.hgt[t - 1]) / (4 / TEX)) * cosl;\n    slope[t] = s > 0.28 ? 0.28 : s \u003c -0.28 ? -0.28 : s;\n  }\n  for (let t = 0; t \u003c T; t++) F.alb[t] = Math.min(1.15, Math.max(0.3, F.alb[t]));\n  P.alb = F.alb;\n  P.slope = slope;\n  P.mare = F.mare;\n}\n\nfunction sample(arr, u, v) {\n  const fx = Math.min(TEX - 1.0001, Math.max(0, ((u + 1) / 2) * TEX - 0.5));\n  const fy = Math.min(TEX - 1.0001, Math.max(0, ((v + 1) / 2) * TEX - 0.5));\n  const t = (fy | 0) * TEX + (fx | 0);\n  const tx = fx - (fx | 0);\n  const a = arr[t] + (arr[t + 1] - arr[t]) * tx;\n  const b = arr[t + TEX] + (arr[t + TEX + 1] - arr[t + TEX]) * tx;\n  return a + (b - a) * (fy - (fy | 0));\n}\n\n// The far ridge's top, in scene rows, with spruce on it, each a one-LED\n// spire over a body three LEDs wide.\nfunction ridge(x, trees) {\n  let y = 113 + 2.6 * Math.sin(x * 0.08 - 0.9) + 1.2 * Math.sin(x * 0.23 + 1.7);\n  const cell = Math.floor(x / 4.3);\n  for (let k = cell - 2; trees && k \u003c= cell + 2; k++) {\n    const tx = (k + 0.2 + 0.6 * hash(k, 32)) * 4.3;\n    const dx = Math.abs(x - tx);\n    if (hash(k, 31) \u003c 0.5 && dx \u003c 1.9) y = Math.min(y, ridge(tx, false) - (4 + 6 * hash(k, 33)) * (1 - dx / 1.9) ** 1.4);\n  }\n  return y;\n}\n\n// Per-LED geometry for a latitude and zoom: where on the face it looks, its\n// sky, its star.\nfunction buildView(P, lat, zoom) {\n  const m = 1 + 1.5 * zoom;\n  const R = R0 * m;\n  const th = (90 - lat) * DEG;\n  const ct = Math.cos(th);\n  const st = Math.sin(th);\n  const top = [];\n  for (let x = 0; x \u003c W; x++) top.push(ridge(CX + (x + 0.5 - CX) / m, true));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const o = p * 3;\n    const dx = x + 0.5 - CX;\n    const dy = ((p / W) | 0) + 0.5 - CY;\n    const dist = Math.sqrt(dx * dx + dy * dy);\n    const sy = CY + dy / m;\n    // The sky without a Moon and what a full one adds, and the glow: a tight\n    // aureole lit by the limb beside it, so a crescent wears a crescent of\n    // glow, and a wide one lit by the whole.\n    const ty = clamp01(sy / 112);\n    const dd = Math.max(0, dist - R) / m;\n    const wide = 27 * Math.exp(-dd / 13);\n    P.night[o] = 1 + 3 * ty * ty;\n    P.night[o + 1] = 2 + 6 * ty * ty;\n    P.night[o + 2] = 7 + 14 * ty;\n    P.lift[o] = 5 + 7.5 * ty + wide * 0.78;\n    P.lift[o + 1] = 11.5 + 13 * ty + wide * 0.85;\n    P.lift[o + 2] = 28 + 20 * ty + wide;\n    P.near[p] = 62 * Math.exp(-dd / 3.5);\n    const turn = Math.atan2(dy, dx) / TAU;\n    P.bin[p] = (turn - Math.floor(turn)) * LIMB;\n    P.ground[p] = sy > top[x] ? 1 : 0;\n    const a = clamp01(R - dist + 0.5);\n    P.alpha[p] = a;\n    if (a \u003c= 0) continue;\n    const shrink = Math.min(1, Math.sqrt(0.996 / ((dist * dist) / (R * R))));\n    const qx = (dx / R) * shrink;\n    const qy = (dy / R) * shrink;\n    const u = qx * ct + qy * st;\n    const v = -qx * st + qy * ct;\n    P.fu[p] = u;\n    P.fv[p] = v;\n    P.alb[p] = sample(P.face.alb, u, v);\n    P.slp[p] = sample(P.face.slope, u, v);\n    P.mar[p] = sample(P.face.mare, u, v);\n    P.lam[p] = Math.atan2(u, Math.sqrt(Math.max(0, 1 - u * u - v * v)));\n    P.cb[p] = Math.sqrt(Math.max(0, 1 - v * v));\n  }\n  for (let j = 0; j \u003c LIMB; j++) {\n    const qx = 0.94 * Math.cos((j / LIMB) * TAU);\n    const qy = 0.94 * Math.sin((j / LIMB) * TAU);\n    const u = qx * ct + qy * st;\n    const v = -qx * st + qy * ct;\n    P.limbU[j] = u;\n    P.limbV[j] = v;\n    P.limbLam[j] = Math.atan2(u, Math.sqrt(Math.max(0, 1 - u * u - v * v)));\n    P.limbCb[j] = Math.sqrt(1 - v * v);\n  }\n  // Stars turn with the face and stay one LED at any zoom.\n  P.star.fill(0);\n  const cs = Math.cos(th - Math.PI / 2);\n  const ss = Math.sin(th - Math.PI / 2);\n  for (const s of P.stars) {\n    const x = Math.floor(CX + (s[0] * cs - s[1] * ss) * m);\n    const y = Math.floor(CY + (s[0] * ss + s[1] * cs) * m);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = y * W + x;\n    if (P.alpha[p] > 0 || P.ground[p]) continue;\n    for (let c = 0; c \u003c 3; c++) P.star[p * 3 + c] = Math.max(P.star[p * 3 + c], s[2] * s[3 + c]);\n  }\n  P.viewLat = lat;\n  P.viewZoom = zoom;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.face = {};\n  buildFace(P.face);\n  for (const key of [\"night\", \"lift\", \"star\"]) P[key] = new Float32Array(N * 3);\n  for (const key of [\"alpha\", \"fu\", \"fv\", \"alb\", \"slp\", \"mar\", \"lam\", \"cb\", \"near\", \"bin\"]) P[key] = new Float32Array(N);\n  for (const key of [\"limbU\", \"limbV\", \"limbLam\", \"limbCb\", \"limbRaw\", \"limb\"]) P[key] = new Float32Array(LIMB);\n  P.ground = new Uint8Array(N);\n  // Stars, most at the limit of the eye, a few bright, some warm.\n  P.stars = [];\n  for (let n = 0; n \u003c 420; n++) {\n    const r = 112 * Math.sqrt(hash(n, 41));\n    const a = hash(n, 42) * TAU;\n    const mag = hash(n, 43);\n    const warm = hash(n, 44);\n    const col = warm \u003c 0.2 ? [1, 0.82, 0.62] : warm > 0.8 ? [0.78, 0.88, 1] : [0.95, 0.95, 1];\n    P.stars.push([r * Math.cos(a), r * Math.sin(a), 30 + 46 * mag * mag + (mag > 0.93 ? (120 * (mag - 0.93)) / 0.07 : 0), ...col]);\n  }\n  P.day = DAY0;\n  P.pending = false;\n  P.eclipse = -1;\n  P.viewLat = 1e9;\n  P.E = 0;\n  P.shadowU = 0;\n  P.gain = 1;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  if (!P.face) setup(P);\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const lat = Math.max(-90, Math.min(90, k[0]));\n  const zoom = clamp01(k[2]);\n  if (input.btnPressed && input.btnPressed[0] && P.eclipse \u003c 0) P.pending = true;\n  if (Math.abs(lat - P.viewLat) > 0.05 || Math.abs(zoom - P.viewZoom) > 0.0005) buildView(P, lat, zoom);\n  P.gain = Math.pow(2, Math.max(-2, Math.min(2, k[3])));\n  if (P.eclipse >= 0) {\n    P.eclipse += dt;\n    if (P.eclipse >= ECL_T) {\n      P.eclipse = -1;\n      P.pending = false;\n    }\n  } else {\n    const before = Math.floor(P.day / SYNODIC + 0.5);\n    P.day += Math.max(0.5, Math.min(4, k[1])) * dt;\n    const after = Math.floor(P.day / SYNODIC + 0.5);\n    // A booked eclipse stops the clock at full Moon, half a month in.\n    if (P.pending && after > before) {\n      P.day = (after - 0.5) * SYNODIC;\n      P.eclipse = 0;\n    }\n  }\n  const f = P.day / SYNODIC;\n  P.E = (f - Math.floor(f)) * TAU;\n  // The shadow crosses east to west, slowest over totality.\n  const q = (2 * Math.max(0, P.eclipse)) / ECL_T - 1;\n  P.shadowU = 5.7 * (0.6 * q + 0.4 * q * q * q);\n}\n\n// Sunlight reaching a point in the Earth's shadow, per channel: penumbra\n// greys it, the umbra leaves the copper of every sunset on Earth, and the\n// ozone layer edges the umbra in turquoise.\nfunction shadowInto(out, r) {\n  if (r > UMBRA + 0.06) {\n    const p = r >= PENUMBRA ? 0 : Math.pow((PENUMBRA - r) / (PENUMBRA - UMBRA), 1.6);\n    out[0] = 1 - 0.8 * p;\n    out[1] = 1 - 0.83 * p;\n    out[2] = 1 - 0.86 * p;\n    return;\n  }\n  const deep = 0.16 + 0.2 * (r / UMBRA) ** 2;\n  const edge = smooth(UMBRA - 0.12, UMBRA + 0.06, r);\n  const fringe = Math.exp(-(((r - UMBRA + 0.1) / 0.09) ** 2));\n  out[0] = deep + edge * 0.2;\n  out[1] = deep * 0.3 + edge * 0.17 + fringe * 0.06;\n  out[2] = deep * 0.1 + edge * 0.14 + fringe * 0.07;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.face) return;\n  const E = P.E;\n  // Sunrise terminator at longitude 90 - E, sunset at 270 - E, held at the\n  // right limb until full, so on the way to full nothing ever darkens.\n  const lt = Math.PI / 2 - E;\n  const ls = Math.PI * 1.5 - Math.max(E, Math.PI);\n  // Lit fraction, and surface brightness, steep in the last day before full:\n  // the opposition surge.\n  const kf = (1 - Math.cos(E)) / 2;\n  const g = 0.6 + 0.3 * Math.pow(kf, 0.9) + 0.1 * Math.exp(-Math.abs(E - Math.PI) / 0.12);\n  let moonlight = kf * g;\n  const ecl = P.eclipse >= 0;\n  const sh = [1, 1, 1];\n  const shade = (u, v) => {\n    shadowInto(sh, Math.hypot(u - P.shadowU, v - GAMMA));\n    return sh[0] * 0.3 + sh[1] * 0.6 + sh[2] * 0.1;\n  };\n  // The aureole's light by limb sample, spread 17 degrees either way; each\n  // only brightens on the way to full, so the glow does too. In an eclipse\n  // the sky dims with the shadow's mean round the limb.\n  let dim = 0;\n  for (let j = 0; j \u003c LIMB; j++) {\n    const cb = P.limbCb[j];\n    const lam = P.limbLam[j];\n    const t = clamp01((Math.min((lam - lt) * cb, (ls - lam) * cb + 0.05) + 0.01) / W0);\n    const f = ecl ? shade(P.limbU[j], P.limbV[j]) : 1;\n    dim += f / LIMB;\n    P.limbRaw[j] = (ES + (g - ES) * t * (2 - t)) * f;\n  }\n  moonlight *= dim;\n  for (let j = 0; j \u003c LIMB; j++) {\n    let sum = 0;\n    for (let k = -6; k \u003c= 6; k++) sum += SPREAD[k + 6] * P.limbRaw[(j + k + LIMB) % LIMB];\n    P.limb[j] = sum / SPREAD_SUM;\n  }\n  const gain = P.gain;\n  const esR = ES * ES_COL[0];\n  const esG = ES * ES_COL[1];\n  const esB = ES * ES_COL[2];\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    let r = P.night[o] + moonlight * P.lift[o];\n    let gg = P.night[o + 1] + moonlight * P.lift[o + 1];\n    let b = P.night[o + 2] + moonlight * P.lift[o + 2];\n    const near = P.near[p];\n    if (near > 0.3) {\n      const j = P.bin[p] | 0;\n      const glow = near * (P.limb[j] + (P.limb[(j + 1) % LIMB] - P.limb[j]) * (P.bin[p] - j));\n      r += glow * 0.78;\n      gg += glow * 0.85;\n      b += glow;\n    }\n    if (P.star[o + 2] > 0) {\n      r = Math.max(r, P.star[o]);\n      gg = Math.max(gg, P.star[o + 1]);\n      b = Math.max(b, P.star[o + 2]);\n    }\n    if (P.ground[p]) {\n      r = 1;\n      gg = 1.5;\n      b = 3;\n    } else if (P.alpha[p] > 0) {\n      // Earthshine, and sunlight by the Sun's height over the ground, slope\n      // included, so walls facing dawn light first and peaks shine past it.\n      const a = P.alpha[p];\n      const cb = P.cb[p];\n      const lam = P.lam[p];\n      const s = P.slp[p];\n      const t = clamp01((Math.min((lam - lt) * cb + s, (ls - lam) * cb - s + 0.05) + 0.01) / W0);\n      const F = t * (2 - t);\n      const al = P.alb[p] * 255;\n      const ma = P.mar[p] > 0.4 ? g : g * 2.5 * P.mar[p];\n      let sr = g * HI_COL[0] + (MA_COL[0] - HI_COL[0]) * ma;\n      let sg = g * HI_COL[1] + (MA_COL[1] - HI_COL[1]) * ma;\n      let sb = g * HI_COL[2] + (MA_COL[2] - HI_COL[2]) * ma;\n      if (ecl) {\n        shadowInto(sh, Math.hypot(P.fu[p] - P.shadowU, P.fv[p] - GAMMA));\n        sr *= sh[0];\n        sg *= sh[1];\n        sb *= sh[2];\n      }\n      r += (al * (esR + (sr - esR) * F) - r) * a;\n      gg += (al * (esG + (sg - esG) * F) - gg) * a;\n      b += (al * (esB + (sb - esB) * F) - b) * a;\n    }\n    r *= gain;\n    gg *= gain;\n    b *= gain;\n    display.setPixel(p % W, (p / W) | 0, r > 255 ? 255 : r, gg > 255 ? 255 : gg, b > 255 ? 255 : b);\n  }\n}\n","layer":{"id":"layer-lunation","type":"code","name":"lunation","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Lunation\n// Family:  celestial\n// Idea:    One synodic month sped up through a long lens: a Moon as wide as the panel grows from a crescent in earthshine to full, the terminator uncovering maria and craters as the sky over a far ridge brightens with it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: lunar phase time-lapses, one lunation of 29.53 days photographed night after night through a telephoto lens\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Latitude=-90..90, Days=0.5..4, Zoom=0..1, Exposure=-2..2\n//\n// Knob 1: Latitude. Where the camera stands, which turns the Moon's face against the horizon: at the equator, where it opens, the crescent lies on its back like a boat; at the North Pole north is up and it is lit from the right; at the South Pole the face hangs upside down.\n// Knob 2: Days. Days of the month a second: at 2 the crescent of day 2.6 is full six seconds later and a lunation takes 15 seconds; 0.5 to 4.\n// Knob 3: Zoom. The lens: at 0 the disc is 60 LEDs across, the panel's width; turned up it magnifies 2.5 times until maria, craters and the terminator fill the frame.\n// Knob 4: Exposure. Stops either side of a full-Moon exposure: two down, earthshine and faint stars go black; two up, the dark side shows its maria and the lit Moon burns out white.\n// Buttons: K1 tap books a total lunar eclipse for the next full Moon: the month holds still while the Earth's shadow crosses, its umbra edged in turquoise, the Moon copper red, the stars back.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst DEG = Math.PI / 180;\nconst TAU = Math.PI * 2;\n// The Moon's centre and radius at the widest field: 58 km a LED.\nconst CX = 32;\nconst CY = 56;\nconst R0 = 30;\n// The face: a 128x128 orthographic map of the near side, north up, 27 km a\n// texel, about a texel a LED at the closest zoom.\nconst TEX = 128;\nconst SYNODIC = 29.530589;\n// The Lab opens 1.43 days before new moon, so at 2 days a second the window\n// the study measures, 2 to 8 s, is day 2.57 to 14.57 and ends 0.1 s short of\n// full, while every LED is still only brightening.\nconst DAY0 = -1.43;\n// Sun elevation over which ground past the terminator goes from black to\n// fully lit: 12.6 degrees, six LEDs at the disc's centre.\nconst W0 = 0.22;\n// Earthshine at a seventh of full sunlight, as an exposure made for it shows\n// it, blue from the Earth's oceans; then sunlight on highland and on mare.\nconst ES = 0.15;\nconst ES_COL = [0.66, 0.78, 1.0];\nconst HI_COL = [1.0, 0.965, 0.885];\nconst MA_COL = [0.93, 0.95, 1.0];\n// Samples round the limb that light the aureole, and the Gaussian, 3 samples\n// wide, that spreads each over its neighbours.\nconst LIMB = 64;\nconst SPREAD = [];\nfor (let k = -6; k \u003c= 6; k++) SPREAD.push(Math.exp(-(k * k) / 18));\nconst SPREAD_SUM = SPREAD.reduce((a, b) => a + b, 0);\n// Eclipse: umbra and penumbra in Moon radii, the path's offset from the\n// shadow's axis, the seconds it takes.\nconst UMBRA = 2.65;\nconst PENUMBRA = 4.6;\nconst GAMMA = -0.42;\nconst ECL_T = 12;\n\n// Maria as caps on the sphere: latitude, longitude (east, toward Crisium, is\n// right), angular radius in degrees, how much darker than highland.\nconst MARIA = [\n  // Imbrium; Serenitatis, paler than its neighbours; Tranquillitatis\n  [33, -16, 17, 0.4], [40, -28, 9, 0.38], [24, -3, 7.5, 0.36], [28, 17.5, 10.5, 0.31],\n  [8, 26, 10, 0.46], [12, 35, 7, 0.46], [1, 38, 7, 0.45], [-1, 44, 5, 0.42],\n  // Crisium, Fecunditatis, Nectaris, Nubium, Humorum, Cognitum\n  [17, 59.1, 8.5, 0.47], [-4, 51, 8.5, 0.39], [-13, 49, 7, 0.37], [-15.2, 35.5, 5.5, 0.38],\n  [-20, -16, 10, 0.35], [-15, -8, 5, 0.3], [-24.4, -38.6, 6.6, 0.42], [-10, -22, 7, 0.35],\n  // Insularum round Copernicus, Vaporum, Sinus Aestuum, Sinus Medii\n  [8, -28, 9, 0.38], [14, 4, 5, 0.35], [11, -8, 6, 0.32], [2, 2, 4.5, 0.24],\n  // Oceanus Procellarum, north to south\n  [42, -50, 10, 0.38], [30, -55, 13, 0.42], [17, -58, 13, 0.44], [24, -42, 8, 0.41],\n  [12, -45, 10, 0.41], [4, -56, 12, 0.42], [-5, -50, 10, 0.38], [-12, -42, 7, 0.34],\n  // Frigoris, a ragged band across the north\n  [58, -45, 4.5, 0.3], [55, -35, 5.2, 0.33], [57.5, -24, 4, 0.32], [55.5, -13, 4.4, 0.33],\n  [57, -2, 3.8, 0.3], [55, 9, 4.6, 0.32], [56.5, 20, 4, 0.3], [54, 31, 4.4, 0.29], [52, 40, 3.2, 0.26],\n  // Lacus Somniorum; Smythii, Marginis and Australe on the east limb\n  [37, 31, 5, 0.24], [-2, 86, 4.5, 0.34], [13, 86, 3.8, 0.3], [-40, 86, 6, 0.24],\n];\n// Mountain rings of the big basins: centre, radius in degrees, height. Where\n// a ring stands on highland it is the Apennines, the Caucasus, the Alps.\nconst RINGS = [[32.8, -15.6, 19.5, 0.022], [28, 17.5, 11.8, 0.014], [17, 59.1, 9.6, 0.012], [-15.2, 35.5, 8, 0.01], [-24.4, -38.6, 7.6, 0.008]];\n// Named craters: latitude, longitude, km across, kind (0 plain, 1 young and\n// rayed, 2 dark floor, 3 flooded flat floor).\nconst CRATERS = [\n  // Tycho, Copernicus, Kepler, Aristarchus, Proclus, Menelaus\n  [-43.3, -11.2, 85, 1], [9.6, -20.1, 93, 1], [8.1, -38, 32, 1], [23.7, -47.4, 40, 1], [16.2, 46.8, 28, 1], [16.3, 16, 27, 1],\n  // Plato, Grimaldi, Endymion, Clavius, Ptolemaeus, Alphonsus, Arzachel, Theophilus\n  [51.6, -9.4, 101, 2], [-5.2, -68.6, 173, 2], [53.9, 57, 123, 2], [-58.4, -14.4, 231, 0], [-9.3, -1.9, 153, 3], [-13.4, -2.8, 119, 0], [-18.2, -1.9, 97, 0], [-11.4, 26.4, 100, 0],\n  // Langrenus, Petavius, Vendelinus, Archimedes, Eratosthenes, Maginus, Longomontanus, Schickard\n  [-8.9, 61.1, 132, 0], [-25.1, 60.4, 177, 0], [-16.3, 61.6, 147, 3], [29.7, -4, 83, 3], [14.5, -11.3, 58, 0], [-50, -6.2, 194, 0], [-49.6, -21.7, 145, 0], [-44.3, -54.6, 206, 2],\n  // Gassendi, Posidonius, Atlas, Albategnius, Hipparchus, Stofler, Janssen, Deslandres, Aristoteles, Bailly\n  [-17.6, -40.1, 110, 3], [31.8, 29.9, 95, 3], [46.7, 44.4, 87, 0], [-11.2, 4.1, 129, 0], [-5.1, 5.2, 138, 3], [-41.1, 6, 126, 0], [-44.9, 41.5, 199, 0], [-32.5, -5.2, 234, 3], [50.2, 17.4, 87, 0], [-66.5, -69.1, 303, 0],\n];\n// Ray systems of the first six: rays, e-folding length in radians, strength.\nconst RAYS = [[18, 0.34, 0.15], [12, 0.14, 0.14], [9, 0.08, 0.12], [7, 0.06, 0.14], [6, 0.09, 0.1], [5, 0.05, 0.08]];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise on a 64x64 lattice; a seed shifts it so uses do not line up.\nconst LATTICE = new Float32Array(4096);\nfor (let i = 0; i \u003c 4096; i++) LATTICE[i] = hash(i, 977);\n\nfunction noise(x, y, s) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const ux = (x - ix) * (x - ix) * (3 - 2 * (x - ix));\n  const uy = (y - iy) * (y - iy) * (3 - 2 * (y - iy));\n  const i0 = (ix + s * 17) & 63;\n  const i1 = (i0 + 1) & 63;\n  const j0 = ((iy + s * 29) & 63) \u003c\u003c 6;\n  const j1 = (j0 + 64) & 4095;\n  const a = LATTICE[j0 + i0];\n  const b = LATTICE[j0 + i1];\n  const c = LATTICE[j1 + i0];\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + LATTICE[j1 + i1]) * ux * uy;\n}\n\nfunction clamp01(v) {\n  return v \u003c 0 ? 0 : v > 1 ? 1 : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp01((v - a) / (b - a));\n  return t * t * (3 - 2 * t);\n}\n\n// A unit vector on the near side: x right (east), y north, z toward Earth.\nfunction dir(lat, lon) {\n  const cb = Math.cos(lat * DEG);\n  return [cb * Math.sin(lon * DEG), Math.sin(lat * DEG), cb * Math.cos(lon * DEG)];\n}\n\n// Calls fn for each texel within angle `reach` of c.\nfunction box(c, reach, fn) {\n  const span = Math.ceil((Math.min(2, reach) * TEX) / 2) + 1;\n  const ci = Math.floor(((c[0] + 1) / 2) * TEX);\n  const cj = Math.floor(((1 - c[1]) / 2) * TEX);\n  for (let j = Math.max(0, cj - span); j \u003c= Math.min(TEX - 1, cj + span); j++)\n    for (let i = Math.max(0, ci - span); i \u003c= Math.min(TEX - 1, ci + span); i++) fn(j * TEX + i);\n}\n\nfunction angle(F, t, c) {\n  return Math.acos(Math.min(1, F.px[t] * c[0] + F.py[t] * c[1] + F.pz[t] * c[2]));\n}\n\n// A texel's place on the sphere, its highland albedo and roughness, and a\n// noise-pushed place to look the maria up from, so every shore wobbles 100\n// to 200 km. Texels outside the disc copy the limb.\nfunction texelInit(F, t, u, v) {\n  const rr = u * u + v * v;\n  const k = rr > 0.9995 ? Math.sqrt(0.9995 / rr) : 1;\n  const x = (u *= k);\n  const y = -(v *= k);\n  const z = Math.sqrt(Math.max(0, 1 - u * u - v * v));\n  F.px[t] = x;\n  F.py[t] = y;\n  F.pz[t] = z;\n  // Albedo wanders a tenth over a few hundred km, the south, sprayed by\n  // Tycho, is brighter, and a texel-sized grain keeps the zoom from smoothing.\n  F.alb[t] = 0.88 + 0.1 * noise(u * 5 + 3, v * 5 + 5, 1) + 0.08 * noise(u * 14, v * 14, 2) + 0.05 * v + 0.06 * noise(u * 47, v * 47, 12);\n  F.hgt[t] = 0.004 * (noise(u * 40, v * 40, 3) - 0.5);\n  const wx = x + 0.07 * (noise(x * 5 + 1, y * 5, 7) - 0.5) + 0.025 * (noise(x * 19, y * 19, 4) - 0.5);\n  const wy = y + 0.07 * (noise(x * 5, y * 5 + 4, 10) - 0.5) + 0.025 * (noise(x * 19 + 7, y * 19, 11) - 0.5);\n  const l = Math.sqrt(wx * wx + wy * wy + z * z);\n  F.wx[t] = wx / l;\n  F.wy[t] = wy / l;\n  F.wz[t] = z / l;\n}\n\n// Lava is flat and low, and darker by the mare's depth, unevenly.\nfunction lava(F, t, m) {\n  F.mare[t] = m;\n  F.alb[t] *= 1 - m * (0.8 + 0.3 * noise(F.px[t] * 9, F.py[t] * 9, 5) + 0.12 * noise(F.px[t] * 30, F.py[t] * 30, 8));\n  F.hgt[t] -= 0.03 * m;\n}\n\n// A crater: bowl, rim, a central peak if big, and albedo: fresh ones bright,\n// Plato's kind dark-floored.\nfunction crater(F, la, lo, km, kind, seed) {\n  const c = dir(la, lo);\n  const rho = km / 2 / 1737;\n  const depth = rho * (kind === 3 ? 0.06 : kind === 1 ? 0.24 : 0.16 + 0.06 * hash(seed, 1));\n  const peak = km > 70 && kind !== 3 ? depth * 0.5 : 0;\n  const flat = kind === 3 || km > 150 ? 6 : 2;\n  const rimA = 0.04 * hash(seed, 3) - 0.01;\n  box(c, rho * 1.8, (t) => {\n    const r = angle(F, t, c) / rho;\n    if (r > 1.8) return;\n    let h = depth * 0.35 * Math.exp(-(((r - 1) / 0.22) ** 2));\n    if (r \u003c 1) h -= depth * (1 - r ** flat);\n    if (peak) h += peak * Math.exp(-((r / 0.16) ** 2));\n    F.hgt[t] += h;\n    if (kind === 1 && r \u003c 1.5) F.alb[t] += 0.3 * (1 - smooth(0.9, 1.5, r));\n    else if (kind === 0) F.alb[t] += rimA * Math.exp(-(((r - 1) / 0.25) ** 2)) - (r \u003c 0.8 ? 0.03 : 0);\n    if (kind === 2 && r \u003c 1) F.alb[t] *= 0.62 + 0.38 * smooth(0.75, 1, r);\n  });\n}\n\n// A rayed crater's light at a texel. Rays start past the dark collar of\n// fresh ejecta, broad and faint, not spokes; only the two either side of\n// the texel's bearing can reach it.\nfunction rayLight(F, t, ci, c, rho, count, len) {\n  const d = angle(F, t, c);\n  if (d > Math.min(Math.PI, len * 4) || d \u003c 1.2 * rho) return 0;\n  const x = F.px[t] - c[0];\n  const y = F.py[t] - c[1];\n  const z = F.pz[t] - c[2];\n  const e = Math.hypot(c[0], c[2]);\n  const th = Math.atan2(y * e - (c[1] * (x * c[0] + z * c[2])) / e, (x * c[2] - z * c[0]) / e);\n  const k0 = Math.floor(((th \u003c 0 ? th + TAU : th) / TAU) * count);\n  const across = Math.sin(d) / (0.012 + 0.03 * d);\n  let sum = 0;\n  for (let kk = k0 - 1; kk \u003c= k0 + 1; kk++) {\n    const k = (kk + count) % count;\n    const id = ci * 31 + k;\n    let dt = th - ((k + 0.8 * hash(id, 21)) / count) * TAU;\n    dt -= Math.round(dt / TAU) * TAU;\n    const lateral = Math.abs(dt) * across;\n    if (lateral \u003c 3) sum += (0.4 + 0.8 * hash(id, 23)) * Math.exp(-lateral * lateral - d / (len * (0.45 + 1.1 * hash(id, 22))));\n  }\n  return Math.min(1, sum) * smooth(1.6 * rho, 4 * rho, d);\n}\n\n// The face map: albedo, how much mare, and the slope the Sun sees.\nfunction buildFace(P) {\n  const T = TEX * TEX;\n  const F = {};\n  for (const key of [\"px\", \"py\", \"pz\", \"alb\", \"hgt\", \"wx\", \"wy\", \"wz\", \"mare\", \"field\", \"dark\"]) F[key] = new Float32Array(T);\n  for (let j = 0; j \u003c TEX; j++) for (let i = 0; i \u003c TEX; i++) texelInit(F, j * TEX + i, ((i + 0.5) / TEX) * 2 - 1, ((j + 0.5) / TEX) * 2 - 1);\n  // Maria: caps add up as a steep field, so only neighbours that touch join,\n  // with a rounded neck, as Serenitatis runs into Tranquillitatis.\n  for (const [la, lo, rad, dark] of MARIA) {\n    const c = dir(la, lo);\n    const rho = rad * DEG;\n    const near = Math.cos(1.6 * rho);\n    box(c, 1.6 * rho + 0.06, (t) => {\n      const cd = F.wx[t] * c[0] + F.wy[t] * c[1] + F.wz[t] * c[2];\n      if (cd \u003c near) return;\n      const d = Math.acos(Math.min(1, cd)) / rho;\n      const w = Math.exp(-3 * d * d);\n      F.field[t] += w;\n      F.dark[t] += w * dark;\n    });\n  }\n  for (let t = 0; t \u003c T; t++) if (F.field[t] > 0.02) lava(F, t, smooth(0.035, 0.12, F.field[t]) * (F.dark[t] / F.field[t]));\n  // Basin rings: a band of peaks a tenth of the radius wide, only on highland.\n  for (const [la, lo, rad, tall] of RINGS) {\n    const c = dir(la, lo);\n    const rho = rad * DEG;\n    box(c, 1.35 * rho, (t) => {\n      const d = angle(F, t, c) / rho;\n      if (d \u003c 0.75 || d > 1.35) return;\n      const peaks = 0.4 + noise(F.px[t] * 70, F.py[t] * 70, 6) * 1.2;\n      F.hgt[t] += tall * Math.exp(-(((d - 1.04) / 0.12) ** 2)) * peaks * (1 - clamp01(F.mare[t] / 0.3));\n    });\n  }\n  CRATERS.forEach(([la, lo, km, kind], n) => crater(F, la, lo, km, kind, n));\n  // 420 random craters, 40 to 180 km, saturate the highlands, not the maria.\n  for (let n = 0; n \u003c 420; n++) {\n    const z = hash(n, 11);\n    const a = hash(n, 12) * TAU;\n    const x = Math.sqrt(1 - z * z) * Math.cos(a);\n    const y = Math.sqrt(1 - z * z) * Math.sin(a);\n    const t = Math.min(TEX - 1, Math.floor(((1 - y) / 2) * TEX)) * TEX + Math.min(TEX - 1, Math.floor(((x + 1) / 2) * TEX));\n    if (F.mare[t] > 0.15 && hash(n, 13) > 0.2) continue;\n    crater(F, Math.asin(y) / DEG, Math.atan2(x, z) / DEG, 40 * Math.pow(4.5, Math.pow(hash(n, 14), 1.7)), 0, 1000 + n);\n  }\n  RAYS.forEach(([count, len, power], ci) => {\n    const c = dir(CRATERS[ci][0], CRATERS[ci][1]);\n    const rho = CRATERS[ci][2] / 2 / 1737;\n    box(c, len * 4, (t) => {\n      const d = angle(F, t, c);\n      F.alb[t] += power * rayLight(F, t, ci, c, rho, count, len) + (d > 1.2 * rho ? 0.1 * Math.exp(-(((d - 1.6 * rho) / (1.6 * rho)) ** 2)) : 0);\n    });\n  });\n  // Slope along the Sun's path, positive toward a Sun rising on the right.\n  const slope = new Float32Array(T);\n  for (let t = 1; t \u003c T - 1; t++) {\n    if (t % TEX === 0 || t % TEX === TEX - 1) continue;\n    const cosl = F.pz[t] / Math.sqrt(F.px[t] * F.px[t] + F.pz[t] * F.pz[t] + 1e-9);\n    const s = (-(F.hgt[t + 1] - F.hgt[t - 1]) / (4 / TEX)) * cosl;\n    slope[t] = s > 0.28 ? 0.28 : s \u003c -0.28 ? -0.28 : s;\n  }\n  for (let t = 0; t \u003c T; t++) F.alb[t] = Math.min(1.15, Math.max(0.3, F.alb[t]));\n  P.alb = F.alb;\n  P.slope = slope;\n  P.mare = F.mare;\n}\n\nfunction sample(arr, u, v) {\n  const fx = Math.min(TEX - 1.0001, Math.max(0, ((u + 1) / 2) * TEX - 0.5));\n  const fy = Math.min(TEX - 1.0001, Math.max(0, ((v + 1) / 2) * TEX - 0.5));\n  const t = (fy | 0) * TEX + (fx | 0);\n  const tx = fx - (fx | 0);\n  const a = arr[t] + (arr[t + 1] - arr[t]) * tx;\n  const b = arr[t + TEX] + (arr[t + TEX + 1] - arr[t + TEX]) * tx;\n  return a + (b - a) * (fy - (fy | 0));\n}\n\n// The far ridge's top, in scene rows, with spruce on it, each a one-LED\n// spire over a body three LEDs wide.\nfunction ridge(x, trees) {\n  let y = 113 + 2.6 * Math.sin(x * 0.08 - 0.9) + 1.2 * Math.sin(x * 0.23 + 1.7);\n  const cell = Math.floor(x / 4.3);\n  for (let k = cell - 2; trees && k \u003c= cell + 2; k++) {\n    const tx = (k + 0.2 + 0.6 * hash(k, 32)) * 4.3;\n    const dx = Math.abs(x - tx);\n    if (hash(k, 31) \u003c 0.5 && dx \u003c 1.9) y = Math.min(y, ridge(tx, false) - (4 + 6 * hash(k, 33)) * (1 - dx / 1.9) ** 1.4);\n  }\n  return y;\n}\n\n// Per-LED geometry for a latitude and zoom: where on the face it looks, its\n// sky, its star.\nfunction buildView(P, lat, zoom) {\n  const m = 1 + 1.5 * zoom;\n  const R = R0 * m;\n  const th = (90 - lat) * DEG;\n  const ct = Math.cos(th);\n  const st = Math.sin(th);\n  const top = [];\n  for (let x = 0; x \u003c W; x++) top.push(ridge(CX + (x + 0.5 - CX) / m, true));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const o = p * 3;\n    const dx = x + 0.5 - CX;\n    const dy = ((p / W) | 0) + 0.5 - CY;\n    const dist = Math.sqrt(dx * dx + dy * dy);\n    const sy = CY + dy / m;\n    // The sky without a Moon and what a full one adds, and the glow: a tight\n    // aureole lit by the limb beside it, so a crescent wears a crescent of\n    // glow, and a wide one lit by the whole.\n    const ty = clamp01(sy / 112);\n    const dd = Math.max(0, dist - R) / m;\n    const wide = 27 * Math.exp(-dd / 13);\n    P.night[o] = 1 + 3 * ty * ty;\n    P.night[o + 1] = 2 + 6 * ty * ty;\n    P.night[o + 2] = 7 + 14 * ty;\n    P.lift[o] = 5 + 7.5 * ty + wide * 0.78;\n    P.lift[o + 1] = 11.5 + 13 * ty + wide * 0.85;\n    P.lift[o + 2] = 28 + 20 * ty + wide;\n    P.near[p] = 62 * Math.exp(-dd / 3.5);\n    const turn = Math.atan2(dy, dx) / TAU;\n    P.bin[p] = (turn - Math.floor(turn)) * LIMB;\n    P.ground[p] = sy > top[x] ? 1 : 0;\n    const a = clamp01(R - dist + 0.5);\n    P.alpha[p] = a;\n    if (a \u003c= 0) continue;\n    const shrink = Math.min(1, Math.sqrt(0.996 / ((dist * dist) / (R * R))));\n    const qx = (dx / R) * shrink;\n    const qy = (dy / R) * shrink;\n    const u = qx * ct + qy * st;\n    const v = -qx * st + qy * ct;\n    P.fu[p] = u;\n    P.fv[p] = v;\n    P.alb[p] = sample(P.face.alb, u, v);\n    P.slp[p] = sample(P.face.slope, u, v);\n    P.mar[p] = sample(P.face.mare, u, v);\n    P.lam[p] = Math.atan2(u, Math.sqrt(Math.max(0, 1 - u * u - v * v)));\n    P.cb[p] = Math.sqrt(Math.max(0, 1 - v * v));\n  }\n  for (let j = 0; j \u003c LIMB; j++) {\n    const qx = 0.94 * Math.cos((j / LIMB) * TAU);\n    const qy = 0.94 * Math.sin((j / LIMB) * TAU);\n    const u = qx * ct + qy * st;\n    const v = -qx * st + qy * ct;\n    P.limbU[j] = u;\n    P.limbV[j] = v;\n    P.limbLam[j] = Math.atan2(u, Math.sqrt(Math.max(0, 1 - u * u - v * v)));\n    P.limbCb[j] = Math.sqrt(1 - v * v);\n  }\n  // Stars turn with the face and stay one LED at any zoom.\n  P.star.fill(0);\n  const cs = Math.cos(th - Math.PI / 2);\n  const ss = Math.sin(th - Math.PI / 2);\n  for (const s of P.stars) {\n    const x = Math.floor(CX + (s[0] * cs - s[1] * ss) * m);\n    const y = Math.floor(CY + (s[0] * ss + s[1] * cs) * m);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = y * W + x;\n    if (P.alpha[p] > 0 || P.ground[p]) continue;\n    for (let c = 0; c \u003c 3; c++) P.star[p * 3 + c] = Math.max(P.star[p * 3 + c], s[2] * s[3 + c]);\n  }\n  P.viewLat = lat;\n  P.viewZoom = zoom;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.face = {};\n  buildFace(P.face);\n  for (const key of [\"night\", \"lift\", \"star\"]) P[key] = new Float32Array(N * 3);\n  for (const key of [\"alpha\", \"fu\", \"fv\", \"alb\", \"slp\", \"mar\", \"lam\", \"cb\", \"near\", \"bin\"]) P[key] = new Float32Array(N);\n  for (const key of [\"limbU\", \"limbV\", \"limbLam\", \"limbCb\", \"limbRaw\", \"limb\"]) P[key] = new Float32Array(LIMB);\n  P.ground = new Uint8Array(N);\n  // Stars, most at the limit of the eye, a few bright, some warm.\n  P.stars = [];\n  for (let n = 0; n \u003c 420; n++) {\n    const r = 112 * Math.sqrt(hash(n, 41));\n    const a = hash(n, 42) * TAU;\n    const mag = hash(n, 43);\n    const warm = hash(n, 44);\n    const col = warm \u003c 0.2 ? [1, 0.82, 0.62] : warm > 0.8 ? [0.78, 0.88, 1] : [0.95, 0.95, 1];\n    P.stars.push([r * Math.cos(a), r * Math.sin(a), 30 + 46 * mag * mag + (mag > 0.93 ? (120 * (mag - 0.93)) / 0.07 : 0), ...col]);\n  }\n  P.day = DAY0;\n  P.pending = false;\n  P.eclipse = -1;\n  P.viewLat = 1e9;\n  P.E = 0;\n  P.shadowU = 0;\n  P.gain = 1;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  if (!P.face) setup(P);\n  dt = Math.min(dt, 0.1);\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const lat = Math.max(-90, Math.min(90, k[0]));\n  const zoom = clamp01(k[2]);\n  if (input.btnPressed && input.btnPressed[0] && P.eclipse \u003c 0) P.pending = true;\n  if (Math.abs(lat - P.viewLat) > 0.05 || Math.abs(zoom - P.viewZoom) > 0.0005) buildView(P, lat, zoom);\n  P.gain = Math.pow(2, Math.max(-2, Math.min(2, k[3])));\n  if (P.eclipse >= 0) {\n    P.eclipse += dt;\n    if (P.eclipse >= ECL_T) {\n      P.eclipse = -1;\n      P.pending = false;\n    }\n  } else {\n    const before = Math.floor(P.day / SYNODIC + 0.5);\n    P.day += Math.max(0.5, Math.min(4, k[1])) * dt;\n    const after = Math.floor(P.day / SYNODIC + 0.5);\n    // A booked eclipse stops the clock at full Moon, half a month in.\n    if (P.pending && after > before) {\n      P.day = (after - 0.5) * SYNODIC;\n      P.eclipse = 0;\n    }\n  }\n  const f = P.day / SYNODIC;\n  P.E = (f - Math.floor(f)) * TAU;\n  // The shadow crosses east to west, slowest over totality.\n  const q = (2 * Math.max(0, P.eclipse)) / ECL_T - 1;\n  P.shadowU = 5.7 * (0.6 * q + 0.4 * q * q * q);\n}\n\n// Sunlight reaching a point in the Earth's shadow, per channel: penumbra\n// greys it, the umbra leaves the copper of every sunset on Earth, and the\n// ozone layer edges the umbra in turquoise.\nfunction shadowInto(out, r) {\n  if (r > UMBRA + 0.06) {\n    const p = r >= PENUMBRA ? 0 : Math.pow((PENUMBRA - r) / (PENUMBRA - UMBRA), 1.6);\n    out[0] = 1 - 0.8 * p;\n    out[1] = 1 - 0.83 * p;\n    out[2] = 1 - 0.86 * p;\n    return;\n  }\n  const deep = 0.16 + 0.2 * (r / UMBRA) ** 2;\n  const edge = smooth(UMBRA - 0.12, UMBRA + 0.06, r);\n  const fringe = Math.exp(-(((r - UMBRA + 0.1) / 0.09) ** 2));\n  out[0] = deep + edge * 0.2;\n  out[1] = deep * 0.3 + edge * 0.17 + fringe * 0.06;\n  out[2] = deep * 0.1 + edge * 0.14 + fringe * 0.07;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.face) return;\n  const E = P.E;\n  // Sunrise terminator at longitude 90 - E, sunset at 270 - E, held at the\n  // right limb until full, so on the way to full nothing ever darkens.\n  const lt = Math.PI / 2 - E;\n  const ls = Math.PI * 1.5 - Math.max(E, Math.PI);\n  // Lit fraction, and surface brightness, steep in the last day before full:\n  // the opposition surge.\n  const kf = (1 - Math.cos(E)) / 2;\n  const g = 0.6 + 0.3 * Math.pow(kf, 0.9) + 0.1 * Math.exp(-Math.abs(E - Math.PI) / 0.12);\n  let moonlight = kf * g;\n  const ecl = P.eclipse >= 0;\n  const sh = [1, 1, 1];\n  const shade = (u, v) => {\n    shadowInto(sh, Math.hypot(u - P.shadowU, v - GAMMA));\n    return sh[0] * 0.3 + sh[1] * 0.6 + sh[2] * 0.1;\n  };\n  // The aureole's light by limb sample, spread 17 degrees either way; each\n  // only brightens on the way to full, so the glow does too. In an eclipse\n  // the sky dims with the shadow's mean round the limb.\n  let dim = 0;\n  for (let j = 0; j \u003c LIMB; j++) {\n    const cb = P.limbCb[j];\n    const lam = P.limbLam[j];\n    const t = clamp01((Math.min((lam - lt) * cb, (ls - lam) * cb + 0.05) + 0.01) / W0);\n    const f = ecl ? shade(P.limbU[j], P.limbV[j]) : 1;\n    dim += f / LIMB;\n    P.limbRaw[j] = (ES + (g - ES) * t * (2 - t)) * f;\n  }\n  moonlight *= dim;\n  for (let j = 0; j \u003c LIMB; j++) {\n    let sum = 0;\n    for (let k = -6; k \u003c= 6; k++) sum += SPREAD[k + 6] * P.limbRaw[(j + k + LIMB) % LIMB];\n    P.limb[j] = sum / SPREAD_SUM;\n  }\n  const gain = P.gain;\n  const esR = ES * ES_COL[0];\n  const esG = ES * ES_COL[1];\n  const esB = ES * ES_COL[2];\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    let r = P.night[o] + moonlight * P.lift[o];\n    let gg = P.night[o + 1] + moonlight * P.lift[o + 1];\n    let b = P.night[o + 2] + moonlight * P.lift[o + 2];\n    const near = P.near[p];\n    if (near > 0.3) {\n      const j = P.bin[p] | 0;\n      const glow = near * (P.limb[j] + (P.limb[(j + 1) % LIMB] - P.limb[j]) * (P.bin[p] - j));\n      r += glow * 0.78;\n      gg += glow * 0.85;\n      b += glow;\n    }\n    if (P.star[o + 2] > 0) {\n      r = Math.max(r, P.star[o]);\n      gg = Math.max(gg, P.star[o + 1]);\n      b = Math.max(b, P.star[o + 2]);\n    }\n    if (P.ground[p]) {\n      r = 1;\n      gg = 1.5;\n      b = 3;\n    } else if (P.alpha[p] > 0) {\n      // Earthshine, and sunlight by the Sun's height over the ground, slope\n      // included, so walls facing dawn light first and peaks shine past it.\n      const a = P.alpha[p];\n      const cb = P.cb[p];\n      const lam = P.lam[p];\n      const s = P.slp[p];\n      const t = clamp01((Math.min((lam - lt) * cb + s, (ls - lam) * cb - s + 0.05) + 0.01) / W0);\n      const F = t * (2 - t);\n      const al = P.alb[p] * 255;\n      const ma = P.mar[p] > 0.4 ? g : g * 2.5 * P.mar[p];\n      let sr = g * HI_COL[0] + (MA_COL[0] - HI_COL[0]) * ma;\n      let sg = g * HI_COL[1] + (MA_COL[1] - HI_COL[1]) * ma;\n      let sb = g * HI_COL[2] + (MA_COL[2] - HI_COL[2]) * ma;\n      if (ecl) {\n        shadowInto(sh, Math.hypot(P.fu[p] - P.shadowU, P.fv[p] - GAMMA));\n        sr *= sh[0];\n        sg *= sh[1];\n        sb *= sh[2];\n      }\n      r += (al * (esR + (sr - esR) * F) - r) * a;\n      gg += (al * (esG + (sg - esG) * F) - gg) * a;\n      b += (al * (esB + (sb - esB) * F) - b) * a;\n    }\n    r *= gain;\n    gg *= gain;\n    b *= gain;\n    display.setPixel(p % W, (p / W) | 0, r > 255 ? 255 : r, gg > 255 ? 255 : gg, b > 255 ? 255 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Latitude=-90..90, Days=0.5..4, Zoom=0..1, Exposure=-2..2","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Latitude","min":-90,"max":90,"about":"Where the camera stands, which turns the Moon's face against the horizon: at the equator, where it opens, the crescent lies on its back like a boat; at the North Pole north is up and it is lit from the right; at the South Pole the face hangs upside down."},{"name":"Days","min":0.5,"max":4,"about":"Days of the month a second: at 2 the crescent of day 2.6 is full six seconds later and a lunation takes 15 seconds; 0.5 to 4."},{"name":"Zoom","min":0,"max":1,"about":"The lens: at 0 the disc is 60 LEDs across, the panel's width; turned up it magnifies 2.5 times until maria, craters and the terminator fill the frame."},{"name":"Exposure","min":-2,"max":2,"about":"Stops either side of a full-Moon exposure: two down, earthshine and faint stars go black; two up, the dark side shows its maria and the lit Moon burns out white."}],"start":[0,2,0,0.06],"measures":{"motion":0.058,"detail":0.023,"edges":0.2973,"complexity":1.178,"coverage":0.7526,"colour":0.083,"drift":0.3482},"knobResponse":[0.0549,0.1588,0.1276,0.2614]},{"slug":"mandelbrot","title":"Mandel Dive","family":"fractal","round":2,"note":"망델브로 집합 전체가 서 있다가 가장자리의 한 점으로 끝없이 떨어져 들어가요. 처음 자리는 안테나 위의 미니 망델브로라서, 다 들어가면 처음과 같은 그림으로 녹아들어 다시 떨어져요.","idea":"The whole Mandelbrot set stands on the panel and the view falls toward one point of its edge, colour bands flowing out of the black, until the dive fades back into the whole set and falls again.","buttons":"K1 tap starts the next dive now.","code":"// ===== Patternflow pattern =====\n// Title:   Mandel Dive\n// Family:  fractal\n// Idea:    The whole Mandelbrot set stands on the panel and the view falls toward one point of its edge, colour bands flowing out of the black, until the dive fades back into the whole set and falls again.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.25..4, Spot=0..3, Bands=1..3.5\n//\n// Knob 1: Hue. Turns the colour bands around the wheel.\n// Knob 2: Speed. How fast the view falls, from one doubling every eight seconds to two a second.\n// Knob 3: Spot. Where the dive goes: a mini-brot that is the whole set again, seahorse valley, elephant valley or a spiral.\n// Knob 4: Bands. How tightly the colour bands are packed, from slow washes to fine contour rings.\n// Buttons: K1 tap starts the next dive now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Width across the panel at the start of a dive: the whole set, antenna up.\nconst W0 = 2.9;\nconst C0R = -0.68;\nconst C0I = 0;\n// Doublings the old and the new dive overlap while one fades into the other.\nconst FADE = 1.6;\n\n// The period-9 mini-brot on the antenna is the whole set shrunk by\n// MINI_SIZE about the point below, so a dive toward that point ends on the\n// picture it started from.\nconst MINI_NUCLEUS = -1.78586564641067;\nconst MINI_SIZE = 3.465e-4;\n// Target re and im, doublings deep, spin in radians per doubling, how fast\n// the target drifts to the middle of the panel (0 keeps it where it starts),\n// and a turn made over the first doublings. Seahorse valley is a crack\n// between two black discs; turned upright it runs down the tall panel\n// instead of across it.\nconst SPOTS = [\n  [MINI_NUCLEUS / (1 - MINI_SIZE), 0, Math.log2(1 / MINI_SIZE), 0, 0, 0],\n  [-0.743643887037151, 0.13182590420533, 14.6, 0.1, 0.14, Math.PI / 2],\n  [0.3157737473855642, 0.0372087816115407, 17.5, -0.09, 0.12, 0],\n  [-0.761574, -0.0847596, 11.8, 0.14, 0.14, -Math.PI / 2],\n];\n\n// The LEDs iterated afresh on each of four frames, as x and y parity. The\n// other three in four are carried over from where the last frame had them.\nconst PHASE_X = [0, 1, 1, 0];\nconst PHASE_Y = [0, 1, 0, 1];\n\nfunction dive() {\n  return {\n    spot: 0,\n    zeta: 0,\n    boost: 1.3,\n    dark: 0.3,\n    mu: new Float32Array(N),\n    last: new Float32Array(N),\n    // Frames since each LED's value was iterated.\n    age: new Uint8Array(N),\n    lastAge: new Uint8Array(N),\n    // The view of the last frame: target, scaled cos and sin, target's place on the panel.\n    view: new Float64Array(6),\n    fresh: true,\n  };\n}\n\nexport function setup(params) {\n  params.a = dive();\n  params.b = dive();\n  params.fading = false;\n  params.started = false;\n  params.frame = 0;\n  params.rgb = new Float32Array(N * 3);\n  params.lut = new Float32Array(512 * 3);\n  params.lutHue = -1;\n  params.phase = 0;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Two bands of the palette: dark troughs between crests of neighbouring hues.\nfunction buildLut(params, hue) {\n  const lut = params.lut;\n  for (let i = 0; i \u003c 512; i++) {\n    const a = (i / 256) * Math.PI;\n    const band = 0.5 + 0.5 * Math.cos(a * 2);\n    const h = hue + 0.17 * Math.sin(a) + 0.05 * band;\n    hsv(h, 0.92 - 0.45 * band * band * band, 0.2 + 0.72 * Math.pow(band, 1.3), lut, i * 3);\n  }\n  params.lutHue = hue;\n}\n\n// Doublings to fall this frame. The way into a valley passes doublings that\n// are mostly the black body of the set, so the fall hurries while the panel is dark.\nfunction fall(d, dt, rate) {\n  d.boost += (1 + 12 * d.dark * d.dark * d.dark - d.boost) * Math.min(1, dt * 3);\n  return dt * rate * d.boost;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 1];\n  // K1 at 0 opens on cyan rather than the red most of the study opens on.\n  const hue = k[0] + 0.53;\n  if (hue !== params.lutHue) buildLut(params, hue);\n  params.bands = k[3];\n  const spot = Math.max(0, Math.min(3, Math.round(k[2])));\n  if (!params.started) {\n    params.a.spot = spot;\n    params.started = true;\n  }\n  const rate = k[1] * 0.5;\n  const a = params.a;\n  const b = params.b;\n  // While one dive fades into the next they fall together, so the mini-brot\n  // and the whole set it gives way to stay the same size.\n  const step = params.fading ? fall(b, dt, rate) : fall(a, dt, rate);\n  a.zeta += step;\n  if (params.fading) b.zeta += step;\n  params.phase += dt * (0.3 + rate * 0.3);\n\n  const kick = input.btnPressed && input.btnPressed[0];\n  if (!params.fading && (a.zeta >= SPOTS[a.spot][2] || kick || spot !== a.spot)) {\n    params.fading = true;\n    b.spot = spot;\n    b.zeta = 0;\n    b.boost = 1.3;\n    b.dark = 0.3;\n    b.fresh = true;\n  }\n  if (params.fading && b.zeta >= FADE) {\n    params.a = b;\n    params.b = a;\n    params.fading = false;\n  }\n}\n\n// log2 of the smooth escape count at one point, or -1 inside the set.\nfunction escape(cr, ci, maxit) {\n  // The main cardioid and the period-2 disc are inside without iterating.\n  const xr = cr - 0.25;\n  const q = xr * xr + ci * ci;\n  if (q * (q + xr) \u003c= 0.25 * ci * ci || (cr + 1) * (cr + 1) + ci * ci \u003c= 0.0625) return -1;\n  let zr = 0;\n  let zi = 0;\n  let zr2 = 0;\n  let zi2 = 0;\n  let n = 0;\n  let sr = 0;\n  let si = 0;\n  let span = 8;\n  let count = 0;\n  while (n \u003c maxit) {\n    zi = 2 * zr * zi + ci;\n    zr = zr2 - zi2 + cr;\n    zr2 = zr * zr;\n    zi2 = zi * zi;\n    n++;\n    if (zr2 + zi2 > 1024) return Math.log2(n + 2 - Math.log2(0.5 * Math.log2(zr2 + zi2)));\n    // An orbit that comes back to where it was is caught in a cycle: inside.\n    const dr = zr - sr;\n    const di = zi - si;\n    if (dr * dr + di * di \u003c 1e-20) return -1;\n    if (++count === span) {\n      count = 0;\n      span += span;\n      sr = zr;\n      si = zi;\n    }\n  }\n  return -1;\n}\n\n// One view of the set into the dive's `mu`. A quarter of the LEDs are\n// iterated each frame; the rest look up where they were on the last frame,\n// which the fall has only moved by a fraction of an LED.\nfunction render(d, frame) {\n  const s = SPOTS[d.spot];\n  const tr = s[0];\n  const ti = s[1];\n  const zeta = d.zeta;\n  const px = (W0 / W) * Math.pow(2, -zeta);\n  const turn = Math.min(1, zeta / 4);\n  const ang = s[3] * zeta + s[5] * turn * turn * (3 - 2 * turn);\n  const ca = Math.cos(ang) * px;\n  const sa = Math.sin(ang) * px;\n  // Where the target sits on the panel, in LEDs from the middle; real runs down the panel.\n  const drift = Math.pow(2, -s[4] * zeta);\n  const ty = ((tr - C0R) / (W0 / W)) * drift;\n  const tx = ((ti - C0I) / (W0 / W)) * drift;\n  const maxit = Math.min(560, 110 + Math.floor(zeta * 24));\n\n  const swap = d.last;\n  d.last = d.mu;\n  d.mu = swap;\n  const swapAge = d.lastAge;\n  d.lastAge = d.age;\n  d.age = swapAge;\n  const mu = d.mu;\n  const last = d.last;\n  const age = d.age;\n  const lastAge = d.lastAge;\n  const v = d.view;\n  const lca = v[2];\n  const lsa = v[3];\n  const lk = 1 / (lca * lca + lsa * lsa);\n  const fresh = d.fresh;\n  const fx = PHASE_X[frame & 3];\n  const fy = PHASE_Y[frame & 3];\n  let dark = 0;\n  let counted = 0;\n  for (let y = 0; y \u003c H; y++) {\n    const oy = y + 0.5 - H / 2 - ty;\n    for (let x = 0; x \u003c W; x++) {\n      const ox = x + 0.5 - W / 2 - tx;\n      const cr = tr + oy * ca - ox * sa;\n      const ci = ti + oy * sa + ox * ca;\n      const p = y * W + x;\n      if (!fresh && ((x & 1) !== fx || (y & 1) !== fy)) {\n        const dr = cr - v[0];\n        const di = ci - v[1];\n        const ly = Math.round((dr * lca + di * lsa) * lk + v[5] + H / 2 - 0.5);\n        const lx = Math.round((di * lca - dr * lsa) * lk + v[4] + W / 2 - 0.5);\n        // A value is carried at most three frames, or it would smear\n        // outward along the fall.\n        const q = ly * W + lx;\n        if (lx >= 0 && lx \u003c W && ly >= 0 && ly \u003c H && lastAge[q] \u003c 3) {\n          mu[p] = last[q];\n          age[p] = lastAge[q] + 1;\n          continue;\n        }\n      }\n      const m = escape(cr, ci, maxit);\n      mu[p] = m;\n      age[p] = 0;\n      counted++;\n      if (m \u003c 0) dark++;\n    }\n  }\n  v[0] = tr;\n  v[1] = ti;\n  v[2] = ca;\n  v[3] = sa;\n  v[4] = tx;\n  v[5] = ty;\n  d.fresh = false;\n  d.dark = dark / counted;\n}\n\n// Colour bands from the escape count, dimmed wherever the count changes\n// faster than a band or so per LED: on 64 by 128 LEDs the lace at the edge\n// of the set would otherwise be confetti.\nfunction shade(params, mu, weight, first) {\n  const rgb = params.rgb;\n  const lut = params.lut;\n  const dens = params.bands;\n  const phase = params.phase;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const l = mu[p];\n      let f = 0;\n      let i = 0;\n      if (l >= 0) {\n        const a = mu[x > 0 ? p - 1 : p];\n        const b = mu[x \u003c W - 1 ? p + 1 : p];\n        const c = mu[y > 0 ? p - W : p];\n        const d = mu[y \u003c H - 1 ? p + W : p];\n        if (a >= 0 && b >= 0 && c >= 0 && d >= 0) {\n          const g = Math.max(Math.abs(b - a), Math.abs(d - c)) * dens;\n          const r = g / 0.5;\n          f = weight / (1 + r * r);\n          // Adding the phase moves the bands outward, the way the fall does.\n          let s = (l * dens + phase) * 0.5;\n          s -= Math.floor(s);\n          i = Math.floor(s * 512) * 3;\n        }\n      }\n      const o = p * 3;\n      if (first) {\n        rgb[o] = lut[i] * f;\n        rgb[o + 1] = lut[i + 1] * f;\n        rgb[o + 2] = lut[i + 2] * f;\n      } else {\n        rgb[o] += lut[i] * f;\n        rgb[o + 1] += lut[i + 1] * f;\n        rgb[o + 2] += lut[i + 2] * f;\n      }\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const rgb = params.rgb;\n  const frame = params.frame++;\n  render(params.a, frame);\n  if (!params.fading) {\n    shade(params, params.a.mu, 1, true);\n  } else {\n    const m0 = Math.min(1, params.b.zeta / FADE);\n    const m = m0 * m0 * (3 - 2 * m0);\n    shade(params, params.a.mu, 1 - m, true);\n    render(params.b, frame);\n    shade(params, params.b.mu, m, false);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[p], rgb[p + 1], rgb[p + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-mandelbrot","type":"code","name":"mandelbrot","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Mandel Dive\n// Family:  fractal\n// Idea:    The whole Mandelbrot set stands on the panel and the view falls toward one point of its edge, colour bands flowing out of the black, until the dive fades back into the whole set and falls again.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.25..4, Spot=0..3, Bands=1..3.5\n//\n// Knob 1: Hue. Turns the colour bands around the wheel.\n// Knob 2: Speed. How fast the view falls, from one doubling every eight seconds to two a second.\n// Knob 3: Spot. Where the dive goes: a mini-brot that is the whole set again, seahorse valley, elephant valley or a spiral.\n// Knob 4: Bands. How tightly the colour bands are packed, from slow washes to fine contour rings.\n// Buttons: K1 tap starts the next dive now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Width across the panel at the start of a dive: the whole set, antenna up.\nconst W0 = 2.9;\nconst C0R = -0.68;\nconst C0I = 0;\n// Doublings the old and the new dive overlap while one fades into the other.\nconst FADE = 1.6;\n\n// The period-9 mini-brot on the antenna is the whole set shrunk by\n// MINI_SIZE about the point below, so a dive toward that point ends on the\n// picture it started from.\nconst MINI_NUCLEUS = -1.78586564641067;\nconst MINI_SIZE = 3.465e-4;\n// Target re and im, doublings deep, spin in radians per doubling, how fast\n// the target drifts to the middle of the panel (0 keeps it where it starts),\n// and a turn made over the first doublings. Seahorse valley is a crack\n// between two black discs; turned upright it runs down the tall panel\n// instead of across it.\nconst SPOTS = [\n  [MINI_NUCLEUS / (1 - MINI_SIZE), 0, Math.log2(1 / MINI_SIZE), 0, 0, 0],\n  [-0.743643887037151, 0.13182590420533, 14.6, 0.1, 0.14, Math.PI / 2],\n  [0.3157737473855642, 0.0372087816115407, 17.5, -0.09, 0.12, 0],\n  [-0.761574, -0.0847596, 11.8, 0.14, 0.14, -Math.PI / 2],\n];\n\n// The LEDs iterated afresh on each of four frames, as x and y parity. The\n// other three in four are carried over from where the last frame had them.\nconst PHASE_X = [0, 1, 1, 0];\nconst PHASE_Y = [0, 1, 0, 1];\n\nfunction dive() {\n  return {\n    spot: 0,\n    zeta: 0,\n    boost: 1.3,\n    dark: 0.3,\n    mu: new Float32Array(N),\n    last: new Float32Array(N),\n    // Frames since each LED's value was iterated.\n    age: new Uint8Array(N),\n    lastAge: new Uint8Array(N),\n    // The view of the last frame: target, scaled cos and sin, target's place on the panel.\n    view: new Float64Array(6),\n    fresh: true,\n  };\n}\n\nexport function setup(params) {\n  params.a = dive();\n  params.b = dive();\n  params.fading = false;\n  params.started = false;\n  params.frame = 0;\n  params.rgb = new Float32Array(N * 3);\n  params.lut = new Float32Array(512 * 3);\n  params.lutHue = -1;\n  params.phase = 0;\n}\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// Two bands of the palette: dark troughs between crests of neighbouring hues.\nfunction buildLut(params, hue) {\n  const lut = params.lut;\n  for (let i = 0; i \u003c 512; i++) {\n    const a = (i / 256) * Math.PI;\n    const band = 0.5 + 0.5 * Math.cos(a * 2);\n    const h = hue + 0.17 * Math.sin(a) + 0.05 * band;\n    hsv(h, 0.92 - 0.45 * band * band * band, 0.2 + 0.72 * Math.pow(band, 1.3), lut, i * 3);\n  }\n  params.lutHue = hue;\n}\n\n// Doublings to fall this frame. The way into a valley passes doublings that\n// are mostly the black body of the set, so the fall hurries while the panel is dark.\nfunction fall(d, dt, rate) {\n  d.boost += (1 + 12 * d.dark * d.dark * d.dark - d.boost) * Math.min(1, dt * 3);\n  return dt * rate * d.boost;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 1];\n  // K1 at 0 opens on cyan rather than the red most of the study opens on.\n  const hue = k[0] + 0.53;\n  if (hue !== params.lutHue) buildLut(params, hue);\n  params.bands = k[3];\n  const spot = Math.max(0, Math.min(3, Math.round(k[2])));\n  if (!params.started) {\n    params.a.spot = spot;\n    params.started = true;\n  }\n  const rate = k[1] * 0.5;\n  const a = params.a;\n  const b = params.b;\n  // While one dive fades into the next they fall together, so the mini-brot\n  // and the whole set it gives way to stay the same size.\n  const step = params.fading ? fall(b, dt, rate) : fall(a, dt, rate);\n  a.zeta += step;\n  if (params.fading) b.zeta += step;\n  params.phase += dt * (0.3 + rate * 0.3);\n\n  const kick = input.btnPressed && input.btnPressed[0];\n  if (!params.fading && (a.zeta >= SPOTS[a.spot][2] || kick || spot !== a.spot)) {\n    params.fading = true;\n    b.spot = spot;\n    b.zeta = 0;\n    b.boost = 1.3;\n    b.dark = 0.3;\n    b.fresh = true;\n  }\n  if (params.fading && b.zeta >= FADE) {\n    params.a = b;\n    params.b = a;\n    params.fading = false;\n  }\n}\n\n// log2 of the smooth escape count at one point, or -1 inside the set.\nfunction escape(cr, ci, maxit) {\n  // The main cardioid and the period-2 disc are inside without iterating.\n  const xr = cr - 0.25;\n  const q = xr * xr + ci * ci;\n  if (q * (q + xr) \u003c= 0.25 * ci * ci || (cr + 1) * (cr + 1) + ci * ci \u003c= 0.0625) return -1;\n  let zr = 0;\n  let zi = 0;\n  let zr2 = 0;\n  let zi2 = 0;\n  let n = 0;\n  let sr = 0;\n  let si = 0;\n  let span = 8;\n  let count = 0;\n  while (n \u003c maxit) {\n    zi = 2 * zr * zi + ci;\n    zr = zr2 - zi2 + cr;\n    zr2 = zr * zr;\n    zi2 = zi * zi;\n    n++;\n    if (zr2 + zi2 > 1024) return Math.log2(n + 2 - Math.log2(0.5 * Math.log2(zr2 + zi2)));\n    // An orbit that comes back to where it was is caught in a cycle: inside.\n    const dr = zr - sr;\n    const di = zi - si;\n    if (dr * dr + di * di \u003c 1e-20) return -1;\n    if (++count === span) {\n      count = 0;\n      span += span;\n      sr = zr;\n      si = zi;\n    }\n  }\n  return -1;\n}\n\n// One view of the set into the dive's `mu`. A quarter of the LEDs are\n// iterated each frame; the rest look up where they were on the last frame,\n// which the fall has only moved by a fraction of an LED.\nfunction render(d, frame) {\n  const s = SPOTS[d.spot];\n  const tr = s[0];\n  const ti = s[1];\n  const zeta = d.zeta;\n  const px = (W0 / W) * Math.pow(2, -zeta);\n  const turn = Math.min(1, zeta / 4);\n  const ang = s[3] * zeta + s[5] * turn * turn * (3 - 2 * turn);\n  const ca = Math.cos(ang) * px;\n  const sa = Math.sin(ang) * px;\n  // Where the target sits on the panel, in LEDs from the middle; real runs down the panel.\n  const drift = Math.pow(2, -s[4] * zeta);\n  const ty = ((tr - C0R) / (W0 / W)) * drift;\n  const tx = ((ti - C0I) / (W0 / W)) * drift;\n  const maxit = Math.min(560, 110 + Math.floor(zeta * 24));\n\n  const swap = d.last;\n  d.last = d.mu;\n  d.mu = swap;\n  const swapAge = d.lastAge;\n  d.lastAge = d.age;\n  d.age = swapAge;\n  const mu = d.mu;\n  const last = d.last;\n  const age = d.age;\n  const lastAge = d.lastAge;\n  const v = d.view;\n  const lca = v[2];\n  const lsa = v[3];\n  const lk = 1 / (lca * lca + lsa * lsa);\n  const fresh = d.fresh;\n  const fx = PHASE_X[frame & 3];\n  const fy = PHASE_Y[frame & 3];\n  let dark = 0;\n  let counted = 0;\n  for (let y = 0; y \u003c H; y++) {\n    const oy = y + 0.5 - H / 2 - ty;\n    for (let x = 0; x \u003c W; x++) {\n      const ox = x + 0.5 - W / 2 - tx;\n      const cr = tr + oy * ca - ox * sa;\n      const ci = ti + oy * sa + ox * ca;\n      const p = y * W + x;\n      if (!fresh && ((x & 1) !== fx || (y & 1) !== fy)) {\n        const dr = cr - v[0];\n        const di = ci - v[1];\n        const ly = Math.round((dr * lca + di * lsa) * lk + v[5] + H / 2 - 0.5);\n        const lx = Math.round((di * lca - dr * lsa) * lk + v[4] + W / 2 - 0.5);\n        // A value is carried at most three frames, or it would smear\n        // outward along the fall.\n        const q = ly * W + lx;\n        if (lx >= 0 && lx \u003c W && ly >= 0 && ly \u003c H && lastAge[q] \u003c 3) {\n          mu[p] = last[q];\n          age[p] = lastAge[q] + 1;\n          continue;\n        }\n      }\n      const m = escape(cr, ci, maxit);\n      mu[p] = m;\n      age[p] = 0;\n      counted++;\n      if (m \u003c 0) dark++;\n    }\n  }\n  v[0] = tr;\n  v[1] = ti;\n  v[2] = ca;\n  v[3] = sa;\n  v[4] = tx;\n  v[5] = ty;\n  d.fresh = false;\n  d.dark = dark / counted;\n}\n\n// Colour bands from the escape count, dimmed wherever the count changes\n// faster than a band or so per LED: on 64 by 128 LEDs the lace at the edge\n// of the set would otherwise be confetti.\nfunction shade(params, mu, weight, first) {\n  const rgb = params.rgb;\n  const lut = params.lut;\n  const dens = params.bands;\n  const phase = params.phase;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const l = mu[p];\n      let f = 0;\n      let i = 0;\n      if (l >= 0) {\n        const a = mu[x > 0 ? p - 1 : p];\n        const b = mu[x \u003c W - 1 ? p + 1 : p];\n        const c = mu[y > 0 ? p - W : p];\n        const d = mu[y \u003c H - 1 ? p + W : p];\n        if (a >= 0 && b >= 0 && c >= 0 && d >= 0) {\n          const g = Math.max(Math.abs(b - a), Math.abs(d - c)) * dens;\n          const r = g / 0.5;\n          f = weight / (1 + r * r);\n          // Adding the phase moves the bands outward, the way the fall does.\n          let s = (l * dens + phase) * 0.5;\n          s -= Math.floor(s);\n          i = Math.floor(s * 512) * 3;\n        }\n      }\n      const o = p * 3;\n      if (first) {\n        rgb[o] = lut[i] * f;\n        rgb[o + 1] = lut[i + 1] * f;\n        rgb[o + 2] = lut[i + 2] * f;\n      } else {\n        rgb[o] += lut[i] * f;\n        rgb[o + 1] += lut[i + 1] * f;\n        rgb[o + 2] += lut[i + 2] * f;\n      }\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const rgb = params.rgb;\n  const frame = params.frame++;\n  render(params.a, frame);\n  if (!params.fading) {\n    shade(params, params.a.mu, 1, true);\n  } else {\n    const m0 = Math.min(1, params.b.zeta / FADE);\n    const m = m0 * m0 * (3 - 2 * m0);\n    shade(params, params.a.mu, 1 - m, true);\n    render(params.b, frame);\n    shade(params, params.b.mu, m, false);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, rgb[p], rgb[p + 1], rgb[p + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.25..4, Spot=0..3, Bands=1..3.5","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colour bands around the wheel."},{"name":"Speed","min":0.25,"max":4,"about":"How fast the view falls, from one doubling every eight seconds to two a second."},{"name":"Spot","min":0,"max":3,"about":"Where the dive goes: a mini-brot that is the whole set again, seahorse valley, elephant valley or a spiral."},{"name":"Bands","min":1,"max":3.5,"about":"How tightly the colour bands are packed, from slow washes to fine contour rings."}],"start":[0,2,0,1],"measures":{"motion":1.8353,"detail":0.0554,"edges":0.2209,"complexity":1.9032,"coverage":0.846,"colour":0.2924,"drift":0.4001},"knobResponse":[0.262,0.2907,0.2828,0.2216]},{"slug":"marble-run","title":"Marble Run","family":"toy","round":17,"note":"패널 높이의 구슬 굴리기 장난감이에요. 고양이눈 유리구슬이 깔때기를 돌고 지그재그 레일 셋과 나선, 실로폰을 지나 내려오면 옆의 나사 리프트가 다시 꼭대기로 올리고, 구슬이 지나는 플라스틱 조각에는 불이 들어와요. K1 을 누르면 구슬 여섯 개를 깔때기에 쏟아요.","idea":"Glass marbles roll down a marble run as tall as the panel, round a funnel, along three zigzag tracks, down a spiral and over a row of chimes, while an Archimedes screw at the side carries them back up, and each piece of clear coloured plastic lights up while a marble runs on it.","buttons":"K1 tap tips a handful of six marbles into the funnel from above; they run one lap and leave at the foot of the screw.","code":"// ===== Patternflow pattern =====\n// Title:   Marble Run\n// Family:  toy\n// Idea:    Glass marbles roll down a marble run as tall as the panel, round a funnel, along three zigzag tracks, down a spiral and over a row of chimes, while an Archimedes screw at the side carries them back up, and each piece of clear coloured plastic lights up while a marble runs on it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after the zigzag marble runs, funnels and screw lifts of the toy shop\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Paint=0..1, Speed=0.2..3, Marbles=6..28, Tilt=0..1\n//\n// Knob 1: Paint. Turns the plastic parts and the marbles' swirls round the colour wheel together, starting from a blue funnel over green, yellow and red tracks.\n// Knob 2: Speed. How fast the film runs: at 2 a marble takes about 30 s round the loop, 6 s of it up the screw; at 0.2 it drifts down in slow motion, at 3 it runs half as fast again.\n// Knob 3: Marbles. How many marbles are in the run, from 6 to 28; the screw lets them on at an even spacing, so they stay spread round the loop.\n// Knob 4: Tilt. How steep the three zigzag tracks, the chimes and the trough hang, from a drop of 2 LEDs along each track to 8, and so how fast the marbles run down them.\n// Buttons: K1 tap tips a handful of six marbles into the funnel from above; they run one lap and leave at the foot of the screw.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Marble radius and the film's gravity, in LEDs and seconds. A rolling ball\n// takes five sevenths of the pull along a slope.\nconst RM = 3.4;\nconst G = 420;\nconst ROLL = 5 / 7;\nconst DRAG = 0.6;\n// The two wooden posts of the stand (x 0..1 and 52..53) and the top of each\n// zigzag track's high end, 16 rows apart so a marble clears the track above.\nconst POST = 52;\nconst TRACK_Y = [34, 50, 66];\n// The funnel: centre, rim and throat rows, rim and throat radius, and how\n// round its rim looks from just above.\nconst FUN = { cx: 26, rim: 12, throat: 25, R: 20, r0: 2.5, e: 3 };\n// The spiral: centre, radius, top, rows per turn, turns, how round.\nconst HEL = { cx: 27, R: 21.5, y0: 80, pitch: 9, turns: 2, e: 2.5 };\n// The screw lift: centre column, top and bottom rows, rows per turn, where a\n// marble gets on and where it gets off.\nconst SCR = { cx: 58, top: 2, bot: 123, pitch: 10, inlet: 119.6, out: 6.3 };\n// Marble modes.\nconst RAIL = 0;\nconst FALL = 1;\nconst FUNNEL = 2;\nconst LIFT = 3;\n// Paths, by index: the chute from the screw, three tracks, the spiral, the\n// chimes and the trough back to the screw. Index 7 is the funnel's light.\nconst CHUTE = 0;\nconst HELIX = 4;\nconst CHIMES = 5;\nconst TROUGH = 6;\nconst BARS = 8;\nconst WOOD = [190, 138, 82];\n// Hues of the plastic at Paint 0: chute, the three tracks, spiral, funnel;\n// and of the marbles' swirls.\nconst HUE = [0.62, 0.36, 0.14, 0.97, 0.47, 0, 0, 0.56];\nconst SWIRL = [0.6, 0.0, 0.33, 0.13, 0.8, 0.5];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// A path of marble centres, sampled every half LED of its length in space:\n// screen x and y, depth z (1 nearest), and true height h for the slope.\nfunction sample(fn, steps) {\n  const X = [];\n  const Y = [];\n  const Z = [];\n  const Hh = [];\n  let last = null;\n  let acc = 0.5;\n  for (let i = 0; i \u003c= steps; i++) {\n    const q = fn(i / steps);\n    if (last) acc += Math.hypot(q[0] - last[0], q[3] - last[3], q[4] - last[4]);\n    last = q;\n    if (acc >= 0.5 || i === steps) {\n      acc = 0;\n      X.push(q[0]);\n      Y.push(q[1]);\n      Z.push(q[2]);\n      Hh.push(q[3]);\n    }\n  }\n  return { X, Y, Z, Hh, n: X.length, L: (X.length - 1) * 0.5 };\n}\n\n// A straight rail whose top runs from (x0, y0) to (x1, y1); the marble rides\n// RM + 0.5 above it.\nfunction rail(x0, y0, x1, y1) {\n  const p = sample((t) => [x0 + (x1 - x0) * t, y0 + (y1 - y0) * t - RM - 0.5, 0, y0 + (y1 - y0) * t, 0], 400);\n  return Object.assign(p, { x0, y0, x1, y1 });\n}\n\n// Position, depth, slope and sideways run of a path at length u.\nfunction at(p, u) {\n  const i = clamp(u * 2, 0, p.n - 1.001);\n  const i0 = Math.floor(i);\n  const f = i - i0;\n  const g = (A) => A[i0] + (A[i0 + 1] - A[i0]) * f;\n  return [g(p.X), g(p.Y), g(p.Z), (p.Hh[i0 + 1] - p.Hh[i0]) * 2, (p.X[i0 + 1] - p.X[i0]) * 2];\n}\n\n// The tracks, chimes and trough hang by the tilt; the rest is built once.\nfunction buildPaths(P) {\n  const d = 2 + 6 * P.tilt;\n  if (!P.paths) {\n    const { cx, R, y0, pitch, turns, e } = HEL;\n    const helix = sample((t) => {\n      const a = t * turns * 2 * Math.PI;\n      const h = y0 + t * turns * pitch;\n      return [cx + R * Math.cos(a), h + e * Math.sin(a), Math.sin(a), h, R * Math.sin(a)];\n    }, 3000);\n    P.paths = [rail(57, 10, 47, 15), 0, 0, 0, helix];\n  }\n  P.paths[CHIMES] = rail(48, 104, 6, 107 + 4 * P.tilt);\n  P.paths[TROUGH] = rail(6, 120 - 4 * P.tilt, 57, 123);\n  for (let k = 0; k \u003c 3; k++) {\n    const y = TRACK_Y[k];\n    P.paths[k + 1] = k % 2 ? rail(51, y, 10, y + d) : rail(2, y, 44, y + d);\n  }\n  // Marbles on a track keep their place along it when the tilt changes.\n  for (const m of P.marbles) if (m.mode === RAIL) m.u = Math.min(m.u, P.paths[m.p].L);\n}\n\nfunction newMarble(hue) {\n  return { mode: RAIL, p: TROUGH, u: 0, v: 6, roll: hue * 2.3, hue, x: 0, y: 0, z: 0, extra: false };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.tilt = 0.06;\n  P.paint = 0;\n  P.marbles = [];\n  P.paths = null;\n  buildPaths(P);\n  for (const k of [\"base\", \"buf\"]) P[k] = new Float32Array(N * 3);\n  for (const k of [\"baseZ\", \"zb\", \"mask\", \"tmp\"]) P[k] = new Float32Array(N);\n  P.ring = new Float32Array(BARS);\n  P.light = new Float32Array(8);\n  Object.assign(P, { screw: 0, slot: 0, t: 0, lastPick: -99, lastAdd: -99, builtAt: \"\", started: false, hueNext: 0 });\n}\n\n// Leaves a rail at its far end: into the funnel, off the end of a track, the\n// spiral or the chimes and down, or into the queue at the screw.\nfunction leave(P, m) {\n  const p = P.paths[m.p];\n  if (m.p === CHUTE) return Object.assign(m, { mode: FUNNEL, r: FUN.R, ph: 0 });\n  if (m.p === TROUGH) return Object.assign(m, { u: p.L, v: 0 });\n  const q = at(p, p.L);\n  const right = q[4] > 0;\n  let lo = right ? 44 : 2 + RM;\n  let hi = right ? POST - RM - 0.3 : 10;\n  if (m.p === HELIX) [lo, hi] = [45.5, 49.5];\n  if (m.p === CHIMES) [lo, hi] = [2 + RM, 8];\n  fall(m, q[0], q[1], m.v * q[4] * 0.6, m.v * q[3] * 0.5, m.p + 1, lo, hi);\n}\n\nfunction fall(m, x, y, vx, vy, target, lo, hi) {\n  Object.assign(m, { mode: FALL, x, y, vx, vy, tp: target, lo, hi });\n}\n\nfunction stepMarble(P, m, dt) {\n  if (m.mode === RAIL) {\n    const p = P.paths[m.p];\n    const q = at(p, m.u);\n    m.v = Math.max(3, m.v + (G * ROLL * q[3] - DRAG * m.v) * dt);\n    m.u += m.v * dt;\n    m.roll += (m.v * dt * (q[4] || 0.3)) / RM;\n    if (m.u >= p.L) leave(P, m);\n  } else if (m.mode === FALL) {\n    m.vy += G * dt;\n    m.x += m.vx * dt;\n    m.y += m.vy * dt;\n    if (m.tp \u003c 0) {\n      // A tipped marble lands in the funnel bowl where it hits it.\n      const r = Math.abs(m.x - FUN.cx);\n      if (m.y >= FUN.rim - 2 + (FUN.R - r) * 0.3) Object.assign(m, { mode: FUNNEL, r: clamp(r, 4, FUN.R), ph: m.x > FUN.cx ? 0.3 : Math.PI + 0.3 });\n      return;\n    }\n    if (m.x > m.hi) {\n      m.x = m.hi;\n      m.vx = -0.35 * Math.abs(m.vx);\n    }\n    if (m.x \u003c m.lo) {\n      m.x = m.lo;\n      m.vx = 0.35 * Math.abs(m.vx);\n    }\n    // It lands where it meets the rail it drops onto, or at the spiral's top.\n    const p = P.paths[m.tp];\n    const u = p.x0 === undefined ? 0 : clamp((m.x - p.x0) / (p.x1 - p.x0), 0, 1) * p.L;\n    if (m.y >= at(p, u)[1]) Object.assign(m, { mode: RAIL, p: m.tp, u, v: 3 + 0.08 * m.vy });\n  } else if (m.mode === FUNNEL) {\n    // Round and round the funnel, faster as it closes in on the throat.\n    const w = 1.3 * (FUN.R / m.r) ** 1.5;\n    m.ph += w * dt;\n    m.roll += (w * m.r * dt) / RM;\n    m.r -= (1.5 + 5 * (1 - m.r / FUN.R)) * dt;\n    if (m.r \u003c= FUN.r0) fall(m, FUN.cx, FUN.throat, 0, 15, 1, FUN.cx - 0.5, FUN.cx + 0.5);\n  } else if (P.screw - m.s0 >= SCR.inlet - SCR.out) Object.assign(m, { mode: RAIL, p: CHUTE, u: 0, v: 6 });\n}\n\n// Where each marble shows, from its mode.\nfunction place(P, m) {\n  if (m.mode === RAIL) {\n    const q = at(P.paths[m.p], m.u);\n    m.x = q[0];\n    m.y = q[1];\n    m.z = q[2] + 0.1;\n  } else if (m.mode === FALL) m.z = 0.1;\n  else if (m.mode === FUNNEL) {\n    const s = Math.sin(m.ph);\n    m.x = FUN.cx + m.r * Math.cos(m.ph);\n    m.y = FUN.rim + ((FUN.R - m.r) / (FUN.R - FUN.r0)) * (FUN.throat - FUN.rim) + FUN.e * (m.r / FUN.R) * s - 2.2;\n    m.z = 2 * s;\n  } else {\n    m.x = SCR.cx;\n    m.y = SCR.inlet - (P.screw - m.s0);\n    m.z = 0;\n  }\n}\n\nfunction step(P, dt, count) {\n  P.t += dt;\n  // The screw turns twice a second at Speed 2 and each turn brings a slot past\n  // the inlet; a gate lets marbles on 30 / Marbles seconds apart, so they\n  // spread evenly round the lap of about 30 s.\n  P.screw += 2 * SCR.pitch * dt;\n  const slot = Math.floor(P.screw / SCR.pitch);\n  const ms = P.marbles;\n  const extra = ms.filter((m) => !m.extra).length - count;\n  let head = null;\n  for (const m of ms) if (m.mode === RAIL && m.p === TROUGH && m.u >= P.paths[TROUGH].L - 0.6) head = m;\n  if (head && (head.extra || extra > 0)) ms.splice(ms.indexOf(head), 1);\n  else if (slot > P.slot && head && P.t - P.lastPick >= clamp(30 / count, 0.5, 5)) {\n    Object.assign(head, { mode: LIFT, s0: slot * SCR.pitch });\n    P.lastPick = P.t;\n  }\n  P.slot = slot;\n  // A new marble rolls in at the far end of the trough while the run is short.\n  if (extra \u003c 0 && P.t - P.lastAdd > 0.4 && !ms.some((m) => m.mode === RAIL && m.p === TROUGH && m.u \u003c 2 * RM + 1)) {\n    ms.push(newMarble(P.hueNext++));\n    P.lastAdd = P.t;\n  }\n  for (const m of ms) stepMarble(P, m, dt);\n  // Marbles on one rail keep a marble's width apart, the one behind waiting.\n  const busy = new Uint8Array(8);\n  for (let k = 0; k \u003c P.paths.length; k++) {\n    const on = ms.filter((m) => m.mode === RAIL && m.p === k).sort((a, b) => b.u - a.u);\n    busy[k] = on.length;\n    for (let i = 1; i \u003c on.length; i++)\n      if (on[i].u > on[i - 1].u - 2 * RM) {\n        on[i].u = on[i - 1].u - 2 * RM;\n        on[i].v = Math.min(on[i].v, on[i - 1].v);\n      }\n  }\n  // A plastic piece lights while marbles are on it, brighter for each up to\n  // three, and fades in 0.7 s after.\n  busy[7] = ms.filter((m) => m.mode === FUNNEL).length;\n  for (let k = 0; k \u003c 8; k++) {\n    const to = busy[k] ? 0.5 + 0.25 * Math.min(3, busy[k]) : 0;\n    P.light[k] = P.light[k] \u003c to ? Math.min(to, P.light[k] + dt * 6) : to + (P.light[k] - to) * Math.exp(-dt / 0.7);\n  }\n  // A chime rings as a marble rolls over the middle of its bar.\n  for (let b = 0; b \u003c BARS; b++) P.ring[b] *= Math.exp(-dt / 0.45);\n  const len = P.paths[CHIMES].L;\n  for (const m of ms) {\n    const u0 = m.uLast === undefined ? -1 : m.uLast;\n    m.uLast = undefined;\n    if (m.mode === RAIL && m.p === CHIMES) {\n      for (let b = 0; b \u003c BARS; b++) if (u0 \u003c ((b + 0.5) / BARS) * len && m.u >= ((b + 0.5) / BARS) * len) P.ring[b] = 1;\n      m.uLast = m.u;\n    }\n    place(P, m);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.paint = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  const count = Math.round(clamp(k[2], 1, 28));\n  const tilt = clamp(k[3], 0, 1);\n  if (Math.abs(tilt - P.tilt) > 0.002) {\n    P.tilt = tilt;\n    buildPaths(P);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The run has been going for a lap when the panel opens, so the marbles\n    // are spread round it, and for three more seconds at the knob's speed.\n    for (let i = 0; i \u003c 840; i++) step(P, i \u003c 750 ? 1 / 30 : speed / 60, count);\n  }\n  if (input.btnPressed && input.btnPressed[0])\n    for (let i = 0; i \u003c 6; i++) {\n      const m = newMarble(P.hueNext++);\n      m.extra = true;\n      const x = FUN.cx + (Math.random() - 0.5) * 30;\n      fall(m, x, -4 - 7 * i, 0, 0, -1, x, x);\n      P.marbles.push(m);\n    }\n  step(P, (dt * speed) / 2, count);\n}\n\n// The still parts: wall, stand, tracks, funnel, spiral, chimes, trough and\n// base, with the depth each LED stands at; and for each lit piece its LEDs\n// and the glow it throws on the wall.\nfunction paintStill(P) {\n  const B = P.base;\n  const Z = P.baseZ;\n  const h0 = P.paint;\n  for (let p = 0; p \u003c N; p++) {\n    const v = 7 + (7 * Math.floor(p / W)) / H;\n    B[p * 3] = v * 0.8;\n    B[p * 3 + 1] = v * 0.85;\n    B[p * 3 + 2] = v * 1.3;\n  }\n  Z.fill(-9);\n  P.lit = [];\n  let mine = null;\n  const dot = (x, y, c, z) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const p = y * W + x;\n    if (z \u003c Z[p]) return;\n    B[p * 3] = c[0];\n    B[p * 3 + 1] = c[1];\n    B[p * 3 + 2] = c[2];\n    Z[p] = z;\n    if (mine) mine.add(p);\n  };\n  const shade = (c, f) => c.map((v) => v * f);\n  // The base board and the two posts, with their grain.\n  for (let y = 124; y \u003c H; y++) for (let x = 0; x \u003c W; x++) dot(x, y, shade(WOOD, y === 124 ? 1.05 : 0.8 - 0.06 * (y - 125) + 0.05 * Math.sin(x * 0.7 + y)), 0);\n  for (let y = 30; y \u003c 124; y++) for (const x of [0, 1, POST, POST + 1]) dot(x, y, shade(WOOD, (x % 2 ? 0.62 : 0.85) * (0.92 + 0.08 * Math.sin(y * 0.9 + x))), -0.5);\n  for (let y = HEL.y0 - 6; y \u003c 124; y++) for (let x = HEL.cx - 2; x \u003c= HEL.cx + 2; x++) dot(x, y, shade(WOOD, 0.95 - 0.12 * Math.abs(x - HEL.cx)), 0);\n  const col = HUE.map((h) => hsv(h0 + h, 0.6, 0.85));\n  // Each lit piece remembers its LEDs.\n  const piece = (k, draw) => {\n    mine = new Set();\n    draw(col[k]);\n    P.lit[k] = [...mine];\n    mine = null;\n  };\n  // Rails: a bright top edge over a darker side; the spiral's far half is\n  // dimmer and passes behind the dowel.\n  for (let k = 0; k \u003c= HELIX; k++)\n    piece(k, (c) => {\n      const p = P.paths[k];\n      for (let i = 0; i \u003c p.n; i++) {\n        const z = p.Z[i];\n        const f = z > 0 ? 0.6 + 0.4 * z : z \u003c 0 ? 0.4 + 0.15 * z : 1;\n        dot(p.X[i], p.Y[i] + RM + 0.5, shade(c, f), z);\n        dot(p.X[i], p.Y[i] + RM + 1.5, shade(c, f * 0.55), z);\n      }\n    });\n  for (let k = 0; k \u003c 3; k++) dot(k % 2 ? POST - 1 : 2, TRACK_Y[k] + 2, shade(WOOD, 0.5), 0.2);\n  // The funnel: a cone of tinted plastic seen from the side, its rim an\n  // ellipse whose near half stands in front of the marbles.\n  const { cx, rim, throat, R, r0, e } = FUN;\n  piece(7, (c) => {\n    for (let y = rim; y \u003c= throat; y++) {\n      const r = R + ((r0 - R) * (y - rim)) / (throat - rim);\n      for (let x = Math.ceil(cx - r); x \u003c= Math.floor(cx + r); x++) dot(x, y, shade(c, 0.22 + 0.25 * Math.abs((x - cx) / r) ** 3), -3);\n      dot(cx - r, y, shade(c, 0.8), 3);\n      dot(cx + r, y, shade(c, 0.8), 3);\n    }\n    for (let y = throat; y \u003c= throat + 3; y++) for (const x of [cx - 3, cx + 3]) dot(x, y, shade(c, 0.7), 3);\n    for (let a = 0; a \u003c 6.283; a += 0.02) {\n      const s = Math.sin(a);\n      dot(cx + R * Math.cos(a), rim + e * s, shade(c, s > 0 ? 1 : 0.55), s > 0 ? 3 : -3);\n    }\n  });\n  // The chimes: eight bars of a toy xylophone on a dark frame.\n  const cp = P.paths[CHIMES];\n  for (let b = 0; b \u003c BARS; b++) {\n    const c = hsv(h0 + b / BARS, 0.55, 0.95);\n    for (let i = 0; i \u003c 4.6; i += 0.5) {\n      const q = at(cp, ((b + 0.08) / BARS) * cp.L + i);\n      dot(q[0], q[1] + RM + 0.5, c, 0);\n      dot(q[0], q[1] + RM + 1.5, shade(c, 0.6), 0);\n    }\n  }\n  for (let i = 0; i \u003c cp.n; i++) dot(cp.X[i], cp.Y[i] + RM + 2.5, [40, 34, 30], 0);\n  const tp = P.paths[TROUGH];\n  for (let i = 0; i \u003c tp.n; i++) {\n    dot(tp.X[i], tp.Y[i] + RM + 0.5, shade(WOOD, 0.95), 0);\n    dot(tp.X[i], tp.Y[i] + RM + 1.5, shade(WOOD, 0.55), 0);\n  }\n  // The glow of each lit piece: its LEDs blurred over the wall round it,\n  // worked out again only for the tracks, and only when they move.\n  P.litCol = col;\n  P.builtAt = P.paint + \":\" + P.tilt;\n  if (!P.glow) P.glow = [];\n  for (const k of [0, 1, 2, 3, 4, 7]) {\n    if (P.glow[k] && (P.glowAt === P.tilt || k === 0 || k > 3)) continue;\n    const M = P.mask;\n    M.fill(0);\n    for (const p of P.lit[k]) M[p] = 1;\n    // Two box blurs of 7 LEDs along rows and columns, by running sums.\n    for (let pass = 0; pass \u003c 4; pass++) {\n      const by = pass % 2;\n      const src = by ? P.tmp : M;\n      const dst = by ? M : P.tmp;\n      const len = by ? H : W;\n      const st = by ? W : 1;\n      for (let line = 0; line \u003c (by ? W : H); line++) {\n        const o = by ? line : line * W;\n        let acc = 0;\n        for (let i = 0; i \u003c= 3; i++) acc += src[o + i * st];\n        for (let i = 0; i \u003c len; i++) {\n          dst[o + i * st] = acc / 7;\n          if (i + 4 \u003c len) acc += src[o + (i + 4) * st];\n          if (i >= 3) acc -= src[o + (i - 3) * st];\n        }\n      }\n    }\n    const g = [];\n    for (let p = 0; p \u003c N; p++) if (M[p] > 0.02) g.push(p, M[p]);\n    P.glow[k] = g;\n  }\n  P.glowAt = P.tilt;\n}\n\n// A glass marble: a clear body tinted by its swirl, the swirl turning as the\n// marble rolls, a darker rim and a fixed highlight up to the left.\nfunction marble(P, m) {\n  const buf = P.buf;\n  const zb = P.zb;\n  const col = hsv(P.paint + SWIRL[m.hue % 6] + 0.07 * Math.floor(m.hue / 6), 0.8, 1);\n  const dim = m.mode === FUNNEL && m.z \u003c 0 ? 0.55 : 1;\n  const c = Math.cos(m.roll);\n  const s = Math.sin(m.roll);\n  for (let dy = -4; dy \u003c= 4; dy++)\n    for (let dx = -4; dx \u003c= 4; dx++) {\n      const x = Math.round(m.x) + dx;\n      const y = Math.round(m.y) + dy;\n      if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) continue;\n      const u = (x - m.x) / RM;\n      const v = (y - m.y) / RM;\n      const d = Math.hypot(u, v);\n      const a = clamp((1 - d) * RM + 0.5, 0, 1);\n      const p = y * W + x;\n      if (a \u003c= 0 || m.z \u003c zb[p]) continue;\n      const zz = Math.sqrt(Math.max(0, 1 - d * d));\n      const ru = u * c + v * s;\n      const rv = v * c - u * s;\n      // A cat's eye: four twisted blades of colour in clear glass, which\n      // catches the light round its edge.\n      const sw = Math.abs(Math.sin(2 * Math.atan2(rv, ru) + 2.5 * Math.hypot(ru, rv)));\n      const vane = sw \u003c 0.5 ? 1 - sw / 0.5 : 0;\n      const hl = Math.exp(-((u + 0.38) ** 2 + (v + 0.42) ** 2) / 0.05);\n      const rim = 80 * (1 - zz) ** 2;\n      for (let i = 0; i \u003c 3; i++) {\n        const L = 40 + col[i] * (0.3 + vane * (0.65 + 0.35 * zz)) + rim + 255 * hl;\n        buf[p * 3 + i] = buf[p * 3 + i] * (1 - a) + L * dim * a;\n      }\n      if (a > 0.5) zb[p] = m.z;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.builtAt !== P.paint + \":\" + P.tilt) paintStill(P);\n  const buf = P.buf;\n  const zb = P.zb;\n  buf.set(P.base);\n  zb.set(P.baseZ);\n  // Lit pieces brighten and throw their colour on the wall round them.\n  for (const k of [0, 1, 2, 3, 4, 7]) {\n    const L = P.light[k];\n    if (L \u003c 0.01) continue;\n    const c = P.litCol[k];\n    for (const p of P.lit[k]) for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] += (c[i] * 0.5 + 40) * L;\n    const g = P.glow[k];\n    for (let j = 0; j \u003c g.length; j += 2) for (let i = 0; i \u003c 3; i++) buf[g[j] * 3 + i] += c[i] * g[j + 1] * L * 0.45;\n  }\n  // The screw: a clear tube, a shaft, and a painted thread whose near half\n  // passes in front of the marbles it carries.\n  const tc = hsv(P.paint + 0.08, 0.6, 0.95);\n  for (let y = SCR.top; y \u003c= SCR.bot; y++)\n    for (let x = SCR.cx - 4; x \u003c= SCR.cx + 4; x++) {\n      const p = y * W + x;\n      const u = (x - SCR.cx) / 3.6;\n      let c;\n      let z = -1;\n      if (Math.abs(u) > 1) c = [62, 74, 86];\n      else {\n        const th = Math.asin(u) / (2 * Math.PI);\n        const q = (y + P.screw - SCR.inlet) / SCR.pitch + 0.5;\n        const fr = q - th - Math.floor(q - th);\n        const bk = q + th - 0.5 - Math.floor(q + th - 0.5);\n        if (fr \u003c 0.24) {\n          c = tc.map((v) => v * (0.45 + 0.5 * Math.sqrt(1 - u * u)));\n          z = 1;\n        } else if (bk \u003c 0.24) c = tc.map((v) => v * 0.26);\n        else c = Math.abs(x - SCR.cx) \u003c= 1 ? [66, 62, 56] : [14, 17, 24];\n      }\n      buf.set(c, p * 3);\n      zb[p] = z;\n    }\n  for (const m of P.marbles) marble(P, m);\n  // A ringing bar flashes and lights the air over it.\n  const cp = P.paths[CHIMES];\n  for (let b = 0; b \u003c BARS; b++) {\n    const r = P.ring[b];\n    if (r \u003c 0.02) continue;\n    const col = hsv(P.paint + b / BARS, 0.4, 1);\n    const q = at(cp, ((b + 0.5) / BARS) * cp.L);\n    for (let dy = -6; dy \u003c= 3; dy++)\n      for (let dx = -6; dx \u003c= 6; dx++) {\n        const x = Math.round(q[0]) + dx;\n        const y = Math.round(q[1] + RM + 1) + dy;\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const w = r * Math.max(0, 1 - Math.hypot(dx / 6.5, dy / 5)) * (0.6 + 0.4 * Math.sin(P.t * 40 + b));\n        for (let i = 0; i \u003c 3; i++) buf[(y * W + x) * 3 + i] += col[i] * w * 0.8;\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-marble-run","type":"code","name":"marble-run","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Marble Run\n// Family:  toy\n// Idea:    Glass marbles roll down a marble run as tall as the panel, round a funnel, along three zigzag tracks, down a spiral and over a row of chimes, while an Archimedes screw at the side carries them back up, and each piece of clear coloured plastic lights up while a marble runs on it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after the zigzag marble runs, funnels and screw lifts of the toy shop\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Paint=0..1, Speed=0.2..3, Marbles=6..28, Tilt=0..1\n//\n// Knob 1: Paint. Turns the plastic parts and the marbles' swirls round the colour wheel together, starting from a blue funnel over green, yellow and red tracks.\n// Knob 2: Speed. How fast the film runs: at 2 a marble takes about 30 s round the loop, 6 s of it up the screw; at 0.2 it drifts down in slow motion, at 3 it runs half as fast again.\n// Knob 3: Marbles. How many marbles are in the run, from 6 to 28; the screw lets them on at an even spacing, so they stay spread round the loop.\n// Knob 4: Tilt. How steep the three zigzag tracks, the chimes and the trough hang, from a drop of 2 LEDs along each track to 8, and so how fast the marbles run down them.\n// Buttons: K1 tap tips a handful of six marbles into the funnel from above; they run one lap and leave at the foot of the screw.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Marble radius and the film's gravity, in LEDs and seconds. A rolling ball\n// takes five sevenths of the pull along a slope.\nconst RM = 3.4;\nconst G = 420;\nconst ROLL = 5 / 7;\nconst DRAG = 0.6;\n// The two wooden posts of the stand (x 0..1 and 52..53) and the top of each\n// zigzag track's high end, 16 rows apart so a marble clears the track above.\nconst POST = 52;\nconst TRACK_Y = [34, 50, 66];\n// The funnel: centre, rim and throat rows, rim and throat radius, and how\n// round its rim looks from just above.\nconst FUN = { cx: 26, rim: 12, throat: 25, R: 20, r0: 2.5, e: 3 };\n// The spiral: centre, radius, top, rows per turn, turns, how round.\nconst HEL = { cx: 27, R: 21.5, y0: 80, pitch: 9, turns: 2, e: 2.5 };\n// The screw lift: centre column, top and bottom rows, rows per turn, where a\n// marble gets on and where it gets off.\nconst SCR = { cx: 58, top: 2, bot: 123, pitch: 10, inlet: 119.6, out: 6.3 };\n// Marble modes.\nconst RAIL = 0;\nconst FALL = 1;\nconst FUNNEL = 2;\nconst LIFT = 3;\n// Paths, by index: the chute from the screw, three tracks, the spiral, the\n// chimes and the trough back to the screw. Index 7 is the funnel's light.\nconst CHUTE = 0;\nconst HELIX = 4;\nconst CHIMES = 5;\nconst TROUGH = 6;\nconst BARS = 8;\nconst WOOD = [190, 138, 82];\n// Hues of the plastic at Paint 0: chute, the three tracks, spiral, funnel;\n// and of the marbles' swirls.\nconst HUE = [0.62, 0.36, 0.14, 0.97, 0.47, 0, 0, 0.56];\nconst SWIRL = [0.6, 0.0, 0.33, 0.13, 0.8, 0.5];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// A path of marble centres, sampled every half LED of its length in space:\n// screen x and y, depth z (1 nearest), and true height h for the slope.\nfunction sample(fn, steps) {\n  const X = [];\n  const Y = [];\n  const Z = [];\n  const Hh = [];\n  let last = null;\n  let acc = 0.5;\n  for (let i = 0; i \u003c= steps; i++) {\n    const q = fn(i / steps);\n    if (last) acc += Math.hypot(q[0] - last[0], q[3] - last[3], q[4] - last[4]);\n    last = q;\n    if (acc >= 0.5 || i === steps) {\n      acc = 0;\n      X.push(q[0]);\n      Y.push(q[1]);\n      Z.push(q[2]);\n      Hh.push(q[3]);\n    }\n  }\n  return { X, Y, Z, Hh, n: X.length, L: (X.length - 1) * 0.5 };\n}\n\n// A straight rail whose top runs from (x0, y0) to (x1, y1); the marble rides\n// RM + 0.5 above it.\nfunction rail(x0, y0, x1, y1) {\n  const p = sample((t) => [x0 + (x1 - x0) * t, y0 + (y1 - y0) * t - RM - 0.5, 0, y0 + (y1 - y0) * t, 0], 400);\n  return Object.assign(p, { x0, y0, x1, y1 });\n}\n\n// Position, depth, slope and sideways run of a path at length u.\nfunction at(p, u) {\n  const i = clamp(u * 2, 0, p.n - 1.001);\n  const i0 = Math.floor(i);\n  const f = i - i0;\n  const g = (A) => A[i0] + (A[i0 + 1] - A[i0]) * f;\n  return [g(p.X), g(p.Y), g(p.Z), (p.Hh[i0 + 1] - p.Hh[i0]) * 2, (p.X[i0 + 1] - p.X[i0]) * 2];\n}\n\n// The tracks, chimes and trough hang by the tilt; the rest is built once.\nfunction buildPaths(P) {\n  const d = 2 + 6 * P.tilt;\n  if (!P.paths) {\n    const { cx, R, y0, pitch, turns, e } = HEL;\n    const helix = sample((t) => {\n      const a = t * turns * 2 * Math.PI;\n      const h = y0 + t * turns * pitch;\n      return [cx + R * Math.cos(a), h + e * Math.sin(a), Math.sin(a), h, R * Math.sin(a)];\n    }, 3000);\n    P.paths = [rail(57, 10, 47, 15), 0, 0, 0, helix];\n  }\n  P.paths[CHIMES] = rail(48, 104, 6, 107 + 4 * P.tilt);\n  P.paths[TROUGH] = rail(6, 120 - 4 * P.tilt, 57, 123);\n  for (let k = 0; k \u003c 3; k++) {\n    const y = TRACK_Y[k];\n    P.paths[k + 1] = k % 2 ? rail(51, y, 10, y + d) : rail(2, y, 44, y + d);\n  }\n  // Marbles on a track keep their place along it when the tilt changes.\n  for (const m of P.marbles) if (m.mode === RAIL) m.u = Math.min(m.u, P.paths[m.p].L);\n}\n\nfunction newMarble(hue) {\n  return { mode: RAIL, p: TROUGH, u: 0, v: 6, roll: hue * 2.3, hue, x: 0, y: 0, z: 0, extra: false };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.tilt = 0.06;\n  P.paint = 0;\n  P.marbles = [];\n  P.paths = null;\n  buildPaths(P);\n  for (const k of [\"base\", \"buf\"]) P[k] = new Float32Array(N * 3);\n  for (const k of [\"baseZ\", \"zb\", \"mask\", \"tmp\"]) P[k] = new Float32Array(N);\n  P.ring = new Float32Array(BARS);\n  P.light = new Float32Array(8);\n  Object.assign(P, { screw: 0, slot: 0, t: 0, lastPick: -99, lastAdd: -99, builtAt: \"\", started: false, hueNext: 0 });\n}\n\n// Leaves a rail at its far end: into the funnel, off the end of a track, the\n// spiral or the chimes and down, or into the queue at the screw.\nfunction leave(P, m) {\n  const p = P.paths[m.p];\n  if (m.p === CHUTE) return Object.assign(m, { mode: FUNNEL, r: FUN.R, ph: 0 });\n  if (m.p === TROUGH) return Object.assign(m, { u: p.L, v: 0 });\n  const q = at(p, p.L);\n  const right = q[4] > 0;\n  let lo = right ? 44 : 2 + RM;\n  let hi = right ? POST - RM - 0.3 : 10;\n  if (m.p === HELIX) [lo, hi] = [45.5, 49.5];\n  if (m.p === CHIMES) [lo, hi] = [2 + RM, 8];\n  fall(m, q[0], q[1], m.v * q[4] * 0.6, m.v * q[3] * 0.5, m.p + 1, lo, hi);\n}\n\nfunction fall(m, x, y, vx, vy, target, lo, hi) {\n  Object.assign(m, { mode: FALL, x, y, vx, vy, tp: target, lo, hi });\n}\n\nfunction stepMarble(P, m, dt) {\n  if (m.mode === RAIL) {\n    const p = P.paths[m.p];\n    const q = at(p, m.u);\n    m.v = Math.max(3, m.v + (G * ROLL * q[3] - DRAG * m.v) * dt);\n    m.u += m.v * dt;\n    m.roll += (m.v * dt * (q[4] || 0.3)) / RM;\n    if (m.u >= p.L) leave(P, m);\n  } else if (m.mode === FALL) {\n    m.vy += G * dt;\n    m.x += m.vx * dt;\n    m.y += m.vy * dt;\n    if (m.tp \u003c 0) {\n      // A tipped marble lands in the funnel bowl where it hits it.\n      const r = Math.abs(m.x - FUN.cx);\n      if (m.y >= FUN.rim - 2 + (FUN.R - r) * 0.3) Object.assign(m, { mode: FUNNEL, r: clamp(r, 4, FUN.R), ph: m.x > FUN.cx ? 0.3 : Math.PI + 0.3 });\n      return;\n    }\n    if (m.x > m.hi) {\n      m.x = m.hi;\n      m.vx = -0.35 * Math.abs(m.vx);\n    }\n    if (m.x \u003c m.lo) {\n      m.x = m.lo;\n      m.vx = 0.35 * Math.abs(m.vx);\n    }\n    // It lands where it meets the rail it drops onto, or at the spiral's top.\n    const p = P.paths[m.tp];\n    const u = p.x0 === undefined ? 0 : clamp((m.x - p.x0) / (p.x1 - p.x0), 0, 1) * p.L;\n    if (m.y >= at(p, u)[1]) Object.assign(m, { mode: RAIL, p: m.tp, u, v: 3 + 0.08 * m.vy });\n  } else if (m.mode === FUNNEL) {\n    // Round and round the funnel, faster as it closes in on the throat.\n    const w = 1.3 * (FUN.R / m.r) ** 1.5;\n    m.ph += w * dt;\n    m.roll += (w * m.r * dt) / RM;\n    m.r -= (1.5 + 5 * (1 - m.r / FUN.R)) * dt;\n    if (m.r \u003c= FUN.r0) fall(m, FUN.cx, FUN.throat, 0, 15, 1, FUN.cx - 0.5, FUN.cx + 0.5);\n  } else if (P.screw - m.s0 >= SCR.inlet - SCR.out) Object.assign(m, { mode: RAIL, p: CHUTE, u: 0, v: 6 });\n}\n\n// Where each marble shows, from its mode.\nfunction place(P, m) {\n  if (m.mode === RAIL) {\n    const q = at(P.paths[m.p], m.u);\n    m.x = q[0];\n    m.y = q[1];\n    m.z = q[2] + 0.1;\n  } else if (m.mode === FALL) m.z = 0.1;\n  else if (m.mode === FUNNEL) {\n    const s = Math.sin(m.ph);\n    m.x = FUN.cx + m.r * Math.cos(m.ph);\n    m.y = FUN.rim + ((FUN.R - m.r) / (FUN.R - FUN.r0)) * (FUN.throat - FUN.rim) + FUN.e * (m.r / FUN.R) * s - 2.2;\n    m.z = 2 * s;\n  } else {\n    m.x = SCR.cx;\n    m.y = SCR.inlet - (P.screw - m.s0);\n    m.z = 0;\n  }\n}\n\nfunction step(P, dt, count) {\n  P.t += dt;\n  // The screw turns twice a second at Speed 2 and each turn brings a slot past\n  // the inlet; a gate lets marbles on 30 / Marbles seconds apart, so they\n  // spread evenly round the lap of about 30 s.\n  P.screw += 2 * SCR.pitch * dt;\n  const slot = Math.floor(P.screw / SCR.pitch);\n  const ms = P.marbles;\n  const extra = ms.filter((m) => !m.extra).length - count;\n  let head = null;\n  for (const m of ms) if (m.mode === RAIL && m.p === TROUGH && m.u >= P.paths[TROUGH].L - 0.6) head = m;\n  if (head && (head.extra || extra > 0)) ms.splice(ms.indexOf(head), 1);\n  else if (slot > P.slot && head && P.t - P.lastPick >= clamp(30 / count, 0.5, 5)) {\n    Object.assign(head, { mode: LIFT, s0: slot * SCR.pitch });\n    P.lastPick = P.t;\n  }\n  P.slot = slot;\n  // A new marble rolls in at the far end of the trough while the run is short.\n  if (extra \u003c 0 && P.t - P.lastAdd > 0.4 && !ms.some((m) => m.mode === RAIL && m.p === TROUGH && m.u \u003c 2 * RM + 1)) {\n    ms.push(newMarble(P.hueNext++));\n    P.lastAdd = P.t;\n  }\n  for (const m of ms) stepMarble(P, m, dt);\n  // Marbles on one rail keep a marble's width apart, the one behind waiting.\n  const busy = new Uint8Array(8);\n  for (let k = 0; k \u003c P.paths.length; k++) {\n    const on = ms.filter((m) => m.mode === RAIL && m.p === k).sort((a, b) => b.u - a.u);\n    busy[k] = on.length;\n    for (let i = 1; i \u003c on.length; i++)\n      if (on[i].u > on[i - 1].u - 2 * RM) {\n        on[i].u = on[i - 1].u - 2 * RM;\n        on[i].v = Math.min(on[i].v, on[i - 1].v);\n      }\n  }\n  // A plastic piece lights while marbles are on it, brighter for each up to\n  // three, and fades in 0.7 s after.\n  busy[7] = ms.filter((m) => m.mode === FUNNEL).length;\n  for (let k = 0; k \u003c 8; k++) {\n    const to = busy[k] ? 0.5 + 0.25 * Math.min(3, busy[k]) : 0;\n    P.light[k] = P.light[k] \u003c to ? Math.min(to, P.light[k] + dt * 6) : to + (P.light[k] - to) * Math.exp(-dt / 0.7);\n  }\n  // A chime rings as a marble rolls over the middle of its bar.\n  for (let b = 0; b \u003c BARS; b++) P.ring[b] *= Math.exp(-dt / 0.45);\n  const len = P.paths[CHIMES].L;\n  for (const m of ms) {\n    const u0 = m.uLast === undefined ? -1 : m.uLast;\n    m.uLast = undefined;\n    if (m.mode === RAIL && m.p === CHIMES) {\n      for (let b = 0; b \u003c BARS; b++) if (u0 \u003c ((b + 0.5) / BARS) * len && m.u >= ((b + 0.5) / BARS) * len) P.ring[b] = 1;\n      m.uLast = m.u;\n    }\n    place(P, m);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.paint = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3);\n  const count = Math.round(clamp(k[2], 1, 28));\n  const tilt = clamp(k[3], 0, 1);\n  if (Math.abs(tilt - P.tilt) > 0.002) {\n    P.tilt = tilt;\n    buildPaths(P);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The run has been going for a lap when the panel opens, so the marbles\n    // are spread round it, and for three more seconds at the knob's speed.\n    for (let i = 0; i \u003c 840; i++) step(P, i \u003c 750 ? 1 / 30 : speed / 60, count);\n  }\n  if (input.btnPressed && input.btnPressed[0])\n    for (let i = 0; i \u003c 6; i++) {\n      const m = newMarble(P.hueNext++);\n      m.extra = true;\n      const x = FUN.cx + (Math.random() - 0.5) * 30;\n      fall(m, x, -4 - 7 * i, 0, 0, -1, x, x);\n      P.marbles.push(m);\n    }\n  step(P, (dt * speed) / 2, count);\n}\n\n// The still parts: wall, stand, tracks, funnel, spiral, chimes, trough and\n// base, with the depth each LED stands at; and for each lit piece its LEDs\n// and the glow it throws on the wall.\nfunction paintStill(P) {\n  const B = P.base;\n  const Z = P.baseZ;\n  const h0 = P.paint;\n  for (let p = 0; p \u003c N; p++) {\n    const v = 7 + (7 * Math.floor(p / W)) / H;\n    B[p * 3] = v * 0.8;\n    B[p * 3 + 1] = v * 0.85;\n    B[p * 3 + 2] = v * 1.3;\n  }\n  Z.fill(-9);\n  P.lit = [];\n  let mine = null;\n  const dot = (x, y, c, z) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const p = y * W + x;\n    if (z \u003c Z[p]) return;\n    B[p * 3] = c[0];\n    B[p * 3 + 1] = c[1];\n    B[p * 3 + 2] = c[2];\n    Z[p] = z;\n    if (mine) mine.add(p);\n  };\n  const shade = (c, f) => c.map((v) => v * f);\n  // The base board and the two posts, with their grain.\n  for (let y = 124; y \u003c H; y++) for (let x = 0; x \u003c W; x++) dot(x, y, shade(WOOD, y === 124 ? 1.05 : 0.8 - 0.06 * (y - 125) + 0.05 * Math.sin(x * 0.7 + y)), 0);\n  for (let y = 30; y \u003c 124; y++) for (const x of [0, 1, POST, POST + 1]) dot(x, y, shade(WOOD, (x % 2 ? 0.62 : 0.85) * (0.92 + 0.08 * Math.sin(y * 0.9 + x))), -0.5);\n  for (let y = HEL.y0 - 6; y \u003c 124; y++) for (let x = HEL.cx - 2; x \u003c= HEL.cx + 2; x++) dot(x, y, shade(WOOD, 0.95 - 0.12 * Math.abs(x - HEL.cx)), 0);\n  const col = HUE.map((h) => hsv(h0 + h, 0.6, 0.85));\n  // Each lit piece remembers its LEDs.\n  const piece = (k, draw) => {\n    mine = new Set();\n    draw(col[k]);\n    P.lit[k] = [...mine];\n    mine = null;\n  };\n  // Rails: a bright top edge over a darker side; the spiral's far half is\n  // dimmer and passes behind the dowel.\n  for (let k = 0; k \u003c= HELIX; k++)\n    piece(k, (c) => {\n      const p = P.paths[k];\n      for (let i = 0; i \u003c p.n; i++) {\n        const z = p.Z[i];\n        const f = z > 0 ? 0.6 + 0.4 * z : z \u003c 0 ? 0.4 + 0.15 * z : 1;\n        dot(p.X[i], p.Y[i] + RM + 0.5, shade(c, f), z);\n        dot(p.X[i], p.Y[i] + RM + 1.5, shade(c, f * 0.55), z);\n      }\n    });\n  for (let k = 0; k \u003c 3; k++) dot(k % 2 ? POST - 1 : 2, TRACK_Y[k] + 2, shade(WOOD, 0.5), 0.2);\n  // The funnel: a cone of tinted plastic seen from the side, its rim an\n  // ellipse whose near half stands in front of the marbles.\n  const { cx, rim, throat, R, r0, e } = FUN;\n  piece(7, (c) => {\n    for (let y = rim; y \u003c= throat; y++) {\n      const r = R + ((r0 - R) * (y - rim)) / (throat - rim);\n      for (let x = Math.ceil(cx - r); x \u003c= Math.floor(cx + r); x++) dot(x, y, shade(c, 0.22 + 0.25 * Math.abs((x - cx) / r) ** 3), -3);\n      dot(cx - r, y, shade(c, 0.8), 3);\n      dot(cx + r, y, shade(c, 0.8), 3);\n    }\n    for (let y = throat; y \u003c= throat + 3; y++) for (const x of [cx - 3, cx + 3]) dot(x, y, shade(c, 0.7), 3);\n    for (let a = 0; a \u003c 6.283; a += 0.02) {\n      const s = Math.sin(a);\n      dot(cx + R * Math.cos(a), rim + e * s, shade(c, s > 0 ? 1 : 0.55), s > 0 ? 3 : -3);\n    }\n  });\n  // The chimes: eight bars of a toy xylophone on a dark frame.\n  const cp = P.paths[CHIMES];\n  for (let b = 0; b \u003c BARS; b++) {\n    const c = hsv(h0 + b / BARS, 0.55, 0.95);\n    for (let i = 0; i \u003c 4.6; i += 0.5) {\n      const q = at(cp, ((b + 0.08) / BARS) * cp.L + i);\n      dot(q[0], q[1] + RM + 0.5, c, 0);\n      dot(q[0], q[1] + RM + 1.5, shade(c, 0.6), 0);\n    }\n  }\n  for (let i = 0; i \u003c cp.n; i++) dot(cp.X[i], cp.Y[i] + RM + 2.5, [40, 34, 30], 0);\n  const tp = P.paths[TROUGH];\n  for (let i = 0; i \u003c tp.n; i++) {\n    dot(tp.X[i], tp.Y[i] + RM + 0.5, shade(WOOD, 0.95), 0);\n    dot(tp.X[i], tp.Y[i] + RM + 1.5, shade(WOOD, 0.55), 0);\n  }\n  // The glow of each lit piece: its LEDs blurred over the wall round it,\n  // worked out again only for the tracks, and only when they move.\n  P.litCol = col;\n  P.builtAt = P.paint + \":\" + P.tilt;\n  if (!P.glow) P.glow = [];\n  for (const k of [0, 1, 2, 3, 4, 7]) {\n    if (P.glow[k] && (P.glowAt === P.tilt || k === 0 || k > 3)) continue;\n    const M = P.mask;\n    M.fill(0);\n    for (const p of P.lit[k]) M[p] = 1;\n    // Two box blurs of 7 LEDs along rows and columns, by running sums.\n    for (let pass = 0; pass \u003c 4; pass++) {\n      const by = pass % 2;\n      const src = by ? P.tmp : M;\n      const dst = by ? M : P.tmp;\n      const len = by ? H : W;\n      const st = by ? W : 1;\n      for (let line = 0; line \u003c (by ? W : H); line++) {\n        const o = by ? line : line * W;\n        let acc = 0;\n        for (let i = 0; i \u003c= 3; i++) acc += src[o + i * st];\n        for (let i = 0; i \u003c len; i++) {\n          dst[o + i * st] = acc / 7;\n          if (i + 4 \u003c len) acc += src[o + (i + 4) * st];\n          if (i >= 3) acc -= src[o + (i - 3) * st];\n        }\n      }\n    }\n    const g = [];\n    for (let p = 0; p \u003c N; p++) if (M[p] > 0.02) g.push(p, M[p]);\n    P.glow[k] = g;\n  }\n  P.glowAt = P.tilt;\n}\n\n// A glass marble: a clear body tinted by its swirl, the swirl turning as the\n// marble rolls, a darker rim and a fixed highlight up to the left.\nfunction marble(P, m) {\n  const buf = P.buf;\n  const zb = P.zb;\n  const col = hsv(P.paint + SWIRL[m.hue % 6] + 0.07 * Math.floor(m.hue / 6), 0.8, 1);\n  const dim = m.mode === FUNNEL && m.z \u003c 0 ? 0.55 : 1;\n  const c = Math.cos(m.roll);\n  const s = Math.sin(m.roll);\n  for (let dy = -4; dy \u003c= 4; dy++)\n    for (let dx = -4; dx \u003c= 4; dx++) {\n      const x = Math.round(m.x) + dx;\n      const y = Math.round(m.y) + dy;\n      if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) continue;\n      const u = (x - m.x) / RM;\n      const v = (y - m.y) / RM;\n      const d = Math.hypot(u, v);\n      const a = clamp((1 - d) * RM + 0.5, 0, 1);\n      const p = y * W + x;\n      if (a \u003c= 0 || m.z \u003c zb[p]) continue;\n      const zz = Math.sqrt(Math.max(0, 1 - d * d));\n      const ru = u * c + v * s;\n      const rv = v * c - u * s;\n      // A cat's eye: four twisted blades of colour in clear glass, which\n      // catches the light round its edge.\n      const sw = Math.abs(Math.sin(2 * Math.atan2(rv, ru) + 2.5 * Math.hypot(ru, rv)));\n      const vane = sw \u003c 0.5 ? 1 - sw / 0.5 : 0;\n      const hl = Math.exp(-((u + 0.38) ** 2 + (v + 0.42) ** 2) / 0.05);\n      const rim = 80 * (1 - zz) ** 2;\n      for (let i = 0; i \u003c 3; i++) {\n        const L = 40 + col[i] * (0.3 + vane * (0.65 + 0.35 * zz)) + rim + 255 * hl;\n        buf[p * 3 + i] = buf[p * 3 + i] * (1 - a) + L * dim * a;\n      }\n      if (a > 0.5) zb[p] = m.z;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.builtAt !== P.paint + \":\" + P.tilt) paintStill(P);\n  const buf = P.buf;\n  const zb = P.zb;\n  buf.set(P.base);\n  zb.set(P.baseZ);\n  // Lit pieces brighten and throw their colour on the wall round them.\n  for (const k of [0, 1, 2, 3, 4, 7]) {\n    const L = P.light[k];\n    if (L \u003c 0.01) continue;\n    const c = P.litCol[k];\n    for (const p of P.lit[k]) for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] += (c[i] * 0.5 + 40) * L;\n    const g = P.glow[k];\n    for (let j = 0; j \u003c g.length; j += 2) for (let i = 0; i \u003c 3; i++) buf[g[j] * 3 + i] += c[i] * g[j + 1] * L * 0.45;\n  }\n  // The screw: a clear tube, a shaft, and a painted thread whose near half\n  // passes in front of the marbles it carries.\n  const tc = hsv(P.paint + 0.08, 0.6, 0.95);\n  for (let y = SCR.top; y \u003c= SCR.bot; y++)\n    for (let x = SCR.cx - 4; x \u003c= SCR.cx + 4; x++) {\n      const p = y * W + x;\n      const u = (x - SCR.cx) / 3.6;\n      let c;\n      let z = -1;\n      if (Math.abs(u) > 1) c = [62, 74, 86];\n      else {\n        const th = Math.asin(u) / (2 * Math.PI);\n        const q = (y + P.screw - SCR.inlet) / SCR.pitch + 0.5;\n        const fr = q - th - Math.floor(q - th);\n        const bk = q + th - 0.5 - Math.floor(q + th - 0.5);\n        if (fr \u003c 0.24) {\n          c = tc.map((v) => v * (0.45 + 0.5 * Math.sqrt(1 - u * u)));\n          z = 1;\n        } else if (bk \u003c 0.24) c = tc.map((v) => v * 0.26);\n        else c = Math.abs(x - SCR.cx) \u003c= 1 ? [66, 62, 56] : [14, 17, 24];\n      }\n      buf.set(c, p * 3);\n      zb[p] = z;\n    }\n  for (const m of P.marbles) marble(P, m);\n  // A ringing bar flashes and lights the air over it.\n  const cp = P.paths[CHIMES];\n  for (let b = 0; b \u003c BARS; b++) {\n    const r = P.ring[b];\n    if (r \u003c 0.02) continue;\n    const col = hsv(P.paint + b / BARS, 0.4, 1);\n    const q = at(cp, ((b + 0.5) / BARS) * cp.L);\n    for (let dy = -6; dy \u003c= 3; dy++)\n      for (let dx = -6; dx \u003c= 6; dx++) {\n        const x = Math.round(q[0]) + dx;\n        const y = Math.round(q[1] + RM + 1) + dy;\n        if (x \u003c 0 || x >= W || y >= H) continue;\n        const w = r * Math.max(0, 1 - Math.hypot(dx / 6.5, dy / 5)) * (0.6 + 0.4 * Math.sin(P.t * 40 + b));\n        for (let i = 0; i \u003c 3; i++) buf[(y * W + x) * 3 + i] += col[i] * w * 0.8;\n      }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Paint=0..1, Speed=0.2..3, Marbles=6..28, Tilt=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Paint","min":0,"max":1,"about":"Turns the plastic parts and the marbles' swirls round the colour wheel together, starting from a blue funnel over green, yellow and red tracks."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the film runs: at 2 a marble takes about 30 s round the loop, 6 s of it up the screw; at 0.2 it drifts down in slow motion, at 3 it runs half as fast again."},{"name":"Marbles","min":6,"max":28,"about":"How many marbles are in the run, from 6 to 28; the screw lets them on at an even spacing, so they stay spread round the loop."},{"name":"Tilt","min":0,"max":1,"about":"How steep the three zigzag tracks, the chimes and the trough hang, from a drop of 2 LEDs along each track to 8, and so how fast the marbles run down them."}],"start":[0,2,6,0.06],"measures":{"motion":0.4936,"detail":0.087,"edges":0.6482,"complexity":0.8353,"coverage":0.464,"colour":0.2101,"drift":0.042},"knobResponse":[0.0707,0.0515,0.0698,0.0736]},{"slug":"marbling","title":"Marbling","family":"print","round":15,"note":"물 위에 떨어진 잉크 방울이 과녁처럼 번지고, 빗이 지나가면 깃털과 갈매기 무늬로 끌려가요. 종이를 들어 올리면 물이 비고 다음 판에 다시 방울이 떨어져요.","idea":"Drops of ink land on a dark bath and spread into rings, a comb is drawn across them one way and back the other and then down through them, dragging the rings into chevrons and feathers, then the paper is lifted and the bath starts again.","buttons":"K1 tap lifts the paper now, whatever is on the bath, and the next bath starts.","code":"// ===== Patternflow pattern =====\n// Title:   Marbling\n// Family:  print\n// Idea:    Drops of ink land on a dark bath and spread into rings, a comb is drawn across them one way and back the other and then down through them, dragging the rings into chevrons and feathers, then the paper is lifted and the bath starts again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Aubrey Jaffer's mathematical marbling, after Turkish ebru and Japanese suminagashi\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=3..8, Comb=0..1\n//\n// Knob 1: Hue. Turns the four inks round the colour wheel together, opening on ultramarine, turquoise, gold and rose.\n// Knob 2: Speed. How fast the marbler works: one bath, drops to lift, takes 116 s at the bottom of the range, 11.6 s where it opens and 7.7 s at the top.\n// Knob 3: Drops. How many places the inks are dropped, from 3 bullseyes about 50 LEDs across to 8 about 30 across; turning it lifts the print and the next bath has the new count.\n// Knob 4: Comb. How close the comb's teeth stand, from 3 teeth 43 LEDs apart that drag the rings most of the panel's width to 16 teeth 8 LEDs apart that crimp them; the comb drawn down afterwards goes from 3 teeth to 10.\n// Buttons: K1 tap lifts the paper now, whatever is on the bath, and the next bath starts.\n\nconst W = 64;\nconst H = 128;\nconst GW = W + 1;\nconst MAXSITES = 8;\n// Five drops land on each site: ink, clear water, ink, clear water, ink.\nconst DROPS = 5;\n// The drops of all the sites add up to this share of the panel's area.\nconst FILL = 0.8;\n// A clear drop's radius against an ink drop's: the dark rings between inks.\nconst CLEAR = 0.8;\n// How far a site stands off the panel's middle, in LEDs: OFF and up to 4 more.\nconst OFF = 5;\n// The bath's programme in bath seconds. Speed 2 runs 0.9 of them a second.\nconst RATE = 0.45;\nconst DROPS_END = 2.6;\nconst SPREAD = 0.5;\nconst ACROSS = 3.0;\nconst BACK = 4.8;\nconst PASS = 1.6;\nconst DOWN = 6.6;\nconst DOWN_LEN = 1.4;\nconst LIFT = 9.0;\nconst LIFT_LEN = 1.0;\nconst REST = 0.4;\n// The first frame finds the last site's drops landing.\nconst START = 1.6;\n// How far a coarse comb drags the ink sideways at a tooth, in LEDs, and how\n// far its pull reaches between teeth, as a share of the gap between them.\nconst ACROSS_PULL = 60;\nconst REACH = 0.75;\n// The sideways pull of the comb, in LEDs, as a function of height, and the\n// downward pull as a function of column: tables at a quarter LED, reaching\n// 64 LEDs past the panel, since the bath goes on beyond it.\nconst TQ = 4;\nconst TY0 = -64;\nconst TY = (H + 128) * TQ;\nconst TX0 = -64;\nconst TX = (W + 128) * TQ;\n// Ink hue and saturation, ultramarine, turquoise, gold, rose, before Hue turns them.\nconst INKS = [\n  [0.63, 1],\n  [0.48, 0.95],\n  [0.12, 1],\n  [0.94, 0.9],\n];\nconst NI = INKS.length;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction ease(a, len, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / len));\n  return t * t * (3 - 2 * t);\n}\n\n// Distance from d to the nearest tooth of a comb whose teeth stand at\n// phase, phase + pitch, phase + 2 pitch and so on.\nfunction toothDistance(d, phase, pitch) {\n  d -= phase;\n  d -= Math.floor(d / pitch) * pitch;\n  return d \u003c pitch - d ? d : pitch - d;\n}\n\n// A fresh bath. Each site is a spot where five drops land one after another.\n// The sites stand one above the other near the middle of their bands, every\n// other one 5 to 9 LEDs left of the panel's middle and the rest as far right,\n// and land in a shuffled order. All sites take the same size of drop.\nfunction newBath(P) {\n  P.tau = 0;\n  P.lift = -1;\n  const sites = P.sites;\n  const order = [];\n  for (let i = 0; i \u003c sites; i++) order.push(i);\n  for (let i = sites - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    const t = order[i];\n    order[i] = order[j];\n    order[j] = t;\n  }\n  const each = (DROPS_END - 0.1) / sites;\n  const R = Math.sqrt((FILL * W * H) / (sites * (DROPS - 0.5) * Math.PI));\n  let ink = Math.floor(Math.random() * NI);\n  const flip = Math.random() \u003c 0.5 ? 1 : -1;\n  for (let s = 0; s \u003c sites; s++) {\n    const band = order[s];\n    P.cx[s] = W / 2 + (band % 2 === 0 ? flip : -flip) * (OFF + Math.random() * 4);\n    P.cy[s] = ((band + 0.35 + Math.random() * 0.3) * H) / sites;\n    for (let d = 0; d \u003c DROPS; d++) {\n      const o = s * DROPS + d;\n      // Ink and clear water take turns, ink first and last, so the rings\n      // come out ink, dark, ink round an ink centre. The inks come round in\n      // turn, so every bath carries all four.\n      const clear = d % 2 === 1;\n      P.ink[o] = clear ? -1 : ink++ % NI;\n      P.rad[o] = R * (clear ? CLEAR : 1);\n      P.t0[o] = 0.1 + s * each + (d * each * 0.8) / DROPS;\n    }\n  }\n  // The first pass is drawn towards the side the even bands stand on (the\n  // top and bottom sites at Drops 3), so it drags the odd ones across the\n  // middle and folds the even ones back off the edge. Left to a coin, some\n  // baths came out of the first pass looking much as they went in.\n  P.dir = flip;\n}\n\nexport function setup(params) {\n  params.cx = new Float64Array(MAXSITES);\n  params.cy = new Float64Array(MAXSITES);\n  params.ink = new Int8Array(MAXSITES * DROPS);\n  params.rad = new Float64Array(MAXSITES * DROPS);\n  params.t0 = new Float64Array(MAXSITES * DROPS);\n  params.r2 = new Float64Array(MAXSITES * DROPS);\n  params.rowShift = new Float64Array(TY + 1);\n  params.colShift = new Float64Array(TX + 1);\n  params.tau = 0;\n  params.lift = -1;\n  params.dir = 1;\n  params.sites = 3;\n  params.live = 0;\n  params.hue = 0;\n  params.started = false;\n  params.idx = new Int8Array(GW * (H + 1));\n  params.px = new Float64Array(GW);\n  params.py = new Float64Array(GW);\n  params.hit = new Int8Array(GW);\n  params.rgb = new Float32Array(NI * 3);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  const P = params;\n  P.hue = k[0];\n  const comb = Math.max(0, Math.min(1, k[3]));\n  const sites = Math.max(3, Math.min(MAXSITES, Math.round(k[2])));\n  const step = dt * Math.max(0.05, k[1]) * RATE;\n  if (!P.started) {\n    P.started = true;\n    P.sites = sites;\n    newBath(P);\n    P.tau = START;\n  }\n  // The paper goes down on the bath and comes up with the print; then the\n  // bath is skimmed and the next drops fall. A tap, or a new Drops count,\n  // lifts whatever is on the bath now.\n  const tap = input.btnPressed && input.btnPressed[0];\n  if (P.lift \u003c 0 && (P.tau >= LIFT || tap || sites !== P.sites)) P.lift = 0;\n  if (P.lift >= 0) {\n    P.lift += step;\n    if (P.lift >= LIFT_LEN + REST) {\n      P.sites = sites;\n      newBath(P);\n    }\n  } else P.tau += step;\n  const tau = P.tau;\n\n  // Every drop's radius squared as it stands now. A drop spreads fast and\n  // slows as it meets the bath.\n  let live = 0;\n  for (let o = 0; o \u003c P.sites * DROPS; o++) {\n    const u = Math.max(0, Math.min(1, (tau - P.t0[o]) / SPREAD));\n    const r = P.rad[o] * (1 - (1 - u) * (1 - u) * (1 - u));\n    P.r2[o] = r * r;\n    if (u > 0) live = Math.floor(o / DROPS) + 1;\n  }\n  P.live = live;\n\n  // The comb is drawn across, then back the other way with its teeth\n  // between the first pass's, then a finer comb is drawn down. A tooth drags\n  // the bath along with it, less the further from the tooth: Jaffer's tine\n  // line, a pull of size * lam / (d + lam) at distance d.\n  const teeth = 3 + Math.round(comb * 13);\n  const pitch = H / teeth;\n  const lam = 2 + pitch * REACH;\n  // A fine comb drags the ink less far than a coarse one.\n  const pull = ACROSS_PULL * Math.min(1, pitch / 30);\n  const a1 = pull * ease(ACROSS, PASS, tau) * P.dir;\n  const a2 = -pull * ease(BACK, PASS, tau) * P.dir;\n  const rows = P.rowShift;\n  for (let i = 0; i \u003c= TY; i++) {\n    const y = TY0 + i / TQ;\n    let sh = 0;\n    if (a1 !== 0) sh += (a1 * lam) / (toothDistance(y, pitch * 0.5, pitch) + lam);\n    if (a2 !== 0) sh += (a2 * lam) / (toothDistance(y, 0, pitch) + lam);\n    rows[i] = sh;\n  }\n  const down = 3 + Math.round(comb * 7);\n  const dpitch = W / down;\n  const a3 = 14 * Math.min(1, dpitch / 16) * ease(DOWN, DOWN_LEN, tau);\n  const cols = P.colShift;\n  for (let i = 0; i \u003c= TX; i++) cols[i] = a3 === 0 ? 0 : (a3 * 2.5) / (toothDistance(TX0 + i / TQ, dpitch * 0.5, dpitch) + 2.5);\n}\n\nfunction lookup(table, v, v0, n) {\n  let f = (v - v0) * TQ;\n  if (f \u003c= 0) return table[0];\n  if (f >= n) return table[n];\n  const i = Math.floor(f);\n  f -= i;\n  return table[i] + (table[i + 1] - table[i]) * f;\n}\n\n// Finds whose ink lies under each corner of LEDs along the row at height y:\n// follows each point backwards through the comb strokes and then every site,\n// newest first, and writes 0..3 into hit, or -1 for the dark bath. The whole\n// row goes through one site before the next, so the processor can work on\n// many points while each waits on its square root.\nfunction inkRow(P, y) {\n  const cx = P.cx;\n  const cy = P.cy;\n  const r2 = P.r2;\n  const inks = P.ink;\n  const px = P.px;\n  const py = P.py;\n  const hit = P.hit;\n  const rows = P.rowShift;\n  const cols = P.colShift;\n  for (let j = 0; j \u003c GW; j++) {\n    const yy = y - lookup(cols, j, TX0, TX);\n    let x = j - lookup(rows, yy, TY0, TY);\n    // The bath past the panel's sides mirrors the panel, so a comb pulls\n    // ink in from beyond the edge.\n    x -= Math.floor(x / (2 * W)) * 2 * W;\n    px[j] = x \u003c W ? x : 2 * W - x;\n    py[j] = yy;\n    hit[j] = -2;\n  }\n  for (let s = P.live - 1; s >= 0; s--) {\n    const ox = cx[s];\n    const oy = cy[s];\n    const base = s * DROPS;\n    for (let j = 0; j \u003c GW; j++) {\n      if (hit[j] !== -2) continue;\n      const dx = px[j] - ox;\n      const dy = py[j] - oy;\n      const d2 = dx * dx + dy * dy;\n      // Drops on one spot push straight outward, so their areas add up: a\n      // point is in the newest drop, or in the ring of the one before, and so\n      // on, and past them all it comes in by their total area.\n      let rest = d2;\n      let o = base + DROPS - 1;\n      for (; o >= base; o--) {\n        if (rest \u003c r2[o]) break;\n        rest -= r2[o];\n      }\n      if (o >= base) hit[j] = inks[o];\n      else if (rest \u003c d2) {\n        const f = Math.sqrt(rest / d2);\n        px[j] = ox + dx * f;\n        py[j] = oy + dy * f;\n      }\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const idx = P.idx;\n  const rgb = P.rgb;\n  const hit = P.hit;\n  for (let i = 0; i \u003c NI; i++) hsvInto(rgb, i * 3, INKS[i][0] + P.hue, INKS[i][1], 1);\n  // The bath is sampled at the LEDs' corners, and each LED shows the mean of\n  // its four corners: one sample an LED, and edges come out soft by a step.\n  for (let y = 0; y \u003c= H; y++) {\n    inkRow(P, y);\n    for (let j = 0; j \u003c GW; j++) idx[y * GW + j] = hit[j] === -2 ? -1 : hit[j];\n  }\n  for (let y = 0; y \u003c H; y++) {\n    // The paper peels off from the top and takes the print with it.\n    const fade = P.lift \u003c 0 ? 1 : 1 - ease((y / H) * 0.4, 0.6, P.lift);\n    if (fade \u003c= 0) continue;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * GW + x;\n      const a = idx[p];\n      const b2 = idx[p + 1];\n      const c = idx[p + GW];\n      const d = idx[p + GW + 1];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (a === b2 && a === c && a === d) {\n        if (a \u003c 0) continue;\n        r = rgb[a * 3];\n        g = rgb[a * 3 + 1];\n        b = rgb[a * 3 + 2];\n      } else {\n        for (let n = 0; n \u003c 4; n++) {\n          const e = n === 0 ? a : n === 1 ? b2 : n === 2 ? c : d;\n          if (e \u003c 0) continue;\n          r += rgb[e * 3] * 0.25;\n          g += rgb[e * 3 + 1] * 0.25;\n          b += rgb[e * 3 + 2] * 0.25;\n        }\n      }\n      display.setPixel(x, y, r * fade, g * fade, b * fade);\n    }\n  }\n}\n","layer":{"id":"layer-marbling","type":"code","name":"marbling","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Marbling\n// Family:  print\n// Idea:    Drops of ink land on a dark bath and spread into rings, a comb is drawn across them one way and back the other and then down through them, dragging the rings into chevrons and feathers, then the paper is lifted and the bath starts again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Aubrey Jaffer's mathematical marbling, after Turkish ebru and Japanese suminagashi\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drops=3..8, Comb=0..1\n//\n// Knob 1: Hue. Turns the four inks round the colour wheel together, opening on ultramarine, turquoise, gold and rose.\n// Knob 2: Speed. How fast the marbler works: one bath, drops to lift, takes 116 s at the bottom of the range, 11.6 s where it opens and 7.7 s at the top.\n// Knob 3: Drops. How many places the inks are dropped, from 3 bullseyes about 50 LEDs across to 8 about 30 across; turning it lifts the print and the next bath has the new count.\n// Knob 4: Comb. How close the comb's teeth stand, from 3 teeth 43 LEDs apart that drag the rings most of the panel's width to 16 teeth 8 LEDs apart that crimp them; the comb drawn down afterwards goes from 3 teeth to 10.\n// Buttons: K1 tap lifts the paper now, whatever is on the bath, and the next bath starts.\n\nconst W = 64;\nconst H = 128;\nconst GW = W + 1;\nconst MAXSITES = 8;\n// Five drops land on each site: ink, clear water, ink, clear water, ink.\nconst DROPS = 5;\n// The drops of all the sites add up to this share of the panel's area.\nconst FILL = 0.8;\n// A clear drop's radius against an ink drop's: the dark rings between inks.\nconst CLEAR = 0.8;\n// How far a site stands off the panel's middle, in LEDs: OFF and up to 4 more.\nconst OFF = 5;\n// The bath's programme in bath seconds. Speed 2 runs 0.9 of them a second.\nconst RATE = 0.45;\nconst DROPS_END = 2.6;\nconst SPREAD = 0.5;\nconst ACROSS = 3.0;\nconst BACK = 4.8;\nconst PASS = 1.6;\nconst DOWN = 6.6;\nconst DOWN_LEN = 1.4;\nconst LIFT = 9.0;\nconst LIFT_LEN = 1.0;\nconst REST = 0.4;\n// The first frame finds the last site's drops landing.\nconst START = 1.6;\n// How far a coarse comb drags the ink sideways at a tooth, in LEDs, and how\n// far its pull reaches between teeth, as a share of the gap between them.\nconst ACROSS_PULL = 60;\nconst REACH = 0.75;\n// The sideways pull of the comb, in LEDs, as a function of height, and the\n// downward pull as a function of column: tables at a quarter LED, reaching\n// 64 LEDs past the panel, since the bath goes on beyond it.\nconst TQ = 4;\nconst TY0 = -64;\nconst TY = (H + 128) * TQ;\nconst TX0 = -64;\nconst TX = (W + 128) * TQ;\n// Ink hue and saturation, ultramarine, turquoise, gold, rose, before Hue turns them.\nconst INKS = [\n  [0.63, 1],\n  [0.48, 0.95],\n  [0.12, 1],\n  [0.94, 0.9],\n];\nconst NI = INKS.length;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction ease(a, len, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / len));\n  return t * t * (3 - 2 * t);\n}\n\n// Distance from d to the nearest tooth of a comb whose teeth stand at\n// phase, phase + pitch, phase + 2 pitch and so on.\nfunction toothDistance(d, phase, pitch) {\n  d -= phase;\n  d -= Math.floor(d / pitch) * pitch;\n  return d \u003c pitch - d ? d : pitch - d;\n}\n\n// A fresh bath. Each site is a spot where five drops land one after another.\n// The sites stand one above the other near the middle of their bands, every\n// other one 5 to 9 LEDs left of the panel's middle and the rest as far right,\n// and land in a shuffled order. All sites take the same size of drop.\nfunction newBath(P) {\n  P.tau = 0;\n  P.lift = -1;\n  const sites = P.sites;\n  const order = [];\n  for (let i = 0; i \u003c sites; i++) order.push(i);\n  for (let i = sites - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    const t = order[i];\n    order[i] = order[j];\n    order[j] = t;\n  }\n  const each = (DROPS_END - 0.1) / sites;\n  const R = Math.sqrt((FILL * W * H) / (sites * (DROPS - 0.5) * Math.PI));\n  let ink = Math.floor(Math.random() * NI);\n  const flip = Math.random() \u003c 0.5 ? 1 : -1;\n  for (let s = 0; s \u003c sites; s++) {\n    const band = order[s];\n    P.cx[s] = W / 2 + (band % 2 === 0 ? flip : -flip) * (OFF + Math.random() * 4);\n    P.cy[s] = ((band + 0.35 + Math.random() * 0.3) * H) / sites;\n    for (let d = 0; d \u003c DROPS; d++) {\n      const o = s * DROPS + d;\n      // Ink and clear water take turns, ink first and last, so the rings\n      // come out ink, dark, ink round an ink centre. The inks come round in\n      // turn, so every bath carries all four.\n      const clear = d % 2 === 1;\n      P.ink[o] = clear ? -1 : ink++ % NI;\n      P.rad[o] = R * (clear ? CLEAR : 1);\n      P.t0[o] = 0.1 + s * each + (d * each * 0.8) / DROPS;\n    }\n  }\n  // The first pass is drawn towards the side the even bands stand on (the\n  // top and bottom sites at Drops 3), so it drags the odd ones across the\n  // middle and folds the even ones back off the edge. Left to a coin, some\n  // baths came out of the first pass looking much as they went in.\n  P.dir = flip;\n}\n\nexport function setup(params) {\n  params.cx = new Float64Array(MAXSITES);\n  params.cy = new Float64Array(MAXSITES);\n  params.ink = new Int8Array(MAXSITES * DROPS);\n  params.rad = new Float64Array(MAXSITES * DROPS);\n  params.t0 = new Float64Array(MAXSITES * DROPS);\n  params.r2 = new Float64Array(MAXSITES * DROPS);\n  params.rowShift = new Float64Array(TY + 1);\n  params.colShift = new Float64Array(TX + 1);\n  params.tau = 0;\n  params.lift = -1;\n  params.dir = 1;\n  params.sites = 3;\n  params.live = 0;\n  params.hue = 0;\n  params.started = false;\n  params.idx = new Int8Array(GW * (H + 1));\n  params.px = new Float64Array(GW);\n  params.py = new Float64Array(GW);\n  params.hit = new Int8Array(GW);\n  params.rgb = new Float32Array(NI * 3);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  const P = params;\n  P.hue = k[0];\n  const comb = Math.max(0, Math.min(1, k[3]));\n  const sites = Math.max(3, Math.min(MAXSITES, Math.round(k[2])));\n  const step = dt * Math.max(0.05, k[1]) * RATE;\n  if (!P.started) {\n    P.started = true;\n    P.sites = sites;\n    newBath(P);\n    P.tau = START;\n  }\n  // The paper goes down on the bath and comes up with the print; then the\n  // bath is skimmed and the next drops fall. A tap, or a new Drops count,\n  // lifts whatever is on the bath now.\n  const tap = input.btnPressed && input.btnPressed[0];\n  if (P.lift \u003c 0 && (P.tau >= LIFT || tap || sites !== P.sites)) P.lift = 0;\n  if (P.lift >= 0) {\n    P.lift += step;\n    if (P.lift >= LIFT_LEN + REST) {\n      P.sites = sites;\n      newBath(P);\n    }\n  } else P.tau += step;\n  const tau = P.tau;\n\n  // Every drop's radius squared as it stands now. A drop spreads fast and\n  // slows as it meets the bath.\n  let live = 0;\n  for (let o = 0; o \u003c P.sites * DROPS; o++) {\n    const u = Math.max(0, Math.min(1, (tau - P.t0[o]) / SPREAD));\n    const r = P.rad[o] * (1 - (1 - u) * (1 - u) * (1 - u));\n    P.r2[o] = r * r;\n    if (u > 0) live = Math.floor(o / DROPS) + 1;\n  }\n  P.live = live;\n\n  // The comb is drawn across, then back the other way with its teeth\n  // between the first pass's, then a finer comb is drawn down. A tooth drags\n  // the bath along with it, less the further from the tooth: Jaffer's tine\n  // line, a pull of size * lam / (d + lam) at distance d.\n  const teeth = 3 + Math.round(comb * 13);\n  const pitch = H / teeth;\n  const lam = 2 + pitch * REACH;\n  // A fine comb drags the ink less far than a coarse one.\n  const pull = ACROSS_PULL * Math.min(1, pitch / 30);\n  const a1 = pull * ease(ACROSS, PASS, tau) * P.dir;\n  const a2 = -pull * ease(BACK, PASS, tau) * P.dir;\n  const rows = P.rowShift;\n  for (let i = 0; i \u003c= TY; i++) {\n    const y = TY0 + i / TQ;\n    let sh = 0;\n    if (a1 !== 0) sh += (a1 * lam) / (toothDistance(y, pitch * 0.5, pitch) + lam);\n    if (a2 !== 0) sh += (a2 * lam) / (toothDistance(y, 0, pitch) + lam);\n    rows[i] = sh;\n  }\n  const down = 3 + Math.round(comb * 7);\n  const dpitch = W / down;\n  const a3 = 14 * Math.min(1, dpitch / 16) * ease(DOWN, DOWN_LEN, tau);\n  const cols = P.colShift;\n  for (let i = 0; i \u003c= TX; i++) cols[i] = a3 === 0 ? 0 : (a3 * 2.5) / (toothDistance(TX0 + i / TQ, dpitch * 0.5, dpitch) + 2.5);\n}\n\nfunction lookup(table, v, v0, n) {\n  let f = (v - v0) * TQ;\n  if (f \u003c= 0) return table[0];\n  if (f >= n) return table[n];\n  const i = Math.floor(f);\n  f -= i;\n  return table[i] + (table[i + 1] - table[i]) * f;\n}\n\n// Finds whose ink lies under each corner of LEDs along the row at height y:\n// follows each point backwards through the comb strokes and then every site,\n// newest first, and writes 0..3 into hit, or -1 for the dark bath. The whole\n// row goes through one site before the next, so the processor can work on\n// many points while each waits on its square root.\nfunction inkRow(P, y) {\n  const cx = P.cx;\n  const cy = P.cy;\n  const r2 = P.r2;\n  const inks = P.ink;\n  const px = P.px;\n  const py = P.py;\n  const hit = P.hit;\n  const rows = P.rowShift;\n  const cols = P.colShift;\n  for (let j = 0; j \u003c GW; j++) {\n    const yy = y - lookup(cols, j, TX0, TX);\n    let x = j - lookup(rows, yy, TY0, TY);\n    // The bath past the panel's sides mirrors the panel, so a comb pulls\n    // ink in from beyond the edge.\n    x -= Math.floor(x / (2 * W)) * 2 * W;\n    px[j] = x \u003c W ? x : 2 * W - x;\n    py[j] = yy;\n    hit[j] = -2;\n  }\n  for (let s = P.live - 1; s >= 0; s--) {\n    const ox = cx[s];\n    const oy = cy[s];\n    const base = s * DROPS;\n    for (let j = 0; j \u003c GW; j++) {\n      if (hit[j] !== -2) continue;\n      const dx = px[j] - ox;\n      const dy = py[j] - oy;\n      const d2 = dx * dx + dy * dy;\n      // Drops on one spot push straight outward, so their areas add up: a\n      // point is in the newest drop, or in the ring of the one before, and so\n      // on, and past them all it comes in by their total area.\n      let rest = d2;\n      let o = base + DROPS - 1;\n      for (; o >= base; o--) {\n        if (rest \u003c r2[o]) break;\n        rest -= r2[o];\n      }\n      if (o >= base) hit[j] = inks[o];\n      else if (rest \u003c d2) {\n        const f = Math.sqrt(rest / d2);\n        px[j] = ox + dx * f;\n        py[j] = oy + dy * f;\n      }\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const idx = P.idx;\n  const rgb = P.rgb;\n  const hit = P.hit;\n  for (let i = 0; i \u003c NI; i++) hsvInto(rgb, i * 3, INKS[i][0] + P.hue, INKS[i][1], 1);\n  // The bath is sampled at the LEDs' corners, and each LED shows the mean of\n  // its four corners: one sample an LED, and edges come out soft by a step.\n  for (let y = 0; y \u003c= H; y++) {\n    inkRow(P, y);\n    for (let j = 0; j \u003c GW; j++) idx[y * GW + j] = hit[j] === -2 ? -1 : hit[j];\n  }\n  for (let y = 0; y \u003c H; y++) {\n    // The paper peels off from the top and takes the print with it.\n    const fade = P.lift \u003c 0 ? 1 : 1 - ease((y / H) * 0.4, 0.6, P.lift);\n    if (fade \u003c= 0) continue;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * GW + x;\n      const a = idx[p];\n      const b2 = idx[p + 1];\n      const c = idx[p + GW];\n      const d = idx[p + GW + 1];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (a === b2 && a === c && a === d) {\n        if (a \u003c 0) continue;\n        r = rgb[a * 3];\n        g = rgb[a * 3 + 1];\n        b = rgb[a * 3 + 2];\n      } else {\n        for (let n = 0; n \u003c 4; n++) {\n          const e = n === 0 ? a : n === 1 ? b2 : n === 2 ? c : d;\n          if (e \u003c 0) continue;\n          r += rgb[e * 3] * 0.25;\n          g += rgb[e * 3 + 1] * 0.25;\n          b += rgb[e * 3 + 2] * 0.25;\n        }\n      }\n      display.setPixel(x, y, r * fade, g * fade, b * fade);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Drops=3..8, Comb=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the four inks round the colour wheel together, opening on ultramarine, turquoise, gold and rose."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the marbler works: one bath, drops to lift, takes 116 s at the bottom of the range, 11.6 s where it opens and 7.7 s at the top."},{"name":"Drops","min":3,"max":8,"about":"How many places the inks are dropped, from 3 bullseyes about 50 LEDs across to 8 about 30 across; turning it lifts the print and the next bath has the new count."},{"name":"Comb","min":0,"max":1,"about":"How close the comb's teeth stand, from 3 teeth 43 LEDs apart that drag the rings most of the panel's width to 16 teeth 8 LEDs apart that crimp them; the comb drawn down afterwards goes from 3 teeth to 10."}],"start":[0,2,3,0.06],"measures":{"motion":1.6459,"detail":0.1305,"edges":0.9605,"complexity":0.2799,"coverage":0.6371,"colour":0.5767,"drift":0.3773},"knobResponse":[0.3451,0.3454,0.3519,0.2984]},{"slug":"maze","title":"Maze","family":"algo","round":2,"note":"미로를 한 칸씩 파고 나면 입구에서 너비 우선 물결이 퍼져 복도마다 거리만큼 색을 입혀요. 가장 짧은 길이 밝게 그어지고, 미로가 부서진 자리에 다음 미로가 파여요.","idea":"A maze is carved cell by cell, a breadth-first flood from the way in colours every corridor by its distance, the shortest way out is traced bright, and the maze crumbles for the next one.","buttons":"K1 tap crumbles the maze and carves a new one.","code":"// ===== Patternflow pattern =====\n// Title:   Maze\n// Family:  algo\n// Idea:    A maze is carved cell by cell, a breadth-first flood from the way in colours every corridor by its distance, the shortest way out is traced bright, and the maze crumbles for the next one.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Cell=2..4, Carver=0..3\n//\n// Knob 1: Hue. Turns the flood, which runs from gold at the way in through red to violet at the far ends, and the carver's lit cells with it.\n// Knob 2: Speed. Carving, flood and trace together, from about 50 carving steps a second to about 1100.\n// Knob 3: Cell. Corridor width in LEDs: 2 gives a maze of 21 by 42 cells, 4 one of 12 by 25.\n// Knob 4: Carver. 0 recursive backtracker with its stack lit, 1 Prim's with its frontier lit, 2 Kruskal's with each joined patch its own shade, 3 sidewinder row by row.\n// Buttons: K1 tap crumbles the maze and carves a new one.\n\nconst W = 64;\nconst H = 128;\nconst MAXC = 900;\n\nconst CARVE = 0;\nconst FLOOD = 1;\nconst TRACE = 2;\nconst HOLD = 3;\nconst CRUMBLE = 4;\n\nconst BACKTRACK = 0;\nconst PRIM = 1;\nconst KRUSKAL = 2;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = 255 * (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v);\n  out[o + 1] = 255 * (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p);\n  out[o + 2] = 255 * (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q);\n}\n\nexport function setup(params) {\n  const P = params;\n  // Every LED says what it shows: a cell, the wall a passage can open in\n  // (N + 2a to the right of cell a, N + 2a + 1 below it), or -1 for a wall\n  // that never opens.\n  P.map = new Int16Array(W * H);\n  P.openR = new Uint8Array(MAXC);\n  P.openD = new Uint8Array(MAXC);\n  P.inMaze = new Uint8Array(MAXC);\n  P.seq = new Int16Array(MAXC);\n  P.mark = new Uint8Array(MAXC);\n  P.stack = new Int16Array(MAXC);\n  P.front = new Int16Array(MAXC);\n  P.parent = new Int16Array(MAXC);\n  P.size = new Int16Array(MAXC);\n  P.edges = new Int16Array(MAXC * 2);\n  P.dist = new Int16Array(MAXC);\n  P.from = new Int16Array(MAXC);\n  P.queue = new Int16Array(MAXC);\n  P.onPath = new Uint8Array(MAXC);\n  P.thr = new Float32Array(MAXC);\n  P.rgb = new Float32Array(MAXC * 3);\n  P.nb = new Int16Array(4);\n  P.floodLut = new Float32Array(64 * 3);\n  P.patchLut = new Float32Array(16 * 3);\n  P.pal = new Float32Array(4 * 3);\n  P.cell = 0;\n  P.carver = 0;\n  P.hueKey = -1;\n  P.phase = CARVE;\n  P.t = 0;\n  P.acc = 0;\n}\n\nfunction build(P, c) {\n  const pitch = c + 1;\n  const cols = Math.floor((W - 1) / pitch);\n  const rows = Math.floor((H - 1) / pitch);\n  const N = cols * rows;\n  P.cols = cols;\n  P.rows = rows;\n  P.N = N;\n  P.cell = c;\n  P.ox = (W - (cols * pitch + 1)) >> 1;\n  P.oy = (H - (rows * pitch + 1)) >> 1;\n  P.map.fill(-1);\n  for (let cy = 0; cy \u003c rows; cy++) {\n    for (let cx = 0; cx \u003c cols; cx++) {\n      const a = cy * cols + cx;\n      const x0 = P.ox + cx * pitch + 1;\n      const y0 = P.oy + cy * pitch + 1;\n      for (let y = 0; y \u003c c; y++) {\n        for (let x = 0; x \u003c c; x++) P.map[(y0 + y) * W + x0 + x] = a;\n        if (cx \u003c cols - 1) P.map[(y0 + y) * W + x0 + c] = N + a * 2;\n      }\n      if (cy \u003c rows - 1) for (let x = 0; x \u003c c; x++) P.map[(y0 + c) * W + x0 + x] = N + a * 2 + 1;\n    }\n  }\n  P.inX = -1;\n  P.outX = -1;\n}\n\n// The way in is a gap in the top edge above one cell, the way out one in the\n// bottom edge; the LEDs of the gap belong to the cell beside them.\nfunction doors(P, value) {\n  const c = P.cell;\n  const pitch = c + 1;\n  const top = P.oy * W;\n  const bottom = (P.oy + P.rows * pitch) * W;\n  for (let x = 0; x \u003c c; x++) {\n    if (P.inX >= 0) P.map[top + P.ox + P.inX * pitch + 1 + x] = value ? P.start : -1;\n    if (P.outX >= 0) P.map[bottom + P.ox + P.outX * pitch + 1 + x] = value ? P.goal : -1;\n  }\n}\n\nfunction open(P, a, b) {\n  if (b === a + 1) P.openR[a] = 1;\n  else if (b === a - 1) P.openR[b] = 1;\n  else if (b > a) P.openD[a] = 1;\n  else P.openD[b] = 1;\n}\n\n// The neighbours of a with inMaze equal to want go into P.nb.\nfunction neighbours(P, a, want) {\n  const cols = P.cols;\n  const x = a % cols;\n  let n = 0;\n  if (x > 0 && P.inMaze[a - 1] === want) P.nb[n++] = a - 1;\n  if (x \u003c cols - 1 && P.inMaze[a + 1] === want) P.nb[n++] = a + 1;\n  if (a >= cols && P.inMaze[a - cols] === want) P.nb[n++] = a - cols;\n  if (a + cols \u003c P.N && P.inMaze[a + cols] === want) P.nb[n++] = a + cols;\n  return n;\n}\n\nfunction join(P, a) {\n  P.inMaze[a] = 1;\n  P.seq[a] = ++P.seqN;\n}\n\nfunction find(P, a) {\n  const parent = P.parent;\n  while (parent[a] !== a) {\n    parent[a] = parent[parent[a]];\n    a = parent[a];\n  }\n  return a;\n}\n\nfunction addFront(P, a) {\n  const n = neighbours(P, a, 0);\n  for (let i = 0; i \u003c n; i++) {\n    const b = P.nb[i];\n    if (!P.mark[b]) {\n      P.mark[b] = 1;\n      P.front[P.fN++] = b;\n    }\n  }\n}\n\nfunction newMaze(P, carver) {\n  const N = P.N;\n  doors(P, false);\n  P.openR.fill(0);\n  P.openD.fill(0);\n  P.inMaze.fill(0);\n  P.mark.fill(0);\n  P.onPath.fill(0);\n  P.seq.fill(-1);\n  P.seqN = 0;\n  P.carver = carver;\n  P.inX = Math.floor(Math.random() * P.cols);\n  P.outX = Math.floor(Math.random() * P.cols);\n  P.start = P.inX;\n  P.goal = (P.rows - 1) * P.cols + P.outX;\n  doors(P, true);\n  P.phase = CARVE;\n  P.solved = false;\n  P.acc = 0;\n  P.t = 0;\n  if (carver === BACKTRACK) {\n    join(P, P.start);\n    P.stack[0] = P.start;\n    P.sp = 1;\n    P.mark[P.start] = 1;\n    P.total = 2 * N;\n  } else if (carver === PRIM) {\n    join(P, P.start);\n    P.fN = 0;\n    addFront(P, P.start);\n    P.total = N;\n  } else if (carver === KRUSKAL) {\n    let e = 0;\n    for (let a = 0; a \u003c N; a++) {\n      P.parent[a] = a;\n      P.size[a] = 1;\n      if (a % P.cols \u003c P.cols - 1) P.edges[e++] = a * 2;\n      if (a + P.cols \u003c N) P.edges[e++] = a * 2 + 1;\n    }\n    for (let i = e - 1; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.edges[i];\n      P.edges[i] = P.edges[j];\n      P.edges[j] = t;\n    }\n    P.eN = e;\n    P.eAt = 0;\n    P.total = N;\n  } else {\n    P.sx = 0;\n    P.sy = 0;\n    P.run = 0;\n    P.total = N;\n  }\n}\n\n// One step of the carver; false once the maze is whole.\nfunction carve(P) {\n  const cols = P.cols;\n  if (P.carver === BACKTRACK) {\n    if (P.sp === 0) return false;\n    const a = P.stack[P.sp - 1];\n    const n = neighbours(P, a, 0);\n    if (n > 0) {\n      const b = P.nb[Math.floor(Math.random() * n)];\n      open(P, a, b);\n      join(P, b);\n      P.mark[b] = 1;\n      P.stack[P.sp++] = b;\n    } else {\n      P.mark[a] = 0;\n      P.sp--;\n    }\n    return true;\n  }\n  if (P.carver === PRIM) {\n    if (P.fN === 0) return false;\n    const i = Math.floor(Math.random() * P.fN);\n    const a = P.front[i];\n    P.front[i] = P.front[--P.fN];\n    P.mark[a] = 0;\n    const n = neighbours(P, a, 1);\n    open(P, a, P.nb[Math.floor(Math.random() * n)]);\n    join(P, a);\n    addFront(P, a);\n    return true;\n  }\n  if (P.carver === KRUSKAL) {\n    while (P.eAt \u003c P.eN) {\n      const e = P.edges[P.eAt++];\n      const a = e >> 1;\n      const b = e & 1 ? a + cols : a + 1;\n      let ra = find(P, a);\n      let rb = find(P, b);\n      if (ra === rb) continue;\n      // The bigger patch keeps its root, and with it its shade.\n      if (P.size[ra] \u003c P.size[rb]) {\n        const t = ra;\n        ra = rb;\n        rb = t;\n      }\n      P.parent[rb] = ra;\n      P.size[ra] += P.size[rb];\n      open(P, a, b);\n      if (!P.inMaze[a]) join(P, a);\n      if (!P.inMaze[b]) join(P, b);\n      return true;\n    }\n    return false;\n  }\n  // Sidewinder: each row runs east and, where a run ends, one cell of it\n  // opens north. The top row is one long corridor.\n  if (P.sy >= P.rows) return false;\n  const a = P.sy * cols + P.sx;\n  join(P, a);\n  if (P.sy === 0) {\n    if (P.sx \u003c cols - 1) P.openR[a] = 1;\n  } else if (P.sx === cols - 1 || Math.random() \u003c 0.5) {\n    const r = P.run + Math.floor(Math.random() * (P.sx - P.run + 1));\n    P.openD[(P.sy - 1) * cols + r] = 1;\n    P.run = P.sx + 1;\n  } else P.openR[a] = 1;\n  P.sx++;\n  if (P.sx >= cols) {\n    P.sx = 0;\n    P.sy++;\n    P.run = 0;\n  }\n  return true;\n}\n\n// The whole breadth-first search is done at once; the flood on screen only\n// reveals it a layer at a time.\nfunction solve(P) {\n  const N = P.N;\n  const cols = P.cols;\n  P.dist.fill(-1, 0, N);\n  P.dist[P.start] = 0;\n  P.queue[0] = P.start;\n  let qh = 0;\n  let qt = 1;\n  let far = 0;\n  while (qh \u003c qt) {\n    const a = P.queue[qh++];\n    const d = P.dist[a] + 1;\n    const x = a % cols;\n    for (let k = 0; k \u003c 4; k++) {\n      let b = -1;\n      if (k === 0 && x > 0 && P.openR[a - 1]) b = a - 1;\n      else if (k === 1 && x \u003c cols - 1 && P.openR[a]) b = a + 1;\n      else if (k === 2 && a >= cols && P.openD[a - cols]) b = a - cols;\n      else if (k === 3 && a + cols \u003c N && P.openD[a]) b = a + cols;\n      if (b >= 0 && P.dist[b] \u003c 0) {\n        P.dist[b] = d;\n        P.from[b] = a;\n        P.queue[qt++] = b;\n        if (d > far) far = d;\n      }\n    }\n  }\n  P.far = far;\n  for (let a = P.goal; a !== P.start; a = P.from[a]) P.onPath[a] = 1;\n  P.onPath[P.start] = 1;\n  // The crumble takes the side corridors first, in no order, and the path last.\n  for (let a = 0; a \u003c N; a++) P.thr[a] = P.onPath[a] ? 0.72 + 0.12 * Math.random() : Math.random() * 0.7;\n  P.phase = FLOOD;\n  P.solved = true;\n  P.front0 = -2;\n  P.trace = -1e9;\n  P.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  const cell = Math.max(2, Math.min(4, Math.round(k[2])));\n  const carver = Math.max(0, Math.min(3, Math.round(k[3])));\n  const pace = Math.pow(2, 1.1 * k[1]);\n\n  if (cell !== P.cell) {\n    build(P, cell);\n    newMaze(P, carver);\n    // Open on a maze already under way rather than a dark panel.\n    for (let i = Math.floor(P.total * 0.4); i > 0; i--) carve(P);\n  } else if (carver !== P.carver && P.phase === CARVE) {\n    newMaze(P, carver);\n    for (let i = Math.floor(P.total * 0.25); i > 0; i--) carve(P);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== CRUMBLE) {\n    // A maze still being carved has no path yet, so it all crumbles in no order.\n    if (!P.solved) for (let a = 0; a \u003c P.N; a++) P.thr[a] = Math.random() * 0.85;\n    P.phase = CRUMBLE;\n    P.t = 0;\n  }\n\n  if (P.phase === CARVE) {\n    // Bigger cells are fewer, so they carve slower in step and a maze takes\n    // about as long whatever its size.\n    P.acc += dt * 50 * pace * (P.N / 882);\n    let n = 0;\n    while (P.acc >= 1 && n \u003c 400) {\n      P.acc -= 1;\n      n++;\n      if (!carve(P)) {\n        solve(P);\n        break;\n      }\n    }\n    if (P.acc > 1) P.acc = 1;\n  } else if (P.phase === FLOOD) {\n    P.front0 += dt * 26 * pace * Math.sqrt(P.N / 882);\n    if (P.front0 > P.far + 6) {\n      P.front0 = P.far + 6;\n      P.phase = TRACE;\n      P.trace = -2;\n    }\n  } else if (P.phase === TRACE) {\n    P.trace += dt * 40 * pace * Math.sqrt(P.N / 882);\n    if (P.trace > P.dist[P.goal] + 4) {\n      P.phase = HOLD;\n      P.t = 0;\n    }\n  } else if (P.phase === HOLD) {\n    P.t += dt;\n    if (P.t > 1.4) {\n      P.phase = CRUMBLE;\n      P.t = 0;\n    }\n  } else {\n    P.t += dt * Math.min(2, 0.7 + 0.3 * pace);\n    if (P.t > 1.1) newMaze(P, carver);\n  }\n\n  const hue = k[0] + 0.14;\n  if (hue !== P.hueKey) {\n    P.hueKey = hue;\n    // The flood runs backwards round the wheel from the way in, gold through\n    // red to violet, and stays bright: a dim orange would read as brown.\n    for (let i = 0; i \u003c 64; i++) hsvInto(P.floodLut, i * 3, hue - 0.42 * (i / 63), 0.8, 0.85);\n    // The bare maze is slate whatever the hue, and Kruskal's patches are\n    // shades of it, from teal to violet.\n    for (let i = 0; i \u003c 16; i++) hsvInto(P.patchLut, i * 3, 0.5 + 0.32 * (((i * 7) % 16) / 15), 0.5, 0.5 + 0.2 * (i / 15));\n    hsvInto(P.pal, 0, 0.6, 0.3, 0.42);\n    hsvInto(P.pal, 3, hue, 0.8, 0.85);\n    hsvInto(P.pal, 6, hue + 0.4, 0.35, 1);\n  }\n  colourCells(P);\n}\n\nfunction mixWhite(out, o, g) {\n  out[o] += (228 - out[o]) * g;\n  out[o + 1] += (228 - out[o + 1]) * g;\n  out[o + 2] += (228 - out[o + 2]) * g;\n}\n\nfunction colourCells(P) {\n  const N = P.N;\n  const rgb = P.rgb;\n  const pal = P.pal;\n  const carving = !P.solved;\n  // A tap mid-flood or mid-trace crumbles what is shown at that moment.\n  const shown = P.front0;\n  const lit = P.trace;\n  const back = 1 - 0.4 * Math.max(0, Math.min(1, (P.trace + 2) / 30));\n  for (let a = 0; a \u003c N; a++) {\n    const o = a * 3;\n    if (carving && !P.inMaze[a]) {\n      // Prim's frontier waits dim in the accent colour.\n      const f = P.carver === PRIM && P.mark[a] ? 0.7 : 0;\n      rgb[o] = pal[3] * f;\n      rgb[o + 1] = pal[4] * f;\n      rgb[o + 2] = pal[5] * f;\n    } else if (carving) {\n      if (P.carver === KRUSKAL) {\n        const s = (Math.imul(find(P, a) + 1, 2654435761) >>> 28) * 3;\n        rgb[o] = P.patchLut[s];\n        rgb[o + 1] = P.patchLut[s + 1];\n        rgb[o + 2] = P.patchLut[s + 2];\n      } else {\n        // The backtracker's stack, and the sidewinder's open run, in the accent.\n        let c = 0;\n        if (P.carver === BACKTRACK && P.mark[a]) c = 3;\n        else if (P.carver === 3 && a >= P.sy * P.cols + P.run && a \u003c P.sy * P.cols + P.sx) c = 3;\n        rgb[o] = pal[c];\n        rgb[o + 1] = pal[c + 1];\n        rgb[o + 2] = pal[c + 2];\n      }\n      // The cell the carver stands on is white: the backtracker's head even\n      // as it backs up, for the others the cells carved in the last six steps.\n      if (P.carver === BACKTRACK) {\n        if (P.sp > 0 && a === P.stack[P.sp - 1]) mixWhite(rgb, o, 1);\n      } else {\n        const age = P.seqN - P.seq[a];\n        if (age \u003c 6) mixWhite(rgb, o, 1 - age / 6);\n      }\n    } else {\n      const d = P.dist[a];\n      if (d \u003c 0 || d > shown) {\n        rgb[o] = pal[0];\n        rgb[o + 1] = pal[1];\n        rgb[o + 2] = pal[2];\n      } else {\n        const s = Math.min(63, Math.floor((d * 63) / Math.max(1, P.far))) * 3;\n        rgb[o] = P.floodLut[s];\n        rgb[o + 1] = P.floodLut[s + 1];\n        rgb[o + 2] = P.floodLut[s + 2];\n        // The newest layers of the flood are its white front.\n        if (shown - d \u003c 5) mixWhite(rgb, o, 1 - (shown - d) / 5);\n      }\n      if (P.onPath[a] && d \u003c= lit) {\n        rgb[o] = pal[6];\n        rgb[o + 1] = pal[7];\n        rgb[o + 2] = pal[8];\n        if (lit - d \u003c 4) mixWhite(rgb, o, 1 - (lit - d) / 4);\n      } else if (back \u003c 1) {\n        // The rest of the maze steps back while the path is drawn.\n        rgb[o] *= back;\n        rgb[o + 1] *= back;\n        rgb[o + 2] *= back;\n      }\n    }\n    if (P.phase === CRUMBLE) {\n      const f = Math.max(0, Math.min(1, 1 - (P.t - P.thr[a]) / 0.16));\n      rgb[o] *= f;\n      rgb[o + 1] *= f;\n      rgb[o + 2] *= f;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const N = P.N;\n  const rgb = P.rgb;\n  const map = P.map;\n  const carving = !P.solved;\n  const cols = P.cols;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const v = map[y * W + x];\n      if (v \u003c 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      let c = v;\n      if (v >= N) {\n        const e = v - N;\n        const a = e >> 1;\n        if (!(e & 1 ? P.openD[a] : P.openR[a])) {\n          display.setPixel(x, y, 0, 0, 0);\n          continue;\n        }\n        const b = e & 1 ? a + cols : a + 1;\n        // A passage shows whichever of its two cells came later: carved\n        // later while carving, reached later by the flood after.\n        if (carving) c = P.seq[a] > P.seq[b] ? a : b;\n        else c = P.dist[a] > P.dist[b] ? a : b;\n      }\n      display.setPixel(x, y, rgb[c * 3], rgb[c * 3 + 1], rgb[c * 3 + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-maze","type":"code","name":"maze","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Maze\n// Family:  algo\n// Idea:    A maze is carved cell by cell, a breadth-first flood from the way in colours every corridor by its distance, the shortest way out is traced bright, and the maze crumbles for the next one.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Cell=2..4, Carver=0..3\n//\n// Knob 1: Hue. Turns the flood, which runs from gold at the way in through red to violet at the far ends, and the carver's lit cells with it.\n// Knob 2: Speed. Carving, flood and trace together, from about 50 carving steps a second to about 1100.\n// Knob 3: Cell. Corridor width in LEDs: 2 gives a maze of 21 by 42 cells, 4 one of 12 by 25.\n// Knob 4: Carver. 0 recursive backtracker with its stack lit, 1 Prim's with its frontier lit, 2 Kruskal's with each joined patch its own shade, 3 sidewinder row by row.\n// Buttons: K1 tap crumbles the maze and carves a new one.\n\nconst W = 64;\nconst H = 128;\nconst MAXC = 900;\n\nconst CARVE = 0;\nconst FLOOD = 1;\nconst TRACE = 2;\nconst HOLD = 3;\nconst CRUMBLE = 4;\n\nconst BACKTRACK = 0;\nconst PRIM = 1;\nconst KRUSKAL = 2;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = 255 * (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v);\n  out[o + 1] = 255 * (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p);\n  out[o + 2] = 255 * (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q);\n}\n\nexport function setup(params) {\n  const P = params;\n  // Every LED says what it shows: a cell, the wall a passage can open in\n  // (N + 2a to the right of cell a, N + 2a + 1 below it), or -1 for a wall\n  // that never opens.\n  P.map = new Int16Array(W * H);\n  P.openR = new Uint8Array(MAXC);\n  P.openD = new Uint8Array(MAXC);\n  P.inMaze = new Uint8Array(MAXC);\n  P.seq = new Int16Array(MAXC);\n  P.mark = new Uint8Array(MAXC);\n  P.stack = new Int16Array(MAXC);\n  P.front = new Int16Array(MAXC);\n  P.parent = new Int16Array(MAXC);\n  P.size = new Int16Array(MAXC);\n  P.edges = new Int16Array(MAXC * 2);\n  P.dist = new Int16Array(MAXC);\n  P.from = new Int16Array(MAXC);\n  P.queue = new Int16Array(MAXC);\n  P.onPath = new Uint8Array(MAXC);\n  P.thr = new Float32Array(MAXC);\n  P.rgb = new Float32Array(MAXC * 3);\n  P.nb = new Int16Array(4);\n  P.floodLut = new Float32Array(64 * 3);\n  P.patchLut = new Float32Array(16 * 3);\n  P.pal = new Float32Array(4 * 3);\n  P.cell = 0;\n  P.carver = 0;\n  P.hueKey = -1;\n  P.phase = CARVE;\n  P.t = 0;\n  P.acc = 0;\n}\n\nfunction build(P, c) {\n  const pitch = c + 1;\n  const cols = Math.floor((W - 1) / pitch);\n  const rows = Math.floor((H - 1) / pitch);\n  const N = cols * rows;\n  P.cols = cols;\n  P.rows = rows;\n  P.N = N;\n  P.cell = c;\n  P.ox = (W - (cols * pitch + 1)) >> 1;\n  P.oy = (H - (rows * pitch + 1)) >> 1;\n  P.map.fill(-1);\n  for (let cy = 0; cy \u003c rows; cy++) {\n    for (let cx = 0; cx \u003c cols; cx++) {\n      const a = cy * cols + cx;\n      const x0 = P.ox + cx * pitch + 1;\n      const y0 = P.oy + cy * pitch + 1;\n      for (let y = 0; y \u003c c; y++) {\n        for (let x = 0; x \u003c c; x++) P.map[(y0 + y) * W + x0 + x] = a;\n        if (cx \u003c cols - 1) P.map[(y0 + y) * W + x0 + c] = N + a * 2;\n      }\n      if (cy \u003c rows - 1) for (let x = 0; x \u003c c; x++) P.map[(y0 + c) * W + x0 + x] = N + a * 2 + 1;\n    }\n  }\n  P.inX = -1;\n  P.outX = -1;\n}\n\n// The way in is a gap in the top edge above one cell, the way out one in the\n// bottom edge; the LEDs of the gap belong to the cell beside them.\nfunction doors(P, value) {\n  const c = P.cell;\n  const pitch = c + 1;\n  const top = P.oy * W;\n  const bottom = (P.oy + P.rows * pitch) * W;\n  for (let x = 0; x \u003c c; x++) {\n    if (P.inX >= 0) P.map[top + P.ox + P.inX * pitch + 1 + x] = value ? P.start : -1;\n    if (P.outX >= 0) P.map[bottom + P.ox + P.outX * pitch + 1 + x] = value ? P.goal : -1;\n  }\n}\n\nfunction open(P, a, b) {\n  if (b === a + 1) P.openR[a] = 1;\n  else if (b === a - 1) P.openR[b] = 1;\n  else if (b > a) P.openD[a] = 1;\n  else P.openD[b] = 1;\n}\n\n// The neighbours of a with inMaze equal to want go into P.nb.\nfunction neighbours(P, a, want) {\n  const cols = P.cols;\n  const x = a % cols;\n  let n = 0;\n  if (x > 0 && P.inMaze[a - 1] === want) P.nb[n++] = a - 1;\n  if (x \u003c cols - 1 && P.inMaze[a + 1] === want) P.nb[n++] = a + 1;\n  if (a >= cols && P.inMaze[a - cols] === want) P.nb[n++] = a - cols;\n  if (a + cols \u003c P.N && P.inMaze[a + cols] === want) P.nb[n++] = a + cols;\n  return n;\n}\n\nfunction join(P, a) {\n  P.inMaze[a] = 1;\n  P.seq[a] = ++P.seqN;\n}\n\nfunction find(P, a) {\n  const parent = P.parent;\n  while (parent[a] !== a) {\n    parent[a] = parent[parent[a]];\n    a = parent[a];\n  }\n  return a;\n}\n\nfunction addFront(P, a) {\n  const n = neighbours(P, a, 0);\n  for (let i = 0; i \u003c n; i++) {\n    const b = P.nb[i];\n    if (!P.mark[b]) {\n      P.mark[b] = 1;\n      P.front[P.fN++] = b;\n    }\n  }\n}\n\nfunction newMaze(P, carver) {\n  const N = P.N;\n  doors(P, false);\n  P.openR.fill(0);\n  P.openD.fill(0);\n  P.inMaze.fill(0);\n  P.mark.fill(0);\n  P.onPath.fill(0);\n  P.seq.fill(-1);\n  P.seqN = 0;\n  P.carver = carver;\n  P.inX = Math.floor(Math.random() * P.cols);\n  P.outX = Math.floor(Math.random() * P.cols);\n  P.start = P.inX;\n  P.goal = (P.rows - 1) * P.cols + P.outX;\n  doors(P, true);\n  P.phase = CARVE;\n  P.solved = false;\n  P.acc = 0;\n  P.t = 0;\n  if (carver === BACKTRACK) {\n    join(P, P.start);\n    P.stack[0] = P.start;\n    P.sp = 1;\n    P.mark[P.start] = 1;\n    P.total = 2 * N;\n  } else if (carver === PRIM) {\n    join(P, P.start);\n    P.fN = 0;\n    addFront(P, P.start);\n    P.total = N;\n  } else if (carver === KRUSKAL) {\n    let e = 0;\n    for (let a = 0; a \u003c N; a++) {\n      P.parent[a] = a;\n      P.size[a] = 1;\n      if (a % P.cols \u003c P.cols - 1) P.edges[e++] = a * 2;\n      if (a + P.cols \u003c N) P.edges[e++] = a * 2 + 1;\n    }\n    for (let i = e - 1; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.edges[i];\n      P.edges[i] = P.edges[j];\n      P.edges[j] = t;\n    }\n    P.eN = e;\n    P.eAt = 0;\n    P.total = N;\n  } else {\n    P.sx = 0;\n    P.sy = 0;\n    P.run = 0;\n    P.total = N;\n  }\n}\n\n// One step of the carver; false once the maze is whole.\nfunction carve(P) {\n  const cols = P.cols;\n  if (P.carver === BACKTRACK) {\n    if (P.sp === 0) return false;\n    const a = P.stack[P.sp - 1];\n    const n = neighbours(P, a, 0);\n    if (n > 0) {\n      const b = P.nb[Math.floor(Math.random() * n)];\n      open(P, a, b);\n      join(P, b);\n      P.mark[b] = 1;\n      P.stack[P.sp++] = b;\n    } else {\n      P.mark[a] = 0;\n      P.sp--;\n    }\n    return true;\n  }\n  if (P.carver === PRIM) {\n    if (P.fN === 0) return false;\n    const i = Math.floor(Math.random() * P.fN);\n    const a = P.front[i];\n    P.front[i] = P.front[--P.fN];\n    P.mark[a] = 0;\n    const n = neighbours(P, a, 1);\n    open(P, a, P.nb[Math.floor(Math.random() * n)]);\n    join(P, a);\n    addFront(P, a);\n    return true;\n  }\n  if (P.carver === KRUSKAL) {\n    while (P.eAt \u003c P.eN) {\n      const e = P.edges[P.eAt++];\n      const a = e >> 1;\n      const b = e & 1 ? a + cols : a + 1;\n      let ra = find(P, a);\n      let rb = find(P, b);\n      if (ra === rb) continue;\n      // The bigger patch keeps its root, and with it its shade.\n      if (P.size[ra] \u003c P.size[rb]) {\n        const t = ra;\n        ra = rb;\n        rb = t;\n      }\n      P.parent[rb] = ra;\n      P.size[ra] += P.size[rb];\n      open(P, a, b);\n      if (!P.inMaze[a]) join(P, a);\n      if (!P.inMaze[b]) join(P, b);\n      return true;\n    }\n    return false;\n  }\n  // Sidewinder: each row runs east and, where a run ends, one cell of it\n  // opens north. The top row is one long corridor.\n  if (P.sy >= P.rows) return false;\n  const a = P.sy * cols + P.sx;\n  join(P, a);\n  if (P.sy === 0) {\n    if (P.sx \u003c cols - 1) P.openR[a] = 1;\n  } else if (P.sx === cols - 1 || Math.random() \u003c 0.5) {\n    const r = P.run + Math.floor(Math.random() * (P.sx - P.run + 1));\n    P.openD[(P.sy - 1) * cols + r] = 1;\n    P.run = P.sx + 1;\n  } else P.openR[a] = 1;\n  P.sx++;\n  if (P.sx >= cols) {\n    P.sx = 0;\n    P.sy++;\n    P.run = 0;\n  }\n  return true;\n}\n\n// The whole breadth-first search is done at once; the flood on screen only\n// reveals it a layer at a time.\nfunction solve(P) {\n  const N = P.N;\n  const cols = P.cols;\n  P.dist.fill(-1, 0, N);\n  P.dist[P.start] = 0;\n  P.queue[0] = P.start;\n  let qh = 0;\n  let qt = 1;\n  let far = 0;\n  while (qh \u003c qt) {\n    const a = P.queue[qh++];\n    const d = P.dist[a] + 1;\n    const x = a % cols;\n    for (let k = 0; k \u003c 4; k++) {\n      let b = -1;\n      if (k === 0 && x > 0 && P.openR[a - 1]) b = a - 1;\n      else if (k === 1 && x \u003c cols - 1 && P.openR[a]) b = a + 1;\n      else if (k === 2 && a >= cols && P.openD[a - cols]) b = a - cols;\n      else if (k === 3 && a + cols \u003c N && P.openD[a]) b = a + cols;\n      if (b >= 0 && P.dist[b] \u003c 0) {\n        P.dist[b] = d;\n        P.from[b] = a;\n        P.queue[qt++] = b;\n        if (d > far) far = d;\n      }\n    }\n  }\n  P.far = far;\n  for (let a = P.goal; a !== P.start; a = P.from[a]) P.onPath[a] = 1;\n  P.onPath[P.start] = 1;\n  // The crumble takes the side corridors first, in no order, and the path last.\n  for (let a = 0; a \u003c N; a++) P.thr[a] = P.onPath[a] ? 0.72 + 0.12 * Math.random() : Math.random() * 0.7;\n  P.phase = FLOOD;\n  P.solved = true;\n  P.front0 = -2;\n  P.trace = -1e9;\n  P.acc = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  const cell = Math.max(2, Math.min(4, Math.round(k[2])));\n  const carver = Math.max(0, Math.min(3, Math.round(k[3])));\n  const pace = Math.pow(2, 1.1 * k[1]);\n\n  if (cell !== P.cell) {\n    build(P, cell);\n    newMaze(P, carver);\n    // Open on a maze already under way rather than a dark panel.\n    for (let i = Math.floor(P.total * 0.4); i > 0; i--) carve(P);\n  } else if (carver !== P.carver && P.phase === CARVE) {\n    newMaze(P, carver);\n    for (let i = Math.floor(P.total * 0.25); i > 0; i--) carve(P);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== CRUMBLE) {\n    // A maze still being carved has no path yet, so it all crumbles in no order.\n    if (!P.solved) for (let a = 0; a \u003c P.N; a++) P.thr[a] = Math.random() * 0.85;\n    P.phase = CRUMBLE;\n    P.t = 0;\n  }\n\n  if (P.phase === CARVE) {\n    // Bigger cells are fewer, so they carve slower in step and a maze takes\n    // about as long whatever its size.\n    P.acc += dt * 50 * pace * (P.N / 882);\n    let n = 0;\n    while (P.acc >= 1 && n \u003c 400) {\n      P.acc -= 1;\n      n++;\n      if (!carve(P)) {\n        solve(P);\n        break;\n      }\n    }\n    if (P.acc > 1) P.acc = 1;\n  } else if (P.phase === FLOOD) {\n    P.front0 += dt * 26 * pace * Math.sqrt(P.N / 882);\n    if (P.front0 > P.far + 6) {\n      P.front0 = P.far + 6;\n      P.phase = TRACE;\n      P.trace = -2;\n    }\n  } else if (P.phase === TRACE) {\n    P.trace += dt * 40 * pace * Math.sqrt(P.N / 882);\n    if (P.trace > P.dist[P.goal] + 4) {\n      P.phase = HOLD;\n      P.t = 0;\n    }\n  } else if (P.phase === HOLD) {\n    P.t += dt;\n    if (P.t > 1.4) {\n      P.phase = CRUMBLE;\n      P.t = 0;\n    }\n  } else {\n    P.t += dt * Math.min(2, 0.7 + 0.3 * pace);\n    if (P.t > 1.1) newMaze(P, carver);\n  }\n\n  const hue = k[0] + 0.14;\n  if (hue !== P.hueKey) {\n    P.hueKey = hue;\n    // The flood runs backwards round the wheel from the way in, gold through\n    // red to violet, and stays bright: a dim orange would read as brown.\n    for (let i = 0; i \u003c 64; i++) hsvInto(P.floodLut, i * 3, hue - 0.42 * (i / 63), 0.8, 0.85);\n    // The bare maze is slate whatever the hue, and Kruskal's patches are\n    // shades of it, from teal to violet.\n    for (let i = 0; i \u003c 16; i++) hsvInto(P.patchLut, i * 3, 0.5 + 0.32 * (((i * 7) % 16) / 15), 0.5, 0.5 + 0.2 * (i / 15));\n    hsvInto(P.pal, 0, 0.6, 0.3, 0.42);\n    hsvInto(P.pal, 3, hue, 0.8, 0.85);\n    hsvInto(P.pal, 6, hue + 0.4, 0.35, 1);\n  }\n  colourCells(P);\n}\n\nfunction mixWhite(out, o, g) {\n  out[o] += (228 - out[o]) * g;\n  out[o + 1] += (228 - out[o + 1]) * g;\n  out[o + 2] += (228 - out[o + 2]) * g;\n}\n\nfunction colourCells(P) {\n  const N = P.N;\n  const rgb = P.rgb;\n  const pal = P.pal;\n  const carving = !P.solved;\n  // A tap mid-flood or mid-trace crumbles what is shown at that moment.\n  const shown = P.front0;\n  const lit = P.trace;\n  const back = 1 - 0.4 * Math.max(0, Math.min(1, (P.trace + 2) / 30));\n  for (let a = 0; a \u003c N; a++) {\n    const o = a * 3;\n    if (carving && !P.inMaze[a]) {\n      // Prim's frontier waits dim in the accent colour.\n      const f = P.carver === PRIM && P.mark[a] ? 0.7 : 0;\n      rgb[o] = pal[3] * f;\n      rgb[o + 1] = pal[4] * f;\n      rgb[o + 2] = pal[5] * f;\n    } else if (carving) {\n      if (P.carver === KRUSKAL) {\n        const s = (Math.imul(find(P, a) + 1, 2654435761) >>> 28) * 3;\n        rgb[o] = P.patchLut[s];\n        rgb[o + 1] = P.patchLut[s + 1];\n        rgb[o + 2] = P.patchLut[s + 2];\n      } else {\n        // The backtracker's stack, and the sidewinder's open run, in the accent.\n        let c = 0;\n        if (P.carver === BACKTRACK && P.mark[a]) c = 3;\n        else if (P.carver === 3 && a >= P.sy * P.cols + P.run && a \u003c P.sy * P.cols + P.sx) c = 3;\n        rgb[o] = pal[c];\n        rgb[o + 1] = pal[c + 1];\n        rgb[o + 2] = pal[c + 2];\n      }\n      // The cell the carver stands on is white: the backtracker's head even\n      // as it backs up, for the others the cells carved in the last six steps.\n      if (P.carver === BACKTRACK) {\n        if (P.sp > 0 && a === P.stack[P.sp - 1]) mixWhite(rgb, o, 1);\n      } else {\n        const age = P.seqN - P.seq[a];\n        if (age \u003c 6) mixWhite(rgb, o, 1 - age / 6);\n      }\n    } else {\n      const d = P.dist[a];\n      if (d \u003c 0 || d > shown) {\n        rgb[o] = pal[0];\n        rgb[o + 1] = pal[1];\n        rgb[o + 2] = pal[2];\n      } else {\n        const s = Math.min(63, Math.floor((d * 63) / Math.max(1, P.far))) * 3;\n        rgb[o] = P.floodLut[s];\n        rgb[o + 1] = P.floodLut[s + 1];\n        rgb[o + 2] = P.floodLut[s + 2];\n        // The newest layers of the flood are its white front.\n        if (shown - d \u003c 5) mixWhite(rgb, o, 1 - (shown - d) / 5);\n      }\n      if (P.onPath[a] && d \u003c= lit) {\n        rgb[o] = pal[6];\n        rgb[o + 1] = pal[7];\n        rgb[o + 2] = pal[8];\n        if (lit - d \u003c 4) mixWhite(rgb, o, 1 - (lit - d) / 4);\n      } else if (back \u003c 1) {\n        // The rest of the maze steps back while the path is drawn.\n        rgb[o] *= back;\n        rgb[o + 1] *= back;\n        rgb[o + 2] *= back;\n      }\n    }\n    if (P.phase === CRUMBLE) {\n      const f = Math.max(0, Math.min(1, 1 - (P.t - P.thr[a]) / 0.16));\n      rgb[o] *= f;\n      rgb[o + 1] *= f;\n      rgb[o + 2] *= f;\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const N = P.N;\n  const rgb = P.rgb;\n  const map = P.map;\n  const carving = !P.solved;\n  const cols = P.cols;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const v = map[y * W + x];\n      if (v \u003c 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      let c = v;\n      if (v >= N) {\n        const e = v - N;\n        const a = e >> 1;\n        if (!(e & 1 ? P.openD[a] : P.openR[a])) {\n          display.setPixel(x, y, 0, 0, 0);\n          continue;\n        }\n        const b = e & 1 ? a + cols : a + 1;\n        // A passage shows whichever of its two cells came later: carved\n        // later while carving, reached later by the flood after.\n        if (carving) c = P.seq[a] > P.seq[b] ? a : b;\n        else c = P.dist[a] > P.dist[b] ? a : b;\n      }\n      display.setPixel(x, y, rgb[c * 3], rgb[c * 3 + 1], rgb[c * 3 + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0..4, Cell=2..4, Carver=0..3","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the flood, which runs from gold at the way in through red to violet at the far ends, and the carver's lit cells with it."},{"name":"Speed","min":0,"max":4,"about":"Carving, flood and trace together, from about 50 carving steps a second to about 1100."},{"name":"Cell","min":2,"max":4,"about":"Corridor width in LEDs: 2 gives a maze of 21 by 42 cells, 4 one of 12 by 25."},{"name":"Carver","min":0,"max":3,"about":"0 recursive backtracker with its stack lit, 1 Prim's with its frontier lit, 2 Kruskal's with each joined patch its own shade, 3 sidewinder row by row."}],"start":[0,2,2,0.06],"measures":{"motion":0.0785,"detail":0.1747,"edges":0.9998,"complexity":0.1404,"coverage":0.6288,"colour":0.2889,"drift":0.1789},"knobResponse":[0.1257,0.2208,0.2744,0.1999]},{"slug":"metro-map","title":"Metro Map","family":"city","round":15,"note":"해리 벡 식 지하철 노선도예요. 색 노선 넷이 45도로 꺾이며 위아래로 달리고, 갈아타는 역은 흰 고리예요. 흰 열차가 역마다 섰다 떠나고 끝에서 되돌아가요. K1 을 누르면 급행이 지나가요.","idea":"A schematic subway map in the Harry Beck manner, drawn for the tall panel, with trains running its lines, stopping at every station and turning back at the ends.","buttons":"K1 tap sends an express down one line, three times the speed of the others, end to end without stopping and lighting the line behind it; each tap takes the next line.","code":"// ===== Patternflow pattern =====\n// Title:   Metro Map\n// Family:  city\n// Idea:    A schematic subway map in the Harry Beck manner, drawn for the tall panel, with trains running its lines, stopping at every station and turning back at the ends.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Harry Beck's 1933 diagram of the London Underground, and the schematic maps drawn after it\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lines=4..7, Rush=0..1\n//\n// Knob 1: Hue. Turns the whole line palette round the colour wheel together; the river stays blue.\n// Knob 2: Speed. How fast the trains run: at 2 they reach 14 LEDs a second between stations and stand 0.7 s at each, at the bottom they creep at 1.4 and stand 7 s, at the top they reach 21.\n// Knob 3: Lines. How many lines are open: four at the bottom (two trunks, the line that shares both their corridors, and the circle), then the cross line through the middle, an upper and a lower one. A line that opens turns the crossings it makes into interchanges.\n// Knob 4: Rush. The service: from three trains on each line, spread evenly round its timetable, to eight; a train that joins fades in at its place and the rest close up over a couple of seconds.\n// Buttons: K1 tap sends an express down one line, three times the speed of the others, end to end without stopping and lighting the line behind it; each tap takes the next line.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXL = 7;\nconst MAXT = 8;\n\n// The network, as corners on the lattice. A line at (x, y) lights the LEDs\n// x..x+1 and y..y+1, so every run is two LEDs wide and a 45 degree run three\n// LEDs to a row. The last point equal to the first makes a loop.\nconst NET = [\n  // West trunk.\n  { hue: 0.0, side: -1, pts: [[8, 3], [8, 28], [20, 40], [20, 98], [10, 108], [10, 123]] },\n  // East trunk.\n  { hue: 0.6, side: 1, pts: [[52, 3], [52, 20], [42, 30], [42, 94], [52, 104], [52, 123]] },\n  // Down the middle: it shares the east trunk's corridor at the top and the\n  // west trunk's at the bottom.\n  { hue: 0.14, side: 1, pts: [[49, 3], [49, 19], [31, 37], [31, 70], [23, 78], [23, 99], [13, 109], [13, 123]] },\n  // The circle.\n  { hue: 0.78, side: 1, pts: [[16, 46], [46, 46], [52, 52], [52, 80], [46, 86], [16, 86], [10, 80], [10, 52], [16, 46]] },\n  // Across the middle.\n  { hue: 0.33, side: 1, pts: [[2, 64], [60, 64]] },\n  // Upper cross line.\n  { hue: 0.5, side: 1, pts: [[2, 14], [24, 14], [30, 8], [60, 8]] },\n  // Lower cross line.\n  { hue: 0.07, side: 1, pts: [[2, 120], [22, 120], [30, 112], [60, 112]] },\n];\n\n// The river, five LEDs wide, under everything.\nconst RIVER = [[-4, 92], [26, 92], [32, 98], [46, 98], [52, 92], [70, 92]];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p;\n  out[o + 1] = k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p;\n  out[o + 2] = k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p;\n}\n\n// Corners to lattice points one step apart, with the distance run so far.\nfunction expand(pts) {\n  const xs = [];\n  const ys = [];\n  const ss = [];\n  let s = 0;\n  for (let i = 0; i \u003c pts.length - 1; i++) {\n    const [x0, y0] = pts[i];\n    const [x1, y1] = pts[i + 1];\n    const sx = Math.sign(x1 - x0);\n    const sy = Math.sign(y1 - y0);\n    const n = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0));\n    const step = sx && sy ? Math.SQRT2 : 1;\n    for (let k = i === 0 ? 0 : 1; k \u003c= n; k++) {\n      if (k > 0) s += step;\n      xs.push(x0 + sx * k);\n      ys.push(y0 + sy * k);\n      ss.push(s);\n    }\n  }\n  return { xs, ys, ss, loop: pts[0][0] === pts[pts.length - 1][0] && pts[0][1] === pts[pts.length - 1][1] };\n}\n\nfunction setLit(mask, x, y, v) {\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) mask[y * W + x] = v;\n}\n\n// Everything that depends on how many lines are open: which LEDs each line\n// lights, where the interchanges are, where each line stops.\nfunction build(P, count) {\n  P.count = count;\n  const owner = P.owner;\n  owner.fill(0);\n  const lines = P.lines;\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const x = L.xs[k];\n      const y = L.ys[k];\n      setLit(owner, x, y, l + 1);\n      setLit(owner, x + 1, y, l + 1);\n      setLit(owner, x, y + 1, l + 1);\n      setLit(owner, x + 1, y + 1, l + 1);\n    }\n  }\n  // Crossings: lattice points two open lines share.\n  const at = new Map();\n  const hits = [];\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const key = L.ys[k] * 100 + L.xs[k];\n      const other = at.get(key);\n      if (other !== undefined && other !== l) hits.push([L.xs[k] + 1, L.ys[k] + 1]);\n      else at.set(key, l);\n    }\n  }\n  // Crossings closer than six LEDs share one interchange, drawn round both.\n  const inter = [];\n  for (const [x, y] of hits) {\n    let joined = false;\n    for (const I of inter) {\n      if (Math.max(Math.abs(I.ax - x), Math.abs(I.ay - y), Math.abs(I.bx - x), Math.abs(I.by - y)) \u003c= 6) {\n        if (x \u003c I.ax || (x === I.ax && y \u003c I.ay)) {\n          I.ax = x;\n          I.ay = y;\n        } else if (x > I.bx || (x === I.bx && y > I.by)) {\n          I.bx = x;\n          I.by = y;\n        }\n        joined = true;\n        break;\n      }\n    }\n    if (!joined) inter.push({ ax: x, ay: y, bx: x, by: y });\n  }\n  P.inter = inter;\n  // Stops: the interchanges a line passes through, its ends, and ordinary\n  // stations between them about every 13 LEDs, kept off the corners.\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    const n = L.xs.length;\n    const anchors = [];\n    for (let i = 0; i \u003c inter.length; i++) {\n      const I = inter[i];\n      let best = -1;\n      let bd = 3;\n      for (let k = 0; k \u003c n; k++) {\n        const d = Math.max(Math.abs(L.xs[k] + 1 - (I.ax + I.bx) / 2), Math.abs(L.ys[k] + 1 - (I.ay + I.by) / 2));\n        if (d \u003c bd) {\n          bd = d;\n          best = k;\n        }\n      }\n      if (best >= 0) anchors.push({ k: best, inter: true, at: i });\n    }\n    if (!L.loop) {\n      anchors.push({ k: 0, inter: false, end: true });\n      anchors.push({ k: n - 1, inter: false, end: true });\n    }\n    anchors.sort((a, b) => a.k - b.k);\n    const stops = [];\n    for (let i = 0; i \u003c anchors.length; i++) {\n      stops.push(anchors[i]);\n      const a = anchors[i];\n      const b = i + 1 \u003c anchors.length ? anchors[i + 1] : L.loop ? { k: anchors[0].k + n - 1 } : null;\n      if (!b) break;\n      const sa = L.ss[a.k];\n      const sb = b.k \u003c n ? L.ss[b.k] : L.ss[n - 1] + L.ss[b.k - (n - 1)];\n      const gap = sb - sa;\n      const m = Math.round(gap / 13) - 1;\n      for (let j = 1; j \u003c= m; j++) {\n        let target = sa + (gap * j) / (m + 1);\n        if (target > L.ss[n - 1]) target -= L.ss[n - 1];\n        let kk = 0;\n        while (kk \u003c n - 1 && L.ss[kk] \u003c target) kk++;\n        // A station sits on a straight run, off the corners: a tick on a\n        // 45 degree run touches its line only at a corner and reads as a\n        // stray LED. Failing that within seven steps, there is no station.\n        let found = -1;\n        for (let d = 0; d \u003c= 7 && found \u003c 0; d++)\n          for (const c of [kk + d, kk - d])\n            if (found \u003c 0 && c > 0 && c \u003c n - 1 && plain(L, c) && Math.abs(L.ss[c] - L.ss[a.k]) > 5 && Math.abs(L.ss[c] - sb) > 5) found = c;\n        if (found >= 0) stops.push({ k: found, inter: false });\n      }\n    }\n    stops.sort((a, b) => a.k - b.k);\n    L.stops = stops.filter((s, i) => i === 0 || s.k !== stops[i - 1].k);\n    timetable(L);\n  }\n  // Station ticks and the bars at the ends, in LEDs, once every line is laid.\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (const st of L.stops) {\n      st.px = [];\n      if (st.inter) continue;\n      if (st.end) {\n        endBar(L, st, owner);\n        continue;\n      }\n      let px = tick(L, st.k, L.side, owner);\n      if (!px) px = tick(L, st.k, -L.side, owner);\n      if (px) st.px = px;\n    }\n  }\n}\n\n// The step a line takes at lattice point k.\nfunction heading(L, k) {\n  const n = L.xs.length;\n  const a = k \u003c n - 1 ? k : k - 1;\n  return [L.xs[a + 1] - L.xs[a], L.ys[a + 1] - L.ys[a]];\n}\n\nfunction free(owner, list) {\n  for (const [x, y] of list) if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || owner[y * W + x]) return false;\n  return true;\n}\n\n// A station tick: two LEDs standing out from the line square to it, on the\n// given side, or null when something else is already there.\nfunction tick(L, k, side, owner) {\n  const [dx, dy] = heading(L, k);\n  const x = L.xs[k];\n  const y = L.ys[k];\n  const nx = -dy * side;\n  const ny = dx * side;\n  let list;\n  if (dx === 0) list = nx > 0 ? [[x + 2, y], [x + 3, y]] : [[x - 1, y], [x - 2, y]];\n  else if (dy === 0) list = ny > 0 ? [[x, y + 2], [x, y + 3]] : [[x, y - 1], [x, y - 2]];\n  else if (dx === dy) list = nx > 0 ? [[x + 2, y - 1], [x + 3, y - 2]] : [[x - 1, y + 2], [x - 2, y + 3]];\n  else list = nx \u003c 0 ? [[x - 1, y - 1], [x - 2, y - 2]] : [[x + 2, y + 2], [x + 3, y + 3]];\n  // Keep a dark LED between the tick and any other line.\n  const halo = list.concat(list.map(([a, b]) => [a + Math.sign(nx), b + Math.sign(ny)]));\n  if (!free(owner, list) || !halo.every(([a, b]) => a \u003c 0 || a >= W || b \u003c 0 || b >= H || !owner[b * W + a] || owner[b * W + a] === owner[L.ys[k] * W + L.xs[k]])) return null;\n  return list.map(([a, b]) => b * W + a);\n}\n\n// The bar across a line's end, six LEDs wide.\nfunction endBar(L, st, owner) {\n  const [dx, dy] = heading(L, st.k);\n  const x = L.xs[st.k];\n  const y = L.ys[st.k];\n  const list = [];\n  for (let i = -2; i \u003c= 3; i++) {\n    if (dx === 0) list.push([x + i, st.k === 0 ? y : y + 1]);\n    else list.push([st.k === 0 ? x : x + 1, y + i]);\n  }\n  st.px = list.filter(([a, b]) => a >= 0 && a \u003c W && b >= 0 && b \u003c H && !owner[b * W + a]).map(([a, b]) => b * W + a);\n}\n\n// A point on a straight up-and-down or level run, two steps from any corner.\nfunction plain(L, k) {\n  const [dx, dy] = heading(L, k);\n  return (dx === 0 || dy === 0) && !isCorner(L, k);\n}\n\nfunction isCorner(L, k) {\n  const n = L.xs.length;\n  if (k \u003c= 0 || k >= n - 1) return false;\n  const ax = L.xs[k] - L.xs[k - 1];\n  const ay = L.ys[k] - L.ys[k - 1];\n  const bx = L.xs[k + 1] - L.xs[k];\n  const by = L.ys[k + 1] - L.ys[k];\n  if (ax !== bx || ay !== by) return true;\n  if (k >= 2 && (L.xs[k - 1] - L.xs[k - 2] !== ax || L.ys[k - 1] - L.ys[k - 2] !== ay)) return true;\n  if (k \u003c= n - 3 && (L.xs[k + 2] - L.xs[k + 1] !== bx || L.ys[k + 2] - L.ys[k + 1] !== by)) return true;\n  return false;\n}\n\n// Trains between two stops a distance d apart: they pull away at ACC LEDs a\n// second squared up to TOP LEDs a second and brake the same way, all in the\n// line's own clock, which Speed winds.\nconst ACC = 5;\nconst TOP = 7;\nconst DWELL = 1.4;\nconst TURN = 3;\n\nfunction runTime(d) {\n  const ramp = TOP / ACC;\n  if (d >= TOP * ramp) return d / TOP + ramp;\n  return 2 * Math.sqrt(d / ACC);\n}\n\nfunction runPos(d, t) {\n  const ramp = TOP / ACC;\n  if (d >= TOP * ramp) {\n    const T = d / TOP + ramp;\n    if (t \u003c ramp) return 0.5 * ACC * t * t;\n    if (t > T - ramp) {\n      const u = T - t;\n      return d - 0.5 * ACC * u * u;\n    }\n    return 0.5 * ACC * ramp * ramp + TOP * (t - ramp);\n  }\n  const T = 2 * Math.sqrt(d / ACC);\n  if (t \u003c T / 2) return 0.5 * ACC * t * t;\n  const u = T - t;\n  return d - 0.5 * ACC * u * u;\n}\n\n// A line's timetable: a list of legs, each a dwell at a stop or a run to the\n// next, covering one round trip (or one lap of a loop).\nfunction timetable(L) {\n  const legs = [];\n  const total = L.ss[L.xs.length - 1];\n  const s = L.stops.map((st) => L.ss[st.k]);\n  let t = 0;\n  const push = (kind, from, to, dur, stop) => {\n    legs.push({ kind, from, to, t0: t, dur, stop });\n    t += dur;\n  };\n  if (L.loop) {\n    for (let i = 0; i \u003c s.length; i++) {\n      const a = s[i];\n      const b = i + 1 \u003c s.length ? s[i + 1] : s[0] + total;\n      push(\"dwell\", a, a, DWELL, i);\n      push(\"run\", a, b, runTime(b - a));\n    }\n  } else {\n    for (let i = 0; i \u003c s.length - 1; i++) {\n      push(\"dwell\", s[i], s[i], i === 0 ? TURN : DWELL, i);\n      push(\"run\", s[i], s[i + 1], runTime(s[i + 1] - s[i]));\n    }\n    for (let i = s.length - 1; i > 0; i--) {\n      push(\"dwell\", s[i], s[i], i === s.length - 1 ? TURN : DWELL, i);\n      push(\"run\", s[i], s[i - 1], runTime(s[i] - s[i - 1]));\n    }\n  }\n  L.legs = legs;\n  L.period = t;\n  L.total = total;\n}\n\n// Where a train is at time t into its line's cycle: distance along the line,\n// and whether it stands at a stop.\nfunction trainAt(L, t, out) {\n  t = ((t % L.period) + L.period) % L.period;\n  const legs = L.legs;\n  let lo = 0;\n  let hi = legs.length - 1;\n  while (lo \u003c hi) {\n    const mid = (lo + hi + 1) >> 1;\n    if (legs[mid].t0 \u003c= t) lo = mid;\n    else hi = mid - 1;\n  }\n  const g = legs[lo];\n  if (g.kind === \"dwell\") {\n    out.s = g.from;\n    out.dir = 0;\n    out.stop = g.stop;\n  } else {\n    const d = Math.abs(g.to - g.from);\n    const p = runPos(d, t - g.t0);\n    out.s = g.to > g.from ? g.from + p : g.from - p;\n    out.dir = g.to > g.from ? 1 : -1;\n    out.stop = -1;\n  }\n  if (L.loop && out.s >= L.total) out.s -= L.total;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.lines = NET.map((L) => {\n    const e = expand(L.pts);\n    return { hue: L.hue, side: L.side, xs: e.xs, ys: e.ys, ss: e.ss, loop: e.loop };\n  });\n  P.owner = new Uint8Array(N);\n  P.river = new Uint8Array(N);\n  const r = expand(RIVER);\n  for (let k = 0; k \u003c r.xs.length; k++)\n    for (let dy = -2; dy \u003c= 2; dy++) for (let dx = -2; dx \u003c= 2; dx++) setLit(P.river, r.xs[k] + dx, r.ys[k] + dy, 1);\n  P.train = new Float32Array(N);\n  P.mark = new Uint8Array(N);\n  P.glow = new Float32Array(N);\n  P.col = new Float32Array(MAXL * 3);\n  P.clock = 0;\n  P.count = 0;\n  // Each line's trains: where each stands in the timetable, as a share of\n  // the line's cycle, and how far it has faded in.\n  P.off = new Float32Array(MAXL * MAXT);\n  P.vis = new Float32Array(MAXL * MAXT);\n  for (let l = 0; l \u003c MAXL; l++)\n    for (let i = 0; i \u003c 3; i++) {\n      P.off[l * MAXT + i] = i / 3;\n      P.vis[l * MAXT + i] = 1;\n    }\n  P.hue = 0;\n  P.express = null;\n  P.pick = 0;\n  P.where = { s: 0, dir: 0, stop: -1 };\n  build(P, 4);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const count = Math.max(4, Math.min(MAXL, Math.round(k[2])));\n  if (count !== P.count) build(P, count);\n  // Rush: three to eight trains a line. A train that joins fades in at its\n  // place in the timetable, one that leaves fades out, and the others close\n  // up over a couple of seconds instead of jumping.\n  const n = Math.round(3 + Math.max(0, Math.min(1, k[3])) * 5);\n  for (let l = 0; l \u003c MAXL; l++)\n    for (let i = 0; i \u003c MAXT; i++) {\n      const j = l * MAXT + i;\n      const target = i \u003c n ? i / n : P.off[j];\n      if (P.vis[j] \u003c= 0) P.off[j] = target;\n      else P.off[j] += (target - P.off[j]) * Math.min(1, dt * 1.2);\n      P.vis[j] = Math.max(0, Math.min(1, P.vis[j] + (i \u003c n ? dt : -dt) * 3));\n    }\n  P.clock += dt * Math.max(0.05, k[1]);\n  if (input.btnPressed && input.btnPressed[0]) {\n    let l = P.pick++ % P.count;\n    if (P.lines[l].loop) l = (l + 1) % P.count;\n    P.express = { line: l, s: 0, dir: P.pick % 2 ? 1 : -1 };\n    if (P.express.dir \u003c 0) P.express.s = P.lines[l].total;\n  }\n  if (P.express) {\n    const E = P.express;\n    E.s += E.dir * dt * Math.max(0.05, k[1]) * TOP * 3.2;\n    if (E.s \u003c -40 || E.s > P.lines[E.line].total + 40) P.express = null;\n  }\n}\n\n// Light a train from distance a to b along a line: each lattice point takes\n// how much of it lies inside, so a train glides from LED to LED.\nfunction paintTrain(P, L, a, b, w) {\n  const tr = P.train;\n  const n = L.xs.length;\n  for (let k = 0; k \u003c n; k++) {\n    const s = L.ss[k];\n    if (s \u003c a - 1 || s > b + 1) continue;\n    const c = Math.max(0, Math.min(1, s - a + 0.5)) * Math.max(0, Math.min(1, b - s + 0.5)) * w;\n    if (c \u003c= 0) continue;\n    const x = L.xs[k];\n    const y = L.ys[k];\n    // A train is four LEDs wide, a lit carriage standing proud of its\n    // two-LED line, a little dimmer at its sides.\n    for (let j = 0; j \u003c 16; j++) {\n      const ox = (j & 3) - 1;\n      const oy = (j >> 2) - 1;\n      const xx = x + ox;\n      const yy = y + oy;\n      if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n      const v = ox \u003c 0 || ox > 1 || oy \u003c 0 || oy > 1 ? c * 0.7 : c;\n      const p = yy * W + xx;\n      if (tr[p] \u003c v) tr[p] = v;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const col = P.col;\n  for (let l = 0; l \u003c MAXL; l++) hsvInto(col, l * 3, P.lines[l].hue + P.hue + 0.02, 0.92, 1);\n  const tr = P.train;\n  tr.fill(0);\n  const where = P.where;\n  const TL = 6;\n  for (let l = 0; l \u003c P.count; l++) {\n    const L = P.lines[l];\n    for (const st of L.stops) st.lit = 0;\n    if (l === 0) for (const I of P.inter) I.lit = 0;\n    for (let i = 0; i \u003c MAXT; i++) {\n      const vis = P.vis[l * MAXT + i];\n      if (vis \u003c= 0) continue;\n      trainAt(L, P.clock + (P.off[l * MAXT + i] + l * 0.41) * L.period, where);\n      if (where.stop >= 0 && vis > 0.5) {\n        const st = L.stops[where.stop];\n        st.lit = 1;\n        if (st.inter) P.inter[st.at].lit = 1;\n      }\n      paintTrain(P, L, where.s - TL / 2, where.s + TL / 2, vis);\n      if (L.loop && where.s + TL / 2 > L.total) paintTrain(P, L, where.s - TL / 2 - L.total, where.s + TL / 2 - L.total, vis);\n    }\n  }\n  if (P.express) {\n    const E = P.express;\n    const L = P.lines[E.line];\n    paintTrain(P, L, E.s - 9 * (E.dir > 0 ? 1 : 0), E.s + 9 * (E.dir > 0 ? 0 : 1), 1);\n    // Behind it the line stays lit for 30 LEDs, fading as it goes.\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const back = (E.s - L.ss[k]) * E.dir - 9;\n      if (back \u003c 0 || back > 30) continue;\n      const v = 0.8 * (1 - back / 30) ** 2;\n      for (let j = 0; j \u003c 4; j++) {\n        const xx = L.xs[k] + (j & 1);\n        const yy = L.ys[k] + (j >> 1);\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const p = yy * W + xx;\n        if (tr[p] \u003c v) tr[p] = v;\n      }\n    }\n  }\n\n  // Ticks and end bars take their line's colour, and light up while a train\n  // stands at their station.\n  const mark = P.mark;\n  const glow = P.glow;\n  mark.fill(0);\n  for (let l = 0; l \u003c P.count; l++)\n    for (const st of P.lines[l].stops)\n      for (const p of st.px) {\n        mark[p] = l + 1;\n        glow[p] = st.lit || 0;\n      }\n  const owner = P.owner;\n  const river = P.river;\n  const LINE = 0.75;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = owner[p];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (o) {\n        const c = (o - 1) * 3;\n        r = col[c] * LINE;\n        g = col[c + 1] * LINE;\n        b = col[c + 2] * LINE;\n      } else if (mark[p]) {\n        const c = (mark[p] - 1) * 3;\n        const t = glow[p];\n        r = col[c] * LINE * (1 - t) + t;\n        g = col[c + 1] * LINE * (1 - t) + t;\n        b = col[c + 2] * LINE * (1 - t) + t;\n      } else if (river[p]) {\n        r = 0.03;\n        g = 0.11;\n        b = 0.3;\n      }\n      const t = tr[p];\n      if (t > 0) {\n        r += (1 - r) * t;\n        g += (1 - g) * t;\n        b += (1 - b) * t;\n      }\n      display.setPixel(x, y, r * 255, g * 255, b * 255);\n    }\n  }\n\n  // Interchanges: a white ring round each crossing, or round a pair of\n  // crossings close together, dark inside until a train stands there.\n  for (const I of P.inter) {\n    const inside = I.lit ? 255 : 0;\n    const x0 = Math.floor(Math.min(I.ax, I.bx) - 4);\n    const x1 = Math.ceil(Math.max(I.ax, I.bx) + 4);\n    const y0 = Math.floor(Math.min(I.ay, I.by) - 4);\n    const y1 = Math.ceil(Math.max(I.ay, I.by) + 4);\n    const dx = I.bx - I.ax;\n    const dy = I.by - I.ay;\n    const len2 = dx * dx + dy * dy;\n    for (let y = y0; y \u003c= y1; y++) {\n      for (let x = x0; x \u003c= x1; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const px = x + 0.5 - I.ax;\n        const py = y + 0.5 - I.ay;\n        const t = len2 > 0 ? Math.max(0, Math.min(1, (px * dx + py * dy) / len2)) : 0;\n        const d = Math.hypot(px - t * dx, py - t * dy);\n        if (d \u003c 1.9) display.setPixel(x, y, inside, inside, inside);\n        else if (d \u003c 3.0) display.setPixel(x, y, 235, 235, 235);\n      }\n    }\n  }\n}\n","layer":{"id":"layer-metro-map","type":"code","name":"metro-map","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Metro Map\n// Family:  city\n// Idea:    A schematic subway map in the Harry Beck manner, drawn for the tall panel, with trains running its lines, stopping at every station and turning back at the ends.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Harry Beck's 1933 diagram of the London Underground, and the schematic maps drawn after it\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Lines=4..7, Rush=0..1\n//\n// Knob 1: Hue. Turns the whole line palette round the colour wheel together; the river stays blue.\n// Knob 2: Speed. How fast the trains run: at 2 they reach 14 LEDs a second between stations and stand 0.7 s at each, at the bottom they creep at 1.4 and stand 7 s, at the top they reach 21.\n// Knob 3: Lines. How many lines are open: four at the bottom (two trunks, the line that shares both their corridors, and the circle), then the cross line through the middle, an upper and a lower one. A line that opens turns the crossings it makes into interchanges.\n// Knob 4: Rush. The service: from three trains on each line, spread evenly round its timetable, to eight; a train that joins fades in at its place and the rest close up over a couple of seconds.\n// Buttons: K1 tap sends an express down one line, three times the speed of the others, end to end without stopping and lighting the line behind it; each tap takes the next line.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAXL = 7;\nconst MAXT = 8;\n\n// The network, as corners on the lattice. A line at (x, y) lights the LEDs\n// x..x+1 and y..y+1, so every run is two LEDs wide and a 45 degree run three\n// LEDs to a row. The last point equal to the first makes a loop.\nconst NET = [\n  // West trunk.\n  { hue: 0.0, side: -1, pts: [[8, 3], [8, 28], [20, 40], [20, 98], [10, 108], [10, 123]] },\n  // East trunk.\n  { hue: 0.6, side: 1, pts: [[52, 3], [52, 20], [42, 30], [42, 94], [52, 104], [52, 123]] },\n  // Down the middle: it shares the east trunk's corridor at the top and the\n  // west trunk's at the bottom.\n  { hue: 0.14, side: 1, pts: [[49, 3], [49, 19], [31, 37], [31, 70], [23, 78], [23, 99], [13, 109], [13, 123]] },\n  // The circle.\n  { hue: 0.78, side: 1, pts: [[16, 46], [46, 46], [52, 52], [52, 80], [46, 86], [16, 86], [10, 80], [10, 52], [16, 46]] },\n  // Across the middle.\n  { hue: 0.33, side: 1, pts: [[2, 64], [60, 64]] },\n  // Upper cross line.\n  { hue: 0.5, side: 1, pts: [[2, 14], [24, 14], [30, 8], [60, 8]] },\n  // Lower cross line.\n  { hue: 0.07, side: 1, pts: [[2, 120], [22, 120], [30, 112], [60, 112]] },\n];\n\n// The river, five LEDs wide, under everything.\nconst RIVER = [[-4, 92], [26, 92], [32, 98], [46, 98], [52, 92], [70, 92]];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p;\n  out[o + 1] = k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p;\n  out[o + 2] = k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p;\n}\n\n// Corners to lattice points one step apart, with the distance run so far.\nfunction expand(pts) {\n  const xs = [];\n  const ys = [];\n  const ss = [];\n  let s = 0;\n  for (let i = 0; i \u003c pts.length - 1; i++) {\n    const [x0, y0] = pts[i];\n    const [x1, y1] = pts[i + 1];\n    const sx = Math.sign(x1 - x0);\n    const sy = Math.sign(y1 - y0);\n    const n = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0));\n    const step = sx && sy ? Math.SQRT2 : 1;\n    for (let k = i === 0 ? 0 : 1; k \u003c= n; k++) {\n      if (k > 0) s += step;\n      xs.push(x0 + sx * k);\n      ys.push(y0 + sy * k);\n      ss.push(s);\n    }\n  }\n  return { xs, ys, ss, loop: pts[0][0] === pts[pts.length - 1][0] && pts[0][1] === pts[pts.length - 1][1] };\n}\n\nfunction setLit(mask, x, y, v) {\n  if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) mask[y * W + x] = v;\n}\n\n// Everything that depends on how many lines are open: which LEDs each line\n// lights, where the interchanges are, where each line stops.\nfunction build(P, count) {\n  P.count = count;\n  const owner = P.owner;\n  owner.fill(0);\n  const lines = P.lines;\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const x = L.xs[k];\n      const y = L.ys[k];\n      setLit(owner, x, y, l + 1);\n      setLit(owner, x + 1, y, l + 1);\n      setLit(owner, x, y + 1, l + 1);\n      setLit(owner, x + 1, y + 1, l + 1);\n    }\n  }\n  // Crossings: lattice points two open lines share.\n  const at = new Map();\n  const hits = [];\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const key = L.ys[k] * 100 + L.xs[k];\n      const other = at.get(key);\n      if (other !== undefined && other !== l) hits.push([L.xs[k] + 1, L.ys[k] + 1]);\n      else at.set(key, l);\n    }\n  }\n  // Crossings closer than six LEDs share one interchange, drawn round both.\n  const inter = [];\n  for (const [x, y] of hits) {\n    let joined = false;\n    for (const I of inter) {\n      if (Math.max(Math.abs(I.ax - x), Math.abs(I.ay - y), Math.abs(I.bx - x), Math.abs(I.by - y)) \u003c= 6) {\n        if (x \u003c I.ax || (x === I.ax && y \u003c I.ay)) {\n          I.ax = x;\n          I.ay = y;\n        } else if (x > I.bx || (x === I.bx && y > I.by)) {\n          I.bx = x;\n          I.by = y;\n        }\n        joined = true;\n        break;\n      }\n    }\n    if (!joined) inter.push({ ax: x, ay: y, bx: x, by: y });\n  }\n  P.inter = inter;\n  // Stops: the interchanges a line passes through, its ends, and ordinary\n  // stations between them about every 13 LEDs, kept off the corners.\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    const n = L.xs.length;\n    const anchors = [];\n    for (let i = 0; i \u003c inter.length; i++) {\n      const I = inter[i];\n      let best = -1;\n      let bd = 3;\n      for (let k = 0; k \u003c n; k++) {\n        const d = Math.max(Math.abs(L.xs[k] + 1 - (I.ax + I.bx) / 2), Math.abs(L.ys[k] + 1 - (I.ay + I.by) / 2));\n        if (d \u003c bd) {\n          bd = d;\n          best = k;\n        }\n      }\n      if (best >= 0) anchors.push({ k: best, inter: true, at: i });\n    }\n    if (!L.loop) {\n      anchors.push({ k: 0, inter: false, end: true });\n      anchors.push({ k: n - 1, inter: false, end: true });\n    }\n    anchors.sort((a, b) => a.k - b.k);\n    const stops = [];\n    for (let i = 0; i \u003c anchors.length; i++) {\n      stops.push(anchors[i]);\n      const a = anchors[i];\n      const b = i + 1 \u003c anchors.length ? anchors[i + 1] : L.loop ? { k: anchors[0].k + n - 1 } : null;\n      if (!b) break;\n      const sa = L.ss[a.k];\n      const sb = b.k \u003c n ? L.ss[b.k] : L.ss[n - 1] + L.ss[b.k - (n - 1)];\n      const gap = sb - sa;\n      const m = Math.round(gap / 13) - 1;\n      for (let j = 1; j \u003c= m; j++) {\n        let target = sa + (gap * j) / (m + 1);\n        if (target > L.ss[n - 1]) target -= L.ss[n - 1];\n        let kk = 0;\n        while (kk \u003c n - 1 && L.ss[kk] \u003c target) kk++;\n        // A station sits on a straight run, off the corners: a tick on a\n        // 45 degree run touches its line only at a corner and reads as a\n        // stray LED. Failing that within seven steps, there is no station.\n        let found = -1;\n        for (let d = 0; d \u003c= 7 && found \u003c 0; d++)\n          for (const c of [kk + d, kk - d])\n            if (found \u003c 0 && c > 0 && c \u003c n - 1 && plain(L, c) && Math.abs(L.ss[c] - L.ss[a.k]) > 5 && Math.abs(L.ss[c] - sb) > 5) found = c;\n        if (found >= 0) stops.push({ k: found, inter: false });\n      }\n    }\n    stops.sort((a, b) => a.k - b.k);\n    L.stops = stops.filter((s, i) => i === 0 || s.k !== stops[i - 1].k);\n    timetable(L);\n  }\n  // Station ticks and the bars at the ends, in LEDs, once every line is laid.\n  for (let l = 0; l \u003c count; l++) {\n    const L = lines[l];\n    for (const st of L.stops) {\n      st.px = [];\n      if (st.inter) continue;\n      if (st.end) {\n        endBar(L, st, owner);\n        continue;\n      }\n      let px = tick(L, st.k, L.side, owner);\n      if (!px) px = tick(L, st.k, -L.side, owner);\n      if (px) st.px = px;\n    }\n  }\n}\n\n// The step a line takes at lattice point k.\nfunction heading(L, k) {\n  const n = L.xs.length;\n  const a = k \u003c n - 1 ? k : k - 1;\n  return [L.xs[a + 1] - L.xs[a], L.ys[a + 1] - L.ys[a]];\n}\n\nfunction free(owner, list) {\n  for (const [x, y] of list) if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || owner[y * W + x]) return false;\n  return true;\n}\n\n// A station tick: two LEDs standing out from the line square to it, on the\n// given side, or null when something else is already there.\nfunction tick(L, k, side, owner) {\n  const [dx, dy] = heading(L, k);\n  const x = L.xs[k];\n  const y = L.ys[k];\n  const nx = -dy * side;\n  const ny = dx * side;\n  let list;\n  if (dx === 0) list = nx > 0 ? [[x + 2, y], [x + 3, y]] : [[x - 1, y], [x - 2, y]];\n  else if (dy === 0) list = ny > 0 ? [[x, y + 2], [x, y + 3]] : [[x, y - 1], [x, y - 2]];\n  else if (dx === dy) list = nx > 0 ? [[x + 2, y - 1], [x + 3, y - 2]] : [[x - 1, y + 2], [x - 2, y + 3]];\n  else list = nx \u003c 0 ? [[x - 1, y - 1], [x - 2, y - 2]] : [[x + 2, y + 2], [x + 3, y + 3]];\n  // Keep a dark LED between the tick and any other line.\n  const halo = list.concat(list.map(([a, b]) => [a + Math.sign(nx), b + Math.sign(ny)]));\n  if (!free(owner, list) || !halo.every(([a, b]) => a \u003c 0 || a >= W || b \u003c 0 || b >= H || !owner[b * W + a] || owner[b * W + a] === owner[L.ys[k] * W + L.xs[k]])) return null;\n  return list.map(([a, b]) => b * W + a);\n}\n\n// The bar across a line's end, six LEDs wide.\nfunction endBar(L, st, owner) {\n  const [dx, dy] = heading(L, st.k);\n  const x = L.xs[st.k];\n  const y = L.ys[st.k];\n  const list = [];\n  for (let i = -2; i \u003c= 3; i++) {\n    if (dx === 0) list.push([x + i, st.k === 0 ? y : y + 1]);\n    else list.push([st.k === 0 ? x : x + 1, y + i]);\n  }\n  st.px = list.filter(([a, b]) => a >= 0 && a \u003c W && b >= 0 && b \u003c H && !owner[b * W + a]).map(([a, b]) => b * W + a);\n}\n\n// A point on a straight up-and-down or level run, two steps from any corner.\nfunction plain(L, k) {\n  const [dx, dy] = heading(L, k);\n  return (dx === 0 || dy === 0) && !isCorner(L, k);\n}\n\nfunction isCorner(L, k) {\n  const n = L.xs.length;\n  if (k \u003c= 0 || k >= n - 1) return false;\n  const ax = L.xs[k] - L.xs[k - 1];\n  const ay = L.ys[k] - L.ys[k - 1];\n  const bx = L.xs[k + 1] - L.xs[k];\n  const by = L.ys[k + 1] - L.ys[k];\n  if (ax !== bx || ay !== by) return true;\n  if (k >= 2 && (L.xs[k - 1] - L.xs[k - 2] !== ax || L.ys[k - 1] - L.ys[k - 2] !== ay)) return true;\n  if (k \u003c= n - 3 && (L.xs[k + 2] - L.xs[k + 1] !== bx || L.ys[k + 2] - L.ys[k + 1] !== by)) return true;\n  return false;\n}\n\n// Trains between two stops a distance d apart: they pull away at ACC LEDs a\n// second squared up to TOP LEDs a second and brake the same way, all in the\n// line's own clock, which Speed winds.\nconst ACC = 5;\nconst TOP = 7;\nconst DWELL = 1.4;\nconst TURN = 3;\n\nfunction runTime(d) {\n  const ramp = TOP / ACC;\n  if (d >= TOP * ramp) return d / TOP + ramp;\n  return 2 * Math.sqrt(d / ACC);\n}\n\nfunction runPos(d, t) {\n  const ramp = TOP / ACC;\n  if (d >= TOP * ramp) {\n    const T = d / TOP + ramp;\n    if (t \u003c ramp) return 0.5 * ACC * t * t;\n    if (t > T - ramp) {\n      const u = T - t;\n      return d - 0.5 * ACC * u * u;\n    }\n    return 0.5 * ACC * ramp * ramp + TOP * (t - ramp);\n  }\n  const T = 2 * Math.sqrt(d / ACC);\n  if (t \u003c T / 2) return 0.5 * ACC * t * t;\n  const u = T - t;\n  return d - 0.5 * ACC * u * u;\n}\n\n// A line's timetable: a list of legs, each a dwell at a stop or a run to the\n// next, covering one round trip (or one lap of a loop).\nfunction timetable(L) {\n  const legs = [];\n  const total = L.ss[L.xs.length - 1];\n  const s = L.stops.map((st) => L.ss[st.k]);\n  let t = 0;\n  const push = (kind, from, to, dur, stop) => {\n    legs.push({ kind, from, to, t0: t, dur, stop });\n    t += dur;\n  };\n  if (L.loop) {\n    for (let i = 0; i \u003c s.length; i++) {\n      const a = s[i];\n      const b = i + 1 \u003c s.length ? s[i + 1] : s[0] + total;\n      push(\"dwell\", a, a, DWELL, i);\n      push(\"run\", a, b, runTime(b - a));\n    }\n  } else {\n    for (let i = 0; i \u003c s.length - 1; i++) {\n      push(\"dwell\", s[i], s[i], i === 0 ? TURN : DWELL, i);\n      push(\"run\", s[i], s[i + 1], runTime(s[i + 1] - s[i]));\n    }\n    for (let i = s.length - 1; i > 0; i--) {\n      push(\"dwell\", s[i], s[i], i === s.length - 1 ? TURN : DWELL, i);\n      push(\"run\", s[i], s[i - 1], runTime(s[i] - s[i - 1]));\n    }\n  }\n  L.legs = legs;\n  L.period = t;\n  L.total = total;\n}\n\n// Where a train is at time t into its line's cycle: distance along the line,\n// and whether it stands at a stop.\nfunction trainAt(L, t, out) {\n  t = ((t % L.period) + L.period) % L.period;\n  const legs = L.legs;\n  let lo = 0;\n  let hi = legs.length - 1;\n  while (lo \u003c hi) {\n    const mid = (lo + hi + 1) >> 1;\n    if (legs[mid].t0 \u003c= t) lo = mid;\n    else hi = mid - 1;\n  }\n  const g = legs[lo];\n  if (g.kind === \"dwell\") {\n    out.s = g.from;\n    out.dir = 0;\n    out.stop = g.stop;\n  } else {\n    const d = Math.abs(g.to - g.from);\n    const p = runPos(d, t - g.t0);\n    out.s = g.to > g.from ? g.from + p : g.from - p;\n    out.dir = g.to > g.from ? 1 : -1;\n    out.stop = -1;\n  }\n  if (L.loop && out.s >= L.total) out.s -= L.total;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.lines = NET.map((L) => {\n    const e = expand(L.pts);\n    return { hue: L.hue, side: L.side, xs: e.xs, ys: e.ys, ss: e.ss, loop: e.loop };\n  });\n  P.owner = new Uint8Array(N);\n  P.river = new Uint8Array(N);\n  const r = expand(RIVER);\n  for (let k = 0; k \u003c r.xs.length; k++)\n    for (let dy = -2; dy \u003c= 2; dy++) for (let dx = -2; dx \u003c= 2; dx++) setLit(P.river, r.xs[k] + dx, r.ys[k] + dy, 1);\n  P.train = new Float32Array(N);\n  P.mark = new Uint8Array(N);\n  P.glow = new Float32Array(N);\n  P.col = new Float32Array(MAXL * 3);\n  P.clock = 0;\n  P.count = 0;\n  // Each line's trains: where each stands in the timetable, as a share of\n  // the line's cycle, and how far it has faded in.\n  P.off = new Float32Array(MAXL * MAXT);\n  P.vis = new Float32Array(MAXL * MAXT);\n  for (let l = 0; l \u003c MAXL; l++)\n    for (let i = 0; i \u003c 3; i++) {\n      P.off[l * MAXT + i] = i / 3;\n      P.vis[l * MAXT + i] = 1;\n    }\n  P.hue = 0;\n  P.express = null;\n  P.pick = 0;\n  P.where = { s: 0, dir: 0, stop: -1 };\n  build(P, 4);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const count = Math.max(4, Math.min(MAXL, Math.round(k[2])));\n  if (count !== P.count) build(P, count);\n  // Rush: three to eight trains a line. A train that joins fades in at its\n  // place in the timetable, one that leaves fades out, and the others close\n  // up over a couple of seconds instead of jumping.\n  const n = Math.round(3 + Math.max(0, Math.min(1, k[3])) * 5);\n  for (let l = 0; l \u003c MAXL; l++)\n    for (let i = 0; i \u003c MAXT; i++) {\n      const j = l * MAXT + i;\n      const target = i \u003c n ? i / n : P.off[j];\n      if (P.vis[j] \u003c= 0) P.off[j] = target;\n      else P.off[j] += (target - P.off[j]) * Math.min(1, dt * 1.2);\n      P.vis[j] = Math.max(0, Math.min(1, P.vis[j] + (i \u003c n ? dt : -dt) * 3));\n    }\n  P.clock += dt * Math.max(0.05, k[1]);\n  if (input.btnPressed && input.btnPressed[0]) {\n    let l = P.pick++ % P.count;\n    if (P.lines[l].loop) l = (l + 1) % P.count;\n    P.express = { line: l, s: 0, dir: P.pick % 2 ? 1 : -1 };\n    if (P.express.dir \u003c 0) P.express.s = P.lines[l].total;\n  }\n  if (P.express) {\n    const E = P.express;\n    E.s += E.dir * dt * Math.max(0.05, k[1]) * TOP * 3.2;\n    if (E.s \u003c -40 || E.s > P.lines[E.line].total + 40) P.express = null;\n  }\n}\n\n// Light a train from distance a to b along a line: each lattice point takes\n// how much of it lies inside, so a train glides from LED to LED.\nfunction paintTrain(P, L, a, b, w) {\n  const tr = P.train;\n  const n = L.xs.length;\n  for (let k = 0; k \u003c n; k++) {\n    const s = L.ss[k];\n    if (s \u003c a - 1 || s > b + 1) continue;\n    const c = Math.max(0, Math.min(1, s - a + 0.5)) * Math.max(0, Math.min(1, b - s + 0.5)) * w;\n    if (c \u003c= 0) continue;\n    const x = L.xs[k];\n    const y = L.ys[k];\n    // A train is four LEDs wide, a lit carriage standing proud of its\n    // two-LED line, a little dimmer at its sides.\n    for (let j = 0; j \u003c 16; j++) {\n      const ox = (j & 3) - 1;\n      const oy = (j >> 2) - 1;\n      const xx = x + ox;\n      const yy = y + oy;\n      if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n      const v = ox \u003c 0 || ox > 1 || oy \u003c 0 || oy > 1 ? c * 0.7 : c;\n      const p = yy * W + xx;\n      if (tr[p] \u003c v) tr[p] = v;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const col = P.col;\n  for (let l = 0; l \u003c MAXL; l++) hsvInto(col, l * 3, P.lines[l].hue + P.hue + 0.02, 0.92, 1);\n  const tr = P.train;\n  tr.fill(0);\n  const where = P.where;\n  const TL = 6;\n  for (let l = 0; l \u003c P.count; l++) {\n    const L = P.lines[l];\n    for (const st of L.stops) st.lit = 0;\n    if (l === 0) for (const I of P.inter) I.lit = 0;\n    for (let i = 0; i \u003c MAXT; i++) {\n      const vis = P.vis[l * MAXT + i];\n      if (vis \u003c= 0) continue;\n      trainAt(L, P.clock + (P.off[l * MAXT + i] + l * 0.41) * L.period, where);\n      if (where.stop >= 0 && vis > 0.5) {\n        const st = L.stops[where.stop];\n        st.lit = 1;\n        if (st.inter) P.inter[st.at].lit = 1;\n      }\n      paintTrain(P, L, where.s - TL / 2, where.s + TL / 2, vis);\n      if (L.loop && where.s + TL / 2 > L.total) paintTrain(P, L, where.s - TL / 2 - L.total, where.s + TL / 2 - L.total, vis);\n    }\n  }\n  if (P.express) {\n    const E = P.express;\n    const L = P.lines[E.line];\n    paintTrain(P, L, E.s - 9 * (E.dir > 0 ? 1 : 0), E.s + 9 * (E.dir > 0 ? 0 : 1), 1);\n    // Behind it the line stays lit for 30 LEDs, fading as it goes.\n    for (let k = 0; k \u003c L.xs.length; k++) {\n      const back = (E.s - L.ss[k]) * E.dir - 9;\n      if (back \u003c 0 || back > 30) continue;\n      const v = 0.8 * (1 - back / 30) ** 2;\n      for (let j = 0; j \u003c 4; j++) {\n        const xx = L.xs[k] + (j & 1);\n        const yy = L.ys[k] + (j >> 1);\n        if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n        const p = yy * W + xx;\n        if (tr[p] \u003c v) tr[p] = v;\n      }\n    }\n  }\n\n  // Ticks and end bars take their line's colour, and light up while a train\n  // stands at their station.\n  const mark = P.mark;\n  const glow = P.glow;\n  mark.fill(0);\n  for (let l = 0; l \u003c P.count; l++)\n    for (const st of P.lines[l].stops)\n      for (const p of st.px) {\n        mark[p] = l + 1;\n        glow[p] = st.lit || 0;\n      }\n  const owner = P.owner;\n  const river = P.river;\n  const LINE = 0.75;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = owner[p];\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (o) {\n        const c = (o - 1) * 3;\n        r = col[c] * LINE;\n        g = col[c + 1] * LINE;\n        b = col[c + 2] * LINE;\n      } else if (mark[p]) {\n        const c = (mark[p] - 1) * 3;\n        const t = glow[p];\n        r = col[c] * LINE * (1 - t) + t;\n        g = col[c + 1] * LINE * (1 - t) + t;\n        b = col[c + 2] * LINE * (1 - t) + t;\n      } else if (river[p]) {\n        r = 0.03;\n        g = 0.11;\n        b = 0.3;\n      }\n      const t = tr[p];\n      if (t > 0) {\n        r += (1 - r) * t;\n        g += (1 - g) * t;\n        b += (1 - b) * t;\n      }\n      display.setPixel(x, y, r * 255, g * 255, b * 255);\n    }\n  }\n\n  // Interchanges: a white ring round each crossing, or round a pair of\n  // crossings close together, dark inside until a train stands there.\n  for (const I of P.inter) {\n    const inside = I.lit ? 255 : 0;\n    const x0 = Math.floor(Math.min(I.ax, I.bx) - 4);\n    const x1 = Math.ceil(Math.max(I.ax, I.bx) + 4);\n    const y0 = Math.floor(Math.min(I.ay, I.by) - 4);\n    const y1 = Math.ceil(Math.max(I.ay, I.by) + 4);\n    const dx = I.bx - I.ax;\n    const dy = I.by - I.ay;\n    const len2 = dx * dx + dy * dy;\n    for (let y = y0; y \u003c= y1; y++) {\n      for (let x = x0; x \u003c= x1; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const px = x + 0.5 - I.ax;\n        const py = y + 0.5 - I.ay;\n        const t = len2 > 0 ? Math.max(0, Math.min(1, (px * dx + py * dy) / len2)) : 0;\n        const d = Math.hypot(px - t * dx, py - t * dy);\n        if (d \u003c 1.9) display.setPixel(x, y, inside, inside, inside);\n        else if (d \u003c 3.0) display.setPixel(x, y, 235, 235, 235);\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Lines=4..7, Rush=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole line palette round the colour wheel together; the river stays blue."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the trains run: at 2 they reach 14 LEDs a second between stations and stand 0.7 s at each, at the bottom they creep at 1.4 and stand 7 s, at the top they reach 21."},{"name":"Lines","min":4,"max":7,"about":"How many lines are open: four at the bottom (two trunks, the line that shares both their corridors, and the circle), then the cross line through the middle, an upper and a lower one. A line that opens turns the crossings it makes into interchanges."},{"name":"Rush","min":0,"max":1,"about":"The service: from three trains on each line, spread evenly round its timetable, to eight; a train that joins fades in at its place and the rest close up over a couple of seconds."}],"start":[0,2,4,0.06],"measures":{"motion":0.0316,"detail":0.0683,"edges":0.914,"complexity":0.1388,"coverage":0.2043,"colour":0.2301,"drift":0.035},"knobResponse":[0.0664,0.0514,0.0687,0.0629]},{"slug":"millefiori","title":"Millefiori","family":"glass","round":20,"note":"무라노 밀레피오리 접시 위로 시야가 천천히 미끄러지며, 1 LED 고리와 꽃잎으로 된 유리 막대 조각 수백 개가 어두운 유리에 촘촘히 박혀 지나가요. K1 을 누르면 새로 뽑은 막대로 만든 접시가 오른쪽에서 밀려 들어와요.","idea":"The view drifts slowly across a Murano millefiori plate, hundreds of cane slices packed tight in dark glass, each a tiny rosette, star or flower of 1-LED rings and petals in cobalt, canary, emerald, ruby and turquoise, while a lamp wanders over the polished surface and every domed slice catches it as a white glint.","buttons":"K1 tap pulls a fresh set of canes, and the new plate slides in from the right over the old one in under a second.","code":"// ===== Patternflow pattern =====\n// Title:   Millefiori\n// Family:  glass\n// Idea:    The view drifts slowly across a Murano millefiori plate, hundreds of cane slices packed tight in dark glass, each a tiny rosette, star or flower of 1-LED rings and petals in cobalt, canary, emerald, ruby and turquoise, while a lamp wanders over the polished surface and every domed slice catches it as a white glint.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Venetian millefiori (murrine) glass from the workshops of Murano, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..4, Speed=0.2..3, Canes=6..12, Light=0..1\n//\n// Knob 1: Palette. The glass the canes are pulled from: classic Murano cobalt, canary, emerald, ruby and turquoise at 0, then ruby and gold, lagoon blues and greens, spring pinks and lemons, and violet and cyan night glass at 4.\n// Knob 2: Speed. How fast the plate slides under the view and the lamp moves: at 2 the plate drifts about two and a half LEDs a second sideways and one down, and the lamp crosses the panel in about twelve seconds.\n// Knob 3: Canes. How wide the slices are: at 6 most are 5 to 7 LEDs across, with 3-LED chips in the gaps and a few 11-LED feature canes; at 12 they run up to 15 LEDs and the feature canes to 23, each showing more rings and longer petals.\n// Knob 4: Light. How close the lamp hangs: near 0 it is far off and lights the plate almost evenly, each slice carrying a faint glint; turned up it comes down close, throws a bright pool with hard white glints, and the rest of the plate falls dim.\n// Buttons: K1 tap pulls a fresh set of canes, and the new plate slides in from the right over the old one in under a second.\n\nconst W = 64;\nconst H = 128;\n// The plate is a torus larger than the panel, so the view can drift forever.\nconst WW = 256;\nconst WH = 256;\nconst WN = WW * WH;\nconst MAXC = 6000;\nconst RINGS = 12;\n// The glassmaker pulls this many canes and cuts every slice from one of them.\nconst D = 14;\nconst TAU = Math.PI * 2;\n\n// Five sets of glass. Slots 0..5 go round the colour wheel so slot i and\n// slot i+3 sit opposite each other; slot 6 is the milk-white centre glass and\n// slot 7 the dark ground the slices are set in. Codes 8..15 are the same\n// glass pulled thin and dark.\nconst SETS = [\n  // Murano: ruby, canary, emerald, turquoise, cobalt, amethyst.\n  [[215, 10, 45], [255, 205, 0], [0, 185, 70], [0, 195, 200], [25, 60, 255], [150, 40, 225], [236, 232, 220], [5, 8, 40]],\n  // Ruby and gold.\n  [[225, 0, 35], [255, 175, 0], [255, 95, 0], [0, 165, 115], [25, 35, 190], [255, 60, 130], [255, 236, 170], [34, 4, 8]],\n  // Lagoon.\n  [[255, 90, 60], [160, 230, 0], [0, 200, 120], [0, 225, 225], [30, 110, 255], [70, 30, 230], [220, 245, 240], [0, 16, 30]],\n  // Spring.\n  [[255, 70, 150], [250, 235, 30], [60, 210, 40], [0, 200, 255], [120, 90, 255], [255, 140, 70], [255, 240, 245], [20, 10, 30]],\n  // Night.\n  [[230, 0, 190], [255, 90, 0], [150, 255, 0], [0, 230, 255], [20, 50, 255], [120, 20, 255], [230, 220, 255], [8, 0, 22]],\n];\n// The main glass of the fourteen canes: cobalt and the greens lead, canary\n// and amethyst follow, and ruby comes in mostly as a partner.\nconst MAINS = [4, 4, 4, 3, 3, 2, 2, 2, 1, 1, 5, 5, 0, 3];\nconst TYPES = [0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 4];\n// Most canes pair their main glass with the opposite one; five have a\n// milk-white eye and the rest a canary one.\nconst PARTS = [3, 3, 3, 3, 3, 3, 3, 3, 3, 1, 2, 4, 5, 2];\nconst ACCS = [6, 6, 6, 6, 6, 1, 1, 1, 1, 1, 1, 1, 1, 1];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wrap = (d, m) => (d > m / 2 ? d - m : d \u003c -m / 2 ? d + m : d);\nconst shuffle = (a) => {\n  const o = a.slice();\n  for (let i = o.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    const t = o[i];\n    o[i] = o[j];\n    o[j] = t;\n  }\n  return o;\n};\n\nexport function setup(params) {\n  const P = params;\n  P.cx = new Int16Array(MAXC);\n  P.cy = new Int16Array(MAXC);\n  P.cr = new Float32Array(MAXC);\n  P.cd = new Uint16Array(MAXC);\n  P.tone = new Float32Array(MAXC);\n  // Each slice's glint this frame: when worked out, where, how bright.\n  P.gs = new Int32Array(MAXC).fill(-1);\n  P.gx = new Float32Array(MAXC);\n  P.gy = new Float32Array(MAXC);\n  P.gn = new Float32Array(MAXC);\n  P.frame = 0;\n  // The cane library, per cane and ring count and ring: glass A and B, petal\n  // count, phase and duty.\n  const L = D * RINGS * RINGS;\n  P.ra = new Uint8Array(L);\n  P.rb = new Uint8Array(L);\n  P.rn = new Uint8Array(L);\n  P.rp = new Float32Array(L);\n  P.rd = new Float32Array(L);\n  P.reg = new Uint8Array(256);\n  // Per plate LED: which slice, which ring, the angle round its centre.\n  P.cid = new Int16Array(WN);\n  P.ring = new Uint8Array(WN);\n  P.ang = new Float32Array(WN);\n  P.s1 = new Float32Array(WN);\n  P.s2 = new Float32Array(WN);\n  P.pal = new Float32Array(16 * 3);\n  P.size = -1;\n  // The last frame, held while a new plate slides in over it.\n  P.prev = new Float32Array(W * H * 3);\n  P.wipe = -1;\n  P.t = 0;\n  P.ox = Math.random() * WW;\n  P.oy = Math.random() * WH;\n  P.lph = Math.random() * TAU;\n}\n\n// Pull the canes: each is one design built up ring by ring, the same in every\n// slice cut from it, whatever its width.\nfunction canes(P) {\n  const mains = shuffle(MAINS);\n  const types = shuffle(TYPES);\n  const parts = shuffle(PARTS);\n  const accs = shuffle(ACCS);\n  for (let d = 0; d \u003c D; d++) {\n    const m = mains[d];\n    const p = (m + parts[d]) % 6;\n    const acc = accs[d];\n    const half = Math.random() \u003c 0.5 ? 0.5 : 0;\n    const type = types[d];\n    const pS = Math.random() \u003c 0.4 ? 4 : 8;\n    const pL = [5, 6, 8, 8, 10, 12][Math.floor(Math.random() * 6)];\n    for (let K = 1; K \u003c RINGS; K++) realise(P, d, K, type, m, p, acc, half, K \u003c= 3 ? pS : pL);\n  }\n  for (let i = 0; i \u003c 256; i++) P.reg[i] = Math.floor(Math.random() * D);\n}\n\n// One cane's rings from the centre out. Petals point straight up or sit half\n// a petal over, so a slice is mirror-true and never turns into a pinwheel on\n// the LED grid.\nfunction realise(P, d, K, type, m, p, acc, half, petals) {\n  const o = (d * RINGS + K) * RINGS;\n  const set = (k, a, b, nn, ph, du) => {\n    P.ra[o + k] = a;\n    P.rb[o + k] = b;\n    P.rn[o + k] = nn;\n    P.rp[o + k] = ph;\n    P.rd[o + k] = du;\n  };\n  const dm = m + 8;\n  const dp = p + 8;\n  for (let k = 0; k \u003c= K; k++) {\n    const out = k / K;\n    // The innermost rings have 8 and 12 LEDs, too few to carry an odd count.\n    const pn = k === 1 ? (petals >= 8 ? 8 : 4) : k === 2 ? (petals === 4 ? 4 : petals \u003c= 6 ? 6 : 8) : petals;\n    if (k === 0) set(0, type === 3 ? m : acc, 0, 0, 0, 1);\n    else if (type === 0) {\n      // Bullseye: bright rings parted by dark ones, cased in the partner.\n      const seq = [dm, acc, dp, m, dm, p];\n      set(k, k === K ? p : seq[(k - 1) % seq.length], 0, 0, 0, 1);\n    } else if (type === 1) {\n      // Flower: white or partner petals on a dark disc of the main glass,\n      // cased in it.\n      if (k === K) set(k, m, 0, 0, 0, 1);\n      else set(k, k === 1 && K > 3 ? p : acc === 6 ? 6 : p, dm, pn, half, 0.55);\n    } else if (type === 2) {\n      // Star: points of the main glass taper out into the dark partner.\n      if (k === K) set(k, p, 0, 0, 0, 1);\n      else set(k, m, dp, pn, half, 0.85 - 0.55 * out);\n    } else if (type === 3) {\n      // Cog: rings round the eye and a toothed rim.\n      if (k === K) set(k, m, dm, Math.max(8, 4 * K), 0, 0.5);\n      else set(k, k % 2 ? dp : k % 4 === 2 ? acc : m, 0, 0, 0, 1);\n    } else {\n      // Rosetta: chevron layers of white and colour, each turned half a\n      // point from the one inside it.\n      set(k, k % 2 ? m : 6, k % 2 ? dp : dm, pn, half + k * 0.5, 0.5);\n    }\n  }\n}\n\n// Lay out the slices: a few big feature canes first, then ever smaller ones\n// thrown into the gaps until the plate is full, as a glassmaker packs a\n// mould. Slices from one cane tend to be set together in patches.\nfunction plate(P, size) {\n  const r0 = size / 2;\n  // Buckets at least as wide as two of the biggest radii together, so a new\n  // slice only has to look at its own bucket and the eight round it.\n  const gw = Math.max(3, Math.floor(WW / Math.ceil(r0 * 3.8 + 1)));\n  const gh = gw;\n  const CAP = 40;\n  const gc = new Int32Array(gw * gh);\n  const gi = new Int16Array(gw * gh * CAP);\n  let n = 0;\n  const fits = (x, y, r) => {\n    const gx = Math.floor((x * gw) / WW);\n    const gy = Math.floor((y * gh) / WH);\n    for (let j = -1; j \u003c= 1; j++)\n      for (let i = -1; i \u003c= 1; i++) {\n        const cell = ((gy + j + gh) % gh) * gw + ((gx + i + gw) % gw);\n        for (let t = 0; t \u003c gc[cell]; t++) {\n          const c = gi[cell * CAP + t];\n          const dx = wrap(x - P.cx[c], WW);\n          const dy = wrap(y - P.cy[c], WH);\n          const m = r + P.cr[c] - 0.4;\n          if (dx * dx + dy * dy \u003c m * m) return false;\n        }\n      }\n    return gc[Math.floor((y * gh) / WH) * gw + Math.floor((x * gw) / WW)] \u003c CAP;\n  };\n  const tries = Math.round((WN / (r0 * r0)) * 7);\n  for (let a = 0; a \u003c tries && n \u003c MAXC; a++) {\n    const big = a \u003c tries * 0.02 && Math.random() \u003c 0.35;\n    const u = a / tries;\n    const r = big ? r0 * (1.6 + Math.random() * 0.3) : (1.2 * r0 - (1.2 * r0 - 1.9) * Math.sqrt(u)) * (0.94 + Math.random() * 0.12);\n    const x = Math.floor(Math.random() * WW);\n    const y = Math.floor(Math.random() * WH);\n    if (!fits(x, y, r)) continue;\n    const R = Math.max(1.6, r);\n    const K = Math.min(Math.floor(R + 0.25), RINGS - 1);\n    P.cx[n] = x;\n    P.cy[n] = y;\n    P.cr[n] = R;\n    const d = !big && Math.random() \u003c 0.7 ? P.reg[(y >> 4) * 16 + (x >> 4)] : Math.floor(Math.random() * D);\n    P.cd[n] = d * RINGS + K;\n    P.tone[n] = 0.82 + Math.random() * 0.18;\n    const cell = Math.floor((y * gh) / WH) * gw + Math.floor((x * gw) / WW);\n    gi[cell * CAP + gc[cell]++] = n;\n    n++;\n  }\n  // Each LED goes to the slice whose rim it is closest to (d - r), so\n  // touching slices meet where their circles touch; past the rim, and on the\n  // seam between two slices, is the dark ground.\n  P.s1.fill(1e9);\n  P.s2.fill(1e9);\n  P.cid.fill(-1);\n  for (let c = 0; c \u003c n; c++) {\n    const R = P.cr[c];\n    const m = Math.ceil(R + 1);\n    const K = P.cd[c] % RINGS;\n    for (let dy = -m; dy \u003c= m; dy++)\n      for (let dx = -m; dx \u003c= m; dx++) {\n        const d = Math.sqrt(dx * dx + dy * dy);\n        const s = d - R;\n        if (s > 0.5) continue;\n        const q = ((P.cy[c] + dy) & (WH - 1)) * WW + ((P.cx[c] + dx) & (WW - 1));\n        if (s \u003c P.s1[q]) {\n          P.s2[q] = P.s1[q];\n          P.s1[q] = s;\n          P.cid[q] = c;\n          P.ring[q] = Math.min(Math.round(d), K);\n          // Angle from straight up, in turns.\n          P.ang[q] = Math.atan2(dx, -dy) / TAU;\n        } else if (s \u003c P.s2[q]) P.s2[q] = s;\n      }\n  }\n  for (let q = 0; q \u003c WN; q++) if (P.cid[q] \u003c 0 || P.s2[q] - P.s1[q] \u003c 1) P.ring[q] = 255;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const size = clamp(k[2], 6, 12);\n  P.light = clamp(k[3], 0, 1);\n  P.palk = clamp(k[0], 0, 4);\n  const fresh = input.btnPressed && input.btnPressed[0];\n  if (fresh && P.size > 0) P.wipe = 0;\n  else if (P.wipe >= 0) P.wipe = P.wipe + dt * 1.4 > 1 ? -1 : P.wipe + dt * 1.4;\n  if (fresh || P.size \u003c 0) canes(P);\n  if (fresh || P.size \u003c 0 || Math.abs(size - P.size) > 0.24) {\n    P.size = size;\n    plate(P, size);\n  }\n  P.t += dt * speed;\n  P.ox += dt * speed * 2.4;\n  P.oy += dt * speed * 0.9;\n  if (P.ox >= WW) P.ox -= WW;\n  if (P.oy >= WH) P.oy -= WH;\n  // The lamp wanders over the plate on a slow figure.\n  const t = P.t + P.lph * 10;\n  P.lx = 32 + 27 * Math.sin(t * 0.26 + P.lph);\n  P.ly = 64 + 52 * Math.sin(t * 0.15);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.size \u003c 0) return;\n  // The glass of the moment, between two neighbouring sets.\n  const i0 = Math.min(3, Math.floor(P.palk));\n  let f = P.palk - i0;\n  f = clamp((f - 0.3) / 0.4, 0, 1);\n  f = f * f * (3 - 2 * f);\n  const pal = P.pal;\n  for (let s = 0; s \u003c 8; s++) {\n    for (let ch = 0; ch \u003c 3; ch++) pal[s * 3 + ch] = SETS[i0][s][ch] * (1 - f) + SETS[i0 + 1][s][ch] * f;\n    // The same glass pulled dark. Dark yellow and orange read as brown on\n    // the panel, so they darken to a deep ruby, and lime to a bottle green.\n    const r = pal[s * 3];\n    const g = pal[s * 3 + 1];\n    const b = pal[s * 3 + 2];\n    const o = (s + 8) * 3;\n    if (b > 0.3 * Math.max(r, g) || g \u003c 0.35 * r) {\n      pal[o] = r * 0.18;\n      pal[o + 1] = g * 0.18;\n      pal[o + 2] = b * 0.18;\n    } else if (g > r) {\n      pal[o] = r * 0.03;\n      pal[o + 1] = g * 0.2;\n      pal[o + 2] = g * 0.06;\n    } else {\n      pal[o] = r * 0.21;\n      pal[o + 1] = g * 0.03;\n      pal[o + 2] = r * 0.06;\n    }\n  }\n  const L = P.light;\n  const sig = 70 - 46 * L;\n  const amb = 0.92 - 0.62 * L;\n  const pool = 0.2 + 0.85 * L;\n  const glint = 0.95 + 0.5 * L;\n  // While a new plate slides in, it rides in with its leading edge.\n  const ox = Math.floor(P.ox) - (P.wipe >= 0 ? Math.floor((W + 26) * (1 - P.wipe)) : 0);\n  const oy = Math.floor(P.oy);\n  const lx = P.lx;\n  const ly = P.ly;\n  const k2 = 1 / (2 * sig * sig);\n  P.frame++;\n  for (let y = 0; y \u003c H; y++) {\n    const wy = (y + oy) & (WH - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const wx = (x + ox) & (WW - 1);\n      const q = wy * WW + wx;\n      const c = P.cid[q];\n      const kk = P.ring[q];\n      const ddx = x - lx;\n      const ddy = y - ly;\n      const lit = amb + pool * Math.exp(-(ddx * ddx + ddy * ddy) * k2);\n      let r;\n      let g;\n      let b;\n      if (kk === 255) {\n        r = pal[21] * lit;\n        g = pal[22] * lit;\n        b = pal[23] * lit;\n      } else {\n        const e = P.cd[c] * RINGS + kk;\n        let code = P.ra[e];\n        const nn = P.rn[e];\n        if (nn) {\n          // Distance from the nearest petal's axis, 0 on it and 0.5 between.\n          const u = nn * P.ang[q] + P.rp[e];\n          if (Math.abs(u - Math.round(u)) * 2 >= P.rd[e]) code = P.rb[e];\n        }\n        const tl = lit * P.tone[c];\n        r = pal[code * 3] * tl;\n        g = pal[code * 3 + 1] * tl;\n        b = pal[code * 3 + 2] * tl;\n        // The domed slice throws the lamp back as a small glint on the side\n        // facing it; where, worked out once a frame for each slice in view.\n        if (P.gs[c] !== P.frame) {\n          P.gs[c] = P.frame;\n          const cxs = x + wrap(P.cx[c] - wx, WW);\n          const cys = y + wrap(P.cy[c] - wy, WH);\n          const vx = lx - cxs;\n          const vy = ly - cys;\n          const dl2 = vx * vx + vy * vy;\n          const dl = Math.sqrt(dl2) + 1e-3;\n          const off = (0.45 * P.cr[c] * Math.min(1, dl / 8)) / dl;\n          P.gx[c] = cxs + vx * off;\n          P.gy[c] = cys + vy * off;\n          P.gn[c] = glint * Math.exp(-dl2 * k2 * 1.4);\n        }\n        const hx = P.gx[c] - x;\n        const hy = P.gy[c] - y;\n        const h2 = hx * hx + hy * hy;\n        if (h2 \u003c 3 && P.gn[c] > 0.02) {\n          const gl = P.gn[c] * Math.exp(-h2 / 0.45);\n          r += 250 * gl;\n          g += 246 * gl;\n          b += 232 * gl;\n        }\n      }\n      const o = (y * W + x) * 3;\n      // The edge of the new plate runs right to left, leaning a little.\n      const e = P.wipe >= 0 ? x + y * 0.2 - (W + 26) * (1 - P.wipe) : 1;\n      if (P.wipe >= 0) {\n        if (e \u003c 0) {\n          r = P.prev[o];\n          g = P.prev[o + 1];\n          b = P.prev[o + 2];\n        } else if (e \u003c 1) {\n          r = g = b = 200;\n        }\n      }\n      // What is shown is what the next new plate slides in over; the old\n      // side only shrinks, so it keeps the frame it had when K1 was tapped.\n      if (P.wipe \u003c 0 || e >= 1) {\n        P.prev[o] = r;\n        P.prev[o + 1] = g;\n        P.prev[o + 2] = b;\n      }\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n}\n","layer":{"id":"layer-millefiori","type":"code","name":"millefiori","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Millefiori\n// Family:  glass\n// Idea:    The view drifts slowly across a Murano millefiori plate, hundreds of cane slices packed tight in dark glass, each a tiny rosette, star or flower of 1-LED rings and petals in cobalt, canary, emerald, ruby and turquoise, while a lamp wanders over the polished surface and every domed slice catches it as a white glint.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Venetian millefiori (murrine) glass from the workshops of Murano, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..4, Speed=0.2..3, Canes=6..12, Light=0..1\n//\n// Knob 1: Palette. The glass the canes are pulled from: classic Murano cobalt, canary, emerald, ruby and turquoise at 0, then ruby and gold, lagoon blues and greens, spring pinks and lemons, and violet and cyan night glass at 4.\n// Knob 2: Speed. How fast the plate slides under the view and the lamp moves: at 2 the plate drifts about two and a half LEDs a second sideways and one down, and the lamp crosses the panel in about twelve seconds.\n// Knob 3: Canes. How wide the slices are: at 6 most are 5 to 7 LEDs across, with 3-LED chips in the gaps and a few 11-LED feature canes; at 12 they run up to 15 LEDs and the feature canes to 23, each showing more rings and longer petals.\n// Knob 4: Light. How close the lamp hangs: near 0 it is far off and lights the plate almost evenly, each slice carrying a faint glint; turned up it comes down close, throws a bright pool with hard white glints, and the rest of the plate falls dim.\n// Buttons: K1 tap pulls a fresh set of canes, and the new plate slides in from the right over the old one in under a second.\n\nconst W = 64;\nconst H = 128;\n// The plate is a torus larger than the panel, so the view can drift forever.\nconst WW = 256;\nconst WH = 256;\nconst WN = WW * WH;\nconst MAXC = 6000;\nconst RINGS = 12;\n// The glassmaker pulls this many canes and cuts every slice from one of them.\nconst D = 14;\nconst TAU = Math.PI * 2;\n\n// Five sets of glass. Slots 0..5 go round the colour wheel so slot i and\n// slot i+3 sit opposite each other; slot 6 is the milk-white centre glass and\n// slot 7 the dark ground the slices are set in. Codes 8..15 are the same\n// glass pulled thin and dark.\nconst SETS = [\n  // Murano: ruby, canary, emerald, turquoise, cobalt, amethyst.\n  [[215, 10, 45], [255, 205, 0], [0, 185, 70], [0, 195, 200], [25, 60, 255], [150, 40, 225], [236, 232, 220], [5, 8, 40]],\n  // Ruby and gold.\n  [[225, 0, 35], [255, 175, 0], [255, 95, 0], [0, 165, 115], [25, 35, 190], [255, 60, 130], [255, 236, 170], [34, 4, 8]],\n  // Lagoon.\n  [[255, 90, 60], [160, 230, 0], [0, 200, 120], [0, 225, 225], [30, 110, 255], [70, 30, 230], [220, 245, 240], [0, 16, 30]],\n  // Spring.\n  [[255, 70, 150], [250, 235, 30], [60, 210, 40], [0, 200, 255], [120, 90, 255], [255, 140, 70], [255, 240, 245], [20, 10, 30]],\n  // Night.\n  [[230, 0, 190], [255, 90, 0], [150, 255, 0], [0, 230, 255], [20, 50, 255], [120, 20, 255], [230, 220, 255], [8, 0, 22]],\n];\n// The main glass of the fourteen canes: cobalt and the greens lead, canary\n// and amethyst follow, and ruby comes in mostly as a partner.\nconst MAINS = [4, 4, 4, 3, 3, 2, 2, 2, 1, 1, 5, 5, 0, 3];\nconst TYPES = [0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 4];\n// Most canes pair their main glass with the opposite one; five have a\n// milk-white eye and the rest a canary one.\nconst PARTS = [3, 3, 3, 3, 3, 3, 3, 3, 3, 1, 2, 4, 5, 2];\nconst ACCS = [6, 6, 6, 6, 6, 1, 1, 1, 1, 1, 1, 1, 1, 1];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst wrap = (d, m) => (d > m / 2 ? d - m : d \u003c -m / 2 ? d + m : d);\nconst shuffle = (a) => {\n  const o = a.slice();\n  for (let i = o.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    const t = o[i];\n    o[i] = o[j];\n    o[j] = t;\n  }\n  return o;\n};\n\nexport function setup(params) {\n  const P = params;\n  P.cx = new Int16Array(MAXC);\n  P.cy = new Int16Array(MAXC);\n  P.cr = new Float32Array(MAXC);\n  P.cd = new Uint16Array(MAXC);\n  P.tone = new Float32Array(MAXC);\n  // Each slice's glint this frame: when worked out, where, how bright.\n  P.gs = new Int32Array(MAXC).fill(-1);\n  P.gx = new Float32Array(MAXC);\n  P.gy = new Float32Array(MAXC);\n  P.gn = new Float32Array(MAXC);\n  P.frame = 0;\n  // The cane library, per cane and ring count and ring: glass A and B, petal\n  // count, phase and duty.\n  const L = D * RINGS * RINGS;\n  P.ra = new Uint8Array(L);\n  P.rb = new Uint8Array(L);\n  P.rn = new Uint8Array(L);\n  P.rp = new Float32Array(L);\n  P.rd = new Float32Array(L);\n  P.reg = new Uint8Array(256);\n  // Per plate LED: which slice, which ring, the angle round its centre.\n  P.cid = new Int16Array(WN);\n  P.ring = new Uint8Array(WN);\n  P.ang = new Float32Array(WN);\n  P.s1 = new Float32Array(WN);\n  P.s2 = new Float32Array(WN);\n  P.pal = new Float32Array(16 * 3);\n  P.size = -1;\n  // The last frame, held while a new plate slides in over it.\n  P.prev = new Float32Array(W * H * 3);\n  P.wipe = -1;\n  P.t = 0;\n  P.ox = Math.random() * WW;\n  P.oy = Math.random() * WH;\n  P.lph = Math.random() * TAU;\n}\n\n// Pull the canes: each is one design built up ring by ring, the same in every\n// slice cut from it, whatever its width.\nfunction canes(P) {\n  const mains = shuffle(MAINS);\n  const types = shuffle(TYPES);\n  const parts = shuffle(PARTS);\n  const accs = shuffle(ACCS);\n  for (let d = 0; d \u003c D; d++) {\n    const m = mains[d];\n    const p = (m + parts[d]) % 6;\n    const acc = accs[d];\n    const half = Math.random() \u003c 0.5 ? 0.5 : 0;\n    const type = types[d];\n    const pS = Math.random() \u003c 0.4 ? 4 : 8;\n    const pL = [5, 6, 8, 8, 10, 12][Math.floor(Math.random() * 6)];\n    for (let K = 1; K \u003c RINGS; K++) realise(P, d, K, type, m, p, acc, half, K \u003c= 3 ? pS : pL);\n  }\n  for (let i = 0; i \u003c 256; i++) P.reg[i] = Math.floor(Math.random() * D);\n}\n\n// One cane's rings from the centre out. Petals point straight up or sit half\n// a petal over, so a slice is mirror-true and never turns into a pinwheel on\n// the LED grid.\nfunction realise(P, d, K, type, m, p, acc, half, petals) {\n  const o = (d * RINGS + K) * RINGS;\n  const set = (k, a, b, nn, ph, du) => {\n    P.ra[o + k] = a;\n    P.rb[o + k] = b;\n    P.rn[o + k] = nn;\n    P.rp[o + k] = ph;\n    P.rd[o + k] = du;\n  };\n  const dm = m + 8;\n  const dp = p + 8;\n  for (let k = 0; k \u003c= K; k++) {\n    const out = k / K;\n    // The innermost rings have 8 and 12 LEDs, too few to carry an odd count.\n    const pn = k === 1 ? (petals >= 8 ? 8 : 4) : k === 2 ? (petals === 4 ? 4 : petals \u003c= 6 ? 6 : 8) : petals;\n    if (k === 0) set(0, type === 3 ? m : acc, 0, 0, 0, 1);\n    else if (type === 0) {\n      // Bullseye: bright rings parted by dark ones, cased in the partner.\n      const seq = [dm, acc, dp, m, dm, p];\n      set(k, k === K ? p : seq[(k - 1) % seq.length], 0, 0, 0, 1);\n    } else if (type === 1) {\n      // Flower: white or partner petals on a dark disc of the main glass,\n      // cased in it.\n      if (k === K) set(k, m, 0, 0, 0, 1);\n      else set(k, k === 1 && K > 3 ? p : acc === 6 ? 6 : p, dm, pn, half, 0.55);\n    } else if (type === 2) {\n      // Star: points of the main glass taper out into the dark partner.\n      if (k === K) set(k, p, 0, 0, 0, 1);\n      else set(k, m, dp, pn, half, 0.85 - 0.55 * out);\n    } else if (type === 3) {\n      // Cog: rings round the eye and a toothed rim.\n      if (k === K) set(k, m, dm, Math.max(8, 4 * K), 0, 0.5);\n      else set(k, k % 2 ? dp : k % 4 === 2 ? acc : m, 0, 0, 0, 1);\n    } else {\n      // Rosetta: chevron layers of white and colour, each turned half a\n      // point from the one inside it.\n      set(k, k % 2 ? m : 6, k % 2 ? dp : dm, pn, half + k * 0.5, 0.5);\n    }\n  }\n}\n\n// Lay out the slices: a few big feature canes first, then ever smaller ones\n// thrown into the gaps until the plate is full, as a glassmaker packs a\n// mould. Slices from one cane tend to be set together in patches.\nfunction plate(P, size) {\n  const r0 = size / 2;\n  // Buckets at least as wide as two of the biggest radii together, so a new\n  // slice only has to look at its own bucket and the eight round it.\n  const gw = Math.max(3, Math.floor(WW / Math.ceil(r0 * 3.8 + 1)));\n  const gh = gw;\n  const CAP = 40;\n  const gc = new Int32Array(gw * gh);\n  const gi = new Int16Array(gw * gh * CAP);\n  let n = 0;\n  const fits = (x, y, r) => {\n    const gx = Math.floor((x * gw) / WW);\n    const gy = Math.floor((y * gh) / WH);\n    for (let j = -1; j \u003c= 1; j++)\n      for (let i = -1; i \u003c= 1; i++) {\n        const cell = ((gy + j + gh) % gh) * gw + ((gx + i + gw) % gw);\n        for (let t = 0; t \u003c gc[cell]; t++) {\n          const c = gi[cell * CAP + t];\n          const dx = wrap(x - P.cx[c], WW);\n          const dy = wrap(y - P.cy[c], WH);\n          const m = r + P.cr[c] - 0.4;\n          if (dx * dx + dy * dy \u003c m * m) return false;\n        }\n      }\n    return gc[Math.floor((y * gh) / WH) * gw + Math.floor((x * gw) / WW)] \u003c CAP;\n  };\n  const tries = Math.round((WN / (r0 * r0)) * 7);\n  for (let a = 0; a \u003c tries && n \u003c MAXC; a++) {\n    const big = a \u003c tries * 0.02 && Math.random() \u003c 0.35;\n    const u = a / tries;\n    const r = big ? r0 * (1.6 + Math.random() * 0.3) : (1.2 * r0 - (1.2 * r0 - 1.9) * Math.sqrt(u)) * (0.94 + Math.random() * 0.12);\n    const x = Math.floor(Math.random() * WW);\n    const y = Math.floor(Math.random() * WH);\n    if (!fits(x, y, r)) continue;\n    const R = Math.max(1.6, r);\n    const K = Math.min(Math.floor(R + 0.25), RINGS - 1);\n    P.cx[n] = x;\n    P.cy[n] = y;\n    P.cr[n] = R;\n    const d = !big && Math.random() \u003c 0.7 ? P.reg[(y >> 4) * 16 + (x >> 4)] : Math.floor(Math.random() * D);\n    P.cd[n] = d * RINGS + K;\n    P.tone[n] = 0.82 + Math.random() * 0.18;\n    const cell = Math.floor((y * gh) / WH) * gw + Math.floor((x * gw) / WW);\n    gi[cell * CAP + gc[cell]++] = n;\n    n++;\n  }\n  // Each LED goes to the slice whose rim it is closest to (d - r), so\n  // touching slices meet where their circles touch; past the rim, and on the\n  // seam between two slices, is the dark ground.\n  P.s1.fill(1e9);\n  P.s2.fill(1e9);\n  P.cid.fill(-1);\n  for (let c = 0; c \u003c n; c++) {\n    const R = P.cr[c];\n    const m = Math.ceil(R + 1);\n    const K = P.cd[c] % RINGS;\n    for (let dy = -m; dy \u003c= m; dy++)\n      for (let dx = -m; dx \u003c= m; dx++) {\n        const d = Math.sqrt(dx * dx + dy * dy);\n        const s = d - R;\n        if (s > 0.5) continue;\n        const q = ((P.cy[c] + dy) & (WH - 1)) * WW + ((P.cx[c] + dx) & (WW - 1));\n        if (s \u003c P.s1[q]) {\n          P.s2[q] = P.s1[q];\n          P.s1[q] = s;\n          P.cid[q] = c;\n          P.ring[q] = Math.min(Math.round(d), K);\n          // Angle from straight up, in turns.\n          P.ang[q] = Math.atan2(dx, -dy) / TAU;\n        } else if (s \u003c P.s2[q]) P.s2[q] = s;\n      }\n  }\n  for (let q = 0; q \u003c WN; q++) if (P.cid[q] \u003c 0 || P.s2[q] - P.s1[q] \u003c 1) P.ring[q] = 255;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const size = clamp(k[2], 6, 12);\n  P.light = clamp(k[3], 0, 1);\n  P.palk = clamp(k[0], 0, 4);\n  const fresh = input.btnPressed && input.btnPressed[0];\n  if (fresh && P.size > 0) P.wipe = 0;\n  else if (P.wipe >= 0) P.wipe = P.wipe + dt * 1.4 > 1 ? -1 : P.wipe + dt * 1.4;\n  if (fresh || P.size \u003c 0) canes(P);\n  if (fresh || P.size \u003c 0 || Math.abs(size - P.size) > 0.24) {\n    P.size = size;\n    plate(P, size);\n  }\n  P.t += dt * speed;\n  P.ox += dt * speed * 2.4;\n  P.oy += dt * speed * 0.9;\n  if (P.ox >= WW) P.ox -= WW;\n  if (P.oy >= WH) P.oy -= WH;\n  // The lamp wanders over the plate on a slow figure.\n  const t = P.t + P.lph * 10;\n  P.lx = 32 + 27 * Math.sin(t * 0.26 + P.lph);\n  P.ly = 64 + 52 * Math.sin(t * 0.15);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.size \u003c 0) return;\n  // The glass of the moment, between two neighbouring sets.\n  const i0 = Math.min(3, Math.floor(P.palk));\n  let f = P.palk - i0;\n  f = clamp((f - 0.3) / 0.4, 0, 1);\n  f = f * f * (3 - 2 * f);\n  const pal = P.pal;\n  for (let s = 0; s \u003c 8; s++) {\n    for (let ch = 0; ch \u003c 3; ch++) pal[s * 3 + ch] = SETS[i0][s][ch] * (1 - f) + SETS[i0 + 1][s][ch] * f;\n    // The same glass pulled dark. Dark yellow and orange read as brown on\n    // the panel, so they darken to a deep ruby, and lime to a bottle green.\n    const r = pal[s * 3];\n    const g = pal[s * 3 + 1];\n    const b = pal[s * 3 + 2];\n    const o = (s + 8) * 3;\n    if (b > 0.3 * Math.max(r, g) || g \u003c 0.35 * r) {\n      pal[o] = r * 0.18;\n      pal[o + 1] = g * 0.18;\n      pal[o + 2] = b * 0.18;\n    } else if (g > r) {\n      pal[o] = r * 0.03;\n      pal[o + 1] = g * 0.2;\n      pal[o + 2] = g * 0.06;\n    } else {\n      pal[o] = r * 0.21;\n      pal[o + 1] = g * 0.03;\n      pal[o + 2] = r * 0.06;\n    }\n  }\n  const L = P.light;\n  const sig = 70 - 46 * L;\n  const amb = 0.92 - 0.62 * L;\n  const pool = 0.2 + 0.85 * L;\n  const glint = 0.95 + 0.5 * L;\n  // While a new plate slides in, it rides in with its leading edge.\n  const ox = Math.floor(P.ox) - (P.wipe >= 0 ? Math.floor((W + 26) * (1 - P.wipe)) : 0);\n  const oy = Math.floor(P.oy);\n  const lx = P.lx;\n  const ly = P.ly;\n  const k2 = 1 / (2 * sig * sig);\n  P.frame++;\n  for (let y = 0; y \u003c H; y++) {\n    const wy = (y + oy) & (WH - 1);\n    for (let x = 0; x \u003c W; x++) {\n      const wx = (x + ox) & (WW - 1);\n      const q = wy * WW + wx;\n      const c = P.cid[q];\n      const kk = P.ring[q];\n      const ddx = x - lx;\n      const ddy = y - ly;\n      const lit = amb + pool * Math.exp(-(ddx * ddx + ddy * ddy) * k2);\n      let r;\n      let g;\n      let b;\n      if (kk === 255) {\n        r = pal[21] * lit;\n        g = pal[22] * lit;\n        b = pal[23] * lit;\n      } else {\n        const e = P.cd[c] * RINGS + kk;\n        let code = P.ra[e];\n        const nn = P.rn[e];\n        if (nn) {\n          // Distance from the nearest petal's axis, 0 on it and 0.5 between.\n          const u = nn * P.ang[q] + P.rp[e];\n          if (Math.abs(u - Math.round(u)) * 2 >= P.rd[e]) code = P.rb[e];\n        }\n        const tl = lit * P.tone[c];\n        r = pal[code * 3] * tl;\n        g = pal[code * 3 + 1] * tl;\n        b = pal[code * 3 + 2] * tl;\n        // The domed slice throws the lamp back as a small glint on the side\n        // facing it; where, worked out once a frame for each slice in view.\n        if (P.gs[c] !== P.frame) {\n          P.gs[c] = P.frame;\n          const cxs = x + wrap(P.cx[c] - wx, WW);\n          const cys = y + wrap(P.cy[c] - wy, WH);\n          const vx = lx - cxs;\n          const vy = ly - cys;\n          const dl2 = vx * vx + vy * vy;\n          const dl = Math.sqrt(dl2) + 1e-3;\n          const off = (0.45 * P.cr[c] * Math.min(1, dl / 8)) / dl;\n          P.gx[c] = cxs + vx * off;\n          P.gy[c] = cys + vy * off;\n          P.gn[c] = glint * Math.exp(-dl2 * k2 * 1.4);\n        }\n        const hx = P.gx[c] - x;\n        const hy = P.gy[c] - y;\n        const h2 = hx * hx + hy * hy;\n        if (h2 \u003c 3 && P.gn[c] > 0.02) {\n          const gl = P.gn[c] * Math.exp(-h2 / 0.45);\n          r += 250 * gl;\n          g += 246 * gl;\n          b += 232 * gl;\n        }\n      }\n      const o = (y * W + x) * 3;\n      // The edge of the new plate runs right to left, leaning a little.\n      const e = P.wipe >= 0 ? x + y * 0.2 - (W + 26) * (1 - P.wipe) : 1;\n      if (P.wipe >= 0) {\n        if (e \u003c 0) {\n          r = P.prev[o];\n          g = P.prev[o + 1];\n          b = P.prev[o + 2];\n        } else if (e \u003c 1) {\n          r = g = b = 200;\n        }\n      }\n      // What is shown is what the next new plate slides in over; the old\n      // side only shrinks, so it keeps the frame it had when K1 was tapped.\n      if (P.wipe \u003c 0 || e >= 1) {\n        P.prev[o] = r;\n        P.prev[o + 1] = g;\n        P.prev[o + 2] = b;\n      }\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..4, Speed=0.2..3, Canes=6..12, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":4,"about":"The glass the canes are pulled from: classic Murano cobalt, canary, emerald, ruby and turquoise at 0, then ruby and gold, lagoon blues and greens, spring pinks and lemons, and violet and cyan night glass at 4."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the plate slides under the view and the lamp moves: at 2 the plate drifts about two and a half LEDs a second sideways and one down, and the lamp crosses the panel in about twelve seconds."},{"name":"Canes","min":6,"max":12,"about":"How wide the slices are: at 6 most are 5 to 7 LEDs across, with 3-LED chips in the gaps and a few 11-LED feature canes; at 12 they run up to 15 LEDs and the feature canes to 23, each showing more rings and longer petals."},{"name":"Light","min":0,"max":1,"about":"How close the lamp hangs: near 0 it is far off and lights the plate almost evenly, each slice carrying a faint glint; turned up it comes down close, throws a bright pool with hard white glints, and the rest of the plate falls dim."}],"start":[0,2,6,0.06],"measures":{"motion":1.2091,"detail":0.3373,"edges":0.8101,"complexity":1.6267,"coverage":1,"colour":0.5579,"drift":0.0871},"knobResponse":[0.1882,0.3627,0.3509,0.1412]},{"slug":"moire-rings","title":"Moire Rings","family":"wave","round":1,"note":"동심원 두 벌이 서로 지나가고, 어긋나는 자리에 아무도 그리지 않은 무늬가 생겨요.","idea":"Two sets of rings slide past each other, and where they disagree the panel draws a third shape nobody drew.","buttons":"K1 tap swaps which set of rings is drawn bright.","code":"// ===== Patternflow pattern =====\n// Title:   Moire Rings\n// Family:  wave\n// Idea:    Two sets of rings slide past each other, and where they disagree the panel draws a third shape nobody drew.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.1..6, Rings=5..16, Spread=-1..1\n//\n// Knob 1: Hue. Turns the two-colour pair around the colour wheel.\n// Knob 2: Speed. How fast the two centres orbit.\n// Knob 3: Rings. Ring spacing in LEDs; small is a fine moire, large is a few fat bands.\n// Knob 4: Spread. How far apart the two centres travel, and below 0 the second one turns the other way.\n// Buttons: K1 tap swaps which set of rings is drawn bright.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nexport function setup(params) {\n  params.phase = 0;\n  params.swap = false;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  // K1 at 0 opens on cyan rather than the red most of the study opens on.\n  params.hue = k[0] + 0.52;\n  params.speed = k[1];\n  params.spacing = k[2];\n  params.spread = k[3];\n  params.phase += dt * params.speed * 0.35;\n  if (input.btnPressed && input.btnPressed[0]) params.swap = !params.swap;\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const reach = 0.15 + Math.abs(params.spread) * 0.85;\n  // Below 0 the second centre runs the other way round.\n  const dir = params.spread \u003c 0 ? -1 : 1;\n  const ax = w / 2 + Math.cos(params.phase) * w * 0.3 * reach;\n  const ay = h / 2 + Math.sin(params.phase * 1.3) * h * 0.35 * reach;\n  const bx = w / 2 - Math.cos(params.phase * 0.8) * w * 0.3 * reach;\n  const by = h / 2 - Math.sin(params.phase * 1.1) * h * 0.35 * reach * dir;\n  const s = params.spacing;\n  const a = hsv(params.hue, 0.85, 1);\n  const b = hsv(params.hue + 0.5, 0.7, 1);\n  const front = params.swap ? b : a;\n  const back = params.swap ? a : b;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const da = Math.hypot(x - ax, y - ay) / s;\n      const db = Math.hypot(x - bx, y - by) / s;\n      const ra = da - Math.floor(da) \u003c 0.5 ? 1 : 0;\n      const rb = db - Math.floor(db) \u003c 0.5 ? 1 : 0;\n      if (ra && rb) display.setPixel(x, y, front[0], front[1], front[2]);\n      else if (ra !== rb) display.setPixel(x, y, back[0] * 0.18, back[1] * 0.18, back[2] * 0.18);\n      else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","layer":{"id":"layer-moire-rings","type":"code","name":"moire-rings","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Moire Rings\n// Family:  wave\n// Idea:    Two sets of rings slide past each other, and where they disagree the panel draws a third shape nobody drew.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.1..6, Rings=5..16, Spread=-1..1\n//\n// Knob 1: Hue. Turns the two-colour pair around the colour wheel.\n// Knob 2: Speed. How fast the two centres orbit.\n// Knob 3: Rings. Ring spacing in LEDs; small is a fine moire, large is a few fat bands.\n// Knob 4: Spread. How far apart the two centres travel, and below 0 the second one turns the other way.\n// Buttons: K1 tap swaps which set of rings is drawn bright.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nexport function setup(params) {\n  params.phase = 0;\n  params.swap = false;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  // K1 at 0 opens on cyan rather than the red most of the study opens on.\n  params.hue = k[0] + 0.52;\n  params.speed = k[1];\n  params.spacing = k[2];\n  params.spread = k[3];\n  params.phase += dt * params.speed * 0.35;\n  if (input.btnPressed && input.btnPressed[0]) params.swap = !params.swap;\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  const reach = 0.15 + Math.abs(params.spread) * 0.85;\n  // Below 0 the second centre runs the other way round.\n  const dir = params.spread \u003c 0 ? -1 : 1;\n  const ax = w / 2 + Math.cos(params.phase) * w * 0.3 * reach;\n  const ay = h / 2 + Math.sin(params.phase * 1.3) * h * 0.35 * reach;\n  const bx = w / 2 - Math.cos(params.phase * 0.8) * w * 0.3 * reach;\n  const by = h / 2 - Math.sin(params.phase * 1.1) * h * 0.35 * reach * dir;\n  const s = params.spacing;\n  const a = hsv(params.hue, 0.85, 1);\n  const b = hsv(params.hue + 0.5, 0.7, 1);\n  const front = params.swap ? b : a;\n  const back = params.swap ? a : b;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const da = Math.hypot(x - ax, y - ay) / s;\n      const db = Math.hypot(x - bx, y - by) / s;\n      const ra = da - Math.floor(da) \u003c 0.5 ? 1 : 0;\n      const rb = db - Math.floor(db) \u003c 0.5 ? 1 : 0;\n      if (ra && rb) display.setPixel(x, y, front[0], front[1], front[2]);\n      else if (ra !== rb) display.setPixel(x, y, back[0] * 0.18, back[1] * 0.18, back[2] * 0.18);\n      else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.1..6, Rings=5..16, Spread=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the two-colour pair around the colour wheel."},{"name":"Speed","min":0.1,"max":6,"about":"How fast the two centres orbit."},{"name":"Rings","min":5,"max":16,"about":"Ring spacing in LEDs; small is a fine moire, large is a few fat bands."},{"name":"Spread","min":-1,"max":1,"about":"How far apart the two centres travel, and below 0 the second one turns the other way."}],"start":[0,2,5,0.06],"measures":{"motion":1.5703,"detail":0.2108,"edges":1,"complexity":0.1822,"coverage":0.7502,"colour":0.4676,"drift":0.1626},"knobResponse":[0.2556,0.2849,0.3431,0.2821]},{"slug":"moth-lamp","title":"Moth Lamp","family":"insect","round":20,"note":"벽돌집 처마 밑 사슬에 매달린 옛 등이 흔들리고, 나방이 어둠에서 나선을 그리며 날아와 등을 돌다가 유리와 불빛 든 벽돌에 날개를 펴고 앉아요. K1 을 누르면 박쥐가 빛 속으로 날아들어 나방 한 마리를 채 가요.","idea":"An old lantern hangs on its chain under the eaves of a brick house on a summer night; moths spiral in out of the dark, circle it, bump the glass, rest on the panes and the lit bricks and flutter off, and now and then a bat takes one.","buttons":"K1 tap sends a bat after a moth; the moths that hear it dive. K2 tap makes the old lamp stutter out and strike again.","code":"// ===== Patternflow pattern =====\n// Title:   Moth Lamp\n// Family:  insect\n// Idea:    An old lantern hangs on its chain under the eaves of a brick house on a summer night; moths spiral in out of the dark, circle it, bump the glass, rest on the panes and the lit bricks and flutter off, and now and then a bat takes one.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after Fabian, Sondhi, Allen, Lin and Lin, Why flying insects gather at artificial light (Nature Communications, 2024)\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Moths=12..120, Breeze=-1..1\n//\n// Knob 1: Lamp. Sodium gold at 0, a warm old bulb, mercury blue-white, a cold LED at 1; the bluer lamps burn brighter, reach further and pull the moths in tighter.\n// Knob 2: Speed. At 2 a moth flies about twenty LEDs a second and rounds the lamp in two or three, and the lantern swings once in two seconds.\n// Knob 3: Moths. Twelve to 120; the damp nights that bring them out also haze the air, so the glow round the lamp grows with them.\n// Knob 4: Breeze. A breath of air at 0.06; either way the lantern leans and swings harder, the moths drift downwind, the clouds run faster and the ivy shivers.\n// Buttons: K1 tap sends a bat after a moth; the moths that hear it dive. K2 tap makes the old lamp stutter out and strike again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The hook, and how far down the chain the bulb burns.\nconst PX = 36;\nconst PY = 22;\nconst BV = 18.5;\n// Rows: the roof, the wall under the gutter, the pavement.\nconst SKY = 13;\nconst EAVE = 18;\nconst GY = 114;\n// The moon.\nconst MX = 52;\nconst MY = 6;\nconst MR = 3.6;\nconst MAXM = 120;\n// Where the lamp's reach gives out on the wall.\nconst E0 = 0.175;\n\n// Sodium gold, an old warm bulb, mercury blue-white, a cold LED.\nconst LAMPS = [[255, 184, 96], [255, 212, 150], [160, 224, 242], [222, 234, 255]];\n// Moths: pale buff, white, straw, tan.\nconst TINTS = [[1, 0.9, 0.72], [1, 1, 0.96], [1, 0.94, 0.6], [0.86, 0.7, 0.5]];\n// Old bricks: red, yellow stocks, a few grey ones, the ghost of limewash.\nconst BRICKS = [[0.74, 0.4, 0.3], [0.78, 0.62, 0.4], [0.5, 0.48, 0.5], [0.85, 0.8, 0.72]];\n// What each LED of the scene is.\nconst [BRICK, MORTAR, LEAF, STONE, GAP, IRON, AIR, ROOF] = [0, 1, 2, 3, 4, 5, 6, 7];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => (v = clamp((v - a) / (b - a), 0, 1)) * v * (3 - 2 * v);\nconst wrap = (a) => a - 6.2832 * Math.round(a / 6.2832);\nconst rnd = () => Math.random();\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const u = (x - xi) ** 2 * (3 - 2 * (x - xi));\n  const v = (y - yi) ** 2 * (3 - 2 * (y - yi));\n  const a = hash(xi, yi);\n  const b = hash(xi + 1, yi);\n  const c = hash(xi, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(xi + 1, yi + 1)) * u * v;\n}\n\nfunction put(buf, q, r, g, b) {\n  buf[q] = r;\n  buf[q + 1] = g;\n  buf[q + 2] = b;\n}\n\nconst dim = (buf, q, k) => put(buf, q, buf[q] * k, buf[q + 1] * k, buf[q + 2] * k);\n\nfunction build(P) {\n  const { kind, alb, dark, leaf } = P;\n  const set = (p, k, r, g, b) => {\n    kind[p] = k;\n    put(alb, p * 3, r, g, b);\n  };\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    if (y \u003c SKY) set(p, AIR, 0, 0, 0);\n    else if (y \u003c EAVE - 1) {\n      // Roof tiles, a ridge every four LEDs.\n      const s = (x + (y % 2) * 2) % 4 === 0 ? 0.12 : 0.28 + 0.06 * hash(x >> 2, y);\n      set(p, ROOF, s * 1.1, s * 0.75, s * 0.65);\n    } else if (y === EAVE - 1) set(p, IRON, 0.6, 0.55, 0.5);\n    else if (y \u003c GY) {\n      // Bricks six LEDs long and two high, each course set over by three.\n      // The joints are worn back deep and stay in shadow.\n      const course = Math.floor(y / 3);\n      const off = course % 2 ? 3 : 0;\n      const col = Math.floor((x + off) / 7);\n      const kb = hash(col, course + 70);\n      const bc = BRICKS[kb \u003c 0.55 ? 0 : kb \u003c 0.78 ? 1 : kb \u003c 0.88 ? 2 : 3];\n      const t = (0.7 + 0.3 * hash(col, course + 50) - (hash(col, course + 90) \u003c 0.12 ? 0.25 : 0)) * (0.7 + 0.6 * hash(p, 3));\n      if (y % 3 === 2 || (x + off) % 7 === 6) set(p, MORTAR, 0.17, 0.16, 0.15);\n      else set(p, BRICK, bc[0] * t, bc[1] * t, bc[2] * t);\n    } else {\n      // Setts, the rows growing toward us.\n      const d = y - GY;\n      const rows = [0, 2, 4, 7, 10, 14];\n      let r = 0;\n      while (r \u003c 4 && d >= rows[r + 1]) r++;\n      const v = (d - rows[r]) / (rows[r + 1] - rows[r]);\n      const sw = 5 + r;\n      const xo = (r % 2) * (sw >> 1);\n      const u = ((x + xo) % sw) / sw;\n      const s = (0.6 + 0.25 * hash(Math.floor((x + xo) / sw), r + 20)) * clamp(1 - 1.4 * ((u - 0.42) ** 2 + (v - 0.35) ** 2), 0.4, 1);\n      if (v > 0.8 || u > 0.84) set(p, GAP, 0.1, 0.1, 0.1);\n      else set(p, STONE, 0.66 * s, 0.64 * s, 0.6 * s);\n    }\n  }\n  // Ivy up the wall toward the lamp, a leaf every third row.\n  for (const [x0, y0, x1, y1, s] of [[59, GY, 50, 34, 0], [56, 76, 44, 50, 1], [61, 56, 63, 30, 2]]) {\n    const len = Math.abs(y1 - y0);\n    for (let i = 0; i \u003c= len; i++) {\n      const y = Math.round(y0 + ((y1 - y0) * i) / len);\n      const x = x0 + ((x1 - x0) * i) / len + 1.6 * Math.sin(i * 0.31 + s);\n      if (Math.round(x) \u003c W) set(y * W + Math.round(x), LEAF, 0.22, 0.3, 0.12);\n      if (i % 3) continue;\n      const lx = x + ((i / 3) % 2 ? 2.2 : -2.2);\n      const id = i * 7 + s * 131;\n      const big = 1.3 + 0.7 * hash(id, 4);\n      const g = 0.75 + 0.25 * hash(id, 5);\n      for (let dy = -2; dy \u003c= 2; dy++)\n        for (let dx = -3; dx \u003c= 3; dx++) {\n          const px = Math.round(lx + dx);\n          const py = y - 1 + dy;\n          if (px \u003c 0 || px >= W || py \u003c EAVE || py >= GY || (dx / big) ** 2 + ((dy + 0.3) / (big * 0.8)) ** 2 > 1) continue;\n          set(py * W + px, LEAF, 0.26 * g, 0.62 * g, 0.2 * g);\n          leaf[py * W + px] = 6.28 * hash(id, 6) + 0.01;\n        }\n    }\n  }\n  // The bracket: arm, brace, scroll, wall plate.\n  const iron = (x, y) => set(y * W + x, IRON, 0.6, 0.55, 0.5);\n  for (const [x0, y0, x1, y1] of [[5, 22, 36, 21], [5, 23, 36, 22], [6, 31, 24, 23]]) {\n    const n = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0));\n    for (let i = 0; i \u003c= n; i++) iron(Math.round(x0 + ((x1 - x0) * i) / n), Math.round(y0 + ((y1 - y0) * i) / n));\n  }\n  for (let a = 0; a \u003c 11; a += 0.15) iron(Math.round(14 + (3.6 - 0.3 * a) * Math.cos(a)), Math.round(26.5 - (3.6 - 0.3 * a) * Math.sin(a)));\n  for (let y = 19; y \u003c 34; y++) for (let x = 3; x \u003c 6; x++) iron(x, y);\n  // The night: blue, the strongest channel, is a smooth glow with a little\n  // grain and the other two scatter under it, never past 24.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const k = kind[p];\n    let sky = 17 + 3.5 * Math.sin(x * 0.07 + y * 0.045) + 2.5 * Math.sin(y * 0.031 - x * 0.05 + 1);\n    if (k === GAP || k === IRON || k === ROOF) sky -= 5;\n    if (k === AIR) sky = 7 + 0.6 * y;\n    const b = clamp(Math.round(sky) + Math.floor(7 * hash(p, 33)) - 3, 1, 24);\n    for (let c = 0; c \u003c 3; c++) P.jit[p * 3 + c] = hash(p, 40 + c) - 0.1;\n    put(dark, p * 3, Math.floor((b + 1) * hash(p, 30) * (k === AIR ? 0.7 : 1)), Math.floor((b + 1) * hash(p, 32) * (k === AIR ? 0.8 : 1)), b);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.leaf = new Float32Array(N);\n  for (const k of [\"alb\", \"dark\", \"buf\", \"jit\"]) P[k] = new Float32Array(N * 3);\n  for (const k of [\"x\", \"y\", \"h\", \"sp\", \"t\", \"ph\", \"fw\", \"al\", \"bias\", \"u\", \"v\", \"wait\"]) P[k] = new Float32Array(MAXM);\n  for (const k of [\"mode\", \"big\", \"tint\"]) P[k] = new Uint8Array(MAXM);\n  P.kind = new Uint8Array(N);\n  P.side = new Int8Array(MAXM);\n  build(P);\n  for (let i = 0; i \u003c MAXM; i++) P.wait[i] = rnd() * 3;\n  Object.assign(P, { T: 0, started: false, om: 0, cloud: 0, flick: -1, lamp: 1, gain: 1, reach: E0, damp: 0, breeze: 0, bat: null, lc: [1, 0.7, 0.4] });\n  P.nextBat = 16 + 10 * rnd();\n  aim(P, 0);\n}\n\n// Where the lantern hangs now: the bulb, and the lantern's own axes.\nfunction aim(P, th) {\n  P.th = th;\n  P.c = Math.cos(th);\n  P.s = Math.sin(th);\n  P.bx = PX + BV * P.s;\n  P.by = PY + BV * P.c;\n}\n\n// A point in the lantern's frame (u across, v down from the hook) on the panel.\nconst lx = (P, u, v) => PX + u * P.c + v * P.s;\nconst ly = (P, u, v) => PY - u * P.s + v * P.c;\n\n// A moth comes in from an edge, or is near the lamp when the night opens.\nfunction arrive(P, i, near) {\n  const { x: X, y: Y, h: A } = P;\n  P.mode[i] = 1;\n  P.side[i] = rnd() \u003c 0.5 ? -1 : 1;\n  P.big[i] = rnd() \u003c 0.25 ? 1 : 0;\n  P.tint[i] = Math.floor(rnd() * 4);\n  P.al[i] = 0.65 + 0.35 * rnd();\n  P.sp[i] = 0.8 + 0.4 * rnd();\n  P.fw[i] = 7 + 5 * rnd();\n  P.bias[i] = 0.15 + 0.35 * rnd();\n  if (near) {\n    const a = rnd() * 6.28;\n    const r = 7 + 22 * rnd();\n    X[i] = P.bx + r * Math.cos(a);\n    Y[i] = P.by + r * Math.sin(a) * 1.2;\n    A[i] = a + P.side[i] * 1.6;\n    return;\n  }\n  const e = rnd();\n  X[i] = e \u003c 0.35 ? -4 : e \u003c 0.7 ? W + 4 : W * rnd();\n  Y[i] = e \u003c 0.7 ? 20 + 90 * rnd() : H + 4;\n  A[i] = Math.atan2(P.by - Y[i], P.bx - X[i]) + (rnd() - 0.5);\n}\n\nfunction land(P, i, mode) {\n  P.mode[i] = mode;\n  P.t[i] = mode === 2 ? 2 + 4 * rnd() : 3 + 9 * rnd();\n  const dx = P.x[i] - PX;\n  const dy = P.y[i] - PY;\n  // On the glass it is kept in the lantern's frame, so it swings with it.\n  if (mode === 2) {\n    P.u[i] = clamp(dx * P.c - dy * P.s, -4, 4);\n    P.v[i] = clamp(dx * P.s + dy * P.c, 15, 22);\n  } else {\n    P.x[i] = Math.round(P.x[i]);\n    P.y[i] = Math.round(P.y[i]);\n  }\n}\n\nfunction takeOff(P, i, away) {\n  if (P.mode[i] === 2) {\n    P.x[i] = lx(P, P.u[i], P.v[i]);\n    P.y[i] = ly(P, P.u[i], P.v[i]);\n  }\n  P.mode[i] = away ? 4 : 1;\n  P.t[i] = away ? 0.6 + 2 * rnd() : 0;\n  P.h[i] = Math.atan2(P.y[i] - P.by, P.x[i] - P.bx) + (rnd() - 0.5) * 1.2;\n}\n\nfunction step(P, dt, want, pull, wind) {\n  const { mode: M, x: X, y: Y, h: A, t: T, ph: F, side: D, wait: Q } = P;\n  const lit = P.lamp > 0.4;\n  let onGlass = 0;\n  for (let i = 0; i \u003c MAXM; i++) if (M[i] === 2) onGlass++;\n  for (let i = 0; i \u003c MAXM; i++) {\n    let m = M[i];\n    if (m === 0) {\n      if (i \u003c want && (Q[i] -= dt) \u003c= 0) arrive(P, i, false);\n      continue;\n    }\n    if (i >= want && m !== 4) {\n      takeOff(P, i, true);\n      T[i] = 99;\n      m = 4;\n    }\n    F[i] += P.fw[i] * dt * 6.28;\n    if (m === 2 || m === 3) {\n      if ((T[i] -= dt) \u003c= 0) takeOff(P, i, rnd() \u003c 0.4);\n      continue;\n    }\n    const dx = P.bx - X[i];\n    const dy = P.by - Y[i];\n    const r = Math.sqrt(dx * dx + dy * dy) + 0.01;\n    let h = A[i];\n    // Each moth keeps its back to the light. Far off that steers it straight\n    // in; near, it holds the lamp abeam and so circles it, spiralling in by\n    // its bias until it bumps the glass.\n    if (m === 1 && lit) h += clamp(wrap(Math.atan2(dy, dx) - D[i] * (1.5708 * smooth(46, 12, r) - P.bias[i] * pull) - h), -5 * dt, 5 * dt);\n    if (m === 4 && (T[i] -= dt) \u003c= 0) M[i] = m = 1;\n    // It jinks, and now and then loops.\n    h += (rnd() - 0.5) * 7 * Math.sqrt(dt);\n    if (rnd() \u003c dt * 0.25) h += D[i] * 2.5;\n    const sp = 20 * P.sp[i] * (0.75 + 0.5 * Math.abs(Math.sin(F[i] * 0.05 + i)));\n    X[i] += Math.cos(h) * sp * dt + wind * dt;\n    Y[i] += Math.sin(h) * sp * dt;\n    A[i] = h;\n    if (lit && m === 1 && r \u003c 6) {\n      // A bump on the glass: it bounces off, or settles on the pane.\n      if (onGlass \u003c 2 && rnd() \u003c 0.2) {\n        land(P, i, 2);\n        onGlass++;\n      } else A[i] = Math.atan2(-dy, -dx) + (rnd() - 0.5) * 2;\n    } else if (lit && m === 1 && r > 9 && r \u003c 26 && Y[i] > EAVE + 1 && rnd() \u003c dt * 0.035) land(P, i, 3);\n    if (X[i] \u003c -8 || X[i] > W + 8 || Y[i] \u003c -8 || Y[i] > H + 8) {\n      M[i] = 0;\n      Q[i] = 0.5 + 3 * rnd();\n    }\n  }\n}\n\n// The flying moth nearest a point; one below the lamp counts `low` nearer.\nfunction prey(P, x, y, low, best) {\n  let q = -1;\n  for (let i = 0; i \u003c MAXM; i++) {\n    const d = P.mode[i] === 1 ? Math.hypot(P.x[i] - x, P.y[i] - y) - (P.y[i] > P.by + 4 ? low : 0) : 1e9;\n    if (d \u003c best) [best, q] = [d, i];\n  }\n  return q;\n}\n\n// The bat comes in low across the lit wall for a moth, one below the lamp first.\nfunction startBat(P) {\n  const x = rnd() \u003c 0.5 ? -8 : W + 8;\n  const y = 60 + 20 * rnd();\n  P.bat = { x, y, h: Math.atan2(P.by + 22 - y, P.bx - x), t: 0, prey: prey(P, P.bx, P.by, 8, 1e9), ph: 0 };\n}\n\nfunction flyBat(P, dt) {\n  const { bat: b, mode: M, x: X, y: Y } = P;\n  b.t += dt;\n  b.ph += dt * 44;\n  // If its moth settles it turns for the nearest one still flying.\n  if (b.prey >= 0 && M[b.prey] !== 1) b.prey = prey(P, b.x, b.y, 0, 30);\n  const q = b.prey;\n  if (q >= 0 && b.t > 0.5) {\n    b.h += clamp(wrap(Math.atan2(Y[q] - b.y, X[q] - b.x) - b.h), -6 * dt, 6 * dt);\n    if (Math.hypot(X[q] - b.x, Y[q] - b.y) \u003c 2.2) {\n      M[q] = 0;\n      P.wait[q] = 2 + 4 * rnd();\n      b.prey = -1;\n    }\n  } else b.h += 0.8 * dt;\n  b.x += Math.cos(b.h) * 45 * dt;\n  b.y += Math.sin(b.h) * 45 * dt;\n  // Moths with ears hear it coming and drop.\n  for (let i = 0; i \u003c MAXM; i++)\n    if (M[i] === 1 && i !== b.prey && Math.hypot(X[i] - b.x, Y[i] - b.y) \u003c 12) {\n      M[i] = 4;\n      P.t[i] = 0.8;\n      P.h[i] = 1.07 + rnd();\n    }\n  if (b.t > 4 || (b.t > 0.4 && (b.x \u003c -12 || b.x > W + 12 || b.y \u003c -12 || b.y > H + 12))) P.bat = null;\n}\n\n// The lantern swings on its chain toward where the wandering air leans it.\nfunction swing(P, dt, breeze) {\n  const t = P.T;\n  const gust = (0.075 + 0.06 * Math.abs(breeze)) * (Math.sin(t * 0.83) + 0.6 * Math.sin(t * 1.37 + 2) + 0.4 * Math.sin(t * 0.29 + 4));\n  P.om += (-9 * (P.th - 0.17 * breeze - gust) - 0.8 * P.om) * dt;\n  aim(P, P.th + P.om * dt);\n  P.cloud += dt * (0.08 + 0.1 * breeze);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 12, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const want = Math.round(clamp(k[2], 12, MAXM));\n  const breeze = (P.breeze = clamp(k[3], -1, 1));\n  // The lamp's colour; the bluer ones burn brighter and reach further.\n  const j = Math.min(2, Math.floor(hue * 3));\n  const f = hue * 3 - j;\n  for (let c = 0; c \u003c 3; c++) P.lc[c] = (LAMPS[j][c] * (1 - f) + LAMPS[j + 1][c] * f) / 255;\n  const blue = smooth(0.25, 0.8, hue);\n  const pull = 0.7 + 0.8 * smooth(0.3, 0.75, hue);\n  P.gain = 1 + 0.35 * blue;\n  P.reach = E0 * (1 - 0.3 * blue);\n  P.damp = (want - 12) / (MAXM - 12);\n  const wind = breeze * 7;\n  const btn = input.btnPressed || [];\n  if (btn[0] && !P.bat) startBat(P);\n  if (btn[1] && P.flick \u003c 0) P.flick = 0;\n  if (!P.started) {\n    // Five seconds of the night run before it opens.\n    P.started = true;\n    for (let i = 0; i \u003c want; i++) {\n      arrive(P, i, rnd() \u003c 0.8);\n      if (rnd() \u003c 0.2) land(P, i, 3);\n    }\n    for (let n = 0; n \u003c 150; n++) {\n      P.T += 1 / 30;\n      swing(P, 1 / 30, breeze);\n      step(P, 1 / 30, want, pull, wind);\n    }\n  }\n  const st = dt * speed;\n  P.T += st;\n  swing(P, st, breeze);\n  // The old lamp wavers; after K2 it stutters out and strikes again.\n  let lamp = 1 + 0.07 * Math.sin(P.T * 1.3) + 0.05 * Math.sin(P.T * 3.1 + 1);\n  if (P.flick >= 0) {\n    const t = (P.flick += dt);\n    lamp *= t \u003c 0.1 ? 0.2 : t \u003c 0.2 ? 1 : t \u003c 0.3 ? 0.1 : t \u003c 0.45 ? 0.7 : t \u003c 1.6 ? 0 : smooth(1.6, 3.4, t);\n    if (t > 3.4) P.flick = -1;\n  }\n  P.lamp = lamp;\n  if (P.T > P.nextBat && !P.bat) {\n    startBat(P);\n    P.nextBat = P.T + 18 + 20 * rnd();\n  }\n  if (P.bat) flyBat(P, st);\n  step(P, st, want, pull, wind);\n}\n\n// Light on the wall at a point, after the eye. A reflector under the cap\n// throws most of it down, the cap shades the wall above, less to the sides,\n// and there is a steep shoulder where the lamp's reach gives out.\nfunction wallLight(P, x, y, G) {\n  const dx = x - P.bx;\n  const dy = y - P.by;\n  const a = dx * P.c - dy * P.s;\n  const b = dx * P.s + dy * P.c;\n  const r2 = a * a + b * b;\n  const cd = b > 0 ? (b * b) / (r2 + 1) : 0;\n  const q = 1 + r2 / 256;\n  const l = (0.06 + 0.94 * cd * cd) / (q * Math.sqrt(q));\n  if (l \u003c= P.reach * P.reach) return 0;\n  const s = Math.sqrt(l * (0.12 + 0.88 * clamp(0.5 + (b + 6 + 0.45 * Math.abs(a)) / (2 + 0.08 * Math.sqrt(r2)), 0, 1))) - P.reach;\n  return s > 0 ? Math.pow(s, 0.7) * G : 0;\n}\n\n// Light on a moth or the iron at r from the bulb.\nconst near = (P, r) => (1.5 * P.lamp) / (1 + (r * r) / 121);\n\nfunction splat(buf, x, y, k, col) {\n  const x0 = Math.floor(x);\n  const y0 = Math.floor(y);\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const w = k * (i ? x - x0 : 1 - x + x0) * (j ? y - y0 : 1 - y + y0);\n      const q = (py * W + px) * 3;\n      put(buf, q, buf[q] + col[0] * w, buf[q + 1] + col[1] * w, buf[q + 2] + col[2] * w);\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const { buf, alb, dark, kind, leaf, lc, lamp, jit } = P;\n  const G = 2.5 * lamp * P.gain;\n  // The lantern's place, in a small object the loops read fast.\n  const L = (P.L = { bx: P.bx, by: P.by, c: P.c, s: P.s, reach: P.reach });\n  // The damp air glows round the glass.\n  const hk = lamp * P.gain * (26 + 60 * P.damp);\n  const hr = 1 / (30 + 140 * P.damp);\n  const gfar = (hk / 1.5 - 1) / hr;\n  // Clouds run past the moon, lit by it.\n  const cloud = (x, y) => smooth(0.45, 0.75, 0.6 * noise(x * 0.06 + P.cloud, y * 0.25 + 3) + 0.4 * noise((x * 0.06 + P.cloud) * 2.3 + 7, (y * 0.25 + 3) * 2.1 + 5));\n  const veil = cloud(MX, MY);\n  // The pool of light on the setts, under the lantern's axis.\n  const pcx = P.bx + ((GY - P.by) * P.s) / P.c;\n  const flut = 0.15 + 0.5 * Math.abs(P.breeze);\n  const T5 = P.T * 5;\n  const [lc0, lc1, lc2] = lc;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const q = p * 3;\n    if (y \u003c SKY) {\n      const dm = (x - MX) ** 2 + (y - MY) ** 2;\n      let s = cloud(x, y) * (8 + 80 / (1 + dm / 70)) + (36 * (1 - 0.6 * veil)) / (1 + dm / 12);\n      if (dm \u003c MR * MR) s += 200 * (1 - 0.75 * veil) * (1 - (0.15 * Math.sqrt(dm)) / MR);\n      put(buf, q, dark[q] + 0.8 * s, dark[q + 1] + 0.86 * s, dark[q + 2] + s);\n      continue;\n    }\n    const k = kind[p];\n    let v;\n    if (y \u003c GY) {\n      v = wallLight(L, x + 0.5, y + 0.5, G);\n      if (k === LEAF) v *= leaf[p] ? 1.5 + flut * Math.sin(T5 + leaf[p]) : 1.5;\n      else if (k === IRON) v = kind[p + W] !== IRON ? 0.45 * near(P, Math.hypot(x - P.bx, y - P.by)) : 0;\n    } else {\n      const ex = (x - pcx) / 13;\n      const ez = (y - GY - 6) / 6;\n      v = lamp * Math.max(0, 0.75 * Math.exp(-ex * ex - ez * ez) - 0.02) * (0.7 + 0.3 * smooth(GY, GY + 4, y));\n    }\n    const d2 = (x + 0.5 - L.bx) ** 2 + (y + 0.5 - L.by) ** 2;\n    const glow = d2 \u003c gfar ? hk / (1 + d2 * hr) - 1.5 : 0;\n    v *= 255;\n    buf[q] = dark[q] + (alb[q] * v + glow) * lc0;\n    buf[q + 1] = dark[q + 1] + (alb[q + 1] * v + glow) * lc1;\n    buf[q + 2] = dark[q + 2] + (alb[q + 2] * v + glow) * lc2;\n  }\n  drawLantern(P);\n  drawMoths(P);\n  if (P.bat) drawBat(P);\n  // The weaker channels scatter up a little, under the strongest.\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    let r = knee(buf[q]);\n    let g = knee(buf[q + 1]);\n    let b = knee(buf[q + 2]);\n    const m = Math.max(r, g, b);\n    const j = Math.min(50, 0.5 * m);\n    if (r \u003c m) r = Math.min(m - 1, r + j * jit[q]);\n    if (g \u003c m) g = Math.min(m - 1, g + j * jit[q + 1]);\n    if (b \u003c m) b = Math.min(m - 1, b + j * jit[q + 2]);\n    display.setPixel(p % W, (p / W) | 0, r, g, b);\n  }\n}\n\n// The lantern in its own frame: chain, knob, cap with its rim lit from inside,\n// glass brightest round the bulb, base and finial.\nfunction drawLantern(P) {\n  const { buf, lc, lamp } = P;\n  for (let y = PY - 1; y \u003c PY + 32; y++)\n    for (let x = PX - 14; x \u003c PX + 14; x++) {\n      const dx = x + 0.5 - PX;\n      const dy = y + 0.5 - PY;\n      const u = dx * P.c - dy * P.s;\n      const v = dx * P.s + dy * P.c;\n      const au = Math.abs(u);\n      const q = (y * W + x) * 3;\n      let e = -1;\n      if (v >= 0 && v \u003c 6 && au \u003c 0.6) e = 6 + near(P, BV - v) * (Math.floor(v) % 2 ? 40 : 18);\n      else if (v >= 6 && v \u003c 8 && au \u003c 1.3) e = 12;\n      else if (v >= 8 && v \u003c 12.5 && au \u003c 1.5 + (v - 8) * 1.25) {\n        const rim = v > 11.5 ? 0.5 * lamp : 0.03;\n        put(buf, q, 18 + 255 * lc[0] * rim, 16 + 255 * lc[1] * rim, 14 + 255 * lc[2] * rim);\n      } else if (v >= 12.5 && v \u003c 24 && au \u003c 6 - (v - 12.5) * 0.15) {\n        if (au > 5.1 - (v - 12.5) * 0.15 || au \u003c 0.45 || v > 22.8) e = 20;\n        else {\n          const gl = Math.exp(-(u * u) / 14 - ((v - BV) * (v - BV)) / 20);\n          const s = lamp * (0.62 + 0.45 * gl);\n          const t = gl * lamp;\n          put(buf, q, 255 * Math.min(1.2, lc[0] * s + 0.25 * t), 255 * Math.min(1.2, lc[1] * s + 0.2 * t), 255 * Math.min(1.2, lc[2] * s + 0.15 * t));\n        }\n      } else if (v >= 24 && v \u003c 25.5 && au \u003c 3.8) e = 16;\n      else if (v >= 25.5 && v \u003c 27.5 && au \u003c 1) e = 13;\n      if (e >= 0) put(buf, q, e, e, e);\n    }\n}\n\nfunction drawMoths(P) {\n  const { buf, lc, mode: M, x: X, y: Y, u: U, v: V, ph: F, big: B } = P;\n  for (let i = 0; i \u003c MAXM; i++) {\n    const m = M[i];\n    if (!m) continue;\n    const x = m === 2 ? lx(P, U[i], V[i]) : X[i];\n    const y = m === 2 ? ly(P, U[i], V[i]) : Y[i];\n    const r = Math.hypot(x - P.bx, y - P.by);\n    const tn = TINTS[P.tint[i]];\n    // In flight it is nearer the bulb than the wall and shines brighter; at\n    // rest it is lit as the wall is.\n    const L = (m === 3 ? 1.25 * wallLight(P.L, x, y, 2.5 * P.lamp * P.gain) : 1.8 * near(P, r)) * P.al[i] * 255;\n    const col = [L * tn[0] * lc[0], L * tn[1] * lc[1], L * tn[2] * lc[2]];\n    if (m === 2 || m === 3) {\n      // At rest: dark on the glass; on the wall lit as the bricks, with a\n      // shadow a step out from the lamp.\n      const xi = Math.round(x);\n      const yi = Math.round(y);\n      const flick = Math.sin(F[i] * 0.3) > 0.97 ? 0.6 : 1;\n      // The wings swept back in a triangle from the head, the body dimmer.\n      const R = 1 + B[i];\n      for (let oy = -R; oy \u003c 2; oy++)\n        for (let ox = -oy - R; ox \u003c= oy + R; ox++) {\n          const px = xi + ox;\n          const py = yi + oy;\n          if ((oy === 1 && !ox) || px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n          const q = (py * W + px) * 3;\n          const a = (ox ? 1 - 0.06 * Math.abs(ox) : 0.72) * flick;\n          if (m === 2) dim(buf, q, ox ? 0.35 : 0.15);\n          else put(buf, q, Math.max(buf[q] * 0.85, col[0] * a), Math.max(buf[q + 1] * 0.85, col[1] * a), Math.max(buf[q + 2] * 0.85, col[2] * a));\n        }\n      const sx = xi + Math.round(((x - P.bx) / (r + 0.01)) * 1.4);\n      const sy = yi + Math.round(((y - P.by) / (r + 0.01)) * 1.4) + 1;\n      if (m === 3 && sx >= 0 && sx \u003c W && sy >= EAVE && sy \u003c GY) dim(buf, (sy * W + sx) * 3, 0.5);\n      continue;\n    }\n    // In flight: the body and two wings beating, fore and hind.\n    const o = Math.abs(Math.sin(F[i]));\n    const nx = -Math.sin(P.h[i]);\n    const ny = Math.cos(P.h[i]);\n    const span = (1.3 + 0.6 * B[i]) * (0.4 + 0.6 * o);\n    const wv = 0.3 + 0.7 * o;\n    splat(buf, x - 0.5, y - 0.5, 0.6, col);\n    for (const sd of [1, -1]) {\n      const ax = x - 0.5 + sd * nx * span;\n      const ay = y - 0.5 + sd * ny * span;\n      splat(buf, ax + ny * 0.4, ay - nx * 0.4, wv, col);\n      splat(buf, ax * 0.6 + (x - 0.5) * 0.4 - ny * 0.5, ay * 0.6 + (y - 0.5) * 0.4 + nx * 0.5, wv * 0.6, col);\n    }\n  }\n}\n\n// The bat: dark, wings beating, the light glowing through them near the lamp.\nfunction drawBat(P) {\n  const { buf, lc } = P;\n  const b = P.bat;\n  const lit = near(P, Math.hypot(b.x - P.bx, b.y - P.by)) * 0.6 * 255;\n  for (let dx = -5; dx \u003c= 5; dx++) {\n    const ad = Math.abs(dx);\n    const lift = Math.sin(b.ph) * (ad - 1) * 0.7;\n    const y1 = ad > 1 ? Math.round(-lift + (ad \u003c 4 ? 1 : 0.4) - (ad % 2 ? 0 : 0.5)) : 1;\n    for (let dy = ad > 1 ? Math.round(-lift - 0.3) : ad === 1 ? -2 : -1; dy \u003c= y1; dy++) {\n      const px = Math.round(b.x + dx);\n      const py = Math.round(b.y + dy);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const q = (py * W + px) * 3;\n      const k = ad > 1 ? lit : lit * 0.3;\n      put(buf, q, buf[q] * 0.1 + k * lc[0] * 0.85, buf[q + 1] * 0.1 + k * lc[1] * 0.42, buf[q + 2] * 0.1 + k * lc[2] * 0.25);\n    }\n  }\n}\n\n// Where the light piles up it rolls off instead of clipping flat.\nconst knee = (c) => (c \u003c 180 ? c : 180 + 75 * (1 - Math.exp(-(c - 180) / 75)));\n","layer":{"id":"layer-moth-lamp","type":"code","name":"moth-lamp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Moth Lamp\n// Family:  insect\n// Idea:    An old lantern hangs on its chain under the eaves of a brick house on a summer night; moths spiral in out of the dark, circle it, bump the glass, rest on the panes and the lit bricks and flutter off, and now and then a bat takes one.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after Fabian, Sondhi, Allen, Lin and Lin, Why flying insects gather at artificial light (Nature Communications, 2024)\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Speed=0.2..3, Moths=12..120, Breeze=-1..1\n//\n// Knob 1: Lamp. Sodium gold at 0, a warm old bulb, mercury blue-white, a cold LED at 1; the bluer lamps burn brighter, reach further and pull the moths in tighter.\n// Knob 2: Speed. At 2 a moth flies about twenty LEDs a second and rounds the lamp in two or three, and the lantern swings once in two seconds.\n// Knob 3: Moths. Twelve to 120; the damp nights that bring them out also haze the air, so the glow round the lamp grows with them.\n// Knob 4: Breeze. A breath of air at 0.06; either way the lantern leans and swings harder, the moths drift downwind, the clouds run faster and the ivy shivers.\n// Buttons: K1 tap sends a bat after a moth; the moths that hear it dive. K2 tap makes the old lamp stutter out and strike again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The hook, and how far down the chain the bulb burns.\nconst PX = 36;\nconst PY = 22;\nconst BV = 18.5;\n// Rows: the roof, the wall under the gutter, the pavement.\nconst SKY = 13;\nconst EAVE = 18;\nconst GY = 114;\n// The moon.\nconst MX = 52;\nconst MY = 6;\nconst MR = 3.6;\nconst MAXM = 120;\n// Where the lamp's reach gives out on the wall.\nconst E0 = 0.175;\n\n// Sodium gold, an old warm bulb, mercury blue-white, a cold LED.\nconst LAMPS = [[255, 184, 96], [255, 212, 150], [160, 224, 242], [222, 234, 255]];\n// Moths: pale buff, white, straw, tan.\nconst TINTS = [[1, 0.9, 0.72], [1, 1, 0.96], [1, 0.94, 0.6], [0.86, 0.7, 0.5]];\n// Old bricks: red, yellow stocks, a few grey ones, the ghost of limewash.\nconst BRICKS = [[0.74, 0.4, 0.3], [0.78, 0.62, 0.4], [0.5, 0.48, 0.5], [0.85, 0.8, 0.72]];\n// What each LED of the scene is.\nconst [BRICK, MORTAR, LEAF, STONE, GAP, IRON, AIR, ROOF] = [0, 1, 2, 3, 4, 5, 6, 7];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => (v = clamp((v - a) / (b - a), 0, 1)) * v * (3 - 2 * v);\nconst wrap = (a) => a - 6.2832 * Math.round(a / 6.2832);\nconst rnd = () => Math.random();\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const u = (x - xi) ** 2 * (3 - 2 * (x - xi));\n  const v = (y - yi) ** 2 * (3 - 2 * (y - yi));\n  const a = hash(xi, yi);\n  const b = hash(xi + 1, yi);\n  const c = hash(xi, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(xi + 1, yi + 1)) * u * v;\n}\n\nfunction put(buf, q, r, g, b) {\n  buf[q] = r;\n  buf[q + 1] = g;\n  buf[q + 2] = b;\n}\n\nconst dim = (buf, q, k) => put(buf, q, buf[q] * k, buf[q + 1] * k, buf[q + 2] * k);\n\nfunction build(P) {\n  const { kind, alb, dark, leaf } = P;\n  const set = (p, k, r, g, b) => {\n    kind[p] = k;\n    put(alb, p * 3, r, g, b);\n  };\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    if (y \u003c SKY) set(p, AIR, 0, 0, 0);\n    else if (y \u003c EAVE - 1) {\n      // Roof tiles, a ridge every four LEDs.\n      const s = (x + (y % 2) * 2) % 4 === 0 ? 0.12 : 0.28 + 0.06 * hash(x >> 2, y);\n      set(p, ROOF, s * 1.1, s * 0.75, s * 0.65);\n    } else if (y === EAVE - 1) set(p, IRON, 0.6, 0.55, 0.5);\n    else if (y \u003c GY) {\n      // Bricks six LEDs long and two high, each course set over by three.\n      // The joints are worn back deep and stay in shadow.\n      const course = Math.floor(y / 3);\n      const off = course % 2 ? 3 : 0;\n      const col = Math.floor((x + off) / 7);\n      const kb = hash(col, course + 70);\n      const bc = BRICKS[kb \u003c 0.55 ? 0 : kb \u003c 0.78 ? 1 : kb \u003c 0.88 ? 2 : 3];\n      const t = (0.7 + 0.3 * hash(col, course + 50) - (hash(col, course + 90) \u003c 0.12 ? 0.25 : 0)) * (0.7 + 0.6 * hash(p, 3));\n      if (y % 3 === 2 || (x + off) % 7 === 6) set(p, MORTAR, 0.17, 0.16, 0.15);\n      else set(p, BRICK, bc[0] * t, bc[1] * t, bc[2] * t);\n    } else {\n      // Setts, the rows growing toward us.\n      const d = y - GY;\n      const rows = [0, 2, 4, 7, 10, 14];\n      let r = 0;\n      while (r \u003c 4 && d >= rows[r + 1]) r++;\n      const v = (d - rows[r]) / (rows[r + 1] - rows[r]);\n      const sw = 5 + r;\n      const xo = (r % 2) * (sw >> 1);\n      const u = ((x + xo) % sw) / sw;\n      const s = (0.6 + 0.25 * hash(Math.floor((x + xo) / sw), r + 20)) * clamp(1 - 1.4 * ((u - 0.42) ** 2 + (v - 0.35) ** 2), 0.4, 1);\n      if (v > 0.8 || u > 0.84) set(p, GAP, 0.1, 0.1, 0.1);\n      else set(p, STONE, 0.66 * s, 0.64 * s, 0.6 * s);\n    }\n  }\n  // Ivy up the wall toward the lamp, a leaf every third row.\n  for (const [x0, y0, x1, y1, s] of [[59, GY, 50, 34, 0], [56, 76, 44, 50, 1], [61, 56, 63, 30, 2]]) {\n    const len = Math.abs(y1 - y0);\n    for (let i = 0; i \u003c= len; i++) {\n      const y = Math.round(y0 + ((y1 - y0) * i) / len);\n      const x = x0 + ((x1 - x0) * i) / len + 1.6 * Math.sin(i * 0.31 + s);\n      if (Math.round(x) \u003c W) set(y * W + Math.round(x), LEAF, 0.22, 0.3, 0.12);\n      if (i % 3) continue;\n      const lx = x + ((i / 3) % 2 ? 2.2 : -2.2);\n      const id = i * 7 + s * 131;\n      const big = 1.3 + 0.7 * hash(id, 4);\n      const g = 0.75 + 0.25 * hash(id, 5);\n      for (let dy = -2; dy \u003c= 2; dy++)\n        for (let dx = -3; dx \u003c= 3; dx++) {\n          const px = Math.round(lx + dx);\n          const py = y - 1 + dy;\n          if (px \u003c 0 || px >= W || py \u003c EAVE || py >= GY || (dx / big) ** 2 + ((dy + 0.3) / (big * 0.8)) ** 2 > 1) continue;\n          set(py * W + px, LEAF, 0.26 * g, 0.62 * g, 0.2 * g);\n          leaf[py * W + px] = 6.28 * hash(id, 6) + 0.01;\n        }\n    }\n  }\n  // The bracket: arm, brace, scroll, wall plate.\n  const iron = (x, y) => set(y * W + x, IRON, 0.6, 0.55, 0.5);\n  for (const [x0, y0, x1, y1] of [[5, 22, 36, 21], [5, 23, 36, 22], [6, 31, 24, 23]]) {\n    const n = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0));\n    for (let i = 0; i \u003c= n; i++) iron(Math.round(x0 + ((x1 - x0) * i) / n), Math.round(y0 + ((y1 - y0) * i) / n));\n  }\n  for (let a = 0; a \u003c 11; a += 0.15) iron(Math.round(14 + (3.6 - 0.3 * a) * Math.cos(a)), Math.round(26.5 - (3.6 - 0.3 * a) * Math.sin(a)));\n  for (let y = 19; y \u003c 34; y++) for (let x = 3; x \u003c 6; x++) iron(x, y);\n  // The night: blue, the strongest channel, is a smooth glow with a little\n  // grain and the other two scatter under it, never past 24.\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const k = kind[p];\n    let sky = 17 + 3.5 * Math.sin(x * 0.07 + y * 0.045) + 2.5 * Math.sin(y * 0.031 - x * 0.05 + 1);\n    if (k === GAP || k === IRON || k === ROOF) sky -= 5;\n    if (k === AIR) sky = 7 + 0.6 * y;\n    const b = clamp(Math.round(sky) + Math.floor(7 * hash(p, 33)) - 3, 1, 24);\n    for (let c = 0; c \u003c 3; c++) P.jit[p * 3 + c] = hash(p, 40 + c) - 0.1;\n    put(dark, p * 3, Math.floor((b + 1) * hash(p, 30) * (k === AIR ? 0.7 : 1)), Math.floor((b + 1) * hash(p, 32) * (k === AIR ? 0.8 : 1)), b);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.leaf = new Float32Array(N);\n  for (const k of [\"alb\", \"dark\", \"buf\", \"jit\"]) P[k] = new Float32Array(N * 3);\n  for (const k of [\"x\", \"y\", \"h\", \"sp\", \"t\", \"ph\", \"fw\", \"al\", \"bias\", \"u\", \"v\", \"wait\"]) P[k] = new Float32Array(MAXM);\n  for (const k of [\"mode\", \"big\", \"tint\"]) P[k] = new Uint8Array(MAXM);\n  P.kind = new Uint8Array(N);\n  P.side = new Int8Array(MAXM);\n  build(P);\n  for (let i = 0; i \u003c MAXM; i++) P.wait[i] = rnd() * 3;\n  Object.assign(P, { T: 0, started: false, om: 0, cloud: 0, flick: -1, lamp: 1, gain: 1, reach: E0, damp: 0, breeze: 0, bat: null, lc: [1, 0.7, 0.4] });\n  P.nextBat = 16 + 10 * rnd();\n  aim(P, 0);\n}\n\n// Where the lantern hangs now: the bulb, and the lantern's own axes.\nfunction aim(P, th) {\n  P.th = th;\n  P.c = Math.cos(th);\n  P.s = Math.sin(th);\n  P.bx = PX + BV * P.s;\n  P.by = PY + BV * P.c;\n}\n\n// A point in the lantern's frame (u across, v down from the hook) on the panel.\nconst lx = (P, u, v) => PX + u * P.c + v * P.s;\nconst ly = (P, u, v) => PY - u * P.s + v * P.c;\n\n// A moth comes in from an edge, or is near the lamp when the night opens.\nfunction arrive(P, i, near) {\n  const { x: X, y: Y, h: A } = P;\n  P.mode[i] = 1;\n  P.side[i] = rnd() \u003c 0.5 ? -1 : 1;\n  P.big[i] = rnd() \u003c 0.25 ? 1 : 0;\n  P.tint[i] = Math.floor(rnd() * 4);\n  P.al[i] = 0.65 + 0.35 * rnd();\n  P.sp[i] = 0.8 + 0.4 * rnd();\n  P.fw[i] = 7 + 5 * rnd();\n  P.bias[i] = 0.15 + 0.35 * rnd();\n  if (near) {\n    const a = rnd() * 6.28;\n    const r = 7 + 22 * rnd();\n    X[i] = P.bx + r * Math.cos(a);\n    Y[i] = P.by + r * Math.sin(a) * 1.2;\n    A[i] = a + P.side[i] * 1.6;\n    return;\n  }\n  const e = rnd();\n  X[i] = e \u003c 0.35 ? -4 : e \u003c 0.7 ? W + 4 : W * rnd();\n  Y[i] = e \u003c 0.7 ? 20 + 90 * rnd() : H + 4;\n  A[i] = Math.atan2(P.by - Y[i], P.bx - X[i]) + (rnd() - 0.5);\n}\n\nfunction land(P, i, mode) {\n  P.mode[i] = mode;\n  P.t[i] = mode === 2 ? 2 + 4 * rnd() : 3 + 9 * rnd();\n  const dx = P.x[i] - PX;\n  const dy = P.y[i] - PY;\n  // On the glass it is kept in the lantern's frame, so it swings with it.\n  if (mode === 2) {\n    P.u[i] = clamp(dx * P.c - dy * P.s, -4, 4);\n    P.v[i] = clamp(dx * P.s + dy * P.c, 15, 22);\n  } else {\n    P.x[i] = Math.round(P.x[i]);\n    P.y[i] = Math.round(P.y[i]);\n  }\n}\n\nfunction takeOff(P, i, away) {\n  if (P.mode[i] === 2) {\n    P.x[i] = lx(P, P.u[i], P.v[i]);\n    P.y[i] = ly(P, P.u[i], P.v[i]);\n  }\n  P.mode[i] = away ? 4 : 1;\n  P.t[i] = away ? 0.6 + 2 * rnd() : 0;\n  P.h[i] = Math.atan2(P.y[i] - P.by, P.x[i] - P.bx) + (rnd() - 0.5) * 1.2;\n}\n\nfunction step(P, dt, want, pull, wind) {\n  const { mode: M, x: X, y: Y, h: A, t: T, ph: F, side: D, wait: Q } = P;\n  const lit = P.lamp > 0.4;\n  let onGlass = 0;\n  for (let i = 0; i \u003c MAXM; i++) if (M[i] === 2) onGlass++;\n  for (let i = 0; i \u003c MAXM; i++) {\n    let m = M[i];\n    if (m === 0) {\n      if (i \u003c want && (Q[i] -= dt) \u003c= 0) arrive(P, i, false);\n      continue;\n    }\n    if (i >= want && m !== 4) {\n      takeOff(P, i, true);\n      T[i] = 99;\n      m = 4;\n    }\n    F[i] += P.fw[i] * dt * 6.28;\n    if (m === 2 || m === 3) {\n      if ((T[i] -= dt) \u003c= 0) takeOff(P, i, rnd() \u003c 0.4);\n      continue;\n    }\n    const dx = P.bx - X[i];\n    const dy = P.by - Y[i];\n    const r = Math.sqrt(dx * dx + dy * dy) + 0.01;\n    let h = A[i];\n    // Each moth keeps its back to the light. Far off that steers it straight\n    // in; near, it holds the lamp abeam and so circles it, spiralling in by\n    // its bias until it bumps the glass.\n    if (m === 1 && lit) h += clamp(wrap(Math.atan2(dy, dx) - D[i] * (1.5708 * smooth(46, 12, r) - P.bias[i] * pull) - h), -5 * dt, 5 * dt);\n    if (m === 4 && (T[i] -= dt) \u003c= 0) M[i] = m = 1;\n    // It jinks, and now and then loops.\n    h += (rnd() - 0.5) * 7 * Math.sqrt(dt);\n    if (rnd() \u003c dt * 0.25) h += D[i] * 2.5;\n    const sp = 20 * P.sp[i] * (0.75 + 0.5 * Math.abs(Math.sin(F[i] * 0.05 + i)));\n    X[i] += Math.cos(h) * sp * dt + wind * dt;\n    Y[i] += Math.sin(h) * sp * dt;\n    A[i] = h;\n    if (lit && m === 1 && r \u003c 6) {\n      // A bump on the glass: it bounces off, or settles on the pane.\n      if (onGlass \u003c 2 && rnd() \u003c 0.2) {\n        land(P, i, 2);\n        onGlass++;\n      } else A[i] = Math.atan2(-dy, -dx) + (rnd() - 0.5) * 2;\n    } else if (lit && m === 1 && r > 9 && r \u003c 26 && Y[i] > EAVE + 1 && rnd() \u003c dt * 0.035) land(P, i, 3);\n    if (X[i] \u003c -8 || X[i] > W + 8 || Y[i] \u003c -8 || Y[i] > H + 8) {\n      M[i] = 0;\n      Q[i] = 0.5 + 3 * rnd();\n    }\n  }\n}\n\n// The flying moth nearest a point; one below the lamp counts `low` nearer.\nfunction prey(P, x, y, low, best) {\n  let q = -1;\n  for (let i = 0; i \u003c MAXM; i++) {\n    const d = P.mode[i] === 1 ? Math.hypot(P.x[i] - x, P.y[i] - y) - (P.y[i] > P.by + 4 ? low : 0) : 1e9;\n    if (d \u003c best) [best, q] = [d, i];\n  }\n  return q;\n}\n\n// The bat comes in low across the lit wall for a moth, one below the lamp first.\nfunction startBat(P) {\n  const x = rnd() \u003c 0.5 ? -8 : W + 8;\n  const y = 60 + 20 * rnd();\n  P.bat = { x, y, h: Math.atan2(P.by + 22 - y, P.bx - x), t: 0, prey: prey(P, P.bx, P.by, 8, 1e9), ph: 0 };\n}\n\nfunction flyBat(P, dt) {\n  const { bat: b, mode: M, x: X, y: Y } = P;\n  b.t += dt;\n  b.ph += dt * 44;\n  // If its moth settles it turns for the nearest one still flying.\n  if (b.prey >= 0 && M[b.prey] !== 1) b.prey = prey(P, b.x, b.y, 0, 30);\n  const q = b.prey;\n  if (q >= 0 && b.t > 0.5) {\n    b.h += clamp(wrap(Math.atan2(Y[q] - b.y, X[q] - b.x) - b.h), -6 * dt, 6 * dt);\n    if (Math.hypot(X[q] - b.x, Y[q] - b.y) \u003c 2.2) {\n      M[q] = 0;\n      P.wait[q] = 2 + 4 * rnd();\n      b.prey = -1;\n    }\n  } else b.h += 0.8 * dt;\n  b.x += Math.cos(b.h) * 45 * dt;\n  b.y += Math.sin(b.h) * 45 * dt;\n  // Moths with ears hear it coming and drop.\n  for (let i = 0; i \u003c MAXM; i++)\n    if (M[i] === 1 && i !== b.prey && Math.hypot(X[i] - b.x, Y[i] - b.y) \u003c 12) {\n      M[i] = 4;\n      P.t[i] = 0.8;\n      P.h[i] = 1.07 + rnd();\n    }\n  if (b.t > 4 || (b.t > 0.4 && (b.x \u003c -12 || b.x > W + 12 || b.y \u003c -12 || b.y > H + 12))) P.bat = null;\n}\n\n// The lantern swings on its chain toward where the wandering air leans it.\nfunction swing(P, dt, breeze) {\n  const t = P.T;\n  const gust = (0.075 + 0.06 * Math.abs(breeze)) * (Math.sin(t * 0.83) + 0.6 * Math.sin(t * 1.37 + 2) + 0.4 * Math.sin(t * 0.29 + 4));\n  P.om += (-9 * (P.th - 0.17 * breeze - gust) - 0.8 * P.om) * dt;\n  aim(P, P.th + P.om * dt);\n  P.cloud += dt * (0.08 + 0.1 * breeze);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 12, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const want = Math.round(clamp(k[2], 12, MAXM));\n  const breeze = (P.breeze = clamp(k[3], -1, 1));\n  // The lamp's colour; the bluer ones burn brighter and reach further.\n  const j = Math.min(2, Math.floor(hue * 3));\n  const f = hue * 3 - j;\n  for (let c = 0; c \u003c 3; c++) P.lc[c] = (LAMPS[j][c] * (1 - f) + LAMPS[j + 1][c] * f) / 255;\n  const blue = smooth(0.25, 0.8, hue);\n  const pull = 0.7 + 0.8 * smooth(0.3, 0.75, hue);\n  P.gain = 1 + 0.35 * blue;\n  P.reach = E0 * (1 - 0.3 * blue);\n  P.damp = (want - 12) / (MAXM - 12);\n  const wind = breeze * 7;\n  const btn = input.btnPressed || [];\n  if (btn[0] && !P.bat) startBat(P);\n  if (btn[1] && P.flick \u003c 0) P.flick = 0;\n  if (!P.started) {\n    // Five seconds of the night run before it opens.\n    P.started = true;\n    for (let i = 0; i \u003c want; i++) {\n      arrive(P, i, rnd() \u003c 0.8);\n      if (rnd() \u003c 0.2) land(P, i, 3);\n    }\n    for (let n = 0; n \u003c 150; n++) {\n      P.T += 1 / 30;\n      swing(P, 1 / 30, breeze);\n      step(P, 1 / 30, want, pull, wind);\n    }\n  }\n  const st = dt * speed;\n  P.T += st;\n  swing(P, st, breeze);\n  // The old lamp wavers; after K2 it stutters out and strikes again.\n  let lamp = 1 + 0.07 * Math.sin(P.T * 1.3) + 0.05 * Math.sin(P.T * 3.1 + 1);\n  if (P.flick >= 0) {\n    const t = (P.flick += dt);\n    lamp *= t \u003c 0.1 ? 0.2 : t \u003c 0.2 ? 1 : t \u003c 0.3 ? 0.1 : t \u003c 0.45 ? 0.7 : t \u003c 1.6 ? 0 : smooth(1.6, 3.4, t);\n    if (t > 3.4) P.flick = -1;\n  }\n  P.lamp = lamp;\n  if (P.T > P.nextBat && !P.bat) {\n    startBat(P);\n    P.nextBat = P.T + 18 + 20 * rnd();\n  }\n  if (P.bat) flyBat(P, st);\n  step(P, st, want, pull, wind);\n}\n\n// Light on the wall at a point, after the eye. A reflector under the cap\n// throws most of it down, the cap shades the wall above, less to the sides,\n// and there is a steep shoulder where the lamp's reach gives out.\nfunction wallLight(P, x, y, G) {\n  const dx = x - P.bx;\n  const dy = y - P.by;\n  const a = dx * P.c - dy * P.s;\n  const b = dx * P.s + dy * P.c;\n  const r2 = a * a + b * b;\n  const cd = b > 0 ? (b * b) / (r2 + 1) : 0;\n  const q = 1 + r2 / 256;\n  const l = (0.06 + 0.94 * cd * cd) / (q * Math.sqrt(q));\n  if (l \u003c= P.reach * P.reach) return 0;\n  const s = Math.sqrt(l * (0.12 + 0.88 * clamp(0.5 + (b + 6 + 0.45 * Math.abs(a)) / (2 + 0.08 * Math.sqrt(r2)), 0, 1))) - P.reach;\n  return s > 0 ? Math.pow(s, 0.7) * G : 0;\n}\n\n// Light on a moth or the iron at r from the bulb.\nconst near = (P, r) => (1.5 * P.lamp) / (1 + (r * r) / 121);\n\nfunction splat(buf, x, y, k, col) {\n  const x0 = Math.floor(x);\n  const y0 = Math.floor(y);\n  for (let j = 0; j \u003c 2; j++)\n    for (let i = 0; i \u003c 2; i++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const w = k * (i ? x - x0 : 1 - x + x0) * (j ? y - y0 : 1 - y + y0);\n      const q = (py * W + px) * 3;\n      put(buf, q, buf[q] + col[0] * w, buf[q + 1] + col[1] * w, buf[q + 2] + col[2] * w);\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const { buf, alb, dark, kind, leaf, lc, lamp, jit } = P;\n  const G = 2.5 * lamp * P.gain;\n  // The lantern's place, in a small object the loops read fast.\n  const L = (P.L = { bx: P.bx, by: P.by, c: P.c, s: P.s, reach: P.reach });\n  // The damp air glows round the glass.\n  const hk = lamp * P.gain * (26 + 60 * P.damp);\n  const hr = 1 / (30 + 140 * P.damp);\n  const gfar = (hk / 1.5 - 1) / hr;\n  // Clouds run past the moon, lit by it.\n  const cloud = (x, y) => smooth(0.45, 0.75, 0.6 * noise(x * 0.06 + P.cloud, y * 0.25 + 3) + 0.4 * noise((x * 0.06 + P.cloud) * 2.3 + 7, (y * 0.25 + 3) * 2.1 + 5));\n  const veil = cloud(MX, MY);\n  // The pool of light on the setts, under the lantern's axis.\n  const pcx = P.bx + ((GY - P.by) * P.s) / P.c;\n  const flut = 0.15 + 0.5 * Math.abs(P.breeze);\n  const T5 = P.T * 5;\n  const [lc0, lc1, lc2] = lc;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const q = p * 3;\n    if (y \u003c SKY) {\n      const dm = (x - MX) ** 2 + (y - MY) ** 2;\n      let s = cloud(x, y) * (8 + 80 / (1 + dm / 70)) + (36 * (1 - 0.6 * veil)) / (1 + dm / 12);\n      if (dm \u003c MR * MR) s += 200 * (1 - 0.75 * veil) * (1 - (0.15 * Math.sqrt(dm)) / MR);\n      put(buf, q, dark[q] + 0.8 * s, dark[q + 1] + 0.86 * s, dark[q + 2] + s);\n      continue;\n    }\n    const k = kind[p];\n    let v;\n    if (y \u003c GY) {\n      v = wallLight(L, x + 0.5, y + 0.5, G);\n      if (k === LEAF) v *= leaf[p] ? 1.5 + flut * Math.sin(T5 + leaf[p]) : 1.5;\n      else if (k === IRON) v = kind[p + W] !== IRON ? 0.45 * near(P, Math.hypot(x - P.bx, y - P.by)) : 0;\n    } else {\n      const ex = (x - pcx) / 13;\n      const ez = (y - GY - 6) / 6;\n      v = lamp * Math.max(0, 0.75 * Math.exp(-ex * ex - ez * ez) - 0.02) * (0.7 + 0.3 * smooth(GY, GY + 4, y));\n    }\n    const d2 = (x + 0.5 - L.bx) ** 2 + (y + 0.5 - L.by) ** 2;\n    const glow = d2 \u003c gfar ? hk / (1 + d2 * hr) - 1.5 : 0;\n    v *= 255;\n    buf[q] = dark[q] + (alb[q] * v + glow) * lc0;\n    buf[q + 1] = dark[q + 1] + (alb[q + 1] * v + glow) * lc1;\n    buf[q + 2] = dark[q + 2] + (alb[q + 2] * v + glow) * lc2;\n  }\n  drawLantern(P);\n  drawMoths(P);\n  if (P.bat) drawBat(P);\n  // The weaker channels scatter up a little, under the strongest.\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    let r = knee(buf[q]);\n    let g = knee(buf[q + 1]);\n    let b = knee(buf[q + 2]);\n    const m = Math.max(r, g, b);\n    const j = Math.min(50, 0.5 * m);\n    if (r \u003c m) r = Math.min(m - 1, r + j * jit[q]);\n    if (g \u003c m) g = Math.min(m - 1, g + j * jit[q + 1]);\n    if (b \u003c m) b = Math.min(m - 1, b + j * jit[q + 2]);\n    display.setPixel(p % W, (p / W) | 0, r, g, b);\n  }\n}\n\n// The lantern in its own frame: chain, knob, cap with its rim lit from inside,\n// glass brightest round the bulb, base and finial.\nfunction drawLantern(P) {\n  const { buf, lc, lamp } = P;\n  for (let y = PY - 1; y \u003c PY + 32; y++)\n    for (let x = PX - 14; x \u003c PX + 14; x++) {\n      const dx = x + 0.5 - PX;\n      const dy = y + 0.5 - PY;\n      const u = dx * P.c - dy * P.s;\n      const v = dx * P.s + dy * P.c;\n      const au = Math.abs(u);\n      const q = (y * W + x) * 3;\n      let e = -1;\n      if (v >= 0 && v \u003c 6 && au \u003c 0.6) e = 6 + near(P, BV - v) * (Math.floor(v) % 2 ? 40 : 18);\n      else if (v >= 6 && v \u003c 8 && au \u003c 1.3) e = 12;\n      else if (v >= 8 && v \u003c 12.5 && au \u003c 1.5 + (v - 8) * 1.25) {\n        const rim = v > 11.5 ? 0.5 * lamp : 0.03;\n        put(buf, q, 18 + 255 * lc[0] * rim, 16 + 255 * lc[1] * rim, 14 + 255 * lc[2] * rim);\n      } else if (v >= 12.5 && v \u003c 24 && au \u003c 6 - (v - 12.5) * 0.15) {\n        if (au > 5.1 - (v - 12.5) * 0.15 || au \u003c 0.45 || v > 22.8) e = 20;\n        else {\n          const gl = Math.exp(-(u * u) / 14 - ((v - BV) * (v - BV)) / 20);\n          const s = lamp * (0.62 + 0.45 * gl);\n          const t = gl * lamp;\n          put(buf, q, 255 * Math.min(1.2, lc[0] * s + 0.25 * t), 255 * Math.min(1.2, lc[1] * s + 0.2 * t), 255 * Math.min(1.2, lc[2] * s + 0.15 * t));\n        }\n      } else if (v >= 24 && v \u003c 25.5 && au \u003c 3.8) e = 16;\n      else if (v >= 25.5 && v \u003c 27.5 && au \u003c 1) e = 13;\n      if (e >= 0) put(buf, q, e, e, e);\n    }\n}\n\nfunction drawMoths(P) {\n  const { buf, lc, mode: M, x: X, y: Y, u: U, v: V, ph: F, big: B } = P;\n  for (let i = 0; i \u003c MAXM; i++) {\n    const m = M[i];\n    if (!m) continue;\n    const x = m === 2 ? lx(P, U[i], V[i]) : X[i];\n    const y = m === 2 ? ly(P, U[i], V[i]) : Y[i];\n    const r = Math.hypot(x - P.bx, y - P.by);\n    const tn = TINTS[P.tint[i]];\n    // In flight it is nearer the bulb than the wall and shines brighter; at\n    // rest it is lit as the wall is.\n    const L = (m === 3 ? 1.25 * wallLight(P.L, x, y, 2.5 * P.lamp * P.gain) : 1.8 * near(P, r)) * P.al[i] * 255;\n    const col = [L * tn[0] * lc[0], L * tn[1] * lc[1], L * tn[2] * lc[2]];\n    if (m === 2 || m === 3) {\n      // At rest: dark on the glass; on the wall lit as the bricks, with a\n      // shadow a step out from the lamp.\n      const xi = Math.round(x);\n      const yi = Math.round(y);\n      const flick = Math.sin(F[i] * 0.3) > 0.97 ? 0.6 : 1;\n      // The wings swept back in a triangle from the head, the body dimmer.\n      const R = 1 + B[i];\n      for (let oy = -R; oy \u003c 2; oy++)\n        for (let ox = -oy - R; ox \u003c= oy + R; ox++) {\n          const px = xi + ox;\n          const py = yi + oy;\n          if ((oy === 1 && !ox) || px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n          const q = (py * W + px) * 3;\n          const a = (ox ? 1 - 0.06 * Math.abs(ox) : 0.72) * flick;\n          if (m === 2) dim(buf, q, ox ? 0.35 : 0.15);\n          else put(buf, q, Math.max(buf[q] * 0.85, col[0] * a), Math.max(buf[q + 1] * 0.85, col[1] * a), Math.max(buf[q + 2] * 0.85, col[2] * a));\n        }\n      const sx = xi + Math.round(((x - P.bx) / (r + 0.01)) * 1.4);\n      const sy = yi + Math.round(((y - P.by) / (r + 0.01)) * 1.4) + 1;\n      if (m === 3 && sx >= 0 && sx \u003c W && sy >= EAVE && sy \u003c GY) dim(buf, (sy * W + sx) * 3, 0.5);\n      continue;\n    }\n    // In flight: the body and two wings beating, fore and hind.\n    const o = Math.abs(Math.sin(F[i]));\n    const nx = -Math.sin(P.h[i]);\n    const ny = Math.cos(P.h[i]);\n    const span = (1.3 + 0.6 * B[i]) * (0.4 + 0.6 * o);\n    const wv = 0.3 + 0.7 * o;\n    splat(buf, x - 0.5, y - 0.5, 0.6, col);\n    for (const sd of [1, -1]) {\n      const ax = x - 0.5 + sd * nx * span;\n      const ay = y - 0.5 + sd * ny * span;\n      splat(buf, ax + ny * 0.4, ay - nx * 0.4, wv, col);\n      splat(buf, ax * 0.6 + (x - 0.5) * 0.4 - ny * 0.5, ay * 0.6 + (y - 0.5) * 0.4 + nx * 0.5, wv * 0.6, col);\n    }\n  }\n}\n\n// The bat: dark, wings beating, the light glowing through them near the lamp.\nfunction drawBat(P) {\n  const { buf, lc } = P;\n  const b = P.bat;\n  const lit = near(P, Math.hypot(b.x - P.bx, b.y - P.by)) * 0.6 * 255;\n  for (let dx = -5; dx \u003c= 5; dx++) {\n    const ad = Math.abs(dx);\n    const lift = Math.sin(b.ph) * (ad - 1) * 0.7;\n    const y1 = ad > 1 ? Math.round(-lift + (ad \u003c 4 ? 1 : 0.4) - (ad % 2 ? 0 : 0.5)) : 1;\n    for (let dy = ad > 1 ? Math.round(-lift - 0.3) : ad === 1 ? -2 : -1; dy \u003c= y1; dy++) {\n      const px = Math.round(b.x + dx);\n      const py = Math.round(b.y + dy);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const q = (py * W + px) * 3;\n      const k = ad > 1 ? lit : lit * 0.3;\n      put(buf, q, buf[q] * 0.1 + k * lc[0] * 0.85, buf[q + 1] * 0.1 + k * lc[1] * 0.42, buf[q + 2] * 0.1 + k * lc[2] * 0.25);\n    }\n  }\n}\n\n// Where the light piles up it rolls off instead of clipping flat.\nconst knee = (c) => (c \u003c 180 ? c : 180 + 75 * (1 - Math.exp(-(c - 180) / 75)));\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Speed=0.2..3, Moths=12..120, Breeze=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"Sodium gold at 0, a warm old bulb, mercury blue-white, a cold LED at 1; the bluer lamps burn brighter, reach further and pull the moths in tighter."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a moth flies about twenty LEDs a second and rounds the lamp in two or three, and the lantern swings once in two seconds."},{"name":"Moths","min":12,"max":120,"about":"Twelve to 120; the damp nights that bring them out also haze the air, so the glow round the lamp grows with them."},{"name":"Breeze","min":-1,"max":1,"about":"A breath of air at 0.06; either way the lantern leans and swings harder, the moths drift downwind, the clouds run faster and the ivy shivers."}],"start":[0,2,12,0.06],"measures":{"motion":0.1073,"detail":0.0382,"edges":0.2646,"complexity":2.2012,"coverage":0.2737,"colour":0.0944,"drift":0.0456},"knobResponse":[0.0525,0.0467,0.0451,0.0578]},{"slug":"needlepoint","title":"Needlepoint","family":"textile","round":19,"note":"슬레이트 틀의 인쇄 캔버스를 바늘이 오른쪽 위 구석부터 바스켓위브로 한 대각선씩 메워 가요. 앵무새 쿠션이나 검은 바탕의 베를린 장미, 알파벳 샘플러가 다 차면 틀이 굴러 새 캔버스를 감아 와요.","idea":"A needle and wool work a printed canvas in tent stitch on a slate frame, diagonal row after diagonal row from the top right corner, each stitch two lit LEDs across a dark hole, until a parrot cushion, a Berlin rose bouquet or an alphabet sampler is filled in and the frame rolls on a fresh canvas.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Needlepoint\n// Family:  textile\n// Idea:    A needle and wool work a printed canvas in tent stitch on a slate frame, diagonal row after diagonal row from the top right corner, each stitch two lit LEDs across a dark hole, until a parrot cushion, a Berlin rose bouquet or an alphabet sampler is filled in and the frame rolls on a fresh canvas.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after Berlin woolwork, the tent stitch pictures worked from printed charts in the nineteenth century\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Wool=0..1, Speed=0.2..3, Design=0..2, Lamp=0..1\n//\n// Knob 1: Wool. Turns every wool in the box round the dye wheel together, starting from the natural shades: a green parrot on a teal ground.\n// Knob 2: Speed. Stitches a second, 7 at 0.2, 72 at 2 and 108 at 3; at 2 the 1920 stitches of a canvas take 27 seconds.\n// Knob 3: Design. Which canvas is on the frame: the parrot cushion, the rose bouquet on black or the sampler with its alphabet and house; turning it rolls the work on to that canvas, and after it the canvases follow in that order.\n// Knob 4: Lamp. Where the lamp stands, low on the left at 0, overhead at 0.5, low on the right at 1; the side of each stitch that faces it shines and the far side of the hole falls into shadow.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The canvas is 32 stitches across and 60 down, each stitch a 2 by 2 LED cell, between the\n// slate frame's two rollers of 4 rows.\nconst SU = 32;\nconst SV = 60;\nconst NS = SU * SV;\nconst Y0 = 4;\nconst CH = SV * 2;\n// Stitches a second for each unit of Speed, the hold on a finished canvas and the roll on.\nconst RATE = 36;\nconst HOLD = 3.5;\nconst ROLL = 2.4;\nconst STITCH = 0;\nconst HOLDING = 1;\nconst ROLLING = 2;\n// A stitch's two yarn LEDs at full wool; the hole between stitches gets GAP of the wool\n// on the lamp's side and less on the other. Bare canvas threads sit near PRINT of 255,\n// the ground left plain ecru and the motifs printed in a wash of their wool.\nconst GAP = 0.15;\nconst RAKE = 0.1;\nconst SHEEN = 0.18;\nconst PRINT = 34;\n// Grain of the wool: about one fibre in four is JIT levels off in a weaker channel. The\n// strongest channel is left alone, so the grain shows as tint, not as brightness.\nconst JIT = 10;\n\n// The wool box. Index 0 is never used.\nconst WOOL = [\n  [0, 0, 0],\n  [36, 122, 170], // 1 teal ground\n  [134, 28, 46], // 2 maroon\n  [220, 170, 56], // 3 old gold\n  [30, 96, 46], // 4 dark green\n  [70, 160, 56], // 5 green\n  [154, 212, 70], // 6 light green\n  [238, 208, 52], // 7 yellow\n  [222, 54, 40], // 8 scarlet\n  [46, 76, 196], // 9 royal blue\n  [230, 222, 196], // 10 ivory\n  [44, 36, 34], // 11 near black\n  [126, 78, 40], // 12 brown\n  [80, 50, 30], // 13 dark brown\n  [240, 136, 34], // 14 orange\n  [150, 150, 164], // 15 grey\n  [34, 30, 56], // 16 Berlin black\n  [128, 18, 40], // 17 deep crimson\n  [206, 50, 82], // 18 rose\n  [238, 118, 152], // 19 pink\n  [250, 194, 210], // 20 pale pink\n  [244, 222, 120], // 21 pale yellow\n  [146, 92, 196], // 22 lilac\n  [92, 142, 226], // 23 cornflower\n  [222, 204, 156], // 24 cream ground\n  [168, 64, 40], // 25 brick\n];\nconst ECRU = [230, 220, 186];\n// The ground wool of each chart, which the printer leaves off the canvas.\nconst GROUND = [1, 16, 24];\n\n// A 3 by 5 alphabet for the sampler, and the three digits of its year.\nconst FONT = {};\n\"A010101111101101B110101110101110C011100100100011D110101101101110E111100110100111F111100110100100G011100101101011H101101111101101I111010010010111J001001001101010K101101110101101L100100100100111M101111111101101N110101101101101O010101101101010P110101110100100Q010101101110011R110101110101101S011100010001110T111010010010010U101101101101111V101101101101010W101101111111101X101101010101101Y101101010010010Z111001010100111101011001001011181111011111011115111100110001110\"\n  .match(/[A-Z1-9][01]{15}/g)\n  .forEach((g) => (FONT[g[0]] = g.slice(1)));\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction inPoly(x, y, q) {\n  let inside = false;\n  for (let i = 0, j = q.length - 2; i \u003c q.length; j = i, i += 2) {\n    const xi = q[i];\n    const yi = q[i + 1];\n    const xj = q[j];\n    const yj = q[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;\n  }\n  return inside;\n}\n\nfunction segT(x, y, x0, y0, x1, y1) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  return clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n}\n\nfunction segDist(x, y, x0, y0, x1, y1) {\n  const t = segT(x, y, x0, y0, x1, y1);\n  return Math.hypot(x - x0 - t * (x1 - x0), y - y0 - t * (y1 - y0));\n}\n\n// How far in from the edge of the canvas a stitch is: 0 on the outer row.\nconst ring = (u, v) => Math.min(u, SU - 1 - u, v, SV - 1 - v);\n\n// A Berlin rose: shaded from a deep heart to pale outer petals, with curled petal edges.\nfunction rose(put, cx, cy, r, tones) {\n  for (let i = 0; i \u003c 4; i++)\n    put(tones[i], (u, v) => {\n      const d = Math.hypot(u - cx, v - cy) / r;\n      if (d > 1) return false;\n      const a = Math.atan2(v - cy, u - cx);\n      const t = 0.15 + 0.8 * d + 0.22 * Math.sin(5 * a + 7 * d);\n      return Math.min(3, Math.floor(clamp(t, 0, 0.999) * 4)) === i;\n    });\n}\n\n// The three charts, painted stitch by stitch: discs, boxes, polygons, thick lines, leaves.\nconst CHARTS = [\n  // Parrot cushion: a green Amazon parrot with a yellow crown on an orange branch.\n  (D, R, P, L, F, put) => {\n    put(1, () => true);\n    put(2, (u, v) => ring(u, v) === 0 || (ring(u, v) === 1 && (u + v) % 4 === 0));\n    put(3, (u, v) => ring(u, v) === 1 && (u + v) % 4 !== 0);\n    put(10, (u, v) => ring(u, v) === 2 && (u + v) % 4 === 2);\n    // Corner sprigs of cornflowers.\n    for (const [x, y, s] of [[4, 50, 1], [27, 52, -1], [27, 6, -1], [4, 8, 1]]) {\n      F(4, x, y + 4 * Math.sign(y - 30), x + 3 * s, y, 1.6);\n      D(23, x + 3 * s, y, 1.6);\n      D(9, x + 3 * s, y, 0.6);\n    }\n    // The branch and its leaves and fruit.\n    L(12, 2, 41, 30, 36, 1.4);\n    L(13, 2, 42.5, 30, 37.5, 0.6);\n    L(12, 24, 37, 29, 29, 0.9);\n    F(4, 6, 41, 3, 33, 1.7);\n    F(5, 8, 40, 12, 46, 1.6);\n    F(4, 27, 35, 30, 42, 1.6);\n    F(5, 28, 31, 25, 25, 1.5);\n    D(14, 5, 45, 2);\n    D(7, 4.5, 44.5, 0.6);\n    D(14, 22, 41.5, 1.8);\n    D(7, 21.5, 41, 0.6);\n    // The tail, long and green with a red bar and yellow tips.\n    P(5, 12, 36, 18, 36, 19, 55, 12, 55);\n    put(8, (u, v) => v >= 45 && v \u003c= 46 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    put(6, (u, v) => v >= 52 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    put(4, (u, v) => v > 36 && (u === 15 || u === 16) && v \u003c 52 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    // Body, belly and wing with blue flight feathers and a red shoulder.\n    D(5, 15.5, 26, 6, 10.5);\n    D(6, 17.5, 27, 3.4, 7.5);\n    D(4, 12.5, 28, 4.3, 8.5);\n    put(9, (u, v) => ((u - 12.5) / 4.3) ** 2 + ((v - 28) / 8.5) ** 2 \u003c= 1 && v > 31 && (u + v) % 3 !== 0);\n    put(23, (u, v) => ((u - 12.5) / 4.3) ** 2 + ((v - 28) / 8.5) ** 2 \u003c= 1 && v > 31 && (u + v) % 3 === 0);\n    D(8, 11.5, 23, 2, 1.6);\n    // Head, crown, eye and beak.\n    D(5, 17, 15, 5, 4.6);\n    D(7, 17, 12, 4, 2.6);\n    D(6, 18, 17.5, 3, 1.4);\n    D(10, 19, 14, 1.3);\n    D(11, 19.2, 14, 0.5);\n    P(10, 21, 13, 24.5, 14.5, 23.5, 19, 21, 17.5);\n    P(11, 21, 17.5, 23, 18.5, 21.5, 19.5);\n    // Feet round the branch.\n    R(15, 14, 36, 14, 39);\n    R(15, 17, 36, 18, 38);\n  },\n  // Rose bouquet on black: three roses, buds, blue convolvulus and lilac, tied with a gold bow.\n  (D, R, P, L, F, put) => {\n    put(16, () => true);\n    put(4, (u, v) => ring(u, v) === 0);\n    put(3, (u, v) => ring(u, v) === 1 && (u + 2 * v) % 6 === 0);\n    // Stems gathered into the bow.\n    for (const [x, y] of [[15, 30], [10, 40], [23, 40], [6, 22], [26, 20]]) L(4, x, y, 16, 51, 0.6);\n    L(4, 16, 51, 13, 56, 0.6);\n    L(4, 16, 51, 19, 56, 0.6);\n    // Leaves round the flowers.\n    for (const [x0, y0, x1, y1] of [[8, 28, 2, 23], [24, 28, 30, 22], [6, 46, 1, 51], [25, 46, 30, 52], [16, 30, 12, 36], [17, 31, 21, 36], [12, 13, 7, 8], [21, 12, 26, 7], [4, 34, 2, 41], [28, 34, 30, 41]])\n      F(Math.abs(x0 - 16) > 9 ? 4 : 5, x0, y0, x1, y1, 2);\n    // Lilac sprays and convolvulus.\n    for (let i = 0; i \u003c 14; i++) D(22, 4 + (i % 3) * 1.6 + Math.floor(i / 3) * 0.4, 14 + Math.floor(i / 3) * 1.8 - (i % 3) * 0.5, 0.7);\n    for (let i = 0; i \u003c 12; i++) D(22, 26 - (i % 3) * 1.5, 12 + Math.floor(i / 3) * 1.9 + (i % 3) * 0.4, 0.7);\n    for (const [x, y] of [[4, 31], [28, 31], [16, 6]]) {\n      D(23, x, y, 2.2);\n      D(10, x, y, 0.7);\n    }\n    // Buds.\n    for (const [x, y] of [[9, 9], [23, 8], [3, 44], [29, 45]]) {\n      D(18, x, y, 1.2, 1.8);\n      put(5, (u, v) => Math.abs(u - x) \u003c= 1 && v === y + 2);\n    }\n    rose(put, 16, 20, 7.6, [17, 18, 19, 20]);\n    rose(put, 9, 37, 5.6, [3, 7, 21, 10]);\n    rose(put, 23, 37, 5.6, [17, 8, 18, 19]);\n    // The bow.\n    P(3, 16, 51, 10, 48, 10, 54);\n    P(3, 16, 51, 22, 48, 22, 54);\n    D(7, 16, 51, 1.2);\n  },\n  // Sampler on cream: the alphabet, a band of diamonds, a brick house between two trees, the year.\n  (D, R, P, L, F, put) => {\n    put(24, () => true);\n    put(4, (u, v) => ring(u, v) === 0);\n    put(8, (u, v) => ring(u, v) === 1 && (u + v) % 4 === 0);\n    const text = (s, u0, v0, c) => {\n      for (let i = 0; i \u003c s.length; i++) {\n        const g = FONT[s[i]];\n        if (g) put(c, (u, v) => u >= u0 + 4 * i && u \u003c u0 + 4 * i + 3 && v >= v0 && v \u003c v0 + 5 && g[(v - v0) * 3 + (u - u0 - 4 * i)] === \"1\");\n      }\n    };\n    text(\"ABCDEFG\", 2, 4, 9);\n    text(\"HIJKLMN\", 2, 11, 17);\n    text(\"OPQRSTU\", 2, 18, 4);\n    text(\"VWXYZ\", 6, 25, 13);\n    put(3, (u, v) => v >= 31 && v \u003c= 33 && Math.abs((u % 4) - 1.5) + Math.abs(v - 32) \u003c= 1.5 && ring(u, v) > 1);\n    put(4, (u, v) => v === 32 && u % 4 === 3 && ring(u, v) > 1);\n    // House: roof, chimney, walls, door and windows.\n    P(13, 15.5, 36, 24, 42, 7, 42);\n    R(13, 20, 36, 21, 39);\n    R(25, 9, 42, 22, 50);\n    R(11, 15, 46, 16, 50);\n    for (const x of [11, 19]) {\n      R(9, x, 44, x + 1, 45);\n      R(7, x, 47, x + 1, 47);\n    }\n    // Trees and birds.\n    for (const x of [4, 27]) {\n      P(5, x, 37, x + 2.6, 47, x - 2.6, 47);\n      P(4, x, 41, x + 2.6, 47, x - 2.6, 47);\n      R(13, x, 48, x, 50);\n    }\n    for (const [x, y] of [[6, 33], [26, 34]]) {\n      R(9, x, y, x + 1, y);\n      R(9, x - 1, y - 1, x - 1, y - 1);\n      R(9, x + 2, y - 1, x + 2, y - 1);\n    }\n    R(5, 2, 51, 29, 51);\n    text(\"1851\", 8, 53, 17);\n  },\n];\n\n// Paint a chart into one wool index per stitch.\nfunction buildChart(art) {\n  const col = new Uint8Array(NS);\n  const put = (c, f) => {\n    for (let v = 0; v \u003c SV; v++) for (let u = 0; u \u003c SU; u++) if (f(u, v)) col[v * SU + u] = c;\n  };\n  const D = (c, cx, cy, rx, ry) => put(c, (u, v) => ((u - cx) / rx) ** 2 + ((v - cy) / (ry || rx)) ** 2 \u003c= 1);\n  const R = (c, u0, v0, u1, v1) => put(c, (u, v) => u >= u0 && u \u003c= u1 && v >= v0 && v \u003c= v1);\n  const P = (c, ...q) => put(c, (u, v) => inPoly(u, v, q));\n  const L = (c, x0, y0, x1, y1, w) => put(c, (u, v) => segDist(u, v, x0, y0, x1, y1) \u003c= w);\n  // A leaf from its stalk to its tip, w wide at the middle, with a paler midrib.\n  const F = (c, x0, y0, x1, y1, w) => {\n    put(c, (u, v) => {\n      const t = segT(u, v, x0, y0, x1, y1);\n      return segDist(u, v, x0, y0, x1, y1) \u003c= w * 2 * Math.sqrt(t * (1 - t)) + 0.3;\n    });\n    put(c === 4 ? 5 : 6, (u, v) => {\n      const t = segT(u, v, x0, y0, x1, y1);\n      return t > 0.15 && t \u003c 0.8 && segDist(u, v, x0, y0, x1, y1) \u003c 0.5;\n    });\n  };\n  art(D, R, P, L, F, put);\n  return col;\n}\n\n// Basketweave: diagonal rows from the top right corner, down one row and up the next.\nconst ORDER = new Int16Array(NS);\nconst RANK = new Int16Array(NS);\nconst DOWN = new Uint8Array(NS);\n{\n  let n = 0;\n  for (let d = 0; d \u003c= SU - 1 + SV - 1; d++) {\n    const v0 = Math.max(0, d - (SU - 1));\n    const v1 = Math.min(SV - 1, d);\n    for (let i = 0; i \u003c= v1 - v0; i++) {\n      const v = d % 2 === 0 ? v0 + i : v1 - i;\n      const u = SU - 1 - d + v;\n      const s = v * SU + u;\n      ORDER[n] = s;\n      RANK[s] = n++;\n      DOWN[s] = d % 2 === 0 ? 1 : 0;\n    }\n  }\n}\n\nfunction hueTurn(c, turn) {\n  // Rotate a colour round the grey axis, which keeps its level and saturation close.\n  const a = turn * 2 * Math.PI;\n  const cs = Math.cos(a);\n  const sn = Math.sin(a);\n  const k = (1 - cs) / 3;\n  const q = Math.sqrt(1 / 3) * sn;\n  const m0 = cs + k;\n  const m1 = k - q;\n  const m2 = k + q;\n  return [\n    clamp(c[0] * m0 + c[1] * m1 + c[2] * m2, 0, 255),\n    clamp(c[0] * m2 + c[1] * m0 + c[2] * m1, 0, 255),\n    clamp(c[0] * m1 + c[1] * m2 + c[2] * m0, 0, 255),\n  ];\n}\n\nexport function setup(params) {\n  const P = params;\n  P.charts = CHARTS.map(buildChart);\n  P.buf = new Float32Array(N * 3);\n  P.light = new Float32Array(N);\n  P.jit = new Float32Array(N * 3);\n  P.tone = new Float32Array(NS);\n  for (let i = 0; i \u003c N * 3; i++) P.jit[i] = clamp(Math.round(Math.random() + Math.random() - 1), -1, 1);\n  for (let s = 0; s \u003c NS; s++) P.tone[s] = 0.93 + 0.12 * Math.random();\n  P.wool = [];\n  P.print = [];\n  P.woolKey = -1;\n  P.lampKey = -1;\n  P.t = 0;\n  P.started = false;\n}\n\nfunction begin(P, d) {\n  P.design = d;\n  P.k = 0;\n  P.phase = STITCH;\n}\n\nfunction startRoll(P, to) {\n  P.next = to;\n  P.phase = ROLLING;\n  P.rollFrom = P.t;\n}\n\nfunction step(P, dt, speed) {\n  P.t += dt;\n  if (P.phase === STITCH) {\n    P.k = Math.min(NS, P.k + dt * RATE * speed);\n    if (P.k >= NS) {\n      P.phase = HOLDING;\n      P.until = P.t + HOLD;\n    }\n  } else if (P.phase === HOLDING) {\n    if (P.t >= P.until) startRoll(P, (P.design + 1) % CHARTS.length);\n  } else if (P.t - P.rollFrom >= P.rollDur) begin(P, P.next);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const wool = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const pick = Math.round(clamp(k[2], 0, 2));\n  P.lamp = clamp(k[3], 0, 1);\n  P.rollDur = ROLL * Math.sqrt(2 / speed);\n  if (wool !== P.woolKey) {\n    P.woolKey = wool;\n    for (let i = 0; i \u003c WOOL.length; i++) {\n      const c = hueTurn(WOOL[i], wool);\n      P.wool[i] = c;\n      // The printed chart is a pale wash of the wool over the ecru canvas.\n      const m = [0, 1, 2].map((ch) => 0.7 * c[ch] + 0.3 * ECRU[ch]);\n      const top = Math.max(m[0], m[1], m[2], 1);\n      P.print[i] = m.map((x) => (x / top) * PRINT);\n    }\n    const e = Math.max(...ECRU);\n    P.print[0] = ECRU.map((x) => (x / e) * PRINT * 0.72);\n  }\n  if (!P.started) {\n    P.started = true;\n    P.pick = pick;\n    begin(P, pick);\n    // The canvas has been on the frame a while: over a quarter of it is worked, and seven more\n    // seconds go by at the knob's pace before the panel opens.\n    P.k = 0.28 * NS;\n    for (let i = 0; i \u003c 70; i++) step(P, 0.1, speed);\n  }\n  if (pick !== P.pick) {\n    P.pick = pick;\n    if (P.phase === ROLLING) P.next = pick;\n    else startRoll(P, pick);\n  }\n  step(P, dt, speed);\n}\n\n// Light from the lamp on each LED, and how far it rakes: -1 from the left, 1 from the right.\nfunction lampLight(P) {\n  if (P.lampKey === P.lamp) return;\n  P.lampKey = P.lamp;\n  // The lamp swings on an arc round the frame, from low on the left over the top to low on the right.\n  const a = (P.lamp * 2 - 1) * 1.3;\n  const lx = 32 + 96 * Math.sin(a);\n  const ly = 56 - 104 * Math.cos(a);\n  for (let p = 0; p \u003c N; p++) {\n    const dx = (p % W) - lx;\n    const dy = Math.floor(p / W) - ly;\n    P.light[p] = 0.52 + 0.68 / (1 + (dx * dx + dy * dy) / 8000);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  lampLight(P);\n  const buf = P.buf;\n  const { light, jit, tone, wool, print } = P;\n  const s = P.lamp * 2 - 1;\n  const shineLL = 1 - SHEEN * s;\n  const shineUR = 1 + SHEEN * s;\n  const gapUL = GAP - RAKE * s;\n  const gapLR = GAP + RAKE * s;\n  const rolling = P.phase === ROLLING;\n  const off = rolling ? Math.round(clamp((P.t - P.rollFrom) / P.rollDur, 0, 1) * CH) : 0;\n  const cur = P.charts[P.design];\n  const nxt = rolling ? P.charts[P.next] : cur;\n  const k = P.k;\n  // The rollers: turned wood, the grain running round them as they turn.\n  for (let y = 0; y \u003c H; y++) {\n    if (y >= Y0 && y \u003c Y0 + CH) continue;\n    const ry = y \u003c Y0 ? y : y - Y0 - CH;\n    const sh = [0.5, 0.95, 0.8, 0.45][ry];\n    const turn = y \u003c Y0 ? -off : off;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const g = 0.82 + 0.18 * Math.sin(x * 0.7 + ry * 2.1 + Math.sin((x + turn) * 0.23) * 3);\n      const o = p * 3;\n      buf[o] = 168 * sh * g;\n      buf[o + 1] = 108 * sh * g;\n      buf[o + 2] = 56 * sh * g;\n    }\n  }\n  for (let y = Y0; y \u003c Y0 + CH; y++) {\n    let r = y - Y0 - off;\n    let chart = cur;\n    let done = k;\n    let ground = GROUND[P.design];\n    if (r \u003c 0) {\n      r += CH;\n      chart = nxt;\n      done = 0;\n      ground = GROUND[P.next];\n    }\n    const v = r >> 1;\n    const lower = r & 1;\n    for (let x = 0; x \u003c W; x++) {\n      const u = x >> 1;\n      const right = x & 1;\n      const st = v * SU + u;\n      const c = chart[st];\n      const p = y * W + x;\n      const o = p * 3;\n      const L = light[p];\n      let f;\n      let col;\n      if (RANK[st] \u003c done) {\n        col = wool[c];\n        // Upper right and lower left are the stitch; the other two are the holes beside it.\n        if (right !== lower) f = (right ? shineUR : shineLL) * tone[st] * L;\n        else f = (right ? gapLR : gapUL) * L;\n      } else {\n        col = print[c === ground ? 0 : c];\n        f = right && lower ? 0.12 : Math.sqrt(L);\n      }\n      let r0 = col[0] * f;\n      let g0 = col[1] * f;\n      let b0 = col[2] * f;\n      // Wool grain, in the weaker channels only.\n      const mx = Math.max(r0, g0, b0);\n      const amp = Math.min(1, mx / 60) * JIT;\n      if (r0 !== mx) r0 += jit[o] * amp;\n      if (g0 !== mx) g0 += jit[o + 1] * amp;\n      if (b0 !== mx) b0 += jit[o + 2] * amp;\n      buf[o] = r0;\n      buf[o + 1] = g0;\n      buf[o + 2] = b0;\n    }\n  }\n  if (P.phase === STITCH && k \u003c NS) drawNeedle(P, cur, buf);\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), clamp(buf[o], 0, 255), clamp(buf[o + 1], 0, 255), clamp(buf[o + 2], 0, 255));\n  }\n}\n\nfunction dot(buf, x, y, c) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let ch = 0; ch \u003c 3; ch++) buf[o + ch] = c[ch];\n}\n\n// The needle lies slanting on the bare canvas with its point in the next hole, and the\n// slack wool hangs in a loop from the last stitch down and up to its eye.\nfunction drawNeedle(P, chart, buf) {\n  const n = Math.floor(P.k);\n  const st = ORDER[n];\n  const u = st % SU;\n  const v = (st - u) / SU;\n  const tx = 2 * u;\n  const ty = Y0 + 2 * v + 1;\n  // On a row going down the needle lies nearly upright, on a row going up nearly level,\n  // the way basketweave is worked.\n  const dx = DOWN[st] ? -0.55 : -1;\n  const dy = DOWN[st] ? 1 : 0.55;\n  const ex = tx + dx * 7;\n  const ey = ty + dy * 7;\n  const wc = P.wool[chart[st]];\n  const yarn = [0, 1, 2].map((ch) => Math.min(255, wc[ch] * 1.25 + 24));\n  const prev = n > 0 ? ORDER[n - 1] : st;\n  const pu = prev % SU;\n  const px = 2 * pu + 1;\n  const py = Y0 + 2 * ((prev - pu) / SU);\n  // The loop swings a little as the needle is pulled through.\n  const sway = Math.sin(P.t * 2.3) * 3;\n  const sag = 13 + 2 * Math.sin(P.t * 1.7);\n  const c1x = px + 7 + sway;\n  const c1y = py + sag;\n  const c2x = ex + 1 + sway;\n  const c2y = ey + sag;\n  for (let i = 0; i \u003c= 40; i++) {\n    const t = i / 40;\n    const a = (1 - t) ** 3;\n    const b = 3 * t * (1 - t) ** 2;\n    const c = 3 * t * t * (1 - t);\n    const d = t ** 3;\n    dot(buf, a * px + b * c1x + c * c2x + d * ex, a * py + b * c1y + c * c2y + d * ey, yarn);\n  }\n  // The steel: a bright point, the shaft and the eye.\n  for (let i = 0; i \u003c= 8; i++) {\n    const g = i === 7 ? 0.4 : i === 0 ? 1 : 0.85;\n    dot(buf, tx + dx * i, ty + dy * i, [205 * g, 212 * g, 226 * g]);\n  }\n}\n","layer":{"id":"layer-needlepoint","type":"code","name":"needlepoint","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Needlepoint\n// Family:  textile\n// Idea:    A needle and wool work a printed canvas in tent stitch on a slate frame, diagonal row after diagonal row from the top right corner, each stitch two lit LEDs across a dark hole, until a parrot cushion, a Berlin rose bouquet or an alphabet sampler is filled in and the frame rolls on a fresh canvas.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after Berlin woolwork, the tent stitch pictures worked from printed charts in the nineteenth century\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Wool=0..1, Speed=0.2..3, Design=0..2, Lamp=0..1\n//\n// Knob 1: Wool. Turns every wool in the box round the dye wheel together, starting from the natural shades: a green parrot on a teal ground.\n// Knob 2: Speed. Stitches a second, 7 at 0.2, 72 at 2 and 108 at 3; at 2 the 1920 stitches of a canvas take 27 seconds.\n// Knob 3: Design. Which canvas is on the frame: the parrot cushion, the rose bouquet on black or the sampler with its alphabet and house; turning it rolls the work on to that canvas, and after it the canvases follow in that order.\n// Knob 4: Lamp. Where the lamp stands, low on the left at 0, overhead at 0.5, low on the right at 1; the side of each stitch that faces it shines and the far side of the hole falls into shadow.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The canvas is 32 stitches across and 60 down, each stitch a 2 by 2 LED cell, between the\n// slate frame's two rollers of 4 rows.\nconst SU = 32;\nconst SV = 60;\nconst NS = SU * SV;\nconst Y0 = 4;\nconst CH = SV * 2;\n// Stitches a second for each unit of Speed, the hold on a finished canvas and the roll on.\nconst RATE = 36;\nconst HOLD = 3.5;\nconst ROLL = 2.4;\nconst STITCH = 0;\nconst HOLDING = 1;\nconst ROLLING = 2;\n// A stitch's two yarn LEDs at full wool; the hole between stitches gets GAP of the wool\n// on the lamp's side and less on the other. Bare canvas threads sit near PRINT of 255,\n// the ground left plain ecru and the motifs printed in a wash of their wool.\nconst GAP = 0.15;\nconst RAKE = 0.1;\nconst SHEEN = 0.18;\nconst PRINT = 34;\n// Grain of the wool: about one fibre in four is JIT levels off in a weaker channel. The\n// strongest channel is left alone, so the grain shows as tint, not as brightness.\nconst JIT = 10;\n\n// The wool box. Index 0 is never used.\nconst WOOL = [\n  [0, 0, 0],\n  [36, 122, 170], // 1 teal ground\n  [134, 28, 46], // 2 maroon\n  [220, 170, 56], // 3 old gold\n  [30, 96, 46], // 4 dark green\n  [70, 160, 56], // 5 green\n  [154, 212, 70], // 6 light green\n  [238, 208, 52], // 7 yellow\n  [222, 54, 40], // 8 scarlet\n  [46, 76, 196], // 9 royal blue\n  [230, 222, 196], // 10 ivory\n  [44, 36, 34], // 11 near black\n  [126, 78, 40], // 12 brown\n  [80, 50, 30], // 13 dark brown\n  [240, 136, 34], // 14 orange\n  [150, 150, 164], // 15 grey\n  [34, 30, 56], // 16 Berlin black\n  [128, 18, 40], // 17 deep crimson\n  [206, 50, 82], // 18 rose\n  [238, 118, 152], // 19 pink\n  [250, 194, 210], // 20 pale pink\n  [244, 222, 120], // 21 pale yellow\n  [146, 92, 196], // 22 lilac\n  [92, 142, 226], // 23 cornflower\n  [222, 204, 156], // 24 cream ground\n  [168, 64, 40], // 25 brick\n];\nconst ECRU = [230, 220, 186];\n// The ground wool of each chart, which the printer leaves off the canvas.\nconst GROUND = [1, 16, 24];\n\n// A 3 by 5 alphabet for the sampler, and the three digits of its year.\nconst FONT = {};\n\"A010101111101101B110101110101110C011100100100011D110101101101110E111100110100111F111100110100100G011100101101011H101101111101101I111010010010111J001001001101010K101101110101101L100100100100111M101111111101101N110101101101101O010101101101010P110101110100100Q010101101110011R110101110101101S011100010001110T111010010010010U101101101101111V101101101101010W101101111111101X101101010101101Y101101010010010Z111001010100111101011001001011181111011111011115111100110001110\"\n  .match(/[A-Z1-9][01]{15}/g)\n  .forEach((g) => (FONT[g[0]] = g.slice(1)));\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction inPoly(x, y, q) {\n  let inside = false;\n  for (let i = 0, j = q.length - 2; i \u003c q.length; j = i, i += 2) {\n    const xi = q[i];\n    const yi = q[i + 1];\n    const xj = q[j];\n    const yj = q[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;\n  }\n  return inside;\n}\n\nfunction segT(x, y, x0, y0, x1, y1) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  return clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n}\n\nfunction segDist(x, y, x0, y0, x1, y1) {\n  const t = segT(x, y, x0, y0, x1, y1);\n  return Math.hypot(x - x0 - t * (x1 - x0), y - y0 - t * (y1 - y0));\n}\n\n// How far in from the edge of the canvas a stitch is: 0 on the outer row.\nconst ring = (u, v) => Math.min(u, SU - 1 - u, v, SV - 1 - v);\n\n// A Berlin rose: shaded from a deep heart to pale outer petals, with curled petal edges.\nfunction rose(put, cx, cy, r, tones) {\n  for (let i = 0; i \u003c 4; i++)\n    put(tones[i], (u, v) => {\n      const d = Math.hypot(u - cx, v - cy) / r;\n      if (d > 1) return false;\n      const a = Math.atan2(v - cy, u - cx);\n      const t = 0.15 + 0.8 * d + 0.22 * Math.sin(5 * a + 7 * d);\n      return Math.min(3, Math.floor(clamp(t, 0, 0.999) * 4)) === i;\n    });\n}\n\n// The three charts, painted stitch by stitch: discs, boxes, polygons, thick lines, leaves.\nconst CHARTS = [\n  // Parrot cushion: a green Amazon parrot with a yellow crown on an orange branch.\n  (D, R, P, L, F, put) => {\n    put(1, () => true);\n    put(2, (u, v) => ring(u, v) === 0 || (ring(u, v) === 1 && (u + v) % 4 === 0));\n    put(3, (u, v) => ring(u, v) === 1 && (u + v) % 4 !== 0);\n    put(10, (u, v) => ring(u, v) === 2 && (u + v) % 4 === 2);\n    // Corner sprigs of cornflowers.\n    for (const [x, y, s] of [[4, 50, 1], [27, 52, -1], [27, 6, -1], [4, 8, 1]]) {\n      F(4, x, y + 4 * Math.sign(y - 30), x + 3 * s, y, 1.6);\n      D(23, x + 3 * s, y, 1.6);\n      D(9, x + 3 * s, y, 0.6);\n    }\n    // The branch and its leaves and fruit.\n    L(12, 2, 41, 30, 36, 1.4);\n    L(13, 2, 42.5, 30, 37.5, 0.6);\n    L(12, 24, 37, 29, 29, 0.9);\n    F(4, 6, 41, 3, 33, 1.7);\n    F(5, 8, 40, 12, 46, 1.6);\n    F(4, 27, 35, 30, 42, 1.6);\n    F(5, 28, 31, 25, 25, 1.5);\n    D(14, 5, 45, 2);\n    D(7, 4.5, 44.5, 0.6);\n    D(14, 22, 41.5, 1.8);\n    D(7, 21.5, 41, 0.6);\n    // The tail, long and green with a red bar and yellow tips.\n    P(5, 12, 36, 18, 36, 19, 55, 12, 55);\n    put(8, (u, v) => v >= 45 && v \u003c= 46 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    put(6, (u, v) => v >= 52 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    put(4, (u, v) => v > 36 && (u === 15 || u === 16) && v \u003c 52 && inPoly(u, v, [12, 36, 18, 36, 19, 55, 12, 55]));\n    // Body, belly and wing with blue flight feathers and a red shoulder.\n    D(5, 15.5, 26, 6, 10.5);\n    D(6, 17.5, 27, 3.4, 7.5);\n    D(4, 12.5, 28, 4.3, 8.5);\n    put(9, (u, v) => ((u - 12.5) / 4.3) ** 2 + ((v - 28) / 8.5) ** 2 \u003c= 1 && v > 31 && (u + v) % 3 !== 0);\n    put(23, (u, v) => ((u - 12.5) / 4.3) ** 2 + ((v - 28) / 8.5) ** 2 \u003c= 1 && v > 31 && (u + v) % 3 === 0);\n    D(8, 11.5, 23, 2, 1.6);\n    // Head, crown, eye and beak.\n    D(5, 17, 15, 5, 4.6);\n    D(7, 17, 12, 4, 2.6);\n    D(6, 18, 17.5, 3, 1.4);\n    D(10, 19, 14, 1.3);\n    D(11, 19.2, 14, 0.5);\n    P(10, 21, 13, 24.5, 14.5, 23.5, 19, 21, 17.5);\n    P(11, 21, 17.5, 23, 18.5, 21.5, 19.5);\n    // Feet round the branch.\n    R(15, 14, 36, 14, 39);\n    R(15, 17, 36, 18, 38);\n  },\n  // Rose bouquet on black: three roses, buds, blue convolvulus and lilac, tied with a gold bow.\n  (D, R, P, L, F, put) => {\n    put(16, () => true);\n    put(4, (u, v) => ring(u, v) === 0);\n    put(3, (u, v) => ring(u, v) === 1 && (u + 2 * v) % 6 === 0);\n    // Stems gathered into the bow.\n    for (const [x, y] of [[15, 30], [10, 40], [23, 40], [6, 22], [26, 20]]) L(4, x, y, 16, 51, 0.6);\n    L(4, 16, 51, 13, 56, 0.6);\n    L(4, 16, 51, 19, 56, 0.6);\n    // Leaves round the flowers.\n    for (const [x0, y0, x1, y1] of [[8, 28, 2, 23], [24, 28, 30, 22], [6, 46, 1, 51], [25, 46, 30, 52], [16, 30, 12, 36], [17, 31, 21, 36], [12, 13, 7, 8], [21, 12, 26, 7], [4, 34, 2, 41], [28, 34, 30, 41]])\n      F(Math.abs(x0 - 16) > 9 ? 4 : 5, x0, y0, x1, y1, 2);\n    // Lilac sprays and convolvulus.\n    for (let i = 0; i \u003c 14; i++) D(22, 4 + (i % 3) * 1.6 + Math.floor(i / 3) * 0.4, 14 + Math.floor(i / 3) * 1.8 - (i % 3) * 0.5, 0.7);\n    for (let i = 0; i \u003c 12; i++) D(22, 26 - (i % 3) * 1.5, 12 + Math.floor(i / 3) * 1.9 + (i % 3) * 0.4, 0.7);\n    for (const [x, y] of [[4, 31], [28, 31], [16, 6]]) {\n      D(23, x, y, 2.2);\n      D(10, x, y, 0.7);\n    }\n    // Buds.\n    for (const [x, y] of [[9, 9], [23, 8], [3, 44], [29, 45]]) {\n      D(18, x, y, 1.2, 1.8);\n      put(5, (u, v) => Math.abs(u - x) \u003c= 1 && v === y + 2);\n    }\n    rose(put, 16, 20, 7.6, [17, 18, 19, 20]);\n    rose(put, 9, 37, 5.6, [3, 7, 21, 10]);\n    rose(put, 23, 37, 5.6, [17, 8, 18, 19]);\n    // The bow.\n    P(3, 16, 51, 10, 48, 10, 54);\n    P(3, 16, 51, 22, 48, 22, 54);\n    D(7, 16, 51, 1.2);\n  },\n  // Sampler on cream: the alphabet, a band of diamonds, a brick house between two trees, the year.\n  (D, R, P, L, F, put) => {\n    put(24, () => true);\n    put(4, (u, v) => ring(u, v) === 0);\n    put(8, (u, v) => ring(u, v) === 1 && (u + v) % 4 === 0);\n    const text = (s, u0, v0, c) => {\n      for (let i = 0; i \u003c s.length; i++) {\n        const g = FONT[s[i]];\n        if (g) put(c, (u, v) => u >= u0 + 4 * i && u \u003c u0 + 4 * i + 3 && v >= v0 && v \u003c v0 + 5 && g[(v - v0) * 3 + (u - u0 - 4 * i)] === \"1\");\n      }\n    };\n    text(\"ABCDEFG\", 2, 4, 9);\n    text(\"HIJKLMN\", 2, 11, 17);\n    text(\"OPQRSTU\", 2, 18, 4);\n    text(\"VWXYZ\", 6, 25, 13);\n    put(3, (u, v) => v >= 31 && v \u003c= 33 && Math.abs((u % 4) - 1.5) + Math.abs(v - 32) \u003c= 1.5 && ring(u, v) > 1);\n    put(4, (u, v) => v === 32 && u % 4 === 3 && ring(u, v) > 1);\n    // House: roof, chimney, walls, door and windows.\n    P(13, 15.5, 36, 24, 42, 7, 42);\n    R(13, 20, 36, 21, 39);\n    R(25, 9, 42, 22, 50);\n    R(11, 15, 46, 16, 50);\n    for (const x of [11, 19]) {\n      R(9, x, 44, x + 1, 45);\n      R(7, x, 47, x + 1, 47);\n    }\n    // Trees and birds.\n    for (const x of [4, 27]) {\n      P(5, x, 37, x + 2.6, 47, x - 2.6, 47);\n      P(4, x, 41, x + 2.6, 47, x - 2.6, 47);\n      R(13, x, 48, x, 50);\n    }\n    for (const [x, y] of [[6, 33], [26, 34]]) {\n      R(9, x, y, x + 1, y);\n      R(9, x - 1, y - 1, x - 1, y - 1);\n      R(9, x + 2, y - 1, x + 2, y - 1);\n    }\n    R(5, 2, 51, 29, 51);\n    text(\"1851\", 8, 53, 17);\n  },\n];\n\n// Paint a chart into one wool index per stitch.\nfunction buildChart(art) {\n  const col = new Uint8Array(NS);\n  const put = (c, f) => {\n    for (let v = 0; v \u003c SV; v++) for (let u = 0; u \u003c SU; u++) if (f(u, v)) col[v * SU + u] = c;\n  };\n  const D = (c, cx, cy, rx, ry) => put(c, (u, v) => ((u - cx) / rx) ** 2 + ((v - cy) / (ry || rx)) ** 2 \u003c= 1);\n  const R = (c, u0, v0, u1, v1) => put(c, (u, v) => u >= u0 && u \u003c= u1 && v >= v0 && v \u003c= v1);\n  const P = (c, ...q) => put(c, (u, v) => inPoly(u, v, q));\n  const L = (c, x0, y0, x1, y1, w) => put(c, (u, v) => segDist(u, v, x0, y0, x1, y1) \u003c= w);\n  // A leaf from its stalk to its tip, w wide at the middle, with a paler midrib.\n  const F = (c, x0, y0, x1, y1, w) => {\n    put(c, (u, v) => {\n      const t = segT(u, v, x0, y0, x1, y1);\n      return segDist(u, v, x0, y0, x1, y1) \u003c= w * 2 * Math.sqrt(t * (1 - t)) + 0.3;\n    });\n    put(c === 4 ? 5 : 6, (u, v) => {\n      const t = segT(u, v, x0, y0, x1, y1);\n      return t > 0.15 && t \u003c 0.8 && segDist(u, v, x0, y0, x1, y1) \u003c 0.5;\n    });\n  };\n  art(D, R, P, L, F, put);\n  return col;\n}\n\n// Basketweave: diagonal rows from the top right corner, down one row and up the next.\nconst ORDER = new Int16Array(NS);\nconst RANK = new Int16Array(NS);\nconst DOWN = new Uint8Array(NS);\n{\n  let n = 0;\n  for (let d = 0; d \u003c= SU - 1 + SV - 1; d++) {\n    const v0 = Math.max(0, d - (SU - 1));\n    const v1 = Math.min(SV - 1, d);\n    for (let i = 0; i \u003c= v1 - v0; i++) {\n      const v = d % 2 === 0 ? v0 + i : v1 - i;\n      const u = SU - 1 - d + v;\n      const s = v * SU + u;\n      ORDER[n] = s;\n      RANK[s] = n++;\n      DOWN[s] = d % 2 === 0 ? 1 : 0;\n    }\n  }\n}\n\nfunction hueTurn(c, turn) {\n  // Rotate a colour round the grey axis, which keeps its level and saturation close.\n  const a = turn * 2 * Math.PI;\n  const cs = Math.cos(a);\n  const sn = Math.sin(a);\n  const k = (1 - cs) / 3;\n  const q = Math.sqrt(1 / 3) * sn;\n  const m0 = cs + k;\n  const m1 = k - q;\n  const m2 = k + q;\n  return [\n    clamp(c[0] * m0 + c[1] * m1 + c[2] * m2, 0, 255),\n    clamp(c[0] * m2 + c[1] * m0 + c[2] * m1, 0, 255),\n    clamp(c[0] * m1 + c[1] * m2 + c[2] * m0, 0, 255),\n  ];\n}\n\nexport function setup(params) {\n  const P = params;\n  P.charts = CHARTS.map(buildChart);\n  P.buf = new Float32Array(N * 3);\n  P.light = new Float32Array(N);\n  P.jit = new Float32Array(N * 3);\n  P.tone = new Float32Array(NS);\n  for (let i = 0; i \u003c N * 3; i++) P.jit[i] = clamp(Math.round(Math.random() + Math.random() - 1), -1, 1);\n  for (let s = 0; s \u003c NS; s++) P.tone[s] = 0.93 + 0.12 * Math.random();\n  P.wool = [];\n  P.print = [];\n  P.woolKey = -1;\n  P.lampKey = -1;\n  P.t = 0;\n  P.started = false;\n}\n\nfunction begin(P, d) {\n  P.design = d;\n  P.k = 0;\n  P.phase = STITCH;\n}\n\nfunction startRoll(P, to) {\n  P.next = to;\n  P.phase = ROLLING;\n  P.rollFrom = P.t;\n}\n\nfunction step(P, dt, speed) {\n  P.t += dt;\n  if (P.phase === STITCH) {\n    P.k = Math.min(NS, P.k + dt * RATE * speed);\n    if (P.k >= NS) {\n      P.phase = HOLDING;\n      P.until = P.t + HOLD;\n    }\n  } else if (P.phase === HOLDING) {\n    if (P.t >= P.until) startRoll(P, (P.design + 1) % CHARTS.length);\n  } else if (P.t - P.rollFrom >= P.rollDur) begin(P, P.next);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const wool = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const pick = Math.round(clamp(k[2], 0, 2));\n  P.lamp = clamp(k[3], 0, 1);\n  P.rollDur = ROLL * Math.sqrt(2 / speed);\n  if (wool !== P.woolKey) {\n    P.woolKey = wool;\n    for (let i = 0; i \u003c WOOL.length; i++) {\n      const c = hueTurn(WOOL[i], wool);\n      P.wool[i] = c;\n      // The printed chart is a pale wash of the wool over the ecru canvas.\n      const m = [0, 1, 2].map((ch) => 0.7 * c[ch] + 0.3 * ECRU[ch]);\n      const top = Math.max(m[0], m[1], m[2], 1);\n      P.print[i] = m.map((x) => (x / top) * PRINT);\n    }\n    const e = Math.max(...ECRU);\n    P.print[0] = ECRU.map((x) => (x / e) * PRINT * 0.72);\n  }\n  if (!P.started) {\n    P.started = true;\n    P.pick = pick;\n    begin(P, pick);\n    // The canvas has been on the frame a while: over a quarter of it is worked, and seven more\n    // seconds go by at the knob's pace before the panel opens.\n    P.k = 0.28 * NS;\n    for (let i = 0; i \u003c 70; i++) step(P, 0.1, speed);\n  }\n  if (pick !== P.pick) {\n    P.pick = pick;\n    if (P.phase === ROLLING) P.next = pick;\n    else startRoll(P, pick);\n  }\n  step(P, dt, speed);\n}\n\n// Light from the lamp on each LED, and how far it rakes: -1 from the left, 1 from the right.\nfunction lampLight(P) {\n  if (P.lampKey === P.lamp) return;\n  P.lampKey = P.lamp;\n  // The lamp swings on an arc round the frame, from low on the left over the top to low on the right.\n  const a = (P.lamp * 2 - 1) * 1.3;\n  const lx = 32 + 96 * Math.sin(a);\n  const ly = 56 - 104 * Math.cos(a);\n  for (let p = 0; p \u003c N; p++) {\n    const dx = (p % W) - lx;\n    const dy = Math.floor(p / W) - ly;\n    P.light[p] = 0.52 + 0.68 / (1 + (dx * dx + dy * dy) / 8000);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  lampLight(P);\n  const buf = P.buf;\n  const { light, jit, tone, wool, print } = P;\n  const s = P.lamp * 2 - 1;\n  const shineLL = 1 - SHEEN * s;\n  const shineUR = 1 + SHEEN * s;\n  const gapUL = GAP - RAKE * s;\n  const gapLR = GAP + RAKE * s;\n  const rolling = P.phase === ROLLING;\n  const off = rolling ? Math.round(clamp((P.t - P.rollFrom) / P.rollDur, 0, 1) * CH) : 0;\n  const cur = P.charts[P.design];\n  const nxt = rolling ? P.charts[P.next] : cur;\n  const k = P.k;\n  // The rollers: turned wood, the grain running round them as they turn.\n  for (let y = 0; y \u003c H; y++) {\n    if (y >= Y0 && y \u003c Y0 + CH) continue;\n    const ry = y \u003c Y0 ? y : y - Y0 - CH;\n    const sh = [0.5, 0.95, 0.8, 0.45][ry];\n    const turn = y \u003c Y0 ? -off : off;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const g = 0.82 + 0.18 * Math.sin(x * 0.7 + ry * 2.1 + Math.sin((x + turn) * 0.23) * 3);\n      const o = p * 3;\n      buf[o] = 168 * sh * g;\n      buf[o + 1] = 108 * sh * g;\n      buf[o + 2] = 56 * sh * g;\n    }\n  }\n  for (let y = Y0; y \u003c Y0 + CH; y++) {\n    let r = y - Y0 - off;\n    let chart = cur;\n    let done = k;\n    let ground = GROUND[P.design];\n    if (r \u003c 0) {\n      r += CH;\n      chart = nxt;\n      done = 0;\n      ground = GROUND[P.next];\n    }\n    const v = r >> 1;\n    const lower = r & 1;\n    for (let x = 0; x \u003c W; x++) {\n      const u = x >> 1;\n      const right = x & 1;\n      const st = v * SU + u;\n      const c = chart[st];\n      const p = y * W + x;\n      const o = p * 3;\n      const L = light[p];\n      let f;\n      let col;\n      if (RANK[st] \u003c done) {\n        col = wool[c];\n        // Upper right and lower left are the stitch; the other two are the holes beside it.\n        if (right !== lower) f = (right ? shineUR : shineLL) * tone[st] * L;\n        else f = (right ? gapLR : gapUL) * L;\n      } else {\n        col = print[c === ground ? 0 : c];\n        f = right && lower ? 0.12 : Math.sqrt(L);\n      }\n      let r0 = col[0] * f;\n      let g0 = col[1] * f;\n      let b0 = col[2] * f;\n      // Wool grain, in the weaker channels only.\n      const mx = Math.max(r0, g0, b0);\n      const amp = Math.min(1, mx / 60) * JIT;\n      if (r0 !== mx) r0 += jit[o] * amp;\n      if (g0 !== mx) g0 += jit[o + 1] * amp;\n      if (b0 !== mx) b0 += jit[o + 2] * amp;\n      buf[o] = r0;\n      buf[o + 1] = g0;\n      buf[o + 2] = b0;\n    }\n  }\n  if (P.phase === STITCH && k \u003c NS) drawNeedle(P, cur, buf);\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), clamp(buf[o], 0, 255), clamp(buf[o + 1], 0, 255), clamp(buf[o + 2], 0, 255));\n  }\n}\n\nfunction dot(buf, x, y, c) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  for (let ch = 0; ch \u003c 3; ch++) buf[o + ch] = c[ch];\n}\n\n// The needle lies slanting on the bare canvas with its point in the next hole, and the\n// slack wool hangs in a loop from the last stitch down and up to its eye.\nfunction drawNeedle(P, chart, buf) {\n  const n = Math.floor(P.k);\n  const st = ORDER[n];\n  const u = st % SU;\n  const v = (st - u) / SU;\n  const tx = 2 * u;\n  const ty = Y0 + 2 * v + 1;\n  // On a row going down the needle lies nearly upright, on a row going up nearly level,\n  // the way basketweave is worked.\n  const dx = DOWN[st] ? -0.55 : -1;\n  const dy = DOWN[st] ? 1 : 0.55;\n  const ex = tx + dx * 7;\n  const ey = ty + dy * 7;\n  const wc = P.wool[chart[st]];\n  const yarn = [0, 1, 2].map((ch) => Math.min(255, wc[ch] * 1.25 + 24));\n  const prev = n > 0 ? ORDER[n - 1] : st;\n  const pu = prev % SU;\n  const px = 2 * pu + 1;\n  const py = Y0 + 2 * ((prev - pu) / SU);\n  // The loop swings a little as the needle is pulled through.\n  const sway = Math.sin(P.t * 2.3) * 3;\n  const sag = 13 + 2 * Math.sin(P.t * 1.7);\n  const c1x = px + 7 + sway;\n  const c1y = py + sag;\n  const c2x = ex + 1 + sway;\n  const c2y = ey + sag;\n  for (let i = 0; i \u003c= 40; i++) {\n    const t = i / 40;\n    const a = (1 - t) ** 3;\n    const b = 3 * t * (1 - t) ** 2;\n    const c = 3 * t * t * (1 - t);\n    const d = t ** 3;\n    dot(buf, a * px + b * c1x + c * c2x + d * ex, a * py + b * c1y + c * c2y + d * ey, yarn);\n  }\n  // The steel: a bright point, the shaft and the eye.\n  for (let i = 0; i \u003c= 8; i++) {\n    const g = i === 7 ? 0.4 : i === 0 ? 1 : 0.85;\n    dot(buf, tx + dx * i, ty + dy * i, [205 * g, 212 * g, 226 * g]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Wool=0..1, Speed=0.2..3, Design=0..2, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Wool","min":0,"max":1,"about":"Turns every wool in the box round the dye wheel together, starting from the natural shades: a green parrot on a teal ground."},{"name":"Speed","min":0.2,"max":3,"about":"Stitches a second, 7 at 0.2, 72 at 2 and 108 at 3; at 2 the 1920 stitches of a canvas take 27 seconds."},{"name":"Design","min":0,"max":2,"about":"Which canvas is on the frame: the parrot cushion, the rose bouquet on black or the sampler with its alphabet and house; turning it rolls the work on to that canvas, and after it the canvases follow in that order."},{"name":"Lamp","min":0,"max":1,"about":"Where the lamp stands, low on the left at 0, overhead at 0.5, low on the right at 1; the side of each stitch that faces it shines and the far side of the hole falls into shadow."}],"start":[0,2,0,0.06],"measures":{"motion":0.1581,"detail":0.3325,"edges":0.8053,"complexity":1.8885,"coverage":0.6687,"colour":0.2513,"drift":0.043},"knobResponse":[0.1114,0.0649,0.1048,0.0607]},{"slug":"neon-alley","title":"Neon Alley","family":"city","round":16,"note":"밤 골목의 벽에 유리관을 구부린 네온 그림 간판이 지붕부터 젖은 길까지 걸려서, 관이 하나씩 켜지고 화살표가 달리고 지친 관 하나가 지직거려요. K1 을 누르면 정전이 됐다가 간판이 하나씩 다시 켜지고, K2 를 누르면 간판이 새로 걸려요.","idea":"The wall of a narrow night alley hung from roof to street with neon pictograms in bent glass tube, lighting in sequence, chasing and buzzing over wet asphalt.","buttons":"K1 tap cuts the power; the signs come back one at a time, each tube stuttering as its transformer strikes. K2 tap hangs a new set of signs.","code":"// ===== Patternflow pattern =====\n// Title:   Neon Alley\n// Family:  city\n// Idea:    The wall of a narrow night alley hung from roof to street with neon pictograms in bent glass tube, lighting in sequence, chasing and buzzing over wet asphalt.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 16; the stacked shop signs of Seoul, Hong Kong and Tokyo back streets\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0..4, Wear=0..1, Rain=0..1\n//\n// Knob 1: Hue. Turns every tube round the colour wheel together, so each sign keeps its opposite pair; at 0 the alley burns its own red, green, cyan and magenta.\n// Knob 2: Pace. The tempo of the sign controllers and how many run a show: at 0 every sign holds still, at 2 about half black out and relight tube by tube or double-blink every few seconds, at 4 all of them, with hardly a pause between.\n// Knob 3: Wear. How tired the glass is: at 0 one frame tube buzzes, at 1 nearly half the tubes stutter and sag and three in ten have died dark.\n// Knob 4: Rain. A drizzle that shows only where a sign lights it, puddles that spread on the asphalt and mirror the signs, and haze that widens every glow.\n// Buttons: K1 tap cuts the power; the signs come back one at a time, each tube stuttering as its transformer strikes. K2 tap hangs a new set of signs.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rows from here down are the street.\nconst STREET = 116;\n// In dry air a tube lights the wall up to 3 LEDs out and never above 20/255,\n// so the wall counts as dark: colourfulness wants every lit LED full and\n// saturated.\nconst GLOW = 3;\n// A raindrop still takes a tube's colour 8 LEDs away from it.\nconst REACH = 8;\n// Tube LEDs the wall may carry, 30% of the panel before shows and chases\n// switch part of it off. A frame that would pass it is not hung.\nconst BUDGET = 2450;\nconst D2R = Math.PI / 180;\n\n// Hues in degrees at full saturation and value. Red, green, cyan and magenta\n// carry the most chroma a pixel can (285 on the measure's opponent axes,\n// against about 240 for this yellow and blue), so frames and pictograms take\n// those and yellow and blue stay accents. No tube is white.\nconst [R, Y, G, C, B, M, P] = [0, 54, 120, 180, 230, 300, 330];\n// [frame, pictogram, contrast, accent]: the frame across the wheel from the\n// pictogram it holds.\nconst SCHEMES = [\n  [C, M, G, Y], [M, G, Y, C], [R, C, Y, G], [G, R, C, Y], [M, C, Y, G],\n  [C, R, Y, M], [G, M, C, Y], [R, G, C, B], [P, C, G, Y], [C, M, Y, R],\n];\n\n// The layout keeps its own generator, so every panel opens on the same alley.\nfunction rng(seed) {\n  let a = seed >>> 0;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = Math.imul(a ^ (a >>> 15), a | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\nfunction shuffle(list, rnd) {\n  for (let i = list.length - 1; i > 0; i--) {\n    const j = Math.floor(rnd() * (i + 1));\n    [list[i], list[j]] = [list[j], list[i]];\n  }\n  return list;\n}\n\nfunction arc(cx, cy, rx, ry, a0, a1) {\n  const n = Math.max(3, Math.ceil((Math.abs(a1 - a0) * D2R * Math.max(rx, ry)) / 1.2));\n  const out = [];\n  for (let i = 0; i \u003c= n; i++) {\n    const a = (a0 + ((a1 - a0) * i) / n) * D2R;\n    out.push(cx + rx * Math.cos(a), cy + ry * Math.sin(a));\n  }\n  return out;\n}\n\nconst rrect = (x, y, w, h, c) => [\n  ...arc(x + c, y + c, c, c, 180, 270),\n  ...arc(x + w - c, y + c, c, c, 270, 360),\n  ...arc(x + w - c, y + h - c, c, c, 0, 90),\n  ...arc(x + c, y + h - c, c, c, 90, 180),\n];\n\n// A closed path cut into dashes of 4 LEDs with gaps of 2.5, for marquees.\nfunction dashes(pts) {\n  const out = [];\n  const n = pts.length >> 1;\n  let cur = null;\n  let s = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const ax = pts[2 * i];\n    const ay = pts[2 * i + 1];\n    const dx = pts[(2 * i + 2) % (2 * n)] - ax;\n    const dy = pts[(2 * i + 3) % (2 * n)] - ay;\n    const m = Math.ceil(Math.hypot(dx, dy) * 2);\n    for (let j = 0; j \u003c m; j++, s += Math.hypot(dx, dy) / m)\n      if (s % 6.5 \u003c 4) {\n        if (!cur) out.push((cur = []));\n        cur.push(ax + (dx * j) / m, ay + (dy * j) / m);\n      } else cur = null;\n  }\n  return out;\n}\n\n// The pictograms, each drawn in a box w by h at scale 1. T(group, role,\n// closed, points, radius) bends one tube: the group is what the sign's\n// controller switches, the role picks the colour (0 pictogram, 1 contrast,\n// 2 accent). The radius of 1.05 makes a tube two LEDs thick along the grid\n// lines and three between them. anim(group, t) is whether that group is lit\n// at t seconds of the controller's clock.\nconst ICONS = [\n  {\n    // A heart with an arrow through it: the love motel on the corner.\n    w: 26, h: 21,\n    draw(T) {\n      const pts = [];\n      for (let i = 0; i \u003c 44; i++) {\n        const t = (i / 44) * 2 * Math.PI;\n        const q = Math.sin(t);\n        pts.push(13 + 9.9 * q * q * q, 9 - 0.62 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)));\n      }\n      T(0, 0, 1, pts);\n      T(1, 2, 0, [0.6, 16.8, 0.6, 20.4, 4.2, 20.4], 0.95);\n      T(1, 2, 0, [0.6, 20.4, 6.5, 17.2], 0.95);\n      T(2, 2, 0, [20, 6.8, 25.4, 3.8], 0.95);\n      T(2, 2, 0, [21.8, 2.9, 25.4, 3.8, 24.3, 7.2], 0.95);\n    },\n    // The heart drops out twice a beat, lub and dub; the arrow flies in,\n    // fletching first.\n    anim(g, t) {\n      const c = t % 1.3;\n      if (!g) return c \u003c 0.09 || (c > 0.22 && c \u003c 0.31) ? 0 : 1;\n      return t % 6 > (g === 1 ? 0.3 : 0.6) ? 1 : 0;\n    },\n  },\n  {\n    // A cat's face for the cat cafe, whiskers out past its cheeks.\n    w: 38, h: 23,\n    draw(T) {\n      T(0, 0, 1, [8.2, 14.4, 7.5, 9, 9, 1.8, 15, 6, 23, 6, 29, 1.8, 30.5, 9, ...arc(19, 13, 11, 8, 10, 170)]);\n      T(1, 1, 0, [14, 12.5, 16, 12.5], 1.3);\n      T(1, 1, 0, [22, 12.5, 24, 12.5], 1.3);\n      T(2, 2, 0, [19, 16.6], 1.25);\n      for (const s of [-1, 1]) {\n        T(3, 2, 0, [19 + s * 11.4, 16, 19 + s * 18, 14], 0.9);\n        T(3, 2, 0, [19 + s * 11.4, 18.5, 19 + s * 18, 19.6], 0.9);\n      }\n    },\n    // It blinks every 3.4 s and twitches its whiskers every 5.3 s.\n    anim(g, t) {\n      if (g === 1) return t % 3.4 \u003c 0.15 ? 0 : 1;\n      return g === 3 && t % 5.3 > 5.05 && t % 5.3 \u003c 5.17 ? 0 : 1;\n    },\n  },\n  {\n    // A martini with an olive on a pick: the basement bar.\n    w: 25, h: 30,\n    draw(T) {\n      T(0, 0, 1, [0.5, 3.5, 24.5, 3.5, 12.5, 16]);\n      T(0, 0, 0, [12.5, 16, 12.5, 27.5]);\n      T(0, 0, 0, [6, 28.5, 19, 28.5]);\n      T(1, 1, 1, arc(12.5, 8.8, 1.6, 1.6, 0, 360), 1.1);\n      T(2, 2, 0, [19.5, 0.5, 14, 7.5], 0.9);\n    },\n    // The olive drops in: dark for the first half second of every 4.\n    anim: (g, t) => (g === 1 && t % 4 \u003c 0.5 ? 0 : 1),\n  },\n  {\n    // A noodle bowl with chopsticks and three columns of steam.\n    w: 31, h: 28,\n    draw(T) {\n      T(0, 0, 1, [0.5, 14, 30.5, 14, ...arc(15.5, 14, 15, 9, 0, 180)]);\n      T(0, 0, 0, [10, 26.5, 21, 26.5]);\n      const nd = [];\n      for (let x = 7; x \u003c= 24; x++) nd.push(x, 18.8 + 1.3 * Math.sin(x * 1.1));\n      T(7, 2, 0, nd, 0.9);\n      T(7, 2, 0, [17, 12, 26, 0.8], 0.9);\n      T(7, 2, 0, [21, 12, 30.5, 2.8], 0.9);\n      for (let c = 0; c \u003c 3; c++)\n        for (let k = 0; k \u003c 2; k++) {\n          const s = [];\n          for (let y = 11 - k * 5.5; y >= 5.5 - k * 5.5; y--) s.push(4 + c * 5 + 1.2 * Math.sin(y * 0.9 + c), y);\n          T(1 + c * 2 + k, 1, 0, s, 0.9);\n        }\n    },\n    // Each steam column lights low, then high, then breaks, a third of a\n    // cycle behind its neighbour.\n    anim(g, t) {\n      if (!g || g > 6) return 1;\n      const f = (t * 0.7 + ((g - 1) >> 1) * 0.33) % 1;\n      return (g - 1) & 1 ? (f > 0.25 && f \u003c 0.9 ? 1 : 0) : f \u003c 0.65 ? 1 : 0;\n    },\n  },\n  {\n    // The pharmacy cross: an outline round a solid cross.\n    w: 24, h: 24,\n    draw(T) {\n      T(0, 0, 1, [7.5, 0.5, 16.5, 0.5, 16.5, 7.5, 23.5, 7.5, 23.5, 16.5, 16.5, 16.5, 16.5, 23.5, 7.5, 23.5, 7.5, 16.5, 0.5, 16.5, 0.5, 7.5, 7.5, 7.5]);\n      T(1, 1, 0, [12, 4.5, 12, 19.5], 1.5);\n      T(1, 1, 0, [4.5, 12, 19.5, 12], 1.5);\n    },\n    // The inside alone, the outline alone, then both, every 2.6 s.\n    anim(g, t) {\n      const c = t % 2.6;\n      return g ? (c \u003c 0.35 || c > 0.7 ? 1 : 0) : c \u003c 0.35 ? 0 : 1;\n    },\n  },\n  {\n    // Two beamed quavers and the sound they make: the karaoke rooms upstairs.\n    w: 32, h: 26,\n    draw(T) {\n      T(0, 0, 1, arc(4, 21.5, 2.2, 1.3, 0, 360), 1.15);\n      T(0, 0, 1, arc(16, 18.5, 2.2, 1.3, 0, 360), 1.15);\n      T(0, 0, 0, [6.4, 21, 6.4, 4]);\n      T(0, 0, 0, [18.4, 18, 18.4, 1]);\n      T(0, 0, 0, [6.4, 4, 18.4, 1], 1.5);\n      T(0, 0, 0, [6.4, 8.5, 18.4, 5.5]);\n      for (let k = 0; k \u003c 3; k++) T(1 + k, 1, 0, arc(21, 12, 3.5 + k * 3.2, 3.5 + k * 3.2, -40, 40), 0.95);\n    },\n    // The sound waves light outward and go out together.\n    anim(g, t) {\n      const f = (t * 0.8) % 1;\n      return !g || (f >= (g - 1) * 0.18 && f \u003c 0.86) ? 1 : 0;\n    },\n  },\n  {\n    // A molar with a sparkle: the dentist on the third floor.\n    w: 30, h: 24,\n    draw(T) {\n      T(0, 0, 1, [...arc(6.5, 6, 4.5, 4.5, 180, 300), 11, 4, ...arc(15.5, 6, 4.5, 4.5, 240, 360), 19.5, 12, 17.5, 22.5, 15, 22.5, 13, 15.5, 9, 15.5, 7, 22.5, 4.5, 22.5, 2.5, 12]);\n      T(1, 1, 0, [25.5, 0.8, 25.5, 8.2], 0.9);\n      T(1, 1, 0, [21.8, 4.5, 29.2, 4.5], 0.9);\n    },\n    anim: (g, t) => (g && t % 2.2 > 1.2 ? 0 : 1),\n  },\n  {\n    // An eye with lashes whose iris looks about: the fortune teller.\n    w: 30, h: 22,\n    draw(T) {\n      const up = (x) => 13 - 9 * (1 - ((x - 15) / 14.5) ** 2);\n      const lid = [];\n      for (let i = 0; i \u003c= 20; i++) lid.push(0.5 + i * 1.45, up(0.5 + i * 1.45));\n      for (let i = 19; i > 0; i--) lid.push(0.5 + i * 1.45, 13 + 7 * (1 - ((i * 1.45 - 14.5) / 14.5) ** 2));\n      T(0, 0, 1, lid);\n      T(0, 0, 0, [7.5, up(7.5), 5.6, 2.4], 0.9);\n      T(0, 0, 0, [15, up(15), 15, 0.6], 0.9);\n      T(0, 0, 0, [22.5, up(22.5), 24.4, 2.4], 0.9);\n      for (let k = 0; k \u003c 3; k++) {\n        T(1 + k, 1, 1, arc(11 + 4 * k, 12.6, 3.2, 3.2, 0, 360));\n        T(1 + k, 2, 0, [11 + 4 * k, 12.6], 1);\n      }\n    },\n    // Ahead 2 s, left, ahead, right, ahead; the lids blink every 4.7 s.\n    anim(g, t) {\n      if (!g) return t % 4.7 \u003c 0.12 ? 0 : 1;\n      const c = t % 5;\n      return g === (c \u003c 2 ? 2 : c \u003c 3 ? 1 : c \u003c 3.5 ? 2 : c \u003c 4.5 ? 3 : 2) ? 1 : 0;\n    },\n  },\n  {\n    // Scissors that snip: the hair salon.\n    w: 24, h: 27,\n    draw(T) {\n      T(0, 0, 1, arc(6, 22.5, 3.4, 3.4, 0, 360));\n      T(0, 0, 1, arc(18, 22.5, 3.4, 3.4, 0, 360));\n      T(1, 1, 0, [8.6, 19.8, 19.5, 1], 1);\n      T(1, 1, 0, [15.4, 19.8, 4.5, 1], 1);\n      T(2, 1, 0, [8.6, 19.8, 14, 0.8], 1);\n      T(2, 1, 0, [15.4, 19.8, 10, 0.8], 1);\n    },\n    // Snip, snip, then hold open.\n    anim(g, t) {\n      const c = t % 2.4;\n      return !g || (g === 2) === (c \u003c 0.2 || (c > 0.45 && c \u003c 0.65)) ? 1 : 0;\n    },\n  },\n  {\n    // A beer mug with a head of foam and rising bubbles: the hof downstairs.\n    w: 26, h: 28,\n    draw(T) {\n      T(0, 0, 1, [2.5, 7, 2.5, 26.5, 18.5, 26.5, 18.5, 7]);\n      T(0, 0, 0, arc(18.5, 15.5, 5.5, 5.5, -70, 70));\n      T(1, 1, 0, [...arc(4.5, 5.5, 3.5, 3.5, 150, 320), ...arc(10.5, 4, 3.5, 3.5, 210, 330), ...arc(16.5, 5.5, 3.5, 3.5, 220, 390)]);\n      for (let k = 0; k \u003c 3; k++) T(2 + k, 2, 0, [7 + (k & 1) * 6, 22 - k * 5], 1);\n    },\n    // Bubbles rise from the bottom of the glass, one after another.\n    anim(g, t) {\n      return g \u003c 2 || ((t * 1.2) % 1) * 4 > g - 2 ? 1 : 0;\n    },\n  },\n];\n\n// Puddles on the asphalt: centre column, row below the kerb, half width.\nconst PUDDLES = [[10, 4, 9], [36, 6, 12], [58, 3, 7], [22, 11, 7], [52, 11, 8]];\n\n// Slots [x, y, w, h, kind] on the wall above the street: f a pictogram hung\n// bare, b in a rounded box, r in a ring, w a pictogram led to by chevrons, s an\n// arrow strip in a marquee frame, v a blade sign whose arrow points down the\n// basement stairs. Each layout also comes mirrored.\nconst TEMPLATES = [\n  [[0, 0, 64, 33, \"f\"], [1, 36, 17, 51, \"v\"], [20, 36, 43, 29, \"b\"], [20, 67, 43, 21, \"f\"], [1, 90, 62, 25, \"w\"]],\n  [[1, 1, 30, 31, \"b\"], [33, 1, 30, 31, \"r\"], [0, 35, 64, 33, \"f\"], [1, 71, 43, 26, \"b\"], [46, 71, 17, 44, \"v\"], [1, 100, 43, 15, \"s\"]],\n  [[1, 1, 17, 56, \"v\"], [20, 1, 43, 28, \"b\"], [20, 31, 43, 26, \"f\"], [1, 60, 62, 25, \"w\"], [0, 88, 64, 27, \"f\"]],\n];\n\nfunction stroke(S, id, pts, closed, r) {\n  const n = pts.length >> 1;\n  const R = r + REACH;\n  for (let s = 0; s \u003c (n \u003c 2 ? 1 : closed ? n : n - 1); s++) {\n    const ax = pts[2 * s];\n    const ay = pts[2 * s + 1];\n    const j = n \u003c 2 ? s : (s + 1) % n;\n    const dx = pts[2 * j] - ax;\n    const dy = pts[2 * j + 1] - ay;\n    const L2 = dx * dx + dy * dy;\n    const y1 = Math.min(STREET - 1, Math.ceil(Math.max(ay, ay + dy) + R));\n    const x1 = Math.min(W - 1, Math.ceil(Math.max(ax, ax + dx) + R));\n    for (let y = Math.max(0, Math.floor(Math.min(ay, ay + dy) - R)); y \u003c= y1; y++)\n      for (let x = Math.max(0, Math.floor(Math.min(ax, ax + dx) - R)); x \u003c= x1; x++) {\n        const px = x + 0.5 - ax;\n        const py = y + 0.5 - ay;\n        const u = L2 > 0 ? Math.min(1, Math.max(0, (px * dx + py * dy) / L2)) : 0;\n        const g = Math.hypot(px - u * dx, py - u * dy) - r;\n        const p = y * W + x;\n        if (g \u003c S.gap[p]) {\n          S.gap[p] = g;\n          S.own[p] = id;\n        }\n      }\n  }\n}\n\n// kind 0 follows the pictogram's anim, 1 is chevron k of n in a chase, 2 is\n// steady, 3 is a marquee dash.\nfunction tube(S, sg, hue, kind, k, n, order, r, closed, pts) {\n  S.tubes.push({ s: sg.i, hue, kind, k, n, order });\n  stroke(S, S.tubes.length - 1, pts, closed, r);\n}\n\n// Chevrons pointing dir (1 right, -1 left, 0 down) across a box; the chase\n// runs toward the point.\nfunction chevrons(S, sg, hue, x0, y0, w, h, dir) {\n  const across = dir ? w : h;\n  const d = (dir ? h : w) * 0.36;\n  const step = d + 3.4;\n  const n = Math.max(2, Math.floor((across - d) / step) + 1);\n  const o = (across - d - (n - 1) * step) / 2;\n  for (let k = 0; k \u003c n; k++) {\n    const c = o + k * step;\n    const pts = dir\n      ? [x0 + c + (dir \u003c 0 ? d : 0), y0, x0 + c + (dir \u003c 0 ? 0 : d), y0 + h / 2, x0 + c + (dir \u003c 0 ? d : 0), y0 + h]\n      : [x0, y0 + c, x0 + w / 2, y0 + c + d, x0 + w, y0 + c];\n    tube(S, sg, hue, 1, dir \u003c 0 ? n - 1 - k : k, n, 1 + k, 1.05, 0, pts);\n  }\n}\n\n// Hang a pictogram not hung yet, the bigger it fits the likelier, or the one\n// that fits best if none fits at 0.8; returns its width.\nfunction hang(S, sg, left, bx, by, bw, bh, cap, rnd, align, mw = bw) {\n  let best = -1;\n  let score = -1e9;\n  for (const i of left) {\n    const s = Math.min(cap, mw / ICONS[i].w, bh / ICONS[i].h);\n    const v = s >= 0.8 ? 10 + s + rnd() * 1.5 : s * 4 + rnd();\n    if (v > score) [score, best] = [v, i];\n  }\n  left.splice(left.indexOf(best), 1);\n  const ic = ICONS[best];\n  const s = Math.min(cap, mw / ic.w, bh / ic.h);\n  const x = bx + (align \u003c 0 ? 0 : align > 0 ? bw - ic.w * s : (bw - ic.w * s) / 2);\n  const y = by + (bh - ic.h * s) / 2;\n  sg.icon = best;\n  ic.draw((g, role, closed, pts, r = 1.05) => tube(S, sg, sg.hues[1 + role], 0, g, 0, 1 + sg.count++, s > 1.2 ? r * 1.25 : r, closed, pts.map((v, i) => (i & 1 ? y : x) + v * s)));\n  return ic.w * s;\n}\n\nfunction build(S, seed) {\n  const rnd = rng(seed * 7919 + 13);\n  S.own.fill(-1);\n  S.gap.fill(99);\n  S.tubes = [];\n  S.signs = [];\n  const tpl = TEMPLATES[Math.floor(rnd() * TEMPLATES.length)];\n  const flip = rnd() \u003c 0.5;\n  const left = shuffle([...ICONS.keys()], rnd);\n  const schemes = shuffle([...SCHEMES.keys()], rnd);\n  const frames = [];\n  // Arrow strips point at the blade.\n  let toward = 1;\n  for (const s of tpl) if (s[4] === \"v\") toward = (flip ? W - s[0] - s[2] : s[0]) \u003c W / 2 ? -1 : 1;\n  tpl.forEach(([sx, y, w, h, kind], i) => {\n    const x = flip ? W - sx - w : sx;\n    const hues = SCHEMES[schemes[i]];\n    const r = rnd();\n    const sg = { i, hues, icon: -1, count: 0, prog: r \u003c 0.6 ? 1 : 2, busy: rnd(), hold: 0.6 + rnd() * 0.8, ph: rnd() * 11, ign: 0 };\n    S.signs.push(sg);\n    const frame = (inset, k, hue, c) => frames.push([sg, hue, k, rrect(x + inset, y + inset, w - 2 * inset, h - 2 * inset, c), inset > 2 ? 1 : 0, 2 * (w + h - 4 * inset)]);\n    if (kind === \"v\" || kind === \"s\") {\n      sg.prog = 0;\n      frame(1.5, kind === \"s\" ? 3 : 2, hues[0], 3);\n      if (kind === \"v\") chevrons(S, sg, hues[1], x + 4, y + 6, w - 8, h - 12, 0);\n      else chevrons(S, sg, hues[3], x + 6, y + 4.5, w - 12, h - 9, toward);\n    } else if (kind === \"w\") {\n      const side = rnd() \u003c 0.5 ? -1 : 1;\n      const iw = hang(S, sg, left, x + 6, y + 4.5, w - 12, h - 9, 1.35, rnd, side, w * 0.55);\n      const ch = Math.min(14, h - 12);\n      const a = side > 0 ? x + 6 : x + 9 + iw;\n      chevrons(S, sg, hues[2], a, y + (h - ch) / 2, w - 15 - iw, ch, side);\n      frame(1.5, 2, hues[0], 4);\n    } else {\n      const inset = kind === \"f\" ? 1 : kind === \"r\" ? Math.min(w, h) * 0.15 + 1.5 : 5;\n      hang(S, sg, left, x + inset, y + inset, w - 2 * inset, h - 2 * inset, kind === \"f\" ? 1.6 : 1.35, rnd, 0);\n      if (kind === \"b\") frame(1.5, 2, hues[0], 4);\n      if (kind === \"r\") frames.push([sg, hues[0], 2, arc(x + w / 2, y + h / 2, w / 2 - 1.5, h / 2 - 1.5, 0, 360), 0, 1.6 * (w + h)]);\n    }\n  });\n  // Count what pictograms and arrows already light, then hang the frames in a\n  // shuffled order while the wall has budget for them.\n  let lit = 0;\n  for (let p = 0; p \u003c STREET * W; p++) if (S.gap[p] \u003c= 0) lit++;\n  for (const [sg, hue, k, pts, order, perim] of shuffle(frames, rnd)) {\n    const est = perim * 2.1 * (k === 3 ? 0.62 : 1);\n    if (lit + est > BUDGET) continue;\n    lit += est;\n    if (k === 3) dashes(pts).forEach((d, j) => tube(S, sg, hue, 3, j % 3, 3, order, 1.05, 0, d));\n    else tube(S, sg, hue, 2, 0, 0, order, 1.05, 1, pts);\n  }\n  const nt = S.tubes.length;\n  S.tb = new Float32Array(nt);\n  S.rgb = new Float32Array(nt * 3);\n  S.fm = new Uint8Array(nt);\n  S.ft = new Float32Array(nt);\n  S.fv = new Float32Array(nt).fill(1);\n  // Rank the tubes for wear: low ranks tire first, high ranks die first, and\n  // a long tube is likelier to die. Rank 0, the tube that always buzzes, is\n  // the longest frame.\n  const size = new Float32Array(nt);\n  for (let p = 0; p \u003c STREET * W; p++) if (S.gap[p] \u003c= 0) size[S.own[p]]++;\n  const key = [...size].map((v) => rnd() * Math.sqrt(v));\n  const order = [...Array(nt).keys()].sort((a, b) => key[a] - key[b]);\n  let tired = order[0];\n  for (let i = 0; i \u003c nt; i++) if (S.tubes[i].kind === 2 && size[i] > size[tired]) tired = i;\n  order.splice(order.indexOf(tired), 1);\n  order.unshift(tired);\n  order.forEach((t, rank) => (S.tubes[t].rank = rank));\n}\n\nfunction hsv(h, out, o) {\n  h = (((h % 360) + 360) % 360) / 60;\n  const i = Math.floor(h);\n  const up = 255 * (h - i);\n  const down = 255 - up;\n  out[o] = [255, down, 0, 0, up, 255][i];\n  out[o + 1] = [up, 255, 255, down, 0, 0][i];\n  out[o + 2] = [0, 0, up, 255, 255, down][i];\n}\n\n// The controller over a whole sign: a sequence that blacks the sign out and\n// lights it tube by tube, then holds, or a double blink, then holds. The\n// hold shrinks as Pace rises, and a sign runs its show at all only when the\n// night is busy enough for it; otherwise it stays lit.\nfunction signOn(sg, order, t, show, hold) {\n  if (!sg.prog || sg.busy >= show) return 1;\n  const c = (t + sg.ph) % ((sg.prog === 1 ? 0.6 + sg.count * 0.2 : 0.45) + sg.hold * hold);\n  if (sg.prog === 1) return c >= 0.6 + order * 0.2;\n  return !(c \u003c 0.15 || (c > 0.3 && c \u003c 0.45));\n}\n\nfunction tubeOn(sg, tb, t) {\n  if (tb.kind === 0) return ICONS[sg.icon].anim(tb.k, t + sg.ph);\n  if (tb.kind === 1) return (((t * 1.1 - tb.k / tb.n) % 1) + 1) % 1 \u003c 0.55 ? 1 : 0;\n  if (tb.kind === 3) return (Math.floor(t * 4) + tb.k) % 3 ? 1 : 0;\n  return 1;\n}\n\n// A tired tube: steady stretches, then a buzz of random stutter or a dropout.\n// As wear rises the stretches shorten and the steady glow sinks.\nfunction flicker(S, i, dt, wear) {\n  if ((S.ft[i] -= dt) \u003c= 0) {\n    const steady = S.fm[i] === 0;\n    S.fm[i] = steady ? (Math.random() \u003c 0.7 ? 1 : 2) : 0;\n    S.ft[i] = !steady ? (0.6 + Math.random() * 3) / (0.6 + wear * 3) : S.fm[i] === 1 ? 0.25 + Math.random() * 0.8 : 0.08 + Math.random() * 0.4;\n  }\n  if (S.fm[i] === 1) {\n    if (Math.random() \u003c 0.45) S.fv[i] = Math.random() \u003c 0.5 ? 1 : 0.15 + Math.random() * 0.35;\n    return S.fv[i];\n  }\n  return S.fm[i] === 2 ? 0 : 1 - wear * 0.3;\n}\n\nexport function setup(params) {\n  Object.assign(params, { own: new Int16Array(N), gap: new Float32Array(N), buf: new Uint8ClampedArray(N * 3), tubes: null, t: 0, clk: 0, cut: -1, hue: 0, rain: 0.06, drops: [] });\n  params.seed = 5;\n  for (let i = 0; i \u003c 300; i++) params.drops.push({ x: Math.random() * (W + 12) - 6, y: Math.random() * H, v: 70 + Math.random() * 50, n: 4 + Math.floor(Math.random() * 5) });\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const k = input.knobValues || [];\n  const wear = k[2] ?? 0;\n  S.hue = (k[0] ?? 0) * 360;\n  S.rain = k[3] ?? 0.06;\n  const pr = input.btnPressed || [];\n  if (!S.tubes || pr[1]) {\n    if (S.tubes) S.seed++;\n    build(S, S.seed);\n  }\n  if (pr[0]) {\n    // Power cut: the signs strike again in a shuffled order, half a second apart.\n    S.cut = 0;\n    shuffle(S.signs.map((s, i) => i), Math.random).forEach((si, n) => (S.signs[si].ign = 1.2 + n * 0.5 + Math.random() * 0.2));\n  }\n  S.t += dt;\n  const pace = k[1] ?? 2;\n  const show = pace / 3.6;\n  S.clk += dt * pace;\n  if (S.cut >= 0 && (S.cut += dt) > Math.max(...S.signs.map((s) => s.ign)) + 0.8) S.cut = -1;\n  const T = S.tubes;\n  const nt = T.length;\n  const tired = 1 + Math.floor(wear * 0.45 * nt);\n  const dead = Math.floor(wear * 0.3 * nt);\n  for (let i = 0; i \u003c nt; i++) {\n    const tb = T[i];\n    const sg = S.signs[tb.s];\n    let on = signOn(sg, tb.order, S.clk, show, 12 / Math.max(0.1, pace * pace)) ? tubeOn(sg, tb, S.clk) : 0;\n    if (tb.rank \u003c tired) on *= flicker(S, i, dt, wear);\n    if (tb.rank >= nt - dead) on = 0;\n    if (S.cut >= 0) {\n      // A transformer strikes over 0.7 s, the tube catching more often as it warms.\n      const u = (S.cut - sg.ign) / 0.7;\n      on *= u \u003c 0 ? 0 : u >= 1 || Math.random() \u003c 0.2 + 0.8 * u ? 1 : 0;\n    }\n    S.tb[i] = on;\n    hsv(tb.hue + S.hue, S.rgb, i * 3);\n  }\n  const n = Math.round(S.rain * S.drops.length);\n  for (let i = 0; i \u003c n; i++) {\n    const d = S.drops[i];\n    d.y += d.v * dt;\n    d.x += d.v * dt * 0.1;\n    if (d.y - d.n > H) {\n      d.y = -Math.random() * 20;\n      d.x = Math.random() * (W + 12) - 12;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.tubes) return;\n  const { buf, rgb } = S;\n  buf.fill(0);\n  // Rain hazes the air: the glow reaches further and brightens past the 24/255\n  // the wall otherwise stays under.\n  const haze = Math.max(0, S.rain - 0.1);\n  const reach = GLOW + haze * 3.5;\n  const glow = (20 + haze * 110) / 255;\n  for (let p = 0; p \u003c STREET * W; p++) {\n    const o = S.own[p];\n    const g = S.gap[p];\n    if (o \u003c 0 || g >= reach) continue;\n    const b = S.tb[o];\n    // An unlit tube is still glass: its own colour at 14/255.\n    const f = 1 - g / reach;\n    const lv = g \u003c= 0 ? Math.max(b, 0.055) : glow * f * f * b;\n    for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] = rgb[o * 3 + c] * lv;\n  }\n  // The street mirrors the bottom of the wall, shivering. Asphalt gives back\n  // next to nothing; the puddles, low ellipses in the view, give back half\n  // and spread as the rain comes on.\n  const grow = 0.85 + S.rain;\n  for (let d = 0; d \u003c H - STREET; d++) {\n    const ys = STREET - 1 - d;\n    for (let x = 0; x \u003c W; x++) {\n      let wet = 0;\n      for (const [cx, cd, rx] of PUDDLES) wet = Math.max(wet, (1 - ((x - cx) / (rx * grow)) ** 2 - ((d - cd) / (rx * grow * 0.36)) ** 2) * 3);\n      const lv = (0.04 + 0.56 * Math.min(1, wet)) * (1 - d / 24);\n      const xs = x + Math.round(Math.sin(d * 1.3 + S.t * 3) * (0.6 + S.rain));\n      if (xs \u003c 0 || xs >= W) continue;\n      const q = (ys * W + xs) * 3;\n      const p = ((STREET + d) * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[p + c] = buf[q + c] * lv;\n    }\n  }\n  // Rain shows only where a tube lights it, in that tube's colour.\n  const n = Math.round(S.rain * S.drops.length);\n  for (let i = 0; i \u003c n; i++) {\n    const dr = S.drops[i];\n    for (let j = 0; j \u003c dr.n; j++) {\n      const y = Math.floor(dr.y) - j;\n      const x = Math.floor(dr.x - j * 0.1);\n      if (y \u003c 0 || y >= H || x \u003c 0 || x >= W) continue;\n      const p = y * W + x;\n      const fade = 1 - (j / dr.n) * 0.6;\n      if (y >= STREET) {\n        for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] *= 1.8;\n        continue;\n      }\n      const o = S.own[p];\n      const g = S.gap[p];\n      if (o \u003c 0 || g \u003c= 0) continue;\n      const lv = (0.9 - (0.7 * g) / REACH) * S.tb[o] * fade;\n      for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] = Math.max(buf[p * 3 + c], rgb[o * 3 + c] * lv);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      if (buf[p] | buf[p + 1] | buf[p + 2]) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n    }\n}\n","layer":{"id":"layer-neon-alley","type":"code","name":"neon-alley","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Neon Alley\n// Family:  city\n// Idea:    The wall of a narrow night alley hung from roof to street with neon pictograms in bent glass tube, lighting in sequence, chasing and buzzing over wet asphalt.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 16; the stacked shop signs of Seoul, Hong Kong and Tokyo back streets\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pace=0..4, Wear=0..1, Rain=0..1\n//\n// Knob 1: Hue. Turns every tube round the colour wheel together, so each sign keeps its opposite pair; at 0 the alley burns its own red, green, cyan and magenta.\n// Knob 2: Pace. The tempo of the sign controllers and how many run a show: at 0 every sign holds still, at 2 about half black out and relight tube by tube or double-blink every few seconds, at 4 all of them, with hardly a pause between.\n// Knob 3: Wear. How tired the glass is: at 0 one frame tube buzzes, at 1 nearly half the tubes stutter and sag and three in ten have died dark.\n// Knob 4: Rain. A drizzle that shows only where a sign lights it, puddles that spread on the asphalt and mirror the signs, and haze that widens every glow.\n// Buttons: K1 tap cuts the power; the signs come back one at a time, each tube stuttering as its transformer strikes. K2 tap hangs a new set of signs.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rows from here down are the street.\nconst STREET = 116;\n// In dry air a tube lights the wall up to 3 LEDs out and never above 20/255,\n// so the wall counts as dark: colourfulness wants every lit LED full and\n// saturated.\nconst GLOW = 3;\n// A raindrop still takes a tube's colour 8 LEDs away from it.\nconst REACH = 8;\n// Tube LEDs the wall may carry, 30% of the panel before shows and chases\n// switch part of it off. A frame that would pass it is not hung.\nconst BUDGET = 2450;\nconst D2R = Math.PI / 180;\n\n// Hues in degrees at full saturation and value. Red, green, cyan and magenta\n// carry the most chroma a pixel can (285 on the measure's opponent axes,\n// against about 240 for this yellow and blue), so frames and pictograms take\n// those and yellow and blue stay accents. No tube is white.\nconst [R, Y, G, C, B, M, P] = [0, 54, 120, 180, 230, 300, 330];\n// [frame, pictogram, contrast, accent]: the frame across the wheel from the\n// pictogram it holds.\nconst SCHEMES = [\n  [C, M, G, Y], [M, G, Y, C], [R, C, Y, G], [G, R, C, Y], [M, C, Y, G],\n  [C, R, Y, M], [G, M, C, Y], [R, G, C, B], [P, C, G, Y], [C, M, Y, R],\n];\n\n// The layout keeps its own generator, so every panel opens on the same alley.\nfunction rng(seed) {\n  let a = seed >>> 0;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = Math.imul(a ^ (a >>> 15), a | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\nfunction shuffle(list, rnd) {\n  for (let i = list.length - 1; i > 0; i--) {\n    const j = Math.floor(rnd() * (i + 1));\n    [list[i], list[j]] = [list[j], list[i]];\n  }\n  return list;\n}\n\nfunction arc(cx, cy, rx, ry, a0, a1) {\n  const n = Math.max(3, Math.ceil((Math.abs(a1 - a0) * D2R * Math.max(rx, ry)) / 1.2));\n  const out = [];\n  for (let i = 0; i \u003c= n; i++) {\n    const a = (a0 + ((a1 - a0) * i) / n) * D2R;\n    out.push(cx + rx * Math.cos(a), cy + ry * Math.sin(a));\n  }\n  return out;\n}\n\nconst rrect = (x, y, w, h, c) => [\n  ...arc(x + c, y + c, c, c, 180, 270),\n  ...arc(x + w - c, y + c, c, c, 270, 360),\n  ...arc(x + w - c, y + h - c, c, c, 0, 90),\n  ...arc(x + c, y + h - c, c, c, 90, 180),\n];\n\n// A closed path cut into dashes of 4 LEDs with gaps of 2.5, for marquees.\nfunction dashes(pts) {\n  const out = [];\n  const n = pts.length >> 1;\n  let cur = null;\n  let s = 0;\n  for (let i = 0; i \u003c n; i++) {\n    const ax = pts[2 * i];\n    const ay = pts[2 * i + 1];\n    const dx = pts[(2 * i + 2) % (2 * n)] - ax;\n    const dy = pts[(2 * i + 3) % (2 * n)] - ay;\n    const m = Math.ceil(Math.hypot(dx, dy) * 2);\n    for (let j = 0; j \u003c m; j++, s += Math.hypot(dx, dy) / m)\n      if (s % 6.5 \u003c 4) {\n        if (!cur) out.push((cur = []));\n        cur.push(ax + (dx * j) / m, ay + (dy * j) / m);\n      } else cur = null;\n  }\n  return out;\n}\n\n// The pictograms, each drawn in a box w by h at scale 1. T(group, role,\n// closed, points, radius) bends one tube: the group is what the sign's\n// controller switches, the role picks the colour (0 pictogram, 1 contrast,\n// 2 accent). The radius of 1.05 makes a tube two LEDs thick along the grid\n// lines and three between them. anim(group, t) is whether that group is lit\n// at t seconds of the controller's clock.\nconst ICONS = [\n  {\n    // A heart with an arrow through it: the love motel on the corner.\n    w: 26, h: 21,\n    draw(T) {\n      const pts = [];\n      for (let i = 0; i \u003c 44; i++) {\n        const t = (i / 44) * 2 * Math.PI;\n        const q = Math.sin(t);\n        pts.push(13 + 9.9 * q * q * q, 9 - 0.62 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)));\n      }\n      T(0, 0, 1, pts);\n      T(1, 2, 0, [0.6, 16.8, 0.6, 20.4, 4.2, 20.4], 0.95);\n      T(1, 2, 0, [0.6, 20.4, 6.5, 17.2], 0.95);\n      T(2, 2, 0, [20, 6.8, 25.4, 3.8], 0.95);\n      T(2, 2, 0, [21.8, 2.9, 25.4, 3.8, 24.3, 7.2], 0.95);\n    },\n    // The heart drops out twice a beat, lub and dub; the arrow flies in,\n    // fletching first.\n    anim(g, t) {\n      const c = t % 1.3;\n      if (!g) return c \u003c 0.09 || (c > 0.22 && c \u003c 0.31) ? 0 : 1;\n      return t % 6 > (g === 1 ? 0.3 : 0.6) ? 1 : 0;\n    },\n  },\n  {\n    // A cat's face for the cat cafe, whiskers out past its cheeks.\n    w: 38, h: 23,\n    draw(T) {\n      T(0, 0, 1, [8.2, 14.4, 7.5, 9, 9, 1.8, 15, 6, 23, 6, 29, 1.8, 30.5, 9, ...arc(19, 13, 11, 8, 10, 170)]);\n      T(1, 1, 0, [14, 12.5, 16, 12.5], 1.3);\n      T(1, 1, 0, [22, 12.5, 24, 12.5], 1.3);\n      T(2, 2, 0, [19, 16.6], 1.25);\n      for (const s of [-1, 1]) {\n        T(3, 2, 0, [19 + s * 11.4, 16, 19 + s * 18, 14], 0.9);\n        T(3, 2, 0, [19 + s * 11.4, 18.5, 19 + s * 18, 19.6], 0.9);\n      }\n    },\n    // It blinks every 3.4 s and twitches its whiskers every 5.3 s.\n    anim(g, t) {\n      if (g === 1) return t % 3.4 \u003c 0.15 ? 0 : 1;\n      return g === 3 && t % 5.3 > 5.05 && t % 5.3 \u003c 5.17 ? 0 : 1;\n    },\n  },\n  {\n    // A martini with an olive on a pick: the basement bar.\n    w: 25, h: 30,\n    draw(T) {\n      T(0, 0, 1, [0.5, 3.5, 24.5, 3.5, 12.5, 16]);\n      T(0, 0, 0, [12.5, 16, 12.5, 27.5]);\n      T(0, 0, 0, [6, 28.5, 19, 28.5]);\n      T(1, 1, 1, arc(12.5, 8.8, 1.6, 1.6, 0, 360), 1.1);\n      T(2, 2, 0, [19.5, 0.5, 14, 7.5], 0.9);\n    },\n    // The olive drops in: dark for the first half second of every 4.\n    anim: (g, t) => (g === 1 && t % 4 \u003c 0.5 ? 0 : 1),\n  },\n  {\n    // A noodle bowl with chopsticks and three columns of steam.\n    w: 31, h: 28,\n    draw(T) {\n      T(0, 0, 1, [0.5, 14, 30.5, 14, ...arc(15.5, 14, 15, 9, 0, 180)]);\n      T(0, 0, 0, [10, 26.5, 21, 26.5]);\n      const nd = [];\n      for (let x = 7; x \u003c= 24; x++) nd.push(x, 18.8 + 1.3 * Math.sin(x * 1.1));\n      T(7, 2, 0, nd, 0.9);\n      T(7, 2, 0, [17, 12, 26, 0.8], 0.9);\n      T(7, 2, 0, [21, 12, 30.5, 2.8], 0.9);\n      for (let c = 0; c \u003c 3; c++)\n        for (let k = 0; k \u003c 2; k++) {\n          const s = [];\n          for (let y = 11 - k * 5.5; y >= 5.5 - k * 5.5; y--) s.push(4 + c * 5 + 1.2 * Math.sin(y * 0.9 + c), y);\n          T(1 + c * 2 + k, 1, 0, s, 0.9);\n        }\n    },\n    // Each steam column lights low, then high, then breaks, a third of a\n    // cycle behind its neighbour.\n    anim(g, t) {\n      if (!g || g > 6) return 1;\n      const f = (t * 0.7 + ((g - 1) >> 1) * 0.33) % 1;\n      return (g - 1) & 1 ? (f > 0.25 && f \u003c 0.9 ? 1 : 0) : f \u003c 0.65 ? 1 : 0;\n    },\n  },\n  {\n    // The pharmacy cross: an outline round a solid cross.\n    w: 24, h: 24,\n    draw(T) {\n      T(0, 0, 1, [7.5, 0.5, 16.5, 0.5, 16.5, 7.5, 23.5, 7.5, 23.5, 16.5, 16.5, 16.5, 16.5, 23.5, 7.5, 23.5, 7.5, 16.5, 0.5, 16.5, 0.5, 7.5, 7.5, 7.5]);\n      T(1, 1, 0, [12, 4.5, 12, 19.5], 1.5);\n      T(1, 1, 0, [4.5, 12, 19.5, 12], 1.5);\n    },\n    // The inside alone, the outline alone, then both, every 2.6 s.\n    anim(g, t) {\n      const c = t % 2.6;\n      return g ? (c \u003c 0.35 || c > 0.7 ? 1 : 0) : c \u003c 0.35 ? 0 : 1;\n    },\n  },\n  {\n    // Two beamed quavers and the sound they make: the karaoke rooms upstairs.\n    w: 32, h: 26,\n    draw(T) {\n      T(0, 0, 1, arc(4, 21.5, 2.2, 1.3, 0, 360), 1.15);\n      T(0, 0, 1, arc(16, 18.5, 2.2, 1.3, 0, 360), 1.15);\n      T(0, 0, 0, [6.4, 21, 6.4, 4]);\n      T(0, 0, 0, [18.4, 18, 18.4, 1]);\n      T(0, 0, 0, [6.4, 4, 18.4, 1], 1.5);\n      T(0, 0, 0, [6.4, 8.5, 18.4, 5.5]);\n      for (let k = 0; k \u003c 3; k++) T(1 + k, 1, 0, arc(21, 12, 3.5 + k * 3.2, 3.5 + k * 3.2, -40, 40), 0.95);\n    },\n    // The sound waves light outward and go out together.\n    anim(g, t) {\n      const f = (t * 0.8) % 1;\n      return !g || (f >= (g - 1) * 0.18 && f \u003c 0.86) ? 1 : 0;\n    },\n  },\n  {\n    // A molar with a sparkle: the dentist on the third floor.\n    w: 30, h: 24,\n    draw(T) {\n      T(0, 0, 1, [...arc(6.5, 6, 4.5, 4.5, 180, 300), 11, 4, ...arc(15.5, 6, 4.5, 4.5, 240, 360), 19.5, 12, 17.5, 22.5, 15, 22.5, 13, 15.5, 9, 15.5, 7, 22.5, 4.5, 22.5, 2.5, 12]);\n      T(1, 1, 0, [25.5, 0.8, 25.5, 8.2], 0.9);\n      T(1, 1, 0, [21.8, 4.5, 29.2, 4.5], 0.9);\n    },\n    anim: (g, t) => (g && t % 2.2 > 1.2 ? 0 : 1),\n  },\n  {\n    // An eye with lashes whose iris looks about: the fortune teller.\n    w: 30, h: 22,\n    draw(T) {\n      const up = (x) => 13 - 9 * (1 - ((x - 15) / 14.5) ** 2);\n      const lid = [];\n      for (let i = 0; i \u003c= 20; i++) lid.push(0.5 + i * 1.45, up(0.5 + i * 1.45));\n      for (let i = 19; i > 0; i--) lid.push(0.5 + i * 1.45, 13 + 7 * (1 - ((i * 1.45 - 14.5) / 14.5) ** 2));\n      T(0, 0, 1, lid);\n      T(0, 0, 0, [7.5, up(7.5), 5.6, 2.4], 0.9);\n      T(0, 0, 0, [15, up(15), 15, 0.6], 0.9);\n      T(0, 0, 0, [22.5, up(22.5), 24.4, 2.4], 0.9);\n      for (let k = 0; k \u003c 3; k++) {\n        T(1 + k, 1, 1, arc(11 + 4 * k, 12.6, 3.2, 3.2, 0, 360));\n        T(1 + k, 2, 0, [11 + 4 * k, 12.6], 1);\n      }\n    },\n    // Ahead 2 s, left, ahead, right, ahead; the lids blink every 4.7 s.\n    anim(g, t) {\n      if (!g) return t % 4.7 \u003c 0.12 ? 0 : 1;\n      const c = t % 5;\n      return g === (c \u003c 2 ? 2 : c \u003c 3 ? 1 : c \u003c 3.5 ? 2 : c \u003c 4.5 ? 3 : 2) ? 1 : 0;\n    },\n  },\n  {\n    // Scissors that snip: the hair salon.\n    w: 24, h: 27,\n    draw(T) {\n      T(0, 0, 1, arc(6, 22.5, 3.4, 3.4, 0, 360));\n      T(0, 0, 1, arc(18, 22.5, 3.4, 3.4, 0, 360));\n      T(1, 1, 0, [8.6, 19.8, 19.5, 1], 1);\n      T(1, 1, 0, [15.4, 19.8, 4.5, 1], 1);\n      T(2, 1, 0, [8.6, 19.8, 14, 0.8], 1);\n      T(2, 1, 0, [15.4, 19.8, 10, 0.8], 1);\n    },\n    // Snip, snip, then hold open.\n    anim(g, t) {\n      const c = t % 2.4;\n      return !g || (g === 2) === (c \u003c 0.2 || (c > 0.45 && c \u003c 0.65)) ? 1 : 0;\n    },\n  },\n  {\n    // A beer mug with a head of foam and rising bubbles: the hof downstairs.\n    w: 26, h: 28,\n    draw(T) {\n      T(0, 0, 1, [2.5, 7, 2.5, 26.5, 18.5, 26.5, 18.5, 7]);\n      T(0, 0, 0, arc(18.5, 15.5, 5.5, 5.5, -70, 70));\n      T(1, 1, 0, [...arc(4.5, 5.5, 3.5, 3.5, 150, 320), ...arc(10.5, 4, 3.5, 3.5, 210, 330), ...arc(16.5, 5.5, 3.5, 3.5, 220, 390)]);\n      for (let k = 0; k \u003c 3; k++) T(2 + k, 2, 0, [7 + (k & 1) * 6, 22 - k * 5], 1);\n    },\n    // Bubbles rise from the bottom of the glass, one after another.\n    anim(g, t) {\n      return g \u003c 2 || ((t * 1.2) % 1) * 4 > g - 2 ? 1 : 0;\n    },\n  },\n];\n\n// Puddles on the asphalt: centre column, row below the kerb, half width.\nconst PUDDLES = [[10, 4, 9], [36, 6, 12], [58, 3, 7], [22, 11, 7], [52, 11, 8]];\n\n// Slots [x, y, w, h, kind] on the wall above the street: f a pictogram hung\n// bare, b in a rounded box, r in a ring, w a pictogram led to by chevrons, s an\n// arrow strip in a marquee frame, v a blade sign whose arrow points down the\n// basement stairs. Each layout also comes mirrored.\nconst TEMPLATES = [\n  [[0, 0, 64, 33, \"f\"], [1, 36, 17, 51, \"v\"], [20, 36, 43, 29, \"b\"], [20, 67, 43, 21, \"f\"], [1, 90, 62, 25, \"w\"]],\n  [[1, 1, 30, 31, \"b\"], [33, 1, 30, 31, \"r\"], [0, 35, 64, 33, \"f\"], [1, 71, 43, 26, \"b\"], [46, 71, 17, 44, \"v\"], [1, 100, 43, 15, \"s\"]],\n  [[1, 1, 17, 56, \"v\"], [20, 1, 43, 28, \"b\"], [20, 31, 43, 26, \"f\"], [1, 60, 62, 25, \"w\"], [0, 88, 64, 27, \"f\"]],\n];\n\nfunction stroke(S, id, pts, closed, r) {\n  const n = pts.length >> 1;\n  const R = r + REACH;\n  for (let s = 0; s \u003c (n \u003c 2 ? 1 : closed ? n : n - 1); s++) {\n    const ax = pts[2 * s];\n    const ay = pts[2 * s + 1];\n    const j = n \u003c 2 ? s : (s + 1) % n;\n    const dx = pts[2 * j] - ax;\n    const dy = pts[2 * j + 1] - ay;\n    const L2 = dx * dx + dy * dy;\n    const y1 = Math.min(STREET - 1, Math.ceil(Math.max(ay, ay + dy) + R));\n    const x1 = Math.min(W - 1, Math.ceil(Math.max(ax, ax + dx) + R));\n    for (let y = Math.max(0, Math.floor(Math.min(ay, ay + dy) - R)); y \u003c= y1; y++)\n      for (let x = Math.max(0, Math.floor(Math.min(ax, ax + dx) - R)); x \u003c= x1; x++) {\n        const px = x + 0.5 - ax;\n        const py = y + 0.5 - ay;\n        const u = L2 > 0 ? Math.min(1, Math.max(0, (px * dx + py * dy) / L2)) : 0;\n        const g = Math.hypot(px - u * dx, py - u * dy) - r;\n        const p = y * W + x;\n        if (g \u003c S.gap[p]) {\n          S.gap[p] = g;\n          S.own[p] = id;\n        }\n      }\n  }\n}\n\n// kind 0 follows the pictogram's anim, 1 is chevron k of n in a chase, 2 is\n// steady, 3 is a marquee dash.\nfunction tube(S, sg, hue, kind, k, n, order, r, closed, pts) {\n  S.tubes.push({ s: sg.i, hue, kind, k, n, order });\n  stroke(S, S.tubes.length - 1, pts, closed, r);\n}\n\n// Chevrons pointing dir (1 right, -1 left, 0 down) across a box; the chase\n// runs toward the point.\nfunction chevrons(S, sg, hue, x0, y0, w, h, dir) {\n  const across = dir ? w : h;\n  const d = (dir ? h : w) * 0.36;\n  const step = d + 3.4;\n  const n = Math.max(2, Math.floor((across - d) / step) + 1);\n  const o = (across - d - (n - 1) * step) / 2;\n  for (let k = 0; k \u003c n; k++) {\n    const c = o + k * step;\n    const pts = dir\n      ? [x0 + c + (dir \u003c 0 ? d : 0), y0, x0 + c + (dir \u003c 0 ? 0 : d), y0 + h / 2, x0 + c + (dir \u003c 0 ? d : 0), y0 + h]\n      : [x0, y0 + c, x0 + w / 2, y0 + c + d, x0 + w, y0 + c];\n    tube(S, sg, hue, 1, dir \u003c 0 ? n - 1 - k : k, n, 1 + k, 1.05, 0, pts);\n  }\n}\n\n// Hang a pictogram not hung yet, the bigger it fits the likelier, or the one\n// that fits best if none fits at 0.8; returns its width.\nfunction hang(S, sg, left, bx, by, bw, bh, cap, rnd, align, mw = bw) {\n  let best = -1;\n  let score = -1e9;\n  for (const i of left) {\n    const s = Math.min(cap, mw / ICONS[i].w, bh / ICONS[i].h);\n    const v = s >= 0.8 ? 10 + s + rnd() * 1.5 : s * 4 + rnd();\n    if (v > score) [score, best] = [v, i];\n  }\n  left.splice(left.indexOf(best), 1);\n  const ic = ICONS[best];\n  const s = Math.min(cap, mw / ic.w, bh / ic.h);\n  const x = bx + (align \u003c 0 ? 0 : align > 0 ? bw - ic.w * s : (bw - ic.w * s) / 2);\n  const y = by + (bh - ic.h * s) / 2;\n  sg.icon = best;\n  ic.draw((g, role, closed, pts, r = 1.05) => tube(S, sg, sg.hues[1 + role], 0, g, 0, 1 + sg.count++, s > 1.2 ? r * 1.25 : r, closed, pts.map((v, i) => (i & 1 ? y : x) + v * s)));\n  return ic.w * s;\n}\n\nfunction build(S, seed) {\n  const rnd = rng(seed * 7919 + 13);\n  S.own.fill(-1);\n  S.gap.fill(99);\n  S.tubes = [];\n  S.signs = [];\n  const tpl = TEMPLATES[Math.floor(rnd() * TEMPLATES.length)];\n  const flip = rnd() \u003c 0.5;\n  const left = shuffle([...ICONS.keys()], rnd);\n  const schemes = shuffle([...SCHEMES.keys()], rnd);\n  const frames = [];\n  // Arrow strips point at the blade.\n  let toward = 1;\n  for (const s of tpl) if (s[4] === \"v\") toward = (flip ? W - s[0] - s[2] : s[0]) \u003c W / 2 ? -1 : 1;\n  tpl.forEach(([sx, y, w, h, kind], i) => {\n    const x = flip ? W - sx - w : sx;\n    const hues = SCHEMES[schemes[i]];\n    const r = rnd();\n    const sg = { i, hues, icon: -1, count: 0, prog: r \u003c 0.6 ? 1 : 2, busy: rnd(), hold: 0.6 + rnd() * 0.8, ph: rnd() * 11, ign: 0 };\n    S.signs.push(sg);\n    const frame = (inset, k, hue, c) => frames.push([sg, hue, k, rrect(x + inset, y + inset, w - 2 * inset, h - 2 * inset, c), inset > 2 ? 1 : 0, 2 * (w + h - 4 * inset)]);\n    if (kind === \"v\" || kind === \"s\") {\n      sg.prog = 0;\n      frame(1.5, kind === \"s\" ? 3 : 2, hues[0], 3);\n      if (kind === \"v\") chevrons(S, sg, hues[1], x + 4, y + 6, w - 8, h - 12, 0);\n      else chevrons(S, sg, hues[3], x + 6, y + 4.5, w - 12, h - 9, toward);\n    } else if (kind === \"w\") {\n      const side = rnd() \u003c 0.5 ? -1 : 1;\n      const iw = hang(S, sg, left, x + 6, y + 4.5, w - 12, h - 9, 1.35, rnd, side, w * 0.55);\n      const ch = Math.min(14, h - 12);\n      const a = side > 0 ? x + 6 : x + 9 + iw;\n      chevrons(S, sg, hues[2], a, y + (h - ch) / 2, w - 15 - iw, ch, side);\n      frame(1.5, 2, hues[0], 4);\n    } else {\n      const inset = kind === \"f\" ? 1 : kind === \"r\" ? Math.min(w, h) * 0.15 + 1.5 : 5;\n      hang(S, sg, left, x + inset, y + inset, w - 2 * inset, h - 2 * inset, kind === \"f\" ? 1.6 : 1.35, rnd, 0);\n      if (kind === \"b\") frame(1.5, 2, hues[0], 4);\n      if (kind === \"r\") frames.push([sg, hues[0], 2, arc(x + w / 2, y + h / 2, w / 2 - 1.5, h / 2 - 1.5, 0, 360), 0, 1.6 * (w + h)]);\n    }\n  });\n  // Count what pictograms and arrows already light, then hang the frames in a\n  // shuffled order while the wall has budget for them.\n  let lit = 0;\n  for (let p = 0; p \u003c STREET * W; p++) if (S.gap[p] \u003c= 0) lit++;\n  for (const [sg, hue, k, pts, order, perim] of shuffle(frames, rnd)) {\n    const est = perim * 2.1 * (k === 3 ? 0.62 : 1);\n    if (lit + est > BUDGET) continue;\n    lit += est;\n    if (k === 3) dashes(pts).forEach((d, j) => tube(S, sg, hue, 3, j % 3, 3, order, 1.05, 0, d));\n    else tube(S, sg, hue, 2, 0, 0, order, 1.05, 1, pts);\n  }\n  const nt = S.tubes.length;\n  S.tb = new Float32Array(nt);\n  S.rgb = new Float32Array(nt * 3);\n  S.fm = new Uint8Array(nt);\n  S.ft = new Float32Array(nt);\n  S.fv = new Float32Array(nt).fill(1);\n  // Rank the tubes for wear: low ranks tire first, high ranks die first, and\n  // a long tube is likelier to die. Rank 0, the tube that always buzzes, is\n  // the longest frame.\n  const size = new Float32Array(nt);\n  for (let p = 0; p \u003c STREET * W; p++) if (S.gap[p] \u003c= 0) size[S.own[p]]++;\n  const key = [...size].map((v) => rnd() * Math.sqrt(v));\n  const order = [...Array(nt).keys()].sort((a, b) => key[a] - key[b]);\n  let tired = order[0];\n  for (let i = 0; i \u003c nt; i++) if (S.tubes[i].kind === 2 && size[i] > size[tired]) tired = i;\n  order.splice(order.indexOf(tired), 1);\n  order.unshift(tired);\n  order.forEach((t, rank) => (S.tubes[t].rank = rank));\n}\n\nfunction hsv(h, out, o) {\n  h = (((h % 360) + 360) % 360) / 60;\n  const i = Math.floor(h);\n  const up = 255 * (h - i);\n  const down = 255 - up;\n  out[o] = [255, down, 0, 0, up, 255][i];\n  out[o + 1] = [up, 255, 255, down, 0, 0][i];\n  out[o + 2] = [0, 0, up, 255, 255, down][i];\n}\n\n// The controller over a whole sign: a sequence that blacks the sign out and\n// lights it tube by tube, then holds, or a double blink, then holds. The\n// hold shrinks as Pace rises, and a sign runs its show at all only when the\n// night is busy enough for it; otherwise it stays lit.\nfunction signOn(sg, order, t, show, hold) {\n  if (!sg.prog || sg.busy >= show) return 1;\n  const c = (t + sg.ph) % ((sg.prog === 1 ? 0.6 + sg.count * 0.2 : 0.45) + sg.hold * hold);\n  if (sg.prog === 1) return c >= 0.6 + order * 0.2;\n  return !(c \u003c 0.15 || (c > 0.3 && c \u003c 0.45));\n}\n\nfunction tubeOn(sg, tb, t) {\n  if (tb.kind === 0) return ICONS[sg.icon].anim(tb.k, t + sg.ph);\n  if (tb.kind === 1) return (((t * 1.1 - tb.k / tb.n) % 1) + 1) % 1 \u003c 0.55 ? 1 : 0;\n  if (tb.kind === 3) return (Math.floor(t * 4) + tb.k) % 3 ? 1 : 0;\n  return 1;\n}\n\n// A tired tube: steady stretches, then a buzz of random stutter or a dropout.\n// As wear rises the stretches shorten and the steady glow sinks.\nfunction flicker(S, i, dt, wear) {\n  if ((S.ft[i] -= dt) \u003c= 0) {\n    const steady = S.fm[i] === 0;\n    S.fm[i] = steady ? (Math.random() \u003c 0.7 ? 1 : 2) : 0;\n    S.ft[i] = !steady ? (0.6 + Math.random() * 3) / (0.6 + wear * 3) : S.fm[i] === 1 ? 0.25 + Math.random() * 0.8 : 0.08 + Math.random() * 0.4;\n  }\n  if (S.fm[i] === 1) {\n    if (Math.random() \u003c 0.45) S.fv[i] = Math.random() \u003c 0.5 ? 1 : 0.15 + Math.random() * 0.35;\n    return S.fv[i];\n  }\n  return S.fm[i] === 2 ? 0 : 1 - wear * 0.3;\n}\n\nexport function setup(params) {\n  Object.assign(params, { own: new Int16Array(N), gap: new Float32Array(N), buf: new Uint8ClampedArray(N * 3), tubes: null, t: 0, clk: 0, cut: -1, hue: 0, rain: 0.06, drops: [] });\n  params.seed = 5;\n  for (let i = 0; i \u003c 300; i++) params.drops.push({ x: Math.random() * (W + 12) - 6, y: Math.random() * H, v: 70 + Math.random() * 50, n: 4 + Math.floor(Math.random() * 5) });\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const k = input.knobValues || [];\n  const wear = k[2] ?? 0;\n  S.hue = (k[0] ?? 0) * 360;\n  S.rain = k[3] ?? 0.06;\n  const pr = input.btnPressed || [];\n  if (!S.tubes || pr[1]) {\n    if (S.tubes) S.seed++;\n    build(S, S.seed);\n  }\n  if (pr[0]) {\n    // Power cut: the signs strike again in a shuffled order, half a second apart.\n    S.cut = 0;\n    shuffle(S.signs.map((s, i) => i), Math.random).forEach((si, n) => (S.signs[si].ign = 1.2 + n * 0.5 + Math.random() * 0.2));\n  }\n  S.t += dt;\n  const pace = k[1] ?? 2;\n  const show = pace / 3.6;\n  S.clk += dt * pace;\n  if (S.cut >= 0 && (S.cut += dt) > Math.max(...S.signs.map((s) => s.ign)) + 0.8) S.cut = -1;\n  const T = S.tubes;\n  const nt = T.length;\n  const tired = 1 + Math.floor(wear * 0.45 * nt);\n  const dead = Math.floor(wear * 0.3 * nt);\n  for (let i = 0; i \u003c nt; i++) {\n    const tb = T[i];\n    const sg = S.signs[tb.s];\n    let on = signOn(sg, tb.order, S.clk, show, 12 / Math.max(0.1, pace * pace)) ? tubeOn(sg, tb, S.clk) : 0;\n    if (tb.rank \u003c tired) on *= flicker(S, i, dt, wear);\n    if (tb.rank >= nt - dead) on = 0;\n    if (S.cut >= 0) {\n      // A transformer strikes over 0.7 s, the tube catching more often as it warms.\n      const u = (S.cut - sg.ign) / 0.7;\n      on *= u \u003c 0 ? 0 : u >= 1 || Math.random() \u003c 0.2 + 0.8 * u ? 1 : 0;\n    }\n    S.tb[i] = on;\n    hsv(tb.hue + S.hue, S.rgb, i * 3);\n  }\n  const n = Math.round(S.rain * S.drops.length);\n  for (let i = 0; i \u003c n; i++) {\n    const d = S.drops[i];\n    d.y += d.v * dt;\n    d.x += d.v * dt * 0.1;\n    if (d.y - d.n > H) {\n      d.y = -Math.random() * 20;\n      d.x = Math.random() * (W + 12) - 12;\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.tubes) return;\n  const { buf, rgb } = S;\n  buf.fill(0);\n  // Rain hazes the air: the glow reaches further and brightens past the 24/255\n  // the wall otherwise stays under.\n  const haze = Math.max(0, S.rain - 0.1);\n  const reach = GLOW + haze * 3.5;\n  const glow = (20 + haze * 110) / 255;\n  for (let p = 0; p \u003c STREET * W; p++) {\n    const o = S.own[p];\n    const g = S.gap[p];\n    if (o \u003c 0 || g >= reach) continue;\n    const b = S.tb[o];\n    // An unlit tube is still glass: its own colour at 14/255.\n    const f = 1 - g / reach;\n    const lv = g \u003c= 0 ? Math.max(b, 0.055) : glow * f * f * b;\n    for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] = rgb[o * 3 + c] * lv;\n  }\n  // The street mirrors the bottom of the wall, shivering. Asphalt gives back\n  // next to nothing; the puddles, low ellipses in the view, give back half\n  // and spread as the rain comes on.\n  const grow = 0.85 + S.rain;\n  for (let d = 0; d \u003c H - STREET; d++) {\n    const ys = STREET - 1 - d;\n    for (let x = 0; x \u003c W; x++) {\n      let wet = 0;\n      for (const [cx, cd, rx] of PUDDLES) wet = Math.max(wet, (1 - ((x - cx) / (rx * grow)) ** 2 - ((d - cd) / (rx * grow * 0.36)) ** 2) * 3);\n      const lv = (0.04 + 0.56 * Math.min(1, wet)) * (1 - d / 24);\n      const xs = x + Math.round(Math.sin(d * 1.3 + S.t * 3) * (0.6 + S.rain));\n      if (xs \u003c 0 || xs >= W) continue;\n      const q = (ys * W + xs) * 3;\n      const p = ((STREET + d) * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) buf[p + c] = buf[q + c] * lv;\n    }\n  }\n  // Rain shows only where a tube lights it, in that tube's colour.\n  const n = Math.round(S.rain * S.drops.length);\n  for (let i = 0; i \u003c n; i++) {\n    const dr = S.drops[i];\n    for (let j = 0; j \u003c dr.n; j++) {\n      const y = Math.floor(dr.y) - j;\n      const x = Math.floor(dr.x - j * 0.1);\n      if (y \u003c 0 || y >= H || x \u003c 0 || x >= W) continue;\n      const p = y * W + x;\n      const fade = 1 - (j / dr.n) * 0.6;\n      if (y >= STREET) {\n        for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] *= 1.8;\n        continue;\n      }\n      const o = S.own[p];\n      const g = S.gap[p];\n      if (o \u003c 0 || g \u003c= 0) continue;\n      const lv = (0.9 - (0.7 * g) / REACH) * S.tb[o] * fade;\n      for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] = Math.max(buf[p * 3 + c], rgb[o * 3 + c] * lv);\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      if (buf[p] | buf[p + 1] | buf[p + 2]) display.setPixel(x, y, buf[p], buf[p + 1], buf[p + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Pace=0..4, Wear=0..1, Rain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns every tube round the colour wheel together, so each sign keeps its opposite pair; at 0 the alley burns its own red, green, cyan and magenta."},{"name":"Pace","min":0,"max":4,"about":"The tempo of the sign controllers and how many run a show: at 0 every sign holds still, at 2 about half black out and relight tube by tube or double-blink every few seconds, at 4 all of them, with hardly a pause between."},{"name":"Wear","min":0,"max":1,"about":"How tired the glass is: at 0 one frame tube buzzes, at 1 nearly half the tubes stutter and sag and three in ten have died dark."},{"name":"Rain","min":0,"max":1,"about":"A drizzle that shows only where a sign lights it, puddles that spread on the asphalt and mirror the signs, and haze that widens every glow."}],"start":[0,2,0,0.06],"measures":{"motion":0.7208,"detail":0.1177,"edges":0.5393,"complexity":0.4294,"coverage":0.2587,"colour":0.5724,"drift":0.1545},"knobResponse":[0.2671,0.0583,0.0882,0.0858]},{"slug":"night-flight","title":"Night Flight","family":"city","round":22,"note":"여객기 창으로 내려다본 밤 도시예요. 1 LED 가로등이 바둑판 길과 대로, 강 위 다리를 따라 레이스처럼 이어지고, 고속도로에는 흰 전조등과 빨간 미등이 흘러요. 도시는 초록 항법등과 흰 섬광등이 달린 날개 끝을 지나 왼쪽 아래로 천천히 미끄러져요.","idea":"A city at night seen straight down from an airliner window: a lace of single-LED street lights traces the grid, the boulevards, a highway full of car lights and the bridges over a dark river, all on the sodium glow of the town, sliding slowly past the wingtip and its blinking lights while wisps of cloud drift under the plane.","buttons":"K3 tap flies over another city.","code":"// ===== Patternflow pattern =====\n// Title:   Night Flight\n// Family:  city\n// Idea:    A city at night seen straight down from an airliner window: a lace of single-LED street lights traces the grid, the boulevards, a highway full of car lights and the bridges over a dark river, all on the sodium glow of the town, sliding slowly past the wingtip and its blinking lights while wisps of cloud drift under the plane.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after night photographs of cities taken from airliner windows\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Lamps=0..1, Speed=0.2..3, Grid=0..1, Haze=0..1\n//\n// Knob 1: Lamps. The street lights: an old sodium city at 0, orange with the odd green mercury lamp; turned up, the lamps are swapped for white LEDs one by one until the whole town is white at 1.\n// Knob 2: Speed. Ground speed: at 2 the city slides about 3.4 LEDs a second toward the lower left, at 0.2 it barely creeps; the cars on the highway keep their own pace on top of it.\n// Knob 3: Grid. Street spacing inside the boulevards: blocks eight or nine LEDs apart at 0, twelve or thirteen at 1, with more house lights inside the wider ones.\n// Knob 4: Haze. Cloud under the plane: a clear night with the odd wisp at the low end, a broken layer lit from below by the town in the middle, and at 1 an overcast the city only glows through.\n// Buttons: K3 tap flies over another city.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Boulevards about every 44 LEDs, rivers about every 380 LEDs along the track.\nconst SB = 44;\nconst RV = 380;\nconst HW = 3.3;\n// The city carpet: every LED leans this far away from its neighbours.\nconst AMP = 18.5;\nconst [RES, DOWN, DIAG, YARD, SUB] = [0, 1, 2, 3, 4];\nconst [STREET, BLVD, WHITE, HOUSE, FLOOD, HWY, PATH] = [1, 2, 3, 4, 5, 6, 7];\nconst { min, max, floor, round, sin, cos, abs, sqrt, exp } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst md = (a, m) => ((a % m) + m) % m;\nconst R2 = 0.70710678;\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nconst h3 = (i, j, k) => hash(i + Math.imul(k, 1013904223), j ^ Math.imul(k, 1664525));\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y);\n  let u = x - xi, v = y - yi;\n  u = u * u * (3 - 2 * u);\n  v = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1), d = hash(xi + 1, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\n// Boulevard lines, jittered a little each.\nconst AX = (S, i) => i * SB + floor(h3(i, 0, S + 101) * 9) - 4;\nconst AY = (S, j) => j * SB + floor(h3(j, 0, S + 202) * 9) - 4;\n\n// River k's centre line across the track (u) and its slope, in LEDs.\nfunction riverAt(S, k, u) {\n  const p1 = u / 19 + h3(k, 7, S) * 6.283;\n  const p2 = u / 7.3 + h3(k, 8, S) * 6.283;\n  const v = k * RV + (h3(k, 9, S) - 0.5) * 50 + 7 * sin(p1) + 2.2 * sin(p2);\n  return [v, (7 / 19) * cos(p1) + (2.2 / 7.3) * cos(p2)];\n}\nfunction riverDist(S, p, q) {\n  const u = p * R2;\n  const v = q * R2;\n  const [vr, dv] = riverAt(S, round(v / RV), u);\n  return abs(v - vr) / sqrt(1 + dv * dv);\n}\n\n// One cell of the city, kept in a window-sized ring buffer by world position.\nfunction gen(P, wx, wy) {\n  const S = P.seed;\n  const p = wx + wy;\n  const q = wx - wy;\n  const plus = (p & 1) === 0;\n  let i = floor(wx / SB);\n  if (wx \u003c AX(S, i)) i--;\n  else if (wx >= AX(S, i + 1)) i++;\n  let j = floor(wy / SB);\n  if (wy \u003c AY(S, j)) j--;\n  else if (wy >= AY(S, j + 1)) j++;\n  const x0 = AX(S, i);\n  const y0 = AY(S, j);\n  const bw = AX(S, i + 1) - x0;\n  const bh = AY(S, j + 1) - y0;\n  const dx = wx - x0;\n  const dy = wy - y0;\n  const ed = cl(min(dx - 1, bw - dx, dy - 1, bh - dy) / 9, 0, 1);\n  const hk = h3(i, j, S + 3);\n  const kind = hk \u003c 0.1 ? DOWN : hk \u003c 0.2 ? DIAG : hk \u003c 0.28 ? YARD : hk \u003c 0.42 ? SUB : RES;\n  const sp = P.sp + (h3(i, j, S + 4) \u003c 0.4 ? 1 : 0);\n  const r = h3(wx, wy, S + 5);\n  const r2 = h3(wy, wx, S + 6);\n  let M = 26 + 10 * vn(wx / 23 + 0.37, wy / 23 + (S & 255));\n  if (kind === DOWN) M += 12 * ed;\n  else if (kind === YARD) M -= 5 * ed;\n  let k = 0;\n  let b = 0;\n  const blvd = dx \u003c 2 || dy \u003c 2;\n  const house = 0.035 + P.grid * 0.05;\n  if (plus) {\n    if (blvd) [k, b] = [BLVD, 1];\n    else if (kind === DOWN) {\n      const s = sp - 1;\n      if ((dx - 1) % s === 0 || (dy - 1) % s === 0) [k, b] = [WHITE, 0.95];\n      else if (r \u003c 0.1) [k, b] = [WHITE, 0.9 + 0.1 * r2];\n    } else if (kind === DIAG) {\n      const D = 2 * sp + 2;\n      if (md(q, D) === 0 || md(p, D) === 0) [k, b] = [STREET, 0.96 + 0.04 * r2];\n      else if (r \u003c house) [k, b] = [HOUSE, 0.94];\n    } else if (kind === YARD) {\n      const s = sp + 3;\n      const lx = (dx - 1) % s;\n      const ly = (dy - 1) % s;\n      const lot = h3(i * 31 + floor((dx - 1) / s), j * 31 + floor((dy - 1) / s), S + 11);\n      if ((lx === 0 || ly === 0) && r > 0.25) [k, b] = [FLOOD, 0.92];\n      else if (lot \u003c 0.4 && lx > 1 && ly > 1 && lx \u003c s - 1 && ly \u003c s - 1 && (wy & 1) === 0) [k, b] = [FLOOD, 0.92 + 0.08 * r2];\n    } else if (kind === SUB) {\n      // Curving suburban streets: contour lines of a slow noise.\n      const u0 = i * 3.1 + 0.5;\n      const v0 = j * 1.7 + 0.5;\n      const lv = floor(vn(wx / 15 + u0, wy / 15 + v0) * 3);\n      if (lv !== floor(vn((wx + 1) / 15 + u0, wy / 15 + v0) * 3) || lv !== floor(vn(wx / 15 + u0, (wy + 1) / 15 + v0) * 3))\n        [k, b] = [STREET, 0.96 + 0.04 * r2];\n      else if (r \u003c house * 1.8) [k, b] = [HOUSE, 0.94];\n    } else {\n      const onX = (dx - 1) % sp === 0 && dx \u003c bw - 2;\n      const onY = (dy - 1) % sp === 0 && dy \u003c bh - 2;\n      if (onX || onY) {\n        if (r > 0.08) [k, b] = [STREET, 0.96 + 0.04 * r2];\n      } else if (r \u003c house) [k, b] = [HOUSE, 0.94];\n    }\n  }\n  // A park over a few blocks, dark, with one lit path across it.\n  if (kind === RES && h3(i, j, S + 7) \u003c 0.45) {\n    const nx = max(1, floor((bw - 3) / sp));\n    const ny = max(1, floor((bh - 3) / sp));\n    const pw = min(nx, 1 + (h3(i, j, S + 8) \u003c 0.6 ? 1 : 0));\n    const ph = min(ny, 2);\n    const px0 = 1 + floor(h3(i, j, S + 9) * (nx - pw + 1)) * sp;\n    const py0 = 1 + floor(h3(i, j, S + 10) * (ny - ph + 1)) * sp;\n    const pd = min(dx - px0, px0 + pw * sp - dx, dy - py0, py0 + ph * sp - dy);\n    if (pd > 0) {\n      if (!blvd) k = 0;\n      M += (21 - M) * cl(pd / 8, 0, 1);\n      if (plus && dx - px0 === dy - py0) [k, b] = [PATH, 0.75];\n    }\n  }\n  // The river, its embankment roads and bridges where the boulevards cross.\n  const d = riverDist(S, p, q);\n  M += (20 - M) * cl((HW + 6 - d) / 9, 0, 1);\n  const wt = cl((HW + 0.6 - d) / 1.6, 0, 1);\n  if (d \u003c HW + 2.8 && !blvd) k = 0;\n  if (plus && d >= HW + 0.9 && d \u003c HW + 2.3) [k, b] = [STREET, 0.92];\n  // The highway corridor: boulevards bridge it, the median carries lamps,\n  // the two carriageways (dp 0 and 4) carry the cars drawn each frame.\n  const dp = p - P.ph;\n  if (dp >= -4 && dp \u003c= 8) {\n    if (!blvd || abs(dp - 2) \u003c= 3) k = 0;\n    M += (21 - M) * cl((7 - abs(dp - 2)) / 7, 0, 1);\n    if ((dp === -2 || dp === 6) && md(q + dp * 2, 8) === 0) [k, b] = [HWY, 1];\n  }\n  const slot = (wx & 63) + md(wy, H) * W;\n  P.KD[slot] = k;\n  P.LB[slot] = b;\n  P.LH[slot] = h3(wx, wy, S + 12);\n  P.MS[slot] = M;\n  P.WT[slot] = wt;\n}\n\nfunction build(P) {\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) gen(P, P.ox + x, P.oy + y);\n}\n\n// One step along the track: the ground moves one LED left and one down.\nfunction step(P) {\n  P.ox += 1;\n  P.oy -= 1;\n  for (let y = 0; y \u003c H; y++) gen(P, P.ox + W - 1, P.oy + y);\n  for (let x = 0; x \u003c W; x++) gen(P, P.ox + x, P.oy);\n}\n\nfunction place(P) {\n  P.seed = floor(rnd() * 4096);\n  let ox = 20000 + floor(rnd() * 4000);\n  let oy = 20000 + floor(rnd() * 4000);\n  // Put a river across the middle of the window.\n  const u = (ox + oy + 96) * R2;\n  const qc = ox - oy - 32;\n  const [vr] = riverAt(P.seed, round((qc * R2) / RV), u);\n  const dl = round((vr / R2 - qc + (rnd() - 0.5) * 30) / 2);\n  ox += dl;\n  oy -= dl;\n  P.ox = ox;\n  P.oy = oy;\n  P.p0 = ox + oy;\n  const ph = P.p0 + 80 + floor(rnd() * 12);\n  P.ph = ph + (ph & 1);\n}\n\n// The wingtip, fixed in the window: a swept wing in from the left edge.\nconst WING = [\n  [-1, 92],\n  [30, 110.5],\n  [31, 113],\n  [27.5, 116.5],\n  [-1, 131],\n];\nfunction inPoly(px, py, poly) {\n  let c = false;\n  for (let a = 0, b = poly.length - 1; a \u003c poly.length; b = a++) {\n    const [xa, ya] = poly[a];\n    const [xb, yb] = poly[b];\n    if (ya > py !== yb > py && px \u003c ((xb - xa) * (py - ya)) / (yb - ya) + xa) c = !c;\n  }\n  return c;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, {\n    KD: new Uint8Array(N),\n    LB: new Float32Array(N),\n    LH: new Float32Array(N),\n    MS: new Float32Array(N),\n    WT: new Float32Array(N),\n    wing: new Float32Array(N),\n    CL: new Float32Array(33 * 65),\n    GA: new Float32Array(N),\n    GB: new Float32Array(N),\n    glowDirty: true,\n    acc: 0,\n    cs: 0,\n    t: 0,\n    sp: 0,\n    built: false,\n  });\n  place(P);\n  // Wing shading: darker toward the root, a faint sheen along the leading edge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (!inPoly(x + 0.5, y + 0.5, WING)) continue;\n      const lead = abs((y + 0.5 - 92) * 31 - (x + 1.5) * 18.5) / 36.1;\n      P.wing[x + y * W] = 26 + 8 * (x / 30) + 40 * cl(1 - lead / 1.6, 0, 1) ** 1.5;\n    }\n  // The lights at the tip sit on cells the carpet pushes up.\n  P.nav = (P.p0 + 29 + 111) & 1 ? [30, 111] : [29, 111];\n  P.strobe = (P.p0 + 27 + 115) & 1 ? [28, 115] : [27, 115];\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  P.k1 = cl(k[0], 0, 1);\n  P.spd = cl(k[1], 0.2, 3);\n  P.grid = cl(k[2], 0, 1);\n  P.haze = cl(k[3], 0, 1);\n  const sp = 8 + round(P.grid * 4);\n  if (input.btnPressed && input.btnPressed[2]) {\n    place(P);\n    P.built = false;\n  }\n  if (!P.built || sp !== P.sp) {\n    P.sp = sp;\n    P.built = true;\n    P.glowDirty = true;\n    build(P);\n  }\n  P.acc += dt * P.spd * 1.2;\n  let n = 0;\n  while (P.acc >= 1) {\n    P.acc -= 1;\n    n++;\n  }\n  if (n > 24) {\n    P.ox += n;\n    P.oy -= n;\n    build(P);\n  } else for (let s = 0; s \u003c n; s++) step(P);\n  // Cloud is nearer than the ground, so it slides past faster.\n  P.cs += dt * P.spd * 1.2 * 1.414 * 1.7;\n  P.t += dt;\n  if (n || P.glowDirty) glow(P);\n  // Cloud cover on a 2-LED lattice.\n  const th = 0.8 - 0.78 * P.haze;\n  const veil = 0.25 * P.haze * P.haze;\n  const thick = 0.45 + 0.4 * P.haze;\n  for (let gy = 0; gy \u003c 65; gy++)\n    for (let gx = 0; gx \u003c 33; gx++) {\n      const x = gx * 2;\n      const y = gy * 2;\n      const a = (y - x) * R2 - P.cs;\n      const bb = (x + y) * R2;\n      const nz = 0.65 * vn(a / 30 + 40, bb / 16 + 5.3 + P.t * 0.02) + 0.35 * vn(a / 11 + 70, bb / 7 + 11 - P.t * 0.03);\n      let dn = cl((nz - th) / 0.28, 0, 1);\n      dn = dn * dn * (3 - 2 * dn);\n      P.CL[gx + gy * 33] = min(0.88, dn * thick + veil);\n    }\n}\n\n// The town's light blurred, for cloud to glow with: two box passes each way.\nfunction glow(P) {\n  P.glowDirty = false;\n  const A = P.GA;\n  const B = P.GB;\n  for (let y = 0; y \u003c H; y++) {\n    const row = md(P.oy + y, H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const slot = ((P.ox + x) & 63) + row;\n      A[x + y * W] = P.KD[slot] ? P.LB[slot] : 0;\n    }\n  }\n  for (let pass = 0; pass \u003c 4; pass++) {\n    const [src, dst] = pass & 1 ? [B, A] : [A, B];\n    const horiz = pass \u003c 2;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        let sum = 0;\n        for (let d = -2; d \u003c= 2; d++) {\n          const u = horiz ? cl(x + d, 0, W - 1) : x;\n          const v = horiz ? y : cl(y + d, 0, H - 1);\n          sum += src[u + v * W];\n        }\n        dst[x + y * W] = sum / 5;\n      }\n  }\n}\n\nconst SOD = [255, 132, 26];\nconst LEDW = [[255, 214, 168], [226, 236, 255]];\nconst MERC = [150, 255, 196];\nconst HOUSEC = [255, 176, 92];\nconst FLOODC = [214, 230, 255];\nconst HEAD = [255, 250, 232];\nconst TAIL = [255, 30, 20];\nconst C = [0, 0, 0];\nconst NB = [0.5, 0.62, 1];\nconst NIGHT = 0.7;\n\n// A lamp's colour into C, from its kind, its dice and the Lamps knob.\nfunction lampColour(kind, h, k1) {\n  const h2 = (h * 7.31) % 1;\n  const h3c = (h * 13.7) % 1;\n  if (kind === STREET || kind === BLVD || kind === HWY || kind === PATH) {\n    const base = kind === BLVD ? 0.3 : kind === PATH ? 0.6 : 0.06;\n    if (h \u003c base + k1 * (1 - base)) {\n      for (let c = 0; c \u003c 3; c++) C[c] = LEDW[0][c] + (LEDW[1][c] - LEDW[0][c]) * h3c;\n    } else if (h2 > 0.94 && kind === STREET) {\n      for (let c = 0; c \u003c 3; c++) C[c] = MERC[c];\n    } else {\n      C[0] = SOD[0];\n      C[1] = SOD[1] + 24 * h3c;\n      C[2] = SOD[2] + 14 * h3c;\n    }\n  } else if (kind === WHITE) {\n    for (let c = 0; c \u003c 3; c++) C[c] = LEDW[0][c] + (LEDW[1][c] - LEDW[0][c]) * h2;\n  } else if (kind === HOUSE) {\n    for (let c = 0; c \u003c 3; c++) C[c] = HOUSEC[c];\n  } else {\n    for (let c = 0; c \u003c 3; c++) C[c] = FLOODC[c];\n  }\n  // Every lamp burns at full strength in its brightest channel.\n  const m = 255 / max(C[0], C[1], C[2]);\n  for (let c = 0; c \u003c 3; c++) C[c] *= m;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.built) return;\n  const t = P.t;\n  const k1 = P.k1;\n  const haze = [1 - 0.18 * k1, 0.64 + 0.24 * k1, 0.36 + 0.64 * k1];\n  const cloudT = [1 - 0.12 * k1, 0.8 + 0.12 * k1, 0.64 + 0.36 * k1];\n  const water = [0.32, 0.5, 1];\n  const wingT = [0.78, 0.84, 1];\n  // Strobe: a double flash every 1.25 s.\n  const ph = t % 1.25;\n  const flash = ph \u003c 0.05 || (ph > 0.15 && ph \u003c 0.2) ? 1 : 0;\n  // Cars: lane A runs with the ground, lane B against it, in cells along the lane.\n  const vA = 0.9 * t;\n  const vB = -0.9 * t;\n  for (let y = 0; y \u003c H; y++) {\n    const wy = P.oy + y;\n    const row = md(wy, H) * W;\n    const gy = y >> 1;\n    const fy = (y & 1) * 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const wx = P.ox + x;\n      const slot = (wx & 63) + row;\n      const plus = ((x + y + P.p0) & 1) === 0;\n      const gx = x >> 1;\n      const fx = (x & 1) * 0.5;\n      const ci = gx + gy * 33;\n      const c0 = P.CL[ci] + (P.CL[ci + 1] - P.CL[ci]) * fx;\n      const c1 = P.CL[ci + 33] + (P.CL[ci + 34] - P.CL[ci + 33]) * fx;\n      const al = c0 + (c1 - c0) * fy;\n      const wg = P.wing[x + y * W];\n      let M;\n      let tr;\n      let tg;\n      let tb;\n      if (wg > 0) {\n        const nd = (x - P.nav[0]) ** 2 + (y - P.nav[1]) ** 2;\n        const sd = (x - P.strobe[0]) ** 2 + (y - P.strobe[1]) ** 2;\n        M = wg + 80 * flash * exp(-sd / 60);\n        const gl = 0.5 * exp(-nd / 10);\n        tr = wingT[0] * (1 - gl);\n        tg = wingT[1];\n        tb = wingT[2] * (1 - gl * 0.6);\n        let v = max(0, M + (plus ? 10 : -10));\n        let r = tr * v;\n        let g = tg * v;\n        let b = tb * v;\n        if (x === P.nav[0] && y === P.nav[1]) [r, g, b] = [40, 255, 90];\n        else if (x === P.strobe[0] && y === P.strobe[1]) {\n          if (flash) [r, g, b] = [255, 255, 255];\n          else [r, g, b] = [70, 74, 86];\n        }\n        display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n        continue;\n      }\n      const wt = P.WT[slot];\n      M = P.MS[slot];\n      // Ground, water and cloud tints mix, and the brightest channel is put\n      // back to 1 so the mix never dims a step.\n      tr = haze[0] + (water[0] - haze[0]) * wt;\n      tg = haze[1] + (water[1] - haze[1]) * wt;\n      tb = haze[2] + (water[2] - haze[2]) * wt;\n      tr += (cloudT[0] - tr) * al;\n      tg += (cloudT[1] - tg) * al;\n      tb += (cloudT[2] - tb) * al;\n      // The cells between the carpet's dots fall toward blue-black.\n      if (!plus) {\n        const nb = NIGHT * (1 - al);\n        tr += (NB[0] - tr) * nb;\n        tg += (NB[1] - tg) * nb;\n        tb += (NB[2] - tb) * nb;\n      }\n      // Cloud lit from below by the town.\n      const Lc = 0.55 * M + 14 + 210 * P.GA[x + y * W] + 24 * al;\n      const G = M + (Lc - M) * al;\n      const v = max(0, G + (plus ? AMP : -AMP)) / max(tr, tg, tb);\n      let r = v * tr;\n      let g = v * tg;\n      let b = v * tb;\n      if (plus) {\n        let kind = P.KD[slot];\n        let lb = P.LB[slot];\n        let col = null;\n        const dp = x + y + P.p0 - P.ph;\n        if (dp === 0 || dp === 4) {\n          // Carriageways: m counts cells along the lane.\n          const m = (x - y + P.ox - P.oy) >> 1;\n          const lane = dp === 0 ? 0 : 1;\n          const slotK = floor(m + (lane ? vB : vA) + 0.5);\n          if (h3(slotK, lane, P.seed + 21) \u003c 0.45) {\n            col = lane ? TAIL : HEAD;\n            lb = 1;\n          }\n        }\n        if (col || kind) {\n          if (!col) {\n            lampColour(kind, P.LH[slot], k1);\n            col = C;\n          }\n          const h = P.LH[slot];\n          const tw = lb * (0.97 + 0.03 * sin(t * (2.5 + 4 * h) + h * 40));\n          const keep = 1 - 0.85 * al;\n          r = col[0] * tw * keep + r * (1 - keep);\n          g = col[1] * tw * keep + g * (1 - keep);\n          b = col[2] * tw * keep + b * (1 - keep);\n        }\n      }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n  }\n}\n","layer":{"id":"layer-night-flight","type":"code","name":"night-flight","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Night Flight\n// Family:  city\n// Idea:    A city at night seen straight down from an airliner window: a lace of single-LED street lights traces the grid, the boulevards, a highway full of car lights and the bridges over a dark river, all on the sodium glow of the town, sliding slowly past the wingtip and its blinking lights while wisps of cloud drift under the plane.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after night photographs of cities taken from airliner windows\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Lamps=0..1, Speed=0.2..3, Grid=0..1, Haze=0..1\n//\n// Knob 1: Lamps. The street lights: an old sodium city at 0, orange with the odd green mercury lamp; turned up, the lamps are swapped for white LEDs one by one until the whole town is white at 1.\n// Knob 2: Speed. Ground speed: at 2 the city slides about 3.4 LEDs a second toward the lower left, at 0.2 it barely creeps; the cars on the highway keep their own pace on top of it.\n// Knob 3: Grid. Street spacing inside the boulevards: blocks eight or nine LEDs apart at 0, twelve or thirteen at 1, with more house lights inside the wider ones.\n// Knob 4: Haze. Cloud under the plane: a clear night with the odd wisp at the low end, a broken layer lit from below by the town in the middle, and at 1 an overcast the city only glows through.\n// Buttons: K3 tap flies over another city.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Boulevards about every 44 LEDs, rivers about every 380 LEDs along the track.\nconst SB = 44;\nconst RV = 380;\nconst HW = 3.3;\n// The city carpet: every LED leans this far away from its neighbours.\nconst AMP = 18.5;\nconst [RES, DOWN, DIAG, YARD, SUB] = [0, 1, 2, 3, 4];\nconst [STREET, BLVD, WHITE, HOUSE, FLOOD, HWY, PATH] = [1, 2, 3, 4, 5, 6, 7];\nconst { min, max, floor, round, sin, cos, abs, sqrt, exp } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst md = (a, m) => ((a % m) + m) % m;\nconst R2 = 0.70710678;\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nconst h3 = (i, j, k) => hash(i + Math.imul(k, 1013904223), j ^ Math.imul(k, 1664525));\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y);\n  let u = x - xi, v = y - yi;\n  u = u * u * (3 - 2 * u);\n  v = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1), d = hash(xi + 1, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\n// Boulevard lines, jittered a little each.\nconst AX = (S, i) => i * SB + floor(h3(i, 0, S + 101) * 9) - 4;\nconst AY = (S, j) => j * SB + floor(h3(j, 0, S + 202) * 9) - 4;\n\n// River k's centre line across the track (u) and its slope, in LEDs.\nfunction riverAt(S, k, u) {\n  const p1 = u / 19 + h3(k, 7, S) * 6.283;\n  const p2 = u / 7.3 + h3(k, 8, S) * 6.283;\n  const v = k * RV + (h3(k, 9, S) - 0.5) * 50 + 7 * sin(p1) + 2.2 * sin(p2);\n  return [v, (7 / 19) * cos(p1) + (2.2 / 7.3) * cos(p2)];\n}\nfunction riverDist(S, p, q) {\n  const u = p * R2;\n  const v = q * R2;\n  const [vr, dv] = riverAt(S, round(v / RV), u);\n  return abs(v - vr) / sqrt(1 + dv * dv);\n}\n\n// One cell of the city, kept in a window-sized ring buffer by world position.\nfunction gen(P, wx, wy) {\n  const S = P.seed;\n  const p = wx + wy;\n  const q = wx - wy;\n  const plus = (p & 1) === 0;\n  let i = floor(wx / SB);\n  if (wx \u003c AX(S, i)) i--;\n  else if (wx >= AX(S, i + 1)) i++;\n  let j = floor(wy / SB);\n  if (wy \u003c AY(S, j)) j--;\n  else if (wy >= AY(S, j + 1)) j++;\n  const x0 = AX(S, i);\n  const y0 = AY(S, j);\n  const bw = AX(S, i + 1) - x0;\n  const bh = AY(S, j + 1) - y0;\n  const dx = wx - x0;\n  const dy = wy - y0;\n  const ed = cl(min(dx - 1, bw - dx, dy - 1, bh - dy) / 9, 0, 1);\n  const hk = h3(i, j, S + 3);\n  const kind = hk \u003c 0.1 ? DOWN : hk \u003c 0.2 ? DIAG : hk \u003c 0.28 ? YARD : hk \u003c 0.42 ? SUB : RES;\n  const sp = P.sp + (h3(i, j, S + 4) \u003c 0.4 ? 1 : 0);\n  const r = h3(wx, wy, S + 5);\n  const r2 = h3(wy, wx, S + 6);\n  let M = 26 + 10 * vn(wx / 23 + 0.37, wy / 23 + (S & 255));\n  if (kind === DOWN) M += 12 * ed;\n  else if (kind === YARD) M -= 5 * ed;\n  let k = 0;\n  let b = 0;\n  const blvd = dx \u003c 2 || dy \u003c 2;\n  const house = 0.035 + P.grid * 0.05;\n  if (plus) {\n    if (blvd) [k, b] = [BLVD, 1];\n    else if (kind === DOWN) {\n      const s = sp - 1;\n      if ((dx - 1) % s === 0 || (dy - 1) % s === 0) [k, b] = [WHITE, 0.95];\n      else if (r \u003c 0.1) [k, b] = [WHITE, 0.9 + 0.1 * r2];\n    } else if (kind === DIAG) {\n      const D = 2 * sp + 2;\n      if (md(q, D) === 0 || md(p, D) === 0) [k, b] = [STREET, 0.96 + 0.04 * r2];\n      else if (r \u003c house) [k, b] = [HOUSE, 0.94];\n    } else if (kind === YARD) {\n      const s = sp + 3;\n      const lx = (dx - 1) % s;\n      const ly = (dy - 1) % s;\n      const lot = h3(i * 31 + floor((dx - 1) / s), j * 31 + floor((dy - 1) / s), S + 11);\n      if ((lx === 0 || ly === 0) && r > 0.25) [k, b] = [FLOOD, 0.92];\n      else if (lot \u003c 0.4 && lx > 1 && ly > 1 && lx \u003c s - 1 && ly \u003c s - 1 && (wy & 1) === 0) [k, b] = [FLOOD, 0.92 + 0.08 * r2];\n    } else if (kind === SUB) {\n      // Curving suburban streets: contour lines of a slow noise.\n      const u0 = i * 3.1 + 0.5;\n      const v0 = j * 1.7 + 0.5;\n      const lv = floor(vn(wx / 15 + u0, wy / 15 + v0) * 3);\n      if (lv !== floor(vn((wx + 1) / 15 + u0, wy / 15 + v0) * 3) || lv !== floor(vn(wx / 15 + u0, (wy + 1) / 15 + v0) * 3))\n        [k, b] = [STREET, 0.96 + 0.04 * r2];\n      else if (r \u003c house * 1.8) [k, b] = [HOUSE, 0.94];\n    } else {\n      const onX = (dx - 1) % sp === 0 && dx \u003c bw - 2;\n      const onY = (dy - 1) % sp === 0 && dy \u003c bh - 2;\n      if (onX || onY) {\n        if (r > 0.08) [k, b] = [STREET, 0.96 + 0.04 * r2];\n      } else if (r \u003c house) [k, b] = [HOUSE, 0.94];\n    }\n  }\n  // A park over a few blocks, dark, with one lit path across it.\n  if (kind === RES && h3(i, j, S + 7) \u003c 0.45) {\n    const nx = max(1, floor((bw - 3) / sp));\n    const ny = max(1, floor((bh - 3) / sp));\n    const pw = min(nx, 1 + (h3(i, j, S + 8) \u003c 0.6 ? 1 : 0));\n    const ph = min(ny, 2);\n    const px0 = 1 + floor(h3(i, j, S + 9) * (nx - pw + 1)) * sp;\n    const py0 = 1 + floor(h3(i, j, S + 10) * (ny - ph + 1)) * sp;\n    const pd = min(dx - px0, px0 + pw * sp - dx, dy - py0, py0 + ph * sp - dy);\n    if (pd > 0) {\n      if (!blvd) k = 0;\n      M += (21 - M) * cl(pd / 8, 0, 1);\n      if (plus && dx - px0 === dy - py0) [k, b] = [PATH, 0.75];\n    }\n  }\n  // The river, its embankment roads and bridges where the boulevards cross.\n  const d = riverDist(S, p, q);\n  M += (20 - M) * cl((HW + 6 - d) / 9, 0, 1);\n  const wt = cl((HW + 0.6 - d) / 1.6, 0, 1);\n  if (d \u003c HW + 2.8 && !blvd) k = 0;\n  if (plus && d >= HW + 0.9 && d \u003c HW + 2.3) [k, b] = [STREET, 0.92];\n  // The highway corridor: boulevards bridge it, the median carries lamps,\n  // the two carriageways (dp 0 and 4) carry the cars drawn each frame.\n  const dp = p - P.ph;\n  if (dp >= -4 && dp \u003c= 8) {\n    if (!blvd || abs(dp - 2) \u003c= 3) k = 0;\n    M += (21 - M) * cl((7 - abs(dp - 2)) / 7, 0, 1);\n    if ((dp === -2 || dp === 6) && md(q + dp * 2, 8) === 0) [k, b] = [HWY, 1];\n  }\n  const slot = (wx & 63) + md(wy, H) * W;\n  P.KD[slot] = k;\n  P.LB[slot] = b;\n  P.LH[slot] = h3(wx, wy, S + 12);\n  P.MS[slot] = M;\n  P.WT[slot] = wt;\n}\n\nfunction build(P) {\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) gen(P, P.ox + x, P.oy + y);\n}\n\n// One step along the track: the ground moves one LED left and one down.\nfunction step(P) {\n  P.ox += 1;\n  P.oy -= 1;\n  for (let y = 0; y \u003c H; y++) gen(P, P.ox + W - 1, P.oy + y);\n  for (let x = 0; x \u003c W; x++) gen(P, P.ox + x, P.oy);\n}\n\nfunction place(P) {\n  P.seed = floor(rnd() * 4096);\n  let ox = 20000 + floor(rnd() * 4000);\n  let oy = 20000 + floor(rnd() * 4000);\n  // Put a river across the middle of the window.\n  const u = (ox + oy + 96) * R2;\n  const qc = ox - oy - 32;\n  const [vr] = riverAt(P.seed, round((qc * R2) / RV), u);\n  const dl = round((vr / R2 - qc + (rnd() - 0.5) * 30) / 2);\n  ox += dl;\n  oy -= dl;\n  P.ox = ox;\n  P.oy = oy;\n  P.p0 = ox + oy;\n  const ph = P.p0 + 80 + floor(rnd() * 12);\n  P.ph = ph + (ph & 1);\n}\n\n// The wingtip, fixed in the window: a swept wing in from the left edge.\nconst WING = [\n  [-1, 92],\n  [30, 110.5],\n  [31, 113],\n  [27.5, 116.5],\n  [-1, 131],\n];\nfunction inPoly(px, py, poly) {\n  let c = false;\n  for (let a = 0, b = poly.length - 1; a \u003c poly.length; b = a++) {\n    const [xa, ya] = poly[a];\n    const [xb, yb] = poly[b];\n    if (ya > py !== yb > py && px \u003c ((xb - xa) * (py - ya)) / (yb - ya) + xa) c = !c;\n  }\n  return c;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, {\n    KD: new Uint8Array(N),\n    LB: new Float32Array(N),\n    LH: new Float32Array(N),\n    MS: new Float32Array(N),\n    WT: new Float32Array(N),\n    wing: new Float32Array(N),\n    CL: new Float32Array(33 * 65),\n    GA: new Float32Array(N),\n    GB: new Float32Array(N),\n    glowDirty: true,\n    acc: 0,\n    cs: 0,\n    t: 0,\n    sp: 0,\n    built: false,\n  });\n  place(P);\n  // Wing shading: darker toward the root, a faint sheen along the leading edge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      if (!inPoly(x + 0.5, y + 0.5, WING)) continue;\n      const lead = abs((y + 0.5 - 92) * 31 - (x + 1.5) * 18.5) / 36.1;\n      P.wing[x + y * W] = 26 + 8 * (x / 30) + 40 * cl(1 - lead / 1.6, 0, 1) ** 1.5;\n    }\n  // The lights at the tip sit on cells the carpet pushes up.\n  P.nav = (P.p0 + 29 + 111) & 1 ? [30, 111] : [29, 111];\n  P.strobe = (P.p0 + 27 + 115) & 1 ? [28, 115] : [27, 115];\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = cl(dt, 0, 0.1);\n  P.k1 = cl(k[0], 0, 1);\n  P.spd = cl(k[1], 0.2, 3);\n  P.grid = cl(k[2], 0, 1);\n  P.haze = cl(k[3], 0, 1);\n  const sp = 8 + round(P.grid * 4);\n  if (input.btnPressed && input.btnPressed[2]) {\n    place(P);\n    P.built = false;\n  }\n  if (!P.built || sp !== P.sp) {\n    P.sp = sp;\n    P.built = true;\n    P.glowDirty = true;\n    build(P);\n  }\n  P.acc += dt * P.spd * 1.2;\n  let n = 0;\n  while (P.acc >= 1) {\n    P.acc -= 1;\n    n++;\n  }\n  if (n > 24) {\n    P.ox += n;\n    P.oy -= n;\n    build(P);\n  } else for (let s = 0; s \u003c n; s++) step(P);\n  // Cloud is nearer than the ground, so it slides past faster.\n  P.cs += dt * P.spd * 1.2 * 1.414 * 1.7;\n  P.t += dt;\n  if (n || P.glowDirty) glow(P);\n  // Cloud cover on a 2-LED lattice.\n  const th = 0.8 - 0.78 * P.haze;\n  const veil = 0.25 * P.haze * P.haze;\n  const thick = 0.45 + 0.4 * P.haze;\n  for (let gy = 0; gy \u003c 65; gy++)\n    for (let gx = 0; gx \u003c 33; gx++) {\n      const x = gx * 2;\n      const y = gy * 2;\n      const a = (y - x) * R2 - P.cs;\n      const bb = (x + y) * R2;\n      const nz = 0.65 * vn(a / 30 + 40, bb / 16 + 5.3 + P.t * 0.02) + 0.35 * vn(a / 11 + 70, bb / 7 + 11 - P.t * 0.03);\n      let dn = cl((nz - th) / 0.28, 0, 1);\n      dn = dn * dn * (3 - 2 * dn);\n      P.CL[gx + gy * 33] = min(0.88, dn * thick + veil);\n    }\n}\n\n// The town's light blurred, for cloud to glow with: two box passes each way.\nfunction glow(P) {\n  P.glowDirty = false;\n  const A = P.GA;\n  const B = P.GB;\n  for (let y = 0; y \u003c H; y++) {\n    const row = md(P.oy + y, H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const slot = ((P.ox + x) & 63) + row;\n      A[x + y * W] = P.KD[slot] ? P.LB[slot] : 0;\n    }\n  }\n  for (let pass = 0; pass \u003c 4; pass++) {\n    const [src, dst] = pass & 1 ? [B, A] : [A, B];\n    const horiz = pass \u003c 2;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = 0; x \u003c W; x++) {\n        let sum = 0;\n        for (let d = -2; d \u003c= 2; d++) {\n          const u = horiz ? cl(x + d, 0, W - 1) : x;\n          const v = horiz ? y : cl(y + d, 0, H - 1);\n          sum += src[u + v * W];\n        }\n        dst[x + y * W] = sum / 5;\n      }\n  }\n}\n\nconst SOD = [255, 132, 26];\nconst LEDW = [[255, 214, 168], [226, 236, 255]];\nconst MERC = [150, 255, 196];\nconst HOUSEC = [255, 176, 92];\nconst FLOODC = [214, 230, 255];\nconst HEAD = [255, 250, 232];\nconst TAIL = [255, 30, 20];\nconst C = [0, 0, 0];\nconst NB = [0.5, 0.62, 1];\nconst NIGHT = 0.7;\n\n// A lamp's colour into C, from its kind, its dice and the Lamps knob.\nfunction lampColour(kind, h, k1) {\n  const h2 = (h * 7.31) % 1;\n  const h3c = (h * 13.7) % 1;\n  if (kind === STREET || kind === BLVD || kind === HWY || kind === PATH) {\n    const base = kind === BLVD ? 0.3 : kind === PATH ? 0.6 : 0.06;\n    if (h \u003c base + k1 * (1 - base)) {\n      for (let c = 0; c \u003c 3; c++) C[c] = LEDW[0][c] + (LEDW[1][c] - LEDW[0][c]) * h3c;\n    } else if (h2 > 0.94 && kind === STREET) {\n      for (let c = 0; c \u003c 3; c++) C[c] = MERC[c];\n    } else {\n      C[0] = SOD[0];\n      C[1] = SOD[1] + 24 * h3c;\n      C[2] = SOD[2] + 14 * h3c;\n    }\n  } else if (kind === WHITE) {\n    for (let c = 0; c \u003c 3; c++) C[c] = LEDW[0][c] + (LEDW[1][c] - LEDW[0][c]) * h2;\n  } else if (kind === HOUSE) {\n    for (let c = 0; c \u003c 3; c++) C[c] = HOUSEC[c];\n  } else {\n    for (let c = 0; c \u003c 3; c++) C[c] = FLOODC[c];\n  }\n  // Every lamp burns at full strength in its brightest channel.\n  const m = 255 / max(C[0], C[1], C[2]);\n  for (let c = 0; c \u003c 3; c++) C[c] *= m;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.built) return;\n  const t = P.t;\n  const k1 = P.k1;\n  const haze = [1 - 0.18 * k1, 0.64 + 0.24 * k1, 0.36 + 0.64 * k1];\n  const cloudT = [1 - 0.12 * k1, 0.8 + 0.12 * k1, 0.64 + 0.36 * k1];\n  const water = [0.32, 0.5, 1];\n  const wingT = [0.78, 0.84, 1];\n  // Strobe: a double flash every 1.25 s.\n  const ph = t % 1.25;\n  const flash = ph \u003c 0.05 || (ph > 0.15 && ph \u003c 0.2) ? 1 : 0;\n  // Cars: lane A runs with the ground, lane B against it, in cells along the lane.\n  const vA = 0.9 * t;\n  const vB = -0.9 * t;\n  for (let y = 0; y \u003c H; y++) {\n    const wy = P.oy + y;\n    const row = md(wy, H) * W;\n    const gy = y >> 1;\n    const fy = (y & 1) * 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const wx = P.ox + x;\n      const slot = (wx & 63) + row;\n      const plus = ((x + y + P.p0) & 1) === 0;\n      const gx = x >> 1;\n      const fx = (x & 1) * 0.5;\n      const ci = gx + gy * 33;\n      const c0 = P.CL[ci] + (P.CL[ci + 1] - P.CL[ci]) * fx;\n      const c1 = P.CL[ci + 33] + (P.CL[ci + 34] - P.CL[ci + 33]) * fx;\n      const al = c0 + (c1 - c0) * fy;\n      const wg = P.wing[x + y * W];\n      let M;\n      let tr;\n      let tg;\n      let tb;\n      if (wg > 0) {\n        const nd = (x - P.nav[0]) ** 2 + (y - P.nav[1]) ** 2;\n        const sd = (x - P.strobe[0]) ** 2 + (y - P.strobe[1]) ** 2;\n        M = wg + 80 * flash * exp(-sd / 60);\n        const gl = 0.5 * exp(-nd / 10);\n        tr = wingT[0] * (1 - gl);\n        tg = wingT[1];\n        tb = wingT[2] * (1 - gl * 0.6);\n        let v = max(0, M + (plus ? 10 : -10));\n        let r = tr * v;\n        let g = tg * v;\n        let b = tb * v;\n        if (x === P.nav[0] && y === P.nav[1]) [r, g, b] = [40, 255, 90];\n        else if (x === P.strobe[0] && y === P.strobe[1]) {\n          if (flash) [r, g, b] = [255, 255, 255];\n          else [r, g, b] = [70, 74, 86];\n        }\n        display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n        continue;\n      }\n      const wt = P.WT[slot];\n      M = P.MS[slot];\n      // Ground, water and cloud tints mix, and the brightest channel is put\n      // back to 1 so the mix never dims a step.\n      tr = haze[0] + (water[0] - haze[0]) * wt;\n      tg = haze[1] + (water[1] - haze[1]) * wt;\n      tb = haze[2] + (water[2] - haze[2]) * wt;\n      tr += (cloudT[0] - tr) * al;\n      tg += (cloudT[1] - tg) * al;\n      tb += (cloudT[2] - tb) * al;\n      // The cells between the carpet's dots fall toward blue-black.\n      if (!plus) {\n        const nb = NIGHT * (1 - al);\n        tr += (NB[0] - tr) * nb;\n        tg += (NB[1] - tg) * nb;\n        tb += (NB[2] - tb) * nb;\n      }\n      // Cloud lit from below by the town.\n      const Lc = 0.55 * M + 14 + 210 * P.GA[x + y * W] + 24 * al;\n      const G = M + (Lc - M) * al;\n      const v = max(0, G + (plus ? AMP : -AMP)) / max(tr, tg, tb);\n      let r = v * tr;\n      let g = v * tg;\n      let b = v * tb;\n      if (plus) {\n        let kind = P.KD[slot];\n        let lb = P.LB[slot];\n        let col = null;\n        const dp = x + y + P.p0 - P.ph;\n        if (dp === 0 || dp === 4) {\n          // Carriageways: m counts cells along the lane.\n          const m = (x - y + P.ox - P.oy) >> 1;\n          const lane = dp === 0 ? 0 : 1;\n          const slotK = floor(m + (lane ? vB : vA) + 0.5);\n          if (h3(slotK, lane, P.seed + 21) \u003c 0.45) {\n            col = lane ? TAIL : HEAD;\n            lb = 1;\n          }\n        }\n        if (col || kind) {\n          if (!col) {\n            lampColour(kind, P.LH[slot], k1);\n            col = C;\n          }\n          const h = P.LH[slot];\n          const tw = lb * (0.97 + 0.03 * sin(t * (2.5 + 4 * h) + h * 40));\n          const keep = 1 - 0.85 * al;\n          r = col[0] * tw * keep + r * (1 - keep);\n          g = col[1] * tw * keep + g * (1 - keep);\n          b = col[2] * tw * keep + b * (1 - keep);\n        }\n      }\n      display.setPixel(x, y, min(255, r), min(255, g), min(255, b));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamps=0..1, Speed=0.2..3, Grid=0..1, Haze=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamps","min":0,"max":1,"about":"The street lights: an old sodium city at 0, orange with the odd green mercury lamp; turned up, the lamps are swapped for white LEDs one by one until the whole town is white at 1."},{"name":"Speed","min":0.2,"max":3,"about":"Ground speed: at 2 the city slides about 3.4 LEDs a second toward the lower left, at 0.2 it barely creeps; the cars on the highway keep their own pace on top of it."},{"name":"Grid","min":0,"max":1,"about":"Street spacing inside the boulevards: blocks eight or nine LEDs apart at 0, twelve or thirteen at 1, with more house lights inside the wider ones."},{"name":"Haze","min":0,"max":1,"about":"Cloud under the plane: a clear night with the odd wisp at the low end, a broken layer lit from below by the town in the middle, and at 1 an overcast the city only glows through."}],"start":[0,2,0,0.06],"measures":{"motion":0.3475,"detail":0.3276,"edges":0.2578,"complexity":1.0097,"coverage":0.5044,"colour":0.2424,"drift":0.0667},"knobResponse":[0.0508,0.1119,0.0511,0.1477]},{"slug":"nixie","title":"Nixie","family":"circuit","round":21,"note":"회로판 소켓에 선 닉시관 속, 육각 그물 뒤에 겹겹이 선 숫자 철사 가운데 하나가 네온 주황으로 빛나요. 숫자가 돌다가 하나씩 멈추고, Mode 노브를 돌리면 주파수 계수기나 시계가 돼요.","idea":"Nixie tubes stand in their sockets on a circuit board, and in each a stack of wire numerals waits behind a fine hexagonal mesh while one of them glows neon orange: spinning through the stack and settling, counting, keeping time or counting down.","buttons":"K1 tap runs every cathode in turn now.","code":"// ===== Patternflow pattern =====\n// Title:   Nixie\n// Family:  circuit\n// Idea:    Nixie tubes stand in their sockets on a circuit board, and in each a stack of wire numerals waits behind a fine hexagonal mesh while one of them glows neon orange: spinning through the stack and settling, counting, keeping time or counting down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the cold-cathode numeral tubes of the 1950s to 1980s (the Burroughs Nixie, the Soviet IN-14 and IN-18)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Gas=0..1, Speed=0.2..3, Rows=1..3, Mode=0..3\n//\n// Knob 1: Gas. What glows: neon orange at 0, a pink neon-argon mix at a third, the blue-violet of argon and mercury at two thirds, and at 1 a tube behind green-filtered glass.\n// Knob 2: Speed. How fast the display runs: at 2 a spinning tube runs through 16 numerals a second before it slows and stops.\n// Knob 3: Rows. One big tube at 1, two rows of two at 2, three rows of two at 3, each row on its own board. With more than one, one tube is a newer replacement, brighter, with a clean silver getter.\n// Knob 4: Mode. Scramble at 0 (every tube spins and stops on a random number, one after another), a frequency counter at 1, a clock at 2 (one big tube spells the time a numeral at a time), a countdown that ends in the anti-poisoning run through every cathode at 3.\n// Buttons: K1 tap runs every cathode in turn now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Numerals as strokes in a box one wide and one tall, y down: lines and\n// elliptical arcs in degrees, 90 pointing down. The 3 has a flat top and the\n// 5 is the 2 turned over, as in the IN-14.\nconst FONT = [\n  [[\"l\", 0, 0.3, 0, 0.7], [\"l\", 1, 0.3, 1, 0.7], [\"a\", 0.5, 0.3, 0.5, 0.3, 180, 360], [\"a\", 0.5, 0.7, 0.5, 0.3, 0, 180]],\n  [[\"l\", 0.56, 0, 0.56, 1], [\"l\", 0.56, 0, 0.26, 0.16]],\n  [[\"a\", 0.5, 0.27, 0.5, 0.27, 195, 400], [\"l\", 0.883, 0.444, 0, 1], [\"l\", 0, 1, 1, 1]],\n  [[\"l\", 0.04, 0, 0.96, 0], [\"l\", 0.96, 0, 0.4, 0.39], [\"a\", 0.5, 0.68, 0.5, 0.3, 255, 510]],\n  [[\"l\", 0.76, 1, 0.76, 0], [\"l\", 0.76, 0, 0, 0.68], [\"l\", 0, 0.68, 1, 0.68]],\n  [[\"l\", 1, 0, 0, 0], [\"l\", 0, 0, 0.883, 0.556], [\"a\", 0.5, 0.73, 0.5, 0.27, -40, 165]],\n  [[\"a\", 0.5, 0.7, 0.5, 0.3, 0, 360], [\"a\", 0.95, 0.7, 0.95, 0.68, 180, 252]],\n  [[\"l\", 0, 0, 1, 0], [\"l\", 1, 0, 0.32, 1]],\n  [[\"a\", 0.5, 0.24, 0.42, 0.24, 0, 360], [\"a\", 0.5, 0.73, 0.5, 0.27, 0, 360]],\n  [[\"a\", 0.5, 0.3, 0.5, 0.3, 0, 360], [\"a\", 0.05, 0.3, 0.95, 0.68, 0, 72]],\n];\n// The cathodes front to back. A numeral further back sits a little smaller,\n// and the wires in front of it cross its glow.\nconst STACK = [1, 6, 2, 7, 5, 0, 4, 9, 8, 3];\nconst DEPTH = [];\nSTACK.forEach((d, i) => (DEPTH[d] = i));\n// Glass width, glass top and height, pins, socket, numeral box, where the\n// numeral sits down the glass, mesh cell, and a scale for wires and glow.\nconst LAY = [\n  { gw: 54, top: 4, gh: 109, pin: 4, sock: 4, dw: 36, dh: 72, dc: 0.5, hex: 2.4, s: 1 },\n  { gw: 26, top: 3, gh: 50, pin: 3, sock: 2, dw: 17, dh: 34, dc: 0.5, hex: 1.6, s: 0.5 },\n  { gw: 24, top: 2, gh: 32, pin: 2, sock: 2, dw: 14, dh: 23, dc: 0.5, hex: 1.4, s: 0.38 },\n];\n// Each gas: dim edge of the glow, the glow, the hot core.\nconst GAS = [\n  [[120, 22, 2], [255, 96, 18], [255, 214, 150]],\n  [[110, 8, 54], [255, 58, 140], [255, 204, 232]],\n  [[40, 26, 150], [92, 120, 255], [204, 236, 255]],\n  [[18, 92, 10], [104, 240, 40], [214, 255, 170]],\n];\n\nfunction strokes(dg, bx, by, w, h) {\n  const out = [];\n  for (const [k, a, b, c, d, e, f] of FONT[dg]) {\n    if (k === \"l\") {\n      out.push(bx + a * w, by + b * h, bx + c * w, by + d * h);\n      continue;\n    }\n    const n = max(4, ceil((abs(f - e) / 180) * (c * w + d * h) * 0.9));\n    for (let i = 0, px = 0, py = 0; i \u003c= n; i++) {\n      const th = ((e + ((f - e) * i) / n) * PI) / 180, x = bx + (a + c * cos(th)) * w, y = by + (b + d * sin(th)) * h;\n      if (i) out.push(px, py, x, y);\n      [px, py] = [x, y];\n    }\n  }\n  return out;\n}\nfunction segDist(x, y, S) {\n  let best = 1e9;\n  for (let i = 0; i \u003c S.length; i += 4) {\n    const ax = S[i], ay = S[i + 1], dx = S[i + 2] - ax, dy = S[i + 3] - ay, l = dx * dx + dy * dy;\n    const u = l ? cl(((x - ax) * dx + (y - ay) * dy) / l, 0, 1) : 0, ex = x - ax - u * dx, ey = y - ay - u * dy, d = ex * ex + ey * ey;\n    if (d \u003c best) best = d;\n  }\n  return sqrt(best);\n}\n// How much a wire of the hexagonal anode mesh (cells of size a) covers a point.\nfunction hexLine(x, y, a) {\n  const q = (x * 0.57735 - y / 3) / a, r = (y * 2) / 3 / a;\n  let rx = round(q), rz = round(r);\n  const ry = round(-q - r), dx = abs(rx - q), dz = abs(rz - r), dy = abs(ry + q + r);\n  if (dx > dy && dx > dz) rx = -ry - rz;\n  else if (dy \u003c= dz) rz = -rx - ry;\n  const ux = abs(x - a * 1.732 * (rx + rz / 2)), uy = abs(y - a * 1.5 * rz);\n  return cl(1 - (a * 0.866 - max(ux, 0.5 * ux + 0.866 * uy)) / 0.6, 0, 1);\n}\n\nfunction build(P, R) {\n  const L = LAY[R - 1], s = L.s, cols = R > 1 ? 2 : 1, cw = W / cols;\n  const A = (P.amb = new Float32Array(N * 3)), RF = (P.refl = new Float32Array(N)), TR = (P.tr = new Float32Array(N).fill(1));\n  const PL = (P.pool = new Float32Array(N)), TI = (P.tid = new Uint8Array(N)), PZ = (P.pz = new Uint8Array(N)), GL = (P.gl = new Uint8Array(N));\n  const D = (P.D = Array.from({ length: 11 }, () => new Uint8Array(N).fill(255)));\n  const OC = (P.OC = Array.from({ length: 10 }, () => new Uint8Array(N)));\n  const put = (x, y, r, g, b, f) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    A.set([r, g, b], p * 3);\n    RF[p] = f;\n  };\n  const line = (x0, y0, x1, y1, c, f) => {\n    for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0), 1); i \u003c= n; i++) put(round(mix(x0, x1, i / n)), round(mix(y0, y1, i / n)), ...c, f);\n  };\n  // Glow and the light it throws, by distance to the lit wire in eighths.\n  const CO = (P.CO = new Float32Array(256)), SP = (P.SP = new Float32Array(256)), WR = new Float32Array(256);\n  for (let q = 0; q \u003c 256; q++) {\n    const d = q / 8;\n    CO[q] = 1.35 * exp(-((d / (0.55 + 0.35 * s)) ** 2)) + 0.5 * exp(-((d / (1.2 + 0.8 * s)) ** 2)) + 0.22 * exp(-d / (2.5 + 2.5 * s));\n    SP[q] = 0.8 * exp(-d / (1.5 + 3 * s)) + 0.3 * exp(-d / (4 + 12 * s));\n    WR[q] = cl(1.3 - d / (0.45 + 0.35 * s), 0, 1);\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const g = 0.7 + 0.6 * hash(p & 63, p >> 6);\n    put(p & 63, p >> 6, 5 * g, 5 * g, 7 * g, 0.12);\n  }\n  const n = (P.n = R * cols), T = (P.T = []);\n  P.newT = n > 1 ? floor(rnd() * n) : -1;\n  P.oldT = n > 1 ? (P.newT + 1 + floor(rnd() * (n - 1))) % n : 0;\n  P.pois = [0, 9, 3, 8][floor(rnd() * 4)];\n  P.lamps = [];\n  for (let r = 0, i = 0; r \u003c R; r++)\n    for (let c = 0; c \u003c cols; c++, i++) {\n      const y0 = round((r * H) / R), y1 = round(((r + 1) * H) / R), x0 = c * cw, cx = x0 + cw / 2;\n      const top = y0 + L.top, bot = top + L.gh, hw = L.gw / 2, dmh = round(L.gw * 0.3), rb = max(2, round(L.gw * 0.12));\n      const dcy = top + L.gh * L.dc, bx = cx - L.dw / 2, by = dcy - L.dh / 2, m = 1 + 3 * s;\n      const c0 = floor(bx - m), c1 = ceil(bx + L.dw + m + 2 * s), r0 = floor(by - m), r1 = ceil(by + L.dh + m);\n      const nw = i === P.newT ? 1.35 : 1;\n      const half = (y) => {\n        const v = y + 0.5;\n        if (v \u003c top || v > bot) return -1;\n        if (v \u003c top + dmh) return hw * sqrt(max(0, 1 - ((top + dmh - v) / dmh) ** 2));\n        if (v > bot - rb) return hw - rb + sqrt(max(0, rb * rb - (v - bot + rb) ** 2));\n        return hw;\n      };\n      // Each numeral's wire, by distance, in this tube's cell.\n      const S = [];\n      for (let j = 0; j \u003c 10; j++) {\n        const sc = 1 - 0.008 * DEPTH[j];\n        S.push(strokes(j, cx - (L.dw * sc) / 2, dcy - (L.dh * sc) / 2, L.dw * sc, L.dh * sc));\n      }\n      S.push([bx + L.dw * 1.17, by + L.dh * 0.98, bx + L.dw * 1.17, by + L.dh * 0.98]);\n      // In the old tube a numeral the clock seldom shows is poisoned: a patch\n      // of its wire has stopped glowing.\n      const pzx = S[P.pois][0] * 0.5 + S[P.pois][2] * 0.5, pzy = S[P.pois][1] * 0.5 + S[P.pois][3] * 0.5;\n      for (let y = y0; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const p = y * W + x, X = x + 0.5, Y = y + 0.5;\n          TI[p] = i;\n          if (hypot(max(0, bx - X, X - bx - L.dw), max(0, by - Y, Y - by - L.dh)) > 33) continue;\n          for (let j = 0; j \u003c 11; j++) D[j][p] = min(255, round(max(0, segDist(X, Y, S[j]) - (j > 9 ? 0.4 + 0.5 * s : 0)) * 8));\n          if (i === P.oldT) PZ[p] = round(255 * exp(-((hypot(X - pzx, Y - pzy) / (1.4 + 2 * s)) ** 2)));\n        }\n      // Glass, getter, mica, rods, the anode mesh and the cathodes behind it.\n      for (let y = y0; y \u003c y1; y++) {\n        const hy = half(y), hu = half(y - 1), hd = half(y + 1);\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const p = y * W + x, ax = abs(x + 0.5 - cx), e = hy - ax, g = hash(x, y + 300), left = x + 0.5 \u003c cx;\n          if (e \u003c= 0) continue;\n          let col = [4 + 2 * g, 5 + 2 * g, 7 + 2 * g], f = 0.09;\n          if (e \u003c 1.2 || hu - ax \u003c= 0 || hd - ax \u003c= 0) [col, f] = [[24 * nw, 28 * nw, 34 * nw], 0.5];\n          else if (y \u003c top + dmh * 0.8) {\n            // The getter's mirror on the dome: bright and clean in a new tube,\n            // dull brown in an old one.\n            const a = cl(1.15 - (y - top) / (dmh * 0.72) + 0.3 * (g - 0.5), 0, 1), v = nw > 1 ? 40 + 56 * a : 24 + 26 * a;\n            col = (nw > 1 ? [v, v, v * 1.06] : [v * 0.95, v * 0.86, v * 0.72]).map((c, ch) => mix(col[ch], c, a));\n            f = mix(0.09, 0.5, a);\n          } else if (x >= c0 && x \u003c= c1 && y >= r0 && y \u003c= r1) {\n            // Inside the anode: the back plate, the unlit wires, the mesh in front.\n            let w = 0;\n            for (let j = 0; j \u003c 10; j++) w = max(w, WR[D[j][p]] * (1 - 0.05 * DEPTH[j]));\n            const mh = x === c0 || x === c1 ? 1 : hexLine(x + 0.5 - cx, y + 0.5 - dcy, L.hex);\n            col = [mix(6, 25, w) + 6 * mh, mix(6, 25, w) + 6 * mh, mix(7, 29, w) + 7 * mh];\n            f = mix(0.15, 0.34, w) + 0.25 * mh;\n            TR[p] = 1 - 0.42 * mh;\n            for (let k = 0, run = 0; k \u003c 10; k++) {\n              OC[STACK[k]][p] = run;\n              run = max(run, round(WR[D[STACK[k]][p]] * 255));\n            }\n          } else if ((y === r0 - 1 || y === r0 - 2 + (s \u003c 0.6) || y === r1 + 1 || y === r1 + 2 - (s \u003c 0.6)) && e > 1.5) [col, f] = [[(34 + 18 * g) * nw, (34 + 18 * g) * nw, (32 + 16 * g) * nw], 0.62];\n          else if ((x === c0 - 2 || x === c1 + 2) && y > r0 - 3 && y \u003c r1 + 4 * s + 2) [col, f] = [[26, 26, 28], 0.55];\n          // The window behind the camera, on the left of the glass.\n          const u = (y - top) / L.gh, hl = left && e >= 1.2 && e \u003c 3.2 ? (e \u003c 2.2 ? 1 : 0.35) * max(cl(1 - abs(u - 0.5) / 0.3, 0, 1) ** 0.4, cl(1 - abs(u - 0.14) / 0.05, 0, 1)) : 0;\n          if (hl > 0) col = col.map((v, ch) => v + hl * (104 + 12 * ch) * nw);\n          GL[p] = 1;\n          if (!left && e >= 2 && e \u003c 3 && y > top + dmh && y \u003c bot - rb * 2) col = col.map((v, ch) => v + (16 + 4 * ch) * nw);\n          put(x, y, ...col, f);\n        }\n      }\n      // A bright curve on the dome, and the exhaust tip.\n      for (let a = 196; a \u003c 252; a += 1.5) {\n        const v = (60 + 80 * sin(((a - 196) * PI) / 56)) * nw;\n        put(round(cx + (hw - 2.5) * cos((a * PI) / 180) - 0.5), round(top + dmh + (dmh - 2) * sin((a * PI) / 180) - 0.5), v, v * 1.05, v * 1.15, 0.3);\n      }\n      for (let y = top - 1 - round(2 * s); y \u003c top; y++) put(floor(cx) - 1, y, 36, 40, 46, 0.2), put(floor(cx), y, 50, 54, 60, 0.2);\n      // Leads from the bottom mica to the glass press, pins to the socket.\n      const sh = round(2 + 4 * s), np = R === 1 ? 13 : 7, ph = hw * 0.55;\n      for (let k = 0; k \u003c np; k++) {\n        const u = k / (np - 1), xa = round(mix(c0 + 2, c1 - 2, u)), xp = round(cx - ph + 2 * ph * u);\n        line(xa, r1 + 3, xp, bot - sh, [30, 30, 33], 0.6);\n        for (let y = bot; y \u003c bot + L.pin; y++) put(xp, y, 62 + 20 * (y === bot), 64 + 20 * (y === bot), 68 + 20 * (y === bot), 0.5);\n        put(xp, bot + L.pin, 120, 92, 40, 0.4);\n      }\n      for (let y = bot - sh; y \u003c bot; y++) {\n        const hwp = mix(hw * 0.32, hw * 0.48, (y - bot + sh) / sh);\n        for (let x = ceil(cx - hwp); x \u003c cx + hwp; x++) if (half(y) - abs(x + 0.5 - cx) > 1.2) put(x, y, 20 + 14 * (y === bot - sh), 22 + 14 * (y === bot - sh), 25 + 15 * (y === bot - sh), 0.35);\n      }\n      const sy = bot + L.pin, by0 = sy + L.sock;\n      for (let y = sy; y \u003c by0; y++) for (let x = ceil(cx - hw * 0.75); x \u003c cx + hw * 0.75; x++) if (y > sy || !RF[y * W + x] || A[(y * W + x) * 3] \u003c 100) put(x, y, y === sy ? 30 : 13, y === sy ? 30 : 13, y === sy ? 34 : 15, 0.25);\n      for (let k = 0; k \u003c np; k++) put(round(cx - ph + (2 * ph * k) / (np - 1)), sy, 120, 92, 40, 0.4);\n      // The board: green mask, copper under it, gold pads.\n      for (let y = by0; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const g = hash(x + 50, y), edge = y === by0;\n          put(x, y, edge ? 38 : 10 + 4 * g, edge ? 46 : 26 + 6 * g, edge ? 42 : 16 + 4 * g, 0.6);\n        }\n      for (let k = 0; k \u003c np; k += 2) {\n        const xp = round(cx - ph + (2 * ph * k) / (np - 1)), yv = by0 + 2 + (k & 2 ? 1 : 0);\n        line(xp, by0 + 1, xp, y1, [20, 54, 32], 0.6);\n        put(xp, yv, 120, 96, 44, 0.5);\n      }\n      for (let y = top - 4; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const v = exp(-(((x + 0.5 - cx) / (hw * 0.8)) ** 2)) * exp(-max(0, y - bot + 6) / (6 + 10 * s));\n          if (y >= bot - 8) PL[y * W + x] = 0.45 * v;\n        }\n      T.push({ cx, bot, by0, y1, hw });\n      if (R === 1) P.lamps.push([60, 107, 4, 10]);\n      else if (c === 1) P.lamps.push([30, bot - round(9 * s), 4, round(11 * s)]);\n    }\n  if (R === 1) {\n    // An anode resistor and the high-voltage capacitor lie on the big board.\n    for (let x = 1; x \u003c 14; x++) put(x, 124, 70, 72, 76, 0.4);\n    for (let x = 3; x \u003c 12; x++) for (let y = 123; y \u003c 126; y++) put(x, y, ...[[110, 96, 70], [90, 50, 22], [20, 18, 16], [150, 36, 24]][x === 5 ? 1 : x === 7 ? 2 : x === 9 ? 3 : 0].map((v) => v * (y === 123 ? 1.2 : y === 125 ? 0.7 : 1)), 0.4);\n    for (let x = 50; x \u003c 62; x++) for (let y = 122; y \u003c 127; y++) put(x, y, ...(x > 59 ? [78, 80, 86] : x === 52 ? [90, 110, 150] : [26, 44, 110]).map((v) => v * (y === 122 ? 1.3 : y === 126 ? 0.6 : 1)), 0.4);\n  }\n  // The neon indicator lamps: a glass capsule with two electrodes.\n  for (const [lx, ly, lw, lh] of P.lamps) {\n    for (let y = ly; y \u003c ly + lh; y++)\n      for (let x = lx; x \u003c lx + lw; x++) {\n        const rim = x === lx || x === lx + lw - 1 || y === ly;\n        put(x, y, rim ? 30 : 8, rim ? 34 : 9, rim ? 40 : 11, 0.3);\n      }\n    for (let y = ly + 2; y \u003c ly + lh + 3; y++) put(lx + 1, y, 44, 44, 46, 0.4), put(lx + lw - 2, y, 44, 44, 46, 0.4);\n  }\n  P.amb0 = A.slice();\n  for (const k of [\"tg\", \"dsp\", \"pk\", \"fa\", \"fl\", \"dp\", \"s0\", \"s1\", \"b\", \"sp\"]) P[k] = new Array(n).fill(k === \"dsp\" || k === \"pk\" ? -1 : 0);\n}\n\n// The gas: a glow colour for every brightness, and the light it throws.\nfunction ramp(P, gas) {\n  const f = gas * 3, i = min(2, floor(f)), t = f - i;\n  const [h, b, c] = GAS[i].map((col, k) => col.map((v, ch) => mix(v, GAS[i + 1][k][ch], t)));\n  const RA = (P.RA = new Float32Array(768)), st = [0, 0.12, 0.35, 0.8, 1.5, 2.55];\n  const cs = [[0, 0, 0], h.map((v) => v * 0.35), h, b, b.map((v, ch) => mix(v, c[ch], 0.6)), c];\n  for (let j = 0, k = 0; j \u003c 256; j++) {\n    const e = j / 100;\n    while (k \u003c 4 && e > st[k + 1]) k++;\n    const u = (e - st[k]) / (st[k + 1] - st[k]);\n    for (let ch = 0; ch \u003c 3; ch++) RA[j * 3 + ch] = mix(cs[k][ch], cs[k + 1][ch], cl(u, 0, 1));\n  }\n  const lum = (b[0] + b[1] + b[2]) / 3;\n  P.spill = b.map((v) => mix(v, lum, 0.35));\n  // A green-filtered tube is green glass.\n  const gf = cl(gas * 3 - 2, 0, 1), tint = [1 - 0.3 * gf, 1 + 0.5 * gf, 1 - 0.2 * gf];\n  if (P.amb0) for (let p = 0; p \u003c N * 3; p++) P.amb[p] = P.amb0[p] * (P.gl[(p / 3) | 0] ? tint[p % 3] : 1);\n}\n\n// A spin: the tube runs up through the numerals, slowing from 16 to 3 a\n// second, and stops on its target.\nfunction roll(P, i, wait, len) {\n  P.s0[i] = P.t + wait;\n  P.s1[i] = P.t + wait + len;\n}\nfunction spinDigit(P, i) {\n  const T = P.s1[i] - P.s0[i], u = (P.t - P.s0[i]) / T, ph = T * (16 * u - 6.5 * u * u), all = T * 9.5;\n  return (((P.tg[i] + floor(ph) - floor(all)) % 10) + 10) % 10;\n}\nfunction digits(P, v) {\n  for (let i = P.n - 1; i >= 0; i--, v = floor(v / 10)) P.tg[i] = v % 10;\n}\n\nfunction start(P) {\n  Object.assign(P, { next: P.t, gate: P.t, retune: P.t + 4, base: 140000 + rnd() * 800000, key: -1, v: 0, step: P.t, cyc: -9, blank: 0 });\n  P.c0 = P.n === 6 ? 23 * 3600 + 59 * 60 + 53 : P.n === 4 ? 23 * 3600 + 57 * 60 : 9 * 3600 + 58 * 60;\n  P.s1.fill(0);\n}\n\nconst MODES = [\n  // Scramble: the tubes spin, stop one after another, and the number holds.\n  (P) => {\n    if (P.t \u003c P.next) return;\n    const n = P.n;\n    for (let i = 0; i \u003c n; i++) {\n      P.tg[i] = floor(rnd() * 10);\n      roll(P, i, 0.07 * i, n > 1 ? 0.8 + 0.3 * i : 1.5);\n    }\n    P.next = P.t + (n > 1 ? 0.9 + 0.37 * n : 1.5) + 2.6;\n    P.lamp = 0;\n  },\n  // A frequency counter reading an oscillator that drifts as it warms up.\n  (P) => {\n    if (P.t \u003c P.gate) return;\n    P.gate += P.n > 1 ? 0.12 : 0.4;\n    if (P.t > P.retune) [P.base, P.retune, P.blank] = [10000 + rnd() * 980000, P.t + 5 + rnd() * 3, 0.25];\n    digits(P, floor(P.base + 37 * P.t + 4 * sin(P.t * 2.1) + rnd() * 3));\n    P.dp.fill(0);\n    if (P.n > 3) P.dp[P.n - 4] = 1;\n    P.lamp = 1;\n  },\n  // A clock: a big tube spells the time a numeral at a time.\n  (P) => {\n    const n = P.n, C = P.c0 + P.t * (n === 6 ? 2 : n === 4 ? 60 : 10), s = floor(C) % 86400;\n    const hh = floor(s / 3600), mm = floor(s / 60) % 60, ss = s % 60, all = [floor(hh / 10), hh % 10, floor(mm / 10), mm % 10, floor(ss / 10), ss % 10];\n    if (n === 1) {\n      const ph = P.t % 3.6, j = floor(ph / 0.7);\n      P.tg[0] = j \u003c 4 && ph % 0.7 \u003c 0.56 ? all[j] : -1;\n      P.dp[0] = j === 1 ? 1 : 0;\n      P.lamp = j \u003c 4 ? 1 : 0;\n      return;\n    }\n    // A new minute (or hour) runs the slot machine, which also keeps the\n    // cathodes from poisoning.\n    const key = n === 6 ? floor(s / 60) : hh;\n    if (P.key >= 0 && key !== P.key) for (let i = 0; i \u003c n; i++) roll(P, i, 0.05 * i, 0.7 + 0.12 * i);\n    P.key = key;\n    for (let i = 0; i \u003c n; i++) P.tg[i] = all[i];\n    P.lamp = (n === 6 ? C : P.t) % 1 \u003c 0.5 ? 1 : 0;\n  },\n  // A countdown; at zero every cathode runs in turn, then it starts again.\n  (P) => {\n    if (P.t \u003c P.step) return;\n    if (P.v > 0) {\n      digits(P, --P.v);\n      P.step += 0.4;\n      P.lamp = 1;\n    } else if (P.cyc \u003c P.step - 3) {\n      P.cyc = P.t + 0.6;\n      P.step = P.t + 2.6;\n    } else {\n      P.v = P.n === 1 ? 10 : 17;\n      P.step = P.t;\n    }\n  },\n];\n\nexport function setup(params) {\n  Object.assign(params, { t: 0, rt: 0, R: 0, gas: -1, mode: -1, lamp: 0, lv: 0, buf: new Float32Array(N * 3) });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt, 0, 0.1);\n  const rate = cl(k[1], 0.2, 3) / 2, R = cl(round(k[2]), 1, 3), mode = cl(round(k[3]), 0, 3), gas = cl(k[0], 0, 1);\n  if (R !== P.R) [P.R, P.mode, P.gas] = [R, -1, -1, build(P, R)];\n  if (abs(gas - P.gas) > 0.002) ramp(P, (P.gas = gas));\n  if (mode !== P.mode) start(P, (P.mode = mode));\n  P.t += dt * rate;\n  P.rt += dt;\n  if (input.btnPressed && input.btnPressed[0]) P.cyc = P.t;\n  P.lamp *= P.mode & 1 ? 0.6 : 1;\n  MODES[mode](P);\n  P.blank = max(0, P.blank - dt);\n  const cyc = P.t >= P.cyc && P.t \u003c P.cyc + 1.9;\n  for (let i = 0; i \u003c P.n; i++) {\n    let d = P.blank > 0 ? -1 : P.tg[i];\n    if (cyc) d = STACK[9 - ((floor((P.t - P.cyc) * 12) + i) % 10)];\n    else if (P.s1[i] && P.t >= P.s0[i] && P.t \u003c P.s1[i]) d = spinDigit(P, i);\n    else if (P.s1[i] && P.t >= P.s1[i]) [P.s1[i], P.fl[i]] = [0, 1];\n    if (d !== P.dsp[i]) [P.pk[i], P.fa[i], P.dsp[i]] = [P.dsp[i], 1, d];\n    P.fa[i] = max(0, P.fa[i] - dt * 14);\n    P.fl[i] = max(0, P.fl[i] - dt * 2.8);\n    // Neon flickers a little, and now and then an old tube sputters.\n    if ((P.sp[i] -= dt) \u003c= 0 && rnd() \u003c dt * 0.15) P.sp[i] = 0.12 + rnd() * 0.15;\n    const z = P.rt * 1.0 + i * 7.1;\n    P.b[i] = (i === P.newT ? 1.25 : 0.92) * (1 + 0.3 * P.fl[i]) * (0.97 + 0.02 * sin(z * 53) + 0.02 * sin(z * 7.3)) * (P.sp[i] > 0 ? 0.6 + 0.4 * (rnd() \u003c 0.5) : 1);\n  }\n  if (P.mode === 0 && P.s1.every((v) => !v)) P.lamp = 1;\n  P.lv += (P.lamp - P.lv) * min(1, dt * 30);\n}\n\nexport function draw(display, params) {\n  const P = params, { amb, refl, tr, pool, tid, D, OC, CO, SP, RA, buf, pz, spill, oldT, pois } = P;\n  const [sr, sg, sb] = spill, B = P.b, K = P.dsp, PK = P.pk, FA = P.fa, DP = P.dp;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const i = tid[p], b = B[i], k = K[i], pk = PK[i], fa = FA[i];\n    let Lt = 0, e = 0;\n    if (k >= 0) {\n      const q = D[k][p];\n      Lt = (SP[q] + pool[p]) * b;\n      e = CO[q] * b * (1 - OC[k][p] * 0.0022) * (i === oldT && k === pois ? 1 - pz[p] * 0.0035 : 1);\n    }\n    if (fa > 0 && pk >= 0) {\n      const q = D[pk][p];\n      Lt += (SP[q] + pool[p]) * b * fa;\n      e += CO[q] * b * fa;\n    }\n    if (DP[i] && k >= 0) {\n      const q = D[10][p];\n      Lt += SP[q] * b * 0.4;\n      e += CO[q] * b;\n    }\n    const j = min(255, (e * tr[p] * 100) | 0) * 3, f = refl[p] * Lt;\n    buf[o] = amb[o] + f * sr + RA[j];\n    buf[o + 1] = amb[o + 1] + f * sg + RA[j + 1];\n    buf[o + 2] = amb[o + 2] + f * sb + RA[j + 2];\n  }\n  // The indicator lamps glow on their left electrode.\n  const lv = P.lv;\n  if (lv > 0.02)\n    for (const [lx, ly, , lh] of P.lamps)\n      for (let y = ly + 1; y \u003c ly + lh + 2; y++)\n        for (let x = lx - 1; x \u003c= lx + 2; x++) {\n          if (x \u003c 0 || x >= W || y >= H) continue;\n          const o = (y * W + x) * 3, c = x === lx + 1 && y > ly + 1 && y \u003c ly + lh ? 1 : 0.3 * (y \u003c ly + lh);\n          buf[o] += 255 * c * lv;\n          buf[o + 1] += 120 * c * lv;\n          buf[o + 2] += 34 * c * lv;\n        }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n    display.setPixel(p & 63, p >> 6, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","layer":{"id":"layer-nixie","type":"code","name":"nixie","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Nixie\n// Family:  circuit\n// Idea:    Nixie tubes stand in their sockets on a circuit board, and in each a stack of wire numerals waits behind a fine hexagonal mesh while one of them glows neon orange: spinning through the stack and settling, counting, keeping time or counting down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the cold-cathode numeral tubes of the 1950s to 1980s (the Burroughs Nixie, the Soviet IN-14 and IN-18)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Gas=0..1, Speed=0.2..3, Rows=1..3, Mode=0..3\n//\n// Knob 1: Gas. What glows: neon orange at 0, a pink neon-argon mix at a third, the blue-violet of argon and mercury at two thirds, and at 1 a tube behind green-filtered glass.\n// Knob 2: Speed. How fast the display runs: at 2 a spinning tube runs through 16 numerals a second before it slows and stops.\n// Knob 3: Rows. One big tube at 1, two rows of two at 2, three rows of two at 3, each row on its own board. With more than one, one tube is a newer replacement, brighter, with a clean silver getter.\n// Knob 4: Mode. Scramble at 0 (every tube spins and stops on a random number, one after another), a frequency counter at 1, a clock at 2 (one big tube spells the time a numeral at a time), a countdown that ends in the anti-poisoning run through every cathode at 3.\n// Buttons: K1 tap runs every cathode in turn now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, hypot, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Numerals as strokes in a box one wide and one tall, y down: lines and\n// elliptical arcs in degrees, 90 pointing down. The 3 has a flat top and the\n// 5 is the 2 turned over, as in the IN-14.\nconst FONT = [\n  [[\"l\", 0, 0.3, 0, 0.7], [\"l\", 1, 0.3, 1, 0.7], [\"a\", 0.5, 0.3, 0.5, 0.3, 180, 360], [\"a\", 0.5, 0.7, 0.5, 0.3, 0, 180]],\n  [[\"l\", 0.56, 0, 0.56, 1], [\"l\", 0.56, 0, 0.26, 0.16]],\n  [[\"a\", 0.5, 0.27, 0.5, 0.27, 195, 400], [\"l\", 0.883, 0.444, 0, 1], [\"l\", 0, 1, 1, 1]],\n  [[\"l\", 0.04, 0, 0.96, 0], [\"l\", 0.96, 0, 0.4, 0.39], [\"a\", 0.5, 0.68, 0.5, 0.3, 255, 510]],\n  [[\"l\", 0.76, 1, 0.76, 0], [\"l\", 0.76, 0, 0, 0.68], [\"l\", 0, 0.68, 1, 0.68]],\n  [[\"l\", 1, 0, 0, 0], [\"l\", 0, 0, 0.883, 0.556], [\"a\", 0.5, 0.73, 0.5, 0.27, -40, 165]],\n  [[\"a\", 0.5, 0.7, 0.5, 0.3, 0, 360], [\"a\", 0.95, 0.7, 0.95, 0.68, 180, 252]],\n  [[\"l\", 0, 0, 1, 0], [\"l\", 1, 0, 0.32, 1]],\n  [[\"a\", 0.5, 0.24, 0.42, 0.24, 0, 360], [\"a\", 0.5, 0.73, 0.5, 0.27, 0, 360]],\n  [[\"a\", 0.5, 0.3, 0.5, 0.3, 0, 360], [\"a\", 0.05, 0.3, 0.95, 0.68, 0, 72]],\n];\n// The cathodes front to back. A numeral further back sits a little smaller,\n// and the wires in front of it cross its glow.\nconst STACK = [1, 6, 2, 7, 5, 0, 4, 9, 8, 3];\nconst DEPTH = [];\nSTACK.forEach((d, i) => (DEPTH[d] = i));\n// Glass width, glass top and height, pins, socket, numeral box, where the\n// numeral sits down the glass, mesh cell, and a scale for wires and glow.\nconst LAY = [\n  { gw: 54, top: 4, gh: 109, pin: 4, sock: 4, dw: 36, dh: 72, dc: 0.5, hex: 2.4, s: 1 },\n  { gw: 26, top: 3, gh: 50, pin: 3, sock: 2, dw: 17, dh: 34, dc: 0.5, hex: 1.6, s: 0.5 },\n  { gw: 24, top: 2, gh: 32, pin: 2, sock: 2, dw: 14, dh: 23, dc: 0.5, hex: 1.4, s: 0.38 },\n];\n// Each gas: dim edge of the glow, the glow, the hot core.\nconst GAS = [\n  [[120, 22, 2], [255, 96, 18], [255, 214, 150]],\n  [[110, 8, 54], [255, 58, 140], [255, 204, 232]],\n  [[40, 26, 150], [92, 120, 255], [204, 236, 255]],\n  [[18, 92, 10], [104, 240, 40], [214, 255, 170]],\n];\n\nfunction strokes(dg, bx, by, w, h) {\n  const out = [];\n  for (const [k, a, b, c, d, e, f] of FONT[dg]) {\n    if (k === \"l\") {\n      out.push(bx + a * w, by + b * h, bx + c * w, by + d * h);\n      continue;\n    }\n    const n = max(4, ceil((abs(f - e) / 180) * (c * w + d * h) * 0.9));\n    for (let i = 0, px = 0, py = 0; i \u003c= n; i++) {\n      const th = ((e + ((f - e) * i) / n) * PI) / 180, x = bx + (a + c * cos(th)) * w, y = by + (b + d * sin(th)) * h;\n      if (i) out.push(px, py, x, y);\n      [px, py] = [x, y];\n    }\n  }\n  return out;\n}\nfunction segDist(x, y, S) {\n  let best = 1e9;\n  for (let i = 0; i \u003c S.length; i += 4) {\n    const ax = S[i], ay = S[i + 1], dx = S[i + 2] - ax, dy = S[i + 3] - ay, l = dx * dx + dy * dy;\n    const u = l ? cl(((x - ax) * dx + (y - ay) * dy) / l, 0, 1) : 0, ex = x - ax - u * dx, ey = y - ay - u * dy, d = ex * ex + ey * ey;\n    if (d \u003c best) best = d;\n  }\n  return sqrt(best);\n}\n// How much a wire of the hexagonal anode mesh (cells of size a) covers a point.\nfunction hexLine(x, y, a) {\n  const q = (x * 0.57735 - y / 3) / a, r = (y * 2) / 3 / a;\n  let rx = round(q), rz = round(r);\n  const ry = round(-q - r), dx = abs(rx - q), dz = abs(rz - r), dy = abs(ry + q + r);\n  if (dx > dy && dx > dz) rx = -ry - rz;\n  else if (dy \u003c= dz) rz = -rx - ry;\n  const ux = abs(x - a * 1.732 * (rx + rz / 2)), uy = abs(y - a * 1.5 * rz);\n  return cl(1 - (a * 0.866 - max(ux, 0.5 * ux + 0.866 * uy)) / 0.6, 0, 1);\n}\n\nfunction build(P, R) {\n  const L = LAY[R - 1], s = L.s, cols = R > 1 ? 2 : 1, cw = W / cols;\n  const A = (P.amb = new Float32Array(N * 3)), RF = (P.refl = new Float32Array(N)), TR = (P.tr = new Float32Array(N).fill(1));\n  const PL = (P.pool = new Float32Array(N)), TI = (P.tid = new Uint8Array(N)), PZ = (P.pz = new Uint8Array(N)), GL = (P.gl = new Uint8Array(N));\n  const D = (P.D = Array.from({ length: 11 }, () => new Uint8Array(N).fill(255)));\n  const OC = (P.OC = Array.from({ length: 10 }, () => new Uint8Array(N)));\n  const put = (x, y, r, g, b, f) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    A.set([r, g, b], p * 3);\n    RF[p] = f;\n  };\n  const line = (x0, y0, x1, y1, c, f) => {\n    for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0), 1); i \u003c= n; i++) put(round(mix(x0, x1, i / n)), round(mix(y0, y1, i / n)), ...c, f);\n  };\n  // Glow and the light it throws, by distance to the lit wire in eighths.\n  const CO = (P.CO = new Float32Array(256)), SP = (P.SP = new Float32Array(256)), WR = new Float32Array(256);\n  for (let q = 0; q \u003c 256; q++) {\n    const d = q / 8;\n    CO[q] = 1.35 * exp(-((d / (0.55 + 0.35 * s)) ** 2)) + 0.5 * exp(-((d / (1.2 + 0.8 * s)) ** 2)) + 0.22 * exp(-d / (2.5 + 2.5 * s));\n    SP[q] = 0.8 * exp(-d / (1.5 + 3 * s)) + 0.3 * exp(-d / (4 + 12 * s));\n    WR[q] = cl(1.3 - d / (0.45 + 0.35 * s), 0, 1);\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const g = 0.7 + 0.6 * hash(p & 63, p >> 6);\n    put(p & 63, p >> 6, 5 * g, 5 * g, 7 * g, 0.12);\n  }\n  const n = (P.n = R * cols), T = (P.T = []);\n  P.newT = n > 1 ? floor(rnd() * n) : -1;\n  P.oldT = n > 1 ? (P.newT + 1 + floor(rnd() * (n - 1))) % n : 0;\n  P.pois = [0, 9, 3, 8][floor(rnd() * 4)];\n  P.lamps = [];\n  for (let r = 0, i = 0; r \u003c R; r++)\n    for (let c = 0; c \u003c cols; c++, i++) {\n      const y0 = round((r * H) / R), y1 = round(((r + 1) * H) / R), x0 = c * cw, cx = x0 + cw / 2;\n      const top = y0 + L.top, bot = top + L.gh, hw = L.gw / 2, dmh = round(L.gw * 0.3), rb = max(2, round(L.gw * 0.12));\n      const dcy = top + L.gh * L.dc, bx = cx - L.dw / 2, by = dcy - L.dh / 2, m = 1 + 3 * s;\n      const c0 = floor(bx - m), c1 = ceil(bx + L.dw + m + 2 * s), r0 = floor(by - m), r1 = ceil(by + L.dh + m);\n      const nw = i === P.newT ? 1.35 : 1;\n      const half = (y) => {\n        const v = y + 0.5;\n        if (v \u003c top || v > bot) return -1;\n        if (v \u003c top + dmh) return hw * sqrt(max(0, 1 - ((top + dmh - v) / dmh) ** 2));\n        if (v > bot - rb) return hw - rb + sqrt(max(0, rb * rb - (v - bot + rb) ** 2));\n        return hw;\n      };\n      // Each numeral's wire, by distance, in this tube's cell.\n      const S = [];\n      for (let j = 0; j \u003c 10; j++) {\n        const sc = 1 - 0.008 * DEPTH[j];\n        S.push(strokes(j, cx - (L.dw * sc) / 2, dcy - (L.dh * sc) / 2, L.dw * sc, L.dh * sc));\n      }\n      S.push([bx + L.dw * 1.17, by + L.dh * 0.98, bx + L.dw * 1.17, by + L.dh * 0.98]);\n      // In the old tube a numeral the clock seldom shows is poisoned: a patch\n      // of its wire has stopped glowing.\n      const pzx = S[P.pois][0] * 0.5 + S[P.pois][2] * 0.5, pzy = S[P.pois][1] * 0.5 + S[P.pois][3] * 0.5;\n      for (let y = y0; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const p = y * W + x, X = x + 0.5, Y = y + 0.5;\n          TI[p] = i;\n          if (hypot(max(0, bx - X, X - bx - L.dw), max(0, by - Y, Y - by - L.dh)) > 33) continue;\n          for (let j = 0; j \u003c 11; j++) D[j][p] = min(255, round(max(0, segDist(X, Y, S[j]) - (j > 9 ? 0.4 + 0.5 * s : 0)) * 8));\n          if (i === P.oldT) PZ[p] = round(255 * exp(-((hypot(X - pzx, Y - pzy) / (1.4 + 2 * s)) ** 2)));\n        }\n      // Glass, getter, mica, rods, the anode mesh and the cathodes behind it.\n      for (let y = y0; y \u003c y1; y++) {\n        const hy = half(y), hu = half(y - 1), hd = half(y + 1);\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const p = y * W + x, ax = abs(x + 0.5 - cx), e = hy - ax, g = hash(x, y + 300), left = x + 0.5 \u003c cx;\n          if (e \u003c= 0) continue;\n          let col = [4 + 2 * g, 5 + 2 * g, 7 + 2 * g], f = 0.09;\n          if (e \u003c 1.2 || hu - ax \u003c= 0 || hd - ax \u003c= 0) [col, f] = [[24 * nw, 28 * nw, 34 * nw], 0.5];\n          else if (y \u003c top + dmh * 0.8) {\n            // The getter's mirror on the dome: bright and clean in a new tube,\n            // dull brown in an old one.\n            const a = cl(1.15 - (y - top) / (dmh * 0.72) + 0.3 * (g - 0.5), 0, 1), v = nw > 1 ? 40 + 56 * a : 24 + 26 * a;\n            col = (nw > 1 ? [v, v, v * 1.06] : [v * 0.95, v * 0.86, v * 0.72]).map((c, ch) => mix(col[ch], c, a));\n            f = mix(0.09, 0.5, a);\n          } else if (x >= c0 && x \u003c= c1 && y >= r0 && y \u003c= r1) {\n            // Inside the anode: the back plate, the unlit wires, the mesh in front.\n            let w = 0;\n            for (let j = 0; j \u003c 10; j++) w = max(w, WR[D[j][p]] * (1 - 0.05 * DEPTH[j]));\n            const mh = x === c0 || x === c1 ? 1 : hexLine(x + 0.5 - cx, y + 0.5 - dcy, L.hex);\n            col = [mix(6, 25, w) + 6 * mh, mix(6, 25, w) + 6 * mh, mix(7, 29, w) + 7 * mh];\n            f = mix(0.15, 0.34, w) + 0.25 * mh;\n            TR[p] = 1 - 0.42 * mh;\n            for (let k = 0, run = 0; k \u003c 10; k++) {\n              OC[STACK[k]][p] = run;\n              run = max(run, round(WR[D[STACK[k]][p]] * 255));\n            }\n          } else if ((y === r0 - 1 || y === r0 - 2 + (s \u003c 0.6) || y === r1 + 1 || y === r1 + 2 - (s \u003c 0.6)) && e > 1.5) [col, f] = [[(34 + 18 * g) * nw, (34 + 18 * g) * nw, (32 + 16 * g) * nw], 0.62];\n          else if ((x === c0 - 2 || x === c1 + 2) && y > r0 - 3 && y \u003c r1 + 4 * s + 2) [col, f] = [[26, 26, 28], 0.55];\n          // The window behind the camera, on the left of the glass.\n          const u = (y - top) / L.gh, hl = left && e >= 1.2 && e \u003c 3.2 ? (e \u003c 2.2 ? 1 : 0.35) * max(cl(1 - abs(u - 0.5) / 0.3, 0, 1) ** 0.4, cl(1 - abs(u - 0.14) / 0.05, 0, 1)) : 0;\n          if (hl > 0) col = col.map((v, ch) => v + hl * (104 + 12 * ch) * nw);\n          GL[p] = 1;\n          if (!left && e >= 2 && e \u003c 3 && y > top + dmh && y \u003c bot - rb * 2) col = col.map((v, ch) => v + (16 + 4 * ch) * nw);\n          put(x, y, ...col, f);\n        }\n      }\n      // A bright curve on the dome, and the exhaust tip.\n      for (let a = 196; a \u003c 252; a += 1.5) {\n        const v = (60 + 80 * sin(((a - 196) * PI) / 56)) * nw;\n        put(round(cx + (hw - 2.5) * cos((a * PI) / 180) - 0.5), round(top + dmh + (dmh - 2) * sin((a * PI) / 180) - 0.5), v, v * 1.05, v * 1.15, 0.3);\n      }\n      for (let y = top - 1 - round(2 * s); y \u003c top; y++) put(floor(cx) - 1, y, 36, 40, 46, 0.2), put(floor(cx), y, 50, 54, 60, 0.2);\n      // Leads from the bottom mica to the glass press, pins to the socket.\n      const sh = round(2 + 4 * s), np = R === 1 ? 13 : 7, ph = hw * 0.55;\n      for (let k = 0; k \u003c np; k++) {\n        const u = k / (np - 1), xa = round(mix(c0 + 2, c1 - 2, u)), xp = round(cx - ph + 2 * ph * u);\n        line(xa, r1 + 3, xp, bot - sh, [30, 30, 33], 0.6);\n        for (let y = bot; y \u003c bot + L.pin; y++) put(xp, y, 62 + 20 * (y === bot), 64 + 20 * (y === bot), 68 + 20 * (y === bot), 0.5);\n        put(xp, bot + L.pin, 120, 92, 40, 0.4);\n      }\n      for (let y = bot - sh; y \u003c bot; y++) {\n        const hwp = mix(hw * 0.32, hw * 0.48, (y - bot + sh) / sh);\n        for (let x = ceil(cx - hwp); x \u003c cx + hwp; x++) if (half(y) - abs(x + 0.5 - cx) > 1.2) put(x, y, 20 + 14 * (y === bot - sh), 22 + 14 * (y === bot - sh), 25 + 15 * (y === bot - sh), 0.35);\n      }\n      const sy = bot + L.pin, by0 = sy + L.sock;\n      for (let y = sy; y \u003c by0; y++) for (let x = ceil(cx - hw * 0.75); x \u003c cx + hw * 0.75; x++) if (y > sy || !RF[y * W + x] || A[(y * W + x) * 3] \u003c 100) put(x, y, y === sy ? 30 : 13, y === sy ? 30 : 13, y === sy ? 34 : 15, 0.25);\n      for (let k = 0; k \u003c np; k++) put(round(cx - ph + (2 * ph * k) / (np - 1)), sy, 120, 92, 40, 0.4);\n      // The board: green mask, copper under it, gold pads.\n      for (let y = by0; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const g = hash(x + 50, y), edge = y === by0;\n          put(x, y, edge ? 38 : 10 + 4 * g, edge ? 46 : 26 + 6 * g, edge ? 42 : 16 + 4 * g, 0.6);\n        }\n      for (let k = 0; k \u003c np; k += 2) {\n        const xp = round(cx - ph + (2 * ph * k) / (np - 1)), yv = by0 + 2 + (k & 2 ? 1 : 0);\n        line(xp, by0 + 1, xp, y1, [20, 54, 32], 0.6);\n        put(xp, yv, 120, 96, 44, 0.5);\n      }\n      for (let y = top - 4; y \u003c y1; y++)\n        for (let x = x0; x \u003c x0 + cw; x++) {\n          const v = exp(-(((x + 0.5 - cx) / (hw * 0.8)) ** 2)) * exp(-max(0, y - bot + 6) / (6 + 10 * s));\n          if (y >= bot - 8) PL[y * W + x] = 0.45 * v;\n        }\n      T.push({ cx, bot, by0, y1, hw });\n      if (R === 1) P.lamps.push([60, 107, 4, 10]);\n      else if (c === 1) P.lamps.push([30, bot - round(9 * s), 4, round(11 * s)]);\n    }\n  if (R === 1) {\n    // An anode resistor and the high-voltage capacitor lie on the big board.\n    for (let x = 1; x \u003c 14; x++) put(x, 124, 70, 72, 76, 0.4);\n    for (let x = 3; x \u003c 12; x++) for (let y = 123; y \u003c 126; y++) put(x, y, ...[[110, 96, 70], [90, 50, 22], [20, 18, 16], [150, 36, 24]][x === 5 ? 1 : x === 7 ? 2 : x === 9 ? 3 : 0].map((v) => v * (y === 123 ? 1.2 : y === 125 ? 0.7 : 1)), 0.4);\n    for (let x = 50; x \u003c 62; x++) for (let y = 122; y \u003c 127; y++) put(x, y, ...(x > 59 ? [78, 80, 86] : x === 52 ? [90, 110, 150] : [26, 44, 110]).map((v) => v * (y === 122 ? 1.3 : y === 126 ? 0.6 : 1)), 0.4);\n  }\n  // The neon indicator lamps: a glass capsule with two electrodes.\n  for (const [lx, ly, lw, lh] of P.lamps) {\n    for (let y = ly; y \u003c ly + lh; y++)\n      for (let x = lx; x \u003c lx + lw; x++) {\n        const rim = x === lx || x === lx + lw - 1 || y === ly;\n        put(x, y, rim ? 30 : 8, rim ? 34 : 9, rim ? 40 : 11, 0.3);\n      }\n    for (let y = ly + 2; y \u003c ly + lh + 3; y++) put(lx + 1, y, 44, 44, 46, 0.4), put(lx + lw - 2, y, 44, 44, 46, 0.4);\n  }\n  P.amb0 = A.slice();\n  for (const k of [\"tg\", \"dsp\", \"pk\", \"fa\", \"fl\", \"dp\", \"s0\", \"s1\", \"b\", \"sp\"]) P[k] = new Array(n).fill(k === \"dsp\" || k === \"pk\" ? -1 : 0);\n}\n\n// The gas: a glow colour for every brightness, and the light it throws.\nfunction ramp(P, gas) {\n  const f = gas * 3, i = min(2, floor(f)), t = f - i;\n  const [h, b, c] = GAS[i].map((col, k) => col.map((v, ch) => mix(v, GAS[i + 1][k][ch], t)));\n  const RA = (P.RA = new Float32Array(768)), st = [0, 0.12, 0.35, 0.8, 1.5, 2.55];\n  const cs = [[0, 0, 0], h.map((v) => v * 0.35), h, b, b.map((v, ch) => mix(v, c[ch], 0.6)), c];\n  for (let j = 0, k = 0; j \u003c 256; j++) {\n    const e = j / 100;\n    while (k \u003c 4 && e > st[k + 1]) k++;\n    const u = (e - st[k]) / (st[k + 1] - st[k]);\n    for (let ch = 0; ch \u003c 3; ch++) RA[j * 3 + ch] = mix(cs[k][ch], cs[k + 1][ch], cl(u, 0, 1));\n  }\n  const lum = (b[0] + b[1] + b[2]) / 3;\n  P.spill = b.map((v) => mix(v, lum, 0.35));\n  // A green-filtered tube is green glass.\n  const gf = cl(gas * 3 - 2, 0, 1), tint = [1 - 0.3 * gf, 1 + 0.5 * gf, 1 - 0.2 * gf];\n  if (P.amb0) for (let p = 0; p \u003c N * 3; p++) P.amb[p] = P.amb0[p] * (P.gl[(p / 3) | 0] ? tint[p % 3] : 1);\n}\n\n// A spin: the tube runs up through the numerals, slowing from 16 to 3 a\n// second, and stops on its target.\nfunction roll(P, i, wait, len) {\n  P.s0[i] = P.t + wait;\n  P.s1[i] = P.t + wait + len;\n}\nfunction spinDigit(P, i) {\n  const T = P.s1[i] - P.s0[i], u = (P.t - P.s0[i]) / T, ph = T * (16 * u - 6.5 * u * u), all = T * 9.5;\n  return (((P.tg[i] + floor(ph) - floor(all)) % 10) + 10) % 10;\n}\nfunction digits(P, v) {\n  for (let i = P.n - 1; i >= 0; i--, v = floor(v / 10)) P.tg[i] = v % 10;\n}\n\nfunction start(P) {\n  Object.assign(P, { next: P.t, gate: P.t, retune: P.t + 4, base: 140000 + rnd() * 800000, key: -1, v: 0, step: P.t, cyc: -9, blank: 0 });\n  P.c0 = P.n === 6 ? 23 * 3600 + 59 * 60 + 53 : P.n === 4 ? 23 * 3600 + 57 * 60 : 9 * 3600 + 58 * 60;\n  P.s1.fill(0);\n}\n\nconst MODES = [\n  // Scramble: the tubes spin, stop one after another, and the number holds.\n  (P) => {\n    if (P.t \u003c P.next) return;\n    const n = P.n;\n    for (let i = 0; i \u003c n; i++) {\n      P.tg[i] = floor(rnd() * 10);\n      roll(P, i, 0.07 * i, n > 1 ? 0.8 + 0.3 * i : 1.5);\n    }\n    P.next = P.t + (n > 1 ? 0.9 + 0.37 * n : 1.5) + 2.6;\n    P.lamp = 0;\n  },\n  // A frequency counter reading an oscillator that drifts as it warms up.\n  (P) => {\n    if (P.t \u003c P.gate) return;\n    P.gate += P.n > 1 ? 0.12 : 0.4;\n    if (P.t > P.retune) [P.base, P.retune, P.blank] = [10000 + rnd() * 980000, P.t + 5 + rnd() * 3, 0.25];\n    digits(P, floor(P.base + 37 * P.t + 4 * sin(P.t * 2.1) + rnd() * 3));\n    P.dp.fill(0);\n    if (P.n > 3) P.dp[P.n - 4] = 1;\n    P.lamp = 1;\n  },\n  // A clock: a big tube spells the time a numeral at a time.\n  (P) => {\n    const n = P.n, C = P.c0 + P.t * (n === 6 ? 2 : n === 4 ? 60 : 10), s = floor(C) % 86400;\n    const hh = floor(s / 3600), mm = floor(s / 60) % 60, ss = s % 60, all = [floor(hh / 10), hh % 10, floor(mm / 10), mm % 10, floor(ss / 10), ss % 10];\n    if (n === 1) {\n      const ph = P.t % 3.6, j = floor(ph / 0.7);\n      P.tg[0] = j \u003c 4 && ph % 0.7 \u003c 0.56 ? all[j] : -1;\n      P.dp[0] = j === 1 ? 1 : 0;\n      P.lamp = j \u003c 4 ? 1 : 0;\n      return;\n    }\n    // A new minute (or hour) runs the slot machine, which also keeps the\n    // cathodes from poisoning.\n    const key = n === 6 ? floor(s / 60) : hh;\n    if (P.key >= 0 && key !== P.key) for (let i = 0; i \u003c n; i++) roll(P, i, 0.05 * i, 0.7 + 0.12 * i);\n    P.key = key;\n    for (let i = 0; i \u003c n; i++) P.tg[i] = all[i];\n    P.lamp = (n === 6 ? C : P.t) % 1 \u003c 0.5 ? 1 : 0;\n  },\n  // A countdown; at zero every cathode runs in turn, then it starts again.\n  (P) => {\n    if (P.t \u003c P.step) return;\n    if (P.v > 0) {\n      digits(P, --P.v);\n      P.step += 0.4;\n      P.lamp = 1;\n    } else if (P.cyc \u003c P.step - 3) {\n      P.cyc = P.t + 0.6;\n      P.step = P.t + 2.6;\n    } else {\n      P.v = P.n === 1 ? 10 : 17;\n      P.step = P.t;\n    }\n  },\n];\n\nexport function setup(params) {\n  Object.assign(params, { t: 0, rt: 0, R: 0, gas: -1, mode: -1, lamp: 0, lv: 0, buf: new Float32Array(N * 3) });\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06];\n  dt = cl(dt, 0, 0.1);\n  const rate = cl(k[1], 0.2, 3) / 2, R = cl(round(k[2]), 1, 3), mode = cl(round(k[3]), 0, 3), gas = cl(k[0], 0, 1);\n  if (R !== P.R) [P.R, P.mode, P.gas] = [R, -1, -1, build(P, R)];\n  if (abs(gas - P.gas) > 0.002) ramp(P, (P.gas = gas));\n  if (mode !== P.mode) start(P, (P.mode = mode));\n  P.t += dt * rate;\n  P.rt += dt;\n  if (input.btnPressed && input.btnPressed[0]) P.cyc = P.t;\n  P.lamp *= P.mode & 1 ? 0.6 : 1;\n  MODES[mode](P);\n  P.blank = max(0, P.blank - dt);\n  const cyc = P.t >= P.cyc && P.t \u003c P.cyc + 1.9;\n  for (let i = 0; i \u003c P.n; i++) {\n    let d = P.blank > 0 ? -1 : P.tg[i];\n    if (cyc) d = STACK[9 - ((floor((P.t - P.cyc) * 12) + i) % 10)];\n    else if (P.s1[i] && P.t >= P.s0[i] && P.t \u003c P.s1[i]) d = spinDigit(P, i);\n    else if (P.s1[i] && P.t >= P.s1[i]) [P.s1[i], P.fl[i]] = [0, 1];\n    if (d !== P.dsp[i]) [P.pk[i], P.fa[i], P.dsp[i]] = [P.dsp[i], 1, d];\n    P.fa[i] = max(0, P.fa[i] - dt * 14);\n    P.fl[i] = max(0, P.fl[i] - dt * 2.8);\n    // Neon flickers a little, and now and then an old tube sputters.\n    if ((P.sp[i] -= dt) \u003c= 0 && rnd() \u003c dt * 0.15) P.sp[i] = 0.12 + rnd() * 0.15;\n    const z = P.rt * 1.0 + i * 7.1;\n    P.b[i] = (i === P.newT ? 1.25 : 0.92) * (1 + 0.3 * P.fl[i]) * (0.97 + 0.02 * sin(z * 53) + 0.02 * sin(z * 7.3)) * (P.sp[i] > 0 ? 0.6 + 0.4 * (rnd() \u003c 0.5) : 1);\n  }\n  if (P.mode === 0 && P.s1.every((v) => !v)) P.lamp = 1;\n  P.lv += (P.lamp - P.lv) * min(1, dt * 30);\n}\n\nexport function draw(display, params) {\n  const P = params, { amb, refl, tr, pool, tid, D, OC, CO, SP, RA, buf, pz, spill, oldT, pois } = P;\n  const [sr, sg, sb] = spill, B = P.b, K = P.dsp, PK = P.pk, FA = P.fa, DP = P.dp;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const i = tid[p], b = B[i], k = K[i], pk = PK[i], fa = FA[i];\n    let Lt = 0, e = 0;\n    if (k >= 0) {\n      const q = D[k][p];\n      Lt = (SP[q] + pool[p]) * b;\n      e = CO[q] * b * (1 - OC[k][p] * 0.0022) * (i === oldT && k === pois ? 1 - pz[p] * 0.0035 : 1);\n    }\n    if (fa > 0 && pk >= 0) {\n      const q = D[pk][p];\n      Lt += (SP[q] + pool[p]) * b * fa;\n      e += CO[q] * b * fa;\n    }\n    if (DP[i] && k >= 0) {\n      const q = D[10][p];\n      Lt += SP[q] * b * 0.4;\n      e += CO[q] * b;\n    }\n    const j = min(255, (e * tr[p] * 100) | 0) * 3, f = refl[p] * Lt;\n    buf[o] = amb[o] + f * sr + RA[j];\n    buf[o + 1] = amb[o + 1] + f * sg + RA[j + 1];\n    buf[o + 2] = amb[o + 2] + f * sb + RA[j + 2];\n  }\n  // The indicator lamps glow on their left electrode.\n  const lv = P.lv;\n  if (lv > 0.02)\n    for (const [lx, ly, , lh] of P.lamps)\n      for (let y = ly + 1; y \u003c ly + lh + 2; y++)\n        for (let x = lx - 1; x \u003c= lx + 2; x++) {\n          if (x \u003c 0 || x >= W || y >= H) continue;\n          const o = (y * W + x) * 3, c = x === lx + 1 && y > ly + 1 && y \u003c ly + lh ? 1 : 0.3 * (y \u003c ly + lh);\n          buf[o] += 255 * c * lv;\n          buf[o + 1] += 120 * c * lv;\n          buf[o + 2] += 34 * c * lv;\n        }\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n    display.setPixel(p & 63, p >> 6, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Gas=0..1, Speed=0.2..3, Rows=1..3, Mode=0..3","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Gas","min":0,"max":1,"about":"What glows: neon orange at 0, a pink neon-argon mix at a third, the blue-violet of argon and mercury at two thirds, and at 1 a tube behind green-filtered glass."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the display runs: at 2 a spinning tube runs through 16 numerals a second before it slows and stops."},{"name":"Rows","min":1,"max":3,"about":"One big tube at 1, two rows of two at 2, three rows of two at 3, each row on its own board. With more than one, one tube is a newer replacement, brighter, with a clean silver getter."},{"name":"Mode","min":0,"max":3,"about":"Scramble at 0 (every tube spins and stops on a random number, one after another), a frequency counter at 1, a clock at 2 (one big tube spells the time a numeral at a time), a countdown that ends in the anti-poisoning run through every cathode at 3."}],"start":[0,2,1,0.06],"measures":{"motion":0.4696,"detail":0.0533,"edges":0.238,"complexity":1.7971,"coverage":0.5829,"colour":0.1892,"drift":0.1676},"knobResponse":[0.0576,0.0717,0.1676,0.0732]},{"slug":"one-bit","title":"One Bit","family":"pixel","round":17,"note":"달밤 바닷가 벼랑에 선 등대를 두 색과 Bayer 순서 디더링만으로 그린 1비트 화면이에요. 빛줄기가 돌고 구름이 달 앞을 지나고 안개 둑이 바다 위에서 오르내려도 한 프레임에 뒤집히는 픽셀은 열 개 안팎이에요. K1 이 앰버 단말기, 게임보이, 매킨토시, 전자잉크, 플레이데이트의 두 색을 골라요.","idea":"A lighthouse on a cliff over a moonlit sea, drawn on a one-bit screen in two tones with Bayer ordered dithering, where the beam turns, clouds cross the moon and a fog bank breathes on the water so slowly that only a few pixels flip each frame.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   One Bit\n// Family:  pixel\n// Idea:    A lighthouse on a cliff over a moonlit sea, drawn on a one-bit screen in two tones with Bayer ordered dithering, where the beam turns, clouds cross the moon and a fog bank breathes on the water so slowly that only a few pixels flip each frame.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bayer's ordered dither (1973), after the one-bit screens of the early Macintosh and the Playdate\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Time=0.2..3, Fog=0..1, Wind=0..1\n//\n// Knob 1: Palette. The screen's two tones: an amber terminal, a Game Boy's greens, a Macintosh's black and white, e-ink on warm paper, and a Playdate's grey on silver.\n// Knob 2: Time. How fast the night goes by: at 2 the beam turns once in 12 seconds and a cloud takes 40 to 60 seconds to cross; at 0.2 the picture all but stands still.\n// Knob 3: Fog. How much fog lies on the sea: at 0 a low bank breathes along the horizon; turned up, it rolls in and climbs the cliff until only the gallery and the lantern stand clear.\n// Knob 4: Wind. At 0 a still night, four small clouds in a sky full of stars and a calm sea; turned up, nine clouds twice as long race over and hide the moon, whitecaps break between the wavelets and the surf climbs the cliff.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The horizon, and the moon's centre and radius.\nconst HZ = 82;\nconst MX = 16;\nconst MY = 28;\nconst MR = 7;\n// The moon's seas: offset from its centre and squared radius.\nconst MARIA = [-2, -2, 4, 2, -3, 3, 1.5, 1.5, 4, -4.5, 1.5, 3];\n// The lighthouse: tower axis, the rows of its foot and its top, its lamp.\nconst TX = 52;\nconst T_BASE = 68;\nconst T_TOP = 32;\nconst LAMP_Y = 25;\n// One turn of the light at Time 1, in seconds, and where the turn starts:\n// at the opening Time it swings past us and out over the sea in the first\n// seconds.\nconst TURN = 24;\nconst BEAM0 = 3.06;\n// The fog bank breathes, rising and settling again, over this many seconds of Time 1.\nconst BREATH = 48;\nconst MAX_CLOUDS = 9;\n// The screen's two tones, light then dark.\nconst PALETTES = [\n  [\n    [255, 176, 32],\n    [18, 8, 0],\n  ],\n  [\n    [155, 188, 15],\n    [15, 56, 15],\n  ],\n  [\n    [255, 255, 255],\n    [0, 0, 0],\n  ],\n  [\n    [222, 214, 192],\n    [38, 38, 44],\n  ],\n  [\n    [178, 175, 166],\n    [50, 47, 40],\n  ],\n];\n// The only greys the screen draws, as shares of lit pixels: ordered dither\n// at these levels makes clean repeating patterns, as a one-bit artist would\n// pick them from a palette of fills.\nconst G1 = 1 / 16;\nconst G2 = 1 / 8;\nconst G3 = 1 / 4;\nconst G4 = 1 / 2;\n\nconst SKY = 0;\nconst SEA = 1;\nconst CLIFF = 2;\nconst TOWER = 3;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// The 8 x 8 Bayer matrix, as thresholds between 0 and 1, grown from the\n// 2 x 2 one: each step puts four copies side by side, scaled by 4 and offset\n// by 0, 2, 3 and 1.\nfunction bayer() {\n  let m = [0];\n  let n = 1;\n  while (n \u003c 8) {\n    const next = new Array(4 * n * n);\n    for (let y = 0; y \u003c n; y++)\n      for (let x = 0; x \u003c n; x++) {\n        const v = 4 * m[y * n + x];\n        next[y * 2 * n + x] = v;\n        next[y * 2 * n + x + n] = v + 2;\n        next[(y + n) * 2 * n + x] = v + 3;\n        next[(y + n) * 2 * n + x + n] = v + 1;\n      }\n    m = next;\n    n *= 2;\n  }\n  return Float32Array.from(m, (v) => (v + 0.5) / 64);\n}\n\nfunction cliffEdge(y) {\n  // The cliff's seaward face, from the lighthouse's ledge down to the water.\n  const u = (y - T_BASE) / (H - T_BASE);\n  return 42 - 10 * u * u + 1.8 * Math.sin(y * 0.55) + 1.1 * Math.sin(y * 1.7 + 1);\n}\n\nfunction towerHalf(y) {\n  return 4 + (1.5 * (y - T_TOP)) / (T_BASE - T_TOP);\n}\n\n// The still picture, as a grey for each pixel before dithering, and which\n// part of the scene each pixel belongs to.\nfunction drawScene(P) {\n  const { base, region } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let v = 0;\n      let part = SEA;\n      if (y \u003c HZ) {\n        part = SKY;\n        // Black overhead, the sky paling in three bands down to the horizon.\n        v = y >= HZ - 9 ? G3 : y >= HZ - 20 ? G2 : y >= HZ - 36 ? G1 : 0;\n        const dm = Math.sqrt((x - MX) ** 2 + (y - MY) ** 2);\n        if (dm \u003c MR) {\n          // The moon, its seas in half tone: Imbrium and Serenitatis up on\n          // the left and right, Tranquillitatis below, Procellarum down the edge.\n          let mare = false;\n          for (let m = 0; m \u003c MARIA.length; m += 3) if ((x - MX - MARIA[m]) ** 2 + (y - MY - MARIA[m + 1]) ** 2 \u003c MARIA[m + 2]) mare = true;\n          v = mare ? G4 : 1;\n        } else {\n          // A ring of haze round the moon, fading out in four fills.\n          const ring = dm - MR;\n          const halo = ring \u003c 2 ? G4 : ring \u003c 6 ? G3 : ring \u003c 12 ? G2 : ring \u003c 20 ? G1 : 0;\n          if (halo > v) v = halo;\n        }\n      } else if (y \u003c HZ + 5) v = G2;\n      const edge = cliffEdge(y);\n      if (y >= T_BASE && x >= edge) {\n        part = CLIFF;\n        // Black rock, its seaward rim and a few ledges catching the moon, and\n        // turf along the top.\n        // The face is shaded from the rim back into the dark in three fills.\n        const ledge = (y === 86 && x \u003c 50) || (y === 99 && x \u003c 46) || (y === 112 && x \u003c 43);\n        const back = x - edge;\n        v = back \u003c 1 || ledge || y === T_BASE ? 1 : y === T_BASE + 1 ? G4 : back \u003c 7 ? G3 : back \u003c 13 ? G2 : back \u003c 20 ? G1 : 0;\n      }\n      // The tower, lit from the moon on the left and in shadow on the right.\n      const hw = towerHalf(y);\n      if (y >= T_TOP && y \u003c T_BASE && Math.abs(x - TX) \u003c= hw) {\n        part = TOWER;\n        const u = (x - (TX - hw)) / (2 * hw);\n        v = u \u003c 0.45 ? 1 : u \u003c 0.65 ? G4 : u \u003c 0.82 ? G3 : 0;\n        // Two black bands.\n        if ((y >= 39 && y \u003c 44) || (y >= 53 && y \u003c 58)) v = u \u003c 0.3 ? G4 : 0;\n        // A door and two small windows.\n        if ((y >= T_BASE - 6 && Math.abs(x - TX + 1) \u003c= 1) || ((y === 48 || y === 49 || y === 35 || y === 36) && x === TX - 1)) v = 0;\n      }\n      // Gallery and rail, lantern room, roof and the ball on top.\n      if (y >= T_TOP - 3 && y \u003c T_TOP && Math.abs(x - TX) \u003c= 6) {\n        part = TOWER;\n        v = y === T_TOP - 1 || (x & 1) === 0 || Math.abs(x - TX) === 6 ? 1 : 0;\n      }\n      if (y >= LAMP_Y - 4 && y \u003c T_TOP - 3 && Math.abs(x - TX) \u003c= 3) {\n        part = TOWER;\n        v = Math.abs(x - TX) === 3 ? 0 : 1;\n      }\n      if (y >= LAMP_Y - 8 && y \u003c LAMP_Y - 4 && Math.abs(x - TX) \u003c= 4 - (y - LAMP_Y + 8)) {\n        part = TOWER;\n        v = x \u003c= TX ? 1 : G3;\n      }\n      if (y === LAMP_Y - 9 && x === TX) {\n        part = TOWER;\n        v = 1;\n      }\n      base[p] = v;\n      region[p] = part;\n    }\n  // Stars in the dark sky, a few of them twinkling.\n  P.stars = [];\n  for (let i = 0; i \u003c 70; i++) {\n    const x = Math.floor(hash(i, 21) * W);\n    const y = Math.floor(hash(i, 22) * 52);\n    const p = y * W + x;\n    if (region[p] !== SKY || base[p] > 0) continue;\n    P.stars.push(p, hash(i, 23) \u003c 0.4 ? 1 : 0);\n  }\n  // Clouds: each a row of three to five puffs, long and low like the clouds\n  // over a sea at night, on its own height and pace.\n  P.clouds = [];\n  for (let i = 0; i \u003c MAX_CLOUDS; i++) {\n    const puffs = [];\n    const n = 3 + Math.floor(hash(i, 31) * 3);\n    let dx = 0;\n    for (let j = 0; j \u003c n; j++) {\n      const rx = 4 + 5 * hash(i * 7 + j, 32);\n      puffs.push(dx, -2.2 * hash(i * 7 + j, 33) * (j > 0 && j \u003c n - 1 ? 1 : 0.3), rx, 1.6 + 1.6 * hash(i * 7 + j, 34));\n      dx += rx * 1.1;\n    }\n    P.clouds.push({ x: hash(i, 35) * (W + 40), y: 8 + ((i * 23) % 9) * 6 + 3 * hash(i, 36), len: dx, pace: 0.7 + 0.4 * hash(i, 37), puffs });\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.base = new Float32Array(N);\n  P.region = new Uint8Array(N);\n  P.level = new Float32Array(N);\n  P.cloud = new Uint8Array(N);\n  P.bayer = bayer();\n  drawScene(P);\n  Object.assign(P, { t: 0, sail: 0, started: false, palette: 0, fogK: 0, wind: 0.06 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.palette = clamp(Math.floor(k[0] * PALETTES.length), 0, PALETTES.length - 1);\n  const time = clamp(k[1], 0.05, 4);\n  P.fogK = clamp(k[2], 0, 1);\n  P.wind = clamp(k[3], 0, 1);\n  // The clouds sail faster in a wind.\n  const gust = 1 + 1.5 * P.wind;\n  if (!P.started) {\n    // The night is a few seconds on when the screen comes up, as far as Time takes it.\n    P.started = true;\n    P.t = 6 * time;\n    P.sail = 6 * time * gust;\n  }\n  P.t += dt * time;\n  P.sail += dt * time * gust;\n}\n\n// Mark where the clouds are this frame: 1 inside, 2 on a top edge.\nfunction placeClouds(P) {\n  const { cloud } = P;\n  cloud.fill(0);\n  // More clouds, and bigger, as the wind rises, until the deck closes.\n  const count = 4 + Math.round(5 * P.wind);\n  const grow = 1 + 1.2 * P.wind;\n  for (let i = 0; i \u003c count; i++) {\n    const c = P.clouds[i];\n    const span = W + c.len * grow + 16;\n    const x0 = ((((c.x + P.sail * c.pace) % span) + span) % span) - c.len * grow - 8;\n    const pf = c.puffs;\n    for (let j = 0; j \u003c pf.length; j += 4) {\n      const cx = x0 + pf[j] * grow;\n      const cy = c.y + pf[j + 1];\n      const rx = pf[j + 2] * grow;\n      const ry = pf[j + 3] * (1 + 0.8 * P.wind);\n      const ya = Math.max(0, Math.floor(cy - ry));\n      const yb = Math.min(HZ - 1, Math.ceil(cy + ry));\n      for (let y = ya; y \u003c= yb; y++) {\n        const u = (y - cy) / ry;\n        const w = rx * Math.sqrt(Math.max(0, 1 - u * u));\n        const xa = Math.max(0, Math.ceil(cx - w));\n        const xb = Math.min(W - 1, Math.floor(cx + w));\n        for (let x = xa; x \u003c= xb; x++) cloud[y * W + x] = 1;\n      }\n    }\n  }\n  for (let p = W; p \u003c HZ * W; p++) if (cloud[p] && !cloud[p - W]) cloud[p] = 2;\n}\n\n// The grey of every pixel this frame: the still scene, the clouds, the\n// turning beam, the water's glitter and the fog.\nfunction compose(P) {\n  const { base, region, level, cloud } = P;\n  const t = P.t;\n  placeClouds(P);\n  // The fog bank: its lumpy top slides left at half a pixel a second of Time\n  // 1, and the bank rises and settles as it breathes.\n  const breath = Math.sin((t / BREATH) * Math.PI * 2);\n  const fogTop = HZ - 3 - 42 * P.fogK - 4 * breath;\n  const fogLow = HZ + 12 + 30 * P.fogK + 3 * breath;\n  const fx = t * 0.5;\n  // The beam: the light turns once in TURN seconds of Time 1; on screen it\n  // is a fan whose length is the turning light's sideways reach.\n  const a = (t / TURN) * Math.PI * 2 + BEAM0;\n  const side = Math.cos(a);\n  const toward = Math.sin(a);\n  const reach = Math.abs(side) * 70;\n  const dir = side > 0 ? 1 : -1;\n  // The lantern flares as the light swings past us.\n  const flare = toward > 0 ? Math.pow(toward, 16) : 0;\n  for (let x = 0; x \u003c W; x++) {\n    const xs = x + fx;\n    const top = fogTop - 2.5 * (Math.sin(xs * 0.21 + 0.7) + 0.6 * Math.sin(xs * 0.47 + 2.1));\n    const along = (x - TX) * dir;\n    const lit = along > 3 && along \u003c reach;\n    const spread = 1.5 + along * 0.13;\n    const mid = LAMP_Y + along * 0.05;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      const part = region[p];\n      let v = base[p];\n      if (part === SKY) {\n        const c = cloud[p];\n        if (c) {\n          // A cloud near the moon is lit through; its top edge catches the light.\n          const dm = (x - MX) ** 2 + (y - MY) ** 2;\n          v = c === 2 ? (dm \u003c 500 ? 1 : G4) : dm \u003c 120 ? G4 : G3;\n        }\n        // The beam crosses the sky in front of the clouds.\n        if (lit) {\n          const off = Math.abs(y - mid) / spread;\n          if (off \u003c 1) {\n            const fall = along / reach;\n            const g = fall \u003c 0.35 ? G4 : fall \u003c 0.7 ? G3 : G2;\n            const b = off \u003c 0.35 ? (g === G4 ? 0.75 : g * 2) : g;\n            if (b > v) v = b;\n          }\n        }\n      } else if (part === SEA) {\n        // The water in level wavelets on every other row, thicker toward us,\n        // each row sliding slowly the other way from the next. Under the\n        // moon they crowd into a path of light.\n        const depth = (y - HZ) / (H - HZ);\n        const half = 2 + 14 * depth;\n        const g = Math.max(0, 1 - Math.abs(x - MX) / half);\n        const row = y - HZ;\n        const seg = Math.floor((x + 40 + t * (0.5 + 0.6 * hash(y, 5)) * ((row >> 1) & 1 ? 1 : -1)) / (3 + 4 * depth));\n        // In the path of light each wavelet also winks on and off as it catches the moon.\n        const wink = g > 0 ? 0.35 * g * (hash(seg * 3 + y, Math.floor(t * 0.6 + hash(seg, y + 7) * 9)) - 0.5) : 0;\n        const dash = hash(seg, y) - wink;\n        // A wind raises whitecaps between the rows.\n        const chop = P.wind;\n        if (row & 1 ? dash \u003c 0.1 + 0.32 * depth + 0.6 * g * g + 0.3 * chop : (g > 0.4 && dash \u003c 0.5 * g * g) || dash > 1 - 0.3 * chop * depth) v = 1;\n        // Surf at the foot of the cliff, climbing higher in a wind.\n        const foam = cliffEdge(y) - x;\n        if (y > 106 - 22 * chop && foam \u003c 2.5 + 5 * chop && Math.sin(y * 1.3 + t * 0.7) > 0.3 - foam * 0.3) v = 1;\n      }\n      // The lantern flares when the light faces us.\n      if (flare > 0.02) {\n        const d2 = (x - TX) ** 2 + (y - LAMP_Y) ** 2;\n        const f = flare * Math.exp(-d2 / 50);\n        if (f > G2 && f > v) v = f > 0.6 ? 1 : f > 0.3 ? G4 : G3;\n      }\n      // Fog in front of everything from its top down to its foot: half grey\n      // where the moon lights its upper layer, a quarter below, thinning out.\n      if (y >= top && y \u003c fogLow + 6) {\n        const f = y \u003c top + 9 ? G4 : y \u003c fogLow ? G3 : G2;\n        v = v > G4 ? G4 : f > v ? f : v;\n      }\n      level[p] = v;\n    }\n  }\n  // Stars, and the twinkling ones going out for a moment now and then.\n  const stars = P.stars;\n  for (let i = 0; i \u003c stars.length; i += 2) {\n    const p = stars[i];\n    if (level[p] > 0) continue;\n    if (!stars[i + 1] || hash(p, Math.floor(t * 1.3)) > 0.15) level[p] = 1;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.base) return;\n  compose(P);\n  const { level, bayer } = P;\n  const [light, dark] = PALETTES[P.palette];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const on = level[y * W + x] > bayer[((y & 7) \u003c\u003c 3) | (x & 7)];\n      const c = on ? light : dark;\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    }\n}\n","layer":{"id":"layer-one-bit","type":"code","name":"one-bit","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   One Bit\n// Family:  pixel\n// Idea:    A lighthouse on a cliff over a moonlit sea, drawn on a one-bit screen in two tones with Bayer ordered dithering, where the beam turns, clouds cross the moon and a fog bank breathes on the water so slowly that only a few pixels flip each frame.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Bayer's ordered dither (1973), after the one-bit screens of the early Macintosh and the Playdate\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..1, Time=0.2..3, Fog=0..1, Wind=0..1\n//\n// Knob 1: Palette. The screen's two tones: an amber terminal, a Game Boy's greens, a Macintosh's black and white, e-ink on warm paper, and a Playdate's grey on silver.\n// Knob 2: Time. How fast the night goes by: at 2 the beam turns once in 12 seconds and a cloud takes 40 to 60 seconds to cross; at 0.2 the picture all but stands still.\n// Knob 3: Fog. How much fog lies on the sea: at 0 a low bank breathes along the horizon; turned up, it rolls in and climbs the cliff until only the gallery and the lantern stand clear.\n// Knob 4: Wind. At 0 a still night, four small clouds in a sky full of stars and a calm sea; turned up, nine clouds twice as long race over and hide the moon, whitecaps break between the wavelets and the surf climbs the cliff.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The horizon, and the moon's centre and radius.\nconst HZ = 82;\nconst MX = 16;\nconst MY = 28;\nconst MR = 7;\n// The moon's seas: offset from its centre and squared radius.\nconst MARIA = [-2, -2, 4, 2, -3, 3, 1.5, 1.5, 4, -4.5, 1.5, 3];\n// The lighthouse: tower axis, the rows of its foot and its top, its lamp.\nconst TX = 52;\nconst T_BASE = 68;\nconst T_TOP = 32;\nconst LAMP_Y = 25;\n// One turn of the light at Time 1, in seconds, and where the turn starts:\n// at the opening Time it swings past us and out over the sea in the first\n// seconds.\nconst TURN = 24;\nconst BEAM0 = 3.06;\n// The fog bank breathes, rising and settling again, over this many seconds of Time 1.\nconst BREATH = 48;\nconst MAX_CLOUDS = 9;\n// The screen's two tones, light then dark.\nconst PALETTES = [\n  [\n    [255, 176, 32],\n    [18, 8, 0],\n  ],\n  [\n    [155, 188, 15],\n    [15, 56, 15],\n  ],\n  [\n    [255, 255, 255],\n    [0, 0, 0],\n  ],\n  [\n    [222, 214, 192],\n    [38, 38, 44],\n  ],\n  [\n    [178, 175, 166],\n    [50, 47, 40],\n  ],\n];\n// The only greys the screen draws, as shares of lit pixels: ordered dither\n// at these levels makes clean repeating patterns, as a one-bit artist would\n// pick them from a palette of fills.\nconst G1 = 1 / 16;\nconst G2 = 1 / 8;\nconst G3 = 1 / 4;\nconst G4 = 1 / 2;\n\nconst SKY = 0;\nconst SEA = 1;\nconst CLIFF = 2;\nconst TOWER = 3;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// The 8 x 8 Bayer matrix, as thresholds between 0 and 1, grown from the\n// 2 x 2 one: each step puts four copies side by side, scaled by 4 and offset\n// by 0, 2, 3 and 1.\nfunction bayer() {\n  let m = [0];\n  let n = 1;\n  while (n \u003c 8) {\n    const next = new Array(4 * n * n);\n    for (let y = 0; y \u003c n; y++)\n      for (let x = 0; x \u003c n; x++) {\n        const v = 4 * m[y * n + x];\n        next[y * 2 * n + x] = v;\n        next[y * 2 * n + x + n] = v + 2;\n        next[(y + n) * 2 * n + x] = v + 3;\n        next[(y + n) * 2 * n + x + n] = v + 1;\n      }\n    m = next;\n    n *= 2;\n  }\n  return Float32Array.from(m, (v) => (v + 0.5) / 64);\n}\n\nfunction cliffEdge(y) {\n  // The cliff's seaward face, from the lighthouse's ledge down to the water.\n  const u = (y - T_BASE) / (H - T_BASE);\n  return 42 - 10 * u * u + 1.8 * Math.sin(y * 0.55) + 1.1 * Math.sin(y * 1.7 + 1);\n}\n\nfunction towerHalf(y) {\n  return 4 + (1.5 * (y - T_TOP)) / (T_BASE - T_TOP);\n}\n\n// The still picture, as a grey for each pixel before dithering, and which\n// part of the scene each pixel belongs to.\nfunction drawScene(P) {\n  const { base, region } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let v = 0;\n      let part = SEA;\n      if (y \u003c HZ) {\n        part = SKY;\n        // Black overhead, the sky paling in three bands down to the horizon.\n        v = y >= HZ - 9 ? G3 : y >= HZ - 20 ? G2 : y >= HZ - 36 ? G1 : 0;\n        const dm = Math.sqrt((x - MX) ** 2 + (y - MY) ** 2);\n        if (dm \u003c MR) {\n          // The moon, its seas in half tone: Imbrium and Serenitatis up on\n          // the left and right, Tranquillitatis below, Procellarum down the edge.\n          let mare = false;\n          for (let m = 0; m \u003c MARIA.length; m += 3) if ((x - MX - MARIA[m]) ** 2 + (y - MY - MARIA[m + 1]) ** 2 \u003c MARIA[m + 2]) mare = true;\n          v = mare ? G4 : 1;\n        } else {\n          // A ring of haze round the moon, fading out in four fills.\n          const ring = dm - MR;\n          const halo = ring \u003c 2 ? G4 : ring \u003c 6 ? G3 : ring \u003c 12 ? G2 : ring \u003c 20 ? G1 : 0;\n          if (halo > v) v = halo;\n        }\n      } else if (y \u003c HZ + 5) v = G2;\n      const edge = cliffEdge(y);\n      if (y >= T_BASE && x >= edge) {\n        part = CLIFF;\n        // Black rock, its seaward rim and a few ledges catching the moon, and\n        // turf along the top.\n        // The face is shaded from the rim back into the dark in three fills.\n        const ledge = (y === 86 && x \u003c 50) || (y === 99 && x \u003c 46) || (y === 112 && x \u003c 43);\n        const back = x - edge;\n        v = back \u003c 1 || ledge || y === T_BASE ? 1 : y === T_BASE + 1 ? G4 : back \u003c 7 ? G3 : back \u003c 13 ? G2 : back \u003c 20 ? G1 : 0;\n      }\n      // The tower, lit from the moon on the left and in shadow on the right.\n      const hw = towerHalf(y);\n      if (y >= T_TOP && y \u003c T_BASE && Math.abs(x - TX) \u003c= hw) {\n        part = TOWER;\n        const u = (x - (TX - hw)) / (2 * hw);\n        v = u \u003c 0.45 ? 1 : u \u003c 0.65 ? G4 : u \u003c 0.82 ? G3 : 0;\n        // Two black bands.\n        if ((y >= 39 && y \u003c 44) || (y >= 53 && y \u003c 58)) v = u \u003c 0.3 ? G4 : 0;\n        // A door and two small windows.\n        if ((y >= T_BASE - 6 && Math.abs(x - TX + 1) \u003c= 1) || ((y === 48 || y === 49 || y === 35 || y === 36) && x === TX - 1)) v = 0;\n      }\n      // Gallery and rail, lantern room, roof and the ball on top.\n      if (y >= T_TOP - 3 && y \u003c T_TOP && Math.abs(x - TX) \u003c= 6) {\n        part = TOWER;\n        v = y === T_TOP - 1 || (x & 1) === 0 || Math.abs(x - TX) === 6 ? 1 : 0;\n      }\n      if (y >= LAMP_Y - 4 && y \u003c T_TOP - 3 && Math.abs(x - TX) \u003c= 3) {\n        part = TOWER;\n        v = Math.abs(x - TX) === 3 ? 0 : 1;\n      }\n      if (y >= LAMP_Y - 8 && y \u003c LAMP_Y - 4 && Math.abs(x - TX) \u003c= 4 - (y - LAMP_Y + 8)) {\n        part = TOWER;\n        v = x \u003c= TX ? 1 : G3;\n      }\n      if (y === LAMP_Y - 9 && x === TX) {\n        part = TOWER;\n        v = 1;\n      }\n      base[p] = v;\n      region[p] = part;\n    }\n  // Stars in the dark sky, a few of them twinkling.\n  P.stars = [];\n  for (let i = 0; i \u003c 70; i++) {\n    const x = Math.floor(hash(i, 21) * W);\n    const y = Math.floor(hash(i, 22) * 52);\n    const p = y * W + x;\n    if (region[p] !== SKY || base[p] > 0) continue;\n    P.stars.push(p, hash(i, 23) \u003c 0.4 ? 1 : 0);\n  }\n  // Clouds: each a row of three to five puffs, long and low like the clouds\n  // over a sea at night, on its own height and pace.\n  P.clouds = [];\n  for (let i = 0; i \u003c MAX_CLOUDS; i++) {\n    const puffs = [];\n    const n = 3 + Math.floor(hash(i, 31) * 3);\n    let dx = 0;\n    for (let j = 0; j \u003c n; j++) {\n      const rx = 4 + 5 * hash(i * 7 + j, 32);\n      puffs.push(dx, -2.2 * hash(i * 7 + j, 33) * (j > 0 && j \u003c n - 1 ? 1 : 0.3), rx, 1.6 + 1.6 * hash(i * 7 + j, 34));\n      dx += rx * 1.1;\n    }\n    P.clouds.push({ x: hash(i, 35) * (W + 40), y: 8 + ((i * 23) % 9) * 6 + 3 * hash(i, 36), len: dx, pace: 0.7 + 0.4 * hash(i, 37), puffs });\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.base = new Float32Array(N);\n  P.region = new Uint8Array(N);\n  P.level = new Float32Array(N);\n  P.cloud = new Uint8Array(N);\n  P.bayer = bayer();\n  drawScene(P);\n  Object.assign(P, { t: 0, sail: 0, started: false, palette: 0, fogK: 0, wind: 0.06 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.palette = clamp(Math.floor(k[0] * PALETTES.length), 0, PALETTES.length - 1);\n  const time = clamp(k[1], 0.05, 4);\n  P.fogK = clamp(k[2], 0, 1);\n  P.wind = clamp(k[3], 0, 1);\n  // The clouds sail faster in a wind.\n  const gust = 1 + 1.5 * P.wind;\n  if (!P.started) {\n    // The night is a few seconds on when the screen comes up, as far as Time takes it.\n    P.started = true;\n    P.t = 6 * time;\n    P.sail = 6 * time * gust;\n  }\n  P.t += dt * time;\n  P.sail += dt * time * gust;\n}\n\n// Mark where the clouds are this frame: 1 inside, 2 on a top edge.\nfunction placeClouds(P) {\n  const { cloud } = P;\n  cloud.fill(0);\n  // More clouds, and bigger, as the wind rises, until the deck closes.\n  const count = 4 + Math.round(5 * P.wind);\n  const grow = 1 + 1.2 * P.wind;\n  for (let i = 0; i \u003c count; i++) {\n    const c = P.clouds[i];\n    const span = W + c.len * grow + 16;\n    const x0 = ((((c.x + P.sail * c.pace) % span) + span) % span) - c.len * grow - 8;\n    const pf = c.puffs;\n    for (let j = 0; j \u003c pf.length; j += 4) {\n      const cx = x0 + pf[j] * grow;\n      const cy = c.y + pf[j + 1];\n      const rx = pf[j + 2] * grow;\n      const ry = pf[j + 3] * (1 + 0.8 * P.wind);\n      const ya = Math.max(0, Math.floor(cy - ry));\n      const yb = Math.min(HZ - 1, Math.ceil(cy + ry));\n      for (let y = ya; y \u003c= yb; y++) {\n        const u = (y - cy) / ry;\n        const w = rx * Math.sqrt(Math.max(0, 1 - u * u));\n        const xa = Math.max(0, Math.ceil(cx - w));\n        const xb = Math.min(W - 1, Math.floor(cx + w));\n        for (let x = xa; x \u003c= xb; x++) cloud[y * W + x] = 1;\n      }\n    }\n  }\n  for (let p = W; p \u003c HZ * W; p++) if (cloud[p] && !cloud[p - W]) cloud[p] = 2;\n}\n\n// The grey of every pixel this frame: the still scene, the clouds, the\n// turning beam, the water's glitter and the fog.\nfunction compose(P) {\n  const { base, region, level, cloud } = P;\n  const t = P.t;\n  placeClouds(P);\n  // The fog bank: its lumpy top slides left at half a pixel a second of Time\n  // 1, and the bank rises and settles as it breathes.\n  const breath = Math.sin((t / BREATH) * Math.PI * 2);\n  const fogTop = HZ - 3 - 42 * P.fogK - 4 * breath;\n  const fogLow = HZ + 12 + 30 * P.fogK + 3 * breath;\n  const fx = t * 0.5;\n  // The beam: the light turns once in TURN seconds of Time 1; on screen it\n  // is a fan whose length is the turning light's sideways reach.\n  const a = (t / TURN) * Math.PI * 2 + BEAM0;\n  const side = Math.cos(a);\n  const toward = Math.sin(a);\n  const reach = Math.abs(side) * 70;\n  const dir = side > 0 ? 1 : -1;\n  // The lantern flares as the light swings past us.\n  const flare = toward > 0 ? Math.pow(toward, 16) : 0;\n  for (let x = 0; x \u003c W; x++) {\n    const xs = x + fx;\n    const top = fogTop - 2.5 * (Math.sin(xs * 0.21 + 0.7) + 0.6 * Math.sin(xs * 0.47 + 2.1));\n    const along = (x - TX) * dir;\n    const lit = along > 3 && along \u003c reach;\n    const spread = 1.5 + along * 0.13;\n    const mid = LAMP_Y + along * 0.05;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      const part = region[p];\n      let v = base[p];\n      if (part === SKY) {\n        const c = cloud[p];\n        if (c) {\n          // A cloud near the moon is lit through; its top edge catches the light.\n          const dm = (x - MX) ** 2 + (y - MY) ** 2;\n          v = c === 2 ? (dm \u003c 500 ? 1 : G4) : dm \u003c 120 ? G4 : G3;\n        }\n        // The beam crosses the sky in front of the clouds.\n        if (lit) {\n          const off = Math.abs(y - mid) / spread;\n          if (off \u003c 1) {\n            const fall = along / reach;\n            const g = fall \u003c 0.35 ? G4 : fall \u003c 0.7 ? G3 : G2;\n            const b = off \u003c 0.35 ? (g === G4 ? 0.75 : g * 2) : g;\n            if (b > v) v = b;\n          }\n        }\n      } else if (part === SEA) {\n        // The water in level wavelets on every other row, thicker toward us,\n        // each row sliding slowly the other way from the next. Under the\n        // moon they crowd into a path of light.\n        const depth = (y - HZ) / (H - HZ);\n        const half = 2 + 14 * depth;\n        const g = Math.max(0, 1 - Math.abs(x - MX) / half);\n        const row = y - HZ;\n        const seg = Math.floor((x + 40 + t * (0.5 + 0.6 * hash(y, 5)) * ((row >> 1) & 1 ? 1 : -1)) / (3 + 4 * depth));\n        // In the path of light each wavelet also winks on and off as it catches the moon.\n        const wink = g > 0 ? 0.35 * g * (hash(seg * 3 + y, Math.floor(t * 0.6 + hash(seg, y + 7) * 9)) - 0.5) : 0;\n        const dash = hash(seg, y) - wink;\n        // A wind raises whitecaps between the rows.\n        const chop = P.wind;\n        if (row & 1 ? dash \u003c 0.1 + 0.32 * depth + 0.6 * g * g + 0.3 * chop : (g > 0.4 && dash \u003c 0.5 * g * g) || dash > 1 - 0.3 * chop * depth) v = 1;\n        // Surf at the foot of the cliff, climbing higher in a wind.\n        const foam = cliffEdge(y) - x;\n        if (y > 106 - 22 * chop && foam \u003c 2.5 + 5 * chop && Math.sin(y * 1.3 + t * 0.7) > 0.3 - foam * 0.3) v = 1;\n      }\n      // The lantern flares when the light faces us.\n      if (flare > 0.02) {\n        const d2 = (x - TX) ** 2 + (y - LAMP_Y) ** 2;\n        const f = flare * Math.exp(-d2 / 50);\n        if (f > G2 && f > v) v = f > 0.6 ? 1 : f > 0.3 ? G4 : G3;\n      }\n      // Fog in front of everything from its top down to its foot: half grey\n      // where the moon lights its upper layer, a quarter below, thinning out.\n      if (y >= top && y \u003c fogLow + 6) {\n        const f = y \u003c top + 9 ? G4 : y \u003c fogLow ? G3 : G2;\n        v = v > G4 ? G4 : f > v ? f : v;\n      }\n      level[p] = v;\n    }\n  }\n  // Stars, and the twinkling ones going out for a moment now and then.\n  const stars = P.stars;\n  for (let i = 0; i \u003c stars.length; i += 2) {\n    const p = stars[i];\n    if (level[p] > 0) continue;\n    if (!stars[i + 1] || hash(p, Math.floor(t * 1.3)) > 0.15) level[p] = 1;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.base) return;\n  compose(P);\n  const { level, bayer } = P;\n  const [light, dark] = PALETTES[P.palette];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const on = level[y * W + x] > bayer[((y & 7) \u003c\u003c 3) | (x & 7)];\n      const c = on ? light : dark;\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..1, Time=0.2..3, Fog=0..1, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":1,"about":"The screen's two tones: an amber terminal, a Game Boy's greens, a Macintosh's black and white, e-ink on warm paper, and a Playdate's grey on silver."},{"name":"Time","min":0.2,"max":3,"about":"How fast the night goes by: at 2 the beam turns once in 12 seconds and a cloud takes 40 to 60 seconds to cross; at 0.2 the picture all but stands still."},{"name":"Fog","min":0,"max":1,"about":"How much fog lies on the sea: at 0 a low bank breathes along the horizon; turned up, it rolls in and climbs the cliff until only the gallery and the lantern stand clear."},{"name":"Wind","min":0,"max":1,"about":"At 0 a still night, four small clouds in a sky full of stars and a calm sea; turned up, nine clouds twice as long race over and hide the moon, whitecaps break between the wavelets and the surf climbs the cliff."}],"start":[0,2,0,0.06],"measures":{"motion":0.0337,"detail":0.3203,"edges":1,"complexity":0.0918,"coverage":0.242,"colour":0.3801,"drift":0.0416},"knobResponse":[0.2143,0.057,0.0812,0.0548]},{"slug":"op-stripes","title":"Op Stripes","family":"wave","round":1,"note":"브리짓 라일리 식의 두 색 가로줄이에요. 밑으로 지나가는 넓은 부풂 둘이 줄 간격을 벌려서 평평한 패널이 부푸는 것처럼 보여요.","idea":"Flat stripes in two colours open wider wherever a slow bulge passes under them, the trick Bridget Riley painted by hand, so a flat panel seems to swell towards you.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Op Stripes\n// Family:  wave\n// Idea:    Flat stripes in two colours open wider wherever a slow bulge passes under them, the trick Bridget Riley painted by hand, so a flat panel seems to swell towards you.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Drift=0.1..6, Stripes=14..26, Swell=0..1\n//\n// Knob 1: Hue. Turns the stripe pair around the colour wheel; the second stripe is a deep colour from across the wheel, and goes black where that would be brown.\n// Knob 2: Drift. How fast the bulges travel under the stripes and the bend rolls along them.\n// Knob 3: Stripes. Stripe pairs from top to bottom where nothing is swelling.\n// Knob 4: Swell. How far the stripes open over a bulge, from a soft swell to a wide flat lens.\n\nconst W = 64;\nconst H = 128;\nconst BULGES = 2;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.gx = new Float32Array(BULGES * W);\n  p.gy = new Float32Array(BULGES * H);\n  p.cx = new Float32Array(BULGES);\n  p.cy = new Float32Array(BULGES);\n  p.u = new Float32Array(H);\n  p.col = new Float32Array(6);\n  // Each bulge has its own pace, size and lane. sy runs along its path down\n  // the panel, sx across it.\n  p.speed = new Float32Array([1, 0.62]);\n  p.sx = new Float32Array([36, 22]);\n  p.sy = new Float32Array([24, 17]);\n  p.bend = new Float32Array(W);\n  // Each phase wraps on its own, so a long run keeps its precision.\n  p.along = new Float32Array([0, 99]);\n  p.lanePhase = new Float32Array([0.4, 3.3]);\n  p.roll = 0;\n  p.hue = -1;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 14, 0.06];\n  p.pairs = k[2];\n  p.depth = 0.5 + 0.42 * k[3];\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    hsv(0.96 + p.hue, 0.72, 1, p.col, 0);\n    // The partner sits across the wheel, deep and dark. A dark orange or\n    // yellow is brown or olive, so over that stretch it sinks to black.\n    let hb = 0.53 + p.hue;\n    hb -= Math.floor(hb);\n    const d = Math.abs(hb - 0.16) / 0.16;\n    const m = d >= 1 ? 1 : d * d * (3 - 2 * d);\n    hsv(hb, 1, 0.36 * m, p.col, 3);\n  }\n  const go = dt * k[1];\n\n  // The stripes lie across the 64 LEDs and stack up the 128, so a bulge has\n  // the long side of the panel to open in. The bulges travel down the panel\n  // and come round again, each drifting from side to side in its own lane.\n  const span = H + 70;\n  for (let i = 0; i \u003c BULGES; i++) {\n    const s = p.speed[i];\n    p.along[i] = (p.along[i] + go * 0.75 * s) % span;\n    p.lanePhase[i] = (p.lanePhase[i] + go * 0.06 * s) % (Math.PI * 2);\n    p.cy[i] = p.along[i] - 35;\n    p.cx[i] = W / 2 + Math.sin(p.lanePhase[i]) * 20;\n    const sx = p.sx[i];\n    const sy = p.sy[i];\n    for (let x = 0; x \u003c W; x++) {\n      const d = (x + 0.5 - p.cx[i]) / sx;\n      p.gx[i * W + x] = Math.exp(-d * d);\n    }\n    for (let y = 0; y \u003c H; y++) {\n      const d = (y + 0.5 - p.cy[i]) / sy;\n      p.gy[i * H + y] = Math.exp(-d * d);\n    }\n  }\n  // Every stripe follows the same slow bend across the panel.\n  p.roll = (p.roll + go * 0.14) % (Math.PI * 2);\n  for (let x = 0; x \u003c W; x++) p.bend[x] = 2.6 * Math.sin(((x + 0.5) / W) * Math.PI * 2 - p.roll);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const u = p.u;\n  const D = p.depth;\n  const period = H / p.pairs;\n  const a = p.col;\n  for (let x = 0; x \u003c W; x++) {\n    // Walk the column adding up stripe phase; over a bulge the phase climbs\n    // slower, so the stripes there are wider. It never runs backwards, so a\n    // stripe never folds over itself.\n    let sum = 0;\n    for (let y = 0; y \u003c H; y++) {\n      let keep = 1;\n      for (let i = 0; i \u003c BULGES; i++) keep *= 1 - p.gx[i * W + x] * p.gy[i * H + y];\n      const rho = 1 - D * (1 - keep);\n      u[y] = sum + rho * 0.5;\n      sum += rho;\n    }\n    // Centre the column so a swelling column opens out both ways.\n    const shift = -sum / 2;\n    for (let y = 0; y \u003c H; y++) {\n      const s = Math.floor(((u[y] + shift + p.bend[x]) * 2) / period);\n      const o = (s & 1) * 3;\n      display.setPixel(x, y, a[o], a[o + 1], a[o + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-op-stripes","type":"code","name":"op-stripes","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Op Stripes\n// Family:  wave\n// Idea:    Flat stripes in two colours open wider wherever a slow bulge passes under them, the trick Bridget Riley painted by hand, so a flat panel seems to swell towards you.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Drift=0.1..6, Stripes=14..26, Swell=0..1\n//\n// Knob 1: Hue. Turns the stripe pair around the colour wheel; the second stripe is a deep colour from across the wheel, and goes black where that would be brown.\n// Knob 2: Drift. How fast the bulges travel under the stripes and the bend rolls along them.\n// Knob 3: Stripes. Stripe pairs from top to bottom where nothing is swelling.\n// Knob 4: Swell. How far the stripes open over a bulge, from a soft swell to a wide flat lens.\n\nconst W = 64;\nconst H = 128;\nconst BULGES = 2;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nexport function setup(params) {\n  const p = params;\n  p.gx = new Float32Array(BULGES * W);\n  p.gy = new Float32Array(BULGES * H);\n  p.cx = new Float32Array(BULGES);\n  p.cy = new Float32Array(BULGES);\n  p.u = new Float32Array(H);\n  p.col = new Float32Array(6);\n  // Each bulge has its own pace, size and lane. sy runs along its path down\n  // the panel, sx across it.\n  p.speed = new Float32Array([1, 0.62]);\n  p.sx = new Float32Array([36, 22]);\n  p.sy = new Float32Array([24, 17]);\n  p.bend = new Float32Array(W);\n  // Each phase wraps on its own, so a long run keeps its precision.\n  p.along = new Float32Array([0, 99]);\n  p.lanePhase = new Float32Array([0.4, 3.3]);\n  p.roll = 0;\n  p.hue = -1;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 14, 0.06];\n  p.pairs = k[2];\n  p.depth = 0.5 + 0.42 * k[3];\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    hsv(0.96 + p.hue, 0.72, 1, p.col, 0);\n    // The partner sits across the wheel, deep and dark. A dark orange or\n    // yellow is brown or olive, so over that stretch it sinks to black.\n    let hb = 0.53 + p.hue;\n    hb -= Math.floor(hb);\n    const d = Math.abs(hb - 0.16) / 0.16;\n    const m = d >= 1 ? 1 : d * d * (3 - 2 * d);\n    hsv(hb, 1, 0.36 * m, p.col, 3);\n  }\n  const go = dt * k[1];\n\n  // The stripes lie across the 64 LEDs and stack up the 128, so a bulge has\n  // the long side of the panel to open in. The bulges travel down the panel\n  // and come round again, each drifting from side to side in its own lane.\n  const span = H + 70;\n  for (let i = 0; i \u003c BULGES; i++) {\n    const s = p.speed[i];\n    p.along[i] = (p.along[i] + go * 0.75 * s) % span;\n    p.lanePhase[i] = (p.lanePhase[i] + go * 0.06 * s) % (Math.PI * 2);\n    p.cy[i] = p.along[i] - 35;\n    p.cx[i] = W / 2 + Math.sin(p.lanePhase[i]) * 20;\n    const sx = p.sx[i];\n    const sy = p.sy[i];\n    for (let x = 0; x \u003c W; x++) {\n      const d = (x + 0.5 - p.cx[i]) / sx;\n      p.gx[i * W + x] = Math.exp(-d * d);\n    }\n    for (let y = 0; y \u003c H; y++) {\n      const d = (y + 0.5 - p.cy[i]) / sy;\n      p.gy[i * H + y] = Math.exp(-d * d);\n    }\n  }\n  // Every stripe follows the same slow bend across the panel.\n  p.roll = (p.roll + go * 0.14) % (Math.PI * 2);\n  for (let x = 0; x \u003c W; x++) p.bend[x] = 2.6 * Math.sin(((x + 0.5) / W) * Math.PI * 2 - p.roll);\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const u = p.u;\n  const D = p.depth;\n  const period = H / p.pairs;\n  const a = p.col;\n  for (let x = 0; x \u003c W; x++) {\n    // Walk the column adding up stripe phase; over a bulge the phase climbs\n    // slower, so the stripes there are wider. It never runs backwards, so a\n    // stripe never folds over itself.\n    let sum = 0;\n    for (let y = 0; y \u003c H; y++) {\n      let keep = 1;\n      for (let i = 0; i \u003c BULGES; i++) keep *= 1 - p.gx[i * W + x] * p.gy[i * H + y];\n      const rho = 1 - D * (1 - keep);\n      u[y] = sum + rho * 0.5;\n      sum += rho;\n    }\n    // Centre the column so a swelling column opens out both ways.\n    const shift = -sum / 2;\n    for (let y = 0; y \u003c H; y++) {\n      const s = Math.floor(((u[y] + shift + p.bend[x]) * 2) / period);\n      const o = (s & 1) * 3;\n      display.setPixel(x, y, a[o], a[o + 1], a[o + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Drift=0.1..6, Stripes=14..26, Swell=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the stripe pair around the colour wheel; the second stripe is a deep colour from across the wheel, and goes black where that would be brown."},{"name":"Drift","min":0.1,"max":6,"about":"How fast the bulges travel under the stripes and the bend rolls along them."},{"name":"Stripes","min":14,"max":26,"about":"Stripe pairs from top to bottom where nothing is swelling."},{"name":"Swell","min":0,"max":1,"about":"How far the stripes open over a bulge, from a soft swell to a wide flat lens."}],"start":[0,2,14,0.06],"measures":{"motion":0.0622,"detail":0.0792,"edges":1,"complexity":0.0654,"coverage":1,"colour":0.6118,"drift":0.0499},"knobResponse":[0.4596,0.1655,0.1894,0.1993]},{"slug":"pancakes","title":"Pancakes","family":"kitchen","round":21,"note":"길든 철판을 위에서 내려다봐요. 국자로 부은 반죽이 퍼지고 기포가 올라와 터지며 구멍을 남기는 동안, 뒤집개가 하나씩 뒤집어 노릇한 면을 보이고 다 익은 것을 숯색 접시에 쌓아요. K1 을 누르면 가장 많이 익은 것부터 바로 뒤집거나 접시로 옮겨요.","idea":"A seasoned griddle seen from above: batter is ladled into rounds, bubbles rise and pop and leave holes as the tops set, a turner flips each one to its fried side and slides the done ones onto a stack on the plate, while butter melts and oil glints on the iron.","buttons":"K1 tap sends the turner to the pancake furthest along, to flip it or serve it now.","code":"// ===== Patternflow pattern =====\n// Title:   Pancakes\n// Family:  kitchen\n// Idea:    A seasoned griddle seen from above: batter is ladled into rounds, bubbles rise and pop and leave holes as the tops set, a turner flips each one to its fried side and slides the done ones onto a stack on the plate, while butter melts and oil glints on the iron.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the flat-top griddles of diner breakfast counters\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Batter=0..1, Speed=0.2..3, Pancakes=6..12, Heat=0..1\n//\n// Knob 1: Batter. Buttermilk at 0, then blueberry, buckwheat and cocoa at 1; the bowl changes at once and the next rounds are poured from it.\n// Knob 2: Speed. How fast the cook works: at 2 a pancake takes about 20 s from the ladle to the plate, and the turner flips or serves one every two seconds.\n// Knob 3: Pancakes. How many rounds are on the iron: six big ones at 6, twelve silver dollars at 12, and still one turner for all of them.\n// Knob 4: Heat. How hot the griddle runs. At the low end the pancakes come out golden; turned up they cook faster, bubble more, fry dark brown and the oil starts to smoke.\n// Buttons: K1 tap sends the turner to the pancake furthest along, to flip it or serve it now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Rows: the iron IR0..IR1, the grease trough, the butcher block from CT.\nconst [IR0, IR1, CT] = [3, 90, 94];\nconst [PX, PY, PR, BX, BY, BR] = [42, 112, 16.5, 7, 114, 12.5];\nconst [EMPTY, POUR, SIDE1, FLIP, SIDE2, SERVE] = [0, 1, 2, 3, 4, 5];\n// Pancakes to a full plate; how long the turner takes to get anywhere.\nconst [FULL, GO] = [7, 0.3];\nconst { min, max, floor, round, ceil, sin, cos, abs, hypot, exp, atan2, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = sm(x - xi), v = sm(y - yi), a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(xi + 1, yi + 1)) * u * v;\n}\n\n// Each batter: the wet top, the set top, the inside a popped bubble shows,\n// and the fried side from pale through golden to dark.\nconst BAT = [\n  [[228, 212, 166], [222, 196, 142], [64, 38, 18], [232, 194, 124], [206, 138, 66], [118, 60, 24]],\n  [[226, 212, 172], [218, 196, 148], [62, 38, 22], [228, 190, 126], [202, 134, 68], [114, 58, 26]],\n  [[196, 170, 142], [182, 152, 120], [52, 34, 24], [188, 148, 108], [150, 98, 58], [84, 46, 28]],\n  [[140, 92, 64], [124, 80, 54], [40, 24, 16], [130, 82, 54], [100, 58, 36], [68, 36, 22]],\n];\n// A blueberry's skin, raw and baked.\nconst BERRY = [[64, 40, 118], [50, 28, 70]];\nconst C = [0, 0, 0];\nfunction fry(bt, b) {\n  b = cl(b, 0, 1);\n  const lo = b \u003c 0.5, a = lo ? bt[3] : bt[4], c = lo ? bt[4] : bt[5], t = lo ? b * 2 : b * 2 - 1;\n  for (let i = 0; i \u003c 3; i++) C[i] = a[i] + (c[i] - a[i]) * t;\n}\n\nlet B;\nconst at = (x, y) => (x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, r, g, b, o = at(x, y)) {\n  if (o >= 0) (B[o] = r), (B[o + 1] = g), (B[o + 2] = b);\n}\nfunction blend(x, y, r, g, b, a, o = at(x, y)) {\n  if (o >= 0) (B[o] += (r - B[o]) * a), (B[o + 1] += (g - B[o + 1]) * a), (B[o + 2] += (b - B[o + 2]) * a);\n}\nfunction dim(x, y, k, o = at(x, y)) {\n  if (o >= 0) (B[o] *= k), (B[o + 1] *= k), (B[o + 2] *= k);\n}\n\n// Marks that should read sharp (holes, flecks, pores, glints) sit on the\n// squares the grain in show() pushes their way: dark ones where x + y is\n// even, bright ones where it is odd. Two such squares never touch side by side.\nfunction build(P) {\n  const bg = P.bg, mk = new Uint8Array(N);\n  const set = (p, r, g, b) => ((bg[p * 3] = r), (bg[p * 3 + 1] = g), (bg[p * 3 + 2] = b));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, odd = (x + y) & 1;\n    let k;\n    P.G[p] = hash(x + 77, y + 5) \u003c 0.5 ? 0.94 : 1.06;\n    if (y \u003c IR0) (k = 0.82 + 0.08 * vn(x * 0.3, y)), set(p, 170 * k, 172 * k, 178 * k);\n    else if (y \u003c= IR1) {\n      // Seasoning in bronze patches, and crumbs of old batter.\n      const s = vn(x * 0.08, y * 0.06) * 0.6 + vn(x * 0.21 + 9, y * 0.19) * 0.4;\n      k = 0.84 + 0.32 * s;\n      if (odd && rnd() \u003c 0.024) set(p, 196, 140, 70), (mk[p] = 1);\n      else set(p, (52 + 10 * s) * k, 44 * k, 39 * k);\n    } else if (y === IR1 + 1) (k = 0.92 + 0.06 * vn(x * 0.5, 1)), set(p, 200 * k, 200 * k, 204 * k);\n    else if (y === IR1 + 2) (k = 0.85 + 0.2 * vn(x * 0.25, 3)), set(p, 96 * k, 64 * k, 26 * k);\n    else if (y \u003c CT) set(p, 180, 180, 186);\n    else {\n      // Oak strips seven LEDs wide, told apart by hue more than by light,\n      // with dark pores along the grain.\n      const s = floor((x + 2) / 7), t = hash(s, 5);\n      const v = vn(x * 0.4 + s * 13, y * 0.09);\n      k = !odd && rnd() \u003c 0.12 ? 0.27 : 1;\n      set(p, (176 + 4 * v) * k, (100 + 26 * t + 20 * v) * k, (56 + 20 * t + 14 * v) * k);\n    }\n  }\n  // The hood lights' reflection, and oil specks catching it.\n  for (let p = IR0 * W; p \u003c= IR1 * W + 63; p++) {\n    const x = p & 63, y = p >> 6;\n    P.sheen[p] = exp(-(((x - 20) / 17) ** 2) - ((y - 30) / 11) ** 2) + 0.8 * exp(-(((x - 44) / 15) ** 2) - ((y - 68) / 12) ** 2);\n  }\n  P.glint = [];\n  for (let p = (IR0 + 1) * W; p \u003c IR1 * W; p++) if (!mk[p] && (p + (p >> 6)) & 1 && rnd() \u003c 0.12) P.glint.push(p, rnd() * 7, 1.5 + rnd() * 3);\n  // A white enamel bowl with a navy rolled rim; its batter follows K1.\n  P.bowl = [];\n  for (let y = BY - 16; y \u003c H; y++)\n    for (let x = 0; x \u003c= BX + 16; x++) {\n      const p = y * W + x, dx = x - BX, dy = y - BY, d = hypot(dx, dy);\n      let k;\n      if (d > BR + 3) continue;\n      if (d > BR) dx + dy > 0 && ((k = 0.9 + 0.033 * (d - BR)), set(p, bg[p * 3] * k, bg[p * 3 + 1] * k, bg[p * 3 + 2] * k));\n      else if (d > BR - 1.6) (k = 0.85 + 0.2 * cos(atan2(dy, dx) + 2.3)), set(p, 26 * k, 38 * k, 88 * k);\n      else P.bowl.push(p, !((x + y) & 1) && hash(x + 3, y) \u003c 0.12 ? -1 : 0.97 - 0.08 * sm((d - BR + 7) / 5));\n    }\n  // Charcoal stoneware: a raised rim that catches the light, the well, cream\n  // flecks in the glaze, and its shadow on the wood (a negative entry).\n  P.plate = [];\n  for (let dy = -20; dy \u003c= 20; dy++)\n    for (let dx = -20; dx \u003c= 20; dx++) {\n      const d = hypot(dx, dy), k = mix(0.86, 0.98 + 0.1 * cos(atan2(dy, dx) + 2.4), cl((d - PR + 6.5) / 4, 0, 1));\n      if (d > PR + 3 || (d > PR && dx + dy \u003c= 0)) continue;\n      if (d > PR) P.plate.push(dx, dy, -0.9 - 0.033 * (d - PR), 0, 0);\n      else if ((dx + dy) & 1 && hash(dx + 40, dy + 40) \u003c 0.1) P.plate.push(dx, dy, 206, 198, 178);\n      else P.plate.push(dx, dy, 66 * k, 72 * k, 86 * k);\n    }\n}\n\nfunction layout(P, n) {\n  const cols = n \u003c= 8 ? 2 : 3, rows = ceil(n / cols), cw = W / cols, ch = (IR1 - IR0 - 1) / rows, R = min(cw, ch) / 2 - 1.6;\n  if (P.carry) P.stack.push(P.carry), (P.carry = null);\n  P.n = n;\n  P.slots = Array.from({ length: n }, (_, i) => {\n    const x = round(((i % cols) + 0.5) * cw + (rnd() - 0.5) * 2), y = round(IR0 + 1 + (floor(i / cols) + 0.5) * ch + (rnd() - 0.5) * 2);\n    return { x, y: y + ((x + y) & 1), R, st: EMPTY, t: rnd(), melt: 0.8 + rnd() * 0.6, p: 0, cake: null };\n  });\n  P.sp.job = P.ld.job = null;\n}\n\n// A fresh round: its wobbly outline, the shine, where bubbles will come up,\n// the flecks the iron leaves on the fried side, berries.\nfunction newCake(P, s) {\n  const R = s.R, h = ceil(R * 1.08) + 1, sz = 2 * h + 1, n = sz * sz, F = () => new Float32Array(n);\n  const k = { bi: P.bi, R, h, sz, b: 0, ox: 0, oy: 0, S1: P.S1 * (0.55 + (0.45 * R) / 12.7), dd: F(), site: F(), mot: F(), hl: F(), spk: new Uint8Array(n) };\n  const [a1, a2, m0, dens] = [rnd() * 7, rnd() * 7, rnd() * 50, 0.6 + 0.25 * P.heat];\n  for (let j = -h, q = 0; j \u003c= h; j++)\n    for (let i = -h; i \u003c= h; i++, q++) {\n      const a = atan2(j, i), d = (k.dd[q] = hypot(i, j) / (R * (1 + 0.035 * sin(3 * a + a1) + 0.025 * sin(5 * a + a2))));\n      k.mot[q] = vn(i * 0.24 + m0, j * 0.24);\n      k.hl[q] = 14 * exp(-((i / R + 0.3) ** 2 + (j / R + 0.38) ** 2) * 7);\n      // Bubbles never touch even at the corners, so they never run into lines.\n      const free = (m) => j === -h || (!m[q - sz - 1] && !m[q - sz + 1]);\n      if ((i + j) & 1) continue;\n      if (P.bi === 1 && rnd() \u003c 0.07) k.spk[q] = 2;\n      else {\n        if (d \u003c 0.97 && rnd() \u003c dens && free(k.site)) k.site[q] = 0.12 + 0.88 * rnd() ** 0.6;\n        if (rnd() \u003c 0.85 * sm((k.mot[q] - 0.36) / 0.36)) k.spk[q] = 1;\n      }\n    }\n  return k;\n}\n\n// One pancake at (cx, cy), raw top or fried side up, squashed to sy as it\n// turns over and spread to rs while poured.\nfunction cake(P, k, cx, cy, sx, sy, fried, p, rs = 1, lit = 1) {\n  if (abs(sy) \u003c 0.05) return;\n  const bt = BAT[k.bi], [wet0, set0, hole] = bt, { h, sz, dd, site, spk, mot, hl, S1 } = k;\n  const ex = h * abs(sx) + 1, ey = h * abs(sy) + 1, setR = 1.02 - 1.1 * p, rim = cl(p * 1.5, 0, 1);\n  fry(bt, k.b);\n  const [fr, fg, fb] = C;\n  for (let y = max(0, floor(cy - ey)); y \u003c= min(H - 1, ceil(cy + ey)); y++)\n    for (let x = max(0, floor(cx - ex)); x \u003c= min(W - 1, ceil(cx + ex)); x++) {\n      const i = round((x - cx) / sx), j = round((y - cy) / sy);\n      if (i \u003c -h || i > h || j \u003c -h || j > h) continue;\n      const q = (j + h) * sz + i + h, d = dd[q] / rs;\n      if (d > 1) continue;\n      let r, g, b;\n      if (!fried) {\n        // Wet batter shines; it sets from the rim in, and the rim shows the\n        // browning underneath.\n        const wet = sm((setR - d) / 0.14 + 0.5), dome = 1.02 - 0.06 * d * d, gl = wet * hl[q], e = sm((d - 0.8) / 0.2) * rim;\n        r = mix(mix(set0[0], wet0[0], wet) * dome + gl, fr, e);\n        g = mix(mix(set0[1], wet0[1], wet) * dome + gl, fg, e);\n        b = mix(mix(set0[2], wet0[2], wet) * dome + gl * 0.8, fb, e);\n        const tb = site[q];\n        if (tb && p > tb) {\n          // A bubble shines for a moment and pops. Where the batter is still\n          // wet the hole closes again; where it has set it stays open.\n          const age = (p - tb) * S1;\n          if (age \u003c 0.3) (r = mix(r, 255, 0.5)), (g = mix(g, 250, 0.5)), (b = mix(b, 236, 0.5));\n          else {\n            const o = d \u003c 1.02 - 1.1 * (tb + 0.3 / S1) ? 1 - cl((age - 0.3) / 0.5, 0, 1) : 1;\n            (r = mix(r, hole[0], o)), (g = mix(g, hole[1], o)), (b = mix(b, hole[2], o));\n          }\n        }\n      } else {\n        // Browner in the middle, mottled, flecked, and pale round the edge.\n        const f = spk[q] === 1, e = sm((d - 0.88) / 0.12), s = f ? 0.45 : 1;\n        fry(bt, k.b * (1.12 - 0.42 * sm((d - 0.5) / 0.5)) * (0.86 + 0.28 * mot[q]) + (f ? 0.55 : 0));\n        r = mix(C[0] * s, set0[0] * 0.9, e);\n        g = mix(C[1] * s, set0[1] * 0.9, e);\n        b = mix(C[2] * s, set0[2] * 0.9, e);\n      }\n      if (spk[q] === 2) [r, g, b] = BERRY[fried];\n      put(x, y, r * lit, g * lit, b * lit);\n    }\n}\n\n// A small offset that keeps a pancake's flecks on the grain's dark squares.\nconst jig = (o = floor(rnd() * 3) - 1) => [o, o ? (rnd() \u003c 0.5 ? -1 : 1) : 0];\n\n// Shadows fade over three LEDs so their edge stays soft under the grain.\nfunction shadow(cx, cy, R, k) {\n  for (let y = floor(cy - R - 2); y \u003c= cy + R + 2; y++)\n    for (let x = floor(cx - R - 2); x \u003c= cx + R + 2; x++) {\n      const e = sm((hypot(x - cx, y - cy) - R + 1.5) / 3);\n      if (e \u003c 1) dim(x, y, k + (1 - k) * e);\n    }\n}\n\nexport function setup(params) {\n  const P = params, F = (n = N) => new Float32Array(n);\n  Object.assign(P, { bg: F(N * 3), buf: F(N * 3), G: F(), sheen: F(), t: 0, n: 0, stack: [], carry: null, pat: -1, pdx: 0, pdy: 0, pst: 0, spat: [], steam: [] });\n  [P.sp, P.ld] = [{ x: 70, y: 140, ph: 0, t: 0, idle: 0 }, { x: 11, y: 110, ph: 3, t: 0 }];\n  build(P);\n}\n\nconst brown = (P) => 0.36 + 0.5 * P.heat;\n\n// Open on a morning under way: some on each side, a stack started, then the\n// cook's clock runs on a while at the knob's speed.\nfunction warm(P) {\n  const S = [...P.slots].sort(() => rnd() - 0.5);\n  S.forEach((s, i) => {\n    const f = (i + 0.5) / S.length;\n    if (f \u003c 0.12) return;\n    s.cake = newCake(P, s);\n    if (f \u003c 0.6) (s.st = SIDE1), (s.t = ((f - 0.12) / 0.48) * s.cake.S1 * 0.95);\n    else (s.st = SIDE2), (s.t = (f - 0.6) * 9), (s.cake.b = brown(P));\n  });\n  for (let i = 0, n = 3 + floor(rnd() * 2); i \u003c n; i++) {\n    const k = newCake(P, { R: P.slots[0].R });\n    [k.b, k.ox, k.oy] = [brown(P), ...jig()];\n    P.stack.push(k);\n  }\n  for (let i = 0, n = round(6 * P.rate * 30); i \u003c n; i++) step(P, 1 / 30);\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06];\n  P.bi = round(cl(k[0], 0, 1) * 3);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  P.heat = cl(k[3], 0, 1);\n  P.S1 = 8 / (0.7 + 0.8 * P.heat);\n  const n = round(cl(k[2], 6, 12));\n  if (n !== P.n) layout(P, n);\n  if (!P.warm) (P.warm = true), warm(P);\n  const go = input.btnPressed?.[0] && P.slots.filter((s) => s.st === SIDE1 || s.st === SIDE2).sort((a, b) => b.p - a.p)[0];\n  if (go) go.rush = true;\n  step(P, cl(dt, 0, 0.1) * P.rate);\n}\n\nconst glide = (o, x, y, u) => ((o.x = mix(o.fx, x, u)), (o.y = mix(o.fy, y, u)));\n\nfunction step(P, d) {\n  const sp = P.sp, ld = P.ld;\n  P.t += d;\n  for (const s of P.slots) {\n    s.t += d;\n    const k = s.cake;\n    if (s.st === SIDE1) (s.p = s.t / k.S1), (k.b = brown(P) * min(1.3, s.p));\n    else if (s.st === SIDE2) s.p = s.t / (k.S1 * 0.62);\n    // Steam off the cooking ones, smoke when the iron runs too hot.\n    const puff = (f, m) => P.steam.push([s.x + (rnd() - 0.5) * s.R * f, s.y + (rnd() - 0.5) * s.R * f, 1, m]);\n    if ((s.st === SIDE2 || (s.st === SIDE1 && s.p > 0.5)) && rnd() \u003c d * 2) puff(1, 0);\n    if (s.st >= SIDE1 && rnd() \u003c d * 8 * max(0, P.heat - 0.5)) puff(2, 1);\n  }\n  // The turner goes to the most overdue pancake first.\n  if (!sp.job) {\n    let best = null, over = 0;\n    for (const s of P.slots) {\n      const o = s.st === SIDE1 || (s.st === SIDE2 && !P.pst && P.pat \u003c 0) ? s.p - 1 + (s.rush ? 99 : 0) : -1;\n      if (o >= over) (best = s), (over = o);\n    }\n    if (best) Object.assign(sp, { job: best, ph: 0, t: 0, fx: sp.x, fy: sp.y, mode: best.st === SIDE1 ? FLIP : SERVE });\n    else if ((sp.idle += d) > 0.6) (sp.x += (70 - sp.x) * min(1, d * 3)), (sp.y += (140 - sp.y) * min(1, d * 3));\n  }\n  const s = sp.job;\n  if (s) {\n    sp.t += d;\n    const y0 = s.y + s.R + 6, y1 = s.y + 0.3 * s.R;\n    if (sp.ph === 0) {\n      glide(sp, s.x, y0, sm(sp.t / GO));\n      if (sp.t >= GO) Object.assign(sp, { ph: 1, t: 0 }), Object.assign(s, { st: sp.mode, t: 0, rush: false, land: false });\n    } else if (sp.mode === FLIP) {\n      // Slide under, lift and turn it over, set it down, pull back.\n      const u = (s.u = sp.t / (0.7 * (s.R / 12.7) ** 0.5));\n      sp.x = s.x;\n      sp.y = u \u003c 0.3 ? mix(y0, y1, sm(u / 0.3)) : u \u003c 0.85 ? y1 - 3 * sin((PI * (u - 0.3)) / 0.55) : mix(y1, y0 + 2, sm((u - 0.85) / 0.15));\n      for (let i = 0, a, r, x, y; u >= 0.85 && !s.land && i \u003c 8; i++) {\n        [a, r] = [rnd() * 2 * PI, s.R + 1 + rnd() * 4];\n        [x, y] = [round(s.x + cos(a) * r), round(s.y + sin(a) * r)];\n        P.spat.push([x + 1 - ((x + y) & 1), y, 1]);\n      }\n      s.land ||= u >= 0.85;\n      if (u >= 1) Object.assign(s, { st: SIDE2, t: 0, p: 0 }), (sp.job = null), (sp.idle = 0);\n    } else {\n      // Slide under, carry it down to the plate, drop it on the stack.\n      const u = sp.t / 1.2;\n      if (u \u003c 0.25) (sp.x = s.x), (sp.y = mix(y0, y1, sm(u / 0.25)));\n      else if (u \u003c 0.85) {\n        if (!P.carry) (P.carry = s.cake), Object.assign(s, { cake: null, st: EMPTY, t: 0, melt: 0.8 + rnd() * 0.6 }), ([P.carry.ox, P.carry.oy] = jig());\n        const w = sm((u - 0.25) / 0.6), k = P.carry;\n        [k.x, k.y, k.lift] = [mix(s.x, PX + k.ox, w), mix(s.y, PY + k.oy, w), sin(PI * w)];\n        [sp.x, sp.y] = [k.x, k.y + 0.3 * s.R - 3 * k.lift];\n      } else {\n        if (P.carry) {\n          P.stack.push(P.carry);\n          P.carry = null;\n          if (P.stack.length >= FULL) P.pat = 0;\n          [sp.fx, sp.fy] = [sp.x, sp.y];\n        }\n        const w = sm((u - 0.85) / 0.15);\n        [sp.x, sp.y] = [sp.fx + 8 * w, sp.fy + 14 * w];\n      }\n      if (u >= 1) (sp.job = null), (sp.idle = 0);\n    }\n  }\n  // The ladle, from the bowl to an empty place, and back to dip again.\n  const next = !ld.job && ld.ph === 3 && P.slots.filter((s) => s.st === EMPTY && s.t > s.melt).sort((a, b) => b.t - a.t)[0];\n  if (next) Object.assign(ld, { job: next, ph: 0, t: 0, fx: ld.x, fy: ld.y });\n  const L = ld.job;\n  ld.t += d;\n  if (ld.ph === 0 && L) {\n    glide(ld, L.x - 2, L.y - 3, sm(ld.t / 0.45));\n    if (ld.t >= 0.45) Object.assign(ld, { ph: 1, t: 0 }), Object.assign(L, { st: POUR, t: 0, rs: 0.05, cake: newCake(P, L) });\n  } else if (ld.ph === 1 && L) {\n    const u = ld.t / (0.9 * (L.R / 12.7));\n    L.rs = 1 - (1 - min(1, u)) ** 2;\n    if (u >= 1) Object.assign(L, { st: SIDE1, t: 0, p: 0 }), Object.assign(ld, { ph: 2, t: 0, fx: ld.x, fy: ld.y });\n  } else if (ld.ph === 2) {\n    glide(ld, 11, 110, sm(ld.t / 0.45));\n    if (ld.t >= 0.7) (ld.ph = 3), (ld.job = null);\n  } else if (!L) Object.assign(ld, { ph: 2, t: 0.45, fx: ld.x, fy: ld.y });\n  // A full plate gets butter, goes out to the right, and a clean one comes up.\n  if (P.pat >= 0 && (P.pat += d) > 3.5 && !P.pst) P.pst = 1;\n  if (P.pst === 1 && (P.pdx += 60 * d) > 60) Object.assign(P, { stack: [], pat: -1, pdx: 0, pdy: 40, pst: 2 });\n  if (P.pst === 2 && (P.pdy -= 40 * d) \u003c= 0) (P.pdy = 0), (P.pst = 0);\n  P.spat = P.spat.filter((q) => (q[2] -= d * 0.6) > 0);\n  P.steam = P.steam.filter((q) => ((q[1] -= (q[3] ? 9 : 6) * d), (q[0] += 2.5 * d), (q[2] -= d * 0.7) > 0));\n}\n\nfunction iron(P) {\n  const { sheen, glint, t, heat } = P;\n  for (let y = IR0, p = IR0 * W; y \u003c= IR1; y++)\n    for (let x = 0, w = (0.85 + 0.15 * sin(y * 0.5 - t * 4)) * 26; x \u003c W; x++, p++) {\n      const s = sheen[p] * w;\n      B[p * 3] += s;\n      B[p * 3 + 1] += s * 0.95;\n      B[p * 3 + 2] += s * 0.86;\n    }\n  for (let i = 0; i \u003c glint.length; i += 3) {\n    const p = glint[i], tw = 0.5 + 0.5 * sin(t * glint[i + 2] * (1 + heat) + glint[i + 1]), v = 205 + 50 * (0.4 + 0.6 * sheen[p]) * tw * tw;\n    put(p & 63, p >> 6, v, v * 0.94, v * 0.8);\n  }\n  // Butter melts where the next one goes and fries round the new ones.\n  for (const s of P.slots) {\n    const m = s.st === EMPTY ? cl(s.t / s.melt, 0, 1) : s.st === POUR ? 1 : s.st === SIDE1 ? 1 - cl(s.t / 3, 0, 1) : 0;\n    if (!m) continue;\n    const pr = s.R * (s.st === EMPTY ? 0.25 + 0.6 * m : 1 + 0.25 * m), f = floor(t * 7);\n    for (let y = floor(s.y - pr); y \u003c= s.y + pr; y++)\n      for (let x = floor(s.x - pr); x \u003c= s.x + pr; x++) {\n        const d = hypot(x - s.x, y - s.y) / pr;\n        if (d > 1) continue;\n        blend(x, y, 196, 152, 60, 0.75);\n        if ((x + y) & 1 && hash(x * 3 + f, y) \u003c 0.28 * (1 - d * 0.5)) put(x, y, 248, 238, 204);\n      }\n    if (s.st === EMPTY)\n      for (let hs = 2.6 * (1 - 0.8 * m), y = round(s.y - hs); y \u003c= s.y + hs; y++) for (let x = round(s.x - hs); x \u003c= s.x + hs; x++) put(x, y, 252, 232, 140);\n  }\n  for (const [x, y, l] of P.spat) put(x, y, 120 + 130 * l, 110 + 120 * l, 90 + 90 * l);\n}\n\nfunction plate(P) {\n  const cx = PX + round(P.pdx), cy = PY + round(P.pdy), T = P.plate, st = P.stack, bt = BAT[P.bi][0], bw = P.bowl;\n  for (let i = 0; i \u003c bw.length; i += 2) {\n    const o = bw[i] * 3, k = bw[i + 1], c = k \u003c 0 && P.bi === 1 ? BERRY[0] : bt, f = k \u003c 0 ? (P.bi === 1 ? 1 : 0.95) : k;\n    [B[o], B[o + 1], B[o + 2]] = [c[0] * f, c[1] * f, c[2] * f];\n  }\n  for (let i = 0; i \u003c T.length; i += 5) T[i + 2] \u003c 0 ? dim(cx + T[i], cy + T[i + 1], -T[i + 2]) : put(cx + T[i], cy + T[i + 1], T[i + 2], T[i + 3], T[i + 4]);\n  if (!st.length) return;\n  shadow(cx + st[0].ox + 1 + 0.4 * st.length, cy + st[0].oy + 1 + 0.4 * st.length, st[0].R, 0.82);\n  st.forEach((k, i) => cake(P, k, cx + k.ox, cy + k.oy, 1, 1, 1, 1, 1, 0.9 ** (st.length - 1 - i)));\n  if (P.pat \u003c 0) return;\n  // The butter pat on top, melting into a glossy pool.\n  const top = st[st.length - 1], bx = cx + top.ox + 1, by = cy + top.oy - 1, m = cl(P.pat / 3, 0, 1), pr = 2 + 4.5 * m, hs = 2.4 * (1 - 0.75 * m);\n  for (let y = floor(by - pr); y \u003c= by + pr; y++)\n    for (let x = floor(bx - pr); x \u003c= bx + pr; x++) {\n      const d = hypot(x - bx, y - by) / pr, e = x - bx >= hs - 1 || y - by >= hs - 1;\n      if (d \u003c 1) blend(x, y, 252, 222, 124, 0.55 * (1 - d * d));\n      if (abs(x - bx) \u003c= hs && abs(y - by) \u003c= hs) put(x, y, e ? 222 : 252, e ? 198 : 238, e ? 112 : 160);\n    }\n}\n\n// The turner: a slotted steel blade, its edge up the panel, and a wooden\n// handle toward the cook's right hand. Its shadow goes down first.\nfunction turner(x, y, blade = 1, grip = 1) {\n  const [x0, y0] = [round(x), round(y)];\n  for (const pt of [(x, y) => dim(x + 2, y + 3, 0.55), put]) {\n    for (let j = -5; blade && j \u003c= 5; j++)\n      for (let i = -4; i \u003c= 4; i++) {\n        const k = j === -4 ? 1.1 : 0.9 + 0.01 * j, ai = abs(i);\n        if (j === -5 && ai === 4) continue;\n        if (ai === 4 || abs(j) === 5 || (j === -4 && ai === 3)) pt(x0 + i, y0 + j, 64, 64, 70);\n        else if (!(i & 1) && ai \u003c 3 && abs(j) \u003c 3) pt(x0 + i, y0 + j, 40, 38, 38);\n        else pt(x0 + i, y0 + j, 200 * k, 202 * k, 208 * k);\n      }\n    for (let s = 0; grip && s \u003c 24; s++) {\n      const x = round(x0 + 0.42 * s), y = y0 + 6 + s, k = s === 9 || s === 17 ? 0 : 0.85 + 0.15 * (s & 1);\n      if (s \u003c 4) pt(x, y, 170, 172, 178);\n      else for (let w = 0, f = k; w \u003c 2; w++, f *= 0.8) k ? pt(x + w, y, 156 * f, 100 * f, 58 * f) : pt(x + w, y, 214, 184, 112);\n    }\n  }\n}\n\n// The ladle, full of batter until it pours, its handle toward the left hand.\nfunction ladle(P, { x, y, ph }) {\n  const [x0, y0, bt, full] = [round(x), round(y), BAT[P.bi][0], ph === 3 || ph === 0];\n  for (const pt of [(x, y) => dim(x + 2, y + 3, 0.55), put]) {\n    for (let j = -4; j \u003c= 4; j++)\n      for (let i = -4; i \u003c= 4; i++) {\n        const d = hypot(i, j), k = 0.8 + 0.2 * cos(atan2(j, i) + 2.3);\n        if (d > 3.7) continue;\n        if (d > 2.6) pt(x0 + i, y0 + j, 206 * k, 208 * k, 212 * k);\n        else if (full) pt(x0 + i, y0 + j, bt[0] * 0.95, bt[1] * 0.95, bt[2] * 0.95);\n        else pt(x0 + i, y0 + j, 110, 110, 116);\n      }\n    for (let s = 4; s \u003c 28; s++) pt(round(x0 - 0.5 * s), round(y0 + 0.86 * s), 184, 186, 192);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.slots) return;\n  B = P.buf;\n  B.set(P.bg);\n  iron(P);\n  plate(P);\n  const sp = P.sp, job = sp.job && sp.ph === 1 ? sp.job : null;\n  for (const s of P.slots) {\n    const k = s.cake;\n    if (!k || s === job) continue;\n    if (s.st === POUR) cake(P, k, s.x, s.y, 1, 1, 0, 0, s.rs);\n    else cake(P, k, s.x, s.y, 1, 1, s.st === SIDE2 ? 1 : 0, s.st === SIDE1 ? s.p : 1);\n  }\n  if (job) {\n    // The blade slides under the pancake, so it goes down before it.\n    turner(sp.x, sp.y, 1, 0);\n    if (job.cake && sp.mode === FLIP) {\n      const u = job.u || 0, v = cl((u - 0.3) / 0.55, 0, 1), l = sin(PI * v), up = u > 0.575;\n      if (l > 0) shadow(job.x + 1 + 2 * l, job.y + 2 + 2 * l, job.R, 1 - 0.4 * l);\n      cake(P, job.cake, job.x, job.y - 4 * l, 1 + 0.12 * l, cos(PI * v) * (1 + 0.12 * l), up ? 1 : 0, up ? 1 : job.p);\n    } else if (job.cake) cake(P, job.cake, job.x, job.y, 1, 1, 1, 1);\n    const k = P.carry;\n    if (k) {\n      shadow(k.x + 1 + 2 * k.lift, k.y + 2 + 3 * k.lift, k.R, 0.6);\n      cake(P, k, round(k.x), round(k.y - 2 * k.lift), 1 + 0.1 * k.lift, 1 + 0.1 * k.lift, 1, 1);\n    }\n    turner(sp.x, sp.y, 0, 1);\n  } else turner(sp.x, sp.y);\n  // Steam is white and thins as it rises; smoke is grey.\n  for (const [x0, y0, l, smoke] of P.steam) {\n    const [r, a, c] = smoke ? [4.5, 0.4 * l * cl((P.heat - 0.5) * 2, 0, 1), 128] : [2.6, 0.14 * l, 240];\n    for (let y = floor(y0 - r); y \u003c= y0 + r; y++)\n      for (let x = floor(x0 - r); x \u003c= x0 + r; x++) {\n        const d = hypot(x - x0, y - y0) / r;\n        if (d \u003c 1) blend(x, y, c, c - 2, c - 4, a * (1 - d));\n      }\n  }\n  ladle(P, P.ld);\n  show(display, B, P.G);\n}\n\n// To the panel through a fine grain: neighbouring LEDs lean opposite ways by\n// up to 18 levels, as the iron, the batter and the wood never lie quite flat.\nfunction show(display, buf, G) {\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const o = p * 3, r = buf[o], g = buf[o + 1], b = buf[o + 2], L = max(r, g, b, 1);\n      const f = 1 + (((x + y) & 1) * 2 - 1) * G[p] * min(17, 0.4 * L) / L;\n      display.setPixel(x, y, min(255, max(0, r * f)), min(255, max(0, g * f)), min(255, max(0, b * f)));\n    }\n}\n","layer":{"id":"layer-pancakes","type":"code","name":"pancakes","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pancakes\n// Family:  kitchen\n// Idea:    A seasoned griddle seen from above: batter is ladled into rounds, bubbles rise and pop and leave holes as the tops set, a turner flips each one to its fried side and slides the done ones onto a stack on the plate, while butter melts and oil glints on the iron.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the flat-top griddles of diner breakfast counters\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Batter=0..1, Speed=0.2..3, Pancakes=6..12, Heat=0..1\n//\n// Knob 1: Batter. Buttermilk at 0, then blueberry, buckwheat and cocoa at 1; the bowl changes at once and the next rounds are poured from it.\n// Knob 2: Speed. How fast the cook works: at 2 a pancake takes about 20 s from the ladle to the plate, and the turner flips or serves one every two seconds.\n// Knob 3: Pancakes. How many rounds are on the iron: six big ones at 6, twelve silver dollars at 12, and still one turner for all of them.\n// Knob 4: Heat. How hot the griddle runs. At the low end the pancakes come out golden; turned up they cook faster, bubble more, fry dark brown and the oil starts to smoke.\n// Buttons: K1 tap sends the turner to the pancake furthest along, to flip it or serve it now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Rows: the iron IR0..IR1, the grease trough, the butcher block from CT.\nconst [IR0, IR1, CT] = [3, 90, 94];\nconst [PX, PY, PR, BX, BY, BR] = [42, 112, 16.5, 7, 114, 12.5];\nconst [EMPTY, POUR, SIDE1, FLIP, SIDE2, SERVE] = [0, 1, 2, 3, 4, 5];\n// Pancakes to a full plate; how long the turner takes to get anywhere.\nconst [FULL, GO] = [7, 0.3];\nconst { min, max, floor, round, ceil, sin, cos, abs, hypot, exp, atan2, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = sm(x - xi), v = sm(y - yi), a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(xi + 1, yi + 1)) * u * v;\n}\n\n// Each batter: the wet top, the set top, the inside a popped bubble shows,\n// and the fried side from pale through golden to dark.\nconst BAT = [\n  [[228, 212, 166], [222, 196, 142], [64, 38, 18], [232, 194, 124], [206, 138, 66], [118, 60, 24]],\n  [[226, 212, 172], [218, 196, 148], [62, 38, 22], [228, 190, 126], [202, 134, 68], [114, 58, 26]],\n  [[196, 170, 142], [182, 152, 120], [52, 34, 24], [188, 148, 108], [150, 98, 58], [84, 46, 28]],\n  [[140, 92, 64], [124, 80, 54], [40, 24, 16], [130, 82, 54], [100, 58, 36], [68, 36, 22]],\n];\n// A blueberry's skin, raw and baked.\nconst BERRY = [[64, 40, 118], [50, 28, 70]];\nconst C = [0, 0, 0];\nfunction fry(bt, b) {\n  b = cl(b, 0, 1);\n  const lo = b \u003c 0.5, a = lo ? bt[3] : bt[4], c = lo ? bt[4] : bt[5], t = lo ? b * 2 : b * 2 - 1;\n  for (let i = 0; i \u003c 3; i++) C[i] = a[i] + (c[i] - a[i]) * t;\n}\n\nlet B;\nconst at = (x, y) => (x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, r, g, b, o = at(x, y)) {\n  if (o >= 0) (B[o] = r), (B[o + 1] = g), (B[o + 2] = b);\n}\nfunction blend(x, y, r, g, b, a, o = at(x, y)) {\n  if (o >= 0) (B[o] += (r - B[o]) * a), (B[o + 1] += (g - B[o + 1]) * a), (B[o + 2] += (b - B[o + 2]) * a);\n}\nfunction dim(x, y, k, o = at(x, y)) {\n  if (o >= 0) (B[o] *= k), (B[o + 1] *= k), (B[o + 2] *= k);\n}\n\n// Marks that should read sharp (holes, flecks, pores, glints) sit on the\n// squares the grain in show() pushes their way: dark ones where x + y is\n// even, bright ones where it is odd. Two such squares never touch side by side.\nfunction build(P) {\n  const bg = P.bg, mk = new Uint8Array(N);\n  const set = (p, r, g, b) => ((bg[p * 3] = r), (bg[p * 3 + 1] = g), (bg[p * 3 + 2] = b));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, odd = (x + y) & 1;\n    let k;\n    P.G[p] = hash(x + 77, y + 5) \u003c 0.5 ? 0.94 : 1.06;\n    if (y \u003c IR0) (k = 0.82 + 0.08 * vn(x * 0.3, y)), set(p, 170 * k, 172 * k, 178 * k);\n    else if (y \u003c= IR1) {\n      // Seasoning in bronze patches, and crumbs of old batter.\n      const s = vn(x * 0.08, y * 0.06) * 0.6 + vn(x * 0.21 + 9, y * 0.19) * 0.4;\n      k = 0.84 + 0.32 * s;\n      if (odd && rnd() \u003c 0.024) set(p, 196, 140, 70), (mk[p] = 1);\n      else set(p, (52 + 10 * s) * k, 44 * k, 39 * k);\n    } else if (y === IR1 + 1) (k = 0.92 + 0.06 * vn(x * 0.5, 1)), set(p, 200 * k, 200 * k, 204 * k);\n    else if (y === IR1 + 2) (k = 0.85 + 0.2 * vn(x * 0.25, 3)), set(p, 96 * k, 64 * k, 26 * k);\n    else if (y \u003c CT) set(p, 180, 180, 186);\n    else {\n      // Oak strips seven LEDs wide, told apart by hue more than by light,\n      // with dark pores along the grain.\n      const s = floor((x + 2) / 7), t = hash(s, 5);\n      const v = vn(x * 0.4 + s * 13, y * 0.09);\n      k = !odd && rnd() \u003c 0.12 ? 0.27 : 1;\n      set(p, (176 + 4 * v) * k, (100 + 26 * t + 20 * v) * k, (56 + 20 * t + 14 * v) * k);\n    }\n  }\n  // The hood lights' reflection, and oil specks catching it.\n  for (let p = IR0 * W; p \u003c= IR1 * W + 63; p++) {\n    const x = p & 63, y = p >> 6;\n    P.sheen[p] = exp(-(((x - 20) / 17) ** 2) - ((y - 30) / 11) ** 2) + 0.8 * exp(-(((x - 44) / 15) ** 2) - ((y - 68) / 12) ** 2);\n  }\n  P.glint = [];\n  for (let p = (IR0 + 1) * W; p \u003c IR1 * W; p++) if (!mk[p] && (p + (p >> 6)) & 1 && rnd() \u003c 0.12) P.glint.push(p, rnd() * 7, 1.5 + rnd() * 3);\n  // A white enamel bowl with a navy rolled rim; its batter follows K1.\n  P.bowl = [];\n  for (let y = BY - 16; y \u003c H; y++)\n    for (let x = 0; x \u003c= BX + 16; x++) {\n      const p = y * W + x, dx = x - BX, dy = y - BY, d = hypot(dx, dy);\n      let k;\n      if (d > BR + 3) continue;\n      if (d > BR) dx + dy > 0 && ((k = 0.9 + 0.033 * (d - BR)), set(p, bg[p * 3] * k, bg[p * 3 + 1] * k, bg[p * 3 + 2] * k));\n      else if (d > BR - 1.6) (k = 0.85 + 0.2 * cos(atan2(dy, dx) + 2.3)), set(p, 26 * k, 38 * k, 88 * k);\n      else P.bowl.push(p, !((x + y) & 1) && hash(x + 3, y) \u003c 0.12 ? -1 : 0.97 - 0.08 * sm((d - BR + 7) / 5));\n    }\n  // Charcoal stoneware: a raised rim that catches the light, the well, cream\n  // flecks in the glaze, and its shadow on the wood (a negative entry).\n  P.plate = [];\n  for (let dy = -20; dy \u003c= 20; dy++)\n    for (let dx = -20; dx \u003c= 20; dx++) {\n      const d = hypot(dx, dy), k = mix(0.86, 0.98 + 0.1 * cos(atan2(dy, dx) + 2.4), cl((d - PR + 6.5) / 4, 0, 1));\n      if (d > PR + 3 || (d > PR && dx + dy \u003c= 0)) continue;\n      if (d > PR) P.plate.push(dx, dy, -0.9 - 0.033 * (d - PR), 0, 0);\n      else if ((dx + dy) & 1 && hash(dx + 40, dy + 40) \u003c 0.1) P.plate.push(dx, dy, 206, 198, 178);\n      else P.plate.push(dx, dy, 66 * k, 72 * k, 86 * k);\n    }\n}\n\nfunction layout(P, n) {\n  const cols = n \u003c= 8 ? 2 : 3, rows = ceil(n / cols), cw = W / cols, ch = (IR1 - IR0 - 1) / rows, R = min(cw, ch) / 2 - 1.6;\n  if (P.carry) P.stack.push(P.carry), (P.carry = null);\n  P.n = n;\n  P.slots = Array.from({ length: n }, (_, i) => {\n    const x = round(((i % cols) + 0.5) * cw + (rnd() - 0.5) * 2), y = round(IR0 + 1 + (floor(i / cols) + 0.5) * ch + (rnd() - 0.5) * 2);\n    return { x, y: y + ((x + y) & 1), R, st: EMPTY, t: rnd(), melt: 0.8 + rnd() * 0.6, p: 0, cake: null };\n  });\n  P.sp.job = P.ld.job = null;\n}\n\n// A fresh round: its wobbly outline, the shine, where bubbles will come up,\n// the flecks the iron leaves on the fried side, berries.\nfunction newCake(P, s) {\n  const R = s.R, h = ceil(R * 1.08) + 1, sz = 2 * h + 1, n = sz * sz, F = () => new Float32Array(n);\n  const k = { bi: P.bi, R, h, sz, b: 0, ox: 0, oy: 0, S1: P.S1 * (0.55 + (0.45 * R) / 12.7), dd: F(), site: F(), mot: F(), hl: F(), spk: new Uint8Array(n) };\n  const [a1, a2, m0, dens] = [rnd() * 7, rnd() * 7, rnd() * 50, 0.6 + 0.25 * P.heat];\n  for (let j = -h, q = 0; j \u003c= h; j++)\n    for (let i = -h; i \u003c= h; i++, q++) {\n      const a = atan2(j, i), d = (k.dd[q] = hypot(i, j) / (R * (1 + 0.035 * sin(3 * a + a1) + 0.025 * sin(5 * a + a2))));\n      k.mot[q] = vn(i * 0.24 + m0, j * 0.24);\n      k.hl[q] = 14 * exp(-((i / R + 0.3) ** 2 + (j / R + 0.38) ** 2) * 7);\n      // Bubbles never touch even at the corners, so they never run into lines.\n      const free = (m) => j === -h || (!m[q - sz - 1] && !m[q - sz + 1]);\n      if ((i + j) & 1) continue;\n      if (P.bi === 1 && rnd() \u003c 0.07) k.spk[q] = 2;\n      else {\n        if (d \u003c 0.97 && rnd() \u003c dens && free(k.site)) k.site[q] = 0.12 + 0.88 * rnd() ** 0.6;\n        if (rnd() \u003c 0.85 * sm((k.mot[q] - 0.36) / 0.36)) k.spk[q] = 1;\n      }\n    }\n  return k;\n}\n\n// One pancake at (cx, cy), raw top or fried side up, squashed to sy as it\n// turns over and spread to rs while poured.\nfunction cake(P, k, cx, cy, sx, sy, fried, p, rs = 1, lit = 1) {\n  if (abs(sy) \u003c 0.05) return;\n  const bt = BAT[k.bi], [wet0, set0, hole] = bt, { h, sz, dd, site, spk, mot, hl, S1 } = k;\n  const ex = h * abs(sx) + 1, ey = h * abs(sy) + 1, setR = 1.02 - 1.1 * p, rim = cl(p * 1.5, 0, 1);\n  fry(bt, k.b);\n  const [fr, fg, fb] = C;\n  for (let y = max(0, floor(cy - ey)); y \u003c= min(H - 1, ceil(cy + ey)); y++)\n    for (let x = max(0, floor(cx - ex)); x \u003c= min(W - 1, ceil(cx + ex)); x++) {\n      const i = round((x - cx) / sx), j = round((y - cy) / sy);\n      if (i \u003c -h || i > h || j \u003c -h || j > h) continue;\n      const q = (j + h) * sz + i + h, d = dd[q] / rs;\n      if (d > 1) continue;\n      let r, g, b;\n      if (!fried) {\n        // Wet batter shines; it sets from the rim in, and the rim shows the\n        // browning underneath.\n        const wet = sm((setR - d) / 0.14 + 0.5), dome = 1.02 - 0.06 * d * d, gl = wet * hl[q], e = sm((d - 0.8) / 0.2) * rim;\n        r = mix(mix(set0[0], wet0[0], wet) * dome + gl, fr, e);\n        g = mix(mix(set0[1], wet0[1], wet) * dome + gl, fg, e);\n        b = mix(mix(set0[2], wet0[2], wet) * dome + gl * 0.8, fb, e);\n        const tb = site[q];\n        if (tb && p > tb) {\n          // A bubble shines for a moment and pops. Where the batter is still\n          // wet the hole closes again; where it has set it stays open.\n          const age = (p - tb) * S1;\n          if (age \u003c 0.3) (r = mix(r, 255, 0.5)), (g = mix(g, 250, 0.5)), (b = mix(b, 236, 0.5));\n          else {\n            const o = d \u003c 1.02 - 1.1 * (tb + 0.3 / S1) ? 1 - cl((age - 0.3) / 0.5, 0, 1) : 1;\n            (r = mix(r, hole[0], o)), (g = mix(g, hole[1], o)), (b = mix(b, hole[2], o));\n          }\n        }\n      } else {\n        // Browner in the middle, mottled, flecked, and pale round the edge.\n        const f = spk[q] === 1, e = sm((d - 0.88) / 0.12), s = f ? 0.45 : 1;\n        fry(bt, k.b * (1.12 - 0.42 * sm((d - 0.5) / 0.5)) * (0.86 + 0.28 * mot[q]) + (f ? 0.55 : 0));\n        r = mix(C[0] * s, set0[0] * 0.9, e);\n        g = mix(C[1] * s, set0[1] * 0.9, e);\n        b = mix(C[2] * s, set0[2] * 0.9, e);\n      }\n      if (spk[q] === 2) [r, g, b] = BERRY[fried];\n      put(x, y, r * lit, g * lit, b * lit);\n    }\n}\n\n// A small offset that keeps a pancake's flecks on the grain's dark squares.\nconst jig = (o = floor(rnd() * 3) - 1) => [o, o ? (rnd() \u003c 0.5 ? -1 : 1) : 0];\n\n// Shadows fade over three LEDs so their edge stays soft under the grain.\nfunction shadow(cx, cy, R, k) {\n  for (let y = floor(cy - R - 2); y \u003c= cy + R + 2; y++)\n    for (let x = floor(cx - R - 2); x \u003c= cx + R + 2; x++) {\n      const e = sm((hypot(x - cx, y - cy) - R + 1.5) / 3);\n      if (e \u003c 1) dim(x, y, k + (1 - k) * e);\n    }\n}\n\nexport function setup(params) {\n  const P = params, F = (n = N) => new Float32Array(n);\n  Object.assign(P, { bg: F(N * 3), buf: F(N * 3), G: F(), sheen: F(), t: 0, n: 0, stack: [], carry: null, pat: -1, pdx: 0, pdy: 0, pst: 0, spat: [], steam: [] });\n  [P.sp, P.ld] = [{ x: 70, y: 140, ph: 0, t: 0, idle: 0 }, { x: 11, y: 110, ph: 3, t: 0 }];\n  build(P);\n}\n\nconst brown = (P) => 0.36 + 0.5 * P.heat;\n\n// Open on a morning under way: some on each side, a stack started, then the\n// cook's clock runs on a while at the knob's speed.\nfunction warm(P) {\n  const S = [...P.slots].sort(() => rnd() - 0.5);\n  S.forEach((s, i) => {\n    const f = (i + 0.5) / S.length;\n    if (f \u003c 0.12) return;\n    s.cake = newCake(P, s);\n    if (f \u003c 0.6) (s.st = SIDE1), (s.t = ((f - 0.12) / 0.48) * s.cake.S1 * 0.95);\n    else (s.st = SIDE2), (s.t = (f - 0.6) * 9), (s.cake.b = brown(P));\n  });\n  for (let i = 0, n = 3 + floor(rnd() * 2); i \u003c n; i++) {\n    const k = newCake(P, { R: P.slots[0].R });\n    [k.b, k.ox, k.oy] = [brown(P), ...jig()];\n    P.stack.push(k);\n  }\n  for (let i = 0, n = round(6 * P.rate * 30); i \u003c n; i++) step(P, 1 / 30);\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 6, 0.06];\n  P.bi = round(cl(k[0], 0, 1) * 3);\n  P.rate = cl(k[1], 0.2, 3) / 2;\n  P.heat = cl(k[3], 0, 1);\n  P.S1 = 8 / (0.7 + 0.8 * P.heat);\n  const n = round(cl(k[2], 6, 12));\n  if (n !== P.n) layout(P, n);\n  if (!P.warm) (P.warm = true), warm(P);\n  const go = input.btnPressed?.[0] && P.slots.filter((s) => s.st === SIDE1 || s.st === SIDE2).sort((a, b) => b.p - a.p)[0];\n  if (go) go.rush = true;\n  step(P, cl(dt, 0, 0.1) * P.rate);\n}\n\nconst glide = (o, x, y, u) => ((o.x = mix(o.fx, x, u)), (o.y = mix(o.fy, y, u)));\n\nfunction step(P, d) {\n  const sp = P.sp, ld = P.ld;\n  P.t += d;\n  for (const s of P.slots) {\n    s.t += d;\n    const k = s.cake;\n    if (s.st === SIDE1) (s.p = s.t / k.S1), (k.b = brown(P) * min(1.3, s.p));\n    else if (s.st === SIDE2) s.p = s.t / (k.S1 * 0.62);\n    // Steam off the cooking ones, smoke when the iron runs too hot.\n    const puff = (f, m) => P.steam.push([s.x + (rnd() - 0.5) * s.R * f, s.y + (rnd() - 0.5) * s.R * f, 1, m]);\n    if ((s.st === SIDE2 || (s.st === SIDE1 && s.p > 0.5)) && rnd() \u003c d * 2) puff(1, 0);\n    if (s.st >= SIDE1 && rnd() \u003c d * 8 * max(0, P.heat - 0.5)) puff(2, 1);\n  }\n  // The turner goes to the most overdue pancake first.\n  if (!sp.job) {\n    let best = null, over = 0;\n    for (const s of P.slots) {\n      const o = s.st === SIDE1 || (s.st === SIDE2 && !P.pst && P.pat \u003c 0) ? s.p - 1 + (s.rush ? 99 : 0) : -1;\n      if (o >= over) (best = s), (over = o);\n    }\n    if (best) Object.assign(sp, { job: best, ph: 0, t: 0, fx: sp.x, fy: sp.y, mode: best.st === SIDE1 ? FLIP : SERVE });\n    else if ((sp.idle += d) > 0.6) (sp.x += (70 - sp.x) * min(1, d * 3)), (sp.y += (140 - sp.y) * min(1, d * 3));\n  }\n  const s = sp.job;\n  if (s) {\n    sp.t += d;\n    const y0 = s.y + s.R + 6, y1 = s.y + 0.3 * s.R;\n    if (sp.ph === 0) {\n      glide(sp, s.x, y0, sm(sp.t / GO));\n      if (sp.t >= GO) Object.assign(sp, { ph: 1, t: 0 }), Object.assign(s, { st: sp.mode, t: 0, rush: false, land: false });\n    } else if (sp.mode === FLIP) {\n      // Slide under, lift and turn it over, set it down, pull back.\n      const u = (s.u = sp.t / (0.7 * (s.R / 12.7) ** 0.5));\n      sp.x = s.x;\n      sp.y = u \u003c 0.3 ? mix(y0, y1, sm(u / 0.3)) : u \u003c 0.85 ? y1 - 3 * sin((PI * (u - 0.3)) / 0.55) : mix(y1, y0 + 2, sm((u - 0.85) / 0.15));\n      for (let i = 0, a, r, x, y; u >= 0.85 && !s.land && i \u003c 8; i++) {\n        [a, r] = [rnd() * 2 * PI, s.R + 1 + rnd() * 4];\n        [x, y] = [round(s.x + cos(a) * r), round(s.y + sin(a) * r)];\n        P.spat.push([x + 1 - ((x + y) & 1), y, 1]);\n      }\n      s.land ||= u >= 0.85;\n      if (u >= 1) Object.assign(s, { st: SIDE2, t: 0, p: 0 }), (sp.job = null), (sp.idle = 0);\n    } else {\n      // Slide under, carry it down to the plate, drop it on the stack.\n      const u = sp.t / 1.2;\n      if (u \u003c 0.25) (sp.x = s.x), (sp.y = mix(y0, y1, sm(u / 0.25)));\n      else if (u \u003c 0.85) {\n        if (!P.carry) (P.carry = s.cake), Object.assign(s, { cake: null, st: EMPTY, t: 0, melt: 0.8 + rnd() * 0.6 }), ([P.carry.ox, P.carry.oy] = jig());\n        const w = sm((u - 0.25) / 0.6), k = P.carry;\n        [k.x, k.y, k.lift] = [mix(s.x, PX + k.ox, w), mix(s.y, PY + k.oy, w), sin(PI * w)];\n        [sp.x, sp.y] = [k.x, k.y + 0.3 * s.R - 3 * k.lift];\n      } else {\n        if (P.carry) {\n          P.stack.push(P.carry);\n          P.carry = null;\n          if (P.stack.length >= FULL) P.pat = 0;\n          [sp.fx, sp.fy] = [sp.x, sp.y];\n        }\n        const w = sm((u - 0.85) / 0.15);\n        [sp.x, sp.y] = [sp.fx + 8 * w, sp.fy + 14 * w];\n      }\n      if (u >= 1) (sp.job = null), (sp.idle = 0);\n    }\n  }\n  // The ladle, from the bowl to an empty place, and back to dip again.\n  const next = !ld.job && ld.ph === 3 && P.slots.filter((s) => s.st === EMPTY && s.t > s.melt).sort((a, b) => b.t - a.t)[0];\n  if (next) Object.assign(ld, { job: next, ph: 0, t: 0, fx: ld.x, fy: ld.y });\n  const L = ld.job;\n  ld.t += d;\n  if (ld.ph === 0 && L) {\n    glide(ld, L.x - 2, L.y - 3, sm(ld.t / 0.45));\n    if (ld.t >= 0.45) Object.assign(ld, { ph: 1, t: 0 }), Object.assign(L, { st: POUR, t: 0, rs: 0.05, cake: newCake(P, L) });\n  } else if (ld.ph === 1 && L) {\n    const u = ld.t / (0.9 * (L.R / 12.7));\n    L.rs = 1 - (1 - min(1, u)) ** 2;\n    if (u >= 1) Object.assign(L, { st: SIDE1, t: 0, p: 0 }), Object.assign(ld, { ph: 2, t: 0, fx: ld.x, fy: ld.y });\n  } else if (ld.ph === 2) {\n    glide(ld, 11, 110, sm(ld.t / 0.45));\n    if (ld.t >= 0.7) (ld.ph = 3), (ld.job = null);\n  } else if (!L) Object.assign(ld, { ph: 2, t: 0.45, fx: ld.x, fy: ld.y });\n  // A full plate gets butter, goes out to the right, and a clean one comes up.\n  if (P.pat >= 0 && (P.pat += d) > 3.5 && !P.pst) P.pst = 1;\n  if (P.pst === 1 && (P.pdx += 60 * d) > 60) Object.assign(P, { stack: [], pat: -1, pdx: 0, pdy: 40, pst: 2 });\n  if (P.pst === 2 && (P.pdy -= 40 * d) \u003c= 0) (P.pdy = 0), (P.pst = 0);\n  P.spat = P.spat.filter((q) => (q[2] -= d * 0.6) > 0);\n  P.steam = P.steam.filter((q) => ((q[1] -= (q[3] ? 9 : 6) * d), (q[0] += 2.5 * d), (q[2] -= d * 0.7) > 0));\n}\n\nfunction iron(P) {\n  const { sheen, glint, t, heat } = P;\n  for (let y = IR0, p = IR0 * W; y \u003c= IR1; y++)\n    for (let x = 0, w = (0.85 + 0.15 * sin(y * 0.5 - t * 4)) * 26; x \u003c W; x++, p++) {\n      const s = sheen[p] * w;\n      B[p * 3] += s;\n      B[p * 3 + 1] += s * 0.95;\n      B[p * 3 + 2] += s * 0.86;\n    }\n  for (let i = 0; i \u003c glint.length; i += 3) {\n    const p = glint[i], tw = 0.5 + 0.5 * sin(t * glint[i + 2] * (1 + heat) + glint[i + 1]), v = 205 + 50 * (0.4 + 0.6 * sheen[p]) * tw * tw;\n    put(p & 63, p >> 6, v, v * 0.94, v * 0.8);\n  }\n  // Butter melts where the next one goes and fries round the new ones.\n  for (const s of P.slots) {\n    const m = s.st === EMPTY ? cl(s.t / s.melt, 0, 1) : s.st === POUR ? 1 : s.st === SIDE1 ? 1 - cl(s.t / 3, 0, 1) : 0;\n    if (!m) continue;\n    const pr = s.R * (s.st === EMPTY ? 0.25 + 0.6 * m : 1 + 0.25 * m), f = floor(t * 7);\n    for (let y = floor(s.y - pr); y \u003c= s.y + pr; y++)\n      for (let x = floor(s.x - pr); x \u003c= s.x + pr; x++) {\n        const d = hypot(x - s.x, y - s.y) / pr;\n        if (d > 1) continue;\n        blend(x, y, 196, 152, 60, 0.75);\n        if ((x + y) & 1 && hash(x * 3 + f, y) \u003c 0.28 * (1 - d * 0.5)) put(x, y, 248, 238, 204);\n      }\n    if (s.st === EMPTY)\n      for (let hs = 2.6 * (1 - 0.8 * m), y = round(s.y - hs); y \u003c= s.y + hs; y++) for (let x = round(s.x - hs); x \u003c= s.x + hs; x++) put(x, y, 252, 232, 140);\n  }\n  for (const [x, y, l] of P.spat) put(x, y, 120 + 130 * l, 110 + 120 * l, 90 + 90 * l);\n}\n\nfunction plate(P) {\n  const cx = PX + round(P.pdx), cy = PY + round(P.pdy), T = P.plate, st = P.stack, bt = BAT[P.bi][0], bw = P.bowl;\n  for (let i = 0; i \u003c bw.length; i += 2) {\n    const o = bw[i] * 3, k = bw[i + 1], c = k \u003c 0 && P.bi === 1 ? BERRY[0] : bt, f = k \u003c 0 ? (P.bi === 1 ? 1 : 0.95) : k;\n    [B[o], B[o + 1], B[o + 2]] = [c[0] * f, c[1] * f, c[2] * f];\n  }\n  for (let i = 0; i \u003c T.length; i += 5) T[i + 2] \u003c 0 ? dim(cx + T[i], cy + T[i + 1], -T[i + 2]) : put(cx + T[i], cy + T[i + 1], T[i + 2], T[i + 3], T[i + 4]);\n  if (!st.length) return;\n  shadow(cx + st[0].ox + 1 + 0.4 * st.length, cy + st[0].oy + 1 + 0.4 * st.length, st[0].R, 0.82);\n  st.forEach((k, i) => cake(P, k, cx + k.ox, cy + k.oy, 1, 1, 1, 1, 1, 0.9 ** (st.length - 1 - i)));\n  if (P.pat \u003c 0) return;\n  // The butter pat on top, melting into a glossy pool.\n  const top = st[st.length - 1], bx = cx + top.ox + 1, by = cy + top.oy - 1, m = cl(P.pat / 3, 0, 1), pr = 2 + 4.5 * m, hs = 2.4 * (1 - 0.75 * m);\n  for (let y = floor(by - pr); y \u003c= by + pr; y++)\n    for (let x = floor(bx - pr); x \u003c= bx + pr; x++) {\n      const d = hypot(x - bx, y - by) / pr, e = x - bx >= hs - 1 || y - by >= hs - 1;\n      if (d \u003c 1) blend(x, y, 252, 222, 124, 0.55 * (1 - d * d));\n      if (abs(x - bx) \u003c= hs && abs(y - by) \u003c= hs) put(x, y, e ? 222 : 252, e ? 198 : 238, e ? 112 : 160);\n    }\n}\n\n// The turner: a slotted steel blade, its edge up the panel, and a wooden\n// handle toward the cook's right hand. Its shadow goes down first.\nfunction turner(x, y, blade = 1, grip = 1) {\n  const [x0, y0] = [round(x), round(y)];\n  for (const pt of [(x, y) => dim(x + 2, y + 3, 0.55), put]) {\n    for (let j = -5; blade && j \u003c= 5; j++)\n      for (let i = -4; i \u003c= 4; i++) {\n        const k = j === -4 ? 1.1 : 0.9 + 0.01 * j, ai = abs(i);\n        if (j === -5 && ai === 4) continue;\n        if (ai === 4 || abs(j) === 5 || (j === -4 && ai === 3)) pt(x0 + i, y0 + j, 64, 64, 70);\n        else if (!(i & 1) && ai \u003c 3 && abs(j) \u003c 3) pt(x0 + i, y0 + j, 40, 38, 38);\n        else pt(x0 + i, y0 + j, 200 * k, 202 * k, 208 * k);\n      }\n    for (let s = 0; grip && s \u003c 24; s++) {\n      const x = round(x0 + 0.42 * s), y = y0 + 6 + s, k = s === 9 || s === 17 ? 0 : 0.85 + 0.15 * (s & 1);\n      if (s \u003c 4) pt(x, y, 170, 172, 178);\n      else for (let w = 0, f = k; w \u003c 2; w++, f *= 0.8) k ? pt(x + w, y, 156 * f, 100 * f, 58 * f) : pt(x + w, y, 214, 184, 112);\n    }\n  }\n}\n\n// The ladle, full of batter until it pours, its handle toward the left hand.\nfunction ladle(P, { x, y, ph }) {\n  const [x0, y0, bt, full] = [round(x), round(y), BAT[P.bi][0], ph === 3 || ph === 0];\n  for (const pt of [(x, y) => dim(x + 2, y + 3, 0.55), put]) {\n    for (let j = -4; j \u003c= 4; j++)\n      for (let i = -4; i \u003c= 4; i++) {\n        const d = hypot(i, j), k = 0.8 + 0.2 * cos(atan2(j, i) + 2.3);\n        if (d > 3.7) continue;\n        if (d > 2.6) pt(x0 + i, y0 + j, 206 * k, 208 * k, 212 * k);\n        else if (full) pt(x0 + i, y0 + j, bt[0] * 0.95, bt[1] * 0.95, bt[2] * 0.95);\n        else pt(x0 + i, y0 + j, 110, 110, 116);\n      }\n    for (let s = 4; s \u003c 28; s++) pt(round(x0 - 0.5 * s), round(y0 + 0.86 * s), 184, 186, 192);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.slots) return;\n  B = P.buf;\n  B.set(P.bg);\n  iron(P);\n  plate(P);\n  const sp = P.sp, job = sp.job && sp.ph === 1 ? sp.job : null;\n  for (const s of P.slots) {\n    const k = s.cake;\n    if (!k || s === job) continue;\n    if (s.st === POUR) cake(P, k, s.x, s.y, 1, 1, 0, 0, s.rs);\n    else cake(P, k, s.x, s.y, 1, 1, s.st === SIDE2 ? 1 : 0, s.st === SIDE1 ? s.p : 1);\n  }\n  if (job) {\n    // The blade slides under the pancake, so it goes down before it.\n    turner(sp.x, sp.y, 1, 0);\n    if (job.cake && sp.mode === FLIP) {\n      const u = job.u || 0, v = cl((u - 0.3) / 0.55, 0, 1), l = sin(PI * v), up = u > 0.575;\n      if (l > 0) shadow(job.x + 1 + 2 * l, job.y + 2 + 2 * l, job.R, 1 - 0.4 * l);\n      cake(P, job.cake, job.x, job.y - 4 * l, 1 + 0.12 * l, cos(PI * v) * (1 + 0.12 * l), up ? 1 : 0, up ? 1 : job.p);\n    } else if (job.cake) cake(P, job.cake, job.x, job.y, 1, 1, 1, 1);\n    const k = P.carry;\n    if (k) {\n      shadow(k.x + 1 + 2 * k.lift, k.y + 2 + 3 * k.lift, k.R, 0.6);\n      cake(P, k, round(k.x), round(k.y - 2 * k.lift), 1 + 0.1 * k.lift, 1 + 0.1 * k.lift, 1, 1);\n    }\n    turner(sp.x, sp.y, 0, 1);\n  } else turner(sp.x, sp.y);\n  // Steam is white and thins as it rises; smoke is grey.\n  for (const [x0, y0, l, smoke] of P.steam) {\n    const [r, a, c] = smoke ? [4.5, 0.4 * l * cl((P.heat - 0.5) * 2, 0, 1), 128] : [2.6, 0.14 * l, 240];\n    for (let y = floor(y0 - r); y \u003c= y0 + r; y++)\n      for (let x = floor(x0 - r); x \u003c= x0 + r; x++) {\n        const d = hypot(x - x0, y - y0) / r;\n        if (d \u003c 1) blend(x, y, c, c - 2, c - 4, a * (1 - d));\n      }\n  }\n  ladle(P, P.ld);\n  show(display, B, P.G);\n}\n\n// To the panel through a fine grain: neighbouring LEDs lean opposite ways by\n// up to 18 levels, as the iron, the batter and the wood never lie quite flat.\nfunction show(display, buf, G) {\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p++) {\n      const o = p * 3, r = buf[o], g = buf[o + 1], b = buf[o + 2], L = max(r, g, b, 1);\n      const f = 1 + (((x + y) & 1) * 2 - 1) * G[p] * min(17, 0.4 * L) / L;\n      display.setPixel(x, y, min(255, max(0, r * f)), min(255, max(0, g * f)), min(255, max(0, b * f)));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Batter=0..1, Speed=0.2..3, Pancakes=6..12, Heat=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Batter","min":0,"max":1,"about":"Buttermilk at 0, then blueberry, buckwheat and cocoa at 1; the bowl changes at once and the next rounds are poured from it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the cook works: at 2 a pancake takes about 20 s from the ladle to the plate, and the turner flips or serves one every two seconds."},{"name":"Pancakes","min":6,"max":12,"about":"How many rounds are on the iron: six big ones at 6, twelve silver dollars at 12, and still one turner for all of them."},{"name":"Heat","min":0,"max":1,"about":"How hot the griddle runs. At the low end the pancakes come out golden; turned up they cook faster, bubble more, fry dark brown and the oil starts to smoke."}],"start":[0,2,6,0.06],"measures":{"motion":0.2802,"detail":0.2275,"edges":0.2381,"complexity":2.2758,"coverage":0.9979,"colour":0.2408,"drift":0.1011},"knobResponse":[0.1406,0.1266,0.1876,0.1386]},{"slug":"paternoster","title":"Paternoster","family":"machine","round":19,"note":"옛 사무실 건물의 파테르노스터를 기계실에서 피트까지 잘라 보여요. 나무 칸들이 오른쪽으로 오르고 왼쪽으로 내려오며 꼭대기와 바닥의 사슬 바퀴를 넘어가고, 층마다 사람이 지나가는 칸에 올라타고 내려요.","idea":"A paternoster lift in an old office building, cut open from the machine room to the pit: open wooden cabins climb the right shaft and sink down the left on one endless chain, cross over the chain wheels at the top and the bottom, and office workers step in and out as the cabins pass their floor.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Paternoster\n// Family:  machine\n// Idea:    A paternoster lift in an old office building, cut open from the machine room to the pit: open wooden cabins climb the right shaft and sink down the left on one endless chain, cross over the chain wheels at the top and the bottom, and office workers step in and out as the cabins pass their floor.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the paternoster lifts of European office buildings, cabins on a chain that never stops\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Floors=3..6, Busy=0..1\n//\n// Knob 1: Light. The building's lamps, from warm bulbs hanging in each corridor and cabin at 0 to cold fluorescent tubes at 1, with the colour of every wall, cabin and coat under them.\n// Knob 2: Speed. How fast the building runs: at 2 the chain moves 0.35 m/s, as a real paternoster does, and a cabin passes each floor every ten seconds; at 0.2 ten times slower, at 3 half as fast again.\n// Knob 3: Floors. Three to six floors between the machine room and the pit; more floors make the storeys, the cabins and the people smaller and put more cabins on the chain.\n// Knob 4: Busy. How many people come out of the offices to ride: one every three seconds or so in the whole building at 0, a crowd of five at every opening and two in every cabin at 1. One in eight stays on and rides round over the top or under the bottom.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Two shafts side by side: cabins go up on the right, down on the left. A cabin is 15 LEDs\n// wide on a centre line 9 LEDs from the middle, and the chain wheels have that radius.\nconst XC = 32;\nconst R = 9;\nconst XL = XC - R;\nconst XR = XC + R;\nconst HALF = 7;\n// The walls between the corridors and the shafts, with an opening on each floor.\nconst WALL_L = 14;\nconst WALL_R = 49;\n// A storey is 3.5 m; the chain runs at V m/s at Speed 2 and people walk at WALK m/s.\nconst V = 0.35;\nconst WALK = 0.75;\n// A cabin carries two people. They step in or out within WIN of a storey of the floor level.\nconst SEATS = 2;\nconst WIN = 0.12;\nconst STEP = 0.55;\n// People waiting, riding or walking: at most this many in the building.\nconst MAX = 56;\n// Where the people waiting at an opening stand, from the front of the line, in the left\n// corridor; the right one is its mirror.\nconst SPOTS = [11, 6, 8, 3, 1];\nconst WALKIN = 0;\nconst RIDE = 1;\nconst BOARD = 2;\nconst ALIGHT = 3;\nconst WALKOUT = 4;\n\nconst COATS = [[34, 44, 90], [70, 70, 78], [112, 70, 44], [150, 36, 48], [36, 84, 60], [206, 184, 132], [236, 236, 230], [26, 26, 30], [70, 120, 170]];\nconst LEGS = [[44, 44, 50], [30, 36, 70], [24, 24, 28], [90, 66, 46], [150, 140, 128]];\nconst SKIN = [[226, 176, 140], [170, 116, 84], [120, 80, 56], [240, 196, 164]];\nconst HAIR = [[30, 24, 20], [96, 62, 34], [210, 180, 110], [150, 150, 150], [70, 40, 30]];\nconst HAT = [[60, 44, 34], [36, 36, 40], [110, 100, 84]];\n// Floor numbers painted on the corridor walls, 3 by 5.\nconst DIGIT = [\"010110010010111\", \"111001111100111\", \"111001011001111\", \"101101111001001\", \"111100111001111\", \"111100111101111\"];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction mix(a, b, t) {\n  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\n// The building for a number of floors: storey height S, cabin height CH, floor levels\n// (the row people stand on is one above), and the chain's straight runs and length.\nfunction geometry(F) {\n  const S = Math.floor(107 / (F + 1.44));\n  const CH = Math.round(0.72 * S);\n  const top = Math.floor((126 - F * S - 2 * CH - 2 * R) / 2);\n  const Lt = top + S + R + CH;\n  const L = [];\n  for (let i = 0; i \u003c F; i++) L[i] = Lt + (F - 1 - i) * S;\n  // A cabin's floor runs between fTop, where the whole cabin is up in the machine room,\n  // and fBot, where it is down in the pit.\n  const fTop = Lt - S - 2;\n  const fBot = L[0] + CH;\n  const Ls = fBot - fTop;\n  const len = 2 * Ls + 2 * Math.PI * R;\n  const pitch = Math.max(CH + Math.max(3, Math.round(0.3 * S)), 17);\n  const nc = Math.round(len / pitch);\n  return { F, S, CH, Lt, L, fTop, fBot, Ls, len, nc, pitch: len / nc, hp: Math.max(7, Math.round(0.54 * S)), wp: S >= 19 ? 4 : 3, door: Math.round(0.62 * S) };\n}\n\n// Where the chain puts a cabin s rows along it: centre column, floor row and which run:\n// 0 up the right shaft, 1 over the top wheel, 2 down the left shaft, 3 under the bottom wheel.\nfunction pathAt(G, s, out) {\n  s = ((s % G.len) + G.len) % G.len;\n  const arc = Math.PI * R;\n  if (s \u003c G.Ls) {\n    out.cx = XR;\n    out.f = G.fBot - s;\n    out.seg = 0;\n  } else if ((s -= G.Ls) \u003c arc) {\n    out.cx = XC + R * Math.cos(s / R);\n    out.f = G.fTop - R * Math.sin(s / R);\n    out.seg = 1;\n  } else if ((s -= arc) \u003c G.Ls) {\n    out.cx = XL;\n    out.f = G.fTop + s;\n    out.seg = 2;\n  } else {\n    s -= G.Ls;\n    out.cx = XC - R * Math.cos(s / R);\n    out.f = G.fBot + R * Math.sin(s / R);\n    out.seg = 3;\n  }\n}\n\n// The lamps: warm bulbs at 0, a plain white at 0.5, fluorescent at 1.\nfunction lampColour(k) {\n  return k \u003c 0.5 ? mix([255, 192, 120], [255, 240, 218], k * 2) : mix([255, 240, 218], [206, 232, 255], k * 2 - 1);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.bg = new Float32Array(N * 3);\n  P.kind = new Uint8Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.glow = [new Float32Array(H), new Float32Array(H)];\n  P.cab = [];\n  P.pos = { cx: 0, f: 0, seg: 0 };\n  P.t = 0;\n  P.F = -1;\n  P.lightKey = -1;\n}\n\nfunction build(P, F) {\n  P.F = F;\n  P.G = geometry(F);\n  P.s = 0;\n  P.people = [];\n  P.doors = new Float32Array(F * 2);\n  P.cab = [];\n  for (let c = 0; c \u003c P.G.nc; c++) P.cab.push({ cx: 0, f: 0, seg: 0, n: 0 });\n  P.lightKey = -1;\n}\n\n// Each corridor sends people to the lift: side 0 is the left corridor, which rides down,\n// side 1 the right one, which rides up. Someone with nowhere to go that way, or one in\n// eight of the rest, stays on over the top or under the bottom and gets out the other side.\nfunction spawn(P, i, side) {\n  const G = P.G;\n  const dead = side === 1 ? i === G.F - 1 : i === 0;\n  const over = dead || Math.random() \u003c 0.12;\n  let dest;\n  if (!over) dest = side === 1 ? i + 1 + Math.floor(Math.random() * (G.F - 1 - i)) : Math.floor(Math.random() * i);\n  else dest = Math.floor(Math.random() * G.F);\n  P.doors[i * 2 + side] = P.t + 2;\n  P.people.push({\n    st: WALKIN,\n    fl: i,\n    side,\n    x: side === 0 ? 3 : 60,\n    feet: G.L[i] - 1,\n    dest,\n    exit: over ? 1 - side : side,\n    cab: -1,\n    slot: 0,\n    t0: 0,\n    x0: 0,\n    y0: 0,\n    coat: pick(COATS),\n    legs: Math.random() \u003c 0.25 ? null : pick(LEGS),\n    skin: pick(SKIN),\n    hair: pick(HAIR),\n    hat: Math.random() \u003c 0.3 ? pick(HAT) : null,\n    bag: Math.random() \u003c 0.35,\n    ph: Math.random() * 6,\n  });\n}\n\nfunction waiting(people, i, side) {\n  let n = 0;\n  for (const p of people) if (p.st === WALKIN && p.fl === i && p.side === side) n++;\n  return n;\n}\n\nfunction ease(u) {\n  u = clamp(u, 0, 1);\n  return u * u * (3 - 2 * u);\n}\n\nfunction step(P, dt, busy) {\n  const G = P.G;\n  P.t += dt;\n  P.s += (V / 3.5) * G.S * dt;\n  for (let c = 0; c \u003c G.nc; c++) {\n    pathAt(G, P.s + c * G.pitch, P.pos);\n    const k = P.cab[c];\n    k.cx = P.pos.cx;\n    k.f = P.pos.f;\n    k.seg = P.pos.seg;\n    k.n = 0;\n  }\n  const people = P.people;\n  for (const p of people) if (p.cab >= 0) P.cab[p.cab].n++;\n  // New people come out of the office doors.\n  const rate = 0.06 + 0.9 * busy * busy;\n  // A quiet building has two waiting at an opening at most; a busy one a crowd of five.\n  const cap = 2 + Math.round(3 * busy);\n  for (let i = 0; i \u003c G.F; i++)\n    for (let side = 0; side \u003c 2; side++) {\n      const dead = side === 1 ? i === G.F - 1 : i === 0;\n      if (people.length \u003c MAX && Math.random() \u003c rate * dt * (dead ? 0.15 : 1) && waiting(people, i, side) \u003c cap) spawn(P, i, side);\n    }\n  const walk = (WALK / 3.5) * G.S * dt;\n  const win = WIN * G.S;\n  const queue = {};\n  for (let n = 0; n \u003c people.length; n++) {\n    const p = people[n];\n    if (p.st === WALKIN) {\n      // Line up at the opening behind whoever came first.\n      const key = p.fl * 2 + p.side;\n      const q = queue[key] || 0;\n      queue[key] = q + 1;\n      // Two at the front, the rest a step behind them.\n      const sx = SPOTS[Math.min(q, SPOTS.length - 1)];\n      const spot = p.side === 0 ? sx : W - 1 - sx;\n      p.back = q >= 2 && q \u003c 4;\n      p.feet = G.L[p.fl] - (p.back ? 2 : 1);\n      const d = spot - p.x;\n      p.walking = Math.abs(d) > 0.3;\n      p.x += clamp(d, -walk, walk);\n      // The first two in line can step into the same cabin side by side.\n      if (q \u003c SEATS && !p.walking) {\n        const want = p.side === 1 ? 0 : 2;\n        for (let c = 0; c \u003c G.nc; c++) {\n          const k = P.cab[c];\n          if (k.seg !== want || k.n >= SEATS) continue;\n          // Step in while the cabin floor is coming level, not once it is past.\n          const off = (k.f - G.L[p.fl]) * (want === 0 ? 1 : -1);\n          if (off > win || off \u003c -0.3 * win) continue;\n          const taken = people.some((o) => o.cab === c && o.slot === 0);\n          p.slot = taken ? 1 : 0;\n          p.cab = c;\n          p.st = BOARD;\n          p.t0 = P.t;\n          p.x0 = p.x;\n          p.y0 = p.feet;\n          k.n++;\n          break;\n        }\n      }\n    } else if (p.st === BOARD || p.st === RIDE) {\n      const k = P.cab[p.cab];\n      const sx = k.cx + (p.slot ? 3 : -3);\n      if (p.st === BOARD) {\n        const u = ease((P.t - p.t0) / STEP);\n        p.x = p.x0 + (sx - p.x0) * u;\n        p.feet = p.y0 + (k.f - 1 - p.y0) * u;\n        p.walking = u \u003c 1;\n        if (u >= 1) p.st = RIDE;\n      } else {\n        p.x = sx;\n        p.feet = k.f - 1;\n        p.walking = false;\n        const want = p.exit === 1 ? 0 : 2;\n        if (k.seg === want && Math.abs(k.f - G.L[p.dest]) \u003c 0.6 * win) {\n          p.st = ALIGHT;\n          p.t0 = P.t;\n          p.x0 = p.x;\n          p.y0 = p.feet;\n          p.side = p.exit;\n          p.fl = p.dest;\n          p.cab = -1;\n        }\n      }\n    } else if (p.st === ALIGHT) {\n      const u = ease((P.t - p.t0) / STEP);\n      const ex = p.side === 0 ? WALL_L - 2 : WALL_R + 3;\n      p.x = p.x0 + (ex - p.x0) * u;\n      p.feet = p.y0 + (G.L[p.fl] - 1 - p.y0) * u;\n      p.walking = true;\n      if (u >= 1) p.st = WALKOUT;\n    } else {\n      const door = p.side === 0 ? 3 : 60;\n      p.x += clamp(door - p.x, -walk, walk);\n      p.walking = true;\n      if (Math.abs(door - p.x) \u003c 2) P.doors[p.fl * 2 + p.side] = P.t + 1.5;\n      if (Math.abs(door - p.x) \u003c 0.3) p.gone = true;\n    }\n  }\n  if (people.some((p) => p.gone)) P.people = people.filter((p) => !p.gone);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.light = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const F = Math.round(clamp(k[2], 3, 6));\n  const busy = clamp(k[3], 0, 1);\n  if (F !== P.F) {\n    // A new building: the chain has been running a while and people are about.\n    build(P, F);\n    P.s = Math.random() * P.G.len;\n    for (let i = 0; i \u003c 300; i++) step(P, 0.1, busy);\n    // Then three more seconds at the knob's pace, so Speed shows from the start.\n    for (let i = 0; i \u003c 30; i++) step(P, 0.05 * speed, busy);\n  }\n  step(P, (dt * speed) / 2, busy);\n}\n\n// The building behind the cabins, lit by the lamps: machine room, storeys, slabs, shaft\n// walls with an opening on each floor, the column between the shafts, the pit.\nfunction background(P) {\n  const G = P.G;\n  const lc = lampColour(P.light).map((v) => v / 255);\n  const tube = P.light;\n  const bg = P.bg;\n  const kind = P.kind;\n  const roomFloor = G.Lt - G.S;\n  const pitTop = G.L[0] + 2;\n  for (let y = 0; y \u003c H; y++) {\n    // Which storey this row is in (0 at the bottom), or -1 in a slab, machine room or pit.\n    let st = -1;\n    let slab = false;\n    let level = 0;\n    if (y >= roomFloor && y \u003c pitTop) {\n      const k = Math.floor((G.L[0] + 1 - y) / G.S);\n      const i = clamp(k, 0, G.F - 1);\n      const r = G.L[0] - i * G.S - y;\n      if (r \u003c= 0 && r >= -1) slab = true;\n      else if (y \u003c roomFloor + 2) slab = true;\n      else {\n        st = r > 0 ? i : i - 1;\n        level = G.L[st];\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let c;\n      let k = 0;\n      const shaft = (x > WALL_L && x \u003c 31) || (x > 33 && x \u003c WALL_R);\n      const inShafts = y >= roomFloor && y \u003c pitTop;\n      if (y \u003c roomFloor) {\n        // Machine room: dark walls, a caged bulb on the left.\n        const d = Math.hypot(x - 6, y - 4);\n        const l = 0.5 + 1.6 / (1 + (d * d) / 60);\n        c = [30 * l, 32 * l, 40 * l];\n        if (d \u003c 1.2) c = [255, 214, 150];\n        // The motor on the right, with its drive wheel.\n        if (x >= 52 && x \u003c= 61 && y >= roomFloor - 7 && y \u003c roomFloor) c = y === roomFloor - 7 ? [80, 96, 86] : [52, 70, 62];\n        const my = roomFloor - 11;\n        if (Math.abs(Math.hypot(x - 56.5, y - my) - 2.8) \u003c 0.6) c = [96, 100, 108];\n        // Its belt runs to the axle of the top chain wheel.\n        const wy = G.fTop - (G.CH - 2) / 2;\n        if (x > XC && x \u003c 56 && (Math.abs(y - (my - 2.8 + ((wy - 1.5 - my + 2.8) * (56.5 - x)) / (56.5 - XC))) \u003c 0.5 || Math.abs(y - (my + 2.8 + ((wy + 1.5 - my - 2.8) * (56.5 - x)) / (56.5 - XC))) \u003c 0.5)) c = [62, 56, 52];\n      } else if (y >= pitTop) {\n        // The pit: bare concrete and an iron ladder.\n        const l = 0.75 - 0.3 * ((y - pitTop) / Math.max(1, H - pitTop));\n        c = [44 * l, 44 * l, 50 * l];\n        if ((x === 3 || x === 7) && y \u003c H - 1) c = [70, 60, 50];\n        if (x > 3 && x \u003c 7 && (y - pitTop) % 4 === 2) c = [70, 60, 50];\n      } else if (inShafts && shaft) {\n        // Shaft back wall, brick, lit by the cabins going by.\n        const mortar = y % 3 === 0 || (x + (Math.floor(y / 3) % 2) * 3) % 6 === 0;\n        c = mortar ? [40, 36, 36] : [92, 64, 52];\n        k = x \u003c XC ? 1 : 2;\n      } else if (inShafts && x >= 31 && x \u003c= 33) {\n        // The steel column between the shafts.\n        c = x === 32 ? [70, 78, 96] : [44, 50, 62];\n        if (x === 32 && y % 5 === 0) c = [120, 126, 140];\n      } else if (slab) {\n        c = y === roomFloor || (y > roomFloor && (G.L.includes(y) || y === pitTop - 2)) ? [150, 128, 104] : [96, 94, 92];\n      } else if (x === WALL_L || x === WALL_R) {\n        // The corridor walls by the shafts, open on each floor.\n        const open = st >= 0 && y >= level - G.door;\n        c = open ? [26, 22, 22] : [120, 124, 112];\n      } else {\n        // A corridor: cream wall, a band of green tiles, the office door and the floor's number.\n        const left = x \u003c WALL_L;\n        const cx = left ? 6 : 57;\n        const ty = level - G.S + 2;\n        const h = level - y;\n        const dx = x - cx;\n        const dy = y - ty;\n        const pool = 1 / (1 + (dx * dx + dy * dy) / (40 + 260 * tube));\n        const l = (0.42 + 0.3 * tube) + (0.85 - 0.25 * tube) * pool;\n        if (h \u003c= Math.round(0.36 * G.S)) c = x % 3 === 0 || h % 3 === 0 ? [40, 96, 74] : [64, 142, 108];\n        else c = [228, 214, 184];\n        const door = left ? x >= 0 && x \u003c= 3 : x >= 60;\n        if (door && h \u003c= G.door) c = h > G.door - Math.round(G.door * 0.4) && (left ? x >= 1 && x \u003c= 2 : x >= 61 && x \u003c= 62) ? [255, 228, 170] : [100, 60, 36];\n        // The number, beside the opening at the top of the storey.\n        const nx = left ? 9 : 52;\n        const ny = ty + 2;\n        if (x >= nx && x \u003c nx + 3 && y >= ny && y \u003c ny + 5 && DIGIT[Math.min(st, 5)][(y - ny) * 3 + x - nx] === \"1\") c = [40, 40, 64];\n        c = [c[0] * l, c[1] * l, c[2] * l];\n        // The lamp under the slab: a bulb on its cord, or a tube that grows with the Light knob.\n        const bulb = tube \u003c 0.5;\n        if (y === ty + (bulb ? 1 : 0) && Math.abs(dx) \u003c= 0.6 + 3.4 * tube) c = [255, 255, 255];\n        if (bulb && y === ty && dx === 0) c = [90, 90, 90];\n      }\n      // The corridors are under the building's lamps; the machine room and the pit have their\n      // own bulb, and the shaft walls are lit by the cabins as they pass.\n      const m = k || y \u003c roomFloor || y >= pitTop ? [1, 1, 1] : lc;\n      bg[o] = c[0] * m[0];\n      bg[o + 1] = c[1] * m[1];\n      bg[o + 2] = c[2] * m[2];\n      kind[p] = k;\n    }\n  }\n}\n\nfunction put(buf, x, y, c, m) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = c[0] * m[0];\n  buf[o + 1] = c[1] * m[1];\n  buf[o + 2] = c[2] * m[2];\n}\n\n// One cabin: roof, posts, varnished panelling lit from the lamp under the roof, a brass\n// handrail, the floor with its brass edge.\nfunction cabin(P, buf, k, lc) {\n  const G = P.G;\n  const x0 = Math.round(k.cx) - HALF;\n  const f = Math.round(k.f);\n  const top = f - G.CH + 2;\n  const rail = top + Math.round(G.CH * 0.55);\n  const tube = P.light;\n  for (let y = top; y \u003c= f + 1; y++) {\n    if (y \u003c 0 || y >= H) continue;\n    const dy = y - top - 2;\n    for (let i = 0; i \u003c= 2 * HALF; i++) {\n      const x = x0 + i;\n      let c;\n      let m = lc;\n      // The lamp's light on the panelling: a pool under a bulb, even under a tube.\n      const d2 = (i - HALF) * (i - HALF) + dy * dy * 1.6;\n      const l = (0.42 + 0.3 * tube) + (0.85 - 0.3 * tube) / (1 + d2 / (14 + 60 * tube));\n      if (y === top) c = [44, 30, 24];\n      else if (y === top + 1) c = [74, 48, 32];\n      else if (y === f) c = [200, 154, 72];\n      else if (y === f + 1) c = [40, 32, 28];\n      else if (i === 0 || i === 2 * HALF) c = [134, 86, 48];\n      else if (y === top + 2 && Math.abs(i - HALF) \u003c= 0.6 + 3.4 * tube) {\n        c = [255, 255, 255];\n        m = [1, 1, 1];\n      } else if (i \u003c= 2 || i >= 2 * HALF - 2) c = [96 * l, 58 * l, 34 * l];\n      else if (y === rail) c = [190 * l, 146 * l, 66 * l];\n      else {\n        const seam = (i - 3) % 4 === 3 ? 0.72 : 1;\n        c = [172 * l * seam, 98 * l * seam, 54 * l * seam];\n      }\n      put(buf, x, y, c, m);\n    }\n  }\n}\n\nfunction person(P, buf, p, m) {\n  const G = P.G;\n  const h = G.hp;\n  const x = Math.round(p.x);\n  const feet = Math.round(p.feet);\n  const face = h >= 10 ? 2 : 1;\n  const torso = Math.round((h - 2 - face) * 0.5);\n  const legs = h - 2 - face - torso;\n  const l0 = G.wp === 4 ? -2 : -1;\n  const stride = p.walking && Math.floor(P.t * 5 + p.ph) % 2 === 0;\n  let y = feet;\n  // Shoes and legs, together standing and apart in mid stride; a skirt over stockings.\n  for (let r = 0; r \u003c= legs; r++, y--) {\n    const skirt = !p.legs && r >= legs - 1 && r > 0;\n    const c = r === 0 ? [28, 24, 22] : skirt ? p.coat : p.legs || p.skin;\n    if (skirt) for (let i = l0; i \u003c= 1; i++) put(buf, x + i, y, c, m);\n    else if (stride && r \u003c legs) {\n      put(buf, x + l0, y, c, m);\n      put(buf, x + 1, y, c, m);\n    } else {\n      put(buf, x - 1, y, c, m);\n      put(buf, x, y, c, m);\n    }\n  }\n  for (let r = 0; r \u003c torso; r++, y--) for (let i = l0; i \u003c= 1; i++) put(buf, x + i, y, p.coat, m);\n  if (p.bag) {\n    const bx = p.side === 0 ? x + 2 : x + l0 - 1;\n    put(buf, bx, feet - legs + 1, [120, 72, 36], m);\n    put(buf, bx, feet - legs + 2, [120, 72, 36], m);\n  }\n  for (let r = 0; r \u003c face; r++, y--) {\n    put(buf, x - 1, y, p.skin, m);\n    put(buf, x, y, p.skin, m);\n  }\n  const top = p.hat || p.hair;\n  put(buf, x - 1, y, top, m);\n  put(buf, x, y, top, m);\n  if (p.hat) {\n    put(buf, x - 2, y + 1, p.hat, m);\n    put(buf, x + 1, y + 1, p.hat, m);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const G = P.G;\n  if (P.lightKey !== P.light) {\n    P.lightKey = P.light;\n    background(P);\n  }\n  const lc = lampColour(P.light).map((v) => v / 255);\n  const buf = P.buf;\n  buf.set(P.bg);\n  // Cabin light spills on to the shaft walls above and below each cabin.\n  for (let side = 0; side \u003c 2; side++) {\n    const g = P.glow[side];\n    g.fill(0.32);\n    for (const k of P.cab) {\n      if (k.seg !== (side ? 0 : 2)) continue;\n      const f = Math.round(k.f);\n      const top = f - G.CH + 2;\n      for (let d = 1; d \u003c= 8; d++) {\n        const v = 0.32 + 0.75 * Math.exp(-d / 2.5);\n        if (top - d >= 0) g[top - d] = Math.max(g[top - d], v);\n        if (f + 1 + d \u003c H) g[f + 1 + d] = Math.max(g[f + 1 + d], 0.32 + 0.4 * Math.exp(-d / 2));\n      }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const k = P.kind[p];\n    if (!k) continue;\n    const g = P.glow[k - 1][Math.floor(p / W)];\n    const o = p * 3;\n    buf[o] *= g * lc[0];\n    buf[o + 1] *= g * lc[1];\n    buf[o + 2] *= g * lc[2];\n  }\n  // The chain along the cabins' middle line, links moving with it, and the two wheels.\n  const mid = (G.CH - 2) / 2;\n  const pos = P.pos;\n  for (let s = 0; s \u003c G.len; s += 0.7) {\n    pathAt(G, s, pos);\n    const link = Math.floor((s - P.s) / 2) & 1;\n    const x = Math.round(pos.cx);\n    const y = Math.round(pos.f - mid);\n    put(buf, x, y, link ? [150, 150, 160] : [70, 70, 80], [1, 1, 1]);\n  }\n  for (const [wy, dir] of [[G.fTop - mid, 1], [G.fBot - mid, -1]]) {\n    const a0 = (dir * P.s) / R;\n    for (let sp = 0; sp \u003c 6; sp++) {\n      const a = a0 + (sp * Math.PI) / 3;\n      for (let r = 1; r \u003c R - 1; r += 0.7) put(buf, Math.round(XC + r * Math.cos(a)), Math.round(wy - r * Math.sin(a)), [96, 100, 112], [1, 1, 1]);\n    }\n    for (let a = 0; a \u003c 6.3; a += 0.12) put(buf, Math.round(XC + (R - 1) * Math.cos(a)), Math.round(wy + (R - 1) * Math.sin(a)), [120, 124, 136], [1, 1, 1]);\n    put(buf, XC, Math.round(wy), [190, 190, 200], [1, 1, 1]);\n  }\n  // An office door stands open while someone comes out or goes in, and the office shows.\n  for (let i = 0; i \u003c G.F; i++)\n    for (let side = 0; side \u003c 2; side++) {\n      if (P.doors[i * 2 + side] \u003c= P.t) continue;\n      const L = G.L[i];\n      // Office light spills out across the corridor floor and wall beside the door.\n      for (let y = L - G.door; y \u003c L; y++)\n        for (let j = 5; j \u003c 13; j++) {\n          const o = (y * W + (side === 0 ? j : W - 1 - j)) * 3;\n          const g = 1 + 0.9 * Math.exp(-(j - 5) / 4) * (0.4 + 0.6 * (y - L + G.door) / G.door);\n          buf[o] *= g;\n          buf[o + 1] *= g;\n          buf[o + 2] *= g;\n        }\n      for (let y = L - G.door; y \u003c L; y++)\n        for (let j = 0; j \u003c 5; j++) {\n          const x = side === 0 ? j : W - 1 - j;\n          const c = j === 4 ? [92, 56, 34] : y === L - 1 ? [120, 96, 70] : (y - L) % 4 === 0 && j \u003c 3 ? [150, 120, 80] : [250, 236, 200];\n          put(buf, x, y, c, j === 4 ? lc : [0.95, 0.92, 0.85]);\n        }\n    }\n  for (const k of P.cab) cabin(P, buf, k, lc);\n  // People: in the corridors under the corridor lamps, in the cabins under the cabin lamp.\n  // The second row of a crowd first, a little further from the lamp.\n  for (const back of [true, false])\n    for (const p of P.people) {\n      if (!p.back !== !back) continue;\n      const l = p.st === RIDE || p.st === BOARD ? 1 : back ? 0.74 : 0.92;\n      person(P, buf, p, [lc[0] * l, lc[1] * l, lc[2] * l]);\n    }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), clamp(buf[o], 0, 255), clamp(buf[o + 1], 0, 255), clamp(buf[o + 2], 0, 255));\n  }\n}\n","layer":{"id":"layer-paternoster","type":"code","name":"paternoster","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Paternoster\n// Family:  machine\n// Idea:    A paternoster lift in an old office building, cut open from the machine room to the pit: open wooden cabins climb the right shaft and sink down the left on one endless chain, cross over the chain wheels at the top and the bottom, and office workers step in and out as the cabins pass their floor.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the paternoster lifts of European office buildings, cabins on a chain that never stops\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Floors=3..6, Busy=0..1\n//\n// Knob 1: Light. The building's lamps, from warm bulbs hanging in each corridor and cabin at 0 to cold fluorescent tubes at 1, with the colour of every wall, cabin and coat under them.\n// Knob 2: Speed. How fast the building runs: at 2 the chain moves 0.35 m/s, as a real paternoster does, and a cabin passes each floor every ten seconds; at 0.2 ten times slower, at 3 half as fast again.\n// Knob 3: Floors. Three to six floors between the machine room and the pit; more floors make the storeys, the cabins and the people smaller and put more cabins on the chain.\n// Knob 4: Busy. How many people come out of the offices to ride: one every three seconds or so in the whole building at 0, a crowd of five at every opening and two in every cabin at 1. One in eight stays on and rides round over the top or under the bottom.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Two shafts side by side: cabins go up on the right, down on the left. A cabin is 15 LEDs\n// wide on a centre line 9 LEDs from the middle, and the chain wheels have that radius.\nconst XC = 32;\nconst R = 9;\nconst XL = XC - R;\nconst XR = XC + R;\nconst HALF = 7;\n// The walls between the corridors and the shafts, with an opening on each floor.\nconst WALL_L = 14;\nconst WALL_R = 49;\n// A storey is 3.5 m; the chain runs at V m/s at Speed 2 and people walk at WALK m/s.\nconst V = 0.35;\nconst WALK = 0.75;\n// A cabin carries two people. They step in or out within WIN of a storey of the floor level.\nconst SEATS = 2;\nconst WIN = 0.12;\nconst STEP = 0.55;\n// People waiting, riding or walking: at most this many in the building.\nconst MAX = 56;\n// Where the people waiting at an opening stand, from the front of the line, in the left\n// corridor; the right one is its mirror.\nconst SPOTS = [11, 6, 8, 3, 1];\nconst WALKIN = 0;\nconst RIDE = 1;\nconst BOARD = 2;\nconst ALIGHT = 3;\nconst WALKOUT = 4;\n\nconst COATS = [[34, 44, 90], [70, 70, 78], [112, 70, 44], [150, 36, 48], [36, 84, 60], [206, 184, 132], [236, 236, 230], [26, 26, 30], [70, 120, 170]];\nconst LEGS = [[44, 44, 50], [30, 36, 70], [24, 24, 28], [90, 66, 46], [150, 140, 128]];\nconst SKIN = [[226, 176, 140], [170, 116, 84], [120, 80, 56], [240, 196, 164]];\nconst HAIR = [[30, 24, 20], [96, 62, 34], [210, 180, 110], [150, 150, 150], [70, 40, 30]];\nconst HAT = [[60, 44, 34], [36, 36, 40], [110, 100, 84]];\n// Floor numbers painted on the corridor walls, 3 by 5.\nconst DIGIT = [\"010110010010111\", \"111001111100111\", \"111001011001111\", \"101101111001001\", \"111100111001111\", \"111100111101111\"];\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction mix(a, b, t) {\n  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\n// The building for a number of floors: storey height S, cabin height CH, floor levels\n// (the row people stand on is one above), and the chain's straight runs and length.\nfunction geometry(F) {\n  const S = Math.floor(107 / (F + 1.44));\n  const CH = Math.round(0.72 * S);\n  const top = Math.floor((126 - F * S - 2 * CH - 2 * R) / 2);\n  const Lt = top + S + R + CH;\n  const L = [];\n  for (let i = 0; i \u003c F; i++) L[i] = Lt + (F - 1 - i) * S;\n  // A cabin's floor runs between fTop, where the whole cabin is up in the machine room,\n  // and fBot, where it is down in the pit.\n  const fTop = Lt - S - 2;\n  const fBot = L[0] + CH;\n  const Ls = fBot - fTop;\n  const len = 2 * Ls + 2 * Math.PI * R;\n  const pitch = Math.max(CH + Math.max(3, Math.round(0.3 * S)), 17);\n  const nc = Math.round(len / pitch);\n  return { F, S, CH, Lt, L, fTop, fBot, Ls, len, nc, pitch: len / nc, hp: Math.max(7, Math.round(0.54 * S)), wp: S >= 19 ? 4 : 3, door: Math.round(0.62 * S) };\n}\n\n// Where the chain puts a cabin s rows along it: centre column, floor row and which run:\n// 0 up the right shaft, 1 over the top wheel, 2 down the left shaft, 3 under the bottom wheel.\nfunction pathAt(G, s, out) {\n  s = ((s % G.len) + G.len) % G.len;\n  const arc = Math.PI * R;\n  if (s \u003c G.Ls) {\n    out.cx = XR;\n    out.f = G.fBot - s;\n    out.seg = 0;\n  } else if ((s -= G.Ls) \u003c arc) {\n    out.cx = XC + R * Math.cos(s / R);\n    out.f = G.fTop - R * Math.sin(s / R);\n    out.seg = 1;\n  } else if ((s -= arc) \u003c G.Ls) {\n    out.cx = XL;\n    out.f = G.fTop + s;\n    out.seg = 2;\n  } else {\n    s -= G.Ls;\n    out.cx = XC - R * Math.cos(s / R);\n    out.f = G.fBot + R * Math.sin(s / R);\n    out.seg = 3;\n  }\n}\n\n// The lamps: warm bulbs at 0, a plain white at 0.5, fluorescent at 1.\nfunction lampColour(k) {\n  return k \u003c 0.5 ? mix([255, 192, 120], [255, 240, 218], k * 2) : mix([255, 240, 218], [206, 232, 255], k * 2 - 1);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.bg = new Float32Array(N * 3);\n  P.kind = new Uint8Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.glow = [new Float32Array(H), new Float32Array(H)];\n  P.cab = [];\n  P.pos = { cx: 0, f: 0, seg: 0 };\n  P.t = 0;\n  P.F = -1;\n  P.lightKey = -1;\n}\n\nfunction build(P, F) {\n  P.F = F;\n  P.G = geometry(F);\n  P.s = 0;\n  P.people = [];\n  P.doors = new Float32Array(F * 2);\n  P.cab = [];\n  for (let c = 0; c \u003c P.G.nc; c++) P.cab.push({ cx: 0, f: 0, seg: 0, n: 0 });\n  P.lightKey = -1;\n}\n\n// Each corridor sends people to the lift: side 0 is the left corridor, which rides down,\n// side 1 the right one, which rides up. Someone with nowhere to go that way, or one in\n// eight of the rest, stays on over the top or under the bottom and gets out the other side.\nfunction spawn(P, i, side) {\n  const G = P.G;\n  const dead = side === 1 ? i === G.F - 1 : i === 0;\n  const over = dead || Math.random() \u003c 0.12;\n  let dest;\n  if (!over) dest = side === 1 ? i + 1 + Math.floor(Math.random() * (G.F - 1 - i)) : Math.floor(Math.random() * i);\n  else dest = Math.floor(Math.random() * G.F);\n  P.doors[i * 2 + side] = P.t + 2;\n  P.people.push({\n    st: WALKIN,\n    fl: i,\n    side,\n    x: side === 0 ? 3 : 60,\n    feet: G.L[i] - 1,\n    dest,\n    exit: over ? 1 - side : side,\n    cab: -1,\n    slot: 0,\n    t0: 0,\n    x0: 0,\n    y0: 0,\n    coat: pick(COATS),\n    legs: Math.random() \u003c 0.25 ? null : pick(LEGS),\n    skin: pick(SKIN),\n    hair: pick(HAIR),\n    hat: Math.random() \u003c 0.3 ? pick(HAT) : null,\n    bag: Math.random() \u003c 0.35,\n    ph: Math.random() * 6,\n  });\n}\n\nfunction waiting(people, i, side) {\n  let n = 0;\n  for (const p of people) if (p.st === WALKIN && p.fl === i && p.side === side) n++;\n  return n;\n}\n\nfunction ease(u) {\n  u = clamp(u, 0, 1);\n  return u * u * (3 - 2 * u);\n}\n\nfunction step(P, dt, busy) {\n  const G = P.G;\n  P.t += dt;\n  P.s += (V / 3.5) * G.S * dt;\n  for (let c = 0; c \u003c G.nc; c++) {\n    pathAt(G, P.s + c * G.pitch, P.pos);\n    const k = P.cab[c];\n    k.cx = P.pos.cx;\n    k.f = P.pos.f;\n    k.seg = P.pos.seg;\n    k.n = 0;\n  }\n  const people = P.people;\n  for (const p of people) if (p.cab >= 0) P.cab[p.cab].n++;\n  // New people come out of the office doors.\n  const rate = 0.06 + 0.9 * busy * busy;\n  // A quiet building has two waiting at an opening at most; a busy one a crowd of five.\n  const cap = 2 + Math.round(3 * busy);\n  for (let i = 0; i \u003c G.F; i++)\n    for (let side = 0; side \u003c 2; side++) {\n      const dead = side === 1 ? i === G.F - 1 : i === 0;\n      if (people.length \u003c MAX && Math.random() \u003c rate * dt * (dead ? 0.15 : 1) && waiting(people, i, side) \u003c cap) spawn(P, i, side);\n    }\n  const walk = (WALK / 3.5) * G.S * dt;\n  const win = WIN * G.S;\n  const queue = {};\n  for (let n = 0; n \u003c people.length; n++) {\n    const p = people[n];\n    if (p.st === WALKIN) {\n      // Line up at the opening behind whoever came first.\n      const key = p.fl * 2 + p.side;\n      const q = queue[key] || 0;\n      queue[key] = q + 1;\n      // Two at the front, the rest a step behind them.\n      const sx = SPOTS[Math.min(q, SPOTS.length - 1)];\n      const spot = p.side === 0 ? sx : W - 1 - sx;\n      p.back = q >= 2 && q \u003c 4;\n      p.feet = G.L[p.fl] - (p.back ? 2 : 1);\n      const d = spot - p.x;\n      p.walking = Math.abs(d) > 0.3;\n      p.x += clamp(d, -walk, walk);\n      // The first two in line can step into the same cabin side by side.\n      if (q \u003c SEATS && !p.walking) {\n        const want = p.side === 1 ? 0 : 2;\n        for (let c = 0; c \u003c G.nc; c++) {\n          const k = P.cab[c];\n          if (k.seg !== want || k.n >= SEATS) continue;\n          // Step in while the cabin floor is coming level, not once it is past.\n          const off = (k.f - G.L[p.fl]) * (want === 0 ? 1 : -1);\n          if (off > win || off \u003c -0.3 * win) continue;\n          const taken = people.some((o) => o.cab === c && o.slot === 0);\n          p.slot = taken ? 1 : 0;\n          p.cab = c;\n          p.st = BOARD;\n          p.t0 = P.t;\n          p.x0 = p.x;\n          p.y0 = p.feet;\n          k.n++;\n          break;\n        }\n      }\n    } else if (p.st === BOARD || p.st === RIDE) {\n      const k = P.cab[p.cab];\n      const sx = k.cx + (p.slot ? 3 : -3);\n      if (p.st === BOARD) {\n        const u = ease((P.t - p.t0) / STEP);\n        p.x = p.x0 + (sx - p.x0) * u;\n        p.feet = p.y0 + (k.f - 1 - p.y0) * u;\n        p.walking = u \u003c 1;\n        if (u >= 1) p.st = RIDE;\n      } else {\n        p.x = sx;\n        p.feet = k.f - 1;\n        p.walking = false;\n        const want = p.exit === 1 ? 0 : 2;\n        if (k.seg === want && Math.abs(k.f - G.L[p.dest]) \u003c 0.6 * win) {\n          p.st = ALIGHT;\n          p.t0 = P.t;\n          p.x0 = p.x;\n          p.y0 = p.feet;\n          p.side = p.exit;\n          p.fl = p.dest;\n          p.cab = -1;\n        }\n      }\n    } else if (p.st === ALIGHT) {\n      const u = ease((P.t - p.t0) / STEP);\n      const ex = p.side === 0 ? WALL_L - 2 : WALL_R + 3;\n      p.x = p.x0 + (ex - p.x0) * u;\n      p.feet = p.y0 + (G.L[p.fl] - 1 - p.y0) * u;\n      p.walking = true;\n      if (u >= 1) p.st = WALKOUT;\n    } else {\n      const door = p.side === 0 ? 3 : 60;\n      p.x += clamp(door - p.x, -walk, walk);\n      p.walking = true;\n      if (Math.abs(door - p.x) \u003c 2) P.doors[p.fl * 2 + p.side] = P.t + 1.5;\n      if (Math.abs(door - p.x) \u003c 0.3) p.gone = true;\n    }\n  }\n  if (people.some((p) => p.gone)) P.people = people.filter((p) => !p.gone);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.light = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const F = Math.round(clamp(k[2], 3, 6));\n  const busy = clamp(k[3], 0, 1);\n  if (F !== P.F) {\n    // A new building: the chain has been running a while and people are about.\n    build(P, F);\n    P.s = Math.random() * P.G.len;\n    for (let i = 0; i \u003c 300; i++) step(P, 0.1, busy);\n    // Then three more seconds at the knob's pace, so Speed shows from the start.\n    for (let i = 0; i \u003c 30; i++) step(P, 0.05 * speed, busy);\n  }\n  step(P, (dt * speed) / 2, busy);\n}\n\n// The building behind the cabins, lit by the lamps: machine room, storeys, slabs, shaft\n// walls with an opening on each floor, the column between the shafts, the pit.\nfunction background(P) {\n  const G = P.G;\n  const lc = lampColour(P.light).map((v) => v / 255);\n  const tube = P.light;\n  const bg = P.bg;\n  const kind = P.kind;\n  const roomFloor = G.Lt - G.S;\n  const pitTop = G.L[0] + 2;\n  for (let y = 0; y \u003c H; y++) {\n    // Which storey this row is in (0 at the bottom), or -1 in a slab, machine room or pit.\n    let st = -1;\n    let slab = false;\n    let level = 0;\n    if (y >= roomFloor && y \u003c pitTop) {\n      const k = Math.floor((G.L[0] + 1 - y) / G.S);\n      const i = clamp(k, 0, G.F - 1);\n      const r = G.L[0] - i * G.S - y;\n      if (r \u003c= 0 && r >= -1) slab = true;\n      else if (y \u003c roomFloor + 2) slab = true;\n      else {\n        st = r > 0 ? i : i - 1;\n        level = G.L[st];\n      }\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let c;\n      let k = 0;\n      const shaft = (x > WALL_L && x \u003c 31) || (x > 33 && x \u003c WALL_R);\n      const inShafts = y >= roomFloor && y \u003c pitTop;\n      if (y \u003c roomFloor) {\n        // Machine room: dark walls, a caged bulb on the left.\n        const d = Math.hypot(x - 6, y - 4);\n        const l = 0.5 + 1.6 / (1 + (d * d) / 60);\n        c = [30 * l, 32 * l, 40 * l];\n        if (d \u003c 1.2) c = [255, 214, 150];\n        // The motor on the right, with its drive wheel.\n        if (x >= 52 && x \u003c= 61 && y >= roomFloor - 7 && y \u003c roomFloor) c = y === roomFloor - 7 ? [80, 96, 86] : [52, 70, 62];\n        const my = roomFloor - 11;\n        if (Math.abs(Math.hypot(x - 56.5, y - my) - 2.8) \u003c 0.6) c = [96, 100, 108];\n        // Its belt runs to the axle of the top chain wheel.\n        const wy = G.fTop - (G.CH - 2) / 2;\n        if (x > XC && x \u003c 56 && (Math.abs(y - (my - 2.8 + ((wy - 1.5 - my + 2.8) * (56.5 - x)) / (56.5 - XC))) \u003c 0.5 || Math.abs(y - (my + 2.8 + ((wy + 1.5 - my - 2.8) * (56.5 - x)) / (56.5 - XC))) \u003c 0.5)) c = [62, 56, 52];\n      } else if (y >= pitTop) {\n        // The pit: bare concrete and an iron ladder.\n        const l = 0.75 - 0.3 * ((y - pitTop) / Math.max(1, H - pitTop));\n        c = [44 * l, 44 * l, 50 * l];\n        if ((x === 3 || x === 7) && y \u003c H - 1) c = [70, 60, 50];\n        if (x > 3 && x \u003c 7 && (y - pitTop) % 4 === 2) c = [70, 60, 50];\n      } else if (inShafts && shaft) {\n        // Shaft back wall, brick, lit by the cabins going by.\n        const mortar = y % 3 === 0 || (x + (Math.floor(y / 3) % 2) * 3) % 6 === 0;\n        c = mortar ? [40, 36, 36] : [92, 64, 52];\n        k = x \u003c XC ? 1 : 2;\n      } else if (inShafts && x >= 31 && x \u003c= 33) {\n        // The steel column between the shafts.\n        c = x === 32 ? [70, 78, 96] : [44, 50, 62];\n        if (x === 32 && y % 5 === 0) c = [120, 126, 140];\n      } else if (slab) {\n        c = y === roomFloor || (y > roomFloor && (G.L.includes(y) || y === pitTop - 2)) ? [150, 128, 104] : [96, 94, 92];\n      } else if (x === WALL_L || x === WALL_R) {\n        // The corridor walls by the shafts, open on each floor.\n        const open = st >= 0 && y >= level - G.door;\n        c = open ? [26, 22, 22] : [120, 124, 112];\n      } else {\n        // A corridor: cream wall, a band of green tiles, the office door and the floor's number.\n        const left = x \u003c WALL_L;\n        const cx = left ? 6 : 57;\n        const ty = level - G.S + 2;\n        const h = level - y;\n        const dx = x - cx;\n        const dy = y - ty;\n        const pool = 1 / (1 + (dx * dx + dy * dy) / (40 + 260 * tube));\n        const l = (0.42 + 0.3 * tube) + (0.85 - 0.25 * tube) * pool;\n        if (h \u003c= Math.round(0.36 * G.S)) c = x % 3 === 0 || h % 3 === 0 ? [40, 96, 74] : [64, 142, 108];\n        else c = [228, 214, 184];\n        const door = left ? x >= 0 && x \u003c= 3 : x >= 60;\n        if (door && h \u003c= G.door) c = h > G.door - Math.round(G.door * 0.4) && (left ? x >= 1 && x \u003c= 2 : x >= 61 && x \u003c= 62) ? [255, 228, 170] : [100, 60, 36];\n        // The number, beside the opening at the top of the storey.\n        const nx = left ? 9 : 52;\n        const ny = ty + 2;\n        if (x >= nx && x \u003c nx + 3 && y >= ny && y \u003c ny + 5 && DIGIT[Math.min(st, 5)][(y - ny) * 3 + x - nx] === \"1\") c = [40, 40, 64];\n        c = [c[0] * l, c[1] * l, c[2] * l];\n        // The lamp under the slab: a bulb on its cord, or a tube that grows with the Light knob.\n        const bulb = tube \u003c 0.5;\n        if (y === ty + (bulb ? 1 : 0) && Math.abs(dx) \u003c= 0.6 + 3.4 * tube) c = [255, 255, 255];\n        if (bulb && y === ty && dx === 0) c = [90, 90, 90];\n      }\n      // The corridors are under the building's lamps; the machine room and the pit have their\n      // own bulb, and the shaft walls are lit by the cabins as they pass.\n      const m = k || y \u003c roomFloor || y >= pitTop ? [1, 1, 1] : lc;\n      bg[o] = c[0] * m[0];\n      bg[o + 1] = c[1] * m[1];\n      bg[o + 2] = c[2] * m[2];\n      kind[p] = k;\n    }\n  }\n}\n\nfunction put(buf, x, y, c, m) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = c[0] * m[0];\n  buf[o + 1] = c[1] * m[1];\n  buf[o + 2] = c[2] * m[2];\n}\n\n// One cabin: roof, posts, varnished panelling lit from the lamp under the roof, a brass\n// handrail, the floor with its brass edge.\nfunction cabin(P, buf, k, lc) {\n  const G = P.G;\n  const x0 = Math.round(k.cx) - HALF;\n  const f = Math.round(k.f);\n  const top = f - G.CH + 2;\n  const rail = top + Math.round(G.CH * 0.55);\n  const tube = P.light;\n  for (let y = top; y \u003c= f + 1; y++) {\n    if (y \u003c 0 || y >= H) continue;\n    const dy = y - top - 2;\n    for (let i = 0; i \u003c= 2 * HALF; i++) {\n      const x = x0 + i;\n      let c;\n      let m = lc;\n      // The lamp's light on the panelling: a pool under a bulb, even under a tube.\n      const d2 = (i - HALF) * (i - HALF) + dy * dy * 1.6;\n      const l = (0.42 + 0.3 * tube) + (0.85 - 0.3 * tube) / (1 + d2 / (14 + 60 * tube));\n      if (y === top) c = [44, 30, 24];\n      else if (y === top + 1) c = [74, 48, 32];\n      else if (y === f) c = [200, 154, 72];\n      else if (y === f + 1) c = [40, 32, 28];\n      else if (i === 0 || i === 2 * HALF) c = [134, 86, 48];\n      else if (y === top + 2 && Math.abs(i - HALF) \u003c= 0.6 + 3.4 * tube) {\n        c = [255, 255, 255];\n        m = [1, 1, 1];\n      } else if (i \u003c= 2 || i >= 2 * HALF - 2) c = [96 * l, 58 * l, 34 * l];\n      else if (y === rail) c = [190 * l, 146 * l, 66 * l];\n      else {\n        const seam = (i - 3) % 4 === 3 ? 0.72 : 1;\n        c = [172 * l * seam, 98 * l * seam, 54 * l * seam];\n      }\n      put(buf, x, y, c, m);\n    }\n  }\n}\n\nfunction person(P, buf, p, m) {\n  const G = P.G;\n  const h = G.hp;\n  const x = Math.round(p.x);\n  const feet = Math.round(p.feet);\n  const face = h >= 10 ? 2 : 1;\n  const torso = Math.round((h - 2 - face) * 0.5);\n  const legs = h - 2 - face - torso;\n  const l0 = G.wp === 4 ? -2 : -1;\n  const stride = p.walking && Math.floor(P.t * 5 + p.ph) % 2 === 0;\n  let y = feet;\n  // Shoes and legs, together standing and apart in mid stride; a skirt over stockings.\n  for (let r = 0; r \u003c= legs; r++, y--) {\n    const skirt = !p.legs && r >= legs - 1 && r > 0;\n    const c = r === 0 ? [28, 24, 22] : skirt ? p.coat : p.legs || p.skin;\n    if (skirt) for (let i = l0; i \u003c= 1; i++) put(buf, x + i, y, c, m);\n    else if (stride && r \u003c legs) {\n      put(buf, x + l0, y, c, m);\n      put(buf, x + 1, y, c, m);\n    } else {\n      put(buf, x - 1, y, c, m);\n      put(buf, x, y, c, m);\n    }\n  }\n  for (let r = 0; r \u003c torso; r++, y--) for (let i = l0; i \u003c= 1; i++) put(buf, x + i, y, p.coat, m);\n  if (p.bag) {\n    const bx = p.side === 0 ? x + 2 : x + l0 - 1;\n    put(buf, bx, feet - legs + 1, [120, 72, 36], m);\n    put(buf, bx, feet - legs + 2, [120, 72, 36], m);\n  }\n  for (let r = 0; r \u003c face; r++, y--) {\n    put(buf, x - 1, y, p.skin, m);\n    put(buf, x, y, p.skin, m);\n  }\n  const top = p.hat || p.hair;\n  put(buf, x - 1, y, top, m);\n  put(buf, x, y, top, m);\n  if (p.hat) {\n    put(buf, x - 2, y + 1, p.hat, m);\n    put(buf, x + 1, y + 1, p.hat, m);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const G = P.G;\n  if (P.lightKey !== P.light) {\n    P.lightKey = P.light;\n    background(P);\n  }\n  const lc = lampColour(P.light).map((v) => v / 255);\n  const buf = P.buf;\n  buf.set(P.bg);\n  // Cabin light spills on to the shaft walls above and below each cabin.\n  for (let side = 0; side \u003c 2; side++) {\n    const g = P.glow[side];\n    g.fill(0.32);\n    for (const k of P.cab) {\n      if (k.seg !== (side ? 0 : 2)) continue;\n      const f = Math.round(k.f);\n      const top = f - G.CH + 2;\n      for (let d = 1; d \u003c= 8; d++) {\n        const v = 0.32 + 0.75 * Math.exp(-d / 2.5);\n        if (top - d >= 0) g[top - d] = Math.max(g[top - d], v);\n        if (f + 1 + d \u003c H) g[f + 1 + d] = Math.max(g[f + 1 + d], 0.32 + 0.4 * Math.exp(-d / 2));\n      }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const k = P.kind[p];\n    if (!k) continue;\n    const g = P.glow[k - 1][Math.floor(p / W)];\n    const o = p * 3;\n    buf[o] *= g * lc[0];\n    buf[o + 1] *= g * lc[1];\n    buf[o + 2] *= g * lc[2];\n  }\n  // The chain along the cabins' middle line, links moving with it, and the two wheels.\n  const mid = (G.CH - 2) / 2;\n  const pos = P.pos;\n  for (let s = 0; s \u003c G.len; s += 0.7) {\n    pathAt(G, s, pos);\n    const link = Math.floor((s - P.s) / 2) & 1;\n    const x = Math.round(pos.cx);\n    const y = Math.round(pos.f - mid);\n    put(buf, x, y, link ? [150, 150, 160] : [70, 70, 80], [1, 1, 1]);\n  }\n  for (const [wy, dir] of [[G.fTop - mid, 1], [G.fBot - mid, -1]]) {\n    const a0 = (dir * P.s) / R;\n    for (let sp = 0; sp \u003c 6; sp++) {\n      const a = a0 + (sp * Math.PI) / 3;\n      for (let r = 1; r \u003c R - 1; r += 0.7) put(buf, Math.round(XC + r * Math.cos(a)), Math.round(wy - r * Math.sin(a)), [96, 100, 112], [1, 1, 1]);\n    }\n    for (let a = 0; a \u003c 6.3; a += 0.12) put(buf, Math.round(XC + (R - 1) * Math.cos(a)), Math.round(wy + (R - 1) * Math.sin(a)), [120, 124, 136], [1, 1, 1]);\n    put(buf, XC, Math.round(wy), [190, 190, 200], [1, 1, 1]);\n  }\n  // An office door stands open while someone comes out or goes in, and the office shows.\n  for (let i = 0; i \u003c G.F; i++)\n    for (let side = 0; side \u003c 2; side++) {\n      if (P.doors[i * 2 + side] \u003c= P.t) continue;\n      const L = G.L[i];\n      // Office light spills out across the corridor floor and wall beside the door.\n      for (let y = L - G.door; y \u003c L; y++)\n        for (let j = 5; j \u003c 13; j++) {\n          const o = (y * W + (side === 0 ? j : W - 1 - j)) * 3;\n          const g = 1 + 0.9 * Math.exp(-(j - 5) / 4) * (0.4 + 0.6 * (y - L + G.door) / G.door);\n          buf[o] *= g;\n          buf[o + 1] *= g;\n          buf[o + 2] *= g;\n        }\n      for (let y = L - G.door; y \u003c L; y++)\n        for (let j = 0; j \u003c 5; j++) {\n          const x = side === 0 ? j : W - 1 - j;\n          const c = j === 4 ? [92, 56, 34] : y === L - 1 ? [120, 96, 70] : (y - L) % 4 === 0 && j \u003c 3 ? [150, 120, 80] : [250, 236, 200];\n          put(buf, x, y, c, j === 4 ? lc : [0.95, 0.92, 0.85]);\n        }\n    }\n  for (const k of P.cab) cabin(P, buf, k, lc);\n  // People: in the corridors under the corridor lamps, in the cabins under the cabin lamp.\n  // The second row of a crowd first, a little further from the lamp.\n  for (const back of [true, false])\n    for (const p of P.people) {\n      if (!p.back !== !back) continue;\n      const l = p.st === RIDE || p.st === BOARD ? 1 : back ? 0.74 : 0.92;\n      person(P, buf, p, [lc[0] * l, lc[1] * l, lc[2] * l]);\n    }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), clamp(buf[o], 0, 255), clamp(buf[o + 1], 0, 255), clamp(buf[o + 2], 0, 255));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Floors=3..6, Busy=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The building's lamps, from warm bulbs hanging in each corridor and cabin at 0 to cold fluorescent tubes at 1, with the colour of every wall, cabin and coat under them."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the building runs: at 2 the chain moves 0.35 m/s, as a real paternoster does, and a cabin passes each floor every ten seconds; at 0.2 ten times slower, at 3 half as fast again."},{"name":"Floors","min":3,"max":6,"about":"Three to six floors between the machine room and the pit; more floors make the storeys, the cabins and the people smaller and put more cabins on the chain."},{"name":"Busy","min":0,"max":1,"about":"How many people come out of the offices to ride: one every three seconds or so in the whole building at 0, a crowd of five at every opening and two in every cabin at 1. One in eight stays on and rides round over the top or under the bottom."}],"start":[0,2,3,0.06],"measures":{"motion":0.1311,"detail":0.0811,"edges":0.4174,"complexity":0.5845,"coverage":0.8893,"colour":0.2319,"drift":0.047},"knobResponse":[0.1087,0.0733,0.147,0.0325]},{"slug":"peg-light","title":"Peg Light","family":"toy","round":18,"note":"1967년 Lite-Brite 처럼 검은 판의 엇갈린 구멍에 색 페그를 하나씩 꽂아 로켓, 돛배, 화분, 물고기, 집, 광대 그림을 채워요. 다 차면 4초 머문 뒤 페그가 위에서부터 쓸려 빠지고 다음 종이가 올라가요. K1 을 누르면 판을 비우고 같은 그림을 처음부터 다시 꽂아요.","idea":"Translucent coloured pegs are pushed one at a time into the holes of a black peg board, following a printed template of a rocket, a sailboat, a flower pot, a fish, a house or a clown, each peg lit by the bulb behind, and when the picture is done it holds, the pegs are pushed out and the next sheet goes on.","buttons":"K1 tap pushes every peg out and starts the same picture again.","code":"// ===== Patternflow pattern =====\n// Title:   Peg Light\n// Family:  toy\n// Idea:    Translucent coloured pegs are pushed one at a time into the holes of a black peg board, following a printed template of a rocket, a sailboat, a flower pot, a fish, a house or a clown, each peg lit by the bulb behind, and when the picture is done it holds, the pegs are pushed out and the next sheet goes on.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after Lite-Brite, the peg board Hasbro brought out in 1967\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Bulb=0..1, Speed=0.2..3, Picture=0..5, Glow=0..1\n//\n// Knob 1: Bulb. The bulb behind the board, from a full warm white at 0 down a dimmer to a low orange glow at 1, where the blue and violet pegs go dark first.\n// Knob 2: Speed. Pegs pushed in per second, 10 at 0.2, 100 at 2 and 150 at 3; the pull-out sweep runs faster with it too.\n// Knob 3: Picture. Which template goes on: rocket, sailboat, flower pot, fish, house or clown; turning it pushes the pegs out and starts that sheet, and after it the sheets follow in that order.\n// Knob 4: Glow. How far each peg's light spills onto the black board round it, from a clean dot at 0 to a soft lit patch at 1.\n// Buttons: K1 tap pushes every peg out and starts the same picture again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The nine peg colours at full strength: red, orange, yellow, green, blue,\n// violet, pink, white (milky) and clear (the bare bulb). Index 0 is no peg.\nconst PEG = [\n  null,\n  [255, 26, 18],\n  [255, 112, 8],\n  [255, 214, 16],\n  [24, 224, 40],\n  [28, 84, 255],\n  [150, 36, 255],\n  [255, 70, 150],\n  [222, 222, 228],\n  [255, 250, 236],\n];\n// A lit peg's brightest channel at the board's centre, and the printed\n// template dot behind an empty hole (under 20 of 255: barely there).\nconst LEVEL = 0.88;\nconst GHOST = 15 / 255;\n// Pegs pushed in per second for each unit of Speed.\nconst RATE = 50;\nconst HOLD = 4;\nconst PULL = 1.8;\nconst SWAP = 0.8;\nconst FILL = 0;\nconst HOLDING = 1;\nconst PULLING = 2;\nconst SWAPPING = 3;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction inPoly(x, y, q) {\n  let inside = false;\n  for (let i = 0, j = q.length - 2; i \u003c q.length; j = i, i += 2) {\n    const xi = q[i];\n    const yi = q[i + 1];\n    const xj = q[j];\n    const yj = q[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;\n  }\n  return inside;\n}\n\nfunction segDist(x, y, x0, y0, x1, y1) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const u = clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return Math.hypot(x - x0 - u * dx, y - y0 - u * dy);\n}\n\n// The six template sheets, painted with discs, boxes, polygons, thick lines\n// and rings in the order a child would fill them. Colour 0 rubs out.\nconst SHEETS = [\n  // Rocket: a moon, a ringed planet, stars, the rocket and its smoke.\n  (D, R, T, L, put) => {\n    const stars = [5, 32, 26, 6, 40, 9, 58, 44, 6, 52, 12, 70, 57, 66, 4, 92, 58, 90, 9, 108, 56, 108, 20, 36, 46, 4, 60, 4, 2, 4, 14, 58, 50, 56, 8, 80, 54, 80];\n    for (let i = 0; i \u003c stars.length; i += 2) D(i % 4 ? 9 : 8, stars[i], stars[i + 1], i % 6 ? 1.5 : 0.6);\n    D(3, 12, 15, 9);\n    D(0, 16, 12, 7.5);\n    D(6, 51, 25, 7.5);\n    put(2, (x, y) => {\n      const e = ((x - 51) / 14) ** 2 + ((y - 25) / 3.4) ** 2;\n      return e > 0.55 && e \u003c 1 && (y >= 25 || ((x - 51) / 7.5) ** 2 + ((y - 25) / 7.5) ** 2 > 1);\n    });\n    T(1, 32, 22, 43, 44, 21, 44);\n    R(8, 21, 44, 43, 92);\n    D(5, 32, 57, 6);\n    D(9, 30, 55, 1.5);\n    D(5, 32, 72, 3.5);\n    R(1, 21, 80, 43, 83);\n    T(1, 21, 70, 21, 94, 9, 103, 9, 86);\n    T(1, 43, 70, 43, 94, 55, 103, 55, 86);\n    R(6, 30, 86, 34, 100);\n    R(2, 25, 93, 39, 97);\n    T(2, 23, 98, 41, 98, 32, 124);\n    T(3, 27, 98, 37, 98, 32, 116);\n    T(9, 30, 98, 34, 98, 32, 108);\n    D(8, 16, 121, 9, 6);\n    D(8, 48, 122, 10, 6);\n    D(9, 4, 126, 7, 4);\n    D(9, 60, 126, 7, 4);\n  },\n  // Sailboat: sun, cloud, gulls, two sails, a red hull and the sea.\n  (D, R, T, L, put) => {\n    D(3, 50, 14, 8.5);\n    for (let a = 0; a \u003c 8; a++) L(3, 50 + 11 * Math.cos(a * 0.785), 14 + 11 * Math.sin(a * 0.785), 50 + 15 * Math.cos(a * 0.785), 14 + 15 * Math.sin(a * 0.785), 0.9);\n    D(8, 14, 16, 10, 4.5);\n    D(8, 20, 12, 7, 4);\n    D(9, 8, 13, 5, 3);\n    for (const [gx, gy] of [[9, 34], [20, 42], [52, 38]]) {\n      L(8, gx - 4, gy - 2, gx, gy, 0.8);\n      L(8, gx, gy, gx + 4, gy - 2, 0.8);\n    }\n    L(2, 31, 20, 31, 90, 1.1);\n    T(1, 32, 17, 32, 25, 42, 21);\n    T(8, 34, 26, 34, 86, 60, 86);\n    put(1, (x, y) => y >= 64 && y \u003c= 69 && inPoly(x, y, [34, 26, 34, 86, 60, 86]));\n    T(7, 28, 32, 28, 86, 4, 86);\n    T(1, 2, 89, 62, 89, 54, 103, 10, 103);\n    R(8, 6, 93, 58, 94);\n    for (let x = 16; x \u003c 50; x += 8) D(3, x, 98, 1.5);\n    put(5, (x, y) => y >= 105 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 \u003c 3.6);\n    put(8, (x, y) => y >= 105 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 >= 3.6 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 \u003c 4.4);\n    put(4, (x, y) => y >= 122);\n  },\n  // Flower pot: three flowers on stems with leaves, a butterfly, the pot.\n  (D, R, T, L, put) => {\n    L(4, 32, 88, 32, 40, 1.3);\n    L(4, 31, 72, 14, 46, 1.2);\n    L(4, 33, 66, 50, 32, 1.2);\n    T(4, 32, 80, 18, 70, 12, 58, 26, 66);\n    T(4, 32, 76, 46, 68, 54, 56, 40, 62);\n    T(4, 32, 60, 22, 54, 18, 44, 28, 50);\n    for (const [cx, cy, r, c] of [[32, 34, 11, 1], [14, 42, 9, 6], [50, 28, 9, 7]]) {\n      for (let a = 0; a \u003c 6; a++) D(c, cx + r * 0.55 * Math.cos(a * 1.047), cy + r * 0.55 * Math.sin(a * 1.047), r * 0.48);\n      D(3, cx, cy, r * 0.36);\n    }\n    T(5, 10, 8, 18, 15, 10, 20);\n    T(5, 26, 8, 18, 15, 26, 20);\n    L(8, 18, 10, 18, 20, 0.7);\n    R(2, 10, 88, 54, 95);\n    T(2, 13, 96, 51, 96, 45, 124, 19, 124);\n    put(7, (x, y) => y >= 104 && y \u003c= 108 && inPoly(x, y, [13, 96, 51, 96, 45, 124, 19, 124]));\n    for (let x = 22; x \u003c= 42; x += 5) D(3, x, 114, 1.5);\n    R(6, 2, 125, 61, 127);\n  },\n  // Fish: a big striped fish, a small one, bubbles, weed and sand.\n  (D, R, T, L, put) => {\n    for (const [bx, by, r] of [[18, 10, 3.5], [10, 20, 2.5], [22, 26, 2], [48, 64, 3], [56, 80, 2.5]]) put(9, (x, y) => Math.abs(Math.hypot(x - bx, y - by) - r) \u003c 0.8);\n    T(2, 50, 58, 63, 42, 63, 74);\n    D(2, 30, 58, 23, 16);\n    T(2, 22, 43, 40, 43, 34, 34);\n    T(2, 26, 72, 38, 72, 30, 80);\n    put(3, (x, y) => ((x - 30) / 23) ** 2 + ((y - 58) / 16) ** 2 \u003c= 1 && (Math.abs(x - 24) \u003c 2.2 || Math.abs(x - 36) \u003c 2.2));\n    D(8, 15, 54, 4.5);\n    D(5, 14, 54, 2.2);\n    L(1, 7, 62, 12, 63, 1);\n    D(6, 44, 22, 9, 5.5);\n    T(6, 52, 22, 60, 15, 60, 29);\n    D(8, 39, 21, 1.5);\n    for (const sx of [8, 20, 46, 58]) L(4, sx, 120, sx + 3 * Math.sin(sx), 92 - (sx % 3) * 6, 1.6);\n    put(4, (x, y) => y > 86 && y \u003c 120 && [8, 20, 46, 58].some((s) => Math.abs(x - s - 2.5 * Math.sin(y * 0.35 + s)) \u003c 1.6));\n    put(3, (x, y) => y >= 118 + 2 * Math.sin(x * 0.3));\n    D(7, 30, 121, 3.5);\n    D(1, 50, 122, 2.5);\n  },\n  // House: sun, cloud, red roof, chimney smoke, yellow walls, a garden.\n  (D, R, T, L, put) => {\n    D(3, 10, 10, 7.5);\n    D(8, 42, 10, 9, 4);\n    D(9, 50, 7, 6, 3.5);\n    R(1, 44, 24, 50, 44);\n    D(8, 47, 19, 3);\n    D(8, 51, 13, 2.5);\n    T(1, 32, 22, 60, 50, 4, 50);\n    R(3, 9, 50, 55, 98);\n    R(2, 27, 74, 37, 98);\n    D(3, 35, 86, 1);\n    for (const wx of [13, 41]) {\n      R(5, wx, 58, wx + 10, 69);\n      L(8, wx + 5, 58, wx + 5, 69, 0.6);\n      L(8, wx, 63.5, wx + 10, 63.5, 0.6);\n      R(7, wx - 1, 70, wx + 11, 72);\n    }\n    D(5, 32, 38, 4);\n    put(4, (x, y) => y >= 99 && y \u003c= 110);\n    T(8, 27, 99, 37, 99, 44, 127, 20, 127);\n    for (const [fx, fy, c] of [[6, 104, 1], [14, 108, 6], [50, 105, 7], [58, 109, 3]]) {\n      L(4, fx, fy, fx, fy + 12, 0.7);\n      D(c, fx, fy, 2.6);\n    }\n    put(4, (x, y) => y >= 120 && (x \u003c 20 || x > 44));\n  },\n  // Clown: hat and pompom, orange hair, white face, nose, smile, bow tie.\n  (D, R, T, L, put) => {\n    T(6, 18, 30, 46, 30, 32, 6);\n    D(3, 32, 6, 4.5);\n    for (const [hx, hy] of [[28, 22], [36, 26], [32, 14]]) D(8, hx, hy, 1.5);\n    for (const s of [-1, 1]) {\n      D(2, 32 + s * 21, 46, 8);\n      D(2, 32 + s * 24, 58, 7);\n      D(2, 32 + s * 20, 68, 6);\n    }\n    D(8, 32, 54, 18, 23);\n    for (const s of [-1, 1]) {\n      D(5, 32 + s * 7, 47, 3.5, 4.5);\n      L(6, 32 + s * 4, 39, 32 + s * 11, 39, 0.8);\n      D(7, 32 + s * 12, 62, 3.5);\n    }\n    D(1, 32, 57, 5);\n    put(1, (x, y) => {\n      const d = Math.hypot(x - 32, y - 60);\n      return d > 7.5 && d \u003c 10.5 && y > 64;\n    });\n    T(5, 32, 86, 12, 78, 12, 96);\n    T(5, 32, 86, 52, 78, 52, 96);\n    D(1, 32, 86, 3.5);\n    for (const [bx, by] of [[18, 82], [17, 91], [46, 82], [47, 91]]) D(3, bx, by, 1.5);\n    put(3, (x, y) => y >= 98 && ((y >> 2) & 1) === 0 && Math.abs(x - 32) \u003c 14 + (y - 98) * 0.5);\n    put(1, (x, y) => y >= 98 && ((y >> 2) & 1) === 1 && Math.abs(x - 32) \u003c 14 + (y - 98) * 0.5);\n  },\n];\n\n// Paint one sheet: each hole's colour, then the order the pegs go in, one\n// colour after another as it first appears, top to bottom with a little\n// wander so the work has a ragged front.\nfunction buildSheet(art) {\n  const col = new Uint8Array(N);\n  const firsts = [];\n  const put = (c, f) => {\n    if (c && !firsts.includes(c)) firsts.push(c);\n    for (let y = 0; y \u003c H; y++) for (let x = y & 1; x \u003c W; x += 2) if (f(x, y)) col[y * W + x] = c;\n  };\n  const D = (c, cx, cy, rx, ry) => put(c, (x, y) => ((x - cx) / rx) ** 2 + ((y - cy) / (ry || rx)) ** 2 \u003c= 1);\n  const R = (c, x0, y0, x1, y1) => put(c, (x, y) => x >= x0 && x \u003c= x1 && y >= y0 && y \u003c= y1);\n  const T = (c, ...q) => put(c, (x, y) => inPoly(x, y, q));\n  const L = (c, x0, y0, x1, y1, w) => put(c, (x, y) => segDist(x, y, x0, y0, x1, y1) \u003c= w);\n  art(D, R, T, L, put);\n  const order = [];\n  for (const c of firsts) {\n    const run = [];\n    for (let p = 0; p \u003c N; p++) if (col[p] === c) run.push([p, Math.floor(p / W) + 7 * Math.random() + (p % W) * 0.04]);\n    run.sort((a, b) => a[1] - b[1]);\n    for (const r of run) order.push(r[0]);\n  }\n  return { col, order: Int32Array.from(order) };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.sheets = SHEETS.map(buildSheet);\n  P.buf = new Float32Array(N * 3);\n  P.born = new Float32Array(N);\n  P.out = new Float32Array(N);\n  P.jit = new Float32Array(N);\n  P.vig = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = Math.floor(p / W);\n    P.jit[p] = Math.random();\n    // One bulb behind the middle of the board: the corners get about 70%.\n    P.vig[p] = 1 - 0.24 * (((x - 31.5) / 40) ** 2 + ((y - 63.5) / 80) ** 2);\n  }\n  P.t = 0;\n  P.started = false;\n}\n\n// Put a sheet on the board with no pegs in it yet.\nfunction begin(P, s) {\n  P.sheet = s;\n  P.k = 0;\n  P.placed = 0;\n  P.born.fill(-1);\n  P.out.fill(1e9);\n  P.phase = SWAPPING;\n  P.until = P.t + SWAP;\n  P.ghostFrom = P.t;\n}\n\nfunction startPull(P, dur) {\n  if (P.phase === PULLING || P.phase === SWAPPING) return;\n  P.phase = PULLING;\n  const { order } = P.sheets[P.sheet];\n  for (let i = 0; i \u003c P.k; i++) {\n    const p = order[i];\n    P.out[p] = P.t + dur * (0.85 * Math.floor(p / W) / H + 0.15 * P.jit[p]);\n  }\n  P.until = P.t + dur + 0.4;\n}\n\nfunction step(P, dt, speed) {\n  P.t += dt;\n  const n = P.sheets[P.sheet].order.length;\n  if (P.phase === FILL) {\n    P.placed += dt * RATE * speed;\n    const { order } = P.sheets[P.sheet];\n    while (P.k \u003c n && P.k \u003c P.placed) P.born[order[P.k++]] = P.t;\n    if (P.k >= n) {\n      P.phase = HOLDING;\n      P.until = P.t + HOLD;\n    }\n  } else if (P.phase === HOLDING) {\n    if (P.t >= P.until) startPull(P, PULL * Math.sqrt(2 / speed));\n  } else if (P.phase === PULLING) {\n    if (P.t >= P.until) {\n      begin(P, P.next >= 0 ? P.next : (P.sheet + 1) % SHEETS.length);\n      P.next = -1;\n    }\n  } else if (P.t >= P.until) {\n    P.phase = FILL;\n    P.placed = P.k;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.bulb = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const pick = Math.round(clamp(k[2], 0, 5));\n  P.glow = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    P.pick = pick;\n    P.next = -1;\n    begin(P, pick);\n    // The child has been at it a while when the panel opens: all but the\n    // last 1200 pegs are in, and five more seconds go by at the knob's pace,\n    // so at Speed 2 the picture is finished seven seconds in.\n    const { order } = P.sheets[pick];\n    P.phase = FILL;\n    P.k = Math.max(0, order.length - 1200);\n    P.placed = P.k;\n    for (let i = 0; i \u003c P.k; i++) P.born[order[i]] = -20;\n    for (let i = 0; i \u003c 150; i++) step(P, 1 / 30, speed);\n  }\n  if (pick !== P.pick) {\n    // A new sheet: a blank one goes straight on, a pegged one is cleared.\n    P.pick = pick;\n    if (P.phase === SWAPPING) begin(P, pick);\n    else {\n      P.next = pick;\n      startPull(P, 0.7);\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0] && (P.phase === FILL || P.phase === HOLDING)) {\n    P.next = P.sheet;\n    startPull(P, 1);\n  }\n  step(P, dt, speed);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  buf.fill(0);\n  const t = P.t;\n  const { col, order } = P.sheets[P.sheet];\n  // The bulb: a warm white at full, redder and dimmer down the dimmer.\n  const b = P.bulb;\n  const dim = 1 - 0.5 * b;\n  const tint = [dim, dim * (0.93 - 0.4 * b), dim * (0.82 - 0.64 * b)];\n  const g1 = 0.22 * P.glow;\n  const g2 = 0.1 * P.glow;\n  const ghost = P.phase === SWAPPING ? clamp((t - P.ghostFrom) / SWAP, 0, 1) : P.phase === PULLING ? 0 : 1;\n  const n = order.length;\n  for (let i = 0; i \u003c n; i++) {\n    const p = order[i];\n    const c = PEG[col[p]];\n    const x = p % W;\n    const y = (p - x) / W;\n    if (i >= P.k) {\n      if (ghost > 0) for (let ch = 0; ch \u003c 3; ch++) buf[p * 3 + ch] += c[ch] * GHOST * ghost;\n      continue;\n    }\n    if (t >= P.out[p]) {\n      // A pushed-out peg drops off the front of the board, no longer lit\n      // from behind.\n      const a = t - P.out[p];\n      const yy = Math.round(y + 130 * a * a);\n      if (a \u003c 0.4 && yy \u003c H) for (let ch = 0; ch \u003c 3; ch++) buf[(yy * W + x) * 3 + ch] += c[ch] * 0.3 * (1 - a / 0.4);\n      continue;\n    }\n    // A peg flares as it seats, then settles; the bulb's heat makes it\n    // shimmer by a couple of percent.\n    const age = t - P.born[p];\n    const env = age \u003c 0.1 ? 0.3 + 9 * age : 1 + 0.22 * Math.exp(-(age - 0.1) / 0.25);\n    const v = LEVEL * P.vig[p] * env * (1 + 0.035 * Math.sin(t * 9 + 40 * P.jit[p]));\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const L = c[ch] * tint[ch] * v;\n      buf[p * 3 + ch] += L;\n      if (g1 > 0) {\n        if (x > 0) buf[(p - 1) * 3 + ch] += L * g1;\n        if (x \u003c W - 1) buf[(p + 1) * 3 + ch] += L * g1;\n        if (y > 0) buf[(p - W) * 3 + ch] += L * g1;\n        if (y \u003c H - 1) buf[(p + W) * 3 + ch] += L * g1;\n        if (x > 0 && y > 0) buf[(p - W - 1) * 3 + ch] += L * g2;\n        if (x \u003c W - 1 && y > 0) buf[(p - W + 1) * 3 + ch] += L * g2;\n        if (x > 0 && y \u003c H - 1) buf[(p + W - 1) * 3 + ch] += L * g2;\n        if (x \u003c W - 1 && y \u003c H - 1) buf[(p + W + 1) * 3 + ch] += L * g2;\n      }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-peg-light","type":"code","name":"peg-light","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Peg Light\n// Family:  toy\n// Idea:    Translucent coloured pegs are pushed one at a time into the holes of a black peg board, following a printed template of a rocket, a sailboat, a flower pot, a fish, a house or a clown, each peg lit by the bulb behind, and when the picture is done it holds, the pegs are pushed out and the next sheet goes on.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after Lite-Brite, the peg board Hasbro brought out in 1967\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Bulb=0..1, Speed=0.2..3, Picture=0..5, Glow=0..1\n//\n// Knob 1: Bulb. The bulb behind the board, from a full warm white at 0 down a dimmer to a low orange glow at 1, where the blue and violet pegs go dark first.\n// Knob 2: Speed. Pegs pushed in per second, 10 at 0.2, 100 at 2 and 150 at 3; the pull-out sweep runs faster with it too.\n// Knob 3: Picture. Which template goes on: rocket, sailboat, flower pot, fish, house or clown; turning it pushes the pegs out and starts that sheet, and after it the sheets follow in that order.\n// Knob 4: Glow. How far each peg's light spills onto the black board round it, from a clean dot at 0 to a soft lit patch at 1.\n// Buttons: K1 tap pushes every peg out and starts the same picture again.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The nine peg colours at full strength: red, orange, yellow, green, blue,\n// violet, pink, white (milky) and clear (the bare bulb). Index 0 is no peg.\nconst PEG = [\n  null,\n  [255, 26, 18],\n  [255, 112, 8],\n  [255, 214, 16],\n  [24, 224, 40],\n  [28, 84, 255],\n  [150, 36, 255],\n  [255, 70, 150],\n  [222, 222, 228],\n  [255, 250, 236],\n];\n// A lit peg's brightest channel at the board's centre, and the printed\n// template dot behind an empty hole (under 20 of 255: barely there).\nconst LEVEL = 0.88;\nconst GHOST = 15 / 255;\n// Pegs pushed in per second for each unit of Speed.\nconst RATE = 50;\nconst HOLD = 4;\nconst PULL = 1.8;\nconst SWAP = 0.8;\nconst FILL = 0;\nconst HOLDING = 1;\nconst PULLING = 2;\nconst SWAPPING = 3;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction inPoly(x, y, q) {\n  let inside = false;\n  for (let i = 0, j = q.length - 2; i \u003c q.length; j = i, i += 2) {\n    const xi = q[i];\n    const yi = q[i + 1];\n    const xj = q[j];\n    const yj = q[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;\n  }\n  return inside;\n}\n\nfunction segDist(x, y, x0, y0, x1, y1) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const u = clamp(((x - x0) * dx + (y - y0) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return Math.hypot(x - x0 - u * dx, y - y0 - u * dy);\n}\n\n// The six template sheets, painted with discs, boxes, polygons, thick lines\n// and rings in the order a child would fill them. Colour 0 rubs out.\nconst SHEETS = [\n  // Rocket: a moon, a ringed planet, stars, the rocket and its smoke.\n  (D, R, T, L, put) => {\n    const stars = [5, 32, 26, 6, 40, 9, 58, 44, 6, 52, 12, 70, 57, 66, 4, 92, 58, 90, 9, 108, 56, 108, 20, 36, 46, 4, 60, 4, 2, 4, 14, 58, 50, 56, 8, 80, 54, 80];\n    for (let i = 0; i \u003c stars.length; i += 2) D(i % 4 ? 9 : 8, stars[i], stars[i + 1], i % 6 ? 1.5 : 0.6);\n    D(3, 12, 15, 9);\n    D(0, 16, 12, 7.5);\n    D(6, 51, 25, 7.5);\n    put(2, (x, y) => {\n      const e = ((x - 51) / 14) ** 2 + ((y - 25) / 3.4) ** 2;\n      return e > 0.55 && e \u003c 1 && (y >= 25 || ((x - 51) / 7.5) ** 2 + ((y - 25) / 7.5) ** 2 > 1);\n    });\n    T(1, 32, 22, 43, 44, 21, 44);\n    R(8, 21, 44, 43, 92);\n    D(5, 32, 57, 6);\n    D(9, 30, 55, 1.5);\n    D(5, 32, 72, 3.5);\n    R(1, 21, 80, 43, 83);\n    T(1, 21, 70, 21, 94, 9, 103, 9, 86);\n    T(1, 43, 70, 43, 94, 55, 103, 55, 86);\n    R(6, 30, 86, 34, 100);\n    R(2, 25, 93, 39, 97);\n    T(2, 23, 98, 41, 98, 32, 124);\n    T(3, 27, 98, 37, 98, 32, 116);\n    T(9, 30, 98, 34, 98, 32, 108);\n    D(8, 16, 121, 9, 6);\n    D(8, 48, 122, 10, 6);\n    D(9, 4, 126, 7, 4);\n    D(9, 60, 126, 7, 4);\n  },\n  // Sailboat: sun, cloud, gulls, two sails, a red hull and the sea.\n  (D, R, T, L, put) => {\n    D(3, 50, 14, 8.5);\n    for (let a = 0; a \u003c 8; a++) L(3, 50 + 11 * Math.cos(a * 0.785), 14 + 11 * Math.sin(a * 0.785), 50 + 15 * Math.cos(a * 0.785), 14 + 15 * Math.sin(a * 0.785), 0.9);\n    D(8, 14, 16, 10, 4.5);\n    D(8, 20, 12, 7, 4);\n    D(9, 8, 13, 5, 3);\n    for (const [gx, gy] of [[9, 34], [20, 42], [52, 38]]) {\n      L(8, gx - 4, gy - 2, gx, gy, 0.8);\n      L(8, gx, gy, gx + 4, gy - 2, 0.8);\n    }\n    L(2, 31, 20, 31, 90, 1.1);\n    T(1, 32, 17, 32, 25, 42, 21);\n    T(8, 34, 26, 34, 86, 60, 86);\n    put(1, (x, y) => y >= 64 && y \u003c= 69 && inPoly(x, y, [34, 26, 34, 86, 60, 86]));\n    T(7, 28, 32, 28, 86, 4, 86);\n    T(1, 2, 89, 62, 89, 54, 103, 10, 103);\n    R(8, 6, 93, 58, 94);\n    for (let x = 16; x \u003c 50; x += 8) D(3, x, 98, 1.5);\n    put(5, (x, y) => y >= 105 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 \u003c 3.6);\n    put(8, (x, y) => y >= 105 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 >= 3.6 && (y + 2.4 * Math.sin(x * 0.42 + y * 0.2)) % 6 \u003c 4.4);\n    put(4, (x, y) => y >= 122);\n  },\n  // Flower pot: three flowers on stems with leaves, a butterfly, the pot.\n  (D, R, T, L, put) => {\n    L(4, 32, 88, 32, 40, 1.3);\n    L(4, 31, 72, 14, 46, 1.2);\n    L(4, 33, 66, 50, 32, 1.2);\n    T(4, 32, 80, 18, 70, 12, 58, 26, 66);\n    T(4, 32, 76, 46, 68, 54, 56, 40, 62);\n    T(4, 32, 60, 22, 54, 18, 44, 28, 50);\n    for (const [cx, cy, r, c] of [[32, 34, 11, 1], [14, 42, 9, 6], [50, 28, 9, 7]]) {\n      for (let a = 0; a \u003c 6; a++) D(c, cx + r * 0.55 * Math.cos(a * 1.047), cy + r * 0.55 * Math.sin(a * 1.047), r * 0.48);\n      D(3, cx, cy, r * 0.36);\n    }\n    T(5, 10, 8, 18, 15, 10, 20);\n    T(5, 26, 8, 18, 15, 26, 20);\n    L(8, 18, 10, 18, 20, 0.7);\n    R(2, 10, 88, 54, 95);\n    T(2, 13, 96, 51, 96, 45, 124, 19, 124);\n    put(7, (x, y) => y >= 104 && y \u003c= 108 && inPoly(x, y, [13, 96, 51, 96, 45, 124, 19, 124]));\n    for (let x = 22; x \u003c= 42; x += 5) D(3, x, 114, 1.5);\n    R(6, 2, 125, 61, 127);\n  },\n  // Fish: a big striped fish, a small one, bubbles, weed and sand.\n  (D, R, T, L, put) => {\n    for (const [bx, by, r] of [[18, 10, 3.5], [10, 20, 2.5], [22, 26, 2], [48, 64, 3], [56, 80, 2.5]]) put(9, (x, y) => Math.abs(Math.hypot(x - bx, y - by) - r) \u003c 0.8);\n    T(2, 50, 58, 63, 42, 63, 74);\n    D(2, 30, 58, 23, 16);\n    T(2, 22, 43, 40, 43, 34, 34);\n    T(2, 26, 72, 38, 72, 30, 80);\n    put(3, (x, y) => ((x - 30) / 23) ** 2 + ((y - 58) / 16) ** 2 \u003c= 1 && (Math.abs(x - 24) \u003c 2.2 || Math.abs(x - 36) \u003c 2.2));\n    D(8, 15, 54, 4.5);\n    D(5, 14, 54, 2.2);\n    L(1, 7, 62, 12, 63, 1);\n    D(6, 44, 22, 9, 5.5);\n    T(6, 52, 22, 60, 15, 60, 29);\n    D(8, 39, 21, 1.5);\n    for (const sx of [8, 20, 46, 58]) L(4, sx, 120, sx + 3 * Math.sin(sx), 92 - (sx % 3) * 6, 1.6);\n    put(4, (x, y) => y > 86 && y \u003c 120 && [8, 20, 46, 58].some((s) => Math.abs(x - s - 2.5 * Math.sin(y * 0.35 + s)) \u003c 1.6));\n    put(3, (x, y) => y >= 118 + 2 * Math.sin(x * 0.3));\n    D(7, 30, 121, 3.5);\n    D(1, 50, 122, 2.5);\n  },\n  // House: sun, cloud, red roof, chimney smoke, yellow walls, a garden.\n  (D, R, T, L, put) => {\n    D(3, 10, 10, 7.5);\n    D(8, 42, 10, 9, 4);\n    D(9, 50, 7, 6, 3.5);\n    R(1, 44, 24, 50, 44);\n    D(8, 47, 19, 3);\n    D(8, 51, 13, 2.5);\n    T(1, 32, 22, 60, 50, 4, 50);\n    R(3, 9, 50, 55, 98);\n    R(2, 27, 74, 37, 98);\n    D(3, 35, 86, 1);\n    for (const wx of [13, 41]) {\n      R(5, wx, 58, wx + 10, 69);\n      L(8, wx + 5, 58, wx + 5, 69, 0.6);\n      L(8, wx, 63.5, wx + 10, 63.5, 0.6);\n      R(7, wx - 1, 70, wx + 11, 72);\n    }\n    D(5, 32, 38, 4);\n    put(4, (x, y) => y >= 99 && y \u003c= 110);\n    T(8, 27, 99, 37, 99, 44, 127, 20, 127);\n    for (const [fx, fy, c] of [[6, 104, 1], [14, 108, 6], [50, 105, 7], [58, 109, 3]]) {\n      L(4, fx, fy, fx, fy + 12, 0.7);\n      D(c, fx, fy, 2.6);\n    }\n    put(4, (x, y) => y >= 120 && (x \u003c 20 || x > 44));\n  },\n  // Clown: hat and pompom, orange hair, white face, nose, smile, bow tie.\n  (D, R, T, L, put) => {\n    T(6, 18, 30, 46, 30, 32, 6);\n    D(3, 32, 6, 4.5);\n    for (const [hx, hy] of [[28, 22], [36, 26], [32, 14]]) D(8, hx, hy, 1.5);\n    for (const s of [-1, 1]) {\n      D(2, 32 + s * 21, 46, 8);\n      D(2, 32 + s * 24, 58, 7);\n      D(2, 32 + s * 20, 68, 6);\n    }\n    D(8, 32, 54, 18, 23);\n    for (const s of [-1, 1]) {\n      D(5, 32 + s * 7, 47, 3.5, 4.5);\n      L(6, 32 + s * 4, 39, 32 + s * 11, 39, 0.8);\n      D(7, 32 + s * 12, 62, 3.5);\n    }\n    D(1, 32, 57, 5);\n    put(1, (x, y) => {\n      const d = Math.hypot(x - 32, y - 60);\n      return d > 7.5 && d \u003c 10.5 && y > 64;\n    });\n    T(5, 32, 86, 12, 78, 12, 96);\n    T(5, 32, 86, 52, 78, 52, 96);\n    D(1, 32, 86, 3.5);\n    for (const [bx, by] of [[18, 82], [17, 91], [46, 82], [47, 91]]) D(3, bx, by, 1.5);\n    put(3, (x, y) => y >= 98 && ((y >> 2) & 1) === 0 && Math.abs(x - 32) \u003c 14 + (y - 98) * 0.5);\n    put(1, (x, y) => y >= 98 && ((y >> 2) & 1) === 1 && Math.abs(x - 32) \u003c 14 + (y - 98) * 0.5);\n  },\n];\n\n// Paint one sheet: each hole's colour, then the order the pegs go in, one\n// colour after another as it first appears, top to bottom with a little\n// wander so the work has a ragged front.\nfunction buildSheet(art) {\n  const col = new Uint8Array(N);\n  const firsts = [];\n  const put = (c, f) => {\n    if (c && !firsts.includes(c)) firsts.push(c);\n    for (let y = 0; y \u003c H; y++) for (let x = y & 1; x \u003c W; x += 2) if (f(x, y)) col[y * W + x] = c;\n  };\n  const D = (c, cx, cy, rx, ry) => put(c, (x, y) => ((x - cx) / rx) ** 2 + ((y - cy) / (ry || rx)) ** 2 \u003c= 1);\n  const R = (c, x0, y0, x1, y1) => put(c, (x, y) => x >= x0 && x \u003c= x1 && y >= y0 && y \u003c= y1);\n  const T = (c, ...q) => put(c, (x, y) => inPoly(x, y, q));\n  const L = (c, x0, y0, x1, y1, w) => put(c, (x, y) => segDist(x, y, x0, y0, x1, y1) \u003c= w);\n  art(D, R, T, L, put);\n  const order = [];\n  for (const c of firsts) {\n    const run = [];\n    for (let p = 0; p \u003c N; p++) if (col[p] === c) run.push([p, Math.floor(p / W) + 7 * Math.random() + (p % W) * 0.04]);\n    run.sort((a, b) => a[1] - b[1]);\n    for (const r of run) order.push(r[0]);\n  }\n  return { col, order: Int32Array.from(order) };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.sheets = SHEETS.map(buildSheet);\n  P.buf = new Float32Array(N * 3);\n  P.born = new Float32Array(N);\n  P.out = new Float32Array(N);\n  P.jit = new Float32Array(N);\n  P.vig = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = Math.floor(p / W);\n    P.jit[p] = Math.random();\n    // One bulb behind the middle of the board: the corners get about 70%.\n    P.vig[p] = 1 - 0.24 * (((x - 31.5) / 40) ** 2 + ((y - 63.5) / 80) ** 2);\n  }\n  P.t = 0;\n  P.started = false;\n}\n\n// Put a sheet on the board with no pegs in it yet.\nfunction begin(P, s) {\n  P.sheet = s;\n  P.k = 0;\n  P.placed = 0;\n  P.born.fill(-1);\n  P.out.fill(1e9);\n  P.phase = SWAPPING;\n  P.until = P.t + SWAP;\n  P.ghostFrom = P.t;\n}\n\nfunction startPull(P, dur) {\n  if (P.phase === PULLING || P.phase === SWAPPING) return;\n  P.phase = PULLING;\n  const { order } = P.sheets[P.sheet];\n  for (let i = 0; i \u003c P.k; i++) {\n    const p = order[i];\n    P.out[p] = P.t + dur * (0.85 * Math.floor(p / W) / H + 0.15 * P.jit[p]);\n  }\n  P.until = P.t + dur + 0.4;\n}\n\nfunction step(P, dt, speed) {\n  P.t += dt;\n  const n = P.sheets[P.sheet].order.length;\n  if (P.phase === FILL) {\n    P.placed += dt * RATE * speed;\n    const { order } = P.sheets[P.sheet];\n    while (P.k \u003c n && P.k \u003c P.placed) P.born[order[P.k++]] = P.t;\n    if (P.k >= n) {\n      P.phase = HOLDING;\n      P.until = P.t + HOLD;\n    }\n  } else if (P.phase === HOLDING) {\n    if (P.t >= P.until) startPull(P, PULL * Math.sqrt(2 / speed));\n  } else if (P.phase === PULLING) {\n    if (P.t >= P.until) {\n      begin(P, P.next >= 0 ? P.next : (P.sheet + 1) % SHEETS.length);\n      P.next = -1;\n    }\n  } else if (P.t >= P.until) {\n    P.phase = FILL;\n    P.placed = P.k;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.bulb = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0.2, 3);\n  const pick = Math.round(clamp(k[2], 0, 5));\n  P.glow = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    P.pick = pick;\n    P.next = -1;\n    begin(P, pick);\n    // The child has been at it a while when the panel opens: all but the\n    // last 1200 pegs are in, and five more seconds go by at the knob's pace,\n    // so at Speed 2 the picture is finished seven seconds in.\n    const { order } = P.sheets[pick];\n    P.phase = FILL;\n    P.k = Math.max(0, order.length - 1200);\n    P.placed = P.k;\n    for (let i = 0; i \u003c P.k; i++) P.born[order[i]] = -20;\n    for (let i = 0; i \u003c 150; i++) step(P, 1 / 30, speed);\n  }\n  if (pick !== P.pick) {\n    // A new sheet: a blank one goes straight on, a pegged one is cleared.\n    P.pick = pick;\n    if (P.phase === SWAPPING) begin(P, pick);\n    else {\n      P.next = pick;\n      startPull(P, 0.7);\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0] && (P.phase === FILL || P.phase === HOLDING)) {\n    P.next = P.sheet;\n    startPull(P, 1);\n  }\n  step(P, dt, speed);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  buf.fill(0);\n  const t = P.t;\n  const { col, order } = P.sheets[P.sheet];\n  // The bulb: a warm white at full, redder and dimmer down the dimmer.\n  const b = P.bulb;\n  const dim = 1 - 0.5 * b;\n  const tint = [dim, dim * (0.93 - 0.4 * b), dim * (0.82 - 0.64 * b)];\n  const g1 = 0.22 * P.glow;\n  const g2 = 0.1 * P.glow;\n  const ghost = P.phase === SWAPPING ? clamp((t - P.ghostFrom) / SWAP, 0, 1) : P.phase === PULLING ? 0 : 1;\n  const n = order.length;\n  for (let i = 0; i \u003c n; i++) {\n    const p = order[i];\n    const c = PEG[col[p]];\n    const x = p % W;\n    const y = (p - x) / W;\n    if (i >= P.k) {\n      if (ghost > 0) for (let ch = 0; ch \u003c 3; ch++) buf[p * 3 + ch] += c[ch] * GHOST * ghost;\n      continue;\n    }\n    if (t >= P.out[p]) {\n      // A pushed-out peg drops off the front of the board, no longer lit\n      // from behind.\n      const a = t - P.out[p];\n      const yy = Math.round(y + 130 * a * a);\n      if (a \u003c 0.4 && yy \u003c H) for (let ch = 0; ch \u003c 3; ch++) buf[(yy * W + x) * 3 + ch] += c[ch] * 0.3 * (1 - a / 0.4);\n      continue;\n    }\n    // A peg flares as it seats, then settles; the bulb's heat makes it\n    // shimmer by a couple of percent.\n    const age = t - P.born[p];\n    const env = age \u003c 0.1 ? 0.3 + 9 * age : 1 + 0.22 * Math.exp(-(age - 0.1) / 0.25);\n    const v = LEVEL * P.vig[p] * env * (1 + 0.035 * Math.sin(t * 9 + 40 * P.jit[p]));\n    for (let ch = 0; ch \u003c 3; ch++) {\n      const L = c[ch] * tint[ch] * v;\n      buf[p * 3 + ch] += L;\n      if (g1 > 0) {\n        if (x > 0) buf[(p - 1) * 3 + ch] += L * g1;\n        if (x \u003c W - 1) buf[(p + 1) * 3 + ch] += L * g1;\n        if (y > 0) buf[(p - W) * 3 + ch] += L * g1;\n        if (y \u003c H - 1) buf[(p + W) * 3 + ch] += L * g1;\n        if (x > 0 && y > 0) buf[(p - W - 1) * 3 + ch] += L * g2;\n        if (x \u003c W - 1 && y > 0) buf[(p - W + 1) * 3 + ch] += L * g2;\n        if (x > 0 && y \u003c H - 1) buf[(p + W - 1) * 3 + ch] += L * g2;\n        if (x \u003c W - 1 && y \u003c H - 1) buf[(p + W + 1) * 3 + ch] += L * g2;\n      }\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, Math.floor(p / W), Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Bulb=0..1, Speed=0.2..3, Picture=0..5, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Bulb","min":0,"max":1,"about":"The bulb behind the board, from a full warm white at 0 down a dimmer to a low orange glow at 1, where the blue and violet pegs go dark first."},{"name":"Speed","min":0.2,"max":3,"about":"Pegs pushed in per second, 10 at 0.2, 100 at 2 and 150 at 3; the pull-out sweep runs faster with it too."},{"name":"Picture","min":0,"max":5,"about":"Which template goes on: rocket, sailboat, flower pot, fish, house or clown; turning it pushes the pegs out and starts that sheet, and after it the sheets follow in that order."},{"name":"Glow","min":0,"max":1,"about":"How far each peg's light spills onto the black board round it, from a clean dot at 0 to a soft lit patch at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.0352,"detail":0.2377,"edges":0.8627,"complexity":0.6614,"coverage":0.1604,"colour":0.2171,"drift":0.0512},"knobResponse":[0.0548,0.0566,0.1395,0.0943]},{"slug":"pendulum-wave","title":"Pendulum Wave","family":"physics","round":24,"note":"길이가 조금씩 다른 진자 줄을 위에서 내려다봐요. 한꺼번에 놓은 추들이 한 줄로 흔들리다가 뱀처럼 휘고, 세 줄, 두 줄로 엇갈렸다가 28초 만에 다시 한 줄로 모여요. K1 이 강철에서 놋쇠와 구리를 지나 무지개 유리구슬까지 추를 바꾸고, K4 를 올리면 추가 지나간 자리에 빛 꼬리가 남아요.","idea":"Seen straight down from above, a row of pendulums hangs from a beam down the middle of a lamplit table, each shorter one swinging once more per cycle than the last, so the row that leaves the release board as one straight line winds into a travelling snake and splits into three and two interleaved rows before it scatters and lines up again at the end of the cycle.","buttons":"K1 tap catches every bob on the release board and lets them all go together, so the wave starts over from one straight line.","code":"// ===== Patternflow pattern =====\n// Title:   Pendulum Wave\n// Family:  physics\n// Idea:    Seen straight down from above, a row of pendulums hangs from a beam down the middle of a lamplit table, each shorter one swinging once more per cycle than the last, so the row that leaves the release board as one straight line winds into a travelling snake and splits into three and two interleaved rows before it scatters and lines up again at the end of the cycle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the pendulum wave demonstration of the Harvard Natural Sciences Lecture Demonstrations, fifteen pendulums tuned to 51 to 65 swings a minute\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Finish=0..1, Speed=0.2..3, Pendulums=16..24, Trails=0..1\n//\n// Knob 1: Finish. The bobs and the lamp over them: polished steel under a cool lamp on a walnut table at 0, brass at 0.25 and copper at 0.5 under a warm lamp, sea-green glass beads on a pale lab bench at 0.75, opening into a rainbow down the row at 1. Each glass bead focuses a spot of its own colour into its shadow.\n// Knob 2: Speed. The pace of time. At 2 a cycle takes 28 seconds and the longest pendulum swings 22 times in it, once every 1.27 seconds; at 0.2 it all runs ten times slower, at 3 half as fast again.\n// Knob 3: Pendulums. How many hang from the beam, 16 to 24, always filling the 128 rows. With more of them the bobs are smaller and the shortest swings 45 times a cycle against the longest's 22.\n// Knob 4: Trails. A long exposure in the pendulums' own time: at 0.06 each bob drags a short streak, and turned up each one paints more of its arc in fading light, until at 1 the comets run together into a ladder of glowing bars with the bobs racing along them.\n// Buttons: K1 tap catches every bob on the release board and lets them all go together, so the wave starts over from one straight line.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, ceil, round, cos, sqrt, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\n// The beam's centre line (it covers columns 30 and 31) and the swing.\nconst BX = 31;\nconst AMP = 22;\n// One cycle at Speed 2, in seconds, and how many times the longest\n// pendulum swings in it; each shorter one swings once more.\nconst TC = 28;\nconst N0 = 22;\n// The lamp, off the left edge, and the beam's height over the table, in\n// LEDs. The longest string is 13 LEDs, so its bob hangs 4 over the table.\nconst [LX, LY, LZ] = [-34, 58, 120];\nconst ZB = 17;\nconst L0 = 13;\nconst MAXN = 24;\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5) * 255, f(3) * 255, f(1) * 255];\n}\n\n// The lamp's colour, and the metal, at Finish 0, 1/4, 1/2 and 3/4 and on.\nconst LAMPS = [\n  [184, 206, 248],\n  [255, 214, 160],\n  [255, 192, 142],\n  [238, 236, 226],\n  [238, 236, 226],\n];\nconst METALS = [\n  [196, 208, 226],\n  [236, 172, 72],\n  [240, 122, 74],\n  [240, 122, 74],\n  [240, 122, 74],\n];\nconst stop = (T, f) => {\n  const u = cl(f, 0, 1) * 4, i = min(3, floor(u));\n  return T[i].map((v, c) => mix(v, T[i + 1][c], u - i));\n};\n\n// The table: walnut boards running along the beam, and a pale epoxy bench.\n// The lamp's pool on it never moves, so it is worked out once.\nfunction build(P) {\n  const seams = [11, 37, 58];\n  const ax = 14 - LX, ay = 62 - LY, az = -LZ, al = sqrt(ax * ax + ay * ay + az * az);\n  let top = 0;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    let pk = 0;\n    for (const s of seams) if (x >= s) pk++;\n    const sx = x + pk * 17.3, warp = 2.2 * vn(sx * 0.12, y * 0.018 + pk * 7);\n    const grain = vn(sx * 0.62 + warp, y * 0.04 + pk * 13), fine = vn(sx * 1.9, y * 0.22 + pk * 5);\n    const k = (0.74 + 0.36 * grain + 0.12 * fine) * (seams.includes(x) ? 0.6 : 1) * (0.88 + 0.24 * hash(pk, 99));\n    P.wood[i * 3] = 0.76 * k;\n    P.wood[i * 3 + 1] = 0.37 * k;\n    P.wood[i * 3 + 2] = 0.16 * k;\n    const b = 0.95 + 0.05 * hash(x, y + 300) + 0.05 * vn(x * 0.25, y * 0.25);\n    P.bench[i * 3] = 0.8 * b;\n    P.bench[i * 3 + 1] = 0.84 * b;\n    P.bench[i * 3 + 2] = 0.8 * b;\n    // Inverse square and the floor's slant, inside the shade's cone.\n    const vx = x + 0.5 - LX, vy = y + 0.5 - LY, d = sqrt(vx * vx + vy * vy + LZ * LZ);\n    const ca = (vx * ax + vy * ay + LZ * -az) / (d * al);\n    const p = (LZ / d) ** 3 * (0.25 + 0.75 * sm(0.83, 0.97, ca));\n    P.pool[i] = p;\n    top = max(top, p);\n    // The beam's shadow: it lies level, so its shadow is a straight band.\n    const bx = LX + (BX - LX) * (LZ / (LZ - ZB)), hw = LZ / (LZ - ZB);\n    P.beamD[i] = 0.5 * (1 - sm(hw - 0.9, hw + 0.9, Math.abs(x + 0.5 - bx)));\n  }\n  for (let i = 0; i \u003c N; i++) P.pool[i] /= top;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    wood: F(N * 3), bench: F(N * 3), pool: F(N), beamD: F(N), D: F(N), tr: F(N * 3), f: F(N * 3),\n    x: F(MAXN), prev: F(MAXN), from: F(MAXN), y: F(MAXN), z: F(MAXN), r: F(MAXN),\n    c: 0, n: 0, hold: 0.3, board: 1, fin: 0, tau: 0.05, first: true,\n  };\n  params.s.from.fill(BX + AMP);\n  build(params.s);\n}\n\n// Where each pendulum hangs, how high its bob is and how big it looks.\nfunction layout(P, n) {\n  P.n = n;\n  const s = H / n, rb = min(2.35, 0.31 * s);\n  for (let i = 0; i \u003c MAXN; i++) {\n    P.y[i] = floor(s / 2 + s * i) + 0.5;\n    // A string's length goes as the square of its period.\n    P.z[i] = ZB - L0 * (N0 / (N0 + i)) ** 2;\n    P.r[i] = rb * (0.93 + 0.022 * P.z[i]);\n  }\n}\n\n// The colours the finish gives the lamp and each bob.\nfunction colours(P) {\n  const f = P.fin, n = P.n;\n  P.lamp = stop(LAMPS, f);\n  P.glass = sm(0.52, 0.74, f);\n  P.benchK = sm(0.5, 0.74, f);\n  // Brass and copper tint their own highlights; steel and glass do not.\n  P.tint = (0.15 + 0.7 * sm(0, 0.25, f)) * (1 - P.glass);\n  const m = stop(METALS, f), u = sm(0.75, 1, f);\n  P.col = [];\n  // Sea-green glass at 3/4, opening into a rainbow down the row at 1.\n  for (let i = 0; i \u003c n; i++) {\n    const b = hsv(mix(0.42, 0.02 + (0.8 * i) / (n - 1), u), 0.82, 1);\n    P.col.push(m.map((v, c) => mix(v, b[c], P.glass)));\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const real = cl(dt || 0, 0, 0.1), d = (real * cl(k[1], 0.2, 3)) / 2;\n  P.fin = cl(k[0], 0, 1);\n  P.tau = 0.05 + 0.3 * cl(k[3], 0, 1) ** 1.6;\n  const n = cl(round(k[2]), 16, 24);\n  if (n !== P.n) layout(P, n);\n  colours(P);\n\n  // The button: a board comes in, every bob is caught against it, and all\n  // are let go at once.\n  if (input.btnPressed && input.btnPressed[0] && P.hold \u003c 0) {\n    P.hold = 0;\n    P.from.set(P.x);\n  }\n  if (P.hold >= 0) {\n    P.hold += real;\n    const e = sm(0.05, 0.6, P.hold);\n    for (let i = 0; i \u003c MAXN; i++) P.x[i] = mix(P.from[i], BX + AMP, e);\n    P.board = sm(0, 0.35, P.hold);\n    if (P.hold >= 0.95) (P.hold = -1), (P.c = 0);\n  } else {\n    P.c = (P.c + d) % TC;\n    for (let i = 0; i \u003c MAXN; i++) P.x[i] = BX + AMP * cos((2 * PI * (N0 + i) * P.c) / TC);\n    P.board = max(0, P.board - real * 5);\n  }\n  if (P.first) (P.first = false), P.prev.set(P.x);\n\n  // The long exposure fades in the pendulums' own time, so a trail is as\n  // long on the table at any speed. Each bob paints the way it came this\n  // frame, older parts dimmer.\n  const tr = P.tr, fade = exp(-d / P.tau), span = max(d, 0.004);\n  for (let i = 0; i \u003c tr.length; i++) tr[i] *= fade;\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = P.prev[i], x1 = P.x[i], y = P.y[i], rt = P.r[i] * 0.8, steps = max(1, ceil(Math.abs(x1 - x0) / 0.6));\n    const col = P.col[i].map((v, c) => (v * 0.55 + P.lamp[c] * 0.25) * 0.85);\n    for (let s = 1; s \u003c= steps; s++) {\n      const t = s / steps, xs = mix(x0, x1, t), lev = exp((-(1 - t) * span) / P.tau);\n      for (let yy = floor(y - rt - 1); yy \u003c= y + rt + 1; yy++)\n        for (let xx = floor(xs - rt - 1); xx \u003c= xs + rt + 1; xx++) {\n          if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n          const dx = xx + 0.5 - xs, dy = yy + 0.5 - y, q = (dx * dx + dy * dy) / (rt * rt);\n          if (q >= 1.6) continue;\n          const a = lev * exp(-1.6 * q), o = (yy * W + xx) * 3;\n          for (let c = 0; c \u003c 3; c++) tr[o + c] = max(tr[o + c], col[c] * a);\n        }\n    }\n  }\n  P.prev.set(P.x);\n}\n\n// Where the lamp throws a point at height z onto the table.\nconst proj = (x, y, z) => {\n  const k = LZ / (LZ - z);\n  return [LX + (x - LX) * k, LY + (y - LY) * k];\n};\n\n// A shiny ball, sampled two by two inside each LED.\nfunction ball(F, cx, cy, cz, r, base, lamp, g, tint) {\n  const sc = lamp.map((v, c) => v * mix(1, (base[c] / 255) * 1.15, tint));\n  // The light leans twice as far as the lamp really stands, so the glint\n  // sits clearly on the lamp's side of a ball five LEDs across.\n  let lx = 2 * (LX - cx), ly = 2 * (LY - cy), lz = LZ - cz;\n  const ll = sqrt(lx * lx + ly * ly + lz * lz);\n  (lx /= ll), (ly /= ll), (lz /= ll);\n  let hx = lx, hy = ly, hz = lz + 1;\n  const hl = sqrt(hx * hx + hy * hy + hz * hz);\n  (hx /= hl), (hy /= hl), (hz /= hl);\n  const lxy = sqrt(lx * lx + ly * ly) || 1;\n  const col = [0, 0, 0];\n  for (let y = floor(cy - r - 1); y \u003c= cy + r + 1; y++)\n    for (let x = floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      let cov = 0;\n      col[0] = col[1] = col[2] = 0;\n      for (let sy = 0; sy \u003c 2; sy++)\n        for (let sx = 0; sx \u003c 2; sx++) {\n          const dx = (x + 0.25 + 0.5 * sx - cx) / r, dy = (y + 0.25 + 0.5 * sy - cy) / r, q = dx * dx + dy * dy;\n          if (q >= 1) continue;\n          cov += 0.25;\n          const nz = sqrt(1 - q), diff = max(0, dx * lx + dy * ly + nz * lz), nh = max(0, dx * hx + dy * hy + nz * hz), spec = nh ** 18, sheen = nh ** 3;\n          // Metal: the lamp's side lit, the rim holding the dark table.\n          const rim = 0.4 + 0.6 * nz, back = max(0, -(dx * lx + dy * ly) / lxy) * sqrt(q);\n          for (let c = 0; c \u003c 3; c++) {\n            const m = base[c] * (0.1 + 0.85 * diff * sqrt(diff)) * rim, gl = base[c] * (0.3 + 0.25 * diff + 0.9 * back);\n            col[c] += (mix(m, gl, g) + sc[c] * (spec * 1.6 + 0.12 * sheen)) * 0.25;\n          }\n        }\n      if (cov \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = F[o + c] * (1 - cov) + col[c];\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.n) return;\n  const F = P.f, D = P.D, n = P.n, lamp = P.lamp, g = P.glass, bk = P.benchK;\n\n  // Shadows on the table: the beam, each string and each bob. A bob higher\n  // up throws its shadow further from the lamp and softer.\n  D.set(P.beamD);\n  const sh = [];\n  for (let i = 0; i \u003c n; i++) {\n    const [sx, sy] = proj(P.x[i], P.y[i], P.z[i]), [px, py] = proj(BX, P.y[i], ZB);\n    sh.push([sx, sy]);\n    const rs = P.r[i] * 0.95, pen = 0.45 + 0.09 * P.z[i], dk = (0.9 - 0.02 * P.z[i]) * (1 - 0.15 * g);\n    for (let y = floor(sy - rs - pen - 1); y \u003c= sy + rs + pen + 1; y++)\n      for (let x = floor(sx - rs - pen - 1); x \u003c= sx + rs + pen + 1; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const dd = sqrt((x + 0.5 - sx) ** 2 + (y + 0.5 - sy) ** 2), v = dk * (1 - sm(rs - pen, rs + pen, dd)), j = y * W + x;\n        if (v > D[j]) D[j] = v;\n      }\n    const len = sqrt((sx - px) ** 2 + (sy - py) ** 2), m = ceil(len * 1.5);\n    for (let s = 0; s \u003c= m; s++) {\n      const t = s / max(1, m), x = floor(mix(px, sx, t)), y = floor(mix(py, sy, t));\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && D[y * W + x] \u003c 0.2) D[y * W + x] = 0.2;\n    }\n  }\n\n  // The table under the lamp.\n  const fl = 0.42;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const e = (0.1 + 0.9 * P.pool[i] * (1 - D[i])) * fl;\n    for (let c = 0; c \u003c 3; c++) F[o + c] = mix(P.wood[o + c], P.bench[o + c], bk) * lamp[c] * e + P.tr[o + c];\n  }\n  // A glass bead gathers the lamp into a spot of its colour in its shadow.\n  if (g > 0.01)\n    for (let i = 0; i \u003c n; i++) {\n      const [sx, sy] = sh[i], rc = P.r[i] * 0.55, col = P.col[i];\n      for (let y = floor(sy - 3); y \u003c= sy + 3; y++)\n        for (let x = floor(sx - 3); x \u003c= sx + 3; x++) {\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const q = ((x + 0.5 - sx) ** 2 + (y + 0.5 - sy) ** 2) / (rc * rc), a = g * 0.75 * exp(-q) * (0.4 + 0.6 * P.pool[y * W + x]), o = (y * W + x) * 3;\n          for (let c = 0; c \u003c 3; c++) F[o + c] += col[c] * a;\n        }\n    }\n\n  // Strings: a fine line from the beam out to each bob, catching the lamp.\n  for (let i = 0; i \u003c n; i++) {\n    const x1 = P.x[i], y = floor(P.y[i]), a0 = min(BX, x1), a1 = max(BX, x1);\n    for (let x = floor(a0); x \u003c a1; x++) {\n      if (x \u003c 0 || x >= W) continue;\n      const o = (y * W + x) * 3, a = 0.5 * cl(min(x + 1 - a0, a1 - x), 0, 1);\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], lamp[c] * 0.5, a);\n    }\n  }\n  // The bobs, the higher ones last.\n  for (let i = 0; i \u003c n; i++) ball(F, P.x[i], P.y[i], P.z[i], P.r[i], P.col[i], lamp, g, P.tint);\n\n  // The release board, a strip of pale wood that holds the row straight.\n  if (P.board > 0.01) {\n    const bx = BX + AMP + 3.2;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = floor(bx); x \u003c bx + 2 && x \u003c W; x++) {\n        const o = (y * W + x) * 3, v = x === floor(bx) ? 0.85 : 0.55;\n        for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], [224, 186, 132][c] * (lamp[c] / 255) * v, P.board);\n      }\n  }\n\n  // The beam over everything: brushed metal, its lamp side bright, with a\n  // clamp at every pivot.\n  for (let y = 0; y \u003c H; y++) {\n    const grain = 0.92 + 0.08 * hash(y, 7);\n    for (let x = BX - 1; x \u003c= BX; x++) {\n      const o = (y * W + x) * 3, v = (x \u003c BX ? 0.5 : 0.24) * grain;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = lamp[c] * v;\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    const y = floor(P.y[i]);\n    for (let x = BX - 1; x \u003c= BX; x++) {\n      const o = (y * W + x) * 3, v = x \u003c BX ? 0.78 : 0.4;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = lamp[c] * v;\n    }\n  }\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-pendulum-wave","type":"code","name":"pendulum-wave","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pendulum Wave\n// Family:  physics\n// Idea:    Seen straight down from above, a row of pendulums hangs from a beam down the middle of a lamplit table, each shorter one swinging once more per cycle than the last, so the row that leaves the release board as one straight line winds into a travelling snake and splits into three and two interleaved rows before it scatters and lines up again at the end of the cycle.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the pendulum wave demonstration of the Harvard Natural Sciences Lecture Demonstrations, fifteen pendulums tuned to 51 to 65 swings a minute\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Finish=0..1, Speed=0.2..3, Pendulums=16..24, Trails=0..1\n//\n// Knob 1: Finish. The bobs and the lamp over them: polished steel under a cool lamp on a walnut table at 0, brass at 0.25 and copper at 0.5 under a warm lamp, sea-green glass beads on a pale lab bench at 0.75, opening into a rainbow down the row at 1. Each glass bead focuses a spot of its own colour into its shadow.\n// Knob 2: Speed. The pace of time. At 2 a cycle takes 28 seconds and the longest pendulum swings 22 times in it, once every 1.27 seconds; at 0.2 it all runs ten times slower, at 3 half as fast again.\n// Knob 3: Pendulums. How many hang from the beam, 16 to 24, always filling the 128 rows. With more of them the bobs are smaller and the shortest swings 45 times a cycle against the longest's 22.\n// Knob 4: Trails. A long exposure in the pendulums' own time: at 0.06 each bob drags a short streak, and turned up each one paints more of its arc in fading light, until at 1 the comets run together into a ladder of glowing bars with the bobs racing along them.\n// Buttons: K1 tap catches every bob on the release board and lets them all go together, so the wave starts over from one straight line.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, ceil, round, cos, sqrt, exp, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\n\n// The beam's centre line (it covers columns 30 and 31) and the swing.\nconst BX = 31;\nconst AMP = 22;\n// One cycle at Speed 2, in seconds, and how many times the longest\n// pendulum swings in it; each shorter one swings once more.\nconst TC = 28;\nconst N0 = 22;\n// The lamp, off the left edge, and the beam's height over the table, in\n// LEDs. The longest string is 13 LEDs, so its bob hangs 4 over the table.\nconst [LX, LY, LZ] = [-34, 58, 120];\nconst ZB = 17;\nconst L0 = 13;\nconst MAXN = 24;\n\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * max(0, min(k, 4 - k, 1)));\n  };\n  return [f(5) * 255, f(3) * 255, f(1) * 255];\n}\n\n// The lamp's colour, and the metal, at Finish 0, 1/4, 1/2 and 3/4 and on.\nconst LAMPS = [\n  [184, 206, 248],\n  [255, 214, 160],\n  [255, 192, 142],\n  [238, 236, 226],\n  [238, 236, 226],\n];\nconst METALS = [\n  [196, 208, 226],\n  [236, 172, 72],\n  [240, 122, 74],\n  [240, 122, 74],\n  [240, 122, 74],\n];\nconst stop = (T, f) => {\n  const u = cl(f, 0, 1) * 4, i = min(3, floor(u));\n  return T[i].map((v, c) => mix(v, T[i + 1][c], u - i));\n};\n\n// The table: walnut boards running along the beam, and a pale epoxy bench.\n// The lamp's pool on it never moves, so it is worked out once.\nfunction build(P) {\n  const seams = [11, 37, 58];\n  const ax = 14 - LX, ay = 62 - LY, az = -LZ, al = sqrt(ax * ax + ay * ay + az * az);\n  let top = 0;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6;\n    let pk = 0;\n    for (const s of seams) if (x >= s) pk++;\n    const sx = x + pk * 17.3, warp = 2.2 * vn(sx * 0.12, y * 0.018 + pk * 7);\n    const grain = vn(sx * 0.62 + warp, y * 0.04 + pk * 13), fine = vn(sx * 1.9, y * 0.22 + pk * 5);\n    const k = (0.74 + 0.36 * grain + 0.12 * fine) * (seams.includes(x) ? 0.6 : 1) * (0.88 + 0.24 * hash(pk, 99));\n    P.wood[i * 3] = 0.76 * k;\n    P.wood[i * 3 + 1] = 0.37 * k;\n    P.wood[i * 3 + 2] = 0.16 * k;\n    const b = 0.95 + 0.05 * hash(x, y + 300) + 0.05 * vn(x * 0.25, y * 0.25);\n    P.bench[i * 3] = 0.8 * b;\n    P.bench[i * 3 + 1] = 0.84 * b;\n    P.bench[i * 3 + 2] = 0.8 * b;\n    // Inverse square and the floor's slant, inside the shade's cone.\n    const vx = x + 0.5 - LX, vy = y + 0.5 - LY, d = sqrt(vx * vx + vy * vy + LZ * LZ);\n    const ca = (vx * ax + vy * ay + LZ * -az) / (d * al);\n    const p = (LZ / d) ** 3 * (0.25 + 0.75 * sm(0.83, 0.97, ca));\n    P.pool[i] = p;\n    top = max(top, p);\n    // The beam's shadow: it lies level, so its shadow is a straight band.\n    const bx = LX + (BX - LX) * (LZ / (LZ - ZB)), hw = LZ / (LZ - ZB);\n    P.beamD[i] = 0.5 * (1 - sm(hw - 0.9, hw + 0.9, Math.abs(x + 0.5 - bx)));\n  }\n  for (let i = 0; i \u003c N; i++) P.pool[i] /= top;\n}\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.s = {\n    wood: F(N * 3), bench: F(N * 3), pool: F(N), beamD: F(N), D: F(N), tr: F(N * 3), f: F(N * 3),\n    x: F(MAXN), prev: F(MAXN), from: F(MAXN), y: F(MAXN), z: F(MAXN), r: F(MAXN),\n    c: 0, n: 0, hold: 0.3, board: 1, fin: 0, tau: 0.05, first: true,\n  };\n  params.s.from.fill(BX + AMP);\n  build(params.s);\n}\n\n// Where each pendulum hangs, how high its bob is and how big it looks.\nfunction layout(P, n) {\n  P.n = n;\n  const s = H / n, rb = min(2.35, 0.31 * s);\n  for (let i = 0; i \u003c MAXN; i++) {\n    P.y[i] = floor(s / 2 + s * i) + 0.5;\n    // A string's length goes as the square of its period.\n    P.z[i] = ZB - L0 * (N0 / (N0 + i)) ** 2;\n    P.r[i] = rb * (0.93 + 0.022 * P.z[i]);\n  }\n}\n\n// The colours the finish gives the lamp and each bob.\nfunction colours(P) {\n  const f = P.fin, n = P.n;\n  P.lamp = stop(LAMPS, f);\n  P.glass = sm(0.52, 0.74, f);\n  P.benchK = sm(0.5, 0.74, f);\n  // Brass and copper tint their own highlights; steel and glass do not.\n  P.tint = (0.15 + 0.7 * sm(0, 0.25, f)) * (1 - P.glass);\n  const m = stop(METALS, f), u = sm(0.75, 1, f);\n  P.col = [];\n  // Sea-green glass at 3/4, opening into a rainbow down the row at 1.\n  for (let i = 0; i \u003c n; i++) {\n    const b = hsv(mix(0.42, 0.02 + (0.8 * i) / (n - 1), u), 0.82, 1);\n    P.col.push(m.map((v, c) => mix(v, b[c], P.glass)));\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const real = cl(dt || 0, 0, 0.1), d = (real * cl(k[1], 0.2, 3)) / 2;\n  P.fin = cl(k[0], 0, 1);\n  P.tau = 0.05 + 0.3 * cl(k[3], 0, 1) ** 1.6;\n  const n = cl(round(k[2]), 16, 24);\n  if (n !== P.n) layout(P, n);\n  colours(P);\n\n  // The button: a board comes in, every bob is caught against it, and all\n  // are let go at once.\n  if (input.btnPressed && input.btnPressed[0] && P.hold \u003c 0) {\n    P.hold = 0;\n    P.from.set(P.x);\n  }\n  if (P.hold >= 0) {\n    P.hold += real;\n    const e = sm(0.05, 0.6, P.hold);\n    for (let i = 0; i \u003c MAXN; i++) P.x[i] = mix(P.from[i], BX + AMP, e);\n    P.board = sm(0, 0.35, P.hold);\n    if (P.hold >= 0.95) (P.hold = -1), (P.c = 0);\n  } else {\n    P.c = (P.c + d) % TC;\n    for (let i = 0; i \u003c MAXN; i++) P.x[i] = BX + AMP * cos((2 * PI * (N0 + i) * P.c) / TC);\n    P.board = max(0, P.board - real * 5);\n  }\n  if (P.first) (P.first = false), P.prev.set(P.x);\n\n  // The long exposure fades in the pendulums' own time, so a trail is as\n  // long on the table at any speed. Each bob paints the way it came this\n  // frame, older parts dimmer.\n  const tr = P.tr, fade = exp(-d / P.tau), span = max(d, 0.004);\n  for (let i = 0; i \u003c tr.length; i++) tr[i] *= fade;\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = P.prev[i], x1 = P.x[i], y = P.y[i], rt = P.r[i] * 0.8, steps = max(1, ceil(Math.abs(x1 - x0) / 0.6));\n    const col = P.col[i].map((v, c) => (v * 0.55 + P.lamp[c] * 0.25) * 0.85);\n    for (let s = 1; s \u003c= steps; s++) {\n      const t = s / steps, xs = mix(x0, x1, t), lev = exp((-(1 - t) * span) / P.tau);\n      for (let yy = floor(y - rt - 1); yy \u003c= y + rt + 1; yy++)\n        for (let xx = floor(xs - rt - 1); xx \u003c= xs + rt + 1; xx++) {\n          if (xx \u003c 0 || xx >= W || yy \u003c 0 || yy >= H) continue;\n          const dx = xx + 0.5 - xs, dy = yy + 0.5 - y, q = (dx * dx + dy * dy) / (rt * rt);\n          if (q >= 1.6) continue;\n          const a = lev * exp(-1.6 * q), o = (yy * W + xx) * 3;\n          for (let c = 0; c \u003c 3; c++) tr[o + c] = max(tr[o + c], col[c] * a);\n        }\n    }\n  }\n  P.prev.set(P.x);\n}\n\n// Where the lamp throws a point at height z onto the table.\nconst proj = (x, y, z) => {\n  const k = LZ / (LZ - z);\n  return [LX + (x - LX) * k, LY + (y - LY) * k];\n};\n\n// A shiny ball, sampled two by two inside each LED.\nfunction ball(F, cx, cy, cz, r, base, lamp, g, tint) {\n  const sc = lamp.map((v, c) => v * mix(1, (base[c] / 255) * 1.15, tint));\n  // The light leans twice as far as the lamp really stands, so the glint\n  // sits clearly on the lamp's side of a ball five LEDs across.\n  let lx = 2 * (LX - cx), ly = 2 * (LY - cy), lz = LZ - cz;\n  const ll = sqrt(lx * lx + ly * ly + lz * lz);\n  (lx /= ll), (ly /= ll), (lz /= ll);\n  let hx = lx, hy = ly, hz = lz + 1;\n  const hl = sqrt(hx * hx + hy * hy + hz * hz);\n  (hx /= hl), (hy /= hl), (hz /= hl);\n  const lxy = sqrt(lx * lx + ly * ly) || 1;\n  const col = [0, 0, 0];\n  for (let y = floor(cy - r - 1); y \u003c= cy + r + 1; y++)\n    for (let x = floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      let cov = 0;\n      col[0] = col[1] = col[2] = 0;\n      for (let sy = 0; sy \u003c 2; sy++)\n        for (let sx = 0; sx \u003c 2; sx++) {\n          const dx = (x + 0.25 + 0.5 * sx - cx) / r, dy = (y + 0.25 + 0.5 * sy - cy) / r, q = dx * dx + dy * dy;\n          if (q >= 1) continue;\n          cov += 0.25;\n          const nz = sqrt(1 - q), diff = max(0, dx * lx + dy * ly + nz * lz), nh = max(0, dx * hx + dy * hy + nz * hz), spec = nh ** 18, sheen = nh ** 3;\n          // Metal: the lamp's side lit, the rim holding the dark table.\n          const rim = 0.4 + 0.6 * nz, back = max(0, -(dx * lx + dy * ly) / lxy) * sqrt(q);\n          for (let c = 0; c \u003c 3; c++) {\n            const m = base[c] * (0.1 + 0.85 * diff * sqrt(diff)) * rim, gl = base[c] * (0.3 + 0.25 * diff + 0.9 * back);\n            col[c] += (mix(m, gl, g) + sc[c] * (spec * 1.6 + 0.12 * sheen)) * 0.25;\n          }\n        }\n      if (cov \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = F[o + c] * (1 - cov) + col[c];\n    }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.n) return;\n  const F = P.f, D = P.D, n = P.n, lamp = P.lamp, g = P.glass, bk = P.benchK;\n\n  // Shadows on the table: the beam, each string and each bob. A bob higher\n  // up throws its shadow further from the lamp and softer.\n  D.set(P.beamD);\n  const sh = [];\n  for (let i = 0; i \u003c n; i++) {\n    const [sx, sy] = proj(P.x[i], P.y[i], P.z[i]), [px, py] = proj(BX, P.y[i], ZB);\n    sh.push([sx, sy]);\n    const rs = P.r[i] * 0.95, pen = 0.45 + 0.09 * P.z[i], dk = (0.9 - 0.02 * P.z[i]) * (1 - 0.15 * g);\n    for (let y = floor(sy - rs - pen - 1); y \u003c= sy + rs + pen + 1; y++)\n      for (let x = floor(sx - rs - pen - 1); x \u003c= sx + rs + pen + 1; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n        const dd = sqrt((x + 0.5 - sx) ** 2 + (y + 0.5 - sy) ** 2), v = dk * (1 - sm(rs - pen, rs + pen, dd)), j = y * W + x;\n        if (v > D[j]) D[j] = v;\n      }\n    const len = sqrt((sx - px) ** 2 + (sy - py) ** 2), m = ceil(len * 1.5);\n    for (let s = 0; s \u003c= m; s++) {\n      const t = s / max(1, m), x = floor(mix(px, sx, t)), y = floor(mix(py, sy, t));\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && D[y * W + x] \u003c 0.2) D[y * W + x] = 0.2;\n    }\n  }\n\n  // The table under the lamp.\n  const fl = 0.42;\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const e = (0.1 + 0.9 * P.pool[i] * (1 - D[i])) * fl;\n    for (let c = 0; c \u003c 3; c++) F[o + c] = mix(P.wood[o + c], P.bench[o + c], bk) * lamp[c] * e + P.tr[o + c];\n  }\n  // A glass bead gathers the lamp into a spot of its colour in its shadow.\n  if (g > 0.01)\n    for (let i = 0; i \u003c n; i++) {\n      const [sx, sy] = sh[i], rc = P.r[i] * 0.55, col = P.col[i];\n      for (let y = floor(sy - 3); y \u003c= sy + 3; y++)\n        for (let x = floor(sx - 3); x \u003c= sx + 3; x++) {\n          if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n          const q = ((x + 0.5 - sx) ** 2 + (y + 0.5 - sy) ** 2) / (rc * rc), a = g * 0.75 * exp(-q) * (0.4 + 0.6 * P.pool[y * W + x]), o = (y * W + x) * 3;\n          for (let c = 0; c \u003c 3; c++) F[o + c] += col[c] * a;\n        }\n    }\n\n  // Strings: a fine line from the beam out to each bob, catching the lamp.\n  for (let i = 0; i \u003c n; i++) {\n    const x1 = P.x[i], y = floor(P.y[i]), a0 = min(BX, x1), a1 = max(BX, x1);\n    for (let x = floor(a0); x \u003c a1; x++) {\n      if (x \u003c 0 || x >= W) continue;\n      const o = (y * W + x) * 3, a = 0.5 * cl(min(x + 1 - a0, a1 - x), 0, 1);\n      for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], lamp[c] * 0.5, a);\n    }\n  }\n  // The bobs, the higher ones last.\n  for (let i = 0; i \u003c n; i++) ball(F, P.x[i], P.y[i], P.z[i], P.r[i], P.col[i], lamp, g, P.tint);\n\n  // The release board, a strip of pale wood that holds the row straight.\n  if (P.board > 0.01) {\n    const bx = BX + AMP + 3.2;\n    for (let y = 0; y \u003c H; y++)\n      for (let x = floor(bx); x \u003c bx + 2 && x \u003c W; x++) {\n        const o = (y * W + x) * 3, v = x === floor(bx) ? 0.85 : 0.55;\n        for (let c = 0; c \u003c 3; c++) F[o + c] = mix(F[o + c], [224, 186, 132][c] * (lamp[c] / 255) * v, P.board);\n      }\n  }\n\n  // The beam over everything: brushed metal, its lamp side bright, with a\n  // clamp at every pivot.\n  for (let y = 0; y \u003c H; y++) {\n    const grain = 0.92 + 0.08 * hash(y, 7);\n    for (let x = BX - 1; x \u003c= BX; x++) {\n      const o = (y * W + x) * 3, v = (x \u003c BX ? 0.5 : 0.24) * grain;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = lamp[c] * v;\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    const y = floor(P.y[i]);\n    for (let x = BX - 1; x \u003c= BX; x++) {\n      const o = (y * W + x) * 3, v = x \u003c BX ? 0.78 : 0.4;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = lamp[c] * v;\n    }\n  }\n\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Finish=0..1, Speed=0.2..3, Pendulums=16..24, Trails=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Finish","min":0,"max":1,"about":"The bobs and the lamp over them: polished steel under a cool lamp on a walnut table at 0, brass at 0.25 and copper at 0.5 under a warm lamp, sea-green glass beads on a pale lab bench at 0.75, opening into a rainbow down the row at 1. Each glass bead focuses a spot of its own colour into its shadow."},{"name":"Speed","min":0.2,"max":3,"about":"The pace of time. At 2 a cycle takes 28 seconds and the longest pendulum swings 22 times in it, once every 1.27 seconds; at 0.2 it all runs ten times slower, at 3 half as fast again."},{"name":"Pendulums","min":16,"max":24,"about":"How many hang from the beam, 16 to 24, always filling the 128 rows. With more of them the bobs are smaller and the shortest swings 45 times a cycle against the longest's 22."},{"name":"Trails","min":0,"max":1,"about":"A long exposure in the pendulums' own time: at 0.06 each bob drags a short streak, and turned up each one paints more of its arc in fading light, until at 1 the comets run together into a ladder of glowing bars with the bobs racing along them."}],"start":[0,2,16,0.06],"measures":{"motion":0.7632,"detail":0.0304,"edges":0.1868,"complexity":1.4841,"coverage":0.886,"colour":0.0797,"drift":0.0334},"knobResponse":[0.1242,0.0438,0.0523,0.0491]},{"slug":"pin-art","title":"Pin Art","family":"toy","round":22,"note":"핀 아트 장난감을 앞에서 봐요. 엇갈린 격자의 강철 핀 4096개가 패널을 채우고, 뒤에서 펼친 손이 눌러 들어오면 밀려 나온 핀만 비스듬한 등빛을 받아 빛나요. 장난감을 기울이면 핀이 물결치며 평평해지고 열쇠가 다음으로 눌러 들어와요.","idea":"A pin-art desk toy seen from the front fills the panel with four thousand steel pins in a staggered grid, and a spread hand, a key, a seashell, a toy car and a face press in from behind one after another, each relief rising out of the dim pins into a raking lamp until the toy is tilted and the pins slide flat again in a ripple.","buttons":"K1 tap tilts the toy flat now and presses the next object in.","code":"// ===== Patternflow pattern =====\n// Title:   Pin Art\n// Family:  toy\n// Idea:    A pin-art desk toy seen from the front fills the panel with four thousand steel pins in a staggered grid, and a spread hand, a key, a seashell, a toy car and a face press in from behind one after another, each relief rising out of the dim pins into a raking lamp until the toy is tilted and the pins slide flat again in a ripple.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after Ward Fleming's pinscreen desk toy (1985)\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Metal=0..1, Speed=0.2..3, Object=0..4, Light=0..1\n//\n// Knob 1: Metal. The finish of the pins and the colour the lamp gives them: blue steel at 0, turning through violet and pink to brass in the middle, then through green back to blue steel at 1.\n// Knob 2: Speed. How fast things press in, hold and are tilted flat again: at 2 an object takes 3 s to press in and a round is 8 s; at 0.2 it all runs ten times slower.\n// Knob 3: Object. What presses in next: a spread hand, a key, a seashell, a toy car or a face, the rest following in that order. Turning it tilts the toy flat and brings the new one.\n// Knob 4: Light. Where the desk lamp stands, going once round the toy from its left side, upper left at the start. The relief shines on the lamp's side and throws its shadow away from it, and the flat pins are brighter nearer the lamp.\n// Buttons: K1 tap tilts the toy flat now and presses the next object in.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst NOBJ = 5;\n// The round at Speed 2, in seconds: press in, hold, tilt flat, rest.\nconst TP = 3.0;\nconst TH = 3.3;\nconst TW = 1.25;\nconst TR = 0.5;\nconst TC = TP + TH + TW + TR;\nconst { min, max, sqrt, sin, cos, exp, abs, round, hypot, atan2, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// A fixed hash, so the pins are the same uneven pins on every run.\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Distances to shapes, negative inside. seg() leaves how far along the\n// segment the nearest point lies in T.\nlet T = 0;\nfunction seg(px, py, ax, ay, bx, by) {\n  const dx = bx - ax;\n  const dy = by - ay;\n  T = clamp(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy), 0, 1);\n  return hypot(px - ax - dx * T, py - ay - dy * T);\n}\nfunction box(px, py, cx, cy, hx, hy, r) {\n  const qx = abs(px - cx) - hx + r;\n  const qy = abs(py - cy) - hy + r;\n  return hypot(max(qx, 0), max(qy, 0)) + min(max(qx, qy), 0) - r;\n}\nfunction ell(px, py, cx, cy, rx, ry) {\n  return (hypot((px - cx) / rx, (py - cy) / ry) - 1) * min(rx, ry);\n}\nfunction smin(a, b, k) {\n  const h = clamp(0.5 + (0.5 * (b - a)) / k, 0, 1);\n  return b + (a - b) * h - k * h * (1 - h);\n}\n// A soft round bump, near enough a Gaussian, that ends 2 radii out.\nconst bump = (px, py, cx, cy, rx, ry) => {\n  const q = ((px - cx) / rx) ** 2 + ((py - cy) / ry) ** 2;\n  return q \u003c 4 ? (1 - q / 4) ** 3 : 0;\n};\n// A rounded edge: 0 at the outline, 1 once r LEDs inside it.\nconst prof = (d, r) => {\n  const t = clamp(-d / r, 0, 1);\n  return sqrt(t * (2 - t));\n};\n// Pins next to the outline are dragged a little way out with it.\nconst halo = (d) => (d \u003c 5 ? 0.17 * exp(-d / 1.6) : 0);\n\n// Each object is a height above the pins' rest plane, 0..1, at an LED.\n// The fingers: base and tip of each, and the radius.\nconst FING = [\n  [15, 84, 3, 56, 6],\n  [20, 61, 10, 22, 5.8],\n  [30, 58, 29, 9, 6],\n  [39, 59, 47, 15, 5.8],\n  [47, 65, 59, 35, 5.2],\n];\nfunction hand(x, y) {\n  let d = box(x, y, 32, 77, 19, 17, 9);\n  let crease = 0;\n  for (let f = 0; f \u003c 5; f++) {\n    const [ax, ay, bx, by, r] = FING[f];\n    const e = seg(x, y, ax, ay, bx, by) - r;\n    if (e \u003c 0) {\n      const len = hypot(bx - ax, by - ay);\n      const j = f ? [0.4, 0.68] : [0.55, 0.55];\n      crease = max(crease, exp(-(((T - j[0]) * len) ** 2) / 0.8), exp(-(((T - j[1]) * len) ** 2) / 0.8));\n    }\n    d = smin(d, e, 2.5);\n  }\n  d = smin(d, seg(x, y, 32, 92, 32, 150) - 15.5, 8);\n  if (d > 0) return halo(d);\n  let r = 0.5 + 0.38 * prof(d, 8);\n  // The pads below the fingers, the ball of the thumb, and the lines of the palm.\n  r += 0.08 * bump(x, y, 22, 92, 8, 10) + 0.05 * bump(x, y, 34, 66, 14, 4) + 0.05 * bump(x, y, 43, 86, 6, 9);\n  r -= 0.1 * crease;\n  const heart = abs(y - (68 + 0.012 * (x - 30) ** 2 - 0.1 * (x - 30)));\n  const life = abs(hypot(x - 14, y - 92) - 15);\n  if (x > 18 && x \u003c 48 && y \u003c 80) r -= 0.1 * exp(-heart * heart);\n  if (y > 70 && y \u003c 104 && x > 18) r -= 0.1 * exp(-life * life);\n  return clamp(r, 0, 1);\n}\n\nfunction face(x, y) {\n  let d = ell(x, y, 32, 54, 24 - max(0, y - 60) * 0.24, 35);\n  d = smin(d, min(ell(x, y, 7, 56, 3.5, 8), ell(x, y, 57, 56, 3.5, 8)), 1.5);\n  const head = d;\n  d = smin(d, seg(x, y, 32, 88, 32, 140) - 10.5, 4);\n  d = smin(d, ell(x, y, 32, 142, 54, 28), 10);\n  if (d > 0) return halo(d);\n  let r = 0.42 + 0.24 * prof(d, 12);\n  // The neck and shoulders sit back under the jaw.\n  r -= 0.2 * sstep(-2, 2, head);\n  // Hair, combed back in strands from the hairline.\n  const hl = 33 + 0.012 * (x - 32) ** 2;\n  if (y \u003c hl) r += 0.04 * sstep(hl, hl - 3, y) + 0.06 * sin(x * 1.25 + (y - 20) * (x - 32) * 0.012);\n  // Brows, eye sockets and eyes, the nose, cheeks, lips and chin.\n  r += 0.06 * bump(x, y, 32, 36, 16, 9);\n  r += 0.12 * (bump(x, y, 22, 44, 7, 1.8) + bump(x, y, 42, 44, 7, 1.8));\n  r -= 0.3 * (bump(x, y, 22, 51, 6, 3.4) + bump(x, y, 42, 51, 6, 3.4));\n  r += 0.16 * (bump(x, y, 22, 51.5, 3, 1.8) + bump(x, y, 42, 51.5, 3, 1.8));\n  r += 0.3 * bump(x, y, 32, 59, 2.4, 9) + 0.18 * bump(x, y, 32, 67.5, 4.5, 2.6);\n  r -= 0.14 * (bump(x, y, 29, 70, 1.4, 1.1) + bump(x, y, 35, 70, 1.4, 1.1));\n  r += 0.12 * (bump(x, y, 19, 64, 6, 6) + bump(x, y, 45, 64, 6, 6));\n  r += 0.14 * bump(x, y, 32, 76.5, 6.5, 1.5) + 0.16 * bump(x, y, 32, 80.5, 5.5, 1.9) - 0.2 * bump(x, y, 32, 78.5, 7.5, 0.7);\n  r += 0.12 * bump(x, y, 32, 87, 6, 3);\n  return clamp(r, 0, 1);\n}\n\nfunction key(x, y) {\n  const rr = hypot(x - 32, y - 25);\n  let d = max(rr - 21, 9 - rr);\n  d = min(d, box(x, y, 32, 47, 9, 3, 1), box(x, y, 32, 55, 7, 2.5, 1), box(x, y, 32, 83, 4.5, 38, 2));\n  let bit = box(x, y, 44, 107, 8, 11, 1);\n  bit = max(bit, -box(x, y, 51, 101, 2.5, 2, 0), -box(x, y, 51, 111, 2.5, 2.5, 0), -box(x, y, 44, 106, 1.2, 5, 0));\n  d = min(d, bit);\n  if (d > 0) return halo(d);\n  let r = 0.72 + 0.2 * prof(d, 3);\n  // A raised rim round the bow's hole and a groove down the shank.\n  r += 0.08 * exp(-((rr - 12) ** 2) / 2);\n  if (y > 60 && y \u003c 118) r -= 0.12 * exp(-((x - 32) ** 2) / 1.2);\n  return clamp(r, 0, 1);\n}\n\n// A scallop, hinge down: ribs fan out from the hinge to a wavy edge.\nfunction shell(x, y) {\n  const dx = x - 32;\n  const dy = 92 - y;\n  const rho = hypot(dx, dy);\n  const th = atan2(dx, dy);\n  const rib = cos(th * 48);\n  let d = max(rho - 54 * (1 - 0.3 * th * th) - 1.2 * rib, (abs(th) - 0.85) * rho);\n  d = smin(d, box(x, y, 32, 94, 15, 5, 2), 3);\n  if (d > 0) return halo(d);\n  let r = 0.5 + 0.32 * prof(d, 14);\n  r += 0.13 * rib * sstep(5, 22, rho) * (dy > 0) + 0.025 * sin(rho * 1.4);\n  r -= 0.12 * exp(-((y - 89) ** 2) / 1.5) * (abs(dx) \u003c 14);\n  return clamp(r, 0, 1);\n}\n\n// A toy car seen from above, its nose at the top.\nfunction car(x, y) {\n  let body = box(x, y, 32, 65, 14 + min(3, max(0, y - 14) * 0.12), 52, 11);\n  body = smin(body, min(ell(x, y, 18, 36, 5, 12), ell(x, y, 46, 36, 5, 12), ell(x, y, 17, 96, 5, 12), ell(x, y, 47, 96, 5, 12)), 3);\n  const tyre = min(box(x, y, 11, 36, 3, 8, 1.5), box(x, y, 53, 36, 3, 8, 1.5), box(x, y, 10, 96, 3, 8, 1.5), box(x, y, 54, 96, 3, 8, 1.5));\n  const d = min(body, tyre);\n  if (d > 0) return halo(d);\n  if (body > 0) return 0.36 + 0.1 * prof(tyre, 2.5);\n  let r = 0.5 + 0.16 * prof(body, 4);\n  // The cabin: windscreen and rear window sunk between bonnet, roof and boot.\n  const xw = abs(x - 32);\n  const scr = xw \u003c 12 - (58 - y) * 0.25 && y > 45 && y \u003c 58;\n  const rear = xw \u003c 11 && y > 91 && y \u003c 99;\n  const roof = box(x, y, 32, 74.5, 11, 16, 3);\n  r += 0.14 * sstep(1, -1, roof) - 0.2 * (scr || rear);\n  // Bonnet creases, headlights, wing mirrors, the spoiler at the back.\n  r -= 0.14 * (exp(-((x - 23) ** 2) / 0.6) + exp(-((x - 41) ** 2) / 0.6)) * (y > 17 && y \u003c 42);\n  r += 0.16 * (bump(x, y, 22, 16, 3.5, 2.2) + bump(x, y, 42, 16, 3.5, 2.2)) + 0.18 * (bump(x, y, 15, 56, 3, 2) + bump(x, y, 49, 56, 3, 2));\n  r += 0.18 * sstep(1, -1, box(x, y, 32, 112, 16, 2, 1)) - 0.12 * sstep(1, -1, box(x, y, 32, 108, 14, 1, 0.5));\n  return clamp(r, 0, 1);\n}\n\nconst OBJECTS = [hand, key, shell, car, face];\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.pin = { r: F(N), gx: F(N), gy: F(N), ht: F(N), jit: F(N), started: false };\n  const P = params.pin;\n  for (let i = 0; i \u003c N; i++) P.jit[i] = 0.88 + 0.24 * hash(i);\n}\n\n// The object's heights, and their slopes for the lamp.\nfunction load(P, o) {\n  const { r, gx, gy } = P;\n  const fn = OBJECTS[o];\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) r[y * W + x] = fn(x + 0.5, y + 0.5);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      gx[i] = (r[y * W + min(W - 1, x + 1)] - r[y * W + max(0, x - 1)]) / 2;\n      gy[i] = (r[min(H - 1, y + 1) * W + x] - r[max(0, y - 1) * W + x]) / 2;\n    }\n}\n\nfunction tilt(P) {\n  if (P.c \u003c TP + TH) {\n    P.sw = P.s;\n    P.c = TP + TH;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.pin) setup(params);\n  const P = params.pin;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, NOBJ - 1);\n  P.lamp = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    P.base = base;\n    P.count = -1;\n    // Open on the last object of the round, just as the toy is tilted.\n    load(P, (base + NOBJ - 1) % NOBJ);\n    P.c = TP + TH - 0.05;\n    P.s = 1;\n    P.sw = 1;\n  }\n  if (base !== P.base) {\n    P.base = base;\n    P.count = -1;\n    tilt(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) tilt(P);\n  P.c += dt * P.rate;\n  if (P.c >= TC) {\n    P.c -= TC;\n    P.count++;\n    load(P, (P.base + P.count + NOBJ * 8) % NOBJ);\n  }\n  if (P.c \u003c TP) {\n    const u = P.c / TP;\n    P.s = u * (1.3 - 0.3 * u);\n  } else if (P.c \u003c TP + TH) P.s = 1;\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function draw(display, params) {\n  const P = params.pin;\n  if (!P || !P.started) return;\n  const { r, gx, gy, ht, jit } = P;\n  const lift = 1 - P.s;\n  // The tilt: a front runs down the panel, the pins behind it slide back and\n  // rattle a little as they go.\n  const wt = P.c - TP - TH;\n  const wiping = wt >= 0;\n  const yf = -16 + (wt / TW) * 170;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (!wiping) {\n        const h = r[i] - lift;\n        ht[i] = h > 0 ? h : 0;\n        continue;\n      }\n      const dd = yf - y - 5 * sin(x * 0.19 + 1.3) - 3 * sin(x * 0.47);\n      let h = r[i] - (1 - P.sw);\n      h = h > 0 ? h * (1 - sstep(0, 12, dd)) : 0;\n      if (dd > 0) h += 0.16 * max(0, sin(dd * 0.6)) * exp(-dd / 22);\n      ht[i] = h;\n    }\n\n  // The lamp, low and to one side.\n  const ang = PI * (0.87 - 2 * P.lamp);\n  const lx = cos(ang);\n  const ly = -sin(ang);\n  const tint = hsv((0.6 + P.hue) % 1, 0.85, 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const h = ht[i];\n      // Shadow: does a taller pin stand between this one and the lamp?\n      let ex = 0;\n      for (let j = 1; j \u003c= 7; j++) {\n        const sx = round(x + j * 1.5 * lx);\n        const sy = round(y + j * 1.5 * ly);\n        if (sx \u003c 0 || sx >= W || sy \u003c 0 || sy >= H) break;\n        const e = ht[sy * W + sx] - h - j * 0.12;\n        if (e > ex) ex = e;\n      }\n      const shadow = 1 - 0.34 * sstep(0, 0.12, ex);\n      const q = clamp(0.5 + ((x - 31.5) * lx + (y - 63.5) * ly) / 140, 0, 1);\n      let v;\n      let wh;\n      if (((x + y) & 1) === 0) {\n        const flat = 106 * (0.72 + 0.56 * q) * jit[i];\n        const up = sstep(0, 0.1, h);\n        const shade = clamp(1.02 - 4.5 * (gx[i] * lx + gy[i] * ly), 0.5, 1.3);\n        const raised = min(255, 255 * (0.66 + 0.4 * min(1, h)) * shade);\n        v = (flat + (raised - flat) * up) * shadow;\n        wh = 0.3 + 0.4 * clamp((v - 90) / 165, 0, 1);\n      } else {\n        // A gap: dark, unless the pins round it stand out and show their shafts.\n        const n = (ht[i - (x > 0 ? 1 : 0)] + ht[i + (x \u003c W - 1 ? 1 : 0)] + ht[i - (y > 0 ? W : 0)] + ht[i + (y \u003c H - 1 ? W : 0)]) / 4;\n        const shade = clamp(0.92 - 3 * (gx[i] * lx + gy[i] * ly), 0.35, 1.15);\n        v = 175 * sstep(0.02, 0.3, n) * shade * shadow;\n        wh = 0.15;\n      }\n      display.setPixel(x, y, v * (tint[0] + (1 - tint[0]) * wh), v * (tint[1] + (1 - tint[1]) * wh), v * (tint[2] + (1 - tint[2]) * wh));\n    }\n}\n","layer":{"id":"layer-pin-art","type":"code","name":"pin-art","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pin Art\n// Family:  toy\n// Idea:    A pin-art desk toy seen from the front fills the panel with four thousand steel pins in a staggered grid, and a spread hand, a key, a seashell, a toy car and a face press in from behind one after another, each relief rising out of the dim pins into a raking lamp until the toy is tilted and the pins slide flat again in a ripple.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after Ward Fleming's pinscreen desk toy (1985)\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Metal=0..1, Speed=0.2..3, Object=0..4, Light=0..1\n//\n// Knob 1: Metal. The finish of the pins and the colour the lamp gives them: blue steel at 0, turning through violet and pink to brass in the middle, then through green back to blue steel at 1.\n// Knob 2: Speed. How fast things press in, hold and are tilted flat again: at 2 an object takes 3 s to press in and a round is 8 s; at 0.2 it all runs ten times slower.\n// Knob 3: Object. What presses in next: a spread hand, a key, a seashell, a toy car or a face, the rest following in that order. Turning it tilts the toy flat and brings the new one.\n// Knob 4: Light. Where the desk lamp stands, going once round the toy from its left side, upper left at the start. The relief shines on the lamp's side and throws its shadow away from it, and the flat pins are brighter nearer the lamp.\n// Buttons: K1 tap tilts the toy flat now and presses the next object in.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst NOBJ = 5;\n// The round at Speed 2, in seconds: press in, hold, tilt flat, rest.\nconst TP = 3.0;\nconst TH = 3.3;\nconst TW = 1.25;\nconst TR = 0.5;\nconst TC = TP + TH + TW + TR;\nconst { min, max, sqrt, sin, cos, exp, abs, round, hypot, atan2, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// A fixed hash, so the pins are the same uneven pins on every run.\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// Distances to shapes, negative inside. seg() leaves how far along the\n// segment the nearest point lies in T.\nlet T = 0;\nfunction seg(px, py, ax, ay, bx, by) {\n  const dx = bx - ax;\n  const dy = by - ay;\n  T = clamp(((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy), 0, 1);\n  return hypot(px - ax - dx * T, py - ay - dy * T);\n}\nfunction box(px, py, cx, cy, hx, hy, r) {\n  const qx = abs(px - cx) - hx + r;\n  const qy = abs(py - cy) - hy + r;\n  return hypot(max(qx, 0), max(qy, 0)) + min(max(qx, qy), 0) - r;\n}\nfunction ell(px, py, cx, cy, rx, ry) {\n  return (hypot((px - cx) / rx, (py - cy) / ry) - 1) * min(rx, ry);\n}\nfunction smin(a, b, k) {\n  const h = clamp(0.5 + (0.5 * (b - a)) / k, 0, 1);\n  return b + (a - b) * h - k * h * (1 - h);\n}\n// A soft round bump, near enough a Gaussian, that ends 2 radii out.\nconst bump = (px, py, cx, cy, rx, ry) => {\n  const q = ((px - cx) / rx) ** 2 + ((py - cy) / ry) ** 2;\n  return q \u003c 4 ? (1 - q / 4) ** 3 : 0;\n};\n// A rounded edge: 0 at the outline, 1 once r LEDs inside it.\nconst prof = (d, r) => {\n  const t = clamp(-d / r, 0, 1);\n  return sqrt(t * (2 - t));\n};\n// Pins next to the outline are dragged a little way out with it.\nconst halo = (d) => (d \u003c 5 ? 0.17 * exp(-d / 1.6) : 0);\n\n// Each object is a height above the pins' rest plane, 0..1, at an LED.\n// The fingers: base and tip of each, and the radius.\nconst FING = [\n  [15, 84, 3, 56, 6],\n  [20, 61, 10, 22, 5.8],\n  [30, 58, 29, 9, 6],\n  [39, 59, 47, 15, 5.8],\n  [47, 65, 59, 35, 5.2],\n];\nfunction hand(x, y) {\n  let d = box(x, y, 32, 77, 19, 17, 9);\n  let crease = 0;\n  for (let f = 0; f \u003c 5; f++) {\n    const [ax, ay, bx, by, r] = FING[f];\n    const e = seg(x, y, ax, ay, bx, by) - r;\n    if (e \u003c 0) {\n      const len = hypot(bx - ax, by - ay);\n      const j = f ? [0.4, 0.68] : [0.55, 0.55];\n      crease = max(crease, exp(-(((T - j[0]) * len) ** 2) / 0.8), exp(-(((T - j[1]) * len) ** 2) / 0.8));\n    }\n    d = smin(d, e, 2.5);\n  }\n  d = smin(d, seg(x, y, 32, 92, 32, 150) - 15.5, 8);\n  if (d > 0) return halo(d);\n  let r = 0.5 + 0.38 * prof(d, 8);\n  // The pads below the fingers, the ball of the thumb, and the lines of the palm.\n  r += 0.08 * bump(x, y, 22, 92, 8, 10) + 0.05 * bump(x, y, 34, 66, 14, 4) + 0.05 * bump(x, y, 43, 86, 6, 9);\n  r -= 0.1 * crease;\n  const heart = abs(y - (68 + 0.012 * (x - 30) ** 2 - 0.1 * (x - 30)));\n  const life = abs(hypot(x - 14, y - 92) - 15);\n  if (x > 18 && x \u003c 48 && y \u003c 80) r -= 0.1 * exp(-heart * heart);\n  if (y > 70 && y \u003c 104 && x > 18) r -= 0.1 * exp(-life * life);\n  return clamp(r, 0, 1);\n}\n\nfunction face(x, y) {\n  let d = ell(x, y, 32, 54, 24 - max(0, y - 60) * 0.24, 35);\n  d = smin(d, min(ell(x, y, 7, 56, 3.5, 8), ell(x, y, 57, 56, 3.5, 8)), 1.5);\n  const head = d;\n  d = smin(d, seg(x, y, 32, 88, 32, 140) - 10.5, 4);\n  d = smin(d, ell(x, y, 32, 142, 54, 28), 10);\n  if (d > 0) return halo(d);\n  let r = 0.42 + 0.24 * prof(d, 12);\n  // The neck and shoulders sit back under the jaw.\n  r -= 0.2 * sstep(-2, 2, head);\n  // Hair, combed back in strands from the hairline.\n  const hl = 33 + 0.012 * (x - 32) ** 2;\n  if (y \u003c hl) r += 0.04 * sstep(hl, hl - 3, y) + 0.06 * sin(x * 1.25 + (y - 20) * (x - 32) * 0.012);\n  // Brows, eye sockets and eyes, the nose, cheeks, lips and chin.\n  r += 0.06 * bump(x, y, 32, 36, 16, 9);\n  r += 0.12 * (bump(x, y, 22, 44, 7, 1.8) + bump(x, y, 42, 44, 7, 1.8));\n  r -= 0.3 * (bump(x, y, 22, 51, 6, 3.4) + bump(x, y, 42, 51, 6, 3.4));\n  r += 0.16 * (bump(x, y, 22, 51.5, 3, 1.8) + bump(x, y, 42, 51.5, 3, 1.8));\n  r += 0.3 * bump(x, y, 32, 59, 2.4, 9) + 0.18 * bump(x, y, 32, 67.5, 4.5, 2.6);\n  r -= 0.14 * (bump(x, y, 29, 70, 1.4, 1.1) + bump(x, y, 35, 70, 1.4, 1.1));\n  r += 0.12 * (bump(x, y, 19, 64, 6, 6) + bump(x, y, 45, 64, 6, 6));\n  r += 0.14 * bump(x, y, 32, 76.5, 6.5, 1.5) + 0.16 * bump(x, y, 32, 80.5, 5.5, 1.9) - 0.2 * bump(x, y, 32, 78.5, 7.5, 0.7);\n  r += 0.12 * bump(x, y, 32, 87, 6, 3);\n  return clamp(r, 0, 1);\n}\n\nfunction key(x, y) {\n  const rr = hypot(x - 32, y - 25);\n  let d = max(rr - 21, 9 - rr);\n  d = min(d, box(x, y, 32, 47, 9, 3, 1), box(x, y, 32, 55, 7, 2.5, 1), box(x, y, 32, 83, 4.5, 38, 2));\n  let bit = box(x, y, 44, 107, 8, 11, 1);\n  bit = max(bit, -box(x, y, 51, 101, 2.5, 2, 0), -box(x, y, 51, 111, 2.5, 2.5, 0), -box(x, y, 44, 106, 1.2, 5, 0));\n  d = min(d, bit);\n  if (d > 0) return halo(d);\n  let r = 0.72 + 0.2 * prof(d, 3);\n  // A raised rim round the bow's hole and a groove down the shank.\n  r += 0.08 * exp(-((rr - 12) ** 2) / 2);\n  if (y > 60 && y \u003c 118) r -= 0.12 * exp(-((x - 32) ** 2) / 1.2);\n  return clamp(r, 0, 1);\n}\n\n// A scallop, hinge down: ribs fan out from the hinge to a wavy edge.\nfunction shell(x, y) {\n  const dx = x - 32;\n  const dy = 92 - y;\n  const rho = hypot(dx, dy);\n  const th = atan2(dx, dy);\n  const rib = cos(th * 48);\n  let d = max(rho - 54 * (1 - 0.3 * th * th) - 1.2 * rib, (abs(th) - 0.85) * rho);\n  d = smin(d, box(x, y, 32, 94, 15, 5, 2), 3);\n  if (d > 0) return halo(d);\n  let r = 0.5 + 0.32 * prof(d, 14);\n  r += 0.13 * rib * sstep(5, 22, rho) * (dy > 0) + 0.025 * sin(rho * 1.4);\n  r -= 0.12 * exp(-((y - 89) ** 2) / 1.5) * (abs(dx) \u003c 14);\n  return clamp(r, 0, 1);\n}\n\n// A toy car seen from above, its nose at the top.\nfunction car(x, y) {\n  let body = box(x, y, 32, 65, 14 + min(3, max(0, y - 14) * 0.12), 52, 11);\n  body = smin(body, min(ell(x, y, 18, 36, 5, 12), ell(x, y, 46, 36, 5, 12), ell(x, y, 17, 96, 5, 12), ell(x, y, 47, 96, 5, 12)), 3);\n  const tyre = min(box(x, y, 11, 36, 3, 8, 1.5), box(x, y, 53, 36, 3, 8, 1.5), box(x, y, 10, 96, 3, 8, 1.5), box(x, y, 54, 96, 3, 8, 1.5));\n  const d = min(body, tyre);\n  if (d > 0) return halo(d);\n  if (body > 0) return 0.36 + 0.1 * prof(tyre, 2.5);\n  let r = 0.5 + 0.16 * prof(body, 4);\n  // The cabin: windscreen and rear window sunk between bonnet, roof and boot.\n  const xw = abs(x - 32);\n  const scr = xw \u003c 12 - (58 - y) * 0.25 && y > 45 && y \u003c 58;\n  const rear = xw \u003c 11 && y > 91 && y \u003c 99;\n  const roof = box(x, y, 32, 74.5, 11, 16, 3);\n  r += 0.14 * sstep(1, -1, roof) - 0.2 * (scr || rear);\n  // Bonnet creases, headlights, wing mirrors, the spoiler at the back.\n  r -= 0.14 * (exp(-((x - 23) ** 2) / 0.6) + exp(-((x - 41) ** 2) / 0.6)) * (y > 17 && y \u003c 42);\n  r += 0.16 * (bump(x, y, 22, 16, 3.5, 2.2) + bump(x, y, 42, 16, 3.5, 2.2)) + 0.18 * (bump(x, y, 15, 56, 3, 2) + bump(x, y, 49, 56, 3, 2));\n  r += 0.18 * sstep(1, -1, box(x, y, 32, 112, 16, 2, 1)) - 0.12 * sstep(1, -1, box(x, y, 32, 108, 14, 1, 0.5));\n  return clamp(r, 0, 1);\n}\n\nconst OBJECTS = [hand, key, shell, car, face];\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  params.pin = { r: F(N), gx: F(N), gy: F(N), ht: F(N), jit: F(N), started: false };\n  const P = params.pin;\n  for (let i = 0; i \u003c N; i++) P.jit[i] = 0.88 + 0.24 * hash(i);\n}\n\n// The object's heights, and their slopes for the lamp.\nfunction load(P, o) {\n  const { r, gx, gy } = P;\n  const fn = OBJECTS[o];\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) r[y * W + x] = fn(x + 0.5, y + 0.5);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      gx[i] = (r[y * W + min(W - 1, x + 1)] - r[y * W + max(0, x - 1)]) / 2;\n      gy[i] = (r[min(H - 1, y + 1) * W + x] - r[max(0, y - 1) * W + x]) / 2;\n    }\n}\n\nfunction tilt(P) {\n  if (P.c \u003c TP + TH) {\n    P.sw = P.s;\n    P.c = TP + TH;\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.pin) setup(params);\n  const P = params.pin;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, NOBJ - 1);\n  P.lamp = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    P.base = base;\n    P.count = -1;\n    // Open on the last object of the round, just as the toy is tilted.\n    load(P, (base + NOBJ - 1) % NOBJ);\n    P.c = TP + TH - 0.05;\n    P.s = 1;\n    P.sw = 1;\n  }\n  if (base !== P.base) {\n    P.base = base;\n    P.count = -1;\n    tilt(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) tilt(P);\n  P.c += dt * P.rate;\n  if (P.c >= TC) {\n    P.c -= TC;\n    P.count++;\n    load(P, (P.base + P.count + NOBJ * 8) % NOBJ);\n  }\n  if (P.c \u003c TP) {\n    const u = P.c / TP;\n    P.s = u * (1.3 - 0.3 * u);\n  } else if (P.c \u003c TP + TH) P.s = 1;\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function draw(display, params) {\n  const P = params.pin;\n  if (!P || !P.started) return;\n  const { r, gx, gy, ht, jit } = P;\n  const lift = 1 - P.s;\n  // The tilt: a front runs down the panel, the pins behind it slide back and\n  // rattle a little as they go.\n  const wt = P.c - TP - TH;\n  const wiping = wt >= 0;\n  const yf = -16 + (wt / TW) * 170;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (!wiping) {\n        const h = r[i] - lift;\n        ht[i] = h > 0 ? h : 0;\n        continue;\n      }\n      const dd = yf - y - 5 * sin(x * 0.19 + 1.3) - 3 * sin(x * 0.47);\n      let h = r[i] - (1 - P.sw);\n      h = h > 0 ? h * (1 - sstep(0, 12, dd)) : 0;\n      if (dd > 0) h += 0.16 * max(0, sin(dd * 0.6)) * exp(-dd / 22);\n      ht[i] = h;\n    }\n\n  // The lamp, low and to one side.\n  const ang = PI * (0.87 - 2 * P.lamp);\n  const lx = cos(ang);\n  const ly = -sin(ang);\n  const tint = hsv((0.6 + P.hue) % 1, 0.85, 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const h = ht[i];\n      // Shadow: does a taller pin stand between this one and the lamp?\n      let ex = 0;\n      for (let j = 1; j \u003c= 7; j++) {\n        const sx = round(x + j * 1.5 * lx);\n        const sy = round(y + j * 1.5 * ly);\n        if (sx \u003c 0 || sx >= W || sy \u003c 0 || sy >= H) break;\n        const e = ht[sy * W + sx] - h - j * 0.12;\n        if (e > ex) ex = e;\n      }\n      const shadow = 1 - 0.34 * sstep(0, 0.12, ex);\n      const q = clamp(0.5 + ((x - 31.5) * lx + (y - 63.5) * ly) / 140, 0, 1);\n      let v;\n      let wh;\n      if (((x + y) & 1) === 0) {\n        const flat = 106 * (0.72 + 0.56 * q) * jit[i];\n        const up = sstep(0, 0.1, h);\n        const shade = clamp(1.02 - 4.5 * (gx[i] * lx + gy[i] * ly), 0.5, 1.3);\n        const raised = min(255, 255 * (0.66 + 0.4 * min(1, h)) * shade);\n        v = (flat + (raised - flat) * up) * shadow;\n        wh = 0.3 + 0.4 * clamp((v - 90) / 165, 0, 1);\n      } else {\n        // A gap: dark, unless the pins round it stand out and show their shafts.\n        const n = (ht[i - (x > 0 ? 1 : 0)] + ht[i + (x \u003c W - 1 ? 1 : 0)] + ht[i - (y > 0 ? W : 0)] + ht[i + (y \u003c H - 1 ? W : 0)]) / 4;\n        const shade = clamp(0.92 - 3 * (gx[i] * lx + gy[i] * ly), 0.35, 1.15);\n        v = 175 * sstep(0.02, 0.3, n) * shade * shadow;\n        wh = 0.15;\n      }\n      display.setPixel(x, y, v * (tint[0] + (1 - tint[0]) * wh), v * (tint[1] + (1 - tint[1]) * wh), v * (tint[2] + (1 - tint[2]) * wh));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Metal=0..1, Speed=0.2..3, Object=0..4, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Metal","min":0,"max":1,"about":"The finish of the pins and the colour the lamp gives them: blue steel at 0, turning through violet and pink to brass in the middle, then through green back to blue steel at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast things press in, hold and are tilted flat again: at 2 an object takes 3 s to press in and a round is 8 s; at 0.2 it all runs ten times slower."},{"name":"Object","min":0,"max":4,"about":"What presses in next: a spread hand, a key, a seashell, a toy car or a face, the rest following in that order. Turning it tilts the toy flat and brings the new one."},{"name":"Light","min":0,"max":1,"about":"Where the desk lamp stands, going once round the toy from its left side, upper left at the start. The relief shines on the lamp's side and throws its shadow away from it, and the flat pins are brighter nearer the lamp."}],"start":[0,2,0,0.06],"measures":{"motion":0.0617,"detail":0.3463,"edges":0.9544,"complexity":1.3204,"coverage":0.7864,"colour":0.2041,"drift":0.3573},"knobResponse":[0.1597,0.2367,0.0944,0.0463]},{"slug":"pint","title":"Pint","family":"cells","round":18,"note":"탭이 패널 높이만 한 파인트 잔에 맥주를 따르면, 뿌연 맥주가 바닥부터 맑아지고 기포 줄이 오르는 동안 거품 머리가 밝은 테두리의 다각형 셀로 굵어져요. 누군가 다섯 모금에 나눠 마시며 잔에 레이싱 고리를 남기고, 바닥이 보이면 다시 따라요. K1 은 라거에서 앰버 에일, 레드 에일을 지나 스타우트까지 맥주를 바꾸고, 스타우트는 크림빛 서지가 바닥부터 검게 가라앉아요.","idea":"A tap pours a pint as tall as the panel against a dark bar, the cloudy beer clears from the bottom up under rising chains of bubbles while the foam head coarsens into bright polygonal cells, and someone drinks it down in sips that leave lacing rings on the glass before it is poured again.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Pint\n// Family:  cells\n// Idea:    A tap pours a pint as tall as the panel against a dark bar, the cloudy beer clears from the bottom up under rising chains of bubbles while the foam head coarsens into bright polygonal cells, and someone drinks it down in sips that leave lacing rings on the glass before it is poured again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the pour, the settling surge and the lacing of a pint at the bar\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Beer=0..1, Speed=0.2..3, Fizz=4..20, Head=0..1\n//\n// Knob 1: Beer. What is on tap: a pale lager at 0, an amber ale at 0.35, a red ale at 0.65 and a stout at 1, whose cream-brown surge settles black from the bottom up.\n// Knob 2: Speed. How fast the bar runs: at 2 a pint pours in 6 s, starts to go 5 s later in five sips 5 s apart and is poured again; at 0.2 it all runs ten times slower.\n// Knob 3: Fizz. How many nucleation sites stream bubbles, from 4 to 20, and how thick the haze of fine bubbles is, so how long a lager takes to clear: about 6 s at 4 and 17 s at 20.\n// Knob 4: Head. How tall the foam head stands, from 12 rows to 32, and how fast its small bubbles coarsen into large cells.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\n// The glass: rim row, inside floor row, and the bar top it stands on.\nconst RIM = 14;\nconst FLOOR = 118;\nconst BAR = 124;\n// Bar states.\nconst POUR = 0;\nconst REST = 1;\n// Clear and cloudy body, and head, for lager, amber ale, red ale and stout.\nconst BEERS = [\n  [0, [238, 178, 28], [204, 186, 138], [238, 236, 226]],\n  [0.35, [216, 106, 18], [196, 146, 104], [240, 230, 206]],\n  [0.65, [168, 38, 18], [176, 112, 90], [238, 222, 198]],\n  [1, [20, 10, 6], [152, 114, 82], [224, 198, 152]],\n];\nconst MAXB = 700;\nconst FOAM = 640;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// Inside half-width of the shaker glass at a row: 26 LEDs at the rim, 20 at the floor.\nfunction half(y) {\n  return 26 - (6 * (clamp(y, RIM, FLOOR) - RIM)) / (FLOOR - RIM);\n}\n\nfunction beerAt(b) {\n  let i = 0;\n  while (i \u003c BEERS.length - 2 && BEERS[i + 1][0] \u003c b) i++;\n  const A = BEERS[i];\n  const B = BEERS[i + 1];\n  const f = clamp((b - A[0]) / (B[0] - A[0]), 0, 1);\n  const mix = (k) => A[k].map((v, j) => v + (B[k][j] - v) * f);\n  return { clear: mix(1), cloudy: mix(2), head: mix(3) };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.buf = new Float32Array(N * 3);\n  P.bx = new Float32Array(MAXB);\n  P.by = new Float32Array(MAXB);\n  P.bv = new Float32Array(MAXB);\n  P.nb = 0;\n  P.fx = new Float32Array(FOAM);\n  P.fv = new Float32Array(FOAM);\n  P.fu = new Float32Array(FOAM);\n  P.nf = 0;\n  P.wet = new Float32Array(H);\n  // The bar lights' reflection down the left of the glass and a fainter one\n  // on the right, and where along a row the climbing glint sits.\n  P.hl = new Float32Array(N);\n  P.bump = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) P.bump[x] = 0.8 * Math.sin(x * 0.9 + 1.3);\n  P.glx = new Float32Array(N);\n  for (let y = RIM; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const hw = half(y);\n      const dx = x + 0.5 - CX;\n      P.hl[y * W + x] = 255 * (Math.exp(-(((dx + hw - 3.5) / 1.3) ** 2)) * 0.32 + Math.exp(-(((dx - hw + 2.5) / 0.9) ** 2)) * 0.12) * (0.75 + 0.25 * Math.sin(y * 0.11));\n      P.glx[y * W + x] = 204 * Math.exp(-(((dx + hw - 3.5) / 1.6) ** 2));\n    }\n  // A smooth noise field for the haze and the surge, tiled every 128 rows.\n  P.noise = new Float32Array(N);\n  const g = [];\n  for (let i = 0; i \u003c 17 * 33; i++) g.push(Math.random());\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const gx = x / 4;\n      const gy = y / 4;\n      const i = Math.floor(gx);\n      const j = Math.floor(gy);\n      const u = gx - i;\n      const v = gy - j;\n      const s = (a, b) => g[(b % 32) * 17 + (a % 16)];\n      const su = u * u * (3 - 2 * u);\n      const sv = v * v * (3 - 2 * v);\n      P.noise[y * W + x] = (s(i, j) * (1 - su) + s(i + 1, j) * su) * (1 - sv) + (s(i, j + 1) * (1 - su) + s(i + 1, j + 1) * su) * sv;\n    }\n  Object.assign(P, {\n    T: 0,\n    t: 0,\n    mode: POUR,\n    modeT: 0,\n    level: FLOOR,\n    headH: 0,\n    foamAge: 0,\n    front: FLOOR + 4,\n    sips: 0,\n    sipFrom: 0,\n    sipTo: 0,\n    sipT: -1,\n    laces: [],\n    siteT: new Float32Array(20),\n    streamTop: 11,\n    beer: 0,\n    fizz: 4,\n    head: 0.06,\n    started: false,\n  });\n  freshFoam(P);\n}\n\n// The head made by a pour: small bubbles packed tight, each with a rank that\n// says how soon it pops or is swallowed by its neighbours as the foam coarsens.\nfunction freshFoam(P) {\n  P.nf = 0;\n  P.foamAge = 0;\n  // One bubble in each 1.9 LED square, jittered.\n  for (let j = 0; j \u003c 19; j++)\n    for (let i = 0; i \u003c 29 && P.nf \u003c FOAM; i++) {\n      P.fx[P.nf] = 4.5 + (i + 0.15 + 0.7 * Math.random()) * 1.9;\n      P.fv[P.nf] = (j + 0.15 + 0.7 * Math.random()) * 1.9;\n      P.fu[P.nf] = Math.random();\n      P.nf++;\n    }\n  P.bStart = new Int32Array(16 * 10 + 1);\n  P.bItem = new Int32Array(FOAM);\n  P.bOf = new Int32Array(FOAM);\n}\n\n// The head's full height for the Head knob, and the liquid level of a full pint.\nconst headFull = (P) => 12 + 20 * P.head;\nconst fullLevel = (P) => RIM + 1 + headFull(P);\n\nfunction startPour(P) {\n  P.mode = POUR;\n  P.modeT = 0;\n  P.front = FLOOR + 4;\n  P.sips = 0;\n  freshFoam(P);\n  P.headH = Math.min(P.headH, 3);\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.modeT += h;\n  P.foamAge += h;\n  const stout = clamp((P.beer - 0.6) / 0.4, 0, 1);\n  const full = fullLevel(P);\n  if (P.mode === POUR) {\n    // About 15 rows a second; the falling stream whips up the head.\n    P.level = Math.max(full, P.level - h * 15);\n    P.headH = Math.min(headFull(P) * (P.level > full + 0.5 ? 0.9 : 1), P.headH + h * 5);\n    P.foamAge = 0;\n    P.streamTop = 11;\n    if (P.level \u003c= full) {\n      P.mode = REST;\n      P.modeT = 0;\n      P.nextSip = 4.6;\n    }\n  } else {\n    // The stream's tail falls once the tap closes.\n    P.streamTop += h * (20 + 140 * P.modeT);\n    // Clearing climbs from the floor: quick for lager, a slow surge for stout.\n    P.front -= (h * (11 - 6 * stout) * 1.4) / (0.6 + P.fizz / 10);\n    // The head drains and pops down to about 60% of its height.\n    const target = headFull(P) * (0.6 + 0.4 * Math.exp(-P.foamAge / 14));\n    P.headH += (target - P.headH) * Math.min(1, h * 0.8);\n    if (P.sipT \u003c 0 && P.modeT >= P.nextSip) {\n      if (P.sips >= 5) startPour(P);\n      else {\n        P.sipT = 0;\n        P.sipFrom = P.level;\n        P.sipTo = Math.min(FLOOR - 16, P.level + (FLOOR - full) / 6);\n        P.laces.push({ y: P.level - P.headH, k: Math.random() * 97 });\n        if (P.laces.length > 6) P.laces.shift();\n      }\n    }\n    if (P.sipT >= 0) {\n      P.sipT += h;\n      const f = Math.min(1, P.sipT / 1.2);\n      const old = P.level;\n      P.level = P.sipFrom + (P.sipTo - P.sipFrom) * f * f * (3 - 2 * f);\n      for (let y = Math.max(0, Math.floor(old)); y \u003c P.level && y \u003c H; y++) P.wet[y] = 1;\n      if (f >= 1) {\n        P.sipT = -1;\n        P.sips++;\n        P.nextSip = P.modeT + (P.sips >= 5 ? 3 : 5);\n      }\n    }\n  }\n  if (P.mode === POUR) P.laces.length = Math.min(P.laces.length, P.laces.filter((l) => l.y \u003c P.level - P.headH - 1).length);\n  for (let y = 0; y \u003c H; y++) P.wet[y] *= Math.exp(-h / 5);\n  bubbles(P, h);\n}\n\n// Carbonation: chains of bubbles from nucleation sites on the floor and walls,\n// speeding up and swelling as they rise.\nfunction bubbles(P, h) {\n  const n = Math.round(P.fizz);\n  const every = 0.3 / (0.6 + (0.4 * n) / 4);\n  for (let i = 0; i \u003c n; i++) {\n    P.siteT[i] -= h;\n    if (P.siteT[i] > 0) continue;\n    P.siteT[i] += every * (0.8 + 0.4 * Math.random()) * (1 + 0.5 * ((i * 0.71) % 1));\n    if (P.nb >= MAXB) continue;\n    let x;\n    let y;\n    if (i % 4 === 3) {\n      y = 44 + ((i * 0.37) % 1) * 66;\n      x = CX + (i % 8 === 3 ? -1 : 1) * (half(y) - 1.2);\n    } else {\n      y = FLOOR - 0.5;\n      x = CX + (((i * 0.618 + 0.13) % 1) - 0.5) * 2 * (half(FLOOR) - 3);\n    }\n    if (y \u003c= P.level + 1) continue;\n    P.bx[P.nb] = x;\n    P.by[P.nb] = y;\n    P.bv[P.nb] = 5;\n    P.nb++;\n  }\n  const { bx, by, bv } = P;\n  const top = P.level + 0.5;\n  for (let i = 0; i \u003c P.nb; i++) {\n    const v = Math.min(32, bv[i] + h * 16);\n    bv[i] = v;\n    by[i] -= v * h;\n    if (by[i] > top) continue;\n    // At the surface: the last bubble takes this one's place.\n    P.nb--;\n    bx[i] = bx[P.nb];\n    by[i] = by[P.nb];\n    bv[i] = bv[P.nb];\n    i--;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.beer = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0, 3) / 2;\n  P.fizz = clamp(k[2], 4, 20);\n  P.head = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The pint has been pouring for a few seconds when the panel opens.\n    for (let i = 0; i \u003c 50; i++) step(P, 1 / 30);\n    for (let i = 0; i \u003c 90; i++) step(P, rate / 30);\n  }\n  P.t += dt;\n  step(P, dt * rate);\n}\n\nfunction add(buf, p, r, g, b) {\n  buf[p * 3] += r;\n  buf[p * 3 + 1] += g;\n  buf[p * 3 + 2] += b;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const { clear, cloudy, head } = beerAt(P.beer);\n  const stout = clamp((P.beer - 0.6) / 0.4, 0, 1);\n  const level = P.level;\n  const hH = P.headH;\n  const noise = P.noise;\n  const t = P.T;\n  // Foam coarsening: the mean cell grows from 2 LEDs, so fewer bubbles live.\n  const cell = 2 * Math.pow(1 + P.foamAge * (0.5 + 1.5 * P.head), 0.5);\n  const alive = clamp(4 / (cell * cell), 0.02, 1);\n  const glint = 128 - ((P.t * 16) % 190);\n  // The bubbles still alive in the head, in buckets of 4 by 4 LEDs. The dry\n  // foam at the top coarsens first; the wet foam at the bottom stays fine.\n  const { bStart, bItem, bOf } = P;\n  bStart.fill(0);\n  const topH = 1.1 / Math.max(6, hH);\n  for (let q = 0; q \u003c P.nf; q++) {\n    const k = P.fu[q] * (0.45 + topH * P.fv[q]) \u003c= alive ? Math.min(9, Math.floor(P.fv[q] / 4)) * 16 + Math.min(15, Math.floor(P.fx[q] / 4)) : -1;\n    bOf[q] = k;\n    if (k >= 0) bStart[k + 1]++;\n  }\n  for (let k = 0; k \u003c 160; k++) bStart[k + 1] += bStart[k];\n  const fill = bStart.slice(0, 160);\n  for (let q = 0; q \u003c P.nf; q++) if (bOf[q] >= 0) bItem[fill[bOf[q]]++] = q;\n  // How many buckets out to look for the two nearest.\n  const R = cell \u003c 4.5 ? 1 : cell \u003c 8 ? 2 : 3;\n  const fx = P.fx;\n  const fv = P.fv;\n  const { hl, glx, bump, laces, wet: wetRows } = P;\n  // A cheap generator for the sparkle of fine bubbles, reseeded each frame.\n  let seed = (Math.random() * 4294967296) >>> 0;\n  const sparkle = 0.0012 * P.fizz;\n  const haze = 0.7 + (0.3 * (P.fizz - 4)) / 16;\n  for (let y = 0; y \u003c H; y++) {\n    const hw = half(y);\n    const inGlass = y >= RIM && y \u003c FLOOR;\n    const gy = Math.exp(-(((y - glint) / 4) ** 2));\n    // Row by row: how cloudy the beer is, where the surge texture sits\n    // going down the walls and up the middle, and how deep the row is.\n    const cl = clamp((P.front - y) / 6 + 0.5, 0, 1);\n    const sv = t * (6 + 6 * stout);\n    const rowDown = ((((y - sv) % H) + H) % H | 0) * W;\n    const rowUp = ((((y + sv) % H) + H) % H | 0) * W;\n    const deep = 1 - (0.12 * (y - level)) / (FLOOR - RIM);\n    const amp = (0.12 + 0.3 * stout) * cl;\n    // More fizz, a thicker haze of fine bubbles.\n    const hz = cl * haze;\n    const cr = clear[0] + (cloudy[0] - clear[0]) * hz;\n    const cg = clear[1] + (cloudy[1] - clear[1]) * hz;\n    const cb = clear[2] + (cloudy[2] - clear[2]) * hz;\n    const fine = sparkle * (1 - 0.6 * stout) * 4294967296;\n    const wet = 0.12 * wetRows[y];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const dx = x + 0.5 - CX;\n      let r = 9 + (3 * (H - y)) / H;\n      let g = 7 + (2 * (H - y)) / H;\n      let b = 6;\n      if (y >= BAR) {\n        // The bar top: dark wood with a sheen and the beer's reflection.\n        const wood = 0.8 + 0.2 * Math.sin(x * 0.3 + y * 2.1 + Math.sin(x * 0.07) * 3);\n        r = 52 * wood;\n        g = 31 * wood;\n        b = 18 * wood;\n        if (y === BAR) {\n          r += 40;\n          g += 28;\n          b += 18;\n        }\n        if (Math.abs(dx) \u003c half(FLOOR) && level \u003c FLOOR - 1) {\n          const f = 0.22 * (1 - (y - BAR) / 5);\n          r += clear[0] * f;\n          g += clear[1] * f;\n          b += clear[2] * f;\n        }\n      } else if (y >= FLOOR && Math.abs(dx) \u003c= half(FLOOR) + 1) {\n        // The thick glass foot, lit through by the beer above it.\n        const lit = level \u003c FLOOR - 1 ? 0.5 : 0.12;\n        r = 26 + clear[0] * lit;\n        g = 28 + clear[1] * lit;\n        b = 32 + clear[2] * lit;\n        if (y === BAR - 1 || Math.abs(dx) > half(FLOOR)) {\n          r += 50;\n          g += 52;\n          b += 56;\n        }\n      } else if (inGlass && Math.abs(dx) \u003c= hw) {\n        const e = Math.abs(dx) / hw;\n        const topV = hH + bump[x] * Math.min(1, hH / 4);\n        if (y >= level) {\n          // The beer: cloudy above the clearing front, clear below it, and\n          // a surge in the haze: down along the walls, up the middle.\n          const n = noise[(e > 0.62 ? rowDown : rowUp) + x] - 0.5;\n          const m = (0.84 + 0.16 * (1 - e * e)) * deep * (1 + n * amp);\n          r = cr * m;\n          g = cg * m;\n          b = cb * m;\n          seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0;\n          if (seed \u003c fine) {\n            r += 70;\n            g += 70;\n            b += 60;\n          }\n        } else if (level - y \u003c= topV) {\n          // The head: Voronoi cells round the living bubbles, with bright\n          // Plateau borders between them.\n          const v = level - y;\n          const bi = Math.min(9, Math.floor(v / 4));\n          const bj = x >> 2;\n          let d1 = 1e9;\n          let d2 = 1e9;\n          let a = -1;\n          let c = -1;\n          for (let jj = Math.max(0, bi - R); jj \u003c= Math.min(9, bi + R); jj++)\n            for (let ii = Math.max(0, bj - R); ii \u003c= Math.min(15, bj + R); ii++)\n              for (let qi = bStart[jj * 16 + ii], qe = bStart[jj * 16 + ii + 1]; qi \u003c qe; qi++) {\n                const q = bItem[qi];\n                const ex = fx[q] - x - 0.5;\n                const ev = fv[q] - v;\n                const d = ex * ex + ev * ev;\n                if (d \u003c d1) {\n                  d2 = d1;\n                  c = a;\n                  d1 = d;\n                  a = q;\n                } else if (d \u003c d2) {\n                  d2 = d;\n                  c = q;\n                }\n              }\n          let m = 0.62;\n          if (c >= 0) {\n            const sep = Math.sqrt((fx[a] - fx[c]) ** 2 + (fv[a] - fv[c]) ** 2);\n            const edge = (d2 - d1) / (2 * sep);\n            // A Plateau border, then the film of the cell, darker toward its middle.\n            m = edge \u003c 0.6 ? 1.06 : 0.9 - 0.24 * Math.min(1, (edge - 0.6) / Math.max(1, sep * 0.4));\n          }\n          // Wet foam at the bottom takes the beer's colour; the crown is lit.\n          const wetF = clamp(1 - v / 2.5, 0, 1) * 0.5;\n          const crown = topV - v \u003c 1.2 ? 0.12 : 0;\n          r = (head[0] * (1 - wetF) + clear[0] * wetF) * (m + crown);\n          g = (head[1] * (1 - wetF) + clear[1] * wetF) * (m + crown);\n          b = (head[2] * (1 - wetF) + clear[2] * wetF) * (m + crown);\n        } else {\n          // Empty glass: the bar behind, a film where beer has just run down,\n          // and the lacing rings each sip left.\n          r = 12 + clear[0] * wet;\n          g = 11 + clear[1] * wet;\n          b = 11 + clear[2] * wet;\n          for (const l of laces) {\n            const dy = y - l.y;\n            if (dy \u003c -1 || dy > 5) continue;\n            const hsh = Math.sin(x * 12.9898 + l.k * 78.233 + Math.floor(dy) * 37.7) * 43758.5;\n            const q = hsh - Math.floor(hsh);\n            const lace = dy \u003c 2 ? (q > 0.35 ? 0.55 : 0.2) : q > 0.86 + dy * 0.02 ? 0.4 : 0;\n            r += head[0] * lace;\n            g += head[1] * lace;\n            b += head[2] * lace;\n          }\n        }\n        // The bar lights' reflection runs down the left of the glass, with a\n        // glint that climbs it, and a fainter one on the right.\n        const s = hl[p] + glx[p] * gy;\n        r += s;\n        g += s;\n        b += s;\n      } else if (inGlass && Math.abs(dx) \u003c= hw + 1.2) {\n        // The glass wall seen edge on.\n        r = 40;\n        g = 44;\n        b = 50;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  // Rising bubbles, bright in clear beer and lost in the haze.\n  for (let i = 0; i \u003c P.nb; i++) {\n    const x = Math.round(P.bx[i] - 0.5);\n    const y = Math.round(P.by[i]);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const cl = clamp((P.front - y) / 6 + 0.5, 0, 1);\n    const v = (1 - 0.45 * cl) * (1 - 0.8 * stout) * (0.55 + Math.min(0.45, (FLOOR - y) / 120));\n    const p = y * W + x;\n    add(buf, p, 170 * v, 160 * v, 130 * v);\n    if (x + 1 \u003c W) add(buf, p + 1, 110 * v, 100 * v, 80 * v);\n    if (FLOOR - y > 40 && y + 1 \u003c H) add(buf, p + W, 60 * v, 56 * v, 44 * v);\n  }\n  // The rim, seen from just below: a flat ellipse, its near half brighter.\n  for (let a = 0; a \u003c 6.283; a += 0.03) {\n    const s = Math.sin(a);\n    const x = Math.round(CX - 0.5 + 27 * Math.cos(a));\n    const y = Math.round(RIM - 0.5 + 1.6 * s);\n    if (x \u003c 0 || x >= W) continue;\n    const v = s > 0 ? 90 : 45;\n    const gl = glint \u003c RIM + 6 && glint > RIM - 20 && Math.cos(a) \u003c -0.6 ? 120 : 0;\n    add(buf, y * W + x, v + gl, v + gl, v + 8 + gl);\n  }\n  // The stream from the tap, a little wavering, while the tap is open and as its tail falls.\n  const sTop = P.mode === POUR ? 11 : P.streamTop;\n  const sBot = level - hH;\n  if (sTop \u003c sBot) {\n    const sx = Math.round(CX - 1 + 0.6 * Math.sin(P.t * 7));\n    for (let y = Math.max(11, Math.floor(sTop)); y \u003c sBot && y \u003c FLOOR; y++)\n      for (let i = -1; i \u003c= 2; i++) {\n        const x = sx + i;\n        const core = i === 0 || i === 1;\n        const f = core ? 1 : 0.4;\n        const p = y * W + x;\n        buf[p * 3] = buf[p * 3] * (1 - f) + (clear[0] * 1.05 + 30) * f;\n        buf[p * 3 + 1] = buf[p * 3 + 1] * (1 - f) + (clear[1] * 1.05 + 30) * f;\n        buf[p * 3 + 2] = buf[p * 3 + 2] * (1 - f) + (clear[2] * 1.05 + 26) * f;\n        if (i === 0 && (y + Math.floor(P.t * 30)) % 7 \u003c 2) add(buf, p, 60, 60, 60);\n      }\n  }\n  // The tap from the front: a dark handle carrying a badge in the beer's\n  // colour, the chrome body, and the spout over the rim.\n  const put = (x, y, c0, c1, c2) => {\n    const p = y * W + x;\n    buf[p * 3] = c0;\n    buf[p * 3 + 1] = c1;\n    buf[p * 3 + 2] = c2;\n  };\n  for (let y = 0; y \u003c 5; y++)\n    for (let x = 28; x \u003c= 35; x++) {\n      const edge = x === 28 || x === 35;\n      if (y >= 1 && y \u003c= 3 && !edge && x > 29 && x \u003c 34) put(x, y, clear[0] * 0.9 + 20, clear[1] * 0.9 + 20, clear[2] * 0.9 + 20);\n      else put(x, y, x === 28 ? 96 : edge ? 22 : 52, x === 28 ? 90 : edge ? 20 : 46, x === 28 ? 86 : edge ? 19 : 42);\n    }\n  for (let y = 5; y \u003c 11; y++) {\n    const body = y \u003c= 7;\n    const x0 = body ? 24 : 29;\n    const x1 = body ? 39 : 34;\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      const v = (body ? 70 + 40 * (7 - y) : 60) + 150 * Math.exp(-(((u - 0.32) / 0.14) ** 2)) + (u > 0.85 || u \u003c 0.08 ? -30 : 0);\n      put(x, y, v * 0.92, v * 0.95, v);\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-pint","type":"code","name":"pint","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pint\n// Family:  cells\n// Idea:    A tap pours a pint as tall as the panel against a dark bar, the cloudy beer clears from the bottom up under rising chains of bubbles while the foam head coarsens into bright polygonal cells, and someone drinks it down in sips that leave lacing rings on the glass before it is poured again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the pour, the settling surge and the lacing of a pint at the bar\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Beer=0..1, Speed=0.2..3, Fizz=4..20, Head=0..1\n//\n// Knob 1: Beer. What is on tap: a pale lager at 0, an amber ale at 0.35, a red ale at 0.65 and a stout at 1, whose cream-brown surge settles black from the bottom up.\n// Knob 2: Speed. How fast the bar runs: at 2 a pint pours in 6 s, starts to go 5 s later in five sips 5 s apart and is poured again; at 0.2 it all runs ten times slower.\n// Knob 3: Fizz. How many nucleation sites stream bubbles, from 4 to 20, and how thick the haze of fine bubbles is, so how long a lager takes to clear: about 6 s at 4 and 17 s at 20.\n// Knob 4: Head. How tall the foam head stands, from 12 rows to 32, and how fast its small bubbles coarsen into large cells.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CX = 31.5;\n// The glass: rim row, inside floor row, and the bar top it stands on.\nconst RIM = 14;\nconst FLOOR = 118;\nconst BAR = 124;\n// Bar states.\nconst POUR = 0;\nconst REST = 1;\n// Clear and cloudy body, and head, for lager, amber ale, red ale and stout.\nconst BEERS = [\n  [0, [238, 178, 28], [204, 186, 138], [238, 236, 226]],\n  [0.35, [216, 106, 18], [196, 146, 104], [240, 230, 206]],\n  [0.65, [168, 38, 18], [176, 112, 90], [238, 222, 198]],\n  [1, [20, 10, 6], [152, 114, 82], [224, 198, 152]],\n];\nconst MAXB = 700;\nconst FOAM = 640;\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// Inside half-width of the shaker glass at a row: 26 LEDs at the rim, 20 at the floor.\nfunction half(y) {\n  return 26 - (6 * (clamp(y, RIM, FLOOR) - RIM)) / (FLOOR - RIM);\n}\n\nfunction beerAt(b) {\n  let i = 0;\n  while (i \u003c BEERS.length - 2 && BEERS[i + 1][0] \u003c b) i++;\n  const A = BEERS[i];\n  const B = BEERS[i + 1];\n  const f = clamp((b - A[0]) / (B[0] - A[0]), 0, 1);\n  const mix = (k) => A[k].map((v, j) => v + (B[k][j] - v) * f);\n  return { clear: mix(1), cloudy: mix(2), head: mix(3) };\n}\n\nexport function setup(params) {\n  const P = params;\n  P.buf = new Float32Array(N * 3);\n  P.bx = new Float32Array(MAXB);\n  P.by = new Float32Array(MAXB);\n  P.bv = new Float32Array(MAXB);\n  P.nb = 0;\n  P.fx = new Float32Array(FOAM);\n  P.fv = new Float32Array(FOAM);\n  P.fu = new Float32Array(FOAM);\n  P.nf = 0;\n  P.wet = new Float32Array(H);\n  // The bar lights' reflection down the left of the glass and a fainter one\n  // on the right, and where along a row the climbing glint sits.\n  P.hl = new Float32Array(N);\n  P.bump = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) P.bump[x] = 0.8 * Math.sin(x * 0.9 + 1.3);\n  P.glx = new Float32Array(N);\n  for (let y = RIM; y \u003c FLOOR; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const hw = half(y);\n      const dx = x + 0.5 - CX;\n      P.hl[y * W + x] = 255 * (Math.exp(-(((dx + hw - 3.5) / 1.3) ** 2)) * 0.32 + Math.exp(-(((dx - hw + 2.5) / 0.9) ** 2)) * 0.12) * (0.75 + 0.25 * Math.sin(y * 0.11));\n      P.glx[y * W + x] = 204 * Math.exp(-(((dx + hw - 3.5) / 1.6) ** 2));\n    }\n  // A smooth noise field for the haze and the surge, tiled every 128 rows.\n  P.noise = new Float32Array(N);\n  const g = [];\n  for (let i = 0; i \u003c 17 * 33; i++) g.push(Math.random());\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const gx = x / 4;\n      const gy = y / 4;\n      const i = Math.floor(gx);\n      const j = Math.floor(gy);\n      const u = gx - i;\n      const v = gy - j;\n      const s = (a, b) => g[(b % 32) * 17 + (a % 16)];\n      const su = u * u * (3 - 2 * u);\n      const sv = v * v * (3 - 2 * v);\n      P.noise[y * W + x] = (s(i, j) * (1 - su) + s(i + 1, j) * su) * (1 - sv) + (s(i, j + 1) * (1 - su) + s(i + 1, j + 1) * su) * sv;\n    }\n  Object.assign(P, {\n    T: 0,\n    t: 0,\n    mode: POUR,\n    modeT: 0,\n    level: FLOOR,\n    headH: 0,\n    foamAge: 0,\n    front: FLOOR + 4,\n    sips: 0,\n    sipFrom: 0,\n    sipTo: 0,\n    sipT: -1,\n    laces: [],\n    siteT: new Float32Array(20),\n    streamTop: 11,\n    beer: 0,\n    fizz: 4,\n    head: 0.06,\n    started: false,\n  });\n  freshFoam(P);\n}\n\n// The head made by a pour: small bubbles packed tight, each with a rank that\n// says how soon it pops or is swallowed by its neighbours as the foam coarsens.\nfunction freshFoam(P) {\n  P.nf = 0;\n  P.foamAge = 0;\n  // One bubble in each 1.9 LED square, jittered.\n  for (let j = 0; j \u003c 19; j++)\n    for (let i = 0; i \u003c 29 && P.nf \u003c FOAM; i++) {\n      P.fx[P.nf] = 4.5 + (i + 0.15 + 0.7 * Math.random()) * 1.9;\n      P.fv[P.nf] = (j + 0.15 + 0.7 * Math.random()) * 1.9;\n      P.fu[P.nf] = Math.random();\n      P.nf++;\n    }\n  P.bStart = new Int32Array(16 * 10 + 1);\n  P.bItem = new Int32Array(FOAM);\n  P.bOf = new Int32Array(FOAM);\n}\n\n// The head's full height for the Head knob, and the liquid level of a full pint.\nconst headFull = (P) => 12 + 20 * P.head;\nconst fullLevel = (P) => RIM + 1 + headFull(P);\n\nfunction startPour(P) {\n  P.mode = POUR;\n  P.modeT = 0;\n  P.front = FLOOR + 4;\n  P.sips = 0;\n  freshFoam(P);\n  P.headH = Math.min(P.headH, 3);\n}\n\nfunction step(P, h) {\n  P.T += h;\n  P.modeT += h;\n  P.foamAge += h;\n  const stout = clamp((P.beer - 0.6) / 0.4, 0, 1);\n  const full = fullLevel(P);\n  if (P.mode === POUR) {\n    // About 15 rows a second; the falling stream whips up the head.\n    P.level = Math.max(full, P.level - h * 15);\n    P.headH = Math.min(headFull(P) * (P.level > full + 0.5 ? 0.9 : 1), P.headH + h * 5);\n    P.foamAge = 0;\n    P.streamTop = 11;\n    if (P.level \u003c= full) {\n      P.mode = REST;\n      P.modeT = 0;\n      P.nextSip = 4.6;\n    }\n  } else {\n    // The stream's tail falls once the tap closes.\n    P.streamTop += h * (20 + 140 * P.modeT);\n    // Clearing climbs from the floor: quick for lager, a slow surge for stout.\n    P.front -= (h * (11 - 6 * stout) * 1.4) / (0.6 + P.fizz / 10);\n    // The head drains and pops down to about 60% of its height.\n    const target = headFull(P) * (0.6 + 0.4 * Math.exp(-P.foamAge / 14));\n    P.headH += (target - P.headH) * Math.min(1, h * 0.8);\n    if (P.sipT \u003c 0 && P.modeT >= P.nextSip) {\n      if (P.sips >= 5) startPour(P);\n      else {\n        P.sipT = 0;\n        P.sipFrom = P.level;\n        P.sipTo = Math.min(FLOOR - 16, P.level + (FLOOR - full) / 6);\n        P.laces.push({ y: P.level - P.headH, k: Math.random() * 97 });\n        if (P.laces.length > 6) P.laces.shift();\n      }\n    }\n    if (P.sipT >= 0) {\n      P.sipT += h;\n      const f = Math.min(1, P.sipT / 1.2);\n      const old = P.level;\n      P.level = P.sipFrom + (P.sipTo - P.sipFrom) * f * f * (3 - 2 * f);\n      for (let y = Math.max(0, Math.floor(old)); y \u003c P.level && y \u003c H; y++) P.wet[y] = 1;\n      if (f >= 1) {\n        P.sipT = -1;\n        P.sips++;\n        P.nextSip = P.modeT + (P.sips >= 5 ? 3 : 5);\n      }\n    }\n  }\n  if (P.mode === POUR) P.laces.length = Math.min(P.laces.length, P.laces.filter((l) => l.y \u003c P.level - P.headH - 1).length);\n  for (let y = 0; y \u003c H; y++) P.wet[y] *= Math.exp(-h / 5);\n  bubbles(P, h);\n}\n\n// Carbonation: chains of bubbles from nucleation sites on the floor and walls,\n// speeding up and swelling as they rise.\nfunction bubbles(P, h) {\n  const n = Math.round(P.fizz);\n  const every = 0.3 / (0.6 + (0.4 * n) / 4);\n  for (let i = 0; i \u003c n; i++) {\n    P.siteT[i] -= h;\n    if (P.siteT[i] > 0) continue;\n    P.siteT[i] += every * (0.8 + 0.4 * Math.random()) * (1 + 0.5 * ((i * 0.71) % 1));\n    if (P.nb >= MAXB) continue;\n    let x;\n    let y;\n    if (i % 4 === 3) {\n      y = 44 + ((i * 0.37) % 1) * 66;\n      x = CX + (i % 8 === 3 ? -1 : 1) * (half(y) - 1.2);\n    } else {\n      y = FLOOR - 0.5;\n      x = CX + (((i * 0.618 + 0.13) % 1) - 0.5) * 2 * (half(FLOOR) - 3);\n    }\n    if (y \u003c= P.level + 1) continue;\n    P.bx[P.nb] = x;\n    P.by[P.nb] = y;\n    P.bv[P.nb] = 5;\n    P.nb++;\n  }\n  const { bx, by, bv } = P;\n  const top = P.level + 0.5;\n  for (let i = 0; i \u003c P.nb; i++) {\n    const v = Math.min(32, bv[i] + h * 16);\n    bv[i] = v;\n    by[i] -= v * h;\n    if (by[i] > top) continue;\n    // At the surface: the last bubble takes this one's place.\n    P.nb--;\n    bx[i] = bx[P.nb];\n    by[i] = by[P.nb];\n    bv[i] = bv[P.nb];\n    i--;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 4, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.beer = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0, 3) / 2;\n  P.fizz = clamp(k[2], 4, 20);\n  P.head = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The pint has been pouring for a few seconds when the panel opens.\n    for (let i = 0; i \u003c 50; i++) step(P, 1 / 30);\n    for (let i = 0; i \u003c 90; i++) step(P, rate / 30);\n  }\n  P.t += dt;\n  step(P, dt * rate);\n}\n\nfunction add(buf, p, r, g, b) {\n  buf[p * 3] += r;\n  buf[p * 3 + 1] += g;\n  buf[p * 3 + 2] += b;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const buf = P.buf;\n  const { clear, cloudy, head } = beerAt(P.beer);\n  const stout = clamp((P.beer - 0.6) / 0.4, 0, 1);\n  const level = P.level;\n  const hH = P.headH;\n  const noise = P.noise;\n  const t = P.T;\n  // Foam coarsening: the mean cell grows from 2 LEDs, so fewer bubbles live.\n  const cell = 2 * Math.pow(1 + P.foamAge * (0.5 + 1.5 * P.head), 0.5);\n  const alive = clamp(4 / (cell * cell), 0.02, 1);\n  const glint = 128 - ((P.t * 16) % 190);\n  // The bubbles still alive in the head, in buckets of 4 by 4 LEDs. The dry\n  // foam at the top coarsens first; the wet foam at the bottom stays fine.\n  const { bStart, bItem, bOf } = P;\n  bStart.fill(0);\n  const topH = 1.1 / Math.max(6, hH);\n  for (let q = 0; q \u003c P.nf; q++) {\n    const k = P.fu[q] * (0.45 + topH * P.fv[q]) \u003c= alive ? Math.min(9, Math.floor(P.fv[q] / 4)) * 16 + Math.min(15, Math.floor(P.fx[q] / 4)) : -1;\n    bOf[q] = k;\n    if (k >= 0) bStart[k + 1]++;\n  }\n  for (let k = 0; k \u003c 160; k++) bStart[k + 1] += bStart[k];\n  const fill = bStart.slice(0, 160);\n  for (let q = 0; q \u003c P.nf; q++) if (bOf[q] >= 0) bItem[fill[bOf[q]]++] = q;\n  // How many buckets out to look for the two nearest.\n  const R = cell \u003c 4.5 ? 1 : cell \u003c 8 ? 2 : 3;\n  const fx = P.fx;\n  const fv = P.fv;\n  const { hl, glx, bump, laces, wet: wetRows } = P;\n  // A cheap generator for the sparkle of fine bubbles, reseeded each frame.\n  let seed = (Math.random() * 4294967296) >>> 0;\n  const sparkle = 0.0012 * P.fizz;\n  const haze = 0.7 + (0.3 * (P.fizz - 4)) / 16;\n  for (let y = 0; y \u003c H; y++) {\n    const hw = half(y);\n    const inGlass = y >= RIM && y \u003c FLOOR;\n    const gy = Math.exp(-(((y - glint) / 4) ** 2));\n    // Row by row: how cloudy the beer is, where the surge texture sits\n    // going down the walls and up the middle, and how deep the row is.\n    const cl = clamp((P.front - y) / 6 + 0.5, 0, 1);\n    const sv = t * (6 + 6 * stout);\n    const rowDown = ((((y - sv) % H) + H) % H | 0) * W;\n    const rowUp = ((((y + sv) % H) + H) % H | 0) * W;\n    const deep = 1 - (0.12 * (y - level)) / (FLOOR - RIM);\n    const amp = (0.12 + 0.3 * stout) * cl;\n    // More fizz, a thicker haze of fine bubbles.\n    const hz = cl * haze;\n    const cr = clear[0] + (cloudy[0] - clear[0]) * hz;\n    const cg = clear[1] + (cloudy[1] - clear[1]) * hz;\n    const cb = clear[2] + (cloudy[2] - clear[2]) * hz;\n    const fine = sparkle * (1 - 0.6 * stout) * 4294967296;\n    const wet = 0.12 * wetRows[y];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const dx = x + 0.5 - CX;\n      let r = 9 + (3 * (H - y)) / H;\n      let g = 7 + (2 * (H - y)) / H;\n      let b = 6;\n      if (y >= BAR) {\n        // The bar top: dark wood with a sheen and the beer's reflection.\n        const wood = 0.8 + 0.2 * Math.sin(x * 0.3 + y * 2.1 + Math.sin(x * 0.07) * 3);\n        r = 52 * wood;\n        g = 31 * wood;\n        b = 18 * wood;\n        if (y === BAR) {\n          r += 40;\n          g += 28;\n          b += 18;\n        }\n        if (Math.abs(dx) \u003c half(FLOOR) && level \u003c FLOOR - 1) {\n          const f = 0.22 * (1 - (y - BAR) / 5);\n          r += clear[0] * f;\n          g += clear[1] * f;\n          b += clear[2] * f;\n        }\n      } else if (y >= FLOOR && Math.abs(dx) \u003c= half(FLOOR) + 1) {\n        // The thick glass foot, lit through by the beer above it.\n        const lit = level \u003c FLOOR - 1 ? 0.5 : 0.12;\n        r = 26 + clear[0] * lit;\n        g = 28 + clear[1] * lit;\n        b = 32 + clear[2] * lit;\n        if (y === BAR - 1 || Math.abs(dx) > half(FLOOR)) {\n          r += 50;\n          g += 52;\n          b += 56;\n        }\n      } else if (inGlass && Math.abs(dx) \u003c= hw) {\n        const e = Math.abs(dx) / hw;\n        const topV = hH + bump[x] * Math.min(1, hH / 4);\n        if (y >= level) {\n          // The beer: cloudy above the clearing front, clear below it, and\n          // a surge in the haze: down along the walls, up the middle.\n          const n = noise[(e > 0.62 ? rowDown : rowUp) + x] - 0.5;\n          const m = (0.84 + 0.16 * (1 - e * e)) * deep * (1 + n * amp);\n          r = cr * m;\n          g = cg * m;\n          b = cb * m;\n          seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0;\n          if (seed \u003c fine) {\n            r += 70;\n            g += 70;\n            b += 60;\n          }\n        } else if (level - y \u003c= topV) {\n          // The head: Voronoi cells round the living bubbles, with bright\n          // Plateau borders between them.\n          const v = level - y;\n          const bi = Math.min(9, Math.floor(v / 4));\n          const bj = x >> 2;\n          let d1 = 1e9;\n          let d2 = 1e9;\n          let a = -1;\n          let c = -1;\n          for (let jj = Math.max(0, bi - R); jj \u003c= Math.min(9, bi + R); jj++)\n            for (let ii = Math.max(0, bj - R); ii \u003c= Math.min(15, bj + R); ii++)\n              for (let qi = bStart[jj * 16 + ii], qe = bStart[jj * 16 + ii + 1]; qi \u003c qe; qi++) {\n                const q = bItem[qi];\n                const ex = fx[q] - x - 0.5;\n                const ev = fv[q] - v;\n                const d = ex * ex + ev * ev;\n                if (d \u003c d1) {\n                  d2 = d1;\n                  c = a;\n                  d1 = d;\n                  a = q;\n                } else if (d \u003c d2) {\n                  d2 = d;\n                  c = q;\n                }\n              }\n          let m = 0.62;\n          if (c >= 0) {\n            const sep = Math.sqrt((fx[a] - fx[c]) ** 2 + (fv[a] - fv[c]) ** 2);\n            const edge = (d2 - d1) / (2 * sep);\n            // A Plateau border, then the film of the cell, darker toward its middle.\n            m = edge \u003c 0.6 ? 1.06 : 0.9 - 0.24 * Math.min(1, (edge - 0.6) / Math.max(1, sep * 0.4));\n          }\n          // Wet foam at the bottom takes the beer's colour; the crown is lit.\n          const wetF = clamp(1 - v / 2.5, 0, 1) * 0.5;\n          const crown = topV - v \u003c 1.2 ? 0.12 : 0;\n          r = (head[0] * (1 - wetF) + clear[0] * wetF) * (m + crown);\n          g = (head[1] * (1 - wetF) + clear[1] * wetF) * (m + crown);\n          b = (head[2] * (1 - wetF) + clear[2] * wetF) * (m + crown);\n        } else {\n          // Empty glass: the bar behind, a film where beer has just run down,\n          // and the lacing rings each sip left.\n          r = 12 + clear[0] * wet;\n          g = 11 + clear[1] * wet;\n          b = 11 + clear[2] * wet;\n          for (const l of laces) {\n            const dy = y - l.y;\n            if (dy \u003c -1 || dy > 5) continue;\n            const hsh = Math.sin(x * 12.9898 + l.k * 78.233 + Math.floor(dy) * 37.7) * 43758.5;\n            const q = hsh - Math.floor(hsh);\n            const lace = dy \u003c 2 ? (q > 0.35 ? 0.55 : 0.2) : q > 0.86 + dy * 0.02 ? 0.4 : 0;\n            r += head[0] * lace;\n            g += head[1] * lace;\n            b += head[2] * lace;\n          }\n        }\n        // The bar lights' reflection runs down the left of the glass, with a\n        // glint that climbs it, and a fainter one on the right.\n        const s = hl[p] + glx[p] * gy;\n        r += s;\n        g += s;\n        b += s;\n      } else if (inGlass && Math.abs(dx) \u003c= hw + 1.2) {\n        // The glass wall seen edge on.\n        r = 40;\n        g = 44;\n        b = 50;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  // Rising bubbles, bright in clear beer and lost in the haze.\n  for (let i = 0; i \u003c P.nb; i++) {\n    const x = Math.round(P.bx[i] - 0.5);\n    const y = Math.round(P.by[i]);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const cl = clamp((P.front - y) / 6 + 0.5, 0, 1);\n    const v = (1 - 0.45 * cl) * (1 - 0.8 * stout) * (0.55 + Math.min(0.45, (FLOOR - y) / 120));\n    const p = y * W + x;\n    add(buf, p, 170 * v, 160 * v, 130 * v);\n    if (x + 1 \u003c W) add(buf, p + 1, 110 * v, 100 * v, 80 * v);\n    if (FLOOR - y > 40 && y + 1 \u003c H) add(buf, p + W, 60 * v, 56 * v, 44 * v);\n  }\n  // The rim, seen from just below: a flat ellipse, its near half brighter.\n  for (let a = 0; a \u003c 6.283; a += 0.03) {\n    const s = Math.sin(a);\n    const x = Math.round(CX - 0.5 + 27 * Math.cos(a));\n    const y = Math.round(RIM - 0.5 + 1.6 * s);\n    if (x \u003c 0 || x >= W) continue;\n    const v = s > 0 ? 90 : 45;\n    const gl = glint \u003c RIM + 6 && glint > RIM - 20 && Math.cos(a) \u003c -0.6 ? 120 : 0;\n    add(buf, y * W + x, v + gl, v + gl, v + 8 + gl);\n  }\n  // The stream from the tap, a little wavering, while the tap is open and as its tail falls.\n  const sTop = P.mode === POUR ? 11 : P.streamTop;\n  const sBot = level - hH;\n  if (sTop \u003c sBot) {\n    const sx = Math.round(CX - 1 + 0.6 * Math.sin(P.t * 7));\n    for (let y = Math.max(11, Math.floor(sTop)); y \u003c sBot && y \u003c FLOOR; y++)\n      for (let i = -1; i \u003c= 2; i++) {\n        const x = sx + i;\n        const core = i === 0 || i === 1;\n        const f = core ? 1 : 0.4;\n        const p = y * W + x;\n        buf[p * 3] = buf[p * 3] * (1 - f) + (clear[0] * 1.05 + 30) * f;\n        buf[p * 3 + 1] = buf[p * 3 + 1] * (1 - f) + (clear[1] * 1.05 + 30) * f;\n        buf[p * 3 + 2] = buf[p * 3 + 2] * (1 - f) + (clear[2] * 1.05 + 26) * f;\n        if (i === 0 && (y + Math.floor(P.t * 30)) % 7 \u003c 2) add(buf, p, 60, 60, 60);\n      }\n  }\n  // The tap from the front: a dark handle carrying a badge in the beer's\n  // colour, the chrome body, and the spout over the rim.\n  const put = (x, y, c0, c1, c2) => {\n    const p = y * W + x;\n    buf[p * 3] = c0;\n    buf[p * 3 + 1] = c1;\n    buf[p * 3 + 2] = c2;\n  };\n  for (let y = 0; y \u003c 5; y++)\n    for (let x = 28; x \u003c= 35; x++) {\n      const edge = x === 28 || x === 35;\n      if (y >= 1 && y \u003c= 3 && !edge && x > 29 && x \u003c 34) put(x, y, clear[0] * 0.9 + 20, clear[1] * 0.9 + 20, clear[2] * 0.9 + 20);\n      else put(x, y, x === 28 ? 96 : edge ? 22 : 52, x === 28 ? 90 : edge ? 20 : 46, x === 28 ? 86 : edge ? 19 : 42);\n    }\n  for (let y = 5; y \u003c 11; y++) {\n    const body = y \u003c= 7;\n    const x0 = body ? 24 : 29;\n    const x1 = body ? 39 : 34;\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - x0) / (x1 - x0);\n      const v = (body ? 70 + 40 * (7 - y) : 60) + 150 * Math.exp(-(((u - 0.32) / 0.14) ** 2)) + (u > 0.85 || u \u003c 0.08 ? -30 : 0);\n      put(x, y, v * 0.92, v * 0.95, v);\n    }\n  }\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    display.setPixel(p % W, (p / W) | 0, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Beer=0..1, Speed=0.2..3, Fizz=4..20, Head=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Beer","min":0,"max":1,"about":"What is on tap: a pale lager at 0, an amber ale at 0.35, a red ale at 0.65 and a stout at 1, whose cream-brown surge settles black from the bottom up."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the bar runs: at 2 a pint pours in 6 s, starts to go 5 s later in five sips 5 s apart and is poured again; at 0.2 it all runs ten times slower."},{"name":"Fizz","min":4,"max":20,"about":"How many nucleation sites stream bubbles, from 4 to 20, and how thick the haze of fine bubbles is, so how long a lager takes to clear: about 6 s at 4 and 17 s at 20."},{"name":"Head","min":0,"max":1,"about":"How tall the foam head stands, from 12 rows to 32, and how fast its small bubbles coarsen into large cells."}],"start":[0,2,4,0.06],"measures":{"motion":0.1411,"detail":0.0425,"edges":0.5054,"complexity":1.0501,"coverage":0.678,"colour":0.3448,"drift":0.1113},"knobResponse":[0.1725,0.2433,0.0546,0.0641]},{"slug":"pipe-organ","title":"Pipe Organ","family":"music","round":24,"note":"어두운 성당의 파이프오르간 정면이 패널을 채워요. 보이지 않는 오르가니스트가 여덟 화음 코랄을 되풀이하면, 소리 나는 파이프마다 입에서 빛이 켜지고 몸통을 따라 정상파 띠가 올라가요. 가운데 가장 긴 파이프가 가장 낮은 음이에요. K1 이 플루트의 파랑, 프린시펄의 은빛, 리드의 금빛과 빨강 사이에서 음전을 고르고, K1 을 누르면 파이프 열아홉이 다 울려요.","idea":"The tin front pipes of a church organ stand in towers and flats while an unseen organist plays a chorale, and each pipe that speaks lights at its mouth with a standing wave shimmering up its body, the bass in the tall pipes and the tune in the small ones, as light from a rose window drifts across the case.","buttons":"K1 tap is full organ: every pipe in the front speaks at once for about three seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Pipe Organ\n// Family:  music\n// Idea:    The tin front pipes of a church organ stand in towers and flats while an unseen organist plays a chorale, and each pipe that speaks lights at its mouth with a standing wave shimmering up its body, the bass in the tall pipes and the tune in the small ones, as light from a rose window drifts across the case.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the tower-and-flat fronts of North German Baroque organ cases and four-part chorale harmony\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Stops=0..1, Tempo=0.2..3, Voices=1..6, Tremulant=0..1\n//\n// Knob 1: Stops. The registration. Flutes at 0 glow soft blue in two broad bands; principals in the middle speak silver-white and add the octave above each note; the reeds at 1 burn gold at the mouth and red up the body in six bands, with the octave below, the twelfth and the fifteenth speaking too.\n// Knob 2: Tempo. At 2 a chord takes a second, so a phrase of eight with its held last chord takes about nine; at 0.2 a chord holds for ten seconds and at 3 for two thirds of one.\n// Knob 3: Voices. How many parts the hands play over the pedal: at 1 the tune alone over the bass, at 3 the four-part chorale, and 4 to 6 add parts that fill out the chord.\n// Knob 4: Tremulant. The wind shakes. The shimmer in the speaking pipes throbs and wavers, and the two candles on the case flicker and gutter until the light on the whole lower case flickers with them.\n// Buttons: K1 tap is full organ: every pipe in the front speaks at once for about three seconds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, sqrt, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Pipe d sounds the d-th note of a major scale up from the longest pipe, and\n// an open pipe halves its length each octave.\nconst STEP = [0, 2, 4, 5, 7, 9, 11];\nconst len = (d) => 92 * 2 ** (-(12 * floor(d / 7) + STEP[d % 7]) / 12);\n// The front: the lowest note in the middle of the centre tower, then pairs,\n// the lower note left and the next one right, as the C and C sharp chests of\n// a real case split a scale between the two sides.\nconst PIPES = [];\nfunction pair(d, x, w, top, mouth, base) {\n  const L = d ? (len(d) + len(d + 1)) / 2 : len(0);\n  const t = round(top >= 0 ? top : mouth - L);\n  const m = round(top >= 0 ? top + L : mouth);\n  const mh = w >= 5 ? 2 : 1;\n  PIPES[d] = { x, w, top: t, m, mh, f0: m + mh + 1, base };\n  if (d) PIPES[d + 1] = { x: W - x - w, w, top: t, m, mh, f0: m + mh + 1, base };\n}\n// The centre tower and the side towers hang from their crowns, so their\n// mouths step; the flats stand on equal feet, so their tops ramp.\npair(0, 29, 6, 9, 0, 110);\npair(1, 23, 5, 12, 0, 110);\npair(3, 1, 4, 30, 0, 110);\npair(5, 6, 4, 38, 0, 110);\npair(7, 19, 3, -1, 102, 110);\npair(9, 15, 3, -1, 102, 110);\npair(11, 11, 3, -1, 102, 110);\npair(13, 19, 3, -1, 44, 50);\npair(15, 15, 3, -1, 44, 50);\npair(17, 11, 3, -1, 44, 50);\nconst NP = 19;\n\n// Eight-chord phrases on the scale's chords, I = 0 to vi = 5. The first one\n// always opens the piece.\nconst PHRASES = [\n  [0, 4, 5, 3, 0, 1, 4, 0],\n  [0, 5, 1, 4, 0, 3, 4, 0],\n  [5, 3, 0, 4, 5, 1, 4, 4],\n  [0, 3, 0, 4, 5, 1, 4, 0],\n  [3, 4, 0, 5, 1, 0, 4, 0],\n  [0, 2, 5, 3, 1, 4, 4, 0],\n];\n// Voices in the order the knob adds them: soprano, bass, alto, tenor, then\n// three that fill the chord.\nconst VORD = [0, 3, 1, 2, 4, 5, 6];\n\n// Surfaces, as how much of each light they give back.\nconst TIN = [0.9, 0.95, 1];\nconst WOOD = [0.42, 0.25, 0.15];\nconst GILT = [1.3, 1, 0.42];\nconst DARK = [0.07, 0.05, 0.045];\nconst STONE = [0.9, 0.88, 0.84];\n// Grey daylight from the nave, the candles, and the lamp on the music desk.\nconst DAY = [56, 56, 64];\nconst CAN = [200, 126, 58];\nconst LAMP = [255, 210, 140];\n// The rose window's glass.\nconst RUBY = [230, 40, 60];\nconst SAPH = [50, 90, 255];\nconst AMBER = [255, 200, 80];\nconst GREEN = [60, 200, 110];\nconst ROSE = [RUBY, SAPH, GREEN, SAPH];\n// Stop colours: flute, principal, reed at the mouth and up the body, full organ.\nconst FLUTE = [0.35, 0.62, 1];\nconst PRIN = [0.84, 0.9, 1];\nconst REED0 = [1, 0.77, 0.27];\nconst REED1 = [1, 0.2, 0.08];\nconst FULL = [1, 0.86, 0.58];\n\n// Round tin: a highlight a third of the way across and a dark far edge.\nfunction shade(p) {\n  return (0.2 + 0.5 * sin(PI * p) ** 0.7 + 0.55 * exp(-(((p - 0.36) / 0.14) ** 2))) * (1.1 - 0.4 * p);\n}\n\n// Carved and gilt pipe shades: pierced scrolls.\nfunction fret(x, y) {\n  return sin(x * 1.25 + 2 * sin(y * 0.52)) * sin(y * 0.9 + 1.6 * sin(x * 0.61));\n}\n\nfunction build(P) {\n  const A = P.A;\n  const put = (x, y, c, k = 1, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    for (let n = 0; n \u003c 3; n++) A[o + n] = mix(A[o + n], c[n] * k, a);\n  };\n  // Left half and its mirror.\n  const two = (x, y, c, k, a) => (put(x, y, c, k, a), put(W - 1 - x, y, c, k, a));\n  const row = (x0, x1, y, c, k) => {\n    for (let x = x0; x \u003c= x1; x++) two(x, y, c, k);\n  };\n  // The church wall: courses of ashlar.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const cs = floor(y / 5), off = (cs & 1) * 4, mortar = y % 5 === 4 || (x + off) % 8 === 7;\n      put(x, y, STONE, mortar ? 0.14 : 0.27 + 0.1 * hash(floor((x + off) / 8), cs));\n    }\n  // The case, dark inside.\n  for (let y = 0; y \u003c 114; y++) for (let x = 0; x \u003c 32; x++) if (x > 21 || (x > 9 ? y >= 11 : y >= 22)) two(x, y, DARK, 1);\n  // Stiles between the towers and the flats.\n  for (const [x, y0] of [[0, 30], [10, 16], [22, 9]]) for (let y = y0; y \u003c 110; y++) two(x, y, WOOD, 1.05 + 0.15 * sin(y * 0.8) * (y % 12 \u003c 2 ? 1 : 0));\n  // The side towers' crowns, each with a gilt urn and a flame on top.\n  row(0, 10, 29, GILT, 0.9);\n  for (let y = 26; y \u003c= 28; y++) row(0, 10, y, WOOD, 0.9);\n  for (const x of [2, 5, 8]) two(x, 27, GILT, 1.05);\n  row(0, 10, 25, GILT, 1.05);\n  row(0, 10, 24, WOOD, 0.7);\n  row(0, 10, 23, WOOD, 1);\n  row(0, 10, 22, GILT, 1.15);\n  const URN = [[21, 2], [20, 1], [19, 2], [18, 2], [17, 1], [16, 0], [15, 1], [14, 0]];\n  for (const [y, r] of URN) for (let x = 5 - r; x \u003c= 5 + r; x++) two(x, y, GILT, 1.15 - 0.18 * (x - 5 + r));\n  // The upper flats' cornice and a scroll pediment.\n  row(10, 22, 15, GILT, 0.9);\n  for (let y = 12; y \u003c= 14; y++) for (let x = 10; x \u003c= 22; x++) two(x, y, WOOD, y === 13 && x % 2 ? 1.25 : 0.9);\n  row(10, 22, 11, GILT, 1.1);\n  row(12, 20, 10, GILT, 0.75);\n  for (const [x, y] of [[12, 9], [13, 9], [19, 9], [20, 9], [14, 8], [15, 8], [17, 8], [18, 8], [16, 7], [16, 6]]) two(x, y, GILT, 1.05);\n  // The centre tower's crown, with a carved crest over it.\n  row(22, 31, 8, GILT, 0.95);\n  for (let y = 5; y \u003c= 7; y++) for (let x = 22; x \u003c= 31; x++) two(x, y, x % 4 === 1 && y === 6 ? GILT : WOOD, x % 4 === 1 && y === 6 ? 1.1 : 0.9);\n  row(22, 31, 4, GILT, 1.1);\n  for (let x = 23; x \u003c= 31; x++) {\n    const h = 4 * (1 - ((x - 31.5) / 9) ** 2);\n    for (let y = floor(4 - h); y \u003c 4; y++) if (fret(x, y + 3) > -0.2 || x === 31) two(x, y, GILT, x === 31 ? 1.25 : 0.8 + 0.3 * fret(x, y));\n  }\n  // Pipe shades over every pipe that stops short of the carving above it.\n  const GAP = [5, 14, 18, 28, 35, 45, 49, 58];\n  for (const q of PIPES) {\n    const y0 = q.base === 50 ? 16 : q.x === 1 || q.x === 6 || q.x > 53 ? 30 : q.x > 22 && q.x \u003c 41 ? 9 : 54;\n    for (let x = q.x - 1; x \u003c= q.x + q.w; x++) {\n      const own = x >= q.x && x \u003c q.x + q.w;\n      if (own || GAP.indexOf(x) >= 0)\n        for (let y = y0; y \u003c q.top; y++) {\n          const v = fret(x, y);\n          if (own && y === q.top - 1) put(x, y, GILT, 1.05);\n          else if (v > -0.1) put(x, y, GILT, 0.55 + 0.5 * v);\n        }\n    }\n  }\n  // Under the lower flats the pipe shades of the upper ones, and the shelf they stand on.\n  row(10, 22, 50, GILT, 0.95);\n  row(10, 22, 51, WOOD, 1);\n  row(10, 22, 52, WOOD, 0.9);\n  row(10, 22, 53, WOOD, 0.55);\n  // The pipes: body, mouth with its lips, and the conical foot.\n  for (const q of PIPES) {\n    const { x, w, top, m, mh, f0, base } = q;\n    for (let y = top; y \u003c m; y++) for (let j = 0; j \u003c w; j++) put(x + j, y, TIN, shade((j + 0.5) / w) * (y === top ? 0.7 : 1));\n    for (let j = 0; j \u003c w; j++) {\n      const inner = j > 0 && j \u003c w - 1, s = shade((j + 0.5) / w);\n      if (inner) put(x + j, m - 1, TIN, s * 1.3);\n      for (let y = m; y \u003c m + mh; y++) put(x + j, y, inner ? DARK : TIN, inner ? 0.8 : s);\n      put(x + j, m + mh, TIN, s * (inner ? 1.15 : 0.9));\n    }\n    if (w >= 5) for (let j = floor((w - 1) / 2); j \u003c= floor(w / 2); j++) put(x + j, m - 2, TIN, 1.25);\n    const cx = x + w / 2;\n    for (let y = f0; y \u003c base; y++) {\n      const hw = mix(w / 2, 0.7, (y - f0) / max(1, base - 1 - f0));\n      for (let xx = floor(cx - hw); xx \u003c= cx + hw; xx++) {\n        const cov = cl(hw - abs(xx + 0.5 - cx) + 0.5, 0, 1);\n        put(xx, y, TIN, 0.9 * shade(cl((xx + 0.5 - cx + hw) / (2 * hw), 0, 1)), cov);\n      }\n    }\n  }\n  // The impost the pipes stand on.\n  for (let x = 0; x \u003c W; x++) {\n    put(x, 110, GILT, 1);\n    put(x, 111, WOOD, x % 16 === 0 ? 0.6 : 1);\n    put(x, 112, WOOD, x % 16 === 0 ? 0.6 : 0.95);\n    put(x, 113, WOOD, 0.5);\n  }\n  // Candles on the stiles between the side towers and the flats.\n  for (let y = 98; y \u003c= 101; y++) two(10, y, [0.95, 0.9, 0.8], 0.5);\n  for (let x = 9; x \u003c= 11; x++) two(x, 102, GILT, 0.6);\n  // The console: the music desk with its lamp, and one manual.\n  for (let y = 114; y \u003c H; y++) for (let x = 0; x \u003c W; x++) put(x, y, WOOD, 0.7);\n  for (let y = 114; y \u003c= 119; y++) for (let x = 16; x \u003c= 47; x++) put(x, y, WOOD, 0.85);\n  for (let y = 115; y \u003c= 119; y++)\n    for (let x = 21; x \u003c= 42; x++) put(x, y, [0.95, 0.9, 0.76], y === 116 || y === 118 ? 0.62 : hash(x, y) \u003c 0.13 ? 0.3 : 1);\n  for (let x = 27; x \u003c= 36; x++) put(x, 114, GILT, 1.15);\n  for (let k = 0; k \u003c 21; k++) {\n    for (let y = 121; y \u003c= 125; y++) for (let x = 3 * k; x \u003c 3 * k + 2; x++) put(x, y, [0.92, 0.88, 0.78], y === 125 ? 0.7 : 1);\n    const n = (k + 6) % 7;\n    if (k \u003c 20 && n !== 2 && n !== 6) for (let y = 121; y \u003c= 123; y++) put(3 * k + 2, y, DARK, 1), put(3 * k + 3, y, DARK, 1);\n  }\n  // Light: grey daylight from above, warm candlelight, the desk lamp.\n  for (let i = 0; i \u003c N; i++) {\n    const x = (i & 63) + 0.5, y = (i >> 6) + 0.5;\n    P.day[i] = 0.45 + 0.55 * (1 - y / H) ** 1.3;\n    P.cL[i] = 0.85 / (1 + ((x - 10.5) ** 2 + (y - 96) ** 2) / 450);\n    P.cR[i] = 0.85 / (1 + ((x - 53.5) ** 2 + (y - 96) ** 2) / 450);\n    P.lamp[i] = y > 115 ? 1.1 / (1 + (x - 32) ** 2 / 90 + (y - 115) ** 2 / 40) : 0.45 / (1 + ((x - 32) ** 2 + (y - 114) ** 2) / 140);\n  }\n}\n\n// The nearest scale degree in lo..hi under cap whose note is in pcs, moving\n// from prev, sitting still costing `same`.\nfunction near(lo, hi, pcs, prev, same, cap) {\n  let best = -1;\n  let bs = 1e9;\n  for (let d = lo; d \u003c= hi; d++) {\n    if (d >= cap || pcs.indexOf(d % 7) \u003c 0) continue;\n    const j = abs(d - prev), s = j + (j === 0 ? same : 0) + (j > 4 ? 2 : 0) + rnd() * 0.9;\n    if (s \u003c bs) (bs = s), (best = d);\n  }\n  return best \u003c 0 ? (cap \u003c 99 ? near(lo, hi, pcs, prev, same, 99) : prev) : best;\n}\n\n// The next chord of the chorale, voiced from the last one.\nfunction chord(P) {\n  if (P.pi >= P.ph.length) (P.ph = PHRASES[floor(rnd() * PHRASES.length)]), (P.pi = 0);\n  const r = P.ph[P.pi++], last = P.pi === P.ph.length, pen = P.pi === P.ph.length - 1;\n  const T = [r, (r + 2) % 7, (r + 4) % 7];\n  if (pen && r === 4 && rnd() \u003c 0.6) T.push(3);\n  const [s0, a0, t0, b0] = P.prev;\n  const B = near(0, 7, [!last && !pen && rnd() \u003c 0.3 ? T[1] : r], b0, 0, 99);\n  const S = near(11, 18, last && r === 0 ? [0] : T, s0, 1.6, 99);\n  const A = near(8, 14, T, a0, 0.4, S);\n  const miss = T.filter((c) => c !== S % 7 && c !== A % 7 && c !== B % 7);\n  const Tn = near(4, 11, miss.length ? miss : T, t0, 0.4, A);\n  const v = [S, A, Tn, B];\n  // Three more parts fill the chord: the bass an octave up, one in the middle, one high.\n  for (const goal of [B + 7, 10, 16]) {\n    let best = -1;\n    let bs = 1e9;\n    for (let d = 0; d \u003c NP; d++) {\n      const s = abs(d - goal) + rnd() * 0.5;\n      if (T.indexOf(d % 7) >= 0 && v.indexOf(d) \u003c 0 && s \u003c bs) (bs = s), (best = d);\n    }\n    v.push(best);\n  }\n  P.prev = v;\n  return { v, dur: last ? 2 : 1, last, pass: [-1, -1, -1, -1], at: 0 };\n}\n\n// A part moving a third walks through the note between on the half beat.\nfunction passing(c, nx) {\n  if (c.last) return;\n  for (let k = 0; k \u003c 4; k++) if (abs(nx.v[k] - c.v[k]) === 2 && rnd() \u003c (k ? 0.4 : 0.6)) c.pass[k] = (c.v[k] + nx.v[k]) / 2;\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    A: F32(N * 3), F: F32(N * 3), day: F32(N), cL: F32(N), cR: F32(N), lamp: F32(N),\n    amp: F32(NP), tgt: F32(NP), on: F32(NP), chiff: F32(NP), keys: F32(NP),\n    t: 0, beat: 0, fullT: 99, full: 0, fl: 1, fr: 1, s: 0, tr: 0,\n    ph1: rnd() * 6.28, ph2: rnd() * 6.28, ph: PHRASES[0], pi: 0, prev: [14, 11, 7, 0, 7, 9, 16],\n  });\n  build(P);\n  P.cur = chord(P);\n  P.nx = chord(P);\n  passing(P.cur, P.nx);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  const s = (P.s = cl(k[0], 0, 1));\n  const tempo = cl(k[1], 0.2, 3);\n  const nv = cl(round(k[2]), 1, 6);\n  const tr = (P.tr = cl(k[3], 0, 1));\n  const t = (P.t += d);\n  P.beat += (d * tempo) / 2;\n  while (P.beat >= P.cur.at + P.cur.dur) {\n    const at = P.cur.at + P.cur.dur;\n    P.cur = P.nx;\n    P.cur.at = at;\n    P.nx = chord(P);\n    passing(P.cur, P.nx);\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.fullT = 0;\n  P.fullT += d;\n  P.full = P.fullT \u003c 2.8 ? sm(0, 0.06, P.fullT) : 1 - sm(2.8, 3.6, P.fullT);\n\n  // Which pipes speak: each part's note, the octave above from the\n  // principals on, and with the reeds the octave below, the twelfth and the\n  // fifteenth.\n  const c = P.cur, pos = P.beat - c.at, r4 = 0.8 * sm(0.3, 0.55, s), r2 = 0.75 * sm(0.7, 0.92, s);\n  P.tgt.fill(0);\n  P.keys.fill(0);\n  if (!(c.last && pos > c.dur - 0.22))\n    for (let n = 0; n \u003c= nv; n++) {\n      const v = VORD[n], g = v \u003c 4 && c.pass[v] >= 0 && pos >= c.dur / 2 ? c.pass[v] : c.v[v];\n      if (g \u003c 0) continue;\n      P.tgt[g] = 1;\n      if (v !== 3) P.keys[g] = 1;\n      if (g + 7 \u003c NP) P.tgt[g + 7] = max(P.tgt[g + 7], r4);\n      if (g >= 7) P.tgt[g - 7] = max(P.tgt[g - 7], r2);\n      if (g + 11 \u003c NP) P.tgt[g + 11] = max(P.tgt[g + 11], r2);\n      if (g + 14 \u003c NP) P.tgt[g + 14] = max(P.tgt[g + 14], r2);\n    }\n  for (let i = 0; i \u003c NP; i++) {\n    const g = max(P.tgt[i], 0.9 * P.full);\n    if (g > 0.5 && P.on[i] \u003c 0.5) P.chiff[i] = 1;\n    P.on[i] = g;\n    P.amp[i] += (g - P.amp[i]) * (1 - exp(-d / (g > P.amp[i] ? 0.035 : 0.14)));\n    P.chiff[i] *= exp(-d / 0.18);\n  }\n  // Candles in the draught: as the tremulant shakes the wind they flicker\n  // harder and burn lower.\n  const fa = 0.05 + tr;\n  const fl = (ph) => 1 - 0.4 * fa + fa * (0.6 * sin(t * 7.1 + ph) + 0.45 * sin(t * 11.9 + 2 * ph) + 0.35 * sin(t * 4.3 + 3 * ph) * sin(t * 17.3));\n  P.fl = cl(fl(0), 0.1, 2);\n  P.fr = cl(fl(2.1), 0.1, 2);\n}\n\n// A stop's colour, u from the mouth (0) to the top (1).\nfunction stopCol(out, s, u, full) {\n  for (let n = 0; n \u003c 3; n++) {\n    const v = s \u003c 0.5 ? mix(FLUTE[n], PRIN[n], s * 2) : mix(PRIN[n], mix(REED0[n], REED1[n], min(1, u * 1.6)), s * 2 - 1);\n    out[n] = mix(v, FULL[n], full);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { A, F, day, cL, cR, lamp, t } = P;\n  // The case in daylight, candlelight and lamplight.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const dl = day[i], cn = cL[i] * P.fl + cR[i] * P.fr, lp = lamp[i];\n    for (let n = 0; n \u003c 3; n++) F[o + n] = A[o + n] * (DAY[n] * dl + CAN[n] * cn + LAMP[n] * lp);\n  }\n  // The rose window's light, cast long and slow across the case.\n  const px = 32 + 17 * sin(t * 0.05 + P.ph1), py = 60 + 34 * sin(t * 0.031 + P.ph2), RX = 15, RY = 24;\n  const I0 = 0.65 * (0.8 + 0.2 * sin(t * 0.23 + P.ph1));\n  for (let y = max(0, floor(py - RY)); y \u003c= min(H - 1, py + RY); y++)\n    for (let x = max(0, floor(px - RX)); x \u003c= min(W - 1, px + RX); x++) {\n      const dx = (x + 0.5 - px) / RX, dy = (y + 0.5 - py) / RY, r = sqrt(dx * dx + dy * dy);\n      if (r >= 1) continue;\n      const a = atan2(dy, dx) / (2 * PI) + 0.5;\n      let c, lead;\n      if (r \u003c 0.2) (c = AMBER), (lead = r > 0.15);\n      else if (r \u003c 0.5) {\n        const q = a * 8;\n        (c = floor(q) & 1 ? RUBY : SAPH), (lead = q - floor(q) \u003c 0.1 || r \u003c 0.24);\n      } else {\n        const q = a * 16;\n        (c = ROSE[floor(q) & 3]), (lead = q - floor(q) \u003c 0.08 || r \u003c 0.54);\n      }\n      const kk = I0 * (lead ? 0.45 : 1) * sm(1, 0.82, r), o = (y * W + x) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] += A[o + n] * c[n] * kk;\n    }\n  // The pipes that speak: the mouth lights and a standing wave shimmers up\n  // the body, its bands creeping upward and wavering with the tremulant.\n  const s = P.s, tr = P.tr, gain = 240 * (0.8 + 0.4 * s), bands = 2 + 4 * s, floor0 = 0.45 - 0.25 * s;\n  // Many pipes at once light the case less each, or the chord drowns in its own light.\n  let ns = 0;\n  for (let i = 0; i \u003c NP; i++) ns += P.amp[i];\n  const spread = (1 - 0.6 * P.full) / (1 + 0.12 * max(0, ns - 2));\n  const trem = sin(2 * PI * 5.4 * t), tm = 1 - 0.9 * tr * (0.5 + 0.5 * trem), wob = 0.3 * tr * trem;\n  const col = [0, 0, 0];\n  for (let i = 0; i \u003c NP; i++) {\n    const am = P.amp[i];\n    if (am \u003c 0.004) continue;\n    const { x, w, top, m, mh, base } = PIPES[i];\n    const a = am * gain * tm, span = m - top, osc = 0.7 + 0.3 * cos(t * (5 + 0.6 * i) + i * 1.7);\n    const bm = max(bands, 5 * P.full), creep = 0.3 * t + i * 0.37;\n    // Its light on the polished tin and the gilt round it.\n    stopCol(col, s, 0.4, P.full);\n    const kb = am * tm * (0.22 + 0.5 * s) * spread * 255;\n    for (let y = max(0, top - 10); y \u003c min(H, base + 6); y++) {\n      const ly = kb * (y \u003c top ? exp((y - top) / 4) : y > m ? exp((m - y) / 7) : 1);\n      for (let xx = max(0, x - 16); xx \u003c min(W, x + w + 16); xx++) {\n        const dd = xx \u003c x ? x - xx : xx >= x + w ? xx - x - w + 1 : 0, lb = ly / (1 + dd * dd * 0.05), o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += A[o + n] * col[n] * lb;\n      }\n    }\n    for (let y = top; y \u003c m; y++) {\n      const u = (m - 0.5 - y) / span;\n      const bv = abs(cos(PI * (bm * u - creep + wob))) ** 2.5 * osc;\n      const g = a * (0.75 + 0.25 * exp(-3 * u)) * (floor0 + (1 - floor0) * bv);\n      stopCol(col, s, u, P.full);\n      for (let j = -2; j \u003c w + 2; j++) {\n        const xx = x + j;\n        if (xx \u003c 0 || xx >= W) continue;\n        const cr = j \u003c 0 || j >= w ? (j === -1 || j === w ? 0.2 : 0.07) : 0.6 + 0.4 * sin((PI * (j + 0.5)) / w);\n        const o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += col[n] * g * cr;\n      }\n    }\n    // The mouth: hot in the slot, flaring as the pipe speaks, and a glow round it.\n    stopCol(col, s, 0, P.full);\n    const cx = x + w / 2, cy = m + mh / 2, hot = a * (0.8 + 1.1 * P.chiff[i]);\n    for (let y = m - 4; y \u003c= m + mh + 4; y++)\n      for (let xx = x - 3; xx \u003c x + w + 3; xx++) {\n        if (xx \u003c 0 || xx >= W) continue;\n        const e = ((xx + 0.5 - cx) / (w / 2 + 1.2)) ** 2 + ((y + 0.5 - cy) / 2.6) ** 2;\n        if (e > 3) continue;\n        const slot = y >= m && y \u003c m + mh && xx > x && xx \u003c x + w - 1;\n        const o = (y * W + xx) * 3, k = slot ? hot * 2 : hot * 0.5 * exp(-e * 1.3);\n        for (let n = 0; n \u003c 3; n++) F[o + n] += mix(col[n], 1, slot ? 0.7 : 0.2) * k;\n      }\n  }\n  // The candle flames, each with a halo in the air round it.\n  for (const [x, f] of [[10, P.fl], [53, P.fr]]) {\n    for (let y = 92; y \u003c= 100; y++)\n      for (let xx = x - 3; xx \u003c= x + 3; xx++) {\n        const e = (xx - x) ** 2 + ((y - 96.5) * 0.8) ** 2, o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += CAN[n] * 0.45 * f * exp(-e / 3);\n      }\n    for (const [y, c, k] of [[97, [255, 250, 225], 1], [96, [255, 236, 160], min(1, f)], [95, [255, 190, 80], cl(f, 0, 1)], [94, [255, 120, 30], cl(f - 0.8, 0, 1)]]) {\n      const o = (y * W + x) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] = max(F[o + n], c[n] * k);\n    }\n  }\n  // Keys held down on the manual.\n  for (let i = 0; i \u003c NP; i++)\n    if (P.keys[i] > 0)\n      for (let y = 121; y \u003c= 125; y++)\n        for (let x = 3 * (i + 1); x \u003c 3 * (i + 1) + 2; x++) {\n          const o = (y * W + x) * 3;\n          for (let n = 0; n \u003c 3; n++) F[o + n] *= y === 125 ? 0.35 : 0.6;\n        }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, knee(F[o]), knee(F[o + 1]), knee(F[o + 2]));\n}\n\n// Light past 180 rolls off towards 255, so a speaking pipe keeps its colour.\nfunction knee(v) {\n  return (v \u003c 180 ? v : 255 - 75 * exp(-(v - 180) / 75)) | 0;\n}\n","layer":{"id":"layer-pipe-organ","type":"code","name":"pipe-organ","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pipe Organ\n// Family:  music\n// Idea:    The tin front pipes of a church organ stand in towers and flats while an unseen organist plays a chorale, and each pipe that speaks lights at its mouth with a standing wave shimmering up its body, the bass in the tall pipes and the tune in the small ones, as light from a rose window drifts across the case.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the tower-and-flat fronts of North German Baroque organ cases and four-part chorale harmony\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Stops=0..1, Tempo=0.2..3, Voices=1..6, Tremulant=0..1\n//\n// Knob 1: Stops. The registration. Flutes at 0 glow soft blue in two broad bands; principals in the middle speak silver-white and add the octave above each note; the reeds at 1 burn gold at the mouth and red up the body in six bands, with the octave below, the twelfth and the fifteenth speaking too.\n// Knob 2: Tempo. At 2 a chord takes a second, so a phrase of eight with its held last chord takes about nine; at 0.2 a chord holds for ten seconds and at 3 for two thirds of one.\n// Knob 3: Voices. How many parts the hands play over the pedal: at 1 the tune alone over the bass, at 3 the four-part chorale, and 4 to 6 add parts that fill out the chord.\n// Knob 4: Tremulant. The wind shakes. The shimmer in the speaking pipes throbs and wavers, and the two candles on the case flicker and gutter until the light on the whole lower case flickers with them.\n// Buttons: K1 tap is full organ: every pipe in the front speaks at once for about three seconds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, sqrt, atan2, PI } = Math;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Pipe d sounds the d-th note of a major scale up from the longest pipe, and\n// an open pipe halves its length each octave.\nconst STEP = [0, 2, 4, 5, 7, 9, 11];\nconst len = (d) => 92 * 2 ** (-(12 * floor(d / 7) + STEP[d % 7]) / 12);\n// The front: the lowest note in the middle of the centre tower, then pairs,\n// the lower note left and the next one right, as the C and C sharp chests of\n// a real case split a scale between the two sides.\nconst PIPES = [];\nfunction pair(d, x, w, top, mouth, base) {\n  const L = d ? (len(d) + len(d + 1)) / 2 : len(0);\n  const t = round(top >= 0 ? top : mouth - L);\n  const m = round(top >= 0 ? top + L : mouth);\n  const mh = w >= 5 ? 2 : 1;\n  PIPES[d] = { x, w, top: t, m, mh, f0: m + mh + 1, base };\n  if (d) PIPES[d + 1] = { x: W - x - w, w, top: t, m, mh, f0: m + mh + 1, base };\n}\n// The centre tower and the side towers hang from their crowns, so their\n// mouths step; the flats stand on equal feet, so their tops ramp.\npair(0, 29, 6, 9, 0, 110);\npair(1, 23, 5, 12, 0, 110);\npair(3, 1, 4, 30, 0, 110);\npair(5, 6, 4, 38, 0, 110);\npair(7, 19, 3, -1, 102, 110);\npair(9, 15, 3, -1, 102, 110);\npair(11, 11, 3, -1, 102, 110);\npair(13, 19, 3, -1, 44, 50);\npair(15, 15, 3, -1, 44, 50);\npair(17, 11, 3, -1, 44, 50);\nconst NP = 19;\n\n// Eight-chord phrases on the scale's chords, I = 0 to vi = 5. The first one\n// always opens the piece.\nconst PHRASES = [\n  [0, 4, 5, 3, 0, 1, 4, 0],\n  [0, 5, 1, 4, 0, 3, 4, 0],\n  [5, 3, 0, 4, 5, 1, 4, 4],\n  [0, 3, 0, 4, 5, 1, 4, 0],\n  [3, 4, 0, 5, 1, 0, 4, 0],\n  [0, 2, 5, 3, 1, 4, 4, 0],\n];\n// Voices in the order the knob adds them: soprano, bass, alto, tenor, then\n// three that fill the chord.\nconst VORD = [0, 3, 1, 2, 4, 5, 6];\n\n// Surfaces, as how much of each light they give back.\nconst TIN = [0.9, 0.95, 1];\nconst WOOD = [0.42, 0.25, 0.15];\nconst GILT = [1.3, 1, 0.42];\nconst DARK = [0.07, 0.05, 0.045];\nconst STONE = [0.9, 0.88, 0.84];\n// Grey daylight from the nave, the candles, and the lamp on the music desk.\nconst DAY = [56, 56, 64];\nconst CAN = [200, 126, 58];\nconst LAMP = [255, 210, 140];\n// The rose window's glass.\nconst RUBY = [230, 40, 60];\nconst SAPH = [50, 90, 255];\nconst AMBER = [255, 200, 80];\nconst GREEN = [60, 200, 110];\nconst ROSE = [RUBY, SAPH, GREEN, SAPH];\n// Stop colours: flute, principal, reed at the mouth and up the body, full organ.\nconst FLUTE = [0.35, 0.62, 1];\nconst PRIN = [0.84, 0.9, 1];\nconst REED0 = [1, 0.77, 0.27];\nconst REED1 = [1, 0.2, 0.08];\nconst FULL = [1, 0.86, 0.58];\n\n// Round tin: a highlight a third of the way across and a dark far edge.\nfunction shade(p) {\n  return (0.2 + 0.5 * sin(PI * p) ** 0.7 + 0.55 * exp(-(((p - 0.36) / 0.14) ** 2))) * (1.1 - 0.4 * p);\n}\n\n// Carved and gilt pipe shades: pierced scrolls.\nfunction fret(x, y) {\n  return sin(x * 1.25 + 2 * sin(y * 0.52)) * sin(y * 0.9 + 1.6 * sin(x * 0.61));\n}\n\nfunction build(P) {\n  const A = P.A;\n  const put = (x, y, c, k = 1, a = 1) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || a \u003c= 0) return;\n    const o = (y * W + x) * 3;\n    for (let n = 0; n \u003c 3; n++) A[o + n] = mix(A[o + n], c[n] * k, a);\n  };\n  // Left half and its mirror.\n  const two = (x, y, c, k, a) => (put(x, y, c, k, a), put(W - 1 - x, y, c, k, a));\n  const row = (x0, x1, y, c, k) => {\n    for (let x = x0; x \u003c= x1; x++) two(x, y, c, k);\n  };\n  // The church wall: courses of ashlar.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const cs = floor(y / 5), off = (cs & 1) * 4, mortar = y % 5 === 4 || (x + off) % 8 === 7;\n      put(x, y, STONE, mortar ? 0.14 : 0.27 + 0.1 * hash(floor((x + off) / 8), cs));\n    }\n  // The case, dark inside.\n  for (let y = 0; y \u003c 114; y++) for (let x = 0; x \u003c 32; x++) if (x > 21 || (x > 9 ? y >= 11 : y >= 22)) two(x, y, DARK, 1);\n  // Stiles between the towers and the flats.\n  for (const [x, y0] of [[0, 30], [10, 16], [22, 9]]) for (let y = y0; y \u003c 110; y++) two(x, y, WOOD, 1.05 + 0.15 * sin(y * 0.8) * (y % 12 \u003c 2 ? 1 : 0));\n  // The side towers' crowns, each with a gilt urn and a flame on top.\n  row(0, 10, 29, GILT, 0.9);\n  for (let y = 26; y \u003c= 28; y++) row(0, 10, y, WOOD, 0.9);\n  for (const x of [2, 5, 8]) two(x, 27, GILT, 1.05);\n  row(0, 10, 25, GILT, 1.05);\n  row(0, 10, 24, WOOD, 0.7);\n  row(0, 10, 23, WOOD, 1);\n  row(0, 10, 22, GILT, 1.15);\n  const URN = [[21, 2], [20, 1], [19, 2], [18, 2], [17, 1], [16, 0], [15, 1], [14, 0]];\n  for (const [y, r] of URN) for (let x = 5 - r; x \u003c= 5 + r; x++) two(x, y, GILT, 1.15 - 0.18 * (x - 5 + r));\n  // The upper flats' cornice and a scroll pediment.\n  row(10, 22, 15, GILT, 0.9);\n  for (let y = 12; y \u003c= 14; y++) for (let x = 10; x \u003c= 22; x++) two(x, y, WOOD, y === 13 && x % 2 ? 1.25 : 0.9);\n  row(10, 22, 11, GILT, 1.1);\n  row(12, 20, 10, GILT, 0.75);\n  for (const [x, y] of [[12, 9], [13, 9], [19, 9], [20, 9], [14, 8], [15, 8], [17, 8], [18, 8], [16, 7], [16, 6]]) two(x, y, GILT, 1.05);\n  // The centre tower's crown, with a carved crest over it.\n  row(22, 31, 8, GILT, 0.95);\n  for (let y = 5; y \u003c= 7; y++) for (let x = 22; x \u003c= 31; x++) two(x, y, x % 4 === 1 && y === 6 ? GILT : WOOD, x % 4 === 1 && y === 6 ? 1.1 : 0.9);\n  row(22, 31, 4, GILT, 1.1);\n  for (let x = 23; x \u003c= 31; x++) {\n    const h = 4 * (1 - ((x - 31.5) / 9) ** 2);\n    for (let y = floor(4 - h); y \u003c 4; y++) if (fret(x, y + 3) > -0.2 || x === 31) two(x, y, GILT, x === 31 ? 1.25 : 0.8 + 0.3 * fret(x, y));\n  }\n  // Pipe shades over every pipe that stops short of the carving above it.\n  const GAP = [5, 14, 18, 28, 35, 45, 49, 58];\n  for (const q of PIPES) {\n    const y0 = q.base === 50 ? 16 : q.x === 1 || q.x === 6 || q.x > 53 ? 30 : q.x > 22 && q.x \u003c 41 ? 9 : 54;\n    for (let x = q.x - 1; x \u003c= q.x + q.w; x++) {\n      const own = x >= q.x && x \u003c q.x + q.w;\n      if (own || GAP.indexOf(x) >= 0)\n        for (let y = y0; y \u003c q.top; y++) {\n          const v = fret(x, y);\n          if (own && y === q.top - 1) put(x, y, GILT, 1.05);\n          else if (v > -0.1) put(x, y, GILT, 0.55 + 0.5 * v);\n        }\n    }\n  }\n  // Under the lower flats the pipe shades of the upper ones, and the shelf they stand on.\n  row(10, 22, 50, GILT, 0.95);\n  row(10, 22, 51, WOOD, 1);\n  row(10, 22, 52, WOOD, 0.9);\n  row(10, 22, 53, WOOD, 0.55);\n  // The pipes: body, mouth with its lips, and the conical foot.\n  for (const q of PIPES) {\n    const { x, w, top, m, mh, f0, base } = q;\n    for (let y = top; y \u003c m; y++) for (let j = 0; j \u003c w; j++) put(x + j, y, TIN, shade((j + 0.5) / w) * (y === top ? 0.7 : 1));\n    for (let j = 0; j \u003c w; j++) {\n      const inner = j > 0 && j \u003c w - 1, s = shade((j + 0.5) / w);\n      if (inner) put(x + j, m - 1, TIN, s * 1.3);\n      for (let y = m; y \u003c m + mh; y++) put(x + j, y, inner ? DARK : TIN, inner ? 0.8 : s);\n      put(x + j, m + mh, TIN, s * (inner ? 1.15 : 0.9));\n    }\n    if (w >= 5) for (let j = floor((w - 1) / 2); j \u003c= floor(w / 2); j++) put(x + j, m - 2, TIN, 1.25);\n    const cx = x + w / 2;\n    for (let y = f0; y \u003c base; y++) {\n      const hw = mix(w / 2, 0.7, (y - f0) / max(1, base - 1 - f0));\n      for (let xx = floor(cx - hw); xx \u003c= cx + hw; xx++) {\n        const cov = cl(hw - abs(xx + 0.5 - cx) + 0.5, 0, 1);\n        put(xx, y, TIN, 0.9 * shade(cl((xx + 0.5 - cx + hw) / (2 * hw), 0, 1)), cov);\n      }\n    }\n  }\n  // The impost the pipes stand on.\n  for (let x = 0; x \u003c W; x++) {\n    put(x, 110, GILT, 1);\n    put(x, 111, WOOD, x % 16 === 0 ? 0.6 : 1);\n    put(x, 112, WOOD, x % 16 === 0 ? 0.6 : 0.95);\n    put(x, 113, WOOD, 0.5);\n  }\n  // Candles on the stiles between the side towers and the flats.\n  for (let y = 98; y \u003c= 101; y++) two(10, y, [0.95, 0.9, 0.8], 0.5);\n  for (let x = 9; x \u003c= 11; x++) two(x, 102, GILT, 0.6);\n  // The console: the music desk with its lamp, and one manual.\n  for (let y = 114; y \u003c H; y++) for (let x = 0; x \u003c W; x++) put(x, y, WOOD, 0.7);\n  for (let y = 114; y \u003c= 119; y++) for (let x = 16; x \u003c= 47; x++) put(x, y, WOOD, 0.85);\n  for (let y = 115; y \u003c= 119; y++)\n    for (let x = 21; x \u003c= 42; x++) put(x, y, [0.95, 0.9, 0.76], y === 116 || y === 118 ? 0.62 : hash(x, y) \u003c 0.13 ? 0.3 : 1);\n  for (let x = 27; x \u003c= 36; x++) put(x, 114, GILT, 1.15);\n  for (let k = 0; k \u003c 21; k++) {\n    for (let y = 121; y \u003c= 125; y++) for (let x = 3 * k; x \u003c 3 * k + 2; x++) put(x, y, [0.92, 0.88, 0.78], y === 125 ? 0.7 : 1);\n    const n = (k + 6) % 7;\n    if (k \u003c 20 && n !== 2 && n !== 6) for (let y = 121; y \u003c= 123; y++) put(3 * k + 2, y, DARK, 1), put(3 * k + 3, y, DARK, 1);\n  }\n  // Light: grey daylight from above, warm candlelight, the desk lamp.\n  for (let i = 0; i \u003c N; i++) {\n    const x = (i & 63) + 0.5, y = (i >> 6) + 0.5;\n    P.day[i] = 0.45 + 0.55 * (1 - y / H) ** 1.3;\n    P.cL[i] = 0.85 / (1 + ((x - 10.5) ** 2 + (y - 96) ** 2) / 450);\n    P.cR[i] = 0.85 / (1 + ((x - 53.5) ** 2 + (y - 96) ** 2) / 450);\n    P.lamp[i] = y > 115 ? 1.1 / (1 + (x - 32) ** 2 / 90 + (y - 115) ** 2 / 40) : 0.45 / (1 + ((x - 32) ** 2 + (y - 114) ** 2) / 140);\n  }\n}\n\n// The nearest scale degree in lo..hi under cap whose note is in pcs, moving\n// from prev, sitting still costing `same`.\nfunction near(lo, hi, pcs, prev, same, cap) {\n  let best = -1;\n  let bs = 1e9;\n  for (let d = lo; d \u003c= hi; d++) {\n    if (d >= cap || pcs.indexOf(d % 7) \u003c 0) continue;\n    const j = abs(d - prev), s = j + (j === 0 ? same : 0) + (j > 4 ? 2 : 0) + rnd() * 0.9;\n    if (s \u003c bs) (bs = s), (best = d);\n  }\n  return best \u003c 0 ? (cap \u003c 99 ? near(lo, hi, pcs, prev, same, 99) : prev) : best;\n}\n\n// The next chord of the chorale, voiced from the last one.\nfunction chord(P) {\n  if (P.pi >= P.ph.length) (P.ph = PHRASES[floor(rnd() * PHRASES.length)]), (P.pi = 0);\n  const r = P.ph[P.pi++], last = P.pi === P.ph.length, pen = P.pi === P.ph.length - 1;\n  const T = [r, (r + 2) % 7, (r + 4) % 7];\n  if (pen && r === 4 && rnd() \u003c 0.6) T.push(3);\n  const [s0, a0, t0, b0] = P.prev;\n  const B = near(0, 7, [!last && !pen && rnd() \u003c 0.3 ? T[1] : r], b0, 0, 99);\n  const S = near(11, 18, last && r === 0 ? [0] : T, s0, 1.6, 99);\n  const A = near(8, 14, T, a0, 0.4, S);\n  const miss = T.filter((c) => c !== S % 7 && c !== A % 7 && c !== B % 7);\n  const Tn = near(4, 11, miss.length ? miss : T, t0, 0.4, A);\n  const v = [S, A, Tn, B];\n  // Three more parts fill the chord: the bass an octave up, one in the middle, one high.\n  for (const goal of [B + 7, 10, 16]) {\n    let best = -1;\n    let bs = 1e9;\n    for (let d = 0; d \u003c NP; d++) {\n      const s = abs(d - goal) + rnd() * 0.5;\n      if (T.indexOf(d % 7) >= 0 && v.indexOf(d) \u003c 0 && s \u003c bs) (bs = s), (best = d);\n    }\n    v.push(best);\n  }\n  P.prev = v;\n  return { v, dur: last ? 2 : 1, last, pass: [-1, -1, -1, -1], at: 0 };\n}\n\n// A part moving a third walks through the note between on the half beat.\nfunction passing(c, nx) {\n  if (c.last) return;\n  for (let k = 0; k \u003c 4; k++) if (abs(nx.v[k] - c.v[k]) === 2 && rnd() \u003c (k ? 0.4 : 0.6)) c.pass[k] = (c.v[k] + nx.v[k]) / 2;\n}\n\nexport function setup(params) {\n  const F32 = (n) => new Float32Array(n);\n  const P = (params.s = {\n    A: F32(N * 3), F: F32(N * 3), day: F32(N), cL: F32(N), cR: F32(N), lamp: F32(N),\n    amp: F32(NP), tgt: F32(NP), on: F32(NP), chiff: F32(NP), keys: F32(NP),\n    t: 0, beat: 0, fullT: 99, full: 0, fl: 1, fr: 1, s: 0, tr: 0,\n    ph1: rnd() * 6.28, ph2: rnd() * 6.28, ph: PHRASES[0], pi: 0, prev: [14, 11, 7, 0, 7, 9, 16],\n  });\n  build(P);\n  P.cur = chord(P);\n  P.nx = chord(P);\n  passing(P.cur, P.nx);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  const d = cl(dt || 0, 0, 0.1);\n  const s = (P.s = cl(k[0], 0, 1));\n  const tempo = cl(k[1], 0.2, 3);\n  const nv = cl(round(k[2]), 1, 6);\n  const tr = (P.tr = cl(k[3], 0, 1));\n  const t = (P.t += d);\n  P.beat += (d * tempo) / 2;\n  while (P.beat >= P.cur.at + P.cur.dur) {\n    const at = P.cur.at + P.cur.dur;\n    P.cur = P.nx;\n    P.cur.at = at;\n    P.nx = chord(P);\n    passing(P.cur, P.nx);\n  }\n  if (input.btnPressed && input.btnPressed[0]) P.fullT = 0;\n  P.fullT += d;\n  P.full = P.fullT \u003c 2.8 ? sm(0, 0.06, P.fullT) : 1 - sm(2.8, 3.6, P.fullT);\n\n  // Which pipes speak: each part's note, the octave above from the\n  // principals on, and with the reeds the octave below, the twelfth and the\n  // fifteenth.\n  const c = P.cur, pos = P.beat - c.at, r4 = 0.8 * sm(0.3, 0.55, s), r2 = 0.75 * sm(0.7, 0.92, s);\n  P.tgt.fill(0);\n  P.keys.fill(0);\n  if (!(c.last && pos > c.dur - 0.22))\n    for (let n = 0; n \u003c= nv; n++) {\n      const v = VORD[n], g = v \u003c 4 && c.pass[v] >= 0 && pos >= c.dur / 2 ? c.pass[v] : c.v[v];\n      if (g \u003c 0) continue;\n      P.tgt[g] = 1;\n      if (v !== 3) P.keys[g] = 1;\n      if (g + 7 \u003c NP) P.tgt[g + 7] = max(P.tgt[g + 7], r4);\n      if (g >= 7) P.tgt[g - 7] = max(P.tgt[g - 7], r2);\n      if (g + 11 \u003c NP) P.tgt[g + 11] = max(P.tgt[g + 11], r2);\n      if (g + 14 \u003c NP) P.tgt[g + 14] = max(P.tgt[g + 14], r2);\n    }\n  for (let i = 0; i \u003c NP; i++) {\n    const g = max(P.tgt[i], 0.9 * P.full);\n    if (g > 0.5 && P.on[i] \u003c 0.5) P.chiff[i] = 1;\n    P.on[i] = g;\n    P.amp[i] += (g - P.amp[i]) * (1 - exp(-d / (g > P.amp[i] ? 0.035 : 0.14)));\n    P.chiff[i] *= exp(-d / 0.18);\n  }\n  // Candles in the draught: as the tremulant shakes the wind they flicker\n  // harder and burn lower.\n  const fa = 0.05 + tr;\n  const fl = (ph) => 1 - 0.4 * fa + fa * (0.6 * sin(t * 7.1 + ph) + 0.45 * sin(t * 11.9 + 2 * ph) + 0.35 * sin(t * 4.3 + 3 * ph) * sin(t * 17.3));\n  P.fl = cl(fl(0), 0.1, 2);\n  P.fr = cl(fl(2.1), 0.1, 2);\n}\n\n// A stop's colour, u from the mouth (0) to the top (1).\nfunction stopCol(out, s, u, full) {\n  for (let n = 0; n \u003c 3; n++) {\n    const v = s \u003c 0.5 ? mix(FLUTE[n], PRIN[n], s * 2) : mix(PRIN[n], mix(REED0[n], REED1[n], min(1, u * 1.6)), s * 2 - 1);\n    out[n] = mix(v, FULL[n], full);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P) return;\n  const { A, F, day, cL, cR, lamp, t } = P;\n  // The case in daylight, candlelight and lamplight.\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) {\n    const dl = day[i], cn = cL[i] * P.fl + cR[i] * P.fr, lp = lamp[i];\n    for (let n = 0; n \u003c 3; n++) F[o + n] = A[o + n] * (DAY[n] * dl + CAN[n] * cn + LAMP[n] * lp);\n  }\n  // The rose window's light, cast long and slow across the case.\n  const px = 32 + 17 * sin(t * 0.05 + P.ph1), py = 60 + 34 * sin(t * 0.031 + P.ph2), RX = 15, RY = 24;\n  const I0 = 0.65 * (0.8 + 0.2 * sin(t * 0.23 + P.ph1));\n  for (let y = max(0, floor(py - RY)); y \u003c= min(H - 1, py + RY); y++)\n    for (let x = max(0, floor(px - RX)); x \u003c= min(W - 1, px + RX); x++) {\n      const dx = (x + 0.5 - px) / RX, dy = (y + 0.5 - py) / RY, r = sqrt(dx * dx + dy * dy);\n      if (r >= 1) continue;\n      const a = atan2(dy, dx) / (2 * PI) + 0.5;\n      let c, lead;\n      if (r \u003c 0.2) (c = AMBER), (lead = r > 0.15);\n      else if (r \u003c 0.5) {\n        const q = a * 8;\n        (c = floor(q) & 1 ? RUBY : SAPH), (lead = q - floor(q) \u003c 0.1 || r \u003c 0.24);\n      } else {\n        const q = a * 16;\n        (c = ROSE[floor(q) & 3]), (lead = q - floor(q) \u003c 0.08 || r \u003c 0.54);\n      }\n      const kk = I0 * (lead ? 0.45 : 1) * sm(1, 0.82, r), o = (y * W + x) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] += A[o + n] * c[n] * kk;\n    }\n  // The pipes that speak: the mouth lights and a standing wave shimmers up\n  // the body, its bands creeping upward and wavering with the tremulant.\n  const s = P.s, tr = P.tr, gain = 240 * (0.8 + 0.4 * s), bands = 2 + 4 * s, floor0 = 0.45 - 0.25 * s;\n  // Many pipes at once light the case less each, or the chord drowns in its own light.\n  let ns = 0;\n  for (let i = 0; i \u003c NP; i++) ns += P.amp[i];\n  const spread = (1 - 0.6 * P.full) / (1 + 0.12 * max(0, ns - 2));\n  const trem = sin(2 * PI * 5.4 * t), tm = 1 - 0.9 * tr * (0.5 + 0.5 * trem), wob = 0.3 * tr * trem;\n  const col = [0, 0, 0];\n  for (let i = 0; i \u003c NP; i++) {\n    const am = P.amp[i];\n    if (am \u003c 0.004) continue;\n    const { x, w, top, m, mh, base } = PIPES[i];\n    const a = am * gain * tm, span = m - top, osc = 0.7 + 0.3 * cos(t * (5 + 0.6 * i) + i * 1.7);\n    const bm = max(bands, 5 * P.full), creep = 0.3 * t + i * 0.37;\n    // Its light on the polished tin and the gilt round it.\n    stopCol(col, s, 0.4, P.full);\n    const kb = am * tm * (0.22 + 0.5 * s) * spread * 255;\n    for (let y = max(0, top - 10); y \u003c min(H, base + 6); y++) {\n      const ly = kb * (y \u003c top ? exp((y - top) / 4) : y > m ? exp((m - y) / 7) : 1);\n      for (let xx = max(0, x - 16); xx \u003c min(W, x + w + 16); xx++) {\n        const dd = xx \u003c x ? x - xx : xx >= x + w ? xx - x - w + 1 : 0, lb = ly / (1 + dd * dd * 0.05), o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += A[o + n] * col[n] * lb;\n      }\n    }\n    for (let y = top; y \u003c m; y++) {\n      const u = (m - 0.5 - y) / span;\n      const bv = abs(cos(PI * (bm * u - creep + wob))) ** 2.5 * osc;\n      const g = a * (0.75 + 0.25 * exp(-3 * u)) * (floor0 + (1 - floor0) * bv);\n      stopCol(col, s, u, P.full);\n      for (let j = -2; j \u003c w + 2; j++) {\n        const xx = x + j;\n        if (xx \u003c 0 || xx >= W) continue;\n        const cr = j \u003c 0 || j >= w ? (j === -1 || j === w ? 0.2 : 0.07) : 0.6 + 0.4 * sin((PI * (j + 0.5)) / w);\n        const o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += col[n] * g * cr;\n      }\n    }\n    // The mouth: hot in the slot, flaring as the pipe speaks, and a glow round it.\n    stopCol(col, s, 0, P.full);\n    const cx = x + w / 2, cy = m + mh / 2, hot = a * (0.8 + 1.1 * P.chiff[i]);\n    for (let y = m - 4; y \u003c= m + mh + 4; y++)\n      for (let xx = x - 3; xx \u003c x + w + 3; xx++) {\n        if (xx \u003c 0 || xx >= W) continue;\n        const e = ((xx + 0.5 - cx) / (w / 2 + 1.2)) ** 2 + ((y + 0.5 - cy) / 2.6) ** 2;\n        if (e > 3) continue;\n        const slot = y >= m && y \u003c m + mh && xx > x && xx \u003c x + w - 1;\n        const o = (y * W + xx) * 3, k = slot ? hot * 2 : hot * 0.5 * exp(-e * 1.3);\n        for (let n = 0; n \u003c 3; n++) F[o + n] += mix(col[n], 1, slot ? 0.7 : 0.2) * k;\n      }\n  }\n  // The candle flames, each with a halo in the air round it.\n  for (const [x, f] of [[10, P.fl], [53, P.fr]]) {\n    for (let y = 92; y \u003c= 100; y++)\n      for (let xx = x - 3; xx \u003c= x + 3; xx++) {\n        const e = (xx - x) ** 2 + ((y - 96.5) * 0.8) ** 2, o = (y * W + xx) * 3;\n        for (let n = 0; n \u003c 3; n++) F[o + n] += CAN[n] * 0.45 * f * exp(-e / 3);\n      }\n    for (const [y, c, k] of [[97, [255, 250, 225], 1], [96, [255, 236, 160], min(1, f)], [95, [255, 190, 80], cl(f, 0, 1)], [94, [255, 120, 30], cl(f - 0.8, 0, 1)]]) {\n      const o = (y * W + x) * 3;\n      for (let n = 0; n \u003c 3; n++) F[o + n] = max(F[o + n], c[n] * k);\n    }\n  }\n  // Keys held down on the manual.\n  for (let i = 0; i \u003c NP; i++)\n    if (P.keys[i] > 0)\n      for (let y = 121; y \u003c= 125; y++)\n        for (let x = 3 * (i + 1); x \u003c 3 * (i + 1) + 2; x++) {\n          const o = (y * W + x) * 3;\n          for (let n = 0; n \u003c 3; n++) F[o + n] *= y === 125 ? 0.35 : 0.6;\n        }\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, knee(F[o]), knee(F[o + 1]), knee(F[o + 2]));\n}\n\n// Light past 180 rolls off towards 255, so a speaking pipe keeps its colour.\nfunction knee(v) {\n  return (v \u003c 180 ? v : 255 - 75 * exp(-(v - 180) / 75)) | 0;\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Stops=0..1, Tempo=0.2..3, Voices=1..6, Tremulant=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Stops","min":0,"max":1,"about":"The registration. Flutes at 0 glow soft blue in two broad bands; principals in the middle speak silver-white and add the octave above each note; the reeds at 1 burn gold at the mouth and red up the body in six bands, with the octave below, the twelfth and the fifteenth speaking too."},{"name":"Tempo","min":0.2,"max":3,"about":"At 2 a chord takes a second, so a phrase of eight with its held last chord takes about nine; at 0.2 a chord holds for ten seconds and at 3 for two thirds of one."},{"name":"Voices","min":1,"max":6,"about":"How many parts the hands play over the pedal: at 1 the tune alone over the bass, at 3 the four-part chorale, and 4 to 6 add parts that fill out the chord."},{"name":"Tremulant","min":0,"max":1,"about":"The wind shakes. The shimmer in the speaking pipes throbs and wavers, and the two candles on the case flicker and gutter until the light on the whole lower case flickers with them."}],"start":[0,2,1,0.06],"measures":{"motion":0.1017,"detail":0.1071,"edges":0.5078,"complexity":2.0828,"coverage":0.7769,"colour":0.1713,"drift":0.0578},"knobResponse":[0.0627,0.0467,0.0469,0.0424]},{"slug":"plait","title":"Plait","family":"textile","round":15,"note":"세 가닥이 바깥 가닥부터 가운데 위로 넘어가며 땋여 내려가요. 밑으로 들어가는 가닥은 어둡고, 다 땋으면 리본을 묶고 다음 가닥이 내려와요. K3 이 일곱 가닥 납작 땋기까지 가요.","idea":"Coloured strands hang from a clip and are plaited down the panel, the outside strand crossing over to the middle each time, until the plait is tied off with a ribbon and lowered away, and the next clip of loose strands comes down.","buttons":"K1 tap ties the plait off with a ribbon where it has got to, long tails and all; it is lowered away and a new one starts.","code":"// ===== Patternflow pattern =====\n// Title:   Plait\n// Family:  textile\n// Idea:    Coloured strands hang from a clip and are plaited down the panel, the outside strand crossing over to the middle each time, until the plait is tied off with a ribbon and lowered away, and the next clip of loose strands comes down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 13\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Strands=3..7, Tension=0..1\n//\n// Knob 1: Hue. Turns the strands' colours together, starting from teal, blue and magenta.\n// Knob 2: Speed. How fast the hands work: at 2 the plait grows by 1.2 rows of crossings a second, at 3 by nearly two, at 0.2 by one every eight seconds.\n// Knob 3: Strands. 3 is the plait everyone knows; 4 to 7 make a flat braid, each outside strand weaving over and under all the way to the far edge.\n// Knob 4: Tension. At 0 the plait is loose and fat, 54 LEDs across with three strands crossing every 17 rows; at 1 it is pulled tight to 34 LEDs, crossing every 6 or 7.\n// Buttons: K1 tap ties the plait off with a ribbon where it has got to, long tails and all; it is lowered away and a new one starts.\n\nconst W = 64;\nconst H = 128;\nconst MAXN = 7;\n// The clip holds the strands at rows 1..6; the plait starts under it.\nconst CLIP = 7;\n// The plait is tied once its point gets this far down.\nconst TIE_AT = 100;\n// Seconds a tied plait hangs, and the seconds it takes to lower it away.\nconst HANG = 1.6;\nconst LOWER = 1.4;\n// Crossings a second at Speed 1.\nconst RATE = 0.6;\n// A tied plait is pinched to this share of its width at the ribbon.\nconst GATHER = 0.4;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// A strand's lane on a cycle of 2N steps: it walks one lane a step from the\n// left edge to the right, waits a step there, walks back and waits again.\n// Spaced two steps apart, N strands always fill the N lanes, and between two\n// whole steps a strand walking right swaps lanes with one walking left.\nfunction laneAt(q, n) {\n  if (q \u003c= n - 1) return q;\n  if (q \u003c= n) return n - 1;\n  if (q \u003c= 2 * n - 1) return 2 * n - 1 - q;\n  return 0;\n}\n\n// The integral of laneAt, so the lane can be averaged over one step and the\n// strand turns round at the edges instead of folding.\nfunction laneInt(q, n) {\n  const c = 2 * n;\n  const m = n - 1;\n  const total = m * m + m;\n  const k = Math.floor(q / c);\n  const r = q - k * c;\n  let f;\n  if (r \u003c= m) f = (r * r) / 2;\n  else if (r \u003c= n) f = (m * m) / 2 + m * (r - m);\n  else if (r \u003c= 2 * n - 1) f = (m * m) / 2 + m + (2 * n - 1) * (r - n) - (r * r - n * n) / 2;\n  else f = total;\n  return k * total + f;\n}\n\n// Lane, its slope in lanes per step, and depth for strand k at step t.\n// Crossings fall on half steps. At a crossing after an even step the strand\n// walking right is on top, after an odd step the one walking left, so every\n// strand goes over, under, over, and for three strands the outside strand\n// always crosses over the middle one.\nfunction strandAt(k, t, n, out) {\n  const c = 2 * n;\n  const q = 2 * k + t;\n  out[0] = laneInt(q + 0.5, n) - laneInt(q - 0.5, n);\n  const qa = (((q + 0.5) % c) + c) % c;\n  const qb = (((q - 0.5) % c) + c) % c;\n  out[1] = laneAt(qa, n) - laneAt(qb, n);\n  const r = ((q % c) + c) % c;\n  const wave = Math.cos(Math.PI * (t - 0.5));\n  out[2] = r \u003c n - 1 ? wave : r >= n && r \u003c 2 * n - 1 ? -wave : 0;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.phase = 0; // 0 plaiting, 1 tied and hanging, 2 lowered away\n  params.timer = 0;\n  params.tiedT = 0;\n  params.started = false;\n  params.n = 3;\n  params.hue = 0;\n  params.speed = 2;\n  params.tension = 0.06;\n  // Each strand's centre row by row: x, depth, the nudge from a row to the\n  // nearest point (slope / (1 + slope^2)) and radius, radius 0 where the strand\n  // is absent; lo..hi is the span of LEDs it can reach in that row.\n  params.cx = new Float32Array(MAXN * H);\n  params.cz = new Float32Array(MAXN * H);\n  params.cs = new Float32Array(MAXN * H);\n  params.cr = new Float32Array(MAXN * H);\n  params.lo = new Float32Array(MAXN * H);\n  params.hi = new Float32Array(MAXN * H);\n  params.dist = new Float32Array(MAXN);\n  params.surf = new Float32Array(MAXN);\n  params.col = new Float32Array(MAXN * 3 + 3);\n  params.tmp = new Float32Array(3);\n  params.img = new Float32Array(W * H * 3);\n  params.out = new Float32Array(W * H * 3);\n  // The tied plait and the next one, drawn once each while one replaces the other.\n  params.old = new Float32Array(W * H * 3);\n  params.next = new Float32Array(W * H * 3);\n  params.valid = 0;\n  params.cn = -1;\n  params.zbuf = new Float32Array(W * H);\n}\n\n// The plait's shape for the current knobs.\nfunction geometry(params) {\n  const n = params.n;\n  const tension = params.tension;\n  // Half the plait's width, from 27 LEDs loose to 17 tight.\n  const half = 27 - 10 * tension;\n  const lane = (2 * half) / (n - 1 + 1.4);\n  return {\n    n: n,\n    lane: lane,\n    radius: lane * 0.7,\n    step: lane * (1.1 - 0.45 * tension),\n    spread: (W - 4 - 1.4 * lane * 0.7) / (n - 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.speed = Math.max(0.05, k[1]);\n  params.n = Math.max(3, Math.min(MAXN, Math.round(k[2])));\n  params.tension = Math.max(0, Math.min(1, k[3]));\n  const g = geometry(params);\n  if (!params.started) {\n    params.started = true;\n    // Start part way down, so the first frame already shows a plait.\n    params.t = (44 - CLIP) / g.step;\n  }\n  if (input.btnPressed && input.btnPressed[0] && params.phase === 0) {\n    params.phase = 1;\n    params.timer = 0;\n  }\n  if (params.phase === 0) {\n    params.t += dt * params.speed * RATE;\n    if (CLIP + params.t * g.step >= TIE_AT) {\n      params.phase = 1;\n      params.timer = 0;\n    }\n  } else if (params.phase === 1) {\n    params.timer += dt;\n    if (params.timer > HANG) {\n      params.phase = 2;\n      params.timer = 0;\n      params.tiedT = params.t;\n      params.t = 0;\n    }\n  } else {\n    params.timer += dt;\n    if (params.timer > LOWER) {\n      params.phase = 0;\n      params.timer = 0;\n    }\n  }\n}\n\n// Lay out each strand's centre line, row by row, for a plait whose point is at\n// step tp, its clip shifted down by off rows; tied (0..1) is how far the\n// ribbon has pulled its end in.\nfunction layout(params, g, tp, off, tied) {\n  const n = g.n;\n  const mid = W / 2;\n  const tmp = params.tmp;\n  const cx = params.cx;\n  const cz = params.cz;\n  const cs = params.cs;\n  const cr = params.cr;\n  const depth = g.radius * 0.9;\n  const yp = CLIP + tp * g.step;\n  // The tails get shorter as the plait uses up the strands.\n  const prog = Math.min(1, (yp - CLIP) / (TIE_AT - CLIP));\n  const tailEnd = yp + (H - 1 - CLIP) * (1 - prog) + (20 - 4 * tied) * prog;\n  const reach = 26 - 16 * tied;\n  for (let k = 0; k \u003c n; k++) {\n    // Where the strand leaves the plait, which way it is going there, and how\n    // deep it lies: it keeps that depth all the way down, so a strand crossing\n    // over stays over to the hand.\n    strandAt(k, tp, n, tmp);\n    const c0 = tmp[0] - (n - 1) / 2;\n    const pinch = 1 - (1 - GATHER) * tied;\n    const x0 = mid + c0 * g.lane * pinch;\n    const s0 = ((1 - tied) * tmp[1] * g.lane) / g.step;\n    const z0 = tmp[2] * depth + k * 0.01;\n    const x1 = (x0 + c0 * 4) * tied + (mid + c0 * g.spread) * (1 - tied);\n    for (let y = 0; y \u003c H; y++) {\n      const i = k * H + y;\n      const yy = y + 0.5 - off;\n      cr[i] = 0;\n      if (yy \u003c 2) continue;\n      let sl = 0;\n      if (yy \u003c CLIP) {\n        // Under the clip the strands come straight down.\n        strandAt(k, 0, n, tmp);\n        cx[i] = mid + (tmp[0] - (n - 1) / 2) * g.lane;\n        cz[i] = -depth;\n        cr[i] = g.radius;\n      } else if (yy \u003c= yp) {\n        strandAt(k, (yy - CLIP) / g.step, n, tmp);\n        // A tied plait is gathered in to the ribbon over its last 14 rows.\n        const gather = 1 - (1 - GATHER) * tied * smooth(yp - 14, yp, yy);\n        cx[i] = mid + (tmp[0] - (n - 1) / 2) * g.lane * gather;\n        cz[i] = tmp[2] * depth;\n        sl = (tmp[1] * g.lane * gather) / g.step;\n        cr[i] = g.radius;\n      } else if (yy \u003c tailEnd) {\n        // Below the point a loose strand leaves the way it was going and bends\n        // down to the hand holding it; a tied plait's tails splay a little.\n        const u = Math.min(1, (yy - yp) / reach);\n        const u2 = u * u;\n        const u3 = u2 * u;\n        cx[i] = (2 * u3 - 3 * u2 + 1) * x0 + (u3 - 2 * u2 + u) * reach * s0 + (3 * u2 - 2 * u3) * x1;\n        sl = u \u003c 1 ? ((6 * u2 - 6 * u) * x0 + (3 * u2 - 4 * u + 1) * reach * s0 + (6 * u - 6 * u2) * x1) / reach : 0;\n        cz[i] = z0;\n        // A strand thins to its tip over the last eight rows.\n        const tip = Math.min(1, (tailEnd - yy) / 8);\n        cr[i] = g.radius * (1 - 0.25 * tied) * (0.45 + 0.55 * Math.sqrt(tip));\n      }\n      cs[i] = sl / (1 + sl * sl);\n    }\n  }\n  // The span of LEDs each strand can touch in each row: an LED within the\n  // radius of a strand finds its nearest point at most half a radius up or down.\n  const lo = params.lo;\n  const hi = params.hi;\n  const rows = Math.ceil(g.radius / 2 + 2);\n  for (let k = 0; k \u003c n; k++)\n    for (let y = 0; y \u003c H; y++) {\n      let a = 1e9;\n      let b = -1e9;\n      const j1 = Math.min(H - 1, y + rows);\n      for (let j = Math.max(0, y - rows); j \u003c= j1; j++) {\n        const i = k * H + j;\n        if (cr[i] === 0) continue;\n        if (cx[i] - cr[i] \u003c a) a = cx[i] - cr[i];\n        if (cx[i] + cr[i] > b) b = cx[i] + cr[i];\n      }\n      lo[k * H + y] = a - 2.5;\n      hi[k * H + y] = b + 2.5;\n    }\n}\n\n// Render the laid-out strands into img and zbuf from row y0 down. For each LED\n// and strand, step from the LED's row\n// along the strand's slope to the nearest point of its centre line, so where\n// one strand dives under another the edge follows the strand and not the row.\nfunction render(params, g, y0) {\n  const n = g.n;\n  const cx = params.cx;\n  const cz = params.cz;\n  const cs = params.cs;\n  const cr = params.cr;\n  const lo = params.lo;\n  const hi = params.hi;\n  const col = params.col;\n  const img = params.img;\n  const zbuf = params.zbuf;\n  const dist = params.dist;\n  const surf = params.surf;\n  const depth = g.radius * 0.9;\n  const hl = Math.sqrt(0.45 * 0.45 + 0.5 * 0.5 + 1.74 * 1.74);\n  for (let y = y0; y \u003c H; y++) {\n    const py = y + 0.5;\n    let xa = 1e9;\n    let xb = -1e9;\n    for (let k = 0; k \u003c n; k++) {\n      if (lo[k * H + y] \u003c xa) xa = lo[k * H + y];\n      if (hi[k * H + y] > xb) xb = hi[k * H + y];\n    }\n    xa = Math.max(0, Math.floor(xa));\n    xb = Math.min(W - 1, Math.ceil(xb));\n    for (let x = xa; x \u003c= xb; x++) {\n      const p = y * W + x;\n      const px = x + 0.5;\n      let best = -1e9;\n      let bk = -1;\n      let bnx = 0;\n      let bny = 0;\n      let bz = 0;\n      let bcov = 0;\n      for (let k = 0; k \u003c n; k++) {\n        const i0 = k * H + y;\n        dist[k] = 1e9;\n        if (px \u003c lo[i0] || px > hi[i0]) continue;\n        let ys = cr[i0] > 0 ? py + (px - cx[i0]) * cs[i0] : py;\n        if (ys \u003c 0.5) ys = 0.5;\n        else if (ys > H - 1.5) ys = H - 1.5;\n        const ya = Math.floor(ys - 0.5);\n        const f = ys - 0.5 - ya;\n        const ia = k * H + ya;\n        const ra = cr[ia];\n        const rb = cr[ia + 1];\n        let xs;\n        let zs;\n        let rs;\n        if (rb === 0) {\n          if (ra === 0) continue;\n          xs = cx[ia];\n          zs = cz[ia];\n          rs = ra;\n          ys = ya + 0.5;\n        } else if (ra === 0) {\n          xs = cx[ia + 1];\n          zs = cz[ia + 1];\n          rs = rb;\n          ys = ya + 1.5;\n        } else {\n          xs = cx[ia] + (cx[ia + 1] - cx[ia]) * f;\n          zs = cz[ia] + (cz[ia + 1] - cz[ia]) * f;\n          rs = ra + (rb - ra) * f;\n        }\n        const dx = px - xs;\n        const dy = py - ys;\n        const d2 = dx * dx + dy * dy;\n        if (d2 > (rs + 2) * (rs + 2)) continue;\n        const d = Math.sqrt(d2);\n        dist[k] = d - rs;\n        if (d >= rs) {\n          surf[k] = zs;\n          if (d \u003c rs + 0.5 && zs > best) {\n            best = zs;\n            bk = k;\n            bnx = dx / d;\n            bny = dy / d;\n            bz = zs / depth;\n            bcov = rs + 0.5 - d;\n          }\n          continue;\n        }\n        surf[k] = zs + Math.sqrt(rs * rs - d * d);\n        if (surf[k] > best) {\n          best = surf[k];\n          bk = k;\n          bnx = dx / rs;\n          bny = dy / rs;\n          bz = zs / depth;\n          bcov = Math.min(1, rs + 0.5 - d);\n        }\n      }\n      if (bk \u003c 0) continue;\n      // A strand lying over this one darkens the LEDs just outside its edge,\n      // so a strand going under reads as tucked in.\n      let shade = 1;\n      for (let k = 0; k \u003c n; k++) {\n        if (k === bk || dist[k] > 2 || dist[k] \u003c -0.5) continue;\n        if (surf[k] > best - 1) shade = Math.min(shade, 0.12 + 0.88 * smooth(0, 2, dist[k]));\n      }\n      const nn = Math.min(1, bnx * bnx + bny * bny);\n      const nz = Math.sqrt(1 - nn);\n      // Light from the upper left and in front.\n      // The square root flattens the lit middle of a strand and keeps its\n      // fall-off for the rim, so it reads as round without a smear of greys.\n      const diff = Math.sqrt(Math.max(0, -0.45 * bnx - 0.5 * bny + 0.74 * nz));\n      let sp = Math.max(0, (-0.45 * bnx - 0.5 * bny + 1.74 * nz) / hl);\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      // Under, a strand is dimmer; over, it is lit full. The floor stays high\n      // enough that an orange strand going under does not turn brown.\n      const lit = (0.56 + 0.44 * (0.5 + 0.5 * bz)) * shade;\n      const v = lit * (0.14 + 0.86 * diff);\n      const spec = sp * 0.5 * lit * 255;\n      const c = bk * 3;\n      const o = p * 3;\n      img[o] = img[o] * (1 - bcov) + Math.min(255, col[c] * v + spec) * bcov;\n      img[o + 1] = img[o + 1] * (1 - bcov) + Math.min(255, col[c + 1] * v + spec) * bcov;\n      img[o + 2] = img[o + 2] * (1 - bcov) + Math.min(255, col[c + 2] * v + spec) * bcov;\n      zbuf[p] = best;\n    }\n  }\n}\n\n// A ribbon tied in a bow round the plait at row yp, grown to size (0..1):\n// a band round the gathered strands, two loops, a knot and two tails cut in a fork.\nfunction ribbon(img, params, yp, band, size) {\n  if (size \u003c= 0) return;\n  const col = params.col;\n  const c = MAXN * 3;\n  const cx = W / 2;\n  const lw = 12 * size;\n  const lh = 6 * size;\n  const ca = Math.cos(0.42);\n  const sa = Math.sin(0.42);\n  for (let y = Math.max(0, Math.floor(yp - 14)); y \u003c Math.min(H, yp + 20); y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - yp;\n      let v = 0;\n      // The band round the plait.\n      if (Math.abs(py) \u003c 1.8 && Math.abs(px) \u003c band * size) v = 0.85 - 0.12 * Math.max(0, py);\n      // The loops, tilted up and out, with a fold darker along the middle.\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const lx = s * px - lw * 0.55;\n        const ly = py + 2.5 * size;\n        const u = (lx * ca + ly * sa) / lw;\n        const w = (-lx * sa + ly * ca) / lh;\n        const e = (u * u) / 0.3 + w * w;\n        if (e \u003c 1) v = Math.max(v, Math.abs(w) \u003c 0.18 && u > -0.2 ? 0.72 : 1 - 0.18 * e);\n      }\n      // The tails, hanging down and out from the knot, forked at the end.\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const along = py / size;\n        const off = s * px - (1.5 + py * 0.42);\n        if (along > 0 && along \u003c 15 && Math.abs(off) \u003c 2.4 && !(along > 12 && Math.abs(off) \u003c (along - 12) * 0.9)) v = Math.max(v, 0.95 - 0.2 * (along / 15));\n      }\n      // The knot.\n      const kr = px * px + (py + 0.3) * (py + 0.3);\n      if (kr \u003c 10 * size * size) v = Math.max(v, 1);\n      else if (kr \u003c 14 * size * size) v = Math.min(v, 0.75);\n      if (v \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      img[o] = col[c] * v;\n      img[o + 1] = col[c + 1] * v;\n      img[o + 2] = col[c + 2] * v;\n    }\n}\n\n// The clip at the top, a rounded silver bar a little wider than the plait,\n// shifted down by off rows, drawn from row y0 down.\nfunction clip(params, half, off, y0) {\n  const img = params.img;\n  for (let j = 1; j \u003c CLIP; j++) {\n    const y = j + Math.round(off);\n    if (y \u003c y0 || y >= H) continue;\n    const u = (j + 0.5 - (CLIP + 1) / 2) / ((CLIP - 1) / 2);\n    const v = 0.35 + 0.65 * Math.sqrt(Math.max(0, 1 - u * u)) + (Math.abs(u + 0.35) \u003c 0.3 ? 0.25 : 0);\n    for (let x = 0; x \u003c W; x++) {\n      const ex = Math.abs(x + 0.5 - W / 2) - (half + 2);\n      if (ex > 1) continue;\n      const a = Math.max(0, Math.min(1, 1 - ex)) * (j === 1 || j === CLIP - 1 ? 0.75 : 1);\n      const o = (y * W + x) * 3;\n      img[o] = img[o] * (1 - a) + Math.min(255, 215 * v) * a;\n      img[o + 1] = img[o + 1] * (1 - a) + Math.min(255, 220 * v) * a;\n      img[o + 2] = img[o + 2] * (1 - a) + Math.min(255, 232 * v) * a;\n    }\n  }\n}\n\n// Copy src into out moved down by off rows, blending neighbouring rows for the\n// fraction. On top, src covers out where it is lit and lets it through where dark.\nfunction slide(out, src, off, top) {\n  const fo = Math.floor(off);\n  const fr = off - fo;\n  for (let y = 0; y \u003c H; y++) {\n    const ya = y - fo;\n    const yb = ya - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      let cov = 0;\n      if (ya >= 0 && ya \u003c H) {\n        const a = (ya * W + x) * 3;\n        r += src[a] * (1 - fr);\n        g += src[a + 1] * (1 - fr);\n        b += src[a + 2] * (1 - fr);\n        if (src[a] + src[a + 1] + src[a + 2] > 0) cov += 1 - fr;\n      }\n      if (yb >= 0 && yb \u003c H) {\n        const a = (yb * W + x) * 3;\n        r += src[a] * fr;\n        g += src[a + 1] * fr;\n        b += src[a + 2] * fr;\n        if (src[a] + src[a + 1] + src[a + 2] > 0) cov += fr;\n      }\n      if (!top) cov = 1;\n      out[o] = r + out[o] * (1 - cov);\n      out[o + 1] = g + out[o + 1] * (1 - cov);\n      out[o + 2] = b + out[o + 2] * (1 - cov);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const g = geometry(params);\n  const col = params.col;\n  const hue = params.hue + 0.47;\n  const fan = (0.62 * (g.n - 1)) / g.n;\n  for (let k = 0; k \u003c g.n; k++) hsvInto(col, k * 3, hue + (k * 0.62) / g.n, 0.78, 1);\n  // The ribbon takes the colour in the middle of the gap the strands leave on the wheel.\n  hsvInto(col, MAXN * 3, hue + fan + (1 - fan) / 2 - 0.04, 0.68, 1);\n  const half = ((g.n - 1) * g.lane) / 2 + g.radius;\n  // Half the width of the gathered end, where the ribbon's band goes round.\n  const band = ((g.n - 1) * g.lane * GATHER) / 2 + g.radius * 0.9;\n  const img = params.img;\n  const zbuf = params.zbuf;\n  const phase = params.phase;\n  // While the knobs stay put, the plait above its point does not change, so\n  // the rows that were finished last frame are kept and only the rest drawn.\n  const same = params.cn === g.n && params.ct === params.tension && params.ch === params.hue && params.cp === phase;\n  let y0 = same ? params.valid : 0;\n  params.cn = g.n;\n  params.ct = params.tension;\n  params.ch = params.hue;\n  params.cp = phase;\n  let out = img;\n  if (phase === 2) {\n    // The tied plait is lowered out of sight on its clip and the next clip of\n    // loose strands comes down after it. Neither changes shape on the way, so\n    // each is drawn once and slid down a fraction of a row at a time.\n    if (!same) {\n      img.fill(0);\n      zbuf.fill(-1e9);\n      layout(params, g, params.tiedT, 0, 1);\n      render(params, g, 0);\n      clip(params, half, 0, 0);\n      ribbon(img, params, CLIP + params.tiedT * g.step, band, 1);\n      params.old.set(img);\n      img.fill(0);\n      zbuf.fill(-1e9);\n      layout(params, g, 0, 0, 0);\n      render(params, g, 0);\n      clip(params, half, 0, 0);\n      params.next.set(img);\n    }\n    const off = smooth(0, 1, params.timer / LOWER) * (H + 4);\n    out = params.out;\n    slide(out, params.next, off - H - 4, false);\n    slide(out, params.old, off, true);\n    params.valid = 0;\n  } else {\n    img.fill(0, y0 * W * 3);\n    zbuf.fill(-1e9, y0 * W);\n    const yp = CLIP + params.t * g.step;\n    if (y0 \u003c H) {\n      layout(params, g, params.t, 0, phase === 1 ? smooth(0, 0.35, params.timer) : 0);\n      render(params, g, y0);\n      clip(params, half, 0, y0);\n    }\n    // A hanging plait is still; a growing one is settled down to a radius above its point.\n    params.valid = phase === 1 ? (params.timer > 0.4 ? H : Math.floor(yp - 20 - g.radius)) : Math.max(0, Math.floor(yp - g.radius - 4));\n    if (phase === 1) {\n      out = params.out;\n      out.set(img);\n      ribbon(out, params, yp, band, smooth(0, 0.35, params.timer));\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      if (out[o] + out[o + 1] + out[o + 2] \u003c 1) continue;\n      display.setPixel(x, y, out[o], out[o + 1], out[o + 2]);\n    }\n}\n","layer":{"id":"layer-plait","type":"code","name":"plait","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Plait\n// Family:  textile\n// Idea:    Coloured strands hang from a clip and are plaited down the panel, the outside strand crossing over to the middle each time, until the plait is tied off with a ribbon and lowered away, and the next clip of loose strands comes down.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 13\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Strands=3..7, Tension=0..1\n//\n// Knob 1: Hue. Turns the strands' colours together, starting from teal, blue and magenta.\n// Knob 2: Speed. How fast the hands work: at 2 the plait grows by 1.2 rows of crossings a second, at 3 by nearly two, at 0.2 by one every eight seconds.\n// Knob 3: Strands. 3 is the plait everyone knows; 4 to 7 make a flat braid, each outside strand weaving over and under all the way to the far edge.\n// Knob 4: Tension. At 0 the plait is loose and fat, 54 LEDs across with three strands crossing every 17 rows; at 1 it is pulled tight to 34 LEDs, crossing every 6 or 7.\n// Buttons: K1 tap ties the plait off with a ribbon where it has got to, long tails and all; it is lowered away and a new one starts.\n\nconst W = 64;\nconst H = 128;\nconst MAXN = 7;\n// The clip holds the strands at rows 1..6; the plait starts under it.\nconst CLIP = 7;\n// The plait is tied once its point gets this far down.\nconst TIE_AT = 100;\n// Seconds a tied plait hangs, and the seconds it takes to lower it away.\nconst HANG = 1.6;\nconst LOWER = 1.4;\n// Crossings a second at Speed 1.\nconst RATE = 0.6;\n// A tied plait is pinched to this share of its width at the ribbon.\nconst GATHER = 0.4;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\n// A strand's lane on a cycle of 2N steps: it walks one lane a step from the\n// left edge to the right, waits a step there, walks back and waits again.\n// Spaced two steps apart, N strands always fill the N lanes, and between two\n// whole steps a strand walking right swaps lanes with one walking left.\nfunction laneAt(q, n) {\n  if (q \u003c= n - 1) return q;\n  if (q \u003c= n) return n - 1;\n  if (q \u003c= 2 * n - 1) return 2 * n - 1 - q;\n  return 0;\n}\n\n// The integral of laneAt, so the lane can be averaged over one step and the\n// strand turns round at the edges instead of folding.\nfunction laneInt(q, n) {\n  const c = 2 * n;\n  const m = n - 1;\n  const total = m * m + m;\n  const k = Math.floor(q / c);\n  const r = q - k * c;\n  let f;\n  if (r \u003c= m) f = (r * r) / 2;\n  else if (r \u003c= n) f = (m * m) / 2 + m * (r - m);\n  else if (r \u003c= 2 * n - 1) f = (m * m) / 2 + m + (2 * n - 1) * (r - n) - (r * r - n * n) / 2;\n  else f = total;\n  return k * total + f;\n}\n\n// Lane, its slope in lanes per step, and depth for strand k at step t.\n// Crossings fall on half steps. At a crossing after an even step the strand\n// walking right is on top, after an odd step the one walking left, so every\n// strand goes over, under, over, and for three strands the outside strand\n// always crosses over the middle one.\nfunction strandAt(k, t, n, out) {\n  const c = 2 * n;\n  const q = 2 * k + t;\n  out[0] = laneInt(q + 0.5, n) - laneInt(q - 0.5, n);\n  const qa = (((q + 0.5) % c) + c) % c;\n  const qb = (((q - 0.5) % c) + c) % c;\n  out[1] = laneAt(qa, n) - laneAt(qb, n);\n  const r = ((q % c) + c) % c;\n  const wave = Math.cos(Math.PI * (t - 0.5));\n  out[2] = r \u003c n - 1 ? wave : r >= n && r \u003c 2 * n - 1 ? -wave : 0;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.phase = 0; // 0 plaiting, 1 tied and hanging, 2 lowered away\n  params.timer = 0;\n  params.tiedT = 0;\n  params.started = false;\n  params.n = 3;\n  params.hue = 0;\n  params.speed = 2;\n  params.tension = 0.06;\n  // Each strand's centre row by row: x, depth, the nudge from a row to the\n  // nearest point (slope / (1 + slope^2)) and radius, radius 0 where the strand\n  // is absent; lo..hi is the span of LEDs it can reach in that row.\n  params.cx = new Float32Array(MAXN * H);\n  params.cz = new Float32Array(MAXN * H);\n  params.cs = new Float32Array(MAXN * H);\n  params.cr = new Float32Array(MAXN * H);\n  params.lo = new Float32Array(MAXN * H);\n  params.hi = new Float32Array(MAXN * H);\n  params.dist = new Float32Array(MAXN);\n  params.surf = new Float32Array(MAXN);\n  params.col = new Float32Array(MAXN * 3 + 3);\n  params.tmp = new Float32Array(3);\n  params.img = new Float32Array(W * H * 3);\n  params.out = new Float32Array(W * H * 3);\n  // The tied plait and the next one, drawn once each while one replaces the other.\n  params.old = new Float32Array(W * H * 3);\n  params.next = new Float32Array(W * H * 3);\n  params.valid = 0;\n  params.cn = -1;\n  params.zbuf = new Float32Array(W * H);\n}\n\n// The plait's shape for the current knobs.\nfunction geometry(params) {\n  const n = params.n;\n  const tension = params.tension;\n  // Half the plait's width, from 27 LEDs loose to 17 tight.\n  const half = 27 - 10 * tension;\n  const lane = (2 * half) / (n - 1 + 1.4);\n  return {\n    n: n,\n    lane: lane,\n    radius: lane * 0.7,\n    step: lane * (1.1 - 0.45 * tension),\n    spread: (W - 4 - 1.4 * lane * 0.7) / (n - 1),\n  };\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.speed = Math.max(0.05, k[1]);\n  params.n = Math.max(3, Math.min(MAXN, Math.round(k[2])));\n  params.tension = Math.max(0, Math.min(1, k[3]));\n  const g = geometry(params);\n  if (!params.started) {\n    params.started = true;\n    // Start part way down, so the first frame already shows a plait.\n    params.t = (44 - CLIP) / g.step;\n  }\n  if (input.btnPressed && input.btnPressed[0] && params.phase === 0) {\n    params.phase = 1;\n    params.timer = 0;\n  }\n  if (params.phase === 0) {\n    params.t += dt * params.speed * RATE;\n    if (CLIP + params.t * g.step >= TIE_AT) {\n      params.phase = 1;\n      params.timer = 0;\n    }\n  } else if (params.phase === 1) {\n    params.timer += dt;\n    if (params.timer > HANG) {\n      params.phase = 2;\n      params.timer = 0;\n      params.tiedT = params.t;\n      params.t = 0;\n    }\n  } else {\n    params.timer += dt;\n    if (params.timer > LOWER) {\n      params.phase = 0;\n      params.timer = 0;\n    }\n  }\n}\n\n// Lay out each strand's centre line, row by row, for a plait whose point is at\n// step tp, its clip shifted down by off rows; tied (0..1) is how far the\n// ribbon has pulled its end in.\nfunction layout(params, g, tp, off, tied) {\n  const n = g.n;\n  const mid = W / 2;\n  const tmp = params.tmp;\n  const cx = params.cx;\n  const cz = params.cz;\n  const cs = params.cs;\n  const cr = params.cr;\n  const depth = g.radius * 0.9;\n  const yp = CLIP + tp * g.step;\n  // The tails get shorter as the plait uses up the strands.\n  const prog = Math.min(1, (yp - CLIP) / (TIE_AT - CLIP));\n  const tailEnd = yp + (H - 1 - CLIP) * (1 - prog) + (20 - 4 * tied) * prog;\n  const reach = 26 - 16 * tied;\n  for (let k = 0; k \u003c n; k++) {\n    // Where the strand leaves the plait, which way it is going there, and how\n    // deep it lies: it keeps that depth all the way down, so a strand crossing\n    // over stays over to the hand.\n    strandAt(k, tp, n, tmp);\n    const c0 = tmp[0] - (n - 1) / 2;\n    const pinch = 1 - (1 - GATHER) * tied;\n    const x0 = mid + c0 * g.lane * pinch;\n    const s0 = ((1 - tied) * tmp[1] * g.lane) / g.step;\n    const z0 = tmp[2] * depth + k * 0.01;\n    const x1 = (x0 + c0 * 4) * tied + (mid + c0 * g.spread) * (1 - tied);\n    for (let y = 0; y \u003c H; y++) {\n      const i = k * H + y;\n      const yy = y + 0.5 - off;\n      cr[i] = 0;\n      if (yy \u003c 2) continue;\n      let sl = 0;\n      if (yy \u003c CLIP) {\n        // Under the clip the strands come straight down.\n        strandAt(k, 0, n, tmp);\n        cx[i] = mid + (tmp[0] - (n - 1) / 2) * g.lane;\n        cz[i] = -depth;\n        cr[i] = g.radius;\n      } else if (yy \u003c= yp) {\n        strandAt(k, (yy - CLIP) / g.step, n, tmp);\n        // A tied plait is gathered in to the ribbon over its last 14 rows.\n        const gather = 1 - (1 - GATHER) * tied * smooth(yp - 14, yp, yy);\n        cx[i] = mid + (tmp[0] - (n - 1) / 2) * g.lane * gather;\n        cz[i] = tmp[2] * depth;\n        sl = (tmp[1] * g.lane * gather) / g.step;\n        cr[i] = g.radius;\n      } else if (yy \u003c tailEnd) {\n        // Below the point a loose strand leaves the way it was going and bends\n        // down to the hand holding it; a tied plait's tails splay a little.\n        const u = Math.min(1, (yy - yp) / reach);\n        const u2 = u * u;\n        const u3 = u2 * u;\n        cx[i] = (2 * u3 - 3 * u2 + 1) * x0 + (u3 - 2 * u2 + u) * reach * s0 + (3 * u2 - 2 * u3) * x1;\n        sl = u \u003c 1 ? ((6 * u2 - 6 * u) * x0 + (3 * u2 - 4 * u + 1) * reach * s0 + (6 * u - 6 * u2) * x1) / reach : 0;\n        cz[i] = z0;\n        // A strand thins to its tip over the last eight rows.\n        const tip = Math.min(1, (tailEnd - yy) / 8);\n        cr[i] = g.radius * (1 - 0.25 * tied) * (0.45 + 0.55 * Math.sqrt(tip));\n      }\n      cs[i] = sl / (1 + sl * sl);\n    }\n  }\n  // The span of LEDs each strand can touch in each row: an LED within the\n  // radius of a strand finds its nearest point at most half a radius up or down.\n  const lo = params.lo;\n  const hi = params.hi;\n  const rows = Math.ceil(g.radius / 2 + 2);\n  for (let k = 0; k \u003c n; k++)\n    for (let y = 0; y \u003c H; y++) {\n      let a = 1e9;\n      let b = -1e9;\n      const j1 = Math.min(H - 1, y + rows);\n      for (let j = Math.max(0, y - rows); j \u003c= j1; j++) {\n        const i = k * H + j;\n        if (cr[i] === 0) continue;\n        if (cx[i] - cr[i] \u003c a) a = cx[i] - cr[i];\n        if (cx[i] + cr[i] > b) b = cx[i] + cr[i];\n      }\n      lo[k * H + y] = a - 2.5;\n      hi[k * H + y] = b + 2.5;\n    }\n}\n\n// Render the laid-out strands into img and zbuf from row y0 down. For each LED\n// and strand, step from the LED's row\n// along the strand's slope to the nearest point of its centre line, so where\n// one strand dives under another the edge follows the strand and not the row.\nfunction render(params, g, y0) {\n  const n = g.n;\n  const cx = params.cx;\n  const cz = params.cz;\n  const cs = params.cs;\n  const cr = params.cr;\n  const lo = params.lo;\n  const hi = params.hi;\n  const col = params.col;\n  const img = params.img;\n  const zbuf = params.zbuf;\n  const dist = params.dist;\n  const surf = params.surf;\n  const depth = g.radius * 0.9;\n  const hl = Math.sqrt(0.45 * 0.45 + 0.5 * 0.5 + 1.74 * 1.74);\n  for (let y = y0; y \u003c H; y++) {\n    const py = y + 0.5;\n    let xa = 1e9;\n    let xb = -1e9;\n    for (let k = 0; k \u003c n; k++) {\n      if (lo[k * H + y] \u003c xa) xa = lo[k * H + y];\n      if (hi[k * H + y] > xb) xb = hi[k * H + y];\n    }\n    xa = Math.max(0, Math.floor(xa));\n    xb = Math.min(W - 1, Math.ceil(xb));\n    for (let x = xa; x \u003c= xb; x++) {\n      const p = y * W + x;\n      const px = x + 0.5;\n      let best = -1e9;\n      let bk = -1;\n      let bnx = 0;\n      let bny = 0;\n      let bz = 0;\n      let bcov = 0;\n      for (let k = 0; k \u003c n; k++) {\n        const i0 = k * H + y;\n        dist[k] = 1e9;\n        if (px \u003c lo[i0] || px > hi[i0]) continue;\n        let ys = cr[i0] > 0 ? py + (px - cx[i0]) * cs[i0] : py;\n        if (ys \u003c 0.5) ys = 0.5;\n        else if (ys > H - 1.5) ys = H - 1.5;\n        const ya = Math.floor(ys - 0.5);\n        const f = ys - 0.5 - ya;\n        const ia = k * H + ya;\n        const ra = cr[ia];\n        const rb = cr[ia + 1];\n        let xs;\n        let zs;\n        let rs;\n        if (rb === 0) {\n          if (ra === 0) continue;\n          xs = cx[ia];\n          zs = cz[ia];\n          rs = ra;\n          ys = ya + 0.5;\n        } else if (ra === 0) {\n          xs = cx[ia + 1];\n          zs = cz[ia + 1];\n          rs = rb;\n          ys = ya + 1.5;\n        } else {\n          xs = cx[ia] + (cx[ia + 1] - cx[ia]) * f;\n          zs = cz[ia] + (cz[ia + 1] - cz[ia]) * f;\n          rs = ra + (rb - ra) * f;\n        }\n        const dx = px - xs;\n        const dy = py - ys;\n        const d2 = dx * dx + dy * dy;\n        if (d2 > (rs + 2) * (rs + 2)) continue;\n        const d = Math.sqrt(d2);\n        dist[k] = d - rs;\n        if (d >= rs) {\n          surf[k] = zs;\n          if (d \u003c rs + 0.5 && zs > best) {\n            best = zs;\n            bk = k;\n            bnx = dx / d;\n            bny = dy / d;\n            bz = zs / depth;\n            bcov = rs + 0.5 - d;\n          }\n          continue;\n        }\n        surf[k] = zs + Math.sqrt(rs * rs - d * d);\n        if (surf[k] > best) {\n          best = surf[k];\n          bk = k;\n          bnx = dx / rs;\n          bny = dy / rs;\n          bz = zs / depth;\n          bcov = Math.min(1, rs + 0.5 - d);\n        }\n      }\n      if (bk \u003c 0) continue;\n      // A strand lying over this one darkens the LEDs just outside its edge,\n      // so a strand going under reads as tucked in.\n      let shade = 1;\n      for (let k = 0; k \u003c n; k++) {\n        if (k === bk || dist[k] > 2 || dist[k] \u003c -0.5) continue;\n        if (surf[k] > best - 1) shade = Math.min(shade, 0.12 + 0.88 * smooth(0, 2, dist[k]));\n      }\n      const nn = Math.min(1, bnx * bnx + bny * bny);\n      const nz = Math.sqrt(1 - nn);\n      // Light from the upper left and in front.\n      // The square root flattens the lit middle of a strand and keeps its\n      // fall-off for the rim, so it reads as round without a smear of greys.\n      const diff = Math.sqrt(Math.max(0, -0.45 * bnx - 0.5 * bny + 0.74 * nz));\n      let sp = Math.max(0, (-0.45 * bnx - 0.5 * bny + 1.74 * nz) / hl);\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      sp *= sp;\n      // Under, a strand is dimmer; over, it is lit full. The floor stays high\n      // enough that an orange strand going under does not turn brown.\n      const lit = (0.56 + 0.44 * (0.5 + 0.5 * bz)) * shade;\n      const v = lit * (0.14 + 0.86 * diff);\n      const spec = sp * 0.5 * lit * 255;\n      const c = bk * 3;\n      const o = p * 3;\n      img[o] = img[o] * (1 - bcov) + Math.min(255, col[c] * v + spec) * bcov;\n      img[o + 1] = img[o + 1] * (1 - bcov) + Math.min(255, col[c + 1] * v + spec) * bcov;\n      img[o + 2] = img[o + 2] * (1 - bcov) + Math.min(255, col[c + 2] * v + spec) * bcov;\n      zbuf[p] = best;\n    }\n  }\n}\n\n// A ribbon tied in a bow round the plait at row yp, grown to size (0..1):\n// a band round the gathered strands, two loops, a knot and two tails cut in a fork.\nfunction ribbon(img, params, yp, band, size) {\n  if (size \u003c= 0) return;\n  const col = params.col;\n  const c = MAXN * 3;\n  const cx = W / 2;\n  const lw = 12 * size;\n  const lh = 6 * size;\n  const ca = Math.cos(0.42);\n  const sa = Math.sin(0.42);\n  for (let y = Math.max(0, Math.floor(yp - 14)); y \u003c Math.min(H, yp + 20); y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x + 0.5 - cx;\n      const py = y + 0.5 - yp;\n      let v = 0;\n      // The band round the plait.\n      if (Math.abs(py) \u003c 1.8 && Math.abs(px) \u003c band * size) v = 0.85 - 0.12 * Math.max(0, py);\n      // The loops, tilted up and out, with a fold darker along the middle.\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const lx = s * px - lw * 0.55;\n        const ly = py + 2.5 * size;\n        const u = (lx * ca + ly * sa) / lw;\n        const w = (-lx * sa + ly * ca) / lh;\n        const e = (u * u) / 0.3 + w * w;\n        if (e \u003c 1) v = Math.max(v, Math.abs(w) \u003c 0.18 && u > -0.2 ? 0.72 : 1 - 0.18 * e);\n      }\n      // The tails, hanging down and out from the knot, forked at the end.\n      for (let s = -1; s \u003c= 1; s += 2) {\n        const along = py / size;\n        const off = s * px - (1.5 + py * 0.42);\n        if (along > 0 && along \u003c 15 && Math.abs(off) \u003c 2.4 && !(along > 12 && Math.abs(off) \u003c (along - 12) * 0.9)) v = Math.max(v, 0.95 - 0.2 * (along / 15));\n      }\n      // The knot.\n      const kr = px * px + (py + 0.3) * (py + 0.3);\n      if (kr \u003c 10 * size * size) v = Math.max(v, 1);\n      else if (kr \u003c 14 * size * size) v = Math.min(v, 0.75);\n      if (v \u003c= 0) continue;\n      const o = (y * W + x) * 3;\n      img[o] = col[c] * v;\n      img[o + 1] = col[c + 1] * v;\n      img[o + 2] = col[c + 2] * v;\n    }\n}\n\n// The clip at the top, a rounded silver bar a little wider than the plait,\n// shifted down by off rows, drawn from row y0 down.\nfunction clip(params, half, off, y0) {\n  const img = params.img;\n  for (let j = 1; j \u003c CLIP; j++) {\n    const y = j + Math.round(off);\n    if (y \u003c y0 || y >= H) continue;\n    const u = (j + 0.5 - (CLIP + 1) / 2) / ((CLIP - 1) / 2);\n    const v = 0.35 + 0.65 * Math.sqrt(Math.max(0, 1 - u * u)) + (Math.abs(u + 0.35) \u003c 0.3 ? 0.25 : 0);\n    for (let x = 0; x \u003c W; x++) {\n      const ex = Math.abs(x + 0.5 - W / 2) - (half + 2);\n      if (ex > 1) continue;\n      const a = Math.max(0, Math.min(1, 1 - ex)) * (j === 1 || j === CLIP - 1 ? 0.75 : 1);\n      const o = (y * W + x) * 3;\n      img[o] = img[o] * (1 - a) + Math.min(255, 215 * v) * a;\n      img[o + 1] = img[o + 1] * (1 - a) + Math.min(255, 220 * v) * a;\n      img[o + 2] = img[o + 2] * (1 - a) + Math.min(255, 232 * v) * a;\n    }\n  }\n}\n\n// Copy src into out moved down by off rows, blending neighbouring rows for the\n// fraction. On top, src covers out where it is lit and lets it through where dark.\nfunction slide(out, src, off, top) {\n  const fo = Math.floor(off);\n  const fr = off - fo;\n  for (let y = 0; y \u003c H; y++) {\n    const ya = y - fo;\n    const yb = ya - 1;\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      let cov = 0;\n      if (ya >= 0 && ya \u003c H) {\n        const a = (ya * W + x) * 3;\n        r += src[a] * (1 - fr);\n        g += src[a + 1] * (1 - fr);\n        b += src[a + 2] * (1 - fr);\n        if (src[a] + src[a + 1] + src[a + 2] > 0) cov += 1 - fr;\n      }\n      if (yb >= 0 && yb \u003c H) {\n        const a = (yb * W + x) * 3;\n        r += src[a] * fr;\n        g += src[a + 1] * fr;\n        b += src[a + 2] * fr;\n        if (src[a] + src[a + 1] + src[a + 2] > 0) cov += fr;\n      }\n      if (!top) cov = 1;\n      out[o] = r + out[o] * (1 - cov);\n      out[o + 1] = g + out[o + 1] * (1 - cov);\n      out[o + 2] = b + out[o + 2] * (1 - cov);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const g = geometry(params);\n  const col = params.col;\n  const hue = params.hue + 0.47;\n  const fan = (0.62 * (g.n - 1)) / g.n;\n  for (let k = 0; k \u003c g.n; k++) hsvInto(col, k * 3, hue + (k * 0.62) / g.n, 0.78, 1);\n  // The ribbon takes the colour in the middle of the gap the strands leave on the wheel.\n  hsvInto(col, MAXN * 3, hue + fan + (1 - fan) / 2 - 0.04, 0.68, 1);\n  const half = ((g.n - 1) * g.lane) / 2 + g.radius;\n  // Half the width of the gathered end, where the ribbon's band goes round.\n  const band = ((g.n - 1) * g.lane * GATHER) / 2 + g.radius * 0.9;\n  const img = params.img;\n  const zbuf = params.zbuf;\n  const phase = params.phase;\n  // While the knobs stay put, the plait above its point does not change, so\n  // the rows that were finished last frame are kept and only the rest drawn.\n  const same = params.cn === g.n && params.ct === params.tension && params.ch === params.hue && params.cp === phase;\n  let y0 = same ? params.valid : 0;\n  params.cn = g.n;\n  params.ct = params.tension;\n  params.ch = params.hue;\n  params.cp = phase;\n  let out = img;\n  if (phase === 2) {\n    // The tied plait is lowered out of sight on its clip and the next clip of\n    // loose strands comes down after it. Neither changes shape on the way, so\n    // each is drawn once and slid down a fraction of a row at a time.\n    if (!same) {\n      img.fill(0);\n      zbuf.fill(-1e9);\n      layout(params, g, params.tiedT, 0, 1);\n      render(params, g, 0);\n      clip(params, half, 0, 0);\n      ribbon(img, params, CLIP + params.tiedT * g.step, band, 1);\n      params.old.set(img);\n      img.fill(0);\n      zbuf.fill(-1e9);\n      layout(params, g, 0, 0, 0);\n      render(params, g, 0);\n      clip(params, half, 0, 0);\n      params.next.set(img);\n    }\n    const off = smooth(0, 1, params.timer / LOWER) * (H + 4);\n    out = params.out;\n    slide(out, params.next, off - H - 4, false);\n    slide(out, params.old, off, true);\n    params.valid = 0;\n  } else {\n    img.fill(0, y0 * W * 3);\n    zbuf.fill(-1e9, y0 * W);\n    const yp = CLIP + params.t * g.step;\n    if (y0 \u003c H) {\n      layout(params, g, params.t, 0, phase === 1 ? smooth(0, 0.35, params.timer) : 0);\n      render(params, g, y0);\n      clip(params, half, 0, y0);\n    }\n    // A hanging plait is still; a growing one is settled down to a radius above its point.\n    params.valid = phase === 1 ? (params.timer > 0.4 ? H : Math.floor(yp - 20 - g.radius)) : Math.max(0, Math.floor(yp - g.radius - 4));\n    if (phase === 1) {\n      out = params.out;\n      out.set(img);\n      ribbon(out, params, yp, band, smooth(0, 0.35, params.timer));\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      if (out[o] + out[o + 1] + out[o + 2] \u003c 1) continue;\n      display.setPixel(x, y, out[o], out[o + 1], out[o + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Strands=3..7, Tension=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the strands' colours together, starting from teal, blue and magenta."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the hands work: at 2 the plait grows by 1.2 rows of crossings a second, at 3 by nearly two, at 0.2 by one every eight seconds."},{"name":"Strands","min":3,"max":7,"about":"3 is the plait everyone knows; 4 to 7 make a flat braid, each outside strand weaving over and under all the way to the far edge."},{"name":"Tension","min":0,"max":1,"about":"At 0 the plait is loose and fat, 54 LEDs across with three strands crossing every 17 rows; at 1 it is pulled tight to 34 LEDs, crossing every 6 or 7."}],"start":[0,2,3,0.06],"measures":{"motion":1.0033,"detail":0.0467,"edges":0.1711,"complexity":1.4043,"coverage":0.7414,"colour":0.4415,"drift":0.2976},"knobResponse":[0.2929,0.2273,0.2358,0.2751]},{"slug":"player-piano","title":"Player Piano","family":"music","round":15,"note":"자동 피아노의 구멍 뚫린 종이 두루마리가 내려와요. 구멍이 트래커 바를 지날 때마다 발치의 건반이 눌려 빛나요. 곡은 패턴이 그 자리에서 지어서, 화음은 가로줄로, 펼친 화음은 사선으로 읽혀요.","idea":"A pianola composing as it plays: a perforated roll comes off its spool and runs down over the tracker bar, and every slot that crosses the bar holds its key down and lights it.","buttons":"K1 tap punches a glissando into the roll as it leaves the spool, and the music after it is in a new key, a fourth higher.","code":"// ===== Patternflow pattern =====\n// Title:   Player Piano\n// Family:  music\n// Idea:    A pianola composing as it plays: a perforated roll comes off its spool and runs down over the tracker bar, and every slot that crosses the bar holds its key down and lights it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the pianola and its punched music rolls (Edwin Votey, 1895)\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=0.5..3.5, Hands=2..5, Pedal=0..1\n//\n// Knob 1: Hue. Turns the colours of the parts together, starting from a gold tune over a blue bass.\n// Knob 2: Tempo. Beats a second: 2 is 120 to the minute and the paper runs 16 LEDs a second; 0.5 is 30 to the minute, 3.5 is 210.\n// Knob 3: Hands. 2 is what one pianist plays: a tune with a second note under its long ones, and a left hand of long bass slots and chords in rows. 3 adds broken chords running up the roll as diagonals, 4 is a duet with the tune and the bass in octaves, and 5 is more than any pianist could play, adding a run of sixteenths across the whole keyboard, up one bar and down the next.\n// Knob 4: Pedal. At 0 each slot stops a little short of its note, a quarter note 2.4 rows short; turned up, the sustain pedal holds the notes on towards the bar line, and at 1 every slot runs to it, so each bar's tune and broken chords stand as staircases and the keys ring on after they rise.\n// Buttons: K1 tap punches a glissando into the roll as it leaves the spool, and the music after it is in a new key, a fourth higher.\n\nconst W = 64;\nconst H = 128;\n// One LED column per semitone: column 0 is E1, middle C is column 32, column 63 is G6.\nconst LOW = 28;\n// Rows of paper per sixteenth note: a beat is 8 rows, a bar of 4/4 is 32.\nconst R = 2;\n// The music roll on its spool, rows 0..6; the paper runs from row 7 down to the bar.\nconst SPOOL = 7;\n// The tracker bar, rows 105..107. A slot sounds while it covers the holes in row 106.\nconst BAR_Y = 105;\nconst READ = 106.5;\n// The keys, rows 109..127; black keys stop at row 119.\nconst KEY_Y = 109;\nconst BLACK_END = 120;\nconst BLACK = [0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0];\n// How much of a slot's light the paper on either side of it catches.\nconst GLOW = 0.35;\n\nconst MAJOR = [0, 2, 4, 5, 7, 9, 11];\nconst MINOR = [0, 2, 3, 5, 7, 8, 10];\n// Four chords to a progression, as scale degrees counted from 0.\nconst PROG_MAJOR = [\n  [0, 4, 5, 3],\n  [0, 5, 3, 4],\n  [1, 4, 0, 0],\n  [0, 3, 4, 0],\n  [5, 3, 0, 4],\n  [0, 2, 3, 4],\n  [0, 3, 1, 4],\n  [3, 4, 2, 5],\n];\nconst PROG_MINOR = [\n  [0, 5, 2, 6],\n  [0, 3, 4, 0],\n  [0, 6, 5, 4],\n  [0, 3, 6, 4],\n];\n// A bar of tune is one of these rhythms, in sixteenths.\nconst MOTIFS = [\n  [4, 4, 4, 4],\n  [6, 2, 4, 4],\n  [4, 2, 2, 4, 4],\n  [8, 4, 4],\n  [2, 2, 4, 2, 2, 4],\n  [3, 3, 2, 4, 4],\n  [6, 2, 6, 2],\n  [2, 2, 2, 2, 8],\n  [4, 4, 2, 2, 2, 2],\n];\nconst ENDINGS = [[4, 4, 8], [8, 8], [12, 4], [16], [6, 2, 8]];\n\n// Parts. A slot carries a mask of the Hands settings that play it: bit 0 is 2 hands, bit 3 is 5.\nconst MELODY = 0;\nconst BASS = 1;\nconst CHORD = 2;\nconst ARP = 3;\nconst GLISS = 4;\nconst ALL = 15;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\nfunction pcOf(p) {\n  return ((p % 12) + 12) % 12;\n}\n\nfunction scaleOf(params) {\n  return params.minor ? MINOR : MAJOR;\n}\n\n// The pitch classes of the triad on a scale degree; a minor key's V takes the raised leading note.\nfunction chordPcs(params, d) {\n  const sc = scaleOf(params);\n  const out = [];\n  for (let i = 0; i \u003c 3; i++) {\n    const deg = d + 2 * i;\n    let pc = sc[deg % 7];\n    if (params.minor && d === 4 && i === 1) pc += 1;\n    out.push((params.tonic + pc) % 12);\n  }\n  return out;\n}\n\nfunction scalePcs(params, chord) {\n  const sc = scaleOf(params);\n  const out = [];\n  for (let i = 0; i \u003c 7; i++) out.push((params.tonic + sc[i]) % 12);\n  // Over a minor key's V the tune uses the raised seventh too.\n  for (let i = 0; i \u003c chord.length; i++) if (out.indexOf(chord[i]) \u003c 0) out[6] = chord[i];\n  return out;\n}\n\nfunction nearestIn(pcs, target, lo, hi) {\n  let best = lo;\n  let bd = 1e9;\n  for (let p = lo; p \u003c= hi; p++) {\n    if (pcs.indexOf(pcOf(p)) \u003c 0) continue;\n    const d = Math.abs(p - target);\n    if (d \u003c bd) {\n      bd = d;\n      best = p;\n    }\n  }\n  return best;\n}\n\nfunction stepIn(pcs, p, n) {\n  const dir = n \u003c 0 ? -1 : 1;\n  for (let k = 0; k \u003c Math.abs(n); k++) {\n    p += dir;\n    while (pcs.indexOf(pcOf(p)) \u003c 0) p += dir;\n  }\n  return p;\n}\n\nfunction nextAbove(pcs, p) {\n  p++;\n  while (pcs.indexOf(pcOf(p)) \u003c 0) p++;\n  return p;\n}\n\nfunction add(params, p, t0, d, hold, part, mask) {\n  if (p \u003c LOW || p >= LOW + W) return;\n  params.slots.push({ p: p, t0: t0, d: d, hold: hold, part: part, mask: mask });\n}\n\nfunction newPhrase(params) {\n  params.prog = pick(params.minor ? PROG_MINOR : PROG_MAJOR);\n  params.rhythmA = pick(MOTIFS);\n  params.rhythmB = pick(ENDINGS);\n  // The motif's shape in scale steps: mostly one way, so a bar reads as a run.\n  const dir = Math.random() \u003c 0.5 ? -1 : 1;\n  params.stepsA = params.rhythmA.map(() => {\n    const r = Math.random();\n    if (r \u003c 0.1) return 0;\n    const n = Math.random() \u003c 0.75 ? 1 : 2;\n    return r \u003c 0.75 ? dir * n : -dir * n;\n  });\n  params.chordStyle = Math.floor(Math.random() * 4);\n  params.arpStyle = Math.floor(Math.random() * 3);\n  params.bassStyle = Math.floor(Math.random() * 2);\n  params.phraseBar = 0;\n}\n\n// One bar of music, written onto the roll from tick t.\nfunction composeBar(params, t) {\n  if (params.phraseBar >= 8 || !params.prog) {\n    if (params.prog && Math.random() \u003c 0.3) {\n      // Now and then the next phrase goes to the relative key.\n      if (params.minor) params.tonic = (params.tonic + 3) % 12;\n      else params.tonic = (params.tonic + 9) % 12;\n      params.minor = !params.minor;\n    }\n    newPhrase(params);\n  }\n  const i = params.phraseBar;\n  const degree = params.prog[i % 4];\n  const pcs = chordPcs(params, degree);\n  const scale = scalePcs(params, pcs);\n  const end = t + 16;\n\n  // The bass: the root in long slots, low in the keyboard, moving as little as it can.\n  const root = nearestIn([pcs[0]], params.bass, 33, 47);\n  params.bass = root;\n  if (params.bassStyle === 0) {\n    add(params, root, t, 16, end, BASS, ALL);\n    add(params, root - 12, t, 16, end, BASS, 12);\n  } else {\n    const fifth = nearestIn([pcs[2]], root + 5, root - 7, root + 9);\n    add(params, root, t, 8, t + 8, BASS, ALL);\n    add(params, fifth, t + 8, 8, end, BASS, ALL);\n    add(params, root - 12, t, 8, t + 8, BASS, 12);\n    add(params, fifth - 12, t + 8, 8, end, BASS, 12);\n  }\n\n  // The left hand's chords: close triads that move to the nearest inversion.\n  let best = null;\n  let bd = 1e9;\n  for (let b = 50; b \u003c= 62; b++) {\n    if (pcs.indexOf(pcOf(b)) \u003c 0) continue;\n    const v1 = nextAbove(pcs, b);\n    const v = [b, v1, nextAbove(pcs, v1)];\n    const prev = params.voicing;\n    const dist = Math.abs(v[0] - prev[0]) + Math.abs(v[1] - prev[1]) + Math.abs(v[2] - prev[2]);\n    if (dist \u003c bd) {\n      bd = dist;\n      best = v;\n    }\n  }\n  params.voicing = best;\n  const hits =\n    params.chordStyle === 0 ? [[0, 16]] : params.chordStyle === 1 ? [[0, 4], [4, 4], [8, 4], [12, 4]] : params.chordStyle === 2 ? [[4, 4], [12, 4]] : [[0, 6], [6, 10]];\n  for (let h = 0; h \u003c hits.length; h++) {\n    const at = t + hits[h][0];\n    for (let k = 0; k \u003c 3; k++) add(params, best[k], at, hits[h][1], end, CHORD, ALL);\n    add(params, best[0] + 12, at, hits[h][1], end, CHORD, 12);\n  }\n\n  // Broken chords in eighths, climbing from the root across two octaves and more.\n  const tones = [nearestIn([pcs[0]], 43, 38, 50)];\n  for (let k = 1; k \u003c 8; k++) tones.push(nextAbove(pcs, tones[k - 1]));\n  const order = params.arpStyle === 0 ? [0, 1, 2, 3, 4, 5, 6, 7] : params.arpStyle === 1 ? [0, 1, 2, 3, 4, 3, 2, 1] : [7, 6, 5, 4, 3, 2, 1, 0];\n  for (let k = 0; k \u003c 8; k++) add(params, tones[order[k]], t + 2 * k, 2, end, ARP, 14);\n  // Five hands: sixteen chord tones in sixteenths, the whole keyboard in a bar,\n  // up on one bar and down on the next.\n  const run = [nearestIn([pcs[0]], 30, 28, 39)];\n  for (let k = 1; k \u003c 16; k++) run.push(nextAbove(pcs, run[k - 1]));\n  const down = params.barCount % 2 === 1;\n  for (let k = 0; k \u003c 16; k++) add(params, run[down ? 15 - k : k], t + k, 2, end, ARP, 8);\n\n  // The tune: the motif on the first three bars of each four, set on the chord,\n  // and a cadence on the fourth.\n  const cadence = i % 4 === 3;\n  const rhythm = cadence ? params.rhythmB : params.rhythmA;\n  // Over a phrase of eight bars the tune climbs an arch of about an octave and comes down.\n  const arch = Math.sin((Math.PI * (i + 0.5)) / 8);\n  const target = 64 + 18 * arch + 4 * Math.sin(params.barCount * 1.7);\n  let p = nearestIn(pcs, target, 62, 86);\n  let at = t;\n  const notes = [];\n  for (let k = 0; k \u003c rhythm.length; k++) {\n    if (k > 0) {\n      if (cadence) {\n        // The cadence settles on a chord tone, a step or two away.\n        p = nearestIn(pcs, stepIn(scale, p, -1), p - 4, p + 2);\n      } else {\n        let q = stepIn(scale, p, params.stepsA[k] || 0);\n        if (q > 86 || q \u003c 62) q = stepIn(scale, p, -(params.stepsA[k] || 0));\n        p = q;\n      }\n    }\n    notes.push([p, at, rhythm[k]]);\n    at += rhythm[k];\n  }\n  for (let k = 0; k \u003c notes.length; k++) {\n    const n = notes[k];\n    add(params, n[0], n[1], n[2], end, MELODY, ALL);\n    add(params, n[0] - 12, n[1], n[2], end, MELODY, 12);\n    // The right hand takes a chord tone under the tune's long notes on the strong beats.\n    if (n[2] >= 4 && (n[1] - t) % 8 === 0) add(params, nearestIn(pcs, n[0] - 6, n[0] - 9, n[0] - 3), n[1], n[2], end, MELODY, ALL);\n  }\n  params.mel = p;\n  params.phraseBar++;\n  params.barCount++;\n}\n\n// A glissando up the scale over two beats, then the new key's dominant held\n// until the bar line, where the music starts again a fourth higher.\nfunction glissando(params, from) {\n  const slots = params.slots;\n  for (let i = slots.length - 1; i >= 0; i--) {\n    const s = slots[i];\n    if (s.t0 >= from) slots.splice(i, 1);\n    else {\n      if (s.t0 + s.d > from) s.d = from - s.t0;\n      if (s.hold > from) s.hold = from;\n    }\n  }\n  params.tonic = (params.tonic + 5) % 12;\n  const scale = [];\n  for (let i = 0; i \u003c 7; i++) scale.push((params.tonic + scaleOf(params)[i]) % 12);\n  const notes = [];\n  for (let p = nearestIn(scale, 34, 30, 40); p \u003c= 88; p = nextAbove(scale, p)) notes.push(p);\n  const span = 8;\n  for (let k = 0; k \u003c notes.length; k++) {\n    const t0 = from + (span * k) / notes.length;\n    add(params, notes[k], t0, 0.9, t0 + 0.9 + 3, GLISS, ALL);\n  }\n  const bar = Math.ceil((from + span + 4) / 16) * 16;\n  const v = chordPcs(params, 4);\n  const top = notes[notes.length - 1];\n  const t1 = from + span;\n  add(params, nearestIn([v[0]], 40, 33, 46), t1, bar - t1, bar, BASS, ALL);\n  for (let k = 0; k \u003c 3; k++) add(params, nearestIn([v[k]], 56 + 4 * k, 50, 70), t1, bar - t1, bar, CHORD, ALL);\n  add(params, nearestIn(v, top - 3, 70, 86), t1, bar - t1, bar, MELODY, ALL);\n  params.composed = bar;\n  params.prog = null;\n}\n\nexport function setup(params) {\n  params.slots = [];\n  params.s = 0;\n  params.composed = 0;\n  params.tonic = 0;\n  params.minor = false;\n  params.prog = null;\n  params.phraseBar = 0;\n  params.barCount = 0;\n  params.mel = 74;\n  params.bass = 40;\n  params.voicing = [55, 60, 64];\n  // How lit each key is, and which part last held it down.\n  params.keyLevel = new Float32Array(W);\n  params.keyPart = new Int8Array(W);\n  params.open = new Int8Array(W);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(5 * 6 + 3);\n  params.hue = 0;\n  params.tempo = 2;\n  params.hands = 2;\n  params.pedal = 0.06;\n}\n\nfunction endOf(s, pedal) {\n  // Without the pedal a slot stops short of its note's length: a quarter note\n  // is cut 2.4 rows short, a whole note 3.\n  const short = s.t0 + s.d - Math.min(1.5, 0.3 * s.d);\n  const held = Math.max(short, s.hold - 0.5);\n  return short + (held - short) * pedal;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.tempo = Math.max(0.1, k[1]);\n  params.hands = Math.max(2, Math.min(5, Math.round(k[2])));\n  params.pedal = Math.max(0, Math.min(1, k[3]));\n  // Four sixteenths to a beat.\n  params.s += dt * params.tempo * 4;\n  const s = params.s;\n  const top = s + (READ - SPOOL) / R;\n  if (input.btnPressed && input.btnPressed[0]) glissando(params, Math.ceil(top / 4) * 4);\n  while (params.composed \u003c top + 8) {\n    composeBar(params, params.composed);\n    params.composed += 16;\n  }\n  // Paper that has gone under the tracker bar is wound away.\n  const slots = params.slots;\n  for (let i = slots.length - 1; i >= 0; i--) if (slots[i].hold \u003c s - 4 && slots[i].t0 + slots[i].d \u003c s - 4) slots.splice(i, 1);\n\n  // Which keys the roll holds down now.\n  const bit = 1 \u003c\u003c (params.hands - 2);\n  const open = params.open;\n  open.fill(-1);\n  for (let i = 0; i \u003c slots.length; i++) {\n    const sl = slots[i];\n    if (!(sl.mask & bit)) continue;\n    if (sl.t0 > s) continue;\n    if (endOf(sl, params.pedal) \u003c= s) continue;\n    const x = sl.p - LOW;\n    if (open[x] \u003c 0 || sl.part \u003c open[x]) open[x] = sl.part;\n  }\n  // A key rings on after it rises, longer with the pedal down.\n  const fade = Math.exp(-dt / (0.12 + 0.9 * params.pedal));\n  for (let x = 0; x \u003c W; x++) {\n    if (open[x] >= 0) {\n      params.keyLevel[x] = 1;\n      params.keyPart[x] = open[x];\n    } else params.keyLevel[x] *= fade;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const s = params.s;\n  const col = params.col;\n  const hue = params.hue;\n  // Each part's colour, pale for the light through the paper and full for a\n  // key it holds down: tune gold, bass blue, chords pink, broken chords green,\n  // and a glissando nearly white.\n  const PART_HUE = [0.12, 0.6, 0.85, 0.42, 0.0];\n  for (let i = 0; i \u003c 5; i++) {\n    hsvInto(col, i * 6, hue + PART_HUE[i], i === GLISS ? 0.1 : 0.55, 1);\n    hsvInto(col, i * 6 + 3, hue + PART_HUE[i], i === GLISS ? 0.15 : 0.9, 1);\n  }\n  // The paper, dim and cool, lit from behind. Its tint swings between teal and\n  // violet with the hue and never reaches the oranges, which read as brown this dim.\n  hsvInto(col, 30, 0.64 + 0.12 * Math.sin(2 * Math.PI * hue), 0.3, 0.16);\n  const pr = col[30];\n  const pg = col[31];\n  const pb = col[32];\n  buf.fill(0);\n  for (let y = 0; y \u003c BAR_Y; y++) {\n    let f = 1;\n    if (y \u003c SPOOL) {\n      // The wound roll: a cylinder, brightest along its middle.\n      const u = (y + 0.5 - SPOOL / 2) / (SPOOL / 2);\n      f = 3 * (1 - 0.7 * u * u);\n    } else {\n      // Printed bar lines every 32 rows.\n      const tick = s + (READ - (y + 0.5)) / R;\n      const ph = tick / 16 - Math.floor(tick / 16);\n      const d = Math.min(ph, 1 - ph) * 16 * R;\n      if (d \u003c 1) f += 0.8 * (1 - d);\n      // The spool's shadow on the paper just below it.\n      if (y === SPOOL) f *= 0.55;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      buf[o] = pr * f;\n      buf[o + 1] = pg * f;\n      buf[o + 2] = pb * f;\n    }\n  }\n  // The slots, light coming through them. The paper beside a slot catches a\n  // little of its light first, so the slots glow instead of standing as wires.\n  const bit = 1 \u003c\u003c (params.hands - 2);\n  const slots = params.slots;\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let i = 0; i \u003c slots.length; i++) {\n      const sl = slots[i];\n      if (!(sl.mask & bit)) continue;\n      const x = sl.p - LOW;\n      const yb = READ - (sl.t0 - s) * R;\n      const yt = READ - (endOf(sl, params.pedal) - s) * R;\n      const y0 = Math.max(SPOOL, Math.floor(yt));\n      const y1 = Math.min(BAR_Y - 1, Math.ceil(yb) - 1);\n      const c = sl.part * 6;\n      for (let y = y0; y \u003c= y1; y++) {\n        const cov = Math.min(y + 1, yb) - Math.max(y, yt);\n        if (cov \u003c= 0) continue;\n        if (pass === 0) {\n          const g = cov * GLOW;\n          for (let n = -1; n \u003c= 1; n += 2) {\n            const xn = x + n;\n            if (xn \u003c 0 || xn >= W) continue;\n            const o = (y * W + xn) * 3;\n            buf[o] += col[c + 3] * g;\n            buf[o + 1] += col[c + 4] * g;\n            buf[o + 2] += col[c + 5] * g;\n          }\n          continue;\n        }\n        const o = (y * W + x) * 3;\n        buf[o] = Math.max(buf[o], buf[o] + (col[c] - buf[o]) * cov);\n        buf[o + 1] = Math.max(buf[o + 1], buf[o + 1] + (col[c + 1] - buf[o + 1]) * cov);\n        buf[o + 2] = Math.max(buf[o + 2], buf[o + 2] + (col[c + 2] - buf[o + 2]) * cov);\n      }\n    }\n  // The music still wound on the spool shows on its face as dark perforations,\n  // foreshortened over the curve, travelling down as the spool turns.\n  const top = s + (READ - SPOOL) / R;\n  const rad = SPOOL / 2;\n  for (let y = 0; y \u003c SPOOL; y++) {\n    const a0 = rad * (Math.PI / 2 - Math.asin(Math.max(-1, Math.min(1, (y + 1 - rad) / rad))));\n    const a1 = rad * (Math.PI / 2 - Math.asin(Math.max(-1, Math.min(1, (y - rad) / rad))));\n    const lo = top + a0 / R;\n    const hi = top + a1 / R;\n    for (let i = 0; i \u003c slots.length; i++) {\n      const sl = slots[i];\n      if (!(sl.mask & bit) || sl.t0 >= hi) continue;\n      const e = endOf(sl, params.pedal);\n      if (e \u003c= lo) continue;\n      const cov = (Math.min(hi, e) - Math.max(lo, sl.t0)) / (hi - lo);\n      const o = (y * W + sl.p - LOW) * 3;\n      const k = 1 - 0.75 * cov;\n      buf[o] *= k;\n      buf[o + 1] *= k;\n      buf[o + 2] *= k;\n    }\n    // Brass flanges hold the roll at both ends.\n    const u = (y + 0.5 - rad) / rad;\n    const fl = 0.55 + 0.45 * (1 - u * u);\n    for (let x = 0; x \u003c W; x += W - 1) {\n      const o = (y * W + x) * 3;\n      buf[o] = 210 * fl;\n      buf[o + 1] = 170 * fl;\n      buf[o + 2] = 80 * fl;\n    }\n  }\n  // The tracker bar: brass with a row of holes.\n  const kp = params.keyPart;\n  for (let x = 0; x \u003c W; x++) {\n    const lv = params.keyLevel[x];\n    const c = kp[x] * 6 + 3;\n    for (let y = BAR_Y; y \u003c BAR_Y + 3; y++) {\n      const o = (y * W + x) * 3;\n      if (y === BAR_Y + 1) {\n        buf[o] = 14 + (col[c] - 14) * lv;\n        buf[o + 1] = 12 + (col[c + 1] - 12) * lv;\n        buf[o + 2] = 10 + (col[c + 2] - 10) * lv;\n      } else {\n        const f = y === BAR_Y ? 1 : 0.6;\n        buf[o] = 210 * f;\n        buf[o + 1] = 170 * f;\n        buf[o + 2] = 80 * f;\n      }\n    }\n    // The keys.\n    const pc = (LOW + x) % 12;\n    const black = BLACK[pc] === 1;\n    for (let y = KEY_Y; y \u003c H; y++) {\n      const o = (y * W + x) * 3;\n      let r;\n      let g;\n      let b;\n      if (black && y \u003c BLACK_END) {\n        r = 8;\n        g = 8;\n        b = 12;\n        if (y === KEY_Y) r = g = b = 30;\n      } else {\n        const front = y === H - 1 ? 0.75 : 1;\n        r = 150 * front;\n        g = 146 * front;\n        b = 134 * front;\n        if (black) {\n          r *= 0.8;\n          g *= 0.8;\n          b *= 0.8;\n        }\n      }\n      // A key that is down lights in its part's colour; a black key's column\n      // below its end belongs to the white keys either side.\n      if (lv > 0.01 && (!black || y \u003c BLACK_END)) {\n        r += (col[c] - r) * lv;\n        g += (col[c + 1] - g) * lv;\n        b += (col[c + 2] - b) * lv;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","layer":{"id":"layer-player-piano","type":"code","name":"player-piano","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Player Piano\n// Family:  music\n// Idea:    A pianola composing as it plays: a perforated roll comes off its spool and runs down over the tracker bar, and every slot that crosses the bar holds its key down and lights it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the pianola and its punched music rolls (Edwin Votey, 1895)\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=0.5..3.5, Hands=2..5, Pedal=0..1\n//\n// Knob 1: Hue. Turns the colours of the parts together, starting from a gold tune over a blue bass.\n// Knob 2: Tempo. Beats a second: 2 is 120 to the minute and the paper runs 16 LEDs a second; 0.5 is 30 to the minute, 3.5 is 210.\n// Knob 3: Hands. 2 is what one pianist plays: a tune with a second note under its long ones, and a left hand of long bass slots and chords in rows. 3 adds broken chords running up the roll as diagonals, 4 is a duet with the tune and the bass in octaves, and 5 is more than any pianist could play, adding a run of sixteenths across the whole keyboard, up one bar and down the next.\n// Knob 4: Pedal. At 0 each slot stops a little short of its note, a quarter note 2.4 rows short; turned up, the sustain pedal holds the notes on towards the bar line, and at 1 every slot runs to it, so each bar's tune and broken chords stand as staircases and the keys ring on after they rise.\n// Buttons: K1 tap punches a glissando into the roll as it leaves the spool, and the music after it is in a new key, a fourth higher.\n\nconst W = 64;\nconst H = 128;\n// One LED column per semitone: column 0 is E1, middle C is column 32, column 63 is G6.\nconst LOW = 28;\n// Rows of paper per sixteenth note: a beat is 8 rows, a bar of 4/4 is 32.\nconst R = 2;\n// The music roll on its spool, rows 0..6; the paper runs from row 7 down to the bar.\nconst SPOOL = 7;\n// The tracker bar, rows 105..107. A slot sounds while it covers the holes in row 106.\nconst BAR_Y = 105;\nconst READ = 106.5;\n// The keys, rows 109..127; black keys stop at row 119.\nconst KEY_Y = 109;\nconst BLACK_END = 120;\nconst BLACK = [0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0];\n// How much of a slot's light the paper on either side of it catches.\nconst GLOW = 0.35;\n\nconst MAJOR = [0, 2, 4, 5, 7, 9, 11];\nconst MINOR = [0, 2, 3, 5, 7, 8, 10];\n// Four chords to a progression, as scale degrees counted from 0.\nconst PROG_MAJOR = [\n  [0, 4, 5, 3],\n  [0, 5, 3, 4],\n  [1, 4, 0, 0],\n  [0, 3, 4, 0],\n  [5, 3, 0, 4],\n  [0, 2, 3, 4],\n  [0, 3, 1, 4],\n  [3, 4, 2, 5],\n];\nconst PROG_MINOR = [\n  [0, 5, 2, 6],\n  [0, 3, 4, 0],\n  [0, 6, 5, 4],\n  [0, 3, 6, 4],\n];\n// A bar of tune is one of these rhythms, in sixteenths.\nconst MOTIFS = [\n  [4, 4, 4, 4],\n  [6, 2, 4, 4],\n  [4, 2, 2, 4, 4],\n  [8, 4, 4],\n  [2, 2, 4, 2, 2, 4],\n  [3, 3, 2, 4, 4],\n  [6, 2, 6, 2],\n  [2, 2, 2, 2, 8],\n  [4, 4, 2, 2, 2, 2],\n];\nconst ENDINGS = [[4, 4, 8], [8, 8], [12, 4], [16], [6, 2, 8]];\n\n// Parts. A slot carries a mask of the Hands settings that play it: bit 0 is 2 hands, bit 3 is 5.\nconst MELODY = 0;\nconst BASS = 1;\nconst CHORD = 2;\nconst ARP = 3;\nconst GLISS = 4;\nconst ALL = 15;\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction pick(list) {\n  return list[Math.floor(Math.random() * list.length)];\n}\n\nfunction pcOf(p) {\n  return ((p % 12) + 12) % 12;\n}\n\nfunction scaleOf(params) {\n  return params.minor ? MINOR : MAJOR;\n}\n\n// The pitch classes of the triad on a scale degree; a minor key's V takes the raised leading note.\nfunction chordPcs(params, d) {\n  const sc = scaleOf(params);\n  const out = [];\n  for (let i = 0; i \u003c 3; i++) {\n    const deg = d + 2 * i;\n    let pc = sc[deg % 7];\n    if (params.minor && d === 4 && i === 1) pc += 1;\n    out.push((params.tonic + pc) % 12);\n  }\n  return out;\n}\n\nfunction scalePcs(params, chord) {\n  const sc = scaleOf(params);\n  const out = [];\n  for (let i = 0; i \u003c 7; i++) out.push((params.tonic + sc[i]) % 12);\n  // Over a minor key's V the tune uses the raised seventh too.\n  for (let i = 0; i \u003c chord.length; i++) if (out.indexOf(chord[i]) \u003c 0) out[6] = chord[i];\n  return out;\n}\n\nfunction nearestIn(pcs, target, lo, hi) {\n  let best = lo;\n  let bd = 1e9;\n  for (let p = lo; p \u003c= hi; p++) {\n    if (pcs.indexOf(pcOf(p)) \u003c 0) continue;\n    const d = Math.abs(p - target);\n    if (d \u003c bd) {\n      bd = d;\n      best = p;\n    }\n  }\n  return best;\n}\n\nfunction stepIn(pcs, p, n) {\n  const dir = n \u003c 0 ? -1 : 1;\n  for (let k = 0; k \u003c Math.abs(n); k++) {\n    p += dir;\n    while (pcs.indexOf(pcOf(p)) \u003c 0) p += dir;\n  }\n  return p;\n}\n\nfunction nextAbove(pcs, p) {\n  p++;\n  while (pcs.indexOf(pcOf(p)) \u003c 0) p++;\n  return p;\n}\n\nfunction add(params, p, t0, d, hold, part, mask) {\n  if (p \u003c LOW || p >= LOW + W) return;\n  params.slots.push({ p: p, t0: t0, d: d, hold: hold, part: part, mask: mask });\n}\n\nfunction newPhrase(params) {\n  params.prog = pick(params.minor ? PROG_MINOR : PROG_MAJOR);\n  params.rhythmA = pick(MOTIFS);\n  params.rhythmB = pick(ENDINGS);\n  // The motif's shape in scale steps: mostly one way, so a bar reads as a run.\n  const dir = Math.random() \u003c 0.5 ? -1 : 1;\n  params.stepsA = params.rhythmA.map(() => {\n    const r = Math.random();\n    if (r \u003c 0.1) return 0;\n    const n = Math.random() \u003c 0.75 ? 1 : 2;\n    return r \u003c 0.75 ? dir * n : -dir * n;\n  });\n  params.chordStyle = Math.floor(Math.random() * 4);\n  params.arpStyle = Math.floor(Math.random() * 3);\n  params.bassStyle = Math.floor(Math.random() * 2);\n  params.phraseBar = 0;\n}\n\n// One bar of music, written onto the roll from tick t.\nfunction composeBar(params, t) {\n  if (params.phraseBar >= 8 || !params.prog) {\n    if (params.prog && Math.random() \u003c 0.3) {\n      // Now and then the next phrase goes to the relative key.\n      if (params.minor) params.tonic = (params.tonic + 3) % 12;\n      else params.tonic = (params.tonic + 9) % 12;\n      params.minor = !params.minor;\n    }\n    newPhrase(params);\n  }\n  const i = params.phraseBar;\n  const degree = params.prog[i % 4];\n  const pcs = chordPcs(params, degree);\n  const scale = scalePcs(params, pcs);\n  const end = t + 16;\n\n  // The bass: the root in long slots, low in the keyboard, moving as little as it can.\n  const root = nearestIn([pcs[0]], params.bass, 33, 47);\n  params.bass = root;\n  if (params.bassStyle === 0) {\n    add(params, root, t, 16, end, BASS, ALL);\n    add(params, root - 12, t, 16, end, BASS, 12);\n  } else {\n    const fifth = nearestIn([pcs[2]], root + 5, root - 7, root + 9);\n    add(params, root, t, 8, t + 8, BASS, ALL);\n    add(params, fifth, t + 8, 8, end, BASS, ALL);\n    add(params, root - 12, t, 8, t + 8, BASS, 12);\n    add(params, fifth - 12, t + 8, 8, end, BASS, 12);\n  }\n\n  // The left hand's chords: close triads that move to the nearest inversion.\n  let best = null;\n  let bd = 1e9;\n  for (let b = 50; b \u003c= 62; b++) {\n    if (pcs.indexOf(pcOf(b)) \u003c 0) continue;\n    const v1 = nextAbove(pcs, b);\n    const v = [b, v1, nextAbove(pcs, v1)];\n    const prev = params.voicing;\n    const dist = Math.abs(v[0] - prev[0]) + Math.abs(v[1] - prev[1]) + Math.abs(v[2] - prev[2]);\n    if (dist \u003c bd) {\n      bd = dist;\n      best = v;\n    }\n  }\n  params.voicing = best;\n  const hits =\n    params.chordStyle === 0 ? [[0, 16]] : params.chordStyle === 1 ? [[0, 4], [4, 4], [8, 4], [12, 4]] : params.chordStyle === 2 ? [[4, 4], [12, 4]] : [[0, 6], [6, 10]];\n  for (let h = 0; h \u003c hits.length; h++) {\n    const at = t + hits[h][0];\n    for (let k = 0; k \u003c 3; k++) add(params, best[k], at, hits[h][1], end, CHORD, ALL);\n    add(params, best[0] + 12, at, hits[h][1], end, CHORD, 12);\n  }\n\n  // Broken chords in eighths, climbing from the root across two octaves and more.\n  const tones = [nearestIn([pcs[0]], 43, 38, 50)];\n  for (let k = 1; k \u003c 8; k++) tones.push(nextAbove(pcs, tones[k - 1]));\n  const order = params.arpStyle === 0 ? [0, 1, 2, 3, 4, 5, 6, 7] : params.arpStyle === 1 ? [0, 1, 2, 3, 4, 3, 2, 1] : [7, 6, 5, 4, 3, 2, 1, 0];\n  for (let k = 0; k \u003c 8; k++) add(params, tones[order[k]], t + 2 * k, 2, end, ARP, 14);\n  // Five hands: sixteen chord tones in sixteenths, the whole keyboard in a bar,\n  // up on one bar and down on the next.\n  const run = [nearestIn([pcs[0]], 30, 28, 39)];\n  for (let k = 1; k \u003c 16; k++) run.push(nextAbove(pcs, run[k - 1]));\n  const down = params.barCount % 2 === 1;\n  for (let k = 0; k \u003c 16; k++) add(params, run[down ? 15 - k : k], t + k, 2, end, ARP, 8);\n\n  // The tune: the motif on the first three bars of each four, set on the chord,\n  // and a cadence on the fourth.\n  const cadence = i % 4 === 3;\n  const rhythm = cadence ? params.rhythmB : params.rhythmA;\n  // Over a phrase of eight bars the tune climbs an arch of about an octave and comes down.\n  const arch = Math.sin((Math.PI * (i + 0.5)) / 8);\n  const target = 64 + 18 * arch + 4 * Math.sin(params.barCount * 1.7);\n  let p = nearestIn(pcs, target, 62, 86);\n  let at = t;\n  const notes = [];\n  for (let k = 0; k \u003c rhythm.length; k++) {\n    if (k > 0) {\n      if (cadence) {\n        // The cadence settles on a chord tone, a step or two away.\n        p = nearestIn(pcs, stepIn(scale, p, -1), p - 4, p + 2);\n      } else {\n        let q = stepIn(scale, p, params.stepsA[k] || 0);\n        if (q > 86 || q \u003c 62) q = stepIn(scale, p, -(params.stepsA[k] || 0));\n        p = q;\n      }\n    }\n    notes.push([p, at, rhythm[k]]);\n    at += rhythm[k];\n  }\n  for (let k = 0; k \u003c notes.length; k++) {\n    const n = notes[k];\n    add(params, n[0], n[1], n[2], end, MELODY, ALL);\n    add(params, n[0] - 12, n[1], n[2], end, MELODY, 12);\n    // The right hand takes a chord tone under the tune's long notes on the strong beats.\n    if (n[2] >= 4 && (n[1] - t) % 8 === 0) add(params, nearestIn(pcs, n[0] - 6, n[0] - 9, n[0] - 3), n[1], n[2], end, MELODY, ALL);\n  }\n  params.mel = p;\n  params.phraseBar++;\n  params.barCount++;\n}\n\n// A glissando up the scale over two beats, then the new key's dominant held\n// until the bar line, where the music starts again a fourth higher.\nfunction glissando(params, from) {\n  const slots = params.slots;\n  for (let i = slots.length - 1; i >= 0; i--) {\n    const s = slots[i];\n    if (s.t0 >= from) slots.splice(i, 1);\n    else {\n      if (s.t0 + s.d > from) s.d = from - s.t0;\n      if (s.hold > from) s.hold = from;\n    }\n  }\n  params.tonic = (params.tonic + 5) % 12;\n  const scale = [];\n  for (let i = 0; i \u003c 7; i++) scale.push((params.tonic + scaleOf(params)[i]) % 12);\n  const notes = [];\n  for (let p = nearestIn(scale, 34, 30, 40); p \u003c= 88; p = nextAbove(scale, p)) notes.push(p);\n  const span = 8;\n  for (let k = 0; k \u003c notes.length; k++) {\n    const t0 = from + (span * k) / notes.length;\n    add(params, notes[k], t0, 0.9, t0 + 0.9 + 3, GLISS, ALL);\n  }\n  const bar = Math.ceil((from + span + 4) / 16) * 16;\n  const v = chordPcs(params, 4);\n  const top = notes[notes.length - 1];\n  const t1 = from + span;\n  add(params, nearestIn([v[0]], 40, 33, 46), t1, bar - t1, bar, BASS, ALL);\n  for (let k = 0; k \u003c 3; k++) add(params, nearestIn([v[k]], 56 + 4 * k, 50, 70), t1, bar - t1, bar, CHORD, ALL);\n  add(params, nearestIn(v, top - 3, 70, 86), t1, bar - t1, bar, MELODY, ALL);\n  params.composed = bar;\n  params.prog = null;\n}\n\nexport function setup(params) {\n  params.slots = [];\n  params.s = 0;\n  params.composed = 0;\n  params.tonic = 0;\n  params.minor = false;\n  params.prog = null;\n  params.phraseBar = 0;\n  params.barCount = 0;\n  params.mel = 74;\n  params.bass = 40;\n  params.voicing = [55, 60, 64];\n  // How lit each key is, and which part last held it down.\n  params.keyLevel = new Float32Array(W);\n  params.keyPart = new Int8Array(W);\n  params.open = new Int8Array(W);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(5 * 6 + 3);\n  params.hue = 0;\n  params.tempo = 2;\n  params.hands = 2;\n  params.pedal = 0.06;\n}\n\nfunction endOf(s, pedal) {\n  // Without the pedal a slot stops short of its note's length: a quarter note\n  // is cut 2.4 rows short, a whole note 3.\n  const short = s.t0 + s.d - Math.min(1.5, 0.3 * s.d);\n  const held = Math.max(short, s.hold - 0.5);\n  return short + (held - short) * pedal;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.hue = k[0];\n  params.tempo = Math.max(0.1, k[1]);\n  params.hands = Math.max(2, Math.min(5, Math.round(k[2])));\n  params.pedal = Math.max(0, Math.min(1, k[3]));\n  // Four sixteenths to a beat.\n  params.s += dt * params.tempo * 4;\n  const s = params.s;\n  const top = s + (READ - SPOOL) / R;\n  if (input.btnPressed && input.btnPressed[0]) glissando(params, Math.ceil(top / 4) * 4);\n  while (params.composed \u003c top + 8) {\n    composeBar(params, params.composed);\n    params.composed += 16;\n  }\n  // Paper that has gone under the tracker bar is wound away.\n  const slots = params.slots;\n  for (let i = slots.length - 1; i >= 0; i--) if (slots[i].hold \u003c s - 4 && slots[i].t0 + slots[i].d \u003c s - 4) slots.splice(i, 1);\n\n  // Which keys the roll holds down now.\n  const bit = 1 \u003c\u003c (params.hands - 2);\n  const open = params.open;\n  open.fill(-1);\n  for (let i = 0; i \u003c slots.length; i++) {\n    const sl = slots[i];\n    if (!(sl.mask & bit)) continue;\n    if (sl.t0 > s) continue;\n    if (endOf(sl, params.pedal) \u003c= s) continue;\n    const x = sl.p - LOW;\n    if (open[x] \u003c 0 || sl.part \u003c open[x]) open[x] = sl.part;\n  }\n  // A key rings on after it rises, longer with the pedal down.\n  const fade = Math.exp(-dt / (0.12 + 0.9 * params.pedal));\n  for (let x = 0; x \u003c W; x++) {\n    if (open[x] >= 0) {\n      params.keyLevel[x] = 1;\n      params.keyPart[x] = open[x];\n    } else params.keyLevel[x] *= fade;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const s = params.s;\n  const col = params.col;\n  const hue = params.hue;\n  // Each part's colour, pale for the light through the paper and full for a\n  // key it holds down: tune gold, bass blue, chords pink, broken chords green,\n  // and a glissando nearly white.\n  const PART_HUE = [0.12, 0.6, 0.85, 0.42, 0.0];\n  for (let i = 0; i \u003c 5; i++) {\n    hsvInto(col, i * 6, hue + PART_HUE[i], i === GLISS ? 0.1 : 0.55, 1);\n    hsvInto(col, i * 6 + 3, hue + PART_HUE[i], i === GLISS ? 0.15 : 0.9, 1);\n  }\n  // The paper, dim and cool, lit from behind. Its tint swings between teal and\n  // violet with the hue and never reaches the oranges, which read as brown this dim.\n  hsvInto(col, 30, 0.64 + 0.12 * Math.sin(2 * Math.PI * hue), 0.3, 0.16);\n  const pr = col[30];\n  const pg = col[31];\n  const pb = col[32];\n  buf.fill(0);\n  for (let y = 0; y \u003c BAR_Y; y++) {\n    let f = 1;\n    if (y \u003c SPOOL) {\n      // The wound roll: a cylinder, brightest along its middle.\n      const u = (y + 0.5 - SPOOL / 2) / (SPOOL / 2);\n      f = 3 * (1 - 0.7 * u * u);\n    } else {\n      // Printed bar lines every 32 rows.\n      const tick = s + (READ - (y + 0.5)) / R;\n      const ph = tick / 16 - Math.floor(tick / 16);\n      const d = Math.min(ph, 1 - ph) * 16 * R;\n      if (d \u003c 1) f += 0.8 * (1 - d);\n      // The spool's shadow on the paper just below it.\n      if (y === SPOOL) f *= 0.55;\n    }\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      buf[o] = pr * f;\n      buf[o + 1] = pg * f;\n      buf[o + 2] = pb * f;\n    }\n  }\n  // The slots, light coming through them. The paper beside a slot catches a\n  // little of its light first, so the slots glow instead of standing as wires.\n  const bit = 1 \u003c\u003c (params.hands - 2);\n  const slots = params.slots;\n  for (let pass = 0; pass \u003c 2; pass++)\n    for (let i = 0; i \u003c slots.length; i++) {\n      const sl = slots[i];\n      if (!(sl.mask & bit)) continue;\n      const x = sl.p - LOW;\n      const yb = READ - (sl.t0 - s) * R;\n      const yt = READ - (endOf(sl, params.pedal) - s) * R;\n      const y0 = Math.max(SPOOL, Math.floor(yt));\n      const y1 = Math.min(BAR_Y - 1, Math.ceil(yb) - 1);\n      const c = sl.part * 6;\n      for (let y = y0; y \u003c= y1; y++) {\n        const cov = Math.min(y + 1, yb) - Math.max(y, yt);\n        if (cov \u003c= 0) continue;\n        if (pass === 0) {\n          const g = cov * GLOW;\n          for (let n = -1; n \u003c= 1; n += 2) {\n            const xn = x + n;\n            if (xn \u003c 0 || xn >= W) continue;\n            const o = (y * W + xn) * 3;\n            buf[o] += col[c + 3] * g;\n            buf[o + 1] += col[c + 4] * g;\n            buf[o + 2] += col[c + 5] * g;\n          }\n          continue;\n        }\n        const o = (y * W + x) * 3;\n        buf[o] = Math.max(buf[o], buf[o] + (col[c] - buf[o]) * cov);\n        buf[o + 1] = Math.max(buf[o + 1], buf[o + 1] + (col[c + 1] - buf[o + 1]) * cov);\n        buf[o + 2] = Math.max(buf[o + 2], buf[o + 2] + (col[c + 2] - buf[o + 2]) * cov);\n      }\n    }\n  // The music still wound on the spool shows on its face as dark perforations,\n  // foreshortened over the curve, travelling down as the spool turns.\n  const top = s + (READ - SPOOL) / R;\n  const rad = SPOOL / 2;\n  for (let y = 0; y \u003c SPOOL; y++) {\n    const a0 = rad * (Math.PI / 2 - Math.asin(Math.max(-1, Math.min(1, (y + 1 - rad) / rad))));\n    const a1 = rad * (Math.PI / 2 - Math.asin(Math.max(-1, Math.min(1, (y - rad) / rad))));\n    const lo = top + a0 / R;\n    const hi = top + a1 / R;\n    for (let i = 0; i \u003c slots.length; i++) {\n      const sl = slots[i];\n      if (!(sl.mask & bit) || sl.t0 >= hi) continue;\n      const e = endOf(sl, params.pedal);\n      if (e \u003c= lo) continue;\n      const cov = (Math.min(hi, e) - Math.max(lo, sl.t0)) / (hi - lo);\n      const o = (y * W + sl.p - LOW) * 3;\n      const k = 1 - 0.75 * cov;\n      buf[o] *= k;\n      buf[o + 1] *= k;\n      buf[o + 2] *= k;\n    }\n    // Brass flanges hold the roll at both ends.\n    const u = (y + 0.5 - rad) / rad;\n    const fl = 0.55 + 0.45 * (1 - u * u);\n    for (let x = 0; x \u003c W; x += W - 1) {\n      const o = (y * W + x) * 3;\n      buf[o] = 210 * fl;\n      buf[o + 1] = 170 * fl;\n      buf[o + 2] = 80 * fl;\n    }\n  }\n  // The tracker bar: brass with a row of holes.\n  const kp = params.keyPart;\n  for (let x = 0; x \u003c W; x++) {\n    const lv = params.keyLevel[x];\n    const c = kp[x] * 6 + 3;\n    for (let y = BAR_Y; y \u003c BAR_Y + 3; y++) {\n      const o = (y * W + x) * 3;\n      if (y === BAR_Y + 1) {\n        buf[o] = 14 + (col[c] - 14) * lv;\n        buf[o + 1] = 12 + (col[c + 1] - 12) * lv;\n        buf[o + 2] = 10 + (col[c + 2] - 10) * lv;\n      } else {\n        const f = y === BAR_Y ? 1 : 0.6;\n        buf[o] = 210 * f;\n        buf[o + 1] = 170 * f;\n        buf[o + 2] = 80 * f;\n      }\n    }\n    // The keys.\n    const pc = (LOW + x) % 12;\n    const black = BLACK[pc] === 1;\n    for (let y = KEY_Y; y \u003c H; y++) {\n      const o = (y * W + x) * 3;\n      let r;\n      let g;\n      let b;\n      if (black && y \u003c BLACK_END) {\n        r = 8;\n        g = 8;\n        b = 12;\n        if (y === KEY_Y) r = g = b = 30;\n      } else {\n        const front = y === H - 1 ? 0.75 : 1;\n        r = 150 * front;\n        g = 146 * front;\n        b = 134 * front;\n        if (black) {\n          r *= 0.8;\n          g *= 0.8;\n          b *= 0.8;\n        }\n      }\n      // A key that is down lights in its part's colour; a black key's column\n      // below its end belongs to the white keys either side.\n      if (lv > 0.01 && (!black || y \u003c BLACK_END)) {\n        r += (col[c] - r) * lv;\n        g += (col[c + 1] - g) * lv;\n        b += (col[c + 2] - b) * lv;\n      }\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Tempo=0.5..3.5, Hands=2..5, Pedal=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours of the parts together, starting from a gold tune over a blue bass."},{"name":"Tempo","min":0.5,"max":3.5,"about":"Beats a second: 2 is 120 to the minute and the paper runs 16 LEDs a second; 0.5 is 30 to the minute, 3.5 is 210."},{"name":"Hands","min":2,"max":5,"about":"2 is what one pianist plays: a tune with a second note under its long ones, and a left hand of long bass slots and chords in rows. 3 adds broken chords running up the roll as diagonals, 4 is a duet with the tune and the bass in octaves, and 5 is more than any pianist could play, adding a run of sixteenths across the whole keyboard, up one bar and down the next."},{"name":"Pedal","min":0,"max":1,"about":"At 0 each slot stops a little short of its note, a quarter note 2.4 rows short; turned up, the sustain pedal holds the notes on towards the bar line, and at 1 every slot runs to it, so each bar's tune and broken chords stand as staircases and the keys ring on after they rise."}],"start":[0,2,2,0.06],"measures":{"motion":0.3229,"detail":0.0822,"edges":0.6181,"complexity":0.1256,"coverage":0.9461,"colour":0.1765,"drift":0.0751},"knobResponse":[0.0626,0.0796,0.0519,0.0503]},{"slug":"pop-up-book","title":"Pop-up Book","family":"paper","round":21,"note":"탁자에 펼친 팝업북에서 성과 숲, 등대, 도시가 종이 카드 여러 겹으로 일어서고, 그동안 달이 홈을 따라 가고 사슴이 고개를 숙여요. 페이지가 넘어가면 장면이 가운데 접힌 선으로 납작하게 눕고, 넘어오는 페이지에서 다음 장면이 일어나요.","idea":"A pop-up book lies open under a reading lamp: each spread's cut-card scene stands up out of the gutter in layers and its paper parts move, until the page turns over, folds it flat and raises the next.","buttons":"K1 tap turns the page now.","code":"// ===== Patternflow pattern =====\n// Title:   Pop-up Book\n// Family:  paper\n// Idea:    A pop-up book lies open under a reading lamp: each spread's cut-card scene stands up out of the gutter in layers and its paper parts move, until the page turns over, folds it flat and raises the next.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after layered pop-up books, tunnel books and the pull-tab movable books of the nineteenth century\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Spread=0..3, Speed=0.2..3, Layers=4..6, Lamp=0..1\n//\n// Knob 1: Spread. Which spread the book is open at: a castle at dusk at 0, a pine forest with a stag at 1, a lighthouse at night at 2, a city at 3. Turned, the book leafs over to it and reads on from there.\n// Knob 2: Speed. How fast the pages and the paper parts go: at 2 a spread stands seven seconds and a page turns in under three.\n// Knob 3: Layers. How many cards stand: sky, main piece, front strip and a flying piece at 4, hills, a swell with a sailing boat or a far skyline at 5, and at 6 a tunnel-book frame across the front (a rose arch, pine boughs, a sea cave, a theatre curtain).\n// Knob 4: Lamp. Where the light comes from: a warm lamp low on the left at 0, overhead at 0.5, cool daylight from the right at 1. The folds swap their lit and shaded faces and the shadows swing.\n// Buttons: K1 tap turns the page now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The gutter's row, a page's depth (the tallest a card may stand), and how far\n// a unit of depth climbs the panel for a viewer a little above the book.\nconst [G, D, K] = [102, 74, 0.2];\n// Cards 56 wide from column 4, pages 58 from column 3, the table's back edge.\nconst [CW, X0, PW, P0, TB] = [56, 4, 58, 3, 80];\n// A texel on a face turned to the left or to the right.\nconst [LF, RF] = [64, 128];\nconst [STAND, TURN, OPEN] = [0, 1, 2];\n// The order cards rise in: the main piece first, the sky last but for the frame.\nconst ORDER = [4, 0, 1, 3, 2, 5];\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\n\n// Card and paper colours. Lit windows, the beam and a lit gateway glow on their own.\nconst PAL = [[0, 0, 0]], EM = new Uint8Array(64);\nconst [stone, ink, dark, roof, yel, peach, pink, mauve, violet, hill, white, cream, green, greend, wood, warm, blush, skyw, skyl, skyb, mtn, mtnd, snow, fir, firl, firb, trunk, deer, fly, fern, grey, navy, night, sea, sead, teal, red, glow, rock, black, dusk, mag, indigo, sky2, brick, cteal, purple, glass, win, street, paper, text, cloth] = \"dccdb0 ad987c 2a2034 cc3a44 fccc46 fab270 ec7884 ac5492 5c3a8e 40346c f8f6ee faeec4 5aa850 287040 9c6234 f8b860 fadece fadeb0 b0d8f0 76b0e6 7084b8 56689c eef4fa 1c643e 3c8c50 2c6c6c 70462a be7640 dc2828 82c450 9696a0 162058 283a80 245cb2 183c8c 2896a8 d63034 fff0ac 5c5c70 1e1e26 f4885a b0487c 3e347c 48548c a4483c 3a7c7c 70508a 5a6e96 ffd66e 484854 ece0c6 483e3c 8c2430\"\n  .split(\" \")\n  .map((h) => PAL.push([0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16))) - 1);\nEM[win] = EM[glow] = EM[warm] = 1;\n\n// Drawing on a card: x 0..55, y up from the fold at its foot.\nlet T, TH;\nconst put = (x, y, c) => ((x = round(x)), (y = round(y)), x >= 0 && x \u003c CW && y >= 0 && y \u003c TH && (T[y * CW + x] = c));\nconst rect = (x0, y0, x1, y1, c) => {\n  for (let y = round(y0); y \u003c= y1; y++) for (let x = round(x0); x \u003c= x1; x++) put(x, y, c);\n};\nconst rects = (list) => list.forEach((r) => rect(...r));\n// A body narrowing from half width a to b over rows y0..y1, its left half on a\n// face turned left and its right half turned right: towers, tiers, roofs.\nconst cone = (cx, y0, y1, a, b, c) => {\n  for (let y = y0; y \u003c= y1; y++) for (let w = a + ((b - a) * (y - y0)) / max(1, y1 - y0), x = ceil(cx - w - 0.01); x \u003c= cx + w + 0.01; x++) put(x, y, c | (x \u003c cx - 0.3 ? LF : x > cx + 0.3 ? RF : 0));\n};\nconst disc = (cx, cy, r, c) => {\n  for (let y = floor(cy - r); y \u003c= cy + r; y++) for (let x = floor(cx - r); x \u003c= cx + r; x++) if ((x - cx) ** 2 + (y - cy) ** 2 \u003c= r * r) put(x, y, c);\n};\nconst line = (x0, y0, x1, y1, c) => {\n  for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0), 1); i \u003c= n; i++) put(x0 + ((x1 - x0) * i) / n, y0 + ((y1 - y0) * i) / n, c);\n};\n// Ground up to f(x), each slope on the face it turns to.\nconst ridge = (f, c) => {\n  for (let x = 0; x \u003c CW; x++) for (let y = 0, h = f(x), s = f(x + 0.5) - f(x - 0.5); y \u003c= h; y++) put(x, y, c | (s > 0.15 ? LF : s \u003c -0.15 ? RF : 0));\n};\n// The sky card at the back: bands of paper under a scalloped top, with stars.\nconst sky = (bands, stars) => {\n  for (let x = 0; x \u003c CW; x++)\n    for (let y = 0, top = 54 + round(7 * abs(sin(x * 0.2 + 0.6))), i; y \u003c= top; y++) {\n      for (i = 0; i + 1 \u003c bands.length && y + 2 * sin(x * 0.3 + y * 0.07) >= bands[i + 1]; ) i += 2;\n      put(x, y, bands[i]);\n    }\n  for (let n = 0; n \u003c stars; n++) put(2 + rnd() * 52, 36 + rnd() * 16, white);\n};\n// The moon rides a slot cut in the sky card.\nconst slot = () => {\n  for (let s = 0.12; s \u003c 0.88; s += 0.01) put(28 - 21 * cos(PI * s), 30 + 21 * sin(PI * s), mauve);\n};\nconst moon = (P, s = PI * (0.18 + 0.32 * (1 + sin(P.t * 0.3)))) => disc(28 - 21 * cos(s), 30 + 21 * sin(s), 4.3, cream);\nconst cloud = (cx, cy, n, c) => {\n  for (let k = 0; k \u003c n; k++) disc(cx + (k - (n - 1) / 2) * 3.2, cy + (k % 2) * 1.3, 2.4, c);\n};\nconst windows = (x0, x1, y0, y1, dx, dy, lit) => {\n  for (let y = y0; y \u003c= y1; y += dy) for (let x = x0; x \u003c= x1; x += dx) put(x, y, rnd() \u003c lit ? win : black);\n};\nconst pine = (cx, h, w, c) => {\n  rect(cx - 1, 0, cx + 1, 5, trunk);\n  for (let i = 0, s = (h - 6) / 5, y0, ww; i \u003c 5; i++) (y0 = round(4 + i * s)), cone(cx, y0, min(h - 1, round(y0 + s * 1.7)), (ww = w * (1 - i * 0.16)), 0.4, c), cone(cx, y0, y0, ww, ww, firl);\n};\nconst birds = (P, list, c) =>\n  list.forEach(([x0, y, v], i) => {\n    for (let n = 0, w = sin(P.t * 9 + i * 2) > 0 ? 1 : -1, x = x0 + ((P.t * v) % 60); n \u003c 2; n++, x -= 60) for (const [a, b] of [[0, 0], [-1, w > 0], [1, w > 0], [-2, w], [2, w]]) put(x + a, y + b, c);\n  });\nconst waves = (o, top, amp, k, deep, lt) => {\n  for (let x = 0; x \u003c CW; x++)\n    for (let y = 0, u = (x + o) * k, h = top + amp * abs(sin(u)), s = cos(u) * Math.sign(sin(u)); y \u003c= h; y++) put(x, y, (y > h - 1.2 ? white : y > h - 3 ? lt : deep) | (s > 0.2 ? LF : s \u003c -0.2 ? RF : 0));\n};\n// A tunnel-book frame with an arch cut out: c the card, e the rim, f flecks.\n// Pleated, it hangs in folds like a curtain.\nconst frame = (c, e, f, pleat) => {\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const dx = abs(x - 27.5), n = pleat ? 0 : 1.4 * sin(y * 0.9 + x * 2.1) + sin(y * 0.4 - x), w = (y \u003c 40 ? 21 : 21 * sqrt(max(0, 1 - ((y - 40) / 22) ** 2))) + n;\n      if (dx >= w && y \u003c TH - (pleat ? 0 : 3 * abs(sin(x * 0.35)))) put(x, y, (dx \u003c w + 1.3 ? e : f && rnd() \u003c 0.1 ? f : c) | (pleat ? (x % 4 \u003c 2 ? LF : RF) : n > 0.4 ? LF : n \u003c -0.4 ? RF : 0));\n    }\n};\n\n// A castle at dusk: a keep between two towers, turrets on the curtain wall,\n// pennants that flap and a drawbridge that comes down when the tab is pulled.\nconst castle = () => {\n  rect(9, 0, 46, 15, stone);\n  cone(27, 0, 33, 5.5, 5.5, stone);\n  for (let x = 9; x \u003c= 46; x += 4) rect(x, 16, x + 1, 17, stone), x \u003c 32 && x > 20 && rect(x + 1, 34, x + 2, 35, stone);\n  for (const cx of [10, 45]) cone(cx, 0, 25, 3, 3, stone), cone(cx, 26, 34, 4, 0, roof), rect(cx, 13, cx, 15, dark);\n  for (const cx of [18, 36]) cone(cx, 0, 41, 4, 4, stone), cone(cx, 42, 54, 5, 0, roof), rect(cx, 21, cx, 24, dark), rect(cx, 31, cx, 34, dark);\n  // Printed stone courses.\n  for (let p = 0, x, y; p \u003c T.length; p++) if ((T[p] & 63) === stone && ((y = floor(p / CW)) % 5 === 4 || (y % 5 === 1 && ((x = p % CW) + floor(y / 5) * 3) % 7 === 0))) T[p] = (T[p] & 192) | ink;\n  rects([[24, 19, 25, 22, win], [29, 19, 30, 22, win], [25, 0, 29, 7, warm], [26, 8, 28, 8, warm], [26, 0, 26, 7, dark], [28, 0, 28, 7, dark], [26, 11, 28, 16, roof]]);\n  disc(27, 28, 2.3, win);\n  put(27, 28, dark);\n  put(27, 14, yel);\n};\nconst castleDyn = (P) => {\n  for (const cx of [18, 36]) {\n    rect(cx, 55, cx, 61, dark);\n    for (let i = 1, y; i \u003c= 5; i++) put(cx + i, (y = 60 + round(sin(P.t * 7 - i * 0.9) * i * 0.25)), i % 2 ? yel : roof), i \u003c 4 && put(cx + i, y - 1, yel);\n  }\n  const hb = round(8 * cos(P.pull * 1.45));\n  rect(25, 0, 29, hb, wood);\n  for (let y = 1; y \u003c hb; y += 2) rect(25, y, 29, y, trunk);\n  line(24, 9, 25, hb, dark);\n  line(30, 9, 29, hb, dark);\n};\n// A pine forest in the morning; the stag in the clearing grazes when the tab is pulled.\nconst mountains = () => {\n  sky([skyw, 10, skyl, 30, skyb], 0);\n  for (const [px, ph, s, c] of [[31, 50, 1.25, mtn], [10, 39, 1.4, mtnd], [48, 41, 1.3, mtnd]])\n    for (let x = 0; x \u003c CW; x++) for (let y = 0, top = ph - abs(x - px) * s; y \u003c= top; y++) put(x, y, (y > ph - 8 + 2 * sin(x * 1.7) ? snow : c) | (x \u003c px ? LF : x > px ? RF : 0));\n};\nconst sun = (P) => {\n  disc(44, 55, 3.3, yel);\n  for (let k = 0, a; k \u003c 8; k++) (a = P.t * 0.5 + (k * PI) / 4), line(44 + 4.6 * cos(a), 55 + 4.6 * sin(a), 44 + 6.5 * cos(a), 55 + 6.5 * sin(a), yel);\n};\nconst stag = (P) => {\n  const a = mix(2.05, 3.95, P.pull), hx = 24 + 7 * cos(a), hy = 10 + 7 * sin(a), b = a - 1.15;\n  for (const lx of [24, 26, 31, 33]) rect(lx, 0, lx, 5, trunk);\n  rects([[23, 6, 34, 10, deer], [24, 11, 33, 11, deer], [33, 8, 35, 11, white], [hx - 2, hy - 1, hx, hy, deer]]);\n  line(24, 10, hx, hy, deer);\n  line(25, 10, hx + 1, hy, deer);\n  put(hx - 3, hy - 1, dark);\n  put(hx + 1, hy + 1, deer);\n  for (const [l, o] of [[5, 0], [3.5, 0.6], [3, -0.5]]) line(hx, hy + 1, hx + l * cos(b + o), hy + 1 + l * sin(b + o), trunk);\n};\nconst ferns = () => {\n  ridge((x) => 1 + 0.8 * sin(x * 0.9) + (x % 7 === 3 ? 2 : 0), green);\n  for (const [x, h] of [[9, 3], [13, 2], [21, 4]]) rect(x, 0, x, h - 1, white), rect(x - 1, h, x + 1, h + 1, fly), put(x, h + 1, white);\n  for (const cx of [3, 17, 31, 53]) for (let k = -2; k \u003c= 2; k++) line(cx, 0, cx + k * 1.4, 5 - abs(k) * 0.8, fern);\n};\n\n// A lighthouse at night over paper waves; its beam is a card on a wheel,\n// long when it swings left, short when right, a flash when it faces us.\nconst lighthouse = () => {\n  ridge((x) => (x \u003c 17 ? -1 : 12 + 3 * sin(x * 0.5) + 2 * sin(x * 1.3) - max(0, 26 - x) * 1.2), rock);\n  cone(40, 12, 50, 5, 3, white);\n  for (let p = 12 * CW; p \u003c 51 * CW; p++) if ((T[p] & 63) === white && floor(p / CW - 12) % 10 \u003c 5) T[p] = (T[p] & 192) | red;\n  rects([[40, 12, 40, 15, black], [40, 30, 40, 30, black], [40, 41, 40, 41, black], [34, 51, 46, 51, black], [37, 52, 43, 56, win], [39, 52, 39, 56, black], [41, 52, 41, 56, black], [40, 62, 40, 63, black], [25, 10, 31, 15, white], [26, 13, 26, 13, win], [30, 13, 30, 13, win], [28, 10, 28, 12, black]]);\n  for (let x = 34; x \u003c= 46; x += 2) put(x, 52, black);\n  cone(40, 57, 61, 4, 0.5, red);\n  cone(28, 16, 19, 4.5, 0.5, red);\n};\nconst beam = (P) => {\n  const a = P.t * 1.3, s = sin(a), d = s > 0 ? -1 : 1;\n  for (let i = 1; i \u003c= (s > 0 ? 38 : 14) * abs(s); i++) for (let w = 0.5 + i * 0.09, y = round(54 - w); y \u003c= 54 + w; y++) put(40 + d * (3 + i), y, glow);\n  if (cos(a) > 0.6) disc(40, 54, 1 + 6 * (cos(a) - 0.6), glow);\n};\n// A sailing boat rocks on the swell.\nconst boats = (P) => {\n  const b = round(sin(P.t * 1.6));\n  rects([[11, 4 + b, 17, 5 + b, wood], [12, 3 + b, 16, 3 + b, wood], [14, 6 + b, 14, 17 + b, dark], [15, 17 + b, 15, 17 + b, red]]);\n  for (let y = 7; y \u003c= 16; y++) rect(15, y + b, 15 + (16 - y) * 0.6, y + b, white), y > 7 && rect(13 - (16 - y) * 0.35, y + b, 13, y + b, white);\n};\n\n// A city at nightfall: a clock tower whose hands turn on their wheel, a tram\n// in the street and a balloon over the roofs.\nconst city = () => {\n  cone(10, 0, 47, 5, 5, glass), cone(10, 48, 51, 3.5, 3.5, glass), cone(10, 52, 55, 2, 2, glass), cone(38, 0, 45, 4, 4, stone), cone(38, 46, 55, 5, 0, roof), cone(49, 44, 46, 3, 0.5, wood);\n  rects([[10, 56, 10, 63, grey], [16, 0, 23, 31, brick], [15, 32, 24, 32, brick], [24, 0, 32, 23, cteal], [25, 0, 31, 2, white], [38, 56, 38, 58, black], [43, 0, 54, 35, purple], [47, 39, 51, 43, wood], [47, 36, 47, 38, black], [51, 36, 51, 38, black]]);\n  windows(6, 14, 3, 45, 2, 3, 0.45), windows(17, 22, 3, 29, 2, 3, 0.4), windows(25, 31, 3, 21, 3, 3, 0.5), windows(36, 40, 4, 32, 4, 4, 0.5), windows(44, 53, 3, 33, 3, 3, 0.4);\n  disc(38, 39, 3.2, white);\n};\nconst clock = (P) => {\n  for (const [a, l] of [[-P.t * 1.2, 2.6], [1 - P.t * 0.1, 1.7]]) line(38, 39, 38 + l * cos(a), 39 + l * sin(a), black);\n};\nconst tram = (P) => {\n  const x = round(2 + 38 * (0.5 - 0.5 * cos(P.t * 0.45)));\n  rects([[x, 1, x + 13, 6, red], [x, 4, x + 13, 4, paper], [x + 1, 7, x + 12, 7, red], [x + 2, 0, x + 2, 0, black], [x + 11, 0, x + 11, 0, black]]);\n  for (let i = 0; i \u003c 6; i++) put(x + 1 + i * 2, 5, win);\n  line(x + 6, 8, x + 8, 11, black);\n};\nconst balloon = (P) => {\n  const x = 15 + 4 * sin(P.t * 0.2), y = 45 + 1.5 * sin(P.t * 0.9);\n  for (let yy = -4; yy \u003c= 4; yy++) for (let w = sqrt(20 - yy * yy) * (yy \u003c 0 ? 1 + yy * 0.1 : 1), xx = round(x - w); xx \u003c= x + w; xx++) put(xx, y + yy, (floor(xx - x + 9) % 3 ? red : yel) | (xx \u003c x - 1 ? LF : xx > x + 1 ? RF : 0));\n  rect(x - 1, y - 8, x + 1, y - 7, wood);\n  line(x - 2, y - 4, x - 1, y - 6, dark);\n  line(x + 2, y - 4, x + 1, y - 6, dark);\n};\nconst skyline = () => {\n  for (let x = 0, w, h; x \u003c CW; x += w) rect(x, 0, x + (w = 3 + floor(rnd() * 4)) - 1, (h = 12 + floor(rnd() * 20)), sky2), windows(x + 1, x + w - 2, 2, h - 1, 2, 3, 0.25);\n};\n\n// Each spread: the far page's print, the initial's colour, the card backs, and\n// the cards as [depth behind the gutter, height, folds forward, art, moving\n// part]. The first four stand at Layers 4.\nconst SPREADS = [\n  [\n    (x, r) => (r > 1 && r \u003c 8 ? sea : (x * 7 + r * 13) % 41 ? green : yel),\n    roof,\n    mauve,\n    [\n      [68, 64, 1, () => (sky([peach, 13, pink, 25, mauve, 38, violet], 14), slot(), ridge((x) => 5 + 2.5 * sin(x * 0.22 + 1) + 1.6 * sin(x * 0.61), hill)), moon],\n      [14, 62, 0, castle, castleDyn],\n      [4, 12, 0, () => {\n        ridge((x) => (x > 22 && x \u003c 32 ? -1 : 3.5 + 2.4 * abs(sin(x * 0.5 + 0.3))), greend);\n        for (let n = 0, x, y; n \u003c 30; n++) T[(y = floor(rnd() * 5)) * CW + (x = floor(rnd() * CW))] && put(x, y, [yel, pink, white][n % 3]);\n      }],\n      [56, 56, 1, () => (cloud(10, 49, 4, blush), cloud(45, 43, 3, blush), cloud(30, 53, 2, blush)), (P) => birds(P, [[6, 46, 2.6], [30, 51, 3.2], [44, 39, 2.2]], dark)],\n      [40, 30, 1, () => ((h) => (ridge(h, green), [3, 7, 48, 13, 41].forEach((x) => (rect(x, h(x), x, h(x) + 2, trunk), disc(x, h(x) + 3.5, 2, greend)))))((x) => 12 + 9 * sin(x * 0.07 + 0.4) ** 2 + 2 * sin(x * 0.4))],\n      [2, 70, 0, () => frame(greend, green, pink)],\n    ],\n  ],\n  [\n    (x, r) => (abs(x - 22 - 7 * sin(r * 0.09)) \u003c 2 ? ((x + r) % 9 ? skyb : white) : (x * 11 + r * 7) % 23 ? firl : trunk),\n    greend,\n    mtnd,\n    [\n      [68, 64, 1, mountains, sun],\n      [14, 62, 0, () => (rect(0, 0, 55, 1, firl), pine(7, 62, 7, fir), pine(48, 56, 7, fir), pine(40, 30, 4, fir)), stag],\n      [4, 10, 0, ferns],\n      [56, 56, 1, () => (cloud(12, 49, 3, white), cloud(42, 45, 2, white)), (P) => birds(P, [[4, 44, 3], [24, 50, 3.4], [40, 47, 2.8]], dark)],\n      [40, 34, 1, () => ((h) => (ridge(h, green), [2, 7, 12, 17, 22, 27, 32, 37, 42, 47, 52].forEach((x) => cone(x, round(h(x)) - 1, round(h(x)) + 6 + (x % 3) * 2, 2, 0, firb))))((x) => 12 + 6 * sin(x * 0.13 + 1) + 3 * sin(x * 0.4))],\n      [2, 70, 0, () => frame(fir, firl, trunk)],\n    ],\n  ],\n  [\n    (x, r) => (r % 8 === round(3 + 2 * sin(x * 0.7 + r)) ? white : r % 16 \u003c 8 ? sea : sead),\n    red,\n    night,\n    [\n      [68, 64, 1, () => (sky([sead, 7, night, 24, navy], 24), disc(11, 48, 5, cream), disc(13.5, 49.5, 4.4, navy))],\n      [14, 64, 0, lighthouse, beam],\n      [4, 13, 0, null, (P) => waves(3 * sin(P.t * 0.8), 5, 5, 0.27, sead, sea)],\n      [56, 56, 1, () => [...Array(32)].forEach((_, i, a, s = sin(i * 0.3 + 0.6)) => rect(i + 2, 46 + s, i + 2, 47 + s + (i > 6 && i \u003c 26), sky2)), (P) => birds(P, [[10, 40, 4], [36, 48, 3.3]], white)],\n      [40, 22, 1, () => waves(0, 8, 3, 0.35, sea, teal), boats],\n      [2, 70, 0, () => frame(rock, grey, teal)],\n    ],\n  ],\n  [\n    (x, r) => (r \u003c 6 ? grey : abs(r - 34) \u003c 2 && x % 8 \u003c 4 ? yel : street),\n    indigo,\n    indigo,\n    [\n      [68, 64, 1, () => (sky([dusk, 9, mag, 19, indigo, 33, navy], 10), slot()), moon],\n      [14, 64, 0, city, clock],\n      [4, 14, 0, () => (rect(0, 0, 55, 0, black), [5, 28, 50].forEach((x) => rects([[x, 0, x, 9, black], [x - 1, 10, x + 1, 11, win], [x, 12, x, 12, black]]))), tram],\n      [56, 56, 1, () => (cloud(40, 50, 3, sky2), cloud(10, 40, 2, sky2)), balloon],\n      [40, 34, 1, skyline],\n      [2, 70, 0, () => frame(red, yel, 0, 1)],\n    ],\n  ],\n];\n\nconst pageTex = (f) => Uint8Array.from({ length: PW * D }, (_, i) => f(i % PW, floor(i / PW)));\n// The near page: lines of print, a coloured initial, a page number. A line is\n// five units deep so it shows as one row of the panel when the page lies flat.\nfunction nearTex(cap) {\n  return pageTex((x, r, l = floor(r / 10) - 1) =>\n    r > 7 && r \u003c 25 && x > 4 && x \u003c 9 ? cap : (r % 10 > 4 && l >= 0 && l \u003c 5 && x > (l \u003c 2 ? 9 : 4) && x \u003c PW - 5 && sin(x * 1.9 + l * 3) + sin(x * 0.7 + l * 5) > -0.8) || (r > 69 && abs(x - 28.5) \u003c 2) ? text : paper,\n  );\n}\n// The front cover: cloth and a gold-edged label with a red seal and a title.\nconst coverTex = () => pageTex((x, r, a = abs(x - 28.5), b = abs(r - 34)) => (a > 14 || b > 19 ? cloth : a > 13 || b > 18 ? yel : a \u003c 6 && r \u003c 32 && r > 20 ? roof : r % 4 > 1 && r > 37 && a \u003c 9 ? text : paper));\n\nconst build = ([far, cap, back, cards]) => ({\n  far: pageTex(far),\n  near: nearTex(cap),\n  back: PAL[back],\n  cards: cards.map(([zb, h, fwd, art, dyn]) => ((T = new Uint8Array(CW * h)), (TH = h), art && art(), { zb, h, fwd, tex: T, work: dyn ? new Uint8Array(CW * h) : T, dyn })),\n});\n\n// The lamp: where its light comes from, its colour, and the room in its pool.\nfunction paint(P) {\n  const a = (P.lamp - 0.5) * 2.6, wm = 1 - P.lamp, L = [sin(a) * 0.8, 0.55 + 0.2 * cos(a), -0.8], n = Math.hypot(...L), lx = 32 + sin(a) * 34, tx = 32 + sin(a) * 20;\n  P.L = L.map((v) => v / n);\n  P.lc = [mix(0.86, 1.08, wm), mix(0.94, 0.9, wm), mix(1.08, 0.66, wm)];\n  P.sx = P.L[0] \u003c -0.25 ? 1 : P.L[0] > 0.25 ? -1 : 0;\n  for (let p = 0, x, y, c, s; p \u003c N; p++) {\n    (x = p & 63), (y = p >> 6);\n    if (y \u003c TB) (s = (0.55 + 0.85 * exp(-(((x - lx) / 30) ** 2) - ((y - 34) / 46) ** 2)) * ((x + 3) % 8 ? 1 : 0.86) * (y > TB - 3 ? 0.7 : 1)), (c = [46, 40, 62]);\n    else (s = (0.5 + 0.8 * exp(-(((x - tx) / 30) ** 2) - ((y - 104) / 26) ** 2)) * (0.86 + 0.14 * sin(y * 1.9 + 2 * sin(x * 0.11 + y * 0.5)))), (c = [96, 60, 36]);\n    for (let i = 0; i \u003c 3; i++) P.bg[p * 3 + i] = c[i] * s * P.lc[i];\n  }\n}\n\n// A card hinged at (Yb, Zb), w wide from column x0, its height along (dy, dz).\n// From behind it shows bk: a page's other face or a card's plain colour. A\n// page is a card hinged at the spine, darker into the gutter.\nfunction card(P, tex, bk, w, x0, h, Yb, Zb, dy, dz, bias, page) {\n  const { buf, zb, L, lc } = P, f0 = dy + dz * K, s = f0 > 0 ? 1 : -1, f = s * max(abs(f0), 0.03), y0 = G - Yb - Zb * K, side = -P.sx;\n  // Light on the face, and on the faces turned left and right.\n  const m = [-0.7, 0, 0.7].map((nx, j, _, q = j === 1 ? s : 0.7 * s, d = 0.7 * max(0, nx * L[0] + q * dz * L[1] - q * dy * L[2])) => [0.4 + d * lc[0], 0.42 + d * lc[1], 0.48 + d * lc[2]]);\n  for (let y = max(0, floor(f > 0 ? y0 - h * f : y0)), y1 = min(H, ceil(f > 0 ? y0 : y0 - h * f)); y \u003c y1; y++) {\n    const v = (y0 - y - 0.5) / f, ty = floor(v), z = Zb + v * dz - bias, row = ty * w, g = page && v \u003c 8 ? 0.7 + 0.0375 * v : 1;\n    for (let x = 0, tc, p, o, ci, c, k, e; x \u003c w && v >= 0 && v \u003c h; x++) {\n      if (!(tc = tex[row + x]) || z >= zb[(p = y * W + x0 + x)]) continue;\n      (zb[p] = z), (o = p * 3), (ci = s > 0 ? tc & 63 : 0), (c = s > 0 ? PAL[ci] : bk.length > 3 ? PAL[bk[row + x]] : bk), (k = m[s > 0 && tc & LF ? 0 : s > 0 && tc & RF ? 2 : 1]);\n      // The white core of the card shows along a cut edge that faces the light.\n      e = s \u003c 0 ? 0 : ty + 1 >= h || !tex[row + w + x] ? 0.45 : side && (x + side \u003c 0 || x + side >= w || !tex[row + x + side]) ? 0.3 : 0;\n      for (let i = 0; i \u003c 3; i++) buf[o + i] = (c[i] + (248 - c[i]) * e) * (EM[ci] ? 1 : k[i]) * g;\n    }\n  }\n}\n\n// One spread's cards opened by open(j), turned by rho about the spine: 0 on the\n// far page, PI - phi riding the leaf. Flat, a card folded back lies on top.\nfunction scene(P, S, open, rho) {\n  const cr = cos(rho), sr = sin(rho), wob = P.mode === STAND ? P.timer : 9;\n  S.cards.forEach((c, i) => {\n    if (i >= P.layers) return;\n    const lam = ((1 - open(ORDER[i])) * PI) / 2 + 0.16 * sin(wob * 15 - i) * exp(-wob * 4), yc = cos(lam), zc = (c.fwd ? -1 : 1) * sin(lam);\n    if (c.dyn) c.work.set(c.tex), (T = c.work), (TH = c.h), c.dyn(P);\n    card(P, c.work, S.back, CW, X0, c.h, c.zb * sr, c.zb * cr, zc * sr + yc * cr, zc * cr - yc * sr, c.fwd ? 0.3 : 0.6);\n  });\n}\n\nconst stand = (P, stay) => Object.assign(P, { mode: STAND, timer: 0, stay });\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { buf: new Float32Array(N * 3), bg: new Float32Array(N * 3), zb: new Float32Array(N), t: 0, lamp: -1, mode: OPEN, timer: 0, phi: PI, cur: -1, next: 0, ask: 0, layers: 4, pull: 0 });\n  P.sc = SPREADS.map(build);\n  P.cover = coverTex();\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], rate = cl(k[1], 0.2, 3) / 2, d = cl(dt, 0, 0.1) * rate, want = cl(round(k[0]), 0, 3), lamp = cl(k[3], 0, 1);\n  P.layers = cl(round(k[2]), 4, 6);\n  if (abs(lamp - P.lamp) > 0.002) (P.lamp = lamp), paint(P);\n  if (P.cur \u003c 0) P.cur = P.base = want;\n  if (want !== P.base) (P.base = want), (P.ask = 1);\n  if (input.btnPressed?.[0]) P.ask = 2;\n  P.t += d;\n  P.pull = sm(0.5 + 1.3 * sin(P.t * 0.9 - 1));\n  if (P.mode === OPEN) {\n    // The cover swings open toward the viewer, never slower than at Speed 1.2.\n    P.phi = PI * (1 - sm((P.timer += cl(dt, 0, 0.1) * max(rate, 0.6)) / 1.6));\n    if (P.timer >= 1.6) stand(P, 1.7);\n  } else if (P.mode === STAND) {\n    // The knob asks for its own spread, the button for the next.\n    if (P.ask === 1 && P.base === P.cur) P.ask = 0;\n    if ((P.timer += d) >= P.stay || P.ask) Object.assign(P, { mode: TURN, timer: 0, next: P.ask === 1 ? P.base : (P.cur + 1) % 4, ask: 0 });\n  } else if ((P.phi = PI * sm((P.timer += d) / 2.8)) && P.timer >= 2.8) (P.cur = P.next), stand(P, 7);\n}\n\n// One LED of plain card under the lamp, at depth z.\nconst px = (P, p, c, k, z) => ((P.zb[p] = z), PAL[c].forEach((v, i) => (P.buf[p * 3 + i] = v * k * P.lc[i])));\n\nexport function draw(display, params) {\n  const P = params, { buf, phi } = P, A = P.sc[P.cur], deg = (phi * 180) / PI, open = P.mode === OPEN, B = P.mode === TURN ? P.sc[P.next] : null, nr = (B || A).near;\n  buf.set(P.bg);\n  // The table takes shadows, the wall behind does not.\n  P.zb.fill(1e9).fill(500, TB * W);\n  // The cover boards round the pages, and the edges of the page block.\n  for (let x = 2; x \u003c 62; x++) px(P, 86 * W + x, cloth, 0.7, 90), open || [paper, grey, cloth].forEach((c, i) => px(P, (117 + i) * W + x, c, 0.85 - i * 0.1, 90));\n  for (let y = 87; y \u003c (open ? 102 : 120); y++) px(P, y * W + 2, cloth, 0.8, 90), px(P, y * W + 61, cloth, 0.6, 90);\n  card(P, A.far, A.far, PW, P0, D, 0, 0, 0, 1, 0, 1);\n  if (!open) card(P, nr, nr, PW, P0, D, 0, 0, 0, -1, 0, 1);\n  if (P.mode !== STAND) {\n    // The leaf, and its own edge, a line of bare card.\n    const y = floor(G - D * (sin(phi) - K * cos(phi))), z = -D * cos(phi) - 0.6;\n    card(P, B ? B.far : P.cover, A.near, PW, P0, D, 0, 0, sin(phi), -cos(phi), 0, 1);\n    for (let x = P0, p; x \u003c P0 + PW && y >= 0 && y \u003c H; x++) if (z \u003c P.zb[(p = y * W + x)]) px(P, p, open ? cloth : white, 0.9, z);\n  }\n  if (P.mode === STAND || deg \u003c 170) scene(P, A, (j) => (P.mode === STAND ? 1 : 1 - sm((deg - 5 * j) / 80)), 0);\n  if (B && deg > 14) scene(P, B, (j) => sm((deg - 92 - 6 * j) / (80 - 6 * j)), PI - phi);\n  // The pull-tab at the side of the near page.\n  for (let y = 108, e = round(P.pull * 2); y \u003c= 110 && !open; y++) for (let x = 59; x \u003c= 61 + e; x++) px(P, y * W + x, x === 61 + e && y === 109 ? roof : paper, 0.8, -50);\n  // Every card's shadow on what stands behind it, a step away from the lamp.\n  for (let p = 3 * W, z, k, sx = P.sx, zb = P.zb; p \u003c N; p++) if ((z = zb[p]) \u003c 1e8 && (k = zb[p - W - sx] \u003c z - 3 ? 0.58 : zb[p - 2 * W - 2 * sx] \u003c z - 3 ? 0.78 : 1) \u003c 1) for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] *= k;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-pop-up-book","type":"code","name":"pop-up-book","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pop-up Book\n// Family:  paper\n// Idea:    A pop-up book lies open under a reading lamp: each spread's cut-card scene stands up out of the gutter in layers and its paper parts move, until the page turns over, folds it flat and raises the next.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after layered pop-up books, tunnel books and the pull-tab movable books of the nineteenth century\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Spread=0..3, Speed=0.2..3, Layers=4..6, Lamp=0..1\n//\n// Knob 1: Spread. Which spread the book is open at: a castle at dusk at 0, a pine forest with a stag at 1, a lighthouse at night at 2, a city at 3. Turned, the book leafs over to it and reads on from there.\n// Knob 2: Speed. How fast the pages and the paper parts go: at 2 a spread stands seven seconds and a page turns in under three.\n// Knob 3: Layers. How many cards stand: sky, main piece, front strip and a flying piece at 4, hills, a swell with a sailing boat or a far skyline at 5, and at 6 a tunnel-book frame across the front (a rose arch, pine boughs, a sea cave, a theatre curtain).\n// Knob 4: Lamp. Where the light comes from: a warm lamp low on the left at 0, overhead at 0.5, cool daylight from the right at 1. The folds swap their lit and shaded faces and the shadows swing.\n// Buttons: K1 tap turns the page now.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The gutter's row, a page's depth (the tallest a card may stand), and how far\n// a unit of depth climbs the panel for a viewer a little above the book.\nconst [G, D, K] = [102, 74, 0.2];\n// Cards 56 wide from column 4, pages 58 from column 3, the table's back edge.\nconst [CW, X0, PW, P0, TB] = [56, 4, 58, 3, 80];\n// A texel on a face turned to the left or to the right.\nconst [LF, RF] = [64, 128];\nconst [STAND, TURN, OPEN] = [0, 1, 2];\n// The order cards rise in: the main piece first, the sky last but for the frame.\nconst ORDER = [4, 0, 1, 3, 2, 5];\nconst { min, max, floor, ceil, round, sin, cos, abs, sqrt, exp, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\n\n// Card and paper colours. Lit windows, the beam and a lit gateway glow on their own.\nconst PAL = [[0, 0, 0]], EM = new Uint8Array(64);\nconst [stone, ink, dark, roof, yel, peach, pink, mauve, violet, hill, white, cream, green, greend, wood, warm, blush, skyw, skyl, skyb, mtn, mtnd, snow, fir, firl, firb, trunk, deer, fly, fern, grey, navy, night, sea, sead, teal, red, glow, rock, black, dusk, mag, indigo, sky2, brick, cteal, purple, glass, win, street, paper, text, cloth] = \"dccdb0 ad987c 2a2034 cc3a44 fccc46 fab270 ec7884 ac5492 5c3a8e 40346c f8f6ee faeec4 5aa850 287040 9c6234 f8b860 fadece fadeb0 b0d8f0 76b0e6 7084b8 56689c eef4fa 1c643e 3c8c50 2c6c6c 70462a be7640 dc2828 82c450 9696a0 162058 283a80 245cb2 183c8c 2896a8 d63034 fff0ac 5c5c70 1e1e26 f4885a b0487c 3e347c 48548c a4483c 3a7c7c 70508a 5a6e96 ffd66e 484854 ece0c6 483e3c 8c2430\"\n  .split(\" \")\n  .map((h) => PAL.push([0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16))) - 1);\nEM[win] = EM[glow] = EM[warm] = 1;\n\n// Drawing on a card: x 0..55, y up from the fold at its foot.\nlet T, TH;\nconst put = (x, y, c) => ((x = round(x)), (y = round(y)), x >= 0 && x \u003c CW && y >= 0 && y \u003c TH && (T[y * CW + x] = c));\nconst rect = (x0, y0, x1, y1, c) => {\n  for (let y = round(y0); y \u003c= y1; y++) for (let x = round(x0); x \u003c= x1; x++) put(x, y, c);\n};\nconst rects = (list) => list.forEach((r) => rect(...r));\n// A body narrowing from half width a to b over rows y0..y1, its left half on a\n// face turned left and its right half turned right: towers, tiers, roofs.\nconst cone = (cx, y0, y1, a, b, c) => {\n  for (let y = y0; y \u003c= y1; y++) for (let w = a + ((b - a) * (y - y0)) / max(1, y1 - y0), x = ceil(cx - w - 0.01); x \u003c= cx + w + 0.01; x++) put(x, y, c | (x \u003c cx - 0.3 ? LF : x > cx + 0.3 ? RF : 0));\n};\nconst disc = (cx, cy, r, c) => {\n  for (let y = floor(cy - r); y \u003c= cy + r; y++) for (let x = floor(cx - r); x \u003c= cx + r; x++) if ((x - cx) ** 2 + (y - cy) ** 2 \u003c= r * r) put(x, y, c);\n};\nconst line = (x0, y0, x1, y1, c) => {\n  for (let i = 0, n = max(abs(x1 - x0), abs(y1 - y0), 1); i \u003c= n; i++) put(x0 + ((x1 - x0) * i) / n, y0 + ((y1 - y0) * i) / n, c);\n};\n// Ground up to f(x), each slope on the face it turns to.\nconst ridge = (f, c) => {\n  for (let x = 0; x \u003c CW; x++) for (let y = 0, h = f(x), s = f(x + 0.5) - f(x - 0.5); y \u003c= h; y++) put(x, y, c | (s > 0.15 ? LF : s \u003c -0.15 ? RF : 0));\n};\n// The sky card at the back: bands of paper under a scalloped top, with stars.\nconst sky = (bands, stars) => {\n  for (let x = 0; x \u003c CW; x++)\n    for (let y = 0, top = 54 + round(7 * abs(sin(x * 0.2 + 0.6))), i; y \u003c= top; y++) {\n      for (i = 0; i + 1 \u003c bands.length && y + 2 * sin(x * 0.3 + y * 0.07) >= bands[i + 1]; ) i += 2;\n      put(x, y, bands[i]);\n    }\n  for (let n = 0; n \u003c stars; n++) put(2 + rnd() * 52, 36 + rnd() * 16, white);\n};\n// The moon rides a slot cut in the sky card.\nconst slot = () => {\n  for (let s = 0.12; s \u003c 0.88; s += 0.01) put(28 - 21 * cos(PI * s), 30 + 21 * sin(PI * s), mauve);\n};\nconst moon = (P, s = PI * (0.18 + 0.32 * (1 + sin(P.t * 0.3)))) => disc(28 - 21 * cos(s), 30 + 21 * sin(s), 4.3, cream);\nconst cloud = (cx, cy, n, c) => {\n  for (let k = 0; k \u003c n; k++) disc(cx + (k - (n - 1) / 2) * 3.2, cy + (k % 2) * 1.3, 2.4, c);\n};\nconst windows = (x0, x1, y0, y1, dx, dy, lit) => {\n  for (let y = y0; y \u003c= y1; y += dy) for (let x = x0; x \u003c= x1; x += dx) put(x, y, rnd() \u003c lit ? win : black);\n};\nconst pine = (cx, h, w, c) => {\n  rect(cx - 1, 0, cx + 1, 5, trunk);\n  for (let i = 0, s = (h - 6) / 5, y0, ww; i \u003c 5; i++) (y0 = round(4 + i * s)), cone(cx, y0, min(h - 1, round(y0 + s * 1.7)), (ww = w * (1 - i * 0.16)), 0.4, c), cone(cx, y0, y0, ww, ww, firl);\n};\nconst birds = (P, list, c) =>\n  list.forEach(([x0, y, v], i) => {\n    for (let n = 0, w = sin(P.t * 9 + i * 2) > 0 ? 1 : -1, x = x0 + ((P.t * v) % 60); n \u003c 2; n++, x -= 60) for (const [a, b] of [[0, 0], [-1, w > 0], [1, w > 0], [-2, w], [2, w]]) put(x + a, y + b, c);\n  });\nconst waves = (o, top, amp, k, deep, lt) => {\n  for (let x = 0; x \u003c CW; x++)\n    for (let y = 0, u = (x + o) * k, h = top + amp * abs(sin(u)), s = cos(u) * Math.sign(sin(u)); y \u003c= h; y++) put(x, y, (y > h - 1.2 ? white : y > h - 3 ? lt : deep) | (s > 0.2 ? LF : s \u003c -0.2 ? RF : 0));\n};\n// A tunnel-book frame with an arch cut out: c the card, e the rim, f flecks.\n// Pleated, it hangs in folds like a curtain.\nconst frame = (c, e, f, pleat) => {\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c CW; x++) {\n      const dx = abs(x - 27.5), n = pleat ? 0 : 1.4 * sin(y * 0.9 + x * 2.1) + sin(y * 0.4 - x), w = (y \u003c 40 ? 21 : 21 * sqrt(max(0, 1 - ((y - 40) / 22) ** 2))) + n;\n      if (dx >= w && y \u003c TH - (pleat ? 0 : 3 * abs(sin(x * 0.35)))) put(x, y, (dx \u003c w + 1.3 ? e : f && rnd() \u003c 0.1 ? f : c) | (pleat ? (x % 4 \u003c 2 ? LF : RF) : n > 0.4 ? LF : n \u003c -0.4 ? RF : 0));\n    }\n};\n\n// A castle at dusk: a keep between two towers, turrets on the curtain wall,\n// pennants that flap and a drawbridge that comes down when the tab is pulled.\nconst castle = () => {\n  rect(9, 0, 46, 15, stone);\n  cone(27, 0, 33, 5.5, 5.5, stone);\n  for (let x = 9; x \u003c= 46; x += 4) rect(x, 16, x + 1, 17, stone), x \u003c 32 && x > 20 && rect(x + 1, 34, x + 2, 35, stone);\n  for (const cx of [10, 45]) cone(cx, 0, 25, 3, 3, stone), cone(cx, 26, 34, 4, 0, roof), rect(cx, 13, cx, 15, dark);\n  for (const cx of [18, 36]) cone(cx, 0, 41, 4, 4, stone), cone(cx, 42, 54, 5, 0, roof), rect(cx, 21, cx, 24, dark), rect(cx, 31, cx, 34, dark);\n  // Printed stone courses.\n  for (let p = 0, x, y; p \u003c T.length; p++) if ((T[p] & 63) === stone && ((y = floor(p / CW)) % 5 === 4 || (y % 5 === 1 && ((x = p % CW) + floor(y / 5) * 3) % 7 === 0))) T[p] = (T[p] & 192) | ink;\n  rects([[24, 19, 25, 22, win], [29, 19, 30, 22, win], [25, 0, 29, 7, warm], [26, 8, 28, 8, warm], [26, 0, 26, 7, dark], [28, 0, 28, 7, dark], [26, 11, 28, 16, roof]]);\n  disc(27, 28, 2.3, win);\n  put(27, 28, dark);\n  put(27, 14, yel);\n};\nconst castleDyn = (P) => {\n  for (const cx of [18, 36]) {\n    rect(cx, 55, cx, 61, dark);\n    for (let i = 1, y; i \u003c= 5; i++) put(cx + i, (y = 60 + round(sin(P.t * 7 - i * 0.9) * i * 0.25)), i % 2 ? yel : roof), i \u003c 4 && put(cx + i, y - 1, yel);\n  }\n  const hb = round(8 * cos(P.pull * 1.45));\n  rect(25, 0, 29, hb, wood);\n  for (let y = 1; y \u003c hb; y += 2) rect(25, y, 29, y, trunk);\n  line(24, 9, 25, hb, dark);\n  line(30, 9, 29, hb, dark);\n};\n// A pine forest in the morning; the stag in the clearing grazes when the tab is pulled.\nconst mountains = () => {\n  sky([skyw, 10, skyl, 30, skyb], 0);\n  for (const [px, ph, s, c] of [[31, 50, 1.25, mtn], [10, 39, 1.4, mtnd], [48, 41, 1.3, mtnd]])\n    for (let x = 0; x \u003c CW; x++) for (let y = 0, top = ph - abs(x - px) * s; y \u003c= top; y++) put(x, y, (y > ph - 8 + 2 * sin(x * 1.7) ? snow : c) | (x \u003c px ? LF : x > px ? RF : 0));\n};\nconst sun = (P) => {\n  disc(44, 55, 3.3, yel);\n  for (let k = 0, a; k \u003c 8; k++) (a = P.t * 0.5 + (k * PI) / 4), line(44 + 4.6 * cos(a), 55 + 4.6 * sin(a), 44 + 6.5 * cos(a), 55 + 6.5 * sin(a), yel);\n};\nconst stag = (P) => {\n  const a = mix(2.05, 3.95, P.pull), hx = 24 + 7 * cos(a), hy = 10 + 7 * sin(a), b = a - 1.15;\n  for (const lx of [24, 26, 31, 33]) rect(lx, 0, lx, 5, trunk);\n  rects([[23, 6, 34, 10, deer], [24, 11, 33, 11, deer], [33, 8, 35, 11, white], [hx - 2, hy - 1, hx, hy, deer]]);\n  line(24, 10, hx, hy, deer);\n  line(25, 10, hx + 1, hy, deer);\n  put(hx - 3, hy - 1, dark);\n  put(hx + 1, hy + 1, deer);\n  for (const [l, o] of [[5, 0], [3.5, 0.6], [3, -0.5]]) line(hx, hy + 1, hx + l * cos(b + o), hy + 1 + l * sin(b + o), trunk);\n};\nconst ferns = () => {\n  ridge((x) => 1 + 0.8 * sin(x * 0.9) + (x % 7 === 3 ? 2 : 0), green);\n  for (const [x, h] of [[9, 3], [13, 2], [21, 4]]) rect(x, 0, x, h - 1, white), rect(x - 1, h, x + 1, h + 1, fly), put(x, h + 1, white);\n  for (const cx of [3, 17, 31, 53]) for (let k = -2; k \u003c= 2; k++) line(cx, 0, cx + k * 1.4, 5 - abs(k) * 0.8, fern);\n};\n\n// A lighthouse at night over paper waves; its beam is a card on a wheel,\n// long when it swings left, short when right, a flash when it faces us.\nconst lighthouse = () => {\n  ridge((x) => (x \u003c 17 ? -1 : 12 + 3 * sin(x * 0.5) + 2 * sin(x * 1.3) - max(0, 26 - x) * 1.2), rock);\n  cone(40, 12, 50, 5, 3, white);\n  for (let p = 12 * CW; p \u003c 51 * CW; p++) if ((T[p] & 63) === white && floor(p / CW - 12) % 10 \u003c 5) T[p] = (T[p] & 192) | red;\n  rects([[40, 12, 40, 15, black], [40, 30, 40, 30, black], [40, 41, 40, 41, black], [34, 51, 46, 51, black], [37, 52, 43, 56, win], [39, 52, 39, 56, black], [41, 52, 41, 56, black], [40, 62, 40, 63, black], [25, 10, 31, 15, white], [26, 13, 26, 13, win], [30, 13, 30, 13, win], [28, 10, 28, 12, black]]);\n  for (let x = 34; x \u003c= 46; x += 2) put(x, 52, black);\n  cone(40, 57, 61, 4, 0.5, red);\n  cone(28, 16, 19, 4.5, 0.5, red);\n};\nconst beam = (P) => {\n  const a = P.t * 1.3, s = sin(a), d = s > 0 ? -1 : 1;\n  for (let i = 1; i \u003c= (s > 0 ? 38 : 14) * abs(s); i++) for (let w = 0.5 + i * 0.09, y = round(54 - w); y \u003c= 54 + w; y++) put(40 + d * (3 + i), y, glow);\n  if (cos(a) > 0.6) disc(40, 54, 1 + 6 * (cos(a) - 0.6), glow);\n};\n// A sailing boat rocks on the swell.\nconst boats = (P) => {\n  const b = round(sin(P.t * 1.6));\n  rects([[11, 4 + b, 17, 5 + b, wood], [12, 3 + b, 16, 3 + b, wood], [14, 6 + b, 14, 17 + b, dark], [15, 17 + b, 15, 17 + b, red]]);\n  for (let y = 7; y \u003c= 16; y++) rect(15, y + b, 15 + (16 - y) * 0.6, y + b, white), y > 7 && rect(13 - (16 - y) * 0.35, y + b, 13, y + b, white);\n};\n\n// A city at nightfall: a clock tower whose hands turn on their wheel, a tram\n// in the street and a balloon over the roofs.\nconst city = () => {\n  cone(10, 0, 47, 5, 5, glass), cone(10, 48, 51, 3.5, 3.5, glass), cone(10, 52, 55, 2, 2, glass), cone(38, 0, 45, 4, 4, stone), cone(38, 46, 55, 5, 0, roof), cone(49, 44, 46, 3, 0.5, wood);\n  rects([[10, 56, 10, 63, grey], [16, 0, 23, 31, brick], [15, 32, 24, 32, brick], [24, 0, 32, 23, cteal], [25, 0, 31, 2, white], [38, 56, 38, 58, black], [43, 0, 54, 35, purple], [47, 39, 51, 43, wood], [47, 36, 47, 38, black], [51, 36, 51, 38, black]]);\n  windows(6, 14, 3, 45, 2, 3, 0.45), windows(17, 22, 3, 29, 2, 3, 0.4), windows(25, 31, 3, 21, 3, 3, 0.5), windows(36, 40, 4, 32, 4, 4, 0.5), windows(44, 53, 3, 33, 3, 3, 0.4);\n  disc(38, 39, 3.2, white);\n};\nconst clock = (P) => {\n  for (const [a, l] of [[-P.t * 1.2, 2.6], [1 - P.t * 0.1, 1.7]]) line(38, 39, 38 + l * cos(a), 39 + l * sin(a), black);\n};\nconst tram = (P) => {\n  const x = round(2 + 38 * (0.5 - 0.5 * cos(P.t * 0.45)));\n  rects([[x, 1, x + 13, 6, red], [x, 4, x + 13, 4, paper], [x + 1, 7, x + 12, 7, red], [x + 2, 0, x + 2, 0, black], [x + 11, 0, x + 11, 0, black]]);\n  for (let i = 0; i \u003c 6; i++) put(x + 1 + i * 2, 5, win);\n  line(x + 6, 8, x + 8, 11, black);\n};\nconst balloon = (P) => {\n  const x = 15 + 4 * sin(P.t * 0.2), y = 45 + 1.5 * sin(P.t * 0.9);\n  for (let yy = -4; yy \u003c= 4; yy++) for (let w = sqrt(20 - yy * yy) * (yy \u003c 0 ? 1 + yy * 0.1 : 1), xx = round(x - w); xx \u003c= x + w; xx++) put(xx, y + yy, (floor(xx - x + 9) % 3 ? red : yel) | (xx \u003c x - 1 ? LF : xx > x + 1 ? RF : 0));\n  rect(x - 1, y - 8, x + 1, y - 7, wood);\n  line(x - 2, y - 4, x - 1, y - 6, dark);\n  line(x + 2, y - 4, x + 1, y - 6, dark);\n};\nconst skyline = () => {\n  for (let x = 0, w, h; x \u003c CW; x += w) rect(x, 0, x + (w = 3 + floor(rnd() * 4)) - 1, (h = 12 + floor(rnd() * 20)), sky2), windows(x + 1, x + w - 2, 2, h - 1, 2, 3, 0.25);\n};\n\n// Each spread: the far page's print, the initial's colour, the card backs, and\n// the cards as [depth behind the gutter, height, folds forward, art, moving\n// part]. The first four stand at Layers 4.\nconst SPREADS = [\n  [\n    (x, r) => (r > 1 && r \u003c 8 ? sea : (x * 7 + r * 13) % 41 ? green : yel),\n    roof,\n    mauve,\n    [\n      [68, 64, 1, () => (sky([peach, 13, pink, 25, mauve, 38, violet], 14), slot(), ridge((x) => 5 + 2.5 * sin(x * 0.22 + 1) + 1.6 * sin(x * 0.61), hill)), moon],\n      [14, 62, 0, castle, castleDyn],\n      [4, 12, 0, () => {\n        ridge((x) => (x > 22 && x \u003c 32 ? -1 : 3.5 + 2.4 * abs(sin(x * 0.5 + 0.3))), greend);\n        for (let n = 0, x, y; n \u003c 30; n++) T[(y = floor(rnd() * 5)) * CW + (x = floor(rnd() * CW))] && put(x, y, [yel, pink, white][n % 3]);\n      }],\n      [56, 56, 1, () => (cloud(10, 49, 4, blush), cloud(45, 43, 3, blush), cloud(30, 53, 2, blush)), (P) => birds(P, [[6, 46, 2.6], [30, 51, 3.2], [44, 39, 2.2]], dark)],\n      [40, 30, 1, () => ((h) => (ridge(h, green), [3, 7, 48, 13, 41].forEach((x) => (rect(x, h(x), x, h(x) + 2, trunk), disc(x, h(x) + 3.5, 2, greend)))))((x) => 12 + 9 * sin(x * 0.07 + 0.4) ** 2 + 2 * sin(x * 0.4))],\n      [2, 70, 0, () => frame(greend, green, pink)],\n    ],\n  ],\n  [\n    (x, r) => (abs(x - 22 - 7 * sin(r * 0.09)) \u003c 2 ? ((x + r) % 9 ? skyb : white) : (x * 11 + r * 7) % 23 ? firl : trunk),\n    greend,\n    mtnd,\n    [\n      [68, 64, 1, mountains, sun],\n      [14, 62, 0, () => (rect(0, 0, 55, 1, firl), pine(7, 62, 7, fir), pine(48, 56, 7, fir), pine(40, 30, 4, fir)), stag],\n      [4, 10, 0, ferns],\n      [56, 56, 1, () => (cloud(12, 49, 3, white), cloud(42, 45, 2, white)), (P) => birds(P, [[4, 44, 3], [24, 50, 3.4], [40, 47, 2.8]], dark)],\n      [40, 34, 1, () => ((h) => (ridge(h, green), [2, 7, 12, 17, 22, 27, 32, 37, 42, 47, 52].forEach((x) => cone(x, round(h(x)) - 1, round(h(x)) + 6 + (x % 3) * 2, 2, 0, firb))))((x) => 12 + 6 * sin(x * 0.13 + 1) + 3 * sin(x * 0.4))],\n      [2, 70, 0, () => frame(fir, firl, trunk)],\n    ],\n  ],\n  [\n    (x, r) => (r % 8 === round(3 + 2 * sin(x * 0.7 + r)) ? white : r % 16 \u003c 8 ? sea : sead),\n    red,\n    night,\n    [\n      [68, 64, 1, () => (sky([sead, 7, night, 24, navy], 24), disc(11, 48, 5, cream), disc(13.5, 49.5, 4.4, navy))],\n      [14, 64, 0, lighthouse, beam],\n      [4, 13, 0, null, (P) => waves(3 * sin(P.t * 0.8), 5, 5, 0.27, sead, sea)],\n      [56, 56, 1, () => [...Array(32)].forEach((_, i, a, s = sin(i * 0.3 + 0.6)) => rect(i + 2, 46 + s, i + 2, 47 + s + (i > 6 && i \u003c 26), sky2)), (P) => birds(P, [[10, 40, 4], [36, 48, 3.3]], white)],\n      [40, 22, 1, () => waves(0, 8, 3, 0.35, sea, teal), boats],\n      [2, 70, 0, () => frame(rock, grey, teal)],\n    ],\n  ],\n  [\n    (x, r) => (r \u003c 6 ? grey : abs(r - 34) \u003c 2 && x % 8 \u003c 4 ? yel : street),\n    indigo,\n    indigo,\n    [\n      [68, 64, 1, () => (sky([dusk, 9, mag, 19, indigo, 33, navy], 10), slot()), moon],\n      [14, 64, 0, city, clock],\n      [4, 14, 0, () => (rect(0, 0, 55, 0, black), [5, 28, 50].forEach((x) => rects([[x, 0, x, 9, black], [x - 1, 10, x + 1, 11, win], [x, 12, x, 12, black]]))), tram],\n      [56, 56, 1, () => (cloud(40, 50, 3, sky2), cloud(10, 40, 2, sky2)), balloon],\n      [40, 34, 1, skyline],\n      [2, 70, 0, () => frame(red, yel, 0, 1)],\n    ],\n  ],\n];\n\nconst pageTex = (f) => Uint8Array.from({ length: PW * D }, (_, i) => f(i % PW, floor(i / PW)));\n// The near page: lines of print, a coloured initial, a page number. A line is\n// five units deep so it shows as one row of the panel when the page lies flat.\nfunction nearTex(cap) {\n  return pageTex((x, r, l = floor(r / 10) - 1) =>\n    r > 7 && r \u003c 25 && x > 4 && x \u003c 9 ? cap : (r % 10 > 4 && l >= 0 && l \u003c 5 && x > (l \u003c 2 ? 9 : 4) && x \u003c PW - 5 && sin(x * 1.9 + l * 3) + sin(x * 0.7 + l * 5) > -0.8) || (r > 69 && abs(x - 28.5) \u003c 2) ? text : paper,\n  );\n}\n// The front cover: cloth and a gold-edged label with a red seal and a title.\nconst coverTex = () => pageTex((x, r, a = abs(x - 28.5), b = abs(r - 34)) => (a > 14 || b > 19 ? cloth : a > 13 || b > 18 ? yel : a \u003c 6 && r \u003c 32 && r > 20 ? roof : r % 4 > 1 && r > 37 && a \u003c 9 ? text : paper));\n\nconst build = ([far, cap, back, cards]) => ({\n  far: pageTex(far),\n  near: nearTex(cap),\n  back: PAL[back],\n  cards: cards.map(([zb, h, fwd, art, dyn]) => ((T = new Uint8Array(CW * h)), (TH = h), art && art(), { zb, h, fwd, tex: T, work: dyn ? new Uint8Array(CW * h) : T, dyn })),\n});\n\n// The lamp: where its light comes from, its colour, and the room in its pool.\nfunction paint(P) {\n  const a = (P.lamp - 0.5) * 2.6, wm = 1 - P.lamp, L = [sin(a) * 0.8, 0.55 + 0.2 * cos(a), -0.8], n = Math.hypot(...L), lx = 32 + sin(a) * 34, tx = 32 + sin(a) * 20;\n  P.L = L.map((v) => v / n);\n  P.lc = [mix(0.86, 1.08, wm), mix(0.94, 0.9, wm), mix(1.08, 0.66, wm)];\n  P.sx = P.L[0] \u003c -0.25 ? 1 : P.L[0] > 0.25 ? -1 : 0;\n  for (let p = 0, x, y, c, s; p \u003c N; p++) {\n    (x = p & 63), (y = p >> 6);\n    if (y \u003c TB) (s = (0.55 + 0.85 * exp(-(((x - lx) / 30) ** 2) - ((y - 34) / 46) ** 2)) * ((x + 3) % 8 ? 1 : 0.86) * (y > TB - 3 ? 0.7 : 1)), (c = [46, 40, 62]);\n    else (s = (0.5 + 0.8 * exp(-(((x - tx) / 30) ** 2) - ((y - 104) / 26) ** 2)) * (0.86 + 0.14 * sin(y * 1.9 + 2 * sin(x * 0.11 + y * 0.5)))), (c = [96, 60, 36]);\n    for (let i = 0; i \u003c 3; i++) P.bg[p * 3 + i] = c[i] * s * P.lc[i];\n  }\n}\n\n// A card hinged at (Yb, Zb), w wide from column x0, its height along (dy, dz).\n// From behind it shows bk: a page's other face or a card's plain colour. A\n// page is a card hinged at the spine, darker into the gutter.\nfunction card(P, tex, bk, w, x0, h, Yb, Zb, dy, dz, bias, page) {\n  const { buf, zb, L, lc } = P, f0 = dy + dz * K, s = f0 > 0 ? 1 : -1, f = s * max(abs(f0), 0.03), y0 = G - Yb - Zb * K, side = -P.sx;\n  // Light on the face, and on the faces turned left and right.\n  const m = [-0.7, 0, 0.7].map((nx, j, _, q = j === 1 ? s : 0.7 * s, d = 0.7 * max(0, nx * L[0] + q * dz * L[1] - q * dy * L[2])) => [0.4 + d * lc[0], 0.42 + d * lc[1], 0.48 + d * lc[2]]);\n  for (let y = max(0, floor(f > 0 ? y0 - h * f : y0)), y1 = min(H, ceil(f > 0 ? y0 : y0 - h * f)); y \u003c y1; y++) {\n    const v = (y0 - y - 0.5) / f, ty = floor(v), z = Zb + v * dz - bias, row = ty * w, g = page && v \u003c 8 ? 0.7 + 0.0375 * v : 1;\n    for (let x = 0, tc, p, o, ci, c, k, e; x \u003c w && v >= 0 && v \u003c h; x++) {\n      if (!(tc = tex[row + x]) || z >= zb[(p = y * W + x0 + x)]) continue;\n      (zb[p] = z), (o = p * 3), (ci = s > 0 ? tc & 63 : 0), (c = s > 0 ? PAL[ci] : bk.length > 3 ? PAL[bk[row + x]] : bk), (k = m[s > 0 && tc & LF ? 0 : s > 0 && tc & RF ? 2 : 1]);\n      // The white core of the card shows along a cut edge that faces the light.\n      e = s \u003c 0 ? 0 : ty + 1 >= h || !tex[row + w + x] ? 0.45 : side && (x + side \u003c 0 || x + side >= w || !tex[row + x + side]) ? 0.3 : 0;\n      for (let i = 0; i \u003c 3; i++) buf[o + i] = (c[i] + (248 - c[i]) * e) * (EM[ci] ? 1 : k[i]) * g;\n    }\n  }\n}\n\n// One spread's cards opened by open(j), turned by rho about the spine: 0 on the\n// far page, PI - phi riding the leaf. Flat, a card folded back lies on top.\nfunction scene(P, S, open, rho) {\n  const cr = cos(rho), sr = sin(rho), wob = P.mode === STAND ? P.timer : 9;\n  S.cards.forEach((c, i) => {\n    if (i >= P.layers) return;\n    const lam = ((1 - open(ORDER[i])) * PI) / 2 + 0.16 * sin(wob * 15 - i) * exp(-wob * 4), yc = cos(lam), zc = (c.fwd ? -1 : 1) * sin(lam);\n    if (c.dyn) c.work.set(c.tex), (T = c.work), (TH = c.h), c.dyn(P);\n    card(P, c.work, S.back, CW, X0, c.h, c.zb * sr, c.zb * cr, zc * sr + yc * cr, zc * cr - yc * sr, c.fwd ? 0.3 : 0.6);\n  });\n}\n\nconst stand = (P, stay) => Object.assign(P, { mode: STAND, timer: 0, stay });\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { buf: new Float32Array(N * 3), bg: new Float32Array(N * 3), zb: new Float32Array(N), t: 0, lamp: -1, mode: OPEN, timer: 0, phi: PI, cur: -1, next: 0, ask: 0, layers: 4, pull: 0 });\n  P.sc = SPREADS.map(build);\n  P.cover = coverTex();\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 4, 0.06], rate = cl(k[1], 0.2, 3) / 2, d = cl(dt, 0, 0.1) * rate, want = cl(round(k[0]), 0, 3), lamp = cl(k[3], 0, 1);\n  P.layers = cl(round(k[2]), 4, 6);\n  if (abs(lamp - P.lamp) > 0.002) (P.lamp = lamp), paint(P);\n  if (P.cur \u003c 0) P.cur = P.base = want;\n  if (want !== P.base) (P.base = want), (P.ask = 1);\n  if (input.btnPressed?.[0]) P.ask = 2;\n  P.t += d;\n  P.pull = sm(0.5 + 1.3 * sin(P.t * 0.9 - 1));\n  if (P.mode === OPEN) {\n    // The cover swings open toward the viewer, never slower than at Speed 1.2.\n    P.phi = PI * (1 - sm((P.timer += cl(dt, 0, 0.1) * max(rate, 0.6)) / 1.6));\n    if (P.timer >= 1.6) stand(P, 1.7);\n  } else if (P.mode === STAND) {\n    // The knob asks for its own spread, the button for the next.\n    if (P.ask === 1 && P.base === P.cur) P.ask = 0;\n    if ((P.timer += d) >= P.stay || P.ask) Object.assign(P, { mode: TURN, timer: 0, next: P.ask === 1 ? P.base : (P.cur + 1) % 4, ask: 0 });\n  } else if ((P.phi = PI * sm((P.timer += d) / 2.8)) && P.timer >= 2.8) (P.cur = P.next), stand(P, 7);\n}\n\n// One LED of plain card under the lamp, at depth z.\nconst px = (P, p, c, k, z) => ((P.zb[p] = z), PAL[c].forEach((v, i) => (P.buf[p * 3 + i] = v * k * P.lc[i])));\n\nexport function draw(display, params) {\n  const P = params, { buf, phi } = P, A = P.sc[P.cur], deg = (phi * 180) / PI, open = P.mode === OPEN, B = P.mode === TURN ? P.sc[P.next] : null, nr = (B || A).near;\n  buf.set(P.bg);\n  // The table takes shadows, the wall behind does not.\n  P.zb.fill(1e9).fill(500, TB * W);\n  // The cover boards round the pages, and the edges of the page block.\n  for (let x = 2; x \u003c 62; x++) px(P, 86 * W + x, cloth, 0.7, 90), open || [paper, grey, cloth].forEach((c, i) => px(P, (117 + i) * W + x, c, 0.85 - i * 0.1, 90));\n  for (let y = 87; y \u003c (open ? 102 : 120); y++) px(P, y * W + 2, cloth, 0.8, 90), px(P, y * W + 61, cloth, 0.6, 90);\n  card(P, A.far, A.far, PW, P0, D, 0, 0, 0, 1, 0, 1);\n  if (!open) card(P, nr, nr, PW, P0, D, 0, 0, 0, -1, 0, 1);\n  if (P.mode !== STAND) {\n    // The leaf, and its own edge, a line of bare card.\n    const y = floor(G - D * (sin(phi) - K * cos(phi))), z = -D * cos(phi) - 0.6;\n    card(P, B ? B.far : P.cover, A.near, PW, P0, D, 0, 0, sin(phi), -cos(phi), 0, 1);\n    for (let x = P0, p; x \u003c P0 + PW && y >= 0 && y \u003c H; x++) if (z \u003c P.zb[(p = y * W + x)]) px(P, p, open ? cloth : white, 0.9, z);\n  }\n  if (P.mode === STAND || deg \u003c 170) scene(P, A, (j) => (P.mode === STAND ? 1 : 1 - sm((deg - 5 * j) / 80)), 0);\n  if (B && deg > 14) scene(P, B, (j) => sm((deg - 92 - 6 * j) / (80 - 6 * j)), PI - phi);\n  // The pull-tab at the side of the near page.\n  for (let y = 108, e = round(P.pull * 2); y \u003c= 110 && !open; y++) for (let x = 59; x \u003c= 61 + e; x++) px(P, y * W + x, x === 61 + e && y === 109 ? roof : paper, 0.8, -50);\n  // Every card's shadow on what stands behind it, a step away from the lamp.\n  for (let p = 3 * W, z, k, sx = P.sx, zb = P.zb; p \u003c N; p++) if ((z = zb[p]) \u003c 1e8 && (k = zb[p - W - sx] \u003c z - 3 ? 0.58 : zb[p - 2 * W - 2 * sx] \u003c z - 3 ? 0.78 : 1) \u003c 1) for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] *= k;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) display.setPixel(p & 63, p >> 6, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Spread=0..3, Speed=0.2..3, Layers=4..6, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Spread","min":0,"max":3,"about":"Which spread the book is open at: a castle at dusk at 0, a pine forest with a stag at 1, a lighthouse at night at 2, a city at 3. Turned, the book leafs over to it and reads on from there."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the pages and the paper parts go: at 2 a spread stands seven seconds and a page turns in under three."},{"name":"Layers","min":4,"max":6,"about":"How many cards stand: sky, main piece, front strip and a flying piece at 4, hills, a swell with a sailing boat or a far skyline at 5, and at 6 a tunnel-book frame across the front (a rose arch, pine boughs, a sea cave, a theatre curtain)."},{"name":"Lamp","min":0,"max":1,"about":"Where the light comes from: a warm lamp low on the left at 0, overhead at 0.5, cool daylight from the right at 1. The folds swap their lit and shaded faces and the shadows swing."}],"start":[0,2,4,0.06],"measures":{"motion":0.2969,"detail":0.0558,"edges":0.4541,"complexity":0.5762,"coverage":0.9872,"colour":0.1893,"drift":0.1346},"knobResponse":[0.1392,0.0773,0.0475,0.1266]},{"slug":"popcorn","title":"Popcorn","family":"kitchen","round":19,"note":"영화관 팝콘 수레가 128줄을 다 써요. 케틀에서 낟알이 터져 뛰고 넘쳐 떨어지다가 케틀이 기울어 한 배치를 더미에 쏟고, K1 을 누르면 스쿱이 더미를 떠 가요.","idea":"A cinema popcorn cart fills the panel: kernels pop in a kettle hung under the heat lamp, the puffs jump, pile up past the rim and spill over, the kettle tips its batch onto the heap on the cabinet floor, and a scoop comes for the heap when it stands too high.","buttons":"K1 tap sends the scoop in now.","code":"// ===== Patternflow pattern =====\n// Title:   Popcorn\n// Family:  kitchen\n// Idea:    A cinema popcorn cart fills the panel: kernels pop in a kettle hung under the heat lamp, the puffs jump, pile up past the rim and spill over, the kettle tips its batch onto the heap on the cabinet floor, and a scoop comes for the heap when it stands too high.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the glass-cabinet popcorn carts of cinema lobbies\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Heat=0.2..3, Batch=6..16, Heap=0..1\n//\n// Knob 1: Lamp. The colour of the heat lamp that lights the cabinet, the steel and the corn, from a gold bulb at 0 through amber to the red of an infrared bulb at 1.\n// Knob 2: Heat. How hot the kettle runs, so how fast it goes: at 2 a batch pops, tips and starts again every 12 s; at 0.2 the kernels pop one by one.\n// Knob 3: Batch. The kettle, from a 6 oz kettle 26 LEDs wide to a 16 oz one 44 wide, and with it how many puffs each batch tips onto the heap.\n// Knob 4: Heap. How high the corn may stand before the scoop comes for it, from 22 rows over the deck to 44, about ten rows under the kettle.\n// Buttons: K1 tap sends the scoop in now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the glass. The heap stands on the warming deck, row FLOOR.\nconst XL = 3;\nconst XR = 60;\nconst TOPC = 15;\nconst FLOOR = 103;\n// The heat lamp: two tubes on row 16, one each side of the kettle's motor.\nconst LA = [6, 25, 38, 57];\n// The kettle turns about this point when it tips.\nconst PX = 32;\nconst PY = 36;\nconst MAXH = 640;\nconst MAXF = 360;\nconst NS = 12;\n// Popcorn is light: it falls slower than a ball and drags in the air.\nconst G = 150;\n// How much a puff raises the heap under each of its five columns.\nconst PROF = [1.2, 0.2, 0, 0.2, 1.2];\n// A batch, in batch seconds: pour, heat, pop, settle, tip, empty, back up.\nconst [POUR, HEAT, POP, REST, TIP, EMPTY] = [0, 1, 2, 3, 4, 5];\nconst DUR = [2, 2.5, 12, 1, 2, 2.5, 2];\nconst TIP_MAX = 1.7;\nconst SCOOP_T = 2.6;\n// Lamp colours from gold to the red of an infrared bulb.\nconst LAMP = [[255, 204, 120], [255, 168, 88], [255, 120, 70], [255, 76, 70]];\nconst { min, max, round, floor, sin, cos, abs } = Math;\nconst rnd = () => Math.random();\n// POPCORN in a 4x5 font, one hex digit a row.\nconst SIGN = [\"E9E88\", \"69996\", \"E9E88\", \"78887\", \"69996\", \"E9EA9\", \"9DB99\"];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n\n// Puffs: three or four lobes pressed together, lit from the top left, with a\n// fleck of hull (-1).\nfunction makeSprites(P) {\n  const spr = (P.spr = new Float32Array(NS * 25));\n  for (let s = 0; s \u003c NS; s++) {\n    for (let count = 0; count \u003c 12; ) {\n      count = 0;\n      const lobes = [[0, 0, 1.4 + rnd() * 0.4]];\n      for (let b = 1; b \u003c 3 + (s & 1); b++) {\n        const ang = rnd() * 7;\n        const dist = 0.9 + rnd() * 0.7;\n        lobes.push([cos(ang) * dist, sin(ang) * dist, 0.9 + rnd() * 0.6]);\n      }\n      for (let j = 0; j \u003c 25; j++) {\n        const x = (j % 5) - 2;\n        const y = ((j / 5) | 0) - 2;\n        const d = lobes.map(([cx, cy, r]) => Math.hypot(x - cx, y - cy) - r).sort((p, q) => p - q);\n        let v = 0;\n        if (d[0] \u003c= 0.2) {\n          v = (0.9 + 0.12 * clamp((-x - y) / 3, -1, 1)) * (d[1] \u003c 0.4 && d[0] > -0.6 ? 0.84 : 1);\n          count++;\n        }\n        spr[s * 25 + j] = v;\n      }\n    }\n    for (let j = 24; j >= 10; j--) {\n      if (spr[s * 25 + j] > 0 && (j * 7 + s * 3) % 4 === 0) {\n        spr[s * 25 + j] = -1;\n        break;\n      }\n    }\n  }\n  // The packed body of the heap, under the loose puffs on its surface.\n  P.tex = new Float32Array(N).fill(0.6);\n  for (let n = 0; n \u003c 1700; n++) {\n    const s = floor(rnd() * NS) * 25;\n    const cx = floor(rnd() * (W + 4)) - 4;\n    const cy = 44 + floor(rnd() * 60);\n    const k = 0.86 + rnd() * 0.14;\n    for (let j = 0; j \u003c 25; j++) {\n      const x = cx + (j % 5);\n      if (spr[s + j] !== 0 && x >= 0 && x \u003c W) P.tex[(cy + ((j / 5) | 0)) * W + x] = spr[s + j] \u003c 0 ? -1 : spr[s + j] * k;\n    }\n  }\n}\n\n// The cart round the glass, painted once: marquee, frame, base and wheels.\nfunction paintCart(P) {\n  const S = (P.cart = new Float32Array(N * 3));\n  const box = (x0, y0, x1, y1, c) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) S.set(c, (y * W + x) * 3);\n  };\n  box(0, 0, 63, 11, [84, 8, 12]);\n  box(0, 1, 63, 10, [134, 14, 20]);\n  for (let i = 0; i \u003c 7; i++)\n    for (let y = 0; y \u003c 5; y++)\n      for (let x = 0; x \u003c 4; x++)\n        if ((parseInt(SIGN[i][y], 16) >> (3 - x)) & 1) {\n          box(16 + i * 5 + x, y + 4, 16 + i * 5 + x, y + 4, [60, 4, 8]);\n          box(15 + i * 5 + x, y + 3, 15 + i * 5 + x, y + 3, [255, 236, 176]);\n        }\n  box(0, 12, 63, 106, [150, 18, 24]);\n  box(0, 13, 63, 13, [176, 30, 34]);\n  box(0, 14, 63, 14, [196, 150, 64]);\n  box(0, 106, 63, 106, [196, 150, 64]);\n  for (const [x, c] of [[0, [84, 8, 12]], [1, [176, 30, 34]], [2, [150, 150, 160]]]) {\n    box(x, 15, x, 106, c);\n    box(63 - x, 15, 63 - x, 106, c);\n  }\n  box(0, 107, 63, 118, [124, 14, 20]);\n  box(0, 119, 63, 119, [60, 6, 10]);\n  for (const x of [5, 34]) {\n    box(x, 109, x + 24, 117, [176, 124, 52]);\n    box(x + 1, 110, x + 23, 116, [140, 16, 23]);\n  }\n  box(27, 113, 27, 113, [240, 200, 110]);\n  box(36, 113, 36, 113, [240, 200, 110]);\n  for (const cx of [13, 51]) {\n    box(cx - 3, 120, cx + 3, 120, [70, 70, 76]);\n    for (let y = 120; y \u003c H; y++)\n      for (let x = cx - 5; x \u003c= cx + 5; x++) {\n        const d = Math.hypot(x + 0.5 - cx, y - 123);\n        if (d \u003c 4.4) box(x, y, x, y, d \u003c 1.6 ? [170, 170, 182] : y \u003c 121 ? [78, 78, 87] : [52, 52, 58]);\n      }\n  }\n}\n\nfunction halfW(a, d, v) {\n  const r = (v - (d - 5.5)) / 6;\n  return r \u003c= 0 ? a : a * Math.sqrt(max(0, 1 - r * r));\n}\n\n// The kettle for a batch size, and the places puffs take in it up to a dome.\nfunction resize(P, batch) {\n  P.batch = batch;\n  const a = (P.a = round(12 + 0.9 * (batch - 6)));\n  const d = (P.d = round(13 + 0.6 * (batch - 6)));\n  P.pv = round(d * 0.3);\n  const su = [];\n  const sv = [];\n  let row = 0;\n  const lay = (v, hw) => {\n    for (let u = -hw + (row++ & 1 ? 1.7 : 0); u \u003c= hw + 0.01; u += 3.4) {\n      su.push(u + (rnd() - 0.5) * 0.8);\n      sv.push(v + (rnd() - 0.5) * 0.6);\n    }\n  };\n  for (let v = d - 4.6; v > 1.2; v -= 2.9) lay(v, halfW(a, d, v + 2) - 4);\n  P.C = su.length;\n  const dh = (a - 2) * 0.45;\n  for (let v = -0.6; v > -dh + 0.5; v -= 2.9) lay(v, (a - 3) * Math.sqrt(max(0, 1 - ((-v + 1.5) / dh) ** 2)) - 1);\n  P.D = su.length - P.C;\n  P.su = Float32Array.from(su);\n  P.sv = Float32Array.from(sv);\n  P.ss = Uint8Array.from(su, () => floor(rnd() * NS));\n  // A third again as many pops as the kettle holds: those go over the rim.\n  P.total = P.C + P.D + round(0.35 * P.C);\n  P.KN = round((a - 3) * 1.5);\n  P.ku = Float32Array.from({ length: P.KN }, () => (rnd() * 2 - 1) * (a - 4));\n  P.kv = Float32Array.from({ length: P.KN }, () => d - 4 + rnd() * 1.4);\n  P.landed = min(P.landed, P.C + P.D);\n  P.popped = min(P.popped, P.total);\n}\n\nconst turn = (P) => ((P.cph = cos(P.phi)), (P.sph = sin(P.phi)), P.phi);\n\n// Kettle coordinates (u across, v down from the rim) to the panel, in P.qx, P.qy.\nfunction toScreen(P, u, v) {\n  const w = v - P.pv;\n  P.qx = PX + P.cph * u - P.sph * w;\n  P.qy = PY + P.sph * u + P.cph * w;\n}\n\n// Types: 0 falling to the heap, 1 hopping in the kettle, 4 rolling down the heap.\nfunction spawn(P, type, x, y, vx, vy, g, s) {\n  if (P.nF >= MAXF) return;\n  const v = [type, x, y, vx, vy, g, rnd() * 0.1, s, 0];\n  const i = P.nF++;\n  P.fl.forEach((A, n) => (A[i] = v[n]));\n}\n\n// A kernel bursting: a white star for a tenth of a second.\nfunction flash(P) {\n  if (P.flash.length \u003c 48) P.flash.push([P.qx, P.qy, 0.1]);\n}\n\n// The row a puff dropped at col rests on.\nfunction support(P, col) {\n  const s = P.surf;\n  return min(s[max(XL, col - 1)], s[col], s[min(XR, col + 1)]);\n}\n\n// How far the heap falls away three columns toward dir.\nconst fallAway = (P, col, dir) => P.surf[clamp(col + 3 * dir, XL, XR)] - support(P, col);\n\nfunction place(P, col, s, spr) {\n  if (P.nH >= MAXH) return true;\n  const n = P.nH++;\n  const y = (P.hy[n] = s - 2);\n  P.hx[n] = col;\n  P.hs[n] = spr;\n  for (let c = max(XL, col - 2); c \u003c= min(XR, col + 2); c++) P.surf[c] = min(P.surf[c], y - 2 + PROF[c - col + 2]);\n  return true;\n}\n\n// A puff rolls down any side steeper than a row a column.\nfunction dropInstant(P, x, spr) {\n  for (let n = 0; n \u003c 60; n++) {\n    const l = fallAway(P, x, -1);\n    const r = fallAway(P, x, 1);\n    if (l \u003c= 3 && r \u003c= 3) break;\n    x = clamp(x + (r > l ? 1 : r \u003c l ? -1 : rnd() \u003c 0.5 ? -1 : 1), XL + 2, XR - 2);\n  }\n  place(P, x, support(P, x), spr);\n}\n\nconst rise = (P) => FLOOR - 1 - min(...P.surf.subarray(XL, XR + 1));\n\n// A kernel bursts. Until the kettle is full the puff jumps and lands back on\n// the pile; once it is full every pop throws one over the rim.\nfunction pop(P) {\n  P.popped++;\n  if (P.kernels > 0) P.kernels--;\n  const cap = P.C + P.D;\n  const next = P.landed + P.hopping;\n  const fill = next / cap;\n  if (next \u003c cap && !(fill > 0.55 && rnd() \u003c 0.12)) {\n    toScreen(P, P.su[next], P.sv[next]);\n    flash(P);\n    spawn(P, 1, P.qx, P.qy - 1, (rnd() - 0.5) * 10, -(18 + rnd() * 32), P.qy, P.ss[next]);\n    P.hopping++;\n  } else {\n    const side = rnd() \u003c 0.5 ? -1 : 1;\n    toScreen(P, side * P.a * (0.45 + rnd() * 0.4), min(P.sv[min(next, cap - 1)], 1) - 1.5);\n    flash(P);\n    spawn(P, 0, P.qx, P.qy, side * (12 + rnd() * 14), -(14 + rnd() * 24), 0, floor(rnd() * NS));\n  }\n}\n\nfunction advance(P, h) {\n  P.pt += h;\n  const ph = P.phase;\n  P.rate = 0;\n  if (ph === POUR) {\n    const f = min(1, P.pt / (DUR[POUR] * 0.85));\n    P.kernels = round((P.total + 3) * f);\n    P.oil = f;\n  } else if (ph === POP) {\n    const x = min(1, P.pt / DUR[POP]);\n    P.rate = 6 * x * (1 - x);\n    while (P.popped \u003c floor(P.total * smooth(x))) pop(P);\n    P.oil = 1 - 0.65 * x;\n  } else if (ph === TIP || ph === EMPTY) {\n    P.phi = ph === TIP ? TIP_MAX * smooth(P.pt / DUR[TIP]) : TIP_MAX + 0.07 * sin(P.pt * 25) * (1 - P.pt / DUR[EMPTY]);\n    if (turn(P) > 0.85) {\n      // Empty half a second before the shaking stops, top puff first.\n      const left = (ph === TIP ? DUR[TIP] - P.pt + DUR[EMPTY] : DUR[EMPTY] - P.pt) - 0.5;\n      P.pourAcc += (P.landed * h) / max(h, left);\n      for (; P.pourAcc >= 1 && P.landed > 0; P.pourAcc--) {\n        const i = --P.landed;\n        toScreen(P, P.su[i], P.sv[i]);\n        spawn(P, 0, P.qx, P.qy, P.sph * (8 + rnd() * 12) + 4, -P.cph * (8 + rnd() * 10) + rnd() * 4, 0, P.ss[i]);\n      }\n    }\n  } else if (ph > EMPTY) P.phi = TIP_MAX * (1 - smooth(P.pt / DUR[ph]));\n  if (P.pt >= DUR[ph]) {\n    P.pt -= DUR[ph];\n    P.phase = (ph + 1) % 7;\n    if (P.phase === POUR) Object.assign(P, { popped: 0, landed: 0, hopping: 0, kernels: 0, oil: 0, phi: 0 });\n    if (P.phase === HEAT) P.oil = 1;\n    if (P.phase === TIP) tipNow(P);\n    if (ph === EMPTY) P.landed = 0;\n  }\n}\n\n// Puffs still in the air when it tips fall clear of it.\nfunction tipNow(P) {\n  for (let i = 0; i \u003c P.nF; i++) if (P.ft[i] === 1) P.ft[i] = 0;\n  P.hopping = P.pourAcc = 0;\n}\n\nfunction moveParticles(P, dt) {\n  const { ft, fx, fy, fvx, fvy, fg, fa, fs, fb } = P;\n  const drag = Math.exp(-0.8 * dt);\n  for (let i = 0; i \u003c P.nF; ) {\n    const t = ft[i];\n    let dead = false;\n    // A puff tumbles as it falls or rolls.\n    fa[i] += dt;\n    if (fa[i] > 0.1) [fa[i], fs[i]] = [0, (fs[i] + 1 + floor(rnd() * 3)) % NS];\n    if (t === 4) {\n      const dir = fvx[i] > 0 ? 1 : -1;\n      fx[i] += dir * 26 * dt;\n      const col = clamp(round(fx[i]), XL + 2, XR - 2);\n      const s = support(P, col);\n      fy[i] = s - 2;\n      if (col !== round(fx[i]) || fallAway(P, col, dir) \u003c= 2.5) dead = place(P, col, s, fs[i]);\n    } else {\n      fvy[i] = (fvy[i] + G * dt) * drag;\n      fvx[i] *= drag;\n      fx[i] += fvx[i] * dt;\n      fy[i] += fvy[i] * dt;\n      if (abs(fx[i] - 31.5) > 26.5) [fvx[i], fx[i]] = [-0.5 * fvx[i], clamp(fx[i], XL + 2, XR - 2)];\n      const col = round(fx[i]);\n      const s = support(P, col);\n      if (t === 1) {\n        if (fvy[i] > 0 && fy[i] >= fg[i]) {\n          P.landed = min(P.landed + 1, P.C + P.D);\n          P.hopping = max(0, P.hopping - 1);\n          dead = true;\n        }\n      } else if (fy[i] + 2 >= s) {\n        const l = fallAway(P, col, -1);\n        const r = fallAway(P, col, 1);\n        // A light bounce first.\n        if (fvy[i] > 40 && !fb[i]) [fb[i], fy[i], fvy[i], fvx[i]] = [1, s - 2, fvy[i] * -0.32, fvx[i] + (rnd() - 0.5) * 20];\n        else if (l > 3 || r > 3) [ft[i], fx[i], fvx[i]] = [4, col, r > l ? 1 : r \u003c l ? -1 : rnd() - 0.5];\n        else dead = place(P, col, s, fs[i]);\n      }\n    }\n    if (dead) {\n      const j = --P.nF;\n      for (const A of P.fl) A[i] = A[j];\n    } else i++;\n  }\n  P.flash = P.flash.filter((f) => (f[2] -= dt) > 0);\n}\n\n// The scoop digs in where the heap stands highest, from the nearer side.\nfunction startScoop(P) {\n  let best = XL + 10;\n  for (let c = XL + 10; c \u003c= XR - 10; c++) if (P.surf[c] \u003c P.surf[best]) best = c;\n  if (P.surf[best] > FLOOR - 8) return false;\n  Object.assign(P, { sc: 0, scSide: best >= 32 ? 1 : -1, scX: best, scY: min(FLOOR - 3, P.surf[best] + 8), got: [] });\n  return true;\n}\n\n// It lifts what lies over its blade, and the puffs it undercut fall again.\nfunction capture(P) {\n  const keep = [];\n  for (let i = 0; i \u003c P.nH; i++) {\n    const dx = P.hx[i] - P.scX;\n    const dy = P.hy[i] - P.scY;\n    if (abs(dx) \u003c= 9 && dy \u003c= 1 && dy >= -20 && P.got.length \u003c 60) P.got.push([dx, -2 - max(0, -2 - dy) * 0.45, P.hs[i]]);\n    else keep.push([P.hx[i], P.hy[i], P.hs[i]]);\n  }\n  P.scGot = true;\n  keep.sort((p, q) => q[1] - p[1]);\n  P.surf.fill(FLOOR - 1);\n  P.nH = 0;\n  for (const [x, y, s] of keep) {\n    const top = support(P, x);\n    if (top - 2 - y > 3) spawn(P, 0, x, y, 0, 0, 0, s);\n    else place(P, x, top, s);\n  }\n}\n\nfunction tick(P, dt) {\n  P.t += dt;\n  advance(P, dt * P.heat);\n  turn(P);\n  moveParticles(P, dt);\n  const high = rise(P) - P.target;\n  if (P.sc \u003c 0 && high > 5) P.scNext = min(P.scNext, P.t + 1);\n  if (P.sc \u003c 0 && P.t >= P.scNext && !startScoop(P)) P.scNext = P.t + 2;\n  if (P.sc >= 0) {\n    P.sc += dt;\n    if (!P.scGot && P.sc >= SCOOP_T * 0.36) capture(P);\n    if (P.sc >= SCOOP_T) {\n      P.sc = -1;\n      P.scGot = false;\n      P.scNext = P.t + (high > 0 ? 1 + rnd() * 1.5 : 6 + rnd() * 4);\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), light: F(N).fill(0.8), surf: F(W), hx: F(MAXH), hy: F(MAXH), hs: new Uint8Array(MAXH), lc: F(3), col: F(6) });\n  P.fl = [\"ft\", \"fx\", \"fy\", \"fvx\", \"fvy\", \"fg\", \"fa\", \"fs\", \"fb\"].map((k, i) => (P[k] = i === 0 || i > 6 ? new Uint8Array(MAXF) : F(MAXF)));\n  makeSprites(P);\n  paintCart(P);\n  Object.assign(P, { t: 0, started: false, batch: -1, phase: POP, pt: 0, phi: 0, cph: 1, sph: 0, popped: 0, landed: 0, hopping: 0, kernels: 0 });\n  Object.assign(P, { oil: 1, rate: 0, pourAcc: 0, nH: 0, nF: 0, flash: [], got: [], sc: -1, scGot: false, scNext: 1e9, lamp: 0, heat: 2, target: 23 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = min(max(dt, 0), 0.1);\n  P.lamp = clamp(k[0], 0, 1);\n  P.heat = clamp(k[1], 0.2, 3);\n  P.target = 22 + 22 * clamp(k[3], 0, 1);\n  if (!P.started) {\n    // The heap left by earlier batches, the same for every kettle size.\n    P.surf.fill(FLOOR - 1);\n    for (let i = 0; i \u003c 300 && rise(P) \u003c P.target - 2; i++) {\n      const g = (rnd() + rnd() + rnd() - 1.5) * 2;\n      dropInstant(P, clamp(round(34 + g * 12), XL + 2, XR - 2), floor(rnd() * NS));\n    }\n  }\n  const batch = round(clamp(k[2], 6, 16) * 2) / 2;\n  if (batch !== P.batch) resize(P, batch);\n  if (!P.started) {\n    P.started = true;\n    P.kernels = P.total + 3;\n    // Open 3.5 s into popping, at the kettle's own heat.\n    for (let i = 0; i \u003c 105; i++) tick(P, 1 / 30);\n    P.scNext = P.t + 2;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.sc \u003c 0) startScoop(P);\n  tick(P, dt);\n}\n\nfunction put(P, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  P.buf.set([r, g, b], (y * W + x) * 3);\n}\n\nfunction stamp(P, x, y, s, k) {\n  const xi = round(x) - 2;\n  const yi = round(y) - 2;\n  for (let j = 0; j \u003c 25; j++) {\n    const v = P.spr[s * 25 + j];\n    const px = xi + (j % 5);\n    const py = yi + ((j / 5) | 0);\n    if (v === 0 || px \u003c XL || px > XR || py \u003c 0 || py >= H) continue;\n    const p = py * W + px;\n    const l = (0.95 + 0.25 * P.light[p]) * k * (v \u003c 0 ? 1 : v);\n    const c = v \u003c 0 ? 3 : 0;\n    for (let i = 0; i \u003c 3; i++) P.buf[p * 3 + i] = P.col[c + i] * l;\n  }\n}\n\nfunction line(P, x0, y0, x1, y1, v) {\n  const n = Math.ceil(max(abs(x1 - x0), abs(y1 - y0)) * 1.5) + 1;\n  for (let i = 0; i \u003c= n; i++) {\n    const x = round(x0 + ((x1 - x0) * i) / n);\n    const y = round(y0 + ((y1 - y0) * i) / n);\n    if (x \u003c XL || x > XR || y \u003c TOPC || y > FLOOR + 1) continue;\n    const l = (0.5 + 0.5 * P.light[y * W + x]) * v;\n    put(P, x, y, 210 * l, 212 * l, 222 * l);\n  }\n}\n\n// Inside the glass: the back wall in the lamp's light, shaded by how much of\n// the lamp tubes each LED sees past the kettle's bottom. Then the deck.\nfunction cabinet(P) {\n  const { buf, light, lc } = P;\n  let x1 = 99;\n  let x2 = -99;\n  let yo = 0;\n  for (let c = 0; c \u003c 4; c++) {\n    toScreen(P, c & 1 ? P.a : -P.a, c & 2 ? P.d : -1);\n    x1 = min(x1, P.qx);\n    x2 = max(x2, P.qx);\n    yo = max(yo, P.qy - 1);\n  }\n  for (let y = TOPC; y \u003c FLOOR + 2; y++) {\n    const dl = (y - 16) / 55;\n    const fall = 1 / (1 + dl * dl);\n    const k = y > yo ? (y - 16) / (y - yo) : 0;\n    for (let x = XL; x \u003c= XR; x++) {\n      const p = y * W + x;\n      let w;\n      let l = fall;\n      if (y >= FLOOR) w = (y > FLOOR ? 0.55 : x % 3 ? 0.75 : 0.25) * 0.3;\n      else {\n        if (k > 0) {\n          const xa = x + 0.5 + (x1 - x - 0.5) * k;\n          const xb = x + 0.5 + (x2 - x - 0.5) * k;\n          l *= 1 - (0.6 * (max(0, min(xb, LA[1]) - max(xa, LA[0])) + max(0, min(xb, LA[3]) - max(xa, LA[2])))) / 38;\n        }\n        w = 0.04 + 0.36 * l;\n      }\n      for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = lc[i] * w + (y >= FLOOR ? w * 300 : 5);\n      light[p] = l;\n    }\n  }\n  // Lamp tubes, the kettle's motor, the chase of bulbs round the marquee.\n  for (let x = LA[0]; x \u003c= LA[3]; x++) {\n    if (x > LA[1] && x \u003c LA[2]) continue;\n    put(P, x, 15, 58, 58, 64);\n    put(P, x, 16, lc[0] * 1.1, lc[1] * 1.1, lc[2] * 1.1);\n    for (let i = 0; i \u003c 3; i++) buf[(17 * W + x) * 3 + i] += lc[i] * 0.25;\n  }\n  for (let y = 15; y \u003c= 20; y++)\n    for (let x = 28; x \u003c= 35; x++) {\n      const v = y === 15 ? 0.5 : x === 34 ? 1.2 : 0.85;\n      put(P, x, y, 96 * v, 98 * v, 108 * v);\n    }\n  const chase = floor(P.t * 6);\n  for (let i = 0; i \u003c 32; i++) {\n    const on = ((i \u003c 16 ? i : 47 - i) + chase) % 3;\n    put(P, 2 + 4 * (i & 15), i \u003c 16 ? 1 : 10, on ? 255 : 120, on ? 214 : 60, on ? 120 : 30);\n  }\n}\n\nfunction drawHeap(P) {\n  const { surf, buf, light, tex, col } = P;\n  for (let x = XL; x \u003c= XR; x++) {\n    const top = Math.ceil(surf[x] + 2.5);\n    for (let y = max(top, 44); y \u003c FLOOR; y++) {\n      const p = y * W + x;\n      const v = tex[p];\n      const l = (0.95 + 0.25 * light[p]) * (1 - min(0.36, (y - top) * 0.012)) * (v \u003c 0 ? 1 : v);\n      for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = col[(v \u003c 0 ? 3 : 0) + i] * l;\n    }\n  }\n  for (let i = 0; i \u003c P.nH; i++) stamp(P, P.hx[i], P.hy[i], P.hs[i], 1 - min(0.3, max(0, P.hy[i] - surf[P.hx[i]] - 3) * 0.016));\n}\n\nfunction drawScoop(P) {\n  if (P.sc \u003c 0) return;\n  const u = P.sc / SCOOP_T;\n  const side = P.scSide;\n  // In along the heap with the blade down, a turn to lift, then up and out.\n  const e = u \u003c 0.36 ? (1 - u / 0.36) ** 2 : u > 0.5 ? ((u - 0.5) / 0.5) ** 2 : 0;\n  const x = P.scX + side * 72 * e;\n  const y = P.scY - (u \u003c 0.36 ? 26 * e : 2 + 38 * e);\n  const tilt = side * (-0.22 + 0.52 * smooth((u - 0.36) / 0.14));\n  const cb = cos(tilt);\n  const sb = sin(tilt);\n  const tx = (lx, ly) => x + lx * side * cb - ly * sb;\n  const ty = (lx, ly) => y + lx * side * sb + ly * cb;\n  for (const [dx, dy, s] of P.got) stamp(P, tx(dx * side, dy), ty(dx * side, dy), s, 0.95);\n  const seg = (ax, ay, bx, by, v) => line(P, tx(ax, ay), ty(ax, ay), tx(bx, by), ty(bx, by), v);\n  seg(-9, 0, 9, 0, 1);\n  seg(-9, 1, 9, 1, 0.7);\n  seg(-9, 0, -10, -1.5, 1);\n  seg(9, 0, 9.5, -6, 0.85);\n  seg(9.5, -6, 18, -11, 0.75);\n}\n\nfunction drawKettle(P) {\n  const { light, lc, a, d, pv, cph: c, sph: s } = P;\n  const R = a + d + 3;\n  const steel = (x, y, r, k) => {\n    if (x >= XL && x \u003c= XR && y >= TOPC) put(P, x, y, r * k * (0.7 + lc[0] / 850), r * k * (0.7 + lc[1] / 850), (r + 12) * k * (0.7 + lc[2] / 850));\n  };\n  const oilTop = d - 2 - 2.6 * P.oil;\n  const hot = P.phase === HEAT || P.phase === POP ? 0.55 + 0.15 * P.heat : P.phase === POUR ? 0.4 : 0.25;\n  // The hanger from the motor down to the axle the kettle turns on.\n  for (let y = 21; y \u003c= PY; y++) for (let x = 31; x \u003c 33; x++) steel(x, y, x * 50 - 1480, 1);\n  // The back wall and the oil, then the kernels and puffs, then the steel\n  // over them: walls, rolled rim and the heater band below.\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = max(TOPC, PY - R); y \u003c= min(FLOOR - 1, PY + R); y++) {\n      for (let x = max(XL, PX - R); x \u003c= min(XR, PX + R); x++) {\n        const dx = x + 0.5 - PX;\n        const dy = y + 0.5 - PY;\n        const u = c * dx + s * dy;\n        const v = -s * dx + c * dy + pv;\n        const l = 0.55 + 0.45 * light[y * W + x];\n        const hw = halfW(a, d, v);\n        if (pass === 0) {\n          if (v \u003c 0 || v > d - 2 || abs(u) >= hw - 2) continue;\n          const gl = (0.5 + 0.5 * hot) * (0.85 + 0.15 * sin(u * 0.9 + P.t * 7));\n          if (v > oilTop && P.oil > 0.02) put(P, x, y, 240 * gl, 150 * gl, 30 * gl);\n          else steel(x, y, 44, l);\n        } else if (v >= -1.4 && v \u003c= 0.3 && abs(u) \u003c= a + 0.9) steel(x, y, 170, 1.25 * l);\n        else if (v > 0.3 && v \u003c= d && abs(u) \u003c= hw && (abs(u) >= hw - 2 || v >= d - 2)) steel(x, y, 170, (v >= d - 2 ? 0.7 : u > 0 ? 1 : 0.62) * l);\n        else if (v > d && v \u003c= d + 2.5 && abs(u) \u003c= a * 0.38) {\n          // The heater band glows while the kettle is on.\n          const glow = v > d + 1.5 ? hot : 0;\n          put(P, x, y, 50 * l + 200 * glow, 50 * l + 50 * glow, 56 * l + 10 * glow);\n        }\n      }\n    }\n    if (pass === 1) break;\n    const shown = round(P.KN * min(1, P.kernels / (P.total + 3)));\n    const jig = P.phase === HEAT ? 0.3 + P.pt * 0.2 : P.phase === POP ? 0.8 : 0;\n    for (let i = 0; i \u003c shown; i++) {\n      toScreen(P, P.ku[i] + jig * sin(P.t * 23 + i * 2.1), P.kv[i] + jig * 0.5 * sin(P.t * 19 + i));\n      if (P.qx >= XL + 0.5 && P.qx \u003c XR + 0.5) put(P, round(P.qx - 0.5), round(P.qy - 0.5), 246, 190, 60);\n    }\n    for (let i = 0; i \u003c P.landed; i++) {\n      toScreen(P, P.su[i], P.sv[i]);\n      stamp(P, P.qx - 0.5, P.qy - 0.5, P.ss[i], 1);\n    }\n  }\n  // Lids pushed up by the corn; tipped, they fold flat.\n  const cap = P.C + P.D;\n  let th = clamp((P.landed - P.C * 0.75) / max(1, cap - P.C * 0.75), 0, 1) * 0.85 + 0.08 * P.rate * max(0, sin(P.t * 37));\n  if (P.phase === POUR) th = 0.5;\n  for (let side = -1; side \u003c= 1 && P.phi \u003c 0.3; side += 2)\n    for (let t = 0; t \u003c= a - 1; t += 0.5)\n      for (let e = 0; e \u003c 2; e++) {\n        toScreen(P, side * (t * cos(th) + e * 0.9 * sin(th)), -1.8 + e * 0.9 - t * sin(th));\n        steel(floor(P.qx), floor(P.qy), 198, e ? 0.56 : 1);\n      }\n  // The axle boss.\n  for (let i = 0; i \u003c 4; i++) steel(PX - 1 + (i & 1), PY - 1 + (i >> 1), [100, 200, 64, 120][i], 1);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, lc, col } = P;\n  const f = clamp(P.lamp, 0, 1) * 3;\n  const li = min(2, floor(f));\n  for (let c = 0; c \u003c 3; c++) {\n    lc[c] = LAMP[li][c] + (LAMP[li + 1][c] - LAMP[li][c]) * (f - li);\n    // Corn is cream white with a fleck of hull, in the lamp's light.\n    const tl = 0.6 + (0.4 * lc[c]) / 255;\n    col[c] = [252, 246, 228][c] * tl;\n    col[c + 3] = [214, 160, 84][c] * tl;\n  }\n  buf.set(P.cart);\n  cabinet(P);\n  drawHeap(P);\n  drawScoop(P);\n  drawKettle(P);\n  for (let i = 0; i \u003c P.nF; i++) stamp(P, P.fx[i] - 0.5, P.fy[i] - 0.5, P.fs[i], 1.05);\n  for (const [fx, fy, life] of P.flash)\n    for (let n = 0; n \u003c 5; n++) {\n      const a = n \u003c 4 ? 150 + 1050 * life : 255;\n      put(P, round(fx - 0.5) + ((n & 1) * 2 - 1) * (n \u003c 2), round(fy - 0.5) + ((n & 1) * 2 - 1) * (n === 2 || n === 3), a, a, a * 0.92);\n    }\n  // Two streaks of reflection on the front glass.\n  for (let y = 20; y \u003c 92; y++) for (let i = 0; i \u003c 6; i++) buf[(y * W + round(57 - (y - 20) * 0.38) + (i > 2) * 3) * 3 + (i % 3)] += i > 2 ? 12 : 20;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n  }\n}\n","layer":{"id":"layer-popcorn","type":"code","name":"popcorn","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Popcorn\n// Family:  kitchen\n// Idea:    A cinema popcorn cart fills the panel: kernels pop in a kettle hung under the heat lamp, the puffs jump, pile up past the rim and spill over, the kettle tips its batch onto the heap on the cabinet floor, and a scoop comes for the heap when it stands too high.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the glass-cabinet popcorn carts of cinema lobbies\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Lamp=0..1, Heat=0.2..3, Batch=6..16, Heap=0..1\n//\n// Knob 1: Lamp. The colour of the heat lamp that lights the cabinet, the steel and the corn, from a gold bulb at 0 through amber to the red of an infrared bulb at 1.\n// Knob 2: Heat. How hot the kettle runs, so how fast it goes: at 2 a batch pops, tips and starts again every 12 s; at 0.2 the kernels pop one by one.\n// Knob 3: Batch. The kettle, from a 6 oz kettle 26 LEDs wide to a 16 oz one 44 wide, and with it how many puffs each batch tips onto the heap.\n// Knob 4: Heap. How high the corn may stand before the scoop comes for it, from 22 rows over the deck to 44, about ten rows under the kettle.\n// Buttons: K1 tap sends the scoop in now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the glass. The heap stands on the warming deck, row FLOOR.\nconst XL = 3;\nconst XR = 60;\nconst TOPC = 15;\nconst FLOOR = 103;\n// The heat lamp: two tubes on row 16, one each side of the kettle's motor.\nconst LA = [6, 25, 38, 57];\n// The kettle turns about this point when it tips.\nconst PX = 32;\nconst PY = 36;\nconst MAXH = 640;\nconst MAXF = 360;\nconst NS = 12;\n// Popcorn is light: it falls slower than a ball and drags in the air.\nconst G = 150;\n// How much a puff raises the heap under each of its five columns.\nconst PROF = [1.2, 0.2, 0, 0.2, 1.2];\n// A batch, in batch seconds: pour, heat, pop, settle, tip, empty, back up.\nconst [POUR, HEAT, POP, REST, TIP, EMPTY] = [0, 1, 2, 3, 4, 5];\nconst DUR = [2, 2.5, 12, 1, 2, 2.5, 2];\nconst TIP_MAX = 1.7;\nconst SCOOP_T = 2.6;\n// Lamp colours from gold to the red of an infrared bulb.\nconst LAMP = [[255, 204, 120], [255, 168, 88], [255, 120, 70], [255, 76, 70]];\nconst { min, max, round, floor, sin, cos, abs } = Math;\nconst rnd = () => Math.random();\n// POPCORN in a 4x5 font, one hex digit a row.\nconst SIGN = [\"E9E88\", \"69996\", \"E9E88\", \"78887\", \"69996\", \"E9EA9\", \"9DB99\"];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (x) => ((x = clamp(x, 0, 1)), x * x * (3 - 2 * x));\n\n// Puffs: three or four lobes pressed together, lit from the top left, with a\n// fleck of hull (-1).\nfunction makeSprites(P) {\n  const spr = (P.spr = new Float32Array(NS * 25));\n  for (let s = 0; s \u003c NS; s++) {\n    for (let count = 0; count \u003c 12; ) {\n      count = 0;\n      const lobes = [[0, 0, 1.4 + rnd() * 0.4]];\n      for (let b = 1; b \u003c 3 + (s & 1); b++) {\n        const ang = rnd() * 7;\n        const dist = 0.9 + rnd() * 0.7;\n        lobes.push([cos(ang) * dist, sin(ang) * dist, 0.9 + rnd() * 0.6]);\n      }\n      for (let j = 0; j \u003c 25; j++) {\n        const x = (j % 5) - 2;\n        const y = ((j / 5) | 0) - 2;\n        const d = lobes.map(([cx, cy, r]) => Math.hypot(x - cx, y - cy) - r).sort((p, q) => p - q);\n        let v = 0;\n        if (d[0] \u003c= 0.2) {\n          v = (0.9 + 0.12 * clamp((-x - y) / 3, -1, 1)) * (d[1] \u003c 0.4 && d[0] > -0.6 ? 0.84 : 1);\n          count++;\n        }\n        spr[s * 25 + j] = v;\n      }\n    }\n    for (let j = 24; j >= 10; j--) {\n      if (spr[s * 25 + j] > 0 && (j * 7 + s * 3) % 4 === 0) {\n        spr[s * 25 + j] = -1;\n        break;\n      }\n    }\n  }\n  // The packed body of the heap, under the loose puffs on its surface.\n  P.tex = new Float32Array(N).fill(0.6);\n  for (let n = 0; n \u003c 1700; n++) {\n    const s = floor(rnd() * NS) * 25;\n    const cx = floor(rnd() * (W + 4)) - 4;\n    const cy = 44 + floor(rnd() * 60);\n    const k = 0.86 + rnd() * 0.14;\n    for (let j = 0; j \u003c 25; j++) {\n      const x = cx + (j % 5);\n      if (spr[s + j] !== 0 && x >= 0 && x \u003c W) P.tex[(cy + ((j / 5) | 0)) * W + x] = spr[s + j] \u003c 0 ? -1 : spr[s + j] * k;\n    }\n  }\n}\n\n// The cart round the glass, painted once: marquee, frame, base and wheels.\nfunction paintCart(P) {\n  const S = (P.cart = new Float32Array(N * 3));\n  const box = (x0, y0, x1, y1, c) => {\n    for (let y = y0; y \u003c= y1; y++) for (let x = x0; x \u003c= x1; x++) S.set(c, (y * W + x) * 3);\n  };\n  box(0, 0, 63, 11, [84, 8, 12]);\n  box(0, 1, 63, 10, [134, 14, 20]);\n  for (let i = 0; i \u003c 7; i++)\n    for (let y = 0; y \u003c 5; y++)\n      for (let x = 0; x \u003c 4; x++)\n        if ((parseInt(SIGN[i][y], 16) >> (3 - x)) & 1) {\n          box(16 + i * 5 + x, y + 4, 16 + i * 5 + x, y + 4, [60, 4, 8]);\n          box(15 + i * 5 + x, y + 3, 15 + i * 5 + x, y + 3, [255, 236, 176]);\n        }\n  box(0, 12, 63, 106, [150, 18, 24]);\n  box(0, 13, 63, 13, [176, 30, 34]);\n  box(0, 14, 63, 14, [196, 150, 64]);\n  box(0, 106, 63, 106, [196, 150, 64]);\n  for (const [x, c] of [[0, [84, 8, 12]], [1, [176, 30, 34]], [2, [150, 150, 160]]]) {\n    box(x, 15, x, 106, c);\n    box(63 - x, 15, 63 - x, 106, c);\n  }\n  box(0, 107, 63, 118, [124, 14, 20]);\n  box(0, 119, 63, 119, [60, 6, 10]);\n  for (const x of [5, 34]) {\n    box(x, 109, x + 24, 117, [176, 124, 52]);\n    box(x + 1, 110, x + 23, 116, [140, 16, 23]);\n  }\n  box(27, 113, 27, 113, [240, 200, 110]);\n  box(36, 113, 36, 113, [240, 200, 110]);\n  for (const cx of [13, 51]) {\n    box(cx - 3, 120, cx + 3, 120, [70, 70, 76]);\n    for (let y = 120; y \u003c H; y++)\n      for (let x = cx - 5; x \u003c= cx + 5; x++) {\n        const d = Math.hypot(x + 0.5 - cx, y - 123);\n        if (d \u003c 4.4) box(x, y, x, y, d \u003c 1.6 ? [170, 170, 182] : y \u003c 121 ? [78, 78, 87] : [52, 52, 58]);\n      }\n  }\n}\n\nfunction halfW(a, d, v) {\n  const r = (v - (d - 5.5)) / 6;\n  return r \u003c= 0 ? a : a * Math.sqrt(max(0, 1 - r * r));\n}\n\n// The kettle for a batch size, and the places puffs take in it up to a dome.\nfunction resize(P, batch) {\n  P.batch = batch;\n  const a = (P.a = round(12 + 0.9 * (batch - 6)));\n  const d = (P.d = round(13 + 0.6 * (batch - 6)));\n  P.pv = round(d * 0.3);\n  const su = [];\n  const sv = [];\n  let row = 0;\n  const lay = (v, hw) => {\n    for (let u = -hw + (row++ & 1 ? 1.7 : 0); u \u003c= hw + 0.01; u += 3.4) {\n      su.push(u + (rnd() - 0.5) * 0.8);\n      sv.push(v + (rnd() - 0.5) * 0.6);\n    }\n  };\n  for (let v = d - 4.6; v > 1.2; v -= 2.9) lay(v, halfW(a, d, v + 2) - 4);\n  P.C = su.length;\n  const dh = (a - 2) * 0.45;\n  for (let v = -0.6; v > -dh + 0.5; v -= 2.9) lay(v, (a - 3) * Math.sqrt(max(0, 1 - ((-v + 1.5) / dh) ** 2)) - 1);\n  P.D = su.length - P.C;\n  P.su = Float32Array.from(su);\n  P.sv = Float32Array.from(sv);\n  P.ss = Uint8Array.from(su, () => floor(rnd() * NS));\n  // A third again as many pops as the kettle holds: those go over the rim.\n  P.total = P.C + P.D + round(0.35 * P.C);\n  P.KN = round((a - 3) * 1.5);\n  P.ku = Float32Array.from({ length: P.KN }, () => (rnd() * 2 - 1) * (a - 4));\n  P.kv = Float32Array.from({ length: P.KN }, () => d - 4 + rnd() * 1.4);\n  P.landed = min(P.landed, P.C + P.D);\n  P.popped = min(P.popped, P.total);\n}\n\nconst turn = (P) => ((P.cph = cos(P.phi)), (P.sph = sin(P.phi)), P.phi);\n\n// Kettle coordinates (u across, v down from the rim) to the panel, in P.qx, P.qy.\nfunction toScreen(P, u, v) {\n  const w = v - P.pv;\n  P.qx = PX + P.cph * u - P.sph * w;\n  P.qy = PY + P.sph * u + P.cph * w;\n}\n\n// Types: 0 falling to the heap, 1 hopping in the kettle, 4 rolling down the heap.\nfunction spawn(P, type, x, y, vx, vy, g, s) {\n  if (P.nF >= MAXF) return;\n  const v = [type, x, y, vx, vy, g, rnd() * 0.1, s, 0];\n  const i = P.nF++;\n  P.fl.forEach((A, n) => (A[i] = v[n]));\n}\n\n// A kernel bursting: a white star for a tenth of a second.\nfunction flash(P) {\n  if (P.flash.length \u003c 48) P.flash.push([P.qx, P.qy, 0.1]);\n}\n\n// The row a puff dropped at col rests on.\nfunction support(P, col) {\n  const s = P.surf;\n  return min(s[max(XL, col - 1)], s[col], s[min(XR, col + 1)]);\n}\n\n// How far the heap falls away three columns toward dir.\nconst fallAway = (P, col, dir) => P.surf[clamp(col + 3 * dir, XL, XR)] - support(P, col);\n\nfunction place(P, col, s, spr) {\n  if (P.nH >= MAXH) return true;\n  const n = P.nH++;\n  const y = (P.hy[n] = s - 2);\n  P.hx[n] = col;\n  P.hs[n] = spr;\n  for (let c = max(XL, col - 2); c \u003c= min(XR, col + 2); c++) P.surf[c] = min(P.surf[c], y - 2 + PROF[c - col + 2]);\n  return true;\n}\n\n// A puff rolls down any side steeper than a row a column.\nfunction dropInstant(P, x, spr) {\n  for (let n = 0; n \u003c 60; n++) {\n    const l = fallAway(P, x, -1);\n    const r = fallAway(P, x, 1);\n    if (l \u003c= 3 && r \u003c= 3) break;\n    x = clamp(x + (r > l ? 1 : r \u003c l ? -1 : rnd() \u003c 0.5 ? -1 : 1), XL + 2, XR - 2);\n  }\n  place(P, x, support(P, x), spr);\n}\n\nconst rise = (P) => FLOOR - 1 - min(...P.surf.subarray(XL, XR + 1));\n\n// A kernel bursts. Until the kettle is full the puff jumps and lands back on\n// the pile; once it is full every pop throws one over the rim.\nfunction pop(P) {\n  P.popped++;\n  if (P.kernels > 0) P.kernels--;\n  const cap = P.C + P.D;\n  const next = P.landed + P.hopping;\n  const fill = next / cap;\n  if (next \u003c cap && !(fill > 0.55 && rnd() \u003c 0.12)) {\n    toScreen(P, P.su[next], P.sv[next]);\n    flash(P);\n    spawn(P, 1, P.qx, P.qy - 1, (rnd() - 0.5) * 10, -(18 + rnd() * 32), P.qy, P.ss[next]);\n    P.hopping++;\n  } else {\n    const side = rnd() \u003c 0.5 ? -1 : 1;\n    toScreen(P, side * P.a * (0.45 + rnd() * 0.4), min(P.sv[min(next, cap - 1)], 1) - 1.5);\n    flash(P);\n    spawn(P, 0, P.qx, P.qy, side * (12 + rnd() * 14), -(14 + rnd() * 24), 0, floor(rnd() * NS));\n  }\n}\n\nfunction advance(P, h) {\n  P.pt += h;\n  const ph = P.phase;\n  P.rate = 0;\n  if (ph === POUR) {\n    const f = min(1, P.pt / (DUR[POUR] * 0.85));\n    P.kernels = round((P.total + 3) * f);\n    P.oil = f;\n  } else if (ph === POP) {\n    const x = min(1, P.pt / DUR[POP]);\n    P.rate = 6 * x * (1 - x);\n    while (P.popped \u003c floor(P.total * smooth(x))) pop(P);\n    P.oil = 1 - 0.65 * x;\n  } else if (ph === TIP || ph === EMPTY) {\n    P.phi = ph === TIP ? TIP_MAX * smooth(P.pt / DUR[TIP]) : TIP_MAX + 0.07 * sin(P.pt * 25) * (1 - P.pt / DUR[EMPTY]);\n    if (turn(P) > 0.85) {\n      // Empty half a second before the shaking stops, top puff first.\n      const left = (ph === TIP ? DUR[TIP] - P.pt + DUR[EMPTY] : DUR[EMPTY] - P.pt) - 0.5;\n      P.pourAcc += (P.landed * h) / max(h, left);\n      for (; P.pourAcc >= 1 && P.landed > 0; P.pourAcc--) {\n        const i = --P.landed;\n        toScreen(P, P.su[i], P.sv[i]);\n        spawn(P, 0, P.qx, P.qy, P.sph * (8 + rnd() * 12) + 4, -P.cph * (8 + rnd() * 10) + rnd() * 4, 0, P.ss[i]);\n      }\n    }\n  } else if (ph > EMPTY) P.phi = TIP_MAX * (1 - smooth(P.pt / DUR[ph]));\n  if (P.pt >= DUR[ph]) {\n    P.pt -= DUR[ph];\n    P.phase = (ph + 1) % 7;\n    if (P.phase === POUR) Object.assign(P, { popped: 0, landed: 0, hopping: 0, kernels: 0, oil: 0, phi: 0 });\n    if (P.phase === HEAT) P.oil = 1;\n    if (P.phase === TIP) tipNow(P);\n    if (ph === EMPTY) P.landed = 0;\n  }\n}\n\n// Puffs still in the air when it tips fall clear of it.\nfunction tipNow(P) {\n  for (let i = 0; i \u003c P.nF; i++) if (P.ft[i] === 1) P.ft[i] = 0;\n  P.hopping = P.pourAcc = 0;\n}\n\nfunction moveParticles(P, dt) {\n  const { ft, fx, fy, fvx, fvy, fg, fa, fs, fb } = P;\n  const drag = Math.exp(-0.8 * dt);\n  for (let i = 0; i \u003c P.nF; ) {\n    const t = ft[i];\n    let dead = false;\n    // A puff tumbles as it falls or rolls.\n    fa[i] += dt;\n    if (fa[i] > 0.1) [fa[i], fs[i]] = [0, (fs[i] + 1 + floor(rnd() * 3)) % NS];\n    if (t === 4) {\n      const dir = fvx[i] > 0 ? 1 : -1;\n      fx[i] += dir * 26 * dt;\n      const col = clamp(round(fx[i]), XL + 2, XR - 2);\n      const s = support(P, col);\n      fy[i] = s - 2;\n      if (col !== round(fx[i]) || fallAway(P, col, dir) \u003c= 2.5) dead = place(P, col, s, fs[i]);\n    } else {\n      fvy[i] = (fvy[i] + G * dt) * drag;\n      fvx[i] *= drag;\n      fx[i] += fvx[i] * dt;\n      fy[i] += fvy[i] * dt;\n      if (abs(fx[i] - 31.5) > 26.5) [fvx[i], fx[i]] = [-0.5 * fvx[i], clamp(fx[i], XL + 2, XR - 2)];\n      const col = round(fx[i]);\n      const s = support(P, col);\n      if (t === 1) {\n        if (fvy[i] > 0 && fy[i] >= fg[i]) {\n          P.landed = min(P.landed + 1, P.C + P.D);\n          P.hopping = max(0, P.hopping - 1);\n          dead = true;\n        }\n      } else if (fy[i] + 2 >= s) {\n        const l = fallAway(P, col, -1);\n        const r = fallAway(P, col, 1);\n        // A light bounce first.\n        if (fvy[i] > 40 && !fb[i]) [fb[i], fy[i], fvy[i], fvx[i]] = [1, s - 2, fvy[i] * -0.32, fvx[i] + (rnd() - 0.5) * 20];\n        else if (l > 3 || r > 3) [ft[i], fx[i], fvx[i]] = [4, col, r > l ? 1 : r \u003c l ? -1 : rnd() - 0.5];\n        else dead = place(P, col, s, fs[i]);\n      }\n    }\n    if (dead) {\n      const j = --P.nF;\n      for (const A of P.fl) A[i] = A[j];\n    } else i++;\n  }\n  P.flash = P.flash.filter((f) => (f[2] -= dt) > 0);\n}\n\n// The scoop digs in where the heap stands highest, from the nearer side.\nfunction startScoop(P) {\n  let best = XL + 10;\n  for (let c = XL + 10; c \u003c= XR - 10; c++) if (P.surf[c] \u003c P.surf[best]) best = c;\n  if (P.surf[best] > FLOOR - 8) return false;\n  Object.assign(P, { sc: 0, scSide: best >= 32 ? 1 : -1, scX: best, scY: min(FLOOR - 3, P.surf[best] + 8), got: [] });\n  return true;\n}\n\n// It lifts what lies over its blade, and the puffs it undercut fall again.\nfunction capture(P) {\n  const keep = [];\n  for (let i = 0; i \u003c P.nH; i++) {\n    const dx = P.hx[i] - P.scX;\n    const dy = P.hy[i] - P.scY;\n    if (abs(dx) \u003c= 9 && dy \u003c= 1 && dy >= -20 && P.got.length \u003c 60) P.got.push([dx, -2 - max(0, -2 - dy) * 0.45, P.hs[i]]);\n    else keep.push([P.hx[i], P.hy[i], P.hs[i]]);\n  }\n  P.scGot = true;\n  keep.sort((p, q) => q[1] - p[1]);\n  P.surf.fill(FLOOR - 1);\n  P.nH = 0;\n  for (const [x, y, s] of keep) {\n    const top = support(P, x);\n    if (top - 2 - y > 3) spawn(P, 0, x, y, 0, 0, 0, s);\n    else place(P, x, top, s);\n  }\n}\n\nfunction tick(P, dt) {\n  P.t += dt;\n  advance(P, dt * P.heat);\n  turn(P);\n  moveParticles(P, dt);\n  const high = rise(P) - P.target;\n  if (P.sc \u003c 0 && high > 5) P.scNext = min(P.scNext, P.t + 1);\n  if (P.sc \u003c 0 && P.t >= P.scNext && !startScoop(P)) P.scNext = P.t + 2;\n  if (P.sc >= 0) {\n    P.sc += dt;\n    if (!P.scGot && P.sc >= SCOOP_T * 0.36) capture(P);\n    if (P.sc >= SCOOP_T) {\n      P.sc = -1;\n      P.scGot = false;\n      P.scNext = P.t + (high > 0 ? 1 + rnd() * 1.5 : 6 + rnd() * 4);\n    }\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  const F = (n) => new Float32Array(n);\n  Object.assign(P, { buf: F(N * 3), light: F(N).fill(0.8), surf: F(W), hx: F(MAXH), hy: F(MAXH), hs: new Uint8Array(MAXH), lc: F(3), col: F(6) });\n  P.fl = [\"ft\", \"fx\", \"fy\", \"fvx\", \"fvy\", \"fg\", \"fa\", \"fs\", \"fb\"].map((k, i) => (P[k] = i === 0 || i > 6 ? new Uint8Array(MAXF) : F(MAXF)));\n  makeSprites(P);\n  paintCart(P);\n  Object.assign(P, { t: 0, started: false, batch: -1, phase: POP, pt: 0, phi: 0, cph: 1, sph: 0, popped: 0, landed: 0, hopping: 0, kernels: 0 });\n  Object.assign(P, { oil: 1, rate: 0, pourAcc: 0, nH: 0, nF: 0, flash: [], got: [], sc: -1, scGot: false, scNext: 1e9, lamp: 0, heat: 2, target: 23 });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = min(max(dt, 0), 0.1);\n  P.lamp = clamp(k[0], 0, 1);\n  P.heat = clamp(k[1], 0.2, 3);\n  P.target = 22 + 22 * clamp(k[3], 0, 1);\n  if (!P.started) {\n    // The heap left by earlier batches, the same for every kettle size.\n    P.surf.fill(FLOOR - 1);\n    for (let i = 0; i \u003c 300 && rise(P) \u003c P.target - 2; i++) {\n      const g = (rnd() + rnd() + rnd() - 1.5) * 2;\n      dropInstant(P, clamp(round(34 + g * 12), XL + 2, XR - 2), floor(rnd() * NS));\n    }\n  }\n  const batch = round(clamp(k[2], 6, 16) * 2) / 2;\n  if (batch !== P.batch) resize(P, batch);\n  if (!P.started) {\n    P.started = true;\n    P.kernels = P.total + 3;\n    // Open 3.5 s into popping, at the kettle's own heat.\n    for (let i = 0; i \u003c 105; i++) tick(P, 1 / 30);\n    P.scNext = P.t + 2;\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.sc \u003c 0) startScoop(P);\n  tick(P, dt);\n}\n\nfunction put(P, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  P.buf.set([r, g, b], (y * W + x) * 3);\n}\n\nfunction stamp(P, x, y, s, k) {\n  const xi = round(x) - 2;\n  const yi = round(y) - 2;\n  for (let j = 0; j \u003c 25; j++) {\n    const v = P.spr[s * 25 + j];\n    const px = xi + (j % 5);\n    const py = yi + ((j / 5) | 0);\n    if (v === 0 || px \u003c XL || px > XR || py \u003c 0 || py >= H) continue;\n    const p = py * W + px;\n    const l = (0.95 + 0.25 * P.light[p]) * k * (v \u003c 0 ? 1 : v);\n    const c = v \u003c 0 ? 3 : 0;\n    for (let i = 0; i \u003c 3; i++) P.buf[p * 3 + i] = P.col[c + i] * l;\n  }\n}\n\nfunction line(P, x0, y0, x1, y1, v) {\n  const n = Math.ceil(max(abs(x1 - x0), abs(y1 - y0)) * 1.5) + 1;\n  for (let i = 0; i \u003c= n; i++) {\n    const x = round(x0 + ((x1 - x0) * i) / n);\n    const y = round(y0 + ((y1 - y0) * i) / n);\n    if (x \u003c XL || x > XR || y \u003c TOPC || y > FLOOR + 1) continue;\n    const l = (0.5 + 0.5 * P.light[y * W + x]) * v;\n    put(P, x, y, 210 * l, 212 * l, 222 * l);\n  }\n}\n\n// Inside the glass: the back wall in the lamp's light, shaded by how much of\n// the lamp tubes each LED sees past the kettle's bottom. Then the deck.\nfunction cabinet(P) {\n  const { buf, light, lc } = P;\n  let x1 = 99;\n  let x2 = -99;\n  let yo = 0;\n  for (let c = 0; c \u003c 4; c++) {\n    toScreen(P, c & 1 ? P.a : -P.a, c & 2 ? P.d : -1);\n    x1 = min(x1, P.qx);\n    x2 = max(x2, P.qx);\n    yo = max(yo, P.qy - 1);\n  }\n  for (let y = TOPC; y \u003c FLOOR + 2; y++) {\n    const dl = (y - 16) / 55;\n    const fall = 1 / (1 + dl * dl);\n    const k = y > yo ? (y - 16) / (y - yo) : 0;\n    for (let x = XL; x \u003c= XR; x++) {\n      const p = y * W + x;\n      let w;\n      let l = fall;\n      if (y >= FLOOR) w = (y > FLOOR ? 0.55 : x % 3 ? 0.75 : 0.25) * 0.3;\n      else {\n        if (k > 0) {\n          const xa = x + 0.5 + (x1 - x - 0.5) * k;\n          const xb = x + 0.5 + (x2 - x - 0.5) * k;\n          l *= 1 - (0.6 * (max(0, min(xb, LA[1]) - max(xa, LA[0])) + max(0, min(xb, LA[3]) - max(xa, LA[2])))) / 38;\n        }\n        w = 0.04 + 0.36 * l;\n      }\n      for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = lc[i] * w + (y >= FLOOR ? w * 300 : 5);\n      light[p] = l;\n    }\n  }\n  // Lamp tubes, the kettle's motor, the chase of bulbs round the marquee.\n  for (let x = LA[0]; x \u003c= LA[3]; x++) {\n    if (x > LA[1] && x \u003c LA[2]) continue;\n    put(P, x, 15, 58, 58, 64);\n    put(P, x, 16, lc[0] * 1.1, lc[1] * 1.1, lc[2] * 1.1);\n    for (let i = 0; i \u003c 3; i++) buf[(17 * W + x) * 3 + i] += lc[i] * 0.25;\n  }\n  for (let y = 15; y \u003c= 20; y++)\n    for (let x = 28; x \u003c= 35; x++) {\n      const v = y === 15 ? 0.5 : x === 34 ? 1.2 : 0.85;\n      put(P, x, y, 96 * v, 98 * v, 108 * v);\n    }\n  const chase = floor(P.t * 6);\n  for (let i = 0; i \u003c 32; i++) {\n    const on = ((i \u003c 16 ? i : 47 - i) + chase) % 3;\n    put(P, 2 + 4 * (i & 15), i \u003c 16 ? 1 : 10, on ? 255 : 120, on ? 214 : 60, on ? 120 : 30);\n  }\n}\n\nfunction drawHeap(P) {\n  const { surf, buf, light, tex, col } = P;\n  for (let x = XL; x \u003c= XR; x++) {\n    const top = Math.ceil(surf[x] + 2.5);\n    for (let y = max(top, 44); y \u003c FLOOR; y++) {\n      const p = y * W + x;\n      const v = tex[p];\n      const l = (0.95 + 0.25 * light[p]) * (1 - min(0.36, (y - top) * 0.012)) * (v \u003c 0 ? 1 : v);\n      for (let i = 0; i \u003c 3; i++) buf[p * 3 + i] = col[(v \u003c 0 ? 3 : 0) + i] * l;\n    }\n  }\n  for (let i = 0; i \u003c P.nH; i++) stamp(P, P.hx[i], P.hy[i], P.hs[i], 1 - min(0.3, max(0, P.hy[i] - surf[P.hx[i]] - 3) * 0.016));\n}\n\nfunction drawScoop(P) {\n  if (P.sc \u003c 0) return;\n  const u = P.sc / SCOOP_T;\n  const side = P.scSide;\n  // In along the heap with the blade down, a turn to lift, then up and out.\n  const e = u \u003c 0.36 ? (1 - u / 0.36) ** 2 : u > 0.5 ? ((u - 0.5) / 0.5) ** 2 : 0;\n  const x = P.scX + side * 72 * e;\n  const y = P.scY - (u \u003c 0.36 ? 26 * e : 2 + 38 * e);\n  const tilt = side * (-0.22 + 0.52 * smooth((u - 0.36) / 0.14));\n  const cb = cos(tilt);\n  const sb = sin(tilt);\n  const tx = (lx, ly) => x + lx * side * cb - ly * sb;\n  const ty = (lx, ly) => y + lx * side * sb + ly * cb;\n  for (const [dx, dy, s] of P.got) stamp(P, tx(dx * side, dy), ty(dx * side, dy), s, 0.95);\n  const seg = (ax, ay, bx, by, v) => line(P, tx(ax, ay), ty(ax, ay), tx(bx, by), ty(bx, by), v);\n  seg(-9, 0, 9, 0, 1);\n  seg(-9, 1, 9, 1, 0.7);\n  seg(-9, 0, -10, -1.5, 1);\n  seg(9, 0, 9.5, -6, 0.85);\n  seg(9.5, -6, 18, -11, 0.75);\n}\n\nfunction drawKettle(P) {\n  const { light, lc, a, d, pv, cph: c, sph: s } = P;\n  const R = a + d + 3;\n  const steel = (x, y, r, k) => {\n    if (x >= XL && x \u003c= XR && y >= TOPC) put(P, x, y, r * k * (0.7 + lc[0] / 850), r * k * (0.7 + lc[1] / 850), (r + 12) * k * (0.7 + lc[2] / 850));\n  };\n  const oilTop = d - 2 - 2.6 * P.oil;\n  const hot = P.phase === HEAT || P.phase === POP ? 0.55 + 0.15 * P.heat : P.phase === POUR ? 0.4 : 0.25;\n  // The hanger from the motor down to the axle the kettle turns on.\n  for (let y = 21; y \u003c= PY; y++) for (let x = 31; x \u003c 33; x++) steel(x, y, x * 50 - 1480, 1);\n  // The back wall and the oil, then the kernels and puffs, then the steel\n  // over them: walls, rolled rim and the heater band below.\n  for (let pass = 0; pass \u003c 2; pass++) {\n    for (let y = max(TOPC, PY - R); y \u003c= min(FLOOR - 1, PY + R); y++) {\n      for (let x = max(XL, PX - R); x \u003c= min(XR, PX + R); x++) {\n        const dx = x + 0.5 - PX;\n        const dy = y + 0.5 - PY;\n        const u = c * dx + s * dy;\n        const v = -s * dx + c * dy + pv;\n        const l = 0.55 + 0.45 * light[y * W + x];\n        const hw = halfW(a, d, v);\n        if (pass === 0) {\n          if (v \u003c 0 || v > d - 2 || abs(u) >= hw - 2) continue;\n          const gl = (0.5 + 0.5 * hot) * (0.85 + 0.15 * sin(u * 0.9 + P.t * 7));\n          if (v > oilTop && P.oil > 0.02) put(P, x, y, 240 * gl, 150 * gl, 30 * gl);\n          else steel(x, y, 44, l);\n        } else if (v >= -1.4 && v \u003c= 0.3 && abs(u) \u003c= a + 0.9) steel(x, y, 170, 1.25 * l);\n        else if (v > 0.3 && v \u003c= d && abs(u) \u003c= hw && (abs(u) >= hw - 2 || v >= d - 2)) steel(x, y, 170, (v >= d - 2 ? 0.7 : u > 0 ? 1 : 0.62) * l);\n        else if (v > d && v \u003c= d + 2.5 && abs(u) \u003c= a * 0.38) {\n          // The heater band glows while the kettle is on.\n          const glow = v > d + 1.5 ? hot : 0;\n          put(P, x, y, 50 * l + 200 * glow, 50 * l + 50 * glow, 56 * l + 10 * glow);\n        }\n      }\n    }\n    if (pass === 1) break;\n    const shown = round(P.KN * min(1, P.kernels / (P.total + 3)));\n    const jig = P.phase === HEAT ? 0.3 + P.pt * 0.2 : P.phase === POP ? 0.8 : 0;\n    for (let i = 0; i \u003c shown; i++) {\n      toScreen(P, P.ku[i] + jig * sin(P.t * 23 + i * 2.1), P.kv[i] + jig * 0.5 * sin(P.t * 19 + i));\n      if (P.qx >= XL + 0.5 && P.qx \u003c XR + 0.5) put(P, round(P.qx - 0.5), round(P.qy - 0.5), 246, 190, 60);\n    }\n    for (let i = 0; i \u003c P.landed; i++) {\n      toScreen(P, P.su[i], P.sv[i]);\n      stamp(P, P.qx - 0.5, P.qy - 0.5, P.ss[i], 1);\n    }\n  }\n  // Lids pushed up by the corn; tipped, they fold flat.\n  const cap = P.C + P.D;\n  let th = clamp((P.landed - P.C * 0.75) / max(1, cap - P.C * 0.75), 0, 1) * 0.85 + 0.08 * P.rate * max(0, sin(P.t * 37));\n  if (P.phase === POUR) th = 0.5;\n  for (let side = -1; side \u003c= 1 && P.phi \u003c 0.3; side += 2)\n    for (let t = 0; t \u003c= a - 1; t += 0.5)\n      for (let e = 0; e \u003c 2; e++) {\n        toScreen(P, side * (t * cos(th) + e * 0.9 * sin(th)), -1.8 + e * 0.9 - t * sin(th));\n        steel(floor(P.qx), floor(P.qy), 198, e ? 0.56 : 1);\n      }\n  // The axle boss.\n  for (let i = 0; i \u003c 4; i++) steel(PX - 1 + (i & 1), PY - 1 + (i >> 1), [100, 200, 64, 120][i], 1);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { buf, lc, col } = P;\n  const f = clamp(P.lamp, 0, 1) * 3;\n  const li = min(2, floor(f));\n  for (let c = 0; c \u003c 3; c++) {\n    lc[c] = LAMP[li][c] + (LAMP[li + 1][c] - LAMP[li][c]) * (f - li);\n    // Corn is cream white with a fleck of hull, in the lamp's light.\n    const tl = 0.6 + (0.4 * lc[c]) / 255;\n    col[c] = [252, 246, 228][c] * tl;\n    col[c + 3] = [214, 160, 84][c] * tl;\n  }\n  buf.set(P.cart);\n  cabinet(P);\n  drawHeap(P);\n  drawScoop(P);\n  drawKettle(P);\n  for (let i = 0; i \u003c P.nF; i++) stamp(P, P.fx[i] - 0.5, P.fy[i] - 0.5, P.fs[i], 1.05);\n  for (const [fx, fy, life] of P.flash)\n    for (let n = 0; n \u003c 5; n++) {\n      const a = n \u003c 4 ? 150 + 1050 * life : 255;\n      put(P, round(fx - 0.5) + ((n & 1) * 2 - 1) * (n \u003c 2), round(fy - 0.5) + ((n & 1) * 2 - 1) * (n === 2 || n === 3), a, a, a * 0.92);\n    }\n  // Two streaks of reflection on the front glass.\n  for (let y = 20; y \u003c 92; y++) for (let i = 0; i \u003c 6; i++) buf[(y * W + round(57 - (y - 20) * 0.38) + (i > 2) * 3) * 3 + (i % 3)] += i > 2 ? 12 : 20;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    display.setPixel(p % W, (p / W) | 0, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Lamp=0..1, Heat=0.2..3, Batch=6..16, Heap=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Lamp","min":0,"max":1,"about":"The colour of the heat lamp that lights the cabinet, the steel and the corn, from a gold bulb at 0 through amber to the red of an infrared bulb at 1."},{"name":"Heat","min":0.2,"max":3,"about":"How hot the kettle runs, so how fast it goes: at 2 a batch pops, tips and starts again every 12 s; at 0.2 the kernels pop one by one."},{"name":"Batch","min":6,"max":16,"about":"The kettle, from a 6 oz kettle 26 LEDs wide to a 16 oz one 44 wide, and with it how many puffs each batch tips onto the heap."},{"name":"Heap","min":0,"max":1,"about":"How high the corn may stand before the scoop comes for it, from 22 rows over the deck to 44, about ten rows under the kettle."}],"start":[0,2,6,0.06],"measures":{"motion":0.2278,"detail":0.0649,"edges":0.5093,"complexity":0.7081,"coverage":0.9514,"colour":0.2616,"drift":0.0636},"knobResponse":[0.0358,0.0496,0.0725,0.0766]},{"slug":"potters-wheel","title":"Potter's Wheel","family":"pottery","round":24,"note":"밤의 도자기 공방에서 녹색 갓 램프 아래 물레가 돌아요. 두 손이 흙덩이를 가운데로 모아 벽을 끌어올리면 그릇이 76~92줄 높이로 자라고, 물레 자국이 램프 쪽에서 반짝이며 옆으로 흘러가요. 다 빚은 병과 항아리는 줄로 잘려 선반에 올라가 젖은 흙빛에서 하얗게 말라 가요. K1 이 흙을 테라코타에서 검은 흙까지 바꾸고, K1 을 누르면 그릇이 주저앉아요.","idea":"At night under one warm lamp a potter centres wet clay on the spinning wheel, opens it and pulls the wall up into a tall pot whose throwing rings catch the light, wires it off and sets it on the shelves, where the earlier pots dry from dark to bone-pale.","buttons":"K1 tap makes the wall slump, and the potter balls the clay up and centres it again.","code":"// ===== Patternflow pattern =====\n// Title:   Potter's Wheel\n// Family:  pottery\n// Idea:    At night under one warm lamp a potter centres wet clay on the spinning wheel, opens it and pulls the wall up into a tall pot whose throwing rings catch the light, wires it off and sets it on the shelves, where the earlier pots dry from dark to bone-pale.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after throwing a pot on the potter's wheel\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Clay=0..1, Speed=0.2..3, Pots=6..20, Lamp=0..1\n//\n// Knob 1: Clay. The clay body: terracotta at 0, then buff stoneware, grey porcelain and black clay at 1. The pot, the slip in the splash pan, the pots drying on the shelves and the dust on the wall all take it.\n// Knob 2: Speed. At 2 a throw takes about thirteen seconds from the slapped lump to the pot set on the shelf, and the wheel turns about once a second; at 0.2 it all runs ten times slower.\n// Knob 3: Pots. How many earlier pieces stand drying on the rack's three shelves, from six to twenty. The oldest are bone-dry, and each new pot takes the place of the oldest, which goes to the kiln.\n// Knob 4: Lamp. Where the lamp hangs, from left of the wheel at 0 to right of it at 1. The lit side of the pot, the highlight down its throwing rings, its shadow on the wall and the light on the shelves move with it.\n// Buttons: K1 tap makes the wall slump, and the potter balls the clay up and centres it again.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, exp, asin, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The wheel head's centre and radius, the splash pan round it, and the tilt\n// of the view: a circle r across on the wheel shows as an ellipse E * r tall.\nconst [CX, BY, E, WR, PR] = [32, 111, 0.21, 21, 34];\nconst PY = BY + 2.5;\n// Three shelf boards with seven slots each, the order the slots fill, and\n// the size a pot stands at on the shelf against its size on the wheel.\nconst SHELF = [26, 53, 80];\nconst SLOT = [];\nfor (const sy of SHELF) for (let i = 0; i \u003c 7; i++) SLOT.push([4.6 + i * 9.13, sy]);\nconst ORDER = [1, 5, 8, 12, 14, 20, 3, 9, 11, 0, 6, 7, 13, 15, 19, 2, 4, 10, 16, 18, 17];\nconst SHS = 0.27;\n\n// Each clay at every stage of drying, from thrown and wet to bone-dry.\nconst CLAY = [\n  [[255, 112, 56], [196, 96, 58], [238, 158, 108]],\n  [[236, 170, 104], [190, 148, 100], [244, 222, 182]],\n  [[194, 198, 206], [184, 184, 182], [250, 248, 240]],\n  [[110, 96, 96], [86, 80, 78], [156, 148, 142]],\n];\nconst SKIN = [150, 98, 76], WALL = [84, 62, 50], WOOD = [132, 90, 58], METAL = [150, 152, 156], PLASTIC = [76, 80, 90], SLEEVE = [58, 66, 86], SHINE = [255, 232, 196];\n\n// Pot shapes as a height and the radius at keys up the wall: cylinder, bottle,\n// vase with a belly and a flared lip, jar and trumpet vase on the wheel, and\n// bowls and cups from earlier in the evening on the shelves.\nconst SHAPES = [\n  (j) => [76 + 8 * j, [[0, 10.5], [0.45, 10.2 + j], [0.9, 9.6], [1, 11]]],\n  (j) => [84 + 8 * j, [[0, 11], [0.3, 14.5], [0.7, 4.2], [0.93, 4], [1, 5.6]]],\n  (j) => [82 + 8 * j, [[0, 8], [0.42, 15], [0.8, 5], [0.9, 5.4], [1, 9.5]]],\n  (j) => [76 + 6 * j, [[0, 8.5], [0.55, 15.5], [0.9, 9], [1, 10.5]]],\n  (j) => [86 + 6 * j, [[0, 9.5], [0.2, 9.8], [0.62, 5.5], [1, 14]]],\n  (j) => [26 + 6 * j, [[0, 7], [0.45, 14], [1, 19]]],\n  (j) => [40 + 6 * j, [[0, 9], [0.5, 11.5], [0.85, 10.5], [1, 12]]],\n];\nfunction key(K, v) {\n  let i = 0;\n  while (i \u003c K.length - 2 && v > K[i + 1][0]) i++;\n  return mix(K[i][1], K[i + 1][1], sm(K[i][0], K[i + 1][0], v));\n}\n// A radius looked up along a wall kept one entry per row.\nconst at = (pr, h, Hp, i) => ((h = cl(h, 0, Hp)), (i = h | 0), pr[i] + (pr[i + 1] - pr[i]) * (h - i));\nfunction newSpec(not, all) {\n  let type;\n  // The first throw of the night is always one of the three tallest.\n  do type = floor(rnd() * (all ? 7 : 5));\n  while (type === not || (not \u003c -1 && type % 3 === 0));\n  const [Hf, K0] = SHAPES[type](rnd()), g = 0.92 + 0.16 * rnd(), K = K0.map(([v, r]) => [v, r * g]);\n  const pr = F32(ceil(Hf) + 3);\n  for (let h = 0; h \u003c pr.length; h++) pr[h] = key(K, min(1, h / Hf)) + 1.4 * exp(-h / 2.2);\n  // Where the hands shape it: the belly, then the neck above.\n  let vb = 0.5, vn = 0.85, rb = 0, rn = 99;\n  for (const [v, r] of K) if (v > 0.1 && v \u003c 0.85 && r > rb) (rb = r), (vb = v);\n  for (const [v, r] of K) if (v > vb && v \u003c 1 && r \u003c rn) (rn = r), (vn = v);\n  return { type, Hf, pr, rim: K[K.length - 1][1], vb, vn };\n}\n\n// The steps of a throw, how long each takes at Speed 2, and how fast the\n// wheel turns through it (turns a second): slapped down, centred, opened,\n// three pulls, shaped, shown, wired off, lifted to the shelf, and the slump\n// and the balling up after a K1 tap.\nconst DUR = [0.45, 0.9, 0.5, 4.5, 2.6, 1.6, 0.9, 1.8, 1.2, 0.9];\nconst SPIN = [0.4, 1.3, 1.1, 0.95, 0.75, 0.65, 0.3, 0, 0.9, 1];\n// The cylinder after each pull, and its wall at the rim.\nconst RC = [12.5, 11.3, 10.5, 9.9], WALL_T = [4, 2.7, 2.1, 1.7];\nconst cyl = (k, h) => RC[k] - 0.012 * h + 1.4 * exp(-h / 2.2);\nconst dome = (v, r) => r * sqrt(max(0, 1 - v ** 2.4)) + 1.2 * exp(-v * 8);\n\nexport function setup(params) {\n  const P = (params.s = {\n    ph: 0, pt: 0, rot: 0, w: 0.4, H: 11, ri: 0, wa: 0, wt: 0, yo: 0, sH: 11, sri: 0, n: 6, LX: 12, clay: 0,\n    pr: F32(128), snap: F32(128), f: F32(N * 3), bg: F32(N * 3),\n    hd: null, hs: null, g: null, wire: -1, pieces: [], sp: [], dr: [], free: 0, bgKey: -1,\n  });\n  P.spec = newSpec(-2);\n  // The pieces already on the shelves, newest first.\n  for (let i = 0; i \u003c 21; i++) P.pieces.push({ slot: ORDER[i], spec: newSpec(i ? P.pieces[i - 1].spec.type : -1, 1), dry: min(1, 0.1 + i * 0.17) });\n  // Old slip spattered in the pan.\n  for (let i = 0; i \u003c 60; i++) {\n    const a = rnd() * TAU, r = 0.66 + 0.3 * rnd();\n    P.sp.push(i \u003c 44 ? [CX + PR * r * sin(a), PY + PR * E * r * cos(a), rnd() \u003c 0.3 ? 2 : 1, 0.6 + 0.5 * rnd()] : [2 + rnd() * 60, PY + 8 + rnd() * 4, 1, 0.5 + 0.4 * rnd()]);\n  }\n  shape(P, 0);\n}\n\nfunction go(P, ph) {\n  // The oldest piece on show goes to the kiln and the new pot takes its place.\n  if (ph === 7) P.free = P.pieces.splice(min(P.n, P.pieces.length) - 1, 1)[0].slot;\n  if (ph === 0 && P.ph === 7) P.pieces.unshift({ slot: P.free, spec: P.spec, dry: 0 }), (P.spec = newSpec(P.spec.type));\n  P.snap.set(P.pr);\n  Object.assign(P, { ph, pt: 0, sH: P.H, sri: P.ri });\n}\n\nfunction fill(P, Hn, f) {\n  P.H = Hn;\n  for (let h = 0, n = min(126, ceil(Hn) + 2); h \u003c= n; h++) P.pr[h] = max(0, f(min(h, Hn)));\n}\nconst snapR = (P, v) => at(P.snap, v * P.sH, P.sH);\nconst offset = (P, h) => P.wa * sin(P.rot) + P.wt * (cl(h / P.H, 0, 1) ** 1.5) * sin(P.rot + 0.8);\n\n// The clay's wall for this moment of the throw, and where the hands are.\nfunction shape(P, p) {\n  const sp = P.spec;\n  let hand = null;\n  Object.assign(P, { wa: 0, wt: 0.2, yo: 0, g: null, wire: -1, ring: 0.07 });\n  switch (P.ph) {\n    case 0: {\n      // Slapped down from the hands, squashing as it lands.\n      const sq = p > 0.6 ? 1 - 0.3 * sin((PI * (p - 0.6)) / 0.4) : 1, r = 10.5 / sqrt(sq), Hn = 11 * sq;\n      P.yo = p \u003c 0.6 ? -56 * (1 - (p / 0.6) ** 2) : 0;\n      fill(P, Hn, (h) => dome(h / Hn, r));\n      (P.ri = 0), (P.wa = 0.8), (P.ring = 0.04);\n      hand = [5, -0.3, 0];\n      break;\n    }\n    case 1: {\n      // Centred: coned up and pressed down again while the wobble dies.\n      const Hn = 11 + 10 * sin(PI * sm(0.1, 0.9, p)), r = 10.5 * sqrt(11 / Hn);\n      fill(P, Hn, (h) => dome(h / Hn, r));\n      (P.ri = 0), (P.wa = 2.6 * (1 - sm(0, 0.8, p))), (P.ring = 0.05);\n      hand = [Hn * 0.42, -0.5 + 0.4 * sin(p * 20), 0];\n      break;\n    }\n    case 2: {\n      const q = sm(0, 1, p), Hn = mix(P.sH, 13, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), cyl(0, h), q));\n      (P.ri = (RC[0] - WALL_T[0]) * sm(0.15, 1, p)), (P.ring = 0.07);\n      hand = [Hn - 1.5, -0.2, 0];\n      break;\n    }\n    case 3: {\n      // Three pulls. The hands squeeze the wall from the base to the rim and\n      // a roll of clay rides up ahead of them.\n      const k = min(2, floor(P.pt / 1.5)), a = (P.pt - k * 1.5) / 1.2, Hp = sp.Hf * 0.93;\n      const HS = [13, mix(13, Hp, 0.55), mix(13, Hp, 0.82), Hp];\n      if (a \u003c= 1) {\n        const Hn = mix(HS[k], HS[k + 1], sm(0, 1, a)), hh = Hn * min(1, a * 1.04) * 0.95, roll = 1.3 * (1 - sm(0.9, 1, a));\n        fill(P, Hn, (h) => mix(cyl(k + 1, h), cyl(k, h), sm(hh - 1, hh + 2.5, h)) + roll * exp(-(((h - hh - 2.6) / 2.2) ** 2)) - 0.8 * exp(-(((h - hh) / 1.4) ** 2)));\n        P.ri = mix(RC[k] - WALL_T[k], RC[k + 1] - WALL_T[k + 1], sm(0.85, 1, a));\n        hand = [hh, -0.3, 0];\n      } else {\n        const Hn = HS[k + 1], b = (a - 1) / 0.25;\n        fill(P, Hn, (h) => cyl(k + 1, h));\n        P.ri = RC[k + 1] - WALL_T[k + 1];\n        hand = [mix(Hn * 0.95, 3, sm(0, 1, b)), 1.5 * sin(PI * b), 0];\n      }\n      break;\n    }\n    case 4: {\n      // Shaped: the belly pushed out from inside, then the neck collared in.\n      const q = sm(0, 1, p), Hn = mix(P.sH, sp.Hf, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), at(sp.pr, (h / Hn) * sp.Hf, sp.Hf), q));\n      P.ri = mix(P.sri, sp.rim - 1.4, q);\n      hand = [Hn * mix(sp.vb, sp.vn, sm(0.4, 0.75, p)), -0.2, 0];\n      break;\n    }\n    case 8: {\n      // Slumped: the wall sinks, bellies and flops round as the wheel turns.\n      const q = sm(0, 1, p), Hn = mix(P.sH, max(12, P.sH * 0.3), q ** 0.8);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), snapR(P, (h / Hn) * 0.6) * (1 + 0.7 * (h / Hn) ** 2) + (3 * h) / Hn, q));\n      P.ri = P.sri > 0 ? max(0, at(P.pr, Hn, Hn) - 1.8) : 0;\n      (P.wt = 6 * sin(PI * min(1, p * 1.3)) + 2), (P.wa = 1);\n      hand = [Hn * 0.5, 4 + 20 * sm(0, 0.3, p), 10 * sm(0, 0.3, p)];\n      break;\n    }\n    case 9: {\n      const q = sm(0, 1, p), Hn = mix(P.sH, 11, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), dome(h / Hn, 10.5), q));\n      (P.ri = P.sri * (1 - q)), (P.wa = 2.6), (P.wt = 2 * (1 - q)), (P.ring = 0.04);\n      hand = [Hn * 0.45, mix(6, -0.5, sm(0, 0.5, p)), 0];\n      break;\n    }\n    default: {\n      fill(P, sp.Hf, (h) => at(sp.pr, h, sp.Hf));\n      P.ri = sp.rim - 1.4;\n      // Shown: the hands come away.\n      if (P.ph === 5) hand = [sp.Hf * sp.vn, 2 + 30 * sm(0, 0.6, p), 22 * sm(0, 0.6, p)];\n      if (P.ph === 6) {\n        // Wired off: the hands come in to the wheel and draw the wire under.\n        const a = sm(0, 0.25, p), q = sm(0.25, 1, p), y = mix(BY + 20, BY + E * P.pr[0] * (1 - 2 * q) + 0.5, a);\n        P.wire = a \u003c 1 ? -1 : q;\n        P.hd = [CX - mix(40, 25, a), y, CX + mix(40, 25, a), y];\n        return;\n      }\n      if (P.ph === 7) {\n        // Lifted, then carried back to its slot on the shelf.\n        const q1 = sm(0, 0.3, p), q2 = sm(0.3, 1, p), [sx, sy] = SLOT[P.free], s = mix(1, SHS, q2 ** 0.6);\n        P.g = [mix(CX, sx, q2), mix(BY - 9 * q1, sy + 0.5, q2) - 14 * sin(PI * q2), s];\n        if (q2 \u003c 0.5) {\n          const r = sp.pr[3] * s, y = P.g[1] - 3 * s + 40 * sm(0.2, 0.5, q2);\n          P.hd = [P.g[0] - r, y, P.g[0] + r, y];\n        } else P.hd = null;\n        return;\n      }\n    }\n  }\n  if (hand) {\n    const [h, gap, dy] = hand, r = at(P.pr, h, P.H), o = offset(P, h), y = BY + P.yo - h + dy;\n    P.hd = [CX + o - r - gap, y, CX + o + r + gap, y];\n  } else P.hd = null;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.clay = cl(k[0], 0, 1);\n  P.n = round(cl(k[2], 6, 20));\n  P.LX = mix(9, 55, cl(k[3], 0, 1));\n  if (input.btnPressed && input.btnPressed[0] && P.ph >= 1 && P.ph \u003c= 5) go(P, 8);\n  if ((P.pt += d) >= DUR[P.ph]) go(P, [1, 2, 3, 4, 5, 6, 7, 0, 9, 1][P.ph]);\n  P.w += (SPIN[P.ph] - P.w) * min(1, d * 3);\n  P.rot += TAU * P.w * d;\n  const landing = P.ph === 0 && P.yo \u003c 0;\n  shape(P, P.pt / DUR[P.ph]);\n  // The hands follow their mark, easing over the big jumps between steps.\n  if (!P.hd) P.hs = null;\n  else if (!P.hs) P.hs = P.hd.slice();\n  else for (let i = 0; i \u003c 4; i++) abs(P.hd[i] - P.hs[i]) > 3 ? (P.hs[i] += (P.hd[i] - P.hs[i]) * min(1, d * 14)) : (P.hs[i] = P.hd[i]);\n\n  // Slip flung off the wall by the hands, and spattered as the lump lands.\n  const fling = (x, y, sd, n) => {\n    while (n--) P.dr.push([x, y, sd * (8 + rnd() * 26), -8 - rnd() * 26, PY - 4 + rnd() * 10]);\n  };\n  if (P.hs && (P.ph === 3 || P.ph === 4) && rnd() \u003c d * 3) rnd() \u003c 0.5 ? fling(P.hs[0], P.hs[1], -1, 1) : fling(P.hs[2], P.hs[3], 1, 1);\n  if (landing && P.yo === 0) fling(CX - 9, BY - 2, -1, 3), fling(CX + 9, BY - 2, 1, 3);\n  P.dr = P.dr.filter((q) => {\n    (q[0] += q[2] * d), (q[1] += q[3] * d), (q[3] += 150 * d);\n    if (q[3] > 0 && q[1] >= q[4]) {\n      P.sp.push([q[0], q[1], rnd() \u003c 0.3 ? 2 : 1, 0.7 + 0.5 * rnd()]);\n      if (P.sp.length > 110) P.sp.shift();\n      return false;\n    }\n    return q[0] > -2 && q[0] \u003c W + 2;\n  });\n  for (const q of P.pieces) q.dry = min(1, q.dry + d / 75);\n}\n\n// The wall, the rack and the lamp's glow, kept until the lamp or the clay changes.\nfunction backdrop(P) {\n  P.bgKey = bgKey(P);\n  // Clay dust lies on everything in the room and takes the clay's colour.\n  const B = P.bg, LX = P.LX, dust = P.dust, wall = WALL.map((v, n) => mix(v, dust[n] * 0.4, 0.55)), wood = WOOD.map((v, n) => mix(v, dust[n] * 0.6, 0.35));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - LX, dy = y - 10, o = (y * W + x) * 3;\n      let f = 0.24 + 0.85 * exp(-(dx * dx + dy * dy * 0.3) / 1500), col = wall;\n      if (dy > 0) {\n        const cw = 4 + dy * 0.72;\n        f += 0.32 * sm(cw + 6, cw - 3, abs(dx)) * exp(-dy / 90);\n      }\n      f *= 0.9 + 0.16 * hash(x >> 1, y >> 1);\n      for (const sy of SHELF) {\n        if (y === sy) (col = wood), (f *= 1.35);\n        else if (y > sy && y \u003c= sy + 3) (col = wood), (f *= 0.75 + 0.15 * hash(x >> 2, sy));\n        else if (y > sy + 3 && y \u003c= sy + 6) f *= 0.45 + 0.17 * (y - sy - 4);\n      }\n      if ((x \u003c 2 || x > 61) && y \u003c SHELF[2] + 4) (col = wood), (f *= x === 1 || x === 62 ? 0.9 : 0.6);\n      const g = 0.55 * exp(-(dx * dx + (y - 10.5) ** 2) / 30);\n      for (let c = 0; c \u003c 3; c++) B[o + c] = col[c] * f + [255, 196, 120][c] * g;\n    }\n}\n\n// The light from the lamp at a spot: its direction and how much reaches it.\nfunction light(P, x, y) {\n  const lx = cl((P.LX - x) / 24, -1.3, 1.3), ly = 0.3 + (y - 10) / 300, n = sqrt(lx * lx + ly * ly + 0.25);\n  return [lx / n, ly / n, 0.5 / n, 0.6 + 0.5 * exp(-((x - P.LX) ** 2 + ((y - 10) * 0.5) ** 2) / 1800)];\n}\n\nlet F;\nconst bgKey = (P) => round(P.LX * 8) * 64 + round(P.clay * 48);\n// A thrown shape turned on its axis, lit by the lamp: wall, rim and the\n// dark inside. Off-centre clay swings its axis round with the wheel.\nfunction solid(o) {\n  const { cx, by, s, pr, Hp, L, alb } = o, Hs = Hp * s, [l0, l1, l2, lm] = L;\n  let Rm = 0;\n  for (let i = 0; i \u003c= Hp + 1; i++) Rm = max(Rm, pr[i]);\n  Rm *= s;\n  const R = (h) => at(pr, h / s, Hp) * s, off = (h) => o.wa * o.s1 + o.wt * (cl(h / Hs, 0, 1) ** 1.5) * o.s2;\n  const RT = R(Hs), cT = cx + off(Hs), yT = by - Hs, ryT = E * RT + 0.35, ri = o.ri * s, ryi = E * ri + 0.25, wb = abs(o.wa) + abs(o.wt);\n  const hn = sqrt(l0 * l0 + l1 * l1 + (l2 + 1) ** 2), hx = l0 / hn, hy = l1 / hn, hz = (l2 + 1) / hn;\n  const y0 = max(0, floor(yT - ryT - 1)), y1 = min(H - 1, ceil(by + E * Rm + 1)), x0 = max(0, floor(cx - Rm - wb - 1)), x1 = min(W - 1, ceil(cx + Rm + wb + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0, h0 = by - y - 0.5, ox = wb ? off(h0) : 0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx - ox, o3 = (y * W + x) * 3;\n      let h = h0, r = 0, u = 9, c = 0, k, sp = 0;\n      for (let it = 0; it \u003c 3; it++) {\n        r = R(h);\n        u = r > 0.05 ? px / r : 9;\n        c = u * u \u003c 1 ? sqrt(1 - u * u) : 0;\n        h = h0 + E * r * c;\n      }\n      r = R(h);\n      u = r > 0.05 ? px / r : 9;\n      if (h >= 0 && h \u003c= Hs && u * u \u003c 1) {\n        c = sqrt(1 - u * u);\n        const hp = h / s, dR = (R(h + 0.6) - R(h - 0.6)) / 1.2 + o.ring * 2.03 * cos(hp * 2.03), nl = 1 / sqrt(1 + dR * dR);\n        const dif = max(0, (u * l0 - dR * l1 + c * l2) * nl), nh = max(0, (u * hx - dR * hy + c * hz) * nl);\n        k = (o.amb + 0.95 * dif + 0.2 * max(0, (-u * l0 + 0.4 * c) * nl)) * lm;\n        sp = o.spec * nh ** 40;\n        if (o.fl) {\n          // Slip streaks and grog flecks ride round with the wheel.\n          const az = asin(u) - o.rot, a = ((az % TAU) + TAU) % TAU, i = floor(a * 6.366), j = floor(hp / 2.3), q = hash(i, j);\n          const st = 1 + 0.1 * sin(3 * az + 1.3) + 0.07 * sin(5 * az + hp * 0.11);\n          k *= st;\n          sp *= st;\n          if (q \u003c 0.2 && abs(a - (i + 0.5) / 6.366) * r \u003c 0.7 && abs(hp - (j + 0.5) * 2.3) \u003c 0.75) k *= q \u003c 0.1 ? 1.5 : 0.55;\n        }\n      } else {\n        const ex = (x + 0.5 - cT) / RT, ey = (y + 0.5 - yT) / ryT;\n        if (RT \u003c 0.4 || ex * ex + ey * ey > 1) continue;\n        const ix = (x + 0.5 - cT) / (ri + 0.01), iy = (y + 0.5 - yT) / ryi;\n        if (ri > 0.4 && ix * ix + iy * iy \u003c 1) k = (0.05 + 0.42 * cl(-ix * l0 * 1.3 + 0.2, 0, 1) * (iy \u003c 0.3 ? 1 : 0.55)) * lm;\n        else (k = (0.3 + 0.8 * l1) * lm), (sp = o.spec * 0.3);\n      }\n      for (let n = 0; n \u003c 3; n++) F[o3 + n] = alb[n] * k + SHINE[n] * sp;\n    }\n}\n\n// The earlier pots on the shelves, wet and dark, then leather-hard, then pale.\nconst STILL = { s: SHS, wa: 0, wt: 0, s1: 0, s2: 0, rot: 0, ring: 0, fl: 0, amb: 0.38 };\nfunction shelves(P, C) {\n  // While a pot is carried over, its slot stands empty.\n  for (let i = 0; i \u003c min(P.n - (P.ph === 7), P.pieces.length); i++) {\n    const q = P.pieces[i], [sx, sy] = SLOT[q.slot], dr = q.dry, a = dr \u003c 0.45 ? dr / 0.45 : (dr - 0.45) / 0.55;\n    const alb = dr \u003c 0.45 ? C[0].map((v, n) => mix(v * 0.62, C[1][n], a)) : C[1].map((v, n) => mix(v, C[2][n], a));\n    solid({ ...STILL, cx: sx, by: sy + 0.5, pr: q.spec.pr, Hp: q.spec.Hf, ri: q.spec.rim - 1.4, alb, spec: 0.6 * (1 - sm(0, 0.4, dr)), L: light(P, sx, sy - 10) });\n  }\n}\n\nconst put = (x, y, col, k) => {\n  if ((x = round(x - 0.5)) >= 0 && x \u003c W && (y = round(y - 0.5)) >= 0 && y \u003c H) for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) F[o + c] = col[c] * k;\n};\n\n// The lamp: a cord, an enamel shade and the bulb under it.\nfunction lamp(P) {\n  for (let y = 0; y \u003c 12; y++)\n    for (let x = max(0, floor(P.LX - 8)); x \u003c= min(W - 1, P.LX + 8); x++) {\n      const dx = x + 0.5 - P.LX;\n      if (abs(dx) >= (y \u003c 3 ? 0.6 : y \u003c 10 ? 1.3 + (y - 3) * 0.85 : y \u003c 11 ? 2.4 : 1.2)) continue;\n      const k = y > 2 && y \u003c 9 ? 0.7 + 0.6 * (1 - (y - 3) / 6) * (dx \u003c 0 ? 1 : 0.6) : 1;\n      put(x + 0.5, y + 0.5, y \u003c 3 ? [44, 38, 34] : y \u003c 9 ? [38, 72, 62] : [[236, 170, 96], [255, 244, 214], [255, 226, 168]][y - 9], k);\n    }\n}\n\n// The pot's shadow thrown on the wall behind, leaning away from the lamp.\nfunction shadow(P) {\n  for (let y = max(0, floor(BY - P.H - 6)); y \u003c 106; y++) {\n    const h = BY + 4 - y;\n    if (h \u003c 0 || h > P.H) continue;\n    const r = at(P.pr, h, P.H) * 1.08, xc = CX + (CX - P.LX) * (0.12 + h * 0.007);\n    for (let x = max(0, floor(xc - r - 2)); x \u003c= min(W - 1, xc + r + 2); x++) {\n      const k = 1 - 0.5 * sm(r + 1.5, r - 1, abs(x + 0.5 - xc)), o = (y * W + x) * 3;\n      (F[o] *= k), (F[o + 1] *= k), (F[o + 2] *= k);\n    }\n  }\n}\n\n// The splash pan with its slip, and the wheel head turning in it.\nfunction wheel(P, A) {\n  const [l0, l1, l2, lm] = light(P, CX, PY), mt = METAL.map((v, n) => mix(v, A[n], 0.7)), side = (z) => 0.15 + 0.8 * max(0, z * l0 + sqrt(max(0, 1 - z * z)) * l2);\n  for (let y = 100; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const ex = (x + 0.5 - CX) / PR, ey = (y + 0.5 - PY) / (PR * E), dd = ex * ex + ey * ey, o = (y * W + x) * 3;\n      const wx = (x + 0.5 - CX) / WR, wy = (y + 0.5 - BY) / (WR * E), wd = wx * wx + wy * wy;\n      let col, k;\n      if (wd \u003c 1) (col = mt), (k = (0.3 + 0.6 * l1) * lm * (0.9 + 0.1 * cos(sqrt(wd) * WR * 1.4)));\n      else if (wy > 0 && wx * wx \u003c 1 && y + 0.5 \u003c BY + WR * E * sqrt(1 - wx * wx) + 2.5) (col = METAL), (k = 0.5 * side(wx) * lm);\n      else if (dd \u003c 1) dd > 0.86 ? ((col = PLASTIC), (k = (0.6 + 0.6 * l1) * lm)) : ((col = A), (k = (ey \u003c 0 ? 0.26 + 0.12 * (1 + ey) : 0.4) * lm));\n      else if (ey > 0 && ex * ex \u003c 1 && y + 0.5 \u003c PY + PR * E * sqrt(1 - ex * ex) + 6) (col = PLASTIC), (k = side(ex) * lm);\n      else if (y > PY) (col = WALL), (k = 0.2);\n      else continue;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = col[c] * k;\n    }\n  // Slip spattered on the pan, then the wheel's own marks going round.\n  for (const [x, y, z, t] of P.sp) {\n    const ex = (x - CX) / WR, ey = (y - BY) / (WR * E);\n    if (ex * ex + ey * ey \u003c 1.1) continue;\n    put(x, y, A, 0.5 * t * lm);\n    if (z > 1) put(x + 1, y, A, 0.4 * t * lm);\n  }\n  for (let j = 0; j \u003c 6; j++) {\n    const a = P.rot + j * 1.9, r = j \u003c 2 ? 16 : 11.5 + j * 1.6;\n    put(CX + r * sin(a) + 0.5, BY + E * r * cos(a) + 0.5, j \u003c 2 ? [20, 20, 22] : A, j \u003c 2 ? 1 : 0.85 * lm);\n  }\n}\n\n// Skin lit by the lamp, round in section.\nfunction cap(ax, ay, bx, by, ra, rb, col, L, tip) {\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1e-6, rm = max(ra, rb) + 1;\n  for (let y = max(0, floor(min(ay, by) - rm)); y \u003c= min(H - 1, max(ay, by) + rm); y++)\n    for (let x = max(0, floor(min(ax, bx) - rm)); x \u003c= min(W - 1, max(ax, bx) + rm); x++) {\n      const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * dx + qy * dy) / ll, 0, 1), ex = qx - dx * t, ey = qy - dy * t, r = mix(ra, rb, t), dd = ex * ex + ey * ey;\n      if (dd > r * r) continue;\n      const nz = sqrt(1 - dd / (r * r)), k = (0.16 + 0.9 * max(0, (ex / r) * L[0] - (ey / r) * L[1] + nz * L[2])) * L[3], C = tip && t > 0.5 ? tip : col, o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = C[c] * k;\n    }\n}\n\n// A hand on the clay at x, y: the sleeve and forearm down to the side, the\n// back of the hand, the fingers round the wall with slip on them, the thumb.\nfunction hand(P, sd, x, y, slip) {\n  const L = light(P, x, y);\n  cap(x + sd * 22, y + 26, x + sd * 46, y + 62, 5.6, 6.6, SLEEVE, L);\n  cap(x + sd * 6.5, y + 3.5, x + sd * 23, y + 27, 3.4, 4.6, SKIN, L);\n  cap(x + sd * 7.5, y + 3.5, x + sd * 3.2, y - 0.3, 3.6, 3.3, SKIN, L);\n  cap(x + sd * 3.2, y - 0.3, x - sd * 1.8, y + 0.8, 2.6, 2, SKIN, L, slip);\n  cap(x + sd * 3.8, y - 3, x + sd * 2.6, y - 4.4, 1.4, 1.2, SKIN, L, slip);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.pr) return;\n  F = P.f;\n  const c = P.clay * 3, i0 = min(2, floor(c)), f = c - i0, C = [0, 1, 2].map((j) => CLAY[i0][j].map((v, n) => mix(v, CLAY[i0 + 1][j][n], f))), A = C[0];\n  P.dust = C[2];\n  if (P.bgKey !== bgKey(P)) backdrop(P);\n  F.set(P.bg);\n  shelves(P, C);\n  lamp(P);\n  if (!P.g) shadow(P);\n  wheel(P, A);\n  const wire = (front) => {\n    if (P.wire \u003c 0 || !P.hs || P.wire \u003c 0.5 !== front) return;\n    for (let x = P.hs[0]; x \u003c= P.hs[2]; x++) put(x + 0.5, P.hs[1] + 0.5, [220, 222, 230], 0.9);\n  };\n  wire(false);\n  const [gx, gy, gs] = P.g || [CX, BY + P.yo, 1];\n  solid({ cx: gx, by: gy, s: gs, pr: P.pr, Hp: P.H, ri: P.ri, wa: P.wa, wt: P.wt, s1: sin(P.rot), s2: sin(P.rot + 0.8), rot: P.rot, alb: A, spec: 0.9, L: light(P, gx, gy - P.H * gs * 0.5), ring: P.ring, fl: 1, amb: 0.08 });\n  wire(true);\n  if (P.hs) {\n    const slip = SKIN.map((v, n) => mix(v, A[n], 0.6));\n    hand(P, -1, P.hs[0], P.hs[1], slip);\n    hand(P, 1, P.hs[2], P.hs[3], slip);\n  }\n  for (const [x, y] of P.dr) put(x, y, A, 0.8);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-potters-wheel","type":"code","name":"potters-wheel","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Potter's Wheel\n// Family:  pottery\n// Idea:    At night under one warm lamp a potter centres wet clay on the spinning wheel, opens it and pulls the wall up into a tall pot whose throwing rings catch the light, wires it off and sets it on the shelves, where the earlier pots dry from dark to bone-pale.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after throwing a pot on the potter's wheel\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Clay=0..1, Speed=0.2..3, Pots=6..20, Lamp=0..1\n//\n// Knob 1: Clay. The clay body: terracotta at 0, then buff stoneware, grey porcelain and black clay at 1. The pot, the slip in the splash pan, the pots drying on the shelves and the dust on the wall all take it.\n// Knob 2: Speed. At 2 a throw takes about thirteen seconds from the slapped lump to the pot set on the shelf, and the wheel turns about once a second; at 0.2 it all runs ten times slower.\n// Knob 3: Pots. How many earlier pieces stand drying on the rack's three shelves, from six to twenty. The oldest are bone-dry, and each new pot takes the place of the oldest, which goes to the kiln.\n// Knob 4: Lamp. Where the lamp hangs, from left of the wheel at 0 to right of it at 1. The lit side of the pot, the highlight down its throwing rings, its shadow on the wall and the light on the shelves move with it.\n// Buttons: K1 tap makes the wall slump, and the potter balls the clay up and centres it again.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, floor, ceil, round, sin, cos, sqrt, exp, asin, abs, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nconst F32 = (n) => new Float32Array(n);\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The wheel head's centre and radius, the splash pan round it, and the tilt\n// of the view: a circle r across on the wheel shows as an ellipse E * r tall.\nconst [CX, BY, E, WR, PR] = [32, 111, 0.21, 21, 34];\nconst PY = BY + 2.5;\n// Three shelf boards with seven slots each, the order the slots fill, and\n// the size a pot stands at on the shelf against its size on the wheel.\nconst SHELF = [26, 53, 80];\nconst SLOT = [];\nfor (const sy of SHELF) for (let i = 0; i \u003c 7; i++) SLOT.push([4.6 + i * 9.13, sy]);\nconst ORDER = [1, 5, 8, 12, 14, 20, 3, 9, 11, 0, 6, 7, 13, 15, 19, 2, 4, 10, 16, 18, 17];\nconst SHS = 0.27;\n\n// Each clay at every stage of drying, from thrown and wet to bone-dry.\nconst CLAY = [\n  [[255, 112, 56], [196, 96, 58], [238, 158, 108]],\n  [[236, 170, 104], [190, 148, 100], [244, 222, 182]],\n  [[194, 198, 206], [184, 184, 182], [250, 248, 240]],\n  [[110, 96, 96], [86, 80, 78], [156, 148, 142]],\n];\nconst SKIN = [150, 98, 76], WALL = [84, 62, 50], WOOD = [132, 90, 58], METAL = [150, 152, 156], PLASTIC = [76, 80, 90], SLEEVE = [58, 66, 86], SHINE = [255, 232, 196];\n\n// Pot shapes as a height and the radius at keys up the wall: cylinder, bottle,\n// vase with a belly and a flared lip, jar and trumpet vase on the wheel, and\n// bowls and cups from earlier in the evening on the shelves.\nconst SHAPES = [\n  (j) => [76 + 8 * j, [[0, 10.5], [0.45, 10.2 + j], [0.9, 9.6], [1, 11]]],\n  (j) => [84 + 8 * j, [[0, 11], [0.3, 14.5], [0.7, 4.2], [0.93, 4], [1, 5.6]]],\n  (j) => [82 + 8 * j, [[0, 8], [0.42, 15], [0.8, 5], [0.9, 5.4], [1, 9.5]]],\n  (j) => [76 + 6 * j, [[0, 8.5], [0.55, 15.5], [0.9, 9], [1, 10.5]]],\n  (j) => [86 + 6 * j, [[0, 9.5], [0.2, 9.8], [0.62, 5.5], [1, 14]]],\n  (j) => [26 + 6 * j, [[0, 7], [0.45, 14], [1, 19]]],\n  (j) => [40 + 6 * j, [[0, 9], [0.5, 11.5], [0.85, 10.5], [1, 12]]],\n];\nfunction key(K, v) {\n  let i = 0;\n  while (i \u003c K.length - 2 && v > K[i + 1][0]) i++;\n  return mix(K[i][1], K[i + 1][1], sm(K[i][0], K[i + 1][0], v));\n}\n// A radius looked up along a wall kept one entry per row.\nconst at = (pr, h, Hp, i) => ((h = cl(h, 0, Hp)), (i = h | 0), pr[i] + (pr[i + 1] - pr[i]) * (h - i));\nfunction newSpec(not, all) {\n  let type;\n  // The first throw of the night is always one of the three tallest.\n  do type = floor(rnd() * (all ? 7 : 5));\n  while (type === not || (not \u003c -1 && type % 3 === 0));\n  const [Hf, K0] = SHAPES[type](rnd()), g = 0.92 + 0.16 * rnd(), K = K0.map(([v, r]) => [v, r * g]);\n  const pr = F32(ceil(Hf) + 3);\n  for (let h = 0; h \u003c pr.length; h++) pr[h] = key(K, min(1, h / Hf)) + 1.4 * exp(-h / 2.2);\n  // Where the hands shape it: the belly, then the neck above.\n  let vb = 0.5, vn = 0.85, rb = 0, rn = 99;\n  for (const [v, r] of K) if (v > 0.1 && v \u003c 0.85 && r > rb) (rb = r), (vb = v);\n  for (const [v, r] of K) if (v > vb && v \u003c 1 && r \u003c rn) (rn = r), (vn = v);\n  return { type, Hf, pr, rim: K[K.length - 1][1], vb, vn };\n}\n\n// The steps of a throw, how long each takes at Speed 2, and how fast the\n// wheel turns through it (turns a second): slapped down, centred, opened,\n// three pulls, shaped, shown, wired off, lifted to the shelf, and the slump\n// and the balling up after a K1 tap.\nconst DUR = [0.45, 0.9, 0.5, 4.5, 2.6, 1.6, 0.9, 1.8, 1.2, 0.9];\nconst SPIN = [0.4, 1.3, 1.1, 0.95, 0.75, 0.65, 0.3, 0, 0.9, 1];\n// The cylinder after each pull, and its wall at the rim.\nconst RC = [12.5, 11.3, 10.5, 9.9], WALL_T = [4, 2.7, 2.1, 1.7];\nconst cyl = (k, h) => RC[k] - 0.012 * h + 1.4 * exp(-h / 2.2);\nconst dome = (v, r) => r * sqrt(max(0, 1 - v ** 2.4)) + 1.2 * exp(-v * 8);\n\nexport function setup(params) {\n  const P = (params.s = {\n    ph: 0, pt: 0, rot: 0, w: 0.4, H: 11, ri: 0, wa: 0, wt: 0, yo: 0, sH: 11, sri: 0, n: 6, LX: 12, clay: 0,\n    pr: F32(128), snap: F32(128), f: F32(N * 3), bg: F32(N * 3),\n    hd: null, hs: null, g: null, wire: -1, pieces: [], sp: [], dr: [], free: 0, bgKey: -1,\n  });\n  P.spec = newSpec(-2);\n  // The pieces already on the shelves, newest first.\n  for (let i = 0; i \u003c 21; i++) P.pieces.push({ slot: ORDER[i], spec: newSpec(i ? P.pieces[i - 1].spec.type : -1, 1), dry: min(1, 0.1 + i * 0.17) });\n  // Old slip spattered in the pan.\n  for (let i = 0; i \u003c 60; i++) {\n    const a = rnd() * TAU, r = 0.66 + 0.3 * rnd();\n    P.sp.push(i \u003c 44 ? [CX + PR * r * sin(a), PY + PR * E * r * cos(a), rnd() \u003c 0.3 ? 2 : 1, 0.6 + 0.5 * rnd()] : [2 + rnd() * 60, PY + 8 + rnd() * 4, 1, 0.5 + 0.4 * rnd()]);\n  }\n  shape(P, 0);\n}\n\nfunction go(P, ph) {\n  // The oldest piece on show goes to the kiln and the new pot takes its place.\n  if (ph === 7) P.free = P.pieces.splice(min(P.n, P.pieces.length) - 1, 1)[0].slot;\n  if (ph === 0 && P.ph === 7) P.pieces.unshift({ slot: P.free, spec: P.spec, dry: 0 }), (P.spec = newSpec(P.spec.type));\n  P.snap.set(P.pr);\n  Object.assign(P, { ph, pt: 0, sH: P.H, sri: P.ri });\n}\n\nfunction fill(P, Hn, f) {\n  P.H = Hn;\n  for (let h = 0, n = min(126, ceil(Hn) + 2); h \u003c= n; h++) P.pr[h] = max(0, f(min(h, Hn)));\n}\nconst snapR = (P, v) => at(P.snap, v * P.sH, P.sH);\nconst offset = (P, h) => P.wa * sin(P.rot) + P.wt * (cl(h / P.H, 0, 1) ** 1.5) * sin(P.rot + 0.8);\n\n// The clay's wall for this moment of the throw, and where the hands are.\nfunction shape(P, p) {\n  const sp = P.spec;\n  let hand = null;\n  Object.assign(P, { wa: 0, wt: 0.2, yo: 0, g: null, wire: -1, ring: 0.07 });\n  switch (P.ph) {\n    case 0: {\n      // Slapped down from the hands, squashing as it lands.\n      const sq = p > 0.6 ? 1 - 0.3 * sin((PI * (p - 0.6)) / 0.4) : 1, r = 10.5 / sqrt(sq), Hn = 11 * sq;\n      P.yo = p \u003c 0.6 ? -56 * (1 - (p / 0.6) ** 2) : 0;\n      fill(P, Hn, (h) => dome(h / Hn, r));\n      (P.ri = 0), (P.wa = 0.8), (P.ring = 0.04);\n      hand = [5, -0.3, 0];\n      break;\n    }\n    case 1: {\n      // Centred: coned up and pressed down again while the wobble dies.\n      const Hn = 11 + 10 * sin(PI * sm(0.1, 0.9, p)), r = 10.5 * sqrt(11 / Hn);\n      fill(P, Hn, (h) => dome(h / Hn, r));\n      (P.ri = 0), (P.wa = 2.6 * (1 - sm(0, 0.8, p))), (P.ring = 0.05);\n      hand = [Hn * 0.42, -0.5 + 0.4 * sin(p * 20), 0];\n      break;\n    }\n    case 2: {\n      const q = sm(0, 1, p), Hn = mix(P.sH, 13, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), cyl(0, h), q));\n      (P.ri = (RC[0] - WALL_T[0]) * sm(0.15, 1, p)), (P.ring = 0.07);\n      hand = [Hn - 1.5, -0.2, 0];\n      break;\n    }\n    case 3: {\n      // Three pulls. The hands squeeze the wall from the base to the rim and\n      // a roll of clay rides up ahead of them.\n      const k = min(2, floor(P.pt / 1.5)), a = (P.pt - k * 1.5) / 1.2, Hp = sp.Hf * 0.93;\n      const HS = [13, mix(13, Hp, 0.55), mix(13, Hp, 0.82), Hp];\n      if (a \u003c= 1) {\n        const Hn = mix(HS[k], HS[k + 1], sm(0, 1, a)), hh = Hn * min(1, a * 1.04) * 0.95, roll = 1.3 * (1 - sm(0.9, 1, a));\n        fill(P, Hn, (h) => mix(cyl(k + 1, h), cyl(k, h), sm(hh - 1, hh + 2.5, h)) + roll * exp(-(((h - hh - 2.6) / 2.2) ** 2)) - 0.8 * exp(-(((h - hh) / 1.4) ** 2)));\n        P.ri = mix(RC[k] - WALL_T[k], RC[k + 1] - WALL_T[k + 1], sm(0.85, 1, a));\n        hand = [hh, -0.3, 0];\n      } else {\n        const Hn = HS[k + 1], b = (a - 1) / 0.25;\n        fill(P, Hn, (h) => cyl(k + 1, h));\n        P.ri = RC[k + 1] - WALL_T[k + 1];\n        hand = [mix(Hn * 0.95, 3, sm(0, 1, b)), 1.5 * sin(PI * b), 0];\n      }\n      break;\n    }\n    case 4: {\n      // Shaped: the belly pushed out from inside, then the neck collared in.\n      const q = sm(0, 1, p), Hn = mix(P.sH, sp.Hf, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), at(sp.pr, (h / Hn) * sp.Hf, sp.Hf), q));\n      P.ri = mix(P.sri, sp.rim - 1.4, q);\n      hand = [Hn * mix(sp.vb, sp.vn, sm(0.4, 0.75, p)), -0.2, 0];\n      break;\n    }\n    case 8: {\n      // Slumped: the wall sinks, bellies and flops round as the wheel turns.\n      const q = sm(0, 1, p), Hn = mix(P.sH, max(12, P.sH * 0.3), q ** 0.8);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), snapR(P, (h / Hn) * 0.6) * (1 + 0.7 * (h / Hn) ** 2) + (3 * h) / Hn, q));\n      P.ri = P.sri > 0 ? max(0, at(P.pr, Hn, Hn) - 1.8) : 0;\n      (P.wt = 6 * sin(PI * min(1, p * 1.3)) + 2), (P.wa = 1);\n      hand = [Hn * 0.5, 4 + 20 * sm(0, 0.3, p), 10 * sm(0, 0.3, p)];\n      break;\n    }\n    case 9: {\n      const q = sm(0, 1, p), Hn = mix(P.sH, 11, q);\n      fill(P, Hn, (h) => mix(snapR(P, h / Hn), dome(h / Hn, 10.5), q));\n      (P.ri = P.sri * (1 - q)), (P.wa = 2.6), (P.wt = 2 * (1 - q)), (P.ring = 0.04);\n      hand = [Hn * 0.45, mix(6, -0.5, sm(0, 0.5, p)), 0];\n      break;\n    }\n    default: {\n      fill(P, sp.Hf, (h) => at(sp.pr, h, sp.Hf));\n      P.ri = sp.rim - 1.4;\n      // Shown: the hands come away.\n      if (P.ph === 5) hand = [sp.Hf * sp.vn, 2 + 30 * sm(0, 0.6, p), 22 * sm(0, 0.6, p)];\n      if (P.ph === 6) {\n        // Wired off: the hands come in to the wheel and draw the wire under.\n        const a = sm(0, 0.25, p), q = sm(0.25, 1, p), y = mix(BY + 20, BY + E * P.pr[0] * (1 - 2 * q) + 0.5, a);\n        P.wire = a \u003c 1 ? -1 : q;\n        P.hd = [CX - mix(40, 25, a), y, CX + mix(40, 25, a), y];\n        return;\n      }\n      if (P.ph === 7) {\n        // Lifted, then carried back to its slot on the shelf.\n        const q1 = sm(0, 0.3, p), q2 = sm(0.3, 1, p), [sx, sy] = SLOT[P.free], s = mix(1, SHS, q2 ** 0.6);\n        P.g = [mix(CX, sx, q2), mix(BY - 9 * q1, sy + 0.5, q2) - 14 * sin(PI * q2), s];\n        if (q2 \u003c 0.5) {\n          const r = sp.pr[3] * s, y = P.g[1] - 3 * s + 40 * sm(0.2, 0.5, q2);\n          P.hd = [P.g[0] - r, y, P.g[0] + r, y];\n        } else P.hd = null;\n        return;\n      }\n    }\n  }\n  if (hand) {\n    const [h, gap, dy] = hand, r = at(P.pr, h, P.H), o = offset(P, h), y = BY + P.yo - h + dy;\n    P.hd = [CX + o - r - gap, y, CX + o + r + gap, y];\n  } else P.hd = null;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  P.clay = cl(k[0], 0, 1);\n  P.n = round(cl(k[2], 6, 20));\n  P.LX = mix(9, 55, cl(k[3], 0, 1));\n  if (input.btnPressed && input.btnPressed[0] && P.ph >= 1 && P.ph \u003c= 5) go(P, 8);\n  if ((P.pt += d) >= DUR[P.ph]) go(P, [1, 2, 3, 4, 5, 6, 7, 0, 9, 1][P.ph]);\n  P.w += (SPIN[P.ph] - P.w) * min(1, d * 3);\n  P.rot += TAU * P.w * d;\n  const landing = P.ph === 0 && P.yo \u003c 0;\n  shape(P, P.pt / DUR[P.ph]);\n  // The hands follow their mark, easing over the big jumps between steps.\n  if (!P.hd) P.hs = null;\n  else if (!P.hs) P.hs = P.hd.slice();\n  else for (let i = 0; i \u003c 4; i++) abs(P.hd[i] - P.hs[i]) > 3 ? (P.hs[i] += (P.hd[i] - P.hs[i]) * min(1, d * 14)) : (P.hs[i] = P.hd[i]);\n\n  // Slip flung off the wall by the hands, and spattered as the lump lands.\n  const fling = (x, y, sd, n) => {\n    while (n--) P.dr.push([x, y, sd * (8 + rnd() * 26), -8 - rnd() * 26, PY - 4 + rnd() * 10]);\n  };\n  if (P.hs && (P.ph === 3 || P.ph === 4) && rnd() \u003c d * 3) rnd() \u003c 0.5 ? fling(P.hs[0], P.hs[1], -1, 1) : fling(P.hs[2], P.hs[3], 1, 1);\n  if (landing && P.yo === 0) fling(CX - 9, BY - 2, -1, 3), fling(CX + 9, BY - 2, 1, 3);\n  P.dr = P.dr.filter((q) => {\n    (q[0] += q[2] * d), (q[1] += q[3] * d), (q[3] += 150 * d);\n    if (q[3] > 0 && q[1] >= q[4]) {\n      P.sp.push([q[0], q[1], rnd() \u003c 0.3 ? 2 : 1, 0.7 + 0.5 * rnd()]);\n      if (P.sp.length > 110) P.sp.shift();\n      return false;\n    }\n    return q[0] > -2 && q[0] \u003c W + 2;\n  });\n  for (const q of P.pieces) q.dry = min(1, q.dry + d / 75);\n}\n\n// The wall, the rack and the lamp's glow, kept until the lamp or the clay changes.\nfunction backdrop(P) {\n  P.bgKey = bgKey(P);\n  // Clay dust lies on everything in the room and takes the clay's colour.\n  const B = P.bg, LX = P.LX, dust = P.dust, wall = WALL.map((v, n) => mix(v, dust[n] * 0.4, 0.55)), wood = WOOD.map((v, n) => mix(v, dust[n] * 0.6, 0.35));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - LX, dy = y - 10, o = (y * W + x) * 3;\n      let f = 0.24 + 0.85 * exp(-(dx * dx + dy * dy * 0.3) / 1500), col = wall;\n      if (dy > 0) {\n        const cw = 4 + dy * 0.72;\n        f += 0.32 * sm(cw + 6, cw - 3, abs(dx)) * exp(-dy / 90);\n      }\n      f *= 0.9 + 0.16 * hash(x >> 1, y >> 1);\n      for (const sy of SHELF) {\n        if (y === sy) (col = wood), (f *= 1.35);\n        else if (y > sy && y \u003c= sy + 3) (col = wood), (f *= 0.75 + 0.15 * hash(x >> 2, sy));\n        else if (y > sy + 3 && y \u003c= sy + 6) f *= 0.45 + 0.17 * (y - sy - 4);\n      }\n      if ((x \u003c 2 || x > 61) && y \u003c SHELF[2] + 4) (col = wood), (f *= x === 1 || x === 62 ? 0.9 : 0.6);\n      const g = 0.55 * exp(-(dx * dx + (y - 10.5) ** 2) / 30);\n      for (let c = 0; c \u003c 3; c++) B[o + c] = col[c] * f + [255, 196, 120][c] * g;\n    }\n}\n\n// The light from the lamp at a spot: its direction and how much reaches it.\nfunction light(P, x, y) {\n  const lx = cl((P.LX - x) / 24, -1.3, 1.3), ly = 0.3 + (y - 10) / 300, n = sqrt(lx * lx + ly * ly + 0.25);\n  return [lx / n, ly / n, 0.5 / n, 0.6 + 0.5 * exp(-((x - P.LX) ** 2 + ((y - 10) * 0.5) ** 2) / 1800)];\n}\n\nlet F;\nconst bgKey = (P) => round(P.LX * 8) * 64 + round(P.clay * 48);\n// A thrown shape turned on its axis, lit by the lamp: wall, rim and the\n// dark inside. Off-centre clay swings its axis round with the wheel.\nfunction solid(o) {\n  const { cx, by, s, pr, Hp, L, alb } = o, Hs = Hp * s, [l0, l1, l2, lm] = L;\n  let Rm = 0;\n  for (let i = 0; i \u003c= Hp + 1; i++) Rm = max(Rm, pr[i]);\n  Rm *= s;\n  const R = (h) => at(pr, h / s, Hp) * s, off = (h) => o.wa * o.s1 + o.wt * (cl(h / Hs, 0, 1) ** 1.5) * o.s2;\n  const RT = R(Hs), cT = cx + off(Hs), yT = by - Hs, ryT = E * RT + 0.35, ri = o.ri * s, ryi = E * ri + 0.25, wb = abs(o.wa) + abs(o.wt);\n  const hn = sqrt(l0 * l0 + l1 * l1 + (l2 + 1) ** 2), hx = l0 / hn, hy = l1 / hn, hz = (l2 + 1) / hn;\n  const y0 = max(0, floor(yT - ryT - 1)), y1 = min(H - 1, ceil(by + E * Rm + 1)), x0 = max(0, floor(cx - Rm - wb - 1)), x1 = min(W - 1, ceil(cx + Rm + wb + 1));\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0, h0 = by - y - 0.5, ox = wb ? off(h0) : 0; x \u003c= x1; x++) {\n      const px = x + 0.5 - cx - ox, o3 = (y * W + x) * 3;\n      let h = h0, r = 0, u = 9, c = 0, k, sp = 0;\n      for (let it = 0; it \u003c 3; it++) {\n        r = R(h);\n        u = r > 0.05 ? px / r : 9;\n        c = u * u \u003c 1 ? sqrt(1 - u * u) : 0;\n        h = h0 + E * r * c;\n      }\n      r = R(h);\n      u = r > 0.05 ? px / r : 9;\n      if (h >= 0 && h \u003c= Hs && u * u \u003c 1) {\n        c = sqrt(1 - u * u);\n        const hp = h / s, dR = (R(h + 0.6) - R(h - 0.6)) / 1.2 + o.ring * 2.03 * cos(hp * 2.03), nl = 1 / sqrt(1 + dR * dR);\n        const dif = max(0, (u * l0 - dR * l1 + c * l2) * nl), nh = max(0, (u * hx - dR * hy + c * hz) * nl);\n        k = (o.amb + 0.95 * dif + 0.2 * max(0, (-u * l0 + 0.4 * c) * nl)) * lm;\n        sp = o.spec * nh ** 40;\n        if (o.fl) {\n          // Slip streaks and grog flecks ride round with the wheel.\n          const az = asin(u) - o.rot, a = ((az % TAU) + TAU) % TAU, i = floor(a * 6.366), j = floor(hp / 2.3), q = hash(i, j);\n          const st = 1 + 0.1 * sin(3 * az + 1.3) + 0.07 * sin(5 * az + hp * 0.11);\n          k *= st;\n          sp *= st;\n          if (q \u003c 0.2 && abs(a - (i + 0.5) / 6.366) * r \u003c 0.7 && abs(hp - (j + 0.5) * 2.3) \u003c 0.75) k *= q \u003c 0.1 ? 1.5 : 0.55;\n        }\n      } else {\n        const ex = (x + 0.5 - cT) / RT, ey = (y + 0.5 - yT) / ryT;\n        if (RT \u003c 0.4 || ex * ex + ey * ey > 1) continue;\n        const ix = (x + 0.5 - cT) / (ri + 0.01), iy = (y + 0.5 - yT) / ryi;\n        if (ri > 0.4 && ix * ix + iy * iy \u003c 1) k = (0.05 + 0.42 * cl(-ix * l0 * 1.3 + 0.2, 0, 1) * (iy \u003c 0.3 ? 1 : 0.55)) * lm;\n        else (k = (0.3 + 0.8 * l1) * lm), (sp = o.spec * 0.3);\n      }\n      for (let n = 0; n \u003c 3; n++) F[o3 + n] = alb[n] * k + SHINE[n] * sp;\n    }\n}\n\n// The earlier pots on the shelves, wet and dark, then leather-hard, then pale.\nconst STILL = { s: SHS, wa: 0, wt: 0, s1: 0, s2: 0, rot: 0, ring: 0, fl: 0, amb: 0.38 };\nfunction shelves(P, C) {\n  // While a pot is carried over, its slot stands empty.\n  for (let i = 0; i \u003c min(P.n - (P.ph === 7), P.pieces.length); i++) {\n    const q = P.pieces[i], [sx, sy] = SLOT[q.slot], dr = q.dry, a = dr \u003c 0.45 ? dr / 0.45 : (dr - 0.45) / 0.55;\n    const alb = dr \u003c 0.45 ? C[0].map((v, n) => mix(v * 0.62, C[1][n], a)) : C[1].map((v, n) => mix(v, C[2][n], a));\n    solid({ ...STILL, cx: sx, by: sy + 0.5, pr: q.spec.pr, Hp: q.spec.Hf, ri: q.spec.rim - 1.4, alb, spec: 0.6 * (1 - sm(0, 0.4, dr)), L: light(P, sx, sy - 10) });\n  }\n}\n\nconst put = (x, y, col, k) => {\n  if ((x = round(x - 0.5)) >= 0 && x \u003c W && (y = round(y - 0.5)) >= 0 && y \u003c H) for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++) F[o + c] = col[c] * k;\n};\n\n// The lamp: a cord, an enamel shade and the bulb under it.\nfunction lamp(P) {\n  for (let y = 0; y \u003c 12; y++)\n    for (let x = max(0, floor(P.LX - 8)); x \u003c= min(W - 1, P.LX + 8); x++) {\n      const dx = x + 0.5 - P.LX;\n      if (abs(dx) >= (y \u003c 3 ? 0.6 : y \u003c 10 ? 1.3 + (y - 3) * 0.85 : y \u003c 11 ? 2.4 : 1.2)) continue;\n      const k = y > 2 && y \u003c 9 ? 0.7 + 0.6 * (1 - (y - 3) / 6) * (dx \u003c 0 ? 1 : 0.6) : 1;\n      put(x + 0.5, y + 0.5, y \u003c 3 ? [44, 38, 34] : y \u003c 9 ? [38, 72, 62] : [[236, 170, 96], [255, 244, 214], [255, 226, 168]][y - 9], k);\n    }\n}\n\n// The pot's shadow thrown on the wall behind, leaning away from the lamp.\nfunction shadow(P) {\n  for (let y = max(0, floor(BY - P.H - 6)); y \u003c 106; y++) {\n    const h = BY + 4 - y;\n    if (h \u003c 0 || h > P.H) continue;\n    const r = at(P.pr, h, P.H) * 1.08, xc = CX + (CX - P.LX) * (0.12 + h * 0.007);\n    for (let x = max(0, floor(xc - r - 2)); x \u003c= min(W - 1, xc + r + 2); x++) {\n      const k = 1 - 0.5 * sm(r + 1.5, r - 1, abs(x + 0.5 - xc)), o = (y * W + x) * 3;\n      (F[o] *= k), (F[o + 1] *= k), (F[o + 2] *= k);\n    }\n  }\n}\n\n// The splash pan with its slip, and the wheel head turning in it.\nfunction wheel(P, A) {\n  const [l0, l1, l2, lm] = light(P, CX, PY), mt = METAL.map((v, n) => mix(v, A[n], 0.7)), side = (z) => 0.15 + 0.8 * max(0, z * l0 + sqrt(max(0, 1 - z * z)) * l2);\n  for (let y = 100; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const ex = (x + 0.5 - CX) / PR, ey = (y + 0.5 - PY) / (PR * E), dd = ex * ex + ey * ey, o = (y * W + x) * 3;\n      const wx = (x + 0.5 - CX) / WR, wy = (y + 0.5 - BY) / (WR * E), wd = wx * wx + wy * wy;\n      let col, k;\n      if (wd \u003c 1) (col = mt), (k = (0.3 + 0.6 * l1) * lm * (0.9 + 0.1 * cos(sqrt(wd) * WR * 1.4)));\n      else if (wy > 0 && wx * wx \u003c 1 && y + 0.5 \u003c BY + WR * E * sqrt(1 - wx * wx) + 2.5) (col = METAL), (k = 0.5 * side(wx) * lm);\n      else if (dd \u003c 1) dd > 0.86 ? ((col = PLASTIC), (k = (0.6 + 0.6 * l1) * lm)) : ((col = A), (k = (ey \u003c 0 ? 0.26 + 0.12 * (1 + ey) : 0.4) * lm));\n      else if (ey > 0 && ex * ex \u003c 1 && y + 0.5 \u003c PY + PR * E * sqrt(1 - ex * ex) + 6) (col = PLASTIC), (k = side(ex) * lm);\n      else if (y > PY) (col = WALL), (k = 0.2);\n      else continue;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = col[c] * k;\n    }\n  // Slip spattered on the pan, then the wheel's own marks going round.\n  for (const [x, y, z, t] of P.sp) {\n    const ex = (x - CX) / WR, ey = (y - BY) / (WR * E);\n    if (ex * ex + ey * ey \u003c 1.1) continue;\n    put(x, y, A, 0.5 * t * lm);\n    if (z > 1) put(x + 1, y, A, 0.4 * t * lm);\n  }\n  for (let j = 0; j \u003c 6; j++) {\n    const a = P.rot + j * 1.9, r = j \u003c 2 ? 16 : 11.5 + j * 1.6;\n    put(CX + r * sin(a) + 0.5, BY + E * r * cos(a) + 0.5, j \u003c 2 ? [20, 20, 22] : A, j \u003c 2 ? 1 : 0.85 * lm);\n  }\n}\n\n// Skin lit by the lamp, round in section.\nfunction cap(ax, ay, bx, by, ra, rb, col, L, tip) {\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1e-6, rm = max(ra, rb) + 1;\n  for (let y = max(0, floor(min(ay, by) - rm)); y \u003c= min(H - 1, max(ay, by) + rm); y++)\n    for (let x = max(0, floor(min(ax, bx) - rm)); x \u003c= min(W - 1, max(ax, bx) + rm); x++) {\n      const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * dx + qy * dy) / ll, 0, 1), ex = qx - dx * t, ey = qy - dy * t, r = mix(ra, rb, t), dd = ex * ex + ey * ey;\n      if (dd > r * r) continue;\n      const nz = sqrt(1 - dd / (r * r)), k = (0.16 + 0.9 * max(0, (ex / r) * L[0] - (ey / r) * L[1] + nz * L[2])) * L[3], C = tip && t > 0.5 ? tip : col, o = (y * W + x) * 3;\n      for (let c = 0; c \u003c 3; c++) F[o + c] = C[c] * k;\n    }\n}\n\n// A hand on the clay at x, y: the sleeve and forearm down to the side, the\n// back of the hand, the fingers round the wall with slip on them, the thumb.\nfunction hand(P, sd, x, y, slip) {\n  const L = light(P, x, y);\n  cap(x + sd * 22, y + 26, x + sd * 46, y + 62, 5.6, 6.6, SLEEVE, L);\n  cap(x + sd * 6.5, y + 3.5, x + sd * 23, y + 27, 3.4, 4.6, SKIN, L);\n  cap(x + sd * 7.5, y + 3.5, x + sd * 3.2, y - 0.3, 3.6, 3.3, SKIN, L);\n  cap(x + sd * 3.2, y - 0.3, x - sd * 1.8, y + 0.8, 2.6, 2, SKIN, L, slip);\n  cap(x + sd * 3.8, y - 3, x + sd * 2.6, y - 4.4, 1.4, 1.2, SKIN, L, slip);\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || !P.pr) return;\n  F = P.f;\n  const c = P.clay * 3, i0 = min(2, floor(c)), f = c - i0, C = [0, 1, 2].map((j) => CLAY[i0][j].map((v, n) => mix(v, CLAY[i0 + 1][j][n], f))), A = C[0];\n  P.dust = C[2];\n  if (P.bgKey !== bgKey(P)) backdrop(P);\n  F.set(P.bg);\n  shelves(P, C);\n  lamp(P);\n  if (!P.g) shadow(P);\n  wheel(P, A);\n  const wire = (front) => {\n    if (P.wire \u003c 0 || !P.hs || P.wire \u003c 0.5 !== front) return;\n    for (let x = P.hs[0]; x \u003c= P.hs[2]; x++) put(x + 0.5, P.hs[1] + 0.5, [220, 222, 230], 0.9);\n  };\n  wire(false);\n  const [gx, gy, gs] = P.g || [CX, BY + P.yo, 1];\n  solid({ cx: gx, by: gy, s: gs, pr: P.pr, Hp: P.H, ri: P.ri, wa: P.wa, wt: P.wt, s1: sin(P.rot), s2: sin(P.rot + 0.8), rot: P.rot, alb: A, spec: 0.9, L: light(P, gx, gy - P.H * gs * 0.5), ring: P.ring, fl: 1, amb: 0.08 });\n  wire(true);\n  if (P.hs) {\n    const slip = SKIN.map((v, n) => mix(v, A[n], 0.6));\n    hand(P, -1, P.hs[0], P.hs[1], slip);\n    hand(P, 1, P.hs[2], P.hs[3], slip);\n  }\n  for (const [x, y] of P.dr) put(x, y, A, 0.8);\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Clay=0..1, Speed=0.2..3, Pots=6..20, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Clay","min":0,"max":1,"about":"The clay body: terracotta at 0, then buff stoneware, grey porcelain and black clay at 1. The pot, the slip in the splash pan, the pots drying on the shelves and the dust on the wall all take it."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a throw takes about thirteen seconds from the slapped lump to the pot set on the shelf, and the wheel turns about once a second; at 0.2 it all runs ten times slower."},{"name":"Pots","min":6,"max":20,"about":"How many earlier pieces stand drying on the rack's three shelves, from six to twenty. The oldest are bone-dry, and each new pot takes the place of the oldest, which goes to the kiln."},{"name":"Lamp","min":0,"max":1,"about":"Where the lamp hangs, from left of the wheel at 0 to right of it at 1. The lit side of the pot, the highlight down its throwing rings, its shadow on the wall and the light on the shelves move with it."}],"start":[0,2,6,0.06],"measures":{"motion":0.6649,"detail":0.0524,"edges":0.2558,"complexity":1.7276,"coverage":0.8999,"colour":0.2006,"drift":0.0739},"knobResponse":[0.0662,0.0422,0.05,0.1325]},{"slug":"proscenium","title":"Proscenium","family":"stage","round":23,"note":"금박 프로시니엄 아래 붉은 벨벳 막이 플라이로 올라가면 달빛 바다나 숲, 밤 도시, 눈 내리는 마을을 그린 배경막이 드러나고, 브리지 조명의 빛줄기가 연무를 갈라요. 발레리나가 팔로 스폿을 받으며 도약해 무대를 건너고, 막이 내리면 막 앞에서 인사해요. 맨 아래에는 실크해트를 쓴 사람이 섞인 앞줄 관객의 뒤통수가 있어요.","idea":"A theatre from the stalls: under a gilded arch the red house curtain rises on a painted backcloth, lamps above cut shafts through the haze, a dancer crosses in a follow spot, and the curtain falls for her bow before the next scene.","buttons":"K1 tap brings the curtain in now, or takes it out again if it is in.","code":"// ===== Patternflow pattern =====\n// Title:   Proscenium\n// Family:  stage\n// Idea:    A theatre from the stalls: under a gilded arch the red house curtain rises on a painted backcloth, lamps above cut shafts through the haze, a dancer crosses in a follow spot, and the curtain falls for her bow before the next scene.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the proscenium stage of a nineteenth-century opera house\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Gel=0..1, Speed=0.2..3, Scene=0..3, Haze=0..1\n//\n// Knob 1: Gel. The colour of the stage wash and the beams: steel blue at 0, turning through violet and rose to amber in the middle, then through green back to blue.\n// Knob 2: Speed. How fast the show runs: at 2 the curtain takes 2.8 s to rise and a whole round of rise, dance, fall and bow is 12 s; at 0.2 it all runs ten times slower.\n// Knob 3: Scene. The backdrop the curtain rises on: a moonlit sea, a forest, a night city or a snowfall, the others following in that order. Turning it brings the curtain in and out again on the new one.\n// Knob 4: Haze. How much haze hangs in the air. At 0 the beams are thin shafts; turned up they swell and the whole stage glows in the gel.\n// Buttons: K1 tap brings the curtain in now, or takes it out again if it is in.\n\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the arch: columns XL..XR, rows from TOP down to the stage lip.\nconst [XL, XR, TOP, TRUSS, SKY, LENS, BACK, CURT, LIP] = [4, 59, 8, 11, 15, 17, 78, 96, 100];\n// The phases of a round, in seconds at Speed 2.\nconst [TRISE, TSHOW, TFALL, TBOW, THOLD] = [2.8, 4, 1.8, 3.2, 0.6];\nconst LAMPS = [10, 19, 27, 36, 44, 53];\nconst AIM = [34, 46, 15, 49, 20, 31];\nconst { min, max, sqrt, sin, cos, exp, abs, round, floor, hypot, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// Smooth value noise, for the forest's leaves and bark.\nfunction vnoise(x, y) {\n  const xi = floor(x), yi = floor(y);\n  const u = x - xi, v = y - yi;\n  const su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const h = (a, b) => hash(a * 157 + b * 7919 + 13);\n  const a = h(xi, yi), b = h(xi + 1, yi), c = h(xi, yi + 1), d = h(xi + 1, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + d) * su * sv;\n}\nconst mix3 = (a, b, t) => a.map((v, j) => v + (b[j] - v) * t);\nfunction put(A, i, c, k = 1) {\n  for (let j = 0; j \u003c 3; j++) A[i * 3 + j] = c[j] * k;\n}\nfunction add(A, i, c, k = 1) {\n  for (let j = 0; j \u003c 3; j++) A[i * 3 + j] += c[j] * k;\n}\nconst gilt = (v) => [min(255, 268 * v), 178 * v + 30 * v ** 4, 58 * v + 70 * v ** 6];\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\n// The painted backcloths. Each writes what the paint reflects (A, 0..1) and\n// what glows on its own from behind the cloth (E, 0..255).\nfunction sea(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  if (py \u003c 56) {\n    put(A, i, mix3([0.1, 0.14, 0.36], [0.36, 0.44, 0.7], ((py - SKY) / 41) ** 1.3));\n    if (y \u003c 48 && hash(i + 77) > 0.982) add(E, i, [1, 1, 1], 60 + 90 * hash(i + 5));\n    const d = hypot(px - 43, py - 31);\n    if (d \u003c 6.3) {\n      put(A, i, [0, 0, 0]);\n      put(E, i, [242, 236, 205], 0.88 + 0.12 * sqrt(1 - (d / 6.3) ** 2) - 0.14 * (vnoise(px * 0.7, py * 0.7) > 0.64));\n    } else add(E, i, [80, 88, 110], exp(-(d - 6.3) / 3.5));\n    // A headland on the left and a ship with its sails up on the horizon.\n    const ship = (abs(px - 26) \u003c 4.2 - (py - 53.5) * 0.9 && py > 53.5) || (abs(px - 26) \u003c 0.5 && py > 44) || (py > 45 && px > 26.5 && px \u003c 26.6 + (py - 45) * 0.55) || (py > 47.5 && px \u003c 25.5 && px > 25.4 - (py - 47.5) * 0.45);\n    if ((px \u003c 15 && py > 43 + 1.2 * (px - 4) + 1.5 * sin(px * 1.1)) || ship) put(A, i, [0.035, 0.05, 0.09]);\n  } else put(A, i, mix3([0.05, 0.12, 0.3], [0.1, 0.2, 0.42], (py - 56) / 22), 1 + 0.2 * sin(py * 1.9 + 1.4 * sin(px * 0.35)));\n}\n\nconst TRUNKS = [[8, 2.2, 0.2], [14, 3.4, 1], [22, 1.7, 0], [30, 2.4, 0.5], [40, 3.8, 1], [47, 1.9, 0], [53, 3, 0.9], [58.5, 2.2, 0.3]];\nfunction forest(x, y, i, A) {\n  const px = x + 0.5, py = y + 0.5;\n  const t = (py - SKY) / (BACK - SKY);\n  let c = mix3([0.18, 0.32, 0.32], [0.5, 0.62, 0.44], t);\n  c = mix3(c, [0.62, 0.68, 0.48], 0.45 * exp(-((px - 32) ** 2) / 90 - ((py - 60) ** 2) / 260));\n  for (const [tx, hw, near] of TRUNKS)\n    if (abs(px - tx - 0.7 * sin(py * 0.07 + tx)) \u003c hw * (0.85 + 0.35 * t)) c = mix3(c, [0.09, 0.07, 0.05].map((v) => v * (0.7 + 0.5 * vnoise(px * 1.4, py * 0.22))), 0.45 + 0.45 * near);\n  const n = vnoise(px * 0.16, py * 0.2) * 0.65 + vnoise(px * 0.45, py * 0.5) * 0.35;\n  if (n - (py - 20) * 0.022 > 0.42) c = mix3([0.05, 0.16, 0.06], [0.2, 0.44, 0.14], vnoise(px * 0.9, py * 0.9));\n  if (py > 67 + 2.5 * sin(px * 0.55) + 1.5 * sin(px * 1.4 + 1)) c = mix3([0.05, 0.16, 0.05], [0.16, 0.36, 0.1], hash(i * 3));\n  put(A, i, c);\n}\n\n// The city's skyline, two rows of blocks, and which LED is which window.\nconst [FARTOP, NEARTOP, NEARL] = [0, 0, 0].map(() => new Int16Array(W));\nconst WIN = new Int16Array(N).fill(-1);\nlet NWIN = 0;\nfor (let x = 0, k = 0; x \u003c W; k++)\n  for (let j = 0, w = 5 + floor(hash(k + 400) * 5), top = 38 + floor(hash(k + 500) * 16); j \u003c w && x \u003c W; j++) FARTOP[x++] = top;\nfor (let x = 0, k = 0; x \u003c W; k++)\n  for (let j = 0, w = 6 + floor(hash(k + 600) * 6), top = 50 + floor(hash(k + 700) * 15); j \u003c w && x \u003c W; j++, x++) {\n    NEARTOP[x] = top;\n    NEARL[x] = x - j;\n  }\nfunction city(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  put(A, i, mix3([0.1, 0.07, 0.24], [0.44, 0.25, 0.42], clamp((py - SKY) / 45, 0, 1) ** 1.2));\n  if (y \u003c 40 && hash(i + 91) > 0.986) add(E, i, [1, 1, 1], 50 + 70 * hash(i));\n  if (hypot(px - 15, py - 28) \u003c 4.4 && hypot(px - 17, py - 26.6) > 3.8) put(E, i, [240, 226, 170]);\n  const tower = (abs(px - 46.5) \u003c 2.2 && py > 31) || (abs(px - 46.5) \u003c 0.6 && py > 25);\n  if (py > FARTOP[x] || tower) put(A, i, [0.14, 0.12, 0.25]);\n  if (tower && py > 33 && x === 46 && y % 3 === 0) put(E, i, [170, 140, 90]);\n  if (py > NEARTOP[x]) {\n    put(A, i, [0.05, 0.045, 0.09]);\n    if ((x - NEARL[x]) % 2 === 1 && (y - NEARTOP[x]) % 3 === 2 && NEARTOP[min(W - 1, x + 1)] === NEARTOP[x]) WIN[i] = NWIN++;\n  }\n}\n\nconst PINES = [[9, 60, 15], [15, 58, 11], [50, 61, 16], [57, 59, 12], [22, 69, 9], [43, 70, 10]];\nfunction snow(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  let c = mix3([0.2, 0.26, 0.44], [0.48, 0.54, 0.68], (py - SKY) / 50);\n  if (y \u003c 44 && hash(i + 33) > 0.988) add(E, i, [1, 1, 1], 40 + 50 * hash(i));\n  if (py > 54 + 5 * sin(px * 0.08 + 0.6) + 2 * sin(px * 0.23)) c = [0.56, 0.62, 0.8];\n  if (py > 65 + 4 * sin(px * 0.11 - 1.1)) c = [0.8, 0.84, 0.96];\n  for (const [tx, base, h] of PINES) {\n    const d = py - (base - h);\n    if (d > 0 && d \u003c h + 2 && abs(px - tx) \u003c (d \u003c h ? (d % 4) * 0.55 + d * 0.22 : 0.7) + 0.3) c = d \u003c h && d % 4 \u003c 0.9 ? [0.85, 0.9, 1] : [0.04, 0.13, 0.09];\n  }\n  // A cottage on the near hill, its roof under snow and one window lit.\n  if (px > 30 && px \u003c 38 && py > 62 && py \u003c 68) c = [0.24, 0.13, 0.08];\n  if (py > 58 && py \u003c= 62 && abs(px - 34) \u003c (py - 57.5) * 1.2) c = [0.88, 0.92, 1];\n  if (px > 35.5 && px \u003c 37 && py > 56.5 && py \u003c 60) c = [0.2, 0.12, 0.1];\n  if (px > 32.5 && px \u003c 34.5 && py > 63.5 && py \u003c 66) put(E, i, [255, 190, 90]);\n  put(A, i, c);\n}\nconst SCENES = [sea, forest, city, snow];\n\n// The front row: heads [x, top, half-width] above red seat backs.\nconst HEADS = [[5, 109, 4.2], [15.5, 106.5, 4.5], [27, 109.5, 4.3], [37.5, 107.5, 4.6], [49, 108.5, 4.4], [59, 106.5, 4.3]];\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const U = (n) => new Uint8Array(n);\n  const S = { base: -1, alb: [], emi: [], arch: U(N), archC: F(N * 3), floorA: F(N), house: F(N * 3), R: F(N), G: F(N), B: F(N), M: U(N), fb: F(W), flakes: [] };\n  const seat = U(N);\n  const edge = new Int16Array(W);\n  params.s = S;\n  for (let x = 0; x \u003c W; x++) {\n    const dx = min(x - XL, XR - x);\n    edge[x] = x \u003c XL || x > XR ? LIP + 2 : TOP + (dx \u003c 9 ? round(9 - sqrt(81 - (9 - dx) ** 2)) : 0);\n    S.fb[x] = ((2 * PI) / 5.4) * (x + 1.3 * sin(x * 0.31));\n  }\n  // The arch's gilt mouldings go by how far an LED is from the opening.\n  const crest = (x, y) => hypot((x + 0.5 - 32) / 5.5, (y + 0.5 - 6.5) / 4.5);\n  for (let y = 0; y \u003c= LIP + 1; y++) for (let x = 0; x \u003c W; x++) if (y \u003c edge[x] || crest(x, y) \u003c 1) S.arch[y * W + x] = 1;\n  for (let y = 0; y \u003c= LIP + 1; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (!S.arch[i]) continue;\n      let d = 99;\n      for (let v = max(0, y - 6); v \u003c= min(LIP + 1, y + 6); v++)\n        for (let u = max(XL, x - 6); u \u003c= min(XR, x + 6); u++) if (!S.arch[v * W + u]) d = min(d, hypot(u - x, v - y));\n      const along = x >= XL && x \u003c= XR ? x : y;\n      let g = 0.52 + 0.22 * sin(along * 0.9) * sin(d * 1.7) + 0.08 * hash(i);\n      if (d \u003c 5.2) g = d \u003c 1.2 ? 1 : d \u003c 2.2 ? 0.36 : d \u003c 3.2 ? (along % 3 ? 0.55 : 1) : d \u003c 4.2 ? 0.72 : 0.34;\n      const q = crest(x, y);\n      put(S.archC, i, gilt(q \u003c 1 ? (q > 0.8 ? 1 : q > 0.62 ? 0.3 : 0.62 + 0.4 * (1 - q) - 0.25 * (abs(x - 31.5) \u003c 1 && y > 4)) : g * (x \u003c XL || x > XR ? 0.8 + 0.28 * (y / LIP) : 0.95)));\n    }\n  for (let s = 0; s \u003c 4; s++) {\n    const A = F(N * 3);\n    const E = F(N * 3);\n    for (let y = SKY; y \u003c BACK; y++) for (let x = XL; x \u003c= XR; x++) SCENES[s](x, y, y * W + x, A, E);\n    S.alb.push(A), S.emi.push(E);\n  }\n  S.won = U(NWIN).map(() => (Math.random() \u003c 0.55 ? 1 : 0));\n  // Floorboards running away from us to the backcloth.\n  for (let y = BACK; y \u003c LIP; y++)\n    for (let x = XL; x \u003c= XR; x++) {\n      const f = ((((x + 0.5 - 32) / (y + 0.5 - 44)) * 5) % 1 + 1) % 1;\n      S.floorA[y * W + x] = (y === BACK ? 0.4 : 1) * (abs(f - 0.5) > 0.42 ? 0.55 : 1) * (0.92 + 0.16 * hash(y * W + x));\n    }\n  // The house: the pit's glow and its music stand lamps behind the heads.\n  for (let y = LIP + 2; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const px = x + 0.5, py = y + 0.5;\n      let c = [255, 140, 60].map((v) => v * (y \u003c 104 ? 0.12 : 0.3 * exp(-(((py - 110) / 7) ** 2))));\n      for (let k = 0; k \u003c 7; k++) {\n        const d = hypot(px - (4 + k * 9.3), (py - 113.5) * 1.6);\n        if (d \u003c 3) c = c.map((v, j) => v + [230, 170, 90][j] * exp(-d * d));\n      }\n      for (const [cx, top, rx] of HEADS) {\n        const ry = rx * 1.25;\n        // One gentleman has kept his top hat on.\n        const hat = cx === 37.5 && ((abs(px - cx) \u003c 3 && py > top - 5 && py \u003c top + 1.5) || (abs(px - cx) \u003c 5.6 && abs(py - top - 1.5) \u003c 0.8));\n        if (hat || hypot((px - cx) / rx, (py - top - ry) / ry) \u003c 1 || (abs(px - cx) \u003c rx * 0.55 && py > top + ry)) {\n          c = [3, 2, 3];\n          seat[i] = 2;\n        }\n      }\n      // Seat backs in red velvet hide the shoulders.\n      const sx = (((px - 0.3) % 10.6) + 10.6) % 10.6;\n      if (y >= 119 && sx > 0.6 && sx \u003c 10 && (y > 120 || (sx > 1.6 && sx \u003c 9))) {\n        c = [255, 30, 36].map((v) => v * (0.1 + 0.32 * exp(-(py - 119) / 2.5)));\n        seat[i] = 1;\n      }\n      put(S.house, i, c);\n    }\n  // The top of each head catches a little of the stage light.\n  for (let i = W; i \u003c N; i++) if (seat[i] === 2 && !seat[i - W]) put(S.house, i, [96, 62, 40]);\n  const rnd = Math.random;\n  for (let k = 0; k \u003c 70; k++) S.flakes.push({ x: XL + rnd() * (XR - XL), y: SKY + rnd() * (LIP - SKY), v: rnd(), p: rnd() * 6 });\n}\n\n// Set the curtain moving from wherever it is.\nfunction move(S, ph, quick) {\n  S.ph = ph;\n  S.o0 = S.o;\n  S.c = 0;\n  S.quick = quick;\n  S.dur = ph ? TFALL * max(0.25, S.o) : TRISE * max(0.25, 1 - S.o);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.gel = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, 3);\n  S.haze = clamp(k[3], 0, 1);\n  if (S.base \u003c 0) {\n    // Open on the curtain just about to go out.\n    Object.assign(S, { base, scene: base, count: 0, o: 0, t: 0, foot: 1 });\n    move(S, 0, false);\n    S.c = -0.6;\n  }\n  if (base !== S.base) {\n    S.base = base;\n    if (S.ph === 3) {\n      S.count = 0;\n      S.scene = base;\n      move(S, 0, false);\n    } else if (S.ph === 2) S.quick = true;\n    else move(S, 2, true);\n  }\n  if (input.btnPressed && input.btnPressed[0]) move(S, S.ph \u003c 2 ? 2 : 0, false);\n  const st = dt * rate;\n  S.t += st;\n  S.c += st;\n  if (S.ph === 0) {\n    S.o = S.o0 + (1 - S.o0) * sstep(0, S.dur, S.c);\n    if (S.c >= S.dur) {\n      S.ph = 1;\n      S.c = 0;\n      S.dir = S.count % 2 ? -1 : 1;\n    }\n  } else if (S.ph === 1) {\n    S.o = 1;\n    if (S.c >= TSHOW) move(S, 2, false);\n  } else if (S.ph === 2) {\n    S.o = S.o0 * (1 - sstep(0, S.dur, S.c));\n    if (S.c >= S.dur) {\n      // The curtain is in: change the cloth behind it while she bows.\n      S.ph = 3;\n      S.c = 0;\n      S.count = S.quick ? 0 : S.count + 1;\n      S.scene = (S.base + S.count) % 4;\n      S.dur = S.quick ? THOLD : TBOW;\n    }\n  } else if (S.c >= S.dur) move(S, 0, false);\n  S.foot += ((S.ph === 1 ? 0.7 : 1) - S.foot) * min(1, dt * 2);\n  // Lit windows come and go, and snow falls from the flies.\n  for (let w = 0; w \u003c S.won.length; w++) if (Math.random() \u003c st * 0.25) S.won[w] ^= 1;\n  for (const f of S.flakes) {\n    f.x += sin(S.t * 1.3 + f.p) * 0.12 * rate;\n    if ((f.y += (5 + 4 * f.v) * st) >= LIP) Object.assign(f, { y: SKY - Math.random() * 6, x: XL + Math.random() * (XR - XL) });\n  }\n}\n\n// The dancer, as a mask: 1 skin, 2 tutu and bodice, 3 tights, 4 hair.\nfunction stamp(M, x, y, r, c) {\n  for (let v = max(0, floor(y - r)); v \u003c= min(H - 1, floor(y + r)); v++)\n    for (let u = max(0, floor(x - r)); u \u003c= min(W - 1, floor(x + r)); u++) if ((u + 0.5 - x) ** 2 + (v + 0.5 - y) ** 2 \u003c= r * r) M[v * W + u] = c;\n}\nfunction limb(M, x0, y0, x1, y1, r, c) {\n  const n = Math.ceil(hypot(x1 - x0, y1 - y0) * 2) + 1;\n  for (let k = 0; k \u003c= n; k++) stamp(M, x0 + ((x1 - x0) * k) / n, y0 + ((y1 - y0) * k) / n, r, c);\n}\nfunction dancer(M, p) {\n  const { hx, hy, s, dir } = p;\n  const ux = dir * sin(p.lean), uy = -cos(p.lean);\n  for (const a of [p.la, p.lb]) limb(M, hx, hy, hx + dir * sin(a) * 9 * s, hy + cos(a) * 9 * s, 0.72, 3);\n  const sx = hx + ux * 6.2 * s * p.tq, sy = hy + uy * 6.2 * s * p.tq;\n  limb(M, hx, hy, sx, sy, 1.05, 2);\n  const ax = sx - ux * 0.6, ay = sy - uy * 0.6;\n  for (const a of [p.aa, p.ab]) limb(M, ax, ay, ax + dir * sin(a) * 6 * s, ay + cos(a) * 6 * s, 0.65, 1);\n  // The tutu: two layers square to her body.\n  const cx = hx + ux * 0.6, cy = hy + uy * 0.6;\n  limb(M, cx + uy * 5 * s, cy - ux * 5 * s, cx - uy * 5 * s, cy + ux * 5 * s, 0.85, 2);\n  limb(M, cx + ux + uy * 3.8 * s, cy + uy - ux * 3.8 * s, cx + ux - uy * 3.8 * s, cy + uy + ux * 3.8 * s, 0.85, 2);\n  const nx = sx + ux * 2.1 * s, ny = sy + uy * 2.1 * s + p.hd;\n  stamp(M, nx, ny, 1.75 * s, 1);\n  stamp(M, nx + ux * 1.4 * s - dir * 0.5, ny + uy * 1.4 * s, 0.95, 4);\n}\n\n// Where the dancer is and how she stands, or null when she is off.\nfunction pose(S) {\n  const T = S.c;\n  if (S.ph === 1) {\n    const u = (T - 0.15) / 3.6;\n    if (u \u003c 0 || u > 1) return null;\n    const dir = S.dir;\n    const lc = ((T - 0.15) / 1.2) % 1;\n    const p = { hx: dir > 0 ? -9 + 82 * u : 73 - 82 * u, s: 1, dir, lean: 0, tq: 1, hd: 0, fy: 91, aa: 1.35, ab: -1.35, la: 0.45, lb: -0.45, cy: 79, r: 11, ox: 6, oy: -3 };\n    p.hy = 91 - 9 * cos(0.45);\n    if (lc \u003c 0.4) {\n      p.la = 0.42 * sin((lc / 0.4) * 2 * PI);\n      p.lb = -p.la;\n      p.hy = 91 - 9 * cos(p.la);\n    } else if (lc \u003c 0.88) {\n      // The grand jete: a split in the air with the front arm raised.\n      const air = sin(PI * ((lc - 0.4) / 0.48));\n      const sp = 1.35 * min(1, air * 1.6);\n      Object.assign(p, { la: sp, lb: -sp * 1.1, hy: 91 - 9 * max(cos(sp), 0.2) - 6 * air, aa: 1.35 + air, ab: -1.35 - 0.5 * air, lean: 0.08 * air });\n    }\n    p.lev = sstep(0.05, 0.4, T) * (1 - sstep(3.45, 3.85, T));\n    // The operator follows her with the spot, a little behind.\n    S.spx = S.spx === undefined || T \u003c 0.2 ? p.hx : S.spx + (p.hx - S.spx) * 0.25;\n    p.cx = S.spx;\n    return p;\n  }\n  if (S.ph === 3 && !S.quick) {\n    // Her bow in front of the curtain, sinking into the reverence and up again.\n    const k = sstep(0.6, 1.3, T) * (1 - sstep(2.1, 2.7, T));\n    const la = 0.14 + 0.3 * k;\n    const hy = 99 - 9.9 * cos(la);\n    return { hx: 31.5, hy, s: 1.1, dir: 1, lean: 0, tq: 1 - 0.5 * k, hd: 2.6 * k, la, lb: -la, aa: 2.5 - 1.9 * k, ab: -2.5 + 1.9 * k, fy: 99, lev: sstep(0, 0.3, T) * (1 - sstep(2.8, 3.15, T)), cx: 31.5, cy: hy - 4, r: 13, ox: 4, oy: 1 };\n  }\n  return null;\n}\n\n// Per row: the beams' light in the air, and their pools on the floor.\nconst [RB, RP, TX, TY, LI] = [W * 3, W * 3, 6, 6, 6].map((n) => new Float32Array(n));\nconst HR = new Int16Array(W);\nconst DCOL = [0, 0, 0, 1, 0.8, 0.68, 1, 0.95, 0.98, 0.95, 0.74, 0.8, 0.42, 0.26, 0.18];\nconst LIPC = gilt(0.42);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.base \u003c 0) return;\n  const { R, G, B, M, arch, archC, fb, house } = S;\n  const gel = hsv((0.58 + S.gel) % 1, 0.75, 1);\n  const [w0, w1, w2] = gel.map((v) => v + (1 - v) * 0.45);\n  const [b0, b1, b2] = gel.map((v) => v + (1 - v) * 0.35);\n  const hz = 0.32 + 0.9 * S.haze;\n  const fog = 4 + 56 * S.haze;\n  const bw = 5.5 + 3 * S.haze;\n  const A = S.alb[S.scene];\n  const E = S.emi[S.scene];\n  const T = S.t;\n  const ft = S.foot;\n  // The lamps on the bridge, each aimed at a spot on the floor that wanders.\n  for (let j = 0; j \u003c 6; j++) {\n    TX[j] = AIM[j] + 7 * sin(T * 0.33 + j * 1.9);\n    TY[j] = 88 + 4 * sin(T * 0.21 + j * 2.7);\n    LI[j] = 0.62 + 0.38 * sin(T * 0.4 + j * 1.3);\n  }\n  const hem = 94 - S.o * 92;\n  for (let x = 0; x \u003c W; x++) HR[x] = round(hem + 0.4 + 0.4 * sin(fb[x]));\n  const p = pose(S);\n  M.fill(0);\n  const lev = p && p.lev > 0.04 ? p.lev : 0;\n  if (lev) dancer(M, p);\n  const DL = 250 * (0.3 + 0.7 * lev);\n\n  for (let y = 0; y \u003c H; y++) {\n    RB.fill(0);\n    RP.fill(0);\n    for (let j = 0; y > LENS && y \u003c LIP && j \u003c 6; j++) {\n      if (y > TY[j] + 1) continue;\n      const lx = LAMPS[j] + 0.5, ly = LENS + 1;\n      const dx = TX[j] - lx, dy = TY[j] - ly;\n      const inv = 1 / (dx * dx + dy * dy);\n      const tt = clamp((y + 0.5 - ly) / dy, 0, 1);\n      const rc = lx + dx * tt;\n      const rb = (1.9 + bw * tt) * 1.25;\n      const kk = 200 * hz * LI[j];\n      // Each beam is a cone in the haze from its lens down to the floor.\n      for (let x = max(XL, floor(rc - rb)); x \u003c= min(XR, rc + rb); x++) {\n        const ex0 = x + 0.5 - lx, ey0 = y + 0.5 - ly;\n        const t = (ex0 * dx + ey0 * dy) * inv;\n        if (t \u003c 0 || t > 1) continue;\n        const ex = ex0 - t * dx, ey = ey0 - t * dy;\n        const wd = 0.9 + bw * t;\n        const q = (ex * ex + ey * ey) / (wd * wd);\n        if (q >= 1) continue;\n        const k = kk * (1 - q) * (1 - q) * (1.25 - 0.55 * t);\n        RB[x * 3] += b0 * k; RB[x * 3 + 1] += b1 * k; RB[x * 3 + 2] += b2 * k;\n      }\n      const qy = (y + 0.5 - TY[j]) / 3;\n      if (y >= BACK && qy * qy \u003c 1)\n        for (let x = max(XL, floor(TX[j] - 7.5)); x \u003c= min(XR, TX[j] + 7.5); x++) {\n          const qx = (x + 0.5 - TX[j]) / 7.5;\n          const q = 1 - qx * qx - qy * qy;\n          if (q \u003c= 0) continue;\n          const k = 220 * LI[j] * q * sqrt(q);\n          RP[x * 3] += b0 * k; RP[x * 3 + 1] += b1 * k; RP[x * 3 + 2] += b2 * k;\n        }\n    }\n    const spotRow = lev && abs(y + 0.5 - p.cy) \u003c p.r + 1.5;\n    const lv = ft * (0.22 + 0.78 * clamp((y - TOP) / (CURT - TOP), 0, 1) ** 1.5) + 0.16;\n    const fl = ft * 70 * clamp((y - BACK) / (LIP - BACK), 0, 1) ** 2;\n\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const hr = HR[x];\n      let r, g, b;\n      if (arch[i]) (r = archC[i * 3]), (g = archC[i * 3 + 1]), (b = archC[i * 3 + 2]);\n      else if (y > LIP + 1) (r = house[i * 3] * ft), (g = house[i * 3 + 1] * ft), (b = house[i * 3 + 2] * ft);\n      else if (y === LIP) {\n        const on = (x - XL) % 4 === 1;\n        r = on ? 255 : 190 * ft; g = (on ? 215 : 120) * ft; b = (on ? 140 : 50) * ft;\n      } else if (y === LIP + 1) [r, g, b] = LIPC;\n      else {\n        if (y \u003c hr + 3 - (x & 1)) {\n          if (y \u003c hr - 2) {\n            // The house curtain in velvet folds, lit from the footlights below.\n            const q = 0.5 + 0.5 * sin(fb[x] + 0.5 * sin((y - hem) * 0.09 + x * 0.6) * (0.4 + sstep(12, 0, hr - y)));\n            const v = 0.16 + 0.84 * q * (0.4 + 0.6 * q);\n            const sh = 26 * v * v * v * v * lv;\n            r = 250 * v * lv + sh + w0 * 18 * v; g = r * 0.05 + sh + w1 * 10 * v; b = r * 0.09 + sh + w2 * 14 * v;\n          } else {\n            // The gold braid, and the fringe that hangs below it.\n            const gv = (y \u003c hr ? ((x + y) & 1 ? 0.95 : 0.62) : x & 1 ? 0.5 - 0.12 * (y - hr) : 0.88 - 0.1 * (y - hr)) * (0.35 + 0.75 * lv);\n            [r, g, b] = gilt(gv);\n          }\n        } else if (y \u003c TRUSS) r = g = b = 3;\n        else if (y \u003c SKY) {\n          const lace = y === TRUSS || y === SKY - 1 || (x + y) % 4 === 0 || (x - y + 64) % 4 === 0;\n          r = g = lace ? 52 : 4;\n          b = lace ? 58 : 5;\n        } else {\n          if (y \u003c BACK) {\n            r = A[i * 3] * w0 * 165 + E[i * 3]; g = A[i * 3 + 1] * w1 * 165 + E[i * 3 + 1]; b = A[i * 3 + 2] * w2 * 165 + E[i * 3 + 2];\n            if (S.scene === 0 && y >= 56) {\n              // The moon's path: short glints on the swell, wider toward us.\n              const gd = abs(x + 0.5 - 43) / (2 + (y - 56) * 0.22);\n              const cell = floor((x + 0.5 * y) / 3) + y * 31;\n              const gl = gd \u003c 1.5 ? hash(cell + floor(T * 3 + hash(cell) * 9) * 4096) - 0.6 - 0.18 * gd * gd : 0;\n              if (gl > 0) { r += gl * 480; g += gl * 480; b += gl * 430; }\n            } else if (S.scene === 2) {\n              const w = WIN[i];\n              if (w >= 0 && S.won[w]) { r += 235; g += 170; b += 80; }\n              if (x === 46 && y === 25 && T % 1.6 \u003c 0.3) r += 255;\n            }\n          } else {\n            // The floor, lit by the wash and the lamps' pools.\n            const fa = S.floorA[i];\n            r = fa * (w0 * 55 + fl + RP[x * 3]); g = fa * 0.88 * (w1 * 55 + fl * 0.7 + RP[x * 3 + 1]); b = fa * 0.76 * (w2 * 55 + fl * 0.35 + RP[x * 3 + 2]);\n          }\n          if (y > LENS) {\n            r += RB[x * 3]; g += RB[x * 3 + 1]; b += RB[x * 3 + 2];\n          } else\n            for (let j = 0; j \u003c 6; j++) {\n              // A lamp hangs from its yoke, the lens shining down.\n              const d = abs(x - LAMPS[j]);\n              if (d > 1 || (y === SKY && d)) continue;\n              if (y \u003c LENS) r = g = b = y === SKY ? 60 : d ? 34 : 70;\n              else {\n                const k = (0.45 + 0.55 * LI[j]) * (d ? 190 : 255);\n                r = b0 * k; g = b1 * k; b = b2 * k;\n              }\n            }\n        }\n        // Haze in the air, lit by the wash.\n        r += fog * w0; g += fog * w1; b += fog * w2;\n        if (spotRow) {\n          // The follow spot: a pool of white light, with her shadow in it.\n          const ddx = x + 0.5 - p.cx, ddy = y + 0.5 - p.cy;\n          const inn = sstep(p.r + 1.5, p.r - 1.5, sqrt(ddx * ddx + ddy * ddy)) * lev;\n          if (inn > 0) {\n            const bx = floor(p.hx + (x + 0.5 - p.hx - p.ox) / 1.2);\n            const by = floor(p.fy + (y + 0.5 - p.fy - p.oy) / 1.2);\n            const shade = bx >= 0 && bx \u003c W && by >= 0 && by \u003c H && M[by * W + bx] && !M[i];\n            const k = shade ? inn * 0.1 : inn;\n            const dk = (1 + 1.1 * k) * (shade ? 0.55 : 1);\n            r = r * dk + 62 * k; g = g * dk + 58 * k; b = b * dk + 52 * k;\n          }\n        }\n        const c = M[i];\n        if (c) { r = DCOL[c * 3] * DL; g = DCOL[c * 3 + 1] * DL; b = DCOL[c * 3 + 2] * DL; }\n      }\n      R[i] = r; G[i] = g; B[i] = b;\n    }\n  }\n\n  // Paper snow falls from the flies in front of the backcloth.\n  for (const f of S.scene === 3 ? S.flakes : []) {\n    const x = floor(f.x), y = floor(f.y), i = y * W + x;\n    if (y >= SKY && y >= HR[x] + 3 && !arch[i]) {\n      R[i] += 190; G[i] += 195; B[i] += 210;\n    }\n  }\n  for (let i = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) display.setPixel(x, y, R[i] > 255 ? 255 : R[i], G[i] > 255 ? 255 : G[i], B[i] > 255 ? 255 : B[i]);\n}\n","layer":{"id":"layer-proscenium","type":"code","name":"proscenium","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Proscenium\n// Family:  stage\n// Idea:    A theatre from the stalls: under a gilded arch the red house curtain rises on a painted backcloth, lamps above cut shafts through the haze, a dancer crosses in a follow spot, and the curtain falls for her bow before the next scene.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the proscenium stage of a nineteenth-century opera house\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Gel=0..1, Speed=0.2..3, Scene=0..3, Haze=0..1\n//\n// Knob 1: Gel. The colour of the stage wash and the beams: steel blue at 0, turning through violet and rose to amber in the middle, then through green back to blue.\n// Knob 2: Speed. How fast the show runs: at 2 the curtain takes 2.8 s to rise and a whole round of rise, dance, fall and bow is 12 s; at 0.2 it all runs ten times slower.\n// Knob 3: Scene. The backdrop the curtain rises on: a moonlit sea, a forest, a night city or a snowfall, the others following in that order. Turning it brings the curtain in and out again on the new one.\n// Knob 4: Haze. How much haze hangs in the air. At 0 the beams are thin shafts; turned up they swell and the whole stage glows in the gel.\n// Buttons: K1 tap brings the curtain in now, or takes it out again if it is in.\n\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Inside the arch: columns XL..XR, rows from TOP down to the stage lip.\nconst [XL, XR, TOP, TRUSS, SKY, LENS, BACK, CURT, LIP] = [4, 59, 8, 11, 15, 17, 78, 96, 100];\n// The phases of a round, in seconds at Speed 2.\nconst [TRISE, TSHOW, TFALL, TBOW, THOLD] = [2.8, 4, 1.8, 3.2, 0.6];\nconst LAMPS = [10, 19, 27, 36, 44, 53];\nconst AIM = [34, 46, 15, 49, 20, 31];\nconst { min, max, sqrt, sin, cos, exp, abs, round, floor, hypot, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n// Smooth value noise, for the forest's leaves and bark.\nfunction vnoise(x, y) {\n  const xi = floor(x), yi = floor(y);\n  const u = x - xi, v = y - yi;\n  const su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const h = (a, b) => hash(a * 157 + b * 7919 + 13);\n  const a = h(xi, yi), b = h(xi + 1, yi), c = h(xi, yi + 1), d = h(xi + 1, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + d) * su * sv;\n}\nconst mix3 = (a, b, t) => a.map((v, j) => v + (b[j] - v) * t);\nfunction put(A, i, c, k = 1) {\n  for (let j = 0; j \u003c 3; j++) A[i * 3 + j] = c[j] * k;\n}\nfunction add(A, i, c, k = 1) {\n  for (let j = 0; j \u003c 3; j++) A[i * 3 + j] += c[j] * k;\n}\nconst gilt = (v) => [min(255, 268 * v), 178 * v + 30 * v ** 4, 58 * v + 70 * v ** 6];\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\n// The painted backcloths. Each writes what the paint reflects (A, 0..1) and\n// what glows on its own from behind the cloth (E, 0..255).\nfunction sea(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  if (py \u003c 56) {\n    put(A, i, mix3([0.1, 0.14, 0.36], [0.36, 0.44, 0.7], ((py - SKY) / 41) ** 1.3));\n    if (y \u003c 48 && hash(i + 77) > 0.982) add(E, i, [1, 1, 1], 60 + 90 * hash(i + 5));\n    const d = hypot(px - 43, py - 31);\n    if (d \u003c 6.3) {\n      put(A, i, [0, 0, 0]);\n      put(E, i, [242, 236, 205], 0.88 + 0.12 * sqrt(1 - (d / 6.3) ** 2) - 0.14 * (vnoise(px * 0.7, py * 0.7) > 0.64));\n    } else add(E, i, [80, 88, 110], exp(-(d - 6.3) / 3.5));\n    // A headland on the left and a ship with its sails up on the horizon.\n    const ship = (abs(px - 26) \u003c 4.2 - (py - 53.5) * 0.9 && py > 53.5) || (abs(px - 26) \u003c 0.5 && py > 44) || (py > 45 && px > 26.5 && px \u003c 26.6 + (py - 45) * 0.55) || (py > 47.5 && px \u003c 25.5 && px > 25.4 - (py - 47.5) * 0.45);\n    if ((px \u003c 15 && py > 43 + 1.2 * (px - 4) + 1.5 * sin(px * 1.1)) || ship) put(A, i, [0.035, 0.05, 0.09]);\n  } else put(A, i, mix3([0.05, 0.12, 0.3], [0.1, 0.2, 0.42], (py - 56) / 22), 1 + 0.2 * sin(py * 1.9 + 1.4 * sin(px * 0.35)));\n}\n\nconst TRUNKS = [[8, 2.2, 0.2], [14, 3.4, 1], [22, 1.7, 0], [30, 2.4, 0.5], [40, 3.8, 1], [47, 1.9, 0], [53, 3, 0.9], [58.5, 2.2, 0.3]];\nfunction forest(x, y, i, A) {\n  const px = x + 0.5, py = y + 0.5;\n  const t = (py - SKY) / (BACK - SKY);\n  let c = mix3([0.18, 0.32, 0.32], [0.5, 0.62, 0.44], t);\n  c = mix3(c, [0.62, 0.68, 0.48], 0.45 * exp(-((px - 32) ** 2) / 90 - ((py - 60) ** 2) / 260));\n  for (const [tx, hw, near] of TRUNKS)\n    if (abs(px - tx - 0.7 * sin(py * 0.07 + tx)) \u003c hw * (0.85 + 0.35 * t)) c = mix3(c, [0.09, 0.07, 0.05].map((v) => v * (0.7 + 0.5 * vnoise(px * 1.4, py * 0.22))), 0.45 + 0.45 * near);\n  const n = vnoise(px * 0.16, py * 0.2) * 0.65 + vnoise(px * 0.45, py * 0.5) * 0.35;\n  if (n - (py - 20) * 0.022 > 0.42) c = mix3([0.05, 0.16, 0.06], [0.2, 0.44, 0.14], vnoise(px * 0.9, py * 0.9));\n  if (py > 67 + 2.5 * sin(px * 0.55) + 1.5 * sin(px * 1.4 + 1)) c = mix3([0.05, 0.16, 0.05], [0.16, 0.36, 0.1], hash(i * 3));\n  put(A, i, c);\n}\n\n// The city's skyline, two rows of blocks, and which LED is which window.\nconst [FARTOP, NEARTOP, NEARL] = [0, 0, 0].map(() => new Int16Array(W));\nconst WIN = new Int16Array(N).fill(-1);\nlet NWIN = 0;\nfor (let x = 0, k = 0; x \u003c W; k++)\n  for (let j = 0, w = 5 + floor(hash(k + 400) * 5), top = 38 + floor(hash(k + 500) * 16); j \u003c w && x \u003c W; j++) FARTOP[x++] = top;\nfor (let x = 0, k = 0; x \u003c W; k++)\n  for (let j = 0, w = 6 + floor(hash(k + 600) * 6), top = 50 + floor(hash(k + 700) * 15); j \u003c w && x \u003c W; j++, x++) {\n    NEARTOP[x] = top;\n    NEARL[x] = x - j;\n  }\nfunction city(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  put(A, i, mix3([0.1, 0.07, 0.24], [0.44, 0.25, 0.42], clamp((py - SKY) / 45, 0, 1) ** 1.2));\n  if (y \u003c 40 && hash(i + 91) > 0.986) add(E, i, [1, 1, 1], 50 + 70 * hash(i));\n  if (hypot(px - 15, py - 28) \u003c 4.4 && hypot(px - 17, py - 26.6) > 3.8) put(E, i, [240, 226, 170]);\n  const tower = (abs(px - 46.5) \u003c 2.2 && py > 31) || (abs(px - 46.5) \u003c 0.6 && py > 25);\n  if (py > FARTOP[x] || tower) put(A, i, [0.14, 0.12, 0.25]);\n  if (tower && py > 33 && x === 46 && y % 3 === 0) put(E, i, [170, 140, 90]);\n  if (py > NEARTOP[x]) {\n    put(A, i, [0.05, 0.045, 0.09]);\n    if ((x - NEARL[x]) % 2 === 1 && (y - NEARTOP[x]) % 3 === 2 && NEARTOP[min(W - 1, x + 1)] === NEARTOP[x]) WIN[i] = NWIN++;\n  }\n}\n\nconst PINES = [[9, 60, 15], [15, 58, 11], [50, 61, 16], [57, 59, 12], [22, 69, 9], [43, 70, 10]];\nfunction snow(x, y, i, A, E) {\n  const px = x + 0.5, py = y + 0.5;\n  let c = mix3([0.2, 0.26, 0.44], [0.48, 0.54, 0.68], (py - SKY) / 50);\n  if (y \u003c 44 && hash(i + 33) > 0.988) add(E, i, [1, 1, 1], 40 + 50 * hash(i));\n  if (py > 54 + 5 * sin(px * 0.08 + 0.6) + 2 * sin(px * 0.23)) c = [0.56, 0.62, 0.8];\n  if (py > 65 + 4 * sin(px * 0.11 - 1.1)) c = [0.8, 0.84, 0.96];\n  for (const [tx, base, h] of PINES) {\n    const d = py - (base - h);\n    if (d > 0 && d \u003c h + 2 && abs(px - tx) \u003c (d \u003c h ? (d % 4) * 0.55 + d * 0.22 : 0.7) + 0.3) c = d \u003c h && d % 4 \u003c 0.9 ? [0.85, 0.9, 1] : [0.04, 0.13, 0.09];\n  }\n  // A cottage on the near hill, its roof under snow and one window lit.\n  if (px > 30 && px \u003c 38 && py > 62 && py \u003c 68) c = [0.24, 0.13, 0.08];\n  if (py > 58 && py \u003c= 62 && abs(px - 34) \u003c (py - 57.5) * 1.2) c = [0.88, 0.92, 1];\n  if (px > 35.5 && px \u003c 37 && py > 56.5 && py \u003c 60) c = [0.2, 0.12, 0.1];\n  if (px > 32.5 && px \u003c 34.5 && py > 63.5 && py \u003c 66) put(E, i, [255, 190, 90]);\n  put(A, i, c);\n}\nconst SCENES = [sea, forest, city, snow];\n\n// The front row: heads [x, top, half-width] above red seat backs.\nconst HEADS = [[5, 109, 4.2], [15.5, 106.5, 4.5], [27, 109.5, 4.3], [37.5, 107.5, 4.6], [49, 108.5, 4.4], [59, 106.5, 4.3]];\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const U = (n) => new Uint8Array(n);\n  const S = { base: -1, alb: [], emi: [], arch: U(N), archC: F(N * 3), floorA: F(N), house: F(N * 3), R: F(N), G: F(N), B: F(N), M: U(N), fb: F(W), flakes: [] };\n  const seat = U(N);\n  const edge = new Int16Array(W);\n  params.s = S;\n  for (let x = 0; x \u003c W; x++) {\n    const dx = min(x - XL, XR - x);\n    edge[x] = x \u003c XL || x > XR ? LIP + 2 : TOP + (dx \u003c 9 ? round(9 - sqrt(81 - (9 - dx) ** 2)) : 0);\n    S.fb[x] = ((2 * PI) / 5.4) * (x + 1.3 * sin(x * 0.31));\n  }\n  // The arch's gilt mouldings go by how far an LED is from the opening.\n  const crest = (x, y) => hypot((x + 0.5 - 32) / 5.5, (y + 0.5 - 6.5) / 4.5);\n  for (let y = 0; y \u003c= LIP + 1; y++) for (let x = 0; x \u003c W; x++) if (y \u003c edge[x] || crest(x, y) \u003c 1) S.arch[y * W + x] = 1;\n  for (let y = 0; y \u003c= LIP + 1; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      if (!S.arch[i]) continue;\n      let d = 99;\n      for (let v = max(0, y - 6); v \u003c= min(LIP + 1, y + 6); v++)\n        for (let u = max(XL, x - 6); u \u003c= min(XR, x + 6); u++) if (!S.arch[v * W + u]) d = min(d, hypot(u - x, v - y));\n      const along = x >= XL && x \u003c= XR ? x : y;\n      let g = 0.52 + 0.22 * sin(along * 0.9) * sin(d * 1.7) + 0.08 * hash(i);\n      if (d \u003c 5.2) g = d \u003c 1.2 ? 1 : d \u003c 2.2 ? 0.36 : d \u003c 3.2 ? (along % 3 ? 0.55 : 1) : d \u003c 4.2 ? 0.72 : 0.34;\n      const q = crest(x, y);\n      put(S.archC, i, gilt(q \u003c 1 ? (q > 0.8 ? 1 : q > 0.62 ? 0.3 : 0.62 + 0.4 * (1 - q) - 0.25 * (abs(x - 31.5) \u003c 1 && y > 4)) : g * (x \u003c XL || x > XR ? 0.8 + 0.28 * (y / LIP) : 0.95)));\n    }\n  for (let s = 0; s \u003c 4; s++) {\n    const A = F(N * 3);\n    const E = F(N * 3);\n    for (let y = SKY; y \u003c BACK; y++) for (let x = XL; x \u003c= XR; x++) SCENES[s](x, y, y * W + x, A, E);\n    S.alb.push(A), S.emi.push(E);\n  }\n  S.won = U(NWIN).map(() => (Math.random() \u003c 0.55 ? 1 : 0));\n  // Floorboards running away from us to the backcloth.\n  for (let y = BACK; y \u003c LIP; y++)\n    for (let x = XL; x \u003c= XR; x++) {\n      const f = ((((x + 0.5 - 32) / (y + 0.5 - 44)) * 5) % 1 + 1) % 1;\n      S.floorA[y * W + x] = (y === BACK ? 0.4 : 1) * (abs(f - 0.5) > 0.42 ? 0.55 : 1) * (0.92 + 0.16 * hash(y * W + x));\n    }\n  // The house: the pit's glow and its music stand lamps behind the heads.\n  for (let y = LIP + 2; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const px = x + 0.5, py = y + 0.5;\n      let c = [255, 140, 60].map((v) => v * (y \u003c 104 ? 0.12 : 0.3 * exp(-(((py - 110) / 7) ** 2))));\n      for (let k = 0; k \u003c 7; k++) {\n        const d = hypot(px - (4 + k * 9.3), (py - 113.5) * 1.6);\n        if (d \u003c 3) c = c.map((v, j) => v + [230, 170, 90][j] * exp(-d * d));\n      }\n      for (const [cx, top, rx] of HEADS) {\n        const ry = rx * 1.25;\n        // One gentleman has kept his top hat on.\n        const hat = cx === 37.5 && ((abs(px - cx) \u003c 3 && py > top - 5 && py \u003c top + 1.5) || (abs(px - cx) \u003c 5.6 && abs(py - top - 1.5) \u003c 0.8));\n        if (hat || hypot((px - cx) / rx, (py - top - ry) / ry) \u003c 1 || (abs(px - cx) \u003c rx * 0.55 && py > top + ry)) {\n          c = [3, 2, 3];\n          seat[i] = 2;\n        }\n      }\n      // Seat backs in red velvet hide the shoulders.\n      const sx = (((px - 0.3) % 10.6) + 10.6) % 10.6;\n      if (y >= 119 && sx > 0.6 && sx \u003c 10 && (y > 120 || (sx > 1.6 && sx \u003c 9))) {\n        c = [255, 30, 36].map((v) => v * (0.1 + 0.32 * exp(-(py - 119) / 2.5)));\n        seat[i] = 1;\n      }\n      put(S.house, i, c);\n    }\n  // The top of each head catches a little of the stage light.\n  for (let i = W; i \u003c N; i++) if (seat[i] === 2 && !seat[i - W]) put(S.house, i, [96, 62, 40]);\n  const rnd = Math.random;\n  for (let k = 0; k \u003c 70; k++) S.flakes.push({ x: XL + rnd() * (XR - XL), y: SKY + rnd() * (LIP - SKY), v: rnd(), p: rnd() * 6 });\n}\n\n// Set the curtain moving from wherever it is.\nfunction move(S, ph, quick) {\n  S.ph = ph;\n  S.o0 = S.o;\n  S.c = 0;\n  S.quick = quick;\n  S.dur = ph ? TFALL * max(0.25, S.o) : TRISE * max(0.25, 1 - S.o);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.gel = clamp(k[0], 0, 1);\n  const rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, 3);\n  S.haze = clamp(k[3], 0, 1);\n  if (S.base \u003c 0) {\n    // Open on the curtain just about to go out.\n    Object.assign(S, { base, scene: base, count: 0, o: 0, t: 0, foot: 1 });\n    move(S, 0, false);\n    S.c = -0.6;\n  }\n  if (base !== S.base) {\n    S.base = base;\n    if (S.ph === 3) {\n      S.count = 0;\n      S.scene = base;\n      move(S, 0, false);\n    } else if (S.ph === 2) S.quick = true;\n    else move(S, 2, true);\n  }\n  if (input.btnPressed && input.btnPressed[0]) move(S, S.ph \u003c 2 ? 2 : 0, false);\n  const st = dt * rate;\n  S.t += st;\n  S.c += st;\n  if (S.ph === 0) {\n    S.o = S.o0 + (1 - S.o0) * sstep(0, S.dur, S.c);\n    if (S.c >= S.dur) {\n      S.ph = 1;\n      S.c = 0;\n      S.dir = S.count % 2 ? -1 : 1;\n    }\n  } else if (S.ph === 1) {\n    S.o = 1;\n    if (S.c >= TSHOW) move(S, 2, false);\n  } else if (S.ph === 2) {\n    S.o = S.o0 * (1 - sstep(0, S.dur, S.c));\n    if (S.c >= S.dur) {\n      // The curtain is in: change the cloth behind it while she bows.\n      S.ph = 3;\n      S.c = 0;\n      S.count = S.quick ? 0 : S.count + 1;\n      S.scene = (S.base + S.count) % 4;\n      S.dur = S.quick ? THOLD : TBOW;\n    }\n  } else if (S.c >= S.dur) move(S, 0, false);\n  S.foot += ((S.ph === 1 ? 0.7 : 1) - S.foot) * min(1, dt * 2);\n  // Lit windows come and go, and snow falls from the flies.\n  for (let w = 0; w \u003c S.won.length; w++) if (Math.random() \u003c st * 0.25) S.won[w] ^= 1;\n  for (const f of S.flakes) {\n    f.x += sin(S.t * 1.3 + f.p) * 0.12 * rate;\n    if ((f.y += (5 + 4 * f.v) * st) >= LIP) Object.assign(f, { y: SKY - Math.random() * 6, x: XL + Math.random() * (XR - XL) });\n  }\n}\n\n// The dancer, as a mask: 1 skin, 2 tutu and bodice, 3 tights, 4 hair.\nfunction stamp(M, x, y, r, c) {\n  for (let v = max(0, floor(y - r)); v \u003c= min(H - 1, floor(y + r)); v++)\n    for (let u = max(0, floor(x - r)); u \u003c= min(W - 1, floor(x + r)); u++) if ((u + 0.5 - x) ** 2 + (v + 0.5 - y) ** 2 \u003c= r * r) M[v * W + u] = c;\n}\nfunction limb(M, x0, y0, x1, y1, r, c) {\n  const n = Math.ceil(hypot(x1 - x0, y1 - y0) * 2) + 1;\n  for (let k = 0; k \u003c= n; k++) stamp(M, x0 + ((x1 - x0) * k) / n, y0 + ((y1 - y0) * k) / n, r, c);\n}\nfunction dancer(M, p) {\n  const { hx, hy, s, dir } = p;\n  const ux = dir * sin(p.lean), uy = -cos(p.lean);\n  for (const a of [p.la, p.lb]) limb(M, hx, hy, hx + dir * sin(a) * 9 * s, hy + cos(a) * 9 * s, 0.72, 3);\n  const sx = hx + ux * 6.2 * s * p.tq, sy = hy + uy * 6.2 * s * p.tq;\n  limb(M, hx, hy, sx, sy, 1.05, 2);\n  const ax = sx - ux * 0.6, ay = sy - uy * 0.6;\n  for (const a of [p.aa, p.ab]) limb(M, ax, ay, ax + dir * sin(a) * 6 * s, ay + cos(a) * 6 * s, 0.65, 1);\n  // The tutu: two layers square to her body.\n  const cx = hx + ux * 0.6, cy = hy + uy * 0.6;\n  limb(M, cx + uy * 5 * s, cy - ux * 5 * s, cx - uy * 5 * s, cy + ux * 5 * s, 0.85, 2);\n  limb(M, cx + ux + uy * 3.8 * s, cy + uy - ux * 3.8 * s, cx + ux - uy * 3.8 * s, cy + uy + ux * 3.8 * s, 0.85, 2);\n  const nx = sx + ux * 2.1 * s, ny = sy + uy * 2.1 * s + p.hd;\n  stamp(M, nx, ny, 1.75 * s, 1);\n  stamp(M, nx + ux * 1.4 * s - dir * 0.5, ny + uy * 1.4 * s, 0.95, 4);\n}\n\n// Where the dancer is and how she stands, or null when she is off.\nfunction pose(S) {\n  const T = S.c;\n  if (S.ph === 1) {\n    const u = (T - 0.15) / 3.6;\n    if (u \u003c 0 || u > 1) return null;\n    const dir = S.dir;\n    const lc = ((T - 0.15) / 1.2) % 1;\n    const p = { hx: dir > 0 ? -9 + 82 * u : 73 - 82 * u, s: 1, dir, lean: 0, tq: 1, hd: 0, fy: 91, aa: 1.35, ab: -1.35, la: 0.45, lb: -0.45, cy: 79, r: 11, ox: 6, oy: -3 };\n    p.hy = 91 - 9 * cos(0.45);\n    if (lc \u003c 0.4) {\n      p.la = 0.42 * sin((lc / 0.4) * 2 * PI);\n      p.lb = -p.la;\n      p.hy = 91 - 9 * cos(p.la);\n    } else if (lc \u003c 0.88) {\n      // The grand jete: a split in the air with the front arm raised.\n      const air = sin(PI * ((lc - 0.4) / 0.48));\n      const sp = 1.35 * min(1, air * 1.6);\n      Object.assign(p, { la: sp, lb: -sp * 1.1, hy: 91 - 9 * max(cos(sp), 0.2) - 6 * air, aa: 1.35 + air, ab: -1.35 - 0.5 * air, lean: 0.08 * air });\n    }\n    p.lev = sstep(0.05, 0.4, T) * (1 - sstep(3.45, 3.85, T));\n    // The operator follows her with the spot, a little behind.\n    S.spx = S.spx === undefined || T \u003c 0.2 ? p.hx : S.spx + (p.hx - S.spx) * 0.25;\n    p.cx = S.spx;\n    return p;\n  }\n  if (S.ph === 3 && !S.quick) {\n    // Her bow in front of the curtain, sinking into the reverence and up again.\n    const k = sstep(0.6, 1.3, T) * (1 - sstep(2.1, 2.7, T));\n    const la = 0.14 + 0.3 * k;\n    const hy = 99 - 9.9 * cos(la);\n    return { hx: 31.5, hy, s: 1.1, dir: 1, lean: 0, tq: 1 - 0.5 * k, hd: 2.6 * k, la, lb: -la, aa: 2.5 - 1.9 * k, ab: -2.5 + 1.9 * k, fy: 99, lev: sstep(0, 0.3, T) * (1 - sstep(2.8, 3.15, T)), cx: 31.5, cy: hy - 4, r: 13, ox: 4, oy: 1 };\n  }\n  return null;\n}\n\n// Per row: the beams' light in the air, and their pools on the floor.\nconst [RB, RP, TX, TY, LI] = [W * 3, W * 3, 6, 6, 6].map((n) => new Float32Array(n));\nconst HR = new Int16Array(W);\nconst DCOL = [0, 0, 0, 1, 0.8, 0.68, 1, 0.95, 0.98, 0.95, 0.74, 0.8, 0.42, 0.26, 0.18];\nconst LIPC = gilt(0.42);\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || S.base \u003c 0) return;\n  const { R, G, B, M, arch, archC, fb, house } = S;\n  const gel = hsv((0.58 + S.gel) % 1, 0.75, 1);\n  const [w0, w1, w2] = gel.map((v) => v + (1 - v) * 0.45);\n  const [b0, b1, b2] = gel.map((v) => v + (1 - v) * 0.35);\n  const hz = 0.32 + 0.9 * S.haze;\n  const fog = 4 + 56 * S.haze;\n  const bw = 5.5 + 3 * S.haze;\n  const A = S.alb[S.scene];\n  const E = S.emi[S.scene];\n  const T = S.t;\n  const ft = S.foot;\n  // The lamps on the bridge, each aimed at a spot on the floor that wanders.\n  for (let j = 0; j \u003c 6; j++) {\n    TX[j] = AIM[j] + 7 * sin(T * 0.33 + j * 1.9);\n    TY[j] = 88 + 4 * sin(T * 0.21 + j * 2.7);\n    LI[j] = 0.62 + 0.38 * sin(T * 0.4 + j * 1.3);\n  }\n  const hem = 94 - S.o * 92;\n  for (let x = 0; x \u003c W; x++) HR[x] = round(hem + 0.4 + 0.4 * sin(fb[x]));\n  const p = pose(S);\n  M.fill(0);\n  const lev = p && p.lev > 0.04 ? p.lev : 0;\n  if (lev) dancer(M, p);\n  const DL = 250 * (0.3 + 0.7 * lev);\n\n  for (let y = 0; y \u003c H; y++) {\n    RB.fill(0);\n    RP.fill(0);\n    for (let j = 0; y > LENS && y \u003c LIP && j \u003c 6; j++) {\n      if (y > TY[j] + 1) continue;\n      const lx = LAMPS[j] + 0.5, ly = LENS + 1;\n      const dx = TX[j] - lx, dy = TY[j] - ly;\n      const inv = 1 / (dx * dx + dy * dy);\n      const tt = clamp((y + 0.5 - ly) / dy, 0, 1);\n      const rc = lx + dx * tt;\n      const rb = (1.9 + bw * tt) * 1.25;\n      const kk = 200 * hz * LI[j];\n      // Each beam is a cone in the haze from its lens down to the floor.\n      for (let x = max(XL, floor(rc - rb)); x \u003c= min(XR, rc + rb); x++) {\n        const ex0 = x + 0.5 - lx, ey0 = y + 0.5 - ly;\n        const t = (ex0 * dx + ey0 * dy) * inv;\n        if (t \u003c 0 || t > 1) continue;\n        const ex = ex0 - t * dx, ey = ey0 - t * dy;\n        const wd = 0.9 + bw * t;\n        const q = (ex * ex + ey * ey) / (wd * wd);\n        if (q >= 1) continue;\n        const k = kk * (1 - q) * (1 - q) * (1.25 - 0.55 * t);\n        RB[x * 3] += b0 * k; RB[x * 3 + 1] += b1 * k; RB[x * 3 + 2] += b2 * k;\n      }\n      const qy = (y + 0.5 - TY[j]) / 3;\n      if (y >= BACK && qy * qy \u003c 1)\n        for (let x = max(XL, floor(TX[j] - 7.5)); x \u003c= min(XR, TX[j] + 7.5); x++) {\n          const qx = (x + 0.5 - TX[j]) / 7.5;\n          const q = 1 - qx * qx - qy * qy;\n          if (q \u003c= 0) continue;\n          const k = 220 * LI[j] * q * sqrt(q);\n          RP[x * 3] += b0 * k; RP[x * 3 + 1] += b1 * k; RP[x * 3 + 2] += b2 * k;\n        }\n    }\n    const spotRow = lev && abs(y + 0.5 - p.cy) \u003c p.r + 1.5;\n    const lv = ft * (0.22 + 0.78 * clamp((y - TOP) / (CURT - TOP), 0, 1) ** 1.5) + 0.16;\n    const fl = ft * 70 * clamp((y - BACK) / (LIP - BACK), 0, 1) ** 2;\n\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const hr = HR[x];\n      let r, g, b;\n      if (arch[i]) (r = archC[i * 3]), (g = archC[i * 3 + 1]), (b = archC[i * 3 + 2]);\n      else if (y > LIP + 1) (r = house[i * 3] * ft), (g = house[i * 3 + 1] * ft), (b = house[i * 3 + 2] * ft);\n      else if (y === LIP) {\n        const on = (x - XL) % 4 === 1;\n        r = on ? 255 : 190 * ft; g = (on ? 215 : 120) * ft; b = (on ? 140 : 50) * ft;\n      } else if (y === LIP + 1) [r, g, b] = LIPC;\n      else {\n        if (y \u003c hr + 3 - (x & 1)) {\n          if (y \u003c hr - 2) {\n            // The house curtain in velvet folds, lit from the footlights below.\n            const q = 0.5 + 0.5 * sin(fb[x] + 0.5 * sin((y - hem) * 0.09 + x * 0.6) * (0.4 + sstep(12, 0, hr - y)));\n            const v = 0.16 + 0.84 * q * (0.4 + 0.6 * q);\n            const sh = 26 * v * v * v * v * lv;\n            r = 250 * v * lv + sh + w0 * 18 * v; g = r * 0.05 + sh + w1 * 10 * v; b = r * 0.09 + sh + w2 * 14 * v;\n          } else {\n            // The gold braid, and the fringe that hangs below it.\n            const gv = (y \u003c hr ? ((x + y) & 1 ? 0.95 : 0.62) : x & 1 ? 0.5 - 0.12 * (y - hr) : 0.88 - 0.1 * (y - hr)) * (0.35 + 0.75 * lv);\n            [r, g, b] = gilt(gv);\n          }\n        } else if (y \u003c TRUSS) r = g = b = 3;\n        else if (y \u003c SKY) {\n          const lace = y === TRUSS || y === SKY - 1 || (x + y) % 4 === 0 || (x - y + 64) % 4 === 0;\n          r = g = lace ? 52 : 4;\n          b = lace ? 58 : 5;\n        } else {\n          if (y \u003c BACK) {\n            r = A[i * 3] * w0 * 165 + E[i * 3]; g = A[i * 3 + 1] * w1 * 165 + E[i * 3 + 1]; b = A[i * 3 + 2] * w2 * 165 + E[i * 3 + 2];\n            if (S.scene === 0 && y >= 56) {\n              // The moon's path: short glints on the swell, wider toward us.\n              const gd = abs(x + 0.5 - 43) / (2 + (y - 56) * 0.22);\n              const cell = floor((x + 0.5 * y) / 3) + y * 31;\n              const gl = gd \u003c 1.5 ? hash(cell + floor(T * 3 + hash(cell) * 9) * 4096) - 0.6 - 0.18 * gd * gd : 0;\n              if (gl > 0) { r += gl * 480; g += gl * 480; b += gl * 430; }\n            } else if (S.scene === 2) {\n              const w = WIN[i];\n              if (w >= 0 && S.won[w]) { r += 235; g += 170; b += 80; }\n              if (x === 46 && y === 25 && T % 1.6 \u003c 0.3) r += 255;\n            }\n          } else {\n            // The floor, lit by the wash and the lamps' pools.\n            const fa = S.floorA[i];\n            r = fa * (w0 * 55 + fl + RP[x * 3]); g = fa * 0.88 * (w1 * 55 + fl * 0.7 + RP[x * 3 + 1]); b = fa * 0.76 * (w2 * 55 + fl * 0.35 + RP[x * 3 + 2]);\n          }\n          if (y > LENS) {\n            r += RB[x * 3]; g += RB[x * 3 + 1]; b += RB[x * 3 + 2];\n          } else\n            for (let j = 0; j \u003c 6; j++) {\n              // A lamp hangs from its yoke, the lens shining down.\n              const d = abs(x - LAMPS[j]);\n              if (d > 1 || (y === SKY && d)) continue;\n              if (y \u003c LENS) r = g = b = y === SKY ? 60 : d ? 34 : 70;\n              else {\n                const k = (0.45 + 0.55 * LI[j]) * (d ? 190 : 255);\n                r = b0 * k; g = b1 * k; b = b2 * k;\n              }\n            }\n        }\n        // Haze in the air, lit by the wash.\n        r += fog * w0; g += fog * w1; b += fog * w2;\n        if (spotRow) {\n          // The follow spot: a pool of white light, with her shadow in it.\n          const ddx = x + 0.5 - p.cx, ddy = y + 0.5 - p.cy;\n          const inn = sstep(p.r + 1.5, p.r - 1.5, sqrt(ddx * ddx + ddy * ddy)) * lev;\n          if (inn > 0) {\n            const bx = floor(p.hx + (x + 0.5 - p.hx - p.ox) / 1.2);\n            const by = floor(p.fy + (y + 0.5 - p.fy - p.oy) / 1.2);\n            const shade = bx >= 0 && bx \u003c W && by >= 0 && by \u003c H && M[by * W + bx] && !M[i];\n            const k = shade ? inn * 0.1 : inn;\n            const dk = (1 + 1.1 * k) * (shade ? 0.55 : 1);\n            r = r * dk + 62 * k; g = g * dk + 58 * k; b = b * dk + 52 * k;\n          }\n        }\n        const c = M[i];\n        if (c) { r = DCOL[c * 3] * DL; g = DCOL[c * 3 + 1] * DL; b = DCOL[c * 3 + 2] * DL; }\n      }\n      R[i] = r; G[i] = g; B[i] = b;\n    }\n  }\n\n  // Paper snow falls from the flies in front of the backcloth.\n  for (const f of S.scene === 3 ? S.flakes : []) {\n    const x = floor(f.x), y = floor(f.y), i = y * W + x;\n    if (y >= SKY && y >= HR[x] + 3 && !arch[i]) {\n      R[i] += 190; G[i] += 195; B[i] += 210;\n    }\n  }\n  for (let i = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, i++) display.setPixel(x, y, R[i] > 255 ? 255 : R[i], G[i] > 255 ? 255 : G[i], B[i] > 255 ? 255 : B[i]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Gel=0..1, Speed=0.2..3, Scene=0..3, Haze=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Gel","min":0,"max":1,"about":"The colour of the stage wash and the beams: steel blue at 0, turning through violet and rose to amber in the middle, then through green back to blue."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the show runs: at 2 the curtain takes 2.8 s to rise and a whole round of rise, dance, fall and bow is 12 s; at 0.2 it all runs ten times slower."},{"name":"Scene","min":0,"max":3,"about":"The backdrop the curtain rises on: a moonlit sea, a forest, a night city or a snowfall, the others following in that order. Turning it brings the curtain in and out again on the new one."},{"name":"Haze","min":0,"max":1,"about":"How much haze hangs in the air. At 0 the beams are thin shafts; turned up they swell and the whole stage glows in the gel."}],"start":[0,2,0,0.06],"measures":{"motion":0.1444,"detail":0.0876,"edges":0.3879,"complexity":1.7658,"coverage":0.8713,"colour":0.2563,"drift":0.0949},"knobResponse":[0.0636,0.1625,0.077,0.1771]},{"slug":"pulse-bars","title":"Pulse Bars","family":"rhythm","round":1,"note":"음악 없는 하이파이 미터예요. 작은 드럼 머신이 혼자 치고 막대는 그 소리를 듣는 듯 춤춰요.","idea":"A hi-fi meter with no music behind it: a small drum machine plays to itself and the bars dance as if they were hearing it.","buttons":"K1 tap grows the bars from the middle line both ways instead of from the floor.","code":"// ===== Patternflow pattern =====\n// Title:   Pulse Bars\n// Family:  rhythm\n// Idea:    A hi-fi meter with no music behind it: a small drum machine plays to itself and the bars dance as if they were hearing it.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=90..180, Bars=8..32, Decay=0..1\n//\n// Knob 1: Hue. Where the colour starts at the bass end; it climbs a third of the wheel to the treble end.\n// Knob 2: Tempo. Beats per minute of the drum machine, with sixteenth-note hats.\n// Knob 3: Bars. How many bands the meter splits into, from eight fat ones to a comb of LED-wide teeth.\n// Knob 4: Decay. How long each hit rings; low is tight and punchy, high swells and hangs.\n// Buttons: K1 tap grows the bars from the middle line both ways instead of from the floor.\n\nconst W = 64;\nconst H = 128;\nconst MAX_BARS = 32;\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash(n) {\n  let x = (Math.imul(n | 0, 374761393) + 668265263) >>> 0;\n  x = Math.imul(x ^ (x >>> 13), 1274126177) >>> 0;\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction band(f, centre, width) {\n  const d = (f - centre) / width;\n  return Math.exp(-d * d);\n}\n\n// One sixteenth of the drum machine. The bar number seeds small changes,\n// so no two bars play quite the same groove.\nfunction play(p, bar, step) {\n  const seed = bar * 16 + step;\n  let kick = step === 0 ? 1 : 0;\n  if (step === 8 && hash(seed + 101) \u003c 0.85) kick = 1;\n  if ((step === 3 || step === 6 || step === 10 || step === 11 || step === 14) && hash(seed + 202) \u003c 0.22) kick = 0.8;\n  let snare = step === 4 || step === 12 ? 1 : 0;\n  if ((step === 7 || step === 9 || step === 15) && hash(seed + 303) \u003c 0.18) snare = 0.45;\n  if (bar % 4 === 3 && step >= 13 && hash(seed + 404) \u003c 0.7) snare = 0.75;\n  let open = (step === 6 || step === 14) && hash(seed + 505) \u003c 0.3 ? 1 : 0;\n  let hat = open ? 0 : step % 4 === 2 ? 1 : step % 2 === 0 ? 0.75 : hash(seed + 606) \u003c 0.5 ? 0.5 : 0;\n  if (kick) p.env[0] = kick;\n  if (snare) p.env[1] = snare;\n  if (hat) p.env[2] = hat;\n  if (open) p.env[3] = open;\n  // A bass note on every eighth, stepping between a few low bands.\n  if (step % 2 === 0) {\n    p.env[4] = 0.85;\n    p.bassAt = 0.06 + 0.12 * Math.floor(hash(bar * 8 + (step >> 1) + 707) * 4) / 3;\n  }\n  // Every hit gives each band its own small loudness, so the comb is never flat.\n  for (let i = 0; i \u003c MAX_BARS; i++) p.jitter[i] = 0.72 + 0.56 * hash(seed * 64 + i);\n}\n\nexport function setup(params) {\n  const p = params;\n  p.beats = 0;\n  p.step = -1;\n  p.mirror = false;\n  p.env = new Float32Array(5);\n  p.bassAt = 0.1;\n  p.jitter = new Float32Array(MAX_BARS).fill(1);\n  p.level = new Float32Array(MAX_BARS);\n  p.peak = new Float32Array(MAX_BARS);\n  p.hold = new Float32Array(MAX_BARS);\n  p.fall = new Float32Array(MAX_BARS);\n  p.cap = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 90, 8, 0.06];\n  p.hue = k[0];\n  p.bpm = k[1];\n  p.bars = Math.round(k[2]);\n  const decay = k[3];\n  if (input.btnPressed && input.btnPressed[0]) p.mirror = !p.mirror;\n\n  p.beats += (dt * p.bpm) / 60;\n  const sixteenth = Math.floor(p.beats * 4);\n  if (sixteenth !== p.step) {\n    p.step = sixteenth;\n    play(p, Math.floor(sixteenth / 16), sixteenth % 16);\n  }\n  // Time constants in seconds for kick, snare, closed hat, open hat and bass.\n  p.env[0] *= Math.exp(-dt / (0.17 + 0.6 * decay));\n  p.env[1] *= Math.exp(-dt / (0.12 + 0.5 * decay));\n  p.env[2] *= Math.exp(-dt / (0.05 + 0.22 * decay));\n  p.env[3] *= Math.exp(-dt / (0.25 + 0.5 * decay));\n  p.env[4] *= Math.exp(-dt / (0.14 + 0.4 * decay));\n\n  const n = p.bars;\n  const e = p.env;\n  for (let i = 0; i \u003c n; i++) {\n    const f = n > 1 ? i / (n - 1) : 0;\n    // The kick's weight slides down the low bands as it dies, like its pitch.\n    let sum = e[0] * 1.15 * band(f, 0.03 + 0.12 * e[0], 0.17);\n    sum += e[1] * (0.75 * band(f, 0.42, 0.2) + 0.3 * band(f, 0.7, 0.3));\n    sum += e[2] * 0.7 * band(f, 0.86, 0.13);\n    sum += e[3] * 0.75 * band(f, 0.78, 0.2);\n    // A pad under everything that ducks when the kick lands, and the bass note.\n    const duck = 1 - 0.65 * e[0];\n    const pad = 0.2 * (1 - 0.45 * f) * (0.75 + 0.25 * Math.sin(p.beats * 0.785 + f * 6));\n    sum += duck * (pad + e[4] * 0.45 * band(f, p.bassAt, 0.08));\n    sum += 0.03 + 0.04 * hash(p.step * 97 + i);\n    // A tall meter has more room above the bars, so they are driven a little harder.\n    const target = (1 - Math.exp(-sum * p.jitter[i] * 2.1)) * 0.98;\n    const lv = p.level[i];\n    p.level[i] = target > lv ? lv + (target - lv) * Math.min(1, dt * 45) : target;\n    if (p.level[i] >= p.peak[i]) {\n      p.peak[i] = p.level[i];\n      p.hold[i] = 0.25;\n      p.fall[i] = 0;\n    } else if (p.hold[i] > 0) {\n      p.hold[i] -= dt;\n    } else {\n      p.fall[i] += dt * 1.5;\n      p.peak[i] = Math.max(p.level[i], p.peak[i] - p.fall[i] * dt);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const n = p.bars;\n  const gap = n \u003c= 12 ? 2 : 1;\n  const mirror = p.mirror;\n  // Rows from the floor (or from the middle line), in segments of two LEDs and a gap.\n  const reach = mirror ? H / 2 : H;\n  // At 0 the bass end starts in blue.\n  const hue = p.hue + 0.64;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = Math.floor((i * W) / n);\n    const x1 = Math.floor(((i + 1) * W) / n) - gap;\n    const f = n > 1 ? i / (n - 1) : 0;\n    const top = Math.floor(p.level[i] * reach);\n    const peak = Math.floor(p.peak[i] * reach / 3) * 3;\n    for (let lv = 0; lv \u003c reach; lv++) {\n      if (lv % 3 === 2) continue;\n      const lit = lv \u003c top;\n      const isPeak = lv >= peak && lv \u003c peak + 2 && peak > 2;\n      if (!lit && !isPeak) continue;\n      const u = lv / reach;\n      if (isPeak && !lit) {\n        hsv(hue + f * 0.33 + 0.06, 0.35, 1, p.cap);\n      } else {\n        hsv(hue + f * 0.33 + u * 0.08, 0.95 - u * 0.2, 0.45 + 0.55 * u, p.cap);\n      }\n      const c = p.cap;\n      for (let x = x0; x \u003c x1; x++) {\n        if (mirror) {\n          display.setPixel(x, H / 2 - 1 - lv, c[0], c[1], c[2]);\n          display.setPixel(x, H / 2 + lv, c[0], c[1], c[2]);\n        } else {\n          display.setPixel(x, H - 1 - lv, c[0], c[1], c[2]);\n        }\n      }\n    }\n  }\n}\n","layer":{"id":"layer-pulse-bars","type":"code","name":"pulse-bars","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Pulse Bars\n// Family:  rhythm\n// Idea:    A hi-fi meter with no music behind it: a small drum machine plays to itself and the bars dance as if they were hearing it.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Tempo=90..180, Bars=8..32, Decay=0..1\n//\n// Knob 1: Hue. Where the colour starts at the bass end; it climbs a third of the wheel to the treble end.\n// Knob 2: Tempo. Beats per minute of the drum machine, with sixteenth-note hats.\n// Knob 3: Bars. How many bands the meter splits into, from eight fat ones to a comb of LED-wide teeth.\n// Knob 4: Decay. How long each hit rings; low is tight and punchy, high swells and hangs.\n// Buttons: K1 tap grows the bars from the middle line both ways instead of from the floor.\n\nconst W = 64;\nconst H = 128;\nconst MAX_BARS = 32;\n\nfunction hsv(h, s, v, out) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction hash(n) {\n  let x = (Math.imul(n | 0, 374761393) + 668265263) >>> 0;\n  x = Math.imul(x ^ (x >>> 13), 1274126177) >>> 0;\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction band(f, centre, width) {\n  const d = (f - centre) / width;\n  return Math.exp(-d * d);\n}\n\n// One sixteenth of the drum machine. The bar number seeds small changes,\n// so no two bars play quite the same groove.\nfunction play(p, bar, step) {\n  const seed = bar * 16 + step;\n  let kick = step === 0 ? 1 : 0;\n  if (step === 8 && hash(seed + 101) \u003c 0.85) kick = 1;\n  if ((step === 3 || step === 6 || step === 10 || step === 11 || step === 14) && hash(seed + 202) \u003c 0.22) kick = 0.8;\n  let snare = step === 4 || step === 12 ? 1 : 0;\n  if ((step === 7 || step === 9 || step === 15) && hash(seed + 303) \u003c 0.18) snare = 0.45;\n  if (bar % 4 === 3 && step >= 13 && hash(seed + 404) \u003c 0.7) snare = 0.75;\n  let open = (step === 6 || step === 14) && hash(seed + 505) \u003c 0.3 ? 1 : 0;\n  let hat = open ? 0 : step % 4 === 2 ? 1 : step % 2 === 0 ? 0.75 : hash(seed + 606) \u003c 0.5 ? 0.5 : 0;\n  if (kick) p.env[0] = kick;\n  if (snare) p.env[1] = snare;\n  if (hat) p.env[2] = hat;\n  if (open) p.env[3] = open;\n  // A bass note on every eighth, stepping between a few low bands.\n  if (step % 2 === 0) {\n    p.env[4] = 0.85;\n    p.bassAt = 0.06 + 0.12 * Math.floor(hash(bar * 8 + (step >> 1) + 707) * 4) / 3;\n  }\n  // Every hit gives each band its own small loudness, so the comb is never flat.\n  for (let i = 0; i \u003c MAX_BARS; i++) p.jitter[i] = 0.72 + 0.56 * hash(seed * 64 + i);\n}\n\nexport function setup(params) {\n  const p = params;\n  p.beats = 0;\n  p.step = -1;\n  p.mirror = false;\n  p.env = new Float32Array(5);\n  p.bassAt = 0.1;\n  p.jitter = new Float32Array(MAX_BARS).fill(1);\n  p.level = new Float32Array(MAX_BARS);\n  p.peak = new Float32Array(MAX_BARS);\n  p.hold = new Float32Array(MAX_BARS);\n  p.fall = new Float32Array(MAX_BARS);\n  p.cap = [0, 0, 0];\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 90, 8, 0.06];\n  p.hue = k[0];\n  p.bpm = k[1];\n  p.bars = Math.round(k[2]);\n  const decay = k[3];\n  if (input.btnPressed && input.btnPressed[0]) p.mirror = !p.mirror;\n\n  p.beats += (dt * p.bpm) / 60;\n  const sixteenth = Math.floor(p.beats * 4);\n  if (sixteenth !== p.step) {\n    p.step = sixteenth;\n    play(p, Math.floor(sixteenth / 16), sixteenth % 16);\n  }\n  // Time constants in seconds for kick, snare, closed hat, open hat and bass.\n  p.env[0] *= Math.exp(-dt / (0.17 + 0.6 * decay));\n  p.env[1] *= Math.exp(-dt / (0.12 + 0.5 * decay));\n  p.env[2] *= Math.exp(-dt / (0.05 + 0.22 * decay));\n  p.env[3] *= Math.exp(-dt / (0.25 + 0.5 * decay));\n  p.env[4] *= Math.exp(-dt / (0.14 + 0.4 * decay));\n\n  const n = p.bars;\n  const e = p.env;\n  for (let i = 0; i \u003c n; i++) {\n    const f = n > 1 ? i / (n - 1) : 0;\n    // The kick's weight slides down the low bands as it dies, like its pitch.\n    let sum = e[0] * 1.15 * band(f, 0.03 + 0.12 * e[0], 0.17);\n    sum += e[1] * (0.75 * band(f, 0.42, 0.2) + 0.3 * band(f, 0.7, 0.3));\n    sum += e[2] * 0.7 * band(f, 0.86, 0.13);\n    sum += e[3] * 0.75 * band(f, 0.78, 0.2);\n    // A pad under everything that ducks when the kick lands, and the bass note.\n    const duck = 1 - 0.65 * e[0];\n    const pad = 0.2 * (1 - 0.45 * f) * (0.75 + 0.25 * Math.sin(p.beats * 0.785 + f * 6));\n    sum += duck * (pad + e[4] * 0.45 * band(f, p.bassAt, 0.08));\n    sum += 0.03 + 0.04 * hash(p.step * 97 + i);\n    // A tall meter has more room above the bars, so they are driven a little harder.\n    const target = (1 - Math.exp(-sum * p.jitter[i] * 2.1)) * 0.98;\n    const lv = p.level[i];\n    p.level[i] = target > lv ? lv + (target - lv) * Math.min(1, dt * 45) : target;\n    if (p.level[i] >= p.peak[i]) {\n      p.peak[i] = p.level[i];\n      p.hold[i] = 0.25;\n      p.fall[i] = 0;\n    } else if (p.hold[i] > 0) {\n      p.hold[i] -= dt;\n    } else {\n      p.fall[i] += dt * 1.5;\n      p.peak[i] = Math.max(p.level[i], p.peak[i] - p.fall[i] * dt);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const n = p.bars;\n  const gap = n \u003c= 12 ? 2 : 1;\n  const mirror = p.mirror;\n  // Rows from the floor (or from the middle line), in segments of two LEDs and a gap.\n  const reach = mirror ? H / 2 : H;\n  // At 0 the bass end starts in blue.\n  const hue = p.hue + 0.64;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n  for (let i = 0; i \u003c n; i++) {\n    const x0 = Math.floor((i * W) / n);\n    const x1 = Math.floor(((i + 1) * W) / n) - gap;\n    const f = n > 1 ? i / (n - 1) : 0;\n    const top = Math.floor(p.level[i] * reach);\n    const peak = Math.floor(p.peak[i] * reach / 3) * 3;\n    for (let lv = 0; lv \u003c reach; lv++) {\n      if (lv % 3 === 2) continue;\n      const lit = lv \u003c top;\n      const isPeak = lv >= peak && lv \u003c peak + 2 && peak > 2;\n      if (!lit && !isPeak) continue;\n      const u = lv / reach;\n      if (isPeak && !lit) {\n        hsv(hue + f * 0.33 + 0.06, 0.35, 1, p.cap);\n      } else {\n        hsv(hue + f * 0.33 + u * 0.08, 0.95 - u * 0.2, 0.45 + 0.55 * u, p.cap);\n      }\n      const c = p.cap;\n      for (let x = x0; x \u003c x1; x++) {\n        if (mirror) {\n          display.setPixel(x, H / 2 - 1 - lv, c[0], c[1], c[2]);\n          display.setPixel(x, H / 2 + lv, c[0], c[1], c[2]);\n        } else {\n          display.setPixel(x, H - 1 - lv, c[0], c[1], c[2]);\n        }\n      }\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Tempo=90..180, Bars=8..32, Decay=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Where the colour starts at the bass end; it climbs a third of the wheel to the treble end."},{"name":"Tempo","min":90,"max":180,"about":"Beats per minute of the drum machine, with sixteenth-note hats."},{"name":"Bars","min":8,"max":32,"about":"How many bands the meter splits into, from eight fat ones to a comb of LED-wide teeth."},{"name":"Decay","min":0,"max":1,"about":"How long each hit rings; low is tight and punchy, high swells and hangs."}],"start":[0,90,8,0.06],"measures":{"motion":0.7885,"detail":0.0861,"edges":0.9999,"complexity":0.1776,"coverage":0.2209,"colour":0.2463,"drift":0.1392},"knobResponse":[0.0897,0.0556,0.0615,0.0607]},{"slug":"rabbit-ears","title":"Rabbit Ears","family":"glitch","round":19,"note":"옛 TV 가 토끼 귀 안테나로 늦은 밤 일기예보를 잡아요. 신호가 흔들리면 진행자와 지도가 색을 잃고 눈 속으로 사라졌다가 블랭킹 띠와 함께 굴러 돌아오고, 오른쪽에는 고스트가 따라붙어요. K1 을 누르면 TV 를 쳐서 그림이 한 바퀴 굴러요.","idea":"An old television in a dark room pulls in a late-night weather forecast through a rabbit-ear antenna, and as the weak signal drifts the presenter and her map fade in and out of the snow, lose their colour, tear sideways and roll through the black blanking bar, with a ghost of the picture a few LEDs to the right.","buttons":"K1 tap slaps the side of the set: the hold slips and the picture rolls round once.","code":"// ===== Patternflow pattern =====\n// Title:   Rabbit Ears\n// Family:  glitch\n// Idea:    An old television in a dark room pulls in a late-night weather forecast through a rabbit-ear antenna, and as the weak signal drifts the presenter and her map fade in and out of the snow, lose their colour, tear sideways and roll through the black blanking bar, with a ghost of the picture a few LEDs to the right.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after analog broadcast reception: receiver noise, the colour killer, lost vertical hold and multipath ghosts\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Signal=0..1, Ghost=0..1\n//\n// Knob 1: Tint. The set's tint control: turns the broadcast's colours round the colour wheel, opening on the forecast's own blue sea and green land.\n// Knob 2: Speed. How fast the signal drifts and the forecast runs; at 2 the station sinks into the snow every 6 to 8 s, with a shallower fade between.\n// Knob 3: Signal. How far the station reaches: at 0 the picture keeps sinking into the snow and the hold slips each time, at 1 it stays with only a dusting of snow.\n// Knob 4: Ghost. The echo off a building across the street: from a faint copy 4 LEDs to the right at 0 to a strong one 19 LEDs over at 1.\n// Buttons: K1 tap slaps the side of the set: the hold slips and the picture rolls round once.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rows of vertical blanking between one picture and the next when the hold slips,\n// and columns of horizontal blanking a torn line wraps through.\nconst VB = 12;\nconst HB = 6;\nconst C = H + VB;\nconst CLOUD_W = 128;\n\n// Colours of the forecast before the tint control turns them.\nconst SEA_DEEP = [4, 14, 56];\nconst SEA_NEAR = [10, 34, 92];\nconst LOW = [28, 86, 32];\nconst HILL = [62, 116, 44];\nconst COAST = [170, 210, 150];\nconst CLOUD = [204, 208, 216];\nconst SUN = [255, 206, 30];\nconst MOON = [232, 230, 186];\nconst DROP = [40, 120, 255];\nconst SKIN = [222, 168, 132];\nconst SHIRT = [228, 228, 232];\nconst BAND = [16, 40, 120];\nconst BAND_TOP = [70, 120, 210];\nconst WHITE = [240, 240, 240];\nconst JACKETS = [[32, 44, 96], [110, 28, 44], [44, 44, 50], [18, 92, 96]];\nconst HAIRS = [[44, 28, 20], [120, 76, 36], [206, 170, 96], [24, 20, 22]];\n\n// A 3 by 5 font, rows from the top, for the clock, the temperatures and the caption.\nconst FONT = {\n  0: \"111101101101111\", 1: \"010110010010111\", 2: \"111001111100111\", 3: \"111001111001111\", 4: \"101101111001001\",\n  5: \"111100111001111\", 6: \"111100111101111\", 7: \"111001001001001\", 8: \"111101111101111\", 9: \"111101111001111\",\n  \":\": \"000010000010000\", T: \"111010010010010\", O: \"010101101101010\", N: \"110101101101101\", I: \"111010010010111\",\n  G: \"111100101101111\", H: \"101101111101101\", M: \"101111111101101\", R: \"110101110101101\", W: \"101101111111101\",\n};\n\nfunction hash2(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise; px is the period in cells along x, or 0 for none.\nfunction vnoise(x, y, s, px) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = px ? ((xi % px) + px) % px : xi;\n  const x1 = px ? (((xi + 1) % px) + px) % px : xi + 1;\n  const a = hash2(x0, yi, s);\n  const b = hash2(x1, yi, s);\n  const c = hash2(x0, yi + 1, s);\n  const d = hash2(x1, yi + 1, s);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.t = 0;\n  P.u = 0;\n  P.frame = 0;\n  P.phi = 0;\n  P.rv = 0;\n  P.slap = -1;\n  P.s = 0.8;\n  P.tint = -1;\n  P.m = new Float32Array(9);\n  P.seed = 1 + Math.floor(Math.random() * 100000);\n  P.rs = (Math.floor(Math.random() * 4294967295) | 1) >>> 0;\n  P.map = new Float32Array(N * 3);\n  P.buf = new Float32Array(N * 3);\n  P.pic = new Float32Array(N * 3);\n  P.snow = new Float32Array(N * 3);\n  P.cloud = new Float32Array(CLOUD_W * H);\n  P.tube = new Uint8Array(N);\n  P.tear = new Int16Array(H);\n  P.jacket = JACKETS[Math.floor(Math.random() * JACKETS.length)];\n  P.hair = HAIRS[Math.floor(Math.random() * HAIRS.length)];\n  P.min = 31 + Math.floor(Math.random() * 25);\n  const s = P.seed;\n  // The land: an island from noise inside a tall oval, hillier inland.\n  const land = new Uint8Array(N);\n  const hill = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const f = 0.5 * vnoise(x / 16, y / 16, s, 0) + 0.3 * vnoise(x / 7, y / 7, s + 1, 0) + 0.2 * vnoise(x / 3.5, y / 3.5, s + 2, 0);\n      const d = Math.sqrt(((x - 38) / 30) ** 2 + ((y - 50) / 60) ** 2);\n      if (d \u003c 0.75 + 0.8 * (f - 0.5)) land[y * W + x] = 1;\n      hill[y * W + x] = vnoise(x / 6, y / 6, s + 3, 0);\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let c;\n      if (land[p]) {\n        const edge = (x > 0 && !land[p - 1]) || (x \u003c W - 1 && !land[p + 1]) || (y > 0 && !land[p - W]) || (y \u003c H - 1 && !land[p + W]);\n        const k = smooth(0.45, 0.8, hill[p]);\n        c = edge ? COAST : [LOW[0] + (HILL[0] - LOW[0]) * k, LOW[1] + (HILL[1] - LOW[1]) * k, LOW[2] + (HILL[2] - LOW[2]) * k];\n      } else {\n        // Shallower water near a coast: count the land within 3 LEDs.\n        let near = 0;\n        for (let dy = -3; dy \u003c= 3; dy += 3) for (let dx = -3; dx \u003c= 3; dx += 3) if (land[clamp(y + dy, 0, H - 1) * W + clamp(x + dx, 0, W - 1)]) near++;\n        const k = Math.min(1, near / 4) * 0.7 + 0.3 * (y / H);\n        c = [SEA_DEEP[0] + (SEA_NEAR[0] - SEA_DEEP[0]) * k, SEA_DEEP[1] + (SEA_NEAR[1] - SEA_DEEP[1]) * k, SEA_DEEP[2] + (SEA_NEAR[2] - SEA_DEEP[2]) * k];\n      }\n      P.map.set(c, p * 3);\n    }\n  // Cloud from the satellite, wrapping every 128 columns so it can keep crossing.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c CLOUD_W; x++) {\n      const c = 0.55 * vnoise(x / 16, y / 16, s + 5, 8) + 0.3 * vnoise(x / 8, y / 8, s + 6, 16) + 0.15 * vnoise(x / 4, y / 4, s + 7, 32);\n      P.cloud[y * CLOUD_W + x] = smooth(0.5, 0.74, c) * 0.75;\n    }\n  // The tube's corners are round.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const cx = Math.max(0, Math.abs(x - 31.5) - 24.5);\n      const cy = Math.max(0, Math.abs(y - 63.5) - 56.5);\n      P.tube[y * W + x] = cx * cx + cy * cy > 49 ? 0 : 1;\n    }\n  // Two forecasts, tonight's and tomorrow's: a symbol and a temperature each.\n  const temp = (lo, hi) => lo + Math.floor(Math.random() * (hi - lo + 1));\n  P.shows = [\n    { name: \"TONIGHT\", spots: [[\"moon\", 44, 18, temp(3, 8)], [\"rain\", 27, 38, temp(5, 9)], [\"cloud\", 47, 58, temp(4, 9)], [\"moon\", 38, 86, temp(2, 7)]] },\n    { name: \"TOMORROW\", spots: [[\"sun\", 42, 20, temp(12, 17)], [\"rain\", 26, 42, temp(9, 13)], [\"sun\", 48, 62, temp(13, 19)], [\"cloud\", 37, 88, temp(11, 15)]] },\n  ];\n  for (let i = 0; i \u003c N * 3; i++) P.snow[i] = Math.random();\n}\n\nfunction put(B, x, y, c, a) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const o = (y * W + x) * 3;\n  if (a === undefined || a >= 1) {\n    B[o] = c[0];\n    B[o + 1] = c[1];\n    B[o + 2] = c[2];\n  } else {\n    B[o] += (c[0] - B[o]) * a;\n    B[o + 1] += (c[1] - B[o + 1]) * a;\n    B[o + 2] += (c[2] - B[o + 2]) * a;\n  }\n}\n\nfunction disc(B, cx, cy, r, c) {\n  for (let y = Math.floor(cy - r); y \u003c= Math.ceil(cy + r); y++)\n    for (let x = Math.floor(cx - r); x \u003c= Math.ceil(cx + r); x++) if ((x - cx) ** 2 + (y - cy) ** 2 \u003c= r * r) put(B, x, y, c);\n}\n\nfunction text(B, str, x, y, c) {\n  for (const ch of str) {\n    const g = FONT[ch];\n    if (g) for (let i = 0; i \u003c 15; i++) if (g[i] === \"1\") put(B, x + (i % 3), y + Math.floor(i / 3), c);\n    x += 4;\n  }\n}\n\nfunction puff(B, x, y) {\n  disc(B, x - 2.5, y + 1, 2.2, [150, 156, 166]);\n  disc(B, x + 2.5, y + 1, 2.2, [150, 156, 166]);\n  disc(B, x, y - 0.5, 2.8, CLOUD);\n  disc(B, x - 2.5, y + 0.5, 1.8, CLOUD);\n  disc(B, x + 2.5, y + 0.5, 1.8, CLOUD);\n}\n\nfunction symbol(B, kind, x, y, deg, u) {\n  if (kind === \"sun\") {\n    for (let k = 0; k \u003c 8; k++) {\n      const a = (k * Math.PI) / 4 + u * 0.4;\n      put(B, x + 5 * Math.cos(a), y + 5 * Math.sin(a), SUN);\n    }\n    disc(B, x, y, 3.2, SUN);\n  } else if (kind === \"moon\") {\n    // A crescent: the disc less a second one up and to the right.\n    for (let j = -4; j \u003c= 4; j++)\n      for (let i = -4; i \u003c= 4; i++) if (i * i + j * j \u003c= 10.5 && (i - 1.8) ** 2 + (j + 1.2) ** 2 > 7.8) put(B, x + i, y + j, MOON);\n  } else {\n    puff(B, x, y);\n    if (kind === \"rain\") for (let k = -1; k \u003c= 1; k++) {\n      const fall = (u * 3 + k * 0.6) % 1;\n      put(B, x + 2 * k, y + 4 + Math.floor(fall * 3), DROP);\n    }\n  }\n  // The temperature in a box beside it: blue when cold, yellow when mild, orange when warm.\n  const box = deg \u003c 7 ? [40, 110, 220] : deg \u003c 14 ? [236, 196, 40] : [240, 128, 30];\n  const ink = deg \u003c 7 ? WHITE : [16, 16, 16];\n  const s = String(deg);\n  const w = s.length * 4 + 1;\n  const bx = x + 5;\n  const by = y - 3;\n  for (let j = 0; j \u003c 7; j++) for (let i = 0; i \u003c w; i++) put(B, bx + i, by + j, box);\n  text(B, s, bx + 1, by + 1, ink);\n}\n\n// The broadcast picture before the set gets at it: the map, its cloud, the symbols,\n// the presenter in front, the caption and the station clock.\nfunction broadcast(P) {\n  const B = P.buf;\n  const u = P.u;\n  B.set(P.map);\n  const ox = u * 3;\n  const o0 = Math.floor(ox);\n  const fo = ox - o0;\n  for (let y = 0; y \u003c H; y++) {\n    const row = y * CLOUD_W;\n    for (let x = 0; x \u003c W; x++) {\n      const i0 = (((x - o0) % CLOUD_W) + CLOUD_W) % CLOUD_W;\n      const i1 = (i0 + CLOUD_W - 1) % CLOUD_W;\n      const a = P.cloud[row + i0] * (1 - fo) + P.cloud[row + i1] * fo;\n      if (a > 0.01) {\n        const o = (y * W + x) * 3;\n        B[o] += (CLOUD[0] - B[o]) * a;\n        B[o + 1] += (CLOUD[1] - B[o + 1]) * a;\n        B[o + 2] += (CLOUD[2] - B[o + 2]) * a;\n      }\n    }\n  }\n  // Tonight's chart for 10 s, then tomorrow's, and round again.\n  const show = P.shows[Math.floor(u / 10) % 2];\n  for (const sp of show.spots) symbol(B, sp[0], sp[1], sp[2], sp[3], u);\n  presenter(P, B, show, u);\n  for (let x = 0; x \u003c W; x++) {\n    put(B, x, 116, BAND_TOP);\n    for (let y = 117; y \u003c H; y++) put(B, x, y, BAND);\n  }\n  text(B, show.name, Math.floor((W - (show.name.length * 4 - 1)) / 2), 119, WHITE);\n  // The station clock in the corner, past midnight.\n  for (let y = 2; y \u003c 10; y++) for (let x = 41; x \u003c 62; x++) {\n    const o = (y * W + x) * 3;\n    B[o] *= 0.35;\n    B[o + 1] *= 0.35;\n    B[o + 2] *= 0.35;\n  }\n  const m = P.min + Math.floor(u / 60);\n  const hh = Math.floor(m / 60) % 24;\n  const mm = m % 60;\n  text(B, `${hh \u003c 10 ? \"0\" : \"\"}${hh}:${mm \u003c 10 ? \"0\" : \"\"}${mm}`, 42, 3, WHITE);\n}\n\nfunction presenter(P, B, show, u) {\n  const sw = 0.8 * Math.sin(u * 0.9);\n  const hx = 12 + sw;\n  const hy = 80;\n  const J = P.jacket;\n  const dark = [J[0] * 0.6, J[1] * 0.6, J[2] * 0.6];\n  // Shoulders down past the caption, widening a little.\n  for (let y = hy + 7; y \u003c H; y++) {\n    const d = y - hy - 7;\n    const half = d \u003c 2 ? 8 + 1.5 * d : 11 + 0.15 * d;\n    for (let x = Math.floor(hx - half); x \u003c= Math.ceil(hx + half); x++) {\n      const v = Math.abs(x - hx) \u003c (hy + 17 - y) * 0.35;\n      const lapel = !v && Math.abs(x - hx) \u003c (hy + 17 - y) * 0.35 + 1.2;\n      put(B, x, y, v ? SHIRT : lapel ? dark : J);\n    }\n  }\n  // The neck and the head, with the hair round the top and sides.\n  for (let y = hy + 4; y \u003c hy + 8; y++) for (let x = Math.round(hx) - 1; x \u003c= Math.round(hx) + 1; x++) put(B, x, y, [SKIN[0] * 0.8, SKIN[1] * 0.8, SKIN[2] * 0.8]);\n  for (let dy = -7; dy \u003c= 6; dy++)\n    for (let dx = -6; dx \u003c= 6; dx++) {\n      const e = (dx / 4.3) ** 2 + (dy / 5.3) ** 2;\n      const hairE = (dx / 5.2) ** 2 + ((dy + 1) / 6.2) ** 2;\n      if (e \u003c 1) put(B, hx + dx, hy + dy, dy \u003c -2.5 + Math.abs(dx) * 0.2 ? P.hair : SKIN);\n      else if (hairE \u003c 1 && dy \u003c 3) put(B, hx + dx, hy + dy, P.hair);\n    }\n  put(B, hx - 2, hy - 1, [40, 30, 30]);\n  put(B, hx + 1, hy - 1, [40, 30, 30]);\n  put(B, hx - 0.5, hy + 2, [170, 90, 90]);\n  // The arm towards the map: she points at each symbol in turn, 2.5 s each, and\n  // after the fourth drops her hand to her side for a beat.\n  const sx = hx + 9;\n  const sy = hy + 10;\n  const k = u / 2.5;\n  const i = Math.floor(k);\n  const f = smooth(0, 0.3, k - i);\n  const spot = (n) => {\n    const j = ((n % 5) + 5) % 5;\n    if (j === 4) return [hx + 10, hy + 26];\n    const sp = show.spots[j];\n    const dx = sp[1] - 3 - sx;\n    const dy = sp[2] - sy;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    const r = Math.min(d, 22);\n    return [sx + (dx / d) * r, sy + (dy / d) * r];\n  };\n  const a = spot(i - 1);\n  const b = spot(i);\n  const hxp = a[0] + (b[0] - a[0]) * f;\n  const hyp = a[1] + (b[1] - a[1]) * f;\n  const mx = (sx + hxp) / 2;\n  const my = (sy + hyp) / 2 + 5;\n  const sleeve = [J[0] * 1.15, J[1] * 1.15, J[2] * 1.15];\n  for (let q = 0; q \u003c= 1; q += 0.05) {\n    disc(B, sx + (mx - sx) * q, sy + (my - sy) * q, 1.7, sleeve);\n    disc(B, mx + (hxp - mx) * q, my + (hyp - my) * q, 1.4, sleeve);\n  }\n  disc(B, hxp, hyp, 1.3, SKIN);\n}\n\n// How deep the station has faded at forecast time u: a deep fade every 6 to 8 s,\n// the first 4.2 s in, and a shallow one between each pair.\nfunction fades(u) {\n  let d = 0;\n  const k0 = Math.floor((u - 4.2) / 7);\n  for (let k = k0 - 1; k \u003c= k0 + 1; k++) {\n    const at = 4.2 + 7 * k + (k > 0 ? (hash2(k, 1, 9) - 0.5) * 1.6 : 0);\n    d += Math.exp(-(((u - at) / 0.75) ** 2));\n    d += (0.3 + 0.15 * hash2(k, 2, 9)) * Math.exp(-(((u - at - 3.5) / 0.45) ** 2));\n  }\n  return d;\n}\n\n// The tint control: a turn round the grey axis.\nfunction tintMatrix(m, hue) {\n  const a = hue * Math.PI * 2;\n  const c = Math.cos(a);\n  const s = Math.sin(a);\n  const q = (1 - c) / 3;\n  const r3 = Math.sqrt(1 / 3) * s;\n  m[0] = c + q;\n  m[1] = q - r3;\n  m[2] = q + r3;\n  m[3] = q + r3;\n  m[4] = c + q;\n  m[5] = q - r3;\n  m[6] = q - r3;\n  m[7] = q + r3;\n  m[8] = c + q;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const speed = clamp(k[1], 0.2, 3);\n  const sig = clamp(k[2], 0, 1);\n  P.ghost = clamp(k[3], 0, 1);\n  if (k[0] !== P.tint) {\n    P.tint = k[0];\n    tintMatrix(P.m, k[0]);\n  }\n  P.t += dt;\n  P.u += (dt * speed) / 2;\n  P.frame++;\n  // The signal wanders a little, flutters as aircraft pass, and fades.\n  const u = P.u;\n  P.s = clamp(0.76 + 0.24 * sig + 0.05 * Math.sin((2 * Math.PI * u) / 3.1) - (1 - 0.75 * sig) * fades(u) + 0.04 * Math.sin(P.t * 11), 0, 1);\n  // When the sync pulses sink into the noise the vertical hold slips and the picture\n  // rolls; once the signal is back it rolls on to the next whole frame and locks there.\n  if (input.btnPressed && input.btnPressed[0]) P.slap = Math.floor(P.phi) + 1;\n  const slipping = P.s \u003c 0.3 || P.slap > P.phi + 0.35;\n  if (slipping) P.rv += (0.9 - P.rv) * Math.min(1, dt * 2.5);\n  else if (P.rv > 0) P.rv = Math.max(0.3, P.rv - dt * 0.6);\n  if (P.rv > 0) {\n    const next = Math.floor(P.phi) + 1;\n    P.phi += P.rv * dt;\n    if (!slipping && P.phi >= next) {\n      P.phi = next;\n      P.rv = 0;\n    }\n  }\n  // Lines lose their place sideways as the signal weakens.\n  const tear = smooth(0.6, 0.15, P.s) * 12;\n  const jit = 0.4 + 1.2 * (1 - P.s);\n  for (let y = 0; y \u003c H; y++) {\n    const band = Math.sin(y * 0.09 + P.t * 1.7) * Math.sin(y * 0.031 - P.t * 0.6);\n    P.tear[y] = Math.round(tear * Math.max(0, band) + (hash2(y, P.frame, 7) - 0.5) * 2 * jit);\n  }\n  broadcast(P);\n  // The tint control, and the colour killer: below a usable signal the set drops\n  // the colour and shows the picture in black and white.\n  const m = P.m;\n  const kill = smooth(0.3, 0.6, P.s);\n  const B = P.buf;\n  const out = P.pic;\n  for (let o = 0; o \u003c N * 3; o += 3) {\n    const r = B[o];\n    const g = B[o + 1];\n    const b = B[o + 2];\n    const grey = (r + g + b) / 3;\n    out[o] = grey + (r * m[0] + g * m[1] + b * m[2] - grey) * kill;\n    out[o + 1] = grey + (r * m[3] + g * m[4] + b * m[5] - grey) * kill;\n    out[o + 2] = grey + (r * m[6] + g * m[7] + b * m[8] - grey) * kill;\n  }\n  // The snow: the set redraws one field of lines a frame, odd then even.\n  // The colour grain goes with the colour: the killer greys the snow too.\n  let rs = P.rs;\n  const S = P.snow;\n  const chroma = 0.06 * kill;\n  for (let y = P.frame & 1; y \u003c H; y += 2)\n    for (let x = 0; x \u003c W; x++) {\n      rs ^= rs \u003c\u003c 13;\n      rs ^= rs >>> 17;\n      rs ^= rs \u003c\u003c 5;\n      const v = rs >>> 0;\n      // Twelve steps of grey, a faint cast of colour on some grains, and now and\n      // then a white spark.\n      let l = Math.floor((((v & 255) + ((v >>> 8) & 255)) / 511) * 12) / 11;\n      if (((v >>> 16) & 255) > 250) l = 1;\n      const o = (y * W + x) * 3;\n      const jr = (((v >>> 24) & 3) - 1) * chroma;\n      const jb = (((v >>> 26) & 3) - 1) * chroma;\n      S[o] = l + jr;\n      S[o + 1] = l;\n      S[o + 2] = l + jb;\n    }\n  P.rs = rs;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const pic = P.pic;\n  const S = P.snow;\n  const s = P.s;\n  // The picture holds on longer than the signal's share says, and the set's gain\n  // turns the snow up bright when there is nothing else to show.\n  const gs = 255 * (1.4 * (1 - s) * (1 - s) + 0.03);\n  const gd = Math.round(4 + 15 * P.ghost);\n  const ga = 0.22 + 0.5 * P.ghost;\n  // The echo shares the set's gain with the direct picture.\n  const gp = Math.pow(s, 0.6) / (1 + ga);\n  const roll = Math.floor(P.phi * C);\n  const data = (P.frame >> 1) * 31;\n  for (let y = 0; y \u003c H; y++) {\n    const sy = (y + roll) % C;\n    const bar = sy >= H;\n    const row = sy * W;\n    const shift = P.tear[y];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (bar) {\n        // Teletext rides in the blanking: two lines of white dashes.\n        const line = sy - H;\n        if ((line === 3 || line === 5) && hash2(x >> 1, data + line, 3) > 0.5) r = g = b = 200;\n      } else {\n        const sx = (((x - shift) % (W + HB)) + W + HB) % (W + HB);\n        if (sx \u003c W) {\n          const o = (row + sx) * 3;\n          r = pic[o];\n          g = pic[o + 1];\n          b = pic[o + 2];\n          const gx = sx - gd;\n          if (gx >= 0) {\n            const q = (row + gx) * 3;\n            r += pic[q] * ga;\n            g += pic[q + 1] * ga;\n            b += pic[q + 2] * ga;\n          }\n        }\n      }\n      const o = p * 3;\n      const v = P.tube[p];\n      r = (r * gp + S[o] * gs) * v;\n      g = (g * gp + S[o + 1] * gs) * v;\n      b = (b * gp + S[o + 2] * gs) * v;\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n  }\n}\n","layer":{"id":"layer-rabbit-ears","type":"code","name":"rabbit-ears","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rabbit Ears\n// Family:  glitch\n// Idea:    An old television in a dark room pulls in a late-night weather forecast through a rabbit-ear antenna, and as the weak signal drifts the presenter and her map fade in and out of the snow, lose their colour, tear sideways and roll through the black blanking bar, with a ghost of the picture a few LEDs to the right.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after analog broadcast reception: receiver noise, the colour killer, lost vertical hold and multipath ghosts\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Tint=0..1, Speed=0.2..3, Signal=0..1, Ghost=0..1\n//\n// Knob 1: Tint. The set's tint control: turns the broadcast's colours round the colour wheel, opening on the forecast's own blue sea and green land.\n// Knob 2: Speed. How fast the signal drifts and the forecast runs; at 2 the station sinks into the snow every 6 to 8 s, with a shallower fade between.\n// Knob 3: Signal. How far the station reaches: at 0 the picture keeps sinking into the snow and the hold slips each time, at 1 it stays with only a dusting of snow.\n// Knob 4: Ghost. The echo off a building across the street: from a faint copy 4 LEDs to the right at 0 to a strong one 19 LEDs over at 1.\n// Buttons: K1 tap slaps the side of the set: the hold slips and the picture rolls round once.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rows of vertical blanking between one picture and the next when the hold slips,\n// and columns of horizontal blanking a torn line wraps through.\nconst VB = 12;\nconst HB = 6;\nconst C = H + VB;\nconst CLOUD_W = 128;\n\n// Colours of the forecast before the tint control turns them.\nconst SEA_DEEP = [4, 14, 56];\nconst SEA_NEAR = [10, 34, 92];\nconst LOW = [28, 86, 32];\nconst HILL = [62, 116, 44];\nconst COAST = [170, 210, 150];\nconst CLOUD = [204, 208, 216];\nconst SUN = [255, 206, 30];\nconst MOON = [232, 230, 186];\nconst DROP = [40, 120, 255];\nconst SKIN = [222, 168, 132];\nconst SHIRT = [228, 228, 232];\nconst BAND = [16, 40, 120];\nconst BAND_TOP = [70, 120, 210];\nconst WHITE = [240, 240, 240];\nconst JACKETS = [[32, 44, 96], [110, 28, 44], [44, 44, 50], [18, 92, 96]];\nconst HAIRS = [[44, 28, 20], [120, 76, 36], [206, 170, 96], [24, 20, 22]];\n\n// A 3 by 5 font, rows from the top, for the clock, the temperatures and the caption.\nconst FONT = {\n  0: \"111101101101111\", 1: \"010110010010111\", 2: \"111001111100111\", 3: \"111001111001111\", 4: \"101101111001001\",\n  5: \"111100111001111\", 6: \"111100111101111\", 7: \"111001001001001\", 8: \"111101111101111\", 9: \"111101111001111\",\n  \":\": \"000010000010000\", T: \"111010010010010\", O: \"010101101101010\", N: \"110101101101101\", I: \"111010010010111\",\n  G: \"111100101101111\", H: \"101101111101101\", M: \"101111111101101\", R: \"110101110101101\", W: \"101101111111101\",\n};\n\nfunction hash2(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Value noise; px is the period in cells along x, or 0 for none.\nfunction vnoise(x, y, s, px) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = px ? ((xi % px) + px) % px : xi;\n  const x1 = px ? (((xi + 1) % px) + px) % px : xi + 1;\n  const a = hash2(x0, yi, s);\n  const b = hash2(x1, yi, s);\n  const c = hash2(x0, yi + 1, s);\n  const d = hash2(x1, yi + 1, s);\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\nfunction smooth(a, b, v) {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n}\n\nexport function setup(params) {\n  const P = params;\n  P.t = 0;\n  P.u = 0;\n  P.frame = 0;\n  P.phi = 0;\n  P.rv = 0;\n  P.slap = -1;\n  P.s = 0.8;\n  P.tint = -1;\n  P.m = new Float32Array(9);\n  P.seed = 1 + Math.floor(Math.random() * 100000);\n  P.rs = (Math.floor(Math.random() * 4294967295) | 1) >>> 0;\n  P.map = new Float32Array(N * 3);\n  P.buf = new Float32Array(N * 3);\n  P.pic = new Float32Array(N * 3);\n  P.snow = new Float32Array(N * 3);\n  P.cloud = new Float32Array(CLOUD_W * H);\n  P.tube = new Uint8Array(N);\n  P.tear = new Int16Array(H);\n  P.jacket = JACKETS[Math.floor(Math.random() * JACKETS.length)];\n  P.hair = HAIRS[Math.floor(Math.random() * HAIRS.length)];\n  P.min = 31 + Math.floor(Math.random() * 25);\n  const s = P.seed;\n  // The land: an island from noise inside a tall oval, hillier inland.\n  const land = new Uint8Array(N);\n  const hill = new Float32Array(N);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const f = 0.5 * vnoise(x / 16, y / 16, s, 0) + 0.3 * vnoise(x / 7, y / 7, s + 1, 0) + 0.2 * vnoise(x / 3.5, y / 3.5, s + 2, 0);\n      const d = Math.sqrt(((x - 38) / 30) ** 2 + ((y - 50) / 60) ** 2);\n      if (d \u003c 0.75 + 0.8 * (f - 0.5)) land[y * W + x] = 1;\n      hill[y * W + x] = vnoise(x / 6, y / 6, s + 3, 0);\n    }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let c;\n      if (land[p]) {\n        const edge = (x > 0 && !land[p - 1]) || (x \u003c W - 1 && !land[p + 1]) || (y > 0 && !land[p - W]) || (y \u003c H - 1 && !land[p + W]);\n        const k = smooth(0.45, 0.8, hill[p]);\n        c = edge ? COAST : [LOW[0] + (HILL[0] - LOW[0]) * k, LOW[1] + (HILL[1] - LOW[1]) * k, LOW[2] + (HILL[2] - LOW[2]) * k];\n      } else {\n        // Shallower water near a coast: count the land within 3 LEDs.\n        let near = 0;\n        for (let dy = -3; dy \u003c= 3; dy += 3) for (let dx = -3; dx \u003c= 3; dx += 3) if (land[clamp(y + dy, 0, H - 1) * W + clamp(x + dx, 0, W - 1)]) near++;\n        const k = Math.min(1, near / 4) * 0.7 + 0.3 * (y / H);\n        c = [SEA_DEEP[0] + (SEA_NEAR[0] - SEA_DEEP[0]) * k, SEA_DEEP[1] + (SEA_NEAR[1] - SEA_DEEP[1]) * k, SEA_DEEP[2] + (SEA_NEAR[2] - SEA_DEEP[2]) * k];\n      }\n      P.map.set(c, p * 3);\n    }\n  // Cloud from the satellite, wrapping every 128 columns so it can keep crossing.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c CLOUD_W; x++) {\n      const c = 0.55 * vnoise(x / 16, y / 16, s + 5, 8) + 0.3 * vnoise(x / 8, y / 8, s + 6, 16) + 0.15 * vnoise(x / 4, y / 4, s + 7, 32);\n      P.cloud[y * CLOUD_W + x] = smooth(0.5, 0.74, c) * 0.75;\n    }\n  // The tube's corners are round.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const cx = Math.max(0, Math.abs(x - 31.5) - 24.5);\n      const cy = Math.max(0, Math.abs(y - 63.5) - 56.5);\n      P.tube[y * W + x] = cx * cx + cy * cy > 49 ? 0 : 1;\n    }\n  // Two forecasts, tonight's and tomorrow's: a symbol and a temperature each.\n  const temp = (lo, hi) => lo + Math.floor(Math.random() * (hi - lo + 1));\n  P.shows = [\n    { name: \"TONIGHT\", spots: [[\"moon\", 44, 18, temp(3, 8)], [\"rain\", 27, 38, temp(5, 9)], [\"cloud\", 47, 58, temp(4, 9)], [\"moon\", 38, 86, temp(2, 7)]] },\n    { name: \"TOMORROW\", spots: [[\"sun\", 42, 20, temp(12, 17)], [\"rain\", 26, 42, temp(9, 13)], [\"sun\", 48, 62, temp(13, 19)], [\"cloud\", 37, 88, temp(11, 15)]] },\n  ];\n  for (let i = 0; i \u003c N * 3; i++) P.snow[i] = Math.random();\n}\n\nfunction put(B, x, y, c, a) {\n  x = Math.round(x);\n  y = Math.round(y);\n  if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n  const o = (y * W + x) * 3;\n  if (a === undefined || a >= 1) {\n    B[o] = c[0];\n    B[o + 1] = c[1];\n    B[o + 2] = c[2];\n  } else {\n    B[o] += (c[0] - B[o]) * a;\n    B[o + 1] += (c[1] - B[o + 1]) * a;\n    B[o + 2] += (c[2] - B[o + 2]) * a;\n  }\n}\n\nfunction disc(B, cx, cy, r, c) {\n  for (let y = Math.floor(cy - r); y \u003c= Math.ceil(cy + r); y++)\n    for (let x = Math.floor(cx - r); x \u003c= Math.ceil(cx + r); x++) if ((x - cx) ** 2 + (y - cy) ** 2 \u003c= r * r) put(B, x, y, c);\n}\n\nfunction text(B, str, x, y, c) {\n  for (const ch of str) {\n    const g = FONT[ch];\n    if (g) for (let i = 0; i \u003c 15; i++) if (g[i] === \"1\") put(B, x + (i % 3), y + Math.floor(i / 3), c);\n    x += 4;\n  }\n}\n\nfunction puff(B, x, y) {\n  disc(B, x - 2.5, y + 1, 2.2, [150, 156, 166]);\n  disc(B, x + 2.5, y + 1, 2.2, [150, 156, 166]);\n  disc(B, x, y - 0.5, 2.8, CLOUD);\n  disc(B, x - 2.5, y + 0.5, 1.8, CLOUD);\n  disc(B, x + 2.5, y + 0.5, 1.8, CLOUD);\n}\n\nfunction symbol(B, kind, x, y, deg, u) {\n  if (kind === \"sun\") {\n    for (let k = 0; k \u003c 8; k++) {\n      const a = (k * Math.PI) / 4 + u * 0.4;\n      put(B, x + 5 * Math.cos(a), y + 5 * Math.sin(a), SUN);\n    }\n    disc(B, x, y, 3.2, SUN);\n  } else if (kind === \"moon\") {\n    // A crescent: the disc less a second one up and to the right.\n    for (let j = -4; j \u003c= 4; j++)\n      for (let i = -4; i \u003c= 4; i++) if (i * i + j * j \u003c= 10.5 && (i - 1.8) ** 2 + (j + 1.2) ** 2 > 7.8) put(B, x + i, y + j, MOON);\n  } else {\n    puff(B, x, y);\n    if (kind === \"rain\") for (let k = -1; k \u003c= 1; k++) {\n      const fall = (u * 3 + k * 0.6) % 1;\n      put(B, x + 2 * k, y + 4 + Math.floor(fall * 3), DROP);\n    }\n  }\n  // The temperature in a box beside it: blue when cold, yellow when mild, orange when warm.\n  const box = deg \u003c 7 ? [40, 110, 220] : deg \u003c 14 ? [236, 196, 40] : [240, 128, 30];\n  const ink = deg \u003c 7 ? WHITE : [16, 16, 16];\n  const s = String(deg);\n  const w = s.length * 4 + 1;\n  const bx = x + 5;\n  const by = y - 3;\n  for (let j = 0; j \u003c 7; j++) for (let i = 0; i \u003c w; i++) put(B, bx + i, by + j, box);\n  text(B, s, bx + 1, by + 1, ink);\n}\n\n// The broadcast picture before the set gets at it: the map, its cloud, the symbols,\n// the presenter in front, the caption and the station clock.\nfunction broadcast(P) {\n  const B = P.buf;\n  const u = P.u;\n  B.set(P.map);\n  const ox = u * 3;\n  const o0 = Math.floor(ox);\n  const fo = ox - o0;\n  for (let y = 0; y \u003c H; y++) {\n    const row = y * CLOUD_W;\n    for (let x = 0; x \u003c W; x++) {\n      const i0 = (((x - o0) % CLOUD_W) + CLOUD_W) % CLOUD_W;\n      const i1 = (i0 + CLOUD_W - 1) % CLOUD_W;\n      const a = P.cloud[row + i0] * (1 - fo) + P.cloud[row + i1] * fo;\n      if (a > 0.01) {\n        const o = (y * W + x) * 3;\n        B[o] += (CLOUD[0] - B[o]) * a;\n        B[o + 1] += (CLOUD[1] - B[o + 1]) * a;\n        B[o + 2] += (CLOUD[2] - B[o + 2]) * a;\n      }\n    }\n  }\n  // Tonight's chart for 10 s, then tomorrow's, and round again.\n  const show = P.shows[Math.floor(u / 10) % 2];\n  for (const sp of show.spots) symbol(B, sp[0], sp[1], sp[2], sp[3], u);\n  presenter(P, B, show, u);\n  for (let x = 0; x \u003c W; x++) {\n    put(B, x, 116, BAND_TOP);\n    for (let y = 117; y \u003c H; y++) put(B, x, y, BAND);\n  }\n  text(B, show.name, Math.floor((W - (show.name.length * 4 - 1)) / 2), 119, WHITE);\n  // The station clock in the corner, past midnight.\n  for (let y = 2; y \u003c 10; y++) for (let x = 41; x \u003c 62; x++) {\n    const o = (y * W + x) * 3;\n    B[o] *= 0.35;\n    B[o + 1] *= 0.35;\n    B[o + 2] *= 0.35;\n  }\n  const m = P.min + Math.floor(u / 60);\n  const hh = Math.floor(m / 60) % 24;\n  const mm = m % 60;\n  text(B, `${hh \u003c 10 ? \"0\" : \"\"}${hh}:${mm \u003c 10 ? \"0\" : \"\"}${mm}`, 42, 3, WHITE);\n}\n\nfunction presenter(P, B, show, u) {\n  const sw = 0.8 * Math.sin(u * 0.9);\n  const hx = 12 + sw;\n  const hy = 80;\n  const J = P.jacket;\n  const dark = [J[0] * 0.6, J[1] * 0.6, J[2] * 0.6];\n  // Shoulders down past the caption, widening a little.\n  for (let y = hy + 7; y \u003c H; y++) {\n    const d = y - hy - 7;\n    const half = d \u003c 2 ? 8 + 1.5 * d : 11 + 0.15 * d;\n    for (let x = Math.floor(hx - half); x \u003c= Math.ceil(hx + half); x++) {\n      const v = Math.abs(x - hx) \u003c (hy + 17 - y) * 0.35;\n      const lapel = !v && Math.abs(x - hx) \u003c (hy + 17 - y) * 0.35 + 1.2;\n      put(B, x, y, v ? SHIRT : lapel ? dark : J);\n    }\n  }\n  // The neck and the head, with the hair round the top and sides.\n  for (let y = hy + 4; y \u003c hy + 8; y++) for (let x = Math.round(hx) - 1; x \u003c= Math.round(hx) + 1; x++) put(B, x, y, [SKIN[0] * 0.8, SKIN[1] * 0.8, SKIN[2] * 0.8]);\n  for (let dy = -7; dy \u003c= 6; dy++)\n    for (let dx = -6; dx \u003c= 6; dx++) {\n      const e = (dx / 4.3) ** 2 + (dy / 5.3) ** 2;\n      const hairE = (dx / 5.2) ** 2 + ((dy + 1) / 6.2) ** 2;\n      if (e \u003c 1) put(B, hx + dx, hy + dy, dy \u003c -2.5 + Math.abs(dx) * 0.2 ? P.hair : SKIN);\n      else if (hairE \u003c 1 && dy \u003c 3) put(B, hx + dx, hy + dy, P.hair);\n    }\n  put(B, hx - 2, hy - 1, [40, 30, 30]);\n  put(B, hx + 1, hy - 1, [40, 30, 30]);\n  put(B, hx - 0.5, hy + 2, [170, 90, 90]);\n  // The arm towards the map: she points at each symbol in turn, 2.5 s each, and\n  // after the fourth drops her hand to her side for a beat.\n  const sx = hx + 9;\n  const sy = hy + 10;\n  const k = u / 2.5;\n  const i = Math.floor(k);\n  const f = smooth(0, 0.3, k - i);\n  const spot = (n) => {\n    const j = ((n % 5) + 5) % 5;\n    if (j === 4) return [hx + 10, hy + 26];\n    const sp = show.spots[j];\n    const dx = sp[1] - 3 - sx;\n    const dy = sp[2] - sy;\n    const d = Math.sqrt(dx * dx + dy * dy);\n    const r = Math.min(d, 22);\n    return [sx + (dx / d) * r, sy + (dy / d) * r];\n  };\n  const a = spot(i - 1);\n  const b = spot(i);\n  const hxp = a[0] + (b[0] - a[0]) * f;\n  const hyp = a[1] + (b[1] - a[1]) * f;\n  const mx = (sx + hxp) / 2;\n  const my = (sy + hyp) / 2 + 5;\n  const sleeve = [J[0] * 1.15, J[1] * 1.15, J[2] * 1.15];\n  for (let q = 0; q \u003c= 1; q += 0.05) {\n    disc(B, sx + (mx - sx) * q, sy + (my - sy) * q, 1.7, sleeve);\n    disc(B, mx + (hxp - mx) * q, my + (hyp - my) * q, 1.4, sleeve);\n  }\n  disc(B, hxp, hyp, 1.3, SKIN);\n}\n\n// How deep the station has faded at forecast time u: a deep fade every 6 to 8 s,\n// the first 4.2 s in, and a shallow one between each pair.\nfunction fades(u) {\n  let d = 0;\n  const k0 = Math.floor((u - 4.2) / 7);\n  for (let k = k0 - 1; k \u003c= k0 + 1; k++) {\n    const at = 4.2 + 7 * k + (k > 0 ? (hash2(k, 1, 9) - 0.5) * 1.6 : 0);\n    d += Math.exp(-(((u - at) / 0.75) ** 2));\n    d += (0.3 + 0.15 * hash2(k, 2, 9)) * Math.exp(-(((u - at - 3.5) / 0.45) ** 2));\n  }\n  return d;\n}\n\n// The tint control: a turn round the grey axis.\nfunction tintMatrix(m, hue) {\n  const a = hue * Math.PI * 2;\n  const c = Math.cos(a);\n  const s = Math.sin(a);\n  const q = (1 - c) / 3;\n  const r3 = Math.sqrt(1 / 3) * s;\n  m[0] = c + q;\n  m[1] = q - r3;\n  m[2] = q + r3;\n  m[3] = q + r3;\n  m[4] = c + q;\n  m[5] = q - r3;\n  m[6] = q - r3;\n  m[7] = q + r3;\n  m[8] = c + q;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  const speed = clamp(k[1], 0.2, 3);\n  const sig = clamp(k[2], 0, 1);\n  P.ghost = clamp(k[3], 0, 1);\n  if (k[0] !== P.tint) {\n    P.tint = k[0];\n    tintMatrix(P.m, k[0]);\n  }\n  P.t += dt;\n  P.u += (dt * speed) / 2;\n  P.frame++;\n  // The signal wanders a little, flutters as aircraft pass, and fades.\n  const u = P.u;\n  P.s = clamp(0.76 + 0.24 * sig + 0.05 * Math.sin((2 * Math.PI * u) / 3.1) - (1 - 0.75 * sig) * fades(u) + 0.04 * Math.sin(P.t * 11), 0, 1);\n  // When the sync pulses sink into the noise the vertical hold slips and the picture\n  // rolls; once the signal is back it rolls on to the next whole frame and locks there.\n  if (input.btnPressed && input.btnPressed[0]) P.slap = Math.floor(P.phi) + 1;\n  const slipping = P.s \u003c 0.3 || P.slap > P.phi + 0.35;\n  if (slipping) P.rv += (0.9 - P.rv) * Math.min(1, dt * 2.5);\n  else if (P.rv > 0) P.rv = Math.max(0.3, P.rv - dt * 0.6);\n  if (P.rv > 0) {\n    const next = Math.floor(P.phi) + 1;\n    P.phi += P.rv * dt;\n    if (!slipping && P.phi >= next) {\n      P.phi = next;\n      P.rv = 0;\n    }\n  }\n  // Lines lose their place sideways as the signal weakens.\n  const tear = smooth(0.6, 0.15, P.s) * 12;\n  const jit = 0.4 + 1.2 * (1 - P.s);\n  for (let y = 0; y \u003c H; y++) {\n    const band = Math.sin(y * 0.09 + P.t * 1.7) * Math.sin(y * 0.031 - P.t * 0.6);\n    P.tear[y] = Math.round(tear * Math.max(0, band) + (hash2(y, P.frame, 7) - 0.5) * 2 * jit);\n  }\n  broadcast(P);\n  // The tint control, and the colour killer: below a usable signal the set drops\n  // the colour and shows the picture in black and white.\n  const m = P.m;\n  const kill = smooth(0.3, 0.6, P.s);\n  const B = P.buf;\n  const out = P.pic;\n  for (let o = 0; o \u003c N * 3; o += 3) {\n    const r = B[o];\n    const g = B[o + 1];\n    const b = B[o + 2];\n    const grey = (r + g + b) / 3;\n    out[o] = grey + (r * m[0] + g * m[1] + b * m[2] - grey) * kill;\n    out[o + 1] = grey + (r * m[3] + g * m[4] + b * m[5] - grey) * kill;\n    out[o + 2] = grey + (r * m[6] + g * m[7] + b * m[8] - grey) * kill;\n  }\n  // The snow: the set redraws one field of lines a frame, odd then even.\n  // The colour grain goes with the colour: the killer greys the snow too.\n  let rs = P.rs;\n  const S = P.snow;\n  const chroma = 0.06 * kill;\n  for (let y = P.frame & 1; y \u003c H; y += 2)\n    for (let x = 0; x \u003c W; x++) {\n      rs ^= rs \u003c\u003c 13;\n      rs ^= rs >>> 17;\n      rs ^= rs \u003c\u003c 5;\n      const v = rs >>> 0;\n      // Twelve steps of grey, a faint cast of colour on some grains, and now and\n      // then a white spark.\n      let l = Math.floor((((v & 255) + ((v >>> 8) & 255)) / 511) * 12) / 11;\n      if (((v >>> 16) & 255) > 250) l = 1;\n      const o = (y * W + x) * 3;\n      const jr = (((v >>> 24) & 3) - 1) * chroma;\n      const jb = (((v >>> 26) & 3) - 1) * chroma;\n      S[o] = l + jr;\n      S[o + 1] = l;\n      S[o + 2] = l + jb;\n    }\n  P.rs = rs;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const pic = P.pic;\n  const S = P.snow;\n  const s = P.s;\n  // The picture holds on longer than the signal's share says, and the set's gain\n  // turns the snow up bright when there is nothing else to show.\n  const gs = 255 * (1.4 * (1 - s) * (1 - s) + 0.03);\n  const gd = Math.round(4 + 15 * P.ghost);\n  const ga = 0.22 + 0.5 * P.ghost;\n  // The echo shares the set's gain with the direct picture.\n  const gp = Math.pow(s, 0.6) / (1 + ga);\n  const roll = Math.floor(P.phi * C);\n  const data = (P.frame >> 1) * 31;\n  for (let y = 0; y \u003c H; y++) {\n    const sy = (y + roll) % C;\n    const bar = sy >= H;\n    const row = sy * W;\n    const shift = P.tear[y];\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      if (bar) {\n        // Teletext rides in the blanking: two lines of white dashes.\n        const line = sy - H;\n        if ((line === 3 || line === 5) && hash2(x >> 1, data + line, 3) > 0.5) r = g = b = 200;\n      } else {\n        const sx = (((x - shift) % (W + HB)) + W + HB) % (W + HB);\n        if (sx \u003c W) {\n          const o = (row + sx) * 3;\n          r = pic[o];\n          g = pic[o + 1];\n          b = pic[o + 2];\n          const gx = sx - gd;\n          if (gx >= 0) {\n            const q = (row + gx) * 3;\n            r += pic[q] * ga;\n            g += pic[q + 1] * ga;\n            b += pic[q + 2] * ga;\n          }\n        }\n      }\n      const o = p * 3;\n      const v = P.tube[p];\n      r = (r * gp + S[o] * gs) * v;\n      g = (g * gp + S[o + 1] * gs) * v;\n      b = (b * gp + S[o + 2] * gs) * v;\n      display.setPixel(x, y, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tint=0..1, Speed=0.2..3, Signal=0..1, Ghost=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tint","min":0,"max":1,"about":"The set's tint control: turns the broadcast's colours round the colour wheel, opening on the forecast's own blue sea and green land."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the signal drifts and the forecast runs; at 2 the station sinks into the snow every 6 to 8 s, with a shallower fade between."},{"name":"Signal","min":0,"max":1,"about":"How far the station reaches: at 0 the picture keeps sinking into the snow and the hold slips each time, at 1 it stays with only a dusting of snow."},{"name":"Ghost","min":0,"max":1,"about":"The echo off a building across the street: from a faint copy 4 LEDs to the right at 0 to a strong one 19 LEDs over at 1."}],"start":[0,2,0,0.06],"measures":{"motion":2.2448,"detail":0.1335,"edges":0.365,"complexity":2.3725,"coverage":0.9855,"colour":0.1077,"drift":0.2857},"knobResponse":[0.1208,0.2747,0.0525,0.0711]},{"slug":"rainstorm","title":"Rainstorm","family":"weather","round":2,"note":"빗줄기가 128줄을 다 떨어져 물웅덩이에 고리를 남기고, 가끔 갈라진 번개가 구름을 찢으며 쏟아지는 비를 한순간 밝혀요.","idea":"Rain falls the whole 128 rows into a puddle that rings where the drops land, and now and then a branching bolt splits the cloud and lights the downpour for a moment.","buttons":"K1 tap strikes lightning now.","code":"// ===== Patternflow pattern =====\n// Title:   Rainstorm\n// Family:  weather\n// Idea:    Rain falls the whole 128 rows into a puddle that rings where the drops land, and now and then a branching bolt splits the cloud and lights the downpour for a moment.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rain=0.2..3, Wind=-1..1, Storm=0..1\n//\n// Knob 1: Hue. The tint of the night, the cloud and the rain, starting from slate blue.\n// Knob 2: Rain. From a drizzle of a few slow drops to a downpour.\n// Knob 3: Wind. At 0 the rain falls straight; either way it slants and gusts, and the cloud runs with it.\n// Knob 4: Storm. How often lightning comes, from one strike in a while to about two a second, and how low and restless the cloud hangs.\n// Buttons: K1 tap strikes lightning now.\n\nconst W = 64;\nconst H = 128;\n// The puddle's far edge. Below it is water, above it the far bank and the air.\nconst WATER = 112;\nconst DROPS = 300;\nconst RIPPLES = 12;\nconst SPLASH = 96;\nconst BOLT = 1600;\n// Cloud texture: wraps every 128 columns, one row per panel row of the deck.\nconst TW = 128;\nconst TH = 56;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, 7) * (1 - u) + hash(i + 1, 7) * u;\n}\n\n// Value noise that wraps in x with the given period.\nfunction lattice(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const a = hash(x0 + seed, iy) * (1 - ux) + hash(x1 + seed, iy) * ux;\n  const b = hash(x0 + seed, iy + 1) * (1 - ux) + hash(x1 + seed, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.dx = new Float32Array(DROPS);\n  params.dy = new Float32Array(DROPS);\n  params.dz = new Float32Array(DROPS);\n  params.dland = new Float32Array(DROPS);\n  params.rx = new Float32Array(RIPPLES);\n  params.ry = new Float32Array(RIPPLES);\n  params.rage = new Float32Array(RIPPLES).fill(9);\n  params.rsize = new Float32Array(RIPPLES);\n  params.sx = new Float32Array(SPLASH);\n  params.sy = new Float32Array(SPLASH);\n  params.svx = new Float32Array(SPLASH);\n  params.svy = new Float32Array(SPLASH);\n  params.sfloor = new Float32Array(SPLASH);\n  params.sage = new Float32Array(SPLASH).fill(9);\n  params.snext = 0;\n  params.bx = new Int16Array(BOLT);\n  params.by = new Int16Array(BOLT);\n  params.bl = new Float32Array(BOLT);\n  params.bn = 0;\n  params.boltX = W / 2;\n  params.boltAge = 9;\n  params.pulseT = new Float32Array(3);\n  params.pulseA = new Float32Array(3);\n  params.sheetAge = 9;\n  params.sheetX = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(12);\n  params.t = 0;\n  params.cloudA = 0;\n  params.cloudB = 0;\n  params.slant = 0;\n  // The first strike comes a couple of seconds in, so the storm shows itself early.\n  params.nextStrike = 2.3 + Math.random() * 0.5;\n  params.started = false;\n  params.strikes = 0;\n\n  // Two octaves of cloud, baked once and read with a moving offset. No finer octave:\n  // fine grain in a dim cloud only reads as noise.\n  params.tex = new Float32Array(TW * TH);\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c TW; x++) {\n      const n =\n        lattice(x / 16, y / 9, TW / 16, 11) * 0.7 +\n        lattice(x / 8, y / 6, TW / 8, 53) * 0.3;\n      params.tex[y * TW + x] = n;\n    }\n\n  // The far bank: a line of trees, two roofs and a few lit windows, all black against the flash.\n  params.bank = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    let top = 106 - Math.round(noise1(x * 0.22 + 3) * 5 + noise1(x * 0.7) * 2);\n    if (x >= 9 && x \u003c= 20) top = Math.min(top, 99);\n    if (x >= 40 && x \u003c= 51) top = Math.min(top, Math.round(101 - Math.max(0, 5 - Math.abs(x - 45.5))));\n    params.bank[x] = top;\n  }\n  params.windows = new Int16Array([12, 102, 16, 102, 12, 106, 43, 105, 48, 105]);\n}\n\nfunction strike(params, ground) {\n  params.bn = 0;\n  const x0 = 10 + Math.random() * (W - 20);\n  params.boltX = x0;\n  const y0 = params.cloudBase - 10 - Math.random() * 6;\n  // Most bolts reach the ground; some die out in the air.\n  const end = ground ? WATER - 1 : 62 + Math.random() * 36;\n  walk(params, x0, y0, end, (Math.random() - 0.5) * 0.5, 1, 0);\n  params.boltAge = 0;\n  params.pulseT[0] = 0;\n  params.pulseA[0] = 1;\n  params.pulseT[1] = 0.07 + Math.random() * 0.06;\n  params.pulseA[1] = 0.55 + Math.random() * 0.3;\n  params.pulseT[2] = 0.2 + Math.random() * 0.12;\n  params.pulseA[2] = Math.random() \u003c 0.6 ? 0.4 + Math.random() * 0.3 : 0;\n}\n\n// A jagged walk downward, forking now and then. Each branch is thinner and gives up sooner.\nfunction walk(params, x, y, end, drift, level, depth) {\n  while (y \u003c end && params.bn \u003c BOLT - 8) {\n    const dy = 1 + Math.random() * 3;\n    let nx = x + drift * dy + (Math.random() - 0.5) * 3.2;\n    if (Math.random() \u003c 0.12) nx += (Math.random() \u003c 0.5 ? -1 : 1) * (2 + Math.random() * 3);\n    const ny = Math.min(end, y + dy);\n    line(params, x, y, nx, ny, level);\n    if (depth \u003c 2 && Math.random() \u003c (depth === 0 ? 0.15 : 0.08)) {\n      const side = Math.random() \u003c 0.5 ? -1 : 1;\n      const reach = ny + (depth === 0 ? 12 + Math.random() * 34 : 5 + Math.random() * 12);\n      walk(params, nx, ny, Math.min(end, reach), side * (0.5 + Math.random() * 0.8), level * 0.55, depth + 1);\n    }\n    x = nx;\n    y = ny;\n  }\n}\n\nfunction line(params, x0, y0, x1, y1, level) {\n  const n = Math.max(1, Math.ceil(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0))));\n  for (let i = 1; i \u003c= n && params.bn \u003c BOLT; i++) {\n    const u = i / n;\n    params.bx[params.bn] = Math.round(x0 + (x1 - x0) * u);\n    params.by[params.bn] = Math.round(y0 + (y1 - y0) * u);\n    params.bl[params.bn] = level;\n    params.bn++;\n  }\n}\n\nfunction spawnDrop(params, i, anywhere) {\n  // Near drops are faster, longer and brighter, and land nearer the bottom of the puddle.\n  const z = Math.random();\n  params.dz[i] = z;\n  params.dland[i] = WATER + 1 + Math.floor(z * 14.9);\n  params.dy[i] = anywhere ? Math.random() * params.dland[i] : 20 - Math.random() * 50;\n  // Drops wrap round the sides, so slanted rain still fills the panel from the top.\n  params.dx[i] = Math.random() * W;\n}\n\nfunction splash(params, x, y, z) {\n  // Only a few rings at a time, mostly from the near drops: more than that and the puddle reads as noise.\n  let r = -1;\n  if (Math.random() \u003c 0.25 + 0.6 * z) {\n    for (let j = 0; j \u003c params.ringLimit; j++) {\n      if (params.rage[j] >= 0.5 + params.rsize[j] * 0.35) {\n        r = j;\n        break;\n      }\n    }\n  }\n  if (r >= 0) {\n    params.rx[r] = x;\n    params.ry[r] = y;\n    params.rage[r] = 0;\n    params.rsize[r] = 0.45 + z * 0.9;\n  }\n  const n = z > 0.7 ? 2 : z > 0.35 ? 1 : 0;\n  for (let k = 0; k \u003c n; k++) {\n    const s = params.snext;\n    params.snext = (s + 1) % SPLASH;\n    params.sx[s] = x;\n    params.sy[s] = y - 1;\n    params.svx[s] = (Math.random() - 0.5) * 22 + params.slant * 8;\n    params.svy[s] = -(14 + Math.random() * 22) * (0.6 + z * 0.6);\n    params.sfloor[s] = y;\n    params.sage[s] = 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  const t = params.t;\n  params.hue = k[0] + 0.6;\n  const rain = Math.max(0.05, k[1]);\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const storm = Math.max(0, Math.min(1, k[3]));\n  params.storm = storm;\n  params.cloudBase = 30 + storm * 12;\n\n  // Gusts swing the slant a little even in still air, and a lot in a gale.\n  const gust = (noise1(t * 0.45) - 0.5) * 2;\n  params.slant = wind * 0.85 + gust * (0.08 + 0.28 * Math.abs(wind));\n  params.cloudA += dt * (1.2 + wind * 7 + gust * 1.5) * (1 + storm);\n  params.cloudB += dt * (0.5 + wind * 4) * (1 + storm * 1.6);\n\n  const active = Math.min(DROPS, Math.round(rain * 72));\n  params.ringLimit = Math.min(RIPPLES, Math.round(3 + rain * 2.5));\n  params.active = active;\n  if (!params.started) {\n    params.started = true;\n    for (let i = 0; i \u003c DROPS; i++) spawnDrop(params, i, true);\n  }\n  const fall = 0.7 + 0.18 * rain;\n  for (let i = 0; i \u003c active; i++) {\n    const z = params.dz[i];\n    const v = (72 + 80 * z) * fall;\n    params.dy[i] += v * dt;\n    let x = params.dx[i] + v * params.slant * dt;\n    if (x \u003c 0) x += W;\n    else if (x >= W) x -= W;\n    params.dx[i] = x;\n    if (params.dy[i] >= params.dland[i]) {\n      splash(params, Math.round(x) % W, params.dland[i], z);\n      spawnDrop(params, i, false);\n    }\n  }\n  for (let r = 0; r \u003c RIPPLES; r++) params.rage[r] += dt;\n  for (let s = 0; s \u003c SPLASH; s++) {\n    if (params.sage[s] > 1) continue;\n    params.sage[s] += dt;\n    params.svy[s] += 260 * dt;\n    params.sx[s] += params.svx[s] * dt;\n    params.sy[s] += params.svy[s] * dt;\n    if (params.sy[s] > params.sfloor[s]) params.sage[s] = 9;\n  }\n\n  // Lightning: more often with Storm, and the odd one stays in the cloud.\n  params.nextStrike -= dt;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if (pressed || params.nextStrike \u003c= 0) {\n    strike(params, pressed || params.strikes === 0 || Math.random() \u003c 0.8);\n    params.strikes++;\n    const mean = 7 * (1 - storm) * (1 - storm) + 0.55;\n    params.nextStrike = mean * (0.4 + Math.random() * 1.2);\n  }\n  params.boltAge += dt;\n  // Sheet lightning flickers inside the cloud between strikes when the storm is up.\n  params.sheetAge += dt;\n  if (storm > 0.3 && params.sheetAge > 0.5 && Math.random() \u003c dt * (storm - 0.3) * 2.5) {\n    params.sheetAge = 0;\n    params.sheetX = Math.random() * W;\n  }\n\n  // The flash: two or three return strokes down the same channel, then an afterglow.\n  let f = 0;\n  const a = params.boltAge;\n  for (let p = 0; p \u003c 3; p++) {\n    const d = a - params.pulseT[p];\n    if (d >= 0) f += params.pulseA[p] * Math.exp(-d / 0.07);\n  }\n  params.flash = Math.min(1.2, f + 0.22 * Math.exp(-a / 0.35));\n  // The channel stays lit between strokes, dimmer, and goes out about half a second on.\n  params.boltOn = a \u003c 0.7 ? Math.min(1, f * 1.4 + 0.6 * Math.exp(-a / 0.22)) : 0;\n  const s = params.sheetAge;\n  params.sheet = s \u003c 0.4 ? Math.exp(-s / 0.08) * (0.6 + 0.4 * Math.sin(s * 60)) * 0.7 : 0;\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const col = params.col;\n  const hue = params.hue;\n  const flash = params.flash;\n  const t = params.t;\n  // col: 0 air, 3 cloud, 6 rain, 9 flash light.\n  hsvInto(col, 0, hue, 0.55, 1);\n  hsvInto(col, 3, hue + 0.02, 0.4, 1);\n  hsvInto(col, 6, hue - 0.02, 0.28, 1);\n  hsvInto(col, 9, hue + 0.08, 0.18, 1);\n  const fr = col[9];\n  const fg = col[10];\n  const fb = col[11];\n\n  // Air: darkest under the cloud, lit by the flash. The town's glow sits low, so the far bank\n  // stands out against it even between flashes.\n  for (let y = 0; y \u003c WATER; y++) {\n    const glow = 0.045 + 0.15 * Math.exp(-Math.max(0, 100 - y) / 9);\n    const lit = flash * (0.18 + 0.2 * (1 - y / WATER));\n    const o0 = y * W * 3;\n    const r = col[0] * glow + fr * lit;\n    const g = col[1] * glow + fg * lit;\n    const b = col[2] * glow + fb * lit;\n    for (let x = 0; x \u003c W; x++) {\n      const o = o0 + x * 3;\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  // The far bank stays black, so the flash shows it as a silhouette.\n  const bank = params.bank;\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = bank[x]; y \u003c WATER; y++) {\n      const o = (y * W + x) * 3;\n      buf[o] = 3;\n      buf[o + 1] = 3;\n      buf[o + 2] = 5;\n    }\n  }\n  const win = params.windows;\n  for (let i = 0; i \u003c win.length; i += 2) {\n    const o = (win[i + 1] * W + win[i]) * 3;\n    buf[o] = 240;\n    buf[o + 1] = 160;\n    buf[o + 2] = 60;\n  }\n  // Water: the sky at the horizon, mirrored and darker, with slow streaks across it.\n  for (let y = WATER; y \u003c H; y++) {\n    const depth = (y - WATER) / (H - WATER);\n    for (let x = 0; x \u003c W; x++) {\n      const streak = 0.88 + 0.12 * Math.sin(x * 0.17 + y * 0.6 + t * 1.3 + Math.sin(y * 0.5 + t) * 2);\n      const v = (0.15 - depth * 0.08) * streak;\n      const lit = flash * (0.32 - depth * 0.14) * streak;\n      const o = (y * W + x) * 3;\n      buf[o] = col[0] * v + fr * lit;\n      buf[o + 1] = col[1] * v + fg * lit;\n      buf[o + 2] = col[2] * v + fb * lit;\n    }\n    // The lit windows break up in the water below them.\n    for (let i = 0; i \u003c win.length; i += 2) {\n      if (y - WATER > 8 || Math.sin(y * 2.1 + t * 6 + i * 1.7) \u003c -0.2) continue;\n      const wx = Math.round(win[i] + Math.sin(y * 0.7 + t * 3 + i) * 0.45);\n      if (wx \u003c 0 || wx >= W) continue;\n      const o = (y * W + wx) * 3;\n      // Kept bright and yellow: a dim orange reflection reads as brown.\n      const k = 0.8 - (y - WATER) * 0.06;\n      buf[o] = Math.max(buf[o], 240 * k);\n      buf[o + 1] = Math.max(buf[o + 1], 170 * k);\n      buf[o + 2] = Math.max(buf[o + 2], 70 * k);\n    }\n  }\n\n  // The cloud deck. The rain is drawn in front of it, as it falls between us and the cloud.\n  const tex = params.tex;\n  const base = params.cloudBase;\n  const storm = params.storm;\n  const ca = params.cloudA;\n  const cb = params.cloudB;\n  const ia = Math.floor(ca);\n  const fa = ca - ia;\n  const ib = Math.floor(cb);\n  const fbx = cb - ib;\n  const bx = params.boltX;\n  const sheet = params.sheet;\n  const sheetX = params.sheetX;\n  const bottom = Math.min(TH - 1, Math.ceil(base + 10));\n  for (let y = 0; y \u003c= bottom; y++) {\n    const rowA = y * TW;\n    const rowB = ((y + 23) % TH) * TW;\n    // Thick at the top and thinning to a ragged hem at the cloud base.\n    const thin = Math.max(0, (y - (base - 16)) / 20);\n    for (let x = 0; x \u003c W; x++) {\n      const xa = ((x + ia) % TW + TW) % TW;\n      const xb = ((x - ib) % TW + TW) % TW;\n      const na = tex[rowA + xa] * (1 - fa) + tex[rowA + ((xa + 1) % TW)] * fa;\n      const nb = tex[rowB + xb] * (1 - fbx) + tex[rowB + ((xb + 1) % TW)] * fbx;\n      const n = na * 0.65 + nb * 0.35;\n      // A long ramp into the cloud, so its hem shades off instead of drawing a line.\n      let d = (n - 0.24 - thin * 0.6) * 2;\n      if (d \u003c= 0) continue;\n      if (d > 1) d = 1;\n      const dxb = (x - bx) / 20;\n      const dxs = (x - sheetX) / 14;\n      const light = flash * (0.35 + 0.65 / (1 + dxb * dxb)) * (0.5 + n) + sheet / (1 + dxs * dxs) * n;\n      const shade = (0.1 + 0.36 * n * n + storm * 0.03) * (1 - thin * 0.4);\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - d) + (col[3] * shade + fr * light * 0.8) * d;\n      buf[o + 1] = buf[o + 1] * (1 - d) + (col[4] * shade + fg * light * 0.8) * d;\n      buf[o + 2] = buf[o + 2] * (1 - d) + (col[5] * shade + fb * light * 0.8) * d;\n    }\n  }\n\n  // Ripples: a flat ellipse for the puddle seen from the side, plotted a column at a time so\n  // it stays a clean ring; the far ones are only two dots moving apart.\n  const rainR = col[6];\n  const rainG = col[7];\n  const rainB = col[8];\n  for (let r = 0; r \u003c RIPPLES; r++) {\n    const age = params.rage[r];\n    const size = params.rsize[r];\n    const life = 0.5 + size * 0.35;\n    if (age >= life) continue;\n    const rad = size * (1 + 4.5 * Math.sqrt(age / life));\n    const ryr = rad * 0.38;\n    const level = (0.3 + 0.32 * size) * (1 + flash * 0.6);\n    const cr = rainR * level;\n    const cg = rainG * level;\n    const cbl = rainB * level;\n    const cx = params.rx[r];\n    const cy = params.ry[r];\n    const x0 = Math.ceil(cx - rad);\n    const x1 = Math.floor(cx + rad);\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - cx) / rad;\n      const e = ryr * Math.sqrt(Math.max(0, 1 - u * u));\n      const flat = ryr \u003c 0.75;\n      // A flat ring shows only its two ends.\n      if (flat && x !== x0 && x !== x1) continue;\n      const xw = ((x % W) + W) % W;\n      const ya = Math.round(cy - e);\n      const yb = Math.round(cy + e);\n      for (let y = ya; y \u003c= yb; y += Math.max(1, yb - ya)) {\n        if (y \u003c WATER || y >= H) continue;\n        const o = (y * W + xw) * 3;\n        buf[o] = Math.max(buf[o], cr);\n        buf[o + 1] = Math.max(buf[o + 1], cg);\n        buf[o + 2] = Math.max(buf[o + 2], cbl);\n      }\n    }\n  }\n\n  // Rain: hard one-LED streaks, as long as a drop falls in a frame.\n  const slant = params.slant;\n  for (let i = 0; i \u003c params.active; i++) {\n    const z = params.dz[i];\n    const hx = params.dx[i];\n    const hy = params.dy[i];\n    const len = 2 + z * 4.5;\n    const level = (0.4 + 0.42 * z) * (1 + flash * 0.9);\n    const steps = Math.ceil(len * Math.max(1, Math.abs(slant)));\n    const sx = (slant * len) / steps;\n    const sy = len / steps;\n    for (let s = 0; s \u003c= steps; s++) {\n      let x = Math.round(hx - sx * s);\n      if (x \u003c 0) x += W;\n      else if (x >= W) x -= W;\n      const y = Math.round(hy - sy * s);\n      if (y \u003c 0 || y >= H) continue;\n      const v = s === 0 ? Math.min(1, level + 0.2) : level;\n      const o = (y * W + x) * 3;\n      buf[o] = Math.max(buf[o], rainR * v);\n      buf[o + 1] = Math.max(buf[o + 1], rainG * v);\n      buf[o + 2] = Math.max(buf[o + 2], rainB * v);\n    }\n  }\n  for (let s = 0; s \u003c SPLASH; s++) {\n    if (params.sage[s] > 1) continue;\n    const x = Math.round(params.sx[s]);\n    const y = Math.round(params.sy[s]);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const v = 0.55 * (1 + flash * 0.5);\n    const o = (y * W + x) * 3;\n    buf[o] = Math.max(buf[o], rainR * v);\n    buf[o + 1] = Math.max(buf[o + 1], rainG * v);\n    buf[o + 2] = Math.max(buf[o + 2], rainB * v);\n  }\n\n  // The bolt itself, crisp, and its broken reflection in the puddle.\n  const on = params.boltOn;\n  if (on > 0.02) {\n    for (let i = 0; i \u003c params.bn; i++) {\n      const x = params.bx[i];\n      const y = params.by[i];\n      const v = Math.min(1, on * (0.45 + 0.55 * params.bl[i]));\n      // White while it strikes, cooling to violet as the channel goes out.\n      const br = 140 + 100 * v;\n      const bgc = 120 + 120 * v;\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) {\n        const o = (y * W + x) * 3;\n        buf[o] = Math.max(buf[o], br * v);\n        buf[o + 1] = Math.max(buf[o + 1], bgc * v);\n        buf[o + 2] = Math.max(buf[o + 2], 255 * v);\n        // The main channel is two LEDs wide, so it reads as the trunk and the forks as twigs.\n        if (params.bl[i] === 1 && x + 1 \u003c W) {\n          const q = o + 3;\n          const m = v * 0.7;\n          buf[q] = Math.max(buf[q], br * m);\n          buf[q + 1] = Math.max(buf[q + 1], bgc * m);\n          buf[q + 2] = Math.max(buf[q + 2], 255 * m);\n        }\n      }\n      const ry = 2 * WATER - 1 - y;\n      if (ry >= WATER && ry \u003c H) {\n        const rx = Math.round(x + Math.sin(ry * 1.1 + t * 9) * 0.9);\n        if (rx >= 0 && rx \u003c W) {\n          const o = (ry * W + rx) * 3;\n          const k = v * 0.45 * (1 - (ry - WATER) / (H - WATER));\n          buf[o] = Math.max(buf[o], br * k);\n          buf[o + 1] = Math.max(buf[o + 1], bgc * k);\n          buf[o + 2] = Math.max(buf[o + 2], 255 * k);\n        }\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n","layer":{"id":"layer-rainstorm","type":"code","name":"rainstorm","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rainstorm\n// Family:  weather\n// Idea:    Rain falls the whole 128 rows into a puddle that rings where the drops land, and now and then a branching bolt splits the cloud and lights the downpour for a moment.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rain=0.2..3, Wind=-1..1, Storm=0..1\n//\n// Knob 1: Hue. The tint of the night, the cloud and the rain, starting from slate blue.\n// Knob 2: Rain. From a drizzle of a few slow drops to a downpour.\n// Knob 3: Wind. At 0 the rain falls straight; either way it slants and gusts, and the cloud runs with it.\n// Knob 4: Storm. How often lightning comes, from one strike in a while to about two a second, and how low and restless the cloud hangs.\n// Buttons: K1 tap strikes lightning now.\n\nconst W = 64;\nconst H = 128;\n// The puddle's far edge. Below it is water, above it the far bank and the air.\nconst WATER = 112;\nconst DROPS = 300;\nconst RIPPLES = 12;\nconst SPLASH = 96;\nconst BOLT = 1600;\n// Cloud texture: wraps every 128 columns, one row per panel row of the deck.\nconst TW = 128;\nconst TH = 56;\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise1(x) {\n  const i = Math.floor(x);\n  const f = x - i;\n  const u = f * f * (3 - 2 * f);\n  return hash(i, 7) * (1 - u) + hash(i + 1, 7) * u;\n}\n\n// Value noise that wraps in x with the given period.\nfunction lattice(x, y, period, seed) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ((ix % period) + period) % period;\n  const x1 = (x0 + 1) % period;\n  const a = hash(x0 + seed, iy) * (1 - ux) + hash(x1 + seed, iy) * ux;\n  const b = hash(x0 + seed, iy + 1) * (1 - ux) + hash(x1 + seed, iy + 1) * ux;\n  return a * (1 - uy) + b * uy;\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[o + 1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[o + 2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\nexport function setup(params) {\n  params.dx = new Float32Array(DROPS);\n  params.dy = new Float32Array(DROPS);\n  params.dz = new Float32Array(DROPS);\n  params.dland = new Float32Array(DROPS);\n  params.rx = new Float32Array(RIPPLES);\n  params.ry = new Float32Array(RIPPLES);\n  params.rage = new Float32Array(RIPPLES).fill(9);\n  params.rsize = new Float32Array(RIPPLES);\n  params.sx = new Float32Array(SPLASH);\n  params.sy = new Float32Array(SPLASH);\n  params.svx = new Float32Array(SPLASH);\n  params.svy = new Float32Array(SPLASH);\n  params.sfloor = new Float32Array(SPLASH);\n  params.sage = new Float32Array(SPLASH).fill(9);\n  params.snext = 0;\n  params.bx = new Int16Array(BOLT);\n  params.by = new Int16Array(BOLT);\n  params.bl = new Float32Array(BOLT);\n  params.bn = 0;\n  params.boltX = W / 2;\n  params.boltAge = 9;\n  params.pulseT = new Float32Array(3);\n  params.pulseA = new Float32Array(3);\n  params.sheetAge = 9;\n  params.sheetX = 0;\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(12);\n  params.t = 0;\n  params.cloudA = 0;\n  params.cloudB = 0;\n  params.slant = 0;\n  // The first strike comes a couple of seconds in, so the storm shows itself early.\n  params.nextStrike = 2.3 + Math.random() * 0.5;\n  params.started = false;\n  params.strikes = 0;\n\n  // Two octaves of cloud, baked once and read with a moving offset. No finer octave:\n  // fine grain in a dim cloud only reads as noise.\n  params.tex = new Float32Array(TW * TH);\n  for (let y = 0; y \u003c TH; y++)\n    for (let x = 0; x \u003c TW; x++) {\n      const n =\n        lattice(x / 16, y / 9, TW / 16, 11) * 0.7 +\n        lattice(x / 8, y / 6, TW / 8, 53) * 0.3;\n      params.tex[y * TW + x] = n;\n    }\n\n  // The far bank: a line of trees, two roofs and a few lit windows, all black against the flash.\n  params.bank = new Int16Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    let top = 106 - Math.round(noise1(x * 0.22 + 3) * 5 + noise1(x * 0.7) * 2);\n    if (x >= 9 && x \u003c= 20) top = Math.min(top, 99);\n    if (x >= 40 && x \u003c= 51) top = Math.min(top, Math.round(101 - Math.max(0, 5 - Math.abs(x - 45.5))));\n    params.bank[x] = top;\n  }\n  params.windows = new Int16Array([12, 102, 16, 102, 12, 106, 43, 105, 48, 105]);\n}\n\nfunction strike(params, ground) {\n  params.bn = 0;\n  const x0 = 10 + Math.random() * (W - 20);\n  params.boltX = x0;\n  const y0 = params.cloudBase - 10 - Math.random() * 6;\n  // Most bolts reach the ground; some die out in the air.\n  const end = ground ? WATER - 1 : 62 + Math.random() * 36;\n  walk(params, x0, y0, end, (Math.random() - 0.5) * 0.5, 1, 0);\n  params.boltAge = 0;\n  params.pulseT[0] = 0;\n  params.pulseA[0] = 1;\n  params.pulseT[1] = 0.07 + Math.random() * 0.06;\n  params.pulseA[1] = 0.55 + Math.random() * 0.3;\n  params.pulseT[2] = 0.2 + Math.random() * 0.12;\n  params.pulseA[2] = Math.random() \u003c 0.6 ? 0.4 + Math.random() * 0.3 : 0;\n}\n\n// A jagged walk downward, forking now and then. Each branch is thinner and gives up sooner.\nfunction walk(params, x, y, end, drift, level, depth) {\n  while (y \u003c end && params.bn \u003c BOLT - 8) {\n    const dy = 1 + Math.random() * 3;\n    let nx = x + drift * dy + (Math.random() - 0.5) * 3.2;\n    if (Math.random() \u003c 0.12) nx += (Math.random() \u003c 0.5 ? -1 : 1) * (2 + Math.random() * 3);\n    const ny = Math.min(end, y + dy);\n    line(params, x, y, nx, ny, level);\n    if (depth \u003c 2 && Math.random() \u003c (depth === 0 ? 0.15 : 0.08)) {\n      const side = Math.random() \u003c 0.5 ? -1 : 1;\n      const reach = ny + (depth === 0 ? 12 + Math.random() * 34 : 5 + Math.random() * 12);\n      walk(params, nx, ny, Math.min(end, reach), side * (0.5 + Math.random() * 0.8), level * 0.55, depth + 1);\n    }\n    x = nx;\n    y = ny;\n  }\n}\n\nfunction line(params, x0, y0, x1, y1, level) {\n  const n = Math.max(1, Math.ceil(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0))));\n  for (let i = 1; i \u003c= n && params.bn \u003c BOLT; i++) {\n    const u = i / n;\n    params.bx[params.bn] = Math.round(x0 + (x1 - x0) * u);\n    params.by[params.bn] = Math.round(y0 + (y1 - y0) * u);\n    params.bl[params.bn] = level;\n    params.bn++;\n  }\n}\n\nfunction spawnDrop(params, i, anywhere) {\n  // Near drops are faster, longer and brighter, and land nearer the bottom of the puddle.\n  const z = Math.random();\n  params.dz[i] = z;\n  params.dland[i] = WATER + 1 + Math.floor(z * 14.9);\n  params.dy[i] = anywhere ? Math.random() * params.dland[i] : 20 - Math.random() * 50;\n  // Drops wrap round the sides, so slanted rain still fills the panel from the top.\n  params.dx[i] = Math.random() * W;\n}\n\nfunction splash(params, x, y, z) {\n  // Only a few rings at a time, mostly from the near drops: more than that and the puddle reads as noise.\n  let r = -1;\n  if (Math.random() \u003c 0.25 + 0.6 * z) {\n    for (let j = 0; j \u003c params.ringLimit; j++) {\n      if (params.rage[j] >= 0.5 + params.rsize[j] * 0.35) {\n        r = j;\n        break;\n      }\n    }\n  }\n  if (r >= 0) {\n    params.rx[r] = x;\n    params.ry[r] = y;\n    params.rage[r] = 0;\n    params.rsize[r] = 0.45 + z * 0.9;\n  }\n  const n = z > 0.7 ? 2 : z > 0.35 ? 1 : 0;\n  for (let k = 0; k \u003c n; k++) {\n    const s = params.snext;\n    params.snext = (s + 1) % SPLASH;\n    params.sx[s] = x;\n    params.sy[s] = y - 1;\n    params.svx[s] = (Math.random() - 0.5) * 22 + params.slant * 8;\n    params.svy[s] = -(14 + Math.random() * 22) * (0.6 + z * 0.6);\n    params.sfloor[s] = y;\n    params.sage[s] = 0;\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n  const t = params.t;\n  params.hue = k[0] + 0.6;\n  const rain = Math.max(0.05, k[1]);\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const storm = Math.max(0, Math.min(1, k[3]));\n  params.storm = storm;\n  params.cloudBase = 30 + storm * 12;\n\n  // Gusts swing the slant a little even in still air, and a lot in a gale.\n  const gust = (noise1(t * 0.45) - 0.5) * 2;\n  params.slant = wind * 0.85 + gust * (0.08 + 0.28 * Math.abs(wind));\n  params.cloudA += dt * (1.2 + wind * 7 + gust * 1.5) * (1 + storm);\n  params.cloudB += dt * (0.5 + wind * 4) * (1 + storm * 1.6);\n\n  const active = Math.min(DROPS, Math.round(rain * 72));\n  params.ringLimit = Math.min(RIPPLES, Math.round(3 + rain * 2.5));\n  params.active = active;\n  if (!params.started) {\n    params.started = true;\n    for (let i = 0; i \u003c DROPS; i++) spawnDrop(params, i, true);\n  }\n  const fall = 0.7 + 0.18 * rain;\n  for (let i = 0; i \u003c active; i++) {\n    const z = params.dz[i];\n    const v = (72 + 80 * z) * fall;\n    params.dy[i] += v * dt;\n    let x = params.dx[i] + v * params.slant * dt;\n    if (x \u003c 0) x += W;\n    else if (x >= W) x -= W;\n    params.dx[i] = x;\n    if (params.dy[i] >= params.dland[i]) {\n      splash(params, Math.round(x) % W, params.dland[i], z);\n      spawnDrop(params, i, false);\n    }\n  }\n  for (let r = 0; r \u003c RIPPLES; r++) params.rage[r] += dt;\n  for (let s = 0; s \u003c SPLASH; s++) {\n    if (params.sage[s] > 1) continue;\n    params.sage[s] += dt;\n    params.svy[s] += 260 * dt;\n    params.sx[s] += params.svx[s] * dt;\n    params.sy[s] += params.svy[s] * dt;\n    if (params.sy[s] > params.sfloor[s]) params.sage[s] = 9;\n  }\n\n  // Lightning: more often with Storm, and the odd one stays in the cloud.\n  params.nextStrike -= dt;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if (pressed || params.nextStrike \u003c= 0) {\n    strike(params, pressed || params.strikes === 0 || Math.random() \u003c 0.8);\n    params.strikes++;\n    const mean = 7 * (1 - storm) * (1 - storm) + 0.55;\n    params.nextStrike = mean * (0.4 + Math.random() * 1.2);\n  }\n  params.boltAge += dt;\n  // Sheet lightning flickers inside the cloud between strikes when the storm is up.\n  params.sheetAge += dt;\n  if (storm > 0.3 && params.sheetAge > 0.5 && Math.random() \u003c dt * (storm - 0.3) * 2.5) {\n    params.sheetAge = 0;\n    params.sheetX = Math.random() * W;\n  }\n\n  // The flash: two or three return strokes down the same channel, then an afterglow.\n  let f = 0;\n  const a = params.boltAge;\n  for (let p = 0; p \u003c 3; p++) {\n    const d = a - params.pulseT[p];\n    if (d >= 0) f += params.pulseA[p] * Math.exp(-d / 0.07);\n  }\n  params.flash = Math.min(1.2, f + 0.22 * Math.exp(-a / 0.35));\n  // The channel stays lit between strokes, dimmer, and goes out about half a second on.\n  params.boltOn = a \u003c 0.7 ? Math.min(1, f * 1.4 + 0.6 * Math.exp(-a / 0.22)) : 0;\n  const s = params.sheetAge;\n  params.sheet = s \u003c 0.4 ? Math.exp(-s / 0.08) * (0.6 + 0.4 * Math.sin(s * 60)) * 0.7 : 0;\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const col = params.col;\n  const hue = params.hue;\n  const flash = params.flash;\n  const t = params.t;\n  // col: 0 air, 3 cloud, 6 rain, 9 flash light.\n  hsvInto(col, 0, hue, 0.55, 1);\n  hsvInto(col, 3, hue + 0.02, 0.4, 1);\n  hsvInto(col, 6, hue - 0.02, 0.28, 1);\n  hsvInto(col, 9, hue + 0.08, 0.18, 1);\n  const fr = col[9];\n  const fg = col[10];\n  const fb = col[11];\n\n  // Air: darkest under the cloud, lit by the flash. The town's glow sits low, so the far bank\n  // stands out against it even between flashes.\n  for (let y = 0; y \u003c WATER; y++) {\n    const glow = 0.045 + 0.15 * Math.exp(-Math.max(0, 100 - y) / 9);\n    const lit = flash * (0.18 + 0.2 * (1 - y / WATER));\n    const o0 = y * W * 3;\n    const r = col[0] * glow + fr * lit;\n    const g = col[1] * glow + fg * lit;\n    const b = col[2] * glow + fb * lit;\n    for (let x = 0; x \u003c W; x++) {\n      const o = o0 + x * 3;\n      buf[o] = r;\n      buf[o + 1] = g;\n      buf[o + 2] = b;\n    }\n  }\n  // The far bank stays black, so the flash shows it as a silhouette.\n  const bank = params.bank;\n  for (let x = 0; x \u003c W; x++) {\n    for (let y = bank[x]; y \u003c WATER; y++) {\n      const o = (y * W + x) * 3;\n      buf[o] = 3;\n      buf[o + 1] = 3;\n      buf[o + 2] = 5;\n    }\n  }\n  const win = params.windows;\n  for (let i = 0; i \u003c win.length; i += 2) {\n    const o = (win[i + 1] * W + win[i]) * 3;\n    buf[o] = 240;\n    buf[o + 1] = 160;\n    buf[o + 2] = 60;\n  }\n  // Water: the sky at the horizon, mirrored and darker, with slow streaks across it.\n  for (let y = WATER; y \u003c H; y++) {\n    const depth = (y - WATER) / (H - WATER);\n    for (let x = 0; x \u003c W; x++) {\n      const streak = 0.88 + 0.12 * Math.sin(x * 0.17 + y * 0.6 + t * 1.3 + Math.sin(y * 0.5 + t) * 2);\n      const v = (0.15 - depth * 0.08) * streak;\n      const lit = flash * (0.32 - depth * 0.14) * streak;\n      const o = (y * W + x) * 3;\n      buf[o] = col[0] * v + fr * lit;\n      buf[o + 1] = col[1] * v + fg * lit;\n      buf[o + 2] = col[2] * v + fb * lit;\n    }\n    // The lit windows break up in the water below them.\n    for (let i = 0; i \u003c win.length; i += 2) {\n      if (y - WATER > 8 || Math.sin(y * 2.1 + t * 6 + i * 1.7) \u003c -0.2) continue;\n      const wx = Math.round(win[i] + Math.sin(y * 0.7 + t * 3 + i) * 0.45);\n      if (wx \u003c 0 || wx >= W) continue;\n      const o = (y * W + wx) * 3;\n      // Kept bright and yellow: a dim orange reflection reads as brown.\n      const k = 0.8 - (y - WATER) * 0.06;\n      buf[o] = Math.max(buf[o], 240 * k);\n      buf[o + 1] = Math.max(buf[o + 1], 170 * k);\n      buf[o + 2] = Math.max(buf[o + 2], 70 * k);\n    }\n  }\n\n  // The cloud deck. The rain is drawn in front of it, as it falls between us and the cloud.\n  const tex = params.tex;\n  const base = params.cloudBase;\n  const storm = params.storm;\n  const ca = params.cloudA;\n  const cb = params.cloudB;\n  const ia = Math.floor(ca);\n  const fa = ca - ia;\n  const ib = Math.floor(cb);\n  const fbx = cb - ib;\n  const bx = params.boltX;\n  const sheet = params.sheet;\n  const sheetX = params.sheetX;\n  const bottom = Math.min(TH - 1, Math.ceil(base + 10));\n  for (let y = 0; y \u003c= bottom; y++) {\n    const rowA = y * TW;\n    const rowB = ((y + 23) % TH) * TW;\n    // Thick at the top and thinning to a ragged hem at the cloud base.\n    const thin = Math.max(0, (y - (base - 16)) / 20);\n    for (let x = 0; x \u003c W; x++) {\n      const xa = ((x + ia) % TW + TW) % TW;\n      const xb = ((x - ib) % TW + TW) % TW;\n      const na = tex[rowA + xa] * (1 - fa) + tex[rowA + ((xa + 1) % TW)] * fa;\n      const nb = tex[rowB + xb] * (1 - fbx) + tex[rowB + ((xb + 1) % TW)] * fbx;\n      const n = na * 0.65 + nb * 0.35;\n      // A long ramp into the cloud, so its hem shades off instead of drawing a line.\n      let d = (n - 0.24 - thin * 0.6) * 2;\n      if (d \u003c= 0) continue;\n      if (d > 1) d = 1;\n      const dxb = (x - bx) / 20;\n      const dxs = (x - sheetX) / 14;\n      const light = flash * (0.35 + 0.65 / (1 + dxb * dxb)) * (0.5 + n) + sheet / (1 + dxs * dxs) * n;\n      const shade = (0.1 + 0.36 * n * n + storm * 0.03) * (1 - thin * 0.4);\n      const o = (y * W + x) * 3;\n      buf[o] = buf[o] * (1 - d) + (col[3] * shade + fr * light * 0.8) * d;\n      buf[o + 1] = buf[o + 1] * (1 - d) + (col[4] * shade + fg * light * 0.8) * d;\n      buf[o + 2] = buf[o + 2] * (1 - d) + (col[5] * shade + fb * light * 0.8) * d;\n    }\n  }\n\n  // Ripples: a flat ellipse for the puddle seen from the side, plotted a column at a time so\n  // it stays a clean ring; the far ones are only two dots moving apart.\n  const rainR = col[6];\n  const rainG = col[7];\n  const rainB = col[8];\n  for (let r = 0; r \u003c RIPPLES; r++) {\n    const age = params.rage[r];\n    const size = params.rsize[r];\n    const life = 0.5 + size * 0.35;\n    if (age >= life) continue;\n    const rad = size * (1 + 4.5 * Math.sqrt(age / life));\n    const ryr = rad * 0.38;\n    const level = (0.3 + 0.32 * size) * (1 + flash * 0.6);\n    const cr = rainR * level;\n    const cg = rainG * level;\n    const cbl = rainB * level;\n    const cx = params.rx[r];\n    const cy = params.ry[r];\n    const x0 = Math.ceil(cx - rad);\n    const x1 = Math.floor(cx + rad);\n    for (let x = x0; x \u003c= x1; x++) {\n      const u = (x - cx) / rad;\n      const e = ryr * Math.sqrt(Math.max(0, 1 - u * u));\n      const flat = ryr \u003c 0.75;\n      // A flat ring shows only its two ends.\n      if (flat && x !== x0 && x !== x1) continue;\n      const xw = ((x % W) + W) % W;\n      const ya = Math.round(cy - e);\n      const yb = Math.round(cy + e);\n      for (let y = ya; y \u003c= yb; y += Math.max(1, yb - ya)) {\n        if (y \u003c WATER || y >= H) continue;\n        const o = (y * W + xw) * 3;\n        buf[o] = Math.max(buf[o], cr);\n        buf[o + 1] = Math.max(buf[o + 1], cg);\n        buf[o + 2] = Math.max(buf[o + 2], cbl);\n      }\n    }\n  }\n\n  // Rain: hard one-LED streaks, as long as a drop falls in a frame.\n  const slant = params.slant;\n  for (let i = 0; i \u003c params.active; i++) {\n    const z = params.dz[i];\n    const hx = params.dx[i];\n    const hy = params.dy[i];\n    const len = 2 + z * 4.5;\n    const level = (0.4 + 0.42 * z) * (1 + flash * 0.9);\n    const steps = Math.ceil(len * Math.max(1, Math.abs(slant)));\n    const sx = (slant * len) / steps;\n    const sy = len / steps;\n    for (let s = 0; s \u003c= steps; s++) {\n      let x = Math.round(hx - sx * s);\n      if (x \u003c 0) x += W;\n      else if (x >= W) x -= W;\n      const y = Math.round(hy - sy * s);\n      if (y \u003c 0 || y >= H) continue;\n      const v = s === 0 ? Math.min(1, level + 0.2) : level;\n      const o = (y * W + x) * 3;\n      buf[o] = Math.max(buf[o], rainR * v);\n      buf[o + 1] = Math.max(buf[o + 1], rainG * v);\n      buf[o + 2] = Math.max(buf[o + 2], rainB * v);\n    }\n  }\n  for (let s = 0; s \u003c SPLASH; s++) {\n    if (params.sage[s] > 1) continue;\n    const x = Math.round(params.sx[s]);\n    const y = Math.round(params.sy[s]);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const v = 0.55 * (1 + flash * 0.5);\n    const o = (y * W + x) * 3;\n    buf[o] = Math.max(buf[o], rainR * v);\n    buf[o + 1] = Math.max(buf[o + 1], rainG * v);\n    buf[o + 2] = Math.max(buf[o + 2], rainB * v);\n  }\n\n  // The bolt itself, crisp, and its broken reflection in the puddle.\n  const on = params.boltOn;\n  if (on > 0.02) {\n    for (let i = 0; i \u003c params.bn; i++) {\n      const x = params.bx[i];\n      const y = params.by[i];\n      const v = Math.min(1, on * (0.45 + 0.55 * params.bl[i]));\n      // White while it strikes, cooling to violet as the channel goes out.\n      const br = 140 + 100 * v;\n      const bgc = 120 + 120 * v;\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) {\n        const o = (y * W + x) * 3;\n        buf[o] = Math.max(buf[o], br * v);\n        buf[o + 1] = Math.max(buf[o + 1], bgc * v);\n        buf[o + 2] = Math.max(buf[o + 2], 255 * v);\n        // The main channel is two LEDs wide, so it reads as the trunk and the forks as twigs.\n        if (params.bl[i] === 1 && x + 1 \u003c W) {\n          const q = o + 3;\n          const m = v * 0.7;\n          buf[q] = Math.max(buf[q], br * m);\n          buf[q + 1] = Math.max(buf[q + 1], bgc * m);\n          buf[q + 2] = Math.max(buf[q + 2], 255 * m);\n        }\n      }\n      const ry = 2 * WATER - 1 - y;\n      if (ry >= WATER && ry \u003c H) {\n        const rx = Math.round(x + Math.sin(ry * 1.1 + t * 9) * 0.9);\n        if (rx >= 0 && rx \u003c W) {\n          const o = (ry * W + rx) * 3;\n          const k = v * 0.45 * (1 - (ry - WATER) / (H - WATER));\n          buf[o] = Math.max(buf[o], br * k);\n          buf[o + 1] = Math.max(buf[o + 1], bgc * k);\n          buf[o + 2] = Math.max(buf[o + 2], 255 * k);\n        }\n      }\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Rain=0.2..3, Wind=-1..1, Storm=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the night, the cloud and the rain, starting from slate blue."},{"name":"Rain","min":0.2,"max":3,"about":"From a drizzle of a few slow drops to a downpour."},{"name":"Wind","min":-1,"max":1,"about":"At 0 the rain falls straight; either way it slants and gusts, and the cloud runs with it."},{"name":"Storm","min":0,"max":1,"about":"How often lightning comes, from one strike in a while to about two a second, and how low and restless the cloud hangs."}],"start":[0,2,0,0.06],"measures":{"motion":2.22,"detail":0.0685,"edges":0.8841,"complexity":0.6564,"coverage":0.3785,"colour":0.0656,"drift":0.2647},"knobResponse":[0.0545,0.1279,0.1012,0.1302]},{"slug":"reaction-diffusion","title":"Reaction Diffusion","family":"sim","round":1,"note":"두 물질이 번지고 먹고 먹히며 산호와 미로와 점박이를 길러요. K3 가 종을 바꿔요.","idea":"Two chemicals that only feed and spread grow coral and spots on their own, and one knob decides which.","buttons":"K1 tap reseeds the dish.","code":"// ===== Patternflow pattern =====\n// Title:   Reaction Diffusion\n// Family:  sim\n// Idea:    Two chemicals that only feed and spread grow coral and spots on their own, and one knob decides which.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..4, Species=0..5, Grain=0..1\n//\n// Knob 1: Hue. Turns the culture's colour around the wheel.\n// Knob 2: Speed. How fast the culture grows; at 2 it runs 240 steps a second.\n// Knob 3: Species. Walks the feed and kill rates through coral, maze, holes, spots, mitosis and worms.\n// Knob 4: Grain. Slows the spreading against the reaction, so every species grows finer, from fat tubes to filigree.\n// Buttons: K1 tap reseeds the dish.\n\n// Gray-Scott feed and kill rates, one pair per species, in knob order.\nconst SPECIES = [\n  [0.0545, 0.062],\n  [0.029, 0.057],\n  [0.039, 0.058],\n  [0.03, 0.062],\n  [0.0367, 0.0649],\n  [0.078, 0.061],\n];\n\nconst W = 64;\nconst H = 128;\n\nfunction rand(params) {\n  let s = params.seed | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.seed = s;\n  return (s >>> 0) / 4294967296;\n}\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// Pearson's perturbation, a disc of half-used feed with some catalyst in it.\nfunction dab(params, cx, cy, r, mix) {\n  const a = params.a;\n  const b = params.b;\n  for (let dy = -r; dy \u003c= r; dy++) {\n    for (let dx = -r; dx \u003c= r; dx++) {\n      if (dx * dx + dy * dy > r * r) continue;\n      const i = ((cy + dy + H * 4) % H) * W + ((cx + dx + W * 4) % W);\n      a[i] += (0.5 - a[i]) * mix;\n      b[i] += (0.25 + rand(params) * 0.05 - b[i]) * mix;\n    }\n  }\n}\n\n// Seeds grow with the spreading rate: smaller ones fade in the spot species,\n// and bigger or closer ones starve each other.\nfunction seedSize(params) {\n  return Math.round(6 * Math.sqrt(params.d));\n}\n\nfunction seedDish(params) {\n  params.a.fill(1);\n  params.b.fill(0);\n  // One seed in each cell of a 3 by 6 grid, jittered, so the dish fills evenly.\n  for (let n = 0; n \u003c 18; n++) {\n    const cx = Math.floor(((n % 3) + 0.15 + rand(params) * 0.7) * (W / 3));\n    const cy = Math.floor((Math.floor(n / 3) + 0.15 + rand(params) * 0.7) * (H / 6));\n    dab(params, cx, cy, seedSize(params) + Math.floor(rand(params) * 2), 1);\n  }\n  params.young = 1;\n  params.fresh = false;\n}\n\nfunction step(params, F, K, D) {\n  const tsx = params.tsx;\n  const tcx = params.tcx;\n  const a = params.a;\n  const b = params.b;\n  const na = params.na;\n  const nb = params.nb;\n  for (let y = 0; y \u003c H; y++) {\n    const up = ((y + H - 1) % H) * W;\n    const row = y * W;\n    const down = ((y + 1) % H) * W;\n    const tcy = params.tcy[y];\n    const tsy = params.tsy[y];\n    for (let x = 0; x \u003c W; x++) {\n      const l = x === 0 ? W - 1 : x - 1;\n      const r = x === W - 1 ? 0 : x + 1;\n      const i = row + x;\n      const av = a[i];\n      const bv = b[i];\n      const la =\n        0.2 * (a[up + x] + a[down + x] + a[row + l] + a[row + r]) +\n        0.05 * (a[up + l] + a[up + r] + a[down + l] + a[down + r]) -\n        av;\n      const lb =\n        0.2 * (b[up + x] + b[down + x] + b[row + l] + b[row + r]) +\n        0.05 * (b[up + l] + b[up + r] + b[down + l] + b[down + r]) -\n        bv;\n      const abb = av * bv * bv;\n      // The tide, sin(ax + by + phase), split into a row part and a column part.\n      const fx = F + tsx[x] * tcy + tcx[x] * tsy;\n      na[i] = av + D * la - abb + fx * (1 - av);\n      // Catalyst that has all but gone is set to zero, which keeps the float maths fast.\n      const nv = bv + 0.5 * D * lb + abb - (K + fx) * bv;\n      nb[i] = nv > 1e-5 ? nv : 0;\n    }\n  }\n  params.a = na;\n  params.b = nb;\n  params.na = a;\n  params.nb = b;\n}\n\nexport function setup(params) {\n  params.a = new Float32Array(W * H);\n  params.b = new Float32Array(W * H);\n  params.na = new Float32Array(W * H);\n  params.nb = new Float32Array(W * H);\n  params.lut = new Uint8Array(256 * 3);\n  params.lutHue = -1;\n  params.seed = 0x2545f491;\n  params.pending = 0;\n  params.check = 0;\n  params.drip = 0;\n  params.tsx = new Float32Array(W);\n  params.tcx = new Float32Array(W);\n  params.tsy = new Float32Array(H);\n  params.tcy = new Float32Array(H);\n  params.tideT = 0;\n  params.young = 0;\n  params.d = 1;\n  // The first update seeds the dish, once the knobs are known.\n  params.fresh = true;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const species = Math.max(0, Math.min(SPECIES.length - 1, k[2]));\n  const i = Math.min(SPECIES.length - 2, Math.floor(species));\n  const f = species - i;\n  const F = SPECIES[i][0] + (SPECIES[i + 1][0] - SPECIES[i][0]) * f;\n  const K = SPECIES[i][1] + (SPECIES[i + 1][1] - SPECIES[i][1]) * f;\n\n  params.d = 1 - 0.45 * Math.max(0, Math.min(1, k[3]));\n  if (params.fresh || (input.btnPressed && input.btnPressed[0])) seedDish(params);\n\n  // A fresh dish runs fast for its first second, so the species shows sooner.\n  params.young = Math.max(0, params.young - dt);\n  params.pending += dt * k[1] * 120 * (1 + params.young * 2);\n  let steps = Math.floor(params.pending);\n  params.pending -= steps;\n  if (steps > 32) steps = 32;\n\n  // A slow tide of feed rolls across the dish and turns as it goes, and now\n  // and then a drop of fresh culture lands, so a dish that has settled keeps\n  // changing.\n  params.drip += steps;\n  if (params.drip > 600) {\n    params.drip = 0;\n    dab(params, Math.floor(rand(params) * W), Math.floor(rand(params) * H), seedSize(params), 0.8);\n  }\n  params.tideT += steps / 7200;\n  const turn = params.tideT * 1.3;\n  // About 85 cells from crest to crest, the same whichever way the tide faces.\n  const ax = (Math.cos(turn) * 9.42) / 128;\n  const by = (Math.sin(turn) * 9.42) / 128;\n  const phase = params.tideT * 6.2832;\n  for (let x = 0; x \u003c W; x++) {\n    params.tsx[x] = Math.sin(ax * x);\n    params.tcx[x] = Math.cos(ax * x);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    params.tcy[y] = 0.0035 * Math.cos(by * y + phase);\n    params.tsy[y] = 0.0035 * Math.sin(by * y + phase);\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, F, K, params.d);\n\n  // A dish that died out, or filled one flat colour, starts again.\n  params.check += dt;\n  if (params.check > 0.5) {\n    params.check = 0;\n    let lo = 1;\n    let hi = 0;\n    const b = params.b;\n    for (let j = 0; j \u003c b.length; j += 5) {\n      if (b[j] \u003c lo) lo = b[j];\n      if (b[j] > hi) hi = b[j];\n    }\n    if (hi \u003c 0.04 || hi - lo \u003c 0.04) seedDish(params);\n  }\n}\n\nexport function draw(display, params, time) {\n  if (params.lutHue !== params.hue) {\n    params.lutHue = params.hue;\n    const lut = params.lut;\n    for (let i = 0; i \u003c 256; i++) {\n      const t = i / 255;\n      // A deep rim a step round the wheel, then a bright, paler core.\n      const c = hsv(params.hue + 0.72 - t * 0.22, 1 - t * t * 0.4, Math.min(1, t * 1.8));\n      lut[i * 3] = c[0];\n      lut[i * 3 + 1] = c[1];\n      lut[i * 3 + 2] = c[2];\n    }\n  }\n  const b = params.b;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let v = (b[i] - 0.05) * 2.7;\n      if (v \u003c= 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      if (v > 1) v = 1;\n      // Light from the top left, so each blob reads as a raised bead.\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      let shade = 0.8 + (b[up + l] - b[down + r]) * 5;\n      shade = shade \u003c 0.35 ? 0.35 : shade > 1.25 ? 1.25 : shade;\n      const li = Math.round(v * 255) * 3;\n      display.setPixel(x, y, lut[li] * shade, lut[li + 1] * shade, lut[li + 2] * shade);\n    }\n  }\n}\n","layer":{"id":"layer-reaction-diffusion","type":"code","name":"reaction-diffusion","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Reaction Diffusion\n// Family:  sim\n// Idea:    Two chemicals that only feed and spread grow coral and spots on their own, and one knob decides which.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.5..4, Species=0..5, Grain=0..1\n//\n// Knob 1: Hue. Turns the culture's colour around the wheel.\n// Knob 2: Speed. How fast the culture grows; at 2 it runs 240 steps a second.\n// Knob 3: Species. Walks the feed and kill rates through coral, maze, holes, spots, mitosis and worms.\n// Knob 4: Grain. Slows the spreading against the reaction, so every species grows finer, from fat tubes to filigree.\n// Buttons: K1 tap reseeds the dish.\n\n// Gray-Scott feed and kill rates, one pair per species, in knob order.\nconst SPECIES = [\n  [0.0545, 0.062],\n  [0.029, 0.057],\n  [0.039, 0.058],\n  [0.03, 0.062],\n  [0.0367, 0.0649],\n  [0.078, 0.061],\n];\n\nconst W = 64;\nconst H = 128;\n\nfunction rand(params) {\n  let s = params.seed | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.seed = s;\n  return (s >>> 0) / 4294967296;\n}\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\n// Pearson's perturbation, a disc of half-used feed with some catalyst in it.\nfunction dab(params, cx, cy, r, mix) {\n  const a = params.a;\n  const b = params.b;\n  for (let dy = -r; dy \u003c= r; dy++) {\n    for (let dx = -r; dx \u003c= r; dx++) {\n      if (dx * dx + dy * dy > r * r) continue;\n      const i = ((cy + dy + H * 4) % H) * W + ((cx + dx + W * 4) % W);\n      a[i] += (0.5 - a[i]) * mix;\n      b[i] += (0.25 + rand(params) * 0.05 - b[i]) * mix;\n    }\n  }\n}\n\n// Seeds grow with the spreading rate: smaller ones fade in the spot species,\n// and bigger or closer ones starve each other.\nfunction seedSize(params) {\n  return Math.round(6 * Math.sqrt(params.d));\n}\n\nfunction seedDish(params) {\n  params.a.fill(1);\n  params.b.fill(0);\n  // One seed in each cell of a 3 by 6 grid, jittered, so the dish fills evenly.\n  for (let n = 0; n \u003c 18; n++) {\n    const cx = Math.floor(((n % 3) + 0.15 + rand(params) * 0.7) * (W / 3));\n    const cy = Math.floor((Math.floor(n / 3) + 0.15 + rand(params) * 0.7) * (H / 6));\n    dab(params, cx, cy, seedSize(params) + Math.floor(rand(params) * 2), 1);\n  }\n  params.young = 1;\n  params.fresh = false;\n}\n\nfunction step(params, F, K, D) {\n  const tsx = params.tsx;\n  const tcx = params.tcx;\n  const a = params.a;\n  const b = params.b;\n  const na = params.na;\n  const nb = params.nb;\n  for (let y = 0; y \u003c H; y++) {\n    const up = ((y + H - 1) % H) * W;\n    const row = y * W;\n    const down = ((y + 1) % H) * W;\n    const tcy = params.tcy[y];\n    const tsy = params.tsy[y];\n    for (let x = 0; x \u003c W; x++) {\n      const l = x === 0 ? W - 1 : x - 1;\n      const r = x === W - 1 ? 0 : x + 1;\n      const i = row + x;\n      const av = a[i];\n      const bv = b[i];\n      const la =\n        0.2 * (a[up + x] + a[down + x] + a[row + l] + a[row + r]) +\n        0.05 * (a[up + l] + a[up + r] + a[down + l] + a[down + r]) -\n        av;\n      const lb =\n        0.2 * (b[up + x] + b[down + x] + b[row + l] + b[row + r]) +\n        0.05 * (b[up + l] + b[up + r] + b[down + l] + b[down + r]) -\n        bv;\n      const abb = av * bv * bv;\n      // The tide, sin(ax + by + phase), split into a row part and a column part.\n      const fx = F + tsx[x] * tcy + tcx[x] * tsy;\n      na[i] = av + D * la - abb + fx * (1 - av);\n      // Catalyst that has all but gone is set to zero, which keeps the float maths fast.\n      const nv = bv + 0.5 * D * lb + abb - (K + fx) * bv;\n      nb[i] = nv > 1e-5 ? nv : 0;\n    }\n  }\n  params.a = na;\n  params.b = nb;\n  params.na = a;\n  params.nb = b;\n}\n\nexport function setup(params) {\n  params.a = new Float32Array(W * H);\n  params.b = new Float32Array(W * H);\n  params.na = new Float32Array(W * H);\n  params.nb = new Float32Array(W * H);\n  params.lut = new Uint8Array(256 * 3);\n  params.lutHue = -1;\n  params.seed = 0x2545f491;\n  params.pending = 0;\n  params.check = 0;\n  params.drip = 0;\n  params.tsx = new Float32Array(W);\n  params.tcx = new Float32Array(W);\n  params.tsy = new Float32Array(H);\n  params.tcy = new Float32Array(H);\n  params.tideT = 0;\n  params.young = 0;\n  params.d = 1;\n  // The first update seeds the dish, once the knobs are known.\n  params.fresh = true;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  params.hue = k[0];\n  const species = Math.max(0, Math.min(SPECIES.length - 1, k[2]));\n  const i = Math.min(SPECIES.length - 2, Math.floor(species));\n  const f = species - i;\n  const F = SPECIES[i][0] + (SPECIES[i + 1][0] - SPECIES[i][0]) * f;\n  const K = SPECIES[i][1] + (SPECIES[i + 1][1] - SPECIES[i][1]) * f;\n\n  params.d = 1 - 0.45 * Math.max(0, Math.min(1, k[3]));\n  if (params.fresh || (input.btnPressed && input.btnPressed[0])) seedDish(params);\n\n  // A fresh dish runs fast for its first second, so the species shows sooner.\n  params.young = Math.max(0, params.young - dt);\n  params.pending += dt * k[1] * 120 * (1 + params.young * 2);\n  let steps = Math.floor(params.pending);\n  params.pending -= steps;\n  if (steps > 32) steps = 32;\n\n  // A slow tide of feed rolls across the dish and turns as it goes, and now\n  // and then a drop of fresh culture lands, so a dish that has settled keeps\n  // changing.\n  params.drip += steps;\n  if (params.drip > 600) {\n    params.drip = 0;\n    dab(params, Math.floor(rand(params) * W), Math.floor(rand(params) * H), seedSize(params), 0.8);\n  }\n  params.tideT += steps / 7200;\n  const turn = params.tideT * 1.3;\n  // About 85 cells from crest to crest, the same whichever way the tide faces.\n  const ax = (Math.cos(turn) * 9.42) / 128;\n  const by = (Math.sin(turn) * 9.42) / 128;\n  const phase = params.tideT * 6.2832;\n  for (let x = 0; x \u003c W; x++) {\n    params.tsx[x] = Math.sin(ax * x);\n    params.tcx[x] = Math.cos(ax * x);\n  }\n  for (let y = 0; y \u003c H; y++) {\n    params.tcy[y] = 0.0035 * Math.cos(by * y + phase);\n    params.tsy[y] = 0.0035 * Math.sin(by * y + phase);\n  }\n  for (let s = 0; s \u003c steps; s++) step(params, F, K, params.d);\n\n  // A dish that died out, or filled one flat colour, starts again.\n  params.check += dt;\n  if (params.check > 0.5) {\n    params.check = 0;\n    let lo = 1;\n    let hi = 0;\n    const b = params.b;\n    for (let j = 0; j \u003c b.length; j += 5) {\n      if (b[j] \u003c lo) lo = b[j];\n      if (b[j] > hi) hi = b[j];\n    }\n    if (hi \u003c 0.04 || hi - lo \u003c 0.04) seedDish(params);\n  }\n}\n\nexport function draw(display, params, time) {\n  if (params.lutHue !== params.hue) {\n    params.lutHue = params.hue;\n    const lut = params.lut;\n    for (let i = 0; i \u003c 256; i++) {\n      const t = i / 255;\n      // A deep rim a step round the wheel, then a bright, paler core.\n      const c = hsv(params.hue + 0.72 - t * 0.22, 1 - t * t * 0.4, Math.min(1, t * 1.8));\n      lut[i * 3] = c[0];\n      lut[i * 3 + 1] = c[1];\n      lut[i * 3 + 2] = c[2];\n    }\n  }\n  const b = params.b;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      let v = (b[i] - 0.05) * 2.7;\n      if (v \u003c= 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      if (v > 1) v = 1;\n      // Light from the top left, so each blob reads as a raised bead.\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      let shade = 0.8 + (b[up + l] - b[down + r]) * 5;\n      shade = shade \u003c 0.35 ? 0.35 : shade > 1.25 ? 1.25 : shade;\n      const li = Math.round(v * 255) * 3;\n      display.setPixel(x, y, lut[li] * shade, lut[li + 1] * shade, lut[li + 2] * shade);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.5..4, Species=0..5, Grain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the culture's colour around the wheel."},{"name":"Speed","min":0.5,"max":4,"about":"How fast the culture grows; at 2 it runs 240 steps a second."},{"name":"Species","min":0,"max":5,"about":"Walks the feed and kill rates through coral, maze, holes, spots, mitosis and worms."},{"name":"Grain","min":0,"max":1,"about":"Slows the spreading against the reaction, so every species grows finer, from fat tubes to filigree."}],"start":[0,2,0,0.06],"measures":{"motion":0.0572,"detail":0.0825,"edges":0.3087,"complexity":2.0894,"coverage":0.7212,"colour":0.4058,"drift":0.1337},"knobResponse":[0.314,0.2095,0.2824,0.2879]},{"slug":"ripple-tank","title":"Ripple Tank","family":"sim","round":1,"note":"빗방울이 떨어진 자리마다 고리가 퍼지고 벽에 부딪혀 되돌아와 서로 겹쳐요.","idea":"Rain on a shallow tank, where every drop's ring runs into the walls and into every other ring and the panel shows where they agree.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Ripple Tank\n// Family:  sim\n// Idea:    Rain on a shallow tank, where every drop's ring runs into the walls and into every other ring and the panel shows where they agree.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rain=0.5..6, Damping=0..1, Drop=2.5..6\n//\n// Knob 1: Hue. Turns the crests round the colour wheel; the troughs stay deep blue.\n// Knob 2: Rain. Drops per second.\n// Knob 3: Damping. How long a ring keeps going; low rings on and bounces off the walls, high fades before it gets far.\n// Knob 4: Drop. Size of each drop; small drops throw fine rings, big ones a slow swell.\n\nconst W = 64;\nconst H = 128;\n// Wave speed squared, in cells per step; this stencil blows up above 0.75.\nconst C2 = 0.55;\nconst NU = 0.008;\nconst DEPTH = 2.5;\nconst STEPS_PER_SECOND = 64;\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nfunction rand(params) {\n  let s = params.seed | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.seed = s;\n  return (s >>> 0) / 4294967296;\n}\n\nfunction drop(params, size) {\n  const cx = 4 + rand(params) * (W - 8);\n  const cy = 4 + rand(params) * (H - 8);\n  const r = Math.ceil(size * 3);\n  // Big drops hold more water, so each one falls a little shallower.\n  const depth = DEPTH * 2.5 / size;\n  const u = params.u;\n  const p = params.p;\n  // A dimple with a raised lip round it. The two hold the same water, so a\n  // drop adds no level to the tank and leaves no slow wake behind its ring.\n  for (let y = Math.max(0, Math.floor(cy - r)); y \u003c= Math.min(H - 1, cy + r); y++) {\n    for (let x = Math.max(0, Math.floor(cx - r)); x \u003c= Math.min(W - 1, cx + r); x++) {\n      const dx = (x - cx) / size;\n      const dy = (y - cy) / size;\n      const d2 = dx * dx + dy * dy;\n      if (d2 > 9) continue;\n      const v = depth * (1 - d2) * Math.exp(-d2);\n      u[y * W + x] -= v;\n      p[y * W + x] -= v;\n    }\n  }\n}\n\nfunction step(params, damp) {\n  const u = params.u;\n  const p = params.p;\n  // p is overwritten with the next state, then the two swap.\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const row = y * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      // The walls mirror the cell beside them, so rings bounce back whole.\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      const i = row + x;\n      const c = u[i];\n      const sides = u[up + x] + u[down + x] + u[row + l] + u[row + r];\n      const corners = u[up + l] + u[up + r] + u[down + l] + u[down + r];\n      // The nine-point Laplacian keeps rings round instead of square.\n      const lap = (4 * sides + corners - 20 * c) / 6;\n      // Viscosity: ripples finer than a few cells die first, so the grid's\n      // own chequered wake never builds up.\n      const was = p[i];\n      const blur = sides - (p[up + x] + p[down + x] + p[row + l] + p[row + r]) - 4 * (c - was);\n      p[i] = (2 * c - was + C2 * lap + NU * blur) * damp;\n    }\n  }\n  params.u = p;\n  params.p = u;\n}\n\nexport function setup(params) {\n  params.u = new Float32Array(W * H);\n  params.p = new Float32Array(W * H);\n  params.lut = new Uint8Array(512 * 3);\n  params.lutHue = -1;\n  params.seed = 0x5bd1e995;\n  params.pending = 0;\n  params.next = 0.1;\n  params.clock = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 2.5];\n  params.hue = k[0];\n  const rain = k[1];\n  // Decay per second, from about three seconds of ringing down to a quarter of one.\n  const gamma = 0.33 * Math.pow(12, Math.max(0, Math.min(1, k[2])));\n  const size = k[3];\n\n  params.clock += dt;\n  while (params.clock >= params.next) {\n    drop(params, size);\n    // Irregular, but never a long dry spell.\n    params.next += (0.35 + rand(params) * 1.3) / Math.max(0.1, rain);\n  }\n\n  params.pending += dt * STEPS_PER_SECOND;\n  let steps = Math.floor(params.pending);\n  params.pending -= steps;\n  if (steps > 8) steps = 8;\n  const damp = Math.exp(-gamma / STEPS_PER_SECOND);\n  for (let s = 0; s \u003c steps; s++) step(params, damp);\n}\n\nexport function draw(display, params, time) {\n  // One table for troughs (first half) and crests (second half). Troughs\n  // stay blue at every hue: a dim orange trough would read as brown.\n  if (params.lutHue !== params.hue) {\n    params.lutHue = params.hue;\n    const lut = params.lut;\n    for (let i = 0; i \u003c 512; i++) {\n      const t = Math.abs(i - 255.5) / 255.5;\n      // Rings lose height fast as they spread, so the brightness curve lifts\n      // the low end, and the faintest ripples still sink into the dark.\n      const e = Math.pow(Math.max(0, (t - 0.1) / 0.9), 0.6);\n      const c = i > 255\n        ? hsv(params.hue + 0.52 - t * 0.04, 0.9 - t * t * 0.6, e)\n        : hsv(0.64, 0.95, e * 0.5);\n      lut[i * 3] = c[0];\n      lut[i * 3 + 1] = c[1];\n      lut[i * 3 + 2] = c[2];\n    }\n  }\n  const u = params.u;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      let v = u[y * W + x] * 14;\n      v = v \u003c -1 ? -1 : v > 1 ? 1 : v;\n      const li = Math.round(255.5 + v * 255.5) * 3;\n      display.setPixel(x, y, lut[li], lut[li + 1], lut[li + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-ripple-tank","type":"code","name":"ripple-tank","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Ripple Tank\n// Family:  sim\n// Idea:    Rain on a shallow tank, where every drop's ring runs into the walls and into every other ring and the panel shows where they agree.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Rain=0.5..6, Damping=0..1, Drop=2.5..6\n//\n// Knob 1: Hue. Turns the crests round the colour wheel; the troughs stay deep blue.\n// Knob 2: Rain. Drops per second.\n// Knob 3: Damping. How long a ring keeps going; low rings on and bounces off the walls, high fades before it gets far.\n// Knob 4: Drop. Size of each drop; small drops throw fine rings, big ones a slow swell.\n\nconst W = 64;\nconst H = 128;\n// Wave speed squared, in cells per step; this stencil blows up above 0.75.\nconst C2 = 0.55;\nconst NU = 0.008;\nconst DEPTH = 2.5;\nconst STEPS_PER_SECOND = 64;\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nfunction rand(params) {\n  let s = params.seed | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.seed = s;\n  return (s >>> 0) / 4294967296;\n}\n\nfunction drop(params, size) {\n  const cx = 4 + rand(params) * (W - 8);\n  const cy = 4 + rand(params) * (H - 8);\n  const r = Math.ceil(size * 3);\n  // Big drops hold more water, so each one falls a little shallower.\n  const depth = DEPTH * 2.5 / size;\n  const u = params.u;\n  const p = params.p;\n  // A dimple with a raised lip round it. The two hold the same water, so a\n  // drop adds no level to the tank and leaves no slow wake behind its ring.\n  for (let y = Math.max(0, Math.floor(cy - r)); y \u003c= Math.min(H - 1, cy + r); y++) {\n    for (let x = Math.max(0, Math.floor(cx - r)); x \u003c= Math.min(W - 1, cx + r); x++) {\n      const dx = (x - cx) / size;\n      const dy = (y - cy) / size;\n      const d2 = dx * dx + dy * dy;\n      if (d2 > 9) continue;\n      const v = depth * (1 - d2) * Math.exp(-d2);\n      u[y * W + x] -= v;\n      p[y * W + x] -= v;\n    }\n  }\n}\n\nfunction step(params, damp) {\n  const u = params.u;\n  const p = params.p;\n  // p is overwritten with the next state, then the two swap.\n  for (let y = 0; y \u003c H; y++) {\n    const up = (y === 0 ? 0 : y - 1) * W;\n    const row = y * W;\n    const down = (y === H - 1 ? H - 1 : y + 1) * W;\n    for (let x = 0; x \u003c W; x++) {\n      // The walls mirror the cell beside them, so rings bounce back whole.\n      const l = x === 0 ? 0 : x - 1;\n      const r = x === W - 1 ? W - 1 : x + 1;\n      const i = row + x;\n      const c = u[i];\n      const sides = u[up + x] + u[down + x] + u[row + l] + u[row + r];\n      const corners = u[up + l] + u[up + r] + u[down + l] + u[down + r];\n      // The nine-point Laplacian keeps rings round instead of square.\n      const lap = (4 * sides + corners - 20 * c) / 6;\n      // Viscosity: ripples finer than a few cells die first, so the grid's\n      // own chequered wake never builds up.\n      const was = p[i];\n      const blur = sides - (p[up + x] + p[down + x] + p[row + l] + p[row + r]) - 4 * (c - was);\n      p[i] = (2 * c - was + C2 * lap + NU * blur) * damp;\n    }\n  }\n  params.u = p;\n  params.p = u;\n}\n\nexport function setup(params) {\n  params.u = new Float32Array(W * H);\n  params.p = new Float32Array(W * H);\n  params.lut = new Uint8Array(512 * 3);\n  params.lutHue = -1;\n  params.seed = 0x5bd1e995;\n  params.pending = 0;\n  params.next = 0.1;\n  params.clock = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 2.5];\n  params.hue = k[0];\n  const rain = k[1];\n  // Decay per second, from about three seconds of ringing down to a quarter of one.\n  const gamma = 0.33 * Math.pow(12, Math.max(0, Math.min(1, k[2])));\n  const size = k[3];\n\n  params.clock += dt;\n  while (params.clock >= params.next) {\n    drop(params, size);\n    // Irregular, but never a long dry spell.\n    params.next += (0.35 + rand(params) * 1.3) / Math.max(0.1, rain);\n  }\n\n  params.pending += dt * STEPS_PER_SECOND;\n  let steps = Math.floor(params.pending);\n  params.pending -= steps;\n  if (steps > 8) steps = 8;\n  const damp = Math.exp(-gamma / STEPS_PER_SECOND);\n  for (let s = 0; s \u003c steps; s++) step(params, damp);\n}\n\nexport function draw(display, params, time) {\n  // One table for troughs (first half) and crests (second half). Troughs\n  // stay blue at every hue: a dim orange trough would read as brown.\n  if (params.lutHue !== params.hue) {\n    params.lutHue = params.hue;\n    const lut = params.lut;\n    for (let i = 0; i \u003c 512; i++) {\n      const t = Math.abs(i - 255.5) / 255.5;\n      // Rings lose height fast as they spread, so the brightness curve lifts\n      // the low end, and the faintest ripples still sink into the dark.\n      const e = Math.pow(Math.max(0, (t - 0.1) / 0.9), 0.6);\n      const c = i > 255\n        ? hsv(params.hue + 0.52 - t * 0.04, 0.9 - t * t * 0.6, e)\n        : hsv(0.64, 0.95, e * 0.5);\n      lut[i * 3] = c[0];\n      lut[i * 3 + 1] = c[1];\n      lut[i * 3 + 2] = c[2];\n    }\n  }\n  const u = params.u;\n  const lut = params.lut;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      let v = u[y * W + x] * 14;\n      v = v \u003c -1 ? -1 : v > 1 ? 1 : v;\n      const li = Math.round(255.5 + v * 255.5) * 3;\n      display.setPixel(x, y, lut[li], lut[li + 1], lut[li + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Rain=0.5..6, Damping=0..1, Drop=2.5..6","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the crests round the colour wheel; the troughs stay deep blue."},{"name":"Rain","min":0.5,"max":6,"about":"Drops per second."},{"name":"Damping","min":0,"max":1,"about":"How long a ring keeps going; low rings on and bounces off the walls, high fades before it gets far."},{"name":"Drop","min":2.5,"max":6,"about":"Size of each drop; small drops throw fine rings, big ones a slow swell."}],"start":[0,2,0,2.5],"measures":{"motion":4.7512,"detail":0.0907,"edges":0.3794,"complexity":1.2184,"coverage":0.4445,"colour":0.2076,"drift":0.234},"knobResponse":[0.0799,0.2629,0.1082,0.1339]},{"slug":"rule-scroll","title":"Rule Scroll","family":"automata","round":1,"note":"64칸 한 줄이 이웃을 보고 다음 줄을 써 내려가요. 8비트 숫자 하나가 삼각형이 될지 잡음이 될지 정해요.","idea":"A row of 64 cells looks at its neighbours and writes the next row under itself, and one eight-bit number decides whether the rows grow into nested triangles or into noise.","buttons":"K1 tap starts again from a single cell.","code":"// ===== Patternflow pattern =====\n// Title:   Rule Scroll\n// Family:  automata\n// Idea:    A row of 64 cells looks at its neighbours and writes the next row under itself, and one eight-bit number decides whether the rows grow into nested triangles or into noise.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Rule=0..11, Noise=0..1\n//\n// Knob 1: Hue. Turns the colours around the colour wheel; each colour stands for the three cells a cell was born from.\n// Knob 2: Speed. Generations per second, from 3 to 24, one row each.\n// Knob 3: Rule. Walks the rules 30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62 and 126.\n// Knob 4: Noise. Random flips each generation, which show as white sparks and break ordered rules open.\n// Buttons: K1 tap starts again from a single cell.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nconst W = 64;\nconst H = 128;\nconst RULES = [30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62, 126];\n// Hue offset, saturation and brightness for each neighbourhood, left centre\n// right as three bits, then one more for a cell the noise flipped. The two\n// uniform ones, 000 and 111, are a rule's ground and stay dim, so the\n// structure carries the light.\nconst LOOK = [\n  [0.5, 0.85, 0.3],\n  [-0.06, 0.9, 1.0],\n  [0.0, 0.9, 0.75],\n  [-0.03, 0.85, 0.85],\n  [0.06, 0.9, 1.0],\n  [0.5, 0.75, 1.0],\n  [0.03, 0.85, 0.85],\n  [0.0, 0.7, 0.35],\n  [0.0, 0.0, 1.0],\n];\n\nfunction rand(params) {\n  let s = params.rng | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.rng = s;\n  return (s >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.rows = new Uint8Array(W * H);\n  params.cur = new Uint8Array(W);\n  params.nxt = new Uint8Array(W);\n  // The last eight rows, each packed into two 32-bit words.\n  params.histLo = new Int32Array(8);\n  params.histHi = new Int32Array(8);\n  params.histAt = 0;\n  params.palette = new Float32Array(LOOK.length * 3);\n  params.rng = (Math.random() * 4294967295) | 1;\n  params.head = 0;\n  params.acc = 0;\n  params.gen = 0;\n  params.repeats = 0;\n  params.started = false;\n}\n\nfunction restart(params, rule) {\n  params.cur.fill(0);\n  params.cur[W >> 1] = 1;\n  params.rows.fill(0);\n  // Fill the panel before the first frame, so it opens on the whole cone.\n  for (let i = 0; i \u003c H - 1; i++) step(params, rule, 0);\n}\n\nfunction step(params, rule, noise) {\n  const cur = params.cur;\n  const nxt = params.nxt;\n  params.head = (params.head + 1) % H;\n  const row = params.head * W;\n  let lit = 0;\n  for (let x = 0; x \u003c W; x++) {\n    const n = (cur[(x + W - 1) % W] \u003c\u003c 2) | (cur[x] \u003c\u003c 1) | cur[(x + 1) % W];\n    const v = (rule >> n) & 1;\n    nxt[x] = v;\n    params.rows[row + x] = v ? 1 + n : 0;\n    lit += v;\n  }\n  // Noise is the mean number of flips per generation; the fraction is a chance.\n  let flips = Math.floor(noise);\n  if (rand(params) \u003c noise - flips) flips++;\n  for (let f = 0; f \u003c flips; f++) {\n    const x = Math.floor(rand(params) * W);\n    nxt[x] ^= 1;\n    lit += nxt[x] ? 1 : -1;\n    params.rows[row + x] = nxt[x] ? 9 : 0;\n  }\n  // A row that is all one state, or repeats one of the last eight, has\n  // nothing left to show: one flipped cell starts it moving again. On a ring\n  // of 64 rule 54 settles into a lattice of period four after 34 generations\n  // and rule 62 into one of period three; a flip there sets gliders running.\n  let lo = 0;\n  let hi = 0;\n  for (let x = 0; x \u003c 32; x++) {\n    lo |= nxt[x] \u003c\u003c x;\n    hi |= nxt[x + 32] \u003c\u003c x;\n  }\n  let same = false;\n  for (let i = 0; i \u003c 8 && !same; i++) if (params.histLo[i] === lo && params.histHi[i] === hi) same = true;\n  params.histLo[params.histAt] = lo;\n  params.histHi[params.histAt] = hi;\n  params.histAt = (params.histAt + 1) & 7;\n  params.repeats = same ? params.repeats + 1 : 0;\n  if (lit === 0 || lit === W || params.repeats > 24) {\n    const x = Math.floor(rand(params) * W);\n    nxt[x] ^= 1;\n    params.rows[row + x] = nxt[x] ? 9 : 0;\n    params.repeats = 0;\n  }\n  params.cur = nxt;\n  params.nxt = cur;\n  params.gen++;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // K1 at 0 opens on green rather than the red most of the study opens on.\n  params.hue = k[0] + 0.3;\n  const rate = 3 * Math.pow(2, 0.75 * k[1]);\n  const rule = RULES[Math.max(0, Math.min(RULES.length - 1, Math.round(k[2])))];\n  const noise = 5 * k[3] * k[3];\n  if (!params.started || (input.btnPressed && input.btnPressed[0])) {\n    restart(params, rule);\n    params.started = true;\n  }\n  params.acc += dt * rate;\n  let steps = 0;\n  while (params.acc >= 1 && steps \u003c 4) {\n    step(params, rule, noise);\n    params.acc -= 1;\n    steps++;\n  }\n  if (params.acc > 1) params.acc = 1;\n  // The colours drift slowly with the generations, one turn in about 2500.\n  const drift = params.gen * 0.0004;\n  for (let i = 0; i \u003c LOOK.length; i++) {\n    const c = hsv(params.hue + drift + LOOK[i][0], LOOK[i][1], LOOK[i][2]);\n    params.palette[i * 3] = c[0];\n    params.palette[i * 3 + 1] = c[1];\n    params.palette[i * 3 + 2] = c[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const pal = params.palette;\n  for (let y = 0; y \u003c H; y++) {\n    // The newest row is at the bottom; older rows dim a little as they rise.\n    const ring = (params.head - (H - 1 - y) + H * 2) % H;\n    const fade = 0.55 + 0.45 * (y / (H - 1));\n    const row = ring * W;\n    for (let x = 0; x \u003c W; x++) {\n      const v = params.rows[row + x];\n      if (v === 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const c = (v - 1) * 3;\n      display.setPixel(x, y, pal[c] * fade, pal[c + 1] * fade, pal[c + 2] * fade);\n    }\n  }\n}\n","layer":{"id":"layer-rule-scroll","type":"code","name":"rule-scroll","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Rule Scroll\n// Family:  automata\n// Idea:    A row of 64 cells looks at its neighbours and writes the next row under itself, and one eight-bit number decides whether the rows grow into nested triangles or into noise.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..4, Rule=0..11, Noise=0..1\n//\n// Knob 1: Hue. Turns the colours around the colour wheel; each colour stands for the three cells a cell was born from.\n// Knob 2: Speed. Generations per second, from 3 to 24, one row each.\n// Knob 3: Rule. Walks the rules 30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62 and 126.\n// Knob 4: Noise. Random flips each generation, which show as white sparks and break ordered rules open.\n// Buttons: K1 tap starts again from a single cell.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nconst W = 64;\nconst H = 128;\nconst RULES = [30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62, 126];\n// Hue offset, saturation and brightness for each neighbourhood, left centre\n// right as three bits, then one more for a cell the noise flipped. The two\n// uniform ones, 000 and 111, are a rule's ground and stay dim, so the\n// structure carries the light.\nconst LOOK = [\n  [0.5, 0.85, 0.3],\n  [-0.06, 0.9, 1.0],\n  [0.0, 0.9, 0.75],\n  [-0.03, 0.85, 0.85],\n  [0.06, 0.9, 1.0],\n  [0.5, 0.75, 1.0],\n  [0.03, 0.85, 0.85],\n  [0.0, 0.7, 0.35],\n  [0.0, 0.0, 1.0],\n];\n\nfunction rand(params) {\n  let s = params.rng | 0;\n  s ^= s \u003c\u003c 13;\n  s ^= s >>> 17;\n  s ^= s \u003c\u003c 5;\n  params.rng = s;\n  return (s >>> 0) / 4294967296;\n}\n\nexport function setup(params) {\n  params.rows = new Uint8Array(W * H);\n  params.cur = new Uint8Array(W);\n  params.nxt = new Uint8Array(W);\n  // The last eight rows, each packed into two 32-bit words.\n  params.histLo = new Int32Array(8);\n  params.histHi = new Int32Array(8);\n  params.histAt = 0;\n  params.palette = new Float32Array(LOOK.length * 3);\n  params.rng = (Math.random() * 4294967295) | 1;\n  params.head = 0;\n  params.acc = 0;\n  params.gen = 0;\n  params.repeats = 0;\n  params.started = false;\n}\n\nfunction restart(params, rule) {\n  params.cur.fill(0);\n  params.cur[W >> 1] = 1;\n  params.rows.fill(0);\n  // Fill the panel before the first frame, so it opens on the whole cone.\n  for (let i = 0; i \u003c H - 1; i++) step(params, rule, 0);\n}\n\nfunction step(params, rule, noise) {\n  const cur = params.cur;\n  const nxt = params.nxt;\n  params.head = (params.head + 1) % H;\n  const row = params.head * W;\n  let lit = 0;\n  for (let x = 0; x \u003c W; x++) {\n    const n = (cur[(x + W - 1) % W] \u003c\u003c 2) | (cur[x] \u003c\u003c 1) | cur[(x + 1) % W];\n    const v = (rule >> n) & 1;\n    nxt[x] = v;\n    params.rows[row + x] = v ? 1 + n : 0;\n    lit += v;\n  }\n  // Noise is the mean number of flips per generation; the fraction is a chance.\n  let flips = Math.floor(noise);\n  if (rand(params) \u003c noise - flips) flips++;\n  for (let f = 0; f \u003c flips; f++) {\n    const x = Math.floor(rand(params) * W);\n    nxt[x] ^= 1;\n    lit += nxt[x] ? 1 : -1;\n    params.rows[row + x] = nxt[x] ? 9 : 0;\n  }\n  // A row that is all one state, or repeats one of the last eight, has\n  // nothing left to show: one flipped cell starts it moving again. On a ring\n  // of 64 rule 54 settles into a lattice of period four after 34 generations\n  // and rule 62 into one of period three; a flip there sets gliders running.\n  let lo = 0;\n  let hi = 0;\n  for (let x = 0; x \u003c 32; x++) {\n    lo |= nxt[x] \u003c\u003c x;\n    hi |= nxt[x + 32] \u003c\u003c x;\n  }\n  let same = false;\n  for (let i = 0; i \u003c 8 && !same; i++) if (params.histLo[i] === lo && params.histHi[i] === hi) same = true;\n  params.histLo[params.histAt] = lo;\n  params.histHi[params.histAt] = hi;\n  params.histAt = (params.histAt + 1) & 7;\n  params.repeats = same ? params.repeats + 1 : 0;\n  if (lit === 0 || lit === W || params.repeats > 24) {\n    const x = Math.floor(rand(params) * W);\n    nxt[x] ^= 1;\n    params.rows[row + x] = nxt[x] ? 9 : 0;\n    params.repeats = 0;\n  }\n  params.cur = nxt;\n  params.nxt = cur;\n  params.gen++;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // K1 at 0 opens on green rather than the red most of the study opens on.\n  params.hue = k[0] + 0.3;\n  const rate = 3 * Math.pow(2, 0.75 * k[1]);\n  const rule = RULES[Math.max(0, Math.min(RULES.length - 1, Math.round(k[2])))];\n  const noise = 5 * k[3] * k[3];\n  if (!params.started || (input.btnPressed && input.btnPressed[0])) {\n    restart(params, rule);\n    params.started = true;\n  }\n  params.acc += dt * rate;\n  let steps = 0;\n  while (params.acc >= 1 && steps \u003c 4) {\n    step(params, rule, noise);\n    params.acc -= 1;\n    steps++;\n  }\n  if (params.acc > 1) params.acc = 1;\n  // The colours drift slowly with the generations, one turn in about 2500.\n  const drift = params.gen * 0.0004;\n  for (let i = 0; i \u003c LOOK.length; i++) {\n    const c = hsv(params.hue + drift + LOOK[i][0], LOOK[i][1], LOOK[i][2]);\n    params.palette[i * 3] = c[0];\n    params.palette[i * 3 + 1] = c[1];\n    params.palette[i * 3 + 2] = c[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const pal = params.palette;\n  for (let y = 0; y \u003c H; y++) {\n    // The newest row is at the bottom; older rows dim a little as they rise.\n    const ring = (params.head - (H - 1 - y) + H * 2) % H;\n    const fade = 0.55 + 0.45 * (y / (H - 1));\n    const row = ring * W;\n    for (let x = 0; x \u003c W; x++) {\n      const v = params.rows[row + x];\n      if (v === 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const c = (v - 1) * 3;\n      display.setPixel(x, y, pal[c] * fade, pal[c + 1] * fade, pal[c + 2] * fade);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0..4, Rule=0..11, Noise=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the colours around the colour wheel; each colour stands for the three cells a cell was born from."},{"name":"Speed","min":0,"max":4,"about":"Generations per second, from 3 to 24, one row each."},{"name":"Rule","min":0,"max":11,"about":"Walks the rules 30, 45, 73, 90, 105, 110, 150, 182, 54, 18, 62 and 126."},{"name":"Noise","min":0,"max":1,"about":"Random flips each generation, which show as white sparks and break ordered rules open."}],"start":[0,2,0,0.06],"measures":{"motion":3.3184,"detail":0.3747,"edges":0.8011,"complexity":0.6155,"coverage":0.494,"colour":0.4373,"drift":0.0401},"knobResponse":[0.2576,0.1939,0.2319,0.0376]},{"slug":"sandpile","title":"Sandpile","family":"automata","round":21,"note":"한 칸에 모래알이 넷 모이면 이웃 넷에 하나씩 넘기는 쟁반에 모래가 한 줌씩 떨어져요. 사태가 떨어진 자리에서 빛나는 고리로 번지며 네 색 레이스를 다시 쓰고, 쟁반이 다 차면 기울어 모래를 쏟아요.","idea":"Handfuls of sand fall on a tray where any cell holding four grains topples one to each neighbour, each avalanche runs out from the drop point as a bright ring and leaves the four-colour lace of the pile rewritten behind it, and when the pile has filled the tall tray it tips and pours off.","buttons":"K1 tap tips the tray now.","code":"// ===== Patternflow pattern =====\n// Title:   Sandpile\n// Family:  automata\n// Idea:    Handfuls of sand fall on a tray where any cell holding four grains topples one to each neighbour, each avalanche runs out from the drop point as a bright ring and leaves the four-colour lace of the pile rewritten behind it, and when the pile has filled the tall tray it tips and pours off.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the Bak-Tang-Wiesenfeld abelian sandpile (1987)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..4, Speed=0.2..3, Sources=1..5, Scatter=0..1\n//\n// Knob 1: Palette. The four colours of 0, 1, 2 and 3 grains, each a shade deeper by the drop points than out at the rim: dune sand on indigo, glacier, moss, embers, neon.\n// Knob 2: Speed. Grains per second, 300 at 0.2 up to 4500 at 3; at 2 a handful of 1800 lands every 0.6 s and its ring takes half a second to cross the pile.\n// Knob 3: Sources. How many drop points the sand falls on: one in the middle, two stacked, a triangle, a square, a square with a centre.\n// Knob 4: Scatter. How wide each handful spreads as it lands: near 0 every grain hits the drop point and the pile keeps its mirror symmetry; towards 1 the grains land over a patch some forty cells across, the lace grows ragged and stray grains speckle the bare tray.\n// Buttons: K1 tap tips the tray now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sandpile lives on a grid one cell wider all round. The border cells\n// are the sinks: they start so far below zero that no number of grains\n// makes them topple, so grains pushed over the edge are simply gone.\nconst WP = W + 2;\nconst NP = WP * (H + 2);\nconst SINK = -(1 \u003c\u003c 30);\nconst { min, max, floor, round, sqrt, log2, exp, sin, cos, PI } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst at = (x, y) => (y + 1) * WP + x + 1;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Drop points for each Sources setting, as the centre of a 2x2 block of\n// cells, so every plan is mirror symmetric about the middle of the panel.\nconst POINTS = [\n  [[31.5, 63.5]],\n  [[31.5, 40.5], [31.5, 86.5]],\n  [[31.5, 33.5], [16.5, 91.5], [46.5, 91.5]],\n  [[17.5, 38.5], [45.5, 38.5], [17.5, 88.5], [45.5, 88.5]],\n  [[15.5, 33.5], [47.5, 33.5], [31.5, 63.5], [15.5, 93.5], [47.5, 93.5]],\n];\n\n// Each palette: 0, 1, 2 and 3 grains by the drop points, the same out at\n// the rim, the bare tray, and the glow of toppling. The study reads a cell by\n// its brightest channel, and most neighbours in a pile are a 3 beside a 2,\n// so 3 is the bright one and 2 the dark one, and the rim colours keep each\n// level's brightness while the hue drifts.\nconst PALS = [\n  [\n    [[10, 8, 20], [20, 128, 118], [14, 22, 62], [255, 198, 104]],\n    [[12, 8, 22], [54, 96, 150], [36, 16, 60], [255, 234, 200]],\n    [4, 5, 10],\n    [255, 236, 190],\n  ],\n  [\n    [[4, 8, 16], [30, 110, 150], [34, 20, 70], [170, 236, 255]],\n    [[4, 8, 16], [70, 90, 170], [20, 30, 72], [236, 246, 255]],\n    [2, 5, 9],\n    [200, 255, 255],\n  ],\n  [\n    [[6, 10, 4], [130, 112, 20], [14, 46, 26], [170, 255, 90]],\n    [[6, 10, 4], [96, 130, 30], [40, 40, 16], [230, 255, 160]],\n    [3, 5, 2],\n    [240, 255, 200],\n  ],\n  [\n    [[12, 3, 4], [176, 42, 26], [62, 12, 44], [255, 170, 40]],\n    [[12, 3, 6], [190, 30, 70], [40, 10, 60], [255, 214, 120]],\n    [6, 2, 2],\n    [255, 230, 170],\n  ],\n  [\n    [[6, 0, 12], [0, 148, 170], [54, 0, 92], [255, 110, 210]],\n    [[8, 0, 12], [40, 120, 200], [80, 0, 70], [255, 170, 250]],\n    [3, 0, 6],\n    [255, 220, 255],\n  ],\n];\n\nconst [GROW, HOLD, TILT] = [0, 1, 2];\n// A ripple runs out at this many cells a second; the glow trails it by about\n// RING cells.\nconst RIP = 150;\nconst RING = 5;\n\nexport function setup(params) {\n  const P = params;\n  P.z = new Int32Array(NP);\n  P.heat = new Int32Array(NP);\n  // Cells waiting to topple. A cell goes on when it reaches four grains and\n  // comes off when it topples, so it is never on twice.\n  P.st = new Int32Array(NP);\n  P.sp = 0;\n  // Mirror lines: bit 1 sends a cell's right-hand grain back to itself, bit\n  // 2 its downward one.\n  P.mir = new Uint8Array(NP);\n  P.mode = 0;\n  // What the panel shows: the pile before the running ripple and after it,\n  // each cell as its grains plus 4 once sand has reached it.\n  P.reach = new Uint8Array(N);\n  P.cur = new Uint8Array(N);\n  P.tgt = new Uint8Array(N);\n  P.amp = new Float32Array(N);\n  P.dist = new Float32Array(N);\n  P.tone = new Float32Array(N);\n  P.toneKey = \"\";\n  P.col = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) P.col[x] = rnd();\n  P.started = false;\n  P.phase = GROW;\n  P.pt = 0;\n  P.wait = 0;\n  P.full = 0;\n  P.shift = 0;\n  clear(P);\n}\n\nfunction clear(P) {\n  const z = P.z;\n  z.fill(SINK);\n  for (let y = 0; y \u003c H; y++) z.fill(0, at(0, y), at(0, y) + W);\n  P.heat.fill(0);\n  P.sp = 0;\n  P.reach.fill(0);\n  P.cur.fill(0);\n  P.tgt.fill(0);\n  P.rip = -1;\n  P.next = null;\n  P.symX = true;\n  P.symY = true;\n  P.edge = -1;\n}\n\n// Where the drop points sit this cycle: the first cycle uses the plan as it\n// stands, later ones slide it up or down the tray.\nfunction points(P, n) {\n  return POINTS[n - 1].map(([x, y]) => [x, clamp(y + P.shift, 9.5, H - 10.5)]);\n}\n\n// While the pile is mirror symmetric, only the top left quarter (or the left\n// half) is worked out and then unfolded: a cell on a mirror line topples one\n// grain back onto itself. It is the same pile for a quarter of the work.\nfunction setMode(P, m) {\n  if (m === P.mode) return;\n  P.mode = m;\n  P.mir.fill(0);\n  if (m & 1) for (let y = 0; y \u003c H; y++) P.mir[at(W / 2 - 1, y)] |= 1;\n  if (m & 2) for (let x = 0; x \u003c W; x++) P.mir[at(x, H / 2 - 1)] |= 2;\n}\n\nfunction unfold(P) {\n  const { z, heat, mode } = P;\n  if (mode & 1)\n    for (let y = 0; y \u003c H; y++)\n      for (let x = W / 2; x \u003c W; x++) (z[at(x, y)] = z[at(W - 1 - x, y)]), (heat[at(x, y)] = heat[at(W - 1 - x, y)]);\n  if (mode & 2) {\n    for (let y = H / 2; y \u003c H; y++) {\n      z.copyWithin(at(-1, y), at(-1, H - 1 - y), at(-1, H - y));\n      heat.copyWithin(at(-1, y), at(-1, H - 1 - y), at(-1, H - y));\n    }\n  }\n}\n\nfunction add(P, p, g) {\n  const o = P.z[p];\n  P.z[p] = o + g;\n  if (o \u003c 4 && o + g > 3) P.st[P.sp++] = p;\n}\n\n// One handful shared by every drop point: on each point's 2x2 block, or\n// strewn round it with Scatter.\nfunction pour(P, pts, g, spread) {\n  if (spread \u003c= 0) {\n    const share = max(1, floor(g / 4 / pts.length));\n    for (const [cx, cy] of pts)\n      for (let i = 0; i \u003c 4; i++) {\n        const x = floor(cx) + (i & 1);\n        const y = floor(cy) + (i >> 1);\n        if (!((P.mode & 1 && x >= W / 2) || (P.mode & 2 && y >= H / 2))) add(P, at(x, y), share);\n      }\n    return;\n  }\n  for (let i = 0; i \u003c g; i++) {\n    const [cx, cy] = pts[i % pts.length];\n    const a = rnd() * 2 * PI;\n    const d = spread * sqrt(-2 * Math.log(1 - rnd() * 0.999));\n    const x = round(cx + cos(a) * d);\n    const y = round(cy + sin(a) * d);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) add(P, at(x, y), 1);\n  }\n}\n\n// Topple until stable or out of budget. A cell with 4k grains or more\n// topples k times at once. Working from the top of the stack keeps the\n// avalanche local, which is the fastest order on this grid.\nfunction settle(P, cap) {\n  const { z, st, heat, mir } = P;\n  let sp = P.sp;\n  let ops = 0;\n  while (sp > 0 && ops \u003c cap) {\n    const p = st[--sp];\n    const v = z[p];\n    const k = v >> 2;\n    const m = mir[p];\n    z[p] = v & 3;\n    heat[p] += k;\n    ops++;\n    let n, o;\n    o = z[(n = p - 1)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = m & 1 ? p : p + 1)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = p - WP)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = m & 2 ? p : p + WP)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n  }\n  P.sp = sp;\n  if (sp) return false;\n  unfold(P);\n  return true;\n}\n\n// The settled pile as the panel shows it, and how much of the tray it covers.\nfunction snapshot(P, out) {\n  const { z, heat, reach } = P;\n  let n = 0;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, s = at(0, y); x \u003c W; x++, p++, s++) {\n      if (z[s] || heat[s]) reach[p] = 1;\n      out[p] = reach[p] ? 4 + z[s] : 0;\n      n += reach[p];\n    }\n  return n / N;\n}\n\n// Choose the mirror work for the next handful. Every plan is symmetric left\n// to right; Scatter breaks both mirrors until the tray is emptied, and a plan\n// off the middle row breaks the top-bottom one.\nfunction plan(P, spread) {\n  if (spread > 0) P.symX = P.symY = false;\n  if (P.shift || P.n === 3) P.symY = false;\n  setMode(P, (P.symX ? 1 : 0) | (P.symY ? 2 : 0));\n  const pts = points(P, P.n);\n  // How far each cell is from the nearest drop point, for the colours.\n  if (P.toneKey !== P.n + \",\" + P.shift) {\n    P.toneKey = P.n + \",\" + P.shift;\n    for (let p = 0; p \u003c N; p++) {\n      let d = 1e9;\n      for (const [cx, cy] of pts) d = min(d, ((p & 63) - cx) ** 2 + ((p >> 6) - cy) ** 2);\n      P.tone[p] = min(1, sqrt(d) / 64);\n    }\n  }\n  return pts;\n}\n\n// Pour on every drop point together until the pile covers this much of the\n// tray, so the picture opens mid-growth whatever the knobs say.\nfunction prerun(P, cover, spread) {\n  const pts = plan(P, spread);\n  for (let i = 0; i \u003c 200; i++) {\n    pour(P, pts, 1600, spread);\n    settle(P, 1e9);\n    if (snapshot(P, P.cur) >= cover) break;\n  }\n  P.heat.fill(0);\n  P.tgt.set(P.cur);\n}\n\n// A ripple shows the handful that has settled: from the drop points outward,\n// cells take their new value and glow by how often they toppled.\nfunction startRipple(P, pts) {\n  const cov = snapshot(P, P.tgt);\n  const { heat, amp, dist, cur, tgt } = P;\n  let far = 0;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, s = at(0, y); x \u003c W; x++, p++, s++) {\n      // Cells the avalanche rewrote flash, the more the more often they\n      // toppled; sand reaching bare tray flashes brightest.\n      const h = heat[s];\n      amp[p] = tgt[p] !== cur[p] ? min(1, 0.3 + log2(1 + h) / 8 + (cur[p] ? 0 : 0.4)) : h > 0 ? 0.12 : 0;\n      let d = 1e9;\n      for (const [cx, cy] of pts) d = min(d, (x - cx) ** 2 + (y - cy) ** 2);\n      dist[p] = d = sqrt(d);\n      if (h > 0 && d > far) far = d;\n    }\n  heat.fill(0);\n  P.rip = 0;\n  P.ripMax = far + RING * 3;\n  return cov;\n}\n\n// The tray tips with whatever the panel shows on it.\nfunction tip(P) {\n  if (P.rip >= 0) P.cur.set(P.tgt);\n  P.rip = -1;\n  P.phase = TILT;\n  P.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.pal = clamp(round(k[0]), 0, 4);\n  const speed = clamp(k[1], 0.2, 3);\n  P.n = clamp(round(k[2]), 1, 5);\n  const spread = (P.spread = max(0, clamp(k[3], 0, 1) - 0.08) * 14);\n  P.speed = speed;\n  if (!P.started) {\n    P.started = true;\n    prerun(P, 0.74, spread);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== TILT) tip(P);\n\n  if (P.phase === TILT) {\n    P.pt += dt;\n    if (P.pt > 1.4) {\n      clear(P);\n      P.shift = round((rnd() - 0.5) * 40);\n      P.phase = GROW;\n      P.wait = 0;\n    }\n    return;\n  }\n\n  // Work on the next handful while the last one's ripple runs.\n  settle(P, 60000);\n  if (P.rip >= 0) {\n    P.rip += RIP * sqrt(speed / 2) * dt;\n    if (P.rip > P.ripMax) {\n      P.cur.set(P.tgt);\n      P.rip = -1;\n    }\n  }\n  P.wait -= dt;\n  if (P.edge >= 0) P.edge += (dt * speed) / 2;\n  if (P.phase === HOLD) {\n    P.full += dt;\n    if (P.full > 2) tip(P);\n    return;\n  }\n  const every = 0.6 * sqrt(2 / speed);\n  if (P.wait \u003c= 0 && P.sp === 0 && P.rip \u003c 0) {\n    // Full is the whole tray, or ten seconds after the pile first spilled\n    // off the top or bottom: drop points off the middle fill the far end\n    // slowly, since most of their sand runs off the near one.\n    if (P.next) {\n      const cov = startRipple(P, P.next);\n      if (P.edge \u003c 0 && (P.reach.subarray(0, W).includes(1) || P.reach.subarray(N - W).includes(1))) P.edge = 0;\n      if (cov > 0.985 || P.edge > 10) {\n        [P.phase, P.full] = [HOLD, 0];\n        return;\n      }\n    }\n    const pts = plan(P, spread);\n    pour(P, pts, round(1500 * speed * every), spread);\n    P.next = pts;\n    P.wait = every;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const [core, rim, bg, glow] = PALS[P.pal ?? 0];\n  const { cur, tgt, amp, dist, tone } = P;\n  const r = P.rip;\n  // Tipped, the sand slides off the bottom edge, each column at its own\n  // pace and the grains tumbling more the faster it goes.\n  const tilt = P.phase === TILT ? P.pt : 0;\n  const f = (P.f = (P.f | 0) + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let sy = y;\n      if (tilt) {\n        sy = y - floor(70 * tilt * tilt * (0.85 + 0.3 * P.col[x]) + hash(x, y + f * 61) * (1 + 5 * tilt));\n        if (sy \u003c 0) {\n          display.setPixel(x, y, bg[0], bg[1], bg[2]);\n          continue;\n        }\n      }\n      const p = sy * W + x;\n      let c = cur[p];\n      let a = 0;\n      if (r >= 0) {\n        const d = dist[p];\n        if (d \u003c r) {\n          c = tgt[p];\n          if (amp[p] > 0) a = amp[p] * exp(-(r - d) / RING) * 0.75;\n        }\n      }\n      let R = bg[0];\n      let G = bg[1];\n      let B = bg[2];\n      if (c) {\n        const u = core[c - 4];\n        const v = rim[c - 4];\n        const t = tone[p];\n        R = u[0] + (v[0] - u[0]) * t;\n        G = u[1] + (v[1] - u[1]) * t;\n        B = u[2] + (v[2] - u[2]) * t;\n      }\n      display.setPixel(x, y, R + (glow[0] - R) * a, G + (glow[1] - G) * a, B + (glow[2] - B) * a);\n    }\n  // Grains still falling on the drop points glint as they land.\n  if (P.phase !== GROW || !P.next) return;\n  for (const [cx, cy] of P.next)\n    for (let i = 0; i \u003c 1 + P.speed; i++) {\n      const a = rnd() * 2 * PI;\n      const d = 1.2 * rnd() + P.spread * sqrt(-2 * Math.log(1 - rnd() * 0.999));\n      const x = round(cx + cos(a) * d);\n      const y = round(cy + sin(a) * d);\n      const g = 0.5 + 0.5 * rnd();\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) display.setPixel(x, y, glow[0] * g, glow[1] * g, glow[2] * g);\n    }\n}\n","layer":{"id":"layer-sandpile","type":"code","name":"sandpile","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sandpile\n// Family:  automata\n// Idea:    Handfuls of sand fall on a tray where any cell holding four grains topples one to each neighbour, each avalanche runs out from the drop point as a bright ring and leaves the four-colour lace of the pile rewritten behind it, and when the pile has filled the tall tray it tips and pours off.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the Bak-Tang-Wiesenfeld abelian sandpile (1987)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..4, Speed=0.2..3, Sources=1..5, Scatter=0..1\n//\n// Knob 1: Palette. The four colours of 0, 1, 2 and 3 grains, each a shade deeper by the drop points than out at the rim: dune sand on indigo, glacier, moss, embers, neon.\n// Knob 2: Speed. Grains per second, 300 at 0.2 up to 4500 at 3; at 2 a handful of 1800 lands every 0.6 s and its ring takes half a second to cross the pile.\n// Knob 3: Sources. How many drop points the sand falls on: one in the middle, two stacked, a triangle, a square, a square with a centre.\n// Knob 4: Scatter. How wide each handful spreads as it lands: near 0 every grain hits the drop point and the pile keeps its mirror symmetry; towards 1 the grains land over a patch some forty cells across, the lace grows ragged and stray grains speckle the bare tray.\n// Buttons: K1 tap tips the tray now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sandpile lives on a grid one cell wider all round. The border cells\n// are the sinks: they start so far below zero that no number of grains\n// makes them topple, so grains pushed over the edge are simply gone.\nconst WP = W + 2;\nconst NP = WP * (H + 2);\nconst SINK = -(1 \u003c\u003c 30);\nconst { min, max, floor, round, sqrt, log2, exp, sin, cos, PI } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst at = (x, y) => (y + 1) * WP + x + 1;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Drop points for each Sources setting, as the centre of a 2x2 block of\n// cells, so every plan is mirror symmetric about the middle of the panel.\nconst POINTS = [\n  [[31.5, 63.5]],\n  [[31.5, 40.5], [31.5, 86.5]],\n  [[31.5, 33.5], [16.5, 91.5], [46.5, 91.5]],\n  [[17.5, 38.5], [45.5, 38.5], [17.5, 88.5], [45.5, 88.5]],\n  [[15.5, 33.5], [47.5, 33.5], [31.5, 63.5], [15.5, 93.5], [47.5, 93.5]],\n];\n\n// Each palette: 0, 1, 2 and 3 grains by the drop points, the same out at\n// the rim, the bare tray, and the glow of toppling. The study reads a cell by\n// its brightest channel, and most neighbours in a pile are a 3 beside a 2,\n// so 3 is the bright one and 2 the dark one, and the rim colours keep each\n// level's brightness while the hue drifts.\nconst PALS = [\n  [\n    [[10, 8, 20], [20, 128, 118], [14, 22, 62], [255, 198, 104]],\n    [[12, 8, 22], [54, 96, 150], [36, 16, 60], [255, 234, 200]],\n    [4, 5, 10],\n    [255, 236, 190],\n  ],\n  [\n    [[4, 8, 16], [30, 110, 150], [34, 20, 70], [170, 236, 255]],\n    [[4, 8, 16], [70, 90, 170], [20, 30, 72], [236, 246, 255]],\n    [2, 5, 9],\n    [200, 255, 255],\n  ],\n  [\n    [[6, 10, 4], [130, 112, 20], [14, 46, 26], [170, 255, 90]],\n    [[6, 10, 4], [96, 130, 30], [40, 40, 16], [230, 255, 160]],\n    [3, 5, 2],\n    [240, 255, 200],\n  ],\n  [\n    [[12, 3, 4], [176, 42, 26], [62, 12, 44], [255, 170, 40]],\n    [[12, 3, 6], [190, 30, 70], [40, 10, 60], [255, 214, 120]],\n    [6, 2, 2],\n    [255, 230, 170],\n  ],\n  [\n    [[6, 0, 12], [0, 148, 170], [54, 0, 92], [255, 110, 210]],\n    [[8, 0, 12], [40, 120, 200], [80, 0, 70], [255, 170, 250]],\n    [3, 0, 6],\n    [255, 220, 255],\n  ],\n];\n\nconst [GROW, HOLD, TILT] = [0, 1, 2];\n// A ripple runs out at this many cells a second; the glow trails it by about\n// RING cells.\nconst RIP = 150;\nconst RING = 5;\n\nexport function setup(params) {\n  const P = params;\n  P.z = new Int32Array(NP);\n  P.heat = new Int32Array(NP);\n  // Cells waiting to topple. A cell goes on when it reaches four grains and\n  // comes off when it topples, so it is never on twice.\n  P.st = new Int32Array(NP);\n  P.sp = 0;\n  // Mirror lines: bit 1 sends a cell's right-hand grain back to itself, bit\n  // 2 its downward one.\n  P.mir = new Uint8Array(NP);\n  P.mode = 0;\n  // What the panel shows: the pile before the running ripple and after it,\n  // each cell as its grains plus 4 once sand has reached it.\n  P.reach = new Uint8Array(N);\n  P.cur = new Uint8Array(N);\n  P.tgt = new Uint8Array(N);\n  P.amp = new Float32Array(N);\n  P.dist = new Float32Array(N);\n  P.tone = new Float32Array(N);\n  P.toneKey = \"\";\n  P.col = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) P.col[x] = rnd();\n  P.started = false;\n  P.phase = GROW;\n  P.pt = 0;\n  P.wait = 0;\n  P.full = 0;\n  P.shift = 0;\n  clear(P);\n}\n\nfunction clear(P) {\n  const z = P.z;\n  z.fill(SINK);\n  for (let y = 0; y \u003c H; y++) z.fill(0, at(0, y), at(0, y) + W);\n  P.heat.fill(0);\n  P.sp = 0;\n  P.reach.fill(0);\n  P.cur.fill(0);\n  P.tgt.fill(0);\n  P.rip = -1;\n  P.next = null;\n  P.symX = true;\n  P.symY = true;\n  P.edge = -1;\n}\n\n// Where the drop points sit this cycle: the first cycle uses the plan as it\n// stands, later ones slide it up or down the tray.\nfunction points(P, n) {\n  return POINTS[n - 1].map(([x, y]) => [x, clamp(y + P.shift, 9.5, H - 10.5)]);\n}\n\n// While the pile is mirror symmetric, only the top left quarter (or the left\n// half) is worked out and then unfolded: a cell on a mirror line topples one\n// grain back onto itself. It is the same pile for a quarter of the work.\nfunction setMode(P, m) {\n  if (m === P.mode) return;\n  P.mode = m;\n  P.mir.fill(0);\n  if (m & 1) for (let y = 0; y \u003c H; y++) P.mir[at(W / 2 - 1, y)] |= 1;\n  if (m & 2) for (let x = 0; x \u003c W; x++) P.mir[at(x, H / 2 - 1)] |= 2;\n}\n\nfunction unfold(P) {\n  const { z, heat, mode } = P;\n  if (mode & 1)\n    for (let y = 0; y \u003c H; y++)\n      for (let x = W / 2; x \u003c W; x++) (z[at(x, y)] = z[at(W - 1 - x, y)]), (heat[at(x, y)] = heat[at(W - 1 - x, y)]);\n  if (mode & 2) {\n    for (let y = H / 2; y \u003c H; y++) {\n      z.copyWithin(at(-1, y), at(-1, H - 1 - y), at(-1, H - y));\n      heat.copyWithin(at(-1, y), at(-1, H - 1 - y), at(-1, H - y));\n    }\n  }\n}\n\nfunction add(P, p, g) {\n  const o = P.z[p];\n  P.z[p] = o + g;\n  if (o \u003c 4 && o + g > 3) P.st[P.sp++] = p;\n}\n\n// One handful shared by every drop point: on each point's 2x2 block, or\n// strewn round it with Scatter.\nfunction pour(P, pts, g, spread) {\n  if (spread \u003c= 0) {\n    const share = max(1, floor(g / 4 / pts.length));\n    for (const [cx, cy] of pts)\n      for (let i = 0; i \u003c 4; i++) {\n        const x = floor(cx) + (i & 1);\n        const y = floor(cy) + (i >> 1);\n        if (!((P.mode & 1 && x >= W / 2) || (P.mode & 2 && y >= H / 2))) add(P, at(x, y), share);\n      }\n    return;\n  }\n  for (let i = 0; i \u003c g; i++) {\n    const [cx, cy] = pts[i % pts.length];\n    const a = rnd() * 2 * PI;\n    const d = spread * sqrt(-2 * Math.log(1 - rnd() * 0.999));\n    const x = round(cx + cos(a) * d);\n    const y = round(cy + sin(a) * d);\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) add(P, at(x, y), 1);\n  }\n}\n\n// Topple until stable or out of budget. A cell with 4k grains or more\n// topples k times at once. Working from the top of the stack keeps the\n// avalanche local, which is the fastest order on this grid.\nfunction settle(P, cap) {\n  const { z, st, heat, mir } = P;\n  let sp = P.sp;\n  let ops = 0;\n  while (sp > 0 && ops \u003c cap) {\n    const p = st[--sp];\n    const v = z[p];\n    const k = v >> 2;\n    const m = mir[p];\n    z[p] = v & 3;\n    heat[p] += k;\n    ops++;\n    let n, o;\n    o = z[(n = p - 1)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = m & 1 ? p : p + 1)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = p - WP)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n    o = z[(n = m & 2 ? p : p + WP)];\n    z[n] = o + k;\n    if (o \u003c 4 && o + k > 3) st[sp++] = n;\n  }\n  P.sp = sp;\n  if (sp) return false;\n  unfold(P);\n  return true;\n}\n\n// The settled pile as the panel shows it, and how much of the tray it covers.\nfunction snapshot(P, out) {\n  const { z, heat, reach } = P;\n  let n = 0;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, s = at(0, y); x \u003c W; x++, p++, s++) {\n      if (z[s] || heat[s]) reach[p] = 1;\n      out[p] = reach[p] ? 4 + z[s] : 0;\n      n += reach[p];\n    }\n  return n / N;\n}\n\n// Choose the mirror work for the next handful. Every plan is symmetric left\n// to right; Scatter breaks both mirrors until the tray is emptied, and a plan\n// off the middle row breaks the top-bottom one.\nfunction plan(P, spread) {\n  if (spread > 0) P.symX = P.symY = false;\n  if (P.shift || P.n === 3) P.symY = false;\n  setMode(P, (P.symX ? 1 : 0) | (P.symY ? 2 : 0));\n  const pts = points(P, P.n);\n  // How far each cell is from the nearest drop point, for the colours.\n  if (P.toneKey !== P.n + \",\" + P.shift) {\n    P.toneKey = P.n + \",\" + P.shift;\n    for (let p = 0; p \u003c N; p++) {\n      let d = 1e9;\n      for (const [cx, cy] of pts) d = min(d, ((p & 63) - cx) ** 2 + ((p >> 6) - cy) ** 2);\n      P.tone[p] = min(1, sqrt(d) / 64);\n    }\n  }\n  return pts;\n}\n\n// Pour on every drop point together until the pile covers this much of the\n// tray, so the picture opens mid-growth whatever the knobs say.\nfunction prerun(P, cover, spread) {\n  const pts = plan(P, spread);\n  for (let i = 0; i \u003c 200; i++) {\n    pour(P, pts, 1600, spread);\n    settle(P, 1e9);\n    if (snapshot(P, P.cur) >= cover) break;\n  }\n  P.heat.fill(0);\n  P.tgt.set(P.cur);\n}\n\n// A ripple shows the handful that has settled: from the drop points outward,\n// cells take their new value and glow by how often they toppled.\nfunction startRipple(P, pts) {\n  const cov = snapshot(P, P.tgt);\n  const { heat, amp, dist, cur, tgt } = P;\n  let far = 0;\n  for (let y = 0, p = 0; y \u003c H; y++)\n    for (let x = 0, s = at(0, y); x \u003c W; x++, p++, s++) {\n      // Cells the avalanche rewrote flash, the more the more often they\n      // toppled; sand reaching bare tray flashes brightest.\n      const h = heat[s];\n      amp[p] = tgt[p] !== cur[p] ? min(1, 0.3 + log2(1 + h) / 8 + (cur[p] ? 0 : 0.4)) : h > 0 ? 0.12 : 0;\n      let d = 1e9;\n      for (const [cx, cy] of pts) d = min(d, (x - cx) ** 2 + (y - cy) ** 2);\n      dist[p] = d = sqrt(d);\n      if (h > 0 && d > far) far = d;\n    }\n  heat.fill(0);\n  P.rip = 0;\n  P.ripMax = far + RING * 3;\n  return cov;\n}\n\n// The tray tips with whatever the panel shows on it.\nfunction tip(P) {\n  if (P.rip >= 0) P.cur.set(P.tgt);\n  P.rip = -1;\n  P.phase = TILT;\n  P.pt = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.pal = clamp(round(k[0]), 0, 4);\n  const speed = clamp(k[1], 0.2, 3);\n  P.n = clamp(round(k[2]), 1, 5);\n  const spread = (P.spread = max(0, clamp(k[3], 0, 1) - 0.08) * 14);\n  P.speed = speed;\n  if (!P.started) {\n    P.started = true;\n    prerun(P, 0.74, spread);\n  }\n  if (input.btnPressed && input.btnPressed[0] && P.phase !== TILT) tip(P);\n\n  if (P.phase === TILT) {\n    P.pt += dt;\n    if (P.pt > 1.4) {\n      clear(P);\n      P.shift = round((rnd() - 0.5) * 40);\n      P.phase = GROW;\n      P.wait = 0;\n    }\n    return;\n  }\n\n  // Work on the next handful while the last one's ripple runs.\n  settle(P, 60000);\n  if (P.rip >= 0) {\n    P.rip += RIP * sqrt(speed / 2) * dt;\n    if (P.rip > P.ripMax) {\n      P.cur.set(P.tgt);\n      P.rip = -1;\n    }\n  }\n  P.wait -= dt;\n  if (P.edge >= 0) P.edge += (dt * speed) / 2;\n  if (P.phase === HOLD) {\n    P.full += dt;\n    if (P.full > 2) tip(P);\n    return;\n  }\n  const every = 0.6 * sqrt(2 / speed);\n  if (P.wait \u003c= 0 && P.sp === 0 && P.rip \u003c 0) {\n    // Full is the whole tray, or ten seconds after the pile first spilled\n    // off the top or bottom: drop points off the middle fill the far end\n    // slowly, since most of their sand runs off the near one.\n    if (P.next) {\n      const cov = startRipple(P, P.next);\n      if (P.edge \u003c 0 && (P.reach.subarray(0, W).includes(1) || P.reach.subarray(N - W).includes(1))) P.edge = 0;\n      if (cov > 0.985 || P.edge > 10) {\n        [P.phase, P.full] = [HOLD, 0];\n        return;\n      }\n    }\n    const pts = plan(P, spread);\n    pour(P, pts, round(1500 * speed * every), spread);\n    P.next = pts;\n    P.wait = every;\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const [core, rim, bg, glow] = PALS[P.pal ?? 0];\n  const { cur, tgt, amp, dist, tone } = P;\n  const r = P.rip;\n  // Tipped, the sand slides off the bottom edge, each column at its own\n  // pace and the grains tumbling more the faster it goes.\n  const tilt = P.phase === TILT ? P.pt : 0;\n  const f = (P.f = (P.f | 0) + 1);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let sy = y;\n      if (tilt) {\n        sy = y - floor(70 * tilt * tilt * (0.85 + 0.3 * P.col[x]) + hash(x, y + f * 61) * (1 + 5 * tilt));\n        if (sy \u003c 0) {\n          display.setPixel(x, y, bg[0], bg[1], bg[2]);\n          continue;\n        }\n      }\n      const p = sy * W + x;\n      let c = cur[p];\n      let a = 0;\n      if (r >= 0) {\n        const d = dist[p];\n        if (d \u003c r) {\n          c = tgt[p];\n          if (amp[p] > 0) a = amp[p] * exp(-(r - d) / RING) * 0.75;\n        }\n      }\n      let R = bg[0];\n      let G = bg[1];\n      let B = bg[2];\n      if (c) {\n        const u = core[c - 4];\n        const v = rim[c - 4];\n        const t = tone[p];\n        R = u[0] + (v[0] - u[0]) * t;\n        G = u[1] + (v[1] - u[1]) * t;\n        B = u[2] + (v[2] - u[2]) * t;\n      }\n      display.setPixel(x, y, R + (glow[0] - R) * a, G + (glow[1] - G) * a, B + (glow[2] - B) * a);\n    }\n  // Grains still falling on the drop points glint as they land.\n  if (P.phase !== GROW || !P.next) return;\n  for (const [cx, cy] of P.next)\n    for (let i = 0; i \u003c 1 + P.speed; i++) {\n      const a = rnd() * 2 * PI;\n      const d = 1.2 * rnd() + P.spread * sqrt(-2 * Math.log(1 - rnd() * 0.999));\n      const x = round(cx + cos(a) * d);\n      const y = round(cy + sin(a) * d);\n      const g = 0.5 + 0.5 * rnd();\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) display.setPixel(x, y, glow[0] * g, glow[1] * g, glow[2] * g);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..4, Speed=0.2..3, Sources=1..5, Scatter=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":4,"about":"The four colours of 0, 1, 2 and 3 grains, each a shade deeper by the drop points than out at the rim: dune sand on indigo, glacier, moss, embers, neon."},{"name":"Speed","min":0.2,"max":3,"about":"Grains per second, 300 at 0.2 up to 4500 at 3; at 2 a handful of 1800 lands every 0.6 s and its ring takes half a second to cross the pile."},{"name":"Sources","min":1,"max":5,"about":"How many drop points the sand falls on: one in the middle, two stacked, a triangle, a square, a square with a centre."},{"name":"Scatter","min":0,"max":1,"about":"How wide each handful spreads as it lands: near 0 every grain hits the drop point and the pile keeps its mirror symmetry; towards 1 the grains land over a patch some forty cells across, the lace grows ragged and stray grains speckle the bare tray."}],"start":[0,2,1,0.06],"measures":{"motion":0.6394,"detail":0.335,"edges":0.8978,"complexity":0.6311,"coverage":0.8294,"colour":0.2844,"drift":0.1509},"knobResponse":[0.2234,0.3094,0.3442,0.2665]},{"slug":"searchlights","title":"Searchlights","family":"light","round":7,"note":"밤 도시의 지붕 뒤에서 탐조등 세 대가 가장자리가 또렷한 빛기둥을 천천히 휘둘러요. 기둥 둘이 겹친 자리는 하얗게 타고, K1 을 누르면 하늘을 가로지르는 비행기를 모든 기둥이 붙잡았다가 놓아줘요.","idea":"Searchlights behind a night skyline swing slow, hard-edged beams across the sky, and where two beams cross the light runs white.","buttons":"K1 tap sends a plane across the sky; every beam swings onto it, holds it a few seconds and lets it go.","code":"// ===== Patternflow pattern =====\n// Title:   Searchlights\n// Family:  light\n// Idea:    Searchlights behind a night skyline swing slow, hard-edged beams across the sky, and where two beams cross the light runs white.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the searchlights that sweep a city's sky over a premiere or a grand opening\n// Round:   7\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Sweep=0.2..4, Lights=3..7, Haze=0..1\n//\n// Knob 1: Hue. The tint of the lamps, starting from the cold blue-white of a xenon arc.\n// Knob 2: Sweep. How fast the beams patrol the sky: at the bottom of the range they barely drift, at the top each one crosses its arc in about six seconds.\n// Knob 3: Lights. How many searchlights stand behind the skyline; a light that joins strikes up and one that leaves fades out.\n// Knob 4: Haze. How much the air holds the light: clear at 0, each beam cut sharp against the dark; turned up, the beams grow soft halos and the city glows on the low sky.\n// Buttons: K1 tap sends a plane across the sky; every beam swings onto it, holds it a few seconds and lets it go.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 7;\n// The lamps stand at the foot of the panel, behind the buildings. Their slots\n// fill in this order, so three lights are spread across the city and each one\n// added lands between two that are already burning.\nconst SLOTS = [10, 54, 31, 21, 43, 3, 61];\nconst BASE = 126;\n// A beam is the lamp's width at the lamp and opens by this many LEDs per LED\n// it travels: three and a half degrees across, eleven LEDs wide at the top.\nconst LAMP = 1.5;\nconst SPREAD = 0.03;\n// The sweep: a triangle wave with its corners rounded off, so a beam crosses\n// its arc at an even pace and turns at the ends without stopping dead.\nconst ROUND = 0.985;\nconst ROUND_NORM = Math.asin(ROUND);\n// The plane K1 sends, nose first: x along its heading, y down.\nconst PLANE = [2, 0, 1, 0, 0, 0, -1, 0, -2, 0, -3, 0, 0, -1, 0, 1, -1, 2, -3, -1];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// The skyline, the same on every load: blocks of five to twelve LEDs and now\n// and then a tower with a mast. Each block has a grid of one-LED windows, a\n// light of its own (lamplight, paler office light, a bluish tube) and its own\n// share of windows lit.\nconst WINDOW_LIGHT = [\n  [0.09, 0.6],\n  [0.12, 0.35],\n  [0.55, 0.25],\n];\n\nfunction buildCity(P) {\n  const roof = P.roof;\n  roof.fill(H);\n  P.winOn.fill(0);\n  P.winCol.fill(0);\n  const slots = [];\n  const masts = [];\n  let x = 0;\n  let b = 0;\n  while (x \u003c W) {\n    const w = 5 + Math.floor(hash(b, 1) * 8);\n    const tower = b > 0 && hash(b, 2) \u003c 0.22;\n    const top = tower ? 84 + Math.floor(hash(b, 3) * 10) : 100 + Math.floor(hash(b, 3) * 15);\n    const x1 = Math.min(W, x + w);\n    for (let c = x; c \u003c x1; c++) roof[c] = top;\n    if (tower) {\n      const m = x + (w >> 1);\n      if (m \u003c W) {\n        roof[m] = top - 6;\n        masts.push((top - 6) * W + m);\n      }\n    }\n    const [hue, sat] = WINDOW_LIGHT[Math.floor(hash(b, 4) * WINDOW_LIGHT.length)];\n    const lit = 0.3 + 0.45 * hash(b, 5);\n    for (let y = top + 2; y \u003c H; y += 2) {\n      for (let c = x + 1; c \u003c x1 - 1; c += 2) {\n        const p = y * W + c;\n        slots.push(p);\n        hsvInto(P.winCol, p * 3, hue, sat, 0.62 + 0.3 * hash(c, y));\n        if (hash(c * 131 + y, b + 7) \u003c lit) P.winOn[p] = 1;\n      }\n    }\n    x = x1;\n    b++;\n  }\n  P.slots = Int32Array.from(slots);\n  P.masts = Int32Array.from(masts);\n  // Stars: a few dozen, never brighter than a dim window.\n  P.stars.fill(0);\n  for (let i = 0; i \u003c 34; i++) {\n    const sx = Math.floor(hash(i, 11) * W);\n    const sy = Math.floor(hash(i, 12) * 84);\n    P.stars[sy * W + sx] = 0.22 + 0.16 * hash(i, 13);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.roof = new Int16Array(W);\n  P.winOn = new Float32Array(N);\n  P.winCol = new Float32Array(N * 3);\n  P.stars = new Float32Array(N);\n  P.phase = new Float32Array(MAX);\n  P.rate = new Float32Array(MAX);\n  P.amp = new Float32Array(MAX);\n  P.centre = new Float32Array(MAX);\n  P.on = new Float32Array(MAX);\n  P.angle = new Float32Array(MAX);\n  P.light = new Float32Array(N);\n  P.halo = new Float32Array(N);\n  P.col = new Float32Array(6);\n  // Where each lamp's sweep begins: four seconds in, the first three beams\n  // cross over the city, and from two seconds to eight every one of them is\n  // crossing its arc rather than turning at an end.\n  const start = [-0.27, -1.4, 2.85, 2.55, 0.15, -1.1, 2.0];\n  for (let i = 0; i \u003c MAX; i++) {\n    const x = SLOTS[i];\n    P.phase[i] = start[i];\n    P.rate[i] = 0.85 + 0.3 * hash(i, 21);\n    P.amp[i] = 0.32 + 0.08 * hash(i, 22);\n    // Lamps on the left lean right and the other way round, so the beams cross.\n    P.centre[i] = ((32 - x) / 32) * 0.22 + (hash(i, 23) - 0.5) * 0.08;\n    P.on[i] = i \u003c 3 ? 1 : 0;\n  }\n  P.count = 3;\n  P.sweep = 2;\n  P.hue = 0;\n  P.haze = 0.06;\n  // The plane K1 sends: seconds since it was sent, or -1.\n  P.plane = -1;\n  P.px = 0;\n  P.py = 0;\n  P.pvx = 0;\n  P.t = 0;\n  P.flick = 0;\n  buildCity(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.sweep = Math.max(0.2, Math.min(4, k[1]));\n  P.count = Math.max(3, Math.min(MAX, Math.round(k[2])));\n  P.haze = Math.max(0, Math.min(1, k[3]));\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.plane = 0;\n    const fromLeft = Math.random() \u003c 0.5;\n    P.px = fromLeft ? 6 : W - 6;\n    P.py = 16 + Math.random() * 26;\n    P.pvx = (fromLeft ? 1 : -1) * (5 + Math.random() * 3);\n  }\n  if (P.plane >= 0) {\n    P.plane += dt;\n    P.px += P.pvx * dt;\n    if (P.plane > 7) P.plane = -1;\n  }\n  // How hard the beams hold the plane: they swing on over a second, hold it,\n  // and let go over a second and a half.\n  const hold = P.plane >= 0 ? smooth(0, 1.2, P.plane) * (1 - smooth(5, 6.5, P.plane)) : 0;\n\n  // Sweep 2 crosses an arc at about two and a half degrees a second; the\n  // knob's top end is three times that, its bottom end nearly still.\n  const speed = 0.17 * Math.pow(P.sweep / 2, 1.6);\n  for (let i = 0; i \u003c MAX; i++) {\n    const target = i \u003c P.count ? 1 : 0;\n    // A lamp strikes up in half a second and fades out in one.\n    P.on[i] += (target - P.on[i]) * Math.min(1, dt * (target ? 4 : 2.5));\n    P.phase[i] += dt * speed * P.rate[i];\n    const sweep = P.centre[i] + P.amp[i] * (Math.asin(ROUND * Math.sin(P.phase[i])) / ROUND_NORM);\n    const aim = Math.atan2(P.px - SLOTS[i], BASE - P.py);\n    P.angle[i] = sweep + (aim - sweep) * hold;\n  }\n  P.hold = hold;\n\n  // Now and then someone in the city switches a light on or off.\n  P.t += dt;\n  P.flick += dt;\n  if (P.flick > 0.8) {\n    P.flick = 0;\n    const p = P.slots[Math.floor(Math.random() * P.slots.length)];\n    P.winOn[p] = P.winOn[p] > 0 ? 0 : 1;\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const light = P.light;\n  const halo = P.halo;\n  const roof = P.roof;\n  const haze = P.haze;\n  light.fill(0);\n  halo.fill(0);\n\n  // The beams. Each LED takes the share of it the beam covers, rounded to\n  // thirds: a beam glides across the LEDs without a soft ramp at its edge.\n  const reach = 1.5 + 5 * haze;\n  const out = 1 + reach * 4;\n  for (let i = 0; i \u003c MAX; i++) {\n    const on = P.on[i];\n    if (on \u003c 0.01) continue;\n    const a = P.angle[i];\n    const sa = Math.sin(a);\n    const ca = Math.cos(a);\n    const bx = SLOTS[i] + 0.5;\n    for (let y = 0; y \u003c BASE; y++) {\n      const dy = y + 0.5 - BASE;\n      // Where the beam's middle crosses this row, and how wide it is there.\n      const s0 = -dy / ca;\n      if (s0 \u003c= 0) continue;\n      const mid = bx + s0 * sa;\n      const half = (LAMP + s0 * SPREAD) / ca;\n      const x0 = Math.max(0, Math.floor(mid - half - out));\n      const x1 = Math.min(W - 1, Math.ceil(mid + half + out));\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x + 0.5 - bx;\n        const s = dx * sa - dy * ca;\n        if (s \u003c= 0) continue;\n        const q = Math.abs(dx * ca + dy * sa);\n        const h = LAMP + s * SPREAD;\n        // Bright at the lamp, still well lit at the top of the panel.\n        const b = on * (0.8 + 0.2 * Math.exp(-s / 40) - 0.25 * haze * (1 - Math.exp(-s / 60)));\n        const cover = Math.max(0, Math.min(1, h - q + 0.5));\n        const p = y * W + x;\n        if (cover > 0) light[p] += b * (Math.round(cover * 3) / 3);\n        if (q > h - 0.5) halo[p] += b * Math.exp(-(q - h + 0.5) / reach);\n      }\n    }\n  }\n\n  const col = P.col;\n  hsvInto(col, 0, P.hue + 0.58, 0.38, 1);\n  // The city's glow on a hazy night: sodium orange whatever the lamps are.\n  hsvInto(col, 3, 0.08, 0.7, 1);\n  const glowAmp = 0.22 * haze;\n  const haloAmp = 0.32 * haze;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r;\n      let g;\n      let b;\n      if (y >= roof[x]) {\n        // Windows keep their own light whatever the lamps are; the rest of a building is black.\n        const w = P.winOn[p];\n        r = w * P.winCol[p * 3];\n        g = w * P.winCol[p * 3 + 1];\n        b = w * P.winCol[p * 3 + 2];\n      } else {\n        const L = light[p] + haloAmp * halo[p] + P.stars[p];\n        const glow = glowAmp * Math.exp(-(roof[x] - y) / 18);\n        r = L * col[0] + glow * col[3];\n        g = L * col[1] + glow * col[4];\n        b = L * col[2] + glow * col[5];\n      }\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n\n  // The warning lamp on each mast, red whatever the searchlights are.\n  if (P.t % 1.6 \u003c 0.5) {\n    for (let i = 0; i \u003c P.masts.length; i++) {\n      const p = P.masts[i];\n      display.setPixel(p % W, Math.floor(p / W), 230, 30, 20);\n    }\n  }\n\n  // The plane: a dark shape that only shows against the beams, and a strobe\n  // on its tail that blinks once a second.\n  if (P.plane >= 0) {\n    const cx = Math.round(P.px);\n    const cy = Math.round(P.py);\n    const dir = P.pvx > 0 ? 1 : -1;\n    for (let i = 0; i \u003c PLANE.length; i += 2) {\n      const x = cx + dir * PLANE[i];\n      const y = cy + PLANE[i + 1];\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) display.setPixel(x, y, 10, 10, 14);\n    }\n    const tx = cx - 3 * dir;\n    if (P.plane % 1 \u003c 0.12 && tx >= 0 && tx \u003c W && cy - 1 >= 0) display.setPixel(tx, cy - 1, 255, 255, 255);\n  }\n}\n","layer":{"id":"layer-searchlights","type":"code","name":"searchlights","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Searchlights\n// Family:  light\n// Idea:    Searchlights behind a night skyline swing slow, hard-edged beams across the sky, and where two beams cross the light runs white.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the searchlights that sweep a city's sky over a premiere or a grand opening\n// Round:   7\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Sweep=0.2..4, Lights=3..7, Haze=0..1\n//\n// Knob 1: Hue. The tint of the lamps, starting from the cold blue-white of a xenon arc.\n// Knob 2: Sweep. How fast the beams patrol the sky: at the bottom of the range they barely drift, at the top each one crosses its arc in about six seconds.\n// Knob 3: Lights. How many searchlights stand behind the skyline; a light that joins strikes up and one that leaves fades out.\n// Knob 4: Haze. How much the air holds the light: clear at 0, each beam cut sharp against the dark; turned up, the beams grow soft halos and the city glows on the low sky.\n// Buttons: K1 tap sends a plane across the sky; every beam swings onto it, holds it a few seconds and lets it go.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 7;\n// The lamps stand at the foot of the panel, behind the buildings. Their slots\n// fill in this order, so three lights are spread across the city and each one\n// added lands between two that are already burning.\nconst SLOTS = [10, 54, 31, 21, 43, 3, 61];\nconst BASE = 126;\n// A beam is the lamp's width at the lamp and opens by this many LEDs per LED\n// it travels: three and a half degrees across, eleven LEDs wide at the top.\nconst LAMP = 1.5;\nconst SPREAD = 0.03;\n// The sweep: a triangle wave with its corners rounded off, so a beam crosses\n// its arc at an even pace and turns at the ends without stopping dead.\nconst ROUND = 0.985;\nconst ROUND_NORM = Math.asin(ROUND);\n// The plane K1 sends, nose first: x along its heading, y down.\nconst PLANE = [2, 0, 1, 0, 0, 0, -1, 0, -2, 0, -3, 0, 0, -1, 0, 1, -1, 2, -3, -1];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\n// The skyline, the same on every load: blocks of five to twelve LEDs and now\n// and then a tower with a mast. Each block has a grid of one-LED windows, a\n// light of its own (lamplight, paler office light, a bluish tube) and its own\n// share of windows lit.\nconst WINDOW_LIGHT = [\n  [0.09, 0.6],\n  [0.12, 0.35],\n  [0.55, 0.25],\n];\n\nfunction buildCity(P) {\n  const roof = P.roof;\n  roof.fill(H);\n  P.winOn.fill(0);\n  P.winCol.fill(0);\n  const slots = [];\n  const masts = [];\n  let x = 0;\n  let b = 0;\n  while (x \u003c W) {\n    const w = 5 + Math.floor(hash(b, 1) * 8);\n    const tower = b > 0 && hash(b, 2) \u003c 0.22;\n    const top = tower ? 84 + Math.floor(hash(b, 3) * 10) : 100 + Math.floor(hash(b, 3) * 15);\n    const x1 = Math.min(W, x + w);\n    for (let c = x; c \u003c x1; c++) roof[c] = top;\n    if (tower) {\n      const m = x + (w >> 1);\n      if (m \u003c W) {\n        roof[m] = top - 6;\n        masts.push((top - 6) * W + m);\n      }\n    }\n    const [hue, sat] = WINDOW_LIGHT[Math.floor(hash(b, 4) * WINDOW_LIGHT.length)];\n    const lit = 0.3 + 0.45 * hash(b, 5);\n    for (let y = top + 2; y \u003c H; y += 2) {\n      for (let c = x + 1; c \u003c x1 - 1; c += 2) {\n        const p = y * W + c;\n        slots.push(p);\n        hsvInto(P.winCol, p * 3, hue, sat, 0.62 + 0.3 * hash(c, y));\n        if (hash(c * 131 + y, b + 7) \u003c lit) P.winOn[p] = 1;\n      }\n    }\n    x = x1;\n    b++;\n  }\n  P.slots = Int32Array.from(slots);\n  P.masts = Int32Array.from(masts);\n  // Stars: a few dozen, never brighter than a dim window.\n  P.stars.fill(0);\n  for (let i = 0; i \u003c 34; i++) {\n    const sx = Math.floor(hash(i, 11) * W);\n    const sy = Math.floor(hash(i, 12) * 84);\n    P.stars[sy * W + sx] = 0.22 + 0.16 * hash(i, 13);\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.roof = new Int16Array(W);\n  P.winOn = new Float32Array(N);\n  P.winCol = new Float32Array(N * 3);\n  P.stars = new Float32Array(N);\n  P.phase = new Float32Array(MAX);\n  P.rate = new Float32Array(MAX);\n  P.amp = new Float32Array(MAX);\n  P.centre = new Float32Array(MAX);\n  P.on = new Float32Array(MAX);\n  P.angle = new Float32Array(MAX);\n  P.light = new Float32Array(N);\n  P.halo = new Float32Array(N);\n  P.col = new Float32Array(6);\n  // Where each lamp's sweep begins: four seconds in, the first three beams\n  // cross over the city, and from two seconds to eight every one of them is\n  // crossing its arc rather than turning at an end.\n  const start = [-0.27, -1.4, 2.85, 2.55, 0.15, -1.1, 2.0];\n  for (let i = 0; i \u003c MAX; i++) {\n    const x = SLOTS[i];\n    P.phase[i] = start[i];\n    P.rate[i] = 0.85 + 0.3 * hash(i, 21);\n    P.amp[i] = 0.32 + 0.08 * hash(i, 22);\n    // Lamps on the left lean right and the other way round, so the beams cross.\n    P.centre[i] = ((32 - x) / 32) * 0.22 + (hash(i, 23) - 0.5) * 0.08;\n    P.on[i] = i \u003c 3 ? 1 : 0;\n  }\n  P.count = 3;\n  P.sweep = 2;\n  P.hue = 0;\n  P.haze = 0.06;\n  // The plane K1 sends: seconds since it was sent, or -1.\n  P.plane = -1;\n  P.px = 0;\n  P.py = 0;\n  P.pvx = 0;\n  P.t = 0;\n  P.flick = 0;\n  buildCity(P);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.sweep = Math.max(0.2, Math.min(4, k[1]));\n  P.count = Math.max(3, Math.min(MAX, Math.round(k[2])));\n  P.haze = Math.max(0, Math.min(1, k[3]));\n\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.plane = 0;\n    const fromLeft = Math.random() \u003c 0.5;\n    P.px = fromLeft ? 6 : W - 6;\n    P.py = 16 + Math.random() * 26;\n    P.pvx = (fromLeft ? 1 : -1) * (5 + Math.random() * 3);\n  }\n  if (P.plane >= 0) {\n    P.plane += dt;\n    P.px += P.pvx * dt;\n    if (P.plane > 7) P.plane = -1;\n  }\n  // How hard the beams hold the plane: they swing on over a second, hold it,\n  // and let go over a second and a half.\n  const hold = P.plane >= 0 ? smooth(0, 1.2, P.plane) * (1 - smooth(5, 6.5, P.plane)) : 0;\n\n  // Sweep 2 crosses an arc at about two and a half degrees a second; the\n  // knob's top end is three times that, its bottom end nearly still.\n  const speed = 0.17 * Math.pow(P.sweep / 2, 1.6);\n  for (let i = 0; i \u003c MAX; i++) {\n    const target = i \u003c P.count ? 1 : 0;\n    // A lamp strikes up in half a second and fades out in one.\n    P.on[i] += (target - P.on[i]) * Math.min(1, dt * (target ? 4 : 2.5));\n    P.phase[i] += dt * speed * P.rate[i];\n    const sweep = P.centre[i] + P.amp[i] * (Math.asin(ROUND * Math.sin(P.phase[i])) / ROUND_NORM);\n    const aim = Math.atan2(P.px - SLOTS[i], BASE - P.py);\n    P.angle[i] = sweep + (aim - sweep) * hold;\n  }\n  P.hold = hold;\n\n  // Now and then someone in the city switches a light on or off.\n  P.t += dt;\n  P.flick += dt;\n  if (P.flick > 0.8) {\n    P.flick = 0;\n    const p = P.slots[Math.floor(Math.random() * P.slots.length)];\n    P.winOn[p] = P.winOn[p] > 0 ? 0 : 1;\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const light = P.light;\n  const halo = P.halo;\n  const roof = P.roof;\n  const haze = P.haze;\n  light.fill(0);\n  halo.fill(0);\n\n  // The beams. Each LED takes the share of it the beam covers, rounded to\n  // thirds: a beam glides across the LEDs without a soft ramp at its edge.\n  const reach = 1.5 + 5 * haze;\n  const out = 1 + reach * 4;\n  for (let i = 0; i \u003c MAX; i++) {\n    const on = P.on[i];\n    if (on \u003c 0.01) continue;\n    const a = P.angle[i];\n    const sa = Math.sin(a);\n    const ca = Math.cos(a);\n    const bx = SLOTS[i] + 0.5;\n    for (let y = 0; y \u003c BASE; y++) {\n      const dy = y + 0.5 - BASE;\n      // Where the beam's middle crosses this row, and how wide it is there.\n      const s0 = -dy / ca;\n      if (s0 \u003c= 0) continue;\n      const mid = bx + s0 * sa;\n      const half = (LAMP + s0 * SPREAD) / ca;\n      const x0 = Math.max(0, Math.floor(mid - half - out));\n      const x1 = Math.min(W - 1, Math.ceil(mid + half + out));\n      for (let x = x0; x \u003c= x1; x++) {\n        const dx = x + 0.5 - bx;\n        const s = dx * sa - dy * ca;\n        if (s \u003c= 0) continue;\n        const q = Math.abs(dx * ca + dy * sa);\n        const h = LAMP + s * SPREAD;\n        // Bright at the lamp, still well lit at the top of the panel.\n        const b = on * (0.8 + 0.2 * Math.exp(-s / 40) - 0.25 * haze * (1 - Math.exp(-s / 60)));\n        const cover = Math.max(0, Math.min(1, h - q + 0.5));\n        const p = y * W + x;\n        if (cover > 0) light[p] += b * (Math.round(cover * 3) / 3);\n        if (q > h - 0.5) halo[p] += b * Math.exp(-(q - h + 0.5) / reach);\n      }\n    }\n  }\n\n  const col = P.col;\n  hsvInto(col, 0, P.hue + 0.58, 0.38, 1);\n  // The city's glow on a hazy night: sodium orange whatever the lamps are.\n  hsvInto(col, 3, 0.08, 0.7, 1);\n  const glowAmp = 0.22 * haze;\n  const haloAmp = 0.32 * haze;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      let r;\n      let g;\n      let b;\n      if (y >= roof[x]) {\n        // Windows keep their own light whatever the lamps are; the rest of a building is black.\n        const w = P.winOn[p];\n        r = w * P.winCol[p * 3];\n        g = w * P.winCol[p * 3 + 1];\n        b = w * P.winCol[p * 3 + 2];\n      } else {\n        const L = light[p] + haloAmp * halo[p] + P.stars[p];\n        const glow = glowAmp * Math.exp(-(roof[x] - y) / 18);\n        r = L * col[0] + glow * col[3];\n        g = L * col[1] + glow * col[4];\n        b = L * col[2] + glow * col[5];\n      }\n      display.setPixel(x, y, Math.min(255, r), Math.min(255, g), Math.min(255, b));\n    }\n  }\n\n  // The warning lamp on each mast, red whatever the searchlights are.\n  if (P.t % 1.6 \u003c 0.5) {\n    for (let i = 0; i \u003c P.masts.length; i++) {\n      const p = P.masts[i];\n      display.setPixel(p % W, Math.floor(p / W), 230, 30, 20);\n    }\n  }\n\n  // The plane: a dark shape that only shows against the beams, and a strobe\n  // on its tail that blinks once a second.\n  if (P.plane >= 0) {\n    const cx = Math.round(P.px);\n    const cy = Math.round(P.py);\n    const dir = P.pvx > 0 ? 1 : -1;\n    for (let i = 0; i \u003c PLANE.length; i += 2) {\n      const x = cx + dir * PLANE[i];\n      const y = cy + PLANE[i + 1];\n      if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) display.setPixel(x, y, 10, 10, 14);\n    }\n    const tx = cx - 3 * dir;\n    if (P.plane % 1 \u003c 0.12 && tx >= 0 && tx \u003c W && cy - 1 >= 0) display.setPixel(tx, cy - 1, 255, 255, 255);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Sweep=0.2..4, Lights=3..7, Haze=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the lamps, starting from the cold blue-white of a xenon arc."},{"name":"Sweep","min":0.2,"max":4,"about":"How fast the beams patrol the sky: at the bottom of the range they barely drift, at the top each one crosses its arc in about six seconds."},{"name":"Lights","min":3,"max":7,"about":"How many searchlights stand behind the skyline; a light that joins strikes up and one that leaves fades out."},{"name":"Haze","min":0,"max":1,"about":"How much the air holds the light: clear at 0, each beam cut sharp against the dark; turned up, the beams grow soft halos and the city glows on the low sky."}],"start":[0,2,3,0.06],"measures":{"motion":0.1662,"detail":0.0601,"edges":0.9751,"complexity":0.5201,"coverage":0.2833,"colour":0.1361,"drift":0.3569},"knobResponse":[0.0557,0.2929,0.2085,0.0855]},{"slug":"senbazuru","title":"Senbazuru","family":"paper","round":22,"note":"붉은 옻칠 고리에 실로 꿴 종이학이 줄줄이 매달려 금박 학 아래로 주황에서 초록, 파랑을 지나 보라와 분홍까지 띠를 이루고, 실 끝에는 금 구슬과 비단 술이 달려요. 어두운 절 방에 외풍이 불면 줄이 흔들리고 학이 실을 축으로 돌면서 접힌 면이 하나씩 등불을 받아 번쩍여요. K1 을 누르면 돌풍이 불어 학 하나가 떨어져 나뭇잎처럼 바닥으로 내려앉아요.","idea":"Strings of folded paper cranes hang from a red lacquered ring in a dim temple room, in bands of colour from the ring down to the silk tassels, and a soft draught sways the strands and turns the cranes so their folds catch the lamp one facet at a time.","buttons":"K1 tap sends a gust through the room, which spins the cranes and shakes one loose to glide to the floor.","code":"// ===== Patternflow pattern =====\n// Title:   Senbazuru\n// Family:  paper\n// Idea:    Strings of folded paper cranes hang from a red lacquered ring in a dim temple room, in bands of colour from the ring down to the silk tassels, and a soft draught sways the strands and turns the cranes so their folds catch the lamp one facet at a time.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the senbazuru strings of a thousand origami cranes hung in Japanese temples and at the Children's Peace Monument in Hiroshima\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Breeze=0.2..3, Strands=8..16, Light=0..1\n//\n// Knob 1: Paper. Which colours the cranes are folded from: under a row of gold foil cranes at the ring, the bands run from orange through green and blue to violet and pink at the tassels at 0, and turning it moves every band along the rainbow.\n// Knob 2: Breeze. How hard the draught blows: at 0.2 the strands hang almost still, at 2 they lean and sway and the cranes turn, at 3 they swing wide and spin.\n// Knob 3: Strands. How many strands hang from the ring, from 8 to 16; with more strands the cranes are folded smaller and each strand carries more of them.\n// Knob 4: Light. Where the light comes from: a paper lamp low on the left at night at 0, with the round window blue with moonlight, through dusk to daylight from the upper right at 1. The lit folds and the cranes' shadows on the wall swing with it.\n// Buttons: K1 tap sends a gust through the room, which spins the cranes and shakes one loose to glide to the floor.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The cranes, threads and ring are drawn at twice the resolution and averaged\n// down, so a neck one LED wide still reads.\nconst SW = 128;\nconst SH = 256;\nconst SN = SW * SH;\n// The ring: its centre column, its row, its radius and how far its front\n// hangs below its back. Then the round window behind it and the first row\n// of the floor.\nconst CX = 31.5;\nconst RY = 12;\nconst RR = 22;\nconst RE = 3.6;\nconst WY = 60;\nconst WR = 26;\nconst FLOOR = 121;\nconst MAXS = 16;\nconst { sin, cos, min, max, floor, round, sqrt, exp, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6;\n  const f = h - floor(h);\n  const p = v * (1 - s);\n  const q = v * (1 - s * f);\n  const t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// A folded crane, head forward along -x, up along y, wings out along z. Each\n// face is one flat facet of the paper; the far side mirrors the near one.\nconst PT = {\n  F: [-2.3, 0.3, 0], B: [2.3, 0.3, 0], D: [0, -1.9, 0], S: [0, 0, 1.3],\n  W0: [-2.4, 0.5, 0.3], W1: [2.4, 0.5, 0.3], Wm: [0.3, -0.4, 1.3], Wt: [1.5, 2.4, 4.8],\n  N0: [-1, -1.6, 0.6], N1: [-3.4, 0.9, 0], Nt: [-4.9, 5.4, 0], H0: [-4.1, 5.8, 0.4], Hp: [-6.6, 4.1, 0],\n  T0: [1, -1.6, 0.6], T1: [3.4, 0.9, 0], Tt: [5.3, 5.8, 0],\n};\nconst MESH = Float32Array.from(\n  [1, -1].flatMap((s) =>\n    \"F S D,S B D,W0 Wm Wt,Wm W1 Wt,N0 N1 Nt,Nt H0 Hp,T0 T1 Tt\"\n      .split(\",\")\n      .flatMap((f) => f.split(\" \").flatMap((k) => [PT[k][0], PT[k][1], PT[k][2] * s])),\n  ),\n);\nconst TV = new Float32Array(9);\nconst CE = cos(0.38);\nconst SE = sin(0.38);\nconst GOLD = [1, 0.74, 0.3];\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, {\n    cb: new Float32Array(SN * 3),\n    zb: new Float32Array(SN),\n    bg: new Float32Array(N * 3),\n    rec: new Float32Array(N),\n    grain: Float32Array.from({ length: N }, () => rnd() - 0.5),\n    key: \"\",\n    started: false,\n    ph: 0,\n    psi: 0,\n    vpsi: 0,\n    gust: 0,\n    gx: -30,\n    next: 7,\n    fall: [],\n    paper: 0,\n    B: 2,\n    n: 8,\n    light: 0.06,\n  });\n  P.S = Array.from({ length: MAXS }, () => ({\n    ax: 0, vx: 0, az: 0, vz: 0, tw: 0, vt: 0,\n    p: rnd() * TAU, q: rnd() * TAU, cut: floor(rnd() * 3.6), dir: rnd() \u003c 0.5 ? 0 : PI, hj: (rnd() - 0.5) * 0.05, lost: 0,\n  }));\n}\n\n// Crane size, spacing and count for the strand count.\nfunction layout(n) {\n  const k = 1.45 - 0.04 * n;\n  const dy = 6.6 * k + 1;\n  return { k, dy, nmax: floor((104 - RY - 7) / dy) + 1 };\n}\n\nfunction gust(P, g, loosen) {\n  P.gust = max(P.gust, g);\n  P.gx = -12;\n  P.vpsi += 0.35 * g * (rnd() \u003c 0.5 ? -1 : 1);\n  for (let s = 0; s \u003c MAXS; s++) P.S[s].vt += g * (2 + 3 * rnd()) * (rnd() \u003c 0.5 ? -1 : 1);\n  if (!loosen) return;\n  // The bottom crane of the nearest strand that still has a few slips off.\n  const { nmax, dy } = layout(P.n);\n  let best = -1;\n  let bz = -2;\n  for (let s = 0; s \u003c P.n; s++) {\n    const st = P.S[s];\n    const sa = sin(P.psi + ((s + 0.25) / P.n) * TAU);\n    if (st.lost \u003c 2 && nmax - st.cut - st.lost > 5 && sa > bz) {\n      bz = sa;\n      best = s;\n    }\n  }\n  if (best \u003c 0) return;\n  const st = P.S[best];\n  const i = nmax - st.cut - st.lost - 1;\n  st.lost++;\n  const phi = P.psi + ((best + 0.25) / P.n) * TAU;\n  const u = (7 + i * dy) / 100;\n  const z = RR * sin(phi);\n  const x = CX + (RR * cos(phi) + st.ax * u) * (1 + z * 0.004);\n  P.fall.push({ x, x0: x, y: RY + RE * sin(phi) + 7 + i * dy, z: z + 4, yaw: -phi, t: 0, i, s: best, down: false });\n  if (P.fall.length > 5) P.fall.shift();\n}\n\nfunction step(P, h) {\n  const B = P.B;\n  P.ph += h * (0.35 + 0.65 * sqrt(B / 2));\n  const T = P.ph;\n  if ((P.next -= h) \u003c= 0) {\n    gust(P, 0.35 + 0.3 * rnd(), false);\n    P.next = 6 + 7 * rnd();\n  }\n  P.gust *= exp(-h / 1.8);\n  P.gx += h * 36;\n  const n = P.n;\n  for (let s = 0; s \u003c n; s++) {\n    const st = P.S[s];\n    const phi = P.psi + ((s + 0.25) / n) * TAU;\n    const x = CX + RR * cos(phi);\n    // The draught: a lean to the right that breathes, a flutter that runs\n    // across the bundle, and the gust front passing left to right.\n    const front = 1 / (1 + exp((x - P.gx) / 6));\n    const wind = 3 * B * (0.4 + 0.6 * sin(0.61 * T + st.p) + 0.35 * sin(1.37 * T - 0.06 * x + st.q)) + (3 + 2.5 * B) * P.gust * front;\n    st.vx += h * (5.5 * (wind - st.ax) - 1.1 * st.vx);\n    st.ax += h * st.vx;\n    const wz = 2 * B * sin(0.43 * T + st.q) + 3 * B * P.gust * front * sin(st.p);\n    st.vz += h * (5.5 * (wz - st.az) - 1.1 * st.vz);\n    st.az += h * st.vz;\n    const tq = 0.3 * B * sin(0.53 * T + 2 * st.p);\n    st.vt += h * (3 * (tq - st.tw) - 0.45 * st.vt);\n    st.tw += h * st.vt;\n  }\n  // The whole hanging twists on its one cord.\n  const tr = 0.16 * B * sin(0.23 * T) + 0.06 * B * sin(0.67 * T + 1);\n  P.vpsi += h * (1.4 * (tr - P.psi) - 0.35 * P.vpsi);\n  P.psi += h * P.vpsi;\n  // A loose crane glides down like a leaf, rocking and turning.\n  for (const f of P.fall) {\n    if (f.down) continue;\n    f.t += h;\n    const sw = sin(2.1 * f.t);\n    f.y += h * (8 + 10 * sw * sw);\n    f.x = f.x0 + 7 * sin(2.1 * f.t - 0.3) * min(1, f.t);\n    f.yaw += h * 1.6;\n    f.roll = 0.55 * cos(2.1 * f.t) * min(1, f.t * 2);\n    if (f.y >= FLOOR + 2.6) {\n      f.y = FLOOR + 2.6;\n      f.roll = 0;\n      f.down = true;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.paper = clamp(k[0], 0, 1);\n  P.B = clamp(k[1], 0.2, 3);\n  P.n = clamp(round(k[2]), 8, MAXS);\n  P.light = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    for (let i = 0; i \u003c 60; i++) step(P, 1 / 15);\n  }\n  if (input.btnPressed && input.btnPressed[0]) gust(P, 1, true);\n  for (let i = 0; i \u003c 2; i++) step(P, dt / 2);\n}\n\n// The room: dark wood boards, a round shoji window behind the cranes, the\n// lamp, a polished floor. Kept until the light changes.\nfunction room(P) {\n  const k = P.light;\n  const night = 1 - k;\n  const pap = k \u003c 0.5 ? mix3([0.1, 0.15, 0.38], [0.66, 0.38, 0.4], k * 2) : mix3([0.66, 0.38, 0.4], [0.94, 0.88, 0.74], k * 2 - 1);\n  const { bg, rec, grain } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const g = grain[p];\n      const dx = x - 31.5;\n      const dy = y - WY;\n      const lamp = night * exp(-((x - 7) * (x - 7)) / 700 - ((y - 106) * (y - 106)) / 2500);\n      const lit = 0.3 + 1.4 * lamp + 0.9 * k * (0.4 + (0.6 * x) / 63) * (1.1 - (0.5 * y) / 127);\n      const r = sqrt(dx * dx + dy * dy);\n      // Each LED is wood taking w of the light, plus paper glowing pp, and\n      // the cranes' shadows fall on it rc dark.\n      let w = 0;\n      let pp = 0;\n      let rc = 0.7;\n      if (y \u003c 3) w = y === 2 ? 0.35 : 0.7;\n      else if (y >= FLOOR) {\n        // Boards, and the window seen dimly in the polish.\n        const b = (y - FLOOR) % 3 === 0 ? 0.6 : 1;\n        w = 0.75 * b;\n        pp = exp(-(dx * dx) / 500) * 0.22 * b;\n      } else if (x \u003c 3 || x > 60) w = x === 2 || x === 61 ? 0.8 : 0.53;\n      else if (r \u003c WR) {\n        // Paper between the kumiko bars, brightest where the moon or sun is.\n        const spot = exp(-((dx - 10) * (dx - 10) + (dy + 12) * (dy + 12)) / 500);\n        const bar = (x + 1) % 7 === 0 || (y - WY + 99) % 9 === 0;\n        pp = (0.62 + 0.55 * spot + 0.04 * g) * (bar ? 0.28 : 1);\n        rc = 0.2;\n      } else if (r \u003c WR + 2.2) w = r \u003c WR + 1 ? 0.62 : 0.35;\n      else {\n        const tone = 0.8 + 0.25 * sin(floor((x + 3) / 7) * 12.9898) ** 2 + 0.12 * g;\n        w = 0.55 * tone * ((x + 3) % 7 === 0 ? 0.55 : 1);\n      }\n      w *= lit;\n      let cr = 0.42 * w + pap[0] * pp;\n      let cg = 0.26 * w + pap[1] * pp;\n      let cb = 0.15 * w + pap[2] * pp;\n      // The andon: a paper lamp on short legs in the corner, lit at night.\n      if (x >= 3 && x \u003c= 12 && y >= 98 && y \u003c FLOOR && (y \u003c 117 || x === 4 || x === 11)) {\n        rc = 0;\n        if (y >= 117 || x === 3 || x === 12 || y === 98 || y === 107 || y === 116) {\n          const f = 0.3 * (0.4 + lit);\n          cr = 0.42 * f;\n          cg = 0.26 * f;\n          cb = 0.15 * f;\n        } else {\n          const glow = night * (0.55 + 0.3 * exp(-((x - 7.5) * (x - 7.5)) / 6 - ((y - 106) * (y - 106)) / 40));\n          cr = 0.14 * lit + glow;\n          cg = 0.13 * lit + 0.62 * glow;\n          cb = 0.12 * lit + 0.26 * glow;\n        }\n      }\n      rec[p] = rc;\n      bg[o] = cr * 255;\n      bg[o + 1] = cg * 255;\n      bg[o + 2] = cb * 255;\n    }\n}\n\nfunction lights(P) {\n  const k = P.light;\n  const lx = mix(-0.8, 0.65, k);\n  const ly = mix(0.35, 0.6, k);\n  const lz = mix(0.6, 0.45, k);\n  const l = hypot(lx, ly, lz);\n  P.L = [lx / l, ly / l, lz / l];\n  const hl = hypot(P.L[0], P.L[1], P.L[2] + 1);\n  P.Hv = [P.L[0] / hl, P.L[1] / hl, (P.L[2] + 1) / hl];\n  P.lc = k \u003c 0.5 ? mix3([1, 0.8, 0.56], [1, 0.68, 0.6], k * 2) : mix3([1, 0.68, 0.6], [0.9, 0.95, 1], k * 2 - 1);\n  P.amb = mix3([0.14, 0.16, 0.3], [0.3, 0.29, 0.27], k);\n}\n\nfunction put(P, x, y, z, r, g, b) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= SW || y \u003c 0 || y >= SH) return;\n  const i = y * SW + x;\n  if (z \u003c= P.zb[i]) return;\n  P.zb[i] = z;\n  P.cb[i * 3] = r;\n  P.cb[i * 3 + 1] = g;\n  P.cb[i * 3 + 2] = b;\n}\n\nfunction line(P, x0, y0, z0, x1, y1, z1, c) {\n  const n = max(1, Math.ceil(max(Math.abs(x1 - x0), Math.abs(y1 - y0))));\n  for (let j = 0; j \u003c= n; j++) {\n    const t = j / n;\n    put(P, mix(x0, x1, t), mix(y0, y1, t), mix(z0, z1, t), c[0], c[1], c[2]);\n  }\n}\n\n// A lit sphere: a bead or the knot over the ring.\nfunction bead(P, x, y, z, rad, col, occl) {\n  const { L, Hv, lc, amb } = P;\n  for (let j = floor(y - rad); j \u003c= y + rad; j++)\n    for (let i = floor(x - rad); i \u003c= x + rad; i++) {\n      const nx = (i + 0.5 - x) / rad;\n      const ny = -(j + 0.5 - y) / rad;\n      const q = 1 - nx * nx - ny * ny;\n      if (q \u003c 0) continue;\n      const nz = sqrt(q);\n      const d = max(0, nx * L[0] + ny * L[1] + nz * L[2]);\n      const sp = 0.9 * max(0, nx * Hv[0] + ny * Hv[1] + nz * Hv[2]) ** 10;\n      const f = 255 * occl;\n      put(P, i, j, z + nz * rad * 0.5, f * (col[0] * (amb[0] + 1.2 * d * lc[0]) + sp * lc[0]), f * (col[1] * (amb[1] + 1.2 * d * lc[1]) + sp * lc[1]), f * (col[2] * (amb[2] + 1.2 * d * lc[2]) + sp * lc[2]));\n    }\n}\n\nfunction tri(P, x0, y0, z0, x1, y1, z1, x2, y2, z2, r, g, b) {\n  const A = (x1 - x0) * (y2 - y0) - (x2 - x0) * (y1 - y0);\n  if (A > -0.02 && A \u003c 0.02) return;\n  const ia = 1 / A;\n  const xa = max(0, floor(min(x0, x1, x2)));\n  const xb = min(SW - 1, floor(max(x0, x1, x2)));\n  const ya = max(0, floor(min(y0, y1, y2)));\n  const yb = min(SH - 1, floor(max(y0, y1, y2)));\n  const { zb, cb } = P;\n  for (let y = ya; y \u003c= yb; y++) {\n    const py = y + 0.5;\n    for (let x = xa; x \u003c= xb; x++) {\n      const px = x + 0.5;\n      const w0 = ((x1 - px) * (y2 - py) - (x2 - px) * (y1 - py)) * ia;\n      const w1 = ((x2 - px) * (y0 - py) - (x0 - px) * (y2 - py)) * ia;\n      const w2 = 1 - w0 - w1;\n      if (w0 \u003c 0 || w1 \u003c 0 || w2 \u003c 0) continue;\n      const z = w0 * z0 + w1 * z1 + w2 * z2;\n      const i = y * SW + x;\n      if (z \u003c= zb[i]) continue;\n      zb[i] = z;\n      cb[i * 3] = r;\n      cb[i * 3 + 1] = g;\n      cb[i * 3 + 2] = b;\n    }\n  }\n}\n\n// One crane at screen point (cx, cy) in LEDs, depth cz, size k, turned yaw\n// about its thread and tilted roll in the picture plane. Each facet is lit\n// on its own: the side facing the lamp is bright, a facet that turns to\n// mirror the lamp into the room flashes.\nfunction crane(P, cx, cy, cz, k, yaw, roll, col, occl, gold) {\n  const cw = cos(yaw);\n  const sw = sin(yaw);\n  const cr = cos(roll);\n  const sr = sin(roll);\n  const { L, Hv, lc, amb } = P;\n  const shine = gold ? 1.1 : 0.35;\n  const pw = gold ? 6 : 14;\n  for (let t = 0; t \u003c MESH.length; t += 9) {\n    for (let v = 0; v \u003c 9; v += 3) {\n      const x = MESH[t + v];\n      const y = MESH[t + v + 1];\n      const z = MESH[t + v + 2];\n      const x1 = x * cw + z * sw;\n      const z1 = z * cw - x * sw;\n      const y1 = x1 * sr + y * cr;\n      // Seen from a little above.\n      TV[v] = x1 * cr - y * sr;\n      TV[v + 1] = y1 * CE - z1 * SE;\n      TV[v + 2] = y1 * SE + z1 * CE;\n    }\n    const ax = TV[3] - TV[0];\n    const ay = TV[4] - TV[1];\n    const az = TV[5] - TV[2];\n    const bx = TV[6] - TV[0];\n    const by = TV[7] - TV[1];\n    const bz = TV[8] - TV[2];\n    let nx = ay * bz - az * by;\n    let ny = az * bx - ax * bz;\n    let nz = ax * by - ay * bx;\n    let nl = sqrt(nx * nx + ny * ny + nz * nz);\n    if (nl \u003c 1e-6) continue;\n    // Paper has two sides: light the one that faces us.\n    if (nz \u003c 0) nl = -nl;\n    nx /= nl;\n    ny /= nl;\n    nz /= nl;\n    // Paper lets a little light round the fold, so no facet goes black.\n    const d = max(0, nx * L[0] + ny * L[1] + nz * L[2] + 0.35) / 1.35;\n    const sp = shine * max(0, nx * Hv[0] + ny * Hv[1] + nz * Hv[2]) ** pw;\n    const r = 255 * occl * (col[0] * (amb[0] + 1.15 * d * lc[0]) + sp * lc[0]);\n    const g = 255 * occl * (col[1] * (amb[1] + 1.15 * d * lc[1]) + sp * lc[1]);\n    const b = 255 * occl * (col[2] * (amb[2] + 1.15 * d * lc[2]) + sp * lc[2]);\n    tri(P, 2 * (cx + k * TV[0]), 2 * (cy - k * TV[1]), cz + k * TV[2], 2 * (cx + k * TV[3]), 2 * (cy - k * TV[4]), cz + k * TV[5], 2 * (cx + k * TV[6]), 2 * (cy - k * TV[7]), cz + k * TV[8], r, g, b);\n  }\n}\n\n// The colour of crane i from the top: bands from orange through the\n// rainbow, under a first crane of gold foil on every strand.\nfunction paperOf(P, i, nmax, st) {\n  if (i === 0) return GOLD;\n  const c = hsv(P.paper + 0.12 + (0.76 * (i - 1)) / max(1, nmax - 2) + st.hj, 0.82, 1);\n  return [c[0] * 0.92 + 0.08, c[1] * 0.92 + 0.08, c[2] * 0.92 + 0.08];\n}\n\nfunction hanging(P) {\n  const { nmax, k, dy } = layout(P.n);\n  const n = P.n;\n  const { lc, amb } = P;\n  const thread = [0.86, 0.8, 0.7];\n  const silk = [0.95, 0.2, 0.14];\n  for (let s = 0; s \u003c n; s++) {\n    const st = P.S[s];\n    const phi = P.psi + ((s + 0.25) / n) * TAU;\n    const ca = cos(phi);\n    const sa = sin(phi);\n    const ya = RY + RE * sa;\n    // The inside of the bundle is in shade.\n    const occl = 0.4 + 0.6 * (0.5 + 0.5 * sa);\n    const cnt = nmax - st.cut - st.lost;\n    const tc = thread.map((v, m) => 255 * occl * v * (amb[m] + 0.55 * lc[m]));\n    let px = 2 * (CX + RR * ca * (1 + RR * sa * 0.004));\n    let py = 2 * ya;\n    let pz = RR * sa - 2;\n    const pts = [];\n    for (let i = 0; i \u003c= cnt; i++) {\n      const yy = 7 + i * dy - (i === cnt ? dy * 0.35 : 0);\n      const u = yy / 100;\n      const dx = st.ax * u + 0.7 * P.B * u * sin(2.1 * P.ph - 3.2 * u + st.p);\n      const z = RR * sa + st.az * u;\n      const pp = 1 + z * 0.004;\n      const x = CX + (RR * ca + dx) * pp;\n      const y = ya + yy;\n      line(P, px, py, pz, 2 * x, 2 * y, z - 2 * k, tc);\n      px = 2 * x;\n      py = 2 * y;\n      pz = z - 2 * k;\n      pts.push([x, y, z, pp, u]);\n    }\n    for (let i = 0; i \u003c cnt; i++) {\n      const [x, y, z, pp, u] = pts[i];\n      const slope = (pts[i + 1][0] - x) / dy;\n      const yaw = -phi - PI / 2 + st.dir + st.tw * (0.3 + u) + (0.25 + 0.2 * P.B) * sin(1.3 * P.ph - 0.6 * i + st.q);\n      crane(P, x, y, z, k * pp, yaw, -slope, paperOf(P, i, nmax, st), occl, i === 0);\n    }\n    // A gold bead and a silk tassel that trails the swing.\n    const [x, y, z] = pts[cnt];\n    bead(P, 2 * x, 2 * y, z, 2 * k + 0.2, GOLD, occl);\n    const lag = -0.25 * st.vx;\n    const sc = silk.map((v, m) => 255 * occl * v * (amb[m] + 0.9 * lc[m]));\n    const len = round(15 * k);\n    for (let j = 0; j \u003c len; j++) {\n      const hw = (1.1 + j * 0.13) * k;\n      const xc = 2 * x + lag * j * 0.1;\n      for (let xx = floor(xc - hw); xx \u003c= xc + hw; xx++) {\n        const f = (xx & 1 ? 0.7 : 1) * (j > len - 3 ? 0.75 : 1);\n        put(P, xx, 2 * y + 2 + j, z, sc[0] * f, sc[1] * f, sc[2] * f);\n      }\n    }\n  }\n}\n\nfunction ring(P) {\n  const { L, Hv, lc, amb } = P;\n  for (let a = 0; a \u003c TAU; a += 0.01) {\n    const ca = cos(a);\n    const sa = sin(a);\n    const z = RR * sa;\n    const x = 2 * (CX + RR * ca * (1 + z * 0.004));\n    const y = 2 * (RY + RE * sa);\n    const occl = 0.45 + 0.55 * (0.5 + 0.5 * sa);\n    // Lacquered wood, round in section: lit on top and toward the lamp.\n    for (let q = -2; q \u003c= 1; q++) {\n      const ny = -(q + 0.5) * 0.7;\n      const nl = sqrt(1 + ny * ny);\n      const d = max(0, (ca * L[0] + ny * L[1] + sa * L[2]) / nl);\n      const sp = 0.8 * max(0, (ca * Hv[0] + ny * Hv[1] + sa * Hv[2]) / nl) ** 12;\n      const f = 255 * occl;\n      put(P, x, y + q, z + 1, f * (0.85 * (amb[0] + 1.1 * d * lc[0]) + sp * lc[0]), f * (0.16 * (amb[1] + 1.1 * d * lc[1]) + sp * lc[1]), f * (0.09 * (amb[2] + 1.1 * d * lc[2]) + sp * lc[2]));\n    }\n  }\n  // Four cords up to a knot under the beam.\n  const cc = [0.9, 0.75, 0.4].map((v, m) => 255 * v * (amb[m] + 0.6 * lc[m]));\n  for (let j = 0; j \u003c 4; j++) {\n    const a = P.psi + PI / 4 + (j * PI) / 2;\n    const z = RR * sin(a);\n    line(P, 2 * (CX + RR * cos(a) * (1 + z * 0.004)), 2 * (RY + RE * sin(a)), z, 2 * CX, 10, 0, cc);\n  }\n  line(P, 2 * CX, 0, 0, 2 * CX, 10, 0, cc);\n  bead(P, 2 * CX, 10, 1, 3.2, [0.9, 0.16, 0.12], 1);\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  if (!P.S) return;\n  const key = `${P.light}`;\n  if (key !== P.key) {\n    P.key = key;\n    room(P);\n  }\n  lights(P);\n  P.zb.fill(-1e9);\n  ring(P);\n  hanging(P);\n  const { nmax, k } = layout(P.n);\n  for (const f of P.fall) crane(P, f.x, f.y, f.z, k, f.yaw, f.roll || 0, paperOf(P, f.i, nmax, P.S[f.s]), 1, false);\n  const { zb, cb, bg, rec, L } = P;\n  // The cranes' shadows on the wall, thrown away from the light.\n  const ox = round(clamp((-L[0] / L[2]) * 16, -24, 24));\n  const oy = round(clamp((L[1] / L[2]) * 16, -16, 16));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      let c = 0;\n      for (let q = 0; q \u003c 4; q++) {\n        const i = (2 * y + (q >> 1)) * SW + 2 * x + (q & 1);\n        if (zb[i] > -1e8) {\n          r += cb[i * 3];\n          g += cb[i * 3 + 1];\n          b += cb[i * 3 + 2];\n          c++;\n        }\n      }\n      const o = (y * W + x) * 3;\n      // Thin paper edges count a little more than their share, so a neck\n      // half an LED wide still shows.\n      const a = min(1, c * 0.36);\n      const f = 1 - a;\n      const ic = c ? a / c : 0;\n      const sx = 2 * x - ox;\n      const sy = 2 * y - oy;\n      const sh = f * (sx >= 0 && sx \u003c SW && sy >= 0 && sy \u003c SH && zb[sy * SW + sx] > -1e8 ? 1 - 0.6 * rec[o / 3] : 1);\n      display.setPixel(x, y, min(255, r * ic + sh * bg[o]), min(255, g * ic + sh * bg[o + 1]), min(255, b * ic + sh * bg[o + 2]));\n    }\n}\n","layer":{"id":"layer-senbazuru","type":"code","name":"senbazuru","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Senbazuru\n// Family:  paper\n// Idea:    Strings of folded paper cranes hang from a red lacquered ring in a dim temple room, in bands of colour from the ring down to the silk tassels, and a soft draught sways the strands and turns the cranes so their folds catch the lamp one facet at a time.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after the senbazuru strings of a thousand origami cranes hung in Japanese temples and at the Children's Peace Monument in Hiroshima\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Breeze=0.2..3, Strands=8..16, Light=0..1\n//\n// Knob 1: Paper. Which colours the cranes are folded from: under a row of gold foil cranes at the ring, the bands run from orange through green and blue to violet and pink at the tassels at 0, and turning it moves every band along the rainbow.\n// Knob 2: Breeze. How hard the draught blows: at 0.2 the strands hang almost still, at 2 they lean and sway and the cranes turn, at 3 they swing wide and spin.\n// Knob 3: Strands. How many strands hang from the ring, from 8 to 16; with more strands the cranes are folded smaller and each strand carries more of them.\n// Knob 4: Light. Where the light comes from: a paper lamp low on the left at night at 0, with the round window blue with moonlight, through dusk to daylight from the upper right at 1. The lit folds and the cranes' shadows on the wall swing with it.\n// Buttons: K1 tap sends a gust through the room, which spins the cranes and shakes one loose to glide to the floor.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The cranes, threads and ring are drawn at twice the resolution and averaged\n// down, so a neck one LED wide still reads.\nconst SW = 128;\nconst SH = 256;\nconst SN = SW * SH;\n// The ring: its centre column, its row, its radius and how far its front\n// hangs below its back. Then the round window behind it and the first row\n// of the floor.\nconst CX = 31.5;\nconst RY = 12;\nconst RR = 22;\nconst RE = 3.6;\nconst WY = 60;\nconst WR = 26;\nconst FLOOR = 121;\nconst MAXS = 16;\nconst { sin, cos, min, max, floor, round, sqrt, exp, hypot, PI } = Math;\nconst TAU = 2 * PI;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\n\nfunction hsv(h, s, v) {\n  h = (h - floor(h)) * 6;\n  const i = floor(h) % 6;\n  const f = h - floor(h);\n  const p = v * (1 - s);\n  const q = v * (1 - s * f);\n  const t = v * (1 - s * (1 - f));\n  return [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][i];\n}\n\n// A folded crane, head forward along -x, up along y, wings out along z. Each\n// face is one flat facet of the paper; the far side mirrors the near one.\nconst PT = {\n  F: [-2.3, 0.3, 0], B: [2.3, 0.3, 0], D: [0, -1.9, 0], S: [0, 0, 1.3],\n  W0: [-2.4, 0.5, 0.3], W1: [2.4, 0.5, 0.3], Wm: [0.3, -0.4, 1.3], Wt: [1.5, 2.4, 4.8],\n  N0: [-1, -1.6, 0.6], N1: [-3.4, 0.9, 0], Nt: [-4.9, 5.4, 0], H0: [-4.1, 5.8, 0.4], Hp: [-6.6, 4.1, 0],\n  T0: [1, -1.6, 0.6], T1: [3.4, 0.9, 0], Tt: [5.3, 5.8, 0],\n};\nconst MESH = Float32Array.from(\n  [1, -1].flatMap((s) =>\n    \"F S D,S B D,W0 Wm Wt,Wm W1 Wt,N0 N1 Nt,Nt H0 Hp,T0 T1 Tt\"\n      .split(\",\")\n      .flatMap((f) => f.split(\" \").flatMap((k) => [PT[k][0], PT[k][1], PT[k][2] * s])),\n  ),\n);\nconst TV = new Float32Array(9);\nconst CE = cos(0.38);\nconst SE = sin(0.38);\nconst GOLD = [1, 0.74, 0.3];\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, {\n    cb: new Float32Array(SN * 3),\n    zb: new Float32Array(SN),\n    bg: new Float32Array(N * 3),\n    rec: new Float32Array(N),\n    grain: Float32Array.from({ length: N }, () => rnd() - 0.5),\n    key: \"\",\n    started: false,\n    ph: 0,\n    psi: 0,\n    vpsi: 0,\n    gust: 0,\n    gx: -30,\n    next: 7,\n    fall: [],\n    paper: 0,\n    B: 2,\n    n: 8,\n    light: 0.06,\n  });\n  P.S = Array.from({ length: MAXS }, () => ({\n    ax: 0, vx: 0, az: 0, vz: 0, tw: 0, vt: 0,\n    p: rnd() * TAU, q: rnd() * TAU, cut: floor(rnd() * 3.6), dir: rnd() \u003c 0.5 ? 0 : PI, hj: (rnd() - 0.5) * 0.05, lost: 0,\n  }));\n}\n\n// Crane size, spacing and count for the strand count.\nfunction layout(n) {\n  const k = 1.45 - 0.04 * n;\n  const dy = 6.6 * k + 1;\n  return { k, dy, nmax: floor((104 - RY - 7) / dy) + 1 };\n}\n\nfunction gust(P, g, loosen) {\n  P.gust = max(P.gust, g);\n  P.gx = -12;\n  P.vpsi += 0.35 * g * (rnd() \u003c 0.5 ? -1 : 1);\n  for (let s = 0; s \u003c MAXS; s++) P.S[s].vt += g * (2 + 3 * rnd()) * (rnd() \u003c 0.5 ? -1 : 1);\n  if (!loosen) return;\n  // The bottom crane of the nearest strand that still has a few slips off.\n  const { nmax, dy } = layout(P.n);\n  let best = -1;\n  let bz = -2;\n  for (let s = 0; s \u003c P.n; s++) {\n    const st = P.S[s];\n    const sa = sin(P.psi + ((s + 0.25) / P.n) * TAU);\n    if (st.lost \u003c 2 && nmax - st.cut - st.lost > 5 && sa > bz) {\n      bz = sa;\n      best = s;\n    }\n  }\n  if (best \u003c 0) return;\n  const st = P.S[best];\n  const i = nmax - st.cut - st.lost - 1;\n  st.lost++;\n  const phi = P.psi + ((best + 0.25) / P.n) * TAU;\n  const u = (7 + i * dy) / 100;\n  const z = RR * sin(phi);\n  const x = CX + (RR * cos(phi) + st.ax * u) * (1 + z * 0.004);\n  P.fall.push({ x, x0: x, y: RY + RE * sin(phi) + 7 + i * dy, z: z + 4, yaw: -phi, t: 0, i, s: best, down: false });\n  if (P.fall.length > 5) P.fall.shift();\n}\n\nfunction step(P, h) {\n  const B = P.B;\n  P.ph += h * (0.35 + 0.65 * sqrt(B / 2));\n  const T = P.ph;\n  if ((P.next -= h) \u003c= 0) {\n    gust(P, 0.35 + 0.3 * rnd(), false);\n    P.next = 6 + 7 * rnd();\n  }\n  P.gust *= exp(-h / 1.8);\n  P.gx += h * 36;\n  const n = P.n;\n  for (let s = 0; s \u003c n; s++) {\n    const st = P.S[s];\n    const phi = P.psi + ((s + 0.25) / n) * TAU;\n    const x = CX + RR * cos(phi);\n    // The draught: a lean to the right that breathes, a flutter that runs\n    // across the bundle, and the gust front passing left to right.\n    const front = 1 / (1 + exp((x - P.gx) / 6));\n    const wind = 3 * B * (0.4 + 0.6 * sin(0.61 * T + st.p) + 0.35 * sin(1.37 * T - 0.06 * x + st.q)) + (3 + 2.5 * B) * P.gust * front;\n    st.vx += h * (5.5 * (wind - st.ax) - 1.1 * st.vx);\n    st.ax += h * st.vx;\n    const wz = 2 * B * sin(0.43 * T + st.q) + 3 * B * P.gust * front * sin(st.p);\n    st.vz += h * (5.5 * (wz - st.az) - 1.1 * st.vz);\n    st.az += h * st.vz;\n    const tq = 0.3 * B * sin(0.53 * T + 2 * st.p);\n    st.vt += h * (3 * (tq - st.tw) - 0.45 * st.vt);\n    st.tw += h * st.vt;\n  }\n  // The whole hanging twists on its one cord.\n  const tr = 0.16 * B * sin(0.23 * T) + 0.06 * B * sin(0.67 * T + 1);\n  P.vpsi += h * (1.4 * (tr - P.psi) - 0.35 * P.vpsi);\n  P.psi += h * P.vpsi;\n  // A loose crane glides down like a leaf, rocking and turning.\n  for (const f of P.fall) {\n    if (f.down) continue;\n    f.t += h;\n    const sw = sin(2.1 * f.t);\n    f.y += h * (8 + 10 * sw * sw);\n    f.x = f.x0 + 7 * sin(2.1 * f.t - 0.3) * min(1, f.t);\n    f.yaw += h * 1.6;\n    f.roll = 0.55 * cos(2.1 * f.t) * min(1, f.t * 2);\n    if (f.y >= FLOOR + 2.6) {\n      f.y = FLOOR + 2.6;\n      f.roll = 0;\n      f.down = true;\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  P.paper = clamp(k[0], 0, 1);\n  P.B = clamp(k[1], 0.2, 3);\n  P.n = clamp(round(k[2]), 8, MAXS);\n  P.light = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    for (let i = 0; i \u003c 60; i++) step(P, 1 / 15);\n  }\n  if (input.btnPressed && input.btnPressed[0]) gust(P, 1, true);\n  for (let i = 0; i \u003c 2; i++) step(P, dt / 2);\n}\n\n// The room: dark wood boards, a round shoji window behind the cranes, the\n// lamp, a polished floor. Kept until the light changes.\nfunction room(P) {\n  const k = P.light;\n  const night = 1 - k;\n  const pap = k \u003c 0.5 ? mix3([0.1, 0.15, 0.38], [0.66, 0.38, 0.4], k * 2) : mix3([0.66, 0.38, 0.4], [0.94, 0.88, 0.74], k * 2 - 1);\n  const { bg, rec, grain } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      const g = grain[p];\n      const dx = x - 31.5;\n      const dy = y - WY;\n      const lamp = night * exp(-((x - 7) * (x - 7)) / 700 - ((y - 106) * (y - 106)) / 2500);\n      const lit = 0.3 + 1.4 * lamp + 0.9 * k * (0.4 + (0.6 * x) / 63) * (1.1 - (0.5 * y) / 127);\n      const r = sqrt(dx * dx + dy * dy);\n      // Each LED is wood taking w of the light, plus paper glowing pp, and\n      // the cranes' shadows fall on it rc dark.\n      let w = 0;\n      let pp = 0;\n      let rc = 0.7;\n      if (y \u003c 3) w = y === 2 ? 0.35 : 0.7;\n      else if (y >= FLOOR) {\n        // Boards, and the window seen dimly in the polish.\n        const b = (y - FLOOR) % 3 === 0 ? 0.6 : 1;\n        w = 0.75 * b;\n        pp = exp(-(dx * dx) / 500) * 0.22 * b;\n      } else if (x \u003c 3 || x > 60) w = x === 2 || x === 61 ? 0.8 : 0.53;\n      else if (r \u003c WR) {\n        // Paper between the kumiko bars, brightest where the moon or sun is.\n        const spot = exp(-((dx - 10) * (dx - 10) + (dy + 12) * (dy + 12)) / 500);\n        const bar = (x + 1) % 7 === 0 || (y - WY + 99) % 9 === 0;\n        pp = (0.62 + 0.55 * spot + 0.04 * g) * (bar ? 0.28 : 1);\n        rc = 0.2;\n      } else if (r \u003c WR + 2.2) w = r \u003c WR + 1 ? 0.62 : 0.35;\n      else {\n        const tone = 0.8 + 0.25 * sin(floor((x + 3) / 7) * 12.9898) ** 2 + 0.12 * g;\n        w = 0.55 * tone * ((x + 3) % 7 === 0 ? 0.55 : 1);\n      }\n      w *= lit;\n      let cr = 0.42 * w + pap[0] * pp;\n      let cg = 0.26 * w + pap[1] * pp;\n      let cb = 0.15 * w + pap[2] * pp;\n      // The andon: a paper lamp on short legs in the corner, lit at night.\n      if (x >= 3 && x \u003c= 12 && y >= 98 && y \u003c FLOOR && (y \u003c 117 || x === 4 || x === 11)) {\n        rc = 0;\n        if (y >= 117 || x === 3 || x === 12 || y === 98 || y === 107 || y === 116) {\n          const f = 0.3 * (0.4 + lit);\n          cr = 0.42 * f;\n          cg = 0.26 * f;\n          cb = 0.15 * f;\n        } else {\n          const glow = night * (0.55 + 0.3 * exp(-((x - 7.5) * (x - 7.5)) / 6 - ((y - 106) * (y - 106)) / 40));\n          cr = 0.14 * lit + glow;\n          cg = 0.13 * lit + 0.62 * glow;\n          cb = 0.12 * lit + 0.26 * glow;\n        }\n      }\n      rec[p] = rc;\n      bg[o] = cr * 255;\n      bg[o + 1] = cg * 255;\n      bg[o + 2] = cb * 255;\n    }\n}\n\nfunction lights(P) {\n  const k = P.light;\n  const lx = mix(-0.8, 0.65, k);\n  const ly = mix(0.35, 0.6, k);\n  const lz = mix(0.6, 0.45, k);\n  const l = hypot(lx, ly, lz);\n  P.L = [lx / l, ly / l, lz / l];\n  const hl = hypot(P.L[0], P.L[1], P.L[2] + 1);\n  P.Hv = [P.L[0] / hl, P.L[1] / hl, (P.L[2] + 1) / hl];\n  P.lc = k \u003c 0.5 ? mix3([1, 0.8, 0.56], [1, 0.68, 0.6], k * 2) : mix3([1, 0.68, 0.6], [0.9, 0.95, 1], k * 2 - 1);\n  P.amb = mix3([0.14, 0.16, 0.3], [0.3, 0.29, 0.27], k);\n}\n\nfunction put(P, x, y, z, r, g, b) {\n  x = floor(x);\n  y = floor(y);\n  if (x \u003c 0 || x >= SW || y \u003c 0 || y >= SH) return;\n  const i = y * SW + x;\n  if (z \u003c= P.zb[i]) return;\n  P.zb[i] = z;\n  P.cb[i * 3] = r;\n  P.cb[i * 3 + 1] = g;\n  P.cb[i * 3 + 2] = b;\n}\n\nfunction line(P, x0, y0, z0, x1, y1, z1, c) {\n  const n = max(1, Math.ceil(max(Math.abs(x1 - x0), Math.abs(y1 - y0))));\n  for (let j = 0; j \u003c= n; j++) {\n    const t = j / n;\n    put(P, mix(x0, x1, t), mix(y0, y1, t), mix(z0, z1, t), c[0], c[1], c[2]);\n  }\n}\n\n// A lit sphere: a bead or the knot over the ring.\nfunction bead(P, x, y, z, rad, col, occl) {\n  const { L, Hv, lc, amb } = P;\n  for (let j = floor(y - rad); j \u003c= y + rad; j++)\n    for (let i = floor(x - rad); i \u003c= x + rad; i++) {\n      const nx = (i + 0.5 - x) / rad;\n      const ny = -(j + 0.5 - y) / rad;\n      const q = 1 - nx * nx - ny * ny;\n      if (q \u003c 0) continue;\n      const nz = sqrt(q);\n      const d = max(0, nx * L[0] + ny * L[1] + nz * L[2]);\n      const sp = 0.9 * max(0, nx * Hv[0] + ny * Hv[1] + nz * Hv[2]) ** 10;\n      const f = 255 * occl;\n      put(P, i, j, z + nz * rad * 0.5, f * (col[0] * (amb[0] + 1.2 * d * lc[0]) + sp * lc[0]), f * (col[1] * (amb[1] + 1.2 * d * lc[1]) + sp * lc[1]), f * (col[2] * (amb[2] + 1.2 * d * lc[2]) + sp * lc[2]));\n    }\n}\n\nfunction tri(P, x0, y0, z0, x1, y1, z1, x2, y2, z2, r, g, b) {\n  const A = (x1 - x0) * (y2 - y0) - (x2 - x0) * (y1 - y0);\n  if (A > -0.02 && A \u003c 0.02) return;\n  const ia = 1 / A;\n  const xa = max(0, floor(min(x0, x1, x2)));\n  const xb = min(SW - 1, floor(max(x0, x1, x2)));\n  const ya = max(0, floor(min(y0, y1, y2)));\n  const yb = min(SH - 1, floor(max(y0, y1, y2)));\n  const { zb, cb } = P;\n  for (let y = ya; y \u003c= yb; y++) {\n    const py = y + 0.5;\n    for (let x = xa; x \u003c= xb; x++) {\n      const px = x + 0.5;\n      const w0 = ((x1 - px) * (y2 - py) - (x2 - px) * (y1 - py)) * ia;\n      const w1 = ((x2 - px) * (y0 - py) - (x0 - px) * (y2 - py)) * ia;\n      const w2 = 1 - w0 - w1;\n      if (w0 \u003c 0 || w1 \u003c 0 || w2 \u003c 0) continue;\n      const z = w0 * z0 + w1 * z1 + w2 * z2;\n      const i = y * SW + x;\n      if (z \u003c= zb[i]) continue;\n      zb[i] = z;\n      cb[i * 3] = r;\n      cb[i * 3 + 1] = g;\n      cb[i * 3 + 2] = b;\n    }\n  }\n}\n\n// One crane at screen point (cx, cy) in LEDs, depth cz, size k, turned yaw\n// about its thread and tilted roll in the picture plane. Each facet is lit\n// on its own: the side facing the lamp is bright, a facet that turns to\n// mirror the lamp into the room flashes.\nfunction crane(P, cx, cy, cz, k, yaw, roll, col, occl, gold) {\n  const cw = cos(yaw);\n  const sw = sin(yaw);\n  const cr = cos(roll);\n  const sr = sin(roll);\n  const { L, Hv, lc, amb } = P;\n  const shine = gold ? 1.1 : 0.35;\n  const pw = gold ? 6 : 14;\n  for (let t = 0; t \u003c MESH.length; t += 9) {\n    for (let v = 0; v \u003c 9; v += 3) {\n      const x = MESH[t + v];\n      const y = MESH[t + v + 1];\n      const z = MESH[t + v + 2];\n      const x1 = x * cw + z * sw;\n      const z1 = z * cw - x * sw;\n      const y1 = x1 * sr + y * cr;\n      // Seen from a little above.\n      TV[v] = x1 * cr - y * sr;\n      TV[v + 1] = y1 * CE - z1 * SE;\n      TV[v + 2] = y1 * SE + z1 * CE;\n    }\n    const ax = TV[3] - TV[0];\n    const ay = TV[4] - TV[1];\n    const az = TV[5] - TV[2];\n    const bx = TV[6] - TV[0];\n    const by = TV[7] - TV[1];\n    const bz = TV[8] - TV[2];\n    let nx = ay * bz - az * by;\n    let ny = az * bx - ax * bz;\n    let nz = ax * by - ay * bx;\n    let nl = sqrt(nx * nx + ny * ny + nz * nz);\n    if (nl \u003c 1e-6) continue;\n    // Paper has two sides: light the one that faces us.\n    if (nz \u003c 0) nl = -nl;\n    nx /= nl;\n    ny /= nl;\n    nz /= nl;\n    // Paper lets a little light round the fold, so no facet goes black.\n    const d = max(0, nx * L[0] + ny * L[1] + nz * L[2] + 0.35) / 1.35;\n    const sp = shine * max(0, nx * Hv[0] + ny * Hv[1] + nz * Hv[2]) ** pw;\n    const r = 255 * occl * (col[0] * (amb[0] + 1.15 * d * lc[0]) + sp * lc[0]);\n    const g = 255 * occl * (col[1] * (amb[1] + 1.15 * d * lc[1]) + sp * lc[1]);\n    const b = 255 * occl * (col[2] * (amb[2] + 1.15 * d * lc[2]) + sp * lc[2]);\n    tri(P, 2 * (cx + k * TV[0]), 2 * (cy - k * TV[1]), cz + k * TV[2], 2 * (cx + k * TV[3]), 2 * (cy - k * TV[4]), cz + k * TV[5], 2 * (cx + k * TV[6]), 2 * (cy - k * TV[7]), cz + k * TV[8], r, g, b);\n  }\n}\n\n// The colour of crane i from the top: bands from orange through the\n// rainbow, under a first crane of gold foil on every strand.\nfunction paperOf(P, i, nmax, st) {\n  if (i === 0) return GOLD;\n  const c = hsv(P.paper + 0.12 + (0.76 * (i - 1)) / max(1, nmax - 2) + st.hj, 0.82, 1);\n  return [c[0] * 0.92 + 0.08, c[1] * 0.92 + 0.08, c[2] * 0.92 + 0.08];\n}\n\nfunction hanging(P) {\n  const { nmax, k, dy } = layout(P.n);\n  const n = P.n;\n  const { lc, amb } = P;\n  const thread = [0.86, 0.8, 0.7];\n  const silk = [0.95, 0.2, 0.14];\n  for (let s = 0; s \u003c n; s++) {\n    const st = P.S[s];\n    const phi = P.psi + ((s + 0.25) / n) * TAU;\n    const ca = cos(phi);\n    const sa = sin(phi);\n    const ya = RY + RE * sa;\n    // The inside of the bundle is in shade.\n    const occl = 0.4 + 0.6 * (0.5 + 0.5 * sa);\n    const cnt = nmax - st.cut - st.lost;\n    const tc = thread.map((v, m) => 255 * occl * v * (amb[m] + 0.55 * lc[m]));\n    let px = 2 * (CX + RR * ca * (1 + RR * sa * 0.004));\n    let py = 2 * ya;\n    let pz = RR * sa - 2;\n    const pts = [];\n    for (let i = 0; i \u003c= cnt; i++) {\n      const yy = 7 + i * dy - (i === cnt ? dy * 0.35 : 0);\n      const u = yy / 100;\n      const dx = st.ax * u + 0.7 * P.B * u * sin(2.1 * P.ph - 3.2 * u + st.p);\n      const z = RR * sa + st.az * u;\n      const pp = 1 + z * 0.004;\n      const x = CX + (RR * ca + dx) * pp;\n      const y = ya + yy;\n      line(P, px, py, pz, 2 * x, 2 * y, z - 2 * k, tc);\n      px = 2 * x;\n      py = 2 * y;\n      pz = z - 2 * k;\n      pts.push([x, y, z, pp, u]);\n    }\n    for (let i = 0; i \u003c cnt; i++) {\n      const [x, y, z, pp, u] = pts[i];\n      const slope = (pts[i + 1][0] - x) / dy;\n      const yaw = -phi - PI / 2 + st.dir + st.tw * (0.3 + u) + (0.25 + 0.2 * P.B) * sin(1.3 * P.ph - 0.6 * i + st.q);\n      crane(P, x, y, z, k * pp, yaw, -slope, paperOf(P, i, nmax, st), occl, i === 0);\n    }\n    // A gold bead and a silk tassel that trails the swing.\n    const [x, y, z] = pts[cnt];\n    bead(P, 2 * x, 2 * y, z, 2 * k + 0.2, GOLD, occl);\n    const lag = -0.25 * st.vx;\n    const sc = silk.map((v, m) => 255 * occl * v * (amb[m] + 0.9 * lc[m]));\n    const len = round(15 * k);\n    for (let j = 0; j \u003c len; j++) {\n      const hw = (1.1 + j * 0.13) * k;\n      const xc = 2 * x + lag * j * 0.1;\n      for (let xx = floor(xc - hw); xx \u003c= xc + hw; xx++) {\n        const f = (xx & 1 ? 0.7 : 1) * (j > len - 3 ? 0.75 : 1);\n        put(P, xx, 2 * y + 2 + j, z, sc[0] * f, sc[1] * f, sc[2] * f);\n      }\n    }\n  }\n}\n\nfunction ring(P) {\n  const { L, Hv, lc, amb } = P;\n  for (let a = 0; a \u003c TAU; a += 0.01) {\n    const ca = cos(a);\n    const sa = sin(a);\n    const z = RR * sa;\n    const x = 2 * (CX + RR * ca * (1 + z * 0.004));\n    const y = 2 * (RY + RE * sa);\n    const occl = 0.45 + 0.55 * (0.5 + 0.5 * sa);\n    // Lacquered wood, round in section: lit on top and toward the lamp.\n    for (let q = -2; q \u003c= 1; q++) {\n      const ny = -(q + 0.5) * 0.7;\n      const nl = sqrt(1 + ny * ny);\n      const d = max(0, (ca * L[0] + ny * L[1] + sa * L[2]) / nl);\n      const sp = 0.8 * max(0, (ca * Hv[0] + ny * Hv[1] + sa * Hv[2]) / nl) ** 12;\n      const f = 255 * occl;\n      put(P, x, y + q, z + 1, f * (0.85 * (amb[0] + 1.1 * d * lc[0]) + sp * lc[0]), f * (0.16 * (amb[1] + 1.1 * d * lc[1]) + sp * lc[1]), f * (0.09 * (amb[2] + 1.1 * d * lc[2]) + sp * lc[2]));\n    }\n  }\n  // Four cords up to a knot under the beam.\n  const cc = [0.9, 0.75, 0.4].map((v, m) => 255 * v * (amb[m] + 0.6 * lc[m]));\n  for (let j = 0; j \u003c 4; j++) {\n    const a = P.psi + PI / 4 + (j * PI) / 2;\n    const z = RR * sin(a);\n    line(P, 2 * (CX + RR * cos(a) * (1 + z * 0.004)), 2 * (RY + RE * sin(a)), z, 2 * CX, 10, 0, cc);\n  }\n  line(P, 2 * CX, 0, 0, 2 * CX, 10, 0, cc);\n  bead(P, 2 * CX, 10, 1, 3.2, [0.9, 0.16, 0.12], 1);\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  if (!P.S) return;\n  const key = `${P.light}`;\n  if (key !== P.key) {\n    P.key = key;\n    room(P);\n  }\n  lights(P);\n  P.zb.fill(-1e9);\n  ring(P);\n  hanging(P);\n  const { nmax, k } = layout(P.n);\n  for (const f of P.fall) crane(P, f.x, f.y, f.z, k, f.yaw, f.roll || 0, paperOf(P, f.i, nmax, P.S[f.s]), 1, false);\n  const { zb, cb, bg, rec, L } = P;\n  // The cranes' shadows on the wall, thrown away from the light.\n  const ox = round(clamp((-L[0] / L[2]) * 16, -24, 24));\n  const oy = round(clamp((L[1] / L[2]) * 16, -16, 16));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      let c = 0;\n      for (let q = 0; q \u003c 4; q++) {\n        const i = (2 * y + (q >> 1)) * SW + 2 * x + (q & 1);\n        if (zb[i] > -1e8) {\n          r += cb[i * 3];\n          g += cb[i * 3 + 1];\n          b += cb[i * 3 + 2];\n          c++;\n        }\n      }\n      const o = (y * W + x) * 3;\n      // Thin paper edges count a little more than their share, so a neck\n      // half an LED wide still shows.\n      const a = min(1, c * 0.36);\n      const f = 1 - a;\n      const ic = c ? a / c : 0;\n      const sx = 2 * x - ox;\n      const sy = 2 * y - oy;\n      const sh = f * (sx >= 0 && sx \u003c SW && sy >= 0 && sy \u003c SH && zb[sy * SW + sx] > -1e8 ? 1 - 0.6 * rec[o / 3] : 1);\n      display.setPixel(x, y, min(255, r * ic + sh * bg[o]), min(255, g * ic + sh * bg[o + 1]), min(255, b * ic + sh * bg[o + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Paper=0..1, Breeze=0.2..3, Strands=8..16, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Paper","min":0,"max":1,"about":"Which colours the cranes are folded from: under a row of gold foil cranes at the ring, the bands run from orange through green and blue to violet and pink at the tassels at 0, and turning it moves every band along the rainbow."},{"name":"Breeze","min":0.2,"max":3,"about":"How hard the draught blows: at 0.2 the strands hang almost still, at 2 they lean and sway and the cranes turn, at 3 they swing wide and spin."},{"name":"Strands","min":8,"max":16,"about":"How many strands hang from the ring, from 8 to 16; with more strands the cranes are folded smaller and each strand carries more of them."},{"name":"Light","min":0,"max":1,"about":"Where the light comes from: a paper lamp low on the left at night at 0, with the round window blue with moonlight, through dusk to daylight from the upper right at 1. The lit folds and the cranes' shadows on the wall swing with it."}],"start":[0,2,8,0.06],"measures":{"motion":0.5463,"detail":0.1059,"edges":0.4439,"complexity":2.0626,"coverage":0.7211,"colour":0.2483,"drift":0.1023},"knobResponse":[0.0684,0.1034,0.1073,0.1606]},{"slug":"sequins","title":"Sequins","family":"textile","round":23,"note":"뒤집히는 스팽글을 촘촘히 단 쿠션이 패널을 채워요. 은빛 비늘이 엇갈린 줄로 겹쳐 있고, 보이지 않는 손끝이 지나가면 스팽글이 차례로 모서리를 보이며 넘어가 하트, 별, 고양이 얼굴, 번개, 파도를 분홍 면으로 그려요. 손바닥이 위에서 아래로 쓸면 다시 은빛이 돼요.","idea":"A cushion of reversible flip sequins fills the panel under a lamp, silver scales in staggered rows, and an unseen fingertip strokes a heart, a star, a cat's face, a lightning bolt and a wave into it one after another, each sequin it passes turning edge on and over to its coloured side, until a flat palm sweeps the cushion silver again.","buttons":"K1 tap sweeps the palm down the cushion now and the next drawing starts.","code":"// ===== Patternflow pattern =====\n// Title:   Sequins\n// Family:  textile\n// Idea:    A cushion of reversible flip sequins fills the panel under a lamp, silver scales in staggered rows, and an unseen fingertip strokes a heart, a star, a cat's face, a lightning bolt and a wave into it one after another, each sequin it passes turning edge on and over to its coloured side, until a flat palm sweeps the cushion silver again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after reversible flip-sequin fabric\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drawing=0..4, Lamp=0..1\n//\n// Knob 1: Hue. The colour on the back of the sequins: hot pink at 0, then on through red, gold, green and blue to violet, and pink again at 1.\n// Knob 2: Speed. How fast the fingertip draws and the palm sweeps: at 2 a drawing takes about four seconds and a round seven; at 0.2 everything runs ten times slower.\n// Knob 3: Drawing. What the fingertip draws next: a heart, a star, a cat's face, a lightning bolt or a wave, the rest following in that order. Turning it sweeps the cushion silver and starts the new one.\n// Knob 4: Lamp. Where the lamp stands above the cushion, from upper left over the top to upper right: the highlight in every cupped sequin slides the other way, and the bright sheen across the cushion follows the lamp.\n// Buttons: K1 tap sweeps the palm down the cushion now and the next drawing starts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst NDRAW = 5;\nconst { min, max, sqrt, sin, cos, abs, floor, round, hypot, atan2, PI } = Math;\n// Sequins sit 5 LEDs apart in a row and rows 3 LEDs apart, every other row\n// shifted by half a sequin. Each is a disc a little wider than the spacing,\n// so the row above covers the top of the row below.\nconst PX = 5;\nconst PY = 3;\nconst R = 2.8;\nconst NC = floor(W / PX) + 2;\n// The round at Speed 2, in seconds: draw, hold, sweep, rest.\nconst TD = 4.2;\nconst TH = 1.8;\nconst TS = 0.8;\nconst TR = 0.3;\nconst TC = TD + TH + TS + TR;\n// One sequin takes this long to turn over.\nconst FL = 0.16;\n// How far the fingertip reaches, in LEDs.\nconst REACH = 4.2;\n// The shading of one sequin. The part that shows sits low on the disc. The\n// sequins are cupped, so the lamp lights the inside wall away from it, where a\n// tight highlight sits. The rim nearest the lamp falls into shadow.\nconst SHOW = 0.5;\nconst SPOT = 0.45;\nconst SPOT2 = 0.15;\nconst RIM = 0.62;\n// Each sequin is tipped a little its own way and catches more or less lamp.\nconst GLA = 0.35;\nconst GLB = 0.9;\n// The coloured side reflects this share of what the silver side does.\nconst DIM = 0.24;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The sequins, listed bottom row first, so a later one lies over an earlier one.\nconst SX = [];\nconst SY = [];\nconst ROWS = floor(H / PY) + 1;\nfor (let k = ROWS - 1; k >= -1; k--)\n  for (let j = -1; j \u003c NC - 1; j++) {\n    SX.push(j * PX + ((k & 1) ? 0 : PX / 2));\n    SY.push(k * PY + 1.5);\n  }\nconst NS = SX.length;\n\n// The drawings, as shapes in LED coordinates: true inside.\nfunction inPoly(x, y, pts) {\n  let c = false;\n  for (let i = 0, j = pts.length - 2; i \u003c pts.length; j = i, i += 2) {\n    const xi = pts[i];\n    const yi = pts[i + 1];\n    const xj = pts[j];\n    const yj = pts[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) c = !c;\n  }\n  return c;\n}\nfunction heart(x, y) {\n  const X = (x - 32) / 26;\n  const Y = (35 - y) / 26;\n  const a = X * X + Y * Y - 1;\n  return a * a * a - X * X * Y * Y * Y \u003c= 0;\n}\nfunction star(x, y) {\n  const dx = x - 32;\n  const dy = y - 66;\n  const r = hypot(dx, dy);\n  const t = (((atan2(dx, -dy) / (2 * PI)) * 5) % 1 + 1) % 1;\n  const e = abs(t - 0.5) * 2;\n  return r \u003c 13 + 19 * e * e;\n}\nfunction cat(x, y) {\n  const dx = x - 32;\n  const dy = y - 66;\n  const head = (dx / 22) ** 2 + (dy / 19) ** 2 \u003c 1;\n  const ears = inPoly(x, y, [11, 60, 13, 34, 28, 50]) || inPoly(x, y, [53, 60, 51, 34, 36, 50]);\n  const eyes = ((abs(dx) - 8.5) / 4.6) ** 2 + ((dy + 3) / 5.5) ** 2 \u003c 1;\n  const nose = inPoly(x, y, [28.5, 71, 35.5, 71, 32, 76]);\n  // Whiskers reach out past the cheeks, two to a side.\n  const ax = abs(dx);\n  const wh = ax > 21 && (abs(dy - 3 + (ax - 21) * 0.35) \u003c 1.6 || abs(dy - 8 - (ax - 21) * 0.2) \u003c 1.6);\n  return ((head || ears) && !eyes && !nose) || wh;\n}\nconst BOLT = [40, 0, 58, 0, 38, 48, 55, 48, 14, 128, 26, 66, 8, 66];\nconst bolt = (x, y) => inPoly(x, y, BOLT);\n// The sea, with one wave standing up and curling over to the left.\nfunction wave(x, y) {\n  const sea = y > 77 + 2.5 * sin(x * 0.35 + 1);\n  const back = x > 28 && y > 40 + (x - 28) ** 2 / 20;\n  const curl = hypot(x - 29, y - 52) \u003c 14 && hypot(x - 24, y - 60) > 6.5 && y \u003c 64;\n  const face = y > 56 && x > 31 - (y - 58) * 0.9 && x \u003c 36;\n  return sea || back || curl || face;\n}\nconst DRAWINGS = [heart, star, cat, bolt, wave];\n// How the fingertip colours each one in: the angle of its strokes.\nconst STROKE = [0.35, -0.5, 0, 1.25, 0.12];\n\nexport function setup(params) {\n  params.sq = {\n    p: new Float32Array(NS),\n    on: new Uint8Array(NS),\n    tOn: new Float32Array(NS),\n    tOff: new Float32Array(NS),\n    jit: new Float32Array(NS),\n    r: new Float32Array(N),\n    g: new Float32Array(N),\n    b: new Float32Array(N),\n    own: new Int32Array(N),\n    started: false,\n  };\n  const S = params.sq;\n  for (let i = 0; i \u003c NS; i++) S.jit[i] = GLA + GLB * hash(i);\n}\n\n// The fingertip's path: strokes back and forth across the shape at an angle,\n// a little different each time.\nfunction load(S, d) {\n  const fn = DRAWINGS[d];\n  const a = STROKE[d] + (Math.random() - 0.5) * 0.3;\n  const ux = cos(a);\n  const uy = sin(a);\n  const pts = [];\n  let m = 0;\n  for (let s = -76; s \u003c= 76; s += 6, m++) {\n    const segs = [];\n    let t0 = null;\n    for (let t = -76; t \u003c= 77; t++) {\n      const x = 32 - uy * s + ux * t;\n      const y = 64 + ux * s + uy * t;\n      const inside = t \u003c 77 && x >= 0 && x \u003c W && y >= 0 && y \u003c H && fn(x, y);\n      if (inside && t0 === null) t0 = t;\n      if (!inside && t0 !== null) {\n        segs.push(t0, t - 1);\n        t0 = null;\n      }\n    }\n    if (m & 1) segs.reverse();\n    for (const t of segs) pts.push(32 - uy * s + ux * t, 64 + ux * s + uy * t);\n  }\n  // Each sequin in the shape turns when the fingertip first comes within reach.\n  let len = 0;\n  for (let i = 2; i \u003c pts.length; i += 2) len += hypot(pts[i] - pts[i - 2], pts[i + 1] - pts[i - 1]);\n  for (let n = 0; n \u003c NS; n++) {\n    S.tOn[n] = 1e9;\n    const cx = SX[n];\n    const cy = SY[n];\n    if (cx \u003c 0 || cx >= W || cy \u003c 0 || cy >= H || !fn(cx, cy)) continue;\n    let at = 0;\n    let hit = len;\n    for (let i = 0; i + 2 \u003c pts.length; i += 2) {\n      const dx = pts[i + 2] - pts[i];\n      const dy = pts[i + 3] - pts[i + 1];\n      const l = hypot(dx, dy) || 1e-6;\n      const fx = pts[i] - cx;\n      const fy = pts[i + 1] - cy;\n      const bb = (fx * dx + fy * dy) / l;\n      const cc = fx * fx + fy * fy - REACH * REACH;\n      const disc = bb * bb - cc;\n      if (disc >= 0) {\n        const t = cc \u003c= 0 ? 0 : -bb - sqrt(disc);\n        if (t >= 0 && t \u003c= l) {\n          hit = at + t;\n          break;\n        }\n      }\n      at += l;\n    }\n    S.tOn[n] = (0.1 + (hit / len) * 0.86) * TD;\n  }\n  // The palm comes down from the top, its lower edge a little uneven.\n  const lean = Math.random() - 0.5;\n  for (let n = 0; n \u003c NS; n++) S.tOff[n] = clamp((SY[n] + 10 + 5 * sin(SX[n] * 0.09 + lean * 3) + lean * (SX[n] - 32) * 0.3) / (H + 24), 0, 1) * TS * 0.9;\n}\n\nfunction sweep(S) {\n  if (S.c \u003c TD + TH) S.c = TD + TH;\n}\n\nexport function update(dt, input, params) {\n  if (!params.sq) setup(params);\n  const S = params.sq;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.hue = clamp(k[0], 0, 1);\n  S.rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, NDRAW - 1);\n  S.lamp = clamp(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    S.base = base;\n    S.count = -1;\n    // Open on the drawing before, just finished, a little before the palm.\n    load(S, (base + NDRAW - 1) % NDRAW);\n    S.c = TD + TH - 2.4 * S.rate;\n    for (let i = 0; i \u003c NS; i++) {\n      S.on[i] = S.tOn[i] \u003c= S.c ? 1 : 0;\n      S.p[i] = S.on[i];\n    }\n  }\n  if (base !== S.base) {\n    S.base = base;\n    S.count = -1;\n    sweep(S);\n  }\n  if (input.btnPressed && input.btnPressed[0]) sweep(S);\n  S.c += dt * S.rate;\n  if (S.c >= TC) {\n    S.c -= TC;\n    S.count++;\n    load(S, (S.base + S.count + NDRAW * 8) % NDRAW);\n  }\n  const { p, on, tOn, tOff } = S;\n  const c = S.c;\n  const sw = c - TD - TH;\n  for (let i = 0; i \u003c NS; i++) {\n    if (sw \u003c 0) {\n      if (c >= tOn[i]) on[i] = 1;\n    } else if (sw >= tOff[i]) on[i] = 0;\n    const step = (dt * S.rate) / FL;\n    p[i] = on[i] ? min(1, p[i] + step) : max(0, p[i] - step);\n  }\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function draw(display, params) {\n  const S = params.sq;\n  if (!S || !S.started) return;\n  const { p, jit, r, g, b, own } = S;\n  r.fill(0);\n  g.fill(0);\n  b.fill(0);\n  own.fill(-1);\n  // The lamp stands above the cushion, from upper left over to upper right.\n  const ang = PI * (0.78 - 0.56 * S.lamp);\n  const lx = cos(ang);\n  const ly = -sin(ang);\n  const tint = hsv((0.9 + S.hue) % 1, 0.9, 1);\n  for (let n = 0; n \u003c NS; n++) {\n    const cx = SX[n];\n    const cy = SY[n];\n    const cs = cos(PI * p[n]);\n    const back = cs \u003c 0;\n    const sy = max(0.55, R * abs(cs));\n    const edge = abs(cs) \u003c 0.4;\n    const x0 = max(0, Math.ceil(cx - R - 0.5));\n    const x1 = min(W - 1, floor(cx + R - 0.5));\n    const y0 = max(0, Math.ceil(cy - sy - 0.5));\n    const y1 = min(H - 1, floor(cy + sy - 0.5));\n    // The sheen: brighter toward the lamp, falling off to the cushion's sides.\n    const qx = cx - 32 - 34 * lx;\n    const qy = (cy - 64 - 56 * ly) * 0.6;\n    const sh = min(1, 0.76 + 0.3 * Math.exp(-(qx * qx + qy * qy) / 1500)) * (1 - 0.12 * ((cx - 32) / 36) ** 2);\n    const gl = jit[n];\n    // Tipping over, a sequin's face swings through the lamp's reflection.\n    const tip = 1 + 0.5 * sin(PI * p[n]) ** 2;\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const u = (x + 0.5 - cx) / R;\n        const v = (y + 0.5 - cy) / sy;\n        if (u * u + v * v > 1) continue;\n        const i = y * W + x;\n        own[i] = n;\n        if (edge) {\n          // Edge on: a thin line of bare metal.\n          const e = 150 * sh;\n          r[i] = e;\n          g[i] = e;\n          b[i] = e * 1.05;\n          continue;\n        }\n        const sv = (y + 0.5 - cy - SHOW * abs(cs)) / (0.9 * sy);\n        const su = (x + 0.5 - cx) / (0.9 * R);\n        const dot = su * lx + sv * ly;\n        const hx = su + SPOT * lx;\n        const hy = sv + SPOT * ly;\n        const hl = max(0, 1 - (hx * hx + hy * hy) / SPOT2);\n        let val = ((1 - 0.5 * dot) * gl + 0.7 * hl) * tip;\n        if (u * u + v * v > RIM) val *= dot > 0 ? 0.2 : 1.1;\n        if (!back) {\n          const e = 255 * val * sh;\n          r[i] = e * 0.9;\n          g[i] = e * 0.94;\n          b[i] = e;\n        } else {\n          // The coloured side is darker, but its highlight still bites.\n          const e = 255 * val * sh * DIM;\n          const w = 140 * sh * hl * hl * gl;\n          r[i] = e * tint[0] + w * (0.5 + 0.5 * tint[0]);\n          g[i] = e * tint[1] + w * (0.5 + 0.5 * tint[1]);\n          b[i] = e * tint[2] + w * (0.5 + 0.5 * tint[2]);\n        }\n      }\n  }\n  // Shadows: the lamp is above, so a sequin lying over another throws a thin\n  // shadow down from its lower edge onto the one below.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const f = y > 0 && own[i - W] > own[i] ? 0.1 : 1;\n      if (own[i] \u003c 0) {\n        display.setPixel(x, y, 10 * f, 9 * f, 12 * f);\n        continue;\n      }\n      display.setPixel(x, y, min(255, r[i] * f), min(255, g[i] * f), min(255, b[i] * f));\n    }\n}\n","layer":{"id":"layer-sequins","type":"code","name":"sequins","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sequins\n// Family:  textile\n// Idea:    A cushion of reversible flip sequins fills the panel under a lamp, silver scales in staggered rows, and an unseen fingertip strokes a heart, a star, a cat's face, a lightning bolt and a wave into it one after another, each sequin it passes turning edge on and over to its coloured side, until a flat palm sweeps the cushion silver again.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after reversible flip-sequin fabric\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Drawing=0..4, Lamp=0..1\n//\n// Knob 1: Hue. The colour on the back of the sequins: hot pink at 0, then on through red, gold, green and blue to violet, and pink again at 1.\n// Knob 2: Speed. How fast the fingertip draws and the palm sweeps: at 2 a drawing takes about four seconds and a round seven; at 0.2 everything runs ten times slower.\n// Knob 3: Drawing. What the fingertip draws next: a heart, a star, a cat's face, a lightning bolt or a wave, the rest following in that order. Turning it sweeps the cushion silver and starts the new one.\n// Knob 4: Lamp. Where the lamp stands above the cushion, from upper left over the top to upper right: the highlight in every cupped sequin slides the other way, and the bright sheen across the cushion follows the lamp.\n// Buttons: K1 tap sweeps the palm down the cushion now and the next drawing starts.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst NDRAW = 5;\nconst { min, max, sqrt, sin, cos, abs, floor, round, hypot, atan2, PI } = Math;\n// Sequins sit 5 LEDs apart in a row and rows 3 LEDs apart, every other row\n// shifted by half a sequin. Each is a disc a little wider than the spacing,\n// so the row above covers the top of the row below.\nconst PX = 5;\nconst PY = 3;\nconst R = 2.8;\nconst NC = floor(W / PX) + 2;\n// The round at Speed 2, in seconds: draw, hold, sweep, rest.\nconst TD = 4.2;\nconst TH = 1.8;\nconst TS = 0.8;\nconst TR = 0.3;\nconst TC = TD + TH + TS + TR;\n// One sequin takes this long to turn over.\nconst FL = 0.16;\n// How far the fingertip reaches, in LEDs.\nconst REACH = 4.2;\n// The shading of one sequin. The part that shows sits low on the disc. The\n// sequins are cupped, so the lamp lights the inside wall away from it, where a\n// tight highlight sits. The rim nearest the lamp falls into shadow.\nconst SHOW = 0.5;\nconst SPOT = 0.45;\nconst SPOT2 = 0.15;\nconst RIM = 0.62;\n// Each sequin is tipped a little its own way and catches more or less lamp.\nconst GLA = 0.35;\nconst GLB = 0.9;\n// The coloured side reflects this share of what the silver side does.\nconst DIM = 0.24;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst hash = (i) => {\n  let h = Math.imul(i ^ 0x9e3779b9, 0x85ebca6b);\n  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\n\n// The sequins, listed bottom row first, so a later one lies over an earlier one.\nconst SX = [];\nconst SY = [];\nconst ROWS = floor(H / PY) + 1;\nfor (let k = ROWS - 1; k >= -1; k--)\n  for (let j = -1; j \u003c NC - 1; j++) {\n    SX.push(j * PX + ((k & 1) ? 0 : PX / 2));\n    SY.push(k * PY + 1.5);\n  }\nconst NS = SX.length;\n\n// The drawings, as shapes in LED coordinates: true inside.\nfunction inPoly(x, y, pts) {\n  let c = false;\n  for (let i = 0, j = pts.length - 2; i \u003c pts.length; j = i, i += 2) {\n    const xi = pts[i];\n    const yi = pts[i + 1];\n    const xj = pts[j];\n    const yj = pts[j + 1];\n    if (yi > y !== yj > y && x \u003c ((xj - xi) * (y - yi)) / (yj - yi) + xi) c = !c;\n  }\n  return c;\n}\nfunction heart(x, y) {\n  const X = (x - 32) / 26;\n  const Y = (35 - y) / 26;\n  const a = X * X + Y * Y - 1;\n  return a * a * a - X * X * Y * Y * Y \u003c= 0;\n}\nfunction star(x, y) {\n  const dx = x - 32;\n  const dy = y - 66;\n  const r = hypot(dx, dy);\n  const t = (((atan2(dx, -dy) / (2 * PI)) * 5) % 1 + 1) % 1;\n  const e = abs(t - 0.5) * 2;\n  return r \u003c 13 + 19 * e * e;\n}\nfunction cat(x, y) {\n  const dx = x - 32;\n  const dy = y - 66;\n  const head = (dx / 22) ** 2 + (dy / 19) ** 2 \u003c 1;\n  const ears = inPoly(x, y, [11, 60, 13, 34, 28, 50]) || inPoly(x, y, [53, 60, 51, 34, 36, 50]);\n  const eyes = ((abs(dx) - 8.5) / 4.6) ** 2 + ((dy + 3) / 5.5) ** 2 \u003c 1;\n  const nose = inPoly(x, y, [28.5, 71, 35.5, 71, 32, 76]);\n  // Whiskers reach out past the cheeks, two to a side.\n  const ax = abs(dx);\n  const wh = ax > 21 && (abs(dy - 3 + (ax - 21) * 0.35) \u003c 1.6 || abs(dy - 8 - (ax - 21) * 0.2) \u003c 1.6);\n  return ((head || ears) && !eyes && !nose) || wh;\n}\nconst BOLT = [40, 0, 58, 0, 38, 48, 55, 48, 14, 128, 26, 66, 8, 66];\nconst bolt = (x, y) => inPoly(x, y, BOLT);\n// The sea, with one wave standing up and curling over to the left.\nfunction wave(x, y) {\n  const sea = y > 77 + 2.5 * sin(x * 0.35 + 1);\n  const back = x > 28 && y > 40 + (x - 28) ** 2 / 20;\n  const curl = hypot(x - 29, y - 52) \u003c 14 && hypot(x - 24, y - 60) > 6.5 && y \u003c 64;\n  const face = y > 56 && x > 31 - (y - 58) * 0.9 && x \u003c 36;\n  return sea || back || curl || face;\n}\nconst DRAWINGS = [heart, star, cat, bolt, wave];\n// How the fingertip colours each one in: the angle of its strokes.\nconst STROKE = [0.35, -0.5, 0, 1.25, 0.12];\n\nexport function setup(params) {\n  params.sq = {\n    p: new Float32Array(NS),\n    on: new Uint8Array(NS),\n    tOn: new Float32Array(NS),\n    tOff: new Float32Array(NS),\n    jit: new Float32Array(NS),\n    r: new Float32Array(N),\n    g: new Float32Array(N),\n    b: new Float32Array(N),\n    own: new Int32Array(N),\n    started: false,\n  };\n  const S = params.sq;\n  for (let i = 0; i \u003c NS; i++) S.jit[i] = GLA + GLB * hash(i);\n}\n\n// The fingertip's path: strokes back and forth across the shape at an angle,\n// a little different each time.\nfunction load(S, d) {\n  const fn = DRAWINGS[d];\n  const a = STROKE[d] + (Math.random() - 0.5) * 0.3;\n  const ux = cos(a);\n  const uy = sin(a);\n  const pts = [];\n  let m = 0;\n  for (let s = -76; s \u003c= 76; s += 6, m++) {\n    const segs = [];\n    let t0 = null;\n    for (let t = -76; t \u003c= 77; t++) {\n      const x = 32 - uy * s + ux * t;\n      const y = 64 + ux * s + uy * t;\n      const inside = t \u003c 77 && x >= 0 && x \u003c W && y >= 0 && y \u003c H && fn(x, y);\n      if (inside && t0 === null) t0 = t;\n      if (!inside && t0 !== null) {\n        segs.push(t0, t - 1);\n        t0 = null;\n      }\n    }\n    if (m & 1) segs.reverse();\n    for (const t of segs) pts.push(32 - uy * s + ux * t, 64 + ux * s + uy * t);\n  }\n  // Each sequin in the shape turns when the fingertip first comes within reach.\n  let len = 0;\n  for (let i = 2; i \u003c pts.length; i += 2) len += hypot(pts[i] - pts[i - 2], pts[i + 1] - pts[i - 1]);\n  for (let n = 0; n \u003c NS; n++) {\n    S.tOn[n] = 1e9;\n    const cx = SX[n];\n    const cy = SY[n];\n    if (cx \u003c 0 || cx >= W || cy \u003c 0 || cy >= H || !fn(cx, cy)) continue;\n    let at = 0;\n    let hit = len;\n    for (let i = 0; i + 2 \u003c pts.length; i += 2) {\n      const dx = pts[i + 2] - pts[i];\n      const dy = pts[i + 3] - pts[i + 1];\n      const l = hypot(dx, dy) || 1e-6;\n      const fx = pts[i] - cx;\n      const fy = pts[i + 1] - cy;\n      const bb = (fx * dx + fy * dy) / l;\n      const cc = fx * fx + fy * fy - REACH * REACH;\n      const disc = bb * bb - cc;\n      if (disc >= 0) {\n        const t = cc \u003c= 0 ? 0 : -bb - sqrt(disc);\n        if (t >= 0 && t \u003c= l) {\n          hit = at + t;\n          break;\n        }\n      }\n      at += l;\n    }\n    S.tOn[n] = (0.1 + (hit / len) * 0.86) * TD;\n  }\n  // The palm comes down from the top, its lower edge a little uneven.\n  const lean = Math.random() - 0.5;\n  for (let n = 0; n \u003c NS; n++) S.tOff[n] = clamp((SY[n] + 10 + 5 * sin(SX[n] * 0.09 + lean * 3) + lean * (SX[n] - 32) * 0.3) / (H + 24), 0, 1) * TS * 0.9;\n}\n\nfunction sweep(S) {\n  if (S.c \u003c TD + TH) S.c = TD + TH;\n}\n\nexport function update(dt, input, params) {\n  if (!params.sq) setup(params);\n  const S = params.sq;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.hue = clamp(k[0], 0, 1);\n  S.rate = clamp(k[1], 0.2, 3) / 2;\n  const base = clamp(round(k[2]), 0, NDRAW - 1);\n  S.lamp = clamp(k[3], 0, 1);\n  if (!S.started) {\n    S.started = true;\n    S.base = base;\n    S.count = -1;\n    // Open on the drawing before, just finished, a little before the palm.\n    load(S, (base + NDRAW - 1) % NDRAW);\n    S.c = TD + TH - 2.4 * S.rate;\n    for (let i = 0; i \u003c NS; i++) {\n      S.on[i] = S.tOn[i] \u003c= S.c ? 1 : 0;\n      S.p[i] = S.on[i];\n    }\n  }\n  if (base !== S.base) {\n    S.base = base;\n    S.count = -1;\n    sweep(S);\n  }\n  if (input.btnPressed && input.btnPressed[0]) sweep(S);\n  S.c += dt * S.rate;\n  if (S.c >= TC) {\n    S.c -= TC;\n    S.count++;\n    load(S, (S.base + S.count + NDRAW * 8) % NDRAW);\n  }\n  const { p, on, tOn, tOff } = S;\n  const c = S.c;\n  const sw = c - TD - TH;\n  for (let i = 0; i \u003c NS; i++) {\n    if (sw \u003c 0) {\n      if (c >= tOn[i]) on[i] = 1;\n    } else if (sw >= tOff[i]) on[i] = 0;\n    const step = (dt * S.rate) / FL;\n    p[i] = on[i] ? min(1, p[i] + step) : max(0, p[i] - step);\n  }\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v - v * s * max(0, min(k, 4 - k, 1));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nexport function draw(display, params) {\n  const S = params.sq;\n  if (!S || !S.started) return;\n  const { p, jit, r, g, b, own } = S;\n  r.fill(0);\n  g.fill(0);\n  b.fill(0);\n  own.fill(-1);\n  // The lamp stands above the cushion, from upper left over to upper right.\n  const ang = PI * (0.78 - 0.56 * S.lamp);\n  const lx = cos(ang);\n  const ly = -sin(ang);\n  const tint = hsv((0.9 + S.hue) % 1, 0.9, 1);\n  for (let n = 0; n \u003c NS; n++) {\n    const cx = SX[n];\n    const cy = SY[n];\n    const cs = cos(PI * p[n]);\n    const back = cs \u003c 0;\n    const sy = max(0.55, R * abs(cs));\n    const edge = abs(cs) \u003c 0.4;\n    const x0 = max(0, Math.ceil(cx - R - 0.5));\n    const x1 = min(W - 1, floor(cx + R - 0.5));\n    const y0 = max(0, Math.ceil(cy - sy - 0.5));\n    const y1 = min(H - 1, floor(cy + sy - 0.5));\n    // The sheen: brighter toward the lamp, falling off to the cushion's sides.\n    const qx = cx - 32 - 34 * lx;\n    const qy = (cy - 64 - 56 * ly) * 0.6;\n    const sh = min(1, 0.76 + 0.3 * Math.exp(-(qx * qx + qy * qy) / 1500)) * (1 - 0.12 * ((cx - 32) / 36) ** 2);\n    const gl = jit[n];\n    // Tipping over, a sequin's face swings through the lamp's reflection.\n    const tip = 1 + 0.5 * sin(PI * p[n]) ** 2;\n    for (let y = y0; y \u003c= y1; y++)\n      for (let x = x0; x \u003c= x1; x++) {\n        const u = (x + 0.5 - cx) / R;\n        const v = (y + 0.5 - cy) / sy;\n        if (u * u + v * v > 1) continue;\n        const i = y * W + x;\n        own[i] = n;\n        if (edge) {\n          // Edge on: a thin line of bare metal.\n          const e = 150 * sh;\n          r[i] = e;\n          g[i] = e;\n          b[i] = e * 1.05;\n          continue;\n        }\n        const sv = (y + 0.5 - cy - SHOW * abs(cs)) / (0.9 * sy);\n        const su = (x + 0.5 - cx) / (0.9 * R);\n        const dot = su * lx + sv * ly;\n        const hx = su + SPOT * lx;\n        const hy = sv + SPOT * ly;\n        const hl = max(0, 1 - (hx * hx + hy * hy) / SPOT2);\n        let val = ((1 - 0.5 * dot) * gl + 0.7 * hl) * tip;\n        if (u * u + v * v > RIM) val *= dot > 0 ? 0.2 : 1.1;\n        if (!back) {\n          const e = 255 * val * sh;\n          r[i] = e * 0.9;\n          g[i] = e * 0.94;\n          b[i] = e;\n        } else {\n          // The coloured side is darker, but its highlight still bites.\n          const e = 255 * val * sh * DIM;\n          const w = 140 * sh * hl * hl * gl;\n          r[i] = e * tint[0] + w * (0.5 + 0.5 * tint[0]);\n          g[i] = e * tint[1] + w * (0.5 + 0.5 * tint[1]);\n          b[i] = e * tint[2] + w * (0.5 + 0.5 * tint[2]);\n        }\n      }\n  }\n  // Shadows: the lamp is above, so a sequin lying over another throws a thin\n  // shadow down from its lower edge onto the one below.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const f = y > 0 && own[i - W] > own[i] ? 0.1 : 1;\n      if (own[i] \u003c 0) {\n        display.setPixel(x, y, 10 * f, 9 * f, 12 * f);\n        continue;\n      }\n      display.setPixel(x, y, min(255, r[i] * f), min(255, g[i] * f), min(255, b[i] * f));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Drawing=0..4, Lamp=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour on the back of the sequins: hot pink at 0, then on through red, gold, green and blue to violet, and pink again at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the fingertip draws and the palm sweeps: at 2 a drawing takes about four seconds and a round seven; at 0.2 everything runs ten times slower."},{"name":"Drawing","min":0,"max":4,"about":"What the fingertip draws next: a heart, a star, a cat's face, a lightning bolt or a wave, the rest following in that order. Turning it sweeps the cushion silver and starts the new one."},{"name":"Lamp","min":0,"max":1,"about":"Where the lamp stands above the cushion, from upper left over the top to upper right: the highlight in every cupped sequin slides the other way, and the bright sheen across the cushion follows the lamp."}],"start":[0,2,0,0.06],"measures":{"motion":0.1482,"detail":0.3266,"edges":0.6744,"complexity":1.7886,"coverage":0.647,"colour":0.0886,"drift":0.2495},"knobResponse":[0.0553,0.0492,0.2354,0.1678]},{"slug":"server-rack","title":"Server Rack","family":"circuit","round":18,"note":"앞에서 본 42U 서버 랙이 패널을 채워요. 맨 위 스위치로 들어온 트래픽이 서버를 타고 내려가며 드라이브 불을 켜고, 백업이 스토리지 선반의 드라이브를 차례로 채워요. K4 를 올리면 바닥 타일에서 올라온 푸른 냉기 빛이 아래쪽 앞판을 물들여요.","idea":"A 42U server rack seen from the front fills the panel, and traffic that reaches the switch at the top ripples down through the servers as bursts of drive light while a backup sweeps the storage shelves and the UPS at the bottom shows the load.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Server Rack\n// Family:  circuit\n// Idea:    A 42U server rack seen from the front fills the panel, and traffic that reaches the switch at the top ripples down through the servers as bursts of drive light while a backup sweeps the storage shelves and the UPS at the bottom shows the load.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the processor activity lights on the front of the Apple Xserve\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Load=0..1, Aisle=0..1\n//\n// Knob 1: Hue. The colour of the status lights: green at 0, then blue, violet and orange, green again at 1; a failed drive stays amber.\n// Knob 2: Speed. How fast the rack runs: at 2 the load rises and falls every 12 s, and every 10 s the backup writes all 65 storage drives in 4 s.\n// Knob 3: Load. At 0 each load wave lifts the meters from nearly empty to most of the way up; at 1 the rack is saturated, every meter stays near the top and the drive lights flicker about five times as often.\n// Knob 4: Aisle. Blue light from the perforated floor tiles in front of the rack, from nothing at 0 to a glow that washes the lower faceplates at 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rack units are 3 rows. Equipment sits between the posts, ears on columns 5 and 58.\nconst U = 3;\nconst X0 = 6;\nconst X1 = 57;\n// Top to bottom, unit by unit: what is mounted and how many units it takes.\nconst RACK = [\n  [\"patch\", 1], [\"manager\", 1], [\"switch\", 2], [\"manager\", 1],\n  [\"s1\", 1], [\"s1\", 1], [\"s1\", 1], [\"s1\", 1], [\"blank\", 1],\n  [\"s2\", 2], [\"s2\", 2], [\"s1\", 1], [\"s1\", 1], [\"s2\", 2], [\"blank\", 1],\n  [\"s2\", 2], [\"s1\", 1], [\"s1\", 1], [\"blank\", 1], [\"s2\", 2],\n  [\"head\", 2], [\"shelf\", 2], [\"shelf\", 2], [\"blank\", 1],\n  [\"s2\", 2], [\"kvm\", 1], [\"s1\", 1], [\"blank\", 1], [\"ups\", 3],\n];\n// Patch cord colours: blue, yellow, red, green, white, grey, orange, violet, cyan.\nconst CORDS = [[40, 96, 230], [236, 200, 40], [220, 44, 40], [40, 186, 76], [210, 210, 210], [128, 128, 140], [244, 124, 24], [150, 64, 210], [40, 200, 214]];\nconst AMBER = [255, 138, 0];\nconst BLUE = [60, 120, 255];\n// How much of a busy server's light shows through the holes of its bezel, how bright a\n// written drive's light pipe is, and how much of a lamp spills onto each LED of metal\n// beside it (the corners get 0.4 of that).\nconst BLEED = 0.2;\nconst PIPE = 0.8;\nconst SPILL = 0.25;\nconst SPILL_AT = [-1, 1, -W, W, -W - 1, -W + 1, W - 1, W + 1];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5) * 255, f(3) * 255, f(1) * 255];\n}\n\n// The still rack: faceplates, posts, caddies and cords, and the list of every light on it.\nfunction build(P) {\n  const base = P.base;\n  const wash = P.wash;\n  const put = (x, y, c, refl = 0.5) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    base[p * 3] = c[0];\n    base[p * 3 + 1] = c[1];\n    base[p * 3 + 2] = c[2];\n    wash[p] = refl;\n  };\n  const metal = (x, y, v, refl) => {\n    const g = v + 2 * (hash(x, y, 3) - 0.5);\n    put(x, y, [g, g + 1, g + 3], refl);\n  };\n  const leds = [];\n  const led = (x, y, kind, dev, arg = 0) => leds.push({ p: y * W + x, kind, dev, arg, on: 0, next: 0 });\n  P.devs = [];\n  P.caddies = [];\n  P.holes = [];\n  // The rack frame: side panels, posts with square holes, and the cable channels between.\n  for (let y = 0; y \u003c H; y++) {\n    for (const x of [0, 63]) metal(x, y, 11, 0.3);\n    for (const x of [1, 2, 3, 60, 61, 62]) put(x, y, [5, 5, 6], 0.15);\n    for (const x of [4, 59]) {\n      const hole = (y - 1) % U !== 1 && y > 0 && y \u003c H - 1;\n      if (hole) put(x, y, [3, 3, 4], 0.1);\n      else metal(x, y, 19, 0.9);\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    metal(x, 0, 14, 0.4);\n    metal(x, H - 1, 14, 1.2);\n  }\n  let row = 1;\n  RACK.forEach(([type, units], di) => {\n    const top = row;\n    const h = units * U;\n    row += h;\n    const dev = { type, top, h, load: 0.2, kick: 0, act: 0.2, flash: -1, phase: hash(di, 1, 9) };\n    P.devs.push(dev);\n    const d = P.devs.length - 1;\n    for (let y = top; y \u003c top + h; y++) {\n      metal(5, y, 23, 1);\n      metal(58, y, 23, 1);\n      // Each faceplate catches light on its top edge and has a dark seam under it.\n      const v = type === \"blank\" ? 13 : 16;\n      for (let x = X0; x \u003c= X1; x++) metal(x, y, y === top ? v + 7 : y === top + h - 1 ? v - 5 : v, y === top ? 1 : 0.6);\n    }\n    // Ear screws.\n    for (const x of [5, 58]) {\n      put(x, top + 1, [44, 44, 48], 1);\n      if (h > 3) put(x, top + h - 2, [44, 44, 48], 1);\n    }\n    const vent = (x0, x1, y) => {\n      for (let x = x0; x \u003c= x1; x++) {\n        metal(x, y, (x + y) % 2 ? 9 : 20, 0.5);\n        if ((x + y) % 2 && type[0] === \"s\") P.holes.push(y * W + x, d);\n      }\n    };\n    if (type === \"blank\") {\n      for (let x = X0; x \u003c= X1; x++) metal(x, top, 20, 0.9);\n    } else if (type === \"manager\") {\n      for (let y = top; y \u003c top + h; y++) for (let x = X0; x \u003c= X1; x++) put(x, y, [7, 7, 8], 0.2);\n      for (let x = X0 + 1; x \u003c= X1; x += 4) for (let y = top; y \u003c top + h; y++) put(x, y, y === top ? [24, 24, 27] : [14, 14, 16], 0.4);\n    } else if (type === \"patch\") {\n      for (let i = 0; i \u003c 24; i++) {\n        const x = X0 + 2 * i + Math.floor(i / 6);\n        put(x, top + 1, [4, 4, 5], 0.1);\n        put(x + 1, top + 1, [4, 4, 5], 0.1);\n        put(x, top + 2, [30, 30, 33], 0.6);\n      }\n    } else if (type === \"switch\") {\n      for (let i = 0; i \u003c 24; i++) {\n        const x = X0 + 2 * i + Math.floor(i / 6);\n        for (const [r, side] of [[2, 1], [3, 0]]) {\n          put(x, top + r, [4, 4, 5], 0.1);\n          put(x + 1, top + r, [4, 4, 5], 0.1);\n          led(x, top + (side ? 1 : 4), \"port\", d, i * 2 + side);\n        }\n      }\n      for (let i = 0; i \u003c 4; i++) led(X0 + 40 + 3 * i, top + 5, \"sfp\", d, i);\n      led(X0 + 1, top, \"pwr\", d);\n      led(X0 + 3, top, \"stat\", d);\n    } else if (type === \"s1\" || type === \"s2\") {\n      const m = type === \"s1\" ? [1] : [1, 3];\n      for (let y = top; y \u003c top + h; y++) if (!m.includes(y - top)) vent(14, 37, y);\n      // Load meters of eight two-LED segments, one per processor.\n      for (const r of m) for (let k = 0; k \u003c 16; k++) led(14 + 3 * (k >> 1) + (k & 1), top + r, \"meter\", d, (k >> 1) + 8 * (r > 1));\n      led(9, top + 1, \"pwr\", d);\n      led(11, top + 1, \"stat\", d);\n      led(12, top + h - 2, \"id\", d);\n      if (type === \"s1\") {\n        for (let b = 0; b \u003c 9; b++) {\n          const x = 39 + 2 * b;\n          for (let y = top; y \u003c top + 3; y++) {\n            metal(x, y, 27, 0.8);\n            metal(x + 1, y, 33, 1);\n          }\n          led(x + 1, top, \"act\", d);\n          led(x + 1, top + 2, \"dstat\", d);\n        }\n      } else {\n        for (let b = 0; b \u003c 6; b++) {\n          const x = 39 + 9 * (b % 2);\n          const y0 = top + 2 * Math.floor(b / 2);\n          for (let y = y0; y \u003c y0 + 2; y++)\n            for (let i = 0; i \u003c 8; i++) metal(x + i, y, i === 0 ? 34 : (i + y) % 3 ? 26 : 21, 0.8);\n          led(x + 7, y0, \"act\", d);\n          led(x + 7, y0 + 1, \"dstat\", d);\n        }\n      }\n    } else if (type === \"head\" || type === \"shelf\") {\n      const first = type === \"head\" ? 22 : X0;\n      const count = type === \"head\" ? 17 : 24;\n      if (type === \"head\") {\n        // The controller: a small backlit LCD that shows the array and any rebuild.\n        for (let y = top + 1; y \u003c= top + 2; y++) for (let x = 8; x \u003c= 19; x++) put(x, y, [8, 22, 24], 0.3);\n        P.lcd = { x: 8, y: top + 1 };\n        led(8, top + 4, \"pwr\", d);\n        led(10, top + 4, \"stat\", d);\n        led(12, top + 4, \"cache\", d);\n      } else {\n        led(55, top + 1, \"pwr\", d);\n        led(55, top + 3, \"stat\", d);\n      }\n      for (let c = 0; c \u003c count; c++) {\n        const x = first + 2 * c;\n        for (let y = top; y \u003c top + 5; y++) {\n          metal(x, y, y === top ? 34 : 27, 0.8);\n          metal(x + 1, y, 22, 0.6);\n        }\n        P.caddies.push({ x, top, dev: d });\n        led(x, top + 5, \"cact\", d, P.caddies.length - 1);\n        led(x + 1, top + 5, \"cstat\", d, P.caddies.length - 1);\n      }\n    } else if (type === \"kvm\") {\n      for (let x = 20; x \u003c= 43; x++) metal(x, top + 1, 34, 1);\n      led(10, top + 1, \"pwr\", d);\n    } else if (type === \"ups\") {\n      // The UPS: an LCD with the load and battery bars, three lamps and a wide grille.\n      for (let y = top + 2; y \u003c= top + 6; y++) for (let x = 9; x \u003c= 30; x++) put(x, y, [14, 26, 40], 0.3);\n      for (let k = 0; k \u003c 20; k++) {\n        led(10 + k, top + 3, \"upsload\", d, k);\n        led(10 + k, top + 4, \"upsload\", d, k);\n        led(10 + k, top + 6, \"upsbatt\", d, k);\n      }\n      led(34, top + 3, \"pwr\", d);\n      led(36, top + 3, \"stat\", d);\n      for (let y = top + 1; y \u003c top + h - 1; y++) vent(40, 56, y);\n      for (let x = X0; x \u003c= X1; x++) metal(x, top + h - 1, 22, 1);\n    }\n    // A front network port on each server, fed from a side channel.\n    if (type[0] === \"s\" || type === \"head\") {\n      put(X0, top + 1, [4, 4, 5], 0.1);\n      put(X1, top + 1, [4, 4, 5], 0.1);\n    }\n  });\n  // Patch cords: the switch's upper ports run straight up to the patch panel; the\n  // lower ports drop into the manager, run out to the side channels and down to a server.\n  const sw = P.devs[2];\n  const mg = P.devs[3];\n  const targets = P.devs.map((d, i) => i).filter((i) => P.devs[i].type[0] === \"s\" || P.devs[i].type === \"head\");\n  let left = 0;\n  let right = 0;\n  P.linked = new Uint8Array(48);\n  for (let i = 0; i \u003c 24; i++) {\n    const x = X0 + 2 * i + Math.floor(i / 6);\n    const c = CORDS[(i * 5 + 2) % CORDS.length];\n    const dim = (k) => [c[0] * k, c[1] * k, c[2] * k];\n    if (i % 7 !== 5) {\n      P.linked[i * 2 + 1] = 1;\n      put(x, sw.top + 2, dim(0.5), 0.2);\n      put(x + 1, sw.top + 2, dim(0.38), 0.2);\n      for (let y = 2; y \u003c sw.top + 1; y++) put(x + 1, y, dim(y \u003c 4 ? 0.5 : 0.36), 0.2);\n      put(x, 2, dim(0.5), 0.2);\n    }\n    if (i % 3 === 1) continue;\n    P.linked[i * 2] = 1;\n    put(x, sw.top + 3, dim(0.5), 0.2);\n    put(x + 1, sw.top + 3, dim(0.38), 0.2);\n    const goLeft = x \u003c 32;\n    const n = goLeft ? left++ : right++;\n    const t = targets[(goLeft ? 2 * n : 2 * n + 1) % targets.length];\n    const ty = P.devs[t].top + 1;\n    const lane = mg.top + (n % 3);\n    const cx = goLeft ? 1 + (n % 3) : 62 - (n % 3);\n    for (let y = sw.top + 4; y \u003c= lane; y++) put(x + 1, y, dim(0.4), 0.2);\n    for (let xx = Math.min(x + 1, cx); xx \u003c= Math.max(x + 1, cx); xx++) put(xx, lane, dim(0.34 + 0.06 * (xx % 2)), 0.2);\n    for (let y = lane; y \u003c= ty; y++) put(cx, y, dim(0.3 + 0.08 * ((y >> 2) % 2)), 0.2);\n    for (let xx = Math.min(cx, goLeft ? X0 : X1); xx \u003c= Math.max(cx, goLeft ? X0 : X1); xx++) put(xx, ty, dim(0.42), 0.2);\n  }\n  P.leds = leds;\n  // The floor tiles' light falls off up the rack and catches bright metal most.\n  for (let y = 0; y \u003c H; y++) {\n    const f = Math.exp(-(H - 1 - y) / 38);\n    for (let x = 0; x \u003c W; x++) P.wash[y * W + x] *= f;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.base = new Float32Array(N * 3);\n  P.wash = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  build(P);\n  Object.assign(P, { t: 0, hue: 0, speed: 2, load: 0, cold: 0.06, bursts: [], sweep: -20, reset: -99, fault: -1, rebuild: 0, nextFault: 30, started: false });\n}\n\n// The rack's load: a wave that rises and falls every 24 rack seconds and lags 45 rows a\n// second down the rack, a base set by Load, and the kicks bursts of traffic leave.\nfunction step(P, dt) {\n  const g = dt * P.speed;\n  P.t += g;\n  const L = P.load;\n  if (Math.random() \u003c g * (0.7 + 2.6 * L)) {\n    const b = { t0: P.t, seed: Math.floor(Math.random() * 1e6), s: 0.4 + 0.6 * Math.random() };\n    P.bursts.push(b);\n    // It comes in on the uplinks and out of a handful of ports at once.\n    for (const l of P.leds)\n      if (l.kind === \"sfp\" || (l.kind === \"port\" && hash(l.arg, b.seed, 6) \u003c 0.3)) {\n        l.on = 1;\n        l.next = P.t + P.speed * 0.08;\n      }\n  }\n  for (const b of P.bursts) {\n    const f0 = (P.t - g - b.t0) * 45;\n    const f1 = (P.t - b.t0) * 45;\n    P.devs.forEach((d, i) => {\n      if (d.top > f0 && d.top \u003c= f1 && hash(i, b.seed, 5) \u003c 0.45 + 0.4 * L) {\n        d.kick += b.s;\n        d.flash = P.t;\n      }\n    });\n  }\n  P.bursts = P.bursts.filter((b) => (P.t - b.t0) * 45 \u003c H);\n  // A burst that reaches a server lights its drives together for a moment, so it is seen going down.\n  for (const l of P.leds)\n    if (l.kind === \"act\" && P.devs[l.dev].flash === P.t) {\n      l.on = 1;\n      l.next = P.t + 0.12 + 0.12 * Math.random();\n    }\n  for (const d of P.devs) {\n    const ph = (P.t - P.t0 - d.top / 45) / 24;\n    const wave = 0.5 - 0.5 * Math.cos(2 * Math.PI * ph);\n    d.kick *= Math.exp(-g / 1.6);\n    const target = clamp(0.03 + 0.62 * L + (0.86 - 0.55 * L) * wave + 0.24 * Math.min(1, d.kick) + 0.05 * Math.sin(P.t * 1.3 + d.phase * 9), 0, 1);\n    d.load += (target - d.load) * Math.min(1, g * 2.5);\n    d.act = clamp(0.12 + 0.6 * d.load + 0.5 * d.kick, 0, 1.5);\n  }\n  // The backup walks the storage drives 8 a rack second, then waits 12 rack seconds.\n  P.sweep += g * 8;\n  if (P.sweep > P.caddies.length + 96) {\n    P.sweep = -6;\n    P.reset = P.t;\n  }\n  // Now and then a drive fails: its light goes amber and a rebuild bar crawls for 36 rack seconds.\n  if (P.fault \u003c 0 && P.t > P.nextFault) {\n    P.fault = Math.floor(Math.random() * P.caddies.length);\n    P.rebuild = 0;\n  }\n  if (P.fault >= 0) {\n    P.rebuild += g / 36;\n    if (P.rebuild >= 1) {\n      P.fault = -1;\n      P.nextFault = P.t + 14 + 30 * Math.random();\n    }\n  }\n  for (const l of P.leds) {\n    if (l.kind !== \"act\" && l.kind !== \"cact\" && l.kind !== \"port\" && l.kind !== \"sfp\") continue;\n    if (P.t \u003c l.next) continue;\n    let a = P.devs[l.dev].act;\n    if (l.kind === \"cact\" && Math.abs(l.arg - P.sweep) \u003c 4) a = 2.5;\n    if (l.kind === \"sfp\") a = 0.5 + L;\n    if (l.kind === \"port\") a = P.devs[4 + ((l.arg * 7) % (P.devs.length - 5))].act;\n    l.on = l.on ? 0 : 1;\n    // A lamp stays lit about a tenth of a second whatever the speed, so a fast rack looks busier.\n    l.next = P.t + (l.on ? P.speed * (0.04 + 0.08 * Math.random()) : (-Math.log(1 - Math.random()) * 0.3) / (a + 0.04));\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.load = clamp(k[2], 0, 1);\n  P.cold = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The rack has run for 4 seconds at the knob's speed when the panel opens, with a\n    // rebuild a third done. At Speed 2 the load wave is at its low point and the backup\n    // on its first drive two seconds later; at other speeds they are further on or behind.\n    P.t0 = 12;\n    P.fault = 40;\n    P.rebuild = 0.3;\n    for (let i = 0; i \u003c 80; i++) step(P, 0.05);\n    P.sweep = -6 + 8 * (P.t - 12);\n  }\n  step(P, dt);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const buf = P.buf;\n  const scheme = hsv((0.33 + P.hue) % 1, 0.8, 1);\n  const cold = P.cold;\n  const { base, wash } = P;\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const w = wash[p] * cold;\n    buf[q] = base[q] + 30 * w;\n    buf[q + 1] = base[q + 1] + 90 * w;\n    buf[q + 2] = base[q + 2] + 210 * w;\n  }\n  const light = (p, c, k, sides = 8) => {\n    buf[p * 3] = c[0] * k;\n    buf[p * 3 + 1] = c[1] * k;\n    buf[p * 3 + 2] = c[2] * k;\n    // Light spills onto the faceplate round a lit lamp.\n    for (let j = sides === 2 ? 2 : 0; j \u003c (sides === 2 ? 4 : 8); j++) {\n      const q = p + SPILL_AT[j];\n      if (q \u003c 0 || q >= N) continue;\n      const v = k * (sides === 2 ? 0.4 : j \u003c 4 ? SPILL : SPILL * 0.4);\n      buf[q * 3] += c[0] * v;\n      buf[q * 3 + 1] += c[1] * v;\n      buf[q * 3 + 2] += c[2] * v;\n    }\n  };\n  for (const l of P.leds) {\n    const d = P.devs[l.dev];\n    switch (l.kind) {\n      case \"pwr\":\n        light(l.p, scheme, 0.75);\n        break;\n      case \"stat\":\n        light(l.p, scheme, 0.4);\n        break;\n      case \"id\":\n        if ((P.t + d.phase * 40) % 40 \u003c 3 && Math.floor(P.t * 2) % 2) light(l.p, BLUE, 0.9);\n        break;\n      case \"act\":\n      case \"cact\":\n        if (l.on) light(l.p, scheme, 0.95);\n        break;\n      case \"port\":\n        if (P.linked[l.arg]) light(l.p, scheme, l.on ? 1 : 0.3);\n        break;\n      case \"sfp\":\n        light(l.p, BLUE, l.on ? 1 : 0.4);\n        break;\n      case \"dstat\":\n        light(l.p, scheme, 0.32);\n        break;\n      case \"cstat\":\n        if (l.arg === P.fault) light(l.p, AMBER, P.rebuild \u003c 0.04 && Math.floor(P.t * 4) % 2 ? 0.2 : 1);\n        else light(l.p, scheme, 0.32);\n        break;\n      case \"cache\":\n        light(l.p, AMBER, 0.3 + 0.5 * Math.min(1, d.act));\n        break;\n      case \"meter\": {\n        const k = l.arg % 8;\n        const load = l.arg \u003c 8 ? d.load : d.load * 0.9 + 0.08 * Math.sin(P.t * 0.7 + d.phase * 5);\n        const v = clamp(load * 8 - k, 0, 1);\n        // A meter's light spills up and down only, so its segments stay apart.\n        if (v > 0) light(l.p, k === 7 ? AMBER : scheme, 0.25 + 0.7 * v, 2);\n        break;\n      }\n      case \"upsload\": {\n        let sum = 0;\n        for (const e of P.devs) sum += e.load;\n        const v = clamp((sum / P.devs.length) * 1.3 * 20 - l.arg, 0, 1);\n        if (v > 0) light(l.p, l.arg >= 16 ? AMBER : [200, 230, 255], 0.3 + 0.6 * v);\n        break;\n      }\n      case \"upsbatt\":\n        light(l.p, [60, 220, 90], l.arg \u003c 19 ? 0.7 : 0.25);\n        break;\n    }\n  }\n  // The status lights inside a busy server show through the holes of its bezel.\n  for (let j = 0; j \u003c P.holes.length; j += 2) {\n    const q = P.holes[j] * 3;\n    const v = BLEED * P.devs[P.holes[j + 1]].load;\n    for (let i = 0; i \u003c 3; i++) buf[q + i] += scheme[i] * v;\n  }\n  // Drives the backup is writing glow through their light pipes, and stay lit once written.\n  for (let c = 0; c \u003c P.caddies.length; c++) {\n    // The last pass's lights go out over 3 rack seconds when the next pass starts.\n    const old = 0.6 * Math.max(0, 1 - (P.t - P.reset) / 3);\n    const v = c \u003c P.sweep - 4 ? 0.6 : Math.max(old, 1 - Math.abs(c - P.sweep) / 4);\n    if (v \u003c= 0) continue;\n    const cd = P.caddies[c];\n    for (let y = cd.top; y \u003c cd.top + 5; y++) {\n      const q = (y * W + cd.x + 1) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[q + i] += scheme[i] * PIPE * v;\n    }\n  }\n  // The controller's LCD: one cell per shelf of drives, and the rebuild bar under them.\n  if (P.lcd) {\n    const { x, y } = P.lcd;\n    for (let i = 0; i \u003c 12; i++) {\n      const busy = Math.abs(i * 5.4 - P.sweep) \u003c 6;\n      const q = (y * W + x + i) * 3;\n      buf[q] = busy ? 120 : 40;\n      buf[q + 1] = busy ? 230 : 120;\n      buf[q + 2] = busy ? 220 : 110;\n    }\n    if (P.fault >= 0)\n      for (let i = 0; i \u003c 12; i++) {\n        const v = clamp(P.rebuild * 12 - i, 0, 1);\n        const q = ((y + 1) * W + x + i) * 3;\n        buf[q] = 40 + 200 * v;\n        buf[q + 1] = 60 + 80 * v;\n        buf[q + 2] = 50 - 30 * v;\n      }\n  }\n  const out = (v) => (v \u003c= 0 ? 0 : v >= 255 ? 255 : (v + 0.5) | 0);\n  for (let y = 0, q = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, out(buf[q]), out(buf[q + 1]), out(buf[q + 2]));\n}\n","layer":{"id":"layer-server-rack","type":"code","name":"server-rack","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Server Rack\n// Family:  circuit\n// Idea:    A 42U server rack seen from the front fills the panel, and traffic that reaches the switch at the top ripples down through the servers as bursts of drive light while a backup sweeps the storage shelves and the UPS at the bottom shows the load.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the processor activity lights on the front of the Apple Xserve\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Load=0..1, Aisle=0..1\n//\n// Knob 1: Hue. The colour of the status lights: green at 0, then blue, violet and orange, green again at 1; a failed drive stays amber.\n// Knob 2: Speed. How fast the rack runs: at 2 the load rises and falls every 12 s, and every 10 s the backup writes all 65 storage drives in 4 s.\n// Knob 3: Load. At 0 each load wave lifts the meters from nearly empty to most of the way up; at 1 the rack is saturated, every meter stays near the top and the drive lights flicker about five times as often.\n// Knob 4: Aisle. Blue light from the perforated floor tiles in front of the rack, from nothing at 0 to a glow that washes the lower faceplates at 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Rack units are 3 rows. Equipment sits between the posts, ears on columns 5 and 58.\nconst U = 3;\nconst X0 = 6;\nconst X1 = 57;\n// Top to bottom, unit by unit: what is mounted and how many units it takes.\nconst RACK = [\n  [\"patch\", 1], [\"manager\", 1], [\"switch\", 2], [\"manager\", 1],\n  [\"s1\", 1], [\"s1\", 1], [\"s1\", 1], [\"s1\", 1], [\"blank\", 1],\n  [\"s2\", 2], [\"s2\", 2], [\"s1\", 1], [\"s1\", 1], [\"s2\", 2], [\"blank\", 1],\n  [\"s2\", 2], [\"s1\", 1], [\"s1\", 1], [\"blank\", 1], [\"s2\", 2],\n  [\"head\", 2], [\"shelf\", 2], [\"shelf\", 2], [\"blank\", 1],\n  [\"s2\", 2], [\"kvm\", 1], [\"s1\", 1], [\"blank\", 1], [\"ups\", 3],\n];\n// Patch cord colours: blue, yellow, red, green, white, grey, orange, violet, cyan.\nconst CORDS = [[40, 96, 230], [236, 200, 40], [220, 44, 40], [40, 186, 76], [210, 210, 210], [128, 128, 140], [244, 124, 24], [150, 64, 210], [40, 200, 214]];\nconst AMBER = [255, 138, 0];\nconst BLUE = [60, 120, 255];\n// How much of a busy server's light shows through the holes of its bezel, how bright a\n// written drive's light pipe is, and how much of a lamp spills onto each LED of metal\n// beside it (the corners get 0.4 of that).\nconst BLEED = 0.2;\nconst PIPE = 0.8;\nconst SPILL = 0.25;\nconst SPILL_AT = [-1, 1, -W, W, -W - 1, -W + 1, W - 1, W + 1];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction hsv(h, s, v) {\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5) * 255, f(3) * 255, f(1) * 255];\n}\n\n// The still rack: faceplates, posts, caddies and cords, and the list of every light on it.\nfunction build(P) {\n  const base = P.base;\n  const wash = P.wash;\n  const put = (x, y, c, refl = 0.5) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    base[p * 3] = c[0];\n    base[p * 3 + 1] = c[1];\n    base[p * 3 + 2] = c[2];\n    wash[p] = refl;\n  };\n  const metal = (x, y, v, refl) => {\n    const g = v + 2 * (hash(x, y, 3) - 0.5);\n    put(x, y, [g, g + 1, g + 3], refl);\n  };\n  const leds = [];\n  const led = (x, y, kind, dev, arg = 0) => leds.push({ p: y * W + x, kind, dev, arg, on: 0, next: 0 });\n  P.devs = [];\n  P.caddies = [];\n  P.holes = [];\n  // The rack frame: side panels, posts with square holes, and the cable channels between.\n  for (let y = 0; y \u003c H; y++) {\n    for (const x of [0, 63]) metal(x, y, 11, 0.3);\n    for (const x of [1, 2, 3, 60, 61, 62]) put(x, y, [5, 5, 6], 0.15);\n    for (const x of [4, 59]) {\n      const hole = (y - 1) % U !== 1 && y > 0 && y \u003c H - 1;\n      if (hole) put(x, y, [3, 3, 4], 0.1);\n      else metal(x, y, 19, 0.9);\n    }\n  }\n  for (let x = 0; x \u003c W; x++) {\n    metal(x, 0, 14, 0.4);\n    metal(x, H - 1, 14, 1.2);\n  }\n  let row = 1;\n  RACK.forEach(([type, units], di) => {\n    const top = row;\n    const h = units * U;\n    row += h;\n    const dev = { type, top, h, load: 0.2, kick: 0, act: 0.2, flash: -1, phase: hash(di, 1, 9) };\n    P.devs.push(dev);\n    const d = P.devs.length - 1;\n    for (let y = top; y \u003c top + h; y++) {\n      metal(5, y, 23, 1);\n      metal(58, y, 23, 1);\n      // Each faceplate catches light on its top edge and has a dark seam under it.\n      const v = type === \"blank\" ? 13 : 16;\n      for (let x = X0; x \u003c= X1; x++) metal(x, y, y === top ? v + 7 : y === top + h - 1 ? v - 5 : v, y === top ? 1 : 0.6);\n    }\n    // Ear screws.\n    for (const x of [5, 58]) {\n      put(x, top + 1, [44, 44, 48], 1);\n      if (h > 3) put(x, top + h - 2, [44, 44, 48], 1);\n    }\n    const vent = (x0, x1, y) => {\n      for (let x = x0; x \u003c= x1; x++) {\n        metal(x, y, (x + y) % 2 ? 9 : 20, 0.5);\n        if ((x + y) % 2 && type[0] === \"s\") P.holes.push(y * W + x, d);\n      }\n    };\n    if (type === \"blank\") {\n      for (let x = X0; x \u003c= X1; x++) metal(x, top, 20, 0.9);\n    } else if (type === \"manager\") {\n      for (let y = top; y \u003c top + h; y++) for (let x = X0; x \u003c= X1; x++) put(x, y, [7, 7, 8], 0.2);\n      for (let x = X0 + 1; x \u003c= X1; x += 4) for (let y = top; y \u003c top + h; y++) put(x, y, y === top ? [24, 24, 27] : [14, 14, 16], 0.4);\n    } else if (type === \"patch\") {\n      for (let i = 0; i \u003c 24; i++) {\n        const x = X0 + 2 * i + Math.floor(i / 6);\n        put(x, top + 1, [4, 4, 5], 0.1);\n        put(x + 1, top + 1, [4, 4, 5], 0.1);\n        put(x, top + 2, [30, 30, 33], 0.6);\n      }\n    } else if (type === \"switch\") {\n      for (let i = 0; i \u003c 24; i++) {\n        const x = X0 + 2 * i + Math.floor(i / 6);\n        for (const [r, side] of [[2, 1], [3, 0]]) {\n          put(x, top + r, [4, 4, 5], 0.1);\n          put(x + 1, top + r, [4, 4, 5], 0.1);\n          led(x, top + (side ? 1 : 4), \"port\", d, i * 2 + side);\n        }\n      }\n      for (let i = 0; i \u003c 4; i++) led(X0 + 40 + 3 * i, top + 5, \"sfp\", d, i);\n      led(X0 + 1, top, \"pwr\", d);\n      led(X0 + 3, top, \"stat\", d);\n    } else if (type === \"s1\" || type === \"s2\") {\n      const m = type === \"s1\" ? [1] : [1, 3];\n      for (let y = top; y \u003c top + h; y++) if (!m.includes(y - top)) vent(14, 37, y);\n      // Load meters of eight two-LED segments, one per processor.\n      for (const r of m) for (let k = 0; k \u003c 16; k++) led(14 + 3 * (k >> 1) + (k & 1), top + r, \"meter\", d, (k >> 1) + 8 * (r > 1));\n      led(9, top + 1, \"pwr\", d);\n      led(11, top + 1, \"stat\", d);\n      led(12, top + h - 2, \"id\", d);\n      if (type === \"s1\") {\n        for (let b = 0; b \u003c 9; b++) {\n          const x = 39 + 2 * b;\n          for (let y = top; y \u003c top + 3; y++) {\n            metal(x, y, 27, 0.8);\n            metal(x + 1, y, 33, 1);\n          }\n          led(x + 1, top, \"act\", d);\n          led(x + 1, top + 2, \"dstat\", d);\n        }\n      } else {\n        for (let b = 0; b \u003c 6; b++) {\n          const x = 39 + 9 * (b % 2);\n          const y0 = top + 2 * Math.floor(b / 2);\n          for (let y = y0; y \u003c y0 + 2; y++)\n            for (let i = 0; i \u003c 8; i++) metal(x + i, y, i === 0 ? 34 : (i + y) % 3 ? 26 : 21, 0.8);\n          led(x + 7, y0, \"act\", d);\n          led(x + 7, y0 + 1, \"dstat\", d);\n        }\n      }\n    } else if (type === \"head\" || type === \"shelf\") {\n      const first = type === \"head\" ? 22 : X0;\n      const count = type === \"head\" ? 17 : 24;\n      if (type === \"head\") {\n        // The controller: a small backlit LCD that shows the array and any rebuild.\n        for (let y = top + 1; y \u003c= top + 2; y++) for (let x = 8; x \u003c= 19; x++) put(x, y, [8, 22, 24], 0.3);\n        P.lcd = { x: 8, y: top + 1 };\n        led(8, top + 4, \"pwr\", d);\n        led(10, top + 4, \"stat\", d);\n        led(12, top + 4, \"cache\", d);\n      } else {\n        led(55, top + 1, \"pwr\", d);\n        led(55, top + 3, \"stat\", d);\n      }\n      for (let c = 0; c \u003c count; c++) {\n        const x = first + 2 * c;\n        for (let y = top; y \u003c top + 5; y++) {\n          metal(x, y, y === top ? 34 : 27, 0.8);\n          metal(x + 1, y, 22, 0.6);\n        }\n        P.caddies.push({ x, top, dev: d });\n        led(x, top + 5, \"cact\", d, P.caddies.length - 1);\n        led(x + 1, top + 5, \"cstat\", d, P.caddies.length - 1);\n      }\n    } else if (type === \"kvm\") {\n      for (let x = 20; x \u003c= 43; x++) metal(x, top + 1, 34, 1);\n      led(10, top + 1, \"pwr\", d);\n    } else if (type === \"ups\") {\n      // The UPS: an LCD with the load and battery bars, three lamps and a wide grille.\n      for (let y = top + 2; y \u003c= top + 6; y++) for (let x = 9; x \u003c= 30; x++) put(x, y, [14, 26, 40], 0.3);\n      for (let k = 0; k \u003c 20; k++) {\n        led(10 + k, top + 3, \"upsload\", d, k);\n        led(10 + k, top + 4, \"upsload\", d, k);\n        led(10 + k, top + 6, \"upsbatt\", d, k);\n      }\n      led(34, top + 3, \"pwr\", d);\n      led(36, top + 3, \"stat\", d);\n      for (let y = top + 1; y \u003c top + h - 1; y++) vent(40, 56, y);\n      for (let x = X0; x \u003c= X1; x++) metal(x, top + h - 1, 22, 1);\n    }\n    // A front network port on each server, fed from a side channel.\n    if (type[0] === \"s\" || type === \"head\") {\n      put(X0, top + 1, [4, 4, 5], 0.1);\n      put(X1, top + 1, [4, 4, 5], 0.1);\n    }\n  });\n  // Patch cords: the switch's upper ports run straight up to the patch panel; the\n  // lower ports drop into the manager, run out to the side channels and down to a server.\n  const sw = P.devs[2];\n  const mg = P.devs[3];\n  const targets = P.devs.map((d, i) => i).filter((i) => P.devs[i].type[0] === \"s\" || P.devs[i].type === \"head\");\n  let left = 0;\n  let right = 0;\n  P.linked = new Uint8Array(48);\n  for (let i = 0; i \u003c 24; i++) {\n    const x = X0 + 2 * i + Math.floor(i / 6);\n    const c = CORDS[(i * 5 + 2) % CORDS.length];\n    const dim = (k) => [c[0] * k, c[1] * k, c[2] * k];\n    if (i % 7 !== 5) {\n      P.linked[i * 2 + 1] = 1;\n      put(x, sw.top + 2, dim(0.5), 0.2);\n      put(x + 1, sw.top + 2, dim(0.38), 0.2);\n      for (let y = 2; y \u003c sw.top + 1; y++) put(x + 1, y, dim(y \u003c 4 ? 0.5 : 0.36), 0.2);\n      put(x, 2, dim(0.5), 0.2);\n    }\n    if (i % 3 === 1) continue;\n    P.linked[i * 2] = 1;\n    put(x, sw.top + 3, dim(0.5), 0.2);\n    put(x + 1, sw.top + 3, dim(0.38), 0.2);\n    const goLeft = x \u003c 32;\n    const n = goLeft ? left++ : right++;\n    const t = targets[(goLeft ? 2 * n : 2 * n + 1) % targets.length];\n    const ty = P.devs[t].top + 1;\n    const lane = mg.top + (n % 3);\n    const cx = goLeft ? 1 + (n % 3) : 62 - (n % 3);\n    for (let y = sw.top + 4; y \u003c= lane; y++) put(x + 1, y, dim(0.4), 0.2);\n    for (let xx = Math.min(x + 1, cx); xx \u003c= Math.max(x + 1, cx); xx++) put(xx, lane, dim(0.34 + 0.06 * (xx % 2)), 0.2);\n    for (let y = lane; y \u003c= ty; y++) put(cx, y, dim(0.3 + 0.08 * ((y >> 2) % 2)), 0.2);\n    for (let xx = Math.min(cx, goLeft ? X0 : X1); xx \u003c= Math.max(cx, goLeft ? X0 : X1); xx++) put(xx, ty, dim(0.42), 0.2);\n  }\n  P.leds = leds;\n  // The floor tiles' light falls off up the rack and catches bright metal most.\n  for (let y = 0; y \u003c H; y++) {\n    const f = Math.exp(-(H - 1 - y) / 38);\n    for (let x = 0; x \u003c W; x++) P.wash[y * W + x] *= f;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  P.base = new Float32Array(N * 3);\n  P.wash = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  build(P);\n  Object.assign(P, { t: 0, hue: 0, speed: 2, load: 0, cold: 0.06, bursts: [], sweep: -20, reset: -99, fault: -1, rebuild: 0, nextFault: 30, started: false });\n}\n\n// The rack's load: a wave that rises and falls every 24 rack seconds and lags 45 rows a\n// second down the rack, a base set by Load, and the kicks bursts of traffic leave.\nfunction step(P, dt) {\n  const g = dt * P.speed;\n  P.t += g;\n  const L = P.load;\n  if (Math.random() \u003c g * (0.7 + 2.6 * L)) {\n    const b = { t0: P.t, seed: Math.floor(Math.random() * 1e6), s: 0.4 + 0.6 * Math.random() };\n    P.bursts.push(b);\n    // It comes in on the uplinks and out of a handful of ports at once.\n    for (const l of P.leds)\n      if (l.kind === \"sfp\" || (l.kind === \"port\" && hash(l.arg, b.seed, 6) \u003c 0.3)) {\n        l.on = 1;\n        l.next = P.t + P.speed * 0.08;\n      }\n  }\n  for (const b of P.bursts) {\n    const f0 = (P.t - g - b.t0) * 45;\n    const f1 = (P.t - b.t0) * 45;\n    P.devs.forEach((d, i) => {\n      if (d.top > f0 && d.top \u003c= f1 && hash(i, b.seed, 5) \u003c 0.45 + 0.4 * L) {\n        d.kick += b.s;\n        d.flash = P.t;\n      }\n    });\n  }\n  P.bursts = P.bursts.filter((b) => (P.t - b.t0) * 45 \u003c H);\n  // A burst that reaches a server lights its drives together for a moment, so it is seen going down.\n  for (const l of P.leds)\n    if (l.kind === \"act\" && P.devs[l.dev].flash === P.t) {\n      l.on = 1;\n      l.next = P.t + 0.12 + 0.12 * Math.random();\n    }\n  for (const d of P.devs) {\n    const ph = (P.t - P.t0 - d.top / 45) / 24;\n    const wave = 0.5 - 0.5 * Math.cos(2 * Math.PI * ph);\n    d.kick *= Math.exp(-g / 1.6);\n    const target = clamp(0.03 + 0.62 * L + (0.86 - 0.55 * L) * wave + 0.24 * Math.min(1, d.kick) + 0.05 * Math.sin(P.t * 1.3 + d.phase * 9), 0, 1);\n    d.load += (target - d.load) * Math.min(1, g * 2.5);\n    d.act = clamp(0.12 + 0.6 * d.load + 0.5 * d.kick, 0, 1.5);\n  }\n  // The backup walks the storage drives 8 a rack second, then waits 12 rack seconds.\n  P.sweep += g * 8;\n  if (P.sweep > P.caddies.length + 96) {\n    P.sweep = -6;\n    P.reset = P.t;\n  }\n  // Now and then a drive fails: its light goes amber and a rebuild bar crawls for 36 rack seconds.\n  if (P.fault \u003c 0 && P.t > P.nextFault) {\n    P.fault = Math.floor(Math.random() * P.caddies.length);\n    P.rebuild = 0;\n  }\n  if (P.fault >= 0) {\n    P.rebuild += g / 36;\n    if (P.rebuild >= 1) {\n      P.fault = -1;\n      P.nextFault = P.t + 14 + 30 * Math.random();\n    }\n  }\n  for (const l of P.leds) {\n    if (l.kind !== \"act\" && l.kind !== \"cact\" && l.kind !== \"port\" && l.kind !== \"sfp\") continue;\n    if (P.t \u003c l.next) continue;\n    let a = P.devs[l.dev].act;\n    if (l.kind === \"cact\" && Math.abs(l.arg - P.sweep) \u003c 4) a = 2.5;\n    if (l.kind === \"sfp\") a = 0.5 + L;\n    if (l.kind === \"port\") a = P.devs[4 + ((l.arg * 7) % (P.devs.length - 5))].act;\n    l.on = l.on ? 0 : 1;\n    // A lamp stays lit about a tenth of a second whatever the speed, so a fast rack looks busier.\n    l.next = P.t + (l.on ? P.speed * (0.04 + 0.08 * Math.random()) : (-Math.log(1 - Math.random()) * 0.3) / (a + 0.04));\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.load = clamp(k[2], 0, 1);\n  P.cold = clamp(k[3], 0, 1);\n  if (!P.started) {\n    P.started = true;\n    // The rack has run for 4 seconds at the knob's speed when the panel opens, with a\n    // rebuild a third done. At Speed 2 the load wave is at its low point and the backup\n    // on its first drive two seconds later; at other speeds they are further on or behind.\n    P.t0 = 12;\n    P.fault = 40;\n    P.rebuild = 0.3;\n    for (let i = 0; i \u003c 80; i++) step(P, 0.05);\n    P.sweep = -6 + 8 * (P.t - 12);\n  }\n  step(P, dt);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const buf = P.buf;\n  const scheme = hsv((0.33 + P.hue) % 1, 0.8, 1);\n  const cold = P.cold;\n  const { base, wash } = P;\n  for (let p = 0, q = 0; p \u003c N; p++, q += 3) {\n    const w = wash[p] * cold;\n    buf[q] = base[q] + 30 * w;\n    buf[q + 1] = base[q + 1] + 90 * w;\n    buf[q + 2] = base[q + 2] + 210 * w;\n  }\n  const light = (p, c, k, sides = 8) => {\n    buf[p * 3] = c[0] * k;\n    buf[p * 3 + 1] = c[1] * k;\n    buf[p * 3 + 2] = c[2] * k;\n    // Light spills onto the faceplate round a lit lamp.\n    for (let j = sides === 2 ? 2 : 0; j \u003c (sides === 2 ? 4 : 8); j++) {\n      const q = p + SPILL_AT[j];\n      if (q \u003c 0 || q >= N) continue;\n      const v = k * (sides === 2 ? 0.4 : j \u003c 4 ? SPILL : SPILL * 0.4);\n      buf[q * 3] += c[0] * v;\n      buf[q * 3 + 1] += c[1] * v;\n      buf[q * 3 + 2] += c[2] * v;\n    }\n  };\n  for (const l of P.leds) {\n    const d = P.devs[l.dev];\n    switch (l.kind) {\n      case \"pwr\":\n        light(l.p, scheme, 0.75);\n        break;\n      case \"stat\":\n        light(l.p, scheme, 0.4);\n        break;\n      case \"id\":\n        if ((P.t + d.phase * 40) % 40 \u003c 3 && Math.floor(P.t * 2) % 2) light(l.p, BLUE, 0.9);\n        break;\n      case \"act\":\n      case \"cact\":\n        if (l.on) light(l.p, scheme, 0.95);\n        break;\n      case \"port\":\n        if (P.linked[l.arg]) light(l.p, scheme, l.on ? 1 : 0.3);\n        break;\n      case \"sfp\":\n        light(l.p, BLUE, l.on ? 1 : 0.4);\n        break;\n      case \"dstat\":\n        light(l.p, scheme, 0.32);\n        break;\n      case \"cstat\":\n        if (l.arg === P.fault) light(l.p, AMBER, P.rebuild \u003c 0.04 && Math.floor(P.t * 4) % 2 ? 0.2 : 1);\n        else light(l.p, scheme, 0.32);\n        break;\n      case \"cache\":\n        light(l.p, AMBER, 0.3 + 0.5 * Math.min(1, d.act));\n        break;\n      case \"meter\": {\n        const k = l.arg % 8;\n        const load = l.arg \u003c 8 ? d.load : d.load * 0.9 + 0.08 * Math.sin(P.t * 0.7 + d.phase * 5);\n        const v = clamp(load * 8 - k, 0, 1);\n        // A meter's light spills up and down only, so its segments stay apart.\n        if (v > 0) light(l.p, k === 7 ? AMBER : scheme, 0.25 + 0.7 * v, 2);\n        break;\n      }\n      case \"upsload\": {\n        let sum = 0;\n        for (const e of P.devs) sum += e.load;\n        const v = clamp((sum / P.devs.length) * 1.3 * 20 - l.arg, 0, 1);\n        if (v > 0) light(l.p, l.arg >= 16 ? AMBER : [200, 230, 255], 0.3 + 0.6 * v);\n        break;\n      }\n      case \"upsbatt\":\n        light(l.p, [60, 220, 90], l.arg \u003c 19 ? 0.7 : 0.25);\n        break;\n    }\n  }\n  // The status lights inside a busy server show through the holes of its bezel.\n  for (let j = 0; j \u003c P.holes.length; j += 2) {\n    const q = P.holes[j] * 3;\n    const v = BLEED * P.devs[P.holes[j + 1]].load;\n    for (let i = 0; i \u003c 3; i++) buf[q + i] += scheme[i] * v;\n  }\n  // Drives the backup is writing glow through their light pipes, and stay lit once written.\n  for (let c = 0; c \u003c P.caddies.length; c++) {\n    // The last pass's lights go out over 3 rack seconds when the next pass starts.\n    const old = 0.6 * Math.max(0, 1 - (P.t - P.reset) / 3);\n    const v = c \u003c P.sweep - 4 ? 0.6 : Math.max(old, 1 - Math.abs(c - P.sweep) / 4);\n    if (v \u003c= 0) continue;\n    const cd = P.caddies[c];\n    for (let y = cd.top; y \u003c cd.top + 5; y++) {\n      const q = (y * W + cd.x + 1) * 3;\n      for (let i = 0; i \u003c 3; i++) buf[q + i] += scheme[i] * PIPE * v;\n    }\n  }\n  // The controller's LCD: one cell per shelf of drives, and the rebuild bar under them.\n  if (P.lcd) {\n    const { x, y } = P.lcd;\n    for (let i = 0; i \u003c 12; i++) {\n      const busy = Math.abs(i * 5.4 - P.sweep) \u003c 6;\n      const q = (y * W + x + i) * 3;\n      buf[q] = busy ? 120 : 40;\n      buf[q + 1] = busy ? 230 : 120;\n      buf[q + 2] = busy ? 220 : 110;\n    }\n    if (P.fault >= 0)\n      for (let i = 0; i \u003c 12; i++) {\n        const v = clamp(P.rebuild * 12 - i, 0, 1);\n        const q = ((y + 1) * W + x + i) * 3;\n        buf[q] = 40 + 200 * v;\n        buf[q + 1] = 60 + 80 * v;\n        buf[q + 2] = 50 - 30 * v;\n      }\n  }\n  const out = (v) => (v \u003c= 0 ? 0 : v >= 255 ? 255 : (v + 0.5) | 0);\n  for (let y = 0, q = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, q += 3) display.setPixel(x, y, out(buf[q]), out(buf[q + 1]), out(buf[q + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Load=0..1, Aisle=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the status lights: green at 0, then blue, violet and orange, green again at 1; a failed drive stays amber."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the rack runs: at 2 the load rises and falls every 12 s, and every 10 s the backup writes all 65 storage drives in 4 s."},{"name":"Load","min":0,"max":1,"about":"At 0 each load wave lifts the meters from nearly empty to most of the way up; at 1 the rack is saturated, every meter stays near the top and the drive lights flicker about five times as often."},{"name":"Aisle","min":0,"max":1,"about":"Blue light from the perforated floor tiles in front of the rack, from nothing at 0 to a glow that washes the lower faceplates at 1."}],"start":[0,2,0,0.06],"measures":{"motion":0.3413,"detail":0.1038,"edges":0.3523,"complexity":1.287,"coverage":0.6285,"colour":0.2245,"drift":0.0981},"knobResponse":[0.0421,0.0369,0.0435,0.0677]},{"slug":"shoot-em-up","title":"Shoot 'em Up","family":"pixel","round":24,"note":"세로로 흐르는 아케이드 슈팅 게임이 혼자 돌아요. 섬과 해안, 들판과 빨간 지붕 마을이 아래로 흘러가고, 흰 전투기가 노란 탄을 쏘며 S 자로 들어오는 편대와 포탑을 돌리는 포함을 떨어뜨려요. 화면 위 3분의 1을 덮는 보스가 내려와 고리와 나선 탄막을 뿌리다 연쇄 폭발로 부서져요. K1 이 열대 바다에서 붉은 협곡, 밤 도시, 우주 정거장까지 판을 바꾸고, K1 을 누르면 폭탄이 터져요.","idea":"An arcade shooter plays itself: a fighter weaves over a scrolling sea, coast, fields and town, shooting down waves of craft and gunboats, until a boss fills the top and sprays rings and spirals of bullets.","buttons":"K1 tap drops a bomb: a white flash and a shock ring that clears the bullets.","code":"// ===== Patternflow pattern =====\n// Title:   Shoot 'em Up\n// Family:  pixel\n// Idea:    An arcade shooter plays itself: a fighter weaves over a scrolling sea, coast, fields and town, shooting down waves of craft and gunboats, until a boss fills the top and sprays rings and spirals of bullets.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the vertically scrolling arcade shooters of the 1980s\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Stage=0..1, Speed=0.2..3, Waves=1..5, Bullets=0..1\n//\n// Knob 1: Stage. Four stages: a tropical sea and green fields at 0, a red desert canyon, a city at night, a space station among stars.\n// Knob 2: Speed. The pace of the game; at 2 the ground scrolls 12 LEDs a second and the first boss comes two seconds in.\n// Knob 3: Waves. From a formation every three seconds at 1 to a bigger one every second at 5, with more gunboats.\n// Knob 4: Bullets. How thick the fire is, from rings of twelve at 0.06 to rings of thirty and three-armed spirals at 1, with the ground dimmed so they read.\n// Buttons: K1 tap drops a bomb: a white flash and a shock ring that clears the bullets.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, sin, cos, abs, atan2, hypot, floor, round, sqrt, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = (a, b) => a + (b - a) * Math.random();\n// Ground scroll at Speed 2 in LEDs a second; clouds go 1.8 times as fast.\nconst V0 = 12, CLOUD = 1.8;\n\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x), iy = floor(y), u = (x -= ix) * x * (3 - 2 * x), v = (y -= iy) * y * (3 - 2 * y);\n  const a = hash(ix, iy, s), b = hash(ix + 1, iy, s), c = hash(ix, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(ix + 1, iy + 1, s)) * u * v;\n}\n\n// Ground types, one colour each in every stage's palette.\nconst [DEEP, WAVE, CAP, SHAL, SAND, GRASS, TREE, FLDA, FLDB, ROAD, ROOF, WALL, TRUNK, RIVER, LIGHT, HEDGE] = [...Array(16).keys()];\nconst PALS = [\n  \"123c9a1e5cc4d2ecff2aa8ccf0d4884aae3c1f6a2a9ccc4a6e9a3076706ad8482ef2e6c88a5a2a2c7ed8fff2c02e5226\",\n  \"5c20188a3a22d8966ab4502af0b464dc9a4c4a8a3cf2c278c8843e6e4630c8602ef6dcaa5a34182aa89affe6aa7a2c1a\",\n  \"0c1846172a628ca8e61c386a50506a163e340e2c2440446a2a2c481e1e30b43c96ffd25a2e222412265effa83c1c1c2c\",\n  \"08061c1e0e40e6e6ff34185e9a90885a62804c4440868ca8464c661c2034ff3c3cb8c2d83c343228dcff78ffc82a2e40\",\n].map((s) => s.match(/../g).map((h) => parseInt(h, 16)));\n// Clouds per stage: colour, underside shade, alpha, shadow shade.\nconst CLOUDS = [\n  [236, 242, 255, 0.74, 0.72, 0.62],\n  [236, 200, 156, 0.78, 0.6, 0.7],\n  [84, 96, 146, 0.7, 0.66, 0.72],\n  [150, 76, 214, 0.6, 0.5, 1],\n];\n\n// Sprites are rows of letters, \".\" clear; a mirrored one is its left half.\nfunction mk(src, pal, mirror) {\n  const rows = src.trim().split(/\\s+/), w = rows[0].length * (mirror ? 2 : 1), px = [], mask = new Uint8Array(w * rows.length);\n  rows.forEach((r, j) => {\n    for (let i = 0; i \u003c r.length; i++)\n      if (r[i] !== \".\") for (const x of mirror ? [i, w - 1 - i] : [i]) px.push(x, j, pal[r[i]]), (mask[j * w + x] = 1);\n  });\n  return { px, mask };\n}\nconst PLAYER = mk(\"....w.... ...wcw... ...wbw... ..gwbwg.. ..gwwwg.. .wgwwwgw. wwwwgwwww rww.g.wwr r..www..r ...r.r...\", { w: 0xdce4f0, c: 0x96f0ff, b: 0x286ee6, g: 0x828ca0, r: 0xe62832 });\nconst FIGHTER = mk(\"o.....o oo.d.oo ooodooo .odwdo. ..ddd.. ...d...\", { o: 0xff8c1e, d: 0xaa3214, w: 0xfff0c8 });\nconst DART = mk(\"mm...mm mmm.mmm .mmmmm. .mmcmm. ..mmm.. ..mdm.. ...m...\", { m: 0xd246e6, c: 0x78f0ff, d: 0x6e1e8c });\nconst BOAT = mk(\".kkkkk. kbbbbbk kbaaabk kbaaabk kbbbbbk kbbbbbk kbaaabk kbbbbbk .kbbbk. .kbbbk. ..kbk.. ...k...\", { k: 0x1e2028, b: 0x969baa, a: 0x5a5f6e });\n// The boss, 56 wide; \"e\" is its glowing core.\nconst BOSS = mk(\n  `\n.............kkgggk..kkkkkkk\nkk...........kacccc..kbbbbbb\nkykkk........kabbbc..kbbrrbb\nkybbbkkk.....kabbbc..kbbrrbb\nkbbbbbbbkk...kabbbc..kbbbbbb\nkbbbbbbbbbkkkbabbbc..kbbbbbb\nkbbrrrbbbbbbbbabbbc..kbbbkkk\nkaarrrrrrbbbbbabbbc..kbbbkee\nkccabbrrrrrrbbabbbckkbbbbkee\n.kkcaabgggrrrrabbbcbbbbbbkee\n...kcaagygbbrrrrrrbbbbbbbkee\n....kacgggbbbbbrrrrrrbbbbkee\n......kkcaabbbbbbbrrrbbbbkee\n........kacaaabgggbbbbbbbkee\n.........kkccabgygbbbbbbbkee\n...........kkaagggbbbbbbbkee\n.............kccaabbbbbbbkkk\n..............kkccabbbbbbbbb\n................kkcaabbbbbbb\n..................kccbbyybbb\n...................kkabbbbbb\n.....................kabbbbb\n.....................kcbbbbb\n......................kabbbb\n.......................kabbg\n.......................kcbbg\n........................kabg\n.........................kag\n.........................kcg\n..........................kg`,\n  { k: 0x14141e, c: 0x464a60, a: 0x787e96, b: 0xb4bacc, r: 0xdc323c, y: 0xffd646, g: 0x2c2c38, e: -1 },\n  true,\n);\nconst PALM = \"t.t.t .ttt. ttktt .ttt. t.t.t\".split(\" \");\n// 3x5 digits, a P, and a ship for the lives; one octal digit per row.\nconst GLYPH = [0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717, 0o75744, 0o22775];\nconst BUL = [\n  [255, 70, 170],\n  [70, 220, 255],\n  [255, 170, 40],\n];\n\n// The map repeats every 1024 rows: sea, coast, fields, town, river, coast. -1 is sea, 1 land.\nfunction profile(x, wy) {\n  const v = (wy % 1024) + 0.3 * (x - 32);\n  return v \u003c 250 || v > 830 ? -1 : v \u003c 290 ? (v - 270) / 20 : v \u003c 790 ? 1 : (810 - v) / 20;\n}\nconst ISL = {};\nfunction islands(sd, x, wy) {\n  let best = 0;\n  for (let j = floor(wy / 44) - 1, j1 = j + 2; j \u003c= j1; j++)\n    for (let i = floor(x / 32) - 1, i1 = i + 2; i \u003c= i1; i++) {\n      const ix = i * 32 + 4 + hash(i, j, sd + 2) * 24, iy = j * 44 + 6 + hash(i, j, sd + 3) * 32, r = 12 + hash(i, j, sd + 4) * 10;\n      const b = 1.9 * (1 - hypot(x - ix, wy - iy) / r);\n      if (b > best && hash(i, j, sd + 1) \u003c 0.7) ((best = b), (ISL.x = ix), (ISL.y = iy), (ISL.r = r));\n    }\n  return best;\n}\nfunction terrain(sd, x, wy) {\n  const pr = profile(x, wy);\n  let e = pr + 0.5 * (noise(x / 11, wy / 11, sd) - 0.5) + 0.24 * (noise(x / 4.5, wy / 4.5, sd + 9) - 0.5);\n  if (pr \u003c 0) e += islands(sd, x, wy) * min(1, -pr);\n  if (e \u003c -0.08) {\n    if (e > -0.12) return CAP;\n    if (e > -0.21) return SHAL;\n    const cx = x >> 3, cy = floor(wy / 5), h = hash(cx, cy, sd + 21), c0 = cx * 8 + floor(hash(cx, cy, sd + 22) * 6);\n    if (h \u003c 0.4 && wy === cy * 5 + floor(hash(cx, cy, sd + 23) * 4) && x >= c0 && x \u003c c0 + (h \u003c 0.15 ? 3 : 2)) return CAP;\n    return e > -0.36 || noise(x / 6, wy / 2, sd + 5) > 0.78 ? WAVE : DEEP;\n  }\n  if (e \u003c 0.08) return SAND;\n  if (pr \u003c -0.5) {\n    const dx = round(x - ISL.x), dy = round(wy - ISL.y), c = ISL.r > 13 && abs(dx) \u003c= 2 && abs(dy) \u003c= 2 ? PALM[dy + 2][dx + 2] : \".\";\n    return c === \".\" ? GRASS : c === \"k\" ? TRUNK : TREE;\n  }\n  const u = wy % 1024, dr = abs(x - 30 - 9 * sin(wy / 70));\n  if (u > 560 && u \u003c 770) {\n    const a = (u - 560) / 34, dv = abs(x - 32 - 23 * sin(a)) / sqrt(1 + (0.68 * cos(a)) ** 2);\n    if (dv \u003c 4.4) return dr \u003c 2.6 ? (dr > 1.6 ? WALL : ROAD) : dv \u003c 3.3 ? RIVER : SAND;\n  }\n  if (dr \u003c 1.6) return dr \u003c 0.6 && wy % 6 \u003c 3 ? LIGHT : ROAD;\n  if (u > 420 && u \u003c 510 && dr \u003c 22 + 6 * sin(wy / 9)) {\n    // The town: in each plot a house (roof, front wall, shadow) or a tree.\n    const lx = (x + 4) % 9, ly = wy % 9;\n    if (lx === 0 || ly === 0) return ROAD;\n    if (hash(floor((x + 4) / 9), floor(wy / 9), sd + 41) > 0.6) return hypot(lx - 4.5, ly - 4.5) \u003c 2.7 ? TREE : GRASS;\n    if (lx >= 2 && lx \u003c= 6 && ly >= 2) return ly === 2 ? WALL : ly > 7 ? GRASS : lx === 4 ? TRUNK : ROOF;\n    return (lx === 7 && ly >= 2 && ly \u003c= 6) || (ly === 1 && lx >= 3) ? HEDGE : GRASS;\n  }\n  const band = floor(wy / 14), gx = x + floor(hash(band, 0, sd + 51) * 16), h = hash(floor(gx / 16), band, sd + 52);\n  if (gx % 16 === 0 || wy % 14 === 0) return h \u003c 0.6 ? HEDGE : GRASS;\n  const kind = floor(h * 4);\n  if (kind \u003c 3) return (kind ? (kind > 1 ? hash(gx, wy, sd + 53) \u003c 0.12 : gx % 3 === 0) : wy % 3 === 0) ? FLDB : FLDA;\n  const tx = floor(gx / 5), ty = floor(wy / 5);\n  return hypot(gx - tx * 5 - 1 - hash(tx, ty, sd + 55) * 3, wy - ty * 5 - 1 - hash(tx, ty, sd + 56) * 3) \u003c 1.9 ? TREE : GRASS;\n}\n// A cloud: puffs on a flat base, 2 its body and 1 its underside.\nfunction newCloud(S, cw) {\n  const w = floor(rnd(22, 40)), h = floor(rnd(10, 16)), n = 3 + floor(w / 9), P = [];\n  for (let i = 0; i \u003c n; i++) {\n    const r = h * 0.5 * (0.5 + 0.5 * sin((PI * (i + 0.5)) / n)) + rnd(-0.6, 0.8);\n    P.push((w * (i + 0.5)) / n + rnd(-1.5, 1.5), h - 1.5 - r * 0.55, r);\n  }\n  const inn = (x, y) => x >= 0 && y >= 0 && x \u003c w && y \u003c= h - 1.5 && P.some((_, i) => i % 3 === 0 && hypot(x + 0.5 - P[i], y + 0.5 - P[i + 1]) \u003c P[i + 2]);\n  const m = new Uint8Array(w * h);\n  for (let y = 0; y \u003c h; y++) for (let x = 0; x \u003c w; x++) if (inn(x, y)) m[y * w + x] = inn(x, y + 2) ? 2 : 1;\n  S.clouds.push({ x: floor(rnd(-14, 56 - w / 2)), cw: cw + h, w, h, m });\n}\nfunction fill(S) {\n  for (const top = floor(S.scroll) + H + 24; S.gen \u003c top; S.gen++) for (let x = 0; x \u003c W; x++) S.ter[(S.gen & 255) * W + x] = terrain(S.sd, x, S.gen);\n  const cb = floor(S.scroll * CLOUD);\n  for (; S.cnext \u003c cb + H + 20; S.cnext += floor(rnd(24, 52))) newCloud(S, S.cnext);\n  S.clouds = S.clouds.filter((c) => cb + H - 1 - c.cw \u003c H);\n}\n\nexport function setup(params) {\n  const S = { t: 0, scroll: 85, gen: 83, cnext: 147, sd: floor(Math.random() * 9000), ter: new Uint8Array(256 * W), cb: new Uint8Array(N), buf: new Float32Array(N * 3), sh: new Float32Array(N) };\n  Object.assign(S, { clouds: [], en: [], boats: [], eb: [], ps: [], fx: [], pop: [], caps: [], bossAt: 3.2, bossN: 0, waveAt: 0.4, waveN: 0, boatAt: 0.2, kills: 0, score: 0, flash: 0 });\n  S.pl = { x: 32, y: 112, lvl: 0, lvlT: 0, ft: 0 };\n  fill(S);\n  params.s = S;\n}\n\nfunction shoot(S, x, y, a, v, c, big) {\n  if (S.eb.length \u003c 380) S.eb.push({ x, y, vx: cos(a) * v, vy: sin(a) * v, c, big });\n}\nfunction fan(S, x, y, m, gap, v) {\n  const g = atan2(S.pl.y - y, S.pl.x - x);\n  for (let i = 0; i \u003c m; i++) shoot(S, x, y, g + (i - (m - 1) / 2) * gap, v, 2, 0);\n}\nfunction boom(S, x, y, s) {\n  const sp = [];\n  for (let i = 0; i \u003c 4 + s * 3; i++) {\n    const a = rnd(0, 6.283);\n    sp.push(cos(a) * rnd(20, 50) * s, sin(a) * rnd(20, 50) * s);\n  }\n  S.fx.push({ x, y, t0: S.t, s, sp, d: 0.45 + 0.12 * s });\n}\nfunction score(S, x, y, v) {\n  S.pop.push({ x, y, v, t0: S.t });\n  S.score += v;\n}\n// A hit; a kill leaves an explosion, its score, and every ninth a capsule.\nfunction hurt(S, e, n, x, y) {\n  e.fl = 0.06;\n  if ((e.hp -= n) > 0) return;\n  boom(S, x, y, e.boat ? 1.3 : 1);\n  score(S, x, y - 4, e.boat ? 300 : e.k ? 150 : 100);\n  if (++S.kills % 9 === 0) S.caps.push({ x, y });\n}\nconst boatY = (S, b) => floor(S.scroll) + H - 1 - round(b.wy);\nconst yOf = (S, e) => (e.boat ? boatY(S, e) : e.y);\n\nfunction spawn(S) {\n  const w = S.waves;\n  if (S.t >= S.waveAt) {\n    const n = S.waveN++, m = 4 + round(w);\n    if (n % 2 === 0) {\n      const o = { k: 0, side: n % 4 ? -1 : 1, y0: rnd(8, 30) };\n      for (let i = 0; i \u003c m; i++) S.en.push({ ...o, born: S.t + i * 0.3, x: -99, y: -99, hp: 6 });\n    } else {\n      const cx = rnd(24, 40);\n      for (let i = 0; i \u003c (m | 1); i++) {\n        const r = (i + 1) >> 1;\n        S.en.push({ k: 1, born: S.t, x: cx + (i & 1 ? r : -r) * 6, y: -8 - r * 6, hy: 34 - r * 6, st: 0, hp: 7, hold: 0.5 + r * 0.25 + rnd(0, 0.2) });\n      }\n    }\n    S.waveAt = S.t + (n === 0 ? 0.45 : S.boss ? 2 : 1) * (3.3 / w ** 0.75);\n  }\n  if (S.t \u003c S.boatAt) return;\n  // A gunboat, where its hull fits on open water.\n  const wy = floor(S.scroll) + H + 8;\n  S.boatAt = S.t + 0.3;\n  for (let n = 0; n \u003c 6; n++) {\n    const x = floor(rnd(6, 58));\n    let ok = true;\n    for (let j = -7; j \u003c= 7; j += 2) for (let i = -4; i \u003c= 4; i += 2) ok &&= S.ter[((wy + j) & 255) * W + x + i] \u003c= CAP;\n    if (ok) return S.boats.push({ boat: 1, x, wy, hp: 10, ft: rnd(0.6, 1.6) }), (S.boatAt += rnd(1.1, 2.7) / w ** 0.7);\n  }\n}\n\nfunction stepEnemies(S, d) {\n  const f = S.fury;\n  for (const e of S.en) {\n    const a = S.t - e.born;\n    e.fl -= d;\n    if (a \u003c 0) continue;\n    if (e.k === 0) {\n      e.x = e.side > 0 ? -6 + 38 * a : 70 - 38 * a;\n      e.y = e.y0 + 14 * a + 13 * sin(3.2 * a);\n    } else if (e.st === 0) {\n      if ((e.y += 50 * d) >= e.hy) ((e.st = 1), (e.t1 = S.t));\n    } else if (e.st === 1) {\n      if (S.t - e.t1 > e.hold) {\n        const g = atan2(S.pl.y - e.y, S.pl.x - e.x);\n        ((e.st = 2), (e.vx = cos(g) * 30), (e.vy = sin(g) * 30));\n        if (Math.random() \u003c 0.35 + 0.65 * f) fan(S, e.x, e.y + 3, 1 + 2 * round(f * 1.5), 0.25, 42);\n      }\n    } else {\n      const k = min(130, hypot(e.vx, e.vy) + 110 * d) / hypot(e.vx, e.vy);\n      e.x += (e.vx *= k) * d;\n      e.y += (e.vy *= k) * d;\n    }\n  }\n  S.en = S.en.filter((e) => e.hp > 0 && e.y \u003c 140 && e.x > -20 && e.x \u003c 84);\n  for (const b of S.boats) {\n    const sy = boatY(S, b);\n    b.fl -= d;\n    b.a = atan2(S.pl.y - sy + 3, S.pl.x - b.x);\n    if ((b.ft -= d) \u003c= 0 && sy > 2 && sy \u003c 96) {\n      b.ft = 2.2 - 1.3 * f;\n      for (let i = f > 0.5 ? -1 : 0; i \u003c= (f > 0.5 ? 1 : 0); i++) shoot(S, b.x + cos(b.a) * 4, sy - 3 + sin(b.a) * 4, b.a + i * 0.25, 38, 2, 0);\n    }\n  }\n  S.boats = S.boats.filter((b) => b.hp > 0 && boatY(S, b) \u003c 140);\n}\n\nfunction stepBoss(S, d) {\n  const f = S.fury;\n  // The first boss is short, so its fight fits the first seconds.\n  if (!S.boss && S.t >= S.bossAt) S.boss = { x: 32, y: -34, t0: S.t, st: 0, hp: S.bossN ? 320 + 40 * S.bossN : 60, ph: S.bossN ? 2.8 : 1.6, ang: 0 };\n  const B = S.boss;\n  if (!B) return;\n  B.fl -= d;\n  if (B.st === 2) {\n    if (!(S.t \u003c B.nd)) {\n      boom(S, B.x + rnd(-22, 22), B.y + rnd(4, 24), rnd(0.7, 1.4));\n      B.nd = S.t + 0.07;\n    }\n    if (S.t - B.t2 > 1.7) {\n      boom(S, B.x, B.y + 12, 3.2);\n      for (let i = 0; i \u003c 6; i++) boom(S, B.x + rnd(-24, 24), B.y + rnd(4, 26), rnd(1, 1.8));\n      score(S, B.x - 6, B.y + 14, 5000);\n      S.caps.push({ x: B.x, y: B.y + 20 });\n      Object.assign(S, { flash: 0.75, boss: null, bossAt: S.t + rnd(18, 30), bossN: S.bossN + 1 });\n    }\n  } else if (B.st === 0) {\n    const u = min(1, (S.t - B.t0) / 1.4);\n    B.y = -34 + 40 * (1 - (1 - u) * (1 - u));\n    if (u >= 1) ((B.st = 1), (B.t1 = S.t));\n  } else {\n    // In turns: a ring, a spiral, aimed fans from the wing guns.\n    B.x = 32 + 3 * sin((S.t - B.t1) * 0.8);\n    const ph = floor((S.t - B.t1) / B.ph) % 3;\n    if (ph === 0 && !(S.t \u003c B.nr)) {\n      const n = floor(12 + 18 * f), a0 = rnd(0, 6.283);\n      B.nr = S.t + 1.5 - 0.8 * f;\n      for (let i = 0; i \u003c n; i++) shoot(S, B.x, B.y + 11, a0 + (i * 2 * PI) / n, 28, 0, 1);\n    }\n    if (ph === 1 && !(S.t \u003c B.nx)) {\n      const arms = f > 0.5 ? 3 : 2;\n      B.nx = S.t + 1 / (7 + 23 * f);\n      B.ang += 0.37;\n      for (let i = 0; i \u003c arms; i++) shoot(S, B.x, B.y + 11, B.ang + (i * 2 * PI) / arms, 32, 1, 0);\n    }\n    if (ph === 2 && !(S.t \u003c B.nf)) {\n      B.nf = S.t + 1.05 - 0.55 * f;\n      for (const s of [-1, 1]) fan(S, B.x + s * 19.5, B.y + 10, 3 + round(6 * f), 0.12 + 0.1 * f, 42);\n    }\n  }\n}\n\nfunction stepPlayer(S, d) {\n  const P = S.pl, B = S.boss;\n  if ((P.lvlT -= d) \u003c= 0 && P.lvl > 0) ((P.lvl -= 1), (P.lvlT = 14));\n  // Its aim: the boss, a capsule, or half way from its weave to the nearest enemy.\n  const wv = 32 + 18 * sin(S.t * 0.53);\n  let ax = wv, ny = -99;\n  if (B && B.st > 0) ax = B.x + 10 * sin(S.t * 1.1);\n  else if (S.caps.length) ax = S.caps[0].x;\n  else for (const e of [...S.en, ...S.boats]) if (yOf(S, e) > max(0, ny) && yOf(S, e) \u003c P.y - 14) ((ny = yOf(S, e)), (ax = 0.55 * e.x + 0.45 * wv));\n  // Then the nearby spot the bullets will miss on its way there.\n  let best = 1e9, bx = P.x, by = P.y;\n  for (const ox of [-14, -9, -5, -2, 0, 2, 5, 9, 14])\n    for (const oy of [-8, -3, 0, 4]) {\n      const cx = clamp(P.x + ox, 5, 58), cy = clamp(P.y + oy, 96, 116), dist = max(0.01, hypot(cx - P.x, cy - P.y));\n      let c = 0.05 * abs(cx - ax) + 0.04 * abs(cy - 111) + 0.015 * dist;\n      for (const b of S.eb)\n        for (const tau of abs(b.y - cy) \u003c 45 ? [0.05, 0.12, 0.2, 0.3, 0.42] : []) {\n          const k = min(1, (60 * tau) / dist), dx = b.x + b.vx * tau - P.x - (cx - P.x) * k, dy = b.y + b.vy * tau - P.y - (cy - P.y) * k;\n          c += max(0, 30 - dx * dx - 0.7 * dy * dy) / (tau \u003c 0.15 ? 6 : 15);\n        }\n      if (c \u003c best) ((best = c), (bx = cx), (by = cy));\n    }\n  P.x += clamp(bx - P.x, -60 * d, 60 * d);\n  P.y += clamp(by - P.y, -60 * d, 60 * d);\n  // Two streams, three after a capsule, five after two.\n  for (P.ft -= d; P.ft \u003c= 0; P.ft += 0.1)\n    for (const [x, vx] of [[-2, 0], [2, 0], [0, 0], [-3, -38], [3, 38]].slice(0, [2, 3, 5][P.lvl])) S.ps.push({ x: P.x + x, y: P.y - 5, vx, vy: -170 });\n}\n\nfunction stepShots(S, d) {\n  const B = S.boss, P = S.pl;\n  for (const s of S.ps) {\n    s.x += s.vx * d;\n    s.y += s.vy * d;\n    if (s.y \u003c -4) s.dead = 1;\n    for (const e of [...S.en, ...S.boats]) if (!s.dead && e.hp > 0 && abs(s.x - e.x) \u003c= 4 && abs(s.y - yOf(S, e)) \u003c= (e.boat ? 6 : 4)) ((s.dead = 1), hurt(S, e, 1, e.x, yOf(S, e)));\n    const ix = round(s.x - B?.x + 28), iy = round(s.y - B?.y);\n    if (!s.dead && B?.st === 1 && ix >= 0 && ix \u003c 56 && iy >= 0 && iy \u003c 30 && BOSS.mask[iy * 56 + ix]) ((s.dead = 1), (B.fl = 0.05), (S.score += 10), --B.hp);\n  }\n  // A bullet that reaches the fighter bursts on its shield.\n  for (const b of S.eb) {\n    b.x += b.vx * d;\n    b.y += b.vy * d;\n    if (b.x \u003c -3 || b.x > 66 || b.y \u003c -3 || b.y > 130) b.dead = 1;\n    else if (abs(b.x - P.x) \u003c 1.6 && abs(b.y - P.y) \u003c 2.5) ((b.dead = 1), boom(S, b.x, b.y, 0.4));\n  }\n  if (B?.st === 1 && B.hp \u003c= 0) ((B.st = 2), (B.t2 = S.t), (S.eb.length = 0));\n  for (const c of S.caps) {\n    c.y += 14 * d;\n    if (abs(c.x - P.x) \u003c 6 && abs(c.y - P.y) \u003c 7) ((c.dead = 1), (P.lvl = min(2, P.lvl + 1)), (P.lvlT = 16));\n  }\n  for (const k of [\"ps\", \"eb\", \"caps\"]) S[k] = S[k].filter((o) => !o.dead && o.y \u003c 134);\n  S.fx = S.fx.filter((f) => S.t - f.t0 \u003c f.d);\n  S.pop = S.pop.filter((p) => S.t - p.t0 \u003c 0.9);\n}\n\nfunction step(S, d) {\n  S.t += d;\n  S.scroll += V0 * d;\n  S.flash = max(0, S.flash - 2.6 * d);\n  fill(S);\n  spawn(S);\n  stepEnemies(S, d);\n  stepBoss(S, d);\n  stepPlayer(S, d);\n  stepShots(S, d);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  [S.stage, S.waves, S.fury] = [clamp(k[0], 0, 1), clamp(k[2], 1, 5), clamp(k[3], 0, 1)];\n  // The first second plays before the first frame.\n  if (!S.started) {\n    S.started = 1;\n    for (let i = 0; i \u003c 30; i++) step(S, 1 / 30);\n  }\n  // The bomb clears the bullets and hurts everything on the screen.\n  if (input.btnPressed?.[0]) {\n    Object.assign(S, { flash: 0.9, bomb: S.t, eb: [] });\n    for (const e of [...S.en, ...S.boats]) if (e.hp > 0 && yOf(S, e) > 0) hurt(S, e, 4, e.x, yOf(S, e));\n    if (S.boss?.st === 1) S.boss.hp -= 15;\n  }\n  for (let d = (clamp(dt || 0, 0, 0.1) * clamp(k[1], 0.2, 3)) / 2; d > 0; d -= 1 / 30) step(S, min(d, 1 / 30));\n}\n\nfunction put(buf, x, y, r, g, b) {\n  const q = (round(y) * W + round(x)) * 3;\n  if (x > -0.5 && y > -0.5 && x \u003c W - 0.5 && y \u003c H - 0.5) ((buf[q] = r), (buf[q + 1] = g), (buf[q + 2] = b));\n}\nfunction mix(buf, q, r, g, b, a) {\n  buf[q] += (r - buf[q]) * a;\n  buf[q + 1] += (g - buf[q + 1]) * a;\n  buf[q + 2] += (b - buf[q + 2]) * a;\n}\n// Mode 1 draws a sprite white, 2 stamps its shadow.\nfunction spr(S, sp, x0, y0, mode, glow) {\n  const p = sp.px;\n  for (let i = 0; i \u003c p.length; i += 3) {\n    const x = x0 + p[i], y = y0 + p[i + 1], c = mode ? 0xffffff : p[i + 2];\n    if (mode === 2) {\n      if (x >= 0 && y >= 0 && x \u003c W && y \u003c H) S.sh[y * W + x] = min(S.sh[y * W + x], 0.55);\n    } else if (c \u003c 0) put(S.buf, x, y, ...glow);\n    else put(S.buf, x, y, c >> 16, (c >> 8) & 255, c & 255);\n  }\n}\nfunction number(buf, v, x0, y0, r, g, b) {\n  const s = String(v);\n  for (let n = 0; n \u003c s.length; n++)\n    for (let j = 0; j \u003c 15; j++) if ((GLYPH[\"0123456789PA\".indexOf(s[n])] >> (14 - j)) & 1) put(buf, x0 + n * 4 + (j % 3), y0 + floor(j / 3), r, g, b);\n}\n// A ring of width w, or a disc for w 0.\nfunction ring(buf, cx, cy, R, w, c) {\n  for (let y = floor(cy - R - w); y \u003c= cy + R + w; y++)\n    for (let x = floor(cx - R - w); x \u003c= cx + R + w; x++) if (w ? abs(hypot(x - cx, y - cy) - R) \u003c w : hypot(x - cx, y - cy) \u003c= R) put(buf, x, y, ...c);\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { buf, sh, cb, pl: P, boss: B, t } = S,\n    si = min(3, floor(S.stage * 4)), pal = PALS[si];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, wy = floor(S.scroll) + H - 1 - y; x \u003c W; x++) {\n      let k = S.ter[(wy & 255) * W + x];\n      if (k === CAP && (t * 1.6 + hash(x, wy, 3) * 4) % 2 > 1.55) k = WAVE;\n      put(buf, x, y, pal[k * 3], pal[k * 3 + 1], pal[k * 3 + 2]);\n      if (si === 2 && k === FLDA && (x + wy) % 2 === 0 && hash(x, wy, 5) \u003c 0.4) put(buf, x, y, 255, 214, 110);\n      const h = si === 3 && k === DEEP ? hash(x, wy, 6) : 1;\n      if (h \u003c 0.035) put(buf, x, y, ...Array(3).fill(90 + 4600 * h * (0.7 + 0.3 * sin(t * 4 + x * y))));\n    }\n  for (const b of S.boats) {\n    const y = boatY(S, b);\n    spr(S, BOAT, b.x - 3, y - 6, b.fl > 0 ? 1 : 0);\n    for (let i = 1; i \u003c= 3; i++) put(buf, b.x + cos(b.a) * i, y - 3 + sin(b.a) * i, 30, 30, 40);\n  }\n  // Shadows, then the clouds. Thick fire dims the ground as bullet-hell games do.\n  const C = CLOUDS[si];\n  cb.fill(0);\n  for (const c of S.clouds)\n    for (let j = 0, sy = floor(S.scroll * CLOUD) + H - 1 - c.cw; j \u003c c.h; j++)\n      for (let i = 0, x = c.x, y = sy + j; i \u003c c.w; i++, x++) if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && c.m[j * c.w + i]) cb[y * W + x] = c.m[j * c.w + i];\n  for (let i = 0; i \u003c N; i++) sh[i] = (i % W >= 6 && i >= 9 * W && cb[i - 9 * W - 6] ? C[5] : 1) * (1 - 0.36 * S.fury);\n  for (const e of S.en) spr(S, e.k ? DART : FIGHTER, round(e.x) + 2, round(e.y) + 6, 2);\n  if (B) spr(S, BOSS, round(B.x) - 22, round(B.y) + 9, 2);\n  spr(S, PLAYER, round(P.x) + 1, round(P.y) + 3, 2);\n  for (let i = 0; i \u003c N; i++) {\n    const l = cb[i], k = l === 1 ? C[3] : 1;\n    mix(buf, i * 3, 0, 0, 0, 1 - sh[i]);\n    if (l) mix(buf, i * 3, C[0] * k, C[1] * k, C[2] * k, C[4]);\n  }\n  for (const c of S.caps) ring(buf, c.x, c.y, 2.9, 0, floor(t * 7) % 2 ? [230, 40, 50] : [40, 90, 240]), number(buf, \"P\", c.x - 1, c.y - 2, 255, 255, 255);\n  for (const e of S.en) spr(S, e.k ? DART : FIGHTER, round(e.x) - 3, round(e.y) - 3, e.fl > 0 ? 1 : 0);\n  // The boss's core pulses cyan, or red as the fury rises.\n  const f = S.fury, p = 0.5 + 0.5 * sin(t * 9);\n  if (B) spr(S, BOSS, round(B.x) - 28, round(B.y), (B.st === 2 ? floor(t * 16) % 2 : B.fl > 0 && floor(t * 20) % 4 === 0) ? 1 : 0, [120 + 135 * f + 60 * p, 230 - 170 * f + 25 * p * (1 - f), 255 - 215 * f]);\n  for (const ex of [3, 5])\n    for (let j = 0, L = 2 + ((t * 24 + ex) % 3 | 0), c; j \u003c L; j++) put(buf, round(P.x) - 4 + ex, round(P.y) + 5 + j, 255 - 12 * (c = min(3, j + (L \u003c 3))) * c, 255 - 65 * c, 220 - 70 * c);\n  spr(S, PLAYER, round(P.x) - 4, round(P.y) - 5, 0);\n  for (const s of S.ps) for (let j = 0; j \u003c 3; j++) put(buf, s.x, s.y + j, 255, 255 - 28 * j, 230 - 85 * j);\n  // Explosions: a white flash, a ring cooling from yellow to red, sparks.\n  for (const f of S.fx) {\n    const a = (t - f.t0) / f.d, R = (1.5 + 4.5 * a) * f.s;\n    if (a \u003c 0.16) ring(buf, f.x, f.y, (1 + 10 * a) * f.s, 0, [255, 255, 235]);\n    else if (a \u003c 0.5) ring(buf, f.x, f.y, R * 0.5, 0, [255, a \u003c 0.3 ? 210 : 120, 40]);\n    if (a >= 0.16) ring(buf, f.x, f.y, R, 0.75, a \u003c 0.45 ? [255, 220, 80] : a \u003c 0.72 ? [255, 130, 30] : [180, 46, 24]);\n    for (let i = 0; a \u003c 0.85 && i \u003c f.sp.length; i += 2) put(buf, f.x + f.sp[i] * a * f.d, f.y + f.sp[i + 1] * a * f.d, 255, 245, 170);\n  }\n  for (const b of S.eb) {\n    const c = BUL[b.c];\n    for (let i = 0; i \u003c 9; i++) if (i % 2 || (b.big && i !== 4)) put(buf, b.x + (i % 3) - 1, b.y + floor(i / 3) - 1, ...c.map((v) => (i % 2 ? v : v * 0.6)));\n    put(buf, b.x, b.y, 255, 255, 255);\n  }\n  for (const p of S.pop) {\n    const a = (t - p.t0) / 0.9;\n    if (a \u003c 0.75 || floor(t * 20) % 2) number(buf, p.v, round(p.x - String(p.v).length * 2), round(p.y - a * 9), 255, 240, 120);\n  }\n  if (t - S.bomb \u003c 1) ring(buf, P.x, P.y, (t - S.bomb) * 150, 1.6, [200, 250, 255]);\n  for (let i = 0; S.flash > 0 && i \u003c N * 3; i++) buf[i] += (255 - buf[i]) * min(1, S.flash) * 0.85;\n  for (let i = 0; i \u003c 7 * W; i++) if (i % W \u003c 26 || i % W >= 50) mix(buf, i * 3, 0, 0, 0, 0.82);\n  number(buf, String(S.score % 1e6).padStart(6, \"0\"), 1, 1, 255, 255, 255);\n  number(buf, \"AAA\", 52, 1, 220, 228, 240);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, min(255, buf[p * 3]) | 0, min(255, buf[p * 3 + 1]) | 0, min(255, buf[p * 3 + 2]) | 0);\n}\n","layer":{"id":"layer-shoot-em-up","type":"code","name":"shoot-em-up","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Shoot 'em Up\n// Family:  pixel\n// Idea:    An arcade shooter plays itself: a fighter weaves over a scrolling sea, coast, fields and town, shooting down waves of craft and gunboats, until a boss fills the top and sprays rings and spirals of bullets.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the vertically scrolling arcade shooters of the 1980s\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Stage=0..1, Speed=0.2..3, Waves=1..5, Bullets=0..1\n//\n// Knob 1: Stage. Four stages: a tropical sea and green fields at 0, a red desert canyon, a city at night, a space station among stars.\n// Knob 2: Speed. The pace of the game; at 2 the ground scrolls 12 LEDs a second and the first boss comes two seconds in.\n// Knob 3: Waves. From a formation every three seconds at 1 to a bigger one every second at 5, with more gunboats.\n// Knob 4: Bullets. How thick the fire is, from rings of twelve at 0.06 to rings of thirty and three-armed spirals at 1, with the ground dimmed so they read.\n// Buttons: K1 tap drops a bomb: a white flash and a shock ring that clears the bullets.\n\nconst W = 64, H = 128, N = W * H;\nconst { min, max, sin, cos, abs, atan2, hypot, floor, round, sqrt, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst rnd = (a, b) => a + (b - a) * Math.random();\n// Ground scroll at Speed 2 in LEDs a second; clouds go 1.8 times as fast.\nconst V0 = 12, CLOUD = 1.8;\n\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x), iy = floor(y), u = (x -= ix) * x * (3 - 2 * x), v = (y -= iy) * y * (3 - 2 * y);\n  const a = hash(ix, iy, s), b = hash(ix + 1, iy, s), c = hash(ix, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(ix + 1, iy + 1, s)) * u * v;\n}\n\n// Ground types, one colour each in every stage's palette.\nconst [DEEP, WAVE, CAP, SHAL, SAND, GRASS, TREE, FLDA, FLDB, ROAD, ROOF, WALL, TRUNK, RIVER, LIGHT, HEDGE] = [...Array(16).keys()];\nconst PALS = [\n  \"123c9a1e5cc4d2ecff2aa8ccf0d4884aae3c1f6a2a9ccc4a6e9a3076706ad8482ef2e6c88a5a2a2c7ed8fff2c02e5226\",\n  \"5c20188a3a22d8966ab4502af0b464dc9a4c4a8a3cf2c278c8843e6e4630c8602ef6dcaa5a34182aa89affe6aa7a2c1a\",\n  \"0c1846172a628ca8e61c386a50506a163e340e2c2440446a2a2c481e1e30b43c96ffd25a2e222412265effa83c1c1c2c\",\n  \"08061c1e0e40e6e6ff34185e9a90885a62804c4440868ca8464c661c2034ff3c3cb8c2d83c343228dcff78ffc82a2e40\",\n].map((s) => s.match(/../g).map((h) => parseInt(h, 16)));\n// Clouds per stage: colour, underside shade, alpha, shadow shade.\nconst CLOUDS = [\n  [236, 242, 255, 0.74, 0.72, 0.62],\n  [236, 200, 156, 0.78, 0.6, 0.7],\n  [84, 96, 146, 0.7, 0.66, 0.72],\n  [150, 76, 214, 0.6, 0.5, 1],\n];\n\n// Sprites are rows of letters, \".\" clear; a mirrored one is its left half.\nfunction mk(src, pal, mirror) {\n  const rows = src.trim().split(/\\s+/), w = rows[0].length * (mirror ? 2 : 1), px = [], mask = new Uint8Array(w * rows.length);\n  rows.forEach((r, j) => {\n    for (let i = 0; i \u003c r.length; i++)\n      if (r[i] !== \".\") for (const x of mirror ? [i, w - 1 - i] : [i]) px.push(x, j, pal[r[i]]), (mask[j * w + x] = 1);\n  });\n  return { px, mask };\n}\nconst PLAYER = mk(\"....w.... ...wcw... ...wbw... ..gwbwg.. ..gwwwg.. .wgwwwgw. wwwwgwwww rww.g.wwr r..www..r ...r.r...\", { w: 0xdce4f0, c: 0x96f0ff, b: 0x286ee6, g: 0x828ca0, r: 0xe62832 });\nconst FIGHTER = mk(\"o.....o oo.d.oo ooodooo .odwdo. ..ddd.. ...d...\", { o: 0xff8c1e, d: 0xaa3214, w: 0xfff0c8 });\nconst DART = mk(\"mm...mm mmm.mmm .mmmmm. .mmcmm. ..mmm.. ..mdm.. ...m...\", { m: 0xd246e6, c: 0x78f0ff, d: 0x6e1e8c });\nconst BOAT = mk(\".kkkkk. kbbbbbk kbaaabk kbaaabk kbbbbbk kbbbbbk kbaaabk kbbbbbk .kbbbk. .kbbbk. ..kbk.. ...k...\", { k: 0x1e2028, b: 0x969baa, a: 0x5a5f6e });\n// The boss, 56 wide; \"e\" is its glowing core.\nconst BOSS = mk(\n  `\n.............kkgggk..kkkkkkk\nkk...........kacccc..kbbbbbb\nkykkk........kabbbc..kbbrrbb\nkybbbkkk.....kabbbc..kbbrrbb\nkbbbbbbbkk...kabbbc..kbbbbbb\nkbbbbbbbbbkkkbabbbc..kbbbbbb\nkbbrrrbbbbbbbbabbbc..kbbbkkk\nkaarrrrrrbbbbbabbbc..kbbbkee\nkccabbrrrrrrbbabbbckkbbbbkee\n.kkcaabgggrrrrabbbcbbbbbbkee\n...kcaagygbbrrrrrrbbbbbbbkee\n....kacgggbbbbbrrrrrrbbbbkee\n......kkcaabbbbbbbrrrbbbbkee\n........kacaaabgggbbbbbbbkee\n.........kkccabgygbbbbbbbkee\n...........kkaagggbbbbbbbkee\n.............kccaabbbbbbbkkk\n..............kkccabbbbbbbbb\n................kkcaabbbbbbb\n..................kccbbyybbb\n...................kkabbbbbb\n.....................kabbbbb\n.....................kcbbbbb\n......................kabbbb\n.......................kabbg\n.......................kcbbg\n........................kabg\n.........................kag\n.........................kcg\n..........................kg`,\n  { k: 0x14141e, c: 0x464a60, a: 0x787e96, b: 0xb4bacc, r: 0xdc323c, y: 0xffd646, g: 0x2c2c38, e: -1 },\n  true,\n);\nconst PALM = \"t.t.t .ttt. ttktt .ttt. t.t.t\".split(\" \");\n// 3x5 digits, a P, and a ship for the lives; one octal digit per row.\nconst GLYPH = [0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717, 0o75744, 0o22775];\nconst BUL = [\n  [255, 70, 170],\n  [70, 220, 255],\n  [255, 170, 40],\n];\n\n// The map repeats every 1024 rows: sea, coast, fields, town, river, coast. -1 is sea, 1 land.\nfunction profile(x, wy) {\n  const v = (wy % 1024) + 0.3 * (x - 32);\n  return v \u003c 250 || v > 830 ? -1 : v \u003c 290 ? (v - 270) / 20 : v \u003c 790 ? 1 : (810 - v) / 20;\n}\nconst ISL = {};\nfunction islands(sd, x, wy) {\n  let best = 0;\n  for (let j = floor(wy / 44) - 1, j1 = j + 2; j \u003c= j1; j++)\n    for (let i = floor(x / 32) - 1, i1 = i + 2; i \u003c= i1; i++) {\n      const ix = i * 32 + 4 + hash(i, j, sd + 2) * 24, iy = j * 44 + 6 + hash(i, j, sd + 3) * 32, r = 12 + hash(i, j, sd + 4) * 10;\n      const b = 1.9 * (1 - hypot(x - ix, wy - iy) / r);\n      if (b > best && hash(i, j, sd + 1) \u003c 0.7) ((best = b), (ISL.x = ix), (ISL.y = iy), (ISL.r = r));\n    }\n  return best;\n}\nfunction terrain(sd, x, wy) {\n  const pr = profile(x, wy);\n  let e = pr + 0.5 * (noise(x / 11, wy / 11, sd) - 0.5) + 0.24 * (noise(x / 4.5, wy / 4.5, sd + 9) - 0.5);\n  if (pr \u003c 0) e += islands(sd, x, wy) * min(1, -pr);\n  if (e \u003c -0.08) {\n    if (e > -0.12) return CAP;\n    if (e > -0.21) return SHAL;\n    const cx = x >> 3, cy = floor(wy / 5), h = hash(cx, cy, sd + 21), c0 = cx * 8 + floor(hash(cx, cy, sd + 22) * 6);\n    if (h \u003c 0.4 && wy === cy * 5 + floor(hash(cx, cy, sd + 23) * 4) && x >= c0 && x \u003c c0 + (h \u003c 0.15 ? 3 : 2)) return CAP;\n    return e > -0.36 || noise(x / 6, wy / 2, sd + 5) > 0.78 ? WAVE : DEEP;\n  }\n  if (e \u003c 0.08) return SAND;\n  if (pr \u003c -0.5) {\n    const dx = round(x - ISL.x), dy = round(wy - ISL.y), c = ISL.r > 13 && abs(dx) \u003c= 2 && abs(dy) \u003c= 2 ? PALM[dy + 2][dx + 2] : \".\";\n    return c === \".\" ? GRASS : c === \"k\" ? TRUNK : TREE;\n  }\n  const u = wy % 1024, dr = abs(x - 30 - 9 * sin(wy / 70));\n  if (u > 560 && u \u003c 770) {\n    const a = (u - 560) / 34, dv = abs(x - 32 - 23 * sin(a)) / sqrt(1 + (0.68 * cos(a)) ** 2);\n    if (dv \u003c 4.4) return dr \u003c 2.6 ? (dr > 1.6 ? WALL : ROAD) : dv \u003c 3.3 ? RIVER : SAND;\n  }\n  if (dr \u003c 1.6) return dr \u003c 0.6 && wy % 6 \u003c 3 ? LIGHT : ROAD;\n  if (u > 420 && u \u003c 510 && dr \u003c 22 + 6 * sin(wy / 9)) {\n    // The town: in each plot a house (roof, front wall, shadow) or a tree.\n    const lx = (x + 4) % 9, ly = wy % 9;\n    if (lx === 0 || ly === 0) return ROAD;\n    if (hash(floor((x + 4) / 9), floor(wy / 9), sd + 41) > 0.6) return hypot(lx - 4.5, ly - 4.5) \u003c 2.7 ? TREE : GRASS;\n    if (lx >= 2 && lx \u003c= 6 && ly >= 2) return ly === 2 ? WALL : ly > 7 ? GRASS : lx === 4 ? TRUNK : ROOF;\n    return (lx === 7 && ly >= 2 && ly \u003c= 6) || (ly === 1 && lx >= 3) ? HEDGE : GRASS;\n  }\n  const band = floor(wy / 14), gx = x + floor(hash(band, 0, sd + 51) * 16), h = hash(floor(gx / 16), band, sd + 52);\n  if (gx % 16 === 0 || wy % 14 === 0) return h \u003c 0.6 ? HEDGE : GRASS;\n  const kind = floor(h * 4);\n  if (kind \u003c 3) return (kind ? (kind > 1 ? hash(gx, wy, sd + 53) \u003c 0.12 : gx % 3 === 0) : wy % 3 === 0) ? FLDB : FLDA;\n  const tx = floor(gx / 5), ty = floor(wy / 5);\n  return hypot(gx - tx * 5 - 1 - hash(tx, ty, sd + 55) * 3, wy - ty * 5 - 1 - hash(tx, ty, sd + 56) * 3) \u003c 1.9 ? TREE : GRASS;\n}\n// A cloud: puffs on a flat base, 2 its body and 1 its underside.\nfunction newCloud(S, cw) {\n  const w = floor(rnd(22, 40)), h = floor(rnd(10, 16)), n = 3 + floor(w / 9), P = [];\n  for (let i = 0; i \u003c n; i++) {\n    const r = h * 0.5 * (0.5 + 0.5 * sin((PI * (i + 0.5)) / n)) + rnd(-0.6, 0.8);\n    P.push((w * (i + 0.5)) / n + rnd(-1.5, 1.5), h - 1.5 - r * 0.55, r);\n  }\n  const inn = (x, y) => x >= 0 && y >= 0 && x \u003c w && y \u003c= h - 1.5 && P.some((_, i) => i % 3 === 0 && hypot(x + 0.5 - P[i], y + 0.5 - P[i + 1]) \u003c P[i + 2]);\n  const m = new Uint8Array(w * h);\n  for (let y = 0; y \u003c h; y++) for (let x = 0; x \u003c w; x++) if (inn(x, y)) m[y * w + x] = inn(x, y + 2) ? 2 : 1;\n  S.clouds.push({ x: floor(rnd(-14, 56 - w / 2)), cw: cw + h, w, h, m });\n}\nfunction fill(S) {\n  for (const top = floor(S.scroll) + H + 24; S.gen \u003c top; S.gen++) for (let x = 0; x \u003c W; x++) S.ter[(S.gen & 255) * W + x] = terrain(S.sd, x, S.gen);\n  const cb = floor(S.scroll * CLOUD);\n  for (; S.cnext \u003c cb + H + 20; S.cnext += floor(rnd(24, 52))) newCloud(S, S.cnext);\n  S.clouds = S.clouds.filter((c) => cb + H - 1 - c.cw \u003c H);\n}\n\nexport function setup(params) {\n  const S = { t: 0, scroll: 85, gen: 83, cnext: 147, sd: floor(Math.random() * 9000), ter: new Uint8Array(256 * W), cb: new Uint8Array(N), buf: new Float32Array(N * 3), sh: new Float32Array(N) };\n  Object.assign(S, { clouds: [], en: [], boats: [], eb: [], ps: [], fx: [], pop: [], caps: [], bossAt: 3.2, bossN: 0, waveAt: 0.4, waveN: 0, boatAt: 0.2, kills: 0, score: 0, flash: 0 });\n  S.pl = { x: 32, y: 112, lvl: 0, lvlT: 0, ft: 0 };\n  fill(S);\n  params.s = S;\n}\n\nfunction shoot(S, x, y, a, v, c, big) {\n  if (S.eb.length \u003c 380) S.eb.push({ x, y, vx: cos(a) * v, vy: sin(a) * v, c, big });\n}\nfunction fan(S, x, y, m, gap, v) {\n  const g = atan2(S.pl.y - y, S.pl.x - x);\n  for (let i = 0; i \u003c m; i++) shoot(S, x, y, g + (i - (m - 1) / 2) * gap, v, 2, 0);\n}\nfunction boom(S, x, y, s) {\n  const sp = [];\n  for (let i = 0; i \u003c 4 + s * 3; i++) {\n    const a = rnd(0, 6.283);\n    sp.push(cos(a) * rnd(20, 50) * s, sin(a) * rnd(20, 50) * s);\n  }\n  S.fx.push({ x, y, t0: S.t, s, sp, d: 0.45 + 0.12 * s });\n}\nfunction score(S, x, y, v) {\n  S.pop.push({ x, y, v, t0: S.t });\n  S.score += v;\n}\n// A hit; a kill leaves an explosion, its score, and every ninth a capsule.\nfunction hurt(S, e, n, x, y) {\n  e.fl = 0.06;\n  if ((e.hp -= n) > 0) return;\n  boom(S, x, y, e.boat ? 1.3 : 1);\n  score(S, x, y - 4, e.boat ? 300 : e.k ? 150 : 100);\n  if (++S.kills % 9 === 0) S.caps.push({ x, y });\n}\nconst boatY = (S, b) => floor(S.scroll) + H - 1 - round(b.wy);\nconst yOf = (S, e) => (e.boat ? boatY(S, e) : e.y);\n\nfunction spawn(S) {\n  const w = S.waves;\n  if (S.t >= S.waveAt) {\n    const n = S.waveN++, m = 4 + round(w);\n    if (n % 2 === 0) {\n      const o = { k: 0, side: n % 4 ? -1 : 1, y0: rnd(8, 30) };\n      for (let i = 0; i \u003c m; i++) S.en.push({ ...o, born: S.t + i * 0.3, x: -99, y: -99, hp: 6 });\n    } else {\n      const cx = rnd(24, 40);\n      for (let i = 0; i \u003c (m | 1); i++) {\n        const r = (i + 1) >> 1;\n        S.en.push({ k: 1, born: S.t, x: cx + (i & 1 ? r : -r) * 6, y: -8 - r * 6, hy: 34 - r * 6, st: 0, hp: 7, hold: 0.5 + r * 0.25 + rnd(0, 0.2) });\n      }\n    }\n    S.waveAt = S.t + (n === 0 ? 0.45 : S.boss ? 2 : 1) * (3.3 / w ** 0.75);\n  }\n  if (S.t \u003c S.boatAt) return;\n  // A gunboat, where its hull fits on open water.\n  const wy = floor(S.scroll) + H + 8;\n  S.boatAt = S.t + 0.3;\n  for (let n = 0; n \u003c 6; n++) {\n    const x = floor(rnd(6, 58));\n    let ok = true;\n    for (let j = -7; j \u003c= 7; j += 2) for (let i = -4; i \u003c= 4; i += 2) ok &&= S.ter[((wy + j) & 255) * W + x + i] \u003c= CAP;\n    if (ok) return S.boats.push({ boat: 1, x, wy, hp: 10, ft: rnd(0.6, 1.6) }), (S.boatAt += rnd(1.1, 2.7) / w ** 0.7);\n  }\n}\n\nfunction stepEnemies(S, d) {\n  const f = S.fury;\n  for (const e of S.en) {\n    const a = S.t - e.born;\n    e.fl -= d;\n    if (a \u003c 0) continue;\n    if (e.k === 0) {\n      e.x = e.side > 0 ? -6 + 38 * a : 70 - 38 * a;\n      e.y = e.y0 + 14 * a + 13 * sin(3.2 * a);\n    } else if (e.st === 0) {\n      if ((e.y += 50 * d) >= e.hy) ((e.st = 1), (e.t1 = S.t));\n    } else if (e.st === 1) {\n      if (S.t - e.t1 > e.hold) {\n        const g = atan2(S.pl.y - e.y, S.pl.x - e.x);\n        ((e.st = 2), (e.vx = cos(g) * 30), (e.vy = sin(g) * 30));\n        if (Math.random() \u003c 0.35 + 0.65 * f) fan(S, e.x, e.y + 3, 1 + 2 * round(f * 1.5), 0.25, 42);\n      }\n    } else {\n      const k = min(130, hypot(e.vx, e.vy) + 110 * d) / hypot(e.vx, e.vy);\n      e.x += (e.vx *= k) * d;\n      e.y += (e.vy *= k) * d;\n    }\n  }\n  S.en = S.en.filter((e) => e.hp > 0 && e.y \u003c 140 && e.x > -20 && e.x \u003c 84);\n  for (const b of S.boats) {\n    const sy = boatY(S, b);\n    b.fl -= d;\n    b.a = atan2(S.pl.y - sy + 3, S.pl.x - b.x);\n    if ((b.ft -= d) \u003c= 0 && sy > 2 && sy \u003c 96) {\n      b.ft = 2.2 - 1.3 * f;\n      for (let i = f > 0.5 ? -1 : 0; i \u003c= (f > 0.5 ? 1 : 0); i++) shoot(S, b.x + cos(b.a) * 4, sy - 3 + sin(b.a) * 4, b.a + i * 0.25, 38, 2, 0);\n    }\n  }\n  S.boats = S.boats.filter((b) => b.hp > 0 && boatY(S, b) \u003c 140);\n}\n\nfunction stepBoss(S, d) {\n  const f = S.fury;\n  // The first boss is short, so its fight fits the first seconds.\n  if (!S.boss && S.t >= S.bossAt) S.boss = { x: 32, y: -34, t0: S.t, st: 0, hp: S.bossN ? 320 + 40 * S.bossN : 60, ph: S.bossN ? 2.8 : 1.6, ang: 0 };\n  const B = S.boss;\n  if (!B) return;\n  B.fl -= d;\n  if (B.st === 2) {\n    if (!(S.t \u003c B.nd)) {\n      boom(S, B.x + rnd(-22, 22), B.y + rnd(4, 24), rnd(0.7, 1.4));\n      B.nd = S.t + 0.07;\n    }\n    if (S.t - B.t2 > 1.7) {\n      boom(S, B.x, B.y + 12, 3.2);\n      for (let i = 0; i \u003c 6; i++) boom(S, B.x + rnd(-24, 24), B.y + rnd(4, 26), rnd(1, 1.8));\n      score(S, B.x - 6, B.y + 14, 5000);\n      S.caps.push({ x: B.x, y: B.y + 20 });\n      Object.assign(S, { flash: 0.75, boss: null, bossAt: S.t + rnd(18, 30), bossN: S.bossN + 1 });\n    }\n  } else if (B.st === 0) {\n    const u = min(1, (S.t - B.t0) / 1.4);\n    B.y = -34 + 40 * (1 - (1 - u) * (1 - u));\n    if (u >= 1) ((B.st = 1), (B.t1 = S.t));\n  } else {\n    // In turns: a ring, a spiral, aimed fans from the wing guns.\n    B.x = 32 + 3 * sin((S.t - B.t1) * 0.8);\n    const ph = floor((S.t - B.t1) / B.ph) % 3;\n    if (ph === 0 && !(S.t \u003c B.nr)) {\n      const n = floor(12 + 18 * f), a0 = rnd(0, 6.283);\n      B.nr = S.t + 1.5 - 0.8 * f;\n      for (let i = 0; i \u003c n; i++) shoot(S, B.x, B.y + 11, a0 + (i * 2 * PI) / n, 28, 0, 1);\n    }\n    if (ph === 1 && !(S.t \u003c B.nx)) {\n      const arms = f > 0.5 ? 3 : 2;\n      B.nx = S.t + 1 / (7 + 23 * f);\n      B.ang += 0.37;\n      for (let i = 0; i \u003c arms; i++) shoot(S, B.x, B.y + 11, B.ang + (i * 2 * PI) / arms, 32, 1, 0);\n    }\n    if (ph === 2 && !(S.t \u003c B.nf)) {\n      B.nf = S.t + 1.05 - 0.55 * f;\n      for (const s of [-1, 1]) fan(S, B.x + s * 19.5, B.y + 10, 3 + round(6 * f), 0.12 + 0.1 * f, 42);\n    }\n  }\n}\n\nfunction stepPlayer(S, d) {\n  const P = S.pl, B = S.boss;\n  if ((P.lvlT -= d) \u003c= 0 && P.lvl > 0) ((P.lvl -= 1), (P.lvlT = 14));\n  // Its aim: the boss, a capsule, or half way from its weave to the nearest enemy.\n  const wv = 32 + 18 * sin(S.t * 0.53);\n  let ax = wv, ny = -99;\n  if (B && B.st > 0) ax = B.x + 10 * sin(S.t * 1.1);\n  else if (S.caps.length) ax = S.caps[0].x;\n  else for (const e of [...S.en, ...S.boats]) if (yOf(S, e) > max(0, ny) && yOf(S, e) \u003c P.y - 14) ((ny = yOf(S, e)), (ax = 0.55 * e.x + 0.45 * wv));\n  // Then the nearby spot the bullets will miss on its way there.\n  let best = 1e9, bx = P.x, by = P.y;\n  for (const ox of [-14, -9, -5, -2, 0, 2, 5, 9, 14])\n    for (const oy of [-8, -3, 0, 4]) {\n      const cx = clamp(P.x + ox, 5, 58), cy = clamp(P.y + oy, 96, 116), dist = max(0.01, hypot(cx - P.x, cy - P.y));\n      let c = 0.05 * abs(cx - ax) + 0.04 * abs(cy - 111) + 0.015 * dist;\n      for (const b of S.eb)\n        for (const tau of abs(b.y - cy) \u003c 45 ? [0.05, 0.12, 0.2, 0.3, 0.42] : []) {\n          const k = min(1, (60 * tau) / dist), dx = b.x + b.vx * tau - P.x - (cx - P.x) * k, dy = b.y + b.vy * tau - P.y - (cy - P.y) * k;\n          c += max(0, 30 - dx * dx - 0.7 * dy * dy) / (tau \u003c 0.15 ? 6 : 15);\n        }\n      if (c \u003c best) ((best = c), (bx = cx), (by = cy));\n    }\n  P.x += clamp(bx - P.x, -60 * d, 60 * d);\n  P.y += clamp(by - P.y, -60 * d, 60 * d);\n  // Two streams, three after a capsule, five after two.\n  for (P.ft -= d; P.ft \u003c= 0; P.ft += 0.1)\n    for (const [x, vx] of [[-2, 0], [2, 0], [0, 0], [-3, -38], [3, 38]].slice(0, [2, 3, 5][P.lvl])) S.ps.push({ x: P.x + x, y: P.y - 5, vx, vy: -170 });\n}\n\nfunction stepShots(S, d) {\n  const B = S.boss, P = S.pl;\n  for (const s of S.ps) {\n    s.x += s.vx * d;\n    s.y += s.vy * d;\n    if (s.y \u003c -4) s.dead = 1;\n    for (const e of [...S.en, ...S.boats]) if (!s.dead && e.hp > 0 && abs(s.x - e.x) \u003c= 4 && abs(s.y - yOf(S, e)) \u003c= (e.boat ? 6 : 4)) ((s.dead = 1), hurt(S, e, 1, e.x, yOf(S, e)));\n    const ix = round(s.x - B?.x + 28), iy = round(s.y - B?.y);\n    if (!s.dead && B?.st === 1 && ix >= 0 && ix \u003c 56 && iy >= 0 && iy \u003c 30 && BOSS.mask[iy * 56 + ix]) ((s.dead = 1), (B.fl = 0.05), (S.score += 10), --B.hp);\n  }\n  // A bullet that reaches the fighter bursts on its shield.\n  for (const b of S.eb) {\n    b.x += b.vx * d;\n    b.y += b.vy * d;\n    if (b.x \u003c -3 || b.x > 66 || b.y \u003c -3 || b.y > 130) b.dead = 1;\n    else if (abs(b.x - P.x) \u003c 1.6 && abs(b.y - P.y) \u003c 2.5) ((b.dead = 1), boom(S, b.x, b.y, 0.4));\n  }\n  if (B?.st === 1 && B.hp \u003c= 0) ((B.st = 2), (B.t2 = S.t), (S.eb.length = 0));\n  for (const c of S.caps) {\n    c.y += 14 * d;\n    if (abs(c.x - P.x) \u003c 6 && abs(c.y - P.y) \u003c 7) ((c.dead = 1), (P.lvl = min(2, P.lvl + 1)), (P.lvlT = 16));\n  }\n  for (const k of [\"ps\", \"eb\", \"caps\"]) S[k] = S[k].filter((o) => !o.dead && o.y \u003c 134);\n  S.fx = S.fx.filter((f) => S.t - f.t0 \u003c f.d);\n  S.pop = S.pop.filter((p) => S.t - p.t0 \u003c 0.9);\n}\n\nfunction step(S, d) {\n  S.t += d;\n  S.scroll += V0 * d;\n  S.flash = max(0, S.flash - 2.6 * d);\n  fill(S);\n  spawn(S);\n  stepEnemies(S, d);\n  stepBoss(S, d);\n  stepPlayer(S, d);\n  stepShots(S, d);\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  [S.stage, S.waves, S.fury] = [clamp(k[0], 0, 1), clamp(k[2], 1, 5), clamp(k[3], 0, 1)];\n  // The first second plays before the first frame.\n  if (!S.started) {\n    S.started = 1;\n    for (let i = 0; i \u003c 30; i++) step(S, 1 / 30);\n  }\n  // The bomb clears the bullets and hurts everything on the screen.\n  if (input.btnPressed?.[0]) {\n    Object.assign(S, { flash: 0.9, bomb: S.t, eb: [] });\n    for (const e of [...S.en, ...S.boats]) if (e.hp > 0 && yOf(S, e) > 0) hurt(S, e, 4, e.x, yOf(S, e));\n    if (S.boss?.st === 1) S.boss.hp -= 15;\n  }\n  for (let d = (clamp(dt || 0, 0, 0.1) * clamp(k[1], 0.2, 3)) / 2; d > 0; d -= 1 / 30) step(S, min(d, 1 / 30));\n}\n\nfunction put(buf, x, y, r, g, b) {\n  const q = (round(y) * W + round(x)) * 3;\n  if (x > -0.5 && y > -0.5 && x \u003c W - 0.5 && y \u003c H - 0.5) ((buf[q] = r), (buf[q + 1] = g), (buf[q + 2] = b));\n}\nfunction mix(buf, q, r, g, b, a) {\n  buf[q] += (r - buf[q]) * a;\n  buf[q + 1] += (g - buf[q + 1]) * a;\n  buf[q + 2] += (b - buf[q + 2]) * a;\n}\n// Mode 1 draws a sprite white, 2 stamps its shadow.\nfunction spr(S, sp, x0, y0, mode, glow) {\n  const p = sp.px;\n  for (let i = 0; i \u003c p.length; i += 3) {\n    const x = x0 + p[i], y = y0 + p[i + 1], c = mode ? 0xffffff : p[i + 2];\n    if (mode === 2) {\n      if (x >= 0 && y >= 0 && x \u003c W && y \u003c H) S.sh[y * W + x] = min(S.sh[y * W + x], 0.55);\n    } else if (c \u003c 0) put(S.buf, x, y, ...glow);\n    else put(S.buf, x, y, c >> 16, (c >> 8) & 255, c & 255);\n  }\n}\nfunction number(buf, v, x0, y0, r, g, b) {\n  const s = String(v);\n  for (let n = 0; n \u003c s.length; n++)\n    for (let j = 0; j \u003c 15; j++) if ((GLYPH[\"0123456789PA\".indexOf(s[n])] >> (14 - j)) & 1) put(buf, x0 + n * 4 + (j % 3), y0 + floor(j / 3), r, g, b);\n}\n// A ring of width w, or a disc for w 0.\nfunction ring(buf, cx, cy, R, w, c) {\n  for (let y = floor(cy - R - w); y \u003c= cy + R + w; y++)\n    for (let x = floor(cx - R - w); x \u003c= cx + R + w; x++) if (w ? abs(hypot(x - cx, y - cy) - R) \u003c w : hypot(x - cx, y - cy) \u003c= R) put(buf, x, y, ...c);\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { buf, sh, cb, pl: P, boss: B, t } = S,\n    si = min(3, floor(S.stage * 4)), pal = PALS[si];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0, wy = floor(S.scroll) + H - 1 - y; x \u003c W; x++) {\n      let k = S.ter[(wy & 255) * W + x];\n      if (k === CAP && (t * 1.6 + hash(x, wy, 3) * 4) % 2 > 1.55) k = WAVE;\n      put(buf, x, y, pal[k * 3], pal[k * 3 + 1], pal[k * 3 + 2]);\n      if (si === 2 && k === FLDA && (x + wy) % 2 === 0 && hash(x, wy, 5) \u003c 0.4) put(buf, x, y, 255, 214, 110);\n      const h = si === 3 && k === DEEP ? hash(x, wy, 6) : 1;\n      if (h \u003c 0.035) put(buf, x, y, ...Array(3).fill(90 + 4600 * h * (0.7 + 0.3 * sin(t * 4 + x * y))));\n    }\n  for (const b of S.boats) {\n    const y = boatY(S, b);\n    spr(S, BOAT, b.x - 3, y - 6, b.fl > 0 ? 1 : 0);\n    for (let i = 1; i \u003c= 3; i++) put(buf, b.x + cos(b.a) * i, y - 3 + sin(b.a) * i, 30, 30, 40);\n  }\n  // Shadows, then the clouds. Thick fire dims the ground as bullet-hell games do.\n  const C = CLOUDS[si];\n  cb.fill(0);\n  for (const c of S.clouds)\n    for (let j = 0, sy = floor(S.scroll * CLOUD) + H - 1 - c.cw; j \u003c c.h; j++)\n      for (let i = 0, x = c.x, y = sy + j; i \u003c c.w; i++, x++) if (x >= 0 && x \u003c W && y >= 0 && y \u003c H && c.m[j * c.w + i]) cb[y * W + x] = c.m[j * c.w + i];\n  for (let i = 0; i \u003c N; i++) sh[i] = (i % W >= 6 && i >= 9 * W && cb[i - 9 * W - 6] ? C[5] : 1) * (1 - 0.36 * S.fury);\n  for (const e of S.en) spr(S, e.k ? DART : FIGHTER, round(e.x) + 2, round(e.y) + 6, 2);\n  if (B) spr(S, BOSS, round(B.x) - 22, round(B.y) + 9, 2);\n  spr(S, PLAYER, round(P.x) + 1, round(P.y) + 3, 2);\n  for (let i = 0; i \u003c N; i++) {\n    const l = cb[i], k = l === 1 ? C[3] : 1;\n    mix(buf, i * 3, 0, 0, 0, 1 - sh[i]);\n    if (l) mix(buf, i * 3, C[0] * k, C[1] * k, C[2] * k, C[4]);\n  }\n  for (const c of S.caps) ring(buf, c.x, c.y, 2.9, 0, floor(t * 7) % 2 ? [230, 40, 50] : [40, 90, 240]), number(buf, \"P\", c.x - 1, c.y - 2, 255, 255, 255);\n  for (const e of S.en) spr(S, e.k ? DART : FIGHTER, round(e.x) - 3, round(e.y) - 3, e.fl > 0 ? 1 : 0);\n  // The boss's core pulses cyan, or red as the fury rises.\n  const f = S.fury, p = 0.5 + 0.5 * sin(t * 9);\n  if (B) spr(S, BOSS, round(B.x) - 28, round(B.y), (B.st === 2 ? floor(t * 16) % 2 : B.fl > 0 && floor(t * 20) % 4 === 0) ? 1 : 0, [120 + 135 * f + 60 * p, 230 - 170 * f + 25 * p * (1 - f), 255 - 215 * f]);\n  for (const ex of [3, 5])\n    for (let j = 0, L = 2 + ((t * 24 + ex) % 3 | 0), c; j \u003c L; j++) put(buf, round(P.x) - 4 + ex, round(P.y) + 5 + j, 255 - 12 * (c = min(3, j + (L \u003c 3))) * c, 255 - 65 * c, 220 - 70 * c);\n  spr(S, PLAYER, round(P.x) - 4, round(P.y) - 5, 0);\n  for (const s of S.ps) for (let j = 0; j \u003c 3; j++) put(buf, s.x, s.y + j, 255, 255 - 28 * j, 230 - 85 * j);\n  // Explosions: a white flash, a ring cooling from yellow to red, sparks.\n  for (const f of S.fx) {\n    const a = (t - f.t0) / f.d, R = (1.5 + 4.5 * a) * f.s;\n    if (a \u003c 0.16) ring(buf, f.x, f.y, (1 + 10 * a) * f.s, 0, [255, 255, 235]);\n    else if (a \u003c 0.5) ring(buf, f.x, f.y, R * 0.5, 0, [255, a \u003c 0.3 ? 210 : 120, 40]);\n    if (a >= 0.16) ring(buf, f.x, f.y, R, 0.75, a \u003c 0.45 ? [255, 220, 80] : a \u003c 0.72 ? [255, 130, 30] : [180, 46, 24]);\n    for (let i = 0; a \u003c 0.85 && i \u003c f.sp.length; i += 2) put(buf, f.x + f.sp[i] * a * f.d, f.y + f.sp[i + 1] * a * f.d, 255, 245, 170);\n  }\n  for (const b of S.eb) {\n    const c = BUL[b.c];\n    for (let i = 0; i \u003c 9; i++) if (i % 2 || (b.big && i !== 4)) put(buf, b.x + (i % 3) - 1, b.y + floor(i / 3) - 1, ...c.map((v) => (i % 2 ? v : v * 0.6)));\n    put(buf, b.x, b.y, 255, 255, 255);\n  }\n  for (const p of S.pop) {\n    const a = (t - p.t0) / 0.9;\n    if (a \u003c 0.75 || floor(t * 20) % 2) number(buf, p.v, round(p.x - String(p.v).length * 2), round(p.y - a * 9), 255, 240, 120);\n  }\n  if (t - S.bomb \u003c 1) ring(buf, P.x, P.y, (t - S.bomb) * 150, 1.6, [200, 250, 255]);\n  for (let i = 0; S.flash > 0 && i \u003c N * 3; i++) buf[i] += (255 - buf[i]) * min(1, S.flash) * 0.85;\n  for (let i = 0; i \u003c 7 * W; i++) if (i % W \u003c 26 || i % W >= 50) mix(buf, i * 3, 0, 0, 0, 0.82);\n  number(buf, String(S.score % 1e6).padStart(6, \"0\"), 1, 1, 255, 255, 255);\n  number(buf, \"AAA\", 52, 1, 220, 228, 240);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, min(255, buf[p * 3]) | 0, min(255, buf[p * 3 + 1]) | 0, min(255, buf[p * 3 + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Stage=0..1, Speed=0.2..3, Waves=1..5, Bullets=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Stage","min":0,"max":1,"about":"Four stages: a tropical sea and green fields at 0, a red desert canyon, a city at night, a space station among stars."},{"name":"Speed","min":0.2,"max":3,"about":"The pace of the game; at 2 the ground scrolls 12 LEDs a second and the first boss comes two seconds in."},{"name":"Waves","min":1,"max":5,"about":"From a formation every three seconds at 1 to a bigger one every second at 5, with more gunboats."},{"name":"Bullets","min":0,"max":1,"about":"How thick the fire is, from rings of twelve at 0.06 to rings of thirty and three-armed spirals at 1, with the ground dimmed so they read."}],"start":[0,2,1,0.06],"measures":{"motion":1.2251,"detail":0.0672,"edges":0.7429,"complexity":0.308,"coverage":0.995,"colour":0.3654,"drift":0.1128},"knobResponse":[0.2583,0.2156,0.0612,0.0985]},{"slug":"shoreline","title":"Shoreline","family":"ocean","round":17,"note":"드론으로 곧장 내려다본 해변이에요. 비스듬히 밀려온 너울이 모래톱 위에서 하얗게 부서지고 골에서 다시 일어나 기슭에서 한 번 더 부서진 뒤, 레이스 같은 거품 끝을 단 채 모래를 타고 올라갔다 물러나며 젖은 모래의 어두운 윤기를 남겨요.","idea":"A surf beach seen straight down from a drone: swell lines roll in at a slant, steepen and break white over a sandbar, reform in the trough, break again and run up the sand as swash with a lacy foam edge, and every backwash leaves a dark sheen of wet sand that dries.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Shoreline\n// Family:  ocean\n// Idea:    A surf beach seen straight down from a drone: swell lines roll in at a slant, steepen and break white over a sandbar, reform in the trough, break again and run up the sand as swash with a lacy foam edge, and every backwash leaves a dark sheen of wet sand that dries.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after drone photographs of surf beaches; a wave breaks when it is 0.78 of the depth (McCowan, 1894)\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Speed=0.2..3, Height=1..3, Tide=-1..1\n//\n// Knob 1: Water. Tropical turquoise over white sand at 0, Atlantic green-blue in the middle, the grey North Sea over brown sand at 1.\n// Knob 2: Speed. How fast the beach runs: at 2 the eight-second swell lands a wave every four seconds.\n// Knob 3: Height. Wave height in metres: at 1 the bar breaks only the bigger waves of each set, at 3 every wave breaks before the bar and the trough runs white.\n// Knob 4: Tide. At -1 low water nearly bares the bar and pulls the water's edge ten rows out; at 1 high water covers the bar and most waves break only at the shore.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sea bed in metres below mid tide: a shelf deepening to 12 m at the top, a sandbar on\n// row 52 and the water's edge on row 92, where the beach rises 7 cm a row.\nconst SHORE = 92;\nconst BAR = 52;\nconst SLOPE = 0.07;\n// The swell's period in seconds, and its slant: a crest reaches each column 15 ms after the\n// one to its left, a slope of 6 degrees out in deep water and less as it slows near the shore.\nconst PERIOD = 8;\nconst SKEW = 0.015;\n// A wave breaks when it is 0.78 of the depth and stops breaking once it is under 0.45 of it.\nconst GAMMA = 0.78;\nconst REFORM = 0.45;\n// Seconds the foam takes to fade to a third, and wet sand to dry to a third.\nconst FOAM_T = 5;\nconst DRY_T = 7;\n// The swash slows by RUN rows a second every second going up and by 0.75 of that coming back.\nconst RUN = 2.6;\n// Water seen from above in deep and in shallow water, the sand, and the foam: tropical,\n// Atlantic, North Sea.\nconst SEAS = [\n  [[8, 78, 142], [56, 212, 200], [238, 228, 204], [246, 250, 250]],\n  [[12, 52, 92], [44, 142, 142], [214, 188, 146], [240, 244, 244]],\n  [[38, 56, 64], [96, 118, 110], [178, 160, 132], [224, 228, 222]],\n];\n// Two towels: column, row, width, height and their two stripes.\nconst TOWELS = [\n  [9, 113, 4, 7, [40, 90, 200], [236, 236, 230]],\n  [44, 117, 7, 4, [230, 120, 40], [250, 200, 60]],\n];\nconst SKIN = [214, 150, 110];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst q4 = (v) => (v \u003c= 0 ? 0 : v >= 254 ? 255 : ((v + 2) >> 2) \u003c\u003c 2);\nconst mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n\nfunction depth(P, x, y) {\n  const off = Math.max(0, 80 - y);\n  const channel = P.rip[x] * clamp((y - 40) / 10, 0, 1) * clamp((88 - y) / 12, 0, 1);\n  return SLOPE * (SHORE - y) + 0.0009 * off * off - P.bump[x] * Math.exp(-(((y - BAR) / 7) ** 2)) + channel + P.tide;\n}\n\n// For the tide as it stands: the depth under each LED, how deep its water looks and how much\n// sand shows through it, and how long a crest takes from the top row to each row. Waves run\n// at 2.1 rows a second for every square root of a metre of depth, plus a little for their\n// own height, so they slow and bunch up as the water shoals.\nfunction retide(P) {\n  P.ys = SHORE + P.tide / SLOPE;\n  for (let p = 0; p \u003c N; p++) {\n    const d = (P.d[p] = depth(P, p % W, (p / W) | 0));\n    P.q[p] = Math.max(0.05, d) ** 0.25;\n    P.ka[p] = 1 - Math.exp(-Math.max(0, d) / 2.2);\n    P.ke[p] = 0.7 * Math.exp(-Math.max(0, d) / 0.25);\n  }\n  P.tt[0] = 0;\n  for (let y = 0; y \u003c H; y++) {\n    let d = 0;\n    for (let x = 0; x \u003c W; x += 8) d += P.d[y * W + x] / 8;\n    P.tt[y + 1] = P.tt[y] + 1 / (2.1 * Math.sqrt(Math.max(0, d) + 0.6));\n    P.ft[y] = Math.exp(P.tt[y] / FOAM_T);\n  }\n  P.tideAt = P.tide;\n}\n\n// The row a crest has reached at this age.\nfunction crest(P, age) {\n  const tt = P.tt;\n  if (age >= tt[H]) return H;\n  let lo = 0;\n  let hi = H;\n  while (hi - lo > 1) {\n    const m = (lo + hi) >> 1;\n    if (tt[m] \u003c= age) lo = m;\n    else hi = m;\n  }\n  return lo + (age - tt[lo]) / (tt[lo + 1] - tt[lo]);\n}\n\n// A new wave and what it will do in each column on its way in. It shoals by Green's law\n// (height times the fourth root of depth stays the same) and breaks at GAMMA, the harder the\n// further over it is; broken, it loses a twenty-fifth of its height a row, and it reforms in\n// the deeper trough. Per row: its height, and how much foam it makes there.\nfunction spawn(P, t0) {\n  const k = P.count++;\n  // Sets: every seventh wave is the biggest, the ones between smaller.\n  const set = 0.5 + 0.5 * Math.sin((k * 2 * Math.PI) / 7 + P.phase);\n  const h = P.height * (0.45 + 0.65 * set + 0.12 * (Math.random() - 0.5));\n  // Bigger waves make more foam, and it lasts longer.\n  const more = 0.6 + 0.3 * h;\n  // A retired wave's arrays are used again.\n  const old = P.pool.pop();\n  const ht = old ? old.ht : new Float32Array(N);\n  const fs = old ? old.fs : new Float32Array(N);\n  const first = new Int16Array(W).fill(H);\n  for (let x = 0; x \u003c W; x++) {\n    let flux = h * 6 ** 0.25;\n    let s = 0;\n    let hc = h;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      const d = Math.max(0.05, P.d[p]);\n      let v = flux / P.q[p];\n      if (s > 0) {\n        v = Math.min(hc * 0.96, GAMMA * d);\n        s = Math.min(1, s + 0.06);\n        if (v \u003c REFORM * d) (s = 0), (flux = v * P.q[p]);\n      } else if (v > GAMMA * d) {\n        s = clamp((v / (GAMMA * d) - 1) * 4 + 0.3, 0.3, 1);\n        v = GAMMA * d;\n        if (first[x] === H) first[x] = y;\n      }\n      hc = v;\n      ht[p] = v;\n      fs[p] = s * more;\n    }\n  }\n  P.waves.push({ t0, h, ht, fs, first, land: new Uint8Array(W) });\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, count: 0, waves: [], pool: [], tide: 0, tideAt: 99, height: 1, started: false });\n  for (const k of [\"d\", \"q\", \"ka\", \"ke\", \"wet\", \"grain\", \"lace\"]) P[k] = new Float32Array(N);\n  for (const k of [\"S\", \"U\"]) P[k] = new Float32Array(W);\n  for (const k of [\"light\", \"foam\", \"ft\"]) P[k] = new Float32Array(H);\n  P.tt = new Float32Array(H + 1);\n  P.row = new Int32Array(H);\n  P.col = new Float32Array(N * 3);\n  // The bar's crest rises and falls along the beach, and a rip channel cuts through it and\n  // on in to the shore, up to 0.8 m deeper than the trough beside it.\n  const rx = 30 + Math.random() * 24;\n  const ph = Math.random() * 6;\n  for (const k of [\"bump\", \"cusp\", \"rip\"]) P[k] = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    const r = Math.exp(-(((x - rx) / 6) ** 2));\n    P.rip[x] = 0.8 * r;\n    P.bump[x] = 2.4 * (1 + 0.1 * Math.sin(x * 0.11 + ph)) * (1 - 0.55 * r);\n    // Beach cusps: the run-up reaches further every 16 columns.\n    P.cusp[x] = 1 + 0.18 * Math.sin((x * 2 * Math.PI) / 16 + ph);\n  }\n  // Lace: Worley noise with three points in each cell of an 8 LED grid that wraps, the\n  // second-nearest point's distance less the nearest's, so it is 0 along the cell walls\n  // where the bubbles gather.\n  const pts = [];\n  for (let j = 0; j \u003c 16 * 8 * 3; j++) pts.push(Math.random() * 8, Math.random() * 8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let f1 = 99;\n      let f2 = 99;\n      const cx = x >> 3;\n      const cy = y >> 3;\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++)\n          for (let n = 0; n \u003c 3; n++) {\n            const q = ((((cy + j + 16) % 16) * 8 + ((cx + i + 8) % 8)) * 3 + n) * 2;\n            const d = Math.hypot((cx + i) * 8 + pts[q] - x - 0.5, (cy + j) * 8 + pts[q + 1] - y - 0.5);\n            if (d \u003c f1) (f2 = f1), (f1 = d);\n            else if (d \u003c f2) f2 = d;\n          }\n      P.lace[y * W + x] = Math.min(1, (f2 - f1) / 2.2);\n      // A dark grain here and there, and a few pale shell bits.\n      const h = Math.random();\n      P.grain[y * W + x] = h \u003c 0.04 ? -0.18 : h > 0.96 ? 0.07 : 0;\n    }\n  // Someone walking along the beach above the swash.\n  P.walk = Math.random() * W;\n}\n\n// A bore reaching the water's edge runs up the beach: its reach in rows grows with the\n// square root of the wave's height and with the cusps. Meeting the backwash of the one\n// before, it drives that sheet back up.\nfunction launch(P, x, w) {\n  const R = 9 * Math.sqrt(w.h) * P.cusp[x] * (1 + 0.15 * Math.sin(x * 0.3 + w.t0));\n  const u = Math.sqrt(2 * RUN * R);\n  if (P.S[x] > P.ys) P.U[x] = Math.max(P.U[x], u * 0.75);\n  else (P.S[x] = P.ys), (P.U[x] = u);\n}\n\nfunction step(P, dt) {\n  P.t += dt;\n  if (Math.abs(P.tide - P.tideAt) > 0.01) retide(P);\n  const ys = P.ys;\n  while (P.next \u003c= P.t) {\n    spawn(P, P.next);\n    P.next += PERIOD * (0.9 + 0.2 * Math.random());\n  }\n  // A wave is done once its foam has faded behind the water's edge.\n  const done = P.tt[Math.min(H, Math.ceil(ys))] + 4 * FOAM_T;\n  while (P.waves.length && P.t - P.waves[0].t0 >= done) P.pool.push(P.waves.shift());\n  const dry = Math.exp(-dt / DRY_T);\n  for (let x = 0; x \u003c W; x++) {\n    for (const w of P.waves)\n      if (!w.land[x] && crest(P, P.t - w.t0 - SKEW * x) >= ys) {\n        w.land[x] = 1;\n        launch(P, x, w);\n      }\n    if (P.S[x] > ys || P.U[x] > 0) {\n      P.S[x] = Math.min(H + 2, P.S[x] + P.U[x] * dt);\n      P.U[x] -= (P.U[x] > 0 ? RUN : 0.75 * RUN) * dt;\n      if (P.S[x] \u003c= ys) (P.S[x] = ys), (P.U[x] = 0);\n    }\n    for (let y = Math.max(0, Math.floor(ys)); y \u003c H; y++) P.wet[y * W + x] = y \u003c= P.S[x] ? 1 : P.wet[y * W + x] * dry;\n  }\n  P.walk = (P.walk + 0.45 * dt) % (W + 8);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  const s = clamp(k[1], 0.05, 4);\n  P.sea = clamp(k[0], 0, 1);\n  P.height = clamp(k[2], 0.5, 3.5);\n  P.tide = 0.7 * clamp(k[3], -1, 1);\n  if (!P.started) {\n    // The beach has been running for half a minute when the panel opens, with the swell\n    // already in flight and the biggest wave of a set due on the bar 14 beach seconds later.\n    P.started = true;\n    retide(P);\n    P.next = -P.tt[BAR] - 2 * PERIOD;\n    P.phase = Math.PI / 2 - (2 * Math.PI * (44 + 2 * PERIOD)) / (7 * PERIOD);\n    for (let i = 0; i \u003c 30 * 8; i++) step(P, 1 / 8);\n  }\n  step(P, dt * s);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const u = P.sea * 2;\n  const i0 = Math.min(1, Math.floor(u));\n  const [deep, shallow, sand, white] = [0, 1, 2, 3].map((j) => mix(SEAS[i0][j], SEAS[i0 + 1][j], u - i0));\n  // Sand under a few centimetres of water, wet sand, and the swash's thin sheet.\n  const under = mix(sand, deep, 0.25);\n  const damp = sand.map((v, j) => v * 0.68 + deep[j] * 0.06);\n  const film = mix(damp, shallow, 0.5);\n  const { light, foam, lace, col, ys, ka, ke, ft, wet, grain } = P;\n  // The lace drifts slowly in to the beach.\n  const drift = Math.floor(P.t * 0.6);\n  const row = P.row;\n  for (let y = 0; y \u003c H; y++) row[y] = ((((y - drift) % H) + H) % H) * W;\n  for (let x = 0; x \u003c W; x++) {\n    light.fill(0);\n    foam.fill(0);\n    for (const w of P.waves) {\n      // A crest not yet on the panel is still coming in above it.\n      const age = P.t - w.t0 - SKEW * x;\n      const Y = age \u003c 0 ? age / P.tt[1] : crest(P, age);\n      const yc = clamp(Math.floor(Y), 0, Math.min(Math.floor(ys) - 1, H - 1));\n      const s = w.fs[yc * W + x];\n      if (Y \u003c ys) {\n        // The face of the swell: lit behind the crest and in shade in front of it, the shade\n        // narrowing and darkening as the wave steepens.\n        const steep = clamp(w.ht[yc * W + x] / (GAMMA * Math.max(0.1, P.d[yc * W + x])), 0, 1);\n        const L = PERIOD / (P.tt[yc + 1] - P.tt[yc]);\n        const amp = 0.07 + 0.03 * w.h + 0.3 * steep;\n        const back = 0.3 * L;\n        const front = Math.max(1.5, 0.16 * L * (1 - 0.6 * steep));\n        for (let y = Math.max(0, Math.ceil(Y - back)); y \u003c Math.min(H, Y + front); y++) {\n          const v = y \u003c Y ? (Y - y) / back : (y - Y) / front;\n          light[y] += 4 * v * (1 - v) * (y \u003c Y ? amp : -1.3 * amp);\n        }\n        // A breaking crest is a band of white, thicker the harder it breaks, with a ragged\n        // leading edge.\n        if (s > 0) {\n          const sb = Math.min(1, s);\n          const edge = Y + 0.5 + sb * (0.8 + 1.6 * lace[(yc * W + x * 7) % N]);\n          for (let y = Math.max(0, Math.floor(Y - 1 - 2 * sb)); y \u003c= edge && y \u003c H; y++) foam[y] = Math.max(foam[y], 0.25 + 0.75 * s);\n        }\n      }\n      // Behind a broken crest the foam it made fades with the time since it passed.\n      const fade = Math.exp(-age / FOAM_T);\n      for (let y = yc; y >= w.first[x]; y--) {\n        const f = w.fs[y * W + x] * fade * ft[y];\n        if (f > foam[y]) foam[y] = f;\n      }\n    }\n    const S = P.S[x];\n    const back = P.U[x] > 0 ? 1 : 0.55;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      let r;\n      let g;\n      let b;\n      let f = 0;\n      if (y \u003c ys) {\n        // Open water: deep blue fading to the shallow colour over the bar and the beach face,\n        // and the sand showing through in the last few centimetres.\n        const a = ka[p];\n        const e = ke[p];\n        const m = 1 + light[y];\n        r = (shallow[0] + (deep[0] - shallow[0]) * a) * (1 - e) + under[0] * e;\n        g = (shallow[1] + (deep[1] - shallow[1]) * a) * (1 - e) + under[1] * e;\n        b = (shallow[2] + (deep[2] - shallow[2]) * a) * (1 - e) + under[2] * e;\n        r *= m;\n        g *= m;\n        b *= m;\n        f = foam[y];\n      } else if (y \u003c= S) {\n        // The swash: a sheet of water over the sand, its foam thick at the edge and thin in\n        // the backwash.\n        r = film[0];\n        g = film[1];\n        b = film[2];\n        f = (S - y \u003c 1.2 ? 1.1 : Math.exp(-(S - y) / 2.5)) * back;\n      } else {\n        // Sand, darker while it is wet, with the sky's sheen on it just after the water goes.\n        const wv = wet[p];\n        const k = 1 + grain[p];\n        const w3 = wv * wv * wv;\n        const sh = 40 * w3 * w3;\n        r = (sand[0] + (damp[0] - sand[0]) * wv) * k + sh * 0.8;\n        g = (sand[1] + (damp[1] - sand[1]) * wv) * k + sh * 0.9;\n        b = (sand[2] + (damp[2] - sand[2]) * wv) * k + sh;\n      }\n      // Foam: solid where it is fresh, a net of bubbles along the lace's cell walls as it fades.\n      const fv = f > 0 ? clamp((f * 1.3 - lace[row[y] + x]) * 3, 0, 1) * (0.75 + 0.25 * Math.min(1, f)) : 0;\n      col[p * 3] = r + (white[0] - r) * fv;\n      col[p * 3 + 1] = g + (white[1] - g) * fv;\n      col[p * 3 + 2] = b + (white[2] - b) * fv;\n    }\n  }\n  // Things on the dry sand, never in the water.\n  const put = (x, y, c, m) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || x >= W || y >= H || y \u003c ys + 2) return;\n    for (let j = 0; j \u003c 3; j++) col[(y * W + x) * 3 + j] = m ? col[(y * W + x) * 3 + j] * m : c[j];\n  };\n  for (const [tx, ty, tw, th, a, b] of TOWELS)\n    for (let y = 0; y \u003c th; y++) for (let x = 0; x \u003c tw; x++) put(tx + x, ty + y, (tw > th ? x : y) % 2 ? b : a);\n  // Someone on the first towel.\n  for (const [x, y, c] of [[10, 114, SKIN], [10, 115, [200, 60, 60]], [11, 115, [200, 60, 60]], [10, 116, SKIN], [11, 117, SKIN]]) put(x, y, c);\n  // The umbrella from above, eight panels, red and white, its shadow down to the right.\n  for (let y = -4; y \u003c= 4; y++) for (let x = -4; x \u003c= 4; x++) if (Math.hypot(x, y) \u003c= 3.4) put(28 + x, 114 + y, null, 0.62);\n  for (let y = -4; y \u003c= 4; y++)\n    for (let x = -4; x \u003c= 4; x++) {\n      const r = Math.hypot(x, y);\n      const seg = Math.floor(((Math.atan2(y, x) + Math.PI) / (2 * Math.PI)) * 8) % 2;\n      if (r \u003c= 3.4) put(26 + x, 112 + y, r \u003c 0.8 ? [240, 240, 236] : seg ? [228, 54, 46] : [244, 240, 232]);\n    }\n  // The walker, head and shoulders and a short shadow.\n  const wx = P.walk - 4;\n  const wy = Math.min(H - 6, ys + 15);\n  put(wx + 1, wy + 1, null, 0.6);\n  put(wx, wy, [40, 60, 140]);\n  put(wx, wy - 1, SKIN);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, q4(col[p * 3]), q4(col[p * 3 + 1]), q4(col[p * 3 + 2]));\n}\n","layer":{"id":"layer-shoreline","type":"code","name":"shoreline","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Shoreline\n// Family:  ocean\n// Idea:    A surf beach seen straight down from a drone: swell lines roll in at a slant, steepen and break white over a sandbar, reform in the trough, break again and run up the sand as swash with a lacy foam edge, and every backwash leaves a dark sheen of wet sand that dries.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17, after drone photographs of surf beaches; a wave breaks when it is 0.78 of the depth (McCowan, 1894)\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Water=0..1, Speed=0.2..3, Height=1..3, Tide=-1..1\n//\n// Knob 1: Water. Tropical turquoise over white sand at 0, Atlantic green-blue in the middle, the grey North Sea over brown sand at 1.\n// Knob 2: Speed. How fast the beach runs: at 2 the eight-second swell lands a wave every four seconds.\n// Knob 3: Height. Wave height in metres: at 1 the bar breaks only the bigger waves of each set, at 3 every wave breaks before the bar and the trough runs white.\n// Knob 4: Tide. At -1 low water nearly bares the bar and pulls the water's edge ten rows out; at 1 high water covers the bar and most waves break only at the shore.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sea bed in metres below mid tide: a shelf deepening to 12 m at the top, a sandbar on\n// row 52 and the water's edge on row 92, where the beach rises 7 cm a row.\nconst SHORE = 92;\nconst BAR = 52;\nconst SLOPE = 0.07;\n// The swell's period in seconds, and its slant: a crest reaches each column 15 ms after the\n// one to its left, a slope of 6 degrees out in deep water and less as it slows near the shore.\nconst PERIOD = 8;\nconst SKEW = 0.015;\n// A wave breaks when it is 0.78 of the depth and stops breaking once it is under 0.45 of it.\nconst GAMMA = 0.78;\nconst REFORM = 0.45;\n// Seconds the foam takes to fade to a third, and wet sand to dry to a third.\nconst FOAM_T = 5;\nconst DRY_T = 7;\n// The swash slows by RUN rows a second every second going up and by 0.75 of that coming back.\nconst RUN = 2.6;\n// Water seen from above in deep and in shallow water, the sand, and the foam: tropical,\n// Atlantic, North Sea.\nconst SEAS = [\n  [[8, 78, 142], [56, 212, 200], [238, 228, 204], [246, 250, 250]],\n  [[12, 52, 92], [44, 142, 142], [214, 188, 146], [240, 244, 244]],\n  [[38, 56, 64], [96, 118, 110], [178, 160, 132], [224, 228, 222]],\n];\n// Two towels: column, row, width, height and their two stripes.\nconst TOWELS = [\n  [9, 113, 4, 7, [40, 90, 200], [236, 236, 230]],\n  [44, 117, 7, 4, [230, 120, 40], [250, 200, 60]],\n];\nconst SKIN = [214, 150, 110];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst q4 = (v) => (v \u003c= 0 ? 0 : v >= 254 ? 255 : ((v + 2) >> 2) \u003c\u003c 2);\nconst mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n\nfunction depth(P, x, y) {\n  const off = Math.max(0, 80 - y);\n  const channel = P.rip[x] * clamp((y - 40) / 10, 0, 1) * clamp((88 - y) / 12, 0, 1);\n  return SLOPE * (SHORE - y) + 0.0009 * off * off - P.bump[x] * Math.exp(-(((y - BAR) / 7) ** 2)) + channel + P.tide;\n}\n\n// For the tide as it stands: the depth under each LED, how deep its water looks and how much\n// sand shows through it, and how long a crest takes from the top row to each row. Waves run\n// at 2.1 rows a second for every square root of a metre of depth, plus a little for their\n// own height, so they slow and bunch up as the water shoals.\nfunction retide(P) {\n  P.ys = SHORE + P.tide / SLOPE;\n  for (let p = 0; p \u003c N; p++) {\n    const d = (P.d[p] = depth(P, p % W, (p / W) | 0));\n    P.q[p] = Math.max(0.05, d) ** 0.25;\n    P.ka[p] = 1 - Math.exp(-Math.max(0, d) / 2.2);\n    P.ke[p] = 0.7 * Math.exp(-Math.max(0, d) / 0.25);\n  }\n  P.tt[0] = 0;\n  for (let y = 0; y \u003c H; y++) {\n    let d = 0;\n    for (let x = 0; x \u003c W; x += 8) d += P.d[y * W + x] / 8;\n    P.tt[y + 1] = P.tt[y] + 1 / (2.1 * Math.sqrt(Math.max(0, d) + 0.6));\n    P.ft[y] = Math.exp(P.tt[y] / FOAM_T);\n  }\n  P.tideAt = P.tide;\n}\n\n// The row a crest has reached at this age.\nfunction crest(P, age) {\n  const tt = P.tt;\n  if (age >= tt[H]) return H;\n  let lo = 0;\n  let hi = H;\n  while (hi - lo > 1) {\n    const m = (lo + hi) >> 1;\n    if (tt[m] \u003c= age) lo = m;\n    else hi = m;\n  }\n  return lo + (age - tt[lo]) / (tt[lo + 1] - tt[lo]);\n}\n\n// A new wave and what it will do in each column on its way in. It shoals by Green's law\n// (height times the fourth root of depth stays the same) and breaks at GAMMA, the harder the\n// further over it is; broken, it loses a twenty-fifth of its height a row, and it reforms in\n// the deeper trough. Per row: its height, and how much foam it makes there.\nfunction spawn(P, t0) {\n  const k = P.count++;\n  // Sets: every seventh wave is the biggest, the ones between smaller.\n  const set = 0.5 + 0.5 * Math.sin((k * 2 * Math.PI) / 7 + P.phase);\n  const h = P.height * (0.45 + 0.65 * set + 0.12 * (Math.random() - 0.5));\n  // Bigger waves make more foam, and it lasts longer.\n  const more = 0.6 + 0.3 * h;\n  // A retired wave's arrays are used again.\n  const old = P.pool.pop();\n  const ht = old ? old.ht : new Float32Array(N);\n  const fs = old ? old.fs : new Float32Array(N);\n  const first = new Int16Array(W).fill(H);\n  for (let x = 0; x \u003c W; x++) {\n    let flux = h * 6 ** 0.25;\n    let s = 0;\n    let hc = h;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      const d = Math.max(0.05, P.d[p]);\n      let v = flux / P.q[p];\n      if (s > 0) {\n        v = Math.min(hc * 0.96, GAMMA * d);\n        s = Math.min(1, s + 0.06);\n        if (v \u003c REFORM * d) (s = 0), (flux = v * P.q[p]);\n      } else if (v > GAMMA * d) {\n        s = clamp((v / (GAMMA * d) - 1) * 4 + 0.3, 0.3, 1);\n        v = GAMMA * d;\n        if (first[x] === H) first[x] = y;\n      }\n      hc = v;\n      ht[p] = v;\n      fs[p] = s * more;\n    }\n  }\n  P.waves.push({ t0, h, ht, fs, first, land: new Uint8Array(W) });\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, count: 0, waves: [], pool: [], tide: 0, tideAt: 99, height: 1, started: false });\n  for (const k of [\"d\", \"q\", \"ka\", \"ke\", \"wet\", \"grain\", \"lace\"]) P[k] = new Float32Array(N);\n  for (const k of [\"S\", \"U\"]) P[k] = new Float32Array(W);\n  for (const k of [\"light\", \"foam\", \"ft\"]) P[k] = new Float32Array(H);\n  P.tt = new Float32Array(H + 1);\n  P.row = new Int32Array(H);\n  P.col = new Float32Array(N * 3);\n  // The bar's crest rises and falls along the beach, and a rip channel cuts through it and\n  // on in to the shore, up to 0.8 m deeper than the trough beside it.\n  const rx = 30 + Math.random() * 24;\n  const ph = Math.random() * 6;\n  for (const k of [\"bump\", \"cusp\", \"rip\"]) P[k] = new Float32Array(W);\n  for (let x = 0; x \u003c W; x++) {\n    const r = Math.exp(-(((x - rx) / 6) ** 2));\n    P.rip[x] = 0.8 * r;\n    P.bump[x] = 2.4 * (1 + 0.1 * Math.sin(x * 0.11 + ph)) * (1 - 0.55 * r);\n    // Beach cusps: the run-up reaches further every 16 columns.\n    P.cusp[x] = 1 + 0.18 * Math.sin((x * 2 * Math.PI) / 16 + ph);\n  }\n  // Lace: Worley noise with three points in each cell of an 8 LED grid that wraps, the\n  // second-nearest point's distance less the nearest's, so it is 0 along the cell walls\n  // where the bubbles gather.\n  const pts = [];\n  for (let j = 0; j \u003c 16 * 8 * 3; j++) pts.push(Math.random() * 8, Math.random() * 8);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      let f1 = 99;\n      let f2 = 99;\n      const cx = x >> 3;\n      const cy = y >> 3;\n      for (let j = -1; j \u003c= 1; j++)\n        for (let i = -1; i \u003c= 1; i++)\n          for (let n = 0; n \u003c 3; n++) {\n            const q = ((((cy + j + 16) % 16) * 8 + ((cx + i + 8) % 8)) * 3 + n) * 2;\n            const d = Math.hypot((cx + i) * 8 + pts[q] - x - 0.5, (cy + j) * 8 + pts[q + 1] - y - 0.5);\n            if (d \u003c f1) (f2 = f1), (f1 = d);\n            else if (d \u003c f2) f2 = d;\n          }\n      P.lace[y * W + x] = Math.min(1, (f2 - f1) / 2.2);\n      // A dark grain here and there, and a few pale shell bits.\n      const h = Math.random();\n      P.grain[y * W + x] = h \u003c 0.04 ? -0.18 : h > 0.96 ? 0.07 : 0;\n    }\n  // Someone walking along the beach above the swash.\n  P.walk = Math.random() * W;\n}\n\n// A bore reaching the water's edge runs up the beach: its reach in rows grows with the\n// square root of the wave's height and with the cusps. Meeting the backwash of the one\n// before, it drives that sheet back up.\nfunction launch(P, x, w) {\n  const R = 9 * Math.sqrt(w.h) * P.cusp[x] * (1 + 0.15 * Math.sin(x * 0.3 + w.t0));\n  const u = Math.sqrt(2 * RUN * R);\n  if (P.S[x] > P.ys) P.U[x] = Math.max(P.U[x], u * 0.75);\n  else (P.S[x] = P.ys), (P.U[x] = u);\n}\n\nfunction step(P, dt) {\n  P.t += dt;\n  if (Math.abs(P.tide - P.tideAt) > 0.01) retide(P);\n  const ys = P.ys;\n  while (P.next \u003c= P.t) {\n    spawn(P, P.next);\n    P.next += PERIOD * (0.9 + 0.2 * Math.random());\n  }\n  // A wave is done once its foam has faded behind the water's edge.\n  const done = P.tt[Math.min(H, Math.ceil(ys))] + 4 * FOAM_T;\n  while (P.waves.length && P.t - P.waves[0].t0 >= done) P.pool.push(P.waves.shift());\n  const dry = Math.exp(-dt / DRY_T);\n  for (let x = 0; x \u003c W; x++) {\n    for (const w of P.waves)\n      if (!w.land[x] && crest(P, P.t - w.t0 - SKEW * x) >= ys) {\n        w.land[x] = 1;\n        launch(P, x, w);\n      }\n    if (P.S[x] > ys || P.U[x] > 0) {\n      P.S[x] = Math.min(H + 2, P.S[x] + P.U[x] * dt);\n      P.U[x] -= (P.U[x] > 0 ? RUN : 0.75 * RUN) * dt;\n      if (P.S[x] \u003c= ys) (P.S[x] = ys), (P.U[x] = 0);\n    }\n    for (let y = Math.max(0, Math.floor(ys)); y \u003c H; y++) P.wet[y * W + x] = y \u003c= P.S[x] ? 1 : P.wet[y * W + x] * dry;\n  }\n  P.walk = (P.walk + 0.45 * dt) % (W + 8);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  const s = clamp(k[1], 0.05, 4);\n  P.sea = clamp(k[0], 0, 1);\n  P.height = clamp(k[2], 0.5, 3.5);\n  P.tide = 0.7 * clamp(k[3], -1, 1);\n  if (!P.started) {\n    // The beach has been running for half a minute when the panel opens, with the swell\n    // already in flight and the biggest wave of a set due on the bar 14 beach seconds later.\n    P.started = true;\n    retide(P);\n    P.next = -P.tt[BAR] - 2 * PERIOD;\n    P.phase = Math.PI / 2 - (2 * Math.PI * (44 + 2 * PERIOD)) / (7 * PERIOD);\n    for (let i = 0; i \u003c 30 * 8; i++) step(P, 1 / 8);\n  }\n  step(P, dt * s);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const u = P.sea * 2;\n  const i0 = Math.min(1, Math.floor(u));\n  const [deep, shallow, sand, white] = [0, 1, 2, 3].map((j) => mix(SEAS[i0][j], SEAS[i0 + 1][j], u - i0));\n  // Sand under a few centimetres of water, wet sand, and the swash's thin sheet.\n  const under = mix(sand, deep, 0.25);\n  const damp = sand.map((v, j) => v * 0.68 + deep[j] * 0.06);\n  const film = mix(damp, shallow, 0.5);\n  const { light, foam, lace, col, ys, ka, ke, ft, wet, grain } = P;\n  // The lace drifts slowly in to the beach.\n  const drift = Math.floor(P.t * 0.6);\n  const row = P.row;\n  for (let y = 0; y \u003c H; y++) row[y] = ((((y - drift) % H) + H) % H) * W;\n  for (let x = 0; x \u003c W; x++) {\n    light.fill(0);\n    foam.fill(0);\n    for (const w of P.waves) {\n      // A crest not yet on the panel is still coming in above it.\n      const age = P.t - w.t0 - SKEW * x;\n      const Y = age \u003c 0 ? age / P.tt[1] : crest(P, age);\n      const yc = clamp(Math.floor(Y), 0, Math.min(Math.floor(ys) - 1, H - 1));\n      const s = w.fs[yc * W + x];\n      if (Y \u003c ys) {\n        // The face of the swell: lit behind the crest and in shade in front of it, the shade\n        // narrowing and darkening as the wave steepens.\n        const steep = clamp(w.ht[yc * W + x] / (GAMMA * Math.max(0.1, P.d[yc * W + x])), 0, 1);\n        const L = PERIOD / (P.tt[yc + 1] - P.tt[yc]);\n        const amp = 0.07 + 0.03 * w.h + 0.3 * steep;\n        const back = 0.3 * L;\n        const front = Math.max(1.5, 0.16 * L * (1 - 0.6 * steep));\n        for (let y = Math.max(0, Math.ceil(Y - back)); y \u003c Math.min(H, Y + front); y++) {\n          const v = y \u003c Y ? (Y - y) / back : (y - Y) / front;\n          light[y] += 4 * v * (1 - v) * (y \u003c Y ? amp : -1.3 * amp);\n        }\n        // A breaking crest is a band of white, thicker the harder it breaks, with a ragged\n        // leading edge.\n        if (s > 0) {\n          const sb = Math.min(1, s);\n          const edge = Y + 0.5 + sb * (0.8 + 1.6 * lace[(yc * W + x * 7) % N]);\n          for (let y = Math.max(0, Math.floor(Y - 1 - 2 * sb)); y \u003c= edge && y \u003c H; y++) foam[y] = Math.max(foam[y], 0.25 + 0.75 * s);\n        }\n      }\n      // Behind a broken crest the foam it made fades with the time since it passed.\n      const fade = Math.exp(-age / FOAM_T);\n      for (let y = yc; y >= w.first[x]; y--) {\n        const f = w.fs[y * W + x] * fade * ft[y];\n        if (f > foam[y]) foam[y] = f;\n      }\n    }\n    const S = P.S[x];\n    const back = P.U[x] > 0 ? 1 : 0.55;\n    for (let y = 0; y \u003c H; y++) {\n      const p = y * W + x;\n      let r;\n      let g;\n      let b;\n      let f = 0;\n      if (y \u003c ys) {\n        // Open water: deep blue fading to the shallow colour over the bar and the beach face,\n        // and the sand showing through in the last few centimetres.\n        const a = ka[p];\n        const e = ke[p];\n        const m = 1 + light[y];\n        r = (shallow[0] + (deep[0] - shallow[0]) * a) * (1 - e) + under[0] * e;\n        g = (shallow[1] + (deep[1] - shallow[1]) * a) * (1 - e) + under[1] * e;\n        b = (shallow[2] + (deep[2] - shallow[2]) * a) * (1 - e) + under[2] * e;\n        r *= m;\n        g *= m;\n        b *= m;\n        f = foam[y];\n      } else if (y \u003c= S) {\n        // The swash: a sheet of water over the sand, its foam thick at the edge and thin in\n        // the backwash.\n        r = film[0];\n        g = film[1];\n        b = film[2];\n        f = (S - y \u003c 1.2 ? 1.1 : Math.exp(-(S - y) / 2.5)) * back;\n      } else {\n        // Sand, darker while it is wet, with the sky's sheen on it just after the water goes.\n        const wv = wet[p];\n        const k = 1 + grain[p];\n        const w3 = wv * wv * wv;\n        const sh = 40 * w3 * w3;\n        r = (sand[0] + (damp[0] - sand[0]) * wv) * k + sh * 0.8;\n        g = (sand[1] + (damp[1] - sand[1]) * wv) * k + sh * 0.9;\n        b = (sand[2] + (damp[2] - sand[2]) * wv) * k + sh;\n      }\n      // Foam: solid where it is fresh, a net of bubbles along the lace's cell walls as it fades.\n      const fv = f > 0 ? clamp((f * 1.3 - lace[row[y] + x]) * 3, 0, 1) * (0.75 + 0.25 * Math.min(1, f)) : 0;\n      col[p * 3] = r + (white[0] - r) * fv;\n      col[p * 3 + 1] = g + (white[1] - g) * fv;\n      col[p * 3 + 2] = b + (white[2] - b) * fv;\n    }\n  }\n  // Things on the dry sand, never in the water.\n  const put = (x, y, c, m) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || x >= W || y >= H || y \u003c ys + 2) return;\n    for (let j = 0; j \u003c 3; j++) col[(y * W + x) * 3 + j] = m ? col[(y * W + x) * 3 + j] * m : c[j];\n  };\n  for (const [tx, ty, tw, th, a, b] of TOWELS)\n    for (let y = 0; y \u003c th; y++) for (let x = 0; x \u003c tw; x++) put(tx + x, ty + y, (tw > th ? x : y) % 2 ? b : a);\n  // Someone on the first towel.\n  for (const [x, y, c] of [[10, 114, SKIN], [10, 115, [200, 60, 60]], [11, 115, [200, 60, 60]], [10, 116, SKIN], [11, 117, SKIN]]) put(x, y, c);\n  // The umbrella from above, eight panels, red and white, its shadow down to the right.\n  for (let y = -4; y \u003c= 4; y++) for (let x = -4; x \u003c= 4; x++) if (Math.hypot(x, y) \u003c= 3.4) put(28 + x, 114 + y, null, 0.62);\n  for (let y = -4; y \u003c= 4; y++)\n    for (let x = -4; x \u003c= 4; x++) {\n      const r = Math.hypot(x, y);\n      const seg = Math.floor(((Math.atan2(y, x) + Math.PI) / (2 * Math.PI)) * 8) % 2;\n      if (r \u003c= 3.4) put(26 + x, 112 + y, r \u003c 0.8 ? [240, 240, 236] : seg ? [228, 54, 46] : [244, 240, 232]);\n    }\n  // The walker, head and shoulders and a short shadow.\n  const wx = P.walk - 4;\n  const wy = Math.min(H - 6, ys + 15);\n  put(wx + 1, wy + 1, null, 0.6);\n  put(wx, wy, [40, 60, 140]);\n  put(wx, wy - 1, SKIN);\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, q4(col[p * 3]), q4(col[p * 3 + 1]), q4(col[p * 3 + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Water=0..1, Speed=0.2..3, Height=1..3, Tide=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Water","min":0,"max":1,"about":"Tropical turquoise over white sand at 0, Atlantic green-blue in the middle, the grey North Sea over brown sand at 1."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the beach runs: at 2 the eight-second swell lands a wave every four seconds."},{"name":"Height","min":1,"max":3,"about":"Wave height in metres: at 1 the bar breaks only the bigger waves of each set, at 3 every wave breaks before the bar and the trough runs white."},{"name":"Tide","min":-1,"max":1,"about":"At -1 low water nearly bares the bar and pulls the water's edge ten rows out; at 1 high water covers the bar and most waves break only at the shore."}],"start":[0,2,1,0.06],"measures":{"motion":0.1312,"detail":0.0226,"edges":0.2179,"complexity":0.5021,"coverage":1,"colour":0.3833,"drift":0.0432},"knobResponse":[0.2028,0.0707,0.0565,0.1108]},{"slug":"skein","title":"Skein","family":"bird","round":23,"note":"해 진 뒤 하늘을 올려다보면 기러기 떼가 V 자로 패널 위쪽, 북쪽으로 날아가요. 지친 선두가 한쪽 줄로 물러나면 다른 기러기가 앞에 서고, 커다란 보름달 앞을 지날 때는 새카만 실루엣이 돼요. 뒤따라온 작은 떼가 꼬리에 붙기도 해요.","idea":"Looking straight up at dusk as a skein of geese flies north over you in a ragged V, its tired leader now and then dropping back so another goose can take the point, and each bird turns black against the big full moon as it crosses.","buttons":"K1 tap startles the skein, and the V breaks into a honking tangle before it pulls itself back into shape.","code":"// ===== Patternflow pattern =====\n// Title:   Skein\n// Family:  bird\n// Idea:    Looking straight up at dusk as a skein of geese flies north over you in a ragged V, its tired leader now and then dropping back so another goose can take the point, and each bird turns black against the big full moon as it crosses.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the V formation of migrating geese\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Geese=7..31, Wind=-1..1\n//\n// Knob 1: Dusk. How late it is: at 0 the golden afterglow fills the top of the sky and the moon is pale, and towards 1 the glow sinks to a dim band and the moon and the stars carry a navy sky.\n// Knob 2: Speed. The pace of everything: at 2 a skein crosses the panel in about ten seconds with its wings beating three times a second, and at 0.2 it all runs ten times slower.\n// Knob 3: Geese. How many birds fly in the skein, from a small V of seven to a long one of thirty one whose arms reach most of the way down the panel. A big skein flies higher, so its birds look smaller.\n// Knob 4: Wind. A crosswind from the side. The geese turn their bodies into it and crab across the sky, and the arm on the downwind side grows longer. The clouds drift with it too.\n// Buttons: K1 tap startles the skein, and the V breaks into a honking tangle before it pulls itself back into shape.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, sin, cos, abs, hypot, exp, floor, round, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Ground speed of a skein at Speed 2, in LEDs a second.\nconst V0 = 12;\n// The radius of the moon.\nconst MR = 11.5;\nconst MS = 27;\n\n// A fixed hash and smooth value noise, for the sky's haze and the clouds.\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x);\n  const iy = floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy, s);\n  const b = hash(ix + 1, iy, s);\n  const c = hash(ix, iy + 1, s);\n  const d = hash(ix + 1, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\nconst fbm = (x, y, s) => 0.5 * noise(x, y, s) + 0.3 * noise(x * 2.1, y * 2.1, s + 7) + 0.2 * noise(x * 4.3, y * 4.3, s + 13);\n\n// Sky colours by how far a spot is from the afterglow, at dusk and at night.\nconst SKY0 = [\n  [0, 255, 206, 120],\n  [0.1, 252, 162, 72],\n  [0.22, 238, 108, 82],\n  [0.34, 164, 74, 122],\n  [0.48, 74, 62, 146],\n  [0.66, 30, 44, 122],\n  [0.82, 14, 26, 84],\n  [0.96, 6, 12, 38],\n  [1.06, 3, 7, 20],\n  [2, 2, 5, 14],\n];\nconst SKY1 = [\n  [0, 84, 62, 96],\n  [0.14, 30, 34, 88],\n  [0.4, 12, 22, 66],\n  [2, 6, 13, 48],\n];\n// The undersides of clouds, lit from below by the sun that has set.\nconst CLOUD0 = [\n  [0, 255, 232, 176],\n  [0.2, 255, 176, 112],\n  [0.4, 252, 124, 128],\n  [0.65, 196, 96, 156],\n  [2, 126, 78, 146],\n];\nconst C3 = [0, 0, 0];\nfunction ramp(P, e, out) {\n  let i = 0;\n  while (i \u003c P.length - 2 && e > P[i + 1][0]) i++;\n  const a = P[i];\n  const b = P[i + 1];\n  const t = clamp((e - a[0]) / (b[0] - a[0]), 0, 1);\n  out[0] = a[1] + (b[1] - a[1]) * t;\n  out[1] = a[2] + (b[2] - a[2]) * t;\n  out[2] = a[3] + (b[3] - a[3]) * t;\n  return out;\n}\n// How far from the afterglow, 0 at the top right corner (north west) to 1 at the bottom left.\nconst glowDist = (x, y) => (y + 0.3 * (63 - x)) / 136;\n\n// A cloud: a soft patch of density, drifting sideways and coming round again.\nfunction newCloud(c, y, x) {\n  c.w = 30 + floor(Math.random() * 16);\n  c.h = 9 + floor(Math.random() * 6);\n  c.y = y;\n  c.x = x;\n  c.m = new Float32Array(c.w * c.h);\n  const s = floor(Math.random() * 9999);\n  for (let j = 0; j \u003c c.h; j++)\n    for (let i = 0; i \u003c c.w; i++) {\n      const dx = (i + 0.5) / c.w - 0.5;\n      const dy = (j + 0.5) / c.h - 0.5;\n      const env = 1 - 4 * dx * dx - 4 * dy * dy;\n      const n = fbm(i * 0.2, j * 0.32, s);\n      c.m[j * c.w + i] = sstep(0.1, 0.55, env * 0.8 + (n - 0.45) * 1.2);\n    }\n  return c;\n}\n\nfunction newBird(S, x, y) {\n  const b = { x, y, vx: 0, vy: -V0, hd: 0, gs: 0, ph: Math.random() * 6.28, j: Math.random() * 99, drop: 0 };\n  S.birds.push(b);\n  return b;\n}\n\n// A skein is a leader and two arms, each an ordered list of birds from the front.\nfunction newSkein(S, n, x, y, fast) {\n  const hd = -0.34 * S.wind;\n  const vx = V0 * fast * sin(hd) + 9 * S.wind;\n  const vy = -V0 * fast * cos(hd);\n  const k = { x, y, hd, vx, vy, L: [], R: [], fast, want: n, rot: 3.2 + Math.random() * 2, side: Math.random() \u003c 0.5 ? -1 : 1, tangle: 0, join: null, flap: Math.random() * 6 };\n  k.lead = newBird(S, x, y);\n  for (let i = 1; i \u003c n; i++) (i & 1 ? k.L : k.R).push(newBird(S, x, y));\n  for (const b of [k.lead, ...k.L, ...k.R]) {\n    b.vx = vx;\n    b.vy = vy;\n  }\n  S.skeins.push(k);\n  place(S, k, true);\n  return k;\n}\n\n// Where each bird of a skein wants to be. With snap the birds are put there.\nfunction place(S, k, snap) {\n  const n = 1 + k.L.length + k.R.length;\n  const t = S.t;\n  // A big skein flies higher, so its birds look smaller and sit closer.\n  k.gs = clamp(1.05 - 0.013 * (n - 7), 0.74, 1.05);\n  const sp = k.gs * (10.2 - 0.07 * (n - 7)) * (1 + 0.04 * sin(t * 0.29 + k.flap));\n  const a0 = max(0.31, 0.64 - 0.02 * (n - 7)) * (1 + 0.07 * sin(t * 0.37 + k.flap));\n  const h = k.hd;\n  const fx = sin(h);\n  const fy = -cos(h);\n  const set = (b, tx, ty) => {\n    // Each bird wanders a little round its slot, so the V is never quite straight.\n    tx += 0.9 * sin(t * 0.7 + b.j) + k.tangle * 13 * sin(t * 1.3 + b.j * 3.1);\n    ty += 1.3 * sin(t * 0.53 + b.j * 1.7) + k.tangle * 11 * sin(t * 1.1 + b.j * 2.3);\n    b.tx = tx;\n    b.ty = ty;\n    if (snap) {\n      b.x = tx;\n      b.y = ty;\n    }\n  };\n  // Startled, the whole skein bunches round its middle.\n  const cx = k.x - fx * 12 * k.tangle;\n  const cy = k.y - fy * 12 * k.tangle;\n  set(k.lead, k.x + (cx - k.x) * k.tangle, k.y + (cy - k.y) * k.tangle);\n  for (const s of [-1, 1]) {\n    const arm = s \u003c 0 ? k.L : k.R;\n    // The downwind arm opens a little wider.\n    const a = a0 * (1 + 0.2 * s * S.wind);\n    const sx = s * sin(a);\n    const bk = cos(a);\n    for (let r = 0; r \u003c arm.length; r++) {\n      const b = arm[r];\n      const d = (r + 1) * sp;\n      // Right of the heading is (-fy, fx); back is (-fx, -fy).\n      let px = k.x + d * (sx * -fy - bk * fx);\n      let py = k.y + d * (sx * fx - bk * fy);\n      // A bird moving back along the arm keeps to its outside.\n      px += s * 4 * b.drop * cos(h);\n      py += s * 4 * b.drop * sin(h);\n      const u = k.tangle;\n      set(b, px + (cx - px) * u, py + (cy - py) * u);\n    }\n  }\n}\n\nfunction spawn(S, first) {\n  const n = S.n;\n  const x0 = 32 - S.wind * 30 + (first ? 0 : (Math.random() - 0.5) * 14);\n  const ext = ((n - 1) / 2) * (8.6 - 0.11 * (n - 7));\n  const y0 = first ? max(50, 110 - ext) : 140;\n  const k = newSkein(S, n, x0, y0, 1);\n  // The second, smaller skein comes on behind, and most times it catches up and joins.\n  const m = max(3, round(n * 0.3));\n  const joins = first || Math.random() \u003c 0.65;\n  const off = joins ? (Math.random() - 0.5) * 10 : (Math.random() \u003c 0.5 ? -1 : 1) * 17;\n  const k2 = newSkein(S, m, x0 + off, max(150, y0 + ext + 40), joins ? 1.6 : 1.04);\n  k2.join = joins ? k : null;\n  k.next = first ? 4.5 : 8 + Math.random() * 3;\n}\n\nexport function setup(params) {\n  const S = {\n    t: 0,\n    birds: [],\n    skeins: [],\n    sky: new Float32Array(N * 3),\n    buf: new Float32Array(N * 3),\n    A: new Float32Array(N),\n    e: new Float32Array(N),\n    haze: new Float32Array(N),\n    dk: -1,\n    moon: new Float32Array(MS * MS),\n    cov: new Float32Array(MS * MS),\n    stars: [],\n    clouds: [],\n    n: 7,\n    wind: 0.06,\n    dusk: 0,\n    started: false,\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      S.e[y * W + x] = glowDist(x, y);\n      S.haze[y * W + x] = 0.94 + 0.12 * fbm(x * 0.06, y * 0.035, 5);\n    }\n  // The moon's face: a full disc, darker seas on it and a darker rim.\n  const seas = [\n    [-3.5, -3.5, 4.6, 3.8],\n    [2.5, -3.2, 2.8, 2.6],\n    [4.2, 1.2, 3.2, 3.4],\n    [-6.2, 1.5, 3, 5.5],\n    [-0.5, 4.5, 3, 1.8],\n  ];\n  for (let j = 0; j \u003c MS; j++)\n    for (let i = 0; i \u003c MS; i++) {\n      const dx = i - 13;\n      const dy = j - 13;\n      const r = hypot(dx, dy);\n      const cov = clamp(MR + 0.5 - r, 0, 1);\n      let sea = 0;\n      for (const [sx, sy, rx, ry] of seas) sea = max(sea, sstep(1.15, 0.2, hypot((dx - sx) / rx, (dy - sy) / ry)));\n      const alb = 1 - 0.15 * sea - 0.12 * (r / MR) ** 2 - 0.05 * noise(i * 0.7, j * 0.7, 3);\n      S.moon[j * MS + i] = alb;\n      S.cov[j * MS + i] = cov;\n    }\n  for (let i = 0; i \u003c 90; i++) S.stars.push({ x: floor(Math.random() * W), y: floor(Math.random() * H), m: Math.random() ** 2.2, p: Math.random() * 6.28 });\n  S.clouds.push(newCloud({}, 30, 4), newCloud({}, 68, 26), newCloud({}, 112, -6));\n  params.s = S;\n}\n\nfunction stepBirds(S, dt) {\n  const ws = S.wind;\n  for (const k of S.skeins) {\n    // The geese head a little into the wind and crab across it.\n    k.hd += (-0.34 * ws - k.hd) * min(1, dt * 1.5);\n    const v = V0 * k.fast;\n    const vx = v * sin(k.hd) + 9 * ws;\n    const vy = -v * cos(k.hd);\n    k.vx = vx;\n    k.vy = vy;\n    k.x += vx * dt;\n    k.y += vy * dt;\n    k.flap += dt * 2 * PI * 2.9 * (1 + 0.7 * k.tangle);\n    if (k.tangle > 0) {\n      k.tangle -= dt * 0.33;\n      if (k.tangle \u003c= 0) {\n        // Reformed, though not always in the same order.\n        k.tangle = 0;\n        const all = [k.lead, ...k.L, ...k.R].sort(() => Math.random() - 0.5);\n        k.lead = all[0];\n        k.L = [];\n        k.R = [];\n        for (let i = 1; i \u003c all.length; i++) (i & 1 ? k.L : k.R).push(all[i]);\n      }\n    }\n    // The leader tires, drops back along one arm, and the next bird up takes the point.\n    k.rot -= dt;\n    if (k.rot \u003c= 0 && !k.tangle) {\n      k.rot = 6 + Math.random() * 3;\n      k.side = -k.side;\n      const arm = k.side \u003c 0 ? k.L : k.R;\n      if (arm.length) {\n        const old = k.lead;\n        k.lead = arm.shift();\n        arm.push(old);\n        old.drop = 1;\n      }\n    }\n    // Keep the arms in the split the wind asks for, one bird at a time.\n    const m = k.L.length + k.R.length;\n    const wantR = round(m * clamp(0.5 + 0.36 * ws, 0.1, 0.9));\n    k.bal = (k.bal || 0) - dt;\n    if (k.bal \u003c= 0 && wantR !== k.R.length && !k.tangle) {\n      k.bal = 0.5;\n      if (wantR > k.R.length && k.L.length) k.R.push(k.L.pop());\n      else if (k.R.length) k.L.push(k.R.pop());\n    }\n    // The second skein joins the tail of the first when it has caught up.\n    if (k.join) {\n      const j = k.join;\n      const tail = [j.lead, ...j.L, ...j.R].reduce((a, b) => (b.y > a.y ? b : a));\n      if (j.gone || k.y \u003c tail.y + 10) {\n        const add = [k.lead, ...k.L, ...k.R];\n        if (!j.gone) {\n          for (const b of add) (j.L.length \u003c= j.R.length ? j.L : j.R).push(b);\n          j.want += add.length;\n          k.L = [];\n          k.R = [];\n          k.lead = null;\n          k.gone = true;\n        }\n        k.join = null;\n      }\n    }\n  }\n  S.skeins = S.skeins.filter((k) => !k.gone);\n  // When a skein is high on the panel, the next one comes in from the bottom.\n  for (const k of S.skeins)\n    if (k.next !== undefined) {\n      k.next -= dt;\n      if (k.next \u003c= 0) {\n        k.next = undefined;\n        spawn(S, false);\n      }\n    }\n  // The Geese knob adds birds to the tail of the newest skein, or lets some fall away.\n  const main = S.skeins.filter((k) => k.join === null && k.fast === 1).pop();\n  if (main) {\n    if (S.lastN !== S.n) main.want = max(3, main.want + S.n - (S.lastN || S.n));\n    S.lastN = S.n;\n    S.adj = (S.adj || 0) - dt;\n    const n = 1 + main.L.length + main.R.length;\n    if (S.adj \u003c= 0 && n !== main.want) {\n      S.adj = 0.15;\n      const arm = main.L.length \u003c= main.R.length ? main.L : main.R;\n      if (n \u003c main.want) {\n        const tail = arm.length ? arm[arm.length - 1] : main.lead;\n        arm.push(newBird(S, tail.x, max(tail.y + 18, 136)));\n      } else {\n        const long = main.L.length > main.R.length ? main.L : main.R;\n        const b = long.pop();\n        b.stray = long === main.L ? -1 : 1;\n      }\n    }\n  }\n  for (const k of S.skeins) place(S, k, false);\n  // Each bird springs towards its slot and matches the skein's speed.\n  for (const k of S.skeins) {\n    const all = [k.lead, ...k.L, ...k.R];\n    for (let r = 0; r \u003c all.length; r++) {\n      const b = all[r];\n      b.sk = k;\n      b.rank = r === 0 ? 0 : (r + 1) >> 1;\n    }\n  }\n  const om = 2.2;\n  for (const b of S.birds) {\n    const k = b.sk;\n    if (b.stray) {\n      // A bird that leaves falls back and peels away to its side.\n      b.vx += (b.stray * 6 + 9 * ws - b.vx) * dt;\n      b.vy += (-V0 * 0.4 - b.vy) * dt;\n      b.hd += (b.stray * 0.4 - b.hd) * dt;\n    } else if (k) {\n      const ex = b.tx - b.x;\n      const ey = b.ty - b.y;\n      const ax = om * om * ex - 2 * om * (b.vx - k.vx);\n      const ay = om * om * ey - 2 * om * (b.vy - k.vy);\n      b.vx += ax * dt;\n      b.vy += ay * dt;\n      // Not faster than a goose can close up.\n      const rx = b.vx - k.vx;\n      const ry = b.vy - k.vy;\n      const rs = hypot(rx, ry);\n      if (rs > 13) {\n        b.vx = k.vx + (rx * 13) / rs;\n        b.vy = k.vy + (ry * 13) / rs;\n      }\n      if (b.drop > 0 && hypot(ex, ey) \u003c 2) b.drop = max(0, b.drop - dt);\n      // Bodies point along the skein's heading, banking a little as they shift.\n      const want = k.hd + clamp(0.03 * rx, -0.4, 0.4) + k.tangle * 0.6 * sin(S.t * 2.3 + b.j);\n      b.hd += (want - b.hd) * min(1, dt * 4);\n      b.gs = b.gs ? b.gs + (k.gs - b.gs) * min(1, dt) : k.gs;\n      // Wings beat out of step down each arm.\n      const tp = k.flap - b.rank * 0.9 + k.tangle * b.j;\n      b.ph += dt * 2 * PI * 2.9 * (1 + 0.7 * k.tangle) + 0.08 * sin(tp - b.ph);\n    }\n    b.x += b.vx * dt;\n    b.y += b.vy * dt;\n    if (b.stray) b.ph += dt * 2 * PI * 2.9;\n    if (b.y \u003c -14 || b.y > 190 || b.x \u003c -50 || b.x > 114) b.out = true;\n  }\n  // A skein whose birds have all flown off the top is gone.\n  for (const k of S.skeins) {\n    const all = [k.lead, ...k.L, ...k.R];\n    if (all.every((b) => b.y \u003c -14)) k.gone = true;\n  }\n  S.skeins = S.skeins.filter((k) => !k.gone);\n  S.birds = S.birds.filter((b) => !(b.out && (b.stray || !b.sk || b.sk.gone)));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.dusk = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2;\n  S.n = clamp(round(k[2]), 7, 31);\n  S.wind = clamp(k[3], -1, 1);\n  if (!S.started) {\n    S.started = true;\n    spawn(S, true);\n  }\n  const d = dt * tempo;\n  S.t += d;\n  if (input.btnPressed && input.btnPressed[0])\n    for (const sk of S.skeins) {\n      sk.tangle = 1;\n      for (const b of [sk.lead, ...sk.L, ...sk.R]) {\n        b.vx += (Math.random() - 0.5) * 30;\n        b.vy += (Math.random() - 0.5) * 24;\n      }\n    }\n  stepBirds(S, d);\n  // Clouds drift with the wind high up and come round again.\n  const cv = (2.3 + 5 * S.wind) * d;\n  for (const c of S.clouds) {\n    c.x += cv;\n    if (c.x > W + 2) newCloud(c, 14 + Math.random() * 100, -c.w - 2 - Math.random() * 10);\n    else if (c.x \u003c -c.w - 14) newCloud(c, 14 + Math.random() * 100, W + 2);\n  }\n  // The moon climbs a little as the night goes on.\n  S.mx = 19 + 4 * S.dusk;\n  S.my = 104 - 22 * S.dusk - 5 * (1 - exp(-S.t / 50));\n}\n\nfunction paintSky(S) {\n  const dk = S.dusk;\n  const w = sstep(0.2, 1, dk);\n  const g = 1 + 1.8 * dk;\n  const c0 = [0, 0, 0];\n  const c1 = [0, 0, 0];\n  for (let i = 0; i \u003c N; i++) {\n    const e = S.e[i];\n    ramp(SKY0, e * g, c0);\n    ramp(SKY1, e, c1);\n    const hz = S.haze[i];\n    S.sky[i * 3] = (c0[0] + (c1[0] - c0[0]) * w) * hz;\n    S.sky[i * 3 + 1] = (c0[1] + (c1[1] - c0[1]) * w) * hz;\n    S.sky[i * 3 + 2] = (c0[2] + (c1[2] - c0[2]) * w) * hz;\n  }\n  S.dk = dk;\n}\n\n// A tapered stroke into the geese's coverage, kept as the larger of what is there.\nfunction stroke(A, ax, ay, bx, by, ra, rb) {\n  const x0 = max(0, floor(min(ax, bx) - 2));\n  const x1 = min(W - 1, Math.ceil(max(ax, bx) + 2));\n  const y0 = max(0, floor(min(ay, by) - 2));\n  const y1 = min(H - 1, Math.ceil(max(ay, by) + 2));\n  const dx = bx - ax;\n  const dy = by - ay;\n  const ll = dx * dx + dy * dy || 1;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const t = clamp(((x - ax) * dx + (y - ay) * dy) / ll, 0, 1);\n      const d = hypot(x - ax - dx * t, y - ay - dy * t);\n      const a = clamp(ra + (rb - ra) * t + 0.5 - d, 0, 1);\n      const i = y * W + x;\n      if (a > A[i]) A[i] = a;\n    }\n}\n\n// A goose seen from below: neck stretched forward, wings beating at its sides.\nfunction goose(A, b) {\n  const x = b.x;\n  const y = b.y;\n  if (x \u003c -9 || x > W + 8 || y \u003c -9 || y > H + 8) return;\n  const fx = sin(b.hd);\n  const fy = -cos(b.hd);\n  const P = (u, v) => [x - fy * u + fx * v, y + fx * u + fy * v];\n  const g = b.gs || 1;\n  const s = sin(b.ph);\n  const up = max(0, cos(b.ph));\n  // Seen from below, a wing raised or lowered is foreshortened, and on the\n  // upstroke it bends at the wrist and sweeps its tip back.\n  const th = 0.9 * s;\n  const span = g * (0.8 + 5.2 * cos(th) * (1 - 0.18 * up));\n  const tipv = g * (-0.7 - 1.7 * up + 0.5 * s);\n  const head = P(0, 5.1 * g);\n  const neck = P(0, 1.6 * g);\n  const chest = P(0, 0.9 * g);\n  const tail = P(0, -3.5 * g);\n  stroke(A, chest[0], chest[1], tail[0], tail[1], 1.25 * g, 0.55 * g);\n  stroke(A, neck[0], neck[1], head[0], head[1], max(0.45, 0.48 * g), max(0.55, 0.7 * g));\n  for (const sd of [-1, 1]) {\n    const sh = P(sd * 0.8 * g, 0.8 * g);\n    const wr = P(sd * (0.8 * g + 0.45 * (span - 0.8 * g)), g * (0.9 - 0.5 * up));\n    const tp = P(sd * span, tipv);\n    stroke(A, sh[0], sh[1], wr[0], wr[1], 1.0 * g, 0.75 * g);\n    stroke(A, wr[0], wr[1], tp[0], tp[1], 0.75 * g, 0.35 * g);\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (abs(S.dk - S.dusk) > 0.002) paintSky(S);\n  const dk = S.dusk;\n  const { sky, buf, A } = S;\n  buf.set(sky);\n  // Stars come out where the sky is dark enough to show them.\n  const night = 150 + 200 * sstep(0.1, 0.9, dk);\n  for (const st of S.stars) {\n    const i = st.y * W + st.x;\n    const L = max(sky[i * 3], sky[i * 3 + 1], sky[i * 3 + 2]);\n    const v = clamp((st.m * night - L) / 60, 0, 1) * (0.75 + 0.25 * sin(S.t * 3.1 + st.p * 7));\n    buf[i * 3] += 200 * v;\n    buf[i * 3 + 1] += 210 * v;\n    buf[i * 3 + 2] += 230 * v;\n  }\n  // The moon, pale in the dusk and bright at night with a ring of glow round it.\n  const mx = S.mx;\n  const my = S.my;\n  const mb = 0.8 + 0.2 * dk;\n  const halo = 0.15 + 0.6 * dk;\n  const mc = [255 * mb, 246 * mb, 222 * mb];\n  for (let y = max(0, floor(my - 34)); y \u003c min(H, my + 34); y++)\n    for (let x = max(0, floor(mx - 34)); x \u003c min(W, mx + 34); x++) {\n      const i = (y * W + x) * 3;\n      const r = hypot(x - mx, y - my);\n      const gl = halo * 60 * exp(-max(0, r - MR) / 7);\n      buf[i] += gl * 0.75;\n      buf[i + 1] += gl * 0.8;\n      buf[i + 2] += gl;\n      const ix = round(x - mx + 13);\n      const iy = round(y - my + 13);\n      if (ix \u003c 0 || iy \u003c 0 || ix >= MS || iy >= MS) continue;\n      const cv = S.cov[iy * MS + ix];\n      if (cv \u003c= 0) continue;\n      const m = S.moon[iy * MS + ix];\n      buf[i] += (mc[0] * m - buf[i]) * cv;\n      buf[i + 1] += (mc[1] * m - buf[i + 1]) * cv;\n      buf[i + 2] += (mc[2] * m - buf[i + 2]) * cv;\n    }\n  // Clouds, their undersides lit from below by the afterglow, or grey by the moon at night.\n  const lw = sstep(0.05, 0.85, dk);\n  const g = 1 + 1.8 * dk;\n  for (const c of S.clouds) {\n    const cx = round(c.x);\n    const cy = round(c.y);\n    for (let j = 0; j \u003c c.h; j++) {\n      const y = cy + j;\n      if (y \u003c 0 || y >= H) continue;\n      for (let i = 0; i \u003c c.w; i++) {\n        const x = cx + i;\n        if (x \u003c 0 || x >= W) continue;\n        const dn = c.m[j * c.w + i];\n        if (dn \u003c= 0) continue;\n        const p = y * W + x;\n        ramp(CLOUD0, S.e[p] * g, C3);\n        const mn = exp(-hypot(x - mx, y - my) / 30);\n        const lr = C3[0] + (40 + 60 * mn - C3[0]) * lw;\n        const lg = C3[1] + (46 + 62 * mn - C3[1]) * lw;\n        const lb = C3[2] + (70 + 70 * mn - C3[2]) * lw;\n        const br = 0.5 + 0.5 * dn;\n        const q = p * 3;\n        const o = 0.9 * dn;\n        buf[q] += (lr * br - buf[q]) * o;\n        buf[q + 1] += (lg * br - buf[q + 1]) * o;\n        buf[q + 2] += (lb * br - buf[q + 2]) * o;\n      }\n    }\n  }\n  // The geese, dark against everything behind them.\n  A.fill(0);\n  for (const b of S.birds) goose(A, b);\n  const gr = 6;\n  const gg = 5;\n  const gb = 10;\n  for (let p = 0; p \u003c N; p++) {\n    const a = A[p];\n    const q = p * 3;\n    let r = buf[q];\n    let gn = buf[q + 1];\n    let bl = buf[q + 2];\n    if (a > 0) {\n      r += (gr - r) * a;\n      gn += (gg - gn) * a;\n      bl += (gb - bl) * a;\n    }\n    display.setPixel(p % W, (p / W) | 0, min(255, r) | 0, min(255, gn) | 0, min(255, bl) | 0);\n  }\n}\n","layer":{"id":"layer-skein","type":"code","name":"skein","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Skein\n// Family:  bird\n// Idea:    Looking straight up at dusk as a skein of geese flies north over you in a ragged V, its tired leader now and then dropping back so another goose can take the point, and each bird turns black against the big full moon as it crosses.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 23, after the V formation of migrating geese\n// Round:   23\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Geese=7..31, Wind=-1..1\n//\n// Knob 1: Dusk. How late it is: at 0 the golden afterglow fills the top of the sky and the moon is pale, and towards 1 the glow sinks to a dim band and the moon and the stars carry a navy sky.\n// Knob 2: Speed. The pace of everything: at 2 a skein crosses the panel in about ten seconds with its wings beating three times a second, and at 0.2 it all runs ten times slower.\n// Knob 3: Geese. How many birds fly in the skein, from a small V of seven to a long one of thirty one whose arms reach most of the way down the panel. A big skein flies higher, so its birds look smaller.\n// Knob 4: Wind. A crosswind from the side. The geese turn their bodies into it and crab across the sky, and the arm on the downwind side grows longer. The clouds drift with it too.\n// Buttons: K1 tap startles the skein, and the V breaks into a honking tangle before it pulls itself back into shape.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, sin, cos, abs, hypot, exp, floor, round, PI } = Math;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Ground speed of a skein at Speed 2, in LEDs a second.\nconst V0 = 12;\n// The radius of the moon.\nconst MR = 11.5;\nconst MS = 27;\n\n// A fixed hash and smooth value noise, for the sky's haze and the clouds.\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x);\n  const iy = floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy, s);\n  const b = hash(ix + 1, iy, s);\n  const c = hash(ix, iy + 1, s);\n  const d = hash(ix + 1, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\nconst fbm = (x, y, s) => 0.5 * noise(x, y, s) + 0.3 * noise(x * 2.1, y * 2.1, s + 7) + 0.2 * noise(x * 4.3, y * 4.3, s + 13);\n\n// Sky colours by how far a spot is from the afterglow, at dusk and at night.\nconst SKY0 = [\n  [0, 255, 206, 120],\n  [0.1, 252, 162, 72],\n  [0.22, 238, 108, 82],\n  [0.34, 164, 74, 122],\n  [0.48, 74, 62, 146],\n  [0.66, 30, 44, 122],\n  [0.82, 14, 26, 84],\n  [0.96, 6, 12, 38],\n  [1.06, 3, 7, 20],\n  [2, 2, 5, 14],\n];\nconst SKY1 = [\n  [0, 84, 62, 96],\n  [0.14, 30, 34, 88],\n  [0.4, 12, 22, 66],\n  [2, 6, 13, 48],\n];\n// The undersides of clouds, lit from below by the sun that has set.\nconst CLOUD0 = [\n  [0, 255, 232, 176],\n  [0.2, 255, 176, 112],\n  [0.4, 252, 124, 128],\n  [0.65, 196, 96, 156],\n  [2, 126, 78, 146],\n];\nconst C3 = [0, 0, 0];\nfunction ramp(P, e, out) {\n  let i = 0;\n  while (i \u003c P.length - 2 && e > P[i + 1][0]) i++;\n  const a = P[i];\n  const b = P[i + 1];\n  const t = clamp((e - a[0]) / (b[0] - a[0]), 0, 1);\n  out[0] = a[1] + (b[1] - a[1]) * t;\n  out[1] = a[2] + (b[2] - a[2]) * t;\n  out[2] = a[3] + (b[3] - a[3]) * t;\n  return out;\n}\n// How far from the afterglow, 0 at the top right corner (north west) to 1 at the bottom left.\nconst glowDist = (x, y) => (y + 0.3 * (63 - x)) / 136;\n\n// A cloud: a soft patch of density, drifting sideways and coming round again.\nfunction newCloud(c, y, x) {\n  c.w = 30 + floor(Math.random() * 16);\n  c.h = 9 + floor(Math.random() * 6);\n  c.y = y;\n  c.x = x;\n  c.m = new Float32Array(c.w * c.h);\n  const s = floor(Math.random() * 9999);\n  for (let j = 0; j \u003c c.h; j++)\n    for (let i = 0; i \u003c c.w; i++) {\n      const dx = (i + 0.5) / c.w - 0.5;\n      const dy = (j + 0.5) / c.h - 0.5;\n      const env = 1 - 4 * dx * dx - 4 * dy * dy;\n      const n = fbm(i * 0.2, j * 0.32, s);\n      c.m[j * c.w + i] = sstep(0.1, 0.55, env * 0.8 + (n - 0.45) * 1.2);\n    }\n  return c;\n}\n\nfunction newBird(S, x, y) {\n  const b = { x, y, vx: 0, vy: -V0, hd: 0, gs: 0, ph: Math.random() * 6.28, j: Math.random() * 99, drop: 0 };\n  S.birds.push(b);\n  return b;\n}\n\n// A skein is a leader and two arms, each an ordered list of birds from the front.\nfunction newSkein(S, n, x, y, fast) {\n  const hd = -0.34 * S.wind;\n  const vx = V0 * fast * sin(hd) + 9 * S.wind;\n  const vy = -V0 * fast * cos(hd);\n  const k = { x, y, hd, vx, vy, L: [], R: [], fast, want: n, rot: 3.2 + Math.random() * 2, side: Math.random() \u003c 0.5 ? -1 : 1, tangle: 0, join: null, flap: Math.random() * 6 };\n  k.lead = newBird(S, x, y);\n  for (let i = 1; i \u003c n; i++) (i & 1 ? k.L : k.R).push(newBird(S, x, y));\n  for (const b of [k.lead, ...k.L, ...k.R]) {\n    b.vx = vx;\n    b.vy = vy;\n  }\n  S.skeins.push(k);\n  place(S, k, true);\n  return k;\n}\n\n// Where each bird of a skein wants to be. With snap the birds are put there.\nfunction place(S, k, snap) {\n  const n = 1 + k.L.length + k.R.length;\n  const t = S.t;\n  // A big skein flies higher, so its birds look smaller and sit closer.\n  k.gs = clamp(1.05 - 0.013 * (n - 7), 0.74, 1.05);\n  const sp = k.gs * (10.2 - 0.07 * (n - 7)) * (1 + 0.04 * sin(t * 0.29 + k.flap));\n  const a0 = max(0.31, 0.64 - 0.02 * (n - 7)) * (1 + 0.07 * sin(t * 0.37 + k.flap));\n  const h = k.hd;\n  const fx = sin(h);\n  const fy = -cos(h);\n  const set = (b, tx, ty) => {\n    // Each bird wanders a little round its slot, so the V is never quite straight.\n    tx += 0.9 * sin(t * 0.7 + b.j) + k.tangle * 13 * sin(t * 1.3 + b.j * 3.1);\n    ty += 1.3 * sin(t * 0.53 + b.j * 1.7) + k.tangle * 11 * sin(t * 1.1 + b.j * 2.3);\n    b.tx = tx;\n    b.ty = ty;\n    if (snap) {\n      b.x = tx;\n      b.y = ty;\n    }\n  };\n  // Startled, the whole skein bunches round its middle.\n  const cx = k.x - fx * 12 * k.tangle;\n  const cy = k.y - fy * 12 * k.tangle;\n  set(k.lead, k.x + (cx - k.x) * k.tangle, k.y + (cy - k.y) * k.tangle);\n  for (const s of [-1, 1]) {\n    const arm = s \u003c 0 ? k.L : k.R;\n    // The downwind arm opens a little wider.\n    const a = a0 * (1 + 0.2 * s * S.wind);\n    const sx = s * sin(a);\n    const bk = cos(a);\n    for (let r = 0; r \u003c arm.length; r++) {\n      const b = arm[r];\n      const d = (r + 1) * sp;\n      // Right of the heading is (-fy, fx); back is (-fx, -fy).\n      let px = k.x + d * (sx * -fy - bk * fx);\n      let py = k.y + d * (sx * fx - bk * fy);\n      // A bird moving back along the arm keeps to its outside.\n      px += s * 4 * b.drop * cos(h);\n      py += s * 4 * b.drop * sin(h);\n      const u = k.tangle;\n      set(b, px + (cx - px) * u, py + (cy - py) * u);\n    }\n  }\n}\n\nfunction spawn(S, first) {\n  const n = S.n;\n  const x0 = 32 - S.wind * 30 + (first ? 0 : (Math.random() - 0.5) * 14);\n  const ext = ((n - 1) / 2) * (8.6 - 0.11 * (n - 7));\n  const y0 = first ? max(50, 110 - ext) : 140;\n  const k = newSkein(S, n, x0, y0, 1);\n  // The second, smaller skein comes on behind, and most times it catches up and joins.\n  const m = max(3, round(n * 0.3));\n  const joins = first || Math.random() \u003c 0.65;\n  const off = joins ? (Math.random() - 0.5) * 10 : (Math.random() \u003c 0.5 ? -1 : 1) * 17;\n  const k2 = newSkein(S, m, x0 + off, max(150, y0 + ext + 40), joins ? 1.6 : 1.04);\n  k2.join = joins ? k : null;\n  k.next = first ? 4.5 : 8 + Math.random() * 3;\n}\n\nexport function setup(params) {\n  const S = {\n    t: 0,\n    birds: [],\n    skeins: [],\n    sky: new Float32Array(N * 3),\n    buf: new Float32Array(N * 3),\n    A: new Float32Array(N),\n    e: new Float32Array(N),\n    haze: new Float32Array(N),\n    dk: -1,\n    moon: new Float32Array(MS * MS),\n    cov: new Float32Array(MS * MS),\n    stars: [],\n    clouds: [],\n    n: 7,\n    wind: 0.06,\n    dusk: 0,\n    started: false,\n  };\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      S.e[y * W + x] = glowDist(x, y);\n      S.haze[y * W + x] = 0.94 + 0.12 * fbm(x * 0.06, y * 0.035, 5);\n    }\n  // The moon's face: a full disc, darker seas on it and a darker rim.\n  const seas = [\n    [-3.5, -3.5, 4.6, 3.8],\n    [2.5, -3.2, 2.8, 2.6],\n    [4.2, 1.2, 3.2, 3.4],\n    [-6.2, 1.5, 3, 5.5],\n    [-0.5, 4.5, 3, 1.8],\n  ];\n  for (let j = 0; j \u003c MS; j++)\n    for (let i = 0; i \u003c MS; i++) {\n      const dx = i - 13;\n      const dy = j - 13;\n      const r = hypot(dx, dy);\n      const cov = clamp(MR + 0.5 - r, 0, 1);\n      let sea = 0;\n      for (const [sx, sy, rx, ry] of seas) sea = max(sea, sstep(1.15, 0.2, hypot((dx - sx) / rx, (dy - sy) / ry)));\n      const alb = 1 - 0.15 * sea - 0.12 * (r / MR) ** 2 - 0.05 * noise(i * 0.7, j * 0.7, 3);\n      S.moon[j * MS + i] = alb;\n      S.cov[j * MS + i] = cov;\n    }\n  for (let i = 0; i \u003c 90; i++) S.stars.push({ x: floor(Math.random() * W), y: floor(Math.random() * H), m: Math.random() ** 2.2, p: Math.random() * 6.28 });\n  S.clouds.push(newCloud({}, 30, 4), newCloud({}, 68, 26), newCloud({}, 112, -6));\n  params.s = S;\n}\n\nfunction stepBirds(S, dt) {\n  const ws = S.wind;\n  for (const k of S.skeins) {\n    // The geese head a little into the wind and crab across it.\n    k.hd += (-0.34 * ws - k.hd) * min(1, dt * 1.5);\n    const v = V0 * k.fast;\n    const vx = v * sin(k.hd) + 9 * ws;\n    const vy = -v * cos(k.hd);\n    k.vx = vx;\n    k.vy = vy;\n    k.x += vx * dt;\n    k.y += vy * dt;\n    k.flap += dt * 2 * PI * 2.9 * (1 + 0.7 * k.tangle);\n    if (k.tangle > 0) {\n      k.tangle -= dt * 0.33;\n      if (k.tangle \u003c= 0) {\n        // Reformed, though not always in the same order.\n        k.tangle = 0;\n        const all = [k.lead, ...k.L, ...k.R].sort(() => Math.random() - 0.5);\n        k.lead = all[0];\n        k.L = [];\n        k.R = [];\n        for (let i = 1; i \u003c all.length; i++) (i & 1 ? k.L : k.R).push(all[i]);\n      }\n    }\n    // The leader tires, drops back along one arm, and the next bird up takes the point.\n    k.rot -= dt;\n    if (k.rot \u003c= 0 && !k.tangle) {\n      k.rot = 6 + Math.random() * 3;\n      k.side = -k.side;\n      const arm = k.side \u003c 0 ? k.L : k.R;\n      if (arm.length) {\n        const old = k.lead;\n        k.lead = arm.shift();\n        arm.push(old);\n        old.drop = 1;\n      }\n    }\n    // Keep the arms in the split the wind asks for, one bird at a time.\n    const m = k.L.length + k.R.length;\n    const wantR = round(m * clamp(0.5 + 0.36 * ws, 0.1, 0.9));\n    k.bal = (k.bal || 0) - dt;\n    if (k.bal \u003c= 0 && wantR !== k.R.length && !k.tangle) {\n      k.bal = 0.5;\n      if (wantR > k.R.length && k.L.length) k.R.push(k.L.pop());\n      else if (k.R.length) k.L.push(k.R.pop());\n    }\n    // The second skein joins the tail of the first when it has caught up.\n    if (k.join) {\n      const j = k.join;\n      const tail = [j.lead, ...j.L, ...j.R].reduce((a, b) => (b.y > a.y ? b : a));\n      if (j.gone || k.y \u003c tail.y + 10) {\n        const add = [k.lead, ...k.L, ...k.R];\n        if (!j.gone) {\n          for (const b of add) (j.L.length \u003c= j.R.length ? j.L : j.R).push(b);\n          j.want += add.length;\n          k.L = [];\n          k.R = [];\n          k.lead = null;\n          k.gone = true;\n        }\n        k.join = null;\n      }\n    }\n  }\n  S.skeins = S.skeins.filter((k) => !k.gone);\n  // When a skein is high on the panel, the next one comes in from the bottom.\n  for (const k of S.skeins)\n    if (k.next !== undefined) {\n      k.next -= dt;\n      if (k.next \u003c= 0) {\n        k.next = undefined;\n        spawn(S, false);\n      }\n    }\n  // The Geese knob adds birds to the tail of the newest skein, or lets some fall away.\n  const main = S.skeins.filter((k) => k.join === null && k.fast === 1).pop();\n  if (main) {\n    if (S.lastN !== S.n) main.want = max(3, main.want + S.n - (S.lastN || S.n));\n    S.lastN = S.n;\n    S.adj = (S.adj || 0) - dt;\n    const n = 1 + main.L.length + main.R.length;\n    if (S.adj \u003c= 0 && n !== main.want) {\n      S.adj = 0.15;\n      const arm = main.L.length \u003c= main.R.length ? main.L : main.R;\n      if (n \u003c main.want) {\n        const tail = arm.length ? arm[arm.length - 1] : main.lead;\n        arm.push(newBird(S, tail.x, max(tail.y + 18, 136)));\n      } else {\n        const long = main.L.length > main.R.length ? main.L : main.R;\n        const b = long.pop();\n        b.stray = long === main.L ? -1 : 1;\n      }\n    }\n  }\n  for (const k of S.skeins) place(S, k, false);\n  // Each bird springs towards its slot and matches the skein's speed.\n  for (const k of S.skeins) {\n    const all = [k.lead, ...k.L, ...k.R];\n    for (let r = 0; r \u003c all.length; r++) {\n      const b = all[r];\n      b.sk = k;\n      b.rank = r === 0 ? 0 : (r + 1) >> 1;\n    }\n  }\n  const om = 2.2;\n  for (const b of S.birds) {\n    const k = b.sk;\n    if (b.stray) {\n      // A bird that leaves falls back and peels away to its side.\n      b.vx += (b.stray * 6 + 9 * ws - b.vx) * dt;\n      b.vy += (-V0 * 0.4 - b.vy) * dt;\n      b.hd += (b.stray * 0.4 - b.hd) * dt;\n    } else if (k) {\n      const ex = b.tx - b.x;\n      const ey = b.ty - b.y;\n      const ax = om * om * ex - 2 * om * (b.vx - k.vx);\n      const ay = om * om * ey - 2 * om * (b.vy - k.vy);\n      b.vx += ax * dt;\n      b.vy += ay * dt;\n      // Not faster than a goose can close up.\n      const rx = b.vx - k.vx;\n      const ry = b.vy - k.vy;\n      const rs = hypot(rx, ry);\n      if (rs > 13) {\n        b.vx = k.vx + (rx * 13) / rs;\n        b.vy = k.vy + (ry * 13) / rs;\n      }\n      if (b.drop > 0 && hypot(ex, ey) \u003c 2) b.drop = max(0, b.drop - dt);\n      // Bodies point along the skein's heading, banking a little as they shift.\n      const want = k.hd + clamp(0.03 * rx, -0.4, 0.4) + k.tangle * 0.6 * sin(S.t * 2.3 + b.j);\n      b.hd += (want - b.hd) * min(1, dt * 4);\n      b.gs = b.gs ? b.gs + (k.gs - b.gs) * min(1, dt) : k.gs;\n      // Wings beat out of step down each arm.\n      const tp = k.flap - b.rank * 0.9 + k.tangle * b.j;\n      b.ph += dt * 2 * PI * 2.9 * (1 + 0.7 * k.tangle) + 0.08 * sin(tp - b.ph);\n    }\n    b.x += b.vx * dt;\n    b.y += b.vy * dt;\n    if (b.stray) b.ph += dt * 2 * PI * 2.9;\n    if (b.y \u003c -14 || b.y > 190 || b.x \u003c -50 || b.x > 114) b.out = true;\n  }\n  // A skein whose birds have all flown off the top is gone.\n  for (const k of S.skeins) {\n    const all = [k.lead, ...k.L, ...k.R];\n    if (all.every((b) => b.y \u003c -14)) k.gone = true;\n  }\n  S.skeins = S.skeins.filter((k) => !k.gone);\n  S.birds = S.birds.filter((b) => !(b.out && (b.stray || !b.sk || b.sk.gone)));\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.dusk = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2;\n  S.n = clamp(round(k[2]), 7, 31);\n  S.wind = clamp(k[3], -1, 1);\n  if (!S.started) {\n    S.started = true;\n    spawn(S, true);\n  }\n  const d = dt * tempo;\n  S.t += d;\n  if (input.btnPressed && input.btnPressed[0])\n    for (const sk of S.skeins) {\n      sk.tangle = 1;\n      for (const b of [sk.lead, ...sk.L, ...sk.R]) {\n        b.vx += (Math.random() - 0.5) * 30;\n        b.vy += (Math.random() - 0.5) * 24;\n      }\n    }\n  stepBirds(S, d);\n  // Clouds drift with the wind high up and come round again.\n  const cv = (2.3 + 5 * S.wind) * d;\n  for (const c of S.clouds) {\n    c.x += cv;\n    if (c.x > W + 2) newCloud(c, 14 + Math.random() * 100, -c.w - 2 - Math.random() * 10);\n    else if (c.x \u003c -c.w - 14) newCloud(c, 14 + Math.random() * 100, W + 2);\n  }\n  // The moon climbs a little as the night goes on.\n  S.mx = 19 + 4 * S.dusk;\n  S.my = 104 - 22 * S.dusk - 5 * (1 - exp(-S.t / 50));\n}\n\nfunction paintSky(S) {\n  const dk = S.dusk;\n  const w = sstep(0.2, 1, dk);\n  const g = 1 + 1.8 * dk;\n  const c0 = [0, 0, 0];\n  const c1 = [0, 0, 0];\n  for (let i = 0; i \u003c N; i++) {\n    const e = S.e[i];\n    ramp(SKY0, e * g, c0);\n    ramp(SKY1, e, c1);\n    const hz = S.haze[i];\n    S.sky[i * 3] = (c0[0] + (c1[0] - c0[0]) * w) * hz;\n    S.sky[i * 3 + 1] = (c0[1] + (c1[1] - c0[1]) * w) * hz;\n    S.sky[i * 3 + 2] = (c0[2] + (c1[2] - c0[2]) * w) * hz;\n  }\n  S.dk = dk;\n}\n\n// A tapered stroke into the geese's coverage, kept as the larger of what is there.\nfunction stroke(A, ax, ay, bx, by, ra, rb) {\n  const x0 = max(0, floor(min(ax, bx) - 2));\n  const x1 = min(W - 1, Math.ceil(max(ax, bx) + 2));\n  const y0 = max(0, floor(min(ay, by) - 2));\n  const y1 = min(H - 1, Math.ceil(max(ay, by) + 2));\n  const dx = bx - ax;\n  const dy = by - ay;\n  const ll = dx * dx + dy * dy || 1;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const t = clamp(((x - ax) * dx + (y - ay) * dy) / ll, 0, 1);\n      const d = hypot(x - ax - dx * t, y - ay - dy * t);\n      const a = clamp(ra + (rb - ra) * t + 0.5 - d, 0, 1);\n      const i = y * W + x;\n      if (a > A[i]) A[i] = a;\n    }\n}\n\n// A goose seen from below: neck stretched forward, wings beating at its sides.\nfunction goose(A, b) {\n  const x = b.x;\n  const y = b.y;\n  if (x \u003c -9 || x > W + 8 || y \u003c -9 || y > H + 8) return;\n  const fx = sin(b.hd);\n  const fy = -cos(b.hd);\n  const P = (u, v) => [x - fy * u + fx * v, y + fx * u + fy * v];\n  const g = b.gs || 1;\n  const s = sin(b.ph);\n  const up = max(0, cos(b.ph));\n  // Seen from below, a wing raised or lowered is foreshortened, and on the\n  // upstroke it bends at the wrist and sweeps its tip back.\n  const th = 0.9 * s;\n  const span = g * (0.8 + 5.2 * cos(th) * (1 - 0.18 * up));\n  const tipv = g * (-0.7 - 1.7 * up + 0.5 * s);\n  const head = P(0, 5.1 * g);\n  const neck = P(0, 1.6 * g);\n  const chest = P(0, 0.9 * g);\n  const tail = P(0, -3.5 * g);\n  stroke(A, chest[0], chest[1], tail[0], tail[1], 1.25 * g, 0.55 * g);\n  stroke(A, neck[0], neck[1], head[0], head[1], max(0.45, 0.48 * g), max(0.55, 0.7 * g));\n  for (const sd of [-1, 1]) {\n    const sh = P(sd * 0.8 * g, 0.8 * g);\n    const wr = P(sd * (0.8 * g + 0.45 * (span - 0.8 * g)), g * (0.9 - 0.5 * up));\n    const tp = P(sd * span, tipv);\n    stroke(A, sh[0], sh[1], wr[0], wr[1], 1.0 * g, 0.75 * g);\n    stroke(A, wr[0], wr[1], tp[0], tp[1], 0.75 * g, 0.35 * g);\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (abs(S.dk - S.dusk) > 0.002) paintSky(S);\n  const dk = S.dusk;\n  const { sky, buf, A } = S;\n  buf.set(sky);\n  // Stars come out where the sky is dark enough to show them.\n  const night = 150 + 200 * sstep(0.1, 0.9, dk);\n  for (const st of S.stars) {\n    const i = st.y * W + st.x;\n    const L = max(sky[i * 3], sky[i * 3 + 1], sky[i * 3 + 2]);\n    const v = clamp((st.m * night - L) / 60, 0, 1) * (0.75 + 0.25 * sin(S.t * 3.1 + st.p * 7));\n    buf[i * 3] += 200 * v;\n    buf[i * 3 + 1] += 210 * v;\n    buf[i * 3 + 2] += 230 * v;\n  }\n  // The moon, pale in the dusk and bright at night with a ring of glow round it.\n  const mx = S.mx;\n  const my = S.my;\n  const mb = 0.8 + 0.2 * dk;\n  const halo = 0.15 + 0.6 * dk;\n  const mc = [255 * mb, 246 * mb, 222 * mb];\n  for (let y = max(0, floor(my - 34)); y \u003c min(H, my + 34); y++)\n    for (let x = max(0, floor(mx - 34)); x \u003c min(W, mx + 34); x++) {\n      const i = (y * W + x) * 3;\n      const r = hypot(x - mx, y - my);\n      const gl = halo * 60 * exp(-max(0, r - MR) / 7);\n      buf[i] += gl * 0.75;\n      buf[i + 1] += gl * 0.8;\n      buf[i + 2] += gl;\n      const ix = round(x - mx + 13);\n      const iy = round(y - my + 13);\n      if (ix \u003c 0 || iy \u003c 0 || ix >= MS || iy >= MS) continue;\n      const cv = S.cov[iy * MS + ix];\n      if (cv \u003c= 0) continue;\n      const m = S.moon[iy * MS + ix];\n      buf[i] += (mc[0] * m - buf[i]) * cv;\n      buf[i + 1] += (mc[1] * m - buf[i + 1]) * cv;\n      buf[i + 2] += (mc[2] * m - buf[i + 2]) * cv;\n    }\n  // Clouds, their undersides lit from below by the afterglow, or grey by the moon at night.\n  const lw = sstep(0.05, 0.85, dk);\n  const g = 1 + 1.8 * dk;\n  for (const c of S.clouds) {\n    const cx = round(c.x);\n    const cy = round(c.y);\n    for (let j = 0; j \u003c c.h; j++) {\n      const y = cy + j;\n      if (y \u003c 0 || y >= H) continue;\n      for (let i = 0; i \u003c c.w; i++) {\n        const x = cx + i;\n        if (x \u003c 0 || x >= W) continue;\n        const dn = c.m[j * c.w + i];\n        if (dn \u003c= 0) continue;\n        const p = y * W + x;\n        ramp(CLOUD0, S.e[p] * g, C3);\n        const mn = exp(-hypot(x - mx, y - my) / 30);\n        const lr = C3[0] + (40 + 60 * mn - C3[0]) * lw;\n        const lg = C3[1] + (46 + 62 * mn - C3[1]) * lw;\n        const lb = C3[2] + (70 + 70 * mn - C3[2]) * lw;\n        const br = 0.5 + 0.5 * dn;\n        const q = p * 3;\n        const o = 0.9 * dn;\n        buf[q] += (lr * br - buf[q]) * o;\n        buf[q + 1] += (lg * br - buf[q + 1]) * o;\n        buf[q + 2] += (lb * br - buf[q + 2]) * o;\n      }\n    }\n  }\n  // The geese, dark against everything behind them.\n  A.fill(0);\n  for (const b of S.birds) goose(A, b);\n  const gr = 6;\n  const gg = 5;\n  const gb = 10;\n  for (let p = 0; p \u003c N; p++) {\n    const a = A[p];\n    const q = p * 3;\n    let r = buf[q];\n    let gn = buf[q + 1];\n    let bl = buf[q + 2];\n    if (a > 0) {\n      r += (gr - r) * a;\n      gn += (gg - gn) * a;\n      bl += (gb - bl) * a;\n    }\n    display.setPixel(p % W, (p / W) | 0, min(255, r) | 0, min(255, gn) | 0, min(255, bl) | 0);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dusk=0..1, Speed=0.2..3, Geese=7..31, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dusk","min":0,"max":1,"about":"How late it is: at 0 the golden afterglow fills the top of the sky and the moon is pale, and towards 1 the glow sinks to a dim band and the moon and the stars carry a navy sky."},{"name":"Speed","min":0.2,"max":3,"about":"The pace of everything: at 2 a skein crosses the panel in about ten seconds with its wings beating three times a second, and at 0.2 it all runs ten times slower."},{"name":"Geese","min":7,"max":31,"about":"How many birds fly in the skein, from a small V of seven to a long one of thirty one whose arms reach most of the way down the panel. A big skein flies higher, so its birds look smaller."},{"name":"Wind","min":-1,"max":1,"about":"A crosswind from the side. The geese turn their bodies into it and crab across the sky, and the arm on the downwind side grows longer. The clouds drift with it too."}],"start":[0,2,7,0.06],"measures":{"motion":0.2572,"detail":0.0301,"edges":0.4436,"complexity":1.9214,"coverage":0.9745,"colour":0.3836,"drift":0.0616},"knobResponse":[0.2529,0.0352,0.0331,0.0516]},{"slug":"slinky","title":"Slinky","family":"toy","round":21,"note":"슬링키가 패널 높이만큼 지그재그로 꺾인 계단을 한 칸씩 뒤집히며 내려가요. 코일이 활처럼 휘어 아래 칸으로 쏟아지고, 내려앉은 칸마다 계단등이 켜져요.","idea":"A Slinky walks end over end down a zigzag stairwell the height of the panel, its coils pouring through a bow from step to step, springing off the wall at each landing and waking each step light it lands by, until a hand carries it dangling back up to the top.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Slinky\n// Family:  toy\n// Idea:    A Slinky walks end over end down a zigzag stairwell the height of the panel, its coils pouring through a bow from step to step, springing off the wall at each landing and waking each step light it lands by, until a hand carries it dangling back up to the top.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the Slinky, Richard James's steel spring toy of 1945\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Spring=0..1, Speed=0.2..3, Rise=6..12, Lamp=-1..1\n//\n// Knob 1: Spring. Which Slinky comes out of the box: polished steel at 0, then gold plate, the rainbow plastic one that walks lazier, a neon one under a blacklight, and at 1 a glow-in-the-dark one with the lights out.\n// Knob 2: Speed. How fast the film runs: at 2 a step takes under half a second and the walk from top to bottom about seven; at 0.2 it is ten times slower.\n// Knob 3: Rise. How tall each step is, from 6 rows to 12: low steps make three flights and small quick bows, tall ones two flights and long reaches down.\n// Knob 4: Lamp. The daylight in the stairwell: morning at -1, dusk at 0, night at 1, when only the step lights the spring has woken light the stairs and it glints as it passes them.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, abs, floor, round, sin, cos, sqrt, exp, hypot, tan, PI, sign } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst quad = (a, b, c, t) => (1 - t) * (1 - t) * a + 2 * (1 - t) * t * b + t * t * c;\n\n// The stairwell: side walls on columns 0..1 and 62..63, landings 12 wide against\n// them, flights of three 12-wide treads between, the hall floor on row 120.\nconst [T, FLOOR, TH] = [12, 120, 3];\n// The spring: 36 coils 10 LEDs across, 5.4 rows tall when they all sit closed.\nconst [NC, RAD, PITCH, CAP] = [36, 5, 0.15, 4];\nconst HS = NC * PITCH;\nconst [MOVE, BOUNCE, SETTLE, REACH, LIFT, CARRY, LOWER] = [0, 1, 2, 3, 4, 5, 6];\nconst DUR = [0, 0.5, 1.5, 0.8, 0.9, 1.5, 1.5];\n// The step lights' warm light; daylight comes from a window up to the left.\nconst LAMP = [255, 206, 150];\nconst [LX, LY, LZ, HX, HY, HZ] = [-0.5, -0.6, 0.62, -0.278, -0.334, 0.9];\n// The eye is a little above and to one side: a ring's near half shows lower right.\nconst [ZX, ZY, KS] = [0.22, 0.3, 28];\nconst [CS, SN] = [cos, sin].map((f) => Float32Array.from({ length: KS }, (_, j) => f(((j + 0.5) / KS) * 2 * PI)));\nconst kern = (r, s) => Float32Array.from({ length: (2 * r + 1) ** 2 }, (_, i) => exp(-(((i % (2 * r + 1)) - r) ** 2 + (floor(i / (2 * r + 1)) - r) ** 2) / s));\nconst [KSH, KGL] = [kern(3, 3), kern(8, 18)];\nconst RAIN = [[236, 44, 52], [250, 142, 34], [246, 222, 54], [62, 200, 84], [44, 124, 240], [152, 74, 222]];\n// Colour (null: rainbow bands), shine, highlight sharpness, band width, own light,\n// room light, whether the step lights work, and how lazily it walks.\nconst MAT = [\n  [[172, 180, 196], 1, 16, 0, 0, [1, 1, 1], 1, 1],\n  [[232, 174, 62], 1, 9, 0, 0, [1, 0.96, 0.9], 1, 1.06],\n  [null, 0.45, 5, 0.9, 0, [1, 1, 1], 1, 1.22],\n  [[255, 56, 180], 0.3, 5, 0.9, 0.8, [0.34, 0.2, 0.66], 0, 1.22],\n  [[140, 255, 116], 0.15, 5, 0.7, 1, [0.13, 0.16, 0.28], 0, 1.16],\n];\n// The hand as capsules from the pinch: x1, y1, x2, y2, radius, sleeve.\nconst HAND = [[-1.6, -0.8, -4.6, -7.6, 2, 0], [1.3, -1, 4.4, -8.2, 1.8, 0], [6.2, -6.8, 8.4, -12.4, 2.4, 0], [2, -12.4, 2.3, -12.7, 6.6, 0], [4, -16, 8.8, -24, 4.4, 0], [7.4, -23.6, 13.5, -36, 6.2, 1]];\n\n// Built from the floor up, flights turning at each landing. A flight ends in a drop\n// deep enough that the spring can walk off its landing under the flight's end.\nfunction build(P, R) {\n  const [dL, up, fl, lands] = [R + 16, [{ x: 56, y: FLOOR }], [], []];\n  for (let s = 1, base = FLOOR, f = 0; base > 0; f++, s = -s) {\n    const y1 = base - (f ? dL : R) - 2 * R;\n    fl.push([s, y1, y1 + R, y1 + 2 * R]);\n    for (let k = 2; k >= 0; k--) up.push({ x: s > 0 ? 20 + 12 * k : 44 - 12 * k, y: y1 + k * R });\n    base = y1 - R;\n    lands.push([-s, base]);\n    up.push({ x: s > 0 ? 8 : 56, y: base, wall: -s });\n  }\n  const [end, st] = [up[0], up.reverse()];\n  st.forEach((a, i) => (a.id = i));\n  const i0 = st.findIndex((a) => a.y >= 16);\n  const seq = [{ k: LOWER, a: st[i0] }];\n  for (let i = i0; i \u003c st.length - 1; i++) {\n    const [a, b] = [st[i], st[i + 1]];\n    seq.push({ k: MOVE, a, b, s: sign(b.x - a.x), under: !!a.wall });\n    if (b.wall) seq.push({ k: BOUNCE, a: b, s: b.wall });\n  }\n  seq.push({ k: SETTLE, a: end, s: 1 }, { k: REACH, a: end }, { k: LIFT, a: end }, { k: CARRY, a: end, b: st[i0] });\n  Object.assign(P, { R, seq, st, ton: new Float32Array(st.length).fill(-99) });\n  paint(P, R, fl, lands);\n}\n\nfunction paint(P, R, fl, lands) {\n  const { bg, mat } = P;\n  const at = (x, y) => (x \u003c 0 || x >= W || y \u003c 0 || y >= H ? 9 : mat[y * W + x]);\n  const set = (x, y, m, c, k = 1) => {\n    if (at((x = round(x)), (y = round(y))) > 8) return;\n    mat[y * W + x] = m;\n    for (let i = 0; i \u003c 3; i++) bg[(y * W + x) * 3 + i] = c[i] * k;\n  };\n  const lum = (x, y) => 1.16 - 0.0034 * y - 0.003 * x;\n  // Wallpaper: a dusty blue ground, a pale stripe every 8 columns and a lozenge\n  // between; and the edges of the side walls.\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y] = [p & 63, p >> 6];\n    const d = abs((x % 8) - 4) + abs((y % 12) - 6) * 0.7;\n    if (x \u003c 2 || x > 61) set(x, y, 4, [100, 112, 136], lum(x, y) * (x === 1 || x === 62 ? 0.72 : 1));\n    else set(x, y, 0, [48, 62, 96], (x % 8 ? (d \u003c 1.6 ? 1.7 : d \u003c 2.4 ? 0.84 : 1) : 1.7) * lum(x, y) * (0.95 + 0.1 * rnd()));\n  }\n  // A step's side: the tread on top, the board's edge under it, the joint where\n  // the next riser meets it, the dark underside.\n  const block = (x, top, bot, e, edge) => {\n    for (let y = top; y \u003c= bot; y++) {\n      let k = y === top ? (edge ? 1.12 : 1) : (0.88 + 0.1 * sin(y * 1.7 + 2 * sin(x * 0.23)) + 0.05 * rnd()) * (1.08 - y * 0.0025) * (y === top + 1 ? 0.7 : e ? 1 : 0.62);\n      set(x, y, y === top ? 2 : 1, y === top ? [216, 162, 104] : [150, 94, 56], y === bot ? k * 0.55 : k);\n    }\n  };\n  for (const [s, ...ys] of fl) {\n    for (let x = 14, d; x \u003c 50; x++) block(x, ys[floor((d = s > 0 ? x - 14 : 49 - x) / T)], round(ys[0] + TH + (d * R) / T), d % T, d % T === T - 1);\n    // Each nosing overhangs the riser below it by one LED.\n    for (let k = 0, x; k \u003c 3; k++) {\n      if (at((x = s > 0 ? 26 + 12 * k : 37 - 12 * k), ys[k] + 1) === 0) set(x, ys[k] + 1, 0, [20, 30, 34]);\n      set(x, ys[k], 2, [226, 174, 116]);\n    }\n  }\n  for (const [side, y] of lands) {\n    for (let x = side \u003c 0 ? 2 : 50, i = 0; i \u003c 12; x++, i++) block(x, y, y + R + TH, side \u003c 0 ? i : 11 - i, false);\n    if (at(side \u003c 0 ? 14 : 49, y) === 0) set(side \u003c 0 ? 14 : 49, y, 2, [226, 174, 116]);\n  }\n  // Floorboards seen from a little above, the near ones brighter, and the skirting.\n  for (let p = FLOOR * W, x, r; p \u003c N; p++) set((x = p & 63), (r = (p >> 6) - FLOOR) + FLOOR, 3, r ? [176, 122, 74] : [206, 156, 104], (0.78 + 0.04 * r) * (r % 3 === 2 || (x + r * 7) % 23 === 0 ? 0.62 : 0.95 + 0.1 * rnd()));\n  for (let x = 2; x \u003c 62; x++) for (let y = FLOOR - 4; y \u003c FLOOR; y++) if (at(x, y) === 0) set(x, y, 5, [196, 190, 172], (y === FLOOR - 4 ? 1.08 : y === FLOOR - 1 ? 0.66 : 0.94) * lum(x, y));\n  // The stairs' soft shadow from the window, down and right of them.\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y, m] = [p & 63, p >> 6, mat[p]];\n    let n = 0;\n    for (let d = 0; d \u003c 9 && (m === 0 || m === 5); d++) n += at(x - 4 + (d % 3), y - 5 + floor(d / 3)) % 8 > 0 && at(x - 4 + (d % 3), y - 5 + floor(d / 3)) \u003c 3 ? 1 : 0;\n    for (let i = 0; i \u003c 3; i++) bg[p * 3 + i] *= 1 - 0.045 * n;\n  }\n  // A small step light in the wall just above each tread and landing, and a\n  // framed picture on bare wall where the spring never passes.\n  for (const a of P.st) for (let i = -1; i \u003c 1; i++) set(a.x + i, a.y - 3, 5, [70, 72, 80]);\n  const free = (x0, y0) => {\n    for (let n = 0; n \u003c 120; n++) if (at(x0 - 1 + (n % 10), y0 - 1 + floor(n / 10)) !== 0) return false;\n    return P.st.every((a) => abs(a.x - x0 - 4) > 13 || a.y \u003c y0 || a.y - 26 > y0 + 10);\n  };\n  for (let y = 4, pic = 0; y \u003c 110 && !pic; y += 2)\n    for (const x of [4, 52, 28])\n      if (!pic && (pic = free(x, y)))\n        for (let n = 0; n \u003c 80; n++) {\n          const [i, j] = [n & 7, n >> 3];\n          const edge = !i || !j || i === 7 || j === 9;\n          set(x + i, y + j, 5, i === 5 && j === 2 ? [250, 226, 130] : edge ? [196, 150, 64] : j \u003c 5 ? [96, 150, 206] : j \u003c 7 ? [72, 136, 86] : [48, 96, 62], edge && (i === 7 || j === 9) ? 0.7 : 1);\n        }\n}\n\n// Daylight fades from -1 to 1 and turns blue.\nfunction lampLevel(P, k4) {\n  const u = (k4 + 1) / 2;\n  P.amb = [0.98, 1, 1.04].map((t, i) => t * (1.16 - 1.02 * u) * mix(1, [0.6, 0.74, 1][i], u));\n  P.lampAtK = k4;\n}\n\nconst [BZ, LT, FT, PT] = [new Float32Array(8), new Float32Array(17), new Float32Array(33), new Float32Array(4)];\n\nfunction bez(t) {\n  const u = 1 - t;\n  const [a, b, c, d] = [u * u * u, 3 * u * u * t, 3 * u * t * t, t * t * t];\n  for (let i = 0; i \u003c 2; i++) {\n    PT[i] = a * BZ[i] + b * BZ[2 + i] + c * BZ[4 + i] + d * BZ[6 + i];\n    PT[2 + i] = 3 * (u * u * (BZ[2 + i] - BZ[i]) + 2 * u * t * (BZ[4 + i] - BZ[2 + i]) + t * t * (BZ[6 + i] - BZ[4 + i]));\n  }\n}\n\nfunction setCurve(x0, y0, t0x, t0y, x3, y3, t3x, t3y, h0, h3) {\n  BZ.set([x0, y0, x0 + t0x * h0, y0 + t0y * h0, x3 - t3x * h3, y3 - t3y * h3, x3, y3]);\n  let [L, px, py] = [0, x0, y0];\n  for (let i = 1; i \u003c= 16; i++) {\n    bez(i / 16);\n    L += hypot(PT[0] - px, PT[1] - py);\n    [LT[i], px, py] = [L, PT[0], PT[1]];\n  }\n  return L;\n}\n\n// How the coils spread along the curve: a0 keeps the ends open, b leans the spread\n// one way, rip is a pulse running up the bow, c opens the top of a hanging spring.\nfunction setDist(G) {\n  const w = (v) => G.a0 + G.sn * sin(PI * v) ** 1.2 * (1 + G.b * (v - 0.5)) * (1 + G.rip * sin(2 * PI * (1.5 * v + 2 * G.ph))) + G.c * v;\n  let [prev, acc] = [w(0), 0];\n  for (let i = 1; i \u003c= 32; i++) {\n    const cur = w(i / 32);\n    acc += prev + cur;\n    [FT[i], prev] = [acc, cur];\n  }\n  for (let i = 1; i \u003c= 32; i++) FT[i] /= acc;\n}\n\nfunction onCurve(v, L) {\n  const [f, i] = [v * 32, min(31, floor(v * 32))];\n  const s = (FT[i] + (FT[i + 1] - FT[i]) * (f - i)) * L;\n  let j = 0;\n  while (j \u003c 15 && LT[j + 1] \u003c s) j++;\n  bez((j + cl((s - LT[j]) / max(1e-6, LT[j + 1] - LT[j]), 0, 1)) / 16);\n}\n\n// A free end's last coils stay closed and turn together like a lid.\nfunction cap(G, x, y, tx, ty, tail) {\n  const d = CAP * PITCH;\n  if (tail) [G.nA, G.ax, G.ay, G.aux, G.auy] = [CAP, x, y, tx, ty];\n  else [G.nB, G.bx, G.by, G.bux, G.buy] = [CAP, x, y, -tx, -ty];\n  return tail ? [x + tx * d, y + ty * d] : [x - tx * d, y - ty * d];\n}\n\n// One step: the top end tips over onto the step below (p \u003c 0.3), the coils pour\n// over the bow from stack to stack, then the far end lifts and follows (p > 0.74).\nfunction move(P, S, p, G) {\n  const { a, b, s } = S;\n  const [k, dx, hb, p1, p2] = [P.kf, abs(b.x - a.x), S.under ? 0.5 : 1, 0.3, 0.74];\n  G.a0 = p \u003c 0.5 ? mix(0.36, 0.18, p / 0.5) : mix(0.18, 0.12, (p - 0.5) / 0.5);\n  G.b = p \u003c p2 ? mix(0.9, 0.2, p / p2) : mix(0.2, 0, (p - p2) / (1 - p2));\n  [G.bx, G.by] = [b.x, b.y];\n  let C;\n  if (p \u003c p1) {\n    const t = p / p1;\n    const e = t * t * (1.7 - 0.7 * t);\n    const [ex, ey, tx, ty] = [quad(a.x, a.x + s * dx * 0.55, b.x, e), quad(a.y - HS, min(a.y - HS, b.y) - (4 + 4 * k) * hb, b.y, e), s * sin(PI * e), -cos(PI * e)];\n    G.nA = NC - CAP - (0.36 * NC - CAP) * (0.25 * t + 0.75 * e);\n    C = [a.x, a.y - G.nA * PITCH, 0, -1, ...cap(G, ex, ey, tx, ty), tx, ty];\n    if (P.seg === 1 && p \u003c 0.2) [P.hx, P.hy] = [ex, ey];\n  } else if (p \u003c p2) {\n    // The two stacks lean toward each other while the bow pulls on them.\n    const t = (p - p1) / (p2 - p1);\n    const lean = 0.16 * sin(PI * t) * k;\n    [G.nA, G.nB, G.aux, G.auy] = [CAP + (0.64 * NC - CAP) * (1 - t), CAP + (0.66 * NC - CAP) * t, s * sin(lean), -cos(lean)];\n    [G.bux, G.buy] = [-G.aux, G.auy];\n    C = [a.x + G.aux * G.nA * PITCH, a.y + G.auy * G.nA * PITCH, G.aux, G.auy, b.x + G.bux * G.nB * PITCH, b.y + G.buy * G.nB * PITCH, -G.bux, -G.buy];\n    G.rip = 0.45 * sin(PI * t) * exp(-2 * t) * k;\n    G.ph = t;\n  } else {\n    const t = (p - p2) / (1 - p2);\n    const e = t * t * (2 - t);\n    const [fx, fy, tx, ty] = [quad(a.x, a.x + s * dx * 0.35, b.x, e), quad(a.y, min(a.y, b.y - HS) - (3 + 3 * k) * hb, b.y - HS, e), s * sin(PI * e), -cos(PI * e)];\n    G.nB = NC - CAP - (0.34 * NC - CAP) * (1 - e);\n    C = [...cap(G, fx, fy, tx, ty, 1), tx, ty, b.x, b.y - G.nB * PITCH, 0, 1];\n  }\n  const ch = hypot(C[4] - C[0], C[5] - C[1]);\n  const h = (0.45 * ch + 4.5 * k * min(1, ch / 10)) * hb;\n  G.curve = [...C, h, h];\n}\n\n// On a landing the top end swings out, meets the wall and springs back over.\n// On the floor the same swing just rocks and dies away.\nfunction bounce(P, S, u, G) {\n  const [a, phc] = [S.a, PI / 2];\n  let ph = S.k === SETTLE ? 1.3 * phc * exp(-3 * u) * sin(2 * PI * 2.2 * u) * (1 - sm((u - 0.7) / 0.3)) : u \u003c 0.42 ? phc * (u / 0.42) ** 1.7 : u \u003c 0.56 ? phc : phc * (1 - ((u - 0.56) / 0.44) ** 0.85);\n  let w = S.s;\n  if (ph \u003c 0) [ph, w] = [-ph, -w];\n  const sq = S.k === BOUNCE && u > 0.4 && u \u003c 0.6 ? 0.16 * sin((PI * (u - 0.4)) / 0.2) : 0;\n  const La = (((abs((S.s > 0 ? 62 : 2) - a.x) - 1.6) * PI) / 2) * (ph / phc) ** 0.7 * (1 - sq);\n  G.nA = NC - CAP - min(NC * 0.4, La / 1.1);\n  const [x0, y0, r, tx, ty] = [a.x, a.y - G.nA * PITCH, La / max(ph, 1e-3), w * sin(ph), -cos(ph)];\n  const [qx, qy] = [x0 + w * r * (1 - cos(ph)), y0 - r * sin(ph)];\n  const h = ph \u003c 1e-3 ? La / 3 : (4 / 3) * tan(ph / 4) * r;\n  cap(G, qx + tx * CAP * PITCH, qy + ty * CAP * PITCH, tx, ty);\n  G.curve = [x0, y0, 0, -1, qx, qy, tx, ty, h, h];\n  [G.a0, G.sn, G.b] = [0.6, 0.6, -sq * 3];\n}\n\nconst hangLen = (P, m) => m * PITCH + P.lext * (m / NC) ** 2;\n\n// Held by its top coil the spring hangs open at the top and closed at the bottom,\n// each gap carrying the weight of the coils below it.\nfunction hang(P, S, u, G) {\n  let [a, x0, y0, m] = [S.a, S.a.x, 0, NC];\n  if (S.k === CARRY) {\n    [P.hx, P.hy] = carry(P, S, u);\n    [x0, y0] = P.pb;\n    G.nA = 0;\n  } else {\n    m = NC * (S.k === LIFT ? sm(u) : 1 - sm(u));\n    G.nA = NC - m;\n    y0 = a.y - G.nA * PITCH;\n    [P.hx, P.hy] = [x0, y0 - hangLen(P, m)];\n  }\n  [G.sn, G.c, G.a0] = [0, 1, min(50, (m * PITCH) / max(1e-3, 2 * P.lext * (m / NC) ** 2))];\n  const L = max(1e-3, hypot(P.hx - x0, P.hy - y0));\n  G.curve = [x0, y0, (P.hx - x0) / L, (P.hy - y0) / L, P.hx, P.hy, 0, -1, L / 3, L / 3];\n}\n\nfunction carry(P, S, u) {\n  const [e, L] = [sm(u), hangLen(P, NC)];\n  return [mix(S.a.x, S.b.x, e) + 6 * sin(PI * e), mix(FLOOR - L, S.b.y - L, e)];\n}\n\nfunction dur(P, S) {\n  if (S.k === MOVE) return 0.44 * sqrt((S.b.y - S.a.y + 6) / 12) * P.kf;\n  return S.k === BOUNCE ? DUR[1] * P.kf : DUR[S.k];\n}\n\nfunction shape(P) {\n  const [S, G] = [P.seq[P.seg], P.G];\n  const u = cl(P.sp / dur(P, S), 0, 1);\n  Object.assign(P.G, { ax: S.a.x, ay: S.a.y, aux: 0, auy: -1, nA: NC, bx: 0, by: 0, bux: 0, buy: -1, nB: 0, a0: 0.3, sn: 1, b: 0, rip: 0, ph: 0, c: 0, curve: null });\n  P.hx = -99;\n  if (S.k === MOVE) move(P, S, u, G);\n  else if (S.k === BOUNCE || S.k === SETTLE) bounce(P, S, u, G);\n  else if (S.k === REACH) [P.hx, P.hy] = [mix(80, S.a.x, 1 - (1 - u) ** 2), mix(FLOOR - 46, S.a.y - HS, 1 - (1 - u) ** 2)];\n  else hang(P, S, u, G);\n  if (P.ht >= 0 && P.ht \u003c 0.8) [P.hx, P.hy] = [P.rx + 12 * sm(P.ht / 0.8), P.ry - 44 * sm(P.ht / 0.8)];\n  // Every coil: its centre and the way the spring runs through it.\n  const { cx, cy, tx, ty } = P;\n  const nc = NC - G.nA - G.nB;\n  const L = G.curve && nc > 1e-3 ? setCurve(...G.curve) : 0;\n  if (L) setDist(G);\n  for (let q = 0; q \u003c NC; q++) {\n    const u = q + 0.5;\n    if (u \u003c= G.nA || !L) [cx[q], cy[q], tx[q], ty[q]] = [G.ax + G.aux * u * PITCH, G.ay + G.auy * u * PITCH, G.aux, G.auy];\n    else if (u >= NC - G.nB) [cx[q], cy[q], tx[q], ty[q]] = [G.bx + G.bux * (NC - u) * PITCH, G.by + G.buy * (NC - u) * PITCH, -G.bux, -G.buy];\n    else {\n      onCurve((u - G.nA) / nc, L);\n      const d = hypot(PT[2], PT[3]) || 1;\n      [cx[q], cy[q], tx[q], ty[q]] = [PT[0], PT[1], PT[2] / d, PT[3] / d];\n    }\n  }\n}\n\nfunction restart(P) {\n  Object.assign(P, { seg: 0, sp: 0.9, par: 0, ht: -1, pb: [0, 0], pv: [0, 0], clock: 0 });\n  P.ton.fill(-99);\n}\n\nfunction advance(P, h) {\n  P.sp += h;\n  P.clock += h;\n  if (P.ht >= 0) P.ht += h;\n  let S = P.seq[P.seg];\n  if (P.seg === 1 && P.ht \u003c 0 && P.sp >= 0.2 * dur(P, S)) [P.ht, P.rx, P.ry] = [0, P.hx, P.hy];\n  // A step light wakes when the spring lands by it, and stays on for 8 seconds.\n  const b = S.k === MOVE ? S.b : S.k === LOWER ? S.a : null;\n  if (b && P.sp >= 0.3 * dur(P, S) && P.ton[b.id] \u003c P.clock - 9.5) P.ton[b.id] = P.clock;\n  while (P.sp >= dur(P, S)) {\n    P.sp -= dur(P, S);\n    if (S.k === MOVE) P.par ^= 1;\n    S = P.seq[(P.seg = (P.seg + 1) % P.seq.length)];\n    if (S.k === CARRY) [P.pb, P.pv] = [[S.a.x, FLOOR], [0, 0]];\n    if (S.k === LOWER) P.ht = -1;\n  }\n  // Carried, the bottom of the spring hangs back and swings under the hand.\n  if (S.k !== CARRY) return;\n  const u = P.sp / dur(P, S);\n  const [[hx, hy], L, damp] = [carry(P, S, u), hangLen(P, NC), 3.5 + 30 * sm((u - 0.65) / 0.35)];\n  for (let c = 0; c \u003c 2; c++) {\n    P.pv[c] += (48 * ((c ? hy + L : hx) - P.pb[c]) - damp * P.pv[c]) * h;\n    P.pb[c] += P.pv[c] * h;\n  }\n  const [dx, dy, r] = [P.pb[0] - hx, P.pb[1] - hy - L, hypot(P.pb[0] - hx, P.pb[1] - hy - L)];\n  if (r > 0.6 * L) P.pb = [hx + (dx * 0.6 * L) / r, hy + L + (dy * 0.6 * L) / r];\n}\n\nexport function setup(params) {\n  const [P, F] = [params, (n) => new Float32Array(n)];\n  Object.assign(P, { bg: F(N * 3), out: F(N * 3), pl: F(N), mat: new Uint8Array(N), sh: F(N), gl: F(N), fa: F(N * 4), ba: F(N * 4) });\n  Object.assign(P, { hit: new Uint8Array(N), list: new Int32Array(N), nl: 0, cx: F(NC), cy: F(NC), tx: F(NC), ty: F(NC), G: {}, kf: 1, lext: 38, hx: -99, hy: 0, M: material(0) });\n  build(P, 6);\n  lampLevel(P, 0.06);\n  restart(P);\n}\n\nexport function update(dt, input, params) {\n  const [P, k] = [params, input.knobValues || [0, 2, 6, 0.06]];\n  P.M = material(cl(k[0], 0, 1));\n  [P.kf, P.lext] = [P.M.lazy, 38 / P.M.lazy ** 2];\n  const R = round(cl(k[2], 6, 12));\n  if (R !== P.R) build(P, R), restart(P);\n  if (cl(k[3], -1, 1) !== P.lampAtK) lampLevel(P, cl(k[3], -1, 1));\n  const h = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  const n = Math.ceil(h / 0.01);\n  for (let i = 0; i \u003c n; i++) advance(P, h / n);\n}\n\nfunction material(k1) {\n  const i = min(3, floor(k1 * 4));\n  const [t, A, B] = [k1 * 4 - i, MAT[i], MAT[i + 1]];\n  const M = { i, t, shine: mix(A[1], B[1], t), pw: mix(A[2], B[2], t), wide: mix(A[3], B[3], t), emit: mix(A[4], B[4], t), lamps: mix(A[6], B[6], t), lazy: mix(A[7], B[7], t) };\n  M.room = A[5].map((v, c) => mix(v, B[5][c], t));\n  const g = (m) => MAT[m][0] || [230, 200, 190];\n  M.glow = g(i).map((v, c) => mix(v, g(i + 1)[c], t) * M.emit);\n  return M;\n}\n\nfunction colour(M, id) {\n  const pick = (m) => MAT[m][0] || RAIN[floor((id * 6) / NC)];\n  const [a, b] = [pick(M.i), pick(M.i + 1)];\n  return [0, 1, 2].map((c) => mix(a[c], b[c], M.t));\n}\n\nfunction stamp(F, K, r, x, y, w) {\n  const [ix, iy, n] = [round(x), round(y), 2 * r + 1];\n  for (let j = -r; j \u003c= r; j++) {\n    const yy = iy + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    for (let i = -r; i \u003c= r; i++) if (ix + i >= 0 && ix + i \u003c W) F[yy * W + ix + i] += K[(j + r) * n + i + r] * w;\n  }\n}\n\nfunction add(P, A, x, y, c, w) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || w \u003c= 0) return;\n  const p = y * W + x;\n  if (!P.hit[p]) P.list[P.nl++] = p;\n  P.hit[p] = 1;\n  for (let i = 0; i \u003c 3; i++) A[p * 4 + i] += c[i] * w;\n  A[p * 4 + 3] += w;\n}\n\nfunction splat(P, A, x, y, c, w) {\n  const [ix, iy] = [floor((x -= 0.5)), floor((y -= 0.5))];\n  const [fx, fy] = [x - ix, y - iy];\n  for (let n = 0; n \u003c 4; n++) add(P, A, ix + (n & 1), iy + (n >> 1), c, w * (n & 1 ? fx : 1 - fx) * (n >> 1 ? fy : 1 - fy));\n}\n\n// Each coil a thin ring seen nearly side-on: the far half dim inside the\n// spring, the near half lit by the window and the step lights, with a glint.\nfunction rings(P, M) {\n  const { cx, cy, tx, ty, fa, ba } = P;\n  const v = [0, 0, 0];\n  for (let q = 0; q \u003c NC; q++) {\n    const col = colour(M, P.par ? NC - 1 - q : q);\n    const [nx, ny] = [-ty[q], tx[q]];\n    const [nl, nh] = [nx * LX + ny * LY, nx * HX + ny * HY];\n    const lamp = P.pl[cl(round(cy[q]), 0, H - 1) * W + cl(round(cx[q]), 0, W - 1)] * 0.3;\n    const lt = M.room.map((r, i) => r * (P.amb[i] + (lamp * LAMP[i]) / 255));\n    for (let j = 0; j \u003c KS; j++) {\n      const [c, s] = [CS[j], SN[j]];\n      const dif = max(0, c * nl + s * LZ);\n      const spe = M.shine * max(0, c * nh + s * HZ) ** M.pw;\n      const k = s > 0 ? 1 : 0.42;\n      for (let i = 0; i \u003c 3; i++) v[i] = (col[i] * (M.emit + lt[i] * (0.28 + 0.85 * dif)) + 255 * spe * lt[i]) * k;\n      const [x, y, A] = [cx[q] + (nx * c + ZX * s) * RAD, cy[q] + (ny * c + ZY * s) * RAD, s > 0 ? fa : ba];\n      splat(P, A, x, y, v, 1);\n      if (M.wide > 0) splat(P, A, x + tx[q] * 0.7, y + ty[q] * 0.7, v, M.wide);\n    }\n  }\n}\n\n// The room: daylight, the pools of the step lights that are on, the spring's\n// soft shadow, and the light a glowing spring throws round it.\nfunction lighting(P, M) {\n  const { cx, cy, tx, ty, sh, gl, pl, out, bg, mat, amb } = P;\n  sh.fill(0);\n  gl.fill(0);\n  pl.fill(0);\n  for (let q = 0; q \u003c NC; q += 2) {\n    const [nx, ny] = [-ty[q] * RAD * 0.65, tx[q] * RAD * 0.65];\n    for (const f of [-1, 0, 1]) stamp(sh, KSH, 3, cx[q] + 3 + nx * f, cy[q] + 4 + ny * f, 0.3);\n    if (M.emit > 0 && q % 6 === 0) stamp(gl, KGL, 8, cx[q], cy[q], 0.12 * M.emit);\n  }\n  for (const a of P.st) {\n    const d = P.clock - P.ton[a.id];\n    const I = M.lamps * sm(d / 0.3) * (1 - sm((d - 8) / 1.5));\n    if (I \u003c= 0) continue;\n    for (let y = max(0, a.y - 13); y \u003c= min(H - 1, a.y); y++)\n      for (let x = max(0, a.x - 13); x \u003c min(W, a.x + 13); x++) if (mat[y * W + x] % 3 !== 1) pl[y * W + x] += 1.5 * I * exp(-(((x + 0.5 - a.x) / 9) ** 2) - ((y - a.y + 3) / 6) ** 2);\n    for (let i = -1; i \u003c 1; i++) if (a.y > 3 && a.y \u003c H + 2) pl[(a.y - 3) * W + a.x + i] += 6 * I;\n  }\n  const K = [0, 1, 2].map((i) => [M.room[i] * amb[i], (M.room[i] * LAMP[i]) / 300, (M.glow[i] / 255) * 1.3, M.glow[i] * 0.1, M.room[i] * [60, 34, 6][i]]);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const m = mat[p];\n    const s = 1 - min(1, sh[p]) * (m === 0 || m === 5 ? 0.7 : m === 2 || m === 3 ? 0.45 : 0);\n    const [g, l] = [min(1.5, gl[p]), pl[p]];\n    for (let i = 0, k; i \u003c 3; i++) out[o + i] = bg[o + i] * ((k = K[i])[0] * s + k[1] * l + k[2] * g) + k[3] * g + k[4] * l;\n  }\n}\n\nfunction composite(P) {\n  const { out, fa, ba, hit, list } = P;\n  for (let i = 0; i \u003c P.nl; i++) {\n    const [p, q] = [list[i], list[i] * 4];\n    for (const A of [ba, fa]) {\n      const a = A[q + 3];\n      if (a > 0) for (let c = 0, k = min(1, a); c \u003c 3; c++) out[p * 3 + c] = out[p * 3 + c] * (1 - k) + (A[q + c] / a) * k;\n      A[q] = A[q + 1] = A[q + 2] = A[q + 3] = 0;\n    }\n    hit[p] = 0;\n  }\n  P.nl = 0;\n}\n\nfunction capsule(px, py, x1, y1, x2, y2) {\n  const [dx, dy] = [x2 - x1, y2 - y1];\n  const t = cl(((px - x1) * dx + (py - y1) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return hypot(px - x1 - dx * t, py - y1 - dy * t);\n}\n\n// A child's hand pinching the top coil, a striped sleeve running off up and right.\nfunction hand(P, M) {\n  const { out, hx, hy } = P;\n  for (let y = max(0, floor(hy - 44)); y \u003c= min(H - 1, hy + 2); y++)\n    for (let x = max(0, floor(hx - 8)); x \u003c= min(W - 1, hx + 21); x++) {\n      let [ds, dc] = [9, 9];\n      for (const [x1, y1, x2, y2, r, sl] of HAND) {\n        const d = capsule(x + 0.5 - hx, y + 0.5 - hy, x1, y1, x2, y2) - r;\n        if (sl) dc = min(dc, d);\n        else ds = min(ds, d);\n      }\n      let [c, k] = [0, 0];\n      if (ds \u003c 0) [c, k] = [[238, 184, 148], (ds > -0.8 ? 0.68 : 0.86 + 0.18 * cl(-ds / 2.5, 0, 1)) * (1.06 - 0.02 * (x - hx))];\n      else if (dc \u003c 0) [c, k] = [floor((y - hy + (x - hx) * 0.5) / 2) % 2 ? [206, 56, 62] : [232, 222, 206], dc > -0.8 ? 0.62 : 0.92];\n      else continue;\n      for (let i = 0; i \u003c 3; i++) out[(y * W + x) * 3 + i] = c[i] * k * M.room[i] * (0.15 + 0.85 * P.amb[i] + P.pl[y * W + x] * 0.5);\n    }\n}\n\nexport function draw(display, params) {\n  const [P, M] = [params, params.M];\n  shape(P);\n  lighting(P, M);\n  rings(P, M);\n  composite(P);\n  if (P.hx > -20 && P.hx \u003c 90 && P.hy > -2) hand(P, M);\n  const o = P.out;\n  for (let y = 0, i = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, i += 3) display.setPixel(x, y, min(255, o[i]), min(255, o[i + 1]), min(255, o[i + 2]));\n}\n","layer":{"id":"layer-slinky","type":"code","name":"slinky","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Slinky\n// Family:  toy\n// Idea:    A Slinky walks end over end down a zigzag stairwell the height of the panel, its coils pouring through a bow from step to step, springing off the wall at each landing and waking each step light it lands by, until a hand carries it dangling back up to the top.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after the Slinky, Richard James's steel spring toy of 1945\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Spring=0..1, Speed=0.2..3, Rise=6..12, Lamp=-1..1\n//\n// Knob 1: Spring. Which Slinky comes out of the box: polished steel at 0, then gold plate, the rainbow plastic one that walks lazier, a neon one under a blacklight, and at 1 a glow-in-the-dark one with the lights out.\n// Knob 2: Speed. How fast the film runs: at 2 a step takes under half a second and the walk from top to bottom about seven; at 0.2 it is ten times slower.\n// Knob 3: Rise. How tall each step is, from 6 rows to 12: low steps make three flights and small quick bows, tall ones two flights and long reaches down.\n// Knob 4: Lamp. The daylight in the stairwell: morning at -1, dusk at 0, night at 1, when only the step lights the spring has woken light the stairs and it glints as it passes them.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, abs, floor, round, sin, cos, sqrt, exp, hypot, tan, PI, sign } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst quad = (a, b, c, t) => (1 - t) * (1 - t) * a + 2 * (1 - t) * t * b + t * t * c;\n\n// The stairwell: side walls on columns 0..1 and 62..63, landings 12 wide against\n// them, flights of three 12-wide treads between, the hall floor on row 120.\nconst [T, FLOOR, TH] = [12, 120, 3];\n// The spring: 36 coils 10 LEDs across, 5.4 rows tall when they all sit closed.\nconst [NC, RAD, PITCH, CAP] = [36, 5, 0.15, 4];\nconst HS = NC * PITCH;\nconst [MOVE, BOUNCE, SETTLE, REACH, LIFT, CARRY, LOWER] = [0, 1, 2, 3, 4, 5, 6];\nconst DUR = [0, 0.5, 1.5, 0.8, 0.9, 1.5, 1.5];\n// The step lights' warm light; daylight comes from a window up to the left.\nconst LAMP = [255, 206, 150];\nconst [LX, LY, LZ, HX, HY, HZ] = [-0.5, -0.6, 0.62, -0.278, -0.334, 0.9];\n// The eye is a little above and to one side: a ring's near half shows lower right.\nconst [ZX, ZY, KS] = [0.22, 0.3, 28];\nconst [CS, SN] = [cos, sin].map((f) => Float32Array.from({ length: KS }, (_, j) => f(((j + 0.5) / KS) * 2 * PI)));\nconst kern = (r, s) => Float32Array.from({ length: (2 * r + 1) ** 2 }, (_, i) => exp(-(((i % (2 * r + 1)) - r) ** 2 + (floor(i / (2 * r + 1)) - r) ** 2) / s));\nconst [KSH, KGL] = [kern(3, 3), kern(8, 18)];\nconst RAIN = [[236, 44, 52], [250, 142, 34], [246, 222, 54], [62, 200, 84], [44, 124, 240], [152, 74, 222]];\n// Colour (null: rainbow bands), shine, highlight sharpness, band width, own light,\n// room light, whether the step lights work, and how lazily it walks.\nconst MAT = [\n  [[172, 180, 196], 1, 16, 0, 0, [1, 1, 1], 1, 1],\n  [[232, 174, 62], 1, 9, 0, 0, [1, 0.96, 0.9], 1, 1.06],\n  [null, 0.45, 5, 0.9, 0, [1, 1, 1], 1, 1.22],\n  [[255, 56, 180], 0.3, 5, 0.9, 0.8, [0.34, 0.2, 0.66], 0, 1.22],\n  [[140, 255, 116], 0.15, 5, 0.7, 1, [0.13, 0.16, 0.28], 0, 1.16],\n];\n// The hand as capsules from the pinch: x1, y1, x2, y2, radius, sleeve.\nconst HAND = [[-1.6, -0.8, -4.6, -7.6, 2, 0], [1.3, -1, 4.4, -8.2, 1.8, 0], [6.2, -6.8, 8.4, -12.4, 2.4, 0], [2, -12.4, 2.3, -12.7, 6.6, 0], [4, -16, 8.8, -24, 4.4, 0], [7.4, -23.6, 13.5, -36, 6.2, 1]];\n\n// Built from the floor up, flights turning at each landing. A flight ends in a drop\n// deep enough that the spring can walk off its landing under the flight's end.\nfunction build(P, R) {\n  const [dL, up, fl, lands] = [R + 16, [{ x: 56, y: FLOOR }], [], []];\n  for (let s = 1, base = FLOOR, f = 0; base > 0; f++, s = -s) {\n    const y1 = base - (f ? dL : R) - 2 * R;\n    fl.push([s, y1, y1 + R, y1 + 2 * R]);\n    for (let k = 2; k >= 0; k--) up.push({ x: s > 0 ? 20 + 12 * k : 44 - 12 * k, y: y1 + k * R });\n    base = y1 - R;\n    lands.push([-s, base]);\n    up.push({ x: s > 0 ? 8 : 56, y: base, wall: -s });\n  }\n  const [end, st] = [up[0], up.reverse()];\n  st.forEach((a, i) => (a.id = i));\n  const i0 = st.findIndex((a) => a.y >= 16);\n  const seq = [{ k: LOWER, a: st[i0] }];\n  for (let i = i0; i \u003c st.length - 1; i++) {\n    const [a, b] = [st[i], st[i + 1]];\n    seq.push({ k: MOVE, a, b, s: sign(b.x - a.x), under: !!a.wall });\n    if (b.wall) seq.push({ k: BOUNCE, a: b, s: b.wall });\n  }\n  seq.push({ k: SETTLE, a: end, s: 1 }, { k: REACH, a: end }, { k: LIFT, a: end }, { k: CARRY, a: end, b: st[i0] });\n  Object.assign(P, { R, seq, st, ton: new Float32Array(st.length).fill(-99) });\n  paint(P, R, fl, lands);\n}\n\nfunction paint(P, R, fl, lands) {\n  const { bg, mat } = P;\n  const at = (x, y) => (x \u003c 0 || x >= W || y \u003c 0 || y >= H ? 9 : mat[y * W + x]);\n  const set = (x, y, m, c, k = 1) => {\n    if (at((x = round(x)), (y = round(y))) > 8) return;\n    mat[y * W + x] = m;\n    for (let i = 0; i \u003c 3; i++) bg[(y * W + x) * 3 + i] = c[i] * k;\n  };\n  const lum = (x, y) => 1.16 - 0.0034 * y - 0.003 * x;\n  // Wallpaper: a dusty blue ground, a pale stripe every 8 columns and a lozenge\n  // between; and the edges of the side walls.\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y] = [p & 63, p >> 6];\n    const d = abs((x % 8) - 4) + abs((y % 12) - 6) * 0.7;\n    if (x \u003c 2 || x > 61) set(x, y, 4, [100, 112, 136], lum(x, y) * (x === 1 || x === 62 ? 0.72 : 1));\n    else set(x, y, 0, [48, 62, 96], (x % 8 ? (d \u003c 1.6 ? 1.7 : d \u003c 2.4 ? 0.84 : 1) : 1.7) * lum(x, y) * (0.95 + 0.1 * rnd()));\n  }\n  // A step's side: the tread on top, the board's edge under it, the joint where\n  // the next riser meets it, the dark underside.\n  const block = (x, top, bot, e, edge) => {\n    for (let y = top; y \u003c= bot; y++) {\n      let k = y === top ? (edge ? 1.12 : 1) : (0.88 + 0.1 * sin(y * 1.7 + 2 * sin(x * 0.23)) + 0.05 * rnd()) * (1.08 - y * 0.0025) * (y === top + 1 ? 0.7 : e ? 1 : 0.62);\n      set(x, y, y === top ? 2 : 1, y === top ? [216, 162, 104] : [150, 94, 56], y === bot ? k * 0.55 : k);\n    }\n  };\n  for (const [s, ...ys] of fl) {\n    for (let x = 14, d; x \u003c 50; x++) block(x, ys[floor((d = s > 0 ? x - 14 : 49 - x) / T)], round(ys[0] + TH + (d * R) / T), d % T, d % T === T - 1);\n    // Each nosing overhangs the riser below it by one LED.\n    for (let k = 0, x; k \u003c 3; k++) {\n      if (at((x = s > 0 ? 26 + 12 * k : 37 - 12 * k), ys[k] + 1) === 0) set(x, ys[k] + 1, 0, [20, 30, 34]);\n      set(x, ys[k], 2, [226, 174, 116]);\n    }\n  }\n  for (const [side, y] of lands) {\n    for (let x = side \u003c 0 ? 2 : 50, i = 0; i \u003c 12; x++, i++) block(x, y, y + R + TH, side \u003c 0 ? i : 11 - i, false);\n    if (at(side \u003c 0 ? 14 : 49, y) === 0) set(side \u003c 0 ? 14 : 49, y, 2, [226, 174, 116]);\n  }\n  // Floorboards seen from a little above, the near ones brighter, and the skirting.\n  for (let p = FLOOR * W, x, r; p \u003c N; p++) set((x = p & 63), (r = (p >> 6) - FLOOR) + FLOOR, 3, r ? [176, 122, 74] : [206, 156, 104], (0.78 + 0.04 * r) * (r % 3 === 2 || (x + r * 7) % 23 === 0 ? 0.62 : 0.95 + 0.1 * rnd()));\n  for (let x = 2; x \u003c 62; x++) for (let y = FLOOR - 4; y \u003c FLOOR; y++) if (at(x, y) === 0) set(x, y, 5, [196, 190, 172], (y === FLOOR - 4 ? 1.08 : y === FLOOR - 1 ? 0.66 : 0.94) * lum(x, y));\n  // The stairs' soft shadow from the window, down and right of them.\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y, m] = [p & 63, p >> 6, mat[p]];\n    let n = 0;\n    for (let d = 0; d \u003c 9 && (m === 0 || m === 5); d++) n += at(x - 4 + (d % 3), y - 5 + floor(d / 3)) % 8 > 0 && at(x - 4 + (d % 3), y - 5 + floor(d / 3)) \u003c 3 ? 1 : 0;\n    for (let i = 0; i \u003c 3; i++) bg[p * 3 + i] *= 1 - 0.045 * n;\n  }\n  // A small step light in the wall just above each tread and landing, and a\n  // framed picture on bare wall where the spring never passes.\n  for (const a of P.st) for (let i = -1; i \u003c 1; i++) set(a.x + i, a.y - 3, 5, [70, 72, 80]);\n  const free = (x0, y0) => {\n    for (let n = 0; n \u003c 120; n++) if (at(x0 - 1 + (n % 10), y0 - 1 + floor(n / 10)) !== 0) return false;\n    return P.st.every((a) => abs(a.x - x0 - 4) > 13 || a.y \u003c y0 || a.y - 26 > y0 + 10);\n  };\n  for (let y = 4, pic = 0; y \u003c 110 && !pic; y += 2)\n    for (const x of [4, 52, 28])\n      if (!pic && (pic = free(x, y)))\n        for (let n = 0; n \u003c 80; n++) {\n          const [i, j] = [n & 7, n >> 3];\n          const edge = !i || !j || i === 7 || j === 9;\n          set(x + i, y + j, 5, i === 5 && j === 2 ? [250, 226, 130] : edge ? [196, 150, 64] : j \u003c 5 ? [96, 150, 206] : j \u003c 7 ? [72, 136, 86] : [48, 96, 62], edge && (i === 7 || j === 9) ? 0.7 : 1);\n        }\n}\n\n// Daylight fades from -1 to 1 and turns blue.\nfunction lampLevel(P, k4) {\n  const u = (k4 + 1) / 2;\n  P.amb = [0.98, 1, 1.04].map((t, i) => t * (1.16 - 1.02 * u) * mix(1, [0.6, 0.74, 1][i], u));\n  P.lampAtK = k4;\n}\n\nconst [BZ, LT, FT, PT] = [new Float32Array(8), new Float32Array(17), new Float32Array(33), new Float32Array(4)];\n\nfunction bez(t) {\n  const u = 1 - t;\n  const [a, b, c, d] = [u * u * u, 3 * u * u * t, 3 * u * t * t, t * t * t];\n  for (let i = 0; i \u003c 2; i++) {\n    PT[i] = a * BZ[i] + b * BZ[2 + i] + c * BZ[4 + i] + d * BZ[6 + i];\n    PT[2 + i] = 3 * (u * u * (BZ[2 + i] - BZ[i]) + 2 * u * t * (BZ[4 + i] - BZ[2 + i]) + t * t * (BZ[6 + i] - BZ[4 + i]));\n  }\n}\n\nfunction setCurve(x0, y0, t0x, t0y, x3, y3, t3x, t3y, h0, h3) {\n  BZ.set([x0, y0, x0 + t0x * h0, y0 + t0y * h0, x3 - t3x * h3, y3 - t3y * h3, x3, y3]);\n  let [L, px, py] = [0, x0, y0];\n  for (let i = 1; i \u003c= 16; i++) {\n    bez(i / 16);\n    L += hypot(PT[0] - px, PT[1] - py);\n    [LT[i], px, py] = [L, PT[0], PT[1]];\n  }\n  return L;\n}\n\n// How the coils spread along the curve: a0 keeps the ends open, b leans the spread\n// one way, rip is a pulse running up the bow, c opens the top of a hanging spring.\nfunction setDist(G) {\n  const w = (v) => G.a0 + G.sn * sin(PI * v) ** 1.2 * (1 + G.b * (v - 0.5)) * (1 + G.rip * sin(2 * PI * (1.5 * v + 2 * G.ph))) + G.c * v;\n  let [prev, acc] = [w(0), 0];\n  for (let i = 1; i \u003c= 32; i++) {\n    const cur = w(i / 32);\n    acc += prev + cur;\n    [FT[i], prev] = [acc, cur];\n  }\n  for (let i = 1; i \u003c= 32; i++) FT[i] /= acc;\n}\n\nfunction onCurve(v, L) {\n  const [f, i] = [v * 32, min(31, floor(v * 32))];\n  const s = (FT[i] + (FT[i + 1] - FT[i]) * (f - i)) * L;\n  let j = 0;\n  while (j \u003c 15 && LT[j + 1] \u003c s) j++;\n  bez((j + cl((s - LT[j]) / max(1e-6, LT[j + 1] - LT[j]), 0, 1)) / 16);\n}\n\n// A free end's last coils stay closed and turn together like a lid.\nfunction cap(G, x, y, tx, ty, tail) {\n  const d = CAP * PITCH;\n  if (tail) [G.nA, G.ax, G.ay, G.aux, G.auy] = [CAP, x, y, tx, ty];\n  else [G.nB, G.bx, G.by, G.bux, G.buy] = [CAP, x, y, -tx, -ty];\n  return tail ? [x + tx * d, y + ty * d] : [x - tx * d, y - ty * d];\n}\n\n// One step: the top end tips over onto the step below (p \u003c 0.3), the coils pour\n// over the bow from stack to stack, then the far end lifts and follows (p > 0.74).\nfunction move(P, S, p, G) {\n  const { a, b, s } = S;\n  const [k, dx, hb, p1, p2] = [P.kf, abs(b.x - a.x), S.under ? 0.5 : 1, 0.3, 0.74];\n  G.a0 = p \u003c 0.5 ? mix(0.36, 0.18, p / 0.5) : mix(0.18, 0.12, (p - 0.5) / 0.5);\n  G.b = p \u003c p2 ? mix(0.9, 0.2, p / p2) : mix(0.2, 0, (p - p2) / (1 - p2));\n  [G.bx, G.by] = [b.x, b.y];\n  let C;\n  if (p \u003c p1) {\n    const t = p / p1;\n    const e = t * t * (1.7 - 0.7 * t);\n    const [ex, ey, tx, ty] = [quad(a.x, a.x + s * dx * 0.55, b.x, e), quad(a.y - HS, min(a.y - HS, b.y) - (4 + 4 * k) * hb, b.y, e), s * sin(PI * e), -cos(PI * e)];\n    G.nA = NC - CAP - (0.36 * NC - CAP) * (0.25 * t + 0.75 * e);\n    C = [a.x, a.y - G.nA * PITCH, 0, -1, ...cap(G, ex, ey, tx, ty), tx, ty];\n    if (P.seg === 1 && p \u003c 0.2) [P.hx, P.hy] = [ex, ey];\n  } else if (p \u003c p2) {\n    // The two stacks lean toward each other while the bow pulls on them.\n    const t = (p - p1) / (p2 - p1);\n    const lean = 0.16 * sin(PI * t) * k;\n    [G.nA, G.nB, G.aux, G.auy] = [CAP + (0.64 * NC - CAP) * (1 - t), CAP + (0.66 * NC - CAP) * t, s * sin(lean), -cos(lean)];\n    [G.bux, G.buy] = [-G.aux, G.auy];\n    C = [a.x + G.aux * G.nA * PITCH, a.y + G.auy * G.nA * PITCH, G.aux, G.auy, b.x + G.bux * G.nB * PITCH, b.y + G.buy * G.nB * PITCH, -G.bux, -G.buy];\n    G.rip = 0.45 * sin(PI * t) * exp(-2 * t) * k;\n    G.ph = t;\n  } else {\n    const t = (p - p2) / (1 - p2);\n    const e = t * t * (2 - t);\n    const [fx, fy, tx, ty] = [quad(a.x, a.x + s * dx * 0.35, b.x, e), quad(a.y, min(a.y, b.y - HS) - (3 + 3 * k) * hb, b.y - HS, e), s * sin(PI * e), -cos(PI * e)];\n    G.nB = NC - CAP - (0.34 * NC - CAP) * (1 - e);\n    C = [...cap(G, fx, fy, tx, ty, 1), tx, ty, b.x, b.y - G.nB * PITCH, 0, 1];\n  }\n  const ch = hypot(C[4] - C[0], C[5] - C[1]);\n  const h = (0.45 * ch + 4.5 * k * min(1, ch / 10)) * hb;\n  G.curve = [...C, h, h];\n}\n\n// On a landing the top end swings out, meets the wall and springs back over.\n// On the floor the same swing just rocks and dies away.\nfunction bounce(P, S, u, G) {\n  const [a, phc] = [S.a, PI / 2];\n  let ph = S.k === SETTLE ? 1.3 * phc * exp(-3 * u) * sin(2 * PI * 2.2 * u) * (1 - sm((u - 0.7) / 0.3)) : u \u003c 0.42 ? phc * (u / 0.42) ** 1.7 : u \u003c 0.56 ? phc : phc * (1 - ((u - 0.56) / 0.44) ** 0.85);\n  let w = S.s;\n  if (ph \u003c 0) [ph, w] = [-ph, -w];\n  const sq = S.k === BOUNCE && u > 0.4 && u \u003c 0.6 ? 0.16 * sin((PI * (u - 0.4)) / 0.2) : 0;\n  const La = (((abs((S.s > 0 ? 62 : 2) - a.x) - 1.6) * PI) / 2) * (ph / phc) ** 0.7 * (1 - sq);\n  G.nA = NC - CAP - min(NC * 0.4, La / 1.1);\n  const [x0, y0, r, tx, ty] = [a.x, a.y - G.nA * PITCH, La / max(ph, 1e-3), w * sin(ph), -cos(ph)];\n  const [qx, qy] = [x0 + w * r * (1 - cos(ph)), y0 - r * sin(ph)];\n  const h = ph \u003c 1e-3 ? La / 3 : (4 / 3) * tan(ph / 4) * r;\n  cap(G, qx + tx * CAP * PITCH, qy + ty * CAP * PITCH, tx, ty);\n  G.curve = [x0, y0, 0, -1, qx, qy, tx, ty, h, h];\n  [G.a0, G.sn, G.b] = [0.6, 0.6, -sq * 3];\n}\n\nconst hangLen = (P, m) => m * PITCH + P.lext * (m / NC) ** 2;\n\n// Held by its top coil the spring hangs open at the top and closed at the bottom,\n// each gap carrying the weight of the coils below it.\nfunction hang(P, S, u, G) {\n  let [a, x0, y0, m] = [S.a, S.a.x, 0, NC];\n  if (S.k === CARRY) {\n    [P.hx, P.hy] = carry(P, S, u);\n    [x0, y0] = P.pb;\n    G.nA = 0;\n  } else {\n    m = NC * (S.k === LIFT ? sm(u) : 1 - sm(u));\n    G.nA = NC - m;\n    y0 = a.y - G.nA * PITCH;\n    [P.hx, P.hy] = [x0, y0 - hangLen(P, m)];\n  }\n  [G.sn, G.c, G.a0] = [0, 1, min(50, (m * PITCH) / max(1e-3, 2 * P.lext * (m / NC) ** 2))];\n  const L = max(1e-3, hypot(P.hx - x0, P.hy - y0));\n  G.curve = [x0, y0, (P.hx - x0) / L, (P.hy - y0) / L, P.hx, P.hy, 0, -1, L / 3, L / 3];\n}\n\nfunction carry(P, S, u) {\n  const [e, L] = [sm(u), hangLen(P, NC)];\n  return [mix(S.a.x, S.b.x, e) + 6 * sin(PI * e), mix(FLOOR - L, S.b.y - L, e)];\n}\n\nfunction dur(P, S) {\n  if (S.k === MOVE) return 0.44 * sqrt((S.b.y - S.a.y + 6) / 12) * P.kf;\n  return S.k === BOUNCE ? DUR[1] * P.kf : DUR[S.k];\n}\n\nfunction shape(P) {\n  const [S, G] = [P.seq[P.seg], P.G];\n  const u = cl(P.sp / dur(P, S), 0, 1);\n  Object.assign(P.G, { ax: S.a.x, ay: S.a.y, aux: 0, auy: -1, nA: NC, bx: 0, by: 0, bux: 0, buy: -1, nB: 0, a0: 0.3, sn: 1, b: 0, rip: 0, ph: 0, c: 0, curve: null });\n  P.hx = -99;\n  if (S.k === MOVE) move(P, S, u, G);\n  else if (S.k === BOUNCE || S.k === SETTLE) bounce(P, S, u, G);\n  else if (S.k === REACH) [P.hx, P.hy] = [mix(80, S.a.x, 1 - (1 - u) ** 2), mix(FLOOR - 46, S.a.y - HS, 1 - (1 - u) ** 2)];\n  else hang(P, S, u, G);\n  if (P.ht >= 0 && P.ht \u003c 0.8) [P.hx, P.hy] = [P.rx + 12 * sm(P.ht / 0.8), P.ry - 44 * sm(P.ht / 0.8)];\n  // Every coil: its centre and the way the spring runs through it.\n  const { cx, cy, tx, ty } = P;\n  const nc = NC - G.nA - G.nB;\n  const L = G.curve && nc > 1e-3 ? setCurve(...G.curve) : 0;\n  if (L) setDist(G);\n  for (let q = 0; q \u003c NC; q++) {\n    const u = q + 0.5;\n    if (u \u003c= G.nA || !L) [cx[q], cy[q], tx[q], ty[q]] = [G.ax + G.aux * u * PITCH, G.ay + G.auy * u * PITCH, G.aux, G.auy];\n    else if (u >= NC - G.nB) [cx[q], cy[q], tx[q], ty[q]] = [G.bx + G.bux * (NC - u) * PITCH, G.by + G.buy * (NC - u) * PITCH, -G.bux, -G.buy];\n    else {\n      onCurve((u - G.nA) / nc, L);\n      const d = hypot(PT[2], PT[3]) || 1;\n      [cx[q], cy[q], tx[q], ty[q]] = [PT[0], PT[1], PT[2] / d, PT[3] / d];\n    }\n  }\n}\n\nfunction restart(P) {\n  Object.assign(P, { seg: 0, sp: 0.9, par: 0, ht: -1, pb: [0, 0], pv: [0, 0], clock: 0 });\n  P.ton.fill(-99);\n}\n\nfunction advance(P, h) {\n  P.sp += h;\n  P.clock += h;\n  if (P.ht >= 0) P.ht += h;\n  let S = P.seq[P.seg];\n  if (P.seg === 1 && P.ht \u003c 0 && P.sp >= 0.2 * dur(P, S)) [P.ht, P.rx, P.ry] = [0, P.hx, P.hy];\n  // A step light wakes when the spring lands by it, and stays on for 8 seconds.\n  const b = S.k === MOVE ? S.b : S.k === LOWER ? S.a : null;\n  if (b && P.sp >= 0.3 * dur(P, S) && P.ton[b.id] \u003c P.clock - 9.5) P.ton[b.id] = P.clock;\n  while (P.sp >= dur(P, S)) {\n    P.sp -= dur(P, S);\n    if (S.k === MOVE) P.par ^= 1;\n    S = P.seq[(P.seg = (P.seg + 1) % P.seq.length)];\n    if (S.k === CARRY) [P.pb, P.pv] = [[S.a.x, FLOOR], [0, 0]];\n    if (S.k === LOWER) P.ht = -1;\n  }\n  // Carried, the bottom of the spring hangs back and swings under the hand.\n  if (S.k !== CARRY) return;\n  const u = P.sp / dur(P, S);\n  const [[hx, hy], L, damp] = [carry(P, S, u), hangLen(P, NC), 3.5 + 30 * sm((u - 0.65) / 0.35)];\n  for (let c = 0; c \u003c 2; c++) {\n    P.pv[c] += (48 * ((c ? hy + L : hx) - P.pb[c]) - damp * P.pv[c]) * h;\n    P.pb[c] += P.pv[c] * h;\n  }\n  const [dx, dy, r] = [P.pb[0] - hx, P.pb[1] - hy - L, hypot(P.pb[0] - hx, P.pb[1] - hy - L)];\n  if (r > 0.6 * L) P.pb = [hx + (dx * 0.6 * L) / r, hy + L + (dy * 0.6 * L) / r];\n}\n\nexport function setup(params) {\n  const [P, F] = [params, (n) => new Float32Array(n)];\n  Object.assign(P, { bg: F(N * 3), out: F(N * 3), pl: F(N), mat: new Uint8Array(N), sh: F(N), gl: F(N), fa: F(N * 4), ba: F(N * 4) });\n  Object.assign(P, { hit: new Uint8Array(N), list: new Int32Array(N), nl: 0, cx: F(NC), cy: F(NC), tx: F(NC), ty: F(NC), G: {}, kf: 1, lext: 38, hx: -99, hy: 0, M: material(0) });\n  build(P, 6);\n  lampLevel(P, 0.06);\n  restart(P);\n}\n\nexport function update(dt, input, params) {\n  const [P, k] = [params, input.knobValues || [0, 2, 6, 0.06]];\n  P.M = material(cl(k[0], 0, 1));\n  [P.kf, P.lext] = [P.M.lazy, 38 / P.M.lazy ** 2];\n  const R = round(cl(k[2], 6, 12));\n  if (R !== P.R) build(P, R), restart(P);\n  if (cl(k[3], -1, 1) !== P.lampAtK) lampLevel(P, cl(k[3], -1, 1));\n  const h = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  const n = Math.ceil(h / 0.01);\n  for (let i = 0; i \u003c n; i++) advance(P, h / n);\n}\n\nfunction material(k1) {\n  const i = min(3, floor(k1 * 4));\n  const [t, A, B] = [k1 * 4 - i, MAT[i], MAT[i + 1]];\n  const M = { i, t, shine: mix(A[1], B[1], t), pw: mix(A[2], B[2], t), wide: mix(A[3], B[3], t), emit: mix(A[4], B[4], t), lamps: mix(A[6], B[6], t), lazy: mix(A[7], B[7], t) };\n  M.room = A[5].map((v, c) => mix(v, B[5][c], t));\n  const g = (m) => MAT[m][0] || [230, 200, 190];\n  M.glow = g(i).map((v, c) => mix(v, g(i + 1)[c], t) * M.emit);\n  return M;\n}\n\nfunction colour(M, id) {\n  const pick = (m) => MAT[m][0] || RAIN[floor((id * 6) / NC)];\n  const [a, b] = [pick(M.i), pick(M.i + 1)];\n  return [0, 1, 2].map((c) => mix(a[c], b[c], M.t));\n}\n\nfunction stamp(F, K, r, x, y, w) {\n  const [ix, iy, n] = [round(x), round(y), 2 * r + 1];\n  for (let j = -r; j \u003c= r; j++) {\n    const yy = iy + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    for (let i = -r; i \u003c= r; i++) if (ix + i >= 0 && ix + i \u003c W) F[yy * W + ix + i] += K[(j + r) * n + i + r] * w;\n  }\n}\n\nfunction add(P, A, x, y, c, w) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H || w \u003c= 0) return;\n  const p = y * W + x;\n  if (!P.hit[p]) P.list[P.nl++] = p;\n  P.hit[p] = 1;\n  for (let i = 0; i \u003c 3; i++) A[p * 4 + i] += c[i] * w;\n  A[p * 4 + 3] += w;\n}\n\nfunction splat(P, A, x, y, c, w) {\n  const [ix, iy] = [floor((x -= 0.5)), floor((y -= 0.5))];\n  const [fx, fy] = [x - ix, y - iy];\n  for (let n = 0; n \u003c 4; n++) add(P, A, ix + (n & 1), iy + (n >> 1), c, w * (n & 1 ? fx : 1 - fx) * (n >> 1 ? fy : 1 - fy));\n}\n\n// Each coil a thin ring seen nearly side-on: the far half dim inside the\n// spring, the near half lit by the window and the step lights, with a glint.\nfunction rings(P, M) {\n  const { cx, cy, tx, ty, fa, ba } = P;\n  const v = [0, 0, 0];\n  for (let q = 0; q \u003c NC; q++) {\n    const col = colour(M, P.par ? NC - 1 - q : q);\n    const [nx, ny] = [-ty[q], tx[q]];\n    const [nl, nh] = [nx * LX + ny * LY, nx * HX + ny * HY];\n    const lamp = P.pl[cl(round(cy[q]), 0, H - 1) * W + cl(round(cx[q]), 0, W - 1)] * 0.3;\n    const lt = M.room.map((r, i) => r * (P.amb[i] + (lamp * LAMP[i]) / 255));\n    for (let j = 0; j \u003c KS; j++) {\n      const [c, s] = [CS[j], SN[j]];\n      const dif = max(0, c * nl + s * LZ);\n      const spe = M.shine * max(0, c * nh + s * HZ) ** M.pw;\n      const k = s > 0 ? 1 : 0.42;\n      for (let i = 0; i \u003c 3; i++) v[i] = (col[i] * (M.emit + lt[i] * (0.28 + 0.85 * dif)) + 255 * spe * lt[i]) * k;\n      const [x, y, A] = [cx[q] + (nx * c + ZX * s) * RAD, cy[q] + (ny * c + ZY * s) * RAD, s > 0 ? fa : ba];\n      splat(P, A, x, y, v, 1);\n      if (M.wide > 0) splat(P, A, x + tx[q] * 0.7, y + ty[q] * 0.7, v, M.wide);\n    }\n  }\n}\n\n// The room: daylight, the pools of the step lights that are on, the spring's\n// soft shadow, and the light a glowing spring throws round it.\nfunction lighting(P, M) {\n  const { cx, cy, tx, ty, sh, gl, pl, out, bg, mat, amb } = P;\n  sh.fill(0);\n  gl.fill(0);\n  pl.fill(0);\n  for (let q = 0; q \u003c NC; q += 2) {\n    const [nx, ny] = [-ty[q] * RAD * 0.65, tx[q] * RAD * 0.65];\n    for (const f of [-1, 0, 1]) stamp(sh, KSH, 3, cx[q] + 3 + nx * f, cy[q] + 4 + ny * f, 0.3);\n    if (M.emit > 0 && q % 6 === 0) stamp(gl, KGL, 8, cx[q], cy[q], 0.12 * M.emit);\n  }\n  for (const a of P.st) {\n    const d = P.clock - P.ton[a.id];\n    const I = M.lamps * sm(d / 0.3) * (1 - sm((d - 8) / 1.5));\n    if (I \u003c= 0) continue;\n    for (let y = max(0, a.y - 13); y \u003c= min(H - 1, a.y); y++)\n      for (let x = max(0, a.x - 13); x \u003c min(W, a.x + 13); x++) if (mat[y * W + x] % 3 !== 1) pl[y * W + x] += 1.5 * I * exp(-(((x + 0.5 - a.x) / 9) ** 2) - ((y - a.y + 3) / 6) ** 2);\n    for (let i = -1; i \u003c 1; i++) if (a.y > 3 && a.y \u003c H + 2) pl[(a.y - 3) * W + a.x + i] += 6 * I;\n  }\n  const K = [0, 1, 2].map((i) => [M.room[i] * amb[i], (M.room[i] * LAMP[i]) / 300, (M.glow[i] / 255) * 1.3, M.glow[i] * 0.1, M.room[i] * [60, 34, 6][i]]);\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const m = mat[p];\n    const s = 1 - min(1, sh[p]) * (m === 0 || m === 5 ? 0.7 : m === 2 || m === 3 ? 0.45 : 0);\n    const [g, l] = [min(1.5, gl[p]), pl[p]];\n    for (let i = 0, k; i \u003c 3; i++) out[o + i] = bg[o + i] * ((k = K[i])[0] * s + k[1] * l + k[2] * g) + k[3] * g + k[4] * l;\n  }\n}\n\nfunction composite(P) {\n  const { out, fa, ba, hit, list } = P;\n  for (let i = 0; i \u003c P.nl; i++) {\n    const [p, q] = [list[i], list[i] * 4];\n    for (const A of [ba, fa]) {\n      const a = A[q + 3];\n      if (a > 0) for (let c = 0, k = min(1, a); c \u003c 3; c++) out[p * 3 + c] = out[p * 3 + c] * (1 - k) + (A[q + c] / a) * k;\n      A[q] = A[q + 1] = A[q + 2] = A[q + 3] = 0;\n    }\n    hit[p] = 0;\n  }\n  P.nl = 0;\n}\n\nfunction capsule(px, py, x1, y1, x2, y2) {\n  const [dx, dy] = [x2 - x1, y2 - y1];\n  const t = cl(((px - x1) * dx + (py - y1) * dy) / (dx * dx + dy * dy || 1), 0, 1);\n  return hypot(px - x1 - dx * t, py - y1 - dy * t);\n}\n\n// A child's hand pinching the top coil, a striped sleeve running off up and right.\nfunction hand(P, M) {\n  const { out, hx, hy } = P;\n  for (let y = max(0, floor(hy - 44)); y \u003c= min(H - 1, hy + 2); y++)\n    for (let x = max(0, floor(hx - 8)); x \u003c= min(W - 1, hx + 21); x++) {\n      let [ds, dc] = [9, 9];\n      for (const [x1, y1, x2, y2, r, sl] of HAND) {\n        const d = capsule(x + 0.5 - hx, y + 0.5 - hy, x1, y1, x2, y2) - r;\n        if (sl) dc = min(dc, d);\n        else ds = min(ds, d);\n      }\n      let [c, k] = [0, 0];\n      if (ds \u003c 0) [c, k] = [[238, 184, 148], (ds > -0.8 ? 0.68 : 0.86 + 0.18 * cl(-ds / 2.5, 0, 1)) * (1.06 - 0.02 * (x - hx))];\n      else if (dc \u003c 0) [c, k] = [floor((y - hy + (x - hx) * 0.5) / 2) % 2 ? [206, 56, 62] : [232, 222, 206], dc > -0.8 ? 0.62 : 0.92];\n      else continue;\n      for (let i = 0; i \u003c 3; i++) out[(y * W + x) * 3 + i] = c[i] * k * M.room[i] * (0.15 + 0.85 * P.amb[i] + P.pl[y * W + x] * 0.5);\n    }\n}\n\nexport function draw(display, params) {\n  const [P, M] = [params, params.M];\n  shape(P);\n  lighting(P, M);\n  rings(P, M);\n  composite(P);\n  if (P.hx > -20 && P.hx \u003c 90 && P.hy > -2) hand(P, M);\n  const o = P.out;\n  for (let y = 0, i = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, i += 3) display.setPixel(x, y, min(255, o[i]), min(255, o[i + 1]), min(255, o[i + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Spring=0..1, Speed=0.2..3, Rise=6..12, Lamp=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Spring","min":0,"max":1,"about":"Which Slinky comes out of the box: polished steel at 0, then gold plate, the rainbow plastic one that walks lazier, a neon one under a blacklight, and at 1 a glow-in-the-dark one with the lights out."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the film runs: at 2 a step takes under half a second and the walk from top to bottom about seven; at 0.2 it is ten times slower."},{"name":"Rise","min":6,"max":12,"about":"How tall each step is, from 6 rows to 12: low steps make three flights and small quick bows, tall ones two flights and long reaches down."},{"name":"Lamp","min":-1,"max":1,"about":"The daylight in the stairwell: morning at -1, dusk at 0, night at 1, when only the step lights the spring has woken light the stairs and it glints as it passes them."}],"start":[0,2,6,0.06],"measures":{"motion":0.1152,"detail":0.057,"edges":0.2572,"complexity":1.8838,"coverage":0.9943,"colour":0.1312,"drift":0.056},"knobResponse":[0.1557,0.043,0.0908,0.2999]},{"slug":"smalti","title":"Smalti","family":"glass","round":19,"note":"라벤나 갈라 플라키디아의 별 궁륭과 기도하는 사도를 어두운 줄눈의 유리와 금 테세라로 128줄에 짜요. 등불이 벽을 오르내리면 저마다 조금씩 기운 금 큐브가 빛의 각도를 만날 때마다 번쩍여요.","idea":"A Ravenna mosaic of glass and gold tesserae set in dark mortar, a starry vault over a white-robed apostle, where a carried lamp wanders across the wall and every gold tessera, set at its own small tilt, flashes as the light finds its angle.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Smalti\n// Family:  glass\n// Idea:    A Ravenna mosaic of glass and gold tesserae set in dark mortar, a starry vault over a white-robed apostle, where a carried lamp wanders across the wall and every gold tessera, set at its own small tilt, flashes as the light finds its angle.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the starry vault and the apostles of the Mausoleum of Galla Placidia, Ravenna\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Tesserae=2..4, Gold=0..1\n//\n// Knob 1: Light. The colour of the lamp, from a pale white flame at 0 to a small amber oil flame at 1 that throws a smaller pool and leaves the rest of the chapel dim.\n// Knob 2: Speed. How fast the lamp is carried about: at 2 it crosses the wall in about six seconds and climbs from the apostle's feet to the cross in about seven.\n// Knob 3: Tesserae. How big the cubes of the blue ground and the grass are, from 2 LEDs across to 4; the gold work and the apostle keep their fine cubes.\n// Knob 4: Gold. At 0.06 only the stars, the cross, the rim and the halo are gold; turned up, a gold ground spreads out from the cross, over the whole vault by 0.5 and down the whole wall by 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst TAU = Math.PI * 2;\n// The vault: a disc of blue round the cross, with a banded rim.\nconst VX = 32;\nconst VY = 37;\nconst VR = 31.5;\n// A frieze under the vault, then the niche where the apostle stands.\nconst FR0 = 70;\nconst FR1 = 78;\nconst GROUND = 120;\n// Kinds of tessera.\nconst BLUE = 0;\nconst NAVY = 1;\nconst GOLD = 2;\nconst RED = 3;\nconst WHITE = 4;\nconst GREY = 5;\nconst PURPLE = 6;\nconst FLESH = 7;\nconst HAIR = 8;\nconst GREEN = 9;\nconst LEAF = 10;\nconst SKY = 11;\nconst BROWN = 12;\nconst PEARL = 13;\nconst KINDS = 14;\nconst BASE = [\n  [38, 62, 200],\n  [28, 44, 172],\n  [204, 160, 58],\n  [214, 50, 36],\n  [232, 232, 220],\n  [158, 170, 204],\n  [172, 70, 160],\n  [240, 188, 152],\n  [116, 66, 38],\n  [52, 166, 84],\n  [124, 190, 64],\n  [70, 112, 230],\n  [150, 92, 50],\n];\n// A flash off gold leaf is a pale gold, not white.\nconst FLASH = [255, 240, 186];\n// The gold work is set in cubes of 2 LEDs whatever the ground: the cross in\n// two columns, and each star as a cube with four cubes round it. Steps are\n// of 3 LEDs, a cube and its mortar.\nconst CROSS = [];\nfor (let by = -3; by \u003c= 3; by++) CROSS.push([-1, by], [0, by]);\nfor (const bx of [-3, -2, 1, 2]) CROSS.push([bx, -2], [bx, -1]);\nconst STAR = [\n  [0, 0],\n  [0, -1],\n  [0, 1],\n  [-1, 0],\n  [1, 0],\n];\nconst DOT = [[0, 0]];\n// The apostle, cube by cube: a gold halo, a white robe with purple stripes,\n// both forearms raised in prayer, sandals on the grass. Faces and haloes were\n// set in finer cubes than the ground in Ravenna too, so the figure keeps its\n// 2 LED cubes at every Tesserae setting.\nconst SPRITE = [\n  \"....GGGGG....\",\n  \".F.GGHHHGG.F.\",\n  \".F.GHFFFHG.F.\",\n  \".W.GGFFFGG.W.\",\n  \".W..GGHGG..W.\",\n  \".WWWWWWWWWWS.\",\n  \"...WPWWWPS...\",\n  \"...WPWWWPS...\",\n  \"...WPWWWPSS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWWWWWWWS..\",\n  \"....B...B....\",\n];\nconst LETTER = { G: GOLD, H: HAIR, F: FLESH, W: WHITE, S: GREY, P: PURPLE, B: BROWN };\nconst APOSTLE = [];\nSPRITE.forEach((row, by) => [...row].forEach((ch, bx) => ch !== \".\" && APOSTLE.push([bx, by, LETTER[ch]])));\n// Rings of stars round the cross: radius, count, turn, and whether each is\n// a full star or a single cube.\nconst STARS = [\n  [11.5, 6, 0.5, 0],\n  [19.5, 8, 0, 1],\n  [26.4, 16, 0.5, 0],\n];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hash(a, b, s) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Cut a run of tesserae along u: each cut sits near a multiple of len,\n// moved by up to 0.8 LED, so the cubes come out 1 LED longer or shorter.\nfunction cut(u, len, row, s) {\n  const c = Math.floor(u / len);\n  if (u \u003c c * len + 1.6 * (hash(row, c, s) - 0.5)) return c - 1;\n  if (u >= (c + 1) * len + 1.6 * (hash(row, c + 1, s) - 0.5)) return c + 1;\n  return c;\n}\n\n// Straight courses laid across the wall, a little wavy, as a mosaicist sets\n// a plain ground.\nfunction course(x, y, p, s, region) {\n  const v = y + 0.45 * Math.sin(x * 0.21 + s);\n  const row = Math.floor(v / p);\n  return region * 1e6 + row * 1000 + cut(x + row * 1.7, p, row, s) + 300;\n}\n\n// What the design asks for under the courses.\nfunction paint(x, y) {\n  const dv = Math.hypot(x - VX, y - VY);\n  if (dv \u003c VR) return BLUE;\n  if (y \u003c FR0) return NAVY;\n  if (y \u003c FR1) return PEARL;\n  if (y >= GROUND) {\n    if (hash(Math.floor(x / 3), Math.floor(y / 3), 91) \u003c 0.12) return y \u003c GROUND + 4 ? RED : WHITE;\n    return y \u003c GROUND + 4 ? LEAF : GREEN;\n  }\n  return BLUE;\n}\n\n// The setting: which tessera a point belongs to.\nfunction layout(x, y, p, s) {\n  const dv = Math.hypot(x - VX, y - VY);\n  if (dv \u003c VR) return course(x, y, p, s, 1);\n  if (y \u003c FR0) return course(x, y, p, s + 1, 3);\n  if (y \u003c FR1) {\n    const row = y \u003c (FR0 + FR1) / 2 ? 0 : 1;\n    return 4e6 + row * 1000 + cut(x + 2 * row, 4, row + 70, s) + 300;\n  }\n  if (y >= GROUND) return course(x, y - GROUND, p, s + 2, 5);\n  return course(x, y, p, s + 7, 10);\n}\n\n// Lay a motif cube by cube over the ground: each cube is a 3 by 3 block, its\n// last row and column becoming mortar. A cube that would overlap one already\n// set is left out.\nfunction setMotif(key, set, x0, y0, cubes, tag) {\n  for (const [bx, by, kd] of cubes) {\n    const ax = x0 + 3 * bx;\n    const ay = y0 + 3 * by;\n    let free = ax >= 0 && ay >= 0 && ax + 3 \u003c= W && ay + 3 \u003c= H;\n    for (let y = ay; free && y \u003c ay + 3; y++) for (let x = ax; x \u003c ax + 3; x++) if (set[y * W + x] >= 0) free = false;\n    if (!free) continue;\n    for (let y = ay; y \u003c ay + 3; y++)\n      for (let x = ax; x \u003c ax + 3; x++) {\n        key[y * W + x] = 2e7 + tag * 1000 + (bx + 20) * 40 + by + 20;\n        set[y * W + x] = kd === undefined ? GOLD : kd;\n      }\n  }\n}\n\nfunction build(P, p) {\n  P.p = p;\n  const s = P.seed;\n  const key = new Float64Array(N);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) key[y * W + x] = layout(x + 0.5, y + 0.5, p, s);\n  const set = new Int8Array(N).fill(-1);\n  setMotif(key, set, 13, 81, APOSTLE, 0);\n  setMotif(key, set, VX - 1, VY - 1, CROSS, 1);\n  let tag = 2;\n  for (const [rr, n, ph, big] of STARS)\n    for (let k = 0; k \u003c n; k++) {\n      const a = ((k + ph) / n) * TAU - Math.PI / 2;\n      setMotif(key, set, Math.round(VX + rr * Math.cos(a) - 1), Math.round(VY + rr * Math.sin(a) - 1), big ? STAR : DOT, tag++);\n    }\n  // The rim of the vault: a band of red, gold and white cubes.\n  const rim = [];\n  for (let k = 0; k \u003c 58; k++) {\n    const a = (k / 58) * TAU;\n    rim.push([Math.round(VX - 1 + 29.9 * Math.cos(a)), Math.round(VY - 1 + 29.9 * Math.sin(a)), [RED, GOLD, WHITE, GOLD][k % 4]]);\n  }\n  for (const [x, y, kd] of rim) setMotif(key, set, x, y, [[0, 0, kd]], tag++);\n  // Small stars in the niche round the apostle, and a flower in each spandrel.\n  for (const [sx, sy] of [\n    [4, 84],\n    [57, 84],\n    [4, 106],\n    [57, 106],\n  ])\n    setMotif(key, set, sx, sy, STAR, tag++);\n  setMotif(key, set, 3, 2, [[0, 0], [1, 0], [0, 1]], tag++);\n  setMotif(key, set, W - 6, 2, [[0, 0], [-1, 0], [0, 1]], tag++);\n  // Mortar runs along every join: the LED left of or above a join is mortar.\n  const ids = new Int32Array(N);\n  const index = new Map();\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      if ((x \u003c W - 1 && key[q + 1] !== key[q]) || (y \u003c H - 1 && key[q + W] !== key[q])) {\n        ids[q] = -1;\n        continue;\n      }\n      let id = index.get(key[q]);\n      if (id === undefined) {\n        id = index.size;\n        index.set(key[q], id);\n      }\n      ids[q] = id;\n    }\n  const n = index.size;\n  const cx = new Float32Array(n);\n  const cy = new Float32Array(n);\n  const count = new Float32Array(n);\n  const votes = new Float32Array(n * KINDS);\n  for (let q = 0; q \u003c N; q++) {\n    const id = ids[q];\n    if (id \u003c 0) continue;\n    const x = q % W;\n    const y = (q - x) / W;\n    cx[id] += x + 0.5;\n    cy[id] += y + 0.5;\n    count[id]++;\n    votes[id * KINDS + (set[q] >= 0 ? set[q] : paint(x + 0.5, y + 0.5))]++;\n  }\n  const kind = new Uint8Array(n);\n  const tint = new Float32Array(n * 3);\n  const tilt = new Float32Array(n * 2);\n  const rank = new Float32Array(n);\n  let alt = 0;\n  for (let i = 0; i \u003c n; i++) {\n    cx[i] /= count[i];\n    cy[i] /= count[i];\n    let best = 0;\n    for (let k = 1; k \u003c KINDS; k++) if (votes[i * KINDS + k] > votes[i * KINDS + best]) best = k;\n    const dv = Math.hypot(cx[i] - VX, cy[i] - VY);\n    // The frieze's upper course alternates red and white cube by cube.\n    if (best === PEARL) best = cy[i] \u003c (FR0 + FR1) / 2 ? (alt++ % 2 ? WHITE : RED) : GOLD;\n    // The vault's blue pales toward the cross: lighter cubes are mixed in.\n    else if (best === BLUE && dv \u003c VR && Math.random() \u003c 0.75 - dv / 30) best = SKY;\n    else if (best === BLUE && Math.random() \u003c 0.25) best = NAVY;\n    kind[i] = best;\n    // Every cube is its own pour of glass: a little lighter or darker,\n    // warmer or cooler than the next.\n    const v = 0.86 + 0.14 * Math.random();\n    for (let c = 0; c \u003c 3; c++) tint[i * 3 + c] = v * (0.9 + 0.2 * Math.random());\n    tilt[i * 2] = gauss() * 0.25;\n    tilt[i * 2 + 1] = gauss() * 0.25;\n    // As Gold turns up, gold ground takes the blue's place nearest the cross\n    // first, with a ragged edge.\n    rank[i] = 0.78 * clamp(Math.hypot(cx[i] - VX, (cy[i] - VY) * 0.8) / 90, 0, 1) + 0.22 * Math.random();\n  }\n  // Per LED the glass is uneven in its weaker colours, and the mortar is\n  // grainy.\n  const jit = new Int8Array(N * 3);\n  for (let q = 0; q \u003c N * 3; q++) jit[q] = Math.floor(Math.random() * 31) - 15;\n  const mortar = new Uint8Array(N * 3);\n  for (let q = 0; q \u003c N; q++) {\n    const lv = 5 + Math.floor(Math.random() * 7);\n    const m = Math.floor(Math.random() * 3);\n    for (let c = 0; c \u003c 3; c++) mortar[q * 3 + c] = c === m ? lv : Math.floor(Math.random() * (lv + 1));\n  }\n  Object.assign(P, { ids, n, cx, cy, kind, tint, tilt, rank, jit, mortar, col: new Float32Array(n * 3), top: new Uint8Array(n) });\n}\n\nfunction gauss() {\n  return (Math.random() + Math.random() + Math.random() - 1.5) * 2;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.seed = Math.floor(Math.random() * 1e6);\n  P.t = 0;\n  P.p = 0;\n  P.started = false;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.warm = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const p = Math.round(clamp(k[2], 2, 4)) + 1;\n  P.gold = clamp((k[3] - 0.06) / 0.94, 0, 1);\n  if (p !== P.p) build(P, p);\n  if (!P.started) {\n    P.started = true;\n    P.t = 3 + 6 * speed;\n  }\n  P.t += dt * speed;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.p) return;\n  const t = P.t;\n  // The lamp wanders the wall on a slow figure, a little in front of it, and\n  // its flame breathes.\n  const lx = 32 + 30 * Math.sin(0.5 * t);\n  const ly = 70 + 52 * Math.sin(0.29 * t - 0.93);\n  const flame = 1 + 0.05 * Math.sin(t * 7.3) + 0.04 * Math.sin(t * 11.9 + 1);\n  const warm = P.warm;\n  const R = 25 - 9 * warm;\n  const amb = 0.45 - 0.17 * warm;\n  const lc = [1, 0.95 - 0.25 * warm, 0.88 - 0.5 * warm];\n  const D2 = 2 * 34;\n  const { n, cx, cy, kind, tint, tilt, rank, col, top } = P;\n  const gold = P.gold * 1.08;\n  for (let i = 0; i \u003c n; i++) {\n    let kd = kind[i];\n    if ((kd === BLUE || kd === NAVY || kd === SKY) && rank[i] \u003c gold) kd = GOLD;\n    const dx = lx - cx[i];\n    const dy = ly - cy[i];\n    const pool = Math.exp(-(dx * dx + dy * dy) / (2 * R * R));\n    const lit = amb + pool * flame;\n    // A cube flashes when its tilt sends the lamp straight back at you.\n    const gx = tilt[i * 2] - dx / D2;\n    const gy = tilt[i * 2 + 1] - dy / D2;\n    const flash = Math.exp(-(gx * gx + gy * gy) / 0.035);\n    const shine = kd === GOLD ? 1 : 0.18;\n    const b = BASE[kd];\n    let mx = 0;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = b[c] * tint[i * 3 + c] * lc[c] * lit * (kd === GOLD ? 1.1 : 1);\n      const w = clamp(v + shine * flash * (FLASH[c] * lc[c] - v), 0, 255);\n      col[i * 3 + c] = w;\n      if (w > col[i * 3 + mx]) mx = c;\n    }\n    // Even in the dark a cube stands clear of its mortar.\n    const hi = col[i * 3 + mx];\n    if (hi \u003c 58) for (let c = 0; c \u003c 3; c++) col[i * 3 + c] *= 58 / Math.max(1, hi);\n    top[i] = mx;\n  }\n  const { ids, jit, mortar } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const id = ids[q];\n      if (id \u003c 0) {\n        display.setPixel(x, y, mortar[q * 3], mortar[q * 3 + 1], mortar[q * 3 + 2]);\n        continue;\n      }\n      const m = top[id];\n      const hi = col[id * 3 + m];\n      let r = col[id * 3] + jit[q * 3];\n      let g = col[id * 3 + 1] + jit[q * 3 + 1];\n      let b = col[id * 3 + 2] + jit[q * 3 + 2];\n      r = m === 0 ? hi : clamp(r, 0, hi);\n      g = m === 1 ? hi : clamp(g, 0, hi);\n      b = m === 2 ? hi : clamp(b, 0, hi);\n      display.setPixel(x, y, Math.round(r), Math.round(g), Math.round(b));\n    }\n}\n","layer":{"id":"layer-smalti","type":"code","name":"smalti","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Smalti\n// Family:  glass\n// Idea:    A Ravenna mosaic of glass and gold tesserae set in dark mortar, a starry vault over a white-robed apostle, where a carried lamp wanders across the wall and every gold tessera, set at its own small tilt, flashes as the light finds its angle.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 19, after the starry vault and the apostles of the Mausoleum of Galla Placidia, Ravenna\n// Round:   19\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Tesserae=2..4, Gold=0..1\n//\n// Knob 1: Light. The colour of the lamp, from a pale white flame at 0 to a small amber oil flame at 1 that throws a smaller pool and leaves the rest of the chapel dim.\n// Knob 2: Speed. How fast the lamp is carried about: at 2 it crosses the wall in about six seconds and climbs from the apostle's feet to the cross in about seven.\n// Knob 3: Tesserae. How big the cubes of the blue ground and the grass are, from 2 LEDs across to 4; the gold work and the apostle keep their fine cubes.\n// Knob 4: Gold. At 0.06 only the stars, the cross, the rim and the halo are gold; turned up, a gold ground spreads out from the cross, over the whole vault by 0.5 and down the whole wall by 1.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst TAU = Math.PI * 2;\n// The vault: a disc of blue round the cross, with a banded rim.\nconst VX = 32;\nconst VY = 37;\nconst VR = 31.5;\n// A frieze under the vault, then the niche where the apostle stands.\nconst FR0 = 70;\nconst FR1 = 78;\nconst GROUND = 120;\n// Kinds of tessera.\nconst BLUE = 0;\nconst NAVY = 1;\nconst GOLD = 2;\nconst RED = 3;\nconst WHITE = 4;\nconst GREY = 5;\nconst PURPLE = 6;\nconst FLESH = 7;\nconst HAIR = 8;\nconst GREEN = 9;\nconst LEAF = 10;\nconst SKY = 11;\nconst BROWN = 12;\nconst PEARL = 13;\nconst KINDS = 14;\nconst BASE = [\n  [38, 62, 200],\n  [28, 44, 172],\n  [204, 160, 58],\n  [214, 50, 36],\n  [232, 232, 220],\n  [158, 170, 204],\n  [172, 70, 160],\n  [240, 188, 152],\n  [116, 66, 38],\n  [52, 166, 84],\n  [124, 190, 64],\n  [70, 112, 230],\n  [150, 92, 50],\n];\n// A flash off gold leaf is a pale gold, not white.\nconst FLASH = [255, 240, 186];\n// The gold work is set in cubes of 2 LEDs whatever the ground: the cross in\n// two columns, and each star as a cube with four cubes round it. Steps are\n// of 3 LEDs, a cube and its mortar.\nconst CROSS = [];\nfor (let by = -3; by \u003c= 3; by++) CROSS.push([-1, by], [0, by]);\nfor (const bx of [-3, -2, 1, 2]) CROSS.push([bx, -2], [bx, -1]);\nconst STAR = [\n  [0, 0],\n  [0, -1],\n  [0, 1],\n  [-1, 0],\n  [1, 0],\n];\nconst DOT = [[0, 0]];\n// The apostle, cube by cube: a gold halo, a white robe with purple stripes,\n// both forearms raised in prayer, sandals on the grass. Faces and haloes were\n// set in finer cubes than the ground in Ravenna too, so the figure keeps its\n// 2 LED cubes at every Tesserae setting.\nconst SPRITE = [\n  \"....GGGGG....\",\n  \".F.GGHHHGG.F.\",\n  \".F.GHFFFHG.F.\",\n  \".W.GGFFFGG.W.\",\n  \".W..GGHGG..W.\",\n  \".WWWWWWWWWWS.\",\n  \"...WPWWWPS...\",\n  \"...WPWWWPS...\",\n  \"...WPWWWPSS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWPWWWPWS..\",\n  \"..WWWWWWWWS..\",\n  \"....B...B....\",\n];\nconst LETTER = { G: GOLD, H: HAIR, F: FLESH, W: WHITE, S: GREY, P: PURPLE, B: BROWN };\nconst APOSTLE = [];\nSPRITE.forEach((row, by) => [...row].forEach((ch, bx) => ch !== \".\" && APOSTLE.push([bx, by, LETTER[ch]])));\n// Rings of stars round the cross: radius, count, turn, and whether each is\n// a full star or a single cube.\nconst STARS = [\n  [11.5, 6, 0.5, 0],\n  [19.5, 8, 0, 1],\n  [26.4, 16, 0.5, 0],\n];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction hash(a, b, s) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Cut a run of tesserae along u: each cut sits near a multiple of len,\n// moved by up to 0.8 LED, so the cubes come out 1 LED longer or shorter.\nfunction cut(u, len, row, s) {\n  const c = Math.floor(u / len);\n  if (u \u003c c * len + 1.6 * (hash(row, c, s) - 0.5)) return c - 1;\n  if (u >= (c + 1) * len + 1.6 * (hash(row, c + 1, s) - 0.5)) return c + 1;\n  return c;\n}\n\n// Straight courses laid across the wall, a little wavy, as a mosaicist sets\n// a plain ground.\nfunction course(x, y, p, s, region) {\n  const v = y + 0.45 * Math.sin(x * 0.21 + s);\n  const row = Math.floor(v / p);\n  return region * 1e6 + row * 1000 + cut(x + row * 1.7, p, row, s) + 300;\n}\n\n// What the design asks for under the courses.\nfunction paint(x, y) {\n  const dv = Math.hypot(x - VX, y - VY);\n  if (dv \u003c VR) return BLUE;\n  if (y \u003c FR0) return NAVY;\n  if (y \u003c FR1) return PEARL;\n  if (y >= GROUND) {\n    if (hash(Math.floor(x / 3), Math.floor(y / 3), 91) \u003c 0.12) return y \u003c GROUND + 4 ? RED : WHITE;\n    return y \u003c GROUND + 4 ? LEAF : GREEN;\n  }\n  return BLUE;\n}\n\n// The setting: which tessera a point belongs to.\nfunction layout(x, y, p, s) {\n  const dv = Math.hypot(x - VX, y - VY);\n  if (dv \u003c VR) return course(x, y, p, s, 1);\n  if (y \u003c FR0) return course(x, y, p, s + 1, 3);\n  if (y \u003c FR1) {\n    const row = y \u003c (FR0 + FR1) / 2 ? 0 : 1;\n    return 4e6 + row * 1000 + cut(x + 2 * row, 4, row + 70, s) + 300;\n  }\n  if (y >= GROUND) return course(x, y - GROUND, p, s + 2, 5);\n  return course(x, y, p, s + 7, 10);\n}\n\n// Lay a motif cube by cube over the ground: each cube is a 3 by 3 block, its\n// last row and column becoming mortar. A cube that would overlap one already\n// set is left out.\nfunction setMotif(key, set, x0, y0, cubes, tag) {\n  for (const [bx, by, kd] of cubes) {\n    const ax = x0 + 3 * bx;\n    const ay = y0 + 3 * by;\n    let free = ax >= 0 && ay >= 0 && ax + 3 \u003c= W && ay + 3 \u003c= H;\n    for (let y = ay; free && y \u003c ay + 3; y++) for (let x = ax; x \u003c ax + 3; x++) if (set[y * W + x] >= 0) free = false;\n    if (!free) continue;\n    for (let y = ay; y \u003c ay + 3; y++)\n      for (let x = ax; x \u003c ax + 3; x++) {\n        key[y * W + x] = 2e7 + tag * 1000 + (bx + 20) * 40 + by + 20;\n        set[y * W + x] = kd === undefined ? GOLD : kd;\n      }\n  }\n}\n\nfunction build(P, p) {\n  P.p = p;\n  const s = P.seed;\n  const key = new Float64Array(N);\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) key[y * W + x] = layout(x + 0.5, y + 0.5, p, s);\n  const set = new Int8Array(N).fill(-1);\n  setMotif(key, set, 13, 81, APOSTLE, 0);\n  setMotif(key, set, VX - 1, VY - 1, CROSS, 1);\n  let tag = 2;\n  for (const [rr, n, ph, big] of STARS)\n    for (let k = 0; k \u003c n; k++) {\n      const a = ((k + ph) / n) * TAU - Math.PI / 2;\n      setMotif(key, set, Math.round(VX + rr * Math.cos(a) - 1), Math.round(VY + rr * Math.sin(a) - 1), big ? STAR : DOT, tag++);\n    }\n  // The rim of the vault: a band of red, gold and white cubes.\n  const rim = [];\n  for (let k = 0; k \u003c 58; k++) {\n    const a = (k / 58) * TAU;\n    rim.push([Math.round(VX - 1 + 29.9 * Math.cos(a)), Math.round(VY - 1 + 29.9 * Math.sin(a)), [RED, GOLD, WHITE, GOLD][k % 4]]);\n  }\n  for (const [x, y, kd] of rim) setMotif(key, set, x, y, [[0, 0, kd]], tag++);\n  // Small stars in the niche round the apostle, and a flower in each spandrel.\n  for (const [sx, sy] of [\n    [4, 84],\n    [57, 84],\n    [4, 106],\n    [57, 106],\n  ])\n    setMotif(key, set, sx, sy, STAR, tag++);\n  setMotif(key, set, 3, 2, [[0, 0], [1, 0], [0, 1]], tag++);\n  setMotif(key, set, W - 6, 2, [[0, 0], [-1, 0], [0, 1]], tag++);\n  // Mortar runs along every join: the LED left of or above a join is mortar.\n  const ids = new Int32Array(N);\n  const index = new Map();\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      if ((x \u003c W - 1 && key[q + 1] !== key[q]) || (y \u003c H - 1 && key[q + W] !== key[q])) {\n        ids[q] = -1;\n        continue;\n      }\n      let id = index.get(key[q]);\n      if (id === undefined) {\n        id = index.size;\n        index.set(key[q], id);\n      }\n      ids[q] = id;\n    }\n  const n = index.size;\n  const cx = new Float32Array(n);\n  const cy = new Float32Array(n);\n  const count = new Float32Array(n);\n  const votes = new Float32Array(n * KINDS);\n  for (let q = 0; q \u003c N; q++) {\n    const id = ids[q];\n    if (id \u003c 0) continue;\n    const x = q % W;\n    const y = (q - x) / W;\n    cx[id] += x + 0.5;\n    cy[id] += y + 0.5;\n    count[id]++;\n    votes[id * KINDS + (set[q] >= 0 ? set[q] : paint(x + 0.5, y + 0.5))]++;\n  }\n  const kind = new Uint8Array(n);\n  const tint = new Float32Array(n * 3);\n  const tilt = new Float32Array(n * 2);\n  const rank = new Float32Array(n);\n  let alt = 0;\n  for (let i = 0; i \u003c n; i++) {\n    cx[i] /= count[i];\n    cy[i] /= count[i];\n    let best = 0;\n    for (let k = 1; k \u003c KINDS; k++) if (votes[i * KINDS + k] > votes[i * KINDS + best]) best = k;\n    const dv = Math.hypot(cx[i] - VX, cy[i] - VY);\n    // The frieze's upper course alternates red and white cube by cube.\n    if (best === PEARL) best = cy[i] \u003c (FR0 + FR1) / 2 ? (alt++ % 2 ? WHITE : RED) : GOLD;\n    // The vault's blue pales toward the cross: lighter cubes are mixed in.\n    else if (best === BLUE && dv \u003c VR && Math.random() \u003c 0.75 - dv / 30) best = SKY;\n    else if (best === BLUE && Math.random() \u003c 0.25) best = NAVY;\n    kind[i] = best;\n    // Every cube is its own pour of glass: a little lighter or darker,\n    // warmer or cooler than the next.\n    const v = 0.86 + 0.14 * Math.random();\n    for (let c = 0; c \u003c 3; c++) tint[i * 3 + c] = v * (0.9 + 0.2 * Math.random());\n    tilt[i * 2] = gauss() * 0.25;\n    tilt[i * 2 + 1] = gauss() * 0.25;\n    // As Gold turns up, gold ground takes the blue's place nearest the cross\n    // first, with a ragged edge.\n    rank[i] = 0.78 * clamp(Math.hypot(cx[i] - VX, (cy[i] - VY) * 0.8) / 90, 0, 1) + 0.22 * Math.random();\n  }\n  // Per LED the glass is uneven in its weaker colours, and the mortar is\n  // grainy.\n  const jit = new Int8Array(N * 3);\n  for (let q = 0; q \u003c N * 3; q++) jit[q] = Math.floor(Math.random() * 31) - 15;\n  const mortar = new Uint8Array(N * 3);\n  for (let q = 0; q \u003c N; q++) {\n    const lv = 5 + Math.floor(Math.random() * 7);\n    const m = Math.floor(Math.random() * 3);\n    for (let c = 0; c \u003c 3; c++) mortar[q * 3 + c] = c === m ? lv : Math.floor(Math.random() * (lv + 1));\n  }\n  Object.assign(P, { ids, n, cx, cy, kind, tint, tilt, rank, jit, mortar, col: new Float32Array(n * 3), top: new Uint8Array(n) });\n}\n\nfunction gauss() {\n  return (Math.random() + Math.random() + Math.random() - 1.5) * 2;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.seed = Math.floor(Math.random() * 1e6);\n  P.t = 0;\n  P.p = 0;\n  P.started = false;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 2, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.warm = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const p = Math.round(clamp(k[2], 2, 4)) + 1;\n  P.gold = clamp((k[3] - 0.06) / 0.94, 0, 1);\n  if (p !== P.p) build(P, p);\n  if (!P.started) {\n    P.started = true;\n    P.t = 3 + 6 * speed;\n  }\n  P.t += dt * speed;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.p) return;\n  const t = P.t;\n  // The lamp wanders the wall on a slow figure, a little in front of it, and\n  // its flame breathes.\n  const lx = 32 + 30 * Math.sin(0.5 * t);\n  const ly = 70 + 52 * Math.sin(0.29 * t - 0.93);\n  const flame = 1 + 0.05 * Math.sin(t * 7.3) + 0.04 * Math.sin(t * 11.9 + 1);\n  const warm = P.warm;\n  const R = 25 - 9 * warm;\n  const amb = 0.45 - 0.17 * warm;\n  const lc = [1, 0.95 - 0.25 * warm, 0.88 - 0.5 * warm];\n  const D2 = 2 * 34;\n  const { n, cx, cy, kind, tint, tilt, rank, col, top } = P;\n  const gold = P.gold * 1.08;\n  for (let i = 0; i \u003c n; i++) {\n    let kd = kind[i];\n    if ((kd === BLUE || kd === NAVY || kd === SKY) && rank[i] \u003c gold) kd = GOLD;\n    const dx = lx - cx[i];\n    const dy = ly - cy[i];\n    const pool = Math.exp(-(dx * dx + dy * dy) / (2 * R * R));\n    const lit = amb + pool * flame;\n    // A cube flashes when its tilt sends the lamp straight back at you.\n    const gx = tilt[i * 2] - dx / D2;\n    const gy = tilt[i * 2 + 1] - dy / D2;\n    const flash = Math.exp(-(gx * gx + gy * gy) / 0.035);\n    const shine = kd === GOLD ? 1 : 0.18;\n    const b = BASE[kd];\n    let mx = 0;\n    for (let c = 0; c \u003c 3; c++) {\n      const v = b[c] * tint[i * 3 + c] * lc[c] * lit * (kd === GOLD ? 1.1 : 1);\n      const w = clamp(v + shine * flash * (FLASH[c] * lc[c] - v), 0, 255);\n      col[i * 3 + c] = w;\n      if (w > col[i * 3 + mx]) mx = c;\n    }\n    // Even in the dark a cube stands clear of its mortar.\n    const hi = col[i * 3 + mx];\n    if (hi \u003c 58) for (let c = 0; c \u003c 3; c++) col[i * 3 + c] *= 58 / Math.max(1, hi);\n    top[i] = mx;\n  }\n  const { ids, jit, mortar } = P;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const id = ids[q];\n      if (id \u003c 0) {\n        display.setPixel(x, y, mortar[q * 3], mortar[q * 3 + 1], mortar[q * 3 + 2]);\n        continue;\n      }\n      const m = top[id];\n      const hi = col[id * 3 + m];\n      let r = col[id * 3] + jit[q * 3];\n      let g = col[id * 3 + 1] + jit[q * 3 + 1];\n      let b = col[id * 3 + 2] + jit[q * 3 + 2];\n      r = m === 0 ? hi : clamp(r, 0, hi);\n      g = m === 1 ? hi : clamp(g, 0, hi);\n      b = m === 2 ? hi : clamp(b, 0, hi);\n      display.setPixel(x, y, Math.round(r), Math.round(g), Math.round(b));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Tesserae=2..4, Gold=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"The colour of the lamp, from a pale white flame at 0 to a small amber oil flame at 1 that throws a smaller pool and leaves the rest of the chapel dim."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the lamp is carried about: at 2 it crosses the wall in about six seconds and climbs from the apostle's feet to the cross in about seven."},{"name":"Tesserae","min":2,"max":4,"about":"How big the cubes of the blue ground and the grass are, from 2 LEDs across to 4; the gold work and the apostle keep their fine cubes."},{"name":"Gold","min":0,"max":1,"about":"At 0.06 only the stars, the cross, the rim and the halo are gold; turned up, a gold ground spreads out from the cross, over the whole vault by 0.5 and down the whole wall by 1."}],"start":[0,2,2,0.06],"measures":{"motion":0.0438,"detail":0.2001,"edges":1,"complexity":2.3202,"coverage":0.4186,"colour":0.2372,"drift":0.1208},"knobResponse":[0.0652,0.0785,0.082,0.0729]},{"slug":"sorting","title":"Sorting","family":"algo","round":2,"note":"막대 64개를 알고리즘 하나가 한 번에 한 동작씩 줄 세워요. 비교하는 막대는 희게, 바꾸는 막대는 붉게 켜지고, 다 서면 위에서 아래로 훑어 확인한 뒤 다시 섞어요.","idea":"Sixty-four bars are put in order by an algorithm you can watch compare and swap them one operation at a time, then a sweep checks the order and they are thrown back into a heap.","buttons":"K1 tap throws the bars back into a heap.","code":"// ===== Patternflow pattern =====\n// Title:   Sorting\n// Family:  algo\n// Idea:    Sixty-four bars are put in order by an algorithm you can watch compare and swap them one operation at a time, then a sweep checks the order and they are thrown back into a heap.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..5, Algorithm=0..7, Rows=2..8\n//\n// Knob 1: Hue. Turns the bars, which run from the shortest to the longest across a third of the colour wheel.\n// Knob 2: Speed. Operations per second with 64 bars, from 50 to about 5400, and a quarter of that with 16; a compare, a swap and a write each count as one.\n// Knob 3: Algorithm. 0 bubble, 1 insertion, 2 selection, 3 shell, 4 quick, 5 merge, 6 heap, 7 radix; turned mid-sort, the new one takes the bars as they stand.\n// Knob 4: Rows. How many LED rows each bar takes: 2 gives 64 bars, 8 gives 16 with a dark row between them.\n// Buttons: K1 tap throws the bars back into a heap.\n\nconst W = 64;\nconst H = 128;\nconst MAXN = 64;\n// The worst case is bubble or insertion sort on 64 bars in reverse: 2016\n// compares and 2016 swaps.\nconst OPS = 8192;\nconst COMPARE = 0;\nconst SWAP = 1;\nconst WRITE = 2;\n\nconst SORT = 0;\nconst SWEEP = 1;\nconst HOLD = 2;\nconst SHUFFLE = 3;\n\n// Gaps for shell sort, Ciura's sequence cut to what 64 bars can use.\nconst GAPS = [57, 23, 10, 4, 1];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = 255 * (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v);\n  out[o + 1] = 255 * (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p);\n  out[o + 2] = 255 * (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q);\n}\n\nexport function setup(params) {\n  // The bars on screen, and the copy an algorithm runs on ahead of them.\n  params.arr = new Int16Array(MAXN);\n  params.work = new Int16Array(MAXN);\n  params.aux = new Int16Array(MAXN);\n  params.bucket = new Int16Array(4);\n  params.ops = new Int32Array(OPS);\n  params.opN = 0;\n  params.opAt = 0;\n  params.heatC = new Float32Array(MAXN);\n  params.heatS = new Float32Array(MAXN);\n  params.glow = new Float32Array(MAXN);\n  params.len = new Uint8Array(MAXN);\n  params.col = new Float32Array(MAXN * 3);\n  params.done = new Float32Array(MAXN * 3);\n  params.accent = new Float32Array(3);\n  params.n = 0;\n  params.rows = 2;\n  params.algo = 0;\n  params.phase = SORT;\n  params.t = 0;\n  params.budget = 0;\n  params.hueKey = -1;\n}\n\n// The algorithms run on params.work in one go and leave their operations in\n// params.ops, which update then plays back at the speed the knob asks for.\nfunction cmp(P, i, j) {\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n  return P.work[i] - P.work[j];\n}\n\nfunction swp(P, i, j) {\n  const a = P.work;\n  const t = a[i];\n  a[i] = a[j];\n  a[j] = t;\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (SWAP \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n}\n\nfunction put(P, i, v) {\n  P.work[i] = v;\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (WRITE \u003c\u003c 16) | (i \u003c\u003c 8) | v;\n}\n\nfunction bubble(P, n) {\n  for (let end = n - 1; end > 0; end--) {\n    let swapped = false;\n    for (let j = 0; j \u003c end; j++) {\n      if (cmp(P, j, j + 1) > 0) {\n        swp(P, j, j + 1);\n        swapped = true;\n      }\n    }\n    if (!swapped) return;\n  }\n}\n\nfunction insertion(P, n, gap) {\n  for (let i = gap; i \u003c n; i++) {\n    for (let j = i; j >= gap && cmp(P, j - gap, j) > 0; j -= gap) swp(P, j - gap, j);\n  }\n}\n\nfunction selection(P, n) {\n  for (let i = 0; i \u003c n - 1; i++) {\n    let m = i;\n    for (let j = i + 1; j \u003c n; j++) if (cmp(P, j, m) \u003c 0) m = j;\n    if (m !== i) swp(P, i, m);\n  }\n}\n\nfunction quick(P, lo, hi) {\n  if (lo >= hi) return;\n  // The middle bar is the pivot, parked at the end while the range is split,\n  // so a range that is already in order does not take n squared compares.\n  swp(P, (lo + hi) >> 1, hi);\n  let s = lo;\n  for (let j = lo; j \u003c hi; j++) {\n    if (cmp(P, j, hi) \u003c 0) {\n      if (j !== s) swp(P, s, j);\n      s++;\n    }\n  }\n  if (s !== hi) swp(P, s, hi);\n  quick(P, lo, s - 1);\n  quick(P, s + 1, hi);\n}\n\nfunction merge(P, lo, hi) {\n  if (hi - lo \u003c 2) return;\n  const mid = (lo + hi) >> 1;\n  merge(P, lo, mid);\n  merge(P, mid, hi);\n  const a = P.work;\n  const aux = P.aux;\n  for (let i = lo; i \u003c hi; i++) aux[i] = a[i];\n  let i = lo;\n  let j = mid;\n  for (let k = lo; k \u003c hi; k++) {\n    // The compare lights where the two runs were read from; the write lands\n    // on the bar being rebuilt.\n    if (i \u003c mid && j \u003c hi) {\n      if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n      if (aux[i] \u003c= aux[j]) put(P, k, aux[i++]);\n      else put(P, k, aux[j++]);\n    } else if (i \u003c mid) put(P, k, aux[i++]);\n    else put(P, k, aux[j++]);\n  }\n}\n\nfunction sift(P, start, end) {\n  let root = start;\n  for (;;) {\n    let child = root * 2 + 1;\n    if (child > end) return;\n    if (child + 1 \u003c= end && cmp(P, child, child + 1) \u003c 0) child++;\n    if (cmp(P, root, child) \u003c 0) {\n      swp(P, root, child);\n      root = child;\n    } else return;\n  }\n}\n\nfunction heap(P, n) {\n  for (let s = (n >> 1) - 1; s >= 0; s--) sift(P, s, n - 1);\n  for (let end = n - 1; end > 0; end--) {\n    swp(P, 0, end);\n    sift(P, 0, end - 1);\n  }\n}\n\n// Least significant digit first, in base 4: each pass reads every bar once to\n// count its digit, then writes them all back grouped by it.\nfunction radix(P, n) {\n  const a = P.work;\n  const aux = P.aux;\n  const b = P.bucket;\n  for (let shift = 0; 1 \u003c\u003c shift \u003c n; shift += 2) {\n    b.fill(0);\n    for (let i = 0; i \u003c n; i++) {\n      if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | i;\n      b[(a[i] >> shift) & 3]++;\n      aux[i] = a[i];\n    }\n    let sum = 0;\n    for (let d = 0; d \u003c 4; d++) {\n      const c = b[d];\n      b[d] = sum;\n      sum += c;\n    }\n    // The bars go back in order of their old places, so the pass is stable.\n    // Writing them by the place they land on makes the pass run top to bottom.\n    for (let i = 0; i \u003c n; i++) a[b[(aux[i] >> shift) & 3]++] = aux[i];\n    for (let i = 0; i \u003c n; i++) put(P, i, a[i]);\n  }\n}\n\nfunction startSort(P, algo) {\n  const n = P.n;\n  P.work.set(P.arr);\n  P.opN = 0;\n  P.opAt = 0;\n  P.algo = algo;\n  if (algo === 0) bubble(P, n);\n  else if (algo === 1) insertion(P, n, 1);\n  else if (algo === 2) selection(P, n);\n  else if (algo === 3) {\n    for (let g = 0; g \u003c GAPS.length; g++) if (GAPS[g] \u003c n) insertion(P, n, GAPS[g]);\n  } else if (algo === 4) quick(P, 0, n - 1);\n  else if (algo === 5) merge(P, 0, n);\n  else if (algo === 6) heap(P, n);\n  else radix(P, n);\n  P.phase = SORT;\n}\n\nfunction startShuffle(P) {\n  const n = P.n;\n  P.work.set(P.arr);\n  P.opN = 0;\n  P.opAt = 0;\n  // Fisher and Yates, top to bottom, played back as swaps.\n  for (let i = 0; i \u003c n - 1; i++) swp(P, i, i + Math.floor(Math.random() * (n - i)));\n  P.phase = SHUFFLE;\n}\n\nfunction play(P, op) {\n  const type = op >> 16;\n  const i = (op >> 8) & 255;\n  const j = op & 255;\n  if (type === COMPARE) {\n    P.heatC[i] = 1;\n    P.heatC[j] = 1;\n  } else if (type === SWAP) {\n    const t = P.arr[i];\n    P.arr[i] = P.arr[j];\n    P.arr[j] = t;\n    P.heatS[i] = 1;\n    P.heatS[j] = 1;\n  } else {\n    P.arr[i] = j;\n    P.heatS[i] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 2];\n  const rows = Math.max(2, Math.min(8, Math.round(k[3])));\n  const algo = Math.max(0, Math.min(7, Math.round(k[2])));\n  const ops = 50 * Math.pow(2, 1.35 * k[1]);\n  // Fewer bars go slower in step, so a chunky bar can be followed by eye and\n  // sixteen of them do not spend most of their time sorted.\n  const rate = ops * (Math.floor(H / rows) / MAXN);\n  // At the fast end the check, the pause and the shuffle shorten too.\n  const pace = Math.max(0.45, Math.min(1, Math.pow(320 / ops, 0.4)));\n\n  if (rows !== P.rows || P.n === 0) {\n    P.rows = rows;\n    P.n = Math.floor(H / rows);\n    const n = P.n;\n    for (let v = 0; v \u003c n; v++) P.len[v] = Math.max(1, Math.round(((v + 1) * W) / n));\n    for (let i = 0; i \u003c n; i++) P.arr[i] = i;\n    for (let i = n - 1; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.arr[i];\n      P.arr[i] = P.arr[j];\n      P.arr[j] = t;\n    }\n    P.heatC.fill(0);\n    P.heatS.fill(0);\n    P.glow.fill(0);\n    P.hueKey = -1;\n    startSort(P, algo);\n  } else if (algo !== P.algo) {\n    if (P.phase === SORT) startSort(P, algo);\n    else P.algo = algo;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startShuffle(P);\n\n  const n = P.n;\n  // A lit bar fades over about the last ten operations with 64 bars and the\n  // last three with 16, so a slow sort shows each step and a fast one a tail.\n  const life = Math.max(0.035, Math.min(0.2, 11 / ops));\n  const fadeC = Math.exp(-dt / (life * 0.7));\n  const fadeS = Math.exp(-dt / life);\n  for (let i = 0; i \u003c n; i++) {\n    P.heatC[i] *= fadeC;\n    P.heatS[i] *= fadeS;\n  }\n\n  if (P.phase === SORT || P.phase === SHUFFLE) {\n    // The heap is thrown in about two thirds of a second, less at the fast end.\n    P.budget += dt * (P.phase === SORT ? rate : n / (0.65 * pace));\n    while (P.budget >= 1 && P.opAt \u003c P.opN) {\n      play(P, P.ops[P.opAt++]);\n      P.budget -= 1;\n    }\n    if (P.phase === SHUFFLE) for (let i = 0; i \u003c n; i++) P.glow[i] = Math.max(0, P.glow[i] - dt * 4);\n    if (P.opAt >= P.opN) {\n      P.budget = 0;\n      if (P.phase === SORT) {\n        P.phase = SWEEP;\n        P.t = 0;\n      } else startSort(P, P.algo);\n    }\n  } else if (P.phase === SWEEP) {\n    // The check runs down the bars in 0.8 s and leaves them lit behind it.\n    P.t += dt;\n    const s = Math.min(n, (P.t / (0.8 * pace)) * n);\n    for (let i = 0; i \u003c s; i++) P.glow[i] = 1;\n    if (s \u003c n) P.heatC[Math.floor(s)] = 1;\n    else {\n      P.phase = HOLD;\n      P.t = 0;\n    }\n  } else {\n    P.t += dt;\n    if (P.t > 0.9 * pace) startShuffle(P);\n  }\n\n  // Colours change only with the hue knob or the number of bars. K1 at 0\n  // opens on cyan running to violet.\n  const hue = k[0] + 0.45;\n  if (hue !== P.hueKey) {\n    P.hueKey = hue;\n    for (let v = 0; v \u003c n; v++) {\n      const h = hue + (0.33 * v) / Math.max(1, n - 1);\n      hsvInto(P.col, v * 3, h, 0.82, 0.62);\n      hsvInto(P.done, v * 3, h, 0.5, 0.82);\n    }\n    hsvInto(P.accent, 0, hue + 0.58, 0.95, 1);\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const n = P.n;\n  const rows = P.rows;\n  // Bars thicker than two rows keep a dark row under them so they stay apart.\n  const thick = rows > 2 ? rows - 1 : rows;\n  const top = (H - n * rows) >> 1;\n  const col = P.col;\n  const done = P.done;\n  const ac = P.accent;\n  for (let y = 0; y \u003c H; y++) {\n    const off = y - top;\n    const i = Math.floor(off / rows);\n    if (off \u003c 0 || i >= n || off - i * rows >= thick) {\n      for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    const v = P.arr[i];\n    const g = P.glow[i];\n    const hc = P.heatC[i];\n    const hs = P.heatS[i];\n    let r = col[v * 3] + (done[v * 3] - col[v * 3]) * g;\n    let gr = col[v * 3 + 1] + (done[v * 3 + 1] - col[v * 3 + 1]) * g;\n    let b = col[v * 3 + 2] + (done[v * 3 + 2] - col[v * 3 + 2]) * g;\n    r += (225 - r) * hc;\n    gr += (225 - gr) * hc;\n    b += (225 - b) * hc;\n    r += (ac[0] - r) * hs;\n    gr += (ac[1] - gr) * hs;\n    b += (ac[2] - b) * hs;\n    const L = P.len[v];\n    for (let x = 0; x \u003c W; x++) {\n      if (x \u003c L) display.setPixel(x, y, r, gr, b);\n      else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","layer":{"id":"layer-sorting","type":"code","name":"sorting","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sorting\n// Family:  algo\n// Idea:    Sixty-four bars are put in order by an algorithm you can watch compare and swap them one operation at a time, then a sweep checks the order and they are thrown back into a heap.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0..5, Algorithm=0..7, Rows=2..8\n//\n// Knob 1: Hue. Turns the bars, which run from the shortest to the longest across a third of the colour wheel.\n// Knob 2: Speed. Operations per second with 64 bars, from 50 to about 5400, and a quarter of that with 16; a compare, a swap and a write each count as one.\n// Knob 3: Algorithm. 0 bubble, 1 insertion, 2 selection, 3 shell, 4 quick, 5 merge, 6 heap, 7 radix; turned mid-sort, the new one takes the bars as they stand.\n// Knob 4: Rows. How many LED rows each bar takes: 2 gives 64 bars, 8 gives 16 with a dark row between them.\n// Buttons: K1 tap throws the bars back into a heap.\n\nconst W = 64;\nconst H = 128;\nconst MAXN = 64;\n// The worst case is bubble or insertion sort on 64 bars in reverse: 2016\n// compares and 2016 swaps.\nconst OPS = 8192;\nconst COMPARE = 0;\nconst SWAP = 1;\nconst WRITE = 2;\n\nconst SORT = 0;\nconst SWEEP = 1;\nconst HOLD = 2;\nconst SHUFFLE = 3;\n\n// Gaps for shell sort, Ciura's sequence cut to what 64 bars can use.\nconst GAPS = [57, 23, 10, 4, 1];\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = 255 * (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v);\n  out[o + 1] = 255 * (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p);\n  out[o + 2] = 255 * (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q);\n}\n\nexport function setup(params) {\n  // The bars on screen, and the copy an algorithm runs on ahead of them.\n  params.arr = new Int16Array(MAXN);\n  params.work = new Int16Array(MAXN);\n  params.aux = new Int16Array(MAXN);\n  params.bucket = new Int16Array(4);\n  params.ops = new Int32Array(OPS);\n  params.opN = 0;\n  params.opAt = 0;\n  params.heatC = new Float32Array(MAXN);\n  params.heatS = new Float32Array(MAXN);\n  params.glow = new Float32Array(MAXN);\n  params.len = new Uint8Array(MAXN);\n  params.col = new Float32Array(MAXN * 3);\n  params.done = new Float32Array(MAXN * 3);\n  params.accent = new Float32Array(3);\n  params.n = 0;\n  params.rows = 2;\n  params.algo = 0;\n  params.phase = SORT;\n  params.t = 0;\n  params.budget = 0;\n  params.hueKey = -1;\n}\n\n// The algorithms run on params.work in one go and leave their operations in\n// params.ops, which update then plays back at the speed the knob asks for.\nfunction cmp(P, i, j) {\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n  return P.work[i] - P.work[j];\n}\n\nfunction swp(P, i, j) {\n  const a = P.work;\n  const t = a[i];\n  a[i] = a[j];\n  a[j] = t;\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (SWAP \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n}\n\nfunction put(P, i, v) {\n  P.work[i] = v;\n  if (P.opN \u003c OPS) P.ops[P.opN++] = (WRITE \u003c\u003c 16) | (i \u003c\u003c 8) | v;\n}\n\nfunction bubble(P, n) {\n  for (let end = n - 1; end > 0; end--) {\n    let swapped = false;\n    for (let j = 0; j \u003c end; j++) {\n      if (cmp(P, j, j + 1) > 0) {\n        swp(P, j, j + 1);\n        swapped = true;\n      }\n    }\n    if (!swapped) return;\n  }\n}\n\nfunction insertion(P, n, gap) {\n  for (let i = gap; i \u003c n; i++) {\n    for (let j = i; j >= gap && cmp(P, j - gap, j) > 0; j -= gap) swp(P, j - gap, j);\n  }\n}\n\nfunction selection(P, n) {\n  for (let i = 0; i \u003c n - 1; i++) {\n    let m = i;\n    for (let j = i + 1; j \u003c n; j++) if (cmp(P, j, m) \u003c 0) m = j;\n    if (m !== i) swp(P, i, m);\n  }\n}\n\nfunction quick(P, lo, hi) {\n  if (lo >= hi) return;\n  // The middle bar is the pivot, parked at the end while the range is split,\n  // so a range that is already in order does not take n squared compares.\n  swp(P, (lo + hi) >> 1, hi);\n  let s = lo;\n  for (let j = lo; j \u003c hi; j++) {\n    if (cmp(P, j, hi) \u003c 0) {\n      if (j !== s) swp(P, s, j);\n      s++;\n    }\n  }\n  if (s !== hi) swp(P, s, hi);\n  quick(P, lo, s - 1);\n  quick(P, s + 1, hi);\n}\n\nfunction merge(P, lo, hi) {\n  if (hi - lo \u003c 2) return;\n  const mid = (lo + hi) >> 1;\n  merge(P, lo, mid);\n  merge(P, mid, hi);\n  const a = P.work;\n  const aux = P.aux;\n  for (let i = lo; i \u003c hi; i++) aux[i] = a[i];\n  let i = lo;\n  let j = mid;\n  for (let k = lo; k \u003c hi; k++) {\n    // The compare lights where the two runs were read from; the write lands\n    // on the bar being rebuilt.\n    if (i \u003c mid && j \u003c hi) {\n      if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | j;\n      if (aux[i] \u003c= aux[j]) put(P, k, aux[i++]);\n      else put(P, k, aux[j++]);\n    } else if (i \u003c mid) put(P, k, aux[i++]);\n    else put(P, k, aux[j++]);\n  }\n}\n\nfunction sift(P, start, end) {\n  let root = start;\n  for (;;) {\n    let child = root * 2 + 1;\n    if (child > end) return;\n    if (child + 1 \u003c= end && cmp(P, child, child + 1) \u003c 0) child++;\n    if (cmp(P, root, child) \u003c 0) {\n      swp(P, root, child);\n      root = child;\n    } else return;\n  }\n}\n\nfunction heap(P, n) {\n  for (let s = (n >> 1) - 1; s >= 0; s--) sift(P, s, n - 1);\n  for (let end = n - 1; end > 0; end--) {\n    swp(P, 0, end);\n    sift(P, 0, end - 1);\n  }\n}\n\n// Least significant digit first, in base 4: each pass reads every bar once to\n// count its digit, then writes them all back grouped by it.\nfunction radix(P, n) {\n  const a = P.work;\n  const aux = P.aux;\n  const b = P.bucket;\n  for (let shift = 0; 1 \u003c\u003c shift \u003c n; shift += 2) {\n    b.fill(0);\n    for (let i = 0; i \u003c n; i++) {\n      if (P.opN \u003c OPS) P.ops[P.opN++] = (COMPARE \u003c\u003c 16) | (i \u003c\u003c 8) | i;\n      b[(a[i] >> shift) & 3]++;\n      aux[i] = a[i];\n    }\n    let sum = 0;\n    for (let d = 0; d \u003c 4; d++) {\n      const c = b[d];\n      b[d] = sum;\n      sum += c;\n    }\n    // The bars go back in order of their old places, so the pass is stable.\n    // Writing them by the place they land on makes the pass run top to bottom.\n    for (let i = 0; i \u003c n; i++) a[b[(aux[i] >> shift) & 3]++] = aux[i];\n    for (let i = 0; i \u003c n; i++) put(P, i, a[i]);\n  }\n}\n\nfunction startSort(P, algo) {\n  const n = P.n;\n  P.work.set(P.arr);\n  P.opN = 0;\n  P.opAt = 0;\n  P.algo = algo;\n  if (algo === 0) bubble(P, n);\n  else if (algo === 1) insertion(P, n, 1);\n  else if (algo === 2) selection(P, n);\n  else if (algo === 3) {\n    for (let g = 0; g \u003c GAPS.length; g++) if (GAPS[g] \u003c n) insertion(P, n, GAPS[g]);\n  } else if (algo === 4) quick(P, 0, n - 1);\n  else if (algo === 5) merge(P, 0, n);\n  else if (algo === 6) heap(P, n);\n  else radix(P, n);\n  P.phase = SORT;\n}\n\nfunction startShuffle(P) {\n  const n = P.n;\n  P.work.set(P.arr);\n  P.opN = 0;\n  P.opAt = 0;\n  // Fisher and Yates, top to bottom, played back as swaps.\n  for (let i = 0; i \u003c n - 1; i++) swp(P, i, i + Math.floor(Math.random() * (n - i)));\n  P.phase = SHUFFLE;\n}\n\nfunction play(P, op) {\n  const type = op >> 16;\n  const i = (op >> 8) & 255;\n  const j = op & 255;\n  if (type === COMPARE) {\n    P.heatC[i] = 1;\n    P.heatC[j] = 1;\n  } else if (type === SWAP) {\n    const t = P.arr[i];\n    P.arr[i] = P.arr[j];\n    P.arr[j] = t;\n    P.heatS[i] = 1;\n    P.heatS[j] = 1;\n  } else {\n    P.arr[i] = j;\n    P.heatS[i] = 1;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 2];\n  const rows = Math.max(2, Math.min(8, Math.round(k[3])));\n  const algo = Math.max(0, Math.min(7, Math.round(k[2])));\n  const ops = 50 * Math.pow(2, 1.35 * k[1]);\n  // Fewer bars go slower in step, so a chunky bar can be followed by eye and\n  // sixteen of them do not spend most of their time sorted.\n  const rate = ops * (Math.floor(H / rows) / MAXN);\n  // At the fast end the check, the pause and the shuffle shorten too.\n  const pace = Math.max(0.45, Math.min(1, Math.pow(320 / ops, 0.4)));\n\n  if (rows !== P.rows || P.n === 0) {\n    P.rows = rows;\n    P.n = Math.floor(H / rows);\n    const n = P.n;\n    for (let v = 0; v \u003c n; v++) P.len[v] = Math.max(1, Math.round(((v + 1) * W) / n));\n    for (let i = 0; i \u003c n; i++) P.arr[i] = i;\n    for (let i = n - 1; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.arr[i];\n      P.arr[i] = P.arr[j];\n      P.arr[j] = t;\n    }\n    P.heatC.fill(0);\n    P.heatS.fill(0);\n    P.glow.fill(0);\n    P.hueKey = -1;\n    startSort(P, algo);\n  } else if (algo !== P.algo) {\n    if (P.phase === SORT) startSort(P, algo);\n    else P.algo = algo;\n  }\n  if (input.btnPressed && input.btnPressed[0]) startShuffle(P);\n\n  const n = P.n;\n  // A lit bar fades over about the last ten operations with 64 bars and the\n  // last three with 16, so a slow sort shows each step and a fast one a tail.\n  const life = Math.max(0.035, Math.min(0.2, 11 / ops));\n  const fadeC = Math.exp(-dt / (life * 0.7));\n  const fadeS = Math.exp(-dt / life);\n  for (let i = 0; i \u003c n; i++) {\n    P.heatC[i] *= fadeC;\n    P.heatS[i] *= fadeS;\n  }\n\n  if (P.phase === SORT || P.phase === SHUFFLE) {\n    // The heap is thrown in about two thirds of a second, less at the fast end.\n    P.budget += dt * (P.phase === SORT ? rate : n / (0.65 * pace));\n    while (P.budget >= 1 && P.opAt \u003c P.opN) {\n      play(P, P.ops[P.opAt++]);\n      P.budget -= 1;\n    }\n    if (P.phase === SHUFFLE) for (let i = 0; i \u003c n; i++) P.glow[i] = Math.max(0, P.glow[i] - dt * 4);\n    if (P.opAt >= P.opN) {\n      P.budget = 0;\n      if (P.phase === SORT) {\n        P.phase = SWEEP;\n        P.t = 0;\n      } else startSort(P, P.algo);\n    }\n  } else if (P.phase === SWEEP) {\n    // The check runs down the bars in 0.8 s and leaves them lit behind it.\n    P.t += dt;\n    const s = Math.min(n, (P.t / (0.8 * pace)) * n);\n    for (let i = 0; i \u003c s; i++) P.glow[i] = 1;\n    if (s \u003c n) P.heatC[Math.floor(s)] = 1;\n    else {\n      P.phase = HOLD;\n      P.t = 0;\n    }\n  } else {\n    P.t += dt;\n    if (P.t > 0.9 * pace) startShuffle(P);\n  }\n\n  // Colours change only with the hue knob or the number of bars. K1 at 0\n  // opens on cyan running to violet.\n  const hue = k[0] + 0.45;\n  if (hue !== P.hueKey) {\n    P.hueKey = hue;\n    for (let v = 0; v \u003c n; v++) {\n      const h = hue + (0.33 * v) / Math.max(1, n - 1);\n      hsvInto(P.col, v * 3, h, 0.82, 0.62);\n      hsvInto(P.done, v * 3, h, 0.5, 0.82);\n    }\n    hsvInto(P.accent, 0, hue + 0.58, 0.95, 1);\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  const n = P.n;\n  const rows = P.rows;\n  // Bars thicker than two rows keep a dark row under them so they stay apart.\n  const thick = rows > 2 ? rows - 1 : rows;\n  const top = (H - n * rows) >> 1;\n  const col = P.col;\n  const done = P.done;\n  const ac = P.accent;\n  for (let y = 0; y \u003c H; y++) {\n    const off = y - top;\n    const i = Math.floor(off / rows);\n    if (off \u003c 0 || i >= n || off - i * rows >= thick) {\n      for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n      continue;\n    }\n    const v = P.arr[i];\n    const g = P.glow[i];\n    const hc = P.heatC[i];\n    const hs = P.heatS[i];\n    let r = col[v * 3] + (done[v * 3] - col[v * 3]) * g;\n    let gr = col[v * 3 + 1] + (done[v * 3 + 1] - col[v * 3 + 1]) * g;\n    let b = col[v * 3 + 2] + (done[v * 3 + 2] - col[v * 3 + 2]) * g;\n    r += (225 - r) * hc;\n    gr += (225 - gr) * hc;\n    b += (225 - b) * hc;\n    r += (ac[0] - r) * hs;\n    gr += (ac[1] - gr) * hs;\n    b += (ac[2] - b) * hs;\n    const L = P.len[v];\n    for (let x = 0; x \u003c W; x++) {\n      if (x \u003c L) display.setPixel(x, y, r, gr, b);\n      else display.setPixel(x, y, 0, 0, 0);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0..5, Algorithm=0..7, Rows=2..8","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the bars, which run from the shortest to the longest across a third of the colour wheel."},{"name":"Speed","min":0,"max":5,"about":"Operations per second with 64 bars, from 50 to about 5400, and a quarter of that with 16; a compare, a swap and a write each count as one."},{"name":"Algorithm","min":0,"max":7,"about":"0 bubble, 1 insertion, 2 selection, 3 shell, 4 quick, 5 merge, 6 heap, 7 radix; turned mid-sort, the new one takes the bars as they stand."},{"name":"Rows","min":2,"max":8,"about":"How many LED rows each bar takes: 2 gives 64 bars, 8 gives 16 with a dark row between them."}],"start":[0,2,0,2],"measures":{"motion":1.5282,"detail":0.0322,"edges":0.8211,"complexity":0.0601,"coverage":0.5078,"colour":0.3589,"drift":0.1727},"knobResponse":[0.2105,0.2338,0.2297,0.1743]},{"slug":"sparks","title":"Sparks","family":"particle","round":1,"note":"불꽃마다 흰빛에서 식어 가는 색이 제 나이를 보여 줘요. 꽃불 세 가지가 느슨한 박자로 터져요.","idea":"Each spark's colour is a clock counting down from white heat, so a whole shell shows its own age at a glance.","buttons":"K1 tap fires a shell straight away.","code":"// ===== Patternflow pattern =====\n// Title:   Sparks\n// Family:  particle\n// Idea:    Each spark's colour is a clock counting down from white heat, so a whole shell shows its own age at a glance.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Spread=0..1, Rate=0.6..5, Gravity=-1..1, Trail=0.3..1.8\n//\n// Knob 1: Spread. At 0 every shell is the same colour, slowly turning over the minutes; higher spreads the shells round the wheel, and past halfway each shell carries a second colour.\n// Knob 2: Rate. How often a rocket goes up; the beat stays loose, with doubles and the odd rest.\n// Knob 3: Gravity. At 0 the sparks hang where the drag stops them; above 0 they droop like willows, below 0 they rise like embers.\n// Knob 4: Trail. Seconds a spark's streak takes to fade.\n// Buttons: K1 tap fires a shell straight away.\n\nconst W = 64;\nconst H = 128;\nconst P = 900;\nconst R = 8;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\n// A cheap repeatable 0..1 from two integers, for the glitter.\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction splat(buf, x, y, c) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = 1 - (dx * dx + dy * dy) / 1.44;\n      if (w \u003c= 0) continue;\n      const i = (yy * W + xx) * 3;\n      // The brighter spark takes the LED whole, so a fading white flash never greys a coloured one.\n      if ((c[0] + c[1] + c[2]) * w > buf[i] + buf[i + 1] + buf[i + 2]) {\n        buf[i] = c[0] * w;\n        buf[i + 1] = c[1] * w;\n        buf[i + 2] = c[2] * w;\n      }\n    }\n  }\n}\n\nfunction line(buf, x0, y0, x1, y1, c) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const m = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.6));\n  for (let j = 1; j \u003c= m; j++) splat(buf, x0 + (dx * j) / m, y0 + (dy * j) / m, c);\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(P);\n  params.y = new Float32Array(P);\n  params.vx = new Float32Array(P);\n  params.vy = new Float32Array(P);\n  params.age = new Float32Array(P);\n  params.life = new Float32Array(P);\n  params.hue = new Float32Array(P);\n  params.drag = new Float32Array(P);\n  params.glitter = new Uint8Array(P);\n  params.next = 0;\n  // Rockets on their way up: launch x, target, time in flight, flight time, last position.\n  params.rx = new Float32Array(R);\n  params.rtx = new Float32Array(R);\n  params.rty = new Float32Array(R);\n  params.rt = new Float32Array(R);\n  params.rf = new Float32Array(R);\n  params.rpx = new Float32Array(R);\n  params.rpy = new Float32Array(R);\n  params.rOn = new Uint8Array(R);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.t = 0;\n  params.beat = 0.15;\n  params.spread = 0;\n  params.gravity = 0;\n}\n\nfunction emit(params, x, y, vx, vy, life, hue, drag, glitter) {\n  const i = params.next;\n  params.next = (i + 1) % P;\n  params.x[i] = x;\n  params.y[i] = y;\n  params.vx[i] = vx;\n  params.vy[i] = vy;\n  params.age[i] = 0;\n  params.life[i] = life;\n  params.hue[i] = hue;\n  params.drag[i] = drag;\n  params.glitter[i] = glitter;\n}\n\nfunction launch(params, late) {\n  let r = 0;\n  while (r \u003c R && params.rOn[r]) r++;\n  if (r === R) return;\n  // Shells that will fall burst high, shells that will rise burst low.\n  // The tall panel leaves room to stack shells at different heights.\n  const top = 18 + Math.max(0, -params.gravity) * 34;\n  params.rtx[r] = 14 + Math.random() * 36;\n  params.rty[r] = top + Math.random() * 70;\n  params.rx[r] = params.rtx[r] + (Math.random() - 0.5) * 10;\n  params.rt[r] = 0;\n  params.rf[r] = 0.45 + Math.random() * 0.3 + late;\n  params.rpx[r] = params.rx[r];\n  params.rpy[r] = H + 1;\n  params.rOn[r] = 1;\n}\n\nfunction burst(params, x, y) {\n  const spread = params.spread;\n  // At spread 0 one colour drifts round the wheel over three minutes.\n  const base = 0.08 + params.t * 0.0055;\n  const hue = base + (Math.random() - 0.5) * spread;\n  // Past halfway a shell carries a second colour as well.\n  const second = hue + 0.22 + Math.random() * 0.2;\n  const mix = Math.max(0, spread - 0.4) * 0.8;\n  const kind = Math.random();\n  const size = 0.6 + Math.random() * 0.5;\n  const glitter = Math.random() \u003c 0.5 ? 1 : 0;\n  if (kind \u003c 0.22) {\n    // Ring: one even hoop, tipped so it reads as seen at an angle.\n    const n = 52;\n    const tilt = 0.4 + Math.random() * 0.6;\n    const r0 = Math.random() * Math.PI * 2;\n    const v = 78 * size;\n    for (let i = 0; i \u003c n; i++) {\n      const a = r0 + (i / n) * Math.PI * 2;\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v * tilt, 1.4 + Math.random() * 0.3, h, 2.8, glitter);\n    }\n  } else if (kind \u003c 0.4) {\n    // Willow: slower sparks that live long and hang.\n    const n = 64;\n    for (let i = 0; i \u003c n; i++) {\n      const a = Math.random() * Math.PI * 2;\n      const c = Math.random() * 2 - 1;\n      const v = 60 * size * Math.sqrt(1 - c * c) * (0.9 + 0.1 * Math.random());\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v, 2.6 + Math.random() * 0.8, h, 2.4, 1);\n    }\n  } else {\n    // Peony: a sphere of sparks seen flat, so they crowd towards its rim.\n    const n = 80 + Math.floor(Math.random() * 24);\n    for (let i = 0; i \u003c n; i++) {\n      const a = Math.random() * Math.PI * 2;\n      const c = Math.random() * 2 - 1;\n      const v = 82 * size * Math.sqrt(1 - c * c) * (0.9 + 0.1 * Math.random());\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v, 1.3 + Math.random() * 0.6, h, 2.8, glitter);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.3];\n  params.spread = Math.max(0, Math.min(1, k[0]));\n  const rate = 0.25 + k[1] * 0.5;\n  params.gravity = Math.max(-1, Math.min(1, k[2]));\n  const trail = Math.max(0.05, k[3]);\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n\n  // The beat: mostly one rocket a beat, sometimes a quick second, now and then a rest.\n  params.beat -= dt;\n  if (params.beat \u003c= 0) {\n    const r = Math.random();\n    if (r \u003c 0.1 && rate > 0.8) {\n      params.beat = 0.6 / rate;\n    } else {\n      launch(params, 0);\n      if (r > 0.8) launch(params, 0.12 + Math.random() * 0.18);\n      params.beat = (0.75 + Math.random() * 0.5) / rate;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(params, 14 + Math.random() * 36, 20 + Math.random() * 70);\n\n  const buf = params.buf;\n  const fade = Math.exp(-dt / trail);\n  for (let i = 0; i \u003c buf.length; i++) buf[i] *= fade;\n\n  const col = params.col;\n  hsvInto(col, 0.09, 0.5, 0.5);\n  for (let r = 0; r \u003c R; r++) {\n    if (!params.rOn[r]) continue;\n    params.rt[r] += dt;\n    const u = Math.min(1, params.rt[r] / params.rf[r]);\n    // Eases out as it climbs, the way a rocket slows near the top.\n    const e = 1 - (1 - u) * (1 - u);\n    const nx = params.rx[r] + (params.rtx[r] - params.rx[r]) * e;\n    const ny = H + 1 + (params.rty[r] - H - 1) * e;\n    line(buf, params.rpx[r], params.rpy[r], nx, ny, col);\n    params.rpx[r] = nx;\n    params.rpy[r] = ny;\n    if (u >= 1) {\n      params.rOn[r] = 0;\n      burst(params, nx, ny);\n    }\n  }\n\n  const g = params.gravity * 44;\n  const tick = Math.floor(params.t * 24);\n  const { x, y, vx, vy, age, life, hue, drag, glitter } = params;\n  for (let i = 0; i \u003c P; i++) {\n    if (age[i] >= life[i]) continue;\n    age[i] += dt;\n    const ox = x[i];\n    const oy = y[i];\n    const f = Math.exp(-drag[i] * dt);\n    vx[i] *= f;\n    vy[i] = vy[i] * f + g * dt;\n    x[i] += vx[i] * dt;\n    y[i] += vy[i] * dt;\n    if (age[i] >= life[i]) continue;\n    const T = 1 - age[i] / life[i];\n    // White for the first frames, in the shell's full colour a seventh of a second later.\n    let s = 0.95 * Math.min(1, (age[i] + 0.01) / 0.14);\n    let v = Math.min(1, T * 1.8);\n    if (glitter[i] && T \u003c 0.5) {\n      const h = hash(i, tick);\n      if (h \u003c 0.12) {\n        s *= 0.5;\n        v = 1;\n      } else v *= h \u003c 0.55 ? 0.3 : 0.8;\n    }\n    if (v \u003c 0.04) continue;\n    hsvInto(col, hue[i] - (1 - T) * 0.04, s, v);\n    line(buf, ox, oy, x[i], y[i], col);\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y * W + x) * 3;\n      display.setPixel(x, y, buf[i], buf[i + 1], buf[i + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-sparks","type":"code","name":"sparks","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sparks\n// Family:  particle\n// Idea:    Each spark's colour is a clock counting down from white heat, so a whole shell shows its own age at a glance.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Spread=0..1, Rate=0.6..5, Gravity=-1..1, Trail=0.3..1.8\n//\n// Knob 1: Spread. At 0 every shell is the same colour, slowly turning over the minutes; higher spreads the shells round the wheel, and past halfway each shell carries a second colour.\n// Knob 2: Rate. How often a rocket goes up; the beat stays loose, with doubles and the odd rest.\n// Knob 3: Gravity. At 0 the sparks hang where the drag stops them; above 0 they droop like willows, below 0 they rise like embers.\n// Knob 4: Trail. Seconds a spark's streak takes to fade.\n// Buttons: K1 tap fires a shell straight away.\n\nconst W = 64;\nconst H = 128;\nconst P = 900;\nconst R = 8;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255;\n  out[1] = (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255;\n  out[2] = (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255;\n}\n\n// A cheap repeatable 0..1 from two integers, for the glitter.\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction splat(buf, x, y, c) {\n  const x0 = Math.ceil(x - 1.2);\n  const y0 = Math.ceil(y - 1.2);\n  for (let yy = y0; yy \u003c= y0 + 2; yy++) {\n    if (yy \u003c 0 || yy >= H) continue;\n    const dy = yy - y;\n    for (let xx = x0; xx \u003c= x0 + 2; xx++) {\n      if (xx \u003c 0 || xx >= W) continue;\n      const dx = xx - x;\n      const w = 1 - (dx * dx + dy * dy) / 1.44;\n      if (w \u003c= 0) continue;\n      const i = (yy * W + xx) * 3;\n      // The brighter spark takes the LED whole, so a fading white flash never greys a coloured one.\n      if ((c[0] + c[1] + c[2]) * w > buf[i] + buf[i + 1] + buf[i + 2]) {\n        buf[i] = c[0] * w;\n        buf[i + 1] = c[1] * w;\n        buf[i + 2] = c[2] * w;\n      }\n    }\n  }\n}\n\nfunction line(buf, x0, y0, x1, y1, c) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const m = Math.max(1, Math.ceil(Math.hypot(dx, dy) / 0.6));\n  for (let j = 1; j \u003c= m; j++) splat(buf, x0 + (dx * j) / m, y0 + (dy * j) / m, c);\n}\n\nexport function setup(params) {\n  params.x = new Float32Array(P);\n  params.y = new Float32Array(P);\n  params.vx = new Float32Array(P);\n  params.vy = new Float32Array(P);\n  params.age = new Float32Array(P);\n  params.life = new Float32Array(P);\n  params.hue = new Float32Array(P);\n  params.drag = new Float32Array(P);\n  params.glitter = new Uint8Array(P);\n  params.next = 0;\n  // Rockets on their way up: launch x, target, time in flight, flight time, last position.\n  params.rx = new Float32Array(R);\n  params.rtx = new Float32Array(R);\n  params.rty = new Float32Array(R);\n  params.rt = new Float32Array(R);\n  params.rf = new Float32Array(R);\n  params.rpx = new Float32Array(R);\n  params.rpy = new Float32Array(R);\n  params.rOn = new Uint8Array(R);\n  params.buf = new Float32Array(W * H * 3);\n  params.col = new Float32Array(3);\n  params.t = 0;\n  params.beat = 0.15;\n  params.spread = 0;\n  params.gravity = 0;\n}\n\nfunction emit(params, x, y, vx, vy, life, hue, drag, glitter) {\n  const i = params.next;\n  params.next = (i + 1) % P;\n  params.x[i] = x;\n  params.y[i] = y;\n  params.vx[i] = vx;\n  params.vy[i] = vy;\n  params.age[i] = 0;\n  params.life[i] = life;\n  params.hue[i] = hue;\n  params.drag[i] = drag;\n  params.glitter[i] = glitter;\n}\n\nfunction launch(params, late) {\n  let r = 0;\n  while (r \u003c R && params.rOn[r]) r++;\n  if (r === R) return;\n  // Shells that will fall burst high, shells that will rise burst low.\n  // The tall panel leaves room to stack shells at different heights.\n  const top = 18 + Math.max(0, -params.gravity) * 34;\n  params.rtx[r] = 14 + Math.random() * 36;\n  params.rty[r] = top + Math.random() * 70;\n  params.rx[r] = params.rtx[r] + (Math.random() - 0.5) * 10;\n  params.rt[r] = 0;\n  params.rf[r] = 0.45 + Math.random() * 0.3 + late;\n  params.rpx[r] = params.rx[r];\n  params.rpy[r] = H + 1;\n  params.rOn[r] = 1;\n}\n\nfunction burst(params, x, y) {\n  const spread = params.spread;\n  // At spread 0 one colour drifts round the wheel over three minutes.\n  const base = 0.08 + params.t * 0.0055;\n  const hue = base + (Math.random() - 0.5) * spread;\n  // Past halfway a shell carries a second colour as well.\n  const second = hue + 0.22 + Math.random() * 0.2;\n  const mix = Math.max(0, spread - 0.4) * 0.8;\n  const kind = Math.random();\n  const size = 0.6 + Math.random() * 0.5;\n  const glitter = Math.random() \u003c 0.5 ? 1 : 0;\n  if (kind \u003c 0.22) {\n    // Ring: one even hoop, tipped so it reads as seen at an angle.\n    const n = 52;\n    const tilt = 0.4 + Math.random() * 0.6;\n    const r0 = Math.random() * Math.PI * 2;\n    const v = 78 * size;\n    for (let i = 0; i \u003c n; i++) {\n      const a = r0 + (i / n) * Math.PI * 2;\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v * tilt, 1.4 + Math.random() * 0.3, h, 2.8, glitter);\n    }\n  } else if (kind \u003c 0.4) {\n    // Willow: slower sparks that live long and hang.\n    const n = 64;\n    for (let i = 0; i \u003c n; i++) {\n      const a = Math.random() * Math.PI * 2;\n      const c = Math.random() * 2 - 1;\n      const v = 60 * size * Math.sqrt(1 - c * c) * (0.9 + 0.1 * Math.random());\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v, 2.6 + Math.random() * 0.8, h, 2.4, 1);\n    }\n  } else {\n    // Peony: a sphere of sparks seen flat, so they crowd towards its rim.\n    const n = 80 + Math.floor(Math.random() * 24);\n    for (let i = 0; i \u003c n; i++) {\n      const a = Math.random() * Math.PI * 2;\n      const c = Math.random() * 2 - 1;\n      const v = 82 * size * Math.sqrt(1 - c * c) * (0.9 + 0.1 * Math.random());\n      const h = Math.random() \u003c mix ? second : hue;\n      emit(params, x, y, Math.cos(a) * v, Math.sin(a) * v, 1.3 + Math.random() * 0.6, h, 2.8, glitter);\n    }\n  }\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.3];\n  params.spread = Math.max(0, Math.min(1, k[0]));\n  const rate = 0.25 + k[1] * 0.5;\n  params.gravity = Math.max(-1, Math.min(1, k[2]));\n  const trail = Math.max(0.05, k[3]);\n  dt = Math.min(dt, 0.1);\n  params.t += dt;\n\n  // The beat: mostly one rocket a beat, sometimes a quick second, now and then a rest.\n  params.beat -= dt;\n  if (params.beat \u003c= 0) {\n    const r = Math.random();\n    if (r \u003c 0.1 && rate > 0.8) {\n      params.beat = 0.6 / rate;\n    } else {\n      launch(params, 0);\n      if (r > 0.8) launch(params, 0.12 + Math.random() * 0.18);\n      params.beat = (0.75 + Math.random() * 0.5) / rate;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) burst(params, 14 + Math.random() * 36, 20 + Math.random() * 70);\n\n  const buf = params.buf;\n  const fade = Math.exp(-dt / trail);\n  for (let i = 0; i \u003c buf.length; i++) buf[i] *= fade;\n\n  const col = params.col;\n  hsvInto(col, 0.09, 0.5, 0.5);\n  for (let r = 0; r \u003c R; r++) {\n    if (!params.rOn[r]) continue;\n    params.rt[r] += dt;\n    const u = Math.min(1, params.rt[r] / params.rf[r]);\n    // Eases out as it climbs, the way a rocket slows near the top.\n    const e = 1 - (1 - u) * (1 - u);\n    const nx = params.rx[r] + (params.rtx[r] - params.rx[r]) * e;\n    const ny = H + 1 + (params.rty[r] - H - 1) * e;\n    line(buf, params.rpx[r], params.rpy[r], nx, ny, col);\n    params.rpx[r] = nx;\n    params.rpy[r] = ny;\n    if (u >= 1) {\n      params.rOn[r] = 0;\n      burst(params, nx, ny);\n    }\n  }\n\n  const g = params.gravity * 44;\n  const tick = Math.floor(params.t * 24);\n  const { x, y, vx, vy, age, life, hue, drag, glitter } = params;\n  for (let i = 0; i \u003c P; i++) {\n    if (age[i] >= life[i]) continue;\n    age[i] += dt;\n    const ox = x[i];\n    const oy = y[i];\n    const f = Math.exp(-drag[i] * dt);\n    vx[i] *= f;\n    vy[i] = vy[i] * f + g * dt;\n    x[i] += vx[i] * dt;\n    y[i] += vy[i] * dt;\n    if (age[i] >= life[i]) continue;\n    const T = 1 - age[i] / life[i];\n    // White for the first frames, in the shell's full colour a seventh of a second later.\n    let s = 0.95 * Math.min(1, (age[i] + 0.01) / 0.14);\n    let v = Math.min(1, T * 1.8);\n    if (glitter[i] && T \u003c 0.5) {\n      const h = hash(i, tick);\n      if (h \u003c 0.12) {\n        s *= 0.5;\n        v = 1;\n      } else v *= h \u003c 0.55 ? 0.3 : 0.8;\n    }\n    if (v \u003c 0.04) continue;\n    hsvInto(col, hue[i] - (1 - T) * 0.04, s, v);\n    line(buf, ox, oy, x[i], y[i], col);\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const i = (y * W + x) * 3;\n      display.setPixel(x, y, buf[i], buf[i + 1], buf[i + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Spread=0..1, Rate=0.6..5, Gravity=-1..1, Trail=0.3..1.8","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Spread","min":0,"max":1,"about":"At 0 every shell is the same colour, slowly turning over the minutes; higher spreads the shells round the wheel, and past halfway each shell carries a second colour."},{"name":"Rate","min":0.6,"max":5,"about":"How often a rocket goes up; the beat stays loose, with doubles and the odd rest."},{"name":"Gravity","min":-1,"max":1,"about":"At 0 the sparks hang where the drag stops them; above 0 they droop like willows, below 0 they rise like embers."},{"name":"Trail","min":0.3,"max":1.8,"about":"Seconds a spark's streak takes to fade."}],"start":[0,2,0,0.3],"measures":{"motion":0.3313,"detail":0.0372,"edges":0.402,"complexity":0.7208,"coverage":0.1596,"colour":0.1435,"drift":0.1348},"knobResponse":[0.034,0.0885,0.063,0.0577]},{"slug":"spectrogram","title":"Spectrogram","family":"data","round":17,"note":"새벽 합창의 스펙트로그램이 폭포처럼 내려와요. 휘파람과 떨림, 짹 소리와 뻐꾸기의 두 음이 바람과 먼 찻길로 얼룩진 바닥 위에 밝게 그려지고, K3 을 누르면 손뼉 소리에 새들이 잠시 입을 다물어요.","idea":"A live spectrogram of a dawn chorus falls down the panel as a waterfall, frequency across and time downward, with the birds' whistles, trills and chips drawn bright over the speckled roar of wind and a distant road.","buttons":"K3 tap claps: a line rings across every frequency, and the birds fall silent for a few seconds before they start again one by one.","code":"// ===== Patternflow pattern =====\n// Title:   Spectrogram\n// Family:  data\n// Idea:    A live spectrogram of a dawn chorus falls down the panel as a waterfall, frequency across and time downward, with the birds' whistles, trills and chips drawn bright over the speckled roar of wind and a distant road.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the sound spectrograph of Koenig, Dunn and Lacy (Bell Labs, 1946) and the Kay Sona-Graph sonagrams of bird song in field guides; colour maps after Smith and van der Walt's inferno, magma and viridis (2015)\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Map=0..1, Scroll=0.5..4, Birds=0..1, Gain=-1..1\n//\n// Knob 1: Map. The colour map: inferno at 0 blends into magma and then viridis, and at 1 it is the black ink on white paper of a Sona-Graph.\n// Knob 2: Scroll. How fast time falls: at 2 the waterfall moves 24 rows a second and holds five seconds of sound; at 0.5 the songs squeeze into short dashes, at 4 they stretch tall.\n// Knob 3: Birds. How far the chorus has woken: at 0 a robin, a cuckoo and a wren; turned up, sparrows, a blackbird, a collared dove, a woodpecker and more join, ten in all.\n// Knob 4: Gain. Slides the 50 dB window the map spans: turned down, only the songs show over a black floor; turned up, the wind and the far road flood the panel.\n// Buttons: K3 tap claps: a line rings across every frequency, and the birds fall silent for a few seconds before they start again one by one.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The frequency axis: constant-Q bins on a log scale from 120 Hz at the left\n// edge to 11 kHz at the right.\nconst F0 = 120;\nconst F1 = 11000;\nconst LN = Math.log(F1 / F0);\nconst xOf = (f) => (W * Math.log(f / F0)) / LN - 0.5;\nconst fOf = (x) => F0 * Math.exp(((x + 0.5) * LN) / W);\n\n// Colour maps as eleven stops from 0 to 1: inferno, magma and viridis as\n// matplotlib has them, and the black-on-white paper of a Sona-Graph.\nconst MAPS = [\n  [[0, 0, 4], [22, 11, 57], [66, 10, 104], [106, 23, 110], [147, 38, 103], [188, 55, 84], [221, 81, 58], [243, 120, 25], [252, 165, 10], [246, 215, 70], [252, 255, 164]],\n  [[0, 0, 4], [20, 14, 54], [59, 15, 112], [100, 26, 128], [140, 41, 129], [183, 55, 121], [222, 73, 104], [247, 112, 92], [254, 159, 109], [254, 207, 146], [252, 253, 191]],\n  [[68, 1, 84], [72, 36, 117], [65, 68, 135], [53, 95, 141], [42, 120, 142], [33, 145, 140], [34, 168, 132], [68, 191, 112], [122, 209, 81], [189, 223, 38], [253, 231, 37]],\n  [[236, 232, 220], [214, 210, 198], [190, 186, 176], [164, 160, 152], [138, 134, 128], [112, 108, 104], [86, 82, 80], [62, 58, 58], [40, 38, 38], [22, 20, 22], [8, 6, 8]],\n];\n\nconst LUT = 1024;\n\nfunction lut(k) {\n  const m = Math.min(2.999, k * 3);\n  const a = MAPS[Math.floor(m)];\n  const b = MAPS[Math.floor(m) + 1];\n  const u = m - Math.floor(m);\n  const out = new Uint8Array(LUT * 3);\n  for (let i = 0; i \u003c LUT; i++) {\n    const t = (i / (LUT - 1)) * 10;\n    const j = Math.min(9, Math.floor(t));\n    const f = t - j;\n    for (let c = 0; c \u003c 3; c++) {\n      const va = a[j][c] + (a[j + 1][c] - a[j][c]) * f;\n      const vb = b[j][c] + (b[j + 1][c] - b[j][c]) * f;\n      out[i * 3 + c] = Math.round(va + (vb - va) * u);\n    }\n  }\n  return out;\n}\n\nfunction gauss() {\n  return Math.sqrt(-2 * Math.log(1 - Math.random())) * Math.cos(2 * Math.PI * Math.random());\n}\n\nconst rnd = (a, b) => a + Math.random() * (b - a);\n\n// Songs. Each returns the notes of one phrase from time t: [start, end,\n// starting Hz, ending Hz, dB, harmonic dB].\nconst SONGS = {\n  // A robin or a thrush: three to six clear whistles that glide.\n  whistle(t, b) {\n    const out = [];\n    let s = t;\n    for (let n = Math.floor(rnd(3, 7)); n > 0; n--) {\n      const len = rnd(0.08, 0.22);\n      const f = b.f * rnd(0.75, 1.35);\n      out.push([s, s + len, f, f * rnd(0.75, 1.3), b.db, -14]);\n      s += len + rnd(0.04, 0.1);\n    }\n    return out;\n  },\n  // A wren: a fast trill of falling ticks that sinks as it goes.\n  trill(t, b) {\n    const out = [];\n    const n = Math.floor(rnd(12, 26));\n    const rate = rnd(14, 20);\n    for (let i = 0; i \u003c n; i++) {\n      const s = t + i / rate;\n      const f = b.f * (1 - (0.15 * i) / n);\n      out.push([s, s + 0.035, f * 1.15, f * 0.88, b.db, -18]);\n    }\n    return out;\n  },\n  // A sparrow: bursts of chips that each sweep down more than an octave.\n  chip(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(3, 8)), s = t; n > 0; n--, s += rnd(0.1, 0.16)) out.push([s, s + rnd(0.025, 0.04), b.f * 2.2, b.f * 0.9, b.db, -20]);\n    return out;\n  },\n  // A cuckoo: the falling third, cu-koo, four to eight times.\n  cuckoo(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(4, 9)), s = t; n > 0; n--, s += 1.3) {\n      out.push([s, s + 0.22, b.f, b.f * 0.97, b.db, -22]);\n      out.push([s + 0.34, s + 0.64, b.f * 0.8, b.f * 0.78, b.db, -22]);\n    }\n    return out;\n  },\n  // A collared dove: coo-COO-coo, low and slow.\n  dove(t, b) {\n    return [\n      [t, t + 0.28, b.f, b.f * 0.98, b.db - 4, -16],\n      [t + 0.4, t + 0.9, b.f * 1.06, b.f, b.db, -16],\n      [t + 1.05, t + 1.35, b.f * 0.96, b.f * 0.94, b.db - 4, -16],\n    ];\n  },\n  // A blackbird: a quick warble of short notes leaping about.\n  warble(t, b) {\n    const out = [];\n    let s = t;\n    for (let n = Math.floor(rnd(8, 18)); n > 0; n--) {\n      const len = rnd(0.04, 0.1);\n      const f = b.f * rnd(0.7, 1.5);\n      out.push([s, s + len, f, f * rnd(0.8, 1.25), b.db, -12]);\n      s += len + rnd(0.01, 0.04);\n    }\n    return out;\n  },\n  // A lesser spotted woodpecker drumming on a dead branch: a roll of knocks,\n  // each a click across the band, quickening as it goes.\n  drum(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(10, 18)), s = t, g = 0.09; n > 0; n--, s += g, g *= 0.98) out.push([s, s + 0.01, b.f, b.f, b.db, null]);\n    return out;\n  },\n};\n\n// The chorus in the order the birds wake: [song, Hz, dB, seconds between phrases].\nconst CHORUS = [\n  [\"whistle\", 2800, -30, 3.2], [\"cuckoo\", 760, -34, 9], [\"trill\", 5600, -32, 5], [\"chip\", 3600, -34, 2.2],\n  [\"warble\", 2200, -31, 5], [\"dove\", 520, -36, 6], [\"whistle\", 3600, -36, 3.8], [\"chip\", 4200, -38, 2.8],\n  [\"trill\", 6400, -38, 6], [\"drum\", 1800, -48, 10],\n];\n\nexport function setup(params) {\n  Object.assign(params, {\n    v: new Float32Array(N), head: 0, acc: 0, t: 0, ready: 0,\n    re: new Float32Array(W), im: new Float32Array(W),\n    birds: CHORUS.map(([song, f, db, gap]) => ({ song, f: f * rnd(0.92, 1.08), db, gap, next: rnd(0, gap), notes: [] })),\n    gust: 0, gv: 0, truck: -99, clap: -99, map: -1, lut: null,\n  });\n}\n\n// One row of the spectrogram: the sound from t over dt seconds, as dB per bin.\nfunction row(S, t, dt, k) {\n  const P = new Float32Array(W);\n  const busy = 3 + Math.round((k[2] ?? 0) * 7);\n  // Wind gusts wander slowly; a truck on the far road swells and fades.\n  S.gv += (-S.gust * 0.3 + gauss() * 0.6) * dt;\n  S.gust = Math.max(-1, Math.min(1.5, S.gust + S.gv * dt));\n  if (t - S.truck > 24 && Math.random() \u003c dt / 12) S.truck = t;\n  const tr = Math.max(0, 1 - Math.abs(t - S.truck - 3) / 3);\n  for (let x = 0; x \u003c W; x++) {\n    const f = fOf(x);\n    const o = Math.log2(f / 300);\n    const hiss = -74 - 3 * (x / W);\n    const road = -62 + 6 * tr - 12 * o * o;\n    const wind = -68 + 10 * S.gust - 9 * Math.max(0, Math.log2(f / 200));\n    const floor = 10 * Math.log10(10 ** (hiss / 10) + 10 ** (road / 10) + 10 ** (wind / 10));\n    // Each bin is the power of a complex value that carries six tenths of\n    // itself over to the next row, so the speckle has a grain in time.\n    const a = 0.6;\n    S.re[x] = a * S.re[x] + Math.sqrt(1 - a * a) * gauss();\n    S.im[x] = a * S.im[x] + Math.sqrt(1 - a * a) * gauss();\n    P[x] = 10 ** (floor / 10) * (S.re[x] * S.re[x] + S.im[x] * S.im[x]) * 0.5;\n  }\n  // The birds, sampled four times within the row so a fast chip spreads its\n  // sweep across the bins it passes.\n  for (let i = 0; i \u003c S.birds.length; i++) {\n    const b = S.birds[i];\n    if (i \u003c busy && t >= b.next) {\n      b.notes = SONGS[b.song](t, b);\n      b.next = b.notes[b.notes.length - 1][1] + b.gap * rnd(0.7, 1.4);\n    }\n    for (const [t0, t1, fa, fb, db, hdb] of b.notes) {\n      if (t1 \u003c t || t0 > t + dt) continue;\n      if (hdb === null) {\n        // A knock lands in the row it starts in and spreads its click over\n        // the bins about its middle.\n        if (t0 \u003c t) continue;\n        const xc = xOf(fa);\n        for (let x = 0; x \u003c W; x++) P[x] += 10 ** (db / 10) * Math.exp(-(((x - xc) / 6) ** 2)) * (0.3 + Math.random());\n        continue;\n      }\n      for (let s = 0; s \u003c 4; s++) {\n        const ts = t + ((s + 0.5) / 4) * dt;\n        if (ts \u003c t0 || ts > t1) continue;\n        const u = (ts - t0) / (t1 - t0);\n        const env = Math.sin(Math.PI * u) ** 0.5;\n        const f = fa * Math.pow(fb / fa, u);\n        for (let hm = 1; hm \u003c= 3; hm++) {\n          const xf = xOf(f * hm);\n          if (xf > W) break;\n          const p = 10 ** ((db + (hm > 1 ? hdb * (hm - 1) : 0)) / 10) * env * 0.25;\n          for (let x = Math.max(0, Math.floor(xf - 2)); x \u003c= Math.min(W - 1, xf + 2); x++) P[x] += p * Math.exp(-((x - xf) ** 2) / 0.35);\n        }\n      }\n    }\n  }\n  // A clap rings across every bin and dies away within a third of a second.\n  const age = t - S.clap;\n  if (age > -dt && age \u003c 0.3) for (let x = 0; x \u003c W; x++) P[x] += 10 ** ((-26 - 120 * Math.max(0, age) - x * 0.08) / 10);\n  return P;\n}\n\nfunction push(S, k) {\n  const dt = 1 / (12 * (k[1] ?? 2));\n  const P = row(S, S.t, dt, k);\n  S.t += dt;\n  S.head = (S.head + H - 1) % H;\n  for (let x = 0; x \u003c W; x++) S.v[S.head * W + x] = 10 * Math.log10(P[x] + 1e-12);\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const k = input.knobValues || [];\n  if (!S.ready) {\n    // Fill the panel before the first frame, at the knobs' scroll and chorus.\n    S.ready = 1;\n    for (let i = 0; i \u003c H; i++) push(S, k);\n  }\n  S.acc += dt * 12 * (k[1] ?? 2);\n  while (S.acc >= 1) {\n    push(S, k);\n    S.acc--;\n  }\n  if ((input.btnPressed || [])[2]) {\n    // Startled, every bird stops mid-phrase and starts again a few seconds on.\n    S.clap = S.t;\n    for (const b of S.birds) (b.notes = []), (b.next = S.t + rnd(3, 9));\n  }\n  S.lo = -92 - 14 * (k[3] ?? 0.06);\n  if (S.map !== (k[0] ?? 0)) {\n    S.map = k[0] ?? 0;\n    S.lut = lut(S.map);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.lut) return;\n  // Gain slides the 50 dB window the colour map spans.\n  const g = (LUT - 1) / 50;\n  for (let y = 0; y \u003c H; y++) {\n    const r = ((S.head + y) % H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = Math.round(Math.max(0, Math.min(LUT - 1, (S.v[r + x] - S.lo) * g))) * 3;\n      display.setPixel(x, y, S.lut[i], S.lut[i + 1], S.lut[i + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-spectrogram","type":"code","name":"spectrogram","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Spectrogram\n// Family:  data\n// Idea:    A live spectrogram of a dawn chorus falls down the panel as a waterfall, frequency across and time downward, with the birds' whistles, trills and chips drawn bright over the speckled roar of wind and a distant road.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the sound spectrograph of Koenig, Dunn and Lacy (Bell Labs, 1946) and the Kay Sona-Graph sonagrams of bird song in field guides; colour maps after Smith and van der Walt's inferno, magma and viridis (2015)\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Map=0..1, Scroll=0.5..4, Birds=0..1, Gain=-1..1\n//\n// Knob 1: Map. The colour map: inferno at 0 blends into magma and then viridis, and at 1 it is the black ink on white paper of a Sona-Graph.\n// Knob 2: Scroll. How fast time falls: at 2 the waterfall moves 24 rows a second and holds five seconds of sound; at 0.5 the songs squeeze into short dashes, at 4 they stretch tall.\n// Knob 3: Birds. How far the chorus has woken: at 0 a robin, a cuckoo and a wren; turned up, sparrows, a blackbird, a collared dove, a woodpecker and more join, ten in all.\n// Knob 4: Gain. Slides the 50 dB window the map spans: turned down, only the songs show over a black floor; turned up, the wind and the far road flood the panel.\n// Buttons: K3 tap claps: a line rings across every frequency, and the birds fall silent for a few seconds before they start again one by one.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The frequency axis: constant-Q bins on a log scale from 120 Hz at the left\n// edge to 11 kHz at the right.\nconst F0 = 120;\nconst F1 = 11000;\nconst LN = Math.log(F1 / F0);\nconst xOf = (f) => (W * Math.log(f / F0)) / LN - 0.5;\nconst fOf = (x) => F0 * Math.exp(((x + 0.5) * LN) / W);\n\n// Colour maps as eleven stops from 0 to 1: inferno, magma and viridis as\n// matplotlib has them, and the black-on-white paper of a Sona-Graph.\nconst MAPS = [\n  [[0, 0, 4], [22, 11, 57], [66, 10, 104], [106, 23, 110], [147, 38, 103], [188, 55, 84], [221, 81, 58], [243, 120, 25], [252, 165, 10], [246, 215, 70], [252, 255, 164]],\n  [[0, 0, 4], [20, 14, 54], [59, 15, 112], [100, 26, 128], [140, 41, 129], [183, 55, 121], [222, 73, 104], [247, 112, 92], [254, 159, 109], [254, 207, 146], [252, 253, 191]],\n  [[68, 1, 84], [72, 36, 117], [65, 68, 135], [53, 95, 141], [42, 120, 142], [33, 145, 140], [34, 168, 132], [68, 191, 112], [122, 209, 81], [189, 223, 38], [253, 231, 37]],\n  [[236, 232, 220], [214, 210, 198], [190, 186, 176], [164, 160, 152], [138, 134, 128], [112, 108, 104], [86, 82, 80], [62, 58, 58], [40, 38, 38], [22, 20, 22], [8, 6, 8]],\n];\n\nconst LUT = 1024;\n\nfunction lut(k) {\n  const m = Math.min(2.999, k * 3);\n  const a = MAPS[Math.floor(m)];\n  const b = MAPS[Math.floor(m) + 1];\n  const u = m - Math.floor(m);\n  const out = new Uint8Array(LUT * 3);\n  for (let i = 0; i \u003c LUT; i++) {\n    const t = (i / (LUT - 1)) * 10;\n    const j = Math.min(9, Math.floor(t));\n    const f = t - j;\n    for (let c = 0; c \u003c 3; c++) {\n      const va = a[j][c] + (a[j + 1][c] - a[j][c]) * f;\n      const vb = b[j][c] + (b[j + 1][c] - b[j][c]) * f;\n      out[i * 3 + c] = Math.round(va + (vb - va) * u);\n    }\n  }\n  return out;\n}\n\nfunction gauss() {\n  return Math.sqrt(-2 * Math.log(1 - Math.random())) * Math.cos(2 * Math.PI * Math.random());\n}\n\nconst rnd = (a, b) => a + Math.random() * (b - a);\n\n// Songs. Each returns the notes of one phrase from time t: [start, end,\n// starting Hz, ending Hz, dB, harmonic dB].\nconst SONGS = {\n  // A robin or a thrush: three to six clear whistles that glide.\n  whistle(t, b) {\n    const out = [];\n    let s = t;\n    for (let n = Math.floor(rnd(3, 7)); n > 0; n--) {\n      const len = rnd(0.08, 0.22);\n      const f = b.f * rnd(0.75, 1.35);\n      out.push([s, s + len, f, f * rnd(0.75, 1.3), b.db, -14]);\n      s += len + rnd(0.04, 0.1);\n    }\n    return out;\n  },\n  // A wren: a fast trill of falling ticks that sinks as it goes.\n  trill(t, b) {\n    const out = [];\n    const n = Math.floor(rnd(12, 26));\n    const rate = rnd(14, 20);\n    for (let i = 0; i \u003c n; i++) {\n      const s = t + i / rate;\n      const f = b.f * (1 - (0.15 * i) / n);\n      out.push([s, s + 0.035, f * 1.15, f * 0.88, b.db, -18]);\n    }\n    return out;\n  },\n  // A sparrow: bursts of chips that each sweep down more than an octave.\n  chip(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(3, 8)), s = t; n > 0; n--, s += rnd(0.1, 0.16)) out.push([s, s + rnd(0.025, 0.04), b.f * 2.2, b.f * 0.9, b.db, -20]);\n    return out;\n  },\n  // A cuckoo: the falling third, cu-koo, four to eight times.\n  cuckoo(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(4, 9)), s = t; n > 0; n--, s += 1.3) {\n      out.push([s, s + 0.22, b.f, b.f * 0.97, b.db, -22]);\n      out.push([s + 0.34, s + 0.64, b.f * 0.8, b.f * 0.78, b.db, -22]);\n    }\n    return out;\n  },\n  // A collared dove: coo-COO-coo, low and slow.\n  dove(t, b) {\n    return [\n      [t, t + 0.28, b.f, b.f * 0.98, b.db - 4, -16],\n      [t + 0.4, t + 0.9, b.f * 1.06, b.f, b.db, -16],\n      [t + 1.05, t + 1.35, b.f * 0.96, b.f * 0.94, b.db - 4, -16],\n    ];\n  },\n  // A blackbird: a quick warble of short notes leaping about.\n  warble(t, b) {\n    const out = [];\n    let s = t;\n    for (let n = Math.floor(rnd(8, 18)); n > 0; n--) {\n      const len = rnd(0.04, 0.1);\n      const f = b.f * rnd(0.7, 1.5);\n      out.push([s, s + len, f, f * rnd(0.8, 1.25), b.db, -12]);\n      s += len + rnd(0.01, 0.04);\n    }\n    return out;\n  },\n  // A lesser spotted woodpecker drumming on a dead branch: a roll of knocks,\n  // each a click across the band, quickening as it goes.\n  drum(t, b) {\n    const out = [];\n    for (let n = Math.floor(rnd(10, 18)), s = t, g = 0.09; n > 0; n--, s += g, g *= 0.98) out.push([s, s + 0.01, b.f, b.f, b.db, null]);\n    return out;\n  },\n};\n\n// The chorus in the order the birds wake: [song, Hz, dB, seconds between phrases].\nconst CHORUS = [\n  [\"whistle\", 2800, -30, 3.2], [\"cuckoo\", 760, -34, 9], [\"trill\", 5600, -32, 5], [\"chip\", 3600, -34, 2.2],\n  [\"warble\", 2200, -31, 5], [\"dove\", 520, -36, 6], [\"whistle\", 3600, -36, 3.8], [\"chip\", 4200, -38, 2.8],\n  [\"trill\", 6400, -38, 6], [\"drum\", 1800, -48, 10],\n];\n\nexport function setup(params) {\n  Object.assign(params, {\n    v: new Float32Array(N), head: 0, acc: 0, t: 0, ready: 0,\n    re: new Float32Array(W), im: new Float32Array(W),\n    birds: CHORUS.map(([song, f, db, gap]) => ({ song, f: f * rnd(0.92, 1.08), db, gap, next: rnd(0, gap), notes: [] })),\n    gust: 0, gv: 0, truck: -99, clap: -99, map: -1, lut: null,\n  });\n}\n\n// One row of the spectrogram: the sound from t over dt seconds, as dB per bin.\nfunction row(S, t, dt, k) {\n  const P = new Float32Array(W);\n  const busy = 3 + Math.round((k[2] ?? 0) * 7);\n  // Wind gusts wander slowly; a truck on the far road swells and fades.\n  S.gv += (-S.gust * 0.3 + gauss() * 0.6) * dt;\n  S.gust = Math.max(-1, Math.min(1.5, S.gust + S.gv * dt));\n  if (t - S.truck > 24 && Math.random() \u003c dt / 12) S.truck = t;\n  const tr = Math.max(0, 1 - Math.abs(t - S.truck - 3) / 3);\n  for (let x = 0; x \u003c W; x++) {\n    const f = fOf(x);\n    const o = Math.log2(f / 300);\n    const hiss = -74 - 3 * (x / W);\n    const road = -62 + 6 * tr - 12 * o * o;\n    const wind = -68 + 10 * S.gust - 9 * Math.max(0, Math.log2(f / 200));\n    const floor = 10 * Math.log10(10 ** (hiss / 10) + 10 ** (road / 10) + 10 ** (wind / 10));\n    // Each bin is the power of a complex value that carries six tenths of\n    // itself over to the next row, so the speckle has a grain in time.\n    const a = 0.6;\n    S.re[x] = a * S.re[x] + Math.sqrt(1 - a * a) * gauss();\n    S.im[x] = a * S.im[x] + Math.sqrt(1 - a * a) * gauss();\n    P[x] = 10 ** (floor / 10) * (S.re[x] * S.re[x] + S.im[x] * S.im[x]) * 0.5;\n  }\n  // The birds, sampled four times within the row so a fast chip spreads its\n  // sweep across the bins it passes.\n  for (let i = 0; i \u003c S.birds.length; i++) {\n    const b = S.birds[i];\n    if (i \u003c busy && t >= b.next) {\n      b.notes = SONGS[b.song](t, b);\n      b.next = b.notes[b.notes.length - 1][1] + b.gap * rnd(0.7, 1.4);\n    }\n    for (const [t0, t1, fa, fb, db, hdb] of b.notes) {\n      if (t1 \u003c t || t0 > t + dt) continue;\n      if (hdb === null) {\n        // A knock lands in the row it starts in and spreads its click over\n        // the bins about its middle.\n        if (t0 \u003c t) continue;\n        const xc = xOf(fa);\n        for (let x = 0; x \u003c W; x++) P[x] += 10 ** (db / 10) * Math.exp(-(((x - xc) / 6) ** 2)) * (0.3 + Math.random());\n        continue;\n      }\n      for (let s = 0; s \u003c 4; s++) {\n        const ts = t + ((s + 0.5) / 4) * dt;\n        if (ts \u003c t0 || ts > t1) continue;\n        const u = (ts - t0) / (t1 - t0);\n        const env = Math.sin(Math.PI * u) ** 0.5;\n        const f = fa * Math.pow(fb / fa, u);\n        for (let hm = 1; hm \u003c= 3; hm++) {\n          const xf = xOf(f * hm);\n          if (xf > W) break;\n          const p = 10 ** ((db + (hm > 1 ? hdb * (hm - 1) : 0)) / 10) * env * 0.25;\n          for (let x = Math.max(0, Math.floor(xf - 2)); x \u003c= Math.min(W - 1, xf + 2); x++) P[x] += p * Math.exp(-((x - xf) ** 2) / 0.35);\n        }\n      }\n    }\n  }\n  // A clap rings across every bin and dies away within a third of a second.\n  const age = t - S.clap;\n  if (age > -dt && age \u003c 0.3) for (let x = 0; x \u003c W; x++) P[x] += 10 ** ((-26 - 120 * Math.max(0, age) - x * 0.08) / 10);\n  return P;\n}\n\nfunction push(S, k) {\n  const dt = 1 / (12 * (k[1] ?? 2));\n  const P = row(S, S.t, dt, k);\n  S.t += dt;\n  S.head = (S.head + H - 1) % H;\n  for (let x = 0; x \u003c W; x++) S.v[S.head * W + x] = 10 * Math.log10(P[x] + 1e-12);\n}\n\nexport function update(dt, input, params) {\n  const S = params;\n  dt = Math.min(Math.max(dt || 0, 0), 0.1);\n  const k = input.knobValues || [];\n  if (!S.ready) {\n    // Fill the panel before the first frame, at the knobs' scroll and chorus.\n    S.ready = 1;\n    for (let i = 0; i \u003c H; i++) push(S, k);\n  }\n  S.acc += dt * 12 * (k[1] ?? 2);\n  while (S.acc >= 1) {\n    push(S, k);\n    S.acc--;\n  }\n  if ((input.btnPressed || [])[2]) {\n    // Startled, every bird stops mid-phrase and starts again a few seconds on.\n    S.clap = S.t;\n    for (const b of S.birds) (b.notes = []), (b.next = S.t + rnd(3, 9));\n  }\n  S.lo = -92 - 14 * (k[3] ?? 0.06);\n  if (S.map !== (k[0] ?? 0)) {\n    S.map = k[0] ?? 0;\n    S.lut = lut(S.map);\n  }\n}\n\nexport function draw(display, params) {\n  const S = params;\n  if (!S.lut) return;\n  // Gain slides the 50 dB window the colour map spans.\n  const g = (LUT - 1) / 50;\n  for (let y = 0; y \u003c H; y++) {\n    const r = ((S.head + y) % H) * W;\n    for (let x = 0; x \u003c W; x++) {\n      const i = Math.round(Math.max(0, Math.min(LUT - 1, (S.v[r + x] - S.lo) * g))) * 3;\n      display.setPixel(x, y, S.lut[i], S.lut[i + 1], S.lut[i + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Map=0..1, Scroll=0.5..4, Birds=0..1, Gain=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Map","min":0,"max":1,"about":"The colour map: inferno at 0 blends into magma and then viridis, and at 1 it is the black ink on white paper of a Sona-Graph."},{"name":"Scroll","min":0.5,"max":4,"about":"How fast time falls: at 2 the waterfall moves 24 rows a second and holds five seconds of sound; at 0.5 the songs squeeze into short dashes, at 4 they stretch tall."},{"name":"Birds","min":0,"max":1,"about":"How far the chorus has woken: at 0 a robin, a cuckoo and a wren; turned up, sparrows, a blackbird, a collared dove, a woodpecker and more join, ten in all."},{"name":"Gain","min":-1,"max":1,"about":"Slides the 50 dB window the map spans: turned down, only the songs show over a black floor; turned up, the wind and the far road flood the panel."}],"start":[0,2,0,0.06],"measures":{"motion":2.9689,"detail":0.133,"edges":0.3961,"complexity":2.4228,"coverage":0.9799,"colour":0.4061,"drift":0.0801},"knobResponse":[0.3109,0.1622,0.1596,0.4388]},{"slug":"sprout","title":"Sprout","family":"growth","round":1,"note":"한 LED 씩 자라는 픽셀 들꽃밭이에요. 키 큰 접시꽃 둘이 패널 위쪽까지 올라가 꽃대 아래부터 피어요. 시든 꽃잎은 한 점씩 떨어져 발치에 쌓이고, 시드는 포기 곁에서 새 싹이 올라와요.","idea":"Each stem climbs one LED at a time and only into room nobody else has taken, so a garden draws itself in single pixels, flowers, drops its petals and goes back into the ground.","buttons":"K1 tap sows a seed now.","code":"// ===== Patternflow pattern =====\n// Title:   Sprout\n// Family:  growth\n// Idea:    Each stem climbs one LED at a time and only into room nobody else has taken, so a garden draws itself in single pixels, flowers, drops its petals and goes back into the ground.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Grow=0.25..6, Branches=3..14, Wind=-1..1\n//\n// Knob 1: Hue. The flower colour; each plant takes a shade either side of it.\n// Knob 2: Grow. How fast the tips climb, and with it how soon a plant flowers, withers and makes room.\n// Knob 3: Branches. How many tips a plant may have, from a stem with two side shoots to a small tree.\n// Knob 4: Wind. Leans new growth and sways the tops; left of centre it blows the other way.\n// Buttons: K1 tap sows a seed now.\n\nconst W = 64;\nconst H = 128;\nconst PLANTS = 18;\n// A plant can stand most of the way up the tall panel, so it needs room for more LEDs.\nconst PIX = 720;\nconst TIPS = 96;\n// Petals in the air and on the ground. Fallen ones lie in drifts up to PILE\n// LEDs deep at the foot of the garden.\nconst FALL = 320;\nconst PILE = 5;\n\nconst STEM = 1;\nconst LEAF = 2;\nconst BUD = 3;\nconst PETAL = 4;\nconst HEART = 5;\n\n// Five kinds of plant: a daisy on a tall stem, a tulip on a straight one, a\n// branchy aster with many small heads, a lupine whose top grows florets, and\n// a hollyhock that stands near the top of the panel with cups up its spike.\nconst DAISY = 0;\nconst TULIP = 1;\nconst ASTER = 2;\nconst LUPINE = 3;\nconst HOLLYHOCK = 4;\n// How much a stem wanders off its line.\nconst KIND_WOBBLE = [0.1, 0.04, 0.2, 0.06, 0.03];\nconst KIND_LEN = [74, 44, 40, 78, 94];\nconst KIND_SPREAD = [42, 30, 34, 36, 22];\nconst KIND_FORK = [0.12, 0.05, 0.3, 0.07, 0.02];\nconst KIND_LEAF = [0.12, 0.3, 0.22, 0.16, 0.3];\n// The top of a hollyhock stem, in LEDs, that carries flowers.\nconst SPIKE = 44;\n\n// Flowers as offsets from the tip, a big one for the main stem and a small\n// one for side shoots. The big daisy is seven LEDs across, its heart a plus\n// (HEART_PLUS).\nconst BIG = [\n  [0, -3, -2, -2, -1, -2, 0, -2, 1, -2, 2, -2, -2, -1, -1, -1, 1, -1, 2, -1, -3, 0, -2, 0, 2, 0, 3, 0, -2, 1, -1, 1, 1, 1, 2, 1, -2, 2, -1, 2, 0, 2, 1, 2, 2, 2, 0, 3],\n  [0, -1, -1, -1, 1, -1, -1, -2, 0, -2, 1, -2, -1, -3, 1, -3],\n  [0, -1, -1, -1, 1, -1, -1, 0, 1, 0, -1, 1, 1, 1, 0, -2, 0, -3, -2, -2, 2, -2, -2, 0, -3, 0, 2, 0, 3, 0, -2, 2, 2, 2],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n];\nconst SMALL = [\n  [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 1, 1],\n  [0, -1, -1, -1, 1, -1, -1, -2, 1, -2],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n];\nconst HEART_PLUS = [-1, 0, 1, 0, 0, -1, 0, 1];\n// A hollyhock cup, around a heart two LEDs out from the stem, for a cup on\n// the right; one on the left mirrors it. The open cups low on the spike are\n// wide, the young ones near its top are small.\nconst CUP = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1, 0, -2, 0, 2, 2, 0];\nconst YOUNG_CUP = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1];\n// budGen at or past this marks a hollyhock cup: +1 for the right side, +2 for\n// a wide one. A stem's generation stays below Branches, so it never gets here.\nconst CUP_GEN = 100;\n\nconst GROWING = 1;\nconst HOLDING = 2;\nconst WITHERING = 3;\nconst RECEDING = 4;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction free(p, x, y) {\n  return x >= 0 && x \u003c W && y >= 0 && y \u003c H && p.kind[y * W + x] === 0;\n}\n\n// A tip may step into a pixel only when its two sides and the row ahead are\n// empty, so two branches never touch.\nfunction room(p, x, y) {\n  if (x \u003c 1 || x > W - 2 || y \u003c 3) return false;\n  if (!free(p, x, y) || !free(p, x - 1, y) || !free(p, x + 1, y)) return false;\n  return free(p, x - 1, y - 1) && free(p, x, y - 1) && free(p, x + 1, y - 1);\n}\n\n// Every LED a plant takes goes on its list, in the order it grew.\nfunction put(p, plant, x, y, kind) {\n  const n = p.count[plant];\n  if (n >= PIX) return;\n  const i = y * W + x;\n  p.kind[i] = kind;\n  p.owner[i] = plant;\n  p.pix[plant * PIX + n] = i;\n  p.count[plant] = n + 1;\n  p.lit++;\n}\n\nfunction newTip(p, plant, x, y, len, dir, gen) {\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] >= 0) continue;\n    p.tipPlant[t] = plant;\n    p.tipX[t] = x;\n    p.tipY[t] = y;\n    p.tipLeft[t] = len;\n    p.tipFx[t] = x;\n    p.tipLean[t] = dir;\n    p.tipGen[t] = gen;\n    p.tipSince[t] = 0;\n    p.tipAcc[t] = Math.random();\n    p.tipPace[t] = 0.8 + Math.random() * 0.4;\n    p.tips[plant]++;\n    p.tipsEver[plant]++;\n    return t;\n  }\n  return -1;\n}\n\nfunction sow(p) {\n  let slot = -1;\n  for (let i = 0; i \u003c PLANTS; i++) if (!p.state[i]) slot = i;\n  if (slot \u003c 0) return false;\n  for (let tries = 0; tries \u003c 8; tries++) {\n    const x = 3 + Math.floor(Math.random() * (W - 6));\n    // A plant that is withering or going back into the ground already makes\n    // room: a seed may come up beside it, where its leaves are not in the way.\n    let near = false;\n    for (let i = 0; i \u003c PLANTS; i++) if ((p.state[i] === GROWING || p.state[i] === HOLDING) && Math.abs(p.baseX[i] - x) \u003c 6) near = true;\n    let clear = !near;\n    for (let y = H - 1; clear && y > H - 12; y--) clear = room(p, x, y);\n    if (!clear) continue;\n    // Two hollyhocks stand in the garden whenever there is room for them; the\n    // rest is a mix.\n    let tall = 0;\n    for (let i = 0; i \u003c PLANTS; i++) if ((p.state[i] === GROWING || p.state[i] === HOLDING) && p.style[i] === HOLLYHOCK) tall++;\n    const r = Math.random();\n    const kind = tall \u003c 2 ? HOLLYHOCK : r \u003c 0.32 ? DAISY : r \u003c 0.54 ? TULIP : r \u003c 0.76 ? ASTER : LUPINE;\n    p.state[slot] = GROWING;\n    p.baseX[slot] = x;\n    p.count[slot] = 0;\n    p.tips[slot] = 0;\n    p.tipsEver[slot] = 0;\n    p.buds[slot] = 0;\n    p.wither[slot] = 0;\n    p.stopped[slot] = 0;\n    p.shade[slot] = (Math.random() - 0.5) * 0.18;\n    p.green[slot] = 0.27 + Math.random() * 0.1;\n    p.style[slot] = kind;\n    put(p, slot, x, H - 1, STEM);\n    newTip(p, slot, x, H - 1, KIND_LEN[kind] + Math.floor(Math.random() * KIND_SPREAD[kind]), 0, 0);\n    return true;\n  }\n  return false;\n}\n\nfunction bloom(p, plant, x, y, gen) {\n  const style = p.style[plant];\n  if (gen >= CUP_GEN) {\n    // The bud beside the stem opens into a cup whose heart sits one LED further out.\n    const side = (gen - CUP_GEN) & 1 ? 1 : -1;\n    const shape = (gen - CUP_GEN) & 2 ? CUP : YOUNG_CUP;\n    const cx = x + side;\n    p.kind[y * W + x] = PETAL;\n    p.buds[plant]--;\n    if (free(p, cx, y)) put(p, plant, cx, y, HEART);\n    for (let n = 0; n \u003c shape.length; n += 2) {\n      const px = cx + shape[n] * side;\n      const py = y + shape[n + 1];\n      if (free(p, px, py)) put(p, plant, px, py, PETAL);\n    }\n    return;\n  }\n  // A tulip has no heart showing.\n  p.kind[y * W + x] = style === TULIP ? PETAL : HEART;\n  p.buds[plant]--;\n  const shape = gen === 0 || Math.random() \u003c 0.3 ? BIG[style] : SMALL[style];\n  if (style === DAISY && shape === BIG[DAISY]) {\n    for (let n = 0; n \u003c HEART_PLUS.length; n += 2) if (free(p, x + HEART_PLUS[n], y + HEART_PLUS[n + 1])) put(p, plant, x + HEART_PLUS[n], y + HEART_PLUS[n + 1], HEART);\n  }\n  for (let n = 0; n \u003c shape.length; n += 2) {\n    const px = x + shape[n];\n    const py = y + shape[n + 1];\n    if (free(p, px, py)) put(p, plant, px, py, PETAL);\n  }\n}\n\nfunction endTip(p, t) {\n  const plant = p.tipPlant[t];\n  const i = p.tipY[t] * W + p.tipX[t];\n  // A stem that grew a few LEDs ends in a bud; a stub just stops.\n  if (p.tipSince[t] >= 2 || p.tipGen[t] === 0) {\n    p.kind[i] = BUD;\n    p.budAt[i] = p.budTime * (0.6 + Math.random() * 0.8);\n    p.budGen[i] = p.tipGen[t];\n    p.buds[plant]++;\n  }\n  if (p.tipGen[t] === 0) p.stopped[plant] = 1;\n  p.tipPlant[t] = -1;\n  p.tips[plant]--;\n}\n\nfunction stepTip(p, t, wind) {\n  const plant = p.tipPlant[t];\n  const style = p.style[plant];\n  const x = p.tipX[t];\n  const y = p.tipY[t];\n  if (p.tipLeft[t] \u003c= 0 || p.count[plant] > PIX - 24) {\n    endTip(p, t);\n    return;\n  }\n  // The stem keeps a heading, LEDs across per LED up. It eases back towards\n  // upright, or towards the wind, so a side shoot leaves at a slant and\n  // curves up like a candelabra arm.\n  let lean = p.tipLean[t];\n  lean += (wind * 0.45 - lean) * 0.14 + (Math.random() - 0.5) * KIND_WOBBLE[style];\n  lean = Math.max(-1, Math.min(1, lean));\n  let fx = p.tipFx[t] + lean;\n  let nx = Math.round(fx);\n  const ny = y - 1;\n  if (nx \u003c x - 1) nx = x - 1;\n  if (nx > x + 1) nx = x + 1;\n  if (fx > nx + 0.5) fx = nx + 0.5;\n  if (fx \u003c nx - 0.5) fx = nx - 0.5;\n  if (!room(p, nx, ny)) {\n    // Blocked: a slanted tip tries straight up, and a straight one tries the\n    // slant it leans to, then the other. Right after a fork the side shoot\n    // has taken a cell beside the stem, and the stem steps away from it.\n    const toward = lean \u003c 0 ? x - 1 : x + 1;\n    const away = lean \u003c 0 ? x + 1 : x - 1;\n    const other = nx !== x ? x : room(p, toward, ny) ? toward : away;\n    if (room(p, other, ny)) {\n      nx = other;\n      fx = nx;\n      lean *= 0.3;\n    } else {\n      endTip(p, t);\n      return;\n    }\n  }\n  put(p, plant, nx, ny, STEM);\n  p.tipX[t] = nx;\n  p.tipY[t] = ny;\n  p.tipFx[t] = fx;\n  p.tipLean[t] = lean;\n  p.tipLeft[t]--;\n  p.tipSince[t]++;\n\n  if (style === LUPINE && p.tipGen[t] === 0 && p.tipLeft[t] \u003c 22) {\n    // The top of a lupine climbs with a floret either side.\n    for (let side = -1; side \u003c= 1; side += 2) {\n      if (free(p, nx + side, ny + 1) && free(p, nx + side * 2, ny + 1)) put(p, plant, nx + side, ny + 1, PETAL);\n    }\n  } else if (style === HOLLYHOCK && (p.tipGen[t] === 0 || p.stopped[plant]) && p.tipLeft[t] \u003c SPIKE && ny \u003c H - 40) {\n    // Up the spike a bud every third LED, one side then the other. They open\n    // from the bottom up, as the stem passes them. When the stem is stopped,\n    // often by its own side shoot right after a fork, a side shoot carries\n    // the spike instead.\n    const left = p.tipLeft[t];\n    const side = ((left / 3) | 0) & 1 ? 1 : -1;\n    const bx = nx + side;\n    if (left % 3 === 0 && left > 2 && free(p, bx, ny + 1) && free(p, bx + side, ny + 1)) {\n      put(p, plant, bx, ny + 1, BUD);\n      const c = (ny + 1) * W + bx;\n      p.budAt[c] = p.budTime * (0.8 + Math.random() * 0.5);\n      p.budGen[c] = CUP_GEN + (side > 0 ? 1 : 0) + (left > 14 ? 2 : 0);\n      p.buds[plant]++;\n    }\n  } else if (\n    p.tipSince[t] > 1 &&\n    // A tulip keeps its leaves low, and a hollyhock its big ones.\n    Math.random() \u003c KIND_LEAF[style] * (style === TULIP && ny \u003c H - 18 ? 0.2 : style === HOLLYHOCK && ny \u003c H - 48 ? 0.15 : 1)\n  ) {\n    // Now and then a leaf beside the stem, rising away from it.\n    const side = Math.random() \u003c 0.5 ? -1 : 1;\n    const lx = nx + side;\n    if (free(p, lx, ny + 1) && free(p, lx + side, ny + 1) && free(p, lx, ny) && free(p, lx, ny + 2)) {\n      // An aster carries small florets where another plant has leaves.\n      if (style === ASTER && Math.random() \u003c 0.6) put(p, plant, lx, ny + 1, PETAL);\n      else {\n        put(p, plant, lx, ny + 1, LEAF);\n        if (Math.random() \u003c 0.6 && free(p, lx + side, ny) && free(p, lx + side * 2, ny)) put(p, plant, lx + side, ny, LEAF);\n      }\n    }\n  }\n\n  // A fork: the side shoot heads out one way and the stem leans the other.\n  if (\n    p.tipsEver[plant] \u003c p.branches &&\n    p.tipSince[t] > 3 &&\n    p.tipLeft[t] > 6 &&\n    Math.random() \u003c KIND_FORK[style] * (0.6 + p.branches * 0.12)\n  ) {\n    const side = Math.random() \u003c 0.5 ? -1 : 1;\n    const len = Math.floor(p.tipLeft[t] * (0.45 + Math.random() * 0.35));\n    if (newTip(p, plant, nx, ny, len, side * (0.75 + Math.random() * 0.25), p.tipGen[t] + 1) >= 0) {\n      p.tipLean[t] -= side * 0.35;\n      p.tipSince[t] = 0;\n    }\n  }\n}\n\nfunction release(p, x, y, hue) {\n  for (let f = 0; f \u003c FALL; f++) {\n    if (p.fState[f]) continue;\n    p.fState[f] = 1;\n    p.fx[f] = x + 0.5;\n    p.fy[f] = y + 0.5;\n    p.fHue[f] = hue;\n    p.fRest[f] = 0;\n    p.fSway[f] = Math.random() * 6.28;\n    return;\n  }\n}\n\n// A petal that lands rolls off a drift onto a lower neighbour, downwind\n// first, so the drifts slope like sand. On a full drift it blows away.\nfunction settle(p, f, wind, slow) {\n  const down = wind \u003c 0 ? -1 : 1;\n  let x = Math.floor(p.fx[f]);\n  for (let roll = 0; roll \u003c W; roll++) {\n    const a = x + down;\n    const b = x - down;\n    if (a >= 0 && a \u003c W && p.pile[a] + 1 \u003c p.pile[x]) x = a;\n    else if (b >= 0 && b \u003c W && p.pile[b] + 1 \u003c p.pile[x]) x = b;\n    else break;\n  }\n  if (p.pile[x] >= PILE) {\n    p.fState[f] = 0;\n    return;\n  }\n  p.fx[f] = x + 0.5;\n  p.fy[f] = H - 0.5 - p.pile[x];\n  p.pile[x]++;\n  p.fState[f] = 2;\n  p.fRest[f] = (12 + Math.random() * 14) * slow;\n}\n\n// A fallen petal goes into the soil, and the ones lying on it settle a LED.\nfunction sink(p, f) {\n  const x = Math.floor(p.fx[f]);\n  const y = p.fy[f];\n  p.fState[f] = 0;\n  p.pile[x]--;\n  for (let g = 0; g \u003c FALL; g++) if (p.fState[g] === 2 && Math.floor(p.fx[g]) === x && p.fy[g] \u003c y) p.fy[g] += 1;\n}\n\nfunction step(p, dt, k) {\n  const pace = k[1];\n  const wind = k[3];\n  p.branches = Math.round(k[2]);\n  p.clock += dt;\n  // Tips climb faster than on the wide panel: a stem here goes twice as high in the same season.\n  const rate = 2.6 * pace;\n  // Everything after growing runs on the same clock as the growing.\n  const slow = 2 / pace;\n  p.budTime = 1.2 * slow;\n\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] \u003c 0) continue;\n    p.tipAcc[t] += dt * rate * p.tipPace[t];\n    while (p.tipAcc[t] >= 1 && p.tipPlant[t] >= 0) {\n      p.tipAcc[t] -= 1;\n      stepTip(p, t, wind);\n    }\n  }\n\n  for (let i = 0; i \u003c PLANTS; i++) {\n    const s = p.state[i];\n    if (!s) continue;\n    const base = i * PIX;\n    if (s === GROWING || s === HOLDING) {\n      // Buds open in their own time.\n      if (p.buds[i] > 0) {\n        for (let n = 0; n \u003c p.count[i]; n++) {\n          const c = p.pix[base + n];\n          if (p.kind[c] !== BUD || p.owner[c] !== i) continue;\n          p.budAt[c] -= dt;\n          if (p.budAt[c] \u003c= 0) bloom(p, i, c % W, (c - (c % W)) / W, p.budGen[c]);\n        }\n      }\n      if (s === GROWING && p.tips[i] === 0 && p.buds[i] \u003c= 0) {\n        p.state[i] = HOLDING;\n        p.timer[i] = (12 + Math.random() * 12) * slow;\n      }\n      if (s === HOLDING) {\n        p.timer[i] -= dt;\n        if (p.timer[i] \u003c= 0) {\n          p.state[i] = WITHERING;\n          p.timer[i] = 0;\n        }\n      }\n    } else if (s === WITHERING) {\n      p.timer[i] += dt / (1.8 * slow);\n      p.wither[i] = Math.min(1, p.timer[i]);\n      // Petals let go one by one and fall.\n      for (let n = 0; n \u003c p.count[i]; n++) {\n        const c = p.pix[base + n];\n        if (p.owner[c] !== i || (p.kind[c] !== PETAL && p.kind[c] !== HEART)) continue;\n        if (Math.random() \u003c (dt * 2) / slow) {\n          if (p.kind[c] === PETAL) {\n            // It falls from where the wind has it, not from where it grew.\n            const py = (c - (c % W)) / W;\n            release(p, (c % W) + p.offset[py], py, p.hue + p.shade[i]);\n          }\n          p.kind[c] = p.kind[c] === PETAL ? 0 : STEM;\n          if (!p.kind[c]) p.lit--;\n        }\n      }\n      if (p.timer[i] >= 1) {\n        p.state[i] = RECEDING;\n        p.timer[i] = 0;\n      }\n    } else if (s === RECEDING) {\n      // The plant goes back the way it grew, newest LED first.\n      p.timer[i] += dt * rate * 8;\n      while (p.timer[i] >= 1 && p.count[i] > 0) {\n        p.timer[i] -= 1;\n        const n = --p.count[i];\n        const c = p.pix[base + n];\n        if (p.owner[c] === i && p.kind[c]) {\n          p.kind[c] = 0;\n          p.lit--;\n        }\n      }\n      if (p.count[i] === 0) p.state[i] = 0;\n    }\n  }\n\n  for (let f = 0; f \u003c FALL; f++) {\n    if (!p.fState[f]) continue;\n    if (p.fState[f] === 1) {\n      p.fSway[f] += dt * 2.2;\n      p.fy[f] += dt * (3 + 1.5 * Math.sin(p.fSway[f] * 0.7));\n      p.fx[f] += dt * (wind * 5 + Math.sin(p.fSway[f]) * 2.5);\n      if (p.fx[f] \u003c 0 || p.fx[f] >= W) {\n        p.fState[f] = 0;\n        continue;\n      }\n      if (p.fy[f] >= H - 0.5 - p.pile[Math.floor(p.fx[f])]) settle(p, f, wind, slow);\n    } else {\n      p.fRest[f] -= dt;\n      if (p.fRest[f] \u003c= 0) sink(p, f);\n    }\n  }\n\n  // Sow when the garden is thin, and hold off when it is crowded.\n  let alive = 0;\n  for (let i = 0; i \u003c PLANTS; i++) if (p.state[i] === GROWING || p.state[i] === HOLDING) alive++;\n  p.sowTimer -= dt;\n  if (p.sowTimer \u003c= 0 && alive \u003c 15 && p.lit \u003c W * H * 0.24) {\n    if (sow(p)) p.sowTimer = (0.6 + Math.random() * 2.2) * slow;\n    else p.sowTimer = 0.5;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.kind = new Uint8Array(W * H);\n  p.owner = new Uint8Array(W * H);\n  p.budAt = new Float32Array(W * H);\n  p.budGen = new Uint8Array(W * H);\n  p.pix = new Int16Array(PLANTS * PIX);\n  p.count = new Int16Array(PLANTS);\n  p.state = new Uint8Array(PLANTS);\n  p.baseX = new Int16Array(PLANTS);\n  p.tips = new Int16Array(PLANTS);\n  p.tipsEver = new Int16Array(PLANTS);\n  p.buds = new Int16Array(PLANTS);\n  p.timer = new Float32Array(PLANTS);\n  p.wither = new Float32Array(PLANTS);\n  p.stopped = new Uint8Array(PLANTS);\n  p.shade = new Float32Array(PLANTS);\n  p.green = new Float32Array(PLANTS);\n  p.style = new Uint8Array(PLANTS);\n  p.tipPlant = new Int8Array(TIPS).fill(-1);\n  p.tipX = new Int16Array(TIPS);\n  p.tipY = new Int16Array(TIPS);\n  p.tipLeft = new Int16Array(TIPS);\n  p.tipFx = new Float32Array(TIPS);\n  p.tipLean = new Float32Array(TIPS);\n  p.tipGen = new Uint8Array(TIPS);\n  p.tipSince = new Int16Array(TIPS);\n  p.tipAcc = new Float32Array(TIPS);\n  p.tipPace = new Float32Array(TIPS);\n  p.fx = new Float32Array(FALL);\n  p.fy = new Float32Array(FALL);\n  p.fHue = new Float32Array(FALL);\n  p.fState = new Uint8Array(FALL);\n  p.fRest = new Float32Array(FALL);\n  p.fSway = new Float32Array(FALL);\n  p.pile = new Uint8Array(W);\n  p.offset = new Int8Array(H);\n  p.col = new Float32Array(3);\n  p.lit = 0;\n  p.clock = 0;\n  p.sowTimer = 0;\n  p.budTime = 1;\n  p.branches = 2;\n  p.hue = 0;\n  p.ready = false;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  p.hue = k[0];\n  p.wind = k[3];\n  if (!p.ready) {\n    // Grow a garden before the first frame, so it opens mid-season at any\n    // pace: a slow garden is grown in longer steps.\n    p.ready = true;\n    const tick = (1 / 15) * Math.min(4, 2 / k[1]);\n    for (let i = 0; i \u003c 1600; i++) step(p, tick, k);\n  }\n  if (input.btnPressed && input.btnPressed[0]) sow(p);\n  step(p, dt, k);\n\n  // The tops sway more than the roots; at no wind nothing moves.\n  const w = p.wind;\n  const gust = 0.75 + 0.25 * Math.sin(p.clock * 0.9) + 0.15 * Math.sin(p.clock * 2.3);\n  for (let y = 0; y \u003c H; y++) {\n    const up = (H - 1 - y) / (H - 1);\n    p.offset[y] = Math.round(w * up * up * 5 * gust);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const col = p.col;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n\n  for (let y = 0; y \u003c H; y++) {\n    const o = p.offset[y];\n    for (let x = 0; x \u003c W; x++) {\n      const c = y * W + x;\n      const kind = p.kind[c];\n      if (!kind) continue;\n      const sx = x + o;\n      if (sx \u003c 0 || sx >= W) continue;\n      const plant = p.owner[c];\n      const dry = p.wither[plant];\n      if (kind === STEM) {\n        hsv(p.green[plant] - dry * 0.2, 0.82, 0.6 - dry * 0.12, col, 0);\n      } else if (kind === LEAF) {\n        hsv(p.green[plant] - 0.04 - dry * 0.17, 0.72 + dry * 0.1, 0.92 - dry * 0.35, col, 0);\n      } else if (kind === BUD) {\n        hsv(p.hue + p.shade[plant], 0.4, 1, col, 0);\n      } else if (kind === PETAL) {\n        hsv(p.hue + p.shade[plant], 0.82, 1 - dry * 0.3, col, 0);\n      } else {\n        // A warm heart, unless the petals are warm already.\n        const hh = p.hue + p.shade[plant];\n        const d = Math.abs(hh - Math.round(hh - 0.14) - 0.14);\n        hsv(d \u003c 0.09 ? 0.0 : 0.135, 0.8, 1 - dry * 0.4, col, 0);\n      }\n      display.setPixel(sx, y, col[0], col[1], col[2]);\n    }\n  }\n\n  // Growing tips are drawn pale, the newest LED of each stem.\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] \u003c 0) continue;\n    const y = p.tipY[t];\n    hsv(0.2, 0.4, 1, col, 0);\n    display.setPixel(p.tipX[t] + p.offset[y], y, col[0], col[1], col[2]);\n  }\n\n  for (let f = 0; f \u003c FALL; f++) {\n    if (!p.fState[f]) continue;\n    // A fallen petal is paler than one in the air. Darker, an orange one read as brown.\n    hsv(p.fHue[f], p.fState[f] === 1 ? 0.82 : 0.66, 0.85, col, 0);\n    display.setPixel(Math.floor(p.fx[f]), Math.floor(p.fy[f]), col[0], col[1], col[2]);\n  }\n}\n","layer":{"id":"layer-sprout","type":"code","name":"sprout","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sprout\n// Family:  growth\n// Idea:    Each stem climbs one LED at a time and only into room nobody else has taken, so a garden draws itself in single pixels, flowers, drops its petals and goes back into the ground.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Grow=0.25..6, Branches=3..14, Wind=-1..1\n//\n// Knob 1: Hue. The flower colour; each plant takes a shade either side of it.\n// Knob 2: Grow. How fast the tips climb, and with it how soon a plant flowers, withers and makes room.\n// Knob 3: Branches. How many tips a plant may have, from a stem with two side shoots to a small tree.\n// Knob 4: Wind. Leans new growth and sways the tops; left of centre it blows the other way.\n// Buttons: K1 tap sows a seed now.\n\nconst W = 64;\nconst H = 128;\nconst PLANTS = 18;\n// A plant can stand most of the way up the tall panel, so it needs room for more LEDs.\nconst PIX = 720;\nconst TIPS = 96;\n// Petals in the air and on the ground. Fallen ones lie in drifts up to PILE\n// LEDs deep at the foot of the garden.\nconst FALL = 320;\nconst PILE = 5;\n\nconst STEM = 1;\nconst LEAF = 2;\nconst BUD = 3;\nconst PETAL = 4;\nconst HEART = 5;\n\n// Five kinds of plant: a daisy on a tall stem, a tulip on a straight one, a\n// branchy aster with many small heads, a lupine whose top grows florets, and\n// a hollyhock that stands near the top of the panel with cups up its spike.\nconst DAISY = 0;\nconst TULIP = 1;\nconst ASTER = 2;\nconst LUPINE = 3;\nconst HOLLYHOCK = 4;\n// How much a stem wanders off its line.\nconst KIND_WOBBLE = [0.1, 0.04, 0.2, 0.06, 0.03];\nconst KIND_LEN = [74, 44, 40, 78, 94];\nconst KIND_SPREAD = [42, 30, 34, 36, 22];\nconst KIND_FORK = [0.12, 0.05, 0.3, 0.07, 0.02];\nconst KIND_LEAF = [0.12, 0.3, 0.22, 0.16, 0.3];\n// The top of a hollyhock stem, in LEDs, that carries flowers.\nconst SPIKE = 44;\n\n// Flowers as offsets from the tip, a big one for the main stem and a small\n// one for side shoots. The big daisy is seven LEDs across, its heart a plus\n// (HEART_PLUS).\nconst BIG = [\n  [0, -3, -2, -2, -1, -2, 0, -2, 1, -2, 2, -2, -2, -1, -1, -1, 1, -1, 2, -1, -3, 0, -2, 0, 2, 0, 3, 0, -2, 1, -1, 1, 1, 1, 2, 1, -2, 2, -1, 2, 0, 2, 1, 2, 2, 2, 0, 3],\n  [0, -1, -1, -1, 1, -1, -1, -2, 0, -2, 1, -2, -1, -3, 1, -3],\n  [0, -1, -1, -1, 1, -1, -1, 0, 1, 0, -1, 1, 1, 1, 0, -2, 0, -3, -2, -2, 2, -2, -2, 0, -3, 0, 2, 0, 3, 0, -2, 2, 2, 2],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n];\nconst SMALL = [\n  [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 1, 1],\n  [0, -1, -1, -1, 1, -1, -1, -2, 1, -2],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n  [-1, 0, 1, 0, 0, -1],\n];\nconst HEART_PLUS = [-1, 0, 1, 0, 0, -1, 0, 1];\n// A hollyhock cup, around a heart two LEDs out from the stem, for a cup on\n// the right; one on the left mirrors it. The open cups low on the spike are\n// wide, the young ones near its top are small.\nconst CUP = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1, 0, -2, 0, 2, 2, 0];\nconst YOUNG_CUP = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1];\n// budGen at or past this marks a hollyhock cup: +1 for the right side, +2 for\n// a wide one. A stem's generation stays below Branches, so it never gets here.\nconst CUP_GEN = 100;\n\nconst GROWING = 1;\nconst HOLDING = 2;\nconst WITHERING = 3;\nconst RECEDING = 4;\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction free(p, x, y) {\n  return x >= 0 && x \u003c W && y >= 0 && y \u003c H && p.kind[y * W + x] === 0;\n}\n\n// A tip may step into a pixel only when its two sides and the row ahead are\n// empty, so two branches never touch.\nfunction room(p, x, y) {\n  if (x \u003c 1 || x > W - 2 || y \u003c 3) return false;\n  if (!free(p, x, y) || !free(p, x - 1, y) || !free(p, x + 1, y)) return false;\n  return free(p, x - 1, y - 1) && free(p, x, y - 1) && free(p, x + 1, y - 1);\n}\n\n// Every LED a plant takes goes on its list, in the order it grew.\nfunction put(p, plant, x, y, kind) {\n  const n = p.count[plant];\n  if (n >= PIX) return;\n  const i = y * W + x;\n  p.kind[i] = kind;\n  p.owner[i] = plant;\n  p.pix[plant * PIX + n] = i;\n  p.count[plant] = n + 1;\n  p.lit++;\n}\n\nfunction newTip(p, plant, x, y, len, dir, gen) {\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] >= 0) continue;\n    p.tipPlant[t] = plant;\n    p.tipX[t] = x;\n    p.tipY[t] = y;\n    p.tipLeft[t] = len;\n    p.tipFx[t] = x;\n    p.tipLean[t] = dir;\n    p.tipGen[t] = gen;\n    p.tipSince[t] = 0;\n    p.tipAcc[t] = Math.random();\n    p.tipPace[t] = 0.8 + Math.random() * 0.4;\n    p.tips[plant]++;\n    p.tipsEver[plant]++;\n    return t;\n  }\n  return -1;\n}\n\nfunction sow(p) {\n  let slot = -1;\n  for (let i = 0; i \u003c PLANTS; i++) if (!p.state[i]) slot = i;\n  if (slot \u003c 0) return false;\n  for (let tries = 0; tries \u003c 8; tries++) {\n    const x = 3 + Math.floor(Math.random() * (W - 6));\n    // A plant that is withering or going back into the ground already makes\n    // room: a seed may come up beside it, where its leaves are not in the way.\n    let near = false;\n    for (let i = 0; i \u003c PLANTS; i++) if ((p.state[i] === GROWING || p.state[i] === HOLDING) && Math.abs(p.baseX[i] - x) \u003c 6) near = true;\n    let clear = !near;\n    for (let y = H - 1; clear && y > H - 12; y--) clear = room(p, x, y);\n    if (!clear) continue;\n    // Two hollyhocks stand in the garden whenever there is room for them; the\n    // rest is a mix.\n    let tall = 0;\n    for (let i = 0; i \u003c PLANTS; i++) if ((p.state[i] === GROWING || p.state[i] === HOLDING) && p.style[i] === HOLLYHOCK) tall++;\n    const r = Math.random();\n    const kind = tall \u003c 2 ? HOLLYHOCK : r \u003c 0.32 ? DAISY : r \u003c 0.54 ? TULIP : r \u003c 0.76 ? ASTER : LUPINE;\n    p.state[slot] = GROWING;\n    p.baseX[slot] = x;\n    p.count[slot] = 0;\n    p.tips[slot] = 0;\n    p.tipsEver[slot] = 0;\n    p.buds[slot] = 0;\n    p.wither[slot] = 0;\n    p.stopped[slot] = 0;\n    p.shade[slot] = (Math.random() - 0.5) * 0.18;\n    p.green[slot] = 0.27 + Math.random() * 0.1;\n    p.style[slot] = kind;\n    put(p, slot, x, H - 1, STEM);\n    newTip(p, slot, x, H - 1, KIND_LEN[kind] + Math.floor(Math.random() * KIND_SPREAD[kind]), 0, 0);\n    return true;\n  }\n  return false;\n}\n\nfunction bloom(p, plant, x, y, gen) {\n  const style = p.style[plant];\n  if (gen >= CUP_GEN) {\n    // The bud beside the stem opens into a cup whose heart sits one LED further out.\n    const side = (gen - CUP_GEN) & 1 ? 1 : -1;\n    const shape = (gen - CUP_GEN) & 2 ? CUP : YOUNG_CUP;\n    const cx = x + side;\n    p.kind[y * W + x] = PETAL;\n    p.buds[plant]--;\n    if (free(p, cx, y)) put(p, plant, cx, y, HEART);\n    for (let n = 0; n \u003c shape.length; n += 2) {\n      const px = cx + shape[n] * side;\n      const py = y + shape[n + 1];\n      if (free(p, px, py)) put(p, plant, px, py, PETAL);\n    }\n    return;\n  }\n  // A tulip has no heart showing.\n  p.kind[y * W + x] = style === TULIP ? PETAL : HEART;\n  p.buds[plant]--;\n  const shape = gen === 0 || Math.random() \u003c 0.3 ? BIG[style] : SMALL[style];\n  if (style === DAISY && shape === BIG[DAISY]) {\n    for (let n = 0; n \u003c HEART_PLUS.length; n += 2) if (free(p, x + HEART_PLUS[n], y + HEART_PLUS[n + 1])) put(p, plant, x + HEART_PLUS[n], y + HEART_PLUS[n + 1], HEART);\n  }\n  for (let n = 0; n \u003c shape.length; n += 2) {\n    const px = x + shape[n];\n    const py = y + shape[n + 1];\n    if (free(p, px, py)) put(p, plant, px, py, PETAL);\n  }\n}\n\nfunction endTip(p, t) {\n  const plant = p.tipPlant[t];\n  const i = p.tipY[t] * W + p.tipX[t];\n  // A stem that grew a few LEDs ends in a bud; a stub just stops.\n  if (p.tipSince[t] >= 2 || p.tipGen[t] === 0) {\n    p.kind[i] = BUD;\n    p.budAt[i] = p.budTime * (0.6 + Math.random() * 0.8);\n    p.budGen[i] = p.tipGen[t];\n    p.buds[plant]++;\n  }\n  if (p.tipGen[t] === 0) p.stopped[plant] = 1;\n  p.tipPlant[t] = -1;\n  p.tips[plant]--;\n}\n\nfunction stepTip(p, t, wind) {\n  const plant = p.tipPlant[t];\n  const style = p.style[plant];\n  const x = p.tipX[t];\n  const y = p.tipY[t];\n  if (p.tipLeft[t] \u003c= 0 || p.count[plant] > PIX - 24) {\n    endTip(p, t);\n    return;\n  }\n  // The stem keeps a heading, LEDs across per LED up. It eases back towards\n  // upright, or towards the wind, so a side shoot leaves at a slant and\n  // curves up like a candelabra arm.\n  let lean = p.tipLean[t];\n  lean += (wind * 0.45 - lean) * 0.14 + (Math.random() - 0.5) * KIND_WOBBLE[style];\n  lean = Math.max(-1, Math.min(1, lean));\n  let fx = p.tipFx[t] + lean;\n  let nx = Math.round(fx);\n  const ny = y - 1;\n  if (nx \u003c x - 1) nx = x - 1;\n  if (nx > x + 1) nx = x + 1;\n  if (fx > nx + 0.5) fx = nx + 0.5;\n  if (fx \u003c nx - 0.5) fx = nx - 0.5;\n  if (!room(p, nx, ny)) {\n    // Blocked: a slanted tip tries straight up, and a straight one tries the\n    // slant it leans to, then the other. Right after a fork the side shoot\n    // has taken a cell beside the stem, and the stem steps away from it.\n    const toward = lean \u003c 0 ? x - 1 : x + 1;\n    const away = lean \u003c 0 ? x + 1 : x - 1;\n    const other = nx !== x ? x : room(p, toward, ny) ? toward : away;\n    if (room(p, other, ny)) {\n      nx = other;\n      fx = nx;\n      lean *= 0.3;\n    } else {\n      endTip(p, t);\n      return;\n    }\n  }\n  put(p, plant, nx, ny, STEM);\n  p.tipX[t] = nx;\n  p.tipY[t] = ny;\n  p.tipFx[t] = fx;\n  p.tipLean[t] = lean;\n  p.tipLeft[t]--;\n  p.tipSince[t]++;\n\n  if (style === LUPINE && p.tipGen[t] === 0 && p.tipLeft[t] \u003c 22) {\n    // The top of a lupine climbs with a floret either side.\n    for (let side = -1; side \u003c= 1; side += 2) {\n      if (free(p, nx + side, ny + 1) && free(p, nx + side * 2, ny + 1)) put(p, plant, nx + side, ny + 1, PETAL);\n    }\n  } else if (style === HOLLYHOCK && (p.tipGen[t] === 0 || p.stopped[plant]) && p.tipLeft[t] \u003c SPIKE && ny \u003c H - 40) {\n    // Up the spike a bud every third LED, one side then the other. They open\n    // from the bottom up, as the stem passes them. When the stem is stopped,\n    // often by its own side shoot right after a fork, a side shoot carries\n    // the spike instead.\n    const left = p.tipLeft[t];\n    const side = ((left / 3) | 0) & 1 ? 1 : -1;\n    const bx = nx + side;\n    if (left % 3 === 0 && left > 2 && free(p, bx, ny + 1) && free(p, bx + side, ny + 1)) {\n      put(p, plant, bx, ny + 1, BUD);\n      const c = (ny + 1) * W + bx;\n      p.budAt[c] = p.budTime * (0.8 + Math.random() * 0.5);\n      p.budGen[c] = CUP_GEN + (side > 0 ? 1 : 0) + (left > 14 ? 2 : 0);\n      p.buds[plant]++;\n    }\n  } else if (\n    p.tipSince[t] > 1 &&\n    // A tulip keeps its leaves low, and a hollyhock its big ones.\n    Math.random() \u003c KIND_LEAF[style] * (style === TULIP && ny \u003c H - 18 ? 0.2 : style === HOLLYHOCK && ny \u003c H - 48 ? 0.15 : 1)\n  ) {\n    // Now and then a leaf beside the stem, rising away from it.\n    const side = Math.random() \u003c 0.5 ? -1 : 1;\n    const lx = nx + side;\n    if (free(p, lx, ny + 1) && free(p, lx + side, ny + 1) && free(p, lx, ny) && free(p, lx, ny + 2)) {\n      // An aster carries small florets where another plant has leaves.\n      if (style === ASTER && Math.random() \u003c 0.6) put(p, plant, lx, ny + 1, PETAL);\n      else {\n        put(p, plant, lx, ny + 1, LEAF);\n        if (Math.random() \u003c 0.6 && free(p, lx + side, ny) && free(p, lx + side * 2, ny)) put(p, plant, lx + side, ny, LEAF);\n      }\n    }\n  }\n\n  // A fork: the side shoot heads out one way and the stem leans the other.\n  if (\n    p.tipsEver[plant] \u003c p.branches &&\n    p.tipSince[t] > 3 &&\n    p.tipLeft[t] > 6 &&\n    Math.random() \u003c KIND_FORK[style] * (0.6 + p.branches * 0.12)\n  ) {\n    const side = Math.random() \u003c 0.5 ? -1 : 1;\n    const len = Math.floor(p.tipLeft[t] * (0.45 + Math.random() * 0.35));\n    if (newTip(p, plant, nx, ny, len, side * (0.75 + Math.random() * 0.25), p.tipGen[t] + 1) >= 0) {\n      p.tipLean[t] -= side * 0.35;\n      p.tipSince[t] = 0;\n    }\n  }\n}\n\nfunction release(p, x, y, hue) {\n  for (let f = 0; f \u003c FALL; f++) {\n    if (p.fState[f]) continue;\n    p.fState[f] = 1;\n    p.fx[f] = x + 0.5;\n    p.fy[f] = y + 0.5;\n    p.fHue[f] = hue;\n    p.fRest[f] = 0;\n    p.fSway[f] = Math.random() * 6.28;\n    return;\n  }\n}\n\n// A petal that lands rolls off a drift onto a lower neighbour, downwind\n// first, so the drifts slope like sand. On a full drift it blows away.\nfunction settle(p, f, wind, slow) {\n  const down = wind \u003c 0 ? -1 : 1;\n  let x = Math.floor(p.fx[f]);\n  for (let roll = 0; roll \u003c W; roll++) {\n    const a = x + down;\n    const b = x - down;\n    if (a >= 0 && a \u003c W && p.pile[a] + 1 \u003c p.pile[x]) x = a;\n    else if (b >= 0 && b \u003c W && p.pile[b] + 1 \u003c p.pile[x]) x = b;\n    else break;\n  }\n  if (p.pile[x] >= PILE) {\n    p.fState[f] = 0;\n    return;\n  }\n  p.fx[f] = x + 0.5;\n  p.fy[f] = H - 0.5 - p.pile[x];\n  p.pile[x]++;\n  p.fState[f] = 2;\n  p.fRest[f] = (12 + Math.random() * 14) * slow;\n}\n\n// A fallen petal goes into the soil, and the ones lying on it settle a LED.\nfunction sink(p, f) {\n  const x = Math.floor(p.fx[f]);\n  const y = p.fy[f];\n  p.fState[f] = 0;\n  p.pile[x]--;\n  for (let g = 0; g \u003c FALL; g++) if (p.fState[g] === 2 && Math.floor(p.fx[g]) === x && p.fy[g] \u003c y) p.fy[g] += 1;\n}\n\nfunction step(p, dt, k) {\n  const pace = k[1];\n  const wind = k[3];\n  p.branches = Math.round(k[2]);\n  p.clock += dt;\n  // Tips climb faster than on the wide panel: a stem here goes twice as high in the same season.\n  const rate = 2.6 * pace;\n  // Everything after growing runs on the same clock as the growing.\n  const slow = 2 / pace;\n  p.budTime = 1.2 * slow;\n\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] \u003c 0) continue;\n    p.tipAcc[t] += dt * rate * p.tipPace[t];\n    while (p.tipAcc[t] >= 1 && p.tipPlant[t] >= 0) {\n      p.tipAcc[t] -= 1;\n      stepTip(p, t, wind);\n    }\n  }\n\n  for (let i = 0; i \u003c PLANTS; i++) {\n    const s = p.state[i];\n    if (!s) continue;\n    const base = i * PIX;\n    if (s === GROWING || s === HOLDING) {\n      // Buds open in their own time.\n      if (p.buds[i] > 0) {\n        for (let n = 0; n \u003c p.count[i]; n++) {\n          const c = p.pix[base + n];\n          if (p.kind[c] !== BUD || p.owner[c] !== i) continue;\n          p.budAt[c] -= dt;\n          if (p.budAt[c] \u003c= 0) bloom(p, i, c % W, (c - (c % W)) / W, p.budGen[c]);\n        }\n      }\n      if (s === GROWING && p.tips[i] === 0 && p.buds[i] \u003c= 0) {\n        p.state[i] = HOLDING;\n        p.timer[i] = (12 + Math.random() * 12) * slow;\n      }\n      if (s === HOLDING) {\n        p.timer[i] -= dt;\n        if (p.timer[i] \u003c= 0) {\n          p.state[i] = WITHERING;\n          p.timer[i] = 0;\n        }\n      }\n    } else if (s === WITHERING) {\n      p.timer[i] += dt / (1.8 * slow);\n      p.wither[i] = Math.min(1, p.timer[i]);\n      // Petals let go one by one and fall.\n      for (let n = 0; n \u003c p.count[i]; n++) {\n        const c = p.pix[base + n];\n        if (p.owner[c] !== i || (p.kind[c] !== PETAL && p.kind[c] !== HEART)) continue;\n        if (Math.random() \u003c (dt * 2) / slow) {\n          if (p.kind[c] === PETAL) {\n            // It falls from where the wind has it, not from where it grew.\n            const py = (c - (c % W)) / W;\n            release(p, (c % W) + p.offset[py], py, p.hue + p.shade[i]);\n          }\n          p.kind[c] = p.kind[c] === PETAL ? 0 : STEM;\n          if (!p.kind[c]) p.lit--;\n        }\n      }\n      if (p.timer[i] >= 1) {\n        p.state[i] = RECEDING;\n        p.timer[i] = 0;\n      }\n    } else if (s === RECEDING) {\n      // The plant goes back the way it grew, newest LED first.\n      p.timer[i] += dt * rate * 8;\n      while (p.timer[i] >= 1 && p.count[i] > 0) {\n        p.timer[i] -= 1;\n        const n = --p.count[i];\n        const c = p.pix[base + n];\n        if (p.owner[c] === i && p.kind[c]) {\n          p.kind[c] = 0;\n          p.lit--;\n        }\n      }\n      if (p.count[i] === 0) p.state[i] = 0;\n    }\n  }\n\n  for (let f = 0; f \u003c FALL; f++) {\n    if (!p.fState[f]) continue;\n    if (p.fState[f] === 1) {\n      p.fSway[f] += dt * 2.2;\n      p.fy[f] += dt * (3 + 1.5 * Math.sin(p.fSway[f] * 0.7));\n      p.fx[f] += dt * (wind * 5 + Math.sin(p.fSway[f]) * 2.5);\n      if (p.fx[f] \u003c 0 || p.fx[f] >= W) {\n        p.fState[f] = 0;\n        continue;\n      }\n      if (p.fy[f] >= H - 0.5 - p.pile[Math.floor(p.fx[f])]) settle(p, f, wind, slow);\n    } else {\n      p.fRest[f] -= dt;\n      if (p.fRest[f] \u003c= 0) sink(p, f);\n    }\n  }\n\n  // Sow when the garden is thin, and hold off when it is crowded.\n  let alive = 0;\n  for (let i = 0; i \u003c PLANTS; i++) if (p.state[i] === GROWING || p.state[i] === HOLDING) alive++;\n  p.sowTimer -= dt;\n  if (p.sowTimer \u003c= 0 && alive \u003c 15 && p.lit \u003c W * H * 0.24) {\n    if (sow(p)) p.sowTimer = (0.6 + Math.random() * 2.2) * slow;\n    else p.sowTimer = 0.5;\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.kind = new Uint8Array(W * H);\n  p.owner = new Uint8Array(W * H);\n  p.budAt = new Float32Array(W * H);\n  p.budGen = new Uint8Array(W * H);\n  p.pix = new Int16Array(PLANTS * PIX);\n  p.count = new Int16Array(PLANTS);\n  p.state = new Uint8Array(PLANTS);\n  p.baseX = new Int16Array(PLANTS);\n  p.tips = new Int16Array(PLANTS);\n  p.tipsEver = new Int16Array(PLANTS);\n  p.buds = new Int16Array(PLANTS);\n  p.timer = new Float32Array(PLANTS);\n  p.wither = new Float32Array(PLANTS);\n  p.stopped = new Uint8Array(PLANTS);\n  p.shade = new Float32Array(PLANTS);\n  p.green = new Float32Array(PLANTS);\n  p.style = new Uint8Array(PLANTS);\n  p.tipPlant = new Int8Array(TIPS).fill(-1);\n  p.tipX = new Int16Array(TIPS);\n  p.tipY = new Int16Array(TIPS);\n  p.tipLeft = new Int16Array(TIPS);\n  p.tipFx = new Float32Array(TIPS);\n  p.tipLean = new Float32Array(TIPS);\n  p.tipGen = new Uint8Array(TIPS);\n  p.tipSince = new Int16Array(TIPS);\n  p.tipAcc = new Float32Array(TIPS);\n  p.tipPace = new Float32Array(TIPS);\n  p.fx = new Float32Array(FALL);\n  p.fy = new Float32Array(FALL);\n  p.fHue = new Float32Array(FALL);\n  p.fState = new Uint8Array(FALL);\n  p.fRest = new Float32Array(FALL);\n  p.fSway = new Float32Array(FALL);\n  p.pile = new Uint8Array(W);\n  p.offset = new Int8Array(H);\n  p.col = new Float32Array(3);\n  p.lit = 0;\n  p.clock = 0;\n  p.sowTimer = 0;\n  p.budTime = 1;\n  p.branches = 2;\n  p.hue = 0;\n  p.ready = false;\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  p.hue = k[0];\n  p.wind = k[3];\n  if (!p.ready) {\n    // Grow a garden before the first frame, so it opens mid-season at any\n    // pace: a slow garden is grown in longer steps.\n    p.ready = true;\n    const tick = (1 / 15) * Math.min(4, 2 / k[1]);\n    for (let i = 0; i \u003c 1600; i++) step(p, tick, k);\n  }\n  if (input.btnPressed && input.btnPressed[0]) sow(p);\n  step(p, dt, k);\n\n  // The tops sway more than the roots; at no wind nothing moves.\n  const w = p.wind;\n  const gust = 0.75 + 0.25 * Math.sin(p.clock * 0.9) + 0.15 * Math.sin(p.clock * 2.3);\n  for (let y = 0; y \u003c H; y++) {\n    const up = (H - 1 - y) / (H - 1);\n    p.offset[y] = Math.round(w * up * up * 5 * gust);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const col = p.col;\n  for (let y = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++) display.setPixel(x, y, 0, 0, 0);\n\n  for (let y = 0; y \u003c H; y++) {\n    const o = p.offset[y];\n    for (let x = 0; x \u003c W; x++) {\n      const c = y * W + x;\n      const kind = p.kind[c];\n      if (!kind) continue;\n      const sx = x + o;\n      if (sx \u003c 0 || sx >= W) continue;\n      const plant = p.owner[c];\n      const dry = p.wither[plant];\n      if (kind === STEM) {\n        hsv(p.green[plant] - dry * 0.2, 0.82, 0.6 - dry * 0.12, col, 0);\n      } else if (kind === LEAF) {\n        hsv(p.green[plant] - 0.04 - dry * 0.17, 0.72 + dry * 0.1, 0.92 - dry * 0.35, col, 0);\n      } else if (kind === BUD) {\n        hsv(p.hue + p.shade[plant], 0.4, 1, col, 0);\n      } else if (kind === PETAL) {\n        hsv(p.hue + p.shade[plant], 0.82, 1 - dry * 0.3, col, 0);\n      } else {\n        // A warm heart, unless the petals are warm already.\n        const hh = p.hue + p.shade[plant];\n        const d = Math.abs(hh - Math.round(hh - 0.14) - 0.14);\n        hsv(d \u003c 0.09 ? 0.0 : 0.135, 0.8, 1 - dry * 0.4, col, 0);\n      }\n      display.setPixel(sx, y, col[0], col[1], col[2]);\n    }\n  }\n\n  // Growing tips are drawn pale, the newest LED of each stem.\n  for (let t = 0; t \u003c TIPS; t++) {\n    if (p.tipPlant[t] \u003c 0) continue;\n    const y = p.tipY[t];\n    hsv(0.2, 0.4, 1, col, 0);\n    display.setPixel(p.tipX[t] + p.offset[y], y, col[0], col[1], col[2]);\n  }\n\n  for (let f = 0; f \u003c FALL; f++) {\n    if (!p.fState[f]) continue;\n    // A fallen petal is paler than one in the air. Darker, an orange one read as brown.\n    hsv(p.fHue[f], p.fState[f] === 1 ? 0.82 : 0.66, 0.85, col, 0);\n    display.setPixel(Math.floor(p.fx[f]), Math.floor(p.fy[f]), col[0], col[1], col[2]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Grow=0.25..6, Branches=3..14, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The flower colour; each plant takes a shade either side of it."},{"name":"Grow","min":0.25,"max":6,"about":"How fast the tips climb, and with it how soon a plant flowers, withers and makes room."},{"name":"Branches","min":3,"max":14,"about":"How many tips a plant may have, from a stem with two side shoots to a small tree."},{"name":"Wind","min":-1,"max":1,"about":"Leans new growth and sways the tops; left of centre it blows the other way."}],"start":[0,2,3,0.06],"measures":{"motion":0.0426,"detail":0.1141,"edges":0.9949,"complexity":0.1635,"coverage":0.1685,"colour":0.2652,"drift":0.0313},"knobResponse":[0.0448,0.119,0.1279,0.0982]},{"slug":"stained-glass","title":"Stained Glass","family":"glass","round":18,"note":"고딕 첨두 창이 세운 패널을 다 채워요. 뾰족한 머리의 장미창과 몸통의 생명나무가 검은 납선에 끼운 보석빛 유리 조각으로 짜여 있고, 창 뒤로 해가 지나가면 그 쪽 조각이 희게 타오르고 구름 그림자가 지나가면 어두워져요. K3 은 유리를 자른 크기라서, 돌리면 테두리 네모와 마름모가 잘아지고 장미 꽃잎이 여덟 장에서 열두 장이 돼요.","idea":"A gothic lancet window fills the standing panel, a rose in its pointed head and a tree of life in its shaft, every piece of jewel glass held in black lead, and the light through it brightens and moves as the sun crosses behind and a cloud shadow passes.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Stained Glass\n// Family:  glass\n// Idea:    A gothic lancet window fills the standing panel, a rose in its pointed head and a tree of life in its shaft, every piece of jewel glass held in black lead, and the light through it brightens and moves as the sun crosses behind and a cloud shadow passes.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the medallion lancets and Jesse Tree windows of Chartres\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Glass=0..1, Speed=0.2..3, Pieces=1..4, Clouds=0..1\n//\n// Knob 1: Glass. Turns every pane round the colour wheel together, starting from the cathedral set: a cobalt ground, a ruby and gold border, ruby petals and emerald leaves.\n// Knob 2: Speed. How fast the sun and the clouds travel behind the window: at 2 the sun takes 26 s to cross it and comes round every 64 s, and a cloud shadow sweeps over in about 6 s; at 0.2 the light hardly moves.\n// Knob 3: Pieces. How finely the glazier cut the glass: at 1 the border squares are 5 LEDs long and the blue quarries 7 across, at 4 they are 3.5 and 4, and the rose gets 12 petals instead of 8.\n// Knob 4: Clouds. At 0.06 one cumulus drifts across now and then; turned up, more and darker clouds follow and hide the sun, until the window glows only in patches.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst HALF = 32;\nconst TAU = Math.PI * 2;\n// The window: its axis, half width, and an equilateral pointed arch whose two\n// arcs have the span (62) as radius and spring from row 55.\nconst X0 = 32;\nconst WH = 31;\nconst R = 62;\nconst YS = 55;\n// Iron saddle bars across the shaft, one row each.\nconst BARS = [55, 80, 105];\n// The rose in the arch head: centre row and radius.\nconst ROSE_Y = 34;\nconst ROSE_R = 17.5;\n// Kinds of glass, and their colour at Glass 0.\nconst RUBY = 0;\nconst GOLD = 1;\nconst WHITE = 2;\nconst COBALT = 3;\nconst SKY = 4;\nconst EMERALD = 5;\nconst LEAF = 6;\nconst AMBER = 7;\nconst VIOLET = 8;\nconst PINK = 9;\nconst STEM = 10;\nconst GLASS = [\n  [212, 26, 38],\n  [236, 176, 34],\n  [214, 222, 204],\n  [30, 60, 208],\n  [62, 134, 228],\n  [24, 170, 82],\n  [130, 198, 46],\n  [214, 116, 28],\n  [140, 46, 194],\n  [228, 92, 150],\n  [236, 210, 128],\n];\n// Not glass: stone round the window, lead cames and the iron bars.\nconst STONE = -1;\nconst LEAD = -2;\nconst IRON = -3;\nconst DARK = { [STONE]: [11, 9, 8], [LEAD]: [8, 8, 10], [IRON]: [6, 6, 7] };\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction rotateHue(rgb, turn) {\n  const [r, g, b] = rgb.map((v) => v / 255);\n  const mx = Math.max(r, g, b);\n  const mn = Math.min(r, g, b);\n  const c = mx - mn;\n  let h = 0;\n  if (c > 0) {\n    if (mx === r) h = ((g - b) / c + 6) % 6;\n    else if (mx === g) h = (b - r) / c + 2;\n    else h = (r - g) / c + 4;\n  }\n  h = (((h / 6 + turn) % 1) + 1) % 1;\n  const s = mx > 0 ? c / mx : 0;\n  const k = (n) => {\n    const q = (n + h * 6) % 6;\n    return mx * (1 - s * clamp(Math.min(q, 4 - q), 0, 1));\n  };\n  return [k(5) * 255, k(3) * 255, k(1) * 255];\n}\n\n// A quadratic curve sampled into points with their running length.\nfunction curve(a, b, c, n) {\n  const pts = [];\n  let len = 0;\n  for (let i = 0; i \u003c= n; i++) {\n    const t = i / n;\n    const u = (1 - t) * (1 - t) * a[0] + 2 * t * (1 - t) * b[0] + t * t * c[0];\n    const y = (1 - t) * (1 - t) * a[1] + 2 * t * (1 - t) * b[1] + t * t * c[1];\n    if (i) len += Math.hypot(u - pts[pts.length - 1][0], y - pts[pts.length - 1][1]);\n    pts.push([u, y, len]);\n  }\n  return pts;\n}\n\n// The tree of life, drawn on the left half (u is the distance from the axis):\n// in each panel of the shaft a branch leaves the trunk, curls up and out and\n// ends in a flower, with a leaf hanging under it and one standing over it.\nfunction tree() {\n  const tiers = [];\n  for (const [y0, flower] of [\n    [75, PINK],\n    [100, RUBY],\n  ]) {\n    const pts = curve([1.5, y0], [5, y0 - 7], [13.5, y0 - 9], 16);\n    const at = (t) => pts[Math.round(t * 16)];\n    const a = at(0.55);\n    const b = at(0.3);\n    tiers.push({\n      pts,\n      box: [0, y0 - 19, 30, y0 + 9],\n      flower: [16.5, y0 - 11, 5.2, flower],\n      leaves: [\n        [a[0] + 2.6, a[1] + 3.6, 0.55, 4.6, 2.2],\n        [b[0] + 4.8, b[1] + 4.6, 0.95, 4.2, 2.0],\n        [b[0] - 1.2, b[1] - 6, -1.75, 4.0, 1.9],\n      ],\n    });\n  }\n  // Two long lily leaves rise from the foot of the trunk in the lowest panel.\n  const low = {\n    pts: [],\n    box: [0, 104, 32, 122],\n    flower: null,\n    leaves: [\n      [9, 113, -2.45, 7.5, 2.4],\n      [19, 115.5, -2.75, 6, 2.2],\n    ],\n  };\n  tiers.push(low);\n  return tiers;\n}\n\n// What the glazier cut at one point of the left half: a kind of glass (or\n// STONE, IRON) and two numbers that name the piece.\nfunction cell(px, py, cut, T) {\n  const u = X0 - px;\n  const side = WH - u;\n  const bottom = 127 - py;\n  let d = Math.min(side, bottom);\n  const arch = py \u003c YS;\n  if (arch) d = Math.min(d, R - Math.hypot(WH + u, YS - py));\n  if (d \u003c= 0) return [STONE, 0, 0];\n  // The border of small square quarries and the white pearled fillet inside it.\n  if (d \u003c= 6.2) {\n    const fillet = d > 4.2;\n    const len = fillet ? 3 : 5 - 1.5 * cut;\n    let part;\n    let i;\n    if (arch) {\n      const rr = R - d;\n      const top = Math.atan2(Math.sqrt(rr * rr - WH * WH), WH);\n      i = Math.floor(((top - Math.atan2(YS - py, WH + u)) * rr) / len + 0.5);\n      part = 0;\n    } else if (side \u003c bottom) {\n      i = Math.floor((py - YS) / len);\n      part = 1;\n    } else {\n      i = Math.floor(u / len + 0.5);\n      part = 2;\n    }\n    if (fillet) return [WHITE, 10 + part, i];\n    return [i % 2 ? GOLD : RUBY, 20 + part, i];\n  }\n  for (const yb of BARS) if (py >= yb && py \u003c yb + 1) return [IRON, 0, 0];\n\n  // The rose: a gold boss, petals, a ring of pearls and a rim.\n  const ry = py - ROSE_Y;\n  const rr = Math.hypot(u, ry);\n  if (rr \u003c ROSE_R) {\n    const th = Math.atan2(u, -ry);\n    if (rr \u003c 3) return [GOLD, 30, 0];\n    const n1 = cut \u003c 0.5 ? 8 : 12;\n    const s1 = TAU / n1;\n    if (rr \u003c 11) {\n      const k = Math.floor(th / s1 + 0.5);\n      const t = Math.abs(th - k * s1) / (s1 / 2);\n      if (rr \u003c 3 + 8 * Math.sqrt(Math.max(0, 1 - t * t))) return [RUBY, 31, k];\n      return [SKY, 32, Math.floor(th / s1)];\n    }\n    const n2 = cut \u003c 0.5 ? 16 : 24;\n    const k2 = Math.floor(th / (TAU / n2) + 0.5);\n    if (rr \u003c 13.6) return [k2 % 2 ? WHITE : GOLD, 33, k2];\n    return [k2 % 2 ? VIOLET : EMERALD, 34, k2];\n  }\n\n  // The tree.\n  for (let ti = 0; ti \u003c T.length; ti++) {\n    const tier = T[ti];\n    const [b0, b1, b2, b3] = tier.box;\n    if (u \u003c b0 || u > b2 || py \u003c b1 || py > b3) continue;\n    if (tier.flower) {\n      const [fu, fy, fr, kind] = tier.flower;\n      const du = u - fu;\n      const dy = py - fy;\n      const f = Math.hypot(du, dy);\n      if (f \u003c fr + 0.5) {\n        if (f \u003c 2.1) return [GOLD, 40 + ti, 0];\n        const a = Math.atan2(du, -dy);\n        const n = cut \u003c 0.5 ? 5 : 7;\n        const k = Math.floor(((a / TAU) * n + n + 0.5) % n);\n        const c = Math.abs(Math.cos((a * n) / 2));\n        if (f \u003c fr * (0.74 + 0.26 * c)) return [kind, 44 + ti, k];\n      }\n    }\n    for (let li = 0; li \u003c tier.leaves.length; li++) {\n      const [lu, ly, al, la, lb] = tier.leaves[li];\n      const du = u - lu;\n      const dy = py - ly;\n      const q1 = (du * Math.cos(al) + dy * Math.sin(al)) / la;\n      const q2 = (-du * Math.sin(al) + dy * Math.cos(al)) / lb;\n      if (Math.abs(q1) \u003c 1 && Math.abs(q2) \u003c 1 - q1 * q1) {\n        const half = cut >= 0.5 && q2 \u003c 0 ? 1 : 0;\n        return [(li + ti) % 2 ? LEAF : EMERALD, 50 + ti * 8 + li * 2 + half, 0];\n      }\n    }\n    const pts = tier.pts;\n    for (let i = 1; i \u003c pts.length; i++) {\n      const [ax, ay, al] = pts[i - 1];\n      const [bx, by] = pts[i];\n      const vx = bx - ax;\n      const vy = by - ay;\n      const t = clamp(((u - ax) * vx + (py - ay) * vy) / (vx * vx + vy * vy), 0, 1);\n      if (Math.hypot(u - ax - t * vx, py - ay - t * vy) \u003c 2) {\n        const s = al + t * Math.hypot(vx, vy);\n        return [GOLD, 70 + ti, Math.floor(s / (8 - 3 * cut))];\n      }\n    }\n  }\n  // The trunk, rooted in the mound and reaching up into the rose.\n  const mound = 117.5 + 0.009 * u * u;\n  if (py > ROSE_Y && py \u003c mound + 1 && u \u003c 1.9 + 1.6 * clamp((py - 56) / 62, 0, 1)) return [STEM, 80, Math.floor((py - 56) / (9 - 3 * cut))];\n  if (py >= mound) {\n    const row = Math.floor((py - mound) / 3.2);\n    const col = Math.floor((u + (row % 2) * 3) / (7 - 2 * cut));\n    return [(row + col) % 2 ? LEAF : EMERALD, 90 + row, col];\n  }\n\n  // The ground: diamond quarries of cobalt, here and there sky blue or violet.\n  const q = 7 - 3 * cut;\n  const a = Math.floor((u + py) / q);\n  const b = Math.floor((py - u) / q);\n  const h = (((a * 73856093) ^ (b * 19349663)) >>> 0) % 13;\n  return [h \u003c 2 ? SKY : h === 2 ? VIOLET : COBALT, 100 + (a & 1023), b + 512];\n}\n\nfunction build(P, cut) {\n  P.cut = cut;\n  const T = tree();\n  const key = new Float64Array(HALF * H);\n  const kind = new Int8Array(HALF * H);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c HALF; x++) {\n      const [k, a, b] = cell(x + 0.5, y + 0.5, cut, T);\n      kind[y * HALF + x] = k;\n      key[y * HALF + x] = k \u003c 0 ? k : (k * 1000 + a) * 4096 + b + 2048;\n    }\n  // A lead came runs along every join: the LED on the left of or above a join\n  // between two pieces becomes lead.\n  const lead = new Uint8Array(HALF * H);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c HALF; x++) {\n      const p = y * HALF + x;\n      if (kind[p] \u003c 0) continue;\n      if ((x \u003c HALF - 1 && key[p + 1] !== key[p]) || (y \u003c H - 1 && key[p + HALF] !== key[p])) lead[p] = 1;\n    }\n  // Pieces that reach the axis are one piece with their mirror image.\n  const central = new Set();\n  for (let y = 0; y \u003c H; y++) if (!lead[y * HALF + HALF - 1]) central.add(key[y * HALF + HALF - 1]);\n  const ids = new Int32Array(N);\n  const index = new Map();\n  const kinds = [];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const left = x \u003c HALF;\n      const p = y * HALF + (left ? x : W - 1 - x);\n      if (kind[p] \u003c 0) ids[y * W + x] = kind[p];\n      else if (lead[p]) ids[y * W + x] = LEAD;\n      else {\n        const k = left || central.has(key[p]) ? key[p] : -key[p] - 1;\n        let id = index.get(k);\n        if (id === undefined) {\n          id = kinds.length;\n          index.set(k, id);\n          kinds.push(kind[p]);\n        }\n        ids[y * W + x] = id;\n      }\n    }\n  const n = kinds.length;\n  const cx = new Float32Array(n);\n  const cy = new Float32Array(n);\n  const count = new Float32Array(n);\n  for (let p = 0; p \u003c N; p++) {\n    const id = ids[p];\n    if (id \u003c 0) continue;\n    cx[id] += p % W;\n    cy[id] += Math.floor(p / W);\n    count[id]++;\n  }\n  // Each piece is its own sheet: a little lighter or darker and warmer or\n  // cooler than its neighbours, with faint streaks running one way across it.\n  const tint = new Float32Array(n * 3);\n  const streak = new Float32Array(n * 3);\n  for (let i = 0; i \u003c n; i++) {\n    cx[i] = cx[i] / count[i] + 0.5;\n    cy[i] = cy[i] / count[i] + 0.5;\n    const v = 0.84 + 0.16 * Math.random();\n    for (let c = 0; c \u003c 3; c++) tint[i * 3 + c] = v * (0.94 + 0.12 * Math.random());\n    const ang = Math.random() * Math.PI;\n    streak[i * 3] = (Math.cos(ang) * TAU) / 10;\n    streak[i * 3 + 1] = (Math.sin(ang) * TAU) / 10;\n    streak[i * 3 + 2] = Math.random() * TAU;\n  }\n  // Antique glass is uneven: per LED a speck of grain, along the streaks a\n  // ripple of 2.5 levels, and now and then a seed of trapped air.\n  const tex = new Int8Array(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    const id = ids[p];\n    const x = p % W;\n    const y = Math.floor(p / W);\n    if (id \u003c 0) {\n      for (let c = 0; c \u003c 3; c++) tex[p * 3 + c] = Math.floor(Math.random() * 3) - 1;\n      continue;\n    }\n    const s = 2.5 * Math.sin(x * streak[id * 3] + y * streak[id * 3 + 1] + streak[id * 3 + 2]);\n    const seed = Math.random() \u003c 0.012 ? 7 : 0;\n    for (let c = 0; c \u003c 3; c++) tex[p * 3 + c] = Math.round(s + seed) + Math.floor(Math.random() * 5) - 2;\n  }\n  Object.assign(P, { ids, kinds, cx, cy, tint, tex, n, col: new Float32Array(n * 3) });\n}\n\nexport function setup(params) {\n  const P = params;\n  P.tau = 0;\n  P.started = false;\n  P.cut = -1;\n  P.hue = -1;\n  P.palette = GLASS;\n  P.noise = new Float32Array(24 * 12);\n  for (let i = 0; i \u003c P.noise.length; i++) P.noise[i] = Math.random();\n}\n\n// The light behind a point of the window: the sky, the sun's glow and the\n// cloud shadows, from about 0.3 to 1, and how much of it is the sun.\nfunction light(P, x, y) {\n  const g = Math.exp(-((x - P.sx) ** 2 + (y - P.sy) ** 2) / (2 * 24 * 24)) * P.sunClear;\n  let shade = 0;\n  for (const c of P.clouds) shade += c.dark * Math.exp(-(((x - c.x) / c.rx) ** 2 + ((y - c.y) / c.ry) ** 2));\n  // Cumulus is lumpy: its shadow is mottled in puffs about 11 LEDs across\n  // that travel with the wind.\n  if (shade > 0.01) shade *= 0.15 + 1.4 * puff(P, x - P.wind, y);\n  shade = Math.min(0.55, shade);\n  const sky = P.skyLight * (1 - 0.1 * (y / H));\n  return [(sky + (1 - sky) * g) * (1 - shade), g * (1 - shade)];\n}\n\n// Smooth value noise on a 24 by 12 lattice of 11 LED cells, wrapping.\nfunction puff(P, x, y) {\n  const gx = x / 11;\n  const gy = y / 11;\n  const ix = Math.floor(gx);\n  const iy = Math.floor(gy);\n  const fx = gx - ix;\n  const fy = gy - iy;\n  const sx = fx * fx * (3 - 2 * fx);\n  const sy = fy * fy * (3 - 2 * fy);\n  const at = (i, j) => P.noise[(((j % 12) + 12) % 12) * 24 + (((i % 24) + 24) % 24)];\n  const a = at(ix, iy) + (at(ix + 1, iy) - at(ix, iy)) * sx;\n  const b = at(ix, iy + 1) + (at(ix + 1, iy + 1) - at(ix, iy + 1)) * sx;\n  return a + (b - a) * sy;\n}\n\n// The sun and the clouds at time tau (seconds at Speed 2).\nfunction sky(P, cloudy) {\n  const tau = P.tau;\n  // The sun crosses a 160 LED stretch of sky in 64 s, low at the sides and\n  // highest over the rose, then comes round again unseen.\n  const sx = ((tau * 2.5 + 23) % 160) - 48;\n  P.sx = sx;\n  P.sy = 36 + 0.006 * (sx - X0) * (sx - X0);\n  // Clouds drift right at 18 LEDs a second through a 280 LED loop, each two\n  // puffs. The first is always there; more come in as Clouds turns up.\n  P.clouds = [];\n  P.wind = tau * 18;\n  const C = [\n    [61.5, 48, 24, 38, 0.5],\n    [131, 24, 20, 26, 0.5],\n    [201, 100, 26, 30, 0.5],\n    [271, 72, 18, 44, 0.55],\n    [26, 16, 30, 24, 0.5],\n    [166, 114, 22, 22, 0.5],\n  ];\n  for (let i = 0; i \u003c C.length; i++) {\n    const [x0, y, rx, ry, dark] = C[i];\n    const w = i === 0 ? 1 : clamp(cloudy * 6 - i + 0.6, 0, 1);\n    if (w \u003c= 0) continue;\n    const x = ((x0 + tau * 18) % 280) - 70;\n    const dk = dark * w * (0.85 + 0.4 * cloudy);\n    const yy = y + 5 * Math.sin(tau * 0.07 + i);\n    P.clouds.push({ x, y: yy, rx, ry, dark: dk });\n    P.clouds.push({ x: x - rx * 0.9, y: yy + ry * 0.45, rx: rx * 0.7, ry: ry * 0.6, dark: dk * 0.6 });\n  }\n  // A cloud over the sun takes its glow, and an overcast sky takes some of it\n  // anyway and turns the daylight grey and cool.\n  let over = 0;\n  for (const c of P.clouds) over += c.dark * 1.6 * Math.exp(-(((P.sx - c.x) / c.rx) ** 2 + ((P.sy - c.y) / c.ry) ** 2));\n  P.sunClear = clamp(1 - over, 0, 1) * (1 - 0.75 * cloudy);\n  P.skyLight = 0.64 - 0.12 * cloudy;\n  P.cool = cloudy;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const cut = Math.round(clamp((k[2] - 1) / 3, 0, 1) * 6) / 6;\n  P.cloudy = clamp(k[3], 0, 1);\n  if (cut !== P.cut) build(P, cut);\n  if (hue !== P.hue) {\n    P.hue = hue;\n    P.palette = GLASS.map((c) => rotateHue(c, hue));\n  }\n  // The window opens with the sun just inside its left edge and the first\n  // cloud coming up behind it, ten seconds further on at the knob's speed,\n  // so the opening light already differs from one Speed to the next.\n  if (!P.started) {\n    P.started = true;\n    P.tau = 2 + 10 * speed;\n  }\n  P.tau += dt * speed;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.cut \u003c 0) return;\n  sky(P, P.cloudy);\n  const { kinds, cx, cy, tint, col, palette, ids, tex } = P;\n  // Sunlight is warm; an overcast sky is grey and a little blue.\n  const day = [1 - 0.22 * P.cool, 1 - 0.1 * P.cool, 0.94 + 0.1 * P.cool];\n  for (let i = 0; i \u003c P.n; i++) {\n    const [L, g] = light(P, cx[i], cy[i]);\n    // Where the sun stands right behind the glass it burns toward white.\n    const bloom = 0.5 * g * g * g;\n    const base = palette[kinds[i]];\n    for (let c = 0; c \u003c 3; c++) {\n      const v = base[c] * tint[i * 3 + c] * L * day[c];\n      col[i * 3 + c] = v + ((c === 2 ? 225 : 255) - v) * bloom;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const id = ids[p];\n      const c = id \u003c 0 ? DARK[id] : null;\n      const r = c ? c[0] : col[id * 3];\n      const g = c ? c[1] : col[id * 3 + 1];\n      const b = c ? c[2] : col[id * 3 + 2];\n      display.setPixel(x, y, Math.round(r) + tex[p * 3], Math.round(g) + tex[p * 3 + 1], Math.round(b) + tex[p * 3 + 2]);\n    }\n}\n","layer":{"id":"layer-stained-glass","type":"code","name":"stained-glass","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Stained Glass\n// Family:  glass\n// Idea:    A gothic lancet window fills the standing panel, a rose in its pointed head and a tree of life in its shaft, every piece of jewel glass held in black lead, and the light through it brightens and moves as the sun crosses behind and a cloud shadow passes.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the medallion lancets and Jesse Tree windows of Chartres\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Glass=0..1, Speed=0.2..3, Pieces=1..4, Clouds=0..1\n//\n// Knob 1: Glass. Turns every pane round the colour wheel together, starting from the cathedral set: a cobalt ground, a ruby and gold border, ruby petals and emerald leaves.\n// Knob 2: Speed. How fast the sun and the clouds travel behind the window: at 2 the sun takes 26 s to cross it and comes round every 64 s, and a cloud shadow sweeps over in about 6 s; at 0.2 the light hardly moves.\n// Knob 3: Pieces. How finely the glazier cut the glass: at 1 the border squares are 5 LEDs long and the blue quarries 7 across, at 4 they are 3.5 and 4, and the rose gets 12 petals instead of 8.\n// Knob 4: Clouds. At 0.06 one cumulus drifts across now and then; turned up, more and darker clouds follow and hide the sun, until the window glows only in patches.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst HALF = 32;\nconst TAU = Math.PI * 2;\n// The window: its axis, half width, and an equilateral pointed arch whose two\n// arcs have the span (62) as radius and spring from row 55.\nconst X0 = 32;\nconst WH = 31;\nconst R = 62;\nconst YS = 55;\n// Iron saddle bars across the shaft, one row each.\nconst BARS = [55, 80, 105];\n// The rose in the arch head: centre row and radius.\nconst ROSE_Y = 34;\nconst ROSE_R = 17.5;\n// Kinds of glass, and their colour at Glass 0.\nconst RUBY = 0;\nconst GOLD = 1;\nconst WHITE = 2;\nconst COBALT = 3;\nconst SKY = 4;\nconst EMERALD = 5;\nconst LEAF = 6;\nconst AMBER = 7;\nconst VIOLET = 8;\nconst PINK = 9;\nconst STEM = 10;\nconst GLASS = [\n  [212, 26, 38],\n  [236, 176, 34],\n  [214, 222, 204],\n  [30, 60, 208],\n  [62, 134, 228],\n  [24, 170, 82],\n  [130, 198, 46],\n  [214, 116, 28],\n  [140, 46, 194],\n  [228, 92, 150],\n  [236, 210, 128],\n];\n// Not glass: stone round the window, lead cames and the iron bars.\nconst STONE = -1;\nconst LEAD = -2;\nconst IRON = -3;\nconst DARK = { [STONE]: [11, 9, 8], [LEAD]: [8, 8, 10], [IRON]: [6, 6, 7] };\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\n\nfunction rotateHue(rgb, turn) {\n  const [r, g, b] = rgb.map((v) => v / 255);\n  const mx = Math.max(r, g, b);\n  const mn = Math.min(r, g, b);\n  const c = mx - mn;\n  let h = 0;\n  if (c > 0) {\n    if (mx === r) h = ((g - b) / c + 6) % 6;\n    else if (mx === g) h = (b - r) / c + 2;\n    else h = (r - g) / c + 4;\n  }\n  h = (((h / 6 + turn) % 1) + 1) % 1;\n  const s = mx > 0 ? c / mx : 0;\n  const k = (n) => {\n    const q = (n + h * 6) % 6;\n    return mx * (1 - s * clamp(Math.min(q, 4 - q), 0, 1));\n  };\n  return [k(5) * 255, k(3) * 255, k(1) * 255];\n}\n\n// A quadratic curve sampled into points with their running length.\nfunction curve(a, b, c, n) {\n  const pts = [];\n  let len = 0;\n  for (let i = 0; i \u003c= n; i++) {\n    const t = i / n;\n    const u = (1 - t) * (1 - t) * a[0] + 2 * t * (1 - t) * b[0] + t * t * c[0];\n    const y = (1 - t) * (1 - t) * a[1] + 2 * t * (1 - t) * b[1] + t * t * c[1];\n    if (i) len += Math.hypot(u - pts[pts.length - 1][0], y - pts[pts.length - 1][1]);\n    pts.push([u, y, len]);\n  }\n  return pts;\n}\n\n// The tree of life, drawn on the left half (u is the distance from the axis):\n// in each panel of the shaft a branch leaves the trunk, curls up and out and\n// ends in a flower, with a leaf hanging under it and one standing over it.\nfunction tree() {\n  const tiers = [];\n  for (const [y0, flower] of [\n    [75, PINK],\n    [100, RUBY],\n  ]) {\n    const pts = curve([1.5, y0], [5, y0 - 7], [13.5, y0 - 9], 16);\n    const at = (t) => pts[Math.round(t * 16)];\n    const a = at(0.55);\n    const b = at(0.3);\n    tiers.push({\n      pts,\n      box: [0, y0 - 19, 30, y0 + 9],\n      flower: [16.5, y0 - 11, 5.2, flower],\n      leaves: [\n        [a[0] + 2.6, a[1] + 3.6, 0.55, 4.6, 2.2],\n        [b[0] + 4.8, b[1] + 4.6, 0.95, 4.2, 2.0],\n        [b[0] - 1.2, b[1] - 6, -1.75, 4.0, 1.9],\n      ],\n    });\n  }\n  // Two long lily leaves rise from the foot of the trunk in the lowest panel.\n  const low = {\n    pts: [],\n    box: [0, 104, 32, 122],\n    flower: null,\n    leaves: [\n      [9, 113, -2.45, 7.5, 2.4],\n      [19, 115.5, -2.75, 6, 2.2],\n    ],\n  };\n  tiers.push(low);\n  return tiers;\n}\n\n// What the glazier cut at one point of the left half: a kind of glass (or\n// STONE, IRON) and two numbers that name the piece.\nfunction cell(px, py, cut, T) {\n  const u = X0 - px;\n  const side = WH - u;\n  const bottom = 127 - py;\n  let d = Math.min(side, bottom);\n  const arch = py \u003c YS;\n  if (arch) d = Math.min(d, R - Math.hypot(WH + u, YS - py));\n  if (d \u003c= 0) return [STONE, 0, 0];\n  // The border of small square quarries and the white pearled fillet inside it.\n  if (d \u003c= 6.2) {\n    const fillet = d > 4.2;\n    const len = fillet ? 3 : 5 - 1.5 * cut;\n    let part;\n    let i;\n    if (arch) {\n      const rr = R - d;\n      const top = Math.atan2(Math.sqrt(rr * rr - WH * WH), WH);\n      i = Math.floor(((top - Math.atan2(YS - py, WH + u)) * rr) / len + 0.5);\n      part = 0;\n    } else if (side \u003c bottom) {\n      i = Math.floor((py - YS) / len);\n      part = 1;\n    } else {\n      i = Math.floor(u / len + 0.5);\n      part = 2;\n    }\n    if (fillet) return [WHITE, 10 + part, i];\n    return [i % 2 ? GOLD : RUBY, 20 + part, i];\n  }\n  for (const yb of BARS) if (py >= yb && py \u003c yb + 1) return [IRON, 0, 0];\n\n  // The rose: a gold boss, petals, a ring of pearls and a rim.\n  const ry = py - ROSE_Y;\n  const rr = Math.hypot(u, ry);\n  if (rr \u003c ROSE_R) {\n    const th = Math.atan2(u, -ry);\n    if (rr \u003c 3) return [GOLD, 30, 0];\n    const n1 = cut \u003c 0.5 ? 8 : 12;\n    const s1 = TAU / n1;\n    if (rr \u003c 11) {\n      const k = Math.floor(th / s1 + 0.5);\n      const t = Math.abs(th - k * s1) / (s1 / 2);\n      if (rr \u003c 3 + 8 * Math.sqrt(Math.max(0, 1 - t * t))) return [RUBY, 31, k];\n      return [SKY, 32, Math.floor(th / s1)];\n    }\n    const n2 = cut \u003c 0.5 ? 16 : 24;\n    const k2 = Math.floor(th / (TAU / n2) + 0.5);\n    if (rr \u003c 13.6) return [k2 % 2 ? WHITE : GOLD, 33, k2];\n    return [k2 % 2 ? VIOLET : EMERALD, 34, k2];\n  }\n\n  // The tree.\n  for (let ti = 0; ti \u003c T.length; ti++) {\n    const tier = T[ti];\n    const [b0, b1, b2, b3] = tier.box;\n    if (u \u003c b0 || u > b2 || py \u003c b1 || py > b3) continue;\n    if (tier.flower) {\n      const [fu, fy, fr, kind] = tier.flower;\n      const du = u - fu;\n      const dy = py - fy;\n      const f = Math.hypot(du, dy);\n      if (f \u003c fr + 0.5) {\n        if (f \u003c 2.1) return [GOLD, 40 + ti, 0];\n        const a = Math.atan2(du, -dy);\n        const n = cut \u003c 0.5 ? 5 : 7;\n        const k = Math.floor(((a / TAU) * n + n + 0.5) % n);\n        const c = Math.abs(Math.cos((a * n) / 2));\n        if (f \u003c fr * (0.74 + 0.26 * c)) return [kind, 44 + ti, k];\n      }\n    }\n    for (let li = 0; li \u003c tier.leaves.length; li++) {\n      const [lu, ly, al, la, lb] = tier.leaves[li];\n      const du = u - lu;\n      const dy = py - ly;\n      const q1 = (du * Math.cos(al) + dy * Math.sin(al)) / la;\n      const q2 = (-du * Math.sin(al) + dy * Math.cos(al)) / lb;\n      if (Math.abs(q1) \u003c 1 && Math.abs(q2) \u003c 1 - q1 * q1) {\n        const half = cut >= 0.5 && q2 \u003c 0 ? 1 : 0;\n        return [(li + ti) % 2 ? LEAF : EMERALD, 50 + ti * 8 + li * 2 + half, 0];\n      }\n    }\n    const pts = tier.pts;\n    for (let i = 1; i \u003c pts.length; i++) {\n      const [ax, ay, al] = pts[i - 1];\n      const [bx, by] = pts[i];\n      const vx = bx - ax;\n      const vy = by - ay;\n      const t = clamp(((u - ax) * vx + (py - ay) * vy) / (vx * vx + vy * vy), 0, 1);\n      if (Math.hypot(u - ax - t * vx, py - ay - t * vy) \u003c 2) {\n        const s = al + t * Math.hypot(vx, vy);\n        return [GOLD, 70 + ti, Math.floor(s / (8 - 3 * cut))];\n      }\n    }\n  }\n  // The trunk, rooted in the mound and reaching up into the rose.\n  const mound = 117.5 + 0.009 * u * u;\n  if (py > ROSE_Y && py \u003c mound + 1 && u \u003c 1.9 + 1.6 * clamp((py - 56) / 62, 0, 1)) return [STEM, 80, Math.floor((py - 56) / (9 - 3 * cut))];\n  if (py >= mound) {\n    const row = Math.floor((py - mound) / 3.2);\n    const col = Math.floor((u + (row % 2) * 3) / (7 - 2 * cut));\n    return [(row + col) % 2 ? LEAF : EMERALD, 90 + row, col];\n  }\n\n  // The ground: diamond quarries of cobalt, here and there sky blue or violet.\n  const q = 7 - 3 * cut;\n  const a = Math.floor((u + py) / q);\n  const b = Math.floor((py - u) / q);\n  const h = (((a * 73856093) ^ (b * 19349663)) >>> 0) % 13;\n  return [h \u003c 2 ? SKY : h === 2 ? VIOLET : COBALT, 100 + (a & 1023), b + 512];\n}\n\nfunction build(P, cut) {\n  P.cut = cut;\n  const T = tree();\n  const key = new Float64Array(HALF * H);\n  const kind = new Int8Array(HALF * H);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c HALF; x++) {\n      const [k, a, b] = cell(x + 0.5, y + 0.5, cut, T);\n      kind[y * HALF + x] = k;\n      key[y * HALF + x] = k \u003c 0 ? k : (k * 1000 + a) * 4096 + b + 2048;\n    }\n  // A lead came runs along every join: the LED on the left of or above a join\n  // between two pieces becomes lead.\n  const lead = new Uint8Array(HALF * H);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c HALF; x++) {\n      const p = y * HALF + x;\n      if (kind[p] \u003c 0) continue;\n      if ((x \u003c HALF - 1 && key[p + 1] !== key[p]) || (y \u003c H - 1 && key[p + HALF] !== key[p])) lead[p] = 1;\n    }\n  // Pieces that reach the axis are one piece with their mirror image.\n  const central = new Set();\n  for (let y = 0; y \u003c H; y++) if (!lead[y * HALF + HALF - 1]) central.add(key[y * HALF + HALF - 1]);\n  const ids = new Int32Array(N);\n  const index = new Map();\n  const kinds = [];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const left = x \u003c HALF;\n      const p = y * HALF + (left ? x : W - 1 - x);\n      if (kind[p] \u003c 0) ids[y * W + x] = kind[p];\n      else if (lead[p]) ids[y * W + x] = LEAD;\n      else {\n        const k = left || central.has(key[p]) ? key[p] : -key[p] - 1;\n        let id = index.get(k);\n        if (id === undefined) {\n          id = kinds.length;\n          index.set(k, id);\n          kinds.push(kind[p]);\n        }\n        ids[y * W + x] = id;\n      }\n    }\n  const n = kinds.length;\n  const cx = new Float32Array(n);\n  const cy = new Float32Array(n);\n  const count = new Float32Array(n);\n  for (let p = 0; p \u003c N; p++) {\n    const id = ids[p];\n    if (id \u003c 0) continue;\n    cx[id] += p % W;\n    cy[id] += Math.floor(p / W);\n    count[id]++;\n  }\n  // Each piece is its own sheet: a little lighter or darker and warmer or\n  // cooler than its neighbours, with faint streaks running one way across it.\n  const tint = new Float32Array(n * 3);\n  const streak = new Float32Array(n * 3);\n  for (let i = 0; i \u003c n; i++) {\n    cx[i] = cx[i] / count[i] + 0.5;\n    cy[i] = cy[i] / count[i] + 0.5;\n    const v = 0.84 + 0.16 * Math.random();\n    for (let c = 0; c \u003c 3; c++) tint[i * 3 + c] = v * (0.94 + 0.12 * Math.random());\n    const ang = Math.random() * Math.PI;\n    streak[i * 3] = (Math.cos(ang) * TAU) / 10;\n    streak[i * 3 + 1] = (Math.sin(ang) * TAU) / 10;\n    streak[i * 3 + 2] = Math.random() * TAU;\n  }\n  // Antique glass is uneven: per LED a speck of grain, along the streaks a\n  // ripple of 2.5 levels, and now and then a seed of trapped air.\n  const tex = new Int8Array(N * 3);\n  for (let p = 0; p \u003c N; p++) {\n    const id = ids[p];\n    const x = p % W;\n    const y = Math.floor(p / W);\n    if (id \u003c 0) {\n      for (let c = 0; c \u003c 3; c++) tex[p * 3 + c] = Math.floor(Math.random() * 3) - 1;\n      continue;\n    }\n    const s = 2.5 * Math.sin(x * streak[id * 3] + y * streak[id * 3 + 1] + streak[id * 3 + 2]);\n    const seed = Math.random() \u003c 0.012 ? 7 : 0;\n    for (let c = 0; c \u003c 3; c++) tex[p * 3 + c] = Math.round(s + seed) + Math.floor(Math.random() * 5) - 2;\n  }\n  Object.assign(P, { ids, kinds, cx, cy, tint, tex, n, col: new Float32Array(n * 3) });\n}\n\nexport function setup(params) {\n  const P = params;\n  P.tau = 0;\n  P.started = false;\n  P.cut = -1;\n  P.hue = -1;\n  P.palette = GLASS;\n  P.noise = new Float32Array(24 * 12);\n  for (let i = 0; i \u003c P.noise.length; i++) P.noise[i] = Math.random();\n}\n\n// The light behind a point of the window: the sky, the sun's glow and the\n// cloud shadows, from about 0.3 to 1, and how much of it is the sun.\nfunction light(P, x, y) {\n  const g = Math.exp(-((x - P.sx) ** 2 + (y - P.sy) ** 2) / (2 * 24 * 24)) * P.sunClear;\n  let shade = 0;\n  for (const c of P.clouds) shade += c.dark * Math.exp(-(((x - c.x) / c.rx) ** 2 + ((y - c.y) / c.ry) ** 2));\n  // Cumulus is lumpy: its shadow is mottled in puffs about 11 LEDs across\n  // that travel with the wind.\n  if (shade > 0.01) shade *= 0.15 + 1.4 * puff(P, x - P.wind, y);\n  shade = Math.min(0.55, shade);\n  const sky = P.skyLight * (1 - 0.1 * (y / H));\n  return [(sky + (1 - sky) * g) * (1 - shade), g * (1 - shade)];\n}\n\n// Smooth value noise on a 24 by 12 lattice of 11 LED cells, wrapping.\nfunction puff(P, x, y) {\n  const gx = x / 11;\n  const gy = y / 11;\n  const ix = Math.floor(gx);\n  const iy = Math.floor(gy);\n  const fx = gx - ix;\n  const fy = gy - iy;\n  const sx = fx * fx * (3 - 2 * fx);\n  const sy = fy * fy * (3 - 2 * fy);\n  const at = (i, j) => P.noise[(((j % 12) + 12) % 12) * 24 + (((i % 24) + 24) % 24)];\n  const a = at(ix, iy) + (at(ix + 1, iy) - at(ix, iy)) * sx;\n  const b = at(ix, iy + 1) + (at(ix + 1, iy + 1) - at(ix, iy + 1)) * sx;\n  return a + (b - a) * sy;\n}\n\n// The sun and the clouds at time tau (seconds at Speed 2).\nfunction sky(P, cloudy) {\n  const tau = P.tau;\n  // The sun crosses a 160 LED stretch of sky in 64 s, low at the sides and\n  // highest over the rose, then comes round again unseen.\n  const sx = ((tau * 2.5 + 23) % 160) - 48;\n  P.sx = sx;\n  P.sy = 36 + 0.006 * (sx - X0) * (sx - X0);\n  // Clouds drift right at 18 LEDs a second through a 280 LED loop, each two\n  // puffs. The first is always there; more come in as Clouds turns up.\n  P.clouds = [];\n  P.wind = tau * 18;\n  const C = [\n    [61.5, 48, 24, 38, 0.5],\n    [131, 24, 20, 26, 0.5],\n    [201, 100, 26, 30, 0.5],\n    [271, 72, 18, 44, 0.55],\n    [26, 16, 30, 24, 0.5],\n    [166, 114, 22, 22, 0.5],\n  ];\n  for (let i = 0; i \u003c C.length; i++) {\n    const [x0, y, rx, ry, dark] = C[i];\n    const w = i === 0 ? 1 : clamp(cloudy * 6 - i + 0.6, 0, 1);\n    if (w \u003c= 0) continue;\n    const x = ((x0 + tau * 18) % 280) - 70;\n    const dk = dark * w * (0.85 + 0.4 * cloudy);\n    const yy = y + 5 * Math.sin(tau * 0.07 + i);\n    P.clouds.push({ x, y: yy, rx, ry, dark: dk });\n    P.clouds.push({ x: x - rx * 0.9, y: yy + ry * 0.45, rx: rx * 0.7, ry: ry * 0.6, dark: dk * 0.6 });\n  }\n  // A cloud over the sun takes its glow, and an overcast sky takes some of it\n  // anyway and turns the daylight grey and cool.\n  let over = 0;\n  for (const c of P.clouds) over += c.dark * 1.6 * Math.exp(-(((P.sx - c.x) / c.rx) ** 2 + ((P.sy - c.y) / c.ry) ** 2));\n  P.sunClear = clamp(1 - over, 0, 1) * (1 - 0.75 * cloudy);\n  P.skyLight = 0.64 - 0.12 * cloudy;\n  P.cool = cloudy;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  const hue = clamp(k[0], 0, 1);\n  const speed = clamp(k[1], 0, 3) / 2;\n  const cut = Math.round(clamp((k[2] - 1) / 3, 0, 1) * 6) / 6;\n  P.cloudy = clamp(k[3], 0, 1);\n  if (cut !== P.cut) build(P, cut);\n  if (hue !== P.hue) {\n    P.hue = hue;\n    P.palette = GLASS.map((c) => rotateHue(c, hue));\n  }\n  // The window opens with the sun just inside its left edge and the first\n  // cloud coming up behind it, ten seconds further on at the knob's speed,\n  // so the opening light already differs from one Speed to the next.\n  if (!P.started) {\n    P.started = true;\n    P.tau = 2 + 10 * speed;\n  }\n  P.tau += dt * speed;\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (P.cut \u003c 0) return;\n  sky(P, P.cloudy);\n  const { kinds, cx, cy, tint, col, palette, ids, tex } = P;\n  // Sunlight is warm; an overcast sky is grey and a little blue.\n  const day = [1 - 0.22 * P.cool, 1 - 0.1 * P.cool, 0.94 + 0.1 * P.cool];\n  for (let i = 0; i \u003c P.n; i++) {\n    const [L, g] = light(P, cx[i], cy[i]);\n    // Where the sun stands right behind the glass it burns toward white.\n    const bloom = 0.5 * g * g * g;\n    const base = palette[kinds[i]];\n    for (let c = 0; c \u003c 3; c++) {\n      const v = base[c] * tint[i * 3 + c] * L * day[c];\n      col[i * 3 + c] = v + ((c === 2 ? 225 : 255) - v) * bloom;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const id = ids[p];\n      const c = id \u003c 0 ? DARK[id] : null;\n      const r = c ? c[0] : col[id * 3];\n      const g = c ? c[1] : col[id * 3 + 1];\n      const b = c ? c[2] : col[id * 3 + 2];\n      display.setPixel(x, y, Math.round(r) + tex[p * 3], Math.round(g) + tex[p * 3 + 1], Math.round(b) + tex[p * 3 + 2]);\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Glass=0..1, Speed=0.2..3, Pieces=1..4, Clouds=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Glass","min":0,"max":1,"about":"Turns every pane round the colour wheel together, starting from the cathedral set: a cobalt ground, a ruby and gold border, ruby petals and emerald leaves."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sun and the clouds travel behind the window: at 2 the sun takes 26 s to cross it and comes round every 64 s, and a cloud shadow sweeps over in about 6 s; at 0.2 the light hardly moves."},{"name":"Pieces","min":1,"max":4,"about":"How finely the glazier cut the glass: at 1 the border squares are 5 LEDs long and the blue quarries 7 across, at 4 they are 3.5 and 4, and the rose gets 12 petals instead of 8."},{"name":"Clouds","min":0,"max":1,"about":"At 0.06 one cumulus drifts across now and then; turned up, more and darker clouds follow and hide the sun, until the window glows only in patches."}],"start":[0,2,1,0.06],"measures":{"motion":0.0274,"detail":0.1501,"edges":0.9911,"complexity":1.9492,"coverage":0.4248,"colour":0.2313,"drift":0.0531},"knobResponse":[0.1334,0.0459,0.0844,0.0693]},{"slug":"star-trails","title":"Star Trails","family":"celestial","round":12,"note":"삼각대에 세운 카메라가 셔터를 열어 둔 사이 하늘이 돌아서, 별마다 북극 둘레에 제 색의 호를 그려요. 능선 아래에는 랜턴을 켠 텐트가 있고, 가끔 떨어지는 별똥별은 궤적만큼 사진에 남아요. K1 을 누르면 별똥별이 하나 더 떨어져요.","idea":"A camera on a tripod holds its shutter open while the sky turns: every star draws an arc around the pole above a dark ridge and a lit tent.","buttons":"K1 tap sends a meteor across the frame; it stays in the picture as long as the trails do. One also falls by itself every 9 to 23 seconds.","code":"// ===== Patternflow pattern =====\n// Title:   Star Trails\n// Family:  celestial\n// Idea:    A camera on a tripod holds its shutter open while the sky turns: every star draws an arc around the pole above a dark ridge and a lit tent.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: star-trail photographs, the long exposures that show the sky turning about the celestial pole\n// Round:   12\n// ===============================\n// @matrix 64x128\n// @knobs Facing=-1..1, Speed=0.2..3, Latitude=-1..1, Exposure=0..1\n//\n// Knob 1: Facing. Where the camera points: north in the middle, where the trails ring the pole; turned either way it swings round through east or west to the south, where the arcs rise, cross the meridian and set.\n// Knob 2: Speed. How fast the sky turns: at 2 it goes once round in 69 seconds, at the top in 46, at the bottom in eleven and a half minutes.\n// Knob 3: Latitude. Where the tripod stands: the middle is 37.5 degrees north, Seoul; down to the equator the pole sinks to the horizon and, facing east, the stars rise straight up; up to the North Pole the pole climbs overhead and the trails run level with the ground.\n// Knob 4: Exposure. How long the shutter has been open, counted in sky turned: from 80 degrees, five hours of a real night, to 340, nearly whole circles.\n// Buttons: K1 tap sends a meteor across the frame; it stays in the picture as long as the trails do. One also falls by itself every 9 to 23 seconds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The lens. One unit of tan(angle) off the axis is S LEDs, so the frame is\n// 28 degrees either side and 47 up and down.\nconst S = 60;\nconst CX = W / 2;\nconst CY = H / 2;\nconst HORIZON = 112;\n// The camera tilts up so the horizon sits HORIZON rows down.\nconst TILT = Math.atan((HORIZON - CY) / S);\nconst STARS = 460;\nconst DEG = Math.PI / 180;\n// Trails are looked over in stretches of this much hour angle before any is\n// drawn finely.\nconst COARSE = 6 * DEG;\n// Star colours by spectral class, from blue-white to red, and how often each\n// turns up among the stars bright enough to trail.\nconst CLASSES = [\n  [0.42, 0.6, 1.0, 0.18],\n  [0.82, 0.88, 1.0, 0.22],\n  [1.0, 0.92, 0.72, 0.18],\n  [1.0, 0.76, 0.4, 0.18],\n  [1.0, 0.56, 0.22, 0.16],\n  [1.0, 0.36, 0.18, 0.08],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The ridge's height above the horizon, in degrees, round the whole compass.\nfunction ridge(az) {\n  const a = az / DEG;\n  return (\n    2.2 +\n    1.6 * Math.sin(az * 2 + 0.7) +\n    1.1 * Math.sin(az * 5 + 2.1) +\n    0.5 * Math.sin(az * 11 + 0.3) +\n    (a > 300 && a \u003c 345 ? 3.5 * Math.sin(((a - 300) / 45) * Math.PI) : 0)\n  );\n}\n\n// A pine's silhouette from its foot (bx, by) up to its tip at row ty, in\n// tiers that each flare out at the bottom.\nfunction pine(ground, bx, by, ty, tiers) {\n  const height = by - ty;\n  const reach = Math.max(1.2, height * 0.26);\n  for (let y = Math.floor(ty); y \u003c= Math.ceil(by); y++) {\n    if (y \u003c 0 || y >= H) continue;\n    const k = (y - ty) / height;\n    let half = 0.5;\n    if (k \u003c 0.88) {\n      const crown = k / 0.88;\n      const tier = (crown * tiers) % 1;\n      half = Math.max(0.5, (0.2 + 0.8 * crown) * reach * (0.5 + 0.5 * tier));\n    }\n    for (let x = Math.round(bx - half); x \u003c= Math.round(bx + half - 0.01); x++) if (x >= 0 && x \u003c W) ground[y * W + x] = 1;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  // Stars spread evenly over the sphere: declination and right ascension.\n  P.sinDec = new Float32Array(STARS);\n  P.cosDec = new Float32Array(STARS);\n  P.ra = new Float32Array(STARS);\n  P.bright = new Float32Array(STARS);\n  P.col = new Float32Array(STARS * 3);\n  for (let i = 0; i \u003c STARS; i++) {\n    let sd = hash(i, 1) * 2 - 1;\n    let ra = hash(i, 2) * Math.PI * 2;\n    if (i === 0) {\n      // Polaris, three quarters of a degree off the pole.\n      sd = Math.sin(89.26 * DEG);\n      ra = 0.66;\n    }\n    P.sinDec[i] = sd;\n    P.cosDec[i] = Math.sqrt(1 - sd * sd);\n    P.ra[i] = ra;\n    const m = hash(i, 3);\n    P.bright[i] = i === 0 ? 0.95 : 0.2 + 0.8 * m * m * m * m;\n    let pick = hash(i, 4);\n    let c = CLASSES[0];\n    for (const k of CLASSES) {\n      c = k;\n      pick -= k[3];\n      if (pick \u003c 0) break;\n    }\n    if (i === 0) c = CLASSES[2];\n    P.col[i * 3] = c[0];\n    P.col[i * 3 + 1] = c[1];\n    P.col[i * 3 + 2] = c[2];\n  }\n  P.acc = new Float32Array(N * 3);\n  P.pt = [0, 0];\n  P.prev = [0, 0];\n  P.sky = new Float32Array(N * 3);\n  P.ground = new Uint8Array(N);\n  P.lastFacing = NaN;\n  P.clock = 0;\n  P.turn = 0.4;\n  P.meteors = [];\n  P.nextMeteor = 3;\n  P.tapCount = 0;\n}\n\n// The camera's three axes in north, east, up.\nfunction camera(P, facing) {\n  const az = facing;\n  const ce = Math.cos(TILT);\n  const se = Math.sin(TILT);\n  P.f = [ce * Math.cos(az), ce * Math.sin(az), se];\n  P.r = [-Math.sin(az), Math.cos(az), 0];\n  P.u = [-se * Math.cos(az), -se * Math.sin(az), ce];\n}\n\n// A direction in north, east, up to a spot on the panel, or false behind the lens.\nfunction project(P, n, e, up, out) {\n  const f = P.f;\n  const r = P.r;\n  const u = P.u;\n  const z = n * f[0] + e * f[1] + up * f[2];\n  if (z \u003c 0.2) return false;\n  out[0] = CX + (S * (n * r[0] + e * r[1])) / z;\n  out[1] = CY - (S * (n * u[0] + e * u[1] + up * u[2])) / z;\n  return true;\n}\n\n// The landscape and the sky behind the stars; they change only when the\n// camera turns.\nfunction buildBackdrop(P, facing) {\n  camera(P, facing);\n  const sky = P.sky;\n  const ground = P.ground;\n  ground.fill(0);\n  const f = P.f;\n  const r = P.r;\n  const u = P.u;\n  // The ridge top for each column.\n  const top = new Float32Array(W);\n  const pt = [0, 0];\n  for (let x = 0; x \u003c W; x++) {\n    const px = (x + 0.5 - CX) / S;\n    const py = -(HORIZON - CY) / S;\n    const n = f[0] + r[0] * px + u[0] * py;\n    const e = f[1] + r[1] * px + u[1] * py;\n    let az = Math.atan2(e, n);\n    if (az \u003c 0) az += Math.PI * 2;\n    const h = ridge(az) * DEG;\n    const len = Math.hypot(n, e);\n    project(P, (n / len) * Math.cos(h), (e / len) * Math.cos(h), Math.sin(h), pt);\n    top[x] = pt[1];\n  }\n  // Pines: a row of small ones along the ridge, and three tall ones on the\n  // near ground. Each stands at its own bearing, so they slide past as the\n  // camera turns.\n  for (let t = 0; t \u003c 34; t++) {\n    const near = t \u003c 3;\n    const az = near ? [-17, 13, 158][t] * DEG : hash(t, 21) * Math.PI * 2;\n    const tall = (near ? 13 + 7 * hash(t, 22) : 2 + 5 * hash(t, 22)) * DEG;\n    const base = near ? -4.5 * DEG : ridge(az) * DEG - 0.8 * DEG;\n    if (!project(P, Math.cos(az) * Math.cos(base), Math.sin(az) * Math.cos(base), Math.sin(base), pt)) continue;\n    const bx = pt[0];\n    const by = pt[1];\n    project(P, Math.cos(az) * Math.cos(base + tall), Math.sin(az) * Math.cos(base + tall), Math.sin(base + tall), pt);\n    pine(ground, bx, by, pt[1], near ? 4 : 3);\n  }\n  for (let x = 0; x \u003c W; x++) for (let y = Math.max(0, Math.round(top[x])); y \u003c H; y++) ground[y * W + x] = 1;\n  // The tent, pitched on the near ground a little west of north.\n  P.tent = null;\n  const taz = -6 * DEG;\n  const talt = -3.6 * DEG;\n  if (project(P, Math.cos(taz) * Math.cos(talt), Math.sin(taz) * Math.cos(talt), Math.sin(talt), pt)) P.tent = [pt[0], pt[1]];\n\n  // Sky: deep blue overhead, paler at the horizon, and the glow of a town\n  // far off to the east-south-east.\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const px = (x + 0.5 - CX) / S;\n      const py = (CY - y - 0.5) / S;\n      const n = f[0] + r[0] * px + u[0] * py;\n      const e = f[1] + r[1] * px + u[1] * py;\n      const up = f[2] + u[2] * py;\n      const len = Math.hypot(n, e, up);\n      const alt = Math.asin(up / len);\n      const az = Math.atan2(e, n);\n      const lowness = Math.exp(-Math.max(0, alt) / (14 * DEG));\n      const townAz = Math.cos(az - 110 * DEG);\n      const town = Math.max(0, townAz) ** 6 * Math.exp(-Math.max(0, alt) / (9 * DEG));\n      const o = (y * W + x) * 3;\n      sky[o] = 0.006 + 0.03 * lowness + 0.2 * town;\n      sky[o + 1] = 0.01 + 0.05 * lowness + 0.1 * town;\n      sky[o + 2] = 0.04 + 0.09 * lowness + 0.03 * town;\n    }\n  }\n  P.lastFacing = facing;\n}\n\nfunction splat(acc, x, y, w, r, g, b) {\n  const x0 = Math.floor(x - 0.5);\n  const y0 = Math.floor(y - 0.5);\n  const fx = x - 0.5 - x0;\n  const fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++) {\n    const yy = y0 + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    const wy = j ? fy : 1 - fy;\n    for (let i = 0; i \u003c 2; i++) {\n      const xx = x0 + i;\n      if (xx \u003c 0 || xx >= W) continue;\n      const k = w * wy * (i ? fx : 1 - fx);\n      const o = (yy * W + xx) * 3;\n      acc[o] += k * r;\n      acc[o + 1] += k * g;\n      acc[o + 2] += k * b;\n    }\n  }\n}\n\n// A meteor starts somewhere in the upper sky and falls 20 to 55 degrees off\n// level, to the left or the right.\nfunction newMeteor(P, bright) {\n  const s = P.tapCount++ * 7 + 101;\n  const ang = (20 + 35 * hash(s, 3)) * DEG;\n  const side = hash(s, 6) \u003c 0.5 ? 1 : -1;\n  P.meteors.push({\n    x0: side > 0 ? 4 + hash(s, 1) * 30 : W - 4 - hash(s, 1) * 30,\n    y0: 6 + hash(s, 2) * 56,\n    dx: Math.cos(ang) * side,\n    dy: Math.sin(ang),\n    len: 30 + 26 * hash(s, 5),\n    age: 0,\n    bright,\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // North sits at the middle of the knob; either end is due south.\n  const facing = k[0] * Math.PI;\n  const v = k[2];\n  const lat = (v \u003c 0 ? 37.5 * (1 + v) : 37.5 + 52.5 * v) * DEG;\n  if (facing !== P.lastFacing) buildBackdrop(P, facing);\n  P.lat = lat;\n  // The lantern in the tent wavers a little.\n  P.clock += dt;\n  const c = P.clock;\n  P.lamp = 0.86 + 0.06 * Math.sin(c * 2.3) + 0.05 * Math.sin(c * 5.1 + 1) + 0.03 * Math.sin(c * 11.7 + 2);\n  P.omega = k[1] * 2.6 * DEG;\n  P.turn += dt * P.omega;\n  P.span = (80 + 260 * k[3]) * DEG;\n  // How long the shutter has been open, in seconds, for anything that is\n  // not a star.\n  P.open = P.span / Math.max(P.omega, 1e-4);\n  if (input.btnPressed && input.btnPressed[0]) newMeteor(P, 1);\n  P.nextMeteor -= dt;\n  if (P.nextMeteor \u003c= 0) {\n    newMeteor(P, 0.7);\n    P.nextMeteor = 9 + 14 * hash(P.tapCount, 9);\n  }\n  for (const m of P.meteors) m.age += dt;\n  P.meteors = P.meteors.filter((m) => m.age \u003c Math.min(P.open, 60));\n}\n\n// One star's trail from hour angle `from` to `to`. The samples sit at whole\n// multiples of a step of about two thirds of an LED, so they stay put on the\n// panel as the sky turns and a trail does not shimmer along its length; only\n// its two ends move.\nfunction strand(P, acc, i, from, to, tail, head, sphi, cphi) {\n  const sd = P.sinDec[i];\n  const cd = P.cosDec[i];\n  const bright = P.bright[i];\n  const cr = P.col[i * 3];\n  const cg = P.col[i * 3 + 1];\n  const cb = P.col[i * 3 + 2];\n  const span = head - tail;\n  const da = Math.min(COARSE, 0.65 / (S * Math.max(cd, 0.004) * 1.3));\n  const pt = P.pt;\n  const prev = P.prev;\n  let a = Math.ceil(from / da) * da;\n  let ch = Math.cos(a);\n  let sh = Math.sin(a);\n  const cs = Math.cos(da);\n  const ss = Math.sin(da);\n  let have = false;\n  const deposit = (age) => {\n    if (have) {\n      const len = Math.hypot(pt[0] - prev[0], pt[1] - prev[1]);\n      // The trail fades in over its oldest sixth.\n      if (len \u003c 4 && pt[0] > -2 && pt[0] \u003c W + 2 && pt[1] > -2 && pt[1] \u003c H + 2) splat(acc, pt[0], pt[1], bright * len * Math.min(1, age * 6), cr, cg, cb);\n    }\n    prev[0] = pt[0];\n    prev[1] = pt[1];\n    have = true;\n  };\n  for (; a \u003c= to; a += da) {\n    const up = sphi * sd + cphi * cd * ch;\n    if (up > -0.02 && project(P, cphi * sd - sphi * cd * ch, -cd * sh, up, pt)) deposit((a - tail) / span);\n    else have = false;\n    const c2 = ch * cs - sh * ss;\n    sh = sh * cs + ch * ss;\n    ch = c2;\n  }\n  if (to \u003c head) return;\n  // The last bit up to the star itself, and the star where it is now.\n  const hc = Math.cos(head);\n  const up = sphi * sd + cphi * cd * hc;\n  if (up > -0.02 && project(P, cphi * sd - sphi * cd * hc, -cd * Math.sin(head), up, pt)) {\n    deposit(1);\n    if (pt[0] > -2 && pt[0] \u003c W + 2 && pt[1] > -2 && pt[1] \u003c H + 2) splat(acc, pt[0], pt[1], bright * 0.7, cr, cg, cb);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const acc = P.acc;\n  acc.fill(0);\n  const sphi = Math.sin(P.lat);\n  const cphi = Math.cos(P.lat);\n  const span = P.span;\n  const pt = [0, 0];\n  const ends = new Uint8Array(Math.ceil(span / COARSE) + 2);\n  for (let i = 0; i \u003c STARS; i++) {\n    const sd = P.sinDec[i];\n    const cd = P.cosDec[i];\n    const head = P.turn - P.ra[i];\n    const tail = head - span;\n    // A coarse pass finds the stretches of the trail in or near the frame;\n    // only those are drawn finely.\n    const steps = Math.ceil(span / COARSE);\n    for (let s = 0; s \u003c= steps; s++) {\n      const a = Math.min(head, tail + s * COARSE);\n      const ch = Math.cos(a);\n      const up = sphi * sd + cphi * cd * ch;\n      const n = cphi * sd - sphi * cd * ch;\n      const e = -cd * Math.sin(a);\n      ends[s] = up > -0.08 && project(P, n, e, up, pt) && pt[0] > -12 && pt[0] \u003c W + 12 && pt[1] > -12 && pt[1] \u003c HORIZON + 6 ? 1 : 0;\n    }\n    let from = NaN;\n    for (let s = 0; s \u003c= steps; s++) {\n      const near = s \u003c steps && (ends[s] || ends[s + 1]);\n      if (near && Number.isNaN(from)) from = tail + s * COARSE;\n      if (!near && !Number.isNaN(from)) {\n        strand(P, acc, i, from, Math.min(head, tail + s * COARSE), tail, head, sphi, cphi);\n        from = NaN;\n      }\n    }\n  }\n\n  // Meteors: they streak in over a third of a second, stay as long as the\n  // trails remember and fade out the way a trail's oldest sixth does.\n  for (const m of P.meteors) {\n    const grow = Math.min(1, m.age / 0.35);\n    const fade = Math.min(1, (1 - m.age / Math.min(P.open, 60)) * 6);\n    const len = m.len * grow;\n    for (let d = 0; d \u003c len; d += 0.5) {\n      const t = d / m.len;\n      const x = m.x0 + m.dx * d;\n      const y = m.y0 + m.dy * d;\n      if (y > HORIZON) break;\n      // Warm where it struck the air, green-white at the head.\n      const w = 0.6 * m.bright * fade * Math.sin(Math.PI * Math.min(1, t * 1.1));\n      splat(acc, x, y, w, 0.55 + 0.45 * (1 - t), 1.0, 0.55 + 0.35 * t);\n    }\n  }\n\n  const sky = P.sky;\n  const ground = P.ground;\n  const tent = P.tent;\n  const lamp = P.lamp;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let r;\n      let g;\n      let b;\n      if (ground[p]) {\n        r = 0.004;\n        g = 0.005;\n        b = 0.012;\n      } else {\n        r = sky[o] + acc[o];\n        g = sky[o + 1] + acc[o + 1];\n        b = sky[o + 2] + acc[o + 2];\n      }\n      if (tent) {\n        const dx = x + 0.5 - tent[0];\n        const dy = y + 0.5 - tent[1];\n        // The tent: a lit orange triangle six LEDs high with its door flap\n        // open on the lantern, and the light on the grass in front.\n        if (dy \u003c= 0 && dy > -6 && Math.abs(dx) \u003c (dy + 6) * 0.8) {\n          const door = dy > -3 && Math.abs(dx) \u003c (dy + 3) * 0.55 + 0.3;\n          r = (door ? 1.6 : 0.62) * lamp;\n          g = (door ? 1.15 : 0.27) * lamp;\n          b = (door ? 0.45 : 0.07) * lamp;\n        } else if (ground[p]) {\n          const glow = Math.exp(-(dx * dx * 0.04 + dy * dy * 0.18)) * 0.22 * lamp;\n          r += glow;\n          g += glow * 0.45;\n          b += glow * 0.12;\n        }\n      }\n      // A soft shoulder instead of a hard clip where trails pile up at the pole.\n      display.setPixel(x, y, 255 * (1 - Math.exp(-r * 1.6)) * 1.25, 255 * (1 - Math.exp(-g * 1.6)) * 1.25, 255 * (1 - Math.exp(-b * 1.6)) * 1.25);\n    }\n  }\n}\n","layer":{"id":"layer-star-trails","type":"code","name":"star-trails","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Star Trails\n// Family:  celestial\n// Idea:    A camera on a tripod holds its shutter open while the sky turns: every star draws an arc around the pole above a dark ridge and a lit tent.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: star-trail photographs, the long exposures that show the sky turning about the celestial pole\n// Round:   12\n// ===============================\n// @matrix 64x128\n// @knobs Facing=-1..1, Speed=0.2..3, Latitude=-1..1, Exposure=0..1\n//\n// Knob 1: Facing. Where the camera points: north in the middle, where the trails ring the pole; turned either way it swings round through east or west to the south, where the arcs rise, cross the meridian and set.\n// Knob 2: Speed. How fast the sky turns: at 2 it goes once round in 69 seconds, at the top in 46, at the bottom in eleven and a half minutes.\n// Knob 3: Latitude. Where the tripod stands: the middle is 37.5 degrees north, Seoul; down to the equator the pole sinks to the horizon and, facing east, the stars rise straight up; up to the North Pole the pole climbs overhead and the trails run level with the ground.\n// Knob 4: Exposure. How long the shutter has been open, counted in sky turned: from 80 degrees, five hours of a real night, to 340, nearly whole circles.\n// Buttons: K1 tap sends a meteor across the frame; it stays in the picture as long as the trails do. One also falls by itself every 9 to 23 seconds.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The lens. One unit of tan(angle) off the axis is S LEDs, so the frame is\n// 28 degrees either side and 47 up and down.\nconst S = 60;\nconst CX = W / 2;\nconst CY = H / 2;\nconst HORIZON = 112;\n// The camera tilts up so the horizon sits HORIZON rows down.\nconst TILT = Math.atan((HORIZON - CY) / S);\nconst STARS = 460;\nconst DEG = Math.PI / 180;\n// Trails are looked over in stretches of this much hour angle before any is\n// drawn finely.\nconst COARSE = 6 * DEG;\n// Star colours by spectral class, from blue-white to red, and how often each\n// turns up among the stars bright enough to trail.\nconst CLASSES = [\n  [0.42, 0.6, 1.0, 0.18],\n  [0.82, 0.88, 1.0, 0.22],\n  [1.0, 0.92, 0.72, 0.18],\n  [1.0, 0.76, 0.4, 0.18],\n  [1.0, 0.56, 0.22, 0.16],\n  [1.0, 0.36, 0.18, 0.08],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// The ridge's height above the horizon, in degrees, round the whole compass.\nfunction ridge(az) {\n  const a = az / DEG;\n  return (\n    2.2 +\n    1.6 * Math.sin(az * 2 + 0.7) +\n    1.1 * Math.sin(az * 5 + 2.1) +\n    0.5 * Math.sin(az * 11 + 0.3) +\n    (a > 300 && a \u003c 345 ? 3.5 * Math.sin(((a - 300) / 45) * Math.PI) : 0)\n  );\n}\n\n// A pine's silhouette from its foot (bx, by) up to its tip at row ty, in\n// tiers that each flare out at the bottom.\nfunction pine(ground, bx, by, ty, tiers) {\n  const height = by - ty;\n  const reach = Math.max(1.2, height * 0.26);\n  for (let y = Math.floor(ty); y \u003c= Math.ceil(by); y++) {\n    if (y \u003c 0 || y >= H) continue;\n    const k = (y - ty) / height;\n    let half = 0.5;\n    if (k \u003c 0.88) {\n      const crown = k / 0.88;\n      const tier = (crown * tiers) % 1;\n      half = Math.max(0.5, (0.2 + 0.8 * crown) * reach * (0.5 + 0.5 * tier));\n    }\n    for (let x = Math.round(bx - half); x \u003c= Math.round(bx + half - 0.01); x++) if (x >= 0 && x \u003c W) ground[y * W + x] = 1;\n  }\n}\n\nexport function setup(params) {\n  const P = params;\n  // Stars spread evenly over the sphere: declination and right ascension.\n  P.sinDec = new Float32Array(STARS);\n  P.cosDec = new Float32Array(STARS);\n  P.ra = new Float32Array(STARS);\n  P.bright = new Float32Array(STARS);\n  P.col = new Float32Array(STARS * 3);\n  for (let i = 0; i \u003c STARS; i++) {\n    let sd = hash(i, 1) * 2 - 1;\n    let ra = hash(i, 2) * Math.PI * 2;\n    if (i === 0) {\n      // Polaris, three quarters of a degree off the pole.\n      sd = Math.sin(89.26 * DEG);\n      ra = 0.66;\n    }\n    P.sinDec[i] = sd;\n    P.cosDec[i] = Math.sqrt(1 - sd * sd);\n    P.ra[i] = ra;\n    const m = hash(i, 3);\n    P.bright[i] = i === 0 ? 0.95 : 0.2 + 0.8 * m * m * m * m;\n    let pick = hash(i, 4);\n    let c = CLASSES[0];\n    for (const k of CLASSES) {\n      c = k;\n      pick -= k[3];\n      if (pick \u003c 0) break;\n    }\n    if (i === 0) c = CLASSES[2];\n    P.col[i * 3] = c[0];\n    P.col[i * 3 + 1] = c[1];\n    P.col[i * 3 + 2] = c[2];\n  }\n  P.acc = new Float32Array(N * 3);\n  P.pt = [0, 0];\n  P.prev = [0, 0];\n  P.sky = new Float32Array(N * 3);\n  P.ground = new Uint8Array(N);\n  P.lastFacing = NaN;\n  P.clock = 0;\n  P.turn = 0.4;\n  P.meteors = [];\n  P.nextMeteor = 3;\n  P.tapCount = 0;\n}\n\n// The camera's three axes in north, east, up.\nfunction camera(P, facing) {\n  const az = facing;\n  const ce = Math.cos(TILT);\n  const se = Math.sin(TILT);\n  P.f = [ce * Math.cos(az), ce * Math.sin(az), se];\n  P.r = [-Math.sin(az), Math.cos(az), 0];\n  P.u = [-se * Math.cos(az), -se * Math.sin(az), ce];\n}\n\n// A direction in north, east, up to a spot on the panel, or false behind the lens.\nfunction project(P, n, e, up, out) {\n  const f = P.f;\n  const r = P.r;\n  const u = P.u;\n  const z = n * f[0] + e * f[1] + up * f[2];\n  if (z \u003c 0.2) return false;\n  out[0] = CX + (S * (n * r[0] + e * r[1])) / z;\n  out[1] = CY - (S * (n * u[0] + e * u[1] + up * u[2])) / z;\n  return true;\n}\n\n// The landscape and the sky behind the stars; they change only when the\n// camera turns.\nfunction buildBackdrop(P, facing) {\n  camera(P, facing);\n  const sky = P.sky;\n  const ground = P.ground;\n  ground.fill(0);\n  const f = P.f;\n  const r = P.r;\n  const u = P.u;\n  // The ridge top for each column.\n  const top = new Float32Array(W);\n  const pt = [0, 0];\n  for (let x = 0; x \u003c W; x++) {\n    const px = (x + 0.5 - CX) / S;\n    const py = -(HORIZON - CY) / S;\n    const n = f[0] + r[0] * px + u[0] * py;\n    const e = f[1] + r[1] * px + u[1] * py;\n    let az = Math.atan2(e, n);\n    if (az \u003c 0) az += Math.PI * 2;\n    const h = ridge(az) * DEG;\n    const len = Math.hypot(n, e);\n    project(P, (n / len) * Math.cos(h), (e / len) * Math.cos(h), Math.sin(h), pt);\n    top[x] = pt[1];\n  }\n  // Pines: a row of small ones along the ridge, and three tall ones on the\n  // near ground. Each stands at its own bearing, so they slide past as the\n  // camera turns.\n  for (let t = 0; t \u003c 34; t++) {\n    const near = t \u003c 3;\n    const az = near ? [-17, 13, 158][t] * DEG : hash(t, 21) * Math.PI * 2;\n    const tall = (near ? 13 + 7 * hash(t, 22) : 2 + 5 * hash(t, 22)) * DEG;\n    const base = near ? -4.5 * DEG : ridge(az) * DEG - 0.8 * DEG;\n    if (!project(P, Math.cos(az) * Math.cos(base), Math.sin(az) * Math.cos(base), Math.sin(base), pt)) continue;\n    const bx = pt[0];\n    const by = pt[1];\n    project(P, Math.cos(az) * Math.cos(base + tall), Math.sin(az) * Math.cos(base + tall), Math.sin(base + tall), pt);\n    pine(ground, bx, by, pt[1], near ? 4 : 3);\n  }\n  for (let x = 0; x \u003c W; x++) for (let y = Math.max(0, Math.round(top[x])); y \u003c H; y++) ground[y * W + x] = 1;\n  // The tent, pitched on the near ground a little west of north.\n  P.tent = null;\n  const taz = -6 * DEG;\n  const talt = -3.6 * DEG;\n  if (project(P, Math.cos(taz) * Math.cos(talt), Math.sin(taz) * Math.cos(talt), Math.sin(talt), pt)) P.tent = [pt[0], pt[1]];\n\n  // Sky: deep blue overhead, paler at the horizon, and the glow of a town\n  // far off to the east-south-east.\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const px = (x + 0.5 - CX) / S;\n      const py = (CY - y - 0.5) / S;\n      const n = f[0] + r[0] * px + u[0] * py;\n      const e = f[1] + r[1] * px + u[1] * py;\n      const up = f[2] + u[2] * py;\n      const len = Math.hypot(n, e, up);\n      const alt = Math.asin(up / len);\n      const az = Math.atan2(e, n);\n      const lowness = Math.exp(-Math.max(0, alt) / (14 * DEG));\n      const townAz = Math.cos(az - 110 * DEG);\n      const town = Math.max(0, townAz) ** 6 * Math.exp(-Math.max(0, alt) / (9 * DEG));\n      const o = (y * W + x) * 3;\n      sky[o] = 0.006 + 0.03 * lowness + 0.2 * town;\n      sky[o + 1] = 0.01 + 0.05 * lowness + 0.1 * town;\n      sky[o + 2] = 0.04 + 0.09 * lowness + 0.03 * town;\n    }\n  }\n  P.lastFacing = facing;\n}\n\nfunction splat(acc, x, y, w, r, g, b) {\n  const x0 = Math.floor(x - 0.5);\n  const y0 = Math.floor(y - 0.5);\n  const fx = x - 0.5 - x0;\n  const fy = y - 0.5 - y0;\n  for (let j = 0; j \u003c 2; j++) {\n    const yy = y0 + j;\n    if (yy \u003c 0 || yy >= H) continue;\n    const wy = j ? fy : 1 - fy;\n    for (let i = 0; i \u003c 2; i++) {\n      const xx = x0 + i;\n      if (xx \u003c 0 || xx >= W) continue;\n      const k = w * wy * (i ? fx : 1 - fx);\n      const o = (yy * W + xx) * 3;\n      acc[o] += k * r;\n      acc[o + 1] += k * g;\n      acc[o + 2] += k * b;\n    }\n  }\n}\n\n// A meteor starts somewhere in the upper sky and falls 20 to 55 degrees off\n// level, to the left or the right.\nfunction newMeteor(P, bright) {\n  const s = P.tapCount++ * 7 + 101;\n  const ang = (20 + 35 * hash(s, 3)) * DEG;\n  const side = hash(s, 6) \u003c 0.5 ? 1 : -1;\n  P.meteors.push({\n    x0: side > 0 ? 4 + hash(s, 1) * 30 : W - 4 - hash(s, 1) * 30,\n    y0: 6 + hash(s, 2) * 56,\n    dx: Math.cos(ang) * side,\n    dy: Math.sin(ang),\n    len: 30 + 26 * hash(s, 5),\n    age: 0,\n    bright,\n  });\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  // North sits at the middle of the knob; either end is due south.\n  const facing = k[0] * Math.PI;\n  const v = k[2];\n  const lat = (v \u003c 0 ? 37.5 * (1 + v) : 37.5 + 52.5 * v) * DEG;\n  if (facing !== P.lastFacing) buildBackdrop(P, facing);\n  P.lat = lat;\n  // The lantern in the tent wavers a little.\n  P.clock += dt;\n  const c = P.clock;\n  P.lamp = 0.86 + 0.06 * Math.sin(c * 2.3) + 0.05 * Math.sin(c * 5.1 + 1) + 0.03 * Math.sin(c * 11.7 + 2);\n  P.omega = k[1] * 2.6 * DEG;\n  P.turn += dt * P.omega;\n  P.span = (80 + 260 * k[3]) * DEG;\n  // How long the shutter has been open, in seconds, for anything that is\n  // not a star.\n  P.open = P.span / Math.max(P.omega, 1e-4);\n  if (input.btnPressed && input.btnPressed[0]) newMeteor(P, 1);\n  P.nextMeteor -= dt;\n  if (P.nextMeteor \u003c= 0) {\n    newMeteor(P, 0.7);\n    P.nextMeteor = 9 + 14 * hash(P.tapCount, 9);\n  }\n  for (const m of P.meteors) m.age += dt;\n  P.meteors = P.meteors.filter((m) => m.age \u003c Math.min(P.open, 60));\n}\n\n// One star's trail from hour angle `from` to `to`. The samples sit at whole\n// multiples of a step of about two thirds of an LED, so they stay put on the\n// panel as the sky turns and a trail does not shimmer along its length; only\n// its two ends move.\nfunction strand(P, acc, i, from, to, tail, head, sphi, cphi) {\n  const sd = P.sinDec[i];\n  const cd = P.cosDec[i];\n  const bright = P.bright[i];\n  const cr = P.col[i * 3];\n  const cg = P.col[i * 3 + 1];\n  const cb = P.col[i * 3 + 2];\n  const span = head - tail;\n  const da = Math.min(COARSE, 0.65 / (S * Math.max(cd, 0.004) * 1.3));\n  const pt = P.pt;\n  const prev = P.prev;\n  let a = Math.ceil(from / da) * da;\n  let ch = Math.cos(a);\n  let sh = Math.sin(a);\n  const cs = Math.cos(da);\n  const ss = Math.sin(da);\n  let have = false;\n  const deposit = (age) => {\n    if (have) {\n      const len = Math.hypot(pt[0] - prev[0], pt[1] - prev[1]);\n      // The trail fades in over its oldest sixth.\n      if (len \u003c 4 && pt[0] > -2 && pt[0] \u003c W + 2 && pt[1] > -2 && pt[1] \u003c H + 2) splat(acc, pt[0], pt[1], bright * len * Math.min(1, age * 6), cr, cg, cb);\n    }\n    prev[0] = pt[0];\n    prev[1] = pt[1];\n    have = true;\n  };\n  for (; a \u003c= to; a += da) {\n    const up = sphi * sd + cphi * cd * ch;\n    if (up > -0.02 && project(P, cphi * sd - sphi * cd * ch, -cd * sh, up, pt)) deposit((a - tail) / span);\n    else have = false;\n    const c2 = ch * cs - sh * ss;\n    sh = sh * cs + ch * ss;\n    ch = c2;\n  }\n  if (to \u003c head) return;\n  // The last bit up to the star itself, and the star where it is now.\n  const hc = Math.cos(head);\n  const up = sphi * sd + cphi * cd * hc;\n  if (up > -0.02 && project(P, cphi * sd - sphi * cd * hc, -cd * Math.sin(head), up, pt)) {\n    deposit(1);\n    if (pt[0] > -2 && pt[0] \u003c W + 2 && pt[1] > -2 && pt[1] \u003c H + 2) splat(acc, pt[0], pt[1], bright * 0.7, cr, cg, cb);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const acc = P.acc;\n  acc.fill(0);\n  const sphi = Math.sin(P.lat);\n  const cphi = Math.cos(P.lat);\n  const span = P.span;\n  const pt = [0, 0];\n  const ends = new Uint8Array(Math.ceil(span / COARSE) + 2);\n  for (let i = 0; i \u003c STARS; i++) {\n    const sd = P.sinDec[i];\n    const cd = P.cosDec[i];\n    const head = P.turn - P.ra[i];\n    const tail = head - span;\n    // A coarse pass finds the stretches of the trail in or near the frame;\n    // only those are drawn finely.\n    const steps = Math.ceil(span / COARSE);\n    for (let s = 0; s \u003c= steps; s++) {\n      const a = Math.min(head, tail + s * COARSE);\n      const ch = Math.cos(a);\n      const up = sphi * sd + cphi * cd * ch;\n      const n = cphi * sd - sphi * cd * ch;\n      const e = -cd * Math.sin(a);\n      ends[s] = up > -0.08 && project(P, n, e, up, pt) && pt[0] > -12 && pt[0] \u003c W + 12 && pt[1] > -12 && pt[1] \u003c HORIZON + 6 ? 1 : 0;\n    }\n    let from = NaN;\n    for (let s = 0; s \u003c= steps; s++) {\n      const near = s \u003c steps && (ends[s] || ends[s + 1]);\n      if (near && Number.isNaN(from)) from = tail + s * COARSE;\n      if (!near && !Number.isNaN(from)) {\n        strand(P, acc, i, from, Math.min(head, tail + s * COARSE), tail, head, sphi, cphi);\n        from = NaN;\n      }\n    }\n  }\n\n  // Meteors: they streak in over a third of a second, stay as long as the\n  // trails remember and fade out the way a trail's oldest sixth does.\n  for (const m of P.meteors) {\n    const grow = Math.min(1, m.age / 0.35);\n    const fade = Math.min(1, (1 - m.age / Math.min(P.open, 60)) * 6);\n    const len = m.len * grow;\n    for (let d = 0; d \u003c len; d += 0.5) {\n      const t = d / m.len;\n      const x = m.x0 + m.dx * d;\n      const y = m.y0 + m.dy * d;\n      if (y > HORIZON) break;\n      // Warm where it struck the air, green-white at the head.\n      const w = 0.6 * m.bright * fade * Math.sin(Math.PI * Math.min(1, t * 1.1));\n      splat(acc, x, y, w, 0.55 + 0.45 * (1 - t), 1.0, 0.55 + 0.35 * t);\n    }\n  }\n\n  const sky = P.sky;\n  const ground = P.ground;\n  const tent = P.tent;\n  const lamp = P.lamp;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const o = p * 3;\n      let r;\n      let g;\n      let b;\n      if (ground[p]) {\n        r = 0.004;\n        g = 0.005;\n        b = 0.012;\n      } else {\n        r = sky[o] + acc[o];\n        g = sky[o + 1] + acc[o + 1];\n        b = sky[o + 2] + acc[o + 2];\n      }\n      if (tent) {\n        const dx = x + 0.5 - tent[0];\n        const dy = y + 0.5 - tent[1];\n        // The tent: a lit orange triangle six LEDs high with its door flap\n        // open on the lantern, and the light on the grass in front.\n        if (dy \u003c= 0 && dy > -6 && Math.abs(dx) \u003c (dy + 6) * 0.8) {\n          const door = dy > -3 && Math.abs(dx) \u003c (dy + 3) * 0.55 + 0.3;\n          r = (door ? 1.6 : 0.62) * lamp;\n          g = (door ? 1.15 : 0.27) * lamp;\n          b = (door ? 0.45 : 0.07) * lamp;\n        } else if (ground[p]) {\n          const glow = Math.exp(-(dx * dx * 0.04 + dy * dy * 0.18)) * 0.22 * lamp;\n          r += glow;\n          g += glow * 0.45;\n          b += glow * 0.12;\n        }\n      }\n      // A soft shoulder instead of a hard clip where trails pile up at the pole.\n      display.setPixel(x, y, 255 * (1 - Math.exp(-r * 1.6)) * 1.25, 255 * (1 - Math.exp(-g * 1.6)) * 1.25, 255 * (1 - Math.exp(-b * 1.6)) * 1.25);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Facing=-1..1, Speed=0.2..3, Latitude=-1..1, Exposure=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Facing","min":-1,"max":1,"about":"Where the camera points: north in the middle, where the trails ring the pole; turned either way it swings round through east or west to the south, where the arcs rise, cross the meridian and set."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the sky turns: at 2 it goes once round in 69 seconds, at the top in 46, at the bottom in eleven and a half minutes."},{"name":"Latitude","min":-1,"max":1,"about":"Where the tripod stands: the middle is 37.5 degrees north, Seoul; down to the equator the pole sinks to the horizon and, facing east, the stars rise straight up; up to the North Pole the pole climbs overhead and the trails run level with the ground."},{"name":"Exposure","min":0,"max":1,"about":"How long the shutter has been open, counted in sky turned: from 80 degrees, five hours of a real night, to 340, nearly whole circles."}],"start":[0,2,0,0.06],"measures":{"motion":0.019,"detail":0.0909,"edges":0.5036,"complexity":1.5537,"coverage":0.563,"colour":0.1007,"drift":0.036},"knobResponse":[0.2496,0.0367,0.1859,0.2144]},{"slug":"sunglint","title":"Sunglint","family":"ocean","round":20,"note":"절벽에서 해를 마주 보면 수평선 아래로 윤슬 길이 내려오며 넓어져 패널을 채우고, 밀려오는 잔물결 줄마다 반짝임이 실려요. K1 을 누르면 돛단배가 빛 속을 검은 그림자로 가로질러요.","idea":"From a cliff you look out to sea toward the sun, and below it the glitter path of thousands of tiny glints on choppy water widens toward you until it fills the panel, each glint flashing as its wavelet tilts, while a sailboat or a pair of gulls crosses now and then.","buttons":"K1 tap sends a sloop across the glitter before the wind, its sails dark against the light. One also comes by itself every half minute or so, and gulls cross in ones and twos.","code":"// ===== Patternflow pattern =====\n// Title:   Sunglint\n// Family:  ocean\n// Idea:    From a cliff you look out to sea toward the sun, and below it the glitter path of thousands of tiny glints on choppy water widens toward you until it fills the panel, each glint flashing as its wavelet tilts, while a sailboat or a pair of gulls crosses now and then.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Chop=0..1, Wind=-1..1\n//\n// Knob 1: Sun. How high the sun stands. At 0 a high silver sun throws a broad glitter that fills the panel from a third of the way down; turned up, it sinks onto the horizon as a flattened pale gold disc, and the glitter narrows to a gold column with dark slate water either side.\n// Knob 2: Speed. How fast the water moves: at 2 a glint holds for about half a second, and the rows of wavelets that carry the glints roll in at two or three LEDs a second near your feet.\n// Knob 3: Chop. How rough the sea is. At 0 a light chop of fine wavelets whose rows run three LEDs apart under the horizon and fourteen at the foot of the panel; at 1 the wavelets grow half as big again, their rows twenty-one LEDs apart at the foot, and the path spreads wider.\n// Knob 4: Wind. Near calm at 0.06. Turned either way, a breeze from that side sets the wavelets sliding sideways and sends the gusts that thicken the glitter racing across; the cloud bars drift and the grass on the cliff edge bends with it.\n// Buttons: K1 tap sends a sloop across the glitter before the wind, its sails dark against the light. One also comes by itself every half minute or so, and gulls cross in ones and twos.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The horizon row, and the rows of sea under it.\nconst HZ = 19;\nconst SEA = H - HZ;\nconst TAU = Math.PI * 2;\nconst LUT = 1024;\nconst COS = new Float32Array(LUT);\nfor (let i = 0; i \u003c LUT; i++) COS[i] = Math.cos((i / LUT) * TAU);\nconst KL = LUT / TAU;\nconst cos = (a) => COS[(a * KL) & (LUT - 1)];\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\n// Gull wings, raised, gliding and down: seven LEDs across, the body in the\n// middle, each entry how far that column sits above or below the body.\nconst WING = [\n  [-2, -2, -1, 0, -1, -2, -2],\n  [0, -1, -1, 0, -1, -1, 0],\n  [1, 1, 0, 0, 0, 1, 1],\n];\nconst BEAT = [0, 1, 2, 1];\n\nexport function setup(params) {\n  const P = params;\n  P.ph = new Float32Array(N);\n  P.om = new Float32Array(N);\n  P.sz = new Float32Array(N);\n  P.ph2 = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) {\n    P.ph[i] = Math.random() * TAU;\n    P.om[i] = 3.5 + Math.random() * 3.5;\n    P.ph2[i] = Math.random() * TAU;\n    const u = Math.random();\n    P.sz[i] = 1 - 0.5 * u * u * u * u;\n  }\n  P.noise = new Float32Array(256);\n  for (let i = 0; i \u003c 256; i++) P.noise[i] = Math.random();\n  P.buf = new Float32Array(N * 3);\n  P.gust = new Float32Array(16 * 32);\n  for (const k of [\"R1\", \"R2\", \"R3\", \"R4\", \"R5\", \"kx\"]) P[k] = new Float32Array(H);\n  P.t = 0;\n  P.gx = 0;\n  P.cx = 0;\n  P.wx = 0;\n  P.boat = -1;\n  P.bx = 0;\n  P.bdir = 1;\n  P.nextBoat = 14 + Math.random() * 20;\n  // Grass on the cliff edge in the near left corner: base, height, sway phase.\n  P.grass = [];\n  for (let j = 0; j \u003c 18; j++) P.grass.push([Math.random() * 25, 4 + Math.random() * 6, Math.random() * TAU]);\n  P.gulls = [];\n  P.nextGull = 2 + Math.random() * 6;\n  P.started = false;\n}\n\nfunction noise(P, fx, fy) {\n  const ix = Math.floor(fx);\n  const iy = Math.floor(fy);\n  let tx = fx - ix;\n  let ty = fy - iy;\n  tx = tx * tx * (3 - 2 * tx);\n  ty = ty * ty * (3 - 2 * ty);\n  const n = P.noise;\n  const r0 = (iy & 15) * 16;\n  const r1 = ((iy + 1) & 15) * 16;\n  const a = n[r0 + (ix & 15)];\n  const b = n[r0 + ((ix + 1) & 15)];\n  return mix(mix(a, b, tx), mix(n[r1 + (ix & 15)], n[r1 + ((ix + 1) & 15)], tx), ty);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.sun = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0, 3) / 2;\n  P.chop = clamp(k[2], 0, 1);\n  P.wind = clamp(k[3], -1, 1);\n  P.started = true;\n  const step = dt * P.speed;\n  P.t += step;\n  const dir = P.wind \u003c 0 ? -1 : 1;\n  // Gusts run over the water and the cloud bars drift, both with the wind.\n  P.gx += (dir * 3 + 12 * P.wind) * step;\n  P.cx += (dir * 0.6 + 2.5 * P.wind) * step;\n  P.wx += 4 * P.wind * step;\n  if (input.btnPressed && input.btnPressed[0] && P.boat \u003c 0) {\n    P.boat = 0;\n    P.bdir = dir;\n  }\n  P.nextBoat -= dt;\n  if (P.nextBoat \u003c 0) {\n    if (P.boat \u003c 0) {\n      P.boat = 0;\n      P.bdir = dir;\n    }\n    P.nextBoat = 35 + Math.random() * 30;\n  }\n  if (P.boat >= 0) {\n    // A sloop runs before the wind, about five LEDs a second at Speed 2.\n    P.boat += step * (1 + 0.5 * Math.abs(P.wind));\n    P.bx = P.bdir > 0 ? -10 + 5 * P.boat : W + 10 - 5 * P.boat;\n    if (P.bx \u003c -12 || P.bx > W + 12) P.boat = -1;\n  }\n  P.nextGull -= dt;\n  if (P.nextGull \u003c 0) {\n    P.nextGull = 9 + Math.random() * 14;\n    const gd = Math.random() \u003c 0.5 ? -1 : 1;\n    const y = 6 + Math.random() * 34;\n    const n = Math.random() \u003c 0.5 ? 1 : 2;\n    for (let j = 0; j \u003c n; j++)\n      P.gulls.push({ x: gd > 0 ? -4 - 7 * j : W + 3 + 7 * j, y: y + 3 * j, d: gd, f: Math.random() * TAU, v: 7 + Math.random() * 3 });\n  }\n  for (const g of P.gulls) {\n    g.x += g.d * g.v * step;\n    g.y += Math.sin(g.f * 0.21) * 0.6 * step;\n    g.f += step * 7;\n  }\n  P.gulls = P.gulls.filter((g) => g.x > -12 && g.x \u003c W + 12);\n}\n\n// The sloop's silhouette: hull, mast, mainsail aft and jib forward.\nfunction boat(P, x, y, by) {\n  const d = (x - P.bx) * P.bdir;\n  const u = by - y;\n  if (u \u003c 0 || u > 13 || d \u003c -6 || d > 6) return 0;\n  if (u === 0) return d >= -3 && d \u003c= 3 ? 1 : 0;\n  if (u === 1) return d >= -4 && d \u003c= 5 ? 1 : 0;\n  if (d === 0) return 1;\n  if (u >= 2 && u \u003c= 12 && d \u003c 0 && -d \u003c= (12.5 - u) * 0.48) return 2;\n  if (u >= 2 && u \u003c= 11 && d > 0 && d \u003c= (11 - u) * 0.42) return 2;\n  return 0;\n}\n\n// The top row of the cliff edge in the near left corner.\nfunction cliff(x) {\n  return x >= 26 ? H : H - Math.round(11 * (1 - x / 26) ** 1.3 + 0.8 * Math.sin(x * 0.9));\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const sun = P.sun;\n  const chop = P.chop;\n  const T = P.t;\n  const buf = P.buf;\n  const sx = 29.5;\n  const sy = mix(7, HZ - 3.5, sun);\n  // How far under the horizon the sun's reflection falls.\n  const r0 = Math.max(2.5, HZ - sy);\n\n  // Per row: wavelets shrink toward the horizon, so their phase runs faster.\n  let a1 = 0;\n  let a2 = 0;\n  let a3 = 0;\n  let a4 = 0;\n  let a5 = 0;\n  for (let y = HZ; y \u003c H; y++) {\n    const p = (y - HZ + 1) / SEA;\n    const ly = 2 + 6 * p * (1 + chop);\n    a1 += TAU / ly;\n    a2 += TAU / (ly * 1.3);\n    a3 += TAU / (ly * 0.6);\n    a4 += TAU / Math.max(10, 2 * ly);\n    a5 += TAU / (3 + 11 * p * (1 + 0.6 * chop));\n    P.R1[y] = a1;\n    P.R2[y] = a2;\n    P.R3[y] = a3;\n    P.R4[y] = a4;\n    P.R5[y] = a5;\n    P.kx[y] = TAU / (4 + 10 * p * (1 + chop));\n  }\n  // Gusts: patches of rougher water, 4x4 LEDs a cell.\n  const gust = P.gust;\n  for (let j = 0; j \u003c 32; j++) for (let i = 0; i \u003c 16; i++) gust[j * 16 + i] = noise(P, (i * 4 - P.gx) / 7, (j * 4) / 9);\n\n  // Water colours: slate outside the path, silver in it; glints from white to pale gold.\n  const gt = [1, mix(0.94, 0.85, sun), mix(0.8, 0.56, sun)];\n  const wf = (1.8 - 0.9 * sun) * (0.85 + 0.4 * chop);\n  const L = 30 + 50 * (1 - sun);\n  const by = HZ + 30;\n  const boatOn = P.boat >= 0;\n  const PH = P.ph;\n  const OM = P.om;\n  const SZ = P.sz;\n  const PH2 = P.ph2;\n  const wx = P.wx;\n  // With the sun low the water off the path gets fewer glints, and dimmer ones.\n  const q0 = mix(0.12, 0.04, sun);\n  const g0 = mix(100, 60, sun);\n  for (let y = HZ; y \u003c H; y++) {\n    const r = y - HZ + 1;\n    const p = r / SEA;\n    const w = (2.5 + 0.55 * r) * wf;\n    const v = Math.exp(-(((r - r0) / L) ** 2));\n    const amp = 3 + 8 * Math.min(1, r / 30);\n    const kx = P.kx[y];\n    const R1 = P.R1[y];\n    const R2 = P.R2[y];\n    const R3 = P.R3[y];\n    const R4 = P.R4[y];\n    const R5 = P.R5[y];\n    const grow = (y >> 2) * 16;\n    // Toward the foot of the panel the wavelets are nearer: fewer glints, and brighter.\n    const near = 1 - 0.3 * clamp((r - 60) / 45, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const q3 = i * 3;\n      const cx = (x - sx - wx) * kx;\n      const p1 = R1 + 0.35 * cx - 1.3 * T;\n      const s = 0.5 * cos(p1) + 0.35 * cos(R2 - 0.9 * cx - T) + 0.25 * cos(R3 + 1.4 * cx - 2.1 * T);\n      const dx = (x - sx) / w;\n      const I = (0.25 + 0.75 * v) / (1 + dx * dx * dx * dx);\n      const sI = Math.sqrt(I);\n      const g = gust[grow + (x >> 2)];\n      // The water between the facets: slate outside the path, dark inside it.\n      const b = mix(44 + 10 * (1 - p) - 6 * g, 20, I) + amp * s * (1 - 0.4 * I);\n      const sv = Math.min(1, I * 1.3);\n      let rr = b * mix(0.46, 0.88, sv);\n      let gg = b * mix(0.66, 0.93, sv);\n      let bb = b;\n      // Facets sit on the band's checkerboard, so no two glints touch. Each\n      // one mirrors a little silver sky until it tilts to the sun and flashes.\n      const band = Math.floor((R4 + 0.35 * cx - 1.3 * T) * 0.3183);\n      if ((x + y + band) & 1) {\n        const m = 11 + 20 * (0.5 + 0.5 * cos(PH2[i] + 0.5 * p1));\n        rr += m * 0.86;\n        gg += m * 0.94;\n        bb += m;\n        // Rows of wavelets roll in; their faces toward the sun carry the glints.\n        const sw = 0.5 + 0.5 * cos(R5 + 0.2 * cx + 0.8 * cos(0.11 * x + 0.3 * R5) - 1.1 * T);\n        const face = clamp(0.3 + 0.95 * sw + 0.3 * s, 0, 1.25);\n        const q = clamp((q0 + 0.75 * sI) * face * (0.63 + 0.84 * g) * near, 0, 0.95);\n        const c = cos(Math.PI * q);\n        const f = cos(PH[i] + OM[i] * T + 0.9 * p1);\n        if (f > c) {\n          const lit = SZ[i] * Math.min(1, (f - c) / 0.08) * (g0 + (255 - g0) * sI);\n          rr += lit * gt[0];\n          gg += lit * gt[1];\n          bb += lit * gt[2];\n        }\n      }\n      if (boatOn && y \u003c= by + 3 && y > by - 14) {\n        const m = boat(P, x, y, by);\n        if (m) {\n          rr = m === 1 ? 8 : 22;\n          gg = m === 1 ? 10 : 24;\n          bb = m === 1 ? 14 : 32;\n        } else if (y > by && Math.abs(x - P.bx) \u003c 4) {\n          // The hull's shadow on the water under it.\n          rr *= 0.3;\n          gg *= 0.3;\n          bb *= 0.3;\n        }\n      }\n      buf[q3] = rr;\n      buf[q3 + 1] = gg;\n      buf[q3 + 2] = bb;\n    }\n  }\n\n  // Sky: a steady fall of light from the haze on the horizon to the top\n  // row, the glow round the sun, and thin cloud bars drifting with the wind.\n  const tTop = [mix(0.58, 0.66, sun), mix(0.72, 0.68, sun), 1];\n  const tLow = [mix(0.9, 1, sun), mix(0.94, 0.85, sun), mix(1, 0.64, sun)];\n  const sc = [255, mix(250, 222, sun), mix(236, 150, sun)];\n  const sr = mix(2.4, 3.8, sun);\n  const cn = P.cn || (P.cn = new Float32Array(W * 2));\n  for (let c = 0; c \u003c 2; c++) for (let x = 0; x \u003c W; x++) cn[c * W + x] = clamp(noise(P, (x - P.cx * (1 + 0.4 * c)) / 9 + c * 5, c * 3.3) * 2.4 - 1, 0, 1);\n  for (let y = 0; y \u003c HZ; y++) {\n    const vv = y / (HZ - 1);\n    const lv = 80 + 7.4 * y;\n    const tr = mix(tTop[0], tLow[0], vv);\n    const tg = mix(tTop[1], tLow[1], vv);\n    const tb = mix(tTop[2], tLow[2], vv);\n    for (let x = 0; x \u003c W; x++) {\n      const q3 = (y * W + x) * 3;\n      const dx = x - sx;\n      const dy = (y - sy) * 1.15;\n      const d = Math.sqrt(dx * dx + dy * dy);\n      const glow = 150 * Math.exp(-d / 4.5) + 60 * Math.exp(-d / 14);\n      let cl = 0;\n      for (let c = 0; c \u003c 2; c++) {\n        const e = (y - 4 - c * 6.5) / 1.2;\n        if (e > -2.5 && e \u003c 2.5) cl += Math.exp(-e * e) * cn[c * W + x];\n      }\n      cl = Math.min(1, cl);\n      // A cloud is grey against the haze, its edges silvered near the sun.\n      const lit = lv + glow * (1 - 0.5 * cl + 1.2 * cl * (1 - cl)) - 26 * cl;\n      if (d \u003c sr) {\n        buf[q3] = sc[0];\n        buf[q3 + 1] = sc[1];\n        buf[q3 + 2] = sc[2];\n      } else {\n        buf[q3] = lit * tr;\n        buf[q3 + 1] = lit * tg;\n        buf[q3 + 2] = lit * tb;\n      }\n    }\n  }\n  // A headland runs out from the left into the haze on the horizon.\n  for (let x = 0; x \u003c 15; x++) {\n    const top = HZ - Math.round(4.2 * (1 - x / 15) ** 0.8 + 0.6 * Math.sin(x * 1.3));\n    for (let y = Math.max(0, top); y \u003c HZ; y++) {\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 40;\n      buf[q3 + 1] = 46;\n      buf[q3 + 2] = 58;\n    }\n  }\n  // The cliff edge you stand on, and its grass bending in the wind.\n  const lean = 1.6 * P.wind + 0.4;\n  for (let x = 0; x \u003c 26; x++) {\n    for (let y = cliff(x); y \u003c H; y++) {\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 9;\n      buf[q3 + 1] = 12;\n      buf[q3 + 2] = 10;\n    }\n  }\n  for (const [gb, gh, gp] of P.grass) {\n    const x0 = Math.floor(gb);\n    const y0 = cliff(x0);\n    const sway = lean + 0.5 * Math.sin(T * 1.9 + gp) + 0.6 * gust[(y0 >> 2) * 16 + (x0 >> 2)];\n    for (let k = 1; k \u003c= gh; k++) {\n      const u = k / gh;\n      const x = Math.round(gb + sway * u * u * gh * 0.5);\n      const y = y0 - k;\n      if (x \u003c 0 || x >= W || y \u003c HZ) continue;\n      const q3 = (y * W + x) * 3;\n      // The tips catch the sun.\n      const tip = k === Math.ceil(gh) ? 30 : 0;\n      buf[q3] = 10 + tip * 1.4;\n      buf[q3 + 1] = 14 + tip * 1.2;\n      buf[q3 + 2] = 10 + tip * 0.7;\n    }\n  }\n  // Gulls, dark against the light.\n  for (const g of P.gulls) {\n    const wing = WING[BEAT[Math.floor(((g.f % TAU) / TAU) * 4)]];\n    for (let j = 0; j \u003c 7; j++) {\n      const x = Math.round(g.x) + j - 3;\n      const y = Math.round(g.y) + wing[j];\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 16;\n      buf[q3 + 1] = 18;\n      buf[q3 + 2] = 24;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q3 = (y * W + x) * 3;\n      display.setPixel(x, y, clamp(buf[q3], 0, 255), clamp(buf[q3 + 1], 0, 255), clamp(buf[q3 + 2], 0, 255));\n    }\n}\n","layer":{"id":"layer-sunglint","type":"code","name":"sunglint","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Sunglint\n// Family:  ocean\n// Idea:    From a cliff you look out to sea toward the sun, and below it the glitter path of thousands of tiny glints on choppy water widens toward you until it fills the panel, each glint flashing as its wavelet tilts, while a sailboat or a pair of gulls crosses now and then.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Sun=0..1, Speed=0.2..3, Chop=0..1, Wind=-1..1\n//\n// Knob 1: Sun. How high the sun stands. At 0 a high silver sun throws a broad glitter that fills the panel from a third of the way down; turned up, it sinks onto the horizon as a flattened pale gold disc, and the glitter narrows to a gold column with dark slate water either side.\n// Knob 2: Speed. How fast the water moves: at 2 a glint holds for about half a second, and the rows of wavelets that carry the glints roll in at two or three LEDs a second near your feet.\n// Knob 3: Chop. How rough the sea is. At 0 a light chop of fine wavelets whose rows run three LEDs apart under the horizon and fourteen at the foot of the panel; at 1 the wavelets grow half as big again, their rows twenty-one LEDs apart at the foot, and the path spreads wider.\n// Knob 4: Wind. Near calm at 0.06. Turned either way, a breeze from that side sets the wavelets sliding sideways and sends the gusts that thicken the glitter racing across; the cloud bars drift and the grass on the cliff edge bends with it.\n// Buttons: K1 tap sends a sloop across the glitter before the wind, its sails dark against the light. One also comes by itself every half minute or so, and gulls cross in ones and twos.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The horizon row, and the rows of sea under it.\nconst HZ = 19;\nconst SEA = H - HZ;\nconst TAU = Math.PI * 2;\nconst LUT = 1024;\nconst COS = new Float32Array(LUT);\nfor (let i = 0; i \u003c LUT; i++) COS[i] = Math.cos((i / LUT) * TAU);\nconst KL = LUT / TAU;\nconst cos = (a) => COS[(a * KL) & (LUT - 1)];\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\n// Gull wings, raised, gliding and down: seven LEDs across, the body in the\n// middle, each entry how far that column sits above or below the body.\nconst WING = [\n  [-2, -2, -1, 0, -1, -2, -2],\n  [0, -1, -1, 0, -1, -1, 0],\n  [1, 1, 0, 0, 0, 1, 1],\n];\nconst BEAT = [0, 1, 2, 1];\n\nexport function setup(params) {\n  const P = params;\n  P.ph = new Float32Array(N);\n  P.om = new Float32Array(N);\n  P.sz = new Float32Array(N);\n  P.ph2 = new Float32Array(N);\n  for (let i = 0; i \u003c N; i++) {\n    P.ph[i] = Math.random() * TAU;\n    P.om[i] = 3.5 + Math.random() * 3.5;\n    P.ph2[i] = Math.random() * TAU;\n    const u = Math.random();\n    P.sz[i] = 1 - 0.5 * u * u * u * u;\n  }\n  P.noise = new Float32Array(256);\n  for (let i = 0; i \u003c 256; i++) P.noise[i] = Math.random();\n  P.buf = new Float32Array(N * 3);\n  P.gust = new Float32Array(16 * 32);\n  for (const k of [\"R1\", \"R2\", \"R3\", \"R4\", \"R5\", \"kx\"]) P[k] = new Float32Array(H);\n  P.t = 0;\n  P.gx = 0;\n  P.cx = 0;\n  P.wx = 0;\n  P.boat = -1;\n  P.bx = 0;\n  P.bdir = 1;\n  P.nextBoat = 14 + Math.random() * 20;\n  // Grass on the cliff edge in the near left corner: base, height, sway phase.\n  P.grass = [];\n  for (let j = 0; j \u003c 18; j++) P.grass.push([Math.random() * 25, 4 + Math.random() * 6, Math.random() * TAU]);\n  P.gulls = [];\n  P.nextGull = 2 + Math.random() * 6;\n  P.started = false;\n}\n\nfunction noise(P, fx, fy) {\n  const ix = Math.floor(fx);\n  const iy = Math.floor(fy);\n  let tx = fx - ix;\n  let ty = fy - iy;\n  tx = tx * tx * (3 - 2 * tx);\n  ty = ty * ty * (3 - 2 * ty);\n  const n = P.noise;\n  const r0 = (iy & 15) * 16;\n  const r1 = ((iy + 1) & 15) * 16;\n  const a = n[r0 + (ix & 15)];\n  const b = n[r0 + ((ix + 1) & 15)];\n  return mix(mix(a, b, tx), mix(n[r1 + (ix & 15)], n[r1 + ((ix + 1) & 15)], tx), ty);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.sun = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0, 3) / 2;\n  P.chop = clamp(k[2], 0, 1);\n  P.wind = clamp(k[3], -1, 1);\n  P.started = true;\n  const step = dt * P.speed;\n  P.t += step;\n  const dir = P.wind \u003c 0 ? -1 : 1;\n  // Gusts run over the water and the cloud bars drift, both with the wind.\n  P.gx += (dir * 3 + 12 * P.wind) * step;\n  P.cx += (dir * 0.6 + 2.5 * P.wind) * step;\n  P.wx += 4 * P.wind * step;\n  if (input.btnPressed && input.btnPressed[0] && P.boat \u003c 0) {\n    P.boat = 0;\n    P.bdir = dir;\n  }\n  P.nextBoat -= dt;\n  if (P.nextBoat \u003c 0) {\n    if (P.boat \u003c 0) {\n      P.boat = 0;\n      P.bdir = dir;\n    }\n    P.nextBoat = 35 + Math.random() * 30;\n  }\n  if (P.boat >= 0) {\n    // A sloop runs before the wind, about five LEDs a second at Speed 2.\n    P.boat += step * (1 + 0.5 * Math.abs(P.wind));\n    P.bx = P.bdir > 0 ? -10 + 5 * P.boat : W + 10 - 5 * P.boat;\n    if (P.bx \u003c -12 || P.bx > W + 12) P.boat = -1;\n  }\n  P.nextGull -= dt;\n  if (P.nextGull \u003c 0) {\n    P.nextGull = 9 + Math.random() * 14;\n    const gd = Math.random() \u003c 0.5 ? -1 : 1;\n    const y = 6 + Math.random() * 34;\n    const n = Math.random() \u003c 0.5 ? 1 : 2;\n    for (let j = 0; j \u003c n; j++)\n      P.gulls.push({ x: gd > 0 ? -4 - 7 * j : W + 3 + 7 * j, y: y + 3 * j, d: gd, f: Math.random() * TAU, v: 7 + Math.random() * 3 });\n  }\n  for (const g of P.gulls) {\n    g.x += g.d * g.v * step;\n    g.y += Math.sin(g.f * 0.21) * 0.6 * step;\n    g.f += step * 7;\n  }\n  P.gulls = P.gulls.filter((g) => g.x > -12 && g.x \u003c W + 12);\n}\n\n// The sloop's silhouette: hull, mast, mainsail aft and jib forward.\nfunction boat(P, x, y, by) {\n  const d = (x - P.bx) * P.bdir;\n  const u = by - y;\n  if (u \u003c 0 || u > 13 || d \u003c -6 || d > 6) return 0;\n  if (u === 0) return d >= -3 && d \u003c= 3 ? 1 : 0;\n  if (u === 1) return d >= -4 && d \u003c= 5 ? 1 : 0;\n  if (d === 0) return 1;\n  if (u >= 2 && u \u003c= 12 && d \u003c 0 && -d \u003c= (12.5 - u) * 0.48) return 2;\n  if (u >= 2 && u \u003c= 11 && d > 0 && d \u003c= (11 - u) * 0.42) return 2;\n  return 0;\n}\n\n// The top row of the cliff edge in the near left corner.\nfunction cliff(x) {\n  return x >= 26 ? H : H - Math.round(11 * (1 - x / 26) ** 1.3 + 0.8 * Math.sin(x * 0.9));\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  const sun = P.sun;\n  const chop = P.chop;\n  const T = P.t;\n  const buf = P.buf;\n  const sx = 29.5;\n  const sy = mix(7, HZ - 3.5, sun);\n  // How far under the horizon the sun's reflection falls.\n  const r0 = Math.max(2.5, HZ - sy);\n\n  // Per row: wavelets shrink toward the horizon, so their phase runs faster.\n  let a1 = 0;\n  let a2 = 0;\n  let a3 = 0;\n  let a4 = 0;\n  let a5 = 0;\n  for (let y = HZ; y \u003c H; y++) {\n    const p = (y - HZ + 1) / SEA;\n    const ly = 2 + 6 * p * (1 + chop);\n    a1 += TAU / ly;\n    a2 += TAU / (ly * 1.3);\n    a3 += TAU / (ly * 0.6);\n    a4 += TAU / Math.max(10, 2 * ly);\n    a5 += TAU / (3 + 11 * p * (1 + 0.6 * chop));\n    P.R1[y] = a1;\n    P.R2[y] = a2;\n    P.R3[y] = a3;\n    P.R4[y] = a4;\n    P.R5[y] = a5;\n    P.kx[y] = TAU / (4 + 10 * p * (1 + chop));\n  }\n  // Gusts: patches of rougher water, 4x4 LEDs a cell.\n  const gust = P.gust;\n  for (let j = 0; j \u003c 32; j++) for (let i = 0; i \u003c 16; i++) gust[j * 16 + i] = noise(P, (i * 4 - P.gx) / 7, (j * 4) / 9);\n\n  // Water colours: slate outside the path, silver in it; glints from white to pale gold.\n  const gt = [1, mix(0.94, 0.85, sun), mix(0.8, 0.56, sun)];\n  const wf = (1.8 - 0.9 * sun) * (0.85 + 0.4 * chop);\n  const L = 30 + 50 * (1 - sun);\n  const by = HZ + 30;\n  const boatOn = P.boat >= 0;\n  const PH = P.ph;\n  const OM = P.om;\n  const SZ = P.sz;\n  const PH2 = P.ph2;\n  const wx = P.wx;\n  // With the sun low the water off the path gets fewer glints, and dimmer ones.\n  const q0 = mix(0.12, 0.04, sun);\n  const g0 = mix(100, 60, sun);\n  for (let y = HZ; y \u003c H; y++) {\n    const r = y - HZ + 1;\n    const p = r / SEA;\n    const w = (2.5 + 0.55 * r) * wf;\n    const v = Math.exp(-(((r - r0) / L) ** 2));\n    const amp = 3 + 8 * Math.min(1, r / 30);\n    const kx = P.kx[y];\n    const R1 = P.R1[y];\n    const R2 = P.R2[y];\n    const R3 = P.R3[y];\n    const R4 = P.R4[y];\n    const R5 = P.R5[y];\n    const grow = (y >> 2) * 16;\n    // Toward the foot of the panel the wavelets are nearer: fewer glints, and brighter.\n    const near = 1 - 0.3 * clamp((r - 60) / 45, 0, 1);\n    for (let x = 0; x \u003c W; x++) {\n      const i = y * W + x;\n      const q3 = i * 3;\n      const cx = (x - sx - wx) * kx;\n      const p1 = R1 + 0.35 * cx - 1.3 * T;\n      const s = 0.5 * cos(p1) + 0.35 * cos(R2 - 0.9 * cx - T) + 0.25 * cos(R3 + 1.4 * cx - 2.1 * T);\n      const dx = (x - sx) / w;\n      const I = (0.25 + 0.75 * v) / (1 + dx * dx * dx * dx);\n      const sI = Math.sqrt(I);\n      const g = gust[grow + (x >> 2)];\n      // The water between the facets: slate outside the path, dark inside it.\n      const b = mix(44 + 10 * (1 - p) - 6 * g, 20, I) + amp * s * (1 - 0.4 * I);\n      const sv = Math.min(1, I * 1.3);\n      let rr = b * mix(0.46, 0.88, sv);\n      let gg = b * mix(0.66, 0.93, sv);\n      let bb = b;\n      // Facets sit on the band's checkerboard, so no two glints touch. Each\n      // one mirrors a little silver sky until it tilts to the sun and flashes.\n      const band = Math.floor((R4 + 0.35 * cx - 1.3 * T) * 0.3183);\n      if ((x + y + band) & 1) {\n        const m = 11 + 20 * (0.5 + 0.5 * cos(PH2[i] + 0.5 * p1));\n        rr += m * 0.86;\n        gg += m * 0.94;\n        bb += m;\n        // Rows of wavelets roll in; their faces toward the sun carry the glints.\n        const sw = 0.5 + 0.5 * cos(R5 + 0.2 * cx + 0.8 * cos(0.11 * x + 0.3 * R5) - 1.1 * T);\n        const face = clamp(0.3 + 0.95 * sw + 0.3 * s, 0, 1.25);\n        const q = clamp((q0 + 0.75 * sI) * face * (0.63 + 0.84 * g) * near, 0, 0.95);\n        const c = cos(Math.PI * q);\n        const f = cos(PH[i] + OM[i] * T + 0.9 * p1);\n        if (f > c) {\n          const lit = SZ[i] * Math.min(1, (f - c) / 0.08) * (g0 + (255 - g0) * sI);\n          rr += lit * gt[0];\n          gg += lit * gt[1];\n          bb += lit * gt[2];\n        }\n      }\n      if (boatOn && y \u003c= by + 3 && y > by - 14) {\n        const m = boat(P, x, y, by);\n        if (m) {\n          rr = m === 1 ? 8 : 22;\n          gg = m === 1 ? 10 : 24;\n          bb = m === 1 ? 14 : 32;\n        } else if (y > by && Math.abs(x - P.bx) \u003c 4) {\n          // The hull's shadow on the water under it.\n          rr *= 0.3;\n          gg *= 0.3;\n          bb *= 0.3;\n        }\n      }\n      buf[q3] = rr;\n      buf[q3 + 1] = gg;\n      buf[q3 + 2] = bb;\n    }\n  }\n\n  // Sky: a steady fall of light from the haze on the horizon to the top\n  // row, the glow round the sun, and thin cloud bars drifting with the wind.\n  const tTop = [mix(0.58, 0.66, sun), mix(0.72, 0.68, sun), 1];\n  const tLow = [mix(0.9, 1, sun), mix(0.94, 0.85, sun), mix(1, 0.64, sun)];\n  const sc = [255, mix(250, 222, sun), mix(236, 150, sun)];\n  const sr = mix(2.4, 3.8, sun);\n  const cn = P.cn || (P.cn = new Float32Array(W * 2));\n  for (let c = 0; c \u003c 2; c++) for (let x = 0; x \u003c W; x++) cn[c * W + x] = clamp(noise(P, (x - P.cx * (1 + 0.4 * c)) / 9 + c * 5, c * 3.3) * 2.4 - 1, 0, 1);\n  for (let y = 0; y \u003c HZ; y++) {\n    const vv = y / (HZ - 1);\n    const lv = 80 + 7.4 * y;\n    const tr = mix(tTop[0], tLow[0], vv);\n    const tg = mix(tTop[1], tLow[1], vv);\n    const tb = mix(tTop[2], tLow[2], vv);\n    for (let x = 0; x \u003c W; x++) {\n      const q3 = (y * W + x) * 3;\n      const dx = x - sx;\n      const dy = (y - sy) * 1.15;\n      const d = Math.sqrt(dx * dx + dy * dy);\n      const glow = 150 * Math.exp(-d / 4.5) + 60 * Math.exp(-d / 14);\n      let cl = 0;\n      for (let c = 0; c \u003c 2; c++) {\n        const e = (y - 4 - c * 6.5) / 1.2;\n        if (e > -2.5 && e \u003c 2.5) cl += Math.exp(-e * e) * cn[c * W + x];\n      }\n      cl = Math.min(1, cl);\n      // A cloud is grey against the haze, its edges silvered near the sun.\n      const lit = lv + glow * (1 - 0.5 * cl + 1.2 * cl * (1 - cl)) - 26 * cl;\n      if (d \u003c sr) {\n        buf[q3] = sc[0];\n        buf[q3 + 1] = sc[1];\n        buf[q3 + 2] = sc[2];\n      } else {\n        buf[q3] = lit * tr;\n        buf[q3 + 1] = lit * tg;\n        buf[q3 + 2] = lit * tb;\n      }\n    }\n  }\n  // A headland runs out from the left into the haze on the horizon.\n  for (let x = 0; x \u003c 15; x++) {\n    const top = HZ - Math.round(4.2 * (1 - x / 15) ** 0.8 + 0.6 * Math.sin(x * 1.3));\n    for (let y = Math.max(0, top); y \u003c HZ; y++) {\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 40;\n      buf[q3 + 1] = 46;\n      buf[q3 + 2] = 58;\n    }\n  }\n  // The cliff edge you stand on, and its grass bending in the wind.\n  const lean = 1.6 * P.wind + 0.4;\n  for (let x = 0; x \u003c 26; x++) {\n    for (let y = cliff(x); y \u003c H; y++) {\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 9;\n      buf[q3 + 1] = 12;\n      buf[q3 + 2] = 10;\n    }\n  }\n  for (const [gb, gh, gp] of P.grass) {\n    const x0 = Math.floor(gb);\n    const y0 = cliff(x0);\n    const sway = lean + 0.5 * Math.sin(T * 1.9 + gp) + 0.6 * gust[(y0 >> 2) * 16 + (x0 >> 2)];\n    for (let k = 1; k \u003c= gh; k++) {\n      const u = k / gh;\n      const x = Math.round(gb + sway * u * u * gh * 0.5);\n      const y = y0 - k;\n      if (x \u003c 0 || x >= W || y \u003c HZ) continue;\n      const q3 = (y * W + x) * 3;\n      // The tips catch the sun.\n      const tip = k === Math.ceil(gh) ? 30 : 0;\n      buf[q3] = 10 + tip * 1.4;\n      buf[q3 + 1] = 14 + tip * 1.2;\n      buf[q3 + 2] = 10 + tip * 0.7;\n    }\n  }\n  // Gulls, dark against the light.\n  for (const g of P.gulls) {\n    const wing = WING[BEAT[Math.floor(((g.f % TAU) / TAU) * 4)]];\n    for (let j = 0; j \u003c 7; j++) {\n      const x = Math.round(g.x) + j - 3;\n      const y = Math.round(g.y) + wing[j];\n      if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n      const q3 = (y * W + x) * 3;\n      buf[q3] = 16;\n      buf[q3 + 1] = 18;\n      buf[q3 + 2] = 24;\n    }\n  }\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q3 = (y * W + x) * 3;\n      display.setPixel(x, y, clamp(buf[q3], 0, 255), clamp(buf[q3 + 1], 0, 255), clamp(buf[q3 + 2], 0, 255));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Sun=0..1, Speed=0.2..3, Chop=0..1, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Sun","min":0,"max":1,"about":"How high the sun stands. At 0 a high silver sun throws a broad glitter that fills the panel from a third of the way down; turned up, it sinks onto the horizon as a flattened pale gold disc, and the glitter narrows to a gold column with dark slate water either side."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the water moves: at 2 a glint holds for about half a second, and the rows of wavelets that carry the glints roll in at two or three LEDs a second near your feet."},{"name":"Chop","min":0,"max":1,"about":"How rough the sea is. At 0 a light chop of fine wavelets whose rows run three LEDs apart under the horizon and fourteen at the foot of the panel; at 1 the wavelets grow half as big again, their rows twenty-one LEDs apart at the foot, and the path spreads wider."},{"name":"Wind","min":-1,"max":1,"about":"Near calm at 0.06. Turned either way, a breeze from that side sets the wavelets sliding sideways and sends the gusts that thicken the glitter racing across; the cloud bars drift and the grass on the cliff edge bends with it."}],"start":[0,2,0,0.06],"measures":{"motion":0.5376,"detail":0.3357,"edges":0.4835,"complexity":2.2983,"coverage":0.8569,"colour":0.0799,"drift":0.0378},"knobResponse":[0.1189,0.329,0.2477,0.3023]},{"slug":"test-card","title":"Test Card","family":"glitch","round":1,"note":"텔레비전 컬러 바를, 수직 동기를 잃어 가는 수상기가 보여 주는 대로 그려요.","idea":"A television's colour bars, as a set that is losing its hold would show them.","buttons":"K1 tap tears the picture now.","code":"// ===== Patternflow pattern =====\n// Title:   Test Card\n// Family:  glitch\n// Idea:    A television's colour bars, as a set that is losing its hold would show them.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Bursts=0.2..6, Damage=0.15..1, Roll=0..1\n//\n// Knob 1: Hue. Turns the whole set of bars round the colour wheel.\n// Knob 2: Bursts. How often the picture tears.\n// Knob 3: Damage. From a clean card with the odd twitch to bars torn apart and smeared.\n// Knob 4: Roll. The vertical hold: the picture starts to slip and roll.\n// Buttons: K1 tap tears the picture now.\n\nconst BARS = [\n  [235, 235, 235],\n  [235, 235, 16],\n  [16, 235, 235],\n  [16, 235, 16],\n  [235, 16, 235],\n  [235, 16, 16],\n  [16, 16, 235],\n];\n// The bottom row of the broadcast card: -I blue, white, +Q purple, then black.\nconst FOOT = [\n  [16, 60, 120],\n  [235, 235, 235],\n  [72, 16, 130],\n];\n\n// The card stands as tall as the panel: bars, the reversed strip under them,\n// a grey ramp, and the broadcast card's bottom row, as shares of the height.\nconst BARS_END = 0.6;\nconst STRIP_END = 0.68;\nconst RAMP_END = 0.84;\n\nfunction hash(a, b) {\n  const s = Math.sin(a * 12.9898 + b * 78.233) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nfunction turn(c, hue, out, o) {\n  // Rotate an RGB colour round the grey axis.\n  const a = hue * Math.PI * 2;\n  const cos = Math.cos(a);\n  const sin = Math.sin(a);\n  const k = (1 - cos) / 3;\n  const s3 = Math.sqrt(1 / 3) * sin;\n  out[o] = c[0] * (cos + k) + c[1] * (k - s3) + c[2] * (k + s3);\n  out[o + 1] = c[0] * (k + s3) + c[1] * (cos + k) + c[2] * (k - s3);\n  out[o + 2] = c[0] * (k - s3) + c[1] * (k + s3) + c[2] * (cos + k);\n}\n\n// One channel of the clean card at column xx of a row in the given part.\nfunction channel(p, part, xx, w, c) {\n  const pal = p.palette;\n  if (part === 0) return pal[Math.floor((xx / w) * 7) * 3 + c];\n  if (part === 1) {\n    const i = 6 - Math.floor((xx / w) * 7);\n    return i % 2 === 0 ? pal[i * 3 + c] : 10;\n  }\n  if (part === 2) return Math.floor((xx / w) * 6) * 40 + 20;\n  const f = (xx / w) * 7;\n  if (f \u003c 3.75) return p.foot[Math.floor(f / 1.25) * 3 + c];\n  return 10;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.tear = 0;\n  params.slot = -1;\n  params.seed = 0;\n  params.roll = 0;\n  params.hue = -1;\n  params.palette = new Float32Array(7 * 3);\n  params.foot = new Float32Array(3 * 3);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.15, 0.06];\n  params.damage = k[2];\n  params.rollAmount = k[3];\n  params.t += dt;\n  const slot = Math.floor(params.t * k[1]);\n  if (slot !== params.slot) {\n    params.slot = slot;\n    if (hash(slot, 3.1) \u003c 0.7) {\n      params.tear = 0.25 + hash(slot, 7.7) * 0.5;\n      params.seed = slot;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.tear = 0.9;\n    params.seed = params.slot + 1000 + Math.floor(params.t * 10);\n  }\n  params.tear = Math.max(0, params.tear - dt * 1.1);\n  // The roll eases up to speed and back, like a hold that drifts. It turns\n  // the picture over about as often a second as it did lying down.\n  params.roll += dt * params.rollAmount * params.rollAmount * 180;\n  if (k[0] !== params.hue) {\n    params.hue = k[0];\n    for (let i = 0; i \u003c 7; i++) turn(BARS[i], k[0], params.palette, i * 3);\n    for (let i = 0; i \u003c 3; i++) turn(FOOT[i], k[0], params.foot, i * 3);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const w = display.width;\n  const h = display.height;\n  // Damage sets how hard a burst tears, and past the middle the card never\n  // quite settles.\n  const tear = Math.max(p.tear * (0.35 + 0.65 * p.damage), Math.max(0, p.damage - 0.45) * 0.5);\n  const seed = p.seed;\n  // Torn bands keep the height in LEDs they had on the panel lying down.\n  const bands = Math.round(((6 + Math.floor(p.damage * 10)) * h) / 64);\n  const split = Math.round(tear * 3);\n  const blank = Math.round(h * 0.094);\n  const hold = p.rollAmount > 0.02 ? p.roll : 0;\n  const frame = Math.floor(p.t * 24);\n  const fizz = Math.floor(p.t * 30);\n  for (let y = 0; y \u003c h; y++) {\n    // Torn bands slide sideways; a quiet card still twitches a line now and then.\n    const band = Math.floor((y / h) * bands);\n    const kick = hash(seed, band) \u003c tear * 1.4 ? (hash(seed + 1, band) - 0.5) * w * 0.55 * tear : 0;\n    const twitch = hash(frame, y) \u003c 0.012 + p.damage * 0.02 ? (hash(y, p.t) - 0.5) * 3 : 0;\n    const shift = Math.round(kick + twitch);\n    const sy = Math.floor(y + hold) % (h + blank);\n    const part = sy >= h ? -1 : sy \u003c h * BARS_END ? 0 : sy \u003c h * STRIP_END ? 1 : sy \u003c h * RAMP_END ? 2 : 3;\n    // Scanlines dim every other row a touch, more when the picture tears.\n    const dim = y & 1 ? 1 - 0.18 - tear * 0.3 : 1;\n    for (let x = 0; x \u003c w; x++) {\n      if (part \u003c 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const base = x - shift;\n      const xr = (((base - split) % w) + w) % w;\n      const xg = ((base % w) + w) % w;\n      const xb = (((base + split) % w) + w) % w;\n      const r = channel(p, part, xr, w, 0);\n      const g = channel(p, part, xg, w, 1);\n      const b = channel(p, part, xb, w, 2);\n      const snow = hash(x + y * 131, fizz) \u003c tear * 0.25 ? 120 : 0;\n      display.setPixel(x, y, r * dim + snow, g * dim + snow, b * dim + snow);\n    }\n  }\n}\n","layer":{"id":"layer-test-card","type":"code","name":"test-card","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Test Card\n// Family:  glitch\n// Idea:    A television's colour bars, as a set that is losing its hold would show them.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Bursts=0.2..6, Damage=0.15..1, Roll=0..1\n//\n// Knob 1: Hue. Turns the whole set of bars round the colour wheel.\n// Knob 2: Bursts. How often the picture tears.\n// Knob 3: Damage. From a clean card with the odd twitch to bars torn apart and smeared.\n// Knob 4: Roll. The vertical hold: the picture starts to slip and roll.\n// Buttons: K1 tap tears the picture now.\n\nconst BARS = [\n  [235, 235, 235],\n  [235, 235, 16],\n  [16, 235, 235],\n  [16, 235, 16],\n  [235, 16, 235],\n  [235, 16, 16],\n  [16, 16, 235],\n];\n// The bottom row of the broadcast card: -I blue, white, +Q purple, then black.\nconst FOOT = [\n  [16, 60, 120],\n  [235, 235, 235],\n  [72, 16, 130],\n];\n\n// The card stands as tall as the panel: bars, the reversed strip under them,\n// a grey ramp, and the broadcast card's bottom row, as shares of the height.\nconst BARS_END = 0.6;\nconst STRIP_END = 0.68;\nconst RAMP_END = 0.84;\n\nfunction hash(a, b) {\n  const s = Math.sin(a * 12.9898 + b * 78.233) * 43758.5453;\n  return s - Math.floor(s);\n}\n\nfunction turn(c, hue, out, o) {\n  // Rotate an RGB colour round the grey axis.\n  const a = hue * Math.PI * 2;\n  const cos = Math.cos(a);\n  const sin = Math.sin(a);\n  const k = (1 - cos) / 3;\n  const s3 = Math.sqrt(1 / 3) * sin;\n  out[o] = c[0] * (cos + k) + c[1] * (k - s3) + c[2] * (k + s3);\n  out[o + 1] = c[0] * (k + s3) + c[1] * (cos + k) + c[2] * (k - s3);\n  out[o + 2] = c[0] * (k - s3) + c[1] * (k + s3) + c[2] * (cos + k);\n}\n\n// One channel of the clean card at column xx of a row in the given part.\nfunction channel(p, part, xx, w, c) {\n  const pal = p.palette;\n  if (part === 0) return pal[Math.floor((xx / w) * 7) * 3 + c];\n  if (part === 1) {\n    const i = 6 - Math.floor((xx / w) * 7);\n    return i % 2 === 0 ? pal[i * 3 + c] : 10;\n  }\n  if (part === 2) return Math.floor((xx / w) * 6) * 40 + 20;\n  const f = (xx / w) * 7;\n  if (f \u003c 3.75) return p.foot[Math.floor(f / 1.25) * 3 + c];\n  return 10;\n}\n\nexport function setup(params) {\n  params.t = 0;\n  params.tear = 0;\n  params.slot = -1;\n  params.seed = 0;\n  params.roll = 0;\n  params.hue = -1;\n  params.palette = new Float32Array(7 * 3);\n  params.foot = new Float32Array(3 * 3);\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0.15, 0.06];\n  params.damage = k[2];\n  params.rollAmount = k[3];\n  params.t += dt;\n  const slot = Math.floor(params.t * k[1]);\n  if (slot !== params.slot) {\n    params.slot = slot;\n    if (hash(slot, 3.1) \u003c 0.7) {\n      params.tear = 0.25 + hash(slot, 7.7) * 0.5;\n      params.seed = slot;\n    }\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    params.tear = 0.9;\n    params.seed = params.slot + 1000 + Math.floor(params.t * 10);\n  }\n  params.tear = Math.max(0, params.tear - dt * 1.1);\n  // The roll eases up to speed and back, like a hold that drifts. It turns\n  // the picture over about as often a second as it did lying down.\n  params.roll += dt * params.rollAmount * params.rollAmount * 180;\n  if (k[0] !== params.hue) {\n    params.hue = k[0];\n    for (let i = 0; i \u003c 7; i++) turn(BARS[i], k[0], params.palette, i * 3);\n    for (let i = 0; i \u003c 3; i++) turn(FOOT[i], k[0], params.foot, i * 3);\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const w = display.width;\n  const h = display.height;\n  // Damage sets how hard a burst tears, and past the middle the card never\n  // quite settles.\n  const tear = Math.max(p.tear * (0.35 + 0.65 * p.damage), Math.max(0, p.damage - 0.45) * 0.5);\n  const seed = p.seed;\n  // Torn bands keep the height in LEDs they had on the panel lying down.\n  const bands = Math.round(((6 + Math.floor(p.damage * 10)) * h) / 64);\n  const split = Math.round(tear * 3);\n  const blank = Math.round(h * 0.094);\n  const hold = p.rollAmount > 0.02 ? p.roll : 0;\n  const frame = Math.floor(p.t * 24);\n  const fizz = Math.floor(p.t * 30);\n  for (let y = 0; y \u003c h; y++) {\n    // Torn bands slide sideways; a quiet card still twitches a line now and then.\n    const band = Math.floor((y / h) * bands);\n    const kick = hash(seed, band) \u003c tear * 1.4 ? (hash(seed + 1, band) - 0.5) * w * 0.55 * tear : 0;\n    const twitch = hash(frame, y) \u003c 0.012 + p.damage * 0.02 ? (hash(y, p.t) - 0.5) * 3 : 0;\n    const shift = Math.round(kick + twitch);\n    const sy = Math.floor(y + hold) % (h + blank);\n    const part = sy >= h ? -1 : sy \u003c h * BARS_END ? 0 : sy \u003c h * STRIP_END ? 1 : sy \u003c h * RAMP_END ? 2 : 3;\n    // Scanlines dim every other row a touch, more when the picture tears.\n    const dim = y & 1 ? 1 - 0.18 - tear * 0.3 : 1;\n    for (let x = 0; x \u003c w; x++) {\n      if (part \u003c 0) {\n        display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      const base = x - shift;\n      const xr = (((base - split) % w) + w) % w;\n      const xg = ((base % w) + w) % w;\n      const xb = (((base + split) % w) + w) % w;\n      const r = channel(p, part, xr, w, 0);\n      const g = channel(p, part, xg, w, 1);\n      const b = channel(p, part, xb, w, 2);\n      const snow = hash(x + y * 131, fizz) \u003c tear * 0.25 ? 120 : 0;\n      display.setPixel(x, y, r * dim + snow, g * dim + snow, b * dim + snow);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Bursts=0.2..6, Damage=0.15..1, Roll=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the whole set of bars round the colour wheel."},{"name":"Bursts","min":0.2,"max":6,"about":"How often the picture tears."},{"name":"Damage","min":0.15,"max":1,"about":"From a clean card with the odd twitch to bars torn apart and smeared."},{"name":"Roll","min":0,"max":1,"about":"The vertical hold: the picture starts to slip and roll."}],"start":[0,2,0.15,0.06],"measures":{"motion":0.2635,"detail":0.0837,"edges":0.7844,"complexity":0.0808,"coverage":0.8476,"colour":0.6265,"drift":0.0606},"knobResponse":[0.3578,0.0535,0.0933,0.3676]},{"slug":"tetromino-well","title":"Tetromino Well","family":"algo","round":10,"note":"세운 패널이 너비 10칸, 높이 21칸의 테트리스 우물이에요. 지치지 않는 플레이어가 꼭대기에 기다리는 다음 조각을 보며 패널의 3분의 2 높이까지 쌓고, 오른쪽 한 줄을 비워 두었다가 긴 막대가 오면 네 줄을 한꺼번에 지워요. K1 을 누르면 긴 막대가 다음 조각으로 와요.","idea":"The standing panel is a falling-block well ten cells wide and twenty-one tall, and a player that never tires stacks the pieces two thirds of the way up before it burns them down, four lines at a time when the long bar comes.","buttons":"K1 tap sends the long bar next, and the player drops it into the well for four lines if four are ready.","code":"// ===== Patternflow pattern =====\n// Title:   Tetromino Well\n// Family:  algo\n// Idea:    The standing panel is a falling-block well ten cells wide and twenty-one tall, and a player that never tires stacks the pieces two thirds of the way up before it burns them down, four lines at a time when the long bar comes.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the falling-block puzzle of Tetris (Alexey Pajitnov, 1984); the player weighs every landing with holes, bumps and wells, after Pierre Dellacherie's one-piece controller\n// Round:   10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Headroom=6..18, Garbage=0..1\n//\n// Knob 1: Hue. Turns the seven piece colours together, starting from the usual cyan bar, yellow square, purple T, green S, red Z, blue J and orange L.\n// Knob 2: Speed. How fast pieces fall and rows clear: where it starts a piece drops ten rows a second, at the bottom of the range it drifts down one.\n// Knob 3: Headroom. The rows the player keeps free above its stack: at 6 it builds two thirds of the way up the panel before it starts taking lines, at 18 it keeps the stack on the floor.\n// Knob 4: Garbage. The chance that a grey row with one hole pushes up from the floor as each piece arrives; turned up, the stack climbs until it tops out and the floor drops it.\n// Buttons: K1 tap sends the long bar next, and the player drops it into the well for four lines if four are ready.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CELL = 6;\nconst COLS = 10;\nconst ROWS = 21;\n// Two rows above the panel where a piece comes in from.\nconst HID = 2;\nconst BR = ROWS + HID;\n// 10 cells of 6 LEDs leave two LEDs of wall on each side; 21 rows leave two LEDs of floor.\nconst X0 = 2;\n// The player keeps the right-hand column open for the long bar.\nconst WELL = COLS - 1;\nconst GARBAGE = 8;\nconst BUILD = 0;\nconst BURN = 1;\nconst PANIC = 2;\n\n// Spawn shapes, (x, y) in a 4×4 box for the bar and a 3×3 box for the rest:\n// I, O, T, S, Z, J, L.\nconst SHAPES = [\n  [[0, 1], [1, 1], [2, 1], [3, 1]],\n  [[1, 0], [2, 0], [1, 1], [2, 1]],\n  [[1, 0], [0, 1], [1, 1], [2, 1]],\n  [[1, 0], [2, 0], [0, 1], [1, 1]],\n  [[0, 0], [1, 0], [1, 1], [2, 1]],\n  [[0, 0], [0, 1], [1, 1], [2, 1]],\n  [[2, 0], [0, 1], [1, 1], [2, 1]],\n];\n// The guideline colours: cyan, yellow, purple, green, red, blue, orange.\nconst HUES = [0.5, 0.15, 0.79, 0.33, 0.995, 0.63, 0.075];\n\n// ROT[type][r] is the shape turned r quarters clockwise.\nconst ROT = SHAPES.map((cells, type) => {\n  const out = [cells];\n  for (let r = 1; r \u003c 4; r++) {\n    const prev = out[r - 1];\n    if (type === 1) out.push(prev);\n    else if (type === 0) out.push(prev.map(([x, y]) => [3 - y, x]));\n    else out.push(prev.map(([x, y]) => [2 - y, x]));\n  }\n  return out;\n});\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction fits(board, cells, x, y) {\n  for (let i = 0; i \u003c 4; i++) {\n    const c = x + cells[i][0];\n    const r = y + cells[i][1];\n    if (c \u003c 0 || c >= COLS || r >= BR) return false;\n    if (r >= 0 && board[r * COLS + c]) return false;\n  }\n  return true;\n}\n\nfunction dropRow(board, cells, x, y) {\n  while (fits(board, cells, x, y + 1)) y++;\n  return y;\n}\n\nfunction fullRows(board) {\n  const rows = [];\n  for (let r = 0; r \u003c BR; r++) {\n    let n = 0;\n    for (let c = 0; c \u003c COLS; c++) if (board[r * COLS + c]) n++;\n    if (n === COLS) rows.push(r);\n  }\n  return rows;\n}\n\n// Take the rows out and let everything above them fall in.\nfunction removeRows(board, rows) {\n  let dst = BR - 1;\n  for (let src = BR - 1; src >= 0; src--) {\n    if (rows.includes(src)) continue;\n    if (dst !== src) for (let c = 0; c \u003c COLS; c++) board[dst * COLS + c] = board[src * COLS + c];\n    dst--;\n  }\n  for (; dst >= 0; dst--) for (let c = 0; c \u003c COLS; c++) board[dst * COLS + c] = 0;\n}\n\nfunction heights(board, h) {\n  let max = 0;\n  for (let c = 0; c \u003c COLS; c++) {\n    let r = 0;\n    while (r \u003c BR && !board[r * COLS + c]) r++;\n    h[c] = BR - r;\n    if (h[c] > max) max = h[c];\n  }\n  return max;\n}\n\n// How the player likes a board, after Dellacherie with El-Tetris's weights:\n// few changes between full and empty along rows and down columns, no holes,\n// no narrow pits. The right-hand column counts as wall: the player keeps it\n// for the long bar. Three rows from the top it panics and counts it in.\nfunction boardScore(P, board, mode) {\n  const h = P.h;\n  heights(board, h);\n  const last = mode === PANIC ? COLS : WELL;\n  let rowT = 0;\n  for (let r = 0; r \u003c BR; r++) {\n    let prev = 1;\n    for (let c = 0; c \u003c last; c++) {\n      const f = board[r * COLS + c] ? 1 : 0;\n      if (f !== prev) rowT++;\n      prev = f;\n    }\n    if (!prev) rowT++;\n  }\n  let colT = 0;\n  let holes = 0;\n  for (let c = 0; c \u003c COLS; c++) {\n    let prev = 0;\n    for (let r = 0; r \u003c BR; r++) {\n      const f = board[r * COLS + c] ? 1 : 0;\n      if (f !== prev) colT++;\n      if (!f && r >= BR - h[c]) holes++;\n      prev = f;\n    }\n    if (!prev) colT++;\n  }\n  let wells = 0;\n  for (let c = 0; c \u003c last; c++) {\n    let depth = 0;\n    for (let r = 0; r \u003c BR; r++) {\n      const left = c === 0 || board[r * COLS + c - 1];\n      const right = c + 1 === last || board[r * COLS + c + 1];\n      if (!board[r * COLS + c] && left && right) wells += ++depth;\n      else depth = 0;\n    }\n  }\n  let s = -3.2 * rowT - 9.3 * colT - 7.9 * holes - 3.4 * wells;\n  if (mode === BURN) for (let c = 0; c \u003c WELL; c++) if (h[c] > P.target) s -= 1.5 * (h[c] - P.target);\n  return s;\n}\n\n// Drop a piece onto a copy of the board and score the move itself: the piece\n// low and its cells in the rows it clears. Below its line the player saves\n// the rows that are ready and keeps everything out of the right-hand column;\n// at the line it takes four at a time whenever the bar comes; in a panic it\n// fills whatever clears a line.\nfunction move(P, board, out, type, rot, x, y, mode) {\n  const cells = ROT[type][rot];\n  out.set(board);\n  let inWell = 0;\n  let top = 4;\n  let bottom = 0;\n  for (let i = 0; i \u003c 4; i++) {\n    out[(y + cells[i][1]) * COLS + x + cells[i][0]] = type + 1;\n    if (x + cells[i][0] === WELL) inWell++;\n    top = Math.min(top, cells[i][1]);\n    bottom = Math.max(bottom, cells[i][1]);\n  }\n  const rows = fullRows(out);\n  let eroded = 0;\n  for (let i = 0; i \u003c 4; i++) if (rows.includes(y + cells[i][1])) eroded++;\n  eroded *= rows.length;\n  if (rows.length) removeRows(out, rows);\n  const lines = rows.length;\n  let s = -4.5 * (BR - y - (top + bottom) / 2) + 3.4 * eroded;\n  if (mode === PANIC) s += 8 * lines;\n  else if (mode === BURN) {\n    if (type !== 0) s -= 40 * inWell;\n    s += 8 * lines + (lines === 4 ? 25 : 0);\n  } else s -= 40 * inWell + 3.4 * eroded + 12 * lines;\n  return s;\n}\n\n// Every turn and column a piece can reach by sliding along the top and\n// dropping straight down.\nfunction each(board, type, fn) {\n  const turns = type === 1 ? 1 : type === 0 || type === 3 || type === 4 ? 2 : 4;\n  for (let rot = 0; rot \u003c turns; rot++) {\n    const cells = ROT[type][rot];\n    if (!fits(board, cells, 3, HID - 1)) continue;\n    for (let dir = -1; dir \u003c= 1; dir += 2)\n      for (let x = dir \u003c 0 ? 3 : 4; x >= -3 && x \u003c= COLS; x += dir) {\n        if (!fits(board, cells, x, HID - 1)) break;\n        fn(rot, x, dropRow(board, cells, x, HID - 1));\n      }\n  }\n}\n\n// The best place for this piece, looking one piece ahead when it can: the\n// player sees the next piece, as the game shows it.\nfunction choose(P, type, next, force) {\n  const board = P.board;\n  const max = heights(board, P.h);\n  if (max >= P.target) P.burn = true;\n  else if (max \u003c= P.target - 3) P.burn = false;\n  const mode = max >= ROWS - 3 ? PANIC : P.burn || force ? BURN : BUILD;\n  let best = null;\n  each(board, type, (rot, x, y) => {\n    let s = move(P, board, P.trial, type, rot, x, y, mode);\n    if (next >= 0) {\n      let after = -Infinity;\n      each(P.trial, next, (r2, x2, y2) => {\n        const s2 = move(P, P.trial, P.trial2, next, r2, x2, y2, mode) + boardScore(P, P.trial2, mode);\n        if (s2 > after) after = s2;\n      });\n      if (after === -Infinity) after = -1000;\n      s += after;\n    } else s += boardScore(P, P.trial, mode);\n    s += Math.random() * 0.3;\n    if (!best || s > best.s) best = { s, rot, x, y };\n  });\n  return best;\n}\n\nfunction fromBag(P) {\n  if (!P.bag.length) {\n    P.bag = [0, 1, 2, 3, 4, 5, 6];\n    for (let i = 6; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.bag[i];\n      P.bag[i] = P.bag[j];\n      P.bag[j] = t;\n    }\n  }\n  return P.bag.pop();\n}\n\n// The piece that comes now. The one after it waits dim at the top of the\n// well: the player sees it coming, as the game shows it.\nfunction nextType(P) {\n  if (P.next \u003c 0) P.next = fromBag(P);\n  const type = P.next;\n  P.forced = P.forceNext;\n  P.forceNext = false;\n  P.next = P.after >= 0 ? P.after : fromBag(P);\n  P.after = -1;\n  return type;\n}\n\n// A grey row with one hole pushes the stack up a row. The hole mostly stays\n// in the same column for a few rows, the way garbage comes in a block, and\n// half the time it lines up under the player's open column.\nfunction addGarbage(P) {\n  const b = P.board;\n  for (let c = 0; c \u003c COLS; c++) if (b[c]) P.toppled = true;\n  b.copyWithin(0, COLS);\n  if (Math.random() \u003c 0.3) P.hole = Math.random() \u003c 0.5 ? WELL : Math.floor(Math.random() * COLS);\n  for (let c = 0; c \u003c COLS; c++) b[(BR - 1) * COLS + c] = c === P.hole ? 0 : GARBAGE;\n  for (let r = 0; r \u003c BR - 1; r++) P.off[r] = P.off[r + 1] + CELL;\n  P.off[BR - 1] = CELL;\n}\n\n// Play without drawing until the stack stands near the player's line, so the\n// panel opens on a game in progress.\nfunction prebuild(P, garbage) {\n  P.board.fill(0);\n  P.off.fill(0);\n  P.vel.fill(0);\n  P.burn = false;\n  const rows = Math.round(garbage * 6);\n  for (let i = 0; i \u003c rows; i++) addGarbage(P);\n  P.off.fill(0);\n  const extra = Math.floor(Math.random() * 7);\n  let after = -1;\n  for (let n = 0; n \u003c 400 && after \u003c extra; n++) {\n    const type = nextType(P);\n    const m = choose(P, type, P.next, false);\n    if (!m) break;\n    const cells = ROT[type][m.rot];\n    for (let i = 0; i \u003c 4; i++) P.board[(m.y + cells[i][1]) * COLS + m.x + cells[i][0]] = type + 1;\n    const full = fullRows(P.board);\n    if (full.length) removeRows(P.board, full);\n    if (after >= 0) after++;\n    else if (heights(P.board, P.h) >= P.target - 1) after = 0;\n  }\n}\n\nfunction spawn(P) {\n  if (P.chance > 0 && Math.random() \u003c P.chance) {\n    addGarbage(P);\n    if (P.toppled) return topple(P);\n  }\n  const type = nextType(P);\n  const m = choose(P, type, P.next, P.forced);\n  if (!m) return topple(P);\n  // The piece that waited at the top lights up there and starts to move.\n  P.type = type;\n  P.rot = 0;\n  P.x = 3;\n  P.y = HID;\n  P.wait = 0;\n  P.goal = m;\n  P.phase = \"move\";\n  P.clock = 0;\n}\n\n// Topped out: the floor opens and the whole stack falls out of the panel.\nfunction topple(P) {\n  P.phase = \"drop\";\n  P.clock = 0;\n  P.fall = 0;\n  P.fallV = 0;\n  P.toppled = false;\n  P.type = -1;\n}\n\nfunction lock(P) {\n  const cells = ROT[P.type][P.rot];\n  P.flashCells.length = 0;\n  for (let i = 0; i \u003c 4; i++) {\n    const r = P.y + cells[i][1];\n    const c = P.x + cells[i][0];\n    if (r >= 0) P.board[r * COLS + c] = P.type + 1;\n    P.flashCells.push(r * COLS + c);\n  }\n  P.flash = 1;\n  P.type = -1;\n  const rows = fullRows(P.board);\n  if (rows.length) {\n    P.clearing = rows;\n    P.phase = \"clear\";\n    if (rows.length === 4) P.glow = 1;\n  } else P.phase = \"rest\";\n  P.clock = 0;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.board = new Uint8Array(BR * COLS);\n  P.trial = new Uint8Array(BR * COLS);\n  P.trial2 = new Uint8Array(BR * COLS);\n  P.h = new Int32Array(COLS);\n  // Each board row's offset in LEDs while it falls into a cleared gap or\n  // rises over a garbage row, and how fast it is falling.\n  P.off = new Float32Array(BR);\n  P.vel = new Float32Array(BR);\n  P.img = new Float32Array(N * 3);\n  P.col = new Float32Array(9 * 3);\n  P.bag = [];\n  P.next = -1;\n  P.after = -1;\n  P.wait = 0;\n  P.hole = 0;\n  P.flashCells = [];\n  P.clearing = [];\n  P.ready = false;\n  P.type = -1;\n  P.phase = \"rest\";\n  P.clock = 0;\n  P.flash = 0;\n  P.glow = 0;\n  P.target = 16;\n  P.burn = false;\n  P.forceNext = false;\n  P.forced = false;\n  P.toppled = false;\n  P.chance = 0;\n  P.hue = 0;\n  P.time = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const tempo = Math.max(0.2, Math.min(3, k[1]));\n  const headroom = Math.round(Math.max(6, Math.min(18, k[2])));\n  const garbage = Math.max(0, Math.min(1, k[3]));\n  P.target = ROWS - headroom;\n  P.chance = garbage * garbage * 0.5;\n  if (!P.ready) {\n    P.ready = true;\n    prebuild(P, garbage);\n    spawn(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.next !== 0) {\n      P.after = P.next;\n      P.next = 0;\n    }\n    P.forceNext = true;\n  }\n\n  const s = dt * tempo;\n  P.time += s;\n  P.flash = Math.max(0, P.flash - s * 6);\n  P.glow = Math.max(0, P.glow - s * 0.9);\n  // The next piece fades in at the top once the live one has dropped clear of it.\n  if (P.phase === \"drop\") P.wait = 0;\n  else if (P.type \u003c 0 || P.y > HID + 2.5) P.wait = Math.min(1, P.wait + s * 5);\n\n  // Rows settle: down into a cleared gap under gravity, up over garbage at a steady pace.\n  let settling = false;\n  for (let r = 0; r \u003c BR; r++) {\n    if (P.off[r] \u003c 0) {\n      P.vel[r] += 220 * s;\n      P.off[r] = Math.min(0, P.off[r] + P.vel[r] * s);\n      if (P.off[r] === 0) P.vel[r] = 0;\n      settling = true;\n    } else if (P.off[r] > 0) {\n      P.off[r] = Math.max(0, P.off[r] - 40 * s);\n      settling = true;\n    }\n  }\n\n  P.clock += s;\n  if (P.phase === \"move\") {\n    // Turn and slide along the top to the chosen column, a row higher where\n    // the stack has come up that far.\n    const g = P.goal;\n    if (P.clock > 0.07) {\n      P.clock = 0;\n      if (P.rot !== g.rot) P.rot = (P.rot + 1) % 4;\n      else if (P.x !== g.x) P.x += Math.sign(g.x - P.x);\n    }\n    P.y = fits(P.board, ROT[P.type][P.rot], P.x, HID) ? HID : HID - 1;\n    if (P.rot === g.rot && P.x === g.x) {\n      P.phase = \"fall\";\n      P.clock = 0;\n    }\n  } else if (P.phase === \"fall\") {\n    P.y += 5 * s;\n    if (P.y >= P.goal.y) {\n      P.y = P.goal.y;\n      lock(P);\n    }\n  } else if (P.phase === \"clear\") {\n    // White, then the cells go from the middle out, then the rows above fall in.\n    if (P.clock > 0.42) {\n      const below = new Int32Array(BR);\n      for (let r = 0; r \u003c BR; r++) for (const c of P.clearing) if (c > r) below[r]++;\n      removeRows(P.board, P.clearing);\n      const moved = new Float32Array(BR);\n      let dst = BR - 1;\n      for (let src = BR - 1; src >= 0; src--) {\n        if (P.clearing.includes(src)) continue;\n        moved[dst] = -below[src] * CELL + P.off[src];\n        dst--;\n      }\n      for (let r = 0; r \u003c BR; r++) {\n        P.off[r] = r \u003c= dst ? 0 : moved[r];\n        P.vel[r] = 0;\n      }\n      P.clearing = [];\n      P.phase = \"rest\";\n      P.clock = 0;\n    }\n  } else if (P.phase === \"rest\") {\n    if (!settling && P.clock > 0.06) spawn(P);\n  } else if (P.phase === \"drop\") {\n    P.fallV += 160 * s;\n    P.fall += P.fallV * s;\n    if (P.fall > H + CELL * 2) {\n      P.board.fill(0);\n      P.off.fill(0);\n      P.vel.fill(0);\n      P.fall = 0;\n      P.burn = false;\n      P.phase = \"rest\";\n      P.clock = -0.5;\n    }\n  }\n}\n\nfunction blockInto(img, x0, y0, rgb, o, white, ghost, dim = 1) {\n  for (let j = 0; j \u003c CELL; j++) {\n    const y = y0 + j;\n    if (y \u003c 0 || y >= H) continue;\n    for (let i = 0; i \u003c CELL; i++) {\n      const x = x0 + i;\n      if (x \u003c X0 || x >= X0 + COLS * CELL) continue;\n      const rim = i === 0 || j === 0 || i === CELL - 1 || j === CELL - 1;\n      if (ghost && !rim) continue;\n      let f = 1;\n      let lift = 0;\n      if (i === CELL - 1 || j === CELL - 1) f = 0.5;\n      else if (i === 0 || j === 0) lift = 0.38;\n      else if (i === 1 && j === 1) lift = 0.6;\n      if (ghost) {\n        f = 0.28;\n        lift = 0;\n      }\n      const p = (y * W + x) * 3;\n      for (let ch = 0; ch \u003c 3; ch++) {\n        let v = rgb[o + ch] * f;\n        v += (255 - v) * lift;\n        v += (255 - v) * white;\n        img[p + ch] = v * dim;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const img = P.img;\n  img.fill(0);\n  const col = P.col;\n  for (let t = 0; t \u003c 7; t++) hsvInto(col, (t + 1) * 3, HUES[t] + P.hue, 0.86, 0.86);\n  col[GARBAGE * 3] = 104;\n  col[GARBAGE * 3 + 1] = 108;\n  col[GARBAGE * 3 + 2] = 122;\n\n  const drop = P.phase === \"drop\" ? Math.round(P.fall) : 0;\n  const clearT = P.phase === \"clear\" ? P.clock : -1;\n  for (let r = 0; r \u003c BR; r++) {\n    const y0 = (r - HID) * CELL + Math.round(P.off[r]) + drop;\n    if (y0 \u003c= -CELL || y0 >= H) continue;\n    const clearing = clearT >= 0 && P.clearing.includes(r);\n    for (let c = 0; c \u003c COLS; c++) {\n      const v = P.board[r * COLS + c];\n      if (!v) continue;\n      let white = 0;\n      if (clearing) {\n        // Flash white for an eighth of a second, then go two columns at a time from the middle.\n        if (clearT \u003c 0.12) white = 0.85;\n        else {\n          const ring = Math.min(4, Math.floor((clearT - 0.12) / 0.06));\n          const fromMid = c \u003c 5 ? 4 - c : c - 5;\n          if (fromMid \u003c= ring) continue;\n          white = 0.5;\n        }\n      }\n      if (P.flash > 0 && P.flashCells.includes(r * COLS + c)) white = Math.max(white, 0.45 * P.flash);\n      blockInto(img, X0 + c * CELL, y0, col, v * 3, white, false);\n    }\n  }\n\n  if (P.wait > 0 && P.next >= 0) {\n    const cells = ROT[P.next][0];\n    for (let i = 0; i \u003c 4; i++) {\n      const r = HID + cells[i][1];\n      const c = 3 + cells[i][0];\n      if (!P.board[r * COLS + c]) blockInto(img, X0 + c * CELL, (r - HID) * CELL, col, (P.next + 1) * 3, 0, false, 0.38 * P.wait);\n    }\n  }\n\n  if (P.type >= 0) {\n    const g = P.goal;\n    const cells = ROT[P.type][P.rot];\n    const o = (P.type + 1) * 3;\n    // Where the player means to put it.\n    const gc = ROT[P.type][g.rot];\n    for (let i = 0; i \u003c 4; i++) blockInto(img, X0 + (g.x + gc[i][0]) * CELL, (g.y + gc[i][1] - HID) * CELL, col, o, 0, true);\n    const py = Math.round((P.y - HID) * CELL);\n    for (let i = 0; i \u003c 4; i++) blockInto(img, X0 + (P.x + cells[i][0]) * CELL, py + cells[i][1] * CELL, col, o, 0, false);\n  }\n\n  // The wall: two LEDs of steel each side and under the floor, which opens\n  // when the stack tops out. After four lines a light runs up both walls.\n  const open = P.phase === \"drop\";\n  for (let y = 0; y \u003c H; y++) {\n    let gr = 0;\n    let gg = 0;\n    let gb = 0;\n    if (P.glow > 0) {\n      const band = Math.max(0, 1 - Math.abs(y / H - (1 - (1 - P.glow) * 1.4)) * 5);\n      if (band > 0) {\n        hsvInto(col, 0, y / H + P.hue + P.time * 0.5, 0.7, band);\n        gr = col[0];\n        gg = col[1];\n        gb = col[2];\n      }\n    }\n    for (const [x, base] of [[0, 0.55], [1, 1], [W - 2, 1], [W - 1, 0.55]]) {\n      const p = (y * W + x) * 3;\n      img[p] = 64 * base + gr;\n      img[p + 1] = 72 * base + gg;\n      img[p + 2] = 96 * base + gb;\n    }\n  }\n  if (!open)\n    for (const [y, base] of [[H - 2, 1], [H - 1, 0.55]])\n      for (let x = 2; x \u003c W - 2; x++) {\n        const p = (y * W + x) * 3;\n        img[p] = 64 * base;\n        img[p + 1] = 72 * base;\n        img[p + 2] = 96 * base;\n      }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, img[p]), Math.min(255, img[p + 1]), Math.min(255, img[p + 2]));\n    }\n}\n","layer":{"id":"layer-tetromino-well","type":"code","name":"tetromino-well","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Tetromino Well\n// Family:  algo\n// Idea:    The standing panel is a falling-block well ten cells wide and twenty-one tall, and a player that never tires stacks the pieces two thirds of the way up before it burns them down, four lines at a time when the long bar comes.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the falling-block puzzle of Tetris (Alexey Pajitnov, 1984); the player weighs every landing with holes, bumps and wells, after Pierre Dellacherie's one-piece controller\n// Round:   10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Headroom=6..18, Garbage=0..1\n//\n// Knob 1: Hue. Turns the seven piece colours together, starting from the usual cyan bar, yellow square, purple T, green S, red Z, blue J and orange L.\n// Knob 2: Speed. How fast pieces fall and rows clear: where it starts a piece drops ten rows a second, at the bottom of the range it drifts down one.\n// Knob 3: Headroom. The rows the player keeps free above its stack: at 6 it builds two thirds of the way up the panel before it starts taking lines, at 18 it keeps the stack on the floor.\n// Knob 4: Garbage. The chance that a grey row with one hole pushes up from the floor as each piece arrives; turned up, the stack climbs until it tops out and the floor drops it.\n// Buttons: K1 tap sends the long bar next, and the player drops it into the well for four lines if four are ready.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst CELL = 6;\nconst COLS = 10;\nconst ROWS = 21;\n// Two rows above the panel where a piece comes in from.\nconst HID = 2;\nconst BR = ROWS + HID;\n// 10 cells of 6 LEDs leave two LEDs of wall on each side; 21 rows leave two LEDs of floor.\nconst X0 = 2;\n// The player keeps the right-hand column open for the long bar.\nconst WELL = COLS - 1;\nconst GARBAGE = 8;\nconst BUILD = 0;\nconst BURN = 1;\nconst PANIC = 2;\n\n// Spawn shapes, (x, y) in a 4×4 box for the bar and a 3×3 box for the rest:\n// I, O, T, S, Z, J, L.\nconst SHAPES = [\n  [[0, 1], [1, 1], [2, 1], [3, 1]],\n  [[1, 0], [2, 0], [1, 1], [2, 1]],\n  [[1, 0], [0, 1], [1, 1], [2, 1]],\n  [[1, 0], [2, 0], [0, 1], [1, 1]],\n  [[0, 0], [1, 0], [1, 1], [2, 1]],\n  [[0, 0], [0, 1], [1, 1], [2, 1]],\n  [[2, 0], [0, 1], [1, 1], [2, 1]],\n];\n// The guideline colours: cyan, yellow, purple, green, red, blue, orange.\nconst HUES = [0.5, 0.15, 0.79, 0.33, 0.995, 0.63, 0.075];\n\n// ROT[type][r] is the shape turned r quarters clockwise.\nconst ROT = SHAPES.map((cells, type) => {\n  const out = [cells];\n  for (let r = 1; r \u003c 4; r++) {\n    const prev = out[r - 1];\n    if (type === 1) out.push(prev);\n    else if (type === 0) out.push(prev.map(([x, y]) => [3 - y, x]));\n    else out.push(prev.map(([x, y]) => [2 - y, x]));\n  }\n  return out;\n});\n\nfunction hsvInto(out, o, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction fits(board, cells, x, y) {\n  for (let i = 0; i \u003c 4; i++) {\n    const c = x + cells[i][0];\n    const r = y + cells[i][1];\n    if (c \u003c 0 || c >= COLS || r >= BR) return false;\n    if (r >= 0 && board[r * COLS + c]) return false;\n  }\n  return true;\n}\n\nfunction dropRow(board, cells, x, y) {\n  while (fits(board, cells, x, y + 1)) y++;\n  return y;\n}\n\nfunction fullRows(board) {\n  const rows = [];\n  for (let r = 0; r \u003c BR; r++) {\n    let n = 0;\n    for (let c = 0; c \u003c COLS; c++) if (board[r * COLS + c]) n++;\n    if (n === COLS) rows.push(r);\n  }\n  return rows;\n}\n\n// Take the rows out and let everything above them fall in.\nfunction removeRows(board, rows) {\n  let dst = BR - 1;\n  for (let src = BR - 1; src >= 0; src--) {\n    if (rows.includes(src)) continue;\n    if (dst !== src) for (let c = 0; c \u003c COLS; c++) board[dst * COLS + c] = board[src * COLS + c];\n    dst--;\n  }\n  for (; dst >= 0; dst--) for (let c = 0; c \u003c COLS; c++) board[dst * COLS + c] = 0;\n}\n\nfunction heights(board, h) {\n  let max = 0;\n  for (let c = 0; c \u003c COLS; c++) {\n    let r = 0;\n    while (r \u003c BR && !board[r * COLS + c]) r++;\n    h[c] = BR - r;\n    if (h[c] > max) max = h[c];\n  }\n  return max;\n}\n\n// How the player likes a board, after Dellacherie with El-Tetris's weights:\n// few changes between full and empty along rows and down columns, no holes,\n// no narrow pits. The right-hand column counts as wall: the player keeps it\n// for the long bar. Three rows from the top it panics and counts it in.\nfunction boardScore(P, board, mode) {\n  const h = P.h;\n  heights(board, h);\n  const last = mode === PANIC ? COLS : WELL;\n  let rowT = 0;\n  for (let r = 0; r \u003c BR; r++) {\n    let prev = 1;\n    for (let c = 0; c \u003c last; c++) {\n      const f = board[r * COLS + c] ? 1 : 0;\n      if (f !== prev) rowT++;\n      prev = f;\n    }\n    if (!prev) rowT++;\n  }\n  let colT = 0;\n  let holes = 0;\n  for (let c = 0; c \u003c COLS; c++) {\n    let prev = 0;\n    for (let r = 0; r \u003c BR; r++) {\n      const f = board[r * COLS + c] ? 1 : 0;\n      if (f !== prev) colT++;\n      if (!f && r >= BR - h[c]) holes++;\n      prev = f;\n    }\n    if (!prev) colT++;\n  }\n  let wells = 0;\n  for (let c = 0; c \u003c last; c++) {\n    let depth = 0;\n    for (let r = 0; r \u003c BR; r++) {\n      const left = c === 0 || board[r * COLS + c - 1];\n      const right = c + 1 === last || board[r * COLS + c + 1];\n      if (!board[r * COLS + c] && left && right) wells += ++depth;\n      else depth = 0;\n    }\n  }\n  let s = -3.2 * rowT - 9.3 * colT - 7.9 * holes - 3.4 * wells;\n  if (mode === BURN) for (let c = 0; c \u003c WELL; c++) if (h[c] > P.target) s -= 1.5 * (h[c] - P.target);\n  return s;\n}\n\n// Drop a piece onto a copy of the board and score the move itself: the piece\n// low and its cells in the rows it clears. Below its line the player saves\n// the rows that are ready and keeps everything out of the right-hand column;\n// at the line it takes four at a time whenever the bar comes; in a panic it\n// fills whatever clears a line.\nfunction move(P, board, out, type, rot, x, y, mode) {\n  const cells = ROT[type][rot];\n  out.set(board);\n  let inWell = 0;\n  let top = 4;\n  let bottom = 0;\n  for (let i = 0; i \u003c 4; i++) {\n    out[(y + cells[i][1]) * COLS + x + cells[i][0]] = type + 1;\n    if (x + cells[i][0] === WELL) inWell++;\n    top = Math.min(top, cells[i][1]);\n    bottom = Math.max(bottom, cells[i][1]);\n  }\n  const rows = fullRows(out);\n  let eroded = 0;\n  for (let i = 0; i \u003c 4; i++) if (rows.includes(y + cells[i][1])) eroded++;\n  eroded *= rows.length;\n  if (rows.length) removeRows(out, rows);\n  const lines = rows.length;\n  let s = -4.5 * (BR - y - (top + bottom) / 2) + 3.4 * eroded;\n  if (mode === PANIC) s += 8 * lines;\n  else if (mode === BURN) {\n    if (type !== 0) s -= 40 * inWell;\n    s += 8 * lines + (lines === 4 ? 25 : 0);\n  } else s -= 40 * inWell + 3.4 * eroded + 12 * lines;\n  return s;\n}\n\n// Every turn and column a piece can reach by sliding along the top and\n// dropping straight down.\nfunction each(board, type, fn) {\n  const turns = type === 1 ? 1 : type === 0 || type === 3 || type === 4 ? 2 : 4;\n  for (let rot = 0; rot \u003c turns; rot++) {\n    const cells = ROT[type][rot];\n    if (!fits(board, cells, 3, HID - 1)) continue;\n    for (let dir = -1; dir \u003c= 1; dir += 2)\n      for (let x = dir \u003c 0 ? 3 : 4; x >= -3 && x \u003c= COLS; x += dir) {\n        if (!fits(board, cells, x, HID - 1)) break;\n        fn(rot, x, dropRow(board, cells, x, HID - 1));\n      }\n  }\n}\n\n// The best place for this piece, looking one piece ahead when it can: the\n// player sees the next piece, as the game shows it.\nfunction choose(P, type, next, force) {\n  const board = P.board;\n  const max = heights(board, P.h);\n  if (max >= P.target) P.burn = true;\n  else if (max \u003c= P.target - 3) P.burn = false;\n  const mode = max >= ROWS - 3 ? PANIC : P.burn || force ? BURN : BUILD;\n  let best = null;\n  each(board, type, (rot, x, y) => {\n    let s = move(P, board, P.trial, type, rot, x, y, mode);\n    if (next >= 0) {\n      let after = -Infinity;\n      each(P.trial, next, (r2, x2, y2) => {\n        const s2 = move(P, P.trial, P.trial2, next, r2, x2, y2, mode) + boardScore(P, P.trial2, mode);\n        if (s2 > after) after = s2;\n      });\n      if (after === -Infinity) after = -1000;\n      s += after;\n    } else s += boardScore(P, P.trial, mode);\n    s += Math.random() * 0.3;\n    if (!best || s > best.s) best = { s, rot, x, y };\n  });\n  return best;\n}\n\nfunction fromBag(P) {\n  if (!P.bag.length) {\n    P.bag = [0, 1, 2, 3, 4, 5, 6];\n    for (let i = 6; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      const t = P.bag[i];\n      P.bag[i] = P.bag[j];\n      P.bag[j] = t;\n    }\n  }\n  return P.bag.pop();\n}\n\n// The piece that comes now. The one after it waits dim at the top of the\n// well: the player sees it coming, as the game shows it.\nfunction nextType(P) {\n  if (P.next \u003c 0) P.next = fromBag(P);\n  const type = P.next;\n  P.forced = P.forceNext;\n  P.forceNext = false;\n  P.next = P.after >= 0 ? P.after : fromBag(P);\n  P.after = -1;\n  return type;\n}\n\n// A grey row with one hole pushes the stack up a row. The hole mostly stays\n// in the same column for a few rows, the way garbage comes in a block, and\n// half the time it lines up under the player's open column.\nfunction addGarbage(P) {\n  const b = P.board;\n  for (let c = 0; c \u003c COLS; c++) if (b[c]) P.toppled = true;\n  b.copyWithin(0, COLS);\n  if (Math.random() \u003c 0.3) P.hole = Math.random() \u003c 0.5 ? WELL : Math.floor(Math.random() * COLS);\n  for (let c = 0; c \u003c COLS; c++) b[(BR - 1) * COLS + c] = c === P.hole ? 0 : GARBAGE;\n  for (let r = 0; r \u003c BR - 1; r++) P.off[r] = P.off[r + 1] + CELL;\n  P.off[BR - 1] = CELL;\n}\n\n// Play without drawing until the stack stands near the player's line, so the\n// panel opens on a game in progress.\nfunction prebuild(P, garbage) {\n  P.board.fill(0);\n  P.off.fill(0);\n  P.vel.fill(0);\n  P.burn = false;\n  const rows = Math.round(garbage * 6);\n  for (let i = 0; i \u003c rows; i++) addGarbage(P);\n  P.off.fill(0);\n  const extra = Math.floor(Math.random() * 7);\n  let after = -1;\n  for (let n = 0; n \u003c 400 && after \u003c extra; n++) {\n    const type = nextType(P);\n    const m = choose(P, type, P.next, false);\n    if (!m) break;\n    const cells = ROT[type][m.rot];\n    for (let i = 0; i \u003c 4; i++) P.board[(m.y + cells[i][1]) * COLS + m.x + cells[i][0]] = type + 1;\n    const full = fullRows(P.board);\n    if (full.length) removeRows(P.board, full);\n    if (after >= 0) after++;\n    else if (heights(P.board, P.h) >= P.target - 1) after = 0;\n  }\n}\n\nfunction spawn(P) {\n  if (P.chance > 0 && Math.random() \u003c P.chance) {\n    addGarbage(P);\n    if (P.toppled) return topple(P);\n  }\n  const type = nextType(P);\n  const m = choose(P, type, P.next, P.forced);\n  if (!m) return topple(P);\n  // The piece that waited at the top lights up there and starts to move.\n  P.type = type;\n  P.rot = 0;\n  P.x = 3;\n  P.y = HID;\n  P.wait = 0;\n  P.goal = m;\n  P.phase = \"move\";\n  P.clock = 0;\n}\n\n// Topped out: the floor opens and the whole stack falls out of the panel.\nfunction topple(P) {\n  P.phase = \"drop\";\n  P.clock = 0;\n  P.fall = 0;\n  P.fallV = 0;\n  P.toppled = false;\n  P.type = -1;\n}\n\nfunction lock(P) {\n  const cells = ROT[P.type][P.rot];\n  P.flashCells.length = 0;\n  for (let i = 0; i \u003c 4; i++) {\n    const r = P.y + cells[i][1];\n    const c = P.x + cells[i][0];\n    if (r >= 0) P.board[r * COLS + c] = P.type + 1;\n    P.flashCells.push(r * COLS + c);\n  }\n  P.flash = 1;\n  P.type = -1;\n  const rows = fullRows(P.board);\n  if (rows.length) {\n    P.clearing = rows;\n    P.phase = \"clear\";\n    if (rows.length === 4) P.glow = 1;\n  } else P.phase = \"rest\";\n  P.clock = 0;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.board = new Uint8Array(BR * COLS);\n  P.trial = new Uint8Array(BR * COLS);\n  P.trial2 = new Uint8Array(BR * COLS);\n  P.h = new Int32Array(COLS);\n  // Each board row's offset in LEDs while it falls into a cleared gap or\n  // rises over a garbage row, and how fast it is falling.\n  P.off = new Float32Array(BR);\n  P.vel = new Float32Array(BR);\n  P.img = new Float32Array(N * 3);\n  P.col = new Float32Array(9 * 3);\n  P.bag = [];\n  P.next = -1;\n  P.after = -1;\n  P.wait = 0;\n  P.hole = 0;\n  P.flashCells = [];\n  P.clearing = [];\n  P.ready = false;\n  P.type = -1;\n  P.phase = \"rest\";\n  P.clock = 0;\n  P.flash = 0;\n  P.glow = 0;\n  P.target = 16;\n  P.burn = false;\n  P.forceNext = false;\n  P.forced = false;\n  P.toppled = false;\n  P.chance = 0;\n  P.hue = 0;\n  P.time = 0;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 6, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  const tempo = Math.max(0.2, Math.min(3, k[1]));\n  const headroom = Math.round(Math.max(6, Math.min(18, k[2])));\n  const garbage = Math.max(0, Math.min(1, k[3]));\n  P.target = ROWS - headroom;\n  P.chance = garbage * garbage * 0.5;\n  if (!P.ready) {\n    P.ready = true;\n    prebuild(P, garbage);\n    spawn(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.next !== 0) {\n      P.after = P.next;\n      P.next = 0;\n    }\n    P.forceNext = true;\n  }\n\n  const s = dt * tempo;\n  P.time += s;\n  P.flash = Math.max(0, P.flash - s * 6);\n  P.glow = Math.max(0, P.glow - s * 0.9);\n  // The next piece fades in at the top once the live one has dropped clear of it.\n  if (P.phase === \"drop\") P.wait = 0;\n  else if (P.type \u003c 0 || P.y > HID + 2.5) P.wait = Math.min(1, P.wait + s * 5);\n\n  // Rows settle: down into a cleared gap under gravity, up over garbage at a steady pace.\n  let settling = false;\n  for (let r = 0; r \u003c BR; r++) {\n    if (P.off[r] \u003c 0) {\n      P.vel[r] += 220 * s;\n      P.off[r] = Math.min(0, P.off[r] + P.vel[r] * s);\n      if (P.off[r] === 0) P.vel[r] = 0;\n      settling = true;\n    } else if (P.off[r] > 0) {\n      P.off[r] = Math.max(0, P.off[r] - 40 * s);\n      settling = true;\n    }\n  }\n\n  P.clock += s;\n  if (P.phase === \"move\") {\n    // Turn and slide along the top to the chosen column, a row higher where\n    // the stack has come up that far.\n    const g = P.goal;\n    if (P.clock > 0.07) {\n      P.clock = 0;\n      if (P.rot !== g.rot) P.rot = (P.rot + 1) % 4;\n      else if (P.x !== g.x) P.x += Math.sign(g.x - P.x);\n    }\n    P.y = fits(P.board, ROT[P.type][P.rot], P.x, HID) ? HID : HID - 1;\n    if (P.rot === g.rot && P.x === g.x) {\n      P.phase = \"fall\";\n      P.clock = 0;\n    }\n  } else if (P.phase === \"fall\") {\n    P.y += 5 * s;\n    if (P.y >= P.goal.y) {\n      P.y = P.goal.y;\n      lock(P);\n    }\n  } else if (P.phase === \"clear\") {\n    // White, then the cells go from the middle out, then the rows above fall in.\n    if (P.clock > 0.42) {\n      const below = new Int32Array(BR);\n      for (let r = 0; r \u003c BR; r++) for (const c of P.clearing) if (c > r) below[r]++;\n      removeRows(P.board, P.clearing);\n      const moved = new Float32Array(BR);\n      let dst = BR - 1;\n      for (let src = BR - 1; src >= 0; src--) {\n        if (P.clearing.includes(src)) continue;\n        moved[dst] = -below[src] * CELL + P.off[src];\n        dst--;\n      }\n      for (let r = 0; r \u003c BR; r++) {\n        P.off[r] = r \u003c= dst ? 0 : moved[r];\n        P.vel[r] = 0;\n      }\n      P.clearing = [];\n      P.phase = \"rest\";\n      P.clock = 0;\n    }\n  } else if (P.phase === \"rest\") {\n    if (!settling && P.clock > 0.06) spawn(P);\n  } else if (P.phase === \"drop\") {\n    P.fallV += 160 * s;\n    P.fall += P.fallV * s;\n    if (P.fall > H + CELL * 2) {\n      P.board.fill(0);\n      P.off.fill(0);\n      P.vel.fill(0);\n      P.fall = 0;\n      P.burn = false;\n      P.phase = \"rest\";\n      P.clock = -0.5;\n    }\n  }\n}\n\nfunction blockInto(img, x0, y0, rgb, o, white, ghost, dim = 1) {\n  for (let j = 0; j \u003c CELL; j++) {\n    const y = y0 + j;\n    if (y \u003c 0 || y >= H) continue;\n    for (let i = 0; i \u003c CELL; i++) {\n      const x = x0 + i;\n      if (x \u003c X0 || x >= X0 + COLS * CELL) continue;\n      const rim = i === 0 || j === 0 || i === CELL - 1 || j === CELL - 1;\n      if (ghost && !rim) continue;\n      let f = 1;\n      let lift = 0;\n      if (i === CELL - 1 || j === CELL - 1) f = 0.5;\n      else if (i === 0 || j === 0) lift = 0.38;\n      else if (i === 1 && j === 1) lift = 0.6;\n      if (ghost) {\n        f = 0.28;\n        lift = 0;\n      }\n      const p = (y * W + x) * 3;\n      for (let ch = 0; ch \u003c 3; ch++) {\n        let v = rgb[o + ch] * f;\n        v += (255 - v) * lift;\n        v += (255 - v) * white;\n        img[p + ch] = v * dim;\n      }\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const img = P.img;\n  img.fill(0);\n  const col = P.col;\n  for (let t = 0; t \u003c 7; t++) hsvInto(col, (t + 1) * 3, HUES[t] + P.hue, 0.86, 0.86);\n  col[GARBAGE * 3] = 104;\n  col[GARBAGE * 3 + 1] = 108;\n  col[GARBAGE * 3 + 2] = 122;\n\n  const drop = P.phase === \"drop\" ? Math.round(P.fall) : 0;\n  const clearT = P.phase === \"clear\" ? P.clock : -1;\n  for (let r = 0; r \u003c BR; r++) {\n    const y0 = (r - HID) * CELL + Math.round(P.off[r]) + drop;\n    if (y0 \u003c= -CELL || y0 >= H) continue;\n    const clearing = clearT >= 0 && P.clearing.includes(r);\n    for (let c = 0; c \u003c COLS; c++) {\n      const v = P.board[r * COLS + c];\n      if (!v) continue;\n      let white = 0;\n      if (clearing) {\n        // Flash white for an eighth of a second, then go two columns at a time from the middle.\n        if (clearT \u003c 0.12) white = 0.85;\n        else {\n          const ring = Math.min(4, Math.floor((clearT - 0.12) / 0.06));\n          const fromMid = c \u003c 5 ? 4 - c : c - 5;\n          if (fromMid \u003c= ring) continue;\n          white = 0.5;\n        }\n      }\n      if (P.flash > 0 && P.flashCells.includes(r * COLS + c)) white = Math.max(white, 0.45 * P.flash);\n      blockInto(img, X0 + c * CELL, y0, col, v * 3, white, false);\n    }\n  }\n\n  if (P.wait > 0 && P.next >= 0) {\n    const cells = ROT[P.next][0];\n    for (let i = 0; i \u003c 4; i++) {\n      const r = HID + cells[i][1];\n      const c = 3 + cells[i][0];\n      if (!P.board[r * COLS + c]) blockInto(img, X0 + c * CELL, (r - HID) * CELL, col, (P.next + 1) * 3, 0, false, 0.38 * P.wait);\n    }\n  }\n\n  if (P.type >= 0) {\n    const g = P.goal;\n    const cells = ROT[P.type][P.rot];\n    const o = (P.type + 1) * 3;\n    // Where the player means to put it.\n    const gc = ROT[P.type][g.rot];\n    for (let i = 0; i \u003c 4; i++) blockInto(img, X0 + (g.x + gc[i][0]) * CELL, (g.y + gc[i][1] - HID) * CELL, col, o, 0, true);\n    const py = Math.round((P.y - HID) * CELL);\n    for (let i = 0; i \u003c 4; i++) blockInto(img, X0 + (P.x + cells[i][0]) * CELL, py + cells[i][1] * CELL, col, o, 0, false);\n  }\n\n  // The wall: two LEDs of steel each side and under the floor, which opens\n  // when the stack tops out. After four lines a light runs up both walls.\n  const open = P.phase === \"drop\";\n  for (let y = 0; y \u003c H; y++) {\n    let gr = 0;\n    let gg = 0;\n    let gb = 0;\n    if (P.glow > 0) {\n      const band = Math.max(0, 1 - Math.abs(y / H - (1 - (1 - P.glow) * 1.4)) * 5);\n      if (band > 0) {\n        hsvInto(col, 0, y / H + P.hue + P.time * 0.5, 0.7, band);\n        gr = col[0];\n        gg = col[1];\n        gb = col[2];\n      }\n    }\n    for (const [x, base] of [[0, 0.55], [1, 1], [W - 2, 1], [W - 1, 0.55]]) {\n      const p = (y * W + x) * 3;\n      img[p] = 64 * base + gr;\n      img[p + 1] = 72 * base + gg;\n      img[p + 2] = 96 * base + gb;\n    }\n  }\n  if (!open)\n    for (const [y, base] of [[H - 2, 1], [H - 1, 0.55]])\n      for (let x = 2; x \u003c W - 2; x++) {\n        const p = (y * W + x) * 3;\n        img[p] = 64 * base;\n        img[p + 1] = 72 * base;\n        img[p + 2] = 96 * base;\n      }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, img[p]), Math.min(255, img[p + 1]), Math.min(255, img[p + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Headroom=6..18, Garbage=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the seven piece colours together, starting from the usual cyan bar, yellow square, purple T, green S, red Z, blue J and orange L."},{"name":"Speed","min":0.2,"max":3,"about":"How fast pieces fall and rows clear: where it starts a piece drops ten rows a second, at the bottom of the range it drifts down one."},{"name":"Headroom","min":6,"max":18,"about":"The rows the player keeps free above its stack: at 6 it builds two thirds of the way up the panel before it starts taking lines, at 18 it keeps the stack on the floor."},{"name":"Garbage","min":0,"max":1,"about":"The chance that a grey row with one hole pushes up from the floor as each piece arrives; turned up, the stack climbs until it tops out and the floor drops it."}],"start":[0,2,6,0.06],"measures":{"motion":0.2184,"detail":0.0909,"edges":0.7088,"complexity":0.1224,"coverage":0.6512,"colour":0.4389,"drift":0.0999},"knobResponse":[0.2488,0.0464,0.2189,0.2009]},{"slug":"thermal","title":"Thermal","family":"flight","round":24,"note":"여름 오후의 밭 위에서 흰 글라이더가 열기류를 타고 타원을 그리며 맴돌아 올라가요. 말똥가리 둘이 더 좁게 같이 돌고, 꼭대기의 적운은 자라며 바닥이 어두워져요. 구름 바닥에 닿은 글라이더는 다음 열기류로 미끄러져 가고 아래에서 새 글라이더가 들어와요. K1 을 누르면 윈치가 글라이더 하나를 끌어올려요.","idea":"A white sailplane corkscrews up a summer thermal off a dark ploughed field with two buzzards and rising thistledown, until at the base of the cumulus the thermal is building it straightens and glides off, and another glider joins low down.","buttons":"K1 tap winch-launches a glider from the field; it rears up on the cable, lets go and turns into the thermal.","code":"// ===== Patternflow pattern =====\n// Title:   Thermal\n// Family:  flight\n// Idea:    A white sailplane corkscrews up a summer thermal off a dark ploughed field with two buzzards and rising thistledown, until at the base of the cumulus the thermal is building it straightens and glides off, and another glider joins low down.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after thermal soaring under fair-weather cumulus over farmland\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Gliders=1..4, Wind=-1..1\n//\n// Knob 1: Hour. Bright midday at 0, to golden late afternoon at 1: the sun comes in low from the left, the haze goes amber and hedges and trees throw long shadows.\n// Knob 2: Speed. At 2 a turn takes six seconds, the climb to the cloud base about twenty, and each cloud builds for 26 s before it drifts off. At 0.2 all of it runs ten times slower.\n// Knob 3: Gliders. One to four gliders stacked in the thermal. A day good enough for four also builds a bigger cloud with a darker base and sends more thistledown up.\n// Knob 4: Wind. The thermal and its cloud lean downwind, so the turns drift as the gliders climb, and cloud shadows and far cumulus travel faster. Near 0 it is almost calm.\n// Buttons: K1 tap winch-launches a glider from the field; it rears up on the cable, lets go and turns into the thermal.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, sin, cos, abs, sqrt, exp, floor, round, pow, sign, PI } = Math;\nconst TAU = 2 * PI;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\nconst rnd = () => Math.random();\n// Rows: horizon, first field row, cloud base, where the thermal leaves the ground.\nconst [HOR, FY, YB, YG] = [97, 100, 36, 116];\n// The ploughed field the thermal comes off: its column and its distance.\nconst [SRCX, DSRC] = [29, 9.6];\n// We look up a little, so a level circle is a thin ellipse; the craft are drawn flatter so a banked wing does not stand on end.\nconst SE = sin(0.3);\nconst [BE, BC] = [sin(0.1), cos(0.1)];\n\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, u = fx * fx * (3 - 2 * fx), v = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy, s), b = hash(ix + 1, iy, s), c = hash(ix, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(ix + 1, iy + 1, s)) * u * v;\n}\nconst fbm = (x, y, s) => 0.55 * noise(x, y, s) + 0.3 * noise(x * 2.1, y * 2.1, s + 7) + 0.15 * noise(x * 4.3, y * 4.3, s + 13);\n\n// Pasture, beans, stubble, wheat, hay and plough in midday sun; 1 marks rows running away from us.\nconst CROP = [[70, 150, 45, 0], [38, 106, 36, 1], [216, 184, 94, 1], [198, 160, 66, 0], [142, 178, 74, 0], [96, 62, 40, 1]];\nconst PICK = [0, 0, 0, 1, 1, 2, 2, 2, 3, 3, 4, 4];\n// Tapered strokes in the craft's axes: forward, right, up, twice, then two radii.\nconst GLIDER = [[3.6, 0, -0.1, -4.8, 0, 0.15, 0.85, 0.45], [0.6, 0, 0.25, 0.25, -9, 0.85, 0.75, 0.45], [0.6, 0, 0.25, 0.25, 9, 0.85, 0.75, 0.45], [-4.2, 0, 0.1, -4.9, 0, 2.4, 0.55, 0.45], [-4.9, -2.6, 2.4, -4.9, 2.6, 2.4, 0.45, 0.45]];\nconst BUZZ = [[1.3, 0, 0, -1.3, 0, 0, 0.6, 0.45], [0.2, 0, 0.1, -0.3, -3.7, 0.75, 0.8, 0.45], [0.2, 0, 0.1, -0.3, 3.7, 0.75, 0.8, 0.45], [-1.2, 0, 0, -2.5, 0, 0.1, 0.45, 0.65]];\n\n// A cumulus as puffs over a flat base: each puff's place (u across, v up), its radius r and when in its growth it appears.\nfunction puffs() {\n  const L = [];\n  const add = (u, v, r, t0) => L.push({ u: u + (rnd() - 0.5) * 0.14, v: v + (rnd() - 0.5) * 0.08, r: r * (0.88 + 0.24 * rnd()), t0, ph: rnd() * TAU });\n  for (let i = 0; i \u003c 5; i++) add(-0.76 + i * 0.38, 0.2, 0.34, i === 2 ? 0 : 0.03 + 0.12 * rnd());\n  for (let i = 0; i \u003c 4; i++) add(-0.5 + i * 0.33, 0.45, 0.33, 0.08 + 0.17 * rnd());\n  for (let i = 0; i \u003c 3; i++) add(-0.3 + i * 0.3, 0.68, 0.3, 0.3 + 0.2 * rnd());\n  for (let i = 0; i \u003c 2; i++) add((rnd() - 0.5) * 0.4, 0.86, 0.26, 0.55 + 0.15 * rnd());\n  return L;\n}\nconst newCloud = (x, a) => ({ x, a, g: 0, al: 1, det: false, p: puffs(), sd: floor(rnd() * 999) });\n\n// Fields lie in strips at distance D (row = HOR + 180 / D), each cut into fields across.\nfunction buildFields(S) {\n  const strips = [], trees = [], us = ((SRCX - 32) * DSRC) / 64, hw = (11 * DSRC) / 64;\n  for (let D = 5.6; D \u003c 66; ) {\n    const D2 = D * (1.22 + 0.12 * rnd());\n    const wid = () => ((12 + 18 * rnd()) * pow(6 / D, 0.35) * D) / 64;\n    let b = [];\n    for (let u = -0.62 * D2 - rnd() * wid(); u \u003c 0.62 * D2 + 0.3; u += wid()) b.push(u);\n    const src = D \u003c= DSRC && DSRC \u003c D2;\n    if (src) {\n      b = b.filter((u) => u \u003c us - hw - 0.3 || u > us + hw + 0.3);\n      b.push(us - hw, us + hw);\n      b.sort((p, q) => p - q);\n    }\n    const t = [];\n    for (let j = 0; j \u003c b.length - 1; j++) {\n      let k;\n      do k = PICK[floor(rnd() * PICK.length)];\n      while (j && k === t[j - 1]);\n      t.push(k);\n    }\n    if (src) t[b.indexOf(us - hw)] = 5;\n    strips.push({ d0: D, d1: D2, b, t, hh: 0.12 + 0.08 * rnd(), i: strips.length });\n    // Trees in the hedge along each strip's near edge, and at some corners.\n    for (let j = 0; j \u003c 2; j++) if (rnd() \u003c 0.6) trees.push({ u: (rnd() - 0.5) * 1.1 * D, D: D + 0.05, rc: 0.2 + 0.14 * rnd() });\n    for (let j = 1; j \u003c b.length - 1; j++) if (rnd() \u003c 0.2) trees.push({ u: b[j], D: D + 0.05, rc: 0.2 + 0.12 * rnd() });\n    D = D2;\n  }\n  for (const tr of trees) tr.hc = tr.rc * 1.5 + 0.15;\n  S.strips = strips;\n  S.trees = trees.sort((p, q) => q.D - p.D);\n}\n\nexport function setup(params) {\n  const F = () => new Float32Array(N);\n  const S = { t: 0, bg: new Float32Array(N * 3), buf: new Float32Array(N * 3), A: F(), fu: F(), fd: F(), fn: F(), gl: [], down: [], clouds: [], far: [], spawn: [0, 0], cable: null, bb: [1e9, 1e9, -1, -1] };\n  buildFields(S);\n  for (let y = FY; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      S.fd[p] = 180 / (y + 0.5 - HOR);\n      S.fu[p] = ((x + 0.5 - 32) * S.fd[p]) / 64;\n      S.fn[p] = fbm(x * 0.15, y * 0.3, 11);\n    }\n  for (let i = 0; i \u003c 3; i++) S.far.push({ x: 8 + i * 24 + rnd() * 10, yb: 87 - i * 5 - rnd() * 2, hw: 5 + 2.5 * i + rnd() * 2, ht: 3 + i + rnd() * 1.5, p: puffs(), sd: floor(rnd() * 999), m: 0.35, e: 44 });\n  S.shad = [{ x: 6, D: 7.4, r: 19, rd: 2.6, m: 0.9, e: 62 }, { x: 50, D: 16, r: 15, rd: 5.5, m: 0.9, e: 60 }];\n  params.s = S;\n}\n\n// The thermal's centre at a row: it leans downwind with height and wanders a little.\nconst colX = (S, y) => SRCX + S.lean * (YG - y) + 1.5 * sin(S.t * 0.21);\nconst sunLight = (h, k = mix(1, 0.9, h)) => [mix(1, 1.16, h) * k, mix(1, 0.86, h) * k, mix(1, 0.56, h) * k];\nconst SHADE = [0.42, 0.47, 0.6];\nconst hazeOf = (h) => mix3([176, 202, 222], [236, 186, 122], h);\nfunction skyAt(x, y, h) {\n  const top = mix3([14, 50, 150], [30, 52, 128], h), mid = mix3([44, 108, 206], [70, 104, 178], h), t = y / 96;\n  const c = t \u003c 0.66 ? mix3(top, mid, sstep(0, 0.66, t)) : mix3(mid, hazeOf(h), sstep(0.66, 1, t));\n  const gw = pow(h, 1.5) * exp(-x / 24) * exp(-abs(y - 78) / 36);\n  return [c[0] + 110 * gw, c[1] + 64 * gw, c[2] + 14 * gw];\n}\n\n// The ground seen at a point of the panel: hedges, fields, their shadows, and the haze.\nfunction fieldAt(S, x, y, sun, Lsh, haze) {\n  const D = 180 / (y - HOR), u = ((x - 32) * D) / 64, st = S.strips;\n  let k = 0;\n  while (k \u003c st.length - 1 && D >= st[k].d1) k++;\n  let alb = null;\n  let lit = 1;\n  // The hedge on a strip's near edge hides the ground just behind it.\n  for (let j = k; j >= 0 && st[j].d0 > D * 0.8; j--) {\n    const s = st[j];\n    if (y >= HOR + (180 - 64 * s.hh * (0.7 + 0.6 * noise(u * 2.6, s.i * 9, 3))) / s.d0) {\n      const n = 0.8 + 0.4 * noise(u * 6, y, 5);\n      alb = [34 * n, 78 * n, 30 * n];\n      lit = 0.85;\n      break;\n    }\n  }\n  if (!alb) {\n    const s = st[k], b = s.b;\n    let j = 0;\n    while (j \u003c b.length - 2 && u >= b[j + 1]) j++;\n    const hwu = ((0.8 * pow(6 / D, 0.4) + 0.25) * D) / 64;\n    if (abs(u - b[j]) \u003c hwu || abs(u - b[j + 1]) \u003c hwu) {\n      alb = [30, 70, 28];\n      lit = 0.7;\n    } else {\n      const c = CROP[s.t[j]], tx = c[3] ? 0.97 + 0.17 * sin(u * TAU * 6.5) : 0.86 + 0.28 * fbm(u * 2.5, D * 0.7, s.t[j] + j);\n      alb = [c[0] * tx, c[1] * tx, c[2] * tx];\n      // Shadows of the hedges left and in front, and of the trees.\n      if (u - b[j] \u003c s.hh * Lsh * 0.85 || D - s.d0 \u003c s.hh * Lsh * 0.4) lit = 0;\n      else\n        for (const tr of S.trees) {\n          const du = u - tr.u - tr.hc * Lsh * 0.85, dd = D - tr.D - tr.hc * Lsh * 0.45;\n          if (abs(dd) > 3 + Lsh) continue;\n          const al = (du * 0.86 + dd * 0.5) / (tr.rc * (1 + 0.55 * Lsh)), pe = (-du * 0.5 + dd * 0.86) / (tr.rc * 1.8);\n          if (al * al + pe * pe \u003c 1) {\n            lit = 0;\n            break;\n          }\n        }\n    }\n  }\n  const hz = 0.55 * sstep(5, 75, D);\n  return [0, 1, 2].map((c) => mix(alb[c] * mix(SHADE[c], sun[c], lit), haze[c], hz));\n}\n\nfunction paint(S) {\n  const h = S.hour, sun = sunLight(h), haze = hazeOf(h), Lsh = 0.35 + 4.2 * pow(h, 1.6), bg = S.bg, ridgeF = mix3(haze, [64, 96, 116], 0.38);\n  const ridgeN = mix3(haze, [52 * sun[0], 98 * sun[1], 54 * sun[2]], 0.58);\n  for (let x = 0; x \u003c W; x++) {\n    const farT = 83 + 5 * fbm(x * 0.045, 1.3, 21), nearT = 91.5 + 3 * fbm(x * 0.09, 4.1, 22) - 1.5 * sstep(0.55, 0.8, noise(x * 0.5, 0, 23));\n    for (let y = 0; y \u003c H; y++) {\n      const q = (y * W + x) * 3;\n      bg[q] = bg[q + 1] = bg[q + 2] = 0;\n      // The open sky is smooth enough for one sample.\n      for (let k = y + 1 \u003c farT ? 3 : 0; k \u003c 4; k++) {\n        const xs = x + 0.25 + 0.5 * (k & 1), ys = y + 0.25 + 0.5 * (k >> 1);\n        let c;\n        if (ys >= FY) c = fieldAt(S, xs, ys, sun, Lsh, haze);\n        else if (ys >= nearT) c = ridgeN.map((v) => v * (0.84 + 0.3 * fbm(x * 0.35, ys * 0.9, 24)));\n        else if (ys >= farT) c = ridgeF;\n        else c = skyAt(xs, ys, h);\n        for (let i = 0; i \u003c 3; i++) bg[q + i] += y + 1 \u003c farT ? c[i] : c[i] / 4;\n      }\n    }\n  }\n  // Tree crowns, far ones first, lit from the sun's side.\n  for (const tr of S.trees) {\n    const cx = 32 + (64 * tr.u) / tr.D, cy = HOR + (180 - 64 * tr.hc) / tr.D, R = (64 * tr.rc) / tr.D, hz = 0.55 * sstep(5, 75, tr.D);\n    for (let y = max(FY - 4, floor(cy - R - 1)); y \u003c= min(H - 1, cy + R + 1); y++)\n      for (let x = max(0, floor(cx - R - 1)); x \u003c= min(W - 1, cx + R + 1); x++) {\n        const dx = (x + 0.5 - cx) / R, dy = (y + 0.5 - cy) / R, a = clamp((1 - sqrt(dx * dx + dy * dy)) * R + 0.5, 0, 1);\n        if (a \u003c= 0) continue;\n        const l = clamp(0.45 - 0.7 * dx - 0.4 * dy, 0, 1), n = 0.85 + 0.3 * hash(x, y, 31), q = (y * W + x) * 3;\n        [40, 94, 38].forEach((al, c) => (bg[q + c] += (mix(al * n * mix(SHADE[c], sun[c] * 1.1, l), haze[c], hz) - bg[q + c]) * a));\n      }\n  }\n  S.painted = h;\n}\n\nfunction addCraft(S, kind, st, X, yc, dir) {\n  const R = kind ? 5.5 + rnd() : 11.5 + rnd();\n  const o = { kind, st, X, yc, Z: -dir * R, R, dir, th: (-dir * PI) / 2, bank: st === \"climb\" ? 0.5 + 0.12 * kind : 0, pitch: 0, off: 0, s: 0, w: kind ? 1.75 + 0.3 * rnd() : 1.05, c0: kind ? 1.9 : 2.4 };\n  S.gl.push(o);\n  return o;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.hour = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2, kg = clamp(k[2], 1, 4), n = (S.n = round(kg)), wind = clamp(k[3], -1, 1);\n  if (!S.started) {\n    S.started = true;\n    S.wind = wind;\n    S.ks = 1 + 0.14 * (kg - 1);\n    S.lean = wind * 0.22;\n    for (let i = 0; i \u003c n; i++) addCraft(S, 0, \"climb\", 0, n === 1 ? 72 : 82 - (i * 36) / (n - 1), 1).th = rnd() * TAU;\n    for (const y of [86, 62]) addCraft(S, 1, \"climb\", 0, y, 1).th = rnd() * TAU;\n    for (let i = 0; i \u003c 56; i++) S.down.push({ y: YB + rnd() * (YG - YB), a: rnd() * TAU, r: 0.5 + rnd() * 5.5, v: 3 + rnd() * 3, tw: rnd() * TAU });\n    // The cloud of the last thermal is drifting off as the next one starts.\n    S.clouds.push(Object.assign(newCloud(colX(S, YB) + (wind \u003c 0 ? -24 : 24), 26), { det: true, al: 0.9 }), newCloud(colX(S, YB), 1.5));\n  }\n  const d = dt * tempo;\n  S.t += d;\n  S.wind += (wind - S.wind) * min(1, dt * 2);\n  S.ks += (1 + 0.14 * (kg - 1) - S.ks) * min(1, dt * 2);\n  S.lean = S.wind * 0.22;\n  const vd = (S.wind \u003c 0 ? -2 : 2) + 6 * S.wind;\n  if (input.btnPressed && input.btnPressed[0]) {\n    const dir = rnd() \u003c 0.5 ? 1 : -1, o = addCraft(S, 0, \"launch\", dir > 0 ? 4 + rnd() * 10 : 50 + rnd() * 10, 0, dir);\n    Object.assign(o, { yc: 121 + o.Z * SE, X0: o.X, cable: true });\n  }\n\n  // The thermal's cloud builds for 26 s, then drifts off and thins as a new one starts.\n  for (const c of S.clouds) {\n    c.a += d;\n    c.g = 1 - exp(-c.a / 6.5);\n    if (c.det) {\n      c.x += vd * d;\n      c.al -= d / 8;\n    } else {\n      c.x += (colX(S, YB) - c.x) * min(1, d * 0.6);\n      if (c.a > 26) {\n        c.det = true;\n        S.clouds.push(newCloud(colX(S, YB), 0));\n      }\n    }\n  }\n  S.clouds = S.clouds.filter((c) => c.al > 0);\n  // Far cumulus and the shadows of clouds out of sight drift with the wind and come round again.\n  for (const f of S.far.concat(S.shad)) {\n    f.x += vd * f.m * d;\n    if ((f.x - 32) * vd > 0 && abs(f.x - 32) > f.e) f.x = 32 - sign(f.x - 32) * (f.e - 1);\n  }\n\n  // Gliders and buzzards: launched, gliding in, circling up, or gliding off.\n  for (const o of S.gl) {\n    const cx = colX(S, o.yc) + (o.kind ? 2 : 0);\n    if (o.st === \"launch\") {\n      o.s += d;\n      const v = 16 * min(1, o.s / 0.5);\n      o.pitch = o.cable ? 0.95 * sstep(0.5, 1.1, o.s) : max(0, o.pitch - d * 1.2);\n      o.X += o.dir * v * cos(o.pitch) * d;\n      o.yc -= v * sin(o.pitch) * d;\n      if (o.cable && o.yc \u003c 88) {\n        o.cable = false;\n        S.cable = { x: o.X + o.dir * 3, y: o.yc - o.Z * SE - 2.5, xw: o.X0 + o.dir * 58, t: 0 };\n      }\n      if (!o.cable && o.pitch \u003c= 0) {\n        o.st = \"climb\";\n        o.off = o.X - cx;\n      }\n    } else if (o.st === \"climb\") {\n      const th0 = o.th;\n      o.th += o.w * d;\n      o.off *= exp(-d * 0.35);\n      o.yc -= o.c0 * (1 + 0.45 * cos(o.th + 0.8)) * d;\n      o.bank += ((o.kind ? 0.62 : 0.5) - o.bank) * min(1, d * 2);\n      if (o.yc \u003c YB + (o.kind ? 18 : 8)) o.leave = true;\n      // Done, it straightens up the next time it flies across the panel.\n      if (o.leave && cos(th0) * cos(o.th) \u003c= 0) {\n        o.st = \"out\";\n        o.th = sin(o.th) > 0 ? PI / 2 : -PI / 2;\n        o.dir = -sign(sin(o.th));\n      }\n      o.X = cx + o.off + o.R * cos(o.th);\n      o.Z = o.R * sin(o.th);\n    } else {\n      o.X += o.dir * o.R * o.w * d;\n      o.yc += (o.st === \"out\" ? 0.8 : 0.4) * d;\n      o.bank *= exp(-d * 3);\n      if (o.st === \"in\" && o.dir * (o.X - cx) >= 0) o.st = \"climb\";\n      if (abs(o.X - 32) > 56) o.gone = true;\n    }\n  }\n  S.gl = S.gl.filter((o) => !o.gone);\n  // Too many: the highest leaves early. Too few: a newcomer glides in low.\n  for (const kind of [0, 1]) {\n    const act = S.gl.filter((o) => o.kind === kind && o.st !== \"out\");\n    const want = kind ? 2 : n;\n    S.spawn[kind] -= d;\n    if (act.length \u003c want && S.spawn[kind] \u003c= 0) {\n      const dir = rnd() \u003c 0.5 ? 1 : -1;\n      addCraft(S, kind, \"in\", 32 - dir * 46, (kind ? 84 : 86) + rnd() * 6, dir);\n      S.spawn[kind] = kind ? 1.5 + rnd() * 2 : 2.5;\n    } else if (act.length > want) {\n      const hi = act.filter((o) => o.st === \"climb\" && !o.leave).sort((p, q) => p.yc - q.yc)[0];\n      if (hi) hi.leave = true;\n    }\n  }\n  const cb = S.cable;\n  if (cb) {\n    cb.y += 9 * d;\n    if ((cb.t += d) > 2) S.cable = null;\n  }\n  // Thistledown rides the thermal up from the ploughed field.\n  for (const p of S.down) {\n    p.y -= p.v * d;\n    p.a += (1.6 / (1 + p.r * 0.3)) * d;\n    if (p.y \u003c YB + 1) {\n      p.y = YG - 3 + rnd() * 5;\n      p.r = 0.5 + rnd() * 5.5;\n    }\n  }\n}\n\n// A tapered stroke into the coverage buffer, growing the box drawn into.\nfunction stroke(S, ax, ay, bx, by, ra, rb) {\n  const { A, bb } = S, x0 = max(0, floor(min(ax, bx) - 2)), x1 = min(W - 1, Math.ceil(max(ax, bx) + 2));\n  const y0 = max(0, floor(min(ay, by) - 2)), y1 = min(H - 1, Math.ceil(max(ay, by) + 2));\n  if (x0 > x1 || y0 > y1) return;\n  bb[0] = min(bb[0], x0);\n  bb[1] = min(bb[1], y0);\n  bb[2] = max(bb[2], x1);\n  bb[3] = max(bb[3], y1);\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay, t = clamp((px * dx + py * dy) / ll, 0, 1), ex = px - dx * t, ey = py - dy * t;\n      const a = clamp(ra + (rb - ra) * t + 0.5 - sqrt(ex * ex + ey * ey), 0, 1), i = y * W + x;\n      if (a > A[i]) A[i] = a;\n    }\n}\nfunction flush(S, col, alpha) {\n  const { A, buf, bb } = S;\n  for (let y = bb[1]; y \u003c= bb[3]; y++)\n    for (let x = bb[0]; x \u003c= bb[2]; x++) {\n      const i = y * W + x, a = min(1, A[i] * alpha);\n      if (a \u003c= 0) continue;\n      A[i] = 0;\n      for (let c = 0; c \u003c 3; c++) buf[i * 3 + c] += (col[c] - buf[i * 3 + c]) * a;\n    }\n  bb[0] = bb[1] = 1e9;\n  bb[2] = bb[3] = -1;\n}\n\n// A craft in its own frame (heading, pitch, bank), seen from below and to the side.\nfunction craft(S, o, h) {\n  const cl = o.st === \"climb\", hx = cl ? -sin(o.th) : o.dir, hz = cl ? cos(o.th) : 0, cp = cos(o.pitch), sp = sin(o.pitch);\n  const F = [hx * cp, sp, hz * cp], U0 = [-hx * sp, cp, -hz * sp], R0 = [-hz, 0, hx], cb = cos(o.bank * 0.7), sb = sin(o.bank * 0.7);\n  const U = [U0[0] * cb + R0[0] * sb, U0[1] * cb, U0[2] * cb + R0[2] * sb], R = [R0[0] * cb - U0[0] * sb, -U0[1] * sb, R0[2] * cb - U0[2] * sb];\n  const sy = o.yc - o.Z * SE;\n  const P = (f, r, u) => [o.X + F[0] * f + R[0] * r + U[0] * u, sy - (F[1] * f + R[1] * r + U[1] * u) * BC - (F[2] * f + R[2] * r + U[2] * u) * BE];\n  for (const m of o.kind ? BUZZ : GLIDER) {\n    const a = P(m[0], m[1], m[2]), b = P(m[3], m[4], m[5]);\n    stroke(S, a[0], a[1], b[0], b[1], m[6], m[7]);\n  }\n  // From below we see the shaded underside; banked towards us, the sunlit top.\n  const top = sstep(-0.3, 0.4, -U[1] * BE + U[2] * BC);\n  if (o.kind) return flush(S, [mix(58, 86, top), mix(42, 62, top), mix(30, 40, top)], 1);\n  const f = 0.84 + 0.16 * top;\n  flush(S, mix3([236, 240, 246], [255, 226, 176], h).map((v) => v * f), 1.35);\n  // Once a turn the wing tilts to the sun and flashes.\n  const gx = mix(-0.35, -0.8, h), gz = mix(1, 0.6, h);\n  const gl = (sstep(0.92, 1, ((R0[0] * gx + R0[2] * gz) / sqrt(gx * gx + gz * gz)) * sign(o.bank || 1)) * abs(o.bank)) / 0.5;\n  if (gl \u003c 0.02) return;\n  const w = P(0.4, 3.5 * sign(o.bank || 1), 0.6);\n  for (let y = max(0, floor(w[1] - 5)); y \u003c= min(H - 1, w[1] + 5); y++)\n    for (let x = max(0, floor(w[0] - 5)); x \u003c= min(W - 1, w[0] + 5); x++) {\n      const ex = abs(x + 0.5 - w[0]), ey = abs(y + 0.5 - w[1]);\n      const v = gl * (exp(-sqrt(ex * ex + ey * ey) / 1.3) + 0.5 * exp(-min(ex, ey) * 2.5 - max(ex, ey) / 2.5)), q = (y * W + x) * 3;\n      S.buf[q] += 255 * v;\n      S.buf[q + 1] += 246 * v;\n      S.buf[q + 2] += mix(225, 170, h) * v;\n    }\n}\n\nfunction drawCloud(S, c, hw, ht, g, yb, al, haze) {\n  const { buf, t } = S, h = S.hour, B = [], lean = S.lean * 0.6;\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9;\n  for (const p of c.p) {\n    const gr = sstep(p.t0, p.t0 + 0.25, g);\n    if (gr \u003c= 0.02) continue;\n    const r = p.r * hw * gr * (1 + 0.05 * sin(t * 0.7 + p.ph)), bx = c.x + p.u * hw + lean * p.v * ht + 0.04 * hw * sin(t * 0.5 + p.ph);\n    const by = yb - p.v * ht - 0.03 * ht * sin(t * 0.4 + p.ph * 2);\n    B.push(bx, by, r);\n    x0 = min(x0, bx - r);\n    x1 = max(x1, bx + r);\n    y0 = min(y0, by - r);\n  }\n  const L = [mix(-0.45, -0.85, h), mix(-0.7, -0.28, h), 0.5], ll = sqrt(L[0] * L[0] + L[1] * L[1] + L[2] * L[2]);\n  const litC = mix3([252, 252, 250], [255, 214, 150], h);\n  const shC = mix3([150, 162, 192], [150, 124, 146], h).map((v) => v * (1 - 0.2 * g * (c.det ? 0.5 : 1)));\n  const baseC = mix3([126, 132, 152], [108, 90, 100], h).map((v) => v * mix(1, 0.78, g));\n  const hz = hazeOf(h);\n  for (let y = max(0, floor(y0 - 2)); y \u003c= min(H - 1, yb + 1); y++)\n    for (let x = max(0, floor(x0 - 2)); x \u003c= min(W - 1, x1 + 2); x++) {\n      const px = x + 0.5, py = y + 0.5;\n      // The normal blends the puffs nearby, weighted by how deep inside each the pixel is.\n      let best = -9, r = 1, sw = 0, nx = 0, ny = 0;\n      for (let i = 0; i \u003c B.length; i += 3) {\n        const dx = (px - B[i]) / B[i + 2], dy = (py - B[i + 1]) / B[i + 2], v = 1 - sqrt(dx * dx + dy * dy);\n        if (v \u003c -0.5) continue;\n        if (v > best) {\n          best = v;\n          r = B[i + 2];\n        }\n        const w = exp(7 * v);\n        sw += w;\n        nx += dx * w;\n        ny += dy * w;\n      }\n      if (best \u003c -0.4) continue;\n      // Cauliflower edges; a cloud that is dying frays from the edges in.\n      const n = noise(px * 0.32, py * 0.32 - t * 0.12, c.sd);\n      const a = clamp((best + 0.32 * (n - 0.5) - (1 - al) * 0.8) * r * 0.7, 0, 1) * clamp(yb + 0.7 - py + 0.6 * noise(px * 0.4, 1, c.sd), 0, 1) * sqrt(al);\n      if (a \u003c= 0) continue;\n      nx /= sw;\n      ny /= sw;\n      const nz = sqrt(max(0, 1 - nx * nx - ny * ny));\n      const lw = clamp(((nx * L[0] + ny * L[1] + nz * L[2]) / ll + 0.45) / 1.45 + 0.3 * (n - 0.5), 0, 1) * (0.55 + 0.45 * clamp((yb - py) / (0.45 * ht), 0, 1));\n      const bs = sstep(yb - 2.6, yb - 0.6, py), q = (y * W + x) * 3;\n      for (let k = 0; k \u003c 3; k++) buf[q + k] += (mix(mix(mix(shC[k], litC[k], lw), baseC[k], bs), hz[k], haze) - buf[q + k]) * a;\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (S.painted === undefined || abs(S.painted - S.hour) > 0.003) paint(S);\n  const h = S.hour, buf = S.buf;\n  buf.set(S.bg);\n\n  // Cloud shadows: each thermal cloud's, pushed off its field by the sun, and two from clouds out of sight.\n  const sh = [];\n  for (const c of S.clouds) {\n    const ru = (((8 + 18 * c.g) * S.ks * DSRC) / 64) * 0.95 * (c.det ? sqrt(c.al) : 1);\n    sh.push(((c.x - 29 + 30 * h) * DSRC) / 64, DSRC * (1.04 + 1.1 * h), ru, ru * 1.3 + 0.5, c.al * (0.55 + 0.45 * c.g));\n  }\n  for (const s of S.shad) sh.push(((s.x - 32) * s.D) / 64, s.D, (s.r * s.D) / 64, s.rd, 1);\n  const sc = [0.46, 0.5, 0.62];\n  for (let p = FY * W; p \u003c N; p++) {\n    let m = 0;\n    for (let i = 0; i \u003c sh.length; i += 5) {\n      const du = (S.fu[p] - sh[i]) / sh[i + 2], dv = (S.fd[p] - sh[i + 1]) / sh[i + 3], q = du * du + dv * dv;\n      if (q \u003c 2.2) m = max(m, sstep(1.05, 0.6, sqrt(q) + 0.35 * (S.fn[p] - 0.5)) * sh[i + 4]);\n    }\n    if (m > 0) for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] *= mix(1, sc[c], m);\n  }\n\n  // Far cumulus along the horizon, then the clouds the thermal builds.\n  for (const f of S.far) drawCloud(S, f, f.hw, f.ht, 1, f.yb, 0.9, 0.5);\n  for (const c of S.clouds) drawCloud(S, c, (8 + 18 * c.g) * S.ks, (6 + 26 * c.g) * S.ks, c.g, YB, c.det ? c.al : 1, 0);\n\n  // Thistledown catching the sun as it rises.\n  const dc = mix3([240, 240, 228], [255, 222, 160], h), nd = 26 + round((10 * (S.ks - 1)) / 0.14);\n  for (let i = 0; i \u003c nd; i++) {\n    const p = S.down[i], x = round(colX(S, p.y) + p.r * cos(p.a) + 0.8 * sin(S.t * 1.7 + p.tw) - 0.5), y = round(p.y + p.r * sin(p.a) * SE - 0.5);\n    if (x \u003c 0 || x >= W) continue;\n    const a = (0.45 + 0.4 * sin(S.t * 3 + p.tw * 5)) * sstep(YB, YB + 8, p.y) * sstep(YG + 2, YG - 6, p.y);\n    for (let k = 0, q = (y * W + x) * 3; k \u003c 3; k++) buf[q + k] += (dc[k] - buf[q + k]) * a;\n  }\n\n  // The winch cable, and the one that falls on its red parachute after release.\n  const dark = [36, 34, 38];\n  for (const o of S.gl)\n    if (o.cable) {\n      stroke(S, o.X + o.dir * 3 * cos(o.pitch), o.yc - o.Z * SE - 3 * sin(o.pitch), o.X0 + o.dir * 58, 118, 0.18, 0.18);\n      flush(S, dark, 0.75);\n    }\n  const cb = S.cable;\n  if (cb) {\n    stroke(S, cb.x, cb.y, cb.xw, 118, 0.18, 0.18);\n    flush(S, dark, 0.75 * (1 - cb.t / 2));\n    stroke(S, cb.x, cb.y - 1, cb.x, cb.y - 1, 0.7, 0.7);\n    flush(S, [230, 50, 40], 1 - cb.t / 2);\n  }\n  // Gliders and buzzards, the far side of their circles first.\n  for (const o of S.gl.slice().sort((p, q) => p.Z - q.Z)) craft(S, o, h);\n\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, min(255, buf[p * 3]) | 0, min(255, buf[p * 3 + 1]) | 0, min(255, buf[p * 3 + 2]) | 0);\n}\n","layer":{"id":"layer-thermal","type":"code","name":"thermal","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Thermal\n// Family:  flight\n// Idea:    A white sailplane corkscrews up a summer thermal off a dark ploughed field with two buzzards and rising thistledown, until at the base of the cumulus the thermal is building it straightens and glides off, and another glider joins low down.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after thermal soaring under fair-weather cumulus over farmland\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Hour=0..1, Speed=0.2..3, Gliders=1..4, Wind=-1..1\n//\n// Knob 1: Hour. Bright midday at 0, to golden late afternoon at 1: the sun comes in low from the left, the haze goes amber and hedges and trees throw long shadows.\n// Knob 2: Speed. At 2 a turn takes six seconds, the climb to the cloud base about twenty, and each cloud builds for 26 s before it drifts off. At 0.2 all of it runs ten times slower.\n// Knob 3: Gliders. One to four gliders stacked in the thermal. A day good enough for four also builds a bigger cloud with a darker base and sends more thistledown up.\n// Knob 4: Wind. The thermal and its cloud lean downwind, so the turns drift as the gliders climb, and cloud shadows and far cumulus travel faster. Near 0 it is almost calm.\n// Buttons: K1 tap winch-launches a glider from the field; it rears up on the cable, lets go and turns into the thermal.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, sin, cos, abs, sqrt, exp, floor, round, pow, sign, PI } = Math;\nconst TAU = 2 * PI;\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sstep = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];\nconst rnd = () => Math.random();\n// Rows: horizon, first field row, cloud base, where the thermal leaves the ground.\nconst [HOR, FY, YB, YG] = [97, 100, 36, 116];\n// The ploughed field the thermal comes off: its column and its distance.\nconst [SRCX, DSRC] = [29, 9.6];\n// We look up a little, so a level circle is a thin ellipse; the craft are drawn flatter so a banked wing does not stand on end.\nconst SE = sin(0.3);\nconst [BE, BC] = [sin(0.1), cos(0.1)];\n\nconst hash = (x, y, s) => {\n  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n};\nfunction noise(x, y, s) {\n  const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, u = fx * fx * (3 - 2 * fx), v = fy * fy * (3 - 2 * fy);\n  const a = hash(ix, iy, s), b = hash(ix + 1, iy, s), c = hash(ix, iy + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(ix + 1, iy + 1, s)) * u * v;\n}\nconst fbm = (x, y, s) => 0.55 * noise(x, y, s) + 0.3 * noise(x * 2.1, y * 2.1, s + 7) + 0.15 * noise(x * 4.3, y * 4.3, s + 13);\n\n// Pasture, beans, stubble, wheat, hay and plough in midday sun; 1 marks rows running away from us.\nconst CROP = [[70, 150, 45, 0], [38, 106, 36, 1], [216, 184, 94, 1], [198, 160, 66, 0], [142, 178, 74, 0], [96, 62, 40, 1]];\nconst PICK = [0, 0, 0, 1, 1, 2, 2, 2, 3, 3, 4, 4];\n// Tapered strokes in the craft's axes: forward, right, up, twice, then two radii.\nconst GLIDER = [[3.6, 0, -0.1, -4.8, 0, 0.15, 0.85, 0.45], [0.6, 0, 0.25, 0.25, -9, 0.85, 0.75, 0.45], [0.6, 0, 0.25, 0.25, 9, 0.85, 0.75, 0.45], [-4.2, 0, 0.1, -4.9, 0, 2.4, 0.55, 0.45], [-4.9, -2.6, 2.4, -4.9, 2.6, 2.4, 0.45, 0.45]];\nconst BUZZ = [[1.3, 0, 0, -1.3, 0, 0, 0.6, 0.45], [0.2, 0, 0.1, -0.3, -3.7, 0.75, 0.8, 0.45], [0.2, 0, 0.1, -0.3, 3.7, 0.75, 0.8, 0.45], [-1.2, 0, 0, -2.5, 0, 0.1, 0.45, 0.65]];\n\n// A cumulus as puffs over a flat base: each puff's place (u across, v up), its radius r and when in its growth it appears.\nfunction puffs() {\n  const L = [];\n  const add = (u, v, r, t0) => L.push({ u: u + (rnd() - 0.5) * 0.14, v: v + (rnd() - 0.5) * 0.08, r: r * (0.88 + 0.24 * rnd()), t0, ph: rnd() * TAU });\n  for (let i = 0; i \u003c 5; i++) add(-0.76 + i * 0.38, 0.2, 0.34, i === 2 ? 0 : 0.03 + 0.12 * rnd());\n  for (let i = 0; i \u003c 4; i++) add(-0.5 + i * 0.33, 0.45, 0.33, 0.08 + 0.17 * rnd());\n  for (let i = 0; i \u003c 3; i++) add(-0.3 + i * 0.3, 0.68, 0.3, 0.3 + 0.2 * rnd());\n  for (let i = 0; i \u003c 2; i++) add((rnd() - 0.5) * 0.4, 0.86, 0.26, 0.55 + 0.15 * rnd());\n  return L;\n}\nconst newCloud = (x, a) => ({ x, a, g: 0, al: 1, det: false, p: puffs(), sd: floor(rnd() * 999) });\n\n// Fields lie in strips at distance D (row = HOR + 180 / D), each cut into fields across.\nfunction buildFields(S) {\n  const strips = [], trees = [], us = ((SRCX - 32) * DSRC) / 64, hw = (11 * DSRC) / 64;\n  for (let D = 5.6; D \u003c 66; ) {\n    const D2 = D * (1.22 + 0.12 * rnd());\n    const wid = () => ((12 + 18 * rnd()) * pow(6 / D, 0.35) * D) / 64;\n    let b = [];\n    for (let u = -0.62 * D2 - rnd() * wid(); u \u003c 0.62 * D2 + 0.3; u += wid()) b.push(u);\n    const src = D \u003c= DSRC && DSRC \u003c D2;\n    if (src) {\n      b = b.filter((u) => u \u003c us - hw - 0.3 || u > us + hw + 0.3);\n      b.push(us - hw, us + hw);\n      b.sort((p, q) => p - q);\n    }\n    const t = [];\n    for (let j = 0; j \u003c b.length - 1; j++) {\n      let k;\n      do k = PICK[floor(rnd() * PICK.length)];\n      while (j && k === t[j - 1]);\n      t.push(k);\n    }\n    if (src) t[b.indexOf(us - hw)] = 5;\n    strips.push({ d0: D, d1: D2, b, t, hh: 0.12 + 0.08 * rnd(), i: strips.length });\n    // Trees in the hedge along each strip's near edge, and at some corners.\n    for (let j = 0; j \u003c 2; j++) if (rnd() \u003c 0.6) trees.push({ u: (rnd() - 0.5) * 1.1 * D, D: D + 0.05, rc: 0.2 + 0.14 * rnd() });\n    for (let j = 1; j \u003c b.length - 1; j++) if (rnd() \u003c 0.2) trees.push({ u: b[j], D: D + 0.05, rc: 0.2 + 0.12 * rnd() });\n    D = D2;\n  }\n  for (const tr of trees) tr.hc = tr.rc * 1.5 + 0.15;\n  S.strips = strips;\n  S.trees = trees.sort((p, q) => q.D - p.D);\n}\n\nexport function setup(params) {\n  const F = () => new Float32Array(N);\n  const S = { t: 0, bg: new Float32Array(N * 3), buf: new Float32Array(N * 3), A: F(), fu: F(), fd: F(), fn: F(), gl: [], down: [], clouds: [], far: [], spawn: [0, 0], cable: null, bb: [1e9, 1e9, -1, -1] };\n  buildFields(S);\n  for (let y = FY; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      S.fd[p] = 180 / (y + 0.5 - HOR);\n      S.fu[p] = ((x + 0.5 - 32) * S.fd[p]) / 64;\n      S.fn[p] = fbm(x * 0.15, y * 0.3, 11);\n    }\n  for (let i = 0; i \u003c 3; i++) S.far.push({ x: 8 + i * 24 + rnd() * 10, yb: 87 - i * 5 - rnd() * 2, hw: 5 + 2.5 * i + rnd() * 2, ht: 3 + i + rnd() * 1.5, p: puffs(), sd: floor(rnd() * 999), m: 0.35, e: 44 });\n  S.shad = [{ x: 6, D: 7.4, r: 19, rd: 2.6, m: 0.9, e: 62 }, { x: 50, D: 16, r: 15, rd: 5.5, m: 0.9, e: 60 }];\n  params.s = S;\n}\n\n// The thermal's centre at a row: it leans downwind with height and wanders a little.\nconst colX = (S, y) => SRCX + S.lean * (YG - y) + 1.5 * sin(S.t * 0.21);\nconst sunLight = (h, k = mix(1, 0.9, h)) => [mix(1, 1.16, h) * k, mix(1, 0.86, h) * k, mix(1, 0.56, h) * k];\nconst SHADE = [0.42, 0.47, 0.6];\nconst hazeOf = (h) => mix3([176, 202, 222], [236, 186, 122], h);\nfunction skyAt(x, y, h) {\n  const top = mix3([14, 50, 150], [30, 52, 128], h), mid = mix3([44, 108, 206], [70, 104, 178], h), t = y / 96;\n  const c = t \u003c 0.66 ? mix3(top, mid, sstep(0, 0.66, t)) : mix3(mid, hazeOf(h), sstep(0.66, 1, t));\n  const gw = pow(h, 1.5) * exp(-x / 24) * exp(-abs(y - 78) / 36);\n  return [c[0] + 110 * gw, c[1] + 64 * gw, c[2] + 14 * gw];\n}\n\n// The ground seen at a point of the panel: hedges, fields, their shadows, and the haze.\nfunction fieldAt(S, x, y, sun, Lsh, haze) {\n  const D = 180 / (y - HOR), u = ((x - 32) * D) / 64, st = S.strips;\n  let k = 0;\n  while (k \u003c st.length - 1 && D >= st[k].d1) k++;\n  let alb = null;\n  let lit = 1;\n  // The hedge on a strip's near edge hides the ground just behind it.\n  for (let j = k; j >= 0 && st[j].d0 > D * 0.8; j--) {\n    const s = st[j];\n    if (y >= HOR + (180 - 64 * s.hh * (0.7 + 0.6 * noise(u * 2.6, s.i * 9, 3))) / s.d0) {\n      const n = 0.8 + 0.4 * noise(u * 6, y, 5);\n      alb = [34 * n, 78 * n, 30 * n];\n      lit = 0.85;\n      break;\n    }\n  }\n  if (!alb) {\n    const s = st[k], b = s.b;\n    let j = 0;\n    while (j \u003c b.length - 2 && u >= b[j + 1]) j++;\n    const hwu = ((0.8 * pow(6 / D, 0.4) + 0.25) * D) / 64;\n    if (abs(u - b[j]) \u003c hwu || abs(u - b[j + 1]) \u003c hwu) {\n      alb = [30, 70, 28];\n      lit = 0.7;\n    } else {\n      const c = CROP[s.t[j]], tx = c[3] ? 0.97 + 0.17 * sin(u * TAU * 6.5) : 0.86 + 0.28 * fbm(u * 2.5, D * 0.7, s.t[j] + j);\n      alb = [c[0] * tx, c[1] * tx, c[2] * tx];\n      // Shadows of the hedges left and in front, and of the trees.\n      if (u - b[j] \u003c s.hh * Lsh * 0.85 || D - s.d0 \u003c s.hh * Lsh * 0.4) lit = 0;\n      else\n        for (const tr of S.trees) {\n          const du = u - tr.u - tr.hc * Lsh * 0.85, dd = D - tr.D - tr.hc * Lsh * 0.45;\n          if (abs(dd) > 3 + Lsh) continue;\n          const al = (du * 0.86 + dd * 0.5) / (tr.rc * (1 + 0.55 * Lsh)), pe = (-du * 0.5 + dd * 0.86) / (tr.rc * 1.8);\n          if (al * al + pe * pe \u003c 1) {\n            lit = 0;\n            break;\n          }\n        }\n    }\n  }\n  const hz = 0.55 * sstep(5, 75, D);\n  return [0, 1, 2].map((c) => mix(alb[c] * mix(SHADE[c], sun[c], lit), haze[c], hz));\n}\n\nfunction paint(S) {\n  const h = S.hour, sun = sunLight(h), haze = hazeOf(h), Lsh = 0.35 + 4.2 * pow(h, 1.6), bg = S.bg, ridgeF = mix3(haze, [64, 96, 116], 0.38);\n  const ridgeN = mix3(haze, [52 * sun[0], 98 * sun[1], 54 * sun[2]], 0.58);\n  for (let x = 0; x \u003c W; x++) {\n    const farT = 83 + 5 * fbm(x * 0.045, 1.3, 21), nearT = 91.5 + 3 * fbm(x * 0.09, 4.1, 22) - 1.5 * sstep(0.55, 0.8, noise(x * 0.5, 0, 23));\n    for (let y = 0; y \u003c H; y++) {\n      const q = (y * W + x) * 3;\n      bg[q] = bg[q + 1] = bg[q + 2] = 0;\n      // The open sky is smooth enough for one sample.\n      for (let k = y + 1 \u003c farT ? 3 : 0; k \u003c 4; k++) {\n        const xs = x + 0.25 + 0.5 * (k & 1), ys = y + 0.25 + 0.5 * (k >> 1);\n        let c;\n        if (ys >= FY) c = fieldAt(S, xs, ys, sun, Lsh, haze);\n        else if (ys >= nearT) c = ridgeN.map((v) => v * (0.84 + 0.3 * fbm(x * 0.35, ys * 0.9, 24)));\n        else if (ys >= farT) c = ridgeF;\n        else c = skyAt(xs, ys, h);\n        for (let i = 0; i \u003c 3; i++) bg[q + i] += y + 1 \u003c farT ? c[i] : c[i] / 4;\n      }\n    }\n  }\n  // Tree crowns, far ones first, lit from the sun's side.\n  for (const tr of S.trees) {\n    const cx = 32 + (64 * tr.u) / tr.D, cy = HOR + (180 - 64 * tr.hc) / tr.D, R = (64 * tr.rc) / tr.D, hz = 0.55 * sstep(5, 75, tr.D);\n    for (let y = max(FY - 4, floor(cy - R - 1)); y \u003c= min(H - 1, cy + R + 1); y++)\n      for (let x = max(0, floor(cx - R - 1)); x \u003c= min(W - 1, cx + R + 1); x++) {\n        const dx = (x + 0.5 - cx) / R, dy = (y + 0.5 - cy) / R, a = clamp((1 - sqrt(dx * dx + dy * dy)) * R + 0.5, 0, 1);\n        if (a \u003c= 0) continue;\n        const l = clamp(0.45 - 0.7 * dx - 0.4 * dy, 0, 1), n = 0.85 + 0.3 * hash(x, y, 31), q = (y * W + x) * 3;\n        [40, 94, 38].forEach((al, c) => (bg[q + c] += (mix(al * n * mix(SHADE[c], sun[c] * 1.1, l), haze[c], hz) - bg[q + c]) * a));\n      }\n  }\n  S.painted = h;\n}\n\nfunction addCraft(S, kind, st, X, yc, dir) {\n  const R = kind ? 5.5 + rnd() : 11.5 + rnd();\n  const o = { kind, st, X, yc, Z: -dir * R, R, dir, th: (-dir * PI) / 2, bank: st === \"climb\" ? 0.5 + 0.12 * kind : 0, pitch: 0, off: 0, s: 0, w: kind ? 1.75 + 0.3 * rnd() : 1.05, c0: kind ? 1.9 : 2.4 };\n  S.gl.push(o);\n  return o;\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.hour = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2, kg = clamp(k[2], 1, 4), n = (S.n = round(kg)), wind = clamp(k[3], -1, 1);\n  if (!S.started) {\n    S.started = true;\n    S.wind = wind;\n    S.ks = 1 + 0.14 * (kg - 1);\n    S.lean = wind * 0.22;\n    for (let i = 0; i \u003c n; i++) addCraft(S, 0, \"climb\", 0, n === 1 ? 72 : 82 - (i * 36) / (n - 1), 1).th = rnd() * TAU;\n    for (const y of [86, 62]) addCraft(S, 1, \"climb\", 0, y, 1).th = rnd() * TAU;\n    for (let i = 0; i \u003c 56; i++) S.down.push({ y: YB + rnd() * (YG - YB), a: rnd() * TAU, r: 0.5 + rnd() * 5.5, v: 3 + rnd() * 3, tw: rnd() * TAU });\n    // The cloud of the last thermal is drifting off as the next one starts.\n    S.clouds.push(Object.assign(newCloud(colX(S, YB) + (wind \u003c 0 ? -24 : 24), 26), { det: true, al: 0.9 }), newCloud(colX(S, YB), 1.5));\n  }\n  const d = dt * tempo;\n  S.t += d;\n  S.wind += (wind - S.wind) * min(1, dt * 2);\n  S.ks += (1 + 0.14 * (kg - 1) - S.ks) * min(1, dt * 2);\n  S.lean = S.wind * 0.22;\n  const vd = (S.wind \u003c 0 ? -2 : 2) + 6 * S.wind;\n  if (input.btnPressed && input.btnPressed[0]) {\n    const dir = rnd() \u003c 0.5 ? 1 : -1, o = addCraft(S, 0, \"launch\", dir > 0 ? 4 + rnd() * 10 : 50 + rnd() * 10, 0, dir);\n    Object.assign(o, { yc: 121 + o.Z * SE, X0: o.X, cable: true });\n  }\n\n  // The thermal's cloud builds for 26 s, then drifts off and thins as a new one starts.\n  for (const c of S.clouds) {\n    c.a += d;\n    c.g = 1 - exp(-c.a / 6.5);\n    if (c.det) {\n      c.x += vd * d;\n      c.al -= d / 8;\n    } else {\n      c.x += (colX(S, YB) - c.x) * min(1, d * 0.6);\n      if (c.a > 26) {\n        c.det = true;\n        S.clouds.push(newCloud(colX(S, YB), 0));\n      }\n    }\n  }\n  S.clouds = S.clouds.filter((c) => c.al > 0);\n  // Far cumulus and the shadows of clouds out of sight drift with the wind and come round again.\n  for (const f of S.far.concat(S.shad)) {\n    f.x += vd * f.m * d;\n    if ((f.x - 32) * vd > 0 && abs(f.x - 32) > f.e) f.x = 32 - sign(f.x - 32) * (f.e - 1);\n  }\n\n  // Gliders and buzzards: launched, gliding in, circling up, or gliding off.\n  for (const o of S.gl) {\n    const cx = colX(S, o.yc) + (o.kind ? 2 : 0);\n    if (o.st === \"launch\") {\n      o.s += d;\n      const v = 16 * min(1, o.s / 0.5);\n      o.pitch = o.cable ? 0.95 * sstep(0.5, 1.1, o.s) : max(0, o.pitch - d * 1.2);\n      o.X += o.dir * v * cos(o.pitch) * d;\n      o.yc -= v * sin(o.pitch) * d;\n      if (o.cable && o.yc \u003c 88) {\n        o.cable = false;\n        S.cable = { x: o.X + o.dir * 3, y: o.yc - o.Z * SE - 2.5, xw: o.X0 + o.dir * 58, t: 0 };\n      }\n      if (!o.cable && o.pitch \u003c= 0) {\n        o.st = \"climb\";\n        o.off = o.X - cx;\n      }\n    } else if (o.st === \"climb\") {\n      const th0 = o.th;\n      o.th += o.w * d;\n      o.off *= exp(-d * 0.35);\n      o.yc -= o.c0 * (1 + 0.45 * cos(o.th + 0.8)) * d;\n      o.bank += ((o.kind ? 0.62 : 0.5) - o.bank) * min(1, d * 2);\n      if (o.yc \u003c YB + (o.kind ? 18 : 8)) o.leave = true;\n      // Done, it straightens up the next time it flies across the panel.\n      if (o.leave && cos(th0) * cos(o.th) \u003c= 0) {\n        o.st = \"out\";\n        o.th = sin(o.th) > 0 ? PI / 2 : -PI / 2;\n        o.dir = -sign(sin(o.th));\n      }\n      o.X = cx + o.off + o.R * cos(o.th);\n      o.Z = o.R * sin(o.th);\n    } else {\n      o.X += o.dir * o.R * o.w * d;\n      o.yc += (o.st === \"out\" ? 0.8 : 0.4) * d;\n      o.bank *= exp(-d * 3);\n      if (o.st === \"in\" && o.dir * (o.X - cx) >= 0) o.st = \"climb\";\n      if (abs(o.X - 32) > 56) o.gone = true;\n    }\n  }\n  S.gl = S.gl.filter((o) => !o.gone);\n  // Too many: the highest leaves early. Too few: a newcomer glides in low.\n  for (const kind of [0, 1]) {\n    const act = S.gl.filter((o) => o.kind === kind && o.st !== \"out\");\n    const want = kind ? 2 : n;\n    S.spawn[kind] -= d;\n    if (act.length \u003c want && S.spawn[kind] \u003c= 0) {\n      const dir = rnd() \u003c 0.5 ? 1 : -1;\n      addCraft(S, kind, \"in\", 32 - dir * 46, (kind ? 84 : 86) + rnd() * 6, dir);\n      S.spawn[kind] = kind ? 1.5 + rnd() * 2 : 2.5;\n    } else if (act.length > want) {\n      const hi = act.filter((o) => o.st === \"climb\" && !o.leave).sort((p, q) => p.yc - q.yc)[0];\n      if (hi) hi.leave = true;\n    }\n  }\n  const cb = S.cable;\n  if (cb) {\n    cb.y += 9 * d;\n    if ((cb.t += d) > 2) S.cable = null;\n  }\n  // Thistledown rides the thermal up from the ploughed field.\n  for (const p of S.down) {\n    p.y -= p.v * d;\n    p.a += (1.6 / (1 + p.r * 0.3)) * d;\n    if (p.y \u003c YB + 1) {\n      p.y = YG - 3 + rnd() * 5;\n      p.r = 0.5 + rnd() * 5.5;\n    }\n  }\n}\n\n// A tapered stroke into the coverage buffer, growing the box drawn into.\nfunction stroke(S, ax, ay, bx, by, ra, rb) {\n  const { A, bb } = S, x0 = max(0, floor(min(ax, bx) - 2)), x1 = min(W - 1, Math.ceil(max(ax, bx) + 2));\n  const y0 = max(0, floor(min(ay, by) - 2)), y1 = min(H - 1, Math.ceil(max(ay, by) + 2));\n  if (x0 > x1 || y0 > y1) return;\n  bb[0] = min(bb[0], x0);\n  bb[1] = min(bb[1], y0);\n  bb[2] = max(bb[2], x1);\n  bb[3] = max(bb[3], y1);\n  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1;\n  for (let y = y0; y \u003c= y1; y++)\n    for (let x = x0; x \u003c= x1; x++) {\n      const px = x + 0.5 - ax, py = y + 0.5 - ay, t = clamp((px * dx + py * dy) / ll, 0, 1), ex = px - dx * t, ey = py - dy * t;\n      const a = clamp(ra + (rb - ra) * t + 0.5 - sqrt(ex * ex + ey * ey), 0, 1), i = y * W + x;\n      if (a > A[i]) A[i] = a;\n    }\n}\nfunction flush(S, col, alpha) {\n  const { A, buf, bb } = S;\n  for (let y = bb[1]; y \u003c= bb[3]; y++)\n    for (let x = bb[0]; x \u003c= bb[2]; x++) {\n      const i = y * W + x, a = min(1, A[i] * alpha);\n      if (a \u003c= 0) continue;\n      A[i] = 0;\n      for (let c = 0; c \u003c 3; c++) buf[i * 3 + c] += (col[c] - buf[i * 3 + c]) * a;\n    }\n  bb[0] = bb[1] = 1e9;\n  bb[2] = bb[3] = -1;\n}\n\n// A craft in its own frame (heading, pitch, bank), seen from below and to the side.\nfunction craft(S, o, h) {\n  const cl = o.st === \"climb\", hx = cl ? -sin(o.th) : o.dir, hz = cl ? cos(o.th) : 0, cp = cos(o.pitch), sp = sin(o.pitch);\n  const F = [hx * cp, sp, hz * cp], U0 = [-hx * sp, cp, -hz * sp], R0 = [-hz, 0, hx], cb = cos(o.bank * 0.7), sb = sin(o.bank * 0.7);\n  const U = [U0[0] * cb + R0[0] * sb, U0[1] * cb, U0[2] * cb + R0[2] * sb], R = [R0[0] * cb - U0[0] * sb, -U0[1] * sb, R0[2] * cb - U0[2] * sb];\n  const sy = o.yc - o.Z * SE;\n  const P = (f, r, u) => [o.X + F[0] * f + R[0] * r + U[0] * u, sy - (F[1] * f + R[1] * r + U[1] * u) * BC - (F[2] * f + R[2] * r + U[2] * u) * BE];\n  for (const m of o.kind ? BUZZ : GLIDER) {\n    const a = P(m[0], m[1], m[2]), b = P(m[3], m[4], m[5]);\n    stroke(S, a[0], a[1], b[0], b[1], m[6], m[7]);\n  }\n  // From below we see the shaded underside; banked towards us, the sunlit top.\n  const top = sstep(-0.3, 0.4, -U[1] * BE + U[2] * BC);\n  if (o.kind) return flush(S, [mix(58, 86, top), mix(42, 62, top), mix(30, 40, top)], 1);\n  const f = 0.84 + 0.16 * top;\n  flush(S, mix3([236, 240, 246], [255, 226, 176], h).map((v) => v * f), 1.35);\n  // Once a turn the wing tilts to the sun and flashes.\n  const gx = mix(-0.35, -0.8, h), gz = mix(1, 0.6, h);\n  const gl = (sstep(0.92, 1, ((R0[0] * gx + R0[2] * gz) / sqrt(gx * gx + gz * gz)) * sign(o.bank || 1)) * abs(o.bank)) / 0.5;\n  if (gl \u003c 0.02) return;\n  const w = P(0.4, 3.5 * sign(o.bank || 1), 0.6);\n  for (let y = max(0, floor(w[1] - 5)); y \u003c= min(H - 1, w[1] + 5); y++)\n    for (let x = max(0, floor(w[0] - 5)); x \u003c= min(W - 1, w[0] + 5); x++) {\n      const ex = abs(x + 0.5 - w[0]), ey = abs(y + 0.5 - w[1]);\n      const v = gl * (exp(-sqrt(ex * ex + ey * ey) / 1.3) + 0.5 * exp(-min(ex, ey) * 2.5 - max(ex, ey) / 2.5)), q = (y * W + x) * 3;\n      S.buf[q] += 255 * v;\n      S.buf[q + 1] += 246 * v;\n      S.buf[q + 2] += mix(225, 170, h) * v;\n    }\n}\n\nfunction drawCloud(S, c, hw, ht, g, yb, al, haze) {\n  const { buf, t } = S, h = S.hour, B = [], lean = S.lean * 0.6;\n  let x0 = 1e9, x1 = -1e9, y0 = 1e9;\n  for (const p of c.p) {\n    const gr = sstep(p.t0, p.t0 + 0.25, g);\n    if (gr \u003c= 0.02) continue;\n    const r = p.r * hw * gr * (1 + 0.05 * sin(t * 0.7 + p.ph)), bx = c.x + p.u * hw + lean * p.v * ht + 0.04 * hw * sin(t * 0.5 + p.ph);\n    const by = yb - p.v * ht - 0.03 * ht * sin(t * 0.4 + p.ph * 2);\n    B.push(bx, by, r);\n    x0 = min(x0, bx - r);\n    x1 = max(x1, bx + r);\n    y0 = min(y0, by - r);\n  }\n  const L = [mix(-0.45, -0.85, h), mix(-0.7, -0.28, h), 0.5], ll = sqrt(L[0] * L[0] + L[1] * L[1] + L[2] * L[2]);\n  const litC = mix3([252, 252, 250], [255, 214, 150], h);\n  const shC = mix3([150, 162, 192], [150, 124, 146], h).map((v) => v * (1 - 0.2 * g * (c.det ? 0.5 : 1)));\n  const baseC = mix3([126, 132, 152], [108, 90, 100], h).map((v) => v * mix(1, 0.78, g));\n  const hz = hazeOf(h);\n  for (let y = max(0, floor(y0 - 2)); y \u003c= min(H - 1, yb + 1); y++)\n    for (let x = max(0, floor(x0 - 2)); x \u003c= min(W - 1, x1 + 2); x++) {\n      const px = x + 0.5, py = y + 0.5;\n      // The normal blends the puffs nearby, weighted by how deep inside each the pixel is.\n      let best = -9, r = 1, sw = 0, nx = 0, ny = 0;\n      for (let i = 0; i \u003c B.length; i += 3) {\n        const dx = (px - B[i]) / B[i + 2], dy = (py - B[i + 1]) / B[i + 2], v = 1 - sqrt(dx * dx + dy * dy);\n        if (v \u003c -0.5) continue;\n        if (v > best) {\n          best = v;\n          r = B[i + 2];\n        }\n        const w = exp(7 * v);\n        sw += w;\n        nx += dx * w;\n        ny += dy * w;\n      }\n      if (best \u003c -0.4) continue;\n      // Cauliflower edges; a cloud that is dying frays from the edges in.\n      const n = noise(px * 0.32, py * 0.32 - t * 0.12, c.sd);\n      const a = clamp((best + 0.32 * (n - 0.5) - (1 - al) * 0.8) * r * 0.7, 0, 1) * clamp(yb + 0.7 - py + 0.6 * noise(px * 0.4, 1, c.sd), 0, 1) * sqrt(al);\n      if (a \u003c= 0) continue;\n      nx /= sw;\n      ny /= sw;\n      const nz = sqrt(max(0, 1 - nx * nx - ny * ny));\n      const lw = clamp(((nx * L[0] + ny * L[1] + nz * L[2]) / ll + 0.45) / 1.45 + 0.3 * (n - 0.5), 0, 1) * (0.55 + 0.45 * clamp((yb - py) / (0.45 * ht), 0, 1));\n      const bs = sstep(yb - 2.6, yb - 0.6, py), q = (y * W + x) * 3;\n      for (let k = 0; k \u003c 3; k++) buf[q + k] += (mix(mix(mix(shC[k], litC[k], lw), baseC[k], bs), hz[k], haze) - buf[q + k]) * a;\n    }\n}\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  if (S.painted === undefined || abs(S.painted - S.hour) > 0.003) paint(S);\n  const h = S.hour, buf = S.buf;\n  buf.set(S.bg);\n\n  // Cloud shadows: each thermal cloud's, pushed off its field by the sun, and two from clouds out of sight.\n  const sh = [];\n  for (const c of S.clouds) {\n    const ru = (((8 + 18 * c.g) * S.ks * DSRC) / 64) * 0.95 * (c.det ? sqrt(c.al) : 1);\n    sh.push(((c.x - 29 + 30 * h) * DSRC) / 64, DSRC * (1.04 + 1.1 * h), ru, ru * 1.3 + 0.5, c.al * (0.55 + 0.45 * c.g));\n  }\n  for (const s of S.shad) sh.push(((s.x - 32) * s.D) / 64, s.D, (s.r * s.D) / 64, s.rd, 1);\n  const sc = [0.46, 0.5, 0.62];\n  for (let p = FY * W; p \u003c N; p++) {\n    let m = 0;\n    for (let i = 0; i \u003c sh.length; i += 5) {\n      const du = (S.fu[p] - sh[i]) / sh[i + 2], dv = (S.fd[p] - sh[i + 1]) / sh[i + 3], q = du * du + dv * dv;\n      if (q \u003c 2.2) m = max(m, sstep(1.05, 0.6, sqrt(q) + 0.35 * (S.fn[p] - 0.5)) * sh[i + 4]);\n    }\n    if (m > 0) for (let c = 0; c \u003c 3; c++) buf[p * 3 + c] *= mix(1, sc[c], m);\n  }\n\n  // Far cumulus along the horizon, then the clouds the thermal builds.\n  for (const f of S.far) drawCloud(S, f, f.hw, f.ht, 1, f.yb, 0.9, 0.5);\n  for (const c of S.clouds) drawCloud(S, c, (8 + 18 * c.g) * S.ks, (6 + 26 * c.g) * S.ks, c.g, YB, c.det ? c.al : 1, 0);\n\n  // Thistledown catching the sun as it rises.\n  const dc = mix3([240, 240, 228], [255, 222, 160], h), nd = 26 + round((10 * (S.ks - 1)) / 0.14);\n  for (let i = 0; i \u003c nd; i++) {\n    const p = S.down[i], x = round(colX(S, p.y) + p.r * cos(p.a) + 0.8 * sin(S.t * 1.7 + p.tw) - 0.5), y = round(p.y + p.r * sin(p.a) * SE - 0.5);\n    if (x \u003c 0 || x >= W) continue;\n    const a = (0.45 + 0.4 * sin(S.t * 3 + p.tw * 5)) * sstep(YB, YB + 8, p.y) * sstep(YG + 2, YG - 6, p.y);\n    for (let k = 0, q = (y * W + x) * 3; k \u003c 3; k++) buf[q + k] += (dc[k] - buf[q + k]) * a;\n  }\n\n  // The winch cable, and the one that falls on its red parachute after release.\n  const dark = [36, 34, 38];\n  for (const o of S.gl)\n    if (o.cable) {\n      stroke(S, o.X + o.dir * 3 * cos(o.pitch), o.yc - o.Z * SE - 3 * sin(o.pitch), o.X0 + o.dir * 58, 118, 0.18, 0.18);\n      flush(S, dark, 0.75);\n    }\n  const cb = S.cable;\n  if (cb) {\n    stroke(S, cb.x, cb.y, cb.xw, 118, 0.18, 0.18);\n    flush(S, dark, 0.75 * (1 - cb.t / 2));\n    stroke(S, cb.x, cb.y - 1, cb.x, cb.y - 1, 0.7, 0.7);\n    flush(S, [230, 50, 40], 1 - cb.t / 2);\n  }\n  // Gliders and buzzards, the far side of their circles first.\n  for (const o of S.gl.slice().sort((p, q) => p.Z - q.Z)) craft(S, o, h);\n\n  for (let p = 0; p \u003c N; p++) display.setPixel(p % W, (p / W) | 0, min(255, buf[p * 3]) | 0, min(255, buf[p * 3 + 1]) | 0, min(255, buf[p * 3 + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hour=0..1, Speed=0.2..3, Gliders=1..4, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hour","min":0,"max":1,"about":"Bright midday at 0, to golden late afternoon at 1: the sun comes in low from the left, the haze goes amber and hedges and trees throw long shadows."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a turn takes six seconds, the climb to the cloud base about twenty, and each cloud builds for 26 s before it drifts off. At 0.2 all of it runs ten times slower."},{"name":"Gliders","min":1,"max":4,"about":"One to four gliders stacked in the thermal. A day good enough for four also builds a bigger cloud with a darker base and sends more thistledown up."},{"name":"Wind","min":-1,"max":1,"about":"The thermal and its cloud lean downwind, so the turns drift as the gliders climb, and cloud shadows and far cumulus travel faster. Near 0 it is almost calm."}],"start":[0,2,1,0.06],"measures":{"motion":0.0272,"detail":0.0308,"edges":0.2402,"complexity":1.2348,"coverage":0.9999,"colour":0.3714,"drift":0.0371},"knobResponse":[0.1132,0.0554,0.0527,0.073]},{"slug":"tower-crane","title":"Tower Crane","family":"construction","round":24,"note":"해 질 녘 올라가는 콘크리트 건물 옆에 노란 타워크레인이 서서, 마당의 벽판과 철근 다발, 거푸집, 콘크리트 버킷을 차례로 꼭대기 층에 올려요. 붐이 원근 속에서 돌며 짧아졌다 길어지고, 버킷이 바닥을 부으면 건물이 한 층 자라 새 층 창에 불이 들어와요. K1 을 끝까지 돌리면 밤이 되어 투광등이 켜져요.","idea":"A yellow tower crane hoists a precast wall, rebar, formwork and the concrete bucket from the yard to the top deck of a concrete frame going up at dusk, slewing its jib round in perspective, and each pour adds a floor.","buttons":"K1 tap sets the floor's formwork in place and pours the deck at once, and the building grows a floor.","code":"// ===== Patternflow pattern =====\n// Title:   Tower Crane\n// Family:  construction\n// Idea:    A yellow tower crane hoists a precast wall, rebar, formwork and the concrete bucket from the yard to the top deck of a concrete frame going up at dusk, slewing its jib round in perspective, and each pour adds a floor.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the tower cranes that stand beside a rising concrete frame\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Floors=9..13, Wind=-1..1\n//\n// Knob 1: Dusk. From late afternoon at 0, the sun low over the yard and the frame lit gold, to night at 1, when the sky goes navy, the floodlight and the trolley's lamp come on and most windows are lit.\n// Knob 2: Speed. At 2 one lift takes about ten seconds: down to the yard, rig, hoist the whole height, slew over and set down. At 0.2 it all runs ten times slower.\n// Knob 3: Floors. How many floors are up when it starts, nine to thirteen. Every fourth lift is the concrete bucket, and its pour adds a floor until the frame has thirteen and tops out with a fir tree on the roof.\n// Knob 4: Wind. Clouds thicken and drift with it either way, their shadows cross the frame, and the load leans and swings on its cable.\n// Buttons: K1 tap sets the floor's formwork in place and pours the deck at once, and the building grows a floor.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Street level, one storey, and the most floors that fit under the jib.\nconst [GY, FH, NMAX] = [114, 6, 13];\n// The frame, x 3 to 39: six columns two LEDs wide, five bays, the one by the crane the lift core.\nconst [BX0, BX1, CORE] = [3, 39, 4];\n// Mast centre, the jib's bottom chord at the root, jib and counter-jib lengths, top of the tower head.\nconst [MX, JY, JL, CJL, APEX] = [46, 15, 42, 15, 3];\n// The hook's highest row, the radius it picks at over the yard, the yard's load line.\nconst [HTOP, PICK_R, PICK_Y] = [21, 11, 120];\n// Wall panel, rebar, formwork, bucket: width, height, the column it is set down on.\nconst LW = [8, 11, 9, 5], LH = [5, 2, 4, 6], DROP = [35, 20, 12, 6];\n// Sky top, middle, horizon; sun; lit and shaded cloud; light on things. Afternoon to night.\nconst KEYS = [\n  [34, 72, 156, 128, 142, 186, 255, 190, 112, 255, 236, 170, 255, 236, 204, 150, 130, 160, 1, 0.9, 0.74],\n  [30, 50, 130, 168, 108, 140, 255, 140, 62, 255, 168, 78, 255, 170, 116, 104, 70, 108, 0.86, 0.64, 0.48],\n  [16, 20, 70, 64, 44, 96, 196, 86, 78, 226, 90, 52, 176, 92, 104, 46, 36, 66, 0.44, 0.38, 0.46],\n  [4, 6, 22, 10, 14, 40, 44, 34, 60, 0, 0, 0, 42, 36, 56, 16, 16, 30, 0.2, 0.21, 0.3],\n];\nconst FLC = [1, 0.94, 0.82];\nconst YEL = [255, 196, 22];\n// The floodlight tower in the yard and where it is aimed.\nconst [LX, LY] = [60.5, 84.5];\nconst [AX, AY] = (([x, y]) => [x / Math.hypot(x, y), y / Math.hypot(x, y)])([-34, 31]);\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = {\n    f: F(N * 3), bg: F(N * 3), lm: F(N * 3), fl: F(N), row: F(H * 3), cloud: F(128 * 64), sky: new Int16Array(W),\n    t: 0, rt: 0, nk: -1, stage: 3, cage: 1, form: 1, item: -1, lightNew: -1, th: PI, r: 40, load: 3, ph: \"I\", sw: 0, swv: 0, vx: 0, ptx: 6,\n    on: new Uint8Array(NMAX), onT: F(NMAX).fill(9), nsw: 2.4, cx: 0, sp: [], weld: 0.4, welding: 0, wk: [], mix: 2, cars: [], ncar: 1.4,\n  });\n  // Clouds: a strip of soft noise that wraps every 128 columns.\n  for (let i = 0; i \u003c 128 * 64; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => 0.55 * vn(X * 0.05, y * 0.13) + 0.3 * vn(X * 0.13, y * 0.3 + 9) + 0.15 * vn(X * 0.4, y * 0.6 + 3);\n    P.cloud[i] = mix(f(x), f(x + 128), x / 128);\n  }\n  // The city behind: blocks of four to nine columns.\n  for (let x = 0, w = 0, h = 0; x \u003c W; x++, w--) w > 0 || ((w = 4 + floor(rnd() * 6)), (h = 98 + floor(rnd() * 12))), (P.sky[x] = h);\n  for (let k = 0; k \u003c NMAX; k++) (P.on[k] = rnd() \u003c 0.35 ? 1 : 0), k \u003c 3 && P.wk.push({ x: 8 + k * 11 + rnd() * 4, tx: 8 + rnd() * 28, wait: rnd() * 2 });\n}\n\n// A move of the crane: slew angle, trolley radius and hook row, eased to where they go.\nfunction go(P, ph, dur, to) {\n  Object.assign(P, { ph, pt: 0, pd: dur, f0: [P.th, P.r, P.hy], f1: [to.th ?? P.th, to.r ?? P.r, to.hy ?? P.hy] });\n}\n\nconst deckY = (P) => GY - P.n * FH;\nconst tip = (P) => [MX + P.r * cos(P.th), JY + 1 - P.r * sin(P.th) * 0.1];\nconst bucketHy = (P) => deckY(P) - FH - 2 - LH[3] - 3;\n\nfunction finishFloor(P) {\n  if (P.n \u003c NMAX) P.n++;\n  else P.top = 1;\n  // The floor that has just been glazed lights up a moment later.\n  Object.assign(P, { stage: 0, cage: 0, form: 0, item: -1, pourX: -1, nsw: min(P.nsw, 0.7), lightNew: P.n - 3 });\n}\n\n// Down to the yard, rig, hoist, slew over, lower, set down (or pour), up again.\nfunction step(P) {\n  const T = P.ph, type = P.load;\n  if (T === \"A\") go(P, \"B\", 0.5, {});\n  else if (T === \"B\") (P.load = P.top && P.stage > 2 ? (P.stage = 0) : P.stage), go(P, \"C\", 2.8, { hy: HTOP });\n  else if (T === \"C\") go(P, \"D\", 2.4, { th: P.th + PI, r: MX - DROP[type] });\n  else if (T === \"D\") go(P, \"E\", 1.5, { hy: type === 3 ? bucketHy(P) : deckY(P) - 4 - LH[type] });\n  else if (T === \"E\") {\n    if (type === 3) (P.pourX = BX0), go(P, \"P\", 3, { r: MX - BX1 + 2 });\n    else {\n      // Set down: the panel goes into the core, rebar and formwork lie on the deck.\n      const x = round(tip(P)[0]);\n      if (type) (P.item = type), (P.ix = x), type \u003c 2 ? (P.cage = 0) : (P.form = 0);\n      for (const w of P.wk) w.tx = x + (rnd() - 0.5) * 10;\n      (P.stage = max(P.stage, type + 1)), (P.load = -1), go(P, \"F\", 0.9, {});\n    }\n  } else if (T === \"P\" || T === \"I\") finishFloor(P), go(P, \"F\", 0.4, {});\n  else if (T === \"F\") go(P, \"G\", 0.5, { hy: P.hy - 12 });\n  else (P.load = -1), go(P, \"A\", 1.5, { th: (floor(P.th / TAU + 1e-3) + 1) * TAU, r: PICK_R, hy: PICK_Y - LH[P.stage] - 3 });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), nf = round(cl(k[2], 9, 13));\n  if (nf !== P.nk) {\n    // A new count of floors: the hook keeps its place over the deck.\n    const sh = (nf - P.n) * FH;\n    P.nk = P.n = nf;\n    P.top = 0;\n    if (P.ph === \"I\") (P.hy = bucketHy(P)), (P.pourX = BX0), go(P, \"I\", 3, { r: MX - BX1 + 2 });\n    else if (\"EPFG\".includes(P.ph)) (P.hy -= sh), (P.f0[2] -= sh), (P.f1[2] -= sh);\n  }\n  P.w = cl(k[3], -1, 1);\n  const t = (P.t += d), k0 = cl(k[0], 0, 1);\n  P.rt += rd;\n  // The evening deepens a little and comes back once every minute and a half.\n  P.h = k0 + (1 - k0) * 0.05 * (1 - cos((TAU * t) / 90));\n  // K1 tap: everything for the floor is in place at once and the deck pours.\n  if (input.btnPressed && input.btnPressed[0] && P.pourX \u003c 0 && !P.top) Object.assign(P, { pourBtn: 1, pourX: BX0, stage: 3, cage: 1, form: 1 });\n  const lin = min(1, (P.pt += d) / P.pd), u = sm(0, 1, lin), pour = P.ph === \"P\" || P.ph === \"I\";\n  P.th = mix(P.f0[0], P.f1[0], u);\n  P.r = mix(P.f0[1], P.f1[1], pour ? lin : u);\n  P.hy = mix(P.f0[2], P.f1[2], u);\n  if (pour) P.pourX = max(P.pourX, tip(P)[0] + 2);\n  if (lin >= 1) step(P);\n  if (P.pourBtn && (P.pourX += 30 * d) > BX1) (P.pourBtn = 0), finishFloor(P);\n  // The load swings on its cable when the trolley speeds up or slows, and in the wind.\n  const [tx, ty] = tip(P), L = max(4, P.hy - ty);\n  if (d > 0) {\n    const vx = (tx - P.ptx) / d, ax = cl((vx - P.vx) / d, -30, 30), eq = P.w * (0.06 + 0.04 * sin(t * 1.7)) * (P.load >= 0 ? 1 : 1.6);\n    P.swv += (-(110 / L) * (P.sw - eq) - (0.5 * ax) / L - 1.4 * P.swv) * d;\n    P.sw = cl(P.sw + P.swv * d, -0.3, 0.3);\n    [P.ptx, P.vx] = [tx, vx];\n  }\n  // The rigger steadies the load before it goes up.\n  if (P.ph === \"B\") (P.sw *= 1 - min(1, 5 * d)), (P.swv *= 1 - min(1, 5 * d));\n  P.swx = cl(L * sin(P.sw), -2.5, 2.5);\n  // The rebar is tied up the columns and the formwork goes round them.\n  if (P.stage > 1) P.cage = min(1, P.cage + d * 0.3);\n  if (P.stage > 2) P.form = min(1, P.form + d * 0.3);\n  // A floor switches its lights on or off together.\n  for (let i = 0; i \u003c NMAX; i++) P.onT[i] += rd;\n  if ((P.nsw -= d) \u003c= 0) {\n    const f = P.lightNew >= 0 ? P.lightNew : floor(rnd() * max(1, P.n - 2));\n    P.on[f] = P.lightNew >= 0 ? 1 : 1 - P.on[f];\n    Object.assign(P, { lightNew: -1, nsw: 1.6 + rnd() * 2 }).onT[f] = 0;\n  }\n  // Welding on the deck, and its sparks falling down the face.\n  if ((P.weld -= d) \u003c= 0) (P.welding = 1 - P.welding), (P.weld = P.welding ? 1.4 + rnd() * 1.6 : 0.4 + rnd() * 0.8);\n  const wy = deckY(P) - 2;\n  if (P.welding) for (let n = 0; n \u003c 4; n++) if (rnd() \u003c d * 18) P.sp.push([18 + rnd(), wy, (rnd() - 0.5) * 14, -4 - rnd() * 7, 1 + rnd() * 0.9, 18.5, wy]);\n  P.sp = P.sp.filter((s) => ((s[5] = s[0]), (s[6] = s[1]), (s[3] += 46 * d), (s[0] += s[2] * d), (s[1] += s[3] * d), (s[4] -= d) > 0 && s[1] \u003c GY));\n  // Workers walk about the deck.\n  for (const w of P.wk)\n    if (abs(w.tx - w.x) > 0.3) w.x = cl(w.x + cl(w.tx - w.x, -4 * d, 4 * d), 5, 37);\n    else if ((w.wait -= d) \u003c= 0) (w.tx = 6 + rnd() * 30), (w.wait = 1 + rnd() * 3);\n  // The mixer comes in for the bucket and backs out after the pour.\n  P.mix += cl((P.stage >= 2 && !P.top ? 2 : -26) - P.mix, -9 * d, 9 * d);\n  // Cars along the street.\n  if ((P.ncar -= d) \u003c= 0) (P.ncar = 2 + rnd() * 4), P.cars.push(rnd() \u003c 0.5 ? [-8, 11 + rnd() * 6, floor(rnd() * 4)] : [W + 1, -11 - rnd() * 6, floor(rnd() * 4)]);\n  P.cars = P.cars.filter((c) => ((c[0] += c[1] * d), c[0] > -12 && c[0] \u003c W + 12));\n  // Clouds drift with the wind.\n  P.cx += (1.5 + 9 * P.w) * d;\n}\n\nlet F, LM;\nconst at = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, c, a = 1, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nfunction add(x, y, c, k, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] += c[i] * k;\n}\n// A surface: its own colour under the light that falls on that LED.\nfunction sur(x, y, r, g, b, k = 1, o = at(x, y)) {\n  if (o >= 0) (F[o] = r * LM[o] * k), (F[o + 1] = g * LM[o + 1] * k), (F[o + 2] = b * LM[o + 2] * k);\n}\nconst surc = (x, y, c, k = 1) => sur(x, y, c[0], c[1], c[2], k);\n// A lamp's glow round it, and a worker three LEDs tall.\nconst glow = (x, y, c, k) => {\n  for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) if (i || j) add(x + i, y + j, c, k / (i * i + j * j));\n};\nconst man = (x, y, head = [250, 250, 240]) => (sur(x, y, 50, 56, 90), sur(x, y - 1, 255, 130, 20), surc(x, y - 2, head));\nfunction line(x0, y0, x1, y1, c, k = 1) {\n  const n = max(abs(x1 - x0), abs(y1 - y0)) * 1.2 + 1;\n  for (let i = 0; i \u003c= n; i++) surc(mix(x0, x1, i / n), mix(y0, y1, i / n), c, k);\n}\n\n// Sky, sun and the city beyond, kept until the evening moves on.\nfunction sky(P, K) {\n  const h = P.h, B = P.bg;\n  if (round(h * 300) === P.bgKey) return F.set(B);\n  P.bgKey = round(h * 300);\n  const row = P.row, night = sm(0.4, 0.9, h), vis = 1 - sm(0.78, 0.95, h);\n  for (let y = 0; y \u003c H; y++) {\n    const f = min(1, y / GY), a = f \u003c 0.5 ? 0 : 3, u = f \u003c 0.5 ? f / 0.5 : (f - 0.5) / 0.5;\n    for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = mix(K[a + c], K[a + 3 + c], a ? u * u : sm(0, 1, u));\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3;\n    if (y >= P.sky[x]) {\n      const win = night * (hash(x, y * 3) \u003c 0.16 && y & 1 ? 1 : 0);\n      for (let c = 0; c \u003c 3; c++) B[o + c] = mix(K[3 + c], K[6 + c], 0.55) * 0.6 * (x & 1 ? 1 : 0.86) + win * [210, 160, 90][c];\n      continue;\n    }\n    const d = Math.hypot(x - 54.5, y - 61.5 - 52 * h), g = vis * (0.55 * exp(-((d - 3.6) ** 2) / 50) + 0.3 * exp(-d / 16));\n    for (let c = 0; c \u003c 3; c++) B[o + c] = d \u003c 3.6 && vis > 0 ? mix(row[y * 3 + c], K[9 + c], vis) : row[y * 3 + c] + K[9 + c] * g * 0.7;\n  }\n  F.set(B);\n}\n\nfunction clouds(P, K) {\n  const cover = 0.56 - 0.18 * abs(P.w), C = P.cloud;\n  for (let y = 0; y \u003c 100; y++) {\n    const ty = floor(y * 0.6) & 63, fade = 1 - sm(50, 100, y);\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= P.sky[x]) continue;\n      const v = C[(ty \u003c\u003c 7) | (floor(x + P.cx) & 127)], a = cl((v - cover) * 7, 0, 1) * fade, lt = cl(1.25 - (v - cover) * 4 + (y - 40) / 120, 0, 1);\n      if (a > 0.01) put(x, y, [mix(K[15], K[12], lt), mix(K[16], K[13], lt), mix(K[17], K[14], lt)], a * 0.92);\n    }\n  }\n}\n\n// The light on every surface: the day, cloud shadows, the floodlights after dusk.\nfunction light(P, K) {\n  const sunA = 1 - sm(0.45, 0.85, P.h), fon = sm(0.3, 0.55, P.h), FLb = P.fl, C = P.cloud;\n  const cover = 0.5 - 0.18 * abs(P.w), [tx, ty] = tip(P), hx = tx + P.swx * 0.5;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, v = C[((floor(y * 0.25 + 20) & 63) \u003c\u003c 7) | (floor(x * 0.8 + P.cx * 2.2 + 40) & 127)];\n    let fl = 0;\n    if (fon > 0) {\n      const dx = x + 0.5 - LX, dy = y + 0.5 - LY, dd = Math.hypot(dx, dy) + 0.01, ca = (dx * AX + dy * AY) / dd;\n      fl = (exp((ca - 1) / 0.03) * 1.2) / (1 + (dd / 60) ** 2);\n      if (y > ty + 1) {\n        const q = (x + 0.5 - hx) / (1.2 + 0.16 * (y - ty));\n        fl += (exp(-q * q) * 0.7) / (1 + ((y - ty) / 90) ** 2);\n      }\n      fl *= fon;\n    }\n    FLb[i] = fl;\n    for (let c = 0; c \u003c 3; c++) LM[o + c] = K[18 + c] * (1 - 0.45 * sunA * cl((v - cover) * 5, 0, 1)) + fl * FLC[c];\n  }\n}\n\n// The yard's gravel, the kerb, the street and its markings.\nfunction ground() {\n  for (let i = GY * W; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, n = 0.82 + 0.3 * hash(x, y + 900);\n    y === 126 && (x + 6) % 8 \u003c 2 ? sur(x, y, 190, 180, 120) : y > 123 ? sur(x, y, 62 * n, 60 * n, 66 * n) : y > 122 ? sur(x, y, 150, 146, 140) : sur(x, y, 150 * n, 126 * n, 98 * n);\n  }\n}\n\n// The concrete frame, its windows, and the floor going up on the deck.\nfunction building(P) {\n  const n = P.n, dk = deckY(P), g = n - 2, night = sm(0.4, 0.9, P.h), row = P.row;\n  for (let y = dk; y \u003c GY; y++) {\n    const k = floor((GY - 1 - y) / FH), ry = y - (GY - (k + 1) * FH);\n    for (let x = BX0; x \u003c= BX1; x++) {\n      const cx = (x - BX0) % 7, b = floor((x - BX0) / 7), bx = cx - 2;\n      if (ry === 0) sur(x, y, 228, 220, 206);\n      else if (cx \u003c 2) sur(x, y, 206, 198, 184);\n      else if (ry === 1) k \u003c g ? sur(x, y, 78, 86, 102) : sur(x, y, 178, 172, 162);\n      else if (b === CORE) sur(x, y, 196, 190, 180, (x + y) % 9 === 0 ? 0.8 : 0.95);\n      else if (k \u003c g && bx === 2) sur(x, y, 80, 80, 88);\n      else if (k \u003c g) {\n        // Glass: the sky in it, or a lit room behind.\n        const o = (y * W + x) * 3, rr = cl(round(y * 0.3 + 4), 0, GY - 1) * 3;\n        let on = P.on[k] ? hash(k, b * 7 + 1) \u003c 0.92 : hash(k, b * 7 + 3) \u003c 0.1 + 0.6 * night;\n        if (on && P.on[k] && P.onT[k] \u003c 0.5) on = hash(k * 13 + b, floor(P.onT[k] * 22)) > 0.45;\n        const lc = hash(k, b + 40) \u003c 0.75 ? [255, 184, 88] : [200, 228, 255], a = on ? 0.9 + 0.1 * night : 0;\n        for (let c = 0; c \u003c 3; c++) F[o + c] = mix(row[rr + c] * 0.42 + c * 5, lc[c], a) * (ry === 2 ? 1.12 : 1);\n      } else {\n        // An open floor: dark inside, the back columns, a work lamp at night.\n        if (night > 0.05 && bx === 2 && ry === 2 && hash(k, b) \u003c 0.6) put(x, y, [255, 214, 150].map((v) => v * night));\n        else sur(x, y, 60, 54, 52, bx === 2 ? 0.6 : 0.28);\n      }\n    }\n  }\n  // Ties from the mast to the frame.\n  for (let k = 2; k \u003c n; k += 3) for (let x = BX1 + 1; x \u003c MX - 2; x++) sur(x, GY - (k + 1) * FH + 1, 200, 170, 60);\n\n  // The floor on the deck: starter bars, the core panel, the rebar cages, the formwork.\n  const top = dk - FH, st = P.top ? 0 : P.stage;\n  if (st > 0) for (let y = top + 1; y \u003c dk; y++) for (let x = BX0 + 30; x \u003c= BX0 + 34; x++) sur(x, y, 176, 172, 164, x === BX0 + 32 ? 0.8 : 1);\n  for (let ci = 0; ci \u003c 6; ci++) {\n    const x = BX0 + ci * 7;\n    for (let j = 1; j \u003c= max(2, st > 1 ? round(P.cage * 5) : 0); j++) sur(x, dk - j, 176, 96, 50), j & 1 && sur(x + 1, dk - j, 130, 76, 44);\n    if (st > 2 && ci / 6 \u003c P.form) for (let j = 1; j \u003c FH; j++) sur(x, dk - j, 218, 162, 84), sur(x + 1, dk - j, 196, 140, 70);\n  }\n  if (st > 2) for (let x = BX0; x \u003c= BX0 + 36 * P.form; x++) for (let j = 0; j \u003c ((x - BX0) % 7 === 4 ? FH : 1); j++) j ? sur(x, top + j, 150, 150, 156, 0.8) : sur(x, top, 214, 156, 80);\n  if (P.pourX >= 0 && !P.top) for (let x = BX0; x \u003c= min(BX1, P.pourX); x++) sur(x, top, 140, 140, 150), (x - BX0) % 7 \u003c 2 && sur(x, top + 1, 140, 140, 150, 0.9);\n  if (P.item > 0) drawLoad(P.item, P.ix, dk - LH[P.item]);\n  // Topped out: a little fir tree on the roof.\n  if (P.top) for (let j = 0; j \u003c 5; j++) for (let i = -j; i \u003c= j; i++) sur(24 + i, dk - 6 + j, 40, 120, 60);\n  // The workers on the deck in hi-vis, and the welder by a column.\n  for (const w of P.wk) man(w.x, dk - 1);\n  man(17, dk - 1, [60, 60, 70]);\n}\n\n// One of the four loads, centred on x with its top on row y0.\nfunction drawLoad(type, cx, y0) {\n  const w = LW[type], h = LH[type], x0 = round(cx - w / 2), y = round(y0);\n  for (let j = 0; j \u003c h; j++)\n    for (let i = 0; i \u003c w; i++) {\n      const X = x0 + i, Y = y + j;\n      if (type === 0) (i \u003c 2 || i > 4 || !j || j > 3) && sur(X, Y, 150, 146, 140, i && j ? 1 : 1.25);\n      else if (type === 1) sur(X, Y, i === 2 || i === 8 ? 60 : 186, i === 2 || i === 8 ? 54 : 92, 48, j ? 0.72 : 1);\n      else if (type === 2) sur(X, Y, 226, 170, 92, j & 1 ? 0.55 : 1);\n      else if (i >= (j >= h - 2 ? 1 : 0) && i \u003c w - (j >= h - 2 ? 1 : 0)) sur(X, Y, 120, 120, 128, j === 1 ? 0.6 : j === 0 ? 1.3 : 1);\n    }\n  if (type === 3) sur(x0 + 2, y + h, 70, 70, 76);\n}\n\n// The hook block, its cable and slings, and whatever it carries.\nfunction hook(P) {\n  const [tx, ty] = tip(P), hx = tx + P.swx, hy = P.hy;\n  line(tx, ty + 1, hx, hy - 1, [120, 120, 130], 0.9);\n  for (let i = -1; i \u003c= 1; i++) surc(hx + i, hy - 1, YEL);\n  sur(hx, hy, 60, 60, 66), sur(hx, hy + 1, 90, 90, 96);\n  if (P.load >= 0) {\n    const w = LW[P.load] / 2 - 0.5;\n    line(hx, hy + 1, hx - w, hy + 3, [110, 110, 116], 0.8), line(hx, hy + 1, hx + w, hy + 3, [110, 110, 116], 0.8);\n    drawLoad(P.load, hx + 0.5, hy + 3);\n    // Concrete runs from the bucket into the forms.\n    if (P.ph === \"P\" || P.ph === \"I\") for (let j = hy + 10; j \u003c deckY(P) - FH; j++) sur(hx + 0.5, j, 140, 140, 150);\n  }\n}\n\n// The yard: stock waiting by the crane, the load being rigged, the floodlight tower.\nfunction yard(P) {\n  drawLoad(2, 53, 115), drawLoad(1, 54, 118);\n  if (P.ph === \"A\" || P.ph === \"B\") {\n    const s = P.stage, x = MX + PICK_R - LW[s] / 2 - 2, arm = P.ph === \"B\" ? (P.pt * 6) & 1 : 0;\n    drawLoad(s, MX + PICK_R + 0.5, PICK_Y - LH[s]);\n    man(x, PICK_Y - 1), sur(x + 1, PICK_Y - 2 - arm, 255, 130, 20);\n  }\n  for (let y = LY; y \u003c 122; y++) sur(62, y, 120, 120, 126);\n  const fon = sm(0.3, 0.55, P.h);\n  for (let x = 59; x \u003c= 62; x++) put(x, 83, [90, 90, 96]), put(x, 84, x \u003c 62 ? [70 + 185 * fon, 70 + 180 * fon, 76 + 154 * fon] : [90, 90, 96]);\n}\n\n// The crane: mast, ties, slewing ring, cab, tower head, jib and counter-jib.\nfunction crane(P) {\n  const c = cos(P.th), sn = sin(P.th), blink = P.rt % 1.2 \u003c 0.55, fon = sm(0.3, 0.55, P.h);\n  const jib = () => {\n    for (let s = 0; s \u003c= JL; s += 0.3) {\n      // Swung towards you the tip is nearer and bigger, swung away it shrinks.\n      const sc = 1 + (0.45 * s * sn) / JL, px = MX + s * c, py = JY - s * sn * 0.1, ht = (3 - (1.2 * s) / JL) * sc, tri = abs(((s / 2.4) % 2) - 1), wd = sn * 1.2 * sc;\n      surc(px - wd, py, YEL, 0.85), surc(px + wd, py, YEL, 0.85), surc(px, py - ht, YEL), surc(px + wd * (1 - tri), py - tri * ht, YEL, 0.75);\n    }\n  };\n  const counter = () => {\n    for (let s = 0; s \u003c= CJL; s += 0.3) {\n      const px = MX - s * c, py = JY + s * sn * 0.1;\n      surc(px, py, YEL, 0.85), surc(px, py - 1, YEL, s % 2 \u003c 0.6 ? 0.8 : 0);\n      if (s > 6 && s \u003c 8.5) for (let j = 1; j \u003c= 2; j++) sur(px, py - 1 - j, 80, 84, 92);\n      if (s > CJL - 5) for (let j = 1; j \u003c= 4; j++) sur(px, py + j, 190, 184, 172, (floor(s) & 1) === 0 ? 0.8 : 1);\n    }\n  };\n  const pend = () => {\n    line(MX, APEX + 1, MX + 28 * c, JY - 28 * sn * 0.1 - 2.2, [110, 104, 96], 0.8);\n    line(MX, APEX + 1, MX - CJL * c, JY + CJL * sn * 0.1 - 1, [110, 104, 96], 0.8);\n  };\n  const cab = () => {\n    for (let q = 0, i, j; q \u003c 12; q++)\n      (i = (q % 3) - 1), (j = (q / 3) | 0), j % 3 && i > -1 ? put(MX + 3.5 * c + i, JY + 1 + j, P.h > 0.5 ? [255 * fon, 226 * fon, 160 * fon] : [110, 150, 196]) : surc(MX + 3.5 * c + i, JY + 1 + j, [240, 232, 210]);\n  };\n  // What faces away is drawn first.\n  if (sn \u003c 0) jib(), pend(), cab();\n  else counter(), pend();\n  // The mast: two chords and a lattice of diagonals.\n  for (let y = JY + 3; y \u003c 118; y++) {\n    surc(MX - 2, y, YEL, 0.72), surc(MX + 2, y, YEL);\n    for (let xi = 1; xi \u003c= 3; xi++) if (((y + xi) & 3) === 0 || ((y - xi) & 3) === 0) surc(MX - 2 + xi, y, YEL, 0.8);\n  }\n  for (let x = MX - 4; x \u003c= MX + 4; x++) sur(x, 117, 170, 166, 160), sur(x, 118, 170, 166, 160), sur(x, 119, 170, 166, 160), abs(x - MX) \u003c 4 && (sur(x, JY + 1, 80, 80, 86), sur(x, JY + 2, 110, 110, 116));\n  // The tower head.\n  for (let y = APEX; y \u003c= JY - 3; y++) {\n    const hw = (1.6 * (y - APEX)) / (JY - 3 - APEX);\n    surc(MX - hw, y, YEL), surc(MX + hw, y, YEL);\n    if ((y & 1) === 0) for (let x = round(MX - hw); x \u003c= MX + hw; x++) surc(x, y, YEL, 0.8);\n  }\n  if (sn \u003c 0) counter(), pend();\n  else jib(), pend(), cab();\n  // The trolley, and the warning lights on the head and at the jib tip.\n  const [tx, ty] = tip(P);\n  sur(tx - 1, ty, 90, 90, 96), sur(tx, ty, 90, 90, 96), sur(tx + 1, ty, 90, 90, 96);\n  for (const [x, y] of [[MX, APEX - 1], [MX + JL * c, JY - JL * sn * 0.1 - 2]]) {\n    put(x, y, blink ? [255, 40, 28] : [110, 20, 16]);\n    if (blink) glow(x, y, [255, 30, 20], 0.12 + 0.3 * fon);\n  }\n}\n\n// The mixer, its drum turning.\nfunction mixer(P) {\n  const x0 = round(P.mix), night = sm(0.4, 0.9, P.h);\n  if (x0 \u003c -24) return;\n  for (let y = 115; y \u003c= 121; y++)\n    for (let i = 0; i \u003c 13; i++) {\n      const e = ((i - 6) / 6.8) ** 2 + ((y - 118 + (i - 6) * 0.18) / 3.4) ** 2;\n      if (e \u003c 1) sur(x0 + i, y, ...((((i * 0.7 + y * 1.4 - P.t * 9) % 4) + 4) % 4 \u003c 2 ? [240, 120, 40] : [230, 228, 220]), 1 - 0.3 * e);\n    }\n  for (let i = 0; i \u003c 20; i++) sur(x0 + i, 122, 70, 70, 76);\n  for (let y = 116; y \u003c 122; y++) for (let i = 15; i \u003c 20; i++) sur(x0 + i, y, ...(y \u003c 119 && i > 16 ? [110, 150, 190] : [230, 60, 40]));\n  for (const i of [2, 5, 16]) sur(x0 + i, 123, 30, 30, 34), sur(x0 + i + 1, 123, 30, 30, 34);\n  if (night > 0.1) add(x0 + 20, 120, [255, 240, 200], night);\n}\n\nfunction cars(P) {\n  const night = sm(0.35, 0.9, P.h), cols = [[200, 40, 36], [220, 220, 226], [40, 80, 170], [60, 64, 70]];\n  for (const [cx, v, ci] of P.cars) {\n    const x0 = round(cx), fx = v > 0 ? x0 + 6 : x0;\n    for (let i = 0; i \u003c 21; i++) i \u003c 14 ? surc(x0 + (i >> 1), 125 + (i & 1), cols[ci]) : i \u003c 17 && sur(x0 + i - 12, 124, 120, 150, 180);\n    add(fx, 125, [255, 250, 220], 0.3 + night), add(x0 + 6 - fx + x0, 125, [255, 20, 10], 0.2 + night);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.h === undefined) return;\n  [F, LM] = [P.f, P.lm];\n  const hh = cl(P.h, 0, 1) * 3, i0 = min(2, floor(hh)), K = KEYS[i0].map((v, c) => mix(v, KEYS[i0 + 1][c], hh - i0));\n  // The hook goes behind the frame when the jib swings away from you.\n  const behind = sin(P.th) \u003c -0.15, y = deckY(P) - 2, FLb = P.fl;\n  sky(P, K), clouds(P, K), light(P, K), ground(), behind && hook(P), building(P), yard(P), crane(P), mixer(P), cars(P), behind || hook(P);\n  // The welding arc, its sparks, and the floodlight beams in the dusk air.\n  if (P.welding) put(18, y, [235, 244, 255]), glow(18, y, [160, 190, 255], 0.36 + 0.24 * rnd());\n  for (const [x, y, , , l, px, py] of P.sp) put(px, py, [255, 120, 30], min(1, l * 1.4) * 0.6), put(x, y, [255, 170 + 80 * min(1, l), 70 * min(1, l)], min(1, l * 1.4));\n  if (P.h > 0.3) for (let i = 0, o = 0; i \u003c N; i++, o += 3) if (FLb[i] > 0.01) for (let c = 0; c \u003c 3; c++) F[o + c] += FLb[i] * 22 * FLC[c];\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","layer":{"id":"layer-tower-crane","type":"code","name":"tower-crane","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Tower Crane\n// Family:  construction\n// Idea:    A yellow tower crane hoists a precast wall, rebar, formwork and the concrete bucket from the yard to the top deck of a concrete frame going up at dusk, slewing its jib round in perspective, and each pour adds a floor.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after the tower cranes that stand beside a rising concrete frame\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Dusk=0..1, Speed=0.2..3, Floors=9..13, Wind=-1..1\n//\n// Knob 1: Dusk. From late afternoon at 0, the sun low over the yard and the frame lit gold, to night at 1, when the sky goes navy, the floodlight and the trolley's lamp come on and most windows are lit.\n// Knob 2: Speed. At 2 one lift takes about ten seconds: down to the yard, rig, hoist the whole height, slew over and set down. At 0.2 it all runs ten times slower.\n// Knob 3: Floors. How many floors are up when it starts, nine to thirteen. Every fourth lift is the concrete bucket, and its pour adds a floor until the frame has thirteen and tops out with a fir tree on the roof.\n// Knob 4: Wind. Clouds thicken and drift with it either way, their shadows cross the frame, and the load leans and swings on its cable.\n// Buttons: K1 tap sets the floor's formwork in place and pours the deck at once, and the building grows a floor.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, exp, PI } = Math;\nconst TAU = 2 * PI;\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst rnd = () => Math.random();\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Street level, one storey, and the most floors that fit under the jib.\nconst [GY, FH, NMAX] = [114, 6, 13];\n// The frame, x 3 to 39: six columns two LEDs wide, five bays, the one by the crane the lift core.\nconst [BX0, BX1, CORE] = [3, 39, 4];\n// Mast centre, the jib's bottom chord at the root, jib and counter-jib lengths, top of the tower head.\nconst [MX, JY, JL, CJL, APEX] = [46, 15, 42, 15, 3];\n// The hook's highest row, the radius it picks at over the yard, the yard's load line.\nconst [HTOP, PICK_R, PICK_Y] = [21, 11, 120];\n// Wall panel, rebar, formwork, bucket: width, height, the column it is set down on.\nconst LW = [8, 11, 9, 5], LH = [5, 2, 4, 6], DROP = [35, 20, 12, 6];\n// Sky top, middle, horizon; sun; lit and shaded cloud; light on things. Afternoon to night.\nconst KEYS = [\n  [34, 72, 156, 128, 142, 186, 255, 190, 112, 255, 236, 170, 255, 236, 204, 150, 130, 160, 1, 0.9, 0.74],\n  [30, 50, 130, 168, 108, 140, 255, 140, 62, 255, 168, 78, 255, 170, 116, 104, 70, 108, 0.86, 0.64, 0.48],\n  [16, 20, 70, 64, 44, 96, 196, 86, 78, 226, 90, 52, 176, 92, 104, 46, 36, 66, 0.44, 0.38, 0.46],\n  [4, 6, 22, 10, 14, 40, 44, 34, 60, 0, 0, 0, 42, 36, 56, 16, 16, 30, 0.2, 0.21, 0.3],\n];\nconst FLC = [1, 0.94, 0.82];\nconst YEL = [255, 196, 22];\n// The floodlight tower in the yard and where it is aimed.\nconst [LX, LY] = [60.5, 84.5];\nconst [AX, AY] = (([x, y]) => [x / Math.hypot(x, y), y / Math.hypot(x, y)])([-34, 31]);\n\nexport function setup(params) {\n  const F = (n) => new Float32Array(n);\n  const P = (params.s = {\n    f: F(N * 3), bg: F(N * 3), lm: F(N * 3), fl: F(N), row: F(H * 3), cloud: F(128 * 64), sky: new Int16Array(W),\n    t: 0, rt: 0, nk: -1, stage: 3, cage: 1, form: 1, item: -1, lightNew: -1, th: PI, r: 40, load: 3, ph: \"I\", sw: 0, swv: 0, vx: 0, ptx: 6,\n    on: new Uint8Array(NMAX), onT: F(NMAX).fill(9), nsw: 2.4, cx: 0, sp: [], weld: 0.4, welding: 0, wk: [], mix: 2, cars: [], ncar: 1.4,\n  });\n  // Clouds: a strip of soft noise that wraps every 128 columns.\n  for (let i = 0; i \u003c 128 * 64; i++) {\n    const x = i & 127, y = i >> 7, f = (X) => 0.55 * vn(X * 0.05, y * 0.13) + 0.3 * vn(X * 0.13, y * 0.3 + 9) + 0.15 * vn(X * 0.4, y * 0.6 + 3);\n    P.cloud[i] = mix(f(x), f(x + 128), x / 128);\n  }\n  // The city behind: blocks of four to nine columns.\n  for (let x = 0, w = 0, h = 0; x \u003c W; x++, w--) w > 0 || ((w = 4 + floor(rnd() * 6)), (h = 98 + floor(rnd() * 12))), (P.sky[x] = h);\n  for (let k = 0; k \u003c NMAX; k++) (P.on[k] = rnd() \u003c 0.35 ? 1 : 0), k \u003c 3 && P.wk.push({ x: 8 + k * 11 + rnd() * 4, tx: 8 + rnd() * 28, wait: rnd() * 2 });\n}\n\n// A move of the crane: slew angle, trolley radius and hook row, eased to where they go.\nfunction go(P, ph, dur, to) {\n  Object.assign(P, { ph, pt: 0, pd: dur, f0: [P.th, P.r, P.hy], f1: [to.th ?? P.th, to.r ?? P.r, to.hy ?? P.hy] });\n}\n\nconst deckY = (P) => GY - P.n * FH;\nconst tip = (P) => [MX + P.r * cos(P.th), JY + 1 - P.r * sin(P.th) * 0.1];\nconst bucketHy = (P) => deckY(P) - FH - 2 - LH[3] - 3;\n\nfunction finishFloor(P) {\n  if (P.n \u003c NMAX) P.n++;\n  else P.top = 1;\n  // The floor that has just been glazed lights up a moment later.\n  Object.assign(P, { stage: 0, cage: 0, form: 0, item: -1, pourX: -1, nsw: min(P.nsw, 0.7), lightNew: P.n - 3 });\n}\n\n// Down to the yard, rig, hoist, slew over, lower, set down (or pour), up again.\nfunction step(P) {\n  const T = P.ph, type = P.load;\n  if (T === \"A\") go(P, \"B\", 0.5, {});\n  else if (T === \"B\") (P.load = P.top && P.stage > 2 ? (P.stage = 0) : P.stage), go(P, \"C\", 2.8, { hy: HTOP });\n  else if (T === \"C\") go(P, \"D\", 2.4, { th: P.th + PI, r: MX - DROP[type] });\n  else if (T === \"D\") go(P, \"E\", 1.5, { hy: type === 3 ? bucketHy(P) : deckY(P) - 4 - LH[type] });\n  else if (T === \"E\") {\n    if (type === 3) (P.pourX = BX0), go(P, \"P\", 3, { r: MX - BX1 + 2 });\n    else {\n      // Set down: the panel goes into the core, rebar and formwork lie on the deck.\n      const x = round(tip(P)[0]);\n      if (type) (P.item = type), (P.ix = x), type \u003c 2 ? (P.cage = 0) : (P.form = 0);\n      for (const w of P.wk) w.tx = x + (rnd() - 0.5) * 10;\n      (P.stage = max(P.stage, type + 1)), (P.load = -1), go(P, \"F\", 0.9, {});\n    }\n  } else if (T === \"P\" || T === \"I\") finishFloor(P), go(P, \"F\", 0.4, {});\n  else if (T === \"F\") go(P, \"G\", 0.5, { hy: P.hy - 12 });\n  else (P.load = -1), go(P, \"A\", 1.5, { th: (floor(P.th / TAU + 1e-3) + 1) * TAU, r: PICK_R, hy: PICK_Y - LH[P.stage] - 3 });\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), nf = round(cl(k[2], 9, 13));\n  if (nf !== P.nk) {\n    // A new count of floors: the hook keeps its place over the deck.\n    const sh = (nf - P.n) * FH;\n    P.nk = P.n = nf;\n    P.top = 0;\n    if (P.ph === \"I\") (P.hy = bucketHy(P)), (P.pourX = BX0), go(P, \"I\", 3, { r: MX - BX1 + 2 });\n    else if (\"EPFG\".includes(P.ph)) (P.hy -= sh), (P.f0[2] -= sh), (P.f1[2] -= sh);\n  }\n  P.w = cl(k[3], -1, 1);\n  const t = (P.t += d), k0 = cl(k[0], 0, 1);\n  P.rt += rd;\n  // The evening deepens a little and comes back once every minute and a half.\n  P.h = k0 + (1 - k0) * 0.05 * (1 - cos((TAU * t) / 90));\n  // K1 tap: everything for the floor is in place at once and the deck pours.\n  if (input.btnPressed && input.btnPressed[0] && P.pourX \u003c 0 && !P.top) Object.assign(P, { pourBtn: 1, pourX: BX0, stage: 3, cage: 1, form: 1 });\n  const lin = min(1, (P.pt += d) / P.pd), u = sm(0, 1, lin), pour = P.ph === \"P\" || P.ph === \"I\";\n  P.th = mix(P.f0[0], P.f1[0], u);\n  P.r = mix(P.f0[1], P.f1[1], pour ? lin : u);\n  P.hy = mix(P.f0[2], P.f1[2], u);\n  if (pour) P.pourX = max(P.pourX, tip(P)[0] + 2);\n  if (lin >= 1) step(P);\n  if (P.pourBtn && (P.pourX += 30 * d) > BX1) (P.pourBtn = 0), finishFloor(P);\n  // The load swings on its cable when the trolley speeds up or slows, and in the wind.\n  const [tx, ty] = tip(P), L = max(4, P.hy - ty);\n  if (d > 0) {\n    const vx = (tx - P.ptx) / d, ax = cl((vx - P.vx) / d, -30, 30), eq = P.w * (0.06 + 0.04 * sin(t * 1.7)) * (P.load >= 0 ? 1 : 1.6);\n    P.swv += (-(110 / L) * (P.sw - eq) - (0.5 * ax) / L - 1.4 * P.swv) * d;\n    P.sw = cl(P.sw + P.swv * d, -0.3, 0.3);\n    [P.ptx, P.vx] = [tx, vx];\n  }\n  // The rigger steadies the load before it goes up.\n  if (P.ph === \"B\") (P.sw *= 1 - min(1, 5 * d)), (P.swv *= 1 - min(1, 5 * d));\n  P.swx = cl(L * sin(P.sw), -2.5, 2.5);\n  // The rebar is tied up the columns and the formwork goes round them.\n  if (P.stage > 1) P.cage = min(1, P.cage + d * 0.3);\n  if (P.stage > 2) P.form = min(1, P.form + d * 0.3);\n  // A floor switches its lights on or off together.\n  for (let i = 0; i \u003c NMAX; i++) P.onT[i] += rd;\n  if ((P.nsw -= d) \u003c= 0) {\n    const f = P.lightNew >= 0 ? P.lightNew : floor(rnd() * max(1, P.n - 2));\n    P.on[f] = P.lightNew >= 0 ? 1 : 1 - P.on[f];\n    Object.assign(P, { lightNew: -1, nsw: 1.6 + rnd() * 2 }).onT[f] = 0;\n  }\n  // Welding on the deck, and its sparks falling down the face.\n  if ((P.weld -= d) \u003c= 0) (P.welding = 1 - P.welding), (P.weld = P.welding ? 1.4 + rnd() * 1.6 : 0.4 + rnd() * 0.8);\n  const wy = deckY(P) - 2;\n  if (P.welding) for (let n = 0; n \u003c 4; n++) if (rnd() \u003c d * 18) P.sp.push([18 + rnd(), wy, (rnd() - 0.5) * 14, -4 - rnd() * 7, 1 + rnd() * 0.9, 18.5, wy]);\n  P.sp = P.sp.filter((s) => ((s[5] = s[0]), (s[6] = s[1]), (s[3] += 46 * d), (s[0] += s[2] * d), (s[1] += s[3] * d), (s[4] -= d) > 0 && s[1] \u003c GY));\n  // Workers walk about the deck.\n  for (const w of P.wk)\n    if (abs(w.tx - w.x) > 0.3) w.x = cl(w.x + cl(w.tx - w.x, -4 * d, 4 * d), 5, 37);\n    else if ((w.wait -= d) \u003c= 0) (w.tx = 6 + rnd() * 30), (w.wait = 1 + rnd() * 3);\n  // The mixer comes in for the bucket and backs out after the pour.\n  P.mix += cl((P.stage >= 2 && !P.top ? 2 : -26) - P.mix, -9 * d, 9 * d);\n  // Cars along the street.\n  if ((P.ncar -= d) \u003c= 0) (P.ncar = 2 + rnd() * 4), P.cars.push(rnd() \u003c 0.5 ? [-8, 11 + rnd() * 6, floor(rnd() * 4)] : [W + 1, -11 - rnd() * 6, floor(rnd() * 4)]);\n  P.cars = P.cars.filter((c) => ((c[0] += c[1] * d), c[0] > -12 && c[0] \u003c W + 12));\n  // Clouds drift with the wind.\n  P.cx += (1.5 + 9 * P.w) * d;\n}\n\nlet F, LM;\nconst at = (x, y) => ((x = round(x)), (y = round(y)), x \u003c 0 || x >= W || y \u003c 0 || y >= H ? -1 : (y * W + x) * 3);\nfunction put(x, y, c, a = 1, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] = mix(F[o + i], c[i], a);\n}\nfunction add(x, y, c, k, o = at(x, y)) {\n  if (o >= 0) for (let i = 0; i \u003c 3; i++) F[o + i] += c[i] * k;\n}\n// A surface: its own colour under the light that falls on that LED.\nfunction sur(x, y, r, g, b, k = 1, o = at(x, y)) {\n  if (o >= 0) (F[o] = r * LM[o] * k), (F[o + 1] = g * LM[o + 1] * k), (F[o + 2] = b * LM[o + 2] * k);\n}\nconst surc = (x, y, c, k = 1) => sur(x, y, c[0], c[1], c[2], k);\n// A lamp's glow round it, and a worker three LEDs tall.\nconst glow = (x, y, c, k) => {\n  for (let j = -2; j \u003c= 2; j++) for (let i = -2; i \u003c= 2; i++) if (i || j) add(x + i, y + j, c, k / (i * i + j * j));\n};\nconst man = (x, y, head = [250, 250, 240]) => (sur(x, y, 50, 56, 90), sur(x, y - 1, 255, 130, 20), surc(x, y - 2, head));\nfunction line(x0, y0, x1, y1, c, k = 1) {\n  const n = max(abs(x1 - x0), abs(y1 - y0)) * 1.2 + 1;\n  for (let i = 0; i \u003c= n; i++) surc(mix(x0, x1, i / n), mix(y0, y1, i / n), c, k);\n}\n\n// Sky, sun and the city beyond, kept until the evening moves on.\nfunction sky(P, K) {\n  const h = P.h, B = P.bg;\n  if (round(h * 300) === P.bgKey) return F.set(B);\n  P.bgKey = round(h * 300);\n  const row = P.row, night = sm(0.4, 0.9, h), vis = 1 - sm(0.78, 0.95, h);\n  for (let y = 0; y \u003c H; y++) {\n    const f = min(1, y / GY), a = f \u003c 0.5 ? 0 : 3, u = f \u003c 0.5 ? f / 0.5 : (f - 0.5) / 0.5;\n    for (let c = 0; c \u003c 3; c++) row[y * 3 + c] = mix(K[a + c], K[a + 3 + c], a ? u * u : sm(0, 1, u));\n  }\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3;\n    if (y >= P.sky[x]) {\n      const win = night * (hash(x, y * 3) \u003c 0.16 && y & 1 ? 1 : 0);\n      for (let c = 0; c \u003c 3; c++) B[o + c] = mix(K[3 + c], K[6 + c], 0.55) * 0.6 * (x & 1 ? 1 : 0.86) + win * [210, 160, 90][c];\n      continue;\n    }\n    const d = Math.hypot(x - 54.5, y - 61.5 - 52 * h), g = vis * (0.55 * exp(-((d - 3.6) ** 2) / 50) + 0.3 * exp(-d / 16));\n    for (let c = 0; c \u003c 3; c++) B[o + c] = d \u003c 3.6 && vis > 0 ? mix(row[y * 3 + c], K[9 + c], vis) : row[y * 3 + c] + K[9 + c] * g * 0.7;\n  }\n  F.set(B);\n}\n\nfunction clouds(P, K) {\n  const cover = 0.56 - 0.18 * abs(P.w), C = P.cloud;\n  for (let y = 0; y \u003c 100; y++) {\n    const ty = floor(y * 0.6) & 63, fade = 1 - sm(50, 100, y);\n    for (let x = 0; x \u003c W; x++) {\n      if (y >= P.sky[x]) continue;\n      const v = C[(ty \u003c\u003c 7) | (floor(x + P.cx) & 127)], a = cl((v - cover) * 7, 0, 1) * fade, lt = cl(1.25 - (v - cover) * 4 + (y - 40) / 120, 0, 1);\n      if (a > 0.01) put(x, y, [mix(K[15], K[12], lt), mix(K[16], K[13], lt), mix(K[17], K[14], lt)], a * 0.92);\n    }\n  }\n}\n\n// The light on every surface: the day, cloud shadows, the floodlights after dusk.\nfunction light(P, K) {\n  const sunA = 1 - sm(0.45, 0.85, P.h), fon = sm(0.3, 0.55, P.h), FLb = P.fl, C = P.cloud;\n  const cover = 0.5 - 0.18 * abs(P.w), [tx, ty] = tip(P), hx = tx + P.swx * 0.5;\n  for (let i = 0; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, o = i * 3, v = C[((floor(y * 0.25 + 20) & 63) \u003c\u003c 7) | (floor(x * 0.8 + P.cx * 2.2 + 40) & 127)];\n    let fl = 0;\n    if (fon > 0) {\n      const dx = x + 0.5 - LX, dy = y + 0.5 - LY, dd = Math.hypot(dx, dy) + 0.01, ca = (dx * AX + dy * AY) / dd;\n      fl = (exp((ca - 1) / 0.03) * 1.2) / (1 + (dd / 60) ** 2);\n      if (y > ty + 1) {\n        const q = (x + 0.5 - hx) / (1.2 + 0.16 * (y - ty));\n        fl += (exp(-q * q) * 0.7) / (1 + ((y - ty) / 90) ** 2);\n      }\n      fl *= fon;\n    }\n    FLb[i] = fl;\n    for (let c = 0; c \u003c 3; c++) LM[o + c] = K[18 + c] * (1 - 0.45 * sunA * cl((v - cover) * 5, 0, 1)) + fl * FLC[c];\n  }\n}\n\n// The yard's gravel, the kerb, the street and its markings.\nfunction ground() {\n  for (let i = GY * W; i \u003c N; i++) {\n    const x = i & 63, y = i >> 6, n = 0.82 + 0.3 * hash(x, y + 900);\n    y === 126 && (x + 6) % 8 \u003c 2 ? sur(x, y, 190, 180, 120) : y > 123 ? sur(x, y, 62 * n, 60 * n, 66 * n) : y > 122 ? sur(x, y, 150, 146, 140) : sur(x, y, 150 * n, 126 * n, 98 * n);\n  }\n}\n\n// The concrete frame, its windows, and the floor going up on the deck.\nfunction building(P) {\n  const n = P.n, dk = deckY(P), g = n - 2, night = sm(0.4, 0.9, P.h), row = P.row;\n  for (let y = dk; y \u003c GY; y++) {\n    const k = floor((GY - 1 - y) / FH), ry = y - (GY - (k + 1) * FH);\n    for (let x = BX0; x \u003c= BX1; x++) {\n      const cx = (x - BX0) % 7, b = floor((x - BX0) / 7), bx = cx - 2;\n      if (ry === 0) sur(x, y, 228, 220, 206);\n      else if (cx \u003c 2) sur(x, y, 206, 198, 184);\n      else if (ry === 1) k \u003c g ? sur(x, y, 78, 86, 102) : sur(x, y, 178, 172, 162);\n      else if (b === CORE) sur(x, y, 196, 190, 180, (x + y) % 9 === 0 ? 0.8 : 0.95);\n      else if (k \u003c g && bx === 2) sur(x, y, 80, 80, 88);\n      else if (k \u003c g) {\n        // Glass: the sky in it, or a lit room behind.\n        const o = (y * W + x) * 3, rr = cl(round(y * 0.3 + 4), 0, GY - 1) * 3;\n        let on = P.on[k] ? hash(k, b * 7 + 1) \u003c 0.92 : hash(k, b * 7 + 3) \u003c 0.1 + 0.6 * night;\n        if (on && P.on[k] && P.onT[k] \u003c 0.5) on = hash(k * 13 + b, floor(P.onT[k] * 22)) > 0.45;\n        const lc = hash(k, b + 40) \u003c 0.75 ? [255, 184, 88] : [200, 228, 255], a = on ? 0.9 + 0.1 * night : 0;\n        for (let c = 0; c \u003c 3; c++) F[o + c] = mix(row[rr + c] * 0.42 + c * 5, lc[c], a) * (ry === 2 ? 1.12 : 1);\n      } else {\n        // An open floor: dark inside, the back columns, a work lamp at night.\n        if (night > 0.05 && bx === 2 && ry === 2 && hash(k, b) \u003c 0.6) put(x, y, [255, 214, 150].map((v) => v * night));\n        else sur(x, y, 60, 54, 52, bx === 2 ? 0.6 : 0.28);\n      }\n    }\n  }\n  // Ties from the mast to the frame.\n  for (let k = 2; k \u003c n; k += 3) for (let x = BX1 + 1; x \u003c MX - 2; x++) sur(x, GY - (k + 1) * FH + 1, 200, 170, 60);\n\n  // The floor on the deck: starter bars, the core panel, the rebar cages, the formwork.\n  const top = dk - FH, st = P.top ? 0 : P.stage;\n  if (st > 0) for (let y = top + 1; y \u003c dk; y++) for (let x = BX0 + 30; x \u003c= BX0 + 34; x++) sur(x, y, 176, 172, 164, x === BX0 + 32 ? 0.8 : 1);\n  for (let ci = 0; ci \u003c 6; ci++) {\n    const x = BX0 + ci * 7;\n    for (let j = 1; j \u003c= max(2, st > 1 ? round(P.cage * 5) : 0); j++) sur(x, dk - j, 176, 96, 50), j & 1 && sur(x + 1, dk - j, 130, 76, 44);\n    if (st > 2 && ci / 6 \u003c P.form) for (let j = 1; j \u003c FH; j++) sur(x, dk - j, 218, 162, 84), sur(x + 1, dk - j, 196, 140, 70);\n  }\n  if (st > 2) for (let x = BX0; x \u003c= BX0 + 36 * P.form; x++) for (let j = 0; j \u003c ((x - BX0) % 7 === 4 ? FH : 1); j++) j ? sur(x, top + j, 150, 150, 156, 0.8) : sur(x, top, 214, 156, 80);\n  if (P.pourX >= 0 && !P.top) for (let x = BX0; x \u003c= min(BX1, P.pourX); x++) sur(x, top, 140, 140, 150), (x - BX0) % 7 \u003c 2 && sur(x, top + 1, 140, 140, 150, 0.9);\n  if (P.item > 0) drawLoad(P.item, P.ix, dk - LH[P.item]);\n  // Topped out: a little fir tree on the roof.\n  if (P.top) for (let j = 0; j \u003c 5; j++) for (let i = -j; i \u003c= j; i++) sur(24 + i, dk - 6 + j, 40, 120, 60);\n  // The workers on the deck in hi-vis, and the welder by a column.\n  for (const w of P.wk) man(w.x, dk - 1);\n  man(17, dk - 1, [60, 60, 70]);\n}\n\n// One of the four loads, centred on x with its top on row y0.\nfunction drawLoad(type, cx, y0) {\n  const w = LW[type], h = LH[type], x0 = round(cx - w / 2), y = round(y0);\n  for (let j = 0; j \u003c h; j++)\n    for (let i = 0; i \u003c w; i++) {\n      const X = x0 + i, Y = y + j;\n      if (type === 0) (i \u003c 2 || i > 4 || !j || j > 3) && sur(X, Y, 150, 146, 140, i && j ? 1 : 1.25);\n      else if (type === 1) sur(X, Y, i === 2 || i === 8 ? 60 : 186, i === 2 || i === 8 ? 54 : 92, 48, j ? 0.72 : 1);\n      else if (type === 2) sur(X, Y, 226, 170, 92, j & 1 ? 0.55 : 1);\n      else if (i >= (j >= h - 2 ? 1 : 0) && i \u003c w - (j >= h - 2 ? 1 : 0)) sur(X, Y, 120, 120, 128, j === 1 ? 0.6 : j === 0 ? 1.3 : 1);\n    }\n  if (type === 3) sur(x0 + 2, y + h, 70, 70, 76);\n}\n\n// The hook block, its cable and slings, and whatever it carries.\nfunction hook(P) {\n  const [tx, ty] = tip(P), hx = tx + P.swx, hy = P.hy;\n  line(tx, ty + 1, hx, hy - 1, [120, 120, 130], 0.9);\n  for (let i = -1; i \u003c= 1; i++) surc(hx + i, hy - 1, YEL);\n  sur(hx, hy, 60, 60, 66), sur(hx, hy + 1, 90, 90, 96);\n  if (P.load >= 0) {\n    const w = LW[P.load] / 2 - 0.5;\n    line(hx, hy + 1, hx - w, hy + 3, [110, 110, 116], 0.8), line(hx, hy + 1, hx + w, hy + 3, [110, 110, 116], 0.8);\n    drawLoad(P.load, hx + 0.5, hy + 3);\n    // Concrete runs from the bucket into the forms.\n    if (P.ph === \"P\" || P.ph === \"I\") for (let j = hy + 10; j \u003c deckY(P) - FH; j++) sur(hx + 0.5, j, 140, 140, 150);\n  }\n}\n\n// The yard: stock waiting by the crane, the load being rigged, the floodlight tower.\nfunction yard(P) {\n  drawLoad(2, 53, 115), drawLoad(1, 54, 118);\n  if (P.ph === \"A\" || P.ph === \"B\") {\n    const s = P.stage, x = MX + PICK_R - LW[s] / 2 - 2, arm = P.ph === \"B\" ? (P.pt * 6) & 1 : 0;\n    drawLoad(s, MX + PICK_R + 0.5, PICK_Y - LH[s]);\n    man(x, PICK_Y - 1), sur(x + 1, PICK_Y - 2 - arm, 255, 130, 20);\n  }\n  for (let y = LY; y \u003c 122; y++) sur(62, y, 120, 120, 126);\n  const fon = sm(0.3, 0.55, P.h);\n  for (let x = 59; x \u003c= 62; x++) put(x, 83, [90, 90, 96]), put(x, 84, x \u003c 62 ? [70 + 185 * fon, 70 + 180 * fon, 76 + 154 * fon] : [90, 90, 96]);\n}\n\n// The crane: mast, ties, slewing ring, cab, tower head, jib and counter-jib.\nfunction crane(P) {\n  const c = cos(P.th), sn = sin(P.th), blink = P.rt % 1.2 \u003c 0.55, fon = sm(0.3, 0.55, P.h);\n  const jib = () => {\n    for (let s = 0; s \u003c= JL; s += 0.3) {\n      // Swung towards you the tip is nearer and bigger, swung away it shrinks.\n      const sc = 1 + (0.45 * s * sn) / JL, px = MX + s * c, py = JY - s * sn * 0.1, ht = (3 - (1.2 * s) / JL) * sc, tri = abs(((s / 2.4) % 2) - 1), wd = sn * 1.2 * sc;\n      surc(px - wd, py, YEL, 0.85), surc(px + wd, py, YEL, 0.85), surc(px, py - ht, YEL), surc(px + wd * (1 - tri), py - tri * ht, YEL, 0.75);\n    }\n  };\n  const counter = () => {\n    for (let s = 0; s \u003c= CJL; s += 0.3) {\n      const px = MX - s * c, py = JY + s * sn * 0.1;\n      surc(px, py, YEL, 0.85), surc(px, py - 1, YEL, s % 2 \u003c 0.6 ? 0.8 : 0);\n      if (s > 6 && s \u003c 8.5) for (let j = 1; j \u003c= 2; j++) sur(px, py - 1 - j, 80, 84, 92);\n      if (s > CJL - 5) for (let j = 1; j \u003c= 4; j++) sur(px, py + j, 190, 184, 172, (floor(s) & 1) === 0 ? 0.8 : 1);\n    }\n  };\n  const pend = () => {\n    line(MX, APEX + 1, MX + 28 * c, JY - 28 * sn * 0.1 - 2.2, [110, 104, 96], 0.8);\n    line(MX, APEX + 1, MX - CJL * c, JY + CJL * sn * 0.1 - 1, [110, 104, 96], 0.8);\n  };\n  const cab = () => {\n    for (let q = 0, i, j; q \u003c 12; q++)\n      (i = (q % 3) - 1), (j = (q / 3) | 0), j % 3 && i > -1 ? put(MX + 3.5 * c + i, JY + 1 + j, P.h > 0.5 ? [255 * fon, 226 * fon, 160 * fon] : [110, 150, 196]) : surc(MX + 3.5 * c + i, JY + 1 + j, [240, 232, 210]);\n  };\n  // What faces away is drawn first.\n  if (sn \u003c 0) jib(), pend(), cab();\n  else counter(), pend();\n  // The mast: two chords and a lattice of diagonals.\n  for (let y = JY + 3; y \u003c 118; y++) {\n    surc(MX - 2, y, YEL, 0.72), surc(MX + 2, y, YEL);\n    for (let xi = 1; xi \u003c= 3; xi++) if (((y + xi) & 3) === 0 || ((y - xi) & 3) === 0) surc(MX - 2 + xi, y, YEL, 0.8);\n  }\n  for (let x = MX - 4; x \u003c= MX + 4; x++) sur(x, 117, 170, 166, 160), sur(x, 118, 170, 166, 160), sur(x, 119, 170, 166, 160), abs(x - MX) \u003c 4 && (sur(x, JY + 1, 80, 80, 86), sur(x, JY + 2, 110, 110, 116));\n  // The tower head.\n  for (let y = APEX; y \u003c= JY - 3; y++) {\n    const hw = (1.6 * (y - APEX)) / (JY - 3 - APEX);\n    surc(MX - hw, y, YEL), surc(MX + hw, y, YEL);\n    if ((y & 1) === 0) for (let x = round(MX - hw); x \u003c= MX + hw; x++) surc(x, y, YEL, 0.8);\n  }\n  if (sn \u003c 0) counter(), pend();\n  else jib(), pend(), cab();\n  // The trolley, and the warning lights on the head and at the jib tip.\n  const [tx, ty] = tip(P);\n  sur(tx - 1, ty, 90, 90, 96), sur(tx, ty, 90, 90, 96), sur(tx + 1, ty, 90, 90, 96);\n  for (const [x, y] of [[MX, APEX - 1], [MX + JL * c, JY - JL * sn * 0.1 - 2]]) {\n    put(x, y, blink ? [255, 40, 28] : [110, 20, 16]);\n    if (blink) glow(x, y, [255, 30, 20], 0.12 + 0.3 * fon);\n  }\n}\n\n// The mixer, its drum turning.\nfunction mixer(P) {\n  const x0 = round(P.mix), night = sm(0.4, 0.9, P.h);\n  if (x0 \u003c -24) return;\n  for (let y = 115; y \u003c= 121; y++)\n    for (let i = 0; i \u003c 13; i++) {\n      const e = ((i - 6) / 6.8) ** 2 + ((y - 118 + (i - 6) * 0.18) / 3.4) ** 2;\n      if (e \u003c 1) sur(x0 + i, y, ...((((i * 0.7 + y * 1.4 - P.t * 9) % 4) + 4) % 4 \u003c 2 ? [240, 120, 40] : [230, 228, 220]), 1 - 0.3 * e);\n    }\n  for (let i = 0; i \u003c 20; i++) sur(x0 + i, 122, 70, 70, 76);\n  for (let y = 116; y \u003c 122; y++) for (let i = 15; i \u003c 20; i++) sur(x0 + i, y, ...(y \u003c 119 && i > 16 ? [110, 150, 190] : [230, 60, 40]));\n  for (const i of [2, 5, 16]) sur(x0 + i, 123, 30, 30, 34), sur(x0 + i + 1, 123, 30, 30, 34);\n  if (night > 0.1) add(x0 + 20, 120, [255, 240, 200], night);\n}\n\nfunction cars(P) {\n  const night = sm(0.35, 0.9, P.h), cols = [[200, 40, 36], [220, 220, 226], [40, 80, 170], [60, 64, 70]];\n  for (const [cx, v, ci] of P.cars) {\n    const x0 = round(cx), fx = v > 0 ? x0 + 6 : x0;\n    for (let i = 0; i \u003c 21; i++) i \u003c 14 ? surc(x0 + (i >> 1), 125 + (i & 1), cols[ci]) : i \u003c 17 && sur(x0 + i - 12, 124, 120, 150, 180);\n    add(fx, 125, [255, 250, 220], 0.3 + night), add(x0 + 6 - fx + x0, 125, [255, 20, 10], 0.2 + night);\n  }\n}\n\nexport function draw(display, params) {\n  const P = params.s;\n  if (!P || P.h === undefined) return;\n  [F, LM] = [P.f, P.lm];\n  const hh = cl(P.h, 0, 1) * 3, i0 = min(2, floor(hh)), K = KEYS[i0].map((v, c) => mix(v, KEYS[i0 + 1][c], hh - i0));\n  // The hook goes behind the frame when the jib swings away from you.\n  const behind = sin(P.th) \u003c -0.15, y = deckY(P) - 2, FLb = P.fl;\n  sky(P, K), clouds(P, K), light(P, K), ground(), behind && hook(P), building(P), yard(P), crane(P), mixer(P), cars(P), behind || hook(P);\n  // The welding arc, its sparks, and the floodlight beams in the dusk air.\n  if (P.welding) put(18, y, [235, 244, 255]), glow(18, y, [160, 190, 255], 0.36 + 0.24 * rnd());\n  for (const [x, y, , , l, px, py] of P.sp) put(px, py, [255, 120, 30], min(1, l * 1.4) * 0.6), put(x, y, [255, 170 + 80 * min(1, l), 70 * min(1, l)], min(1, l * 1.4));\n  if (P.h > 0.3) for (let i = 0, o = 0; i \u003c N; i++, o += 3) if (FLb[i] > 0.01) for (let c = 0; c \u003c 3; c++) F[o + c] += FLb[i] * 22 * FLC[c];\n  for (let i = 0, o = 0; i \u003c N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Dusk=0..1, Speed=0.2..3, Floors=9..13, Wind=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Dusk","min":0,"max":1,"about":"From late afternoon at 0, the sun low over the yard and the frame lit gold, to night at 1, when the sky goes navy, the floodlight and the trolley's lamp come on and most windows are lit."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 one lift takes about ten seconds: down to the yard, rig, hoist the whole height, slew over and set down. At 0.2 it all runs ten times slower."},{"name":"Floors","min":9,"max":13,"about":"How many floors are up when it starts, nine to thirteen. Every fourth lift is the concrete bucket, and its pour adds a floor until the frame has thirteen and tops out with a fir tree on the roof."},{"name":"Wind","min":-1,"max":1,"about":"Clouds thicken and drift with it either way, their shadows cross the frame, and the load leans and swings on its cable."}],"start":[0,2,9,0.06],"measures":{"motion":0.1573,"detail":0.0705,"edges":0.403,"complexity":1.4462,"coverage":0.9851,"colour":0.2925,"drift":0.0434},"knobResponse":[0.3747,0.0499,0.0453,0.0999]},{"slug":"train-window","title":"Train Window","family":"space","round":17,"note":"달리는 기차 창밖이 층층이 흘러요. 먼 구름과 산은 느리게, 들판과 농가는 빠르게 지나가고 전차선 기둥은 휙 스쳐요. 깎은 비탈이 다가오면 터널이 창을 검게 덮고 나트륨등이 줄을 그으며 지나가요.","idea":"The view from a train window slides by in layers, slower the farther they are, from clouds and hazy mountains to fields, farmhouses, trees and whipping catenary masts, until a cutting closes in and a tunnel turns the glass black with its lamps streaking past.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Train Window\n// Family:  space\n// Idea:    The view from a train window slides by in layers, slower the farther they are, from clouds and hazy mountains to fields, farmhouses, trees and whipping catenary masts, until a cutting closes in and a tunnel turns the glass black with its lamps streaking past.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17; the parallax scrolling of side-scrolling games, from depths in metres through a pinhole camera\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Time=0..1, Speed=0.2..3, Hills=0..1, Rain=0..1\n//\n// Knob 1: Time. The time of day from noon, through a golden afternoon, a sunset behind the mountains, a starry night with lit farmhouse windows and a pink dawn, back to noon.\n// Knob 2: Speed. How fast the train runs: 90 km/h at 2, when a catenary mast crosses the window in a quarter of a second and the mountains hardly move; 9 km/h at 0.2, and 135 km/h at 3.\n// Knob 3: Hills. At 0 farmland under low mountains and a tunnel about every 20 seconds; turned up, the mountains rise nearly three times as high, the hills swell and the tunnels come sooner, then every six to nine seconds.\n// Knob 4: Rain. Raindrops on the glass that the wind drives back along it, and an overcast sky; at the top the light is grey and the glass is crowded.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The window's glass: columns 3 to 60 and rows 6 to 107, corners rounded.\nconst WX0 = 3;\nconst WX1 = 60;\nconst WY0 = 6;\nconst WY1 = 107;\nconst CORNER = 5;\n// The camera looks out from column CX, the horizon on row HOR, F LEDs to one\n// unit of tan, from an embankment EYE metres above the plain.\nconst CX = 31.5;\nconst HOR = 58;\nconst F = 40;\nconst EYE = 12;\n// Depths in metres. Each layer slides F / depth LEDs for every metre the train runs.\nconst Z_CLOUD = 3000;\nconst Z_MOUNT = 2400;\nconst Z_HILL = 320;\nconst Z_WALL = 6;\nconst Z_TUBE = 3.5;\nconst Z_MAST = 4.5;\n// Where the fields change, by depth: a hedge runs along each line.\nconst BANDS = [10, 16, 24, 36, 54, 80, 120, 190, 300, 520, 1e9];\n// Tree rows as depth, spacing, chance of a tree, crown radius in metres.\nconst TREES = [\n  [48, 7, 0.55, 3.2],\n  [19, 11, 0.35, 3.6],\n  [10, 17, 0.22, 4.2],\n];\nconst MAST_GAP = 50;\n// The first tunnel: at Speed 2 the window goes dark 4.4 s in and is light again at 6.6 s.\nconst FIRST = 115;\nconst FIRST_LEN = 45;\nconst CUT = 35;\nconst LAMP_GAP = 8;\n// A lamp's light by rows from its two-row core.\nconst GLOW = [1, 0.4, 0.14, 0.05];\n\n// Fields at noon: pasture, young wheat, ripe wheat, ploughed earth, dark clover, rapeseed.\nconst FIELDS = [\n  [86, 150, 58],\n  [124, 176, 70],\n  [206, 180, 92],\n  [140, 100, 62],\n  [58, 112, 48],\n  [222, 202, 62],\n];\n// The day as [time, sky at the top, sky at the horizon, light on the land]:\n// noon, golden afternoon, sunset, dusk, night, dawn and noon again.\nconst DAY = [\n  [0, 38, 104, 214, 168, 204, 236, 1, 1, 1],\n  [0.2, 64, 112, 196, 238, 204, 150, 1.04, 0.9, 0.7],\n  [0.34, 52, 44, 116, 255, 128, 58, 0.86, 0.55, 0.42],\n  [0.44, 14, 14, 46, 92, 56, 80, 0.3, 0.24, 0.34],\n  [0.5, 3, 5, 18, 16, 20, 44, 0.1, 0.12, 0.2],\n  [0.76, 3, 5, 18, 16, 20, 44, 0.1, 0.12, 0.2],\n  [0.86, 46, 60, 132, 238, 168, 150, 0.72, 0.6, 0.64],\n  [1, 38, 104, 214, 168, 204, 236, 1, 1, 1],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth 1D value noise, 0..1.\nfunction n1(u, s) {\n  const i = Math.floor(u);\n  const f = u - i;\n  const t = f * f * (3 - 2 * f);\n  return hash(i, s) * (1 - t) + hash(i + 1, s) * t;\n}\n\n// The mountain ridge at u, 0..1, its peaks sharpened by the power.\nfunction ridge(u) {\n  return (0.62 * n1(u / 21, 5) + 0.28 * n1(u / 8, 6) + 0.1 * n1(u / 3, 7)) ** 1.6;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction keyed(table, t, out) {\n  let i = 0;\n  while (i \u003c table.length - 2 && t > table[i + 1][0]) i++;\n  const a = table[i];\n  const b = table[i + 1];\n  const f = smooth(0, 1, (t - a[0]) / (b[0] - a[0]));\n  for (let k = 1; k \u003c a.length; k++) out[k - 1] = a[k] + (b[k] - a[k]) * f;\n}\n\nfunction inGlass(x, y) {\n  if (x \u003c WX0 || x > WX1 || y \u003c WY0 || y > WY1) return false;\n  const dx = x \u003c WX0 + CORNER ? WX0 + CORNER - x : x > WX1 - CORNER ? x - (WX1 - CORNER) : 0;\n  const dy = y \u003c WY0 + CORNER ? WY0 + CORNER - y : y > WY1 - CORNER ? y - (WY1 - CORNER) : 0;\n  return dx * dx + dy * dy \u003c= CORNER * CORNER + 1;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.fb = new Float32Array(N * 3);\n  P.glass = new Uint8Array(N);\n  P.wall = new Float32Array(N * 3);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (inGlass(x, y)) {\n        P.glass[p] = 1;\n        continue;\n      }\n      // The carriage wall, the rubber seal and aluminium trim round the glass, the sill.\n      let near = 9;\n      for (let dy = -2; dy \u003c= 2; dy++)\n        for (let dx = -2; dx \u003c= 2; dx++) if (inGlass(x + dx, y + dy)) near = Math.min(near, Math.max(Math.abs(dx), Math.abs(dy)));\n      put(P.wall, p, ...(near === 1 ? [18, 18, 20] : near === 2 ? [118, 120, 124] : y > WY1 + 6 ? [48, 44, 42] : y > WY1 + 2 ? [96, 88, 80] : [56, 51, 48]));\n    }\n  }\n  // A wine-red curtain, gathered at the left and tied back at row 66.\n  for (let y = 0; y \u003c= WY1 + 2; y++) {\n    const w = y \u003c 66 ? 7 - (y / 66) * 3.5 : 3.5 + ((y - 66) / 40) * 3;\n    for (let x = 0; x \u003c WX0 + w; x++) {\n      const p = y * W + x;\n      P.glass[p] = 0;\n      const fold = (x + Math.floor((y \u003c 66 ? 66 - y : y - 66) / 14)) % 3;\n      const v = (fold === 0 ? 0.5 : fold === 2 && y > 66 ? 0.8 : 1) * (y > 63 && y \u003c 69 ? 0.6 : 1);\n      put(P.wall, p, 118 * v, 30 * v, 40 * v);\n    }\n  }\n  // The carriage as the glass reflects it: ceiling lamps, the luggage rack, the\n  // far windows between their pillars, seat backs with white headrest cloths.\n  P.mirror = new Float32Array(N * 3);\n  for (let y = WY0; y \u003c= WY1; y++)\n    for (let x = WX0; x \u003c= WX1; x++) {\n      const p = y * W + x;\n      const seat = (x + 4) % 27;\n      const top = 78 + Math.abs(seat - 12) * 0.25;\n      const pillar = x % 27 \u003c 6 && y > WY0 + 9 ? [54, 50, 46] : [0, 0, 0];\n      let c = pillar;\n      if (y \u003c WY0 + 7) c = y === WY0 + 2 || y === WY0 + 3 ? [96, 90, 74] : [52, 48, 44];\n      else if (y === WY0 + 8) c = [60, 58, 56];\n      else if (y >= 74 && (seat \u003c 3 || seat > 21)) c = y > 98 ? [40, 40, 44] : [0, 0, 0];\n      else if (y >= 74 && y >= top) c = y \u003c top + 5 && seat > 6 && seat \u003c 18 ? [58, 58, 54] : [32, 38, 58];\n      put(P.mirror, p, ...c);\n    }\n  // Clouds: a tileable fractal noise 128 wide and 64 tall.\n  P.cloud = new Float32Array(128 * 64);\n  for (let y = 0; y \u003c 64; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      let v = 0;\n      for (let o = 0; o \u003c 4; o++) {\n        const cx = 4 \u003c\u003c o;\n        const cy = cx >> 1;\n        const ix = Math.floor((x / 128) * cx);\n        const iy = Math.floor((y / 64) * cy);\n        const tx = smooth(0, 1, (x / 128) * cx - ix);\n        const ty = smooth(0, 1, (y / 64) * cy - iy);\n        const c = (i, j) => hash(((ix + i) % cx) + o * 97, (iy + j) % cy);\n        const top = c(0, 0) + (c(1, 0) - c(0, 0)) * tx;\n        v += (0.55 / (1 \u003c\u003c o)) * (top + (c(0, 1) + (c(1, 1) - c(0, 1)) * tx - top) * ty);\n      }\n      P.cloud[y * 128 + x] = v;\n    }\n  // Per column: the tops of the mountains and hills, and their shading.\n  for (const key of [\"mTop\", \"mLit\", \"hTop\", \"hSh\"]) P[key] = new Float32Array(W);\n  P.dark = new Uint8Array(W);\n  P.day = new Float32Array(9);\n  P.sky = P.day.subarray(0, 6);\n  P.light = P.day.subarray(6, 9);\n  P.haze = new Float32Array(3);\n  Object.assign(P, { night: 0, cam: 0, time: 0, hills: 0, rain: 0.06, clock: 0, adapt: 0, tunnels: null, nextKey: 1 });\n  // Raindrops on the glass: x, y and how fast each one runs.\n  P.drops = [];\n  for (let i = 0; i \u003c 160; i++) P.drops.push([WX0 + Math.random() * (WX1 - WX0), WY0 + Math.random() * (WY1 - WY0), 0.6 + 0.8 * Math.random()]);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));\n  P.time = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.hills = clamp(k[2], 0, 1);\n  P.rain = clamp(k[3], 0, 1);\n  if (!P.tunnels) {\n    // In hill country the first tunnel comes sooner.\n    const a = FIRST - 70 * P.hills;\n    P.tunnels = [[a, a + FIRST_LEN]];\n  }\n  P.step = 12.5 * P.speed * dt;\n  P.cam += P.step;\n  P.clock += dt;\n  // Lay the next tunnel once the last one is behind: farther apart in flat country.\n  const tl = P.tunnels;\n  const last = tl[tl.length - 1];\n  if (P.cam > last[1] + 30) {\n    const gap = (480 - 400 * P.hills) * (0.7 + 0.6 * hash(P.nextKey, 1)) + 60;\n    const len = 25 + 50 * hash(P.nextKey, 2) + 30 * P.hills;\n    tl.push([last[1] + gap, last[1] + gap + len]);\n    P.nextKey++;\n    if (tl.length > 3) tl.shift();\n  }\n  // Eyes adjust: dark-adapted in a tunnel, so daylight blazes for a moment after it.\n  const inside = P.tunnelShare || 0;\n  P.adapt += (inside - P.adapt) * Math.min(1, dt * (inside > P.adapt ? 1.6 : 1.4));\n  // Rain runs back along the glass, faster the faster the train.\n  const want = Math.round(P.rain * 160);\n  for (let i = 0; i \u003c want; i++) {\n    const d = P.drops[i];\n    d[0] -= dt * d[2] * (2 + 7 * P.speed);\n    d[1] += dt * d[2] * (1.5 + 1.5 * P.speed) * 0.4;\n    if (d[0] \u003c WX0 || d[1] > WY1) {\n      d[0] = WX0 + Math.random() * (WX1 - WX0);\n      d[1] = WY0 + Math.random() * (WY1 - WY0);\n    }\n  }\n}\n\n// The line at X metres: 0 open, 1 a cutting (its wall's height in out[0]), 2 a portal, 3 a tunnel.\nfunction track(P, X, out) {\n  const tl = P.tunnels;\n  for (let i = 0; i \u003c tl.length; i++) {\n    const a = tl[i][0];\n    const b = tl[i][1];\n    if (X >= a && X \u003c b) return 3;\n    if ((X >= a - 1.4 && X \u003c a) || (X >= b && X \u003c b + 1.4)) return 2;\n    const u = X \u003c a ? 1 - (a - X) / CUT : 1 - (X - b) / (CUT * 0.7);\n    if (u > 0 && u \u003c 1) {\n      out[0] = -7 + 17 * Math.pow(u, 1.4);\n      return 1;\n    }\n  }\n  return 0;\n}\n\nconst CUTH = new Float32Array(1);\n\nfunction put(fb, p, r, g, b) {\n  fb[p * 3] = r;\n  fb[p * 3 + 1] = g;\n  fb[p * 3 + 2] = b;\n}\n\n// A colour on the land, lit by the hour and faded into the haze.\nfunction land(P, p, r, g, b, fade) {\n  const { light: L, haze: h } = P;\n  put(P.fb, p, r * L[0] * (1 - fade) + h[0] * fade, g * L[1] * (1 - fade) + h[1] * fade, b * L[2] * (1 - fade) + h[2] * fade);\n}\n\nfunction mix(fb, p, r, g, b, a) {\n  fb[p * 3] += (r - fb[p * 3]) * a;\n  fb[p * 3 + 1] += (g - fb[p * 3 + 1]) * a;\n  fb[p * 3 + 2] += (b - fb[p * 3 + 2]) * a;\n}\n\n// Per frame: the sky, the light, the haze and the far silhouettes.\nfunction frameLight(P) {\n  const { sky, light: L, rain, cam } = P;\n  keyed(DAY, P.time, P.day);\n  // Overcast: the sky goes grey and the land dims.\n  const grey = 0.75 * rain;\n  const dim = 1 - 0.35 * rain;\n  const lum = (L[0] + L[1] + L[2]) / 3;\n  for (let i = 0; i \u003c 6; i++) sky[i] += (150 * lum + 12 - sky[i]) * grey;\n  for (let i = 0; i \u003c 3; i++) L[i] *= dim;\n  P.night = 1 - smooth(0.05, 0.35, lum);\n  P.haze[0] = sky[3];\n  P.haze[1] = sky[4];\n  P.haze[2] = sky[5];\n  const offM = (cam * F) / Z_MOUNT;\n  const offH = (cam * F) / Z_HILL;\n  const offC = (cam * F) / Z_CLOUD + P.clock * 0.6;\n  const mAmp = 18 + 30 * P.hills;\n  const hAmp = 6 + 20 * P.hills;\n  for (let x = 0; x \u003c W; x++) {\n    const u = x + offM;\n    const m = ridge(u);\n    const m2 = ridge(u + 1);\n    P.mTop[x] = HOR - 2 - mAmp * m;\n    // The sun is in the south-west: faces that fall to the right are in shade.\n    P.mLit[x] = m2 > m ? 1 : 0.72;\n    const h = x + offH;\n    P.hTop[x] = HOR + 1 - hAmp * (0.7 * n1(h / 15, 8) + 0.3 * n1(h / 5, 9)) - 1.5;\n    P.hSh[x] = 0.8 + 0.2 * n1(h / 3, 11);\n  }\n  P.offC = offC;\n}\n\n// The land and the sky, LED by LED.\nfunction paintLand(P) {\n  const { fb, glass, cam, light: L, sky, rain, night, offC } = P;\n  for (let y = WY0; y \u003c= WY1; y++) {\n    const s = (y - WY0) / (HOR - WY0);\n    const sr = sky[0] + (sky[3] - sky[0]) * s;\n    const sg = sky[1] + (sky[4] - sky[1]) * s;\n    const sb = sky[2] + (sky[5] - sky[2]) * s;\n    const k = y - HOR + 0.5;\n    const z = k > 0 ? (EYE * F) / k : 0;\n    let band = 0;\n    while (z > BANDS[band + 1]) band++;\n    const zUp = k > 1 ? (EYE * F) / (k - 1) : 1e9;\n    const hedge = k > 0 && zUp > BANDS[band + 1];\n    const fade = k > 0 ? 1 - Math.exp(-z / 700) : 0;\n    // Furrows show where a row of LEDs is under 0.84 m of ground: a stripe every 2 m.\n    const furrow = k > 0 && (z * z) / (EYE * F) \u003c 0.84;\n    const rowUp = z * 0.5 - Math.floor(z * 0.5) \u003c 0.5;\n    // A near row slides several LEDs a frame: blur it along the line.\n    const slide = k > 0 ? (P.step * F) / z : 0;\n    const taps = slide > 3 ? Math.min(4, Math.ceil(slide / 2)) : 1;\n    const bw = 18 + 0.35 * BANDS[band];\n    const shift = hash(band, 3);\n    let lastCell = 1e9;\n    let lastKind = 0;\n    for (let x = WX0; x \u003c= WX1; x++) {\n      const p = y * W + x;\n      if (!glass[p]) continue;\n      if (k \u003c= 0 || y \u003c P.hTop[x]) {\n        if (y >= P.hTop[x]) {\n          const sh = P.hSh[x];\n          land(P, p, 44 * sh, 100 * sh, 41 * sh, 0.3);\n        } else if (y >= P.mTop[x]) {\n          // Snow above row 32; the haze thins down the slopes.\n          const lit = P.mLit[x] * (y \u003c HOR - 26 ? 1.45 : 1);\n          land(P, p, 92 * lit, 104 * lit, 128 * lit, 0.45 - 0.15 * ((y - P.mTop[x]) / 30));\n        } else {\n          let r = sr;\n          let g = sg;\n          let b = sb;\n          // Stars come out as the sky darkens.\n          if (night > 0 && hash(x * 131 + y, 77) \u003c 0.012) {\n            const t = night * (90 + 120 * hash(x, y));\n            r += t;\n            g += t;\n            b += t;\n          }\n          // Clouds, stretched along the wind, greyer where they are thick.\n          const cv = P.cloud[((y - WY0) & 63) * 128 + (Math.floor((x + offC) * 0.5) & 127)];\n          const c = smooth(0.49 - 0.22 * rain, 0.54 - 0.2 * rain, cv);\n          if (c > 0) {\n            const top = cv > 0.6 - 0.2 * rain ? 0.82 : 1;\n            r += (235 * top * L[0] * 0.9 + 20 - r) * c;\n            g += (238 * top * L[1] * 0.9 + 20 - g) * c;\n            b += (242 * top * L[2] * 0.9 + 26 - b) * c;\n          }\n          put(fb, p, r, g, b);\n        }\n        continue;\n      }\n      // The plain: fields by depth band, each band cut into fields across the line.\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let t = 0; t \u003c taps; t++) {\n        const X = cam + ((x - CX + 0.5) * z) / F + (t * slide * z) / F / taps;\n        const cell = Math.floor(X / bw + shift);\n        if (cell !== lastCell) {\n          lastCell = cell;\n          lastKind = Math.floor(hash(band * 977 + cell, 4) * FIELDS.length);\n        }\n        const kind = lastKind;\n        const f = FIELDS[kind];\n        let sh = 1;\n        if (furrow) sh += (kind & 1 ? rowUp : X * 0.5 - Math.floor(X * 0.5) \u003c 0.5) ? 0.14 : -0.14;\n        if (hedge) sh = 0.45;\n        r += f[0] * sh;\n        g += f[1] * sh;\n        b += f[2] * sh;\n      }\n      land(P, p, r / taps, g / taps, b / taps, fade);\n    }\n  }\n}\n\n// The sun, low behind the mountains in the afternoon and at sunset.\nfunction paintSun(P) {\n  const { fb, glass } = P;\n  const sun = smooth(0.12, 0.22, P.time) * (1 - smooth(0.36, 0.42, P.time));\n  if (sun > 0) {\n    const sy = HOR - 36 + 24 * smooth(0.15, 0.4, P.time);\n    for (let y = Math.floor(sy - 5); y \u003c= sy + 5; y++)\n      for (let x = 40; x \u003c= 52; x++) {\n        const p = y * W + x;\n        if (y \u003c WY0 || !glass[p] || y >= P.mTop[x] || y > HOR) continue;\n        const d = Math.hypot(x - 46, y - sy);\n        const a = sun * (d \u003c 3.2 ? 1 : Math.max(0, 0.5 - (d - 3.2) * 0.2));\n        if (a > 0) mix(fb, p, 255, 236, 180, a);\n      }\n  }\n}\n\n// Farmhouses: white walls under red and grey roofs, lit windows at night.\nfunction paintHouses(P) {\n  const { glass, cam, night } = P;\n  for (let band = 3; band \u003c 8; band++) {\n    const z = Math.sqrt(BANDS[band] * BANDS[band + 1]);\n    const bw = 18 + 0.35 * BANDS[band];\n    const sc = F / z;\n    const ground = HOR + EYE * sc;\n    const fade = 1 - Math.exp(-z / 700);\n    const c0 = Math.floor((cam - 34 / sc) / bw + hash(band, 3)) - 1;\n    for (let cell = c0; cell \u003c c0 + 4 + (68 / sc) / bw; cell++) {\n      if (hash(band * 977 + cell, 5) > 0.3) continue;\n      const X = (cell - hash(band, 3) + 0.3 + 0.4 * hash(cell, band)) * bw;\n      const sx = CX + (X - cam) * sc;\n      const w = 10 * sc;\n      const wall = 5 * sc;\n      const roof = 3.5 * sc;\n      const red = hash(cell, band + 40) \u003c 0.6;\n      for (let y = Math.floor(ground - wall - roof); y \u003c ground; y++) {\n        const up = ground - y;\n        const inRoof = up > wall;\n        const half = inRoof ? (w * 0.5 + 0.5) * (1 - (up - wall) / roof) : w * 0.5;\n        for (let x = Math.floor(sx - half); x \u003c= sx + half; x++) {\n          if (x \u003c WX0 || x > WX1 || y \u003c WY0 || y > WY1) continue;\n          const p = y * W + x;\n          if (!glass[p]) continue;\n          if (!inRoof && night > 0.3 && up > wall * 0.35 && up \u003c wall * 0.75 && ((x - Math.floor(sx)) & 1) === 0) put(P.fb, p, 255 * night, 200 * night, 90 * night);\n          else if (inRoof) land(P, p, red ? 168 : 92, red ? 62 : 90, red ? 44 : 96, fade);\n          else land(P, p, 222, 216, 200, fade);\n        }\n      }\n    }\n  }\n}\n\n// Trees, the far row first, each crown lit from the upper left in three tones.\nfunction paintTrees(P) {\n  const { glass, cam } = P;\n  for (let row = 0; row \u003c TREES.length; row++) {\n    const [z, gap, chance, rad] = TREES[row];\n    const sc = F / z;\n    const ground = HOR + EYE * sc;\n    const fade = 1 - Math.exp(-z / 700);\n    const i0 = Math.floor((cam - (36 + rad * sc) / sc) / gap);\n    const i1 = Math.ceil((cam + (36 + rad * sc) / sc) / gap);\n    for (let i = i0; i \u003c= i1; i++) {\n      if (hash(i, row + 20) > chance) continue;\n      const X = (i + 0.5 * hash(i, row + 30)) * gap;\n      const sx = CX + (X - cam) * sc;\n      const tall = hash(i, row + 50) \u003c 0.3;\n      const rx = rad * sc * (tall ? 0.45 : 0.8 + 0.4 * hash(i, row + 40));\n      const ry = rad * sc * (tall ? 2.1 : 0.9);\n      const cy = ground - (2.4 * sc + ry);\n      const y0 = Math.max(WY0, Math.floor(cy - ry));\n      const y1 = Math.min(WY1, Math.ceil(ground));\n      const shade = hash(i, row + 60);\n      const irx = 1 / rx;\n      const iry = 1 / ry;\n      for (let y = y0; y \u003c= y1; y++) {\n        for (let x = Math.max(WX0, Math.floor(sx - rx)); x \u003c= Math.min(WX1, Math.ceil(sx + rx)); x++) {\n          const p = y * W + x;\n          if (!glass[p]) continue;\n          const dx = (x + 0.5 - sx) * irx;\n          const dy = (y + 0.5 - cy) * iry;\n          if (dx * dx + dy * dy \u003c 1) {\n            const lit = dx + dy \u003c -0.5 ? 1.08 : dx + dy \u003c 0.3 ? 0.86 : 0.66;\n            land(P, p, (30 + 14 * shade) * lit, (70 + 26 * shade) * lit, 30 * lit, fade);\n          } else if (y > cy && Math.abs(x + 0.5 - sx) \u003c Math.max(0.6, 0.25 * sc)) land(P, p, 52, 40, 30, fade);\n        }\n      }\n    }\n  }\n}\n\n// The cutting's rock walls rising to the portal, its stone face, then the black of the tunnel.\nfunction paintTrack(P) {\n  const { fb, glass, cam, dark } = P;\n  const scW = F / Z_WALL;\n  let darkCols = 0;\n  for (let x = WX0; x \u003c= WX1; x++) {\n    const X = cam + (x + 0.5 - CX) / scW;\n    const kind = track(P, X, CUTH);\n    dark[x] = kind === 3 ? 1 : 0;\n    if (kind === 0) continue;\n    if (kind === 3) darkCols++;\n    // The lip of the cutting is ragged with rock and scrub.\n    const top = kind === 1 ? HOR - CUTH[0] * scW - 2.5 * n1(X * 1.3, 12) - (hash(Math.floor(X * 2), 13) \u003c 0.2 ? 2 : 0) : -1;\n    for (let y = Math.max(WY0, Math.floor(top)); y \u003c= WY1; y++) {\n      const p = y * W + x;\n      if (!glass[p]) continue;\n      if (kind === 3) {\n        put(fb, p, 7, 7, 9);\n        continue;\n      }\n      if (kind === 2) {\n        // Dressed stone in courses of four rows, the joints staggered.\n        const course = y >> 2;\n        const joint = (y & 3) === 0 || Math.floor(X * 1.6 + (course & 1) * 0.5) !== Math.floor((X + 1 / scW) * 1.6 + (course & 1) * 0.5);\n        const v = joint ? 0.5 : 1 - 0.08 * (course % 3);\n        land(P, p, 152 * v, 140 * v, 120 * v, 0);\n        continue;\n      }\n      // Rock in tilted beds of pale and dark stone, grass along the lip.\n      const bed = Math.floor((HOR - y) / scW * 1.3 + 0.8 * Math.sin(X * 0.25)) & 1;\n      if (y - top \u003c 2) land(P, p, 70, 112, 50, 0);\n      else if (bed) land(P, p, 156, 142, 118, 0);\n      else land(P, p, 102, 92, 78, 0);\n    }\n  }\n  P.tunnelShare = darkCols / (WX1 - WX0 + 1);\n}\n\n// Sodium lamps every eight metres on the tunnel wall, smeared into streaks by the run.\nfunction paintLamps(P) {\n  const { fb, glass, cam, dark } = P;\n  const scT = F / Z_TUBE;\n  // The eye holds a lamp a little longer than a frame.\n  const streak = Math.max(1, 1.5 * P.step * scT);\n  const lampGain = 0.55 + 0.45 * P.adapt;\n  const l0 = Math.floor((cam - 40 / scT) / LAMP_GAP);\n  for (let i = l0; i \u003c l0 + 3; i++) {\n    const X = i * LAMP_GAP;\n    if (track(P, X, CUTH) !== 3) continue;\n    const sx = CX + (X - cam) * scT;\n    for (let x = Math.floor(sx); x \u003c sx + streak; x++) {\n      if (x \u003c WX0 || x > WX1) continue;\n      const along = 1 - (x - sx) / (streak + 1);\n      for (let dy = -3; dy \u003c= 4; dy++) {\n        const y = 48 + dy;\n        const p = y * W + x;\n        if (!glass[p] || dark[x] === 0) continue;\n        const a = GLOW[dy \u003c 0 ? -dy : Math.max(0, dy - 1)] * along * lampGain;\n        fb[p * 3] += 255 * a;\n        fb[p * 3 + 1] += 160 * a;\n        fb[p * 3 + 2] += 60 * a;\n      }\n    }\n  }\n}\n\n// Catenary masts and their wires, which rise and dip across the window as the spans go by.\nfunction paintMasts(P) {\n  const { fb, glass, cam, light: L } = P;\n  const scW = F / Z_WALL;\n  const scM = F / Z_MAST;\n  const m0 = Math.floor((cam - 40 / scM) / MAST_GAP);\n  for (let i = m0; i \u003c= m0 + 2; i++) {\n    const X = i * MAST_GAP;\n    if (track(P, X, CUTH) >= 2) continue;\n    const sx = CX + (X - cam) * scM;\n    const topY = HOR - 5.2 * scM;\n    for (let x = Math.floor(sx - 1); x \u003c= sx + 1 + 3; x++) {\n      if (x \u003c WX0 || x > WX1) continue;\n      const a = x \u003c= sx + 1 ? 1 : 0.35;\n      for (let y = Math.max(WY0, Math.floor(topY)); y \u003c= WY1; y++) {\n        const p = y * W + x;\n        if (glass[p]) mix(fb, p, 46 * L[0] + 6, 50 * L[1] + 6, 46 * L[2] + 8, a);\n      }\n    }\n  }\n  for (let x = WX0; x \u003c= WX1; x++) {\n    const X = cam + (x + 0.5 - CX) / scM;\n    if (track(P, cam + (x + 0.5 - CX) / scW, CUTH) >= 2) continue;\n    const u = X / MAST_GAP - Math.floor(X / MAST_GAP);\n    const ym = Math.round(HOR - (4.4 - 3.2 * u * (1 - u)) * scM);\n    const yc = Math.round(HOR - 3.0 * scM);\n    const dropper = X - Math.floor(X / 6) * 6 \u003c 0.12;\n    for (let y = ym; y \u003c= yc; y++) {\n      if (y !== ym && y !== yc && !dropper) continue;\n      if (y \u003c WY0) continue;\n      const p = y * W + x;\n      if (glass[p]) mix(fb, p, 26, 28, 28, 0.85);\n    }\n  }\n}\n\n// Raindrops: each a bead of brighter light with a short trail behind it.\nfunction paintRain(P) {\n  const { fb, glass } = P;\n  const drops = Math.round(P.rain * 160);\n  for (let i = 0; i \u003c drops; i++) {\n    const d = P.drops[i];\n    const x = Math.floor(d[0]);\n    const y = Math.floor(d[1]);\n    const len = 1 + Math.floor(P.speed * 1.4 * d[2]);\n    for (let j = 0; j \u003c= len; j++) {\n      const p = y * W + x + j;\n      if (x + j > WX1 || !glass[p]) continue;\n      const a = j === 0 ? 0.55 : 0.3 * (1 - j / (len + 1));\n      mix(fb, p, fb[p * 3] * 0.7 + 70, fb[p * 3 + 1] * 0.7 + 74, fb[p * 3 + 2] * 0.7 + 80, a);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  frameLight(P);\n  paintLand(P);\n  paintSun(P);\n  paintHouses(P);\n  paintTrees(P);\n  paintTrack(P);\n  paintLamps(P);\n  paintMasts(P);\n  paintRain(P);\n  present(display, P);\n}\n\n// Where it is dark outside the glass turns mirror and the carriage shows in it.\nfunction present(display, P) {\n  const { fb, glass, wall, mirror } = P;\n  const glow = 1 + 0.45 * P.adapt;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++, p++) {\n      const q = p * 3;\n      if (!glass[p]) {\n        display.setPixel(x, y, wall[q], wall[q + 1], wall[q + 2]);\n        continue;\n      }\n      let r = fb[q] * glow;\n      let g = fb[q + 1] * glow;\n      let b = fb[q + 2] * glow;\n      const out = r > g ? (r > b ? r : b) : g > b ? g : b;\n      if (out \u003c 60) {\n        const m = 1 - out / 60;\n        r += mirror[q] * m;\n        g += mirror[q + 1] * m;\n        b += mirror[q + 2] * m;\n      }\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n  }\n}\n","layer":{"id":"layer-train-window","type":"code","name":"train-window","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Train Window\n// Family:  space\n// Idea:    The view from a train window slides by in layers, slower the farther they are, from clouds and hazy mountains to fields, farmhouses, trees and whipping catenary masts, until a cutting closes in and a tunnel turns the glass black with its lamps streaking past.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 17; the parallax scrolling of side-scrolling games, from depths in metres through a pinhole camera\n// Round:   17\n// ===============================\n// @matrix 64x128\n// @knobs Time=0..1, Speed=0.2..3, Hills=0..1, Rain=0..1\n//\n// Knob 1: Time. The time of day from noon, through a golden afternoon, a sunset behind the mountains, a starry night with lit farmhouse windows and a pink dawn, back to noon.\n// Knob 2: Speed. How fast the train runs: 90 km/h at 2, when a catenary mast crosses the window in a quarter of a second and the mountains hardly move; 9 km/h at 0.2, and 135 km/h at 3.\n// Knob 3: Hills. At 0 farmland under low mountains and a tunnel about every 20 seconds; turned up, the mountains rise nearly three times as high, the hills swell and the tunnels come sooner, then every six to nine seconds.\n// Knob 4: Rain. Raindrops on the glass that the wind drives back along it, and an overcast sky; at the top the light is grey and the glass is crowded.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The window's glass: columns 3 to 60 and rows 6 to 107, corners rounded.\nconst WX0 = 3;\nconst WX1 = 60;\nconst WY0 = 6;\nconst WY1 = 107;\nconst CORNER = 5;\n// The camera looks out from column CX, the horizon on row HOR, F LEDs to one\n// unit of tan, from an embankment EYE metres above the plain.\nconst CX = 31.5;\nconst HOR = 58;\nconst F = 40;\nconst EYE = 12;\n// Depths in metres. Each layer slides F / depth LEDs for every metre the train runs.\nconst Z_CLOUD = 3000;\nconst Z_MOUNT = 2400;\nconst Z_HILL = 320;\nconst Z_WALL = 6;\nconst Z_TUBE = 3.5;\nconst Z_MAST = 4.5;\n// Where the fields change, by depth: a hedge runs along each line.\nconst BANDS = [10, 16, 24, 36, 54, 80, 120, 190, 300, 520, 1e9];\n// Tree rows as depth, spacing, chance of a tree, crown radius in metres.\nconst TREES = [\n  [48, 7, 0.55, 3.2],\n  [19, 11, 0.35, 3.6],\n  [10, 17, 0.22, 4.2],\n];\nconst MAST_GAP = 50;\n// The first tunnel: at Speed 2 the window goes dark 4.4 s in and is light again at 6.6 s.\nconst FIRST = 115;\nconst FIRST_LEN = 45;\nconst CUT = 35;\nconst LAMP_GAP = 8;\n// A lamp's light by rows from its two-row core.\nconst GLOW = [1, 0.4, 0.14, 0.05];\n\n// Fields at noon: pasture, young wheat, ripe wheat, ploughed earth, dark clover, rapeseed.\nconst FIELDS = [\n  [86, 150, 58],\n  [124, 176, 70],\n  [206, 180, 92],\n  [140, 100, 62],\n  [58, 112, 48],\n  [222, 202, 62],\n];\n// The day as [time, sky at the top, sky at the horizon, light on the land]:\n// noon, golden afternoon, sunset, dusk, night, dawn and noon again.\nconst DAY = [\n  [0, 38, 104, 214, 168, 204, 236, 1, 1, 1],\n  [0.2, 64, 112, 196, 238, 204, 150, 1.04, 0.9, 0.7],\n  [0.34, 52, 44, 116, 255, 128, 58, 0.86, 0.55, 0.42],\n  [0.44, 14, 14, 46, 92, 56, 80, 0.3, 0.24, 0.34],\n  [0.5, 3, 5, 18, 16, 20, 44, 0.1, 0.12, 0.2],\n  [0.76, 3, 5, 18, 16, 20, 44, 0.1, 0.12, 0.2],\n  [0.86, 46, 60, 132, 238, 168, 150, 0.72, 0.6, 0.64],\n  [1, 38, 104, 214, 168, 204, 236, 1, 1, 1],\n];\n\nfunction hash(a, b) {\n  let h = Math.imul(a | 0, 374761393) ^ Math.imul(b | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\n// Smooth 1D value noise, 0..1.\nfunction n1(u, s) {\n  const i = Math.floor(u);\n  const f = u - i;\n  const t = f * f * (3 - 2 * f);\n  return hash(i, s) * (1 - t) + hash(i + 1, s) * t;\n}\n\n// The mountain ridge at u, 0..1, its peaks sharpened by the power.\nfunction ridge(u) {\n  return (0.62 * n1(u / 21, 5) + 0.28 * n1(u / 8, 6) + 0.1 * n1(u / 3, 7)) ** 1.6;\n}\n\nfunction smooth(a, b, v) {\n  const t = Math.max(0, Math.min(1, (v - a) / (b - a)));\n  return t * t * (3 - 2 * t);\n}\n\nfunction keyed(table, t, out) {\n  let i = 0;\n  while (i \u003c table.length - 2 && t > table[i + 1][0]) i++;\n  const a = table[i];\n  const b = table[i + 1];\n  const f = smooth(0, 1, (t - a[0]) / (b[0] - a[0]));\n  for (let k = 1; k \u003c a.length; k++) out[k - 1] = a[k] + (b[k] - a[k]) * f;\n}\n\nfunction inGlass(x, y) {\n  if (x \u003c WX0 || x > WX1 || y \u003c WY0 || y > WY1) return false;\n  const dx = x \u003c WX0 + CORNER ? WX0 + CORNER - x : x > WX1 - CORNER ? x - (WX1 - CORNER) : 0;\n  const dy = y \u003c WY0 + CORNER ? WY0 + CORNER - y : y > WY1 - CORNER ? y - (WY1 - CORNER) : 0;\n  return dx * dx + dy * dy \u003c= CORNER * CORNER + 1;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.fb = new Float32Array(N * 3);\n  P.glass = new Uint8Array(N);\n  P.wall = new Float32Array(N * 3);\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (inGlass(x, y)) {\n        P.glass[p] = 1;\n        continue;\n      }\n      // The carriage wall, the rubber seal and aluminium trim round the glass, the sill.\n      let near = 9;\n      for (let dy = -2; dy \u003c= 2; dy++)\n        for (let dx = -2; dx \u003c= 2; dx++) if (inGlass(x + dx, y + dy)) near = Math.min(near, Math.max(Math.abs(dx), Math.abs(dy)));\n      put(P.wall, p, ...(near === 1 ? [18, 18, 20] : near === 2 ? [118, 120, 124] : y > WY1 + 6 ? [48, 44, 42] : y > WY1 + 2 ? [96, 88, 80] : [56, 51, 48]));\n    }\n  }\n  // A wine-red curtain, gathered at the left and tied back at row 66.\n  for (let y = 0; y \u003c= WY1 + 2; y++) {\n    const w = y \u003c 66 ? 7 - (y / 66) * 3.5 : 3.5 + ((y - 66) / 40) * 3;\n    for (let x = 0; x \u003c WX0 + w; x++) {\n      const p = y * W + x;\n      P.glass[p] = 0;\n      const fold = (x + Math.floor((y \u003c 66 ? 66 - y : y - 66) / 14)) % 3;\n      const v = (fold === 0 ? 0.5 : fold === 2 && y > 66 ? 0.8 : 1) * (y > 63 && y \u003c 69 ? 0.6 : 1);\n      put(P.wall, p, 118 * v, 30 * v, 40 * v);\n    }\n  }\n  // The carriage as the glass reflects it: ceiling lamps, the luggage rack, the\n  // far windows between their pillars, seat backs with white headrest cloths.\n  P.mirror = new Float32Array(N * 3);\n  for (let y = WY0; y \u003c= WY1; y++)\n    for (let x = WX0; x \u003c= WX1; x++) {\n      const p = y * W + x;\n      const seat = (x + 4) % 27;\n      const top = 78 + Math.abs(seat - 12) * 0.25;\n      const pillar = x % 27 \u003c 6 && y > WY0 + 9 ? [54, 50, 46] : [0, 0, 0];\n      let c = pillar;\n      if (y \u003c WY0 + 7) c = y === WY0 + 2 || y === WY0 + 3 ? [96, 90, 74] : [52, 48, 44];\n      else if (y === WY0 + 8) c = [60, 58, 56];\n      else if (y >= 74 && (seat \u003c 3 || seat > 21)) c = y > 98 ? [40, 40, 44] : [0, 0, 0];\n      else if (y >= 74 && y >= top) c = y \u003c top + 5 && seat > 6 && seat \u003c 18 ? [58, 58, 54] : [32, 38, 58];\n      put(P.mirror, p, ...c);\n    }\n  // Clouds: a tileable fractal noise 128 wide and 64 tall.\n  P.cloud = new Float32Array(128 * 64);\n  for (let y = 0; y \u003c 64; y++)\n    for (let x = 0; x \u003c 128; x++) {\n      let v = 0;\n      for (let o = 0; o \u003c 4; o++) {\n        const cx = 4 \u003c\u003c o;\n        const cy = cx >> 1;\n        const ix = Math.floor((x / 128) * cx);\n        const iy = Math.floor((y / 64) * cy);\n        const tx = smooth(0, 1, (x / 128) * cx - ix);\n        const ty = smooth(0, 1, (y / 64) * cy - iy);\n        const c = (i, j) => hash(((ix + i) % cx) + o * 97, (iy + j) % cy);\n        const top = c(0, 0) + (c(1, 0) - c(0, 0)) * tx;\n        v += (0.55 / (1 \u003c\u003c o)) * (top + (c(0, 1) + (c(1, 1) - c(0, 1)) * tx - top) * ty);\n      }\n      P.cloud[y * 128 + x] = v;\n    }\n  // Per column: the tops of the mountains and hills, and their shading.\n  for (const key of [\"mTop\", \"mLit\", \"hTop\", \"hSh\"]) P[key] = new Float32Array(W);\n  P.dark = new Uint8Array(W);\n  P.day = new Float32Array(9);\n  P.sky = P.day.subarray(0, 6);\n  P.light = P.day.subarray(6, 9);\n  P.haze = new Float32Array(3);\n  Object.assign(P, { night: 0, cam: 0, time: 0, hills: 0, rain: 0.06, clock: 0, adapt: 0, tunnels: null, nextKey: 1 });\n  // Raindrops on the glass: x, y and how fast each one runs.\n  P.drops = [];\n  for (let i = 0; i \u003c 160; i++) P.drops.push([WX0 + Math.random() * (WX1 - WX0), WY0 + Math.random() * (WY1 - WY0), 0.6 + 0.8 * Math.random()]);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));\n  P.time = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.hills = clamp(k[2], 0, 1);\n  P.rain = clamp(k[3], 0, 1);\n  if (!P.tunnels) {\n    // In hill country the first tunnel comes sooner.\n    const a = FIRST - 70 * P.hills;\n    P.tunnels = [[a, a + FIRST_LEN]];\n  }\n  P.step = 12.5 * P.speed * dt;\n  P.cam += P.step;\n  P.clock += dt;\n  // Lay the next tunnel once the last one is behind: farther apart in flat country.\n  const tl = P.tunnels;\n  const last = tl[tl.length - 1];\n  if (P.cam > last[1] + 30) {\n    const gap = (480 - 400 * P.hills) * (0.7 + 0.6 * hash(P.nextKey, 1)) + 60;\n    const len = 25 + 50 * hash(P.nextKey, 2) + 30 * P.hills;\n    tl.push([last[1] + gap, last[1] + gap + len]);\n    P.nextKey++;\n    if (tl.length > 3) tl.shift();\n  }\n  // Eyes adjust: dark-adapted in a tunnel, so daylight blazes for a moment after it.\n  const inside = P.tunnelShare || 0;\n  P.adapt += (inside - P.adapt) * Math.min(1, dt * (inside > P.adapt ? 1.6 : 1.4));\n  // Rain runs back along the glass, faster the faster the train.\n  const want = Math.round(P.rain * 160);\n  for (let i = 0; i \u003c want; i++) {\n    const d = P.drops[i];\n    d[0] -= dt * d[2] * (2 + 7 * P.speed);\n    d[1] += dt * d[2] * (1.5 + 1.5 * P.speed) * 0.4;\n    if (d[0] \u003c WX0 || d[1] > WY1) {\n      d[0] = WX0 + Math.random() * (WX1 - WX0);\n      d[1] = WY0 + Math.random() * (WY1 - WY0);\n    }\n  }\n}\n\n// The line at X metres: 0 open, 1 a cutting (its wall's height in out[0]), 2 a portal, 3 a tunnel.\nfunction track(P, X, out) {\n  const tl = P.tunnels;\n  for (let i = 0; i \u003c tl.length; i++) {\n    const a = tl[i][0];\n    const b = tl[i][1];\n    if (X >= a && X \u003c b) return 3;\n    if ((X >= a - 1.4 && X \u003c a) || (X >= b && X \u003c b + 1.4)) return 2;\n    const u = X \u003c a ? 1 - (a - X) / CUT : 1 - (X - b) / (CUT * 0.7);\n    if (u > 0 && u \u003c 1) {\n      out[0] = -7 + 17 * Math.pow(u, 1.4);\n      return 1;\n    }\n  }\n  return 0;\n}\n\nconst CUTH = new Float32Array(1);\n\nfunction put(fb, p, r, g, b) {\n  fb[p * 3] = r;\n  fb[p * 3 + 1] = g;\n  fb[p * 3 + 2] = b;\n}\n\n// A colour on the land, lit by the hour and faded into the haze.\nfunction land(P, p, r, g, b, fade) {\n  const { light: L, haze: h } = P;\n  put(P.fb, p, r * L[0] * (1 - fade) + h[0] * fade, g * L[1] * (1 - fade) + h[1] * fade, b * L[2] * (1 - fade) + h[2] * fade);\n}\n\nfunction mix(fb, p, r, g, b, a) {\n  fb[p * 3] += (r - fb[p * 3]) * a;\n  fb[p * 3 + 1] += (g - fb[p * 3 + 1]) * a;\n  fb[p * 3 + 2] += (b - fb[p * 3 + 2]) * a;\n}\n\n// Per frame: the sky, the light, the haze and the far silhouettes.\nfunction frameLight(P) {\n  const { sky, light: L, rain, cam } = P;\n  keyed(DAY, P.time, P.day);\n  // Overcast: the sky goes grey and the land dims.\n  const grey = 0.75 * rain;\n  const dim = 1 - 0.35 * rain;\n  const lum = (L[0] + L[1] + L[2]) / 3;\n  for (let i = 0; i \u003c 6; i++) sky[i] += (150 * lum + 12 - sky[i]) * grey;\n  for (let i = 0; i \u003c 3; i++) L[i] *= dim;\n  P.night = 1 - smooth(0.05, 0.35, lum);\n  P.haze[0] = sky[3];\n  P.haze[1] = sky[4];\n  P.haze[2] = sky[5];\n  const offM = (cam * F) / Z_MOUNT;\n  const offH = (cam * F) / Z_HILL;\n  const offC = (cam * F) / Z_CLOUD + P.clock * 0.6;\n  const mAmp = 18 + 30 * P.hills;\n  const hAmp = 6 + 20 * P.hills;\n  for (let x = 0; x \u003c W; x++) {\n    const u = x + offM;\n    const m = ridge(u);\n    const m2 = ridge(u + 1);\n    P.mTop[x] = HOR - 2 - mAmp * m;\n    // The sun is in the south-west: faces that fall to the right are in shade.\n    P.mLit[x] = m2 > m ? 1 : 0.72;\n    const h = x + offH;\n    P.hTop[x] = HOR + 1 - hAmp * (0.7 * n1(h / 15, 8) + 0.3 * n1(h / 5, 9)) - 1.5;\n    P.hSh[x] = 0.8 + 0.2 * n1(h / 3, 11);\n  }\n  P.offC = offC;\n}\n\n// The land and the sky, LED by LED.\nfunction paintLand(P) {\n  const { fb, glass, cam, light: L, sky, rain, night, offC } = P;\n  for (let y = WY0; y \u003c= WY1; y++) {\n    const s = (y - WY0) / (HOR - WY0);\n    const sr = sky[0] + (sky[3] - sky[0]) * s;\n    const sg = sky[1] + (sky[4] - sky[1]) * s;\n    const sb = sky[2] + (sky[5] - sky[2]) * s;\n    const k = y - HOR + 0.5;\n    const z = k > 0 ? (EYE * F) / k : 0;\n    let band = 0;\n    while (z > BANDS[band + 1]) band++;\n    const zUp = k > 1 ? (EYE * F) / (k - 1) : 1e9;\n    const hedge = k > 0 && zUp > BANDS[band + 1];\n    const fade = k > 0 ? 1 - Math.exp(-z / 700) : 0;\n    // Furrows show where a row of LEDs is under 0.84 m of ground: a stripe every 2 m.\n    const furrow = k > 0 && (z * z) / (EYE * F) \u003c 0.84;\n    const rowUp = z * 0.5 - Math.floor(z * 0.5) \u003c 0.5;\n    // A near row slides several LEDs a frame: blur it along the line.\n    const slide = k > 0 ? (P.step * F) / z : 0;\n    const taps = slide > 3 ? Math.min(4, Math.ceil(slide / 2)) : 1;\n    const bw = 18 + 0.35 * BANDS[band];\n    const shift = hash(band, 3);\n    let lastCell = 1e9;\n    let lastKind = 0;\n    for (let x = WX0; x \u003c= WX1; x++) {\n      const p = y * W + x;\n      if (!glass[p]) continue;\n      if (k \u003c= 0 || y \u003c P.hTop[x]) {\n        if (y >= P.hTop[x]) {\n          const sh = P.hSh[x];\n          land(P, p, 44 * sh, 100 * sh, 41 * sh, 0.3);\n        } else if (y >= P.mTop[x]) {\n          // Snow above row 32; the haze thins down the slopes.\n          const lit = P.mLit[x] * (y \u003c HOR - 26 ? 1.45 : 1);\n          land(P, p, 92 * lit, 104 * lit, 128 * lit, 0.45 - 0.15 * ((y - P.mTop[x]) / 30));\n        } else {\n          let r = sr;\n          let g = sg;\n          let b = sb;\n          // Stars come out as the sky darkens.\n          if (night > 0 && hash(x * 131 + y, 77) \u003c 0.012) {\n            const t = night * (90 + 120 * hash(x, y));\n            r += t;\n            g += t;\n            b += t;\n          }\n          // Clouds, stretched along the wind, greyer where they are thick.\n          const cv = P.cloud[((y - WY0) & 63) * 128 + (Math.floor((x + offC) * 0.5) & 127)];\n          const c = smooth(0.49 - 0.22 * rain, 0.54 - 0.2 * rain, cv);\n          if (c > 0) {\n            const top = cv > 0.6 - 0.2 * rain ? 0.82 : 1;\n            r += (235 * top * L[0] * 0.9 + 20 - r) * c;\n            g += (238 * top * L[1] * 0.9 + 20 - g) * c;\n            b += (242 * top * L[2] * 0.9 + 26 - b) * c;\n          }\n          put(fb, p, r, g, b);\n        }\n        continue;\n      }\n      // The plain: fields by depth band, each band cut into fields across the line.\n      let r = 0;\n      let g = 0;\n      let b = 0;\n      for (let t = 0; t \u003c taps; t++) {\n        const X = cam + ((x - CX + 0.5) * z) / F + (t * slide * z) / F / taps;\n        const cell = Math.floor(X / bw + shift);\n        if (cell !== lastCell) {\n          lastCell = cell;\n          lastKind = Math.floor(hash(band * 977 + cell, 4) * FIELDS.length);\n        }\n        const kind = lastKind;\n        const f = FIELDS[kind];\n        let sh = 1;\n        if (furrow) sh += (kind & 1 ? rowUp : X * 0.5 - Math.floor(X * 0.5) \u003c 0.5) ? 0.14 : -0.14;\n        if (hedge) sh = 0.45;\n        r += f[0] * sh;\n        g += f[1] * sh;\n        b += f[2] * sh;\n      }\n      land(P, p, r / taps, g / taps, b / taps, fade);\n    }\n  }\n}\n\n// The sun, low behind the mountains in the afternoon and at sunset.\nfunction paintSun(P) {\n  const { fb, glass } = P;\n  const sun = smooth(0.12, 0.22, P.time) * (1 - smooth(0.36, 0.42, P.time));\n  if (sun > 0) {\n    const sy = HOR - 36 + 24 * smooth(0.15, 0.4, P.time);\n    for (let y = Math.floor(sy - 5); y \u003c= sy + 5; y++)\n      for (let x = 40; x \u003c= 52; x++) {\n        const p = y * W + x;\n        if (y \u003c WY0 || !glass[p] || y >= P.mTop[x] || y > HOR) continue;\n        const d = Math.hypot(x - 46, y - sy);\n        const a = sun * (d \u003c 3.2 ? 1 : Math.max(0, 0.5 - (d - 3.2) * 0.2));\n        if (a > 0) mix(fb, p, 255, 236, 180, a);\n      }\n  }\n}\n\n// Farmhouses: white walls under red and grey roofs, lit windows at night.\nfunction paintHouses(P) {\n  const { glass, cam, night } = P;\n  for (let band = 3; band \u003c 8; band++) {\n    const z = Math.sqrt(BANDS[band] * BANDS[band + 1]);\n    const bw = 18 + 0.35 * BANDS[band];\n    const sc = F / z;\n    const ground = HOR + EYE * sc;\n    const fade = 1 - Math.exp(-z / 700);\n    const c0 = Math.floor((cam - 34 / sc) / bw + hash(band, 3)) - 1;\n    for (let cell = c0; cell \u003c c0 + 4 + (68 / sc) / bw; cell++) {\n      if (hash(band * 977 + cell, 5) > 0.3) continue;\n      const X = (cell - hash(band, 3) + 0.3 + 0.4 * hash(cell, band)) * bw;\n      const sx = CX + (X - cam) * sc;\n      const w = 10 * sc;\n      const wall = 5 * sc;\n      const roof = 3.5 * sc;\n      const red = hash(cell, band + 40) \u003c 0.6;\n      for (let y = Math.floor(ground - wall - roof); y \u003c ground; y++) {\n        const up = ground - y;\n        const inRoof = up > wall;\n        const half = inRoof ? (w * 0.5 + 0.5) * (1 - (up - wall) / roof) : w * 0.5;\n        for (let x = Math.floor(sx - half); x \u003c= sx + half; x++) {\n          if (x \u003c WX0 || x > WX1 || y \u003c WY0 || y > WY1) continue;\n          const p = y * W + x;\n          if (!glass[p]) continue;\n          if (!inRoof && night > 0.3 && up > wall * 0.35 && up \u003c wall * 0.75 && ((x - Math.floor(sx)) & 1) === 0) put(P.fb, p, 255 * night, 200 * night, 90 * night);\n          else if (inRoof) land(P, p, red ? 168 : 92, red ? 62 : 90, red ? 44 : 96, fade);\n          else land(P, p, 222, 216, 200, fade);\n        }\n      }\n    }\n  }\n}\n\n// Trees, the far row first, each crown lit from the upper left in three tones.\nfunction paintTrees(P) {\n  const { glass, cam } = P;\n  for (let row = 0; row \u003c TREES.length; row++) {\n    const [z, gap, chance, rad] = TREES[row];\n    const sc = F / z;\n    const ground = HOR + EYE * sc;\n    const fade = 1 - Math.exp(-z / 700);\n    const i0 = Math.floor((cam - (36 + rad * sc) / sc) / gap);\n    const i1 = Math.ceil((cam + (36 + rad * sc) / sc) / gap);\n    for (let i = i0; i \u003c= i1; i++) {\n      if (hash(i, row + 20) > chance) continue;\n      const X = (i + 0.5 * hash(i, row + 30)) * gap;\n      const sx = CX + (X - cam) * sc;\n      const tall = hash(i, row + 50) \u003c 0.3;\n      const rx = rad * sc * (tall ? 0.45 : 0.8 + 0.4 * hash(i, row + 40));\n      const ry = rad * sc * (tall ? 2.1 : 0.9);\n      const cy = ground - (2.4 * sc + ry);\n      const y0 = Math.max(WY0, Math.floor(cy - ry));\n      const y1 = Math.min(WY1, Math.ceil(ground));\n      const shade = hash(i, row + 60);\n      const irx = 1 / rx;\n      const iry = 1 / ry;\n      for (let y = y0; y \u003c= y1; y++) {\n        for (let x = Math.max(WX0, Math.floor(sx - rx)); x \u003c= Math.min(WX1, Math.ceil(sx + rx)); x++) {\n          const p = y * W + x;\n          if (!glass[p]) continue;\n          const dx = (x + 0.5 - sx) * irx;\n          const dy = (y + 0.5 - cy) * iry;\n          if (dx * dx + dy * dy \u003c 1) {\n            const lit = dx + dy \u003c -0.5 ? 1.08 : dx + dy \u003c 0.3 ? 0.86 : 0.66;\n            land(P, p, (30 + 14 * shade) * lit, (70 + 26 * shade) * lit, 30 * lit, fade);\n          } else if (y > cy && Math.abs(x + 0.5 - sx) \u003c Math.max(0.6, 0.25 * sc)) land(P, p, 52, 40, 30, fade);\n        }\n      }\n    }\n  }\n}\n\n// The cutting's rock walls rising to the portal, its stone face, then the black of the tunnel.\nfunction paintTrack(P) {\n  const { fb, glass, cam, dark } = P;\n  const scW = F / Z_WALL;\n  let darkCols = 0;\n  for (let x = WX0; x \u003c= WX1; x++) {\n    const X = cam + (x + 0.5 - CX) / scW;\n    const kind = track(P, X, CUTH);\n    dark[x] = kind === 3 ? 1 : 0;\n    if (kind === 0) continue;\n    if (kind === 3) darkCols++;\n    // The lip of the cutting is ragged with rock and scrub.\n    const top = kind === 1 ? HOR - CUTH[0] * scW - 2.5 * n1(X * 1.3, 12) - (hash(Math.floor(X * 2), 13) \u003c 0.2 ? 2 : 0) : -1;\n    for (let y = Math.max(WY0, Math.floor(top)); y \u003c= WY1; y++) {\n      const p = y * W + x;\n      if (!glass[p]) continue;\n      if (kind === 3) {\n        put(fb, p, 7, 7, 9);\n        continue;\n      }\n      if (kind === 2) {\n        // Dressed stone in courses of four rows, the joints staggered.\n        const course = y >> 2;\n        const joint = (y & 3) === 0 || Math.floor(X * 1.6 + (course & 1) * 0.5) !== Math.floor((X + 1 / scW) * 1.6 + (course & 1) * 0.5);\n        const v = joint ? 0.5 : 1 - 0.08 * (course % 3);\n        land(P, p, 152 * v, 140 * v, 120 * v, 0);\n        continue;\n      }\n      // Rock in tilted beds of pale and dark stone, grass along the lip.\n      const bed = Math.floor((HOR - y) / scW * 1.3 + 0.8 * Math.sin(X * 0.25)) & 1;\n      if (y - top \u003c 2) land(P, p, 70, 112, 50, 0);\n      else if (bed) land(P, p, 156, 142, 118, 0);\n      else land(P, p, 102, 92, 78, 0);\n    }\n  }\n  P.tunnelShare = darkCols / (WX1 - WX0 + 1);\n}\n\n// Sodium lamps every eight metres on the tunnel wall, smeared into streaks by the run.\nfunction paintLamps(P) {\n  const { fb, glass, cam, dark } = P;\n  const scT = F / Z_TUBE;\n  // The eye holds a lamp a little longer than a frame.\n  const streak = Math.max(1, 1.5 * P.step * scT);\n  const lampGain = 0.55 + 0.45 * P.adapt;\n  const l0 = Math.floor((cam - 40 / scT) / LAMP_GAP);\n  for (let i = l0; i \u003c l0 + 3; i++) {\n    const X = i * LAMP_GAP;\n    if (track(P, X, CUTH) !== 3) continue;\n    const sx = CX + (X - cam) * scT;\n    for (let x = Math.floor(sx); x \u003c sx + streak; x++) {\n      if (x \u003c WX0 || x > WX1) continue;\n      const along = 1 - (x - sx) / (streak + 1);\n      for (let dy = -3; dy \u003c= 4; dy++) {\n        const y = 48 + dy;\n        const p = y * W + x;\n        if (!glass[p] || dark[x] === 0) continue;\n        const a = GLOW[dy \u003c 0 ? -dy : Math.max(0, dy - 1)] * along * lampGain;\n        fb[p * 3] += 255 * a;\n        fb[p * 3 + 1] += 160 * a;\n        fb[p * 3 + 2] += 60 * a;\n      }\n    }\n  }\n}\n\n// Catenary masts and their wires, which rise and dip across the window as the spans go by.\nfunction paintMasts(P) {\n  const { fb, glass, cam, light: L } = P;\n  const scW = F / Z_WALL;\n  const scM = F / Z_MAST;\n  const m0 = Math.floor((cam - 40 / scM) / MAST_GAP);\n  for (let i = m0; i \u003c= m0 + 2; i++) {\n    const X = i * MAST_GAP;\n    if (track(P, X, CUTH) >= 2) continue;\n    const sx = CX + (X - cam) * scM;\n    const topY = HOR - 5.2 * scM;\n    for (let x = Math.floor(sx - 1); x \u003c= sx + 1 + 3; x++) {\n      if (x \u003c WX0 || x > WX1) continue;\n      const a = x \u003c= sx + 1 ? 1 : 0.35;\n      for (let y = Math.max(WY0, Math.floor(topY)); y \u003c= WY1; y++) {\n        const p = y * W + x;\n        if (glass[p]) mix(fb, p, 46 * L[0] + 6, 50 * L[1] + 6, 46 * L[2] + 8, a);\n      }\n    }\n  }\n  for (let x = WX0; x \u003c= WX1; x++) {\n    const X = cam + (x + 0.5 - CX) / scM;\n    if (track(P, cam + (x + 0.5 - CX) / scW, CUTH) >= 2) continue;\n    const u = X / MAST_GAP - Math.floor(X / MAST_GAP);\n    const ym = Math.round(HOR - (4.4 - 3.2 * u * (1 - u)) * scM);\n    const yc = Math.round(HOR - 3.0 * scM);\n    const dropper = X - Math.floor(X / 6) * 6 \u003c 0.12;\n    for (let y = ym; y \u003c= yc; y++) {\n      if (y !== ym && y !== yc && !dropper) continue;\n      if (y \u003c WY0) continue;\n      const p = y * W + x;\n      if (glass[p]) mix(fb, p, 26, 28, 28, 0.85);\n    }\n  }\n}\n\n// Raindrops: each a bead of brighter light with a short trail behind it.\nfunction paintRain(P) {\n  const { fb, glass } = P;\n  const drops = Math.round(P.rain * 160);\n  for (let i = 0; i \u003c drops; i++) {\n    const d = P.drops[i];\n    const x = Math.floor(d[0]);\n    const y = Math.floor(d[1]);\n    const len = 1 + Math.floor(P.speed * 1.4 * d[2]);\n    for (let j = 0; j \u003c= len; j++) {\n      const p = y * W + x + j;\n      if (x + j > WX1 || !glass[p]) continue;\n      const a = j === 0 ? 0.55 : 0.3 * (1 - j / (len + 1));\n      mix(fb, p, fb[p * 3] * 0.7 + 70, fb[p * 3 + 1] * 0.7 + 74, fb[p * 3 + 2] * 0.7 + 80, a);\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  frameLight(P);\n  paintLand(P);\n  paintSun(P);\n  paintHouses(P);\n  paintTrees(P);\n  paintTrack(P);\n  paintLamps(P);\n  paintMasts(P);\n  paintRain(P);\n  present(display, P);\n}\n\n// Where it is dark outside the glass turns mirror and the carriage shows in it.\nfunction present(display, P) {\n  const { fb, glass, wall, mirror } = P;\n  const glow = 1 + 0.45 * P.adapt;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++, p++) {\n      const q = p * 3;\n      if (!glass[p]) {\n        display.setPixel(x, y, wall[q], wall[q + 1], wall[q + 2]);\n        continue;\n      }\n      let r = fb[q] * glow;\n      let g = fb[q + 1] * glow;\n      let b = fb[q + 2] * glow;\n      const out = r > g ? (r > b ? r : b) : g > b ? g : b;\n      if (out \u003c 60) {\n        const m = 1 - out / 60;\n        r += mirror[q] * m;\n        g += mirror[q + 1] * m;\n        b += mirror[q + 2] * m;\n      }\n      display.setPixel(x, y, r > 255 ? 255 : r, g > 255 ? 255 : g, b > 255 ? 255 : b);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Time=0..1, Speed=0.2..3, Hills=0..1, Rain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Time","min":0,"max":1,"about":"The time of day from noon, through a golden afternoon, a sunset behind the mountains, a starry night with lit farmhouse windows and a pink dawn, back to noon."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the train runs: 90 km/h at 2, when a catenary mast crosses the window in a quarter of a second and the mountains hardly move; 9 km/h at 0.2, and 135 km/h at 3."},{"name":"Hills","min":0,"max":1,"about":"At 0 farmland under low mountains and a tunnel about every 20 seconds; turned up, the mountains rise nearly three times as high, the hills swell and the tunnels come sooner, then every six to nine seconds."},{"name":"Rain","min":0,"max":1,"about":"Raindrops on the glass that the wind drives back along it, and an overcast sky; at the top the light is grey and the glass is crowded."}],"start":[0,2,0,0.06],"measures":{"motion":0.6601,"detail":0.0493,"edges":0.717,"complexity":0.2041,"coverage":0.8669,"colour":0.2389,"drift":0.3599},"knobResponse":[0.2716,0.0947,0.2843,0.1097]},{"slug":"truchet","title":"Truchet","family":"geometry","round":1,"note":"타일마다 같은 사분원 둘이 있어요. 한 장을 90도 돌리면 길 둘이 하나로 이어지거나 하나가 둘로 끊겨요.","idea":"Every tile holds the same two quarter circles, and turning one tile a quarter turn is enough to join two paths into one or cut one in two.","buttons":"K1 tap turns a quarter of the tiles at once.","code":"// ===== Patternflow pattern =====\n// Title:   Truchet\n// Family:  geometry\n// Idea:    Every tile holds the same two quarter circles, and turning one tile a quarter turn is enough to join two paths into one or cut one in two.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Flip Rate=0..5, Tile=8..20, Thickness=0..1\n//\n// Knob 1: Hue. Turns the path colours around the colour wheel.\n// Knob 2: Flip Rate. How often a wave of quarter turns crosses the panel; at 0 the paths hold still and only the light runs along them.\n// Knob 3: Tile. Tile size in LEDs; small is a dense meander, large a few wide loops.\n// Knob 4: Thickness. Line width, from a thin wire to fat ribbons with small dark holes between them.\n// Buttons: K1 tap turns a quarter of the tiles at once.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nfunction hash(a, b) {\n  let n = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  n = Math.imul(n ^ (n >>> 13), 1274126177);\n  return ((n ^ (n >>> 16)) >>> 0) / 4294967296;\n}\n\nconst W = 64;\nconst H = 128;\n// Room for tiles down to 4 LEDs, so nothing is allocated after setup.\nconst MAX_TILES = 16 * 32;\nconst MAX_NODES = 33 * 16 + 32 * 17;\nconst HALF_PI = Math.PI / 2;\n// Arcs between two pulses of light.\nconst PULSE = 5;\n\nexport function setup(params) {\n  params.from = new Uint8Array(MAX_TILES);\n  params.to = new Uint8Array(MAX_TILES);\n  params.prog = new Float32Array(MAX_TILES);\n  params.cross = new Int32Array(MAX_TILES);\n  params.bit = new Uint8Array(MAX_TILES);\n  params.cos = new Float32Array(MAX_TILES);\n  params.sin = new Float32Array(MAX_TILES);\n  params.fill = new Float32Array(MAX_TILES);\n  params.arcA = new Int32Array(MAX_TILES * 2);\n  params.arcB = new Int32Array(MAX_TILES * 2);\n  params.arcStart = new Float32Array(MAX_TILES * 2);\n  params.arcRev = new Uint8Array(MAX_TILES * 2);\n  params.arcPeriod = new Float32Array(MAX_TILES * 2);\n  params.arcTarget = new Float32Array(MAX_TILES * 2);\n  params.arcHue = new Float32Array(MAX_TILES * 2);\n  params.arcCol = new Float32Array(MAX_TILES * 2 * 3);\n  params.seen = new Uint8Array(MAX_TILES * 2);\n  params.walk = new Int32Array(MAX_TILES * 2);\n  params.nodeArc = new Int32Array(MAX_NODES * 2);\n  params.colTile = new Int16Array(W);\n  params.colLocal = new Float32Array(W);\n  params.rowTile = new Int16Array(H);\n  params.rowLocal = new Float32Array(H);\n  params.size = 0;\n  params.wave = 0;\n  params.flow = 0;\n  params.kick = 0;\n}\n\nfunction build(params, size) {\n  params.size = size;\n  params.tw = Math.ceil(W / size);\n  params.th = Math.ceil(H / size);\n  // The grid is centred, so a size that does not divide the panel crops evenly.\n  const ox = (params.tw * size - W) / 2;\n  const oy = (params.th * size - H) / 2;\n  for (let x = 0; x \u003c W; x++) {\n    const gx = x + 0.5 + ox;\n    params.colTile[x] = Math.floor(gx / size);\n    params.colLocal[x] = gx - params.colTile[x] * size;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const gy = y + 0.5 + oy;\n    params.rowTile[y] = Math.floor(gy / size);\n    params.rowLocal[y] = gy - params.rowTile[y] * size;\n  }\n  const n = params.tw * params.th;\n  for (let t = 0; t \u003c n; t++) {\n    const b = hash(t, 7) \u003c 0.5 ? 1 : 0;\n    params.from[t] = b;\n    params.to[t] = b;\n    params.prog[t] = 1;\n    params.cross[t] = -1 \u003c\u003c 30;\n  }\n  params.arcHue.fill(-1);\n  trace(params);\n}\n\n// Join the arcs into paths. Each path is numbered from its lowest edge\n// midpoint, so a path no flip touched keeps its colour and its pulses.\nfunction trace(params) {\n  const tw = params.tw;\n  const th = params.th;\n  const hCount = (th + 1) * tw;\n  const nodes = hCount + th * (tw + 1);\n  const nodeArc = params.nodeArc;\n  nodeArc.fill(-1, 0, nodes * 2);\n  const link = (node, arc) => {\n    if (nodeArc[node * 2] \u003c 0) nodeArc[node * 2] = arc;\n    else nodeArc[node * 2 + 1] = arc;\n  };\n  for (let j = 0; j \u003c th; j++) {\n    for (let i = 0; i \u003c tw; i++) {\n      const t = j * tw + i;\n      const top = j * tw + i;\n      const bottom = (j + 1) * tw + i;\n      const left = hCount + j * (tw + 1) + i;\n      const right = left + 1;\n      const logical = params.prog[t] \u003c 0.5 ? params.from[t] : params.to[t];\n      // Arc 0 starts at the top edge, arc 1 at the bottom edge.\n      params.arcA[t * 2] = top;\n      params.arcB[t * 2] = logical ? right : left;\n      params.arcA[t * 2 + 1] = bottom;\n      params.arcB[t * 2 + 1] = logical ? left : right;\n      link(top, t * 2);\n      link(params.arcB[t * 2], t * 2);\n      link(bottom, t * 2 + 1);\n      link(params.arcB[t * 2 + 1], t * 2 + 1);\n    }\n  }\n  const arcs = tw * th * 2;\n  params.seen.fill(0, 0, arcs);\n  const walk = (start, first) => {\n    let node = start;\n    let arc = first;\n    let len = 0;\n    while (arc >= 0 && !params.seen[arc]) {\n      params.seen[arc] = 1;\n      params.walk[len] = arc;\n      params.arcStart[arc] = len;\n      const forward = params.arcA[arc] === node;\n      params.arcRev[arc] = forward ? 0 : 1;\n      node = forward ? params.arcB[arc] : params.arcA[arc];\n      len++;\n      arc = nodeArc[node * 2] === arc ? nodeArc[node * 2 + 1] : nodeArc[node * 2];\n    }\n    const closed = arc >= 0;\n    // A closed loop fits a whole number of pulses, so it has no seam.\n    const period = closed ? len / Math.max(1, Math.round(len / PULSE)) : PULSE;\n    const r = hash(start, 3);\n    let hue = Math.floor(r * 5) * 0.035 - 0.07;\n    if (hash(start, 11) \u003c 0.12) hue += 0.5;\n    for (let w = 0; w \u003c len; w++) {\n      params.arcPeriod[params.walk[w]] = period;\n      params.arcTarget[params.walk[w]] = hue;\n    }\n  };\n  for (let node = 0; node \u003c nodes; node++) {\n    if (nodeArc[node * 2 + 1] \u003c 0 && nodeArc[node * 2] >= 0 && !params.seen[nodeArc[node * 2]]) walk(node, nodeArc[node * 2]);\n  }\n  for (let node = 0; node \u003c nodes; node++) {\n    const a = nodeArc[node * 2];\n    const b = nodeArc[node * 2 + 1];\n    if (a \u003c 0 || b \u003c 0 || params.seen[a]) continue;\n    const na = params.arcA[a] === node ? params.arcB[a] : params.arcA[a];\n    const nb = params.arcA[b] === node ? params.arcB[b] : params.arcA[b];\n    walk(node, na \u003c nb ? a : b);\n  }\n  for (let a = 0; a \u003c arcs; a++) if (params.arcHue[a] \u003c -0.5) params.arcHue[a] = params.arcTarget[a];\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  // K1 at 0 opens on teal rather than the red most of the study opens on.\n  params.hue = k[0] + 0.48;\n  params.rate = k[1];\n  params.thick = k[3];\n  const size = Math.round(k[2]);\n  if (size !== params.size) build(params, size);\n  const tw = params.tw;\n  const th = params.th;\n  const n = tw * th;\n  const kick = input.btnPressed && input.btnPressed[0];\n  if (kick) params.kick++;\n\n  params.wave += dt * params.rate * 0.12;\n  params.flow += dt * 0.45;\n  let dirty = false;\n  for (let t = 0; t \u003c n; t++) {\n    const i = t % tw;\n    const j = (t - i) / tw;\n    // The front runs diagonally down the long side, and each pass turns a different third of the tiles.\n    const c = (j + i * 0.7 + 1.5 * Math.sin(i * 0.6)) / (th + tw * 0.7 + 3);\n    const count = Math.floor(params.wave - c);\n    let flip = false;\n    if (count !== params.cross[t]) {\n      if (params.cross[t] !== -1 \u003c\u003c 30 && hash(t, count) \u003c 0.35) flip = true;\n      params.cross[t] = count;\n    }\n    if (kick && hash(t, 1000 + params.kick) \u003c 0.25) flip = true;\n    if (flip && params.prog[t] >= 1) {\n      params.from[t] = params.to[t];\n      params.to[t] = 1 - params.to[t];\n      params.prog[t] = 0;\n    }\n    if (params.prog[t] \u003c 1) {\n      const before = params.prog[t];\n      params.prog[t] = Math.min(1, before + dt / 0.5);\n      if (before \u003c 0.5 && params.prog[t] >= 0.5) dirty = true;\n    }\n    const pr = params.prog[t];\n    params.fill[t] = 1 - Math.sin(pr * Math.PI);\n    if (pr >= 1) {\n      params.bit[t] = params.to[t];\n      params.cos[t] = 1;\n      params.sin[t] = 0;\n    } else {\n      const eased = pr * pr * (3 - 2 * pr);\n      const ang = pr \u003c 0.5 ? eased * HALF_PI : (eased - 1) * HALF_PI;\n      params.bit[t] = pr \u003c 0.5 ? params.from[t] : params.to[t];\n      params.cos[t] = Math.cos(ang);\n      params.sin[t] = Math.sin(ang);\n    }\n  }\n  if (dirty) trace(params);\n  // A path that was joined to another one eases into its new colour.\n  const ease = Math.min(1, dt * 3);\n  for (let a = 0; a \u003c n * 2; a++) {\n    let d = params.arcTarget[a] - params.arcHue[a];\n    d -= Math.round(d);\n    params.arcHue[a] += d * ease;\n    params.arcHue[a] -= Math.floor(params.arcHue[a]);\n    const col = hsv(params.hue + params.arcHue[a], 0.85, 1);\n    params.arcCol[a * 3] = col[0];\n    params.arcCol[a * 3 + 1] = col[1];\n    params.arcCol[a * 3 + 2] = col[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.size;\n  const half = S / 2;\n  const tw = params.tw;\n  const hw = 0.8 + params.thick * (S * 0.235 - 0.8);\n  const ground = hsv(params.hue + 0.6, 0.85, 0.16);\n  for (let y = 0; y \u003c H; y++) {\n    const ty = params.rowTile[y];\n    const ly = params.rowLocal[y] - half;\n    for (let x = 0; x \u003c W; x++) {\n      const t = ty * tw + params.colTile[x];\n      const lx = params.colLocal[x] - half;\n      const c = params.cos[t];\n      const s = params.sin[t];\n      const px = c * lx + s * ly + half;\n      const py = -s * lx + c * ly + half;\n      let d0;\n      let d1;\n      if (params.bit[t] === 0) {\n        d0 = Math.hypot(px, py) - half;\n        d1 = Math.hypot(S - px, S - py) - half;\n      } else {\n        d0 = Math.hypot(S - px, py) - half;\n        d1 = Math.hypot(px, S - py) - half;\n      }\n      const which = Math.abs(d0) \u003c= Math.abs(d1) ? 0 : 1;\n      const d = which === 0 ? Math.abs(d0) : Math.abs(d1);\n      const cover = Math.min(1, hw + 0.5 - d);\n      if (cover \u003c= 0) {\n        // The two kinds of region between paths alternate like a chessboard;\n        // one of them glows faintly, and fades while its tile turns.\n        const inside = d0 \u003c 0 || d1 \u003c 0;\n        const parity = (ty + params.colTile[x] + (inside ? params.bit[t] : 1 - params.bit[t])) & 1;\n        if (parity) {\n          const f = params.fill[t];\n          display.setPixel(x, y, ground[0] * f, ground[1] * f, ground[2] * f);\n        } else display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      // Where along the arc this LED sits, from its first end to its second.\n      let theta;\n      if (params.bit[t] === 0) theta = which === 0 ? Math.atan2(py, px) : Math.atan2(S - py, S - px);\n      else theta = which === 0 ? Math.atan2(py, S - px) : Math.atan2(S - py, px);\n      const along = Math.max(0, Math.min(1, theta / HALF_PI));\n      const arc = t * 2 + which;\n      const dist = params.arcStart[arc] + (params.arcRev[arc] ? 1 - along : along);\n      const wave = 0.5 + 0.5 * Math.cos(Math.PI * 2 * (dist / params.arcPeriod[arc] - params.flow));\n      const v = (0.4 + 0.6 * wave * wave * wave) * cover;\n      const col = params.arcCol;\n      display.setPixel(x, y, col[arc * 3] * v, col[arc * 3 + 1] * v, col[arc * 3 + 2] * v);\n    }\n  }\n}\n","layer":{"id":"layer-truchet","type":"code","name":"truchet","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Truchet\n// Family:  geometry\n// Idea:    Every tile holds the same two quarter circles, and turning one tile a quarter turn is enough to join two paths into one or cut one in two.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Flip Rate=0..5, Tile=8..20, Thickness=0..1\n//\n// Knob 1: Hue. Turns the path colours around the colour wheel.\n// Knob 2: Flip Rate. How often a wave of quarter turns crosses the panel; at 0 the paths hold still and only the light runs along them.\n// Knob 3: Tile. Tile size in LEDs; small is a dense meander, large a few wide loops.\n// Knob 4: Thickness. Line width, from a thin wire to fat ribbons with small dark holes between them.\n// Buttons: K1 tap turns a quarter of the tiles at once.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nfunction hash(a, b) {\n  let n = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  n = Math.imul(n ^ (n >>> 13), 1274126177);\n  return ((n ^ (n >>> 16)) >>> 0) / 4294967296;\n}\n\nconst W = 64;\nconst H = 128;\n// Room for tiles down to 4 LEDs, so nothing is allocated after setup.\nconst MAX_TILES = 16 * 32;\nconst MAX_NODES = 33 * 16 + 32 * 17;\nconst HALF_PI = Math.PI / 2;\n// Arcs between two pulses of light.\nconst PULSE = 5;\n\nexport function setup(params) {\n  params.from = new Uint8Array(MAX_TILES);\n  params.to = new Uint8Array(MAX_TILES);\n  params.prog = new Float32Array(MAX_TILES);\n  params.cross = new Int32Array(MAX_TILES);\n  params.bit = new Uint8Array(MAX_TILES);\n  params.cos = new Float32Array(MAX_TILES);\n  params.sin = new Float32Array(MAX_TILES);\n  params.fill = new Float32Array(MAX_TILES);\n  params.arcA = new Int32Array(MAX_TILES * 2);\n  params.arcB = new Int32Array(MAX_TILES * 2);\n  params.arcStart = new Float32Array(MAX_TILES * 2);\n  params.arcRev = new Uint8Array(MAX_TILES * 2);\n  params.arcPeriod = new Float32Array(MAX_TILES * 2);\n  params.arcTarget = new Float32Array(MAX_TILES * 2);\n  params.arcHue = new Float32Array(MAX_TILES * 2);\n  params.arcCol = new Float32Array(MAX_TILES * 2 * 3);\n  params.seen = new Uint8Array(MAX_TILES * 2);\n  params.walk = new Int32Array(MAX_TILES * 2);\n  params.nodeArc = new Int32Array(MAX_NODES * 2);\n  params.colTile = new Int16Array(W);\n  params.colLocal = new Float32Array(W);\n  params.rowTile = new Int16Array(H);\n  params.rowLocal = new Float32Array(H);\n  params.size = 0;\n  params.wave = 0;\n  params.flow = 0;\n  params.kick = 0;\n}\n\nfunction build(params, size) {\n  params.size = size;\n  params.tw = Math.ceil(W / size);\n  params.th = Math.ceil(H / size);\n  // The grid is centred, so a size that does not divide the panel crops evenly.\n  const ox = (params.tw * size - W) / 2;\n  const oy = (params.th * size - H) / 2;\n  for (let x = 0; x \u003c W; x++) {\n    const gx = x + 0.5 + ox;\n    params.colTile[x] = Math.floor(gx / size);\n    params.colLocal[x] = gx - params.colTile[x] * size;\n  }\n  for (let y = 0; y \u003c H; y++) {\n    const gy = y + 0.5 + oy;\n    params.rowTile[y] = Math.floor(gy / size);\n    params.rowLocal[y] = gy - params.rowTile[y] * size;\n  }\n  const n = params.tw * params.th;\n  for (let t = 0; t \u003c n; t++) {\n    const b = hash(t, 7) \u003c 0.5 ? 1 : 0;\n    params.from[t] = b;\n    params.to[t] = b;\n    params.prog[t] = 1;\n    params.cross[t] = -1 \u003c\u003c 30;\n  }\n  params.arcHue.fill(-1);\n  trace(params);\n}\n\n// Join the arcs into paths. Each path is numbered from its lowest edge\n// midpoint, so a path no flip touched keeps its colour and its pulses.\nfunction trace(params) {\n  const tw = params.tw;\n  const th = params.th;\n  const hCount = (th + 1) * tw;\n  const nodes = hCount + th * (tw + 1);\n  const nodeArc = params.nodeArc;\n  nodeArc.fill(-1, 0, nodes * 2);\n  const link = (node, arc) => {\n    if (nodeArc[node * 2] \u003c 0) nodeArc[node * 2] = arc;\n    else nodeArc[node * 2 + 1] = arc;\n  };\n  for (let j = 0; j \u003c th; j++) {\n    for (let i = 0; i \u003c tw; i++) {\n      const t = j * tw + i;\n      const top = j * tw + i;\n      const bottom = (j + 1) * tw + i;\n      const left = hCount + j * (tw + 1) + i;\n      const right = left + 1;\n      const logical = params.prog[t] \u003c 0.5 ? params.from[t] : params.to[t];\n      // Arc 0 starts at the top edge, arc 1 at the bottom edge.\n      params.arcA[t * 2] = top;\n      params.arcB[t * 2] = logical ? right : left;\n      params.arcA[t * 2 + 1] = bottom;\n      params.arcB[t * 2 + 1] = logical ? left : right;\n      link(top, t * 2);\n      link(params.arcB[t * 2], t * 2);\n      link(bottom, t * 2 + 1);\n      link(params.arcB[t * 2 + 1], t * 2 + 1);\n    }\n  }\n  const arcs = tw * th * 2;\n  params.seen.fill(0, 0, arcs);\n  const walk = (start, first) => {\n    let node = start;\n    let arc = first;\n    let len = 0;\n    while (arc >= 0 && !params.seen[arc]) {\n      params.seen[arc] = 1;\n      params.walk[len] = arc;\n      params.arcStart[arc] = len;\n      const forward = params.arcA[arc] === node;\n      params.arcRev[arc] = forward ? 0 : 1;\n      node = forward ? params.arcB[arc] : params.arcA[arc];\n      len++;\n      arc = nodeArc[node * 2] === arc ? nodeArc[node * 2 + 1] : nodeArc[node * 2];\n    }\n    const closed = arc >= 0;\n    // A closed loop fits a whole number of pulses, so it has no seam.\n    const period = closed ? len / Math.max(1, Math.round(len / PULSE)) : PULSE;\n    const r = hash(start, 3);\n    let hue = Math.floor(r * 5) * 0.035 - 0.07;\n    if (hash(start, 11) \u003c 0.12) hue += 0.5;\n    for (let w = 0; w \u003c len; w++) {\n      params.arcPeriod[params.walk[w]] = period;\n      params.arcTarget[params.walk[w]] = hue;\n    }\n  };\n  for (let node = 0; node \u003c nodes; node++) {\n    if (nodeArc[node * 2 + 1] \u003c 0 && nodeArc[node * 2] >= 0 && !params.seen[nodeArc[node * 2]]) walk(node, nodeArc[node * 2]);\n  }\n  for (let node = 0; node \u003c nodes; node++) {\n    const a = nodeArc[node * 2];\n    const b = nodeArc[node * 2 + 1];\n    if (a \u003c 0 || b \u003c 0 || params.seen[a]) continue;\n    const na = params.arcA[a] === node ? params.arcB[a] : params.arcA[a];\n    const nb = params.arcA[b] === node ? params.arcB[b] : params.arcA[b];\n    walk(node, na \u003c nb ? a : b);\n  }\n  for (let a = 0; a \u003c arcs; a++) if (params.arcHue[a] \u003c -0.5) params.arcHue[a] = params.arcTarget[a];\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 8, 0.06];\n  // K1 at 0 opens on teal rather than the red most of the study opens on.\n  params.hue = k[0] + 0.48;\n  params.rate = k[1];\n  params.thick = k[3];\n  const size = Math.round(k[2]);\n  if (size !== params.size) build(params, size);\n  const tw = params.tw;\n  const th = params.th;\n  const n = tw * th;\n  const kick = input.btnPressed && input.btnPressed[0];\n  if (kick) params.kick++;\n\n  params.wave += dt * params.rate * 0.12;\n  params.flow += dt * 0.45;\n  let dirty = false;\n  for (let t = 0; t \u003c n; t++) {\n    const i = t % tw;\n    const j = (t - i) / tw;\n    // The front runs diagonally down the long side, and each pass turns a different third of the tiles.\n    const c = (j + i * 0.7 + 1.5 * Math.sin(i * 0.6)) / (th + tw * 0.7 + 3);\n    const count = Math.floor(params.wave - c);\n    let flip = false;\n    if (count !== params.cross[t]) {\n      if (params.cross[t] !== -1 \u003c\u003c 30 && hash(t, count) \u003c 0.35) flip = true;\n      params.cross[t] = count;\n    }\n    if (kick && hash(t, 1000 + params.kick) \u003c 0.25) flip = true;\n    if (flip && params.prog[t] >= 1) {\n      params.from[t] = params.to[t];\n      params.to[t] = 1 - params.to[t];\n      params.prog[t] = 0;\n    }\n    if (params.prog[t] \u003c 1) {\n      const before = params.prog[t];\n      params.prog[t] = Math.min(1, before + dt / 0.5);\n      if (before \u003c 0.5 && params.prog[t] >= 0.5) dirty = true;\n    }\n    const pr = params.prog[t];\n    params.fill[t] = 1 - Math.sin(pr * Math.PI);\n    if (pr >= 1) {\n      params.bit[t] = params.to[t];\n      params.cos[t] = 1;\n      params.sin[t] = 0;\n    } else {\n      const eased = pr * pr * (3 - 2 * pr);\n      const ang = pr \u003c 0.5 ? eased * HALF_PI : (eased - 1) * HALF_PI;\n      params.bit[t] = pr \u003c 0.5 ? params.from[t] : params.to[t];\n      params.cos[t] = Math.cos(ang);\n      params.sin[t] = Math.sin(ang);\n    }\n  }\n  if (dirty) trace(params);\n  // A path that was joined to another one eases into its new colour.\n  const ease = Math.min(1, dt * 3);\n  for (let a = 0; a \u003c n * 2; a++) {\n    let d = params.arcTarget[a] - params.arcHue[a];\n    d -= Math.round(d);\n    params.arcHue[a] += d * ease;\n    params.arcHue[a] -= Math.floor(params.arcHue[a]);\n    const col = hsv(params.hue + params.arcHue[a], 0.85, 1);\n    params.arcCol[a * 3] = col[0];\n    params.arcCol[a * 3 + 1] = col[1];\n    params.arcCol[a * 3 + 2] = col[2];\n  }\n}\n\nexport function draw(display, params, time) {\n  const S = params.size;\n  const half = S / 2;\n  const tw = params.tw;\n  const hw = 0.8 + params.thick * (S * 0.235 - 0.8);\n  const ground = hsv(params.hue + 0.6, 0.85, 0.16);\n  for (let y = 0; y \u003c H; y++) {\n    const ty = params.rowTile[y];\n    const ly = params.rowLocal[y] - half;\n    for (let x = 0; x \u003c W; x++) {\n      const t = ty * tw + params.colTile[x];\n      const lx = params.colLocal[x] - half;\n      const c = params.cos[t];\n      const s = params.sin[t];\n      const px = c * lx + s * ly + half;\n      const py = -s * lx + c * ly + half;\n      let d0;\n      let d1;\n      if (params.bit[t] === 0) {\n        d0 = Math.hypot(px, py) - half;\n        d1 = Math.hypot(S - px, S - py) - half;\n      } else {\n        d0 = Math.hypot(S - px, py) - half;\n        d1 = Math.hypot(px, S - py) - half;\n      }\n      const which = Math.abs(d0) \u003c= Math.abs(d1) ? 0 : 1;\n      const d = which === 0 ? Math.abs(d0) : Math.abs(d1);\n      const cover = Math.min(1, hw + 0.5 - d);\n      if (cover \u003c= 0) {\n        // The two kinds of region between paths alternate like a chessboard;\n        // one of them glows faintly, and fades while its tile turns.\n        const inside = d0 \u003c 0 || d1 \u003c 0;\n        const parity = (ty + params.colTile[x] + (inside ? params.bit[t] : 1 - params.bit[t])) & 1;\n        if (parity) {\n          const f = params.fill[t];\n          display.setPixel(x, y, ground[0] * f, ground[1] * f, ground[2] * f);\n        } else display.setPixel(x, y, 0, 0, 0);\n        continue;\n      }\n      // Where along the arc this LED sits, from its first end to its second.\n      let theta;\n      if (params.bit[t] === 0) theta = which === 0 ? Math.atan2(py, px) : Math.atan2(S - py, S - px);\n      else theta = which === 0 ? Math.atan2(py, S - px) : Math.atan2(S - py, px);\n      const along = Math.max(0, Math.min(1, theta / HALF_PI));\n      const arc = t * 2 + which;\n      const dist = params.arcStart[arc] + (params.arcRev[arc] ? 1 - along : along);\n      const wave = 0.5 + 0.5 * Math.cos(Math.PI * 2 * (dist / params.arcPeriod[arc] - params.flow));\n      const v = (0.4 + 0.6 * wave * wave * wave) * cover;\n      const col = params.arcCol;\n      display.setPixel(x, y, col[arc * 3] * v, col[arc * 3 + 1] * v, col[arc * 3 + 2] * v);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Flip Rate=0..5, Tile=8..20, Thickness=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the path colours around the colour wheel."},{"name":"Flip Rate","min":0,"max":5,"about":"How often a wave of quarter turns crosses the panel; at 0 the paths hold still and only the light runs along them."},{"name":"Tile","min":8,"max":20,"about":"Tile size in LEDs; small is a dense meander, large a few wide loops."},{"name":"Thickness","min":0,"max":1,"about":"Line width, from a thin wire to fat ribbons with small dark holes between them."}],"start":[0,2,8,0.06],"measures":{"motion":0.3464,"detail":0.1313,"edges":0.5615,"complexity":1.2014,"coverage":0.7147,"colour":0.3084,"drift":0.0597},"knobResponse":[0.1766,0.0939,0.1747,0.1431]},{"slug":"tunnel","title":"Tunnel","family":"space","round":1,"note":"가운데서 떨어진 거리로 나누면 평평한 체크무늬가 날아 들어가는 관이 돼요.","idea":"Divide by the distance from the centre and a flat checkerboard becomes a tube you fly down.","buttons":"K1 tap throws the far end of the tube to a new place.","code":"// ===== Patternflow pattern =====\n// Title:   Tunnel\n// Family:  space\n// Idea:    Divide by the distance from the centre and a flat checkerboard becomes a tube you fly down.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=-3..8, Twist=-1..1, Tiles=8..24\n//\n// Knob 1: Hue. The colour of the near rings; the far ones drift round the wheel from it.\n// Knob 2: Speed. Flying forward, and below 0 backing out of the tube.\n// Knob 3: Twist. Winds the tiles into a spiral, either way round.\n// Knob 4: Tiles. How many tiles go round the tube.\n// Buttons: K1 tap throws the far end of the tube to a new place.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nexport function setup(params) {\n  params.z = 0;\n  params.wander = 0;\n  params.kick = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 8];\n  // K1 at 0 opens on violet rather than the red most of the study opens on.\n  params.hue = k[0] + 0.72;\n  params.speed = k[1];\n  params.twist = k[2];\n  params.tiles = Math.round(k[3]);\n  params.z += dt * params.speed * 0.6;\n  params.wander += dt * (0.35 + Math.abs(params.speed) * 0.05);\n  if (input.btnPressed && input.btnPressed[0]) params.kick = 1;\n  params.kick = Math.max(0, params.kick - dt * 0.8);\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  // The far end of the tube wanders, so it reads as a bend rather than a target.\n  const swing = 1 + params.kick * 2.5;\n  const cx = w / 2 + Math.sin(params.wander * 0.9) * w * 0.16 * swing;\n  const cy = h / 2 + Math.sin(params.wander * 1.3 + 1) * h * 0.2 * swing;\n  const tiles = params.tiles;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const dx = x + 0.5 - cx;\n      // LEDs are square, so the tube is round with no aspect factor.\n      const dy = y + 0.5 - cy;\n      const r = Math.sqrt(dx * dx + dy * dy) + 0.001;\n      const depth = 40 / r;\n      const u = depth + params.z;\n      const a = Math.atan2(dy, dx) / (Math.PI * 2) + 0.5;\n      const v = a * tiles + params.twist * depth * 0.8;\n      const ring = Math.floor(u * 3);\n      const check = (ring + Math.floor(v)) & 1;\n      // Fog: the far end fades to black, which also hides the centre's aliasing.\n      // It clears 28 LEDs out, inside the 32 the narrow side of the panel has.\n      const fog = Math.min(1, Math.max(0, (r - 4) / 24));\n      const near = fog * fog;\n      const c = hsv(params.hue + depth * 0.06, check ? 0.9 : 0.55, check ? near : near * 0.22);\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    }\n  }\n}\n","layer":{"id":"layer-tunnel","type":"code","name":"tunnel","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Tunnel\n// Family:  space\n// Idea:    Divide by the distance from the centre and a flat checkerboard becomes a tube you fly down.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=-3..8, Twist=-1..1, Tiles=8..24\n//\n// Knob 1: Hue. The colour of the near rings; the far ones drift round the wheel from it.\n// Knob 2: Speed. Flying forward, and below 0 backing out of the tube.\n// Knob 3: Twist. Winds the tiles into a spiral, either way round.\n// Knob 4: Tiles. How many tiles go round the tube.\n// Buttons: K1 tap throws the far end of the tube to a new place.\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  const r = k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v;\n  const g = k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p;\n  const b = k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q;\n  return [r * 255, g * 255, b * 255];\n}\n\nexport function setup(params) {\n  params.z = 0;\n  params.wander = 0;\n  params.kick = 0;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 8];\n  // K1 at 0 opens on violet rather than the red most of the study opens on.\n  params.hue = k[0] + 0.72;\n  params.speed = k[1];\n  params.twist = k[2];\n  params.tiles = Math.round(k[3]);\n  params.z += dt * params.speed * 0.6;\n  params.wander += dt * (0.35 + Math.abs(params.speed) * 0.05);\n  if (input.btnPressed && input.btnPressed[0]) params.kick = 1;\n  params.kick = Math.max(0, params.kick - dt * 0.8);\n}\n\nexport function draw(display, params, time) {\n  const w = display.width;\n  const h = display.height;\n  // The far end of the tube wanders, so it reads as a bend rather than a target.\n  const swing = 1 + params.kick * 2.5;\n  const cx = w / 2 + Math.sin(params.wander * 0.9) * w * 0.16 * swing;\n  const cy = h / 2 + Math.sin(params.wander * 1.3 + 1) * h * 0.2 * swing;\n  const tiles = params.tiles;\n  for (let y = 0; y \u003c h; y++) {\n    for (let x = 0; x \u003c w; x++) {\n      const dx = x + 0.5 - cx;\n      // LEDs are square, so the tube is round with no aspect factor.\n      const dy = y + 0.5 - cy;\n      const r = Math.sqrt(dx * dx + dy * dy) + 0.001;\n      const depth = 40 / r;\n      const u = depth + params.z;\n      const a = Math.atan2(dy, dx) / (Math.PI * 2) + 0.5;\n      const v = a * tiles + params.twist * depth * 0.8;\n      const ring = Math.floor(u * 3);\n      const check = (ring + Math.floor(v)) & 1;\n      // Fog: the far end fades to black, which also hides the centre's aliasing.\n      // It clears 28 LEDs out, inside the 32 the narrow side of the panel has.\n      const fog = Math.min(1, Math.max(0, (r - 4) / 24));\n      const near = fog * fog;\n      const c = hsv(params.hue + depth * 0.06, check ? 0.9 : 0.55, check ? near : near * 0.22);\n      display.setPixel(x, y, c[0], c[1], c[2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=-3..8, Twist=-1..1, Tiles=8..24","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the near rings; the far ones drift round the wheel from it."},{"name":"Speed","min":-3,"max":8,"about":"Flying forward, and below 0 backing out of the tube."},{"name":"Twist","min":-1,"max":1,"about":"Winds the tiles into a spiral, either way round."},{"name":"Tiles","min":8,"max":24,"about":"How many tiles go round the tube."}],"start":[0,2,0,8],"measures":{"motion":2.5151,"detail":0.0531,"edges":0.4689,"complexity":0.9004,"coverage":0.8993,"colour":0.486,"drift":0.3919},"knobResponse":[0.376,0.2448,0.256,0.2505]},{"slug":"turntables","title":"Turntables","family":"music","round":18,"note":"DJ 의 턴테이블 두 대가 믹서 띠를 사이에 두고 위아래로 서요. 판은 가만히 있는 방 불빛 아래에서 돌며 홈을 드러내고, DJ 는 기다리는 판을 손으로 잡았다가 킥에 맞춰 놓고 크로스페이더를 넘겨요. K2 Pitch 를 0 에 두면 플래터 테두리의 안쪽 스트로브 점이 멈춰 서요.","idea":"Two turntables stacked over a mixer strip, their records spinning under a still band of room light that picks out the grooves, while the DJ holds the waiting record, lets it go on the beat and slides the crossfader over to it.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Turntables\n// Family:  music\n// Idea:    Two turntables stacked over a mixer strip, their records spinning under a still band of room light that picks out the grooves, while the DJ holds the waiting record, lets it go on the beat and slides the crossfader over to it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the direct-drive DJ turntable with its strobe-dotted platter rim and the two-channel mixer between a pair of them\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pitch=-8..8, Scratch=0..1, Light=0..1\n//\n// Knob 1: Hue. Turns the record labels, the meters' LEDs, the crossfader's light and the tint of the room's light round the colour wheel, starting from an amber label over a teal one, green meters and a violet light.\n// Knob 2: Pitch. Both pitch sliders in percent: the records turn at 33 1/3 rpm and the music at 124 BPM, each times 1 plus the pitch. The inner row of strobe dots stands still at 0 and the outer row at +3.3; at +2, where the panel opens, the inner row crawls forward and the outer row back.\n// Knob 3: Scratch. How long and how hard the DJ scratches the waiting record before letting it go: at 0 only a short cue of small rocks over the first kick, at 1 five seconds of strokes up to a quarter turn, with the crossfader cutting the scratch in on every fast stroke.\n// Knob 4: Light. Where the room's light falls, turning the sheen across both records through half a turn and brightening the plinths on that side. The records spin under it and it stays put, swaying a little once a turn because neither record is quite flat.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Both decks' spindles, and their radii in LEDs: label, run-out, grooves, the record's\n// edge, the slipmat and the platter rim with its two rows of strobe dots.\nconst CX = 32;\nconst CY = [29, 99];\nconst R_SPINDLE = 1.3;\nconst R_LABEL = 8.5;\nconst R_RUN = 10.5;\nconst R_GROOVE = 24.6;\nconst R_EDGE = 25.4;\nconst R_MAT = 26.2;\nconst R_RIM = 28.9;\n// A record turns 33 1/3 times a minute, and the music is 124 beats a minute at pitch 0.\nconst OMEGA = ((2 * Math.PI) / 60) * (100 / 3);\nconst BPM = 124;\n// Strobe dots: rows for pitch 0 and +3.3 %, 54 dots a row.\nconst DOTS = 54;\nconst ROWS = [0, 0.033];\n// What each LED is: plinth, platter rim, slipmat, record edge, grooves, run-out, label, spindle.\nconst PLINTH = 0;\nconst RIM = 1;\nconst MAT = 2;\nconst EDGE = 3;\nconst GROOVE = 4;\nconst RUN = 5;\nconst LABEL = 6;\nconst SPINDLE = 7;\nconst MIXER = 8;\n// Parts of the mix: the waiting deck is held and cued, then let go while the crossfader\n// moves over, then it plays alone.\nconst CUE = 0;\nconst MIX = 1;\nconst PLAY = 2;\nconst SKIN = [205, 150, 112];\nconst SLEEVE = [34, 30, 44];\nconst CUFF = [200, 196, 205];\nconst SILVER = [178, 178, 188];\nconst LAMP = [255, 236, 206];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// A groove profile for one side of a record, as brightness against radius every 1/50 LED:\n// five tracks of fine modulated groove with a dark band between them.\nfunction grooves() {\n  const T = new Float32Array(1000);\n  const cuts = [];\n  for (let i = 1; i \u003c 5; i++) cuts.push(R_RUN + 0.6 + ((R_GROOVE - R_RUN - 1) * (i + (Math.random() - 0.5) * 0.6)) / 5);\n  let loud = 0.7;\n  let a = Math.random();\n  let b = Math.random();\n  for (let i = 0; i \u003c T.length; i++) {\n    const r = R_RUN + i / 50;\n    if (i % 45 === 0) (a = b), (b = Math.random());\n    if (cuts.some((c) => Math.abs(r - c) \u003c 0.25)) {\n      T[i] = 0.08;\n      loud = 0.45 + 0.55 * Math.random();\n      continue;\n    }\n    const u = (i % 45) / 45;\n    T[i] = loud * (0.35 + 0.65 * (a + (b - a) * u * u * (3 - 2 * u)));\n  }\n  return T;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, hue: 0, pitch: 0, scratch: 0, light: 0, live: 0, part: CUE, pt: 0, fader: 0, cut: 0, kick: 0, spot: [1, 0.4] });\n  P.kind = new Uint8Array(N);\n  P.deck = new Int8Array(N).fill(-1);\n  P.rr = new Float32Array(N);\n  P.th = new Float32Array(N);\n  P.ai = new Uint16Array(N);\n  P.g = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.sheen = new Float32Array(720);\n  P.q = new Float64Array(14);\n  const T = [grooves(), grooves()];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (y >= 58 && y \u003c 70) {\n        P.kind[p] = MIXER;\n        continue;\n      }\n      const d = y \u003c 58 ? 0 : 1;\n      const dx = x + 0.5 - CX;\n      const dy = y + 0.5 - CY[d];\n      const r = Math.hypot(dx, dy);\n      P.deck[p] = d;\n      P.rr[p] = r;\n      P.th[p] = Math.atan2(dy, dx);\n      P.ai[p] = Math.floor(((P.th[p] + Math.PI) / (2 * Math.PI)) * 360) % 360;\n      P.kind[p] = r \u003c R_SPINDLE ? SPINDLE : r \u003c R_LABEL ? LABEL : r \u003c R_RUN ? RUN : r \u003c R_GROOVE ? GROOVE : r \u003c R_EDGE ? EDGE : r \u003c R_MAT ? MAT : r \u003c R_RIM ? RIM : PLINTH;\n      if (P.kind[p] === GROOVE) {\n        // The groove brightness averaged over the LED, from 16 points inside it.\n        let s = 0;\n        for (let j = 0; j \u003c 16; j++) {\n          const q = Math.hypot(dx - 0.5 + ((j & 3) + 0.5) / 4, dy - 0.5 + ((j >> 2) + 0.5) / 4);\n          s += T[d][clamp(Math.round((q - R_RUN) * 50), 0, 999)];\n        }\n        // Pushed apart, so neighbouring rings of groove differ in the light.\n        P.g[p] = clamp((s / 16 - 0.42) * 2.2 + 0.5, 0.04, 1);\n      }\n    }\n  // Each deck: the record's angle and turn rate, the hand on it, the needle's radius, the\n  // beat and the level its meter shows.\n  P.decks = [0, 1].map((d) => ({\n    phi: Math.random() * 6.28,\n    rate: OMEGA,\n    held: d === 1,\n    hold: 0,\n    hand: d === 1 ? 1 : 0,\n    rock: 0,\n    needle: d === 0 ? 17 + 4 * Math.random() : 23.5,\n    beat: 0,\n    vu: 0,\n    peak: 0,\n    peakT: 0,\n    strobe: [Math.random(), Math.random()],\n    dust: Array.from({ length: 14 }, () => [R_RUN + 1 + Math.random() * 13, Math.random() * 6.28]),\n  }));\n  P.decks[1].hold = P.decks[1].phi;\n}\n\n// How far the waiting record is pushed from where the hand caught it, in radians, s\n// seconds into the cue: strokes while scratching, then small rocks back and forth over\n// the first kick.\nfunction stroke(P, s) {\n  const S = 5 * P.scratch;\n  if (s \u003c 0.6) return 0;\n  if (s \u003c 0.6 + S) {\n    const u = s - 0.6;\n    const amp = 0.5 + P.scratch;\n    // Two strokes a beat, each pushed sharply forward and drawn back slower, every other\n    // one shorter, and the last two beats of every eight small.\n    const beat = (u * BPM) / 60;\n    const f = beat * 2 - Math.floor(beat * 2);\n    const phrase = Math.floor(beat / 2) % 4 === 3 ? 0.3 : 1;\n    return amp * phrase * (f \u003c 0.35 ? f / 0.35 : 1 - (f - 0.35) / 0.65) * (Math.floor(beat * 2) % 2 ? 0.6 : 1);\n  }\n  return 0.22 * Math.sin((s - 0.6 - S) * 2 * Math.PI * 1.6);\n}\n\nfunction step(P, dt) {\n  P.t += dt;\n  P.pt += dt;\n  const rate = OMEGA * (1 + P.pitch);\n  const L = P.decks[P.live];\n  const O = P.decks[1 - P.live];\n  const side = P.live === 0 ? 0 : 1;\n  const S = 5 * P.scratch;\n  if (P.part === CUE) {\n    // The hand comes down on the waiting record and holds it while the platter turns under the mat.\n    const end = 0.6 + S + 1.4;\n    O.hand = Math.min(1, O.hand + dt * 3);\n    if (!O.held) {\n      O.held = true;\n      O.hold = O.phi;\n    }\n    const was = O.rock;\n    O.rock = stroke(P, P.pt);\n    O.phi = O.hold + O.rock;\n    O.rate = (O.rock - was) / Math.max(dt, 1e-4);\n    P.cut = P.pt > 0.6 && P.pt \u003c 0.6 + S && Math.abs(O.rate) > 1.5 ? 1 : 0;\n    P.fader = P.cut ? 1 - side : side;\n    // Let go on the next kick of the playing record, in time with it.\n    if (P.pt > end && L.beat % 1 \u003c (rate / OMEGA) * dt * (BPM / 60) * 1.01) {\n      O.held = false;\n      O.beat = Math.floor(L.beat);\n      P.part = MIX;\n      P.pt = 0;\n    }\n  } else if (P.part === MIX) {\n    const u = clamp(P.pt / 6, 0, 1);\n    P.fader = side + (1 - 2 * side) * u * u * (3 - 2 * u);\n    if (u >= 1) {\n      P.part = PLAY;\n      P.pt = 0;\n    }\n  } else if (P.pt > 12) {\n    P.live = 1 - P.live;\n    P.part = CUE;\n    P.pt = 0;\n  }\n  P.cut = P.part === CUE ? P.cut : 0;\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    if (!k.held) {\n      k.hand = Math.max(0, k.hand - dt * 2.5);\n      k.rate = rate;\n      k.phi += rate * dt;\n      k.beat += (BPM / 60) * (1 + P.pitch) * dt;\n      k.needle -= 0.05 * dt;\n      if (k.needle \u003c R_RUN + 0.6) k.needle = R_GROOVE - 1;\n    }\n    // A strobe row's dots seem to turn at the difference between the platter's speed and the speed the row is for.\n    for (let j = 0; j \u003c 2; j++) k.strobe[j] += (((1 + P.pitch) / (1 + ROWS[j]) - 1) * OMEGA * dt * DOTS) / (2 * Math.PI);\n    // The channel meter: the music while it plays, and the scratch's chirps while it is held.\n    const f = k.beat % 1;\n    const level = k.held ? clamp(Math.abs(k.rate) / 9, 0, 1) : 0.42 + 0.45 * Math.exp(-6 * f) + 0.18 * Math.exp(-14 * ((f + 0.5) % 1)) + 0.08 * Math.random();\n    k.vu = Math.max(level, k.vu - dt * 2.2);\n    if (k.vu >= k.peak || P.t - k.peakT > 0.8) (k.peak = k.vu), (k.peakT = P.t);\n  }\n  // The room's lights jump on each kick of the record playing out.\n  P.kick = Math.exp(-5 * (P.decks[P.part === PLAY ? 1 - P.live : P.live].beat % 1));\n  // The booth light follows the crossfader onto the deck that is playing out.\n  P.spot[0] += (1 - P.fader - P.spot[0]) * Math.min(1, dt * 8);\n  P.spot[1] += (P.fader - P.spot[1]) * Math.min(1, dt * 8);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.pitch = clamp(k[1], -8, 8) / 100;\n  P.scratch = clamp(k[2], 0, 1);\n  P.light = clamp(k[3], 0, 1);\n  for (let i = 0; i \u003c 2; i++) step(P, dt / 2);\n}\n\n// The tonearm of a deck: the pivot in the corner, the arm down to the headshell, the needle in the groove.\nfunction arm(P, B, d) {\n  const cy = CY[d];\n  const k = P.decks[d];\n  const px = CX + 26;\n  const py = cy - 21;\n  const dist = Math.hypot(26, 21);\n  const L = 31.5;\n  const al = Math.atan2(-21, 26) + Math.acos(clamp((dist * dist + k.needle * k.needle - L * L) / (2 * dist * k.needle), -1, 1));\n  const nx = CX + k.needle * Math.cos(al);\n  const ny = cy + k.needle * Math.sin(al);\n  const put = (x, y, c, w = 1) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const o = (y * W + x) * 3;\n    for (let i = 0; i \u003c 3; i++) B[o + i] = B[o + i] * (1 - w) + c[i] * w;\n  };\n  // The stylus lamp lights a pool round the needle.\n  for (let y = -6; y \u003c= 6; y++)\n    for (let x = -6; x \u003c= 6; x++) {\n      const w = Math.max(0, 1 - Math.hypot(x, y) / 6.5) ** 2 * 0.35;\n      const o = (Math.round(ny + y) * W + Math.round(nx + x)) * 3;\n      if (w > 0 && o >= 0 && o \u003c N * 3) for (let i = 0; i \u003c 3; i++) B[o + i] += LAMP[i] * w * 0.4;\n    }\n  const ux = (nx - px) / L;\n  const uy = (ny - py) / L;\n  // Counterweight behind the pivot, the pivot's collar, the arm, the headshell.\n  for (let s = -7; s \u003c -2; s += 0.5) for (const o of [-1, 0, 1]) put(px + ux * s - uy * o, py + uy * s + ux * o, s \u003c -5 ? [70, 70, 78] : [40, 40, 46]);\n  for (let a = 0; a \u003c 6.3; a += 0.3) put(px + 3 * Math.cos(a), py + 3 * Math.sin(a), [120, 120, 130]);\n  put(px, py, [20, 20, 24]);\n  for (let s = 2; s \u003c L - 4; s += 0.5) put(px + ux * s, py + uy * s, SILVER);\n  for (let s = L - 4.5; s \u003c= L; s += 0.5) for (const o of [-1, 0, 1]) put(px + ux * s - uy * o * 0.9, py + uy * s + ux * o * 0.9, o ? [26, 26, 30] : [150, 150, 160]);\n  put(px + ux * (L - 2) + uy * 2.5, py + uy * (L - 2) - ux * 2.5, SILVER);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  const hA = 0.1 + P.hue;\n  const labels = [hsv(hA, 0.8, 0.95), hsv(hA + 0.42, 0.75, 0.8)];\n  // The room light: two bright wedges across each record on the line it falls along, the near one brighter.\n  const tl = -0.6 + Math.PI * P.light;\n  const lx = Math.cos(tl);\n  const ly = Math.sin(tl);\n  const sh = P.sheen;\n  // The room's light is tinted a paler second colour.\n  const lc = hsv(hA + 0.58, 0.5, 1).map((v) => v / 255);\n  // Neither record is quite flat, so each one's band sways a little and breathes once a turn.\n  for (let d = 0; d \u003c 2; d++) {\n    const ph = P.decks[d].phi + d * 2;\n    const sway = tl + 0.1 * Math.sin(ph);\n    const lift = (1 + 0.15 * Math.cos(ph)) * (0.8 + 0.28 * P.kick);\n    for (let i = 0; i \u003c 360; i++) {\n      const a = ((i + 0.5) / 360) * 2 * Math.PI - Math.PI - sway;\n      const s = Math.sin(a);\n      sh[d * 360 + i] = lift * (Math.exp(-((s / 0.17) ** 2)) * (0.65 + 0.35 * Math.cos(a)) + 0.3 * Math.exp(-((s / 0.45) ** 2))) + 0.05;\n    }\n  }\n  const Q = P.q;\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    Q[d] = 0.45 + 0.55 * P.spot[d];\n    Q[2 + d] = k.phi;\n    Q[4 + 2 * d] = k.strobe[0];\n    Q[5 + 2 * d] = k.strobe[1];\n    for (let i = 0; i \u003c 3; i++) Q[8 + 3 * d + i] = labels[d][i];\n  }\n  face(B, P.kind, P.deck, P.rr, P.th, P.ai, P.g, sh, Q, lc, lx, ly);\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    const cy = CY[d];\n    // Dust on the record turns with it and shows only in the light.\n    for (const q of k.dust) {\n      const x = Math.round(CX + q[0] * Math.cos(q[1] + k.phi) - 0.5);\n      const y = Math.round(cy + q[0] * Math.sin(q[1] + k.phi) - 0.5);\n      const p = y * W + x;\n      const s = sh[d * 360 + P.ai[p]];\n      for (let i = 0; i \u003c 3; i++) B[p * 3 + i] += 30 + 140 * s;\n    }\n    deckParts(P, B, d);\n    arm(P, B, d);\n    if (k.hand > 0.01) hand(P, B, d);\n  }\n  mixer(P, B);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, B[p] > 255 ? 255 : B[p], B[p + 1] > 255 ? 255 : B[p + 1], B[p + 2] > 255 ? 255 : B[p + 2]);\n}\n\n// The decks' faces: plinth, platter rim and its strobe dots, slipmat, the record and its label.\n// Q holds each deck's booth light, record angle, strobe rows and label colour.\nfunction face(B, kind, deck, rr, th, ai, g, sh, Q, lc, lx, ly) {\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    const kd = kind[p];\n    if (kd === MIXER) continue;\n    const d = deck[p];\n    const spot = Q[d];\n    const r = rr[p];\n    let v;\n    let c0;\n    let c1;\n    let c2;\n    if (kd === GROOVE || kd === RUN || kd === EDGE) {\n      const s = sh[d * 360 + ai[p]] * spot * (0.45 + (0.55 * r) / R_GROOVE);\n      if (kd === GROOVE) v = 300 * s * (0.12 + 0.88 * g[p]);\n      else if (kd === RUN) v = 170 * s * (Math.abs(r - 9.3) \u003c 0.35 ? 0.4 : 1);\n      else v = 20 + 130 * s;\n      const base = kd === GROOVE ? 8 + 6 * g[p] : 9;\n      c0 = base + v * lc[0];\n      c1 = base + v * lc[1];\n      c2 = base * 1.15 + v * lc[2];\n    } else if (kd === LABEL) {\n      // The label turns with the record; each deck's record has its own design.\n      let a = th[p] - Q[2 + d];\n      a -= Math.floor(a / (2 * Math.PI)) * 2 * Math.PI;\n      const L0 = Q[8 + 3 * d];\n      const L1 = Q[9 + 3 * d];\n      const L2 = Q[10 + 3 * d];\n      let f = 1;\n      let white = false;\n      if (d === 0) {\n        white = Math.abs(r * Math.sin(a)) \u003c 1.4 && r > 2;\n        if (Math.hypot(r * Math.cos(a) - 0, r * Math.sin(a) - 5.2) \u003c 1.5) f = 0.15;\n        if (r > 6 && r \u003c 7.6 && Math.floor(a / 1.05) % 2 === 0) f = 0.35;\n      } else {\n        f = Math.floor(a / (Math.PI / 3)) % 2 ? 0.5 : 1;\n        white = (r > 6.4 && r \u003c 7.4) || Math.hypot(r * Math.cos(a) - 3.5, r * Math.sin(a) - 1.5) \u003c 1.2;\n      }\n      const s = 1 + 0.25 * sh[d * 360 + ai[p]] * spot;\n      c0 = (white ? 235 : L0 * f) * s;\n      c1 = (white ? 225 : L1 * f) * s;\n      c2 = (white ? 200 : L2 * f) * s;\n    } else if (kd === SPINDLE) {\n      c0 = c1 = c2 = 200;\n    } else if (kd === MAT) {\n      c0 = 20;\n      c1 = 18;\n      c2 = 22;\n    } else if (kd === RIM) {\n      // The platter rim's strobe dots, lit orange near the strobe lamp at the lower left.\n      const row = r \u003c 27.55 ? 0 : 1;\n      let u = ((th[p] + Math.PI) / (2 * Math.PI)) * DOTS - Q[4 + 2 * d + row];\n      u -= Math.floor(u);\n      const lamp = Math.max(0, Math.cos(th[p] - 2.6)) ** 2;\n      const lit = 80 + 110 * sh[d * 360 + ai[p]] * spot;\n      const dot = u \u003c 0.45;\n      c0 = dot ? lit + 185 * lamp : 30;\n      c1 = dot ? lit + 40 * lamp : 30;\n      c2 = dot ? lit * 1.08 : 35;\n    } else {\n      // The plinth, satin grey, brighter towards the room's light and under the booth light.\n      const dx = (p % W) + 0.5 - CX;\n      const dy = Math.floor(p / W) + 0.5 - CY[d];\n      v = (38 + 0.5 * (dx * lx + dy * ly)) * (0.8 + 0.3 * spot);\n      c0 = v;\n      c1 = v;\n      c2 = v * 1.1;\n    }\n    B[o] = c0;\n    B[o + 1] = c1;\n    B[o + 2] = c2;\n  }\n}\n\n// The controls in a deck's corners: start button and speed buttons, the strobe lamp, the pitch slider.\nfunction deckParts(P, B, d) {\n  const y0 = d ? 70 : 0;\n  const box = (x0, y1, w, h, c) => {\n    for (let y = y1; y \u003c y1 + h; y++) for (let x = x0; x \u003c x0 + w; x++) B.set(c, ((y0 + y) * W + x) * 3);\n  };\n  box(2, 52, 7, 4, [120, 120, 128]);\n  box(3, 53, 5, 2, [70, 70, 76]);\n  box(10, 54, 3, 2, [140, 90, 50]);\n  box(14, 54, 3, 2, [90, 90, 96]);\n  box(2, 44, 3, 3, [255, 110, 50]);\n  // The pitch slider: its slot and cap, and a green light when it sits at 0.\n  box(60, 37, 2, 18, [16, 16, 20]);\n  const yc = Math.round(45 + P.pitch * 100);\n  box(59, yc, 4, 2, [196, 196, 206]);\n  box(63, 45, 1, 1, Math.abs(P.pitch) \u003c 0.001 ? [60, 255, 90] : [20, 40, 24]);\n}\n\n// The DJ's hand on the left of the record, fingers towards the label, moving round with it.\nfunction hand(P, B, d) {\n  const k = P.decks[d];\n  const cy = CY[d];\n  const a = Math.PI + 0.15 + k.rock;\n  const ca = Math.cos(a);\n  const sa = Math.sin(a);\n  const w = k.hand;\n  const paint = (u, v, c, f) => {\n    // u along the radius from the spindle, v across it.\n    const x = Math.round(CX + u * ca - v * sa - 0.5 - (1 - w) * 30);\n    const y = Math.round(cy + u * sa + v * ca - 0.5);\n    if (x \u003c 0 || x >= W || y \u003c (d ? 70 : 0) || y >= (d ? H : 58)) return;\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  // The sleeve and its cuff, the back of the hand, four fingers and the thumb.\n  for (let u = 20; u \u003c 40; u += 0.5) for (let v = -3; v \u003c= 3; v += 0.5) paint(u, v, u \u003c 24 ? CUFF : SLEEVE, 1);\n  for (let u = 14; u \u003c 21; u += 0.5) for (let v = -4; v \u003c= 4; v += 0.5) paint(u, v, SKIN, 0.75 + 0.25 * Math.cos((v / 4) * 1.4) - (u - 14) * 0.02);\n  for (let v = -3; v \u003c= 3; v += 2) for (let u = 9.5 + Math.abs(v) * 0.6; u \u003c 14; u += 0.5) paint(u, v, SKIN, 0.85);\n  for (let u = 15; u \u003c 18; u += 0.5) paint(u, 5 - (u - 15) * 0.4, SKIN, 0.7);\n}\n\n// The mixer strip between the decks: a meter for each channel and the crossfader between them.\nfunction mixer(P, B) {\n  const hA = 0.1 + P.hue;\n  const set = (x, y, c, f = 1) => {\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  for (let y = 58; y \u003c 70; y++) {\n    const v = y === 58 || y === 69 ? 8 : y === 59 ? 70 : y === 68 ? 22 : 34;\n    const c = [v, v, v * 1.15];\n    for (let x = 0; x \u003c W; x++) set(x, y, c);\n  }\n  // 27 segments a meter: 17 in the first colour, 6 in the second, the last 4 in the third.\n  const segs = 27;\n  const tone = [0, 0.2, 0.33].map((h) => hsv(hA + 0.23 - h, 0.85, 1));\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    const y = d ? 66 : 60;\n    const on = Math.round(k.vu * segs);\n    const pk = Math.min(segs - 1, Math.round(k.peak * segs) - 1);\n    for (let i = 0; i \u003c segs; i++) {\n      const c = tone[i \u003c 17 ? 0 : i \u003c 23 ? 1 : 2];\n      const f = i \u003c on || i === pk ? 1 : 0.1;\n      set(5 + 2 * i, y, c, f);\n      set(5 + 2 * i, y + 1, c, f * 0.8);\n    }\n  }\n  const slot = [6, 6, 8];\n  for (let x = 12; x \u003c= 51; x++) for (let y = 63; y \u003c= 64; y++) set(x, y, slot);\n  const xc = Math.round(12 + P.fader * 36);\n  const lit = hsv(hA + 0.42 * P.fader, 0.7, 1);\n  for (let y = 62; y \u003c= 65; y++) for (let x = xc; x \u003c xc + 4; x++) set(x, y, x === xc + 1 || x === xc + 2 ? lit : SILVER, y === 65 ? 0.7 : 1);\n  const a = hsv(hA, 0.8, 1);\n  const b = hsv(hA + 0.42, 0.75, 1);\n  for (const y of [63, 64]) {\n    set(7, y, a, 0.15 + 0.85 * (1 - P.fader));\n    set(8, y, a, 0.15 + 0.85 * (1 - P.fader));\n    set(55, y, b, 0.15 + 0.85 * P.fader);\n    set(56, y, b, 0.15 + 0.85 * P.fader);\n  }\n}\n","layer":{"id":"layer-turntables","type":"code","name":"turntables","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Turntables\n// Family:  music\n// Idea:    Two turntables stacked over a mixer strip, their records spinning under a still band of room light that picks out the grooves, while the DJ holds the waiting record, lets it go on the beat and slides the crossfader over to it.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the direct-drive DJ turntable with its strobe-dotted platter rim and the two-channel mixer between a pair of them\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Pitch=-8..8, Scratch=0..1, Light=0..1\n//\n// Knob 1: Hue. Turns the record labels, the meters' LEDs, the crossfader's light and the tint of the room's light round the colour wheel, starting from an amber label over a teal one, green meters and a violet light.\n// Knob 2: Pitch. Both pitch sliders in percent: the records turn at 33 1/3 rpm and the music at 124 BPM, each times 1 plus the pitch. The inner row of strobe dots stands still at 0 and the outer row at +3.3; at +2, where the panel opens, the inner row crawls forward and the outer row back.\n// Knob 3: Scratch. How long and how hard the DJ scratches the waiting record before letting it go: at 0 only a short cue of small rocks over the first kick, at 1 five seconds of strokes up to a quarter turn, with the crossfader cutting the scratch in on every fast stroke.\n// Knob 4: Light. Where the room's light falls, turning the sheen across both records through half a turn and brightening the plinths on that side. The records spin under it and it stays put, swaying a little once a turn because neither record is quite flat.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Both decks' spindles, and their radii in LEDs: label, run-out, grooves, the record's\n// edge, the slipmat and the platter rim with its two rows of strobe dots.\nconst CX = 32;\nconst CY = [29, 99];\nconst R_SPINDLE = 1.3;\nconst R_LABEL = 8.5;\nconst R_RUN = 10.5;\nconst R_GROOVE = 24.6;\nconst R_EDGE = 25.4;\nconst R_MAT = 26.2;\nconst R_RIM = 28.9;\n// A record turns 33 1/3 times a minute, and the music is 124 beats a minute at pitch 0.\nconst OMEGA = ((2 * Math.PI) / 60) * (100 / 3);\nconst BPM = 124;\n// Strobe dots: rows for pitch 0 and +3.3 %, 54 dots a row.\nconst DOTS = 54;\nconst ROWS = [0, 0.033];\n// What each LED is: plinth, platter rim, slipmat, record edge, grooves, run-out, label, spindle.\nconst PLINTH = 0;\nconst RIM = 1;\nconst MAT = 2;\nconst EDGE = 3;\nconst GROOVE = 4;\nconst RUN = 5;\nconst LABEL = 6;\nconst SPINDLE = 7;\nconst MIXER = 8;\n// Parts of the mix: the waiting deck is held and cued, then let go while the crossfader\n// moves over, then it plays alone.\nconst CUE = 0;\nconst MIX = 1;\nconst PLAY = 2;\nconst SKIN = [205, 150, 112];\nconst SLEEVE = [34, 30, 44];\nconst CUFF = [200, 196, 205];\nconst SILVER = [178, 178, 188];\nconst LAMP = [255, 236, 206];\n\nfunction hsv(h, s, v) {\n  h -= Math.floor(h);\n  const f = (n) => {\n    const k = (n + h * 6) % 6;\n    return 255 * v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));\n  };\n  return [f(5), f(3), f(1)];\n}\n\nfunction clamp(v, a, b) {\n  return v \u003c a ? a : v > b ? b : v;\n}\n\n// A groove profile for one side of a record, as brightness against radius every 1/50 LED:\n// five tracks of fine modulated groove with a dark band between them.\nfunction grooves() {\n  const T = new Float32Array(1000);\n  const cuts = [];\n  for (let i = 1; i \u003c 5; i++) cuts.push(R_RUN + 0.6 + ((R_GROOVE - R_RUN - 1) * (i + (Math.random() - 0.5) * 0.6)) / 5);\n  let loud = 0.7;\n  let a = Math.random();\n  let b = Math.random();\n  for (let i = 0; i \u003c T.length; i++) {\n    const r = R_RUN + i / 50;\n    if (i % 45 === 0) (a = b), (b = Math.random());\n    if (cuts.some((c) => Math.abs(r - c) \u003c 0.25)) {\n      T[i] = 0.08;\n      loud = 0.45 + 0.55 * Math.random();\n      continue;\n    }\n    const u = (i % 45) / 45;\n    T[i] = loud * (0.35 + 0.65 * (a + (b - a) * u * u * (3 - 2 * u)));\n  }\n  return T;\n}\n\nexport function setup(params) {\n  const P = params;\n  Object.assign(P, { t: 0, hue: 0, pitch: 0, scratch: 0, light: 0, live: 0, part: CUE, pt: 0, fader: 0, cut: 0, kick: 0, spot: [1, 0.4] });\n  P.kind = new Uint8Array(N);\n  P.deck = new Int8Array(N).fill(-1);\n  P.rr = new Float32Array(N);\n  P.th = new Float32Array(N);\n  P.ai = new Uint16Array(N);\n  P.g = new Float32Array(N);\n  P.buf = new Float32Array(N * 3);\n  P.sheen = new Float32Array(720);\n  P.q = new Float64Array(14);\n  const T = [grooves(), grooves()];\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      if (y >= 58 && y \u003c 70) {\n        P.kind[p] = MIXER;\n        continue;\n      }\n      const d = y \u003c 58 ? 0 : 1;\n      const dx = x + 0.5 - CX;\n      const dy = y + 0.5 - CY[d];\n      const r = Math.hypot(dx, dy);\n      P.deck[p] = d;\n      P.rr[p] = r;\n      P.th[p] = Math.atan2(dy, dx);\n      P.ai[p] = Math.floor(((P.th[p] + Math.PI) / (2 * Math.PI)) * 360) % 360;\n      P.kind[p] = r \u003c R_SPINDLE ? SPINDLE : r \u003c R_LABEL ? LABEL : r \u003c R_RUN ? RUN : r \u003c R_GROOVE ? GROOVE : r \u003c R_EDGE ? EDGE : r \u003c R_MAT ? MAT : r \u003c R_RIM ? RIM : PLINTH;\n      if (P.kind[p] === GROOVE) {\n        // The groove brightness averaged over the LED, from 16 points inside it.\n        let s = 0;\n        for (let j = 0; j \u003c 16; j++) {\n          const q = Math.hypot(dx - 0.5 + ((j & 3) + 0.5) / 4, dy - 0.5 + ((j >> 2) + 0.5) / 4);\n          s += T[d][clamp(Math.round((q - R_RUN) * 50), 0, 999)];\n        }\n        // Pushed apart, so neighbouring rings of groove differ in the light.\n        P.g[p] = clamp((s / 16 - 0.42) * 2.2 + 0.5, 0.04, 1);\n      }\n    }\n  // Each deck: the record's angle and turn rate, the hand on it, the needle's radius, the\n  // beat and the level its meter shows.\n  P.decks = [0, 1].map((d) => ({\n    phi: Math.random() * 6.28,\n    rate: OMEGA,\n    held: d === 1,\n    hold: 0,\n    hand: d === 1 ? 1 : 0,\n    rock: 0,\n    needle: d === 0 ? 17 + 4 * Math.random() : 23.5,\n    beat: 0,\n    vu: 0,\n    peak: 0,\n    peakT: 0,\n    strobe: [Math.random(), Math.random()],\n    dust: Array.from({ length: 14 }, () => [R_RUN + 1 + Math.random() * 13, Math.random() * 6.28]),\n  }));\n  P.decks[1].hold = P.decks[1].phi;\n}\n\n// How far the waiting record is pushed from where the hand caught it, in radians, s\n// seconds into the cue: strokes while scratching, then small rocks back and forth over\n// the first kick.\nfunction stroke(P, s) {\n  const S = 5 * P.scratch;\n  if (s \u003c 0.6) return 0;\n  if (s \u003c 0.6 + S) {\n    const u = s - 0.6;\n    const amp = 0.5 + P.scratch;\n    // Two strokes a beat, each pushed sharply forward and drawn back slower, every other\n    // one shorter, and the last two beats of every eight small.\n    const beat = (u * BPM) / 60;\n    const f = beat * 2 - Math.floor(beat * 2);\n    const phrase = Math.floor(beat / 2) % 4 === 3 ? 0.3 : 1;\n    return amp * phrase * (f \u003c 0.35 ? f / 0.35 : 1 - (f - 0.35) / 0.65) * (Math.floor(beat * 2) % 2 ? 0.6 : 1);\n  }\n  return 0.22 * Math.sin((s - 0.6 - S) * 2 * Math.PI * 1.6);\n}\n\nfunction step(P, dt) {\n  P.t += dt;\n  P.pt += dt;\n  const rate = OMEGA * (1 + P.pitch);\n  const L = P.decks[P.live];\n  const O = P.decks[1 - P.live];\n  const side = P.live === 0 ? 0 : 1;\n  const S = 5 * P.scratch;\n  if (P.part === CUE) {\n    // The hand comes down on the waiting record and holds it while the platter turns under the mat.\n    const end = 0.6 + S + 1.4;\n    O.hand = Math.min(1, O.hand + dt * 3);\n    if (!O.held) {\n      O.held = true;\n      O.hold = O.phi;\n    }\n    const was = O.rock;\n    O.rock = stroke(P, P.pt);\n    O.phi = O.hold + O.rock;\n    O.rate = (O.rock - was) / Math.max(dt, 1e-4);\n    P.cut = P.pt > 0.6 && P.pt \u003c 0.6 + S && Math.abs(O.rate) > 1.5 ? 1 : 0;\n    P.fader = P.cut ? 1 - side : side;\n    // Let go on the next kick of the playing record, in time with it.\n    if (P.pt > end && L.beat % 1 \u003c (rate / OMEGA) * dt * (BPM / 60) * 1.01) {\n      O.held = false;\n      O.beat = Math.floor(L.beat);\n      P.part = MIX;\n      P.pt = 0;\n    }\n  } else if (P.part === MIX) {\n    const u = clamp(P.pt / 6, 0, 1);\n    P.fader = side + (1 - 2 * side) * u * u * (3 - 2 * u);\n    if (u >= 1) {\n      P.part = PLAY;\n      P.pt = 0;\n    }\n  } else if (P.pt > 12) {\n    P.live = 1 - P.live;\n    P.part = CUE;\n    P.pt = 0;\n  }\n  P.cut = P.part === CUE ? P.cut : 0;\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    if (!k.held) {\n      k.hand = Math.max(0, k.hand - dt * 2.5);\n      k.rate = rate;\n      k.phi += rate * dt;\n      k.beat += (BPM / 60) * (1 + P.pitch) * dt;\n      k.needle -= 0.05 * dt;\n      if (k.needle \u003c R_RUN + 0.6) k.needle = R_GROOVE - 1;\n    }\n    // A strobe row's dots seem to turn at the difference between the platter's speed and the speed the row is for.\n    for (let j = 0; j \u003c 2; j++) k.strobe[j] += (((1 + P.pitch) / (1 + ROWS[j]) - 1) * OMEGA * dt * DOTS) / (2 * Math.PI);\n    // The channel meter: the music while it plays, and the scratch's chirps while it is held.\n    const f = k.beat % 1;\n    const level = k.held ? clamp(Math.abs(k.rate) / 9, 0, 1) : 0.42 + 0.45 * Math.exp(-6 * f) + 0.18 * Math.exp(-14 * ((f + 0.5) % 1)) + 0.08 * Math.random();\n    k.vu = Math.max(level, k.vu - dt * 2.2);\n    if (k.vu >= k.peak || P.t - k.peakT > 0.8) (k.peak = k.vu), (k.peakT = P.t);\n  }\n  // The room's lights jump on each kick of the record playing out.\n  P.kick = Math.exp(-5 * (P.decks[P.part === PLAY ? 1 - P.live : P.live].beat % 1));\n  // The booth light follows the crossfader onto the deck that is playing out.\n  P.spot[0] += (1 - P.fader - P.spot[0]) * Math.min(1, dt * 8);\n  P.spot[1] += (P.fader - P.spot[1]) * Math.min(1, dt * 8);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(Math.max(dt, 0), 0.1);\n  P.hue = clamp(k[0], 0, 1);\n  P.pitch = clamp(k[1], -8, 8) / 100;\n  P.scratch = clamp(k[2], 0, 1);\n  P.light = clamp(k[3], 0, 1);\n  for (let i = 0; i \u003c 2; i++) step(P, dt / 2);\n}\n\n// The tonearm of a deck: the pivot in the corner, the arm down to the headshell, the needle in the groove.\nfunction arm(P, B, d) {\n  const cy = CY[d];\n  const k = P.decks[d];\n  const px = CX + 26;\n  const py = cy - 21;\n  const dist = Math.hypot(26, 21);\n  const L = 31.5;\n  const al = Math.atan2(-21, 26) + Math.acos(clamp((dist * dist + k.needle * k.needle - L * L) / (2 * dist * k.needle), -1, 1));\n  const nx = CX + k.needle * Math.cos(al);\n  const ny = cy + k.needle * Math.sin(al);\n  const put = (x, y, c, w = 1) => {\n    x = Math.round(x);\n    y = Math.round(y);\n    if (x \u003c 0 || y \u003c 0 || x >= W || y >= H) return;\n    const o = (y * W + x) * 3;\n    for (let i = 0; i \u003c 3; i++) B[o + i] = B[o + i] * (1 - w) + c[i] * w;\n  };\n  // The stylus lamp lights a pool round the needle.\n  for (let y = -6; y \u003c= 6; y++)\n    for (let x = -6; x \u003c= 6; x++) {\n      const w = Math.max(0, 1 - Math.hypot(x, y) / 6.5) ** 2 * 0.35;\n      const o = (Math.round(ny + y) * W + Math.round(nx + x)) * 3;\n      if (w > 0 && o >= 0 && o \u003c N * 3) for (let i = 0; i \u003c 3; i++) B[o + i] += LAMP[i] * w * 0.4;\n    }\n  const ux = (nx - px) / L;\n  const uy = (ny - py) / L;\n  // Counterweight behind the pivot, the pivot's collar, the arm, the headshell.\n  for (let s = -7; s \u003c -2; s += 0.5) for (const o of [-1, 0, 1]) put(px + ux * s - uy * o, py + uy * s + ux * o, s \u003c -5 ? [70, 70, 78] : [40, 40, 46]);\n  for (let a = 0; a \u003c 6.3; a += 0.3) put(px + 3 * Math.cos(a), py + 3 * Math.sin(a), [120, 120, 130]);\n  put(px, py, [20, 20, 24]);\n  for (let s = 2; s \u003c L - 4; s += 0.5) put(px + ux * s, py + uy * s, SILVER);\n  for (let s = L - 4.5; s \u003c= L; s += 0.5) for (const o of [-1, 0, 1]) put(px + ux * s - uy * o * 0.9, py + uy * s + ux * o * 0.9, o ? [26, 26, 30] : [150, 150, 160]);\n  put(px + ux * (L - 2) + uy * 2.5, py + uy * (L - 2) - ux * 2.5, SILVER);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const B = P.buf;\n  const hA = 0.1 + P.hue;\n  const labels = [hsv(hA, 0.8, 0.95), hsv(hA + 0.42, 0.75, 0.8)];\n  // The room light: two bright wedges across each record on the line it falls along, the near one brighter.\n  const tl = -0.6 + Math.PI * P.light;\n  const lx = Math.cos(tl);\n  const ly = Math.sin(tl);\n  const sh = P.sheen;\n  // The room's light is tinted a paler second colour.\n  const lc = hsv(hA + 0.58, 0.5, 1).map((v) => v / 255);\n  // Neither record is quite flat, so each one's band sways a little and breathes once a turn.\n  for (let d = 0; d \u003c 2; d++) {\n    const ph = P.decks[d].phi + d * 2;\n    const sway = tl + 0.1 * Math.sin(ph);\n    const lift = (1 + 0.15 * Math.cos(ph)) * (0.8 + 0.28 * P.kick);\n    for (let i = 0; i \u003c 360; i++) {\n      const a = ((i + 0.5) / 360) * 2 * Math.PI - Math.PI - sway;\n      const s = Math.sin(a);\n      sh[d * 360 + i] = lift * (Math.exp(-((s / 0.17) ** 2)) * (0.65 + 0.35 * Math.cos(a)) + 0.3 * Math.exp(-((s / 0.45) ** 2))) + 0.05;\n    }\n  }\n  const Q = P.q;\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    Q[d] = 0.45 + 0.55 * P.spot[d];\n    Q[2 + d] = k.phi;\n    Q[4 + 2 * d] = k.strobe[0];\n    Q[5 + 2 * d] = k.strobe[1];\n    for (let i = 0; i \u003c 3; i++) Q[8 + 3 * d + i] = labels[d][i];\n  }\n  face(B, P.kind, P.deck, P.rr, P.th, P.ai, P.g, sh, Q, lc, lx, ly);\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    const cy = CY[d];\n    // Dust on the record turns with it and shows only in the light.\n    for (const q of k.dust) {\n      const x = Math.round(CX + q[0] * Math.cos(q[1] + k.phi) - 0.5);\n      const y = Math.round(cy + q[0] * Math.sin(q[1] + k.phi) - 0.5);\n      const p = y * W + x;\n      const s = sh[d * 360 + P.ai[p]];\n      for (let i = 0; i \u003c 3; i++) B[p * 3 + i] += 30 + 140 * s;\n    }\n    deckParts(P, B, d);\n    arm(P, B, d);\n    if (k.hand > 0.01) hand(P, B, d);\n  }\n  mixer(P, B);\n  for (let p = 0, y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, B[p] > 255 ? 255 : B[p], B[p + 1] > 255 ? 255 : B[p + 1], B[p + 2] > 255 ? 255 : B[p + 2]);\n}\n\n// The decks' faces: plinth, platter rim and its strobe dots, slipmat, the record and its label.\n// Q holds each deck's booth light, record angle, strobe rows and label colour.\nfunction face(B, kind, deck, rr, th, ai, g, sh, Q, lc, lx, ly) {\n  for (let p = 0; p \u003c N; p++) {\n    const o = p * 3;\n    const kd = kind[p];\n    if (kd === MIXER) continue;\n    const d = deck[p];\n    const spot = Q[d];\n    const r = rr[p];\n    let v;\n    let c0;\n    let c1;\n    let c2;\n    if (kd === GROOVE || kd === RUN || kd === EDGE) {\n      const s = sh[d * 360 + ai[p]] * spot * (0.45 + (0.55 * r) / R_GROOVE);\n      if (kd === GROOVE) v = 300 * s * (0.12 + 0.88 * g[p]);\n      else if (kd === RUN) v = 170 * s * (Math.abs(r - 9.3) \u003c 0.35 ? 0.4 : 1);\n      else v = 20 + 130 * s;\n      const base = kd === GROOVE ? 8 + 6 * g[p] : 9;\n      c0 = base + v * lc[0];\n      c1 = base + v * lc[1];\n      c2 = base * 1.15 + v * lc[2];\n    } else if (kd === LABEL) {\n      // The label turns with the record; each deck's record has its own design.\n      let a = th[p] - Q[2 + d];\n      a -= Math.floor(a / (2 * Math.PI)) * 2 * Math.PI;\n      const L0 = Q[8 + 3 * d];\n      const L1 = Q[9 + 3 * d];\n      const L2 = Q[10 + 3 * d];\n      let f = 1;\n      let white = false;\n      if (d === 0) {\n        white = Math.abs(r * Math.sin(a)) \u003c 1.4 && r > 2;\n        if (Math.hypot(r * Math.cos(a) - 0, r * Math.sin(a) - 5.2) \u003c 1.5) f = 0.15;\n        if (r > 6 && r \u003c 7.6 && Math.floor(a / 1.05) % 2 === 0) f = 0.35;\n      } else {\n        f = Math.floor(a / (Math.PI / 3)) % 2 ? 0.5 : 1;\n        white = (r > 6.4 && r \u003c 7.4) || Math.hypot(r * Math.cos(a) - 3.5, r * Math.sin(a) - 1.5) \u003c 1.2;\n      }\n      const s = 1 + 0.25 * sh[d * 360 + ai[p]] * spot;\n      c0 = (white ? 235 : L0 * f) * s;\n      c1 = (white ? 225 : L1 * f) * s;\n      c2 = (white ? 200 : L2 * f) * s;\n    } else if (kd === SPINDLE) {\n      c0 = c1 = c2 = 200;\n    } else if (kd === MAT) {\n      c0 = 20;\n      c1 = 18;\n      c2 = 22;\n    } else if (kd === RIM) {\n      // The platter rim's strobe dots, lit orange near the strobe lamp at the lower left.\n      const row = r \u003c 27.55 ? 0 : 1;\n      let u = ((th[p] + Math.PI) / (2 * Math.PI)) * DOTS - Q[4 + 2 * d + row];\n      u -= Math.floor(u);\n      const lamp = Math.max(0, Math.cos(th[p] - 2.6)) ** 2;\n      const lit = 80 + 110 * sh[d * 360 + ai[p]] * spot;\n      const dot = u \u003c 0.45;\n      c0 = dot ? lit + 185 * lamp : 30;\n      c1 = dot ? lit + 40 * lamp : 30;\n      c2 = dot ? lit * 1.08 : 35;\n    } else {\n      // The plinth, satin grey, brighter towards the room's light and under the booth light.\n      const dx = (p % W) + 0.5 - CX;\n      const dy = Math.floor(p / W) + 0.5 - CY[d];\n      v = (38 + 0.5 * (dx * lx + dy * ly)) * (0.8 + 0.3 * spot);\n      c0 = v;\n      c1 = v;\n      c2 = v * 1.1;\n    }\n    B[o] = c0;\n    B[o + 1] = c1;\n    B[o + 2] = c2;\n  }\n}\n\n// The controls in a deck's corners: start button and speed buttons, the strobe lamp, the pitch slider.\nfunction deckParts(P, B, d) {\n  const y0 = d ? 70 : 0;\n  const box = (x0, y1, w, h, c) => {\n    for (let y = y1; y \u003c y1 + h; y++) for (let x = x0; x \u003c x0 + w; x++) B.set(c, ((y0 + y) * W + x) * 3);\n  };\n  box(2, 52, 7, 4, [120, 120, 128]);\n  box(3, 53, 5, 2, [70, 70, 76]);\n  box(10, 54, 3, 2, [140, 90, 50]);\n  box(14, 54, 3, 2, [90, 90, 96]);\n  box(2, 44, 3, 3, [255, 110, 50]);\n  // The pitch slider: its slot and cap, and a green light when it sits at 0.\n  box(60, 37, 2, 18, [16, 16, 20]);\n  const yc = Math.round(45 + P.pitch * 100);\n  box(59, yc, 4, 2, [196, 196, 206]);\n  box(63, 45, 1, 1, Math.abs(P.pitch) \u003c 0.001 ? [60, 255, 90] : [20, 40, 24]);\n}\n\n// The DJ's hand on the left of the record, fingers towards the label, moving round with it.\nfunction hand(P, B, d) {\n  const k = P.decks[d];\n  const cy = CY[d];\n  const a = Math.PI + 0.15 + k.rock;\n  const ca = Math.cos(a);\n  const sa = Math.sin(a);\n  const w = k.hand;\n  const paint = (u, v, c, f) => {\n    // u along the radius from the spindle, v across it.\n    const x = Math.round(CX + u * ca - v * sa - 0.5 - (1 - w) * 30);\n    const y = Math.round(cy + u * sa + v * ca - 0.5);\n    if (x \u003c 0 || x >= W || y \u003c (d ? 70 : 0) || y >= (d ? H : 58)) return;\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  // The sleeve and its cuff, the back of the hand, four fingers and the thumb.\n  for (let u = 20; u \u003c 40; u += 0.5) for (let v = -3; v \u003c= 3; v += 0.5) paint(u, v, u \u003c 24 ? CUFF : SLEEVE, 1);\n  for (let u = 14; u \u003c 21; u += 0.5) for (let v = -4; v \u003c= 4; v += 0.5) paint(u, v, SKIN, 0.75 + 0.25 * Math.cos((v / 4) * 1.4) - (u - 14) * 0.02);\n  for (let v = -3; v \u003c= 3; v += 2) for (let u = 9.5 + Math.abs(v) * 0.6; u \u003c 14; u += 0.5) paint(u, v, SKIN, 0.85);\n  for (let u = 15; u \u003c 18; u += 0.5) paint(u, 5 - (u - 15) * 0.4, SKIN, 0.7);\n}\n\n// The mixer strip between the decks: a meter for each channel and the crossfader between them.\nfunction mixer(P, B) {\n  const hA = 0.1 + P.hue;\n  const set = (x, y, c, f = 1) => {\n    const o = (y * W + x) * 3;\n    B[o] = c[0] * f;\n    B[o + 1] = c[1] * f;\n    B[o + 2] = c[2] * f;\n  };\n  for (let y = 58; y \u003c 70; y++) {\n    const v = y === 58 || y === 69 ? 8 : y === 59 ? 70 : y === 68 ? 22 : 34;\n    const c = [v, v, v * 1.15];\n    for (let x = 0; x \u003c W; x++) set(x, y, c);\n  }\n  // 27 segments a meter: 17 in the first colour, 6 in the second, the last 4 in the third.\n  const segs = 27;\n  const tone = [0, 0.2, 0.33].map((h) => hsv(hA + 0.23 - h, 0.85, 1));\n  for (let d = 0; d \u003c 2; d++) {\n    const k = P.decks[d];\n    const y = d ? 66 : 60;\n    const on = Math.round(k.vu * segs);\n    const pk = Math.min(segs - 1, Math.round(k.peak * segs) - 1);\n    for (let i = 0; i \u003c segs; i++) {\n      const c = tone[i \u003c 17 ? 0 : i \u003c 23 ? 1 : 2];\n      const f = i \u003c on || i === pk ? 1 : 0.1;\n      set(5 + 2 * i, y, c, f);\n      set(5 + 2 * i, y + 1, c, f * 0.8);\n    }\n  }\n  const slot = [6, 6, 8];\n  for (let x = 12; x \u003c= 51; x++) for (let y = 63; y \u003c= 64; y++) set(x, y, slot);\n  const xc = Math.round(12 + P.fader * 36);\n  const lit = hsv(hA + 0.42 * P.fader, 0.7, 1);\n  for (let y = 62; y \u003c= 65; y++) for (let x = xc; x \u003c xc + 4; x++) set(x, y, x === xc + 1 || x === xc + 2 ? lit : SILVER, y === 65 ? 0.7 : 1);\n  const a = hsv(hA, 0.8, 1);\n  const b = hsv(hA + 0.42, 0.75, 1);\n  for (const y of [63, 64]) {\n    set(7, y, a, 0.15 + 0.85 * (1 - P.fader));\n    set(8, y, a, 0.15 + 0.85 * (1 - P.fader));\n    set(55, y, b, 0.15 + 0.85 * P.fader);\n    set(56, y, b, 0.15 + 0.85 * P.fader);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Pitch=-8..8, Scratch=0..1, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"Turns the record labels, the meters' LEDs, the crossfader's light and the tint of the room's light round the colour wheel, starting from an amber label over a teal one, green meters and a violet light."},{"name":"Pitch","min":-8,"max":8,"about":"Both pitch sliders in percent: the records turn at 33 1/3 rpm and the music at 124 BPM, each times 1 plus the pitch. The inner row of strobe dots stands still at 0 and the outer row at +3.3; at +2, where the panel opens, the inner row crawls forward and the outer row back."},{"name":"Scratch","min":0,"max":1,"about":"How long and how hard the DJ scratches the waiting record before letting it go: at 0 only a short cue of small rocks over the first kick, at 1 five seconds of strokes up to a quarter turn, with the crossfader cutting the scratch in on every fast stroke."},{"name":"Light","min":0,"max":1,"about":"Where the room's light falls, turning the sheen across both records through half a turn and brightening the plinths on that side. The records spin under it and it stays put, swaying a little once a turn because neither record is quite flat."}],"start":[0,2,0,0.06],"measures":{"motion":0.2259,"detail":0.0842,"edges":0.4014,"complexity":1.294,"coverage":0.7108,"colour":0.1698,"drift":0.051},"knobResponse":[0.0432,0.0432,0.0448,0.0571]},{"slug":"typewriter","title":"Typewriter","family":"type","round":18,"note":"수동 타자기가 시 두 편을 3×5 픽셀 글자로 한 자씩 쳐요. 칠 때마다 활자대가 리본을 지나 튀어 올라 글자를 찍고 종이가 한 칸 왼쪽으로 밀리며, 줄 끝에서 벨이 번쩍이면 캐리지가 오른쪽으로 돌아오며 종이를 한 줄 올려요. K4 를 돌리면 리본이 닳아 글자가 옅어지고, 빨간 반쪽으로 치는 낱말이 늘어요.","idea":"A manual typewriter types two old poems letter by letter in a 3 by 5 pixel face, each typebar flicking up through the ribbon, while the sheet slides one letter left at every stroke, rings at the line's end and rides back with the carriage to feed up a line.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Typewriter\n// Family:  type\n// Idea:    A manual typewriter types two old poems letter by letter in a 3 by 5 pixel face, each typebar flicking up through the ribbon, while the sheet slides one letter left at every stroke, rings at the line's end and rides back with the carriage to feed up a line.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the portable typewriters of the 1950s, typing Emily Dickinson and Christina Rossetti\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Speed=0.2..3, Spacing=1..2, Ribbon=0..1\n//\n// Knob 1: Paper. The sheet and its ink: white bond with black at 0, then cream with brown, a canary carbon copy in blue and a pink copy in violet.\n// Knob 2: Speed. Strokes a second: at 2 a brisk four and a half, at 0.2 one every two seconds, at 3 nearly seven.\n// Knob 3: Spacing. The line feed, from single spacing at 1 (7 rows a line) to double at 2 (14 rows).\n// Knob 4: Ribbon. At 0 a fresh ribbon, black with the titles on its red half; turned up it wears to a faint grey that drops pixels, and the typist moves to the red half for more and more words.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sheet: 96 LEDs wide (16 letters of 4 LEDs between margins of 16) and\n// 320 long. The printing point is column 32; the line being typed has its\n// foot on row 83.\nconst PW = 96;\nconst PH = 320;\nconst MARGIN = 16;\nconst COLS = 16;\nconst PX = 31;\nconst BASE = 83;\nconst TOP = 18;\n// Where the paper goes under the card guide, and the machine below it.\nconst PAPER_END = 88;\n// The basket of 15 typebars, fanned below the printing point.\nconst BX = 32;\nconst BY = 88;\nconst BARS = 15;\n// The 3 by 5 face, rows top to bottom, one bit per column.\nconst GLYPHS = {\n  A: \"010101111101101\", B: \"110101110101110\", C: \"011100100100011\", D: \"110101101101110\",\n  E: \"111100110100111\", F: \"111100110100100\", G: \"011100101101011\", H: \"101101111101101\",\n  I: \"111010010010111\", J: \"001001001101010\", K: \"101101110101101\", L: \"100100100100111\",\n  M: \"101111111101101\", N: \"110101101101101\", O: \"010101101101010\", P: \"110101110100100\",\n  Q: \"010101101111011\", R: \"110101110101101\", S: \"011100010001110\", T: \"111010010010010\",\n  U: \"101101101101011\", V: \"101101101010010\", W: \"101101111111101\", X: \"101101010101101\",\n  Y: \"101101010010010\", Z: \"111001010100111\", \".\": \"000000000000010\", \",\": \"000000000010100\",\n  \"-\": \"000000111000000\", \"!\": \"010010010000010\", \"?\": \"110001010000010\", \"'\": \"010010000000000\",\n  \":\": \"000010000010000\", \";\": \"000010000010100\",\n};\n// Emily Dickinson's \"Hope\" is the thing with feathers (1891) and Christina\n// Rossetti's Who has seen the wind? (1872), and between them the line typists\n// learned on. Words in stars go on the ribbon's red half.\nconst POEMS = [\n  \"*HOPE*\",\n  \"\",\n  \"HOPE IS THE THING WITH FEATHERS -\",\n  \"THAT PERCHES IN THE SOUL -\",\n  \"AND SINGS THE TUNE WITHOUT THE WORDS -\",\n  \"AND NEVER STOPS - AT ALL -\",\n  \"\",\n  \"AND SWEETEST - IN THE GALE - IS HEARD -\",\n  \"AND SORE MUST BE THE STORM -\",\n  \"THAT COULD ABASH THE LITTLE BIRD\",\n  \"THAT KEPT SO MANY WARM -\",\n  \"\",\n  \"*E. DICKINSON*\",\n  \"\",\n  \"\",\n  \"NOW IS THE TIME FOR ALL GOOD MEN TO COME TO THE AID OF THE PARTY.\",\n  \"\",\n  \"\",\n  \"*WHO HAS SEEN THE WIND?*\",\n  \"\",\n  \"WHO HAS SEEN THE WIND?\",\n  \"NEITHER I NOR YOU:\",\n  \"BUT WHEN THE LEAVES HANG TREMBLING,\",\n  \"THE WIND IS PASSING THROUGH.\",\n  \"\",\n  \"WHO HAS SEEN THE WIND?\",\n  \"NEITHER YOU NOR I:\",\n  \"BUT WHEN THE TREES BOW DOWN THEIR HEADS,\",\n  \"THE WIND IS PASSING BY.\",\n  \"\",\n  \"*C. ROSSETTI*\",\n  \"\",\n  \"\",\n];\n// Paper and ink sets for the Paper knob: paper, ink, red ink.\nconst SETS = [\n  [[236, 236, 228], [20, 20, 26], [196, 26, 30]],\n  [[238, 222, 184], [70, 38, 20], [184, 40, 26]],\n  [[246, 230, 120], [30, 44, 150], [190, 30, 40]],\n  [[244, 196, 204], [76, 30, 120], [176, 20, 46]],\n];\nconst ENAMEL = [92, 150, 132];\nconst CHROME = [178, 184, 188];\nconst KEYROWS = [\"QWERTYUIOP\", \"ASDFGHJKL\", \"ZXCVBNM,.\"];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n\n// The poems broken at 16 letters; a broken line goes on indented by two. A\n// line with a starred word is typed in red throughout.\nfunction wrap() {\n  const out = [];\n  for (const line of POEMS) {\n    const red = line.includes(\"*\");\n    let row = [];\n    let len = 0;\n    for (const word of line.replace(/\\*/g, \"\").split(\" \")) {\n      if (!word) continue;\n      if (len && len + 1 + word.length > COLS) {\n        out.push(row);\n        row = [{ ch: \" \" }, { ch: \" \" }];\n        len = 2;\n      } else if (len) {\n        row.push({ ch: \" \" });\n        len++;\n      }\n      for (const ch of word) row.push({ ch, red });\n      len += word.length;\n    }\n    out.push(row);\n  }\n  return out;\n}\n\n// Key and typebar for each letter.\nfunction keyOf(ch) {\n  for (let r = 0; r \u003c 3; r++) {\n    const i = KEYROWS[r].indexOf(ch);\n    if (i >= 0) return { r, i, bar: clamp(Math.round(i * 1.45 + r * 0.6), 0, BARS - 1) };\n  }\n  return { r: 0, i: 9, bar: 14 };\n}\n\nfunction lamp(x, y) {\n  return 0.8 + 0.3 * Math.exp(-((x - 6) ** 2 + (y - 10) ** 2) / (2 * 40 * 40));\n}\n\nexport function setup(params) {\n  const P = params;\n  P.lines = wrap();\n  P.started = false;\n  P.ink = new Uint8Array(PW * PH);\n  P.inkRed = new Uint8Array(PW * PH);\n  P.grain = new Uint8Array(PW * PH);\n  for (let i = 0; i \u003c PW * PH; i++) P.grain[i] = Math.floor(Math.random() * 256);\n  P.frame = new Float32Array(N * 3);\n  P.machine = null;\n}\n\nfunction newSheet(P) {\n  P.ink.fill(0);\n  P.inkRed.fill(0);\n  P.row = 0;\n}\n\n// One letter struck at the current column: the strike strength varies from\n// letter to letter, and its pixels from one to the next.\nfunction stamp(P, cell, red) {\n  const g = GLYPHS[cell.ch];\n  if (!g) return;\n  const x0 = MARGIN + P.col * 4;\n  const y0 = TOP + P.row * P.ls;\n  const strike = 0.62 + 0.38 * Math.random();\n  const word = red ? 255 : P.wordRand;\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = 0; i \u003c 3; i++) {\n      if (g[j * 3 + i] !== \"1\") continue;\n      const p = (y0 + j) * PW + x0 + i;\n      if (p \u003c 0 || p >= PW * PH) continue;\n      P.ink[p] = Math.round(255 * clamp(strike * (0.8 + 0.2 * Math.random()) + (j === 0 ? -0.06 : 0), 0, 1));\n      P.inkRed[p] = word;\n    }\n}\n\nfunction linesPerPage(P) {\n  return Math.floor((PH - TOP - 24) / P.ls);\n}\n\n// The carriage moves on one letter; five letters before the right margin\n// the bell rings.\nfunction advance(P) {\n  P.col++;\n  if (P.col === COLS - 5) P.bell = 1;\n}\n\n// The typist, as a little machine of its own: type the line, ring, return.\nfunction step(P, dt) {\n  P.timer -= dt;\n  if (P.strike) {\n    P.strike.t += dt;\n    // The letter lands when the typebar reaches the paper, and the carriage\n    // escapes one letter as the bar falls back.\n    if (P.strike.cell && P.strike.t >= 0.05) {\n      stamp(P, P.strike.cell, P.strike.red);\n      P.strike.cell = null;\n      advance(P);\n    }\n    if (P.strike.t > 0.16) P.strike = null;\n  }\n  P.bell = Math.max(0, P.bell - dt * 1.6);\n  P.dip = Math.max(0, P.dip - dt * 8);\n  // The carriage and the paper follow where the typist put them.\n  const want = PX - MARGIN - P.col * 4;\n  const rate = P.phase === \"type\" ? 120 : 220;\n  if (P.carX \u003c want) P.carX = Math.min(want, P.carX + rate * dt);\n  else if (P.carX > want) P.carX = Math.max(want, P.carX - rate * dt);\n  const scroll = TOP + P.row * P.ls + 4 - BASE + P.extra;\n  P.scroll += clamp(scroll - P.scroll, -90 * dt, 90 * dt);\n  if (P.timer > 0 || (P.strike && P.strike.cell)) return;\n  const line = P.lines[P.line % P.lines.length];\n  if (P.phase === \"type\") {\n    if (P.col >= line.length) {\n      P.phase = \"return\";\n      P.timer = 0.12 + 0.15 / P.speed;\n      return;\n    }\n    const cell = line[P.col];\n    P.dip = 1;\n    if (cell.ch === \" \") {\n      P.wordRand = Math.floor(Math.random() * 255);\n      P.key = { r: 3, i: 0 };\n      advance(P);\n    } else {\n      const k = keyOf(cell.ch);\n      P.key = k;\n      P.strike = { bar: k.bar, t: 0, red: cell.red || P.wordRand \u003c 255 * P.redShare, cell };\n    }\n    const pause = cell.ch === \" \" ? 0.08 : /[,.:;-]/.test(cell.ch) ? 0.12 : 0;\n    P.timer = (0.22 * (0.7 + 0.6 * Math.random())) / P.speed + pause;\n  } else if (P.phase === \"return\") {\n    // Carriage return: the paper rides back right and the platen feeds a line.\n    P.col = 0;\n    P.line++;\n    P.row++;\n    P.phase = \"type\";\n    P.timer = 0.25 + 0.2 / P.speed;\n    P.wordRand = Math.floor(Math.random() * 255);\n    if (P.row >= linesPerPage(P)) {\n      // The sheet is full: pulled out over the top, and a fresh one wound in.\n      P.phase = \"page\";\n      P.timer = 1.8;\n      P.extra = 150;\n    }\n  } else if (P.phase === \"page\") {\n    newSheet(P);\n    P.extra = 0;\n    P.scroll = TOP + 4 - BASE - 70;\n    P.phase = \"type\";\n    P.timer = 1;\n  }\n}\n\n// The still parts of the machine below the paper, drawn once.\nfunction buildMachine(P) {\n  const M = new Float32Array(N * 3);\n  const put = (x, y, c) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = (y * W + x) * 3;\n    M[p] = c[0];\n    M[p + 1] = c[1];\n    M[p + 2] = c[2];\n  };\n  // The desk lamp at the upper left, and the wall behind the machine, warm\n  // where the lamp falls on it.\n  P.lamp = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) P.lamp[p] = lamp(p % W, Math.floor(p / W));\n  for (let y = 0; y \u003c= PAPER_END; y++) for (let x = 0; x \u003c W; x++) put(x, y, [22, 17, 14].map((v) => v * P.lamp[y * W + x]));\n  for (let y = PAPER_END + 1; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      // The enamel body, lit from the lamp at the upper left, its front\n      // falling away into shade.\n      const l = lamp(x, y) * (1 - 0.35 * ((y - 90) / 38));\n      put(x, y, ENAMEL.map((v) => v * l));\n    }\n  // The carriage rail and the opening of the type basket.\n  for (let x = 0; x \u003c W; x++) put(x, PAPER_END + 1, CHROME.map((v) => v * lamp(x, 89)));\n  for (let y = PAPER_END + 2; y \u003c 110; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r = Math.hypot(x - BX, y - BY);\n      if (r \u003c 21.5 && y > BY) put(x, y, [14, 15, 16]);\n      if (r >= 21.5 && r \u003c 22.6 && y > BY) put(x, y, CHROME.map((v) => v * 0.8));\n    }\n  // Keys: three staggered rows of round caps with chrome rims, and a space bar.\n  P.keys = [];\n  for (let r = 0; r \u003c 3; r++)\n    for (let i = 0; i \u003c KEYROWS[r].length; i++) {\n      const kx = 3 + r * 2 + i * 6;\n      const ky = 111 + r * 5;\n      P.keys.push([r, i, kx, ky]);\n    }\n  for (let x = 18; x \u003c 47; x++) {\n    put(x, 126, CHROME.map((v) => v * 0.85));\n    put(x, 127, [30, 30, 32]);\n  }\n  P.machine = M;\n}\n\nfunction drawKey(F, kx, ky, down) {\n  for (let j = 0; j \u003c 4; j++)\n    for (let i = 0; i \u003c 4; i++) {\n      if ((i === 0 || i === 3) && (j === 0 || j === 3)) continue;\n      const rim = i === 0 || i === 3 || j === 0 || j === 3;\n      const c = rim ? (down ? [110, 114, 118] : [196, 200, 204]) : down ? [8, 8, 9] : [26, 26, 28];\n      const y = ky + j + (down ? 1 : 0);\n      const p = (y * W + kx + i) * 3;\n      if (y \u003c H) {\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n    }\n}\n\nfunction line(F, x0, y0, x1, y1, c) {\n  const n = Math.ceil(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0))) + 1;\n  for (let s = 0; s \u003c= n; s++) {\n    const x = Math.round(x0 + ((x1 - x0) * s) / n);\n    const y = Math.round(y0 + ((y1 - y0) * s) / n);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = (y * W + x) * 3;\n    F[p] = c[0];\n    F[p + 1] = c[1];\n    F[p + 2] = c[2];\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.paper = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.05, 3) / 2;\n  P.wear = clamp(k[3], 0, 1);\n  P.redShare = 0.45 * P.wear * P.wear;\n  const ls = Math.round(7 * clamp(k[2], 1, 2));\n  if (!P.started) {\n    P.started = true;\n    P.ls = ls;\n    newSheet(P);\n    // The page is half typed when the panel opens: the first lines are already\n    // on it, and the typist has been at the next for three seconds.\n    const half = Math.floor(linesPerPage(P) / 2);\n    P.line = 0;\n    for (; P.row \u003c half; P.row++, P.line++) {\n      const row = P.lines[P.line % P.lines.length];\n      for (P.col = 0; P.col \u003c row.length; P.col++) {\n        if (row[P.col].ch === \" \" || !P.col) P.wordRand = Math.floor(Math.random() * 255);\n        stamp(P, row[P.col], row[P.col].red);\n      }\n    }\n    P.col = 0;\n    Object.assign(P, { phase: \"type\", timer: 0, strike: null, bell: 0, dip: 0, key: null, extra: 0, wordRand: 0 });\n    P.carX = PX - MARGIN;\n    P.scroll = TOP + P.row * P.ls + 4 - BASE;\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30);\n  }\n  P.ls = ls;\n  step(P, dt);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  if (!P.machine) buildMachine(P);\n  const F = P.frame;\n  F.set(P.machine);\n  // Paper and ink for the Paper knob, between its four sets.\n  const u = P.paper * 3;\n  const i0 = Math.min(2, Math.floor(u));\n  const [paper, ink, red] = [0, 1, 2].map((j) => mix(SETS[i0][j], SETS[i0 + 1][j], u - i0));\n  const cx = Math.round(P.carX);\n  const sc = Math.round(P.scroll);\n  const wear = P.wear;\n  const fade = 1 - 0.5 * wear;\n  // The platen, rubber black, with a knob at either end, all riding with the paper.\n  for (let y = 75; y \u003c= PAPER_END; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - cx;\n      const p = (y * W + x) * 3;\n      const t = (y - 75) / 13;\n      const shade = 0.5 + 0.9 * Math.exp(-((t - 0.3) ** 2) / 0.03);\n      if (px >= -6 && px \u003c PW + 6) {\n        F[p] = 26 * shade;\n        F[p + 1] = 26 * shade;\n        F[p + 2] = 30 * shade;\n      } else if ((px >= -12 && px \u003c -6) || (px >= PW + 6 && px \u003c PW + 12)) {\n        const ridge = (px & 1) === 0 ? 1 : 0.7;\n        F[p] = 118 * shade * ridge;\n        F[p + 1] = 110 * shade * ridge;\n        F[p + 2] = 100 * shade * ridge;\n      }\n    }\n  // The carriage return lever, chrome, standing up from the left knob.\n  line(F, cx - 10, 74, cx - 18, 64, CHROME);\n  line(F, cx - 18, 64, cx - 24, 63, CHROME);\n  // The sheet.\n  const top = Math.max(0, -sc);\n  for (let y = top; y \u003c= PAPER_END; y++) {\n    const py = y + sc;\n    if (py >= PH) break;\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - cx;\n      if (px \u003c 0 || px >= PW) continue;\n      const p = (y * W + x) * 3;\n      // The sheet bends away round the platen in its last rows.\n      const l = P.lamp[y * W + x] * (y > 84 ? 1 - 0.09 * (y - 84) : 1);\n      let r = paper[0] * l;\n      let g = paper[1] * l;\n      let b = paper[2] * l;\n      const q = py * PW + px;\n      const s = P.ink[q];\n      if (s) {\n        const gr = P.grain[q] / 255;\n        const a = clamp((s / 255) * fade - wear * 0.35 * (1 - gr), 0, 1);\n        const c = P.inkRed[q] === 255 || P.inkRed[q] \u003c 255 * P.redShare ? red : ink;\n        r += (c[0] * l - r) * a;\n        g += (c[1] * l - g) * a;\n        b += (c[2] * l - b) * a;\n      }\n      F[p] = r;\n      F[p + 1] = g;\n      F[p + 2] = b;\n    }\n  }\n  // The ribbon, black over red, from spool to spool past the printing point,\n  // lifted over the line while a typebar strikes.\n  const st = P.strike;\n  const lift = st ? clamp(st.t \u003c 0.05 ? st.t / 0.05 : 1 - (st.t - 0.08) / 0.08, 0, 1) : 0;\n  const rib = [mix([16, 16, 18], [74, 72, 76], wear), mix([164, 24, 28], [124, 64, 62], wear)];\n  for (let x = 12; x \u003c 53; x++) {\n    const dx = Math.abs(x - 32);\n    const y = dx \u003c 6 ? 84 : 84 + Math.round((dx - 6) * 0.28);\n    for (let j = 0; j \u003c 2; j++) {\n      const p = ((y + j) * W + x) * 3;\n      const c = rib[j];\n      F[p] = c[0];\n      F[p + 1] = c[1];\n      F[p + 2] = c[2];\n    }\n  }\n  if (lift > 0.3) {\n    const y0 = 84 - Math.round(lift * 5);\n    for (let y = y0; y \u003c y0 + 5; y++)\n      for (let x = 29; x \u003c 36; x++) {\n        const p = (y * W + x) * 3;\n        const c = rib[st.red ? 1 : 0];\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n  }\n  // The card guide round the printing point.\n  for (let x = 25; x \u003c 40; x++) {\n    if (x === 31 || x === 33 || x === 32) continue;\n    const p = (86 * W + x) * 3;\n    F[p] = CHROME[0];\n    F[p + 1] = CHROME[1];\n    F[p + 2] = CHROME[2];\n  }\n  // Ribbon spools, their hubs turning a little at every stroke.\n  for (const [sx, dir] of [\n    [6, 1],\n    [58, -1],\n  ])\n    for (let y = 89; y \u003c 101; y++)\n      for (let x = sx - 6; x \u003c= sx + 6; x++) {\n        const r = Math.hypot(x - sx, y - 95);\n        if (r > 5.6 || x \u003c 0 || x >= W) continue;\n        const p = (y * W + x) * 3;\n        const a = Math.atan2(y - 95, x - sx) * dir + (P.line * COLS + P.col) * 0.15;\n        let c;\n        if (r \u003c 1.6) c = CHROME;\n        else if (r \u003c 3.2) c = Math.cos(a * 3) > 0.4 ? CHROME.map((v) => v * 0.8) : [20, 20, 22];\n        else c = y \u003c 95 ? rib[0].map((v) => v + 20) : rib[1];\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n  // The typebars, fanned in the basket; the one striking swings up to the paper.\n  for (let b = 0; b \u003c BARS; b++) {\n    const a = Math.PI * (0.1 + (0.8 * b) / (BARS - 1));\n    const ox = BX + 20 * Math.cos(a);\n    const oy = BY + 20 * Math.sin(a);\n    let tx = BX + 6 * Math.cos(a);\n    let ty = BY + 6 * Math.sin(a);\n    if (st && st.bar === b) {\n      const s = clamp(st.t \u003c 0.05 ? st.t / 0.05 : 1 - (st.t - 0.05) / 0.09, 0, 1);\n      tx += (32 - tx) * s;\n      ty += (82 - ty) * s;\n    }\n    line(F, ox, oy, tx, ty, st && st.bar === b ? [230, 232, 236] : [120, 124, 128]);\n  }\n  // The keys, the struck one pressed down.\n  for (const [r, i, kx, ky] of P.keys) drawKey(F, kx, ky, P.dip > 0.2 && P.key && P.key.r === r && P.key.i === i);\n  if (P.dip > 0.2 && P.key && P.key.r === 3) for (let x = 18; x \u003c 47; x++) for (let j = 126; j \u003c 128; j++) F[(j * W + x) * 3] *= 0.6;\n  // The bell, a brass dome under the right spool, flashing as it rings and\n  // throwing its flash on the enamel round it.\n  const bell = P.bell * P.bell;\n  for (let y = 99; y \u003c 110; y++)\n    for (let x = 51; x \u003c W; x++) {\n      const dx = x - 58;\n      const dy = y - 105;\n      const p = (y * W + x) * 3;\n      const dome = dy >= -1 && dy \u003c= 1 && Math.abs(dx) \u003c= (dy === -1 ? 1 : dy === 0 ? 2 : 3);\n      if (dome) {\n        const c = mix(dy === -1 ? [210, 170, 70] : [160, 116, 40], [255, 244, 190], bell);\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      } else if (bell > 0.01) {\n        const g = bell * Math.exp(-(dx * dx + dy * dy) / 8);\n        F[p] += (255 - F[p]) * g * 0.8;\n        F[p + 1] += (230 - F[p + 1]) * g * 0.8;\n        F[p + 2] += (140 - F[p + 2]) * g * 0.8;\n      }\n    }\n  for (let y = 0, p = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, F[p], F[p + 1], F[p + 2]);\n}\n","layer":{"id":"layer-typewriter","type":"code","name":"typewriter","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Typewriter\n// Family:  type\n// Idea:    A manual typewriter types two old poems letter by letter in a 3 by 5 pixel face, each typebar flicking up through the ribbon, while the sheet slides one letter left at every stroke, rings at the line's end and rides back with the carriage to feed up a line.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the portable typewriters of the 1950s, typing Emily Dickinson and Christina Rossetti\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Paper=0..1, Speed=0.2..3, Spacing=1..2, Ribbon=0..1\n//\n// Knob 1: Paper. The sheet and its ink: white bond with black at 0, then cream with brown, a canary carbon copy in blue and a pink copy in violet.\n// Knob 2: Speed. Strokes a second: at 2 a brisk four and a half, at 0.2 one every two seconds, at 3 nearly seven.\n// Knob 3: Spacing. The line feed, from single spacing at 1 (7 rows a line) to double at 2 (14 rows).\n// Knob 4: Ribbon. At 0 a fresh ribbon, black with the titles on its red half; turned up it wears to a faint grey that drops pixels, and the typist moves to the red half for more and more words.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// The sheet: 96 LEDs wide (16 letters of 4 LEDs between margins of 16) and\n// 320 long. The printing point is column 32; the line being typed has its\n// foot on row 83.\nconst PW = 96;\nconst PH = 320;\nconst MARGIN = 16;\nconst COLS = 16;\nconst PX = 31;\nconst BASE = 83;\nconst TOP = 18;\n// Where the paper goes under the card guide, and the machine below it.\nconst PAPER_END = 88;\n// The basket of 15 typebars, fanned below the printing point.\nconst BX = 32;\nconst BY = 88;\nconst BARS = 15;\n// The 3 by 5 face, rows top to bottom, one bit per column.\nconst GLYPHS = {\n  A: \"010101111101101\", B: \"110101110101110\", C: \"011100100100011\", D: \"110101101101110\",\n  E: \"111100110100111\", F: \"111100110100100\", G: \"011100101101011\", H: \"101101111101101\",\n  I: \"111010010010111\", J: \"001001001101010\", K: \"101101110101101\", L: \"100100100100111\",\n  M: \"101111111101101\", N: \"110101101101101\", O: \"010101101101010\", P: \"110101110100100\",\n  Q: \"010101101111011\", R: \"110101110101101\", S: \"011100010001110\", T: \"111010010010010\",\n  U: \"101101101101011\", V: \"101101101010010\", W: \"101101111111101\", X: \"101101010101101\",\n  Y: \"101101010010010\", Z: \"111001010100111\", \".\": \"000000000000010\", \",\": \"000000000010100\",\n  \"-\": \"000000111000000\", \"!\": \"010010010000010\", \"?\": \"110001010000010\", \"'\": \"010010000000000\",\n  \":\": \"000010000010000\", \";\": \"000010000010100\",\n};\n// Emily Dickinson's \"Hope\" is the thing with feathers (1891) and Christina\n// Rossetti's Who has seen the wind? (1872), and between them the line typists\n// learned on. Words in stars go on the ribbon's red half.\nconst POEMS = [\n  \"*HOPE*\",\n  \"\",\n  \"HOPE IS THE THING WITH FEATHERS -\",\n  \"THAT PERCHES IN THE SOUL -\",\n  \"AND SINGS THE TUNE WITHOUT THE WORDS -\",\n  \"AND NEVER STOPS - AT ALL -\",\n  \"\",\n  \"AND SWEETEST - IN THE GALE - IS HEARD -\",\n  \"AND SORE MUST BE THE STORM -\",\n  \"THAT COULD ABASH THE LITTLE BIRD\",\n  \"THAT KEPT SO MANY WARM -\",\n  \"\",\n  \"*E. DICKINSON*\",\n  \"\",\n  \"\",\n  \"NOW IS THE TIME FOR ALL GOOD MEN TO COME TO THE AID OF THE PARTY.\",\n  \"\",\n  \"\",\n  \"*WHO HAS SEEN THE WIND?*\",\n  \"\",\n  \"WHO HAS SEEN THE WIND?\",\n  \"NEITHER I NOR YOU:\",\n  \"BUT WHEN THE LEAVES HANG TREMBLING,\",\n  \"THE WIND IS PASSING THROUGH.\",\n  \"\",\n  \"WHO HAS SEEN THE WIND?\",\n  \"NEITHER YOU NOR I:\",\n  \"BUT WHEN THE TREES BOW DOWN THEIR HEADS,\",\n  \"THE WIND IS PASSING BY.\",\n  \"\",\n  \"*C. ROSSETTI*\",\n  \"\",\n  \"\",\n];\n// Paper and ink sets for the Paper knob: paper, ink, red ink.\nconst SETS = [\n  [[236, 236, 228], [20, 20, 26], [196, 26, 30]],\n  [[238, 222, 184], [70, 38, 20], [184, 40, 26]],\n  [[246, 230, 120], [30, 44, 150], [190, 30, 40]],\n  [[244, 196, 204], [76, 30, 120], [176, 20, 46]],\n];\nconst ENAMEL = [92, 150, 132];\nconst CHROME = [178, 184, 188];\nconst KEYROWS = [\"QWERTYUIOP\", \"ASDFGHJKL\", \"ZXCVBNM,.\"];\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n\n// The poems broken at 16 letters; a broken line goes on indented by two. A\n// line with a starred word is typed in red throughout.\nfunction wrap() {\n  const out = [];\n  for (const line of POEMS) {\n    const red = line.includes(\"*\");\n    let row = [];\n    let len = 0;\n    for (const word of line.replace(/\\*/g, \"\").split(\" \")) {\n      if (!word) continue;\n      if (len && len + 1 + word.length > COLS) {\n        out.push(row);\n        row = [{ ch: \" \" }, { ch: \" \" }];\n        len = 2;\n      } else if (len) {\n        row.push({ ch: \" \" });\n        len++;\n      }\n      for (const ch of word) row.push({ ch, red });\n      len += word.length;\n    }\n    out.push(row);\n  }\n  return out;\n}\n\n// Key and typebar for each letter.\nfunction keyOf(ch) {\n  for (let r = 0; r \u003c 3; r++) {\n    const i = KEYROWS[r].indexOf(ch);\n    if (i >= 0) return { r, i, bar: clamp(Math.round(i * 1.45 + r * 0.6), 0, BARS - 1) };\n  }\n  return { r: 0, i: 9, bar: 14 };\n}\n\nfunction lamp(x, y) {\n  return 0.8 + 0.3 * Math.exp(-((x - 6) ** 2 + (y - 10) ** 2) / (2 * 40 * 40));\n}\n\nexport function setup(params) {\n  const P = params;\n  P.lines = wrap();\n  P.started = false;\n  P.ink = new Uint8Array(PW * PH);\n  P.inkRed = new Uint8Array(PW * PH);\n  P.grain = new Uint8Array(PW * PH);\n  for (let i = 0; i \u003c PW * PH; i++) P.grain[i] = Math.floor(Math.random() * 256);\n  P.frame = new Float32Array(N * 3);\n  P.machine = null;\n}\n\nfunction newSheet(P) {\n  P.ink.fill(0);\n  P.inkRed.fill(0);\n  P.row = 0;\n}\n\n// One letter struck at the current column: the strike strength varies from\n// letter to letter, and its pixels from one to the next.\nfunction stamp(P, cell, red) {\n  const g = GLYPHS[cell.ch];\n  if (!g) return;\n  const x0 = MARGIN + P.col * 4;\n  const y0 = TOP + P.row * P.ls;\n  const strike = 0.62 + 0.38 * Math.random();\n  const word = red ? 255 : P.wordRand;\n  for (let j = 0; j \u003c 5; j++)\n    for (let i = 0; i \u003c 3; i++) {\n      if (g[j * 3 + i] !== \"1\") continue;\n      const p = (y0 + j) * PW + x0 + i;\n      if (p \u003c 0 || p >= PW * PH) continue;\n      P.ink[p] = Math.round(255 * clamp(strike * (0.8 + 0.2 * Math.random()) + (j === 0 ? -0.06 : 0), 0, 1));\n      P.inkRed[p] = word;\n    }\n}\n\nfunction linesPerPage(P) {\n  return Math.floor((PH - TOP - 24) / P.ls);\n}\n\n// The carriage moves on one letter; five letters before the right margin\n// the bell rings.\nfunction advance(P) {\n  P.col++;\n  if (P.col === COLS - 5) P.bell = 1;\n}\n\n// The typist, as a little machine of its own: type the line, ring, return.\nfunction step(P, dt) {\n  P.timer -= dt;\n  if (P.strike) {\n    P.strike.t += dt;\n    // The letter lands when the typebar reaches the paper, and the carriage\n    // escapes one letter as the bar falls back.\n    if (P.strike.cell && P.strike.t >= 0.05) {\n      stamp(P, P.strike.cell, P.strike.red);\n      P.strike.cell = null;\n      advance(P);\n    }\n    if (P.strike.t > 0.16) P.strike = null;\n  }\n  P.bell = Math.max(0, P.bell - dt * 1.6);\n  P.dip = Math.max(0, P.dip - dt * 8);\n  // The carriage and the paper follow where the typist put them.\n  const want = PX - MARGIN - P.col * 4;\n  const rate = P.phase === \"type\" ? 120 : 220;\n  if (P.carX \u003c want) P.carX = Math.min(want, P.carX + rate * dt);\n  else if (P.carX > want) P.carX = Math.max(want, P.carX - rate * dt);\n  const scroll = TOP + P.row * P.ls + 4 - BASE + P.extra;\n  P.scroll += clamp(scroll - P.scroll, -90 * dt, 90 * dt);\n  if (P.timer > 0 || (P.strike && P.strike.cell)) return;\n  const line = P.lines[P.line % P.lines.length];\n  if (P.phase === \"type\") {\n    if (P.col >= line.length) {\n      P.phase = \"return\";\n      P.timer = 0.12 + 0.15 / P.speed;\n      return;\n    }\n    const cell = line[P.col];\n    P.dip = 1;\n    if (cell.ch === \" \") {\n      P.wordRand = Math.floor(Math.random() * 255);\n      P.key = { r: 3, i: 0 };\n      advance(P);\n    } else {\n      const k = keyOf(cell.ch);\n      P.key = k;\n      P.strike = { bar: k.bar, t: 0, red: cell.red || P.wordRand \u003c 255 * P.redShare, cell };\n    }\n    const pause = cell.ch === \" \" ? 0.08 : /[,.:;-]/.test(cell.ch) ? 0.12 : 0;\n    P.timer = (0.22 * (0.7 + 0.6 * Math.random())) / P.speed + pause;\n  } else if (P.phase === \"return\") {\n    // Carriage return: the paper rides back right and the platen feeds a line.\n    P.col = 0;\n    P.line++;\n    P.row++;\n    P.phase = \"type\";\n    P.timer = 0.25 + 0.2 / P.speed;\n    P.wordRand = Math.floor(Math.random() * 255);\n    if (P.row >= linesPerPage(P)) {\n      // The sheet is full: pulled out over the top, and a fresh one wound in.\n      P.phase = \"page\";\n      P.timer = 1.8;\n      P.extra = 150;\n    }\n  } else if (P.phase === \"page\") {\n    newSheet(P);\n    P.extra = 0;\n    P.scroll = TOP + 4 - BASE - 70;\n    P.phase = \"type\";\n    P.timer = 1;\n  }\n}\n\n// The still parts of the machine below the paper, drawn once.\nfunction buildMachine(P) {\n  const M = new Float32Array(N * 3);\n  const put = (x, y, c) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = (y * W + x) * 3;\n    M[p] = c[0];\n    M[p + 1] = c[1];\n    M[p + 2] = c[2];\n  };\n  // The desk lamp at the upper left, and the wall behind the machine, warm\n  // where the lamp falls on it.\n  P.lamp = new Float32Array(N);\n  for (let p = 0; p \u003c N; p++) P.lamp[p] = lamp(p % W, Math.floor(p / W));\n  for (let y = 0; y \u003c= PAPER_END; y++) for (let x = 0; x \u003c W; x++) put(x, y, [22, 17, 14].map((v) => v * P.lamp[y * W + x]));\n  for (let y = PAPER_END + 1; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      // The enamel body, lit from the lamp at the upper left, its front\n      // falling away into shade.\n      const l = lamp(x, y) * (1 - 0.35 * ((y - 90) / 38));\n      put(x, y, ENAMEL.map((v) => v * l));\n    }\n  // The carriage rail and the opening of the type basket.\n  for (let x = 0; x \u003c W; x++) put(x, PAPER_END + 1, CHROME.map((v) => v * lamp(x, 89)));\n  for (let y = PAPER_END + 2; y \u003c 110; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r = Math.hypot(x - BX, y - BY);\n      if (r \u003c 21.5 && y > BY) put(x, y, [14, 15, 16]);\n      if (r >= 21.5 && r \u003c 22.6 && y > BY) put(x, y, CHROME.map((v) => v * 0.8));\n    }\n  // Keys: three staggered rows of round caps with chrome rims, and a space bar.\n  P.keys = [];\n  for (let r = 0; r \u003c 3; r++)\n    for (let i = 0; i \u003c KEYROWS[r].length; i++) {\n      const kx = 3 + r * 2 + i * 6;\n      const ky = 111 + r * 5;\n      P.keys.push([r, i, kx, ky]);\n    }\n  for (let x = 18; x \u003c 47; x++) {\n    put(x, 126, CHROME.map((v) => v * 0.85));\n    put(x, 127, [30, 30, 32]);\n  }\n  P.machine = M;\n}\n\nfunction drawKey(F, kx, ky, down) {\n  for (let j = 0; j \u003c 4; j++)\n    for (let i = 0; i \u003c 4; i++) {\n      if ((i === 0 || i === 3) && (j === 0 || j === 3)) continue;\n      const rim = i === 0 || i === 3 || j === 0 || j === 3;\n      const c = rim ? (down ? [110, 114, 118] : [196, 200, 204]) : down ? [8, 8, 9] : [26, 26, 28];\n      const y = ky + j + (down ? 1 : 0);\n      const p = (y * W + kx + i) * 3;\n      if (y \u003c H) {\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n    }\n}\n\nfunction line(F, x0, y0, x1, y1, c) {\n  const n = Math.ceil(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0))) + 1;\n  for (let s = 0; s \u003c= n; s++) {\n    const x = Math.round(x0 + ((x1 - x0) * s) / n);\n    const y = Math.round(y0 + ((y1 - y0) * s) / n);\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) continue;\n    const p = (y * W + x) * 3;\n    F[p] = c[0];\n    F[p + 1] = c[1];\n    F[p + 2] = c[2];\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.paper = clamp(k[0], 0, 1);\n  P.speed = clamp(k[1], 0.05, 3) / 2;\n  P.wear = clamp(k[3], 0, 1);\n  P.redShare = 0.45 * P.wear * P.wear;\n  const ls = Math.round(7 * clamp(k[2], 1, 2));\n  if (!P.started) {\n    P.started = true;\n    P.ls = ls;\n    newSheet(P);\n    // The page is half typed when the panel opens: the first lines are already\n    // on it, and the typist has been at the next for three seconds.\n    const half = Math.floor(linesPerPage(P) / 2);\n    P.line = 0;\n    for (; P.row \u003c half; P.row++, P.line++) {\n      const row = P.lines[P.line % P.lines.length];\n      for (P.col = 0; P.col \u003c row.length; P.col++) {\n        if (row[P.col].ch === \" \" || !P.col) P.wordRand = Math.floor(Math.random() * 255);\n        stamp(P, row[P.col], row[P.col].red);\n      }\n    }\n    P.col = 0;\n    Object.assign(P, { phase: \"type\", timer: 0, strike: null, bell: 0, dip: 0, key: null, extra: 0, wordRand: 0 });\n    P.carX = PX - MARGIN;\n    P.scroll = TOP + P.row * P.ls + 4 - BASE;\n    for (let i = 0; i \u003c 90; i++) step(P, 1 / 30);\n  }\n  P.ls = ls;\n  step(P, dt);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  if (!P.machine) buildMachine(P);\n  const F = P.frame;\n  F.set(P.machine);\n  // Paper and ink for the Paper knob, between its four sets.\n  const u = P.paper * 3;\n  const i0 = Math.min(2, Math.floor(u));\n  const [paper, ink, red] = [0, 1, 2].map((j) => mix(SETS[i0][j], SETS[i0 + 1][j], u - i0));\n  const cx = Math.round(P.carX);\n  const sc = Math.round(P.scroll);\n  const wear = P.wear;\n  const fade = 1 - 0.5 * wear;\n  // The platen, rubber black, with a knob at either end, all riding with the paper.\n  for (let y = 75; y \u003c= PAPER_END; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - cx;\n      const p = (y * W + x) * 3;\n      const t = (y - 75) / 13;\n      const shade = 0.5 + 0.9 * Math.exp(-((t - 0.3) ** 2) / 0.03);\n      if (px >= -6 && px \u003c PW + 6) {\n        F[p] = 26 * shade;\n        F[p + 1] = 26 * shade;\n        F[p + 2] = 30 * shade;\n      } else if ((px >= -12 && px \u003c -6) || (px >= PW + 6 && px \u003c PW + 12)) {\n        const ridge = (px & 1) === 0 ? 1 : 0.7;\n        F[p] = 118 * shade * ridge;\n        F[p + 1] = 110 * shade * ridge;\n        F[p + 2] = 100 * shade * ridge;\n      }\n    }\n  // The carriage return lever, chrome, standing up from the left knob.\n  line(F, cx - 10, 74, cx - 18, 64, CHROME);\n  line(F, cx - 18, 64, cx - 24, 63, CHROME);\n  // The sheet.\n  const top = Math.max(0, -sc);\n  for (let y = top; y \u003c= PAPER_END; y++) {\n    const py = y + sc;\n    if (py >= PH) break;\n    for (let x = 0; x \u003c W; x++) {\n      const px = x - cx;\n      if (px \u003c 0 || px >= PW) continue;\n      const p = (y * W + x) * 3;\n      // The sheet bends away round the platen in its last rows.\n      const l = P.lamp[y * W + x] * (y > 84 ? 1 - 0.09 * (y - 84) : 1);\n      let r = paper[0] * l;\n      let g = paper[1] * l;\n      let b = paper[2] * l;\n      const q = py * PW + px;\n      const s = P.ink[q];\n      if (s) {\n        const gr = P.grain[q] / 255;\n        const a = clamp((s / 255) * fade - wear * 0.35 * (1 - gr), 0, 1);\n        const c = P.inkRed[q] === 255 || P.inkRed[q] \u003c 255 * P.redShare ? red : ink;\n        r += (c[0] * l - r) * a;\n        g += (c[1] * l - g) * a;\n        b += (c[2] * l - b) * a;\n      }\n      F[p] = r;\n      F[p + 1] = g;\n      F[p + 2] = b;\n    }\n  }\n  // The ribbon, black over red, from spool to spool past the printing point,\n  // lifted over the line while a typebar strikes.\n  const st = P.strike;\n  const lift = st ? clamp(st.t \u003c 0.05 ? st.t / 0.05 : 1 - (st.t - 0.08) / 0.08, 0, 1) : 0;\n  const rib = [mix([16, 16, 18], [74, 72, 76], wear), mix([164, 24, 28], [124, 64, 62], wear)];\n  for (let x = 12; x \u003c 53; x++) {\n    const dx = Math.abs(x - 32);\n    const y = dx \u003c 6 ? 84 : 84 + Math.round((dx - 6) * 0.28);\n    for (let j = 0; j \u003c 2; j++) {\n      const p = ((y + j) * W + x) * 3;\n      const c = rib[j];\n      F[p] = c[0];\n      F[p + 1] = c[1];\n      F[p + 2] = c[2];\n    }\n  }\n  if (lift > 0.3) {\n    const y0 = 84 - Math.round(lift * 5);\n    for (let y = y0; y \u003c y0 + 5; y++)\n      for (let x = 29; x \u003c 36; x++) {\n        const p = (y * W + x) * 3;\n        const c = rib[st.red ? 1 : 0];\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n  }\n  // The card guide round the printing point.\n  for (let x = 25; x \u003c 40; x++) {\n    if (x === 31 || x === 33 || x === 32) continue;\n    const p = (86 * W + x) * 3;\n    F[p] = CHROME[0];\n    F[p + 1] = CHROME[1];\n    F[p + 2] = CHROME[2];\n  }\n  // Ribbon spools, their hubs turning a little at every stroke.\n  for (const [sx, dir] of [\n    [6, 1],\n    [58, -1],\n  ])\n    for (let y = 89; y \u003c 101; y++)\n      for (let x = sx - 6; x \u003c= sx + 6; x++) {\n        const r = Math.hypot(x - sx, y - 95);\n        if (r > 5.6 || x \u003c 0 || x >= W) continue;\n        const p = (y * W + x) * 3;\n        const a = Math.atan2(y - 95, x - sx) * dir + (P.line * COLS + P.col) * 0.15;\n        let c;\n        if (r \u003c 1.6) c = CHROME;\n        else if (r \u003c 3.2) c = Math.cos(a * 3) > 0.4 ? CHROME.map((v) => v * 0.8) : [20, 20, 22];\n        else c = y \u003c 95 ? rib[0].map((v) => v + 20) : rib[1];\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      }\n  // The typebars, fanned in the basket; the one striking swings up to the paper.\n  for (let b = 0; b \u003c BARS; b++) {\n    const a = Math.PI * (0.1 + (0.8 * b) / (BARS - 1));\n    const ox = BX + 20 * Math.cos(a);\n    const oy = BY + 20 * Math.sin(a);\n    let tx = BX + 6 * Math.cos(a);\n    let ty = BY + 6 * Math.sin(a);\n    if (st && st.bar === b) {\n      const s = clamp(st.t \u003c 0.05 ? st.t / 0.05 : 1 - (st.t - 0.05) / 0.09, 0, 1);\n      tx += (32 - tx) * s;\n      ty += (82 - ty) * s;\n    }\n    line(F, ox, oy, tx, ty, st && st.bar === b ? [230, 232, 236] : [120, 124, 128]);\n  }\n  // The keys, the struck one pressed down.\n  for (const [r, i, kx, ky] of P.keys) drawKey(F, kx, ky, P.dip > 0.2 && P.key && P.key.r === r && P.key.i === i);\n  if (P.dip > 0.2 && P.key && P.key.r === 3) for (let x = 18; x \u003c 47; x++) for (let j = 126; j \u003c 128; j++) F[(j * W + x) * 3] *= 0.6;\n  // The bell, a brass dome under the right spool, flashing as it rings and\n  // throwing its flash on the enamel round it.\n  const bell = P.bell * P.bell;\n  for (let y = 99; y \u003c 110; y++)\n    for (let x = 51; x \u003c W; x++) {\n      const dx = x - 58;\n      const dy = y - 105;\n      const p = (y * W + x) * 3;\n      const dome = dy >= -1 && dy \u003c= 1 && Math.abs(dx) \u003c= (dy === -1 ? 1 : dy === 0 ? 2 : 3);\n      if (dome) {\n        const c = mix(dy === -1 ? [210, 170, 70] : [160, 116, 40], [255, 244, 190], bell);\n        F[p] = c[0];\n        F[p + 1] = c[1];\n        F[p + 2] = c[2];\n      } else if (bell > 0.01) {\n        const g = bell * Math.exp(-(dx * dx + dy * dy) / 8);\n        F[p] += (255 - F[p]) * g * 0.8;\n        F[p + 1] += (230 - F[p + 1]) * g * 0.8;\n        F[p + 2] += (140 - F[p + 2]) * g * 0.8;\n      }\n    }\n  for (let y = 0, p = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, p += 3) display.setPixel(x, y, F[p], F[p + 1], F[p + 2]);\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Paper=0..1, Speed=0.2..3, Spacing=1..2, Ribbon=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Paper","min":0,"max":1,"about":"The sheet and its ink: white bond with black at 0, then cream with brown, a canary carbon copy in blue and a pink copy in violet."},{"name":"Speed","min":0.2,"max":3,"about":"Strokes a second: at 2 a brisk four and a half, at 0.2 one every two seconds, at 3 nearly seven."},{"name":"Spacing","min":1,"max":2,"about":"The line feed, from single spacing at 1 (7 rows a line) to double at 2 (14 rows)."},{"name":"Ribbon","min":0,"max":1,"about":"At 0 a fresh ribbon, black with the titles on its red half; turned up it wears to a faint grey that drops pixels, and the typist moves to the red half for more and more words."}],"start":[0,2,1,0.06],"measures":{"motion":0.4854,"detail":0.1156,"edges":0.8353,"complexity":0.7724,"coverage":0.9016,"colour":0.0948,"drift":0.1684},"knobResponse":[0.084,0.1398,0.167,0.0481]},{"slug":"veiled-lady","title":"Veiled Lady","family":"fungi","round":20,"note":"동트기 전 열대 숲 바닥을 손전등으로 비춘 망태버섯 타임랩스예요. 낙엽 속 흰 알이 터져 대가 패널 높이만큼 솟고, 올리브색 갓 밑에서 흰 레이스 망사가 낙엽 가까이까지 내려와요. 파리가 꼬였던 버섯이 시들어 쓰러지면 옆에서 다음 알이 부풀고, K1 을 돌리면 손전등이 UV 로 바뀌어 망사가 청록으로 빛나요.","idea":"A torch-lit time-lapse of a bridal veil stinkhorn on a tropical forest floor before dawn: an egg in the leaf litter splits, a white stalk shoots up under an olive spore cap, a lace veil drops from the cap almost to the leaves, flies come, and it slumps as the next egg swells.","buttons":"K1 tap starts a new egg now.","code":"// ===== Patternflow pattern =====\n// Title:   Veiled Lady\n// Family:  fungi\n// Idea:    A torch-lit time-lapse of a bridal veil stinkhorn on a tropical forest floor before dawn: an egg in the leaf litter splits, a white stalk shoots up under an olive spore cap, a lace veil drops from the cap almost to the leaves, flies come, and it slumps as the next egg swells.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after time-lapse films of Phallus indusiatus, the bridal veil stinkhorn\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Torch=0..1, Speed=0.2..3, Veil=0..1, Rain=0..1\n//\n// Knob 1: Torch. A warm incandescent bulb at 0, then a cold white LED, a blue gel, and at 1 a UV torch under which the veil glows cyan and the leaves dark red.\n// Knob 2: Speed. The time-lapse rate: at 2 one stinkhorn lives about 30 s and a new egg starts every 22 s; 0.2 is ten times slower.\n// Knob 3: Veil. At 0 an open net, holes 3 to 4 LEDs across, that stops a hand above the litter; turned up, finer, to holes of 2, longer and wider, its hem on the leaves.\n// Knob 4: Rain. Near 0 a light mist and a drip now and then; turned up, drops streak through the beam, splash on the litter and bead on the knots of the net.\n// Buttons: K1 tap starts a new egg now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, sin, cos, sqrt, floor, round, ceil, exp, asin, PI } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(x, y) {\n  let h = Math.imul(x | 0, 374761393) + Math.imul(y | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nconst f32 = (n) => new Float32Array(n);\nconst tab = (n, f) => Float32Array.from({ length: n }, (_, i) => f(i));\nconst ST = tab(1024, (i) => sin((i * PI) / 512));\nconst fsin = (x) => ST[((x * 162.97) | 0) & 1023];\nconst AS = tab(1025, (i) => asin(i / 512 - 1));\nconst CAPF = tab(257, (i) => (1 - (i / 256) ** 2.6) ** 0.45 * (1 - (0.2 * i) / 256));\nconst JT = tab(512, (i) => hash(i, 31));\nconst CW = new Float64Array(2);\n\n// One life in time-lapse seconds at Speed 2. The first opens with its veil on the way down.\nconst [SPLIT, RISE0, RISE1, VEIL0, VEIL1, FLIES, EAT1, WILT, SLUMP0, SLUMP1, GONE, NEXT, OPEN] = [2.6, 3.2, 9.6, 8.3, 13.5, 13, 26, 24, 25.5, 31.5, 38, 22, 8.8];\nconst TORCH = [[1, 0.9, 0.75], [0.86, 0.92, 1], [0.45, 0.58, 1], [0.55, 0.25, 1]];\nconst AMB = 0.05;\n// Materials: albedo, then glow under UV.\nconst GLEBA = [0.31, 0.28, 0.09, 0.03, 0.05, 0.01];\nconst RIDGE = [0.44, 0.4, 0.15, 0.04, 0.07, 0.02];\nconst GLOSS = [0.95, 0.95, 0.85, 0.05, 0.08, 0.02];\nconst WHITE = [0.91, 0.89, 0.81, 0.3, 0.4, 0.6];\nconst PIT = [0.23, 0.2, 0.11, 0.02, 0.03, 0.02];\nconst EGG = [0.95, 0.86, 0.9, 0.32, 0.4, 0.62];\nconst CUP = [0.86, 0.77, 0.78, 0.28, 0.34, 0.5];\nconst FLY = [[0.2, 0.62, 0.42, 0.05, 0.1, 0.05], [0.3, 0.06, 0.05, 0, 0, 0], [0.75, 0.78, 0.8, 0.1, 0.1, 0.2]];\n\nconst lightAt = (P, x, y) => AMB + P.PX[x] * P.PY[y];\n\nfunction put(P, p, l, m, k) {\n  const { tc: T, buf: b } = P;\n  const u = P.uv * l;\n  for (let c = 0, o = p * 3; c \u003c 3; c++, o++) b[o] += ((m[c] * T[c] * l + m[c + 3] * u) * 255 - b[o]) * k;\n}\n\n// The forest, painted once.\nfunction paint(P) {\n  const [A, F, E, D] = [f32(N * 3), f32(N * 3), f32(N * 3), f32(N)];\n  Object.assign(P, { alb: A, flu: F, emi: E, dep: D });\n  const front = new Uint8Array(N);\n  const lit = (P.lit = new Int16Array(W));\n  const set = (x, y, d, r, g, b, fr = 0, fg = 0, fb = 0) => {\n    [x, y] = [floor(x), floor(y)];\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return -1;\n    const p = y * W + x;\n    A.set([r, g, b], p * 3);\n    F.set([fr, fg, fb], p * 3);\n    E.fill(0, p * 3, p * 3 + 3);\n    D[p] = d;\n    return p;\n  };\n  const near = (y) => 1.2 + (0.5 * (y - 104)) / 23;\n  for (let p = 0; p \u003c N; p++) {\n    const y = (p / W) | 0;\n    const [k, f] = [y / 30, 1 - ease(24, 32, y)];\n    set(p % W, y, 0.12, 0.03, 0.05, 0.04);\n    E.set([(8 + 7 * k) * f, (13 + 12 * k) * f, (34 + 22 * k) * f], p * 3);\n  }\n  for (let i = 0; i \u003c 46; i++) {\n    const [cx, cy, rx, ry] = [rnd() * 70 - 3, -4 + rnd() * 36, 3 + rnd() * 5, 2 + rnd() * 3.5];\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++)\n        if (((x + 0.5 - cx) / rx) ** 2 + ((y + 0.5 - cy) / ry) ** 2 \u003c 1 - 0.35 * hash(x, y + 300)) set(x, y, 0.3, 0.04, 0.1, 0.05, 0.18, 0, 0.02);\n  }\n  // Trunks, fissured, with lichen; the near left one on buttress roots.\n  for (const [x0, w, lean, d, fin] of [[23, 2, 0.01, 0.22, 0], [43, 3, -0.01, 0.26, 0], [56, 5, 0.03, 0.55, 4], [7, 8, -0.02, 0.62, 9]])\n    for (let y = 0; y \u003c 112; y++) {\n      const cx = x0 + lean * (y - 64);\n      const hw = w / 2 + fin * max(0, (y - 82) / 26) ** 2;\n      for (let x = floor(cx - hw); x \u003c= cx + hw; x++) {\n        const q = (x + 0.5 - cx) / hw;\n        if (abs(q) > 1) continue;\n        const sh = 0.3 + 0.7 * sqrt(1 - q * q) - 0.2 * q;\n        const k = sh * (sin((x - cx) * 2.3 + 1.6 * sin(y * 0.13 + x0)) > 0.55 ? 0.5 : 1);\n        if (hash(floor(x / 3) + x0, floor(y / 4)) > 0.87) set(x, y, d, 0.5 * sh, 0.56 * sh, 0.45 * sh, 0.4, 0.55, 0.12);\n        else set(x, y, d, 0.36 * k, 0.32 * k, 0.27 * k);\n      }\n    }\n  // Heart-shaped leaves of the understory.\n  for (const [bx, by, len, ang, d] of [[-2, 100, 24, -1, 0.85], [-3, 74, 17, -0.45, 0.6], [66, 103, 21, -2.25, 0.75]]) {\n    const [ca, sa] = [cos(ang), sin(ang)];\n    for (let y = floor(by - len); y \u003c= by + len; y++)\n      for (let x = floor(bx - len); x \u003c= bx + len; x++) {\n        const [dx, dy] = [x + 0.5 - bx, y + 0.5 - by];\n        const u = dx * ca + dy * sa;\n        const v = abs(-dx * sa + dy * ca);\n        const half = len * 0.5 * sin(PI * (u / len) ** 0.7) * (1 - (0.2 * u) / len);\n        if (u \u003c 0 || u > len || v > half) continue;\n        const k = (v \u003c 0.6 ? 1.7 : abs(((u * 0.6 - v * 0.8) % 3.2) - 1.6) \u003c 0.45 ? 1.3 : 1) * (v > 0.2 * half && v \u003c 0.6 * half ? 1.25 : 0.95);\n        set(x, y, d, 0.07 * k, 0.3 * k, 0.08 * k, 0.5, 0.01, 0.05);\n      }\n  }\n  // Leaf litter, nearer leaves over farther, then twigs.\n  const [s1, s2] = [rnd() * 6, rnd() * 6];\n  for (let x = 0; x \u003c W; x++) {\n    lit[x] = round(105 + 1.6 * sin(x * 0.19 + s1) + 1.1 * sin(x * 0.47 + s2));\n    for (let y = lit[x]; y \u003c H; y++) set(x, y, near(y), 0.1, 0.07, 0.05, 0.05, 0.04, 0.01);\n  }\n  const PAL = [[0.55, 0.33, 0.14], [0.68, 0.5, 0.25], [0.4, 0.22, 0.1], [0.75, 0.6, 0.36], [0.3, 0.17, 0.08], [0.6, 0.28, 0.12], [0.5, 0.45, 0.32]];\n  const leaves = [];\n  for (let i = 0; i \u003c 300; i++) leaves.push([rnd() * 70 - 3, 102 + rnd() * 27, 2.5 + rnd() * 4.5, 1 + rnd() * 1.8, (rnd() - 0.5) * 1.5, floor(rnd() * 7), 0.7 + 0.5 * rnd()]);\n  for (const [cx, cy, len, wid, ang, ci, sh] of leaves.sort((a, b) => a[1] - b[1])) {\n    const [ca, sa, c] = [cos(ang), sin(ang), PAL[ci]];\n    for (let y = floor(cy - len); y \u003c= cy + len; y++)\n      for (let x = floor(cx - len); x \u003c= cx + len; x++) {\n        if (x \u003c 0 || x >= W || y >= H || y \u003c lit[x] - 1) continue;\n        const [dx, dy] = [x + 0.5 - cx, y + 0.5 - cy];\n        const u = (dx * ca + dy * sa) / len;\n        const v = (-dx * sa + dy * ca) / wid;\n        const q = u * u + v * v;\n        const k = sh * (abs(v) \u003c 0.3 ? 0.78 : 1) * (q > 0.7 ? 0.82 : 1) * (0.9 + 0.2 * hash(x, y));\n        if (q \u003c= 1) front[set(x, y, near(y), c[0] * k, c[1] * k, c[2] * k, 0.06, 0.05, 0.01)] = cy > 115 ? 1 : 0;\n      }\n  }\n  for (let i = 0; i \u003c 8; i++) {\n    const [x0, y0, len, ang, tk] = [rnd() * 64, 106 + rnd() * 20, 8 + rnd() * 22, (rnd() - 0.5) * 0.8, i \u003c 2 ? 1 : 0];\n    for (let t = 0; t \u003c len; t += 0.5) {\n      const x = x0 + cos(ang) * t;\n      const y = y0 + sin(ang) * t + 0.8 * sin(t * 0.3 + i);\n      if (x \u003c 0 || x >= W || y \u003c lit[floor(x)] - 1) continue;\n      front[set(x, y, near(y), 0.2, 0.13, 0.08)] = front[set(x, y - 1, near(y), 0.36 + 0.14 * tk, 0.27 + 0.13 * tk, 0.18 + 0.12 * tk)] = y0 > 115 ? 1 : 0;\n    }\n  }\n  P.fronts = Int32Array.from(front.reduce((a, f, p) => (f && a.push(p), a), []));\n  P.fsave = new Float32Array(P.fronts.length * 3);\n}\n\nfunction spawnBody(P, age, first) {\n  let [bx, best] = [33, -1];\n  for (let i = 0; i \u003c 24 && !first; i++) {\n    const x = 15 + rnd() * 34;\n    let d = 18;\n    for (const b of P.bodies) if (b.age \u003c SLUMP1) d = min(d, abs(b.bx - x));\n    if ((d += rnd() * 4) > best) [best, bx] = [d, x];\n  }\n  const sc = first ? 1 : 0.86 + rnd() * 0.14;\n  const dir = (bx \u003c 32 ? -1 : 1) * (rnd() \u003c 0.25 ? -1 : 1);\n  P.bodies.push({ bx, by: 109 + (3 * (sc - 0.86)) / 0.14, sc, H: 78 * sc, dir, age, seed: floor(rnd() * 1000), lean: (rnd() - 0.5) * 0.1, flies: [], maxF: 4 + floor(rnd() * 4) });\n}\n\nexport function setup(params) {\n  const P = params;\n  paint(P);\n  const f = f32;\n  Object.assign(P, { buf: f(N * 3), PX: f(W), PY: f(H), tc: f(3), dB: f(N).fill(99), sB: f(N), hB: f(N), tch: new Int32Array(N) });\n  P.G = { cx: f(300), cy: f(300), a: f(300), r: f(300), n: 0, Ls: 0 };\n  Object.assign(P, { bodies: [], drops: [], splash: [], t: 0, rate: 1, torch: 0, veil: 0, rain: 0.06, rAcc: 0, tx: 33 });\n  spawnBody(P, OPEN, true);\n}\n\n// The stalk's centre line: it rises, then crumples and slumps onto the litter.\nfunction geom(P, b) {\n  const { G } = P;\n  const grow = 1 - (1 - clamp((b.age - RISE0) / (RISE1 - RISE0), 0, 1)) ** 2.2;\n  const slump = ease(SLUMP0, SLUMP1, b.age);\n  const Ls = (b.H * grow + 1.5) * (1 - 0.72 * slump ** 0.7);\n  const bend = b.lean + b.dir * 1.9 * slump ** 0.8;\n  const n = min(299, max(2, ceil(Ls / 0.9)));\n  let [x, y] = [b.bx, b.by - 2];\n  for (let i = 0; i \u003c= n; i++) {\n    const a = bend * (i / n) ** 1.2;\n    const r = b.sc * (4.3 - (0.9 * i) / n + 0.35 * sin((PI * i) / n));\n    G.cx[i] = x;\n    G.cy[i] = y;\n    G.a[i] = a;\n    G.r[i] = r;\n    x += (sin(a) * Ls) / n;\n    y = min(y - (cos(a) * Ls) / n, P.lit[clamp(round(x), 0, W - 1)] + 2 - 0.5 * r);\n  }\n  [G.n, G.Ls] = [n, Ls];\n}\n\n// The egg; once split, the torn cup round the foot of the stalk.\nfunction egg(P, b, fade) {\n  const cup = b.age >= SPLIT;\n  const sw = cup ? 1 : mix(0.45, 1, 1 - (1 - clamp(b.age / (SPLIT * 0.9), 0, 1)) ** 2);\n  const [ew, eh, ex, ey] = [(cup ? 6.6 : 6.2) * b.sc * sw, 6.8 * b.sc * sw, b.bx, b.by - 1 - 4.5 * sw];\n  const crack = cup ? 0 : ease(SPLIT - 0.9, SPLIT, b.age);\n  for (let y = max(0, floor(ey - eh)); y \u003c= min(H - 1, ey + eh); y++)\n    for (let x = max(0, floor(ex - ew)); x \u003c= min(W - 1, ex + ew); x++) {\n      const nx = (x + 0.5 - ex) / ew;\n      const ny = (y + 0.5 - ey) / eh;\n      const rr = nx * nx + ny * ny;\n      const rim = cup ? -0.05 + 0.28 * abs(sin(nx * 4.2 + b.seed)) : -9;\n      if (rr > 1 || ny \u003c rim) continue;\n      const l = lightAt(P, x, y) * (0.16 + 0.82 * max(0, -0.38 * nx - 0.38 * ny + 0.84 * sqrt(1 - rr))) * (ny \u003c rim + 0.12 ? 1.2 : 1);\n      const torn = crack > 0 && ny \u003c -0.1 && abs(nx) \u003c crack * 0.85 && abs(ny + 0.55 + 0.13 * sin(nx * 9 + b.seed)) \u003c 0.06 + 0.12 * crack;\n      put(P, y * W + x, l, torn ? GLEBA : cup ? CUP : EGG, fade);\n    }\n}\n\n// Standing, the stalk fills row by row; slumped, it is stamped as discs.\nfunction stalk(P, b, fade, sleeve, slen, V) {\n  const { dB, sB, hB, tch, G } = P;\n  let nt = 0;\n  const mark = (p, d, s, h) => {\n    if (dB[p] > 9) tch[nt++] = p;\n    dB[p] = d;\n    sB[p] = s;\n    hB[p] = h;\n  };\n  if (abs(G.a[G.n]) \u003c 0.4)\n    for (let y = min(H - 1, floor(G.cy[0])), i = 0; y >= max(0, floor(G.cy[G.n])); y--) {\n      while (i \u003c G.n && G.cy[i + 1] > y + 0.5) i++;\n      const [cx, r] = [G.cx[i], G.r[i]];\n      for (let x = max(0, floor(cx - r + 0.5)); x \u003c= min(W - 1, floor(cx + r - 0.5)); x++) {\n        const t = ((x + 0.5 - cx) * cos(G.a[i])) / r;\n        mark(y * W + x, t * t, t, i / G.n);\n      }\n    }\n  else\n    for (let i = 0; i \u003c= G.n; i++) {\n      const [cx, cy, r, nx, ny] = [G.cx[i], G.cy[i], G.r[i], cos(G.a[i]), sin(G.a[i])];\n      for (let y = max(0, floor(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r + 0.5)); y++)\n        for (let x = max(0, floor(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r + 0.5)); x++) {\n          const dx = x + 0.5 - cx;\n          const dy = y + 0.5 - cy;\n          const d = (dx * dx + dy * dy) / (r * r);\n          const p = y * W + x;\n          if (d \u003c 1 && d \u003c dB[p]) mark(p, d, (dx * nx + dy * ny) / r, i / G.n);\n        }\n    }\n  const wc = ease(WILT, SLUMP1, b.age);\n  const crease = ease(SLUMP0, SLUMP1, b.age);\n  const m = [mix(0.95, 0.74, wc), mix(0.93, 0.66, wc), mix(0.87, 0.47, wc), 0.3, 0.42, 0.68];\n  for (let j = 0; j \u003c nt; j++) {\n    const p = tch[j];\n    const t = clamp(sB[p], -1, 1);\n    const hp = hB[p] * G.Ls;\n    const y = (p / W) | 0;\n    dB[p] = 99;\n    let sh = (0.2 + 0.8 * max(0, 0.92 * sqrt(1 - t * t) - 0.38 * t)) * (1 - 0.25 * wc);\n    const arc = asin(t) * 3.2 * b.sc;\n    const row = floor(hp / 1.4);\n    if (hash(row + b.seed, floor(arc / 1.3 + (row & 1) * 0.5) + 50) \u003c 0.24) sh *= 0.74;\n    if (hp % 3.2 \u003c 1) sh *= 1 - 0.4 * crease;\n    if (sleeve > 0 && hp > G.Ls - slen) sh *= 1 + sleeve * (fsin(arc * 1.4 + hp * 1.2) * fsin(arc * 1.4 - hp * 1.2) > 0.4 ? 0.22 : -0.18);\n    if (y > V.ay + 2 && y \u003c V.ay + V.L) sh *= 1 - 0.42 * V.alpha * V.open;\n    put(P, p, lightAt(P, p % W, y) * sh, m, fade);\n  }\n}\n\n// Worley ridges of the cap: F2 - F1; the cell's id and F1 go in CW.\nfunction cell(u, v, seed) {\n  let [f1, f2, id] = [9, 9, 0];\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      const cu = floor(u) + i;\n      const cv = floor(v) + j;\n      const j2 = (((cu + seed) & 15) * 16 + (cv & 15)) * 2;\n      const dx = u - (cu + 0.15 + 0.7 * JT[j2]);\n      const dy = v - (cv + 0.15 + 0.7 * JT[j2 + 1]);\n      const d = dx * dx + dy * dy;\n      if (d \u003c f1) {\n        f2 = f1;\n        f1 = d;\n        id = JT[j2];\n      } else if (d \u003c f2) f2 = d;\n    }\n  CW[0] = id;\n  CW[1] = f1;\n  return sqrt(f2) - sqrt(f1);\n}\n\nfunction cap(P, b, fade) {\n  const { G } = P;\n  const [ax, ay, a] = [G.cx[G.n], G.cy[G.n], G.a[G.n]];\n  const [ux, uy] = [sin(a), -cos(a)];\n  const cs = mix(0.55, 1, ease(SPLIT, RISE0 + 1.5, b.age));\n  const [ch, cw] = [15 * b.sc * cs, 7.6 * b.sc * cs];\n  const eat = ease(FLIES + 1.5, EAT1, b.age);\n  const wc = ease(WILT, SLUMP1, b.age);\n  const [ex, ey] = [abs(uy) * (cw + 1), abs(ux) * (cw + 1)];\n  const [xa, xb, ya, yb] = [ax - ux * 1.5, ax + ux * ch, ay - uy * 1.5, ay + uy * ch];\n  for (let y = max(0, floor(min(ya, yb) - ey)); y \u003c= min(H - 1, max(ya, yb) + ey); y++)\n    for (let x = max(0, floor(min(xa, xb) - ex)); x \u003c= min(W - 1, max(xa, xb) + ex); x++) {\n      const dx = x + 0.5 - ax;\n      const dy = y + 0.5 - ay;\n      const av = dx * ux + dy * uy;\n      const w = -dx * uy + dy * ux;\n      const t = max(0, av) / ch;\n      const hw = cw * CAPF[(min(1, t) * 256) | 0] + (av \u003c 0 ? 0.5 : 0);\n      if (av \u003c -1.5 || av > ch || abs(w) > hw) continue;\n      const q = w / hw;\n      const sh = (0.22 + 0.78 * max(0, 0.9 * sqrt(1 - q * q) - 0.4 * q)) * (0.85 + 0.15 * t) * (1 - 0.3 * wc);\n      const l = lightAt(P, x, y) * sh;\n      const p = y * W + x;\n      // A white collar at the top; where flies ate the slime, white ridges.\n      if (t > 0.9) put(P, p, l, abs(w) \u003c 0.9 && t > 0.96 ? PIT : WHITE, fade);\n      else {\n        const ridge = cell((AS[((q + 1) * 512) | 0] * cw) / 2.5, av / 2.3, b.seed) \u003c 0.24;\n        if (CW[0] \u003c eat) put(P, p, l, ridge ? WHITE : PIT, fade);\n        else if (!ridge && CW[1] \u003c 0.05 && sh > 0.7 && CW[0] > 0.55) put(P, p, l * 1.4, GLOSS, fade);\n        else put(P, p, l, ridge ? RIDGE : GLEBA, fade);\n      }\n    }\n  Object.assign(b, { capX: ax, capY: ay, ux, uy, ch, cw });\n}\n\n// The veil: a diamond net on a flared cone, its threads crowding at the sides.\nfunction veil(P, b, V, front) {\n  const { buf, tc, PX, PY, wet, uv } = P;\n  const { ax, ay, L, r0, rb, sway, wob, band, alpha, bright, col } = V;\n  const seed = b.seed;\n  const C = [0, 1, 2].map((c) => (col[c] * tc[c] + [0.45, 0.95, 1][c] * uv) * 255 * bright);\n  for (let y = max(0, ceil(ay)); y \u003c= min(H - 1, floor(ay + L * 1.06)); y++) {\n    const s = (y + 0.5 - ay) / L;\n    const sc = min(s, 1);\n    const R = r0 + (rb - r0) * sc ** 0.8;\n    const cx = ax + sway * sc * sc;\n    const cw = mix(V.cw0, V.cw1, sc) * V.kw;\n    const ch = cw * 1.15 * V.kh;\n    const [vv, icw, ich, py] = [(s * L) / ch, 1 / (cw * cw), 1 / (ch * ch), PY[y]];\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const sx = (x + 0.5 - cx) / R;\n      if (sx \u003c= -1 || sx >= 1) continue;\n      const c2 = max(0.0144, 1 - sx * sx);\n      const th = front ? AS[((sx + 1) * 512) | 0] : PI - AS[((sx + 1) * 512) | 0];\n      const hem = s > 0.94 ? 1 + 0.035 * fsin(th * 7 + seed) + 0.02 * fsin(th * 13) : 2;\n      if (s > hem) continue;\n      const u = (th * R) / cw;\n      const wb = wob * fsin(u * 2.1 + vv * 1.3 + seed);\n      const g1 = u + vv + wb;\n      const g2 = u - vv - 0.7 * wb;\n      const k = 1.4 / sqrt(icw / c2 + ich);\n      const d1 = abs(g1 - round(g1)) * k;\n      const d2 = abs(g2 - round(g2)) * k;\n      let i = (d1 \u003c 1 ? 1 - d1 : 0) + (d2 \u003c 1 ? 1 - d2 : 0);\n      if (s * L \u003c 2.2) i = max(i, 0.8);\n      if (s > hem - band / L) i = max(i, 0.7);\n      if (i \u003c 0.04) continue;\n      const l = (AMB + PX[x] * py) * (front ? 0.3 + 0.7 * max(0, 0.94 * sqrt(c2) - 0.34 * sx) : 0.18 + 0.18 * sqrt(c2));\n      const a = min(1, i) * alpha;\n      for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++, o++) buf[o] += (C[c] * l - buf[o]) * a;\n      if (front && d1 \u003c 0.7 && d2 \u003c 0.7 && hash(round(g1) + seed, round(g2) + 99) \u003c wet) put(P, y * W + x, l * 1.8, WHITE, alpha);\n    }\n  }\n}\n\nfunction drawBody(P, b) {\n  const age = b.age;\n  if (age \u003c SPLIT) return egg(P, b, 1);\n  geom(P, b);\n  const { G, veil: vk } = P;\n  const fade = 1 - ease(SLUMP1, GONE, age);\n  const f = clamp((age - VEIL0) / (VEIL1 - VEIL0), 0, 1);\n  const fu = ease(0, 1, f);\n  const c = ease(WILT, WILT + 3.5, age);\n  const [ax, ay, r0] = [G.cx[G.n], G.cy[G.n] + 1, G.r[G.n] + 1.4];\n  const Lf = max(0, min(b.by - 13 * b.sc + 10 * vk, P.lit[clamp(round(ax), 0, W - 1)] + 2) - ay);\n  const V = { ax, ay, r0, L: max(0.5, Lf * fu * (1 - 0.15 * c)), rb: mix((20 + 7 * vk) * b.sc * (0.35 + 0.65 * fu), r0 + 2.5, c), cw0: mix(6, 3.2, vk), cw1: mix(7.6, 4, vk) };\n  Object.assign(V, { kw: 0.75 + 0.25 * fu, kh: 0.55 + 0.45 * fu, band: (1 - fu) * 2.5 + 0.6, open: min(1, fu * 2), wob: 0.06 + 0.3 * c, bright: 1 - 0.4 * c });\n  V.sway = (3 * sin(age * 0.9 + b.seed) + 0.8 * sin(P.t * 0.7 + b.seed)) * (1 - c);\n  V.alpha = fade * (1 - ease(0.55, 1, c)) * (Lf > 1 ? 1 : 0);\n  V.col = [mix(0.98, 0.86, c), mix(0.97, 0.79, c), mix(0.93, 0.6, c)];\n  const show = f > 0 && V.alpha > 0.01;\n  if (show) veil(P, b, V, false);\n  stalk(P, b, fade, c, Lf * 0.8, V);\n  egg(P, b, fade);\n  if (show) veil(P, b, V, true);\n  cap(P, b, fade);\n  drawFlies(P, b);\n}\n\n// Flies land on the cap, crawl, hop, and leave when it wilts.\nfunction capPoint(b, q, a) {\n  const av = a * b.ch;\n  const w = q * b.cw * CAPF[(clamp(a, 0, 1) * 256) | 0];\n  return [b.capX + b.ux * av - b.uy * w, b.capY + b.uy * av + b.ux * w];\n}\n\nfunction updateFlies(b, dt) {\n  const want = round(b.maxF * ease(FLIES, FLIES + 3, b.age) * (1 - ease(WILT - 1, WILT + 2.5, b.age)));\n  const fl = b.flies;\n  const stay = fl.filter((f) => f.s \u003c 2);\n  const spot = () => ({ s: 0, q: (rnd() - 0.5) * 1.5, a: 0.15 + rnd() * 0.7 });\n  if (stay.length \u003c want && b.capX !== undefined && rnd() \u003c dt * 2) fl.push({ x: rnd() \u003c 0.5 ? -3 : W + 2, y: 15 + rnd() * 60, vx: 0, vy: 0, ...spot() });\n  if (stay.length > want) Object.assign(stay[0], { s: 2, tx: rnd() \u003c 0.5 ? -8 : W + 8, ty: rnd() * 50 });\n  for (let i = fl.length - 1; i >= 0; i--) {\n    const f = fl[i];\n    if (f.s === 1) {\n      f.q = clamp(f.q + (rnd() - 0.5) * dt * 1.2, -0.8, 0.8);\n      f.a = clamp(f.a + (rnd() - 0.5) * dt * 0.6, 0.1, 0.85);\n      if (rnd() \u003c dt * 0.3) Object.assign(f, spot());\n      continue;\n    }\n    const [tx, ty] = f.s === 0 ? capPoint(b, f.q, f.a) : [f.tx, f.ty];\n    f.vx += ((tx - f.x) * 5 - f.vx * 2.2 + (rnd() - 0.5) * 260) * dt;\n    f.vy += ((ty - f.y) * 5 - f.vy * 2.2 + (rnd() - 0.5) * 260) * dt;\n    f.x += f.vx * dt;\n    f.y += f.vy * dt;\n    if (f.s === 0 && abs(tx - f.x) + abs(ty - f.y) \u003c 1.5) f.s = 1;\n    if (f.s === 2 && abs(f.x - W / 2) > W / 2 + 6) fl.splice(i, 1);\n  }\n}\n\nfunction drawFlies(P, b) {\n  for (const f of b.flies) {\n    const [x, y] = (f.s === 1 ? capPoint(b, f.q, f.a) : [f.x, f.y]).map(round);\n    if (x \u003c 1 || x >= W - 2 || y \u003c 1 || y >= H) continue;\n    const [l, p] = [lightAt(P, x, y), y * W + x];\n    put(P, p, l, FLY[0], 1);\n    put(P, p + 1, l, FLY[1], 1);\n    if (f.s !== 1) for (const dx of [-1, 1]) put(P, p - W + dx + (floor(P.t * 30) & 1), l, FLY[2], 0.8);\n    else if (sin(P.t * 5 + f.q * 40) > 0.7) put(P, p, l * 1.6, GLOSS, 1);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  Object.assign(P, { torch: clamp(k[0], 0, 1), rate: clamp(k[1], 0.2, 3) / 2, veil: clamp(k[2], 0, 1), rain: clamp(k[3], 0, 1) });\n  P.t += dt;\n  for (const b of P.bodies) b.age += dt * P.rate;\n  P.bodies = P.bodies.filter((b) => b.age \u003c GONE);\n  if (min(...P.bodies.map((b) => b.age)) >= NEXT) spawnBody(P, 0, false);\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.bodies.length >= 3) P.bodies.sort((a, b) => b.age - a.age).shift();\n    spawnBody(P, 0, false);\n  }\n  // The beam follows whatever is coming up.\n  let [sw, sx] = [0, 0];\n  for (const b of P.bodies) {\n    const w = ease(SPLIT - 2, RISE1, b.age) * (1 - ease(SLUMP0, GONE, b.age)) + 0.02;\n    sw += w;\n    sx += w * b.bx;\n  }\n  P.tx += ((sx / sw || 33) - P.tx) * (1 - exp(-dt * 0.8));\n  for (const b of P.bodies) updateFlies(b, dt * clamp(P.rate, 0.12, 1.6));\n  P.rAcc += dt * (0.5 + 40 * P.rain ** 1.5);\n  for (; P.rAcc >= 1; P.rAcc--) if (P.drops.length \u003c 160) P.drops.push([rnd() * W, rnd() * 34 - 4, 75 + rnd() * 50]);\n  for (let i = P.drops.length - 1; i >= 0; i--) {\n    const d = P.drops[i];\n    const x = floor(d[0]);\n    d[1] += d[2] * dt * (0.7 + 0.3 * min(P.rate, 1.5));\n    if (d[1] \u003c P.lit[x] - 1) continue;\n    if (P.splash.length \u003c 40) P.splash.push([x, P.lit[x] - 1 + floor(rnd() * 3), 0.15]);\n    P.drops.splice(i, 1);\n  }\n  P.splash = P.splash.filter((s) => (s[2] -= dt) > 0);\n}\n\nfunction light(P) {\n  const f = P.torch * 3;\n  const i = min(2, floor(f));\n  P.uv = ease(0.72, 1, P.torch);\n  for (let c = 0; c \u003c 3; c++) P.tc[c] = mix(TORCH[i][c], TORCH[i + 1][c], f - i) * (1 - 0.7 * P.uv);\n  // A handheld beam sways.\n  const tx = P.tx + 2.5 * sin(P.t * 1.3) + 1.5 * sin(P.t * 2.9 + 1);\n  const ty = 66 + 3 * sin(P.t * 1.7 + 2);\n  for (let x = 0; x \u003c W; x++) P.PX[x] = exp(-(((x + 0.5 - tx) / 30) ** 2));\n  for (let y = 0; y \u003c H; y++) P.PY[y] = exp(-(((y + 0.5 - ty) / 62) ** 4));\n  P.haze = (5 + 38 * P.rain) * (1 - 0.4 * P.uv);\n  P.wet = 0.1 + 0.55 * P.rain;\n}\n\nfunction background(P) {\n  const { alb: A, flu: F, emi: E, dep: D, buf, tc, PX, PY, uv, haze, fronts, fsave } = P;\n  const [r, g, b] = tc;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const pool = PX[p % W] * PY[(p / W) | 0];\n    const l = D[p] * (AMB + pool) * 255;\n    const u = l * uv;\n    const h = haze * pool;\n    buf[o] = A[o] * r * l + E[o] + h * r + F[o] * u;\n    buf[o + 1] = A[o + 1] * g * l + E[o + 1] + h * g + F[o + 1] * u;\n    buf[o + 2] = A[o + 2] * b * l + E[o + 2] + h * b + F[o + 2] * u;\n  }\n  for (let i = 0; i \u003c fronts.length * 3; i++) fsave[i] = buf[fronts[(i / 3) | 0] * 3 + (i % 3)];\n}\n\nfunction drawRain(P) {\n  const { buf, tc, PX, PY } = P;\n  const glow = (x, y, v) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let c = 0; c \u003c 3; c++) buf[(y * W + x) * 3 + c] += v * (0.6 + 0.05 * c + 0.4 * tc[c]) * (1 - 0.6 * P.uv);\n  };\n  for (const [x0, y0] of P.drops) for (let j = 0, x = floor(x0); j \u003c 3; j++) glow(x, floor(y0) - j, (25 + 190 * PX[x] * PY[clamp(floor(y0) - j, 0, H - 1)]) * (1 - j * 0.3));\n  for (const [x, y, life] of P.splash) for (const [dx, dy] of [[-1, 0], [1, 0], [0, -1]]) glow(x + dx, y + dy, life * 900 * PX[x] * PY[min(H - 1, y)]);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { fronts, fsave, buf } = P;\n  light(P);\n  background(P);\n  for (const b of P.bodies.slice().sort((a, b) => a.by - b.by)) drawBody(P, b);\n  for (let i = 0; i \u003c fronts.length * 3; i++) buf[fronts[(i / 3) | 0] * 3 + (i % 3)] = fsave[i];\n  drawRain(P);\n  for (let y = 0, o = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","layer":{"id":"layer-veiled-lady","type":"code","name":"veiled-lady","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Veiled Lady\n// Family:  fungi\n// Idea:    A torch-lit time-lapse of a bridal veil stinkhorn on a tropical forest floor before dawn: an egg in the leaf litter splits, a white stalk shoots up under an olive spore cap, a lace veil drops from the cap almost to the leaves, flies come, and it slumps as the next egg swells.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 20, after time-lapse films of Phallus indusiatus, the bridal veil stinkhorn\n// Round:   20\n// ===============================\n// @matrix 64x128\n// @knobs Torch=0..1, Speed=0.2..3, Veil=0..1, Rain=0..1\n//\n// Knob 1: Torch. A warm incandescent bulb at 0, then a cold white LED, a blue gel, and at 1 a UV torch under which the veil glows cyan and the leaves dark red.\n// Knob 2: Speed. The time-lapse rate: at 2 one stinkhorn lives about 30 s and a new egg starts every 22 s; 0.2 is ten times slower.\n// Knob 3: Veil. At 0 an open net, holes 3 to 4 LEDs across, that stops a hand above the litter; turned up, finer, to holes of 2, longer and wider, its hem on the leaves.\n// Knob 4: Rain. Near 0 a light mist and a drip now and then; turned up, drops streak through the beam, splash on the litter and bead on the knots of the net.\n// Buttons: K1 tap starts a new egg now.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst { min, max, abs, sin, cos, sqrt, floor, round, ceil, exp, asin, PI } = Math;\nconst rnd = () => Math.random();\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst ease = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst mix = (a, b, t) => a + (b - a) * t;\nfunction hash(x, y) {\n  let h = Math.imul(x | 0, 374761393) + Math.imul(y | 0, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nconst f32 = (n) => new Float32Array(n);\nconst tab = (n, f) => Float32Array.from({ length: n }, (_, i) => f(i));\nconst ST = tab(1024, (i) => sin((i * PI) / 512));\nconst fsin = (x) => ST[((x * 162.97) | 0) & 1023];\nconst AS = tab(1025, (i) => asin(i / 512 - 1));\nconst CAPF = tab(257, (i) => (1 - (i / 256) ** 2.6) ** 0.45 * (1 - (0.2 * i) / 256));\nconst JT = tab(512, (i) => hash(i, 31));\nconst CW = new Float64Array(2);\n\n// One life in time-lapse seconds at Speed 2. The first opens with its veil on the way down.\nconst [SPLIT, RISE0, RISE1, VEIL0, VEIL1, FLIES, EAT1, WILT, SLUMP0, SLUMP1, GONE, NEXT, OPEN] = [2.6, 3.2, 9.6, 8.3, 13.5, 13, 26, 24, 25.5, 31.5, 38, 22, 8.8];\nconst TORCH = [[1, 0.9, 0.75], [0.86, 0.92, 1], [0.45, 0.58, 1], [0.55, 0.25, 1]];\nconst AMB = 0.05;\n// Materials: albedo, then glow under UV.\nconst GLEBA = [0.31, 0.28, 0.09, 0.03, 0.05, 0.01];\nconst RIDGE = [0.44, 0.4, 0.15, 0.04, 0.07, 0.02];\nconst GLOSS = [0.95, 0.95, 0.85, 0.05, 0.08, 0.02];\nconst WHITE = [0.91, 0.89, 0.81, 0.3, 0.4, 0.6];\nconst PIT = [0.23, 0.2, 0.11, 0.02, 0.03, 0.02];\nconst EGG = [0.95, 0.86, 0.9, 0.32, 0.4, 0.62];\nconst CUP = [0.86, 0.77, 0.78, 0.28, 0.34, 0.5];\nconst FLY = [[0.2, 0.62, 0.42, 0.05, 0.1, 0.05], [0.3, 0.06, 0.05, 0, 0, 0], [0.75, 0.78, 0.8, 0.1, 0.1, 0.2]];\n\nconst lightAt = (P, x, y) => AMB + P.PX[x] * P.PY[y];\n\nfunction put(P, p, l, m, k) {\n  const { tc: T, buf: b } = P;\n  const u = P.uv * l;\n  for (let c = 0, o = p * 3; c \u003c 3; c++, o++) b[o] += ((m[c] * T[c] * l + m[c + 3] * u) * 255 - b[o]) * k;\n}\n\n// The forest, painted once.\nfunction paint(P) {\n  const [A, F, E, D] = [f32(N * 3), f32(N * 3), f32(N * 3), f32(N)];\n  Object.assign(P, { alb: A, flu: F, emi: E, dep: D });\n  const front = new Uint8Array(N);\n  const lit = (P.lit = new Int16Array(W));\n  const set = (x, y, d, r, g, b, fr = 0, fg = 0, fb = 0) => {\n    [x, y] = [floor(x), floor(y)];\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return -1;\n    const p = y * W + x;\n    A.set([r, g, b], p * 3);\n    F.set([fr, fg, fb], p * 3);\n    E.fill(0, p * 3, p * 3 + 3);\n    D[p] = d;\n    return p;\n  };\n  const near = (y) => 1.2 + (0.5 * (y - 104)) / 23;\n  for (let p = 0; p \u003c N; p++) {\n    const y = (p / W) | 0;\n    const [k, f] = [y / 30, 1 - ease(24, 32, y)];\n    set(p % W, y, 0.12, 0.03, 0.05, 0.04);\n    E.set([(8 + 7 * k) * f, (13 + 12 * k) * f, (34 + 22 * k) * f], p * 3);\n  }\n  for (let i = 0; i \u003c 46; i++) {\n    const [cx, cy, rx, ry] = [rnd() * 70 - 3, -4 + rnd() * 36, 3 + rnd() * 5, 2 + rnd() * 3.5];\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++)\n        if (((x + 0.5 - cx) / rx) ** 2 + ((y + 0.5 - cy) / ry) ** 2 \u003c 1 - 0.35 * hash(x, y + 300)) set(x, y, 0.3, 0.04, 0.1, 0.05, 0.18, 0, 0.02);\n  }\n  // Trunks, fissured, with lichen; the near left one on buttress roots.\n  for (const [x0, w, lean, d, fin] of [[23, 2, 0.01, 0.22, 0], [43, 3, -0.01, 0.26, 0], [56, 5, 0.03, 0.55, 4], [7, 8, -0.02, 0.62, 9]])\n    for (let y = 0; y \u003c 112; y++) {\n      const cx = x0 + lean * (y - 64);\n      const hw = w / 2 + fin * max(0, (y - 82) / 26) ** 2;\n      for (let x = floor(cx - hw); x \u003c= cx + hw; x++) {\n        const q = (x + 0.5 - cx) / hw;\n        if (abs(q) > 1) continue;\n        const sh = 0.3 + 0.7 * sqrt(1 - q * q) - 0.2 * q;\n        const k = sh * (sin((x - cx) * 2.3 + 1.6 * sin(y * 0.13 + x0)) > 0.55 ? 0.5 : 1);\n        if (hash(floor(x / 3) + x0, floor(y / 4)) > 0.87) set(x, y, d, 0.5 * sh, 0.56 * sh, 0.45 * sh, 0.4, 0.55, 0.12);\n        else set(x, y, d, 0.36 * k, 0.32 * k, 0.27 * k);\n      }\n    }\n  // Heart-shaped leaves of the understory.\n  for (const [bx, by, len, ang, d] of [[-2, 100, 24, -1, 0.85], [-3, 74, 17, -0.45, 0.6], [66, 103, 21, -2.25, 0.75]]) {\n    const [ca, sa] = [cos(ang), sin(ang)];\n    for (let y = floor(by - len); y \u003c= by + len; y++)\n      for (let x = floor(bx - len); x \u003c= bx + len; x++) {\n        const [dx, dy] = [x + 0.5 - bx, y + 0.5 - by];\n        const u = dx * ca + dy * sa;\n        const v = abs(-dx * sa + dy * ca);\n        const half = len * 0.5 * sin(PI * (u / len) ** 0.7) * (1 - (0.2 * u) / len);\n        if (u \u003c 0 || u > len || v > half) continue;\n        const k = (v \u003c 0.6 ? 1.7 : abs(((u * 0.6 - v * 0.8) % 3.2) - 1.6) \u003c 0.45 ? 1.3 : 1) * (v > 0.2 * half && v \u003c 0.6 * half ? 1.25 : 0.95);\n        set(x, y, d, 0.07 * k, 0.3 * k, 0.08 * k, 0.5, 0.01, 0.05);\n      }\n  }\n  // Leaf litter, nearer leaves over farther, then twigs.\n  const [s1, s2] = [rnd() * 6, rnd() * 6];\n  for (let x = 0; x \u003c W; x++) {\n    lit[x] = round(105 + 1.6 * sin(x * 0.19 + s1) + 1.1 * sin(x * 0.47 + s2));\n    for (let y = lit[x]; y \u003c H; y++) set(x, y, near(y), 0.1, 0.07, 0.05, 0.05, 0.04, 0.01);\n  }\n  const PAL = [[0.55, 0.33, 0.14], [0.68, 0.5, 0.25], [0.4, 0.22, 0.1], [0.75, 0.6, 0.36], [0.3, 0.17, 0.08], [0.6, 0.28, 0.12], [0.5, 0.45, 0.32]];\n  const leaves = [];\n  for (let i = 0; i \u003c 300; i++) leaves.push([rnd() * 70 - 3, 102 + rnd() * 27, 2.5 + rnd() * 4.5, 1 + rnd() * 1.8, (rnd() - 0.5) * 1.5, floor(rnd() * 7), 0.7 + 0.5 * rnd()]);\n  for (const [cx, cy, len, wid, ang, ci, sh] of leaves.sort((a, b) => a[1] - b[1])) {\n    const [ca, sa, c] = [cos(ang), sin(ang), PAL[ci]];\n    for (let y = floor(cy - len); y \u003c= cy + len; y++)\n      for (let x = floor(cx - len); x \u003c= cx + len; x++) {\n        if (x \u003c 0 || x >= W || y >= H || y \u003c lit[x] - 1) continue;\n        const [dx, dy] = [x + 0.5 - cx, y + 0.5 - cy];\n        const u = (dx * ca + dy * sa) / len;\n        const v = (-dx * sa + dy * ca) / wid;\n        const q = u * u + v * v;\n        const k = sh * (abs(v) \u003c 0.3 ? 0.78 : 1) * (q > 0.7 ? 0.82 : 1) * (0.9 + 0.2 * hash(x, y));\n        if (q \u003c= 1) front[set(x, y, near(y), c[0] * k, c[1] * k, c[2] * k, 0.06, 0.05, 0.01)] = cy > 115 ? 1 : 0;\n      }\n  }\n  for (let i = 0; i \u003c 8; i++) {\n    const [x0, y0, len, ang, tk] = [rnd() * 64, 106 + rnd() * 20, 8 + rnd() * 22, (rnd() - 0.5) * 0.8, i \u003c 2 ? 1 : 0];\n    for (let t = 0; t \u003c len; t += 0.5) {\n      const x = x0 + cos(ang) * t;\n      const y = y0 + sin(ang) * t + 0.8 * sin(t * 0.3 + i);\n      if (x \u003c 0 || x >= W || y \u003c lit[floor(x)] - 1) continue;\n      front[set(x, y, near(y), 0.2, 0.13, 0.08)] = front[set(x, y - 1, near(y), 0.36 + 0.14 * tk, 0.27 + 0.13 * tk, 0.18 + 0.12 * tk)] = y0 > 115 ? 1 : 0;\n    }\n  }\n  P.fronts = Int32Array.from(front.reduce((a, f, p) => (f && a.push(p), a), []));\n  P.fsave = new Float32Array(P.fronts.length * 3);\n}\n\nfunction spawnBody(P, age, first) {\n  let [bx, best] = [33, -1];\n  for (let i = 0; i \u003c 24 && !first; i++) {\n    const x = 15 + rnd() * 34;\n    let d = 18;\n    for (const b of P.bodies) if (b.age \u003c SLUMP1) d = min(d, abs(b.bx - x));\n    if ((d += rnd() * 4) > best) [best, bx] = [d, x];\n  }\n  const sc = first ? 1 : 0.86 + rnd() * 0.14;\n  const dir = (bx \u003c 32 ? -1 : 1) * (rnd() \u003c 0.25 ? -1 : 1);\n  P.bodies.push({ bx, by: 109 + (3 * (sc - 0.86)) / 0.14, sc, H: 78 * sc, dir, age, seed: floor(rnd() * 1000), lean: (rnd() - 0.5) * 0.1, flies: [], maxF: 4 + floor(rnd() * 4) });\n}\n\nexport function setup(params) {\n  const P = params;\n  paint(P);\n  const f = f32;\n  Object.assign(P, { buf: f(N * 3), PX: f(W), PY: f(H), tc: f(3), dB: f(N).fill(99), sB: f(N), hB: f(N), tch: new Int32Array(N) });\n  P.G = { cx: f(300), cy: f(300), a: f(300), r: f(300), n: 0, Ls: 0 };\n  Object.assign(P, { bodies: [], drops: [], splash: [], t: 0, rate: 1, torch: 0, veil: 0, rain: 0.06, rAcc: 0, tx: 33 });\n  spawnBody(P, OPEN, true);\n}\n\n// The stalk's centre line: it rises, then crumples and slumps onto the litter.\nfunction geom(P, b) {\n  const { G } = P;\n  const grow = 1 - (1 - clamp((b.age - RISE0) / (RISE1 - RISE0), 0, 1)) ** 2.2;\n  const slump = ease(SLUMP0, SLUMP1, b.age);\n  const Ls = (b.H * grow + 1.5) * (1 - 0.72 * slump ** 0.7);\n  const bend = b.lean + b.dir * 1.9 * slump ** 0.8;\n  const n = min(299, max(2, ceil(Ls / 0.9)));\n  let [x, y] = [b.bx, b.by - 2];\n  for (let i = 0; i \u003c= n; i++) {\n    const a = bend * (i / n) ** 1.2;\n    const r = b.sc * (4.3 - (0.9 * i) / n + 0.35 * sin((PI * i) / n));\n    G.cx[i] = x;\n    G.cy[i] = y;\n    G.a[i] = a;\n    G.r[i] = r;\n    x += (sin(a) * Ls) / n;\n    y = min(y - (cos(a) * Ls) / n, P.lit[clamp(round(x), 0, W - 1)] + 2 - 0.5 * r);\n  }\n  [G.n, G.Ls] = [n, Ls];\n}\n\n// The egg; once split, the torn cup round the foot of the stalk.\nfunction egg(P, b, fade) {\n  const cup = b.age >= SPLIT;\n  const sw = cup ? 1 : mix(0.45, 1, 1 - (1 - clamp(b.age / (SPLIT * 0.9), 0, 1)) ** 2);\n  const [ew, eh, ex, ey] = [(cup ? 6.6 : 6.2) * b.sc * sw, 6.8 * b.sc * sw, b.bx, b.by - 1 - 4.5 * sw];\n  const crack = cup ? 0 : ease(SPLIT - 0.9, SPLIT, b.age);\n  for (let y = max(0, floor(ey - eh)); y \u003c= min(H - 1, ey + eh); y++)\n    for (let x = max(0, floor(ex - ew)); x \u003c= min(W - 1, ex + ew); x++) {\n      const nx = (x + 0.5 - ex) / ew;\n      const ny = (y + 0.5 - ey) / eh;\n      const rr = nx * nx + ny * ny;\n      const rim = cup ? -0.05 + 0.28 * abs(sin(nx * 4.2 + b.seed)) : -9;\n      if (rr > 1 || ny \u003c rim) continue;\n      const l = lightAt(P, x, y) * (0.16 + 0.82 * max(0, -0.38 * nx - 0.38 * ny + 0.84 * sqrt(1 - rr))) * (ny \u003c rim + 0.12 ? 1.2 : 1);\n      const torn = crack > 0 && ny \u003c -0.1 && abs(nx) \u003c crack * 0.85 && abs(ny + 0.55 + 0.13 * sin(nx * 9 + b.seed)) \u003c 0.06 + 0.12 * crack;\n      put(P, y * W + x, l, torn ? GLEBA : cup ? CUP : EGG, fade);\n    }\n}\n\n// Standing, the stalk fills row by row; slumped, it is stamped as discs.\nfunction stalk(P, b, fade, sleeve, slen, V) {\n  const { dB, sB, hB, tch, G } = P;\n  let nt = 0;\n  const mark = (p, d, s, h) => {\n    if (dB[p] > 9) tch[nt++] = p;\n    dB[p] = d;\n    sB[p] = s;\n    hB[p] = h;\n  };\n  if (abs(G.a[G.n]) \u003c 0.4)\n    for (let y = min(H - 1, floor(G.cy[0])), i = 0; y >= max(0, floor(G.cy[G.n])); y--) {\n      while (i \u003c G.n && G.cy[i + 1] > y + 0.5) i++;\n      const [cx, r] = [G.cx[i], G.r[i]];\n      for (let x = max(0, floor(cx - r + 0.5)); x \u003c= min(W - 1, floor(cx + r - 0.5)); x++) {\n        const t = ((x + 0.5 - cx) * cos(G.a[i])) / r;\n        mark(y * W + x, t * t, t, i / G.n);\n      }\n    }\n  else\n    for (let i = 0; i \u003c= G.n; i++) {\n      const [cx, cy, r, nx, ny] = [G.cx[i], G.cy[i], G.r[i], cos(G.a[i]), sin(G.a[i])];\n      for (let y = max(0, floor(cy - r - 0.5)); y \u003c= min(H - 1, floor(cy + r + 0.5)); y++)\n        for (let x = max(0, floor(cx - r - 0.5)); x \u003c= min(W - 1, floor(cx + r + 0.5)); x++) {\n          const dx = x + 0.5 - cx;\n          const dy = y + 0.5 - cy;\n          const d = (dx * dx + dy * dy) / (r * r);\n          const p = y * W + x;\n          if (d \u003c 1 && d \u003c dB[p]) mark(p, d, (dx * nx + dy * ny) / r, i / G.n);\n        }\n    }\n  const wc = ease(WILT, SLUMP1, b.age);\n  const crease = ease(SLUMP0, SLUMP1, b.age);\n  const m = [mix(0.95, 0.74, wc), mix(0.93, 0.66, wc), mix(0.87, 0.47, wc), 0.3, 0.42, 0.68];\n  for (let j = 0; j \u003c nt; j++) {\n    const p = tch[j];\n    const t = clamp(sB[p], -1, 1);\n    const hp = hB[p] * G.Ls;\n    const y = (p / W) | 0;\n    dB[p] = 99;\n    let sh = (0.2 + 0.8 * max(0, 0.92 * sqrt(1 - t * t) - 0.38 * t)) * (1 - 0.25 * wc);\n    const arc = asin(t) * 3.2 * b.sc;\n    const row = floor(hp / 1.4);\n    if (hash(row + b.seed, floor(arc / 1.3 + (row & 1) * 0.5) + 50) \u003c 0.24) sh *= 0.74;\n    if (hp % 3.2 \u003c 1) sh *= 1 - 0.4 * crease;\n    if (sleeve > 0 && hp > G.Ls - slen) sh *= 1 + sleeve * (fsin(arc * 1.4 + hp * 1.2) * fsin(arc * 1.4 - hp * 1.2) > 0.4 ? 0.22 : -0.18);\n    if (y > V.ay + 2 && y \u003c V.ay + V.L) sh *= 1 - 0.42 * V.alpha * V.open;\n    put(P, p, lightAt(P, p % W, y) * sh, m, fade);\n  }\n}\n\n// Worley ridges of the cap: F2 - F1; the cell's id and F1 go in CW.\nfunction cell(u, v, seed) {\n  let [f1, f2, id] = [9, 9, 0];\n  for (let j = -1; j \u003c= 1; j++)\n    for (let i = -1; i \u003c= 1; i++) {\n      const cu = floor(u) + i;\n      const cv = floor(v) + j;\n      const j2 = (((cu + seed) & 15) * 16 + (cv & 15)) * 2;\n      const dx = u - (cu + 0.15 + 0.7 * JT[j2]);\n      const dy = v - (cv + 0.15 + 0.7 * JT[j2 + 1]);\n      const d = dx * dx + dy * dy;\n      if (d \u003c f1) {\n        f2 = f1;\n        f1 = d;\n        id = JT[j2];\n      } else if (d \u003c f2) f2 = d;\n    }\n  CW[0] = id;\n  CW[1] = f1;\n  return sqrt(f2) - sqrt(f1);\n}\n\nfunction cap(P, b, fade) {\n  const { G } = P;\n  const [ax, ay, a] = [G.cx[G.n], G.cy[G.n], G.a[G.n]];\n  const [ux, uy] = [sin(a), -cos(a)];\n  const cs = mix(0.55, 1, ease(SPLIT, RISE0 + 1.5, b.age));\n  const [ch, cw] = [15 * b.sc * cs, 7.6 * b.sc * cs];\n  const eat = ease(FLIES + 1.5, EAT1, b.age);\n  const wc = ease(WILT, SLUMP1, b.age);\n  const [ex, ey] = [abs(uy) * (cw + 1), abs(ux) * (cw + 1)];\n  const [xa, xb, ya, yb] = [ax - ux * 1.5, ax + ux * ch, ay - uy * 1.5, ay + uy * ch];\n  for (let y = max(0, floor(min(ya, yb) - ey)); y \u003c= min(H - 1, max(ya, yb) + ey); y++)\n    for (let x = max(0, floor(min(xa, xb) - ex)); x \u003c= min(W - 1, max(xa, xb) + ex); x++) {\n      const dx = x + 0.5 - ax;\n      const dy = y + 0.5 - ay;\n      const av = dx * ux + dy * uy;\n      const w = -dx * uy + dy * ux;\n      const t = max(0, av) / ch;\n      const hw = cw * CAPF[(min(1, t) * 256) | 0] + (av \u003c 0 ? 0.5 : 0);\n      if (av \u003c -1.5 || av > ch || abs(w) > hw) continue;\n      const q = w / hw;\n      const sh = (0.22 + 0.78 * max(0, 0.9 * sqrt(1 - q * q) - 0.4 * q)) * (0.85 + 0.15 * t) * (1 - 0.3 * wc);\n      const l = lightAt(P, x, y) * sh;\n      const p = y * W + x;\n      // A white collar at the top; where flies ate the slime, white ridges.\n      if (t > 0.9) put(P, p, l, abs(w) \u003c 0.9 && t > 0.96 ? PIT : WHITE, fade);\n      else {\n        const ridge = cell((AS[((q + 1) * 512) | 0] * cw) / 2.5, av / 2.3, b.seed) \u003c 0.24;\n        if (CW[0] \u003c eat) put(P, p, l, ridge ? WHITE : PIT, fade);\n        else if (!ridge && CW[1] \u003c 0.05 && sh > 0.7 && CW[0] > 0.55) put(P, p, l * 1.4, GLOSS, fade);\n        else put(P, p, l, ridge ? RIDGE : GLEBA, fade);\n      }\n    }\n  Object.assign(b, { capX: ax, capY: ay, ux, uy, ch, cw });\n}\n\n// The veil: a diamond net on a flared cone, its threads crowding at the sides.\nfunction veil(P, b, V, front) {\n  const { buf, tc, PX, PY, wet, uv } = P;\n  const { ax, ay, L, r0, rb, sway, wob, band, alpha, bright, col } = V;\n  const seed = b.seed;\n  const C = [0, 1, 2].map((c) => (col[c] * tc[c] + [0.45, 0.95, 1][c] * uv) * 255 * bright);\n  for (let y = max(0, ceil(ay)); y \u003c= min(H - 1, floor(ay + L * 1.06)); y++) {\n    const s = (y + 0.5 - ay) / L;\n    const sc = min(s, 1);\n    const R = r0 + (rb - r0) * sc ** 0.8;\n    const cx = ax + sway * sc * sc;\n    const cw = mix(V.cw0, V.cw1, sc) * V.kw;\n    const ch = cw * 1.15 * V.kh;\n    const [vv, icw, ich, py] = [(s * L) / ch, 1 / (cw * cw), 1 / (ch * ch), PY[y]];\n    for (let x = max(0, floor(cx - R)); x \u003c= min(W - 1, ceil(cx + R)); x++) {\n      const sx = (x + 0.5 - cx) / R;\n      if (sx \u003c= -1 || sx >= 1) continue;\n      const c2 = max(0.0144, 1 - sx * sx);\n      const th = front ? AS[((sx + 1) * 512) | 0] : PI - AS[((sx + 1) * 512) | 0];\n      const hem = s > 0.94 ? 1 + 0.035 * fsin(th * 7 + seed) + 0.02 * fsin(th * 13) : 2;\n      if (s > hem) continue;\n      const u = (th * R) / cw;\n      const wb = wob * fsin(u * 2.1 + vv * 1.3 + seed);\n      const g1 = u + vv + wb;\n      const g2 = u - vv - 0.7 * wb;\n      const k = 1.4 / sqrt(icw / c2 + ich);\n      const d1 = abs(g1 - round(g1)) * k;\n      const d2 = abs(g2 - round(g2)) * k;\n      let i = (d1 \u003c 1 ? 1 - d1 : 0) + (d2 \u003c 1 ? 1 - d2 : 0);\n      if (s * L \u003c 2.2) i = max(i, 0.8);\n      if (s > hem - band / L) i = max(i, 0.7);\n      if (i \u003c 0.04) continue;\n      const l = (AMB + PX[x] * py) * (front ? 0.3 + 0.7 * max(0, 0.94 * sqrt(c2) - 0.34 * sx) : 0.18 + 0.18 * sqrt(c2));\n      const a = min(1, i) * alpha;\n      for (let c = 0, o = (y * W + x) * 3; c \u003c 3; c++, o++) buf[o] += (C[c] * l - buf[o]) * a;\n      if (front && d1 \u003c 0.7 && d2 \u003c 0.7 && hash(round(g1) + seed, round(g2) + 99) \u003c wet) put(P, y * W + x, l * 1.8, WHITE, alpha);\n    }\n  }\n}\n\nfunction drawBody(P, b) {\n  const age = b.age;\n  if (age \u003c SPLIT) return egg(P, b, 1);\n  geom(P, b);\n  const { G, veil: vk } = P;\n  const fade = 1 - ease(SLUMP1, GONE, age);\n  const f = clamp((age - VEIL0) / (VEIL1 - VEIL0), 0, 1);\n  const fu = ease(0, 1, f);\n  const c = ease(WILT, WILT + 3.5, age);\n  const [ax, ay, r0] = [G.cx[G.n], G.cy[G.n] + 1, G.r[G.n] + 1.4];\n  const Lf = max(0, min(b.by - 13 * b.sc + 10 * vk, P.lit[clamp(round(ax), 0, W - 1)] + 2) - ay);\n  const V = { ax, ay, r0, L: max(0.5, Lf * fu * (1 - 0.15 * c)), rb: mix((20 + 7 * vk) * b.sc * (0.35 + 0.65 * fu), r0 + 2.5, c), cw0: mix(6, 3.2, vk), cw1: mix(7.6, 4, vk) };\n  Object.assign(V, { kw: 0.75 + 0.25 * fu, kh: 0.55 + 0.45 * fu, band: (1 - fu) * 2.5 + 0.6, open: min(1, fu * 2), wob: 0.06 + 0.3 * c, bright: 1 - 0.4 * c });\n  V.sway = (3 * sin(age * 0.9 + b.seed) + 0.8 * sin(P.t * 0.7 + b.seed)) * (1 - c);\n  V.alpha = fade * (1 - ease(0.55, 1, c)) * (Lf > 1 ? 1 : 0);\n  V.col = [mix(0.98, 0.86, c), mix(0.97, 0.79, c), mix(0.93, 0.6, c)];\n  const show = f > 0 && V.alpha > 0.01;\n  if (show) veil(P, b, V, false);\n  stalk(P, b, fade, c, Lf * 0.8, V);\n  egg(P, b, fade);\n  if (show) veil(P, b, V, true);\n  cap(P, b, fade);\n  drawFlies(P, b);\n}\n\n// Flies land on the cap, crawl, hop, and leave when it wilts.\nfunction capPoint(b, q, a) {\n  const av = a * b.ch;\n  const w = q * b.cw * CAPF[(clamp(a, 0, 1) * 256) | 0];\n  return [b.capX + b.ux * av - b.uy * w, b.capY + b.uy * av + b.ux * w];\n}\n\nfunction updateFlies(b, dt) {\n  const want = round(b.maxF * ease(FLIES, FLIES + 3, b.age) * (1 - ease(WILT - 1, WILT + 2.5, b.age)));\n  const fl = b.flies;\n  const stay = fl.filter((f) => f.s \u003c 2);\n  const spot = () => ({ s: 0, q: (rnd() - 0.5) * 1.5, a: 0.15 + rnd() * 0.7 });\n  if (stay.length \u003c want && b.capX !== undefined && rnd() \u003c dt * 2) fl.push({ x: rnd() \u003c 0.5 ? -3 : W + 2, y: 15 + rnd() * 60, vx: 0, vy: 0, ...spot() });\n  if (stay.length > want) Object.assign(stay[0], { s: 2, tx: rnd() \u003c 0.5 ? -8 : W + 8, ty: rnd() * 50 });\n  for (let i = fl.length - 1; i >= 0; i--) {\n    const f = fl[i];\n    if (f.s === 1) {\n      f.q = clamp(f.q + (rnd() - 0.5) * dt * 1.2, -0.8, 0.8);\n      f.a = clamp(f.a + (rnd() - 0.5) * dt * 0.6, 0.1, 0.85);\n      if (rnd() \u003c dt * 0.3) Object.assign(f, spot());\n      continue;\n    }\n    const [tx, ty] = f.s === 0 ? capPoint(b, f.q, f.a) : [f.tx, f.ty];\n    f.vx += ((tx - f.x) * 5 - f.vx * 2.2 + (rnd() - 0.5) * 260) * dt;\n    f.vy += ((ty - f.y) * 5 - f.vy * 2.2 + (rnd() - 0.5) * 260) * dt;\n    f.x += f.vx * dt;\n    f.y += f.vy * dt;\n    if (f.s === 0 && abs(tx - f.x) + abs(ty - f.y) \u003c 1.5) f.s = 1;\n    if (f.s === 2 && abs(f.x - W / 2) > W / 2 + 6) fl.splice(i, 1);\n  }\n}\n\nfunction drawFlies(P, b) {\n  for (const f of b.flies) {\n    const [x, y] = (f.s === 1 ? capPoint(b, f.q, f.a) : [f.x, f.y]).map(round);\n    if (x \u003c 1 || x >= W - 2 || y \u003c 1 || y >= H) continue;\n    const [l, p] = [lightAt(P, x, y), y * W + x];\n    put(P, p, l, FLY[0], 1);\n    put(P, p + 1, l, FLY[1], 1);\n    if (f.s !== 1) for (const dx of [-1, 1]) put(P, p - W + dx + (floor(P.t * 30) & 1), l, FLY[2], 0.8);\n    else if (sin(P.t * 5 + f.q * 40) > 0.7) put(P, p, l * 1.6, GLOSS, 1);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  Object.assign(P, { torch: clamp(k[0], 0, 1), rate: clamp(k[1], 0.2, 3) / 2, veil: clamp(k[2], 0, 1), rain: clamp(k[3], 0, 1) });\n  P.t += dt;\n  for (const b of P.bodies) b.age += dt * P.rate;\n  P.bodies = P.bodies.filter((b) => b.age \u003c GONE);\n  if (min(...P.bodies.map((b) => b.age)) >= NEXT) spawnBody(P, 0, false);\n  if (input.btnPressed && input.btnPressed[0]) {\n    if (P.bodies.length >= 3) P.bodies.sort((a, b) => b.age - a.age).shift();\n    spawnBody(P, 0, false);\n  }\n  // The beam follows whatever is coming up.\n  let [sw, sx] = [0, 0];\n  for (const b of P.bodies) {\n    const w = ease(SPLIT - 2, RISE1, b.age) * (1 - ease(SLUMP0, GONE, b.age)) + 0.02;\n    sw += w;\n    sx += w * b.bx;\n  }\n  P.tx += ((sx / sw || 33) - P.tx) * (1 - exp(-dt * 0.8));\n  for (const b of P.bodies) updateFlies(b, dt * clamp(P.rate, 0.12, 1.6));\n  P.rAcc += dt * (0.5 + 40 * P.rain ** 1.5);\n  for (; P.rAcc >= 1; P.rAcc--) if (P.drops.length \u003c 160) P.drops.push([rnd() * W, rnd() * 34 - 4, 75 + rnd() * 50]);\n  for (let i = P.drops.length - 1; i >= 0; i--) {\n    const d = P.drops[i];\n    const x = floor(d[0]);\n    d[1] += d[2] * dt * (0.7 + 0.3 * min(P.rate, 1.5));\n    if (d[1] \u003c P.lit[x] - 1) continue;\n    if (P.splash.length \u003c 40) P.splash.push([x, P.lit[x] - 1 + floor(rnd() * 3), 0.15]);\n    P.drops.splice(i, 1);\n  }\n  P.splash = P.splash.filter((s) => (s[2] -= dt) > 0);\n}\n\nfunction light(P) {\n  const f = P.torch * 3;\n  const i = min(2, floor(f));\n  P.uv = ease(0.72, 1, P.torch);\n  for (let c = 0; c \u003c 3; c++) P.tc[c] = mix(TORCH[i][c], TORCH[i + 1][c], f - i) * (1 - 0.7 * P.uv);\n  // A handheld beam sways.\n  const tx = P.tx + 2.5 * sin(P.t * 1.3) + 1.5 * sin(P.t * 2.9 + 1);\n  const ty = 66 + 3 * sin(P.t * 1.7 + 2);\n  for (let x = 0; x \u003c W; x++) P.PX[x] = exp(-(((x + 0.5 - tx) / 30) ** 2));\n  for (let y = 0; y \u003c H; y++) P.PY[y] = exp(-(((y + 0.5 - ty) / 62) ** 4));\n  P.haze = (5 + 38 * P.rain) * (1 - 0.4 * P.uv);\n  P.wet = 0.1 + 0.55 * P.rain;\n}\n\nfunction background(P) {\n  const { alb: A, flu: F, emi: E, dep: D, buf, tc, PX, PY, uv, haze, fronts, fsave } = P;\n  const [r, g, b] = tc;\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const pool = PX[p % W] * PY[(p / W) | 0];\n    const l = D[p] * (AMB + pool) * 255;\n    const u = l * uv;\n    const h = haze * pool;\n    buf[o] = A[o] * r * l + E[o] + h * r + F[o] * u;\n    buf[o + 1] = A[o + 1] * g * l + E[o + 1] + h * g + F[o + 1] * u;\n    buf[o + 2] = A[o + 2] * b * l + E[o + 2] + h * b + F[o + 2] * u;\n  }\n  for (let i = 0; i \u003c fronts.length * 3; i++) fsave[i] = buf[fronts[(i / 3) | 0] * 3 + (i % 3)];\n}\n\nfunction drawRain(P) {\n  const { buf, tc, PX, PY } = P;\n  const glow = (x, y, v) => {\n    if (x >= 0 && x \u003c W && y >= 0 && y \u003c H) for (let c = 0; c \u003c 3; c++) buf[(y * W + x) * 3 + c] += v * (0.6 + 0.05 * c + 0.4 * tc[c]) * (1 - 0.6 * P.uv);\n  };\n  for (const [x0, y0] of P.drops) for (let j = 0, x = floor(x0); j \u003c 3; j++) glow(x, floor(y0) - j, (25 + 190 * PX[x] * PY[clamp(floor(y0) - j, 0, H - 1)]) * (1 - j * 0.3));\n  for (const [x, y, life] of P.splash) for (const [dx, dy] of [[-1, 0], [1, 0], [0, -1]]) glow(x + dx, y + dy, life * 900 * PX[x] * PY[min(H - 1, y)]);\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const { fronts, fsave, buf } = P;\n  light(P);\n  background(P);\n  for (const b of P.bodies.slice().sort((a, b) => a.by - b.by)) drawBody(P, b);\n  for (let i = 0; i \u003c fronts.length * 3; i++) buf[fronts[(i / 3) | 0] * 3 + (i % 3)] = fsave[i];\n  drawRain(P);\n  for (let y = 0, o = 0; y \u003c H; y++) for (let x = 0; x \u003c W; x++, o += 3) display.setPixel(x, y, min(255, buf[o]), min(255, buf[o + 1]), min(255, buf[o + 2]));\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Torch=0..1, Speed=0.2..3, Veil=0..1, Rain=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Torch","min":0,"max":1,"about":"A warm incandescent bulb at 0, then a cold white LED, a blue gel, and at 1 a UV torch under which the veil glows cyan and the leaves dark red."},{"name":"Speed","min":0.2,"max":3,"about":"The time-lapse rate: at 2 one stinkhorn lives about 30 s and a new egg starts every 22 s; 0.2 is ten times slower."},{"name":"Veil","min":0,"max":1,"about":"At 0 an open net, holes 3 to 4 LEDs across, that stops a hand above the litter; turned up, finer, to holes of 2, longer and wider, its hem on the leaves."},{"name":"Rain","min":0,"max":1,"about":"Near 0 a light mist and a drip now and then; turned up, drops streak through the beam, splash on the litter and bead on the knots of the net."}],"start":[0,2,0,0.06],"measures":{"motion":0.1497,"detail":0.0791,"edges":0.3662,"complexity":1.7099,"coverage":0.5698,"colour":0.1244,"drift":0.0576},"knobResponse":[0.0782,0.0485,0.0482,0.0673]},{"slug":"voronoi","title":"Voronoi","family":"cells","round":2,"note":"흐름을 타고 도는 씨앗마다 가장 가까운 LED 를 제 유리 색으로 칠하고, 조각 사이에 1 LED 납선이 서요. K4 로 거리를 재는 법을 바꾸면 조각 가운데 둥근 유리가 원에서 마름모를 지나 정사각형이 돼요.","idea":"Seeds swirl in a current and every LED takes the colour of the nearest one, so flat panes of glass jostle behind lead, each with a roundel at its seed that turns from disc to diamond to square as the measure of distance changes.","buttons":"K1 tap reshuffles the glass colours.","code":"// ===== Patternflow pattern =====\n// Title:   Voronoi\n// Family:  cells\n// Idea:    Seeds swirl in a current and every LED takes the colour of the nearest one, so flat panes of glass jostle behind lead, each with a roundel at its seed that turns from disc to diamond to square as the measure of distance changes.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..6, Cells=20..60, Metric=0..2\n//\n// Knob 1: Hue. The colour of most of the glass; a few panes take the colours across the wheel from it.\n// Knob 2: Speed. How fast the current carries the seeds round.\n// Knob 3: Cells. How many panes, from 20 big ones to 60 small ones.\n// Knob 4: Metric. How distance is measured: 0 is a ruler, 1 is city blocks, 2 is a king's moves on a chessboard, and the roundels go disc, diamond, square.\n// Buttons: K1 tap reshuffles the glass colours.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 64;\n// Buckets of 8x8 LEDs, each holding the few seeds that can own one of its LEDs.\nconst B = 8;\nconst BX = W / B;\nconst BY = H / B;\n// Seeds keep this far off the frame, so a roundel is seldom cut in half.\nconst EDGE = 2.5;\n\n// Kinds of glass: hue offset, saturation, brightness, and how often each turns up.\nconst GLASS = [\n  [0.0, 0.95, 0.9, 0.34],\n  [0.0, 0.8, 0.62, 0.2],\n  [-0.1, 0.9, 0.85, 0.16],\n  [0.07, 0.75, 1.0, 0.1],\n  [0.5, 0.95, 1.0, 0.12],\n  [0.38, 0.9, 0.9, 0.08],\n];\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction pickGlass(p) {\n  for (let i = 0; i \u003c MAX; i++) {\n    let r = Math.random();\n    let g = 0;\n    while (g \u003c GLASS.length - 1 && r > GLASS[g][3]) {\n      r -= GLASS[g][3];\n      g++;\n    }\n    p.kind[i] = g;\n    p.jitter[i] = (Math.random() - 0.5) * 0.05;\n  }\n  p.hue = -1;\n}\n\n// The current is a stream function made of four box modes, (1,2), (1,3),\n// (2,3) and (1,1), whose strengths rise and fall out of step. A stream\n// function cannot pile seeds up, and a box mode never flows through a wall,\n// so the seeds stay spread out and on the panel; the mix keeps the vortices\n// moving. Each mode is scaled so its fastest point moves at about one unit.\nfunction flow(amp, x, y, out) {\n  const px = Math.PI / W;\n  const py = Math.PI / H;\n  const s1x = Math.sin(px * x), c1x = Math.cos(px * x);\n  const s2x = Math.sin(2 * px * x), c2x = Math.cos(2 * px * x);\n  const s1y = Math.sin(py * y), c1y = Math.cos(py * y);\n  const s2y = Math.sin(2 * py * y), c2y = Math.cos(2 * py * y);\n  const s3y = Math.sin(3 * py * y), c3y = Math.cos(3 * py * y);\n  out[0] = amp[0] * 0.71 * s1x * c2y + amp[1] * 0.83 * s1x * c3y + amp[2] * 0.6 * s2x * c3y + amp[3] * 0.45 * s1x * c1y;\n  out[1] = -amp[0] * 0.71 * c1x * s2y - amp[1] * 0.55 * c1x * s3y - amp[2] * 0.8 * c2x * s3y - amp[3] * 0.9 * c1x * s1y;\n}\n\n// Push seeds apart where they crowd, so the panes stay roughly one size.\nfunction spread(p, n, strength) {\n  const reach = 0.95 * Math.sqrt((W * H) / n);\n  const sx = p.sx;\n  const sy = p.sy;\n  for (let i = 0; i \u003c n; i++) {\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = sx[j] - sx[i];\n      const dy = sy[j] - sy[i];\n      const d2 = dx * dx + dy * dy;\n      if (d2 >= reach * reach || d2 \u003c 1e-6) continue;\n      const d = Math.sqrt(d2);\n      const push = ((reach - d) / d) * strength * 0.5;\n      sx[i] -= dx * push;\n      sy[i] -= dy * push;\n      sx[j] += dx * push;\n      sy[j] += dy * push;\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    sx[i] = Math.min(W - EDGE, Math.max(EDGE, sx[i]));\n    sy[i] = Math.min(H - EDGE, Math.max(EDGE, sy[i]));\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.sx = new Float32Array(MAX);\n  p.sy = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) {\n    p.sx[i] = Math.random() * W;\n    p.sy[i] = Math.random() * H;\n  }\n  p.kind = new Uint8Array(MAX);\n  p.jitter = new Float32Array(MAX);\n  p.rgb = new Uint8Array(MAX * 3);\n  p.pale = new Uint8Array(MAX * 3);\n  p.jewel = new Float32Array(MAX);\n  p.tmp = new Float32Array(3);\n  p.owner = new Uint8Array(W * H);\n  p.cand = new Uint8Array(BX * BY * MAX);\n  p.count = new Uint8Array(BX * BY);\n  p.T = 0;\n  p.amp = new Float32Array(4);\n  p.vel = new Float32Array(2);\n  p.settled = false;\n  pickGlass(p);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 20, 0.06];\n  const n = Math.max(2, Math.min(MAX, Math.round(k[2])));\n  p.n = n;\n  if (!p.settled) {\n    // Relax the random scatter before the first frame, so it opens on even\n    // panes: all the seeds first, for when K3 turns up, then the ones in use.\n    for (let s = 0; s \u003c 30; s++) spread(p, MAX, 0.5);\n    for (let s = 0; s \u003c 30; s++) spread(p, n, 0.5);\n    p.settled = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) pickGlass(p);\n\n  const speed = k[1];\n  p.T += dt * speed * 0.16;\n  const T = p.T;\n  const amp = p.amp;\n  amp[0] = Math.cos(T * 1.0);\n  amp[1] = Math.cos(T * 0.71 + 1.3) * 0.9;\n  amp[2] = Math.cos(T * 1.37 + 2.1) * 0.6;\n  amp[3] = Math.cos(T * 0.53 + 4.0) * 0.8;\n  // A plain Euler step spirals outward round every vortex and, fast enough,\n  // packs the seeds against the walls. A midpoint step does not.\n  const step = 15.6 * speed * dt;\n  const vel = p.vel;\n  for (let i = 0; i \u003c MAX; i++) {\n    const x = p.sx[i];\n    const y = p.sy[i];\n    flow(amp, x, y, vel);\n    flow(amp, x + vel[0] * step * 0.5, y + vel[1] * step * 0.5, vel);\n    p.sx[i] = Math.min(W - EDGE, Math.max(EDGE, x + vel[0] * step));\n    p.sy[i] = Math.min(H - EDGE, Math.max(EDGE, y + vel[1] * step));\n  }\n  // A fast current shears the panes apart faster, so the push keeps pace.\n  spread(p, n, Math.min(0.35, 0.05 + 0.04 * speed));\n\n  // K4 0..1 blends a ruler into city blocks, 1..2 city blocks into king's moves.\n  const m = Math.max(0, Math.min(2, k[3]));\n  p.we = m \u003c 1 ? 1 - m : 0;\n  p.wm = m \u003c 1 ? m : 2 - m;\n  p.wc = m \u003c 1 ? 0 : m - 1;\n\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    // K1 at 0 opens on cobalt rather than the red most of the study opens on.\n    const base = 0.6 + k[0];\n    for (let i = 0; i \u003c MAX; i++) {\n      const g = GLASS[p.kind[i]];\n      let h = base + g[0] + p.jitter[i];\n      h -= Math.floor(h);\n      // Dim orange glass reads as brown on the panel, so warm panes stay bright.\n      const warm = h > 0.02 && h \u003c 0.2;\n      hsv(h, g[1], warm ? Math.max(0.92, g[2]) : g[2], p.tmp, 0);\n      p.rgb[i * 3] = p.tmp[0];\n      p.rgb[i * 3 + 1] = p.tmp[1];\n      p.rgb[i * 3 + 2] = p.tmp[2];\n      // The roundel at the heart of each pane is a thinner, paler glass.\n      hsv(h, g[1] * 0.45, 1, p.tmp, 0);\n      p.pale[i * 3] = p.tmp[0];\n      p.pale[i * 3 + 1] = p.tmp[1];\n      p.pale[i * 3 + 2] = p.tmp[2];\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const n = p.n;\n  const sx = p.sx;\n  const sy = p.sy;\n  const we = p.we;\n  const wm = p.wm;\n  const wc = p.wc;\n  const cand = p.cand;\n  const count = p.count;\n  const owner = p.owner;\n\n  // Each pane has a roundel round its seed, drawn in the same measure, so it\n  // is a disc, a diamond or a square. Under a third of the way to the nearest\n  // other seed it can never cross into the next pane.\n  const jewel = p.jewel;\n  for (let i = 0; i \u003c n; i++) jewel[i] = 1e9;\n  for (let i = 0; i \u003c n; i++) {\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = sx[j] - sx[i];\n      const dy = sy[j] - sy[i];\n      const ax = dx \u003c 0 ? -dx : dx;\n      const ay = dy \u003c 0 ? -dy : dy;\n      const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n      if (d \u003c jewel[i]) jewel[i] = d;\n      if (d \u003c jewel[j]) jewel[j] = d;\n    }\n  }\n  // A roundel under about two LEDs across would be all lead, a dark speck.\n  for (let i = 0; i \u003c n; i++) jewel[i] = jewel[i] * 0.3 \u003c 2.2 ? 0 : jewel[i] * 0.3;\n\n  // Any seed that owns an LED in a bucket is within the nearest seed's\n  // distance from the bucket centre plus twice the centre-to-corner distance.\n  // That holds for all three measures and for any blend of them.\n  const reachCorner = we * Math.SQRT2 * 3.5 + wm * 7 + wc * 3.5;\n  for (let by = 0; by \u003c BY; by++) {\n    for (let bx = 0; bx \u003c BX; bx++) {\n      const cx = bx * B + B / 2;\n      const cy = by * B + B / 2;\n      let best = 1e9;\n      for (let i = 0; i \u003c n; i++) {\n        const dx = sx[i] - cx;\n        const dy = sy[i] - cy;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c best) best = d;\n      }\n      const limit = best + 2 * reachCorner + 0.01;\n      const b = by * BX + bx;\n      let c = 0;\n      for (let i = 0; i \u003c n; i++) {\n        const dx = sx[i] - cx;\n        const dy = sy[i] - cy;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c= limit) cand[b * MAX + c++] = i;\n      }\n      count[b] = c;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    const row = ((y / B) | 0) * BX;\n    const py = y + 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const b = row + ((x / B) | 0);\n      const c = count[b];\n      const base = b * MAX;\n      const px = x + 0.5;\n      let best = 1e9;\n      let who = 0;\n      for (let j = 0; j \u003c c; j++) {\n        const i = cand[base + j];\n        const dx = sx[i] - px;\n        const dy = sy[i] - py;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c best) {\n          best = d;\n          who = i;\n        }\n      }\n      // Which piece of glass: the seed's number doubled, plus one inside its roundel.\n      owner[y * W + x] = who * 2 + (best \u003c jewel[who] ? 1 : 0);\n    }\n  }\n\n  // Lead goes on an LED whose right or lower neighbour belongs to another\n  // piece of glass, which draws one unbroken line between any two pieces\n  // whatever the measure.\n  const rgb = p.rgb;\n  const pale = p.pale;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const id = owner[o];\n      const lead = (x \u003c W - 1 && owner[o + 1] !== id) || (y \u003c H - 1 && owner[o + W] !== id);\n      const c = (id >> 1) * 3;\n      if (lead) display.setPixel(x, y, 0, 0, 0);\n      else if (id & 1) display.setPixel(x, y, pale[c], pale[c + 1], pale[c + 2]);\n      else display.setPixel(x, y, rgb[c], rgb[c + 1], rgb[c + 2]);\n    }\n  }\n}\n","layer":{"id":"layer-voronoi","type":"code","name":"voronoi","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Voronoi\n// Family:  cells\n// Idea:    Seeds swirl in a current and every LED takes the colour of the nearest one, so flat panes of glass jostle behind lead, each with a roundel at its seed that turns from disc to diamond to square as the measure of distance changes.\n// Author:  patternflow-lab\n// Date:    2026-10-22\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern study 2026-10\n// Round:   2\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..6, Cells=20..60, Metric=0..2\n//\n// Knob 1: Hue. The colour of most of the glass; a few panes take the colours across the wheel from it.\n// Knob 2: Speed. How fast the current carries the seeds round.\n// Knob 3: Cells. How many panes, from 20 big ones to 60 small ones.\n// Knob 4: Metric. How distance is measured: 0 is a ruler, 1 is city blocks, 2 is a king's moves on a chessboard, and the roundels go disc, diamond, square.\n// Buttons: K1 tap reshuffles the glass colours.\n\nconst W = 64;\nconst H = 128;\nconst MAX = 64;\n// Buckets of 8x8 LEDs, each holding the few seeds that can own one of its LEDs.\nconst B = 8;\nconst BX = W / B;\nconst BY = H / B;\n// Seeds keep this far off the frame, so a roundel is seldom cut in half.\nconst EDGE = 2.5;\n\n// Kinds of glass: hue offset, saturation, brightness, and how often each turns up.\nconst GLASS = [\n  [0.0, 0.95, 0.9, 0.34],\n  [0.0, 0.8, 0.62, 0.2],\n  [-0.1, 0.9, 0.85, 0.16],\n  [0.07, 0.75, 1.0, 0.1],\n  [0.5, 0.95, 1.0, 0.12],\n  [0.38, 0.9, 0.9, 0.08],\n];\n\nfunction hsv(h, s, v, out, o) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[o] = (k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p) * 255;\n  out[o + 1] = (k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p) * 255;\n  out[o + 2] = (k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p) * 255;\n}\n\nfunction pickGlass(p) {\n  for (let i = 0; i \u003c MAX; i++) {\n    let r = Math.random();\n    let g = 0;\n    while (g \u003c GLASS.length - 1 && r > GLASS[g][3]) {\n      r -= GLASS[g][3];\n      g++;\n    }\n    p.kind[i] = g;\n    p.jitter[i] = (Math.random() - 0.5) * 0.05;\n  }\n  p.hue = -1;\n}\n\n// The current is a stream function made of four box modes, (1,2), (1,3),\n// (2,3) and (1,1), whose strengths rise and fall out of step. A stream\n// function cannot pile seeds up, and a box mode never flows through a wall,\n// so the seeds stay spread out and on the panel; the mix keeps the vortices\n// moving. Each mode is scaled so its fastest point moves at about one unit.\nfunction flow(amp, x, y, out) {\n  const px = Math.PI / W;\n  const py = Math.PI / H;\n  const s1x = Math.sin(px * x), c1x = Math.cos(px * x);\n  const s2x = Math.sin(2 * px * x), c2x = Math.cos(2 * px * x);\n  const s1y = Math.sin(py * y), c1y = Math.cos(py * y);\n  const s2y = Math.sin(2 * py * y), c2y = Math.cos(2 * py * y);\n  const s3y = Math.sin(3 * py * y), c3y = Math.cos(3 * py * y);\n  out[0] = amp[0] * 0.71 * s1x * c2y + amp[1] * 0.83 * s1x * c3y + amp[2] * 0.6 * s2x * c3y + amp[3] * 0.45 * s1x * c1y;\n  out[1] = -amp[0] * 0.71 * c1x * s2y - amp[1] * 0.55 * c1x * s3y - amp[2] * 0.8 * c2x * s3y - amp[3] * 0.9 * c1x * s1y;\n}\n\n// Push seeds apart where they crowd, so the panes stay roughly one size.\nfunction spread(p, n, strength) {\n  const reach = 0.95 * Math.sqrt((W * H) / n);\n  const sx = p.sx;\n  const sy = p.sy;\n  for (let i = 0; i \u003c n; i++) {\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = sx[j] - sx[i];\n      const dy = sy[j] - sy[i];\n      const d2 = dx * dx + dy * dy;\n      if (d2 >= reach * reach || d2 \u003c 1e-6) continue;\n      const d = Math.sqrt(d2);\n      const push = ((reach - d) / d) * strength * 0.5;\n      sx[i] -= dx * push;\n      sy[i] -= dy * push;\n      sx[j] += dx * push;\n      sy[j] += dy * push;\n    }\n  }\n  for (let i = 0; i \u003c n; i++) {\n    sx[i] = Math.min(W - EDGE, Math.max(EDGE, sx[i]));\n    sy[i] = Math.min(H - EDGE, Math.max(EDGE, sy[i]));\n  }\n}\n\nexport function setup(params) {\n  const p = params;\n  p.sx = new Float32Array(MAX);\n  p.sy = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) {\n    p.sx[i] = Math.random() * W;\n    p.sy[i] = Math.random() * H;\n  }\n  p.kind = new Uint8Array(MAX);\n  p.jitter = new Float32Array(MAX);\n  p.rgb = new Uint8Array(MAX * 3);\n  p.pale = new Uint8Array(MAX * 3);\n  p.jewel = new Float32Array(MAX);\n  p.tmp = new Float32Array(3);\n  p.owner = new Uint8Array(W * H);\n  p.cand = new Uint8Array(BX * BY * MAX);\n  p.count = new Uint8Array(BX * BY);\n  p.T = 0;\n  p.amp = new Float32Array(4);\n  p.vel = new Float32Array(2);\n  p.settled = false;\n  pickGlass(p);\n}\n\nexport function update(dt, input, params) {\n  const p = params;\n  const k = input.knobValues || [0, 2, 20, 0.06];\n  const n = Math.max(2, Math.min(MAX, Math.round(k[2])));\n  p.n = n;\n  if (!p.settled) {\n    // Relax the random scatter before the first frame, so it opens on even\n    // panes: all the seeds first, for when K3 turns up, then the ones in use.\n    for (let s = 0; s \u003c 30; s++) spread(p, MAX, 0.5);\n    for (let s = 0; s \u003c 30; s++) spread(p, n, 0.5);\n    p.settled = true;\n  }\n  if (input.btnPressed && input.btnPressed[0]) pickGlass(p);\n\n  const speed = k[1];\n  p.T += dt * speed * 0.16;\n  const T = p.T;\n  const amp = p.amp;\n  amp[0] = Math.cos(T * 1.0);\n  amp[1] = Math.cos(T * 0.71 + 1.3) * 0.9;\n  amp[2] = Math.cos(T * 1.37 + 2.1) * 0.6;\n  amp[3] = Math.cos(T * 0.53 + 4.0) * 0.8;\n  // A plain Euler step spirals outward round every vortex and, fast enough,\n  // packs the seeds against the walls. A midpoint step does not.\n  const step = 15.6 * speed * dt;\n  const vel = p.vel;\n  for (let i = 0; i \u003c MAX; i++) {\n    const x = p.sx[i];\n    const y = p.sy[i];\n    flow(amp, x, y, vel);\n    flow(amp, x + vel[0] * step * 0.5, y + vel[1] * step * 0.5, vel);\n    p.sx[i] = Math.min(W - EDGE, Math.max(EDGE, x + vel[0] * step));\n    p.sy[i] = Math.min(H - EDGE, Math.max(EDGE, y + vel[1] * step));\n  }\n  // A fast current shears the panes apart faster, so the push keeps pace.\n  spread(p, n, Math.min(0.35, 0.05 + 0.04 * speed));\n\n  // K4 0..1 blends a ruler into city blocks, 1..2 city blocks into king's moves.\n  const m = Math.max(0, Math.min(2, k[3]));\n  p.we = m \u003c 1 ? 1 - m : 0;\n  p.wm = m \u003c 1 ? m : 2 - m;\n  p.wc = m \u003c 1 ? 0 : m - 1;\n\n  if (k[0] !== p.hue) {\n    p.hue = k[0];\n    // K1 at 0 opens on cobalt rather than the red most of the study opens on.\n    const base = 0.6 + k[0];\n    for (let i = 0; i \u003c MAX; i++) {\n      const g = GLASS[p.kind[i]];\n      let h = base + g[0] + p.jitter[i];\n      h -= Math.floor(h);\n      // Dim orange glass reads as brown on the panel, so warm panes stay bright.\n      const warm = h > 0.02 && h \u003c 0.2;\n      hsv(h, g[1], warm ? Math.max(0.92, g[2]) : g[2], p.tmp, 0);\n      p.rgb[i * 3] = p.tmp[0];\n      p.rgb[i * 3 + 1] = p.tmp[1];\n      p.rgb[i * 3 + 2] = p.tmp[2];\n      // The roundel at the heart of each pane is a thinner, paler glass.\n      hsv(h, g[1] * 0.45, 1, p.tmp, 0);\n      p.pale[i * 3] = p.tmp[0];\n      p.pale[i * 3 + 1] = p.tmp[1];\n      p.pale[i * 3 + 2] = p.tmp[2];\n    }\n  }\n}\n\nexport function draw(display, params, time) {\n  const p = params;\n  const n = p.n;\n  const sx = p.sx;\n  const sy = p.sy;\n  const we = p.we;\n  const wm = p.wm;\n  const wc = p.wc;\n  const cand = p.cand;\n  const count = p.count;\n  const owner = p.owner;\n\n  // Each pane has a roundel round its seed, drawn in the same measure, so it\n  // is a disc, a diamond or a square. Under a third of the way to the nearest\n  // other seed it can never cross into the next pane.\n  const jewel = p.jewel;\n  for (let i = 0; i \u003c n; i++) jewel[i] = 1e9;\n  for (let i = 0; i \u003c n; i++) {\n    for (let j = i + 1; j \u003c n; j++) {\n      const dx = sx[j] - sx[i];\n      const dy = sy[j] - sy[i];\n      const ax = dx \u003c 0 ? -dx : dx;\n      const ay = dy \u003c 0 ? -dy : dy;\n      const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n      if (d \u003c jewel[i]) jewel[i] = d;\n      if (d \u003c jewel[j]) jewel[j] = d;\n    }\n  }\n  // A roundel under about two LEDs across would be all lead, a dark speck.\n  for (let i = 0; i \u003c n; i++) jewel[i] = jewel[i] * 0.3 \u003c 2.2 ? 0 : jewel[i] * 0.3;\n\n  // Any seed that owns an LED in a bucket is within the nearest seed's\n  // distance from the bucket centre plus twice the centre-to-corner distance.\n  // That holds for all three measures and for any blend of them.\n  const reachCorner = we * Math.SQRT2 * 3.5 + wm * 7 + wc * 3.5;\n  for (let by = 0; by \u003c BY; by++) {\n    for (let bx = 0; bx \u003c BX; bx++) {\n      const cx = bx * B + B / 2;\n      const cy = by * B + B / 2;\n      let best = 1e9;\n      for (let i = 0; i \u003c n; i++) {\n        const dx = sx[i] - cx;\n        const dy = sy[i] - cy;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c best) best = d;\n      }\n      const limit = best + 2 * reachCorner + 0.01;\n      const b = by * BX + bx;\n      let c = 0;\n      for (let i = 0; i \u003c n; i++) {\n        const dx = sx[i] - cx;\n        const dy = sy[i] - cy;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c= limit) cand[b * MAX + c++] = i;\n      }\n      count[b] = c;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++) {\n    const row = ((y / B) | 0) * BX;\n    const py = y + 0.5;\n    for (let x = 0; x \u003c W; x++) {\n      const b = row + ((x / B) | 0);\n      const c = count[b];\n      const base = b * MAX;\n      const px = x + 0.5;\n      let best = 1e9;\n      let who = 0;\n      for (let j = 0; j \u003c c; j++) {\n        const i = cand[base + j];\n        const dx = sx[i] - px;\n        const dy = sy[i] - py;\n        const ax = dx \u003c 0 ? -dx : dx;\n        const ay = dy \u003c 0 ? -dy : dy;\n        const d = we * Math.sqrt(dx * dx + dy * dy) + wm * (ax + ay) + wc * (ax > ay ? ax : ay);\n        if (d \u003c best) {\n          best = d;\n          who = i;\n        }\n      }\n      // Which piece of glass: the seed's number doubled, plus one inside its roundel.\n      owner[y * W + x] = who * 2 + (best \u003c jewel[who] ? 1 : 0);\n    }\n  }\n\n  // Lead goes on an LED whose right or lower neighbour belongs to another\n  // piece of glass, which draws one unbroken line between any two pieces\n  // whatever the measure.\n  const rgb = p.rgb;\n  const pale = p.pale;\n  for (let y = 0; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const o = y * W + x;\n      const id = owner[o];\n      const lead = (x \u003c W - 1 && owner[o + 1] !== id) || (y \u003c H - 1 && owner[o + W] !== id);\n      const c = (id >> 1) * 3;\n      if (lead) display.setPixel(x, y, 0, 0, 0);\n      else if (id & 1) display.setPixel(x, y, pale[c], pale[c + 1], pale[c + 2]);\n      else display.setPixel(x, y, rgb[c], rgb[c + 1], rgb[c + 2]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..6, Cells=20..60, Metric=0..2","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of most of the glass; a few panes take the colours across the wheel from it."},{"name":"Speed","min":0.2,"max":6,"about":"How fast the current carries the seeds round."},{"name":"Cells","min":20,"max":60,"about":"How many panes, from 20 big ones to 60 small ones."},{"name":"Metric","min":0,"max":2,"about":"How distance is measured: 0 is a ruler, 1 is city blocks, 2 is a king's moves on a chessboard, and the roundels go disc, diamond, square."}],"start":[0,2,20,0.06],"measures":{"motion":2.0975,"detail":0.1621,"edges":1,"complexity":0.2058,"coverage":0.8378,"colour":0.5986,"drift":0.1196},"knobResponse":[0.4827,0.3489,0.3517,0.1477]},{"slug":"waggle-dance","title":"Waggle Dance","family":"insect","round":24,"note":"관찰 벌통의 벌집 한 장이 패널 높이로 서요. 위에 봉한 꿀, 그 아래 여덟 색 꽃가루 띠와 애벌레 방이 있고, 벌 여든 마리가 기어 다녀요. 아래쪽 빈 벌집에서는 꽃가루를 단 벌이 몸을 흔들며 8 자 춤을 추고 따르는 벌들이 둘러서요. 춤의 각도가 해에서 본 꽃밭의 방향이라 K4 를 돌리면 모든 춤이 같이 돌아요.","idea":"Bees crawl over one comb of an observation hive while foragers home from the flowers dance figures of eight, each waggle run as far from straight up as the flowers lie from the sun, with a ring of followers turned to face her.","buttons":"K1 tap brings a forager home from a rich patch; she runs up from the entrance and dances long and hard, with more followers round her.","code":"// ===== Patternflow pattern =====\n// Title:   Waggle Dance\n// Family:  insect\n// Idea:    Bees crawl over one comb of an observation hive while foragers home from the flowers dance figures of eight, each waggle run as far from straight up as the flowers lie from the sun, with a ring of followers turned to face her.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after Karl von Frisch's reading of the honeybee's waggle dance\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Bees=80..240, Sun=-1..1\n//\n// Knob 1: Light. Daylight at 0, the window's sun lying across the glass in four panes; the curtain closes on the sun, a warm lamp takes over by 0.5, and towards 1 it turns to a red lamp the bees cannot see.\n// Knob 2: Speed. At 2 a waggle run takes about a second and a bee walks about a body length a second; 0.2 is ten times slower.\n// Knob 3: Bees. Eighty to 240; turned up, more walk in from the sides until they hide the comb.\n// Knob 4: Sun. The sun's bearing against the clover field: at 0.06 the runs point nearly straight up, and turning it swings every dance and slides the window's sun across the glass.\n// Buttons: K1 tap brings a forager home from a rich patch; she runs up from the entrance and dances long and hard, with more followers round her.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Cells six LEDs across the flats, rows five apart (a hexagon squashed by\n// four in a hundred, so every cell is drawn alike); the frame's top bar,\n// its bottom bar and the entrance slot in it.\nconst [CW, RH, TOP, BOT, NC, NR, ENX] = [6, 5, 5, 123, 13, 27, 9];\nconst Y0 = TOP + 2.5;\nconst [EMPTY, HONEY, NECTAR, POLLEN, BROOD, LARVA, EGG] = [0, 1, 2, 3, 4, 5, 6];\nconst [CRAWL, REST, DIP, FOLLOW, DANCE, HOME, EXIT] = [0, 1, 2, 3, 4, 5, 6];\n// Pollen: orange, yellow, ochre, rust, purple-grey, buff, olive, red-orange.\nconst POLLENS = [[0.95, 0.52, 0.08], [0.95, 0.8, 0.16], [0.74, 0.54, 0.17], [0.6, 0.25, 0.1],\n  [0.44, 0.37, 0.5], [0.86, 0.68, 0.36], [0.55, 0.58, 0.24], [0.9, 0.4, 0.12]];\n// Bees: a dark race, the usual, a golden one. Thorax, then the amber bands.\nconst THX = [[0.5, 0.37, 0.2], [0.78, 0.56, 0.24], [0.9, 0.68, 0.3]];\nconst AMB = [[0.62, 0.44, 0.18], [1, 0.72, 0.2], [1, 0.84, 0.32]];\nconst [DARK, HEAD, WING] = [[0.3, 0.18, 0.08], [0.14, 0.1, 0.06], [0.8, 0.84, 0.9]];\nconst [SUNC, DAYC, WARM, REDC] = [[1, 0.84, 0.56], [1, 0.94, 0.82], [1, 0.66, 0.34], [1, 0.09, 0.035]];\n// Where the flowers lie, against the main field, and how often foragers come from each.\nconst FIELDS = [0, 0, 0.95, -1.9];\n\nconst { min, max, sin, cos, abs, sqrt, floor, round, exp, atan2, PI } = Math;\nconst len = (a, b) => sqrt(a * a + b * b);\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst wrap = (a) => a - 2 * PI * round(a / (2 * PI));\nconst rnd = () => Math.random();\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Distance from a cell's centre in its own hexagon, 3 on the wall.\nconst hexd = (dx, dy) => max(abs(dx), abs(0.5 * dx + 0.9 * dy), abs(0.5 * dx - 0.9 * dy));\nconst cellX = (r, c) => CW * (c - 1) + (r & 1 ? 3.5 : 0.5);\nconst cellY = (r) => Y0 + (r - 1) * RH;\nconst cap = (t) => t === BROOD || t === HONEY;\n\n// Which cell each LED sits in, and where in it.\nfunction grid(S) {\n  for (let y = TOP; y \u003c BOT; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r0 = round((y + 0.5 - Y0) / RH) + 1;\n      let [best, next] = [99, 99];\n      const p = y * W + x;\n      for (let r = max(0, r0 - 1); r \u003c= min(NR - 1, r0 + 1); r++) {\n        const off = r & 1 ? 3.5 : 0.5;\n        const c0 = round((x + 0.5 - off) / CW) + 1;\n        for (let c = max(0, c0 - 1); c \u003c= min(NC - 1, c0 + 1); c++) {\n          const dx = x + 0.5 - cellX(r, c);\n          const dy = y + 0.5 - cellY(r);\n          const d = hexd(dx, dy);\n          if (d \u003c best) {\n            next = best;\n            S.cid2[p] = S.cid[p];\n            best = d;\n            S.cid[p] = r * NC + c;\n            [S.hd[p], S.dx[p], S.dy[p]] = [d, dx, dy];\n          } else if (d \u003c next) {\n            next = d;\n            S.cid2[p] = r * NC + c;\n          }\n        }\n      }\n    }\n}\n\n// Honey over the top and down the corners, a band of pollen, brood below.\nfunction layout(S) {\n  for (let r = 0; r \u003c NR; r++)\n    for (let c = 0; c \u003c NC; c++) {\n      const i = r * NC + c;\n      const [x, y] = [cellX(r, c), cellY(r)];\n      const e = len((x - 32) / 33, (y - 70) / 28) + 0.05 * (sin(x * 0.21 + y * 0.13) + sin(y * 0.29 - x * 0.17 + 2));\n      const u = rnd();\n      let t;\n      if (y \u003c 24 || (e > 1.28 && y \u003c 64)) t = u \u003c 0.82 ? HONEY : u \u003c 0.95 ? NECTAR : EMPTY;\n      else if (e > 1 && y \u003c 72) t = u \u003c 0.62 ? POLLEN : u \u003c 0.78 ? NECTAR : EMPTY;\n      else if (e \u003c 0.72) t = u \u003c 0.68 ? BROOD : u \u003c 0.78 ? LARVA : u \u003c 0.81 ? EGG : EMPTY;\n      else if (e \u003c 1) t = u \u003c 0.34 ? LARVA : u \u003c 0.48 ? EGG : u \u003c 0.64 ? BROOD : u \u003c 0.68 ? POLLEN : EMPTY;\n      else t = u \u003c 0.12 ? POLLEN : u \u003c 0.27 ? NECTAR : EMPTY;\n      [S.type[i], S.age[i], S.tint[i], S.gap[i], S.pol[i]] = [t, rnd(), rnd(), rnd() * 6.283, floor(rnd() * 8)];\n    }\n}\n\n// Each LED's colour as it would be in white light, and how much of the\n// sun reaches it: cell bottoms stay in shadow.\nfunction paint(S) {\n  const { base, expo } = S;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const q = p * 3;\n    let r, g, b;\n    let ex = 1;\n    let dim = 0.66;\n    if (y \u003c TOP || y >= BOT) {\n      // Pine, the grain running along the bar, a groove where it meets the comb.\n      const gr = 0.8 + 0.2 * sin(x * 0.23 + 2 * sin(x * 0.07 + y * 1.3));\n      const edge = y === TOP - 1 || y === BOT ? 0.55 : 1;\n      const k = gr * edge * (0.9 + 0.1 * hash(p, 5));\n      [r, g, b] = [0.6 * k, 0.42 * k, 0.24 * k];\n      if (y > BOT + 1 && y \u003c H - 1 && abs(x + 0.5 - ENX) \u003c 5) [r, g, b] = [0.02, 0.015, 0.01];\n    } else {\n      const [i, d, dx, dy] = [S.cid[p], S.hd[p], S.dx[p], S.dy[p]];\n      const [t, tn, rr, lit] = [S.type[i], S.tint[i], len(dx, dy), -(dx + dy) / 3];\n      if (t === HONEY) {\n        dim = 1;\n        const k = (1 - 0.12 * (d / 2.6) ** 2 + 0.06 * lit) * (0.95 + 0.06 * hash(p, 1));\n        [r, g, b] = [(1 - 0.04 * tn) * k, (0.88 - 0.16 * tn) * k, (0.6 - 0.26 * tn) * k];\n      } else if (t === NECTAR) {\n        // Nectar: dark amber down in the cell, a bright meniscus round it, and a glint.\n        const f = (0.08 + 0.92 * sm(1.5, 2.4, d)) * (0.75 + 0.3 * tn);\n        [r, g, b] = [0.07 + 0.62 * f, 0.03 + 0.36 * f, 0.006 + 0.06 * f];\n        if (abs(dx + 1) \u003c 0.6 && abs(dy + 1) \u003c 0.7) [r, g, b] = [0.95, 0.9, 0.74];\n        ex = 0.6;\n      } else if (t === POLLEN) {\n        const c = POLLENS[S.pol[i]];\n        dim = 0.8;\n        // Packed down in the cell, its inside wall in shadow round it.\n        const k = (0.8 + 0.25 * tn) * (1 - 0.85 * sm(1.5, 2.3, d));\n        [r, g, b] = c.map((v, n) => v * k * (0.82 + 0.3 * hash(p, 2 + n)));\n        ex = 0.8;\n      } else if (t === BROOD) {\n        const k = (1 - 0.32 * (rr / 2.7) ** 2 + 0.1 * lit) * (hash(p, 6) \u003c 0.14 ? 0.78 : 1) * (0.9 + 0.15 * tn);\n        [r, g, b] = [0.8 * k, 0.68 * k, 0.5 * k];\n      } else {\n        // An open cell: dark at the bottom, its lower inside wall catching the light.\n        const lip = sm(1.6, 2.4, d) * (dy > 0.5 ? 1 : 0.3);\n        const k = (0.04 + 0.1 * lip) * (0.75 + 0.5 * tn);\n        [r, g, b] = [k, k * 0.68, k * 0.38];\n        ex = 0.2 + 0.8 * lip;\n        if (t === LARVA) {\n          // The larva curled in a C on its bed of jelly, bigger as it grows.\n          const a = S.age[i];\n          const [R, th] = [0.4 + 1.1 * a, 0.45 + 0.55 * a];\n          const ang = wrap(atan2(dy, dx) - S.gap[i]);\n          let on = a \u003c 0.3 ? sm(1.2, 0.5, rr) : sm(th + 0.3, th - 0.3, abs(rr - R)) * sm(0.5, 1, abs(ang));\n          if (rr \u003c 1.9) [r, g, b] = [r + 0.18, g + 0.17, b + 0.14];\n          const sh = 0.82 + 0.18 * clamp(lit + 0.5, 0, 1) + 0.05 * sin(ang * 5);\n          r += (0.97 * sh - r) * on;\n          g += (0.94 * sh - g) * on;\n          b += (0.85 * sh - b) * on;\n          ex += (0.9 - ex) * on;\n        } else if (t === EGG && rr \u003c 0.7) [r, g, b] = [0.86, 0.85, 0.78];\n      }\n      // The walls: pale wax round the honey, the rims of open cells lit,\n      // and a dark seam where two brood caps meet.\n      const w = sm(2.4, 2.6, d);\n      if (w > 0) {\n        const t2 = S.type[S.cid2[p]];\n        const pale = t === HONEY || t === NECTAR ? 1 : 0;\n        const seam = (t === BROOD || t2 === BROOD) && cap(t) && cap(t2) ? 0.15 : 1;\n        // Light from above rakes the slanted walls; the upright ones stand side on to it.\n        const k = (0.85 + 0.3 * hash(p, 8)) * seam * (!pale && abs(dx) > 2.6 ? 0.45 : 1);\n        r += ((0.34 + 0.18 * pale) * k - r) * w;\n        g += ((0.24 + 0.15 * pale) * k - g) * w;\n        b += ((0.11 + 0.08 * pale) * k - b) * w;\n        ex += ((seam \u003c 1 ? 0.15 : 1) - ex) * w;\n      }\n    }\n    // The comb sits back in the hive's shade; the bees on it catch the light.\n    base[q] = r * dim;\n    base[q + 1] = g * dim;\n    base[q + 2] = b * dim;\n    expo[p] = ex;\n  }\n}\n\n// The window throws its four panes of sun on the glass; they slide and lean with the sun.\nfunction sunPatch(S, s) {\n  const [cx, cy, sh] = [32 + 22 * s, 74 - 6 * abs(s), -0.5 * s];\n  for (let p = 0; p \u003c N; p++) {\n    const v = ((p / W) | 0) + 0.5 - cy;\n    const u = (p % W) + 0.5 - cx - sh * v;\n    let m = sm(22, 16, abs(u)) * sm(40, 33, abs(v));\n    m *= 1 - 0.85 * sm(1.9, 0.7, abs(u));\n    m *= 1 - 0.85 * sm(1.9, 0.7, abs(v + 5));\n    S.sun[p] = m;\n  }\n  S.sunK = s;\n}\n\nfunction newBee(S, x, y, h) {\n  const u = rnd();\n  const b = { x, y, h, m: CRAWL, t: rnd() * 3, v: 2.6 + 2.6 * rnd(), s: 1.12 + 0.14 * rnd(), tone: u \u003c 0.18 ? 0 : u \u003c 0.82 ? 1 : 2, ph: rnd() * 6.28, w: 0, wag: 0, wp: 0 };\n  S.bees.push(b);\n  return b;\n}\n\n// A bee to the dance floor on the lower comb, clear of the other dances.\nfunction spot(S) {\n  let best = [32, 104];\n  let far = -1;\n  for (let k = 0; k \u003c 24; k++) {\n    const x = 12 + 40 * rnd();\n    const y = 80 + 33 * rnd();\n    // The lower the better, near the entrance, but well clear of the others.\n    const d = min(24, ...S.dances.map((D) => len(D.cx - x, D.cy - y))) + 0.1 * y;\n    if (d > far) [far, best] = [d, [x, y]];\n  }\n  return best;\n}\n\nfunction newDance(S, b, vig) {\n  const [cx, cy] = spot(S);\n  // A forager from a rich patch runs longer, keeps at it and draws more followers.\n  const D = { b, cx, cy, fl: FIELDS[floor(rnd() * 4)] + 0.12 * (rnd() - 0.5), L: vig ? 11 : 8 + 2.5 * rnd(), tw: vig ? 1.25 : 0.85 + 0.3 * rnd(),\n    tr: vig ? 0.9 : 1 + 0.3 * rnd(), tau: 0, side: rnd() \u003c 0.5 ? -1 : 1, n: vig ? 26 : 9 + floor(10 * rnd()), amp: vig ? 1 : 0.65 + 0.2 * rnd(),\n    want: vig ? 10 : 6 + floor(3 * rnd()), on: false, foll: [], rec: 0, pc: floor(rnd() * 3) };\n  D.th = D.fl - S.sunA;\n  b.D = D;\n  S.dances.push(D);\n  return D;\n}\n\n// The bees nearest the dance turn and gather round it.\nfunction recruit(S, D, snap) {\n  const free = S.bees.filter((b) => (b.m === CRAWL || b.m === REST) && len(b.x - D.cx, b.y - D.cy) \u003c 24);\n  free.sort((a, b) => len(a.x - D.cx, a.y - D.cy) - len(b.x - D.cx, b.y - D.cy));\n  for (const b of free) {\n    if (D.foll.length >= D.want) break;\n    Object.assign(b, { m: FOLLOW, D, a: atan2(b.x - D.cx, -(b.y - D.cy)), t: 5 + 10 * rnd() });\n    D.foll.push(b);\n    if (snap) {\n      const R = D.L / 2 + 3.4;\n      b.x = D.cx + R * sin(b.a);\n      b.y = D.cy - R * cos(b.a);\n      b.h = b.a + PI;\n    }\n  }\n}\n\nfunction seek(b, tx, ty, sp, dt) {\n  const [dx, dy] = [tx - b.x, ty - b.y];\n  const r = len(dx, dy);\n  if (r > 0.25) {\n    const want = atan2(dx, -dy);\n    const e = wrap(want - b.h);\n    b.h += clamp(e, -5 * dt, 5 * dt);\n    const st = min(r, sp * dt) * max(0.15, cos(e));\n    b.x += sin(b.h) * st;\n    b.y -= cos(b.h) * st;\n  }\n  return r;\n}\n\nfunction stepDance(S, D, dt) {\n  const b = D.b;\n  D.th += clamp(wrap(D.fl - S.sunA - D.th), -1.5 * dt, 1.5 * dt);\n  const [ux, uy] = [sin(D.th), -cos(D.th)];\n  if (!D.on) {\n    // The forager hurries up from the entrance to where she will dance.\n    b.m = HOME;\n    if (seek(b, D.cx - (ux * D.L) / 2, D.cy - (uy * D.L) / 2, D.n > 20 ? 13 : 9, dt) \u003c 1.2) {\n      D.on = true;\n      b.m = DANCE;\n      recruit(S, D, false);\n    }\n    return;\n  }\n  D.tau += dt;\n  if (D.tau >= D.tw + D.tr) {\n    D.tau -= D.tw + D.tr;\n    D.side = -D.side;\n    if (--D.n \u003c= 0) {\n      // Done: she goes back out, and some of her followers go after the flowers.\n      [D.gone, b.m, b.wag] = [true, EXIT, 0];\n      for (const f of D.foll) [f.m, f.t] = [rnd() \u003c 0.4 ? EXIT : CRAWL, 1 + 2 * rnd()];\n      return;\n    }\n  }\n  let want;\n  if (D.tau \u003c D.tw) {\n    const f = D.tau / D.tw - 0.5;\n    b.x = D.cx + ux * D.L * f;\n    b.y = D.cy + uy * D.L * f;\n    want = D.th;\n    b.wag = D.amp;\n    b.wp += dt * 2 * PI * 13;\n  } else {\n    const s = (D.tau - D.tw) / D.tr;\n    const ps = D.side * PI * s;\n    const [rx, ry] = [ux * cos(ps) - uy * sin(ps), ux * sin(ps) + uy * cos(ps)];\n    b.x = D.cx + (rx * D.L) / 2;\n    b.y = D.cy + (ry * D.L) / 2;\n    want = atan2(-D.side * ry, -D.side * rx);\n    b.wag = 0;\n  }\n  b.h += clamp(wrap(want - b.h), -14 * dt, 14 * dt);\n  // Followers keep their place round her, turned to face her, and drift with her.\n  D.foll = D.foll.filter((f) => f.m === FOLLOW && f.D === D);\n  D.rec -= dt;\n  if (D.rec \u003c= 0) {\n    D.rec = 1.5;\n    if (D.foll.length \u003c D.want) recruit(S, D, false);\n  }\n  const da = atan2(b.x - D.cx, -(b.y - D.cy));\n  for (const f of D.foll) {\n    f.a += dt * 0.35 * sin(wrap(da - f.a));\n    const R = D.L / 2 + 3.4 + 0.4 * sin(S.t * 2 + f.ph);\n    if (seek(f, D.cx + R * sin(f.a), D.cy - R * cos(f.a), 6, dt) \u003c 1.2) f.h += clamp(wrap(atan2(b.x - f.x, -(b.y - f.y)) - f.h), -6 * dt, 6 * dt);\n    if ((f.t -= dt) \u003c= 0) [f.m, f.t, f.h] = [CRAWL, 1 + 2 * rnd(), f.h + PI];\n  }\n}\n\nfunction crawl(S, b, dt) {\n  b.w += (rnd() - 0.5) * 10 * sqrt(dt);\n  b.w *= 1 - min(1, 1.5 * dt);\n  let want = null;\n  const ex = b.x \u003c 4 ? 1 : b.x > W - 4 ? -1 : 0;\n  const ey = b.y \u003c TOP + 4 ? 1 : b.y > BOT - 4 ? -1 : 0;\n  if (ex || ey) want = atan2(ex, -ey);\n  b.h += b.w * dt;\n  if (want !== null) b.h += clamp(wrap(want - b.h), -3 * dt, 3 * dt);\n  const st = b.v * dt;\n  b.x += sin(b.h) * st;\n  b.y -= cos(b.h) * st;\n}\n\nfunction step(S, dt) {\n  const { bees } = S;\n  for (const b of bees) {\n    const m = b.m;\n    if (m === DANCE || m === HOME || m === FOLLOW) continue;\n    if (m === EXIT) {\n      if (seek(b, ENX, BOT + 1.5, 7, dt) \u003c 1.5) b.out = true;\n      continue;\n    }\n    // Others give the dancer and her followers room.\n    for (const D of S.dances) {\n      const [dx, dy] = [b.x - D.cx, b.y - D.cy];\n      const r = len(dx, dy);\n      if (D.on && r \u003c D.L / 2 + 9) {\n        if (m !== CRAWL) b.t = 0;\n        b.x += (dx / (r + 0.01)) * 4 * dt;\n        b.y += (dy / (r + 0.01)) * 4 * dt;\n        b.h += clamp(wrap(atan2(dx, -dy) - b.h), -4 * dt, 4 * dt);\n      }\n    }\n    if (m === CRAWL) crawl(S, b, dt);\n    else if (m === REST) b.h += sin(S.t * 6 + b.ph) * 0.5 * dt;\n    if ((b.t -= dt) > 0) continue;\n    // Backing out of a cell, she turns away.\n    if (m === DIP) [b.x, b.y, b.h] = [b.x - sin(b.h) * 1.5, b.y + cos(b.h) * 1.5, b.h + PI * (0.6 + 0.8 * rnd())];\n    const u = rnd();\n    b.m = CRAWL;\n    b.t = 1 + 3 * rnd();\n    if (u \u003c 0.28) [b.m, b.t] = [REST, 0.8 + 2.5 * rnd()];\n    else if (u \u003c 0.5 && m !== DIP) {\n      // Head first into a cell: to feed a larva, take nectar or pack pollen.\n      const hx = round(b.x + sin(b.h) * 2.2 - 0.5);\n      const hy = round(b.y - cos(b.h) * 2.2 - 0.5);\n      if (hx >= 0 && hx \u003c W && hy >= TOP + 2 && hy \u003c BOT - 2) {\n        const i = S.cid[hy * W + hx];\n        const t = S.type[i];\n        if (t !== HONEY && t !== BROOD) {\n          const r = floor(i / NC);\n          [b.m, b.t] = [DIP, 2 + 4 * rnd()];\n          b.x = cellX(r, i % NC) - sin(b.h) * 1.5;\n          b.y = cellY(r) + cos(b.h) * 1.5;\n        }\n      }\n    }\n  }\n  for (const D of S.dances) stepDance(S, D, dt);\n  S.dances = S.dances.filter((D) => !D.gone);\n  for (const b of bees) if (b.D && (b.D.gone || (b.m !== FOLLOW && b.m !== DANCE && b.m !== HOME))) b.D = null;\n  // Bees shoulder each other apart; those still at a cell or dancing stand firm.\n  for (const a of bees) {\n    if (a.m === REST || a.m === DIP || a.m === DANCE) continue;\n    for (const b of bees) {\n      const dx = a.x - b.x;\n      const dy = a.y - b.y;\n      if (abs(dx) > 3.6 || abs(dy) > 3.6 || b === a) continue;\n      const r = len(dx, dy);\n      if (r \u003c 3.6 && r > 0.01) {\n        a.x += (dx / r) * (3.6 - r) * 0.25;\n        a.y += (dy / r) * (3.6 - r) * 0.25;\n      }\n    }\n  }\n  S.bees = bees.filter((b) => !b.out);\n}\n\nexport function setup(params) {\n  const S = { t: 0, started: false, sunA: 0, sunK: 9, next: 6, add: 0, c0: 4.2, c1: 8.5, cd: 0.55, bees: [], dances: [] };\n  for (const k of [\"cid\", \"cid2\"]) S[k] = new Int16Array(N);\n  for (const k of [\"hd\", \"dx\", \"dy\", \"expo\", \"X\", \"amb\", \"pool\", \"sun\"]) S[k] = new Float32Array(N);\n  for (const k of [\"base\", \"A\", \"jit\"]) S[k] = new Float32Array(N * 3);\n  for (const k of [\"age\", \"tint\", \"gap\"]) S[k] = new Float32Array(NR * NC);\n  for (const k of [\"type\", \"pol\"]) S[k] = new Uint8Array(NR * NC);\n  grid(S);\n  layout(S);\n  paint(S);\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y] = [p % W, (p / W) | 0];\n    S.amb[p] = 0.74 + 0.2 * (1 - y / H) + 0.03 * sin(x * 0.11 + y * 0.05) - 0.12 * ((x - 31.5) / 32) ** 4;\n    S.pool[p] = 0.42 + 0.6 * exp(-((x - 40) ** 2 + (y - 74) ** 2) / 3000);\n    const j = 0.94 + 0.12 * hash(p, 19);\n    for (let c = 0; c \u003c 3; c++) S.jit[p * 3 + c] = j * (0.97 + 0.06 * hash(p, 20 + c));\n  }\n  params.s = S;\n}\n\nfunction start(S, n) {\n  // Bees thickest on the brood, two dances already going.\n  for (let k = 0; k \u003c n; k++) {\n    let x, y;\n    for (let j = 0; j \u003c 4; j++) {\n      x = 2 + 60 * rnd();\n      y = TOP + 3 + (BOT - TOP - 6) * rnd();\n      if (rnd() \u003c 0.35 + 0.65 * sm(30, 70, y)) break;\n    }\n    newBee(S, x, y, rnd() * 6.28);\n  }\n  for (let k = 0; k \u003c 2; k++) {\n    const b = newBee(S, 0, 0, 0);\n    const D = newDance(S, b, false);\n    Object.assign(D, { fl: k ? 0.08 : -0.1, cx: k ? 20 : 43, cy: k ? 111 : 102, on: true, tau: rnd() * (D.tw + D.tr), rec: 1.5 });\n    D.th = D.fl - S.sunA;\n    b.m = DANCE;\n    stepDance(S, D, 0);\n    b.h = D.tau \u003c D.tw ? D.th : b.h;\n    recruit(S, D, true);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.light = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2;\n  const want = round(clamp(k[2], 80, 240));\n  const sk = clamp(k[3], -1, 1);\n  S.sunA = sk * PI;\n  if (abs(sk - S.sunK) > 0.002) sunPatch(S, sk);\n  if (!S.started) {\n    S.started = true;\n    start(S, want);\n  }\n  const d = dt * tempo;\n  S.t += d;\n  // Clouds cross the sun now and then; the first one early.\n  if (S.t > S.c1 + 1.5) {\n    S.c0 = S.t + 8 + 20 * rnd();\n    S.c1 = S.c0 + 3 + 6 * rnd();\n    S.cd = 0.4 + 0.5 * rnd();\n  }\n  S.cloud = 1 - S.cd * sm(S.c0, S.c0 + 1.5, S.t) * sm(S.c1 + 1.5, S.c1, S.t);\n  const vig = input.btnPressed && input.btnPressed[0];\n  if ((S.next -= d) \u003c= 0 || vig) {\n    if (S.dances.length \u003c (vig ? 4 : 3)) {\n      const b = newBee(S, ENX + 4 * (rnd() - 0.5), BOT + 1, 0);\n      b.m = HOME;\n      newDance(S, b, vig);\n    }\n    if (!vig) S.next = 5 + 8 * rnd();\n  }\n  // Bees walk in from the sides, or go out at the entrance, to match the knob.\n  let ord = 0;\n  for (const b of S.bees) if (b.m \u003c= FOLLOW) ord++;\n  if ((S.add -= dt) \u003c= 0) {\n    S.add = 0.1;\n    if (ord \u003c want) {\n      const l = rnd() \u003c 0.5;\n      newBee(S, l ? -3 : W + 3, TOP + 8 + (BOT - TOP - 16) * rnd(), l ? PI / 2 : -PI / 2).t = 1.5;\n    } else if (ord > want + 2) {\n      const b = S.bees.find((b) => b.m === CRAWL);\n      if (b) b.m = EXIT;\n    }\n  }\n  step(S, d);\n}\n\n// One bee into the albedo: her body worked out on a 12 x 12 patch first,\n// then her shadow a step down and right, head, thorax, banded abdomen, wings.\nconst PC = new Float32Array(144);\nconst PP = new Uint8Array(144);\nfunction bee(S, b) {\n  const { A, X } = S;\n  const [s, fx, fy, dip, wg] = [b.s, sin(b.h), -cos(b.h), b.m === DIP, b.wag > 0];\n  const wag = wg ? b.wag * sin(b.wp) : b.m === REST ? 0.15 * sin(S.t * 9 + b.ph) : 0;\n  const [bl, th, am] = [wg ? 0.4 : 0, THX[b.tone], AMB[b.tone]];\n  const shim = 0.24 + 0.14 * sin(S.t * 2.3 + b.ph + b.x * 0.3);\n  // A box round her, the whole patch for a dancer and her blur.\n  const ax = wg ? 5 : s * (3.2 * abs(fx) + 1.9 * abs(fy)) + 0.5;\n  const ay = wg ? 5 : s * (3.2 * abs(fy) + 1.9 * abs(fx)) + 0.5;\n  const [x0, y0] = [floor(b.x - ax), floor(b.y - ay)];\n  const nw = min(12, floor(b.x + ax) - x0 + 2);\n  const nh = min(12, floor(b.y + ay) - y0 + 2);\n  for (let j = 0, k = 0; j \u003c nh; j++)\n    for (let i = 0; i \u003c nw; i++, k++) {\n      const X0 = x0 + i + 0.5 - b.x;\n      const Y0 = y0 + j + 0.5 - b.y;\n      const u = (X0 * fx + Y0 * fy) / s;\n      const v = (Y0 * fx - X0 * fy) / s - wag * (0.3 + 0.7 * clamp(-u / 2.5, 0, 1));\n      PC[k] = shape(u, v, s, dip, bl);\n      PP[k] = PART;\n    }\n  for (let j = 0, k = 0; j \u003c nh; j++)\n    for (let i = 0; i \u003c nw; i++, k++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      const c = PC[k];\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const p = py * W + px;\n      const q = p * 3;\n      const sh = i && j ? PC[k - nw - 1] : 0;\n      if (sh > 0) {\n        const f = 1 - 0.7 * sh * (1 - c);\n        A[q] *= f;\n        A[q + 1] *= f;\n        A[q + 2] *= f;\n      }\n      const X0 = px + 0.5 - b.x;\n      const Y0 = py + 0.5 - b.y;\n      const u = (X0 * fx + Y0 * fy) / s;\n      const v = (Y0 * fx - X0 * fy) / s - wag * (0.3 + 0.7 * clamp(-u / 2.5, 0, 1));\n      // A waggling dancer buzzes her wings into a pale blur round her.\n      let wa = wg ? 0.55 * clamp(1.6 - len((u + 0.7) / 1.5, v / 1.7), 0, 1) : 0;\n      if (c \u003c= 0 && wa \u003c= 0) continue;\n      const pt = PP[k];\n      const col = pt === 1 ? HEAD : pt === 2 ? th : null;\n      const st = u > -0.85 ? 1 : u > -1.35 ? 0 : u > -1.9 ? 0.8 : 0;\n      if (u > -2.2 && u \u003c 0.3 && abs(v) > 0.35 && abs(v) \u003c 1.15) wa = max(wa, shim);\n      const a = max(c, wa);\n      for (let n = 0; n \u003c 3; n++) {\n        let e = col ? col[n] : DARK[n] + (am[n] - DARK[n]) * st;\n        e += (WING[n] - e) * wa;\n        A[q + n] += (e - A[q + n]) * a;\n      }\n      X[p] += (1 - X[p]) * a;\n    }\n  // A forager home from the field carries her pollen loads on her hind legs.\n  if (b.D && (b.m === DANCE || b.m === HOME)) {\n    const c = POLLENS[b.D.pc];\n    for (const sd of [-1, 1]) {\n      const px = round(b.x + s * (-0.7 * fx - sd * 1.25 * fy) - 0.5);\n      const py = round(b.y + s * (-0.7 * fy + sd * 1.25 * fx) - 0.5);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const q = (py * W + px) * 3;\n      [A[q], A[q + 1], A[q + 2], X[py * W + px]] = [...c, 1];\n    }\n  }\n}\n\n// Coverage of a bee's body at (u along, v across) in body lengths of\n// about five LEDs; PART says which piece.\nlet PART = 0;\nfunction shape(u, v, s, dip, bl) {\n  let c = clamp((1 - len((u + 1.3) / 1.5, v / (1.12 + bl))) * 1.2 * s + 0.5, 0, 1);\n  PART = 3;\n  if (!dip || u \u003c 0.3) {\n    const k = clamp((1 - len((u - 0.5) / 0.8, v)) * 0.9 * s + 0.5, 0, 1);\n    if (k > c) [c, PART] = [k, 2];\n  }\n  if (!dip) {\n    const k = clamp((1 - len((u - 1.65) / 0.6, v / 0.75)) * 0.7 * s + 0.5, 0, 1);\n    if (k > c) [c, PART] = [k, 1];\n  }\n  return c;\n}\n\nconst knee = (c) => (c \u003c 190 ? c : 190 + 65 * (1 - exp(-(c - 190) / 65)));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { A, X, base, expo, amb, sun, pool, jit } = S;\n  A.set(base);\n  X.set(expo);\n  for (const b of S.bees) if (b.m !== DANCE) bee(S, b);\n  for (const b of S.bees) if (b.m === DANCE) bee(S, b);\n  // The curtain closes on the sun first; the room light goes from daylight\n  // to a warm lamp over the hive by 0.5, and from that to the red lamp.\n  const L = S.light;\n  const [w, rd, pw] = [sm(0, 0.5, L), sm(0.5, 1, L), sm(0.15, 0.6, L)];\n  const dc = [0, 1, 2].map((c) => (DAYC[c] + (WARM[c] - DAYC[c]) * w + (REDC[c] - WARM[c]) * rd) * (1 - 0.1 * w - 0.1 * rd) * 255);\n  const sk = 0.9 * S.cloud * (1 - sm(0, 0.4, L)) * 255;\n  const o = [0, 0, 0];\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    const a = amb[p] + (pool[p] - amb[p]) * pw;\n    const s = sun[p] * X[p] * sk;\n    for (let c = 0; c \u003c 3; c++) o[c] = knee(A[q + c] * (a * dc[c] + s * SUNC[c]) * jit[q + c]) | 0;\n    display.setPixel(p % W, (p / W) | 0, o[0], o[1], o[2]);\n  }\n}\n","layer":{"id":"layer-waggle-dance","type":"code","name":"waggle-dance","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Waggle Dance\n// Family:  insect\n// Idea:    Bees crawl over one comb of an observation hive while foragers home from the flowers dance figures of eight, each waggle run as far from straight up as the flowers lie from the sun, with a ring of followers turned to face her.\n// Author:  patternflow-lab\n// Date:    2026-10-24\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 24, after Karl von Frisch's reading of the honeybee's waggle dance\n// Round:   24\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Bees=80..240, Sun=-1..1\n//\n// Knob 1: Light. Daylight at 0, the window's sun lying across the glass in four panes; the curtain closes on the sun, a warm lamp takes over by 0.5, and towards 1 it turns to a red lamp the bees cannot see.\n// Knob 2: Speed. At 2 a waggle run takes about a second and a bee walks about a body length a second; 0.2 is ten times slower.\n// Knob 3: Bees. Eighty to 240; turned up, more walk in from the sides until they hide the comb.\n// Knob 4: Sun. The sun's bearing against the clover field: at 0.06 the runs point nearly straight up, and turning it swings every dance and slides the window's sun across the glass.\n// Buttons: K1 tap brings a forager home from a rich patch; she runs up from the entrance and dances long and hard, with more followers round her.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// Cells six LEDs across the flats, rows five apart (a hexagon squashed by\n// four in a hundred, so every cell is drawn alike); the frame's top bar,\n// its bottom bar and the entrance slot in it.\nconst [CW, RH, TOP, BOT, NC, NR, ENX] = [6, 5, 5, 123, 13, 27, 9];\nconst Y0 = TOP + 2.5;\nconst [EMPTY, HONEY, NECTAR, POLLEN, BROOD, LARVA, EGG] = [0, 1, 2, 3, 4, 5, 6];\nconst [CRAWL, REST, DIP, FOLLOW, DANCE, HOME, EXIT] = [0, 1, 2, 3, 4, 5, 6];\n// Pollen: orange, yellow, ochre, rust, purple-grey, buff, olive, red-orange.\nconst POLLENS = [[0.95, 0.52, 0.08], [0.95, 0.8, 0.16], [0.74, 0.54, 0.17], [0.6, 0.25, 0.1],\n  [0.44, 0.37, 0.5], [0.86, 0.68, 0.36], [0.55, 0.58, 0.24], [0.9, 0.4, 0.12]];\n// Bees: a dark race, the usual, a golden one. Thorax, then the amber bands.\nconst THX = [[0.5, 0.37, 0.2], [0.78, 0.56, 0.24], [0.9, 0.68, 0.3]];\nconst AMB = [[0.62, 0.44, 0.18], [1, 0.72, 0.2], [1, 0.84, 0.32]];\nconst [DARK, HEAD, WING] = [[0.3, 0.18, 0.08], [0.14, 0.1, 0.06], [0.8, 0.84, 0.9]];\nconst [SUNC, DAYC, WARM, REDC] = [[1, 0.84, 0.56], [1, 0.94, 0.82], [1, 0.66, 0.34], [1, 0.09, 0.035]];\n// Where the flowers lie, against the main field, and how often foragers come from each.\nconst FIELDS = [0, 0, 0.95, -1.9];\n\nconst { min, max, sin, cos, abs, sqrt, floor, round, exp, atan2, PI } = Math;\nconst len = (a, b) => sqrt(a * a + b * b);\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst sm = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));\nconst wrap = (a) => a - 2 * PI * round(a / (2 * PI));\nconst rnd = () => Math.random();\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Distance from a cell's centre in its own hexagon, 3 on the wall.\nconst hexd = (dx, dy) => max(abs(dx), abs(0.5 * dx + 0.9 * dy), abs(0.5 * dx - 0.9 * dy));\nconst cellX = (r, c) => CW * (c - 1) + (r & 1 ? 3.5 : 0.5);\nconst cellY = (r) => Y0 + (r - 1) * RH;\nconst cap = (t) => t === BROOD || t === HONEY;\n\n// Which cell each LED sits in, and where in it.\nfunction grid(S) {\n  for (let y = TOP; y \u003c BOT; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const r0 = round((y + 0.5 - Y0) / RH) + 1;\n      let [best, next] = [99, 99];\n      const p = y * W + x;\n      for (let r = max(0, r0 - 1); r \u003c= min(NR - 1, r0 + 1); r++) {\n        const off = r & 1 ? 3.5 : 0.5;\n        const c0 = round((x + 0.5 - off) / CW) + 1;\n        for (let c = max(0, c0 - 1); c \u003c= min(NC - 1, c0 + 1); c++) {\n          const dx = x + 0.5 - cellX(r, c);\n          const dy = y + 0.5 - cellY(r);\n          const d = hexd(dx, dy);\n          if (d \u003c best) {\n            next = best;\n            S.cid2[p] = S.cid[p];\n            best = d;\n            S.cid[p] = r * NC + c;\n            [S.hd[p], S.dx[p], S.dy[p]] = [d, dx, dy];\n          } else if (d \u003c next) {\n            next = d;\n            S.cid2[p] = r * NC + c;\n          }\n        }\n      }\n    }\n}\n\n// Honey over the top and down the corners, a band of pollen, brood below.\nfunction layout(S) {\n  for (let r = 0; r \u003c NR; r++)\n    for (let c = 0; c \u003c NC; c++) {\n      const i = r * NC + c;\n      const [x, y] = [cellX(r, c), cellY(r)];\n      const e = len((x - 32) / 33, (y - 70) / 28) + 0.05 * (sin(x * 0.21 + y * 0.13) + sin(y * 0.29 - x * 0.17 + 2));\n      const u = rnd();\n      let t;\n      if (y \u003c 24 || (e > 1.28 && y \u003c 64)) t = u \u003c 0.82 ? HONEY : u \u003c 0.95 ? NECTAR : EMPTY;\n      else if (e > 1 && y \u003c 72) t = u \u003c 0.62 ? POLLEN : u \u003c 0.78 ? NECTAR : EMPTY;\n      else if (e \u003c 0.72) t = u \u003c 0.68 ? BROOD : u \u003c 0.78 ? LARVA : u \u003c 0.81 ? EGG : EMPTY;\n      else if (e \u003c 1) t = u \u003c 0.34 ? LARVA : u \u003c 0.48 ? EGG : u \u003c 0.64 ? BROOD : u \u003c 0.68 ? POLLEN : EMPTY;\n      else t = u \u003c 0.12 ? POLLEN : u \u003c 0.27 ? NECTAR : EMPTY;\n      [S.type[i], S.age[i], S.tint[i], S.gap[i], S.pol[i]] = [t, rnd(), rnd(), rnd() * 6.283, floor(rnd() * 8)];\n    }\n}\n\n// Each LED's colour as it would be in white light, and how much of the\n// sun reaches it: cell bottoms stay in shadow.\nfunction paint(S) {\n  const { base, expo } = S;\n  for (let p = 0; p \u003c N; p++) {\n    const x = p % W;\n    const y = (p / W) | 0;\n    const q = p * 3;\n    let r, g, b;\n    let ex = 1;\n    let dim = 0.66;\n    if (y \u003c TOP || y >= BOT) {\n      // Pine, the grain running along the bar, a groove where it meets the comb.\n      const gr = 0.8 + 0.2 * sin(x * 0.23 + 2 * sin(x * 0.07 + y * 1.3));\n      const edge = y === TOP - 1 || y === BOT ? 0.55 : 1;\n      const k = gr * edge * (0.9 + 0.1 * hash(p, 5));\n      [r, g, b] = [0.6 * k, 0.42 * k, 0.24 * k];\n      if (y > BOT + 1 && y \u003c H - 1 && abs(x + 0.5 - ENX) \u003c 5) [r, g, b] = [0.02, 0.015, 0.01];\n    } else {\n      const [i, d, dx, dy] = [S.cid[p], S.hd[p], S.dx[p], S.dy[p]];\n      const [t, tn, rr, lit] = [S.type[i], S.tint[i], len(dx, dy), -(dx + dy) / 3];\n      if (t === HONEY) {\n        dim = 1;\n        const k = (1 - 0.12 * (d / 2.6) ** 2 + 0.06 * lit) * (0.95 + 0.06 * hash(p, 1));\n        [r, g, b] = [(1 - 0.04 * tn) * k, (0.88 - 0.16 * tn) * k, (0.6 - 0.26 * tn) * k];\n      } else if (t === NECTAR) {\n        // Nectar: dark amber down in the cell, a bright meniscus round it, and a glint.\n        const f = (0.08 + 0.92 * sm(1.5, 2.4, d)) * (0.75 + 0.3 * tn);\n        [r, g, b] = [0.07 + 0.62 * f, 0.03 + 0.36 * f, 0.006 + 0.06 * f];\n        if (abs(dx + 1) \u003c 0.6 && abs(dy + 1) \u003c 0.7) [r, g, b] = [0.95, 0.9, 0.74];\n        ex = 0.6;\n      } else if (t === POLLEN) {\n        const c = POLLENS[S.pol[i]];\n        dim = 0.8;\n        // Packed down in the cell, its inside wall in shadow round it.\n        const k = (0.8 + 0.25 * tn) * (1 - 0.85 * sm(1.5, 2.3, d));\n        [r, g, b] = c.map((v, n) => v * k * (0.82 + 0.3 * hash(p, 2 + n)));\n        ex = 0.8;\n      } else if (t === BROOD) {\n        const k = (1 - 0.32 * (rr / 2.7) ** 2 + 0.1 * lit) * (hash(p, 6) \u003c 0.14 ? 0.78 : 1) * (0.9 + 0.15 * tn);\n        [r, g, b] = [0.8 * k, 0.68 * k, 0.5 * k];\n      } else {\n        // An open cell: dark at the bottom, its lower inside wall catching the light.\n        const lip = sm(1.6, 2.4, d) * (dy > 0.5 ? 1 : 0.3);\n        const k = (0.04 + 0.1 * lip) * (0.75 + 0.5 * tn);\n        [r, g, b] = [k, k * 0.68, k * 0.38];\n        ex = 0.2 + 0.8 * lip;\n        if (t === LARVA) {\n          // The larva curled in a C on its bed of jelly, bigger as it grows.\n          const a = S.age[i];\n          const [R, th] = [0.4 + 1.1 * a, 0.45 + 0.55 * a];\n          const ang = wrap(atan2(dy, dx) - S.gap[i]);\n          let on = a \u003c 0.3 ? sm(1.2, 0.5, rr) : sm(th + 0.3, th - 0.3, abs(rr - R)) * sm(0.5, 1, abs(ang));\n          if (rr \u003c 1.9) [r, g, b] = [r + 0.18, g + 0.17, b + 0.14];\n          const sh = 0.82 + 0.18 * clamp(lit + 0.5, 0, 1) + 0.05 * sin(ang * 5);\n          r += (0.97 * sh - r) * on;\n          g += (0.94 * sh - g) * on;\n          b += (0.85 * sh - b) * on;\n          ex += (0.9 - ex) * on;\n        } else if (t === EGG && rr \u003c 0.7) [r, g, b] = [0.86, 0.85, 0.78];\n      }\n      // The walls: pale wax round the honey, the rims of open cells lit,\n      // and a dark seam where two brood caps meet.\n      const w = sm(2.4, 2.6, d);\n      if (w > 0) {\n        const t2 = S.type[S.cid2[p]];\n        const pale = t === HONEY || t === NECTAR ? 1 : 0;\n        const seam = (t === BROOD || t2 === BROOD) && cap(t) && cap(t2) ? 0.15 : 1;\n        // Light from above rakes the slanted walls; the upright ones stand side on to it.\n        const k = (0.85 + 0.3 * hash(p, 8)) * seam * (!pale && abs(dx) > 2.6 ? 0.45 : 1);\n        r += ((0.34 + 0.18 * pale) * k - r) * w;\n        g += ((0.24 + 0.15 * pale) * k - g) * w;\n        b += ((0.11 + 0.08 * pale) * k - b) * w;\n        ex += ((seam \u003c 1 ? 0.15 : 1) - ex) * w;\n      }\n    }\n    // The comb sits back in the hive's shade; the bees on it catch the light.\n    base[q] = r * dim;\n    base[q + 1] = g * dim;\n    base[q + 2] = b * dim;\n    expo[p] = ex;\n  }\n}\n\n// The window throws its four panes of sun on the glass; they slide and lean with the sun.\nfunction sunPatch(S, s) {\n  const [cx, cy, sh] = [32 + 22 * s, 74 - 6 * abs(s), -0.5 * s];\n  for (let p = 0; p \u003c N; p++) {\n    const v = ((p / W) | 0) + 0.5 - cy;\n    const u = (p % W) + 0.5 - cx - sh * v;\n    let m = sm(22, 16, abs(u)) * sm(40, 33, abs(v));\n    m *= 1 - 0.85 * sm(1.9, 0.7, abs(u));\n    m *= 1 - 0.85 * sm(1.9, 0.7, abs(v + 5));\n    S.sun[p] = m;\n  }\n  S.sunK = s;\n}\n\nfunction newBee(S, x, y, h) {\n  const u = rnd();\n  const b = { x, y, h, m: CRAWL, t: rnd() * 3, v: 2.6 + 2.6 * rnd(), s: 1.12 + 0.14 * rnd(), tone: u \u003c 0.18 ? 0 : u \u003c 0.82 ? 1 : 2, ph: rnd() * 6.28, w: 0, wag: 0, wp: 0 };\n  S.bees.push(b);\n  return b;\n}\n\n// A bee to the dance floor on the lower comb, clear of the other dances.\nfunction spot(S) {\n  let best = [32, 104];\n  let far = -1;\n  for (let k = 0; k \u003c 24; k++) {\n    const x = 12 + 40 * rnd();\n    const y = 80 + 33 * rnd();\n    // The lower the better, near the entrance, but well clear of the others.\n    const d = min(24, ...S.dances.map((D) => len(D.cx - x, D.cy - y))) + 0.1 * y;\n    if (d > far) [far, best] = [d, [x, y]];\n  }\n  return best;\n}\n\nfunction newDance(S, b, vig) {\n  const [cx, cy] = spot(S);\n  // A forager from a rich patch runs longer, keeps at it and draws more followers.\n  const D = { b, cx, cy, fl: FIELDS[floor(rnd() * 4)] + 0.12 * (rnd() - 0.5), L: vig ? 11 : 8 + 2.5 * rnd(), tw: vig ? 1.25 : 0.85 + 0.3 * rnd(),\n    tr: vig ? 0.9 : 1 + 0.3 * rnd(), tau: 0, side: rnd() \u003c 0.5 ? -1 : 1, n: vig ? 26 : 9 + floor(10 * rnd()), amp: vig ? 1 : 0.65 + 0.2 * rnd(),\n    want: vig ? 10 : 6 + floor(3 * rnd()), on: false, foll: [], rec: 0, pc: floor(rnd() * 3) };\n  D.th = D.fl - S.sunA;\n  b.D = D;\n  S.dances.push(D);\n  return D;\n}\n\n// The bees nearest the dance turn and gather round it.\nfunction recruit(S, D, snap) {\n  const free = S.bees.filter((b) => (b.m === CRAWL || b.m === REST) && len(b.x - D.cx, b.y - D.cy) \u003c 24);\n  free.sort((a, b) => len(a.x - D.cx, a.y - D.cy) - len(b.x - D.cx, b.y - D.cy));\n  for (const b of free) {\n    if (D.foll.length >= D.want) break;\n    Object.assign(b, { m: FOLLOW, D, a: atan2(b.x - D.cx, -(b.y - D.cy)), t: 5 + 10 * rnd() });\n    D.foll.push(b);\n    if (snap) {\n      const R = D.L / 2 + 3.4;\n      b.x = D.cx + R * sin(b.a);\n      b.y = D.cy - R * cos(b.a);\n      b.h = b.a + PI;\n    }\n  }\n}\n\nfunction seek(b, tx, ty, sp, dt) {\n  const [dx, dy] = [tx - b.x, ty - b.y];\n  const r = len(dx, dy);\n  if (r > 0.25) {\n    const want = atan2(dx, -dy);\n    const e = wrap(want - b.h);\n    b.h += clamp(e, -5 * dt, 5 * dt);\n    const st = min(r, sp * dt) * max(0.15, cos(e));\n    b.x += sin(b.h) * st;\n    b.y -= cos(b.h) * st;\n  }\n  return r;\n}\n\nfunction stepDance(S, D, dt) {\n  const b = D.b;\n  D.th += clamp(wrap(D.fl - S.sunA - D.th), -1.5 * dt, 1.5 * dt);\n  const [ux, uy] = [sin(D.th), -cos(D.th)];\n  if (!D.on) {\n    // The forager hurries up from the entrance to where she will dance.\n    b.m = HOME;\n    if (seek(b, D.cx - (ux * D.L) / 2, D.cy - (uy * D.L) / 2, D.n > 20 ? 13 : 9, dt) \u003c 1.2) {\n      D.on = true;\n      b.m = DANCE;\n      recruit(S, D, false);\n    }\n    return;\n  }\n  D.tau += dt;\n  if (D.tau >= D.tw + D.tr) {\n    D.tau -= D.tw + D.tr;\n    D.side = -D.side;\n    if (--D.n \u003c= 0) {\n      // Done: she goes back out, and some of her followers go after the flowers.\n      [D.gone, b.m, b.wag] = [true, EXIT, 0];\n      for (const f of D.foll) [f.m, f.t] = [rnd() \u003c 0.4 ? EXIT : CRAWL, 1 + 2 * rnd()];\n      return;\n    }\n  }\n  let want;\n  if (D.tau \u003c D.tw) {\n    const f = D.tau / D.tw - 0.5;\n    b.x = D.cx + ux * D.L * f;\n    b.y = D.cy + uy * D.L * f;\n    want = D.th;\n    b.wag = D.amp;\n    b.wp += dt * 2 * PI * 13;\n  } else {\n    const s = (D.tau - D.tw) / D.tr;\n    const ps = D.side * PI * s;\n    const [rx, ry] = [ux * cos(ps) - uy * sin(ps), ux * sin(ps) + uy * cos(ps)];\n    b.x = D.cx + (rx * D.L) / 2;\n    b.y = D.cy + (ry * D.L) / 2;\n    want = atan2(-D.side * ry, -D.side * rx);\n    b.wag = 0;\n  }\n  b.h += clamp(wrap(want - b.h), -14 * dt, 14 * dt);\n  // Followers keep their place round her, turned to face her, and drift with her.\n  D.foll = D.foll.filter((f) => f.m === FOLLOW && f.D === D);\n  D.rec -= dt;\n  if (D.rec \u003c= 0) {\n    D.rec = 1.5;\n    if (D.foll.length \u003c D.want) recruit(S, D, false);\n  }\n  const da = atan2(b.x - D.cx, -(b.y - D.cy));\n  for (const f of D.foll) {\n    f.a += dt * 0.35 * sin(wrap(da - f.a));\n    const R = D.L / 2 + 3.4 + 0.4 * sin(S.t * 2 + f.ph);\n    if (seek(f, D.cx + R * sin(f.a), D.cy - R * cos(f.a), 6, dt) \u003c 1.2) f.h += clamp(wrap(atan2(b.x - f.x, -(b.y - f.y)) - f.h), -6 * dt, 6 * dt);\n    if ((f.t -= dt) \u003c= 0) [f.m, f.t, f.h] = [CRAWL, 1 + 2 * rnd(), f.h + PI];\n  }\n}\n\nfunction crawl(S, b, dt) {\n  b.w += (rnd() - 0.5) * 10 * sqrt(dt);\n  b.w *= 1 - min(1, 1.5 * dt);\n  let want = null;\n  const ex = b.x \u003c 4 ? 1 : b.x > W - 4 ? -1 : 0;\n  const ey = b.y \u003c TOP + 4 ? 1 : b.y > BOT - 4 ? -1 : 0;\n  if (ex || ey) want = atan2(ex, -ey);\n  b.h += b.w * dt;\n  if (want !== null) b.h += clamp(wrap(want - b.h), -3 * dt, 3 * dt);\n  const st = b.v * dt;\n  b.x += sin(b.h) * st;\n  b.y -= cos(b.h) * st;\n}\n\nfunction step(S, dt) {\n  const { bees } = S;\n  for (const b of bees) {\n    const m = b.m;\n    if (m === DANCE || m === HOME || m === FOLLOW) continue;\n    if (m === EXIT) {\n      if (seek(b, ENX, BOT + 1.5, 7, dt) \u003c 1.5) b.out = true;\n      continue;\n    }\n    // Others give the dancer and her followers room.\n    for (const D of S.dances) {\n      const [dx, dy] = [b.x - D.cx, b.y - D.cy];\n      const r = len(dx, dy);\n      if (D.on && r \u003c D.L / 2 + 9) {\n        if (m !== CRAWL) b.t = 0;\n        b.x += (dx / (r + 0.01)) * 4 * dt;\n        b.y += (dy / (r + 0.01)) * 4 * dt;\n        b.h += clamp(wrap(atan2(dx, -dy) - b.h), -4 * dt, 4 * dt);\n      }\n    }\n    if (m === CRAWL) crawl(S, b, dt);\n    else if (m === REST) b.h += sin(S.t * 6 + b.ph) * 0.5 * dt;\n    if ((b.t -= dt) > 0) continue;\n    // Backing out of a cell, she turns away.\n    if (m === DIP) [b.x, b.y, b.h] = [b.x - sin(b.h) * 1.5, b.y + cos(b.h) * 1.5, b.h + PI * (0.6 + 0.8 * rnd())];\n    const u = rnd();\n    b.m = CRAWL;\n    b.t = 1 + 3 * rnd();\n    if (u \u003c 0.28) [b.m, b.t] = [REST, 0.8 + 2.5 * rnd()];\n    else if (u \u003c 0.5 && m !== DIP) {\n      // Head first into a cell: to feed a larva, take nectar or pack pollen.\n      const hx = round(b.x + sin(b.h) * 2.2 - 0.5);\n      const hy = round(b.y - cos(b.h) * 2.2 - 0.5);\n      if (hx >= 0 && hx \u003c W && hy >= TOP + 2 && hy \u003c BOT - 2) {\n        const i = S.cid[hy * W + hx];\n        const t = S.type[i];\n        if (t !== HONEY && t !== BROOD) {\n          const r = floor(i / NC);\n          [b.m, b.t] = [DIP, 2 + 4 * rnd()];\n          b.x = cellX(r, i % NC) - sin(b.h) * 1.5;\n          b.y = cellY(r) + cos(b.h) * 1.5;\n        }\n      }\n    }\n  }\n  for (const D of S.dances) stepDance(S, D, dt);\n  S.dances = S.dances.filter((D) => !D.gone);\n  for (const b of bees) if (b.D && (b.D.gone || (b.m !== FOLLOW && b.m !== DANCE && b.m !== HOME))) b.D = null;\n  // Bees shoulder each other apart; those still at a cell or dancing stand firm.\n  for (const a of bees) {\n    if (a.m === REST || a.m === DIP || a.m === DANCE) continue;\n    for (const b of bees) {\n      const dx = a.x - b.x;\n      const dy = a.y - b.y;\n      if (abs(dx) > 3.6 || abs(dy) > 3.6 || b === a) continue;\n      const r = len(dx, dy);\n      if (r \u003c 3.6 && r > 0.01) {\n        a.x += (dx / r) * (3.6 - r) * 0.25;\n        a.y += (dy / r) * (3.6 - r) * 0.25;\n      }\n    }\n  }\n  S.bees = bees.filter((b) => !b.out);\n}\n\nexport function setup(params) {\n  const S = { t: 0, started: false, sunA: 0, sunK: 9, next: 6, add: 0, c0: 4.2, c1: 8.5, cd: 0.55, bees: [], dances: [] };\n  for (const k of [\"cid\", \"cid2\"]) S[k] = new Int16Array(N);\n  for (const k of [\"hd\", \"dx\", \"dy\", \"expo\", \"X\", \"amb\", \"pool\", \"sun\"]) S[k] = new Float32Array(N);\n  for (const k of [\"base\", \"A\", \"jit\"]) S[k] = new Float32Array(N * 3);\n  for (const k of [\"age\", \"tint\", \"gap\"]) S[k] = new Float32Array(NR * NC);\n  for (const k of [\"type\", \"pol\"]) S[k] = new Uint8Array(NR * NC);\n  grid(S);\n  layout(S);\n  paint(S);\n  for (let p = 0; p \u003c N; p++) {\n    const [x, y] = [p % W, (p / W) | 0];\n    S.amb[p] = 0.74 + 0.2 * (1 - y / H) + 0.03 * sin(x * 0.11 + y * 0.05) - 0.12 * ((x - 31.5) / 32) ** 4;\n    S.pool[p] = 0.42 + 0.6 * exp(-((x - 40) ** 2 + (y - 74) ** 2) / 3000);\n    const j = 0.94 + 0.12 * hash(p, 19);\n    for (let c = 0; c \u003c 3; c++) S.jit[p * 3 + c] = j * (0.97 + 0.06 * hash(p, 20 + c));\n  }\n  params.s = S;\n}\n\nfunction start(S, n) {\n  // Bees thickest on the brood, two dances already going.\n  for (let k = 0; k \u003c n; k++) {\n    let x, y;\n    for (let j = 0; j \u003c 4; j++) {\n      x = 2 + 60 * rnd();\n      y = TOP + 3 + (BOT - TOP - 6) * rnd();\n      if (rnd() \u003c 0.35 + 0.65 * sm(30, 70, y)) break;\n    }\n    newBee(S, x, y, rnd() * 6.28);\n  }\n  for (let k = 0; k \u003c 2; k++) {\n    const b = newBee(S, 0, 0, 0);\n    const D = newDance(S, b, false);\n    Object.assign(D, { fl: k ? 0.08 : -0.1, cx: k ? 20 : 43, cy: k ? 111 : 102, on: true, tau: rnd() * (D.tw + D.tr), rec: 1.5 });\n    D.th = D.fl - S.sunA;\n    b.m = DANCE;\n    stepDance(S, D, 0);\n    b.h = D.tau \u003c D.tw ? D.th : b.h;\n    recruit(S, D, true);\n  }\n}\n\nexport function update(dt, input, params) {\n  if (!params.s) setup(params);\n  const S = params.s;\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = clamp(dt || 0, 0, 0.1);\n  S.light = clamp(k[0], 0, 1);\n  const tempo = clamp(k[1], 0.2, 3) / 2;\n  const want = round(clamp(k[2], 80, 240));\n  const sk = clamp(k[3], -1, 1);\n  S.sunA = sk * PI;\n  if (abs(sk - S.sunK) > 0.002) sunPatch(S, sk);\n  if (!S.started) {\n    S.started = true;\n    start(S, want);\n  }\n  const d = dt * tempo;\n  S.t += d;\n  // Clouds cross the sun now and then; the first one early.\n  if (S.t > S.c1 + 1.5) {\n    S.c0 = S.t + 8 + 20 * rnd();\n    S.c1 = S.c0 + 3 + 6 * rnd();\n    S.cd = 0.4 + 0.5 * rnd();\n  }\n  S.cloud = 1 - S.cd * sm(S.c0, S.c0 + 1.5, S.t) * sm(S.c1 + 1.5, S.c1, S.t);\n  const vig = input.btnPressed && input.btnPressed[0];\n  if ((S.next -= d) \u003c= 0 || vig) {\n    if (S.dances.length \u003c (vig ? 4 : 3)) {\n      const b = newBee(S, ENX + 4 * (rnd() - 0.5), BOT + 1, 0);\n      b.m = HOME;\n      newDance(S, b, vig);\n    }\n    if (!vig) S.next = 5 + 8 * rnd();\n  }\n  // Bees walk in from the sides, or go out at the entrance, to match the knob.\n  let ord = 0;\n  for (const b of S.bees) if (b.m \u003c= FOLLOW) ord++;\n  if ((S.add -= dt) \u003c= 0) {\n    S.add = 0.1;\n    if (ord \u003c want) {\n      const l = rnd() \u003c 0.5;\n      newBee(S, l ? -3 : W + 3, TOP + 8 + (BOT - TOP - 16) * rnd(), l ? PI / 2 : -PI / 2).t = 1.5;\n    } else if (ord > want + 2) {\n      const b = S.bees.find((b) => b.m === CRAWL);\n      if (b) b.m = EXIT;\n    }\n  }\n  step(S, d);\n}\n\n// One bee into the albedo: her body worked out on a 12 x 12 patch first,\n// then her shadow a step down and right, head, thorax, banded abdomen, wings.\nconst PC = new Float32Array(144);\nconst PP = new Uint8Array(144);\nfunction bee(S, b) {\n  const { A, X } = S;\n  const [s, fx, fy, dip, wg] = [b.s, sin(b.h), -cos(b.h), b.m === DIP, b.wag > 0];\n  const wag = wg ? b.wag * sin(b.wp) : b.m === REST ? 0.15 * sin(S.t * 9 + b.ph) : 0;\n  const [bl, th, am] = [wg ? 0.4 : 0, THX[b.tone], AMB[b.tone]];\n  const shim = 0.24 + 0.14 * sin(S.t * 2.3 + b.ph + b.x * 0.3);\n  // A box round her, the whole patch for a dancer and her blur.\n  const ax = wg ? 5 : s * (3.2 * abs(fx) + 1.9 * abs(fy)) + 0.5;\n  const ay = wg ? 5 : s * (3.2 * abs(fy) + 1.9 * abs(fx)) + 0.5;\n  const [x0, y0] = [floor(b.x - ax), floor(b.y - ay)];\n  const nw = min(12, floor(b.x + ax) - x0 + 2);\n  const nh = min(12, floor(b.y + ay) - y0 + 2);\n  for (let j = 0, k = 0; j \u003c nh; j++)\n    for (let i = 0; i \u003c nw; i++, k++) {\n      const X0 = x0 + i + 0.5 - b.x;\n      const Y0 = y0 + j + 0.5 - b.y;\n      const u = (X0 * fx + Y0 * fy) / s;\n      const v = (Y0 * fx - X0 * fy) / s - wag * (0.3 + 0.7 * clamp(-u / 2.5, 0, 1));\n      PC[k] = shape(u, v, s, dip, bl);\n      PP[k] = PART;\n    }\n  for (let j = 0, k = 0; j \u003c nh; j++)\n    for (let i = 0; i \u003c nw; i++, k++) {\n      const px = x0 + i;\n      const py = y0 + j;\n      const c = PC[k];\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const p = py * W + px;\n      const q = p * 3;\n      const sh = i && j ? PC[k - nw - 1] : 0;\n      if (sh > 0) {\n        const f = 1 - 0.7 * sh * (1 - c);\n        A[q] *= f;\n        A[q + 1] *= f;\n        A[q + 2] *= f;\n      }\n      const X0 = px + 0.5 - b.x;\n      const Y0 = py + 0.5 - b.y;\n      const u = (X0 * fx + Y0 * fy) / s;\n      const v = (Y0 * fx - X0 * fy) / s - wag * (0.3 + 0.7 * clamp(-u / 2.5, 0, 1));\n      // A waggling dancer buzzes her wings into a pale blur round her.\n      let wa = wg ? 0.55 * clamp(1.6 - len((u + 0.7) / 1.5, v / 1.7), 0, 1) : 0;\n      if (c \u003c= 0 && wa \u003c= 0) continue;\n      const pt = PP[k];\n      const col = pt === 1 ? HEAD : pt === 2 ? th : null;\n      const st = u > -0.85 ? 1 : u > -1.35 ? 0 : u > -1.9 ? 0.8 : 0;\n      if (u > -2.2 && u \u003c 0.3 && abs(v) > 0.35 && abs(v) \u003c 1.15) wa = max(wa, shim);\n      const a = max(c, wa);\n      for (let n = 0; n \u003c 3; n++) {\n        let e = col ? col[n] : DARK[n] + (am[n] - DARK[n]) * st;\n        e += (WING[n] - e) * wa;\n        A[q + n] += (e - A[q + n]) * a;\n      }\n      X[p] += (1 - X[p]) * a;\n    }\n  // A forager home from the field carries her pollen loads on her hind legs.\n  if (b.D && (b.m === DANCE || b.m === HOME)) {\n    const c = POLLENS[b.D.pc];\n    for (const sd of [-1, 1]) {\n      const px = round(b.x + s * (-0.7 * fx - sd * 1.25 * fy) - 0.5);\n      const py = round(b.y + s * (-0.7 * fy + sd * 1.25 * fx) - 0.5);\n      if (px \u003c 0 || px >= W || py \u003c 0 || py >= H) continue;\n      const q = (py * W + px) * 3;\n      [A[q], A[q + 1], A[q + 2], X[py * W + px]] = [...c, 1];\n    }\n  }\n}\n\n// Coverage of a bee's body at (u along, v across) in body lengths of\n// about five LEDs; PART says which piece.\nlet PART = 0;\nfunction shape(u, v, s, dip, bl) {\n  let c = clamp((1 - len((u + 1.3) / 1.5, v / (1.12 + bl))) * 1.2 * s + 0.5, 0, 1);\n  PART = 3;\n  if (!dip || u \u003c 0.3) {\n    const k = clamp((1 - len((u - 0.5) / 0.8, v)) * 0.9 * s + 0.5, 0, 1);\n    if (k > c) [c, PART] = [k, 2];\n  }\n  if (!dip) {\n    const k = clamp((1 - len((u - 1.65) / 0.6, v / 0.75)) * 0.7 * s + 0.5, 0, 1);\n    if (k > c) [c, PART] = [k, 1];\n  }\n  return c;\n}\n\nconst knee = (c) => (c \u003c 190 ? c : 190 + 65 * (1 - exp(-(c - 190) / 65)));\n\nexport function draw(display, params) {\n  const S = params.s;\n  if (!S || !S.started) return;\n  const { A, X, base, expo, amb, sun, pool, jit } = S;\n  A.set(base);\n  X.set(expo);\n  for (const b of S.bees) if (b.m !== DANCE) bee(S, b);\n  for (const b of S.bees) if (b.m === DANCE) bee(S, b);\n  // The curtain closes on the sun first; the room light goes from daylight\n  // to a warm lamp over the hive by 0.5, and from that to the red lamp.\n  const L = S.light;\n  const [w, rd, pw] = [sm(0, 0.5, L), sm(0.5, 1, L), sm(0.15, 0.6, L)];\n  const dc = [0, 1, 2].map((c) => (DAYC[c] + (WARM[c] - DAYC[c]) * w + (REDC[c] - WARM[c]) * rd) * (1 - 0.1 * w - 0.1 * rd) * 255);\n  const sk = 0.9 * S.cloud * (1 - sm(0, 0.4, L)) * 255;\n  const o = [0, 0, 0];\n  for (let p = 0; p \u003c N; p++) {\n    const q = p * 3;\n    const a = amb[p] + (pool[p] - amb[p]) * pw;\n    const s = sun[p] * X[p] * sk;\n    for (let c = 0; c \u003c 3; c++) o[c] = knee(A[q + c] * (a * dc[c] + s * SUNC[c]) * jit[q + c]) | 0;\n    display.setPixel(p % W, (p / W) | 0, o[0], o[1], o[2]);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Bees=80..240, Sun=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"Daylight at 0, the window's sun lying across the glass in four panes; the curtain closes on the sun, a warm lamp takes over by 0.5, and towards 1 it turns to a red lamp the bees cannot see."},{"name":"Speed","min":0.2,"max":3,"about":"At 2 a waggle run takes about a second and a bee walks about a body length a second; 0.2 is ten times slower."},{"name":"Bees","min":80,"max":240,"about":"Eighty to 240; turned up, more walk in from the sides until they hide the comb."},{"name":"Sun","min":-1,"max":1,"about":"The sun's bearing against the clover field: at 0.06 the runs point nearly straight up, and turning it swings every dance and slides the window's sun across the glass."}],"start":[0,2,80,0.06],"measures":{"motion":0.2561,"detail":0.1412,"edges":0.4465,"complexity":2.5302,"coverage":0.7323,"colour":0.2225,"drift":0.0504},"knobResponse":[0.1684,0.0666,0.1239,0.0576]},{"slug":"warp","title":"Warp","family":"space","round":15,"note":"별 사이를 워프로 날아요. 별은 앞쪽에서 얼음빛 파랑이고, 옆으로 지나가며 자홍 줄로 늘어나요. K1 을 누르면 워프에서 빠져 멈췄다가 흰 빛과 함께 다시 들어가요.","idea":"A ship flies through a starfield at warp: stars stream out of a vanishing point and stretch into streaks as they rush past.","buttons":"K1 tap drops the ship out of warp, lets the stars hang still for a moment and jumps back in.","code":"// ===== Patternflow pattern =====\n// Title:   Warp\n// Family:  space\n// Idea:    A ship flies through a starfield at warp: stars stream out of a vanishing point and stretch into streaks as they rush past.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the warp and hyperspace starfields of Star Trek and Star Wars, and the 3D starfield of the demoscene\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Warp=0.2..4, Stars=420..1400, Steer=-1..1\n//\n// Knob 1: Hue. The tint of the stars: at 0 the light ahead is shifted to ice blue and runs through violet to magenta at the edges; turning it takes the whole scale round the wheel.\n// Knob 2: Warp. How fast the ship flies: at the bottom the stars drift out as points, at 2 a star crosses from the vanishing point to the edge in about a second, at the top the streaks run half the panel.\n// Knob 3: Stars. How many stars fill the space ahead, from 420, where the streaks still have dark between them, to 1400, a dense blizzard.\n// Knob 4: Steer. The ship banks: in the middle it flies straight, turned either way the field rolls and the streaks curl into a spiral, and the vanishing point slides towards the turn.\n// Buttons: K1 tap drops the ship out of warp, lets the stars hang still for a moment and jumps back in.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 1400;\n// Focal length in LEDs: a star one unit off the axis at depth 1 sits F LEDs\n// from the vanishing point.\nconst F = 34;\nconst ZFAR = 10;\nconst ZNEAR = 0.3;\n// The stars fill a tube round the line of flight, RIN to ROUT units out and\n// stretched 1.8 times up and down to fill the tall panel. Nothing flies\n// straight at the ship, so the vanishing point itself stays dark.\nconst RIN = 0.8;\nconst ROUT = 4.5;\n// How long the shutter stays open, in seconds: a streak is where the star\n// has been over this long.\nconst EXPOSE = 0.1;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p;\n  out[1] = k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p;\n  out[2] = k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p;\n}\n\n// A new star somewhere in the tube at depth z, even over its cross-section.\nfunction place(P, i, z) {\n  const r = Math.sqrt(RIN * RIN + Math.random() * (ROUT * ROUT - RIN * RIN));\n  const a = Math.random() * Math.PI * 2;\n  P.x[i] = r * Math.cos(a);\n  P.y[i] = r * Math.sin(a) * 1.8;\n  P.z[i] = z;\n  const m = Math.random();\n  P.b[i] = 0.35 + 0.65 * m * m;\n  P.tint[i] = Math.random() - 0.5;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.x = new Float32Array(MAX);\n  P.y = new Float32Array(MAX);\n  P.z = new Float32Array(MAX);\n  P.b = new Float32Array(MAX);\n  P.tint = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) place(P, i, ZNEAR + Math.random() * (ZFAR - ZNEAR));\n  P.acc = new Float32Array(N * 3);\n  P.lut = new Float32Array(1024);\n  for (let i = 0; i \u003c 1024; i++) P.lut[i] = 255 * (1 - Math.exp(-((i + 0.5) / 256) * 2.2));\n  P.col = [0, 0, 0];\n  P.count = 420;\n  P.v = 0;\n  P.roll = 0;\n  P.hue = 0;\n  P.vx = W / 2;\n  P.vy = H / 2;\n  // The jump K1 sends: seconds since the tap, or -1.\n  P.jump = -1;\n  P.flash = 0;\n}\n\n// How hard the ship flies after a K1 tap, against seconds since the tap: it\n// drops out of warp in 0.6 s, hangs nearly still until 2.4 s, leaps in at\n// three times the knob's warp and settles back by 4 s.\nfunction jumpGain(t) {\n  if (t \u003c 0) return 1;\n  if (t \u003c 0.6) return 1 - 0.97 * Math.sin((t / 0.6) * Math.PI * 0.5);\n  if (t \u003c 2.4) return 0.03;\n  if (t \u003c 2.8) return 0.03 + 2.97 * ((t - 2.4) / 0.4) ** 2;\n  if (t \u003c 4) return 1 + 2 * (1 - (t - 2.8) / 1.2) ** 2;\n  return 1;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 420, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.count = Math.max(1, Math.min(MAX, Math.round(k[2])));\n  const steer = Math.max(-1, Math.min(1, k[3]));\n\n  if (input.btnPressed && input.btnPressed[0] && P.jump \u003c 0) P.jump = 0;\n  let gain = 1;\n  if (P.jump >= 0) {\n    P.jump += dt;\n    gain = jumpGain(P.jump);\n    if (P.jump > 2.4 && P.jump \u003c 2.6) P.flash = 1;\n    if (P.jump >= 4) P.jump = -1;\n  }\n  P.flash = Math.max(0, P.flash - dt * 2.5);\n  // Warp 2 flies 12 units of depth a second.\n  P.v = Math.max(0.2, k[1]) * 6 * gain;\n  // Banking rolls the field up to 2.6 radians a second, and the vanishing\n  // point slides up to 10 LEDs towards the turn.\n  P.roll = steer * 2.6;\n  P.vx += (W / 2 + steer * 10 - P.vx) * Math.min(1, dt * 2);\n  P.vy = H / 2;\n\n  const dz = P.v * dt;\n  const ca = Math.cos(P.roll * dt);\n  const sa = Math.sin(P.roll * dt);\n  for (let i = 0; i \u003c P.count; i++) {\n    const z = P.z[i] - dz;\n    const x = P.x[i] * ca - P.y[i] * sa;\n    const y = P.x[i] * sa + P.y[i] * ca;\n    P.x[i] = x;\n    P.y[i] = y;\n    // A star that passes the ship or leaves the view comes back far ahead.\n    const sx = (F * x) / Math.max(z, 1e-3);\n    const sy = (F * y) / Math.max(z, 1e-3);\n    if (z \u003c ZNEAR || Math.abs(sx) > W * 0.75 + 8 || Math.abs(sy) > H * 0.75 + 8) {\n      place(P, i, ZFAR - Math.random() * 2);\n      continue;\n    }\n    P.z[i] = z;\n  }\n}\n\nfunction add(acc, c, r, w, cr, cg, cb) {\n  if (c \u003c 0 || c >= W || r \u003c 0 || r >= H || w \u003c= 0) return;\n  const o = (r * W + c) * 3;\n  acc[o] += w * cr;\n  acc[o + 1] += w * cg;\n  acc[o + 2] += w * cb;\n}\n\n// A point spread over its 2x2 neighbours, so it glides between LEDs.\nfunction splat(acc, x, y, w, cr, cg, cb) {\n  const fx = x - 0.5;\n  const fy = y - 0.5;\n  const c = Math.floor(fx);\n  const r = Math.floor(fy);\n  const u = fx - c;\n  const v = fy - r;\n  add(acc, c, r, w * (1 - u) * (1 - v), cr, cg, cb);\n  add(acc, c + 1, r, w * u * (1 - v), cr, cg, cb);\n  add(acc, c, r + 1, w * (1 - u) * v, cr, cg, cb);\n  add(acc, c + 1, r + 1, w * u * v, cr, cg, cb);\n}\n\n// A streak from (x0, y0) to (x1, y1), its brightness ramping from i0 to i1.\n// Each LED along the long axis takes the length of the streak inside it, and\n// the light is split between the two LEDs either side of the line across it.\n// The streak lies on the star's own path, so the LEDs it lights only change\n// at its two ends and along the ramp; nothing is counted from frame time.\nfunction streak(acc, x0, y0, x1, y1, i0, i1, cr, cg, cb) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const steep = Math.abs(dy) >= Math.abs(dx);\n  let a0 = steep ? y0 : x0;\n  let a1 = steep ? y1 : x1;\n  let b0 = steep ? x0 : y0;\n  let b1 = steep ? x1 : y1;\n  let j0 = i0;\n  let j1 = i1;\n  if (a1 \u003c a0) {\n    let s = a0;\n    a0 = a1;\n    a1 = s;\n    s = b0;\n    b0 = b1;\n    b1 = s;\n    s = j0;\n    j0 = j1;\n    j1 = s;\n  }\n  const span = a1 - a0;\n  if (span \u003c 1e-4) return;\n  const slope = (b1 - b0) / span;\n  const stretch = Math.sqrt(1 + slope * slope);\n  const lim = steep ? H : W;\n  const m0 = Math.max(0, Math.floor(a0));\n  const m1 = Math.min(lim - 1, Math.floor(a1));\n  for (let m = m0; m \u003c= m1; m++) {\n    const lo = Math.max(a0, m);\n    const hi = Math.min(a1, m + 1);\n    if (hi \u003c= lo) continue;\n    const mid = (lo + hi) * 0.5;\n    const t = (mid - a0) / span;\n    const w = (j0 + (j1 - j0) * t) * (hi - lo) * stretch;\n    const fb = b0 + slope * (mid - a0) - 0.5;\n    const n = Math.floor(fb);\n    const u = fb - n;\n    if (steep) {\n      add(acc, n, m, w * (1 - u), cr, cg, cb);\n      add(acc, n + 1, m, w * u, cr, cg, cb);\n    } else {\n      add(acc, m, n, w * (1 - u), cr, cg, cb);\n      add(acc, m, n + 1, w * u, cr, cg, cb);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const acc = P.acc;\n  acc.fill(0);\n  const col = P.col;\n  const vx = P.vx;\n  const vy = P.vy;\n  const back = P.v * EXPOSE;\n  // The streak is drawn in pieces when the field rolls, so it curls.\n  const turn = P.roll * EXPOSE;\n  const pieces = Math.min(6, 3 + Math.ceil(Math.abs(turn) * 8));\n  for (let i = 0; i \u003c P.count; i++) {\n    const z = P.z[i];\n    const x = P.x[i];\n    const y = P.y[i];\n    const hx = vx + (F * x) / z;\n    const hy = vy + (F * y) / z;\n    // Brighter as it comes closer; a new star far off fades in.\n    const near = Math.min(1.3, (2.6 / z) ** 2);\n    const fade = Math.min(1, (ZFAR - z) / 4);\n    const bright = P.b[i] * near * fade;\n    if (bright \u003c 0.01) continue;\n    // Doppler: straight ahead the light is shifted to blue, and it runs\n    // through violet to magenta 40 LEDs out; the knob turns the whole scale\n    // round the wheel.\n    const ox = hx - vx;\n    const oy = (hy - vy) * 0.6;\n    const off = Math.min(1, Math.sqrt(ox * ox + oy * oy) / 40);\n    hsvInto(col, P.hue + 0.56 + 0.32 * off + 0.05 * P.tint[i], 0.62 + 0.35 * off, 1);\n    // The streak: where the star was over the last EXPOSE seconds.\n    let px = hx;\n    let py = hy;\n    let pi = bright;\n    for (let s = 1; s \u003c= pieces; s++) {\n      const tau = s / pieces;\n      const zt = z + back * tau;\n      const a = -turn * tau;\n      const c = Math.cos(a);\n      const sn = Math.sin(a);\n      const tx = vx + (F * (x * c - y * sn)) / zt;\n      const ty = vy + (F * (x * sn + y * c)) / zt;\n      const ti = bright * (1 - tau) ** 2;\n      streak(acc, tx, ty, px, py, ti, pi, col[0], col[1], col[2]);\n      px = tx;\n      py = ty;\n      pi = ti;\n    }\n    // The star itself, whiter than its streak.\n    splat(acc, hx, hy, bright * 0.9, 0.4 + 0.6 * col[0], 0.4 + 0.6 * col[1], 0.4 + 0.6 * col[2]);\n  }\n\n  // The flash as the ship leaps back into warp.\n  if (P.flash > 0) {\n    const f = P.flash;\n    for (let r = 0; r \u003c H; r++)\n      for (let c = 0; c \u003c W; c++) {\n        const d = Math.hypot(c + 0.5 - vx, r + 0.5 - vy);\n        const g = f * 1.6 * Math.exp(-d / 9);\n        const o = (r * W + c) * 3;\n        acc[o] += g * 0.8;\n        acc[o + 1] += g * 0.9;\n        acc[o + 2] += g;\n      }\n  }\n\n  // A soft shoulder instead of a hard clip where streaks pile up, read from\n  // a table of 1024 steps over 0..4.\n  const lut = P.lut;\n  for (let r = 0; r \u003c H; r++) {\n    for (let c = 0; c \u003c W; c++) {\n      const o = (r * W + c) * 3;\n      display.setPixel(c, r, lut[Math.min(1023, (acc[o] * 256) | 0)], lut[Math.min(1023, (acc[o + 1] * 256) | 0)], lut[Math.min(1023, (acc[o + 2] * 256) | 0)]);\n    }\n  }\n}\n","layer":{"id":"layer-warp","type":"code","name":"warp","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Warp\n// Family:  space\n// Idea:    A ship flies through a starfield at warp: stars stream out of a vanishing point and stretch into streaks as they rush past.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: the warp and hyperspace starfields of Star Trek and Star Wars, and the 3D starfield of the demoscene\n// Round:   15\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Warp=0.2..4, Stars=420..1400, Steer=-1..1\n//\n// Knob 1: Hue. The tint of the stars: at 0 the light ahead is shifted to ice blue and runs through violet to magenta at the edges; turning it takes the whole scale round the wheel.\n// Knob 2: Warp. How fast the ship flies: at the bottom the stars drift out as points, at 2 a star crosses from the vanishing point to the edge in about a second, at the top the streaks run half the panel.\n// Knob 3: Stars. How many stars fill the space ahead, from 420, where the streaks still have dark between them, to 1400, a dense blizzard.\n// Knob 4: Steer. The ship banks: in the middle it flies straight, turned either way the field rolls and the streaks curl into a spiral, and the vanishing point slides towards the turn.\n// Buttons: K1 tap drops the ship out of warp, lets the stars hang still for a moment and jumps back in.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\nconst MAX = 1400;\n// Focal length in LEDs: a star one unit off the axis at depth 1 sits F LEDs\n// from the vanishing point.\nconst F = 34;\nconst ZFAR = 10;\nconst ZNEAR = 0.3;\n// The stars fill a tube round the line of flight, RIN to ROUT units out and\n// stretched 1.8 times up and down to fill the tall panel. Nothing flies\n// straight at the ship, so the vanishing point itself stays dark.\nconst RIN = 0.8;\nconst ROUT = 4.5;\n// How long the shutter stays open, in seconds: a streak is where the star\n// has been over this long.\nconst EXPOSE = 0.1;\n\nfunction hsvInto(out, h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  out[0] = k === 0 || k === 5 ? v : k === 1 ? q : k === 4 ? t : p;\n  out[1] = k === 1 || k === 2 ? v : k === 0 ? t : k === 3 ? q : p;\n  out[2] = k === 3 || k === 4 ? v : k === 2 ? t : k === 5 ? q : p;\n}\n\n// A new star somewhere in the tube at depth z, even over its cross-section.\nfunction place(P, i, z) {\n  const r = Math.sqrt(RIN * RIN + Math.random() * (ROUT * ROUT - RIN * RIN));\n  const a = Math.random() * Math.PI * 2;\n  P.x[i] = r * Math.cos(a);\n  P.y[i] = r * Math.sin(a) * 1.8;\n  P.z[i] = z;\n  const m = Math.random();\n  P.b[i] = 0.35 + 0.65 * m * m;\n  P.tint[i] = Math.random() - 0.5;\n}\n\nexport function setup(params) {\n  const P = params;\n  P.x = new Float32Array(MAX);\n  P.y = new Float32Array(MAX);\n  P.z = new Float32Array(MAX);\n  P.b = new Float32Array(MAX);\n  P.tint = new Float32Array(MAX);\n  for (let i = 0; i \u003c MAX; i++) place(P, i, ZNEAR + Math.random() * (ZFAR - ZNEAR));\n  P.acc = new Float32Array(N * 3);\n  P.lut = new Float32Array(1024);\n  for (let i = 0; i \u003c 1024; i++) P.lut[i] = 255 * (1 - Math.exp(-((i + 0.5) / 256) * 2.2));\n  P.col = [0, 0, 0];\n  P.count = 420;\n  P.v = 0;\n  P.roll = 0;\n  P.hue = 0;\n  P.vx = W / 2;\n  P.vy = H / 2;\n  // The jump K1 sends: seconds since the tap, or -1.\n  P.jump = -1;\n  P.flash = 0;\n}\n\n// How hard the ship flies after a K1 tap, against seconds since the tap: it\n// drops out of warp in 0.6 s, hangs nearly still until 2.4 s, leaps in at\n// three times the knob's warp and settles back by 4 s.\nfunction jumpGain(t) {\n  if (t \u003c 0) return 1;\n  if (t \u003c 0.6) return 1 - 0.97 * Math.sin((t / 0.6) * Math.PI * 0.5);\n  if (t \u003c 2.4) return 0.03;\n  if (t \u003c 2.8) return 0.03 + 2.97 * ((t - 2.4) / 0.4) ** 2;\n  if (t \u003c 4) return 1 + 2 * (1 - (t - 2.8) / 1.2) ** 2;\n  return 1;\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 420, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.hue = k[0];\n  P.count = Math.max(1, Math.min(MAX, Math.round(k[2])));\n  const steer = Math.max(-1, Math.min(1, k[3]));\n\n  if (input.btnPressed && input.btnPressed[0] && P.jump \u003c 0) P.jump = 0;\n  let gain = 1;\n  if (P.jump >= 0) {\n    P.jump += dt;\n    gain = jumpGain(P.jump);\n    if (P.jump > 2.4 && P.jump \u003c 2.6) P.flash = 1;\n    if (P.jump >= 4) P.jump = -1;\n  }\n  P.flash = Math.max(0, P.flash - dt * 2.5);\n  // Warp 2 flies 12 units of depth a second.\n  P.v = Math.max(0.2, k[1]) * 6 * gain;\n  // Banking rolls the field up to 2.6 radians a second, and the vanishing\n  // point slides up to 10 LEDs towards the turn.\n  P.roll = steer * 2.6;\n  P.vx += (W / 2 + steer * 10 - P.vx) * Math.min(1, dt * 2);\n  P.vy = H / 2;\n\n  const dz = P.v * dt;\n  const ca = Math.cos(P.roll * dt);\n  const sa = Math.sin(P.roll * dt);\n  for (let i = 0; i \u003c P.count; i++) {\n    const z = P.z[i] - dz;\n    const x = P.x[i] * ca - P.y[i] * sa;\n    const y = P.x[i] * sa + P.y[i] * ca;\n    P.x[i] = x;\n    P.y[i] = y;\n    // A star that passes the ship or leaves the view comes back far ahead.\n    const sx = (F * x) / Math.max(z, 1e-3);\n    const sy = (F * y) / Math.max(z, 1e-3);\n    if (z \u003c ZNEAR || Math.abs(sx) > W * 0.75 + 8 || Math.abs(sy) > H * 0.75 + 8) {\n      place(P, i, ZFAR - Math.random() * 2);\n      continue;\n    }\n    P.z[i] = z;\n  }\n}\n\nfunction add(acc, c, r, w, cr, cg, cb) {\n  if (c \u003c 0 || c >= W || r \u003c 0 || r >= H || w \u003c= 0) return;\n  const o = (r * W + c) * 3;\n  acc[o] += w * cr;\n  acc[o + 1] += w * cg;\n  acc[o + 2] += w * cb;\n}\n\n// A point spread over its 2x2 neighbours, so it glides between LEDs.\nfunction splat(acc, x, y, w, cr, cg, cb) {\n  const fx = x - 0.5;\n  const fy = y - 0.5;\n  const c = Math.floor(fx);\n  const r = Math.floor(fy);\n  const u = fx - c;\n  const v = fy - r;\n  add(acc, c, r, w * (1 - u) * (1 - v), cr, cg, cb);\n  add(acc, c + 1, r, w * u * (1 - v), cr, cg, cb);\n  add(acc, c, r + 1, w * (1 - u) * v, cr, cg, cb);\n  add(acc, c + 1, r + 1, w * u * v, cr, cg, cb);\n}\n\n// A streak from (x0, y0) to (x1, y1), its brightness ramping from i0 to i1.\n// Each LED along the long axis takes the length of the streak inside it, and\n// the light is split between the two LEDs either side of the line across it.\n// The streak lies on the star's own path, so the LEDs it lights only change\n// at its two ends and along the ramp; nothing is counted from frame time.\nfunction streak(acc, x0, y0, x1, y1, i0, i1, cr, cg, cb) {\n  const dx = x1 - x0;\n  const dy = y1 - y0;\n  const steep = Math.abs(dy) >= Math.abs(dx);\n  let a0 = steep ? y0 : x0;\n  let a1 = steep ? y1 : x1;\n  let b0 = steep ? x0 : y0;\n  let b1 = steep ? x1 : y1;\n  let j0 = i0;\n  let j1 = i1;\n  if (a1 \u003c a0) {\n    let s = a0;\n    a0 = a1;\n    a1 = s;\n    s = b0;\n    b0 = b1;\n    b1 = s;\n    s = j0;\n    j0 = j1;\n    j1 = s;\n  }\n  const span = a1 - a0;\n  if (span \u003c 1e-4) return;\n  const slope = (b1 - b0) / span;\n  const stretch = Math.sqrt(1 + slope * slope);\n  const lim = steep ? H : W;\n  const m0 = Math.max(0, Math.floor(a0));\n  const m1 = Math.min(lim - 1, Math.floor(a1));\n  for (let m = m0; m \u003c= m1; m++) {\n    const lo = Math.max(a0, m);\n    const hi = Math.min(a1, m + 1);\n    if (hi \u003c= lo) continue;\n    const mid = (lo + hi) * 0.5;\n    const t = (mid - a0) / span;\n    const w = (j0 + (j1 - j0) * t) * (hi - lo) * stretch;\n    const fb = b0 + slope * (mid - a0) - 0.5;\n    const n = Math.floor(fb);\n    const u = fb - n;\n    if (steep) {\n      add(acc, n, m, w * (1 - u), cr, cg, cb);\n      add(acc, n + 1, m, w * u, cr, cg, cb);\n    } else {\n      add(acc, m, n, w * (1 - u), cr, cg, cb);\n      add(acc, m, n + 1, w * u, cr, cg, cb);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  const acc = P.acc;\n  acc.fill(0);\n  const col = P.col;\n  const vx = P.vx;\n  const vy = P.vy;\n  const back = P.v * EXPOSE;\n  // The streak is drawn in pieces when the field rolls, so it curls.\n  const turn = P.roll * EXPOSE;\n  const pieces = Math.min(6, 3 + Math.ceil(Math.abs(turn) * 8));\n  for (let i = 0; i \u003c P.count; i++) {\n    const z = P.z[i];\n    const x = P.x[i];\n    const y = P.y[i];\n    const hx = vx + (F * x) / z;\n    const hy = vy + (F * y) / z;\n    // Brighter as it comes closer; a new star far off fades in.\n    const near = Math.min(1.3, (2.6 / z) ** 2);\n    const fade = Math.min(1, (ZFAR - z) / 4);\n    const bright = P.b[i] * near * fade;\n    if (bright \u003c 0.01) continue;\n    // Doppler: straight ahead the light is shifted to blue, and it runs\n    // through violet to magenta 40 LEDs out; the knob turns the whole scale\n    // round the wheel.\n    const ox = hx - vx;\n    const oy = (hy - vy) * 0.6;\n    const off = Math.min(1, Math.sqrt(ox * ox + oy * oy) / 40);\n    hsvInto(col, P.hue + 0.56 + 0.32 * off + 0.05 * P.tint[i], 0.62 + 0.35 * off, 1);\n    // The streak: where the star was over the last EXPOSE seconds.\n    let px = hx;\n    let py = hy;\n    let pi = bright;\n    for (let s = 1; s \u003c= pieces; s++) {\n      const tau = s / pieces;\n      const zt = z + back * tau;\n      const a = -turn * tau;\n      const c = Math.cos(a);\n      const sn = Math.sin(a);\n      const tx = vx + (F * (x * c - y * sn)) / zt;\n      const ty = vy + (F * (x * sn + y * c)) / zt;\n      const ti = bright * (1 - tau) ** 2;\n      streak(acc, tx, ty, px, py, ti, pi, col[0], col[1], col[2]);\n      px = tx;\n      py = ty;\n      pi = ti;\n    }\n    // The star itself, whiter than its streak.\n    splat(acc, hx, hy, bright * 0.9, 0.4 + 0.6 * col[0], 0.4 + 0.6 * col[1], 0.4 + 0.6 * col[2]);\n  }\n\n  // The flash as the ship leaps back into warp.\n  if (P.flash > 0) {\n    const f = P.flash;\n    for (let r = 0; r \u003c H; r++)\n      for (let c = 0; c \u003c W; c++) {\n        const d = Math.hypot(c + 0.5 - vx, r + 0.5 - vy);\n        const g = f * 1.6 * Math.exp(-d / 9);\n        const o = (r * W + c) * 3;\n        acc[o] += g * 0.8;\n        acc[o + 1] += g * 0.9;\n        acc[o + 2] += g;\n      }\n  }\n\n  // A soft shoulder instead of a hard clip where streaks pile up, read from\n  // a table of 1024 steps over 0..4.\n  const lut = P.lut;\n  for (let r = 0; r \u003c H; r++) {\n    for (let c = 0; c \u003c W; c++) {\n      const o = (r * W + c) * 3;\n      display.setPixel(c, r, lut[Math.min(1023, (acc[o] * 256) | 0)], lut[Math.min(1023, (acc[o + 1] * 256) | 0)], lut[Math.min(1023, (acc[o + 2] * 256) | 0)]);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Warp=0.2..4, Stars=420..1400, Steer=-1..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The tint of the stars: at 0 the light ahead is shifted to ice blue and runs through violet to magenta at the edges; turning it takes the whole scale round the wheel."},{"name":"Warp","min":0.2,"max":4,"about":"How fast the ship flies: at the bottom the stars drift out as points, at 2 a star crosses from the vanishing point to the edge in about a second, at the top the streaks run half the panel."},{"name":"Stars","min":420,"max":1400,"about":"How many stars fill the space ahead, from 420, where the streaks still have dark between them, to 1400, a dense blizzard."},{"name":"Steer","min":-1,"max":1,"about":"The ship banks: in the middle it flies straight, turned either way the field rolls and the streaks curl into a spiral, and the vanishing point slides towards the turn."}],"start":[0,2,420,0.06],"measures":{"motion":2.077,"detail":0.0623,"edges":0.3496,"complexity":0.991,"coverage":0.2025,"colour":0.1354,"drift":0.0642},"knobResponse":[0.0455,0.0994,0.1476,0.0712]},{"slug":"waterfall","title":"Waterfall","family":"weather","round":14,"note":"강이 벼랑 끝을 넘어 패널 높이를 다 떨어져 소에 닿아요. 벼랑 끝에서 청록 유리 같던 물은 떨어지며 하얘지고, 소에서 오르는 안개에 무지개 한 토막이 서요. K3 바람을 끝까지 돌리면 돌풍이 물줄기를 찢어 물보라로 날려 올리고, K1 을 누르면 통나무 하나가 벼랑 끝을 넘어와요.","idea":"A river goes over a cliff and falls the whole height of the panel into a plunge pool, glassy where it leaves the lip and white by the time it lands, with spray and mist rising off the pool.","buttons":"K1 tap sends a log over the lip; it tumbles down, goes under in the pool and comes up drifting away. One also comes by itself now and then.","code":"// ===== Patternflow pattern =====\n// Title:   Waterfall\n// Family:  weather\n// Idea:    A river goes over a cliff and falls the whole height of the panel into a plunge pool, glassy where it leaves the lip and white by the time it lands, with spray and mist rising off the pool.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 12\n// Round:   14\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wind=-1..1, Spate=0..1\n//\n// Knob 1: Hue. The colour of the water, the pool and the mist, starting from glacier turquoise; about halfway round it runs red, like Blood Falls in Antarctica.\n// Knob 2: Speed. How fast the world runs: at 2 the water takes 1.6 seconds from the lip to the pool, at the top about 1.1, at the bottom 16, in slow motion.\n// Knob 3: Wind. At 0 the water falls straight; turned either way the wind bends the curtain more the further it has fallen and carries the mist off that way, and near the ends a gale catches the water before it lands and blows it back up as spray, as Kinder Downfall does in a westerly.\n// Knob 4: Spate. How much water the river brings: from a dry-season fall that breaks into threads to a flood nearly as wide as the panel, with spray and mist to match.\n// Buttons: K1 tap sends a log over the lip; it tumbles down, goes under in the pool and comes up drifting away. One also comes by itself now and then.\n\nconst W = 64;\nconst H = 128;\n// The lip the river goes over, the far edge of the pool, and the row where the water lands.\nconst LIP = 21;\nconst POOL = 110;\nconst HIT = 115;\n// Free fall in panel units: rows per second squared, and the speed water leaves the lip at.\n// 94 rows take 1.6 seconds at Speed 2.\nconst G = 59;\nconst V0 = 10;\nconst SPRAY = 220;\n// The value-noise lattice wraps every 256 cells.\nconst LAT = 256;\n// exp(-z) for z from 0 to 8 in steps of 1/32, for the mist's bell curve.\nconst EXP = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) EXP[i] = Math.exp(-i / 32);\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  return [\n    (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255,\n    (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255,\n    (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255,\n  ];\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// The fall's centre column at the lip.\nconst CX = 30;\n\nexport function setup(params) {\n  const lat = new Float32Array(LAT * LAT);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  params.lat = lat;\n  params.bg = new Float32Array(W * H * 3);\n  params.buf = new Float32Array(W * H * 3);\n  // Boulders in front of the pool: their colour, and 1 where they stand.\n  params.front = new Float32Array(W * H * 3);\n  params.frontA = new Float32Array(W * H);\n  params.px = new Float32Array(SPRAY);\n  params.py = new Float32Array(SPRAY);\n  params.pvx = new Float32Array(SPRAY);\n  params.pvy = new Float32Array(SPRAY);\n  params.pfloor = new Float32Array(SPRAY);\n  params.pgrav = new Float32Array(SPRAY);\n  params.page = new Float32Array(SPRAY).fill(9);\n  params.pnext = 0;\n  params.ts = 0;\n  params.started = false;\n  params.spawnDebt = 0;\n  params.galeDebt = 0;\n  params.log = { on: false, t0: 0, x: 0, y: 0, ang: 0, spin: 0, phase: 0, age: 0, drift: 0 };\n  // The first log comes early so the fall shows what it does; then one in a while.\n  params.nextLog = 2.4;\n  params.pal = new Float32Array(9 * 4 * 3);\n  params.dens = new Float32Array(W * H);\n  bakeScene(params);\n}\n\nfunction bakeScene(params) {\n  const bg = params.bg;\n  const lat = params.lat;\n  // Sky: pale at the top of the gorge, a little deeper towards the far ridge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = hsv(0.58, 0.28 + y * 0.006, 0.78 - y * 0.012);\n      const o = (y * W + x) * 3;\n      bg[o] = c[0];\n      bg[o + 1] = c[1];\n      bg[o + 2] = c[2];\n    }\n  // The far ridge, blue with distance.\n  for (let x = 0; x \u003c W; x++) {\n    const top = Math.round(9 + 3 * vn(lat, x / 9, 3.5) + 1.5 * vn(lat, x / 3.5, 9.5));\n    for (let y = top; y \u003c LIP; y++) {\n      const c = hsv(0.5, 0.45, 0.3 + 0.04 * vn(lat, x / 2, y / 2));\n      put(bg, x, y, c[0], c[1], c[2]);\n    }\n  }\n  // The near banks of the river, grass running back to the ridge. The river itself is drawn\n  // every frame, as wide as Spate makes it.\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 13; y \u003c LIP; y++) {\n      const g = 0.13 + 0.015 * (y - 13) + 0.09 * vn(lat, x / 2, y / 1.2 + 40);\n      const c = hsv(0.28, 0.68, g);\n      put(bg, x, y, c[0], c[1], c[2]);\n    }\n\n  // The cliff: beds of rock laid flat, each its own shade, lit on the top and undercut below.\n  const edges = [LIP];\n  while (edges[edges.length - 1] \u003c H + 12) edges.push(edges[edges.length - 1] + 5 + Math.floor(Math.random() * 8));\n  const bedV = edges.map(() => 0.12 + Math.random() * 0.09);\n  const bedH = edges.map(() => (Math.random() \u003c 0.6 ? 0.07 : 0.58));\n  const bedS = edges.map((_, i) => (bedH[i] \u003c 0.3 ? 0.3 : 0.14));\n  for (let y = LIP; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const yy = y + 2.5 * Math.sin(x * 0.07 + 0.5) + 5 * (vn(lat, x / 11, 3.3 + y / 40) - 0.5);\n      let b = 0;\n      while (b \u003c edges.length - 2 && yy >= edges[b + 1]) b++;\n      const thick = edges[b + 1] - edges[b];\n      const frac = (yy - edges[b]) / thick;\n      let v = bedV[b] + (vn(lat, x / 2.5 + b * 17, y / 2.5) - 0.5) * 0.07;\n      if (frac \u003c 0.18) v += 0.06;\n      else if (frac > 0.8) v -= 0.07;\n      // Joints: a dark crack here and there through a bed.\n      if (hash(x * 7 + b, 91) \u003c 0.012 && frac > 0.2 && frac \u003c 0.8) v *= 0.55;\n      // The gorge is lit from above: higher beds catch more sky.\n      v *= 1.25 - 0.45 * (y - LIP) / (H - LIP);\n      let c = hsv(bedH[b], bedS[b], Math.max(0.05, v));\n      // Moss on the tops of the beds, thicker low down where the spray reaches.\n      const wet = Math.max(0, (y - 40) / 80);\n      if (frac \u003c 0.35 && vn(lat, x / 4 + b * 5, y / 2.5 + 80) > 0.68 - wet * 0.22) c = hsv(0.27, 0.7, 0.2 + 0.12 * vn(lat, x / 1.7, y / 1.7 + 120));\n      // The lip overhangs a little, so the rock just under it is in shadow.\n      const under = y - LIP \u003c 3 ? 0.5 + 0.17 * (y - LIP) : 1;\n      put(bg, x, y, c[0] * under, c[1] * under, c[2] * under);\n    }\n\n  // Trees lean over the top of the gorge from both sides.\n  const crowns = [\n    [3, 4, 9],\n    [12, -1, 7],\n    [-2, 19, 8],\n    [8, 14, 6],\n    [57, 3, 8],\n    [49, 0, 6],\n    [64, 17, 9],\n    [55, 13, 6],\n  ];\n  for (const [cx, cy, r] of crowns)\n    for (let y = Math.floor(cy - r); y \u003c= cy + r; y++)\n      for (let x = Math.floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n        const dx = x - cx;\n        const dy = (y - cy) * 1.1;\n        const d = Math.sqrt(dx * dx + dy * dy) / r;\n        if (d > 0.82 + 0.3 * vn(lat, x / 2, y / 2 + 160)) continue;\n        // Lit from above: the upper leaves are lighter.\n        const leaf = vn(lat, x / 1.6 + 30, y / 1.6 + 30);\n        const v = 0.17 + 0.16 * leaf + 0.08 * Math.max(0, -dy / r);\n        const c = hsv(0.29 - 0.04 * leaf, 0.72, v);\n        put(bg, x, y, c[0], c[1], c[2]);\n      }\n\n  // Boulders round the pool, in front of the water.\n  const front = params.front;\n  const fa = params.frontA;\n  const stones = [\n    [4, 124, 11, 9],\n    [16, 128, 7, 5],\n    [59, 125, 10, 8],\n    [47, 129, 6, 5],\n  ];\n  for (const [cx, cy, rx, ry] of stones)\n    for (let y = Math.floor(cy - ry); y \u003c H; y++)\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0) continue;\n        const dx = (x - cx) / rx;\n        const dy = (y - cy) / ry;\n        const d = dx * dx + dy * dy;\n        if (d > 1 + 0.25 * (vn(lat, x / 2, y / 2 + 200) - 0.5)) continue;\n        const top = -dy;\n        let v = 0.12 + 0.12 * Math.max(0, top) + 0.05 * vn(lat, x / 1.8, y / 1.8 + 220);\n        let c = hsv(0.08, 0.22, v);\n        // Moss on the tops, and the waterline dark and wet.\n        if (top > 0.45 && vn(lat, x / 2.5, y / 2.5 + 240) > 0.45) c = hsv(0.27, 0.7, 0.22 + 0.1 * top);\n        if (y > cy + ry * 0.55) {\n          v *= 0.6;\n          c = hsv(0.55, 0.3, v);\n        }\n        const o = (y * W + x) * 3;\n        front[o] = c[0];\n        front[o + 1] = c[1];\n        front[o + 2] = c[2];\n        fa[y * W + x] = 1;\n      }\n}\n\nfunction spawnSpray(params, x, y, vx, vy, grav, floor) {\n  const s = params.pnext;\n  params.pnext = (s + 1) % SPRAY;\n  params.px[s] = x;\n  params.py[s] = y;\n  params.pvx[s] = vx;\n  params.pvy[s] = vy;\n  params.pgrav[s] = grav;\n  params.pfloor[s] = floor;\n  params.page[s] = 0;\n}\n\nfunction stepSpray(params, dts) {\n  for (let i = 0; i \u003c SPRAY; i++) {\n    if (params.page[i] > 3) continue;\n    params.page[i] += dts;\n    params.pvy[i] += G * params.pgrav[i] * dts;\n    params.px[i] += params.pvx[i] * dts;\n    params.py[i] += params.pvy[i] * dts;\n    if (params.py[i] > params.pfloor[i] && params.pvy[i] > 0) params.page[i] = 9;\n  }\n}\n\n// Time for the water to fall d rows from the lip, in world seconds.\nfunction flight(d) {\n  return (-V0 + Math.sqrt(V0 * V0 + 2 * G * d)) / G;\n}\n\n// How much wider the water is d rows below the lip.\nfunction spreadAt(d) {\n  const f = d / 94;\n  return 1 + 0.35 * f + 0.35 * f * f * f;\n}\n\n// How far the wind has carried water that left the lip at u and has been falling tau seconds.\nfunction blown(params, u, tau) {\n  const gust = 1 + 0.9 * (vn(params.lat, u * 0.7, 333.3) - 0.5);\n  return 0.5 * params.wind * 24 * gust * tau * tau;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const speed = Math.max(0.05, k[1]);\n  const dts = (dt * speed) / 2;\n  params.ts += dts;\n  const ts = params.ts;\n  params.hue = k[0] + 0.48;\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const spate = Math.max(0, Math.min(1, k[3]));\n  params.wind = wind;\n  params.spate = spate;\n  // Past about half way the wind is a gale and starts tearing the curtain apart.\n  const gale = Math.max(0, Math.min(1, (Math.abs(wind) - 0.5) / 0.45));\n  params.gale = gale;\n  params.breakAt = 94 * (1 - 0.72 * gale);\n  params.half0 = 6.5 + 14.5 * Math.pow(spate, 0.6);\n  params.hEnd = params.half0 * spreadAt(HIT - LIP);\n  // Columns break into separate threads when the river is low.\n  const low = Math.max(0, 1 - spate / 0.3);\n  params.gap = 0.75 * low * low;\n  params.hitX = CX + blown(params, ts - flight(HIT - LIP), flight(HIT - LIP));\n\n  const rate = (70 + 200 * spate) * (1 - 0.7 * gale);\n  if (!params.started) {\n    params.started = true;\n    // Two seconds of spray, so the pool opens already throwing it.\n    for (let n = 0; n \u003c 60; n++) {\n      spray(params, rate, 1 / 30);\n      stepSpray(params, 1 / 30);\n    }\n  }\n  spray(params, rate, dts);\n  stepSpray(params, dts);\n\n  const log = params.log;\n  params.nextLog -= dts;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if ((pressed || params.nextLog \u003c= 0) && !(log.on && log.phase === 0)) {\n    log.on = true;\n    log.phase = 0;\n    log.t0 = ts;\n    log.ang = Math.random() * Math.PI;\n    log.spin = (Math.random() \u003c 0.5 ? -1 : 1) * (2 + Math.random() * 2.5);\n    log.off = (Math.random() - 0.5) * params.half0;\n    params.nextLog = 20 + Math.random() * 25;\n  }\n  if (log.on) stepLog(params, log, dts);\n}\n\nfunction spray(params, rate, dts) {\n  const wind = params.wind;\n  params.spawnDebt += rate * dts;\n  while (params.spawnDebt >= 1) {\n    params.spawnDebt -= 1;\n    const x = params.hitX + (Math.random() - 0.5) * 1.8 * params.hEnd;\n    spawnSpray(params, x, HIT - 1, (Math.random() - 0.5) * (40 + 30 * params.spate) + wind * 25, -(12 + Math.random() * 40), 1.6, HIT + 1);\n  }\n  // In a gale the torn curtain goes up and away downwind as spray.\n  const gale = params.gale;\n  if (gale > 0) {\n    params.galeDebt += gale * (90 + 120 * params.spate) * dts;\n    while (params.galeDebt >= 1) {\n      params.galeDebt -= 1;\n      const d = params.breakAt + Math.random() * (HIT - LIP - params.breakAt);\n      const tau = flight(d);\n      const x = CX + blown(params, params.ts - tau, tau) + (Math.random() - 0.5) * 2 * params.half0 * spreadAt(d);\n      spawnSpray(params, x, LIP + d, wind * (35 + Math.random() * 45), -(8 + Math.random() * 30) * gale, 0.35, H + 4);\n    }\n  }\n}\n\nfunction stepLog(params, log, dts) {\n  if (log.phase === 0) {\n    log.ang += log.spin * dts;\n    const tau = params.ts - log.t0;\n    const d = V0 * tau + 0.5 * G * tau * tau;\n    log.x = CX + log.off * spreadAt(d) + blown(params, log.t0, tau);\n    log.y = LIP + d;\n    if (log.y >= HIT) {\n      for (let n = 0; n \u003c 34; n++) spawnSpray(params, log.x + (Math.random() - 0.5) * 6, HIT - 1, (Math.random() - 0.5) * 70, -(12 + Math.random() * 40) * 1.5, 1.6, HIT + 1);\n      log.phase = 1;\n      log.age = 0;\n      log.drift = log.x \u003c W / 2 ? -1 : 1;\n      log.y = HIT + 3;\n    }\n  } else {\n    // Under for a moment, then up and away on the current.\n    log.age += dts;\n    log.ang -= Math.sin(log.ang) * Math.cos(log.ang) * dts * 2;\n    log.x += log.drift * (3 + 6 * Math.min(1, log.age / 2)) * dts;\n    log.y = HIT + 4 + Math.min(1, log.age / 2) * 5 + Math.sin(log.age * 3) * 0.6;\n    if (log.x \u003c -8 || log.x > W + 8) log.on = false;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const lat = params.lat;\n  const ts = params.ts;\n  const hue = params.hue;\n  const spate = params.spate;\n  const wind = params.wind;\n  const gale = params.gale;\n  buf.set(params.bg);\n\n  // Water colours: nine levels of brightness by four of saturation.\n  const pal = params.pal;\n  const sats = [0.05, 0.22, 0.42, 0.62];\n  for (let l = 0; l \u003c= 8; l++)\n    for (let s = 0; s \u003c 4; s++) {\n      const c = hsv(hue + (s === 3 ? 0.02 : 0), sats[s], l / 8);\n      const o = (l * 4 + s) * 3;\n      pal[o] = c[0];\n      pal[o + 1] = c[1];\n      pal[o + 2] = c[2];\n    }\n\n  const half0 = params.half0;\n  const gap = params.gap;\n\n  // The river upstream, flowing towards the lip.\n  for (let y = 13; y \u003c LIP; y++) {\n    // Narrower as it runs back towards the ridge.\n    const z = 1 / (0.72 + (0.28 * (y - 13)) / (LIP - 13));\n    const wide = (half0 + 1) / z;\n    for (let x = Math.ceil(CX - wide); x \u003c CX + wide; x++) {\n      const n = vn(lat, ((x - CX) * z) / 2.2 + 300, (y - 13) * z * 0.5 - ts * 2.2);\n      const far = y \u003c 16 ? 1 : 0;\n      const l = (n > 0.7 ? 6 : n > 0.42 ? 4 : 3) - far;\n      const o = (l * 4 + 2) * 3;\n      put(buf, x, y, pal[o], pal[o + 1], pal[o + 2]);\n    }\n  }\n\n  // The falling water. Each pixel reads its texture at the moment that water left the lip,\n  // so a clump keeps its place in the texture and stretches as it speeds up.\n  const breakAt = params.breakAt;\n  for (let y = LIP; y \u003c= HIT; y++) {\n    const d = y - LIP + 0.5;\n    const dn = d / 94;\n    const tau = flight(d);\n    const u = ts - tau;\n    const half = half0 * spreadAt(d);\n    const c = CX + Math.sin(u * 0.9) * 0.8 * dn + blown(params, u, tau);\n    const aer = Math.min(1, d / 75);\n    // Below the break a gale has torn this much of the water away.\n    const torn = d > breakAt ? Math.min(1, (d - breakAt) / 26) * gale * 0.85 : 0;\n    const reach = half + 3 + 6 * dn;\n    const lo = Math.max(0, Math.floor(c - reach));\n    const hi = Math.min(W - 1, Math.ceil(c + reach));\n    // Ragged edges: lumps of water bulge out of each side and travel down with it.\n    const eL = (vn(lat, u * 5 + 17, 11) - 0.5) * (1.5 + 7 * dn);\n    const eR = (vn(lat, u * 5 + 83, 29) - 0.5) * (1.5 + 7 * dn);\n    for (let x = lo; x \u003c= hi; x++) {\n      const off = x + 0.5 - c;\n      const inside = half + (off \u003c 0 ? eL : eR) - Math.abs(off);\n      const o = (y * W + x) * 3;\n      // The rock behind and beside the water is wet and dark.\n      if (inside > -2.5) {\n        buf[o] *= 0.62;\n        buf[o + 1] *= 0.66;\n        buf[o + 2] *= 0.75;\n      }\n      const xr = off / half;\n      const s = xr * half0;\n      if (inside \u003c= 0) {\n        // Drops flung off the edge.\n        if (inside > -2 - 5 * dn && vn(lat, x * 1.37 + 500, u * 13) > 0.8 - 0.1 * dn) {\n          const p = (5 * 4 + 1) * 3;\n          buf[o] = pal[p];\n          buf[o + 1] = pal[p + 1];\n          buf[o + 2] = pal[p + 2];\n        }\n        continue;\n      }\n      const thr = gap * (0.3 + 0.75 * Math.abs(xr));\n      if (thr > 0 && vn(lat, s * 0.45 + 100.5, u * 0.5) \u003c thr) continue;\n      const n1 = vn(lat, s * 0.62 + 3.1, u * 8);\n      const n2 = vn(lat, s * 0.22 + 51.7, u * 2.6);\n      if (torn > 0 && vn(lat, s * 0.8 + 610, u * 4) \u003c torn) continue;\n      let l;\n      let sat;\n      if (n1 * 0.55 + n2 * 0.45 > 0.8 - 0.24 * aer - 0.3 * torn) {\n        l = 7 + (n1 > 0.7 ? 1 : 0);\n        sat = 0;\n      } else {\n        let v = 0.34 + 0.34 * aer + (n1 - 0.5) * (0.35 + 0.2 * aer) + (n2 - 0.5) * 0.5;\n        if (inside \u003c 1) v *= 0.8;\n        l = Math.max(1, Math.min(7, Math.round(v * 8)));\n        // Ragged, so the water pales without a seam across it.\n        const a = aer + (n1 - 0.5) * 0.5;\n        sat = a \u003c 0.35 ? 3 : a \u003c 0.7 ? 2 : 1;\n      }\n      // The curl over the lip catches the sky.\n      if (d \u003c 1.2) {\n        l = 7;\n        sat = 1;\n      } else if (d \u003c 3) {\n        l = Math.max(l, 6);\n        sat = 2;\n      }\n      const p = (l * 4 + sat) * 3;\n      buf[o] = pal[p];\n      buf[o + 1] = pal[p + 1];\n      buf[o + 2] = pal[p + 2];\n    }\n  }\n\n  // The plunge pool: rings running out from where the water lands, foam boiling over it.\n  // What a gale lets through still lands, and churns less.\n  const ci = Math.max(4, Math.min(W - 4, params.hitX));\n  const hEnd = params.hEnd;\n  const boil = 1 - 0.6 * gale;\n  for (let y = POOL; y \u003c H; y++) {\n    const q = (y - POOL) / (H - 1 - POOL);\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - ci;\n      const dy = (y - HIT) * 2.6;\n      const rho = Math.sqrt(dx * dx + dy * dy);\n      let l = 1 + (q > 0.5 ? 1 : 0);\n      let sat = 3;\n      const w = Math.sin(rho * 0.55 - ts * 6 + vn(lat, x / 6 + 900, y / 2) * 2.5);\n      if (w > 0.7 && vn(lat, x / 3 + 950, y + ts * 0.5) > 0.35) l += rho \u003c 40 ? 2 : 1;\n      const churn = Math.exp(-rho / (hEnd * 0.9 + 5)) * (0.5 + 0.9 * vn(lat, dx / 2.5 + 7, ts * 3 + y * 0.7));\n      const scum = Math.exp(-rho / 34) * vn(lat, rho / 3 - ts * 2.2, (dx / (rho + 1)) * 5 + (dy \u003c 0 ? 20 : 40)) * 0.75;\n      const f = (churn + scum) * boil;\n      if (f > 0.62) {\n        l = 8;\n        sat = 0;\n      } else if (f > 0.47) {\n        l = 5;\n        sat = 1;\n      }\n      const p = (l * 4 + sat) * 3;\n      const o = (y * W + x) * 3;\n      buf[o] = pal[p];\n      buf[o + 1] = pal[p + 1];\n      buf[o + 2] = pal[p + 2];\n    }\n  }\n\n  // The log goes in front of the water and behind the boulders and the mist.\n  const log = params.log;\n  if (log.on && !(log.phase === 1 && log.age \u003c 0.7)) drawLog(buf, log);\n\n  const front = params.front;\n  const fa = params.frontA;\n  for (let p = 0; p \u003c W * H; p++) {\n    if (fa[p] === 0) continue;\n    const o = p * 3;\n    buf[o] = front[o];\n    buf[o + 1] = front[o + 1];\n    buf[o + 2] = front[o + 2];\n  }\n\n  {\n    const p = (8 * 4 + 1) * 3;\n    for (let i = 0; i \u003c SPRAY; i++) {\n      if (params.page[i] > 3) continue;\n      put(buf, Math.round(params.px[i]), Math.round(params.py[i]), pal[p], pal[p + 1], pal[p + 2]);\n    }\n  }\n\n  // Mist rises off the pool and leans downwind. The sun is behind us, so a piece of\n  // rainbow stands in it.\n  const dens = params.dens;\n  const yTop = HIT - 80;\n  dens.fill(0, yTop * W);\n  const hs = 24 + 24 * spate + 20 * gale;\n  for (let y = Math.max(yTop, Math.floor(HIT - 4.6 * hs)); y \u003c H; y++) {\n    const h = HIT - y;\n    const fh = h > 0 ? Math.exp(-h / hs) : Math.exp(h / 5);\n    const sig = hEnd + 4 + Math.max(0, h) * 0.5;\n    const inv = 1 / (2 * sig * sig);\n    const mx = ci + wind * Math.max(0, h) * 0.9;\n    const xr = Math.ceil(sig * 2.6);\n    const row = y * W;\n    for (let x = Math.max(0, Math.floor(mx - xr)); x \u003c= Math.min(W - 1, Math.ceil(mx + xr)); x++) {\n      const dx = x + 0.5 - mx;\n      const z = dx * dx * inv * 32;\n      if (z \u003c 256) dens[row + x] += fh * EXP[z | 0];\n    }\n  }\n  const mist = hsv(hue, 0.1, 0.9);\n  const amt = 0.75 + 0.8 * spate;\n  const rcx = ci - 4;\n  const rcy = HIT + 36;\n  const R = 48;\n  for (let y = yTop; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const ds = dens[y * W + x];\n      if (ds \u003c 0.02) continue;\n      const n = vn(lat, x / 11 + 40 - ts * wind * 3, (y + ts * 7) / 11);\n      let d = ds * (0.25 + 1.3 * (n - 0.3)) * amt;\n      if (d \u003c= 0.06) continue;\n      // Four steps of mist: finer steps flicker as it rises.\n      d = Math.min(0.75, Math.round(d * 4) / 4);\n      const o = (y * W + x) * 3;\n      let mr = mist[0];\n      let mg = mist[1];\n      let mb = mist[2];\n      const rx = x + 0.5 - rcx;\n      const ry = y + 0.5 - rcy;\n      const rr = Math.sqrt(rx * rx + ry * ry) - R;\n      if (rr > -4 && rr \u003c 4 && ry \u003c 0) {\n        // Violet inside, red outside, as the primary bow has it.\n        const band = hsv(0.76 * (1 - (rr + 4) / 8), 0.85, 1);\n        mr = band[0];\n        mg = band[1];\n        mb = band[2];\n        d = Math.min(0.5, d);\n      }\n      buf[o] += (mr - buf[o]) * d;\n      buf[o + 1] += (mg - buf[o + 1]) * d;\n      buf[o + 2] += (mb - buf[o + 2]) * d;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n\nfunction drawLog(buf, log) {\n  const ca = Math.cos(log.ang);\n  const sa = Math.sin(log.ang);\n  const len = 5;\n  for (let s = -len; s \u003c= len; s += 0.5) {\n    const x = log.x + ca * s;\n    const y = log.y + sa * s;\n    const end = Math.abs(s) > len - 0.6;\n    for (let w = 0; w \u003c= 1; w++) {\n      const px = Math.round(x - sa * w);\n      const py = Math.round(y + ca * w);\n      if (end) put(buf, px, py, 215, 170, 105);\n      else put(buf, px, py, w === 0 ? 120 : 82, w === 0 ? 72 : 48, w === 0 ? 34 : 22);\n    }\n  }\n}\n","layer":{"id":"layer-waterfall","type":"code","name":"waterfall","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Waterfall\n// Family:  weather\n// Idea:    A river goes over a cliff and falls the whole height of the panel into a plunge pool, glassy where it leaves the lip and white by the time it lands, with spray and mist rising off the pool.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 12\n// Round:   14\n// ===============================\n// @matrix 64x128\n// @knobs Hue=0..1, Speed=0.2..3, Wind=-1..1, Spate=0..1\n//\n// Knob 1: Hue. The colour of the water, the pool and the mist, starting from glacier turquoise; about halfway round it runs red, like Blood Falls in Antarctica.\n// Knob 2: Speed. How fast the world runs: at 2 the water takes 1.6 seconds from the lip to the pool, at the top about 1.1, at the bottom 16, in slow motion.\n// Knob 3: Wind. At 0 the water falls straight; turned either way the wind bends the curtain more the further it has fallen and carries the mist off that way, and near the ends a gale catches the water before it lands and blows it back up as spray, as Kinder Downfall does in a westerly.\n// Knob 4: Spate. How much water the river brings: from a dry-season fall that breaks into threads to a flood nearly as wide as the panel, with spray and mist to match.\n// Buttons: K1 tap sends a log over the lip; it tumbles down, goes under in the pool and comes up drifting away. One also comes by itself now and then.\n\nconst W = 64;\nconst H = 128;\n// The lip the river goes over, the far edge of the pool, and the row where the water lands.\nconst LIP = 21;\nconst POOL = 110;\nconst HIT = 115;\n// Free fall in panel units: rows per second squared, and the speed water leaves the lip at.\n// 94 rows take 1.6 seconds at Speed 2.\nconst G = 59;\nconst V0 = 10;\nconst SPRAY = 220;\n// The value-noise lattice wraps every 256 cells.\nconst LAT = 256;\n// exp(-z) for z from 0 to 8 in steps of 1/32, for the mist's bell curve.\nconst EXP = new Float32Array(257);\nfor (let i = 0; i \u003c= 256; i++) EXP[i] = Math.exp(-i / 32);\n\nfunction hash(a, b) {\n  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction vn(lat, x, y) {\n  const ix = Math.floor(x);\n  const iy = Math.floor(y);\n  const fx = x - ix;\n  const fy = y - iy;\n  const ux = fx * fx * (3 - 2 * fx);\n  const uy = fy * fy * (3 - 2 * fy);\n  const x0 = ix & 255;\n  const x1 = (ix + 1) & 255;\n  const y0 = (iy & 255) \u003c\u003c 8;\n  const y1 = ((iy + 1) & 255) \u003c\u003c 8;\n  const a = lat[y0 + x0] + (lat[y0 + x1] - lat[y0 + x0]) * ux;\n  const b = lat[y1 + x0] + (lat[y1 + x1] - lat[y1 + x0]) * ux;\n  return a + (b - a) * uy;\n}\n\nfunction hsv(h, s, v) {\n  h = h - Math.floor(h);\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const k = i % 6;\n  return [\n    (k === 0 ? v : k === 1 ? q : k === 2 ? p : k === 3 ? p : k === 4 ? t : v) * 255,\n    (k === 0 ? t : k === 1 ? v : k === 2 ? v : k === 3 ? q : k === 4 ? p : p) * 255,\n    (k === 0 ? p : k === 1 ? p : k === 2 ? t : k === 3 ? v : k === 4 ? v : q) * 255,\n  ];\n}\n\nfunction put(buf, x, y, r, g, b) {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  buf[o] = r;\n  buf[o + 1] = g;\n  buf[o + 2] = b;\n}\n\n// The fall's centre column at the lip.\nconst CX = 30;\n\nexport function setup(params) {\n  const lat = new Float32Array(LAT * LAT);\n  for (let i = 0; i \u003c lat.length; i++) lat[i] = Math.random();\n  params.lat = lat;\n  params.bg = new Float32Array(W * H * 3);\n  params.buf = new Float32Array(W * H * 3);\n  // Boulders in front of the pool: their colour, and 1 where they stand.\n  params.front = new Float32Array(W * H * 3);\n  params.frontA = new Float32Array(W * H);\n  params.px = new Float32Array(SPRAY);\n  params.py = new Float32Array(SPRAY);\n  params.pvx = new Float32Array(SPRAY);\n  params.pvy = new Float32Array(SPRAY);\n  params.pfloor = new Float32Array(SPRAY);\n  params.pgrav = new Float32Array(SPRAY);\n  params.page = new Float32Array(SPRAY).fill(9);\n  params.pnext = 0;\n  params.ts = 0;\n  params.started = false;\n  params.spawnDebt = 0;\n  params.galeDebt = 0;\n  params.log = { on: false, t0: 0, x: 0, y: 0, ang: 0, spin: 0, phase: 0, age: 0, drift: 0 };\n  // The first log comes early so the fall shows what it does; then one in a while.\n  params.nextLog = 2.4;\n  params.pal = new Float32Array(9 * 4 * 3);\n  params.dens = new Float32Array(W * H);\n  bakeScene(params);\n}\n\nfunction bakeScene(params) {\n  const bg = params.bg;\n  const lat = params.lat;\n  // Sky: pale at the top of the gorge, a little deeper towards the far ridge.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const c = hsv(0.58, 0.28 + y * 0.006, 0.78 - y * 0.012);\n      const o = (y * W + x) * 3;\n      bg[o] = c[0];\n      bg[o + 1] = c[1];\n      bg[o + 2] = c[2];\n    }\n  // The far ridge, blue with distance.\n  for (let x = 0; x \u003c W; x++) {\n    const top = Math.round(9 + 3 * vn(lat, x / 9, 3.5) + 1.5 * vn(lat, x / 3.5, 9.5));\n    for (let y = top; y \u003c LIP; y++) {\n      const c = hsv(0.5, 0.45, 0.3 + 0.04 * vn(lat, x / 2, y / 2));\n      put(bg, x, y, c[0], c[1], c[2]);\n    }\n  }\n  // The near banks of the river, grass running back to the ridge. The river itself is drawn\n  // every frame, as wide as Spate makes it.\n  for (let x = 0; x \u003c W; x++)\n    for (let y = 13; y \u003c LIP; y++) {\n      const g = 0.13 + 0.015 * (y - 13) + 0.09 * vn(lat, x / 2, y / 1.2 + 40);\n      const c = hsv(0.28, 0.68, g);\n      put(bg, x, y, c[0], c[1], c[2]);\n    }\n\n  // The cliff: beds of rock laid flat, each its own shade, lit on the top and undercut below.\n  const edges = [LIP];\n  while (edges[edges.length - 1] \u003c H + 12) edges.push(edges[edges.length - 1] + 5 + Math.floor(Math.random() * 8));\n  const bedV = edges.map(() => 0.12 + Math.random() * 0.09);\n  const bedH = edges.map(() => (Math.random() \u003c 0.6 ? 0.07 : 0.58));\n  const bedS = edges.map((_, i) => (bedH[i] \u003c 0.3 ? 0.3 : 0.14));\n  for (let y = LIP; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const yy = y + 2.5 * Math.sin(x * 0.07 + 0.5) + 5 * (vn(lat, x / 11, 3.3 + y / 40) - 0.5);\n      let b = 0;\n      while (b \u003c edges.length - 2 && yy >= edges[b + 1]) b++;\n      const thick = edges[b + 1] - edges[b];\n      const frac = (yy - edges[b]) / thick;\n      let v = bedV[b] + (vn(lat, x / 2.5 + b * 17, y / 2.5) - 0.5) * 0.07;\n      if (frac \u003c 0.18) v += 0.06;\n      else if (frac > 0.8) v -= 0.07;\n      // Joints: a dark crack here and there through a bed.\n      if (hash(x * 7 + b, 91) \u003c 0.012 && frac > 0.2 && frac \u003c 0.8) v *= 0.55;\n      // The gorge is lit from above: higher beds catch more sky.\n      v *= 1.25 - 0.45 * (y - LIP) / (H - LIP);\n      let c = hsv(bedH[b], bedS[b], Math.max(0.05, v));\n      // Moss on the tops of the beds, thicker low down where the spray reaches.\n      const wet = Math.max(0, (y - 40) / 80);\n      if (frac \u003c 0.35 && vn(lat, x / 4 + b * 5, y / 2.5 + 80) > 0.68 - wet * 0.22) c = hsv(0.27, 0.7, 0.2 + 0.12 * vn(lat, x / 1.7, y / 1.7 + 120));\n      // The lip overhangs a little, so the rock just under it is in shadow.\n      const under = y - LIP \u003c 3 ? 0.5 + 0.17 * (y - LIP) : 1;\n      put(bg, x, y, c[0] * under, c[1] * under, c[2] * under);\n    }\n\n  // Trees lean over the top of the gorge from both sides.\n  const crowns = [\n    [3, 4, 9],\n    [12, -1, 7],\n    [-2, 19, 8],\n    [8, 14, 6],\n    [57, 3, 8],\n    [49, 0, 6],\n    [64, 17, 9],\n    [55, 13, 6],\n  ];\n  for (const [cx, cy, r] of crowns)\n    for (let y = Math.floor(cy - r); y \u003c= cy + r; y++)\n      for (let x = Math.floor(cx - r - 1); x \u003c= cx + r + 1; x++) {\n        const dx = x - cx;\n        const dy = (y - cy) * 1.1;\n        const d = Math.sqrt(dx * dx + dy * dy) / r;\n        if (d > 0.82 + 0.3 * vn(lat, x / 2, y / 2 + 160)) continue;\n        // Lit from above: the upper leaves are lighter.\n        const leaf = vn(lat, x / 1.6 + 30, y / 1.6 + 30);\n        const v = 0.17 + 0.16 * leaf + 0.08 * Math.max(0, -dy / r);\n        const c = hsv(0.29 - 0.04 * leaf, 0.72, v);\n        put(bg, x, y, c[0], c[1], c[2]);\n      }\n\n  // Boulders round the pool, in front of the water.\n  const front = params.front;\n  const fa = params.frontA;\n  const stones = [\n    [4, 124, 11, 9],\n    [16, 128, 7, 5],\n    [59, 125, 10, 8],\n    [47, 129, 6, 5],\n  ];\n  for (const [cx, cy, rx, ry] of stones)\n    for (let y = Math.floor(cy - ry); y \u003c H; y++)\n      for (let x = Math.floor(cx - rx); x \u003c= cx + rx; x++) {\n        if (x \u003c 0 || x >= W || y \u003c 0) continue;\n        const dx = (x - cx) / rx;\n        const dy = (y - cy) / ry;\n        const d = dx * dx + dy * dy;\n        if (d > 1 + 0.25 * (vn(lat, x / 2, y / 2 + 200) - 0.5)) continue;\n        const top = -dy;\n        let v = 0.12 + 0.12 * Math.max(0, top) + 0.05 * vn(lat, x / 1.8, y / 1.8 + 220);\n        let c = hsv(0.08, 0.22, v);\n        // Moss on the tops, and the waterline dark and wet.\n        if (top > 0.45 && vn(lat, x / 2.5, y / 2.5 + 240) > 0.45) c = hsv(0.27, 0.7, 0.22 + 0.1 * top);\n        if (y > cy + ry * 0.55) {\n          v *= 0.6;\n          c = hsv(0.55, 0.3, v);\n        }\n        const o = (y * W + x) * 3;\n        front[o] = c[0];\n        front[o + 1] = c[1];\n        front[o + 2] = c[2];\n        fa[y * W + x] = 1;\n      }\n}\n\nfunction spawnSpray(params, x, y, vx, vy, grav, floor) {\n  const s = params.pnext;\n  params.pnext = (s + 1) % SPRAY;\n  params.px[s] = x;\n  params.py[s] = y;\n  params.pvx[s] = vx;\n  params.pvy[s] = vy;\n  params.pgrav[s] = grav;\n  params.pfloor[s] = floor;\n  params.page[s] = 0;\n}\n\nfunction stepSpray(params, dts) {\n  for (let i = 0; i \u003c SPRAY; i++) {\n    if (params.page[i] > 3) continue;\n    params.page[i] += dts;\n    params.pvy[i] += G * params.pgrav[i] * dts;\n    params.px[i] += params.pvx[i] * dts;\n    params.py[i] += params.pvy[i] * dts;\n    if (params.py[i] > params.pfloor[i] && params.pvy[i] > 0) params.page[i] = 9;\n  }\n}\n\n// Time for the water to fall d rows from the lip, in world seconds.\nfunction flight(d) {\n  return (-V0 + Math.sqrt(V0 * V0 + 2 * G * d)) / G;\n}\n\n// How much wider the water is d rows below the lip.\nfunction spreadAt(d) {\n  const f = d / 94;\n  return 1 + 0.35 * f + 0.35 * f * f * f;\n}\n\n// How far the wind has carried water that left the lip at u and has been falling tau seconds.\nfunction blown(params, u, tau) {\n  const gust = 1 + 0.9 * (vn(params.lat, u * 0.7, 333.3) - 0.5);\n  return 0.5 * params.wind * 24 * gust * tau * tau;\n}\n\nexport function update(dt, input, params) {\n  const k = input.knobValues || [0, 2, 0, 0.06];\n  dt = Math.min(dt, 0.1);\n  const speed = Math.max(0.05, k[1]);\n  const dts = (dt * speed) / 2;\n  params.ts += dts;\n  const ts = params.ts;\n  params.hue = k[0] + 0.48;\n  const wind = Math.max(-1, Math.min(1, k[2]));\n  const spate = Math.max(0, Math.min(1, k[3]));\n  params.wind = wind;\n  params.spate = spate;\n  // Past about half way the wind is a gale and starts tearing the curtain apart.\n  const gale = Math.max(0, Math.min(1, (Math.abs(wind) - 0.5) / 0.45));\n  params.gale = gale;\n  params.breakAt = 94 * (1 - 0.72 * gale);\n  params.half0 = 6.5 + 14.5 * Math.pow(spate, 0.6);\n  params.hEnd = params.half0 * spreadAt(HIT - LIP);\n  // Columns break into separate threads when the river is low.\n  const low = Math.max(0, 1 - spate / 0.3);\n  params.gap = 0.75 * low * low;\n  params.hitX = CX + blown(params, ts - flight(HIT - LIP), flight(HIT - LIP));\n\n  const rate = (70 + 200 * spate) * (1 - 0.7 * gale);\n  if (!params.started) {\n    params.started = true;\n    // Two seconds of spray, so the pool opens already throwing it.\n    for (let n = 0; n \u003c 60; n++) {\n      spray(params, rate, 1 / 30);\n      stepSpray(params, 1 / 30);\n    }\n  }\n  spray(params, rate, dts);\n  stepSpray(params, dts);\n\n  const log = params.log;\n  params.nextLog -= dts;\n  const pressed = input.btnPressed && input.btnPressed[0];\n  if ((pressed || params.nextLog \u003c= 0) && !(log.on && log.phase === 0)) {\n    log.on = true;\n    log.phase = 0;\n    log.t0 = ts;\n    log.ang = Math.random() * Math.PI;\n    log.spin = (Math.random() \u003c 0.5 ? -1 : 1) * (2 + Math.random() * 2.5);\n    log.off = (Math.random() - 0.5) * params.half0;\n    params.nextLog = 20 + Math.random() * 25;\n  }\n  if (log.on) stepLog(params, log, dts);\n}\n\nfunction spray(params, rate, dts) {\n  const wind = params.wind;\n  params.spawnDebt += rate * dts;\n  while (params.spawnDebt >= 1) {\n    params.spawnDebt -= 1;\n    const x = params.hitX + (Math.random() - 0.5) * 1.8 * params.hEnd;\n    spawnSpray(params, x, HIT - 1, (Math.random() - 0.5) * (40 + 30 * params.spate) + wind * 25, -(12 + Math.random() * 40), 1.6, HIT + 1);\n  }\n  // In a gale the torn curtain goes up and away downwind as spray.\n  const gale = params.gale;\n  if (gale > 0) {\n    params.galeDebt += gale * (90 + 120 * params.spate) * dts;\n    while (params.galeDebt >= 1) {\n      params.galeDebt -= 1;\n      const d = params.breakAt + Math.random() * (HIT - LIP - params.breakAt);\n      const tau = flight(d);\n      const x = CX + blown(params, params.ts - tau, tau) + (Math.random() - 0.5) * 2 * params.half0 * spreadAt(d);\n      spawnSpray(params, x, LIP + d, wind * (35 + Math.random() * 45), -(8 + Math.random() * 30) * gale, 0.35, H + 4);\n    }\n  }\n}\n\nfunction stepLog(params, log, dts) {\n  if (log.phase === 0) {\n    log.ang += log.spin * dts;\n    const tau = params.ts - log.t0;\n    const d = V0 * tau + 0.5 * G * tau * tau;\n    log.x = CX + log.off * spreadAt(d) + blown(params, log.t0, tau);\n    log.y = LIP + d;\n    if (log.y >= HIT) {\n      for (let n = 0; n \u003c 34; n++) spawnSpray(params, log.x + (Math.random() - 0.5) * 6, HIT - 1, (Math.random() - 0.5) * 70, -(12 + Math.random() * 40) * 1.5, 1.6, HIT + 1);\n      log.phase = 1;\n      log.age = 0;\n      log.drift = log.x \u003c W / 2 ? -1 : 1;\n      log.y = HIT + 3;\n    }\n  } else {\n    // Under for a moment, then up and away on the current.\n    log.age += dts;\n    log.ang -= Math.sin(log.ang) * Math.cos(log.ang) * dts * 2;\n    log.x += log.drift * (3 + 6 * Math.min(1, log.age / 2)) * dts;\n    log.y = HIT + 4 + Math.min(1, log.age / 2) * 5 + Math.sin(log.age * 3) * 0.6;\n    if (log.x \u003c -8 || log.x > W + 8) log.on = false;\n  }\n}\n\nexport function draw(display, params, time) {\n  const buf = params.buf;\n  const lat = params.lat;\n  const ts = params.ts;\n  const hue = params.hue;\n  const spate = params.spate;\n  const wind = params.wind;\n  const gale = params.gale;\n  buf.set(params.bg);\n\n  // Water colours: nine levels of brightness by four of saturation.\n  const pal = params.pal;\n  const sats = [0.05, 0.22, 0.42, 0.62];\n  for (let l = 0; l \u003c= 8; l++)\n    for (let s = 0; s \u003c 4; s++) {\n      const c = hsv(hue + (s === 3 ? 0.02 : 0), sats[s], l / 8);\n      const o = (l * 4 + s) * 3;\n      pal[o] = c[0];\n      pal[o + 1] = c[1];\n      pal[o + 2] = c[2];\n    }\n\n  const half0 = params.half0;\n  const gap = params.gap;\n\n  // The river upstream, flowing towards the lip.\n  for (let y = 13; y \u003c LIP; y++) {\n    // Narrower as it runs back towards the ridge.\n    const z = 1 / (0.72 + (0.28 * (y - 13)) / (LIP - 13));\n    const wide = (half0 + 1) / z;\n    for (let x = Math.ceil(CX - wide); x \u003c CX + wide; x++) {\n      const n = vn(lat, ((x - CX) * z) / 2.2 + 300, (y - 13) * z * 0.5 - ts * 2.2);\n      const far = y \u003c 16 ? 1 : 0;\n      const l = (n > 0.7 ? 6 : n > 0.42 ? 4 : 3) - far;\n      const o = (l * 4 + 2) * 3;\n      put(buf, x, y, pal[o], pal[o + 1], pal[o + 2]);\n    }\n  }\n\n  // The falling water. Each pixel reads its texture at the moment that water left the lip,\n  // so a clump keeps its place in the texture and stretches as it speeds up.\n  const breakAt = params.breakAt;\n  for (let y = LIP; y \u003c= HIT; y++) {\n    const d = y - LIP + 0.5;\n    const dn = d / 94;\n    const tau = flight(d);\n    const u = ts - tau;\n    const half = half0 * spreadAt(d);\n    const c = CX + Math.sin(u * 0.9) * 0.8 * dn + blown(params, u, tau);\n    const aer = Math.min(1, d / 75);\n    // Below the break a gale has torn this much of the water away.\n    const torn = d > breakAt ? Math.min(1, (d - breakAt) / 26) * gale * 0.85 : 0;\n    const reach = half + 3 + 6 * dn;\n    const lo = Math.max(0, Math.floor(c - reach));\n    const hi = Math.min(W - 1, Math.ceil(c + reach));\n    // Ragged edges: lumps of water bulge out of each side and travel down with it.\n    const eL = (vn(lat, u * 5 + 17, 11) - 0.5) * (1.5 + 7 * dn);\n    const eR = (vn(lat, u * 5 + 83, 29) - 0.5) * (1.5 + 7 * dn);\n    for (let x = lo; x \u003c= hi; x++) {\n      const off = x + 0.5 - c;\n      const inside = half + (off \u003c 0 ? eL : eR) - Math.abs(off);\n      const o = (y * W + x) * 3;\n      // The rock behind and beside the water is wet and dark.\n      if (inside > -2.5) {\n        buf[o] *= 0.62;\n        buf[o + 1] *= 0.66;\n        buf[o + 2] *= 0.75;\n      }\n      const xr = off / half;\n      const s = xr * half0;\n      if (inside \u003c= 0) {\n        // Drops flung off the edge.\n        if (inside > -2 - 5 * dn && vn(lat, x * 1.37 + 500, u * 13) > 0.8 - 0.1 * dn) {\n          const p = (5 * 4 + 1) * 3;\n          buf[o] = pal[p];\n          buf[o + 1] = pal[p + 1];\n          buf[o + 2] = pal[p + 2];\n        }\n        continue;\n      }\n      const thr = gap * (0.3 + 0.75 * Math.abs(xr));\n      if (thr > 0 && vn(lat, s * 0.45 + 100.5, u * 0.5) \u003c thr) continue;\n      const n1 = vn(lat, s * 0.62 + 3.1, u * 8);\n      const n2 = vn(lat, s * 0.22 + 51.7, u * 2.6);\n      if (torn > 0 && vn(lat, s * 0.8 + 610, u * 4) \u003c torn) continue;\n      let l;\n      let sat;\n      if (n1 * 0.55 + n2 * 0.45 > 0.8 - 0.24 * aer - 0.3 * torn) {\n        l = 7 + (n1 > 0.7 ? 1 : 0);\n        sat = 0;\n      } else {\n        let v = 0.34 + 0.34 * aer + (n1 - 0.5) * (0.35 + 0.2 * aer) + (n2 - 0.5) * 0.5;\n        if (inside \u003c 1) v *= 0.8;\n        l = Math.max(1, Math.min(7, Math.round(v * 8)));\n        // Ragged, so the water pales without a seam across it.\n        const a = aer + (n1 - 0.5) * 0.5;\n        sat = a \u003c 0.35 ? 3 : a \u003c 0.7 ? 2 : 1;\n      }\n      // The curl over the lip catches the sky.\n      if (d \u003c 1.2) {\n        l = 7;\n        sat = 1;\n      } else if (d \u003c 3) {\n        l = Math.max(l, 6);\n        sat = 2;\n      }\n      const p = (l * 4 + sat) * 3;\n      buf[o] = pal[p];\n      buf[o + 1] = pal[p + 1];\n      buf[o + 2] = pal[p + 2];\n    }\n  }\n\n  // The plunge pool: rings running out from where the water lands, foam boiling over it.\n  // What a gale lets through still lands, and churns less.\n  const ci = Math.max(4, Math.min(W - 4, params.hitX));\n  const hEnd = params.hEnd;\n  const boil = 1 - 0.6 * gale;\n  for (let y = POOL; y \u003c H; y++) {\n    const q = (y - POOL) / (H - 1 - POOL);\n    for (let x = 0; x \u003c W; x++) {\n      const dx = x + 0.5 - ci;\n      const dy = (y - HIT) * 2.6;\n      const rho = Math.sqrt(dx * dx + dy * dy);\n      let l = 1 + (q > 0.5 ? 1 : 0);\n      let sat = 3;\n      const w = Math.sin(rho * 0.55 - ts * 6 + vn(lat, x / 6 + 900, y / 2) * 2.5);\n      if (w > 0.7 && vn(lat, x / 3 + 950, y + ts * 0.5) > 0.35) l += rho \u003c 40 ? 2 : 1;\n      const churn = Math.exp(-rho / (hEnd * 0.9 + 5)) * (0.5 + 0.9 * vn(lat, dx / 2.5 + 7, ts * 3 + y * 0.7));\n      const scum = Math.exp(-rho / 34) * vn(lat, rho / 3 - ts * 2.2, (dx / (rho + 1)) * 5 + (dy \u003c 0 ? 20 : 40)) * 0.75;\n      const f = (churn + scum) * boil;\n      if (f > 0.62) {\n        l = 8;\n        sat = 0;\n      } else if (f > 0.47) {\n        l = 5;\n        sat = 1;\n      }\n      const p = (l * 4 + sat) * 3;\n      const o = (y * W + x) * 3;\n      buf[o] = pal[p];\n      buf[o + 1] = pal[p + 1];\n      buf[o + 2] = pal[p + 2];\n    }\n  }\n\n  // The log goes in front of the water and behind the boulders and the mist.\n  const log = params.log;\n  if (log.on && !(log.phase === 1 && log.age \u003c 0.7)) drawLog(buf, log);\n\n  const front = params.front;\n  const fa = params.frontA;\n  for (let p = 0; p \u003c W * H; p++) {\n    if (fa[p] === 0) continue;\n    const o = p * 3;\n    buf[o] = front[o];\n    buf[o + 1] = front[o + 1];\n    buf[o + 2] = front[o + 2];\n  }\n\n  {\n    const p = (8 * 4 + 1) * 3;\n    for (let i = 0; i \u003c SPRAY; i++) {\n      if (params.page[i] > 3) continue;\n      put(buf, Math.round(params.px[i]), Math.round(params.py[i]), pal[p], pal[p + 1], pal[p + 2]);\n    }\n  }\n\n  // Mist rises off the pool and leans downwind. The sun is behind us, so a piece of\n  // rainbow stands in it.\n  const dens = params.dens;\n  const yTop = HIT - 80;\n  dens.fill(0, yTop * W);\n  const hs = 24 + 24 * spate + 20 * gale;\n  for (let y = Math.max(yTop, Math.floor(HIT - 4.6 * hs)); y \u003c H; y++) {\n    const h = HIT - y;\n    const fh = h > 0 ? Math.exp(-h / hs) : Math.exp(h / 5);\n    const sig = hEnd + 4 + Math.max(0, h) * 0.5;\n    const inv = 1 / (2 * sig * sig);\n    const mx = ci + wind * Math.max(0, h) * 0.9;\n    const xr = Math.ceil(sig * 2.6);\n    const row = y * W;\n    for (let x = Math.max(0, Math.floor(mx - xr)); x \u003c= Math.min(W - 1, Math.ceil(mx + xr)); x++) {\n      const dx = x + 0.5 - mx;\n      const z = dx * dx * inv * 32;\n      if (z \u003c 256) dens[row + x] += fh * EXP[z | 0];\n    }\n  }\n  const mist = hsv(hue, 0.1, 0.9);\n  const amt = 0.75 + 0.8 * spate;\n  const rcx = ci - 4;\n  const rcy = HIT + 36;\n  const R = 48;\n  for (let y = yTop; y \u003c H; y++) {\n    for (let x = 0; x \u003c W; x++) {\n      const ds = dens[y * W + x];\n      if (ds \u003c 0.02) continue;\n      const n = vn(lat, x / 11 + 40 - ts * wind * 3, (y + ts * 7) / 11);\n      let d = ds * (0.25 + 1.3 * (n - 0.3)) * amt;\n      if (d \u003c= 0.06) continue;\n      // Four steps of mist: finer steps flicker as it rises.\n      d = Math.min(0.75, Math.round(d * 4) / 4);\n      const o = (y * W + x) * 3;\n      let mr = mist[0];\n      let mg = mist[1];\n      let mb = mist[2];\n      const rx = x + 0.5 - rcx;\n      const ry = y + 0.5 - rcy;\n      const rr = Math.sqrt(rx * rx + ry * ry) - R;\n      if (rr > -4 && rr \u003c 4 && ry \u003c 0) {\n        // Violet inside, red outside, as the primary bow has it.\n        const band = hsv(0.76 * (1 - (rr + 4) / 8), 0.85, 1);\n        mr = band[0];\n        mg = band[1];\n        mb = band[2];\n        d = Math.min(0.5, d);\n      }\n      buf[o] += (mr - buf[o]) * d;\n      buf[o + 1] += (mg - buf[o + 1]) * d;\n      buf[o + 2] += (mb - buf[o + 2]) * d;\n    }\n  }\n\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const o = (y * W + x) * 3;\n      display.setPixel(x, y, Math.min(255, buf[o]), Math.min(255, buf[o + 1]), Math.min(255, buf[o + 2]));\n    }\n}\n\nfunction drawLog(buf, log) {\n  const ca = Math.cos(log.ang);\n  const sa = Math.sin(log.ang);\n  const len = 5;\n  for (let s = -len; s \u003c= len; s += 0.5) {\n    const x = log.x + ca * s;\n    const y = log.y + sa * s;\n    const end = Math.abs(s) > len - 0.6;\n    for (let w = 0; w \u003c= 1; w++) {\n      const px = Math.round(x - sa * w);\n      const py = Math.round(y + ca * w);\n      if (end) put(buf, px, py, 215, 170, 105);\n      else put(buf, px, py, w === 0 ? 120 : 82, w === 0 ? 72 : 48, w === 0 ? 34 : 22);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Hue=0..1, Speed=0.2..3, Wind=-1..1, Spate=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Hue","min":0,"max":1,"about":"The colour of the water, the pool and the mist, starting from glacier turquoise; about halfway round it runs red, like Blood Falls in Antarctica."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the world runs: at 2 the water takes 1.6 seconds from the lip to the pool, at the top about 1.1, at the bottom 16, in slow motion."},{"name":"Wind","min":-1,"max":1,"about":"At 0 the water falls straight; turned either way the wind bends the curtain more the further it has fallen and carries the mist off that way, and near the ends a gale catches the water before it lands and blows it back up as spray, as Kinder Downfall does in a westerly."},{"name":"Spate","min":0,"max":1,"about":"How much water the river brings: from a dry-season fall that breaks into threads to a flood nearly as wide as the panel, with spray and mist to match."}],"start":[0,2,0,0.06],"measures":{"motion":0.6549,"detail":0.0595,"edges":0.3161,"complexity":1.514,"coverage":0.9639,"colour":0.146,"drift":0.0724},"knobResponse":[0.0442,0.112,0.1828,0.287]},{"slug":"weaver","title":"Weaver","family":"bird","round":22,"note":"강 위로 뻗은 아카시아 가지 끝에서 수컷 마을베짜기새가 둥지를 지어요. 갈대 잎을 찢어 문 초록 띠를 벽에 꿰어 당기면 둥지가 고리에서 둥근 방으로, 다시 아래로 열린 입구로 한 가닥씩 자라고, 묵은 띠는 짚 색으로 바래요. K1 을 누르면 암컷이 날아와 둥지를 살피고, 다 지은 둥지가 퇴짜를 맞으면 수컷이 끊어 강에 떨어뜨리고 새 고리부터 다시 지어요.","idea":"A male village weaver builds his nest at the tip of an acacia twig over a river: he tears green strips off the reeds and threads them in, and the nest grows strand by strand from a ring to a round chamber with a downward entrance while old strips fade to straw.","buttons":"K1 tap calls a female: he hangs under his nest and flutters while she looks it over, and a finished nest she turns down he cuts loose into the river.","code":"// ===== Patternflow pattern =====\n// Title:   Weaver\n// Family:  bird\n// Idea:    A male village weaver builds his nest at the tip of an acacia twig over a river: he tears green strips off the reeds and threads them in, and the nest grows strand by strand from a ring to a round chamber with a downward entrance while old strips fade to straw.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after field photographs of village weaver (Ploceus cucullatus) colonies\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Plumage=0..2, Speed=0.2..3, Nests=3..9, Sky=0..1\n//\n// Knob 1: Plumage. A village weaver at 0, yellow with a black mask and a red eye, over a river; a golden weaver at 1 over a reed bed; a brown-masked baya weaver at 2 over a paddy field, its nests hung from a woven neck with a long tube.\n// Knob 2: Speed. How fast the birds, the wind and the water go: at 2 a strand takes him about eight seconds, there, back and woven in.\n// Knob 3: Nests. Three to nine nests in the tree, his among them. The bigger the colony, the further along his nest is at the start, from a ring with its roof begun to a chamber that wants only its entrance.\n// Knob 4: Sky. Morning at 0 with the sun low on the right, noon at 0.5, evening at 1 with the sun going down on the left.\n// Buttons: K1 tap calls a female: he hangs under his nest and flutters while she looks it over, and a finished nest she turns down he cuts loose into the river.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The far bank, the water, the near bank; his twig's tip and root.\nconst [HOR, WTOP, NEAR, AX, AY, RX, RY] = [89, 95, 121, 37, 38, 40, 19];\nconst { min, max, floor, ceil, round, sin, cos, abs, hypot, pow, atan2, sign, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mixc = (a, b, t) => a.map((v, i) => mix(v, b[i], t));\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every `per` cells.\nfunction vn(x, y, per = 4096) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = ((xi % per) + per) % per, x1 = (x0 + 1) % per, a = hash(x0, yi), b = hash(x1, yi), c = hash(x0, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, yi + 1)) * su * sv;\n}\nconst hx = (s) => s.split(\" \").map((h) => [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)));\n\n// Village, golden, baya: plumage in KEYS order (crown, mask, eye, bill, nape, breast, back, streak,\n// wing, wing edge, tail), the fresh strip, and the nest's tube, neck and chamber radii.\nconst KEYS = \"CKEBNYMmWyT\";\nconst SP = [\n  [hx(\"18140e 100c0a f02418 221c18 b25c1a fcd61c f0ca20 28220c 2e2816 e8ca38 706426 5cb234\"), [5, 0, 9, 8.5]],\n  [hx(\"ffcc18 fa8c12 faf0ba 1e1812 ffc816 ffc610 e4ac10 c49216 a48c1c fcd02c a48a20 82bc38\"), [2, 0, 9.5, 9]],\n  [hx(\"ffd828 482e1a 402616 30241c fad22c f6d040 98703a 5c4226 684e2c d2b476 7c623c 9cc458\"), [15, 5, 7.5, 8.5]],\n];\nconst pal = (a) => Object.fromEntries([...KEYS].map((k, i) => [k, a[i]]).concat([[\"F\", [204, 150, 128]]]));\nconst FPAL = pal(hx(\"b4a04a d8c670 7c4a28 ccae86 b4a04a e8da92 a08a4a 64522e 725e34 c8b472 867240\"));\nconst [STRAW, OLD] = hx(\"ceb874 96805c\");\n\n// The bird facing right: rows, anchor, bill tip.\nconst pose = (s, ax, ay, tx, ty) => ({ rows: s.split(\" \"), ax, ay, tx, ty });\nconst PERCH = pose(\"......CCC .....NCCCC .....NKEKKB ....MMKKKBBB ...MmMYKK ..WWWMYYY .yWWWYYYY TyWWyYYY TT..YYY T...F.F\", 6, 5, 11, 3);\nconst POKE = pose(\". ...MMM ..WWMNCCC .yWWMNCCCC TyWWYMKEKKB TT.YYYKKKBBB T...YYYKK ....F.F\", 5, 4, 11, 5);\nconst FA = pose(\"...yW ...yWW ....yWW..CC TTMMMWWNCCKB ..TYYYYYKEKBB .....YYYYKK\", 6, 4, 12, 4);\nconst flap = (t) => (floor(t / 0.065) & 1 ? FB : FA);\nconst FB = pose(\".........CC TTMMMMMNCCKB ..TYYWWWYKEKBB .....yWWWKK ......yWW .......yW\", 6, 2, 12, 2);\n\n// Morning, noon, evening: sky overhead, at the horizon, the light, the sun.\nconst SKY = [\n  [...hx(\"5480c6 fcc28e\"), [1.08, 0.9, 0.74], 50, 79],\n  [...hx(\"2c72e0 acd6f6\"), [1, 1, 1], 40, -40],\n  [...hx(\"3e3686 ff8442\"), [1.12, 0.74, 0.56], 16, 84],\n];\n// The acacia: limbs as x0, y0, x1, y1, w0, w1, and the flat plates of its crown.\nconst LIMBS = [[6, 25, 24, 18, 3.6, 2.6], [24, 18, 44, 19, 2.6, 2], [44, 19, 63, 14, 2, 1.3], [40, 19, 57, 26, 1.7, 1.2], [57, 26, 64, 31, 1.2, 1], [7, 50, 20, 45, 2.8, 1.7], [20, 45, 28, 49, 1.7, 1]];\nconst PLATES = [[32, 3, 42, 6.5], [6, 11, 13, 5], [48, 10, 20, 4.5], [22, 12, 10, 3], [62, 16, 8, 3]];\n// The rest of the colony: twig tip, twig root, size, which way it faces.\nconst COLONY = [[13, 31, 14, 21, 0.72, -1], [55, 56, 57, 26, 0.8, 1], [19, 64, 19, 47, 0.72, 1], [52, 31, 50, 19, 0.62, -1], [29, 82, 26, 48, 0.62, 1], [61, 84, 62, 30, 0.6, -1], [26, 27, 27, 19, 0.52, 1], [14, 85, 12, 51, 0.58, -1]];\n// The two tall blades he strips: foot, height, lean.\nconst PICK = [[15, 123, 20, 3], [50, 122, 21, -2.5]];\nconst [WEAVE, OUT, TEAR, BACK, SHOW, CUT] = [0, 1, 2, 3, 4, 5];\nconst DUR = [3.2, 1.5, 1.4, 1.7, 1, 1.6];\n\n// A nest as strands in the order they go in, in LEDs from the twig tip, facing right: the neck\n// round the twig, the ring he stands in, the egg chamber from the roof round the back, the front\n// wall down to the entrance, the entrance tube. F says which strand closes each LED of the wall.\nfunction gen([tube, nk, rx, ry], seed, s) {\n  let c = 0;\n  const r = () => hash(seed, c++), S = [], cy = nk + 8, bx = -3, by = cy + 1.5, F = [];\n  const add = (p) => S.push({ p, sh: 0.85 + 0.3 * r() });\n  const arcs = (n, cx, cy, ax, ay, th, f0, keep) => {\n    for (let j = 0; j \u003c n; j++) {\n      const p = [], f = f0 + (1 - f0) * r(), t = th(j) + (r() - 0.5) * 0.7, sw = 1.6 + r(), ox = 2 * r() - 1, oy = 2 * r() - 1;\n      for (let a = -sw / 2; a \u003c sw / 2; a += 0.5 / (ax * f)) {\n        const x = cx + ox + cos(t + a) * ax * f, y = cy + oy + sin(t + a) * ay * f;\n        if (keep(x, y)) p.push(x, y);\n      }\n      add(p);\n    }\n  };\n  const ring = (x, y) => (x / 5) ** 2 + ((y - cy) / 7) ** 2, ball = (x, y) => ((x - bx) / rx) ** 2 + ((y - by) / ry) ** 2;\n  const door = (x, y) => y > cy + 4.5 && abs(x - 2) \u003c 2.5;\n  for (let y = 0; y \u003c nk - 0.5; y += 1.5) {\n    const p = [], w = 1 + y * 0.22;\n    for (let i = 0; i \u003c= 8; i++) p.push(-w + (w * i) / 4, y + i * 0.3);\n    add(p);\n  }\n  for (let i = 0; i \u003c 6; i++) {\n    const p = [], f = 0.9 + 0.2 * r(), a0 = r() * 6.3, sw = 4 + 2 * r();\n    for (let a = 0; a \u003c sw; a += 0.12) p.push(cos(a0 + a) * 5 * f, cy + sin(a0 + a) * 7 * f);\n    add(p);\n  }\n  const pre = S.length;\n  arcs(16, bx, by, rx, ry, (j) => -PI / 2 - (j / 15) * PI * 1.1, 0.45, (x, y) => ball(x, y) \u003c 1);\n  const ch = S.length;\n  arcs(7, 0, cy, 6, 8, (k) => -1.2 + k * 0.42, 0.35, (x, y) => ring(x, y) \u003c 1 && !door(x, y));\n  const fr = S.length, t0 = cy + 5, nt = 2 + round(tube / 2), dy = (tube + 3) / nt;\n  for (let k = 0; k \u003c nt; k++) {\n    const p = [], y = t0 + k * dy, hw = k \u003c 2 ? 4.4 - k : 2.6, c = 2.6 + (y - t0) * 0.08;\n    for (let i = 0; i \u003c= 8; i++) p.push(c - hw + (hw * i) / 4, y + i * 0.28);\n    add(p);\n  }\n  for (let y = 0; y \u003c t0 + tube + 4; y += 1 / s)\n    for (let x = -13; x \u003c 8; x += 1 / s) {\n      const g = ring(x, y), tk = floor((y - t0) / dy), w = (1.5 * PI - atan2((y - by) / ry, (x - bx) / rx)) % (2 * PI);\n      let k = -1;\n      if (y \u003c nk) k = abs(x) \u003c 1 + y * 0.22 ? floor(y / 1.5) : -1;\n      else if (g \u003c 1 && !door(x, y)) k = g > 0.6 ? pre - 6 : ch + cl(round((atan2((y - cy) / 8, x / 6) + 1.2) / 0.42), 0, 6);\n      else if (ball(x, y) \u003c 1 && !door(x, y)) k = pre + min(15, round(w / (PI * 0.0733)));\n      else if (y >= t0 && tk \u003c nt && abs(x - 2.6 - (y - t0) * 0.08) \u003c (tk \u003c 2 ? 4.4 - tk : 2.6)) k = fr + tk;\n      if (k >= 0) F.push(x, y, k + (y > t0 + tube + 1.8) * 1000);\n    }\n  return Object.assign(S, { pre, fr, by, F });\n}\n\n// A nest's point on the panel, swaying on its twig and dipping when a bird lands.\nconst nxy = (n, lx, ly) => [n.x + n.sw * (1 + (ly * n.s) / 20) + lx * n.s * n.face, n.y + n.dip + n.fall + ly * n.s];\n\nfunction build(P) {\n  const { alb, mat } = P;\n  const set = (x, y, m, r, g, b) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, k = 0.8 + 0.3 * vn(x * 0.4, y * 0.8) + 0.1 * hash(x + 7, y);\n    if (y >= NEAR + round(2 * vn(x * 0.2, 4))) set(x, y, 5, 118 * k, 96 * k, 58 * k);\n    else if (y >= WTOP) set(x, y, 4, 0, 0, 0);\n    else if (y >= HOR) set(x, y, 3, 200 * k, 166 * k, 96 * k);\n  }\n  // Flat-topped acacias on the far bank.\n  for (let i = 0; i \u003c 6; i++) {\n    const cx = 12 + i * 10.5 + rnd() * 5, top = HOR - 4 - floor(rnd() * 4), w = 2 + rnd() * 4;\n    for (let y = top; y \u003c top + 2; y++) for (let x = round(cx - w - (y - top) * 1.5); x \u003c= cx + w + (y - top) * 1.5; x++) set(x, y, 6, 44, 60, 50);\n    for (let y = top + 2; y \u003c HOR; y++) set(round(cx), y, 6, 52, 56, 46);\n  }\n  const bark = (x, y, e, k = (0.72 + 0.4 * vn(x * 0.8, y * 0.16)) * (1.1 - 0.45 * e * e) * (e > 0.3 ? 1.12 : 1)) => set(x, y, 1, 112 * k, 94 * k, 76 * k);\n  for (let y = 10; y \u003c H; y++) for (let c = 5.5 + 1.8 * sin(y * 0.03 + 0.5), w = 2 + (y / H) * 2.2, x = floor(c - w); x \u003c= c + w; x++) bark(x, y, (x - c) / w);\n  for (const [x0, y0, x1, y1, w0, w1] of LIMBS)\n    for (let i = 0, n = ceil(hypot(x1 - x0, y1 - y0) * 2); i \u003c= n; i++) {\n      const f = i / n, x = mix(x0, x1, f), y = mix(y0, y1, f), w = mix(w0, w1, f);\n      for (let dy = -w / 2; dy \u003c= w / 2; dy += 0.5) bark(round(x), round(y + dy), (-2 * dy) / w);\n    }\n  for (const [cx, cy, rx, ry] of PLATES)\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const d = ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2, n = vn(x * 0.35, y * 0.5 + 20) * 0.7 + vn(x * 0.9, y * 1.1) * 0.3;\n        const k = 0.55 + 0.6 * n + (y \u003c cy - ry * 0.3 ? 0.28 : 0) - (y > cy + ry * 0.35 ? 0.2 : 0);\n        if (d \u003c 1 && n > 0.25 + 0.4 * d) set(x, y, 2, 80 * k, 118 * k, 44 * k);\n      }\n  // Reeds at the water's edge, and more out in a reed bed.\n  P.reeds = Array.from({ length: 40 }, (_, i) =>\n    i \u003c 12 ? [(i & 1 ? 44 : 10) + (i >> 1) * 2.4 + rnd() * 2, NEAR + 1, 12 + floor(rnd() * 9), rnd() * 7, i % 3 === 0] : [3 + rnd() * 60, WTOP + 4 + floor(rnd() * 20), 7 + floor(rnd() * 9), rnd() * 7, i % 2 === 0]);\n  P.shad = Float32Array.from({ length: 128 }, (_, i) => sm(1 - abs(i - 34) / 26) + 0.7 * sm(1 - abs(i - 96) / 16));\n  P.cloud = Float32Array.from({ length: 128 * 36 }, (_, i, x = i & 127, y = i >> 7) => sm((vn(x / 16, y / 4, 8) * 0.65 + vn(x / 7, y / 2.5 + 9, 128 / 7) * 0.35 - 0.5) * 3) * sm(1 - abs(y - 16) / 18));\n}\n\n// The sky for the hour, and the water and paddy that reflect it.\nfunction paint(P) {\n  const f = P.sk * 2, i = min(1, floor(f)), [top, hor, tint, sx, sy] = SKY[i].map((v, c) => (v.map ? mixc(v, SKY[i + 1][c], f - i) : mix(v, SKY[i + 1][c], f - i)));\n  const { alb, mat, bg, wet, rice } = P, G = [70, 160, 44];\n  Object.assign(P, { hor, tint, sx, sun: cl(1 - abs(sy - 70) / 60, 0, 1) });\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, m = mat[p], o = p * 3, ds = hypot(x - sx, (y - sy) * 1.2), z = (y - WTOP) / (NEAR - WTOP), row = (y - WTOP + 2) ** 0.7 * 1.6;\n    const band = m === 4 && row % 1 \u003c 0.42 && hash(x, floor(row)) > 0.15 ? rice : 0;\n    wet[p] = m === 4 ? 1 - band : 0;\n    for (let c = 0, a; c \u003c 3; c++)\n      (a = alb[o + c] * tint[c]),\n        (bg[o + c] =\n          m === 0 ? mix(top[c], hor[c], pow(y / HOR, 1.5)) + (sy > 0 ? (ds \u003c 3.2 ? 255 : 120 * Math.exp(-ds / 9)) : 0)\n          : m === 4 ? mix(mix(hor[c], top[c], 0.3 + 0.5 * z) * (0.8 - 0.2 * z), G[c] * tint[c] * (0.8 + 0.4 * hash(x, y)), band)\n          : m === 3 || m === 6 ? mix(a, hor[c], m === 6 ? 0.4 : 0.22)\n          : a);\n  }\n}\n\nfunction species(P, s) {\n  const i = min(1, floor(s)), f = s - i, [c0, q0] = SP[i], [c1, q1] = SP[i + 1], v = c0.map((c, j) => mixc(c, c1[j], f)), M = P.main;\n  Object.assign(P, { pal: pal(v), fresh: v[11], rice: cl(s - 1, 0, 1), reedN: 12 + round(28 * (1 - abs(s - 1))) });\n  for (const n of [M, ...P.col]) n.S = gen(mixc(q0, q1, f), n.seed, n.s);\n  M.nb = min(M.nb, M.S.length);\n}\n\nconst nest = (x, y, rx, ry, s, face, seed) => ({ x, y, rx, ry, s, face, seed, nb: 0, age: [], sw: 0, dip: 0, dv: 0, fall: 0, ph: rnd() * 7 });\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), wet: F(N), sp: -1, sk: -1, t: 0, fs: 0, side: 0, spt: 9 });\n  P.main = nest(AX, AY, RX, RY, 1.3, 1, 7);\n  P.col = COLONY.map((c, i) => Object.assign(nest(...c, 101 + i * 37), { old: (i * 0.37) % 1, fresh: i === 2 }));\n  build(P);\n}\n\n// Where he clings to weave strand j at reveal u: outside the wall, facing it.\nfunction wpos(P, j, u) {\n  const M = P.main, p = M.S[min(j, M.S.length - 1)].p, i = min(p.length - 2, floor((u * p.length) / 2) * 2);\n  const [x, y] = nxy(M, p[i], p[i + 1]), [cx, cy] = nxy(M, -2, M.S.by), l = hypot(x - cx, y - cy) || 1, dx = (x - cx) / l, dy = (y - cy) / l;\n  return [x + dx * 4.5, y + dy * 4.5 + (dy > 0.55 ? 1 : -1), dx > 0 ? -1 : 1, dy > 0.55];\n}\nfunction bladeTip(P, k) {\n  const [bx, by, h, lean] = PICK[k], b = P.bend[k];\n  return [bx + lean + sin(P.t * 1.3 + k * 2) * 0.8 + b * sign(lean) * 0.8, by - h + b];\n}\n\nfunction stepMale(P, d) {\n  const M = P.main, held = P.fs && P.fs \u003c 4;\n  let u = (P.bt += d) / DUR[P.bs];\n  const go = (s) => ((P.bs = s), (P.bt = 0), (P.x0 = P.bx), (P.y0 = P.by));\n  const fly = ([tx, ty], arc) => ([P.face, P.bx, P.by, P.pose, P.hang] = [tx >= P.x0 ? 1 : -1, mix(P.x0, tx, sm(u)), mix(P.y0, ty, sm(u)) - arc * sin(PI * u), flap(P.bt), false]);\n  P.show = false;\n  if (held && !P.bs) (P.bt -= d), (P.show = true), (u = -1);\n  switch (P.bs) {\n    case WEAVE: {\n      if (u \u003c 0) break;\n      // Five passes, each a push through the wall and a tug that pulls it tight and shakes the twig.\n      const k = cl(u, 0, 1) * 5, q = floor(k), f = k - q, rv = min(1, (q + sm(f * 2.5)) / 5);\n      [P.bx, P.by, P.face, P.hang] = wpos(P, M.nb, rv);\n      [P.rev, P.pose, P.strip] = [rv, f \u003c 0.42 ? POKE : PERCH, (1 - rv) * 13];\n      if (f >= 0.42 && !P.tug) M.dv += 5;\n      P.tug = f >= 0.42;\n      if (u >= 1) (M.age[M.nb++] = P.t), (P.rev = P.strip = 0), go(M.nb >= M.S.length ? SHOW : OUT);\n      break;\n    }\n    case OUT:\n      P.tip = bladeTip(P, P.side);\n      fly([P.tip[0], P.tip[1] - 4], 5);\n      if (u >= 1) go(TEAR);\n      break;\n    case TEAR: {\n      // Bite low on the blade and back off up it, tearing a strip.\n      const t = bladeTip(P, P.side), e = sm((u - 0.25) / 0.6), fc = PICK[P.side][3] > 0 ? -1 : 1;\n      P.bend[P.side] = min(3, P.bend[P.side] + d * 12);\n      [P.face, P.pose, P.hang, P.bx, P.by] = [fc, u \u003c 0.25 || (u > 0.5 && u \u003c 0.6) ? POKE : PERCH, false, t[0] - fc * 3 * e, t[1] - 4 - 2 * e];\n      P.tear = u > 0.2 && u \u003c 0.88 ? [t[0] + fc * 3, t[1] + 6] : null;\n      if (u >= 1) (P.tear = null), (P.strip = 13), go(BACK), (P.side ^= 1);\n      break;\n    }\n    case BACK:\n      fly(wpos(P, M.nb, 0), 6);\n      if (u >= 1) (M.dv += 16), go(WEAVE);\n      break;\n    case SHOW:\n      P.show = true;\n      if (!P.fs && P.bt > 0.8) callFemale(P);\n      if (P.reject) (P.reject = false), go(CUT);\n      break;\n    case CUT: {\n      const [x, y] = nxy(M, 0, 0);\n      [P.bx, P.by, P.face, P.hang, P.pose] = [x - 3, y - 3, 1, false, floor(P.bt / 0.2) & 1 ? POKE : PERCH];\n      if (u >= 1) (M.fv = -10), (M.fall = 0.01), (M.dv -= 20), go(OUT);\n    }\n  }\n  if (P.bs !== TEAR) P.bend = P.bend.map((b) => max(0, b - d * 8));\n}\n\nfunction callFemale(P) {\n  if (!P.fs) Object.assign(P, { fs: 1, ft: 0, fx0: 70, fy0: 30 + rnd() * 20 });\n}\nfunction stepFemale(P, d) {\n  const M = P.main, done = M.nb >= M.S.length, [rx, ry] = nxy(M, -3, M.S.by - 8.5).map((v, i) => v - 1 - 4 * i), u = (P.ft += d) / [1, 1.8, 3.4, 1, 1.8][P.fs];\n  const go = (s) => ((P.fs = s), (P.ft = 0), (P.fx0 = P.fx), (P.fy0 = P.fy));\n  if (P.fs === 1 || P.fs === 4) {\n    const [tx, ty] = P.fs === 1 ? [rx, ry] : [-12, 24];\n    [P.fx, P.fy, P.ff, P.fp] = [mix(P.fx0, tx, sm(u)), mix(P.fy0, ty, sm(u)) - 5 * sin(PI * u), tx > P.fx0 ? 1 : -1, flap(P.ft)];\n    if (P.fs === 1 && u >= 1) (M.dv += 10), go(2);\n    if (P.fs === 4 && u >= 1) (P.fs = 0), (P.reject = done);\n  } else {\n    [P.fx, P.fy, P.ff, P.fp] = [rx, ry, floor(P.ft / 0.9) & 1 ? 1 : -1, floor(P.ft / 0.45) % 3 === 1 ? POKE : PERCH];\n    if (u >= 1) go(4);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 3, 0.06], sp = cl(k[0], 0, 2), sk = cl(k[3], 0, 1), nn = cl(k[2], 3, 9), M = P.main;\n  if (abs(sp - P.sp) > 0.004) (P.sp = sp), species(P, sp), (P.sk = -1);\n  if (abs(sk - P.sk) > 0.002) (P.sk = sk), paint(P);\n  P.nn = round(nn) - 1;\n  if (!P.bend) {\n    // Start halfway through a strand.\n    M.nb = min(M.S.length - 1, M.S.pre + 3 + round(((nn - 3) / 6) * (M.S.fr - M.S.pre - 3)));\n    for (let j = 0; j \u003c M.nb; j++) M.age[j] = -(M.nb - j) * 7.8;\n    Object.assign(P, { bs: WEAVE, bt: 1.4, rev: 0, strip: 0, bend: [0, 0] });\n  }\n  if (input.btnPressed?.[0]) callFemale(P);\n  const d = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  P.t += d;\n  for (const n of [M, ...P.col]) {\n    n.sw = (0.55 * sin(P.t * 0.9 + n.ph) + 0.3 * sin(P.t * 2.3 + n.ph * 2)) * (1.4 - n.s * 0.4);\n    n.dv += (-70 * n.dip - 5 * n.dv) * d;\n    n.dip = cl(n.dip + n.dv * d, -3, 4);\n  }\n  if (M.fall) {\n    M.fall += (M.fv += 90 * d) * d;\n    if (M.y + M.fall > WTOP + 2) (P.spx = M.x - 2), (P.spt = 0), (M.fall = M.nb = 0), (M.seed += 11), species(P, P.sp);\n  }\n  stepMale(P, d);\n  if (P.fs) stepFemale(P, d);\n  P.spt += d;\n}\n\nlet BUF, TT;\nfunction Ao(o, r, g, b, a = 1) {\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nconst A = (x, y, r, g, b, a) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && Ao((y * W + x) * 3, r, g, b, a);\nconst AL = (x, y, c, k = 1) => A(x, y, c[0] * k * TT[0], c[1] * k * TT[1], c[2] * k * TT[2]);\n\n// Flipped, he hangs upside down; turned, he hangs head down with his wings going.\nfunction drawBird(S, pl, x0, y0, face, flip, turn) {\n  const ox = round(x0), oy = round(y0);\n  S.rows.forEach((row, r) =>\n    [...row].forEach((ch, c, _, col = ch === \"M\" && (c + r) & 1 ? pl.m : pl[ch]) => col && (turn ? AL(ox + (r - S.ay) * face, oy + c - S.ax, col) : AL(ox + (c - S.ax) * face, oy + (flip ? S.ay - r : r - S.ay), col))),\n  );\n  return [ox + (S.tx - S.ax) * face, oy + (flip ? S.ay - S.ty : S.ty - S.ay)];\n}\n\n// A strip of grass from the bill: trailing in flight, hanging while he weaves.\nfunction strip(P, [x, y], len, face, flying) {\n  let a = flying ? (face > 0 ? PI * 0.9 : PI * 0.1) : PI / 2 - face * 0.6;\n  const tg = flying ? a : PI / 2;\n  for (let i = 0; i \u003c len; i++) {\n    a += (tg - a) * 0.15 + 0.12 * sin(P.t * 9 + i * 0.8);\n    AL(round((x += cos(a))), round((y += sin(a))), P.fresh, 1.1 + 0.15 * sin(i));\n  }\n}\n\nfunction drawNest(P, n, nb, rev, light) {\n  const S = n.S, F = S.F, sd = (P.sx > 32 ? 1 : -1) * n.face, { x: nx, s, face, sw } = n, ny = n.y + n.dip + n.fall, lim = min(nb, S.length - 1), C = [];\n  for (let j = 0; j \u003c= lim; j++) {\n    C[j] = (n.fresh ? mixc(P.fresh, STRAW, (0.7 * (nb - j)) / 12) : n.old >= 0 ? mixc(STRAW, OLD, n.old) : mixc(P.fresh, STRAW, sm((P.t - (n.age[j] ?? P.t)) / 45))).map((v, c) => v * TT[c]);\n  }\n  const lit = (lx, ly) => 0.84 + 0.16 * cl((lx * sd) / 9 - (ly - S.by) / 20, -1, 1), at = (lx, ly) => [round(nx + sw * (1 + (ly * s) / 20) + lx * s * face), round(ny + ly * s)];\n  n.low = -99;\n  for (let i = 0; i \u003c F.length; i += 3) {\n    const k = F[i + 2] % 1000, lx = F[i], ly = F[i + 1];\n    if (k > lim || (k === nb && rev \u003c 0.7)) continue;\n    // The wall behind the strands: straw in slanting runs, the entrance mouth dark.\n    const [xi, yi] = at(lx, ly), c = C[k], q = F[i + 2] > 999 ? 0.15 : light * lit(lx, ly) * (0.68 + 0.1 * hash(i, 5) + 0.12 * sin((lx * 0.8 + ly) * 2.2 + 1.5 * sin(lx * 0.5 - ly * 0.3)));\n    A(xi, yi, c[0] * q, c[1] * q, c[2] * q);\n    if (yi > n.low) [n.low, n.lowx] = [yi, xi];\n  }\n  for (let j = 0; j \u003c= lim; j++) {\n    const p = S[j].p, m = j \u003c nb ? p.length : floor((rev * p.length) / 2) * 2, k0 = light * S[j].sh, [cr, cg, cb] = C[j];\n    for (let i = 0; i \u003c m; i += 2) {\n      const [xi, yi] = at(p[i], p[i + 1]), k = k0 * (lit(p[i], p[i + 1]) + ((i >> 2) & 1 ? 0.1 : -0.08));\n      A(xi, yi + 1, cr * 0.3, cg * 0.3, cb * 0.3, 0.3);\n      A(xi, yi, cr * k, cg * k, cb * k);\n    }\n  }\n}\n\nfunction twig(n) {\n  const [tx, ty] = nxy(n, 0, 0);\n  for (let i = 0, L = ceil(hypot(tx - n.rx, ty - n.ry) * 1.3); i \u003c= L; i++) AL(round(mix(n.rx, tx, i / L) + 1.5 * sin((PI * i) / L) * n.face), round(mix(n.ry, ty, i / L)), [96, 80, 64]);\n}\n\nfunction sky(P) {\n  // Clouds drift behind the tree; the crown flickers in the wind.\n  const { buf, mat, wet, t, sun } = P, off = t * 3, CT = P.cloud, cc = P.hor.map((v) => mix(v, 255, 0.55));\n  for (let p = 15 * W; p \u003c 86 * W; p++)\n    if (!mat[p]) {\n      const x = (p & 63) + off, x0 = floor(x), f = x - x0, r = ((p >> 7) - 7) * 128;\n      Ao(p * 3, cc[0], cc[1], cc[2], (CT[r + (x0 & 127)] * (1 - f) + CT[r + ((x0 + 1) & 127)] * f) * 0.8);\n    }\n  for (let p = 0; p \u003c 22 * W; p++) if (mat[p] === 2) for (let c = 0, s = 0.8 + 0.45 * CT[((p >> 6) + 8) * 128 + (((p & 63) + floor(t * 6)) & 127)]; c \u003c 3; c++) buf[p * 3 + c] *= s;\n  // Ripples on the water, and the sun's road across it.\n  for (let p = WTOP * W; p \u003c (NEAR + 2) * W; p++) {\n    if (!wet[p]) continue;\n    const x = p & 63, y = p >> 6, z = (y - WTOP) / 26, rp = sin(y * 1.9 + 2.4 * sin(x * 0.2 + t * 0.7 + y * 0.3) - t * 1.6), o = p * 3;\n    const g = rp > 0.75 ? cl((0.4 + 1.6 * sun * cl(1 - abs(x - P.sx) / (3 + 9 * z), 0, 1)) * wet[p], 0, 1) * 0.7 : 0;\n    for (let c = 0; c \u003c 3; c++) buf[o + c] = mix(buf[o + c] * (1 + 0.1 * rp * wet[p]), [255, 236, 190][c], g);\n  }\n  for (let r = P.spt * 9, x = floor(P.spx - r); P.spt \u003c 2.5 && x \u003c= P.spx + r; x++) A(x, round(WTOP + 2 + 0.2 * r * (1 - ((x - P.spx) / r) ** 2)), 240, 244, 240, 0.8 - P.spt * 0.3);\n}\n\nfunction reeds(P) {\n  for (let i = 0; i \u003c P.reedN; i++) {\n    const [rx, ry, h, ph, plume] = P.reeds[i], lean = sin(P.t * 1.4 + ph) * 0.8 + (i & 1 ? 1 : -1);\n    for (let j = 0; j \u003c h; j++) {\n      const x = round(rx + lean * (j / h) ** 2), k = 0.7 + (0.5 * j) / h;\n      AL(x, ry - j, [84, 140, 50], k);\n      if (j === round(h * 0.4) || j === round(h * 0.7)) for (let e = 1, sd = (j + i) & 1 ? 1 : -1; e \u003c 4; e++) AL(x + sd * e, ry - j - (e >> 1), [96, 156, 56], k);\n    }\n    if (plume) for (let j = 0; j \u003c 4; j++) AL(round(rx + lean) + (j & 1), ry - h - j, [160, 112, 74]);\n  }\n  for (let k = 0; k \u003c 2; k++) {\n    const [bx, by, h, lean] = PICK[k], [tx, ty] = bladeTip(P, k);\n    for (let j = 0; j \u003c= h; j++) {\n      const f = j / h, x = round(mix(bx, tx, f * f)), y = round(mix(by, ty, f));\n      AL(x, y, [96, 168, 56], 0.7 + 0.5 * f);\n      if (j % 4 === 2) AL(x - sign(lean) * (1 + (j & 4 ? 1 : 0)), y + 1, [80, 150, 50], 0.8);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, t, pal: pl, mat, shad } = P, M = P.main;\n  [BUF, TT] = [buf, P.tint];\n  buf.set(P.bg);\n  sky(P);\n  reeds(P);\n  // The colony; its males hang under their nests and flutter, sit on top, or are away.\n  for (let i = 0; i \u003c P.nn; i++) {\n    const n = P.col[i], c = (t * 0.06 + n.ph * 0.3) % 1, [x, y] = nxy(n, 2 * n.face, n.S.by + 3);\n    twig(n);\n    drawNest(P, n, n.fresh ? 10 : n.S.length, 0, 0.85);\n    if (n.fresh) drawBird(floor(t / 0.5) & 1 ? POKE : PERCH, pl, x + 5 * n.face, y - 3, -n.face);\n    else if (i % 3 !== 2) c \u003c 0.35 ? drawBird(flap(t), pl, n.lowx, n.low + 7, n.face, false, true) : c \u003c 0.55 && drawBird(PERCH, pl, ...nxy(n, -3, -3 / n.s), -n.face);\n  }\n  twig(M);\n  drawNest(P, M, M.nb, P.bs === WEAVE ? P.rev : 0, 1);\n  if (P.fs) drawBird(P.fp || FA, FPAL, P.fx, P.fy, P.ff);\n  if (P.show) drawBird(flap(t), pl, M.lowx, M.low + 7, 1, false, true);\n  else {\n    const tip = drawBird(P.pose, pl, P.bx, P.by, P.face, P.hang);\n    if (P.strip > 0.5) strip(P, tip, round(P.strip), P.face, P.bs === OUT || P.bs === BACK);\n    for (let i = 0; P.tear && i \u003c= 8; i++) AL(round(mix(tip[0], P.tear[0], i / 8)), round(mix(tip[1], P.tear[1], i / 8)), P.fresh, 1.1);\n  }\n  // Out to the panel, under the shadows of the passing clouds.\n  for (let p = 0, o = 0, so = floor(t * 3); p \u003c N; p++, o += 3) {\n    const s = mat[p] ? 1 - 0.4 * shad[((p & 63) + so - (p >> 7)) & 127] : 1;\n    display.setPixel(p & 63, p >> 6, cl(buf[o] * s, 0, 255), cl(buf[o + 1] * s, 0, 255), cl(buf[o + 2] * s, 0, 255));\n  }\n}\n","layer":{"id":"layer-weaver","type":"code","name":"weaver","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Weaver\n// Family:  bird\n// Idea:    A male village weaver builds his nest at the tip of an acacia twig over a river: he tears green strips off the reeds and threads them in, and the nest grows strand by strand from a ring to a round chamber with a downward entrance while old strips fade to straw.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 22, after field photographs of village weaver (Ploceus cucullatus) colonies\n// Round:   22\n// ===============================\n// @matrix 64x128\n// @knobs Plumage=0..2, Speed=0.2..3, Nests=3..9, Sky=0..1\n//\n// Knob 1: Plumage. A village weaver at 0, yellow with a black mask and a red eye, over a river; a golden weaver at 1 over a reed bed; a brown-masked baya weaver at 2 over a paddy field, its nests hung from a woven neck with a long tube.\n// Knob 2: Speed. How fast the birds, the wind and the water go: at 2 a strand takes him about eight seconds, there, back and woven in.\n// Knob 3: Nests. Three to nine nests in the tree, his among them. The bigger the colony, the further along his nest is at the start, from a ring with its roof begun to a chamber that wants only its entrance.\n// Knob 4: Sky. Morning at 0 with the sun low on the right, noon at 0.5, evening at 1 with the sun going down on the left.\n// Buttons: K1 tap calls a female: he hangs under his nest and flutters while she looks it over, and a finished nest she turns down he cuts loose into the river.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\n// The far bank, the water, the near bank; his twig's tip and root.\nconst [HOR, WTOP, NEAR, AX, AY, RX, RY] = [89, 95, 121, 37, 38, 40, 19];\nconst { min, max, floor, ceil, round, sin, cos, abs, hypot, pow, atan2, sign, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst mixc = (a, b, t) => a.map((v, i) => mix(v, b[i], t));\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n// Value noise that wraps every `per` cells.\nfunction vn(x, y, per = 4096) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const x0 = ((xi % per) + per) % per, x1 = (x0 + 1) % per, a = hash(x0, yi), b = hash(x1, yi), c = hash(x0, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(x1, yi + 1)) * su * sv;\n}\nconst hx = (s) => s.split(\" \").map((h) => [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)));\n\n// Village, golden, baya: plumage in KEYS order (crown, mask, eye, bill, nape, breast, back, streak,\n// wing, wing edge, tail), the fresh strip, and the nest's tube, neck and chamber radii.\nconst KEYS = \"CKEBNYMmWyT\";\nconst SP = [\n  [hx(\"18140e 100c0a f02418 221c18 b25c1a fcd61c f0ca20 28220c 2e2816 e8ca38 706426 5cb234\"), [5, 0, 9, 8.5]],\n  [hx(\"ffcc18 fa8c12 faf0ba 1e1812 ffc816 ffc610 e4ac10 c49216 a48c1c fcd02c a48a20 82bc38\"), [2, 0, 9.5, 9]],\n  [hx(\"ffd828 482e1a 402616 30241c fad22c f6d040 98703a 5c4226 684e2c d2b476 7c623c 9cc458\"), [15, 5, 7.5, 8.5]],\n];\nconst pal = (a) => Object.fromEntries([...KEYS].map((k, i) => [k, a[i]]).concat([[\"F\", [204, 150, 128]]]));\nconst FPAL = pal(hx(\"b4a04a d8c670 7c4a28 ccae86 b4a04a e8da92 a08a4a 64522e 725e34 c8b472 867240\"));\nconst [STRAW, OLD] = hx(\"ceb874 96805c\");\n\n// The bird facing right: rows, anchor, bill tip.\nconst pose = (s, ax, ay, tx, ty) => ({ rows: s.split(\" \"), ax, ay, tx, ty });\nconst PERCH = pose(\"......CCC .....NCCCC .....NKEKKB ....MMKKKBBB ...MmMYKK ..WWWMYYY .yWWWYYYY TyWWyYYY TT..YYY T...F.F\", 6, 5, 11, 3);\nconst POKE = pose(\". ...MMM ..WWMNCCC .yWWMNCCCC TyWWYMKEKKB TT.YYYKKKBBB T...YYYKK ....F.F\", 5, 4, 11, 5);\nconst FA = pose(\"...yW ...yWW ....yWW..CC TTMMMWWNCCKB ..TYYYYYKEKBB .....YYYYKK\", 6, 4, 12, 4);\nconst flap = (t) => (floor(t / 0.065) & 1 ? FB : FA);\nconst FB = pose(\".........CC TTMMMMMNCCKB ..TYYWWWYKEKBB .....yWWWKK ......yWW .......yW\", 6, 2, 12, 2);\n\n// Morning, noon, evening: sky overhead, at the horizon, the light, the sun.\nconst SKY = [\n  [...hx(\"5480c6 fcc28e\"), [1.08, 0.9, 0.74], 50, 79],\n  [...hx(\"2c72e0 acd6f6\"), [1, 1, 1], 40, -40],\n  [...hx(\"3e3686 ff8442\"), [1.12, 0.74, 0.56], 16, 84],\n];\n// The acacia: limbs as x0, y0, x1, y1, w0, w1, and the flat plates of its crown.\nconst LIMBS = [[6, 25, 24, 18, 3.6, 2.6], [24, 18, 44, 19, 2.6, 2], [44, 19, 63, 14, 2, 1.3], [40, 19, 57, 26, 1.7, 1.2], [57, 26, 64, 31, 1.2, 1], [7, 50, 20, 45, 2.8, 1.7], [20, 45, 28, 49, 1.7, 1]];\nconst PLATES = [[32, 3, 42, 6.5], [6, 11, 13, 5], [48, 10, 20, 4.5], [22, 12, 10, 3], [62, 16, 8, 3]];\n// The rest of the colony: twig tip, twig root, size, which way it faces.\nconst COLONY = [[13, 31, 14, 21, 0.72, -1], [55, 56, 57, 26, 0.8, 1], [19, 64, 19, 47, 0.72, 1], [52, 31, 50, 19, 0.62, -1], [29, 82, 26, 48, 0.62, 1], [61, 84, 62, 30, 0.6, -1], [26, 27, 27, 19, 0.52, 1], [14, 85, 12, 51, 0.58, -1]];\n// The two tall blades he strips: foot, height, lean.\nconst PICK = [[15, 123, 20, 3], [50, 122, 21, -2.5]];\nconst [WEAVE, OUT, TEAR, BACK, SHOW, CUT] = [0, 1, 2, 3, 4, 5];\nconst DUR = [3.2, 1.5, 1.4, 1.7, 1, 1.6];\n\n// A nest as strands in the order they go in, in LEDs from the twig tip, facing right: the neck\n// round the twig, the ring he stands in, the egg chamber from the roof round the back, the front\n// wall down to the entrance, the entrance tube. F says which strand closes each LED of the wall.\nfunction gen([tube, nk, rx, ry], seed, s) {\n  let c = 0;\n  const r = () => hash(seed, c++), S = [], cy = nk + 8, bx = -3, by = cy + 1.5, F = [];\n  const add = (p) => S.push({ p, sh: 0.85 + 0.3 * r() });\n  const arcs = (n, cx, cy, ax, ay, th, f0, keep) => {\n    for (let j = 0; j \u003c n; j++) {\n      const p = [], f = f0 + (1 - f0) * r(), t = th(j) + (r() - 0.5) * 0.7, sw = 1.6 + r(), ox = 2 * r() - 1, oy = 2 * r() - 1;\n      for (let a = -sw / 2; a \u003c sw / 2; a += 0.5 / (ax * f)) {\n        const x = cx + ox + cos(t + a) * ax * f, y = cy + oy + sin(t + a) * ay * f;\n        if (keep(x, y)) p.push(x, y);\n      }\n      add(p);\n    }\n  };\n  const ring = (x, y) => (x / 5) ** 2 + ((y - cy) / 7) ** 2, ball = (x, y) => ((x - bx) / rx) ** 2 + ((y - by) / ry) ** 2;\n  const door = (x, y) => y > cy + 4.5 && abs(x - 2) \u003c 2.5;\n  for (let y = 0; y \u003c nk - 0.5; y += 1.5) {\n    const p = [], w = 1 + y * 0.22;\n    for (let i = 0; i \u003c= 8; i++) p.push(-w + (w * i) / 4, y + i * 0.3);\n    add(p);\n  }\n  for (let i = 0; i \u003c 6; i++) {\n    const p = [], f = 0.9 + 0.2 * r(), a0 = r() * 6.3, sw = 4 + 2 * r();\n    for (let a = 0; a \u003c sw; a += 0.12) p.push(cos(a0 + a) * 5 * f, cy + sin(a0 + a) * 7 * f);\n    add(p);\n  }\n  const pre = S.length;\n  arcs(16, bx, by, rx, ry, (j) => -PI / 2 - (j / 15) * PI * 1.1, 0.45, (x, y) => ball(x, y) \u003c 1);\n  const ch = S.length;\n  arcs(7, 0, cy, 6, 8, (k) => -1.2 + k * 0.42, 0.35, (x, y) => ring(x, y) \u003c 1 && !door(x, y));\n  const fr = S.length, t0 = cy + 5, nt = 2 + round(tube / 2), dy = (tube + 3) / nt;\n  for (let k = 0; k \u003c nt; k++) {\n    const p = [], y = t0 + k * dy, hw = k \u003c 2 ? 4.4 - k : 2.6, c = 2.6 + (y - t0) * 0.08;\n    for (let i = 0; i \u003c= 8; i++) p.push(c - hw + (hw * i) / 4, y + i * 0.28);\n    add(p);\n  }\n  for (let y = 0; y \u003c t0 + tube + 4; y += 1 / s)\n    for (let x = -13; x \u003c 8; x += 1 / s) {\n      const g = ring(x, y), tk = floor((y - t0) / dy), w = (1.5 * PI - atan2((y - by) / ry, (x - bx) / rx)) % (2 * PI);\n      let k = -1;\n      if (y \u003c nk) k = abs(x) \u003c 1 + y * 0.22 ? floor(y / 1.5) : -1;\n      else if (g \u003c 1 && !door(x, y)) k = g > 0.6 ? pre - 6 : ch + cl(round((atan2((y - cy) / 8, x / 6) + 1.2) / 0.42), 0, 6);\n      else if (ball(x, y) \u003c 1 && !door(x, y)) k = pre + min(15, round(w / (PI * 0.0733)));\n      else if (y >= t0 && tk \u003c nt && abs(x - 2.6 - (y - t0) * 0.08) \u003c (tk \u003c 2 ? 4.4 - tk : 2.6)) k = fr + tk;\n      if (k >= 0) F.push(x, y, k + (y > t0 + tube + 1.8) * 1000);\n    }\n  return Object.assign(S, { pre, fr, by, F });\n}\n\n// A nest's point on the panel, swaying on its twig and dipping when a bird lands.\nconst nxy = (n, lx, ly) => [n.x + n.sw * (1 + (ly * n.s) / 20) + lx * n.s * n.face, n.y + n.dip + n.fall + ly * n.s];\n\nfunction build(P) {\n  const { alb, mat } = P;\n  const set = (x, y, m, r, g, b) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && ((mat[y * W + x] = m), alb.set([r, g, b], (y * W + x) * 3));\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, k = 0.8 + 0.3 * vn(x * 0.4, y * 0.8) + 0.1 * hash(x + 7, y);\n    if (y >= NEAR + round(2 * vn(x * 0.2, 4))) set(x, y, 5, 118 * k, 96 * k, 58 * k);\n    else if (y >= WTOP) set(x, y, 4, 0, 0, 0);\n    else if (y >= HOR) set(x, y, 3, 200 * k, 166 * k, 96 * k);\n  }\n  // Flat-topped acacias on the far bank.\n  for (let i = 0; i \u003c 6; i++) {\n    const cx = 12 + i * 10.5 + rnd() * 5, top = HOR - 4 - floor(rnd() * 4), w = 2 + rnd() * 4;\n    for (let y = top; y \u003c top + 2; y++) for (let x = round(cx - w - (y - top) * 1.5); x \u003c= cx + w + (y - top) * 1.5; x++) set(x, y, 6, 44, 60, 50);\n    for (let y = top + 2; y \u003c HOR; y++) set(round(cx), y, 6, 52, 56, 46);\n  }\n  const bark = (x, y, e, k = (0.72 + 0.4 * vn(x * 0.8, y * 0.16)) * (1.1 - 0.45 * e * e) * (e > 0.3 ? 1.12 : 1)) => set(x, y, 1, 112 * k, 94 * k, 76 * k);\n  for (let y = 10; y \u003c H; y++) for (let c = 5.5 + 1.8 * sin(y * 0.03 + 0.5), w = 2 + (y / H) * 2.2, x = floor(c - w); x \u003c= c + w; x++) bark(x, y, (x - c) / w);\n  for (const [x0, y0, x1, y1, w0, w1] of LIMBS)\n    for (let i = 0, n = ceil(hypot(x1 - x0, y1 - y0) * 2); i \u003c= n; i++) {\n      const f = i / n, x = mix(x0, x1, f), y = mix(y0, y1, f), w = mix(w0, w1, f);\n      for (let dy = -w / 2; dy \u003c= w / 2; dy += 0.5) bark(round(x), round(y + dy), (-2 * dy) / w);\n    }\n  for (const [cx, cy, rx, ry] of PLATES)\n    for (let y = floor(cy - ry); y \u003c= cy + ry; y++)\n      for (let x = floor(cx - rx); x \u003c= cx + rx; x++) {\n        const d = ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2, n = vn(x * 0.35, y * 0.5 + 20) * 0.7 + vn(x * 0.9, y * 1.1) * 0.3;\n        const k = 0.55 + 0.6 * n + (y \u003c cy - ry * 0.3 ? 0.28 : 0) - (y > cy + ry * 0.35 ? 0.2 : 0);\n        if (d \u003c 1 && n > 0.25 + 0.4 * d) set(x, y, 2, 80 * k, 118 * k, 44 * k);\n      }\n  // Reeds at the water's edge, and more out in a reed bed.\n  P.reeds = Array.from({ length: 40 }, (_, i) =>\n    i \u003c 12 ? [(i & 1 ? 44 : 10) + (i >> 1) * 2.4 + rnd() * 2, NEAR + 1, 12 + floor(rnd() * 9), rnd() * 7, i % 3 === 0] : [3 + rnd() * 60, WTOP + 4 + floor(rnd() * 20), 7 + floor(rnd() * 9), rnd() * 7, i % 2 === 0]);\n  P.shad = Float32Array.from({ length: 128 }, (_, i) => sm(1 - abs(i - 34) / 26) + 0.7 * sm(1 - abs(i - 96) / 16));\n  P.cloud = Float32Array.from({ length: 128 * 36 }, (_, i, x = i & 127, y = i >> 7) => sm((vn(x / 16, y / 4, 8) * 0.65 + vn(x / 7, y / 2.5 + 9, 128 / 7) * 0.35 - 0.5) * 3) * sm(1 - abs(y - 16) / 18));\n}\n\n// The sky for the hour, and the water and paddy that reflect it.\nfunction paint(P) {\n  const f = P.sk * 2, i = min(1, floor(f)), [top, hor, tint, sx, sy] = SKY[i].map((v, c) => (v.map ? mixc(v, SKY[i + 1][c], f - i) : mix(v, SKY[i + 1][c], f - i)));\n  const { alb, mat, bg, wet, rice } = P, G = [70, 160, 44];\n  Object.assign(P, { hor, tint, sx, sun: cl(1 - abs(sy - 70) / 60, 0, 1) });\n  for (let p = 0; p \u003c N; p++) {\n    const x = p & 63, y = p >> 6, m = mat[p], o = p * 3, ds = hypot(x - sx, (y - sy) * 1.2), z = (y - WTOP) / (NEAR - WTOP), row = (y - WTOP + 2) ** 0.7 * 1.6;\n    const band = m === 4 && row % 1 \u003c 0.42 && hash(x, floor(row)) > 0.15 ? rice : 0;\n    wet[p] = m === 4 ? 1 - band : 0;\n    for (let c = 0, a; c \u003c 3; c++)\n      (a = alb[o + c] * tint[c]),\n        (bg[o + c] =\n          m === 0 ? mix(top[c], hor[c], pow(y / HOR, 1.5)) + (sy > 0 ? (ds \u003c 3.2 ? 255 : 120 * Math.exp(-ds / 9)) : 0)\n          : m === 4 ? mix(mix(hor[c], top[c], 0.3 + 0.5 * z) * (0.8 - 0.2 * z), G[c] * tint[c] * (0.8 + 0.4 * hash(x, y)), band)\n          : m === 3 || m === 6 ? mix(a, hor[c], m === 6 ? 0.4 : 0.22)\n          : a);\n  }\n}\n\nfunction species(P, s) {\n  const i = min(1, floor(s)), f = s - i, [c0, q0] = SP[i], [c1, q1] = SP[i + 1], v = c0.map((c, j) => mixc(c, c1[j], f)), M = P.main;\n  Object.assign(P, { pal: pal(v), fresh: v[11], rice: cl(s - 1, 0, 1), reedN: 12 + round(28 * (1 - abs(s - 1))) });\n  for (const n of [M, ...P.col]) n.S = gen(mixc(q0, q1, f), n.seed, n.s);\n  M.nb = min(M.nb, M.S.length);\n}\n\nconst nest = (x, y, rx, ry, s, face, seed) => ({ x, y, rx, ry, s, face, seed, nb: 0, age: [], sw: 0, dip: 0, dv: 0, fall: 0, ph: rnd() * 7 });\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), mat: new Uint8Array(N), bg: F(N * 3), buf: F(N * 3), wet: F(N), sp: -1, sk: -1, t: 0, fs: 0, side: 0, spt: 9 });\n  P.main = nest(AX, AY, RX, RY, 1.3, 1, 7);\n  P.col = COLONY.map((c, i) => Object.assign(nest(...c, 101 + i * 37), { old: (i * 0.37) % 1, fresh: i === 2 }));\n  build(P);\n}\n\n// Where he clings to weave strand j at reveal u: outside the wall, facing it.\nfunction wpos(P, j, u) {\n  const M = P.main, p = M.S[min(j, M.S.length - 1)].p, i = min(p.length - 2, floor((u * p.length) / 2) * 2);\n  const [x, y] = nxy(M, p[i], p[i + 1]), [cx, cy] = nxy(M, -2, M.S.by), l = hypot(x - cx, y - cy) || 1, dx = (x - cx) / l, dy = (y - cy) / l;\n  return [x + dx * 4.5, y + dy * 4.5 + (dy > 0.55 ? 1 : -1), dx > 0 ? -1 : 1, dy > 0.55];\n}\nfunction bladeTip(P, k) {\n  const [bx, by, h, lean] = PICK[k], b = P.bend[k];\n  return [bx + lean + sin(P.t * 1.3 + k * 2) * 0.8 + b * sign(lean) * 0.8, by - h + b];\n}\n\nfunction stepMale(P, d) {\n  const M = P.main, held = P.fs && P.fs \u003c 4;\n  let u = (P.bt += d) / DUR[P.bs];\n  const go = (s) => ((P.bs = s), (P.bt = 0), (P.x0 = P.bx), (P.y0 = P.by));\n  const fly = ([tx, ty], arc) => ([P.face, P.bx, P.by, P.pose, P.hang] = [tx >= P.x0 ? 1 : -1, mix(P.x0, tx, sm(u)), mix(P.y0, ty, sm(u)) - arc * sin(PI * u), flap(P.bt), false]);\n  P.show = false;\n  if (held && !P.bs) (P.bt -= d), (P.show = true), (u = -1);\n  switch (P.bs) {\n    case WEAVE: {\n      if (u \u003c 0) break;\n      // Five passes, each a push through the wall and a tug that pulls it tight and shakes the twig.\n      const k = cl(u, 0, 1) * 5, q = floor(k), f = k - q, rv = min(1, (q + sm(f * 2.5)) / 5);\n      [P.bx, P.by, P.face, P.hang] = wpos(P, M.nb, rv);\n      [P.rev, P.pose, P.strip] = [rv, f \u003c 0.42 ? POKE : PERCH, (1 - rv) * 13];\n      if (f >= 0.42 && !P.tug) M.dv += 5;\n      P.tug = f >= 0.42;\n      if (u >= 1) (M.age[M.nb++] = P.t), (P.rev = P.strip = 0), go(M.nb >= M.S.length ? SHOW : OUT);\n      break;\n    }\n    case OUT:\n      P.tip = bladeTip(P, P.side);\n      fly([P.tip[0], P.tip[1] - 4], 5);\n      if (u >= 1) go(TEAR);\n      break;\n    case TEAR: {\n      // Bite low on the blade and back off up it, tearing a strip.\n      const t = bladeTip(P, P.side), e = sm((u - 0.25) / 0.6), fc = PICK[P.side][3] > 0 ? -1 : 1;\n      P.bend[P.side] = min(3, P.bend[P.side] + d * 12);\n      [P.face, P.pose, P.hang, P.bx, P.by] = [fc, u \u003c 0.25 || (u > 0.5 && u \u003c 0.6) ? POKE : PERCH, false, t[0] - fc * 3 * e, t[1] - 4 - 2 * e];\n      P.tear = u > 0.2 && u \u003c 0.88 ? [t[0] + fc * 3, t[1] + 6] : null;\n      if (u >= 1) (P.tear = null), (P.strip = 13), go(BACK), (P.side ^= 1);\n      break;\n    }\n    case BACK:\n      fly(wpos(P, M.nb, 0), 6);\n      if (u >= 1) (M.dv += 16), go(WEAVE);\n      break;\n    case SHOW:\n      P.show = true;\n      if (!P.fs && P.bt > 0.8) callFemale(P);\n      if (P.reject) (P.reject = false), go(CUT);\n      break;\n    case CUT: {\n      const [x, y] = nxy(M, 0, 0);\n      [P.bx, P.by, P.face, P.hang, P.pose] = [x - 3, y - 3, 1, false, floor(P.bt / 0.2) & 1 ? POKE : PERCH];\n      if (u >= 1) (M.fv = -10), (M.fall = 0.01), (M.dv -= 20), go(OUT);\n    }\n  }\n  if (P.bs !== TEAR) P.bend = P.bend.map((b) => max(0, b - d * 8));\n}\n\nfunction callFemale(P) {\n  if (!P.fs) Object.assign(P, { fs: 1, ft: 0, fx0: 70, fy0: 30 + rnd() * 20 });\n}\nfunction stepFemale(P, d) {\n  const M = P.main, done = M.nb >= M.S.length, [rx, ry] = nxy(M, -3, M.S.by - 8.5).map((v, i) => v - 1 - 4 * i), u = (P.ft += d) / [1, 1.8, 3.4, 1, 1.8][P.fs];\n  const go = (s) => ((P.fs = s), (P.ft = 0), (P.fx0 = P.fx), (P.fy0 = P.fy));\n  if (P.fs === 1 || P.fs === 4) {\n    const [tx, ty] = P.fs === 1 ? [rx, ry] : [-12, 24];\n    [P.fx, P.fy, P.ff, P.fp] = [mix(P.fx0, tx, sm(u)), mix(P.fy0, ty, sm(u)) - 5 * sin(PI * u), tx > P.fx0 ? 1 : -1, flap(P.ft)];\n    if (P.fs === 1 && u >= 1) (M.dv += 10), go(2);\n    if (P.fs === 4 && u >= 1) (P.fs = 0), (P.reject = done);\n  } else {\n    [P.fx, P.fy, P.ff, P.fp] = [rx, ry, floor(P.ft / 0.9) & 1 ? 1 : -1, floor(P.ft / 0.45) % 3 === 1 ? POKE : PERCH];\n    if (u >= 1) go(4);\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 3, 0.06], sp = cl(k[0], 0, 2), sk = cl(k[3], 0, 1), nn = cl(k[2], 3, 9), M = P.main;\n  if (abs(sp - P.sp) > 0.004) (P.sp = sp), species(P, sp), (P.sk = -1);\n  if (abs(sk - P.sk) > 0.002) (P.sk = sk), paint(P);\n  P.nn = round(nn) - 1;\n  if (!P.bend) {\n    // Start halfway through a strand.\n    M.nb = min(M.S.length - 1, M.S.pre + 3 + round(((nn - 3) / 6) * (M.S.fr - M.S.pre - 3)));\n    for (let j = 0; j \u003c M.nb; j++) M.age[j] = -(M.nb - j) * 7.8;\n    Object.assign(P, { bs: WEAVE, bt: 1.4, rev: 0, strip: 0, bend: [0, 0] });\n  }\n  if (input.btnPressed?.[0]) callFemale(P);\n  const d = cl(dt, 0, 0.1) * (cl(k[1], 0.2, 3) / 2);\n  P.t += d;\n  for (const n of [M, ...P.col]) {\n    n.sw = (0.55 * sin(P.t * 0.9 + n.ph) + 0.3 * sin(P.t * 2.3 + n.ph * 2)) * (1.4 - n.s * 0.4);\n    n.dv += (-70 * n.dip - 5 * n.dv) * d;\n    n.dip = cl(n.dip + n.dv * d, -3, 4);\n  }\n  if (M.fall) {\n    M.fall += (M.fv += 90 * d) * d;\n    if (M.y + M.fall > WTOP + 2) (P.spx = M.x - 2), (P.spt = 0), (M.fall = M.nb = 0), (M.seed += 11), species(P, P.sp);\n  }\n  stepMale(P, d);\n  if (P.fs) stepFemale(P, d);\n  P.spt += d;\n}\n\nlet BUF, TT;\nfunction Ao(o, r, g, b, a = 1) {\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n}\nconst A = (x, y, r, g, b, a) => x >= 0 && x \u003c W && y >= 0 && y \u003c H && Ao((y * W + x) * 3, r, g, b, a);\nconst AL = (x, y, c, k = 1) => A(x, y, c[0] * k * TT[0], c[1] * k * TT[1], c[2] * k * TT[2]);\n\n// Flipped, he hangs upside down; turned, he hangs head down with his wings going.\nfunction drawBird(S, pl, x0, y0, face, flip, turn) {\n  const ox = round(x0), oy = round(y0);\n  S.rows.forEach((row, r) =>\n    [...row].forEach((ch, c, _, col = ch === \"M\" && (c + r) & 1 ? pl.m : pl[ch]) => col && (turn ? AL(ox + (r - S.ay) * face, oy + c - S.ax, col) : AL(ox + (c - S.ax) * face, oy + (flip ? S.ay - r : r - S.ay), col))),\n  );\n  return [ox + (S.tx - S.ax) * face, oy + (flip ? S.ay - S.ty : S.ty - S.ay)];\n}\n\n// A strip of grass from the bill: trailing in flight, hanging while he weaves.\nfunction strip(P, [x, y], len, face, flying) {\n  let a = flying ? (face > 0 ? PI * 0.9 : PI * 0.1) : PI / 2 - face * 0.6;\n  const tg = flying ? a : PI / 2;\n  for (let i = 0; i \u003c len; i++) {\n    a += (tg - a) * 0.15 + 0.12 * sin(P.t * 9 + i * 0.8);\n    AL(round((x += cos(a))), round((y += sin(a))), P.fresh, 1.1 + 0.15 * sin(i));\n  }\n}\n\nfunction drawNest(P, n, nb, rev, light) {\n  const S = n.S, F = S.F, sd = (P.sx > 32 ? 1 : -1) * n.face, { x: nx, s, face, sw } = n, ny = n.y + n.dip + n.fall, lim = min(nb, S.length - 1), C = [];\n  for (let j = 0; j \u003c= lim; j++) {\n    C[j] = (n.fresh ? mixc(P.fresh, STRAW, (0.7 * (nb - j)) / 12) : n.old >= 0 ? mixc(STRAW, OLD, n.old) : mixc(P.fresh, STRAW, sm((P.t - (n.age[j] ?? P.t)) / 45))).map((v, c) => v * TT[c]);\n  }\n  const lit = (lx, ly) => 0.84 + 0.16 * cl((lx * sd) / 9 - (ly - S.by) / 20, -1, 1), at = (lx, ly) => [round(nx + sw * (1 + (ly * s) / 20) + lx * s * face), round(ny + ly * s)];\n  n.low = -99;\n  for (let i = 0; i \u003c F.length; i += 3) {\n    const k = F[i + 2] % 1000, lx = F[i], ly = F[i + 1];\n    if (k > lim || (k === nb && rev \u003c 0.7)) continue;\n    // The wall behind the strands: straw in slanting runs, the entrance mouth dark.\n    const [xi, yi] = at(lx, ly), c = C[k], q = F[i + 2] > 999 ? 0.15 : light * lit(lx, ly) * (0.68 + 0.1 * hash(i, 5) + 0.12 * sin((lx * 0.8 + ly) * 2.2 + 1.5 * sin(lx * 0.5 - ly * 0.3)));\n    A(xi, yi, c[0] * q, c[1] * q, c[2] * q);\n    if (yi > n.low) [n.low, n.lowx] = [yi, xi];\n  }\n  for (let j = 0; j \u003c= lim; j++) {\n    const p = S[j].p, m = j \u003c nb ? p.length : floor((rev * p.length) / 2) * 2, k0 = light * S[j].sh, [cr, cg, cb] = C[j];\n    for (let i = 0; i \u003c m; i += 2) {\n      const [xi, yi] = at(p[i], p[i + 1]), k = k0 * (lit(p[i], p[i + 1]) + ((i >> 2) & 1 ? 0.1 : -0.08));\n      A(xi, yi + 1, cr * 0.3, cg * 0.3, cb * 0.3, 0.3);\n      A(xi, yi, cr * k, cg * k, cb * k);\n    }\n  }\n}\n\nfunction twig(n) {\n  const [tx, ty] = nxy(n, 0, 0);\n  for (let i = 0, L = ceil(hypot(tx - n.rx, ty - n.ry) * 1.3); i \u003c= L; i++) AL(round(mix(n.rx, tx, i / L) + 1.5 * sin((PI * i) / L) * n.face), round(mix(n.ry, ty, i / L)), [96, 80, 64]);\n}\n\nfunction sky(P) {\n  // Clouds drift behind the tree; the crown flickers in the wind.\n  const { buf, mat, wet, t, sun } = P, off = t * 3, CT = P.cloud, cc = P.hor.map((v) => mix(v, 255, 0.55));\n  for (let p = 15 * W; p \u003c 86 * W; p++)\n    if (!mat[p]) {\n      const x = (p & 63) + off, x0 = floor(x), f = x - x0, r = ((p >> 7) - 7) * 128;\n      Ao(p * 3, cc[0], cc[1], cc[2], (CT[r + (x0 & 127)] * (1 - f) + CT[r + ((x0 + 1) & 127)] * f) * 0.8);\n    }\n  for (let p = 0; p \u003c 22 * W; p++) if (mat[p] === 2) for (let c = 0, s = 0.8 + 0.45 * CT[((p >> 6) + 8) * 128 + (((p & 63) + floor(t * 6)) & 127)]; c \u003c 3; c++) buf[p * 3 + c] *= s;\n  // Ripples on the water, and the sun's road across it.\n  for (let p = WTOP * W; p \u003c (NEAR + 2) * W; p++) {\n    if (!wet[p]) continue;\n    const x = p & 63, y = p >> 6, z = (y - WTOP) / 26, rp = sin(y * 1.9 + 2.4 * sin(x * 0.2 + t * 0.7 + y * 0.3) - t * 1.6), o = p * 3;\n    const g = rp > 0.75 ? cl((0.4 + 1.6 * sun * cl(1 - abs(x - P.sx) / (3 + 9 * z), 0, 1)) * wet[p], 0, 1) * 0.7 : 0;\n    for (let c = 0; c \u003c 3; c++) buf[o + c] = mix(buf[o + c] * (1 + 0.1 * rp * wet[p]), [255, 236, 190][c], g);\n  }\n  for (let r = P.spt * 9, x = floor(P.spx - r); P.spt \u003c 2.5 && x \u003c= P.spx + r; x++) A(x, round(WTOP + 2 + 0.2 * r * (1 - ((x - P.spx) / r) ** 2)), 240, 244, 240, 0.8 - P.spt * 0.3);\n}\n\nfunction reeds(P) {\n  for (let i = 0; i \u003c P.reedN; i++) {\n    const [rx, ry, h, ph, plume] = P.reeds[i], lean = sin(P.t * 1.4 + ph) * 0.8 + (i & 1 ? 1 : -1);\n    for (let j = 0; j \u003c h; j++) {\n      const x = round(rx + lean * (j / h) ** 2), k = 0.7 + (0.5 * j) / h;\n      AL(x, ry - j, [84, 140, 50], k);\n      if (j === round(h * 0.4) || j === round(h * 0.7)) for (let e = 1, sd = (j + i) & 1 ? 1 : -1; e \u003c 4; e++) AL(x + sd * e, ry - j - (e >> 1), [96, 156, 56], k);\n    }\n    if (plume) for (let j = 0; j \u003c 4; j++) AL(round(rx + lean) + (j & 1), ry - h - j, [160, 112, 74]);\n  }\n  for (let k = 0; k \u003c 2; k++) {\n    const [bx, by, h, lean] = PICK[k], [tx, ty] = bladeTip(P, k);\n    for (let j = 0; j \u003c= h; j++) {\n      const f = j / h, x = round(mix(bx, tx, f * f)), y = round(mix(by, ty, f));\n      AL(x, y, [96, 168, 56], 0.7 + 0.5 * f);\n      if (j % 4 === 2) AL(x - sign(lean) * (1 + (j & 4 ? 1 : 0)), y + 1, [80, 150, 50], 0.8);\n    }\n  }\n}\n\nexport function draw(display, params) {\n  const P = params, { buf, t, pal: pl, mat, shad } = P, M = P.main;\n  [BUF, TT] = [buf, P.tint];\n  buf.set(P.bg);\n  sky(P);\n  reeds(P);\n  // The colony; its males hang under their nests and flutter, sit on top, or are away.\n  for (let i = 0; i \u003c P.nn; i++) {\n    const n = P.col[i], c = (t * 0.06 + n.ph * 0.3) % 1, [x, y] = nxy(n, 2 * n.face, n.S.by + 3);\n    twig(n);\n    drawNest(P, n, n.fresh ? 10 : n.S.length, 0, 0.85);\n    if (n.fresh) drawBird(floor(t / 0.5) & 1 ? POKE : PERCH, pl, x + 5 * n.face, y - 3, -n.face);\n    else if (i % 3 !== 2) c \u003c 0.35 ? drawBird(flap(t), pl, n.lowx, n.low + 7, n.face, false, true) : c \u003c 0.55 && drawBird(PERCH, pl, ...nxy(n, -3, -3 / n.s), -n.face);\n  }\n  twig(M);\n  drawNest(P, M, M.nb, P.bs === WEAVE ? P.rev : 0, 1);\n  if (P.fs) drawBird(P.fp || FA, FPAL, P.fx, P.fy, P.ff);\n  if (P.show) drawBird(flap(t), pl, M.lowx, M.low + 7, 1, false, true);\n  else {\n    const tip = drawBird(P.pose, pl, P.bx, P.by, P.face, P.hang);\n    if (P.strip > 0.5) strip(P, tip, round(P.strip), P.face, P.bs === OUT || P.bs === BACK);\n    for (let i = 0; P.tear && i \u003c= 8; i++) AL(round(mix(tip[0], P.tear[0], i / 8)), round(mix(tip[1], P.tear[1], i / 8)), P.fresh, 1.1);\n  }\n  // Out to the panel, under the shadows of the passing clouds.\n  for (let p = 0, o = 0, so = floor(t * 3); p \u003c N; p++, o += 3) {\n    const s = mat[p] ? 1 - 0.4 * shad[((p & 63) + so - (p >> 7)) & 127] : 1;\n    display.setPixel(p & 63, p >> 6, cl(buf[o] * s, 0, 255), cl(buf[o + 1] * s, 0, 255), cl(buf[o + 2] * s, 0, 255));\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Plumage=0..2, Speed=0.2..3, Nests=3..9, Sky=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Plumage","min":0,"max":2,"about":"A village weaver at 0, yellow with a black mask and a red eye, over a river; a golden weaver at 1 over a reed bed; a brown-masked baya weaver at 2 over a paddy field, its nests hung from a woven neck with a long tube."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the birds, the wind and the water go: at 2 a strand takes him about eight seconds, there, back and woven in."},{"name":"Nests","min":3,"max":9,"about":"Three to nine nests in the tree, his among them. The bigger the colony, the further along his nest is at the start, from a ring with its roof begun to a chamber that wants only its entrance."},{"name":"Sky","min":0,"max":1,"about":"Morning at 0 with the sun low on the right, noon at 0.5, evening at 1 with the sun going down on the left."}],"start":[0,2,3,0.06],"measures":{"motion":0.1278,"detail":0.0716,"edges":0.3689,"complexity":2.2916,"coverage":0.9985,"colour":0.2367,"drift":0.0436},"knobResponse":[0.0466,0.0543,0.0568,0.2018]},{"slug":"wireworld","title":"Wireworld","family":"automata","round":16,"note":"구리선 회로를 전자가 파란 머리와 주황 꼬리로 달려요. 둘레 12, 18, 24, 30칸 클록 넷의 신호가 다이오드와 지연선을 지나 XOR 과 OR 게이트에서 만나고, 아래 램프 셋이 그 답을 깜박여요. K1 을 누르면 네 줄에 전자 여섯 개씩이 박자를 맞춰 들어가요.","idea":"A working Wireworld circuit fills the tall panel: four clock loops of 12, 18, 24 and 30 cells send electrons down through diodes and delay lines into XOR and OR gates, and three lamps at the foot flash out what the gates decide.","buttons":"K1 tap feeds six electrons in a row into each of the four lines, timed to meet at the gates: the first XOR lamp goes dark for six bits while the OR lamp and the last lamp burn.","code":"// ===== Patternflow pattern =====\n// Title:   Wireworld\n// Family:  automata\n// Idea:    A working Wireworld circuit fills the tall panel: four clock loops of 12, 18, 24 and 30 cells send electrons down through diodes and delay lines into XOR and OR gates, and three lamps at the foot flash out what the gates decide.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Brian Silverman's Wireworld (1987), as A. K. Dewdney described it in Scientific American in January 1990\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..3, Speed=0..4, Pulses=1..3, Glow=0..1\n//\n// Knob 1: Palette. 0 copper wire with blue-white heads and red-orange tails, 1 green phosphor, 2 blueprint, 3 neon.\n// Knob 2: Speed. Ticks per second, from 2 to 14 (8 at the start); the afterglow behind an electron fades in a quarter second at any speed, so a fast electron draws a long streak and a slow one hops cell to cell.\n// Knob 3: Pulses. One, two or three electrons on each clock loop, six cells apart (the 12-cell loop holds two), which changes the rhythm of every lamp; at three the first XOR gets a pulse on both inputs every bit and its lamp goes out.\n// Knob 4: Glow. The light electrons and lamps throw on the dark board, from a one-LED rim to a bloom four LEDs wide, and the afterglow stretches from 0.25 s to 0.8 s.\n// Buttons: K1 tap feeds six electrons in a row into each of the four lines, timed to meet at the gates: the first XOR lamp goes dark for six bits while the OR lamp and the last lamp burn.\n\nconst W = 64;\nconst H = 128;\n// One Wireworld cell is 2x2 LEDs: a wire is two LEDs wide and a head reads\n// as a block, which a single LED on this panel does not.\nconst CW = 32;\nconst CH = 64;\nconst NC = CW * CH;\nconst HEAD = 1;\nconst TAIL = 2;\nconst WIRE = 3;\n// Every loop is a multiple of six cells long, so every electron in the\n// circuit rides a six-tick bit grid. Pulses that meet at a gate either arrive\n// on the same tick or a whole bit apart; anything closer merges in the XOR\n// and the gate no longer computes.\nconst BIT = 6;\nconst PRE = 240;\n// Copper warms with the electrons that cross it and cools over this many\n// seconds, so a busy line glows a little warmer than an idle one.\nconst HEAT = 1.5;\n\n// Gates drawn for signals flowing down the panel. The diode passes downward\n// and its block of three stops an electron coming up. The XOR is the usual\n// Wireworld one with a loop: one input passes, two on the same tick put three\n// heads next to the output cell, which then stays copper. The OR is the same\n// junction without the loop.\nconst DIODE = ['.#.', '###', '#.#', '.#.'];\nconst XOR = ['#.....#', '#.###.#', '.##.##.', '..#.#..', '..###..', '...#...'];\nconst OR = ['#...#', '#.#.#', '.###.', '..#..'];\n\n// Where each loop's first electron sits at tick 0, counted clockwise from the\n// loop's top left cell. Found by running the circuit: with these, A and B\n// reach the first XOR on the same tick of the bit, C and D the OR, and the\n// two gate outputs the last XOR. The fifth is the six-cell heartbeat.\nconst PHASE = [0, 1, 4, 4, 0];\n// Ticks each line holds a K1 burst back. From the feed points the first XOR\n// is 45 ticks away along A and 49 along B, the OR 20 along C and 46 along D,\n// and the outputs reach the last XOR 58 and 32 ticks after A and C were fed;\n// with these waits the six bits of every line meet their partners together.\nconst WAIT = [4, 0, 30, 4];\n// Pulses k puts min(k, m) electrons, spread evenly, on a loop of m bits:\n// loop A has two, B three, C four, D five.\nfunction slotsOf(k, m) {\n  const n = Math.min(k, m);\n  const out = [];\n  for (let j = 0; j \u003c n; j++) out.push(Math.floor((j * m) / n));\n  return out;\n}\n\n// Trace, component, head, tail and lamp for each palette. Components (the\n// diodes, gates and lamp loops) are a lighter metal than the traces, so the\n// parts read as parts.\nconst PALETTES = [\n  [[128, 84, 16], [172, 132, 64], [175, 215, 255], [255, 80, 16], [255, 226, 150]],\n  [[26, 84, 34], [70, 140, 80], [215, 255, 215], [40, 210, 80], [190, 255, 130]],\n  [[30, 60, 138], [90, 120, 190], [255, 255, 255], [40, 205, 255], [215, 240, 255]],\n  [[84, 28, 116], [140, 80, 170], [120, 255, 235], [255, 40, 150], [255, 210, 100]],\n];\n\nfunction buildMap() {\n  // 1 for a trace, 2 for a component.\n  const map = new Uint8Array(NC);\n  const rings = [];\n  let ink = 1;\n  const set = (x, y) => {\n    if (x >= 0 && x \u003c CW && y >= 0 && y \u003c CH) map[y * CW + x] = ink;\n  };\n  // A polyline of straight and 45 degree runs.\n  const path = (pts) => {\n    for (let i = 0; i \u003c pts.length - 1; i++) {\n      let x = pts[i][0];\n      let y = pts[i][1];\n      const x1 = pts[i + 1][0];\n      const y1 = pts[i + 1][1];\n      set(x, y);\n      while (x !== x1 || y !== y1) {\n        x += Math.sign(x1 - x);\n        y += Math.sign(y1 - y);\n        set(x, y);\n      }\n    }\n  };\n  const stamp = (x, y, rows) => {\n    ink = 2;\n    for (let j = 0; j \u003c rows.length; j++) for (let i = 0; i \u003c rows[j].length; i++) if (rows[j][i] === '#') set(x + i, y + j);\n    ink = 1;\n  };\n  // A loop w cells across and h down with its corners cut, so each cell\n  // touches exactly two others and the length is 2(w + h). Kept in clockwise\n  // order for placing electrons.\n  const ring = (x, y, w, h) => {\n    const c = [];\n    for (let i = 1; i \u003c= w; i++) c.push([x + i, y]);\n    for (let j = 1; j \u003c= h; j++) c.push([x + w + 1, y + j]);\n    for (let i = w; i >= 1; i--) c.push([x + i, y + h + 1]);\n    for (let j = h; j >= 1; j--) c.push([x, y + j]);\n    for (const [a, b] of c) set(a, b);\n    rings.push(c.map(([a, b]) => b * CW + a));\n  };\n  // A lamp is a loop the signal enters at one side; it splits both ways\n  // round and the halves cancel on the far side. Its glass is the hole.\n  const lamps = [];\n  const lamp = (x, y, w, trig) => {\n    ink = 2;\n    ring(x, y, w, w);\n    ink = 1;\n    lamps.push({ ring: rings.pop(), trig: trig[1] * CW + trig[0], cx: 2 * x + w + 2, cy: 2 * y + w + 2, rad: w + 0.15 });\n  };\n  // A delay line: runs between x0 and x1 two cells apart, turning on the\n  // diagonal so no cell of one run touches the next.\n  const meander = (pts, x0, x1, y, runs) => {\n    for (let r = 0; r \u003c runs; r++, y += 2) {\n      if (r % 2 === 0) pts.push([x1, y], [x1 + 1, y + 1]);\n      else pts.push([x0, y], [x0 - 1, y + 1]);\n    }\n    return pts;\n  };\n\n  // The four clocks stand on row 11 like organ pipes, 12, 18, 24 and 30\n  // cells round, each tapped at the bottom and guarded by a diode.\n  ring(1, 6, 2, 4);\n  ring(8, 4, 3, 6);\n  ring(16, 2, 4, 8);\n  ring(24, 0, 5, 10);\n  for (const x of [3, 10, 19, 27]) {\n    set(x, 12);\n    stamp(x - 1, 13, DIODE);\n  }\n  // Over clock A a six-cell loop, one bit round, beats the bit into a\n  // small lamp.\n  ring(0, 0, 1, 2);\n  path([[3, 1], [4, 1]]);\n  lamp(5, 0, 2, [5, 1]);\n  // A: a horizontal delay line. B: three long verticals, down, up, down.\n  // C: a zigzag. D: the delay line again.\n  path(meander([[3, 16], [3, 17], [1, 19]], 1, 5, 19, 7).concat([[4, 34], [4, 35]]));\n  path([[10, 16], [10, 17], [9, 18], [9, 32], [10, 33], [11, 32], [11, 19], [12, 18], [13, 19], [13, 33], [11, 35]]);\n  path([[19, 16], [19, 17], [22, 20], [16, 26], [22, 32], [22, 34], [21, 35], [21, 36]]);\n  path(meander([[27, 16], [27, 17], [25, 19]], 25, 29, 19, 7).concat([[26, 36]]));\n  stamp(4, 36, XOR);\n  stamp(21, 37, OR);\n  // Each gate's output forks: one branch winds down to its own lamp, the\n  // other meets the other gate's in the last XOR.\n  path([[7, 41], [7, 43], [6, 44], [2, 48], [8, 48], [9, 49], [8, 50], [1, 50], [0, 51], [1, 52], [8, 52], [9, 53], [8, 54], [3, 54], [3, 56]]);\n  path([[7, 43], [8, 44], [12, 48]]);\n  path([[23, 40], [23, 43], [22, 44], [19, 47], [19, 48]]);\n  path([[23, 43], [24, 44], [28, 48], [23, 48], [22, 49], [23, 50], [30, 50], [31, 51], [30, 52], [23, 52], [22, 53], [23, 54], [28, 54], [28, 56]]);\n  stamp(13, 49, XOR);\n  path([[16, 54], [16, 56]]);\n  lamp(0, 57, 4, [3, 57]);\n  lamp(13, 57, 4, [16, 57]);\n  lamp(26, 57, 4, [28, 57]);\n  return { map, rings, lamps };\n}\n\nexport function setup(params) {\n  const P = params;\n  const { map, rings, lamps } = buildMap();\n  // Index the copper: a step only visits wire cells, each with the list of\n  // wire cells it touches.\n  const id = new Int16Array(NC).fill(-1);\n  let n = 0;\n  for (let p = 0; p \u003c NC; p++) if (map[p]) id[p] = n++;\n  P.nw = n;\n  P.pos = new Int16Array(n);\n  P.part = new Uint8Array(n);\n  P.nb = new Int16Array(n * 8).fill(-1);\n  for (let p = 0; p \u003c NC; p++) {\n    const i = id[p];\n    if (i \u003c 0) continue;\n    P.pos[i] = p;\n    P.part[i] = map[p] === 2 ? 1 : 0;\n    const x = p % CW;\n    const y = (p / CW) | 0;\n    let k = 0;\n    for (let dy = -1; dy \u003c= 1; dy++)\n      for (let dx = -1; dx \u003c= 1; dx++) {\n        if (!dx && !dy) continue;\n        const xx = x + dx;\n        const yy = y + dy;\n        if (xx \u003c 0 || yy \u003c 0 || xx >= CW || yy >= CH) continue;\n        if (id[yy * CW + xx] >= 0) P.nb[i * 8 + k++] = id[yy * CW + xx];\n      }\n  }\n  P.id = id;\n  P.clocks = rings.map((r) => r.map((p) => id[p]));\n  P.lamps = lamps.map((l) => ({ trig: id[l.trig], cx: l.cx, cy: l.cy, rad: l.rad, flash: 0 }));\n  P.s = new Uint8Array(n).fill(WIRE);\n  P.s2 = new Uint8Array(n);\n  P.after = new Float32Array(n);\n  P.heat = new Float32Array(n);\n  // Where K1 feeds each line, just under its diode, and the cell behind it.\n  P.inj = [3, 10, 19, 27].map((x) => [id[17 * CW + x], id[16 * CW + x]]);\n  P.injPhase = [0, 0, 0, 0];\n  P.burst = [0, 0, 0, 0];\n  P.wait = [0, 0, 0, 0];\n  P.halo = new Float32Array(W * H);\n  P.glowTail = new Float32Array(W * H);\n  P.lamp = new Float32Array(W * H);\n  P.tick = 0;\n  P.acc = 0;\n  P.level = 0;\n  P.ready = false;\n}\n\n// Put the electrons of every clock where they would be at this tick, for the\n// current number of pulses. Slot s rides six cells behind slot 0.\nfunction seedClocks(P) {\n  for (let c = 0; c \u003c P.clocks.length; c++) {\n    const r = P.clocks[c];\n    const L = r.length;\n    for (const i of r) P.s[i] = WIRE;\n    for (const s of slotsOf(c \u003c 4 ? P.level + 1 : 1, L / BIT)) {\n      const at = (((PHASE[c] + P.tick - BIT * s) % L) + L) % L;\n      P.s[r[at]] = HEAD;\n      P.s[r[(at - 1 + L) % L]] = TAIL;\n    }\n  }\n}\n\nfunction step(P) {\n  const s = P.s;\n  const o = P.s2;\n  const nb = P.nb;\n  for (let i = 0; i \u003c P.nw; i++) {\n    const v = s[i];\n    if (v === HEAD) o[i] = TAIL;\n    else if (v === TAIL) {\n      o[i] = WIRE;\n      P.after[i] = 1;\n    } else {\n      let c = 0;\n      for (let k = i * 8, e = k + 8; k \u003c e; k++) {\n        const j = nb[k];\n        if (j \u003c 0) break;\n        if (s[j] === HEAD) c++;\n      }\n      if (c === 1 || c === 2) {\n        o[i] = HEAD;\n        P.heat[i] += 1;\n      } else o[i] = WIRE;\n    }\n  }\n  P.s = o;\n  P.s2 = s;\n  P.tick++;\n  // Learn each line's place on the bit grid from the electrons the clocks\n  // send past the feed point, so a burst lands on the same grid.\n  for (let c = 0; c \u003c 4; c++) {\n    const [a, b] = P.inj[c];\n    if (o[a] === HEAD && o[b] === TAIL) P.injPhase[c] = P.tick % BIT;\n  }\n  for (const l of P.lamps) if (o[l.trig] === HEAD) l.flash = 1;\n  // A burst fills the next bits of each line; a bit the clock already\n  // carries counts as filled.\n  for (let c = 0; c \u003c 4; c++) {\n    if (P.wait[c] > 0) {\n      P.wait[c]--;\n      continue;\n    }\n    if (P.burst[c] === 0 || P.tick % BIT !== P.injPhase[c]) continue;\n    const [a, b] = P.inj[c];\n    if (o[a] === WIRE && o[b] === WIRE) {\n      o[a] = HEAD;\n      o[b] = TAIL;\n    }\n    P.burst[c]--;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.pal = PALETTES[Math.max(0, Math.min(3, Math.round(k[0])))];\n  const tps = 2 + 3 * Math.max(0, Math.min(4, k[1]));\n  const level = Math.max(1, Math.min(3, Math.round(k[2]))) - 1;\n  P.glow = Math.max(0, Math.min(1, k[3]));\n\n  if (!P.ready) {\n    P.level = level;\n    seedClocks(P);\n    // Run the circuit until every line and lamp has had its signal, so the\n    // panel opens on a board that is already working.\n    const cool = Math.exp(-1 / tps / HEAT);\n    for (let t = 0; t \u003c PRE; t++) {\n      step(P);\n      for (let i = 0; i \u003c P.nw; i++) P.heat[i] *= cool;\n    }\n    P.after.fill(0);\n    for (const l of P.lamps) l.flash = 0;\n    P.ready = true;\n  }\n  if (level !== P.level) {\n    P.level = level;\n    seedClocks(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.burst.fill(6);\n    for (let c = 0; c \u003c 4; c++) P.wait[c] = WAIT[c];\n  }\n\n  P.acc += dt * tps;\n  let n = 0;\n  while (P.acc >= 1 && n \u003c 4) {\n    step(P);\n    P.acc -= 1;\n    n++;\n  }\n  if (P.acc > 1) P.acc = 1;\n\n  // The afterglow fades in seconds, not ticks, so it streaks further behind\n  // a faster electron; Glow stretches it from 0.25 s to 0.8 s.\n  const fade = Math.exp(-dt / (0.25 + 0.55 * P.glow));\n  const after = P.after;\n  for (let i = 0; i \u003c P.nw; i++) if (after[i] > 0) after[i] = after[i] > 0.02 ? after[i] * fade : 0;\n  const cool = Math.exp(-dt / HEAT);\n  const heat = P.heat;\n  for (let i = 0; i \u003c P.nw; i++) heat[i] *= cool;\n  const lampFade = Math.exp(-dt / 0.5);\n  for (const l of P.lamps) l.flash *= lampFade;\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  if (!P.ready) return;\n  const pal = P.pal;\n  const head = pal[2];\n  const tail = pal[3];\n  const lampC = pal[4];\n  const g = P.glow;\n  const halo = P.halo;\n  const lamp = P.lamp;\n  const id = P.id;\n  halo.fill(0);\n  lamp.fill(0);\n\n  // Heads and tails throw their colour on the LEDs around their cell: a rim\n  // one LED wide at the bottom of the knob, four LEDs of bloom at the top.\n  const rim = 0.35 + 0.55 * g;\n  const reach = 1 + Math.round(3 * g);\n  const s = P.s;\n  const glowTail = P.glowTail;\n  glowTail.fill(0);\n  for (let i = 0; i \u003c P.nw; i++) {\n    const v = s[i];\n    if (v !== HEAD && v !== TAIL) continue;\n    const buf = v === HEAD ? halo : glowTail;\n    const amt = v === HEAD ? rim : rim * 0.6;\n    const p = P.pos[i];\n    const x0 = (p % CW) * 2;\n    const y0 = ((p / CW) | 0) * 2;\n    for (let dy = -reach; dy \u003c 2 + reach; dy++) {\n      const y = y0 + dy;\n      if (y \u003c 0 || y >= H) continue;\n      const ey = dy \u003c 0 ? -dy : dy > 1 ? dy - 1 : 0;\n      for (let dx = -reach; dx \u003c 2 + reach; dx++) {\n        const x = x0 + dx;\n        if (x \u003c 0 || x >= W) continue;\n        const ex = dx \u003c 0 ? -dx : dx > 1 ? dx - 1 : 0;\n        const d = Math.max(ex, ey);\n        if (d > 0) buf[y * W + x] += amt / (d * d + (ex && ey ? 0.6 : 0));\n      }\n    }\n  }\n\n  // Each lamp's glass glows faintly when dark and fills when a signal\n  // arrives, and the flash blooms past its loop onto the board.\n  for (const l of P.lamps) {\n    const f = l.flash;\n    const out = l.rad + (6 + 10 * g) * (l.rad / 4);\n    const x0 = Math.max(0, Math.floor(l.cx - out));\n    const x1 = Math.min(W, Math.ceil(l.cx + out));\n    for (let y = Math.max(0, Math.floor(l.cy - out)); y \u003c Math.min(H, Math.ceil(l.cy + out)); y++) {\n      for (let x = x0; x \u003c x1; x++) {\n        const d = Math.hypot(x + 0.5 - l.cx, y + 0.5 - l.cy);\n        let v = 0;\n        if (d \u003c l.rad) v = 0.13 + 0.87 * f * (1 - 0.15 * (d / l.rad));\n        else if (d \u003c out) v = f * 0.9 * ((out - d) / (out - l.rad)) ** 1.3;\n        if (v > lamp[y * W + x]) lamp[y * W + x] = v;\n      }\n    }\n  }\n\n  // Black board, then every wire cell by its state. Plain copper takes a\n  // share of the light around it; a cell an electron just left still burns\n  // with the tail colour for a moment.\n  const after = P.after;\n  const heat = P.heat;\n  for (let y = 0; y \u003c H; y++) {\n    const row = (y >> 1) * CW;\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const i = id[row + (x >> 1)];\n      const h = halo[q] \u003c 1 ? halo[q] : 1;\n      const t = glowTail[q] \u003c 1 ? glowTail[q] : 1;\n      const m = lamp[q];\n      let r = head[0] * h + tail[0] * t + lampC[0] * m;\n      let gg = head[1] * h + tail[1] * t + lampC[1] * m;\n      let b = head[2] * h + tail[2] * t + lampC[2] * m;\n      if (i >= 0) {\n        const v = s[i];\n        if (v === HEAD) {\n          r = head[0];\n          gg = head[1];\n          b = head[2];\n        } else if (v === TAIL) {\n          r = tail[0];\n          gg = tail[1];\n          b = tail[2];\n        } else {\n          const c = pal[P.part[i]];\n          const w = 0.72 + 0.25 * (heat[i] \u003c 2 ? heat[i] : 2);\n          const a = after[i] * 0.8;\n          r = c[0] * w + (tail[0] - c[0] * w) * a + r * 0.5;\n          gg = c[1] * w + (tail[1] - c[1] * w) * a + gg * 0.5;\n          b = c[2] * w + (tail[2] - c[2] * w) * a + b * 0.5;\n        }\n      }\n      display.setPixel(x, y, r \u003c 255 ? r : 255, gg \u003c 255 ? gg : 255, b \u003c 255 ? b : 255);\n    }\n  }\n}\n","layer":{"id":"layer-wireworld","type":"code","name":"wireworld","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Wireworld\n// Family:  automata\n// Idea:    A working Wireworld circuit fills the tall panel: four clock loops of 12, 18, 24 and 30 cells send electrons down through diodes and delay lines into XOR and OR gates, and three lamps at the foot flash out what the gates decide.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: Brian Silverman's Wireworld (1987), as A. K. Dewdney described it in Scientific American in January 1990\n// Round:   16\n// ===============================\n// @matrix 64x128\n// @knobs Palette=0..3, Speed=0..4, Pulses=1..3, Glow=0..1\n//\n// Knob 1: Palette. 0 copper wire with blue-white heads and red-orange tails, 1 green phosphor, 2 blueprint, 3 neon.\n// Knob 2: Speed. Ticks per second, from 2 to 14 (8 at the start); the afterglow behind an electron fades in a quarter second at any speed, so a fast electron draws a long streak and a slow one hops cell to cell.\n// Knob 3: Pulses. One, two or three electrons on each clock loop, six cells apart (the 12-cell loop holds two), which changes the rhythm of every lamp; at three the first XOR gets a pulse on both inputs every bit and its lamp goes out.\n// Knob 4: Glow. The light electrons and lamps throw on the dark board, from a one-LED rim to a bloom four LEDs wide, and the afterglow stretches from 0.25 s to 0.8 s.\n// Buttons: K1 tap feeds six electrons in a row into each of the four lines, timed to meet at the gates: the first XOR lamp goes dark for six bits while the OR lamp and the last lamp burn.\n\nconst W = 64;\nconst H = 128;\n// One Wireworld cell is 2x2 LEDs: a wire is two LEDs wide and a head reads\n// as a block, which a single LED on this panel does not.\nconst CW = 32;\nconst CH = 64;\nconst NC = CW * CH;\nconst HEAD = 1;\nconst TAIL = 2;\nconst WIRE = 3;\n// Every loop is a multiple of six cells long, so every electron in the\n// circuit rides a six-tick bit grid. Pulses that meet at a gate either arrive\n// on the same tick or a whole bit apart; anything closer merges in the XOR\n// and the gate no longer computes.\nconst BIT = 6;\nconst PRE = 240;\n// Copper warms with the electrons that cross it and cools over this many\n// seconds, so a busy line glows a little warmer than an idle one.\nconst HEAT = 1.5;\n\n// Gates drawn for signals flowing down the panel. The diode passes downward\n// and its block of three stops an electron coming up. The XOR is the usual\n// Wireworld one with a loop: one input passes, two on the same tick put three\n// heads next to the output cell, which then stays copper. The OR is the same\n// junction without the loop.\nconst DIODE = ['.#.', '###', '#.#', '.#.'];\nconst XOR = ['#.....#', '#.###.#', '.##.##.', '..#.#..', '..###..', '...#...'];\nconst OR = ['#...#', '#.#.#', '.###.', '..#..'];\n\n// Where each loop's first electron sits at tick 0, counted clockwise from the\n// loop's top left cell. Found by running the circuit: with these, A and B\n// reach the first XOR on the same tick of the bit, C and D the OR, and the\n// two gate outputs the last XOR. The fifth is the six-cell heartbeat.\nconst PHASE = [0, 1, 4, 4, 0];\n// Ticks each line holds a K1 burst back. From the feed points the first XOR\n// is 45 ticks away along A and 49 along B, the OR 20 along C and 46 along D,\n// and the outputs reach the last XOR 58 and 32 ticks after A and C were fed;\n// with these waits the six bits of every line meet their partners together.\nconst WAIT = [4, 0, 30, 4];\n// Pulses k puts min(k, m) electrons, spread evenly, on a loop of m bits:\n// loop A has two, B three, C four, D five.\nfunction slotsOf(k, m) {\n  const n = Math.min(k, m);\n  const out = [];\n  for (let j = 0; j \u003c n; j++) out.push(Math.floor((j * m) / n));\n  return out;\n}\n\n// Trace, component, head, tail and lamp for each palette. Components (the\n// diodes, gates and lamp loops) are a lighter metal than the traces, so the\n// parts read as parts.\nconst PALETTES = [\n  [[128, 84, 16], [172, 132, 64], [175, 215, 255], [255, 80, 16], [255, 226, 150]],\n  [[26, 84, 34], [70, 140, 80], [215, 255, 215], [40, 210, 80], [190, 255, 130]],\n  [[30, 60, 138], [90, 120, 190], [255, 255, 255], [40, 205, 255], [215, 240, 255]],\n  [[84, 28, 116], [140, 80, 170], [120, 255, 235], [255, 40, 150], [255, 210, 100]],\n];\n\nfunction buildMap() {\n  // 1 for a trace, 2 for a component.\n  const map = new Uint8Array(NC);\n  const rings = [];\n  let ink = 1;\n  const set = (x, y) => {\n    if (x >= 0 && x \u003c CW && y >= 0 && y \u003c CH) map[y * CW + x] = ink;\n  };\n  // A polyline of straight and 45 degree runs.\n  const path = (pts) => {\n    for (let i = 0; i \u003c pts.length - 1; i++) {\n      let x = pts[i][0];\n      let y = pts[i][1];\n      const x1 = pts[i + 1][0];\n      const y1 = pts[i + 1][1];\n      set(x, y);\n      while (x !== x1 || y !== y1) {\n        x += Math.sign(x1 - x);\n        y += Math.sign(y1 - y);\n        set(x, y);\n      }\n    }\n  };\n  const stamp = (x, y, rows) => {\n    ink = 2;\n    for (let j = 0; j \u003c rows.length; j++) for (let i = 0; i \u003c rows[j].length; i++) if (rows[j][i] === '#') set(x + i, y + j);\n    ink = 1;\n  };\n  // A loop w cells across and h down with its corners cut, so each cell\n  // touches exactly two others and the length is 2(w + h). Kept in clockwise\n  // order for placing electrons.\n  const ring = (x, y, w, h) => {\n    const c = [];\n    for (let i = 1; i \u003c= w; i++) c.push([x + i, y]);\n    for (let j = 1; j \u003c= h; j++) c.push([x + w + 1, y + j]);\n    for (let i = w; i >= 1; i--) c.push([x + i, y + h + 1]);\n    for (let j = h; j >= 1; j--) c.push([x, y + j]);\n    for (const [a, b] of c) set(a, b);\n    rings.push(c.map(([a, b]) => b * CW + a));\n  };\n  // A lamp is a loop the signal enters at one side; it splits both ways\n  // round and the halves cancel on the far side. Its glass is the hole.\n  const lamps = [];\n  const lamp = (x, y, w, trig) => {\n    ink = 2;\n    ring(x, y, w, w);\n    ink = 1;\n    lamps.push({ ring: rings.pop(), trig: trig[1] * CW + trig[0], cx: 2 * x + w + 2, cy: 2 * y + w + 2, rad: w + 0.15 });\n  };\n  // A delay line: runs between x0 and x1 two cells apart, turning on the\n  // diagonal so no cell of one run touches the next.\n  const meander = (pts, x0, x1, y, runs) => {\n    for (let r = 0; r \u003c runs; r++, y += 2) {\n      if (r % 2 === 0) pts.push([x1, y], [x1 + 1, y + 1]);\n      else pts.push([x0, y], [x0 - 1, y + 1]);\n    }\n    return pts;\n  };\n\n  // The four clocks stand on row 11 like organ pipes, 12, 18, 24 and 30\n  // cells round, each tapped at the bottom and guarded by a diode.\n  ring(1, 6, 2, 4);\n  ring(8, 4, 3, 6);\n  ring(16, 2, 4, 8);\n  ring(24, 0, 5, 10);\n  for (const x of [3, 10, 19, 27]) {\n    set(x, 12);\n    stamp(x - 1, 13, DIODE);\n  }\n  // Over clock A a six-cell loop, one bit round, beats the bit into a\n  // small lamp.\n  ring(0, 0, 1, 2);\n  path([[3, 1], [4, 1]]);\n  lamp(5, 0, 2, [5, 1]);\n  // A: a horizontal delay line. B: three long verticals, down, up, down.\n  // C: a zigzag. D: the delay line again.\n  path(meander([[3, 16], [3, 17], [1, 19]], 1, 5, 19, 7).concat([[4, 34], [4, 35]]));\n  path([[10, 16], [10, 17], [9, 18], [9, 32], [10, 33], [11, 32], [11, 19], [12, 18], [13, 19], [13, 33], [11, 35]]);\n  path([[19, 16], [19, 17], [22, 20], [16, 26], [22, 32], [22, 34], [21, 35], [21, 36]]);\n  path(meander([[27, 16], [27, 17], [25, 19]], 25, 29, 19, 7).concat([[26, 36]]));\n  stamp(4, 36, XOR);\n  stamp(21, 37, OR);\n  // Each gate's output forks: one branch winds down to its own lamp, the\n  // other meets the other gate's in the last XOR.\n  path([[7, 41], [7, 43], [6, 44], [2, 48], [8, 48], [9, 49], [8, 50], [1, 50], [0, 51], [1, 52], [8, 52], [9, 53], [8, 54], [3, 54], [3, 56]]);\n  path([[7, 43], [8, 44], [12, 48]]);\n  path([[23, 40], [23, 43], [22, 44], [19, 47], [19, 48]]);\n  path([[23, 43], [24, 44], [28, 48], [23, 48], [22, 49], [23, 50], [30, 50], [31, 51], [30, 52], [23, 52], [22, 53], [23, 54], [28, 54], [28, 56]]);\n  stamp(13, 49, XOR);\n  path([[16, 54], [16, 56]]);\n  lamp(0, 57, 4, [3, 57]);\n  lamp(13, 57, 4, [16, 57]);\n  lamp(26, 57, 4, [28, 57]);\n  return { map, rings, lamps };\n}\n\nexport function setup(params) {\n  const P = params;\n  const { map, rings, lamps } = buildMap();\n  // Index the copper: a step only visits wire cells, each with the list of\n  // wire cells it touches.\n  const id = new Int16Array(NC).fill(-1);\n  let n = 0;\n  for (let p = 0; p \u003c NC; p++) if (map[p]) id[p] = n++;\n  P.nw = n;\n  P.pos = new Int16Array(n);\n  P.part = new Uint8Array(n);\n  P.nb = new Int16Array(n * 8).fill(-1);\n  for (let p = 0; p \u003c NC; p++) {\n    const i = id[p];\n    if (i \u003c 0) continue;\n    P.pos[i] = p;\n    P.part[i] = map[p] === 2 ? 1 : 0;\n    const x = p % CW;\n    const y = (p / CW) | 0;\n    let k = 0;\n    for (let dy = -1; dy \u003c= 1; dy++)\n      for (let dx = -1; dx \u003c= 1; dx++) {\n        if (!dx && !dy) continue;\n        const xx = x + dx;\n        const yy = y + dy;\n        if (xx \u003c 0 || yy \u003c 0 || xx >= CW || yy >= CH) continue;\n        if (id[yy * CW + xx] >= 0) P.nb[i * 8 + k++] = id[yy * CW + xx];\n      }\n  }\n  P.id = id;\n  P.clocks = rings.map((r) => r.map((p) => id[p]));\n  P.lamps = lamps.map((l) => ({ trig: id[l.trig], cx: l.cx, cy: l.cy, rad: l.rad, flash: 0 }));\n  P.s = new Uint8Array(n).fill(WIRE);\n  P.s2 = new Uint8Array(n);\n  P.after = new Float32Array(n);\n  P.heat = new Float32Array(n);\n  // Where K1 feeds each line, just under its diode, and the cell behind it.\n  P.inj = [3, 10, 19, 27].map((x) => [id[17 * CW + x], id[16 * CW + x]]);\n  P.injPhase = [0, 0, 0, 0];\n  P.burst = [0, 0, 0, 0];\n  P.wait = [0, 0, 0, 0];\n  P.halo = new Float32Array(W * H);\n  P.glowTail = new Float32Array(W * H);\n  P.lamp = new Float32Array(W * H);\n  P.tick = 0;\n  P.acc = 0;\n  P.level = 0;\n  P.ready = false;\n}\n\n// Put the electrons of every clock where they would be at this tick, for the\n// current number of pulses. Slot s rides six cells behind slot 0.\nfunction seedClocks(P) {\n  for (let c = 0; c \u003c P.clocks.length; c++) {\n    const r = P.clocks[c];\n    const L = r.length;\n    for (const i of r) P.s[i] = WIRE;\n    for (const s of slotsOf(c \u003c 4 ? P.level + 1 : 1, L / BIT)) {\n      const at = (((PHASE[c] + P.tick - BIT * s) % L) + L) % L;\n      P.s[r[at]] = HEAD;\n      P.s[r[(at - 1 + L) % L]] = TAIL;\n    }\n  }\n}\n\nfunction step(P) {\n  const s = P.s;\n  const o = P.s2;\n  const nb = P.nb;\n  for (let i = 0; i \u003c P.nw; i++) {\n    const v = s[i];\n    if (v === HEAD) o[i] = TAIL;\n    else if (v === TAIL) {\n      o[i] = WIRE;\n      P.after[i] = 1;\n    } else {\n      let c = 0;\n      for (let k = i * 8, e = k + 8; k \u003c e; k++) {\n        const j = nb[k];\n        if (j \u003c 0) break;\n        if (s[j] === HEAD) c++;\n      }\n      if (c === 1 || c === 2) {\n        o[i] = HEAD;\n        P.heat[i] += 1;\n      } else o[i] = WIRE;\n    }\n  }\n  P.s = o;\n  P.s2 = s;\n  P.tick++;\n  // Learn each line's place on the bit grid from the electrons the clocks\n  // send past the feed point, so a burst lands on the same grid.\n  for (let c = 0; c \u003c 4; c++) {\n    const [a, b] = P.inj[c];\n    if (o[a] === HEAD && o[b] === TAIL) P.injPhase[c] = P.tick % BIT;\n  }\n  for (const l of P.lamps) if (o[l.trig] === HEAD) l.flash = 1;\n  // A burst fills the next bits of each line; a bit the clock already\n  // carries counts as filled.\n  for (let c = 0; c \u003c 4; c++) {\n    if (P.wait[c] > 0) {\n      P.wait[c]--;\n      continue;\n    }\n    if (P.burst[c] === 0 || P.tick % BIT !== P.injPhase[c]) continue;\n    const [a, b] = P.inj[c];\n    if (o[a] === WIRE && o[b] === WIRE) {\n      o[a] = HEAD;\n      o[b] = TAIL;\n    }\n    P.burst[c]--;\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 1, 0.06];\n  dt = Math.min(dt, 0.1);\n  P.pal = PALETTES[Math.max(0, Math.min(3, Math.round(k[0])))];\n  const tps = 2 + 3 * Math.max(0, Math.min(4, k[1]));\n  const level = Math.max(1, Math.min(3, Math.round(k[2]))) - 1;\n  P.glow = Math.max(0, Math.min(1, k[3]));\n\n  if (!P.ready) {\n    P.level = level;\n    seedClocks(P);\n    // Run the circuit until every line and lamp has had its signal, so the\n    // panel opens on a board that is already working.\n    const cool = Math.exp(-1 / tps / HEAT);\n    for (let t = 0; t \u003c PRE; t++) {\n      step(P);\n      for (let i = 0; i \u003c P.nw; i++) P.heat[i] *= cool;\n    }\n    P.after.fill(0);\n    for (const l of P.lamps) l.flash = 0;\n    P.ready = true;\n  }\n  if (level !== P.level) {\n    P.level = level;\n    seedClocks(P);\n  }\n  if (input.btnPressed && input.btnPressed[0]) {\n    P.burst.fill(6);\n    for (let c = 0; c \u003c 4; c++) P.wait[c] = WAIT[c];\n  }\n\n  P.acc += dt * tps;\n  let n = 0;\n  while (P.acc >= 1 && n \u003c 4) {\n    step(P);\n    P.acc -= 1;\n    n++;\n  }\n  if (P.acc > 1) P.acc = 1;\n\n  // The afterglow fades in seconds, not ticks, so it streaks further behind\n  // a faster electron; Glow stretches it from 0.25 s to 0.8 s.\n  const fade = Math.exp(-dt / (0.25 + 0.55 * P.glow));\n  const after = P.after;\n  for (let i = 0; i \u003c P.nw; i++) if (after[i] > 0) after[i] = after[i] > 0.02 ? after[i] * fade : 0;\n  const cool = Math.exp(-dt / HEAT);\n  const heat = P.heat;\n  for (let i = 0; i \u003c P.nw; i++) heat[i] *= cool;\n  const lampFade = Math.exp(-dt / 0.5);\n  for (const l of P.lamps) l.flash *= lampFade;\n}\n\nexport function draw(display, params, time) {\n  const P = params;\n  if (!P.ready) return;\n  const pal = P.pal;\n  const head = pal[2];\n  const tail = pal[3];\n  const lampC = pal[4];\n  const g = P.glow;\n  const halo = P.halo;\n  const lamp = P.lamp;\n  const id = P.id;\n  halo.fill(0);\n  lamp.fill(0);\n\n  // Heads and tails throw their colour on the LEDs around their cell: a rim\n  // one LED wide at the bottom of the knob, four LEDs of bloom at the top.\n  const rim = 0.35 + 0.55 * g;\n  const reach = 1 + Math.round(3 * g);\n  const s = P.s;\n  const glowTail = P.glowTail;\n  glowTail.fill(0);\n  for (let i = 0; i \u003c P.nw; i++) {\n    const v = s[i];\n    if (v !== HEAD && v !== TAIL) continue;\n    const buf = v === HEAD ? halo : glowTail;\n    const amt = v === HEAD ? rim : rim * 0.6;\n    const p = P.pos[i];\n    const x0 = (p % CW) * 2;\n    const y0 = ((p / CW) | 0) * 2;\n    for (let dy = -reach; dy \u003c 2 + reach; dy++) {\n      const y = y0 + dy;\n      if (y \u003c 0 || y >= H) continue;\n      const ey = dy \u003c 0 ? -dy : dy > 1 ? dy - 1 : 0;\n      for (let dx = -reach; dx \u003c 2 + reach; dx++) {\n        const x = x0 + dx;\n        if (x \u003c 0 || x >= W) continue;\n        const ex = dx \u003c 0 ? -dx : dx > 1 ? dx - 1 : 0;\n        const d = Math.max(ex, ey);\n        if (d > 0) buf[y * W + x] += amt / (d * d + (ex && ey ? 0.6 : 0));\n      }\n    }\n  }\n\n  // Each lamp's glass glows faintly when dark and fills when a signal\n  // arrives, and the flash blooms past its loop onto the board.\n  for (const l of P.lamps) {\n    const f = l.flash;\n    const out = l.rad + (6 + 10 * g) * (l.rad / 4);\n    const x0 = Math.max(0, Math.floor(l.cx - out));\n    const x1 = Math.min(W, Math.ceil(l.cx + out));\n    for (let y = Math.max(0, Math.floor(l.cy - out)); y \u003c Math.min(H, Math.ceil(l.cy + out)); y++) {\n      for (let x = x0; x \u003c x1; x++) {\n        const d = Math.hypot(x + 0.5 - l.cx, y + 0.5 - l.cy);\n        let v = 0;\n        if (d \u003c l.rad) v = 0.13 + 0.87 * f * (1 - 0.15 * (d / l.rad));\n        else if (d \u003c out) v = f * 0.9 * ((out - d) / (out - l.rad)) ** 1.3;\n        if (v > lamp[y * W + x]) lamp[y * W + x] = v;\n      }\n    }\n  }\n\n  // Black board, then every wire cell by its state. Plain copper takes a\n  // share of the light around it; a cell an electron just left still burns\n  // with the tail colour for a moment.\n  const after = P.after;\n  const heat = P.heat;\n  for (let y = 0; y \u003c H; y++) {\n    const row = (y >> 1) * CW;\n    for (let x = 0; x \u003c W; x++) {\n      const q = y * W + x;\n      const i = id[row + (x >> 1)];\n      const h = halo[q] \u003c 1 ? halo[q] : 1;\n      const t = glowTail[q] \u003c 1 ? glowTail[q] : 1;\n      const m = lamp[q];\n      let r = head[0] * h + tail[0] * t + lampC[0] * m;\n      let gg = head[1] * h + tail[1] * t + lampC[1] * m;\n      let b = head[2] * h + tail[2] * t + lampC[2] * m;\n      if (i >= 0) {\n        const v = s[i];\n        if (v === HEAD) {\n          r = head[0];\n          gg = head[1];\n          b = head[2];\n        } else if (v === TAIL) {\n          r = tail[0];\n          gg = tail[1];\n          b = tail[2];\n        } else {\n          const c = pal[P.part[i]];\n          const w = 0.72 + 0.25 * (heat[i] \u003c 2 ? heat[i] : 2);\n          const a = after[i] * 0.8;\n          r = c[0] * w + (tail[0] - c[0] * w) * a + r * 0.5;\n          gg = c[1] * w + (tail[1] - c[1] * w) * a + gg * 0.5;\n          b = c[2] * w + (tail[2] - c[2] * w) * a + b * 0.5;\n        }\n      }\n      display.setPixel(x, y, r \u003c 255 ? r : 255, gg \u003c 255 ? gg : 255, b \u003c 255 ? b : 255);\n    }\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Palette=0..3, Speed=0..4, Pulses=1..3, Glow=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Palette","min":0,"max":3,"about":"0 copper wire with blue-white heads and red-orange tails, 1 green phosphor, 2 blueprint, 3 neon."},{"name":"Speed","min":0,"max":4,"about":"Ticks per second, from 2 to 14 (8 at the start); the afterglow behind an electron fades in a quarter second at any speed, so a fast electron draws a long streak and a slow one hops cell to cell."},{"name":"Pulses","min":1,"max":3,"about":"One, two or three electrons on each clock loop, six cells apart (the 12-cell loop holds two), which changes the rhythm of every lamp; at three the first XOR gets a pulse on both inputs every bit and its lamp goes out."},{"name":"Glow","min":0,"max":1,"about":"The light electrons and lamps throw on the dark board, from a one-LED rim to a bloom four LEDs wide, and the afterglow stretches from 0.25 s to 0.8 s."}],"start":[0,2,1,0.06],"measures":{"motion":0.2605,"detail":0.0895,"edges":0.7694,"complexity":0.461,"coverage":0.3111,"colour":0.2355,"drift":0.0855},"knobResponse":[0.0911,0.0637,0.0514,0.0736]},{"slug":"woodpecker","title":"Woodpecker","family":"bird","round":21,"note":"새벽 숲의 자작나무 줄기가 128줄을 다 쓰고, 오색딱따구리가 뻣뻣한 꽁지로 버티며 껑충껑충 오르다 멈춰 머리가 흐려지도록 두드려 부스러기를 튀기고 구멍을 내요. 꼭대기에 닿으면 물결치듯 날아 밑동으로 내려가 다시 오르고, K1 을 누르면 다음 걸음 뒤에 바로 두드려요.","idea":"A great spotted woodpecker hops up a tree trunk that runs the full height of the panel, braced on its stiff tail, stops to drum a hole with bark chips flying, and at the top drops off in a bounding flight to the foot of the trunk to start again, in a wood lit through the canopy.","buttons":"K1 tap makes the male stop and drum after his next hop.","code":"// ===== Patternflow pattern =====\n// Title:   Woodpecker\n// Family:  bird\n// Idea:    A great spotted woodpecker hops up a tree trunk that runs the full height of the panel, braced on its stiff tail, stops to drum a hole with bark chips flying, and at the top drops off in a bounding flight to the foot of the trunk to start again, in a wood lit through the canopy.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after field-guide plates of the great spotted woodpecker (Dendrocopos major)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Tree=0..2, Speed=0.2..3, Birds=1..4, Light=0..1\n//\n// Knob 1: Tree. A silver birch at 0, white with black lenticels and a fissured black foot; a Scots pine at 1, grey plates low down and thin orange bark higher up; an oak at 2, deeply furrowed and grey with lichen. The wood behind is of the same tree.\n// Knob 2: Speed. How fast the bird, the wind and the light go: at 2 all of it runs in real time, the bird takes 15 to 20 s up the trunk with its stops to drum and under 3 s back down; 0.2 is ten times slower.\n// Knob 3: Birds. One male at 1; at 2 his mate works a nearer trunk that comes in on the right; at 3 a red-capped young bird of the year climbs another at the left, and at 4 a second one climbs the right-hand edge of his trunk.\n// Knob 4: Light. Dawn at 0 with the sun low in the east and shafts through the mist, noon at 0.5, dusk at 1 with the sun low in the west.\n// Buttons: K1 tap makes the male stop and drum after his next hop.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, sqrt, pow, asin, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mul = (c, k) => c.map((v) => v * k);\nconst lum = (c) => (c[0] + c[1] + c[2]) / 3;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Trunks: centre, radius, the row where the foot meets the ground, haze. The near one first.\nconst TR = [[30, 10, 119, 0], [57, 5.4, 108, 0.16], [2.2, 5.2, 110, 0.12]];\nconst rad = (T, y) => T[1] * (1 + 0.7 * sm((y - T[2] + 16) / 16) ** 2);\n// Who climbs where: trunk, side (-1 the left edge, so the bird faces right), kind (0 male, 1 female, 2 young), first row.\nconst FLOCK = [[0, -1, 0, 50], [1, -1, 1, 74], [2, 1, 2, 40], [0, 1, 2, 96]];\nconst TOP = 27;\n// The clinging bird facing right, the bark on its right: rows 0..4 the head, then the body and the\n// stiff tail. The toes on row 10 grip the bark's edge, and the bill on row 3 reaches one LED into it.\n// C crown, N nape, K black, W white, w buff, R red, G bill and toes, e eye.\nconst HEAD = [\"..CCC....\", \".CCCCC...\", \"NCCCWWW..\", \"NWWeWWGG.\", \"KWKKKKG..\"];\nconst UPH = [\"..CCC.G..\", \".CCCCCG..\", \"NCCCWeW..\", \"NWWWWW...\", \"KWKKKK...\"];\nconst BODY = [\"KKKWWW...\", \"KKKKWw...\", \"KWWKww...\", \"KWWWww...\", \"KWWKww...\", \"KKKKwwG..\", \"KWKWww...\", \".KKKwR...\", \"..KKRRG..\", \"..KKRR...\", \"...KK....\", \"....KK...\", \".....K...\"];\n// In flight, facing right: the bird with its wings closed for the bound, wings up, wings down.\nconst FLB = [\".......CCC...\", \"KKK.KKKNCWW..\", \"KKKKKWWKWeWGG\", \"...RRwwwKKK..\", \".....www.....\"];\nconst WUP = [\".....W.......\", \"....KWKW.....\", \".....KWKW....\"];\nconst WDN = [\"....KWKWw....\", \"...KWKW......\", \"....W........\"];\nconst COL = { K: [24, 22, 28], W: [244, 240, 228], w: [222, 208, 184], G: [70, 70, 78], e: [90, 26, 26] };\n// Male, female, young: crown, nape, the red under the tail.\nconst KIND = [{ C: \"K\", N: \"R\", R: [232, 28, 40] }, { C: \"K\", N: \"K\", R: [232, 28, 40] }, { C: \"R\", N: \"K\", R: [240, 112, 122] }];\n// Birch, pine, oak: far trunk, foliage, leaf, ground.\nconst SP = [\n  [[0.86, 0.84, 0.8], [0.36, 0.56, 0.2], [0.56, 0.82, 0.28], [0.36, 0.44, 0.16]],\n  [[0.68, 0.38, 0.24], [0.14, 0.32, 0.2], [0.24, 0.48, 0.28], [0.36, 0.32, 0.16]],\n  [[0.36, 0.34, 0.3], [0.24, 0.4, 0.13], [0.4, 0.62, 0.2], [0.42, 0.32, 0.16]],\n];\n// Dawn, morning, noon, afternoon, dusk: sky, haze, sun, shade, shafts.\nconst HOURS = [\n  [250, 220, 172, 172, 156, 150, 255, 188, 104, 70, 80, 104, 1],\n  [214, 232, 240, 150, 176, 160, 255, 230, 170, 78, 100, 108, 0.75],\n  [186, 220, 252, 128, 170, 132, 255, 250, 232, 90, 116, 96, 0.45],\n  [244, 220, 160, 160, 150, 104, 255, 206, 128, 90, 90, 74, 0.7],\n  [252, 150, 116, 108, 78, 110, 255, 120, 60, 50, 44, 80, 0.9],\n];\nconst [CLING, HOP, DRUM, PROBE, FLY] = [0, 1, 2, 3, 4];\n\n// Bark colour at arc length s round the trunk and row y.\nfunction bark(k, s, y) {\n  const g = vn(s * 0.7, y * 0.35), q = 0.9 + 0.2 * g;\n  let c;\n  if (k === 0) {\n    // Birch: white, with dark lenticels, black scars, pink where it peels, a fissured black foot.\n    c = [0.92 * q, 0.9 * q, 0.85 * q];\n    if (vn(s * 0.22 + 3, y * 0.13) > 0.83) c = [0.12, 0.11, 0.12];\n    else if (vn(s * 0.3 + 5, y * 1.3) > 0.79) c = [0.22, 0.2, 0.2];\n    else if (vn(s * 0.3 + 20, y * 0.45) > 0.82) c = [0.9, 0.66, 0.54];\n    if (sm((y - 88) / 24) * (0.55 + 0.6 * vn(s * 0.25, y * 0.08 + 4)) > 0.5) c = abs(vn(s * 0.55, y * 0.11) * 2 - 1) \u003c 0.3 ? [0.07, 0.06, 0.06] : mul([0.34, 0.33, 0.32], q);\n  } else if (k === 1) {\n    // Scots pine: plates split by deep fissures low down, thin orange flakes higher up.\n    const up = sm((64 - y) / 22 + vn(s * 0.2, y * 0.05) - 0.5), r = abs(vn(s * 0.32, y * 0.085) * 2 - 1), i = vn(s * 0.9, y * 0.5), f = vn(s * 0.8 + 9, y * 0.9);\n    const lo = r \u003c 0.16 ? [0.09, 0.06, 0.05] : [mix(0.44, 0.6, i) * q, mix(0.38, 0.32, i) * q, mix(0.32, 0.22, i) * q];\n    const hi = f > 0.7 ? [0.96, 0.68, 0.44] : f \u003c 0.25 ? [0.52, 0.24, 0.14] : [(0.84 + 0.1 * i) * q, (0.44 + 0.08 * i) * q, 0.24 * q];\n    c = lo.map((v, j) => mix(v, hi[j], up));\n  } else {\n    // Oak: deep furrows in a net of grey ridges.\n    const r = abs(vn(s * 0.55, y * 0.04) * 2 - 1) + 0.12 * (vn(s * 1.3, y * 0.2) - 0.5);\n    c = r \u003c 0.12 || vn(s * 1.1, y * 0.5 + 9) > 0.85 ? [0.09, 0.08, 0.07] : mul([0.64, 0.6, 0.53], q * (r \u003c 0.24 ? 0.68 : 1));\n  }\n  if (vn(s * 0.45 + 40, y * 0.35 + 40) > [0.86, 0.86, 0.76][k]) c = mul([0.66, 0.74, 0.54], q);\n  if (k && y > 94 && vn(s * 0.3 + 60, y * 0.2) > 0.78 - (y - 94) / 90) c = [0.26 * q, 0.4 * q, 0.1];\n  return c;\n}\n\nfunction build(P) {\n  const { alb, mat, hz, nx, zb } = P, k = P.kind, [FT, FF, LF, GR] = SP[k];\n  const put = (x, y, m, c, h, n, z) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    [mat[p], hz[p], nx[p], zb[p]] = [m, h, n, z];\n    alb.set(c, p * 3);\n  };\n  // Leaves overhead with the sky through them, the wood fading into the haze, the ground.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const d = vn(x * 0.11, y * 0.14) * 0.55 + vn(x * 0.3 + 5, y * 0.3) * 0.3 + vn(x * 0.8, y * 0.8) * 0.15, q = 0.75 + 0.5 * vn(x * 0.6 + 3, y * 0.6), gl = 99 + 3 * vn(x * 0.09, 3.1);\n      const b = vn(x * 0.13, y * 0.11 + 30) * 0.7 + vn(x * 0.45, y * 0.4) * 0.3 + (y - 56) / 90;\n      if (d > 0.28 + 0.4 * sm((y - 4) / 26) && y \u003c 32) put(x, y, 1, mul(FF, q * (1.25 - d * 0.6)), 0, 0, 2);\n      else if (y \u003c 12 + 8 * vn(x * 0.1, 9)) put(x, y, 0, FF, 0, 0, 2);\n      else if (y \u003c gl) put(x, y, 2, mul(FF, q), b > 0.75 && y > 54 ? 0.5 - (y - 56) / 140 : 0.2 + 0.68 * sm((y - 26) / 64) + 0.2 * (vn(x * 0.2, y * 0.08 + 60) - 0.5), 0, 2);\n      else put(x, y, 4, mul(GR, q), 0.6 * (1 - sm((y - gl) / 14)), 0, 2);\n    }\n  // Far trunks, thin and pale, then a few nearer ones.\n  for (let i = 0; i \u003c 14; i++) {\n    const near = i > 8, w = near ? 2.5 + rnd() * 2 : 1 + rnd() * 1.4, cx = rnd() * 66 - 1, h = near ? 0.32 + rnd() * 0.12 : 0.58 + rnd() * 0.18;\n    for (let y = floor(rnd() * 12); y \u003c 101 + (near ? 4 : 0); y++)\n      for (let x = floor(cx - w / 2); x \u003c= cx + w / 2; x++) {\n        const u = (x + 0.5 - cx) / (w / 2 + 0.01), m = mat[y * W + x];\n        if (abs(u) \u003c= 1 && m !== 1) put(x, y, 3, k || near ? bark(k, u * 3 + i * 9, y) : y > 92 || vn(x + i * 7, y * 0.9) > 0.8 ? [0.2, 0.2, 0.2] : FT, h, u, 2);\n      }\n  }\n  // The near trunks, full bark and rounded.\n  for (let t = P.nt - 1; t >= 0; t--) {\n    const T = TR[t], [cx, r0, fy, h] = T;\n    for (let y = 0; y \u003c min(H, fy + 3); y++)\n      for (let r = rad(T, y), x = floor(cx - r); x \u003c= cx + r; x++) {\n        const u = (x + 0.5 - cx) / r, s = asin(cl(u, -1, 1)) * r0 + t * 40;\n        // The bark's own relief tips the normal, so ridges catch a low sun on one side.\n        if (abs(u) \u003c= 1) put(x, y, 3, bark(k, s, y), h, cl(u + (lum(bark(k, s - 0.7, y)) - lum(bark(k, s + 0.7, y))) * 1.6, -1, 1), t ? 1 : 0);\n      }\n  }\n  // Limbs off the near trunk: a live one to the right, one up into the crown, a dead stub on the left.\n  const limb = (x0, y0, x1, y1, w0, w1, dead) => {\n    for (let i = 0, n = abs(x1 - x0) * 2; i \u003c= n; i++) {\n      const f = i / n, x = round(mix(x0, x1, f)), yc = mix(y0, y1, f) + 3 * sin(PI * f), w = mix(w0, w1, f);\n      for (let j = 0; j \u003c w; j++) put(x, round(yc - w / 2 + j), 3, mul(bark(dead ? 2 : k, i * 0.6 + 70, j * 4 + 30), j \u003c 1 ? 1.15 : j > w - 2 ? 0.6 : 0.9), 0, j \u003c 1 ? -0.5 : 0.4, 0);\n    }\n  };\n  limb(38, 57, 64, 41, 4, 2, k === 1);\n  limb(46, 54, 52, 42, 1.5, 1, k === 1);\n  limb(56, 48, 61, 36, 1.5, 1, k === 1);\n  limb(38, 24, 62, 4, 3, 1.5);\n  limb(21, 87, 15, 83, 3, 2, true);\n  // The near ground: moss, litter, roots.\n  for (let y = 110; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, g = vn(x * 0.4, y * 0.5), l = vn(x * 0.9 + 5, y * 0.9);\n      if ((mat[p] === 3 && y \u003c 121) || (y \u003c 117 && hz[p] > 0.05)) continue;\n      put(x, y, 4, l > 0.72 ? [0.56, 0.36, 0.16] : g > 0.6 ? [0.26, 0.46, 0.1] : mul(GR, 0.7 + 0.5 * l), 0, 0, y > 116 ? 0 : 1);\n    }\n  for (const [x0, dir] of [[21, -1], [24, -1], [36, 1], [39, 1], [30, 1]])\n    for (let i = 0, x = x0, y = 117; i \u003c 14; i++) {\n      (x += dir * (0.7 + rnd() * 0.5)), (y += 0.35 + rnd() * 0.4);\n      put(round(x), round(y), 3, bark(k, i, 100 + i), 0, -0.3, 0);\n      put(round(x), round(y) + 1, 3, mul(bark(k, i, 101 + i), 0.6), 0, 0.5, 0);\n    }\n  // Leaves that move: on the right limb, over the top of the trunk, hanging in from the crown.\n  const L = (P.leaves = []);\n  const spray = (cx, cy, r, n) => {\n    for (let i = 0; i \u003c n; i++) {\n      const a = rnd() * PI * 2, d = r * sqrt(rnd());\n      L.push([round(cx + cos(a) * d), round(cy + sin(a) * d * 0.7), floor(rnd() * 4), 0.7 + rnd() * 0.6, rnd() * 7]);\n    }\n  };\n  if (k !== 1) [[52, 41, 7, 60], [61, 37, 6, 50], [46, 48, 4, 18], [58, 49, 4, 20]].forEach(([x, y, r, n]) => spray(x, y, r, n * (k ? 1.3 : 1)));\n  [[30, 3, 9, 70], [50, 10, 9, 70], [60, 3, 7, 50], [7, 20, 6, 40], [14, 14, 5, 24], [40, 18, 4, 16]].forEach((a) => spray(...a));\n  P.leafC = LF;\n  P.ferns = Array.from({ length: 12 }, (_, i) => [(i * 5.7 + rnd() * 4) % 64, 124 + rnd() * 5, 9 + rnd() * 8, (i % 2 ? 1 : -1) * (0.4 + rnd() * 0.5), rnd() * 7]);\n  P.holes = P.holes.filter((h) => h[3] \u003c P.nt);\n}\n\n// Light for the hour: what lies in shade, and what the sun adds where it gets through.\nfunction paint(P) {\n  const f = P.h * 4, i = min(3, floor(f)), q = HOURS[i].map((v, c) => mix(v, HOURS[i + 1][c], f - i)), { alb, mat, hz, nx, bg, sa } = P;\n  const sky = q.slice(0, 3), haze = q.slice(3, 6), sun = (P.sun = q.slice(6, 9)), amb = (P.amb = q.slice(9, 12));\n  const sx = (P.sx = -0.85 + 1.7 * P.h), sz = 0.55, sl = sqrt(sx * sx + sz * sz);\n  for (let p = 0; p \u003c N; p++) {\n    const m = mat[p], y = p >> 6, h = hz[p], n = nx[p], nz = sqrt(max(0, 1 - n * n)), d = m === 3 ? max(0, (n * sx + nz * sz) / sl) : m === 4 ? 0.8 : m === 1 ? 0.7 : 0.2;\n    const sh = m === 3 ? 0.35 + 0.65 * nz : m === 1 ? 0.8 : 0.9, hk = 1.1 - y / 180;\n    // How strongly the shafts show here: most in the haze, faint in front of the near trunk.\n    P.sw[p] = m ? (q[12] * 100 * (0.25 + 0.75 * h) * (1.1 - y / 160)) / 255 : 0;\n    for (let c = 0, o = p * 3; c \u003c 3; c++) {\n      const a = alb[o + c];\n      bg[o + c] = m ? mix(a * amb[c] * sh * 1.1, haze[c] * hk, h) : mix(sky[c], 255, 0.3);\n      sa[o + c] = m ? a * sun[c] * d * (1 - h) : 0;\n    }\n  }\n}\n\nfunction newBird(i) {\n  const [tr, side, kind, y] = FLOCK[i];\n  return { tr, side, face: -side, kind, y, st: CLING, t: 0, dur: 0.2 + i * 0.35, hops: 2, work: 4 + i * 11, head: 0, out: 0, look: 0 };\n}\n// The bark's edge pixel at row y, where the toes grip.\nconst feetX = (B, y) => round(TR[B.tr][0] + B.side * (rad(TR[B.tr], y) - 0.5));\nconst footRow = (B) => TR[B.tr][2] - 17;\n\nfunction stepBird(P, B, d) {\n  const go = (s, dur) => ((B.st = s), (B.t = 0), (B.dur = dur));\n  B.t += d;\n  switch (B.st) {\n    case CLING:\n      B.head = B.t > 0.15 && B.t \u003c B.dur - 0.1 ? B.look : 0;\n      B.out = 0;\n      if (B.t \u003c B.dur) break;\n      if (B.y \u003c= TOP) [B.x0, B.y0] = [feetX(B, B.y), B.y], go(FLY, 2.6);\n      else if (B.work \u003c= 0) {\n        // Drum where an old hole is, or start a new one.\n        const hx = feetX(B, B.y) + B.face * 2, hy = round(B.y) - 7;\n        B.hole = P.holes.find((h) => h[3] === B.tr && abs(h[0] - hx) \u003c 2 && abs(h[1] - hy) \u003c 3);\n        if (!B.hole) P.holes.push((B.hole = [hx, hy, 0.4, B.tr])), P.holes.length > 30 && P.holes.shift();\n        go(DRUM, 1.3 + rnd() * 1.2);\n      } else (B.y0 = B.y), (B.len = 2.5 + rnd() * 2.5), go(HOP, 0.15);\n      break;\n    case HOP: {\n      const u = B.t / B.dur;\n      B.y = mix(B.y0, B.y0 - B.len, sm(u / 0.5));\n      B.out = u \u003c 0.6 ? 1 : 0;\n      if (u \u003c 1) break;\n      B.work -= B.len;\n      if (--B.hops > 0) (B.look = 0), go(CLING, 0.04 + rnd() * 0.1);\n      else (B.hops = 2 + floor(rnd() * 4)), (B.look = rnd() \u003c 0.6 ? 1 + floor(rnd() * 2) : 0), go(CLING, 0.3 + rnd() * 0.8);\n      break;\n    }\n    case DRUM: {\n      // Bursts of strikes too fast to see: the head is a blur and chips fly.\n      const on = B.t % 0.62 \u003c 0.42;\n      B.head = on ? 3 : 0;\n      if (on) {\n        B.hole[2] = min(2.2, B.hole[2] + d * 0.5);\n        for (let n = rnd() \u003c d * 30 ? 1 + (rnd() \u003c 0.5) : 0; n > 0; n--) P.chips.push([B.hole[0] + B.side, B.hole[1] + (rnd() - 0.5) * 2, B.side * (12 + rnd() * 30), -(4 + rnd() * 26), floor(rnd() * 3), 0, B.tr ? 1 : 0]);\n      }\n      if (B.t >= B.dur) go(PROBE, 0.7 + rnd() * 0.6);\n      break;\n    }\n    case PROBE:\n      B.head = floor(B.t / 0.18) % 3 ? 4 : 0;\n      if (B.t >= B.dur) (B.work = 16 + rnd() * 24), (B.look = 1), go(CLING, 0.5);\n      break;\n    case FLY:\n      if (B.t >= B.dur) (B.y = footRow(B)), (B.look = 0), go(CLING, 0.5);\n  }\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), hz: F(N), nx: F(N), zb: new Uint8Array(N), mat: new Uint8Array(N), bg: F(N * 3), sa: F(N * 3), sw: F(N), buf: F(N * 3), lit: F(N), kind: -1, nt: 0, h: -1, t: 0, holes: [], chips: [], falls: [] });\n  P.birds = FLOCK.map((_, i) => newBird(i));\n  // Sun flecks: a tile of soft blobs the crown lets through, wrapped both ways.\n  const FT = (P.ft = F(16384));\n  for (const [c, a] of [[16, 0.3], [8, 0.45], [4, 0.25]]) {\n    const n = 128 / c, g = Array.from({ length: n * n }, rnd);\n    for (let i = 0; i \u003c 16384; i++) {\n      const x = (i & 127) / c, y = (i >> 7) / c, x0 = floor(x), y0 = floor(y), u = sm(x - x0), v = sm(y - y0), X = (x0 + 1) % n, Y = (y0 + 1) % n;\n      FT[i] += a * mix(mix(g[y0 * n + x0], g[y0 * n + X], u), mix(g[Y * n + x0], g[Y * n + X], u), v);\n    }\n  }\n  const S = (P.shafts = F(256));\n  for (let n = 0; n \u003c 7; n++) {\n    const c = rnd() * 256, w = 3 + rnd() * 9, a = 0.4 + rnd() * 0.6;\n    for (let i = 0; i \u003c 256; i++) S[i] = min(1, S[i] + a * Math.exp(-((abs(((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06], kind = round(cl(k[0], 0, 2)), nb = round(cl(k[2], 1, 4)), nt = min(3, nb), h = cl(k[3], 0, 1);\n  const d = (cl(dt, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  if (kind !== P.kind || nt !== P.nt) (P.kind = kind), (P.nt = nt), build(P), (P.h = -1);\n  if (abs(h - P.h) > 0.0005) (P.h = h), paint(P);\n  P.nb = nb;\n  // K1 tap: the male stops to drum after his next hop.\n  if (input.btnPressed?.[0]) P.birds[0].work = 0;\n  P.t += d;\n  for (let i = 0; i \u003c nb; i++) stepBird(P, P.birds[i], d);\n  P.chips = P.chips.filter((c) => {\n    if (c[5]) return (c[5] += d) \u003c 6;\n    c[3] += 110 * d;\n    c[2] *= 1 - 1.6 * d;\n    c[0] += c[2] * d;\n    c[1] += c[3] * d;\n    if (c[1] >= 118 + (c[6] ? -8 : (c[0] * 7) % 9)) c[5] = d;\n    return c[0] > -2 && c[0] \u003c W + 2;\n  });\n  // Now and then a leaf lets go up in the crown.\n  if (rnd() \u003c d * 0.6) P.falls.push([rnd() * W, 8 + rnd() * 10, 7 + rnd() * 6, rnd() * 7]);\n  P.falls = P.falls.filter((f) => ((f[1] += f[2] * d), (f[0] += sin(P.t * 2.2 + f[3]) * 9 * d + 2 * d), f[1] \u003c 121));\n}\n\nlet BUF;\nconst A = (x, y, r, g, b, a = 1) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n};\n\n// Sun flecks moving with the crown, and shafts through the haze.\nfunction light(P) {\n  const { buf, bg, sa, ft, lit, sw, shafts: S, t, sx } = P, w = 0.6 + 0.4 * sin(t * 0.31) * sin(t * 0.17 + 2);\n  const ax = 4 * sin(t * 0.5) + 2 * sin(t * 1.3) * w + t * 0.6, ay = 2 * sin(t * 0.4 + 1), bx = -t * 1.1 + 3 * sin(t * 0.8) * w, by = 1.5 * sin(t * 0.6) + 40;\n  const [ix, iy, jx, jy] = [floor(ax), floor(ay), floor(bx), floor(by)], [fx, fy, gx, gy] = [ax - ix, ay - iy, bx - jx, by - jy];\n  const so = t * 0.9 + 3 * sin(t * 0.23), [sr, sg, sb] = P.sun;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    const r0 = ((y + iy) & 127) \u003c\u003c 7, r1 = ((y + iy + 1) & 127) \u003c\u003c 7, q0 = ((y + jy) & 127) \u003c\u003c 7, q1 = ((y + jy + 1) & 127) \u003c\u003c 7, bo = y * sx * 0.8 + so;\n    for (let x = 0; x \u003c W; x++, p++) {\n      const x0 = (x + ix) & 127, x1 = (x0 + 1) & 127, z0 = (x + jx) & 127, z1 = (z0 + 1) & 127, u = ft[r0 + x0], v = ft[r1 + x0], e = ft[q0 + z0], g = ft[q1 + z0];\n      const a = u + (ft[r0 + x1] - u) * fx, c = v + (ft[r1 + x1] - v) * fx, b = e + (ft[q0 + z1] - e) * gx, d = g + (ft[q1 + z1] - g) * gx;\n      let f = ((a + (c - a) * fy) * 0.55 + (b + (d - b) * gy) * 0.45 - 0.47) * 9;\n      f = f \u003c= 0 ? 0 : f >= 1 ? 1 : f * f * (3 - 2 * f);\n      const l = (lit[p] = 0.15 + 0.85 * f), s = S[(x + bo) & 255] * sw[p], o = p * 3;\n      buf[o] = bg[o] + sa[o] * l + s * sr;\n      buf[o + 1] = bg[o + 1] + sa[o + 1] * l + s * sg;\n      buf[o + 2] = bg[o + 2] + sa[o + 2] * l + s * sb;\n    }\n  }\n}\n\nfunction lightAt(P, x, y) {\n  const l = P.lit[cl(round(y), 0, H - 1) * W + cl(round(x), 0, W - 1)];\n  return [0, 1, 2].map((c) => (P.amb[c] + 96 + P.sun[c] * 0.65 * l) / 255);\n}\n\nfunction sprite(P, rows, x0, y0, face, cmap, L, a, z, dx = 0) {\n  rows.forEach((row, r) => {\n    for (let c = 0; c \u003c row.length; c++) {\n      const ch = row[c], col = ch === \"R\" ? cmap.R : COL[cmap[ch] || ch], x = x0 + (c + dx) * face, y = y0 + r;\n      if (!col || (z && P.zb[cl(y, 0, H - 1) * W + cl(x, 0, W - 1)] \u003c 1)) continue;\n      A(x, y, min(255, col[0] * L[0]), min(255, col[1] * L[1]), min(255, col[2] * L[2]), a);\n    }\n  });\n}\n\nfunction drawBird(P, B) {\n  const cm = KIND[B.kind], z = B.tr > 0, hk = 1 - TR[B.tr][3] * 0.6;\n  if (B.st === FLY) {\n    // Three bounds out from the trunk and down to its foot: wings beating on the rise, shut on the drop.\n    const u = B.t / B.dur, b = (u * 3) % 1, f = u \u003c 0.5 ? B.side : -B.side, x = cl(B.x0 + B.side * 17 * pow(sin(PI * u), 0.7), 3, 60), y = mix(B.y0 - 8, footRow(B) - 6, sm(u)) - 6 * sin(PI * b);\n    const L = mul(lightAt(P, x, y), hk), xi = round(x - f * 6), yi = round(y) - 2, up = floor(B.t / 0.06) & 1;\n    if (u > 0.94) return sprite(P, [...HEAD, ...BODY], feetX(B, footRow(B)) - B.face * 6, footRow(B) - 10, B.face, cm, L, 1, z);\n    sprite(P, FLB, xi, yi, f, cm, L, 1, z);\n    if (b \u003c 0.45) sprite(P, up ? WUP : WDN, xi, up ? yi - 3 : yi + 4, f, cm, L, 1, z);\n    return;\n  }\n  const L = mul(lightAt(P, feetX(B, B.y), B.y - 4), hk), x0 = feetX(B, B.y) - B.face * (6 + B.out), y0 = round(B.y) - 10;\n  sprite(P, BODY, x0, y0 + 5, B.face, cm, L, 1, z);\n  if (B.head === 3) for (let i = 0, f = floor(P.t * 30) & 1; i \u003c 2; i++) sprite(P, HEAD, x0, y0, B.face, cm, L, i ? 0.45 : 1, z, i ^ f);\n  else if (B.head === 2) sprite(P, HEAD, x0 + B.face * 6, y0, -B.face, cm, L, 1, z);\n  else sprite(P, B.head === 1 ? UPH : HEAD, x0, y0, B.face, cm, L, 1, z, B.head === 4 ? 1 : 0);\n}\n\nexport function draw(display, params) {\n  const P = params, { t, leafC, sun, amb, lit } = P, w = 0.6 + 0.4 * sin(t * 0.31) * sin(t * 0.17 + 2);\n  BUF = P.buf;\n  light(P);\n  // Holes: dark, with a rim of fresh pale wood below.\n  for (const [hx, hy, r, tr] of P.holes) {\n    const L = mul(lightAt(P, hx, hy), 1 - TR[tr][3] * 0.5);\n    for (let y = floor(hy - r - 1); y \u003c= hy + r + 1; y++)\n      for (let x = floor(hx - r - 1); x \u003c= hx + r + 1; x++) {\n        const e = sqrt(((x - hx) / max(0.6, r * 0.8)) ** 2 + ((y - hy) / max(0.6, r)) ** 2);\n        if (e \u003c 1) A(x, y, 12, 8, 6);\n        else if (e \u003c 1.6) A(x, y, 240 * L[0], 212 * L[1], 156 * L[2], y > hy ? 0.9 : 0.5);\n      }\n  }\n  for (let i = 0; i \u003c P.nb; i++) if (P.birds[i].tr) drawBird(P, P.birds[i]);\n  // Leaves stir in the wind and catch the sun as they turn.\n  for (const [lx, ly, s, tone, ph] of P.leaves) {\n    const x = lx + round(sin(t * (1.2 + w) + ph) * w), q = max(0, sin(t * (2 + 2 * w) + ph * 3)) ** 6, l = lit[cl(ly, 0, H - 1) * W + cl(x, 0, W - 1)] * (0.85 + 0.6 * q);\n    const r = leafC[0] * tone * (amb[0] * 0.9 + sun[0] * l), g = leafC[1] * tone * (amb[1] * 0.9 + sun[1] * l), b = leafC[2] * tone * (amb[2] * 0.9 + sun[2] * l) + 20 * q;\n    A(x, ly, r, g, b);\n    if (s & 1) A(x + 1, ly, r * 0.8, g * 0.8, b * 0.8);\n    if (s > 1) A(x, ly + 1, r * 0.7, g * 0.7, b * 0.7);\n  }\n  for (let i = 0; i \u003c P.nb; i++) if (!P.birds[i].tr) drawBird(P, P.birds[i]);\n  for (const [x, y, , , c, , z] of P.chips) {\n    const L = lightAt(P, x, y), col = [[236, 210, 160], [200, 170, 120], [120, 96, 80]][c], xi = round(x), yi = round(y);\n    if (!z || P.zb[cl(yi, 0, H - 1) * W + cl(xi, 0, W - 1)]) A(xi, yi, col[0] * L[0], col[1] * L[1], col[2] * L[2]);\n  }\n  for (const [x, y, , ph] of P.falls) {\n    const L = lightAt(P, x, y), k = 255 * (0.8 + 0.4 * sin(t * 6 + ph));\n    A(round(x), round(y), leafC[0] * k * L[0], leafC[1] * k * L[1], leafC[2] * k * L[2]);\n  }\n  // Bracken in front, arching and swaying, the fronds narrowing to the tip.\n  for (const [fx, fy, len, lean, ph] of P.ferns)\n    for (let s = 0, x = fx, y = fy, sw = sin(t * 1.4 + ph) * 0.12 * w; s \u003c len; s++) {\n      const f = s / len, a = (lean + sw) * f * 1.8 - 0.2 * lean, ca = cos(a), sa = sin(a), L = mul(lightAt(P, (x += sa), (y -= ca)), 0.6 + 0.4 * f);\n      A(round(x), round(y), 70 * L[0], 120 * L[1], 36 * L[2]);\n      if (s > 2) for (let j = 1, n = round(3.2 * (1 - f)) + (s & 1); j \u003c= n; j++) for (const e of [-1, 1]) A(round(x + e * j * ca), round(y + e * j * sa + j * 0.35), 96 * L[0], 168 * L[1], 52 * L[2], 0.9);\n    }\n  show(display, P.buf);\n}\n\nfunction show(display, buf) {\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n    display.setPixel(p & 63, p >> 6, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n  }\n}\n","layer":{"id":"layer-woodpecker","type":"code","name":"woodpecker","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Woodpecker\n// Family:  bird\n// Idea:    A great spotted woodpecker hops up a tree trunk that runs the full height of the panel, braced on its stiff tail, stops to drum a hole with bark chips flying, and at the top drops off in a bounding flight to the foot of the trunk to start again, in a wood lit through the canopy.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 21, after field-guide plates of the great spotted woodpecker (Dendrocopos major)\n// Round:   21\n// ===============================\n// @matrix 64x128\n// @knobs Tree=0..2, Speed=0.2..3, Birds=1..4, Light=0..1\n//\n// Knob 1: Tree. A silver birch at 0, white with black lenticels and a fissured black foot; a Scots pine at 1, grey plates low down and thin orange bark higher up; an oak at 2, deeply furrowed and grey with lichen. The wood behind is of the same tree.\n// Knob 2: Speed. How fast the bird, the wind and the light go: at 2 all of it runs in real time, the bird takes 15 to 20 s up the trunk with its stops to drum and under 3 s back down; 0.2 is ten times slower.\n// Knob 3: Birds. One male at 1; at 2 his mate works a nearer trunk that comes in on the right; at 3 a red-capped young bird of the year climbs another at the left, and at 4 a second one climbs the right-hand edge of his trunk.\n// Knob 4: Light. Dawn at 0 with the sun low in the east and shafts through the mist, noon at 0.5, dusk at 1 with the sun low in the west.\n// Buttons: K1 tap makes the male stop and drum after his next hop.\n\nconst [W, H] = [64, 128];\nconst N = W * H;\nconst { min, max, floor, round, sin, cos, abs, sqrt, pow, asin, PI } = Math;\nconst rnd = () => Math.random();\nconst cl = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst mix = (a, b, t) => a + (b - a) * t;\nconst sm = (x) => ((x = cl(x, 0, 1)), x * x * (3 - 2 * x));\nconst mul = (c, k) => c.map((v) => v * k);\nconst lum = (c) => (c[0] + c[1] + c[2]) / 3;\nfunction hash(i, j) {\n  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;\n  h = Math.imul(h ^ (h >>> 13), 1274126177);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\nfunction vn(x, y) {\n  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);\n  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);\n  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;\n}\n\n// Trunks: centre, radius, the row where the foot meets the ground, haze. The near one first.\nconst TR = [[30, 10, 119, 0], [57, 5.4, 108, 0.16], [2.2, 5.2, 110, 0.12]];\nconst rad = (T, y) => T[1] * (1 + 0.7 * sm((y - T[2] + 16) / 16) ** 2);\n// Who climbs where: trunk, side (-1 the left edge, so the bird faces right), kind (0 male, 1 female, 2 young), first row.\nconst FLOCK = [[0, -1, 0, 50], [1, -1, 1, 74], [2, 1, 2, 40], [0, 1, 2, 96]];\nconst TOP = 27;\n// The clinging bird facing right, the bark on its right: rows 0..4 the head, then the body and the\n// stiff tail. The toes on row 10 grip the bark's edge, and the bill on row 3 reaches one LED into it.\n// C crown, N nape, K black, W white, w buff, R red, G bill and toes, e eye.\nconst HEAD = [\"..CCC....\", \".CCCCC...\", \"NCCCWWW..\", \"NWWeWWGG.\", \"KWKKKKG..\"];\nconst UPH = [\"..CCC.G..\", \".CCCCCG..\", \"NCCCWeW..\", \"NWWWWW...\", \"KWKKKK...\"];\nconst BODY = [\"KKKWWW...\", \"KKKKWw...\", \"KWWKww...\", \"KWWWww...\", \"KWWKww...\", \"KKKKwwG..\", \"KWKWww...\", \".KKKwR...\", \"..KKRRG..\", \"..KKRR...\", \"...KK....\", \"....KK...\", \".....K...\"];\n// In flight, facing right: the bird with its wings closed for the bound, wings up, wings down.\nconst FLB = [\".......CCC...\", \"KKK.KKKNCWW..\", \"KKKKKWWKWeWGG\", \"...RRwwwKKK..\", \".....www.....\"];\nconst WUP = [\".....W.......\", \"....KWKW.....\", \".....KWKW....\"];\nconst WDN = [\"....KWKWw....\", \"...KWKW......\", \"....W........\"];\nconst COL = { K: [24, 22, 28], W: [244, 240, 228], w: [222, 208, 184], G: [70, 70, 78], e: [90, 26, 26] };\n// Male, female, young: crown, nape, the red under the tail.\nconst KIND = [{ C: \"K\", N: \"R\", R: [232, 28, 40] }, { C: \"K\", N: \"K\", R: [232, 28, 40] }, { C: \"R\", N: \"K\", R: [240, 112, 122] }];\n// Birch, pine, oak: far trunk, foliage, leaf, ground.\nconst SP = [\n  [[0.86, 0.84, 0.8], [0.36, 0.56, 0.2], [0.56, 0.82, 0.28], [0.36, 0.44, 0.16]],\n  [[0.68, 0.38, 0.24], [0.14, 0.32, 0.2], [0.24, 0.48, 0.28], [0.36, 0.32, 0.16]],\n  [[0.36, 0.34, 0.3], [0.24, 0.4, 0.13], [0.4, 0.62, 0.2], [0.42, 0.32, 0.16]],\n];\n// Dawn, morning, noon, afternoon, dusk: sky, haze, sun, shade, shafts.\nconst HOURS = [\n  [250, 220, 172, 172, 156, 150, 255, 188, 104, 70, 80, 104, 1],\n  [214, 232, 240, 150, 176, 160, 255, 230, 170, 78, 100, 108, 0.75],\n  [186, 220, 252, 128, 170, 132, 255, 250, 232, 90, 116, 96, 0.45],\n  [244, 220, 160, 160, 150, 104, 255, 206, 128, 90, 90, 74, 0.7],\n  [252, 150, 116, 108, 78, 110, 255, 120, 60, 50, 44, 80, 0.9],\n];\nconst [CLING, HOP, DRUM, PROBE, FLY] = [0, 1, 2, 3, 4];\n\n// Bark colour at arc length s round the trunk and row y.\nfunction bark(k, s, y) {\n  const g = vn(s * 0.7, y * 0.35), q = 0.9 + 0.2 * g;\n  let c;\n  if (k === 0) {\n    // Birch: white, with dark lenticels, black scars, pink where it peels, a fissured black foot.\n    c = [0.92 * q, 0.9 * q, 0.85 * q];\n    if (vn(s * 0.22 + 3, y * 0.13) > 0.83) c = [0.12, 0.11, 0.12];\n    else if (vn(s * 0.3 + 5, y * 1.3) > 0.79) c = [0.22, 0.2, 0.2];\n    else if (vn(s * 0.3 + 20, y * 0.45) > 0.82) c = [0.9, 0.66, 0.54];\n    if (sm((y - 88) / 24) * (0.55 + 0.6 * vn(s * 0.25, y * 0.08 + 4)) > 0.5) c = abs(vn(s * 0.55, y * 0.11) * 2 - 1) \u003c 0.3 ? [0.07, 0.06, 0.06] : mul([0.34, 0.33, 0.32], q);\n  } else if (k === 1) {\n    // Scots pine: plates split by deep fissures low down, thin orange flakes higher up.\n    const up = sm((64 - y) / 22 + vn(s * 0.2, y * 0.05) - 0.5), r = abs(vn(s * 0.32, y * 0.085) * 2 - 1), i = vn(s * 0.9, y * 0.5), f = vn(s * 0.8 + 9, y * 0.9);\n    const lo = r \u003c 0.16 ? [0.09, 0.06, 0.05] : [mix(0.44, 0.6, i) * q, mix(0.38, 0.32, i) * q, mix(0.32, 0.22, i) * q];\n    const hi = f > 0.7 ? [0.96, 0.68, 0.44] : f \u003c 0.25 ? [0.52, 0.24, 0.14] : [(0.84 + 0.1 * i) * q, (0.44 + 0.08 * i) * q, 0.24 * q];\n    c = lo.map((v, j) => mix(v, hi[j], up));\n  } else {\n    // Oak: deep furrows in a net of grey ridges.\n    const r = abs(vn(s * 0.55, y * 0.04) * 2 - 1) + 0.12 * (vn(s * 1.3, y * 0.2) - 0.5);\n    c = r \u003c 0.12 || vn(s * 1.1, y * 0.5 + 9) > 0.85 ? [0.09, 0.08, 0.07] : mul([0.64, 0.6, 0.53], q * (r \u003c 0.24 ? 0.68 : 1));\n  }\n  if (vn(s * 0.45 + 40, y * 0.35 + 40) > [0.86, 0.86, 0.76][k]) c = mul([0.66, 0.74, 0.54], q);\n  if (k && y > 94 && vn(s * 0.3 + 60, y * 0.2) > 0.78 - (y - 94) / 90) c = [0.26 * q, 0.4 * q, 0.1];\n  return c;\n}\n\nfunction build(P) {\n  const { alb, mat, hz, nx, zb } = P, k = P.kind, [FT, FF, LF, GR] = SP[k];\n  const put = (x, y, m, c, h, n, z) => {\n    if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n    const p = y * W + x;\n    [mat[p], hz[p], nx[p], zb[p]] = [m, h, n, z];\n    alb.set(c, p * 3);\n  };\n  // Leaves overhead with the sky through them, the wood fading into the haze, the ground.\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const d = vn(x * 0.11, y * 0.14) * 0.55 + vn(x * 0.3 + 5, y * 0.3) * 0.3 + vn(x * 0.8, y * 0.8) * 0.15, q = 0.75 + 0.5 * vn(x * 0.6 + 3, y * 0.6), gl = 99 + 3 * vn(x * 0.09, 3.1);\n      const b = vn(x * 0.13, y * 0.11 + 30) * 0.7 + vn(x * 0.45, y * 0.4) * 0.3 + (y - 56) / 90;\n      if (d > 0.28 + 0.4 * sm((y - 4) / 26) && y \u003c 32) put(x, y, 1, mul(FF, q * (1.25 - d * 0.6)), 0, 0, 2);\n      else if (y \u003c 12 + 8 * vn(x * 0.1, 9)) put(x, y, 0, FF, 0, 0, 2);\n      else if (y \u003c gl) put(x, y, 2, mul(FF, q), b > 0.75 && y > 54 ? 0.5 - (y - 56) / 140 : 0.2 + 0.68 * sm((y - 26) / 64) + 0.2 * (vn(x * 0.2, y * 0.08 + 60) - 0.5), 0, 2);\n      else put(x, y, 4, mul(GR, q), 0.6 * (1 - sm((y - gl) / 14)), 0, 2);\n    }\n  // Far trunks, thin and pale, then a few nearer ones.\n  for (let i = 0; i \u003c 14; i++) {\n    const near = i > 8, w = near ? 2.5 + rnd() * 2 : 1 + rnd() * 1.4, cx = rnd() * 66 - 1, h = near ? 0.32 + rnd() * 0.12 : 0.58 + rnd() * 0.18;\n    for (let y = floor(rnd() * 12); y \u003c 101 + (near ? 4 : 0); y++)\n      for (let x = floor(cx - w / 2); x \u003c= cx + w / 2; x++) {\n        const u = (x + 0.5 - cx) / (w / 2 + 0.01), m = mat[y * W + x];\n        if (abs(u) \u003c= 1 && m !== 1) put(x, y, 3, k || near ? bark(k, u * 3 + i * 9, y) : y > 92 || vn(x + i * 7, y * 0.9) > 0.8 ? [0.2, 0.2, 0.2] : FT, h, u, 2);\n      }\n  }\n  // The near trunks, full bark and rounded.\n  for (let t = P.nt - 1; t >= 0; t--) {\n    const T = TR[t], [cx, r0, fy, h] = T;\n    for (let y = 0; y \u003c min(H, fy + 3); y++)\n      for (let r = rad(T, y), x = floor(cx - r); x \u003c= cx + r; x++) {\n        const u = (x + 0.5 - cx) / r, s = asin(cl(u, -1, 1)) * r0 + t * 40;\n        // The bark's own relief tips the normal, so ridges catch a low sun on one side.\n        if (abs(u) \u003c= 1) put(x, y, 3, bark(k, s, y), h, cl(u + (lum(bark(k, s - 0.7, y)) - lum(bark(k, s + 0.7, y))) * 1.6, -1, 1), t ? 1 : 0);\n      }\n  }\n  // Limbs off the near trunk: a live one to the right, one up into the crown, a dead stub on the left.\n  const limb = (x0, y0, x1, y1, w0, w1, dead) => {\n    for (let i = 0, n = abs(x1 - x0) * 2; i \u003c= n; i++) {\n      const f = i / n, x = round(mix(x0, x1, f)), yc = mix(y0, y1, f) + 3 * sin(PI * f), w = mix(w0, w1, f);\n      for (let j = 0; j \u003c w; j++) put(x, round(yc - w / 2 + j), 3, mul(bark(dead ? 2 : k, i * 0.6 + 70, j * 4 + 30), j \u003c 1 ? 1.15 : j > w - 2 ? 0.6 : 0.9), 0, j \u003c 1 ? -0.5 : 0.4, 0);\n    }\n  };\n  limb(38, 57, 64, 41, 4, 2, k === 1);\n  limb(46, 54, 52, 42, 1.5, 1, k === 1);\n  limb(56, 48, 61, 36, 1.5, 1, k === 1);\n  limb(38, 24, 62, 4, 3, 1.5);\n  limb(21, 87, 15, 83, 3, 2, true);\n  // The near ground: moss, litter, roots.\n  for (let y = 110; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x, g = vn(x * 0.4, y * 0.5), l = vn(x * 0.9 + 5, y * 0.9);\n      if ((mat[p] === 3 && y \u003c 121) || (y \u003c 117 && hz[p] > 0.05)) continue;\n      put(x, y, 4, l > 0.72 ? [0.56, 0.36, 0.16] : g > 0.6 ? [0.26, 0.46, 0.1] : mul(GR, 0.7 + 0.5 * l), 0, 0, y > 116 ? 0 : 1);\n    }\n  for (const [x0, dir] of [[21, -1], [24, -1], [36, 1], [39, 1], [30, 1]])\n    for (let i = 0, x = x0, y = 117; i \u003c 14; i++) {\n      (x += dir * (0.7 + rnd() * 0.5)), (y += 0.35 + rnd() * 0.4);\n      put(round(x), round(y), 3, bark(k, i, 100 + i), 0, -0.3, 0);\n      put(round(x), round(y) + 1, 3, mul(bark(k, i, 101 + i), 0.6), 0, 0.5, 0);\n    }\n  // Leaves that move: on the right limb, over the top of the trunk, hanging in from the crown.\n  const L = (P.leaves = []);\n  const spray = (cx, cy, r, n) => {\n    for (let i = 0; i \u003c n; i++) {\n      const a = rnd() * PI * 2, d = r * sqrt(rnd());\n      L.push([round(cx + cos(a) * d), round(cy + sin(a) * d * 0.7), floor(rnd() * 4), 0.7 + rnd() * 0.6, rnd() * 7]);\n    }\n  };\n  if (k !== 1) [[52, 41, 7, 60], [61, 37, 6, 50], [46, 48, 4, 18], [58, 49, 4, 20]].forEach(([x, y, r, n]) => spray(x, y, r, n * (k ? 1.3 : 1)));\n  [[30, 3, 9, 70], [50, 10, 9, 70], [60, 3, 7, 50], [7, 20, 6, 40], [14, 14, 5, 24], [40, 18, 4, 16]].forEach((a) => spray(...a));\n  P.leafC = LF;\n  P.ferns = Array.from({ length: 12 }, (_, i) => [(i * 5.7 + rnd() * 4) % 64, 124 + rnd() * 5, 9 + rnd() * 8, (i % 2 ? 1 : -1) * (0.4 + rnd() * 0.5), rnd() * 7]);\n  P.holes = P.holes.filter((h) => h[3] \u003c P.nt);\n}\n\n// Light for the hour: what lies in shade, and what the sun adds where it gets through.\nfunction paint(P) {\n  const f = P.h * 4, i = min(3, floor(f)), q = HOURS[i].map((v, c) => mix(v, HOURS[i + 1][c], f - i)), { alb, mat, hz, nx, bg, sa } = P;\n  const sky = q.slice(0, 3), haze = q.slice(3, 6), sun = (P.sun = q.slice(6, 9)), amb = (P.amb = q.slice(9, 12));\n  const sx = (P.sx = -0.85 + 1.7 * P.h), sz = 0.55, sl = sqrt(sx * sx + sz * sz);\n  for (let p = 0; p \u003c N; p++) {\n    const m = mat[p], y = p >> 6, h = hz[p], n = nx[p], nz = sqrt(max(0, 1 - n * n)), d = m === 3 ? max(0, (n * sx + nz * sz) / sl) : m === 4 ? 0.8 : m === 1 ? 0.7 : 0.2;\n    const sh = m === 3 ? 0.35 + 0.65 * nz : m === 1 ? 0.8 : 0.9, hk = 1.1 - y / 180;\n    // How strongly the shafts show here: most in the haze, faint in front of the near trunk.\n    P.sw[p] = m ? (q[12] * 100 * (0.25 + 0.75 * h) * (1.1 - y / 160)) / 255 : 0;\n    for (let c = 0, o = p * 3; c \u003c 3; c++) {\n      const a = alb[o + c];\n      bg[o + c] = m ? mix(a * amb[c] * sh * 1.1, haze[c] * hk, h) : mix(sky[c], 255, 0.3);\n      sa[o + c] = m ? a * sun[c] * d * (1 - h) : 0;\n    }\n  }\n}\n\nfunction newBird(i) {\n  const [tr, side, kind, y] = FLOCK[i];\n  return { tr, side, face: -side, kind, y, st: CLING, t: 0, dur: 0.2 + i * 0.35, hops: 2, work: 4 + i * 11, head: 0, out: 0, look: 0 };\n}\n// The bark's edge pixel at row y, where the toes grip.\nconst feetX = (B, y) => round(TR[B.tr][0] + B.side * (rad(TR[B.tr], y) - 0.5));\nconst footRow = (B) => TR[B.tr][2] - 17;\n\nfunction stepBird(P, B, d) {\n  const go = (s, dur) => ((B.st = s), (B.t = 0), (B.dur = dur));\n  B.t += d;\n  switch (B.st) {\n    case CLING:\n      B.head = B.t > 0.15 && B.t \u003c B.dur - 0.1 ? B.look : 0;\n      B.out = 0;\n      if (B.t \u003c B.dur) break;\n      if (B.y \u003c= TOP) [B.x0, B.y0] = [feetX(B, B.y), B.y], go(FLY, 2.6);\n      else if (B.work \u003c= 0) {\n        // Drum where an old hole is, or start a new one.\n        const hx = feetX(B, B.y) + B.face * 2, hy = round(B.y) - 7;\n        B.hole = P.holes.find((h) => h[3] === B.tr && abs(h[0] - hx) \u003c 2 && abs(h[1] - hy) \u003c 3);\n        if (!B.hole) P.holes.push((B.hole = [hx, hy, 0.4, B.tr])), P.holes.length > 30 && P.holes.shift();\n        go(DRUM, 1.3 + rnd() * 1.2);\n      } else (B.y0 = B.y), (B.len = 2.5 + rnd() * 2.5), go(HOP, 0.15);\n      break;\n    case HOP: {\n      const u = B.t / B.dur;\n      B.y = mix(B.y0, B.y0 - B.len, sm(u / 0.5));\n      B.out = u \u003c 0.6 ? 1 : 0;\n      if (u \u003c 1) break;\n      B.work -= B.len;\n      if (--B.hops > 0) (B.look = 0), go(CLING, 0.04 + rnd() * 0.1);\n      else (B.hops = 2 + floor(rnd() * 4)), (B.look = rnd() \u003c 0.6 ? 1 + floor(rnd() * 2) : 0), go(CLING, 0.3 + rnd() * 0.8);\n      break;\n    }\n    case DRUM: {\n      // Bursts of strikes too fast to see: the head is a blur and chips fly.\n      const on = B.t % 0.62 \u003c 0.42;\n      B.head = on ? 3 : 0;\n      if (on) {\n        B.hole[2] = min(2.2, B.hole[2] + d * 0.5);\n        for (let n = rnd() \u003c d * 30 ? 1 + (rnd() \u003c 0.5) : 0; n > 0; n--) P.chips.push([B.hole[0] + B.side, B.hole[1] + (rnd() - 0.5) * 2, B.side * (12 + rnd() * 30), -(4 + rnd() * 26), floor(rnd() * 3), 0, B.tr ? 1 : 0]);\n      }\n      if (B.t >= B.dur) go(PROBE, 0.7 + rnd() * 0.6);\n      break;\n    }\n    case PROBE:\n      B.head = floor(B.t / 0.18) % 3 ? 4 : 0;\n      if (B.t >= B.dur) (B.work = 16 + rnd() * 24), (B.look = 1), go(CLING, 0.5);\n      break;\n    case FLY:\n      if (B.t >= B.dur) (B.y = footRow(B)), (B.look = 0), go(CLING, 0.5);\n  }\n}\n\nexport function setup(params) {\n  const P = params, F = (n) => new Float32Array(n);\n  Object.assign(P, { alb: F(N * 3), hz: F(N), nx: F(N), zb: new Uint8Array(N), mat: new Uint8Array(N), bg: F(N * 3), sa: F(N * 3), sw: F(N), buf: F(N * 3), lit: F(N), kind: -1, nt: 0, h: -1, t: 0, holes: [], chips: [], falls: [] });\n  P.birds = FLOCK.map((_, i) => newBird(i));\n  // Sun flecks: a tile of soft blobs the crown lets through, wrapped both ways.\n  const FT = (P.ft = F(16384));\n  for (const [c, a] of [[16, 0.3], [8, 0.45], [4, 0.25]]) {\n    const n = 128 / c, g = Array.from({ length: n * n }, rnd);\n    for (let i = 0; i \u003c 16384; i++) {\n      const x = (i & 127) / c, y = (i >> 7) / c, x0 = floor(x), y0 = floor(y), u = sm(x - x0), v = sm(y - y0), X = (x0 + 1) % n, Y = (y0 + 1) % n;\n      FT[i] += a * mix(mix(g[y0 * n + x0], g[y0 * n + X], u), mix(g[Y * n + x0], g[Y * n + X], u), v);\n    }\n  }\n  const S = (P.shafts = F(256));\n  for (let n = 0; n \u003c 7; n++) {\n    const c = rnd() * 256, w = 3 + rnd() * 9, a = 0.4 + rnd() * 0.6;\n    for (let i = 0; i \u003c 256; i++) S[i] = min(1, S[i] + a * Math.exp(-((abs(((i - c + 384) % 256) - 128) / w) ** 2)));\n  }\n}\n\nexport function update(dt, input, params) {\n  const P = params, k = input.knobValues || [0, 2, 1, 0.06], kind = round(cl(k[0], 0, 2)), nb = round(cl(k[2], 1, 4)), nt = min(3, nb), h = cl(k[3], 0, 1);\n  const d = (cl(dt, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;\n  if (kind !== P.kind || nt !== P.nt) (P.kind = kind), (P.nt = nt), build(P), (P.h = -1);\n  if (abs(h - P.h) > 0.0005) (P.h = h), paint(P);\n  P.nb = nb;\n  // K1 tap: the male stops to drum after his next hop.\n  if (input.btnPressed?.[0]) P.birds[0].work = 0;\n  P.t += d;\n  for (let i = 0; i \u003c nb; i++) stepBird(P, P.birds[i], d);\n  P.chips = P.chips.filter((c) => {\n    if (c[5]) return (c[5] += d) \u003c 6;\n    c[3] += 110 * d;\n    c[2] *= 1 - 1.6 * d;\n    c[0] += c[2] * d;\n    c[1] += c[3] * d;\n    if (c[1] >= 118 + (c[6] ? -8 : (c[0] * 7) % 9)) c[5] = d;\n    return c[0] > -2 && c[0] \u003c W + 2;\n  });\n  // Now and then a leaf lets go up in the crown.\n  if (rnd() \u003c d * 0.6) P.falls.push([rnd() * W, 8 + rnd() * 10, 7 + rnd() * 6, rnd() * 7]);\n  P.falls = P.falls.filter((f) => ((f[1] += f[2] * d), (f[0] += sin(P.t * 2.2 + f[3]) * 9 * d + 2 * d), f[1] \u003c 121));\n}\n\nlet BUF;\nconst A = (x, y, r, g, b, a = 1) => {\n  if (x \u003c 0 || x >= W || y \u003c 0 || y >= H) return;\n  const o = (y * W + x) * 3;\n  BUF[o] += (r - BUF[o]) * a;\n  BUF[o + 1] += (g - BUF[o + 1]) * a;\n  BUF[o + 2] += (b - BUF[o + 2]) * a;\n};\n\n// Sun flecks moving with the crown, and shafts through the haze.\nfunction light(P) {\n  const { buf, bg, sa, ft, lit, sw, shafts: S, t, sx } = P, w = 0.6 + 0.4 * sin(t * 0.31) * sin(t * 0.17 + 2);\n  const ax = 4 * sin(t * 0.5) + 2 * sin(t * 1.3) * w + t * 0.6, ay = 2 * sin(t * 0.4 + 1), bx = -t * 1.1 + 3 * sin(t * 0.8) * w, by = 1.5 * sin(t * 0.6) + 40;\n  const [ix, iy, jx, jy] = [floor(ax), floor(ay), floor(bx), floor(by)], [fx, fy, gx, gy] = [ax - ix, ay - iy, bx - jx, by - jy];\n  const so = t * 0.9 + 3 * sin(t * 0.23), [sr, sg, sb] = P.sun;\n  for (let y = 0, p = 0; y \u003c H; y++) {\n    const r0 = ((y + iy) & 127) \u003c\u003c 7, r1 = ((y + iy + 1) & 127) \u003c\u003c 7, q0 = ((y + jy) & 127) \u003c\u003c 7, q1 = ((y + jy + 1) & 127) \u003c\u003c 7, bo = y * sx * 0.8 + so;\n    for (let x = 0; x \u003c W; x++, p++) {\n      const x0 = (x + ix) & 127, x1 = (x0 + 1) & 127, z0 = (x + jx) & 127, z1 = (z0 + 1) & 127, u = ft[r0 + x0], v = ft[r1 + x0], e = ft[q0 + z0], g = ft[q1 + z0];\n      const a = u + (ft[r0 + x1] - u) * fx, c = v + (ft[r1 + x1] - v) * fx, b = e + (ft[q0 + z1] - e) * gx, d = g + (ft[q1 + z1] - g) * gx;\n      let f = ((a + (c - a) * fy) * 0.55 + (b + (d - b) * gy) * 0.45 - 0.47) * 9;\n      f = f \u003c= 0 ? 0 : f >= 1 ? 1 : f * f * (3 - 2 * f);\n      const l = (lit[p] = 0.15 + 0.85 * f), s = S[(x + bo) & 255] * sw[p], o = p * 3;\n      buf[o] = bg[o] + sa[o] * l + s * sr;\n      buf[o + 1] = bg[o + 1] + sa[o + 1] * l + s * sg;\n      buf[o + 2] = bg[o + 2] + sa[o + 2] * l + s * sb;\n    }\n  }\n}\n\nfunction lightAt(P, x, y) {\n  const l = P.lit[cl(round(y), 0, H - 1) * W + cl(round(x), 0, W - 1)];\n  return [0, 1, 2].map((c) => (P.amb[c] + 96 + P.sun[c] * 0.65 * l) / 255);\n}\n\nfunction sprite(P, rows, x0, y0, face, cmap, L, a, z, dx = 0) {\n  rows.forEach((row, r) => {\n    for (let c = 0; c \u003c row.length; c++) {\n      const ch = row[c], col = ch === \"R\" ? cmap.R : COL[cmap[ch] || ch], x = x0 + (c + dx) * face, y = y0 + r;\n      if (!col || (z && P.zb[cl(y, 0, H - 1) * W + cl(x, 0, W - 1)] \u003c 1)) continue;\n      A(x, y, min(255, col[0] * L[0]), min(255, col[1] * L[1]), min(255, col[2] * L[2]), a);\n    }\n  });\n}\n\nfunction drawBird(P, B) {\n  const cm = KIND[B.kind], z = B.tr > 0, hk = 1 - TR[B.tr][3] * 0.6;\n  if (B.st === FLY) {\n    // Three bounds out from the trunk and down to its foot: wings beating on the rise, shut on the drop.\n    const u = B.t / B.dur, b = (u * 3) % 1, f = u \u003c 0.5 ? B.side : -B.side, x = cl(B.x0 + B.side * 17 * pow(sin(PI * u), 0.7), 3, 60), y = mix(B.y0 - 8, footRow(B) - 6, sm(u)) - 6 * sin(PI * b);\n    const L = mul(lightAt(P, x, y), hk), xi = round(x - f * 6), yi = round(y) - 2, up = floor(B.t / 0.06) & 1;\n    if (u > 0.94) return sprite(P, [...HEAD, ...BODY], feetX(B, footRow(B)) - B.face * 6, footRow(B) - 10, B.face, cm, L, 1, z);\n    sprite(P, FLB, xi, yi, f, cm, L, 1, z);\n    if (b \u003c 0.45) sprite(P, up ? WUP : WDN, xi, up ? yi - 3 : yi + 4, f, cm, L, 1, z);\n    return;\n  }\n  const L = mul(lightAt(P, feetX(B, B.y), B.y - 4), hk), x0 = feetX(B, B.y) - B.face * (6 + B.out), y0 = round(B.y) - 10;\n  sprite(P, BODY, x0, y0 + 5, B.face, cm, L, 1, z);\n  if (B.head === 3) for (let i = 0, f = floor(P.t * 30) & 1; i \u003c 2; i++) sprite(P, HEAD, x0, y0, B.face, cm, L, i ? 0.45 : 1, z, i ^ f);\n  else if (B.head === 2) sprite(P, HEAD, x0 + B.face * 6, y0, -B.face, cm, L, 1, z);\n  else sprite(P, B.head === 1 ? UPH : HEAD, x0, y0, B.face, cm, L, 1, z, B.head === 4 ? 1 : 0);\n}\n\nexport function draw(display, params) {\n  const P = params, { t, leafC, sun, amb, lit } = P, w = 0.6 + 0.4 * sin(t * 0.31) * sin(t * 0.17 + 2);\n  BUF = P.buf;\n  light(P);\n  // Holes: dark, with a rim of fresh pale wood below.\n  for (const [hx, hy, r, tr] of P.holes) {\n    const L = mul(lightAt(P, hx, hy), 1 - TR[tr][3] * 0.5);\n    for (let y = floor(hy - r - 1); y \u003c= hy + r + 1; y++)\n      for (let x = floor(hx - r - 1); x \u003c= hx + r + 1; x++) {\n        const e = sqrt(((x - hx) / max(0.6, r * 0.8)) ** 2 + ((y - hy) / max(0.6, r)) ** 2);\n        if (e \u003c 1) A(x, y, 12, 8, 6);\n        else if (e \u003c 1.6) A(x, y, 240 * L[0], 212 * L[1], 156 * L[2], y > hy ? 0.9 : 0.5);\n      }\n  }\n  for (let i = 0; i \u003c P.nb; i++) if (P.birds[i].tr) drawBird(P, P.birds[i]);\n  // Leaves stir in the wind and catch the sun as they turn.\n  for (const [lx, ly, s, tone, ph] of P.leaves) {\n    const x = lx + round(sin(t * (1.2 + w) + ph) * w), q = max(0, sin(t * (2 + 2 * w) + ph * 3)) ** 6, l = lit[cl(ly, 0, H - 1) * W + cl(x, 0, W - 1)] * (0.85 + 0.6 * q);\n    const r = leafC[0] * tone * (amb[0] * 0.9 + sun[0] * l), g = leafC[1] * tone * (amb[1] * 0.9 + sun[1] * l), b = leafC[2] * tone * (amb[2] * 0.9 + sun[2] * l) + 20 * q;\n    A(x, ly, r, g, b);\n    if (s & 1) A(x + 1, ly, r * 0.8, g * 0.8, b * 0.8);\n    if (s > 1) A(x, ly + 1, r * 0.7, g * 0.7, b * 0.7);\n  }\n  for (let i = 0; i \u003c P.nb; i++) if (!P.birds[i].tr) drawBird(P, P.birds[i]);\n  for (const [x, y, , , c, , z] of P.chips) {\n    const L = lightAt(P, x, y), col = [[236, 210, 160], [200, 170, 120], [120, 96, 80]][c], xi = round(x), yi = round(y);\n    if (!z || P.zb[cl(yi, 0, H - 1) * W + cl(xi, 0, W - 1)]) A(xi, yi, col[0] * L[0], col[1] * L[1], col[2] * L[2]);\n  }\n  for (const [x, y, , ph] of P.falls) {\n    const L = lightAt(P, x, y), k = 255 * (0.8 + 0.4 * sin(t * 6 + ph));\n    A(round(x), round(y), leafC[0] * k * L[0], leafC[1] * k * L[1], leafC[2] * k * L[2]);\n  }\n  // Bracken in front, arching and swaying, the fronds narrowing to the tip.\n  for (const [fx, fy, len, lean, ph] of P.ferns)\n    for (let s = 0, x = fx, y = fy, sw = sin(t * 1.4 + ph) * 0.12 * w; s \u003c len; s++) {\n      const f = s / len, a = (lean + sw) * f * 1.8 - 0.2 * lean, ca = cos(a), sa = sin(a), L = mul(lightAt(P, (x += sa), (y -= ca)), 0.6 + 0.4 * f);\n      A(round(x), round(y), 70 * L[0], 120 * L[1], 36 * L[2]);\n      if (s > 2) for (let j = 1, n = round(3.2 * (1 - f)) + (s & 1); j \u003c= n; j++) for (const e of [-1, 1]) A(round(x + e * j * ca), round(y + e * j * sa + j * 0.35), 96 * L[0], 168 * L[1], 52 * L[2], 0.9);\n    }\n  show(display, P.buf);\n}\n\nfunction show(display, buf) {\n  for (let p = 0, o = 0; p \u003c N; p++, o += 3) {\n    const r = buf[o], g = buf[o + 1], b = buf[o + 2];\n    display.setPixel(p & 63, p >> 6, r > 255 ? 255 : r \u003c 0 ? 0 : r, g > 255 ? 255 : g \u003c 0 ? 0 : g, b > 255 ? 255 : b \u003c 0 ? 0 : b);\n  }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Tree=0..2, Speed=0.2..3, Birds=1..4, Light=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Tree","min":0,"max":2,"about":"A silver birch at 0, white with black lenticels and a fissured black foot; a Scots pine at 1, grey plates low down and thin orange bark higher up; an oak at 2, deeply furrowed and grey with lichen. The wood behind is of the same tree."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the bird, the wind and the light go: at 2 all of it runs in real time, the bird takes 15 to 20 s up the trunk with its stops to drum and under 3 s back down; 0.2 is ten times slower."},{"name":"Birds","min":1,"max":4,"about":"One male at 1; at 2 his mate works a nearer trunk that comes in on the right; at 3 a red-capped young bird of the year climbs another at the left, and at 4 a second one climbs the right-hand edge of his trunk."},{"name":"Light","min":0,"max":1,"about":"Dawn at 0 with the sun low in the east and shafts through the mist, noon at 0.5, dusk at 1 with the sun low in the west."}],"start":[0,2,1,0.06],"measures":{"motion":0.092,"detail":0.0823,"edges":0.3471,"complexity":2.5826,"coverage":0.9376,"colour":0.1398,"drift":0.0454},"knobResponse":[0.1005,0.0437,0.0473,0.1346]},{"slug":"zen-garden","title":"Zen Garden","family":"line","round":18,"note":"곧장 내려다본 마른 돌 정원이에요. 갈퀴 자국이 이끼 두른 돌 둘레에서 고리로 휘고, 갈퀴가 15줄 띠씩 줄을 다시 그으며 떨어진 단풍잎을 거둬 가요. K1 을 돌리면 아침 해가 저녁 해로 옮겨 가며 돌 그림자와 고리의 밝은 쪽이 따라 돌아요.","idea":"A dry rock garden seen straight down, where raked grooves bend into rings round mossy stones and a rake redraws them band by band, taking up the maple leaves that fall while cloud shadows drift over.","buttons":"","code":"// ===== Patternflow pattern =====\n// Title:   Zen Garden\n// Family:  line\n// Idea:    A dry rock garden seen straight down, where raked grooves bend into rings round mossy stones and a rake redraws them band by band, taking up the maple leaves that fall while cloud shadows drift over.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the karesansui of Ryoan-ji, Kyoto\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Stones=3..5, Wind=0..1\n//\n// Knob 1: Light. Pale morning sun from the lower right at 0, white noon light at 0.5, low gold evening sun from the lower left at 1, and the stone shadows and the lit side of every ring swing with it.\n// Knob 2: Speed. How fast the rake walks and the clouds pass: at 2 the rake draws one 15-row band in about 6.5 seconds.\n// Knob 3: Stones. Three, four or five stone groups, each in its moss collar with two or three rings raked round it.\n// Knob 4: Wind. Calm at 0 with a leaf every ten seconds or so; at 1 the clouds cover half the garden and run three times as fast, and leaves come down every second and scuff the grooves.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Grooves are 3 rows apart and the rake has 5 tines, so it draws a 15-row band per pass.\nconst PER = 3;\nconst BAND = 15;\nconst BANDS = Math.ceil(H / BAND);\n// The rake walks 6 columns a garden second, turns in 0.8 s, and rests 3 s at the end of the garden.\nconst RAKE_V = 6;\nconst PASS = (W + 10) / RAKE_V + 0.8;\nconst CYCLE = BANDS * PASS + 3;\nconst TAU = Math.PI * 2;\n// Moss reaches 2.2 LED out from the stones, give or take its ragged edge.\nconst MOSS = 2.2;\n// Sunlight on a groove is SUN_A + SUN_B cos(phase), plus SUN_C sin(phase) as far as the\n// slope faces the sun; skylight is SKY_A + SKY_B cos(phase). A cloud takes CLOUD of the sun.\nconst SUN_A = 0.66;\nconst SUN_B = 0.28;\nconst SUN_C = 0.9;\nconst SKY_A = 0.2;\nconst SKY_B = 0.04;\nconst CLOUD = 0.8;\n// Each grain of gravel is GRAIN brighter or darker and ADD levels more or less, with its own\n// TINT of green and blue. WOB is how far a groove wanders as it wears: at the start knobs the\n// oldest grooves stray a tenth of a groove, in full wind a fifth.\nconst GRAIN = 0.16;\nconst ADD = 10;\nconst TINT = 30;\nconst WOB = 0.3;\n// One garden for each Stones setting. A group is a main stone (centre, half-axes, turn,\n// height in LED) with its rings, and smaller stones that share its moss bed.\nconst LAYOUTS = {\n  3: [\n    [20, 28, 7.5, 5.2, 0.35, 6, 3, [[29.5, 33, 3.0, 2.4, 3]]],\n    [44, 71, 6.2, 4.4, -0.5, 5, 3, [[35.5, 66.5, 2.6, 2.1, 2.5], [49, 64, 1.8, 1.5, 1.5]]],\n    [20, 107, 5.2, 4.0, 0.9, 4.5, 3, []],\n  ],\n  4: [\n    [18, 22, 7.0, 5.0, 0.3, 6, 3, [[27, 27, 2.8, 2.2, 3]]],\n    [46, 51, 5.4, 4.0, -0.6, 4.5, 2, []],\n    [19, 83, 5.2, 4.0, 0.7, 5, 3, [[11, 89, 2.4, 2.0, 2], [26, 88, 1.6, 1.4, 1.5]]],\n    [46, 111, 4.6, 3.4, -0.2, 4, 2, [[53.5, 107, 1.8, 1.5, 1.5]]],\n  ],\n  5: [\n    [19, 18, 6.5, 4.6, 0.3, 5.5, 3, [[27, 23, 2.6, 2.0, 2.5]]],\n    [47, 41, 4.4, 3.4, -0.4, 4, 2, []],\n    [20, 65, 5.6, 4.0, 0.8, 5, 3, [[12, 70, 2.2, 1.8, 2], [27, 70, 1.7, 1.4, 1.5]]],\n    [46, 89, 4.0, 3.2, 0.1, 4, 2, [[52.5, 94, 1.8, 1.5, 1.5]]],\n    [19, 113, 4.6, 3.6, -0.7, 4, 2, []],\n  ],\n};\n// Maple leaves, 5 by 5: lobes, and the stem off one corner.\nconst LEAF = [\"..#..\", \"#.#.#\", \"#####\", \".###.\", \"..#.#\"];\nconst LEAF_COL = [[205, 46, 24], [226, 104, 20], [176, 28, 32], [214, 150, 30]];\nconst COS = new Float32Array(1024);\nconst SIN = new Float32Array(1024);\nfor (let i = 0; i \u003c 1024; i++) {\n  COS[i] = Math.cos((TAU * i) / 1024);\n  SIN[i] = Math.sin((TAU * i) / 1024);\n}\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Colours go out in steps of 8 levels, so the gravel's grain is a few dozen colours, not thousands.\nconst QZ = (v) => (v \u003c= 0 ? 0 : v >= 252 ? 255 : ((v / 8 + 0.5) | 0) * 8);\nconst lerp = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [lerp(a[0], b[0], t), lerp(a[1], b[1], t), lerp(a[2], b[2], t)];\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y, s) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash(xi, yi, s);\n  const b = hash(xi + 1, yi, s);\n  const c = hash(xi, yi + 1, s);\n  const d = hash(xi + 1, yi + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\n// The sun for a Light setting: direction towards it across the garden, how long a\n// shadow is per unit of height, and the colours of sunlight and of the sky in shade.\nfunction sun(k) {\n  const az = Math.PI * (0.22 + 0.56 * k);\n  const elev = 0.32 + 0.75 * Math.sin(Math.PI * k) - 0.08 * k;\n  const warm = smooth(0.55, 1, k);\n  const cool = 1 - smooth(0, 0.4, k);\n  let col = mix3([252, 252, 246], [255, 178, 104], warm);\n  col = mix3(col, [255, 230, 186], cool);\n  let sky = mix3([92, 112, 160], [104, 84, 150], warm);\n  sky = mix3(sky, [70, 104, 196], cool);\n  // A high sun shows less of the grooves' relief, and the panel keeps noon off its top.\n  const high = Math.sin(Math.PI * k);\n  return { lx: Math.cos(az), ly: Math.sin(az), len: 1 / Math.tan(elev), col, sky, gain: 0.92 - 0.1 * high, relief: 1 - 0.3 * high };\n}\n\nfunction stone(x, y, rx, ry, a, h, seed) {\n  const ph = [0, 1, 2].map((i) => hash(seed, i, 7) * TAU);\n  return { x, y, rx, ry, ca: Math.cos(a), sa: Math.sin(a), h, ph, R: Math.max(rx, ry) * 1.25 };\n}\n\n// How far outside the stone a point is in LED, negative inside, measured along the\n// ray from its centre so rings keep their spacing on the long side; and r, 1 at the rim.\nfunction stoneDist(s, x, y) {\n  const dx = x - s.x;\n  const dy = y - s.y;\n  const u = (dx * s.ca + dy * s.sa) / s.rx;\n  const v = (-dx * s.sa + dy * s.ca) / s.ry;\n  const r = Math.hypot(u, v);\n  const th = Math.atan2(v, u);\n  const edge = 1 + 0.1 * Math.sin(2 * th + s.ph[0]) + 0.07 * Math.sin(3 * th + s.ph[1]) + 0.05 * Math.sin(5 * th + s.ph[2]);\n  return { d: Math.hypot(dx, dy) * (1 - edge / Math.max(r, 1e-3)), r: r / edge };\n}\n\nfunction build(P) {\n  const L = P.sun;\n  const groups = LAYOUTS[P.count].map((g, gi) => ({\n    x: g[0],\n    y: g[1],\n    rings: g[6],\n    stones: [stone(g[0], g[1], g[2], g[3], g[4], g[5], gi * 5)].concat(g[7].map((m, j) => stone(m[0], m[1], m[2], m[3], g[4] + j, m[4], gi * 5 + j + 1))),\n  }));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // The group whose outline is nearest, within the reach of its moss and rings.\n      let best = null;\n      let bestRho = 1e9;\n      let inStone = null;\n      let sr = 0;\n      for (const gr of groups) {\n        let rho = 1e9;\n        for (const s of gr.stones) {\n          // Far stones are skipped: nothing past their rings depends on them.\n          if (Math.hypot(x - s.x, y - s.y) > s.R + MOSS + 2 + gr.rings * PER) continue;\n          const q = stoneDist(s, x, y);\n          if (q.d \u003c rho) rho = q.d;\n          if (q.d \u003c 0 && !inStone) {\n            inStone = s;\n            sr = q.r;\n          }\n        }\n        if (rho \u003c MOSS + gr.rings * PER && rho \u003c bestRho) {\n          best = gr;\n          bestRho = rho;\n        }\n      }\n      // A stone shades what lies opposite the sun from it, as far as its height allows.\n      let shade = 1;\n      for (const gr of groups)\n        for (const s of gr.stones) {\n          if (inStone === s) continue;\n          for (const f of [0.3, 0.6, 1]) {\n            const sx = x + L.lx * s.h * L.len * f;\n            const sy = y + L.ly * s.h * L.len * f;\n            if (Math.abs(sx - s.x) > s.R || Math.abs(sy - s.y) > s.R) continue;\n            const q = stoneDist(s, sx, sy);\n            if (q.d \u003c 0 && 1 - q.r * q.r > f * f * 0.6) shade = 0.42;\n          }\n        }\n      P.shade[p] = shade;\n      P.kind[p] = 0;\n      let sunR = 0;\n      let skyR = 0;\n      let alb = [1, 1, 1];\n      if (inStone) {\n        // A rounded top lit from the sun's side, with facets, lichen and a dark rim.\n        const dx = (x - inStone.x) / inStone.rx;\n        const dy = (y - inStone.y) / inStone.ry;\n        const facet = noise(x / 2.2, y / 2.2, 9 + inStone.h * 3) - 0.5;\n        const lum = clamp(0.6 + 0.85 * (dx * L.lx + dy * L.ly) * Math.min(1, sr * 1.2) + 0.4 * facet, 0.1, 1.25) * (sr > 0.84 ? 0.6 : 1);\n        sunR = lum * 0.6;\n        skyR = lum * 0.22;\n        alb = hash(x, y, 11) \u003c 0.08 ? [0.64, 0.74, 0.5] : [0.78, 0.74, 0.68];\n        P.kind[p] = 2;\n      } else if (best && bestRho \u003c MOSS + 0.9 * (noise(x / 2, y / 2, 13) - 0.3)) {\n        const lum = 0.75 + 0.7 * (noise(x / 1.6, y / 1.6, 17) - 0.5) + 0.3 * (hash(x, y, 18) - 0.5);\n        sunR = lum * 0.46;\n        skyR = lum * 0.3;\n        alb = [0.36, 0.8, 0.22];\n        P.kind[p] = 1;\n      } else if (best) {\n        // Rings: the phase grows away from the stone and the slope faces outward.\n        P.phase[p] = (bestRho - MOSS) / PER;\n        const dx = x - best.x;\n        const dy = y - best.y;\n        const r = Math.hypot(dx, dy) || 1;\n        P.face[p] = ((dx * L.lx + dy * L.ly) / r) * L.relief;\n      } else {\n        P.phase[p] = y / PER;\n        P.face[p] = L.ly * L.relief;\n      }\n      for (let c = 0; c \u003c 3; c++) {\n        P.still[p * 6 + c] = alb[c] * L.col[c] * sunR;\n        P.still[p * 6 + 3 + c] = alb[c] * L.sky[c] * skyR;\n      }\n    }\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const k of [\"phase\", \"face\", \"shade\", \"grain\", \"wob\", \"pass\"]) P[k] = new Float32Array(N);\n  P.kind = new Uint8Array(N);\n  P.still = new Float32Array(N * 6);\n  P.tint = new Float32Array(N * 2);\n  P.cloud = new Float32Array(17 * 33);\n  P.buf = new Float32Array(N * 3);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      P.grain[p] = hash(x, y, 1) + hash(x, y, 2) - 1;\n      // Each stone of the gravel has its own tint: greener, bluer or plain.\n      P.tint[p * 2] = TINT * (hash(x, y, 5) - 0.5);\n      P.tint[p * 2 + 1] = TINT * (hash(x, y, 6) - 0.5);\n      P.wob[p] = noise(x / 9, y / 7, 4) - 0.5;\n      // The garden time at which the rake passes this LED in each round.\n      const b = Math.floor(y / BAND);\n      P.pass[p] = b * PASS + (b % 2 ? W + 5 - x : x + 5) / RAKE_V;\n    }\n  Object.assign(P, { t: 0, cx: 0, cy: 0, count: 0, light: -1, wind: 0.06, speed: 2, leaves: [], started: false, sun: sun(0) });\n}\n\nfunction ageAt(P, p) {\n  const a = (P.t - P.pass[p]) % CYCLE;\n  return a \u003c 0 ? a + CYCLE : a;\n}\n\nfunction step(P, dt) {\n  const g = dt * P.speed;\n  P.t += g;\n  // Clouds run west to east and a little south, faster in wind.\n  const v = 1.6 + 3.2 * P.wind;\n  P.cx += g * v;\n  P.cy += g * v * 0.25;\n  // A leaf lands on gravel and stays until the rake reaches it.\n  if (Math.random() \u003c g * (0.05 + 0.5 * P.wind)) {\n    for (let tries = 0; tries \u003c 8; tries++) {\n      const x = 3 + Math.floor(Math.random() * (W - 6));\n      const y = 3 + Math.floor(Math.random() * (H - 6));\n      if (P.kind[y * W + x] === 0) {\n        P.leaves.push({ x, y, z: 1, rot: Math.floor(Math.random() * 4), col: Math.floor(Math.random() * 4), land: 0, drift: (Math.random() - 0.3) * 14 });\n        break;\n      }\n    }\n  }\n  for (const l of P.leaves) {\n    if (l.z \u003c= 0) continue;\n    l.z = Math.max(0, l.z - g / 3.2);\n    if (l.z === 0) l.land = P.t;\n    else if (Math.random() \u003c g * 3) l.rot = (l.rot + 1) % 4;\n  }\n  P.leaves = P.leaves.filter((l) => l.z > 0 || ageAt(P, l.y * W + l.x) >= P.t - l.land);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.wind = clamp(k[3], 0, 1);\n  const count = Math.round(clamp(k[2], 3, 5));\n  const light = clamp(k[0], 0, 1);\n  if (count !== P.count || Math.abs(light - P.light) > 0.004) {\n    P.count = count;\n    P.light = light;\n    P.sun = sun(light);\n    build(P);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The garden opens 20 seconds into a raking at the knob's speed: the rake is part way\n    // down, the bands above it fresh and those below worn, with leaves already lying there.\n    P.t = 12;\n    for (let i = 0; i \u003c 400; i++) step(P, 0.05);\n  }\n  step(P, dt);\n}\n\nfunction drawGarden(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const cloud = P.cloud;\n  // Cloud shadow on a coarse 4-LED lattice, smoothed between.\n  const cover = 0.6 - 0.14 * P.wind;\n  for (let j = 0; j \u003c 33; j++)\n    for (let i = 0; i \u003c 17; i++) {\n      const x = i * 4 + P.cx;\n      const y = j * 4 + P.cy;\n      const n = 0.68 * noise(x / 30, y / 34, 21) + 0.32 * noise(x / 12, y / 12, 22);\n      cloud[j * 17 + i] = smooth(cover - 0.07, cover + 0.09, n);\n    }\n  const wear = (0.55 + 0.9 * P.wind) / CYCLE;\n  const [sr, sg, sb] = L.col;\n  const [kr, kg, kb] = L.sky;\n  const { kind, still, shade, phase, wob, grain, face, pass, tint } = P;\n  const row = new Float32Array(17);\n  const t = P.t;\n  for (let y = 0; y \u003c H; y++) {\n    const cj = (y >> 2) * 17;\n    const fy = (y & 3) / 4;\n    for (let i = 0; i \u003c 17; i++) row[i] = cloud[cj + i] + (cloud[cj + i + 17] - cloud[cj + i]) * fy;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const c0 = row[x >> 2];\n      const direct = (1 - CLOUD * (c0 + (row[(x >> 2) + 1] - c0) * (x & 3) * 0.25)) * shade[p] * L.gain;\n      const q = p * 3;\n      if (kind[p]) {\n        const o = p * 6;\n        buf[q] = still[o] * direct + still[o + 3];\n        buf[q + 1] = still[o + 1] * direct + still[o + 4];\n        buf[q + 2] = still[o + 2] * direct + still[o + 5];\n        continue;\n      }\n      // Gravel: a groove lit from the sun's side, worn soft since the rake passed.\n      let age = t - pass[p];\n      age -= CYCLE * Math.floor(age / CYCLE);\n      const w = age * wear;\n      const i = ((phase[p] + wob[p] * w * WOB) * 1024) & 1023;\n      const g = grain[p];\n      const gr = 1 + GRAIN * g;\n      const fresh = age \u003c 4 ? 0.05 * (4 - age) : 0;\n      const sunT = (SUN_A + (SUN_B - 0.06 * w) * COS[i] + SUN_C * face[p] * (1 - 0.25 * w) * SIN[i] + fresh) * gr * direct;\n      const skyT = (SKY_A + SKY_B * COS[i]) * gr;\n      const add = ADD * g;\n      buf[q] = sr * sunT + kr * skyT + add;\n      buf[q + 1] = sg * sunT + kg * skyT + add + tint[p * 2];\n      buf[q + 2] = sb * sunT + kb * skyT + add + tint[p * 2 + 1];\n    }\n  }\n}\n\nfunction drawLeaves(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const turn = (l, i, j) => [[i, j], [4 - j, i], [4 - i, 4 - j], [j, 4 - i]][l.rot];\n  for (const l of P.leaves) {\n    const lx = l.x + Math.round(l.drift * l.z);\n    // A falling leaf's shadow lies apart from it, closing in as it lands.\n    const sx = Math.round(-L.lx * l.z * 9);\n    const sy = Math.round(-L.ly * l.z * 9);\n    for (const pass of l.z > 0 ? [0, 1] : [1])\n      for (let j = 0; j \u003c 5; j++)\n        for (let i = 0; i \u003c 5; i++) {\n          const [a, b] = turn(l, i, j);\n          if (LEAF[b][a] !== \"#\") continue;\n          const qx = lx + i - 2 + (pass ? 0 : sx);\n          const qy = l.y + j - 2 + (pass ? 0 : sy);\n          if (qx \u003c 0 || qx >= W || qy \u003c 0 || qy >= H) continue;\n          const q = (qy * W + qx) * 3;\n          if (!pass) {\n            for (let c = 0; c \u003c 3; c++) buf[q + c] *= 0.55;\n            continue;\n          }\n          const sh = 0.7 + 0.3 * P.shade[qy * W + qx] + 0.15 * l.z;\n          for (let c = 0; c \u003c 3; c++) buf[q + c] = LEAF_COL[l.col][c] * sh * (0.85 + (0.15 * L.col[c]) / 255);\n        }\n  }\n}\n\n// The rake: a wooden head across its band with five tines, and the bamboo handle reaching ahead.\nfunction drawRake(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const cyc = ((P.t % CYCLE) + CYCLE) % CYCLE;\n  const b = Math.floor(cyc / PASS);\n  if (b >= BANDS) return;\n  const u = (cyc - b * PASS) * RAKE_V;\n  if (u >= W + 10) return;\n  const dir = b % 2 ? -1 : 1;\n  const hx = Math.round(dir > 0 ? u - 5 : W + 4 - u);\n  const top = b * BAND;\n  const mid = top + 7;\n  for (let i = 1; i \u003c= 22; i++) {\n    const x = hx + dir * i;\n    const sx = x - Math.round(L.lx * 2);\n    const sy = mid - Math.round(L.ly * 2);\n    if (sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H) for (let c = 0; c \u003c 3; c++) buf[(sy * W + sx) * 3 + c] *= 0.6;\n    if (x \u003c 0 || x >= W) continue;\n    const q = (mid * W + x) * 3;\n    const grip = i > 17 ? 0.7 : 1;\n    buf[q] = 186 * grip;\n    buf[q + 1] = 156 * grip;\n    buf[q + 2] = 92 * grip;\n  }\n  for (let y = top; y \u003c Math.min(H, top + BAND); y++)\n    for (let i = 0; i \u003c 2; i++) {\n      const x = hx - dir * i;\n      if (x \u003c 0 || x >= W) continue;\n      const q = (y * W + x) * 3;\n      const tine = i === 1 && y % PER === 1;\n      buf[q] = tine ? 60 : 128;\n      buf[q + 1] = tine ? 40 : 84;\n      buf[q + 2] = tine ? 24 : 46;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  drawGarden(P);\n  drawLeaves(P);\n  drawRake(P);\n  const buf = P.buf;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, QZ(buf[q]), QZ(buf[q + 1]), QZ(buf[q + 2]));\n    }\n}\n","layer":{"id":"layer-zen-garden","type":"code","name":"zen-garden","visible":true,"opacity":1,"blend":"normal","role":"paint","maskInvert":false,"code":"// ===== Patternflow pattern =====\n// Title:   Zen Garden\n// Family:  line\n// Idea:    A dry rock garden seen straight down, where raked grooves bend into rings round mossy stones and a rake redraws them band by band, taking up the maple leaves that fall while cloud shadows drift over.\n// Author:  patternflow-lab\n// Date:    2026-10-23\n// SPDX-License-Identifier: CC-BY-SA-4.0\n// Lineage: original, pattern round 18, after the karesansui of Ryoan-ji, Kyoto\n// Round:   18\n// ===============================\n// @matrix 64x128\n// @knobs Light=0..1, Speed=0.2..3, Stones=3..5, Wind=0..1\n//\n// Knob 1: Light. Pale morning sun from the lower right at 0, white noon light at 0.5, low gold evening sun from the lower left at 1, and the stone shadows and the lit side of every ring swing with it.\n// Knob 2: Speed. How fast the rake walks and the clouds pass: at 2 the rake draws one 15-row band in about 6.5 seconds.\n// Knob 3: Stones. Three, four or five stone groups, each in its moss collar with two or three rings raked round it.\n// Knob 4: Wind. Calm at 0 with a leaf every ten seconds or so; at 1 the clouds cover half the garden and run three times as fast, and leaves come down every second and scuff the grooves.\n\nconst W = 64;\nconst H = 128;\nconst N = W * H;\n// Grooves are 3 rows apart and the rake has 5 tines, so it draws a 15-row band per pass.\nconst PER = 3;\nconst BAND = 15;\nconst BANDS = Math.ceil(H / BAND);\n// The rake walks 6 columns a garden second, turns in 0.8 s, and rests 3 s at the end of the garden.\nconst RAKE_V = 6;\nconst PASS = (W + 10) / RAKE_V + 0.8;\nconst CYCLE = BANDS * PASS + 3;\nconst TAU = Math.PI * 2;\n// Moss reaches 2.2 LED out from the stones, give or take its ragged edge.\nconst MOSS = 2.2;\n// Sunlight on a groove is SUN_A + SUN_B cos(phase), plus SUN_C sin(phase) as far as the\n// slope faces the sun; skylight is SKY_A + SKY_B cos(phase). A cloud takes CLOUD of the sun.\nconst SUN_A = 0.66;\nconst SUN_B = 0.28;\nconst SUN_C = 0.9;\nconst SKY_A = 0.2;\nconst SKY_B = 0.04;\nconst CLOUD = 0.8;\n// Each grain of gravel is GRAIN brighter or darker and ADD levels more or less, with its own\n// TINT of green and blue. WOB is how far a groove wanders as it wears: at the start knobs the\n// oldest grooves stray a tenth of a groove, in full wind a fifth.\nconst GRAIN = 0.16;\nconst ADD = 10;\nconst TINT = 30;\nconst WOB = 0.3;\n// One garden for each Stones setting. A group is a main stone (centre, half-axes, turn,\n// height in LED) with its rings, and smaller stones that share its moss bed.\nconst LAYOUTS = {\n  3: [\n    [20, 28, 7.5, 5.2, 0.35, 6, 3, [[29.5, 33, 3.0, 2.4, 3]]],\n    [44, 71, 6.2, 4.4, -0.5, 5, 3, [[35.5, 66.5, 2.6, 2.1, 2.5], [49, 64, 1.8, 1.5, 1.5]]],\n    [20, 107, 5.2, 4.0, 0.9, 4.5, 3, []],\n  ],\n  4: [\n    [18, 22, 7.0, 5.0, 0.3, 6, 3, [[27, 27, 2.8, 2.2, 3]]],\n    [46, 51, 5.4, 4.0, -0.6, 4.5, 2, []],\n    [19, 83, 5.2, 4.0, 0.7, 5, 3, [[11, 89, 2.4, 2.0, 2], [26, 88, 1.6, 1.4, 1.5]]],\n    [46, 111, 4.6, 3.4, -0.2, 4, 2, [[53.5, 107, 1.8, 1.5, 1.5]]],\n  ],\n  5: [\n    [19, 18, 6.5, 4.6, 0.3, 5.5, 3, [[27, 23, 2.6, 2.0, 2.5]]],\n    [47, 41, 4.4, 3.4, -0.4, 4, 2, []],\n    [20, 65, 5.6, 4.0, 0.8, 5, 3, [[12, 70, 2.2, 1.8, 2], [27, 70, 1.7, 1.4, 1.5]]],\n    [46, 89, 4.0, 3.2, 0.1, 4, 2, [[52.5, 94, 1.8, 1.5, 1.5]]],\n    [19, 113, 4.6, 3.6, -0.7, 4, 2, []],\n  ],\n};\n// Maple leaves, 5 by 5: lobes, and the stem off one corner.\nconst LEAF = [\"..#..\", \"#.#.#\", \"#####\", \".###.\", \"..#.#\"];\nconst LEAF_COL = [[205, 46, 24], [226, 104, 20], [176, 28, 32], [214, 150, 30]];\nconst COS = new Float32Array(1024);\nconst SIN = new Float32Array(1024);\nfor (let i = 0; i \u003c 1024; i++) {\n  COS[i] = Math.cos((TAU * i) / 1024);\n  SIN[i] = Math.sin((TAU * i) / 1024);\n}\n\nconst clamp = (v, a, b) => (v \u003c a ? a : v > b ? b : v);\nconst smooth = (a, b, v) => {\n  const t = clamp((v - a) / (b - a), 0, 1);\n  return t * t * (3 - 2 * t);\n};\n// Colours go out in steps of 8 levels, so the gravel's grain is a few dozen colours, not thousands.\nconst QZ = (v) => (v \u003c= 0 ? 0 : v >= 252 ? 255 : ((v / 8 + 0.5) | 0) * 8);\nconst lerp = (a, b, t) => a + (b - a) * t;\nconst mix3 = (a, b, t) => [lerp(a[0], b[0], t), lerp(a[1], b[1], t), lerp(a[2], b[2], t)];\n\nfunction hash(x, y, s) {\n  let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(s | 0, 1274126177);\n  h = Math.imul(h ^ (h >>> 13), 1103515245);\n  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n}\n\nfunction noise(x, y, s) {\n  const xi = Math.floor(x);\n  const yi = Math.floor(y);\n  const fx = x - xi;\n  const fy = y - yi;\n  const u = fx * fx * (3 - 2 * fx);\n  const v = fy * fy * (3 - 2 * fy);\n  const a = hash(xi, yi, s);\n  const b = hash(xi + 1, yi, s);\n  const c = hash(xi, yi + 1, s);\n  const d = hash(xi + 1, yi + 1, s);\n  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\n\n// The sun for a Light setting: direction towards it across the garden, how long a\n// shadow is per unit of height, and the colours of sunlight and of the sky in shade.\nfunction sun(k) {\n  const az = Math.PI * (0.22 + 0.56 * k);\n  const elev = 0.32 + 0.75 * Math.sin(Math.PI * k) - 0.08 * k;\n  const warm = smooth(0.55, 1, k);\n  const cool = 1 - smooth(0, 0.4, k);\n  let col = mix3([252, 252, 246], [255, 178, 104], warm);\n  col = mix3(col, [255, 230, 186], cool);\n  let sky = mix3([92, 112, 160], [104, 84, 150], warm);\n  sky = mix3(sky, [70, 104, 196], cool);\n  // A high sun shows less of the grooves' relief, and the panel keeps noon off its top.\n  const high = Math.sin(Math.PI * k);\n  return { lx: Math.cos(az), ly: Math.sin(az), len: 1 / Math.tan(elev), col, sky, gain: 0.92 - 0.1 * high, relief: 1 - 0.3 * high };\n}\n\nfunction stone(x, y, rx, ry, a, h, seed) {\n  const ph = [0, 1, 2].map((i) => hash(seed, i, 7) * TAU);\n  return { x, y, rx, ry, ca: Math.cos(a), sa: Math.sin(a), h, ph, R: Math.max(rx, ry) * 1.25 };\n}\n\n// How far outside the stone a point is in LED, negative inside, measured along the\n// ray from its centre so rings keep their spacing on the long side; and r, 1 at the rim.\nfunction stoneDist(s, x, y) {\n  const dx = x - s.x;\n  const dy = y - s.y;\n  const u = (dx * s.ca + dy * s.sa) / s.rx;\n  const v = (-dx * s.sa + dy * s.ca) / s.ry;\n  const r = Math.hypot(u, v);\n  const th = Math.atan2(v, u);\n  const edge = 1 + 0.1 * Math.sin(2 * th + s.ph[0]) + 0.07 * Math.sin(3 * th + s.ph[1]) + 0.05 * Math.sin(5 * th + s.ph[2]);\n  return { d: Math.hypot(dx, dy) * (1 - edge / Math.max(r, 1e-3)), r: r / edge };\n}\n\nfunction build(P) {\n  const L = P.sun;\n  const groups = LAYOUTS[P.count].map((g, gi) => ({\n    x: g[0],\n    y: g[1],\n    rings: g[6],\n    stones: [stone(g[0], g[1], g[2], g[3], g[4], g[5], gi * 5)].concat(g[7].map((m, j) => stone(m[0], m[1], m[2], m[3], g[4] + j, m[4], gi * 5 + j + 1))),\n  }));\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      // The group whose outline is nearest, within the reach of its moss and rings.\n      let best = null;\n      let bestRho = 1e9;\n      let inStone = null;\n      let sr = 0;\n      for (const gr of groups) {\n        let rho = 1e9;\n        for (const s of gr.stones) {\n          // Far stones are skipped: nothing past their rings depends on them.\n          if (Math.hypot(x - s.x, y - s.y) > s.R + MOSS + 2 + gr.rings * PER) continue;\n          const q = stoneDist(s, x, y);\n          if (q.d \u003c rho) rho = q.d;\n          if (q.d \u003c 0 && !inStone) {\n            inStone = s;\n            sr = q.r;\n          }\n        }\n        if (rho \u003c MOSS + gr.rings * PER && rho \u003c bestRho) {\n          best = gr;\n          bestRho = rho;\n        }\n      }\n      // A stone shades what lies opposite the sun from it, as far as its height allows.\n      let shade = 1;\n      for (const gr of groups)\n        for (const s of gr.stones) {\n          if (inStone === s) continue;\n          for (const f of [0.3, 0.6, 1]) {\n            const sx = x + L.lx * s.h * L.len * f;\n            const sy = y + L.ly * s.h * L.len * f;\n            if (Math.abs(sx - s.x) > s.R || Math.abs(sy - s.y) > s.R) continue;\n            const q = stoneDist(s, sx, sy);\n            if (q.d \u003c 0 && 1 - q.r * q.r > f * f * 0.6) shade = 0.42;\n          }\n        }\n      P.shade[p] = shade;\n      P.kind[p] = 0;\n      let sunR = 0;\n      let skyR = 0;\n      let alb = [1, 1, 1];\n      if (inStone) {\n        // A rounded top lit from the sun's side, with facets, lichen and a dark rim.\n        const dx = (x - inStone.x) / inStone.rx;\n        const dy = (y - inStone.y) / inStone.ry;\n        const facet = noise(x / 2.2, y / 2.2, 9 + inStone.h * 3) - 0.5;\n        const lum = clamp(0.6 + 0.85 * (dx * L.lx + dy * L.ly) * Math.min(1, sr * 1.2) + 0.4 * facet, 0.1, 1.25) * (sr > 0.84 ? 0.6 : 1);\n        sunR = lum * 0.6;\n        skyR = lum * 0.22;\n        alb = hash(x, y, 11) \u003c 0.08 ? [0.64, 0.74, 0.5] : [0.78, 0.74, 0.68];\n        P.kind[p] = 2;\n      } else if (best && bestRho \u003c MOSS + 0.9 * (noise(x / 2, y / 2, 13) - 0.3)) {\n        const lum = 0.75 + 0.7 * (noise(x / 1.6, y / 1.6, 17) - 0.5) + 0.3 * (hash(x, y, 18) - 0.5);\n        sunR = lum * 0.46;\n        skyR = lum * 0.3;\n        alb = [0.36, 0.8, 0.22];\n        P.kind[p] = 1;\n      } else if (best) {\n        // Rings: the phase grows away from the stone and the slope faces outward.\n        P.phase[p] = (bestRho - MOSS) / PER;\n        const dx = x - best.x;\n        const dy = y - best.y;\n        const r = Math.hypot(dx, dy) || 1;\n        P.face[p] = ((dx * L.lx + dy * L.ly) / r) * L.relief;\n      } else {\n        P.phase[p] = y / PER;\n        P.face[p] = L.ly * L.relief;\n      }\n      for (let c = 0; c \u003c 3; c++) {\n        P.still[p * 6 + c] = alb[c] * L.col[c] * sunR;\n        P.still[p * 6 + 3 + c] = alb[c] * L.sky[c] * skyR;\n      }\n    }\n}\n\nexport function setup(params) {\n  const P = params;\n  for (const k of [\"phase\", \"face\", \"shade\", \"grain\", \"wob\", \"pass\"]) P[k] = new Float32Array(N);\n  P.kind = new Uint8Array(N);\n  P.still = new Float32Array(N * 6);\n  P.tint = new Float32Array(N * 2);\n  P.cloud = new Float32Array(17 * 33);\n  P.buf = new Float32Array(N * 3);\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      P.grain[p] = hash(x, y, 1) + hash(x, y, 2) - 1;\n      // Each stone of the gravel has its own tint: greener, bluer or plain.\n      P.tint[p * 2] = TINT * (hash(x, y, 5) - 0.5);\n      P.tint[p * 2 + 1] = TINT * (hash(x, y, 6) - 0.5);\n      P.wob[p] = noise(x / 9, y / 7, 4) - 0.5;\n      // The garden time at which the rake passes this LED in each round.\n      const b = Math.floor(y / BAND);\n      P.pass[p] = b * PASS + (b % 2 ? W + 5 - x : x + 5) / RAKE_V;\n    }\n  Object.assign(P, { t: 0, cx: 0, cy: 0, count: 0, light: -1, wind: 0.06, speed: 2, leaves: [], started: false, sun: sun(0) });\n}\n\nfunction ageAt(P, p) {\n  const a = (P.t - P.pass[p]) % CYCLE;\n  return a \u003c 0 ? a + CYCLE : a;\n}\n\nfunction step(P, dt) {\n  const g = dt * P.speed;\n  P.t += g;\n  // Clouds run west to east and a little south, faster in wind.\n  const v = 1.6 + 3.2 * P.wind;\n  P.cx += g * v;\n  P.cy += g * v * 0.25;\n  // A leaf lands on gravel and stays until the rake reaches it.\n  if (Math.random() \u003c g * (0.05 + 0.5 * P.wind)) {\n    for (let tries = 0; tries \u003c 8; tries++) {\n      const x = 3 + Math.floor(Math.random() * (W - 6));\n      const y = 3 + Math.floor(Math.random() * (H - 6));\n      if (P.kind[y * W + x] === 0) {\n        P.leaves.push({ x, y, z: 1, rot: Math.floor(Math.random() * 4), col: Math.floor(Math.random() * 4), land: 0, drift: (Math.random() - 0.3) * 14 });\n        break;\n      }\n    }\n  }\n  for (const l of P.leaves) {\n    if (l.z \u003c= 0) continue;\n    l.z = Math.max(0, l.z - g / 3.2);\n    if (l.z === 0) l.land = P.t;\n    else if (Math.random() \u003c g * 3) l.rot = (l.rot + 1) % 4;\n  }\n  P.leaves = P.leaves.filter((l) => l.z > 0 || ageAt(P, l.y * W + l.x) >= P.t - l.land);\n}\n\nexport function update(dt, input, params) {\n  const P = params;\n  const k = input.knobValues || [0, 2, 3, 0.06];\n  dt = clamp(dt, 0, 0.1);\n  P.speed = clamp(k[1], 0.2, 3);\n  P.wind = clamp(k[3], 0, 1);\n  const count = Math.round(clamp(k[2], 3, 5));\n  const light = clamp(k[0], 0, 1);\n  if (count !== P.count || Math.abs(light - P.light) > 0.004) {\n    P.count = count;\n    P.light = light;\n    P.sun = sun(light);\n    build(P);\n  }\n  if (!P.started) {\n    P.started = true;\n    // The garden opens 20 seconds into a raking at the knob's speed: the rake is part way\n    // down, the bands above it fresh and those below worn, with leaves already lying there.\n    P.t = 12;\n    for (let i = 0; i \u003c 400; i++) step(P, 0.05);\n  }\n  step(P, dt);\n}\n\nfunction drawGarden(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const cloud = P.cloud;\n  // Cloud shadow on a coarse 4-LED lattice, smoothed between.\n  const cover = 0.6 - 0.14 * P.wind;\n  for (let j = 0; j \u003c 33; j++)\n    for (let i = 0; i \u003c 17; i++) {\n      const x = i * 4 + P.cx;\n      const y = j * 4 + P.cy;\n      const n = 0.68 * noise(x / 30, y / 34, 21) + 0.32 * noise(x / 12, y / 12, 22);\n      cloud[j * 17 + i] = smooth(cover - 0.07, cover + 0.09, n);\n    }\n  const wear = (0.55 + 0.9 * P.wind) / CYCLE;\n  const [sr, sg, sb] = L.col;\n  const [kr, kg, kb] = L.sky;\n  const { kind, still, shade, phase, wob, grain, face, pass, tint } = P;\n  const row = new Float32Array(17);\n  const t = P.t;\n  for (let y = 0; y \u003c H; y++) {\n    const cj = (y >> 2) * 17;\n    const fy = (y & 3) / 4;\n    for (let i = 0; i \u003c 17; i++) row[i] = cloud[cj + i] + (cloud[cj + i + 17] - cloud[cj + i]) * fy;\n    for (let x = 0; x \u003c W; x++) {\n      const p = y * W + x;\n      const c0 = row[x >> 2];\n      const direct = (1 - CLOUD * (c0 + (row[(x >> 2) + 1] - c0) * (x & 3) * 0.25)) * shade[p] * L.gain;\n      const q = p * 3;\n      if (kind[p]) {\n        const o = p * 6;\n        buf[q] = still[o] * direct + still[o + 3];\n        buf[q + 1] = still[o + 1] * direct + still[o + 4];\n        buf[q + 2] = still[o + 2] * direct + still[o + 5];\n        continue;\n      }\n      // Gravel: a groove lit from the sun's side, worn soft since the rake passed.\n      let age = t - pass[p];\n      age -= CYCLE * Math.floor(age / CYCLE);\n      const w = age * wear;\n      const i = ((phase[p] + wob[p] * w * WOB) * 1024) & 1023;\n      const g = grain[p];\n      const gr = 1 + GRAIN * g;\n      const fresh = age \u003c 4 ? 0.05 * (4 - age) : 0;\n      const sunT = (SUN_A + (SUN_B - 0.06 * w) * COS[i] + SUN_C * face[p] * (1 - 0.25 * w) * SIN[i] + fresh) * gr * direct;\n      const skyT = (SKY_A + SKY_B * COS[i]) * gr;\n      const add = ADD * g;\n      buf[q] = sr * sunT + kr * skyT + add;\n      buf[q + 1] = sg * sunT + kg * skyT + add + tint[p * 2];\n      buf[q + 2] = sb * sunT + kb * skyT + add + tint[p * 2 + 1];\n    }\n  }\n}\n\nfunction drawLeaves(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const turn = (l, i, j) => [[i, j], [4 - j, i], [4 - i, 4 - j], [j, 4 - i]][l.rot];\n  for (const l of P.leaves) {\n    const lx = l.x + Math.round(l.drift * l.z);\n    // A falling leaf's shadow lies apart from it, closing in as it lands.\n    const sx = Math.round(-L.lx * l.z * 9);\n    const sy = Math.round(-L.ly * l.z * 9);\n    for (const pass of l.z > 0 ? [0, 1] : [1])\n      for (let j = 0; j \u003c 5; j++)\n        for (let i = 0; i \u003c 5; i++) {\n          const [a, b] = turn(l, i, j);\n          if (LEAF[b][a] !== \"#\") continue;\n          const qx = lx + i - 2 + (pass ? 0 : sx);\n          const qy = l.y + j - 2 + (pass ? 0 : sy);\n          if (qx \u003c 0 || qx >= W || qy \u003c 0 || qy >= H) continue;\n          const q = (qy * W + qx) * 3;\n          if (!pass) {\n            for (let c = 0; c \u003c 3; c++) buf[q + c] *= 0.55;\n            continue;\n          }\n          const sh = 0.7 + 0.3 * P.shade[qy * W + qx] + 0.15 * l.z;\n          for (let c = 0; c \u003c 3; c++) buf[q + c] = LEAF_COL[l.col][c] * sh * (0.85 + (0.15 * L.col[c]) / 255);\n        }\n  }\n}\n\n// The rake: a wooden head across its band with five tines, and the bamboo handle reaching ahead.\nfunction drawRake(P) {\n  const L = P.sun;\n  const buf = P.buf;\n  const cyc = ((P.t % CYCLE) + CYCLE) % CYCLE;\n  const b = Math.floor(cyc / PASS);\n  if (b >= BANDS) return;\n  const u = (cyc - b * PASS) * RAKE_V;\n  if (u >= W + 10) return;\n  const dir = b % 2 ? -1 : 1;\n  const hx = Math.round(dir > 0 ? u - 5 : W + 4 - u);\n  const top = b * BAND;\n  const mid = top + 7;\n  for (let i = 1; i \u003c= 22; i++) {\n    const x = hx + dir * i;\n    const sx = x - Math.round(L.lx * 2);\n    const sy = mid - Math.round(L.ly * 2);\n    if (sx >= 0 && sx \u003c W && sy >= 0 && sy \u003c H) for (let c = 0; c \u003c 3; c++) buf[(sy * W + sx) * 3 + c] *= 0.6;\n    if (x \u003c 0 || x >= W) continue;\n    const q = (mid * W + x) * 3;\n    const grip = i > 17 ? 0.7 : 1;\n    buf[q] = 186 * grip;\n    buf[q + 1] = 156 * grip;\n    buf[q + 2] = 92 * grip;\n  }\n  for (let y = top; y \u003c Math.min(H, top + BAND); y++)\n    for (let i = 0; i \u003c 2; i++) {\n      const x = hx - dir * i;\n      if (x \u003c 0 || x >= W) continue;\n      const q = (y * W + x) * 3;\n      const tine = i === 1 && y % PER === 1;\n      buf[q] = tine ? 60 : 128;\n      buf[q + 1] = tine ? 40 : 84;\n      buf[q + 2] = tine ? 24 : 46;\n    }\n}\n\nexport function draw(display, params) {\n  const P = params;\n  if (!P.started) return;\n  drawGarden(P);\n  drawLeaves(P);\n  drawRake(P);\n  const buf = P.buf;\n  for (let y = 0; y \u003c H; y++)\n    for (let x = 0; x \u003c W; x++) {\n      const q = (y * W + x) * 3;\n      display.setPixel(x, y, QZ(buf[q]), QZ(buf[q + 1]), QZ(buf[q + 2]));\n    }\n}\n","ramp":{"stops":[{"position":0,"color":"#000000","alpha":1},{"position":1,"color":"#ffffff","alpha":1}],"mode":"linear","wrap":false},"recolor":false,"knobsAnnotationRaw":"// @knobs Light=0..1, Speed=0.2..3, Stones=3..5, Wind=0..1","matrixAnnotationRaw":"// @matrix 64x128"},"matrix":{"width":64,"height":128},"knobs":[{"name":"Light","min":0,"max":1,"about":"Pale morning sun from the lower right at 0, white noon light at 0.5, low gold evening sun from the lower left at 1, and the stone shadows and the lit side of every ring swing with it."},{"name":"Speed","min":0.2,"max":3,"about":"How fast the rake walks and the clouds pass: at 2 the rake draws one 15-row band in about 6.5 seconds."},{"name":"Stones","min":3,"max":5,"about":"Three, four or five stone groups, each in its moss collar with two or three rings raked round it."},{"name":"Wind","min":0,"max":1,"about":"Calm at 0 with a leaf every ten seconds or so; at 1 the clouds cover half the garden and run three times as fast, and leaves come down every second and scuff the grooves."}],"start":[0,2,3,0.06],"measures":{"motion":0.0392,"detail":0.2481,"edges":0.4637,"complexity":1.6255,"coverage":0.96,"colour":0.1203,"drift":0.0759},"knobResponse":[0.1756,0.245,0.2327,0.2481]}],"families":{"algo":{"label":"알고리즘","color":"#e0c060"},"automata":{"label":"셀룰러 오토마타","color":"#9be15d"},"bird":{"label":"새","color":"#778800"},"body":{"label":"몸","color":"#bb5566"},"celestial":{"label":"천체","color":"#ffffaa"},"cells":{"label":"보로노이·셀","color":"#5fd0d0"},"chemistry":{"label":"화학·실험","color":"#00bb00"},"circuit":{"label":"전자 회로","color":"#2e7d32"},"city":{"label":"도시","color":"#22ff00"},"construction":{"label":"공사·건설","color":"#ffee00"},"data":{"label":"데이터 그림","color":"#7fe08a"},"fair":{"label":"놀이공원","color":"#ffffff"},"flight":{"label":"비행","color":"#9944ee"},"fractal":{"label":"프랙탈","color":"#a3a0ff"},"fungi":{"label":"버섯·균사","color":"#00ff88"},"geometry":{"label":"기하·대칭","color":"#c77dff"},"glass":{"label":"유리","color":"#b0002a"},"glitch":{"label":"글리치","color":"#b0b8c8"},"growth":{"label":"자라남","color":"#d4c094"},"insect":{"label":"곤충","color":"#b4e61e"},"kitchen":{"label":"부엌","color":"#ff5500"},"light":{"label":"빛","color":"#7ef0d0"},"line":{"label":"선·궤적","color":"#ff7a45"},"machine":{"label":"기계·톱니","color":"#4a2cff"},"mammal":{"label":"짐승","color":"#998844"},"mineral":{"label":"광물·결정","color":"#886688"},"music":{"label":"음악·악기","color":"#a0705a"},"noise":{"label":"노이즈·흐름","color":"#5ec8ff"},"ocean":{"label":"바다","color":"#1f7fb8"},"paper":{"label":"종이","color":"#996600"},"particle":{"label":"입자","color":"#ffb02e"},"physics":{"label":"물리·스프링","color":"#ff9db0"},"pixel":{"label":"픽셀 아트","color":"#ffd166"},"pottery":{"label":"도자기","color":"#b05030"},"print":{"label":"망점·인쇄","color":"#f0a0e0"},"rhythm":{"label":"리듬·펄스","color":"#ff4d4d"},"sim":{"label":"시뮬레이션","color":"#3fe0a8"},"space":{"label":"공간·원근","color":"#e8e05a"},"sport":{"label":"운동·경기","color":"#337777"},"stage":{"label":"무대·공연","color":"#ff0066"},"textile":{"label":"직물·짜임","color":"#e04ad8"},"time":{"label":"시계·시간","color":"#ff8f5a"},"toy":{"label":"장난감","color":"#dd11ff"},"type":{"label":"글자","color":"#ff5fa2"},"wave":{"label":"물결·간섭","color":"#4f7dff"},"weather":{"label":"날씨·자연","color":"#8fc0ff"}}}</script>
 <script>
 "use strict";(()=>{var PANEL_GEOMETRIES={"128x64_SINGLE":{id:1,physW:128,physH:64,chain:1,resW:128,resH:64},"64x64_SINGLE":{id:2,physW:64,physH:64,chain:1,resW:64,resH:64},"64x64_CHAIN2":{id:3,physW:64,physH:64,chain:2,resW:128,resH:64}},PANEL_GEOM_DEFAULT="128x64_SINGLE",KNOB_COUNT=4,DETENTS_PER_TURN=24,TURNS_PER_FULL_RANGE=2;function knobUnitsPerTurn(range){return(range[1]-range[0])/TURNS_PER_FULL_RANGE}var LOGICAL_KNOB_WRAP=[!0,!1,!1,!0];function wrapKnobDelta(delta,span=1){return delta>span/2?delta-span:delta<-span/2?delta+span:delta}var PATTERN_MATRIX_WIDTH=PANEL_GEOMETRIES[PANEL_GEOM_DEFAULT].resW,PATTERN_MATRIX_HEIGHT=PANEL_GEOMETRIES[PANEL_GEOM_DEFAULT].resH,PATTERN_KNOB_COUNT=KNOB_COUNT,PATTERN_DETENTS_PER_TURN=DETENTS_PER_TURN;function clampByte(value){return Number.isFinite(value)?Math.max(0,Math.min(255,Math.round(value))):0}function rgbToHsv(r,g,b){let rf=r/255,gf=g/255,bf=b/255,max=Math.max(rf,gf,bf),min=Math.min(rf,gf,bf),delta=max-min,h=0;delta>0&&(max===rf?h=(gf-bf)/delta%6:max===gf?h=(bf-rf)/delta+2:h=(rf-gf)/delta+4,h/=6,h<0&&(h+=1));let s=max===0?0:delta/max;return[h,s,max]}function hsvToRgbTuple(h,s,v){h=h-Math.floor(h);let i=Math.floor(h*6),f=h*6-i,p=v*(1-s),q=v*(1-f*s),t=v*(1-(1-f)*s),r,g,b;switch(i%6){case 0:r=v,g=t,b=p;break;case 1:r=q,g=v,b=p;break;case 2:r=p,g=v,b=t;break;case 3:r=p,g=q,b=v;break;case 4:r=t,g=p,b=v;break;default:r=v,g=p,b=q;break}return[Math.round(r*255),Math.round(g*255),Math.round(b*255)]}function srgbChannelToLinear(c){return c/=255,c<=.04045?c/12.92:Math.pow((c+.055)/1.055,2.4)}function linearChannelToSrgb(c){let v=c<=.0031308?c*12.92:1.055*Math.pow(c,.4166666666666667)-.055;return Math.max(0,Math.min(1,v))*255}function srgbToOklab(r,g,b){let lr=srgbChannelToLinear(r),lg=srgbChannelToLinear(g),lb=srgbChannelToLinear(b),l=Math.cbrt(.4122214708*lr+.5363325363*lg+.0514459929*lb),m=Math.cbrt(.2119034982*lr+.6806995451*lg+.1073969566*lb),s=Math.cbrt(.0883024619*lr+.2817188376*lg+.6299787005*lb);return[.2104542553*l+.793617785*m-.0040720468*s,1.9779984951*l-2.428592205*m+.4505937099*s,.0259040371*l+.7827717662*m-.808675766*s]}function oklabToLinearRgb(L,A,B){let l_=L+.3963377774*A+.2158037573*B,m_=L-.1055613458*A-.0638541728*B,s_=L-.0894841775*A-1.291485548*B,l=l_*l_*l_,m=m_*m_*m_,s=s_*s_*s_;return[4.0767416621*l-3.3077115913*m+.2309699292*s,-1.2684380046*l+2.6097574011*m-.3413193965*s,-.0041960863*l-.7034186147*m+1.707614701*s]}var GAMUT_EPS=1e-4;function inLinearGamut(rgb){return rgb[0]>=-GAMUT_EPS&&rgb[0]<=1+GAMUT_EPS&&rgb[1]>=-GAMUT_EPS&&rgb[1]<=1+GAMUT_EPS&&rgb[2]>=-GAMUT_EPS&&rgb[2]<=1+GAMUT_EPS}function oklabToSrgb(L,A,B){let rgb=oklabToLinearRgb(L,A,B);if(!inLinearGamut(rgb)){let lo=0,hi=1;for(let i=0;i<16;i++){let mid=(lo+hi)/2;inLinearGamut(oklabToLinearRgb(L,A*mid,B*mid))?lo=mid:hi=mid}rgb=oklabToLinearRgb(L,A*lo,B*lo)}return[linearChannelToSrgb(rgb[0]),linearChannelToSrgb(rgb[1]),linearChannelToSrgb(rgb[2])]}function mixRampColors(a,b,t,mode){if(mode==="smooth"&&(t=t*t*(3-2*t)),mode==="oklab"||mode==="oklchShort"||mode==="oklchLong"){let[La,Aa,Ba]=srgbToOklab(a[0],a[1],a[2]),[Lb,Ab,Bb]=srgbToOklab(b[0],b[1],b[2]),L=La+(Lb-La)*t;if(mode==="oklab")return oklabToSrgb(L,Aa+(Ab-Aa)*t,Ba+(Bb-Ba)*t);let CHROMA_EPS=1e-4,TWO_PI=Math.PI*2,Ca=Math.sqrt(Aa*Aa+Ba*Ba),Cb=Math.sqrt(Ab*Ab+Bb*Bb),hueA=Math.atan2(Ba,Aa)/TWO_PI;hueA<0&&(hueA+=1);let hueB=Math.atan2(Bb,Ab)/TWO_PI;hueB<0&&(hueB+=1);let h1=Ca<CHROMA_EPS?Cb<CHROMA_EPS?0:hueB:hueA,dh=(Cb<CHROMA_EPS?h1:hueB)-h1;mode==="oklchShort"?(dh>.5&&(dh-=1),dh<-.5&&(dh+=1)):dh>0&&dh<.5?dh-=1:dh<=0&&dh>-.5&&(dh+=1);let C=Ca+(Cb-Ca)*t,H=(h1+dh*t)*TWO_PI;return oklabToSrgb(L,Math.cos(H)*C,Math.sin(H)*C)}if(mode==="hsvShort"||mode==="hsvLong"){let ha=rgbToHsv(a[0],a[1],a[2]),hb=rgbToHsv(b[0],b[1],b[2]),h1=ha[1]===0?hb[0]:ha[0],dh=(hb[1]===0?h1:hb[0])-h1;return mode==="hsvShort"?(dh>.5&&(dh-=1),dh<-.5&&(dh+=1)):dh>0&&dh<.5?dh-=1:dh<=0&&dh>-.5&&(dh+=1),hsvToRgbTuple(h1+dh*t,ha[1]+(hb[1]-ha[1])*t,ha[2]+(hb[2]-ha[2])*t)}return[a[0]+(b[0]-a[0])*t,a[1]+(b[1]-a[1])*t,a[2]+(b[2]-a[2])*t]}function stopAlpha(stop){let a=stop.alpha;return a===void 0||!Number.isFinite(a)?1:Math.max(0,Math.min(1,a))}function mixStopAlpha(a,b,t,mode){mode==="smooth"&&(t=t*t*(3-2*t));let aa=stopAlpha(a);return aa+(stopAlpha(b)-aa)*t}function sampleSortedRampRGBA(stops,mode,wrap,t){if(stops.length===0)return[255,255,255,1];if(stops.length===1)return[...stops[0].color,stopAlpha(stops[0])];t=Math.max(0,Math.min(1,t));let first=stops[0],last2=stops[stops.length-1];if(t<=first.position||t>=last2.position){if(!wrap){let edge=t<=first.position?first:last2;return[...edge.color,stopAlpha(edge)]}let span=1-last2.position+first.position,local=span<=0?0:(t>=last2.position?t-last2.position:t+1-last2.position)/span;return mode==="step"?[...last2.color,stopAlpha(last2)]:[...mixRampColors(last2.color,first.color,local,mode),mixStopAlpha(last2,first,local,mode)]}for(let i=0;i<stops.length-1;i++){let a=stops[i],b=stops[i+1];if(t>b.position)continue;if(mode==="step")return[...a.color,stopAlpha(a)];let span=b.position-a.position,local=span<=0?0:(t-a.position)/span;return[...mixRampColors(a.color,b.color,local,mode),mixStopAlpha(a,b,local,mode)]}return[...last2.color,stopAlpha(last2)]}function buildRampLUTRGBA(ramp){let sorted=[...ramp.stops].sort((a,b)=>a.position-b.position),lut=new Uint8Array(256*4);for(let i=0;i<256;i++){let[r,g,b,a]=sampleSortedRampRGBA(sorted,ramp.mode,ramp.wrap,i/255);lut[i*4]=clampByte(r),lut[i*4+1]=clampByte(g),lut[i*4+2]=clampByte(b),lut[i*4+3]=clampByte(a*255)}return lut}function normalizePatternCode(code){return code.replace(/^\s*import\s+.*?;?\s*$/gm,"").replace(/\bexport\s+function\b/g,"function")}var WRAPPER_LINES_BEFORE_CODE=2,functionPreambleLines=null;function stackLocation(error){let stack=error instanceof Error?error.stack:null;if(!stack)return null;let match=stack.match(/(?:<anonymous>|Function|eval):(\d+):(\d+)/);return match?{line:Number(match[1]),column:Number(match[2])}:null}function getFunctionPreambleLines(){if(functionPreambleLines!==null)return functionPreambleLines;functionPreambleLines=2;try{new Function("throw new Error('probe');")()}catch(error){let location2=stackLocation(error);location2&&(functionPreambleLines=location2.line-1)}return functionPreambleLines}var OPENER_OF={")":"(","]":"[","}":"{"},REGEX_AFTER_WORDS=new Set(["return","typeof","instanceof","in","of","new","delete","void","throw","case","do","else","yield","await"]);function regexCanStart(prev,word){return word?REGEX_AFTER_WORDS.has(word):prev===""||"(,=:[!&|?{};+-*%<>~^".includes(prev)}function openAtEnd(code){let stack=[],innermostFirst=inside=>inside?[inside,...stack.slice().reverse()]:stack.slice().reverse(),prev="",word="",i=0;for(;i<code.length;){let c=code[i];if(stack[stack.length-1]==="`"){c==="\\"?i+=2:c==="`"?(stack.pop(),prev=c,word="",i++):c==="$"&&code[i+1]==="{"?(stack.push("${"),prev="{",word="",i+=2):i++;continue}if(/\s/.test(c)){i++;continue}if(/[\w$]/.test(c)){let j=i+1;for(;j<code.length&&/[\w$]/.test(code[j]);)j++;word=code.slice(i,j),prev=code[j-1],i=j;continue}let next=code[i+1];if(c==="/"&&next==="/"){let end=code.indexOf(`
 `,i);if(end<0)break;i=end;continue}if(c==="/"&&next==="*"){let end=code.indexOf("*/",i+2);if(end<0)return innermostFirst("/*");i=end+2;continue}if(c==='"'||c==="'"){let j=i+1;for(;j<code.length&&code[j]!==c;){if(code[j]===`
diff --git a/incoming/pattern-study/patterns/breath.js b/incoming/pattern-study/patterns/breath.js
new file mode 100644
index 000000000..d7d807eec
--- /dev/null
+++ b/incoming/pattern-study/patterns/breath.js
@@ -0,0 +1,456 @@
+// ===== Patternflow pattern =====
+// Title:   Breath
+// Family:  body
+// Idea:    A pair of lungs drawn like an anatomical plate from the throat to the diaphragm breathes: the diaphragm drops, the ribs lift, the lungs swell, cold air runs down the bronchial tree into the alveoli and they flush from dusky violet to red, then the warm air rises back out as a puff at the top.
+// Author:  patternflow-lab
+// Date:    2026-10-24
+// SPDX-License-Identifier: CC-BY-SA-4.0
+// Lineage: original, pattern round 24, after anatomical plates of the lungs, with the bronchial tree grown by volume-filling branching (Tawhai, Pullan and Hunter, 2000)
+// Round:   24
+// ===============================
+// @matrix 64x128
+// @knobs Air=0..1, Rate=0.2..3, Depth=0..1, Altitude=0..1
+//
+// Knob 1: Air. What is breathed: clear cool air at 0, cold winter air at 0.5 where every breath comes out as a white cloud at the top, and city smog at 1 that browns the sky and leaves soot in the alveoli.
+// Knob 2: Rate. Breaths a minute: about 9 asleep at 0.2, 17 at 2 (one every 3.5 s), and a shallow pant of 34 at 3.
+// Knob 3: Depth. A quiet breath at 0, where the domes of the diaphragm drop 7 LEDs, up to a deep sigh at 1 that drops them 14 and lifts and spreads the ribs twice as far.
+// Knob 4: Altitude. Sea level at 0, the top of Everest at 1: each breath brings less oxygen, so the alveoli flush only to a dusky purple, and the breathing quickens and deepens on its own.
+// Buttons: K1 tap makes the lungs cough: a quick gasp, then three jolts that blow warm air up the tree and out in puffs.
+
+const W = 64, H = 128, N = W * H, A0 = 2;
+const { min, max, abs, sin, cos, exp, sqrt, floor, ceil, round, hypot, atan2, PI } = Math;
+const cl = (v, a, b) => (v < a ? a : v > b ? b : v);
+const sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));
+const mix = (a, b, t) => a + (b - a) * t;
+const rnd = () => Math.random();
+const F32 = (n) => new Float32Array(n);
+function hash(i, j) {
+  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;
+  h = Math.imul(h ^ (h >>> 13), 1274126177);
+  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;
+}
+function vn(x, y) {
+  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);
+  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);
+  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;
+}
+
+// The diaphragm under the lungs breathed out, x then y: the right dome higher
+// over the liver, the heart sitting in the dip between the domes.
+const DK = [-1, 118.5, 5, 113.8, 9, 108.4, 13, 103.8, 17, 101.6, 21, 101, 25, 101.8, 29, 104.2, 33, 106, 37, 106.6, 41, 106.6, 45, 105.8, 49, 106.8, 53, 110.2, 57, 115, 60, 117.8, 65, 122.5];
+const D0T = F32(68);
+for (let i = 0, k = 0; i < 68; i++) {
+  while (k < DK.length - 4 && i - 1 > DK[k + 2]) k += 2;
+  D0T[i] = mix(DK[k + 1], DK[k + 3], (i - 1 - DK[k]) / (DK[k + 2] - DK[k]));
+}
+for (let n = 0; n < 4; n++) for (let i = 1; i < 67; i++) D0T[i] = (D0T[i - 1] + 2 * D0T[i] + D0T[i + 1]) / 4;
+const d0 = (x) => ((x = cl(x + 1, 0, 66.99)), D0T[floor(x)] + (D0T[floor(x) + 1] - D0T[floor(x)]) * (x - floor(x)));
+// How far the diaphragm drops at each column: most under the two domes, so
+// they flatten.
+const GX = Float32Array.from({ length: W }, (_, x) => 0.32 + 0.68 * (exp(-(((x - 17) / 10) ** 2)) + exp(-(((x - 46) / 10) ** 2))));
+// The outlines of the right lung (on the viewer's left) and the smaller left
+// lung with the heart's notch, breathed out. The diaphragm cuts their bases.
+const LUNGS = [
+  [19, 21, 15, 22.5, 11.5, 26, 8.5, 32, 6.3, 40, 4.8, 50, 4, 60, 3.6, 72, 3.6, 84, 4, 96, 4.6, 106, 5.6, 126, 28.8, 126, 28.6, 104, 28.2, 98, 27.6, 90, 27.2, 82, 27.6, 74, 28.6, 66, 29, 58, 28.6, 50, 27.8, 42, 26.6, 34, 24.8, 27, 22.5, 22.5],
+  [44.5, 22, 48.5, 23.5, 52, 27, 55, 33, 57.2, 41, 58.8, 51, 59.6, 62, 60, 74, 60.2, 86, 60.2, 98, 59.9, 108, 59.2, 126, 41.5, 126, 41.5, 106, 41, 103, 42.4, 98, 44.5, 92, 45.4, 86, 44.4, 80, 41.8, 75, 38.6, 71, 36.6, 66, 36, 58, 36.4, 50, 37.2, 42, 38.4, 34, 40, 28, 42, 23.5],
+];
+// Airway walls by generation (9 is the channel through the larynx), and how
+// strongly each shows over the lung.
+const WC = Array.from({ length: 10 }, (_, g) => (g < 2 ? [226, 216, 204] : [232 - 2 * g, 208 - 4 * g, 206]));
+const AG = Array.from({ length: 10 }, (_, g) => (g < 2 ? 1 : g > 8 ? 0 : 1.1 - 0.08 * g));
+// The cough: seconds and lung volume, and the moments of the three jolts.
+const CK = [0, 0, 0.32, 0.97, 0.44, 0.97, 0.54, 0.66, 0.84, 0.66, 0.94, 0.38, 1.24, 0.38, 1.34, 0.12, 1.9, 0];
+const CT = [0.44, 0.84, 1.24];
+
+function sdPoly(v, px, py) {
+  let d = 1e9, s = 1;
+  for (let i = 0, j = v.length - 2; i < v.length; j = i, i += 2) {
+    const ex = v[j] - v[i], ey = v[j + 1] - v[i + 1], wx = px - v[i], wy = py - v[i + 1];
+    const t = cl((wx * ex + wy * ey) / (ex * ex + ey * ey), 0, 1), bx = wx - ex * t, by = wy - ey * t;
+    d = min(d, bx * bx + by * by);
+    const c1 = py >= v[i + 1], c2 = py < v[j + 1], c3 = ex * wy > ey * wx;
+    if ((c1 && c2 && c3) || (!c1 && !c2 && !c3)) s = -s;
+  }
+  return s * sqrt(d);
+}
+// The colour being built for one LED, and mixing toward another by k.
+const C = F32(3);
+const DA = [74, 58, 156];
+const bl = (r, g, b, k) => ((C[0] += (r - C[0]) * k), (C[1] += (g - C[1]) * k), (C[2] += (b - C[2]) * k));
+function samp(A, x, y) {
+  x = cl(x, 0, 62.999);
+  y = cl(y, 0, 126.999);
+  const xi = x | 0, yi = y | 0, fx = x - xi, p = yi * W + xi, a = A[p] + (A[p + 1] - A[p]) * fx;
+  return a + (A[p + W] + (A[p + W + 1] - A[p + W]) * fx - a) * (y - yi);
+}
+
+export function setup(params) {
+  const P = (params.s = {
+    t: 0, ph: 0.68, lp: 0.68, vol: 0.6, D: 0.5, air: 0, ct: -1, jolt: 0, hp: 0, hb: 0, envIn: 0, envOut: 0, Fin: -1, Fx: 2, bf: [], puffs: [],
+    sd: F32(N), own: new Int16Array(N).fill(-1), und: F32(N * 3), ua: F32(N), GL: F32(N),
+    SX: F32(H), KY: F32(W), alvA: F32(N), alvS: F32(N), alvK: new Int16Array(N), trA: F32(N), trV: F32(N), trS: F32(N), trG: new Int8Array(N), rib: F32(N), O: F32(N * 3),
+    seg: [], ax: [], ay: [], as: [], soot: [], cd: [], cb: [], trH: F32(N),
+  });
+  build(P);
+}
+
+function addSeg(P, x0, y0, x1, y1, r, g, d) {
+  const e = d + hypot(x1 - x0, y1 - y0);
+  P.seg.push(x0, y0, x1, y1, r, g, d, e);
+  return e;
+}
+
+// Volume-filling branching: a branch's alveoli are split by the line from its
+// end through their centroid, and each half gets a child that runs 40% of the
+// way to its own centroid, until a handful is left: one grape cluster.
+function grow(P, x0, y0, dx, dy, pts, g, r, d) {
+  const { ax, ay } = P, n = pts.length;
+  let cx = 0, cy = 0;
+  for (const i of pts) (cx += ax[i]), (cy += ay[i]);
+  (cx /= n), (cy /= n);
+  if (n <= 7 || g > 8) {
+    for (const i of pts) (P.ak[i] = P.cd.length), (ax[i] += (cx - ax[i]) * 0.3), (ay[i] += (cy - ay[i]) * 0.3);
+    P.cd.push(d + hypot(cx - x0, cy - y0));
+    P.cb.push(0.84 + 0.32 * rnd());
+    return;
+  }
+  // The lobes split along the line from the branch to their centroid; past
+  // them each set is cut across its long axis, a near half and a far one.
+  let ux = cx - x0, uy = cy - y0, ul = hypot(ux, uy), ox = x0, oy = y0;
+  if (g > 2) {
+    let sxx = 0, syy = 0, sxy = 0;
+    for (const i of pts) (sxx += (ax[i] - cx) ** 2), (syy += (ay[i] - cy) ** 2), (sxy += (ax[i] - cx) * (ay[i] - cy));
+    const th = 0.5 * atan2(2 * sxy, sxx - syy) + PI / 2;
+    (ux = cos(th)), (uy = sin(th)), (ul = 1), (ox = cx), (oy = cy);
+  }
+  if (ul < 0.5) (ux = dx), (uy = dy), (ul = hypot(dx, dy));
+  (ux /= ul), (uy /= ul);
+  const side = (i) => (ax[i] - ox) * uy - (ay[i] - oy) * ux;
+  let A = pts.filter((i) => side(i) > 0), B = pts.filter((i) => side(i) <= 0);
+  if (A.length < 2 || B.length < 2) {
+    const s = pts.slice().sort((i, j) => side(i) - side(j));
+    (A = s.slice(0, n >> 1)), (B = s.slice(n >> 1));
+  }
+  const pa = atan2(dy, dx), lim = g === 2 ? 1.75 : 1.1;
+  for (const Q of [A, B]) {
+    let qx = 0, qy = 0;
+    for (const i of Q) (qx += ax[i]), (qy += ay[i]);
+    (qx = qx / Q.length - x0), (qy = qy / Q.length - y0);
+    let a = atan2(qy, qx), da = a - pa;
+    da = atan2(sin(da), cos(da));
+    if (abs(da) > lim) a = pa + Math.sign(da) * lim;
+    let len = max(1.2, hypot(qx, qy) * (Q.length <= 7 ? 0.55 : 0.4)), x1, y1;
+    for (;;) {
+      (x1 = x0 + cos(a) * len), (y1 = y0 + sin(a) * len);
+      if (len <= 1.2 || samp(P.sd, x1, y1) < -0.6) break;
+      len *= 0.8;
+    }
+    const rr = max(0.5, r * Math.cbrt(Q.length / n));
+    grow(P, x1, y1, x1 - x0, y1 - y0, Q, g + 1, rr, addSeg(P, x0, y0, x1, y1, rr, g, d));
+  }
+}
+
+function build(P) {
+  const { sd, own, GL } = P;
+  for (let p = 0; p < N; p++) {
+    const x = p & 63, y = p >> 6, sl = d0(x + 0.5) - d0(x - 0.5), cut = (y - d0(x) + 0.6) / sqrt(1 + sl * sl);
+    const a = y < 15 ? 6 : max(sdPoly(LUNGS[0], x, y), cut), b = y < 15 ? 6 : max(sdPoly(LUNGS[1], x, y), cut);
+    sd[p] = min(a, b) + 0.9 * (vn(x * 0.32, y * 0.32) - 0.5);
+    GL[p] = exp(-(((x - 32) / 26) ** 2) - (((y - 66) / 50) ** 2));
+  }
+  // Alveoli on a jittered honeycomb inside the lungs.
+  const pts = [[], []];
+  for (let j = 0; j < 56; j++)
+    for (let i = 0; i < 29; i++) {
+      const x = 1 + i * 2.25 + (j & 1) * 1.125 + (rnd() - 0.5) * 0.7, y = 19 + j * 1.95 + (rnd() - 0.5) * 0.7;
+      if (x > 62.5 || y > 125 || samp(sd, x, y) > -1) continue;
+      pts[x < 32 ? 0 : 1].push(P.ax.length);
+      P.ax.push(x), P.ay.push(y), P.as.push(0.86 + 0.28 * rnd()), P.soot.push(rnd());
+    }
+  P.ak = new Int16Array(P.ax.length);
+  // The larynx and trachea, the short steep right bronchus and the longer
+  // left one, then the trees.
+  let d = addSeg(P, 32, 3, 32, 16.5, 1, 9, 0);
+  d = addSeg(P, 32, 16.5, 32, 48.5, 3, 0, d);
+  grow(P, 26.6, 57, -4.8, 8.5, pts[0], 2, 2.3, addSeg(P, 31.3, 48.5, 26.6, 57, 2.3, 1, d));
+  grow(P, 40.4, 56.6, 7.8, 8.1, pts[1], 2, 2.05, addSeg(P, 32.7, 48.5, 40.4, 56.6, 2.05, 1, d));
+  P.dmax = max(...P.cd);
+  P.cd = Float32Array.from(P.cd, (v) => v / P.dmax);
+  P.cox = F32(P.cd.length).fill(0.55);
+  P.airK = F32(P.cd.length);
+  // Each lung pixel takes the cluster of its nearest alveolus.
+  const best = F32(N).fill(9);
+  P.ax.forEach((cx, i) => {
+    const cy = P.ay[i];
+    for (let y = max(0, round(cy) - 3); y <= min(H - 1, round(cy) + 3); y++)
+      for (let x = max(0, round(cx) - 3); x <= min(W - 1, round(cx) + 3); x++) {
+        const e = hypot(x - cx, y - cy), p = y * W + x;
+        if (e < best[p]) (best[p] = e), (own[p] = P.ak[i]);
+      }
+  });
+  under(P);
+}
+
+// What lies behind the lungs, breathed out, as colour times cover: the
+// larynx, the diaphragm and, dim under it, the liver and the stomach.
+function under(P) {
+  const { und, ua } = P;
+  const lay = (p, r, g, b, a) => {
+    if (a <= 0) return;
+    const o = p * 3;
+    (und[o] += (r - und[o]) * a), (und[o + 1] += (g - und[o + 1]) * a), (und[o + 2] += (b - und[o + 2]) * a), (ua[p] += (1 - ua[p]) * a);
+  };
+  for (let p = 0; p < N; p++) {
+    const x = p & 63, y = p >> 6, t = y - d0(x), ax = abs(x - 32);
+    if (t > 3) {
+      const xb = 37 + 3 * sin(y * 0.21), f = (1 - 0.55 * sm(3, 20, t)) * (0.7 + 0.5 * vn(x * 0.17, y * 0.17)) * (0.4 + 0.6 * sm(0.3, 2, abs(x - xb)));
+      x < xb ? lay(p, 60 * f, 20 * f, 22 * f, cl(t - 3, 0, 1)) : lay(p, 50 * f, 30 * f, 44 * f, cl(t - 3, 0, 1));
+    }
+    // The diaphragm: a band of muscle with a lit upper face, its tendon pale
+    // in the middle under the heart.
+    if (t > -0.5 && t < 4) {
+      const ten = sm(24, 29, x) * sm(43, 38, x), st = 0.8 + 0.2 * sin(x * 1.9 + t * 0.9), lit = 1 + 0.45 * sm(1.6, 0, t);
+      lay(p, mix(232 * st, 214, ten) * 0.72 * lit, mix(82 * st, 198, ten) * 0.66 * lit, mix(96, 188, ten) * 0.66 * lit, cl(min(t + 0.5, 4 - t), 0, 1));
+    }
+    if (y < 19) {
+      const hy = 3.4 + 0.03 * ax * ax;
+      if (ax < 9.5) lay(p, 200, 192, 176, 0.5 * cl(1 - abs(y - hy) / 0.9, 0, 1));
+      const top = 6 + 2.2 * max(0, 1 - ax / 2.4), hw = 7.4 - 0.42 * (y - 6), e = min(y - top, 14.6 - y, hw - ax);
+      // The thyroid cartilage, its left plate lit and the right in shade.
+      if (e > -0.5) lay(p, 206, 196, 184, cl(e + 0.5, 0, 1) * (0.42 + 0.2 * exp(-((ax / 1.8) ** 2)) + 0.25 * sm(1.2, 0.2, e)) * (x < 32 ? 1.05 : 0.78));
+      if (y > 15 && y < 17.6 && ax < 4.9) lay(p, 214, 204, 192, 0.55 * cl(4.9 - ax, 0, 1));
+    }
+  }
+}
+
+export function update(dt, input, params) {
+  if (!params.s) setup(params);
+  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];
+  dt = cl(dt || 0, 0, 0.1);
+  P.t += dt;
+  P.air = cl(k[0], 0, 1);
+  const rate = cl(k[1], 0.2, 3), dep = cl(k[2], 0, 1), alt = cl(k[3], 0, 1);
+  const bpm = (8 + 4.5 * rate + 12 * max(0, rate - 2) ** 2) * (1 + 0.45 * alt);
+  P.D = (0.5 + 0.5 * dep) * (1 - 0.4 * sm(2, 3, rate)) * (1 + 0.22 * alt);
+  if (input.btnPressed && input.btnPressed[0] && P.ct < 0) (P.ct = 0), (P.cv = P.vol), (P.cn = 0);
+  let vol = 0, envIn = 0, envOut = 0, Fin = -1, Fx = 2;
+  P.bf = [];
+  P.jolt = 0;
+  if (P.ct >= 0) {
+    // A gasp, then three coughs, each a jolt and a burst of warm air up the tree.
+    const c = (P.ct += dt);
+    let j = 0;
+    while (j < CK.length - 4 && c > CK[j + 2]) j += 2;
+    vol = mix(j ? CK[j + 1] : P.cv, CK[j + 3], sm(CK[j], CK[j + 2], c));
+    if (c < 0.4) (envIn = sin((PI * c) / 0.4) ** 0.5), (Fin = 1.12 * (1 - (1 - cl(c / 0.3, 0, 1)) ** 2));
+    for (const tc of CT) {
+      const u = c - tc;
+      if (u > 0 && u < 0.7) P.bf.push(1 - u * 3.2), (P.jolt = max(P.jolt, 2.4 * exp(-u / 0.08)));
+    }
+    if (P.cn < 3 && c > CT[P.cn] + 0.28) P.puffs.push([0, 2, rnd()]), P.cn++;
+    if (c > 1.9) (P.ct = -1), (P.ph = 0.9);
+  } else {
+    // In for 38% of a breath, out for half, then a short rest.
+    const p = (P.ph = (P.ph + (dt * bpm) / 60) % 1);
+    if (p < 0.38) (vol = 0.5 - 0.5 * cos((PI * p) / 0.38)), (envIn = sin((PI * p) / 0.38) ** 0.5), (Fin = 1.12 * (1 - (1 - cl(p / 0.3, 0, 1)) ** 2));
+    else if (p < 0.88) {
+      const u = (p - 0.38) / 0.5;
+      (vol = 0.5 + 0.5 * cos(PI * u)), (envOut = sin(PI * u) ** 0.5), (Fx = 1.06 - 1.2 * sm(0.02, 0.8, u));
+    }
+    if (P.lp < 0.64 && p >= 0.64) P.puffs.push([0, 1, rnd()]);
+    P.lp = p;
+  }
+  Object.assign(P, { vol, envIn, envOut, Fin, Fx });
+  // The alveoli the cold air has reached take up oxygen fast; the rest give it
+  // up slowly to the blood that carries it away.
+  const wS = max(0, 2 * P.air - 1), hi = 1 - 0.66 * alt - 0.14 * wS, { cd, cox, airK } = P;
+  for (let i = 0; i < cd.length; i++) {
+    cox[i] += Fin > cd[i] ? (hi - cox[i]) * (1 - exp(-dt * 7)) : (0.05 - cox[i]) * (1 - exp(-dt * 0.85));
+    airK[i] = envIn * exp(-(((Fin - cd[i]) / 0.07) ** 2));
+  }
+  P.hp = (P.hp + (dt * (62 + 10 * rate + 40 * alt)) / 60) % 1;
+  P.hb = exp(-(((P.hp - 0.06) / 0.05) ** 2)) + 0.6 * exp(-(((P.hp - 0.3) / 0.05) ** 2));
+  P.puffs = P.puffs.filter((f) => (f[0] += dt) < 5);
+}
+
+// Rest coordinates to the panel, breathed in by the per-row and per-column
+// scales: out to the sides, down with the diaphragm.
+let FX = 0, FY = 0;
+function fw(P, xr, yr) {
+  const { SX, KY } = P, kx = cl(32 + (xr - 32) * SX[cl(round(yr), 0, H - 1)], 0, 62.99), ki = floor(kx);
+  FY = A0 + (yr - A0) * (KY[ki] + (KY[ki + 1] - KY[ki]) * (kx - ki));
+  FX = 32 + (xr - 32) * SX[cl(round(FY), 0, H - 1)];
+}
+
+function alveoli(P) {
+  const { alvA, alvS, alvK, ax, ay, as } = P, rA = 1.02 + 0.52 * P.vol * P.D;
+  alvA.fill(0);
+  for (let i = 0; i < ax.length; i++) {
+    fw(P, ax[i], ay[i]);
+    const cx = FX, cy = FY, r = rA * as[i], lim = (r + 0.5) ** 2;
+    for (let y = max(0, ceil(cy - r - 0.5)); y <= min(H - 1, floor(cy + r + 0.5)); y++)
+      for (let x = max(0, ceil(cx - r - 0.5)); x <= min(W - 1, floor(cx + r + 0.5)); x++) {
+        const dx = x - cx, dy = y - cy, e2 = dx * dx + dy * dy;
+        if (e2 >= lim) continue;
+        const e = sqrt(e2), a = cl(r + 0.5 - e, 0, 1), p = y * W + x;
+        const q = e / r, hx = dx + 0.4 * r, hy = dy + 0.45 * r, hl = max(0, 1 - sqrt(hx * hx + hy * hy) / (0.75 * r));
+        const s = 0.72 + 0.28 * sqrt(max(0, 1 - q * q)) + 0.38 * hl * hl;
+        if (a * s > alvA[p] * alvS[p]) (alvA[p] = a), (alvS[p] = s), (alvK[p] = i);
+      }
+  }
+}
+
+function tree(P) {
+  const { seg: S, trA, trV, trS, trG, trH } = P, dil = 1 + 0.1 * P.vol * P.D;
+  trA.fill(0);
+  trH.fill(0);
+  for (let j = 0; j < S.length; j += 8) {
+    fw(P, S[j], S[j + 1]);
+    const x0 = FX, y0 = FY;
+    fw(P, S[j + 2], S[j + 3]);
+    const ex = FX - x0, ey = FY - y0, l2 = ex * ex + ey * ey || 1e-6, r = S[j + 4] * dil, g = S[j + 5], da = S[j + 6], db = S[j + 7], lim = (r + 1.7) ** 2, hr = min(1, r);
+    for (let y = max(0, floor(min(y0, FY) - r - 1)); y <= min(H - 1, ceil(max(y0, FY) + r + 1)); y++)
+      for (let x = max(0, floor(min(x0, FX) - r - 1)); x <= min(W - 1, ceil(max(x0, FX) + r + 1)); x++) {
+        const t = cl(((x - x0) * ex + (y - y0) * ey) / l2, 0, 1), px = x - x0 - ex * t, py = y - y0 - ey * t, e2 = px * px + py * py;
+        if (e2 >= lim) continue;
+        const e = sqrt(e2), a = cl(r + 0.5 - e, 0, 1), p = y * W + x, h = cl(r + 1.7 - e, 0, 1) * hr;
+        if (h > trH[p]) trH[p] = h;
+        if (a > trA[p]) (trA[p] = a), (trS[p] = da + (db - da) * t), (trV[p] = e / r), (trG[p] = g);
+      }
+  }
+}
+
+// The collarbones and ten ribs, faint arcs that lift and spread on a breath.
+function ribs(P) {
+  const { rib, SX } = P, v = P.vol * P.D;
+  rib.fill(0);
+  const dot = (fx, fy, rad, k) => {
+    for (let y = max(0, round(fy) - 1); y <= min(H - 1, round(fy) + 1); y++)
+      for (let x = max(0, round(fx) - 1); x <= min(W - 1, round(fx) + 1); x++) {
+        const a = cl(rad + 0.5 - sqrt((x - fx) ** 2 + (y - fy) ** 2), 0, 1) * k, p = y * W + x;
+        if (a > rib[p]) rib[p] = a;
+      }
+  };
+  for (let i = 0; i <= 10; i++)
+    for (const s of [-1, 1]) {
+      if (i === 0) {
+        for (let n = 0; n <= 50; n++) {
+          const u = n / 50;
+          dot(32 + s * (4.5 + 21 * u), 18.6 - 4.2 * u + 1.4 * sin(PI * u) - 1.2 * v, 0.5 + 0.4 * (2 * u - 1) ** 2, 0.85);
+        }
+        continue;
+      }
+      const yr = 23 + (i - 1) * 8.4, y0 = yr - v * (1 + 0.42 * i), hw = (1.5 + 28.4 * (1 - exp(-(yr - 15) / 14))) * SX[round(yr)];
+      const rx = hw - 3, ry = (5.5 + 0.55 * i) * (1 - 0.25 * v), n = ceil((rx + ry) * 2.2);
+      for (let m = 0; m <= n; m++) {
+        const th = (1.62 * m) / n;
+        dot(32 + s * (3 + rx * sin(th)), y0 + ry * (1 - cos(th)), 0.7, sm(0.2, 0.6, th));
+      }
+    }
+}
+
+export function draw(display, params) {
+  const P = params.s;
+  if (!P || !P.cox) return;
+  const { SX, KY, sd, own, cox, cb, airK, und, ua, alvA, alvS, alvK, trA, trV, trS, trG, trH, rib, O, ak, soot, GL } = P, dm = 1 / P.dmax;
+  const t = P.t, v = P.vol * P.D, air = P.air, hb = P.hb, { envIn, envOut, Fin, Fx, bf } = P;
+  const wC = max(0, 1 - 2 * air), wW = 1 - abs(2 * air - 1), wS = max(0, 2 * air - 1);
+  const pal = (c, w, s) => [0, 1, 2].map((i) => c[i] * wC + w[i] * wW + s[i] * wS);
+  const bgT = pal([3, 7, 18], [16, 26, 48], [62, 50, 32]), bgB = pal([2, 4, 12], [8, 14, 30], [36, 28, 20]), glo = pal([8, 18, 40], [22, 38, 64], [40, 30, 18]);
+  const cold = pal([150, 205, 255], [215, 238, 255], [196, 178, 128]), warm = pal([255, 196, 160], [255, 224, 206], [190, 160, 130]);
+  const puffC = pal([255, 214, 196], [236, 242, 255], [168, 158, 144]), puffK = 0.6 * wC + 1.5 * wW + 0.7 * wS;
+  const oxA = [240 - 64 * wS, 46 + 26 * wS, 58 + 20 * wS];
+  for (let y = 0; y < H; y++) SX[y] = 1 + 0.085 * v * (0.25 + 0.75 * sm(15, 115, y));
+  for (let x = 0; x < W; x++) KY[x] = 1 + 0.14 * v * GX[x];
+  alveoli(P);
+  tree(P);
+  ribs(P);
+  // The breath leaving at the top: each puff rises, spreads and thins.
+  const pf = [];
+  for (const [age, str, sd0] of P.puffs) {
+    const R = 3 + (5 + 8 * wW) * age;
+    pf.push(32 + (sd0 - 0.5) * 8, 6 - 3.2 * age, R, str * sm(0, 0.25, age) * exp(-age / (0.9 + 1.6 * wW)), sd0 * 40);
+  }
+  const hs = 1 / (1 - 0.035 * hb);
+  for (let y = 0, p = 0; y < H; y++)
+    for (let x = 0; x < W; x++, p++) {
+      const fy = y / 127, gl = GL[p];
+      let hz = 1;
+      if (wS > 0) hz = 1 + wS * (0.18 * sin(x * 0.2 + y * 0.05 + t * 0.6) + 0.18 * sin(y * 0.13 - x * 0.06 - t * 0.35));
+      for (let c = 0; c < 3; c++) C[c] = (bgT[c] + (bgB[c] - bgT[c]) * fy + glo[c] * gl) * hz;
+      const xr = cl(32 + (x - 32) / SX[y], 0, 62.999), yr = cl(A0 + (y - A0) / KY[x], 0, 126.999);
+      const xi = xr | 0, yi = yr | 0, fx = xr - xi, fz = yr - yi, q = yi * W + xi;
+      if (ua[q] + ua[q + 1] + ua[q + W] + ua[q + W + 1] > 0) {
+        const w0 = (1 - fx) * (1 - fz) * ua[q], w1 = fx * (1 - fz) * ua[q + 1], w2 = (1 - fx) * fz * ua[q + W], w3 = fx * fz * ua[q + W + 1], a = 1 - w0 - w1 - w2 - w3;
+        const o0 = q * 3, o2 = o0 + W * 3;
+        for (let c = 0; c < 3; c++) C[c] = C[c] * a + und[o0 + c] * w0 + und[o0 + 3 + c] * w1 + und[o2 + c] * w2 + und[o2 + 3 + c] * w3;
+      }
+      // The heart, dim behind the lungs, its apex down to the left.
+      if (xr > 20 && xr < 56 && yr > 60 && yr < 110) {
+        const dx = xr - 36.6, dy = yr - 86, hv = (dx * 0.6 + dy * 0.8) * hs, hu = (dx * 0.8 - dy * 0.6) * hs, eu = hu / (12.5 * (1 - 0.36 * sm(-6, 19, hv))), ev = hv / 19;
+        const a = cl((1 - sqrt(eu * eu + ev * ev)) * 9, 0, 1);
+        if (a > 0) {
+          const k = (0.4 + 0.32 * hb) * (0.65 + 0.45 * sm(9, -9, hu));
+          bl(150 * k, 26 * k, 44 * k, a);
+        }
+      }
+      // The lung: a dusky body, the grape clusters of alveoli, the capillary
+      // net shimmering on them, the pleura at the edge.
+      const s = samp(sd, xr, yr), qn = round(yr) * W + round(xr);
+      let m = 0;
+      if (s < 1.2) {
+        const c = own[qn], ox = c >= 0 ? cox[c] : 0.3;
+        m = cl(0.5 - s, 0, 1);
+        if (m > 0) bl(24 + 56 * ox, 14 - 4 * ox, 50 - 20 * ox, 0.92 * m);
+        const aa = alvA[p];
+        if (aa > 0) {
+          const i = alvK[p], cc = ak[i], o = cox[cc], sh = alvS[p] * cb[cc] * (soot[i] < wS * 0.4 ? 0.3 : 1), af = 0.4 * airK[cc];
+          for (let c = 0; c < 3; c++) C[c] += ((DA[c] + (oxA[c] - DA[c]) * o) * sh + cold[c] * af - C[c]) * aa;
+        }
+        const cv = hash(qn, 5);
+        if (m > 0 && cv > 0.6) {
+          const k = (cv - 0.35) * (0.75 + 0.75 * sin(t * 6 + cv * 90 + 2 * hb)) * (0.12 + 0.34 * ox) * m;
+          (C[0] += 230 * k), (C[1] += 30 * k), (C[2] += 50 * k);
+        }
+        const rm = cl(1 - abs(s + 0.45) / 0.75, 0, 1) * 0.5;
+        if (rm > 0) bl(126 + 129 * ox, 100 + 24 * ox, 214 - 70 * ox, rm);
+        // A shadow along each airway lifts the tree off the alveoli.
+        bl(0, 0, 0, trH[p] * 0.5 * m);
+      }
+      // The airways, and the air in them.
+      const ta = trA[p];
+      if (ta > 0) {
+        const gg = trG[p], vv = trV[p], d = trS[p] * dm, wc = WC[gg], al = AG[gg] * ta;
+        let wb = 0.85;
+        if (gg <= 1) {
+          const ring = 0.5 + 0.5 * cos(trS[p] * 2.73);
+          wb = (0.5 + 0.5 * sm(0.35, 0.95, vv)) * (0.66 + 0.44 * ring * ring);
+        } else if (gg <= 3) wb = 0.65 + 0.35 * sm(0.3, 1, vv);
+        bl(wc[0] * wb, wc[1] * wb, wc[2] * wb, al);
+        let ca = 0, wa = 0;
+        if (envIn > 0 && d < Fin) ca = envIn * (0.3 + 0.7 * exp(-(((Fin - d) / 0.05) ** 2)));
+        if (envOut > 0 && d > Fx) wa = envOut * (0.24 + 0.76 * exp(-(((d - Fx) / 0.05) ** 2)));
+        for (const f of bf) wa += 1.3 * exp(-(((d - f) / 0.06) ** 2)) + (d > f ? 0.25 : 0);
+        const lf = (gg <= 1 ? 1 - 0.5 * sm(0.55, 1, vv) : 1) * ta * (gg === 9 ? 0.8 : 0.9);
+        for (let c = 0; c < 3; c++) C[c] += (cold[c] * ca + warm[c] * wa) * lf;
+      }
+      const rb = rib[p];
+      if (rb > 0) bl(220, 210, 196, rb * (0.42 + 0.1 * m));
+      if (y < 48 && pf.length) {
+        let pa = 0;
+        for (let j = 0; j < pf.length; j += 5) {
+          const dx = (x - pf[j]) / (pf[j + 2] * 1.4), dy = (y - pf[j + 1]) / pf[j + 2], e = dx * dx + dy * dy;
+          if (e < 4) pa += pf[j + 3] * exp(-e * 1.4) * cl(0.4 + 1.4 * (vn(x * 0.2 + pf[j + 4], y * 0.2 + t * 0.9) - 0.5) + 0.5 * exp(-e * 3), 0, 1.4);
+        }
+        if (pa > 0) bl(puffC[0], puffC[1], puffC[2], min(1, pa * puffK));
+      }
+      if (wS > 0) bl(120, 96, 62, 0.14 * wS * hz);
+      O.set(C, p * 3);
+    }
+  // A cough jolts the whole chest up.
+  const jl = round(P.jolt);
+  for (let y = 0; y < H; y++) {
+    const o = min(H - 1, y + jl) * W * 3;
+    for (let x = 0; x < W; x++) display.setPixel(x, y, min(255, O[o + x * 3]) | 0, min(255, O[o + x * 3 + 1]) | 0, min(255, O[o + x * 3 + 2]) | 0);
+  }
+}
diff --git a/incoming/pattern-study/patterns/emergence.js b/incoming/pattern-study/patterns/emergence.js
new file mode 100644
index 000000000..47d1a7bed
--- /dev/null
+++ b/incoming/pattern-study/patterns/emergence.js
@@ -0,0 +1,343 @@
+// ===== Patternflow pattern =====
+// Title:   Emergence
+// Family:  mammal
+// Idea:    At dusk over dry hill country a dark ribbon of free-tailed bats pours out of a cave mouth and corkscrews up the whole sky, splits in two and joins again, streams off sideways at the top, and ripples open round a hawk that dives through it.
+// Author:  patternflow-lab
+// Date:    2026-10-24
+// SPDX-License-Identifier: CC-BY-SA-4.0
+// Lineage: original, pattern round 24, after the summer evening emergence of Mexican free-tailed bats (Tadarida brasiliensis) from the caves of the Texas Hill Country
+// Round:   24
+// ===============================
+// @matrix 64x128
+// @knobs Dusk=0..1, Speed=0.2..3, Bats=400..1400, Wind=-1..1
+//
+// Knob 1: Dusk. How late it is: at 0 the afterglow burns orange behind the far mesa and goes rose, then indigo overhead, and towards 1 it sinks into night, the stars come out and a full moon rises behind the column, so the bats and the hawk cross it as black shapes.
+// Knob 2: Speed. The pace of everything: at 2 a bat climbs from the cave mouth to the top of the panel in about four seconds and beats its wings five times a second, and at 0.2 it all runs ten times slower.
+// Knob 3: Bats. How many bats are out, from a stream of 400 to a river of 1400 that also widens the column. Turned down, the bats already in the air finish their trip and fewer follow them out of the cave.
+// Knob 4: Wind. A crosswind: the column leans downwind and most of the bats peel off that way at the top, and the high cloud streaks drift with it. With no wind about three in four turn right.
+// Buttons: K1 tap sends a hawk diving through the column now. On its own the first one comes about four seconds in, then one every fifteen to twenty seconds.
+
+const [W, H] = [64, 128];
+const N = W * H;
+const { min, max, floor, round, sin, cos, sqrt, exp, abs, PI } = Math;
+const cl = (v, a, b) => (v < a ? a : v > b ? b : v);
+const mix = (a, b, t) => a + (b - a) * t;
+const sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));
+const hyp = (a, b) => sqrt(a * a + b * b);
+const rnd = () => Math.random();
+function hash(i, j) {
+  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;
+  h = Math.imul(h ^ (h >>> 13), 1274126177);
+  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;
+}
+function vn(x, y) {
+  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);
+  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);
+  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;
+}
+
+// The cave mouth: its middle column, floor row, half width and height.
+const [CX, CB, CW, CH] = [27, 121, 9, 9.5];
+// The row where the bats come out, the most bats the knob asks for, the
+// spine's length in rows, and a bat's climb at Speed 2 in LEDs a second.
+const [CY, MAXB, HM, V0] = [115, 1400, 118, 28];
+// The column's front at the start, and the length of one trip.
+const [F0, LT] = [90, 150];
+
+// The sky from the top (0) to the horizon (1): afterglow, late dusk, night.
+const SKIES = [
+  [[0, 30, 26, 98], [0.2, 66, 46, 138], [0.42, 160, 70, 134], [0.62, 236, 104, 100], [0.8, 255, 146, 72], [1, 255, 196, 112]],
+  [[0, 12, 14, 62], [0.3, 30, 30, 100], [0.6, 94, 52, 116], [0.84, 190, 84, 78], [1, 228, 126, 66]],
+  [[0, 5, 9, 32], [0.45, 10, 18, 56], [0.8, 22, 30, 74], [1, 44, 42, 84]],
+];
+// Rock, far hills, scrub and the lit undersides of the clouds at each hour.
+const LAND = [
+  [92, 64, 54, 116, 72, 96, 34, 36, 24, 255, 178, 150],
+  [56, 40, 46, 64, 44, 80, 24, 26, 22, 140, 66, 96],
+  [28, 28, 40, 30, 30, 60, 14, 18, 22, 18, 20, 38],
+];
+// A bat against the light, and the hawk.
+const BAT = [14, 10, 12];
+
+function ramp(S, g, c) {
+  let j = 0;
+  while (j < S.length - 2 && g > S[j + 1][0]) j++;
+  const a = S[j], b = S[j + 1];
+  return mix(a[c + 1], b[c + 1], cl((g - a[0]) / (b[0] - a[0]), 0, 1));
+}
+
+export function setup(params) {
+  const F = (n) => new Float32Array(n);
+  const P = (params.s = {
+    t: 0, init: false, bg: F(N * 3), f: F(N * 3), D: F(N), key: -1, co: 0, hk: null, ring: null, nh: 3.4,
+    S: F(MAXB), V: F(MAXB), A: F(MAXB), B: F(MAXB), TU: F(MAXB), RH: F(MAXB), DR: F(MAXB), JF: F(MAXB), JP: F(MAXB),
+    FR: F(MAXB), FP: F(MAXB), OX: F(MAXB), OY: F(MAXB), VX: F(MAXB), VY: F(MAXB), BX: F(MAXB), BY: F(MAXB), Z: F(MAXB),
+    SX: F(HM), SR: F(HM), SP: F(HM), SS: F(HM), RID: F(W), FAR: F(W), CT: F(128 * 72),
+  });
+  // The near hill climbs over the cave; a flat mesa stands far off on the right.
+  for (let x = 0; x < W; x++) {
+    P.RID[x] = 99 + 0.07 * x - 10 * exp(-(((x - 23) / 15) ** 2)) + 2 * vn(x * 0.13, 3) + 1.2 * vn(x * 0.4, 9) - 1.6;
+    P.FAR[x] = 90 + 2.5 * vn(x * 0.09, 1) + 1.5 * vn(x * 0.3, 2) - 7 * sm(38, 43, x) * (1 - sm(57, 61, x)) - 2 * exp(-(((x - 8) / 9) ** 2));
+  }
+  // Scrub: juniper and mesquite clumps on the slope and along the skyline.
+  P.bush = [];
+  for (let n = 0; n < 34; n++) {
+    const x = rnd() * W, top = n < 10, r = top ? 1 + rnd() * 1.2 : 0.8 + rnd() * 1.3;
+    const y = top ? P.RID[floor(x)] - r * 0.4 : P.RID[floor(x)] + 2 + rnd() * (H - P.RID[floor(x)] - 2);
+    if (((x - CX) / (CW + 3)) ** 2 + ((CB - y) / (CH + 3)) ** 2 > 1 || y > CB + 2) P.bush.push([x, y, r]);
+  }
+  P.stars = Array.from({ length: 80 }, () => [floor(rnd() * W), floor(rnd() * 86), 0.4 + rnd() * 0.6, rnd() * 7, 1 + rnd() * 3]);
+  // Thin streaks of high cloud, wrapping every 128 columns.
+  for (let y = 0; y < 72; y++)
+    for (let x = 0; x < 128; x++) {
+      const f = (X) => 0.6 * vn(X * 0.035, y * 0.3) + 0.4 * vn(X * 0.11, y * 0.5 + 7);
+      const band = sm(0, 10, y) * (1 - sm(56, 72, y)) * (0.5 + 0.5 * sin(y * 0.21 + 1));
+      P.CT[y * 128 + x] = sm(0.5, 0.75, mix(f(x), f(x + 128), x / 128)) * band;
+    }
+}
+
+// Where a bat turns off the column, how wide it swings and which way.
+function route(P, i) {
+  const top = rnd() < 0.16;
+  P.TU[i] = top ? 98 + 14 * rnd() : P.tu + 13 * rnd();
+  P.RH[i] = top ? 30 : 15 + 7 * rnd();
+  P.DR[i] = rnd() < cl(0.72 + 0.6 * P.w, 0.04, 0.96) ? 1 : -1;
+}
+
+function place(P, M) {
+  for (let i = 0; i < MAXB; i++) {
+    const a = rnd() * 2 - 1;
+    P.A[i] = (a < 0 ? -1 : 1) * abs(a) ** 0.8;
+    P.B[i] = (rnd() - 0.5) * 1.2;
+    P.V[i] = V0 * (0.8 + 0.4 * rnd());
+    P.JF[i] = 1.4 + rnd() * 2.4;
+    P.JP[i] = rnd() * 7;
+    P.FR[i] = 4 + rnd() * 2.6;
+    P.FP[i] = rnd();
+    route(P, i);
+    P.S[i] = i < M ? F0 - rnd() * LT : -1 - rnd() * LT;
+  }
+  P.init = true;
+}
+
+export function update(dt, input, params) {
+  if (!params.s) setup(params);
+  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];
+  const d = cl(dt || 0, 0, 0.1) * (cl(k[1], 0.2, 3) / 2), M = round(cl(k[2], 400, 1400));
+  P.k1 = cl(k[0], 0, 1);
+  P.w = cl(k[3], -1, 1);
+  const T = (P.t += d);
+  // The height where the stream peels off wanders slowly.
+  P.tu = 80 + 8 * sin(T * 0.23 + 1);
+  if (!P.init) place(P, M);
+  const w = P.w, { SX, SR, SP, SS } = P;
+  P.co += d * (1.2 + 4 * w);
+
+  // The spine of the column: it leans downwind, corkscrews and breathes, and
+  // now and then tears in two along its middle and closes again higher up.
+  const Rk = 5 + (5 * (M - 400)) / 1000, ph = (T - 2.4) % 12, split = T < 2.4 ? 0 : sm(0, 1.4, ph) * (1 - sm(4.6, 6.2, ph));
+  for (let h = 0; h < HM; h++) {
+    const A = 1 + 7.5 * sm(4, 92, h);
+    SX[h] = CX + w * (0.17 * h + 0.0009 * h * h) + A * (sin(0.052 * h - 1.3 * T) + 0.4 * sin(0.12 * h + 0.75 * T + 2));
+    SR[h] = Rk * (1.25 - 0.55 * sm(0, 26, h) + 0.3 * sm(20, 50, h)) * (1 + 0.005 * h) * (1 + 0.3 * sin(0.075 * h - 2.1 * T));
+    SP[h] = 0.055 * h - 1.7 * T;
+    SS[h] = h > 18 && h < 96 ? split * 9 * sin((PI * (h - 18)) / 78) : 0;
+  }
+
+  // The hawk: a stoop through the column on a curve, out the other side.
+  if (input.btnPressed && input.btnPressed[0] && !P.hk) P.nh = 0;
+  if (!P.hk && (P.nh -= d) <= 0) {
+    const s = rnd() < 0.5 ? 1 : -1, ht = floor(46 + rnd() * 26), tx = SX[ht], ty = CY - ht, x0 = 32 + s * 46, y0 = -12, x2 = 32 - s * 52, y2 = ty - 34;
+    P.hk = { t: 0, x0, y0, x2, y2, cx: 2 * tx - (x0 + x2) / 2, cy: 2 * ty - (y0 + y2) / 2, hit: false };
+  }
+  const hk = P.hk;
+  if (hk) {
+    const u = (hk.t += d) / 2.3, v = 1 - u;
+    if (u >= 1) (P.hk = null), (P.nh = 12 + rnd() * 6);
+    else {
+      hk.x = v * v * hk.x0 + 2 * u * v * hk.cx + u * u * hk.x2;
+      hk.y = v * v * hk.y0 + 2 * u * v * hk.cy + u * u * hk.y2;
+      const dx = v * (hk.cx - hk.x0) + u * (hk.x2 - hk.cx), dy = v * (hk.cy - hk.y0) + u * (hk.y2 - hk.cy), l = hyp(dx, dy) || 1;
+      (hk.ux = dx / l), (hk.uy = dy / l), (hk.u = u);
+      if (!hk.hit && u >= 0.5) (hk.hit = true), (P.ring = { x: hk.x, y: hk.y, t: 0 });
+    }
+  }
+  const rg = P.ring;
+  if (rg && (rg.t += d) > 1.4) P.ring = null;
+  const hx = P.hk ? P.hk.x : -999, hy = P.hk ? P.hk.y : -999, rr = rg ? 4 + 26 * rg.t : 0, ra = rg ? 1 - rg.t / 1.4 : 0;
+
+  const { S, V, A, B, TU, RH, DR, JF, JP, OX, OY, VX, VY, BX, BY, Z } = P;
+  for (let i = 0; i < MAXB; i++) {
+    if (S[i] < 0 && i >= M) continue;
+    // Fast out of the mouth, then the steady climb.
+    const s = (S[i] += V[i] * d * (S[i] < 40 ? 1.6 - 0.015 * S[i] : 1));
+    if (s < 0) continue;
+    const hh = min(s, TU[i]), j = min(HM - 2, floor(hh)), f = hh - j;
+    const r = mix(SR[j], SR[j + 1], f), p = mix(SP[j], SP[j + 1], f), ca = cos(p), sa = sin(p), a = A[i], b = B[i] * (1.9 - 0.9 * sm(0, 30, hh));
+    let x = mix(SX[j], SX[j + 1], f) + r * (a * ca - b * sa) + (a < 0 ? -1 : 1) * mix(SS[j], SS[j + 1], f) + 1.1 * sin(T * JF[i] + JP[i]);
+    let y = CY - hh + 0.8 * sin(T * JF[i] * 1.3 + JP[i] * 2);
+    Z[i] = a * sa + b * ca;
+    if (s > TU[i]) {
+      // Off the top of the column in a curve, then straight out sideways.
+      const u = s - TU[i], rho = RH[i], al = min(u / rho, 1.25), st = max(0, u - rho * 1.25);
+      x += DR[i] * (rho * (1 - cos(al)) + st * 0.949);
+      y -= rho * sin(al) + st * 0.315;
+    }
+    // Away from the hawk and the ring it sends out, then back into the stream.
+    let ax = -18 * OX[i] - 6 * VX[i], ay = -18 * OY[i] - 6 * VY[i], dx = x + OX[i] - hx, dy = y + OY[i] - hy, q = dx * dx + dy * dy;
+    if (q < 196) {
+      const e = sqrt(q) + 0.3, g = (1700 * (1 - e / 14) ** 2) / e;
+      (ax += g * dx), (ay += g * dy);
+    }
+    if (rg) {
+      (dx = x + OX[i] - rg.x), (dy = y + OY[i] - rg.y);
+      const e = hyp(dx, dy) + 0.5, wv = e - rr;
+      if (wv * wv < 30) {
+        const g = (480 * ra * exp((-wv * wv) / 6)) / e;
+        (ax += g * dx), (ay += g * dy);
+      }
+    }
+    VX[i] += ax * d;
+    VY[i] += ay * d;
+    OX[i] = cl(OX[i] + VX[i] * d, -16, 16);
+    OY[i] = cl(OY[i] + VY[i] * d, -16, 16);
+    x += OX[i];
+    y += OY[i];
+    if (x < -3 || x > W + 2 || y < -3) {
+      // Out of sight: back to the cave mouth for another trip.
+      S[i] = i < M ? -rnd() * 4 : -1 - rnd() * LT;
+      OX[i] = OY[i] = VX[i] = VY[i] = 0;
+      route(P, i);
+      continue;
+    }
+    BX[i] = x;
+    BY[i] = y;
+  }
+}
+
+// The sky, the moon, the hills and the cave, kept until the hour moves.
+function backdrop(P, k) {
+  const B = P.bg, i0 = k < 0.5 ? 0 : 1, f = k < 0.5 ? k * 2 : k * 2 - 1;
+  const L = LAND[i0].map((v, c) => mix(v, LAND[i0 + 1][c], f));
+  const glow = 1 - sm(0.2, 0.9, k), mx = 37, my = 134 - 88 * sm(0.12, 1, k), mr = 8.5, mc = [mix(250, 246, sm(100, 60, my)), mix(184, 240, sm(100, 60, my)), mix(124, 220, sm(100, 60, my))];
+  P.cc = L.slice(9, 12);
+  for (let y = 0; y < H; y++) {
+    const g = y / 100, sky = [0, 1, 2].map((c) => mix(ramp(SKIES[i0], g, c), ramp(SKIES[i0 + 1], g, c), f));
+    for (let x = 0; x < W; x++) {
+      const o = (y * W + x) * 3, rid = P.RID[x];
+      let col;
+      if (y < rid) {
+        // Brighter where the sun went down, behind the far mesa.
+        const wg = 1 + 0.2 * glow * exp(-(((x - 50) / 20) ** 2)) * sm(0.3, 1, g);
+        col = sky.map((v) => v * wg);
+        const md = hyp(x + 0.5 - mx, y + 0.5 - my);
+        if (md < mr) {
+          const ma = 0.82 + 0.18 * sm(0.35, 0.65, vn(x * 0.4 + 3, y * 0.4)) - 0.12 * (md / mr) ** 4;
+          col = mc.map((v) => v * ma);
+        } else col = col.map((v, c) => v + mc[c] * sm(0.25, 0.8, k) * (0.22 * exp(-(md - mr) / 4) + 0.1 * exp(-(md - mr) / 14)));
+        if (y >= P.FAR[x]) {
+          const fv = 0.86 + 0.14 * vn(x * 0.3, y * 0.3);
+          col = col.map((v, c) => mix(v, L[3 + c] * fv, 0.8));
+        }
+      } else {
+        // Limestone with darker strata, catching light along the skyline.
+        const n = vn(x * 0.22, y * 0.45), n2 = vn(x * 0.07 + 5, y * 0.16);
+        let v = (0.6 + 0.4 * n + 0.25 * sm(0.55, 0.7, n2)) * (1 + 0.3 * exp(-(y - rid) / 2.5)) * (1 - (0.28 * (y - 92)) / 36);
+        if (((y + 4 * vn(x * 0.05, 7)) % 6) < 1) v *= 0.72;
+        const e = (abs((x + 0.5 - CX) / CW) ** 2.4 + abs((CB - y - 0.5) / CH) ** 2.4) ** (1 / 2.4) * (0.96 + 0.09 * vn(x * 0.7, y * 0.7));
+        // The pale outcrop the cave opens in, cracked, with a ledge on top.
+        const ot = CB - CH - 6 + 2.5 * vn(x * 0.2, 4), ow = 16 + 4 * vn(y * 0.2, 6) - 6 * sm(CB - 3, CB - CH - 6, y);
+        if (y >= ot && y < CB + 1 && abs(x + 0.5 - CX) < ow) {
+          v = (1.05 + 0.3 * n) * (y < ot + 1 ? 1.3 : 1) * (vn(x * 0.9, y * 0.1) < 0.28 ? 0.66 : 1) * (1 - 0.25 * sm(ow - 3, ow, abs(x + 0.5 - CX)));
+          if (e < 1.35) v *= 0.75 + 0.25 * sm(1, 1.35, e);
+        }
+        if (y < CB && e < 1) {
+          // The mouth, black inside and a little lit at the lip.
+          const lip = sm(0.75, 1, e);
+          col = [3 + 12 * lip, 2 + 8 * lip, 3 + 8 * lip];
+        } else {
+          if (y >= CB) v *= (1.1 + 0.25 * hash(x, y)) * (1 - 0.45 * exp(-(((x - CX) / CW) ** 2)) * sm(CB + 5, CB, y));
+          col = L.slice(0, 3).map((c) => c * v);
+        }
+      }
+      (B[o] = col[0]), (B[o + 1] = col[1]), (B[o + 2] = col[2]);
+    }
+  }
+  for (const [bx, by, br] of P.bush)
+    for (let y = floor(by - br); y <= by + br; y++)
+      for (let x = floor(bx - br); x <= bx + br; x++) {
+        const e = hyp(x + 0.5 - bx, (y + 0.5 - by) * 1.2) / br;
+        if (x < 0 || x >= W || y < 0 || y >= H || e > 1) continue;
+        const o = (y * W + x) * 3, v = (0.8 + 0.4 * hash(x, y + 50)) * (y + 0.5 < by - br * 0.3 ? 1.45 : 1);
+        for (let c = 0; c < 3; c++) B[o + c] = L[6 + c] * v;
+      }
+}
+
+export function draw(display, params) {
+  const P = params.s;
+  if (!P || !P.init) return;
+  const k = P.k1, key = round(k * 400);
+  if (key !== P.key) backdrop(P, k), (P.key = key);
+  const F = P.f, D = P.D, T = P.t;
+  F.set(P.bg);
+  // Stars come out as the glow goes, behind the cloud streaks.
+  const sk = sm(0.4, 0.95, k);
+  if (sk > 0)
+    for (const [x, y, b, ph, fq] of P.stars) {
+      if (y >= P.FAR[x] - 1) continue;
+      const o = (y * W + x) * 3, v = sk * b * (0.75 + 0.25 * sin(T * fq + ph));
+      (F[o] += 190 * v), (F[o + 1] += 190 * v), (F[o + 2] += 210 * v);
+    }
+  // High cloud drifts with the wind, lit from below by the sun that has set.
+  const cc = P.cc, sh = floor(P.co);
+  for (let y = 0; y < 72; y++)
+    for (let x = 0; x < W; x++) {
+      const a = P.CT[y * 128 + ((x - sh) & 127)];
+      if (a < 0.02 || y >= P.FAR[x]) continue;
+      const o = (y * W + x) * 3, g = 0.55 + y / 110, al = 0.55 * a;
+      for (let c = 0; c < 3; c++) F[o + c] = mix(F[o + c], cc[c] * g, al);
+    }
+
+  // Bats and the hawk as darkness laid over the light.
+  D.fill(0);
+  const put = (x, y, a) => {
+    if (x >= 0 && x < W && y >= 0 && y < H) D[y * W + x] += a;
+  };
+  const M = P.S.length;
+  for (let i = 0; i < M; i++) {
+    if (P.S[i] < 0) continue;
+    const x = round(P.BX[i]), y = round(P.BY[i]), near = P.Z[i] > -0.3, q = floor(((T * P.FR[i] + P.FP[i]) % 1) * 3) - 1;
+    if (near) put(x, y, 0.95), put(x - 1, y + q, 0.8), put(x + 1, y + q, 0.8);
+    else put(x, y, 0.6), put(x + (q ? 1 : -1), y + q, 0.35);
+  }
+  const hk = P.hk;
+  if (hk && hk.x !== undefined) {
+    const { x, y, ux, uy, u } = hk, nx = -uy, ny = ux;
+    const seg = (x0, y0, x1, y1, r) => {
+      const n = 2 * hyp(x1 - x0, y1 - y0) + 1;
+      for (let s = 0; s <= n; s++) {
+        const px = mix(x0, x1, s / n), py = mix(y0, y1, s / n);
+        for (let yy = floor(py - r); yy <= py + r; yy++) for (let xx = floor(px - r); xx <= px + r; xx++) if (hyp(xx + 0.5 - px, yy + 0.5 - py) <= r + 0.25) put(xx, yy, 0.6);
+      }
+    };
+    seg(x + 2.2 * ux, y + 2.2 * uy, x - 3 * ux, y - 3 * uy, 1);
+    seg(x - 3 * ux, y - 3 * uy, x - 4.6 * ux + 0.9 * nx, y - 4.6 * uy + 0.9 * ny, 0.6);
+    seg(x - 3 * ux, y - 3 * uy, x - 4.6 * ux - 0.9 * nx, y - 4.6 * uy - 0.9 * ny, 0.6);
+    if (u > 0.14 && u < 0.5) {
+      // Wings folded back in the stoop.
+      for (const sg of [1, -1]) seg(x + 0.8 * ux + sg * nx, y + 0.8 * uy + sg * ny, x - 4 * ux + sg * 2.4 * nx, y - 4 * uy + sg * 2.4 * ny, 0.6);
+    } else {
+      // Spread and beating as it climbs away.
+      const fl = 1.6 * sin(hk.t * 15);
+      for (const sg of [1, -1]) {
+        const wx = x + sg * 3.2 * nx + 1.1 * ux, wy = y + sg * 3.2 * ny + 1.1 * uy;
+        seg(x + 0.5 * ux, y + 0.5 * uy, wx, wy, 0.9);
+        seg(wx, wy, x + sg * 6.2 * nx - (0.6 + fl) * ux, y + sg * 6.2 * ny - (0.6 + fl) * uy, 0.55);
+      }
+    }
+  }
+  for (let i = 0, o = 0; i < N; i++, o += 3) {
+    const a = min(1, D[i]), b = 1 - a;
+    display.setPixel(i & 63, i >> 6, min(255, F[o] * b + BAT[0] * a) | 0, min(255, F[o + 1] * b + BAT[1] * a) | 0, min(255, F[o + 2] * b + BAT[2] * a) | 0);
+  }
+}
diff --git a/incoming/pattern-study/patterns/flying-trapeze.js b/incoming/pattern-study/patterns/flying-trapeze.js
new file mode 100644
index 000000000..7dff0c4d3
--- /dev/null
+++ b/incoming/pattern-study/patterns/flying-trapeze.js
@@ -0,0 +1,469 @@
+// ===== Patternflow pattern =====
+// Title:   Flying Trapeze
+// Family:  stage
+// Idea:    Looking up into a circus big top at night, a flyer swings out from the board, lets go at the top of the arc, turns her somersaults in the follow spots and is caught by the catcher hanging by his knees, then swings home to the bar or drops into the safety net over the dark crowd.
+// Author:  patternflow-lab
+// Date:    2026-10-24
+// SPDX-License-Identifier: CC-BY-SA-4.0
+// Lineage: original, pattern round 24, after the flying trapeze act Jules Léotard first flew at the Cirque Napoléon in 1859
+// Round:   24
+// ===============================
+// @matrix 64x128
+// @knobs Lights=0..1, Speed=0.2..3, Turns=1..3, Haze=0..1
+//
+// Knob 1: Lights. The gels in the follow spots and the sequins on the costumes: warm white and gold at 0, amber and rose, then pink and lavender, and at 1 one pink spot and one blue. The house light on the canvas turns with them.
+// Knob 2: Speed. How fast the act runs: at 2 the fly bar swings out and back in 2.4 s and a flyer lets go every eight to eleven seconds; at 0.2 it all runs ten times slower.
+// Knob 3: Turns. The somersaults in the trick, one, two or three. A bigger trick swings higher and flies longer, and the house goes darker for it while every spot finds the flyer.
+// Knob 4: Haze. How much haze hangs under the canvas. A little shows the beams as thin shafts; turned up they swell and the whole tent glows in the gels.
+// Buttons: K1 tap starts a drum roll: the next trick is the triple, and it ends in the net.
+
+const [W, H] = [64, 128];
+const N = W * H;
+const { min, max, sin, cos, abs, sqrt, exp, floor, ceil, round, atan2, log, PI } = Math;
+const TAU = 2 * PI;
+const cl = (v, a, b) => (v < a ? a : v > b ? b : v);
+const sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));
+const mix = (a, b, t) => a + (b - a) * t;
+const ease = (s) => s - sin(TAU * s) * (0.8 / TAU);
+const rnd = () => Math.random();
+// A swing of the fly bar out and back, in seconds at Speed 2.
+const PB = 2.4;
+const OM = TAU / PB;
+// The fly bar's crane and rope; the catcher's cradle, rope and swing.
+const [PFX, PFY, LF] = [24, 30, 34];
+const [PCX, PCY, LC, B] = [57, 30, 20, 0.18];
+// The board's top, where the next flyer waits on it, and the rope ladder.
+const [BY, WX, LX] = [68, 1.2, 2.6];
+// Hips above feet, hands above hips, gravity, and the time of the flight back to the bar.
+const [LEG, HL, G, TR] = [3.8, 5.7, 90, 0.45];
+// Follow spots below the panel behind the crowd, and how fast their cones open.
+const SPOT = [[-14, 166], [78, 166], [32, 186]];
+const TA = 0.046;
+// Gels by the Lights knob: house wash (0..1), three spots, two flyers and the catcher.
+const PAL = [
+  [[1, 0.8, 0.52], [255, 226, 170], [255, 244, 222], [255, 206, 120], [255, 182, 36], [205, 222, 255], [70, 120, 255]],
+  [[1, 0.64, 0.5], [255, 182, 120], [255, 150, 150], [255, 208, 150], [255, 96, 112], [255, 206, 60], [250, 240, 230]],
+  [[0.82, 0.52, 0.86], [255, 122, 196], [186, 142, 255], [255, 166, 214], [255, 62, 196], [160, 104, 255], [110, 236, 214]],
+  [[0.46, 0.44, 1], [255, 76, 170], [66, 128, 255], [172, 96, 255], [255, 44, 156], [36, 150, 255], [245, 245, 255]],
+];
+const [SKIN, STEEL, ROPE, BAR] = [[255, 196, 156], [170, 176, 190], [150, 138, 116], [215, 215, 225]];
+const ONNET = { drop: 1, net: 1, up: 1, tada: 1 };
+
+const mkF = (c) => ({ m: 'wait', x: WX, y: BY - LEG, ph: 0, fs: 1, a1: 2.9, a2: 2.9, l1: 0, l2: 0, k1: 0, k2: 0, hx: null, T: 0, sx: 0, sy: 0, c });
+// Thighs, knees and arms of a figure, both sides.
+const lim = (f, l1, l2, k1, k2, a1, a2) => Object.assign(f, { l1, l2, k1, k2, a1, a2 });
+const rest = (f) => ((f.hx = null), lim(f, 0, 0, 0, 0, 2.9, 2.9));
+const barAt = (th) => [PFX + LF * sin(th), PFY + LF * cos(th)];
+const netY = (x) => 98.5 + 1.6 * sin((PI * cl(x, 0, 63)) / 63);
+
+export function setup(params) {
+  const F32 = (n) => new Float32Array(n);
+  const S = {
+    t: 0, started: false, F: F32(N * 3), LT: F32(N * 3), CA: F32(N * 3), CI: F32(N), AUD: F32(N), ROW: new Int8Array(N).fill(-1), POOL: F32(H),
+    bar: 'free', A: 0.55, phc: 0, fl: [mkF(4), mkF(5)], star: 0,
+    sp: SPOT.map(([sx, sy]) => ({ sx, sy, ax: 30, ay: 50, ux: 0, uy: -1, D: 110 })),
+    drum: 0, drumB: 0, pop: 0, wash: 1, trip: false, nextFin: true, turns: 1, net: { s: 0, v: 0, x: 32 }, fx: [], phones: [], P: PAL[0].map((c) => c.slice()), hz: 0.3,
+  };
+  // The canvas: red and cream panels running down from the peak, each billowing between its seams.
+  for (let y = 0; y < H; y++) {
+    S.POOL[y] = exp(-(((y - 17) / 15) ** 2));
+    for (let x = 0; x < W; x++) {
+      const i = y * W + x, dx = x - 32, dy = y - 5, a = atan2(dx, dy);
+      const red = 0.5 + 0.5 * cl(sin(a * 7) * 4, -1, 1);
+      const k = (0.84 - 0.16 * cos(a * 14)) * sm(2.5, 6, sqrt(dx * dx + dy * dy));
+      S.CA[i * 3] = mix(0.95, 0.88, red) * k;
+      S.CA[i * 3 + 1] = mix(0.86, 0.12, red) * k;
+      S.CA[i * 3 + 2] = mix(0.68, 0.12, red) * k;
+      S.CI[i] = (0.3 + 0.7 * exp(-((dx * dx) / 900 + (dy * dy) / 300))) * sm(40, 20, y);
+    }
+  }
+  // The crowd: rows of heads and shoulders, bigger towards the front, each row a solid band below.
+  [[108.5, 1.9, 4.6], [114, 2.3, 5.4], [120.5, 2.8, 6.4], [127.5, 3.4, 7.6]].forEach(([base, r, gap], k) => {
+    for (let cx = -2 + rnd() * gap; cx < W + 3; cx += gap * (0.8 + 0.4 * rnd())) {
+      const hy = base - r * 1.15 + (rnd() - 0.5) * 1.2, hx = cx + rnd() - 0.5;
+      for (let y = max(0, floor(hy - r - 1)); y < H; y++)
+        for (let x = max(0, floor(hx - r * 2.4)); x <= min(W - 1, ceil(hx + r * 2.4)); x++) {
+          const hd = r + 0.5 - sqrt((x - hx) ** 2 + (y - hy) ** 2);
+          const sh = 1 - sqrt(((x - hx) / (r * 2.2)) ** 2 + ((y - base) / (r * 0.9)) ** 2);
+          const c = y >= base ? 1 : cl(max(hd, sh * r * 2), 0, 1), i = y * W + x;
+          if (c > S.AUD[i]) S.AUD[i] = c;
+          if (c > 0.5) S.ROW[i] = k;
+        }
+      if (rnd() < 0.09) S.phones.push([round(hx + 1), round(hy - r - 1)]);
+    }
+  });
+  params.s = S;
+}
+
+// The catcher at swing angle psi: knees over the bar, body hanging, arms reaching for the flyer.
+function cpose(psi) {
+  const ps = psi * 1.2, bx = PCX + LC * sin(psi), by = PCY + LC * cos(psi), sx = sin(ps), sy = cos(ps);
+  const hx = bx + 1.9 * sx, hy = by + 1.9 * sy;
+  const ax = sx * cos(0.2) - sy * sin(0.2), ay = sy * cos(0.2) + sx * sin(0.2);
+  return { bx, by, x: hx, y: hy, ph: PI - ps, fs: 1, l1: 0, l2: 0, k1: 1.5, k2: 1.3, hx: hx + 3 * sx + 2.7 * ax, hy: hy + 3 * sy + 2.7 * ay };
+}
+
+function newRound(S, go, who) {
+  const trip = S.trip, turns = trip ? 3 : S.turns, fin = trip || S.nextFin, tf = 0.75 + 0.25 * turns, tr = go + 1.5 * PB;
+  S.trip = false;
+  S.nextFin = !fin;
+  S.rd = { turns, fin, tf, h: 8 + 3 * turns, tg: go, tr, tc: tr + tf, rel: false, A0: S.A, A: 0.55 + 0.03 * (turns - 1), t0: S.t, over: false };
+  S.star = who;
+  // The catcher times his swing to be out at the front of it when she arrives.
+  const dt = max(0.3, S.rd.tc - S.t);
+  let k = round((S.phc + OM * dt) / TAU);
+  if ((TAU * k - S.phc) / dt < 0.6 * OM) k++;
+  S.ct = { ph: TAU * k, t: S.rd.tc, ev: 0 };
+}
+
+const burst = (S, n) => {
+  for (let i = 0; i < n; i++) S.fx.push({ x: 2 + rnd() * 60, y: 106 + rnd() * 20, a: 1, w: rnd() * 0.25 });
+};
+
+function catcherEvent(S, ev) {
+  const rd = S.rd, f = S.fl[S.star];
+  f.T = 0;
+  f.ph0 = f.ph;
+  if (ev === 0) {
+    // The catch: the house comes up and the crowd's cameras go off.
+    if (f.m === 'fly') f.m = 'caught';
+    burst(S, 7, (S.pop = 1));
+    S.ct = rd.fin ? { ph: S.phc + 1.5 * PI, t: S.t + 2.4, ev: 2 } : { ph: S.phc + TAU, t: rd.tg + 3.5 * PB - TR, ev: 1 };
+  } else if (ev === 1) [f.m, f.sx, f.sy] = ['ret', f.x, f.y];
+  else {
+    // He lets her go on the swing back, and she falls turning over into the net.
+    [f.m, f.vx, f.vy] = ['drop', f.vx0, f.vy0];
+    const dy = netY(f.x + f.vx * 0.9) - 1 - f.y;
+    f.TF = (-f.vy + sqrt(f.vy * f.vy + 2 * G * max(1, dy))) / G;
+    rd.over = true;
+  }
+}
+
+function stepFlyer(S, f, d, i) {
+  const rd = S.rd, t = S.t, th = S.th, [hbx, hby] = barAt(-S.A), [bx, by] = barAt(th), nt = S.net;
+  f.T += d;
+  switch (f.m) {
+    case 'wait':
+    case 'hold': {
+      // Standing on the board; the one whose turn it is steps up and takes the bar.
+      const h = f.m === 'hold', gx = h ? hbx - 1 : WX;
+      rest(f);
+      f.x += cl(gx - f.x, -7 * d, 7 * d);
+      [f.fs, f.y, f.ph] = [1, BY - LEG, h ? 0.12 * sm(3, 0.5, abs(gx - f.x)) : 0.04 * sin(t * 1.3 + i)];
+      if (!h) break;
+      if (abs(gx - f.x) < 1.5) [f.hx, f.hy] = [hbx, hby];
+      if (t >= rd.tg) [S.bar, f.m, f.T, f.sx, f.sy] = ['free', 'swing', 0, f.x, f.y];
+      break;
+    }
+    case 'swing':
+    case 'ride': {
+      f.fs = f.m === 'ride' ? -1 : 1;
+      const k = f.m === 'swing' ? sm(0, 0.3, f.T) : 1, u = (f.fs * th) / S.A;
+      [f.x, f.y, f.ph] = [mix(f.sx, bx + HL * sin(th), k), mix(f.sy, by + HL * cos(th), k), -th * k];
+      // Legs lead at the front of each swing and trail at the back.
+      const l = (0.95 * max(0, u) + 0.35 * min(0, u)) * k;
+      lim(f, l, l, 0.25 * max(0, -u) * k, 0.25 * max(0, -u) * k, f.a1, f.a2);
+      [f.hx, f.hy] = [bx, by];
+      if (f.m === 'swing' && !rd.rel && t >= rd.tr) {
+        // Let go at the top of the swing, aimed at where the catcher's hands will be.
+        const c = cpose(-B);
+        rd.rel = true;
+        Object.assign(f, { m: 'fly', Rx: f.x, Ry: f.y, Cx: c.hx + HL * sin(-0.8 * B), Cy: c.hy + HL * cos(-0.8 * B), phR: f.ph, pkR: f.l1, hx: null });
+      }
+      if (f.m === 'ride' && t >= rd.tg + 4 * PB) {
+        // Home on the board. The flyer who was waiting takes the bar next.
+        S.bar = 'hook';
+        rd.over = true;
+        [f.m, f.T, f.sx, f.sy] = ['land', 0, f.x, f.y];
+        const o = S.fl[1 - i];
+        if (o.m === 'wait') o.m = 'hold';
+        f.next = o.m === 'hold' ? 'wait' : 'hold';
+        newRound(S, t + 1.1, o.m === 'hold' ? 1 - i : i);
+      }
+      break;
+    }
+    case 'fly': {
+      const s = cl((t - rd.tr) / rd.tf, 0, 1), u = sm(0.04, 0.22, s) * (1 - sm(0.7, 0.9, s));
+      [f.x, f.y, f.ph] = [mix(f.Rx, f.Cx, s), mix(f.Ry, f.Cy, s) - 4 * rd.h * s * (1 - s), mix(f.phR, 0.8 * B - TAU * rd.turns, ease(s))];
+      const l = max(f.pkR * (1 - sm(0, 0.12, s)), 2.2 * u);
+      lim(f, l, l, 2.4 * u, 2.4 * u, 2 * u, 2 * u);
+      break;
+    }
+    case 'caught': {
+      const c = S.cp, tp = S.psi * 0.8;
+      [f.x, f.y, f.ph, f.fs, f.hx, f.hy] = [c.hx + HL * sin(tp), c.hy + HL * cos(tp), -tp, 1, c.hx, c.hy];
+      lim(f, 0.4 * sin(S.phc + 0.6), 0.4 * sin(S.phc + 0.6), 0, 0, 0, 0);
+      break;
+    }
+    case 'ret': {
+      // A half turn in the air and back to the fly bar, which comes out to meet her.
+      const s = cl(f.T / TR, 0, 1), [ex, ey] = barAt(rd.A);
+      [f.x, f.y, f.ph, f.fs] = [mix(f.sx, ex + HL * sin(rd.A), s), mix(f.sy, ey + HL * cos(rd.A), s) - 18 * s * (1 - s), mix(f.ph0, -rd.A, s), s < 0.5 ? 1 : -1];
+      const a = sin(PI * s);
+      f.hx = null;
+      lim(f, 0.3 * a, 0.3 * a, 0, 0, 1.3 * a, -1.3 * a);
+      if (s >= 1) f.m = 'ride';
+      break;
+    }
+    case 'land': {
+      const k = sm(0, 0.35, f.T);
+      rest(f);
+      [f.x, f.y, f.ph, f.hx, f.hy] = [mix(f.sx, hbx - 1, k), mix(f.sy, BY - LEG, k), mix(f.ph, 0, k), hbx, hby];
+      if (f.T > 0.4) f.m = f.next;
+      break;
+    }
+    case 'drop': {
+      f.vy += G * d;
+      [f.x, f.y] = [f.x + f.vx * d, f.y + f.vy * d];
+      const s = cl(f.T / f.TF, 0, 1), u = sm(0.1, 0.3, s) * (1 - sm(0.62, 0.85, s));
+      f.ph = mix(f.ph0, -PI / 2 - TAU, ease(s));
+      lim(f, 2.2 * u, 2.2 * u, 2.4 * u, 2.4 * u, 0.6 + 1.4 * u, 0.6 + 1.4 * u).hx = null;
+      if (f.y >= netY(f.x) - 1) {
+        [f.m, f.T, nt.x] = ['net', 0, f.x];
+        S.pop = max(S.pop, 0.8);
+        burst(S, 6);
+      }
+      break;
+    }
+    case 'net': {
+      // Bouncing on her back: a stiff spring while she is in the net, a fall while she is out.
+      const n = max(1, ceil(d / 0.006)), h = d / n;
+      for (let j = 0; j < n; j++) {
+        const pen = f.y - (netY(f.x) - 1);
+        f.vy += (G - (pen > 0 ? 420 * pen + 7 * f.vy : 0)) * h;
+        [f.y, f.x, f.vx] = [f.y + f.vy * h, f.x + f.vx * h, f.vx * (1 - 2.5 * h)];
+        if (pen > 0) [nt.s, nt.v] = [pen, f.vy];
+        else (nt.v += (-900 * nt.s - 22 * nt.v) * h), (nt.s += nt.v * h);
+      }
+      [nt.x, nt.hold, f.ph] = [f.x, true, -PI / 2];
+      lim(f, 0.6, 0.6, 0.4, 0.4, 1.6 + 0.5 * sin(f.T * 9), 1.6 - 0.5 * sin(f.T * 9));
+      if (f.T > 2.6) [f.m, f.T, f.sy] = ['up', 0, f.y];
+      break;
+    }
+    case 'up':
+    case 'tada':
+    case 'walk': {
+      nt.s += (1.5 - nt.s) * min(1, d * 8);
+      [nt.v, nt.x, nt.hold] = [0, f.x, true];
+      const top = netY(f.x) + nt.s - LEG - 0.6;
+      if (f.m === 'up') {
+        const k = sm(0, 0.5, f.T);
+        rest(f);
+        [f.ph, f.y] = [mix(-PI / 2, 0, k), mix(f.sy, top, k)];
+        if (f.T > 0.55) [f.m, f.T] = ['tada', 0];
+      } else if (f.m === 'tada') {
+        // Arms up for the crowd.
+        [f.ph, f.y] = [0, top];
+        lim(f, 0, 0, 0, 0, 0.55, -0.55);
+        if (f.T > 0.8) [f.m, f.T] = ['walk', 0];
+      } else {
+        // Bouncing along the net to the ladder.
+        const w = sin(f.T * 8);
+        [f.fs, f.x, f.y, f.ph] = [-1, f.x - 13 * d, top - 1.1 * abs(w), 0];
+        lim(f, 0.5 * w, -0.5 * w, 0, 0, PI - 0.5 * w, PI + 0.5 * w);
+        if (f.x <= LX) [f.m, f.T] = ['climb', 0];
+      }
+      break;
+    }
+    case 'climb': {
+      // Up the rope ladder to the board.
+      const w = sin(f.T * 9);
+      [f.x, f.y, f.fs, f.ph, f.hx] = [LX, f.y - 12 * d, -1, 0, null];
+      const p = max(0, w), q = max(0, -w);
+      lim(f, 0.9 * p, 0.9 * q, 1.5 * p, 1.5 * q, 0.35 + 0.45 * w, 0.35 - 0.45 * w);
+      if (f.y <= BY - LEG) [f.y, f.m] = [BY - LEG, 'wait'];
+      break;
+    }
+  }
+  if (d > 0) [f.vx0, f.vy0] = [(f.x - f.px) / d, (f.y - f.py) / d];
+  [f.px, f.py] = [f.x, f.y];
+}
+
+export function update(dt, input, params) {
+  if (!params.s) setup(params);
+  const S = params.s, kv = input.knobValues || [0, 2, 0, 0.06], rdt = cl(dt || 0, 0, 0.1), d = rdt * (cl(kv[1], 0.2, 3) / 2);
+  const u = cl(kv[0], 0, 1) * 3, pi = min(2, floor(u));
+  for (let j = 0; j < 7; j++) for (let c = 0; c < 3; c++) S.P[j][c] = mix(PAL[pi][j][c], PAL[pi + 1][j][c], u - pi);
+  [S.turns, S.hz] = [cl(round(kv[2]), 1, 3), 0.26 + 0.74 * cl(kv[3], 0, 1)];
+  if (!S.started) {
+    // Open mid-act: the first flyer is already out on her first swing.
+    [S.started, S.fl[0].m, S.fl[0].T] = [true, 'swing', 1];
+    newRound(S, -0.9, 0);
+    [S.A, S.phc] = [S.rd.A, S.ct.ph - OM * S.rd.tc];
+  }
+  const tp = S.t, t = (S.t += d), rd = S.rd;
+  if (input.btnPressed && input.btnPressed[0]) {
+    // Drum roll: this trick becomes the triple if she has not let go yet, else the next one.
+    S.drumB = 1;
+    if (!rd.rel && !rd.over) {
+      Object.assign(rd, { turns: 3, fin: true, tf: 1.5, h: 17, tc: rd.tr + 1.5 });
+      S.nextFin = false;
+      if (S.ct && S.ct.ev === 0) S.ct.t = rd.tc;
+    } else S.trip = true;
+  }
+  S.A = S.bar === 'hook' && !rd.over ? mix(rd.A0, rd.A, sm(rd.t0, rd.tg, t)) : rd.A;
+  S.th = S.bar === 'hook' ? -S.A : -S.A * cos(OM * (t - rd.tg));
+  // The catcher, phase-locked to the next thing he has to be on time for.
+  const ct = S.ct, rem = ct ? ct.t - tp : 0;
+  S.phc = ct ? (rem <= d ? ct.ph : S.phc + ((ct.ph - S.phc) * d) / rem) : S.phc + OM * d;
+  S.cp = cpose((S.psi = -B * cos(S.phc)));
+  if (ct && rem <= d) (S.ct = null), catcherEvent(S, ct.ev);
+  const nt = S.net, h = min(d, 0.02);
+  nt.hold = false;
+  S.fl.forEach((f, i) => stepFlyer(S, f, d, i));
+  // An empty net rings and settles.
+  if (!nt.hold) (nt.v += (-900 * nt.s - 22 * nt.v) * h), (nt.s = (nt.s + nt.v * h) * exp(-d * 3));
+  // After a drop the bar swings empty until it comes back to the board and the next flyer hooks it.
+  const R = S.rd;
+  const w = S.fl.findIndex((f) => f.m === 'wait');
+  if (R.over && S.bar === 'free' && w >= 0 && floor((t - R.tg) / PB) > floor((tp - R.tg) / PB)) [S.bar, S.fl[w].m] = ['hook', 'hold'], newRound(S, t + 0.7, w);
+  // Light cues: the house dims for the drum roll, more for a bigger trick, and comes up on the catch.
+  const r = S.rd, star = S.fl[S.star];
+  const roll = (!r.rel && t > r.tg + 0.5 * PB) || star.m === 'fly' || S.drumB > 0 ? 1 : 0;
+  S.drum += (roll - S.drum) * (1 - exp(-d * 4));
+  S.drumB = max(0, S.drumB - rdt * 0.4);
+  S.pop *= exp(-d * 0.9);
+  S.wash = (1 - S.drum * (0.3 + 0.22 * (r.turns - 1))) * (1 + 0.8 * S.pop);
+  // The follow spots: two on the flyer, the third on the catcher unless the trick is big.
+  const fin = S.fl.find((f) => ONNET[f.m]);
+  const tg = [fin || star, fin && t < r.tg + 0.4 ? fin : star, S.drum > 0.5 && r.turns >= 2 ? star : { x: S.cp.x, y: S.cp.y + 3 }];
+  const k = 1 - exp(-d * 8);
+  S.sp.forEach((s, j) => {
+    const vx = (s.ax += (tg[j].x - s.ax) * k) - s.sx, vy = (s.ay += (tg[j].y - 1 - s.ay) * k) - s.sy, D = (s.D = sqrt(vx * vx + vy * vy));
+    [s.ux, s.uy] = [vx / D, vy / D];
+  });
+  // Camera flashes in the crowd.
+  if (rnd() < rdt * 0.9) burst(S, 1);
+  for (const e of S.fx) e.a -= rdt * 9;
+  S.fx = S.fx.filter((e) => e.a > 0);
+}
+
+// A stroke lit by the light field, with optional sequin sparkle.
+function seg(S, ax, ay, bx, by, r, c, sp) {
+  const { F, LT } = S, dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1e-6;
+  const x1 = min(W - 1, ceil(max(ax, bx) + r + 1)), y1 = min(H - 1, ceil(max(ay, by) + r + 1));
+  for (let y = max(0, floor(min(ay, by) - r - 1)); y <= y1; y++)
+    for (let x = max(0, floor(min(ax, bx) - r - 1)); x <= x1; x++) {
+      const t = cl(((x - ax) * dx + (y - ay) * dy) / ll, 0, 1), ex = x - ax - dx * t, ey = y - ay - dy * t;
+      const a = cl(r + 0.5 - sqrt(ex * ex + ey * ey), 0, 1);
+      if (a <= 0) continue;
+      const q = (y * W + x) * 3, s = sp ? 0.72 + 0.56 * rnd() : 1;
+      for (let j = 0; j < 3; j++) F[q + j] += (c[j] * LT[q + j] * s - F[q + j]) * a;
+    }
+}
+
+function glow(F, x, y, r, c, k) {
+  for (let yy = max(0, floor(y - r)); yy <= min(H - 1, ceil(y + r)); yy++)
+    for (let xx = max(0, floor(x - r)); xx <= min(W - 1, ceil(x + r)); xx++) {
+      const g = k * exp(-((xx - x) ** 2 + (yy - y) ** 2) / (0.25 * r * r)), q = (yy * W + xx) * 3;
+      for (let j = 0; j < 3; j++) F[q + j] += c[j] * g;
+    }
+}
+
+// A stick figure: hips at (x, y), body angle ph (0 is head up), facing fs.
+function fig(S, f, col) {
+  const bx = sin(f.ph), by = -cos(f.ph), nx = cos(f.ph) * f.fs, ny = sin(f.ph) * f.fs;
+  const dv = (a, l) => [(bx * cos(a) + nx * sin(a)) * l, (by * cos(a) + ny * sin(a)) * l];
+  const shx = f.x + bx * 3, shy = f.y + by * 3;
+  for (const [l, k] of [[f.l1, f.k1], [f.l2, f.k2]]) {
+    const [kx, ky] = dv(PI - l, 1.9), [fx, fy] = dv(PI - l + k, 1.9);
+    seg(S, f.x, f.y, f.x + kx, f.y + ky, 0.6, col, 1);
+    seg(S, f.x + kx, f.y + ky, f.x + kx + fx, f.y + ky + fy, 0.5, col, 1);
+  }
+  seg(S, f.x, f.y, shx, shy, 0.8, col, 1);
+  for (const a of [f.a1, f.a2]) {
+    const [ax, ay] = dv(a, 2.7);
+    seg(S, shx, shy, f.hx === null ? shx + ax : f.hx, f.hx === null ? shy + ay : f.hy, 0.42, SKIN, 0);
+  }
+  seg(S, shx + bx * 1.45, shy + by * 1.45, shx + bx * 1.55, shy + by * 1.55, 0.75, SKIN, 0);
+}
+
+export function draw(display, params) {
+  const S = params.s;
+  if (!S || !S.started) return;
+  const { F, LT, CA, CI, AUD, ROW, POOL, P, wash, hz } = S, wc = P[0];
+  const hzA = hz * (0.7 - 0.22 * hz), halo = hz * hz * 0.18, hl = log(max(1, halo * 400));
+  const am = wc.map((v) => v * (0.12 + 0.12 * wash)), kc = 0.48 * 255 * wash, air = 9 * hz * wash;
+  const sp = S.sp.map((s, j) => [s.sx, s.sy, s.ux, s.uy, s.D, ...P[1 + j].map((v) => v / 255)]);
+  for (let y = 0; y < H; y++) {
+    // The ring below the net glows in the house light behind the crowd.
+    const pb = POOL[y], ring = 50 * sm(117, 104, y) * sm(100, 104, y) * wash + air;
+    for (let x = 0; x < W; x++) {
+      const i = y * W + x, q = i * 3, ci = CI[i] * kc;
+      let r = 4 + wc[0] * ring + CA[q] * wc[0] * ci, g = 4 + wc[1] * ring + CA[q + 1] * wc[1] * ci, b = 9 + wc[2] * ring + CA[q + 2] * wc[2] * ci;
+      let lr = 0, lg = 0, lb = 0;
+      const cv = CI[i] > 0.02 ? 0.9 * pb * sm(0, 0.3, CI[i]) * 255 : 0;
+      for (const s of sp) {
+        const vx = x - s[0], vy = y - s[1], al = vx * s[2] + vy * s[3], pp = abs(vx * s[3] - vy * s[2]), R = 0.8 + al * TA;
+        if (pp < R) {
+          // Lit air along the beam, and past the flyer a pool where it lands on the canvas.
+          const p = sm(R, R * 0.45, pp), k = ((p * (al > s[4] ? 0.8 : 1) * 1.3) / (1 + (al / 110) ** 2)) * hzA * 255, c = cv > 0 && al > s[4] ? cv * p : 0;
+          (lr += s[5] * p), (lg += s[6] * p), (lb += s[7] * p);
+          (r += s[5] * (k + CA[q] * c)), (g += s[6] * (k + CA[q + 1] * c)), (b += s[7] * (k + CA[q + 2] * c));
+        }
+        // Haze scatters a wide glow round each beam.
+        if (pp < (R + 9) * hl) {
+          const h = halo * exp(-pp / (R + 9)) * 255;
+          (r += s[5] * h), (g += s[6] * h), (b += s[7] * h);
+        }
+      }
+      (F[q] = r), (F[q + 1] = g), (F[q + 2] = b);
+      (LT[q] = min(1.25, lr * 1.2 + am[0])), (LT[q + 1] = min(1.25, lg * 1.2 + am[1])), (LT[q + 2] = min(1.25, lb * 1.2 + am[2]));
+    }
+  }
+  const t = S.t;
+  // The king pole, the ring of bulbs round the peak, which chase in a drum roll, and the bale ring.
+  seg(S, 32, 7, 32, 29, 0.7, STEEL, 0);
+  for (let j = 0; j < 22; j++) {
+    const a = (TAU * j) / 22, x = 32 + 20 * sin(a), y = 6.5 + 5 * cos(a), ch = (((j / 22 - t * 0.9) % 1) + 1) % 1 < 0.22 ? 1 : 0;
+    const v = (mix(0.75 + 0.15 * sin(t * 3 + j * 2.1), 0.3 + 0.9 * ch, S.drum) + 0.5 * S.pop) * (0.85 + 0.15 * cos(a));
+    glow(F, x, y, 3.2, [255, 196, 110], 0.42 * v);
+    const q = (round(y) * W + round(x)) * 3;
+    for (let k = 0; k < 3; k++) F[q + k] += [200, 160, 90][k] * v;
+  }
+  seg(S, 30, 5, 34, 5, 1.1, [60, 62, 70], 0);
+  // The rig: a truss under the peak, guy lines, the uprights, the board and the ladder.
+  seg(S, 3, PFY - 2, 61, PFY - 2, 0.4, STEEL, 0);
+  seg(S, 3, PFY, 61, PFY, 0.35, STEEL, 0);
+  for (let x = 5; x < 61; x += 4) seg(S, x, PFY - 2, x + 2, PFY, 0.25, STEEL, 0);
+  seg(S, 4, PFY - 2, 24, 7, 0.25, ROPE, 0);
+  seg(S, 60, PFY - 2, 40, 7, 0.25, ROPE, 0);
+  seg(S, 62, PFY - 2, 62, 103, 0.35, ROPE, 0);
+  seg(S, 0, PFY - 2, 0, BY, 0.35, ROPE, 0);
+  seg(S, 0, BY + 0.6, barAt(-S.rd.A)[0] + 0.4, BY + 0.6, 0.55, [190, 160, 120], 0);
+  seg(S, 1, BY + 1, 1, 97, 0.3, ROPE, 0);
+  seg(S, 4.2, BY + 1, 4.2, 97, 0.3, ROPE, 0);
+  for (let y = BY + 3; y < 97; y += 3) seg(S, 1, y, 4.2, y, 0.25, ROPE, 0);
+  // The safety net, a sagging diamond mesh, dented where a flyer is in it.
+  const nt = S.net;
+  for (let x = 0; x < W; x++) {
+    const dn = nt.s * exp(-(((x - nt.x) / 8) ** 2)), far = 94.5 + 1.2 * sin((PI * x) / 63) + 0.6 * dn, near = 103 + 2 * sin((PI * x) / 63) + dn;
+    for (let y = max(0, floor(far - 1)); y <= min(H - 1, ceil(near + 1)); y++) {
+      const v = (y - far) / (near - far), fa = x * 0.34 + v * 3, fb = x * 0.34 - v * 3;
+      let ln = v > -0.06 && v < 1.06 ? max(sm(0.3, 0.48, abs((fa % 1) - 0.5)), sm(0.3, 0.48, abs((((fb % 1) + 1) % 1) - 0.5))) : 0;
+      ln = max(ln, sm(0.9, 0.2, abs(y - far)), sm(0.9, 0.2, abs(y - near))) * 0.8;
+      const q = (y * W + x) * 3;
+      if (ln > 0) for (let j = 0; j < 3; j++) F[q + j] += ([205, 196, 176][j] * LT[q + j] - F[q + j]) * ln;
+    }
+  }
+  // The fly bar on its ropes, the catcher's cradle, the catcher and the flyers.
+  const [bx, by] = barAt(S.th), c = S.cp;
+  for (const [px, py, x, y] of [[PFX, PFY, bx, by], [PCX, PCY, c.bx, c.by]]) {
+    seg(S, px - 1.2, py, x - 1.2, y, 0.28, ROPE, 0);
+    seg(S, px + 1.2, py, x + 1.2, y, 0.28, ROPE, 0);
+    seg(S, x - 1.8, y, x + 1.8, y, 0.45, BAR, 0);
+  }
+  fig(S, c, P[6]);
+  for (const f of S.fl) fig(S, f, P[f.c]);
+  // The crowd in front of it all, a dark sea, each head rimmed by the light behind it.
+  for (let i = W; i < N; i++) {
+    const a = AUD[i];
+    if (a <= 0) continue;
+    const q = i * 3, k = ROW[i], rim = k > ROW[i - W] ? (1 - 0.2 * k) * a : 0;
+    for (let j = 0; j < 3; j++) F[q + j] += ((12 - 2.5 * k) * wc[j] - F[q + j]) * a + rim * (16 * wash * wc[j] + 60 * max(0, LT[q + j] - 0.3));
+  }
+  // Phones held up to film, and camera flashes.
+  for (const [x, y] of S.phones) if (x >= 0 && x < W - 1) for (let j = 0; j < 6; j++) F[(y * W + x) * 3 + j] += [70, 92, 130][j % 3];
+  for (const e of S.fx) glow(F, e.x, e.y, 2.2, [255, 250, 240], e.a * e.a * (1 - e.w));
+  for (let i = 0, o = 0; i < N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);
+}
diff --git a/incoming/pattern-study/patterns/pendulum-wave.js b/incoming/pattern-study/patterns/pendulum-wave.js
new file mode 100644
index 000000000..dfbed38c8
--- /dev/null
+++ b/incoming/pattern-study/patterns/pendulum-wave.js
@@ -0,0 +1,332 @@
+// ===== Patternflow pattern =====
+// Title:   Pendulum Wave
+// Family:  physics
+// Idea:    Seen straight down from above, a row of pendulums hangs from a beam down the middle of a lamplit table, each shorter one swinging once more per cycle than the last, so the row that leaves the release board as one straight line winds into a travelling snake and splits into three and two interleaved rows before it scatters and lines up again at the end of the cycle.
+// Author:  patternflow-lab
+// Date:    2026-10-24
+// SPDX-License-Identifier: CC-BY-SA-4.0
+// Lineage: original, pattern round 24, after the pendulum wave demonstration of the Harvard Natural Sciences Lecture Demonstrations, fifteen pendulums tuned to 51 to 65 swings a minute
+// Round:   24
+// ===============================
+// @matrix 64x128
+// @knobs Finish=0..1, Speed=0.2..3, Pendulums=16..24, Trails=0..1
+//
+// Knob 1: Finish. The bobs and the lamp over them: polished steel under a cool lamp on a walnut table at 0, brass at 0.25 and copper at 0.5 under a warm lamp, sea-green glass beads on a pale lab bench at 0.75, opening into a rainbow down the row at 1. Each glass bead focuses a spot of its own colour into its shadow.
+// Knob 2: Speed. The pace of time. At 2 a cycle takes 28 seconds and the longest pendulum swings 22 times in it, once every 1.27 seconds; at 0.2 it all runs ten times slower, at 3 half as fast again.
+// Knob 3: Pendulums. How many hang from the beam, 16 to 24, always filling the 128 rows. With more of them the bobs are smaller and the shortest swings 45 times a cycle against the longest's 22.
+// Knob 4: Trails. A long exposure in the pendulums' own time: at 0.06 each bob drags a short streak, and turned up each one paints more of its arc in fading light, until at 1 the comets run together into a ladder of glowing bars with the bobs racing along them.
+// Buttons: K1 tap catches every bob on the release board and lets them all go together, so the wave starts over from one straight line.
+
+const W = 64;
+const H = 128;
+const N = W * H;
+const { min, max, floor, ceil, round, cos, sqrt, exp, PI } = Math;
+const cl = (v, a, b) => (v < a ? a : v > b ? b : v);
+const mix = (a, b, t) => a + (b - a) * t;
+const sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));
+
+// The beam's centre line (it covers columns 30 and 31) and the swing.
+const BX = 31;
+const AMP = 22;
+// One cycle at Speed 2, in seconds, and how many times the longest
+// pendulum swings in it; each shorter one swings once more.
+const TC = 28;
+const N0 = 22;
+// The lamp, off the left edge, and the beam's height over the table, in
+// LEDs. The longest string is 13 LEDs, so its bob hangs 4 over the table.
+const [LX, LY, LZ] = [-34, 58, 120];
+const ZB = 17;
+const L0 = 13;
+const MAXN = 24;
+
+function hash(i, j) {
+  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;
+  h = Math.imul(h ^ (h >>> 13), 1274126177);
+  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;
+}
+function vn(x, y) {
+  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);
+  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);
+  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;
+}
+function hsv(h, s, v) {
+  const f = (n) => {
+    const k = (n + h * 6) % 6;
+    return v * (1 - s * max(0, min(k, 4 - k, 1)));
+  };
+  return [f(5) * 255, f(3) * 255, f(1) * 255];
+}
+
+// The lamp's colour, and the metal, at Finish 0, 1/4, 1/2 and 3/4 and on.
+const LAMPS = [
+  [184, 206, 248],
+  [255, 214, 160],
+  [255, 192, 142],
+  [238, 236, 226],
+  [238, 236, 226],
+];
+const METALS = [
+  [196, 208, 226],
+  [236, 172, 72],
+  [240, 122, 74],
+  [240, 122, 74],
+  [240, 122, 74],
+];
+const stop = (T, f) => {
+  const u = cl(f, 0, 1) * 4, i = min(3, floor(u));
+  return T[i].map((v, c) => mix(v, T[i + 1][c], u - i));
+};
+
+// The table: walnut boards running along the beam, and a pale epoxy bench.
+// The lamp's pool on it never moves, so it is worked out once.
+function build(P) {
+  const seams = [11, 37, 58];
+  const ax = 14 - LX, ay = 62 - LY, az = -LZ, al = sqrt(ax * ax + ay * ay + az * az);
+  let top = 0;
+  for (let i = 0; i < N; i++) {
+    const x = i & 63, y = i >> 6;
+    let pk = 0;
+    for (const s of seams) if (x >= s) pk++;
+    const sx = x + pk * 17.3, warp = 2.2 * vn(sx * 0.12, y * 0.018 + pk * 7);
+    const grain = vn(sx * 0.62 + warp, y * 0.04 + pk * 13), fine = vn(sx * 1.9, y * 0.22 + pk * 5);
+    const k = (0.74 + 0.36 * grain + 0.12 * fine) * (seams.includes(x) ? 0.6 : 1) * (0.88 + 0.24 * hash(pk, 99));
+    P.wood[i * 3] = 0.76 * k;
+    P.wood[i * 3 + 1] = 0.37 * k;
+    P.wood[i * 3 + 2] = 0.16 * k;
+    const b = 0.95 + 0.05 * hash(x, y + 300) + 0.05 * vn(x * 0.25, y * 0.25);
+    P.bench[i * 3] = 0.8 * b;
+    P.bench[i * 3 + 1] = 0.84 * b;
+    P.bench[i * 3 + 2] = 0.8 * b;
+    // Inverse square and the floor's slant, inside the shade's cone.
+    const vx = x + 0.5 - LX, vy = y + 0.5 - LY, d = sqrt(vx * vx + vy * vy + LZ * LZ);
+    const ca = (vx * ax + vy * ay + LZ * -az) / (d * al);
+    const p = (LZ / d) ** 3 * (0.25 + 0.75 * sm(0.83, 0.97, ca));
+    P.pool[i] = p;
+    top = max(top, p);
+    // The beam's shadow: it lies level, so its shadow is a straight band.
+    const bx = LX + (BX - LX) * (LZ / (LZ - ZB)), hw = LZ / (LZ - ZB);
+    P.beamD[i] = 0.5 * (1 - sm(hw - 0.9, hw + 0.9, Math.abs(x + 0.5 - bx)));
+  }
+  for (let i = 0; i < N; i++) P.pool[i] /= top;
+}
+
+export function setup(params) {
+  const F = (n) => new Float32Array(n);
+  params.s = {
+    wood: F(N * 3), bench: F(N * 3), pool: F(N), beamD: F(N), D: F(N), tr: F(N * 3), f: F(N * 3),
+    x: F(MAXN), prev: F(MAXN), from: F(MAXN), y: F(MAXN), z: F(MAXN), r: F(MAXN),
+    c: 0, n: 0, hold: 0.3, board: 1, fin: 0, tau: 0.05, first: true,
+  };
+  params.s.from.fill(BX + AMP);
+  build(params.s);
+}
+
+// Where each pendulum hangs, how high its bob is and how big it looks.
+function layout(P, n) {
+  P.n = n;
+  const s = H / n, rb = min(2.35, 0.31 * s);
+  for (let i = 0; i < MAXN; i++) {
+    P.y[i] = floor(s / 2 + s * i) + 0.5;
+    // A string's length goes as the square of its period.
+    P.z[i] = ZB - L0 * (N0 / (N0 + i)) ** 2;
+    P.r[i] = rb * (0.93 + 0.022 * P.z[i]);
+  }
+}
+
+// The colours the finish gives the lamp and each bob.
+function colours(P) {
+  const f = P.fin, n = P.n;
+  P.lamp = stop(LAMPS, f);
+  P.glass = sm(0.52, 0.74, f);
+  P.benchK = sm(0.5, 0.74, f);
+  // Brass and copper tint their own highlights; steel and glass do not.
+  P.tint = (0.15 + 0.7 * sm(0, 0.25, f)) * (1 - P.glass);
+  const m = stop(METALS, f), u = sm(0.75, 1, f);
+  P.col = [];
+  // Sea-green glass at 3/4, opening into a rainbow down the row at 1.
+  for (let i = 0; i < n; i++) {
+    const b = hsv(mix(0.42, 0.02 + (0.8 * i) / (n - 1), u), 0.82, 1);
+    P.col.push(m.map((v, c) => mix(v, b[c], P.glass)));
+  }
+}
+
+export function update(dt, input, params) {
+  if (!params.s) setup(params);
+  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];
+  const real = cl(dt || 0, 0, 0.1), d = (real * cl(k[1], 0.2, 3)) / 2;
+  P.fin = cl(k[0], 0, 1);
+  P.tau = 0.05 + 0.3 * cl(k[3], 0, 1) ** 1.6;
+  const n = cl(round(k[2]), 16, 24);
+  if (n !== P.n) layout(P, n);
+  colours(P);
+
+  // The button: a board comes in, every bob is caught against it, and all
+  // are let go at once.
+  if (input.btnPressed && input.btnPressed[0] && P.hold < 0) {
+    P.hold = 0;
+    P.from.set(P.x);
+  }
+  if (P.hold >= 0) {
+    P.hold += real;
+    const e = sm(0.05, 0.6, P.hold);
+    for (let i = 0; i < MAXN; i++) P.x[i] = mix(P.from[i], BX + AMP, e);
+    P.board = sm(0, 0.35, P.hold);
+    if (P.hold >= 0.95) (P.hold = -1), (P.c = 0);
+  } else {
+    P.c = (P.c + d) % TC;
+    for (let i = 0; i < MAXN; i++) P.x[i] = BX + AMP * cos((2 * PI * (N0 + i) * P.c) / TC);
+    P.board = max(0, P.board - real * 5);
+  }
+  if (P.first) (P.first = false), P.prev.set(P.x);
+
+  // The long exposure fades in the pendulums' own time, so a trail is as
+  // long on the table at any speed. Each bob paints the way it came this
+  // frame, older parts dimmer.
+  const tr = P.tr, fade = exp(-d / P.tau), span = max(d, 0.004);
+  for (let i = 0; i < tr.length; i++) tr[i] *= fade;
+  for (let i = 0; i < n; i++) {
+    const x0 = P.prev[i], x1 = P.x[i], y = P.y[i], rt = P.r[i] * 0.8, steps = max(1, ceil(Math.abs(x1 - x0) / 0.6));
+    const col = P.col[i].map((v, c) => (v * 0.55 + P.lamp[c] * 0.25) * 0.85);
+    for (let s = 1; s <= steps; s++) {
+      const t = s / steps, xs = mix(x0, x1, t), lev = exp((-(1 - t) * span) / P.tau);
+      for (let yy = floor(y - rt - 1); yy <= y + rt + 1; yy++)
+        for (let xx = floor(xs - rt - 1); xx <= xs + rt + 1; xx++) {
+          if (xx < 0 || xx >= W || yy < 0 || yy >= H) continue;
+          const dx = xx + 0.5 - xs, dy = yy + 0.5 - y, q = (dx * dx + dy * dy) / (rt * rt);
+          if (q >= 1.6) continue;
+          const a = lev * exp(-1.6 * q), o = (yy * W + xx) * 3;
+          for (let c = 0; c < 3; c++) tr[o + c] = max(tr[o + c], col[c] * a);
+        }
+    }
+  }
+  P.prev.set(P.x);
+}
+
+// Where the lamp throws a point at height z onto the table.
+const proj = (x, y, z) => {
+  const k = LZ / (LZ - z);
+  return [LX + (x - LX) * k, LY + (y - LY) * k];
+};
+
+// A shiny ball, sampled two by two inside each LED.
+function ball(F, cx, cy, cz, r, base, lamp, g, tint) {
+  const sc = lamp.map((v, c) => v * mix(1, (base[c] / 255) * 1.15, tint));
+  // The light leans twice as far as the lamp really stands, so the glint
+  // sits clearly on the lamp's side of a ball five LEDs across.
+  let lx = 2 * (LX - cx), ly = 2 * (LY - cy), lz = LZ - cz;
+  const ll = sqrt(lx * lx + ly * ly + lz * lz);
+  (lx /= ll), (ly /= ll), (lz /= ll);
+  let hx = lx, hy = ly, hz = lz + 1;
+  const hl = sqrt(hx * hx + hy * hy + hz * hz);
+  (hx /= hl), (hy /= hl), (hz /= hl);
+  const lxy = sqrt(lx * lx + ly * ly) || 1;
+  const col = [0, 0, 0];
+  for (let y = floor(cy - r - 1); y <= cy + r + 1; y++)
+    for (let x = floor(cx - r - 1); x <= cx + r + 1; x++) {
+      if (x < 0 || x >= W || y < 0 || y >= H) continue;
+      let cov = 0;
+      col[0] = col[1] = col[2] = 0;
+      for (let sy = 0; sy < 2; sy++)
+        for (let sx = 0; sx < 2; sx++) {
+          const dx = (x + 0.25 + 0.5 * sx - cx) / r, dy = (y + 0.25 + 0.5 * sy - cy) / r, q = dx * dx + dy * dy;
+          if (q >= 1) continue;
+          cov += 0.25;
+          const nz = sqrt(1 - q), diff = max(0, dx * lx + dy * ly + nz * lz), nh = max(0, dx * hx + dy * hy + nz * hz), spec = nh ** 18, sheen = nh ** 3;
+          // Metal: the lamp's side lit, the rim holding the dark table.
+          const rim = 0.4 + 0.6 * nz, back = max(0, -(dx * lx + dy * ly) / lxy) * sqrt(q);
+          for (let c = 0; c < 3; c++) {
+            const m = base[c] * (0.1 + 0.85 * diff * sqrt(diff)) * rim, gl = base[c] * (0.3 + 0.25 * diff + 0.9 * back);
+            col[c] += (mix(m, gl, g) + sc[c] * (spec * 1.6 + 0.12 * sheen)) * 0.25;
+          }
+        }
+      if (cov <= 0) continue;
+      const o = (y * W + x) * 3;
+      for (let c = 0; c < 3; c++) F[o + c] = F[o + c] * (1 - cov) + col[c];
+    }
+}
+
+export function draw(display, params) {
+  const P = params.s;
+  if (!P || !P.n) return;
+  const F = P.f, D = P.D, n = P.n, lamp = P.lamp, g = P.glass, bk = P.benchK;
+
+  // Shadows on the table: the beam, each string and each bob. A bob higher
+  // up throws its shadow further from the lamp and softer.
+  D.set(P.beamD);
+  const sh = [];
+  for (let i = 0; i < n; i++) {
+    const [sx, sy] = proj(P.x[i], P.y[i], P.z[i]), [px, py] = proj(BX, P.y[i], ZB);
+    sh.push([sx, sy]);
+    const rs = P.r[i] * 0.95, pen = 0.45 + 0.09 * P.z[i], dk = (0.9 - 0.02 * P.z[i]) * (1 - 0.15 * g);
+    for (let y = floor(sy - rs - pen - 1); y <= sy + rs + pen + 1; y++)
+      for (let x = floor(sx - rs - pen - 1); x <= sx + rs + pen + 1; x++) {
+        if (x < 0 || x >= W || y < 0 || y >= H) continue;
+        const dd = sqrt((x + 0.5 - sx) ** 2 + (y + 0.5 - sy) ** 2), v = dk * (1 - sm(rs - pen, rs + pen, dd)), j = y * W + x;
+        if (v > D[j]) D[j] = v;
+      }
+    const len = sqrt((sx - px) ** 2 + (sy - py) ** 2), m = ceil(len * 1.5);
+    for (let s = 0; s <= m; s++) {
+      const t = s / max(1, m), x = floor(mix(px, sx, t)), y = floor(mix(py, sy, t));
+      if (x >= 0 && x < W && y >= 0 && y < H && D[y * W + x] < 0.2) D[y * W + x] = 0.2;
+    }
+  }
+
+  // The table under the lamp.
+  const fl = 0.42;
+  for (let i = 0, o = 0; i < N; i++, o += 3) {
+    const e = (0.1 + 0.9 * P.pool[i] * (1 - D[i])) * fl;
+    for (let c = 0; c < 3; c++) F[o + c] = mix(P.wood[o + c], P.bench[o + c], bk) * lamp[c] * e + P.tr[o + c];
+  }
+  // A glass bead gathers the lamp into a spot of its colour in its shadow.
+  if (g > 0.01)
+    for (let i = 0; i < n; i++) {
+      const [sx, sy] = sh[i], rc = P.r[i] * 0.55, col = P.col[i];
+      for (let y = floor(sy - 3); y <= sy + 3; y++)
+        for (let x = floor(sx - 3); x <= sx + 3; x++) {
+          if (x < 0 || x >= W || y < 0 || y >= H) continue;
+          const q = ((x + 0.5 - sx) ** 2 + (y + 0.5 - sy) ** 2) / (rc * rc), a = g * 0.75 * exp(-q) * (0.4 + 0.6 * P.pool[y * W + x]), o = (y * W + x) * 3;
+          for (let c = 0; c < 3; c++) F[o + c] += col[c] * a;
+        }
+    }
+
+  // Strings: a fine line from the beam out to each bob, catching the lamp.
+  for (let i = 0; i < n; i++) {
+    const x1 = P.x[i], y = floor(P.y[i]), a0 = min(BX, x1), a1 = max(BX, x1);
+    for (let x = floor(a0); x < a1; x++) {
+      if (x < 0 || x >= W) continue;
+      const o = (y * W + x) * 3, a = 0.5 * cl(min(x + 1 - a0, a1 - x), 0, 1);
+      for (let c = 0; c < 3; c++) F[o + c] = mix(F[o + c], lamp[c] * 0.5, a);
+    }
+  }
+  // The bobs, the higher ones last.
+  for (let i = 0; i < n; i++) ball(F, P.x[i], P.y[i], P.z[i], P.r[i], P.col[i], lamp, g, P.tint);
+
+  // The release board, a strip of pale wood that holds the row straight.
+  if (P.board > 0.01) {
+    const bx = BX + AMP + 3.2;
+    for (let y = 0; y < H; y++)
+      for (let x = floor(bx); x < bx + 2 && x < W; x++) {
+        const o = (y * W + x) * 3, v = x === floor(bx) ? 0.85 : 0.55;
+        for (let c = 0; c < 3; c++) F[o + c] = mix(F[o + c], [224, 186, 132][c] * (lamp[c] / 255) * v, P.board);
+      }
+  }
+
+  // The beam over everything: brushed metal, its lamp side bright, with a
+  // clamp at every pivot.
+  for (let y = 0; y < H; y++) {
+    const grain = 0.92 + 0.08 * hash(y, 7);
+    for (let x = BX - 1; x <= BX; x++) {
+      const o = (y * W + x) * 3, v = (x < BX ? 0.5 : 0.24) * grain;
+      for (let c = 0; c < 3; c++) F[o + c] = lamp[c] * v;
+    }
+  }
+  for (let i = 0; i < n; i++) {
+    const y = floor(P.y[i]);
+    for (let x = BX - 1; x <= BX; x++) {
+      const o = (y * W + x) * 3, v = x < BX ? 0.78 : 0.4;
+      for (let c = 0; c < 3; c++) F[o + c] = lamp[c] * v;
+    }
+  }
+
+  for (let i = 0, o = 0; i < N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);
+}
diff --git a/incoming/pattern-study/patterns/pipe-organ.js b/incoming/pattern-study/patterns/pipe-organ.js
new file mode 100644
index 000000000..09a596a44
--- /dev/null
+++ b/incoming/pattern-study/patterns/pipe-organ.js
@@ -0,0 +1,455 @@
+// ===== Patternflow pattern =====
+// Title:   Pipe Organ
+// Family:  music
+// Idea:    The tin front pipes of a church organ stand in towers and flats while an unseen organist plays a chorale, and each pipe that speaks lights at its mouth with a standing wave shimmering up its body, the bass in the tall pipes and the tune in the small ones, as light from a rose window drifts across the case.
+// Author:  patternflow-lab
+// Date:    2026-10-24
+// SPDX-License-Identifier: CC-BY-SA-4.0
+// Lineage: original, pattern round 24, after the tower-and-flat fronts of North German Baroque organ cases and four-part chorale harmony
+// Round:   24
+// ===============================
+// @matrix 64x128
+// @knobs Stops=0..1, Tempo=0.2..3, Voices=1..6, Tremulant=0..1
+//
+// Knob 1: Stops. The registration. Flutes at 0 glow soft blue in two broad bands; principals in the middle speak silver-white and add the octave above each note; the reeds at 1 burn gold at the mouth and red up the body in six bands, with the octave below, the twelfth and the fifteenth speaking too.
+// Knob 2: Tempo. At 2 a chord takes a second, so a phrase of eight with its held last chord takes about nine; at 0.2 a chord holds for ten seconds and at 3 for two thirds of one.
+// Knob 3: Voices. How many parts the hands play over the pedal: at 1 the tune alone over the bass, at 3 the four-part chorale, and 4 to 6 add parts that fill out the chord.
+// Knob 4: Tremulant. The wind shakes. The shimmer in the speaking pipes throbs and wavers, and the two candles on the case flicker and gutter until the light on the whole lower case flickers with them.
+// Buttons: K1 tap is full organ: every pipe in the front speaks at once for about three seconds.
+
+const W = 64;
+const H = 128;
+const N = W * H;
+const { min, max, floor, round, sin, cos, abs, exp, sqrt, atan2, PI } = Math;
+const cl = (v, a, b) => (v < a ? a : v > b ? b : v);
+const sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));
+const mix = (a, b, t) => a + (b - a) * t;
+const rnd = () => Math.random();
+function hash(i, j) {
+  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;
+  h = Math.imul(h ^ (h >>> 13), 1274126177);
+  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;
+}
+
+// Pipe d sounds the d-th note of a major scale up from the longest pipe, and
+// an open pipe halves its length each octave.
+const STEP = [0, 2, 4, 5, 7, 9, 11];
+const len = (d) => 92 * 2 ** (-(12 * floor(d / 7) + STEP[d % 7]) / 12);
+// The front: the lowest note in the middle of the centre tower, then pairs,
+// the lower note left and the next one right, as the C and C sharp chests of
+// a real case split a scale between the two sides.
+const PIPES = [];
+function pair(d, x, w, top, mouth, base) {
+  const L = d ? (len(d) + len(d + 1)) / 2 : len(0);
+  const t = round(top >= 0 ? top : mouth - L);
+  const m = round(top >= 0 ? top + L : mouth);
+  const mh = w >= 5 ? 2 : 1;
+  PIPES[d] = { x, w, top: t, m, mh, f0: m + mh + 1, base };
+  if (d) PIPES[d + 1] = { x: W - x - w, w, top: t, m, mh, f0: m + mh + 1, base };
+}
+// The centre tower and the side towers hang from their crowns, so their
+// mouths step; the flats stand on equal feet, so their tops ramp.
+pair(0, 29, 6, 9, 0, 110);
+pair(1, 23, 5, 12, 0, 110);
+pair(3, 1, 4, 30, 0, 110);
+pair(5, 6, 4, 38, 0, 110);
+pair(7, 19, 3, -1, 102, 110);
+pair(9, 15, 3, -1, 102, 110);
+pair(11, 11, 3, -1, 102, 110);
+pair(13, 19, 3, -1, 44, 50);
+pair(15, 15, 3, -1, 44, 50);
+pair(17, 11, 3, -1, 44, 50);
+const NP = 19;
+
+// Eight-chord phrases on the scale's chords, I = 0 to vi = 5. The first one
+// always opens the piece.
+const PHRASES = [
+  [0, 4, 5, 3, 0, 1, 4, 0],
+  [0, 5, 1, 4, 0, 3, 4, 0],
+  [5, 3, 0, 4, 5, 1, 4, 4],
+  [0, 3, 0, 4, 5, 1, 4, 0],
+  [3, 4, 0, 5, 1, 0, 4, 0],
+  [0, 2, 5, 3, 1, 4, 4, 0],
+];
+// Voices in the order the knob adds them: soprano, bass, alto, tenor, then
+// three that fill the chord.
+const VORD = [0, 3, 1, 2, 4, 5, 6];
+
+// Surfaces, as how much of each light they give back.
+const TIN = [0.9, 0.95, 1];
+const WOOD = [0.42, 0.25, 0.15];
+const GILT = [1.3, 1, 0.42];
+const DARK = [0.07, 0.05, 0.045];
+const STONE = [0.9, 0.88, 0.84];
+// Grey daylight from the nave, the candles, and the lamp on the music desk.
+const DAY = [56, 56, 64];
+const CAN = [200, 126, 58];
+const LAMP = [255, 210, 140];
+// The rose window's glass.
+const RUBY = [230, 40, 60];
+const SAPH = [50, 90, 255];
+const AMBER = [255, 200, 80];
+const GREEN = [60, 200, 110];
+const ROSE = [RUBY, SAPH, GREEN, SAPH];
+// Stop colours: flute, principal, reed at the mouth and up the body, full organ.
+const FLUTE = [0.35, 0.62, 1];
+const PRIN = [0.84, 0.9, 1];
+const REED0 = [1, 0.77, 0.27];
+const REED1 = [1, 0.2, 0.08];
+const FULL = [1, 0.86, 0.58];
+
+// Round tin: a highlight a third of the way across and a dark far edge.
+function shade(p) {
+  return (0.2 + 0.5 * sin(PI * p) ** 0.7 + 0.55 * exp(-(((p - 0.36) / 0.14) ** 2))) * (1.1 - 0.4 * p);
+}
+
+// Carved and gilt pipe shades: pierced scrolls.
+function fret(x, y) {
+  return sin(x * 1.25 + 2 * sin(y * 0.52)) * sin(y * 0.9 + 1.6 * sin(x * 0.61));
+}
+
+function build(P) {
+  const A = P.A;
+  const put = (x, y, c, k = 1, a = 1) => {
+    if (x < 0 || x >= W || y < 0 || y >= H || a <= 0) return;
+    const o = (y * W + x) * 3;
+    for (let n = 0; n < 3; n++) A[o + n] = mix(A[o + n], c[n] * k, a);
+  };
+  // Left half and its mirror.
+  const two = (x, y, c, k, a) => (put(x, y, c, k, a), put(W - 1 - x, y, c, k, a));
+  const row = (x0, x1, y, c, k) => {
+    for (let x = x0; x <= x1; x++) two(x, y, c, k);
+  };
+  // The church wall: courses of ashlar.
+  for (let y = 0; y < H; y++)
+    for (let x = 0; x < W; x++) {
+      const cs = floor(y / 5), off = (cs & 1) * 4, mortar = y % 5 === 4 || (x + off) % 8 === 7;
+      put(x, y, STONE, mortar ? 0.14 : 0.27 + 0.1 * hash(floor((x + off) / 8), cs));
+    }
+  // The case, dark inside.
+  for (let y = 0; y < 114; y++) for (let x = 0; x < 32; x++) if (x > 21 || (x > 9 ? y >= 11 : y >= 22)) two(x, y, DARK, 1);
+  // Stiles between the towers and the flats.
+  for (const [x, y0] of [[0, 30], [10, 16], [22, 9]]) for (let y = y0; y < 110; y++) two(x, y, WOOD, 1.05 + 0.15 * sin(y * 0.8) * (y % 12 < 2 ? 1 : 0));
+  // The side towers' crowns, each with a gilt urn and a flame on top.
+  row(0, 10, 29, GILT, 0.9);
+  for (let y = 26; y <= 28; y++) row(0, 10, y, WOOD, 0.9);
+  for (const x of [2, 5, 8]) two(x, 27, GILT, 1.05);
+  row(0, 10, 25, GILT, 1.05);
+  row(0, 10, 24, WOOD, 0.7);
+  row(0, 10, 23, WOOD, 1);
+  row(0, 10, 22, GILT, 1.15);
+  const URN = [[21, 2], [20, 1], [19, 2], [18, 2], [17, 1], [16, 0], [15, 1], [14, 0]];
+  for (const [y, r] of URN) for (let x = 5 - r; x <= 5 + r; x++) two(x, y, GILT, 1.15 - 0.18 * (x - 5 + r));
+  // The upper flats' cornice and a scroll pediment.
+  row(10, 22, 15, GILT, 0.9);
+  for (let y = 12; y <= 14; y++) for (let x = 10; x <= 22; x++) two(x, y, WOOD, y === 13 && x % 2 ? 1.25 : 0.9);
+  row(10, 22, 11, GILT, 1.1);
+  row(12, 20, 10, GILT, 0.75);
+  for (const [x, y] of [[12, 9], [13, 9], [19, 9], [20, 9], [14, 8], [15, 8], [17, 8], [18, 8], [16, 7], [16, 6]]) two(x, y, GILT, 1.05);
+  // The centre tower's crown, with a carved crest over it.
+  row(22, 31, 8, GILT, 0.95);
+  for (let y = 5; y <= 7; y++) for (let x = 22; x <= 31; x++) two(x, y, x % 4 === 1 && y === 6 ? GILT : WOOD, x % 4 === 1 && y === 6 ? 1.1 : 0.9);
+  row(22, 31, 4, GILT, 1.1);
+  for (let x = 23; x <= 31; x++) {
+    const h = 4 * (1 - ((x - 31.5) / 9) ** 2);
+    for (let y = floor(4 - h); y < 4; y++) if (fret(x, y + 3) > -0.2 || x === 31) two(x, y, GILT, x === 31 ? 1.25 : 0.8 + 0.3 * fret(x, y));
+  }
+  // Pipe shades over every pipe that stops short of the carving above it.
+  const GAP = [5, 14, 18, 28, 35, 45, 49, 58];
+  for (const q of PIPES) {
+    const y0 = q.base === 50 ? 16 : q.x === 1 || q.x === 6 || q.x > 53 ? 30 : q.x > 22 && q.x < 41 ? 9 : 54;
+    for (let x = q.x - 1; x <= q.x + q.w; x++) {
+      const own = x >= q.x && x < q.x + q.w;
+      if (own || GAP.indexOf(x) >= 0)
+        for (let y = y0; y < q.top; y++) {
+          const v = fret(x, y);
+          if (own && y === q.top - 1) put(x, y, GILT, 1.05);
+          else if (v > -0.1) put(x, y, GILT, 0.55 + 0.5 * v);
+        }
+    }
+  }
+  // Under the lower flats the pipe shades of the upper ones, and the shelf they stand on.
+  row(10, 22, 50, GILT, 0.95);
+  row(10, 22, 51, WOOD, 1);
+  row(10, 22, 52, WOOD, 0.9);
+  row(10, 22, 53, WOOD, 0.55);
+  // The pipes: body, mouth with its lips, and the conical foot.
+  for (const q of PIPES) {
+    const { x, w, top, m, mh, f0, base } = q;
+    for (let y = top; y < m; y++) for (let j = 0; j < w; j++) put(x + j, y, TIN, shade((j + 0.5) / w) * (y === top ? 0.7 : 1));
+    for (let j = 0; j < w; j++) {
+      const inner = j > 0 && j < w - 1, s = shade((j + 0.5) / w);
+      if (inner) put(x + j, m - 1, TIN, s * 1.3);
+      for (let y = m; y < m + mh; y++) put(x + j, y, inner ? DARK : TIN, inner ? 0.8 : s);
+      put(x + j, m + mh, TIN, s * (inner ? 1.15 : 0.9));
+    }
+    if (w >= 5) for (let j = floor((w - 1) / 2); j <= floor(w / 2); j++) put(x + j, m - 2, TIN, 1.25);
+    const cx = x + w / 2;
+    for (let y = f0; y < base; y++) {
+      const hw = mix(w / 2, 0.7, (y - f0) / max(1, base - 1 - f0));
+      for (let xx = floor(cx - hw); xx <= cx + hw; xx++) {
+        const cov = cl(hw - abs(xx + 0.5 - cx) + 0.5, 0, 1);
+        put(xx, y, TIN, 0.9 * shade(cl((xx + 0.5 - cx + hw) / (2 * hw), 0, 1)), cov);
+      }
+    }
+  }
+  // The impost the pipes stand on.
+  for (let x = 0; x < W; x++) {
+    put(x, 110, GILT, 1);
+    put(x, 111, WOOD, x % 16 === 0 ? 0.6 : 1);
+    put(x, 112, WOOD, x % 16 === 0 ? 0.6 : 0.95);
+    put(x, 113, WOOD, 0.5);
+  }
+  // Candles on the stiles between the side towers and the flats.
+  for (let y = 98; y <= 101; y++) two(10, y, [0.95, 0.9, 0.8], 0.5);
+  for (let x = 9; x <= 11; x++) two(x, 102, GILT, 0.6);
+  // The console: the music desk with its lamp, and one manual.
+  for (let y = 114; y < H; y++) for (let x = 0; x < W; x++) put(x, y, WOOD, 0.7);
+  for (let y = 114; y <= 119; y++) for (let x = 16; x <= 47; x++) put(x, y, WOOD, 0.85);
+  for (let y = 115; y <= 119; y++)
+    for (let x = 21; x <= 42; x++) put(x, y, [0.95, 0.9, 0.76], y === 116 || y === 118 ? 0.62 : hash(x, y) < 0.13 ? 0.3 : 1);
+  for (let x = 27; x <= 36; x++) put(x, 114, GILT, 1.15);
+  for (let k = 0; k < 21; k++) {
+    for (let y = 121; y <= 125; y++) for (let x = 3 * k; x < 3 * k + 2; x++) put(x, y, [0.92, 0.88, 0.78], y === 125 ? 0.7 : 1);
+    const n = (k + 6) % 7;
+    if (k < 20 && n !== 2 && n !== 6) for (let y = 121; y <= 123; y++) put(3 * k + 2, y, DARK, 1), put(3 * k + 3, y, DARK, 1);
+  }
+  // Light: grey daylight from above, warm candlelight, the desk lamp.
+  for (let i = 0; i < N; i++) {
+    const x = (i & 63) + 0.5, y = (i >> 6) + 0.5;
+    P.day[i] = 0.45 + 0.55 * (1 - y / H) ** 1.3;
+    P.cL[i] = 0.85 / (1 + ((x - 10.5) ** 2 + (y - 96) ** 2) / 450);
+    P.cR[i] = 0.85 / (1 + ((x - 53.5) ** 2 + (y - 96) ** 2) / 450);
+    P.lamp[i] = y > 115 ? 1.1 / (1 + (x - 32) ** 2 / 90 + (y - 115) ** 2 / 40) : 0.45 / (1 + ((x - 32) ** 2 + (y - 114) ** 2) / 140);
+  }
+}
+
+// The nearest scale degree in lo..hi under cap whose note is in pcs, moving
+// from prev, sitting still costing `same`.
+function near(lo, hi, pcs, prev, same, cap) {
+  let best = -1;
+  let bs = 1e9;
+  for (let d = lo; d <= hi; d++) {
+    if (d >= cap || pcs.indexOf(d % 7) < 0) continue;
+    const j = abs(d - prev), s = j + (j === 0 ? same : 0) + (j > 4 ? 2 : 0) + rnd() * 0.9;
+    if (s < bs) (bs = s), (best = d);
+  }
+  return best < 0 ? (cap < 99 ? near(lo, hi, pcs, prev, same, 99) : prev) : best;
+}
+
+// The next chord of the chorale, voiced from the last one.
+function chord(P) {
+  if (P.pi >= P.ph.length) (P.ph = PHRASES[floor(rnd() * PHRASES.length)]), (P.pi = 0);
+  const r = P.ph[P.pi++], last = P.pi === P.ph.length, pen = P.pi === P.ph.length - 1;
+  const T = [r, (r + 2) % 7, (r + 4) % 7];
+  if (pen && r === 4 && rnd() < 0.6) T.push(3);
+  const [s0, a0, t0, b0] = P.prev;
+  const B = near(0, 7, [!last && !pen && rnd() < 0.3 ? T[1] : r], b0, 0, 99);
+  const S = near(11, 18, last && r === 0 ? [0] : T, s0, 1.6, 99);
+  const A = near(8, 14, T, a0, 0.4, S);
+  const miss = T.filter((c) => c !== S % 7 && c !== A % 7 && c !== B % 7);
+  const Tn = near(4, 11, miss.length ? miss : T, t0, 0.4, A);
+  const v = [S, A, Tn, B];
+  // Three more parts fill the chord: the bass an octave up, one in the middle, one high.
+  for (const goal of [B + 7, 10, 16]) {
+    let best = -1;
+    let bs = 1e9;
+    for (let d = 0; d < NP; d++) {
+      const s = abs(d - goal) + rnd() * 0.5;
+      if (T.indexOf(d % 7) >= 0 && v.indexOf(d) < 0 && s < bs) (bs = s), (best = d);
+    }
+    v.push(best);
+  }
+  P.prev = v;
+  return { v, dur: last ? 2 : 1, last, pass: [-1, -1, -1, -1], at: 0 };
+}
+
+// A part moving a third walks through the note between on the half beat.
+function passing(c, nx) {
+  if (c.last) return;
+  for (let k = 0; k < 4; k++) if (abs(nx.v[k] - c.v[k]) === 2 && rnd() < (k ? 0.4 : 0.6)) c.pass[k] = (c.v[k] + nx.v[k]) / 2;
+}
+
+export function setup(params) {
+  const F32 = (n) => new Float32Array(n);
+  const P = (params.s = {
+    A: F32(N * 3), F: F32(N * 3), day: F32(N), cL: F32(N), cR: F32(N), lamp: F32(N),
+    amp: F32(NP), tgt: F32(NP), on: F32(NP), chiff: F32(NP), keys: F32(NP),
+    t: 0, beat: 0, fullT: 99, full: 0, fl: 1, fr: 1, s: 0, tr: 0,
+    ph1: rnd() * 6.28, ph2: rnd() * 6.28, ph: PHRASES[0], pi: 0, prev: [14, 11, 7, 0, 7, 9, 16],
+  });
+  build(P);
+  P.cur = chord(P);
+  P.nx = chord(P);
+  passing(P.cur, P.nx);
+}
+
+export function update(dt, input, params) {
+  if (!params.s) setup(params);
+  const P = params.s;
+  const k = input.knobValues || [0, 2, 0, 0.06];
+  const d = cl(dt || 0, 0, 0.1);
+  const s = (P.s = cl(k[0], 0, 1));
+  const tempo = cl(k[1], 0.2, 3);
+  const nv = cl(round(k[2]), 1, 6);
+  const tr = (P.tr = cl(k[3], 0, 1));
+  const t = (P.t += d);
+  P.beat += (d * tempo) / 2;
+  while (P.beat >= P.cur.at + P.cur.dur) {
+    const at = P.cur.at + P.cur.dur;
+    P.cur = P.nx;
+    P.cur.at = at;
+    P.nx = chord(P);
+    passing(P.cur, P.nx);
+  }
+  if (input.btnPressed && input.btnPressed[0]) P.fullT = 0;
+  P.fullT += d;
+  P.full = P.fullT < 2.8 ? sm(0, 0.06, P.fullT) : 1 - sm(2.8, 3.6, P.fullT);
+
+  // Which pipes speak: each part's note, the octave above from the
+  // principals on, and with the reeds the octave below, the twelfth and the
+  // fifteenth.
+  const c = P.cur, pos = P.beat - c.at, r4 = 0.8 * sm(0.3, 0.55, s), r2 = 0.75 * sm(0.7, 0.92, s);
+  P.tgt.fill(0);
+  P.keys.fill(0);
+  if (!(c.last && pos > c.dur - 0.22))
+    for (let n = 0; n <= nv; n++) {
+      const v = VORD[n], g = v < 4 && c.pass[v] >= 0 && pos >= c.dur / 2 ? c.pass[v] : c.v[v];
+      if (g < 0) continue;
+      P.tgt[g] = 1;
+      if (v !== 3) P.keys[g] = 1;
+      if (g + 7 < NP) P.tgt[g + 7] = max(P.tgt[g + 7], r4);
+      if (g >= 7) P.tgt[g - 7] = max(P.tgt[g - 7], r2);
+      if (g + 11 < NP) P.tgt[g + 11] = max(P.tgt[g + 11], r2);
+      if (g + 14 < NP) P.tgt[g + 14] = max(P.tgt[g + 14], r2);
+    }
+  for (let i = 0; i < NP; i++) {
+    const g = max(P.tgt[i], 0.9 * P.full);
+    if (g > 0.5 && P.on[i] < 0.5) P.chiff[i] = 1;
+    P.on[i] = g;
+    P.amp[i] += (g - P.amp[i]) * (1 - exp(-d / (g > P.amp[i] ? 0.035 : 0.14)));
+    P.chiff[i] *= exp(-d / 0.18);
+  }
+  // Candles in the draught: as the tremulant shakes the wind they flicker
+  // harder and burn lower.
+  const fa = 0.05 + tr;
+  const fl = (ph) => 1 - 0.4 * fa + fa * (0.6 * sin(t * 7.1 + ph) + 0.45 * sin(t * 11.9 + 2 * ph) + 0.35 * sin(t * 4.3 + 3 * ph) * sin(t * 17.3));
+  P.fl = cl(fl(0), 0.1, 2);
+  P.fr = cl(fl(2.1), 0.1, 2);
+}
+
+// A stop's colour, u from the mouth (0) to the top (1).
+function stopCol(out, s, u, full) {
+  for (let n = 0; n < 3; n++) {
+    const v = s < 0.5 ? mix(FLUTE[n], PRIN[n], s * 2) : mix(PRIN[n], mix(REED0[n], REED1[n], min(1, u * 1.6)), s * 2 - 1);
+    out[n] = mix(v, FULL[n], full);
+  }
+}
+
+export function draw(display, params) {
+  const P = params.s;
+  if (!P) return;
+  const { A, F, day, cL, cR, lamp, t } = P;
+  // The case in daylight, candlelight and lamplight.
+  for (let i = 0, o = 0; i < N; i++, o += 3) {
+    const dl = day[i], cn = cL[i] * P.fl + cR[i] * P.fr, lp = lamp[i];
+    for (let n = 0; n < 3; n++) F[o + n] = A[o + n] * (DAY[n] * dl + CAN[n] * cn + LAMP[n] * lp);
+  }
+  // The rose window's light, cast long and slow across the case.
+  const px = 32 + 17 * sin(t * 0.05 + P.ph1), py = 60 + 34 * sin(t * 0.031 + P.ph2), RX = 15, RY = 24;
+  const I0 = 0.65 * (0.8 + 0.2 * sin(t * 0.23 + P.ph1));
+  for (let y = max(0, floor(py - RY)); y <= min(H - 1, py + RY); y++)
+    for (let x = max(0, floor(px - RX)); x <= min(W - 1, px + RX); x++) {
+      const dx = (x + 0.5 - px) / RX, dy = (y + 0.5 - py) / RY, r = sqrt(dx * dx + dy * dy);
+      if (r >= 1) continue;
+      const a = atan2(dy, dx) / (2 * PI) + 0.5;
+      let c, lead;
+      if (r < 0.2) (c = AMBER), (lead = r > 0.15);
+      else if (r < 0.5) {
+        const q = a * 8;
+        (c = floor(q) & 1 ? RUBY : SAPH), (lead = q - floor(q) < 0.1 || r < 0.24);
+      } else {
+        const q = a * 16;
+        (c = ROSE[floor(q) & 3]), (lead = q - floor(q) < 0.08 || r < 0.54);
+      }
+      const kk = I0 * (lead ? 0.45 : 1) * sm(1, 0.82, r), o = (y * W + x) * 3;
+      for (let n = 0; n < 3; n++) F[o + n] += A[o + n] * c[n] * kk;
+    }
+  // The pipes that speak: the mouth lights and a standing wave shimmers up
+  // the body, its bands creeping upward and wavering with the tremulant.
+  const s = P.s, tr = P.tr, gain = 240 * (0.8 + 0.4 * s), bands = 2 + 4 * s, floor0 = 0.45 - 0.25 * s;
+  // Many pipes at once light the case less each, or the chord drowns in its own light.
+  let ns = 0;
+  for (let i = 0; i < NP; i++) ns += P.amp[i];
+  const spread = (1 - 0.6 * P.full) / (1 + 0.12 * max(0, ns - 2));
+  const trem = sin(2 * PI * 5.4 * t), tm = 1 - 0.9 * tr * (0.5 + 0.5 * trem), wob = 0.3 * tr * trem;
+  const col = [0, 0, 0];
+  for (let i = 0; i < NP; i++) {
+    const am = P.amp[i];
+    if (am < 0.004) continue;
+    const { x, w, top, m, mh, base } = PIPES[i];
+    const a = am * gain * tm, span = m - top, osc = 0.7 + 0.3 * cos(t * (5 + 0.6 * i) + i * 1.7);
+    const bm = max(bands, 5 * P.full), creep = 0.3 * t + i * 0.37;
+    // Its light on the polished tin and the gilt round it.
+    stopCol(col, s, 0.4, P.full);
+    const kb = am * tm * (0.22 + 0.5 * s) * spread * 255;
+    for (let y = max(0, top - 10); y < min(H, base + 6); y++) {
+      const ly = kb * (y < top ? exp((y - top) / 4) : y > m ? exp((m - y) / 7) : 1);
+      for (let xx = max(0, x - 16); xx < min(W, x + w + 16); xx++) {
+        const dd = xx < x ? x - xx : xx >= x + w ? xx - x - w + 1 : 0, lb = ly / (1 + dd * dd * 0.05), o = (y * W + xx) * 3;
+        for (let n = 0; n < 3; n++) F[o + n] += A[o + n] * col[n] * lb;
+      }
+    }
+    for (let y = top; y < m; y++) {
+      const u = (m - 0.5 - y) / span;
+      const bv = abs(cos(PI * (bm * u - creep + wob))) ** 2.5 * osc;
+      const g = a * (0.75 + 0.25 * exp(-3 * u)) * (floor0 + (1 - floor0) * bv);
+      stopCol(col, s, u, P.full);
+      for (let j = -2; j < w + 2; j++) {
+        const xx = x + j;
+        if (xx < 0 || xx >= W) continue;
+        const cr = j < 0 || j >= w ? (j === -1 || j === w ? 0.2 : 0.07) : 0.6 + 0.4 * sin((PI * (j + 0.5)) / w);
+        const o = (y * W + xx) * 3;
+        for (let n = 0; n < 3; n++) F[o + n] += col[n] * g * cr;
+      }
+    }
+    // The mouth: hot in the slot, flaring as the pipe speaks, and a glow round it.
+    stopCol(col, s, 0, P.full);
+    const cx = x + w / 2, cy = m + mh / 2, hot = a * (0.8 + 1.1 * P.chiff[i]);
+    for (let y = m - 4; y <= m + mh + 4; y++)
+      for (let xx = x - 3; xx < x + w + 3; xx++) {
+        if (xx < 0 || xx >= W) continue;
+        const e = ((xx + 0.5 - cx) / (w / 2 + 1.2)) ** 2 + ((y + 0.5 - cy) / 2.6) ** 2;
+        if (e > 3) continue;
+        const slot = y >= m && y < m + mh && xx > x && xx < x + w - 1;
+        const o = (y * W + xx) * 3, k = slot ? hot * 2 : hot * 0.5 * exp(-e * 1.3);
+        for (let n = 0; n < 3; n++) F[o + n] += mix(col[n], 1, slot ? 0.7 : 0.2) * k;
+      }
+  }
+  // The candle flames, each with a halo in the air round it.
+  for (const [x, f] of [[10, P.fl], [53, P.fr]]) {
+    for (let y = 92; y <= 100; y++)
+      for (let xx = x - 3; xx <= x + 3; xx++) {
+        const e = (xx - x) ** 2 + ((y - 96.5) * 0.8) ** 2, o = (y * W + xx) * 3;
+        for (let n = 0; n < 3; n++) F[o + n] += CAN[n] * 0.45 * f * exp(-e / 3);
+      }
+    for (const [y, c, k] of [[97, [255, 250, 225], 1], [96, [255, 236, 160], min(1, f)], [95, [255, 190, 80], cl(f, 0, 1)], [94, [255, 120, 30], cl(f - 0.8, 0, 1)]]) {
+      const o = (y * W + x) * 3;
+      for (let n = 0; n < 3; n++) F[o + n] = max(F[o + n], c[n] * k);
+    }
+  }
+  // Keys held down on the manual.
+  for (let i = 0; i < NP; i++)
+    if (P.keys[i] > 0)
+      for (let y = 121; y <= 125; y++)
+        for (let x = 3 * (i + 1); x < 3 * (i + 1) + 2; x++) {
+          const o = (y * W + x) * 3;
+          for (let n = 0; n < 3; n++) F[o + n] *= y === 125 ? 0.35 : 0.6;
+        }
+  for (let i = 0, o = 0; i < N; i++, o += 3) display.setPixel(i & 63, i >> 6, knee(F[o]), knee(F[o + 1]), knee(F[o + 2]));
+}
+
+// Light past 180 rolls off towards 255, so a speaking pipe keeps its colour.
+function knee(v) {
+  return (v < 180 ? v : 255 - 75 * exp(-(v - 180) / 75)) | 0;
+}
diff --git a/incoming/pattern-study/patterns/potters-wheel.js b/incoming/pattern-study/patterns/potters-wheel.js
new file mode 100644
index 000000000..a6eb6f42c
--- /dev/null
+++ b/incoming/pattern-study/patterns/potters-wheel.js
@@ -0,0 +1,469 @@
+// ===== Patternflow pattern =====
+// Title:   Potter's Wheel
+// Family:  pottery
+// Idea:    At night under one warm lamp a potter centres wet clay on the spinning wheel, opens it and pulls the wall up into a tall pot whose throwing rings catch the light, wires it off and sets it on the shelves, where the earlier pots dry from dark to bone-pale.
+// Author:  patternflow-lab
+// Date:    2026-10-24
+// SPDX-License-Identifier: CC-BY-SA-4.0
+// Lineage: original, pattern round 24, after throwing a pot on the potter's wheel
+// Round:   24
+// ===============================
+// @matrix 64x128
+// @knobs Clay=0..1, Speed=0.2..3, Pots=6..20, Lamp=0..1
+//
+// Knob 1: Clay. The clay body: terracotta at 0, then buff stoneware, grey porcelain and black clay at 1. The pot, the slip in the splash pan, the pots drying on the shelves and the dust on the wall all take it.
+// Knob 2: Speed. At 2 a throw takes about thirteen seconds from the slapped lump to the pot set on the shelf, and the wheel turns about once a second; at 0.2 it all runs ten times slower.
+// Knob 3: Pots. How many earlier pieces stand drying on the rack's three shelves, from six to twenty. The oldest are bone-dry, and each new pot takes the place of the oldest, which goes to the kiln.
+// Knob 4: Lamp. Where the lamp hangs, from left of the wheel at 0 to right of it at 1. The lit side of the pot, the highlight down its throwing rings, its shadow on the wall and the light on the shelves move with it.
+// Buttons: K1 tap makes the wall slump, and the potter balls the clay up and centres it again.
+
+const W = 64, H = 128, N = W * H;
+const { min, max, floor, ceil, round, sin, cos, sqrt, exp, asin, abs, PI } = Math;
+const TAU = 2 * PI;
+const cl = (v, a, b) => (v < a ? a : v > b ? b : v);
+const mix = (a, b, t) => a + (b - a) * t;
+const sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));
+const rnd = () => Math.random();
+const F32 = (n) => new Float32Array(n);
+function hash(i, j) {
+  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;
+  h = Math.imul(h ^ (h >>> 13), 1274126177);
+  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;
+}
+
+// The wheel head's centre and radius, the splash pan round it, and the tilt
+// of the view: a circle r across on the wheel shows as an ellipse E * r tall.
+const [CX, BY, E, WR, PR] = [32, 111, 0.21, 21, 34];
+const PY = BY + 2.5;
+// Three shelf boards with seven slots each, the order the slots fill, and
+// the size a pot stands at on the shelf against its size on the wheel.
+const SHELF = [26, 53, 80];
+const SLOT = [];
+for (const sy of SHELF) for (let i = 0; i < 7; i++) SLOT.push([4.6 + i * 9.13, sy]);
+const ORDER = [1, 5, 8, 12, 14, 20, 3, 9, 11, 0, 6, 7, 13, 15, 19, 2, 4, 10, 16, 18, 17];
+const SHS = 0.27;
+
+// Each clay at every stage of drying, from thrown and wet to bone-dry.
+const CLAY = [
+  [[255, 112, 56], [196, 96, 58], [238, 158, 108]],
+  [[236, 170, 104], [190, 148, 100], [244, 222, 182]],
+  [[194, 198, 206], [184, 184, 182], [250, 248, 240]],
+  [[110, 96, 96], [86, 80, 78], [156, 148, 142]],
+];
+const SKIN = [150, 98, 76], WALL = [84, 62, 50], WOOD = [132, 90, 58], METAL = [150, 152, 156], PLASTIC = [76, 80, 90], SLEEVE = [58, 66, 86], SHINE = [255, 232, 196];
+
+// Pot shapes as a height and the radius at keys up the wall: cylinder, bottle,
+// vase with a belly and a flared lip, jar and trumpet vase on the wheel, and
+// bowls and cups from earlier in the evening on the shelves.
+const SHAPES = [
+  (j) => [76 + 8 * j, [[0, 10.5], [0.45, 10.2 + j], [0.9, 9.6], [1, 11]]],
+  (j) => [84 + 8 * j, [[0, 11], [0.3, 14.5], [0.7, 4.2], [0.93, 4], [1, 5.6]]],
+  (j) => [82 + 8 * j, [[0, 8], [0.42, 15], [0.8, 5], [0.9, 5.4], [1, 9.5]]],
+  (j) => [76 + 6 * j, [[0, 8.5], [0.55, 15.5], [0.9, 9], [1, 10.5]]],
+  (j) => [86 + 6 * j, [[0, 9.5], [0.2, 9.8], [0.62, 5.5], [1, 14]]],
+  (j) => [26 + 6 * j, [[0, 7], [0.45, 14], [1, 19]]],
+  (j) => [40 + 6 * j, [[0, 9], [0.5, 11.5], [0.85, 10.5], [1, 12]]],
+];
+function key(K, v) {
+  let i = 0;
+  while (i < K.length - 2 && v > K[i + 1][0]) i++;
+  return mix(K[i][1], K[i + 1][1], sm(K[i][0], K[i + 1][0], v));
+}
+// A radius looked up along a wall kept one entry per row.
+const at = (pr, h, Hp, i) => ((h = cl(h, 0, Hp)), (i = h | 0), pr[i] + (pr[i + 1] - pr[i]) * (h - i));
+function newSpec(not, all) {
+  let type;
+  // The first throw of the night is always one of the three tallest.
+  do type = floor(rnd() * (all ? 7 : 5));
+  while (type === not || (not < -1 && type % 3 === 0));
+  const [Hf, K0] = SHAPES[type](rnd()), g = 0.92 + 0.16 * rnd(), K = K0.map(([v, r]) => [v, r * g]);
+  const pr = F32(ceil(Hf) + 3);
+  for (let h = 0; h < pr.length; h++) pr[h] = key(K, min(1, h / Hf)) + 1.4 * exp(-h / 2.2);
+  // Where the hands shape it: the belly, then the neck above.
+  let vb = 0.5, vn = 0.85, rb = 0, rn = 99;
+  for (const [v, r] of K) if (v > 0.1 && v < 0.85 && r > rb) (rb = r), (vb = v);
+  for (const [v, r] of K) if (v > vb && v < 1 && r < rn) (rn = r), (vn = v);
+  return { type, Hf, pr, rim: K[K.length - 1][1], vb, vn };
+}
+
+// The steps of a throw, how long each takes at Speed 2, and how fast the
+// wheel turns through it (turns a second): slapped down, centred, opened,
+// three pulls, shaped, shown, wired off, lifted to the shelf, and the slump
+// and the balling up after a K1 tap.
+const DUR = [0.45, 0.9, 0.5, 4.5, 2.6, 1.6, 0.9, 1.8, 1.2, 0.9];
+const SPIN = [0.4, 1.3, 1.1, 0.95, 0.75, 0.65, 0.3, 0, 0.9, 1];
+// The cylinder after each pull, and its wall at the rim.
+const RC = [12.5, 11.3, 10.5, 9.9], WALL_T = [4, 2.7, 2.1, 1.7];
+const cyl = (k, h) => RC[k] - 0.012 * h + 1.4 * exp(-h / 2.2);
+const dome = (v, r) => r * sqrt(max(0, 1 - v ** 2.4)) + 1.2 * exp(-v * 8);
+
+export function setup(params) {
+  const P = (params.s = {
+    ph: 0, pt: 0, rot: 0, w: 0.4, H: 11, ri: 0, wa: 0, wt: 0, yo: 0, sH: 11, sri: 0, n: 6, LX: 12, clay: 0,
+    pr: F32(128), snap: F32(128), f: F32(N * 3), bg: F32(N * 3),
+    hd: null, hs: null, g: null, wire: -1, pieces: [], sp: [], dr: [], free: 0, bgKey: -1,
+  });
+  P.spec = newSpec(-2);
+  // The pieces already on the shelves, newest first.
+  for (let i = 0; i < 21; i++) P.pieces.push({ slot: ORDER[i], spec: newSpec(i ? P.pieces[i - 1].spec.type : -1, 1), dry: min(1, 0.1 + i * 0.17) });
+  // Old slip spattered in the pan.
+  for (let i = 0; i < 60; i++) {
+    const a = rnd() * TAU, r = 0.66 + 0.3 * rnd();
+    P.sp.push(i < 44 ? [CX + PR * r * sin(a), PY + PR * E * r * cos(a), rnd() < 0.3 ? 2 : 1, 0.6 + 0.5 * rnd()] : [2 + rnd() * 60, PY + 8 + rnd() * 4, 1, 0.5 + 0.4 * rnd()]);
+  }
+  shape(P, 0);
+}
+
+function go(P, ph) {
+  // The oldest piece on show goes to the kiln and the new pot takes its place.
+  if (ph === 7) P.free = P.pieces.splice(min(P.n, P.pieces.length) - 1, 1)[0].slot;
+  if (ph === 0 && P.ph === 7) P.pieces.unshift({ slot: P.free, spec: P.spec, dry: 0 }), (P.spec = newSpec(P.spec.type));
+  P.snap.set(P.pr);
+  Object.assign(P, { ph, pt: 0, sH: P.H, sri: P.ri });
+}
+
+function fill(P, Hn, f) {
+  P.H = Hn;
+  for (let h = 0, n = min(126, ceil(Hn) + 2); h <= n; h++) P.pr[h] = max(0, f(min(h, Hn)));
+}
+const snapR = (P, v) => at(P.snap, v * P.sH, P.sH);
+const offset = (P, h) => P.wa * sin(P.rot) + P.wt * (cl(h / P.H, 0, 1) ** 1.5) * sin(P.rot + 0.8);
+
+// The clay's wall for this moment of the throw, and where the hands are.
+function shape(P, p) {
+  const sp = P.spec;
+  let hand = null;
+  Object.assign(P, { wa: 0, wt: 0.2, yo: 0, g: null, wire: -1, ring: 0.07 });
+  switch (P.ph) {
+    case 0: {
+      // Slapped down from the hands, squashing as it lands.
+      const sq = p > 0.6 ? 1 - 0.3 * sin((PI * (p - 0.6)) / 0.4) : 1, r = 10.5 / sqrt(sq), Hn = 11 * sq;
+      P.yo = p < 0.6 ? -56 * (1 - (p / 0.6) ** 2) : 0;
+      fill(P, Hn, (h) => dome(h / Hn, r));
+      (P.ri = 0), (P.wa = 0.8), (P.ring = 0.04);
+      hand = [5, -0.3, 0];
+      break;
+    }
+    case 1: {
+      // Centred: coned up and pressed down again while the wobble dies.
+      const Hn = 11 + 10 * sin(PI * sm(0.1, 0.9, p)), r = 10.5 * sqrt(11 / Hn);
+      fill(P, Hn, (h) => dome(h / Hn, r));
+      (P.ri = 0), (P.wa = 2.6 * (1 - sm(0, 0.8, p))), (P.ring = 0.05);
+      hand = [Hn * 0.42, -0.5 + 0.4 * sin(p * 20), 0];
+      break;
+    }
+    case 2: {
+      const q = sm(0, 1, p), Hn = mix(P.sH, 13, q);
+      fill(P, Hn, (h) => mix(snapR(P, h / Hn), cyl(0, h), q));
+      (P.ri = (RC[0] - WALL_T[0]) * sm(0.15, 1, p)), (P.ring = 0.07);
+      hand = [Hn - 1.5, -0.2, 0];
+      break;
+    }
+    case 3: {
+      // Three pulls. The hands squeeze the wall from the base to the rim and
+      // a roll of clay rides up ahead of them.
+      const k = min(2, floor(P.pt / 1.5)), a = (P.pt - k * 1.5) / 1.2, Hp = sp.Hf * 0.93;
+      const HS = [13, mix(13, Hp, 0.55), mix(13, Hp, 0.82), Hp];
+      if (a <= 1) {
+        const Hn = mix(HS[k], HS[k + 1], sm(0, 1, a)), hh = Hn * min(1, a * 1.04) * 0.95, roll = 1.3 * (1 - sm(0.9, 1, a));
+        fill(P, Hn, (h) => mix(cyl(k + 1, h), cyl(k, h), sm(hh - 1, hh + 2.5, h)) + roll * exp(-(((h - hh - 2.6) / 2.2) ** 2)) - 0.8 * exp(-(((h - hh) / 1.4) ** 2)));
+        P.ri = mix(RC[k] - WALL_T[k], RC[k + 1] - WALL_T[k + 1], sm(0.85, 1, a));
+        hand = [hh, -0.3, 0];
+      } else {
+        const Hn = HS[k + 1], b = (a - 1) / 0.25;
+        fill(P, Hn, (h) => cyl(k + 1, h));
+        P.ri = RC[k + 1] - WALL_T[k + 1];
+        hand = [mix(Hn * 0.95, 3, sm(0, 1, b)), 1.5 * sin(PI * b), 0];
+      }
+      break;
+    }
+    case 4: {
+      // Shaped: the belly pushed out from inside, then the neck collared in.
+      const q = sm(0, 1, p), Hn = mix(P.sH, sp.Hf, q);
+      fill(P, Hn, (h) => mix(snapR(P, h / Hn), at(sp.pr, (h / Hn) * sp.Hf, sp.Hf), q));
+      P.ri = mix(P.sri, sp.rim - 1.4, q);
+      hand = [Hn * mix(sp.vb, sp.vn, sm(0.4, 0.75, p)), -0.2, 0];
+      break;
+    }
+    case 8: {
+      // Slumped: the wall sinks, bellies and flops round as the wheel turns.
+      const q = sm(0, 1, p), Hn = mix(P.sH, max(12, P.sH * 0.3), q ** 0.8);
+      fill(P, Hn, (h) => mix(snapR(P, h / Hn), snapR(P, (h / Hn) * 0.6) * (1 + 0.7 * (h / Hn) ** 2) + (3 * h) / Hn, q));
+      P.ri = P.sri > 0 ? max(0, at(P.pr, Hn, Hn) - 1.8) : 0;
+      (P.wt = 6 * sin(PI * min(1, p * 1.3)) + 2), (P.wa = 1);
+      hand = [Hn * 0.5, 4 + 20 * sm(0, 0.3, p), 10 * sm(0, 0.3, p)];
+      break;
+    }
+    case 9: {
+      const q = sm(0, 1, p), Hn = mix(P.sH, 11, q);
+      fill(P, Hn, (h) => mix(snapR(P, h / Hn), dome(h / Hn, 10.5), q));
+      (P.ri = P.sri * (1 - q)), (P.wa = 2.6), (P.wt = 2 * (1 - q)), (P.ring = 0.04);
+      hand = [Hn * 0.45, mix(6, -0.5, sm(0, 0.5, p)), 0];
+      break;
+    }
+    default: {
+      fill(P, sp.Hf, (h) => at(sp.pr, h, sp.Hf));
+      P.ri = sp.rim - 1.4;
+      // Shown: the hands come away.
+      if (P.ph === 5) hand = [sp.Hf * sp.vn, 2 + 30 * sm(0, 0.6, p), 22 * sm(0, 0.6, p)];
+      if (P.ph === 6) {
+        // Wired off: the hands come in to the wheel and draw the wire under.
+        const a = sm(0, 0.25, p), q = sm(0.25, 1, p), y = mix(BY + 20, BY + E * P.pr[0] * (1 - 2 * q) + 0.5, a);
+        P.wire = a < 1 ? -1 : q;
+        P.hd = [CX - mix(40, 25, a), y, CX + mix(40, 25, a), y];
+        return;
+      }
+      if (P.ph === 7) {
+        // Lifted, then carried back to its slot on the shelf.
+        const q1 = sm(0, 0.3, p), q2 = sm(0.3, 1, p), [sx, sy] = SLOT[P.free], s = mix(1, SHS, q2 ** 0.6);
+        P.g = [mix(CX, sx, q2), mix(BY - 9 * q1, sy + 0.5, q2) - 14 * sin(PI * q2), s];
+        if (q2 < 0.5) {
+          const r = sp.pr[3] * s, y = P.g[1] - 3 * s + 40 * sm(0.2, 0.5, q2);
+          P.hd = [P.g[0] - r, y, P.g[0] + r, y];
+        } else P.hd = null;
+        return;
+      }
+    }
+  }
+  if (hand) {
+    const [h, gap, dy] = hand, r = at(P.pr, h, P.H), o = offset(P, h), y = BY + P.yo - h + dy;
+    P.hd = [CX + o - r - gap, y, CX + o + r + gap, y];
+  } else P.hd = null;
+}
+
+export function update(dt, input, params) {
+  if (!params.s) setup(params);
+  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06];
+  const d = (cl(dt || 0, 0, 0.1) * cl(k[1], 0.2, 3)) / 2;
+  P.clay = cl(k[0], 0, 1);
+  P.n = round(cl(k[2], 6, 20));
+  P.LX = mix(9, 55, cl(k[3], 0, 1));
+  if (input.btnPressed && input.btnPressed[0] && P.ph >= 1 && P.ph <= 5) go(P, 8);
+  if ((P.pt += d) >= DUR[P.ph]) go(P, [1, 2, 3, 4, 5, 6, 7, 0, 9, 1][P.ph]);
+  P.w += (SPIN[P.ph] - P.w) * min(1, d * 3);
+  P.rot += TAU * P.w * d;
+  const landing = P.ph === 0 && P.yo < 0;
+  shape(P, P.pt / DUR[P.ph]);
+  // The hands follow their mark, easing over the big jumps between steps.
+  if (!P.hd) P.hs = null;
+  else if (!P.hs) P.hs = P.hd.slice();
+  else for (let i = 0; i < 4; i++) abs(P.hd[i] - P.hs[i]) > 3 ? (P.hs[i] += (P.hd[i] - P.hs[i]) * min(1, d * 14)) : (P.hs[i] = P.hd[i]);
+
+  // Slip flung off the wall by the hands, and spattered as the lump lands.
+  const fling = (x, y, sd, n) => {
+    while (n--) P.dr.push([x, y, sd * (8 + rnd() * 26), -8 - rnd() * 26, PY - 4 + rnd() * 10]);
+  };
+  if (P.hs && (P.ph === 3 || P.ph === 4) && rnd() < d * 3) rnd() < 0.5 ? fling(P.hs[0], P.hs[1], -1, 1) : fling(P.hs[2], P.hs[3], 1, 1);
+  if (landing && P.yo === 0) fling(CX - 9, BY - 2, -1, 3), fling(CX + 9, BY - 2, 1, 3);
+  P.dr = P.dr.filter((q) => {
+    (q[0] += q[2] * d), (q[1] += q[3] * d), (q[3] += 150 * d);
+    if (q[3] > 0 && q[1] >= q[4]) {
+      P.sp.push([q[0], q[1], rnd() < 0.3 ? 2 : 1, 0.7 + 0.5 * rnd()]);
+      if (P.sp.length > 110) P.sp.shift();
+      return false;
+    }
+    return q[0] > -2 && q[0] < W + 2;
+  });
+  for (const q of P.pieces) q.dry = min(1, q.dry + d / 75);
+}
+
+// The wall, the rack and the lamp's glow, kept until the lamp or the clay changes.
+function backdrop(P) {
+  P.bgKey = bgKey(P);
+  // Clay dust lies on everything in the room and takes the clay's colour.
+  const B = P.bg, LX = P.LX, dust = P.dust, wall = WALL.map((v, n) => mix(v, dust[n] * 0.4, 0.55)), wood = WOOD.map((v, n) => mix(v, dust[n] * 0.6, 0.35));
+  for (let y = 0; y < H; y++)
+    for (let x = 0; x < W; x++) {
+      const dx = x + 0.5 - LX, dy = y - 10, o = (y * W + x) * 3;
+      let f = 0.24 + 0.85 * exp(-(dx * dx + dy * dy * 0.3) / 1500), col = wall;
+      if (dy > 0) {
+        const cw = 4 + dy * 0.72;
+        f += 0.32 * sm(cw + 6, cw - 3, abs(dx)) * exp(-dy / 90);
+      }
+      f *= 0.9 + 0.16 * hash(x >> 1, y >> 1);
+      for (const sy of SHELF) {
+        if (y === sy) (col = wood), (f *= 1.35);
+        else if (y > sy && y <= sy + 3) (col = wood), (f *= 0.75 + 0.15 * hash(x >> 2, sy));
+        else if (y > sy + 3 && y <= sy + 6) f *= 0.45 + 0.17 * (y - sy - 4);
+      }
+      if ((x < 2 || x > 61) && y < SHELF[2] + 4) (col = wood), (f *= x === 1 || x === 62 ? 0.9 : 0.6);
+      const g = 0.55 * exp(-(dx * dx + (y - 10.5) ** 2) / 30);
+      for (let c = 0; c < 3; c++) B[o + c] = col[c] * f + [255, 196, 120][c] * g;
+    }
+}
+
+// The light from the lamp at a spot: its direction and how much reaches it.
+function light(P, x, y) {
+  const lx = cl((P.LX - x) / 24, -1.3, 1.3), ly = 0.3 + (y - 10) / 300, n = sqrt(lx * lx + ly * ly + 0.25);
+  return [lx / n, ly / n, 0.5 / n, 0.6 + 0.5 * exp(-((x - P.LX) ** 2 + ((y - 10) * 0.5) ** 2) / 1800)];
+}
+
+let F;
+const bgKey = (P) => round(P.LX * 8) * 64 + round(P.clay * 48);
+// A thrown shape turned on its axis, lit by the lamp: wall, rim and the
+// dark inside. Off-centre clay swings its axis round with the wheel.
+function solid(o) {
+  const { cx, by, s, pr, Hp, L, alb } = o, Hs = Hp * s, [l0, l1, l2, lm] = L;
+  let Rm = 0;
+  for (let i = 0; i <= Hp + 1; i++) Rm = max(Rm, pr[i]);
+  Rm *= s;
+  const R = (h) => at(pr, h / s, Hp) * s, off = (h) => o.wa * o.s1 + o.wt * (cl(h / Hs, 0, 1) ** 1.5) * o.s2;
+  const RT = R(Hs), cT = cx + off(Hs), yT = by - Hs, ryT = E * RT + 0.35, ri = o.ri * s, ryi = E * ri + 0.25, wb = abs(o.wa) + abs(o.wt);
+  const hn = sqrt(l0 * l0 + l1 * l1 + (l2 + 1) ** 2), hx = l0 / hn, hy = l1 / hn, hz = (l2 + 1) / hn;
+  const y0 = max(0, floor(yT - ryT - 1)), y1 = min(H - 1, ceil(by + E * Rm + 1)), x0 = max(0, floor(cx - Rm - wb - 1)), x1 = min(W - 1, ceil(cx + Rm + wb + 1));
+  for (let y = y0; y <= y1; y++)
+    for (let x = x0, h0 = by - y - 0.5, ox = wb ? off(h0) : 0; x <= x1; x++) {
+      const px = x + 0.5 - cx - ox, o3 = (y * W + x) * 3;
+      let h = h0, r = 0, u = 9, c = 0, k, sp = 0;
+      for (let it = 0; it < 3; it++) {
+        r = R(h);
+        u = r > 0.05 ? px / r : 9;
+        c = u * u < 1 ? sqrt(1 - u * u) : 0;
+        h = h0 + E * r * c;
+      }
+      r = R(h);
+      u = r > 0.05 ? px / r : 9;
+      if (h >= 0 && h <= Hs && u * u < 1) {
+        c = sqrt(1 - u * u);
+        const hp = h / s, dR = (R(h + 0.6) - R(h - 0.6)) / 1.2 + o.ring * 2.03 * cos(hp * 2.03), nl = 1 / sqrt(1 + dR * dR);
+        const dif = max(0, (u * l0 - dR * l1 + c * l2) * nl), nh = max(0, (u * hx - dR * hy + c * hz) * nl);
+        k = (o.amb + 0.95 * dif + 0.2 * max(0, (-u * l0 + 0.4 * c) * nl)) * lm;
+        sp = o.spec * nh ** 40;
+        if (o.fl) {
+          // Slip streaks and grog flecks ride round with the wheel.
+          const az = asin(u) - o.rot, a = ((az % TAU) + TAU) % TAU, i = floor(a * 6.366), j = floor(hp / 2.3), q = hash(i, j);
+          const st = 1 + 0.1 * sin(3 * az + 1.3) + 0.07 * sin(5 * az + hp * 0.11);
+          k *= st;
+          sp *= st;
+          if (q < 0.2 && abs(a - (i + 0.5) / 6.366) * r < 0.7 && abs(hp - (j + 0.5) * 2.3) < 0.75) k *= q < 0.1 ? 1.5 : 0.55;
+        }
+      } else {
+        const ex = (x + 0.5 - cT) / RT, ey = (y + 0.5 - yT) / ryT;
+        if (RT < 0.4 || ex * ex + ey * ey > 1) continue;
+        const ix = (x + 0.5 - cT) / (ri + 0.01), iy = (y + 0.5 - yT) / ryi;
+        if (ri > 0.4 && ix * ix + iy * iy < 1) k = (0.05 + 0.42 * cl(-ix * l0 * 1.3 + 0.2, 0, 1) * (iy < 0.3 ? 1 : 0.55)) * lm;
+        else (k = (0.3 + 0.8 * l1) * lm), (sp = o.spec * 0.3);
+      }
+      for (let n = 0; n < 3; n++) F[o3 + n] = alb[n] * k + SHINE[n] * sp;
+    }
+}
+
+// The earlier pots on the shelves, wet and dark, then leather-hard, then pale.
+const STILL = { s: SHS, wa: 0, wt: 0, s1: 0, s2: 0, rot: 0, ring: 0, fl: 0, amb: 0.38 };
+function shelves(P, C) {
+  // While a pot is carried over, its slot stands empty.
+  for (let i = 0; i < min(P.n - (P.ph === 7), P.pieces.length); i++) {
+    const q = P.pieces[i], [sx, sy] = SLOT[q.slot], dr = q.dry, a = dr < 0.45 ? dr / 0.45 : (dr - 0.45) / 0.55;
+    const alb = dr < 0.45 ? C[0].map((v, n) => mix(v * 0.62, C[1][n], a)) : C[1].map((v, n) => mix(v, C[2][n], a));
+    solid({ ...STILL, cx: sx, by: sy + 0.5, pr: q.spec.pr, Hp: q.spec.Hf, ri: q.spec.rim - 1.4, alb, spec: 0.6 * (1 - sm(0, 0.4, dr)), L: light(P, sx, sy - 10) });
+  }
+}
+
+const put = (x, y, col, k) => {
+  if ((x = round(x - 0.5)) >= 0 && x < W && (y = round(y - 0.5)) >= 0 && y < H) for (let c = 0, o = (y * W + x) * 3; c < 3; c++) F[o + c] = col[c] * k;
+};
+
+// The lamp: a cord, an enamel shade and the bulb under it.
+function lamp(P) {
+  for (let y = 0; y < 12; y++)
+    for (let x = max(0, floor(P.LX - 8)); x <= min(W - 1, P.LX + 8); x++) {
+      const dx = x + 0.5 - P.LX;
+      if (abs(dx) >= (y < 3 ? 0.6 : y < 10 ? 1.3 + (y - 3) * 0.85 : y < 11 ? 2.4 : 1.2)) continue;
+      const k = y > 2 && y < 9 ? 0.7 + 0.6 * (1 - (y - 3) / 6) * (dx < 0 ? 1 : 0.6) : 1;
+      put(x + 0.5, y + 0.5, y < 3 ? [44, 38, 34] : y < 9 ? [38, 72, 62] : [[236, 170, 96], [255, 244, 214], [255, 226, 168]][y - 9], k);
+    }
+}
+
+// The pot's shadow thrown on the wall behind, leaning away from the lamp.
+function shadow(P) {
+  for (let y = max(0, floor(BY - P.H - 6)); y < 106; y++) {
+    const h = BY + 4 - y;
+    if (h < 0 || h > P.H) continue;
+    const r = at(P.pr, h, P.H) * 1.08, xc = CX + (CX - P.LX) * (0.12 + h * 0.007);
+    for (let x = max(0, floor(xc - r - 2)); x <= min(W - 1, xc + r + 2); x++) {
+      const k = 1 - 0.5 * sm(r + 1.5, r - 1, abs(x + 0.5 - xc)), o = (y * W + x) * 3;
+      (F[o] *= k), (F[o + 1] *= k), (F[o + 2] *= k);
+    }
+  }
+}
+
+// The splash pan with its slip, and the wheel head turning in it.
+function wheel(P, A) {
+  const [l0, l1, l2, lm] = light(P, CX, PY), mt = METAL.map((v, n) => mix(v, A[n], 0.7)), side = (z) => 0.15 + 0.8 * max(0, z * l0 + sqrt(max(0, 1 - z * z)) * l2);
+  for (let y = 100; y < H; y++)
+    for (let x = 0; x < W; x++) {
+      const ex = (x + 0.5 - CX) / PR, ey = (y + 0.5 - PY) / (PR * E), dd = ex * ex + ey * ey, o = (y * W + x) * 3;
+      const wx = (x + 0.5 - CX) / WR, wy = (y + 0.5 - BY) / (WR * E), wd = wx * wx + wy * wy;
+      let col, k;
+      if (wd < 1) (col = mt), (k = (0.3 + 0.6 * l1) * lm * (0.9 + 0.1 * cos(sqrt(wd) * WR * 1.4)));
+      else if (wy > 0 && wx * wx < 1 && y + 0.5 < BY + WR * E * sqrt(1 - wx * wx) + 2.5) (col = METAL), (k = 0.5 * side(wx) * lm);
+      else if (dd < 1) dd > 0.86 ? ((col = PLASTIC), (k = (0.6 + 0.6 * l1) * lm)) : ((col = A), (k = (ey < 0 ? 0.26 + 0.12 * (1 + ey) : 0.4) * lm));
+      else if (ey > 0 && ex * ex < 1 && y + 0.5 < PY + PR * E * sqrt(1 - ex * ex) + 6) (col = PLASTIC), (k = side(ex) * lm);
+      else if (y > PY) (col = WALL), (k = 0.2);
+      else continue;
+      for (let c = 0; c < 3; c++) F[o + c] = col[c] * k;
+    }
+  // Slip spattered on the pan, then the wheel's own marks going round.
+  for (const [x, y, z, t] of P.sp) {
+    const ex = (x - CX) / WR, ey = (y - BY) / (WR * E);
+    if (ex * ex + ey * ey < 1.1) continue;
+    put(x, y, A, 0.5 * t * lm);
+    if (z > 1) put(x + 1, y, A, 0.4 * t * lm);
+  }
+  for (let j = 0; j < 6; j++) {
+    const a = P.rot + j * 1.9, r = j < 2 ? 16 : 11.5 + j * 1.6;
+    put(CX + r * sin(a) + 0.5, BY + E * r * cos(a) + 0.5, j < 2 ? [20, 20, 22] : A, j < 2 ? 1 : 0.85 * lm);
+  }
+}
+
+// Skin lit by the lamp, round in section.
+function cap(ax, ay, bx, by, ra, rb, col, L, tip) {
+  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1e-6, rm = max(ra, rb) + 1;
+  for (let y = max(0, floor(min(ay, by) - rm)); y <= min(H - 1, max(ay, by) + rm); y++)
+    for (let x = max(0, floor(min(ax, bx) - rm)); x <= min(W - 1, max(ax, bx) + rm); x++) {
+      const qx = x + 0.5 - ax, qy = y + 0.5 - ay, t = cl((qx * dx + qy * dy) / ll, 0, 1), ex = qx - dx * t, ey = qy - dy * t, r = mix(ra, rb, t), dd = ex * ex + ey * ey;
+      if (dd > r * r) continue;
+      const nz = sqrt(1 - dd / (r * r)), k = (0.16 + 0.9 * max(0, (ex / r) * L[0] - (ey / r) * L[1] + nz * L[2])) * L[3], C = tip && t > 0.5 ? tip : col, o = (y * W + x) * 3;
+      for (let c = 0; c < 3; c++) F[o + c] = C[c] * k;
+    }
+}
+
+// A hand on the clay at x, y: the sleeve and forearm down to the side, the
+// back of the hand, the fingers round the wall with slip on them, the thumb.
+function hand(P, sd, x, y, slip) {
+  const L = light(P, x, y);
+  cap(x + sd * 22, y + 26, x + sd * 46, y + 62, 5.6, 6.6, SLEEVE, L);
+  cap(x + sd * 6.5, y + 3.5, x + sd * 23, y + 27, 3.4, 4.6, SKIN, L);
+  cap(x + sd * 7.5, y + 3.5, x + sd * 3.2, y - 0.3, 3.6, 3.3, SKIN, L);
+  cap(x + sd * 3.2, y - 0.3, x - sd * 1.8, y + 0.8, 2.6, 2, SKIN, L, slip);
+  cap(x + sd * 3.8, y - 3, x + sd * 2.6, y - 4.4, 1.4, 1.2, SKIN, L, slip);
+}
+
+export function draw(display, params) {
+  const P = params.s;
+  if (!P || !P.pr) return;
+  F = P.f;
+  const c = P.clay * 3, i0 = min(2, floor(c)), f = c - i0, C = [0, 1, 2].map((j) => CLAY[i0][j].map((v, n) => mix(v, CLAY[i0 + 1][j][n], f))), A = C[0];
+  P.dust = C[2];
+  if (P.bgKey !== bgKey(P)) backdrop(P);
+  F.set(P.bg);
+  shelves(P, C);
+  lamp(P);
+  if (!P.g) shadow(P);
+  wheel(P, A);
+  const wire = (front) => {
+    if (P.wire < 0 || !P.hs || P.wire < 0.5 !== front) return;
+    for (let x = P.hs[0]; x <= P.hs[2]; x++) put(x + 0.5, P.hs[1] + 0.5, [220, 222, 230], 0.9);
+  };
+  wire(false);
+  const [gx, gy, gs] = P.g || [CX, BY + P.yo, 1];
+  solid({ cx: gx, by: gy, s: gs, pr: P.pr, Hp: P.H, ri: P.ri, wa: P.wa, wt: P.wt, s1: sin(P.rot), s2: sin(P.rot + 0.8), rot: P.rot, alb: A, spec: 0.9, L: light(P, gx, gy - P.H * gs * 0.5), ring: P.ring, fl: 1, amb: 0.08 });
+  wire(true);
+  if (P.hs) {
+    const slip = SKIN.map((v, n) => mix(v, A[n], 0.6));
+    hand(P, -1, P.hs[0], P.hs[1], slip);
+    hand(P, 1, P.hs[2], P.hs[3], slip);
+  }
+  for (const [x, y] of P.dr) put(x, y, A, 0.8);
+  for (let i = 0, o = 0; i < N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);
+}
diff --git a/incoming/pattern-study/patterns/shoot-em-up.js b/incoming/pattern-study/patterns/shoot-em-up.js
new file mode 100644
index 000000000..282415e1e
--- /dev/null
+++ b/incoming/pattern-study/patterns/shoot-em-up.js
@@ -0,0 +1,514 @@
+// ===== Patternflow pattern =====
+// Title:   Shoot 'em Up
+// Family:  pixel
+// Idea:    An arcade shooter plays itself: a fighter weaves over a scrolling sea, coast, fields and town, shooting down waves of craft and gunboats, until a boss fills the top and sprays rings and spirals of bullets.
+// Author:  patternflow-lab
+// Date:    2026-10-24
+// SPDX-License-Identifier: CC-BY-SA-4.0
+// Lineage: original, pattern round 24, after the vertically scrolling arcade shooters of the 1980s
+// Round:   24
+// ===============================
+// @matrix 64x128
+// @knobs Stage=0..1, Speed=0.2..3, Waves=1..5, Bullets=0..1
+//
+// Knob 1: Stage. Four stages: a tropical sea and green fields at 0, a red desert canyon, a city at night, a space station among stars.
+// Knob 2: Speed. The pace of the game; at 2 the ground scrolls 12 LEDs a second and the first boss comes two seconds in.
+// Knob 3: Waves. From a formation every three seconds at 1 to a bigger one every second at 5, with more gunboats.
+// Knob 4: Bullets. How thick the fire is, from rings of twelve at 0.06 to rings of thirty and three-armed spirals at 1, with the ground dimmed so they read.
+// Buttons: K1 tap drops a bomb: a white flash and a shock ring that clears the bullets.
+
+const W = 64, H = 128, N = W * H;
+const { min, max, sin, cos, abs, atan2, hypot, floor, round, sqrt, PI } = Math;
+const clamp = (v, a, b) => (v < a ? a : v > b ? b : v);
+const rnd = (a, b) => a + (b - a) * Math.random();
+// Ground scroll at Speed 2 in LEDs a second; clouds go 1.8 times as fast.
+const V0 = 12, CLOUD = 1.8;
+
+const hash = (x, y, s) => {
+  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);
+  h = Math.imul(h ^ (h >>> 13), 1274126177);
+  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;
+};
+function noise(x, y, s) {
+  const ix = floor(x), iy = floor(y), u = (x -= ix) * x * (3 - 2 * x), v = (y -= iy) * y * (3 - 2 * y);
+  const a = hash(ix, iy, s), b = hash(ix + 1, iy, s), c = hash(ix, iy + 1, s);
+  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(ix + 1, iy + 1, s)) * u * v;
+}
+
+// Ground types, one colour each in every stage's palette.
+const [DEEP, WAVE, CAP, SHAL, SAND, GRASS, TREE, FLDA, FLDB, ROAD, ROOF, WALL, TRUNK, RIVER, LIGHT, HEDGE] = [...Array(16).keys()];
+const PALS = [
+  "123c9a1e5cc4d2ecff2aa8ccf0d4884aae3c1f6a2a9ccc4a6e9a3076706ad8482ef2e6c88a5a2a2c7ed8fff2c02e5226",
+  "5c20188a3a22d8966ab4502af0b464dc9a4c4a8a3cf2c278c8843e6e4630c8602ef6dcaa5a34182aa89affe6aa7a2c1a",
+  "0c1846172a628ca8e61c386a50506a163e340e2c2440446a2a2c481e1e30b43c96ffd25a2e222412265effa83c1c1c2c",
+  "08061c1e0e40e6e6ff34185e9a90885a62804c4440868ca8464c661c2034ff3c3cb8c2d83c343228dcff78ffc82a2e40",
+].map((s) => s.match(/../g).map((h) => parseInt(h, 16)));
+// Clouds per stage: colour, underside shade, alpha, shadow shade.
+const CLOUDS = [
+  [236, 242, 255, 0.74, 0.72, 0.62],
+  [236, 200, 156, 0.78, 0.6, 0.7],
+  [84, 96, 146, 0.7, 0.66, 0.72],
+  [150, 76, 214, 0.6, 0.5, 1],
+];
+
+// Sprites are rows of letters, "." clear; a mirrored one is its left half.
+function mk(src, pal, mirror) {
+  const rows = src.trim().split(/\s+/), w = rows[0].length * (mirror ? 2 : 1), px = [], mask = new Uint8Array(w * rows.length);
+  rows.forEach((r, j) => {
+    for (let i = 0; i < r.length; i++)
+      if (r[i] !== ".") for (const x of mirror ? [i, w - 1 - i] : [i]) px.push(x, j, pal[r[i]]), (mask[j * w + x] = 1);
+  });
+  return { px, mask };
+}
+const PLAYER = mk("....w.... ...wcw... ...wbw... ..gwbwg.. ..gwwwg.. .wgwwwgw. wwwwgwwww rww.g.wwr r..www..r ...r.r...", { w: 0xdce4f0, c: 0x96f0ff, b: 0x286ee6, g: 0x828ca0, r: 0xe62832 });
+const FIGHTER = mk("o.....o oo.d.oo ooodooo .odwdo. ..ddd.. ...d...", { o: 0xff8c1e, d: 0xaa3214, w: 0xfff0c8 });
+const DART = mk("mm...mm mmm.mmm .mmmmm. .mmcmm. ..mmm.. ..mdm.. ...m...", { m: 0xd246e6, c: 0x78f0ff, d: 0x6e1e8c });
+const BOAT = mk(".kkkkk. kbbbbbk kbaaabk kbaaabk kbbbbbk kbbbbbk kbaaabk kbbbbbk .kbbbk. .kbbbk. ..kbk.. ...k...", { k: 0x1e2028, b: 0x969baa, a: 0x5a5f6e });
+// The boss, 56 wide; "e" is its glowing core.
+const BOSS = mk(
+  `
+.............kkgggk..kkkkkkk
+kk...........kacccc..kbbbbbb
+kykkk........kabbbc..kbbrrbb
+kybbbkkk.....kabbbc..kbbrrbb
+kbbbbbbbkk...kabbbc..kbbbbbb
+kbbbbbbbbbkkkbabbbc..kbbbbbb
+kbbrrrbbbbbbbbabbbc..kbbbkkk
+kaarrrrrrbbbbbabbbc..kbbbkee
+kccabbrrrrrrbbabbbckkbbbbkee
+.kkcaabgggrrrrabbbcbbbbbbkee
+...kcaagygbbrrrrrrbbbbbbbkee
+....kacgggbbbbbrrrrrrbbbbkee
+......kkcaabbbbbbbrrrbbbbkee
+........kacaaabgggbbbbbbbkee
+.........kkccabgygbbbbbbbkee
+...........kkaagggbbbbbbbkee
+.............kccaabbbbbbbkkk
+..............kkccabbbbbbbbb
+................kkcaabbbbbbb
+..................kccbbyybbb
+...................kkabbbbbb
+.....................kabbbbb
+.....................kcbbbbb
+......................kabbbb
+.......................kabbg
+.......................kcbbg
+........................kabg
+.........................kag
+.........................kcg
+..........................kg`,
+  { k: 0x14141e, c: 0x464a60, a: 0x787e96, b: 0xb4bacc, r: 0xdc323c, y: 0xffd646, g: 0x2c2c38, e: -1 },
+  true,
+);
+const PALM = "t.t.t .ttt. ttktt .ttt. t.t.t".split(" ");
+// 3x5 digits, a P, and a ship for the lives; one octal digit per row.
+const GLYPH = [0o75557, 0o26227, 0o71747, 0o71317, 0o55711, 0o74717, 0o74757, 0o71122, 0o75757, 0o75717, 0o75744, 0o22775];
+const BUL = [
+  [255, 70, 170],
+  [70, 220, 255],
+  [255, 170, 40],
+];
+
+// The map repeats every 1024 rows: sea, coast, fields, town, river, coast. -1 is sea, 1 land.
+function profile(x, wy) {
+  const v = (wy % 1024) + 0.3 * (x - 32);
+  return v < 250 || v > 830 ? -1 : v < 290 ? (v - 270) / 20 : v < 790 ? 1 : (810 - v) / 20;
+}
+const ISL = {};
+function islands(sd, x, wy) {
+  let best = 0;
+  for (let j = floor(wy / 44) - 1, j1 = j + 2; j <= j1; j++)
+    for (let i = floor(x / 32) - 1, i1 = i + 2; i <= i1; i++) {
+      const ix = i * 32 + 4 + hash(i, j, sd + 2) * 24, iy = j * 44 + 6 + hash(i, j, sd + 3) * 32, r = 12 + hash(i, j, sd + 4) * 10;
+      const b = 1.9 * (1 - hypot(x - ix, wy - iy) / r);
+      if (b > best && hash(i, j, sd + 1) < 0.7) ((best = b), (ISL.x = ix), (ISL.y = iy), (ISL.r = r));
+    }
+  return best;
+}
+function terrain(sd, x, wy) {
+  const pr = profile(x, wy);
+  let e = pr + 0.5 * (noise(x / 11, wy / 11, sd) - 0.5) + 0.24 * (noise(x / 4.5, wy / 4.5, sd + 9) - 0.5);
+  if (pr < 0) e += islands(sd, x, wy) * min(1, -pr);
+  if (e < -0.08) {
+    if (e > -0.12) return CAP;
+    if (e > -0.21) return SHAL;
+    const cx = x >> 3, cy = floor(wy / 5), h = hash(cx, cy, sd + 21), c0 = cx * 8 + floor(hash(cx, cy, sd + 22) * 6);
+    if (h < 0.4 && wy === cy * 5 + floor(hash(cx, cy, sd + 23) * 4) && x >= c0 && x < c0 + (h < 0.15 ? 3 : 2)) return CAP;
+    return e > -0.36 || noise(x / 6, wy / 2, sd + 5) > 0.78 ? WAVE : DEEP;
+  }
+  if (e < 0.08) return SAND;
+  if (pr < -0.5) {
+    const dx = round(x - ISL.x), dy = round(wy - ISL.y), c = ISL.r > 13 && abs(dx) <= 2 && abs(dy) <= 2 ? PALM[dy + 2][dx + 2] : ".";
+    return c === "." ? GRASS : c === "k" ? TRUNK : TREE;
+  }
+  const u = wy % 1024, dr = abs(x - 30 - 9 * sin(wy / 70));
+  if (u > 560 && u < 770) {
+    const a = (u - 560) / 34, dv = abs(x - 32 - 23 * sin(a)) / sqrt(1 + (0.68 * cos(a)) ** 2);
+    if (dv < 4.4) return dr < 2.6 ? (dr > 1.6 ? WALL : ROAD) : dv < 3.3 ? RIVER : SAND;
+  }
+  if (dr < 1.6) return dr < 0.6 && wy % 6 < 3 ? LIGHT : ROAD;
+  if (u > 420 && u < 510 && dr < 22 + 6 * sin(wy / 9)) {
+    // The town: in each plot a house (roof, front wall, shadow) or a tree.
+    const lx = (x + 4) % 9, ly = wy % 9;
+    if (lx === 0 || ly === 0) return ROAD;
+    if (hash(floor((x + 4) / 9), floor(wy / 9), sd + 41) > 0.6) return hypot(lx - 4.5, ly - 4.5) < 2.7 ? TREE : GRASS;
+    if (lx >= 2 && lx <= 6 && ly >= 2) return ly === 2 ? WALL : ly > 7 ? GRASS : lx === 4 ? TRUNK : ROOF;
+    return (lx === 7 && ly >= 2 && ly <= 6) || (ly === 1 && lx >= 3) ? HEDGE : GRASS;
+  }
+  const band = floor(wy / 14), gx = x + floor(hash(band, 0, sd + 51) * 16), h = hash(floor(gx / 16), band, sd + 52);
+  if (gx % 16 === 0 || wy % 14 === 0) return h < 0.6 ? HEDGE : GRASS;
+  const kind = floor(h * 4);
+  if (kind < 3) return (kind ? (kind > 1 ? hash(gx, wy, sd + 53) < 0.12 : gx % 3 === 0) : wy % 3 === 0) ? FLDB : FLDA;
+  const tx = floor(gx / 5), ty = floor(wy / 5);
+  return hypot(gx - tx * 5 - 1 - hash(tx, ty, sd + 55) * 3, wy - ty * 5 - 1 - hash(tx, ty, sd + 56) * 3) < 1.9 ? TREE : GRASS;
+}
+// A cloud: puffs on a flat base, 2 its body and 1 its underside.
+function newCloud(S, cw) {
+  const w = floor(rnd(22, 40)), h = floor(rnd(10, 16)), n = 3 + floor(w / 9), P = [];
+  for (let i = 0; i < n; i++) {
+    const r = h * 0.5 * (0.5 + 0.5 * sin((PI * (i + 0.5)) / n)) + rnd(-0.6, 0.8);
+    P.push((w * (i + 0.5)) / n + rnd(-1.5, 1.5), h - 1.5 - r * 0.55, r);
+  }
+  const inn = (x, y) => x >= 0 && y >= 0 && x < w && y <= h - 1.5 && P.some((_, i) => i % 3 === 0 && hypot(x + 0.5 - P[i], y + 0.5 - P[i + 1]) < P[i + 2]);
+  const m = new Uint8Array(w * h);
+  for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) if (inn(x, y)) m[y * w + x] = inn(x, y + 2) ? 2 : 1;
+  S.clouds.push({ x: floor(rnd(-14, 56 - w / 2)), cw: cw + h, w, h, m });
+}
+function fill(S) {
+  for (const top = floor(S.scroll) + H + 24; S.gen < top; S.gen++) for (let x = 0; x < W; x++) S.ter[(S.gen & 255) * W + x] = terrain(S.sd, x, S.gen);
+  const cb = floor(S.scroll * CLOUD);
+  for (; S.cnext < cb + H + 20; S.cnext += floor(rnd(24, 52))) newCloud(S, S.cnext);
+  S.clouds = S.clouds.filter((c) => cb + H - 1 - c.cw < H);
+}
+
+export function setup(params) {
+  const S = { t: 0, scroll: 85, gen: 83, cnext: 147, sd: floor(Math.random() * 9000), ter: new Uint8Array(256 * W), cb: new Uint8Array(N), buf: new Float32Array(N * 3), sh: new Float32Array(N) };
+  Object.assign(S, { clouds: [], en: [], boats: [], eb: [], ps: [], fx: [], pop: [], caps: [], bossAt: 3.2, bossN: 0, waveAt: 0.4, waveN: 0, boatAt: 0.2, kills: 0, score: 0, flash: 0 });
+  S.pl = { x: 32, y: 112, lvl: 0, lvlT: 0, ft: 0 };
+  fill(S);
+  params.s = S;
+}
+
+function shoot(S, x, y, a, v, c, big) {
+  if (S.eb.length < 380) S.eb.push({ x, y, vx: cos(a) * v, vy: sin(a) * v, c, big });
+}
+function fan(S, x, y, m, gap, v) {
+  const g = atan2(S.pl.y - y, S.pl.x - x);
+  for (let i = 0; i < m; i++) shoot(S, x, y, g + (i - (m - 1) / 2) * gap, v, 2, 0);
+}
+function boom(S, x, y, s) {
+  const sp = [];
+  for (let i = 0; i < 4 + s * 3; i++) {
+    const a = rnd(0, 6.283);
+    sp.push(cos(a) * rnd(20, 50) * s, sin(a) * rnd(20, 50) * s);
+  }
+  S.fx.push({ x, y, t0: S.t, s, sp, d: 0.45 + 0.12 * s });
+}
+function score(S, x, y, v) {
+  S.pop.push({ x, y, v, t0: S.t });
+  S.score += v;
+}
+// A hit; a kill leaves an explosion, its score, and every ninth a capsule.
+function hurt(S, e, n, x, y) {
+  e.fl = 0.06;
+  if ((e.hp -= n) > 0) return;
+  boom(S, x, y, e.boat ? 1.3 : 1);
+  score(S, x, y - 4, e.boat ? 300 : e.k ? 150 : 100);
+  if (++S.kills % 9 === 0) S.caps.push({ x, y });
+}
+const boatY = (S, b) => floor(S.scroll) + H - 1 - round(b.wy);
+const yOf = (S, e) => (e.boat ? boatY(S, e) : e.y);
+
+function spawn(S) {
+  const w = S.waves;
+  if (S.t >= S.waveAt) {
+    const n = S.waveN++, m = 4 + round(w);
+    if (n % 2 === 0) {
+      const o = { k: 0, side: n % 4 ? -1 : 1, y0: rnd(8, 30) };
+      for (let i = 0; i < m; i++) S.en.push({ ...o, born: S.t + i * 0.3, x: -99, y: -99, hp: 6 });
+    } else {
+      const cx = rnd(24, 40);
+      for (let i = 0; i < (m | 1); i++) {
+        const r = (i + 1) >> 1;
+        S.en.push({ k: 1, born: S.t, x: cx + (i & 1 ? r : -r) * 6, y: -8 - r * 6, hy: 34 - r * 6, st: 0, hp: 7, hold: 0.5 + r * 0.25 + rnd(0, 0.2) });
+      }
+    }
+    S.waveAt = S.t + (n === 0 ? 0.45 : S.boss ? 2 : 1) * (3.3 / w ** 0.75);
+  }
+  if (S.t < S.boatAt) return;
+  // A gunboat, where its hull fits on open water.
+  const wy = floor(S.scroll) + H + 8;
+  S.boatAt = S.t + 0.3;
+  for (let n = 0; n < 6; n++) {
+    const x = floor(rnd(6, 58));
+    let ok = true;
+    for (let j = -7; j <= 7; j += 2) for (let i = -4; i <= 4; i += 2) ok &&= S.ter[((wy + j) & 255) * W + x + i] <= CAP;
+    if (ok) return S.boats.push({ boat: 1, x, wy, hp: 10, ft: rnd(0.6, 1.6) }), (S.boatAt += rnd(1.1, 2.7) / w ** 0.7);
+  }
+}
+
+function stepEnemies(S, d) {
+  const f = S.fury;
+  for (const e of S.en) {
+    const a = S.t - e.born;
+    e.fl -= d;
+    if (a < 0) continue;
+    if (e.k === 0) {
+      e.x = e.side > 0 ? -6 + 38 * a : 70 - 38 * a;
+      e.y = e.y0 + 14 * a + 13 * sin(3.2 * a);
+    } else if (e.st === 0) {
+      if ((e.y += 50 * d) >= e.hy) ((e.st = 1), (e.t1 = S.t));
+    } else if (e.st === 1) {
+      if (S.t - e.t1 > e.hold) {
+        const g = atan2(S.pl.y - e.y, S.pl.x - e.x);
+        ((e.st = 2), (e.vx = cos(g) * 30), (e.vy = sin(g) * 30));
+        if (Math.random() < 0.35 + 0.65 * f) fan(S, e.x, e.y + 3, 1 + 2 * round(f * 1.5), 0.25, 42);
+      }
+    } else {
+      const k = min(130, hypot(e.vx, e.vy) + 110 * d) / hypot(e.vx, e.vy);
+      e.x += (e.vx *= k) * d;
+      e.y += (e.vy *= k) * d;
+    }
+  }
+  S.en = S.en.filter((e) => e.hp > 0 && e.y < 140 && e.x > -20 && e.x < 84);
+  for (const b of S.boats) {
+    const sy = boatY(S, b);
+    b.fl -= d;
+    b.a = atan2(S.pl.y - sy + 3, S.pl.x - b.x);
+    if ((b.ft -= d) <= 0 && sy > 2 && sy < 96) {
+      b.ft = 2.2 - 1.3 * f;
+      for (let i = f > 0.5 ? -1 : 0; i <= (f > 0.5 ? 1 : 0); i++) shoot(S, b.x + cos(b.a) * 4, sy - 3 + sin(b.a) * 4, b.a + i * 0.25, 38, 2, 0);
+    }
+  }
+  S.boats = S.boats.filter((b) => b.hp > 0 && boatY(S, b) < 140);
+}
+
+function stepBoss(S, d) {
+  const f = S.fury;
+  // The first boss is short, so its fight fits the first seconds.
+  if (!S.boss && S.t >= S.bossAt) S.boss = { x: 32, y: -34, t0: S.t, st: 0, hp: S.bossN ? 320 + 40 * S.bossN : 60, ph: S.bossN ? 2.8 : 1.6, ang: 0 };
+  const B = S.boss;
+  if (!B) return;
+  B.fl -= d;
+  if (B.st === 2) {
+    if (!(S.t < B.nd)) {
+      boom(S, B.x + rnd(-22, 22), B.y + rnd(4, 24), rnd(0.7, 1.4));
+      B.nd = S.t + 0.07;
+    }
+    if (S.t - B.t2 > 1.7) {
+      boom(S, B.x, B.y + 12, 3.2);
+      for (let i = 0; i < 6; i++) boom(S, B.x + rnd(-24, 24), B.y + rnd(4, 26), rnd(1, 1.8));
+      score(S, B.x - 6, B.y + 14, 5000);
+      S.caps.push({ x: B.x, y: B.y + 20 });
+      Object.assign(S, { flash: 0.75, boss: null, bossAt: S.t + rnd(18, 30), bossN: S.bossN + 1 });
+    }
+  } else if (B.st === 0) {
+    const u = min(1, (S.t - B.t0) / 1.4);
+    B.y = -34 + 40 * (1 - (1 - u) * (1 - u));
+    if (u >= 1) ((B.st = 1), (B.t1 = S.t));
+  } else {
+    // In turns: a ring, a spiral, aimed fans from the wing guns.
+    B.x = 32 + 3 * sin((S.t - B.t1) * 0.8);
+    const ph = floor((S.t - B.t1) / B.ph) % 3;
+    if (ph === 0 && !(S.t < B.nr)) {
+      const n = floor(12 + 18 * f), a0 = rnd(0, 6.283);
+      B.nr = S.t + 1.5 - 0.8 * f;
+      for (let i = 0; i < n; i++) shoot(S, B.x, B.y + 11, a0 + (i * 2 * PI) / n, 28, 0, 1);
+    }
+    if (ph === 1 && !(S.t < B.nx)) {
+      const arms = f > 0.5 ? 3 : 2;
+      B.nx = S.t + 1 / (7 + 23 * f);
+      B.ang += 0.37;
+      for (let i = 0; i < arms; i++) shoot(S, B.x, B.y + 11, B.ang + (i * 2 * PI) / arms, 32, 1, 0);
+    }
+    if (ph === 2 && !(S.t < B.nf)) {
+      B.nf = S.t + 1.05 - 0.55 * f;
+      for (const s of [-1, 1]) fan(S, B.x + s * 19.5, B.y + 10, 3 + round(6 * f), 0.12 + 0.1 * f, 42);
+    }
+  }
+}
+
+function stepPlayer(S, d) {
+  const P = S.pl, B = S.boss;
+  if ((P.lvlT -= d) <= 0 && P.lvl > 0) ((P.lvl -= 1), (P.lvlT = 14));
+  // Its aim: the boss, a capsule, or half way from its weave to the nearest enemy.
+  const wv = 32 + 18 * sin(S.t * 0.53);
+  let ax = wv, ny = -99;
+  if (B && B.st > 0) ax = B.x + 10 * sin(S.t * 1.1);
+  else if (S.caps.length) ax = S.caps[0].x;
+  else for (const e of [...S.en, ...S.boats]) if (yOf(S, e) > max(0, ny) && yOf(S, e) < P.y - 14) ((ny = yOf(S, e)), (ax = 0.55 * e.x + 0.45 * wv));
+  // Then the nearby spot the bullets will miss on its way there.
+  let best = 1e9, bx = P.x, by = P.y;
+  for (const ox of [-14, -9, -5, -2, 0, 2, 5, 9, 14])
+    for (const oy of [-8, -3, 0, 4]) {
+      const cx = clamp(P.x + ox, 5, 58), cy = clamp(P.y + oy, 96, 116), dist = max(0.01, hypot(cx - P.x, cy - P.y));
+      let c = 0.05 * abs(cx - ax) + 0.04 * abs(cy - 111) + 0.015 * dist;
+      for (const b of S.eb)
+        for (const tau of abs(b.y - cy) < 45 ? [0.05, 0.12, 0.2, 0.3, 0.42] : []) {
+          const k = min(1, (60 * tau) / dist), dx = b.x + b.vx * tau - P.x - (cx - P.x) * k, dy = b.y + b.vy * tau - P.y - (cy - P.y) * k;
+          c += max(0, 30 - dx * dx - 0.7 * dy * dy) / (tau < 0.15 ? 6 : 15);
+        }
+      if (c < best) ((best = c), (bx = cx), (by = cy));
+    }
+  P.x += clamp(bx - P.x, -60 * d, 60 * d);
+  P.y += clamp(by - P.y, -60 * d, 60 * d);
+  // Two streams, three after a capsule, five after two.
+  for (P.ft -= d; P.ft <= 0; P.ft += 0.1)
+    for (const [x, vx] of [[-2, 0], [2, 0], [0, 0], [-3, -38], [3, 38]].slice(0, [2, 3, 5][P.lvl])) S.ps.push({ x: P.x + x, y: P.y - 5, vx, vy: -170 });
+}
+
+function stepShots(S, d) {
+  const B = S.boss, P = S.pl;
+  for (const s of S.ps) {
+    s.x += s.vx * d;
+    s.y += s.vy * d;
+    if (s.y < -4) s.dead = 1;
+    for (const e of [...S.en, ...S.boats]) if (!s.dead && e.hp > 0 && abs(s.x - e.x) <= 4 && abs(s.y - yOf(S, e)) <= (e.boat ? 6 : 4)) ((s.dead = 1), hurt(S, e, 1, e.x, yOf(S, e)));
+    const ix = round(s.x - B?.x + 28), iy = round(s.y - B?.y);
+    if (!s.dead && B?.st === 1 && ix >= 0 && ix < 56 && iy >= 0 && iy < 30 && BOSS.mask[iy * 56 + ix]) ((s.dead = 1), (B.fl = 0.05), (S.score += 10), --B.hp);
+  }
+  // A bullet that reaches the fighter bursts on its shield.
+  for (const b of S.eb) {
+    b.x += b.vx * d;
+    b.y += b.vy * d;
+    if (b.x < -3 || b.x > 66 || b.y < -3 || b.y > 130) b.dead = 1;
+    else if (abs(b.x - P.x) < 1.6 && abs(b.y - P.y) < 2.5) ((b.dead = 1), boom(S, b.x, b.y, 0.4));
+  }
+  if (B?.st === 1 && B.hp <= 0) ((B.st = 2), (B.t2 = S.t), (S.eb.length = 0));
+  for (const c of S.caps) {
+    c.y += 14 * d;
+    if (abs(c.x - P.x) < 6 && abs(c.y - P.y) < 7) ((c.dead = 1), (P.lvl = min(2, P.lvl + 1)), (P.lvlT = 16));
+  }
+  for (const k of ["ps", "eb", "caps"]) S[k] = S[k].filter((o) => !o.dead && o.y < 134);
+  S.fx = S.fx.filter((f) => S.t - f.t0 < f.d);
+  S.pop = S.pop.filter((p) => S.t - p.t0 < 0.9);
+}
+
+function step(S, d) {
+  S.t += d;
+  S.scroll += V0 * d;
+  S.flash = max(0, S.flash - 2.6 * d);
+  fill(S);
+  spawn(S);
+  stepEnemies(S, d);
+  stepBoss(S, d);
+  stepPlayer(S, d);
+  stepShots(S, d);
+}
+
+export function update(dt, input, params) {
+  if (!params.s) setup(params);
+  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];
+  [S.stage, S.waves, S.fury] = [clamp(k[0], 0, 1), clamp(k[2], 1, 5), clamp(k[3], 0, 1)];
+  // The first second plays before the first frame.
+  if (!S.started) {
+    S.started = 1;
+    for (let i = 0; i < 30; i++) step(S, 1 / 30);
+  }
+  // The bomb clears the bullets and hurts everything on the screen.
+  if (input.btnPressed?.[0]) {
+    Object.assign(S, { flash: 0.9, bomb: S.t, eb: [] });
+    for (const e of [...S.en, ...S.boats]) if (e.hp > 0 && yOf(S, e) > 0) hurt(S, e, 4, e.x, yOf(S, e));
+    if (S.boss?.st === 1) S.boss.hp -= 15;
+  }
+  for (let d = (clamp(dt || 0, 0, 0.1) * clamp(k[1], 0.2, 3)) / 2; d > 0; d -= 1 / 30) step(S, min(d, 1 / 30));
+}
+
+function put(buf, x, y, r, g, b) {
+  const q = (round(y) * W + round(x)) * 3;
+  if (x > -0.5 && y > -0.5 && x < W - 0.5 && y < H - 0.5) ((buf[q] = r), (buf[q + 1] = g), (buf[q + 2] = b));
+}
+function mix(buf, q, r, g, b, a) {
+  buf[q] += (r - buf[q]) * a;
+  buf[q + 1] += (g - buf[q + 1]) * a;
+  buf[q + 2] += (b - buf[q + 2]) * a;
+}
+// Mode 1 draws a sprite white, 2 stamps its shadow.
+function spr(S, sp, x0, y0, mode, glow) {
+  const p = sp.px;
+  for (let i = 0; i < p.length; i += 3) {
+    const x = x0 + p[i], y = y0 + p[i + 1], c = mode ? 0xffffff : p[i + 2];
+    if (mode === 2) {
+      if (x >= 0 && y >= 0 && x < W && y < H) S.sh[y * W + x] = min(S.sh[y * W + x], 0.55);
+    } else if (c < 0) put(S.buf, x, y, ...glow);
+    else put(S.buf, x, y, c >> 16, (c >> 8) & 255, c & 255);
+  }
+}
+function number(buf, v, x0, y0, r, g, b) {
+  const s = String(v);
+  for (let n = 0; n < s.length; n++)
+    for (let j = 0; j < 15; j++) if ((GLYPH["0123456789PA".indexOf(s[n])] >> (14 - j)) & 1) put(buf, x0 + n * 4 + (j % 3), y0 + floor(j / 3), r, g, b);
+}
+// A ring of width w, or a disc for w 0.
+function ring(buf, cx, cy, R, w, c) {
+  for (let y = floor(cy - R - w); y <= cy + R + w; y++)
+    for (let x = floor(cx - R - w); x <= cx + R + w; x++) if (w ? abs(hypot(x - cx, y - cy) - R) < w : hypot(x - cx, y - cy) <= R) put(buf, x, y, ...c);
+}
+
+export function draw(display, params, time) {
+  const S = params.s;
+  if (!S || !S.started) return;
+  const { buf, sh, cb, pl: P, boss: B, t } = S,
+    si = min(3, floor(S.stage * 4)), pal = PALS[si];
+  for (let y = 0; y < H; y++)
+    for (let x = 0, wy = floor(S.scroll) + H - 1 - y; x < W; x++) {
+      let k = S.ter[(wy & 255) * W + x];
+      if (k === CAP && (t * 1.6 + hash(x, wy, 3) * 4) % 2 > 1.55) k = WAVE;
+      put(buf, x, y, pal[k * 3], pal[k * 3 + 1], pal[k * 3 + 2]);
+      if (si === 2 && k === FLDA && (x + wy) % 2 === 0 && hash(x, wy, 5) < 0.4) put(buf, x, y, 255, 214, 110);
+      const h = si === 3 && k === DEEP ? hash(x, wy, 6) : 1;
+      if (h < 0.035) put(buf, x, y, ...Array(3).fill(90 + 4600 * h * (0.7 + 0.3 * sin(t * 4 + x * y))));
+    }
+  for (const b of S.boats) {
+    const y = boatY(S, b);
+    spr(S, BOAT, b.x - 3, y - 6, b.fl > 0 ? 1 : 0);
+    for (let i = 1; i <= 3; i++) put(buf, b.x + cos(b.a) * i, y - 3 + sin(b.a) * i, 30, 30, 40);
+  }
+  // Shadows, then the clouds. Thick fire dims the ground as bullet-hell games do.
+  const C = CLOUDS[si];
+  cb.fill(0);
+  for (const c of S.clouds)
+    for (let j = 0, sy = floor(S.scroll * CLOUD) + H - 1 - c.cw; j < c.h; j++)
+      for (let i = 0, x = c.x, y = sy + j; i < c.w; i++, x++) if (x >= 0 && x < W && y >= 0 && y < H && c.m[j * c.w + i]) cb[y * W + x] = c.m[j * c.w + i];
+  for (let i = 0; i < N; i++) sh[i] = (i % W >= 6 && i >= 9 * W && cb[i - 9 * W - 6] ? C[5] : 1) * (1 - 0.36 * S.fury);
+  for (const e of S.en) spr(S, e.k ? DART : FIGHTER, round(e.x) + 2, round(e.y) + 6, 2);
+  if (B) spr(S, BOSS, round(B.x) - 22, round(B.y) + 9, 2);
+  spr(S, PLAYER, round(P.x) + 1, round(P.y) + 3, 2);
+  for (let i = 0; i < N; i++) {
+    const l = cb[i], k = l === 1 ? C[3] : 1;
+    mix(buf, i * 3, 0, 0, 0, 1 - sh[i]);
+    if (l) mix(buf, i * 3, C[0] * k, C[1] * k, C[2] * k, C[4]);
+  }
+  for (const c of S.caps) ring(buf, c.x, c.y, 2.9, 0, floor(t * 7) % 2 ? [230, 40, 50] : [40, 90, 240]), number(buf, "P", c.x - 1, c.y - 2, 255, 255, 255);
+  for (const e of S.en) spr(S, e.k ? DART : FIGHTER, round(e.x) - 3, round(e.y) - 3, e.fl > 0 ? 1 : 0);
+  // The boss's core pulses cyan, or red as the fury rises.
+  const f = S.fury, p = 0.5 + 0.5 * sin(t * 9);
+  if (B) spr(S, BOSS, round(B.x) - 28, round(B.y), (B.st === 2 ? floor(t * 16) % 2 : B.fl > 0 && floor(t * 20) % 4 === 0) ? 1 : 0, [120 + 135 * f + 60 * p, 230 - 170 * f + 25 * p * (1 - f), 255 - 215 * f]);
+  for (const ex of [3, 5])
+    for (let j = 0, L = 2 + ((t * 24 + ex) % 3 | 0), c; j < L; j++) put(buf, round(P.x) - 4 + ex, round(P.y) + 5 + j, 255 - 12 * (c = min(3, j + (L < 3))) * c, 255 - 65 * c, 220 - 70 * c);
+  spr(S, PLAYER, round(P.x) - 4, round(P.y) - 5, 0);
+  for (const s of S.ps) for (let j = 0; j < 3; j++) put(buf, s.x, s.y + j, 255, 255 - 28 * j, 230 - 85 * j);
+  // Explosions: a white flash, a ring cooling from yellow to red, sparks.
+  for (const f of S.fx) {
+    const a = (t - f.t0) / f.d, R = (1.5 + 4.5 * a) * f.s;
+    if (a < 0.16) ring(buf, f.x, f.y, (1 + 10 * a) * f.s, 0, [255, 255, 235]);
+    else if (a < 0.5) ring(buf, f.x, f.y, R * 0.5, 0, [255, a < 0.3 ? 210 : 120, 40]);
+    if (a >= 0.16) ring(buf, f.x, f.y, R, 0.75, a < 0.45 ? [255, 220, 80] : a < 0.72 ? [255, 130, 30] : [180, 46, 24]);
+    for (let i = 0; a < 0.85 && i < f.sp.length; i += 2) put(buf, f.x + f.sp[i] * a * f.d, f.y + f.sp[i + 1] * a * f.d, 255, 245, 170);
+  }
+  for (const b of S.eb) {
+    const c = BUL[b.c];
+    for (let i = 0; i < 9; i++) if (i % 2 || (b.big && i !== 4)) put(buf, b.x + (i % 3) - 1, b.y + floor(i / 3) - 1, ...c.map((v) => (i % 2 ? v : v * 0.6)));
+    put(buf, b.x, b.y, 255, 255, 255);
+  }
+  for (const p of S.pop) {
+    const a = (t - p.t0) / 0.9;
+    if (a < 0.75 || floor(t * 20) % 2) number(buf, p.v, round(p.x - String(p.v).length * 2), round(p.y - a * 9), 255, 240, 120);
+  }
+  if (t - S.bomb < 1) ring(buf, P.x, P.y, (t - S.bomb) * 150, 1.6, [200, 250, 255]);
+  for (let i = 0; S.flash > 0 && i < N * 3; i++) buf[i] += (255 - buf[i]) * min(1, S.flash) * 0.85;
+  for (let i = 0; i < 7 * W; i++) if (i % W < 26 || i % W >= 50) mix(buf, i * 3, 0, 0, 0, 0.82);
+  number(buf, String(S.score % 1e6).padStart(6, "0"), 1, 1, 255, 255, 255);
+  number(buf, "AAA", 52, 1, 220, 228, 240);
+  for (let p = 0; p < N; p++) display.setPixel(p % W, (p / W) | 0, min(255, buf[p * 3]) | 0, min(255, buf[p * 3 + 1]) | 0, min(255, buf[p * 3 + 2]) | 0);
+}
diff --git a/incoming/pattern-study/patterns/thermal.js b/incoming/pattern-study/patterns/thermal.js
new file mode 100644
index 000000000..abedb46ed
--- /dev/null
+++ b/incoming/pattern-study/patterns/thermal.js
@@ -0,0 +1,502 @@
+// ===== Patternflow pattern =====
+// Title:   Thermal
+// Family:  flight
+// Idea:    A white sailplane corkscrews up a summer thermal off a dark ploughed field with two buzzards and rising thistledown, until at the base of the cumulus the thermal is building it straightens and glides off, and another glider joins low down.
+// Author:  patternflow-lab
+// Date:    2026-10-24
+// SPDX-License-Identifier: CC-BY-SA-4.0
+// Lineage: original, pattern round 24, after thermal soaring under fair-weather cumulus over farmland
+// Round:   24
+// ===============================
+// @matrix 64x128
+// @knobs Hour=0..1, Speed=0.2..3, Gliders=1..4, Wind=-1..1
+//
+// Knob 1: Hour. Bright midday at 0, to golden late afternoon at 1: the sun comes in low from the left, the haze goes amber and hedges and trees throw long shadows.
+// Knob 2: Speed. At 2 a turn takes six seconds, the climb to the cloud base about twenty, and each cloud builds for 26 s before it drifts off. At 0.2 all of it runs ten times slower.
+// Knob 3: Gliders. One to four gliders stacked in the thermal. A day good enough for four also builds a bigger cloud with a darker base and sends more thistledown up.
+// Knob 4: Wind. The thermal and its cloud lean downwind, so the turns drift as the gliders climb, and cloud shadows and far cumulus travel faster. Near 0 it is almost calm.
+// Buttons: K1 tap winch-launches a glider from the field; it rears up on the cable, lets go and turns into the thermal.
+
+const [W, H] = [64, 128];
+const N = W * H;
+const { min, max, sin, cos, abs, sqrt, exp, floor, round, pow, sign, PI } = Math;
+const TAU = 2 * PI;
+const clamp = (v, a, b) => (v < a ? a : v > b ? b : v);
+const sstep = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));
+const mix = (a, b, t) => a + (b - a) * t;
+const mix3 = (a, b, t) => [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)];
+const rnd = () => Math.random();
+// Rows: horizon, first field row, cloud base, where the thermal leaves the ground.
+const [HOR, FY, YB, YG] = [97, 100, 36, 116];
+// The ploughed field the thermal comes off: its column and its distance.
+const [SRCX, DSRC] = [29, 9.6];
+// We look up a little, so a level circle is a thin ellipse; the craft are drawn flatter so a banked wing does not stand on end.
+const SE = sin(0.3);
+const [BE, BC] = [sin(0.1), cos(0.1)];
+
+const hash = (x, y, s) => {
+  let h = Math.imul((x * 374761393 + y * 668265263 + s * 982451653) | 0, 1274126177);
+  h = Math.imul(h ^ (h >>> 13), 1274126177);
+  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;
+};
+function noise(x, y, s) {
+  const ix = floor(x), iy = floor(y), fx = x - ix, fy = y - iy, u = fx * fx * (3 - 2 * fx), v = fy * fy * (3 - 2 * fy);
+  const a = hash(ix, iy, s), b = hash(ix + 1, iy, s), c = hash(ix, iy + 1, s);
+  return a + (b - a) * u + (c - a) * v + (a - b - c + hash(ix + 1, iy + 1, s)) * u * v;
+}
+const fbm = (x, y, s) => 0.55 * noise(x, y, s) + 0.3 * noise(x * 2.1, y * 2.1, s + 7) + 0.15 * noise(x * 4.3, y * 4.3, s + 13);
+
+// Pasture, beans, stubble, wheat, hay and plough in midday sun; 1 marks rows running away from us.
+const CROP = [[70, 150, 45, 0], [38, 106, 36, 1], [216, 184, 94, 1], [198, 160, 66, 0], [142, 178, 74, 0], [96, 62, 40, 1]];
+const PICK = [0, 0, 0, 1, 1, 2, 2, 2, 3, 3, 4, 4];
+// Tapered strokes in the craft's axes: forward, right, up, twice, then two radii.
+const GLIDER = [[3.6, 0, -0.1, -4.8, 0, 0.15, 0.85, 0.45], [0.6, 0, 0.25, 0.25, -9, 0.85, 0.75, 0.45], [0.6, 0, 0.25, 0.25, 9, 0.85, 0.75, 0.45], [-4.2, 0, 0.1, -4.9, 0, 2.4, 0.55, 0.45], [-4.9, -2.6, 2.4, -4.9, 2.6, 2.4, 0.45, 0.45]];
+const BUZZ = [[1.3, 0, 0, -1.3, 0, 0, 0.6, 0.45], [0.2, 0, 0.1, -0.3, -3.7, 0.75, 0.8, 0.45], [0.2, 0, 0.1, -0.3, 3.7, 0.75, 0.8, 0.45], [-1.2, 0, 0, -2.5, 0, 0.1, 0.45, 0.65]];
+
+// A cumulus as puffs over a flat base: each puff's place (u across, v up), its radius r and when in its growth it appears.
+function puffs() {
+  const L = [];
+  const add = (u, v, r, t0) => L.push({ u: u + (rnd() - 0.5) * 0.14, v: v + (rnd() - 0.5) * 0.08, r: r * (0.88 + 0.24 * rnd()), t0, ph: rnd() * TAU });
+  for (let i = 0; i < 5; i++) add(-0.76 + i * 0.38, 0.2, 0.34, i === 2 ? 0 : 0.03 + 0.12 * rnd());
+  for (let i = 0; i < 4; i++) add(-0.5 + i * 0.33, 0.45, 0.33, 0.08 + 0.17 * rnd());
+  for (let i = 0; i < 3; i++) add(-0.3 + i * 0.3, 0.68, 0.3, 0.3 + 0.2 * rnd());
+  for (let i = 0; i < 2; i++) add((rnd() - 0.5) * 0.4, 0.86, 0.26, 0.55 + 0.15 * rnd());
+  return L;
+}
+const newCloud = (x, a) => ({ x, a, g: 0, al: 1, det: false, p: puffs(), sd: floor(rnd() * 999) });
+
+// Fields lie in strips at distance D (row = HOR + 180 / D), each cut into fields across.
+function buildFields(S) {
+  const strips = [], trees = [], us = ((SRCX - 32) * DSRC) / 64, hw = (11 * DSRC) / 64;
+  for (let D = 5.6; D < 66; ) {
+    const D2 = D * (1.22 + 0.12 * rnd());
+    const wid = () => ((12 + 18 * rnd()) * pow(6 / D, 0.35) * D) / 64;
+    let b = [];
+    for (let u = -0.62 * D2 - rnd() * wid(); u < 0.62 * D2 + 0.3; u += wid()) b.push(u);
+    const src = D <= DSRC && DSRC < D2;
+    if (src) {
+      b = b.filter((u) => u < us - hw - 0.3 || u > us + hw + 0.3);
+      b.push(us - hw, us + hw);
+      b.sort((p, q) => p - q);
+    }
+    const t = [];
+    for (let j = 0; j < b.length - 1; j++) {
+      let k;
+      do k = PICK[floor(rnd() * PICK.length)];
+      while (j && k === t[j - 1]);
+      t.push(k);
+    }
+    if (src) t[b.indexOf(us - hw)] = 5;
+    strips.push({ d0: D, d1: D2, b, t, hh: 0.12 + 0.08 * rnd(), i: strips.length });
+    // Trees in the hedge along each strip's near edge, and at some corners.
+    for (let j = 0; j < 2; j++) if (rnd() < 0.6) trees.push({ u: (rnd() - 0.5) * 1.1 * D, D: D + 0.05, rc: 0.2 + 0.14 * rnd() });
+    for (let j = 1; j < b.length - 1; j++) if (rnd() < 0.2) trees.push({ u: b[j], D: D + 0.05, rc: 0.2 + 0.12 * rnd() });
+    D = D2;
+  }
+  for (const tr of trees) tr.hc = tr.rc * 1.5 + 0.15;
+  S.strips = strips;
+  S.trees = trees.sort((p, q) => q.D - p.D);
+}
+
+export function setup(params) {
+  const F = () => new Float32Array(N);
+  const S = { t: 0, bg: new Float32Array(N * 3), buf: new Float32Array(N * 3), A: F(), fu: F(), fd: F(), fn: F(), gl: [], down: [], clouds: [], far: [], spawn: [0, 0], cable: null, bb: [1e9, 1e9, -1, -1] };
+  buildFields(S);
+  for (let y = FY; y < H; y++)
+    for (let x = 0; x < W; x++) {
+      const p = y * W + x;
+      S.fd[p] = 180 / (y + 0.5 - HOR);
+      S.fu[p] = ((x + 0.5 - 32) * S.fd[p]) / 64;
+      S.fn[p] = fbm(x * 0.15, y * 0.3, 11);
+    }
+  for (let i = 0; i < 3; i++) S.far.push({ x: 8 + i * 24 + rnd() * 10, yb: 87 - i * 5 - rnd() * 2, hw: 5 + 2.5 * i + rnd() * 2, ht: 3 + i + rnd() * 1.5, p: puffs(), sd: floor(rnd() * 999), m: 0.35, e: 44 });
+  S.shad = [{ x: 6, D: 7.4, r: 19, rd: 2.6, m: 0.9, e: 62 }, { x: 50, D: 16, r: 15, rd: 5.5, m: 0.9, e: 60 }];
+  params.s = S;
+}
+
+// The thermal's centre at a row: it leans downwind with height and wanders a little.
+const colX = (S, y) => SRCX + S.lean * (YG - y) + 1.5 * sin(S.t * 0.21);
+const sunLight = (h, k = mix(1, 0.9, h)) => [mix(1, 1.16, h) * k, mix(1, 0.86, h) * k, mix(1, 0.56, h) * k];
+const SHADE = [0.42, 0.47, 0.6];
+const hazeOf = (h) => mix3([176, 202, 222], [236, 186, 122], h);
+function skyAt(x, y, h) {
+  const top = mix3([14, 50, 150], [30, 52, 128], h), mid = mix3([44, 108, 206], [70, 104, 178], h), t = y / 96;
+  const c = t < 0.66 ? mix3(top, mid, sstep(0, 0.66, t)) : mix3(mid, hazeOf(h), sstep(0.66, 1, t));
+  const gw = pow(h, 1.5) * exp(-x / 24) * exp(-abs(y - 78) / 36);
+  return [c[0] + 110 * gw, c[1] + 64 * gw, c[2] + 14 * gw];
+}
+
+// The ground seen at a point of the panel: hedges, fields, their shadows, and the haze.
+function fieldAt(S, x, y, sun, Lsh, haze) {
+  const D = 180 / (y - HOR), u = ((x - 32) * D) / 64, st = S.strips;
+  let k = 0;
+  while (k < st.length - 1 && D >= st[k].d1) k++;
+  let alb = null;
+  let lit = 1;
+  // The hedge on a strip's near edge hides the ground just behind it.
+  for (let j = k; j >= 0 && st[j].d0 > D * 0.8; j--) {
+    const s = st[j];
+    if (y >= HOR + (180 - 64 * s.hh * (0.7 + 0.6 * noise(u * 2.6, s.i * 9, 3))) / s.d0) {
+      const n = 0.8 + 0.4 * noise(u * 6, y, 5);
+      alb = [34 * n, 78 * n, 30 * n];
+      lit = 0.85;
+      break;
+    }
+  }
+  if (!alb) {
+    const s = st[k], b = s.b;
+    let j = 0;
+    while (j < b.length - 2 && u >= b[j + 1]) j++;
+    const hwu = ((0.8 * pow(6 / D, 0.4) + 0.25) * D) / 64;
+    if (abs(u - b[j]) < hwu || abs(u - b[j + 1]) < hwu) {
+      alb = [30, 70, 28];
+      lit = 0.7;
+    } else {
+      const c = CROP[s.t[j]], tx = c[3] ? 0.97 + 0.17 * sin(u * TAU * 6.5) : 0.86 + 0.28 * fbm(u * 2.5, D * 0.7, s.t[j] + j);
+      alb = [c[0] * tx, c[1] * tx, c[2] * tx];
+      // Shadows of the hedges left and in front, and of the trees.
+      if (u - b[j] < s.hh * Lsh * 0.85 || D - s.d0 < s.hh * Lsh * 0.4) lit = 0;
+      else
+        for (const tr of S.trees) {
+          const du = u - tr.u - tr.hc * Lsh * 0.85, dd = D - tr.D - tr.hc * Lsh * 0.45;
+          if (abs(dd) > 3 + Lsh) continue;
+          const al = (du * 0.86 + dd * 0.5) / (tr.rc * (1 + 0.55 * Lsh)), pe = (-du * 0.5 + dd * 0.86) / (tr.rc * 1.8);
+          if (al * al + pe * pe < 1) {
+            lit = 0;
+            break;
+          }
+        }
+    }
+  }
+  const hz = 0.55 * sstep(5, 75, D);
+  return [0, 1, 2].map((c) => mix(alb[c] * mix(SHADE[c], sun[c], lit), haze[c], hz));
+}
+
+function paint(S) {
+  const h = S.hour, sun = sunLight(h), haze = hazeOf(h), Lsh = 0.35 + 4.2 * pow(h, 1.6), bg = S.bg, ridgeF = mix3(haze, [64, 96, 116], 0.38);
+  const ridgeN = mix3(haze, [52 * sun[0], 98 * sun[1], 54 * sun[2]], 0.58);
+  for (let x = 0; x < W; x++) {
+    const farT = 83 + 5 * fbm(x * 0.045, 1.3, 21), nearT = 91.5 + 3 * fbm(x * 0.09, 4.1, 22) - 1.5 * sstep(0.55, 0.8, noise(x * 0.5, 0, 23));
+    for (let y = 0; y < H; y++) {
+      const q = (y * W + x) * 3;
+      bg[q] = bg[q + 1] = bg[q + 2] = 0;
+      // The open sky is smooth enough for one sample.
+      for (let k = y + 1 < farT ? 3 : 0; k < 4; k++) {
+        const xs = x + 0.25 + 0.5 * (k & 1), ys = y + 0.25 + 0.5 * (k >> 1);
+        let c;
+        if (ys >= FY) c = fieldAt(S, xs, ys, sun, Lsh, haze);
+        else if (ys >= nearT) c = ridgeN.map((v) => v * (0.84 + 0.3 * fbm(x * 0.35, ys * 0.9, 24)));
+        else if (ys >= farT) c = ridgeF;
+        else c = skyAt(xs, ys, h);
+        for (let i = 0; i < 3; i++) bg[q + i] += y + 1 < farT ? c[i] : c[i] / 4;
+      }
+    }
+  }
+  // Tree crowns, far ones first, lit from the sun's side.
+  for (const tr of S.trees) {
+    const cx = 32 + (64 * tr.u) / tr.D, cy = HOR + (180 - 64 * tr.hc) / tr.D, R = (64 * tr.rc) / tr.D, hz = 0.55 * sstep(5, 75, tr.D);
+    for (let y = max(FY - 4, floor(cy - R - 1)); y <= min(H - 1, cy + R + 1); y++)
+      for (let x = max(0, floor(cx - R - 1)); x <= min(W - 1, cx + R + 1); x++) {
+        const dx = (x + 0.5 - cx) / R, dy = (y + 0.5 - cy) / R, a = clamp((1 - sqrt(dx * dx + dy * dy)) * R + 0.5, 0, 1);
+        if (a <= 0) continue;
+        const l = clamp(0.45 - 0.7 * dx - 0.4 * dy, 0, 1), n = 0.85 + 0.3 * hash(x, y, 31), q = (y * W + x) * 3;
+        [40, 94, 38].forEach((al, c) => (bg[q + c] += (mix(al * n * mix(SHADE[c], sun[c] * 1.1, l), haze[c], hz) - bg[q + c]) * a));
+      }
+  }
+  S.painted = h;
+}
+
+function addCraft(S, kind, st, X, yc, dir) {
+  const R = kind ? 5.5 + rnd() : 11.5 + rnd();
+  const o = { kind, st, X, yc, Z: -dir * R, R, dir, th: (-dir * PI) / 2, bank: st === "climb" ? 0.5 + 0.12 * kind : 0, pitch: 0, off: 0, s: 0, w: kind ? 1.75 + 0.3 * rnd() : 1.05, c0: kind ? 1.9 : 2.4 };
+  S.gl.push(o);
+  return o;
+}
+
+export function update(dt, input, params) {
+  if (!params.s) setup(params);
+  const S = params.s, k = input.knobValues || [0, 2, 0, 0.06];
+  dt = clamp(dt || 0, 0, 0.1);
+  S.hour = clamp(k[0], 0, 1);
+  const tempo = clamp(k[1], 0.2, 3) / 2, kg = clamp(k[2], 1, 4), n = (S.n = round(kg)), wind = clamp(k[3], -1, 1);
+  if (!S.started) {
+    S.started = true;
+    S.wind = wind;
+    S.ks = 1 + 0.14 * (kg - 1);
+    S.lean = wind * 0.22;
+    for (let i = 0; i < n; i++) addCraft(S, 0, "climb", 0, n === 1 ? 72 : 82 - (i * 36) / (n - 1), 1).th = rnd() * TAU;
+    for (const y of [86, 62]) addCraft(S, 1, "climb", 0, y, 1).th = rnd() * TAU;
+    for (let i = 0; i < 56; i++) S.down.push({ y: YB + rnd() * (YG - YB), a: rnd() * TAU, r: 0.5 + rnd() * 5.5, v: 3 + rnd() * 3, tw: rnd() * TAU });
+    // The cloud of the last thermal is drifting off as the next one starts.
+    S.clouds.push(Object.assign(newCloud(colX(S, YB) + (wind < 0 ? -24 : 24), 26), { det: true, al: 0.9 }), newCloud(colX(S, YB), 1.5));
+  }
+  const d = dt * tempo;
+  S.t += d;
+  S.wind += (wind - S.wind) * min(1, dt * 2);
+  S.ks += (1 + 0.14 * (kg - 1) - S.ks) * min(1, dt * 2);
+  S.lean = S.wind * 0.22;
+  const vd = (S.wind < 0 ? -2 : 2) + 6 * S.wind;
+  if (input.btnPressed && input.btnPressed[0]) {
+    const dir = rnd() < 0.5 ? 1 : -1, o = addCraft(S, 0, "launch", dir > 0 ? 4 + rnd() * 10 : 50 + rnd() * 10, 0, dir);
+    Object.assign(o, { yc: 121 + o.Z * SE, X0: o.X, cable: true });
+  }
+
+  // The thermal's cloud builds for 26 s, then drifts off and thins as a new one starts.
+  for (const c of S.clouds) {
+    c.a += d;
+    c.g = 1 - exp(-c.a / 6.5);
+    if (c.det) {
+      c.x += vd * d;
+      c.al -= d / 8;
+    } else {
+      c.x += (colX(S, YB) - c.x) * min(1, d * 0.6);
+      if (c.a > 26) {
+        c.det = true;
+        S.clouds.push(newCloud(colX(S, YB), 0));
+      }
+    }
+  }
+  S.clouds = S.clouds.filter((c) => c.al > 0);
+  // Far cumulus and the shadows of clouds out of sight drift with the wind and come round again.
+  for (const f of S.far.concat(S.shad)) {
+    f.x += vd * f.m * d;
+    if ((f.x - 32) * vd > 0 && abs(f.x - 32) > f.e) f.x = 32 - sign(f.x - 32) * (f.e - 1);
+  }
+
+  // Gliders and buzzards: launched, gliding in, circling up, or gliding off.
+  for (const o of S.gl) {
+    const cx = colX(S, o.yc) + (o.kind ? 2 : 0);
+    if (o.st === "launch") {
+      o.s += d;
+      const v = 16 * min(1, o.s / 0.5);
+      o.pitch = o.cable ? 0.95 * sstep(0.5, 1.1, o.s) : max(0, o.pitch - d * 1.2);
+      o.X += o.dir * v * cos(o.pitch) * d;
+      o.yc -= v * sin(o.pitch) * d;
+      if (o.cable && o.yc < 88) {
+        o.cable = false;
+        S.cable = { x: o.X + o.dir * 3, y: o.yc - o.Z * SE - 2.5, xw: o.X0 + o.dir * 58, t: 0 };
+      }
+      if (!o.cable && o.pitch <= 0) {
+        o.st = "climb";
+        o.off = o.X - cx;
+      }
+    } else if (o.st === "climb") {
+      const th0 = o.th;
+      o.th += o.w * d;
+      o.off *= exp(-d * 0.35);
+      o.yc -= o.c0 * (1 + 0.45 * cos(o.th + 0.8)) * d;
+      o.bank += ((o.kind ? 0.62 : 0.5) - o.bank) * min(1, d * 2);
+      if (o.yc < YB + (o.kind ? 18 : 8)) o.leave = true;
+      // Done, it straightens up the next time it flies across the panel.
+      if (o.leave && cos(th0) * cos(o.th) <= 0) {
+        o.st = "out";
+        o.th = sin(o.th) > 0 ? PI / 2 : -PI / 2;
+        o.dir = -sign(sin(o.th));
+      }
+      o.X = cx + o.off + o.R * cos(o.th);
+      o.Z = o.R * sin(o.th);
+    } else {
+      o.X += o.dir * o.R * o.w * d;
+      o.yc += (o.st === "out" ? 0.8 : 0.4) * d;
+      o.bank *= exp(-d * 3);
+      if (o.st === "in" && o.dir * (o.X - cx) >= 0) o.st = "climb";
+      if (abs(o.X - 32) > 56) o.gone = true;
+    }
+  }
+  S.gl = S.gl.filter((o) => !o.gone);
+  // Too many: the highest leaves early. Too few: a newcomer glides in low.
+  for (const kind of [0, 1]) {
+    const act = S.gl.filter((o) => o.kind === kind && o.st !== "out");
+    const want = kind ? 2 : n;
+    S.spawn[kind] -= d;
+    if (act.length < want && S.spawn[kind] <= 0) {
+      const dir = rnd() < 0.5 ? 1 : -1;
+      addCraft(S, kind, "in", 32 - dir * 46, (kind ? 84 : 86) + rnd() * 6, dir);
+      S.spawn[kind] = kind ? 1.5 + rnd() * 2 : 2.5;
+    } else if (act.length > want) {
+      const hi = act.filter((o) => o.st === "climb" && !o.leave).sort((p, q) => p.yc - q.yc)[0];
+      if (hi) hi.leave = true;
+    }
+  }
+  const cb = S.cable;
+  if (cb) {
+    cb.y += 9 * d;
+    if ((cb.t += d) > 2) S.cable = null;
+  }
+  // Thistledown rides the thermal up from the ploughed field.
+  for (const p of S.down) {
+    p.y -= p.v * d;
+    p.a += (1.6 / (1 + p.r * 0.3)) * d;
+    if (p.y < YB + 1) {
+      p.y = YG - 3 + rnd() * 5;
+      p.r = 0.5 + rnd() * 5.5;
+    }
+  }
+}
+
+// A tapered stroke into the coverage buffer, growing the box drawn into.
+function stroke(S, ax, ay, bx, by, ra, rb) {
+  const { A, bb } = S, x0 = max(0, floor(min(ax, bx) - 2)), x1 = min(W - 1, Math.ceil(max(ax, bx) + 2));
+  const y0 = max(0, floor(min(ay, by) - 2)), y1 = min(H - 1, Math.ceil(max(ay, by) + 2));
+  if (x0 > x1 || y0 > y1) return;
+  bb[0] = min(bb[0], x0);
+  bb[1] = min(bb[1], y0);
+  bb[2] = max(bb[2], x1);
+  bb[3] = max(bb[3], y1);
+  const dx = bx - ax, dy = by - ay, ll = dx * dx + dy * dy || 1;
+  for (let y = y0; y <= y1; y++)
+    for (let x = x0; x <= x1; x++) {
+      const px = x + 0.5 - ax, py = y + 0.5 - ay, t = clamp((px * dx + py * dy) / ll, 0, 1), ex = px - dx * t, ey = py - dy * t;
+      const a = clamp(ra + (rb - ra) * t + 0.5 - sqrt(ex * ex + ey * ey), 0, 1), i = y * W + x;
+      if (a > A[i]) A[i] = a;
+    }
+}
+function flush(S, col, alpha) {
+  const { A, buf, bb } = S;
+  for (let y = bb[1]; y <= bb[3]; y++)
+    for (let x = bb[0]; x <= bb[2]; x++) {
+      const i = y * W + x, a = min(1, A[i] * alpha);
+      if (a <= 0) continue;
+      A[i] = 0;
+      for (let c = 0; c < 3; c++) buf[i * 3 + c] += (col[c] - buf[i * 3 + c]) * a;
+    }
+  bb[0] = bb[1] = 1e9;
+  bb[2] = bb[3] = -1;
+}
+
+// A craft in its own frame (heading, pitch, bank), seen from below and to the side.
+function craft(S, o, h) {
+  const cl = o.st === "climb", hx = cl ? -sin(o.th) : o.dir, hz = cl ? cos(o.th) : 0, cp = cos(o.pitch), sp = sin(o.pitch);
+  const F = [hx * cp, sp, hz * cp], U0 = [-hx * sp, cp, -hz * sp], R0 = [-hz, 0, hx], cb = cos(o.bank * 0.7), sb = sin(o.bank * 0.7);
+  const U = [U0[0] * cb + R0[0] * sb, U0[1] * cb, U0[2] * cb + R0[2] * sb], R = [R0[0] * cb - U0[0] * sb, -U0[1] * sb, R0[2] * cb - U0[2] * sb];
+  const sy = o.yc - o.Z * SE;
+  const P = (f, r, u) => [o.X + F[0] * f + R[0] * r + U[0] * u, sy - (F[1] * f + R[1] * r + U[1] * u) * BC - (F[2] * f + R[2] * r + U[2] * u) * BE];
+  for (const m of o.kind ? BUZZ : GLIDER) {
+    const a = P(m[0], m[1], m[2]), b = P(m[3], m[4], m[5]);
+    stroke(S, a[0], a[1], b[0], b[1], m[6], m[7]);
+  }
+  // From below we see the shaded underside; banked towards us, the sunlit top.
+  const top = sstep(-0.3, 0.4, -U[1] * BE + U[2] * BC);
+  if (o.kind) return flush(S, [mix(58, 86, top), mix(42, 62, top), mix(30, 40, top)], 1);
+  const f = 0.84 + 0.16 * top;
+  flush(S, mix3([236, 240, 246], [255, 226, 176], h).map((v) => v * f), 1.35);
+  // Once a turn the wing tilts to the sun and flashes.
+  const gx = mix(-0.35, -0.8, h), gz = mix(1, 0.6, h);
+  const gl = (sstep(0.92, 1, ((R0[0] * gx + R0[2] * gz) / sqrt(gx * gx + gz * gz)) * sign(o.bank || 1)) * abs(o.bank)) / 0.5;
+  if (gl < 0.02) return;
+  const w = P(0.4, 3.5 * sign(o.bank || 1), 0.6);
+  for (let y = max(0, floor(w[1] - 5)); y <= min(H - 1, w[1] + 5); y++)
+    for (let x = max(0, floor(w[0] - 5)); x <= min(W - 1, w[0] + 5); x++) {
+      const ex = abs(x + 0.5 - w[0]), ey = abs(y + 0.5 - w[1]);
+      const v = gl * (exp(-sqrt(ex * ex + ey * ey) / 1.3) + 0.5 * exp(-min(ex, ey) * 2.5 - max(ex, ey) / 2.5)), q = (y * W + x) * 3;
+      S.buf[q] += 255 * v;
+      S.buf[q + 1] += 246 * v;
+      S.buf[q + 2] += mix(225, 170, h) * v;
+    }
+}
+
+function drawCloud(S, c, hw, ht, g, yb, al, haze) {
+  const { buf, t } = S, h = S.hour, B = [], lean = S.lean * 0.6;
+  let x0 = 1e9, x1 = -1e9, y0 = 1e9;
+  for (const p of c.p) {
+    const gr = sstep(p.t0, p.t0 + 0.25, g);
+    if (gr <= 0.02) continue;
+    const r = p.r * hw * gr * (1 + 0.05 * sin(t * 0.7 + p.ph)), bx = c.x + p.u * hw + lean * p.v * ht + 0.04 * hw * sin(t * 0.5 + p.ph);
+    const by = yb - p.v * ht - 0.03 * ht * sin(t * 0.4 + p.ph * 2);
+    B.push(bx, by, r);
+    x0 = min(x0, bx - r);
+    x1 = max(x1, bx + r);
+    y0 = min(y0, by - r);
+  }
+  const L = [mix(-0.45, -0.85, h), mix(-0.7, -0.28, h), 0.5], ll = sqrt(L[0] * L[0] + L[1] * L[1] + L[2] * L[2]);
+  const litC = mix3([252, 252, 250], [255, 214, 150], h);
+  const shC = mix3([150, 162, 192], [150, 124, 146], h).map((v) => v * (1 - 0.2 * g * (c.det ? 0.5 : 1)));
+  const baseC = mix3([126, 132, 152], [108, 90, 100], h).map((v) => v * mix(1, 0.78, g));
+  const hz = hazeOf(h);
+  for (let y = max(0, floor(y0 - 2)); y <= min(H - 1, yb + 1); y++)
+    for (let x = max(0, floor(x0 - 2)); x <= min(W - 1, x1 + 2); x++) {
+      const px = x + 0.5, py = y + 0.5;
+      // The normal blends the puffs nearby, weighted by how deep inside each the pixel is.
+      let best = -9, r = 1, sw = 0, nx = 0, ny = 0;
+      for (let i = 0; i < B.length; i += 3) {
+        const dx = (px - B[i]) / B[i + 2], dy = (py - B[i + 1]) / B[i + 2], v = 1 - sqrt(dx * dx + dy * dy);
+        if (v < -0.5) continue;
+        if (v > best) {
+          best = v;
+          r = B[i + 2];
+        }
+        const w = exp(7 * v);
+        sw += w;
+        nx += dx * w;
+        ny += dy * w;
+      }
+      if (best < -0.4) continue;
+      // Cauliflower edges; a cloud that is dying frays from the edges in.
+      const n = noise(px * 0.32, py * 0.32 - t * 0.12, c.sd);
+      const a = clamp((best + 0.32 * (n - 0.5) - (1 - al) * 0.8) * r * 0.7, 0, 1) * clamp(yb + 0.7 - py + 0.6 * noise(px * 0.4, 1, c.sd), 0, 1) * sqrt(al);
+      if (a <= 0) continue;
+      nx /= sw;
+      ny /= sw;
+      const nz = sqrt(max(0, 1 - nx * nx - ny * ny));
+      const lw = clamp(((nx * L[0] + ny * L[1] + nz * L[2]) / ll + 0.45) / 1.45 + 0.3 * (n - 0.5), 0, 1) * (0.55 + 0.45 * clamp((yb - py) / (0.45 * ht), 0, 1));
+      const bs = sstep(yb - 2.6, yb - 0.6, py), q = (y * W + x) * 3;
+      for (let k = 0; k < 3; k++) buf[q + k] += (mix(mix(mix(shC[k], litC[k], lw), baseC[k], bs), hz[k], haze) - buf[q + k]) * a;
+    }
+}
+
+export function draw(display, params) {
+  const S = params.s;
+  if (!S || !S.started) return;
+  if (S.painted === undefined || abs(S.painted - S.hour) > 0.003) paint(S);
+  const h = S.hour, buf = S.buf;
+  buf.set(S.bg);
+
+  // Cloud shadows: each thermal cloud's, pushed off its field by the sun, and two from clouds out of sight.
+  const sh = [];
+  for (const c of S.clouds) {
+    const ru = (((8 + 18 * c.g) * S.ks * DSRC) / 64) * 0.95 * (c.det ? sqrt(c.al) : 1);
+    sh.push(((c.x - 29 + 30 * h) * DSRC) / 64, DSRC * (1.04 + 1.1 * h), ru, ru * 1.3 + 0.5, c.al * (0.55 + 0.45 * c.g));
+  }
+  for (const s of S.shad) sh.push(((s.x - 32) * s.D) / 64, s.D, (s.r * s.D) / 64, s.rd, 1);
+  const sc = [0.46, 0.5, 0.62];
+  for (let p = FY * W; p < N; p++) {
+    let m = 0;
+    for (let i = 0; i < sh.length; i += 5) {
+      const du = (S.fu[p] - sh[i]) / sh[i + 2], dv = (S.fd[p] - sh[i + 1]) / sh[i + 3], q = du * du + dv * dv;
+      if (q < 2.2) m = max(m, sstep(1.05, 0.6, sqrt(q) + 0.35 * (S.fn[p] - 0.5)) * sh[i + 4]);
+    }
+    if (m > 0) for (let c = 0; c < 3; c++) buf[p * 3 + c] *= mix(1, sc[c], m);
+  }
+
+  // Far cumulus along the horizon, then the clouds the thermal builds.
+  for (const f of S.far) drawCloud(S, f, f.hw, f.ht, 1, f.yb, 0.9, 0.5);
+  for (const c of S.clouds) drawCloud(S, c, (8 + 18 * c.g) * S.ks, (6 + 26 * c.g) * S.ks, c.g, YB, c.det ? c.al : 1, 0);
+
+  // Thistledown catching the sun as it rises.
+  const dc = mix3([240, 240, 228], [255, 222, 160], h), nd = 26 + round((10 * (S.ks - 1)) / 0.14);
+  for (let i = 0; i < nd; i++) {
+    const p = S.down[i], x = round(colX(S, p.y) + p.r * cos(p.a) + 0.8 * sin(S.t * 1.7 + p.tw) - 0.5), y = round(p.y + p.r * sin(p.a) * SE - 0.5);
+    if (x < 0 || x >= W) continue;
+    const a = (0.45 + 0.4 * sin(S.t * 3 + p.tw * 5)) * sstep(YB, YB + 8, p.y) * sstep(YG + 2, YG - 6, p.y);
+    for (let k = 0, q = (y * W + x) * 3; k < 3; k++) buf[q + k] += (dc[k] - buf[q + k]) * a;
+  }
+
+  // The winch cable, and the one that falls on its red parachute after release.
+  const dark = [36, 34, 38];
+  for (const o of S.gl)
+    if (o.cable) {
+      stroke(S, o.X + o.dir * 3 * cos(o.pitch), o.yc - o.Z * SE - 3 * sin(o.pitch), o.X0 + o.dir * 58, 118, 0.18, 0.18);
+      flush(S, dark, 0.75);
+    }
+  const cb = S.cable;
+  if (cb) {
+    stroke(S, cb.x, cb.y, cb.xw, 118, 0.18, 0.18);
+    flush(S, dark, 0.75 * (1 - cb.t / 2));
+    stroke(S, cb.x, cb.y - 1, cb.x, cb.y - 1, 0.7, 0.7);
+    flush(S, [230, 50, 40], 1 - cb.t / 2);
+  }
+  // Gliders and buzzards, the far side of their circles first.
+  for (const o of S.gl.slice().sort((p, q) => p.Z - q.Z)) craft(S, o, h);
+
+  for (let p = 0; p < N; p++) display.setPixel(p % W, (p / W) | 0, min(255, buf[p * 3]) | 0, min(255, buf[p * 3 + 1]) | 0, min(255, buf[p * 3 + 2]) | 0);
+}
diff --git a/incoming/pattern-study/patterns/tower-crane.js b/incoming/pattern-study/patterns/tower-crane.js
new file mode 100644
index 000000000..60395450f
--- /dev/null
+++ b/incoming/pattern-study/patterns/tower-crane.js
@@ -0,0 +1,445 @@
+// ===== Patternflow pattern =====
+// Title:   Tower Crane
+// Family:  construction
+// Idea:    A yellow tower crane hoists a precast wall, rebar, formwork and the concrete bucket from the yard to the top deck of a concrete frame going up at dusk, slewing its jib round in perspective, and each pour adds a floor.
+// Author:  patternflow-lab
+// Date:    2026-10-24
+// SPDX-License-Identifier: CC-BY-SA-4.0
+// Lineage: original, pattern round 24, after the tower cranes that stand beside a rising concrete frame
+// Round:   24
+// ===============================
+// @matrix 64x128
+// @knobs Dusk=0..1, Speed=0.2..3, Floors=9..13, Wind=-1..1
+//
+// Knob 1: Dusk. From late afternoon at 0, the sun low over the yard and the frame lit gold, to night at 1, when the sky goes navy, the floodlight and the trolley's lamp come on and most windows are lit.
+// Knob 2: Speed. At 2 one lift takes about ten seconds: down to the yard, rig, hoist the whole height, slew over and set down. At 0.2 it all runs ten times slower.
+// Knob 3: Floors. How many floors are up when it starts, nine to thirteen. Every fourth lift is the concrete bucket, and its pour adds a floor until the frame has thirteen and tops out with a fir tree on the roof.
+// Knob 4: Wind. Clouds thicken and drift with it either way, their shadows cross the frame, and the load leans and swings on its cable.
+// Buttons: K1 tap sets the floor's formwork in place and pours the deck at once, and the building grows a floor.
+
+const [W, H] = [64, 128];
+const N = W * H;
+const { min, max, floor, round, sin, cos, abs, exp, PI } = Math;
+const TAU = 2 * PI;
+const cl = (v, a, b) => (v < a ? a : v > b ? b : v);
+const mix = (a, b, t) => a + (b - a) * t;
+const sm = (a, b, v) => ((v = cl((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));
+const rnd = () => Math.random();
+function hash(i, j) {
+  let h = (Math.imul(i, 374761393) + Math.imul(j, 668265263)) | 0;
+  h = Math.imul(h ^ (h >>> 13), 1274126177);
+  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;
+}
+function vn(x, y) {
+  const xi = floor(x), yi = floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v);
+  const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1);
+  return a + (b - a) * su + (c - a) * sv + (a - b - c + hash(xi + 1, yi + 1)) * su * sv;
+}
+
+// Street level, one storey, and the most floors that fit under the jib.
+const [GY, FH, NMAX] = [114, 6, 13];
+// The frame, x 3 to 39: six columns two LEDs wide, five bays, the one by the crane the lift core.
+const [BX0, BX1, CORE] = [3, 39, 4];
+// Mast centre, the jib's bottom chord at the root, jib and counter-jib lengths, top of the tower head.
+const [MX, JY, JL, CJL, APEX] = [46, 15, 42, 15, 3];
+// The hook's highest row, the radius it picks at over the yard, the yard's load line.
+const [HTOP, PICK_R, PICK_Y] = [21, 11, 120];
+// Wall panel, rebar, formwork, bucket: width, height, the column it is set down on.
+const LW = [8, 11, 9, 5], LH = [5, 2, 4, 6], DROP = [35, 20, 12, 6];
+// Sky top, middle, horizon; sun; lit and shaded cloud; light on things. Afternoon to night.
+const KEYS = [
+  [34, 72, 156, 128, 142, 186, 255, 190, 112, 255, 236, 170, 255, 236, 204, 150, 130, 160, 1, 0.9, 0.74],
+  [30, 50, 130, 168, 108, 140, 255, 140, 62, 255, 168, 78, 255, 170, 116, 104, 70, 108, 0.86, 0.64, 0.48],
+  [16, 20, 70, 64, 44, 96, 196, 86, 78, 226, 90, 52, 176, 92, 104, 46, 36, 66, 0.44, 0.38, 0.46],
+  [4, 6, 22, 10, 14, 40, 44, 34, 60, 0, 0, 0, 42, 36, 56, 16, 16, 30, 0.2, 0.21, 0.3],
+];
+const FLC = [1, 0.94, 0.82];
+const YEL = [255, 196, 22];
+// The floodlight tower in the yard and where it is aimed.
+const [LX, LY] = [60.5, 84.5];
+const [AX, AY] = (([x, y]) => [x / Math.hypot(x, y), y / Math.hypot(x, y)])([-34, 31]);
+
+export function setup(params) {
+  const F = (n) => new Float32Array(n);
+  const P = (params.s = {
+    f: F(N * 3), bg: F(N * 3), lm: F(N * 3), fl: F(N), row: F(H * 3), cloud: F(128 * 64), sky: new Int16Array(W),
+    t: 0, rt: 0, nk: -1, stage: 3, cage: 1, form: 1, item: -1, lightNew: -1, th: PI, r: 40, load: 3, ph: "I", sw: 0, swv: 0, vx: 0, ptx: 6,
+    on: new Uint8Array(NMAX), onT: F(NMAX).fill(9), nsw: 2.4, cx: 0, sp: [], weld: 0.4, welding: 0, wk: [], mix: 2, cars: [], ncar: 1.4,
+  });
+  // Clouds: a strip of soft noise that wraps every 128 columns.
+  for (let i = 0; i < 128 * 64; i++) {
+    const x = i & 127, y = i >> 7, f = (X) => 0.55 * vn(X * 0.05, y * 0.13) + 0.3 * vn(X * 0.13, y * 0.3 + 9) + 0.15 * vn(X * 0.4, y * 0.6 + 3);
+    P.cloud[i] = mix(f(x), f(x + 128), x / 128);
+  }
+  // The city behind: blocks of four to nine columns.
+  for (let x = 0, w = 0, h = 0; x < W; x++, w--) w > 0 || ((w = 4 + floor(rnd() * 6)), (h = 98 + floor(rnd() * 12))), (P.sky[x] = h);
+  for (let k = 0; k < NMAX; k++) (P.on[k] = rnd() < 0.35 ? 1 : 0), k < 3 && P.wk.push({ x: 8 + k * 11 + rnd() * 4, tx: 8 + rnd() * 28, wait: rnd() * 2 });
+}
+
+// A move of the crane: slew angle, trolley radius and hook row, eased to where they go.
+function go(P, ph, dur, to) {
+  Object.assign(P, { ph, pt: 0, pd: dur, f0: [P.th, P.r, P.hy], f1: [to.th ?? P.th, to.r ?? P.r, to.hy ?? P.hy] });
+}
+
+const deckY = (P) => GY - P.n * FH;
+const tip = (P) => [MX + P.r * cos(P.th), JY + 1 - P.r * sin(P.th) * 0.1];
+const bucketHy = (P) => deckY(P) - FH - 2 - LH[3] - 3;
+
+function finishFloor(P) {
+  if (P.n < NMAX) P.n++;
+  else P.top = 1;
+  // The floor that has just been glazed lights up a moment later.
+  Object.assign(P, { stage: 0, cage: 0, form: 0, item: -1, pourX: -1, nsw: min(P.nsw, 0.7), lightNew: P.n - 3 });
+}
+
+// Down to the yard, rig, hoist, slew over, lower, set down (or pour), up again.
+function step(P) {
+  const T = P.ph, type = P.load;
+  if (T === "A") go(P, "B", 0.5, {});
+  else if (T === "B") (P.load = P.top && P.stage > 2 ? (P.stage = 0) : P.stage), go(P, "C", 2.8, { hy: HTOP });
+  else if (T === "C") go(P, "D", 2.4, { th: P.th + PI, r: MX - DROP[type] });
+  else if (T === "D") go(P, "E", 1.5, { hy: type === 3 ? bucketHy(P) : deckY(P) - 4 - LH[type] });
+  else if (T === "E") {
+    if (type === 3) (P.pourX = BX0), go(P, "P", 3, { r: MX - BX1 + 2 });
+    else {
+      // Set down: the panel goes into the core, rebar and formwork lie on the deck.
+      const x = round(tip(P)[0]);
+      if (type) (P.item = type), (P.ix = x), type < 2 ? (P.cage = 0) : (P.form = 0);
+      for (const w of P.wk) w.tx = x + (rnd() - 0.5) * 10;
+      (P.stage = max(P.stage, type + 1)), (P.load = -1), go(P, "F", 0.9, {});
+    }
+  } else if (T === "P" || T === "I") finishFloor(P), go(P, "F", 0.4, {});
+  else if (T === "F") go(P, "G", 0.5, { hy: P.hy - 12 });
+  else (P.load = -1), go(P, "A", 1.5, { th: (floor(P.th / TAU + 1e-3) + 1) * TAU, r: PICK_R, hy: PICK_Y - LH[P.stage] - 3 });
+}
+
+export function update(dt, input, params) {
+  if (!params.s) setup(params);
+  const P = params.s, k = input.knobValues || [0, 2, 0, 0.06], rd = cl(dt || 0, 0, 0.1), d = rd * (cl(k[1], 0.2, 3) / 2), nf = round(cl(k[2], 9, 13));
+  if (nf !== P.nk) {
+    // A new count of floors: the hook keeps its place over the deck.
+    const sh = (nf - P.n) * FH;
+    P.nk = P.n = nf;
+    P.top = 0;
+    if (P.ph === "I") (P.hy = bucketHy(P)), (P.pourX = BX0), go(P, "I", 3, { r: MX - BX1 + 2 });
+    else if ("EPFG".includes(P.ph)) (P.hy -= sh), (P.f0[2] -= sh), (P.f1[2] -= sh);
+  }
+  P.w = cl(k[3], -1, 1);
+  const t = (P.t += d), k0 = cl(k[0], 0, 1);
+  P.rt += rd;
+  // The evening deepens a little and comes back once every minute and a half.
+  P.h = k0 + (1 - k0) * 0.05 * (1 - cos((TAU * t) / 90));
+  // K1 tap: everything for the floor is in place at once and the deck pours.
+  if (input.btnPressed && input.btnPressed[0] && P.pourX < 0 && !P.top) Object.assign(P, { pourBtn: 1, pourX: BX0, stage: 3, cage: 1, form: 1 });
+  const lin = min(1, (P.pt += d) / P.pd), u = sm(0, 1, lin), pour = P.ph === "P" || P.ph === "I";
+  P.th = mix(P.f0[0], P.f1[0], u);
+  P.r = mix(P.f0[1], P.f1[1], pour ? lin : u);
+  P.hy = mix(P.f0[2], P.f1[2], u);
+  if (pour) P.pourX = max(P.pourX, tip(P)[0] + 2);
+  if (lin >= 1) step(P);
+  if (P.pourBtn && (P.pourX += 30 * d) > BX1) (P.pourBtn = 0), finishFloor(P);
+  // The load swings on its cable when the trolley speeds up or slows, and in the wind.
+  const [tx, ty] = tip(P), L = max(4, P.hy - ty);
+  if (d > 0) {
+    const vx = (tx - P.ptx) / d, ax = cl((vx - P.vx) / d, -30, 30), eq = P.w * (0.06 + 0.04 * sin(t * 1.7)) * (P.load >= 0 ? 1 : 1.6);
+    P.swv += (-(110 / L) * (P.sw - eq) - (0.5 * ax) / L - 1.4 * P.swv) * d;
+    P.sw = cl(P.sw + P.swv * d, -0.3, 0.3);
+    [P.ptx, P.vx] = [tx, vx];
+  }
+  // The rigger steadies the load before it goes up.
+  if (P.ph === "B") (P.sw *= 1 - min(1, 5 * d)), (P.swv *= 1 - min(1, 5 * d));
+  P.swx = cl(L * sin(P.sw), -2.5, 2.5);
+  // The rebar is tied up the columns and the formwork goes round them.
+  if (P.stage > 1) P.cage = min(1, P.cage + d * 0.3);
+  if (P.stage > 2) P.form = min(1, P.form + d * 0.3);
+  // A floor switches its lights on or off together.
+  for (let i = 0; i < NMAX; i++) P.onT[i] += rd;
+  if ((P.nsw -= d) <= 0) {
+    const f = P.lightNew >= 0 ? P.lightNew : floor(rnd() * max(1, P.n - 2));
+    P.on[f] = P.lightNew >= 0 ? 1 : 1 - P.on[f];
+    Object.assign(P, { lightNew: -1, nsw: 1.6 + rnd() * 2 }).onT[f] = 0;
+  }
+  // Welding on the deck, and its sparks falling down the face.
+  if ((P.weld -= d) <= 0) (P.welding = 1 - P.welding), (P.weld = P.welding ? 1.4 + rnd() * 1.6 : 0.4 + rnd() * 0.8);
+  const wy = deckY(P) - 2;
+  if (P.welding) for (let n = 0; n < 4; n++) if (rnd() < d * 18) P.sp.push([18 + rnd(), wy, (rnd() - 0.5) * 14, -4 - rnd() * 7, 1 + rnd() * 0.9, 18.5, wy]);
+  P.sp = P.sp.filter((s) => ((s[5] = s[0]), (s[6] = s[1]), (s[3] += 46 * d), (s[0] += s[2] * d), (s[1] += s[3] * d), (s[4] -= d) > 0 && s[1] < GY));
+  // Workers walk about the deck.
+  for (const w of P.wk)
+    if (abs(w.tx - w.x) > 0.3) w.x = cl(w.x + cl(w.tx - w.x, -4 * d, 4 * d), 5, 37);
+    else if ((w.wait -= d) <= 0) (w.tx = 6 + rnd() * 30), (w.wait = 1 + rnd() * 3);
+  // The mixer comes in for the bucket and backs out after the pour.
+  P.mix += cl((P.stage >= 2 && !P.top ? 2 : -26) - P.mix, -9 * d, 9 * d);
+  // Cars along the street.
+  if ((P.ncar -= d) <= 0) (P.ncar = 2 + rnd() * 4), P.cars.push(rnd() < 0.5 ? [-8, 11 + rnd() * 6, floor(rnd() * 4)] : [W + 1, -11 - rnd() * 6, floor(rnd() * 4)]);
+  P.cars = P.cars.filter((c) => ((c[0] += c[1] * d), c[0] > -12 && c[0] < W + 12));
+  // Clouds drift with the wind.
+  P.cx += (1.5 + 9 * P.w) * d;
+}
+
+let F, LM;
+const at = (x, y) => ((x = round(x)), (y = round(y)), x < 0 || x >= W || y < 0 || y >= H ? -1 : (y * W + x) * 3);
+function put(x, y, c, a = 1, o = at(x, y)) {
+  if (o >= 0) for (let i = 0; i < 3; i++) F[o + i] = mix(F[o + i], c[i], a);
+}
+function add(x, y, c, k, o = at(x, y)) {
+  if (o >= 0) for (let i = 0; i < 3; i++) F[o + i] += c[i] * k;
+}
+// A surface: its own colour under the light that falls on that LED.
+function sur(x, y, r, g, b, k = 1, o = at(x, y)) {
+  if (o >= 0) (F[o] = r * LM[o] * k), (F[o + 1] = g * LM[o + 1] * k), (F[o + 2] = b * LM[o + 2] * k);
+}
+const surc = (x, y, c, k = 1) => sur(x, y, c[0], c[1], c[2], k);
+// A lamp's glow round it, and a worker three LEDs tall.
+const glow = (x, y, c, k) => {
+  for (let j = -2; j <= 2; j++) for (let i = -2; i <= 2; i++) if (i || j) add(x + i, y + j, c, k / (i * i + j * j));
+};
+const man = (x, y, head = [250, 250, 240]) => (sur(x, y, 50, 56, 90), sur(x, y - 1, 255, 130, 20), surc(x, y - 2, head));
+function line(x0, y0, x1, y1, c, k = 1) {
+  const n = max(abs(x1 - x0), abs(y1 - y0)) * 1.2 + 1;
+  for (let i = 0; i <= n; i++) surc(mix(x0, x1, i / n), mix(y0, y1, i / n), c, k);
+}
+
+// Sky, sun and the city beyond, kept until the evening moves on.
+function sky(P, K) {
+  const h = P.h, B = P.bg;
+  if (round(h * 300) === P.bgKey) return F.set(B);
+  P.bgKey = round(h * 300);
+  const row = P.row, night = sm(0.4, 0.9, h), vis = 1 - sm(0.78, 0.95, h);
+  for (let y = 0; y < H; y++) {
+    const f = min(1, y / GY), a = f < 0.5 ? 0 : 3, u = f < 0.5 ? f / 0.5 : (f - 0.5) / 0.5;
+    for (let c = 0; c < 3; c++) row[y * 3 + c] = mix(K[a + c], K[a + 3 + c], a ? u * u : sm(0, 1, u));
+  }
+  for (let i = 0; i < N; i++) {
+    const x = i & 63, y = i >> 6, o = i * 3;
+    if (y >= P.sky[x]) {
+      const win = night * (hash(x, y * 3) < 0.16 && y & 1 ? 1 : 0);
+      for (let c = 0; c < 3; c++) B[o + c] = mix(K[3 + c], K[6 + c], 0.55) * 0.6 * (x & 1 ? 1 : 0.86) + win * [210, 160, 90][c];
+      continue;
+    }
+    const d = Math.hypot(x - 54.5, y - 61.5 - 52 * h), g = vis * (0.55 * exp(-((d - 3.6) ** 2) / 50) + 0.3 * exp(-d / 16));
+    for (let c = 0; c < 3; c++) B[o + c] = d < 3.6 && vis > 0 ? mix(row[y * 3 + c], K[9 + c], vis) : row[y * 3 + c] + K[9 + c] * g * 0.7;
+  }
+  F.set(B);
+}
+
+function clouds(P, K) {
+  const cover = 0.56 - 0.18 * abs(P.w), C = P.cloud;
+  for (let y = 0; y < 100; y++) {
+    const ty = floor(y * 0.6) & 63, fade = 1 - sm(50, 100, y);
+    for (let x = 0; x < W; x++) {
+      if (y >= P.sky[x]) continue;
+      const v = C[(ty << 7) | (floor(x + P.cx) & 127)], a = cl((v - cover) * 7, 0, 1) * fade, lt = cl(1.25 - (v - cover) * 4 + (y - 40) / 120, 0, 1);
+      if (a > 0.01) put(x, y, [mix(K[15], K[12], lt), mix(K[16], K[13], lt), mix(K[17], K[14], lt)], a * 0.92);
+    }
+  }
+}
+
+// The light on every surface: the day, cloud shadows, the floodlights after dusk.
+function light(P, K) {
+  const sunA = 1 - sm(0.45, 0.85, P.h), fon = sm(0.3, 0.55, P.h), FLb = P.fl, C = P.cloud;
+  const cover = 0.5 - 0.18 * abs(P.w), [tx, ty] = tip(P), hx = tx + P.swx * 0.5;
+  for (let i = 0; i < N; i++) {
+    const x = i & 63, y = i >> 6, o = i * 3, v = C[((floor(y * 0.25 + 20) & 63) << 7) | (floor(x * 0.8 + P.cx * 2.2 + 40) & 127)];
+    let fl = 0;
+    if (fon > 0) {
+      const dx = x + 0.5 - LX, dy = y + 0.5 - LY, dd = Math.hypot(dx, dy) + 0.01, ca = (dx * AX + dy * AY) / dd;
+      fl = (exp((ca - 1) / 0.03) * 1.2) / (1 + (dd / 60) ** 2);
+      if (y > ty + 1) {
+        const q = (x + 0.5 - hx) / (1.2 + 0.16 * (y - ty));
+        fl += (exp(-q * q) * 0.7) / (1 + ((y - ty) / 90) ** 2);
+      }
+      fl *= fon;
+    }
+    FLb[i] = fl;
+    for (let c = 0; c < 3; c++) LM[o + c] = K[18 + c] * (1 - 0.45 * sunA * cl((v - cover) * 5, 0, 1)) + fl * FLC[c];
+  }
+}
+
+// The yard's gravel, the kerb, the street and its markings.
+function ground() {
+  for (let i = GY * W; i < N; i++) {
+    const x = i & 63, y = i >> 6, n = 0.82 + 0.3 * hash(x, y + 900);
+    y === 126 && (x + 6) % 8 < 2 ? sur(x, y, 190, 180, 120) : y > 123 ? sur(x, y, 62 * n, 60 * n, 66 * n) : y > 122 ? sur(x, y, 150, 146, 140) : sur(x, y, 150 * n, 126 * n, 98 * n);
+  }
+}
+
+// The concrete frame, its windows, and the floor going up on the deck.
+function building(P) {
+  const n = P.n, dk = deckY(P), g = n - 2, night = sm(0.4, 0.9, P.h), row = P.row;
+  for (let y = dk; y < GY; y++) {
+    const k = floor((GY - 1 - y) / FH), ry = y - (GY - (k + 1) * FH);
+    for (let x = BX0; x <= BX1; x++) {
+      const cx = (x - BX0) % 7, b = floor((x - BX0) / 7), bx = cx - 2;
+      if (ry === 0) sur(x, y, 228, 220, 206);
+      else if (cx < 2) sur(x, y, 206, 198, 184);
+      else if (ry === 1) k < g ? sur(x, y, 78, 86, 102) : sur(x, y, 178, 172, 162);
+      else if (b === CORE) sur(x, y, 196, 190, 180, (x + y) % 9 === 0 ? 0.8 : 0.95);
+      else if (k < g && bx === 2) sur(x, y, 80, 80, 88);
+      else if (k < g) {
+        // Glass: the sky in it, or a lit room behind.
+        const o = (y * W + x) * 3, rr = cl(round(y * 0.3 + 4), 0, GY - 1) * 3;
+        let on = P.on[k] ? hash(k, b * 7 + 1) < 0.92 : hash(k, b * 7 + 3) < 0.1 + 0.6 * night;
+        if (on && P.on[k] && P.onT[k] < 0.5) on = hash(k * 13 + b, floor(P.onT[k] * 22)) > 0.45;
+        const lc = hash(k, b + 40) < 0.75 ? [255, 184, 88] : [200, 228, 255], a = on ? 0.9 + 0.1 * night : 0;
+        for (let c = 0; c < 3; c++) F[o + c] = mix(row[rr + c] * 0.42 + c * 5, lc[c], a) * (ry === 2 ? 1.12 : 1);
+      } else {
+        // An open floor: dark inside, the back columns, a work lamp at night.
+        if (night > 0.05 && bx === 2 && ry === 2 && hash(k, b) < 0.6) put(x, y, [255, 214, 150].map((v) => v * night));
+        else sur(x, y, 60, 54, 52, bx === 2 ? 0.6 : 0.28);
+      }
+    }
+  }
+  // Ties from the mast to the frame.
+  for (let k = 2; k < n; k += 3) for (let x = BX1 + 1; x < MX - 2; x++) sur(x, GY - (k + 1) * FH + 1, 200, 170, 60);
+
+  // The floor on the deck: starter bars, the core panel, the rebar cages, the formwork.
+  const top = dk - FH, st = P.top ? 0 : P.stage;
+  if (st > 0) for (let y = top + 1; y < dk; y++) for (let x = BX0 + 30; x <= BX0 + 34; x++) sur(x, y, 176, 172, 164, x === BX0 + 32 ? 0.8 : 1);
+  for (let ci = 0; ci < 6; ci++) {
+    const x = BX0 + ci * 7;
+    for (let j = 1; j <= max(2, st > 1 ? round(P.cage * 5) : 0); j++) sur(x, dk - j, 176, 96, 50), j & 1 && sur(x + 1, dk - j, 130, 76, 44);
+    if (st > 2 && ci / 6 < P.form) for (let j = 1; j < FH; j++) sur(x, dk - j, 218, 162, 84), sur(x + 1, dk - j, 196, 140, 70);
+  }
+  if (st > 2) for (let x = BX0; x <= BX0 + 36 * P.form; x++) for (let j = 0; j < ((x - BX0) % 7 === 4 ? FH : 1); j++) j ? sur(x, top + j, 150, 150, 156, 0.8) : sur(x, top, 214, 156, 80);
+  if (P.pourX >= 0 && !P.top) for (let x = BX0; x <= min(BX1, P.pourX); x++) sur(x, top, 140, 140, 150), (x - BX0) % 7 < 2 && sur(x, top + 1, 140, 140, 150, 0.9);
+  if (P.item > 0) drawLoad(P.item, P.ix, dk - LH[P.item]);
+  // Topped out: a little fir tree on the roof.
+  if (P.top) for (let j = 0; j < 5; j++) for (let i = -j; i <= j; i++) sur(24 + i, dk - 6 + j, 40, 120, 60);
+  // The workers on the deck in hi-vis, and the welder by a column.
+  for (const w of P.wk) man(w.x, dk - 1);
+  man(17, dk - 1, [60, 60, 70]);
+}
+
+// One of the four loads, centred on x with its top on row y0.
+function drawLoad(type, cx, y0) {
+  const w = LW[type], h = LH[type], x0 = round(cx - w / 2), y = round(y0);
+  for (let j = 0; j < h; j++)
+    for (let i = 0; i < w; i++) {
+      const X = x0 + i, Y = y + j;
+      if (type === 0) (i < 2 || i > 4 || !j || j > 3) && sur(X, Y, 150, 146, 140, i && j ? 1 : 1.25);
+      else if (type === 1) sur(X, Y, i === 2 || i === 8 ? 60 : 186, i === 2 || i === 8 ? 54 : 92, 48, j ? 0.72 : 1);
+      else if (type === 2) sur(X, Y, 226, 170, 92, j & 1 ? 0.55 : 1);
+      else if (i >= (j >= h - 2 ? 1 : 0) && i < w - (j >= h - 2 ? 1 : 0)) sur(X, Y, 120, 120, 128, j === 1 ? 0.6 : j === 0 ? 1.3 : 1);
+    }
+  if (type === 3) sur(x0 + 2, y + h, 70, 70, 76);
+}
+
+// The hook block, its cable and slings, and whatever it carries.
+function hook(P) {
+  const [tx, ty] = tip(P), hx = tx + P.swx, hy = P.hy;
+  line(tx, ty + 1, hx, hy - 1, [120, 120, 130], 0.9);
+  for (let i = -1; i <= 1; i++) surc(hx + i, hy - 1, YEL);
+  sur(hx, hy, 60, 60, 66), sur(hx, hy + 1, 90, 90, 96);
+  if (P.load >= 0) {
+    const w = LW[P.load] / 2 - 0.5;
+    line(hx, hy + 1, hx - w, hy + 3, [110, 110, 116], 0.8), line(hx, hy + 1, hx + w, hy + 3, [110, 110, 116], 0.8);
+    drawLoad(P.load, hx + 0.5, hy + 3);
+    // Concrete runs from the bucket into the forms.
+    if (P.ph === "P" || P.ph === "I") for (let j = hy + 10; j < deckY(P) - FH; j++) sur(hx + 0.5, j, 140, 140, 150);
+  }
+}
+
+// The yard: stock waiting by the crane, the load being rigged, the floodlight tower.
+function yard(P) {
+  drawLoad(2, 53, 115), drawLoad(1, 54, 118);
+  if (P.ph === "A" || P.ph === "B") {
+    const s = P.stage, x = MX + PICK_R - LW[s] / 2 - 2, arm = P.ph === "B" ? (P.pt * 6) & 1 : 0;
+    drawLoad(s, MX + PICK_R + 0.5, PICK_Y - LH[s]);
+    man(x, PICK_Y - 1), sur(x + 1, PICK_Y - 2 - arm, 255, 130, 20);
+  }
+  for (let y = LY; y < 122; y++) sur(62, y, 120, 120, 126);
+  const fon = sm(0.3, 0.55, P.h);
+  for (let x = 59; x <= 62; x++) put(x, 83, [90, 90, 96]), put(x, 84, x < 62 ? [70 + 185 * fon, 70 + 180 * fon, 76 + 154 * fon] : [90, 90, 96]);
+}
+
+// The crane: mast, ties, slewing ring, cab, tower head, jib and counter-jib.
+function crane(P) {
+  const c = cos(P.th), sn = sin(P.th), blink = P.rt % 1.2 < 0.55, fon = sm(0.3, 0.55, P.h);
+  const jib = () => {
+    for (let s = 0; s <= JL; s += 0.3) {
+      // Swung towards you the tip is nearer and bigger, swung away it shrinks.
+      const sc = 1 + (0.45 * s * sn) / JL, px = MX + s * c, py = JY - s * sn * 0.1, ht = (3 - (1.2 * s) / JL) * sc, tri = abs(((s / 2.4) % 2) - 1), wd = sn * 1.2 * sc;
+      surc(px - wd, py, YEL, 0.85), surc(px + wd, py, YEL, 0.85), surc(px, py - ht, YEL), surc(px + wd * (1 - tri), py - tri * ht, YEL, 0.75);
+    }
+  };
+  const counter = () => {
+    for (let s = 0; s <= CJL; s += 0.3) {
+      const px = MX - s * c, py = JY + s * sn * 0.1;
+      surc(px, py, YEL, 0.85), surc(px, py - 1, YEL, s % 2 < 0.6 ? 0.8 : 0);
+      if (s > 6 && s < 8.5) for (let j = 1; j <= 2; j++) sur(px, py - 1 - j, 80, 84, 92);
+      if (s > CJL - 5) for (let j = 1; j <= 4; j++) sur(px, py + j, 190, 184, 172, (floor(s) & 1) === 0 ? 0.8 : 1);
+    }
+  };
+  const pend = () => {
+    line(MX, APEX + 1, MX + 28 * c, JY - 28 * sn * 0.1 - 2.2, [110, 104, 96], 0.8);
+    line(MX, APEX + 1, MX - CJL * c, JY + CJL * sn * 0.1 - 1, [110, 104, 96], 0.8);
+  };
+  const cab = () => {
+    for (let q = 0, i, j; q < 12; q++)
+      (i = (q % 3) - 1), (j = (q / 3) | 0), j % 3 && i > -1 ? put(MX + 3.5 * c + i, JY + 1 + j, P.h > 0.5 ? [255 * fon, 226 * fon, 160 * fon] : [110, 150, 196]) : surc(MX + 3.5 * c + i, JY + 1 + j, [240, 232, 210]);
+  };
+  // What faces away is drawn first.
+  if (sn < 0) jib(), pend(), cab();
+  else counter(), pend();
+  // The mast: two chords and a lattice of diagonals.
+  for (let y = JY + 3; y < 118; y++) {
+    surc(MX - 2, y, YEL, 0.72), surc(MX + 2, y, YEL);
+    for (let xi = 1; xi <= 3; xi++) if (((y + xi) & 3) === 0 || ((y - xi) & 3) === 0) surc(MX - 2 + xi, y, YEL, 0.8);
+  }
+  for (let x = MX - 4; x <= MX + 4; x++) sur(x, 117, 170, 166, 160), sur(x, 118, 170, 166, 160), sur(x, 119, 170, 166, 160), abs(x - MX) < 4 && (sur(x, JY + 1, 80, 80, 86), sur(x, JY + 2, 110, 110, 116));
+  // The tower head.
+  for (let y = APEX; y <= JY - 3; y++) {
+    const hw = (1.6 * (y - APEX)) / (JY - 3 - APEX);
+    surc(MX - hw, y, YEL), surc(MX + hw, y, YEL);
+    if ((y & 1) === 0) for (let x = round(MX - hw); x <= MX + hw; x++) surc(x, y, YEL, 0.8);
+  }
+  if (sn < 0) counter(), pend();
+  else jib(), pend(), cab();
+  // The trolley, and the warning lights on the head and at the jib tip.
+  const [tx, ty] = tip(P);
+  sur(tx - 1, ty, 90, 90, 96), sur(tx, ty, 90, 90, 96), sur(tx + 1, ty, 90, 90, 96);
+  for (const [x, y] of [[MX, APEX - 1], [MX + JL * c, JY - JL * sn * 0.1 - 2]]) {
+    put(x, y, blink ? [255, 40, 28] : [110, 20, 16]);
+    if (blink) glow(x, y, [255, 30, 20], 0.12 + 0.3 * fon);
+  }
+}
+
+// The mixer, its drum turning.
+function mixer(P) {
+  const x0 = round(P.mix), night = sm(0.4, 0.9, P.h);
+  if (x0 < -24) return;
+  for (let y = 115; y <= 121; y++)
+    for (let i = 0; i < 13; i++) {
+      const e = ((i - 6) / 6.8) ** 2 + ((y - 118 + (i - 6) * 0.18) / 3.4) ** 2;
+      if (e < 1) sur(x0 + i, y, ...((((i * 0.7 + y * 1.4 - P.t * 9) % 4) + 4) % 4 < 2 ? [240, 120, 40] : [230, 228, 220]), 1 - 0.3 * e);
+    }
+  for (let i = 0; i < 20; i++) sur(x0 + i, 122, 70, 70, 76);
+  for (let y = 116; y < 122; y++) for (let i = 15; i < 20; i++) sur(x0 + i, y, ...(y < 119 && i > 16 ? [110, 150, 190] : [230, 60, 40]));
+  for (const i of [2, 5, 16]) sur(x0 + i, 123, 30, 30, 34), sur(x0 + i + 1, 123, 30, 30, 34);
+  if (night > 0.1) add(x0 + 20, 120, [255, 240, 200], night);
+}
+
+function cars(P) {
+  const night = sm(0.35, 0.9, P.h), cols = [[200, 40, 36], [220, 220, 226], [40, 80, 170], [60, 64, 70]];
+  for (const [cx, v, ci] of P.cars) {
+    const x0 = round(cx), fx = v > 0 ? x0 + 6 : x0;
+    for (let i = 0; i < 21; i++) i < 14 ? surc(x0 + (i >> 1), 125 + (i & 1), cols[ci]) : i < 17 && sur(x0 + i - 12, 124, 120, 150, 180);
+    add(fx, 125, [255, 250, 220], 0.3 + night), add(x0 + 6 - fx + x0, 125, [255, 20, 10], 0.2 + night);
+  }
+}
+
+export function draw(display, params) {
+  const P = params.s;
+  if (!P || P.h === undefined) return;
+  [F, LM] = [P.f, P.lm];
+  const hh = cl(P.h, 0, 1) * 3, i0 = min(2, floor(hh)), K = KEYS[i0].map((v, c) => mix(v, KEYS[i0 + 1][c], hh - i0));
+  // The hook goes behind the frame when the jib swings away from you.
+  const behind = sin(P.th) < -0.15, y = deckY(P) - 2, FLb = P.fl;
+  sky(P, K), clouds(P, K), light(P, K), ground(), behind && hook(P), building(P), yard(P), crane(P), mixer(P), cars(P), behind || hook(P);
+  // The welding arc, its sparks, and the floodlight beams in the dusk air.
+  if (P.welding) put(18, y, [235, 244, 255]), glow(18, y, [160, 190, 255], 0.36 + 0.24 * rnd());
+  for (const [x, y, , , l, px, py] of P.sp) put(px, py, [255, 120, 30], min(1, l * 1.4) * 0.6), put(x, y, [255, 170 + 80 * min(1, l), 70 * min(1, l)], min(1, l * 1.4));
+  if (P.h > 0.3) for (let i = 0, o = 0; i < N; i++, o += 3) if (FLb[i] > 0.01) for (let c = 0; c < 3; c++) F[o + c] += FLb[i] * 22 * FLC[c];
+  for (let i = 0, o = 0; i < N; i++, o += 3) display.setPixel(i & 63, i >> 6, min(255, F[o]) | 0, min(255, F[o + 1]) | 0, min(255, F[o + 2]) | 0);
+}
diff --git a/incoming/pattern-study/patterns/waggle-dance.js b/incoming/pattern-study/patterns/waggle-dance.js
new file mode 100644
index 000000000..6c5764f52
--- /dev/null
+++ b/incoming/pattern-study/patterns/waggle-dance.js
@@ -0,0 +1,609 @@
+// ===== Patternflow pattern =====
+// Title:   Waggle Dance
+// Family:  insect
+// Idea:    Bees crawl over one comb of an observation hive while foragers home from the flowers dance figures of eight, each waggle run as far from straight up as the flowers lie from the sun, with a ring of followers turned to face her.
+// Author:  patternflow-lab
+// Date:    2026-10-24
+// SPDX-License-Identifier: CC-BY-SA-4.0
+// Lineage: original, pattern round 24, after Karl von Frisch's reading of the honeybee's waggle dance
+// Round:   24
+// ===============================
+// @matrix 64x128
+// @knobs Light=0..1, Speed=0.2..3, Bees=80..240, Sun=-1..1
+//
+// Knob 1: Light. Daylight at 0, the window's sun lying across the glass in four panes; the curtain closes on the sun, a warm lamp takes over by 0.5, and towards 1 it turns to a red lamp the bees cannot see.
+// Knob 2: Speed. At 2 a waggle run takes about a second and a bee walks about a body length a second; 0.2 is ten times slower.
+// Knob 3: Bees. Eighty to 240; turned up, more walk in from the sides until they hide the comb.
+// Knob 4: Sun. The sun's bearing against the clover field: at 0.06 the runs point nearly straight up, and turning it swings every dance and slides the window's sun across the glass.
+// Buttons: K1 tap brings a forager home from a rich patch; she runs up from the entrance and dances long and hard, with more followers round her.
+
+const [W, H] = [64, 128];
+const N = W * H;
+// Cells six LEDs across the flats, rows five apart (a hexagon squashed by
+// four in a hundred, so every cell is drawn alike); the frame's top bar,
+// its bottom bar and the entrance slot in it.
+const [CW, RH, TOP, BOT, NC, NR, ENX] = [6, 5, 5, 123, 13, 27, 9];
+const Y0 = TOP + 2.5;
+const [EMPTY, HONEY, NECTAR, POLLEN, BROOD, LARVA, EGG] = [0, 1, 2, 3, 4, 5, 6];
+const [CRAWL, REST, DIP, FOLLOW, DANCE, HOME, EXIT] = [0, 1, 2, 3, 4, 5, 6];
+// Pollen: orange, yellow, ochre, rust, purple-grey, buff, olive, red-orange.
+const POLLENS = [[0.95, 0.52, 0.08], [0.95, 0.8, 0.16], [0.74, 0.54, 0.17], [0.6, 0.25, 0.1],
+  [0.44, 0.37, 0.5], [0.86, 0.68, 0.36], [0.55, 0.58, 0.24], [0.9, 0.4, 0.12]];
+// Bees: a dark race, the usual, a golden one. Thorax, then the amber bands.
+const THX = [[0.5, 0.37, 0.2], [0.78, 0.56, 0.24], [0.9, 0.68, 0.3]];
+const AMB = [[0.62, 0.44, 0.18], [1, 0.72, 0.2], [1, 0.84, 0.32]];
+const [DARK, HEAD, WING] = [[0.3, 0.18, 0.08], [0.14, 0.1, 0.06], [0.8, 0.84, 0.9]];
+const [SUNC, DAYC, WARM, REDC] = [[1, 0.84, 0.56], [1, 0.94, 0.82], [1, 0.66, 0.34], [1, 0.09, 0.035]];
+// Where the flowers lie, against the main field, and how often foragers come from each.
+const FIELDS = [0, 0, 0.95, -1.9];
+
+const { min, max, sin, cos, abs, sqrt, floor, round, exp, atan2, PI } = Math;
+const len = (a, b) => sqrt(a * a + b * b);
+const clamp = (v, a, b) => (v < a ? a : v > b ? b : v);
+const sm = (a, b, v) => ((v = clamp((v - a) / (b - a), 0, 1)), v * v * (3 - 2 * v));
+const wrap = (a) => a - 2 * PI * round(a / (2 * PI));
+const rnd = () => Math.random();
+function hash(a, b) {
+  let h = Math.imul(a, 374761393) ^ Math.imul(b, 668265263);
+  h = Math.imul(h ^ (h >>> 13), 1274126177);
+  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;
+}
+// Distance from a cell's centre in its own hexagon, 3 on the wall.
+const hexd = (dx, dy) => max(abs(dx), abs(0.5 * dx + 0.9 * dy), abs(0.5 * dx - 0.9 * dy));
+const cellX = (r, c) => CW * (c - 1) + (r & 1 ? 3.5 : 0.5);
+const cellY = (r) => Y0 + (r - 1) * RH;
+const cap = (t) => t === BROOD || t === HONEY;
+
+// Which cell each LED sits in, and where in it.
+function grid(S) {
+  for (let y = TOP; y < BOT; y++)
+    for (let x = 0; x < W; x++) {
+      const r0 = round((y + 0.5 - Y0) / RH) + 1;
+      let [best, next] = [99, 99];
+      const p = y * W + x;
+      for (let r = max(0, r0 - 1); r <= min(NR - 1, r0 + 1); r++) {
+        const off = r & 1 ? 3.5 : 0.5;
+        const c0 = round((x + 0.5 - off) / CW) + 1;
+        for (let c = max(0, c0 - 1); c <= min(NC - 1, c0 + 1); c++) {
+          const dx = x + 0.5 - cellX(r, c);
+          const dy = y + 0.5 - cellY(r);
+          const d = hexd(dx, dy);
+          if (d < best) {
+            next = best;
+            S.cid2[p] = S.cid[p];
+            best = d;
+            S.cid[p] = r * NC + c;
+            [S.hd[p], S.dx[p], S.dy[p]] = [d, dx, dy];
+          } else if (d < next) {
+            next = d;
+            S.cid2[p] = r * NC + c;
+          }
+        }
+      }
+    }
+}
+
+// Honey over the top and down the corners, a band of pollen, brood below.
+function layout(S) {
+  for (let r = 0; r < NR; r++)
+    for (let c = 0; c < NC; c++) {
+      const i = r * NC + c;
+      const [x, y] = [cellX(r, c), cellY(r)];
+      const e = len((x - 32) / 33, (y - 70) / 28) + 0.05 * (sin(x * 0.21 + y * 0.13) + sin(y * 0.29 - x * 0.17 + 2));
+      const u = rnd();
+      let t;
+      if (y < 24 || (e > 1.28 && y < 64)) t = u < 0.82 ? HONEY : u < 0.95 ? NECTAR : EMPTY;
+      else if (e > 1 && y < 72) t = u < 0.62 ? POLLEN : u < 0.78 ? NECTAR : EMPTY;
+      else if (e < 0.72) t = u < 0.68 ? BROOD : u < 0.78 ? LARVA : u < 0.81 ? EGG : EMPTY;
+      else if (e < 1) t = u < 0.34 ? LARVA : u < 0.48 ? EGG : u < 0.64 ? BROOD : u < 0.68 ? POLLEN : EMPTY;
+      else t = u < 0.12 ? POLLEN : u < 0.27 ? NECTAR : EMPTY;
+      [S.type[i], S.age[i], S.tint[i], S.gap[i], S.pol[i]] = [t, rnd(), rnd(), rnd() * 6.283, floor(rnd() * 8)];
+    }
+}
+
+// Each LED's colour as it would be in white light, and how much of the
+// sun reaches it: cell bottoms stay in shadow.
+function paint(S) {
+  const { base, expo } = S;
+  for (let p = 0; p < N; p++) {
+    const x = p % W;
+    const y = (p / W) | 0;
+    const q = p * 3;
+    let r, g, b;
+    let ex = 1;
+    let dim = 0.66;
+    if (y < TOP || y >= BOT) {
+      // Pine, the grain running along the bar, a groove where it meets the comb.
+      const gr = 0.8 + 0.2 * sin(x * 0.23 + 2 * sin(x * 0.07 + y * 1.3));
+      const edge = y === TOP - 1 || y === BOT ? 0.55 : 1;
+      const k = gr * edge * (0.9 + 0.1 * hash(p, 5));
+      [r, g, b] = [0.6 * k, 0.42 * k, 0.24 * k];
+      if (y > BOT + 1 && y < H - 1 && abs(x + 0.5 - ENX) < 5) [r, g, b] = [0.02, 0.015, 0.01];
+    } else {
+      const [i, d, dx, dy] = [S.cid[p], S.hd[p], S.dx[p], S.dy[p]];
+      const [t, tn, rr, lit] = [S.type[i], S.tint[i], len(dx, dy), -(dx + dy) / 3];
+      if (t === HONEY) {
+        dim = 1;
+        const k = (1 - 0.12 * (d / 2.6) ** 2 + 0.06 * lit) * (0.95 + 0.06 * hash(p, 1));
+        [r, g, b] = [(1 - 0.04 * tn) * k, (0.88 - 0.16 * tn) * k, (0.6 - 0.26 * tn) * k];
+      } else if (t === NECTAR) {
+        // Nectar: dark amber down in the cell, a bright meniscus round it, and a glint.
+        const f = (0.08 + 0.92 * sm(1.5, 2.4, d)) * (0.75 + 0.3 * tn);
+        [r, g, b] = [0.07 + 0.62 * f, 0.03 + 0.36 * f, 0.006 + 0.06 * f];
+        if (abs(dx + 1) < 0.6 && abs(dy + 1) < 0.7) [r, g, b] = [0.95, 0.9, 0.74];
+        ex = 0.6;
+      } else if (t === POLLEN) {
+        const c = POLLENS[S.pol[i]];
+        dim = 0.8;
+        // Packed down in the cell, its inside wall in shadow round it.
+        const k = (0.8 + 0.25 * tn) * (1 - 0.85 * sm(1.5, 2.3, d));
+        [r, g, b] = c.map((v, n) => v * k * (0.82 + 0.3 * hash(p, 2 + n)));
+        ex = 0.8;
+      } else if (t === BROOD) {
+        const k = (1 - 0.32 * (rr / 2.7) ** 2 + 0.1 * lit) * (hash(p, 6) < 0.14 ? 0.78 : 1) * (0.9 + 0.15 * tn);
+        [r, g, b] = [0.8 * k, 0.68 * k, 0.5 * k];
+      } else {
+        // An open cell: dark at the bottom, its lower inside wall catching the light.
+        const lip = sm(1.6, 2.4, d) * (dy > 0.5 ? 1 : 0.3);
+        const k = (0.04 + 0.1 * lip) * (0.75 + 0.5 * tn);
+        [r, g, b] = [k, k * 0.68, k * 0.38];
+        ex = 0.2 + 0.8 * lip;
+        if (t === LARVA) {
+          // The larva curled in a C on its bed of jelly, bigger as it grows.
+          const a = S.age[i];
+          const [R, th] = [0.4 + 1.1 * a, 0.45 + 0.55 * a];
+          const ang = wrap(atan2(dy, dx) - S.gap[i]);
+          let on = a < 0.3 ? sm(1.2, 0.5, rr) : sm(th + 0.3, th - 0.3, abs(rr - R)) * sm(0.5, 1, abs(ang));
+          if (rr < 1.9) [r, g, b] = [r + 0.18, g + 0.17, b + 0.14];
+          const sh = 0.82 + 0.18 * clamp(lit + 0.5, 0, 1) + 0.05 * sin(ang * 5);
+          r += (0.97 * sh - r) * on;
+          g += (0.94 * sh - g) * on;
+          b += (0.85 * sh - b) * on;
+          ex += (0.9 - ex) * on;
+        } else if (t === EGG && rr < 0.7) [r, g, b] = [0.86, 0.85, 0.78];
+      }
+      // The walls: pale wax round the honey, the rims of open cells lit,
+      // and a dark seam where two brood caps meet.
+      const w = sm(2.4, 2.6, d);
+      if (w > 0) {
+        const t2 = S.type[S.cid2[p]];
+        const pale = t === HONEY || t === NECTAR ? 1 : 0;
+        const seam = (t === BROOD || t2 === BROOD) && cap(t) && cap(t2) ? 0.15 : 1;
+        // Light from above rakes the slanted walls; the upright ones stand side on to it.
+        const k = (0.85 + 0.3 * hash(p, 8)) * seam * (!pale && abs(dx) > 2.6 ? 0.45 : 1);
+        r += ((0.34 + 0.18 * pale) * k - r) * w;
+        g += ((0.24 + 0.15 * pale) * k - g) * w;
+        b += ((0.11 + 0.08 * pale) * k - b) * w;
+        ex += ((seam < 1 ? 0.15 : 1) - ex) * w;
+      }
+    }
+    // The comb sits back in the hive's shade; the bees on it catch the light.
+    base[q] = r * dim;
+    base[q + 1] = g * dim;
+    base[q + 2] = b * dim;
+    expo[p] = ex;
+  }
+}
+
+// The window throws its four panes of sun on the glass; they slide and lean with the sun.
+function sunPatch(S, s) {
+  const [cx, cy, sh] = [32 + 22 * s, 74 - 6 * abs(s), -0.5 * s];
+  for (let p = 0; p < N; p++) {
+    const v = ((p / W) | 0) + 0.5 - cy;
+    const u = (p % W) + 0.5 - cx - sh * v;
+    let m = sm(22, 16, abs(u)) * sm(40, 33, abs(v));
+    m *= 1 - 0.85 * sm(1.9, 0.7, abs(u));
+    m *= 1 - 0.85 * sm(1.9, 0.7, abs(v + 5));
+    S.sun[p] = m;
+  }
+  S.sunK = s;
+}
+
+function newBee(S, x, y, h) {
+  const u = rnd();
+  const b = { x, y, h, m: CRAWL, t: rnd() * 3, v: 2.6 + 2.6 * rnd(), s: 1.12 + 0.14 * rnd(), tone: u < 0.18 ? 0 : u < 0.82 ? 1 : 2, ph: rnd() * 6.28, w: 0, wag: 0, wp: 0 };
+  S.bees.push(b);
+  return b;
+}
+
+// A bee to the dance floor on the lower comb, clear of the other dances.
+function spot(S) {
+  let best = [32, 104];
+  let far = -1;
+  for (let k = 0; k < 24; k++) {
+    const x = 12 + 40 * rnd();
+    const y = 80 + 33 * rnd();
+    // The lower the better, near the entrance, but well clear of the others.
+    const d = min(24, ...S.dances.map((D) => len(D.cx - x, D.cy - y))) + 0.1 * y;
+    if (d > far) [far, best] = [d, [x, y]];
+  }
+  return best;
+}
+
+function newDance(S, b, vig) {
+  const [cx, cy] = spot(S);
+  // A forager from a rich patch runs longer, keeps at it and draws more followers.
+  const D = { b, cx, cy, fl: FIELDS[floor(rnd() * 4)] + 0.12 * (rnd() - 0.5), L: vig ? 11 : 8 + 2.5 * rnd(), tw: vig ? 1.25 : 0.85 + 0.3 * rnd(),
+    tr: vig ? 0.9 : 1 + 0.3 * rnd(), tau: 0, side: rnd() < 0.5 ? -1 : 1, n: vig ? 26 : 9 + floor(10 * rnd()), amp: vig ? 1 : 0.65 + 0.2 * rnd(),
+    want: vig ? 10 : 6 + floor(3 * rnd()), on: false, foll: [], rec: 0, pc: floor(rnd() * 3) };
+  D.th = D.fl - S.sunA;
+  b.D = D;
+  S.dances.push(D);
+  return D;
+}
+
+// The bees nearest the dance turn and gather round it.
+function recruit(S, D, snap) {
+  const free = S.bees.filter((b) => (b.m === CRAWL || b.m === REST) && len(b.x - D.cx, b.y - D.cy) < 24);
+  free.sort((a, b) => len(a.x - D.cx, a.y - D.cy) - len(b.x - D.cx, b.y - D.cy));
+  for (const b of free) {
+    if (D.foll.length >= D.want) break;
+    Object.assign(b, { m: FOLLOW, D, a: atan2(b.x - D.cx, -(b.y - D.cy)), t: 5 + 10 * rnd() });
+    D.foll.push(b);
+    if (snap) {
+      const R = D.L / 2 + 3.4;
+      b.x = D.cx + R * sin(b.a);
+      b.y = D.cy - R * cos(b.a);
+      b.h = b.a + PI;
+    }
+  }
+}
+
+function seek(b, tx, ty, sp, dt) {
+  const [dx, dy] = [tx - b.x, ty - b.y];
+  const r = len(dx, dy);
+  if (r > 0.25) {
+    const want = atan2(dx, -dy);
+    const e = wrap(want - b.h);
+    b.h += clamp(e, -5 * dt, 5 * dt);
+    const st = min(r, sp * dt) * max(0.15, cos(e));
+    b.x += sin(b.h) * st;
+    b.y -= cos(b.h) * st;
+  }
+  return r;
+}
+
+function stepDance(S, D, dt) {
+  const b = D.b;
+  D.th += clamp(wrap(D.fl - S.sunA - D.th), -1.5 * dt, 1.5 * dt);
+  const [ux, uy] = [sin(D.th), -cos(D.th)];
+  if (!D.on) {
+    // The forager hurries up from the entrance to where she will dance.
+    b.m = HOME;
+    if (seek(b, D.cx - (ux * D.L) / 2, D.cy - (uy * D.L) / 2, D.n > 20 ? 13 : 9, dt) < 1.2) {
+      D.on = true;
+      b.m = DANCE;
+      recruit(S, D, false);
+    }
+    return;
+  }
+  D.tau += dt;
+  if (D.tau >= D.tw + D.tr) {
+    D.tau -= D.tw + D.tr;
+    D.side = -D.side;
+    if (--D.n <= 0) {
+      // Done: she goes back out, and some of her followers go after the flowers.
+      [D.gone, b.m, b.wag] = [true, EXIT, 0];
+      for (const f of D.foll) [f.m, f.t] = [rnd() < 0.4 ? EXIT : CRAWL, 1 + 2 * rnd()];
+      return;
+    }
+  }
+  let want;
+  if (D.tau < D.tw) {
+    const f = D.tau / D.tw - 0.5;
+    b.x = D.cx + ux * D.L * f;
+    b.y = D.cy + uy * D.L * f;
+    want = D.th;
+    b.wag = D.amp;
+    b.wp += dt * 2 * PI * 13;
+  } else {
+    const s = (D.tau - D.tw) / D.tr;
+    const ps = D.side * PI * s;
+    const [rx, ry] = [ux * cos(ps) - uy * sin(ps), ux * sin(ps) + uy * cos(ps)];
+    b.x = D.cx + (rx * D.L) / 2;
+    b.y = D.cy + (ry * D.L) / 2;
+    want = atan2(-D.side * ry, -D.side * rx);
+    b.wag = 0;
+  }
+  b.h += clamp(wrap(want - b.h), -14 * dt, 14 * dt);
+  // Followers keep their place round her, turned to face her, and drift with her.
+  D.foll = D.foll.filter((f) => f.m === FOLLOW && f.D === D);
+  D.rec -= dt;
+  if (D.rec <= 0) {
+    D.rec = 1.5;
+    if (D.foll.length < D.want) recruit(S, D, false);
+  }
+  const da = atan2(b.x - D.cx, -(b.y - D.cy));
+  for (const f of D.foll) {
+    f.a += dt * 0.35 * sin(wrap(da - f.a));
+    const R = D.L / 2 + 3.4 + 0.4 * sin(S.t * 2 + f.ph);
+    if (seek(f, D.cx + R * sin(f.a), D.cy - R * cos(f.a), 6, dt) < 1.2) f.h += clamp(wrap(atan2(b.x - f.x, -(b.y - f.y)) - f.h), -6 * dt, 6 * dt);
+    if ((f.t -= dt) <= 0) [f.m, f.t, f.h] = [CRAWL, 1 + 2 * rnd(), f.h + PI];
+  }
+}
+
+function crawl(S, b, dt) {
+  b.w += (rnd() - 0.5) * 10 * sqrt(dt);
+  b.w *= 1 - min(1, 1.5 * dt);
+  let want = null;
+  const ex = b.x < 4 ? 1 : b.x > W - 4 ? -1 : 0;
+  const ey = b.y < TOP + 4 ? 1 : b.y > BOT - 4 ? -1 : 0;
+  if (ex || ey) want = atan2(ex, -ey);
+  b.h += b.w * dt;
+  if (want !== null) b.h += clamp(wrap(want - b.h), -3 * dt, 3 * dt);
+  const st = b.v * dt;
+  b.x += sin(b.h) * st;
+  b.y -= cos(b.h) * st;
+}
+
+function step(S, dt) {
+  const { bees } = S;
+  for (const b of bees) {
+    const m = b.m;
+    if (m === DANCE || m === HOME || m === FOLLOW) continue;
+    if (m === EXIT) {
+      if (seek(b, ENX, BOT + 1.5, 7, dt) < 1.5) b.out = true;
+      continue;
+    }
+    // Others give the dancer and her followers room.
+    for (const D of S.dances) {
+      const [dx, dy] = [b.x - D.cx, b.y - D.cy];
+      const r = len(dx, dy);
+      if (D.on && r < D.L / 2 + 9) {
+        if (m !== CRAWL) b.t = 0;
+        b.x += (dx / (r + 0.01)) * 4 * dt;
+        b.y += (dy / (r + 0.01)) * 4 * dt;
+        b.h += clamp(wrap(atan2(dx, -dy) - b.h), -4 * dt, 4 * dt);
+      }
+    }
+    if (m === CRAWL) crawl(S, b, dt);
+    else if (m === REST) b.h += sin(S.t * 6 + b.ph) * 0.5 * dt;
+    if ((b.t -= dt) > 0) continue;
+    // Backing out of a cell, she turns away.
+    if (m === DIP) [b.x, b.y, b.h] = [b.x - sin(b.h) * 1.5, b.y + cos(b.h) * 1.5, b.h + PI * (0.6 + 0.8 * rnd())];
+    const u = rnd();
+    b.m = CRAWL;
+    b.t = 1 + 3 * rnd();
+    if (u < 0.28) [b.m, b.t] = [REST, 0.8 + 2.5 * rnd()];
+    else if (u < 0.5 && m !== DIP) {
+      // Head first into a cell: to feed a larva, take nectar or pack pollen.
+      const hx = round(b.x + sin(b.h) * 2.2 - 0.5);
+      const hy = round(b.y - cos(b.h) * 2.2 - 0.5);
+      if (hx >= 0 && hx < W && hy >= TOP + 2 && hy < BOT - 2) {
+        const i = S.cid[hy * W + hx];
+        const t = S.type[i];
+        if (t !== HONEY && t !== BROOD) {
+          const r = floor(i / NC);
+          [b.m, b.t] = [DIP, 2 + 4 * rnd()];
+          b.x = cellX(r, i % NC) - sin(b.h) * 1.5;
+          b.y = cellY(r) + cos(b.h) * 1.5;
+        }
+      }
+    }
+  }
+  for (const D of S.dances) stepDance(S, D, dt);
+  S.dances = S.dances.filter((D) => !D.gone);
+  for (const b of bees) if (b.D && (b.D.gone || (b.m !== FOLLOW && b.m !== DANCE && b.m !== HOME))) b.D = null;
+  // Bees shoulder each other apart; those still at a cell or dancing stand firm.
+  for (const a of bees) {
+    if (a.m === REST || a.m === DIP || a.m === DANCE) continue;
+    for (const b of bees) {
+      const dx = a.x - b.x;
+      const dy = a.y - b.y;
+      if (abs(dx) > 3.6 || abs(dy) > 3.6 || b === a) continue;
+      const r = len(dx, dy);
+      if (r < 3.6 && r > 0.01) {
+        a.x += (dx / r) * (3.6 - r) * 0.25;
+        a.y += (dy / r) * (3.6 - r) * 0.25;
+      }
+    }
+  }
+  S.bees = bees.filter((b) => !b.out);
+}
+
+export function setup(params) {
+  const S = { t: 0, started: false, sunA: 0, sunK: 9, next: 6, add: 0, c0: 4.2, c1: 8.5, cd: 0.55, bees: [], dances: [] };
+  for (const k of ["cid", "cid2"]) S[k] = new Int16Array(N);
+  for (const k of ["hd", "dx", "dy", "expo", "X", "amb", "pool", "sun"]) S[k] = new Float32Array(N);
+  for (const k of ["base", "A", "jit"]) S[k] = new Float32Array(N * 3);
+  for (const k of ["age", "tint", "gap"]) S[k] = new Float32Array(NR * NC);
+  for (const k of ["type", "pol"]) S[k] = new Uint8Array(NR * NC);
+  grid(S);
+  layout(S);
+  paint(S);
+  for (let p = 0; p < N; p++) {
+    const [x, y] = [p % W, (p / W) | 0];
+    S.amb[p] = 0.74 + 0.2 * (1 - y / H) + 0.03 * sin(x * 0.11 + y * 0.05) - 0.12 * ((x - 31.5) / 32) ** 4;
+    S.pool[p] = 0.42 + 0.6 * exp(-((x - 40) ** 2 + (y - 74) ** 2) / 3000);
+    const j = 0.94 + 0.12 * hash(p, 19);
+    for (let c = 0; c < 3; c++) S.jit[p * 3 + c] = j * (0.97 + 0.06 * hash(p, 20 + c));
+  }
+  params.s = S;
+}
+
+function start(S, n) {
+  // Bees thickest on the brood, two dances already going.
+  for (let k = 0; k < n; k++) {
+    let x, y;
+    for (let j = 0; j < 4; j++) {
+      x = 2 + 60 * rnd();
+      y = TOP + 3 + (BOT - TOP - 6) * rnd();
+      if (rnd() < 0.35 + 0.65 * sm(30, 70, y)) break;
+    }
+    newBee(S, x, y, rnd() * 6.28);
+  }
+  for (let k = 0; k < 2; k++) {
+    const b = newBee(S, 0, 0, 0);
+    const D = newDance(S, b, false);
+    Object.assign(D, { fl: k ? 0.08 : -0.1, cx: k ? 20 : 43, cy: k ? 111 : 102, on: true, tau: rnd() * (D.tw + D.tr), rec: 1.5 });
+    D.th = D.fl - S.sunA;
+    b.m = DANCE;
+    stepDance(S, D, 0);
+    b.h = D.tau < D.tw ? D.th : b.h;
+    recruit(S, D, true);
+  }
+}
+
+export function update(dt, input, params) {
+  if (!params.s) setup(params);
+  const S = params.s;
+  const k = input.knobValues || [0, 2, 0, 0.06];
+  dt = clamp(dt || 0, 0, 0.1);
+  S.light = clamp(k[0], 0, 1);
+  const tempo = clamp(k[1], 0.2, 3) / 2;
+  const want = round(clamp(k[2], 80, 240));
+  const sk = clamp(k[3], -1, 1);
+  S.sunA = sk * PI;
+  if (abs(sk - S.sunK) > 0.002) sunPatch(S, sk);
+  if (!S.started) {
+    S.started = true;
+    start(S, want);
+  }
+  const d = dt * tempo;
+  S.t += d;
+  // Clouds cross the sun now and then; the first one early.
+  if (S.t > S.c1 + 1.5) {
+    S.c0 = S.t + 8 + 20 * rnd();
+    S.c1 = S.c0 + 3 + 6 * rnd();
+    S.cd = 0.4 + 0.5 * rnd();
+  }
+  S.cloud = 1 - S.cd * sm(S.c0, S.c0 + 1.5, S.t) * sm(S.c1 + 1.5, S.c1, S.t);
+  const vig = input.btnPressed && input.btnPressed[0];
+  if ((S.next -= d) <= 0 || vig) {
+    if (S.dances.length < (vig ? 4 : 3)) {
+      const b = newBee(S, ENX + 4 * (rnd() - 0.5), BOT + 1, 0);
+      b.m = HOME;
+      newDance(S, b, vig);
+    }
+    if (!vig) S.next = 5 + 8 * rnd();
+  }
+  // Bees walk in from the sides, or go out at the entrance, to match the knob.
+  let ord = 0;
+  for (const b of S.bees) if (b.m <= FOLLOW) ord++;
+  if ((S.add -= dt) <= 0) {
+    S.add = 0.1;
+    if (ord < want) {
+      const l = rnd() < 0.5;
+      newBee(S, l ? -3 : W + 3, TOP + 8 + (BOT - TOP - 16) * rnd(), l ? PI / 2 : -PI / 2).t = 1.5;
+    } else if (ord > want + 2) {
+      const b = S.bees.find((b) => b.m === CRAWL);
+      if (b) b.m = EXIT;
+    }
+  }
+  step(S, d);
+}
+
+// One bee into the albedo: her body worked out on a 12 x 12 patch first,
+// then her shadow a step down and right, head, thorax, banded abdomen, wings.
+const PC = new Float32Array(144);
+const PP = new Uint8Array(144);
+function bee(S, b) {
+  const { A, X } = S;
+  const [s, fx, fy, dip, wg] = [b.s, sin(b.h), -cos(b.h), b.m === DIP, b.wag > 0];
+  const wag = wg ? b.wag * sin(b.wp) : b.m === REST ? 0.15 * sin(S.t * 9 + b.ph) : 0;
+  const [bl, th, am] = [wg ? 0.4 : 0, THX[b.tone], AMB[b.tone]];
+  const shim = 0.24 + 0.14 * sin(S.t * 2.3 + b.ph + b.x * 0.3);
+  // A box round her, the whole patch for a dancer and her blur.
+  const ax = wg ? 5 : s * (3.2 * abs(fx) + 1.9 * abs(fy)) + 0.5;
+  const ay = wg ? 5 : s * (3.2 * abs(fy) + 1.9 * abs(fx)) + 0.5;
+  const [x0, y0] = [floor(b.x - ax), floor(b.y - ay)];
+  const nw = min(12, floor(b.x + ax) - x0 + 2);
+  const nh = min(12, floor(b.y + ay) - y0 + 2);
+  for (let j = 0, k = 0; j < nh; j++)
+    for (let i = 0; i < nw; i++, k++) {
+      const X0 = x0 + i + 0.5 - b.x;
+      const Y0 = y0 + j + 0.5 - b.y;
+      const u = (X0 * fx + Y0 * fy) / s;
+      const v = (Y0 * fx - X0 * fy) / s - wag * (0.3 + 0.7 * clamp(-u / 2.5, 0, 1));
+      PC[k] = shape(u, v, s, dip, bl);
+      PP[k] = PART;
+    }
+  for (let j = 0, k = 0; j < nh; j++)
+    for (let i = 0; i < nw; i++, k++) {
+      const px = x0 + i;
+      const py = y0 + j;
+      const c = PC[k];
+      if (px < 0 || px >= W || py < 0 || py >= H) continue;
+      const p = py * W + px;
+      const q = p * 3;
+      const sh = i && j ? PC[k - nw - 1] : 0;
+      if (sh > 0) {
+        const f = 1 - 0.7 * sh * (1 - c);
+        A[q] *= f;
+        A[q + 1] *= f;
+        A[q + 2] *= f;
+      }
+      const X0 = px + 0.5 - b.x;
+      const Y0 = py + 0.5 - b.y;
+      const u = (X0 * fx + Y0 * fy) / s;
+      const v = (Y0 * fx - X0 * fy) / s - wag * (0.3 + 0.7 * clamp(-u / 2.5, 0, 1));
+      // A waggling dancer buzzes her wings into a pale blur round her.
+      let wa = wg ? 0.55 * clamp(1.6 - len((u + 0.7) / 1.5, v / 1.7), 0, 1) : 0;
+      if (c <= 0 && wa <= 0) continue;
+      const pt = PP[k];
+      const col = pt === 1 ? HEAD : pt === 2 ? th : null;
+      const st = u > -0.85 ? 1 : u > -1.35 ? 0 : u > -1.9 ? 0.8 : 0;
+      if (u > -2.2 && u < 0.3 && abs(v) > 0.35 && abs(v) < 1.15) wa = max(wa, shim);
+      const a = max(c, wa);
+      for (let n = 0; n < 3; n++) {
+        let e = col ? col[n] : DARK[n] + (am[n] - DARK[n]) * st;
+        e += (WING[n] - e) * wa;
+        A[q + n] += (e - A[q + n]) * a;
+      }
+      X[p] += (1 - X[p]) * a;
+    }
+  // A forager home from the field carries her pollen loads on her hind legs.
+  if (b.D && (b.m === DANCE || b.m === HOME)) {
+    const c = POLLENS[b.D.pc];
+    for (const sd of [-1, 1]) {
+      const px = round(b.x + s * (-0.7 * fx - sd * 1.25 * fy) - 0.5);
+      const py = round(b.y + s * (-0.7 * fy + sd * 1.25 * fx) - 0.5);
+      if (px < 0 || px >= W || py < 0 || py >= H) continue;
+      const q = (py * W + px) * 3;
+      [A[q], A[q + 1], A[q + 2], X[py * W + px]] = [...c, 1];
+    }
+  }
+}
+
+// Coverage of a bee's body at (u along, v across) in body lengths of
+// about five LEDs; PART says which piece.
+let PART = 0;
+function shape(u, v, s, dip, bl) {
+  let c = clamp((1 - len((u + 1.3) / 1.5, v / (1.12 + bl))) * 1.2 * s + 0.5, 0, 1);
+  PART = 3;
+  if (!dip || u < 0.3) {
+    const k = clamp((1 - len((u - 0.5) / 0.8, v)) * 0.9 * s + 0.5, 0, 1);
+    if (k > c) [c, PART] = [k, 2];
+  }
+  if (!dip) {
+    const k = clamp((1 - len((u - 1.65) / 0.6, v / 0.75)) * 0.7 * s + 0.5, 0, 1);
+    if (k > c) [c, PART] = [k, 1];
+  }
+  return c;
+}
+
+const knee = (c) => (c < 190 ? c : 190 + 65 * (1 - exp(-(c - 190) / 65)));
+
+export function draw(display, params) {
+  const S = params.s;
+  if (!S || !S.started) return;
+  const { A, X, base, expo, amb, sun, pool, jit } = S;
+  A.set(base);
+  X.set(expo);
+  for (const b of S.bees) if (b.m !== DANCE) bee(S, b);
+  for (const b of S.bees) if (b.m === DANCE) bee(S, b);
+  // The curtain closes on the sun first; the room light goes from daylight
+  // to a warm lamp over the hive by 0.5, and from that to the red lamp.
+  const L = S.light;
+  const [w, rd, pw] = [sm(0, 0.5, L), sm(0.5, 1, L), sm(0.15, 0.6, L)];
+  const dc = [0, 1, 2].map((c) => (DAYC[c] + (WARM[c] - DAYC[c]) * w + (REDC[c] - WARM[c]) * rd) * (1 - 0.1 * w - 0.1 * rd) * 255);
+  const sk = 0.9 * S.cloud * (1 - sm(0, 0.4, L)) * 255;
+  const o = [0, 0, 0];
+  for (let p = 0; p < N; p++) {
+    const q = p * 3;
+    const a = amb[p] + (pool[p] - amb[p]) * pw;
+    const s = sun[p] * X[p] * sk;
+    for (let c = 0; c < 3; c++) o[c] = knee(A[q + c] * (a * dc[c] + s * SUNC[c]) * jit[q + c]) | 0;
+    display.setPixel(p % W, (p / W) | 0, o[0], o[1], o[2]);
+  }
+}